/* The desk and the room, round 4 part 3 (Chris's list of 17 October, evening): the columns that
   scroll by themselves (G2), answering whoever waits on you (E4), what Nestor closed for you (E2),
   and the room's activity column that folds away (F6). Its own file because style.css is at its
   800-line ceiling. */
/* E4: an answer to whoever waits on you, under his item. */
.answer-state { margin: 6px 0 0; font-size: 13px; color: var(--muted); }
.answer-form { display: grid; gap: 8px; margin-top: 8px; }
.answer-form textarea { width: 100%; box-sizing: border-box; }
.answer-form .row { display: flex; align-items: center; gap: 10px; }
.answer-form .msg { margin: 0; }
/* E2: what Nestor closed for you this week, each with his line and an Undo. */
.closed-fold { margin-top: 10px; }
.closed-fold summary { cursor: pointer; font-size: 14px; color: var(--muted); }
.item.owed.closed .why { color: var(--muted); }
/* G2: on a wide screen each column of the desk scrolls by itself, so one stays still while you
   move another. These two rules alone do it: take them out and the desk scrolls as one page again.
   Each column's top and its last item are always in reach.
   J, round 6 (Chris, 18 Oct, night: on an iPad held sideways a glide in one lane went on while he
   scrolled the other; "ideally you could slide one lane up and the other down simultaneously"): with
   two columns the right-hand pair is one lane (app.js balance moves the third column's sections into
   the second), and both lanes scroll on their own the same way: a finger moves only the lane under
   it, two fingers two lanes at once, and the page itself stays still. */
/* Round 8, A2 (Chris, 19 Oct: "the first scroll of any row on the desk should scroll alongside all the
   others, to hide the header ... smoothly instead of this separated pull ... and think of a similar fixed
   ux for the return"; "the bottom edge of the desk ... still creates a black shade line"), done again on
   20 Oct (Chris: "when I swipe up ... all the sections swipe up and get stuck ... It halts my movement. If
   I swipe from a row, I wanna move through up and down the row and not get stuck"). The first try moved the
   page itself by the header's height before any column; but a browser hands a swipe on from a column to
   the page, never from the page to a column, so his swipe stopped dead, and the flick that brought the
   header back locked every column. Now the page never moves. Each column is the window's full height and
   always scrolls on its own; its content starts below the header (--head-h), and the header is drawn over
   the columns' tops, going and coming back with whichever column he moves, every other column with it
   (desk-tuck.js). A strip of the page's colour stays at the top (the iPad's status bar, and 12px); the
   columns end at the window's own edge (no fade); a pull at a column's top or foot never drags the page. */
/* The space spare at a column's foot (desk-tuck.js), the column's own: no section in it is restyled when it changes. */
@property --spare { syntax: '<length>'; inherits: false; initial-value: 0px; }
/* A lane scrolls up and down only (Chris, 5 Nov, iPad upright: the left lane stood slid sideways, its words cut at its left edge): its overflow
   across was a scroller too, so anything wider than the lane let a slanted swipe push the whole lane aside. Nothing in it is wider now. */
@media (min-width: 700px) {
  #desk .desk-col { overflow-x: hidden; }
  #desk .desk-col > *, #desk .desk-col section > *, #desk .list > * { min-width: 0; max-width: 100%; }
  #desk .desk-col img, #desk .desk-col svg, #desk .desk-col canvas, #desk .desk-col video { max-width: 100%; }
  #desk .item .title, #desk .item .why, #desk .item .meta, #desk .score-line, #desk .score-row .head .meta { overflow-wrap: anywhere; }
  #desk .score { grid-template-columns: minmax(0, 1fr); }
  #desk button.score-row { min-width: 0; grid-template-columns: auto minmax(0, 1fr) 74px; }
  #desk .hero-stats { right: 10px; flex-wrap: wrap; }
  #desk .hero-stat { min-width: 0; }
}
@media (min-width: 700px) and (max-width: 1199px) {
  #desk .col-you, #desk .col-crew {
    height: 100vh; height: 100dvh; box-sizing: border-box; isolation: isolate;
    overflow-y: auto; overscroll-behavior-y: contain; scrollbar-width: none; padding: var(--head-h, 0px) 2px calc(env(safe-area-inset-bottom, 0px) + 56px + var(--spare, 0px));
  }
  #desk .col-side { display: none; }
}
@media (min-width: 1200px) {
  #desk .desk-col {
    position: static; height: 100vh; height: 100dvh; box-sizing: border-box; isolation: isolate;
    overflow-y: auto; overscroll-behavior-y: contain; scrollbar-width: none; padding: var(--head-h, 0px) 2px calc(env(safe-area-inset-bottom, 0px) + 56px + var(--spare, 0px));
  }
}
html.desk-fit, html.desk-fit body { overflow: hidden; overscroll-behavior: none; }
html.desk-fit body { padding-top: 0; padding-bottom: 0; }
html.desk-fit .page-head {
  position: relative; z-index: 6; display: flow-root; padding-top: calc(env(safe-area-inset-top, 0px) + 14px);
  background: var(--bg); transform: translateY(calc(var(--tuck, 0px) * -1)); will-change: transform;
}
html.desk-fit #desk { margin-top: calc(var(--head-h, 0px) * -1); }
/* His medallion is fixed to the screen, but inside the header, whose transform is its containing block: it went up with the header
   (Chris, 21 Oct: "my medallion disappears on the desk view"). The header's own tuck, undone on it, keeps it where it is. */
