/* Quiet Navy 01 — approved 2026-10-05. Loaded after screen styles.
   Public Sans + Pretendard are self-hosted; licenses in fonts/quiet-navy/.
   Japanese/Chinese use native CJK fallback, not a claim of complete translation. */
:root,[data-theme='light']{
 --cream:#fff;--bg:#fff;--surface:#fff;--surface-alt:#f3f6fb;
 --primary:#011f5b;--primary-l:#254b85;--primary-d:#001541;--on-primary:#fff;
 --accent:#a41034;--accent-bg:#fbf0f3;--text:#142332;--text-pri:#142332;
 --text-sec:#566474;--text-ter:#626e7b;--line:#e3e7ec;--line-strong:#c9d1dc;
 --outside-bg:#f2f3f5;--qn-navy:#011f5b;--qn-crimson:#a41034;
 --font-script:'PP Pretendard','Apple SD Gothic Neo','Malgun Gothic',sans-serif;
 --font-ui:'PP Public',var(--font-script),system-ui,sans-serif;
 --font-display:var(--font-ui);--radius-card:22px;--radius-btn:16px;
 --r-sm:12px;--r-md:16px;--r-lg:22px;--r-xl:28px;
 --shadow-card:none;--shadow-1:none;--shadow-2:0 4px 16px rgb(1 31 91 / 6%);
 --fs-xs:.75rem;--fs-sm:.875rem;--fs-base:1rem;--fs-md:1.125rem;
 --fs-lg:1.375rem;--fs-xl:1.625rem;--fs-display:2rem;
 --av-1:#274669;--av-2:#496255;--av-3:#435e78;--av-4:#64586f;
 --av-5:#725a40;--av-6:#79445a;--av-7:#505c70;--av-8:#596244;
 --tag-fg:#344f76;--tag-bg:#eef2f8;
}
html:lang(ja){--font-script:'Noto Sans JP','Hiragino Kaku Gothic ProN','Yu Gothic',sans-serif}
html:lang(zh){--font-script:'Noto Sans SC','PingFang SC','Microsoft YaHei',sans-serif}
[data-theme='dark']{
 --cream:#141b25;--bg:#141b25;--surface:#19232f;--surface-alt:#202c3d;
 --primary:#a6c3f1;--primary-l:#c6d8f5;--primary-d:#c6d8f5;--on-primary:#101f35;
 --accent:#ef9faa;--accent-bg:#36232e;--text:#edf1f7;--text-pri:#edf1f7;
 --text-sec:#b3becc;--text-ter:#a9b6c8;--line:#344050;--line-strong:#536176;
 --outside-bg:#0d131c;--qn-navy:#edf1f7;--qn-crimson:#ef9faa;
 --tag-fg:#bdd0ee;--tag-bg:#26354c;
}
@media(prefers-color-scheme:dark){:root:not([data-theme='light']):not([data-theme='dark']){
 --cream:#141b25;--bg:#141b25;--surface:#19232f;--surface-alt:#202c3d;
 --primary:#a6c3f1;--primary-l:#c6d8f5;--primary-d:#c6d8f5;--on-primary:#101f35;
 --accent:#ef9faa;--accent-bg:#36232e;--text:#edf1f7;--text-pri:#edf1f7;
 --text-sec:#b3becc;--text-ter:#a9b6c8;--line:#344050;--line-strong:#536176;
 --outside-bg:#0d131c;--qn-navy:#edf1f7;--qn-crimson:#ef9faa;
 --tag-fg:#bdd0ee;--tag-bg:#26354c;
}}
html{font-synthesis:none}body{font-family:var(--font-ui);line-height:1.6;background:var(--outside-bg);color:var(--text)}
button,input,textarea,select{font-family:inherit}input,textarea,select{font-size:1rem}
button,a,input,textarea,select{touch-action:manipulation}
button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,summary:focus-visible{outline:3px solid #4475bf;outline-offset:3px}
.phone-shell{max-width:480px;background:var(--bg)}.page-content{padding-bottom:calc(100px + env(safe-area-inset-bottom,0px))}
.page-title,.greeting-title,.detail-name,.empty-title,.modal-title,.rh-header h1{font-family:var(--font-ui);font-weight:600;letter-spacing:-.025em;line-height:1.4;overflow-wrap:anywhere}
.pp-wordmark{display:inline-flex;flex-direction:column;align-items:flex-start;font-family:'PP Public',sans-serif;font-size:1.0625rem;font-weight:400;line-height:1.18;letter-spacing:.09em;color:var(--qn-navy);text-decoration:none;font-synthesis:none;flex-shrink:0}
.pp-wordmark>span{display:block}.pp-wordmark>span:last-child{color:var(--qn-crimson)}
.qn-brand-row{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:56px;margin-bottom:30px}
.qn-brand-inset{margin:0;padding:24px 28px 12px;min-height:80px}
.page-header-row{padding:24px 28px 20px}.page-header{padding:24px 28px}.page-title{font-size:1.875rem}.greeting-title{font-size:1.875rem}
.page-action-icon,.detail-back,.detail-menu-btn,.icon-btn{min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center}
.tab-bar,[data-theme='dark'] .tab-bar{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));max-width:480px;gap:0;background:var(--bg);backdrop-filter:none;padding:10px 12px calc(14px + env(safe-area-inset-bottom,0px));border-top:1px solid var(--line)}
.tab-bar .tab-item{min-width:0;min-height:48px;gap:5px;padding:4px 3px;font-size:.6875rem;font-weight:400;line-height:1.35;color:var(--text-sec);text-align:center;text-decoration:none}
.tab-bar .tab-item.active{color:var(--primary);font-weight:600}.tab-bar .tab-item svg{width:22px;height:22px;flex-shrink:0;stroke-width:1.7}.tab-bar .tab-item span{overflow-wrap:anywhere;max-width:100%}
.btn{min-height:48px;padding:12px 20px;border-radius:16px;font-size:.9375rem;font-weight:600;line-height:1.5;text-align:center;transition:background-color 120ms ease,color 120ms ease,transform 120ms ease}
.btn-sm{min-height:44px;font-size:.875rem;padding:10px 16px}.btn-primary{box-shadow:none}.btn-ghost{background:var(--bg);border:1px solid var(--line-strong)}
.form-input,.form-select,.form-textarea{border:1px solid var(--line-strong);border-radius:16px;background:var(--bg);color:var(--text);font-size:1rem;line-height:1.6;padding:13px 16px}
.form-label{font-size:.875rem;font-weight:600}.form-group{margin-bottom:22px}.modal-sheet{border-radius:26px 26px 0 0;background:var(--bg)}
.relationship-home{padding:26px 28px 30px}.relationship-home .rh-header{margin-top:8px}.relationship-home .rh-header h1{font-size:2rem;font-weight:600;line-height:1.43;margin:14px 0 18px;letter-spacing:-.035em}
.relationship-home .rh-eyebrow{font-size:.75rem;letter-spacing:.02em}.relationship-home .rh-intro{font-size:.9375rem;line-height:1.85;margin:0 0 30px;max-width:36ch}
.relationship-home .rh-profile{border:0;background:transparent}.relationship-home .rh-promises{padding:8px 16px;margin-bottom:26px;border:1px solid var(--line);border-radius:20px;background:var(--surface-alt);box-shadow:none}
.relationship-home .rh-filters{gap:8px}.relationship-home .rh-filter{font-size:.8125rem;padding:10px 13px;min-height:44px;border-radius:24px;font-weight:400;box-shadow:none}.relationship-home .rh-filter.is-selected{font-weight:600}
.relationship-home .rh-explanation{font-size:.75rem;line-height:1.75;margin:16px 0 10px}
.relationship-home .rh-person{min-height:96px;padding:20px 0;gap:14px;border-bottom:1px solid var(--line)}
.relationship-home .rh-person>.avatar{width:48px;height:48px;font-size:1rem;box-shadow:none}.rh-person-content{min-width:0}
.relationship-home .rh-person-content strong{font-size:1.0625rem;font-weight:600;line-height:1.5;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.relationship-home .rh-reasons{font-size:.8125rem;line-height:1.65;margin-top:4px}
.relationship-home .rh-birthday{color:var(--accent)}.relationship-home .rh-record{margin-top:28px;min-height:52px;border-radius:16px}
.relationship-home .rh-footer{margin-top:32px;padding-top:20px;border-top:1px solid var(--line);gap:4px 20px}.relationship-home .rh-footer a{font-size:.8125rem;min-height:44px;display:inline-flex;align-items:center}
.rh-empty{padding:38px 8px}.rh-empty h2{font-size:1.25rem;line-height:1.5}.rh-empty p{line-height:1.8}
.search-form-solo{padding:0 28px;margin-bottom:18px}.search-form-solo .search-bar{min-height:54px;border:1px solid var(--line);border-radius:18px;background:var(--surface-alt);box-shadow:none}.search-input{font-size:.9375rem!important;min-width:0}
.ask-entry{margin:0 28px 22px;padding:12px 0;background:transparent;border:0;font-size:.875rem;color:var(--primary);box-shadow:none}

.filter-chip{min-height:44px;padding:10px 14px;font-size:.8125rem;font-weight:400;border-radius:24px}.filter-chip.active{font-weight:600}.chip-count{font-size:.6875rem}
.person-row{padding:20px 28px;min-height:94px;gap:14px}.person-row .avatar-md{width:46px;height:46px;font-size:1rem;font-weight:600;box-shadow:none}.person-name{font-size:1.0625rem;font-weight:600;line-height:1.5}.person-name-text{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.person-role{font-size:.8125rem;line-height:1.6;margin-top:4px}.person-meta{max-width:72px;font-size:.6875rem}.last-seen{font-size:.6875rem;line-height:1.5;overflow-wrap:anywhere}.tag{font-size:.6875rem;line-height:1.5;padding:3px 8px}.tag-new{background:var(--accent-bg);color:var(--accent);font-weight:600}.person-row-new{background:transparent}.divider-line{background:var(--line);margin-left:28px;margin-right:28px}.depth-dots{gap:3px}
.empty-state{padding:40px 28px}.empty-desc{font-size:.9375rem;line-height:1.8}.empty-title{font-size:1.375rem}
html:lang(ko) :is(h1,h2,h3,.empty-title,.page-title){word-break:keep-all;overflow-wrap:anywhere}
html:lang(ja) :is(h1,h2,h3),html:lang(zh) :is(h1,h2,h3){word-break:normal;line-break:strict;letter-spacing:0}
@media(max-width:359px){.relationship-home{padding-left:20px;padding-right:20px}.qn-brand-inset,.page-header-row,.page-header{padding-left:20px;padding-right:20px}.person-row{padding-left:20px;padding-right:20px}.relationship-home .rh-header h1{font-size:1.75rem}.person-meta{max-width:58px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}
.qn-input-methods{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:20px 0 12px}.qn-input-button{display:flex;align-items:center;justify-content:center;gap:9px;min-height:56px;padding:10px 12px;border:1px solid var(--line);border-radius:28px;background:var(--surface-alt);color:var(--primary);font:600 .875rem/1.5 var(--font-ui);cursor:pointer}.qn-input-symbol{width:32px;height:32px;flex-shrink:0;border-radius:50%;display:grid;place-items:center;background:var(--surface)}.qn-input-button.big-mic-btn-recording{border-color:var(--accent);color:var(--accent)}.qn-record-notice{font-size:.8125rem;line-height:1.8;color:var(--text-sec);margin:14px 0 22px;overflow-wrap:anywhere}.qn-photo-dialog{width:min(480px,calc(100% - 32px));max-height:calc(100dvh - 40px);overflow:auto;padding:26px;border:1px solid var(--line);border-radius:24px;background:var(--surface);color:var(--text)}.qn-photo-dialog::backdrop{background:color-mix(in srgb,var(--text) 35%,transparent)}.qn-photo-dialog h2{font-size:1.25rem;line-height:1.5}.qn-photo-picker{display:flex;align-items:center;justify-content:center;gap:12px;min-height:56px;border:1px dashed var(--text-sec);border-radius:16px;padding:16px;cursor:pointer}.qn-photo-dialog img{max-width:100%;max-height:200px;object-fit:contain;margin:18px auto;border-radius:12px}.qn-photo-dialog textarea{width:100%;margin:12px 0;padding:14px;border:1px solid var(--text-sec);border-radius:16px;background:var(--bg);color:var(--text);font:inherit;line-height:1.8}.qn-photo-dialog [hidden]{display:none!important}.qn-photo-actions{display:flex;gap:10px;margin-top:20px}.qn-photo-actions button{flex:1;min-width:0;white-space:normal;min-height:48px}.qn-photo-dialog #photoNoteStatus{font-size:.875rem;line-height:1.7;margin-top:16px}.btn-ocr-scan,.qn-card-entry{display:inline-flex;align-items:center;justify-content:center;min-height:52px;border:1px solid var(--line);border-radius:18px;background:var(--surface-alt);color:var(--primary);padding:13px 22px;box-shadow:none}
.detail-profile{padding:32px 28px 28px}.detail-name{font-family:var(--font-ui);font-size:1.875rem;font-weight:600;line-height:1.5;letter-spacing:-.025em}.detail-role,.detail-facts{font-size:.875rem;line-height:1.7}.person-primary-actions{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:8px 28px 22px}.person-primary-actions .btn{min-height:52px;white-space:normal;text-align:center}.person-channel-grid{display:flex;flex-wrap:wrap;gap:8px;margin:0 28px 32px;scroll-margin-top:20px}.channel-button{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:46px;padding:10px 13px;border:1px solid var(--line);border-radius:14px;background:var(--surface-alt);color:var(--primary);font:400 .8125rem/1.5 var(--font-ui);text-decoration:none;max-width:100%}.channel-button .channel-svg{width:18px;height:18px;flex-shrink:0}.channel-button-inactive{background:var(--bg);color:var(--text-sec);border-style:dashed;opacity:.65;cursor:default}.relationship-details{margin:24px 28px;border-top:1px solid var(--line)}.relationship-details summary{padding:18px 0;min-height:52px;font-size:.9375rem;cursor:pointer}.relationship-details .relation-meta-row{padding:10px 0}.summary-card,.notes-card,.loops-card{border-radius:22px;box-shadow:none}.log-who-row{margin:20px 28px}.write-textarea{min-height:180px;font-size:1rem;line-height:1.85}.rec-reassure-text,.smart-remind-hint{font-size:.8125rem;line-height:1.8}.template-row{display:none}.log-controls{box-shadow:none;background:transparent}.log-controls .time-chips{max-width:100%}
@media(max-width:359px){.qn-input-methods{gap:8px}.qn-input-button{gap:6px;padding:10px 8px;font-size:.8125rem}.qn-input-symbol{width:27px;height:27px}.person-primary-actions,.person-channel-grid,.relationship-details{margin-left:20px;margin-right:20px}}
.person-channel-grid .channel-button{flex:0 0 auto;flex-direction:row;width:auto;min-width:0;min-height:44px;white-space:nowrap}.person-channel-grid .channel-button span{font-size:inherit}.person-channel-grid .channel-button-inactive{opacity:.7}
.qn-input-button{gap:6px;padding:10px 8px;font-size:.8125rem}.qn-input-symbol{width:24px;height:24px}.qn-log-options{margin:18px 28px 26px;border-bottom:1px solid var(--line)}.qn-log-options>summary{padding:14px 0;min-height:48px;font-size:.8125rem;color:var(--text-sec);cursor:pointer}.qn-log-options .log-controls{margin:0;border:0;padding:12px 0}.rec-reassure{background:transparent;border:0;box-shadow:none;padding:8px 0}.rec-reassure-icon{display:none}
.ocr-card-row .qn-record-notice{width:100%;min-width:0;max-width:100%;margin:14px 0 10px;overflow-wrap:anywhere}.ocr-card-row .ocr-status{margin-left:0;margin-right:0;padding-left:0;padding-right:0;max-width:100%;overflow-wrap:anywhere}
.about-story-line{display:block;text-wrap:pretty}.about-story-intro{margin-bottom:56px}.about-story .about-story-intro .about-story-lead{margin-bottom:18px}.about-story-chapter{margin-bottom:44px}.about-story-chapter p{margin-bottom:20px}.about-story h1{text-wrap:balance}html:lang(ko) .about-story{word-break:keep-all}
.about-story{padding:32px 28px 48px;overflow-wrap:anywhere}.about-story-header{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:64px}.about-story-header>a{min-height:44px;display:inline-flex;align-items:center;font-size:.8125rem;color:var(--text-sec)}.about-story h1{font-size:1.875rem;line-height:1.45;font-weight:600;letter-spacing:-.025em;margin:0 0 24px}.about-story p{font-size:.9375rem;line-height:1.95;margin:0 0 28px;color:var(--text-sec)}.about-story .about-story-lead{font-size:1rem;margin-bottom:60px}.about-story h2{font-size:1.125rem;line-height:1.65;font-weight:600;margin:0 0 28px}.about-story .about-story-closing{margin-top:44px;color:var(--primary);font-weight:600}.about-story .about-story-feedback{font-size:.8125rem;margin-top:40px}.about-story footer{display:flex;flex-wrap:wrap;gap:20px;border-top:1px solid var(--line);padding-top:24px;font-size:.75rem}.about-story footer a{color:var(--text-sec);min-height:44px;display:inline-flex;align-items:center}
.about-story-header{margin-bottom:36px}.about-story-intro{margin-bottom:28px}.about-story .about-story-intro .about-story-lead{margin-bottom:18px}.about-story h2{margin-bottom:18px}.about-story p{line-height:1.8;margin-bottom:20px}.about-story-chapter{margin-bottom:20px}.about-story .about-story-closing{margin-top:26px}.about-story .about-story-feedback{margin-top:24px}html:lang(ko) .about-story h1{font-size:clamp(1.1rem,4.9vw,1.45rem);letter-spacing:-.025em;text-wrap:initial}
.about-story h1,html:lang(ko) .about-story h1{font-size:1.25rem;line-height:1.45;letter-spacing:-.02em;overflow-wrap:normal;word-break:normal;text-wrap:pretty}.about-story h2{font-size:1rem;line-height:1.65}.about-story p,.about-story .about-story-lead{font-size:.9375rem;line-height:1.8}.about-story .about-story-feedback{font-size:.8125rem}.page-title,.greeting-title,.detail-name,.rh-header h1{font-size:1.5rem}.relationship-home .rh-header h1{font-size:1.5rem}
html:has(body.qn-auth-page),body.qn-auth-page{background:var(--outside-bg);color:var(--text)}.qn-auth-page .login-shell{max-width:480px;background:var(--bg);padding:40px 24px;overflow:visible;justify-content:flex-start}.qn-auth-page .login-shell::before,.qn-auth-page .login-shell::after,.qn-auth-page .login-logo{display:none}.qn-auth-page .login-content{width:100%;max-width:360px}.qn-auth-page .login-brand{font-family:var(--font-ui);font-size:1rem;line-height:1.18;margin:0 0 32px;color:var(--primary);text-align:left;align-self:flex-start}.qn-auth-page .login-card{background:var(--surface);border:1px solid var(--line);box-shadow:none;backdrop-filter:none;border-radius:22px;width:100%;padding:24px 20px}.qn-auth-page .login-card h2{font-family:var(--font-ui);font-size:1.375rem;line-height:1.5;color:var(--text);margin-bottom:20px}.qn-auth-page .login-label,.qn-auth-page .login-desc,.qn-auth-page .login-note,.qn-auth-page .login-links,.qn-auth-page .login-links a{color:var(--text-sec);font-family:var(--font-ui)}.qn-auth-page .login-input{background:var(--bg);border:1px solid var(--line-strong);color:var(--text);font-family:var(--font-ui);font-size:1rem;min-height:48px}.qn-auth-page .login-input::placeholder{color:var(--text-sec);opacity:.8}.qn-auth-page .login-btn{background:var(--primary);color:var(--on-primary);font-family:var(--font-ui);font-size:.9375rem;min-height:48px}.qn-auth-page .login-card>div[style]{color:var(--text-sec)!important}.qn-auth-page .login-card>div[style]>span[style]{background:var(--line)!important}.qn-auth-page .login-error{background:var(--accent-bg);color:var(--accent)}.qn-auth-page .login-success{color:var(--text)}
.qn-auth-page .login-check,.qn-auth-page .login-check a,.qn-auth-page .login-strength-text{color:var(--text-sec)}.qn-auth-page .login-content>div[style],.qn-auth-page .login-content>div[style]>a,.qn-auth-page #emailSuggest,.qn-auth-page #emailSuggestLink{color:var(--text-sec)!important}.qn-auth-page .login-check{line-height:1.7;font-size:.8125rem;min-height:44px;align-items:center}.qn-auth-page .login-check input{flex-shrink:0}.qn-auth-page .login-check a{color:var(--primary)}
.qn-auth-page .qn-beta-copy{color:var(--text-sec)}.qn-auth-page .login-content>div[style]>div[style]{flex-wrap:wrap;justify-content:center;white-space:normal!important}
/* Compact heading on narrow phones; user text enlargement remains supported. */
.about-story h1,html:lang(ko) .about-story h1{font-size:clamp(1.125rem,5.1vw,1.25rem)}

/* ════════════════════════════════════════════════════════════════════════
   Cross-review fixes, 2026-10-06. One rule per concern, written out in full
   so the next reviewer can read it. Everything below builds on the tokens
   above; no new colours.
   ════════════════════════════════════════════════════════════════════════ */

/* One content gutter for every screen. Text, cards, notices and actions in a
   section share the same left and right edge. */
:root { --gutter: 28px; --fw-strong: 600; }
@media (max-width: 359px) { :root { --gutter: 20px; } }

/* ── Buttons ───────────────────────────────────────────────────────────── */
/* .btn-secondary was used by the consent dialog, the photo dialog, the person
   page and the two-factor screens but never defined, so those buttons had no
   border and black text (unreadable in dark mode). */
.btn-secondary {
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--line-strong);
  box-shadow: none;
}
.btn-secondary:hover { border-color: var(--text-sec); }
.btn-secondary:disabled, .btn-primary:disabled { opacity: .55; cursor: default; }
.btn-danger-quiet {
  background: var(--accent-bg);
  color: var(--accent);
  border: 1px solid color-mix(in srgb, var(--accent) 28%, transparent);
}

/* ── Dialogs ───────────────────────────────────────────────────────────── */
/* The global reset (* { margin: 0 }) removes the browser's own centring of
   <dialog>, which left both dialogs pinned to the top-left corner. */
dialog { margin: auto; }
.ai-choice-dialog, .qn-photo-dialog {
  width: min(420px, calc(100% - 2 * var(--gutter)));
  max-height: calc(100dvh - 48px);
  overflow: auto;
  border-radius: var(--r-xl);
  padding: 28px 24px 24px;
}
.ai-choice-dialog h2 { font-size: 1.25rem; line-height: 1.5; font-weight: 600; margin: 0 0 14px; }
.ai-choice-dialog p { font-size: .9375rem; line-height: 1.75; margin: 0 0 14px; }
.ai-choice-dialog .ai-choice-note { font-size: .8125rem; line-height: 1.7; color: var(--text-sec); }
.ai-choice-actions { margin: 20px 0 16px; }
.ai-choice-dialog .ai-choice-note:last-child { margin-bottom: 0; }

/* ── Record screen ─────────────────────────────────────────────────────── */
/* The reminder card kept a fixed peach gradient: off-palette in light mode
   and, in dark mode, a light card with near-white text. */
.remind-section {
  background: var(--surface-alt);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 18px;
}
.remind-title { font-size: .875rem; font-weight: 600; color: var(--text); margin-bottom: 12px; }
.remind-opts { gap: 8px; }

/* ── Switch ────────────────────────────────────────────────────────────── */
/* One switch for every on/off setting. The AI processing control was a
   13px checkbox next to a 44px one. */
.qn-switch {
  appearance: none; -webkit-appearance: none;
  flex: 0 0 auto;
  width: 52px; height: 32px;
  border-radius: 999px;
  background: var(--line-strong);
  position: relative;
  cursor: pointer;
  transition: background-color 120ms ease;
}
.qn-switch::before {
  content: '';
  position: absolute; top: 3px; left: 3px;
  width: 26px; height: 26px; border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgb(1 31 91 / 25%);
  transition: transform 120ms ease;
}
.qn-switch:checked { background: var(--qn-switch-on, #011f5b); }
[data-theme='dark'] .qn-switch { --qn-switch-on: #5f8fdc; }
@media (prefers-color-scheme: dark) { :root:not([data-theme='light']) .qn-switch { --qn-switch-on: #5f8fdc; } }
.qn-switch:checked::before { transform: translateX(20px); }
.qn-switch:disabled { opacity: .6; cursor: default; }
/* 44px touch area around the 32px track. */
.qn-switch::after { content: ''; position: absolute; inset: -6px -4px; }

/* ── Disclosure rows ───────────────────────────────────────────────────── */
/* Replace the browser's ▶ marker with the chevron used elsewhere. */
.relationship-details > summary,
.contact-details-fold > summary,
.qn-log-options > summary,
.rh-promises > summary {
  list-style: none;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.relationship-details > summary::-webkit-details-marker,
.contact-details-fold > summary::-webkit-details-marker,
.qn-log-options > summary::-webkit-details-marker,
.rh-promises > summary::-webkit-details-marker { display: none; }
.relationship-details > summary::after,
.contact-details-fold > summary::after,
.qn-log-options > summary::after {
  content: '';
  width: 9px; height: 9px; flex: 0 0 auto; margin-right: 4px;
  border-right: 1.7px solid var(--text-sec);
  border-bottom: 1.7px solid var(--text-sec);
  transform: rotate(45deg) translateY(-2px);
  transition: transform 120ms ease;
}
.relationship-details[open] > summary::after,
.contact-details-fold[open] > summary::after,
.qn-log-options[open] > summary::after { transform: rotate(-135deg) translateY(-2px); }

/* ── Touch targets ─────────────────────────────────────────────────────── */
/* Sheet header actions were 26×18 and 26×24. */
.modal-header { padding: 8px calc(var(--gutter) - 10px) 8px; min-height: 60px; }
.modal-cancel, .modal-save {
  min-width: 44px; min-height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0 10px;
  font-size: .9375rem;
}
.modal-save { font-weight: 600; }
.modal-title { font-size: 1.0625rem; font-weight: 600; }
/* Small icon buttons keep their size and gain an invisible 44px hit area. */
.loop-check, .loop-dismiss, .loops-add-btn, .memory-edit-btn, .quick-note-pencil,
.depth-info-btn, .rec-reassure-close, .push-banner-dismiss, .ai-summary-btn,
.contact-edit-link, .cat-chip, .top10-star { position: relative; }
.loop-check::after, .loop-dismiss::after, .loops-add-btn::after, .memory-edit-btn::after,
.quick-note-pencil::after, .depth-info-btn::after, .rec-reassure-close::after,
.push-banner-dismiss::after, .contact-edit-link::after, .top10-star::after {
  content: ''; position: absolute;
  top: 50%; left: 50%; width: 44px; height: 44px; transform: translate(-50%, -50%);
}
.ai-summary-btn::after, .cat-chip::after { content: ''; position: absolute; inset: -10px 0; }
.ai-summary-btn { min-height: 32px; padding: 6px 12px; font-size: .8125rem; }
.cat-chip { min-height: 32px; padding: 6px 12px; font-size: .8125rem; font-weight: 400; }
.cat-chip.active { font-weight: 600; }
.qn-auth-page .login-check input, .login-check input[type='checkbox'] { width: 20px; height: 20px; }
.qn-auth-page .login-links a, .login-links a { display: inline-flex; align-items: center; min-height: 44px; }
/* Tab labels: 11px was the smallest text on the main screens. */
.tab-bar .tab-item { font-size: .75rem; min-height: 52px; }

/* ── Standalone screens (errors, link results, hand-offs) ──────────────── */
body.qn-page { display: block; background: var(--outside-bg); color: var(--text); }
.qn-page-shell {
  max-width: 480px; min-height: 100dvh; margin: 0 auto;
  background: var(--bg);
  padding: 32px var(--gutter) 48px;
  display: flex; flex-direction: column;
}
.qn-page-brand { margin-bottom: 64px; }
.qn-page-main { display: flex; flex-direction: column; align-items: flex-start; }
.qn-page-main h1 {
  font-size: 1.5rem; font-weight: 600; line-height: 1.4; letter-spacing: -.02em;
  margin: 0 0 14px; color: var(--text);
}
.qn-page-main h2 { font-size: 1.0625rem; font-weight: 600; line-height: 1.6; margin: 44px 0 14px; color: var(--text); }
.qn-page-main p, .qn-page-main li, .qn-page-main dd { font-size: .9375rem; line-height: 1.85; color: var(--text-sec); }
.qn-page-main p { margin: 0 0 14px; max-width: 34em; }
.qn-page-main a:not(.btn) { color: var(--primary); text-decoration: underline; text-underline-offset: 3px; }
.qn-page-eyebrow { font-size: .8125rem !important; letter-spacing: .04em; color: var(--text-ter) !important; margin-bottom: 14px !important; }
.qn-page-mark {
  width: 52px; height: 52px; border-radius: 50%;
  display: grid; place-items: center; margin-bottom: 24px;
  background: var(--surface-alt); color: var(--primary);
}
.qn-page-mark-warn { background: var(--accent-bg); color: var(--accent); }
.qn-page-actions { display: flex; flex-direction: column; gap: 10px; width: 100%; margin-top: 28px; }
.qn-page-actions .btn { width: 100%; min-height: 52px; text-decoration: none; }
.qn-page-link { align-self: center; min-height: 44px; display: inline-flex; align-items: center; font-size: .875rem; }
.qn-page-fine { font-size: .75rem !important; color: var(--text-ter) !important; margin-top: 28px !important; }
.qn-page-footer { display: flex; flex-wrap: wrap; gap: 4px 20px; margin-top: 48px; padding-top: 20px; border-top: 1px solid var(--line); width: 100%; }
.qn-page-footer a { min-height: 44px; display: inline-flex; align-items: center; font-size: .8125rem; color: var(--text-sec) !important; text-decoration: none !important; }
.qn-page-centered { justify-content: center; }
.qn-page-shell { position: relative; }
.qn-page-centered .qn-page-brand { margin-bottom: 0; position: absolute; top: 32px; left: var(--gutter); }
.qn-page-centered .qn-page-main { margin-top: 0; }
.qn-welcome h1 { font-size: 1.75rem; line-height: 1.5; }
.qn-splash { align-items: center; text-align: center; }
.qn-splash-main { display: flex; flex-direction: column; align-items: center; gap: 28px; }
.qn-splash-main .pp-wordmark { font-size: 1.5rem; align-items: center; }
.qn-splash-main p { font-size: .9375rem; line-height: 1.8; color: var(--text-sec); margin: 0; }
.qn-guide ol { margin: 0; padding-left: 1.25em; }
.qn-guide li { margin-bottom: 8px; }
.qn-guide dl { margin: 0; }
.qn-guide dt { font-size: .9375rem; font-weight: 600; line-height: 1.7; color: var(--text); margin-top: 20px; }
.qn-guide dd { margin: 6px 0 0; }
.qn-guide-tag {
  display: inline-block; vertical-align: middle; margin-left: 8px;
  font-size: .75rem; font-weight: 400; line-height: 1.5; letter-spacing: 0;
  padding: 2px 10px; border-radius: 999px; background: var(--surface-alt); color: var(--text-sec);
}

/* ── Forms on standalone screens (sign in, password recovery) ──────────── */
.qn-form { display: flex; flex-direction: column; gap: 20px; width: 100%; margin-top: 20px; }
.qn-form .btn { width: 100%; min-height: 52px; margin-top: 4px; }
.qn-field { display: flex; flex-direction: column; gap: 8px; }
.qn-field label { font-size: .875rem; font-weight: 600; line-height: 1.5; color: var(--text); }
.qn-field .form-input { width: 100%; min-height: 52px; }
.qn-form-msg {
  width: 100%; padding: 12px 16px; border-radius: var(--r-md);
  background: var(--surface-alt); color: var(--text);
  font-size: .875rem; line-height: 1.7; margin-top: 12px;
}
.qn-form-error { background: var(--accent-bg); color: var(--accent); }
.qn-form .qn-form-msg { margin-top: 0; }
.qn-divider {
  display: flex; align-items: center; gap: 14px; width: 100%;
  margin: 28px 0 16px; font-size: .8125rem; color: var(--text-ter);
}
.qn-divider::before, .qn-divider::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.qn-social-list { display: flex; flex-direction: column; gap: 10px; width: 100%; }
.qn-social {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 12px 16px;
  border: 1px solid var(--line-strong); border-radius: var(--r-md);
  background: var(--bg); color: var(--text) !important;
  font-size: .9375rem; font-weight: 600; line-height: 1.5; text-decoration: none !important;
}
.qn-page-links {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 0 24px;
  width: 100%; margin-top: 28px;
}
.qn-page-links a {
  min-height: 44px; display: inline-flex; align-items: center;
  font-size: .875rem; color: var(--text-sec) !important; text-decoration: none !important;
}
.qn-field-hint { font-size: .8125rem; line-height: 1.7; color: var(--text-sec); margin: 0; }
.qn-field-hint a { color: var(--primary); font-weight: 600; }
.qn-social-list form { margin: 0; }
.qn-social-list button.qn-social { width: 100%; cursor: pointer; font-family: inherit; }
.qn-checks { display: flex; flex-direction: column; gap: 4px; }
.qn-check {
  display: flex; align-items: flex-start; gap: 12px;
  min-height: 44px; padding: 10px 0;
  font-size: .875rem; line-height: 1.7; color: var(--text); cursor: pointer;
}
.qn-check input { flex: 0 0 auto; width: 22px; height: 22px; margin-top: 1px; accent-color: var(--primary); }
.qn-check a { color: var(--primary); text-decoration: underline; text-underline-offset: 3px; }
.qn-page-links span { min-height: 44px; display: inline-flex; align-items: center; gap: 6px; font-size: .875rem; color: var(--text-sec); }
.qn-page-links span a { color: var(--primary) !important; font-weight: 600; }
/* Password strength: four quiet steps, colour is never the only signal
   (the label says the level in words). */
.pw-strength { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 2px; }
.pw-bar { height: 4px; border-radius: 999px; background: var(--line); }
.pw-bar.fill-1 { background: var(--accent); }
.pw-bar.fill-2, .pw-bar.fill-3 { background: var(--primary-l); }
.pw-bar.fill-4 { background: var(--primary); }
.pw-label { min-height: 0; font-size: .8125rem; line-height: 1.6; color: var(--text-sec); }
.pw-label:empty { display: none; }

/* ── Intro / first-run guide ───────────────────────────────────────────── */
/* The header used an older lowercase wordmark with an icon. */
.hello-header .pp-wordmark { font-size: 1rem; }
.hello-page h1 { font-size: 1.625rem; font-weight: 600; line-height: 1.4; letter-spacing: -.02em; }
.hello-step-no, .hello-position { font-family: var(--font-ui); font-variant-numeric: tabular-nums; }

/* ── One gutter everywhere ─────────────────────────────────────────────── */
/* Before: 28 / 16 / 32 / 0 px mixed on the same screen. Cards, notices,
   inputs and section labels now start and end on var(--gutter). */
.detail-header { padding: 12px calc(var(--gutter) - 12px) 4px; }
.loops-card, .ai-summary-card, .ai-suggestions-card, .quick-note-card, .notes-card,
.contact-card, .settings-card, .settings-collapsible, .remind-section, .log-who-row,
.form-disclose, .share-create-card, .share-empty-state, .push-banner, .claim-banner {
  margin-left: var(--gutter); margin-right: var(--gutter);
}
.settings-stage > .settings-card, .settings-stage > .settings-collapsible { margin-left: var(--gutter); margin-right: var(--gutter); }
.settings-collapsible .settings-card { margin-left: 0; margin-right: 0; }
.timeline-header { padding-left: var(--gutter); padding-right: var(--gutter); }
.timeline-wrap { padding: 0 var(--gutter); }
.timeline-line, .memory-dot { display: none; }
.write-section, .form-section, .ocr-card-row, .form-section-header, .contact-pills-area,
.sp-flow-sub, .sp-recent-row, .sp-search-wrap, .sp-new-person-btn, .sp-row,
.settings-group-label, .ask-sheet, .notes-panel {
  padding-left: var(--gutter); padding-right: var(--gutter);
}
.page-subtitle { margin-left: 0; margin-right: 0; padding: 0 var(--gutter); }
.rec-reassure { margin-left: 0; margin-right: 0; }
.notes-tabs, .sp-capture { margin-left: var(--gutter); margin-right: var(--gutter); }
.sp-capture-title, .ask-lede, .ask-private { padding-left: 0; padding-right: 0; }
.settings-signout { padding: 20px var(--gutter) 40px; }

/* The folded contact list sat flush against both screen edges. */
.contact-details-fold { margin: 24px var(--gutter); border-top: 1px solid var(--line); }
.contact-details-fold > summary { padding: 18px 0; min-height: 52px; font-size: .9375rem; cursor: pointer; }
.contact-details-fold .contact-card { margin-left: 0; margin-right: 0; }

/* Person header: avatar, name, role and facts share one centre line. */
.detail-profile { display: flex; flex-direction: column; align-items: center; text-align: center; }
.detail-name-block { display: flex; flex-direction: column; align-items: center; max-width: 100%; }
.detail-name-row { justify-content: center; }
.detail-role, .detail-facts { text-align: center; justify-content: center; }

/* Section labels: sentence case in every language (Latin locales showed
   tracked capitals: "NAME *", "TAGS"). */
.form-label, .form-section-header, .settings-group-label, .section-label, .contact-title,
.notes-section-label {
  text-transform: none; letter-spacing: 0;
  font-size: .875rem; font-weight: 600; color: var(--text);
}
.form-section-header { padding-top: 24px; padding-bottom: 8px; }

/* ── Settings ──────────────────────────────────────────────────────────── */
.settings-row { padding: 16px 18px; gap: 14px; min-height: 60px; }
.settings-icon, .settings-collapsible-icon {
  width: 24px; flex: 0 0 24px; color: var(--primary);
  display: inline-flex; align-items: center; justify-content: center;
}
.settings-name { font-size: .9375rem; font-weight: 600; line-height: 1.5; }
.settings-desc { font-size: .8125rem; line-height: 1.6; color: var(--text-sec); }
.settings-chevron { display: inline-flex; color: var(--text-ter); }
.settings-row-switch { cursor: pointer; }
.settings-row-switch .settings-info { display: block; }
.settings-note { padding: 0 18px 18px 56px; }
.settings-note p { font-size: .8125rem; line-height: 1.75; color: var(--text-sec); margin: 0 0 8px; }
.settings-note p:last-child { margin-bottom: 0; }
.settings-row-danger .settings-icon, .settings-row-danger .settings-name { color: var(--accent); }
.settings-row-danger .settings-desc { color: var(--text-sec); }
.settings-select { min-height: 44px; font-size: .875rem; border-radius: var(--r-sm); }
.confirm-title-danger { color: var(--accent); }
.modal-sheet-body { font-size: .875rem; line-height: 1.7; color: var(--text-sec); margin: 8px 0 16px; }

/* ── Person screen details ─────────────────────────────────────────────── */
/* Important-person toggle: a stroke star that fills, not an emoji swap. */
.top10-star {
  min-width: 32px; min-height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--text-ter);
}
.top10-star.starred { color: var(--accent); }
.top10-star.starred svg { fill: currentColor; }
.detail-birthday, .memory-location { display: inline-flex; align-items: center; gap: 6px; }
.ai-suggestions-title, .ai-summary-title { display: inline-flex; align-items: center; gap: 8px; }
.collapsible-chevron { display: inline-flex; color: var(--text-sec); transition: transform 120ms ease; }
details[open] > summary .collapsible-chevron { transform: rotate(180deg); }
.depth-info-btn { display: inline-flex; align-items: center; color: var(--text-sec); }
.memory-edit-btn { display: inline-flex; align-items: center; color: var(--text-sec); }
.contact-title { display: flex; justify-content: flex-end; margin-bottom: 4px; }
.contact-edit-link { font-size: .8125rem; font-weight: 400; color: var(--primary); min-height: 32px; display: inline-flex; align-items: center; }
.contact-icon { display: inline-flex; align-items: center; justify-content: center; width: 24px; color: var(--primary); }
.contact-icon .channel-svg { width: 20px; height: 20px; }
.contact-chevron { display: inline-flex; align-items: center; color: var(--text-ter); font-size: .8125rem; }
.contact-label { font-size: .75rem; line-height: 1.5; color: var(--text-sec); }
.contact-value { font-size: .9375rem; line-height: 1.6; overflow-wrap: anywhere; }
.contact-row { min-height: 56px; }
.contact-empty { padding: 4px 0 16px; }
.favorite-cta { margin-left: 0; margin-right: 0; border: 1px solid var(--line); background: var(--surface-alt); border-radius: var(--r-lg); box-shadow: none; }
.favorite-cta-icon { display: inline-flex; color: var(--primary); }
.favorite-cta-label { font-size: .9375rem; font-weight: 600; color: var(--text); }
.favorite-cta-sub { font-size: .8125rem; color: var(--text-sec); }
.favorite-cta-chevron { display: inline-flex; color: var(--text-ter); }
.merge-suggest-icon, .merge-suggest-chev { display: inline-flex; color: var(--primary); }
.action-sheet-cancel { min-height: 48px; }

/* ── Lists, empty states, new-person form ──────────────────────────────── */
.empty-icon { display: inline-flex; align-items: center; justify-content: center; color: var(--primary); }
.search-clear, .group-del-btn { display: inline-flex; align-items: center; justify-content: center; color: var(--text-sec); }
.search-clear { min-width: 44px; min-height: 44px; }
.filter-chip-tag-clear { display: inline-flex; align-items: center; gap: 6px; }
.avatar-xl { border-radius: 50%; }
.cfield-icon { display: inline-flex; align-items: center; justify-content: center; width: 24px; color: var(--primary); }
.contact-pill { cursor: pointer; font-family: inherit; min-height: 44px; padding: 8px 14px; border: 1px solid var(--line-strong); border-radius: 999px; background: var(--bg); color: var(--text); font-size: .875rem; }
.contact-pill-icon { display: inline-flex; color: var(--primary); }
.contact-pill-icon .channel-svg { width: 16px; height: 16px; }
.follow-up-icon, .rec-reassure-icon, .prev-chevron { display: inline-flex; align-items: center; color: var(--primary); }
.rec-reassure-close { display: inline-flex; align-items: center; justify-content: center; color: var(--text-sec); }
/* The search field draws its focus on the rounded bar, not as a rectangle
   inside it. */
.search-bar .search-input:focus-visible { outline: none; }
.search-bar:focus-within { outline: 3px solid #4475bf; outline-offset: 3px; }


/* ── One chevron for every disclosure ──────────────────────────────────── */
/* The older sheets drew a triangle glyph (▾) whose size and weight changed
   with the font. Same stroke chevron as the select fields instead. */
.form-disclose-summary::after,
.share-collapsible > summary::after,
details.settings-collapsible > summary::after,
.qn-more::after {
  content: '';
  width: 8px; height: 8px; flex: 0 0 auto;
  margin: -4px 4px 0 auto; font-size: 0;
  border-right: 1.7px solid var(--text-sec);
  border-bottom: 1.7px solid var(--text-sec);
  transform: rotate(45deg);
  transition: transform 120ms ease;
}
.form-disclose[open] .form-disclose-summary::after,
.share-collapsible[open] > summary::after,
details.settings-collapsible[open] > summary::after,
.qn-more[aria-expanded="true"]::after { transform: rotate(-135deg); margin-top: 4px; }
.qn-more {
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 44px; padding: 0; border: 0; background: none;
  font: inherit; font-size: .875rem; font-weight: 600; color: var(--text-sec); cursor: pointer;
}
.qn-more::after { margin-left: 0; }
.see-all-btn.qn-more { display: flex; width: calc(100% - 2 * var(--gutter)); justify-content: center; margin: 4px var(--gutter) 16px; padding: 0 12px; background: var(--surface-alt); border-radius: var(--r-md); }
.clip-toggle-full.qn-more { min-height: 44px; font-size: .8125rem; }

/* Security steps share the same readable rhythm in both themes. */
.security-verify { max-width: 400px; margin: 32px auto; padding: 24px var(--gutter); }
.security-verify h1 { font-size: 1.375rem; line-height: 1.4; margin: 16px 0 12px; }
.security-verify p, .totp-step-desc, .totp-done-sub, .totp-backup-desc { color: var(--text-sec); font-size: .9375rem; line-height: 1.7; }
.security-symbol, .totp-done-icon { color: var(--primary); }
.security-verify .totp-code-input { width: 100%; min-width: 0; }
.security-verify .btn { margin-top: 16px; }
.security-error { color: var(--accent); background: var(--surface-alt); border: 1px solid var(--line-strong); padding: 12px; border-radius: var(--r-md); margin-bottom: 16px; font-size: .875rem; line-height: 1.6; }
.secondary-cancel { display: flex; align-items: center; justify-content: center; min-height: 44px; margin-top: 16px; color: var(--text-sec); }
.secondary-status { margin: 12px var(--gutter); font-size: .875rem; color: var(--text-sec); }
.action-dialog { inset: 0; margin: auto; width: min(420px, calc(100% - 32px)); max-height: calc(100dvh - 32px); padding: 24px; border: 1px solid var(--line-strong); border-radius: var(--r-lg); background: var(--surface); color: var(--text); }
.action-dialog::backdrop { background: rgb(0 0 0 / .45); }
.action-dialog h2 { font-size: 1.125rem; margin: 0 0 12px; }
.action-dialog p { font-size: .9375rem; line-height: 1.7; white-space: pre-line; }
.action-dialog-buttons { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 24px; }
.action-dialog-buttons .btn { min-height: 44px; white-space: normal; }
.share-help-text, .share-secondary-note { color: var(--text-sec); font-size: .875rem; line-height: 1.7; }
.share-link-actions { flex-wrap: wrap; }
.share-link-btn, .claim-decline-link { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
.claim-decline-link { color: var(--accent); }
.share-btn-primary { box-shadow: none; }
.update-diff .diff-row { grid-template-columns: minmax(0,1fr) 44px; gap: 8px 12px; }
.update-diff .diff-label { grid-column: 1 / -1; }
.diff-vals, .diff-vals > * { min-width: 0; overflow-wrap: anywhere; }
.update-diff .diff-old { color: var(--accent); opacity: 1; }
.update-diff .diff-new { color: var(--text); }
.update-diff .diff-new.diff-removed { color: var(--text-sec); }
.claim-row, .share-link-label, .merge-option-value { min-width: 0; overflow-wrap: anywhere; }
.diff-pick-target { width: 44px; height: 44px; display: grid; place-items: center; cursor: pointer; }
.diff-pick { width: 20px; height: 20px; accent-color: var(--primary); }
.claim-row > span:first-child { color: var(--primary); }
.secondary-card { padding: 20px; }
.secondary-card h2 { font-size: 1rem; line-height: 1.5; margin-bottom: 16px; }
.secondary-card label { display: block; font-size: .875rem; margin-bottom: 8px; }
.secondary-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.secondary-actions .btn { display: inline-flex; gap: 8px; align-items: center; min-height: 44px; }
.invite-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 20px; }
.invite-stats strong { display: block; font-size: 1.5rem; font-weight: 600; }
.invite-stats span { font-size: .875rem; color: var(--text-sec); }
.onboarding-card { margin: 16px var(--gutter); padding: 20px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); }
.onboarding-title { font-size: 1.125rem; line-height: 1.5; margin-bottom: 10px; }
.onboarding-sub { font-size: .9375rem; line-height: 1.7; color: var(--text-sec); margin-bottom: 20px; }
.mycard-field-input, .mycard-name-block, .mycard-bio-input { min-width: 0; }
.claim-banner { margin: 12px var(--gutter); background: var(--surface-alt); border-color: var(--line); color: var(--text); }
.mycard-photo-edit { display: grid; place-items: center; }
.card-page-name { font-size: clamp(1.375rem, 5vw, 1.75rem); overflow-wrap: anywhere; }
.contact-detail { min-width: 0; }
.contact-value { overflow-wrap: anywhere; }
.card-page-footer { color: var(--text-sec); font-size: .8125rem; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.edit-date-time { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 12px; }
.edit-date-time > div, .edit-date-time input { min-width: 0; width: 100%; }
.share-manage-intro { margin-left: var(--gutter); margin-right: var(--gutter); padding: 0; background: transparent; }
@media (max-width: 420px) { .share-link-row { flex-direction: column; align-items: stretch; gap: 12px; } .share-link-actions { justify-content: flex-start; } }
@media (max-width: 359px) { .edit-date-time { grid-template-columns: minmax(0, 1fr); } }
.totp-secret-btn { width: 100%; min-height: 44px; white-space: normal; }
.totp-secret-value { overflow-wrap: anywhere; min-width: 0; }
.totp-backup-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.totp-backup-actions .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; }

html:lang(ja),html:lang(zh){font-synthesis:weight;word-break:normal;line-break:strict}
html:lang(ja) body,html:lang(zh) body{word-break:normal;line-break:strict}

.tour-heading h1 { font-size: clamp(1.25rem, 4.8vw, 1.75rem); line-height: 1.5; margin: 24px 0 12px; }
.tour-heading p, .tour-scene-copy p { font-size: .9375rem; line-height: 1.8; color: var(--text-sec); }
.tour-navigation { display: flex; flex-wrap: wrap; gap: 8px; margin: 24px 0 32px; }
.tour-navigation a { display: inline-flex; align-items: center; min-height: 44px; padding: 8px 14px; border: 1px solid var(--line); border-radius: 999px; font-size: .8125rem; color: var(--primary); text-decoration: none; }
.tour-scene { margin: 0 0 40px; scroll-margin-top: 24px; }
.tour-art { background: var(--surface-alt); border-radius: 24px; padding: 24px; margin-bottom: 24px; }
.tour-sample-card { display: flex; flex-direction: column; gap: 14px; padding: 24px; border: 1px solid var(--line); border-radius: 20px; background: var(--surface); font-size: .875rem; line-height: 1.65; }
.tour-sample-card strong { font-size: 1.125rem; font-weight: 600; }
.tour-avatar { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--accent-bg); color: var(--accent); }
.tour-sample-icons { display: flex; gap: 14px; align-items: center; color: var(--primary); }
.tour-sample-promise { display: flex; gap: 8px; align-items: flex-start; border-top: 1px solid var(--line); padding-top: 14px; }
.tour-sample-promise svg { flex: 0 0 auto; margin-top: 3px; }
.tour-number { font-size: .8125rem; letter-spacing: .06em; color: var(--accent); }
.tour-scene-copy h2 { font-size: 1.25rem; line-height: 1.5; margin: 8px 0 12px; }
.tour-footer { border-top: 1px solid var(--line); padding: 24px 0; }
.tour-footer p { font-size: .8125rem; line-height: 1.8; color: var(--text-sec); margin-bottom: 20px; }
@media(max-width:359px) { .tour-art { padding: 16px; } .tour-sample-card { padding: 18px; } }


/* Cross-review: readable verification form and consistent secondary headings. */
.security-verify > p { margin: 0 0 24px; }
.security-verify form { margin-top: 0; }
.security-verify .totp-code-input { display:block; margin:0; height:auto; min-height:56px; padding:12px 16px; font-size:1.125rem; line-height:1.5; letter-spacing:.08em; }
.detail-header-title { flex:1; text-align:left; font-size:1.125rem; line-height:1.5; }
#homeRoot .push-banner-btn, #homeRoot .push-banner-dismiss { min-height:44px; min-width:44px; }
#homeRoot .tag, #homeRoot .last-seen { font-size:.75rem; }

/* Secondary review surfaces use the same gutters and touch targets. */
#homeRoot > .claim-banner, #homeRoot > .verify-banner, #homeRoot > .new-share-banner,
#homeRoot > .home-more-list, #homeRoot > .push-banner { margin-left:var(--gutter); margin-right:var(--gutter); }
#homeRoot .reach-reason { font-size:.75rem; color:var(--text-sec); background:var(--surface-alt); }
#homeRoot .loop-check, #homeRoot .verify-banner-dismiss { min-width:44px; min-height:44px; }
.totp-backup-card, [data-theme="dark"] .totp-backup-card { background:var(--surface-alt); border-color:var(--line); }
.totp-backup-title, [data-theme="dark"] .totp-backup-title { color:var(--accent); }
.totp-backup-code, [data-theme="dark"] .totp-backup-code { background:var(--surface); color:var(--text); border-color:var(--line); }
.mycard-profile-row .avatar { color:var(--on-primary); }
.merge-field-label { text-transform:none; }

.channel-options { margin-top:12px; }
.channel-options > summary { min-height:44px; display:flex; align-items:center; color:var(--text-sec); font-size:.875rem; cursor:pointer; }

.person-channel-section > .channel-options { margin:12px var(--gutter) 0; }
.person-channel-section > .btn { margin:12px var(--gutter); }
.person-channel-section .channel-options .person-channel-grid { padding-left:0; padding-right:0; }
.detail-header + .new-share-banner { margin-left:var(--gutter); margin-right:var(--gutter); }
/* Placeholder instructions must remain readable in both themes. */
input::placeholder, textarea::placeholder { color: var(--text-sec); opacity: 1; }

/* Email typo decisions must remain reachable with long addresses at 320px. */
#emailTypoDialog { box-sizing: border-box; overflow-y: auto; }
#emailTypoDialog .action-dialog-buttons { grid-template-columns: minmax(0, 1fr); }
#emailTypoDialog .action-dialog-buttons .btn {
  width: 100%; min-width: 0; max-width: 100%; box-sizing: border-box;
  white-space: normal; overflow-wrap: anywhere; word-break: normal;
}
/* Local-date controls: fit narrow phones without sacrificing touch targets. */
.date-chips{display:flex;flex-wrap:wrap;gap:8px}
.date-chips button,.time-chips button{min-height:44px;font:inherit;color:var(--text);cursor:pointer}
.card-capture{min-width:0;scroll-margin:24px}
.card-capture-actions{display:flex;flex-wrap:wrap;gap:8px}
.card-capture-actions .btn{min-height:44px;white-space:normal;gap:8px;flex:1}
.card-capture-message{font-size:.8125rem;line-height:1.6;color:var(--text-sec);overflow-wrap:anywhere}
.card-capture-highlight{outline:2px solid var(--primary);outline-offset:6px;border-radius:16px}
.sp-capture-row .card-capture{flex:1}
/* Camera tile: see _card_capture.html (any touch pointer or a mobile OS). */
html:not(.has-camera) .card-camera{display:none!important}
.date-chips .date-input{max-width:100%;min-width:0;min-height:44px;background:var(--surface-alt);color:var(--text);border:1px solid var(--line);border-radius:var(--r-lg);padding:8px}
#customTime{margin-top:8px;max-width:100%}

/* ── Readability and touch pass (2026-10-08) ──────────────────────────────
   Audience skews 40s+: no text under 12px, every control reachable at 44px.
   Small glyph buttons keep their look and gain an invisible hit area. */
.chip-count, .memory-date, .depth-score-label, .timeline-count,
.sp-recent-label, .sp-recent-name, .mycard-main-label, .tag,
.moments-badge, .plan-save, .ask-entry .plan-badge, .plan-badge,
.hello-step-no, .hello-skip, .hello-language, .hello-tab,
.hello-credit, .hello-eyebrow, .hello-position, .hello-position span,
.clip-num, .cfield-label, .last-seen, .memory-type, .quick-note-counter,
.notes-card-title span, .rec-hint { font-size: .75rem; }
.ask-example, .plan-bill-opt, .notes-tab, .contact-add-btn,
.share-create-row .share-btn-primary, .share-btn-primary { min-height: 44px; }
.ask-go { min-width: 44px; min-height: 44px; }
.mycard-copy-btn, .back-btn, .legal-lang-link { position: relative; }
.mycard-copy-btn::after, .back-btn::after, .legal-lang-link::after {
  content: ''; position: absolute; top: 50%; left: 50%;
  width: max(100%, 44px); height: 44px; transform: translate(-50%, -50%);
}
/* Compound inputs: one focus ring on the container, not a second one inside. */
.ask-form .ask-input:focus-visible { outline: none; }
.ask-form:focus-within { outline: 3px solid #4475bf; outline-offset: 3px; }
/* People sort: the Quiet Navy shorthand `background` erased the chevron,
   so the control no longer read as a dropdown. Restore it. */


/* Same geometry as daily-home contact rows. */
.people-compact .person-row{padding:12px 24px;min-height:64px;gap:12px;border-bottom:1px solid var(--line-strong);box-sizing:border-box}
.people-compact .avatar-md{width:40px;height:40px;flex:0 0 40px;font-size:.875rem}
.people-compact .person-name{font-size:1rem;font-weight:600;line-height:1.25;min-width:0}
.people-compact .person-role{font-size:.8125rem;line-height:1.25;margin-top:3px;color:var(--text-sec);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.people-compact .person-info{min-width:0;flex:1}
.people-compact .person-meta{font-size:.75rem;max-width:72px}
.people-compact .last-seen,.people-compact .tag-new{font-size:.75rem}
.people-compact .depth-dots .dot{width:5px;height:5px}
.people-compact .tag-new{padding:0 4px;flex-shrink:0}
@media(max-width:359px){.people-compact .person-row{padding-left:20px;padding-right:20px}}
.contact-picker-dialog{width:calc(100% - 32px);max-width:480px;max-height:85dvh;padding:0;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface);color:var(--text)}
.contact-picker-dialog::backdrop{background:color-mix(in srgb,var(--text) 35%,transparent)}
.contact-picker-dialog form{padding:16px 24px 24px}
.contact-picker-row{display:flex;align-items:center;gap:12px;min-height:64px;border-bottom:1px solid var(--line)}
.contact-picker-row input{width:24px;height:24px;flex-shrink:0}
.contact-picker-row span{min-width:0;overflow-wrap:anywhere}
.contact-picker-row strong,.contact-picker-row small{display:block}
.contact-picker-row small{font-size:.8125rem;color:var(--text-sec)}
.contact-picker-dialog .btn{width:100%;margin-top:16px;white-space:normal}
.contact-picker-menu:not([hidden]){display:flex;flex-wrap:wrap;gap:8px;padding:0 24px 16px}
.outreach-content{padding:16px 24px 24px}
.outreach-content textarea{width:100%;min-height:160px;box-sizing:border-box;font:inherit;color:var(--text);background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:12px;resize:vertical}
.outreach-channels{display:flex;flex-wrap:wrap;gap:8px}
.outreach-channels .btn{width:auto;flex:1 1 40%;display:flex;align-items:center;justify-content:center;gap:8px}
.outreach-channels [hidden],#outreachSent[hidden]{display:none}
.outreach-draft{min-height:44px;font-size:.8125rem;margin-top:8px}
.rh-promise>a{color:inherit;text-decoration:none;display:block}
.brief-page{padding:0 24px 24px;overflow-wrap:anywhere}.brief-page h1{font-size:1.375rem;line-height:1.35}.brief-card{padding:20px;margin:16px 0}.brief-card h2{font-size:1rem}.brief-card p,.brief-card li{font-size:.9375rem;line-height:1.6}.brief-excerpt{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden;white-space:pre-line}.brief-card form{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}.brief-card input{min-width:0;max-width:100%;flex:1;min-height:44px;font:inherit;color:var(--text);background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:8px}.brief-record{position:sticky;bottom:calc(80px + env(safe-area-inset-bottom));padding:12px 0;background:var(--bg)}.brief-record .btn{width:100%;white-space:normal}.person-primary-actions{grid-template-columns:repeat(3,minmax(0,1fr))}.person-primary-actions .btn{font-size:.8125rem;flex-wrap:wrap;gap:6px;padding:10px 6px}@media(max-width:359px){.brief-page{padding-left:20px;padding-right:20px}}
.brief-ideas-link{display:flex;align-items:center;gap:8px;margin:20px 24px;color:var(--text-sec);min-height:44px;font-size:.875rem}.brief-evidence{font-size:.8125rem;color:var(--text-sec);display:block;min-height:44px;line-height:1.6}.brief-card ul{padding-left:20px}.brief-card li{margin:8px 0}
.moments-card{padding:20px;margin:20px 24px}.moments-card h2{font-size:1rem}.moment-row{padding:12px 0;border-bottom:1px solid var(--line);overflow-wrap:anywhere}.moment-actions{display:flex;gap:8px;flex-wrap:wrap}.moment-actions .btn{flex:1;white-space:normal}.moment-home-review{display:block;min-height:44px;padding:8px 0;color:var(--text)}.moment-edit label{display:block;margin:8px 0}.moment-edit input{display:block;width:100%;min-width:0;box-sizing:border-box;font:inherit;min-height:44px;background:var(--surface);color:var(--text);border:1px solid var(--line);border-radius:var(--r-lg);padding:8px}.rh-footer .moments-card{margin:0;width:100%;box-sizing:border-box}.moment-row summary{min-height:44px;cursor:pointer;display:flex;align-items:center}
.batch-page>input,.batch-review-card input:not([type=checkbox]){display:block;width:100%;min-width:0;box-sizing:border-box;min-height:44px;padding:8px;font:inherit;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface);color:var(--text)}.batch-page>input{margin:8px 0}.batch-page .checkin-muted{font-size:.8125rem;line-height:1.6}.batch-page #batchQueue{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:16px 0}.batch-thumbnail{min-width:0;border:1px solid var(--line);border-radius:var(--r-lg);padding:8px;overflow-wrap:anywhere}.batch-thumbnail img{width:100%;height:96px;object-fit:contain}.batch-thumbnail .btn{width:100%;margin-top:8px;font-size:.8125rem}.batch-thumbnail p{font-size:.8125rem}.batch-review-card{padding:16px;margin:16px 0;min-width:0;border:1px solid var(--line)}.batch-review-card label{display:block;margin:8px 0;font-size:.875rem}.batch-review-card label:first-child{display:flex;align-items:center;gap:10px;min-height:44px}.batch-review-card input[type=checkbox]{width:24px;height:24px}.batch-page #batchRead,.batch-page #batchSave{width:100%;white-space:normal;margin:12px 0}.batch-page [hidden]{display:none}

/* P0 cross-check: consistent person actions, visible moment review,
   verify-later note, batch spacing. */
.person-primary-actions .btn{flex-direction:column;justify-content:center;min-height:64px;gap:4px;text-align:center;line-height:1.3;flex-wrap:nowrap}
.rh-moment-review{display:flex;align-items:center;gap:8px;min-height:48px;margin:0 0 12px;padding:0 12px;border:1px solid var(--line-strong);border-radius:16px;background:var(--surface);color:var(--text);font-size:.875rem;text-decoration:none}
.rh-moment-review span{flex:1;min-width:0}
.rh-moment-review svg:first-child{color:var(--primary)}
.verify-later{margin:16px 0;padding:14px 16px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface-alt)}
.verify-later p{margin:0 0 8px;font-size:.875rem;line-height:1.6;color:var(--text);overflow-wrap:anywhere}
.batch-page{padding-top:16px}.batch-page>label{display:block;margin-bottom:8px;font-weight:600}

.contact-picker-help{margin:6px 0 0;font-size:.8125rem;line-height:1.6;color:var(--text-sec);overflow-wrap:anywhere}

/* ── Layout fit (2026-10-09): one-line labels, equal button groups ───────── */
/* Korean: break between words (eojeol), never inside one; long tokens still wrap. */
html:lang(ko){word-break:keep-all;overflow-wrap:break-word}
/* Capture tiles: card camera/gallery + "several cards" / "my QR". Equal width
   and height, icon over a one-line label. The camera tile hides on desktop
   and the gallery tile then takes the row. */
.card-capture-actions{display:flex;flex-wrap:nowrap;gap:10px}
.card-capture-actions .btn,.sp-capture-tile{flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;min-height:72px;padding:10px 8px;border:1px solid var(--line-strong);border-radius:16px;background:var(--surface);color:var(--text);font-size:.875rem;font-weight:600;line-height:1.3;text-align:center;white-space:normal;text-wrap:balance;text-decoration:none;box-shadow:none}
.card-capture-actions .btn svg,.sp-capture-tile svg{flex-shrink:0;color:var(--primary)}
.sp-capture-tile:active{transform:scale(.985)}
.sp-capture-more{display:flex;gap:10px;margin-top:10px}
.sp-capture-back{flex-direction:column;align-items:stretch}
.sp-capture-back .card-capture{width:100%}
/* Settings rows: the name keeps its words, the select gives way (max half). */
.settings-row>.settings-info{flex:1 1 auto;min-width:5.5em}
.settings-name{overflow-wrap:normal}
.settings-row>.settings-select{flex:0 0 auto;width:min(50%,8.75rem);max-width:50%;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Person: contact channels as an even two-column grid; an odd last item spans. */
.person-channel-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
.person-channel-grid .channel-button{width:100%;min-width:0;justify-content:flex-start;padding-left:14px;padding-right:12px}
.person-channel-grid .channel-button span{overflow:hidden;text-overflow:ellipsis}
.person-channel-grid>.channel-button:last-child:nth-child(odd){grid-column:1/-1}
.person-primary-actions .btn{text-wrap:balance}
.clip-toggle-full.qn-more{white-space:nowrap}
.assistant-date-hint{margin:-2px 0 8px}
@media(max-width:359px){.person-primary-actions{gap:8px}.person-primary-actions .btn{padding-left:4px;padding-right:4px}}
/* Date chips: Today / Yesterday / Other date / picker as an even 2x2 grid. */
.date-chips{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
.date-chips>.date-chip,.date-chips>.date-input{width:100%;min-width:0;text-align:center;padding-left:6px;padding-right:6px;border-radius:12px;white-space:nowrap}
.batch-page .card-capture{margin:12px 0 4px}
/* Import review notes: certain / possible match, left-out numbers. */
.contact-picker-note{margin-top:2px;font-size:.8125rem;line-height:1.5;color:var(--text-sec)}
.batch-review-card label:first-child{flex-wrap:wrap}
.batch-match-note{flex-basis:100%;padding-left:34px;font-size:.8125rem;line-height:1.5;color:var(--text-sec)}
/* Batch cards: duplicate-check status and retry. */
.batch-check-status{margin:8px 0;font-size:.875rem;line-height:1.6;color:var(--text-sec)}
.batch-check-retry{width:100%;min-height:44px;margin:0 0 8px}
.contact-hint{margin-top:2px;font-size:.8125rem;line-height:1.5;color:var(--text-sec)}
/* Review dialog: the page behind does not scroll; the save button stays reachable. */
body:has(dialog.contact-picker-dialog[open]){overflow:hidden}
.contact-picker-dialog form{display:flex;flex-direction:column}
.contact-picker-dialog #contactPickerSave{position:sticky;bottom:0}
/* F1 conversation -> record */
.convo-page{padding:8px var(--gutter) 32px}
.convo-lede{font-size:1rem;line-height:1.6;margin:8px 0 12px}
.convo-notice{font-size:.875rem;line-height:1.7;color:var(--text-sec);padding:12px 14px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface-alt);margin:0 0 16px}
.convo-form{display:flex;flex-direction:column;gap:6px}
.convo-form label{font-weight:600;font-size:.9375rem;margin-top:10px}
.convo-form textarea,.convo-form input[type=text],.convo-form input[type=date]{width:100%;min-width:0;box-sizing:border-box;min-height:44px;padding:12px;font:inherit;line-height:1.6;color:var(--text);background:var(--surface);border:1px solid var(--line-strong);border-radius:var(--r-lg)}
.convo-count{margin:0;font-size:.8125rem;color:var(--text-sec);text-align:right}
.convo-form .btn,.convo-result .btn,.convo-done .btn{width:100%;min-height:48px;margin-top:16px;white-space:normal}
.convo-status{margin:12px 0;font-size:.9375rem;line-height:1.6}
.convo-pick{font-size:.9375rem;line-height:1.6;margin:8px 0 12px}
.convo-h{font-size:1rem;margin:20px 0 8px}
.convo-item{padding:14px 16px;margin:0 0 12px;min-width:0;border:1px solid var(--line)}
.convo-item-head{display:flex;align-items:center;gap:10px;min-height:44px}
.convo-item-head input[type=checkbox]{width:24px;height:24px;flex-shrink:0}
.convo-item-title{font-weight:600}
.convo-edit{flex:1;min-width:0;width:100%;box-sizing:border-box;min-height:44px;padding:10px;font:inherit;line-height:1.6;color:var(--text);background:var(--surface);border:1px solid var(--line-strong);border-radius:var(--r-md, 12px)}
.convo-item-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:10px}
.convo-item-row label{display:flex;flex-direction:column;gap:4px;font-size:.8125rem;color:var(--text-sec)}
.convo-item-row select,.convo-item-row input{min-height:44px;width:100%;min-width:0;box-sizing:border-box;padding:8px;font:inherit;color:var(--text);background:var(--surface);border:1px solid var(--line-strong);border-radius:var(--r-md, 12px)}
.convo-tentative{margin:6px 0 0;font-size:.8125rem;line-height:1.5;color:var(--accent)}
.convo-evidence{margin-top:10px;font-size:.875rem}
.convo-evidence summary{min-height:44px;display:flex;align-items:center;cursor:pointer;color:var(--text-sec)}
.convo-evidence blockquote{margin:0;padding:8px 12px;border-left:3px solid var(--line-strong);color:var(--text);overflow-wrap:anywhere;line-height:1.6}
.convo-none{color:var(--text-sec);font-size:.875rem}
.convo-done{padding:16px;margin-top:16px}
.qn-convo-entry{display:flex;align-items:center;justify-content:center;gap:8px;min-height:48px;margin:0 0 12px;border:1px dashed var(--line-strong);border-radius:24px;color:var(--primary);font-size:.875rem;font-weight:600;text-decoration:none}
/* F2 Ask with evidence */
.ask-ev-person{padding:14px 0;border-bottom:1px solid var(--line);list-style:none}
.ask-ev-reason{margin:6px 0;font-size:.9375rem;line-height:1.6}
.ask-ev-quote{margin:6px 0;padding:8px 12px;border-left:3px solid var(--line-strong);font-size:.875rem;line-height:1.6;color:var(--text);overflow-wrap:anywhere}
.ask-ev-meta{margin:0;font-size:.8125rem;color:var(--text-sec)}
.ask-ev-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:10px}
.ask-ev-actions .btn,.ask-ev-draft .btn,.ask-ev-asked .btn{min-height:44px;white-space:normal}
.ask-ev-draft{display:flex;flex-direction:column;gap:8px;margin-top:10px}
.ask-ev-draft textarea{width:100%;box-sizing:border-box;min-height:96px;padding:10px;font:inherit;line-height:1.6;color:var(--text);background:var(--surface);border:1px solid var(--line-strong);border-radius:var(--r-lg)}
.ask-ev-asked{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:10px;font-size:.9375rem}
.ask-ev-empty,.ask-pm-note{font-size:.875rem;line-height:1.6;color:var(--text-sec)}
.ask-pm-wrap{margin-top:16px}
.contact-picker-help p{margin:0}
.contact-picker-alt{margin-top:6px;min-height:44px;padding:0;border:0;background:none;color:var(--primary);font:inherit;font-weight:600;text-decoration:underline;cursor:pointer}
.contact-picker-steps{margin:8px 0;padding-left:1.25rem;font-size:.875rem;line-height:1.7;color:var(--text)}
.contact-picker-help .btn{width:100%;min-height:44px;margin:8px 0;white-space:normal}
/* Connections (C1-C3) */
.conn-page{padding:8px var(--gutter) 32px;overflow-wrap:anywhere}
.conn-lede{font-size:.9375rem;line-height:1.7;color:var(--text-sec);margin:4px 0 16px}
.conn-h1{font-size:1.25rem;line-height:1.4;margin:8px 0 16px}
.conn-section{padding:16px 20px;margin:0 0 16px}
.conn-section h2{font-size:1rem;margin:0 0 8px}
.conn-note{font-size:.8125rem;line-height:1.6;color:var(--text-sec);margin:4px 0 8px}
.conn-item{display:flex;flex-direction:column;gap:8px;padding:12px 0;border-top:1px solid var(--line)}
.conn-item:first-of-type{border-top:0}
.conn-item-text strong,.conn-item-text small{display:block}
.conn-item-text small{font-size:.8125rem;color:var(--text-sec);margin-top:2px}
.conn-item-actions{display:flex;flex-wrap:wrap;gap:8px}
.conn-item-actions .btn{flex:1 1 40%;min-height:44px;white-space:normal}
.conn-labels{margin:0 0 12px;padding-left:20px}.conn-labels li{margin:4px 0}
.conn-groups{border:0;padding:0;margin:12px 0;min-width:0}
.conn-groups legend{font-weight:600;font-size:.9375rem;padding:0;margin-bottom:4px}
.conn-group{display:flex;align-items:center;gap:12px;min-height:44px}
.conn-group input{width:22px;height:22px;flex-shrink:0;accent-color:var(--primary)}
.conn-select{display:block;width:100%;min-height:44px;margin:4px 0 8px;padding:8px;font:inherit;color:var(--text);background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg)}
.conn-later{margin-top:8px}
#connAccept .btn-primary{margin-top:8px}
.conn-search{display:flex;gap:8px}
.conn-search input{flex:1;min-width:0;min-height:44px;padding:8px 12px;font:inherit;color:var(--text);background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg)}
.conn-search .btn{flex:0 0 auto;min-height:44px;white-space:nowrap}
#connSearchResult[hidden],#connSearchAsk[hidden],.conn-link[hidden],#connForm[hidden]{display:none}
.conn-person{padding:16px 20px;margin:16px var(--gutter)}
.conn-person-title{display:flex;align-items:center;gap:8px;margin:0}
.conn-person .btn-full{margin-top:8px}
.conn-link{padding:16px 24px 24px}
.conn-link .btn{width:100%;margin-top:12px;display:flex;align-items:center;justify-content:center;gap:8px}
.conn-link-url{font-size:.8125rem;color:var(--text-sec);word-break:break-all;user-select:all;padding:8px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface-alt)}
.conn-banner{padding:12px 16px;margin:0 var(--gutter) 12px}
.conn-banner-row{display:flex;align-items:center;gap:8px;min-height:44px;color:var(--text);text-decoration:none}
.conn-banner-row strong{flex:1}
.conn-banner-ask p{margin:4px 0}
.conn-banner-h{display:flex;justify-content:space-between;align-items:center;gap:8px;margin:8px 0 0}
.conn-banner-h a{font-size:.8125rem;min-height:44px;display:inline-flex;align-items:center}
.diff-ask{grid-column:1/-1;margin:0;font-size:.8125rem;color:var(--text-sec)}
:root[data-theme='dark'] .conn-group input,:root[data-theme='dark'] .conn-select{color-scheme:dark}
@media(prefers-color-scheme:dark){:root:not([data-theme='light']) .conn-group input,:root:not([data-theme='light']) .conn-select{color-scheme:dark}}
.conn-badge{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;margin-left:4px;border-radius:50%;color:var(--primary);background:color-mix(in srgb,var(--primary) 12%,transparent);vertical-align:middle;flex-shrink:0}

