/* The information panel (round 4, stage 6; panel.js). A phone gets a sheet that rises from the
   bottom, with a grab bar to swipe it away. A wide screen gets a centred panel: 760 px and two
   columns for a crew member (who he is on the left, his work on the right), 560 px otherwise. */
.detail {
  width: min(560px, calc(100vw - 32px)); max-height: calc(100vh - 64px); overflow: auto; overscroll-behavior: contain;
  background: var(--panel); color: var(--text); border: 1px solid var(--line); border-radius: 16px; padding: 0 16px 14px;
}
.detail.wide { width: min(760px, calc(100vw - 32px)); }
.detail::backdrop { background: rgba(0, 0, 0, 0.55); }
body.panel-open { overflow: hidden; }
/* The keyboard comes up over the app, never pushing it (Chris, 18 Oct): keyboard.js keeps --kb (its
   height) and --vvh (what stays visible). The open panel then sits in what is visible, above the
   keyboard; without keyboard.js both fall back and nothing changes. --kbt holds it from the top too: on the iPad the visible part can
   start far down the frame a fixed window is placed in (26 Oct, measured: 368 px), and a window centred in that frame rose too high. */
.detail { top: var(--kbt, 0px); bottom: var(--kb, 0px); max-height: min(calc(100vh - 64px), calc(var(--vvh, 100vh) - 32px)); }
/* On a touch screen nothing is blurred while a panel is open (Chris, 21 Oct: his Android's whole screen
   went dark each time the keyboard came up or went down over a plan he commented on). Each blur is
   redrawn at every step of the keyboard's slide; the panel's own background is solid, and what is
   behind it is under the backdrop. */
@media (pointer: coarse) {
  body.panel-open * { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
}

/* The head stays in view while the panel scrolls: medallion, name, position, Close. */
.sheet-head {
  position: sticky; top: 0; z-index: 2; margin: 0 -16px; padding: 12px 16px 10px;
  background: var(--panel); border-bottom: 1px solid var(--line);
}
.grab { display: none; }
.detail .head { display: flex; align-items: center; gap: 12px; }
.head-text { flex: 1; min-width: 0; }
/* The panel opens with its heading focused (autofocus), so a screen reader names it and no ring
   lands on Close; the heading is not a control, so it shows no ring itself. */
#detail-name:focus { outline: none; }
.detail h2 { margin: 0; font-size: 19px; line-height: 1.2; text-transform: none; letter-spacing: 0; color: var(--text); overflow-wrap: anywhere; }
/* The head is protected: its coin and buttons keep their size, and a long name or role takes a new line rather than pushing or clipping. */
.sheet-head .head > .ghost { flex: none; }
.sheet-head .head-text { overflow: visible; }
.head-sub { margin: 2px 0 0; font-size: 13.5px; line-height: 1.3; color: var(--muted); overflow-wrap: anywhere; }
.detail h3 { font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--faint); margin: 18px 0 8px; }

/* The medallion (portraits.js draws it: his profile in a kylix's tondo, its rim in the company's
   colour), with a dot for the state. Large enough to see the painting. */
.medallion { position: relative; flex: 0 0 auto; width: 76px; height: 76px; border-radius: 50%; }
/* The window's head coin is smaller (Chris, 1 Nov: too much of the head), crew and sessions alike. */
.sheet-head .medallion { width: 52px; height: 52px; }
.sheet-head .m-dot { width: 12px; height: 12px; }
@media (min-width: 820px) { .detail.wide .sheet-head .medallion { width: 68px; height: 68px; } }
@media (min-width: 820px) { .detail.wide .medallion { width: 104px; height: 104px; } }
.m-face { display: block; width: 100%; height: 100%; border-radius: 50%; overflow: hidden; }
.m-dot { position: absolute; right: 0; bottom: 0; width: 15px; height: 15px; border-radius: 50%; background: var(--faint); border: 2px solid var(--panel); }
.medallion.st-working .m-dot, .medallion.st-done .m-dot, .medallion.st-partial .m-dot, .medallion.st-answered .m-dot { background: var(--ok); }
.medallion.st-late .m-dot, .medallion.st-blocked .m-dot { background: var(--warn); }
.medallion.st-stuck .m-dot, .medallion.st-failed .m-dot { background: var(--stop); }

/* The parts. One column: in the order that matters on a phone. Two columns: card and work. */
.panel-cols { display: flex; flex-direction: column; }
.panel-card, .panel-work { display: contents; }
.ps-said { order: 0; } .ps-now { order: 1; } .ps-waits { order: 1; } .ps-top { order: 1; } .ps-chat { order: 2; } .ps-outcome { order: 2; } .ps-word { order: 3; } .ps-runs { order: 4; } .ps-steps { order: 5; }
.ps-skills { order: 6; } .ps-where { order: 7; } .ps-place { order: 8; } .ps-never { order: 9; }
.ps-where .facts, .ps-place .facts { margin-top: 0; }
@media (min-width: 820px) {
  .detail.wide .panel-cols { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); align-items: start; }
  .detail.wide .panel-card, .detail.wide .panel-work { display: block; }
  .detail.wide .panel-card { padding-right: 22px; }
  .detail.wide .panel-work { padding-left: 22px; border-left: 1px solid var(--line); min-height: 100%; }
}

.state-line { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: 14px 0 4px; font-size: 14px; color: var(--muted); }
.state-chip { font: 600 12px/1.2 var(--mono); padding: 3px 9px; border-radius: 999px; border: 1px solid var(--line); color: var(--muted); }
.state-chip.st-working, .state-chip.st-done, .state-chip.st-partial, .state-chip.st-answered { color: var(--ok); border-color: currentColor; }
.state-chip.st-late, .state-chip.st-blocked { color: var(--warn); border-color: currentColor; }
.state-chip.st-stuck, .state-chip.st-failed { color: var(--stop); border-color: currentColor; }
.detail .bubble { margin: 8px 0 4px; font-size: 14px; }
.info-role { font-size: 15px; line-height: 1.45; margin: 10px 0 0; }
.detail .actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; }
.detail p.meta { margin: 0; font-size: 13px; color: var(--faint); }
.info-steps, .info-list { margin: 0; padding-left: 20px; display: grid; gap: 4px; font-size: 14px; }
.info-list.skills li::marker { content: '\2713  '; color: var(--ok); }
.info-list.never li::marker { content: '\2715  '; color: var(--stop); }
.facts { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; margin: 0; font-size: 14px; }
.facts dt { color: var(--faint); } .facts dd { margin: 0; overflow-wrap: anywhere; }

