/* Theme: the app sets <html data-theme="light|dark"> (Settings → Appearance; light by default, printing is always light).
   Mankaa Notes — Material 3 tokens (see docs/design/style-guide.md). No external fonts or assets. */
/* Manrope (SIL OFL 1.1, fonts/OFL.txt), bundled locally: the CSP allows no external font hosts. One variable file covers every weight. */
@font-face { font-family: "Manrope"; src: url("../fonts/manrope.woff2") format("woff2"); font-weight: 200 800; font-style: normal; font-display: swap; }
:root {
  --bg: #F6FAFC; --panel: #FFFFFF; --panel-2: #F2F8FA; --ink: #171D1E; --muted: #3F484B; --line: #DBE4E7; --outline: #6F797C; --placeholder: #5F6B6E;
  --accent: #006D63; --accent-ink: #FFFFFF; --accent-soft: #D2FAF1; --accent-container: #A6F2E4; --on-accent-container: #00201B;
  --secondary: #005368; --secondary-soft: #DDF4FF;
  --brand-blue: #005368; --brand-green: #00A896; --brand-coral: #D44C38; --brand-blue-text: #005368; --brand-green-text: #007F72; /* logo + wordmark; #007F72 keeps "Notes" ≥ 4.5:1 on white and --bg */
  /* status chips: tint for information, stronger tint for attention, solid for urgent (every fg/bg pair ≥ 4.5:1) */
  --chip-neutral: #E6ECEE; --chip-neutral-fg: #3F484B; --chip-green: #DDF5E4; --chip-green-fg: #146C2E; --chip-violet: #EEE8FB; --chip-violet-fg: #5B3E96;
  --chip-amber: #FFF0C7; --chip-amber-fg: #6B4E00; --chip-amber-2: #FFDB8F; --chip-amber-2-fg: #4D3800; --chip-amber-solid: #8A6100; --chip-amber-solid-fg: #FFFFFF; --chip-red-solid: #BA1A1A; --chip-red-solid-fg: #FFFFFF;
  --ok: #146C2E; --ok-soft: #EBFFED; --warn: #7A5900; --warn-soft: #FFFBEB; --danger: #BA1A1A; --danger-soft: #FFDAD6;
  --priv: #5B3E96; --priv-soft: #F0EBFF;
  --r-xs: 4px; --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 28px; --r-full: 999px; --radius: var(--r-lg);
  --fs-xs: .75rem; --fs-sm: .8125rem; --fs-md: .875rem; --fs-body: .9375rem; --fs-lg: 1.0625rem; --fs-h1: 1.625rem; --fs-display: 1.875rem; /* type scale: 12 / 13 / 14 / 15 / 17 / 26 / 30px */
  --font: "Manrope", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", sans-serif;
  --elev-1: 0 1px 2px rgb(0 0 0 / .08), 0 1px 3px 1px rgb(0 0 0 / .06); --elev-3: 0 1px 3px rgb(0 0 0 / .1), 0 4px 8px 3px rgb(0 0 0 / .08);
  --shadow: var(--elev-1);
  --motion-state: .15s cubic-bezier(.2, 0, 0, 1); --motion-enter: .4s cubic-bezier(.05, .7, .1, 1);
  color-scheme: light;
}
@media not print {
:root[data-theme="dark"] {
    --bg: #0F1415; --panel: #171D1E; --panel-2: #1D2426; --ink: #DDE3E5; --muted: #BFC8CB; --line: #3F484B; --outline: #899295; --placeholder: #9AA3A6;
    --accent: #6FE0CB; --accent-ink: #00382E; --accent-soft: #00382E; --accent-container: #005044; --on-accent-container: #A6F2E4;
    --secondary: #5FBDDE; --secondary-soft: #00363F;
    --brand-blue: #5FBDDE; --brand-green: #6FE0CB; --brand-coral: #D44C38; --brand-blue-text: #8ED3EE; --brand-green-text: #6FE0CB;
    --chip-neutral: #2B3133; --chip-neutral-fg: #BFC8CB; --chip-green: #16331F; --chip-green-fg: #7FD99A; --chip-violet: #2E2548; --chip-violet-fg: #CFBDFE;
    --chip-amber: #3A2E10; --chip-amber-fg: #F0C35A; --chip-amber-2: #5C4300; --chip-amber-2-fg: #FFDEA1; --chip-amber-solid: #F0C35A; --chip-amber-solid-fg: #2B1F00; --chip-red-solid: #FFB4AB; --chip-red-solid-fg: #410002;
    --ok: #7FD99A; --ok-soft: #0B2A16; --warn: #F0C35A; --warn-soft: #2B1F00; --danger: #FFB4AB; --danger-soft: #410002;
    --priv: #CFBDFE; --priv-soft: #2A2240; --shadow: none;
    color-scheme: dark;
}
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body { background: var(--bg); color: var(--ink); font: var(--fs-body)/1.6 var(--font); -webkit-font-smoothing: antialiased; }
h1 { font-size: var(--fs-h1); font-weight: 700; line-height: 1.25; margin: 0 0 4px; letter-spacing: -.015em; overflow-wrap: anywhere; }
h2 { font-size: var(--fs-lg); font-weight: 600; margin: 0 0 12px; letter-spacing: -.015em; overflow-wrap: anywhere; }
h3 { font-size: var(--fs-sm); font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--accent); margin: 18px 0 4px; }
a { color: var(--accent); }
p { margin: 0 0 10px; }
small, .muted { color: var(--muted); }
.pre { white-space: pre-wrap; overflow-wrap: anywhere; margin: 0; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
main:focus-visible { outline: none; } /* focus moves to <main> on each route for screen readers; a ring round the whole page is noise */

/* buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; flex-shrink: 0; max-width: 100%; min-height: 40px; padding: 10px 24px; border: 1px solid var(--outline); border-radius: var(--r-full); background: transparent; color: var(--accent); font: inherit; font-size: var(--fs-md); font-weight: 500; letter-spacing: .03em; text-decoration: none; text-align: center; overflow-wrap: break-word; cursor: pointer; transition: background-color var(--motion-state), border-color var(--motion-state), box-shadow var(--motion-state), color var(--motion-state); }
.btn:hover:not(:disabled) { background: color-mix(in srgb, var(--accent) 8%, transparent); }
.btn:active:not(:disabled) { background: color-mix(in srgb, var(--accent) 12%, transparent); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.btn.primary:hover { background: color-mix(in srgb, var(--accent-ink) 8%, var(--accent)); }
.btn.primary:active { background: color-mix(in srgb, var(--accent-ink) 12%, var(--accent)); }
.btn.ghost { background: transparent; border-color: transparent; color: var(--accent); }
.btn.ghost:hover { background: color-mix(in srgb, var(--accent) 8%, transparent); }
.btn.ghost:active { background: color-mix(in srgb, var(--accent) 12%, transparent); }
.btn.danger { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 40%, transparent); }
.btn.danger:hover { background: color-mix(in srgb, var(--danger) 8%, transparent); }
.btn.danger:active { background: color-mix(in srgb, var(--danger) 12%, transparent); }
.btn.danger.ghost { border-color: transparent; }
.btn.sm { min-height: 32px; padding: 4px 14px; font-size: var(--fs-sm); }
.btn:disabled { opacity: .38; cursor: progress; }
.link { background: none; border: 0; padding: 0; color: var(--accent); font: inherit; font-size: var(--fs-md); text-decoration: underline; cursor: pointer; }

/* forms */
label { display: flex; flex-direction: column; gap: 5px; font-size: var(--fs-sm); font-weight: 500; color: var(--muted); }
input, select, textarea { width: 100%; padding: 10px 14px; border: 1px solid var(--outline); border-radius: var(--r-md); background: var(--panel); color: var(--ink); font: inherit; font-size: var(--fs-body); font-weight: 400; transition: border-color var(--motion-state), box-shadow var(--motion-state); }
select { overflow: hidden; text-overflow: ellipsis; } /* WebKit lets a long option widen the page at large text */
textarea { min-height: 4.8em; line-height: 1.55; resize: vertical; field-sizing: content; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
input::placeholder, textarea::placeholder { color: var(--placeholder); opacity: 1; } /* opacity: Firefox dims placeholders by default */
input[type="checkbox"]:focus-visible, input[type="radio"]:focus-visible, select:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* WebKit ignores the inset shadow on <select> */
.check { flex-direction: row; align-items: center; gap: 8px; min-height: 24px; font-size: var(--fs-md); font-weight: 500; color: var(--ink); cursor: pointer; }
.check input { width: 16px; height: 16px; margin: 0; accent-color: var(--accent); }
.req { color: var(--danger); margin-left: 3px; }
label.caps::after { content: "Caps Lock is on"; color: var(--warn); font-size: var(--fs-xs); font-weight: 600; }
.grid-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 14px 16px; }
.grid-form h2 { margin: 0; }
.span { grid-column: 1 / -1; }
.stack { display: flex; flex-direction: column; gap: 14px; }
.stack h2, .stack p { margin: 0; }

/* lock screens */
.auth { container: auth / inline-size; min-height: 100vh; display: grid; place-items: center; padding: 32px 16px; }
.auth-card { width: min(460px, 100%); padding: 30px; background: var(--panel); border-radius: var(--r-xl); box-shadow: var(--elev-3); }
:root[data-theme="dark"] .auth-card { border: 1px solid var(--line); box-shadow: none; }
.brand-lg { display: grid; justify-items: center; gap: 10px; margin-bottom: 24px; text-align: center; }
.brand-lg .logo { height: 46px; }
.brand-lg h1 { margin: 0; font-size: var(--fs-h1); }
.brand-lg p { margin: 0; font-size: var(--fs-md); }
/* logo reveal — authScreen adds .play once per page load: feathers drift down and settle, the ink drops with a small bounce, the text rises in */
.ft, .ink { transform-box: fill-box; }
.ft { transform-origin: 0% 100%; }
.ink { transform-origin: 50% 50%; }
.brand-lg.play .ft1 { animation: feather-in .9s cubic-bezier(.22, .8, .3, 1) both; }
.brand-lg.play .ft2 { animation: feather-in .9s cubic-bezier(.22, .8, .3, 1) .18s both; }
.brand-lg.play .ink { animation: ink-drop .55s cubic-bezier(.34, 1.56, .64, 1) .8s both; }
.brand-lg.play h1, .brand-lg.play p { animation: rise .5s cubic-bezier(.05, .7, .1, 1) .95s both; }
@keyframes feather-in { 0% { opacity: 0; transform: translate(-6%, -40%) rotate(-16deg); } 55% { opacity: 1; transform: translate(1%, 3%) rotate(5deg); } 78% { transform: translate(0, -1%) rotate(-2deg); } 100% { transform: none; } }
@keyframes ink-drop { 0% { opacity: 0; transform: translateY(-160%) scale(.5); } 70% { opacity: 1; transform: translateY(8%) scale(1.15, .9); } 100% { transform: none; } }
@keyframes rise { from { opacity: 0; transform: translateY(6px); } }
.err { min-height: 1.3em; color: var(--danger); font-size: var(--fs-md); }
.info { padding: 10px 12px; border-radius: var(--r-md); background: var(--secondary-soft); color: var(--secondary); }
.note { padding: 10px 12px; border: 1px dashed var(--line); border-radius: var(--r-md); background: var(--panel-2); color: var(--muted); font-size: var(--fs-sm); }
.recovery { display: block; padding: 16px; border: 1.5px dashed var(--accent); border-radius: var(--r-md); background: var(--panel-2); font: 600 var(--fs-lg)/1.7 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: .05em; text-align: center; word-break: break-word; user-select: all; }
.center { text-align: center; }
.fatal, .boot { padding: 48px 16px; text-align: center; color: var(--muted); }
.logo { height: 26px; width: auto; aspect-ratio: 58 / 38; flex: none; overflow: visible; }
.lg-b { fill: var(--brand-blue); }
.lg-g { fill: var(--brand-green); }
.lg-c { fill: var(--brand-coral); }
.lg-bq, .lg-gq { fill: none; stroke-width: 2.2; stroke-linecap: round; }
.lg-bq { stroke: var(--brand-blue); }
.lg-gq { stroke: var(--brand-green); }
.lg-vein { fill: none; stroke: #fff; stroke-opacity: .55; stroke-width: 1.4; stroke-linecap: round; }
:root[data-theme="dark"] .lg-vein { stroke: var(--panel); stroke-opacity: .8; }
.wordmark { font-family: var(--font); font-weight: 400; letter-spacing: -.02em; line-height: 1; color: var(--brand-green-text); }
.wordmark b { font-weight: 600; color: var(--brand-blue-text); }
/* Staging only (beta.notes…): an amber "Beta" tag after the wordmark and a warning on the lock screen. */
.badge.beta-tag { margin-left: 8px; background: var(--chip-amber-solid); color: var(--chip-amber-solid-fg); letter-spacing: .04em; text-transform: uppercase; }
.brand-lg p.beta-note { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: var(--r-full); background: var(--warn-soft); color: var(--warn); font-size: var(--fs-sm); font-weight: 600; }

/* app shell */
/* skip link: out of sight until a keyboard user tabs onto it, then it sits above the top bar */
.skip { position: fixed; top: 8px; left: 8px; z-index: 70; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); border: 0; white-space: nowrap; }
.skip:focus-visible { width: auto; height: auto; min-height: 44px; padding: 10px 24px; overflow: visible; clip: auto; border: 1px solid var(--accent); border-radius: var(--r-full); background: var(--panel); box-shadow: var(--elev-3); color: var(--accent); font: inherit; font-size: var(--fs-md); font-weight: 500; outline: 2px solid var(--accent); outline-offset: 2px; cursor: pointer; }
.shell { display: grid; grid-template: "top top" auto "side main" 1fr / 276px minmax(0, 1fr); height: 100vh; height: 100dvh; }
.topbar { grid-area: top; display: flex; align-items: center; gap: 14px; padding: 10px 18px; background: var(--panel); border-bottom: 1px solid var(--line); }
.brand { display: flex; align-items: center; gap: 10px; color: var(--ink); font-weight: 600; text-decoration: none; white-space: nowrap; }
.brand .wordmark { font-size: var(--fs-lg); }
.search { position: relative; flex: 1; max-width: 520px; display: flex; align-items: center; }
.search > .i { position: absolute; left: 14px; color: var(--muted); pointer-events: none; }
.search input { padding-left: calc(1.15em + 22px); padding-right: calc(3.2rem + 14px); background: var(--panel-2); }
.search kbd { position: absolute; right: 10px; padding: 1px 7px; border: 1px solid var(--line); border-radius: var(--r-xs); color: var(--muted); font: 500 var(--fs-xs)/1.5 var(--font); pointer-events: none; }
.search input:not(:placeholder-shown) ~ kbd { display: none; }
.top-actions { display: flex; gap: 6px; margin-left: auto; }
.sidebar { grid-area: side; overflow-y: auto; padding: 16px 10px; background: var(--panel-2); border-right: 1px solid var(--line); }
.side-head { display: flex; align-items: center; justify-content: space-between; padding: 0 8px 10px; }
.side-toggle .i { display: none; }
.side-toggle { display: flex; align-items: center; gap: 6px; padding: 0; border: 0; background: none; color: inherit; font: inherit; pointer-events: none; }
.side-head h2 { margin: 0; font-size: var(--fs-sm); font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--accent); }
.client-list a { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 8px; padding: 8px 10px; border-radius: var(--r-full); color: var(--ink); text-decoration: none; transition: background-color var(--motion-state); }
.client-list a:hover { background: color-mix(in srgb, var(--ink) 8%, transparent); }
.client-list a.on { background: var(--accent-container); color: var(--on-accent-container); }
.client-list a.on:hover { background: color-mix(in srgb, var(--on-accent-container) 8%, var(--accent-container)); }
.client-list a.on .meta { color: inherit; }
.client-list .nm { overflow: hidden; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.client-list .meta { grid-column: 1; display: flex; gap: 10px; font-size: var(--fs-xs); color: var(--muted); }
.client-list .meta > span { display: inline-flex; align-items: center; gap: 3px; }
.client-list .meta .i { width: 12px; height: 12px; }
.client-list .badge { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
.client-group { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line); }
.client-group summary { min-height: 36px; padding: 0 10px; border-radius: var(--r-full); color: var(--muted); font-size: var(--fs-sm); font-weight: 600; transition: background-color var(--motion-state); }
.client-group summary:hover { background: color-mix(in srgb, var(--ink) 8%, transparent); }
.client-group .count { margin-left: auto; padding: 0 8px; border-radius: var(--r-full); background: var(--line); color: var(--muted); font-size: var(--fs-xs); }
.client-group a .nm { font-weight: 500; }
.pad { padding: 8px 10px; font-size: var(--fs-md); }
main { grid-area: main; min-width: 0; overflow-y: auto; outline: none; }
.page { container: page / inline-size; max-width: 980px; margin: 0 auto; padding: 26px 28px 72px; }
.page-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 12px 16px; margin-bottom: 18px; }
.sticky-head { position: sticky; top: 0; z-index: 5; margin: -26px -28px 18px; padding: 18px 28px 12px; background: color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter: blur(6px); border-bottom: 1px solid var(--line); }
.crumb { margin: 0 0 2px; font-size: var(--fs-md); }
.crumb a { display: inline-flex; align-items: center; gap: 2px; text-decoration: none; overflow-wrap: anywhere; }
.crumb .i { width: 16px; height: 16px; }
.sub { margin: 0; color: var(--muted); }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.actions .right { margin-left: auto; }
.bar { position: sticky; bottom: 0; padding: 12px 0; background: var(--bg); border-top: 1px solid var(--line); }
.hint { margin: 0 0 10px 4px; font-size: var(--fs-sm); color: var(--muted); }
.save-hint { font-size: var(--fs-sm); }
.consent-points { display: grid; gap: 8px; margin: 0; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r-md); }
.consent-points legend { padding: 0 6px; color: var(--muted); font-size: var(--fs-sm); font-weight: 600; }
.consent-card .guardian-fields { display: none; }
.consent-card.guardian .guardian-fields { display: grid; }
.disc-list { display: grid; gap: 10px; margin: 0 0 12px; padding: 0; list-style: none; }
.disc { padding: 10px 12px; border-left: 3px solid var(--secondary); border-radius: 0 var(--r-sm) var(--r-sm) 0; background: var(--panel-2); }
.disc p { margin: 2px 0; }
.disc-top { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.disc-new { margin-top: 6px; }
.disc-new form { margin-top: 12px; }
.disc-link { margin: 10px 0 0; font-size: var(--fs-sm); }
.disc-link a { display: inline-flex; align-items: center; gap: 6px; }
.cont-steps li { margin-bottom: 12px; }
.keep-note { display: flex; align-items: flex-start; gap: 8px; margin: 14px 0 0; }
.keep-note .i { flex: none; margin-top: 2px; color: var(--accent); }
.sign-state { margin: 4px 0 0; max-width: 60ch; font-size: var(--fs-sm); color: var(--warn); }
.sign-state.ready { color: var(--ok); }
.prev[open] summary { margin-bottom: 8px; }
.prev-body h3:first-child { margin-top: 4px; }
.prev-body p { margin-bottom: 6px; }

/* disclosures */
.disclose > summary { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; cursor: pointer; list-style: none; }
.disclose > summary::-webkit-details-marker { display: none; }
.disclose > summary > .i-chevron { color: var(--accent); transition: transform var(--motion-state); }
.disclose[open] > summary > .i-chevron { transform: rotate(90deg); }

/* content */
.card { margin-bottom: 16px; padding: 20px 24px; background: var(--panel); border-radius: var(--radius); box-shadow: var(--shadow); }
.grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 16px; margin-bottom: 16px; }
.grid2 > .card { min-width: 0; margin: 0; }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr)); gap: 12px; margin: 20px 0 16px; }
.stat { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 12px; align-items: center; padding: 14px 16px; background: var(--panel); border-radius: var(--radius); box-shadow: var(--shadow); }
:root[data-theme="dark"] .card, :root[data-theme="dark"] .stat { border: 1px solid var(--line); }
.stat-ic { grid-row: 1 / span 2; display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--r-full); background: var(--accent-soft); color: var(--accent); }
.stat-ic .i { width: 20px; height: 20px; }
.stat.warn .stat-ic { background: var(--warn-soft); color: var(--warn); }
.stat.danger .stat-ic { background: var(--danger-soft); color: var(--danger); }
.stat b { display: block; font-size: var(--fs-display); font-weight: 700; line-height: 1.15; color: var(--accent); font-variant-numeric: tabular-nums; }
.stat span { font-size: var(--fs-sm); color: var(--muted); }
.stat.warn b { color: var(--warn); }
.stat.danger b { color: var(--danger); }
.banner { display: flex; align-items: center; gap: 10px; margin: 14px 0; padding: 8px 10px 8px 14px; border-radius: var(--r-md); font-size: var(--fs-md); }
.banner.warn { background: var(--warn-soft); border: 1px solid color-mix(in srgb, var(--warn) 35%, transparent); }
.banner.danger { background: var(--danger-soft); border: 1px solid color-mix(in srgb, var(--danger) 35%, transparent); }
.banner.danger > .i { color: var(--danger); }
/* backup + install steps: icon, then one line */
.steps { display: grid; gap: 10px; margin: 12px 0; padding: 0; list-style: none; }
.steps li { display: flex; align-items: center; gap: 12px; }
.steps small { display: block; color: var(--muted); font-size: var(--fs-xs); }
.bk-state { display: flex; align-items: flex-start; gap: 8px; margin: 0 0 4px; padding: 10px 12px; border-radius: var(--r-md); font-size: var(--fs-md); }
.bk-state > .i { flex: none; margin-top: 2px; }
.bk-state.ok { background: var(--chip-green); color: var(--chip-green-fg); }
.bk-state.warn { background: var(--warn-soft); color: var(--ink); }
.bk-state.warn > .i { color: var(--warn); }
.bk-check { display: grid; gap: 12px; margin-top: 14px; padding: 14px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--panel-2); }
.bk-check[hidden], .bk-check [hidden] { display: none; }
.bk-check p { margin: 0; }
.bk-more { margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--line); }
.welcome { margin-top: 20px; padding: 28px; }
.rows { list-style: none; margin: 0; padding: 0; }
.rows li + li { border-top: 1px solid var(--line); }
.rows a { display: grid; grid-template-columns: minmax(44px, auto) minmax(0, 1fr) auto; gap: 14px; align-items: center; margin: 0 -8px; padding: 10px 8px; border-radius: var(--r-sm); color: inherit; text-decoration: none; }
.rows.simple a { display: block; }
.rows a:hover { background: color-mix(in srgb, var(--ink) 8%, transparent); }
.dblock { display: grid; justify-items: center; min-width: max(44px, 2.75rem); padding: 4px 0; border-radius: var(--r-sm); background: var(--panel-2); line-height: 1.1; }
.dblock b { font-size: var(--fs-lg); font-weight: 700; }
.dblock small { font-size: var(--fs-xs); font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.what-top { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.rows b { min-width: 0; overflow-wrap: anywhere; }
.row-time { color: var(--muted); font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }
.cues { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; color: var(--muted); }
.cues .i { width: 16px; height: 16px; }
.when-r { margin-left: auto; font-size: var(--fs-sm); }
.rows.simple a { display: flex; align-items: center; gap: 10px; }
.preview { display: block; overflow: hidden; color: var(--muted); font-size: var(--fs-md); text-overflow: ellipsis; white-space: nowrap; }
.badges { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px; }
/* status chips — one shape everywhere; colour + icon carry the meaning, and urgency rises from tint to solid */
.badge { display: inline-flex; align-items: center; gap: 4px; min-height: 22px; padding: 3px 9px; border-radius: var(--r-full); background: var(--chip-neutral); color: var(--chip-neutral-fg); font-size: var(--fs-xs); font-weight: 650; line-height: 1; letter-spacing: .01em; vertical-align: middle; white-space: nowrap; }
h1 .badge { position: relative; top: -3px; }
.badge.dot::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.badge.ok, .st-active { background: var(--chip-green); color: var(--chip-green-fg); }
.badge.warn, .st-paused, .risk-low { background: var(--chip-amber); color: var(--chip-amber-fg); }
.risk-moderate { background: var(--chip-amber-2); color: var(--chip-amber-2-fg); }
.badge.overdue { background: var(--chip-amber-solid); color: var(--chip-amber-solid-fg); }
.risk-high { background: var(--chip-red-solid); color: var(--chip-red-solid-fg); }
.badge.priv { background: var(--chip-violet); color: var(--chip-violet-fg); }
.st-discharged, .risk-none { background: var(--chip-neutral); color: var(--chip-neutral-fg); }
.dl { display: grid; grid-template-columns: max-content 1fr; gap: 6px 18px; margin: 0; }
.dl dt { color: var(--muted); font-size: var(--fs-md); }
.dl dd { margin: 0; overflow-wrap: anywhere; }
mark { padding: 0 1px; border-radius: var(--r-xs); background: color-mix(in srgb, var(--warn) 32%, transparent); color: inherit; }
.pick { display: flex; flex-wrap: wrap; gap: 8px; }
.pick .btn { overflow-wrap: anywhere; } /* client names: a long one wraps inside its button */

/* note editor */
.meta-card > summary { flex-wrap: nowrap; margin: -6px -8px; padding: 6px 8px; border-radius: var(--r-md); }
.meta-card > summary:hover { background: color-mix(in srgb, var(--ink) 6%, transparent); }
.meta-card > summary .chips-row { flex: 1; margin: 0; }
.meta-card > summary > .i-edit { color: var(--muted); }
.meta-card[open] > summary { margin-bottom: 10px; }
@media (min-width: 821px) { .meta-card > summary { display: none; } }
.meta-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 135px), 1fr)); gap: 12px; }
.sec > span { color: var(--ink); font-size: var(--fs-body); font-weight: 650; }
/* "Not applicable": offered on empty sections of multi-section formats; swaps the textarea for a reason */
.sec-card { container: seccard / inline-size; position: relative; }
.na-btn { position: absolute; top: 14px; right: 16px; display: inline-flex; align-items: center; gap: 4px; min-height: 32px; padding: 4px 12px; border: 1px solid transparent; border-radius: var(--r-full); background: transparent; color: var(--muted); font: inherit; font-size: var(--fs-sm); font-weight: 500; cursor: pointer; transition: background-color var(--motion-state); }
.na-btn .i { width: 14px; height: 14px; }
.na-btn:hover { background: color-mix(in srgb, var(--ink) 8%, transparent); }
.sec-card.has-text .na-btn { display: none; }
.na-box { display: none; margin-top: 8px; }
.sec-card.is-na .na-box { display: flex; }
.sec-card.is-na .sec textarea, .sec-card.is-na .kp { display: none; }
.sec-card.is-na .sec > span { color: var(--muted); }
.sec-card.is-na .na-btn { border-color: var(--line); background: var(--chip-neutral); color: var(--chip-neutral-fg); }
.na-t { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 0; color: var(--muted); }
.sec textarea { min-height: 6em; padding: 4px 0; border: 0; border-radius: 0; background: transparent; }
.sec textarea:focus { box-shadow: none; }
.card:has(.sec textarea:focus) { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent); }
.seg-radio, .chips { display: flex; flex-wrap: wrap; gap: 8px; }
.seg-radio { margin-bottom: 14px; }
.seg-radio label, .chip { position: relative; flex-direction: row; }
.seg-radio input, .chip input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.seg-radio span, .chip span { display: inline-flex; align-items: center; min-height: 32px; padding: 4px 14px; border: 1px solid var(--outline); border-radius: var(--r-full); color: var(--ink); font-size: var(--fs-md); font-weight: 500; cursor: pointer; user-select: none; transition: background-color var(--motion-state), border-color var(--motion-state), color var(--motion-state); }
.seg-radio span:hover, .chip span:hover { background: color-mix(in srgb, var(--ink) 8%, transparent); }
.seg-radio input:checked + span, .chip input:checked + span { background: var(--accent-container); border-color: transparent; color: var(--on-accent-container); }
.seg-radio input:checked + span:hover, .chip input:checked + span:hover { background: color-mix(in srgb, var(--on-accent-container) 8%, var(--accent-container)); }
.seg-radio .r-low input:checked + span, .seg-radio .r-moderate input:checked + span { background: var(--warn-soft); border-color: var(--warn); color: var(--warn); }
.seg-radio .r-high input:checked + span { background: var(--danger-soft); border-color: var(--danger); color: var(--danger); }
.seg-radio input:focus-visible + span, .chip input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.checks { display: flex; flex-wrap: wrap; gap: 10px 20px; margin-bottom: 14px; }
.mood { max-width: 240px; margin-top: 16px; }
/* moderate/high risk: crisis contacts, safety plan and follow-up appear only when needed */
.risk-more { display: none; }
.risk-card.elevated .risk-more { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; margin-top: 16px; }
.crisis { padding: 14px; border: 1.5px solid color-mix(in srgb, var(--danger) 45%, var(--line)); border-radius: var(--r-md); background: color-mix(in srgb, var(--danger-soft) 45%, var(--panel)); }
.crisis-h { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 0 0 10px; }
.crisis-h .i { color: var(--danger); }
.crisis-h small { margin-left: auto; color: var(--muted); font-size: var(--fs-xs); }
.crisis ul { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
.crisis li a { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 6px 10px; border-radius: var(--r-sm); background: var(--panel); color: var(--ink); text-decoration: none; }
@media (hover: hover) { .crisis li a:hover { background: color-mix(in srgb, var(--ink) 6%, var(--panel)); } } /* not on touch: the tint would stick after a tap */
.crisis li a { flex-wrap: wrap; }
.crisis li a b { min-width: 3.4em; color: var(--danger); font-size: var(--fs-lg); font-variant-numeric: tabular-nums; white-space: nowrap; }
.crisis li a span { display: flex; flex-direction: column; font-size: var(--fs-md); font-weight: 600; line-height: 1.3; }
.crisis li a small { color: var(--muted); font-size: var(--fs-xs); font-weight: 500; }
.crisis li.hl a, .crisis li.own a { box-shadow: inset 0 0 0 2px var(--danger); }
.crisis p { margin: 10px 0 0; font-size: var(--fs-sm); }
.plan { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; margin: 0; padding: 14px; border: 1px solid var(--line); border-radius: var(--r-md); }
.plan legend { padding: 0 6px; font-weight: 650; }
.plan-hint { margin: -4px 0 0; color: var(--muted); font-size: var(--fs-sm); }
.plan textarea { min-height: 3.4em; }
.follow { grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); }
.plan-dl { grid-template-columns: 1fr; gap: 2px; }
.plan-dl dt { margin-top: 10px; color: var(--accent); font-size: var(--fs-sm); font-weight: 650; }
.plan-doc .crisis { margin-top: 20px; }