/* Shared spacing and compact controls for people entry. */
:root{--tap:44px}
:root:lang(ko) body{word-break:keep-all}
p,.settings-note,.sp-flow-sub{ text-wrap:pretty }
h1,h2,.modal-title{ text-wrap:balance }
.conn-link-url,.contact-picker-row span,.channel-value{overflow-wrap:anywhere}
#peopleSearchForm{padding-inline:var(--gutter)}
.people-filter-controls{display:flex;align-items:center;gap:8px;margin:0 0 12px;padding:0 var(--gutter);min-width:0}
.people-filter-controls .filter-row{flex:1;min-width:0;padding:4px 16px 4px 0;margin:0;gap:8px;overflow-x:auto;mask-image:linear-gradient(to right,#000 calc(100% - 12px),transparent)}
.people-filter-controls .filter-chip{height:var(--tap);min-height:var(--tap);box-sizing:border-box;white-space:nowrap;flex-shrink:0}
.people-sort-control{position:relative;display:grid;place-items:center;flex:0 0 var(--tap);height:var(--tap);border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface)}
.people-filter-controls .people-sort{position:absolute;inset:0;opacity:0;width:100%;height:100%;margin:0;padding:0;min-height:var(--tap);cursor:pointer}
.people-sort-control:focus-within{outline:2px solid var(--primary);outline-offset:2px}
.add-person-sheet{margin:auto auto 0;width:100%;max-width:520px;max-height:90dvh;border-radius:var(--r-lg) var(--r-lg) 0 0;padding-bottom:env(safe-area-inset-bottom);box-sizing:border-box}
.add-person-options{padding:8px var(--gutter) 24px;display:flex;flex-direction:column;gap:8px}
.add-person-option{display:flex;align-items:center;gap:12px;min-height:56px;width:100%;padding:12px 16px;border:1px solid var(--line);border-radius:var(--r-md);font:inherit;text-decoration:none;color:var(--text);background:var(--surface);box-sizing:border-box;text-align:start}
.add-person-option span{flex:1;min-width:0;text-wrap:pretty}
.add-person-option svg{flex-shrink:0}
.add-person-primary{background:var(--primary);color:var(--on-primary);border-color:var(--primary)}
.add-person-options [hidden]{display:none!important}
.add-person-options .contact-picker-help{padding:0 8px 12px;font-size:.8125rem;color:var(--text-sec)}
.ai-processing-details summary{display:flex;align-items:center;min-height:var(--tap);cursor:pointer;color:var(--primary);gap:8px}

.ai-processing-details[open] summary svg{transform:rotate(180deg)}
.ai-processing-details p{margin:8px 0;line-height:1.6}
.sp-flow-sub .sentence{display:block}


.ask-entry{margin-inline:var(--gutter)}

.conn-report summary{min-height:44px;padding-block:12px;cursor:pointer}.conn-report select{min-height:44px;max-width:100%;margin:8px;padding:8px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface);color:var(--text);font:inherit}
.contact-picker-help ol{padding-inline-start:1.5em;margin:8px 0}


