/* The desk: her face large, controls beside it in landscape and under it in
   portrait (a phone on a tripod, for recording). Built on the booth's
   styles.css for the face renderers and buttons. */
/* `hidden` must win over every display rule below (.desk-main is a grid, the
   settings a flex column), or a signed-out visitor sees the desk's controls. */
[hidden] { display: none !important; }

:root { --screen-bg: #1f3a5f; --screen-fg: #ffffff; --screen-accent: #bcd6ff; }
body.desk { margin: 0; min-height: 100vh; background: #0f1320; color: #e8ecf4; }

/* THE WHITE ROOM. With the Simli face the whole page takes her backdrop's
   shade (styles.css sets --room-tint white; live.js replaces it with the
   colour read off her first frames), so there is no edge anywhere round her:
   not the frame, not the page, not the panel of controls. */
body.desk.room-light { background: var(--room-tint); color: #1c2336; }
body.desk.room-light .desk-face .face-stage { background: var(--room-tint); box-shadow: none; }
body.desk.room-light .caption { color: #1c2336; text-shadow: none; background: rgba(255, 255, 255, 0.72); border-radius: 10px; padding: 10px 16px; }
body.desk.room-light .settings { border-color: rgba(28, 35, 54, 0.15); background: rgba(255, 255, 255, 0.5); }
body.desk.room-light .pick select, body.desk.room-light .input { background: #fff; color: #1c2336; border-color: rgba(28, 35, 54, 0.25); }
body.desk.room-light .transcript { background: rgba(255, 255, 255, 0.55); color: #1c2336; border: 1px solid rgba(28, 35, 54, 0.12); border-radius: 12px; padding: 8px 12px; }
body.desk.room-light .transcript .who { color: #4a5570; opacity: 1; }
/* The booth's buttons are white-on-dark; on white their ghost variant vanished
   (Hush, End my day, Desk settings, Sign out were near-invisible in the first
   screenshot). Dark ink and a visible edge for every button in the light. */
body.desk.room-light .btn { color: #1c2336; background: rgba(255, 255, 255, 0.9); border-color: rgba(28, 35, 54, 0.3); }
body.desk.room-light .btn:hover:not(:disabled) { background: #eef1f7; }
body.desk.room-light .btn--go, body.desk.room-light .btn--rec.is-on { color: #fff; background: #1e2a4d; border-color: #1e2a4d; }
body.desk.room-light .btn--rec.is-on { background: #b3261e; border-color: #b3261e; }
/* Hover (and a tap on iOS, where :hover sticks) must not turn the filled
   buttons' white labels onto the pale hover background above. */
body.desk.room-light .btn--go:hover:not(:disabled) { background: #2c3d6b; }
body.desk.room-light .btn--rec.is-on:hover:not(:disabled) { background: #9a1f18; }
body.desk.room-light .btn--ghost { background: transparent; }
body.desk.room-light .status { color: #1c2336; background: rgba(255, 255, 255, 0.8); border-color: rgba(28, 35, 54, 0.3); }
body.desk.room-light .links { opacity: 0.9; }
body.desk.room-light .gate-line { opacity: 0.9; }
body.desk.room-light .gate-error { color: #b3261e; }

.gate { max-width: 420px; margin: 18vh auto 0; padding: 0 16px; text-align: center; }
.gate h1 { font-size: 2.4rem; margin: 0 0 8px; }
.gate-line { opacity: 0.8; margin: 0 0 24px; }
.gate-error { color: #ff9a8a; min-height: 1.4em; margin-top: 16px; }
/* A draft his ended session left unsaved: readable and copyable at the door. */
/* Only word that a draft is kept, never its words (desk.js showKeptDraftAtGate). */
.gate-draft { margin-top: 16px; }
.gate-draft-text { margin: 0; opacity: 0.85; }

.desk-main { display: grid; grid-template-columns: minmax(0, 3fr) minmax(300px, 2fr); gap: 16px; padding: 16px; min-height: calc(100vh - 32px); box-sizing: border-box; }
@media (orientation: portrait), (max-width: 820px) {
  .desk-main { grid-template-columns: 1fr; }
}

/* Her frame: her face, and beside it (under it in portrait) her screen when
   something is on it. Rolando, 27 September: "give more space for her to show
   the alerts and full email and full files so i can see it on screen". The
   screen was a card over the corner of her face; it is now a panel with most
   of the width, and she steps aside for it rather than being covered. */
.desk-face { position: relative; min-width: 0; }
/* The booth's .face-wrap is painted near black (styles.css), and here it holds
   her frame AND her screen, so that black showed in the gap between them and
   round her frame's corners. Rolando, 27 September: "Why is that black area
   now showing. This should blend perfectly". The gap is the room. */
.face-wrap { position: relative; display: flex; gap: 14px; height: min(78vh, 100%); min-height: 360px; background: transparent; }
.face-stage { position: relative; flex: 1 1 100%; min-width: 0; border-radius: 16px; overflow: hidden; background: #1a2033; transition: flex-basis 0.3s ease; }
.face-wrap:has(> .screen:not([hidden])) .face-stage { flex: 0 0 40%; }
.desk-face .face-3d, .desk-face .face-live { position: absolute; inset: 0; width: 100%; height: 100%; }
.desk-face .caption { position: absolute; left: 5%; right: 5%; bottom: 4%; text-align: center; font-size: clamp(1rem, 2.4vw, 1.5rem); line-height: 1.35; text-shadow: 0 2px 8px rgba(0,0,0,0.8); }
.face-wrap:has(> .screen:not([hidden])) .caption { font-size: clamp(0.9rem, 1.6vw, 1.2rem); }
@media (orientation: portrait), (max-width: 820px) {
  .face-wrap { flex-direction: column; height: min(86vh, 100%); }
  .face-wrap:has(> .screen:not([hidden])) .face-stage { flex: 0 0 38%; }
}

/* Her screen: a coloured panel, any colour he likes (`?screen=<hex>`), so it
   reads as a screen on the white room and on the dark one. It scrolls; a long
   email or file is all there, and "scroll down" moves it. */
.screen { flex: 1 1 60%; min-width: 0; min-height: 0; overflow: auto; overscroll-behavior: contain; padding: 14px 20px 18px; border-radius: 16px; background: var(--screen-bg); color: var(--screen-fg); border: 1px solid rgba(255,255,255,0.18); box-shadow: 0 10px 30px rgba(0,0,0,0.22); animation: screen-in 0.28s ease-out; font-size: clamp(0.92rem, 1.25vw, 1.1rem); line-height: 1.5; box-sizing: border-box; }
@keyframes screen-in { from { opacity: 0; transform: translateX(10px); } to { opacity: 1; transform: none; } }
.screen-bar { position: sticky; top: -14px; margin: -14px -20px 10px; padding: 12px 12px 8px 20px; display: flex; align-items: center; gap: 8px; background: var(--screen-bg); z-index: 1; }
.screen-title { flex: 1; font-weight: 700; letter-spacing: 0.02em; color: var(--screen-accent); }
.screen-close { border: 0; background: rgba(255,255,255,0.14); color: inherit; width: 34px; height: 34px; border-radius: 50%; font-size: 1.3rem; line-height: 1; cursor: pointer; }
.screen-close:hover { background: rgba(255,255,255,0.28); }
.screen-rows { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.screen-rows li { display: flex; flex-wrap: wrap; gap: 2px 10px; padding: 8px 10px; border-radius: 10px; background: rgba(255,255,255,0.12); }
.screen-rows li.is-unread .screen-main { font-weight: 700; }
.screen-side { opacity: 0.8; min-width: 6em; }
.screen-main { flex: 1; min-width: 0; }
.screen-sub { flex-basis: 100%; opacity: 0.75; font-size: 0.9em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.screen-sub.is-wrapped { white-space: pre-wrap; }
.screen-head { display: grid; grid-template-columns: max-content 1fr; gap: 2px 12px; margin: 0 0 8px; font-size: 0.92em; }
.screen-head dt { opacity: 0.7; }
.screen-head dd { margin: 0; overflow-wrap: anywhere; }
.screen-subject { margin: 4px 0 10px; font-size: 1.15em; line-height: 1.3; }
.screen-body { white-space: pre-wrap; overflow-wrap: anywhere; }
.screen-body.is-hidden, .screen-note, .screen-working, .screen-meta { opacity: 0.8; font-style: italic; }
.screen-meta { font-style: normal; margin: -4px 0 10px; font-size: 0.9em; }
.screen-working::after { content: ""; display: inline-block; width: 1.2em; text-align: left; animation: dots 1.4s steps(4, end) infinite; }
@keyframes dots { 0% { content: ""; } 25% { content: "."; } 50% { content: ".."; } 75% { content: "..."; } }
.screen-attachments { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 14px; padding-top: 12px; border-top: 1px solid rgba(255,255,255,0.2); }
.screen-label { opacity: 0.75; font-size: 0.9em; margin-right: 4px; }
.screen-chip { border: 1px solid rgba(255,255,255,0.35); background: rgba(255,255,255,0.12); color: inherit; border-radius: 999px; padding: 6px 12px; font: inherit; font-size: 0.9em; cursor: pointer; }
.screen-chip:hover { background: rgba(255,255,255,0.24); }
.screen-pdf { display: block; width: 100%; height: calc(100% - 60px); min-height: 60vh; border: 0; border-radius: 8px; background: #fff; }
.screen-img { display: block; max-width: 100%; height: auto; margin: 0 auto; border-radius: 8px; background: #fff; }
/* A PDF drawn page by page where the browser has no viewer (Chrome on his
   Android tablet): white pages one under another, the panel's width, and the
   panel's own scroll ("scroll down") moves through them. */
.screen-pages { display: flex; flex-direction: column; gap: 10px; }
.screen-page { display: block; width: 100%; height: auto; border-radius: 4px; background: #fff; box-shadow: 0 2px 8px rgba(0,0,0,0.25); }
.screen-link, .screen-sources a { color: var(--screen-accent); }
.screen-link { display: inline-block; margin-top: 10px; }
.screen-report .screen-h, .screen > .screen-h { margin: 14px 0 6px; font-size: 1.02em; color: var(--screen-accent); }
.screen-report .screen-p { margin: 0 0 10px; }
.screen-points { margin: 0 0 10px; padding-left: 1.3em; }
.screen-points li { margin: 3px 0; }
.screen-sources { margin: 0; padding-left: 1.5em; font-size: 0.92em; }
.screen-cite { color: var(--screen-accent); font-size: 0.8em; vertical-align: super; text-decoration: none; margin-left: 1px; }
.screen-cite:hover { text-decoration: underline; }
.screen-suggest { display: block; width: 100%; height: 64px; border: 0; margin: 10px 0 0; border-radius: 10px; background: #fff; }
.screen-sources li { margin: 4px 0; overflow-wrap: anywhere; }
/* Word, Excel and PowerPoint files (and Google's Docs, Sheets and Slides) on
   her screen, drawn from the words office.js read out of them. Rolando, 27
   September: "we need to be able to open office files and google files.
   example word, excel, powerpoints". The panel is always its own deep blue,
   so none of this needs a dark-mode twin. */
.screen-doc .screen-h { margin: 14px 0 6px; font-size: 1.02em; color: var(--screen-accent); }
.screen-doc h3.screen-h { font-size: 1.12em; }
.screen-doc .screen-p { margin: 0 0 10px; white-space: pre-wrap; overflow-wrap: anywhere; }
.screen-doc .screen-points li { white-space: pre-wrap; overflow-wrap: anywhere; }
/* A list inside a list, by its level in Word. */
.screen-points li[data-level="2"] { margin-left: 1.3em; }
.screen-points li[data-level="3"] { margin-left: 2.6em; }
.screen-points li[data-level="4"] { margin-left: 3.9em; }
.screen-points li[data-level="5"] { margin-left: 5.2em; }
.screen-points li[data-level="6"] { margin-left: 6.5em; }
/* A table scrolls sideways in its own box, so a wide one never widens the panel. */
.screen-scroll { overflow: auto; max-width: 100%; margin: 0 0 12px; -webkit-overflow-scrolling: touch; }
.screen-table { width: 100%; border-collapse: collapse; font-size: 0.92em; line-height: 1.35; }
.screen-table th, .screen-table td { border: 1px solid rgba(255,255,255,0.25); padding: 4px 8px; white-space: pre-wrap; overflow-wrap: anywhere; vertical-align: top; text-align: left; }
/* A sheet: as wide as its columns need, each column a readable width, with
   Excel's frame (column letters, row numbers) held in place as it scrolls.
   Its box is no taller than the panel, less the panel's title bar, and
   scrolls both ways itself: a box that only scrolled sideways carried the
   column letters away as the panel scrolled down. ("Scroll down" moves the
   sheet in view, then the panel; screen.js.) Each column is as wide as its
   words, 6em to 22em: a table only as wide as the panel squeezed a wide
   sheet's columns to a few letters each (and ignores a cell's max-width),
   so the table is as wide as its columns want, and scrolls sideways. */
.screen-scroll.is-sheet-box { max-height: calc(100% - 3.5rem); }
.screen-table.is-sheet { width: max-content; min-width: 100%; }
.screen-table.is-sheet td { min-width: 6em; max-width: 22em; overflow-wrap: break-word; }
.screen-table.is-sheet th { position: sticky; background: var(--screen-bg); color: var(--screen-accent); font-weight: 600; font-size: 0.85em; text-align: center; white-space: nowrap; }
.screen-table.is-sheet thead th { top: 0; z-index: 1; }
.screen-table.is-sheet tbody th { left: 0; }
.screen-table.is-sheet thead th.screen-corner { left: 0; z-index: 2; }
/* A slide: a card of its own, its number small above its title. */
.screen-slide { background: rgba(255,255,255,0.10); border-radius: 12px; padding: 12px 16px; margin: 0 0 12px; }
.screen-slide .screen-h { margin: 2px 0 8px; font-size: 1.1em; color: var(--screen-accent); }
.screen-slide .screen-p { margin: 0 0 6px; white-space: pre-wrap; overflow-wrap: anywhere; }
.screen-slide-no { margin: 0; font-size: 0.8em; opacity: 0.7; }
.screen-slide-notes { margin: 10px 0 0; padding-top: 8px; border-top: 1px solid rgba(255,255,255,0.25); font-style: italic; opacity: 0.8; white-space: pre-wrap; overflow-wrap: anywhere; }
.screen-draft .draft-to, .screen-draft .draft-subject { margin: 2px 0; opacity: 0.9; }
.screen-draft .draft-body { white-space: pre-wrap; font: inherit; margin: 12px 0; padding: 12px; border-radius: 10px; background: rgba(255,255,255,0.1); }
.screen-actions { display: flex; gap: 8px; flex-wrap: wrap; }
/* Buttons on the blue panel, in either room. Specific enough to beat the
   room-light rules above, which are written for the white page. */
body.desk .screen .btn.btn--go { color: var(--screen-bg); background: #fff; border-color: #fff; }
body.desk .screen .btn.btn--ghost { color: #fff; background: transparent; border-color: rgba(255,255,255,0.6); }

.rec { position: absolute; top: 12px; right: 12px; z-index: 5; padding: 4px 10px; border-radius: 999px; background: rgba(200, 30, 30, 0.85); color: #fff; font-size: 0.85rem; font-weight: 600; letter-spacing: 0.02em; }
/* What her ears are doing. Shown in the clean view, where the status is gone. */
.ears { position: absolute; top: 12px; left: 12px; z-index: 5; padding: 4px 12px; border-radius: 999px; font-size: 0.82rem; font-weight: 600; background: rgba(15, 19, 32, 0.55); color: #fff; }
.ears[data-state="armed"] { background: rgba(28, 140, 100, 0.9); }
.ears[data-state="dead"] { background: rgba(179, 38, 30, 0.9); }
body.desk.room-light .ears[data-state="idle"] { background: rgba(255,255,255,0.8); color: #1c2336; border: 1px solid rgba(28, 35, 54, 0.2); }

/* THE CLEAN VIEW. "since she is hands free lets be able to hide those options
   on the screen to give her a cleaner look". Her frame takes the whole page;
   one faint button, "hide/show the controls" by voice, or Escape brings them
   back. */
body.clean .desk-main { grid-template-columns: 1fr; }
body.clean .desk-side { display: none; }
body.clean .face-wrap { height: calc(100vh - 32px); height: calc(100dvh - 32px); }
body:not(.clean):not(.dozing) .ears { display: none; }
body.desk.room-light .ears[data-state="dozing"] { background: rgba(255,255,255,0.8); color: #1c2336; border: 1px solid rgba(28, 35, 54, 0.2); }
.unclean { position: fixed; left: 14px; bottom: 14px; z-index: 20; padding: 6px 12px; border-radius: 999px; border: 1px solid rgba(128,128,128,0.35); background: rgba(128,128,128,0.12); color: inherit; font: inherit; font-size: 0.8rem; opacity: 0.35; cursor: pointer; }
.unclean:hover, .unclean:focus-visible { opacity: 1; }
body:not(.clean) .unclean { display: none; }
/* Present slides sits beside Controls in the clean view; the label opens the
   same picker as the side panel's button, before or after Start my day. */
.present-fab { left: auto; right: 14px; opacity: 0.7; }
body.clean .present-fab { display: inline-block; }
body:not(.clean) .present-fab { display: none; }
.notice { position: fixed; left: 50%; bottom: 16px; transform: translateX(-50%); z-index: 20; max-width: min(640px, 90vw); margin: 0; padding: 10px 16px; border-radius: 12px; background: rgba(15, 19, 32, 0.9); color: #fff; font-size: 0.92rem; box-shadow: 0 6px 20px rgba(0,0,0,0.25); }
body:not(.clean) .notice { display: none; }
/* Type or research, in the clean view (desk.js setAsk): a pill above Present
   slides opens a bar over the bottom of her frame, above Controls and Present
   slides; her caption and any notice move up out of its way. Rolando, 3
   October: "we need to be able to use her as a case researcher. not only
   audio". The bar is display:flex, so [hidden] needs its own rule. */
.ask-fab { left: auto; right: 14px; bottom: 56px; opacity: 0.7; }
body.ask-open .ask-fab { display: none; }
.ask-bar { position: fixed; left: 50%; bottom: 56px; transform: translateX(-50%); z-index: 22; box-sizing: border-box; width: min(760px, calc(100vw - 28px)); display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 10px; border-radius: 14px; background: rgba(15, 19, 32, 0.9); box-shadow: 0 6px 20px rgba(0,0,0,0.3); }
.ask-bar[hidden], body:not(.clean) .ask-bar, body.deck-on .ask-bar { display: none; }
.ask-bar .input { flex: 1 1 220px; }
.ask-bar .file { cursor: pointer; text-align: center; }
body.ask-open:not(.deck-on) .notice { bottom: auto; top: 16px; }
body.ask-open:not(.deck-on) .desk-face .caption { bottom: 150px; }
/* Her screen runs under the bar: its last lines can still scroll up above it. */
body.ask-open:not(.deck-on) .face-wrap > .screen { padding-bottom: 170px; }

.desk-side { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.desk-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
/* The booth pins .status to the page's top-left corner; at the desk it lives
   in the header beside the links, where it was drawn over her face before. */
.desk-head .status { position: static; }
.links { font-size: 0.8rem; opacity: 0.75; }
.row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.row--sub { font-size: 0.9rem; }
.pick { display: inline-flex; gap: 6px; align-items: center; }
.pick select { background: #1a2033; color: inherit; border: 1px solid #334; border-radius: 8px; padding: 4px 6px; }
.btn--rec.is-on { background: #b3261e; color: #fff; }
.settings { display: flex; flex-direction: column; gap: 8px; padding: 12px; border: 1px solid #2a3350; border-radius: 12px; }
.settings .file { cursor: pointer; text-align: center; }
.names { border: 0; padding: 0; margin: 0; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.names legend { padding: 0; font-weight: 600; }
.names .input { flex: 1 1 8em; min-width: 0; }
.names-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.names-list li { display: flex; gap: 8px; align-items: center; justify-content: space-between; }
/* A long one-word name wraps inside its row, and Remove stays on the screen. */
.names-list li span { min-width: 0; overflow-wrap: anywhere; }
.names-list li button { flex: 0 0 auto; }
/* His voice: the line he reads to teach her, large enough to read from his chair. */
.voice { border: 0; padding: 0; margin: 0; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.voice legend { padding: 0; font-weight: 600; }
.voice-panel { display: flex; flex-direction: column; gap: 6px; }
.voice-phrase { margin: 0; font-size: 1.35em; line-height: 1.35; font-weight: 600; overflow-wrap: anywhere; }
/* While he teaches her his voice, the lines sit over her face, large enough
   to read from his chair (desk.js startTeaching moves the panel here). */
.face-stage > .voice-panel { position: absolute; left: 50%; bottom: 5%; transform: translateX(-50%); z-index: 30; box-sizing: border-box; width: min(92%, 52rem); max-height: 90%; overflow: auto; padding: 18px 22px; gap: 10px; align-items: center; text-align: center; border-radius: 16px; background: rgba(255, 255, 255, 0.97); color: #10131c; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.45); }
.face-stage > .voice-panel .sub { margin: 0; color: #3a4152; font-size: clamp(1rem, 1.8vw, 1.35rem); }
.face-stage > .voice-panel .voice-phrase { font-size: clamp(1.5rem, 3.4vw, 2.6rem); }
.face-stage > .voice-panel .btn { color: #10131c; border-color: rgba(16, 19, 28, 0.35); background: transparent; }
/* On a slide her face is a corner tile; the lines then sit over the slide. */
body.deck-on .face-stage > .voice-panel { position: fixed; bottom: 6vh; width: min(92vw, 52rem); }
.transcript { flex: 1; overflow: auto; max-height: 40vh; font-size: 0.92rem; }
.transcript p { margin: 6px 0; }
.transcript .who { opacity: 0.6; margin-right: 6px; }

/* Recording: the controls stay usable for him but the transcript, which can
   carry what he said out loud, is hidden from the frame. */
body.recording .transcript, body.recording .settings, body.recording .links, body.recording .ears, body.recording .notice { display: none; }

/* Who she is working with, not known yet (desk.js setWhoWait): Talk and End
   my day stay, but his transcript and Desk settings are not for whoever
   tapped Start my day (Rolando, 29 September: "it may not be me"). */
body.who-wait .transcript, body.who-wait .settings, body.who-wait #menu { display: none; }

/* PRESENTING (present.js). Rolando, 2 October: "the slides and Judy together
   in her browser app", projected from his laptop as one window. The slide
   takes most of the room and she stands beside it (under it in portrait);
   her screen and the controls step away, and Back / Next / Pause sit under
   the slide. */
.row .file { cursor: pointer; text-align: center; }
.deck { position: relative; flex: 1 1 74%; min-width: 0; min-height: 0; display: flex; flex-direction: column; gap: 10px; }
.deck-frame { position: relative; flex: 1 1 auto; min-height: 0; display: flex; align-items: center; justify-content: center; }
.deck-slide { position: relative; width: 100%; height: 100%; max-height: 100%; display: flex; align-items: center; justify-content: center; }
.deck-page { display: block; max-width: 100%; max-height: 100%; border-radius: 6px; box-shadow: 0 6px 28px rgba(0, 0, 0, 0.18); background: #fff; }
.deck-card { box-sizing: border-box; width: 100%; max-height: 100%; aspect-ratio: 16 / 9; padding: 4% 5%; border-radius: 10px; background: #ffffff; color: #1c2336; box-shadow: 0 6px 28px rgba(0, 0, 0, 0.18); display: flex; flex-direction: column; gap: 3%; overflow: hidden; }
.deck-title { margin: 0; font-size: clamp(1.4rem, 3.2vw, 3rem); line-height: 1.15; }
.deck-body { flex: 1 1 auto; min-height: 0; display: flex; gap: 4%; }
.deck-points { margin: 0; padding-left: 1.2em; flex: 1 1 auto; min-width: 0; font-size: clamp(1rem, 1.9vw, 1.9rem); line-height: 1.35; overflow: hidden; }
.deck-points li { margin: 0.25em 0; }
.deck-body--pics .deck-points { flex: 1 1 50%; }
.deck-pics { flex: 1 1 50%; min-width: 0; min-height: 0; display: grid; gap: 8px; }
.deck-body:not(:has(.deck-points)) .deck-pics { flex-basis: 100%; }
.deck-pics--2 { grid-template-columns: 1fr 1fr; }
.deck-pics--3, .deck-pics--4 { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }
.deck-pic { width: 100%; height: 100%; min-height: 0; object-fit: contain; }
.deck-bar { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; justify-content: center; }
.deck-count { min-width: 4.5em; text-align: center; font-variant-numeric: tabular-nums; font-weight: 600; }
.deck[data-paused="1"] .deck-count::after { content: " · paused"; font-weight: 400; opacity: 0.7; }
.deck[data-following="1"] .deck-count::after { content: " · you"; font-weight: 400; opacity: 0.7; }
.deck-empty { margin: auto; max-width: 30em; text-align: center; display: flex; flex-direction: column; gap: 14px; align-items: center; }
body.deck-on .desk-main { grid-template-columns: 1fr; }
body.deck-on .desk-side { display: none; }
body.deck-on .unclean, body.deck-on .present-fab { display: none; }
body.deck-on .face-wrap { height: calc(100vh - 32px); height: calc(100dvh - 32px); }
body.deck-on .face-wrap .screen { display: none !important; }
body.deck-on #face-wrap .face-stage { flex: 0 0 30%; }
body.deck-on .desk-face .caption { font-size: clamp(0.85rem, 1.3vw, 1.1rem); }
@media (orientation: portrait), (max-width: 820px) {
  body.deck-on #face-wrap .face-stage { flex: 0 0 32%; }
}

/* A sheet presented (present.js sheetSlides): its top rows as a table. */
.deck-table-wrap { overflow: hidden; max-width: 100%; }
.deck-table { border-collapse: collapse; font-size: clamp(0.8rem, 1.6vw, 1.15rem); }
.deck-table th, .deck-table td { border: 1px solid rgba(128,128,128,0.35); padding: 4px 10px; text-align: left; vertical-align: top; max-width: 22ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.deck-table th { font-weight: 700; background: rgba(128,128,128,0.12); }
.deck-more { margin: 8px 0 0; opacity: 0.7; font-size: 0.9rem; }
.deck-points--prose { list-style: none; padding-left: 0; font-size: clamp(0.9rem, 1.45vw, 1.4rem); }
.deck-points--prose li { margin: 0.4em 0; }

/* "Layout: big slide" (the default): the slide takes the whole screen and
   she stands in its lower right corner, as a speaker does on a video call. */
body.deck-on.deck-big .deck { flex: 1 1 100%; }
body.deck-on.deck-big #face-wrap .face-stage { position: absolute; right: 12px; bottom: 12px; z-index: 6; flex: none; width: clamp(150px, 19vw, 360px); aspect-ratio: 4 / 5; border-radius: 14px; box-shadow: 0 8px 30px rgba(0, 0, 0, 0.45); border: 2px solid rgba(255, 255, 255, 0.18); }
body.deck-on.deck-big .desk-face .caption { font-size: clamp(0.7rem, 0.95vw, 0.95rem); }
body.deck-on.deck-big #face-wrap .face-stage .ears, body.deck-on.deck-big #face-wrap .face-stage .rec { transform: scale(0.8); transform-origin: top left; }
/* Full screen: nothing of the page around the slide. */
body.deck-on:fullscreen .face-wrap, :fullscreen body.deck-on .face-wrap { height: calc(100vh - 16px); }
/* A new slide fades in, as a slideshow's does. */
.deck-slide > * { animation: deck-in 0.35s ease-out; }
@keyframes deck-in { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .deck-slide > * { animation: none; } }
/* Big slide: his buttons float over the foot of the slide and fade when the
   mouse is still, so the screen shows the slide and her, nothing else. */
body.deck-on.deck-big .deck-bar { position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%); z-index: 7; width: max-content; max-width: calc(100% - 24px); padding: 8px 10px; border-radius: 14px; background: rgba(12, 16, 28, 0.88); box-shadow: 0 6px 24px rgba(0, 0, 0, 0.4); transition: opacity 0.4s ease; }
body.deck-on.deck-big .deck:not([data-bar="1"]) .deck-bar { opacity: 0; }
body.deck-on.deck-big .deck:not([data-bar="1"]) { cursor: none; }

/* RESEARCH MODE (matters.js). Rolando, 3 October: his matters on the left,
   the work in the middle, the source passage on the right, her voice still
   there. Over her frame, on light paper whatever the room's shade, for long
   reading. Stacked on a narrow screen. Her face stays, small, in the lower
   left corner over the list, as on a video call; her captions go to the
   conversation strip. */
.research { position: fixed; inset: 0; z-index: 40; display: flex; flex-direction: column; background: #eef1f6; color: #1c2336; font-size: 0.98rem; line-height: 1.45; }
.research[hidden] { display: none; }
.rs-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 10px 16px; background: #fff; border-bottom: 1px solid #d6dbe6; }
/* Her other functions from here, Back to Judy last (desk.js rsType, rsCare). */
.rs-switch { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.rs-name { font-size: 1.05rem; }
.rs-state { flex: 1; color: #4a5570; font-size: 0.88rem; }
.rs-panes { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(200px, 1fr) minmax(0, 2.4fr) minmax(0, 1.8fr); gap: 12px; padding: 12px; }
.rs-pane { min-height: 0; overflow: auto; overscroll-behavior: contain; background: #fff; border: 1px solid #d6dbe6; border-radius: 12px; padding: 14px 16px; box-sizing: border-box; }
.rs-list { padding-bottom: calc(clamp(120px, 14vw, 220px) * 1.25 + 28px); }
.research .sub { color: #4a5570; font-size: 0.88rem; margin: 4px 0; }
.research h2 { margin: 0 0 6px; font-size: 1.25rem; }
.research h3 { margin: 0 0 8px; font-size: 1.02rem; }
.research h4 { margin: 0; font-size: 1rem; }
.research ul, .research ol { margin: 0; padding-left: 1.2em; }
.research li { margin: 6px 0; }
.research .row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 8px 0; }
.research .btn { color: #1c2336; background: #fff; border-color: rgba(28, 35, 54, 0.3); }
.research .btn:hover:not(:disabled) { background: #eef1f7; }
.research .btn--go { color: #fff; background: #1e2a4d; border-color: #1e2a4d; }
.research .btn--go:hover:not(:disabled) { background: #2c3d6b; }
.research .btn[aria-pressed="true"] { outline: 3px solid #7aa2ff; outline-offset: 1px; }
.research .input { box-sizing: border-box; width: 100%; background: #fff; color: #1c2336; border: 1px solid rgba(28, 35, 54, 0.3); border-radius: 8px; padding: 8px 10px; font: inherit; }
.research .row .input { width: auto; flex: 1 1 200px; }
.research .file { cursor: pointer; }
.rs-field { display: flex; flex-direction: column; gap: 4px; margin: 8px 0; font-weight: 600; font-size: 0.9rem; }
.rs-field > .input { font-weight: 400; }
.rs-new { width: 100%; margin-bottom: 12px; }
.rs-matters { list-style: none; padding: 0; }
.rs-matter { display: flex; flex-direction: column; gap: 2px; width: 100%; text-align: left; padding: 8px 10px; border-radius: 8px; border: 1px solid transparent; background: transparent; color: inherit; font: inherit; cursor: pointer; }
.rs-matter:hover { background: #f1f4fa; }
.rs-matter[aria-current="true"] { background: #e3eafc; border-color: #b8c7f0; }
.rs-matter-title { font-weight: 600; }
.rs-matter-when { font-size: 0.8rem; color: #4a5570; }
.rs-kept { margin-top: 14px; }
.rs-head { margin-bottom: 8px; }
.rs-convo { border: 1px solid #d6dbe6; border-radius: 10px; padding: 8px 10px; margin: 8px 0 12px; background: #f7f9fc; }
.rs-convo-lines { max-height: 9.5em; overflow: auto; }
.rs-convo-lines:empty::before { content: "Ask Judy about this matter by voice, or type below."; color: #4a5570; font-size: 0.88rem; }
.rs-said { margin: 2px 0; }
.rs-details { margin: 8px 0; }
.rs-details > summary, .rs-version > summary { cursor: pointer; font-weight: 600; }
.rs-papers { margin: 12px 0; }
.rs-paper-list { list-style: none; padding: 0; }
.rs-paper-list li { display: flex; gap: 8px; align-items: center; }
.rs-paper { flex: 1; text-align: left; background: none; border: none; color: #1d4ed8; text-decoration: underline; font: inherit; cursor: pointer; padding: 2px 0; }
.rs-x { font-size: 0.8rem; padding: 2px 8px; }
.rs-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 8px; }
.rs-busy { padding: 8px 10px; border-radius: 8px; background: #fff7e0; border: 1px solid #f0d58a; margin: 8px 0; }
.rs-summary { margin: 8px 0; padding: 8px 10px; border-radius: 8px; font-weight: 600; }
.rs-summary[data-state="found"] { background: #e3f6ec; border: 1px solid #9ad2b4; }
.rs-summary[data-state="missing"] { background: #fdeceb; border: 1px solid #eba59f; }
.rs-summary[data-state="pending"] { background: #f1f4fa; border: 1px solid #d6dbe6; }
.rs-problem { color: #9b1c13; font-weight: 600; }
.rs-ask { padding: 8px 10px; border-radius: 8px; background: #e3eafc; font-weight: 600; }
.rs-block { margin: 14px 0; padding-top: 10px; border-top: 1px solid #e3e7ef; }
.rs-other { background: #fdeceb; border: 1px solid #eba59f; border-radius: 8px; padding: 10px 12px; }
.rs-pending { background: #fff7e0; border: 1px solid #f0d58a; border-radius: 8px; padding: 10px 12px; }
.rs-label, .rs-status { display: inline-block; font-size: 0.78rem; font-weight: 700; padding: 1px 8px; border-radius: 999px; background: #e3e7ef; color: #1c2336; }
.rs-facts li[data-label="documented"] .rs-label { background: #d5f0e1; }
.rs-facts li[data-label="allegation"] .rs-label { background: #fde7c7; }
.rs-facts li[data-label="disputed"] .rs-label { background: #f9d3cf; }
.rs-facts li[data-label="assumption"] .rs-label { background: #e6ddfb; }
.rs-elements li[data-status="shown"] .rs-status { background: #d5f0e1; }
.rs-elements li[data-status="contested"] .rs-status { background: #fde7c7; }
.rs-elements li[data-status="against"] .rs-status { background: #f9d3cf; }
.rs-evidence { display: flex; flex-direction: column; gap: 4px; margin: 4px 0 0; }
.rs-quote { display: block; width: 100%; text-align: left; font: inherit; font-size: 0.92rem; padding: 6px 10px; border-radius: 8px; border: 1px solid #d6dbe6; border-left-width: 4px; background: #fafbfd; color: inherit; cursor: pointer; }
.rs-quote q { font-style: italic; }
.rs-check { display: inline-block; margin-left: 4px; font-size: 0.76rem; font-weight: 700; padding: 0 6px; border-radius: 999px; background: #e3e7ef; }
.rs-quote[data-check="found"] { border-left-color: #2f9e6a; }
.rs-quote[data-check="found"] .rs-check { background: #d5f0e1; color: #155c3b; }
.rs-quote[data-check="missing"] { border-left-color: #c0392b; }
.rs-quote[data-check="missing"] .rs-check { background: #f9d3cf; color: #7d1d14; }
.rs-quote[data-check="gone"] { border-left-color: #9aa3b5; }
.rs-quote[data-check="elided"] { border-left-color: #c58b10; }
.rs-quote[data-check="elided"] .rs-check { background: #f8e9c4; color: #6b4a05; }
.rs-case { border: 1px solid #d6dbe6; border-radius: 10px; padding: 10px 12px; margin: 10px 0; }
.rs-case--contrary { border-left: 4px solid #c0392b; }
.rs-case--support { border-left: 4px solid #2f9e6a; }
.rs-case-name { background: none; border: none; padding: 0; font: inherit; font-weight: 700; color: #1d4ed8; text-decoration: underline; cursor: pointer; text-align: left; }
.rs-src-title { margin: 0 0 4px; }
.rs-src-cite { margin: 2px 0; color: #4a5570; font-size: 0.88rem; }
.rs-binding { margin: 4px 0; font-size: 0.88rem; }
.rs-binding b { display: inline-block; padding: 0 8px; border-radius: 999px; background: #e3e7ef; }
.rs-binding[data-label="binding"] b { background: #1e2a4d; color: #fff; }
.rs-binding[data-label="persuasive"] b { background: #e3eafc; }
.rs-binding[data-label="check"] b { background: #fde7c7; }
.rs-treat { margin: 4px 0; font-size: 0.82rem; color: #7a4b00; }
.rs-link { display: inline-block; margin: 4px 0 8px; color: #1d4ed8; }
.rs-src-text { white-space: pre-wrap; overflow-wrap: anywhere; font-family: Georgia, "Times New Roman", serif; font-size: 0.95rem; line-height: 1.55; margin-top: 10px; }
.rs-src-text mark { background: #ffe58a; color: inherit; padding: 1px 0; box-shadow: 0 0 0 2px #ffe58a; }
.rs-danger { margin-top: 24px; padding-top: 12px; border-top: 1px solid #e3e7ef; }
.rs-start { max-width: 46rem; }
.rs-desc { min-height: 8em; }
/* Her face, small, in the lower left over his list. No ancestor of the stage
   has a transform, so fixed is the viewport's corner. */
body.research-on #face-wrap .face-stage { position: fixed; left: 24px; bottom: 24px; z-index: 41; flex: none; width: clamp(120px, 14vw, 220px); aspect-ratio: 4 / 5; height: auto; border-radius: 14px; box-shadow: 0 8px 30px rgba(0, 0, 0, 0.35); border: 2px solid #fff; }
body.research-on .desk-face .caption, body.research-on .face-stage .voice-panel { display: none; }
body.research-on .unclean, body.research-on .ask-bar, body.research-on .notice { display: none !important; }
/* The way in from the clean view, above "Type or research". */
.research-fab { left: auto; right: 14px; bottom: 98px; opacity: 0.7; }
body.ask-open .research-fab, body.deck-on .research-fab { display: none; }
@media (orientation: portrait), (max-width: 820px) {
  .rs-panes { grid-template-columns: 1fr; grid-auto-rows: minmax(min-content, auto); overflow: auto; }
  .rs-pane { overflow: visible; }
  .rs-list { padding-bottom: 14px; }
  body.research-on #face-wrap .face-stage { left: auto; right: 12px; bottom: 12px; width: 96px; }
}

/* A MENTAL HEALTH CONVERSATION (care.js). The panel is her screen's place and
   her screen's colours; while it is on her screen stays away, and the pill
   that opens it in the clean view sits above the Research pill (which sits
   above Type or research). Plain words only on it: no scores, no timings. */
.care-fab { left: auto; right: 14px; bottom: 140px; opacity: 0.7; }
body.clean .care-fab { display: inline-block; }
body:not(.clean) .care-fab, body.care-on .care-fab, body.deck-on .care-fab, body.recording .care-fab { display: none; }
body.care-on .face-wrap > #screen { display: none !important; }
.care .care-state { font-size: 0.9em; opacity: 0.85; margin-right: 6px; white-space: nowrap; }
.care .care-line { margin: 0 0 10px; font-size: 0.95em; line-height: 1.45; }
.care .care-bounds { font-weight: 600; }
.care .care-privacy { opacity: 0.85; }
.care.is-private .care-privacy { border-left: 3px solid var(--screen-accent); padding-left: 10px; }
.care .care-ask { margin: 12px 0 8px; font-size: 1.1em; font-weight: 700; color: var(--screen-accent); }
.care .care-needs, .care .care-chips { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 12px; }
.care .screen-chip.is-on { background: var(--screen-accent); color: var(--screen-bg); border-color: var(--screen-accent); font-weight: 700; }
.care .care-skills, .care .care-urgent, .care .care-proposal, .care .care-notes { margin: 0 0 12px; padding: 10px 12px; border-radius: 10px; background: rgba(255,255,255,0.12); }
.care .care-urgent { background: rgba(255, 210, 120, 0.22); border: 1px solid rgba(255, 210, 120, 0.6); }
.care .care-urgent .care-line { font-weight: 600; margin: 0; }
.care .care-proposal-text { width: 100%; box-sizing: border-box; margin: 4px 0 10px; }
.care .care-notes-list { list-style: none; margin: 0 0 6px; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.care .care-notes-list li { display: flex; gap: 10px; align-items: center; justify-content: space-between; padding: 6px 8px; border-radius: 8px; background: rgba(255,255,255,0.1); }
.care .care-note-text { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.care .care-empty { margin: 0; opacity: 0.75; font-style: italic; }
.care .care-controls { margin-top: 6px; padding-top: 10px; border-top: 1px solid rgba(255,255,255,0.2); }
.care .care-private { display: inline-flex; align-items: center; gap: 6px; font-size: 0.92em; }
.care.is-paused .care-needs, .care.is-paused .care-skills, .care.is-paused .care-ask { opacity: 0.45; }
/* While she waits to know who it is, only a guest's conversation shows: it
   carries none of his notes (care.js opens it private, with its notes list
   emptied), and help never waits on who it is (Rolando's review, 3 October). */
body.recording #care, body.who-wait #care:not(.is-guest) { display: none !important; }

/* MORE OF JUDY (functions.js): her functions on the booth and the My Case
   portals, each in its own tab. The pill sits above Mental health in the
   clean view; the menu sits above everything, Research mode too. */
.more-fab { left: auto; right: 14px; bottom: 182px; opacity: 0.7; }
body.clean .more-fab { display: inline-block; }
body:not(.clean) .more-fab, body.care-on .more-fab, body.deck-on .more-fab, body.recording .more-fab { display: none; }
.more-menu { position: fixed; right: 14px; bottom: 224px; z-index: 50; box-sizing: border-box; width: min(340px, calc(100vw - 28px)); max-height: calc(100vh - 240px); overflow: auto; display: flex; flex-direction: column; gap: 6px; padding: 12px; border-radius: 14px; background: rgba(15, 19, 32, 0.94); color: #fff; box-shadow: 0 6px 20px rgba(0,0,0,0.3); }
.more-menu[hidden] { display: none; }
body.research-on .more-menu { top: 64px; bottom: auto; }
body:not(.clean):not(.research-on) .more-menu { bottom: auto; top: 64px; }
.more-menu .more-head { margin: 0 0 4px; font-weight: 600; }
.more-menu .more-link { display: flex; flex-direction: column; padding: 8px 10px; border-radius: 10px; border: 1px solid rgba(255,255,255,0.25); color: #fff; text-decoration: none; }
.more-menu .more-link:hover, .more-menu .more-link:focus-visible { background: rgba(255,255,255,0.1); }
.more-menu .more-link span { font-size: 0.85em; opacity: 0.8; }
.more-menu .more-close { align-self: flex-end; color: #fff; border-color: rgba(255,255,255,0.6); }