/* RapidTablet v3 screens, on top of tokens.css (the designer's system: design/tokens.css, copied).
   Paper theme by default, dark with <html data-theme="dark">. Firefox paints in software on the tablet:
   no CSS animations here (the character's own 2 fps pen tick / blink lives inside its SVG), no backdrop-filter. */

html, body { min-height: 100%; }
body { overscroll-behavior: none; scrollbar-width: thin; scrollbar-color: var(--hairline-strong) transparent; }
html { scrollbar-width: none; }
[hidden] { display: none !important; }
a { color: inherit; text-decoration: none; }
button, a, .btn, label { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
input, textarea, select { font: inherit; color: inherit; letter-spacing: inherit; }
.muted { color: var(--text-3); }
.num { font-variant-numeric: tabular-nums; }
.btn[disabled] { opacity: .45; pointer-events: none; }
.btn.busy { opacity: .7; }

/* --- top bar ------------------------------------------------------------------------------------------------- */
.topbar { position: sticky; top: 0; z-index: 40; }
.topbar .brand { min-height: 44px; }
.topbar .brand img.icon { width: 32px; height: 32px; }
.topbar .brand img.wordmark { height: 20px; }
button.status { border: 0; cursor: pointer; font: inherit; }
.status .ttl { color: var(--topbar-text-2); max-width: 260px; overflow: hidden; text-overflow: ellipsis; }
.status.needs .dot { background: var(--brand-orange-2); box-shadow: none; }
.saved-chip { display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 12px; border-radius: var(--r-pill);
  background: var(--topbar-control); color: var(--topbar-text-2); font-size: 13px; white-space: nowrap; }
.saved-chip .i { width: 15px; height: 15px; }
.topbar .mtitle { min-width: 0; font-size: 15px; color: var(--topbar-text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar .mtitle b { color: var(--topbar-text); font-weight: 500; }
.topbar .btn-primary { padding: 0 20px; }
.gear-menu { position: fixed; top: calc(var(--topbar-h) - 6px); right: 120px; z-index: 60; display: grid; min-width: 240px; padding: 6px;
  background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--r-lg); box-shadow: var(--shadow-pop); }
.gear-menu a { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 0 14px; border-radius: var(--r-md); font-size: 16px; color: var(--text); }
.gear-menu a .i { color: var(--text-2); }
.gear-menu a:active { background: var(--surface-hover); }

/* --- page scaffolding (from the mocks) ------------------------------------------------------------------------- */
main#view { min-height: calc(100vh - var(--topbar-h)); }
.page { padding: 28px var(--gutter) 40px; }
.head { display: flex; align-items: center; gap: 20px; padding-bottom: 24px; }
.head.ruled { border-bottom: 1px solid var(--hairline); }
.head .grow { flex: 1; min-width: 0; }
.head .grow h1 { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.head p.sub { font-size: 15px; line-height: 22px; color: var(--text-2); margin-top: 2px; }
.head .actions { display: flex; gap: 12px; align-items: center; }
.eyebrow { flex-wrap: wrap; display: flex; align-items: center; gap: 8px; font-size: 15px; line-height: 22px; color: var(--text-2); margin-bottom: 6px; }
.eyebrow .i { width: 16px; height: 16px; color: var(--text-3); }
.cols { display: grid; grid-template-columns: minmax(0, 1fr) 408px; gap: 48px; }
.cols.tight { gap: 40px; }
section + section { margin-top: 24px; }
.label { margin-bottom: 12px; min-height: 24px; }
.label .btn { margin: -12px -12px -12px 0; }
.empty { padding: 20px; color: var(--text-3); font-size: 15px; text-align: center; }
.card .empty { text-align: left; }
.assistant-note img.lg { width: 40px; height: 40px; }

/* --- Today --------------------------------------------------------------------------------------------------- */
.today { display: grid; grid-template-columns: minmax(0, 1fr) 408px; gap: 48px; padding: 32px var(--gutter) 40px; }
.greet { display: flex; align-items: center; gap: 20px; margin-bottom: 32px; }
.greet img { width: 88px; height: 88px; margin: -10px -6px -10px -14px; }
.greet .t-display { margin-bottom: 2px; }
.agenda .row { gap: 20px; }
.when { width: 96px; flex: none; white-space: nowrap; } /* fits "12:30 PM" on one line in Firefox too */
.when b { display: block; font-size: 17px; line-height: 24px; font-weight: 600; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.when span { display: block; font-size: 13px; line-height: 18px; color: var(--text-3); font-variant-numeric: tabular-nums; }
.when span.soon { color: var(--text); font-weight: 500; }
.agenda .title { font-size: 18px; line-height: 26px; font-weight: 600; }
.ready { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; color: var(--text-2); white-space: nowrap; }
.ready .i { width: 16px; height: 16px; stroke-width: 2; color: var(--text-3); }
.row .chev { width: 18px; height: 18px; }
a.row { color: inherit; }
.recent .row { min-height: 52px; padding: 10px 16px; }
.recent .title { font-size: 16px; font-weight: 500; }
.recent .date { width: 96px; flex: none; white-space: nowrap; font-size: 14px; color: var(--text-3); }
.recent .meta { font-size: 14px; }
.meet { padding: 24px; display: flex; flex-direction: column; gap: 16px; }
.meet h2 { font-size: 20px; line-height: 28px; font-weight: 600; letter-spacing: -0.014em; }
.meet p { font-size: 15px; line-height: 22px; color: var(--text-2); margin-top: 4px; }
.meet.going { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 16px; }
.meet.going .btn { flex: 1 1 100%; }
.meet.going img { width: 56px; height: 56px; flex: none; }
.meet.going .grow { flex: 1; min-width: 0; }
.todo .row { align-items: flex-start; gap: 14px; min-height: 0; padding: 14px 16px; }
.todo .title { font-size: 16px; line-height: 22px; white-space: normal; }
.todo .meta { font-size: 13px; line-height: 18px; color: var(--text-3); margin-top: 2px; white-space: normal; }
.todo .due { color: var(--text-2); }
.over { color: var(--accent-text) !important; }
.file .row { padding: 12px 12px 12px 16px; }
.file .title { font-size: 16px; }
.file .meta { font-size: 13px; color: var(--text-3); }
button.check { padding: 0; cursor: pointer; }
.checkhit { width: 44px; height: 44px; margin: -10px -10px -10px -10px; display: inline-flex; align-items: center; justify-content: center; border: 0; background: none; cursor: pointer; flex: none; padding: 0; }

/* --- Briefing ------------------------------------------------------------------------------------------------- */
.goal { font-size: 20px; line-height: 30px; letter-spacing: -0.012em; }
.bring li { display: flex; gap: 12px; align-items: flex-start; padding: 14px 12px 14px 16px; }
.bring .n { width: 20px; flex: none; font-size: 15px; line-height: 26px; color: var(--text-3); font-variant-numeric: tabular-nums; }
.bring .t { font-size: 18px; line-height: 26px; font-weight: 500; letter-spacing: -0.012em; }
.bring .grow { flex: 1; min-width: 0; }
.bring .source { margin-top: 4px; }
.bring li.addrow, .addrow { display: flex; align-items: center; padding: 0 8px 0 16px; align-items: center; gap: 10px; min-height: 52px; padding: 0 8px 0 16px; color: var(--text-3); font-size: 16px; border-top: 1px solid var(--hairline); }
.addrow .i { width: 18px; height: 18px; flex: none; }
.addrow input { flex: 1; min-width: 0; height: 48px; border: 0; background: transparent; outline: none; font-size: 16px; color: var(--text); }
.addrow input::placeholder { color: var(--text-3); }
.last p { font-size: 16px; line-height: 25px; color: var(--text-2); max-width: 680px; }
.people li { display: flex; align-items: center; gap: 14px; padding: 12px 16px; }
.people .name { font-size: 16px; line-height: 22px; font-weight: 500; }
.people .role { font-size: 14px; line-height: 20px; color: var(--text-2); }
.people .grow { flex: 1; min-width: 0; }
.facts li { padding: 12px 16px; }
.facts p { font-size: 15px; line-height: 22px; }
.facts .source { margin-top: 4px; }
.honest { margin-top: 12px; font-size: 13px; line-height: 18px; color: var(--text-3); }
.honest img { width: 24px; height: 24px; }
.edit-ta { width: 100%; padding: 10px 12px; border: 1px solid var(--hairline-strong); border-radius: var(--r-md); background: var(--surface); outline: none; resize: none; font-size: 18px; line-height: 26px; }
.edit-ta:focus, .input:focus { border-color: var(--accent); box-shadow: var(--focus-ring); }
.bring .rm { color: var(--text-3); }

/* --- Meeting (no page scroll) ----------------------------------------------------------------------------------- */
body.route-meeting { height: 100vh; overflow: hidden; display: flex; flex-direction: column; }
body.route-meeting.osk-open { height: auto; overflow: visible; }
body.route-meeting main#view { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.meeting { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.m-alert { margin: 16px var(--gutter) 0; }
.m-main { flex: 1; min-height: 0; display: grid; grid-template-columns: 520px 1fr; gap: 32px; padding: 24px var(--gutter); }
.m-bring { display: flex; flex-direction: column; min-height: 0; }
.m-bring ol { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow-y: auto; }
.m-right { display: flex; flex-direction: column; min-height: 0; }
.m-right .doc { flex: 1; }
.item { flex: 0 0 auto; display: flex; flex-direction: column; justify-content: flex-start; padding: 18px 20px 16px; min-height: 0; } /* same top padding on every card; spare room goes below */
.item + .item { border-top: 1px solid var(--hairline); }
.item .kind { display: flex; align-items: center; gap: 6px; font-size: 13px; line-height: 18px; color: var(--text-3); margin-bottom: 6px; }
.item .kind .i { width: 14px; height: 14px; stroke-width: 2; }
.item .kind.new { color: var(--text); font-weight: 500; }
.item .t { font-size: var(--fs-glance); line-height: var(--lh-glance); font-weight: 600; letter-spacing: -0.014em; }
.item .why { font-size: 16px; line-height: 23px; color: var(--text-2); margin-top: 6px; }
.item .acts { display: flex; gap: 8px; margin-top: 14px; }
.item .acts .btn { height: 44px; }
.item .acts .btn-secondary { padding: 0 18px 0 14px; }
.item.fresh { background: linear-gradient(90deg, rgba(198, 253, 100, .10), transparent 60%); }
.m-empty { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 12px; padding: 32px; color: var(--text-2); font-size: 16px; line-height: 24px; }
.m-empty img { width: 72px; height: 72px; }
.m-empty b { color: var(--text); font-size: 18px; font-weight: 600; }
/* Remi's line (answer to a question, a coaching tip, or what it's doing), the "Heard just now" strip */
#askCard { flex: none; margin-bottom: 20px; }
.m-remi { display: flex; align-items: flex-start; gap: 14px; padding: 14px 16px 14px 12px; }
.m-remi > img { width: 56px; height: 56px; flex: none; margin-top: -2px; }
.m-remi .q { font-size: 13px; line-height: 18px; color: var(--text-3); }
.m-remi .a { font-size: 19px; line-height: 27px; color: var(--text); margin-top: 2px; letter-spacing: -0.008em; }
.m-remi.tip .a { font-weight: 500; }
.m-remi.quiet .a { font-size: 16px; line-height: 23px; color: var(--text-2); }
.m-remi.pending .a { color: var(--text-2); }
.m-remi .btn { flex: none; margin-top: 2px; }
.m-heard { flex: none; margin-top: 16px; padding: 12px 20px 14px 28px; }
.m-heard .hd { display: flex; align-items: center; gap: 10px; font-size: 13px; line-height: 18px; color: var(--text-2); }
.m-heard .hd b { font-weight: 500; }
.m-heard ul { margin-top: 6px; }
.m-heard li { font-size: 15px; line-height: 22px; color: var(--text-3); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.m-heard li.new { color: var(--text); }
.m-heard li.empty { color: var(--text-2); }
.m-heard .who { font-weight: 600; color: var(--text-2); margin-right: 6px; }
.lvl { display: inline-flex; align-items: flex-end; gap: 2px; height: 16px; }
.lvl i { width: 3px; border-radius: 1px; background: var(--hairline-strong); }
.lvl i:nth-child(1) { height: 5px; } .lvl i:nth-child(2) { height: 8px; } .lvl i:nth-child(3) { height: 11px; }
.lvl i:nth-child(4) { height: 14px; } .lvl i:nth-child(5) { height: 16px; }
.lvl i.on { background: var(--live-on-paper); }
/* "To capture": what this meeting should come away with, filled in as it's heard */
.cap { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.cap li { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; min-height: 32px; padding: 4px 12px 4px 8px; border-radius: var(--r-pill);
  font-size: 14px; line-height: 20px; color: var(--text-3); box-shadow: inset 0 0 0 1px var(--hairline-strong); }
.cap li .i { width: 15px; height: 15px; flex: none; }
.cap li.got { background: var(--surface-sunken); box-shadow: none; color: var(--text); }
.cap li.got .i { color: var(--live-on-paper); stroke-width: 2.5; }
.cap li .k { font-weight: 500; white-space: nowrap; }
.cap li .v { color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cap li .dot { width: 7px; height: 7px; margin: 0 4px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--text-3); flex: none; }
.m-bar .btn.ask { padding: 0 18px 0 8px; gap: 6px; }
.m-bar .btn.ask img { width: 36px; height: 36px; }
.m-bar .btn.ask[aria-pressed="true"] { background: var(--ink-fill); color: var(--on-ink-fill); border-color: var(--ink-fill); }
.m-bar form.field.asking { box-shadow: 0 0 0 2px var(--text); }
.doc { position: relative; overflow-y: auto; padding: 24px 28px; min-height: 0; }
.doc h1 { font-size: 22px; line-height: 28px; font-weight: 600; letter-spacing: -0.016em; }
.doc .sub { font-size: 14px; line-height: 20px; color: var(--text-3); margin-top: 4px; }
.doc .what { font-size: 16px; line-height: 24px; margin-top: 12px; }
.doc section { margin-top: 16px; }
.doc .label { font-size: 14px; line-height: 20px; margin-bottom: 2px; color: var(--text-2); min-height: 0; }
.doc .label .count { color: var(--text-3); }
.ai li { display: flex; align-items: center; gap: 12px; min-height: 38px; }
.ai .check { width: 22px; height: 22px; border-radius: 6px; }
.ai .txt { flex: 1; font-size: 16px; line-height: 22px; }
.ai .who { font-size: 14px; color: var(--text-3); white-space: nowrap; }
.dec li, .q li { display: flex; gap: 12px; font-size: 16px; line-height: 24px; padding: 6px 0; }
.dec .mark { width: 22px; flex: none; display: flex; justify-content: center; padding-top: 8px; }
.dec .mark span { width: 7px; height: 7px; border-radius: 2px; background: var(--text); transform: rotate(45deg); }
.q .mark { width: 22px; flex: none; text-align: center; color: var(--text-3); }
.notes li { display: flex; gap: 12px; align-items: flex-start; padding: 6px 0; }
.notes .ts { width: 44px; flex: none; font-size: 13px; line-height: 23px; color: var(--text-3); font-variant-numeric: tabular-nums; }
.notes .body { flex: 1; min-width: 0; font-size: 16px; line-height: 23px; }
.notes .body > .i { width: 16px; height: 16px; vertical-align: -3px; margin-right: 6px; color: var(--text-3); }
.notes .flagged { background: var(--accent-soft); margin: 2px -12px; padding: 6px 12px; border-radius: var(--r-sm); }
.notes .flagged .body > .i { color: var(--accent); }
.notes .flagged .tag { font-size: 13px; color: var(--accent-text); font-weight: 500; }
.notes li.has-photo { align-items: center; }
.notes .photo { display: flex; align-items: center; gap: 12px; }
.notes .thumb { width: 60px; height: 40px; border-radius: 6px; flex: none; background: var(--surface-sunken); box-shadow: inset 0 0 0 1px var(--hairline); overflow: hidden; object-fit: cover; }
.heard { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px 0 4px; margin-top: 6px; border-radius: var(--r-pill);
  background: var(--surface-sunken); font-size: 13px; line-height: 1; color: var(--text-2); font-weight: 500; }
.heard img { width: 20px; height: 20px; }
.heard .i { width: 13px; height: 13px; color: var(--text-2); stroke-width: 2.25; }
.m-bar { height: 80px; flex: none; display: flex; align-items: center; gap: 12px; padding: 0 var(--gutter); background: var(--surface); border-top: 1px solid var(--hairline); }
.m-bar form.field { width: 440px; height: 52px; font-size: 17px; color: var(--text-2); padding: 0 6px 0 16px; }
.m-bar form.field input { flex: 1; min-width: 0; height: 48px; border: 0; background: transparent; outline: none; font-size: 17px; color: var(--text); }
.m-bar form.field input::placeholder { color: var(--text-3); }
.m-bar form.field .btn { height: 40px; padding: 0 14px; font-size: 15px; }
.m-bar .btn { height: 52px; font-size: 16px; padding: 0 22px 0 18px; }
.m-bar .flag .i { color: var(--accent); }
.m-bar .hint { margin-left: auto; display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--text-3); white-space: nowrap; }
.m-bar .hint .i { width: 16px; height: 16px; }
.notice { display: flex; align-items: center; gap: 12px; padding: 10px 16px 10px 10px; border-radius: var(--r-lg); background: var(--surface);
  border: 1px solid var(--hairline-strong); font-size: 15px; line-height: 22px; color: var(--text-2); }
.notice img { width: 32px; height: 32px; flex: none; }
.notice b { color: var(--text); font-weight: 600; }
.notice.warn { border-color: var(--accent-soft-line); background: var(--accent-soft); }
.notice .grow { flex: 1; }

/* --- Minutes -------------------------------------------------------------------------------------------------- */
.state { display: flex; align-items: center; gap: 10px; margin-right: 12px; font-size: 15px; line-height: 20px; color: var(--text-2); }
.state img { width: 44px; height: 44px; margin: -6px -4px -6px 0; }
.state b { display: block; color: var(--text); font-weight: 500; }
.minutes .doc { overflow: visible; padding: 24px 28px 20px; }
.minutes .doc section + section { margin-top: 20px; }
.minutes .doc .label { margin-bottom: 6px; }
.minutes .summary { font-size: 16px; line-height: 25px; }
.minutes .ai { border-top: 1px solid var(--hairline); }
.minutes .ai li { display: grid; grid-template-columns: 24px 1fr 132px 112px; gap: 12px; align-items: center; min-height: 44px; border-bottom: 1px solid var(--hairline); }
.minutes .ai .due { font-size: 14px; color: var(--text-2); white-space: nowrap; text-align: right; }
.minutes .ai .who { color: var(--text-2); overflow: hidden; text-overflow: ellipsis; }
.minutes .ai li.done .txt { color: var(--text-3); text-decoration: line-through; text-decoration-color: var(--hairline-strong); }
.minutes .hint { font-size: 13px; color: var(--text-3); margin-top: 8px; }
.minutes aside section + section { margin-top: 20px; }
.minutes aside .label { margin-bottom: 10px; }
.flagc { padding: 14px 16px; display: flex; gap: 12px; }
.flagc + .flagc { border-top: 1px solid var(--hairline); }
.flagc .i { color: var(--accent); margin-top: 2px; }
.flagc q { display: block; font-size: 15px; line-height: 22px; quotes: "\201C" "\201D"; }
.flagc .src { font-size: 13px; color: var(--text-3); margin-top: 4px; }
.photos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.photos figure { margin: 0; }
.photos button { display: block; width: 100%; height: 72px; padding: 0; border: 0; border-radius: var(--r-sm); overflow: hidden; box-shadow: inset 0 0 0 1px var(--hairline); background: var(--surface-sunken); cursor: pointer; }
.photos img { width: 100%; height: 100%; object-fit: cover; display: block; }
.photos figcaption { font-size: 13px; line-height: 18px; color: var(--text-3); margin-top: 6px; }
.crm li { padding: 12px 12px 12px 16px; display: flex; align-items: center; gap: 12px; }
.crm .grow { flex: 1; min-width: 0; }
.crm .f { font-size: 13px; line-height: 18px; color: var(--text-3); }
.crm .v { font-size: 15px; line-height: 22px; }
.crm .btn { height: 44px; padding: 0 14px; font-size: 15px; }
.crm .ok { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; color: var(--text-2); padding-right: 4px; white-space: nowrap; }
.crm .ok .i { width: 16px; height: 16px; stroke-width: 2.25; }
.mnotes li { padding: 10px 16px; font-size: 15px; line-height: 22px; }
.mnotes li + li { border-top: 1px solid var(--hairline); }
.mnotes .ts { color: var(--text-3); font-size: 13px; margin-right: 8px; }
.doc-edit .edit-ta { font-size: 16px; line-height: 24px; }
.erow { display: grid; grid-template-columns: minmax(0, 1fr) 44px; gap: 8px; align-items: start; margin-bottom: 8px; }
.erow.step { grid-template-columns: minmax(0, 1fr) 120px 110px 44px; }
.input { height: 48px; padding: 0 12px; border: 1px solid var(--hairline-strong); border-radius: var(--r-md); background: var(--surface); outline: none; font-size: 16px; width: 100%; }

/* --- To-dos --------------------------------------------------------------------------------------------------- */
.add-todo { display: flex; gap: 12px; margin-bottom: 16px; }
.add-todo .field { flex: 1; padding-right: 6px; }
.add-todo input { flex: 1; min-width: 0; height: 46px; border: 0; background: transparent; outline: none; font-size: 16px; color: var(--text); }
.add-todo input::placeholder { color: var(--text-3); }
.group + .group { margin-top: 16px; }
.group .label { margin-bottom: 8px; font-size: 14px; color: var(--text-2); }
.group .label.over { color: var(--accent-text); }
.td li { display: flex; align-items: center; gap: 16px; padding: 10px 8px 10px 16px; min-height: 62px; }
.td .grow { flex: 1; min-width: 0; }
.td .txt { font-size: 16px; line-height: 22px; font-weight: 500; letter-spacing: -0.008em; }
.td .from { display: flex; align-items: center; gap: 6px; font-size: 13px; line-height: 18px; color: var(--text-3); margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.td .from .i { width: 13px; height: 13px; stroke-width: 2; }
.td .due { font-size: 14px; color: var(--text-2); white-space: nowrap; font-variant-numeric: tabular-nums; }
.td li.done .txt { color: var(--text-3); text-decoration: line-through; text-decoration-color: var(--hairline-strong); font-weight: 400; }
.td .del { color: var(--text-3); }
.wait li { display: flex; align-items: center; gap: 12px; padding: 12px 12px 12px 16px; min-height: 64px; }
.wait .grow { flex: 1; min-width: 0; }
.wait .txt { font-size: 15px; line-height: 21px; font-weight: 500; }
.wait .who { font-size: 13px; line-height: 18px; color: var(--text-3); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wait .person { width: 32px; height: 32px; font-size: 12px; }
.wait .btn { height: 44px; padding: 0 12px; font-size: 14px; }
.sub-note { font-size: 13px; line-height: 18px; color: var(--text-3); margin: -4px 0 12px; }
.seg button { height: 44px; padding: 0 16px; display: inline-flex; align-items: center; gap: 6px; border: 0; border-radius: 8px; background: transparent;
  font-size: 15px; font-weight: 500; color: var(--text-2); cursor: pointer; min-width: 44px; }
.seg button[aria-pressed="true"] { background: var(--surface); color: var(--text); box-shadow: var(--shadow-1); }
.seg button .count { color: var(--text-3); font-variant-numeric: tabular-nums; }
.seg.tall button { height: 44px; }

/* --- New meeting, Mic check, Settings (same system, plain forms) ---------------------------------------------- */
.form { max-width: 1040px; }
.form .card { padding: 24px; }
.fld { margin-bottom: 16px; }
.fld > .lbl { display: block; font-size: 14px; font-weight: 600; color: var(--text-2); margin-bottom: 6px; }
.fld > .lbl em { font-style: normal; font-weight: 400; color: var(--text-3); }
.two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
.att-row { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1.1fr) 150px 44px; gap: 10px; align-items: center; margin-bottom: 10px; }
.att-row.short { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) 140px 44px; }
.stepper { display: inline-flex; align-items: center; gap: 8px; }
.stepper button { width: 48px; height: 48px; border-radius: var(--r-md); border: 1px solid var(--hairline-strong); background: var(--surface); font-size: 22px; cursor: pointer; }
.stepper output { min-width: 110px; text-align: center; font-size: 18px; font-weight: 600; font-variant-numeric: tabular-nums; }
.setrow { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 0; border-top: 1px solid var(--hairline); }
.setrow:first-of-type { border-top: 0; }
.setrow b { display: block; font-weight: 500; }
.setrow .t-caption { display: block; }
.setcol { padding: 14px 0; border-top: 1px solid var(--hairline); }
.setcol b { display: block; font-weight: 500; margin-bottom: 8px; }
.ferr { margin-top: 6px; color: var(--accent-text); font-size: 14px; }
.input.bad { border-color: var(--accent); }
.pick-models { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.pick-models .chip { height: 44px; border: 0; cursor: pointer; }
.kv { display: grid; grid-template-columns: auto 1fr; gap: 6px 18px; font-size: 15px; }
.kv dt { color: var(--text-3); }
.kv dd { margin: 0; overflow-wrap: anywhere; }
.err { margin: 0 0 14px; padding: 10px 14px; border-radius: var(--r-md); background: var(--accent-soft); color: var(--accent-text); border: 1px solid var(--accent-soft-line); font-size: 15px; }
.err a { color: var(--accent-text); font-weight: 600; text-decoration: underline; }
.verdict { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: var(--r-lg); background: var(--surface-sunken); }
.verdict .v { font-size: 22px; font-weight: 600; }
.scale { position: relative; height: 28px; border-radius: 8px; background: var(--surface-sunken); margin-top: 6px; box-shadow: inset 0 0 0 1px var(--hairline); }
.scale .rms { position: absolute; top: 6px; bottom: 6px; left: 0; border-radius: 4px; background: var(--live-on-paper); }
.scale .peak { position: absolute; top: -3px; bottom: -3px; width: 3px; border-radius: 2px; background: var(--text); }
.count-ring { font-size: 64px; font-weight: 600; text-align: center; line-height: 1; font-variant-numeric: tabular-nums; }
audio { width: 100%; margin-top: 10px; }

/* --- sheets, drawers, overlays ---------------------------------------------------------------------------------- */
.modal { position: fixed; inset: 0; z-index: 70; display: grid; place-items: center; padding: 24px; background: rgba(6, 9, 22, .42); }
.modal > .sheet { width: min(560px, 100%); padding: 28px; }
.modal h2 { font-size: 22px; line-height: 30px; font-weight: 600; letter-spacing: -0.014em; margin-bottom: 6px; }
.modal p { color: var(--text-2); font-size: 16px; line-height: 24px; }
.modal .acts { display: flex; gap: 12px; margin-top: 24px; justify-content: flex-end; }
.modal .acts .btn { min-width: 120px; }
.consent-sheet .sheet { display: grid; grid-template-columns: 64px 1fr; gap: 16px 20px; }
.consent-sheet img { width: 64px; height: 64px; }
.consent-sheet .acts, .consent-sheet .err { grid-column: 1 / -1; }
.file-sheet .sheet { width: min(760px, 100%); max-height: calc(100vh - 48px); display: flex; flex-direction: column; gap: 16px; }
.file-sheet .top { display: flex; align-items: center; gap: 12px; }
.file-sheet .top h2 { flex: 1; margin: 0; }
.file-body { overflow-y: auto; min-height: 240px; }
.pick-list { margin: 6px 0 16px; }
.pick-list button { display: flex; width: 100%; align-items: center; gap: 12px; min-height: 60px; padding: 8px 16px; border: 0; background: none; text-align: left; cursor: pointer; }
.pick-list button + button { border-top: 1px solid var(--hairline); }
.pick-list .grow { flex: 1; min-width: 0; }
.pick-list b { display: block; font-weight: 500; }
.pick-list small { display: block; color: var(--text-3); font-size: 13px; }
.file-new { display: grid; gap: 10px; }
.drawer { position: fixed; top: var(--topbar-h); right: 0; bottom: 0; z-index: 55; width: min(720px, 100vw); display: flex; flex-direction: column; gap: 14px;
  padding: 20px 24px; background: var(--surface); border-left: 1px solid var(--hairline); box-shadow: var(--shadow-pop); }
.drawer .top { display: flex; align-items: center; gap: 12px; }
.drawer .top h2 { flex: 1; font-size: 20px; font-weight: 600; }
.drawer .body { flex: 1; min-height: 0; overflow-y: auto; }
.tline { padding: 8px 0; border-top: 1px solid var(--hairline); }
.tline .who { font-size: 13px; color: var(--text-3); }
.tline .who i { font-style: normal; margin-left: 8px; font-variant-numeric: tabular-nums; }
.tline p { font-size: 16px; line-height: 23px; }
.logrow { padding: 10px 0; border-top: 1px solid var(--hairline); font-size: 15px; }
.logrow .k { font-size: 13px; color: var(--text-3); }
.meter { position: relative; height: 16px; border-radius: 6px; overflow: hidden; background: var(--surface-sunken); }
.meter .fill { position: absolute; inset: 0 auto 0 0; background: var(--live-on-paper); }
.overlay.camera { position: fixed; inset: var(--topbar-h) 0 0 0; z-index: 50; background: #03050D; display: grid; grid-template-columns: minmax(0, 1fr) 320px; }
.cam-stage { position: relative; display: grid; place-items: center; padding: 20px; min-width: 0; }
.cam-stage img { width: 100%; height: 100%; object-fit: contain; border-radius: 10px; background: #000; display: block; }
.cam-msg { position: absolute; inset: 20px; display: grid; place-content: center; text-align: center; gap: 10px; padding: 30px; border-radius: 16px; background: #0B1024; color: #ECEEF5; }
.cam-msg b { font-size: 22px; font-weight: 600; }
.cam-msg span { color: #A7AFC8; font-size: 16px; max-width: 30em; }
.cam-msg .btn { justify-self: center; margin-top: 10px; }
.cam-flash { position: absolute; inset: 20px; border-radius: 10px; background: #fff; opacity: 0; pointer-events: none; }
.cam-flash.go { animation: flash .45s steps(2, jump-none) forwards; }
@keyframes flash { from { opacity: .7; } to { opacity: 0; } }
.cam-side { display: flex; flex-direction: column; gap: 12px; padding: 20px 20px 20px 0; color: #ECEEF5; }
.cam-side h2 { font-size: 20px; font-weight: 600; }
.kinds { display: grid; gap: 8px; }
.kinds button { display: flex; align-items: center; gap: 12px; height: 52px; padding: 0 16px; border-radius: var(--r-md); border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.06); color: #ECEEF5; font-size: 16px; text-align: left; cursor: pointer; }
.kinds button[aria-pressed="true"] { background: #ECEEF5; color: #0E1325; }
.shutter { align-self: center; width: 96px; height: 96px; border-radius: 50%; border: 5px solid #fff; background: var(--accent); cursor: pointer; margin: 6px 0; }
.shutter[disabled] { opacity: .35; }
.cam-state { min-height: 22px; text-align: center; font-size: 15px; color: #C6FD64; }
.shots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.shots img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 6px; display: block; }
.cam-side .sp { flex: 1; }
.viewer { position: fixed; inset: 0; z-index: 75; background: rgba(3, 5, 13, .96); display: grid; grid-template-rows: minmax(0, 1fr) auto; padding: 20px; gap: 14px; color: #ECEEF5; }
.viewer img { width: 100%; height: 100%; object-fit: contain; }
.viewer .bar { display: flex; align-items: center; gap: 14px; }
.viewer .bar div { flex: 1; color: #A7AFC8; }
.lockscreen { position: fixed; inset: 0; z-index: 100; background: var(--bg); display: grid; place-items: center; text-align: center; }
.lockscreen > div { display: grid; gap: 10px; justify-items: center; }
.lockscreen img { width: 96px; height: 96px; }
.lockscreen b { font-size: 28px; font-weight: 600; }
.toast { position: fixed; left: 50%; bottom: 100px; z-index: 80; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 10px;
  padding: 12px 18px 12px 12px; border-radius: var(--r-lg); background: var(--brand-navy); color: #F2F4F8; font-size: 15px; box-shadow: var(--shadow-pop); pointer-events: none; max-width: 80vw; }
.toast img { width: 28px; height: 28px; }
.toast.bad { background: #7A2A10; }
body.route-meeting .toast { bottom: 100px; }

/* --- on-screen keyboard (Money Putt's, restyled for paper) ------------------------------------------------------ */
.osk { position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; padding: 8px 10px 12px; background: #DFDDD7; border-top: 1px solid var(--hairline-strong); }
:root[data-theme="dark"] .osk { background: #070B18; }
.osk-head { display: flex; align-items: center; gap: 14px; padding: 2px 4px 8px; }
.osk-label { color: var(--text-3); font-size: 13px; font-weight: 600; white-space: nowrap; }
.osk-echo { flex: 1; min-width: 0; font-size: 19px; font-weight: 500; color: var(--text); overflow: hidden; white-space: nowrap; direction: rtl; text-align: left; }
.osk-echo span { direction: ltr; unicode-bidi: isolate; }
.osk-head button { min-height: 44px; padding: 0 18px; border-radius: var(--r-md); border: 1px solid var(--hairline-strong); background: var(--surface); font-weight: 600; font-size: 15px; color: var(--text); }
.osk-keys { display: grid; gap: 7px; max-width: 1100px; margin: 0 auto; }
.osk-row { display: flex; gap: 7px; }
.osk-row button { flex: 1 1 0; min-width: 0; height: 56px; border-radius: var(--r-md); border: 0; background: var(--surface); font-size: 22px; color: var(--text); box-shadow: 0 1px 0 rgba(6, 9, 22, .18); }
.osk-row button.down { background: var(--surface-selected); transform: translateY(1px); box-shadow: none; }
.osk-row button.fn { background: #C9C6BF; font-size: 20px; }
:root[data-theme="dark"] .osk-row button.fn { background: #1B2240; }
.osk-row button.fn.on { background: var(--brand-navy); color: #fff; }
.osk-row button.wide { flex-grow: 1.4; font-size: 17px; }
.osk-row button.space { flex-grow: 5; font-size: 15px; color: var(--text-3); }
.osk-row button.enter { flex-grow: 2; background: var(--accent); color: #fff; font-size: 17px; font-weight: 600; }
.osk[data-layout="pin"] .osk-keys { max-width: 460px; }
.setcol .t-caption, .setrow .t-caption { display: block; margin-top: 8px; }
.setrow .t-caption { margin-top: 2px; }

.ai .who, .minutes .ai .due, .td .due, .todo .meta .due, .when b, .when span { white-space: nowrap; font-variant-numeric: tabular-nums; }

.bring.obj .why .i { width: 14px; height: 14px; vertical-align: -2px; margin-right: 4px; color: var(--text-3); }
.photos .kept, .notes .kept { display: grid; place-items: center; height: 72px; border-radius: var(--r-sm); background: var(--surface-sunken); box-shadow: inset 0 0 0 1px var(--hairline);
  color: var(--text-3); font-size: 13px; text-align: center; padding: 6px; }
.notes .kept { width: 60px; height: 40px; font-size: 10px; line-height: 12px; padding: 2px; }

/* top-bar clock never wraps; with the meeting chip or 'saved' chip showing it is time only (tickClock) */
#clock { white-space: nowrap; flex: none; }

/* ================================================================================================================
   One front end, other screens (docs/PORTAL.md). Everything below only applies to phones (≤ 760 px wide), wide
   laptops (≥ 1680 px) or the portal host (<html data-host="portal">, set by api.js). The tablet at 1280×853 matches
   none of it, so its look is unchanged (tests/test_ui.py + the layout fingerprint in docs/PORTAL.md §7).
   ================================================================================================================ */

/* --- portal chrome: account button, safe areas, sign-in, account, photo kind --------------------------------------- */
:root[data-host="portal"] .topbar { height: calc(var(--topbar-h) + env(safe-area-inset-top)); padding-top: env(safe-area-inset-top);
  padding-left: max(var(--s-5), env(safe-area-inset-left)); padding-right: max(var(--s-5), env(safe-area-inset-right)); }
.acct-btn { gap: 8px; padding: 0 14px 0 5px; border-radius: var(--r-pill); }
.acct-btn .person { width: 32px; height: 32px; background: rgba(255, 255, 255, .12); color: var(--topbar-text); box-shadow: none; font-size: 12px; }
body.route-login #tbDefault > :not(.brand):not(.spacer) { display: none !important; }
.login { min-height: calc(100vh - var(--topbar-h)); min-height: calc(100dvh - var(--topbar-h) - env(safe-area-inset-top)); display: grid; place-items: center; padding: 40px var(--gutter); }
.login-card { width: min(440px, 100%); padding: 40px 40px 32px; background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--r-xl); box-shadow: var(--shadow-2); }
.login-remi { width: 80px; height: 80px; display: block; margin: -8px 0 12px -10px; }
.login .t-lead { margin: 6px 0 24px; }
.login .lbl { display: block; font-size: 14px; font-weight: 600; color: var(--text-2); margin-bottom: 6px; }
.login form { display: grid; gap: 0; }
.login form .input { height: 52px; font-size: 17px; margin-bottom: 14px; }
.login .input.code { letter-spacing: .3em; font-variant-numeric: tabular-nums; }
.login .err { margin-bottom: 16px; }
.login .or { display: flex; align-items: center; gap: 12px; margin: 20px 0; color: var(--text-3); font-size: 14px; }
.login .or::before, .login .or::after { content: ""; flex: 1; height: 1px; background: var(--hairline); }
.login .sso { display: grid; gap: 10px; }
.login .sso .btn { font-weight: 500; gap: 12px; }
.login .sso .i { width: 20px; height: 20px; }
.login .fine { display: flex; gap: 8px; align-items: flex-start; margin-top: 24px; font-size: 13px; line-height: 19px; color: var(--text-3); }
.login .fine .i { margin-top: 1px; }
.account .me { display: flex; align-items: center; gap: 14px; padding: 16px; }
.account .me .person { width: 44px; height: 44px; font-size: 15px; }
.account .name { font-size: 16px; line-height: 22px; font-weight: 500; }
.account .role { font-size: 14px; line-height: 20px; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; }
.account .grow { flex: 1; min-width: 0; }
.account .sess li { display: flex; align-items: center; gap: 12px; padding: 12px 12px 12px 16px; min-height: 64px; }
.account .tag { display: inline-flex; height: 22px; align-items: center; padding: 0 8px; margin-left: 6px; border-radius: var(--r-pill); background: var(--surface-sunken); font-size: 12px; font-weight: 500; color: var(--text-2); vertical-align: 1px; }
.account .up p + p { margin-top: 4px; }
.account .rec { font-size: 15px; line-height: 22px; color: var(--text-2); align-items: flex-start; }
.account .rec img { width: 32px; height: 32px; }
.up-ok { display: flex; align-items: center; gap: 8px; font-size: 15px; color: var(--text); }
.up-ok .i { color: var(--text-2); }
.photo-kind .sheet { display: grid; gap: 16px; }
.photo-kind .pk-prev { width: 100%; max-height: 38vh; object-fit: contain; border-radius: var(--r-md); background: var(--surface-sunken); }
.photo-kind .pk-kinds { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.photo-kind .acts { margin-top: 0; justify-content: center; }
.photo-kind .acts .btn { min-width: 0; }

/* --- wide laptop / desktop: keep line lengths sane -------------------------------------------------------------------- */
@media (min-width: 1680px) {
  .today, .page { max-width: 1600px; margin-left: auto; margin-right: auto; }
  .m-main { width: 100%; max-width: 1600px; margin: 0 auto; }
}

/* --- phone (portrait, 360–760 px): one column, thumb-reach bars, bottom sheets ------------------------------------- */
@media (max-width: 760px) {
  :root { --gutter: 16px; --topbar-h: 56px; --fs-display: 28px; --lh-display: 34px; --fs-title: 24px; --lh-title: 30px; }
  body { overscroll-behavior: auto; }
  .topbar { gap: 8px; padding: 0 12px; }
  :root[data-host="portal"] .topbar { padding-left: max(12px, env(safe-area-inset-left)); padding-right: max(12px, env(safe-area-inset-right)); }
  .topbar .brand img.wordmark, #clock, .status .ttl, .acct-btn .nm { display: none; }
  .topbar .brand img.icon { width: 30px; height: 30px; }
  .acct-btn { width: 44px; padding: 0; justify-content: center; }
  .saved-chip { font-size: 0; gap: 0; width: 36px; justify-content: center; padding: 0; }
  .saved-chip .i { width: 18px; height: 18px; }
  .status { height: 40px; padding: 0 12px 0 4px; gap: 8px; font-size: 14px; }
  .status img { width: 30px; height: 30px; }
  .gear-menu { right: 8px; left: 8px; min-width: 0; }
  .page { padding: 20px var(--gutter) 32px; }
  .cols, .cols.tight { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .head { flex-wrap: wrap; gap: 12px 14px; padding-bottom: 18px; align-items: flex-start; }
  .head .grow { flex-basis: calc(100% - 60px); }
  .head .grow h1 { -webkit-line-clamp: 3; }
  .head .actions { flex: 1 1 100%; flex-wrap: wrap; gap: 10px; }
  .head .actions > .btn { flex: 1 1 0; min-width: 0; }
  .eyebrow { font-size: 14px; line-height: 20px; }
  .cols[style*="padding-top"] { padding-top: 20px !important; }

  /* Today: one column, in the order you need on the way in */
  .today { display: flex; flex-direction: column; gap: 22px; padding: 20px var(--gutter) 40px; }
  .today > div, .today > aside { display: contents; }
  .today section + section { margin-top: 0; }
  .greet { order: 0; gap: 12px; margin: 0; }
  .greet img { width: 64px; height: 64px; margin: -6px -2px -6px -8px; }
  .today .meet, .today .meet.going { order: 1; }
  .today .agenda, .today section:has(.agenda), .today section:has(> .card > .empty) { order: 2; }
  .today .todo { order: 3; }
  .today .file { order: 4; }
  .today #pairNote { order: 5; }
  .today .recent { order: 6; }
  .meet { padding: 18px; gap: 12px; }
  .meet h2 { font-size: 18px; line-height: 26px; }
  .meet.going { flex-wrap: wrap; }
  .meet.going .btn { flex: 1 1 100%; }
  .meet.going img { width: 44px; height: 44px; }
  .agenda .row { gap: 12px; padding: 12px 12px 12px 14px; min-height: 68px; }
  .when { width: 78px; }
  .when b { font-size: 16px; }
  .agenda .title { font-size: 16px; line-height: 22px; white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
  .agenda .ready { display: none; }
  .recent .date { width: 76px; font-size: 13px; }
  .recent .row > .meta { display: none; }
  .file .row { gap: 10px; }

  /* Briefing */
  .goal { font-size: 18px; line-height: 27px; }
  .bring .t { font-size: 17px; line-height: 24px; }
  .bring li { flex-wrap: wrap; }
  .bring li .source { flex-basis: 100%; padding-left: 32px; }

  /* Meeting: the top bar keeps the clock, Pause and End; the notes scroll between it and the note bar */
  body.route-meeting { height: 100vh; height: 100dvh; }
  #tbMeeting .sep, #tbMeeting .mtitle, #detailsBtn, #mLbl { display: none; }
  #tbMeeting .spacer { min-width: 0; }
  #tbMeeting .status { padding-right: 14px; }
  #tbMeeting .btn-sm { padding: 0 14px; }
  .m-alert { margin: 10px var(--gutter) 0; }
  .notice { padding: 8px 12px 8px 8px; font-size: 14px; line-height: 20px; flex-wrap: wrap; }
  .notice img { width: 28px; height: 28px; }
  .notice .grow { flex: 1 1 calc(100% - 44px); }
  .notice .btn { margin-left: auto; }
  .m-main { display: block; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 14px var(--gutter) 20px; }
  .m-bring ol { display: block; overflow: visible; }
  .item { padding: 14px 16px 12px; }
  .item .why { font-size: 15px; line-height: 21px; }
  .item .acts { margin-top: 10px; }
  .m-empty { flex-direction: row; align-items: center; gap: 14px; padding: 16px; font-size: 14px; line-height: 20px; }
  .m-empty img { width: 48px; height: 48px; flex: none; }
  .m-empty b { display: block; font-size: 16px; }
  .m-empty { display: grid; grid-template-columns: 48px 1fr; }
  .m-empty img { grid-row: span 2; }
  .doc { overflow: visible; padding: 18px 18px 14px; }
  .m-main .doc { margin-top: 18px; }
  .doc h1 { font-size: 20px; line-height: 26px; }
  .notes .ts { width: 40px; }
  .m-bar { height: auto; gap: 8px; padding: 8px 12px calc(8px + env(safe-area-inset-bottom)); }
  .m-bar form.field { flex: 1; min-width: 0; width: auto; height: 48px; padding: 0 4px 0 12px; }
  .m-bar form.field > .i { display: none; }
  .m-bar form.field input { font-size: 16px; height: 44px; }
  .m-bar > .btn { width: 48px; height: 48px; padding: 0; font-size: 0; gap: 0; flex: none; }
  .m-bar > .btn .i { margin: 0; width: 22px; height: 22px; }
  .m-bar .hint { display: none; }
  .toast { left: 16px; right: 16px; width: fit-content; max-width: none; margin: 0 auto; transform: none; bottom: calc(24px + env(safe-area-inset-bottom)); }
  body.route-meeting .toast { bottom: calc(84px + env(safe-area-inset-bottom)); }

  /* Minutes */
  .state { flex: 1 1 100%; margin: 0 0 2px; }
  .minutes .doc { padding: 18px 18px 16px; }
  .minutes .ai li { grid-template-columns: 24px minmax(0, 1fr) auto; grid-template-areas: "c t t" ". w d"; gap: 2px 12px; padding: 10px 0; align-items: start; }
  .minutes .ai li > :first-child { grid-area: c; margin-top: -10px; }
  .minutes .ai li > .txt { grid-area: t; }
  .minutes .ai li > .who { grid-area: w; font-size: 13px; }
  .minutes .ai li > .due { grid-area: d; font-size: 13px; }
  .photos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .crm li { flex-wrap: wrap; }
  .crm li .grow { flex-basis: 100%; }
  .erow.step { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 44px; }
  .erow.step textarea { grid-column: 1 / -1; }

  /* To-dos, forms, settings */
  .add-todo { flex-wrap: wrap; }
  .td li { gap: 12px; padding: 10px 8px 10px 12px; }
  .two { grid-template-columns: minmax(0, 1fr); }
  .att-row, .att-row.short { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 44px; }
  .att-row .seg { grid-column: 1 / 3; }
  .form .card { padding: 16px; }

  /* sheets come up from the bottom, within thumb reach */
  .modal { place-items: end stretch; padding: 0; }
  .modal > .sheet { width: 100%; max-height: 92vh; overflow-y: auto; border-radius: var(--r-xl) var(--r-xl) 0 0; padding: 22px 18px calc(18px + env(safe-area-inset-bottom)); }
  .modal h2 { font-size: 20px; line-height: 27px; }
  .modal .acts { margin-top: 18px; }
  .modal .acts .btn { flex: 1; min-width: 0; }
  .consent-sheet .sheet { grid-template-columns: 48px 1fr; gap: 12px 14px; }
  .consent-sheet img { width: 48px; height: 48px; }
  .file-sheet .sheet { max-height: 92vh; }
  .drawer { top: 0; padding: 16px; z-index: 75; }
  .drawer .top { flex-wrap: wrap; }
  .drawer .seg { order: 3; flex-basis: 100%; overflow-x: auto; }

  /* touch: no hover colour left behind after a tap */
  .btn-secondary:hover { background: var(--surface); }
  .btn-quiet:hover { background: transparent; }

  /* sign-in: no card on a phone, just the page */
  .login { place-items: start stretch; padding: 24px 20px 32px; }
  body.route-login .topbar .brand img.wordmark { display: block; }
  .login-card { width: 100%; padding: 0; background: none; border: 0; box-shadow: none; }
}

@media (max-width: 760px) {
  #askCard { margin-bottom: 14px; }
  .m-remi { padding: 12px; gap: 10px; }
  .m-remi > img { width: 44px; height: 44px; }
  .m-remi .a { font-size: 17px; line-height: 24px; }
  .m-heard { margin-top: 12px; }
  .m-bar > .btn.ask { padding: 0; }
  .m-bar > .btn.ask img { width: 34px; height: 34px; }
}

/* --- Partner portal (docs/PARTNER-INTEGRATION.md): pairing notices, talking points, the portal's AI minutes --- */
.hub-notice { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.hub-notice > span { flex: 1; min-width: 0; }
.hub-notice > .btn { flex: none; }
.hub-notice.wide { grid-column: 1 / -1; margin-bottom: 0; }
.bring .why { font-size: 16px; line-height: 23px; color: var(--text-2); margin-top: 2px; }
.minutes .outcome { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.minutes .objs { list-style: none; margin: 0; padding: 0; }
.minutes .objs li { padding: 10px 0; border-top: 1px solid var(--hairline); }
.minutes .objs li:first-child { border-top: 0; padding-top: 2px; }
.minutes .objs .o { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 17px; line-height: 25px; font-weight: 500; }
.minutes .objs q { quotes: "“" "”"; }
.minutes .objs .how, .minutes .objs .fu { font-size: 15px; line-height: 22px; color: var(--text-2); margin-top: 4px; }
.minutes .objs .how .i { width: 15px; height: 15px; vertical-align: -2px; margin-right: 4px; color: var(--accent-text); }
.minutes .objs .how.open { color: var(--accent-text); }
.minutes .objs .fu .i { width: 14px; height: 14px; vertical-align: -2px; margin-right: 2px; color: var(--text-3); }
#hubCode.bad { border-color: var(--accent); }
.minutes .tag { display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border-radius: var(--r-pill); background: var(--surface-sunken);
  color: var(--text-2); font-size: var(--fs-caption); font-weight: var(--fw-medium); line-height: 1; white-space: nowrap; }
.hub-notice { background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--r-lg); padding: 14px 18px; color: var(--text-2); }
.hub-notice b { color: var(--text); }
.hub-notice:not(.wide) { flex-wrap: wrap; }
.hub-notice:not(.wide) > span { flex: 1 1 calc(100% - 60px); }
.hub-notice:not(.wide) > .btn { margin-left: auto; }
.consent-ask { display: flex; align-items: center; gap: 16px; margin-top: 20px; }
.consent-ask img { width: 40px; height: 40px; flex: none; }
.consent-ask b { font-size: 18px; line-height: 26px; font-weight: 500; }

/* --- Remi live v2 (docs/REMI-LIVE-V2.md): tips list, heartbeat in the chip, mode line, key points -------------- */
.status .beat { color: var(--topbar-text-2); font-size: 13px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.status .beat::before { content: '·'; margin: 0 6px 0 2px; }
.status .beat.warn { color: #F2C46D; }
.item.enter { transform: translateY(-12px); } /* two steps, no transition (≤ 2 fps); full contrast from the first frame */
#bringList li.older-hd { padding: 10px 20px 2px; font-size: 13px; line-height: 18px; color: var(--text-3); border-top: 1px solid var(--hairline); }
#bringList li.older { display: flex; align-items: center; gap: 10px; padding: 0 8px 0 20px; min-height: 48px; }
#bringList li.older .k { width: 96px; flex: none; font-size: 13px; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#bringList li.older .t { flex: 1; min-width: 0; font-size: 16px; line-height: 22px; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#bringList li.older .btn { flex: none; }
.m-mode { height: 44px; padding: 0 10px; margin: -4px 0 -6px -10px; font-size: 15px; font-weight: 500; color: var(--text-2); }
.m-kp { display: flex; flex-direction: column; gap: 10px; min-height: 0; overflow-y: auto; }
.m-kp .label { margin-top: 6px; }
.m-list { list-style: none; margin: 0; padding: 4px 20px; }
.m-list li { padding: 10px 0; font-size: 18px; line-height: 26px; }
.m-list li + li { border-top: 1px solid var(--hairline); }
.m-list li.empty { color: var(--text-3); font-size: 16px; }
.drawer .conf { display: grid; grid-template-columns: 150px 1fr 48px; gap: 10px; align-items: center; font-size: 14px; margin: 6px 0; }
.drawer .conf b { text-align: right; font-weight: 500; font-variant-numeric: tabular-nums; }
.m-topic { font-size: 14px; line-height: 20px; color: var(--text-3); margin: 0 0 6px; }
.m-alt { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--text-2); margin: -2px 0 6px; }
#bringList .item.tip { padding: 10px 12px 14px 20px; }
#bringList .item.tip .hd { display: flex; align-items: center; gap: 8px; }
#bringList .item.tip .hd .kind { flex: 1; min-width: 0; margin: 0; }
#bringList .item.tip .hd .acts { margin: 0; gap: 4px; }
#bringList .item.tip .why { margin-top: 2px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* RapidCRM coach rules: heartbeat dot, words on tap; radar card; fading by age; feedback; Before you speak */
#mChip { cursor: pointer; }
#mChip[data-beat="amber"] .dot { background: #F2B63D; box-shadow: 0 0 0 3px rgba(242, 182, 61, .2); }
#mChip[data-beat="red"] .dot { background: #F0624D; box-shadow: 0 0 0 3px rgba(240, 98, 77, .22); }
.beat-pop { position: fixed; top: calc(var(--topbar-h) - 4px); left: 24px; z-index: 30; padding: 8px 14px; border-radius: 10px;
  background: var(--topbar-bg); color: var(--topbar-text); font-size: 14px; line-height: 20px; white-space: nowrap; box-shadow: var(--shadow-pop); }
/* older cards fade by colour, never below readable contrast (--text-2 on the card ≥ 4.5:1); urgent ones never fade */
#bringList .item.aged .t { color: var(--text-2); }
#bringList .item.old .t, #bringList .item.old .why, #bringList .item.old .kind { color: var(--text-2); }
#bringList .item.old .t { font-weight: 500; }
#bringList .item.closing { padding-top: 12px; padding-bottom: 10px; }
#bringList .item.closing .kind { margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#bringList .fbrow { display: flex; align-items: center; gap: 2px; margin-top: 2px; }
#bringList .fbrow .t-caption { margin-right: 6px; }
#bringList .item.radar .ans { color: var(--text); font-weight: 500; -webkit-line-clamp: 3; }
#bringList .item.radar .before { margin-top: 8px; font-size: 14px; line-height: 20px; color: var(--text-2); }
#bringList .item.radar .before b { display: block; font-size: 13px; font-weight: 500; color: var(--text-3); margin-bottom: 2px; }
#bringList .item.radar .before .ex span { color: var(--text-3); }
#bringList .item.radar .acts { margin-top: 10px; }
.bys { padding: 12px 18px 14px; margin-bottom: 12px; }
.bys-hd { display: flex; align-items: center; min-height: 32px; }
.bys dl { display: grid; grid-template-columns: 168px 1fr; gap: 4px 12px; margin: 4px 0 0; font-size: 15px; line-height: 21px; }
.bys dt { color: var(--text-3); }
.bys dd { margin: 0; }
.bys dd.unknown { color: var(--text-3); font-style: italic; }
.bys-fold { margin: -6px 0 6px -10px; }
#bringList .item.tip.fresh { background: rgba(198, 253, 100, .12); } /* the highlight fills the card */
#bringList .item.signal .ans { color: var(--text); font-weight: 500; -webkit-line-clamp: 3; }
/* who the meeting was with (CRM import by email) */
.client-ask { margin-top: 20px; }
.client-ask .ca-hd { display: flex; align-items: center; gap: 14px; margin-bottom: 8px; }
.client-ask .ca-hd img { width: 40px; height: 40px; flex: none; }
.client-ask .ca-hd b { display: block; font-size: 18px; line-height: 26px; font-weight: 500; }
.client-fields { display: grid; grid-template-columns: 1fr 1fr 1.3fr; gap: 12px; }
.client-sheet .client-fields { grid-template-columns: 1fr; gap: 4px; }
.client-acts { padding: 12px 0 0; min-height: 0; gap: 8px; }
.client-line { display: flex; align-items: center; gap: 8px; margin-top: 14px; font-size: 15px; color: var(--text-2); }
.client-line .i { color: var(--text-3); }
.m-who { margin: -4px 0 2px -10px; font-size: 14px; color: var(--text-3); }
.client-sheet .sheet { width: min(620px, 100%); display: flex; flex-direction: column; gap: 10px; }
.client-sheet .top { display: flex; align-items: center; gap: 12px; }
.client-sheet .top h2 { flex: 1; margin: 0; }
.client-acts .spacer { flex: 1; }
/* phone width (portal): the client card stacks, nothing wider than the screen */
@media (max-width: 760px) {
  .client-fields { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .client-fields .input { width: 100%; min-width: 0; }
  .client-acts { flex-wrap: wrap; }
  .client-acts .btn { white-space: normal; max-width: 100%; }
  .client-ask .ca-hd { align-items: flex-start; }
  .client-line { flex-wrap: wrap; min-width: 0; }
  .client-line span { min-width: 0; overflow-wrap: anywhere; }
}