.localComparisonGrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.25rem}.localComparisonPanel{min-width:0;border:1px solid var(--line);border-radius:12px;padding:1.25rem}.localComparisonText{white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.65}.localComparisonPanel h3{margin-top:0}.localComparisonPanel .muted{color:var(--mute);font-size:.85em}.localComparisonSources a{color:var(--accent)}.localComparisonSources{grid-column:1/-1;overflow-wrap:anywhere}.localComparisonSources p{margin:.5rem 0}@media(max-width:700px){.localComparisonGrid{grid-template-columns:1fr}}

.learningForm{display:grid;gap:1rem;max-width:38rem}.learningForm label{display:grid;gap:.4rem}.learningForm :is(select,textarea){box-sizing:border-box;width:100%;min-width:0;font:inherit;padding:.65rem;border:1px solid var(--line);border-radius:.5rem;background:var(--bg);color:inherit}.learningForm button{justify-self:start}.detailPage .learningSave{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}.learningForm select{appearance:none;cursor:pointer}.referencePage{max-width:none}.referencePage>:is(p,section){max-width:70ch}.referencePage a{color:var(--accent)}.referencePage>section{padding:8px 0;border-bottom:1px solid var(--line)}.referenceNotice{font-size:13px;color:var(--muted)}

.entryChoices button{appearance:none;background:transparent;color:var(--ink);border:1px solid var(--line);border-radius:8px;padding:8px 12px;font:14px/1.4 var(--sans);cursor:pointer}
.entryChoices{display:flex;gap:8px;flex-wrap:wrap;margin:22px 0}.join .entryChoices button{flex:1;width:auto;margin:0;background:transparent;color:var(--ink);border:1px solid var(--line)}.join .entryChoices button[aria-pressed=true]{background:var(--accent);color:var(--on-accent)}
.join label{display:block;margin:14px 0 7px}
#syncState{border:0;background:transparent;color:var(--mute);font:11px/1.3 var(--sans);padding:4px;min-height:44px;max-width:115px;cursor:pointer}
#syncState[data-attention=true]{color:var(--warn);text-decoration:underline;text-underline-offset:3px}


.sheetChoices button.theme-choice{display:grid;grid-template-columns:64px 1fr;column-gap:12px;text-align:left;align-items:center}
.theme-choice .sub{grid-column:2}
.theme-preview{grid-column:1;grid-row:1 / span 2;display:flex;align-items:flex-end;gap:5px;padding:8px;height:48px;background:var(--bg);border:1px solid var(--rule-strong);border-radius:8px}
.theme-preview i{display:block;width:12px;height:24px;border-radius:3px;background:var(--ink)}
.theme-preview i:nth-child(2){height:32px;background:var(--key)}
.theme-preview i:nth-child(3){height:18px;background:var(--ink-dim)}