/* keyword picker */
.kp { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--line); }
.kp-toggle { min-height: 32px; padding: 4px 14px; border: 0; border-radius: var(--r-full); background: transparent; color: var(--accent); font: inherit; font-size: var(--fs-sm); font-weight: 500; cursor: pointer; transition: background-color var(--motion-state); }
/* the "/ ''" alt text keeps the +/− out of the accessible name; the plain line before each is for browsers that lack it */
.kp-toggle::before { content: "+ "; content: "+ " / ""; }
.kp-toggle[aria-expanded="true"]::before { content: "− "; content: "− " / ""; }
.kp-toggle:hover { background: color-mix(in srgb, var(--accent) 8%, transparent); }
.kp-body { display: flex; flex-direction: column; gap: 8px; align-self: stretch; }
.kp-body[hidden], .kp-groups[hidden] { display: none; }
.kp-q { max-width: 320px; padding: 6px 14px; font-size: var(--fs-md); }
.kp-groups, .kp-items { display: flex; flex-wrap: wrap; gap: 6px; }
.kp-items:empty { display: none; }
.kp-chip, .kp-opt { min-height: 32px; padding: 4px 14px; border: 1px solid var(--outline); border-radius: var(--r-full); background: transparent; color: var(--ink); font: inherit; font-size: var(--fs-sm); font-weight: 500; cursor: pointer; transition: background-color var(--motion-state), border-color var(--motion-state), color var(--motion-state); }
.kp-chip:hover, .kp-opt:hover { background: color-mix(in srgb, var(--ink) 8%, transparent); }
.kp-chip[aria-pressed="true"] { background: var(--accent-container); border-color: transparent; color: var(--on-accent-container); }
.kp-chip[aria-pressed="true"]:hover { background: color-mix(in srgb, var(--on-accent-container) 8%, var(--accent-container)); }
.kp-opt { border-color: color-mix(in srgb, var(--accent) 50%, var(--outline)); }
.kp-preview { padding: 12px 14px; border: 1px solid var(--accent); border-radius: var(--r-md); background: var(--panel-2); }
.kp-preview p { margin: 0 0 8px; }
.kp-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr)); gap: 8px 12px; margin-bottom: 10px; }
.kp-sentence { padding: 8px 10px; border-left: 3px solid var(--accent); background: var(--panel); white-space: pre-wrap; overflow-wrap: anywhere; }
.kp-help, .kp-note, .kp-done { font-size: var(--fs-sm); margin: 0; }