/* His last runs as a timeline: a line down the left, a dot per run in the run's colour. */
.timeline { list-style: none; margin: 0; padding: 0 0 0 22px; position: relative; display: grid; gap: 12px; }
.timeline::before { content: ''; position: absolute; left: 5px; top: 6px; bottom: 6px; width: 2px; border-radius: 1px; background: var(--line); }
.tl { position: relative; display: grid; gap: 2px; font-size: 14px; }
.tl-dot { position: absolute; left: -22px; top: 3px; width: 12px; height: 12px; border-radius: 50%; background: var(--faint); border: 2px solid var(--panel); }
.tl-ok .tl-dot, .tl-partial .tl-dot { background: var(--ok); } .tl-blocked .tl-dot { background: var(--warn); }
.tl-failed .tl-dot { background: var(--stop); } .tl-running .tl-dot { background: var(--gold); }
.tl-time { font: 600 12px var(--mono); color: var(--faint); }
.tl-text { color: var(--muted); overflow-wrap: anywhere; }
.run-links { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 13px; }

/* "He never", folded: it matters, but it is not what he is doing. */
.never-fold { margin-top: 18px; border-top: 1px solid var(--line); }
.never-fold summary { font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--faint); padding: 12px 0 8px; }

/* A word for him, and his standing notes. */
.word-form { display: grid; gap: 8px; }
.word-form .row { align-items: center; }
.word-form .msg { margin: 0; }
.word-form .meta { margin: 0; font-size: 13px; color: var(--faint); }
.word-urgent { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 14px; color: var(--text); }
.word-urgent input { width: 20px; min-height: 20px; height: 20px; margin: 0; }
/* A word that answers his request: its tick beside the request, as the urgent one is. */
.word-settles { display: flex; align-items: center; gap: 10px; margin: 8px 0 0; font-size: 14px; color: var(--text); }
.word-list, .standing-list { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 8px; }
.word, .standing { display: grid; gap: 2px; padding: 8px 10px; border-radius: 10px; background: var(--panel-2); border: 1px solid var(--line); }
.standing { grid-template-columns: 1fr auto; align-items: center; gap: 8px; }
.word-said { font-size: 14px; overflow-wrap: anywhere; }
.word .meta { font-size: 12.5px; color: var(--faint); }
/* Change or withdraw a word before it is read; correct it once read (round 7, part N). */
.word-tools { display: flex; gap: 6px; margin-top: 4px; }
.word-tools .ghost.small, .word-edit .ghost.small { min-height: 28px; padding: 2px 10px; font-size: 12.5px; }
.word-edit { display: grid; gap: 6px; grid-template-columns: 1fr auto auto; align-items: end; }
.word-edit .word-text { grid-column: 1 / -1; }
.word.read .meta { color: var(--ok); }
.standing-form { margin-top: 10px; flex-wrap: nowrap; }
.standing-form input { flex: 1; min-width: 0; }

/* A phone: the sheet. It sits on the bottom edge, full width, and the head is its handle. */
@media (max-width: 699px) {
  .detail, .detail.wide {
    width: 100vw; max-width: 100vw; max-height: 92vh; max-height: min(92dvh, calc(var(--vvh, 100dvh) - 8px)); margin: auto 0 0;
    border-radius: 18px 18px 0 0; border-bottom: 0; padding-bottom: calc(14px + env(safe-area-inset-bottom));
  }
  .detail.leaving { transform: translateY(100%); }
  .sheet-head { touch-action: none; cursor: grab; padding-top: 8px; }
  .grab { display: block; width: 40px; height: 5px; border-radius: 3px; background: var(--faint); opacity: 0.6; margin: 0 auto 8px; }
}
@media (max-width: 699px) and (prefers-reduced-motion: no-preference) {
  .detail { transition: transform 0.2s ease; }
  .detail.dragging { transition: none; }
  .detail[open] { animation: sheet-in 0.24s ease-out; }
}
@media (min-width: 700px) and (prefers-reduced-motion: no-preference) {
  .detail[open] { animation: panel-in 0.16s ease-out; }
}
@keyframes sheet-in { from { transform: translateY(100%); } }
@keyframes panel-in { from { opacity: 0; transform: translateY(6px); } }
/* Where someone is while out of his chair, and Nestor's top three moves of the day. */
.info-doing { margin: 8px 0 0; font-size: 14px; color: var(--muted); }
.info-top { margin: 0; padding-left: 22px; display: grid; gap: 8px; font-size: 14px; line-height: 1.4; }
.info-top li { padding-left: 2px; }
.info-top .chip { margin-right: 8px; vertical-align: 1px; }

/* Talking with a crew member (stage 10, chat.js; round 6: one conversation). Chris's words on the
   right, his answers by his medallion on the left, "reading" with three dots while he reads. */
