:root {
  --color-bg-canvas:#f5f5f7;
  --color-bg-sidebar:#ececee;
  --color-bg-surface:#fff;
  --color-text-primary:#1d1d1f;
  --color-text-secondary:#68686d;
  --color-text-tertiary:#6e6e73;
  --color-border:#d8d8dc;
  --color-accent:#ff9f0a;
  --color-accent-strong:#c87500;
  --color-accent-soft:#ffe1a8;
  --color-danger:#d70015;
  --text-xs:12px;
  --text-sm:13px;
  --text-md:15px;
  --text-ui:16px;
  --text-section:20px;
  --text-title:28px;
  --text-editor-title:32px;
  --paper:var(--color-bg-surface);
  --canvas:var(--color-bg-canvas);
  --sidebar:var(--color-bg-sidebar);
  --line:var(--color-border);
  --text:var(--color-text-primary);
  --muted:var(--color-text-secondary);
  --accent:var(--color-accent);
  --selection:var(--color-accent-soft);
}
* { box-sizing:border-box; } body { margin:0; color:var(--text); font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","Apple SD Gothic Neo",sans-serif; background:var(--canvas); }.icon-sprite { position:absolute; width:0; height:0; overflow:hidden; }.icon { display:block; width:1.25em; height:1.25em; flex:0 0 auto; }
button,input,textarea,select { font:inherit; } button { cursor:pointer; border:0; }
.app-shell { display:grid; grid-template-columns:244px 332px minmax(390px,1fr); height:100vh; min-height:620px; overflow:hidden; }
.sidebar,.note-list-panel,.editor-panel { min-width:0; }
.sidebar { min-height:0; background:var(--sidebar); padding:22px 14px 14px; display:flex; flex-direction:column; border-right:1px solid #d8d8dc; }
.primary-button { display:inline-flex; align-items:center; justify-content:center; gap:7px; background:var(--accent); color:#1d1d1f; border-radius:8px; font-weight:650; padding:10px 13px; }.sidebar>.primary-button { width:100%; justify-content:flex-start; text-align:left; padding-left:15px; }
.nav { padding:18px 0 14px; }.nav-item { width:100%; padding:9px 9px; display:flex; align-items:center; gap:10px; border-radius:7px; color:#48484c; background:transparent; text-align:left; font-size:14px; }.nav-item b { margin-left:auto; font-size:12px; color:var(--muted); }.nav-item.active { background:rgba(255,255,255,.72); color:#171719; font-weight:650; }
.sidebar-contacts-scroll { flex:1; min-height:0; overflow-y:auto; overscroll-behavior:contain; }.sidebar-section-title { padding:10px 9px 7px; display:flex; justify-content:space-between; color:var(--muted); font-size:12px; font-weight:650; }.sidebar-section-toggle { display:flex; align-items:center; gap:5px; min-width:0; padding:0; background:transparent; color:inherit; font:inherit; }.sidebar-section-toggle:hover { color:#48484c; }.toggle-indicator { width:15px; height:15px; transition:transform .16s ease; }.sidebar-section-toggle[aria-expanded="false"] .toggle-indicator { transform:rotate(-90deg); }.sidebar-section-title:has(.sidebar-section-toggle[aria-expanded="false"]) { padding-bottom:10px; }.contact-list-heading { margin-top:8px; border-top:1px solid #d9d9dd; padding-top:14px; }.icon-button { display:grid; place-items:center; color:var(--muted); background:transparent; padding:3px; line-height:1; }.icon-button .icon { width:20px; height:20px; }.contact-search { display:flex; align-items:center; gap:6px; margin:0 5px 6px; padding:4px 6px; border:3px solid transparent; border-radius:999px; background:rgba(255,255,255,.58); color:#77777c; transition:border-color .16s ease, background-color .16s ease; }.contact-search.has-query { border-color:#a6a543; background:#f4f4f0; }.contact-search .icon,.search .icon,.dialog-contact-search .icon,.command-palette-search .icon { width:16px; height:16px; }.contact-search input { width:100%; min-width:0; border:0; outline:0; background:transparent; font-size:12px; }.contact-search input::-webkit-search-cancel-button { display:none; }.contact-search-clear-button { display:grid; place-items:center; width:19px; height:19px; flex:0 0 19px; padding:0; border-radius:50%; background:#85858a; color:#f7f7f8; }.contact-search-clear-button:hover { background:#616166; }.contact-search-clear-button .icon { width:13px; height:13px; }.contact-list { overflow:visible; }.contact-row { position:relative; display:flex; align-items:center; border-radius:7px; }.contact-row.selected,.contact-row:hover { background:rgba(255,255,255,.72); }.contact-item { width:100%; display:flex; align-items:center; gap:9px; padding:8px 9px; border-radius:7px; background:transparent; text-align:left; color:#3a3a3c; }.contact-row.selected .contact-item { font-weight:600; }.contact-list-more-button { display:grid; place-items:center; width:28px; height:28px; margin-right:4px; padding:0; border-radius:6px; background:transparent; color:#77777c; opacity:0; }.contact-list-more-button .icon { width:18px; height:18px; }.contact-row:hover .contact-list-more-button,.contact-list-more-button:focus-visible,.contact-list-more-button[aria-expanded="true"] { opacity:1; }.contact-list-more-button:hover { background:#e0e0e3; color:#3a3a3c; }.contact-list-more-menu { position:absolute; z-index:3; top:calc(100% - 3px); right:2px; min-width:128px; padding:5px; border:1px solid var(--line); border-radius:9px; background:#fff; box-shadow:0 10px 28px #0002; }.contact-list-more-menu button { width:100%; padding:8px 9px; border-radius:6px; background:transparent; color:#3a3a3c; text-align:left; font-size:13px; }.contact-list-more-menu button:hover { background:#f0f0f2; }.avatar { width:25px; height:25px; flex:0 0 25px; border-radius:50%; background:#d6d6da; display:grid; place-items:center; color:#5b5b60; font-size:11px; font-weight:700; }.contact-item small { display:block; margin-top:2px; color:var(--muted); font-size:11px; font-weight:400; }.empty-contacts { margin:8px 9px; color:var(--muted); font-size:12px; line-height:1.45; }.sidebar-footer { margin-top:auto; padding:13px 8px 0; color:#8e8e93; font-size:11px; }
.contact-list-row { position:relative; display:flex; align-items:center; border-radius:7px; }.contact-list-row.selected,.contact-list-row:hover { background:rgba(255,255,255,.72); }.contact-list-item { display:flex; flex:1; min-width:0; align-items:center; gap:8px; padding:8px 9px; border-radius:7px; background:transparent; color:#48484c; text-align:left; font-size:13px; }.contact-list-item span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.contact-list-row.selected .contact-list-item { color:#171719; font-weight:650; }.contact-list-count { margin:0 10px 0 5px; color:var(--muted); font-size:11px; }.contact-list-row .contact-list-more-button { flex:0 0 28px; margin:0; border-radius:50%; opacity:0; }.contact-list-row:hover .contact-list-more-button,.contact-list-row .contact-list-more-button:focus-visible,.contact-list-row .contact-list-more-button[aria-expanded="true"] { opacity:1; }.contact-list-more-menu { position:absolute; z-index:3; top:calc(100% - 3px); right:2px; min-width:140px; padding:5px; border:1px solid var(--line); border-radius:9px; background:#fff; box-shadow:0 10px 28px #0002; }.contact-list-more-menu button { width:100%; padding:8px 9px; border-radius:6px; background:transparent; color:#3a3a3c; text-align:left; font-size:13px; }.contact-list-more-menu button:hover { background:#f0f0f2; }.note-contact-lists { display:flex; align-items:center; flex-wrap:wrap; gap:4px; }.note-contact-lists button { padding:2px 5px; border-radius:4px; background:#fff1d6; color:#9a6107; font-size:10px; }.note-contact-lists button:hover { background:#ffe1a8; color:#754800; }.contact-list-checks { display:grid; gap:5px; padding:5px 0; }.list-check { display:flex; align-items:center; gap:8px; color:#4b4b50; font-size:13px; }.list-check input { width:15px; height:15px; padding:0; accent-color:var(--accent); }
.note-list-panel { background:#fafafa; border-right:1px solid var(--line); padding:27px 14px 14px; overflow:auto; }.panel-header { display:flex; align-items:flex-end; justify-content:space-between; padding:0 5px 17px; }.eyebrow { margin:0 0 4px; color:var(--muted); font-size:12px; font-weight:600; } h1 { margin:0; letter-spacing:-1px; font-size:27px; }.round-button { display:grid; place-items:center; border-radius:50%; width:31px; height:31px; background:#e9e9ec; color:#3b3b3d; }.round-button .icon { width:20px; height:20px; }.search { display:flex; gap:7px; align-items:center; background:#ececee; border:3px solid transparent; border-radius:999px; color:#77777c; padding:5px 8px; margin-bottom:13px; transition:border-color .16s ease, background-color .16s ease; }.search.has-query { border-color:#a6a543; background:#f4f4f0; }.search input { min-width:0; border:0; background:transparent; outline:0; width:100%; font-size:13px; }.search input::-webkit-search-cancel-button { display:none; }.search-clear-button { display:grid; place-items:center; width:21px; height:21px; flex:0 0 21px; padding:0; border-radius:50%; background:#85858a; color:#f7f7f8; }.search-clear-button:hover { background:#616166; }.search-clear-button .icon { width:14px; height:14px; }.note-list { display:flex; flex-direction:column; gap:2px; }.note-card { text-align:left; background:transparent; padding:12px 10px; border-radius:8px; width:100%; }.note-card:hover { background:#f0f0f2; }.note-card.selected { background:var(--selection); }.note-card-top { display:flex; justify-content:space-between; gap:10px; align-items:baseline; }.note-card h3 { margin:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:14px; letter-spacing:-.15px; }.note-card time { color:var(--muted); white-space:nowrap; font-size:11px; }.note-card p { margin:5px 0 0; color:#707076; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; font-size:12px; line-height:1.35; }.note-card mark { padding:0 1px; border-radius:2px; background:#ffe36e; color:inherit; }.note-card .tag { color:#a26400; margin-top:7px; font-size:11px; }
.segmented-tabs { display:flex; width:max-content; margin:0 5px 13px; padding:3px; border-radius:8px; background:#e9e9ec; }.segmented-tabs button { padding:6px 16px; border-radius:6px; background:transparent; color:#6f6f74; font-size:12px; font-weight:600; }.segmented-tabs button[aria-selected="true"] { background:#fff; color:#2c2c2f; box-shadow:0 1px 3px #0001; }.trash-contact-card { display:flex; align-items:center; gap:9px; width:100%; padding:11px 10px; border-radius:8px; background:transparent; color:#3a3a3c; text-align:left; }.trash-contact-card:hover { background:#f0f0f2; }.trash-contact-card.selected { background:var(--selection); }.trash-contact-card > span:nth-child(2) { min-width:0; }.trash-contact-card b,.trash-contact-card small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.trash-contact-card b { font-size:14px; }.trash-contact-card small { margin-top:3px; color:var(--muted); font-size:12px; }.trash-contact-card time { margin-left:auto; color:var(--muted); font-size:11px; white-space:nowrap; }
.editor-panel { background:var(--paper); position:relative; overflow:auto; }.empty-state { position:absolute; inset:0; display:grid; place-content:center; text-align:center; color:var(--muted); }.empty-state h2 { margin:14px 0 5px; color:#48484b; font-size:18px; }.empty-state p { margin:0; font-size:13px; }.empty-icon { color:#c5c5c9; }.empty-icon .icon { width:30px; height:30px; margin:auto; }.hidden { display:none!important; }.note-editor { min-height:100%; padding:27px clamp(28px,6vw,92px); display:flex; flex-direction:column; }.editor-topbar { display:flex; align-items:center; justify-content:space-between; min-height:30px; }.editor-topbar select { max-width:180px; border:0; background:transparent; color:#77777c; outline:0; font-size:12px; }.editor-actions { display:flex; align-items:center; gap:15px; }.editor-actions span { color:var(--muted); font-size:11px; }.text-button { background:transparent; padding:4px; color:var(--muted); font-size:12px; }.text-button.danger:hover { color:#d70015; }.title-input { border:0; outline:0; padding:29px 0 5px; width:100%; color:var(--text); font-size:31px; font-weight:700; letter-spacing:-1.2px; }.title-input::placeholder,textarea::placeholder { color:#c7c7cc; }.note-date { color:#99999e; font-size:12px; padding-bottom:24px; } textarea { resize:none; border:0; outline:0; min-height:calc(100vh - 190px); width:100%; color:#37373a; font-size:15px; line-height:1.75; }
.note-editor input:disabled,.note-editor textarea:disabled { background:transparent; color:#77777c; cursor:not-allowed; }
.contact-editor { min-height:100%; padding:27px clamp(28px,6vw,92px); }.contact-editor-label { color:var(--muted); font-size:12px; }.contact-field { display:grid; gap:7px; margin-top:27px; color:#6f6f74; font-size:12px; font-weight:650; }.contact-field input { width:100%; border:0; border-bottom:1px solid var(--line); outline:0; padding:8px 0; background:transparent; color:var(--text); font-size:18px; font-weight:500; }.contact-field input:disabled { color:var(--text); cursor:default; }.contact-editor-lists { margin-top:25px; }.contact-editor-lists p { margin:0 0 9px; color:var(--muted); font-size:12px; font-weight:650; }.contact-editor-lists .contact-list-checks { padding:0; }.contact-editor-lists .list-check input:disabled { opacity:1; }.contact-deleted-date { margin:25px 0 0; color:var(--muted); font-size:12px; }
dialog { width:min(390px,calc(100% - 32px)); border:0; border-radius:14px; padding:0; box-shadow:0 20px 60px #0003; } dialog::backdrop { background:#0004; } dialog form { padding:20px; display:grid; gap:11px; }.dialog-heading { display:flex; justify-content:space-between; align-items:center; margin-bottom:5px; }.dialog-heading h2 { margin:0; font-size:18px; } dialog input { border:1px solid var(--line); padding:10px; border-radius:7px; outline-color:var(--accent); }.dialog-actions { display:flex; justify-content:flex-end; gap:8px; margin-top:8px; }.secondary-button { padding:9px 13px; background:#ededf0; border-radius:8px; color:#404045; }
.command-palette { width:min(620px,calc(100% - 32px)); overflow:hidden; background:#fafafa; }.command-palette::backdrop { background:rgba(29,29,31,.28); backdrop-filter:blur(2px); }.command-palette-content { display:grid; }.command-palette-search { display:flex; align-items:center; gap:10px; padding:14px 16px; border-bottom:1px solid var(--line); color:#77777c; }.command-palette-search input { min-width:0; flex:1; border:0; outline:0; padding:2px 0; background:transparent; color:var(--text); font-size:16px; }.command-palette-search input::placeholder { color:#a5a5aa; }.command-palette kbd { display:inline-flex; align-items:center; justify-content:center; min-width:20px; min-height:20px; padding:2px 5px; border:1px solid #d5d5d9; border-bottom-color:#c5c5ca; border-radius:4px; background:#fff; box-shadow:0 1px 1px #0000000b; color:#77777c; font-family:inherit; font-size:10px; line-height:1.3; }.command-palette kbd .icon { width:12px; height:12px; }.command-palette-results { max-height:min(52vh,420px); overflow:auto; padding:8px; }.command-palette-section-label { margin:8px 8px 5px; color:var(--muted); font-size:11px; font-weight:700; }.command-palette-option { display:flex; align-items:center; gap:10px; width:100%; padding:9px 10px; border-radius:8px; background:transparent; color:#3a3a3c; text-align:left; }.command-palette-option:hover,.command-palette-option.selected { background:var(--selection); }.command-palette-option-icon { display:grid; place-items:center; width:27px; height:27px; flex:0 0 27px; border-radius:7px; background:#ececee; color:#66666b; }.command-palette-option-icon .icon { width:16px; height:16px; }.command-palette-option-main { min-width:0; flex:1; }.command-palette-option-title,.command-palette-option-description { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.command-palette-option-title { font-size:13px; font-weight:650; }.command-palette-option-description { margin-top:3px; color:var(--muted); font-size:11px; }.command-palette-option mark { padding:0; background:transparent; color:#9a6107; font-weight:700; }.command-palette-option-type { color:var(--muted); font-size:11px; white-space:nowrap; }.command-palette-empty { margin:0; padding:27px 8px; color:var(--muted); text-align:center; font-size:13px; }.command-palette-footer { display:flex; justify-content:space-between; gap:12px; padding:9px 16px; border-top:1px solid var(--line); color:var(--muted); font-size:11px; }.command-palette-footer span { display:flex; align-items:center; gap:4px; }.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.note-contact-actions { position:relative; display:flex; align-items:center; gap:4px; min-width:0; }.note-contact-link { max-width:min(260px,48vw); overflow:hidden; padding:5px 2px; background:transparent; color:#77777c; text-align:left; text-overflow:ellipsis; white-space:nowrap; font-size:12px; }.note-contact-link:not(:disabled):hover { color:#3a3a3c; text-decoration:underline; }.note-contact-link:disabled { cursor:default; }.contact-more-button { width:25px; height:25px; padding:0; font-size:14px; letter-spacing:1px; }.contact-more-button:disabled { cursor:default; opacity:.4; }.contact-more-menu { position:absolute; z-index:2; top:calc(100% + 7px); right:0; min-width:130px; padding:5px; background:#fff; border:1px solid var(--line); border-radius:9px; box-shadow:0 10px 28px #0002; }.contact-more-menu button { width:100%; padding:8px 9px; border-radius:6px; background:transparent; color:#3a3a3c; text-align:left; font-size:13px; }.contact-more-menu button:hover { background:#f0f0f2; }.contact-select-dialog,.contact-history-dialog { padding:20px; display:grid; gap:11px; }.dialog-contact-search { display:flex; align-items:center; gap:7px; padding:8px 10px; border-radius:8px; background:#ececee; color:#77777c; }.dialog-contact-search input { width:100%; border:0; outline:0; background:transparent; }.dialog-contact-list,.contact-history-list { display:grid; gap:2px; min-height:120px; max-height:280px; overflow:auto; }.dialog-contact-option,.contact-history-option { display:flex; align-items:center; gap:9px; width:100%; padding:8px; border-radius:7px; background:transparent; text-align:left; color:#3a3a3c; }.dialog-contact-option:hover,.dialog-contact-option.selected,.contact-history-option:hover { background:#f0f0f2; }.dialog-contact-option small,.contact-history-option small { display:block; margin-top:2px; color:var(--muted); font-size:11px; }.contact-history-description { margin:0; color:var(--muted); font-size:12px; line-height:1.5; }.contact-history-option time { margin-left:auto; color:var(--muted); font-size:11px; white-space:nowrap; }
@media (max-width:760px) { .app-shell { grid-template-columns:78px 280px minmax(330px,1fr); }.sidebar .primary-button,.nav-item { font-size:0; }.nav-item { justify-content:center; }.nav-item .icon { width:18px; height:18px; }.nav-item b,.sidebar-section-title span,.contact-item div,.sidebar-footer { display:none; }.contact-item { justify-content:center; }.sidebar-section-title { justify-content:center; }.note-editor { padding:24px 30px; } }
.contact-list-more-menu .danger-menu-item,.contact-list-more-menu .danger-menu-item:hover { color:#d70015; }
.contact-row .contact-list-more-button { flex:0 0 28px; border-radius:50%; }
/* Keep a menu opened near the bottom of the sidebar inside its scroll area. */
.contact-list-more-menu.menu-up { top:auto; bottom:calc(100% - 3px); }

/* Contact details dialog */
#contact-dialog { width:min(500px,calc(100% - 32px)); max-height:calc(100vh - 40px); overflow:auto; }
.contact-form-fields { display:grid; gap:13px; }
.contact-form-row { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.dialog-field { display:grid; gap:6px; min-width:0; }
.dialog-field > span { color:#636368; font-size:12px; font-weight:650; }
.dialog-field > span b { margin-left:3px; color:#b66a00; font-size:10px; }
.dialog-field input,.dialog-field textarea { width:100%; min-height:0; border:1px solid var(--line); border-radius:8px; outline:none; padding:10px 11px; background:#fff; color:var(--text); transition:border-color .15s,box-shadow .15s; }
.dialog-field textarea { min-height:72px; resize:vertical; font-size:13px; line-height:1.5; }
.dialog-field input:focus,.dialog-field textarea:focus { border-color:#e59a25; box-shadow:0 0 0 3px #ff9f0a24; }
.contact-list-picker { display:grid; gap:9px; margin-top:3px; padding:13px; border:1px solid var(--line); border-radius:11px; background:#fafafa; }
.contact-list-picker-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.contact-list-picker-heading h3 { margin:0; font-size:13px; }
.contact-list-picker-heading p { margin:3px 0 0; color:var(--muted); font-size:11px; }
.contact-list-picker-heading > span { flex:0 0 auto; padding:3px 7px; border-radius:999px; background:#fff1d6; color:#8b5705; font-size:10px; font-weight:700; }
.contact-list-picker-actions { display:flex; align-items:center; justify-content:flex-end; flex-wrap:wrap; gap:6px; }
.add-contact-list-button { display:inline-flex; align-items:center; gap:3px; padding:3px 1px; background:transparent; color:#8b5705; font-size:11px; font-weight:700; }
.add-contact-list-button:hover { color:#633d00; text-decoration:underline; }
.add-contact-list-button .icon { width:13px; height:13px; }
.contact-list-search { display:flex; align-items:center; gap:7px; padding:7px 9px; border:1px solid transparent; border-radius:8px; background:#ececee; color:#77777c; }
.contact-list-search:focus-within { border-color:#e59a25; background:#fff; box-shadow:0 0 0 3px #ff9f0a1d; }
.contact-list-search .icon { width:15px; height:15px; }
.contact-list-search input { min-width:0; width:100%; padding:0; border:0; outline:0; background:transparent; font-size:12px; }
.contact-list-inline-form { display:grid; grid-template-columns:minmax(0,1fr) auto auto; gap:6px; }
.contact-list-inline-form input { min-width:0; border:1px solid #d6d6db; border-radius:7px; outline:none; padding:7px 9px; background:#fff; font-size:12px; }
.contact-list-inline-form input:focus { border-color:#e59a25; box-shadow:0 0 0 3px #ff9f0a1d; }
.inline-add-button,.inline-cancel-button { padding:7px 9px; border-radius:7px; font-size:12px; font-weight:650; }
.inline-add-button { background:var(--accent); color:var(--text); }
.inline-cancel-button { background:#ececee; color:#646469; }
.contact-list-picker .contact-list-checks { max-height:146px; overflow:auto; padding:0; }
.contact-list-picker .list-check { position:relative; min-height:38px; padding:8px 9px; border:1px solid transparent; border-radius:8px; background:#fff; cursor:pointer; transition:border-color .15s,background-color .15s; }
.contact-list-picker .list-check:hover { border-color:#dedee2; background:#f7f7f8; }
.contact-list-picker .list-check:has(input:checked) { border-color:#f0b253; background:#fff8eb; }
.contact-list-picker .list-check input { position:absolute; opacity:0; pointer-events:none; }
.list-check-mark { display:grid; place-items:center; width:17px; height:17px; flex:0 0 17px; border:1.5px solid #b8b8bd; border-radius:5px; background:#fff; }
.list-check input:checked + .list-check-mark { border-color:var(--accent); background:var(--accent); }
.list-check input:checked + .list-check-mark::after { content:'✓'; color:#1d1d1f; font-size:11px; font-weight:800; }
.list-check-name { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:550; }
.contact-field textarea { min-height:80px; resize:none; line-height:1.55; }

/* Keep selected notes quiet: one small accent rather than a fully painted card. */
.note-card.selected { background:#fff8eb; box-shadow:inset 2px 0 0 var(--color-accent-strong); }

/* Contact name and list context share a single, scannable line. */
.contact-item { flex:1; min-width:0; width:auto; }
.contact-item-meta { display:flex; flex:1; align-items:center; min-width:0; gap:7px; }
.contact-item-meta > b { flex:0 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:13px; font-weight:600; }
.contact-item-lists { display:inline-flex; align-items:center; gap:3px; min-width:0; margin-left:auto; color:var(--color-text-secondary); font-size:11px; font-weight:500; white-space:nowrap; }
.contact-list-label { overflow:hidden; text-overflow:ellipsis; }
.contact-list-label.is-empty { color:var(--color-text-secondary); font-weight:400; }
.contact-list-label-more { display:inline-flex; align-items:center; justify-content:center; min-width:17px; height:17px; padding:0 4px; border-radius:999px; background:#ececee; color:var(--color-text-secondary); font-size:10px; line-height:1; }

/* Give the search caret its own flexible text area, clear of the icon. */
.contact-list-search { gap:9px; min-height:42px; padding:8px 12px; }
.contact-list-search .icon { flex:0 0 18px; width:18px; height:18px; }
.contact-list-search input { flex:1; min-width:0; line-height:1.5; caret-color:var(--color-accent-strong); }
.contact-list-picker-actions #contact-list-selected-count { flex:0 0 auto; color:#4b4b50; font-size:13px; font-weight:600; line-height:1.35; white-space:nowrap; }

@media (max-width:520px) { .contact-form-row { grid-template-columns:1fr; } }

/* Mobile uses one task-focused panel at a time instead of a clipped three-column grid. */
.panel-header-actions,.mobile-panel-open,.mobile-panel-close,.mobile-editor-back { display:none; }
@media (max-width:760px) {
  .app-shell { display:grid; grid-template-columns:minmax(0,1fr); grid-template-rows:minmax(0,1fr); height:100vh; height:100dvh; min-height:0; overflow:hidden; }
  .app-shell > .sidebar,.app-shell > .note-list-panel,.app-shell > .editor-panel { grid-area:1 / 1; width:100%; min-width:0; min-height:0; }
  .app-shell[data-mobile-view="list"] > .sidebar,.app-shell[data-mobile-view="list"] > .editor-panel,
  .app-shell[data-mobile-view="editor"] > .sidebar,.app-shell[data-mobile-view="editor"] > .note-list-panel,
  .app-shell[data-mobile-view="sidebar"] > .note-list-panel,.app-shell[data-mobile-view="sidebar"] > .editor-panel { display:none; }
  .sidebar { padding:18px 14px 14px; border-right:0; overflow:auto; }
  .mobile-panel-close { align-self:flex-end; margin:0 0 10px; }
  .sidebar > .primary-button { display:inline-flex; font-size:inherit; }
  .nav-item { justify-content:flex-start; padding:10px 9px; font-size:14px; }
  .nav-item b,.sidebar-section-title span,.contact-item div,.sidebar-footer { display:initial; }
  .sidebar-section-title { justify-content:space-between; }
  .contact-item { justify-content:flex-start; }
  .contact-item div { display:block; }
  .sidebar-footer { display:block; }
  .mobile-panel-close { display:inline-flex; align-items:center; padding:7px 9px; border-radius:7px; background:#e0e0e3; color:#3a3a3c; font-size:13px; }
  .note-list-panel { padding:20px 14px 14px; border-right:0; }
  .panel-header { padding-bottom:15px; }
  .panel-header-actions { display:flex; align-items:center; gap:8px; }
  .mobile-panel-open { display:inline-flex; align-items:center; gap:4px; padding:7px 9px; border-radius:7px; background:#e9e9ec; color:#3b3b3d; font-size:13px; }
  .mobile-panel-open .icon { width:17px; height:17px; }
  .round-button { width:40px; height:40px; }
  .note-editor,.contact-editor { padding:18px 20px 28px; }
  .editor-topbar { align-items:flex-start; gap:10px; }
  .editor-topbar-leading { display:flex; align-items:center; min-width:0; gap:8px; }
  .mobile-editor-back { display:inline-flex; align-items:center; gap:3px; flex:0 0 auto; padding:7px 2px; background:transparent; color:#48484c; font-size:13px; }
  .mobile-editor-back .icon { width:16px; height:16px; transform:rotate(180deg); }
  .editor-actions { gap:8px; }
  .title-input { padding-top:24px; font-size:28px; }
  textarea { min-height:calc(100dvh - 190px); }
  .contact-list-more-button,.contact-list-row .contact-list-more-button { width:44px; height:44px; flex-basis:44px; opacity:1; }
  .contact-search-clear-button,.search-clear-button,.contact-more-button { width:40px; height:40px; flex-basis:40px; }
  .icon-button { min-width:40px; min-height:40px; }
}

:where(button, a, input, textarea, select, [tabindex]):focus-visible { outline:2px solid #c87500; outline-offset:2px; }
.search:focus-within,.contact-search:focus-within { border-color:#c87500; background:#fff; }

/* Design-system normalization: semantic states, readable metadata, and a compact type scale. */
.contact-search.has-query,.search.has-query { border-color:var(--color-accent-strong); background:#fff8eb; }
.contact-search,.search,.dialog-contact-search,.command-palette-search,.contact-list-search { color:var(--color-text-secondary); }
.title-input::placeholder,textarea::placeholder,.command-palette-search input::placeholder { color:var(--color-text-tertiary); opacity:1; }
.eyebrow,.sidebar-section-title,.contact-item small,.sidebar-footer,.note-card time,.note-date,.editor-actions span,.contact-editor-label,.contact-editor-lists p,.contact-deleted-date,.command-palette-section-label,.command-palette-option-description,.command-palette-option-type,.command-palette-footer,.contact-history-option time { color:var(--color-text-secondary); }
.contact-item small,.sidebar-footer,.note-card time,.note-card .tag,.note-date,.editor-actions span,.contact-editor-label,.contact-editor-lists p,.contact-deleted-date,.command-palette-section-label,.command-palette-option-description,.command-palette-option-type,.command-palette-footer,.contact-history-option time { font-size:var(--text-xs); }
.contact-search input,.search input,.contact-list-search input,.note-card p,.trash-contact-card small { font-size:var(--text-sm); }
.note-card .tag { color:#8b5705; }
.note-contact-lists button { color:#8b5705; font-size:var(--text-xs); }
.text-button.danger,.contact-list-more-menu .danger-menu-item { color:var(--color-danger); }
.text-button.danger:hover { color:#a40010; }
.note-card.selected,.trash-contact-card.selected { box-shadow:inset 3px 0 0 var(--color-accent-strong); }
h1 { font-size:var(--text-title); }
.title-input { font-size:var(--text-editor-title); }
.empty-state h2,.dialog-heading h2 { font-size:var(--text-section); }
@media (max-width:760px) { .title-input { font-size:var(--text-title); } }

/* Selected notes use only a subtle background. */
.note-card.selected { box-shadow:none; }

.auth-screen { min-height:100vh; display:grid; place-content:center; gap:14px; padding:32px; text-align:center; background:var(--paper); }
.auth-screen[hidden],.app-shell[hidden] { display:none; }
.auth-screen h1 { margin:0; }.auth-screen p { margin:0; color:var(--muted); }.auth-screen .primary-button { justify-content:center; margin-top:10px; }.auth-logo { width:52px; height:52px; margin:auto; }.auth-message { max-width:360px; color:var(--color-danger)!important; font-size:12px; line-height:1.5; }.sidebar-footer { display:flex; justify-content:space-between; gap:8px; }.sidebar-footer button { padding:0; background:transparent; color:inherit; font:inherit; text-decoration:underline; }

/* Note title and body stay visually clean while editing. */
.note-editor .title-input:focus-visible,
.note-editor textarea:focus-visible { outline:0; }