/* Dialog staging, in the sky (LNK 2026-09-19: "improved visuals based on the previous version I uploaded to the
   studio with the light blue sky look" — studio versions 720ef44c3a20…d0df651343e3, the Safe Haven redesign).

   Its grammar, carried over: every surface says how real it is by its MATERIAL before a word is read.
     .ground   what was said         opaque white, hairline edge, flat
     .haze     what it might mean    tinted glass, lifted, the sky comes through
     .cloud    what is proposed      higher, paler glass
     .horizon  what is done/agreed   ink-solid, the only solid surface
   Green is safety and recording, never decoration. A live conversation stays in the sky; the recording is a
   green chip and a green ring, not a flood of colour. Night is the same sky after dark. */
@font-face { font-family: Inter; src: url(fonts/inter.woff2) format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: Newsreader; src: url(fonts/newsreader.ttf); font-weight: 200 800; font-style: normal; font-display: swap; }
@font-face { font-family: Newsreader; src: url(fonts/newsreader-italic.woff2) format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }

:root {
  --haven: #fbfcfe; --cirrus: #eef3f9; --vapor: #e3ecf6; --edge: #ccdcec; --edge-soft: #dfe9f4;
  --sky: #3d86cf; --deep: #1b5b9c; --ink: #14243a; --slate: #3b5068; --mist: #50637a;
  --green: #278664; --green-text: #22775a; --amber: #8f5916; --danger: #b3261e; --on-danger: #ffffff;
  --chip-reading-ink: #46586e; --chip-live-ink: #1a634a;
  --ground: #ffffff; --on-ink: #ffffff; --paper: #dcebf8;
  --glass: rgba(255, 255, 255, 0.58); --glass-strong: rgba(255, 255, 255, 0.76); --glass-line: rgba(255, 255, 255, 0.85);
  --haze-bg: linear-gradient(162deg, rgba(238, 246, 254, 0.66), rgba(214, 232, 250, 0.54));
  --cloud-bg: linear-gradient(168deg, rgba(255, 255, 255, 0.84), rgba(238, 246, 253, 0.64));
  --haze-shadow: 0 14px 34px -16px rgba(27, 91, 156, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.95);
  --cloud-shadow: 0 20px 46px -22px rgba(27, 91, 156, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.95);
  --lift-1: 0 1px 2px rgba(20, 36, 58, 0.04);
  --lift-2: 0 6px 20px -8px rgba(20, 36, 58, 0.18);
  --lift-3: 0 18px 44px -18px rgba(20, 36, 58, 0.28);
  --chip-said: rgba(61, 134, 207, 0.12); --chip-reading: rgba(105, 128, 154, 0.14); --chip-proposed: rgba(185, 118, 42, 0.12); --chip-live: rgba(39, 134, 100, 0.13);
  --sky-bg:
    radial-gradient(44% 32% at 22% 14%, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0) 70%),
    radial-gradient(38% 26% at 82% 26%, rgba(233, 243, 253, 0.9), rgba(233, 243, 253, 0) 72%),
    radial-gradient(54% 34% at 50% 88%, rgba(206, 227, 246, 0.8), rgba(206, 227, 246, 0) 70%),
    radial-gradient(40% 22% at 14% 62%, rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0) 72%),
    linear-gradient(178deg, #d3e6f8 0%, #e2eefa 34%, #ecf3fb 64%, #f4f8fc 100%);
  --r-card: 18px; --r-pill: 999px; --blur: 20px;
  --ease-out: cubic-bezier(0.32, 0.72, 0, 1); --ease-spring: cubic-bezier(0.22, 1.2, 0.36, 1);
  --sans: Inter, -apple-system, "Segoe UI", system-ui, sans-serif;
  --serif: Newsreader, "Iowan Old Style", Georgia, serif;
  color-scheme: light;
}
/* Night: the same sky after dark. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --haven: #101d31; --cirrus: #13233a; --vapor: #1a2d47; --edge: #2a3d57; --edge-soft: #22344c;
    --sky: #6aa8e8; --deep: #8cc0f5; --ink: #e8f0fa; --slate: #b6c4d6; --mist: #93a6bd;
    --green: #3fb488; --green-text: #5cc79d; --amber: #f0b354; --danger: #ff8f85; --on-danger: #2b0b08;
    --chip-reading-ink: #c3cfdd; --chip-live-ink: #5cc79d;
    --ground: #16253a; --on-ink: #0b1422; --paper: #0f1c30;
    --glass: rgba(20, 36, 58, 0.55); --glass-strong: rgba(22, 38, 60, 0.78); --glass-line: rgba(255, 255, 255, 0.10);
    --haze-bg: linear-gradient(162deg, rgba(44, 76, 118, 0.5), rgba(28, 52, 86, 0.46));
    --cloud-bg: linear-gradient(168deg, rgba(52, 80, 116, 0.54), rgba(32, 54, 84, 0.48));
    --haze-shadow: 0 14px 34px -16px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.08);
    --cloud-shadow: 0 20px 46px -22px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.1);
    --lift-1: 0 1px 2px rgba(0, 0, 0, 0.3); --lift-2: 0 6px 20px -8px rgba(0, 0, 0, 0.5); --lift-3: 0 18px 44px -18px rgba(0, 0, 0, 0.6);
    --chip-said: rgba(106, 168, 232, 0.16); --chip-reading: rgba(147, 166, 189, 0.16); --chip-proposed: rgba(240, 179, 84, 0.14); --chip-live: rgba(63, 180, 136, 0.18);
    --sky-bg:
      radial-gradient(44% 32% at 22% 14%, rgba(80, 116, 168, 0.28), rgba(80, 116, 168, 0) 70%),
      radial-gradient(38% 26% at 82% 26%, rgba(60, 94, 140, 0.24), rgba(60, 94, 140, 0) 72%),
      radial-gradient(54% 34% at 50% 88%, rgba(46, 78, 122, 0.3), rgba(46, 78, 122, 0) 70%),
      linear-gradient(178deg, #0a1322 0%, #0f1c30 44%, #14243a 100%);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --haven: #101d31; --cirrus: #13233a; --vapor: #1a2d47; --edge: #2a3d57; --edge-soft: #22344c;
  --sky: #6aa8e8; --deep: #8cc0f5; --ink: #e8f0fa; --slate: #b6c4d6; --mist: #93a6bd;
  --green: #3fb488; --green-text: #5cc79d; --amber: #f0b354; --danger: #ff8f85; --on-danger: #2b0b08;
  --chip-reading-ink: #c3cfdd; --chip-live-ink: #5cc79d;
  --ground: #16253a; --on-ink: #0b1422; --paper: #0f1c30;
  --glass: rgba(20, 36, 58, 0.55); --glass-strong: rgba(22, 38, 60, 0.78); --glass-line: rgba(255, 255, 255, 0.10);
  --haze-bg: linear-gradient(162deg, rgba(44, 76, 118, 0.5), rgba(28, 52, 86, 0.46));
  --cloud-bg: linear-gradient(168deg, rgba(52, 80, 116, 0.54), rgba(32, 54, 84, 0.48));
  --haze-shadow: 0 14px 34px -16px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  --cloud-shadow: 0 20px 46px -22px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  --lift-1: 0 1px 2px rgba(0, 0, 0, 0.3); --lift-2: 0 6px 20px -8px rgba(0, 0, 0, 0.5); --lift-3: 0 18px 44px -18px rgba(0, 0, 0, 0.6);
  --chip-said: rgba(106, 168, 232, 0.16); --chip-reading: rgba(147, 166, 189, 0.16); --chip-proposed: rgba(240, 179, 84, 0.14); --chip-live: rgba(63, 180, 136, 0.18);
  --sky-bg:
    radial-gradient(44% 32% at 22% 14%, rgba(80, 116, 168, 0.28), rgba(80, 116, 168, 0) 70%),
    radial-gradient(38% 26% at 82% 26%, rgba(60, 94, 140, 0.24), rgba(60, 94, 140, 0) 72%),
    radial-gradient(54% 34% at 50% 88%, rgba(46, 78, 122, 0.3), rgba(46, 78, 122, 0) 70%),
    linear-gradient(178deg, #0a1322 0%, #0f1c30 44%, #14243a 100%);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
html { background: var(--paper); }
body { background: transparent; color: var(--slate); font: 400 15px/1.55 var(--sans); letter-spacing: -0.006em; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: 100%; font-synthesis: none; }
/* The sky: cloud fields drifting slowly behind everything. It never sits on top of type. */
body::before { content: ""; position: fixed; inset: -20% -30%; z-index: -1; background: var(--sky-bg); animation: drift 42s ease-in-out infinite alternate; pointer-events: none; }
@keyframes drift { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(-3.5%, 1.8%, 0) scale(1.06); } }
button, input, textarea { font: inherit; color: inherit; letter-spacing: inherit; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--sky); outline-offset: 3px; border-radius: 6px; }
[hidden] { display: none !important; }
.num, time { font-variant-numeric: tabular-nums; }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 20px; top: 12px; z-index: 30; background: var(--ground); padding: 8px 12px; border-radius: 10px; }