.chat-head { display: flex; align-items: center; gap: 8px; }
.chat-head h3 { flex: 1 1 auto; }
.chat-head .chat-new { margin-top: 10px; }
.chat-thread { list-style: none; margin: 6px 0 10px; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.chat-line { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 4px 8px; }
.chat-line.you { flex-direction: column; align-items: flex-end; gap: 3px; }
/* Work threads: his medallion sits to the right of his bubble (work.js lineEl), the time and files under the bubble. */
.work-thread .chat-line.you { display: grid; grid-template-columns: minmax(0, 1fr) 26px; align-items: end; gap: 3px 8px; }
.work-thread .chat-line.you > * { grid-column: 1; justify-self: end; }
.work-thread .chat-line.you > .chat-face.mine { grid-column: 2; grid-row: 1; justify-self: auto; }
/* The quiet scroll thumb runs down the right edge (fill.css .work-rail): keep the medallion clear of it. */
.work-thread .chat-line.you { padding-right: 12px; }
.chat-face { flex: none; width: 26px; height: 26px; border-radius: 50%; overflow: hidden; }
.chat-face svg { display: block; width: 100%; height: 100%; }
.chat-said {
  max-width: 86%; padding: 8px 12px; border-radius: 14px 14px 14px 4px; background: var(--panel-2); border: 1px solid var(--line);
  white-space: pre-wrap; overflow-wrap: anywhere; font-size: 14.5px; line-height: 1.45;
}
.chat-said.has-blocks { flex: 0 1 auto; min-width: 0; max-width: calc(100% - 34px); white-space: normal; }
.chat-said.has-blocks > :last-child { margin-bottom: 0; }
.chat-line.you .chat-said { border-radius: 14px 14px 4px 14px; background: var(--gold-soft); border-color: rgba(229, 175, 79, 0.45); }
.chat-at { width: 100%; font-size: 11.5px; color: var(--faint); }
.chat-line.him .chat-at { padding-left: 34px; }
.chat-line.you .chat-at { width: auto; }
.chat-reading .chat-said { color: var(--muted); }
.chat-line.note { padding: 6px 10px; border: 1px dashed var(--line); border-radius: 10px; color: var(--muted); font-size: 13.5px; }
.chat-line.meta { color: var(--faint); font-size: 13px; }
.chat-form { display: flex; gap: 8px; align-items: flex-end; }
.chat-form textarea { flex: 1 1 auto; min-width: 0; }
/* Working with him now (round 7, part U, work.js): the request, his words and Chris's as in a chat,
   each step he takes small and quiet, where the work stands, and what it left when it ends. */
.ps-wake { margin-top: 14px; }
.work-request { margin: 4px 0 0; padding: 8px 10px; border-left: 3px solid var(--gold); border-radius: 0 8px 8px 0; background: var(--gold-soft); font-size: 14px; white-space: pre-wrap; overflow-wrap: anywhere; }
/* The session it was started from and those started from it (work.js drawFamily): small lines under its request, each a link. */
.work-family { margin: 6px 0 0; display: grid; gap: 2px; }
.work-kin { margin: 0; font-size: 13px; color: var(--muted); overflow-wrap: anywhere; }
.work-kin-link { color: var(--text); text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: 3px; }
.work-step { padding-left: 34px; font-size: 12.5px; line-height: 1.35; color: var(--faint); overflow-wrap: anywhere; }
.work-step::before { content: '\2192\00a0'; }
.work-outcome { margin: 4px 0 10px; }
.work-summary { margin: 0 0 6px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel-2); white-space: pre-wrap; overflow-wrap: anywhere; font-size: 14px; line-height: 1.45; }
.work-left { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0; }
.work-files { font-size: 13.5px; color: var(--muted); overflow-wrap: anywhere; }
.work-carry input { flex: none; width: 16px; min-height: 16px; height: 16px; margin: 0; padding: 0; }
@keyframes work-beat { 50% { opacity: 0.35; } }
/* A word: its box beside the send button; a move's ask above it when one opened the window (M). */
.word-compose { display: flex; gap: 8px; align-items: flex-end; }
.word-compose textarea { flex: 1 1 auto; min-width: 0; }
.word-ask { margin: 0 0 8px; padding: 8px 10px; border-left: 3px solid var(--gold); border-radius: 0 8px 8px 0; background: var(--gold-soft); font-size: 14px; }
/* Round 6 (Chris, 18 Oct, night: the window's columns "scrolled separately"): on a wide screen the
   window takes most of the screen's height, its head stays, and each column scrolls on its own. */
@media (min-width: 820px) {
  .detail.wide[open] { display: flex; flex-direction: column; overflow: hidden; height: min(calc(100vh - 64px), calc(var(--vvh, 100vh) - 32px)); }
  .detail.wide .sheet-head { position: static; flex: none; }
  .detail.wide #detail-body { flex: 1 1 auto; min-height: 0; }
  .detail.wide .panel-cols { height: 100%; grid-template-rows: minmax(0, 1fr); align-items: stretch; }
  .detail.wide .panel-card, .detail.wide .panel-work { min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; padding-bottom: 16px; }
}

/* His words for you (E3), said first; and what he waits on you for (E4), each with its Answer. */
.ps-said { margin-top: 14px; }
.ps-said .bubble.says { font-size: 15px; line-height: 1.45; margin: 0 0 6px; }
.said-fold summary { font-size: 13px; color: var(--muted); cursor: pointer; margin: 6px 0 0; }
.said-fold .bubble { margin-top: 6px; }
.ps-waits .wait { border-top: 1px solid var(--line); padding: 10px 0 2px; }
.ps-waits .wait:first-of-type { border-top: 0; padding-top: 4px; }
.ps-waits .wait-title { margin: 0 0 8px; font-size: 14px; line-height: 1.4; }

/* The chat's way into the Claude app (round 7, part S): a quiet link under the talk, never a button
   across it (Chris: "needs to be more subtle than that"). */