/* security explainer */
.sec-page { container: sec / inline-size; max-width: 820px; }
.sec-page .lead { margin: 4px 0 18px; font-size: var(--fs-lg); line-height: 1.6; color: var(--ink); }
.sec-list { margin: 0; padding-left: 20px; }
.sec-list li { margin-bottom: 8px; }
.sec-list li:last-child { margin-bottom: 0; }
.sec-tech[open] summary { margin-bottom: 10px; }
.sec-tech .sec-list { color: var(--muted); font-size: var(--fs-md); }
.sec-link { display: flex; align-items: center; justify-content: space-between; gap: 16px; color: var(--ink); text-decoration: none; transition: box-shadow var(--motion-state); }
.sec-link > span:nth-child(2) { display: flex; flex-direction: column; gap: 2px; margin-right: auto; }
.sec-link:hover { box-shadow: var(--elev-3); }
.auth-card.wide { width: min(780px, 100%); }
.auth-card.wide .sec-page .card { box-shadow: none; border: 1px solid var(--line); }
.sec-page .card > h2 { margin-bottom: 14px; }
.sec-title { display: flex; align-items: flex-start; gap: 8px; margin: 0 0 4px; font-size: var(--fs-h1); line-height: 1.25; }
.sec-title > .i { flex: none; width: .9em; height: .9em; margin-top: .18em; color: var(--accent); }
/* visual explainers: small diagrams built from tokens + Lucide icons, so the guide reads as pictures first */
.sec-page small { display: block; color: var(--muted); font-size: var(--fs-sm); line-height: 1.4; }
.sec-ic.off { background: var(--chip-neutral); color: var(--muted); }
.sec-page .sv-cap { margin: 12px 0 0; color: var(--muted); font-size: var(--fs-sm); }
.sv-compare { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.sv-note { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; margin: 0; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--panel-2); }
.sv-note.dim { border-style: dashed; }
.sv-note figcaption { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: var(--fs-xs); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.sv-plain { flex: 1; margin: 0; font-size: var(--fs-md); }
.sv-plain b { display: block; margin-bottom: 2px; }
.sv-cipher { flex: 1; margin: 0; color: var(--muted); font: var(--fs-sm)/1.6 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: .04em; overflow-wrap: anywhere; }
.sv-who { margin: 0; padding: 0; list-style: none; }
.sv-who li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 10px 0; }
.sv-who li + li { border-top: 1px solid var(--line); }
.sv-flow, .sv-keys, .sv-time { max-width: 600px; margin-inline: auto; }
.sv-flow { display: flex; align-items: flex-start; gap: 6px; }
.sv-step { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 0; text-align: center; }
.sv-big { display: grid; place-items: center; width: 56px; height: 56px; margin-bottom: 6px; border-radius: var(--r-full); background: var(--accent-soft); color: var(--accent); }
.sv-big .i { width: 26px; height: 26px; }
.sv-arrow { flex: none; margin-top: 17px; color: var(--outline); }
.sv-arrow .i { width: 22px; height: 22px; }
.sec-page .sv-never { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 18px 0 0; padding-top: 14px; border-top: 1px dashed var(--line); }
.sv-never > span:first-child { margin-right: 4px; color: var(--muted); font-size: var(--fs-xs); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.sv-never .i { color: var(--danger); }
.sv-keys { display: grid; grid-template: "k1 join vault" "k2 join vault" / minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 10px 14px; }
.sv-key, .sv-vault { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 12px; border: 1px solid var(--line); border-radius: var(--r-md); text-align: center; }
.sv-key .sec-ic { margin-bottom: 4px; }
.sv-key.k1 { grid-area: k1; }
.sv-key.k2 { grid-area: k2; }
.sv-join { grid-area: join; color: var(--outline); }
.sv-join .i { width: 26px; height: 26px; }
.sv-vault { grid-area: vault; align-self: stretch; justify-content: center; border: 1.5px solid var(--accent); background: var(--accent-soft); }
.sv-vault .sv-big { background: var(--accent); color: var(--accent-ink); }
.sec-page .sv-warn { display: flex; align-items: flex-start; gap: 8px; margin: 14px 0 0; padding: 10px 12px; border-radius: var(--r-md); background: var(--warn-soft); font-size: var(--fs-md); }
.sv-warn > .i { margin-top: 2px; color: var(--warn); }
.sv-time { display: flex; margin: 4px 0 0; padding: 0; list-style: none; }
.sv-time li { position: relative; flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center; }
.sv-time li + li::before { content: ""; position: absolute; top: 21px; right: 50%; width: 100%; border-top: 2px dashed var(--line); }
.sv-dot { position: relative; display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 4px; border: 2px solid var(--line); border-radius: var(--r-full); background: var(--panel); color: var(--muted); }
.sv-dot.on { border-color: var(--accent); background: var(--accent); color: var(--accent-ink); }
.sec-page .sv-keys-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 18px 0 10px; color: var(--muted); font-size: var(--fs-md); }
.sec-page kbd { min-width: 28px; padding: 2px 8px; border: 1px solid var(--outline); border-bottom-width: 3px; border-radius: var(--r-sm); background: var(--panel); color: var(--ink); font: 600 var(--fs-sm)/1.4 var(--font); text-align: center; }
.sv-split { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); align-items: center; gap: 18px 32px; }
.sv-sign { max-width: 380px; }
.sv-doc { padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--panel-2); }
.sv-doc-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.sv-lines { display: grid; gap: 6px; }
.sv-lines i { display: block; height: 6px; border-radius: var(--r-full); background: var(--line); }
.sv-lines i:nth-child(2) { width: 85%; }
.sv-lines i:nth-child(3) { width: 60%; }
.sv-doc-foot { display: flex; align-items: center; gap: 6px; margin-top: 12px; color: var(--ok); font-size: var(--fs-xs); font-weight: 600; }
.sv-add { display: flex; align-items: center; gap: 10px; margin: 0 0 0 18px; padding: 10px 12px; border: 1px dashed var(--accent); border-top: 0; border-radius: 0 0 var(--r-md) var(--r-md); color: var(--accent); }
.sv-add b { color: var(--ink); }
.sv-states { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; justify-items: start; gap: 10px 12px; }
.badge.bad { background: var(--chip-red-solid); color: var(--chip-red-solid-fg); }
.sv-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: 10px; }
.sv-tile { display: flex; align-items: flex-start; gap: 12px; padding: 12px; border-radius: var(--r-md); background: var(--panel-2); }
.sv-tile.risk .sec-ic { background: var(--danger-soft); color: var(--danger); }
.sv-q + .sv-q { border-top: 1px solid var(--line); }
.sv-q > summary { min-height: 44px; padding: 6px 0; }
.sec-page .sv-q p { margin: 0 0 12px 30px; color: var(--muted); }
@media (max-width: 600px) {
  .sv-keys { grid-template: "k1 k2" "join join" "vault vault" / 1fr 1fr; }
  .sv-join { justify-self: center; transform: rotate(90deg); }
  .sv-big { width: 48px; height: 48px; }
  .sv-arrow { margin-top: 13px; }
  .sv-flow { gap: 2px; }
}
@media (max-width: 600px) {
  .auth:has(.auth-card.wide) { padding: 16px 12px; }
  .auth-card.wide { padding: 20px 16px; }
  .auth-card.wide .sec-page .card { padding: 16px; }
}