/* Shared contacts confirmation: one decision per row at narrow widths. */
.share-handoff { max-width: 440px; padding: 28px 24px; margin: 0 auto; }
.share-handoff h1 { font-size: 1.625rem; line-height: 1.35; }
.share-handoff p { line-height: 1.6; overflow-wrap: anywhere; }
.share-handoff .btn { display: flex; width: 100%; min-height: 52px; margin-top: 12px; white-space: normal; }
#contactImportErrorText, #contactSaveError, #contactImportCounts, #contactPlainSummary { overflow-wrap: anywhere; }

.contact-import-error {margin:16px 24px;padding:16px;border-radius:var(--r-lg);background:color-mix(in srgb,var(--accent) 8%,var(--surface));overflow-wrap:anywhere;}
.contact-import-error strong {display:block;}.contact-import-error .btn {width:100%;margin-top:8px;white-space:normal;}
.contact-import-code {display:block;text-align:right;font-size:12px;color:var(--text-ter);margin-top:8px;}
#contactSaveError {margin:0 0 16px;}#contactPlainSummary,#contactImportCounts {white-space:pre-line;}
.share-wordmark {font-family:var(--font-ui);letter-spacing:.09em;color:var(--qn-navy);margin-bottom:24px;line-height:1.18;}.share-wordmark span {color:var(--qn-crimson);}
.contact-import-error [hidden] {display:none!important;}
/* Opening a dialog lands focus on its title (see app.js), not on [Cancel]. */
.modal-title:focus{outline:none}
.contact-text-fix{margin-top:12px;display:flex;flex-direction:column;gap:6px}
.contact-text-fix label{font-size:13px;color:var(--text-sec)}
.contact-text-fix .btn{margin-top:8px}
#contactAllKnown{margin:0 0 8px;color:var(--text-sec)}
.offline-page .card{text-align:center;padding:28px 20px}
.offline-page .offline-icon{color:var(--text-sec);margin:12px 0 0}
.offline-page h1{font-size:1.25rem;margin:8px 0}
.offline-page p{color:var(--text-sec)}
.offline-page .btn{width:100%;margin-top:16px}