/* Round 9: where a conversation lives, and the earlier ones, found again here. */
.chat-where { margin-top: 2px; font-size: 12.5px; }
.chat-power { margin: 6px 0 10px; padding: 8px 0 6px; border-bottom: 1px solid var(--line, rgba(255,255,255,.12)); }
.chat-power-list { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.chat-power-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.chat-power-row button { text-align: left; flex: 1 1 220px; min-height: 44px; }
.chat-power-status { flex: 0 1 auto; }
.chat-earlier { margin: 4px 0 6px; }
.chat-earlier summary { cursor: pointer; font-size: 13px; color: var(--muted); }
.chat-earlier-list { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.chat-earlier-open { display: flex; flex-wrap: wrap; gap: 2px 10px; width: 100%; min-height: 44px; text-align: left; justify-content: flex-start; }
.chat-earlier-when { color: var(--faint); font-size: 12px; }
.chat-earlier-first { flex: 1 1 100%; color: var(--text); font-size: 13.5px; }
.chat-earlier-turns { color: var(--faint); font-size: 12px; }
.chat-back { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.chat-back[hidden], .chat-earlier[hidden] { display: none; }
.chat-carry { font-size: 12.5px; color: var(--muted); text-decoration: underline; text-underline-offset: 2px; }
.chat-carry:hover, .chat-carry:focus-visible { color: var(--text); }

/* Round 7, part U, round 2 (Chris, 19 Oct: the work "hidden in a way on the left smaller side, the
   scroll bars showing also isn't cool ... a proper window"): a crew member's window of tabs (Now,
   Work, Talk, Words, About). The window takes the screen's height, the tab bar stays under his
   name, and each tab is the whole window below it, scrolling without a bar; a soft fade at a
   thread's foot says there is more below. Work and Talk keep their box for the next words at the
   window's foot, and their thread fills the rest. */
.panel-tabs { display: flex; gap: 2px; margin: 10px -6px -1px; padding: 0; overflow-x: auto; scrollbar-width: none; }
.panel-tabs::-webkit-scrollbar { display: none; }
.panel-tabs[hidden] { display: none; }
.detail .panel-tab {
  flex: 1 1 auto; justify-content: center; min-width: 54px; min-height: 40px; margin: 0; padding: 8px 6px 9px;
  background: none; border: 0; border-bottom: 2px solid transparent; border-radius: 0;
  color: var(--muted); font: 600 14px/1.1 var(--font); white-space: nowrap;
}
.detail .panel-tab:hover { color: var(--text); }
/* The open tab: a gold meander under it, as the medallions are ringed with the key. */
.detail .panel-tab[aria-selected="true"] { color: var(--text); border-bottom-color: transparent; background: var(--pot-key) repeat-x left bottom / 10px 6px; }
.detail .panel-tab:focus-visible { outline: 2px solid var(--gold); outline-offset: -3px; }
.detail .panel-tab.has-dot::after { content: ''; flex: none; width: 7px; height: 7px; margin-left: 6px; border-radius: 50%; background: var(--ok); }
@media (prefers-reduced-motion: no-preference) {
  .detail .panel-tab.has-dot::after { animation: work-beat 1.4s ease-in-out infinite; }
}
.detail.tabbed .sheet-head .medallion { width: 50px; height: 50px; }
@media (min-width: 820px) { .detail.tabbed .sheet-head .medallion { width: 60px; height: 60px; } }

.detail.tabbed { width: min(940px, calc(100vw - 32px)); }
.detail.tabbed[open] { display: flex; flex-direction: column; overflow: hidden; height: min(calc(100vh - 64px), calc(var(--vvh, 100vh) - 32px)); }
.detail.tabbed .sheet-head { position: static; flex: none; padding-bottom: 0; }
.detail.tabbed #detail-body { flex: 1 1 auto; min-height: 0; margin: 0 -16px -14px; }
.panel-panes { height: 100%; }
.panel-pane { height: 100%; box-sizing: border-box; padding: 4px 16px 16px; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; }
.panel-pane[hidden] { display: none; }
.panel-pane, .work-scroll, .detail.tabbed .chat-thread { scrollbar-width: none; }
.panel-pane::-webkit-scrollbar, .work-scroll::-webkit-scrollbar, .detail.tabbed .chat-thread::-webkit-scrollbar { display: none; }
.detail.tabbed .medallion { width: 72px; height: 72px; }
@media (min-width: 820px) { .detail.tabbed .medallion { width: 88px; height: 88px; } }
/* About: on a wide window, two columns of parts, none split between them (Now lays itself out, Part V). */
@media (min-width: 820px) {
  .pane-about { column-width: 360px; column-gap: 36px; }
  .pane-about .ps { break-inside: avoid; }
  .pane-words .ps-word { max-width: 680px; }
}
.pane-now .ps-said { margin-top: 10px; }

/* Work and Talk: a column, the thread in the middle taking what is left. */
.pane-work, .pane-talk { display: flex; flex-direction: column; overflow: hidden; padding-bottom: 12px; }
.pane-work[hidden], .pane-talk[hidden] { display: none; }
.pane-work .ps-wake, .pane-talk .ps-chat { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; margin: 0; }
.ps-wake .work-top, .ps-chat .chat-head, .ps-chat > .meta { flex: none; }
.ps-wake .work-top h3, .pane-talk .chat-head h3 { margin-top: 12px; }
.work-scroll, .pane-talk .chat-thread { flex: 1 1 auto; min-height: 96px; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; }
.pane-talk .chat-thread { margin: 8px 0; padding-right: 2px; }
.work-scroll { margin: 8px 0 4px; }
.work-scroll.more-below, .pane-talk .chat-thread.more-below { -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(to bottom, #000 calc(100% - 28px), transparent); }
/* The top fade only hints at more above: a line under the summary bar must stay readable (Chris, 22 Oct). */
.work-scroll.more-above, .pane-talk .chat-thread.more-above { -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,.55), #000 12px); mask-image: linear-gradient(to bottom, rgba(0,0,0,.55), #000 12px); }
.work-scroll.more-above.more-below, .pane-talk .chat-thread.more-above.more-below { -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,.55), #000 12px, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(to bottom, rgba(0,0,0,.55), #000 12px, #000 calc(100% - 28px), transparent); }
.work-thread { margin-top: 10px; }
.work-back { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 8px; font-size: 13.5px; color: var(--muted); }

/* A page the session published for Chris (round 2): a card that opens it on claude.ai. */
.work-page {
  display: grid; grid-template-columns: 1fr auto; grid-template-areas: 'kind open' 'title open'; gap: 2px 14px; align-items: center;
  max-width: 86%; padding: 9px 12px; border-radius: 14px 14px 14px 4px; border: 1px solid rgba(229, 175, 79, 0.55);
  background: var(--panel-2); color: var(--text); text-decoration: none;
}
.work-page:hover { border-color: var(--gold); }
.work-page.plain { grid-template-areas: 'title open'; }
.work-page-kind { grid-area: kind; font-size: 11.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--faint); }
.work-page-title { grid-area: title; font-size: 14.5px; line-height: 1.35; font-weight: 600; overflow-wrap: anywhere; }
.work-page-open { grid-area: open; padding: 6px 12px; border-radius: 999px; background: var(--pot-clay); color: var(--pot-ink); border: 1px solid var(--pot-edge); font: 600 13px/1.2 var(--font); }
.work-pages-head { margin: 10px 0 6px; font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--faint); }
.work-pages { display: grid; gap: 8px; margin-bottom: 8px; }
.work-pages .work-page { max-width: none; border-radius: 12px; }
/* A link in the session's own words (work-asks.js linkEl): a claude.ai page as the same card, on its own
   line inside the words; any other link underlined, naming its site. */
.work-gate { margin: 8px 0; max-width: 100%; border-radius: 12px; }
.said-link { color: var(--gold); text-decoration: underline; text-underline-offset: 2px; overflow-wrap: anywhere; }

/* A phone: the window is the whole sheet. */
@media (max-width: 699px) {
  .detail.tabbed, .detail.tabbed.wide { width: 100vw; }
  .detail.tabbed[open] { height: min(92dvh, calc(var(--vvh, 100dvh) - 8px)); }
  .detail.tabbed #detail-body { margin-bottom: calc(-14px - env(safe-area-inset-bottom)); }
  .panel-pane { padding-bottom: calc(16px + env(safe-area-inset-bottom)); }
  /* The bar's room is the box's offset, not the pane's padding (Chris, 24 Oct: the 3-button bar showed a solid strip): the thread runs to the screen's edge, under it. */
  .pane-work, .pane-talk { padding-bottom: 0; }
  .detail .panel-tab { font-size: 13.5px; min-width: 50px; padding-left: 4px; padding-right: 4px; }
}

/* Round 2, part 2 (Chris, 19 Oct: "the conversation window should take the most space and the input
   bubble itself should be floating over the conversation at the bottom, with all the other buttons
   (switch for model, finish, stop) to be small and discreet and floating over the conversation"). The
   conversation runs to the window's foot; the box for the next words floats over it as a bubble, and
   the work's few buttons float over the bubble as small pills. A pill's paint is the panel's, a little
   see-through where the browser blends colours, solid where it does not. */
.pane-work .ps-wake, .pane-talk .ps-chat { position: relative; }
.pane-work .work-scroll { margin: 0; padding-top: 2px; }
.work-dock, .pane-talk .chat-form { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; }
@media (max-width: 699px) { .work-dock, .pane-talk .chat-form { bottom: calc(10px + env(safe-area-inset-bottom, 0px)); } }
.work-dock { display: grid; gap: 6px; pointer-events: none; }
.work-dock > *, .work-bar > * { pointer-events: auto; }
.work-bar { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; align-items: center; pointer-events: none; }
.work-bar[hidden], .work-form[hidden], .work-add[hidden] { display: none; }
.work-form { display: grid; gap: 6px; pointer-events: none; }
.work-status, .detail .work-pill, .detail .work-chip select, .detail .work-carry, .work-dock .msg, .pane-talk .ps-chat > .msg {
  background: var(--panel); background: color-mix(in srgb, var(--panel) 86%, transparent);
  border: 1px solid var(--line); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.work-status { margin-right: auto; display: inline-flex; align-items: center; gap: 6px; max-width: 100%; padding: 4px 10px; border-radius: 999px; font-size: 12px; line-height: 1.25; color: var(--muted); }
.work-status::before { content: ''; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--faint); }
.work-status.ws-working::before, .work-status.ws-queued::before { background: var(--gold); }
.work-status.ws-waiting::before { background: var(--ok); }
.work-status.ws-trouble { color: var(--text); }
.work-status.ws-trouble::before { background: #c86b4a; }
@media (prefers-reduced-motion: no-preference) {
  .work-status.ws-working::before { animation: work-beat 1.4s ease-in-out infinite; }
}
.detail .work-pill { min-height: 28px; padding: 3px 12px; border-radius: 999px; font-size: 12.5px; font-weight: 600; color: var(--text); }
/* The work's pills and chips: small glazed pots ringed in terracotta, as the buttons are (style.css). */
.detail .work-pill, .detail .work-chip select {
  background-color: #17110d; color: var(--pot-papyrus); border-color: var(--pot-ring);
  -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: inset 0 1px 0 rgba(255, 236, 214, 0.07), 0 1px 5px rgba(0, 0, 0, 0.3);
}
.detail .work-pill { background-image: var(--pot-glaze); }
.detail .work-pill:hover, .detail .work-chip select:hover { border-color: var(--pot-gold); }
.detail .work-pill.go { background: var(--pot-clay); border-color: var(--pot-edge); color: var(--pot-ink); }
.detail .work-chip { display: inline-flex; align-items: center; gap: 6px; margin: 0; font-size: 12.5px; color: var(--muted); }
.detail .work-chip select {
  width: auto; min-height: 28px; padding: 2px 28px 2px 12px; border-radius: 999px; font-size: 12.5px; color: var(--pot-papyrus);
  background-image: var(--pot-chevron), var(--pot-glaze); background-repeat: no-repeat;
  background-position: calc(100% - 16px) 52%, calc(100% - 12px) 52%, 0 0; background-size: 4px 4px, 4px 4px, 100% 100%;
}
.detail .work-carry { padding: 4px 10px; border-radius: 999px; }
.work-dock .msg, .pane-talk .ps-chat > .msg { justify-self: end; margin: 0; padding: 4px 10px; border-radius: 10px; font-size: 13px; }
.work-dock .msg:empty, .pane-talk .ps-chat > .msg:empty { display: none; }
.pane-talk .ps-chat > .msg { position: absolute; top: 46px; right: 0; z-index: 3; }
/* The bubble: the box and its send button, floating, its border warm while Chris writes in it. */
.work-bubble, .pane-talk .chat-form {
  display: flex; align-items: flex-end; gap: 6px; padding: 4px 4px 4px 14px; border-radius: 24px;
  background: var(--panel-2); background: color-mix(in srgb, var(--panel-2) 92%, transparent);
  border: 1px solid var(--line); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); pointer-events: auto;
}
.work-bubble:focus-within, .pane-talk .chat-form:focus-within { border-color: rgba(229, 175, 79, 0.6); }
.work-bubble textarea, .pane-talk .chat-form textarea {
  flex: 1 1 auto; min-width: 0; height: 38px; min-height: 38px; max-height: 150px; margin: 0; padding: 9px 0;
  border: 0; border-radius: 0; background: transparent; box-shadow: none; resize: none; font-size: 15px; line-height: 20px;
}
.work-bubble textarea:focus-visible, .pane-talk .chat-form textarea:focus-visible { outline: none; }
.work-bubble .send-btn, .work-bubble .send-btn .send-art, .pane-talk .chat-form .send-btn, .pane-talk .chat-form .send-btn .send-art { width: 38px; height: 38px; min-height: 38px; }
.work-ended { margin: 0 0 6px; font-size: 13px; color: var(--faint); }

/* Part V (Chris, 19 Oct, night: "another empty space is the new (first) section ... could we have a
   better ux there"). The Now tab at a glance: his own object and his state at the top, the window's
   other tabs a tap away; the few things that matter as cards (two across on a phone, three on a wide
   window); then what waits on him to answer and his last runs, side by side on a wide window. */
.ps-nowhead { display: flex; align-items: center; gap: 16px; margin-top: 14px; }
.now-object {
  flex: none; display: grid; place-items: center; width: 92px; height: 92px; border-radius: 50%;
  background: radial-gradient(circle at 50% 36%, var(--gold-soft), transparent 70%), var(--panel-2);
  border: 1px solid rgba(229, 175, 79, 0.35);
}
.now-object svg { display: block; width: 76%; height: 76%; }
.now-state { flex: 1 1 auto; min-width: 0; }
.now-state .state-line { margin-top: 0; }
.now-go { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.detail .now-go-btn { min-height: 32px; padding: 4px 12px; border-radius: 999px; font-size: 13px; }
.detail .now-live { margin-top: 8px; min-height: 32px; padding: 4px 12px; border-radius: 999px; font-size: 13px; }
.ps-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 16px; }
.now-card { display: grid; align-content: start; gap: 4px; min-width: 0; padding: 12px 14px; border-radius: 12px; background: var(--panel-2); border: 1px solid var(--line); }
.now-last, .now-outcome { grid-column: 1 / -1; }
.now-card-title { margin: 0; font-size: 11.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--faint); }
.now-card-main { margin: 0; font-size: 17px; font-weight: 600; line-height: 1.25; color: var(--text); }
.now-card-text { margin: 0; font-size: 13.5px; line-height: 1.4; color: var(--muted); overflow-wrap: anywhere; }
.now-note { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden; }
.now-card-links { display: flex; flex-wrap: wrap; gap: 4px 12px; margin: 2px 0 0; font-size: 13px; }
.now-card.warn { border-color: rgba(229, 175, 79, 0.55); background: var(--gold-soft); }
.now-card.warn .now-card-main { color: var(--warn); }
.now-card .progress { margin: 6px 0 0; }
.now-lower { display: grid; gap: 0 36px; }
@media (min-width: 820px) {
  .ps-nowhead { gap: 20px; }
  .now-object { width: 112px; height: 112px; }
  .ps-cards { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr); }
  .now-last { grid-column: auto; }
  .now-lower { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); align-items: start; }
}

