/* The Desk — the case board, unbounded.
   Additive only. Every colour, face and component class below is borrowed from
   styles.css; this file adds the surface, the trays and the handles, and
   nothing else. Load it after styles.css. */

:root {
  /* Frame colours: deliberately muted and deliberately NOT the status colours,
     so a frame never reads as a stamp. */
  --frame-1: #6b7a8f;
  --frame-2: #7a7f6b;
  --frame-3: #8f7a6b;
  --frame-4: #7a6b8f;
  --desk-grid: rgba(230, 226, 216, 0.045);
  --sel: #c7a24a;
}

/* The desk is a working surface, so it gets the full window and no page scroll. */
.desk-body { padding-bottom: 16px; }

.desk-form { margin-bottom: 10px; }
.desk-form .hint { color: var(--muted-light); }
/* styles.css dresses the Reading Room's input by its id, so the desk's own
   input has to be given the same face rather than inheriting it. */
#dq {
  width: 100%; font-family: var(--mono); font-size: 16px; padding: 10px 12px;
  border: 1px solid var(--drawer-darker); background: var(--cream); color: var(--ink);
}

/* ---------- a shared desk ---------- */

/* Shown only while a desk opened from someone's link is on screen. The pad
   yellow says "look here" without borrowing a stamp colour. */
.shared-bar {
  max-width: 1380px; margin: 0 auto 10px; display: flex; gap: 12px; align-items: center; justify-content: space-between; flex-wrap: wrap;
  padding: 10px 14px; background: var(--pad); color: var(--ink); border-left: 6px solid var(--string);
  font-size: 12.5px; line-height: 1.45;
}
.shared-bar[hidden] { display: none; }
.shared-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 320px; }
.shared-text .eyebrow { color: var(--red); letter-spacing: 2px; }
.shared-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* ---------- the tool rail ---------- */