/* 10A: yesterday's people */
.rh-recap{margin:0 0 12px;padding:14px;border:1px solid var(--line-strong);border-radius:16px;background:color-mix(in srgb,var(--primary) 6%,var(--surface));color:var(--text)}
.rh-recap p{margin:0 0 10px;font-size:.9375rem;line-height:1.45}
.rh-recap-actions{display:flex;gap:8px;justify-content:flex-end}
.rh-recap-actions .btn{min-height:44px}
.recap{padding:0 16px 32px;max-width:560px;margin:0 auto}
.recap-top{display:flex;align-items:center;justify-content:space-between;margin:4px 0 6px}
.recap-progress{font-size:.875rem;color:var(--text-sec);font-variant-numeric:tabular-nums}
.recap-stop{background:none;border:0;color:var(--text-sec);font-size:.875rem;min-height:44px;padding:0 4px;cursor:pointer}
.recap-lede{margin:0 0 12px;color:var(--text-sec);font-size:.9375rem}
.recap-card{padding:16px}
.recap-person{display:flex;gap:12px;align-items:center;margin-bottom:14px}
.recap-person h2{margin:0;font-size:1.125rem;overflow-wrap:anywhere}
.recap-meta{margin:2px 0 0;color:var(--text-sec);font-size:.8125rem;overflow-wrap:anywhere}
.recap-label{display:block;font-weight:600;font-size:.875rem;margin-bottom:6px}
.recap-note{width:100%;resize:vertical;min-height:84px;box-sizing:border-box}
.recap-tools{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:10px 0 14px}
.recap-chip{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:0 12px;border:1px solid var(--line-strong);border-radius:999px;font-size:.875rem;cursor:pointer}
.recap-mic{display:inline-flex;align-items:center;gap:6px;min-height:40px;cursor:pointer}
.recap-actions{display:flex;gap:8px;position:sticky;bottom:calc(env(safe-area-inset-bottom,0px) + 8px)}
.recap-actions .btn{flex:1;min-height:48px}
.recap-done{padding:20px;text-align:center}
.recap-done h2{margin:0 0 8px}
.recap-done p{color:var(--text-sec);margin:0 0 16px}