/* The Work tab, grown up (Part V). His works as a strip at its top: each live one, the week's, + New. */
.work-strip { flex: none; display: flex; gap: 8px; margin: 10px 0 0; padding: 2px 0 4px; overflow-x: auto; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.work-strip::-webkit-scrollbar { display: none; }
.detail .work-strip-item {
  flex: 0 0 auto; display: grid; gap: 3px; justify-items: start; align-content: start; width: 200px; min-height: 0; margin: 0; padding: 8px 12px;
  text-align: left; background: var(--panel-2); color: var(--text); border: 1px solid var(--line); border-radius: 12px; font: 400 13.5px/1.3 var(--font);
}
.detail .work-strip-item:hover { border-color: rgba(229, 175, 79, 0.6); }
.detail .work-strip-item.on { border-color: var(--gold); box-shadow: inset 0 0 0 1px var(--gold); }
.detail .work-strip-item.new { width: auto; align-content: center; padding: 8px 16px; font-weight: 600; color: var(--gold); }
.work-strip-text { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; overflow-wrap: anywhere; }
.work-strip-meta { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--faint); }
.work-strip-item.live .work-strip-meta::before { content: ''; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--gold); }
.work-strip-item.asking .work-strip-meta { color: var(--warn); }
.work-strip-item.asking .work-strip-meta::before { background: var(--warn); }