/* signed note & printed record */
.body h3:first-child { margin-top: 0; }
.sig { display: flex; align-items: center; gap: 14px; }
.sig > .i { width: 30px; height: 30px; color: var(--ok); }
.sig p { margin: 0; }
#integrity { margin-left: auto; }
.ok-t { color: var(--ok); }
.warn-t { color: var(--warn); }
.danger-t { color: var(--danger); font-weight: 600; }
.addendum { margin: 0 0 14px; padding: 2px 0 2px 12px; border-left: 3px solid var(--accent); }
.addendum p { margin: 0; }
.log { max-height: 340px; overflow-y: auto; margin: 0; padding: 0; list-style: none; font-size: var(--fs-md); }
.log li { padding: 6px 0; border-bottom: 1px solid var(--line); }
.danger-zone { box-shadow: var(--shadow), inset 0 0 0 1px color-mix(in srgb, var(--danger) 35%, var(--line)); }
:root[data-theme="dark"] .danger-zone { border-color: color-mix(in srgb, var(--danger) 35%, var(--line)); box-shadow: none; }
.doc-head { margin: 18px 0 16px; padding-bottom: 10px; border-bottom: 2px solid var(--ink); }
.doc-head p { margin: 2px 0; }
.doc-note { margin-top: 26px; }
.doc-note h2 { padding-bottom: 6px; border-bottom: 1px solid var(--line); }
.print-doc .card { box-shadow: none; }