@font-face{font-family:"Source Sans 3";font-style:normal;font-weight:200 900;font-display:swap;src:url('/fonts/source-sans-3-latin-5.3.0.woff2') format('woff2')}
@font-face{font-family:"Source Serif 4";font-style:normal;font-weight:200 900;font-display:swap;src:url('/fonts/source-serif-4-latin-5.3.0.woff2') format('woff2')}
@font-face{font-family:"OpenDyslexic";font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/OpenDyslexic-Regular.woff2') format('woff2')}
@font-face{font-family:"OpenDyslexic";font-style:normal;font-weight:700;font-display:swap;src:url('/fonts/OpenDyslexic-Bold.woff2') format('woff2')}
@font-face{font-family:"OpenDyslexic";font-style:italic;font-weight:400;font-display:swap;src:url('/fonts/OpenDyslexic-Italic.woff2') format('woff2')}
@font-face{font-family:"OpenDyslexic";font-style:italic;font-weight:700;font-display:swap;src:url('/fonts/OpenDyslexic-BoldItalic.woff2') format('woff2')}


/* Paired palettes. Saved theme identifiers remain stable. */
:root{
  color-scheme:dark light;
  --mono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,monospace;
  --sans:"Source Sans 3",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --serif:"Source Serif 4",Georgia,serif;
  --pad:20px;--r:10px;--r-lg:14px;--tap:44px;

  /* The names the rest of this stylesheet uses, pointed at whatever the
     chosen theme set, so a palette swap never touches a rule. */
  --surface:var(--bg-raised);--surface-2:var(--bg-hover);
  --mute:var(--ink-dim);--faint:var(--ink-faint);
  --line:var(--rule);--hair:var(--rule);
  /* Four roles, named as HQPe Control names them, because the two apps
     should describe state in the same words even when they look nothing
     alike. A role says what a colour MEANS; --key says what the brand is.

       --signal    the brand, selection, the thing to press
       --observed  measured healthy
       --caution   a warning, approaching a limit
       --fault     something tried and failed

     ourAI used to alias --ok to --key and set --warn equal to it, so
     signal, healthy and caution were one colour with 0 degrees of hue
     between them in all eight halves. The budget bar proved it: its 80%
     stage was byte-identical to its normal fill in three themes of four.
     --observed and --caution are now real, and they carry HQPe's own values
     where the meaning is the same. */
  --signal:var(--key);
  --observed:var(--good);
  --caution:var(--warn);
  --fault:var(--danger);

  /* The names the stylesheets already use, pointed at the roles. */
  --accent:var(--signal);--accent-soft:var(--key-soft);--on-accent:var(--key-ink);
  --ok:var(--observed);--bad:var(--fault);
  /* Washes behind a badge or a bar. Derived rather than declared per theme,
     so they follow whichever palette is showing. */
  --ok-soft:color-mix(in srgb, var(--observed) 16%, transparent);
  --warn-soft:color-mix(in srgb, var(--caution) 16%, transparent);
  --bad-soft:color-mix(in srgb, var(--fault) 34%, transparent);

  /* Atmosphere, for the themes that have it (2026-09-23): art behind the
     page, glass for the sidebar and header over it, the shell left clear,
     and a reading face and size for answers. Plain themes leave these be. */
  --bg-art:none;--pane:var(--bg);--head:var(--surface);--shell:var(--surface);--blur:0px;
  --answer-font:inherit;--answer-size:inherit;

  /* The subject card and the section card (2026-09-23, from HQPe Control):
     one raised card per screen for what the screen is about, and quieter
     flat cards for the groups beside it. Themes may give either its own
     surface, edge and depth. */
  --subject-bg:var(--surface);--subject-line:var(--rule-strong);--subject-shadow:var(--shadow);--card-r:14px;
  --section-bg:color-mix(in srgb, var(--surface-2) 60%, transparent);
}

/* ── Amber · list.ikon.io ─────────────────────────────────────────────── */
:root[data-theme=amber]{
  --bg:#0B0E14;--bg-raised:#10141D;--bg-hover:#151A26;
  --rule:#1D2331;--rule-strong:#2A3145;
  --ink:#E7E3D8;--ink-dim:#9AA1B5;--ink-faint:#8088A2;
  --key:#E8A33D;--key-soft:rgba(232,163,61,.14);--key-ink:#1A1206;
  --danger:#FF8588;--focus:#E8A33D;
  --good:#8EBA74;--on-ok:#0D1508;--warn:#E9B45B;
  --shadow:0 1px 2px rgba(0,0,0,.5),0 10px 30px rgba(0,0,0,.35);
}
@media (prefers-color-scheme:light){
  :root[data-theme=amber]{
    --bg:#F6F7F9;--bg-raised:#FFFFFF;--bg-hover:#EDEFF3;
    --rule:#DFE3EA;--rule-strong:#C6CCD8;
    --ink:#14181F;--ink-dim:#4E5666;--ink-faint:#626A7B;
    --key:#8A5406;--key-ink:#FFFFFF;--key-soft:rgba(232,163,61,.20);
    --danger:#C0272C;--focus:#A96A0B;
    --good:#376327;--on-ok:#FFFFFF;--warn:#715C08;
    --shadow:0 1px 2px rgba(20,24,31,.06),0 10px 30px rgba(20,24,31,.05);
  }
}

/* ── Simple · clean white, blue and neutral greys ─────────────────────── */
:root[data-theme=simple]{
  --bg:#131314;--bg-raised:#1E1F20;--bg-hover:#282A2C;
  --rule:#333537;--rule-strong:#444746;
  --ink:#E3E3E3;--ink-dim:#C4C7C5;--ink-faint:#9AA0A6;
  --key:#8AB4F8;--key-soft:rgba(138,180,248,.16);--key-ink:#062E6F;
  --danger:#F28B82;--focus:#8AB4F8;
  --good:#81C995;--on-ok:#0A2E16;--warn:#FDD663;
  --shadow:0 1px 2px rgba(0,0,0,.5),0 8px 24px rgba(0,0,0,.35);
  --sans:Roboto,-apple-system,BlinkMacSystemFont,"Segoe UI","Source Sans 3",Arial,sans-serif;
  --serif:Roboto,-apple-system,BlinkMacSystemFont,"Segoe UI","Source Sans 3",Arial,sans-serif;
  --subject-shadow:none;--card-r:12px;
}
@media (prefers-color-scheme:light){
  :root[data-theme=simple]{
    --bg:#FFFFFF;--bg-raised:#F8F9FA;--bg-hover:#F1F3F4;
    --rule:#DADCE0;--rule-strong:#BDC1C6;
    --ink:#1F1F1F;--ink-dim:#444746;--ink-faint:#575B5F;
    --key:#0B57D0;--key-soft:rgba(11,87,208,.10);--key-ink:#FFFFFF;
    --danger:#B3261E;--focus:#0B57D0;
    --good:#146C2E;--on-ok:#FFFFFF;--warn:#705600;
    --shadow:0 1px 2px rgba(60,64,67,.12),0 4px 12px rgba(60,64,67,.08);
    --sans:Roboto,-apple-system,BlinkMacSystemFont,"Segoe UI","Source Sans 3",Arial,sans-serif;
    --serif:Roboto,-apple-system,BlinkMacSystemFont,"Segoe UI","Source Sans 3",Arial,sans-serif;
    --subject-shadow:none;--card-r:12px;
  }
}

/* ── Graphite · crisp greys and one electric blue ─────────────────────── */
/* The quiet professional one: the system face throughout, headings
   included, neutral greys with no tint, and a single blue at 216 degrees. */
:root[data-theme=graphite]{
  --bg:#0D0E10;--bg-raised:#15171A;--bg-hover:#1C1F23;
  --rule:#25282D;--rule-strong:#393D44;
  --ink:#ECEEF1;--ink-dim:#A6ABB4;--ink-faint:#9197A1;
  --key:#6AA6FF;--key-soft:rgba(106,166,255,.15);--key-ink:#031330;
  --danger:#FF8F8F;--focus:#6AA6FF;
  --good:#8FD48A;--on-ok:#0B230A;--warn:#F0C674;
  --shadow:0 1px 2px rgba(0,0,0,.6),0 10px 28px rgba(0,0,0,.4);
  --sans:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,"Source Sans 3",sans-serif;
  --serif:-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI",Roboto,"Source Sans 3",sans-serif;
  --subject-shadow:none;--card-r:10px;
}
@media (prefers-color-scheme:light){
  :root[data-theme=graphite]{
    --bg:#F7F7F8;--bg-raised:#FFFFFF;--bg-hover:#EFF0F2;
    --rule:#E2E4E8;--rule-strong:#C3C7CE;
    --ink:#101215;--ink-dim:#4A4F57;--ink-faint:#5C616A;
    --key:#1D5CCB;--key-soft:rgba(29,92,203,.09);--key-ink:#FFFFFF;
    --danger:#B3261E;--focus:#1D5CCB;
    --good:#2E6B2E;--on-ok:#FFFFFF;--warn:#6E5300;
    --shadow:0 1px 2px rgba(16,18,21,.06),0 8px 24px rgba(16,18,21,.06);
    --sans:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,"Source Sans 3",sans-serif;
    --serif:-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI",Roboto,"Source Sans 3",sans-serif;
    --subject-shadow:none;--card-r:10px;
  }
}

/* ── Contrast · black, white, and colour only for state ───────────────── */
/* Not a hue, a utility: for bright sunlight and for anyone who finds the
   dim greys hard work. The accent is achromatic on purpose, so the only
   coloured things on the page are the three state roles and they cannot be
   confused with the thing to press. Every pair here is past AAA. */
:root[data-theme=contrast]{
  --bg:#000000;--bg-raised:#0B0B0B;--bg-hover:#161616;
  --rule:#3D3D3D;--rule-strong:#6B6B6B;
  --ink:#FFFFFF;--ink-dim:#DCDCDC;--ink-faint:#C4C4C4;
  --key:#FFFFFF;--key-soft:rgba(255,255,255,.16);--key-ink:#000000;
  --danger:#FF8F8F;--focus:#FFFFFF;
  --good:#7FE08A;--on-ok:#00220A;--warn:#FFD166;
  --shadow:0 1px 2px rgba(0,0,0,.8),0 10px 30px rgba(0,0,0,.6);
}
@media (prefers-color-scheme:light){
  :root[data-theme=contrast]{
    --bg:#FFFFFF;--bg-raised:#FFFFFF;--bg-hover:#EBEBEB;
    --rule:#8A8A8A;--rule-strong:#4A4A4A;
    --ink:#000000;--ink-dim:#2E2E2E;--ink-faint:#454545;
    --key:#000000;--key-soft:rgba(0,0,0,.10);--key-ink:#FFFFFF;
    --danger:#A3120B;--focus:#000000;
    --good:#14591F;--on-ok:#FFFFFF;--warn:#5C4400;
    --shadow:0 1px 2px rgba(0,0,0,.20),0 10px 30px rgba(0,0,0,.14);
  }
}


/* Forced halves: data-mode=light or dark on the root. */
:root[data-mode=light]{color-scheme:light}
:root[data-mode=dark]{color-scheme:dark}
:root[data-mode=dark][data-theme=simple]{
  --bg:#131314;--bg-raised:#1E1F20;--bg-hover:#282A2C;
  --rule:#333537;--rule-strong:#444746;
  --ink:#E3E3E3;--ink-dim:#C4C7C5;--ink-faint:#9AA0A6;
  --key:#8AB4F8;--key-soft:rgba(138,180,248,.16);--key-ink:#062E6F;
  --danger:#F28B82;--focus:#8AB4F8;
  --good:#81C995;--on-ok:#0A2E16;--warn:#FDD663;
  --shadow:0 1px 2px rgba(0,0,0,.5),0 8px 24px rgba(0,0,0,.35);
  --sans:Roboto,-apple-system,BlinkMacSystemFont,"Segoe UI","Source Sans 3",Arial,sans-serif;
  --serif:Roboto,-apple-system,BlinkMacSystemFont,"Segoe UI","Source Sans 3",Arial,sans-serif;
  --subject-shadow:none;--card-r:12px;
}
:root[data-mode=light][data-theme=simple]{
    --bg:#FFFFFF;--bg-raised:#F8F9FA;--bg-hover:#F1F3F4;
    --rule:#DADCE0;--rule-strong:#BDC1C6;
    --ink:#1F1F1F;--ink-dim:#444746;--ink-faint:#575B5F;
    --key:#0B57D0;--key-soft:rgba(11,87,208,.10);--key-ink:#FFFFFF;
    --danger:#B3261E;--focus:#0B57D0;
    --good:#146C2E;--on-ok:#FFFFFF;--warn:#705600;
    --shadow:0 1px 2px rgba(60,64,67,.12),0 4px 12px rgba(60,64,67,.08);
    --sans:Roboto,-apple-system,BlinkMacSystemFont,"Segoe UI","Source Sans 3",Arial,sans-serif;
    --serif:Roboto,-apple-system,BlinkMacSystemFont,"Segoe UI","Source Sans 3",Arial,sans-serif;
    --subject-shadow:none;--card-r:12px;
  }
:root[data-mode=dark][data-theme=graphite]{
  --bg:#0D0E10;--bg-raised:#15171A;--bg-hover:#1C1F23;
  --rule:#25282D;--rule-strong:#393D44;
  --ink:#ECEEF1;--ink-dim:#A6ABB4;--ink-faint:#9197A1;
  --key:#6AA6FF;--key-soft:rgba(106,166,255,.15);--key-ink:#031330;
  --danger:#FF8F8F;--focus:#6AA6FF;
  --good:#8FD48A;--on-ok:#0B230A;--warn:#F0C674;
  --shadow:0 1px 2px rgba(0,0,0,.6),0 10px 28px rgba(0,0,0,.4);
  --sans:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,"Source Sans 3",sans-serif;
  --serif:-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI",Roboto,"Source Sans 3",sans-serif;
  --subject-shadow:none;--card-r:10px;
}
:root[data-mode=light][data-theme=graphite]{
    --bg:#F7F7F8;--bg-raised:#FFFFFF;--bg-hover:#EFF0F2;
    --rule:#E2E4E8;--rule-strong:#C3C7CE;
    --ink:#101215;--ink-dim:#4A4F57;--ink-faint:#5C616A;
    --key:#1D5CCB;--key-soft:rgba(29,92,203,.09);--key-ink:#FFFFFF;
    --danger:#B3261E;--focus:#1D5CCB;
    --good:#2E6B2E;--on-ok:#FFFFFF;--warn:#6E5300;
    --shadow:0 1px 2px rgba(16,18,21,.06),0 8px 24px rgba(16,18,21,.06);
    --sans:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,"Source Sans 3",sans-serif;
    --serif:-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI",Roboto,"Source Sans 3",sans-serif;
    --subject-shadow:none;--card-r:10px;
  }
:root[data-mode=dark][data-theme=amber]{
  --bg:#0B0E14;--bg-raised:#10141D;--bg-hover:#151A26;
  --rule:#1D2331;--rule-strong:#2A3145;
  --ink:#E7E3D8;--ink-dim:#9AA1B5;--ink-faint:#8088A2;
  --key:#E8A33D;--key-soft:rgba(232,163,61,.14);--key-ink:#1A1206;
  --danger:#FF8588;--focus:#E8A33D;
  --good:#8EBA74;--on-ok:#0D1508;--warn:#E9B45B;
  --shadow:0 1px 2px rgba(0,0,0,.5),0 10px 30px rgba(0,0,0,.35);
}
:root[data-mode=light][data-theme=amber]{
    --bg:#F6F7F9;--bg-raised:#FFFFFF;--bg-hover:#EDEFF3;
    --rule:#DFE3EA;--rule-strong:#C6CCD8;
    --ink:#14181F;--ink-dim:#4E5666;--ink-faint:#626A7B;
    --key:#8A5406;--key-ink:#FFFFFF;--key-soft:rgba(232,163,61,.20);
    --danger:#C0272C;--focus:#A96A0B;
    --good:#376327;--on-ok:#FFFFFF;--warn:#715C08;
    --shadow:0 1px 2px rgba(20,24,31,.06),0 10px 30px rgba(20,24,31,.05);
  }
:root[data-mode=dark][data-theme=contrast]{
  --bg:#000000;--bg-raised:#0B0B0B;--bg-hover:#161616;
  --rule:#3D3D3D;--rule-strong:#6B6B6B;
  --ink:#FFFFFF;--ink-dim:#DCDCDC;--ink-faint:#C4C4C4;
  --key:#FFFFFF;--key-soft:rgba(255,255,255,.16);--key-ink:#000000;
  --danger:#FF8F8F;--focus:#FFFFFF;
  --good:#7FE08A;--on-ok:#00220A;--warn:#FFD166;
  --shadow:0 1px 2px rgba(0,0,0,.8),0 10px 30px rgba(0,0,0,.6);
}
:root[data-mode=light][data-theme=contrast]{
    --bg:#FFFFFF;--bg-raised:#FFFFFF;--bg-hover:#EBEBEB;
    --rule:#8A8A8A;--rule-strong:#4A4A4A;
    --ink:#000000;--ink-dim:#2E2E2E;--ink-faint:#454545;
    --key:#000000;--key-soft:rgba(0,0,0,.10);--key-ink:#FFFFFF;
    --danger:#A3120B;--focus:#000000;
    --good:#14591F;--on-ok:#FFFFFF;--warn:#5C4400;
    --shadow:0 1px 2px rgba(0,0,0,.20),0 10px 30px rgba(0,0,0,.14);
  }

/* Paired palettes. Saved theme identifiers remain stable. */
:root{
  color-scheme:dark light;
  --mono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,monospace;
  --sans:"Source Sans 3",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --serif:"Source Serif 4",Georgia,serif;
  --pad:20px;--r:10px;--r-lg:14px;--tap:44px;

  /* The names the rest of this stylesheet uses, pointed at whatever the
     chosen theme set, so a palette swap never touches a rule. */
  --surface:var(--bg-raised);--surface-2:var(--bg-hover);
  --mute:var(--ink-dim);--faint:var(--ink-faint);
  --line:var(--rule);--hair:var(--rule);
  /* Four roles, named as HQPe Control names them, because the two apps
     should describe state in the same words even when they look nothing
     alike. A role says what a colour MEANS; --key says what the brand is.

       --signal    the brand, selection, the thing to press
       --observed  measured healthy
       --caution   a warning, approaching a limit
       --fault     something tried and failed

     ourAI used to alias --ok to --key and set --warn equal to it, so
     signal, healthy and caution were one colour with 0 degrees of hue
     between them in all eight halves. The budget bar proved it: its 80%
     stage was byte-identical to its normal fill in three themes of four.
     --observed and --caution are now real, and they carry HQPe's own values
     where the meaning is the same. */
  --signal:var(--key);
  --observed:var(--good);
  --caution:var(--warn);
  --fault:var(--danger);

  /* The names the stylesheets already use, pointed at the roles. */
  --accent:var(--signal);--accent-soft:var(--key-soft);--on-accent:var(--key-ink);
  --ok:var(--observed);--bad:var(--fault);
  /* Washes behind a badge or a bar. Derived rather than declared per theme,
     so they follow whichever palette is showing. */
  --ok-soft:color-mix(in srgb, var(--observed) 16%, transparent);
  --warn-soft:color-mix(in srgb, var(--caution) 16%, transparent);
  --bad-soft:color-mix(in srgb, var(--fault) 34%, transparent);

  /* Atmosphere, for the themes that have it (2026-09-23): art behind the
     page, glass for the sidebar and header over it, the shell left clear,
     and a reading face and size for answers. Plain themes leave these be. */
  --bg-art:none;--pane:var(--bg);--head:var(--surface);--shell:var(--surface);--blur:0px;
  --answer-font:inherit;--answer-size:inherit;

  /* The subject card and the section card (2026-09-23, from HQPe Control):
     one raised card per screen for what the screen is about, and quieter
     flat cards for the groups beside it. Themes may give either its own
     surface, edge and depth. */
  --subject-bg:var(--surface);--subject-line:var(--rule-strong);--subject-shadow:var(--shadow);--card-r:14px;
  --section-bg:color-mix(in srgb, var(--surface-2) 60%, transparent);
}

/* ── Amber · list.ikon.io ─────────────────────────────────────────────── */
[data-preview-theme=amber]{
  --bg:#0B0E14;--bg-raised:#10141D;--bg-hover:#151A26;
  --rule:#1D2331;--rule-strong:#2A3145;
  --ink:#E7E3D8;--ink-dim:#9AA1B5;--ink-faint:#8088A2;
  --key:#E8A33D;--key-soft:rgba(232,163,61,.14);--key-ink:#1A1206;
  --danger:#FF8588;--focus:#E8A33D;
  --good:#8EBA74;--on-ok:#0D1508;--warn:#E9B45B;
  --shadow:0 1px 2px rgba(0,0,0,.5),0 10px 30px rgba(0,0,0,.35);
}
@media (prefers-color-scheme:light){
  [data-preview-theme=amber]{
    --bg:#F6F7F9;--bg-raised:#FFFFFF;--bg-hover:#EDEFF3;
    --rule:#DFE3EA;--rule-strong:#C6CCD8;
    --ink:#14181F;--ink-dim:#4E5666;--ink-faint:#626A7B;
    --key:#8A5406;--key-ink:#FFFFFF;--key-soft:rgba(232,163,61,.20);
    --danger:#C0272C;--focus:#A96A0B;
    --good:#376327;--on-ok:#FFFFFF;--warn:#715C08;
    --shadow:0 1px 2px rgba(20,24,31,.06),0 10px 30px rgba(20,24,31,.05);
  }
}

/* ── Simple · clean white, blue and neutral greys ─────────────────────── */
[data-preview-theme=simple]{
  --bg:#131314;--bg-raised:#1E1F20;--bg-hover:#282A2C;
  --rule:#333537;--rule-strong:#444746;
  --ink:#E3E3E3;--ink-dim:#C4C7C5;--ink-faint:#9AA0A6;
  --key:#8AB4F8;--key-soft:rgba(138,180,248,.16);--key-ink:#062E6F;
  --danger:#F28B82;--focus:#8AB4F8;
  --good:#81C995;--on-ok:#0A2E16;--warn:#FDD663;
  --shadow:0 1px 2px rgba(0,0,0,.5),0 8px 24px rgba(0,0,0,.35);
  --sans:Roboto,-apple-system,BlinkMacSystemFont,"Segoe UI","Source Sans 3",Arial,sans-serif;
  --serif:Roboto,-apple-system,BlinkMacSystemFont,"Segoe UI","Source Sans 3",Arial,sans-serif;
  --subject-shadow:none;--card-r:12px;
}
@media (prefers-color-scheme:light){
  [data-preview-theme=simple]{
    --bg:#FFFFFF;--bg-raised:#F8F9FA;--bg-hover:#F1F3F4;
    --rule:#DADCE0;--rule-strong:#BDC1C6;
    --ink:#1F1F1F;--ink-dim:#444746;--ink-faint:#575B5F;
    --key:#0B57D0;--key-soft:rgba(11,87,208,.10);--key-ink:#FFFFFF;
    --danger:#B3261E;--focus:#0B57D0;
    --good:#146C2E;--on-ok:#FFFFFF;--warn:#705600;
    --shadow:0 1px 2px rgba(60,64,67,.12),0 4px 12px rgba(60,64,67,.08);
    --sans:Roboto,-apple-system,BlinkMacSystemFont,"Segoe UI","Source Sans 3",Arial,sans-serif;
    --serif:Roboto,-apple-system,BlinkMacSystemFont,"Segoe UI","Source Sans 3",Arial,sans-serif;
    --subject-shadow:none;--card-r:12px;
  }
}

/* ── Graphite · crisp greys and one electric blue ─────────────────────── */
/* The quiet professional one: the system face throughout, headings
   included, neutral greys with no tint, and a single blue at 216 degrees. */
[data-preview-theme=graphite]{
  --bg:#0D0E10;--bg-raised:#15171A;--bg-hover:#1C1F23;
  --rule:#25282D;--rule-strong:#393D44;
  --ink:#ECEEF1;--ink-dim:#A6ABB4;--ink-faint:#9197A1;
  --key:#6AA6FF;--key-soft:rgba(106,166,255,.15);--key-ink:#031330;
  --danger:#FF8F8F;--focus:#6AA6FF;
  --good:#8FD48A;--on-ok:#0B230A;--warn:#F0C674;
  --shadow:0 1px 2px rgba(0,0,0,.6),0 10px 28px rgba(0,0,0,.4);
  --sans:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,"Source Sans 3",sans-serif;
  --serif:-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI",Roboto,"Source Sans 3",sans-serif;
  --subject-shadow:none;--card-r:10px;
}
@media (prefers-color-scheme:light){
  [data-preview-theme=graphite]{
    --bg:#F7F7F8;--bg-raised:#FFFFFF;--bg-hover:#EFF0F2;
    --rule:#E2E4E8;--rule-strong:#C3C7CE;
    --ink:#101215;--ink-dim:#4A4F57;--ink-faint:#5C616A;
    --key:#1D5CCB;--key-soft:rgba(29,92,203,.09);--key-ink:#FFFFFF;
    --danger:#B3261E;--focus:#1D5CCB;
    --good:#2E6B2E;--on-ok:#FFFFFF;--warn:#6E5300;
    --shadow:0 1px 2px rgba(16,18,21,.06),0 8px 24px rgba(16,18,21,.06);
    --sans:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,"Source Sans 3",sans-serif;
    --serif:-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI",Roboto,"Source Sans 3",sans-serif;
    --subject-shadow:none;--card-r:10px;
  }
}

/* ── Contrast · black, white, and colour only for state ───────────────── */
/* Not a hue, a utility: for bright sunlight and for anyone who finds the
   dim greys hard work. The accent is achromatic on purpose, so the only
   coloured things on the page are the three state roles and they cannot be
   confused with the thing to press. Every pair here is past AAA. */
[data-preview-theme=contrast]{
  --bg:#000000;--bg-raised:#0B0B0B;--bg-hover:#161616;
  --rule:#3D3D3D;--rule-strong:#6B6B6B;
  --ink:#FFFFFF;--ink-dim:#DCDCDC;--ink-faint:#C4C4C4;
  --key:#FFFFFF;--key-soft:rgba(255,255,255,.16);--key-ink:#000000;
  --danger:#FF8F8F;--focus:#FFFFFF;
  --good:#7FE08A;--on-ok:#00220A;--warn:#FFD166;
  --shadow:0 1px 2px rgba(0,0,0,.8),0 10px 30px rgba(0,0,0,.6);
}
@media (prefers-color-scheme:light){
  [data-preview-theme=contrast]{
    --bg:#FFFFFF;--bg-raised:#FFFFFF;--bg-hover:#EBEBEB;
    --rule:#8A8A8A;--rule-strong:#4A4A4A;
    --ink:#000000;--ink-dim:#2E2E2E;--ink-faint:#454545;
    --key:#000000;--key-soft:rgba(0,0,0,.10);--key-ink:#FFFFFF;
    --danger:#A3120B;--focus:#000000;
    --good:#14591F;--on-ok:#FFFFFF;--warn:#5C4400;
    --shadow:0 1px 2px rgba(0,0,0,.20),0 10px 30px rgba(0,0,0,.14);
  }
}


/* Forced halves: data-mode=light or dark on the root. */
:root[data-mode=light]{color-scheme:light}
:root[data-mode=dark]{color-scheme:dark}
:root[data-mode=dark] [data-preview-theme=simple]{
  --bg:#131314;--bg-raised:#1E1F20;--bg-hover:#282A2C;
  --rule:#333537;--rule-strong:#444746;
  --ink:#E3E3E3;--ink-dim:#C4C7C5;--ink-faint:#9AA0A6;
  --key:#8AB4F8;--key-soft:rgba(138,180,248,.16);--key-ink:#062E6F;
  --danger:#F28B82;--focus:#8AB4F8;
  --good:#81C995;--on-ok:#0A2E16;--warn:#FDD663;
  --shadow:0 1px 2px rgba(0,0,0,.5),0 8px 24px rgba(0,0,0,.35);
  --sans:Roboto,-apple-system,BlinkMacSystemFont,"Segoe UI","Source Sans 3",Arial,sans-serif;
  --serif:Roboto,-apple-system,BlinkMacSystemFont,"Segoe UI","Source Sans 3",Arial,sans-serif;
  --subject-shadow:none;--card-r:12px;
}
:root[data-mode=light] [data-preview-theme=simple]{
    --bg:#FFFFFF;--bg-raised:#F8F9FA;--bg-hover:#F1F3F4;
    --rule:#DADCE0;--rule-strong:#BDC1C6;
    --ink:#1F1F1F;--ink-dim:#444746;--ink-faint:#575B5F;
    --key:#0B57D0;--key-soft:rgba(11,87,208,.10);--key-ink:#FFFFFF;
    --danger:#B3261E;--focus:#0B57D0;
    --good:#146C2E;--on-ok:#FFFFFF;--warn:#705600;
    --shadow:0 1px 2px rgba(60,64,67,.12),0 4px 12px rgba(60,64,67,.08);
    --sans:Roboto,-apple-system,BlinkMacSystemFont,"Segoe UI","Source Sans 3",Arial,sans-serif;
    --serif:Roboto,-apple-system,BlinkMacSystemFont,"Segoe UI","Source Sans 3",Arial,sans-serif;
    --subject-shadow:none;--card-r:12px;
  }
:root[data-mode=dark] [data-preview-theme=graphite]{
  --bg:#0D0E10;--bg-raised:#15171A;--bg-hover:#1C1F23;
  --rule:#25282D;--rule-strong:#393D44;
  --ink:#ECEEF1;--ink-dim:#A6ABB4;--ink-faint:#9197A1;
  --key:#6AA6FF;--key-soft:rgba(106,166,255,.15);--key-ink:#031330;
  --danger:#FF8F8F;--focus:#6AA6FF;
  --good:#8FD48A;--on-ok:#0B230A;--warn:#F0C674;
  --shadow:0 1px 2px rgba(0,0,0,.6),0 10px 28px rgba(0,0,0,.4);
  --sans:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,"Source Sans 3",sans-serif;
  --serif:-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI",Roboto,"Source Sans 3",sans-serif;
  --subject-shadow:none;--card-r:10px;
}
:root[data-mode=light] [data-preview-theme=graphite]{
    --bg:#F7F7F8;--bg-raised:#FFFFFF;--bg-hover:#EFF0F2;
    --rule:#E2E4E8;--rule-strong:#C3C7CE;
    --ink:#101215;--ink-dim:#4A4F57;--ink-faint:#5C616A;
    --key:#1D5CCB;--key-soft:rgba(29,92,203,.09);--key-ink:#FFFFFF;
    --danger:#B3261E;--focus:#1D5CCB;
    --good:#2E6B2E;--on-ok:#FFFFFF;--warn:#6E5300;
    --shadow:0 1px 2px rgba(16,18,21,.06),0 8px 24px rgba(16,18,21,.06);
    --sans:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,"Source Sans 3",sans-serif;
    --serif:-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI",Roboto,"Source Sans 3",sans-serif;
    --subject-shadow:none;--card-r:10px;
  }
:root[data-mode=dark] [data-preview-theme=amber]{
  --bg:#0B0E14;--bg-raised:#10141D;--bg-hover:#151A26;
  --rule:#1D2331;--rule-strong:#2A3145;
  --ink:#E7E3D8;--ink-dim:#9AA1B5;--ink-faint:#8088A2;
  --key:#E8A33D;--key-soft:rgba(232,163,61,.14);--key-ink:#1A1206;
  --danger:#FF8588;--focus:#E8A33D;
  --good:#8EBA74;--on-ok:#0D1508;--warn:#E9B45B;
  --shadow:0 1px 2px rgba(0,0,0,.5),0 10px 30px rgba(0,0,0,.35);
}
:root[data-mode=light] [data-preview-theme=amber]{
    --bg:#F6F7F9;--bg-raised:#FFFFFF;--bg-hover:#EDEFF3;
    --rule:#DFE3EA;--rule-strong:#C6CCD8;
    --ink:#14181F;--ink-dim:#4E5666;--ink-faint:#626A7B;
    --key:#8A5406;--key-ink:#FFFFFF;--key-soft:rgba(232,163,61,.20);
    --danger:#C0272C;--focus:#A96A0B;
    --good:#376327;--on-ok:#FFFFFF;--warn:#715C08;
    --shadow:0 1px 2px rgba(20,24,31,.06),0 10px 30px rgba(20,24,31,.05);
  }
:root[data-mode=dark] [data-preview-theme=contrast]{
  --bg:#000000;--bg-raised:#0B0B0B;--bg-hover:#161616;
  --rule:#3D3D3D;--rule-strong:#6B6B6B;
  --ink:#FFFFFF;--ink-dim:#DCDCDC;--ink-faint:#C4C4C4;
  --key:#FFFFFF;--key-soft:rgba(255,255,255,.16);--key-ink:#000000;
  --danger:#FF8F8F;--focus:#FFFFFF;
  --good:#7FE08A;--on-ok:#00220A;--warn:#FFD166;
  --shadow:0 1px 2px rgba(0,0,0,.8),0 10px 30px rgba(0,0,0,.6);
}
:root[data-mode=light] [data-preview-theme=contrast]{
    --bg:#FFFFFF;--bg-raised:#FFFFFF;--bg-hover:#EBEBEB;
    --rule:#8A8A8A;--rule-strong:#4A4A4A;
    --ink:#000000;--ink-dim:#2E2E2E;--ink-faint:#454545;
    --key:#000000;--key-soft:rgba(0,0,0,.10);--key-ink:#FFFFFF;
    --danger:#A3120B;--focus:#000000;
    --good:#14591F;--on-ok:#FFFFFF;--warn:#5C4400;
    --shadow:0 1px 2px rgba(0,0,0,.20),0 10px 30px rgba(0,0,0,.14);
  }

.themeSettings .themeColourSwatch[data-preview-theme=simple]{--bg:#FFFFFF;--bg-raised:#F8F9FA;--rule-strong:#BDC1C6;--key:#0B57D0}


.discussionPage{display:flex;flex-direction:column;padding:16px max(16px,calc((100vw - 1320px)/2));overflow:hidden}
.discussionPage>*{width:100%;max-width:1200px;margin-left:auto;margin-right:auto;box-sizing:border-box}
.discussionPage>.discussionAudience{max-width:1200px;margin-left:auto;margin-right:auto;margin:0 0 12px;font-size:13px}.discussionPage>.discussionActions{max-width:1200px;margin-left:auto;margin-right:auto;margin:0 0 8px;align-items:center;gap:8px}
.discussionPage>.detailHead{position:static;flex:none;margin:0 auto;padding:8px 0 12px}
.discussionSourceLink{display:block;color:var(--accent);margin:4px 0}.discussionAudience{margin:0 0 10px;color:var(--ink-dim);font-size:13px;display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;overflow-wrap:anywhere}
.discussionLayout{display:grid;grid-template-columns:minmax(0,var(--group-left,60fr)) 12px minmax(300px,var(--group-right,40fr));gap:10px;min-height:0;flex:1}
.discussionSource,.discussionThread{min-height:0;min-width:0;overflow:auto}
.discussionSource,.discussionMessage{overflow-wrap:anywhere}
.discussionSource .bubble,.discussionMessage .bubble{min-width:0;max-width:100%}
.discussionPage .bubble pre{max-width:100%;overflow-x:auto}
.discussionSource{padding-right:20px;border-right:1px solid var(--line)}

.discussionSource article{margin:0 0 24px}.discussionSource h3{font-size:13px;color:var(--ink-dim);margin:12px 0}
.discussionThread{display:flex;flex-direction:column;overflow:hidden}
.discussionMessages{overflow-y:auto;overflow-x:hidden;scrollbar-gutter:stable;min-height:0;flex:1;padding:8px 8px 12px 0;overscroll-behavior:contain}
.discussionMessage{margin:0 0 20px;overflow-wrap:anywhere}.discussionMessage>header{display:flex;gap:8px;align-items:baseline;margin-bottom:5px;font-size:13px;color:var(--ink-dim)}
.discussionMessage>header{position:static;background:none;border:0;padding:0;height:auto;min-height:0;flex-wrap:wrap}.discussionMessage>header strong{color:var(--ink)}.discussionMessage.ai{padding-left:0}
.discussionMessage .bubble{padding:0;background:transparent;max-width:none}.detailPage.discussionPage .discussionMessage .tap{margin-top:4px;border-color:transparent;background:transparent;color:var(--mute)}
.discussionReply{padding:6px 10px;margin:6px 0;border-left:2px solid var(--line);font-size:13px;color:var(--ink-dim);white-space:pre-wrap}
.discussionComposer{border-top:1px solid var(--line);padding-top:10px;flex:none}.detailPage.discussionPage .discussionComposer textarea{min-height:65px;max-height:160px;resize:vertical;font-family:var(--reading-font);font-size:var(--reading-size)}
.discussionActions{display:flex;gap:8px;flex-wrap:wrap;margin:8px 0}.detailPage.discussionPage .discussionActions .primary{background:var(--accent);color:var(--on-accent,#fff)}
.discussionStatus{font-size:13px;color:var(--ink-dim);margin:4px 0;min-height:18px}.discussionComposer>details{font-size:12px;color:var(--mute);margin:8px 0;font-size:12px;border:0;background:transparent;padding:0}.discussionStatus:empty{display:none}
.discussionChoice{display:flex;align-items:flex-start;gap:12px;margin:12px 0;padding-bottom:12px;border-bottom:1px solid var(--line)}.discussionChoice input{margin-top:6px}.discussionChoice .bubble{padding:0;background:none}
.discussionListItem{display:block;width:100%;text-align:left;padding:16px 0;background:none;color:var(--ink);border:0;border-bottom:1px solid var(--line);cursor:pointer;font:inherit}.discussionListItem small{display:block;color:var(--ink-dim);margin-top:4px}

.discussionWho,.discussionPeoplePick{min-width:0;border:0;margin:20px 0 0;padding:0}.discussionWho>legend,.discussionPeoplePick>legend{padding:0;font:600 15px/1.4 var(--sans);margin-bottom:8px}
.discussionWhoOption,.discussionPerson{display:flex;align-items:flex-start;gap:12px;min-height:44px;padding:8px 0;box-sizing:border-box;cursor:pointer;min-width:0}.discussionWhoOption input,.discussionPerson input{flex:none;width:18px;height:18px;margin:2px 0 0;accent-color:var(--accent)}
.discussionWhoOption>span,.discussionPerson>span{min-width:0;overflow-wrap:anywhere}.discussionWhoOption strong{display:block;font-weight:600}.discussionWhoOption small{display:block;color:var(--ink-dim);font-size:13px;margin-top:2px}
.discussionWhoOption:has(input:disabled),.discussionPerson:has(input:disabled){cursor:default}.discussionWhoOption:has(input:disabled:not(:checked)){color:var(--mute)}
.discussionWho .discussionPeoplePick{margin:4px 0 0 30px;padding-left:12px;border-left:2px solid var(--line)}.discussionWho .discussionPeoplePick>legend{font-size:13px;color:var(--ink-dim);margin-bottom:0}
.discussionWhoNote{max-width:65ch}
.discussionConfirm{margin:24px 0 12px;padding:14px 16px;border:1px solid var(--line);border-radius:10px;min-width:0}.detailPage .discussionConfirm h3{margin:0 0 10px;font:600 14px/1.4 var(--sans)}
.discussionConfirm dl{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:6px 16px;margin:0}.discussionConfirm dt{color:var(--ink-dim);font-size:13px;padding-top:1px}.discussionConfirm dd{margin:0;overflow-wrap:anywhere;min-width:0}
.detailPage .tap.discussionStart{background:var(--accent);color:var(--on-accent,#fff);border-color:transparent}.detailPage .tap.discussionStart:disabled{cursor:not-allowed}
.discussionAudience>span{min-width:0}.detailPage .discussionAudience .discussionPeopleToggle{min-height:32px;padding:4px 10px}
.discussionPage>.discussionPeople{flex:none;max-height:45vh;overflow:auto;margin:0 auto 12px;padding:12px 16px;border:1px solid var(--line);border-radius:10px;overscroll-behavior:contain}.detailPage .discussionPeople h3{margin:0 0 4px;font:600 15px/1.4 var(--sans)}.discussionPeople h3:focus{outline:none}.discussionPeople h3:focus-visible{outline:2px solid var(--focus,var(--accent))}
.discussionPeopleList{list-style:none;margin:8px 0;padding:0}.discussionPeopleList li{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:44px;border-bottom:1px solid var(--hair,var(--line));overflow-wrap:anywhere}.discussionPeopleList li>span{min-width:0}.discussionPeopleList li .tap{flex:none}
.discussionPeople .discussionPeoplePick{margin-top:12px}
@media(max-width:700px){
 .discussionConfirm dl{grid-template-columns:minmax(0,1fr);gap:2px}.discussionConfirm dd{margin-bottom:8px}
 .discussionPage>.discussionPeople{max-height:none}
 .discussionWho .discussionPeoplePick{margin-left:8px}
}
.discussionPage .detailHead h2{font-family:var(--serif)}
.discussionPage details.discussionSourceFold{min-width:0;min-height:0;overflow-y:auto;overflow-x:hidden;scrollbar-gutter:stable;overscroll-behavior:contain;border:0;border-radius:0;padding:0 12px 0 0;margin:0}
.discussionSourceFold>summary{display:none!important}
.discussionSourceFold:not([open])>.discussionSource{display:block}
.discussionSource{border:0;padding:0;overflow:visible}
.discussionSource h3{font:600 13px/1.4 var(--sans);margin:16px 0 10px;color:var(--mute)}
.discussionSource article{margin-bottom:28px}
.discussionMessage{padding:14px 0;margin-bottom:8px;border-bottom:1px solid var(--hair)}
.discussionMessage:last-child{border-bottom:0}
.discussionMessage>header{font-size:14px;margin-bottom:8px}
.discussionMessage .bubble{font-size:17px;line-height:1.6}
.discussionComposer{background:var(--surface)}
@media(max-width:700px){
 .discussionPage{display:block;overflow:auto;padding:16px 18px;scroll-padding-bottom:230px}
 .discussionPage .detailHead{position:static}
 .discussionLayout{display:block;min-height:0}
 .discussionPage details.discussionSourceFold{border:1px solid var(--line);border-radius:10px;padding:0 14px;margin:16px 0 24px;overflow:visible;scrollbar-gutter:auto}
 .discussionSourceFold>summary{display:flex!important}
 .discussionSourceFold:not([open])>.discussionSource{display:none}
 .discussionPage details.discussionSourceFold[open]{padding-bottom:14px}
 .discussionThread{display:block;overflow:visible}
 .discussionMessages{overflow:visible;scrollbar-gutter:auto;padding:0;overscroll-behavior:auto}
 .discussionComposer{position:sticky;bottom:-16px;padding:12px 0 calc(12px + env(safe-area-inset-bottom));margin-top:20px}
 .discussionPage .detailHead h2{font-size:24px}
 .discussionComposer details{margin:8px 0 0}
}

*{box-sizing:border-box}
/* dvh, not %: iOS Safari does not shrink the layout viewport for the
   keyboard, and with a height:100% column pinned to the bottom the composer
   sat under ~336px of keyboard with no scroll room to escape it. */
/* Every form control is at least 16px. Below that, iOS Safari zooms the
   page in when the control is focused and leaves it zoomed on blur, so the
   page is wider than the screen from then on and pans sideways (PAVI,
   2026-09-13: "the page width is larger than the screen width"). The
   invite-code box was the first thing the family tapped, at 15px. */
html{-webkit-text-size-adjust:100%;height:100dvh}
body{margin:0;height:100dvh;background:var(--bg);background-image:var(--bg-art);background-attachment:fixed;color:var(--ink);font:15px/1.45 var(--sans);-webkit-font-smoothing:antialiased}
html:has(#shell:not([hidden])),body:has(#shell:not([hidden])){overflow:hidden}
@supports not (height:100dvh){ html,body{height:100%} .shell{height:calc(100% - var(--workspace-bottom))} }
[hidden]{display:none!important}
.detailPage{position:fixed;inset:0;bottom:var(--workspace-bottom);z-index:40;background:var(--bg);color:var(--ink);overflow:auto;padding:24px max(24px,calc((100vw - 760px)/2));box-sizing:border-box}
.detailHead{display:flex;align-items:center;justify-content:space-between;gap:20px;position:sticky;top:-24px;background:var(--bg);padding:16px 0;z-index:1}
.detailPage.topDestination>.detailHead>.detailClose{display:none}
.detailHead h2{margin:0;font-size:20px}.detailHead{margin-bottom:20px;min-height:44px}.detailPage pre{white-space:pre-wrap;overflow-wrap:anywhere;font:16px/1.6 var(--sans)}
.detailPage .tap{appearance:none;min-height:44px;border:1px solid var(--line);border-radius:8px;padding:9px 14px;background:var(--surface);color:var(--ink);font:14px/1.35 var(--sans);cursor:pointer}.detailPage .tap:hover{background:var(--surface-2)}.detailPage>.tap{display:block;margin:8px 0}.sourceDetail{max-width:100%;}.sourceDetail>a.tap{display:inline-block;width:auto}.sourceDetail pre{border-left:2px solid var(--line);padding-left:18px;max-width:75ch}.sourceWarning{border-left:3px solid var(--accent);padding:8px 14px;max-width:75ch}.detailPage pre.requestData{font:13px/1.6 var(--mono)}
.detailPage h3{margin-top:24px}.detailPage .tap:disabled{opacity:.5;cursor:wait}
.comparison{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:28px}.comparison section{min-width:0}.comparison h3{font-size:17px}
@media(max-width:650px){.comparison{grid-template-columns:minmax(0,1fr)}.detailPage{padding:16px}.detailHead{top:-16px}}



@media(min-width:1100px){body:not(.sideCollapsed) #fresh{display:none}}
.workspaceNav{display:flex;gap:20px;margin:0 0 18px}.workspaceNav button{appearance:none;border:0;background:transparent;color:var(--mute);font:inherit;min-height:var(--tap);padding:5px 0;border-bottom:2px solid transparent}.workspaceNav button[aria-pressed=true]{color:var(--ink);border-bottom-color:var(--accent)}
#convBody .workspaceTools{display:flex;gap:8px;margin:12px 0}#convBody .workspaceTools button{appearance:none;font:inherit;min-height:var(--tap);padding:8px 12px;color:var(--ink);background:var(--surface);border:1px solid var(--line);border-radius:7px}#convBody>details{margin:20px 0}
/* The surfaces nobody draws. A browser default caret, selection and ring
   belong to no design system, and they are the cheapest tell that a page was
   assembled rather than built. */

:root{accent-color:var(--accent);caret-color:var(--focus)}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px;border-radius:4px}
.log{scrollbar-width:thin;scrollbar-color:var(--line) transparent}
.log::-webkit-scrollbar{width:9px}
.log::-webkit-scrollbar-thumb{background:var(--line);border-radius:99px;border:3px solid var(--bg)}
.log::-webkit-scrollbar-track{background:transparent}

/* An infinite blink is motion nobody asked for, and an answer can stream for
   half a minute. */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .cursor::after{visibility:visible!important}
}

/* Join */
.join{max-width:420px;margin:0 auto;padding:14vh 22px 40px}
/* The wordmark is letterspaced but no longer lowercased: the name is Our AI
   (PAVI, 2026-09-13) and the transform rendered it "our ai", which throws
   away the one initialism in it. */
.join h1{font:500 26px/1.15 var(--sans);letter-spacing:.34em;margin:0 0 14px;color:var(--ink)}
.join p{color:var(--mute);margin:0 0 26px}
.join label[for=pass],.join label[for=newpass]{margin-top:12px}
.join label{display:block;font:11px/1 var(--mono);letter-spacing:.09em;text-transform:uppercase;color:var(--faint);margin-bottom:8px}
.join input{width:100%;font:16px/1.4 var(--mono);padding:13px 14px;border:1px solid var(--line);border-radius:10px;background:var(--surface);color:var(--ink)}
.join input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.join button{width:100%;margin-top:14px;font:500 16px/1 var(--sans);padding:14px;border:0;border-radius:10px;background:var(--accent);color:var(--on-accent)}
.join button.quiet{background:var(--surface);color:var(--ink);border:1px solid var(--line)}
.join form+.hint{margin-top:26px}
.join label+input{margin-top:0}
.join button[disabled]{opacity:.5}
.join .hint{margin-top:22px;font-size:13px;color:var(--mute)}
.join .lede{color:var(--mute);margin:0 0 20px}
/* An error must not look like a tip. It used to be the same size and colour
   as the hint directly beneath it. */
.join .err{margin-top:13px;font:500 14px/1.4 var(--sans);color:var(--bad)}
.join .lede a{color:var(--accent)}
.join .err:empty{display:none}

/* Shell */
.shell{display:flex;flex-direction:column;height:calc(100dvh - var(--workspace-bottom));max-width:760px;margin:0 auto;overflow:hidden}
@media (min-width:820px){ .shell{background:var(--shell);box-shadow:var(--shadow);border-left:1px solid var(--hair);border-right:1px solid var(--hair)} .shell header,.shell .bar{background:var(--surface)} }
header{flex:none;padding:14px 20px 12px;border-bottom:1px solid var(--line);background:var(--bg)}
.top{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.who{font:600 16px/1.2 var(--sans);letter-spacing:.01em}

/* The right of this row was empty for everyone but PAVI, whose budget sits
   there; the family saw nothing. Settings is a word rather than a gear,
   because every other control on this page is a word. */
.topRight{display:flex;align-items:baseline;gap:12px}
/* A control, not a caption: the same pill as New and More, so it reads as
   something to press (PAVI, 2026-09-13: "settings is too subdued"). */
#settings{font:500 13px/1 var(--sans);color:var(--ink);background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:7px 11px;min-height:0;cursor:pointer}
#settings:hover{border-color:var(--mute)}

.note{margin-top:8px;font-size:13px;color:var(--warn)}
/* Preview is a claim the screen makes about whose app this is, so it says so
   in the caution colour and carries its own way out. */
.asBanner{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:10px;padding:9px 12px;border:1px solid var(--caution);border-radius:10px;background:var(--warn-soft);font-size:13px;line-height:1.4}
.asBanner button{flex:none;font:500 13px/1 var(--sans);padding:7px 11px;border:1px solid var(--caution);border-radius:8px;background:transparent;color:var(--ink);min-height:0;cursor:pointer}


/* Roles */
.controls{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 14px;margin-top:11px}
/* One control, four segments, rather than four pills in a row: the tiers
   are one choice. */
.roles{display:inline-flex;border:1px solid var(--line);border-radius:999px;background:var(--surface);padding:2px;gap:0}
.roles .role{border:0;border-radius:999px;background:transparent;padding:7px 12px}
.roles .role[aria-pressed=true]{background:var(--accent);color:var(--on-accent)}
/* Every control in this file measured under the 44px minimum -- chips 31px,
   Copy/Retry 26px. The visible pill is the right size, so the hit area is
   grown with an inset pseudo-element instead of by inflating the design. */
.tap{position:relative}
.tap::before{content:"";position:absolute;left:0;right:0;top:50%;height:var(--tap);transform:translateY(-50%);min-width:var(--tap)}
.role{font:500 13px/1 var(--sans);padding:8px 11px;border:1px solid var(--line);border-radius:999px;background:var(--surface);color:var(--mute)}
.role[aria-pressed=true]{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
/* The cost markers made the chips wide enough that margin-left:auto pushed
   Web alone onto a second row, right-aligned and reading as an unrelated
   control. Below the fold-point it just flows after Auto; the rule still
   says it is a different kind of thing. */
/* The globe is not one of the four tiers -- it is an independent switch, and
   colour alone was the only thing saying so. A rule and a real gap say it. */
.role.globe{position:relative}
/* Search-on is an observed state, not a brand surface, so it takes the
   healthy green and the ink that green needs. */
.role.globe[aria-pressed=true]{background:var(--observed);border-color:var(--observed);color:var(--on-ok)}

/* Transcript */
/* One knob for the two surfaces that are actually read and written. The
   chrome stays put: scaling a whole family app from one variable moves
   buttons out from under thumbs. */
.log{flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;padding:18px 20px 8px;-webkit-overflow-scrolling:touch;font-size:calc(15px * var(--read, 1))}
.turn{margin:0 0 20px}
.turn .by{font:500 12px/1 var(--sans);letter-spacing:.01em;color:var(--mute);margin-bottom:7px}
/* pre-wrap with no wrap rule let a 190-character URL give the bubble a
   1260px scrollWidth; #log absorbed it and one long link dragged every other
   message 955px off-screen, unrecoverable without a pointer. */
.turn .bubble{overflow-wrap:anywhere;word-break:break-word}
.turn.me .bubble{background:var(--accent-soft);border-radius:12px;padding:11px 14px;white-space:pre-wrap}
.turn.them .bubble{white-space:normal;font-family:var(--reading-font);font-size:var(--reading-size)}
.turn.them .bubble .p{white-space:pre-wrap;margin:0 0 10px}
.turn.them .bubble .p:last-child{margin-bottom:0}
.turn.them .bubble ul,.turn.them .bubble ol{margin:2px 0 10px;padding-left:22px}

.turn.them .bubble div.h{font-weight:600;margin:12px 0 6px}
.turn.them .bubble strong{font-weight:600}
.maths{overflow-wrap:normal;word-break:normal;white-space:normal}
.display-maths{display:block;max-width:100%;overflow-x:auto;overflow-y:hidden;padding:4px 2px}
.display-maths .katex-display{margin:.5em 0;text-align:left}
.display-maths .katex-display>.katex{white-space:nowrap;text-align:left}
.maths-source{white-space:pre-wrap;overflow-wrap:anywhere;color:inherit}
.turn .bubble code{font:.9em/1.4 var(--mono);background:var(--surface-2);border:1px solid var(--hair);border-radius:5px;padding:1px 5px}
.turn.them .bubble pre code{background:none;border:0;padding:0}
.turn.them .bubble pre{margin:11px 0;background:var(--surface-2);border:1px solid var(--hair);border-radius:9px;padding:11px 13px;overflow-x:auto;font:13px/1.5 var(--mono);white-space:pre;max-width:100%}
.turn .via{margin-top:8px;font:12px/1.5 var(--sans);color:var(--faint)}
.turn .via .spend{font:11px/1 var(--mono);font-variant-numeric:tabular-nums;letter-spacing:.04em}
.turn .via .spend{color:var(--mute)}

.turn .via .who{display:block;margin-top:9px;padding:11px 13px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r)}
.turn .via .about{display:block;font:14px/1.5 var(--sans);letter-spacing:normal;color:var(--ink);margin-bottom:7px;text-transform:none}
.turn .via .modelid{display:block;font:11px/1.4 var(--mono);color:var(--faint)}
.turn.bad .by{color:var(--bad)}
.turn .think{margin:0 0 10px;border-left:2px solid var(--line);padding-left:11px}
.turn .think summary{font:500 12px/1 var(--sans);color:var(--faint);cursor:pointer}
.turn .think div{margin-top:7px;color:var(--mute);font-size:14px;white-space:pre-wrap}

.turn .sources{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px;margin-top:11px}
.turn .sourcesLead,.turn .sourcesAlso{font:12px/1 var(--sans);color:var(--mute)}
.turn .sources a.also{color:var(--mute);border-bottom-color:var(--line)}
.turn .sources .unverified{flex-basis:100%;color:var(--ink-dim)}
.turn .answer-body .unlinked{border-bottom:1px dotted var(--mute)}
.turn .sources a{font-size:13px;color:var(--observed);text-decoration:none;border-bottom:1px solid var(--observed)}
.turn .sources a:hover{color:var(--ink);border-bottom-color:var(--ink)}
.turn .bubble a.cite{color:var(--observed);text-decoration:none;font-variant-numeric:tabular-nums;padding:0 1px}
.turn .bubble a.cite:hover{text-decoration:underline}


/* Said before the button rather than on it: the button is a verb, the line
   above is the reason it is there. */
.turn .stale{margin-top:10px;font-size:13.5px;line-height:1.45;color:var(--caution)}


.turn.me .thumb{display:block;margin-top:8px;max-width:160px;border-radius:9px;border:1px solid var(--line)}
.pending{flex:none;display:flex;align-items:center;gap:10px;padding:8px 20px;border-top:1px solid var(--hair);font-size:13px;color:var(--mute)}
.pending img{width:44px;height:44px;object-fit:cover;border-radius:7px;border:1px solid var(--line)}
.pending button.quiet{margin-left:auto;font:12px/1 var(--sans);padding:6px 10px;border:1px solid var(--line);border-radius:8px;background:var(--surface);color:var(--mute)}



.switches{display:inline-flex;gap:4px;margin:0}
.switches .role{font-size:12px;padding:6px 10px;border-color:transparent;background:transparent;color:var(--mute)}
.switches .role[aria-pressed=true]{border-color:var(--line)}
.note button.tap{margin-left:10px;font:12px/1 var(--sans);padding:5px 9px;border:1px solid var(--caution);border-radius:8px;background:transparent;color:var(--ink)}
.bar .title{flex:1 1 170px;min-width:0;display:inline-flex;align-items:center;gap:6px;text-align:left;font:500 15px/1.3 var(--sans);color:var(--ink);background:transparent;border:0;padding:7px 2px}
.bar .title .titleText{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#chats .conversationIcon{width:18px;height:18px;margin-left:8px;vertical-align:-1px;color:var(--mute);flex:none}
/* Centred by flex, not by the line box: as inline content the glyph sat on
   the text baseline, low and left of centre on the phone. */







.outputActions{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0}.outputActions .tap{margin:0}
.detailPage textarea{display:block;width:100%;box-sizing:border-box;min-height:110px;padding:12px;background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:10px;font:15px/1.5 var(--sans);resize:vertical}.detailPage>.tap{margin:8px 8px 8px 0}
.feature-tip{display:block;max-width:330px;margin:10px auto 0;padding:10px 12px;min-height:var(--tap);border:0;background:none;color:var(--mute);font:13px/1.5 var(--sans);text-align:center;text-decoration:underline;text-underline-offset:3px;cursor:pointer}


.cropper{position:fixed;inset:0;z-index:40;background:var(--bg);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:16px}
.cropper canvas{max-width:100%;touch-action:none;border:1px solid var(--line);border-radius:8px}
.cropper .row{display:flex;gap:8px}
.side{display:none}.side button{min-height:var(--tap)}
@media (min-width:1300px){
  .side{display:block;position:fixed;top:0;bottom:0;left:calc(50% - 380px - 272px);width:250px;overflow-y:auto;padding:16px 8px;font:14px/1.35 var(--sans)}
  .side h4{margin:6px 8px 8px;font:500 11px/1 var(--mono);letter-spacing:.09em;text-transform:uppercase;color:var(--faint)}
  .side button{display:block;width:100%;text-align:left;padding:9px 10px;border:0;border-radius:8px;background:transparent;color:var(--ink);font:inherit;white-space:normal;overflow-wrap:anywhere}
  .side button:hover{background:var(--surface-2)}
  .side button[aria-current=true]{background:var(--accent-soft)}
  .side button.quiet{color:var(--mute)}
  .side h5{margin:12px 10px 4px;font:500 11px/1 var(--mono);letter-spacing:.09em;text-transform:uppercase;color:var(--faint)}
  .side .row{display:flex;align-items:flex-start}
  .side .row button:first-child{flex:1 1 auto}
  .side .row button.del{flex:none;width:28px;padding:9px 0;text-align:center;color:var(--faint);opacity:0}
  .side .row:hover button.del,.side .row button.del:focus{opacity:1}
  .side .row button.del:hover{color:var(--bad);background:var(--bad-soft)}
}
.selbar{position:fixed;z-index:30;display:flex;gap:6px;padding:6px;border:1px solid var(--line);border-radius:10px;background:var(--surface);box-shadow:var(--shadow)}
.selbar button{font:13px/1 var(--sans);padding:8px 10px;min-height:36px;border:1px solid var(--line);border-radius:8px;background:var(--surface-2);color:var(--ink)}


/* Announced, never shown. */
.sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* window.prompt and window.confirm surface as a system alert stamped with the
   origin -- in a Home Screen app that is the one place the document breaks
   and reads as a web page. This is the same question in the product's own
   voice. <dialog> is used for the focus trap and Escape that come with it. */
.settingsPage{position:fixed;inset:0;bottom:var(--workspace-bottom);z-index:20;background:var(--bg);color:var(--ink);overflow-y:auto;-webkit-overflow-scrolling:touch}
.settingsPage>*{max-width:560px;margin:0 auto}
.settingsHead{display:grid;grid-template-columns:1fr auto;align-items:center;gap:6px 12px;padding:14px 20px 8px;border-bottom:1px solid var(--line)}
.settingsHead h2{margin:0;font:600 17px/1.2 var(--sans)}
.settingsHead .settingsWho{grid-column:1/-1;font:12px/1.3 var(--sans);color:var(--faint)}
.settingsHead button.quiet{font:500 14px/1 var(--sans);color:var(--mute);background:none;border:0;padding:6px 0;min-height:0}


.settingsBody .group{border:1px solid var(--line);border-radius:12px;background:var(--surface);overflow:hidden}
.settingsBody .group:first-child{margin-top:16px}
.convTools{flex-wrap:wrap;display:flex;gap:8px;margin:16px 0 10px}
.convTools input{flex:1;min-width:0;font:15px/1.3 var(--sans);padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:var(--surface);color:var(--ink)}
.convTools button{font:14px/1 var(--sans);padding:0 14px;min-height:var(--tap);border:1px solid var(--line);border-radius:10px;background:var(--surface-2);color:var(--ink)}
.chips{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin:0 0 12px}
.chips button{font:13px/1 var(--sans);padding:8px 12px;border:1px solid var(--line);border-radius:999px;background:var(--surface);color:var(--mute)}
.chips button:hover{color:var(--ink);border-color:var(--mute)}
.chips button[aria-pressed=true]{background:var(--accent-soft);border-color:var(--accent);color:var(--ink)}
.chips button.chipAction{margin-left:auto;color:var(--ink);font-weight:500}
.srow .smeta{grid-column:1;font:12px/1.4 var(--mono);color:var(--faint)}
.srow .sdots{grid-column:2;grid-row:1/span 3;font-size:18px;color:var(--mute);padding:0 4px}
.srow{display:grid;grid-template-columns:1fr auto;column-gap:10px;align-items:center;width:100%;text-align:left;padding:12px 14px;min-height:var(--tap);background:transparent;border:0;border-bottom:1px solid var(--hair);color:var(--ink);font:15px/1.35 var(--sans);cursor:pointer}
.srow:last-child{border-bottom:0}
.srow:hover{background:var(--surface-2)}
.srow .slabel{font-weight:500}
.srow .svalue{grid-column:1;font:13px/1.4 var(--sans);color:var(--mute);white-space:pre-line}
.srow .schev{grid-column:2;grid-row:1/span 2;color:var(--faint);font-size:20px}
.srow.danger{color:var(--bad);justify-content:center;grid-template-columns:1fr;text-align:center}
.sheet{max-height:calc(100dvh - 48px);overflow-y:auto;overscroll-behavior:contain;border:0;border-radius:14px;padding:0;max-width:330px;width:calc(100% - 36px);background:var(--surface);color:var(--ink);box-shadow:var(--shadow)}
/* A scrim darkens in both light and dark UIs, so this one stays fixed
   rather than following --ink, which inverts. */
.reading-tools{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:8px 20px;border-bottom:1px solid var(--line)}
.reading-tools button{min-height:44px;padding:8px 12px;background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:8px}

.answer-card{border:1px solid var(--line);border-inline-start:3px solid var(--accent);border-radius:10px;background:var(--surface-2);padding:16px 20px;margin:24px 0;overflow-wrap:anywhere}
.answer-card-title{font:600 12px/1.5 var(--sans);letter-spacing:.06em;text-transform:uppercase;color:var(--accent);margin-bottom:8px}
.answer-card>:last-child{margin-bottom:0}.answer-card p:first-of-type{margin-top:0}
.found-message{outline:2px solid var(--accent);outline-offset:4px}
::selection{background:var(--accent);color:var(--on-accent)}
textarea,input{caret-color:var(--accent)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
@media(forced-colors:active){button,input,textarea{border:1px solid ButtonText}}
.sheet::backdrop{background:rgba(0,0,0,.55)}
.sheet form{padding:19px 20px 15px;display:flex;flex-direction:column;max-height:calc(100dvh - 48px);box-sizing:border-box;overflow:hidden}
.sheet p{flex-shrink:0;max-height:55dvh;overflow-y:auto;margin:0 0 14px;font:16px/1.45 var(--sans)}
.sheet input{width:100%;font:16px/1.4 var(--sans);padding:11px 12px;border:1px solid var(--line);border-radius:9px;background:var(--bg);color:var(--ink)}
.sheetChoices{overflow-y:auto;min-height:0;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;touch-action:pan-y;display:flex;flex-direction:column;gap:7px;margin-top:4px}
#sheetArea{width:100%;box-sizing:border-box;background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:10px;padding:10px 12px;font:16px/1.5 var(--sans);resize:vertical}
.sheetChoices button{flex-shrink:0;display:flex;flex-direction:column;align-items:flex-start;gap:3px;min-height:var(--tap);font:15px/1.25 var(--sans);text-align:left;padding:11px 13px;border:1px solid var(--line);border-radius:10px;background:var(--surface);color:var(--ink)}
.sheetChoices button .sub{font:13px/1.35 var(--sans);color:var(--mute);white-space:pre-line}
.sheet p{white-space:pre-line}
.sheetChoices button.danger{color:var(--bad);border-color:var(--bad)}
.sheetActions{flex-shrink:0;position:sticky;bottom:-15px;background:var(--surface);padding-block:10px;display:flex;gap:8px;justify-content:flex-end;margin-top:15px}
.sheetActions button{min-height:var(--tap);font:500 15px/1 var(--sans);padding:12px 15px;border-radius:10px;border:1px solid var(--line);background:var(--surface);color:var(--mute)}
.sheetActions button.primary{border-color:var(--accent);background:var(--accent);color:var(--on-accent)}
.sheetActions button.danger{border-color:var(--bad);background:var(--bad);color:var(--bg)}
.cursor::after{content:"\2007";background:var(--ink);animation:blink 1s steps(2,start) infinite;margin-left:1px}
@keyframes blink{to{visibility:hidden}}

/* Composer */







/* Conversations */
/* Four actions and a title do not fit one phone-width row: the select was
   squeezed to a single character. It wraps instead, taking a full row of its
   own when the row is narrow. */
.bar{flex:none;display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:9px 20px;border-bottom:1px solid var(--hair);font-size:13px;color:var(--mute)}
.bar button{flex:none;white-space:nowrap;font:13px/1 var(--sans);padding:7px 11px;border:1px solid var(--line);border-radius:8px;background:var(--surface);color:var(--mute)}
.bar{min-height:var(--tap)}
@media (max-width:520px){ .join{padding-top:9vh} .log{padding:14px 15px 6px} header,.bar{padding-left:15px;padding-right:15px}
  /* Four buttons beside the field left it three words wide on a phone
     (PAVI, 2026-09-14). The field takes the whole first row; the buttons
     sit under it, Send at the right. */
      }

.bubble p { margin: .65em 0; }
.bubble blockquote { margin: 1em 0; padding-left: 1em; border-left: 3px solid var(--accent); color: var(--mute); }
.bubble .answer-table { overflow-x: auto; margin: 1em 0; }
.bubble table { border-collapse: collapse; width: 100%; }
.bubble th,.bubble td { padding: .5em .75em; border-bottom: 1px solid var(--line); text-align: left; min-width: 5em; }
.bubble .align-right { text-align: right; } .bubble .align-center { text-align: center; }
.code-label { display: flex; align-items: center; justify-content: space-between; gap: 1em; font: .8em var(--mono); color: var(--mute); }
.code-label button { font: inherit; padding: .5em .75em; min-height: 44px; color: var(--ink); background: transparent; border: 1px solid var(--line); border-radius: 8px; cursor: pointer; }
.bubble .code-block pre { margin-top: .25em; }
.bubble pre code { padding: 0; background: none; white-space: pre; }
.hljs-keyword,.hljs-selector-tag,.hljs-literal { color: var(--accent); font-weight: 600; }
.hljs-string,.hljs-number,.hljs-title { color: var(--observed); }
.hljs-comment { color: var(--mute); font-style: italic; }
.answer-sections { font-size: .85em; color: var(--mute); margin-bottom: 1em; }
.answer-sections button { display: block; text-align: left; min-height: 44px; padding: .35em .5em; font: inherit; color: var(--ink); border: 0; border-radius: 6px; background: transparent; cursor: pointer; }

.bubble a { color: var(--accent); text-underline-offset: 3px; }

.outputEditor>textarea{height:30vh}.outputEditor>input{min-height:var(--tap);font:inherit;width:100%;max-width:none;padding:8px;color:var(--ink);background:var(--surface);border:1px solid var(--line);border-radius:6px}
/* Compact chrome is for wide mouse interfaces; touch and hybrid devices keep their targets. */
@media (min-width:900px) and (hover:hover) and (pointer:fine) and (not (any-pointer:coarse)){
 :root{--tap:32px}
 #syncState{min-height:32px}.detailHead{min-height:32px}.detailHead h2{font-size:18px}
 .outputEditor>.detailHead{margin-bottom:8px}.outputEditor>h3{margin:0}.outputEditor>pre{margin:0 0 6px;font-size:14px}
 header{padding:10px 18px}.controls{margin-top:7px;gap:6px 10px}.bar{padding-top:6px;padding-bottom:6px}
 .tap,.detailPage .tap,.reading-tools button,.code-label button,.answer-sections button,.sheetActions button,.convTools button{min-height:32px;padding:6px 10px;font-size:13px;border-radius:7px}
 .roles .role{min-height:28px;padding:5px 10px}
 .sheetChoices button,.srow{min-height:34px;padding:7px 11px;font-size:14px}
 .feature-tip{max-width:430px;margin-top:4px;padding:6px 10px;font-size:12px}
 .side button{min-height:32px;padding:6px 9px;font-size:13px}
 .outputEditor{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px 24px;align-content:start}
 .outputEditor>.detailHead,.outputEditor>h3,.outputEditor>pre{grid-column:1/-1}
 .outputEditor>input{grid-column:1/-1;grid-row:4;width:100%;max-width:none;padding:8px;color:var(--ink);background:var(--surface);border:1px solid var(--line);border-radius:6px}
 .outputEditor>textarea{grid-column:1;grid-row:5;min-height:260px;height:50vh}
 .outputEditor>.bubble{grid-column:2;grid-row:5/8;min-width:0;overflow:auto;max-height:70vh}
 .outputEditor>.via{grid-column:1;margin:0}.outputEditor>.outputActions{grid-column:1;margin:0}
}
@media (min-width:1100px) and (hover:hover) and (pointer:fine) and (not (any-pointer:coarse)){
 .shell{max-width:940px;width:calc(100% - 260px);margin-left:max(244px,calc((100vw - 1200px)/2 + 244px));margin-right:16px}
 .side{display:block;position:fixed;top:0;bottom:0;left:max(12px,calc((100vw - 1200px)/2));width:216px;overflow-y:auto;padding:16px 8px;font:13px/1.35 var(--sans)}
 .side h4,.side h5{margin:12px 8px 6px;font:500 11px/1.2 var(--sans);color:var(--mute)}
 .side button{display:block;width:100%;text-align:left;min-height:32px;padding:6px 9px;border:0;border-radius:7px;background:transparent;color:var(--ink);font:inherit;white-space:normal;overflow-wrap:anywhere}
 .side button:hover{background:var(--surface-2)}.side button[aria-current=true]{background:var(--accent-soft)}.side button.quiet{color:var(--mute)}
 .side .row{display:flex;align-items:flex-start}.side .row button:first-child{flex:1}.side .row button.del{flex:none;width:28px;opacity:0}.side .row:hover button.del,.side .row button.del:focus{opacity:1}
}
/* The workspace fills the window; only the reading measure is bounded. */
@media(min-width:1100px){
 .shell{position:relative;max-width:none;width:calc(100% - 280px);margin:0 0 0 280px;box-shadow:none;border-right:0}
 .side{left:0;width:280px;padding:16px 12px;display:flex;flex-direction:column;overflow:hidden;border-right:1px solid var(--line)}
 .side .sideHistory{overflow-y:auto;min-height:0;flex:1;scrollbar-width:thin;margin-top:8px}
 .side .sideNav{display:grid;grid-template-columns:1fr 1fr;gap:2px;border-bottom:1px solid var(--line);padding-bottom:10px}
 .side .sideSearch{display:flex;gap:4px;margin:8px 0}
 .side .sideSearch input{width:0;flex:1;min-width:0;padding:8px;border:1px solid var(--line);border-radius:7px;background:var(--surface);color:var(--ink);font:16px var(--sans)}
 .side .sideSearch button{width:auto;flex:none}
 .shell .bar{padding-left:24px;padding-right:24px}
}



.sideRestore{display:none}
@media(min-width:1100px){
 :root{--side-width:300px}
 .shell{width:calc(100% - var(--side-width));margin-left:var(--side-width)}
 .side{width:var(--side-width);background:var(--pane);-webkit-backdrop-filter:blur(var(--blur));backdrop-filter:blur(var(--blur))}
 .sideTop{display:flex;align-items:center;justify-content:space-between}.side .sideTop button{width:auto}
 .side .sideNav{display:flex;flex-direction:column;gap:3px}.side .sideNav button{flex:none;text-align:left;border-radius:7px;border:0;overflow-wrap:normal}
 .side .sideNav button[aria-pressed=true]{background:var(--surface-2);color:var(--ink);font-weight:600}
 .side .sideFooter{display:flex;flex-wrap:wrap;border-top:1px solid var(--line);padding-top:8px}.side .sideFooter button{width:auto;color:var(--mute);font-size:12px}
 .side details{margin:4px 0}.side summary{cursor:pointer;padding:8px;overflow-wrap:anywhere}.side details>.row{margin-left:10px}.side details>button{color:var(--mute);padding-left:24px}
 .side .groupMeta{display:block;color:var(--mute);font-size:11px;margin-top:3px}.side .sideHistory>p{padding:8px;color:var(--mute)}
 .sideResize{position:fixed;left:calc(var(--side-width) - 4px);top:0;bottom:0;width:8px;cursor:col-resize;touch-action:none;z-index:5}.sideResize:hover,.sideResize:focus-visible{background:var(--accent-soft)}
 body.sideCollapsed{--side-width:0px}body.sideCollapsed .side{display:none}body.sideCollapsed .sideRestore{display:block;position:fixed;left:12px;top:12px;z-index:6;background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:6px;padding:7px;cursor:pointer}
 .turn.them .bubble>.p,.turn.them .bubble>ul,.turn.them .bubble>ol,.turn.them .bubble>.h{max-width:75ch}
}

#sheet.actionMenu .sheetChoices{gap:0}
#sheet.actionMenu .sheetChoices button{border:0;border-radius:5px;padding:11px 12px;background:transparent;min-height:44px}
#sheet.actionMenu .sheetChoices button+button{border-top:1px solid var(--hair)}
#sheet.actionMenu .sheetChoices button:hover{background:var(--surface-2)}
#sheet.actionMenu .sheetChoices .sub{font-size:12px}
@media(min-width:900px) and (pointer:fine){#sheet.actionMenu .sheetChoices button{padding:9px 12px;min-height:34px}}

.workspacePage .workspaceSave{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}.workspaceDraft{padding:2px 20px 18px;background:var(--surface-2);border-radius:10px;margin:20px 0}.workspaceGrid{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:40px}.workspaceGrid .tap{display:block;margin:8px 0;max-width:100%;text-align:left}.workspaceGrid section{min-width:0}@media(max-width:700px){.workspaceGrid{grid-template-columns:minmax(0,1fr);gap:12px}}.workspaceFocus{outline:2px solid var(--accent);outline-offset:2px}.workspacePage form{display:flex;gap:8px}.workspacePage form input{flex:1;min-width:0}.workspacePage label{display:block;margin:14px 0}.workspacePage input,.workspacePage textarea,.workspacePage select{display:block;width:100%;margin-top:6px;padding:10px;font:16px var(--sans);color:var(--ink);background:var(--surface-2);border:1px solid var(--line);border-radius:7px}.workspacePage{max-width:none}.workspacePage>label,.workspacePage>.bubble{max-width:850px}.workspaceTools{display:flex;gap:8px;flex-wrap:wrap;margin:14px 0}.workspaceRow{padding:10px 0;border-bottom:1px solid var(--line)}.workspaceRow small{display:block;color:var(--mute);margin:5px 0}.workspacePage details{margin:16px 0}.workspacePage summary{cursor:pointer}.workspacePage pre{overflow-wrap:anywhere}


/* Shared workspace frame. Secondary work opens alongside the personal transcript. */





.log .bubble>p,.log .bubble>ul,.log .bubble>ol,.log .bubble>blockquote{max-width:74ch}




@media(min-width:1100px){.detailPage{left:var(--side-width,280px);padding:24px 28px}.discussionPage{padding:16px 24px}body.sideCollapsed .detailPage{left:0}}
@media(min-width:1450px){body:has(.dockPage) .shell{margin-right:440px;max-width:none;width:auto}.detailPage.dockPage{left:auto;width:440px;padding:20px;border-left:1px solid var(--line)}.dockPage.outputEditor{display:block}.dockPage.outputEditor textarea{min-height:220px}.dockPage .detailHead h2{font-size:18px}.dockPage .workspaceTools{gap:6px}.dockPage.workspacePage>label,.dockPage.workspacePage>.bubble{max-width:100%}}


body{font-size:16px;line-height:1.5}
.detailHead h2,.settingsHead h2{font:550 27px/1.2 var(--serif);letter-spacing:-.025em;text-wrap:balance}
.turn .by{font-size:13px;line-height:1.4;margin-bottom:9px;color:var(--mute)}
.turn.me .bubble{width:fit-content;max-width:100%;box-sizing:border-box;padding:12px 18px;border-radius:12px;background:var(--accent-soft)}
.bubble{font-family:var(--reading-font);font-size:var(--reading-size);line-height:1.65}
/* answer-renderer.js wraps every block in a bare div so it can move only the
   blocks that changed. A direct-child selector therefore matches nothing here,
   and the measure ran to the full width of the column: 112 characters at a
   1440px viewport. Descendant selectors hold it at 74. */
.bubble :is(p,ul,ol,blockquote){max-width:70ch}
.bubble p,.turn.them .bubble .p{margin:0 0 1em}
.bubble :is(h1,h2,h3,h4,h5,h6){line-height:1.25;text-wrap:balance;max-width:42ch;scroll-margin-top:24px;font-family:var(--reading-font);font-weight:550;letter-spacing:normal}
/* answer-renderer.js makes an answer's shallowest heading an h2, whatever
   depth the model wrote it at, so ## and ### answers are set alike and the
   outline under the page's h1 never skips a level. */
.bubble h1{font-size:1.53em;margin:1.5em 0 .5em}
.bubble h2{font-size:1.35em;margin:1.5em 0 .5em}
.bubble h3{font-size:1.12em;letter-spacing:-.01em;margin:1.3em 0 .4em}
.bubble :is(h4,h5,h6){font:650 1em/1.35 var(--reading-font);letter-spacing:0;margin:1.2em 0 .3em}
.bubble>div:first-child>:is(h1,h2,h3,h4,h5,h6),.bubble>:is(h1,h2,h3,h4,h5,h6):first-child,.answer-body>div:first-of-type>:is(h1,h2,h3,h4,h5,h6){margin-top:0}
.turn.them .bubble :is(ul,ol){margin:.4em 0 1.2em;padding-left:1.5em}
.turn.them .bubble li{margin:.4em 0;padding-left:.15em}
.bubble li::marker{color:var(--accent)}
/* A top-level section begins on a rule the width of the measure. paintAnswer
   puts every answer inside div.answer-body, so the exemption is for the
   first block of that wrapper; an earlier version exempted "the bubble's
   first child", which is the wrapper itself, and removed every rule. */
.turn.them .answer-body h2{border-top:1px solid var(--line);padding-top:1.1em;max-width:70ch}
.turn.them .answer-body>div:first-of-type>h2{border-top:0;padding-top:0}
/* Two kinds of list, told apart by structure rather than colour. A plain
   list keeps its marker; an item that opens with a bold label and a colon is
   a definition, so the label starts the line and does the marker's job.
   answer-renderer.js decides which is which, because CSS cannot: :first-child
   counts the first element and ignores any text before it. The label stays
   in ink: the accent means "press this", and a label cannot be pressed. */
.turn.them .bubble li.labelled{list-style:none;margin-left:-1.5em;padding-left:0}
.turn.them .bubble li.labelled>strong:first-child{color:var(--ink);font-weight:650}
.bubble blockquote{margin:1.4em 0;padding:4px 0 4px 20px;border-left:1px solid var(--accent);color:var(--ink)}
.bubble blockquote>p:last-child{margin-bottom:0}
.bubble hr{border:0;border-top:1px solid var(--line);margin:28px 0;max-width:70ch}
.bubble .answer-table{margin:24px 0;border:1px solid var(--line);border-radius:10px}
.bubble table{font-size:.9em;line-height:1.5}.bubble th{background:var(--surface-2);font-weight:650}
.bubble th,.bubble td{padding:12px 16px;vertical-align:top}.bubble tr:last-child td{border-bottom:0}
.turn.them .bubble pre{padding:18px;font-size:.85em;line-height:1.6;border-radius:10px}
.code-label{margin-top:22px;font:13px/1.4 var(--sans)}
.display-maths{margin:18px 0;padding:8px 2px}
.sources button.quiet{appearance:none;border:0;background:transparent;color:var(--mute);font:14px/1.4 var(--sans);padding:6px 8px;cursor:pointer;border-radius:6px}.sources button.quiet:hover{color:var(--accent);background:var(--surface-2)}
/* The answer's actions were grey text at body weight directly under its last
   sentence, so they read as a sentence. A rule ends the answer; the controls
   sit below it and take a hit area of their own. */



.turn.them .via,.turn.them .via>details{max-width:70ch}
/* Every disclosure has the same opening gesture and a visible content boundary. */
details:where(:not(#answerOptions)){border:1px solid var(--line);border-radius:10px;padding:0 14px;margin:16px 0;color:var(--ink)}
details:where(:not(#answerOptions))>summary{list-style:none;display:flex;align-items:center;gap:10px;min-height:44px;padding:4px 0;box-sizing:border-box;cursor:pointer;font:600 14px/1.4 var(--sans);color:var(--ink);width:auto}
summary::-webkit-details-marker{display:none}
details:where(:not(#answerOptions))>summary:before{content:'';width:6px;height:6px;flex:none;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(-45deg);transition:transform .16s ease;color:var(--mute);margin-right:3px}
details[open]:where(:not(#answerOptions))>summary:before{transform:rotate(45deg)}
details[open]:where(:not(#answerOptions))>summary{border-bottom:1px solid var(--line);margin-bottom:14px}
details[open]:where(:not(#answerOptions)){padding-bottom:14px}
details:where(:not(#answerOptions))>summary:hover{color:var(--accent)}
details details{margin:12px 0}
/* A way into the answer, not its headline. With the sections ruled it was the
   only boxed thing left in an answer, so it is set as a label and a list. */
.answer-sections{max-width:70ch;background:transparent;border:0;border-radius:0;padding:0;margin:0 0 1.8em}
.answer-sections>summary{font:500 12px/1.4 var(--sans);letter-spacing:.06em;text-transform:uppercase;color:var(--mute);min-height:0;padding:2px 0}
.answer-sections[open]>summary{border-bottom:0;margin-bottom:6px}
.answer-sections button{padding:5px 0;font-size:14px;line-height:1.45;width:100%;color:var(--accent)}
.answer-sections button:hover{background:transparent;text-decoration:underline;text-underline-offset:3px}
.turn .think{border:1px solid var(--line);padding:0 14px}
.turn .think>summary{font:600 14px/1.4 var(--sans);color:var(--ink)}
.turn .think div{font:15px/1.6 var(--sans)}





.side{font-size:14px}.sideTop{padding-bottom:14px}.side .sideNav{margin-bottom:24px}
.side button{font-size:14px}.side .sideGroupLabel{font-family:var(--sans)}
.side details{border:0;border-radius:0;padding:0}.side details>summary{font-size:14px;padding:6px 8px}
.side details[open]{padding-bottom:0}.side details[open]>summary{border:0;margin-bottom:4px}
.detailPage{font-size:16px;line-height:1.6}.detailPage>p,.detailPage>pre:not(.requestData),.detailPage>details{max-width:70ch}
.detailHead{margin-bottom:28px;border-bottom:1px solid var(--line);padding-bottom:18px;align-items:center;gap:20px;min-height:48px;margin-bottom:24px;padding-bottom:16px}
.detailPage h3{font-size:18px;line-height:1.35;font-weight:650;margin:28px 0 10px}
.detailPage pre{font:17px/1.65 var(--sans)}
.settingsHead{background:transparent;padding:24px 24px 16px;align-items:center;min-height:48px}.settingsHead .settingsWho:empty{display:none}.settingsBody{padding:12px 24px 36px}
.settingsBody h3{font:650 16px/1.4 var(--sans);letter-spacing:0;text-transform:none;color:var(--ink);margin:26px 0 10px}
.srow{padding:16px;font-size:16px}.srow .smeta{font:13px/1.5 var(--sans);color:var(--mute);margin-top:4px}
.settingsBody .group{background:var(--surface);border-radius:10px}
.settingsPage>*{max-width:760px}
#convBody .workspaceNav{margin-bottom:24px}.workspaceNav button{font-weight:600}
.workspaceRow{padding:16px 0}.workspaceDraft{padding:4px 20px 20px}







.feature-tip{max-width:none;margin:16px 0 0;padding:12px 0;border-top:1px solid var(--line);font-size:14px;line-height:1.5;text-align:left;text-decoration:none}
.feature-tip:hover{color:var(--accent)}
#sheet.actionMenu{border-radius:16px}#sheet.actionMenu .sheetText{font:550 23px/1.25 var(--serif)}
#sheet.actionMenu .sheetChoices button{font-size:16px;padding:14px 12px;border-radius:0}
#sheet.actionMenu .sheetChoices button:hover{border-radius:8px}


@media(min-width:1100px){
 .settingsPage{left:var(--side-width,300px);padding:0 24px;background:var(--bg)}
 body.sideCollapsed .settingsPage{left:0}
 .settingsPage>*{max-width:760px}.settingsHead{padding:24px 0 16px}.settingsBody{padding:16px 0 40px}
 .detailPage:not(.discussionPage):not(.dockPage){padding:0 max(24px,calc((100vw - var(--side-width,300px) - 760px)/2)) 40px}
 body.sideCollapsed .detailPage:not(.discussionPage):not(.dockPage){padding:0 max(24px,calc((100vw - 760px)/2)) 40px}
 .detailPage:not(.discussionPage):not(.dockPage)>.detailHead{top:0;padding:24px 0 16px}
}
@media(max-width:700px){
 .detailHead h2,.settingsHead h2{font-size:24px}
 .bubble{font-size:var(--reading-size);line-height:1.6}.bubble h1{font-size:1.53em}.bubble h2{font-size:1.35em}.bubble h3{font-size:1.12em}
 .feature-tip{font-size:14px}
 .detailHead{margin-bottom:20px}
 .settingsHead{padding:20px 18px 16px}.settingsBody{padding:12px 18px 30px}
}
@media(prefers-reduced-motion:reduce){details>summary:before{transition:none}}

/* A compact navigation shelf leaves the sidebar to its conversations.
   PAVI, 2026-09-23: "everything just blends together". One filled button,
   quiet labels for the dates, the list in ink, the footer set apart with
   icons, and titles on up to two lines rather than cut at one. */
@media(min-width:1100px){
 .side{padding:16px 14px 12px;gap:0}
 .side .sideTop{padding:0 0 12px}.side .sideTop h4{text-transform:none;letter-spacing:-.02em;font:650 19px var(--sans);margin:0 8px}
 .side .sideNew{margin:0 0 14px;padding:9px 12px;background:var(--accent);color:var(--on-accent);border:1px solid var(--accent);border-radius:9px;text-align:left;font-weight:600;display:flex;align-items:center;gap:8px}
 .side .sideNew:hover{background:var(--accent);filter:brightness(1.08)}
 .side .sideNew svg,.side .sideFooter svg,.side .row svg,.side .sideSearch svg{width:16px;height:16px;flex:none}
 .side .sideSearch{position:relative;margin:0 0 12px}.side .sideSearch input{font:14px var(--sans);padding:9px 36px 9px 10px;width:100%;background:var(--surface-2);border-color:transparent}.side .sideSearch button{position:absolute;right:2px;top:2px;padding:6px 8px;min-height:30px;color:var(--mute);display:flex;align-items:center}
 .side .sideNav{display:grid;grid-template-columns:1fr 1fr 1fr;gap:2px;margin:0 0 12px;padding:3px;background:var(--surface-2);border-radius:8px}
 .side .sideNav button{text-align:center;padding:7px 2px;font-size:13px;min-width:0;line-height:1.2}
 .side .sideNav button[aria-pressed=true]{background:var(--surface);box-shadow:0 1px 3px #0000000d}
 .side .sideHistory{padding:4px 6px 6px;margin-left:-6px;margin-right:-6px}.side .sideHistory>button{padding:10px 12px;line-height:1.4;margin:2px 0;text-align:left;border-radius:8px}
 .side .sideHistory .sideRoom{position:relative;padding-left:18px}.side .sideRoom.hasUnread:before{content:'';position:absolute;width:5px;height:5px;border-radius:50%;background:var(--accent);left:5px;top:18px}
 .side .sideRoom[aria-current=true]{background:var(--surface-2);font-weight:600}.side .groupMeta{font-size:12px;color:var(--mute);margin-top:3px}
 .side .sideFooter{border-top:1px solid var(--line);padding-top:10px;margin-top:6px;gap:0}.side .sideFooter button{padding:7px 10px;min-height:32px;display:flex;align-items:center;gap:10px;color:var(--ink-dim)}
 .side .sideFooter button:hover{color:var(--ink)}
 /* Compact topic phrases wrap naturally. The original title stays available
    on hover, without ellipses or mid-word clipping. */
 .side .sideHistory .row button:first-child{white-space:normal;line-height:1.35;padding:7px 10px}
 .side .sideHistory .row .rowTitle{display:block;overflow-wrap:anywhere;text-wrap:pretty}
 .side .sideHistory .row{align-items:center;border-radius:8px;position:relative}
 .side .sideHistory .row:hover{background:var(--surface-2)}
 /* The selected row is highlighted whole, not only its title: the bin and
    options beside it held their space and cut the tint short. */
 .side .sideHistory .row:has(>button[aria-current=true]){background:var(--accent-soft)}
 .side .sideHistory .row>button[aria-current=true]{background:transparent}
 .side .sideHistory .row button:first-child:hover{background:transparent}
 /* The bin and the options sit over the row's end while it is hovered or
    focused, so a title has the whole width the rest of the time. */
 .side .sideHistory .row button.del{position:absolute;right:4px;top:50%;transform:translateY(-50%);width:28px;display:flex;align-items:center;justify-content:center;min-height:28px;padding:6px 0;color:var(--mute);background:inherit;opacity:0;pointer-events:none}
 .side .row:hover button.del,.side .row:focus-within button.del{opacity:1;pointer-events:auto}
 /* The title's end fades under them rather than rewrapping: reserving
    their width on hover moved a title to a second line and every row below
    it down (PAVI, 2026-09-23: "makes everything jiggle"). */
 .side .sideHistory .row:hover .rowTitle,.side .sideHistory .row:focus-within .rowTitle{-webkit-mask-image:linear-gradient(to left,transparent 62px,#000 90px);mask-image:linear-gradient(to left,transparent 62px,#000 90px)}
 /* Selection was a 10% tint of the accent and nothing else, which is what
    hover already looks like. */
 .side .sideHistory button[aria-current=true]{background:var(--accent-soft);color:var(--accent);font-weight:600}
 .side .sideHistory h5{margin:20px 10px 6px;font:600 11px/1.2 var(--sans);letter-spacing:.06em;text-transform:uppercase;color:var(--mute)}
 /* The header sat flush to the shell while the transcript sits in a 900px
    column centred in the log, so the title and the first word of every
    answer began at different places. This is that column's own left edge;
    the log's symmetric padding cancels, so the two agree at every width
    from 1100px up. 28px is the log's own floor. */
}
/* Action cards under an answer, a fired reminder at the end of its
   conversation, and the memory page (2026-09-23). One quiet box with a label,
   the words, and at most three buttons; the first is the action. */
/* A figure no page carries, marked in place (2026-09-23). */
.unverifiedFigure{text-decoration:underline dotted var(--caution);text-decoration-thickness:1.5px;text-underline-offset:3px;cursor:help}
/* The subject card: one per screen, raised, for what the screen is about
   (from HQPe Control, 2026-09-23). Its parts are divided by hairlines. The
   section card is quieter on purpose: flat, a faint tint and a hairline, no
   shadow, so the subject stays the one focal point. Answers are never
   boxed. check-desktop counts subject cards. */
.subjectCard{position:relative;box-sizing:border-box;max-width:var(--column);padding:24px 26px;border:1px solid var(--subject-line);border-radius:var(--card-r);background:var(--subject-bg);box-shadow:var(--subject-shadow);-webkit-backdrop-filter:blur(var(--blur));backdrop-filter:blur(var(--blur))}
.subjectCard>.part{margin-top:18px;padding-top:18px;border-top:1px solid var(--line)}
.subjectCard .cardEyebrow{display:flex;align-items:center;justify-content:space-between;gap:12px;font:600 11px/1.2 var(--sans);letter-spacing:.06em;text-transform:uppercase;color:var(--mute)}
.sectionCard{box-sizing:border-box;padding:16px 18px;border:1px solid var(--line);border-radius:calc(var(--card-r) - 2px);background:var(--section-bg)}
.sectionCard+.sectionCard{margin-top:16px}
@media(max-width:720px){.subjectCard{padding:18px}.sectionCard{padding:14px 16px}}
.actionCard{max-width:70ch;margin:14px 0 4px;padding:14px 16px;border:1px solid var(--line);border-radius:calc(var(--card-r) - 2px);background:var(--section-bg)}
.reminderBanner{max-width:70ch;margin:8px 0 24px;padding:14px 16px;border:1px solid var(--line);border-radius:calc(var(--card-r) - 2px);background:var(--section-bg)}
.actionCard .cardKind,.reminderBanner .cardKind{font:600 11px/1.2 var(--sans);letter-spacing:.06em;text-transform:uppercase;color:var(--mute);margin:0 0 6px}
.actionCard .cardTitle,.reminderBanner .cardTitle{margin:0;font:500 16px/1.45 var(--sans);color:var(--ink);white-space:pre-wrap}
.actionCard .cardFacts{margin:4px 0 0;font:14px/1.45 var(--sans);color:var(--ink-dim)}
.actionCard .cardBody{margin:8px 0 0;padding:8px 10px;border-radius:7px;background:var(--surface-2);font:14px/1.5 var(--sans);color:var(--ink-dim);white-space:pre-wrap;max-height:9.5em;overflow:auto}
.actionCard .cardActions,.reminderBanner .cardActions{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:12px}
.actionCard .cardActions button,.reminderBanner .cardActions button{min-height:34px;padding:6px 12px;border-radius:8px;border:1px solid var(--line);background:var(--surface);color:var(--ink);font:500 14px var(--sans);cursor:pointer}
.actionCard .cardActions button.primary,.reminderBanner .cardActions button.primary{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.actionCard .cardActions button.quiet,.reminderBanner .cardActions button.quiet{border-color:transparent;background:transparent;color:var(--mute)}
.actionCard .cardDone{font:500 14px/1.4 var(--sans);color:var(--ink-dim)}
.actionCard .cardForm{display:grid;gap:10px}
.actionCard .cardField{display:grid;gap:4px;font:13px/1.3 var(--sans);color:var(--mute)}
.actionCard .cardField input{font:15px/1.4 var(--sans);color:var(--ink);background:var(--surface-2);border:1px solid var(--line);border-radius:7px;padding:8px 10px}
.actionCard .cardField textarea{font:15px/1.4 var(--sans);color:var(--ink);background:var(--surface-2);border:1px solid var(--line);border-radius:7px;padding:8px 10px;min-height:6em;resize:vertical}
.actionCard .cardField:has(input[type=checkbox]){grid-template-columns:auto 1fr;align-items:center;gap:8px}
.actionCard .cardField:has(input[type=checkbox]) span{order:2;color:var(--ink)}
.empty .memoryCard{margin:0 0 28px}
.via .knownLink{background:none;border:0;padding:0;min-height:0;font:inherit;color:var(--accent);cursor:pointer;text-decoration:underline;text-underline-offset:2px}
.memoryPage .memoryHero{max-width:none;margin:8px 0 20px}
.memoryPage .memorySum{margin:8px 0 0;font:600 22px/1.25 var(--serif);color:var(--ink)}
.memoryPage .memoryIntro{max-width:62ch;margin:8px 0 0;color:var(--ink-dim);line-height:1.5}
.memoryPage .memorySection{margin:0 0 16px}
.memoryPage .memorySection .memoryRow:last-of-type{border-bottom:0}
.memoryPage .memorySection h3{font:600 11px/1.2 var(--sans);letter-spacing:.06em;text-transform:uppercase;color:var(--mute);margin:0 0 8px}
.memoryPage .memoryNote{margin:0 0 8px;font-size:14px;color:var(--mute);max-width:62ch}
.memoryPage .memoryRow{padding:10px 0;border-bottom:1px solid var(--line)}
.memoryPage .memoryLine{margin:0;font:16px/1.45 var(--sans);color:var(--ink)}
.memoryPage .memoryMeta{margin:3px 0 0;font:13px/1.4 var(--sans);color:var(--mute)}
.memoryPage .memoryMeta .turnLink{background:none;border:0;padding:0;min-height:0;font:inherit;color:var(--accent);cursor:pointer;text-decoration:underline;text-underline-offset:2px}
.memoryPage .memoryButtons{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.memoryPage .memoryButtons .tap.primary{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.memoryPage .memoryButtons .tap.quiet{color:var(--mute)}
/* The conversation's contents in the margin beside the transcript, and a
   catch-up at its top on request (PAVI, 2026-09-23: "can this always be a
   toc for everything in the page?"). */
#outline{position:fixed;right:20px;top:84px;bottom:120px;overflow:auto;z-index:3;font:13px/1.4 var(--sans);padding:4px 4px 12px}
#outline h2{font:600 11px/1.2 var(--sans);letter-spacing:.06em;text-transform:uppercase;color:var(--mute);margin:0 8px 8px}
#outline .outlineList{display:grid;gap:1px;border-left:1px solid var(--line)}
#outline .outlineList button{display:block;width:100%;text-align:left;background:transparent;border:0;border-left:2px solid transparent;border-radius:0 6px 6px 0;margin-left:-1px;padding:5px 8px 5px 12px;color:var(--ink-dim);font:inherit;min-height:0;cursor:pointer}
#outline .outlineGroup{margin:0;padding:6px 0;border:0;background:none;border-radius:0}
#outline .outlineGroup>summary{font:600 13px/1.4 var(--sans);color:var(--ink);padding:0;min-height:28px;cursor:pointer;display:flex;gap:8px;align-items:baseline}
#outline .outlineGroup>summary:before{content:'+';color:var(--mute);transform:none;border:0;width:auto;height:auto;background:none;position:static;font:14px var(--sans)}
#outline .outlineGroup[open]>summary{border-bottom:0;margin-bottom:0}
#outline .outlineGroup[open]>summary:before{content:'−'}
#outline .outlineGroup .o-question{font-size:12px;color:var(--mute);font-weight:400;margin-top:0}
#outline .outlineList button:hover{color:var(--ink);background:var(--surface-2)}
#outline .outlineList .o-question{color:var(--ink);font-weight:600;margin-top:6px}
#outline .outlineList .o-heading{padding-left:24px;font-size:12.5px}
#outline .outlineList .o-deeper{font-style:italic;color:var(--mute)}
#outline .outlineList button[aria-current=true]{border-left-color:var(--accent);color:var(--accent)}
#outline .oLabel{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
#outline .oMark{display:inline-block;margin:3px 4px 0 0;padding:0 5px;font:500 11px/1.5 var(--sans);color:var(--mute);border:1px solid var(--line);border-radius:4px}
.catchup{margin:0 0 2.2em}
.catchup .convTitle{margin:8px 0 0;font:600 26px/1.2 var(--serif);letter-spacing:-.015em;color:var(--ink)}
.catchup .convMeta{margin:6px 0 0;font:14px/1.4 var(--sans);color:var(--mute)}
.catchup .catchupAsk{margin-top:14px;min-height:34px;padding:6px 14px;border:1px solid var(--accent);border-radius:8px;background:var(--accent);color:var(--on-accent);font:500 14px var(--sans);cursor:pointer}
.catchup .catchupHead{display:flex;align-items:center;justify-content:space-between;gap:8px}
.catchup .catchupHead button{min-height:0;padding:4px 10px;border:1px solid var(--line);border-radius:7px;background:transparent;color:var(--mute);font:500 13px var(--sans);cursor:pointer}
.catchup h2{font:600 11px/1.2 var(--sans);letter-spacing:.06em;text-transform:uppercase;color:var(--mute);margin:0}
.catchup h3{font:600 11px/1.2 var(--sans);letter-spacing:.06em;text-transform:uppercase;color:var(--mute);margin:14px 0 4px}
.catchup .catchupItem{margin:4px 0;line-height:1.5}
.catchup .catchupStale{font-size:13px;color:var(--mute);margin:6px 0 0}
.catchup .turnLink{background:none;border:0;padding:0 2px;min-height:0;font:inherit;font-size:.88em;color:var(--accent);text-decoration:underline;text-underline-offset:2px;cursor:pointer}
@media print{#outline{display:none}}
@media(pointer:coarse){.side .sideSearch input,.side .sideSearch button,.side .sideNav button,.side .sideFooter button{min-height:44px}.side .sideHistory .row button.del{opacity:1;pointer-events:auto;position:static;transform:none;flex:none;min-height:44px;width:40px}.side .sideHistory .row:hover .rowTitle,.side .sideHistory .row:focus-within .rowTitle{-webkit-mask-image:none;mask-image:none}}
/* The header's options for this conversation are an icon, so the one word
   "Settings" in the sidebar is the only settings (2026-09-23). */
#more.iconOnly{display:inline-flex;align-items:center;justify-content:center;padding:6px 8px}#more.iconOnly svg{width:20px;height:20px}

/* ── Frame ─────────────────────────────────────────────────────────────────
   Every rule for the conversation header, the transcript column, the composer
   and an answer's receipt and actions lives here and nowhere else. They used
   to be declared in up to six places across web.ts, this file and an inline
   tail, each pass adding a layer, so a change landed partly or not at all.
   One column is shared by the title, the answers and the composer, so the
   page has one left edge at every width. */
:root{--column:680px;--field-edge:color-mix(in srgb,var(--ink-faint) 75%,var(--bg-raised))}
/* 75% is the least share of --ink-faint that puts the composer's edge at 3:1
   against its ground in all ten theme halves; --rule-strong reached it in two. */
::placeholder{color:var(--faint);opacity:1}

.shell>header{flex:none;padding:13px max(24px,calc((100% - var(--column))/2)) 12px;border-bottom:1px solid var(--line);background:var(--head);-webkit-backdrop-filter:blur(var(--blur));backdrop-filter:blur(var(--blur))}
.shell>header .top{display:flex;align-items:center;gap:12px}
.shell>header .convTitle{flex:1;min-width:0;margin:0;font:inherit}
.shell>header #chats{display:block;width:100%;margin:0;padding:0;border:0;background:transparent;color:var(--ink);text-align:left;font:550 24px/1.25 var(--serif);letter-spacing:-.02em;text-wrap:balance;cursor:pointer}
.shell>header .who[hidden],.shell>header #budget{display:none}
.shell>header .topRight{display:flex;align-items:center;gap:8px;flex:none}
.shell>header .topRight>.tap,.shell>header #settings{font:500 13px/1 var(--sans);min-height:var(--tap);padding:0 12px;border:1px solid var(--line);border-radius:8px;background:var(--surface);color:var(--ink);cursor:pointer}
.shell>header .topRight>.tap:hover,.shell>header #settings:hover{border-color:var(--mute)}
.shell>header .note,.shell>header .asBanner{margin-top:10px}

.shell>.log{padding:28px 24px 24px}
.shell>.log>*{max-width:var(--column);margin-left:auto;margin-right:auto}
.shell>.log>button{display:block}
.log .turn{margin-bottom:40px}
/* A question is a paragraph or two; its last one should not carry the
   paragraph spacing that made the bubble heavier underneath than above. */
.turn.me .bubble>:last-child,.turn.me .bubble>:last-child>:last-child{margin-bottom:0}

form.ask{flex:none;display:flex;align-items:flex-end;gap:4px;box-sizing:border-box;width:calc(100% - 48px);max-width:var(--column);margin:10px auto calc(16px + env(safe-area-inset-bottom));padding:6px;border:1px solid var(--field-edge);border-radius:16px;background:var(--surface);box-shadow:var(--shadow)}
form.ask:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft),var(--shadow)}
form.ask>.controls{display:none}
form.ask textarea{flex:1 1 auto;min-width:0;min-height:max(var(--tap),40px);max-height:40vh;box-sizing:border-box;margin:0;padding:10px 8px;border:0;background:transparent;color:var(--ink);font:calc(17px * var(--read, 1))/1.45 var(--sans);resize:none}
form.ask textarea:focus{outline:none}
form.ask button{flex:none;display:inline-flex;align-items:center;justify-content:center;min-height:max(var(--tap),40px);margin:0;border:0;border-radius:11px;font:500 15px/1 var(--sans);cursor:pointer}
form.ask button.icon{width:max(var(--tap),40px);min-width:max(var(--tap),40px);height:max(var(--tap),40px);padding:0;background:transparent;color:var(--mute)}
form.ask button.icon:hover{background:var(--surface-2);color:var(--ink)}
form.ask button.icon svg{display:block;margin:0}
form.ask #searchControls{padding:0 10px;background:transparent;color:var(--mute);font:500 13px/1 var(--sans)}
form.ask #searchControls:hover{background:var(--surface-2);color:var(--ink)}
form.ask #searchControls[data-active=true]{color:var(--accent);background:color-mix(in srgb,var(--accent) 14%,transparent)}
form.ask #say{padding:0 18px;background:var(--accent);color:var(--on-accent)}
form.ask #say.stop{background:var(--bad)}
form.ask button[disabled]{opacity:.45}
form.ask #speak[aria-pressed=true]{color:var(--observed);background:var(--ok-soft)}
form.ask #photo,form.ask #doc{display:none}

/* The receipt is a footnote to the answer, not a panel: one muted line. */
.answerReceipt{max-width:70ch;margin:18px 0 0;padding:0;border:0;border-radius:0;background:transparent;color:var(--mute);font:13px/1.5 var(--sans)}
.answerReceipt>summary{flex-wrap:wrap;column-gap:12px;row-gap:2px;width:fit-content;min-height:32px;font:400 13px/1.4 var(--sans);color:var(--mute)}
.answerReceipt>summary:before{display:inline-block}
.answerReceipt[open]>summary{border-bottom:0;margin-bottom:6px}
.answerReceipt .via{margin:0;font-size:14px;line-height:1.55}
.turn .via button.which{position:relative;padding:0 0 0 6px;border:0;background:none;color:var(--faint);font:inherit;text-decoration:underline;text-underline-offset:3px;cursor:pointer}

/* An answer's actions are buttons that look like buttons. Go deeper is the
   one that carries the accent, because it is the one that spends. */
.acts{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:14px;max-width:70ch}
.acts button,.acts a{display:inline-flex;align-items:center;gap:7px;min-height:36px;padding:0 12px;border:1px solid var(--line);border-radius:9px;background:var(--surface);color:var(--ink);font:500 13px/1 var(--sans);text-decoration:none;cursor:pointer}
.acts button svg{flex:none;width:16px;height:16px}
.acts button:hover,.acts a:hover{background:var(--surface-2);border-color:var(--mute)}
.acts button.deeper{color:var(--accent);border-color:color-mix(in srgb,var(--accent) 45%,var(--line))}
.acts button.askWeb{color:var(--observed);border-color:var(--observed)}
.acts .judge{display:inline-flex;gap:2px;align-items:center;margin-left:auto;font:12px/1 var(--sans);color:var(--faint)}
.acts .judge button.mark{min-height:32px;padding:0 8px;border-color:transparent;background:transparent;color:var(--faint);font:15px/1 var(--sans)}
.acts .judge button.mark:hover{color:var(--ink);border-color:var(--line)}

.by .editQuestion{position:relative;appearance:none;margin-left:10px;padding:4px 8px;border:0;border-radius:6px;background:transparent;color:var(--mute);font:12px/1 var(--sans);cursor:pointer}
@media(hover:hover) and (pointer:fine){.by .editQuestion{opacity:0}.turn:hover .editQuestion,.by:hover .editQuestion,.by:focus-within .editQuestion{opacity:1}}

/* Small controls keep their drawn size and grow their hit area instead, the
   way .tap does, so a 22px link does not push the line it sits on. */
.turn .via button.which::before,.by .editQuestion::before,.turn .sources a::before,.answer-sections>summary::after{content:"";position:absolute;left:-4px;right:-4px;top:50%;height:max(var(--tap),32px);transform:translateY(-50%)}
.turn .sources a,.answer-sections>summary{position:relative}

/* The new conversation's subject card: the greeting and one question to
   try, together (2026-09-23). The family and memory beside it are section
   cards. */
.empty .heroCard{margin:0 0 20px}
.empty .heroCard .suggestion{margin:0}
.empty .heroCard .suggestion .starters button{background:var(--surface-2);border-color:transparent}
.empty .sectionCard{margin:0 0 16px}
.empty .sectionCard .pick:last-child{border-bottom:0}
/* The front page of a new conversation (PAVI, 2026-09-23: "yes please",
   "just one"): a greeting, one question to try, what the family shared, and
   on a phone where you left off. Set lower on the page, since the rest of it
   is empty; quiet labels over each part, as in the sidebar. */
.empty{max-width:var(--column);margin:clamp(16px,14vh,150px) auto 0;padding:8px 0 32px;text-align:left;color:var(--ink)}
.empty .greet{margin:0 0 6px;font:550 32px/1.2 var(--serif);letter-spacing:-.02em;text-wrap:balance;color:var(--ink)}
.empty .lede{margin:0 0 30px;font-size:16px;color:var(--mute)}
.empty section{margin:0 0 28px}
.empty h2{margin:0 0 8px;font:600 11px/1.2 var(--sans);letter-spacing:.06em;text-transform:uppercase;color:var(--mute)}
.empty .suggestHead{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.empty .pick,.empty .starters button{position:relative;display:block;width:100%;box-sizing:border-box;margin:0;padding:12px 30px 12px 0;min-height:var(--tap);border:0;border-bottom:1px solid var(--line);border-radius:0;background:transparent;color:var(--ink);text-align:left;font:500 16px/1.4 var(--sans);cursor:pointer}
.empty .pick:hover,.empty .starters button:hover{color:var(--accent)}
.empty .pick small{display:block;margin-top:3px;font:400 13px/1.4 var(--sans);color:var(--mute)}
.empty .pick::after,.empty .starters button:not(.again)::after{content:"";position:absolute;right:6px;top:calc(50% - 3px);width:6px;height:6px;border-right:1.5px solid var(--mute);border-top:1.5px solid var(--mute);transform:rotate(45deg)}
.empty .starters{display:block;max-width:none;margin:0}
.empty .suggestHead .again{width:auto;min-height:0;border:0;padding:2px 0;background:transparent;font:500 13px/1.4 var(--sans);color:var(--accent);cursor:pointer}
.empty .suggestHead .again:hover{text-decoration:underline;text-underline-offset:3px}
.empty .suggestion .starters button{padding:16px 44px 16px 18px;border:1px solid var(--line);border-radius:12px;background:var(--surface);font:500 17px/1.45 var(--sans)}
.empty .suggestion .starters button:hover{border-color:var(--accent)}
.empty .suggestion .starters button::after{right:20px}

.side .sideBudget{margin:6px 10px 10px;font:12px/1.4 var(--sans);color:var(--mute)}
.side .sideBudget b{font-weight:500;color:var(--ink);font-variant-numeric:tabular-nums}
.side .sideBudget .meter{height:4px;margin-top:6px;border-radius:2px;background:var(--surface-2);overflow:hidden}
.side .sideBudget .meter i{display:block;height:100%;background:var(--accent)}
.side .sideBudget.warn .meter i{background:var(--caution)}

@media(pointer:coarse){.acts button,.acts a{min-height:var(--tap)}.answerReceipt>summary{min-height:var(--tap)}}
.shell>header #mainHelp{display:inline-flex;align-items:center;text-decoration:none}
@media(min-width:1100px){
 body:not(.sideCollapsed) .shell>header #mainHelp{display:none}
 .shell>header #fresh,.shell>header #settings{display:none}
 /* The desktop header stays one line, under 65px (check-desktop.mjs): the
    title is the masthead, and a long one ends in an ellipsis rather than
    pushing the conversation down. */
 .shell>header #chats{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
 body.sideCollapsed .shell>header{padding-left:max(110px,calc((100% - var(--column))/2))}
}
/* On a phone the controls take the first row and the title the second, as a
   large title does on iOS, instead of the title being squeezed beside them. */
@media(max-width:700px){
 .shell>header{padding:10px 16px 12px}
 .shell>header .top{flex-wrap:wrap;gap:6px}
 .shell>header .convTitle{order:2;flex-basis:100%}
 .shell>header .topRight{order:1;width:100%;justify-content:flex-end;gap:6px}
 .shell>header #chats{font-size:22px}
 .shell>.log{padding:20px 16px}
 .log .turn{margin-bottom:32px}
 /* The field on its own row, the tools under it (PAVI's screenshots,
    2026-09-14): a phone's width is for the words being typed. */
 form.ask{flex-wrap:wrap;gap:8px;width:auto;margin:8px 10px calc(10px + env(safe-area-inset-bottom));border-radius:14px} form.ask textarea{flex:1 1 100%;order:0}
 form.ask #attach{order:1} form.ask #searchControls{order:2} form.ask #speak{order:3;margin-left:auto} form.ask #say{order:4}
 form.ask #speak[hidden]+#say,form.ask #speak[hidden]~#say{margin-left:auto}
 .empty .greet{font-size:28px}
}
/* 200% zoom on a phone, or a landscape phone: the header and composer took
   422 of 422 px and left the conversation 40. Here the title is one line and
   the composer stops growing early. */
@media(max-height:520px){
 .shell>header{padding-top:6px;padding-bottom:6px}
 .shell>header .top{flex-wrap:nowrap}
 .shell>header .convTitle{order:0;flex-basis:auto}
 .shell>header .topRight{order:0;width:auto}
 .shell>header #chats{font-size:17px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
 form.ask textarea{max-height:22vh}
}

/* Conversations page: the row opens the conversation; a real button laid over
   its dots opens the row's actions, so the keyboard and VoiceOver reach them. */
.srowWrap{position:relative}
.srowWrap>.srow:last-child{border-bottom:1px solid var(--hair)}
.group>.srowWrap:last-child>.srow{border-bottom:0}
.srowWrap .srowMore{position:absolute;top:0;right:0;bottom:0;width:56px;margin:0;padding:0;border:0;border-radius:0 10px 10px 0;background:transparent;cursor:pointer}
.srowWrap .srowMore:hover{background:var(--surface-2)}

/* Jump to the latest answer: a small round button that sits over the
   bottom-right corner of the transcript without taking a row of its own. It
   was a word-wide pill centred between the transcript and the composer, and on
   a phone it covered a line of the answer being read. On a wide screen it sits
   in the gutter beside the column; on a phone, at the edge. */
.latest-answer{position:relative;z-index:3;flex:none;align-self:flex-end;display:inline-flex;align-items:center;justify-content:center;width:max(var(--tap),40px);height:max(var(--tap),40px);margin:calc(-1 * max(var(--tap),40px) - 8px) max(12px,calc((100% - var(--column))/2 - 60px)) 8px 0;padding:0;border:1px solid var(--line);border-radius:50%;background:var(--surface);color:var(--ink);box-shadow:var(--shadow);cursor:pointer}
.latest-answer[hidden]{display:none}
.latest-answer:hover{background:var(--surface-2)}

/* Where Go deeper was pressed: a folded marker between the two answers, set
   like the contents list, that opens to the words that were sent. */
.reviewFinding{margin-top:18px}.reviewFinding h3{font:650 17px/1.4 var(--sans)}.reviewFinding>div{padding-bottom:10px}.reviewCard>button{appearance:none;margin-top:14px;min-height:44px;padding:8px 14px;border:1px solid var(--line);border-radius:8px;background:var(--surface);color:var(--ink);font:600 14px/1.4 var(--sans);cursor:pointer}.reviewCard>button:hover{border-color:var(--accent)}.reviewCard>button:disabled{opacity:.6;cursor:default}
.log .turn.reviewCard{box-sizing:border-box;padding:22px 24px;margin:24px auto;border:1px solid var(--accent);border-radius:14px;background:var(--surface-2)}
.log .reviewCard h3{margin:0 0 8px;font:700 22px/1.3 var(--sans);color:var(--ink)}
.log .reviewCard>p{margin:0;max-width:65ch;font:16px/1.6 var(--sans);color:var(--ink)}
.log .reviewCard details{margin-top:14px;background:transparent;border:0;padding:0}
.log .reviewCard summary{font:500 14px/1.5 var(--sans);color:var(--mute);padding:4px 0}
.log .reviewCard pre{white-space:pre-wrap;overflow-wrap:anywhere;max-height:240px;overflow:auto;font:13px/1.5 var(--sans)}
@media(max-width:600px){.reviewFinding{margin-top:18px}.reviewFinding h3{font:650 17px/1.4 var(--sans)}.reviewFinding>div{padding-bottom:10px}.reviewCard>button{appearance:none;margin-top:14px;min-height:44px;padding:8px 14px;border:1px solid var(--line);border-radius:8px;background:var(--surface);color:var(--ink);font:600 14px/1.4 var(--sans);cursor:pointer}.reviewCard>button:hover{border-color:var(--accent)}.reviewCard>button:disabled{opacity:.6;cursor:default}
.log .turn.reviewCard{padding:18px}.log .reviewCard h3{font-size:20px}}
.log .turn.deeperMark{margin-top:-16px;margin-bottom:24px;padding:0;border:0;border-radius:0;background:transparent}
.log .turn.deeperMark>summary{font:500 12px/1.4 var(--sans);letter-spacing:.06em;text-transform:uppercase;color:var(--mute);min-height:32px;padding:2px 0}
.log .turn.deeperMark[open]>summary{border-bottom:0;margin-bottom:4px}
.log .turn.deeperMark>p{max-width:70ch;margin:0;padding-left:19px;font:14px/1.5 var(--sans);color:var(--mute)}
@media(pointer:coarse){.log .turn.deeperMark>summary{min-height:var(--tap)}}
/* Balance the answer and its outline as one composition. */
@media(min-width:1100px){
 body.hasOutline .shell>.log{padding-right:264px}
 body.hasOutline .shell>header{padding-left:max(24px,calc((100% - 240px - var(--column))/2));padding-right:max(264px,calc((100% + 240px - var(--column))/2))}
 body.hasOutline form.ask{margin-left:max(24px,calc((100% - 240px - var(--column))/2));margin-right:264px;width:calc(100% - 288px)}
 body.hasOutline .latest-answer{margin-right:max(280px,calc((100% + 240px - var(--column))/2 + 16px))}
}
.contextChoices{margin:20px 0;padding:0;border:0;min-width:0}
.contextChoices legend{font:600 12px/1.4 var(--sans);color:var(--mute);margin-bottom:8px}
.contextChoice{display:flex;align-items:flex-start;gap:12px;padding:14px 0;border-bottom:1px solid var(--line);cursor:pointer}
.contextChoice input{flex:none;width:20px;height:20px;margin:3px 0;accent-color:var(--accent)}
.contextChoice span{display:block;min-width:0}.contextChoice strong{display:block;font-weight:600}.contextChoice small{display:block;color:var(--mute);line-height:1.5;margin-top:3px}
.contextAttempt{margin:16px 0;border:1px solid var(--line);border-radius:12px;padding:0 16px}
.contextAttempt>summary{padding:16px 0;font:600 15px/1.5 var(--sans);overflow-wrap:anywhere}
.contextAttempt>summary:before{content:'+'!important;transform:none!important;border:0!important;width:auto!important;height:auto!important;font:16px var(--sans)}
.contextAttempt[open]>summary:before{content:'−'!important}
.contextAttempt pre{white-space:pre-wrap;overflow-wrap:anywhere;font:15px/1.6 var(--sans);max-width:100%}

/* Conversation commands stay beside their trigger rather than covering the task. */
.conversationActions{position:fixed;inset:auto;margin:0;box-sizing:border-box;width:min(340px,calc(100vw - 16px));max-width:calc(100vw - 16px);max-height:calc(100dvh - 100px);overflow:auto;overscroll-behavior:contain;padding:8px;border:1px solid var(--line);border-radius:12px;background:var(--surface);color:var(--ink);box-shadow:var(--shadow)}
.conversationActions::backdrop{background:transparent;pointer-events:none}
.conversationActions button{display:block;width:100%;min-height:44px;padding:10px 12px;border:0;border-radius:6px;background:transparent;color:inherit;text-align:left;font:400 15px/1.35 var(--sans);cursor:pointer;white-space:normal;overflow-wrap:anywhere}
.conversationActions button:hover,.conversationActions button:focus-visible{background:var(--surface-2);outline:2px solid var(--accent);outline-offset:-2px}
.conversationActions button.danger{color:var(--bad)}
.shell>header #more[hidden]{display:none}
@media(min-width:1100px){
 body.emptyConversation:not(.sideCollapsed) .shell>header:not(:has(#syncState[data-attention=true])) .top{display:none}
 body.emptyConversation:not(.sideCollapsed) .shell>header:not(:has(#syncState[data-attention=true])){padding-bottom:0;border-bottom:0}
 body.emptyConversation:not(.sideCollapsed) .shell>header:not(:has(#syncState[data-attention=true])):has(.note:not([hidden]),.asBanner:not([hidden])){padding-bottom:12px}
}
@media(min-width:900px) and (pointer:fine) and (not (any-pointer:coarse)){.conversationActions button{min-height:34px;padding:7px 10px;font-size:14px}}
@media(max-width:600px){
 .shell>header .top{flex-wrap:wrap;gap:8px}
 .shell>header .convTitle{order:0;flex-basis:100%;min-width:0}
 .shell>header .topRight{order:1;width:100%;justify-content:flex-end}
 .shell>header #chats{font-size:19px}
}

/* Shared reading and control rhythm across the workspaces. */

.detailHead h2{margin:0;line-height:1.25}.detailClose{flex:none}
body:not(.sideCollapsed) .researchTop #researchHistory{display:none}
@media(max-width:1099px){body:not(.sideCollapsed) .researchTop #researchHistory{display:block}}
.answerActions{width:300px;max-height:min(640px,70dvh);padding:10px}
.answerActions details+details{border-top:1px solid var(--line);margin-top:6px;padding-top:6px}
.answerActions summary{font:600 13px/1.4 var(--sans);color:var(--mute);padding:8px 12px;cursor:pointer;list-style:none}
.answerActions summary::-webkit-details-marker{display:none}
.answerActions summary:after{content:'−';float:right}.answerActions details:not([open]) summary:after{content:'+'}
.log .turn .bubble>h2{margin-top:32px;margin-bottom:14px}.log .turn .bubble>h3{margin-top:24px;margin-bottom:10px}
.log .sources{margin-top:20px;line-height:1.65}.log .acts{margin-top:16px}.log .answerReceipt{margin-top:12px}

.groupViewTools .tap{border:0;background:transparent;padding:4px 10px;font-size:13px}

.discussionComposer{padding:12px 0 0}
.discussionComposer>.discussionActions{gap:8px;align-items:center;margin:8px 0}
.discussionComposer>details>summary{padding:6px 0}.discussionMessage .discussionActions{margin:8px 0;font-size:13px}

.mediaTile .mediaActions{justify-content:space-between;margin:12px 0 0}.mediaTile .mediaActions>button:last-child{order:-1;color:var(--accent)}
.mediaTile .mediaPreview img{height:100%;object-fit:contain}
@media(max-width:600px){.answerActions{left:8px!important;right:8px!important;top:auto!important;bottom:calc(var(--workspace-bottom,0px) + 8px)!important;width:auto;max-height:65dvh;border-radius:14px}.detailHead{gap:12px;margin-bottom:18px}.discussionComposer .discussionActions button{min-height:44px}}

.conversationActions.answerActions details{padding:0;margin:0;border:0;border-radius:0;background:transparent;box-shadow:none}
.conversationActions.answerActions details+details{border-top:1px solid var(--line);margin-top:6px;padding-top:6px}
.conversationActions.answerActions summary{display:block;border:0;margin:0;padding:10px 12px;color:var(--ink)}
.conversationActions.answerActions summary:before{display:none!important}.conversationActions.answerActions summary svg{display:none}
.groupSourceJump{display:none}@media(max-width:700px){.groupSourceJump{display:block;min-height:44px;margin-bottom:4px}}

/* Keep evidence and controls together, subordinate to the answer. */
body #shell .answerFooter{width:100%;max-width:none;margin:24px 0 0;border-top:1px solid var(--line);padding-top:12px;min-width:0}
body #shell .answerFooter .sources{display:block;margin:0;min-width:0;font:14px/1.5 var(--sans)}
.answerFooter .sourcesHead{display:flex;flex-wrap:wrap;align-items:center;gap:4px 12px;margin-bottom:4px}
body #shell .sourcesHead .sourcesLead{font:600 14px/1.5 var(--sans);color:var(--ink)}
.answerFooter .sourcesCount{color:var(--mute);font-size:13px}
body #shell .answerFooter :is(.sourceInspect,.sourceExpand){display:inline-flex;align-items:center;min-height:44px;padding:4px 0;border:0;background:transparent;color:var(--mute);font:14px/1.4 var(--sans);cursor:pointer;text-align:left}
body #shell .answerFooter .sourceExpand{margin-left:28px}
body #shell .answerFooter :is(.sourceInspect,.sourceExpand):hover{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
body #shell .answerFooter .sourceList{list-style:none;margin:0;padding:0}
body #shell .answerFooter .sourceList li{margin:0;padding:0}
body #shell .answerFooter .sourceList li[hidden]{display:none}
body #shell .answerFooter .sourceList a{display:grid;grid-template-columns:20px minmax(0,1fr) minmax(0,140px);align-items:baseline;gap:8px;min-height:44px;box-sizing:border-box;padding:4px 0;border:0;color:var(--ink);font:14px/1.5 var(--sans);text-decoration:none}
body #shell .answerFooter .sourceList a::before{display:none}
.answerFooter .sourceNumber{color:var(--mute);font-variant-numeric:tabular-nums}
.answerFooter .sourceTitle{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;overflow-wrap:anywhere}
.answerFooter .sourceDomain{color:var(--mute);font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:right}
.answerFooter .sourceList a:hover .sourceTitle{text-decoration:underline;text-underline-offset:3px}
body #shell .answerFooter .sourceNotice{margin:8px 0 12px;color:var(--ink);font:14px/1.5 var(--sans)}
body #shell .answerFooter .acts{max-width:none;margin:8px 0 0;gap:4px}
body #shell .answerFooter .acts>.tap{min-height:44px;padding:8px;color:var(--mute)}
body #shell .answerFooter .acts>.tap:first-child{margin-left:-8px}
body #shell .answerFooter .acts>.localStudyAction{margin-left:auto}
body #shell .answerFooter .acts>.tap:hover{color:var(--ink);background:var(--surface-2)}
body #shell .answerFooter .answerReceipt{margin:0}
body #shell .answerFooter .answerReceipt>summary{min-height:44px;padding:0;gap:4px 12px}
body #shell .answerFooter .answerReceipt .receiptToggle{color:var(--mute);text-decoration:underline;text-underline-offset:3px}
body #shell .answerFooter .answerReceipt[open] .via{padding:8px 0 12px}
body #shell .answerFooter :is(button,a,summary):focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}
@media(max-width:600px){
 body #shell .answerFooter{margin-top:20px;padding-top:8px}
 .answerFooter .sourcesHead{column-gap:8px}
 body #shell .answerFooter .sourceList a{grid-template-columns:20px minmax(0,1fr);min-height:44px;gap:0 8px;padding:6px 0}
 .answerFooter .sourceDomain{grid-column:2;text-align:left}
 body #shell .answerFooter .acts>.localStudyAction{margin-left:0}
}

/* A menu is a list of actions, with headings that never hide its contents. */
.conversationActions .menuHeading{font:600 11px/1.2 var(--sans);letter-spacing:.06em;text-transform:uppercase;color:var(--mute);padding:6px 12px 3px}
.conversationActions [role=group]+[role=group]{border-top:1px solid var(--line);margin-top:4px;padding-top:4px}
.receiptTools{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
@media(max-width:600px){.conversationActions{left:8px!important;right:8px!important;top:auto!important;bottom:calc(var(--workspace-bottom,66px) + 8px)!important;width:auto;max-height:65dvh;border-radius:14px}}
.conversationActions[role=menu] button{min-height:44px}

/* Research reading hierarchy: detail on demand, important caveats always signposted. */
body #shell .researchTop #settings[hidden]{display:none}
body #shell .titleText{white-space:normal;overflow-wrap:anywhere;text-overflow:clip;display:block}
body #shell .listsBreadcrumb{display:inline-flex;align-items:center;width:fit-content;color:var(--mute);font:12.5px/1.3 var(--sans);min-height:28px;padding:2px 0;margin-bottom:4px;text-decoration:none}
body #shell .listsBreadcrumb:hover{text-decoration:underline}
body #shell .answerFooter details.sources{border:0;border-radius:0;background:transparent;padding:0}
body #shell .answerFooter .sources>summary{display:flex;align-items:center;justify-content:flex-start;min-height:44px;margin:0;padding:6px 0;gap:8px;font:13px/1.4 var(--sans);color:var(--mute);cursor:pointer}
body #shell .answerFooter .sources>summary:before{content:'';display:inline-block;transform:rotate(-45deg)}
body #shell .answerFooter .sources[open]>summary:before{transform:rotate(45deg)}
body #shell .answerFooter .sources:not([open])>:not(summary){display:none}
body #shell .answerFooter .sourcesLead{font-weight:500}
body #shell .answerFooter .sourceInspect{margin:0}
body #shell .answerFooter .evidenceGap{margin:8px 0;border:0;padding:0;background:transparent;color:var(--ink);font:13px/1.5 var(--sans)}
body #shell .answerFooter .evidenceGap>summary{min-height:44px;padding:8px 0;color:var(--caution);cursor:pointer}
body #shell .answerActionBar{display:flex;align-items:flex-start;flex-wrap:wrap;gap:0 16px}
body #shell .answerActionBar .acts{flex:1;margin:0}
body #shell .answerActionBar .answerReceipt{margin-left:auto;min-width:0;max-width:100%}
body #shell .answerActionBar .answerReceipt[open]{flex-basis:100%;margin-left:0}
body #shell .answerActionBar .receiptModel{overflow-wrap:anywhere}
@media(max-width:400px){body #shell .answerActionBar .acts{flex-basis:100%}body #shell .answerActionBar .answerReceipt{margin-left:0}}
#outline .outlineGroup>summary .o-question{font-weight:550;margin:0;min-width:0}
#outline .outlineMarksHeading{border:0;background:transparent;color:var(--mute);font:12px/1.5 var(--sans);padding:6px 0;text-align:left;min-height:32px}
#outline .outlineMarksHeading:hover{color:var(--ink);text-decoration:underline}

.themeSettings{max-width:none}.themeSettings>p,.themeSettings>fieldset{max-width:760px}.themeSettings fieldset{border:0;border-bottom:1px solid var(--line);padding:16px 0;margin:0;display:flex;flex-wrap:wrap;gap:8px 20px}.themeSettings legend{font-weight:600;padding:0}.themeSettings label{display:flex;align-items:center;gap:8px;min-height:44px;cursor:pointer}.themeColourSwatch{width:18px;height:18px;border-radius:50%;background:var(--key);border:3px solid var(--bg);outline:1px solid var(--line)}.themeSettings input{accent-color:var(--accent);width:18px;height:18px}.themeReadingPreview{max-width:760px;padding-top:16px;border-top:1px solid var(--line)}
:root{--reading-font:"Source Sans 3",sans-serif;--reading-size:calc(17px * var(--read,1))}
.detailPage.externalExport{display:block}.externalExport>textarea{width:100%;max-width:72ch;box-sizing:border-box;height:38vh;min-height:220px}.externalExport>select{display:block;font:inherit;color:var(--ink);background:var(--surface);border:1px solid var(--line);border-radius:6px;min-height:var(--tap);padding:8px;margin:16px 0;width:min(100%,24rem)}
#text,.detailPage.outputEditor textarea{font-family:var(--reading-font);font-size:var(--reading-size)}
[data-reading-font=dyslexic] .bubble{line-height:1.85}


.groupNotice{display:flex;align-items:center;gap:16px;justify-content:space-between;margin-top:14px;padding:6px 12px;background:var(--accent-soft);border-radius:10px;font:15px/1.4 var(--sans);color:var(--ink)}
.groupNotice span{overflow-wrap:anywhere}.groupNotice button{border:0;background:transparent;color:var(--accent);font:600 14px var(--sans);min-height:44px;cursor:pointer}
@media(hover:hover) and (pointer:fine){.groupNotice button{min-height:32px}}
.sharedNoticeRow{padding:20px 0;border-bottom:1px solid var(--line)}.sharedNoticeRow p{color:var(--mute);margin:0}.sharedNoticeRow h3{margin:6px 0 14px}.sharedNoticeRow button{margin-right:8px}

.turn .sourcesExtra{display:block;width:100%;margin-top:4px;border:0;background:none;padding:0}.turn .sourcesExtra summary{cursor:pointer;color:var(--mute);padding:6px 0;border:0;background:none;font:13px/1.4 var(--sans)}.sourcesExtra small{display:block;margin:4px 0 8px;color:var(--mute)}.sourcesExtra a{display:block;margin:6px 0}
.requestProgress{display:flex;align-items:center;gap:12px;padding:10px 14px;margin:8px 0 16px;border:1px solid var(--line);background:var(--surface);border-radius:10px;font:14px/1.5 var(--sans)}.requestProgress .progressText{flex:1;min-width:0}.requestProgress .progressDetail{color:var(--mute);font-size:13px;line-height:1.4;margin-top:2px}.requestProgress>small{color:var(--mute);font-variant-numeric:tabular-nums;white-space:nowrap}.requestProgress button{flex:none;font:inherit;color:var(--accent);background:transparent;border:0;min-height:var(--tap);padding:4px 8px;cursor:pointer}

.calculationCard{border:1px solid var(--line);border-left:3px solid var(--accent);border-radius:10px;padding:18px 20px;margin:24px 0;overflow-wrap:anywhere;background:var(--surface,var(--bg))}.calculationCard .tap{min-height:44px;border:1px solid var(--line);border-radius:8px;background:var(--surface);color:var(--ink);font:inherit;padding:8px 14px;cursor:pointer}.calculationCard h3{font:600 16px/1.4 var(--sans);margin:0 0 8px}.calculationCard p{margin:8px 0;line-height:1.5}.calculationCard .calculationLimit{color:var(--mute);font-size:13px}.calculationCard pre{font-size:14px;white-space:pre-wrap;overflow-wrap:anywhere;max-height:20rem;overflow:auto;padding:12px;background:var(--bg);border:1px solid var(--line);border-radius:6px}.calculationCard img{display:block;max-width:100%;height:auto;border:1px solid var(--line);border-radius:6px;margin:12px 0;background:white}.calculationCard a{display:inline-flex;align-items:center;min-height:44px;color:var(--accent)}.calculationCard details{margin-bottom:0}.calculationCard summary{min-height:44px;cursor:pointer}.calculationCard :focus-visible{outline:2px solid var(--accent);outline-offset:3px}@media(max-width:500px){.calculationCard{padding:14px}}
.calculateDialog{width:min(760px,calc(100vw - 32px));max-width:none;max-height:calc(100dvh - 32px);box-sizing:border-box;padding:0;border:1px solid var(--line);border-radius:var(--r-lg,16px);background:var(--surface);color:var(--ink);overflow:hidden}
.calculateDialog::backdrop{background:rgba(0,0,0,.55)}
.calculateDialog form{display:flex;flex-direction:column;max-height:calc(100dvh - 34px);margin:0}
.calculateBody{padding:28px 28px 16px;overflow:auto;overscroll-behavior:contain;min-height:0}
.calculateDialog h2{font:600 28px/1.2 var(--sans);margin:0 0 8px}.calculateDialog p{margin:0 0 20px;line-height:1.5}.calculateIntro{color:var(--mute)}
.calculateDialog label{display:block;font-weight:600;margin-bottom:8px}.calculateDialog textarea{display:block;box-sizing:border-box;width:100%;min-height:128px;resize:vertical;border:1px solid var(--line);border-radius:10px;background:var(--bg);color:var(--ink);padding:14px;font:inherit;line-height:1.5}.calculateDialog textarea::placeholder{color:var(--mute);opacity:1}
.calculateDialog .calculateHint{font-size:14px;color:var(--mute);margin:8px 0 22px}.calculateExamplesTitle{font:600 16px/1.4 var(--sans);margin:0 0 4px}.calculateDialog .calculateExamplesHelp{font-size:14px;color:var(--mute);margin:0 0 12px}
.calculateExamples{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 16px}.calculateExample{display:flex;flex-direction:column;gap:5px;text-align:left;min-height:84px;border:0;border-top:1px solid var(--line);border-radius:0;background:transparent;color:var(--ink);font:inherit;padding:12px 0;cursor:pointer}.calculateExample strong{font-size:15px;font-weight:600}.calculateExample span{color:var(--mute);font-size:14px;line-height:1.4}.calculateExample:hover strong{color:var(--accent)}
.calculateDialog details{margin-top:16px;border-top:1px solid var(--line)}.calculateDialog summary{cursor:pointer;min-height:44px;display:flex;align-items:center;justify-content:space-between;font-size:14px;list-style:none;border:0;border-radius:0;padding:0;text-align:left}.calculateDialog summary::-webkit-details-marker{display:none}.calculateDialog summary::before{display:none}.calculateDialog summary::after{content:'+';font-size:20px}.calculateDialog details[open] summary::after{content:'−'}.calculateDialog details ul{padding-left:20px;margin:0 0 12px;font-size:14px;line-height:1.6}.calculateDialog details li{margin:6px 0}.calculateDialog details p{font-size:14px;color:var(--mute);margin:12px 0}
.calculateFooter{display:flex;align-items:center;gap:16px;justify-content:space-between;border-top:1px solid var(--line);padding:16px 28px;padding-bottom:max(16px,env(safe-area-inset-bottom));background:var(--surface);flex-shrink:0}.calculateDialog .calculateDestination{margin:0;color:var(--mute);font-size:13px;line-height:1.45;max-width:32ch}.calculateActions{display:flex;gap:8px;flex-shrink:0}.calculateActions button{min-height:44px;border:1px solid var(--line);border-radius:9px;background:transparent;color:var(--ink);font:500 15px/1.2 var(--sans);padding:10px 16px;cursor:pointer}.calculateActions .primary{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}.calculateActions button:disabled{opacity:.5;cursor:default}.calculateRestore{min-height:44px;margin-top:12px;border:1px solid var(--line);border-radius:8px;padding:8px 12px;color:var(--ink);background:var(--bg);font:inherit;cursor:pointer}.calculateDialog :is(button,textarea,summary):focus-visible{outline:2px solid var(--accent);outline-offset:3px}
@media(max-width:600px){.calculateBody{padding:20px 20px 12px}.calculateExamples{grid-template-columns:repeat(2,minmax(0,1fr))}.calculateFooter{padding:12px 20px;flex-wrap:wrap;gap:10px;padding-bottom:max(12px,env(safe-area-inset-bottom))}.calculateDialog .calculateDestination{max-width:none;width:100%}.calculateActions{width:100%;justify-content:flex-end}.calculateDialog h2{font-size:24px}}

/* Conversation first: use hierarchy before adding borders. */
#syncState[hidden]{display:none}.side .sideNew{font-weight:600;color:var(--ink);margin:8px 0 18px}.side .sideFooter{display:flex;flex-direction:column;gap:4px;border:0}.side .sideFooter button{text-align:left;font-size:13px}.side .sideNav{border:0}.side .sideSearch{margin-bottom:18px}.side .sideHistory h5{margin-top:22px}
.savedNav{display:flex;flex-direction:column;align-items:stretch;max-width:560px;margin-top:24px}.savedNav>.tap{text-align:left;border:0;border-radius:0;border-bottom:1px solid var(--line);padding:18px 4px;font-size:16px}.savedPage>p{color:var(--mute);max-width:60ch}



.releaseNotice{position:relative;max-width:100%;margin-top:8px;display:flex;gap:12px;align-items:center;padding:4px 10px;border:1px solid var(--line);border-radius:12px;background:var(--bg);color:var(--ink);font:13px/1.4 var(--sans);justify-content:space-between}.releaseNotice button{font:inherit;color:var(--accent);background:transparent;border:0;cursor:pointer;min-height:36px}.conversationCreation{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:18px}.mediaForm .tap{justify-self:start}.mediaForm:has(.mediaBlocked){grid-column:1/-1;max-width:60ch}.mediaBlocked{font-size:16px;line-height:1.6;color:var(--ink)}.mediaPage{max-width:1120px!important;margin:auto}.mediaIntro{color:var(--mute);max-width:60ch}.mediaLayout{display:grid;grid-template-columns:minmax(260px,350px) minmax(0,1fr);gap:32px;align-items:start}.mediaForm{display:grid;gap:12px}.mediaForm label{display:grid;gap:7px;font-size:14px;color:var(--mute)}.mediaForm :is(textarea,select,input){box-sizing:border-box;width:100%;font:inherit;color:var(--ink);background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:12px}.mediaForm textarea{min-height:140px;resize:vertical;line-height:1.6;font-size:16px}.mediaForm select{appearance:none}.mediaPrimary{background:var(--accent)!important;color:var(--on-accent)!important;border-color:var(--accent)!important;justify-self:start}.mediaPreview{min-height:290px;display:grid;place-items:center;border:1px solid var(--line);border-radius:16px;background:var(--surface);overflow:hidden}.mediaPreview :is(img,video){display:block;width:100%;max-height:65vh;object-fit:contain}.mediaPreview video{background:#101319}.mediaPreview p{max-width:30ch;padding:24px;text-align:center;color:var(--mute);line-height:1.6}.mediaActions{display:flex;gap:8px;flex-wrap:wrap;margin:18px 0}.mediaZoom{display:block;overflow:auto;max-height:75vh}.mediaZoom img{width:auto;max-height:none;max-width:none}.mediaStatus{color:var(--mute);line-height:1.6}.mediaLibraryTools{border-top:1px solid var(--line);padding-top:18px}.mediaLibraryTools :is(input,select){box-sizing:border-box;font:inherit;font-size:14px;color:var(--ink);background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:9px 12px;min-width:0}.mediaLibraryTools input{flex:1 1 190px;max-width:360px}.mediaGallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:22px}.mediaTile{border:1px solid var(--line);border-radius:14px;padding:14px;min-width:0}.mediaTile .mediaPreview{min-height:160px;aspect-ratio:4/3;aspect-ratio:4/3;height:180px;min-height:0}.mediaTile .mediaPreview :is(img,video){max-height:220px}.mediaCompare{display:grid;grid-template-columns:1fr 1fr;gap:14px}.mediaCompare figure{margin:0}.mediaCompare figcaption{font-size:13px;color:var(--mute);margin-top:8px}.mediaStrip{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:8px 0 20px}.mediaDetails{border-top:1px solid var(--line);padding-top:16px;overflow-wrap:anywhere}.mediaDetails summary{cursor:pointer;color:var(--mute);padding:8px 0;list-style:none}.mediaDetails dd{margin:4px 0 16px}.mediaDetails dt{color:var(--mute);font-size:12px}.mediaDraftNote{font-size:13px;color:var(--mute);margin:0}.mediaForm .mediaNotify{display:flex;align-items:center;gap:10px;color:var(--ink)}.mediaNotify input{width:18px;height:18px;order:-1;margin:0}.mediaForm .mediaStatus{font-size:13px;margin:0}.mediaDetails summary::-webkit-details-marker{display:none}.mediaDetails summary:before{display:none!important}.mediaDetails summary:after{content:"+";float:right}.mediaDetails[open] summary:after{content:"−"}@media(max-width:720px){.mediaLayout{grid-template-columns:1fr;gap:22px}.mediaPreview{min-height:210px}.mediaPage{padding:18px!important}.mediaGallery{grid-template-columns:1fr}.mediaActions .tap{min-height:44px}.mediaForm textarea{min-height:120px}}.mediaPage.mediaChat{max-width:none!important;margin:0;padding:0!important;display:flex;flex-direction:column;height:calc(100dvh - var(--workspace-bottom,0px));overflow:hidden}.mediaChat .detailHead h2{flex:1}.mediaChat .detailHead{position:static;flex:none;box-sizing:border-box;width:min(760px,calc(100% - 48px));align-self:center;margin:0;padding:20px 0;border-bottom:1px solid var(--line);gap:12px}.mediaKindSwitch{display:inline-flex;align-items:center;gap:4px;margin:0}.mediaChat .mediaLayout{display:flex;flex-direction:column;flex:1;min-height:0;gap:0}.mediaThread .turn.me{max-width:90%;margin-left:auto}.mediaThread .turn.them{margin-top:24px}.mediaThread .mediaActions{margin:12px 0}.mediaThread .mediaDetails{font-size:14px}.mediaChat .mediaForm>.mediaDraftNote{grid-column:1/-1;grid-row:7}.mediaChat .mediaForm .mediaStatus:empty{display:none}.mediaChat .mediaForm .mediaDetails label{margin:12px 0}.mediaChat .mediaForm .mediaDetails summary:after{display:none}.mediaChat .mediaPending{padding:12px 24px;color:var(--mute);border-top:1px solid var(--line);flex:none}@media(max-width:720px){.mediaThread{padding:20px 16px}.mediaThread .mediaActions .tap{padding:8px 10px}.mediaChat .mediaPreview :is(img,video){max-height:48vh}}.mediaChat .mediaPrompt{grid-column:1/-1;font-size:0;gap:0;grid-row:3}.mediaChat .mediaPrompt textarea:focus{outline:0}.mediaAttach{grid-row:1;grid-column:1;align-self:end;width:40px;height:44px;border:0!important;background:transparent!important;color:var(--mute)}.mediaMode{grid-row:2;grid-column:2;font-size:12px;color:var(--mute);padding:5px 8px}.mediaChat .mediaForm .mediaDetails summary{width:max-content;font-size:13px;padding:12px 8px;min-width:0}.mediaChat .mediaForm .mediaDetails[open]{grid-column:1/-1;grid-row:5;justify-self:stretch;padding:8px 0;border-top:1px solid var(--line)}.mediaReference{display:flex;align-items:center;gap:8px;padding:12px 8px;font-size:13px;flex-wrap:wrap}.mediaReference[hidden]{display:none}.mediaChat .mediaForm[hidden]{display:none}.mediaReference .mediaPreview{width:52px;height:52px;min-height:0;flex:none}.mediaReference .mediaPreview img{width:52px;height:52px;object-fit:cover}.mediaReference .tap{font-size:12px;padding:6px}.mediaThread .mediaIntro{margin:0 0 18px;font-size:20px;line-height:1.5;max-width:48ch}.mediaStarters{display:flex;flex-wrap:wrap;gap:8px}.mediaStarters .tap{font-size:14px;text-align:left;white-space:normal;background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:10px 14px;min-height:44px;line-height:1.4;color:var(--ink)}.mediaStarters .tap:hover{color:var(--ink)}.mediaThread .mediaPreview{min-height:0;border:0;background:transparent;justify-items:start;width:100%;justify-items:start}.mediaThread .mediaPreview :is(img,video){width:auto;max-width:100%;max-height:58vh;border-radius:12px;width:100%;max-height:56vh;object-fit:contain;object-position:left}.mediaThread .mediaActions .tap{background:transparent;border-color:transparent;color:var(--mute);font-size:13px;padding:6px 10px}.mediaThread .mediaActions .tap:hover{color:var(--ink);background:var(--surface-2)}.mediaViewer{box-sizing:border-box;width:min(1400px,96vw);max-width:96vw;max-height:94dvh;padding:20px;border:1px solid var(--line);border-radius:14px;color:var(--ink);background:var(--surface)}.mediaViewer .tap{font:inherit;font-size:14px;min-height:44px;padding:8px 12px;color:var(--ink);background:var(--surface);border:1px solid var(--line);border-radius:10px;cursor:pointer}.mediaViewer .tap:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.mediaViewer.mediaFrameViewer{width:min(760px,96vw)}.mediaFrameViewer canvas{margin:12px auto}.mediaViewer::backdrop{background:rgba(0,0,0,.8)}.mediaViewer .mediaPreview{border:0;background:transparent;min-height:0}.mediaViewer .mediaPreview :is(img,video){max-height:78dvh;object-fit:contain}.mediaViewer .mediaActions{margin:0 0 16px}.mediaTile h3{font:500 16px/1.4 var(--sans);margin:12px 0 6px;overflow-wrap:anywhere;font-size:16px;line-height:1.4;margin:14px 0 6px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}@media(max-width:720px){.mediaChat .detailHead h2{font-size:20px;line-height:1.25;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}.mediaChat .detailHead{width:calc(100% - 32px);padding:12px 0;gap:8px}.mediaChat .detailHead .tap{padding:6px 8px;font-size:12px}.mediaChat .mediaForm>.mediaPhotoPicker{grid-column:1/-1;grid-row:4;margin-bottom:6px}.mediaChat .mediaForm>.mediaDropHint{grid-row:9}.mediaChat .mediaForm>.mediaPhotoHelp{grid-row:10}.mediaActionPanel .mediaPhotoActions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));overflow:visible}.mediaStarting .mediaActionPanel>p{display:none}.mediaPage.mediaChat.mediaStarting .mediaLayout{margin-top:0}.mediaStarting .mediaThread{padding-top:12px;padding-bottom:8px}.mediaThread .mediaIntro{font-size:18px;margin-top:0}.mediaThread .mediaPreview :is(img,video){max-height:46vh}.mediaViewer{padding:12px}.mediaCompare{grid-template-columns:1fr;grid-template-columns:1fr}.mediaStarters .tap{font-size:14px}}.mediaChat .mediaForm.mediaUnavailable{display:flex;flex-wrap:wrap;align-items:center;padding:16px;gap:12px;border-radius:14px;max-width:840px}.mediaUnavailable .mediaBlocked{flex-basis:100%;margin:0;overflow-wrap:anywhere}.mediaUnavailable .mediaStatus{flex-basis:100%;margin:0;overflow-wrap:anywhere}.mediaPhotoPicker{display:flex;align-items:center;gap:6px;flex-wrap:wrap;position:relative;grid-column:1;grid-row:4;justify-self:start}.mediaPhotoPicker>input{position:absolute;width:1px!important;height:1px;padding:0!important;opacity:0;overflow:hidden}.mediaPhotoPicker:focus-within>label{outline:2px solid var(--accent);outline-offset:2px}.mediaPhotoPicker:has(input:disabled)>label{opacity:.5;cursor:wait}.mediaChat .mediaForm>.mediaMode{display:none}.mediaBasis:empty{display:none}.mediaDropHint[hidden]{display:none}.mediaForm.mediaDragOver{outline:2px solid var(--accent);outline-offset:3px}.mediaDragOver .mediaDropHint{border-color:var(--accent);color:var(--ink);background:var(--surface-2)}.mediaStarting .mediaThread{flex:none;overflow:visible}.mediaStarting.mediaHasReference .mediaThread{display:none}.mediaChat.mediaStarting .mediaForm{max-height:none}.mediaActionPanel[hidden]{display:none}.mediaActionPanel>p{font-size:13px;color:var(--mute);margin:0 0 4px}.mediaVideoGuide{margin:0 0 10px;font-size:13px;line-height:1.5;color:var(--mute)}.mediaVideoGuide strong{display:block;color:var(--ink);font-weight:600;margin-bottom:4px}.mediaVideoGuide p{margin:0}.mediaClipPreview{min-width:72px;min-height:52px}.mediaPlaybackNote{font-size:13px;color:var(--mute);margin:10px 0}.mediaPrimary:disabled{opacity:.45;cursor:default}.mediaPhotoActions .tap{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;flex:0 0 84px;min-height:66px;white-space:normal;text-align:center;border:1px solid var(--line);border-radius:10px;scroll-snap-align:start;color:var(--ink)}@media(prefers-reduced-motion:reduce){.mediaThread{scroll-behavior:auto}}.mediaViewer canvas{border:1px solid var(--line);border-radius:8px}.mediaGallery~.mediaActions input{min-width:0}

/* The description leads the composer; controls stay below the writing area. */
.mediaThread{flex:1;min-height:0;overflow:auto;padding:24px max(24px,calc((100% - 760px)/2));scroll-behavior:auto}
.mediaChat .mediaForm:focus-within{border-color:var(--line)}
.mediaChat:not(.mediaStarting) .mediaForm{max-height:42dvh}
.mediaChat:not(.mediaStarting) .mediaPrompt textarea{min-height:100px;max-height:20vh}
.mediaActionClear{font-size:12px;min-height:36px;margin-top:4px;border:0!important;background:transparent!important;color:var(--mute);padding:4px 2px}

.mediaChat.mediaStarting .mediaLayout{flex:0 1 auto;overflow:auto;margin-top:24px}
.mediaStarting .mediaThread:empty{display:none}
.mediaChat .mediaForm{flex:none;box-sizing:border-box;display:grid;column-gap:8px;row-gap:0;width:calc(100% - 48px);max-width:760px;margin:12px auto max(16px,env(safe-area-inset-bottom));border:1px solid var(--field-edge,var(--line));border-radius:16px;background:var(--surface);overflow:auto;grid-template-columns:auto minmax(0,1fr) auto;gap:8px;max-height:65dvh;padding:20px;box-shadow:none;border-color:var(--line)}
.mediaChat .mediaForm>.mediaPrompt{grid-row:1;grid-column:1/-1;font-size:14px;color:var(--ink);gap:12px;padding:0}
.mediaChat .mediaPrompt textarea{resize:vertical;border:0;background:transparent;min-height:180px;max-height:36vh;padding:0;font-size:20px;line-height:1.6}
.mediaChat .mediaPrompt textarea:focus-visible{outline:2px solid var(--accent);outline-offset:5px;border-radius:4px}
.mediaChat .mediaForm>.mediaReference{grid-row:1;grid-column:1;align-self:start;display:flex;gap:8px;padding:0;width:200px}
.mediaChat .mediaForm>.mediaReference[hidden]{display:none}
.mediaChat.mediaHasReference .mediaForm>.mediaPrompt{grid-column:2/-1;padding-left:12px}
.mediaChat .mediaForm>.mediaReference .mediaPreview{width:100%;height:150px;border:0;background:transparent}
.mediaChat .mediaForm>.mediaReference img{width:100%;height:150px;object-fit:contain}
.mediaReferenceName{flex:1;min-width:80px;overflow-wrap:anywhere;flex-basis:100%;font-size:12px}
.mediaActionPanel{min-width:0;grid-row:2;grid-column:1/-1;padding:4px 0 8px;border-bottom:1px solid var(--line)}
.mediaActionHint{display:none}
.mediaPhotoActions{min-width:0;max-width:100%;flex:0 0 100%;overflow-x:auto;scroll-snap-type:x proximity;display:flex;flex-wrap:wrap;gap:4px 12px;padding:0;overflow:visible}
.mediaActionPanel .mediaPhotoActions .tap{flex:0 1 auto;width:auto;min-height:44px;padding:6px 2px;border:0;border-radius:5px;background:transparent;flex-direction:row;gap:6px;font-size:13px;color:var(--mute)}
.mediaPhotoActions svg{flex:none;width:18px;height:18px}
.mediaPhotoActions .tap:hover{color:var(--accent);background:var(--surface-2)}
.mediaPhotoActions .tap[aria-pressed="true"]{border-color:var(--accent);color:var(--accent);background:var(--surface-2)}
.mediaPhotoActions .tap:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.mediaChat .mediaPhotoPicker{grid-row:3;grid-column:1;gap:4px}
.mediaPhotoPicker>label.tap{display:inline-flex;align-items:center;cursor:pointer;box-sizing:border-box;border:0;background:transparent;font-size:13px;padding:8px;min-height:44px}
.mediaPhotoPicker>.tap{border:0;background:transparent;font-size:13px;padding:8px;min-height:44px}
.mediaChat .mediaForm>.mediaDetails{border:0;padding:0;margin:0;min-width:0;justify-self:start;grid-row:3;grid-column:2;align-self:center}
.mediaChat .mediaForm>.mediaDetails[open]{grid-row:4;grid-column:1/-1}
.mediaChat .mediaForm>.mediaPrimary{align-self:center;border-radius:11px;grid-row:3;grid-column:3;min-height:44px;font-size:14px;padding:8px 14px}
.mediaChat .mediaForm>.mediaBasis{grid-row:5;grid-column:1/-1;margin:0;padding:0;font-size:12px;color:var(--mute)}
.mediaChat .mediaForm>.mediaFormatNote{grid-column:1/-1;margin:0;padding:0;font-size:12px;color:var(--mute);grid-row:6}
.mediaChat .mediaForm>.mediaStatus{grid-row:7;grid-column:1/-1;margin:0;padding:0;font-size:13px}
.mediaDropHint{grid-column:1/-1;grid-row:8;margin:8px 8px 0;padding:12px;border:1px dashed var(--line);border-radius:10px;font-size:13px;color:var(--mute);text-align:center;display:none}
.mediaDragOver .mediaDropHint:not([hidden]){display:block;grid-row:8;grid-column:1/-1}
.mediaPhotoHelp{margin-top:6px;grid-column:1/-1;grid-row:9;justify-self:start;font-size:12px;color:var(--mute);border:0;background:transparent;margin:8px 0 0;padding:8px 0;min-height:44px}
@media(max-width:720px){
.mediaChat.mediaStarting .mediaLayout{margin-top:8px}
.mediaChat .mediaForm{padding:14px;grid-template-columns:auto minmax(0,1fr) auto;gap:8px;width:calc(100% - 24px)}
.mediaChat .mediaPrompt textarea{min-height:150px;font-size:18px}
.mediaChat.mediaHasReference .mediaForm>.mediaPrompt{grid-column:1/-1;padding:0}
.mediaChat .mediaForm>.mediaReference{grid-row:2;grid-column:1/-1;width:100%;align-items:center}
.mediaChat .mediaForm>.mediaReference .mediaPreview{width:80px;height:80px}
.mediaChat .mediaForm>.mediaReference img{height:80px}
.mediaReferenceName{flex:1;min-width:80px}
.mediaActionPanel{grid-row:3}
.mediaPhotoActions{display:flex;gap:2px 10px}
.mediaActionPanel .mediaPhotoActions .tap{padding:6px 2px;width:auto;min-height:44px;font-size:12px}
.mediaChat .mediaPhotoPicker{grid-row:4;grid-column:1/-1}
.mediaChat .mediaForm>.mediaDetails{grid-row:5;grid-column:1/3}
.mediaChat .mediaForm>.mediaPrimary{font-size:13px;padding:0 12px;grid-row:5;grid-column:3}
.mediaChat .mediaForm>.mediaDetails[open]{grid-column:1/-1;grid-row:6}
.mediaChat .mediaForm>.mediaBasis{grid-row:7}
.mediaChat .mediaForm>.mediaFormatNote{grid-row:8}
.mediaChat .mediaForm>.mediaStatus{grid-row:9}
.mediaDragOver .mediaDropHint:not([hidden]){grid-row:10}
}
.deepResearch label.researchConsent{display:flex;align-items:flex-start;gap:12px;min-height:44px}.deepResearch .researchConsent input{width:22px;height:22px;flex:0 0 22px;margin:2px 0 0}.deepResearch .researchConsent[hidden]{display:none}.conversationActions .actionNote{display:block;font-size:12px;color:var(--mute);line-height:1.4;margin-top:4px;max-width:32ch}.deepResearch{max-width:860px!important}.deepResearch .researchForm{display:grid;gap:12px;margin:16px 0}.deepResearch .researchOptionsBody{display:grid;gap:12px;padding-top:10px}.deepResearch label{display:grid;gap:8px;color:var(--mute)}.deepResearch textarea,.deepResearch select{font:inherit;color:var(--ink);background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:12px;box-sizing:border-box;width:100%}.deepResearch .researchForm textarea{min-height:84px;resize:vertical}.researchCard{border:1px solid var(--line);border-left:3px solid var(--accent);border-radius:12px;padding:20px;margin:18px 0;overflow-wrap:anywhere}.researchCard h3{margin:0 0 10px}.researchCard .researchReport{font:inherit;line-height:1.65;max-height:60vh;overflow:auto}.researchCard pre.researchReport{white-space:pre-wrap}.researchControls{display:flex;flex-wrap:wrap;gap:10px;margin:14px 0}.researchControls .tap,.researchForm button{min-height:44px}.researchProgress{color:var(--mute);font-size:14px}.deepResearch details{margin-top:12px}.deepResearch summary{cursor:pointer;min-height:44px;display:flex;align-items:center;list-style:none}.deepResearch summary::-webkit-details-marker{display:none}.deepResearch summary:before{display:none!important}.deepResearch summary:after{content:"+";margin-left:auto}.deepResearch details[open]>summary:after{content:"−"}@media(max-width:600px){.researchCard{padding:16px}.deepResearch .detailHead h2{font-size:22px}} .researchHistory{display:flex;gap:12px;flex-wrap:wrap;margin:14px 0}.researchHistory>input{flex:1;min-width:0}.researchSource{border-top:1px solid var(--line);padding:12px 0}.researchSource a{overflow-wrap:anywhere}.researchSource select{max-width:220px}.ocrColumns{display:grid;grid-template-columns:1fr 1fr;gap:18px}.ocrOriginal canvas{display:block;max-width:100%;height:auto;margin-top:12px;border:1px solid var(--line);background:white}.ocrOriginal{max-height:65vh;overflow:auto}.ocrPages{max-height:65vh;overflow:auto}.ocrPages textarea{min-height:220px}.ocrPages input{width:auto;order:-1}.ocrPages section>label:first-child{display:flex;align-items:center;gap:10px;color:var(--ink);padding:8px 0}.ocrPages section{padding-bottom:18px}.researchOutcome{padding:14px;background:var(--surface);border-radius:10px}.activityItem{border-bottom:1px solid var(--line);padding:16px 0}.researchForm input,.researchHistory input{font:inherit;color:var(--ink);background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:12px}.deepResearch .researchControls button{white-space:normal}@media(max-width:700px){.ocrColumns{grid-template-columns:1fr}.ocrOriginal{max-height:40vh}.ocrPages{max-height:none}}.studyTools{display:flex;gap:.6rem;flex-wrap:wrap;align-items:center;margin:1rem 0}.studyTools :is(button,select),.studyFeedback :is(button,select,textarea),.studyItem button{font:inherit;color:var(--ink);background:var(--bg);border:1px solid var(--line);border-radius:.55rem;padding:.65rem;min-height:44px}.studyTools button{cursor:pointer}.studyFeedback button{justify-self:start;background:var(--accent);color:var(--on-accent,#111);padding:.65rem 1rem}.studyNotice{border-left:3px solid var(--accent);padding:.8rem 1rem;background:var(--panel,var(--bg));line-height:1.6}.studyGroups{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,19rem),1fr));gap:1rem}.studyGroup,.studyItem{border:1px solid var(--line);border-radius:.7rem;padding:1rem;margin:.7rem 0;overflow-wrap:anywhere}.studyGroup h3,.studyItem h3{margin:0 0 .7rem;font:600 1rem var(--sans)}.studyGroup p,.studyItem p{margin:.4rem 0}.studyMuted{color:var(--mute);font-size:.9em}.studyFeedback{display:grid;gap:.8rem;margin:1.5rem 0}.studyFeedback label{display:grid;gap:.4rem}.studyFeedback textarea{min-height:6rem}.studyAssessment{border:1px solid var(--line);border-radius:.7rem;padding:1.2rem;margin:1rem 0}.studyAssessment p{max-width:75ch}.studyAssessment h3{margin-top:0}.studyState{color:var(--accent);font-weight:600}.studyEvidence{overflow-wrap:anywhere}.studyEvidence a{color:var(--accent)}.studyActions{display:flex;gap:.5rem;flex-wrap:wrap}.studyActions button{min-height:44px}
.searchControlsForm{display:grid;gap:16px;max-width:620px}.searchControlsForm label{display:grid;gap:6px}.searchControlsForm input,.searchControlsForm select{box-sizing:border-box;width:100%;min-height:44px;padding:10px;border:1px solid var(--line);border-radius:8px;background:var(--bg);color:var(--ink);font:inherit}.regressionDraft{box-sizing:border-box;width:100%;min-height:280px;padding:10px;border:1px solid var(--line);border-radius:8px;background:var(--bg);color:var(--ink);font:inherit;resize:vertical}.regressionConsent{display:flex;align-items:center;gap:8px;min-height:44px}.searchControlsForm .workspaceTools{flex-wrap:wrap}

.detailPage .workSearchForm{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:10px}.detailPage .workSearchForm input{min-width:0;width:100%;min-height:44px}.detailPage .workSearchForm select{width:auto;max-width:180px;min-height:44px}@media(max-width:600px){.detailPage .workSearchForm{grid-template-columns:minmax(0,1fr) auto}.detailPage .workSearchForm input{grid-column:1/-1}.detailPage .workSearchForm select{max-width:none;width:100%}}

.workspacePage .tap.searchResult{display:flex;flex-direction:column;align-items:flex-start;gap:7px;width:100%;text-align:left;padding:18px 0;margin:0;border:0;border-bottom:1px solid var(--line);border-radius:0;white-space:normal;overflow-wrap:anywhere;background:transparent}.searchResult strong{font-size:17px;font-weight:600;color:var(--ink);line-height:1.4}.searchResult .searchExcerpt{font-size:14px;line-height:1.5;max-width:70ch}.searchResult small{color:var(--mute);font-size:12px}.searchResult:hover strong{color:var(--accent)}
.taskPreviewRow{display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px;border-top:1px solid var(--line);padding:16px 0}.taskPreviewRow label{display:flex;flex-direction:column;gap:5px;min-width:0}.taskPreviewRow input:not([type=checkbox]){width:100%;box-sizing:border-box;min-height:44px;border:1px solid var(--line);border-radius:8px;padding:10px;background:var(--bg);color:var(--ink);font:inherit}.taskPreviewRow .taskFields{display:grid;gap:10px}.taskPreviewRow small{color:var(--mute);line-height:1.5}.taskPreviewRow input[type=checkbox]{width:20px;height:20px;margin-top:8px}

.researchConstraints{display:block;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:left;font:12px var(--sans);color:var(--mute);border:0;background:transparent;padding:6px 0;min-height:32px}.researchConstraints:focus-visible{outline:2px solid var(--accent)}
.groupDivider{padding:0;border:0;background:transparent;cursor:col-resize;touch-action:none;position:relative;min-width:12px;color:var(--mute)}
.groupDivider:after{content:'';position:absolute;top:0;bottom:0;left:5px;width:2px;background:var(--line)}
.groupDivider:hover:after,.groupDivider:focus-visible:after{background:var(--accent)}
.discussionLayout[data-focus=source]{grid-template-columns:1fr}.discussionLayout[data-focus=source]>.discussionThread,.discussionLayout[data-focus=source]>.groupDivider{display:none}
.discussionLayout[data-focus=thread]{grid-template-columns:1fr}.discussionLayout[data-focus=thread]>.discussionSourceFold,.discussionLayout[data-focus=thread]>.groupDivider{display:none}
.discussionLayout[data-focus]>.discussionThread,.discussionLayout[data-focus]>.discussionSourceFold{width:100%;max-width:760px;margin:0 auto}
.groupNew{align-self:center;margin:6px 0;padding:6px 14px;border:1px solid var(--accent);border-radius:20px;background:var(--surface-2);color:var(--accent);font:inherit;cursor:pointer}
.groupViewTools{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 16px!important}.groupViewTools .tap[aria-pressed=true]{border-color:var(--accent);background:var(--surface-2);color:var(--ink)}
.discussionComposer textarea{min-height:44px!important;resize:none!important;padding:12px 14px;border-radius:12px;line-height:1.6}.sourceExcerpt{white-space:pre-wrap;overflow-wrap:anywhere;border-left:2px solid var(--accent);padding:10px 16px;margin:18px 0;background:var(--surface-2)}
.log .turn.reviewCard.reviewComplete{padding:12px 18px;margin:18px auto;border-color:var(--line)}.log .reviewComplete h3{font-size:16px}.log .reviewComplete>p{font-size:13px}.log .reviewComplete details{margin-top:6px}
@media(min-width:1200px) and (max-width:1449px){body:has(.referencePage.dockPage) .shell{margin-right:360px;max-width:none;width:auto}.detailPage.referencePage.dockPage{left:auto;width:360px;padding:20px;border-left:1px solid var(--line)}.referencePage.dockPage .detailHead h2{font-size:20px}}
.reviewLead{border:1px solid var(--line);border-left:3px solid var(--accent);border-radius:10px;padding:16px 18px;background:var(--surface-2);margin-bottom:16px}.reviewLead>:last-child{margin-bottom:0}
.recoveryCard{border:1px solid var(--line);border-radius:10px;padding:12px 16px;margin:14px 0;background:var(--surface-2)}.recoveryCard p{margin:0 0 10px;color:var(--mute)}
@media(max-width:600px){#convBody .convTools input{flex-basis:100%}}
.attachmentHeading{flex-basis:100%;font-size:12px;color:var(--mute)}.o-review{font-weight:600}.o-review:before{content:"Review · ";color:var(--accent)}.o-deeper:before{content:"Deeper · ";color:var(--accent)}.convTools select{min-height:40px;max-width:100%;background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:8px;padding:8px}#pending{width:calc(100% - 48px);max-width:760px;margin:0 auto;align-items:center;gap:8px;flex-wrap:wrap;padding:8px 12px}#pending>img{width:44px;height:44px;object-fit:cover;border-radius:7px}#pending>span:first-child{max-width:36ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}#convBody>.tap{appearance:none;border:0;background:transparent;color:var(--mute);font:14px var(--sans);padding:8px 0;min-height:44px;cursor:pointer}#pending .tap{margin-left:0;appearance:none;border:1px solid var(--line);border-radius:8px;background:var(--surface);color:var(--ink);font-family:var(--sans);cursor:pointer;padding:4px 8px;min-height:32px;font-size:13px}
.side .sideRoom .groupTitle{display:block;overflow-wrap:anywhere}.side .sideRoom .groupMeta{font-size:12px}.side .sideRoom.hasUnread{position:relative;padding-left:18px}.side .sideRoom.hasUnread:before{content:'';position:absolute;left:7px;top:16px;width:5px;height:5px;border-radius:50%;background:var(--accent)}
.sidePinnedMore{margin:4px 0 10px}.sidePinnedMore>summary{font-size:12px;color:var(--mute)}
.mediaActions.acts{display:flex;flex-wrap:wrap;gap:8px}.mediaActions.acts .tap{margin:0}
@media(max-width:700px){.groupDivider{display:none}.discussionLayout[data-focus]{display:block}.discussionLayout[data-focus]>.discussionSourceFold,.discussionLayout[data-focus]>.discussionThread{display:block;max-width:none}.groupViewTools{display:none}#pending .tap{min-height:44px}}

.discoveryRows{display:grid;gap:0;margin:1rem 0}.discoveryRow{padding:1rem 0;border-bottom:1px solid var(--line);overflow-wrap:anywhere}.discoveryRow h3{margin:0 0 .5rem}.discoveryRow p{margin:.4rem 0}.discoveryTools{display:flex;flex-wrap:wrap;gap:.5rem;margin:.7rem 0}.discoveryTools :is(button,select),.discoveryRows button{font:inherit;min-height:44px;padding:.6rem .8rem;border:1px solid var(--line);border-radius:.5rem;background:var(--bg);color:var(--ink)}.commandInput{width:100%;box-sizing:border-box;font:inherit;min-height:44px;padding:.6rem .8rem;border:1px solid var(--line);border-radius:.5rem;background:var(--bg);color:var(--ink)}.commandResult{display:flex;justify-content:space-between;gap:1rem;width:100%;text-align:left;margin:.35rem 0}.commandResult small{color:var(--mute)}.searchHit{background:var(--accent);color:var(--on-accent,#111);scroll-margin:5rem}.outlineNotes{border-top:1px solid var(--line);margin-top:1rem;padding-top:.7rem}.outlineNotes button{display:block;text-align:left;width:100%;padding:.5rem 0;overflow-wrap:anywhere}.constraintSummary{white-space:normal!important;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;line-height:1.5;text-align:left}.studyOverview{border-bottom:1px solid var(--line);padding-bottom:1rem;margin-bottom:1rem}.studyOverview p{max-width:75ch}

body{--workspace-bottom:0px;--top-bar:55px}
@media(max-width:600px){body{--top-bar:89px}}
body:has(#shell:not([hidden])) .detailPage:not(.dockPage),body:has(#shell:not([hidden])) .settingsPage{top:var(--top-bar,55px)}
body:has(#detailPage:not(.dockPage),.settingsPage:not([hidden])) #shell .researchTop{position:fixed;top:0;left:0;right:0;z-index:45;width:calc(100% - 48px);max-width:760px;margin:0 auto;padding:12px 0 10px;background:var(--bg);border-bottom:1px solid var(--line);box-sizing:border-box}
@media(min-width:1100px){body:not(.sideCollapsed):has(#detailPage:not(.dockPage),.settingsPage:not([hidden])) #shell .researchTop{left:var(--side-width,300px);width:calc(100% - var(--side-width,300px) - 48px)}}
@media(max-width:600px){body:has(#detailPage:not(.dockPage),.settingsPage:not([hidden])) #shell .researchTop{width:calc(100% - 32px);padding:8px 0}}
.workspaceDock{display:inline-flex;align-items:center;gap:2px 4px;flex-wrap:wrap;flex-wrap:balance;margin:0;padding:0;border:0;background:transparent;box-sizing:border-box}
.workspaceDock button{display:inline-flex;align-items:center;justify-content:center;gap:4px;min-width:0;min-height:32px;padding:4px 7px;border:0;border-radius:999px;background:transparent;color:var(--mute);font:13.5px var(--sans);cursor:pointer}
.workspaceDock button svg{display:none}
.workspaceDock button[aria-pressed=true],body #shell .researchTop .workspaceDock button[aria-pressed=true]{color:var(--accent);background:color-mix(in srgb,var(--accent) 14%,transparent);font-weight:600}
.workspaceDock button:hover,body #shell .researchTop button:hover{color:var(--ink);background:var(--wash)}
.workspaceDock button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
body:has(#shell[hidden]) .workspaceDock,body:has(.cropper) .workspaceDock,body.workspaceKeyboard .workspaceDock{display:none}
body.workspaceKeyboard{--workspace-bottom:0px}


/* Research shares Lists' quiet centre; history and contents are optional. */
body #shell{--column:760px;background:var(--bg);border:0;box-shadow:none;max-width:1000px;width:100%;margin:0 auto}
body #shell>header{width:calc(100% - 48px);max-width:760px;margin:0 auto;box-sizing:border-box;padding:0 0 12px;background:var(--bg);border-bottom:1px solid var(--line);-webkit-backdrop-filter:none;backdrop-filter:none}
body #shell .researchTop{display:flex;align-items:center;gap:4px 6px;flex-wrap:wrap;min-height:55px;margin-bottom:12px;border-bottom:1px solid var(--line);padding:12px 0 10px;box-sizing:border-box}
.researchTop strong{font:650 17px var(--sans);padding-right:10px;border-right:1px solid var(--line);margin-right:2px}.researchTop strong a.researchBrand{color:inherit;text-decoration:none}.researchTop strong a.researchBrand:hover{color:var(--accent)}.researchLeader{flex:1}
.sideOlder>summary{cursor:pointer;color:var(--mute);font:13px var(--sans);padding:16px 8px;min-height:44px}.sideOlder>summary:focus-visible{outline:2px solid var(--key);outline-offset:-2px}
body #shell .researchTop button{display:inline-flex;align-items:center;background:transparent;border:0;border-radius:999px;color:var(--mute);font:13.5px var(--sans);min-height:32px;padding:4px 7px}
body #shell>header .top{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
body #shell>header .convTitle{order:0;flex:1;min-width:0;flex-basis:50%;margin:0}
body #shell>header #chats{font:550 23px/1.3 var(--serif);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body #shell #chats .conversationIcon{display:none}
body #shell>header .topRight{order:0;width:auto;gap:8px;flex-wrap:wrap;align-items:center}
body #shell #mainHelp{display:none}
body.emptyConversation #shell>header .top{display:none}
body.emptyConversation #shell>header:not(:has(.note:not([hidden]),.asBanner:not([hidden]),#researchConstraints)){border-bottom:0;padding-bottom:0}
body.emptyConversation #shell>header:not(:has(.note:not([hidden]),.asBanner:not([hidden]),#researchConstraints)) .researchTop{margin-bottom:0}
body #shell #fresh{display:inline-flex;align-items:center;justify-content:center}
body.hasOutline #shell #researchContents{display:none}
body #shell #researchContents{display:inline-flex;align-items:center;justify-content:center;font:12px var(--sans);border:0;background:transparent;color:var(--mute);min-height:32px}
body #shell>.log{padding:24px;scrollbar-gutter:stable}
body #shell form.ask{width:calc(100% - 48px);max-width:760px;margin:12px auto calc(16px + env(safe-area-inset-bottom));flex-shrink:0}
body .side{display:none;position:fixed;top:0;left:0;padding:16px;box-sizing:border-box;flex-direction:column;overflow:hidden;z-index:60;width:min(340px,90vw);bottom:var(--workspace-bottom);background:var(--bg)}
body.historyOpen .side{display:flex}
body .side .sideTop{display:flex;align-items:center;justify-content:space-between}
body .side .sideHistory{flex:1;min-height:0;overflow:auto}
body .side button{display:block;color:var(--ink);background:transparent;border:0;border-radius:6px;padding:8px;text-align:left;min-height:var(--tap);font:14px var(--sans);width:100%}
body .side button svg{width:18px;height:18px;flex:none}body .side :is(.sideNew,.sideFooter button){display:flex;align-items:center;gap:10px}body .side .sideNew{background:var(--accent);color:var(--on-accent,var(--bg))}
body .side .sideTop button{width:auto}body .side h4,body .side h5{color:var(--mute);font:600 12px var(--sans);margin:16px 8px 8px}
body .side .sideSearch{display:flex;gap:8px;margin:12px 0}body .side .sideSearch input{width:0;flex:1;min-width:0;background:var(--surface);color:var(--ink);border:1px solid var(--line);padding:8px;border-radius:8px;font:16px var(--sans)}body .side .sideSearch button{width:40px}body .side .sideSearch svg{width:20px;height:20px}
body .side .row{display:flex}body .side .row>button:first-child{flex:1}body .side .row>.del{width:32px;flex:none}body .side .row svg{width:16px;height:16px}body.historyOpen .sideResize{display:none}
#historyScrim{display:none;position:fixed;inset:0;z-index:55;background:#0006;border:0}
body.historyOpen #historyScrim{display:block}
body:has(#shell[hidden]) #historyScrim{display:none}
@media(min-width:1100px){body .side .sideTop .historyClose{display:none}}
body .sideRestore{display:none!important}
body.hasOutline #shell .answer-sections{display:none}
body #shell .acts{gap:8px}
body #shell .acts>.tap{border-color:transparent;background:transparent;min-height:32px;padding:6px 8px;color:var(--mute)}
body #shell .empty .sectionCard{background:transparent;border:0;padding:0;box-shadow:none}
body #shell .empty{margin:20px auto 0;padding-bottom:24px}
body #shell .empty .greet{font-size:28px}
body #shell .empty .lede{margin:8px 0 12px}
body #shell .empty .startOptions{min-height:44px;border:0;background:transparent;color:var(--mute);font:inherit;font-size:13px;padding:8px 0;cursor:pointer}
body #shell .empty .startOptions:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
body #shell .empty .suggestion{margin:8px 0 28px}
body #shell .empty .suggestHead .again{min-height:44px;padding:8px 0}
body #shell .empty .suggestHead{align-items:center}
body #shell .empty .heroCard{border:0;background:transparent;box-shadow:none;padding:0}
body #shell .empty .starters{display:grid;gap:0}body #shell .empty .starters button{border:0;border-bottom:1px solid var(--line);border-radius:0;background:transparent;padding:14px 24px 14px 0;font-size:16px}
@media(min-width:1100px){body:not(.sideCollapsed) #shell{margin-left:var(--side-width);width:calc(100% - var(--side-width));max-width:none}body:not(.sideCollapsed) .side{display:flex;width:var(--side-width)}body:not(.hasOutline) #shell>.log{padding-left:24px;padding-right:24px}body.hasOutline #shell>.log{padding-right:264px}body.hasOutline #shell>header{max-width:760px;width:calc(100% - 288px);margin-left:max(24px,calc((100% - 240px - 760px)/2));margin-right:264px}body.hasOutline #shell :is(form.ask,#pending){margin-left:max(24px,calc((100% - 240px - 760px)/2));margin-right:264px;width:calc(100% - 288px)}body:not(.sideCollapsed) #shell #fresh,body:not(.sideCollapsed) #shell #researchSearch{display:none}}
@media(max-width:1099px){body .detailPage{left:0}body .side .historyPin{display:none}}
@media(max-width:600px){body #shell>header{width:calc(100% - 32px);padding:0 0 8px}body #shell .researchTop{gap:6px 8px;flex-wrap:wrap;min-height:0;margin-bottom:8px;padding:8px 0}.researchTop strong{padding-right:0;border-right:0;margin-right:0}.workspaceDock{order:2;flex:1 0 100%;justify-content:space-between;gap:2px 2px;padding-top:6px;border-top:1px solid var(--line)}.workspaceDock button,body #shell .researchTop button{font-size:12.5px;padding:4px 4px;min-height:32px}body #shell>header #chats{font-size:20px}body #shell>.log{padding:20px 16px}body #shell form.ask{width:calc(100% - 24px)}}
.archiveControls{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:16px 0}.archiveControls button{min-height:44px;padding:9px 14px;border:1px solid var(--line);border-radius:10px;background:var(--surface);color:var(--ink);font:inherit;cursor:pointer}.archiveControls button:disabled{opacity:.5;cursor:default}.archiveControls button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.archiveControls span{color:var(--mute);font-size:.9em}.archiveRow{padding-left:44px}.archiveSelect{position:absolute;left:0;top:0;bottom:0;width:44px;display:flex;align-items:center;justify-content:center;cursor:pointer}.archiveSelect input{width:20px;height:20px;accent-color:var(--accent)}@media(min-width:1200px) and (max-width:1449px){body:has(.referencePage.dockPage) #shell{margin-left:0;margin-right:360px;max-width:none;width:calc(100% - 360px)}body:has(.referencePage.dockPage):not(.sideCollapsed) #shell{margin-left:var(--side-width);width:calc(100% - var(--side-width) - 360px)}}@media(min-width:1450px){body:has(.dockPage) #shell{margin-left:0;margin-right:440px;max-width:none;width:calc(100% - 440px)}body:has(.dockPage):not(.sideCollapsed) #shell{margin-left:var(--side-width);width:calc(100% - var(--side-width) - 440px)}}