html.desk-fit .mine-open.pinned { transform: translateY(var(--tuck, 0px)); }
html.desk-fit body::before {
  content: ''; position: fixed; z-index: 7; top: 0; left: 0; right: 0; height: calc(env(safe-area-inset-top, 0px) + 12px);
  background: var(--bg); pointer-events: none;
}
/* Round 7 (Chris, 18 Oct: "the three rows on the desk view keep their large scrollers on their right,
   and I don't wanna see that"): the columns scroll with no bar. And the page keeps its own
   scrollbar's room, so opening a panel (which stops the page scrolling) never moves it sideways. */
#desk .desk-col::-webkit-scrollbar { display: none; }
/* The foot's one line floats at the bottom when it has something to say. */
html.desk-fit .foot { position: fixed; left: 50%; bottom: 6px; transform: translateX(-50%); margin: 0; z-index: 5; pointer-events: none; }
html.desk-fit .foot:empty { display: none; }
html { scrollbar-gutter: stable; }
/* The wide desk never scrolls the page (the columns do, with no bar), so no gutter: it showed as an empty strip on the right (Chris, 4 Nov). */
html.desk-fit { scrollbar-gutter: auto; }
/* The yacht fills the window and the page cannot scroll there, so the reserved gutter showed as a stripe down its right edge (Chris, 24 Oct). */
/* Only while the Yacht is shown: a phone makes the frame ahead and keeps html.yacht3d on the Desk too, where the page must scroll (Chris, 24 Oct). */
html.yacht3d:has(body.in-room) { scrollbar-gutter: auto; scrollbar-width: none; overflow: hidden; }
html.yacht3d body.in-room .room3d-frame { width: 100vw; right: auto; }
/* F6: on a wide screen the room's activity column folds into a strip at its edge, and the
   building takes the width. A phone has no column to fold. */