/* toasts & privacy veil */
.update-bar { position: fixed; left: 50%; bottom: 16px; z-index: 60; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; width: min(560px, calc(100vw - 24px)); padding: 10px 12px 10px 14px; border-radius: var(--r-md); background: var(--ink); color: var(--bg); box-shadow: var(--elev-3); transform: translateX(-50%); font-size: var(--fs-md); }
.update-bar span { flex: 1 1 220px; }
.update-bar .btn.ghost { color: var(--bg); }
#toasts { position: fixed; right: 16px; bottom: 16px; z-index: 50; display: flex; flex-direction: column; gap: 8px; max-width: min(420px, calc(100vw - 32px)); }
.toast { padding: 10px 14px; border-radius: var(--r-md); background: var(--ink); color: var(--bg); font-size: var(--fs-md); box-shadow: var(--elev-3); animation: pop var(--motion-enter); }
.toast.error { background: var(--danger); color: var(--bg); }
:root[data-theme="dark"] .toast { box-shadow: none; }
@keyframes pop { from { opacity: 0; transform: translateY(6px); } }
body.veiled #app { filter: blur(16px); }

/* In-page confirm/prompt (ask() in app.js): native dialogs would freeze the auto-lock timer. */
dialog.ask { width: min(440px, calc(100vw - 32px)); padding: 24px; border: 0; border-radius: var(--r-xl); background: var(--panel); color: var(--ink); box-shadow: var(--elev-3); }
dialog.ask::backdrop { background: color-mix(in srgb, #000 45%, transparent); }
dialog.ask p { margin: 0 0 12px; }
dialog.ask label { display: grid; gap: 6px; margin-top: 4px; font-size: var(--fs-md); }
dialog.ask .actions, .sf-card .actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin-top: 20px; }
:root[data-theme="dark"] dialog.ask { border: 1px solid var(--line); }

/* A lock that failed on an unsaved change: an opaque cover, not a blur, and window focus doesn't lift it. */
.save-failed { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: 16px; background: var(--bg); }
.sf-card { width: min(480px, 100%); padding: 28px; border-radius: var(--r-xl); background: var(--panel); box-shadow: var(--elev-3); }
.sf-card > .i-alert { width: 28px; height: 28px; color: var(--danger); }
.sf-card h2 { margin: 8px 0; }
.sf-card .actions { justify-content: flex-start; }
:root[data-theme="dark"] .sf-card { border: 1px solid var(--line); box-shadow: none; }

@media (max-width: 820px) {
  .shell { grid-template: "top" auto "side" auto "main" 1fr / minmax(0, 1fr); height: auto; }
  .topbar { flex-wrap: wrap; padding: 10px 16px; }
  .brand .wordmark { display: none; }
  .search { order: 3; flex-basis: 100%; max-width: none; }
  .sidebar { max-height: 40vh; padding: 10px; border-right: 0; border-bottom: 1px solid var(--line); }
  .side-head { padding-bottom: 0; }
  .side-toggle { pointer-events: auto; cursor: pointer; min-height: 40px; }
  .side-toggle .i { display: block; color: var(--accent); transition: transform var(--motion-state); }
  .sidebar.open .side-toggle .i { transform: rotate(180deg); }
  .sidebar:not(.open) .side-body { display: none; }
  .sidebar.open .side-head { padding-bottom: 10px; }
  main { overflow: visible; }
  .page { padding: 18px 16px 64px; }
  .sticky-head { margin: -18px -16px 16px; padding: 12px 16px; }
  .rows a { grid-template-columns: minmax(44px, auto) minmax(0, 1fr) auto; gap: 4px 10px; }
  .rows a .badges { flex-direction: column; align-items: flex-end; }
  /* Note header on phones: back link | Print + Sign, then title | save status, then the sign chips across the full width. */
  .sticky-head { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 2px 6px; padding: 8px 16px; }
  .sticky-head .head-main, .sticky-head .actions { display: contents; }
  .sticky-head .crumb { grid-area: 1 / 1; margin: 0; }
  .sticky-head h1 { grid-area: 2 / 1; margin: 0; font-size: var(--fs-lg); }
  .sticky-head .sign-state { grid-area: 3 / 1 / 4 / 4; margin: 4px 0 0; }
  .sticky-head #printBtn { grid-area: 1 / 2; }
  .sticky-head #signBtn { grid-area: 1 / 3; }
  .sticky-head .save-state { grid-area: 2 / 2 / 3 / 4; justify-self: end; font-size: var(--fs-xs); white-space: nowrap; }
  .search kbd, .top-actions .btn.primary span { display: none; }
  .top-actions .btn.primary { width: 40px; min-width: 40px; padding: 0; }
}

/* a long button label drops below the banner text instead of squeezing it into a narrow column */
@media (max-width: 480px) {
  .banner { flex-wrap: wrap; }
  .banner > span { flex: 1 1 10em; min-width: 0; }
}

/* Large text. rem in a container query follows the root font size: 16rem is the whole page width on a 360px phone at about 140% text. */
@container page (max-width: 16rem) {
  /* the note header would fill the screen, so it scrolls away and stacks */
  .sticky-head { position: static; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
  .sticky-head .crumb, .sticky-head h1, .sticky-head .sign-state { flex: 1 0 100%; }
  .sticky-head .sign-state { order: 1; }
  .sticky-head .save-state { white-space: normal; }
  .rows a { grid-template-columns: auto minmax(0, 1fr); }
  .rows.simple a, .sig { flex-wrap: wrap; }
  .rows a .badges { grid-column: 2; flex-direction: row; justify-content: flex-start; }
  .banner { flex-wrap: wrap; }
  .banner > span { flex: 1 1 6rem; min-width: 0; }
  .dl { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .dl dd { margin-bottom: 8px; }
}
@container auth (max-width: 16rem) { .auth-card { padding: 20px 16px; } }
@container seccard (max-width: 14.5rem) { .sec-card .na-btn { position: relative; top: auto; right: auto; margin-top: 8px; } }
@container sec (max-width: 16rem) {
  .sv-compare { grid-template-columns: minmax(0, 1fr); }
  .sv-keys { grid-template: "k1" "k2" "join" "vault" / minmax(0, 1fr); }
  .sv-flow { flex-direction: column; align-items: stretch; }
  .sv-arrow { align-self: center; margin-top: 0; transform: rotate(90deg); }
  .sv-time { flex-direction: column; gap: 14px; }
  .sv-time li + li::before { display: none; }
  .sv-who li { grid-template-columns: auto minmax(0, 1fr); gap: 4px 12px; }
  .sv-who .badge { grid-column: 2; justify-self: start; }
  .sv-states { grid-template-columns: minmax(0, 1fr); gap: 4px; }
}
/* short windows (landscape phones, an on-screen keyboard): the note header scrolls away instead of eating the editor */
@media (max-height: 480px) { .sticky-head { position: static; } }


@media print {
  :root { --bg: #fff; --panel: #fff; --panel-2: #fff; --ink: #000; --muted: #444; --line: #bbb; --shadow: none;
    --brand-blue: #005368; --brand-green: #00A896; --brand-coral: #D44C38; --brand-blue-text: #005368; --brand-green-text: #007F72; }
  body { font-size: 11pt; }
  .topbar, .sidebar, .no-print, #toasts, .bar { display: none !important; }
  body:has(#saveFailed) #app, body.veiled #app { display: none !important; } /* hidden on screen means hidden on paper (Ctrl/⌘ P) */
  .shell { display: block; height: auto; }
  main { overflow: visible; }
  .page { max-width: none; padding: 0; }
  .sticky-head { position: static; margin: 0 0 12px; padding: 0; border: 0; background: none; backdrop-filter: none; }
  .card, :root[data-theme] .card { margin-bottom: 12px; padding: 0; border: 0; box-shadow: none; }
  textarea { padding: 0; border: 0 !important; }
  a { color: inherit; text-decoration: none; }
  h3 { color: var(--muted); }
  .stat b { color: inherit; }
}

/* icons & visual cues */
.i { width: 1.15em; height: 1.15em; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vertical-align: -.2em; }
.btn .i { width: 18px; height: 18px; }
.btn.icon-btn { width: 40px; min-width: 40px; padding: 0; border-color: transparent; background: transparent; color: var(--muted); }
.btn.icon-btn:hover:not(:disabled) { color: var(--ink); }
.btn.sm.icon-btn { width: 32px; min-width: 32px; }
h1 > .i, h2 > .i { margin-right: 8px; color: var(--accent); }
h1 > .i { width: .9em; height: .9em; }
.badge .i { width: 13px; height: 13px; margin-left: -2px; stroke-width: 2.2; }
.tick { display: inline-flex; color: var(--ok); }
.tick .i { width: 18px; height: 18px; }
.chips-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 6px 0 0; }
.chip-sm { display: inline-flex; align-items: center; gap: 4px; padding: 1px 9px; border: 1px solid var(--line); border-radius: var(--r-full); color: var(--muted); font-size: var(--fs-xs); font-weight: 500; flex-shrink: 0; max-width: 100%; }
.chip-sm .i { width: 13px; height: 13px; }
.empty { display: flex; align-items: center; gap: 8px; margin: 0; color: var(--muted); }
.empty .i { color: var(--accent); }
.banner > .i { width: 18px; height: 18px; color: var(--warn); }
.banner .btn.sm { margin-left: auto; }
h3.year { display: flex; align-items: center; gap: 8px; margin: 18px 0 4px; }
h3.year:first-of-type { margin-top: 4px; }
.count { padding: 0 8px; border-radius: var(--r-full); background: var(--line); color: var(--muted); font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0; }
.sign-state { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.need-label { color: var(--muted); font-size: var(--fs-xs); font-weight: 600; }
.need { display: inline-flex; align-items: center; gap: 4px; min-height: 26px; padding: 2px 6px 2px 10px; border: 1px solid color-mix(in srgb, var(--chip-amber-fg) 35%, transparent); border-radius: var(--r-full); background: var(--chip-amber); color: var(--chip-amber-fg); font: inherit; font-size: var(--fs-xs); font-weight: 650; cursor: pointer; transition: background-color var(--motion-state); }
.need:hover { background: color-mix(in srgb, var(--chip-amber-fg) 10%, var(--chip-amber)); }
.need .i { width: 13px; height: 13px; stroke-width: 2.2; }
.need .i-chevron { width: 14px; height: 14px; opacity: .8; }
.sign-state.ready .badge { min-height: 26px; }
.flash { animation: flash 1.2s var(--motion-state) 1; }
@keyframes flash { 0%, 100% { box-shadow: var(--shadow); } 30% { box-shadow: 0 0 0 3px var(--chip-amber-2); } }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.save-state { color: var(--muted); font-size: var(--fs-xs); }
.mood-meter { display: flex; align-items: center; gap: 8px; }
.mood-meter .i { color: var(--accent); }
.mood-meter .track { width: 160px; height: 8px; overflow: hidden; border-radius: var(--r-full); background: var(--line); }
.mood-meter .fill { display: block; height: 100%; border-radius: inherit; background: var(--accent); }
.fill.m0 { width: 0%; }
.fill.m1 { width: 10%; }
.fill.m2 { width: 20%; }
.fill.m3 { width: 30%; }
.fill.m4 { width: 40%; }
.fill.m5 { width: 50%; }
.fill.m6 { width: 60%; }
.fill.m7 { width: 70%; }
.fill.m8 { width: 80%; }
.fill.m9 { width: 90%; }
.fill.m10 { width: 100%; }
.sec-ic { display: grid; flex: none; place-items: center; width: 38px; height: 38px; border-radius: var(--r-full); background: var(--accent-soft); color: var(--accent); }
.sec-ic .i { width: 19px; height: 19px; }
.sec-link > .i { color: var(--accent); }
.with-ic { display: inline-flex; align-items: center; gap: 6px; }
.welcome > .i { width: 40px; height: 40px; margin-bottom: 8px; color: var(--accent); }
.brand-lg p .i { width: 14px; height: 14px; margin-right: 4px; }

/* touch screens: 44px targets (WCAG 2.5.5). Chips keep a lighter look and get an invisible hit area instead. Kept last so it wins over the base sizes. */
@media (pointer: coarse) {
  .btn, .btn.sm { min-height: 44px; }
  .btn.icon-btn, .btn.sm.icon-btn { width: 44px; min-width: 44px; }
  .side-toggle, .disclose > summary, .check, .brand { min-height: 44px; }
  .checks { gap: 0 20px; }
  .kp-groups, .kp-items { gap: 8px; }
  .seg-radio span, .chip span, .kp-chip, .kp-opt, .kp-toggle { min-height: 36px; }
  .need { min-height: 32px; }
  .seg-radio span, .chip span, .kp-chip, .kp-opt, .kp-toggle, .need, .crumb a { position: relative; }
  .seg-radio span::after, .chip span::after, .kp-chip::after, .kp-opt::after, .kp-toggle::after, .need::after, .crumb a::after { content: ""; position: absolute; inset: -4px 0; }
  /* ::after insets are measured from the padding box, so bordered chips need one extra px each side to reach 44 */
  .seg-radio span::after, .chip span::after, .kp-chip::after, .kp-opt::after { inset: -5px -1px; }
  .need::after { inset: -7px -3px; }
  .crumb a::after { inset: -11px -8px; }
  .na-btn { top: 10px; min-height: 40px; }
  .na-btn::after { content: ""; position: absolute; inset: -3px -1px; }
  .kp-q, .disc-link a { min-height: 44px; }
  .link { display: inline-flex; align-items: center; min-height: 44px; }
  .brand, .link { min-width: 44px; justify-content: center; } /* the logo alone and a short word like Undo are narrower than 44px */
}
@media (pointer: coarse) and (max-width: 820px) { .top-actions .btn.primary { width: 44px; min-width: 44px; } }

/* A banner with two actions (restore: put back / discard) keeps them together and wraps them as one group */
.banner-acts { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; margin-left: auto; }
.banner-acts .btn.sm { margin-left: 0; }