/* His own scheduled run while it goes: a live card, its page on claude.ai a tap away. */
.work-run { display: grid; gap: 6px; margin: 10px 0 4px; padding: 12px 14px; border-radius: 12px; border: 1px solid rgba(229, 175, 79, 0.45); background: var(--gold-soft); }
.work-run-head { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 14px; font-weight: 600; }
.work-run-head::before { content: ''; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--gold); }
@media (prefers-reduced-motion: no-preference) { .work-run-head::before { animation: work-beat 1.4s ease-in-out infinite; } }
.work-run-now { margin: 0; font-size: 14px; color: var(--muted); }
.work-run .btn { justify-self: start; min-height: 32px; padding: 4px 12px; border-radius: 999px; font-size: 13px; }

/* No work shown: the welcome fills the space above the box (work-hero.js), his object large in a ring. */
.work-scroll.welcoming { display: flex; flex-direction: column; }
/* Centred by its margins, which shrink to nothing when it is taller than the room: never cut at its top. */
.work-scroll.welcoming .work-welcome:not([hidden]) { flex: 1 0 auto; display: flex; flex-direction: column; }
.work-welcome .work-hero { margin: auto; }
.work-hero { display: grid; justify-items: center; gap: 4px; max-width: 540px; padding: 16px 6px 20px; text-align: center; }
.work-hero-ring {
  display: grid; place-items: center; width: 132px; height: 132px; margin-bottom: 12px; border-radius: 50%;
  background: radial-gradient(circle at 50% 36%, var(--gold-soft), transparent 68%), var(--panel-2);
  border: 1px solid rgba(229, 175, 79, 0.4); box-shadow: 0 0 0 10px rgba(229, 175, 79, 0.05), 0 22px 60px rgba(0, 0, 0, 0.3);
  touch-action: none; /* a drag from the coin spins the Matrix pattern (medallion-rain.js), it never scrolls the window */
}
.work-hero-object { display: block; width: 74%; height: 74%; }
.work-hero-name { margin: 0; font-size: 19px; font-weight: 600; color: var(--text); }
.work-hero-facts { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 3px; font-size: 13.5px; line-height: 1.4; color: var(--muted); }
.work-hero-starts { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 14px; }
.detail .work-hero-start { min-height: 34px; max-width: 100%; padding: 6px 14px; border-radius: 999px; font-size: 13px; white-space: normal; text-align: left; }
@media (min-width: 820px) { .work-hero-ring { width: 156px; height: 156px; } }

/* The thread fades out under the floating pills and box, so a line never shows between two pills. */
.work-dock::before { content: ''; position: absolute; z-index: -1; left: -16px; right: -16px; top: -22px; bottom: -14px; pointer-events: none; background: linear-gradient(to bottom, transparent, var(--panel) 26px); }