/* IM1: extended fields and event tag on the import review */
.contact-picker-extra{display:block;color:var(--text-sec);font-size:.8125rem;margin-top:2px;overflow-wrap:anywhere}
.contact-no-extras .contact-picker-extra{display:none}
.contact-extras-toggle{display:flex;flex-direction:row-reverse;align-items:center;justify-content:space-between;gap:12px;min-height:48px;margin-bottom:4px;font-size:.9375rem}
.contact-extras-toggle span{flex:1}
.contact-event-label{display:block;font-weight:600;font-size:.875rem;margin:14px 0 6px}
#contactEventTag{width:100%;box-sizing:border-box;margin-bottom:14px}
.contact-recap-prompt{padding:16px}
.contact-recap-prompt p{margin:0 0 14px;font-size:1rem}
.contact-recap-actions{display:flex;gap:8px}
.contact-recap-actions .btn{flex:1;min-height:48px}
/* IM2: add details to someone already saved */
.contact-merge-row{margin:-4px 0 10px 36px;padding:8px 10px;border-radius:12px;background:color-mix(in srgb,var(--primary) 6%,var(--surface))}
.contact-merge-row label{display:flex;align-items:center;gap:8px;min-height:40px;font-size:.875rem}
.contact-merge-row small{display:block;color:var(--text-sec);font-size:.75rem}