.side-fold {
  display: none; min-height: 0; padding: 6px 10px; font: 600 12px var(--mono); letter-spacing: 0;
  color: var(--pot-papyrus); background: var(--pot-glaze); border: 1px solid var(--pot-edge); border-radius: 8px; cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 226, 170, 0.2), inset 0 -2px 0 var(--pot-line), 0 2px 0 #0a0706, 0 5px 9px rgba(0, 0, 0, 0.4);
}
@media (min-width: 1000px) {
  .side-fold { display: block; align-self: flex-start; margin: 0 0 2px; }
  .side-fold:hover, .side-fold:focus-visible { color: #fff8e8; border-color: var(--pot-gold); }
  .room-grid.side-folded { grid-template-columns: 40px minmax(0, 1fr); }
  .room-grid.side-folded .room-side > :not(.side-fold) { display: none; }
  .room-grid.side-folded .side-fold { writing-mode: vertical-rl; padding: 12px 6px; }
}

/* The desk's navigator on a phone (Chris, 18 Oct; nav.js): a handle at the left edge, a rail of
   bubbles that comes out from it, each coloured by what its section holds (green all in hand,
   amber waiting on you, red wrong or late), and the card of the bubble under the finger. The edge
   strip and the rail take every touch (touch-action: none), so the page stays still while the
   finger slides. A wide screen has its columns and no rail. */
/* Visitors: one small pill under the date, "1 here · 2 new" (gold when something is unread); a tap opens the Visitors panel (visitor-talks.js). */
.visitors-now { display: inline-flex; align-items: center; gap: 6px; margin: 4px 0 0; padding: 3px 10px 3px 8px; border: 1px solid var(--line, rgba(255,255,255,.14)); border-radius: 999px; background: none; color: var(--muted); font: 600 12px var(--font); cursor: pointer; }
.visitors-now .vn-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--gold); }
.visitors-now.new { color: var(--gold); border-color: var(--gold); }
.visitors-now:hover, .visitors-now:focus-visible { color: var(--text); }
.visit-share { margin: 2px 0 0; color: var(--muted); font: 500 12px var(--font); }
/* Round 8, part Q: his meeting's line, gold while someone waits at its door. */
.meet-now { display: block; margin: 2px 0 0; padding: 0; border: 0; background: none; color: var(--muted); font: 600 13px var(--font); text-align: left; cursor: pointer; }
.meet-now.new { color: var(--gold); }
.meet-now:hover, .meet-now:focus-visible { color: var(--text); }
.meet-knock { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 6px 0; }
.meet-acts { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 0; }
.meet-knock p { flex: 1 1 160px; margin: 0; }
.vt-room { display: grid; gap: 2px; width: 100%; margin: 0 0 6px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; background: transparent; color: var(--text); text-align: left; cursor: pointer; }
.vt-room.on { border-color: var(--gold); background: rgba(229, 175, 79, 0.08); }
.vt-room-top { display: flex; align-items: center; gap: 8px; }
.vt-room-name { font: 600 14px var(--font); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vt-room-last { color: var(--muted); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vt-dot { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--faint); }
.vt-dot.in { background: #6fbf73; }
.vt-unread { margin-left: auto; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--gold); color: #1b1714; font: 700 11px/18px var(--font); text-align: center; }
.vt-flag { color: #e0816f; font-size: 12px; }
.vt-report { margin: 0 0 10px; padding: 8px 10px; border: 1px solid rgba(224, 129, 111, 0.4); border-radius: 10px; }
.vt-report p { margin: 0 0 6px; font-size: 13px; }
.vt-report-who { font-weight: 600; }
.vt-report-line { color: var(--muted); overflow-wrap: anywhere; }
.vt-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.vt-head h3 { margin: 0; }
.vt-head .vt-block { margin-left: auto; }
.vt-lines { list-style: none; margin: 10px 0; padding: 0; max-height: 46vh; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; overscroll-behavior: contain; }
.vt-line { max-width: 88%; align-self: flex-start; padding: 7px 11px; border-radius: 14px 14px 14px 4px; background: rgba(243, 241, 237, 0.07); }
.vt-line.mine { align-self: flex-end; border-radius: 14px 14px 4px 14px; background: rgba(229, 175, 79, 0.14); }
.vt-line-head { color: var(--faint); font-size: 12px; }
.vt-line-text { margin: 2px 0 0; font-size: 14.5px; line-height: 1.4; white-space: pre-wrap; overflow-wrap: anywhere; }
.vt-form { display: flex; gap: 8px; align-items: flex-end; }
.vt-form textarea { flex: 1; min-height: 44px; resize: vertical; }
.nav-edge, .nav-handle, .nav-rail, .nav-card { display: none; }
@media (max-width: 699px) {
  .nav-edge { display: block; position: fixed; right: 0; top: 0; bottom: 0; z-index: 40; width: 16px; touch-action: none; }
  .nav-handle {
    display: block; position: fixed; right: 0; top: 50%; z-index: 41; width: 32px; height: 104px; min-height: 0; margin-top: -52px; padding: 0;
    border: 0; border-radius: 0; background: transparent; touch-action: none;
  }
  /* Poseidon's trident thrust through the edge (edge-marks.js draws it, edge-marks.css lights it). Drawn in, it stands up and
     holds the sections as beads: nav-trident.css. */
  #desk section, #desk .settings { scroll-margin-top: 12px; }
  #zones .floor-wrap { scroll-margin-top: 8px; }
}

/* Round 6 (Chris, 18 Oct, night: the line on the left edge "is seen there but won't work" under a
   pop-up): the edge and the handle show only when the rail would work, never under an open panel,
   window or keyboard, nor on the room. */
body.panel-open .nav-edge, body.panel-open .nav-handle,
html.kb-open .nav-edge, html.kb-open .nav-handle,
html:has(dialog[open]) .nav-edge, html:has(dialog[open]) .nav-handle { display: none; }
/* A move for a crew member has his medallion as its button; a need shows whoever asks (M). */
.move-to { display: inline-flex; align-items: center; gap: 8px; padding-left: 4px; }
.move-face { flex: none; width: 28px; height: 28px; border-radius: 50%; overflow: hidden; }
.need-face { flex: none; width: 24px; height: 24px; margin-right: 6px; padding: 0; border: 0; border-radius: 50%; overflow: hidden; background: none; cursor: pointer; vertical-align: middle; }
.move-face svg, .need-face svg { display: block; width: 100%; height: 100%; }

/* Round 8, A3 (Chris, 19 Oct: "why is it not full screen?"): the Yacht in 3D takes the whole window. The
   frame is made once and kept (room-mode.js), hidden and resting while the Desk shows; over it, the header
   as a slim strip (the tabs in it on a wide screen, at the bottom on a phone), and the activity as a panel,
   folded until he opens it. The phone's floors rail drives the drawn ship only (nav.js). */
.room3d-frame {
  position: fixed; inset: 0; width: 100%; height: var(--app-h, 100%); border: 0; z-index: 1;
  background: #0b0f18; visibility: hidden; pointer-events: none;
}
/* In the iPad's Home Screen app the frame is the screen's own height, steady (keyboard.js --app-h; Chris, 5 Nov: the Yacht ended 20 px short of
   the screen's foot, and the world was resized every time the status bar's 20 px came and went as he scrolled the desk), and what lies
   under it is the world's own night, never a strip of the page's colour. */
html.yacht3d:has(body.in-room) { background: #0b0f18; }
/* The world being made (room-mode.js, 5 Nov): the loading screen's picture of her, her windows lighting deck by deck, over the page's own
   ground, under the header (its Desk and Yacht still to hand), until the world says it is built. */
.yacht-wait {
  position: fixed; left: 0; right: 0; top: 0; height: var(--app-h, 100%); z-index: 2; display: none; flex-direction: column;
  align-items: center; justify-content: center; gap: 6px; padding: 24px; background: var(--bg); text-align: center; pointer-events: none;
}
html.yacht3d body.in-room .yacht-wait:not([hidden]) { display: flex; }
.yacht-wait .splash-art { width: 300px; height: 141px; margin-bottom: 8px; overflow: visible; }
.yacht-wait-line { margin: 0; font-size: 14px; color: var(--faint); }
:root[data-mx='on'] .yacht-wait { background: #010a05; }
:root[data-mx='on'] .yacht-wait-line { color: #36ff8a; font-family: var(--mono); }
html.yacht3d body.in-room { overflow: hidden; }
html.yacht3d body.in-room .room3d-frame { visibility: visible; pointer-events: auto; }
html.yacht3d body.in-room .top {
  position: fixed; top: 0; left: 0; right: 0; z-index: 4; margin: 0;
  padding: calc(env(safe-area-inset-top, 0px) + 8px) 16px 22px;
  background: linear-gradient(rgba(8, 8, 10, 0.78), rgba(8, 8, 10, 0)); pointer-events: none;
}
html.yacht3d body.in-room .top > * { pointer-events: auto; }
/* Chris, 25 Oct: his medallion and the full-screen button sat off the tabs' line and clashed. Over the Yacht the header is fixed, so the
   medallion needs no pinning: it is a plain item of the strip, level with the tabs' middle, the button beside it. */
html.yacht3d body.in-room .top { align-items: flex-start; }
html.yacht3d body.in-room .mine-spot { display: none; }
html.yacht3d body.in-room .mine-open.pinned, html.yacht3d body.in-room .mine-open.pinned.unplaced { display: block; position: static; transform: none; box-shadow: none; margin: 6px 0 0 auto; flex: none; }
html.yacht3d body.in-room .yacht-full { margin-top: 9px; flex: none; }
/* The Desk's own switch (Chris, 25 Oct): the same glass Desk and Yacht tabs as over the Yacht, centred in the header's top line, so the
   switch takes no line of its own. A phone keeps its pill at the foot. */
@media (min-width: 1000px) {
  .page-head { position: relative; }
  html:not(:has(body.in-room)) .tabs {
    position: absolute; z-index: 5; top: calc(env(safe-area-inset-top, 0px) + 14px); left: 50%; transform: translateX(-50%);
    width: 300px; margin: 0; background: rgba(20, 18, 16, 0.72); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  }
  .top .mine-spot { align-self: flex-start; margin-top: 4px; }
}
html.yacht3d body.in-room .top h1 { font-size: 22px; }
.yacht-full { display: none; }
html.yacht3d body.in-room .yacht-full { display: inline-flex; align-items: center; gap: 6px; }
.yacht-full svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
html.yacht3d body.in-room #push-chip { display: none; }
@media (max-width: 520px) { .yacht-full-words { display: none; } html.yacht3d body.in-room .yacht-full { padding: 0 10px; } }
@media (min-width: 1000px) {
  html.yacht3d body.in-room .tabs {
    position: fixed; z-index: 5; top: calc(env(safe-area-inset-top, 0px) + 10px); left: 50%; transform: translateX(-50%);
    width: 300px; margin: 0; background: rgba(20, 18, 16, 0.72); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  }
}
html.yacht3d body.in-room .room-grid { display: block; }
html.yacht3d body.in-room .room-side {
  display: flex; flex-direction: column; gap: 10px; position: fixed; z-index: 4; left: 12px; width: min(320px, calc(100vw - 24px));
  top: max(calc(env(safe-area-inset-top, 0px) + 72px), calc(var(--top-h, 0px) - 16px)); bottom: calc(env(safe-area-inset-bottom, 0px) + 12px); max-height: none;
  padding: 12px; overflow: auto; border: 1px solid var(--line); border-radius: 14px;
  background: rgba(16, 14, 12, 0.88); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
html.yacht3d body.in-room .side-fold { display: block; align-self: flex-start; writing-mode: horizontal-tb; padding: 6px 10px; }
html.yacht3d body.in-room .room-grid.side-folded .room-side {
  bottom: auto; width: auto; padding: 0; border: 0; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; overflow: visible;
}
html.yacht3d body.in-room .room-grid.side-folded .room-side > :not(.side-fold) { display: none; }
@media (max-width: 999px) {
  html.yacht3d body.in-room .room-side { bottom: calc(env(safe-area-inset-bottom, 0px) + 60px); }
  html.yacht3d body.in-room .room-grid.side-folded .room-side { top: auto; bottom: calc(env(safe-area-inset-bottom, 0px) + 60px); }
  html.yacht3d body.in-room .nav-edge, html.yacht3d body.in-room .nav-handle, html.yacht3d body.in-room .nav-rail { display: none; }
}

/* Desk / Yacht on a wide screen, in the phone's style (Chris, 27 Oct): the same small glass pill, kept at the top. */
@media (min-width: 1000px) {
  html:not(:has(body.in-room)) .tabs, html.yacht3d body.in-room .tabs {
    width: auto; gap: 2px; padding: 3px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.3);
    background: rgba(20, 18, 16, 0.42); box-shadow: 0 4px 18px rgba(0, 0, 0, 0.32);
    -webkit-backdrop-filter: blur(12px) saturate(1.3); backdrop-filter: blur(12px) saturate(1.3);
  }
  html:not(:has(body.in-room)) .tabs { top: calc(env(safe-area-inset-top, 0px) + 12px); }
  html:not(:has(body.in-room)) .tabs .tab, html.yacht3d body.in-room .tabs .tab { flex: none; min-height: 34px; padding: 0 20px; border-radius: 999px; font-size: 14px; color: rgba(239, 227, 205, 0.68); }
  html:not(:has(body.in-room)) .tabs .tab[aria-pressed="true"], html.yacht3d body.in-room .tabs .tab[aria-pressed="true"] {
    background: rgba(212, 130, 74, 0.34); color: var(--pot-papyrus, #efe3cd); box-shadow: none; border-color: var(--pot-ring);
  }
}

/* Nestor's medallion in each move's corner (27 Oct): small, always in the same place, a word about this move. */
.item.move.has-nestor .actions { padding-right: 44px; }
.move-nestor { position: absolute; right: 10px; bottom: 10px; width: 32px; height: 32px; min-height: 0; padding: 0; border-radius: 50%; overflow: hidden; border: 1px solid var(--line); background: none; opacity: 0.85; cursor: pointer; }
.move-nestor svg { display: block; width: 100%; height: 100%; }
.move-nestor:hover, .move-nestor:focus-visible { opacity: 1; outline: 2px solid var(--accent, currentColor); outline-offset: 2px; }
.move-said { margin-top: 6px; }
.word-form .move-talk { color: var(--text); background: var(--panel-2); border: 1px solid var(--line); box-shadow: none; width: auto; }