/* type */
.meta { font-size: 13px; line-height: 1.45; color: var(--mist); margin: 0; }
.eyebrow, h2.group { display: block; font: 600 11px/1.5 var(--sans); letter-spacing: 0.14em; text-transform: uppercase; color: var(--mist); margin: 0; }
h2.group { margin: 28px 0 10px; }
.title { font: 400 38px/1.04 var(--serif); letter-spacing: -0.036em; color: var(--ink); margin: 0; text-wrap: balance; }
.lede { font-size: 15px; line-height: 1.55; color: var(--slate); margin: 0; }
.card-title { font: 400 24px/1.15 var(--serif); letter-spacing: -0.03em; color: var(--ink); margin: 0; text-wrap: balance; }
.serif { font-family: var(--serif); }
.body-record { font: 400 19px/1.5 var(--serif); letter-spacing: -0.012em; color: var(--ink); margin: 0; max-width: 34em; text-wrap: pretty; }
.body-record em, .quote { font-style: italic; }
.strong { font-weight: 600; color: var(--ink); }
.p { margin: 0; text-wrap: pretty; }
/* A title may be one long unbroken word (a pasted link, a code): it wraps inside its column and never widens the
   page. Flex and grid children are allowed to be narrower than their content for the same reason. */
.title, .card-title, .row-title, .body-record, .nudge, .strong, .p, .lede, .meta, .said, .names div, .row-action { overflow-wrap: anywhere; }
.row-main, .who-when, .heading, .right, .side, .live-scroll, .names > div, .stack-8, .stack-12, .stack-16 { min-width: 0; }
h1:focus-visible { outline: none; box-shadow: -14px 0 0 -11px var(--sky); }

/* chips: what state a thing is in, before it is read */
.chip { display: inline-flex; width: fit-content; max-width: 100%; align-self: flex-start; align-items: center; gap: 5px; white-space: normal; overflow-wrap: anywhere; font: 600 10.5px/1.6 var(--sans); letter-spacing: 0.1em; text-transform: uppercase; padding: 2px 9px 2px 7px; border-radius: var(--r-pill); }
.chip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.chip.st-said { color: var(--deep); background: var(--chip-said); }
.chip.st-reading { color: var(--chip-reading-ink); background: var(--chip-reading); }
.chip.st-reading::before, .chip.st-proposed::before { background: none; box-shadow: inset 0 0 0 1.5px currentColor; }
.chip.st-proposed { color: var(--amber); background: var(--chip-proposed); }
.chip.st-live { color: var(--chip-live-ink); background: var(--chip-live); }
.chip.st-live::before { animation: breathe 2.6s ease-in-out infinite; }
.chip.st-fixed { color: var(--on-ink); background: var(--ink); }
@keyframes breathe { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }

/* layout */
.app { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
.screen { flex: 1; width: 100%; max-width: 480px; margin: 0 auto; padding: 12px 20px 32px; display: flex; flex-direction: column; gap: 20px; animation: arrive 280ms var(--ease-out) backwards; }
.screen.has-tabs { padding-bottom: 112px; }
@keyframes arrive { from { opacity: 0; transform: translateY(8px); } }
.stack-8 { display: flex; flex-direction: column; gap: 8px; }
.stack-12 { display: flex; flex-direction: column; gap: 12px; }
.stack-16 { display: flex; flex-direction: column; gap: 16px; }
.grow { flex: 1; }
.foot { display: flex; flex-direction: column; gap: 12px; }
.center { text-align: center; align-items: center; }
.topbar { display: flex; align-items: center; justify-content: space-between; min-height: 56px; padding-top: env(safe-area-inset-top); }
.wordmark { font: 400 22px/1 var(--serif); letter-spacing: -0.06em; color: var(--ink); text-decoration: none; }
.wordmark::after { content: "."; color: var(--green); }
.monogram { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: linear-gradient(150deg, #dcebfa, #c6dcf3); color: #1b5b9c; font: 600 14px/1 var(--sans); text-decoration: none; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.9), var(--lift-1); }
.heading { display: flex; flex-direction: column; gap: 10px; padding-top: 8px; }
.heading.center, .center .heading { align-items: center; text-align: center; }
.center .chip, .heading.center .chip { align-self: center; }
.center-text { text-align: center; }

/* the materials */
.card { position: relative; border-radius: var(--r-card); padding: 18px; display: flex; flex-direction: column; gap: 10px; }
.ground { background: var(--ground); border: 1px solid var(--edge); box-shadow: var(--lift-1); }
.haze { background: var(--haze-bg); border: 1px solid var(--glass-line); box-shadow: var(--haze-shadow); backdrop-filter: blur(var(--blur)) saturate(1.5); -webkit-backdrop-filter: blur(var(--blur)) saturate(1.5); }
.cloud { background: var(--cloud-bg); border: 1px solid var(--glass-line); box-shadow: var(--cloud-shadow); backdrop-filter: blur(24px) saturate(1.3); -webkit-backdrop-filter: blur(24px) saturate(1.3); }
.horizon { background: var(--ink); color: var(--on-ink); border: 1px solid var(--ink); box-shadow: var(--lift-2); }
.horizon .card-title, .horizon .p, .horizon .meta { color: var(--on-ink); }
.horizon .meta { opacity: 0.8; }

/* buttons, links, inputs */
.btn, .btn2 { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 50px; padding: 13px 22px; border-radius: var(--r-pill); font: 500 15px/1.4 var(--sans); letter-spacing: -0.012em; text-decoration: none; cursor: pointer; width: 100%; transition: transform 150ms var(--ease-spring), box-shadow 150ms ease, background 150ms ease; }
.btn { background: var(--ink); color: var(--on-ink); border: 0; box-shadow: var(--lift-2); }
.btn2 { background: var(--glass-strong); color: var(--ink); border: 1px solid var(--edge); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.btn:active, .btn2:active { transform: scale(0.98); }
.btn[disabled], .btn2[disabled] { background: var(--vapor); color: var(--mist); border-color: var(--edge-soft); box-shadow: none; cursor: default; transform: none; }
.btn.danger { background: var(--danger); color: var(--on-danger); }
.btn.slim, .btn2.slim { min-height: 40px; padding: 8px 16px; font-size: 14px; width: auto; }
.btn .arrow, .btn2 .arrow { opacity: 0.6; }
.link { background: none; border: 0; padding: 10px 0; min-height: 44px; font: 500 15px/1.4 var(--sans); color: var(--deep); text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--deep) 35%, transparent); text-underline-offset: 3px; cursor: pointer; text-align: left; display: inline-flex; align-items: center; gap: 6px; width: fit-content; }
.link.quiet { color: var(--mist); text-decoration-color: color-mix(in srgb, var(--mist) 35%, transparent); }
.field { display: flex; flex-direction: column; gap: 6px; }
.field label, .label { font: 600 11px/1.5 var(--sans); letter-spacing: 0.12em; text-transform: uppercase; color: var(--mist); }
.input, textarea.input { height: 50px; border: 1px solid var(--edge); border-radius: 14px; background: var(--ground); color: var(--ink); padding: 0 14px; width: 100%; box-shadow: var(--lift-1); }
textarea.input { height: auto; min-height: 176px; padding: 14px; resize: vertical; font: 400 18px/1.5 var(--serif); }
.input:focus-visible { outline: 2px solid var(--sky); outline-offset: 2px; }
.input[aria-invalid="true"] { border-color: var(--danger); }
.error { color: var(--danger); font-size: 13px; line-height: 1.45; margin: 0; }
.status { margin: 0; color: var(--ink); }
.addrow { display: flex; gap: 8px; }
.addrow .btn2 { width: auto; }

/* lists: grouped in one glass card, or as separate cards */
.rows { list-style: none; margin: 0; padding: 0 16px; background: var(--glass-strong); border: 1px solid var(--glass-line); border-radius: var(--r-card); box-shadow: var(--lift-1); }
.rows > li + li, .rows > .row + .row { border-top: 1px solid var(--edge-soft); }
.rows.cards { background: none; border: 0; box-shadow: none; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.rows.cards > li + li { border: 0; }
.rows.cards .row { background: var(--glass-strong); border: 1px solid var(--glass-line); border-radius: var(--r-card); padding: 16px; box-shadow: var(--lift-2); }
.row { display: flex; gap: 12px; align-items: flex-start; min-height: 56px; padding: 14px 0; text-decoration: none; color: inherit; transition: transform 150ms var(--ease-spring), background 150ms ease; }
a.row:active, button.row:active { transform: scale(0.99); }
button.row { width: 100%; background: none; border: 0; text-align: left; cursor: pointer; }
.row .seal { margin-top: 4px; flex-shrink: 0; }
.row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.row-title { font: 400 21px/1.2 var(--serif); letter-spacing: -0.025em; color: var(--ink); }
.row-action { font-weight: 500; color: var(--ink); }
.row .when { font-size: 12px; line-height: 1.5; color: var(--mist); flex-shrink: 0; font-variant-numeric: tabular-nums; }
.row .chip { margin-top: 4px; }

/* segmented control: glass pill, the selection is a white lozenge */
.seg { display: flex; gap: 4px; padding: 4px; background: var(--glass); border: 1px solid var(--glass-line); border-radius: var(--r-pill); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.seg button { flex: 1; background: none; border: 0; padding: 8px 12px; min-height: 40px; color: var(--mist); cursor: pointer; font: 500 14px/1.3 var(--sans); border-radius: var(--r-pill); transition: background 160ms var(--ease-out), color 160ms ease; }
.seg button[aria-checked="true"], .seg button[aria-selected="true"] { color: var(--ink); background: var(--ground); box-shadow: var(--lift-2); }

/* the tab bar: frosted, icon over label */
.tabbar { position: fixed; left: 0; right: 0; bottom: 0; display: flex; justify-content: center; gap: 8px; padding: 8px 12px calc(10px + env(safe-area-inset-bottom)); background: color-mix(in srgb, var(--cirrus) 84%, transparent); border-top: 1px solid var(--glass-line); backdrop-filter: blur(24px) saturate(1.5); -webkit-backdrop-filter: blur(24px) saturate(1.5); z-index: 5; }
.tabbar a { flex: 1; max-width: 140px; display: grid; justify-items: center; gap: 3px; padding: 6px 0; min-height: 48px; text-decoration: none; color: var(--mist); font-size: 11px; border-radius: 12px; }
.tabbar svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.tabbar a[aria-current="page"] { color: var(--deep); font-weight: 600; }

/* the Record */
.concern { display: flex; flex-direction: column; gap: 8px; }
/* A suggestion nobody has accepted yet: the same pale glass as what is proposed, with a broken edge. */
.cloud.suggested { border: 1px dashed color-mix(in srgb, var(--mist) 55%, transparent); box-shadow: var(--lift-1); }
.step-choices { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
details.draft-help { border-top: 1px solid var(--edge-soft); padding-top: 8px; }
details.draft-help > summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; color: var(--deep); font-weight: 500; }
details.draft-help[open] > summary { margin-bottom: 8px; }
textarea.copyable { min-height: 160px; font: 400 14px/1.5 var(--sans); }
.netstate { position: fixed; left: 50%; top: calc(10px + env(safe-area-inset-top)); transform: translateX(-50%); z-index: 25; width: max-content; max-width: calc(100% - 32px); margin: 0; padding: 8px 14px; border-radius: var(--r-pill); background: var(--glass-strong); border: 1px solid var(--edge); color: var(--ink); font-size: 13px; line-height: 1.4; box-shadow: var(--lift-2); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.action { display: flex; flex-direction: column; gap: 10px; }
.set-in { animation: set-in 520ms var(--ease-out) both; }
@keyframes set-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.record-cols { display: flex; flex-direction: column; gap: 20px; }

/* the Seal: round caps, open arcs thin, locked arcs full weight */
.seal { display: block; overflow: visible; }
.seal path { fill: none; stroke-linecap: round; }
.seal .open { stroke: var(--mist); opacity: 0.55; }
.seal .fill { stroke: var(--deep); }
.seal .closed { stroke: var(--ink); }
.seal .notch { stroke: var(--amber); transition: stroke-dashoffset 500ms ease-out; }
.seal .notch.closing { stroke-dashoffset: 100; }
.seal.live .closed { stroke: var(--green); }
.seal.live .open { stroke: var(--green); opacity: 0.4; }
.ring { background: radial-gradient(circle at 50% 38%, var(--glass-strong), var(--glass) 58%, transparent 71%); border: 0; padding: 18px; cursor: pointer; border-radius: 50%; touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; transition: transform 160ms var(--ease-spring); }
.ring:active { transform: scale(0.985); }
.ring[disabled] { cursor: default; }
.ring .fill.holding { transition: stroke-dashoffset 1200ms linear; }
.names { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 16px; width: 100%; text-align: center; }
.names .who { color: var(--ink); }
.names .you { font-weight: 600; color: var(--ink); }
.invite { width: 100%; text-align: left; }

/* live: still the sky. The recording is the green chip and the green ring. */
/* Exactly one screen tall (flex: none, or the column would grow with what was said and push the controls away). */
.live-screen { flex: none; width: 100%; max-width: 480px; margin: 0 auto; padding: 12px 20px calc(16px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 14px; height: 100vh; height: 100dvh; min-height: 0; overflow: hidden; }
/* The controls never scroll away: the head and the foot keep their size, and what was said scrolls between. */
.live-screen > .video { flex: none; max-height: 34vh; max-height: 34dvh; overflow: hidden; }
.live-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: 12px; padding: 2px; margin: -2px; }
.live-foot { flex: none; display: flex; flex-direction: column; gap: 10px; }
.live-screen > :not(.live-scroll), .side > :not(.live-scroll) { flex-shrink: 0; }
.live-head { display: flex; align-items: center; gap: 12px; }
.live-head .who-when { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.nudge { font: 500 22px/1.3 var(--sans); letter-spacing: -0.02em; color: var(--ink); margin: 0; }
.nudges { flex: 1 0 auto; display: flex; flex-direction: column; justify-content: center; gap: 12px; }
.nudge-choices { display: flex; gap: 8px; flex-wrap: wrap; }
.table-mode .nudge { font-size: 34px; line-height: 1.2; letter-spacing: -0.02em; }
.hold { position: relative; overflow: hidden; background: var(--ink); color: var(--on-ink); border: 0; border-radius: var(--r-pill); min-height: 52px; width: 100%; font: 500 15px/1.4 var(--sans); cursor: pointer; touch-action: none; user-select: none; -webkit-user-select: none; box-shadow: var(--lift-2); }
.hold .bar { position: absolute; inset: 0; background: color-mix(in srgb, var(--on-ink) 20%, transparent); transform-origin: 0 50%; transform: scaleX(0); }
.hold.holding .bar { transform: scaleX(1); transition: transform 1200ms linear; }
.hold .label-text { position: relative; }
.controls { display: flex; gap: 8px; flex-wrap: wrap; }
/* 24 Sep call: three controls, each saying its state in words and in colour. Off is tinted red where off means
   Dialog cannot hear you or nothing is kept. */
.controls.three { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 8px; }
.ctl { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 8px 10px; border-radius: var(--r-pill); font: 500 14px/1.3 var(--sans); cursor: pointer; border: 1px solid var(--edge); background: var(--glass-strong); color: var(--ink); transition: background 150ms ease, border-color 150ms ease, transform 150ms var(--ease-spring); }
.ctl:active { transform: scale(0.98); }
.ctl:focus-visible { outline: 2px solid var(--sky); outline-offset: 2px; }
.ctl .dot { width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--mist); }
.ctl.is-on { background: var(--chip-live); border-color: color-mix(in srgb, var(--green) 45%, transparent); color: var(--chip-live-ink); }
.ctl.is-on .dot { background: var(--green); }
.ctl.is-off.warn { background: color-mix(in srgb, var(--danger) 12%, var(--ground)); border-color: color-mix(in srgb, var(--danger) 45%, transparent); color: var(--danger); }
.ctl.is-off.warn .dot { background: var(--danger); }
.ctl[disabled] { opacity: 0.6; cursor: default; }
.seg .count { margin-left: 6px; font-size: 11px; font-weight: 600; padding: 1px 7px; border-radius: var(--r-pill); background: var(--sky); color: var(--on-ink); }
.nudges { justify-content: flex-start; }
.feed { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.feed-item { display: flex; flex-direction: column; gap: 10px; padding: 14px 16px; border-radius: 16px; background: var(--haze-bg); border: 1px solid var(--glass-line); box-shadow: var(--haze-shadow); }
.feed-item .nudge { font-size: 18px; }
.feed-item.answered { background: var(--ground); box-shadow: none; border-color: var(--edge-soft); }
.feed-item.answered .nudge { font-size: 15px; color: var(--slate); }
.feed-item.discussed { border-color: var(--amber); }
.feed-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.discuss-by { margin: 0; font-size: 13px; font-weight: 600; color: var(--amber); }
.nudge-choices .btn2.on { background: var(--ink); color: var(--on-ink); border-color: var(--ink); }
.nudge-choices .btn2.quiet { background: transparent; border-color: transparent; }
.feed .nudge-choices { gap: 6px; }
.feed .nudge-choices .btn2.slim { min-height: 36px; padding: 6px 12px; font-size: 13px; }
.feed-top .dismiss { margin-left: auto; background: none; border: 0; padding: 4px 2px; font: 500 13px/1.3 var(--sans); color: var(--mist); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.feed-top .dismiss.on { color: var(--ink); text-decoration: none; }
.feed-top .dismiss:focus-visible { outline: 2px solid var(--sky); outline-offset: 2px; border-radius: 4px; }
.ask { padding: 8px 12px; border-radius: 12px; background: color-mix(in srgb, var(--amber) 14%, var(--ground)); border: 1px solid color-mix(in srgb, var(--amber) 45%, transparent); }
.ask-text { margin: 0; font-size: 14px; line-height: 1.4; color: var(--ink); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ask .ask-who { font-weight: 600; color: var(--amber); }
.hopes { font-size: 13px; color: var(--slate); }
.hopes summary { cursor: pointer; font-weight: 600; color: var(--ink); }
.hopes ul { margin: 6px 0 0; padding-left: 18px; display: flex; flex-direction: column; gap: 4px; }
.transcript li.mark { background: transparent; box-shadow: none; border-style: dashed; padding: 10px 14px; }
.transcript li.discuss-mark { border-color: var(--amber); }
.transcript li.mark .p { font-size: 14px; margin: 0; color: var(--slate); }
.join-choice { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
@media (max-width: 380px) { .join-choice { grid-template-columns: 1fr; } }
.video { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; min-height: 0; }
.tile { position: relative; aspect-ratio: 4 / 3; background: #0e1a2b; border: 1px solid var(--glass-line); border-radius: 16px; overflow: hidden; box-shadow: var(--lift-2); }
.tile video { width: 100%; height: 100%; object-fit: cover; display: block; }
.tile video.mirror { transform: scaleX(-1); }
.tile .tile-status { position: absolute; inset: 0; display: grid; place-items: center; padding: 16px; text-align: center; font-size: 14px; line-height: 1.4; color: #fff; background: rgba(12, 20, 32, 0.55); }
.tile .name { position: absolute; left: 8px; bottom: 8px; font-size: 12px; line-height: 1.4; color: #fff; background: rgba(12, 20, 32, 0.55); padding: 2px 8px; border-radius: var(--r-pill); }
.video.names-only { display: flex; flex-wrap: wrap; gap: 8px; }
.video.names-only span { padding: 6px 12px; border-radius: var(--r-pill); background: var(--glass-strong); border: 1px solid var(--glass-line); color: var(--ink); font-size: 14px; }
.transcript { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.transcript li { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px; background: var(--ground); border: 1px solid var(--edge); border-radius: 16px; box-shadow: var(--lift-1); }
.transcript .said { font: 400 18px/1.45 var(--serif); color: var(--ink); }
.transcript .said-who { font-size: 12px; color: var(--mist); font-variant-numeric: tabular-nums; }
.transcript .said-who strong { color: var(--ink); font-weight: 600; }

/* when the ring closes, light opens out of it */
.flood { position: fixed; z-index: 20; width: 240vmax; height: 240vmax; margin: -120vmax 0 0 -120vmax; border-radius: 50%; background: radial-gradient(circle, rgba(255, 255, 255, 0.95) 0%, rgba(233, 243, 253, 0.7) 30%, rgba(233, 243, 253, 0) 62%); transform: scale(0); opacity: 1; pointer-events: none; }
.flood.go { transform: scale(1); opacity: 0; transition: transform 800ms var(--ease-out), opacity 700ms ease-in 150ms; }
.flood.drain { transform: scale(0); opacity: 0; transition: transform 700ms ease-in-out, opacity 700ms ease; }

/* bottom sheet: glass rising from the edge. A native modal dialog, so the page behind it is inert. Its head stays
   put; only the answers scroll. */
dialog.sheet { position: fixed; inset: auto 0 0 0; margin: 0 auto; width: 100%; max-width: 560px; max-height: 88vh; max-height: 88dvh; overflow: hidden; z-index: 11; background: var(--glass-strong); color: var(--slate); border: 1px solid var(--glass-line); border-radius: 26px 26px 0 0; box-shadow: var(--lift-3); backdrop-filter: blur(28px) saturate(1.4); -webkit-backdrop-filter: blur(28px) saturate(1.4); padding: 12px 20px calc(20px + env(safe-area-inset-bottom)); gap: 14px; animation: rise 280ms var(--ease-out) both; }
dialog.sheet[open] { display: flex; flex-direction: column; }
dialog.sheet::backdrop { background: rgba(20, 36, 58, 0.14); animation: fade 200ms ease both; }
dialog.sheet::before { content: ""; width: 40px; height: 5px; border-radius: var(--r-pill); background: var(--edge); align-self: center; flex: none; }
@keyframes fade { from { opacity: 0; } }
@keyframes rise { from { transform: translateY(40px); opacity: 0; } }
.sheet-head { flex: none; display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.sheet-head .link { padding-top: 0; }
.sheet-head h2 { margin: 0; font-size: 15px; }
.sheet-head h2:focus-visible { outline: none; }
.sheet-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: 16px; }
.sheet-ask { flex: none; display: flex; flex-direction: column; gap: 10px; }
.sheet textarea.input { min-height: 88px; }
.private { border-left: 2px solid var(--ink); padding-left: 12px; display: flex; flex-direction: column; gap: 6px; }
.answer { white-space: pre-wrap; color: var(--ink); }

.done-mark { display: flex; flex-direction: column; gap: 16px; align-items: center; padding: 12px 0; }
details.row { display: block; }
details.row summary { cursor: pointer; min-height: 24px; color: var(--ink); }
details.row[open] p { margin-top: 12px; }

/* desktop: two panes over the sky, never a stretched phone */
@media (min-width: 1024px) {
  .app.panes { display: grid; grid-template-columns: 400px minmax(0, 1fr); min-height: 100vh; }
  .left { border-right: 1px solid var(--glass-line); background: var(--glass); backdrop-filter: blur(24px) saturate(1.3); -webkit-backdrop-filter: blur(24px) saturate(1.3); padding: 24px; display: flex; flex-direction: column; gap: 16px; height: 100vh; position: sticky; top: 0; overflow-y: auto; }
  .left nav { display: flex; gap: 4px; padding: 4px; background: var(--glass); border: 1px solid var(--glass-line); border-radius: var(--r-pill); }
  .left nav a { flex: 1; text-align: center; text-decoration: none; color: var(--mist); padding: 8px 0; border-radius: var(--r-pill); font-size: 14px; }
  .left nav a[aria-current="page"] { color: var(--ink); background: var(--ground); box-shadow: var(--lift-2); font-weight: 500; }
  .left .row[aria-current="true"] { outline: 2px solid var(--sky); outline-offset: -2px; }
  .right { min-height: 100vh; }
  .right .topbar { display: none; }
  .right .screen { max-width: 980px; padding: 40px 48px 64px; }
  .right .record-cols { display: grid; grid-template-columns: minmax(0, 560px) minmax(260px, 1fr); gap: 32px; align-items: start; }
  .panes .tabbar { display: none; }
  .screen.has-tabs { padding-bottom: 32px; }
  .live-screen.desk { max-width: none; display: grid; grid-template-columns: minmax(0, 1fr) minmax(480px, 40%); gap: 32px; padding: 32px; height: 100vh; }
  .live-screen.desk > .video { max-height: none; align-content: start; overflow-y: auto; }
  .live-screen.desk .side { display: flex; flex-direction: column; gap: 14px; min-height: 0; overflow: hidden; }
  .title { font-size: 44px; }
}
@media (max-width: 1023px) { .left { display: none; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
  .ring .fill.holding, .hold.holding .bar { transition-duration: 1200ms !important; transition-timing-function: linear !important; }
}
.hopes-before { width: 100%; text-align: left; }
.hopes-list { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 4px; color: var(--slate); }
/* the deal room (24 Sep call): one glass room, a header that says whose and how full it is, then its three parts. */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.room { width: 100%; display: flex; flex-direction: column; gap: 16px; padding: 22px; border-radius: 24px; background: var(--cloud-bg); border: 1px solid var(--glass-line); box-shadow: var(--cloud-shadow); backdrop-filter: blur(24px) saturate(1.3); -webkit-backdrop-filter: blur(24px) saturate(1.3); }
.room-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.room-title { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.room-state { flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px 5px 9px; border-radius: var(--r-pill); font: 600 12px/1.2 var(--sans); letter-spacing: 0.02em; }
.room-state::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.room-state.is-open { color: var(--chip-live-ink); background: var(--chip-live); }
.room-state.is-open::before { box-shadow: 0 0 0 3px color-mix(in srgb, var(--green) 22%, transparent); }
.room-state.is-closed { color: var(--chip-reading-ink); background: var(--chip-reading); }
.room-people { display: flex; align-items: center; gap: 10px; min-width: 0; }
.room-people .meta { overflow-wrap: anywhere; }
.room-note { margin-top: -6px; }
.av { flex: none; display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; font: 600 11px/1 var(--sans); letter-spacing: 0.02em; border: 2px solid var(--ground); }
.av-0 { background: color-mix(in srgb, var(--sky) 22%, var(--ground)); color: var(--deep); }
.av-1 { background: color-mix(in srgb, var(--green) 20%, var(--ground)); color: var(--green-text); }
.av-2 { background: color-mix(in srgb, var(--amber) 20%, var(--ground)); color: var(--amber); }
.av-3 { background: color-mix(in srgb, var(--ink) 12%, var(--ground)); color: var(--slate); }
.av-more { background: var(--vapor); color: var(--mist); }
.av-stack { display: inline-flex; flex: none; }
.av-stack .av + .av { margin-left: -9px; }
.room-tabs button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.room-tabs button[aria-selected="true"] { color: var(--ink); background: var(--ground); box-shadow: var(--lift-2); }
.count-soft { font-size: 11px; font-weight: 600; min-width: 18px; padding: 1px 6px; border-radius: var(--r-pill); background: var(--vapor); color: var(--slate); }
.room-body { display: grid; gap: 16px; }
.room-panel { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.room[data-tab="messages"] .panel-files, .room[data-tab="messages"] .panel-updates,
.room[data-tab="files"] .panel-messages, .room[data-tab="files"] .panel-updates,
.room[data-tab="updates"] .panel-messages, .room[data-tab="updates"] .panel-files { display: none; }
.empty { display: flex; flex-direction: column; gap: 4px; padding: 22px 18px; text-align: center; border: 1px dashed var(--edge); border-radius: 16px; background: color-mix(in srgb, var(--ground) 55%, transparent); }
/* messages */
.chat { list-style: none; margin: 0; padding: 4px 2px; display: flex; flex-direction: column; gap: 4px; max-height: 420px; overflow-y: auto; overscroll-behavior: contain; }
.chat .empty { margin: 0; }
.chat .day { align-self: center; margin: 10px 0 6px; font: 600 11px/1.4 var(--sans); letter-spacing: 0.08em; text-transform: uppercase; color: var(--mist); }
.msg { display: flex; align-items: flex-end; gap: 8px; max-width: 88%; margin-top: 8px; }
.msg.grouped { margin-top: 0; }
.msg .av-gap { flex: none; width: 30px; }
.msg-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.msg-who { font-size: 12px; font-weight: 600; color: var(--slate); padding: 0 4px; }
.msg-who .num { font-weight: 400; color: var(--mist); margin-left: 4px; }
.bubble { margin: 0; padding: 10px 14px; border-radius: 18px 18px 18px 6px; background: var(--ground); border: 1px solid var(--edge-soft); box-shadow: var(--lift-1); color: var(--ink); font-size: 15px; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; }
.msg.grouped .bubble { border-top-left-radius: 6px; }
.msg.mine { align-self: flex-end; flex-direction: row-reverse; }
.msg.mine .msg-who { text-align: right; }
.msg.mine .bubble { background: linear-gradient(160deg, var(--sky), var(--deep)); color: var(--on-ink); border-color: transparent; border-radius: 18px 18px 6px 18px; }
.msg.mine.grouped .bubble { border-top-right-radius: 6px; }
.composer { display: flex; align-items: flex-end; gap: 8px; padding: 6px 6px 6px 16px; border-radius: 24px; background: var(--ground); border: 1px solid var(--edge); box-shadow: var(--lift-2); transition: border-color 150ms ease, box-shadow 150ms ease; }
.composer:focus-within { border-color: var(--sky); box-shadow: 0 0 0 3px color-mix(in srgb, var(--sky) 18%, transparent), var(--lift-2); }
.composer textarea { flex: 1; min-height: 38px; max-height: 160px; border: 0; background: none; color: var(--ink); resize: none; padding: 9px 0; font: 15px/1.4 var(--sans); outline: none; }
.send { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; border: 0; background: var(--ink); color: var(--on-ink); cursor: pointer; transition: transform 150ms var(--ease-spring), opacity 150ms ease; }
.send svg, .icon-btn svg { width: 18px; height: 18px; }
.send:hover:not([disabled]) { transform: scale(1.06); }
.send[disabled] { opacity: 0.35; cursor: default; }
.send:focus-visible, .icon-btn:focus-visible, .switch:focus-visible, .text-btn:focus-visible, .drop-target:focus-visible { outline: 2px solid var(--sky); outline-offset: 2px; }
.hint { padding-left: 16px; font-size: 12px; }
/* files */
.files { list-style: none; margin: 0; padding: 0; border-radius: 18px; background: var(--ground); border: 1px solid var(--edge); box-shadow: var(--lift-1); overflow: hidden; }
.file { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: start; padding: 14px 14px 14px 16px; transition: background 150ms ease; }
.file + .file { border-top: 1px solid var(--edge-soft); }
.file:hover { background: color-mix(in srgb, var(--cirrus) 70%, var(--ground)); }
.badge { display: grid; place-items: center; width: 42px; height: 50px; border-radius: 10px; font: 700 10px/1 var(--sans); letter-spacing: 0.04em; color: var(--deep); background: linear-gradient(170deg, var(--cirrus), var(--vapor)); border: 1px solid var(--edge); position: relative; overflow: hidden; }
.badge::after { content: ""; position: absolute; top: 0; right: 0; width: 12px; height: 12px; background: linear-gradient(225deg, var(--ground) 50%, var(--edge) 50%); }
.badge-pdf { color: var(--danger); background: color-mix(in srgb, var(--danger) 12%, var(--ground)); border-color: color-mix(in srgb, var(--danger) 25%, var(--edge)); }
.badge-doc, .badge-docx { color: var(--deep); }
.badge-xls, .badge-xlsx, .badge-csv { color: var(--green-text); background: color-mix(in srgb, var(--green) 14%, var(--ground)); border-color: color-mix(in srgb, var(--green) 25%, var(--edge)); }
.badge-png, .badge-jpg, .badge-jpeg, .badge-heic { color: var(--amber); background: color-mix(in srgb, var(--amber) 14%, var(--ground)); border-color: color-mix(in srgb, var(--amber) 25%, var(--edge)); }
.file-main { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.file-name { font-weight: 600; color: var(--ink); overflow-wrap: anywhere; }
.file-desc { margin: 4px 0 0; font: italic 400 16px/1.45 var(--serif); color: var(--slate); overflow-wrap: anywhere; }
.icon-btn { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; color: var(--deep); background: var(--cirrus); border: 1px solid var(--edge); transition: background 150ms ease, transform 150ms var(--ease-spring); }
.icon-btn:hover { background: var(--vapor); transform: translateY(-1px); }
.text-btn { align-self: flex-start; background: none; border: 0; padding: 4px 0 0; font: 500 13px/1.3 var(--sans); color: var(--mist); cursor: pointer; }
.text-btn:hover { color: var(--danger); }
.drop { display: flex; flex-direction: column; gap: 10px; }
.drop-target { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 22px 16px; text-align: center; border: 1.5px dashed var(--edge); border-radius: 18px; background: color-mix(in srgb, var(--ground) 60%, transparent); cursor: pointer; transition: border-color 150ms ease, background 150ms ease; }
.drop-target svg { width: 28px; height: 28px; color: var(--sky); }
.drop-target:hover, .drop.over .drop-target { border-color: var(--sky); background: color-mix(in srgb, var(--sky) 8%, var(--ground)); }
.drop-chosen { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 16px; background: var(--ground); border: 1px solid var(--edge); }
.drop-chosen .badge { width: 34px; height: 40px; }
.drop-chosen .file-name { flex: 1; min-width: 0; font-size: 14px; }
.drop-chosen .text-btn { padding: 0; align-self: center; }
.drop-chosen .text-btn:hover { color: var(--deep); }
.drop .btn.slim { align-self: flex-end; background-image: linear-gradient(90deg, color-mix(in srgb, var(--on-ink) 22%, transparent) var(--pct, 0%), transparent var(--pct, 0%)); }
.room-jump { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; margin-top: -8px; padding: 7px 14px 7px 12px; border-radius: var(--r-pill); border: 1px solid var(--glass-line); background: var(--glass-strong); color: var(--ink); font: 500 13px/1.3 var(--sans); cursor: pointer; box-shadow: var(--lift-1); transition: transform 150ms var(--ease-spring), box-shadow 150ms ease; }
.room-jump .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); }
.room-jump:hover { transform: translateY(-1px); box-shadow: var(--lift-2); }
.room-jump:focus-visible, .room-tabs button:focus-visible { outline: 2px solid var(--sky); outline-offset: 2px; }
/* daily email */
.digest { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 14px 16px; border-radius: 18px; background: var(--ground); border: 1px solid var(--edge); box-shadow: var(--lift-1); }
.digest-icon { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; background: var(--cirrus); color: var(--deep); }
.digest-icon svg { width: 20px; height: 20px; }
.digest-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.digest-main .meta strong { color: var(--ink); font-weight: 600; overflow-wrap: anywhere; }
.switch { position: relative; width: 46px; height: 28px; border-radius: var(--r-pill); border: 0; background: var(--edge); cursor: pointer; transition: background 180ms var(--ease-out); }
.switch span { position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: var(--ground); box-shadow: var(--lift-2); transition: transform 180ms var(--ease-spring); }
.switch[aria-checked="true"] { background: var(--green); }
.switch[aria-checked="true"] span { transform: translateX(18px); }
.digest-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
.room-admin { display: flex; flex-direction: column; gap: 10px; padding-top: 14px; border-top: 1px solid var(--edge-soft); }
.room-admin .btn2 { align-self: flex-start; }
/* On a desk the room is wide enough to show the conversation and the files side by side. */
@media (min-width: 1024px) {
  .right .room { padding: 28px; }
  .right .room-tabs { display: none; }
  .right .room-body { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); column-gap: 24px; }
  .right .room .panel-messages, .right .room .panel-files, .right .room .panel-updates { display: flex !important; }
  .right .room .panel-updates { grid-column: 1 / -1; }
  .right .room .panel-messages { grid-row: 1 / span 1; }
}
@media (max-width: 380px) { .room { padding: 16px; } .digest-form { grid-template-columns: 1fr; } }