/* What the session asks him (work-asks.js): a card in the thread where it asked, warm until he answers. */
.work-ask-line { display: block; margin: 4px 0; }
.work-ask { display: grid; gap: 8px; min-width: 0; padding: 12px 14px; border-radius: 14px; border: 1px solid rgba(229, 175, 79, 0.6); background: var(--panel-2); box-shadow: 0 0 0 3px var(--gold-soft); }
.work-ask.answered { border-color: var(--line); box-shadow: none; }
.work-ask-head { margin: 0; font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold); }
.work-ask.answered .work-ask-head { color: var(--faint); }
.work-q { display: grid; gap: 6px; }
.work-q + .work-q { padding-top: 10px; border-top: 1px solid var(--line); }
.work-q-tag { justify-self: start; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--line); font: 600 11.5px/1.3 var(--mono); color: var(--muted); }
.work-q-text { margin: 0; font-size: 15px; font-weight: 600; line-height: 1.4; color: var(--text); }
.work-q-opts { display: grid; gap: 6px; }
.detail .work-q-opt {
  display: grid; gap: 2px; justify-items: start; width: 100%; min-height: 0; margin: 0; padding: 9px 12px; text-align: left;
  background: var(--panel); color: var(--text); border: 1px solid var(--line); border-radius: 10px; font: 400 14px/1.35 var(--font);
}
.detail .work-q-opt:hover { border-color: rgba(229, 175, 79, 0.6); }
.detail .work-q-opt[aria-pressed="true"] { border-color: var(--gold); background: var(--gold-soft); box-shadow: inset 0 0 0 1px var(--gold); }
.work-q-label { font-weight: 600; }
.work-q-desc { font-size: 13px; color: var(--muted); }
.work-q-other { width: 100%; box-sizing: border-box; }
.work-q-own { display: flex; align-items: center; gap: 6px; }
.work-q-own .work-q-other { flex: 1 1 auto; min-width: 0; }
.work-ask-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.detail .work-plan-then { width: auto; min-height: 36px; padding: 2px 28px 2px 10px; border-radius: 999px; font-size: 13.5px; }
.work-ask-note { display: grid; gap: 6px; }
.work-ask-note textarea { min-height: 64px; }
.work-ask-said { margin: 0; font-size: 14px; color: var(--muted); overflow-wrap: anywhere; }
.work-ask-msg { margin: 0; font-size: 13px; color: var(--warn); }
.work-ask-msg:empty { display: none; }
.work-permit-what { margin: 0; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--line); background: var(--panel); font: 13px/1.45 var(--mono); white-space: pre-wrap; overflow-wrap: anywhere; }
/* A plan, to read: its headings, lists and code; a long one folded until "Read it all". */
.work-plan-text { max-height: 340px; overflow: hidden; font-size: 14px; line-height: 1.5; -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 60px), transparent); mask-image: linear-gradient(to bottom, #000 calc(100% - 60px), transparent); }
.work-ask.answered .work-plan-text { max-height: 132px; }
.work-ask.plan-shown .work-plan-text { max-height: none; -webkit-mask-image: none; mask-image: none; }
.detail .work-plan-more { justify-self: start; }
.work-plan-text > :first-child { margin-top: 0; }
/* Comments on a plan (Chris, 19 Oct): the button by the selected words, the box for a comment, the list. */
.work-ask.ask-plan { position: relative; }
.work-plan-pick { position: absolute; z-index: 3; top: 8px; left: 8px; width: max-content; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35); }
.work-plan-composer { position: absolute; z-index: 4; width: min(360px, calc(100% - 16px)); box-sizing: border-box; display: grid; gap: 6px; padding: 10px; border-radius: 10px; border: 1px solid var(--line); background: var(--panel); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35); }
.work-plan-composer[hidden] { display: none; }
.work-plan-composer textarea { min-height: 56px; }
.work-plan-quote { margin: 0; font-size: 13px; font-style: italic; color: var(--muted); overflow-wrap: anywhere; }
.work-plan-comments { display: grid; gap: 8px; margin: 0; padding-left: 20px; }
.work-plan-comment { display: grid; gap: 2px; justify-items: start; }
.work-plan-said { margin: 0; font-size: 14px; overflow-wrap: anywhere; }
.work-plan-sent { white-space: pre-line; }
.work-plan-hint { margin: 0; }
::highlight(plan-comment) { background-color: rgba(229, 175, 79, 0.38); }
.md-h { margin: 12px 0 4px; font-weight: 700; color: var(--text); }
.md-h1 { font-size: 17px; } .md-h2 { font-size: 15.5px; } .md-h3 { font-size: 14.5px; }
.md-p { margin: 0 0 8px; overflow-wrap: anywhere; }
.md-list { display: grid; gap: 3px; margin: 0 0 8px; padding-left: 22px; }
ul.md-list { list-style-type: disc; } ol.md-list { list-style-type: decimal; }
.md-code { margin: 0 0 8px; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--line); background: var(--panel); overflow-x: auto; font: 12.5px/1.45 var(--mono); white-space: pre; }
/* Tables, quotes, rules and check boxes in a plan, read as they are written. */
.md-table-wrap { margin: 0 0 10px; overflow-x: auto; border: 1px solid var(--line); border-radius: 8px; -webkit-overflow-scrolling: touch; }
.md-table { border-collapse: collapse; width: max-content; min-width: 100%; font-size: 13.5px; line-height: 1.4; }
.md-table th, .md-table td { padding: 6px 10px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.md-table th { background: var(--panel); font-weight: 700; white-space: nowrap; }
.md-table tr:last-child td { border-bottom: 0; }
.md-table td { min-width: 90px; max-width: 320px; overflow-wrap: anywhere; }
.md-quote { margin: 0 0 8px; padding: 2px 0 2px 12px; border-left: 3px solid var(--line); color: var(--muted); }
.md-quote .md-p { margin: 0 0 4px; }
.md-rule { margin: 12px 0; border: 0; border-top: 1px solid var(--line); }
.md-list .md-list { margin: 3px 0 0; }
.md-task { list-style: none; margin-left: -18px; }
.md-task.done { color: var(--muted); }
.md-box { margin-right: 6px; }
.md-code[data-lang]::before { content: attr(data-lang); display: block; margin-bottom: 4px; font: 11px var(--mono); color: var(--muted); text-transform: uppercase; }
.work-plan-text code { padding: 0 3px; border-radius: 4px; background: var(--panel); font: 0.92em var(--mono); }
.work-plan-text .md-code code { padding: 0; background: none; font: inherit; }

/* The session's own checklist, as it keeps it. */
.work-todo-box:empty { display: none; }
.work-todo { margin: 8px 0 0; padding: 8px 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--panel-2); }
.work-todo summary { cursor: pointer; font-size: 13px; font-weight: 600; color: var(--muted); }
.work-todo-list { list-style: none; display: grid; gap: 4px; margin: 8px 0 2px; padding: 0; font-size: 13.5px; }
.work-todo-list li { display: flex; gap: 8px; align-items: baseline; color: var(--muted); overflow-wrap: anywhere; }
.work-todo-list li::before { content: '\25CB'; flex: none; width: 14px; color: var(--faint); }
.work-todo-list li.todo-in_progress { color: var(--text); font-weight: 600; }
.work-todo-list li.todo-in_progress::before { content: '\25D0'; color: var(--gold); }
.work-todo-list li.todo-completed { color: var(--faint); }
.work-todo-list li.todo-completed::before { content: '\2713'; color: var(--ok); }