.desk-tools { max-width: 1380px; margin: 0 auto 10px; display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
/* Each group stays on one line and keeps its full width; it is the rail that
   wraps when the window is small, not the group. Without nowrap the group with
   the auto margin collapses to its widest button and stacks. */
.tool-group { display: flex; gap: 6px; flex-wrap: nowrap; flex: 0 0 auto; }
.tool-group.tools-end { margin-left: auto; }
.tool { flex: 0 0 auto; white-space: nowrap; }
.tool {
  font-family: var(--type); font-size: 12px; letter-spacing: 1px;
  padding: 7px 12px; min-height: 36px;
  background: var(--drawer-dark); color: var(--text-light);
  border: 1px solid var(--board-border); cursor: pointer;
}
.tool:hover { background: var(--drawer); color: #ffffff; }
.tool:focus-visible { outline: 2px solid var(--pad); outline-offset: 1px; }
.tool.toggle.is-on { background: var(--text-light); color: var(--wall); border-color: var(--muted-light); }
.tool.danger:hover { background: #3a2222; color: #ffd6d6; border-color: #5a3030; }
.tool.mini { min-height: 26px; padding: 2px 9px; font-size: 13px; line-height: 1; }

.desk-narrow { display: none; }

/* ---------- layout ---------- */

.desk { max-width: 1380px; margin: 0 auto; display: flex; gap: 14px; align-items: stretch; }
.surface-wrap { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }

/* ---------- the trays ---------- */

.tray {
  flex: 0 0 272px; width: 272px; align-self: stretch;
  background: var(--drawer-dark); border: 8px solid var(--drawer-darker);
  display: flex; flex-direction: column; gap: 0;
  max-height: calc(100vh - 230px); overflow-y: auto; overflow-x: hidden;
}
/* Closed, the trays are gone, not a 44px strip: + ADD TO THE DESK on the
   toolbar brings them back, and so does opening a case from the Reading Room. */
.tray.is-collapsed { display: none; }
.tray-top {
  position: sticky; top: 0; z-index: 3;
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 10px 12px; background: var(--drawer-darker);
}
.tray-title { font-family: var(--type); font-size: 11px; letter-spacing: 2px; color: var(--text-light); }
.tray-collapse {
  width: 24px; height: 24px; line-height: 1; padding: 0;
  background: transparent; color: var(--muted-light);
  border: 1px solid var(--board-border); cursor: pointer; font-size: 14px;
}
.tray-collapse:hover { color: #ffffff; }
.tray-section { padding: 14px 12px 4px; border-top: 1px solid var(--drawer-darker); }
.tray-section .eyebrow { color: var(--muted-light); }
.tray-note { margin: 5px 0 10px; font-size: 11px; line-height: 1.45; color: var(--muted-light); }

.tray-cases, .tray-families { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-direction: column; gap: 7px; }

/* A case in the tray wears the drawer-card face from styles.css. */
.tray-case {
  display: flex; flex-direction: column; gap: 2px; width: 100%; text-align: left;
  background: var(--cream-2); color: var(--ink); border: 1px solid var(--card-border);
  padding: 9px 11px; font-family: var(--type); cursor: pointer;
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.45);
}
.tray-case:hover, .tray-case:focus { background: var(--pad); transform: translateY(-2px); }
.tray-case small { font-size: 10px; color: var(--muted); font-family: var(--mono); }
.tray-case span { font-size: 13px; line-height: 1.3; }

/* A family is a folder tab that opens into its sources. */
.fam { border: 1px solid var(--board-border); background: var(--drawer); }
.fam-head {
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 8px 10px; background: transparent; border: 0; cursor: pointer;
  font-family: var(--type); font-size: 11px; letter-spacing: 1px; color: var(--text-light); text-align: left;
}
.fam-head:hover { background: var(--drawer-dark); }
.fam-swatch { width: 9px; height: 9px; flex: 0 0 9px; border: 1px solid rgba(0, 0, 0, 0.4); }
.fam-label { flex: 1 1 auto; min-width: 0; }
.fam-n { font-family: var(--mono); font-size: 10px; color: var(--muted-light); }
.fam-caret { font-size: 10px; color: var(--muted-light); }
.fam.is-open .fam-caret { transform: rotate(90deg); }
.fam-list { list-style: none; margin: 0; padding: 0 8px 8px; display: none; flex-direction: column; gap: 5px; }
.fam.is-open .fam-list { display: flex; }
.fam-src {
  display: block; width: 100%; text-align: left;
  background: var(--cream); color: var(--ink); border: 0; border-left: 3px solid transparent;
  padding: 7px 8px; font-family: var(--mono); font-size: 11px; line-height: 1.35; cursor: grab;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);
}
.fam-src:hover { background: #ffffff; }
.fam-src.is-placed { opacity: 0.42; cursor: default; }
.fam-src .fs-tier { font-family: var(--type); font-size: 9px; color: var(--muted); display: block; }
.fam-src .fs-title { font-weight: 700; display: block; }
.fam-src.side-against { border-left-color: var(--string); }
.fam-src.side-other { border-left-color: var(--string-grey); }

/* ---------- the surface ---------- */

.surface {
  position: relative; overflow: hidden; touch-action: none;
  height: calc(100vh - 230px); min-height: 440px;
  background-color: var(--board);
  background-image:
    linear-gradient(var(--desk-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--desk-grid) 1px, transparent 1px);
  background-size: 96px 96px, 96px 96px;
  border: 4px solid var(--board-border);
  box-shadow: inset 0 0 90px rgba(0, 0, 0, 0.6);
  cursor: default;
}
.surface:focus-visible { outline: 2px solid var(--pad); outline-offset: -2px; }
.surface.is-panning { cursor: grabbing; }
.surface.is-spacing { cursor: grab; }
.surface.is-stringing { cursor: crosshair; }

.world { position: absolute; left: 0; top: 0; width: 100%; height: 100%; transform-origin: 0 0; will-change: transform; }
.links, .guides { position: absolute; left: 0; top: 0; overflow: visible; pointer-events: none; width: 1px; height: 1px; }
.links { z-index: 1; }
.guides { z-index: 6; }
/* Frames sit ABOVE the cards so their title bar is always grabbable and the
   boundary is always visible, and they carry no fill and no pointer events, so
   they never cover or intercept the evidence inside them. */
.frames { position: absolute; left: 0; top: 0; z-index: 3; pointer-events: none; }
.nodes { position: absolute; left: 0; top: 0; z-index: 2; }

.marquee {
  position: absolute; z-index: 8; pointer-events: none;
  border: 1px dashed var(--pad); background: rgba(255, 244, 160, 0.09);
}

/* ---------- the empty desk: one question, three answers ---------- */

/* With nothing on the desk the chrome is noise: the search bar, the tool rail,
   the trays and the zoom strip wait until there is something to use them on. */
.desk-body.is-empty .desk-form, .desk-body.is-empty .desk-tools,
.desk-body.is-empty .tray, .desk-body.is-empty .hud { display: none; }
/* With the rail and the search gone, the empty desk takes their room. */
.desk-body.is-empty .surface { height: calc(100vh - 150px); }

.empty-desk { position: absolute; inset: 0; display: flex; align-items: safe center; justify-content: center; overflow-y: auto; padding: 28px 24px; pointer-events: none; }
.empty-inner { max-width: 1040px; width: 100%; text-align: center; color: var(--muted-light); pointer-events: auto; }
.empty-inner .eyebrow { color: var(--muted-light); }
.empty-q { font-family: var(--type); font-weight: 400; font-size: 28px; letter-spacing: 0.5px; color: var(--text-light); margin: 8px 0 16px; }
.empty-inner p { margin: 8px 0 0; font-size: 13px; line-height: 1.6; }
.empty-inner .small { font-size: 11.5px; color: var(--muted); line-height: 1.7; }
.empty-start { display: grid; grid-template-columns: 1fr 2.3fr 1fr; gap: 18px; text-align: left; align-items: start; }
.empty-choice { background: rgba(0, 0, 0, 0.22); border: 1px solid var(--board-border); padding: 14px 14px 16px; }
.empty-choice .eyebrow { margin-bottom: 10px; }
.empty-choice .tool { width: 100%; margin-top: 2px; }
.empty-desks { display: flex; flex-direction: column; gap: 8px; }
.empty-desks .tool { text-align: left; white-space: normal; line-height: 1.35; background: var(--pad); color: var(--ink); border-left: 5px solid var(--string); }
.empty-desks .tool:hover { background: #fff8c4; }
.empty-desks .tool small { display: block; font-family: var(--mono); font-size: 10px; letter-spacing: 0; color: var(--muted); margin-bottom: 3px; }
.empty-cases { list-style: none; margin: 10px 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px; }
.empty-cases .tray-case { width: 100%; padding: 6px 8px; gap: 1px; }
.empty-cases .tray-case span { font-size: 11.5px; line-height: 1.25; }
.empty-cases .tray-case small { font-size: 9px; }
.empty-foot { margin-top: 14px !important; }
@media (max-width: 1040px) {
  .empty-start { grid-template-columns: 1fr; }
  .empty-cases { grid-template-columns: 1fr 1fr 1fr; }
}
@media (max-width: 820px) {
  .empty-cases { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .empty-cases { grid-template-columns: 1fr; }
  .empty-q { font-size: 24px; }
}

/* A toggle inside the MORE menu says whether it is on. */
.more-menu button.toggle.is-on::after { content: "ON"; margin-left: auto; padding-left: 14px; font-size: 10px; color: var(--muted-light); }

.hud {
  display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 7px 2px 0; font-size: 11px; color: var(--muted-light); font-family: var(--mono);
}
.hud-right { display: flex; align-items: center; gap: 7px; }
#hudZoom { min-width: 44px; text-align: center; }

/* ---------- the nodes ---------- */

.node { position: absolute; transform: rotate(var(--tilt, 0deg)); }
.node.is-dragging { z-index: 20; transform: rotate(0deg); }
.node.is-dragging .pincard { box-shadow: 0 22px 44px rgba(0, 0, 0, 0.85); }

/* Borrow .pincard whole, then undo the things that only make sense in a column.
   The tilt lives on .node here, and --tilt inherits, so .pincard has to be told
   not to rotate again or every card gets twice the lean it was given. */
.node .pincard { width: 100%; cursor: grab; transform: none; }
.node .pincard:hover, .node .pincard:focus { transform: none; outline: 2px solid rgba(255, 244, 160, 0.5); }
.node.is-selected .pincard { outline: 2px solid var(--sel); }
.node.is-selected .pincard:hover { outline: 2px solid var(--sel); }
.node.is-linking .pincard { outline: 2px dashed var(--string); }

/* The pin head is the string handle, so it needs to be grabbable and to say so. */
.node .pin { cursor: crosshair; z-index: 4; }
.node .pin:hover { box-shadow: 0 0 0 4px rgba(208, 53, 42, 0.3); }
.node .pin::after { content: ""; position: absolute; inset: -7px; }

.node-tools { position: absolute; right: 0; top: -22px; display: none; gap: 4px; }
.node:hover .node-tools, .node.is-selected .node-tools { display: flex; }
.node-tools button {
  font-family: var(--type); font-size: 9px; letter-spacing: 1px; line-height: 1;
  padding: 3px 6px; background: var(--drawer-dark); color: var(--text-light);
  border: 1px solid var(--board-border); cursor: pointer;
}
.node-tools button:hover { background: var(--drawer); color: #ffffff; }

/* The question card, same face as the case file's centre card. */
.node .qcard { transform: none; cursor: grab; }
.node.is-selected .qcard { outline: 2px solid var(--sel); }

/* A note is the legal pad, torn off and loose. */
.node .notepad {
  background: var(--pad); color: var(--ink); padding: 10px 12px;
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.7);
  display: flex; flex-direction: column; gap: 5px; cursor: grab;
}
.node .notepad .eyebrow { color: var(--muted); }
.node .notepad textarea {
  width: 100%; border: 0; background: transparent; resize: none; overflow: hidden;
  font-family: var(--mono); font-size: 12px; line-height: 1.5; color: var(--ink);
  padding: 0; cursor: text;
}
.node .notepad textarea:focus { outline: 1px dashed var(--muted); outline-offset: 3px; }

/* ---------- frames ---------- */

.frame { position: absolute; border: 2px solid var(--fc, var(--frame-1)); background: transparent; pointer-events: none; }
.frame.is-selected { border-color: var(--sel); }
.frame-title {
  position: absolute; left: -2px; top: -23px; display: flex; align-items: center; gap: 6px;
  max-width: calc(100% + 4px); padding: 3px 9px;
  background: var(--fc, var(--frame-1)); color: #15151a;
  font-family: var(--type); font-size: 10px; letter-spacing: 2px; cursor: grab;
  pointer-events: auto;
}
.frame-title input {
  border: 0; background: transparent; color: #15151a; font-family: var(--type);
  font-size: 10px; letter-spacing: 2px; width: 12ch; min-width: 4ch; padding: 0; cursor: text;
}
.frame-title input:focus { outline: 1px dashed rgba(0, 0, 0, 0.5); }
.frame-count { font-family: var(--mono); font-size: 9px; opacity: 0.75; }
.frame-del {
  border: 0; background: transparent; color: #15151a; cursor: pointer;
  font-size: 12px; line-height: 1; padding: 0 0 0 2px; opacity: 0.7;
}
.frame-del:hover { opacity: 1; }
.frame-grip {
  position: absolute; right: -7px; bottom: -7px; width: 14px; height: 14px;
  background: var(--fc, var(--frame-1)); cursor: nwse-resize; pointer-events: auto;
}
/* The body never takes the pointer, so a drag starting inside a frame still
   box-selects and a card inside stays clickable. */
.frame-body { position: absolute; inset: 0; pointer-events: none; }

/* ---------- string ---------- */

.string-line { stroke: var(--string); stroke-width: 2; fill: none; }
.string-line.other { stroke: var(--string-grey); stroke-dasharray: 6 5; }
.string-line.hot { stroke-width: 3; }
.string-hit { stroke: transparent; stroke-width: 14; fill: none; pointer-events: stroke; cursor: pointer; }
.links { pointer-events: none; }
.links .string-hit { pointer-events: stroke; }
.guide-line { stroke: var(--pad); stroke-width: 1; stroke-dasharray: 4 4; opacity: 0.8; }

@media (max-width: 1040px) {
  .tray { flex-basis: 232px; width: 232px; }
}

@media (max-width: 820px) {
  .desk-narrow {
    display: block; max-width: 1380px; margin: 0 auto 12px;
    background: var(--drawer-dark); border: 1px solid var(--board-border);
    padding: 12px 14px; font-size: 13px; line-height: 1.55; color: var(--text-light);
  }
  .desk { flex-direction: column; }
  .tray { flex: 1 1 auto; width: 100%; max-height: 280px; }
    .surface { height: 62vh; min-height: 360px; }
  .desk-tools .tool-group.tools-end { margin-left: 0; }
  /* On a phone the groups themselves may wrap, so the rail never overflows. */
  .desk-tools .tool-group { flex-wrap: wrap; }
}

/* ---------- the thread: links that become cards ---------- */

/* A chip is a link that can be pinned: click it, or carry it onto the desk.
   pan-y keeps a vertical swipe scrolling the tray while a sideways one carries. */
.chips { display: flex; flex-wrap: wrap; gap: 5px; margin: 4px 0 10px; }
.chip {
  display: inline-flex; align-items: baseline; gap: 5px; max-width: 100%;
  font-family: var(--mono); font-size: 11px; line-height: 1.3; text-align: left;
  padding: 4px 8px; background: var(--cream-2); color: var(--ink);
  border: 1px solid var(--card-border); cursor: grab; touch-action: pan-y;
}
.chip:hover, .chip:focus-visible { background: var(--pad); border-color: var(--muted); }
.chip-mark { font-family: var(--type); font-size: 10px; color: var(--muted); flex: 0 0 auto; }
.chip-v .chip-mark { color: var(--red); }
.chip-label { min-width: 0; overflow-wrap: anywhere; }
.chip.is-placed { opacity: 0.55; }
/* Inline, a verse reads as part of the sentence: a link with a dotted rule. */
.chip.inline {
  display: inline; padding: 0 1px; font: inherit; color: var(--red); background: transparent;
  border: 0; border-bottom: 1px dotted var(--red);
}
.chip.inline:hover, .chip.inline:focus-visible { background: var(--pad); color: var(--ink); }
.chip.inline.is-placed { opacity: 1; border-bottom-style: solid; }

/* ---------- a case file open in the tray ---------- */

.tray-section[hidden] { display: none; }
.tray-open { display: flex; flex-direction: column; gap: 6px; padding-bottom: 14px; }
.tray-open .eyebrow { color: var(--muted-light); }
.tray-open .eyebrow.tray-side { margin-top: 8px; }
.tray-back {
  align-self: flex-start; font-family: var(--type); font-size: 10px; letter-spacing: 1px;
  padding: 4px 8px; background: transparent; color: var(--muted-light);
  border: 1px solid var(--board-border); cursor: pointer;
}
.tray-back:hover { color: #ffffff; border-color: var(--muted-light); }
.tray-qcard {
  position: relative; margin-top: 10px; display: flex; flex-direction: column; gap: 4px; text-align: left;
  background: var(--cream); color: var(--ink); border: 0; padding: 12px 11px 10px;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.55); cursor: grab; touch-action: pan-y;
}
.tray-qcard .eyebrow { color: var(--muted); }
.tray-qcard .qtext { font-family: var(--type); font-size: 14px; line-height: 1.3; }
.tray-qcard:hover { outline: 2px solid rgba(255, 244, 160, 0.5); }
.tray-lay { width: 100%; margin: 4px 0 4px; }
.tray-finding { margin: 0; font-size: 11.5px; line-height: 1.55; color: var(--text-light); }
.tray-finding.is-clamped { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 5; line-clamp: 5; overflow: hidden; }
.tray-more {
  align-self: flex-start; padding: 0; background: transparent; border: 0; cursor: pointer;
  font-family: var(--mono); font-size: 10px; color: var(--muted-light); text-decoration: underline;
}
.tray-more:hover { color: #ffffff; }
.tray-finding .chip.inline { color: #ff9b8f; border-bottom-color: #ff9b8f; }
.tray-finding .chip.inline:hover { color: var(--ink); }
.tray-pins { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.fam-src { touch-action: pan-y; }
.fam-src .fs-stamp { display: inline-block; margin-top: 3px; font-family: var(--type); font-size: 8px; padding: 0 3px; border: 1px solid currentColor; }
.fam-src .fs-stamp.held { color: var(--held); }
.fam-src .fs-stamp.not-held { color: var(--not-held); }
.tray-case { touch-action: pan-y; cursor: pointer; }

/* ---------- carrying ---------- */

.carry-ghost {
  position: fixed; left: 0; top: 0; z-index: 60; pointer-events: none; max-width: 240px;
  display: flex; flex-direction: column; gap: 2px; padding: 8px 10px;
  background: var(--cream); color: var(--ink); font-family: var(--mono); font-size: 11px; line-height: 1.35;
  box-shadow: 0 18px 36px rgba(0, 0, 0, 0.8); transform: translate(-999px, -999px); opacity: 0.94;
}
.carry-ghost small { font-family: var(--type); font-size: 9px; color: var(--muted); letter-spacing: 1px; }
.carry-ghost.carry-case { background: var(--folder); border-top: 4px solid var(--string); }
.carry-ghost.carry-v { border-left: 4px solid var(--red); }
body.is-carrying, body.is-carrying * { cursor: grabbing !important; user-select: none; }
.surface.is-drop { outline: 3px dashed var(--pad); outline-offset: -7px; }

/* ---------- verse and go-deeper cards on the desk ---------- */

.node .pincard.verse { border-top: 3px solid var(--red); }
.node .pincard.verse .tier { color: var(--red); }

/* An index card from the case file: the collection's own notes, never a source. */
.node .doccard {
  position: relative; display: flex; flex-direction: column; gap: 4px; width: 100%; text-align: left;
  background: var(--folder); color: var(--ink); border: 1px solid var(--folder-border); border-left: 5px solid var(--frame-1);
  padding: 12px 12px 10px; font-family: var(--mono); font-size: 12px; cursor: grab;
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.7);
}
.node .doccard .eyebrow { font-size: 9px; }
.node .doccard .ptitle { font-weight: 700; font-size: 12px; line-height: 1.35; }
.node .doccard .dpath { font-size: 10px; color: var(--muted); overflow-wrap: anywhere; }
.node .doccard:hover, .node .doccard:focus { outline: 2px solid rgba(255, 244, 160, 0.5); }
.node.is-selected .doccard { outline: 2px solid var(--sel); }

/* ---------- the reader's thread ---------- */

.reader-thread { border-top: 1px solid var(--rule); padding-top: 10px; display: flex; flex-direction: column; gap: 4px; }
.reader-thread[hidden] { display: none; }
.thread-head { font-family: var(--type); font-size: 11px; letter-spacing: 1px; color: var(--red); margin-bottom: 4px; }
.reader-note .chip.inline { font-size: inherit; }
.reader-body .case-finding { margin: 0; font-size: 14px; line-height: 1.65; }
.reader-body .case-lines { margin: 0; padding-left: 18px; font-size: 13px; line-height: 1.55; }
.reader-body .case-lines li { margin-bottom: 5px; }
.reader .lay-out { align-self: flex-start; }

/* A prepared desk in the tray: the legal-pad yellow, with the string's red edge. */
.tray-desk { background: var(--pad); border-left: 5px solid var(--string); }
.tray-desk:hover, .tray-desk:focus { background: #fff8c4; }

/* ---------- searching the trays ---------- */

.tray [hidden] { display: none !important; }
.tray-search { position: sticky; top: 44px; z-index: 3; padding: 10px 12px; background: var(--drawer-dark); border-bottom: 1px solid var(--drawer-darker); }
.tray.is-collapsed .tray-search { display: none; }
#tq {
  width: 100%; font-family: var(--mono); font-size: 13px; padding: 7px 9px;
  border: 1px solid var(--drawer-darker); background: var(--cream); color: var(--ink);
}
#tq:focus { outline: 2px solid var(--pad); outline-offset: 0; }
.tray-none { margin: 8px 0 0; font-size: 11px; line-height: 1.45; color: var(--muted-light); }
.tray-here { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.here-row {
  display: flex; flex-direction: column; gap: 1px; width: 100%; text-align: left; cursor: pointer;
  padding: 6px 9px; background: var(--drawer); color: var(--text-light);
  border: 1px solid var(--board-border); border-left: 3px solid var(--muted-light);
  font-family: var(--mono); font-size: 11.5px; line-height: 1.35;
}
.here-row small { font-family: var(--type); font-size: 9px; letter-spacing: 1px; color: var(--muted-light); }
.here-row:hover, .here-row:focus-visible { background: var(--drawer-dark); color: #ffffff; border-left-color: var(--pad); }
.here-row.here-frame { border-left-color: var(--frame-1); font-family: var(--type); letter-spacing: 1px; }
.here-row.here-v { border-left-color: var(--red); }
.here-row.here-note { border-left-color: var(--pad); }

/* The card the view was just taken to says so, briefly. */
.node.is-found .pincard, .node.is-found .qcard, .node.is-found .notepad, .node.is-found .doccard {
  animation: found 1.5s ease-out;
}
@keyframes found {
  0%, 30% { box-shadow: 0 0 0 6px rgba(255, 244, 160, 0.95), 0 10px 22px rgba(0, 0, 0, 0.7); }
  100% { box-shadow: 0 0 0 0 rgba(255, 244, 160, 0), 0 10px 22px rgba(0, 0, 0, 0.7); }
}
.frame.is-selected { border-width: 3px; }
@media (prefers-reduced-motion: reduce) { .node.is-found .pincard, .node.is-found .qcard, .node.is-found .notepad, .node.is-found .doccard { animation: none; } }

/* ---------- present mode ---------- */

.tool.present { background: var(--pad); color: var(--ink); border-color: var(--pad); }
.tool.present:hover { background: #fff8c4; color: var(--ink); }

/* The stage: only the desk, edge to edge. */
body.presenting { overflow: hidden; }
body.presenting .top, body.presenting .desk-form, body.presenting .shared-bar, body.presenting .desk-tools,
body.presenting .tray, body.presenting .hud, body.presenting .foot, body.presenting .desk-narrow, body.presenting .skip {
  display: none !important;
}
body.presenting .surface {
  position: fixed; inset: 0; width: 100vw; height: 100vh; min-height: 0;
  border: 0; z-index: 25; box-shadow: inset 0 0 160px rgba(0, 0, 0, 0.75);
}
body.presenting .surface, body.presenting .node .pincard, body.presenting .node .qcard,
body.presenting .node .doccard, body.presenting .node .notepad { cursor: pointer; }
body.presenting .surface.is-panning { cursor: grabbing; }
body.presenting .node-tools, body.presenting .frame-grip, body.presenting .frame-del { display: none !important; }
body.presenting .frame-title { cursor: pointer; }
body.presenting .frame-title input { pointer-events: none; }
body.presenting .node .notepad textarea { cursor: pointer; }
body.presenting .node.is-selected .pincard, body.presenting .node.is-selected .qcard { outline: 0; }

/* Reading a prepared board: the same walk as present mode, but under the
   page's own header and inside the desk's frame, with nothing else on
   screen. OPEN THE WORKBENCH brings the trays and tools back. */
body.reading { overflow: auto; }
body.reading .top { display: flex !important; }
body.reading .surface {
  position: relative; inset: auto; width: auto; height: calc(100vh - 150px); min-height: 440px;
  border: 4px solid var(--board-border); z-index: auto; box-shadow: inset 0 0 90px rgba(0, 0, 0, 0.6);
}
body.reading .pres-caption { top: 22px; }

/* The spotlight: the section on screen stays lit, the rest of the board recedes. */
.node, .frame { transition: opacity 0.45s ease; }
.node.pres-dim, .frame.pres-dim { opacity: 0.13; }
.string-line { transition: opacity 0.45s ease; }
.string-line.dim { opacity: 0.1; }

.pres-caption {
  position: absolute; left: 32px; top: 26px; z-index: 9; max-width: min(860px, 72vw);
  pointer-events: none;
}
.pres-caption .eyebrow { color: var(--pad); letter-spacing: 3px; font-size: 12px; }
.pres-title {
  margin-top: 4px; font-family: var(--type); font-size: clamp(22px, 2.7vw, 38px); line-height: 1.12;
  color: var(--cream); text-shadow: 0 2px 14px rgba(0, 0, 0, 0.85);
}
.pres-sub { margin-top: 7px; font-family: var(--mono); font-size: 13px; line-height: 1.45; color: var(--muted-light); max-width: 640px; }

.pres-bar {
  position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); z-index: 9;
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px;
  max-width: calc(100vw - 32px); padding: 8px 10px;
  background: rgba(24, 24, 27, 0.94); border: 1px solid var(--board-border);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.65);
  transition: opacity 0.35s ease;
}
.pres-bar button {
  font-family: var(--type); font-size: 11px; letter-spacing: 1px; min-height: 34px; padding: 6px 11px;
  background: transparent; color: var(--text-light); border: 1px solid var(--board-border); cursor: pointer;
}
.pres-bar button:hover, .pres-bar button:focus-visible { background: var(--drawer); color: #ffffff; }
.pres-bar button:disabled { opacity: 0.3; cursor: default; background: transparent; }
.pres-bar .pres-arrow { font-size: 20px; line-height: 1; width: 42px; padding: 0; }
.pres-dots { display: flex; align-items: center; gap: 7px; padding: 0 6px; }
.pres-bar .pres-dot {
  width: 11px; height: 11px; min-height: 0; padding: 0; border: 0; border-radius: 50%;
  background: var(--muted); transition: transform 0.2s ease, background 0.2s ease;
}
.pres-bar .pres-dot.is-overview { border-radius: 2px; }
.pres-bar .pres-dot:hover { background: var(--muted-light); }
.pres-bar .pres-dot.is-on { background: var(--pad); transform: scale(1.35); }
.pres-sep { width: 1px; align-self: stretch; background: var(--board-border); margin: 0 2px; }
.pres-keys { font-family: var(--mono); font-size: 10px; color: var(--muted-light); padding: 0 4px; white-space: nowrap; }

/* Resting pointer: the bar and cursor get out of the way. */
body.pres-idle .pres-bar { opacity: 0; pointer-events: none; }
body.pres-idle.presenting .surface { cursor: none; }
/* Reading a board, the bar stays: a visitor should not have to know it comes back on a mouse move. */
body.reading .pres-bar { opacity: 1; pointer-events: auto; }
body.reading #presLink, body.reading .pres-keys { display: none; }
body.reading.pres-idle .surface { cursor: default; }

/* Present from the tray: the section list and the prepared desks. */
.tray-here li.has-play { display: flex; gap: 5px; align-items: stretch; }
.tray-here li.has-play .here-row { flex: 1 1 auto; min-width: 0; }
.here-play {
  flex: 0 0 34px; background: var(--drawer); color: var(--pad); border: 1px solid var(--board-border);
  cursor: pointer; font-size: 12px;
}
.here-play:hover, .here-play:focus-visible { background: var(--pad); color: var(--ink); }
.tray-present {
  width: 100%; margin-top: 4px; padding: 6px 8px; cursor: pointer;
  font-family: var(--type); font-size: 11px; letter-spacing: 1px;
  background: var(--drawer); color: var(--pad); border: 1px solid var(--board-border);
}
.tray-present:hover, .tray-present:focus-visible { background: var(--pad); color: var(--ink); }

@media (max-width: 820px) {
  .pres-keys { display: none; }
  .pres-caption { left: 16px; top: 14px; max-width: calc(100vw - 32px); }
  .pres-bar { bottom: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .node, .frame, .string-line, .pres-bar { transition: none; }
}

/* A soft fade under the caption and the bar, so whatever the dimmed board
   has behind them never competes with the words. */
body.presenting .surface::before, body.presenting .surface::after {
  content: ""; position: absolute; left: 0; right: 0; z-index: 8; pointer-events: none;
}
body.presenting .surface::before { top: 0; height: 190px; background: linear-gradient(rgba(16, 16, 18, 0.92), rgba(16, 16, 18, 0)); }
body.presenting .surface::after { bottom: 0; height: 130px; background: linear-gradient(rgba(16, 16, 18, 0), rgba(16, 16, 18, 0.85)); }

/* ---------- editing: sections, strings, ties ---------- */

/* The whole title bar moves the section; the name only takes the pointer while it is being renamed. */
.frame-title input[readonly] { pointer-events: none; cursor: inherit; caret-color: transparent; }
.frame-title input.is-editing {
  pointer-events: auto; cursor: text; caret-color: auto;
  background: rgba(255, 255, 255, 0.4); outline: 1px dashed rgba(0, 0, 0, 0.55); outline-offset: 1px;
}
.frame-title:active { cursor: grabbing; }

/* A card's pin is its connector: it says so on hover. */
.node:hover .pin { box-shadow: 0 0 0 5px rgba(208, 53, 42, 0.22); }
.node .pin { transition: transform 0.12s ease, box-shadow 0.12s ease; }
.node .pin:hover { transform: scale(1.3); }

/* While tying, the card under the pointer is the one that will be tied. */
.node.is-target .pincard, .node.is-target .qcard, .node.is-target .doccard, .node.is-target .notepad {
  outline: 3px solid var(--string); outline-offset: 3px;
}

/* A string answers the pointer, and a selected one wears the pad yellow with an x to take it off. */
.links .string-hit:hover + .string-line { stroke-width: 4; }
.string-line.is-picked { stroke: var(--pad); stroke-width: 4; stroke-dasharray: none; }
.links .string-cut, .links .string-words-btn { pointer-events: all; cursor: pointer; }
.string-cut circle, .string-words-btn circle { fill: #18181b; stroke: var(--pad); stroke-width: 2; }
.string-cut path { stroke: var(--pad); stroke-width: 2.2; stroke-linecap: round; fill: none; }
.string-cut:hover circle, .string-words-btn:hover circle { fill: var(--pad); }
.string-cut:hover path { stroke: var(--ink); }

/* ---------- the ? panel ---------- */

.surface-wrap { position: relative; }
.tool.mini.help-btn { font-weight: 700; min-width: 28px; }
.tool.mini.help-btn.is-on { background: var(--pad); color: var(--ink); border-color: var(--pad); }
.help-panel {
  position: absolute; right: 12px; bottom: 50px; z-index: 12;
  width: min(470px, calc(100% - 24px)); max-height: calc(100% - 70px); overflow-y: auto;
  padding: 14px 18px 16px; background: var(--cream); color: var(--ink);
  border: 1px solid var(--card-border); box-shadow: 0 18px 40px rgba(0, 0, 0, 0.7);
}
.help-panel[hidden] { display: none; }
.help-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
.help-title { font-family: var(--type); font-size: 14px; letter-spacing: 1px; }
.help-close {
  width: 30px; height: 30px; line-height: 1; padding: 0; font-size: 18px; cursor: pointer;
  background: transparent; color: var(--muted); border: 1px solid var(--card-border);
}
.help-close:hover, .help-close:focus-visible { background: var(--pad); color: var(--ink); }
.help-group { padding-top: 10px; margin-top: 8px; border-top: 1px solid var(--rule); }
.help-group .eyebrow { margin-bottom: 6px; }
.help-panel dl { display: grid; grid-template-columns: 84px 1fr; gap: 5px 12px; margin: 0; font-size: 12.5px; line-height: 1.45; }
.help-panel dl.help-keys { grid-template-columns: max-content 1fr; }
.help-panel dt { font-family: var(--type); font-size: 11px; letter-spacing: 0.5px; color: var(--muted); padding-top: 1px; }
.help-panel dd { margin: 0; }
.help-panel kbd, .empty-inner kbd {
  display: inline-block; min-width: 20px; padding: 0 5px; text-align: center;
  font-family: var(--mono); font-size: 11px; line-height: 18px; color: var(--ink);
  background: var(--cream-2); border: 1px solid var(--card-border); border-bottom-width: 2px;
}
@media (max-width: 820px) {
  .help-panel { right: 8px; left: 8px; width: auto; bottom: 46px; }
  .help-panel dl { grid-template-columns: 70px 1fr; }
  .help-panel dl.help-keys { grid-template-columns: 1fr; }
  .help-panel dl.help-keys dd { margin-bottom: 4px; }
}

/* ---------- episode boards: moments, outside sources, checks ---------- */

/* A moment from a transcript: what was said, never a source. */
.node .pincard.moment { border-top: 3px dashed var(--string-grey); background: #ecebe6; }
.node .pincard.moment .tier { color: var(--muted); letter-spacing: 0.5px; }
.node .pincard.moment .pquote { font-style: italic; }
/* A page outside the repo, checked by hand. */
.node .pincard.outside { border-top: 3px solid var(--frame-1); }
.node .pincard.outside .tier { color: var(--frame-1); }
.stamp.pointer { color: #6f6f6f; }

/* A check carries its verdict as a coloured edge; the words say the verdict too. */
.node .notepad.verdict { border-left: 6px solid var(--muted); }
.node .notepad.verdict-holds { border-left-color: var(--held); }
.node .notepad.verdict-narrower { border-left-color: var(--not-held); }
.node .notepad.verdict-fails { border-left-color: var(--string); }
.node .notepad.verdict-open { border-left-color: var(--muted-light); }
.node .notepad.verdict-reading { border-left-color: var(--blue); }
.node .notepad.verdict-experience { border-left-color: var(--frame-4); }

/* ---------- phones: the desk as a list ----------
   A desk needs a wide screen and a pointer, so on a phone it reads as a list:
   the sections in reading order, each card tappable to read, each string as a
   "tied to" line. OPEN AS A DESK still gives the real surface. */
.phone-list[hidden] { display: none; }
body.phone-reading .desk-form, body.phone-reading .desk-tools,
body.phone-reading .desk, body.phone-reading .desk-narrow, body.phone-reading .skip { display: none; }
body.phone-reading .reader .lay-out, body.phone-reading .reader .thread-head { display: none; }
.phone-list { max-width: 640px; margin: 0 auto; padding: 0 0 40px; color: var(--text-light); }
.phone-top { padding: 4px 0 14px; border-bottom: 1px solid var(--board-border); margin-bottom: 18px; }
.phone-intro .eyebrow { font-family: var(--type); font-size: 11px; letter-spacing: 1.5px; color: var(--muted-light); }
.phone-title { font-family: var(--type); font-weight: 400; font-size: 22px; line-height: 1.25; margin: 6px 0 6px; color: var(--cream); }
.phone-sub { font-family: var(--mono); font-size: 13px; line-height: 1.5; margin: 0 0 12px; color: var(--muted-light); }
.phone-sub:empty { display: none; }
.phone-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.phone-toc { display: flex; flex-wrap: wrap; gap: 6px; }
.phone-toc button {
  font-family: var(--mono); font-size: 11px; line-height: 1.3; text-align: left; cursor: pointer;
  padding: 5px 8px; color: var(--text-light); background: var(--drawer-dark);
  border: 1px solid var(--board-border); border-left: 4px solid var(--fc, var(--frame-1));
}
.phone-sec { margin: 0 0 26px; scroll-margin-top: 12px; }
.phone-sec-title {
  font-family: var(--type); font-weight: 400; font-size: 14px; letter-spacing: 1.5px; margin: 0 0 12px;
  padding: 6px 10px; color: var(--ink); background: var(--fc, var(--frame-1));
}
.phone-item { margin: 0 0 14px; scroll-margin-top: 12px; }
.phone-item .node { position: static; transform: none; width: auto !important; }
.phone-item .node .pincard, .phone-item .node .qcard, .phone-item .node .doccard { cursor: pointer; }
.phone-item .node .pin { cursor: pointer; }
.phone-item .note-text { white-space: pre-wrap; font-family: var(--mono); font-size: 14px; line-height: 1.5; color: var(--ink); margin: 4px 0 0; }
.phone-ties { display: flex; flex-wrap: wrap; align-items: baseline; gap: 5px; margin: 6px 0 0 2px; }
.phone-ties .eyebrow { font-family: var(--type); font-size: 10px; letter-spacing: 1px; color: var(--string); }
.phone-ties button {
  font-family: var(--mono); font-size: 11px; line-height: 1.3; text-align: left; cursor: pointer; max-width: 100%;
  padding: 3px 7px; color: var(--text-light); background: transparent; border: 1px dashed var(--string-grey);
}
.phone-item.is-found .node > * { animation: found 1.4s ease-out; }
.phone-empty { font-family: var(--mono); font-size: 14px; line-height: 1.55; color: var(--text-light); }
.phone-empty .tool { display: block; width: 100%; margin: 0 0 8px; text-align: left; }
.desk-narrow .tool { margin-top: 8px; }
/* The list header already names the desk, so the shared bar keeps only its buttons. */
body.phone-reading .shared-bar .shared-text { display: none; }
/* Long addresses and unbroken lines wrap inside the reader instead of running off it. */
.reader-body, .reader-note { overflow-wrap: anywhere; }
/* The real desk on a phone: the way back on top, the surface big, the editing kit put away. */
body.phone-desk .desk-form, body.phone-desk .tray { display: none; }
body.phone-desk .desk-tools .tool-group.tools-end > :not(.present) { display: none; }
body.phone-desk #btnFrame, body.phone-desk #btnNote, body.phone-desk #btnTidy,
body.phone-desk #btnSnap, body.phone-desk #btnString { display: none; }
body.phone-desk .surface { height: 78vh; }

/* ---------- words on string ---------- */
/* Above the cards and section frames, so the words are never hidden under a card. */
.links.words { z-index: 4; }
.string-words { pointer-events: all; cursor: pointer; transition: opacity 0.45s ease; user-select: none; -webkit-user-select: none; }
.string-words rect { fill: var(--board, #18181b); stroke: var(--string); stroke-width: 1.5; }
.string-words text { fill: #f4efe2; font-family: var(--mono); font-size: 12px; }
.string-words.other rect { stroke: var(--string-grey); stroke-dasharray: 4 3; }
.string-words.is-picked rect { stroke: var(--pad); stroke-width: 2.5; }
.string-words.dim { opacity: 0.1; }
.string-words:hover rect { stroke-width: 2.5; }
.string-words-btn text { fill: var(--pad); font-family: var(--mono); font-size: 10px; font-weight: 700; pointer-events: none; }
.string-words-btn:hover text { fill: var(--ink); }
.string-words-edit {
  position: absolute; z-index: 7; transform-origin: 50% 50%; width: 220px;
  font-family: var(--mono); font-size: 13px; padding: 5px 8px;
  background: var(--pad); color: var(--ink); border: 2px solid var(--string); outline: none;
}
.phone-ties .tie-words { font-style: normal; color: var(--string); margin-right: 6px; }
@media (prefers-reduced-motion: reduce) { .string-words { transition: none; } }

/* ---------- the MORE menu and the empty desk's start ---------- */
/* The rail's right end was once .right, which styles.css (the Reading Room)
   already uses for a column; it is .tools-end so the two never meet. */
.more { position: relative; flex: 0 0 auto; }
.more-menu {
  position: absolute; right: 0; top: calc(100% + 4px); z-index: 30; min-width: 210px;
  display: flex; flex-direction: column; padding: 4px;
  background: var(--drawer-dark); border: 1px solid var(--board-border); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
}
.more-menu[hidden] { display: none; }
.more-menu button {
  display: flex; justify-content: space-between; align-items: center; gap: 12px; width: 100%;
  font-family: var(--type); font-size: 12px; letter-spacing: 1px; text-align: left;
  padding: 9px 10px; background: transparent; color: var(--text-light); border: 0; cursor: pointer;
}
.more-menu button:hover, .more-menu button:focus-visible { background: var(--drawer); color: #ffffff; outline: none; }
.more-menu button.danger { border-top: 1px solid var(--board-border); margin-top: 4px; color: #ffb4b4; }
.more-menu button.danger:hover, .more-menu button.danger:focus-visible { background: #3a2222; color: #ffd6d6; }
.more-menu .menu-key { margin-left: auto; font-family: var(--mono); font-size: 10px; color: var(--muted-light); white-space: nowrap; }
.more-menu kbd { font-family: inherit; }
.tool.more-btn[aria-expanded="true"] { background: var(--drawer); color: #ffffff; }
.empty-start { pointer-events: auto; margin-bottom: 18px; }
.empty-start p { color: var(--text-light); }
.empty-desks { display: flex; flex-direction: column; gap: 6px; margin: 10px 0 2px; }
.empty-desks .tool { white-space: normal; text-align: left; line-height: 1.35; }
.empty-desks .tool small { display: block; font-family: var(--mono); font-size: 10px; letter-spacing: 0; color: var(--muted-light); margin-bottom: 2px; }
.empty-start #btnStartNote { margin-top: 6px; }