/* How full its context is, beside the mode and thinking chips; warm from 70%. */
.work-context {
  display: inline-flex; align-items: center; min-height: 28px; box-sizing: border-box; padding: 3px 10px; border-radius: 999px; font: 600 12px/1.2 var(--mono); color: var(--muted);
  background: var(--panel); background: color-mix(in srgb, var(--panel) 86%, transparent);
  border: 1px solid var(--line); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.work-context.warn { color: var(--warn); }

/* After a work: one small line, the same session and how full its context is. */
.work-choice { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
/* The occasional controls (model, mode, thinking, context, Compact ...) fold behind More on every screen, a laptop's too (Chris,
   22 Oct: "I can't hide the buttons ... there's no button like on the mobile"); the device remembers how he left it. */
.detail .work-more { display: inline-flex; }
.work-bar:not(.show-more) > .work-occasional { display: none; }
.work-choice > * { pointer-events: auto; }
/* `form button { margin-top: 12px }` (style.css) pushed Compact down, and the centred row then looked as if the tag sat too high (Chris, 27 Oct). */
.work-choice > button { margin-top: 0; }

/* The session's code words in its lines and its outcome, as in its plan. */
.work-thread .chat-said code, .work-summary code { padding: 0 3px; border-radius: 4px; background: var(--panel); font: 0.92em var(--mono); }

/* The files a work changed, in its outcome. */
.work-changed { display: grid; gap: 2px; max-height: 180px; overflow-y: auto; margin: 0 0 8px; padding: 8px 12px; list-style: none; border-radius: 10px; border: 1px solid var(--line); background: var(--panel-2); font: 12.5px/1.45 var(--mono); color: var(--muted); }
.work-changed li { overflow-wrap: anywhere; }

/* Round 7, part W2: Your sessions (public/mine.js), from his avatar: his medallion in the header, the
   lock (this device's passkey, its half hour), his sessions by project, one session's lines, taking it up. */
.mine-open { margin-left: auto; padding: 0; min-height: 0; width: 40px; height: 40px; border: 0; border-radius: 50%; background: none; cursor: pointer; }
.mine-open .medallion { width: 40px; height: 40px; }
/* The window's medallion starts a session (mine.js startMedallion): a plus engraved in its rim and its life are in
   medallion-life.css; a nod when tapped. */
#detail-pic.starts { cursor: pointer; }
/* Pinned (mine.js pin): fixed at the top right over its spot in the header, so it stays while the desk scrolls. */
.mine-spot { flex: none; width: 40px; height: 40px; margin-left: auto; }
.mine-open.pinned { position: fixed; z-index: 9; margin: 0; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35); }
.mine-open.pinned.unplaced, body.panel-open .mine-open.pinned { display: none; }
/* The ways to start show only over an empty box (Chris, 21 Oct: a stray tap lost his words). */
.work-welcome.has-words .work-hero-starts { display: none; }
.mine-open:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.chris-unit.opens { cursor: pointer; }
.chris-unit.opens:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; border-radius: 12px; }
.mine-lock { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0 0 12px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; }
.mine-lock .meta { margin: 0; }
.mine-unlocked { margin: 0; font-size: 13px; color: var(--ok); }
.mine-setup-head { margin: 0; font-weight: 600; width: 100%; }
.mine-setup { display: flex; flex-wrap: wrap; gap: 6px; width: 100%; }
.mine-setup input { flex: 1 1 140px; min-width: 0; }
/* Round 8: set up once (approved by another device, or the PC's code), his devices with Remove. */
.mine-lock > input { flex: 1 1 100%; min-width: 0; }
.mine-approve, .mine-code-way { display: grid; gap: 6px; width: 100%; }
.mine-approve .msg, .mine-code-way .msg { margin: 0; }
.mine-code-way summary, .mine-devices summary { cursor: pointer; font-size: 13px; color: var(--muted); }
.mine-devices { width: 100%; }
.mine-device { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin-top: 6px; }
.mine-device-name { flex: 1 1 auto; font-size: 14px; }
.mine-group { margin: 0 0 14px; }
.mine-group h3 { margin: 0 0 6px; font-size: 13px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); }
.mine-project { margin: 8px 0 4px; font-size: 12.5px; color: var(--faint); }
.mine-row {
  display: grid; gap: 2px; width: 100%; margin: 0 0 6px; padding: 9px 12px; min-height: 0; text-align: left;
  border: 1px solid var(--line); border-radius: 12px; background: var(--card, transparent); color: var(--text); font: inherit; cursor: pointer;
}
.mine-row.live { border-color: rgba(111, 211, 143, 0.45); }
.mine-row.waits { border-color: var(--warn); }
.mine-row:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.mine-row-title { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mine-row-meta { font-size: 12.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mine-row-tag { font-size: 11.5px; color: var(--gold); }
.panel-pane .mine-title { margin: 6px 0 2px; font-size: 18px; font-weight: 700; letter-spacing: 0; text-transform: none; color: var(--text); }
.mine-sub { margin: 0 0 10px; font-size: 13px; color: var(--muted); }
.mine-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0 0 10px; }
.mine-acts .meta { margin: 0; flex: 1 1 200px; }
.mine-lines { max-height: none; margin: 0 0 12px; }
.mine-take { position: static; margin: 12px 0 0; }
.mine-take-head { margin: 0 0 2px; font-weight: 600; }
.mine-welcome h3 { margin: 0 0 6px; }

/* Round 7, part W2b: a crew member's scheduled run, live under its card in his Work tab (run-live.js). */
.run-live { margin: 8px 0 4px; }
.run-live-lines { max-height: 320px; overflow-y: auto; scrollbar-width: none; margin: 0 0 8px; }
.run-live-lines::-webkit-scrollbar { display: none; }
.run-live-say { position: static; }

/* The Sessions tab's slim lane (mine.js sessionsPane): start, where, the allowance; it scrolls sideways and keeps its height. */
.mine-lane { flex: none; display: flex; align-items: stretch; gap: 8px; margin: 0 0 10px; padding: 2px 0 4px; overflow-x: auto; scrollbar-width: none; touch-action: pan-x; }
.mine-lane::-webkit-scrollbar { display: none; }
.mine-lane[hidden] { display: none; }
.mine-lane > * { flex: 0 0 auto; margin: 0; }
.mine-lane .mine-lane-start, .mine-lane .mine-lane-pill { align-self: center; width: auto; min-height: 34px; padding: 4px 14px; border-radius: 999px; white-space: nowrap; }
.mine-lane-card { display: grid; align-content: center; gap: 3px; width: 150px; padding: 6px 10px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel-2); }
.mine-lane-card .mine-gauge-head { margin: 0; font-size: 12.5px; display: flex; justify-content: space-between; gap: 8px; }
.mine-lane-card .meta { margin: 0; font-size: 11.5px; }

/* The start bubble of Your sessions (mine.js startBubble): over the panes, in the window's bottom corner, clear of the home bar. */
.panel-panes.mine-bubbled { position: relative; }
.mine-bubble {
  position: absolute; z-index: 6; right: 18px; bottom: calc(18px + env(safe-area-inset-bottom, 0px)); width: 52px; height: 52px; padding: 0;
  display: grid; place-items: center; border-radius: 50%; font-size: 30px; line-height: 1; font-weight: 400;
  background: var(--accent, #c9a14a); color: #1a1408; border: 0; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.5); cursor: pointer;
}
.mine-bubble[hidden] { display: none; }

#detail-pic.starts { position: relative; }
#detail-pic.starts:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
@media (prefers-reduced-motion: no-preference) {
  #detail-pic.nods .m-face { animation: pic-nod 0.7s ease-out; }
  #detail-pic.nods { animation: pic-glow 0.7s ease-out; }
}
@keyframes pic-nod { 0% { transform: none; } 22% { transform: translateY(5px) scale(0.94); } 55% { transform: translateY(-3px) scale(1.07) rotate(-3deg); } 100% { transform: none; } }
@keyframes pic-glow { 0% { box-shadow: 0 0 0 0 rgba(212, 169, 80, 0.7); } 100% { box-shadow: 0 0 0 16px rgba(212, 169, 80, 0); } }
/* A pasted block in a thread line wraps, so a brief to copy never scrolls sideways, and is outlined so it is seen at once (Chris, 31 Oct). */
.chat-said .md-code { white-space: pre-wrap; overflow-wrap: anywhere; border-color: var(--accent, var(--line)); }