/* Trinity's room. The station's own palette and faces, arranged as one screen:
   conversations, the conversation, and her desk. Deliberately one dark theme —
   the station has always been night-coloured. */
:root {
  color-scheme: dark;
  --ground: #1b2422; --panel: #232e2a; --raised: #2d3931; --well: #17201e; --hover: #28352d; --active: #364637;
  --rule: #526359; --rule-soft: #3c4a41; --button-line: #70816d;
  --ink: #e2e2d3; --muted: #a9b8a7; --gold: #debd83; --cream: #ecd8b0; --green: #b6c9a5; --rose: #e5b4a6; --blue: #b8bff0; --sky: #9fd0e8;
  --body: 'Nunito Fieldwork', system-ui, sans-serif;
  --display: 'Zilla Slab Fieldwork', Georgia, serif;
  --signal: 'Trinity Signal', 'Nunito Fieldwork', system-ui, sans-serif;
  --mono: Consolas, 'Cascadia Mono', ui-monospace, monospace;
  --station-h: 58px;
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; background: var(--ground); color: var(--ink); font: 15px/1.55 var(--body); overflow: hidden; }
button, input, select, textarea { font: inherit; color: inherit; border-radius: 0; }
button, .file-button { cursor: pointer; background: var(--raised); border: 1px solid var(--button-line); padding: 7px 12px; }
button:hover, .file-button:hover { border-color: var(--gold); }
button:disabled { opacity: .5; cursor: default; }
input, select, textarea { background: var(--well); border: 1px solid var(--rule); padding: 8px 10px; }
input::placeholder, textarea::placeholder { color: #8f9e91; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
input:focus-visible, select:focus-visible, textarea:focus-visible { border-color: var(--gold); box-shadow: 0 0 0 3px #debd8326; }
a { color: var(--green); }
a:hover { color: var(--gold); }
kbd { font: 11px var(--mono); border: 1px solid var(--rule); padding: 1px 6px; color: var(--gold); }
[hidden] { display: none !important; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.signal { font: 600 10px/1.2 var(--signal); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.muted { color: var(--muted); }
.pad { padding: 12px 14px; margin: 0; }
.small { font-size: 12px; padding: 4px 10px; }
.quiet { background: transparent; border-color: var(--rule); color: var(--ink); text-decoration: none; font-size: 13px; padding: 5px 10px; }
.quiet[aria-pressed="true"] { border-color: var(--gold); color: var(--gold); }
.primary { background: var(--green); border-color: var(--green); color: #1c261f; font-weight: 700; }
.primary:hover { background: #cbd8b4; border-color: #cbd8b4; }
.error { color: var(--rose); border: 1px solid #bc8772; background: #3b2e29; padding: 8px 10px; margin: 8px 0 0; font-size: 13px; white-space: pre-wrap; }
.icon-button { padding: 4px 10px; background: transparent; border-color: var(--rule); font-size: 16px; }
.narrow-only { display: none; }

/* ---- station bar ---- */
.station {
  position: relative; isolation: isolate;
  height: var(--station-h); display: flex; align-items: center; gap: 14px; padding: 0 16px;
  border-top: 4px solid var(--gold); border-bottom: 1px solid var(--rule);
  background: #1f2a26 url('./decor/starfield.png') center / cover;
}
.station::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .2;
  background-image: radial-gradient(circle, #ecd8b0 0 1px, transparent 1.5px), radial-gradient(circle, #b6c9a5 0 1px, transparent 1.5px), radial-gradient(circle, #ecd8b0 0 .8px, transparent 1.4px);
  background-size: 113px 53px, 157px 61px, 197px 47px; background-position: 13px 11px, 57px 25px, 91px 7px;
}
.brand { margin: 0; font: 700 26px/1 var(--display); color: var(--cream); letter-spacing: -.5px; white-space: nowrap; }
.brand-star { color: var(--green); font-size: 18px; margin-left: 6px; vertical-align: 3px; }
.seasonal-flourish { display: inline-block; width: 1em; margin-left: 2px; color: var(--gold); font: 13px/1 var(--display); text-align: center; vertical-align: 4px; }
.seasonal-flourish::before { content: '·'; animation: season-cycle 27s steps(1, end) infinite; }
@keyframes season-cycle {
  0%, 32% { content: '·'; }
  33%, 65% { content: '❧'; }
  66%, 100% { content: '◆'; }
}
.status { display: flex; align-items: center; gap: 8px; background: var(--well); border-color: var(--rule); font: 600 10px var(--signal); letter-spacing: .12em; text-transform: uppercase; padding: 6px 10px; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--rule); flex: none; display: inline-block; }
.dot.live { background: var(--green); box-shadow: 0 0 0 3px #b6c9a522; }
.dot.need { background: var(--rose); }
.dot.warn { background: var(--gold); }
.find { flex: 1; max-width: 520px; display: flex; align-items: center; justify-content: space-between; gap: 12px; background: var(--well); border-color: var(--rule); color: var(--muted); text-align: left; }
.station-end { margin-left: auto; display: flex; align-items: center; gap: 8px; }

/* ---- the room ---- */
.room { height: calc(100% - var(--station-h)); display: grid; grid-template-columns: 290px minmax(0, 1fr) 330px; }
.rail, .desk { background: var(--panel); min-height: 0; display: flex; flex-direction: column; }
.rail { border-right: 1px solid var(--rule); }
.desk { border-left: 1px solid var(--rule); }
.rail-head, .desk-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--rule); background: var(--raised); }

/* conversations */
#rail-search { margin: 10px 12px 8px; }
.filters { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 12px 10px; border-bottom: 1px solid var(--rule-soft); }
.filters button { font-size: 11px; padding: 2px 9px; background: transparent; border-color: var(--rule); }
.filters button[aria-pressed="true"] { background: var(--active); border-color: var(--green); color: var(--green); }
.rail-list { flex: 1; overflow: auto; min-height: 0; }
.group-label { display: block; padding: 12px 12px 4px; }
.convo { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; gap: 1px 10px; width: 100%; text-align: left; border: 0; border-top: 1px solid var(--rule-soft); background: transparent; padding: 9px 12px; }
.convo:hover { background: var(--hover); }
.convo[aria-current="true"] { background: var(--active); box-shadow: inset 3px 0 var(--gold); }
.mark { grid-row: span 2; align-self: start; margin-top: 2px; width: 26px; height: 26px; display: grid; place-items: center; font: 600 9px var(--signal); border: 1px solid var(--rule); color: var(--muted); }
.mark.discord { color: var(--blue); border-color: #6f76a8; }
.mark.telegram { color: var(--sky); border-color: #5f8ea5; }
.mark.local { color: var(--gold); border-color: #9c865c; }
.convo-name { font-weight: 600; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.convo-time { font: 11px var(--mono); color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.convo-meta { grid-column: 2 / 4; display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); min-width: 0; }
.convo-meta span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pill { font-size: 10px; line-height: 1.5; padding: 0 6px; border: 1px solid currentColor; white-space: nowrap; }
.pill.live { color: var(--green); }
.pill.need { color: var(--rose); }
.pill.busy { color: var(--gold); }
.rail-foot { display: flex; align-items: center; gap: 8px; padding: 9px 12px; border-top: 1px solid var(--rule); font-size: 12px; color: var(--muted); }
.rail-foot input { width: auto; }
.rail-empty { padding: 16px 12px; color: var(--muted); font-size: 13px; }

/* the conversation */
.talk { min-width: 0; min-height: 0; display: flex; flex-direction: column; }
.talk-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 10px 18px; border-bottom: 1px solid var(--rule); background: var(--raised); }
.talk-title { min-width: min(220px, 100%); flex: 1 1 220px; }
.talk-title h1 { margin: 0; font: 600 22px/1.2 var(--display); color: var(--cream); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.where { margin: 2px 0 0; font-size: 12px; color: var(--muted); }
.talk-tools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.engine { display: flex; align-items: center; gap: 8px; }
.engine .signal { color: var(--gold); }
.engine select { max-width: 280px; padding: 5px 8px; border-color: var(--gold); }
.engine-note { margin: 0; padding: 6px 18px; font-size: 12px; color: var(--gold); background: #2a2f25; border-bottom: 1px solid var(--rule-soft); }

.stream { flex: 1; min-height: 0; overflow: auto; padding: 18px 22px 24px; display: flex; flex-direction: column; gap: 14px; }
.empty-room { margin: auto; max-width: 420px; text-align: center; color: var(--muted); }
.empty-title { font: 600 24px var(--display); color: var(--cream); margin: 0 0 8px; }
.older { align-self: center; }

.msg { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 10px; max-width: 820px; width: 100%; }
.msg.him { align-self: flex-end; grid-template-columns: minmax(0, 1fr) 36px; }
.msg.him .face { order: 2; }
.face { width: 36px; height: 36px; border: 1px solid var(--rule); background: var(--well); object-fit: cover; display: grid; place-items: center; font: 600 11px var(--signal); }
.msg.her .face { border-color: var(--gold); color: var(--gold); }
.msg.him .face { color: var(--green); }
.bubble { min-width: 0; background: var(--well); border: 1px solid var(--rule-soft); padding: 9px 14px 10px; }
.msg.her .bubble { border-left: 3px solid var(--gold); }
.msg.him .bubble { border-color: #6c7a5d; }
.who { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; margin-bottom: 3px; }
.who b { font: 600 10px var(--signal); letter-spacing: .14em; text-transform: uppercase; color: var(--gold); }
.msg.him .who b { color: var(--green); }
.who time, .who .engine-tag { font: 11px var(--mono); color: var(--muted); }
.who .answered { font-size: 12px; font-style: italic; color: var(--muted); min-width: 0; overflow-wrap: anywhere; }
/* What she is writing right now (talk.js showLive): the saved message replaces it. */
.msg.provisional .bubble { border-style: dashed; }
.who .writing { font: 11px var(--mono); color: var(--muted); }
.thought.live { font-style: italic; }
.body { overflow-wrap: anywhere; }
.body p { margin: 0 0 8px; white-space: pre-wrap; }
.body > :last-child { margin-bottom: 0; }
.body ul, .body ol { margin: 4px 0 8px; padding-left: 22px; }
.body blockquote { margin: 6px 0; padding-left: 12px; border-left: 2px solid var(--gold); color: var(--muted); }
.body code { font: 13px var(--mono); background: #10181600; border: 1px solid var(--rule-soft); padding: 0 4px; }
.body pre.code { margin: 8px 0; padding: 10px 12px; background: #111a17; border: 1px solid var(--rule-soft); overflow: auto; }
.body pre.code code { border: 0; padding: 0; white-space: pre; }
.body .md-h { font: 600 17px var(--display); color: var(--cream); margin: 10px 0 4px; }
.body hr { border: 0; border-top: 1px dashed var(--rule); margin: 10px 0; }
.body strong { color: var(--cream); }
.body em { color: var(--green); }
/* The rest of markdown (api.js): heading sizes, nested lists, tables, tasks,
   pictures. A list item keeps her line breaks the way a paragraph does. */
.body .md-h1 { font-size: 20px; }
.body .md-h3 { font-size: 15px; color: var(--gold); }
.body li { white-space: pre-wrap; }
.body li > p { margin: 0 0 4px; }
.body li > ul, .body li > ol { margin: 2px 0 4px; }
.body s { color: var(--muted); }
.body .task-item { list-style: none; }
.body .task { margin-right: 6px; color: var(--gold); }
.body .task.done { color: var(--green); }
.body .table-wrap { margin: 8px 0; overflow-x: auto; }
.body .md-table { border-collapse: collapse; font-size: 13px; }
.body .md-table th, .body .md-table td { border: 1px solid var(--rule-soft); padding: 4px 8px; text-align: left; vertical-align: top; white-space: pre-wrap; }
.body .md-table th { color: var(--cream); font-weight: 600; background: var(--well); }
.body .md-table .align-center { text-align: center; }
.body .md-table .align-right { text-align: right; }
.body .md-img { display: block; max-width: min(340px, 100%); height: auto; margin: 8px 0; }
.emoji { width: 1.9em; height: 1.9em; object-fit: contain; vertical-align: middle; }
/* A picture she handed over, not a sticker: big enough to actually look at,
   bounded so a 2048px generation does not become the whole message. Checkered
   backing so a transparent PNG reads as transparent rather than as white. */
.inline-art-link { display: block; width: fit-content; margin: 8px 0; line-height: 0; }
.inline-art { display: block; max-width: min(340px, 100%); max-height: 340px; object-fit: contain;
  border: 1px solid var(--rule); background-color: #2b3531;
  background-image: linear-gradient(45deg, #232c28 25%, transparent 25%), linear-gradient(-45deg, #232c28 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #232c28 75%), linear-gradient(-45deg, transparent 75%, #232c28 75%);
  background-size: 16px 16px; background-position: 0 0, 0 8px, 8px -8px, -8px 0; }
.inline-art-link:hover .inline-art, .inline-art-link:focus-visible .inline-art { border-color: var(--gold); }
.file-chip { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; color: var(--muted);
  border: 1px dashed var(--rule-soft); padding: 1px 7px; vertical-align: middle; }
/* In the strip under the message box it is a thumbnail, sitting in the line the
   way an emoji does. Full size belongs in the message, not in the preview — and
   a 340px picture inside a 90px scroller is both unreadable and, being lazy,
   never actually fetched, because the browser is right that it is out of view. */
.say-preview .inline-art-link { display: inline-block; margin: 0 4px 0 0; vertical-align: middle; }
.say-preview .inline-art { max-width: 64px; max-height: 64px; }
.quiet-reply { color: var(--muted); font-style: italic; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; border: 1px solid var(--rule); background: #26312b; padding: 2px 8px; }
.bubble .chips { margin-top: 8px; }
.msg-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 8px; padding-top: 6px; border-top: 1px dashed var(--rule-soft); }
.msg-foot button { font-size: 11px; padding: 2px 8px; background: transparent; border-color: var(--rule-soft); color: var(--muted); }
.msg-foot button:hover { color: var(--ink); }
.msg-foot button.arrow { padding: 2px 6px; }
.msg-foot button.arrow[aria-pressed="true"] { background: var(--active); }
.msg-foot button.arrow.up[aria-pressed="true"] { border-color: var(--gold); }
.msg-foot button.arrow.down[aria-pressed="true"] { border-color: var(--rose); }
details.did { width: 100%; }
details.did summary { cursor: pointer; font-size: 12px; color: var(--muted); }
details.did summary:hover { color: var(--ink); }
.steps { list-style: none; margin: 6px 0 0; padding: 0; font-size: 12px; }
.steps li { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 6px; padding: 3px 0; border-top: 1px solid #2c3833; }
.steps .ok { color: var(--green); }
.steps .bad { color: var(--rose); }
.steps code { font: 11px var(--mono); color: var(--gold); }
.steps .detail { color: var(--muted); overflow-wrap: anywhere; }

.room-turn { align-self: stretch; max-width: 820px; border-left: 2px solid var(--rule); padding: 2px 0 2px 12px; font-size: 14px; }
.room-turn .signal { display: block; margin-bottom: 4px; }
.room-line { margin: 2px 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.room-line b { font-weight: 700; color: var(--muted); }
.room-line.his b { color: var(--green); }
.room-line time { font: 11px var(--mono); color: var(--muted); margin-right: 8px; }
.notice { align-self: center; max-width: 720px; font-size: 12px; color: var(--muted); text-align: center; }
.notice details { text-align: left; }
.notice summary { cursor: pointer; text-align: center; }
.notice .body { margin-top: 6px; color: var(--ink); }
.switch { align-self: stretch; display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--muted); }
.switch::before, .switch::after { content: ''; flex: 1; border-top: 1px dashed var(--rule); }
.switch b { color: var(--gold); font-weight: 600; }
.fieldwork-card { align-self: stretch; max-width: 820px; border: 1px solid var(--rule); background: var(--panel); padding: 10px 14px; }
.fieldwork-card h3 { margin: 4px 0 8px; font: 600 16px var(--display); color: var(--cream); }

.working { border-top: 1px solid var(--rule); background: #1e2823; }
.working-line { display: flex; align-items: center; gap: 10px; padding: 8px 18px; font-size: 13px; }
.working-line #stop { margin-left: auto; }
.spinner { position: relative; width: 14px; height: 14px; border: 0; border-radius: 0; flex: none; background: linear-gradient(var(--green), var(--green)) center 7px / 1px 7px no-repeat; animation: sprout-breathe 2.4s ease-in-out infinite; }
.spinner::before, .spinner::after { content: ''; position: absolute; top: 2px; width: 5px; height: 4px; border: 1px solid var(--green); border-radius: 5px 1px 5px 1px; }
.spinner::before { left: 1px; transform: rotate(25deg); }
.spinner::after { right: 1px; transform: scaleX(-1) rotate(25deg); }
@keyframes sprout-breathe { 50% { transform: translateY(-1px) scale(1.08); } }
@keyframes spin { to { transform: rotate(360deg); } }
.thinking { max-height: 180px; overflow: auto; padding: 0 18px 8px; }
.thinking:empty { display: none; }
.thought { margin: 6px 0; padding-left: 10px; border-left: 2px solid var(--rule); font-size: 12px; white-space: pre-wrap; overflow-wrap: anywhere; }
.thought.said { border-left-color: var(--gold); }
.thought.thinking-block { color: var(--muted); font-style: italic; }

.composer { border-top: 1px solid var(--rule); padding: 10px 18px 12px; background: var(--panel); }
.composer textarea { width: 100%; min-height: 64px; max-height: 40vh; resize: vertical; }
.composer .chips { margin-bottom: 6px; }
.composer-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 8px; }
.composer-row #send { margin-left: auto; min-width: 96px; }
.hint { font-size: 12px; color: var(--muted); margin: 0; }
#composer-hint { margin-bottom: 6px; color: var(--gold); }
.question { border-left: 3px solid var(--green); padding: 8px 12px; margin: 8px 0; }
.question .question-text { margin: 4px 0 8px; white-space: pre-wrap; }
.question-other { display: flex; gap: 6px; margin-top: 8px; }
.question-other input { flex: 1; min-width: 0; }
.queued { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; color: var(--muted); }
.queued .chip { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.reply-to { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--muted); margin-bottom: 6px; }
.dropping { outline: 2px dashed var(--gold); outline-offset: -6px; }

/* her desk */
.desk { overflow: auto; }
.desk-head { position: sticky; top: 0; z-index: 1; }
.desk-body { flex: 1 0 auto; }
.desk-section { padding: 12px 14px; border-bottom: 1px solid var(--rule-soft); }
.desk-section h2 { margin: 0 0 8px; display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font: 600 17px var(--display); color: var(--cream); }
.desk-section h2 .count { font: 11px var(--mono); color: var(--muted); }
.row { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto; gap: 2px 8px; align-items: baseline; width: 100%; padding: 6px 0; border: 0; border-top: 1px solid #33413a; background: transparent; text-align: left; font-size: 13px; }
.row:first-of-type { border-top: 0; }
button.row:hover { background: var(--hover); }
.row .dot { align-self: center; }
.row-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row-side { font: 11px var(--mono); color: var(--muted); white-space: nowrap; }
.row-note { grid-column: 2 / 4; font-size: 12px; color: var(--muted); overflow-wrap: anywhere; }
.experiment { border-left: 2px solid var(--gold); padding: 2px 0 2px 10px; margin: 6px 0; font-size: 13px; }
.experiment summary { cursor: pointer; }
.experiment p { margin: 4px 0 0; color: var(--muted); font-size: 12px; white-space: pre-wrap; }
.desk-links { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.badge-wall { display: flex; flex-wrap: wrap; gap: 4px; justify-content: center; padding: 10px; border-top: 1px solid var(--rule); background: #1f2a26; }
.badge-wall img { image-rendering: pixelated; }

/* dialogs */
dialog { width: min(620px, 94vw); max-height: 80vh; padding: 0; background: var(--panel); color: var(--ink); border: 1px solid var(--gold); }
dialog[open] { display: flex; flex-direction: column; }
dialog::backdrop { background: #07100bcc; }
#finder-query { border: 0; border-bottom: 1px solid var(--rule); padding: 14px 16px; font-size: 17px; width: 100%; }
#finder-query:focus-visible, #catalogue-query:focus-visible { outline: none; border-color: var(--gold); }
.finder-list, .catalogue-list { flex: 1; min-height: 0; overflow: auto; padding: 4px 0 8px; }
.finder-group { display: block; padding: 12px 16px 4px; }
.finder-row { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; width: 100%; border: 0; background: transparent; padding: 8px 16px; text-align: left; }
.finder-row small { color: var(--muted); font-size: 12px; text-align: right; }
.finder-row:hover, .finder-row.active { background: var(--active); box-shadow: inset 3px 0 var(--gold); }
.dialog-head { display: flex; justify-content: space-between; align-items: center; padding: 10px 14px; border-bottom: 1px solid var(--rule); background: var(--raised); }
.dialog-foot { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; padding: 8px 16px; border-top: 1px solid var(--rule); font-size: 12px; color: var(--muted); }
.catalogue-controls { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 10px 14px; border-bottom: 1px solid var(--rule-soft); }
#catalogue-query { flex: 1; min-width: 160px; }
.check { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); }
.check input { width: auto; }
.model { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1px 12px; width: 100%; border: 0; border-top: 1px solid var(--rule-soft); background: transparent; padding: 8px 14px; text-align: left; }
.model:hover { background: var(--hover); }
.model b { font-weight: 600; overflow-wrap: anywhere; }
.model small { color: var(--muted); font-size: 11px; }
.model .price { font: 11px var(--mono); color: var(--muted); text-align: right; }
.model.trains b, .model.trains small { color: #e0a06a; }

/* bridges and station */
.wide-dialog { width: min(920px, 94vw); max-height: min(88vh, 900px); }
.station-body { min-height: 0; overflow: auto; padding: 14px 16px 18px; }
.station-section + .station-section { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--rule); }
.station-section > .signal { display: block; margin: 0 0 8px; color: var(--gold); }
.station-section > summary.signal { cursor: pointer; padding: 8px 0; }
.status-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.status-card { min-width: 0; padding: 12px 14px; border: 1px solid var(--rule-soft); background: var(--well); overflow-wrap: anywhere; }
.status-card.ok { border-left: 3px solid var(--green); }
.status-card.warn { border-left: 3px solid var(--gold); }
.status-card .signal { margin: 0 0 6px; color: var(--gold); }
.status-card p:not(.signal) { margin: 3px 0; font-size: 13px; }
.station-actions { margin: 14px 0 10px; }
.dialog-error { margin: 0 16px 14px; }
.bridge-row { margin: 8px 0; }
.bridge-row select { width: 100%; }
.connect-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 12px; margin-top: 8px; }
.form-field { min-width: 0; }
.form-field .field-label { display: block; margin-bottom: 3px; }
.form-field input, .form-field select { width: 100%; }
.form-check, .connect-form > p, .connect-form > .entry-actions { grid-column: 1 / -1; }
.restore-row { margin: 8px 0; padding: 9px 11px; border: 1px solid var(--rule-soft); background: var(--well); }
.restore-row > summary { cursor: pointer; }
.restore-row input { width: auto; }
.restore-row .field-label { margin: 10px 0 3px; }

/* narrow screens: one column, rails slide over */
@media (max-width: 1180px) {
  .room { grid-template-columns: 260px minmax(0, 1fr); }
  .desk { display: none; }
  .desk.open { display: flex; position: fixed; right: 0; top: var(--station-h); bottom: 0; width: min(340px, 92vw); z-index: 20; box-shadow: -12px 0 30px #0009; }
  #show-desk { display: inline-block; }
}
@media (max-width: 760px) {
  .room { grid-template-columns: minmax(0, 1fr); }
  .rail { display: none; }
  .rail.open { display: flex; position: fixed; left: 0; top: var(--station-h); bottom: 0; width: min(320px, 92vw); z-index: 20; box-shadow: 12px 0 30px #0009; }
  #show-rail { display: inline-block; }
  .find span, .station-end a, #sound, .brand-star { display: none; }
  .find { max-width: none; }
  .station { gap: 8px; padding: 0 10px; }
  .brand { font-size: 20px; }
  .stream { padding: 12px; }
  .composer, .talk-head { padding-inline: 12px; }
  .composer-row .hint { display: none; }
  .status-grid, .connect-form { grid-template-columns: 1fr; }
  .form-check, .connect-form > p, .connect-form > .entry-actions { grid-column: 1; }
}
@media (prefers-reduced-motion: reduce) { .spinner { animation-duration: 3s; } }

/* ---- Talk / Fieldwork ---- */
.rail-panel { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.modes { display: flex; border: 1px solid var(--rule); }
.modes button { border: 0; background: transparent; padding: 4px 12px; font: 600 10px var(--signal); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.modes button + button { border-left: 1px solid var(--rule); }
.modes button[aria-selected="true"] { background: var(--active); color: var(--gold); }
#work-search { margin: 10px 12px 8px; }
.work-kind { display: flex; align-items: center; gap: 8px; padding: 0 12px 10px; border-bottom: 1px solid var(--rule-soft); }
.work-kind select { flex: 1; padding: 5px 8px; }
p.rail-foot { margin: 0; }

.work { min-width: 0; min-height: 0; display: flex; flex-direction: column; }
.work-body { flex: 1; min-height: 0; overflow: auto; padding: 18px 22px 28px; }
.work-error { margin: 0 18px 12px; }
.danger { border-color: #bd8b7f; color: var(--rose); }
.work-section { max-width: 860px; margin: 0 auto 18px; }
.section-title { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font: 600 10px var(--signal); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.section-title .count { font: 11px var(--mono); color: var(--muted); letter-spacing: 0; }
.question { margin: 0; padding: 10px 14px; background: var(--well); border: 1px solid var(--rule-soft); white-space: pre-wrap; overflow-wrap: anywhere; max-height: 240px; overflow: auto; }
.answer .body { padding: 12px 16px; background: #1e2923; border-left: 3px solid var(--green); }
.working-now { border: 1px solid var(--rule-soft); padding: 10px 14px; background: #1e2823; }
.note { border-left: 2px solid var(--gold); padding: 6px 0 6px 12px; margin: 10px 0; }
.note-head { display: flex; gap: 6px; margin-bottom: 4px; }
.note-head .pill { color: var(--gold); }
.note-head .pill.need { color: var(--rose); }
.note-head .pill.live { color: var(--green); }
.note .source { margin: 4px 0 0; font: 11px var(--mono); color: var(--muted); overflow-wrap: anywhere; }
.images { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
.run-image { max-width: 260px; max-height: 260px; border: 1px solid var(--rule); }
details.log > summary { cursor: pointer; font-size: 13px; color: var(--gold); padding: 6px 0; }
details.event { border-top: 1px solid var(--rule-soft); }
details.event > summary { display: flex; justify-content: space-between; gap: 10px; cursor: pointer; padding: 6px 4px; font-size: 13px; }
details.event > summary time { font: 11px var(--mono); color: var(--muted); white-space: nowrap; }
details.event.failed > summary { color: var(--rose); }
.field { padding: 4px 8px 8px; }
.field pre { margin: 2px 0 0; padding: 8px 10px; background: #111a17; border: 1px solid var(--rule-soft); font: 12px/1.5 var(--mono); white-space: pre-wrap; overflow-wrap: anywhere; max-height: 360px; overflow: auto; }
.artifact-text { flex: 1; margin: 0; padding: 14px 16px; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; font: 13px/1.6 var(--mono); }
#artifact { width: min(860px, 94vw); }

.inquiry { max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; gap: 6px; }
.inquiry-title { margin: 4px 0 2px; font: 600 32px/1.2 var(--display); color: var(--cream); }
.inquiry textarea { width: 100%; min-height: 150px; resize: vertical; }
.field-label { font-size: 12px; margin-top: 10px; display: block; }
.inquiry-row { display: flex; flex-wrap: wrap; gap: 14px; }
.inquiry-row > div { flex: 1 1 260px; display: flex; flex-direction: column; }
.inquiry-row .steps-field { flex: 0 0 110px; }
.inquiry-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 16px; }
/* ---- emoji in the message box ---- */
.emoji-panel { margin-bottom: 8px; border: 1px solid var(--rule); background: var(--well); }
.emoji-top { display: flex; align-items: center; gap: 8px; padding: 8px; border-bottom: 1px solid var(--rule-soft); }
#emoji-search { flex: 1; min-width: 0; padding: 6px 8px; }
.emoji-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(46px, 1fr)); gap: 4px; max-height: 220px; overflow: auto; padding: 8px; }
.emoji-choice { display: grid; place-items: center; aspect-ratio: 1; padding: 4px; background: transparent; border: 1px solid transparent; }
.emoji-choice:hover, .emoji-choice:focus-visible { background: var(--hover); border-color: var(--gold); }
.emoji-choice img { width: 34px; height: 34px; object-fit: contain; }
.desk-emoji { display: block; width: min(180px, 100%); max-height: 180px; object-fit: contain; margin: 10px 0; border: 1px solid var(--line); background: var(--paper); }
#emoji-more { margin: 0 8px 8px; }
.say-preview { margin-top: 6px; padding: 6px 10px; border-left: 2px solid var(--gold); font-size: 14px; color: var(--muted); white-space: pre-wrap; overflow-wrap: anywhere; max-height: 90px; overflow: auto; }
/* ---- her desk, the room ---- */
.book-section { grid-template-columns: minmax(0, 1fr) auto; }
.book-section .convo-name { grid-row: auto; }
.book-page { max-width: 860px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; }
.book-bar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; }
.book-bar.column { flex-direction: column; align-items: flex-start; border: 1px solid var(--rule-soft); padding: 10px 14px; background: var(--panel); }
.switches { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.switch-row { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.switch-row input { width: auto; }
.happened-list { display: flex; flex-direction: column; }
.happened { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 2px 10px; align-items: baseline; width: 100%; text-align: left; background: transparent; border: 0; border-top: 1px solid var(--rule-soft); padding: 9px 4px 9px 16px; }
.happened::before { content: ''; position: absolute; left: 5px; top: 0; bottom: 0; border-left: 1px dashed var(--rule); }
.happened::after { content: ''; position: absolute; left: 5px; top: 17px; width: 7px; border-top: 1px solid var(--green); }
.happened:first-child::before { top: 17px; }
.happened:last-child::before { bottom: calc(100% - 17px); }
.happened:hover { background: var(--hover); }
.happened .pill { color: var(--gold); }
.happened-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.happened time { font: 11px var(--mono); color: var(--muted); white-space: nowrap; }
.happened-detail { grid-column: 2 / 4; font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.entry { border: 1px solid var(--rule-soft); background: var(--panel); padding: 12px 16px; display: flex; flex-direction: column; gap: 6px; }
.book-page > .entry:not(.editing) { position: relative; border-left: 2px solid #71684e; }
.book-page > .entry:not(.editing)::before { content: '❧'; position: absolute; left: -9px; top: 11px; padding: 0 2px; background: var(--panel); color: var(--gold); font: 12px/1 var(--display); }
.entry.editing { border-color: var(--gold); }
.entry.editing input, .entry.editing textarea, .entry.editing select { width: 100%; }
.entry-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.entry-head h3 { margin: 0; font: 600 18px/1.25 var(--display); color: var(--cream); }
.entry-by { font: 11px var(--mono); color: var(--muted); }
.entry-facts { display: flex; flex-wrap: wrap; gap: 6px; }
.entry-facts .pill { color: var(--muted); }
.entry-facts .pill.live { color: var(--green); }
.entry-facts .pill.need { color: var(--rose); }
.entry-facts .pill.busy, .pill.heat-warm { color: var(--gold); }
.pill.heat-cooling { color: var(--sky); }
.pill.heat-cold { color: var(--muted); }
.caption { margin: 0; font-style: italic; color: var(--green); white-space: pre-wrap; }
.entry-more summary { cursor: pointer; color: var(--muted); }
.entry-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.journal-text { font-size: 15px; }
/* ---- how she got there ---- */
.did-body { margin-top: 6px; }
.steps-view { display: flex; flex-direction: column; gap: 4px; }
.steps-summary { margin: 2px 0 4px; font-size: 12px; }
details.step { border: 1px solid var(--rule-soft); background: #1a2320; }
details.step > summary { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; cursor: pointer; padding: 6px 10px; font-size: 13px; }
details.step > summary b { font: 600 10px var(--signal); letter-spacing: .12em; text-transform: uppercase; color: var(--gold); }
details.step[open] > summary { border-bottom: 1px solid var(--rule-soft); }
.step-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.step-tags .pill { color: var(--muted); }
.step-tags .pill.live { color: var(--green); }
.step-tags .pill.need { color: var(--rose); }
.step-engine { font: 11px var(--mono); color: var(--muted); }
.step-block { padding: 6px 10px; margin: 0; }
.step-block .signal { display: block; margin-bottom: 3px; }
.reasoning-text { margin: 0; padding: 8px 10px; background: #141c19; border-left: 2px solid var(--green); font: italic 13px/1.6 var(--body); color: #c9d3c3; white-space: pre-wrap; overflow-wrap: anywhere; max-height: 420px; overflow: auto; }
.tool-text { margin: 0; padding: 6px 8px; background: #111a17; border: 1px solid var(--rule-soft); font: 12px/1.5 var(--mono); white-space: pre-wrap; overflow-wrap: anywhere; max-height: 300px; overflow: auto; }
details.tool-call { margin: 2px 10px 6px; border-left: 2px solid var(--rule); }
details.tool-call.failed { border-left-color: var(--rose); }
details.tool-call > summary { display: flex; align-items: baseline; gap: 8px; cursor: pointer; padding: 3px 8px; font-size: 12px; }
details.tool-call > summary code { font: 12px var(--mono); color: var(--gold); }
details.tool-call .ok { color: var(--green); }
details.tool-call .bad { color: var(--rose); }
.remembered p { margin: 2px 0; font-size: 12px; }
/* Three modes share the rail head; keep them and the new button on one line. */
.modes button { padding: 4px 8px; }
.rail-head .primary { white-space: nowrap; }

/* ---- bridge events ---- */
.bridge-events summary { font-size: 13px; }
.bridge-event { margin: 4px 0 0; font-size: 12px; color: var(--muted); overflow-wrap: anywhere; }
.bridge-event time { font: 11px var(--mono); }
.bridge-event b { font-weight: 600; color: var(--ink); }
.bridge-event.fault b, .bridge-event.paused b { color: var(--rose); }
.bridge-event.recovered b { color: var(--green); }
.bridge-event.landed b, .bridge-event.upload-refused b { color: var(--gold); }

/* ---- timeline, garden, toys ---- */
.timeline-form { flex-wrap: wrap; }
.timeline-form input { flex: 1 1 240px; }
.inline-form { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 6px; }
.inline-form input { flex: 1 1 160px; padding: 5px 8px; }
.plant { border-top: 1px solid var(--rule-soft); padding: 10px 0; }
.specimen { margin: 6px 0; font-size: 13px; }
.specimen b { color: var(--cream); }
.toy-result { margin: 8px 0; }
.stamp-grid { display: flex; flex-wrap: wrap; gap: 6px; }
.stamp-grid img { image-rendering: pixelated; }
/* Games: the folded paper and the sealed envelope (games.js). */
.fold-form { display: flex; flex-direction: column; gap: 6px; }
.fold-form textarea { width: 100%; min-height: 76px; resize: vertical; }
.fold-line { margin: 0; padding: 8px 12px; border-left: 3px solid var(--gold); background: var(--well); font: italic 17px/1.5 var(--display); color: var(--cream); white-space: pre-wrap; overflow-wrap: anywhere; }
.commitment { display: block; font: 12px/1.5 var(--mono); color: var(--gold); background: var(--well); border: 1px solid var(--rule-soft); padding: 4px 8px; overflow-wrap: anywhere; }
.small-print { font-size: 12px; margin: 0; }
.qa-list { margin: 4px 0 0; padding-left: 24px; font-size: 13px; }
.qa-list li { margin: 3px 0; }
.qa-a { color: var(--green); margin-left: 8px; }
.qa-a::before { content: '→ '; color: var(--muted); }
.poem, .envelope { border-top: 1px solid var(--rule-soft); padding-top: 10px; display: flex; flex-direction: column; gap: 6px; }
.poem-turn { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 12px; align-items: baseline; }
.poem-by { font: 11px var(--mono); color: var(--muted); text-align: right; }
.poem-lines { margin: 0; font: 17px/1.55 var(--display); overflow-wrap: anywhere; }
.poem-line { display: block; }
.poem-line.crossed { text-decoration: underline dotted var(--gold); text-underline-offset: 5px; }
.by-you .poem-lines { color: var(--cream); }
.by-her .poem-lines { color: var(--sky); }
/* Time capsules (capsules.js). */
.capsule { border-top: 1px solid var(--rule-soft); padding: 10px 0; display: flex; flex-direction: column; gap: 6px; }
.capsule.ready { border: 1px solid var(--gold); background: var(--raised); padding: 10px 12px; }
.seal { display: inline-block; width: 1.4em; height: 1.4em; line-height: 1.4em; text-align: center; border-radius: 50%; background: #7a2f2a; color: var(--cream); font-size: 13px; vertical-align: 2px; }
.capsule.opened .seal { background: transparent; }
.capsule-new { border-top: 1px solid var(--rule-soft); padding-top: 10px; }
.letter { border-left: 3px solid var(--rule); padding: 4px 0 4px 12px; }
.letter.by-you { border-color: var(--cream); }
.letter.by-her { border-color: var(--sky); }
.letter-text { margin: 2px 0 0; font: 16px/1.6 var(--display); white-space: pre-wrap; overflow-wrap: anywhere; }
/* What I remember (life.js): FACTS beside COLORS; a broader memory opens down. */
/* Side by side while each trace gets 260px, stacked below that, whatever the rails take. */
.life-traces { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; margin-top: 4px; }
.life-trace { min-width: 0; border-left: 3px solid var(--rule); padding-left: 12px; }
.life-trace .signal { margin: 0 0 4px; }
.life-trace.colors { border-color: var(--sky); }
.life-trace.colors .body { font: 16px/1.6 var(--display); }
.entry-facts .life-level.level-1 { color: var(--green); }
.entry-facts .life-level.level-2 { color: var(--sky); }
.entry-facts .life-level.level-3 { color: var(--gold); }
.entry-facts .life-level.level-4, .entry-facts .life-fresh { color: var(--rose); }
/* The shape of what she remembers: one band per memory in force. */
.life-shape { display: flex; gap: 3px; height: 22px; margin: 6px 0 2px; }
.life-band { flex: 1 1 0; min-width: 8px; padding: 0; border: 0; border-radius: 3px; background: var(--green); opacity: .8; }
.life-band:hover, .life-band:focus-visible { opacity: 1; outline: 2px solid var(--cream); outline-offset: 1px; }
.life-band.level-2 { background: var(--sky); }
.life-band.level-3 { background: var(--gold); }
.life-band.level-4 { background: var(--rose); }
.life-band.fresh { box-shadow: inset 0 -4px 0 var(--cream); }
.life-children[open] > .life-memory { margin-top: 10px; background: var(--well); }
.life-block-text { margin: 8px 0 0; padding: 10px 12px; max-height: 480px; overflow: auto; background: var(--well); border: 1px solid var(--rule-soft); font: 12px/1.5 var(--mono); white-space: pre-wrap; overflow-wrap: anywhere; }
/* ---- The Herbarium (herbarium.js) ----
   Specimen sheets on aged paper, laid out on the dark bench: the paper is light
   on purpose, because a sheet is an object and not a panel. Each carries a
   herbarium label with the sunflower stamp, and his slips are pinned beside it
   in his cream, over the red-chalk hand that writes. */
.herbarium {
  --paper: #eee2c6; --paper-deep: #d8c49a; --ink-sepia: #2f2920; --ink-quiet: #6f6149; --ink-pen: #2d3778; --chalk: #a4462d; --pin: #b3372c; --bloom: #d99a2b;
  --paper-bg: linear-gradient(rgba(238, 226, 198, .93), rgba(238, 226, 198, .93)), url(./herbarium/damask.jpg);
}
.herb-cover { position: relative; overflow: hidden; min-height: 170px; padding: 22px 24px; margin-bottom: 14px; border: 1px solid var(--rule-soft); border-radius: 8px;
  background: linear-gradient(100deg, rgba(14, 20, 18, .95) 0%, rgba(14, 20, 18, .74) 46%, rgba(14, 20, 18, .2) 100%), url(./herbarium/cover-xray.jpg) 24% 66% / cover; }
.herb-cover-text { position: relative; z-index: 1; max-width: 64%; }
.herb-cover .signal { margin: 0; color: var(--gold); }
.herb-cover h2 { margin: 4px 0 8px; font: 600 31px/1.1 var(--display); color: var(--cream); }
.herb-xvi { font-size: 14px; letter-spacing: .24em; color: var(--gold); vertical-align: 6px; }
.herb-cover-sub { margin: 0; max-width: 38ch; color: var(--muted); font-size: 14px; line-height: 1.5; }
.herb-bouquet { position: absolute; right: -40px; bottom: -64px; width: min(360px, 50%); pointer-events: none; filter: drop-shadow(0 8px 16px rgba(0, 0, 0, .5)); }
.herb-summary .caption { margin-top: 0; }
.herb-tools { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 12px 0 8px; }
.herb-search { flex: 1 1 220px; min-width: 0; }
.herb-cutting { display: inline-flex; align-items: center; gap: 6px; padding: 2px 12px 2px 2px; }
.herb-cutting img { width: 60px; height: 37px; object-fit: contain; }
.herb-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.herb-chip { font-size: 12px; padding: 3px 10px; border-radius: 999px; }
.herb-chip.on { background: var(--active); border-color: var(--gold); color: var(--gold); }
/* The index: one card per sheet, a small sheet of its own. */
.herb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 14px; }
.herb-card, .herb-card:hover { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 4px; min-height: 150px; padding: 14px 14px 10px; text-align: left;
  color: var(--ink-sepia); border: 1px solid var(--paper-deep); border-radius: 3px; background: var(--paper-bg);
  box-shadow: inset 0 0 28px rgba(122, 92, 40, .22), 0 2px 0 rgba(0, 0, 0, .25); }
.herb-card:hover, .herb-card:focus-visible { border-color: var(--gold); transform: translateY(-2px) rotate(-.3deg); }
.herb-card-kind { font: 11px var(--signal); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-quiet); }
.herb-card-name { font: 600 19px/1.2 var(--display); overflow-wrap: anywhere; }
.herb-card-binomial { font: italic 14px var(--display); color: var(--chalk); }
.herb-card-line { font-size: 12.5px; line-height: 1.45; color: var(--ink-quiet); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.herb-card-foot { margin-top: auto; padding-top: 8px; display: flex; gap: 10px; align-items: baseline; font: 11px var(--mono); color: var(--ink-quiet); border-top: 1px dashed rgba(111, 97, 73, .35); }
.herb-card-slips { margin-left: auto; color: var(--chalk); }
.herb-card-public { margin-left: auto; color: #3f7a4a; }
.herb-card-slips + .herb-card-public { margin-left: 0; }
.herb-trace.placard { padding: 10px 12px; border: 1px dashed #7f9a6f; background: rgba(223, 238, 214, .45); }
.herb-trace.placard .herb-trace-head a { color: var(--ink-pen); }
.herb-card.stage-bloom, .herb-card.stage-perennial { border-left: 4px solid var(--bloom); }
.herb-card.stage-dormant { filter: sepia(.45) saturate(.7) brightness(.86); }
/* Song sheets carry a corner of Chopin's Polonaise manuscript. */
.herb-score { position: absolute; top: 0; right: 0; width: 96px; height: 66px; pointer-events: none; opacity: .5;
  background: url(./herbarium/score-1.jpg) 0 0 / 380px auto; -webkit-mask-image: linear-gradient(225deg, #000 30%, transparent 78%); mask-image: linear-gradient(225deg, #000 30%, transparent 78%); }
.herb-score.big { width: 280px; height: 180px; opacity: .4; background-size: 760px auto; }
.herb-modes { display: inline-flex; gap: 4px; }
/* The garden map (herbarium.js, gardenmap.js): plants on a dark bed, runners between them. */
.herb-map-wrap { margin: 0; }
.herb-map { display: block; width: 100%; height: auto; border: 1px solid var(--rule-soft); border-radius: 8px;
  background: radial-gradient(ellipse at 50% 55%, #243326 0%, #1a2420 62%, #151d1a 100%); }
.herb-runner { fill: none; stroke: #7fa06a; stroke-linecap: round; opacity: .38; transition: opacity 150ms ease, stroke 150ms ease; }
.herb-plant { cursor: pointer; outline: none; }
.herb-plant circle { fill: #9fc98a; stroke: #1a2420; stroke-width: 1.5; transition: filter 150ms ease; }
.herb-plant.stage-bloom circle { fill: #f0a35e; }
.herb-plant.stage-perennial circle { fill: #e8b64c; }
.herb-plant.stage-seedling circle { fill: #cfe6b8; }
.herb-plant.stage-dormant circle { fill: #8fa3b3; }
.herb-plant-kind { font: 12px var(--body); fill: #1a2420; pointer-events: none; }
.herb-plant-name { font: 600 11.5px var(--body); fill: var(--cream); paint-order: stroke; stroke: #151d1a; stroke-width: 3px; stroke-linejoin: round; pointer-events: none; }
.herb-plant:hover circle, .herb-plant:focus-visible circle { filter: brightness(1.18) drop-shadow(0 0 5px rgba(236, 216, 176, .55)); stroke: var(--cream); }
.herb-plant.faded { opacity: .16; }
.herb-map.lighting .herb-runner { opacity: .1; }
.herb-map.lighting .herb-runner.lit { opacity: .95; stroke: var(--gold); }
.herb-map.lighting .herb-plant:not(.lit):not(:hover):not(:focus-visible) { opacity: .35; }
.herb-map-wrap figcaption { margin-top: 6px; }
/* Its runners, on the sheet itself. */
.herb-near { margin-top: 18px; padding-top: 14px; border-top: 1px solid rgba(111, 97, 73, .35); }
.herb-near-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.herb-near-chip, .herb-near-chip:hover { padding: 3px 10px; border: 1px solid #b9a67f; border-radius: 999px; background: rgba(255, 250, 238, .7); color: var(--ink-sepia); font-size: 12.5px; }
.herb-near-chip:hover { border-color: var(--chalk); color: var(--chalk); }
.herb-near-chip.stage-bloom, .herb-near-chip.stage-perennial { border-left: 3px solid var(--bloom); }
.herb-near-count { margin-left: 6px; font: 11px var(--mono); color: var(--ink-quiet); }
.herb-web { margin: 0; padding-left: 18px; font-size: 13px; }
.herb-tray { margin-top: 18px; }
.herb-seeds { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.herb-seed { font-size: 12px; padding: 2px 8px; border-radius: 999px; background: var(--well); border: 1px solid var(--rule-soft); color: var(--muted); cursor: default; }
/* One sheet, whole. */
.herb-back { margin-bottom: 10px; }
.herb-sheet { position: relative; overflow: hidden; padding: 28px 30px 24px; color: var(--ink-sepia); border: 1px solid var(--paper-deep); border-radius: 3px; background: var(--paper-bg);
  box-shadow: inset 0 0 70px rgba(122, 92, 40, .28), 0 10px 30px rgba(0, 0, 0, .35); }
.herb-sheet.stage-dormant { filter: sepia(.25) saturate(.85); }
.herb-sheet a { color: var(--ink-pen); }
.herb-sheet .body code { border-color: rgba(111, 97, 73, .4); color: var(--ink-sepia); }
.herb-sheet-head { position: relative; margin-bottom: 16px; padding-bottom: 12px; border-bottom: 1px solid rgba(111, 97, 73, .35); }
.herb-sheet-kind { margin: 0; font: 12px var(--signal); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-quiet); }
.herb-sheet-name { margin: 4px 0 2px; font: 600 32px/1.12 var(--display); color: var(--ink-sepia); }
.herb-sheet-binomial { margin: 0; font: italic 18px var(--display); color: var(--chalk); }
.herb-sheet-aliases { margin: 6px 0 0; font-size: 13px; color: var(--ink-quiet); }
.herb-sheet-body { display: grid; grid-template-columns: minmax(0, 1fr) 250px; gap: 26px; align-items: start; }
@media (max-width: 820px) { .herb-sheet-body { grid-template-columns: minmax(0, 1fr); } .herb-sheet { padding: 22px 18px 18px; } }
.herb-trace { margin-bottom: 18px; }
.herb-trace-head { margin: 0 0 4px; font: 11px var(--signal); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-quiet); }
.herb-trace .body { font-size: 14.5px; line-height: 1.6; }
.herb-trace.colors .body { font: 17px/1.62 var(--display); color: var(--ink-pen); }
.herb-trace.note .body { font-style: italic; color: var(--chalk); }
.herb-waiting { margin: 0 0 16px; font-style: italic; color: var(--ink-quiet); }
/* The herbarium label: double-ruled, with the stamp from the stamp shelf. */
.herb-label { position: relative; padding: 16px 14px 12px; background: #f7f0de; border: 1px solid #8a7a5c; outline: 1px solid #8a7a5c; outline-offset: -5px; font-size: 12.5px; box-shadow: 1px 2px 0 rgba(0, 0, 0, .12); }
.herb-stamp { position: absolute; top: -16px; right: -10px; width: 76px; transform: rotate(6deg); box-shadow: 0 2px 5px rgba(0, 0, 0, .3); }
.herb-label-head { margin: 0 0 8px; max-width: 150px; font: 11px var(--signal); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-quiet); }
.herb-label-name { margin: 0; font: italic 600 16px var(--display); }
.herb-label-common { margin: 0 0 8px; color: var(--ink-quiet); }
.herb-label-row { display: flex; justify-content: space-between; gap: 10px; padding: 3px 0; border-bottom: 1px dotted rgba(111, 97, 73, .45); }
.herb-label-row span { color: var(--ink-quiet); }
.herb-label-row b { font-weight: 600; text-align: right; }
.herb-label-det { margin: 8px 0 0; font: 10.5px var(--mono); color: var(--ink-quiet); }
/* Where and when it was seen: a strip from the herbarium's first day to today. */
.herb-sightings { margin-top: 18px; padding-top: 14px; border-top: 1px solid rgba(111, 97, 73, .35); }
.herb-strip { position: relative; height: 16px; margin: 6px 0 10px; border-radius: 8px; background: linear-gradient(90deg, rgba(111, 97, 73, .1), rgba(111, 97, 73, .22)); }
.herb-dot { position: absolute; top: 3px; width: 10px; height: 10px; margin-left: -5px; border-radius: 50%; background: var(--bloom); box-shadow: 0 0 0 2px var(--paper); }
.herb-sightings ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; font-size: 13px; }
.herb-sightings li { display: grid; grid-template-columns: 100px 58px minmax(0, 1fr) auto; gap: 10px; align-items: baseline; }
.herb-when { font: 11.5px var(--mono); color: var(--ink-quiet); }
.herb-sightings code { font: 11px var(--mono); color: var(--chalk); }
.herb-where { font-size: 11px; color: var(--ink-quiet); }
@media (max-width: 620px) { .herb-sightings li { grid-template-columns: 1fr; gap: 0; } }
/* His slips: cream, pinned, a little crooked, over the hand that writes. */
.herb-slips { margin-top: 24px; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 18px; align-items: start; }
.herb-slips > .signal { grid-column: 1 / -1; margin: 0; color: var(--chalk); }
.herb-slip { position: relative; overflow: hidden; padding: 20px 16px 12px; color: #5b3a2a; background: #fbf4e2; border: 1px solid #d8c8a4; box-shadow: 0 3px 8px rgba(0, 0, 0, .18); transform: rotate(var(--tilt, 0deg)); }
.herb-slip::after { content: ''; position: absolute; right: -16px; bottom: -18px; width: 150px; height: 125px; background: url(./herbarium/hand-pen.png) center / contain no-repeat; opacity: .2; pointer-events: none; }
.herb-slip-new { transform: rotate(.4deg); }
.herb-pin { position: absolute; top: 6px; left: 50%; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #f29b8f, var(--pin) 55%, #6d1c16); box-shadow: 0 2px 3px rgba(0, 0, 0, .35); }
.herb-slip-text { position: relative; z-index: 1; margin: 6px 0 8px; font: 16px/1.55 var(--display); white-space: pre-wrap; overflow-wrap: anywhere; }
.herb-slip-sign { position: relative; z-index: 1; margin: 0; text-align: right; font: italic 13px var(--display); color: var(--chalk); }
.herb-slip-remove, .herb-slip-remove:hover { position: absolute; top: 3px; right: 5px; z-index: 2; padding: 0 6px; border: 0; background: transparent; color: #8a6a55; font-size: 17px; line-height: 1.2; opacity: .5; }
.herb-slip-remove:hover { opacity: 1; color: var(--pin); }
.herb-slip-input, .herb-slip-input:focus-visible { position: relative; z-index: 1; width: 100%; box-sizing: border-box; margin-top: 6px; resize: vertical; padding: 4px 0; background: transparent; border: 0; border-bottom: 1px dashed #c9b48a; box-shadow: none; color: #5b3a2a; font: 16px/1.55 var(--display); }
.herb-slip-input::placeholder { color: #a08a6a; }
.herb-slip-actions { position: relative; z-index: 1; display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 8px; }
.herb-slip-actions .muted { flex: 1; color: #8a7560; }
.herb-slip-actions .primary { flex: none; }
.art-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
.art-card { background: var(--raised); border-radius: 6px; overflow: hidden; }
.art-card img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; }
.art-name { padding: 4px 8px; font-size: 12px; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.art-tags { padding: 0 8px 6px; font-size: 11px; color: var(--muted); margin: 0; }
.flash { outline: 2px solid var(--gold); outline-offset: 4px; }
.mood-board { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; margin: 10px 0 18px; align-items: start; }
.mood-pin { background: var(--raised); border-radius: 6px; overflow: hidden; margin: 0; padding: 0; }
.mood-pin p { margin: 0; padding: 6px 10px; }
.mood-swatch { height: 90px; }
.mood-image img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; }
.mood-quote { border-left: 3px solid var(--gold); padding: 8px 4px; font-style: italic; }
.mood-track .mood-value, .mood-word .mood-value { font-size: 15px; color: var(--cream); }
.mood-word .mood-value { font-size: 20px; text-align: center; padding: 18px 10px; }
.mood-value { font: 12px var(--mono); }
.mood-note { font-size: 12px; color: var(--muted); }
.mood-earlier { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.mood-earlier .signal { width: 100%; }
.audio-list { display: grid; gap: 10px; }
.audio-card { display: grid; gap: 10px; border: 1px solid var(--rule-soft); background: var(--panel); padding: 12px 14px; }
.audio-meta { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; min-width: 0; }
.audio-meta strong { overflow-wrap: anywhere; font-size: 15px; color: var(--cream); }
.audio-card audio { width: 100%; min-height: 36px; }

/* ---- chat icons ---- */
.icons-body { overflow: auto; padding: 10px 14px 14px; display: flex; flex-direction: column; gap: 6px; }
.icons-current { display: flex; align-items: center; gap: 10px; margin: 6px 0; }
.emoji-choice.chosen { border-color: var(--gold); background: var(--active); }
#icons-portraits .emoji-choice img { width: 44px; height: 44px; object-fit: cover; }

/* How check-ins went: a visit closed shows the start of its answer, opened shows every step. */
.chip[aria-pressed="true"] { background: var(--active); border-color: var(--green); color: var(--green); }
button.chip { cursor: pointer; font: inherit; font-size: 12px; color: inherit; }
details.went > summary { cursor: pointer; list-style: none; }
details.went > summary::-webkit-details-marker { display: none; }
details.went > summary h3::before { content: '\25B8  '; color: var(--gold); }
details.went[open] > summary h3::before { content: '\25BE  '; }
.went-preview { margin: 8px 0 0; color: var(--muted, inherit); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
details.went[open] .went-preview { display: none; }
details.went .field-label { margin-top: 12px; }

.folders-panel { padding: 10px 18px; border-bottom: 1px solid var(--rule-soft); background: var(--well); }
.folders-panel .signal { margin: 0 0 6px; }
.folder-list { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 4px; }
.folder-list li { display: flex; align-items: center; gap: 8px; min-width: 0; }
.folder-list .hint { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.folder-add { display: flex; flex-wrap: wrap; gap: 6px; }
.folder-add input { flex: 1; min-width: 200px; }

/* A little life in the station: small, quick responses rather than constant motion. */
@media (prefers-reduced-motion: no-preference) {
  button, .file-button, .convo {
    transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease, transform 150ms ease;
  }
  button:not(:disabled):active, .file-button:active { transform: translateY(1px); }
  .convo:hover { transform: translateX(2px); }
  .brand-star { display: inline-block; animation: star-drift 6s ease-in-out infinite; }
  .station::before { animation: starfield-drift 34s ease-in-out infinite alternate; }
  .stream > .msg:last-child { animation: message-settle 220ms ease-out both; }
  .stream > .msg:last-child .bubble { position: relative; }
  .stream > .msg:last-child .bubble::after { content: '✧'; position: absolute; right: 5px; bottom: -6px; padding: 0 2px; background: var(--well); color: var(--gold); font: 10px/1 var(--display); animation: thought-mark 1.8s ease-out both; pointer-events: none; }
  /* The mark belongs to a finished message; one still being written only breathes. */
  .stream > .msg.provisional:last-child .bubble::after { content: none; }
  .who .writing { animation: writing-breath 1.6s ease-in-out infinite; }
  @keyframes writing-breath { 50% { opacity: .45; } }
  @keyframes starfield-drift { to { transform: translateX(5px); } }
  @keyframes star-drift {
    0%, 100% { transform: translateY(0) rotate(0); }
    50% { transform: translateY(-2px) rotate(5deg); }
  }
  @keyframes message-settle {
    from { opacity: 0; transform: translateY(5px); }
    to { opacity: 1; transform: translateY(0); }
  }
  @keyframes thought-mark { 0% { opacity: 0; transform: scale(.65); } 65%, 100% { opacity: .8; transform: scale(1); } }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .seasonal-flourish::before { animation: none; content: '·'; }
}

/* ---- Her body on the message box (body.js, room-body.mjs) ----
   The floor is the line between the conversation and whatever sits under it.
   She stands on it, and a pose whose anchor sits higher hangs its legs over the
   edge. Only she takes the pointer; the floor lets every other click through.
   The conversation keeps room at its foot so the last line is never under her. */
.floor { position: relative; height: 0; z-index: 6; pointer-events: none; }
/* Every button eases its transform (the station's small life, above); she must not,
   until she is placed, or she slides in from the left edge when the room opens. */
.floor .body { position: absolute; left: 0; bottom: 0; width: 72px; height: 72px; padding: 0; border: 0; background: transparent; pointer-events: auto; cursor: pointer; transition: none; }
.floor .body.settled { transition: transform .24s linear; }
.floor .body:hover { border: 0; }
.floor .body img { display: block; width: 72px; height: 72px; user-select: none; -webkit-user-drag: none; }
.floor .body img.hop { animation: body-hop .48s cubic-bezier(.3, .7, .4, 1); }
@keyframes body-hop { 0%, 100% { transform: translateY(0); } 45% { transform: translateY(-16px); } }
body:not(.chat-only) .talk.has-body .stream { padding-bottom: 92px; }

/* ---- Just the chat (only.js) ----
   Every other column and row put away, for screenshots: the station bar, both
   rails, the title row, the composer with her body sitting on it, and in the conversation the harness's own
   furniture (notices, engine switches, "earlier messages", each reply's buttons
   and record, the engine tag). What stays is who said what, and when. Important
   so a rail left open on a narrow screen cannot come back through it. */
.only-exit { display: none; }
body.chat-only .station, body.chat-only .rail, body.chat-only .desk,
body.chat-only .talk-head, body.chat-only .engine-note, body.chat-only .folders-panel,
body.chat-only .working, body.chat-only .composer, body.chat-only .floor,
body.chat-only .stream > .older, body.chat-only .stream > .notice, body.chat-only .stream > .switch,
body.chat-only .msg-foot, body.chat-only .who .engine-tag, body.chat-only .who button { display: none !important; }
body.chat-only .room { height: 100%; grid-template-columns: minmax(0, 1fr); }
/* One centred column, as wide as a message, so a crop needs no second thought. */
body.chat-only .stream { padding: 36px max(22px, calc((100% - 880px) / 2)) 44px; }
/* The way out, which fades once the pointer is still so it is never in the picture. */
body.chat-only .only-exit { display: block; position: fixed; top: 12px; right: 12px; z-index: 30; opacity: 0; pointer-events: none; transition: opacity .25s; }
body.chat-only.stirring .only-exit, body.chat-only .only-exit:focus-visible { opacity: 1; pointer-events: auto; }
.only-exit kbd { margin-left: 6px; }

/* Moods (moods.js): her word, his word, Vent-style. --mood is set per word, already readable. */
/* The header lifts above the room so his picker is never painted over (the floor is 6, drawers 20). */
.station { z-index: 25; }
.moods { position: relative; display: flex; align-items: center; gap: 8px; }
.mood { display: inline-flex; align-items: baseline; gap: 6px; font-size: 12px; padding: 4px 10px; border: 1px solid var(--rule); background: #17201ecc; }
.mood-who { color: var(--muted); }
.mood-word { color: var(--mood, var(--gold)); letter-spacing: .08em; font-weight: 600; }
.mood-his { cursor: pointer; }
.mood-his:hover, .mood-his[aria-expanded="true"] { border-color: var(--gold); }
.mood-picker { position: absolute; top: calc(100% + 10px); right: 0; z-index: 40; width: 340px; padding: 12px; background: var(--panel); border: 1px solid var(--rule); box-shadow: 0 10px 30px #0008; }
.mood-ask { margin: 0 0 8px; color: var(--muted); font-size: 12px; }
.mood-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.mood-choice { color: var(--mood); border-color: var(--mood); background: var(--well); letter-spacing: .08em; font-size: 12px; padding: 8px 6px; }
.mood-choice:hover, .mood-choice:focus-visible { background: var(--hover); }
.mood-own { display: flex; gap: 6px; margin-top: 10px; }
.mood-own input { flex: 1; min-width: 0; text-transform: uppercase; }
/* A phone-width header has no room for them (measured: +200px of overflow); the desktop room carries them. */
@media (max-width: 760px) { .moods { display: none; } }

/* Colours that fade (his ask, 2026-10-01: "is there a way to make the harness fade between
   colors? or maybe there could be a gradient of my and your colors, or both!"). Registered as
   real colours, so the browser can travel between them instead of snapping. */
@property --gold { syntax: '<color>'; inherits: true; initial-value: #debd83; }
@property --her-mood { syntax: '<color>'; inherits: true; initial-value: #debd83; }
@property --his-mood { syntax: '<color>'; inherits: true; initial-value: #debd83; }
/* Hers is the room's accent unless she wears a word; his is hers until he wears one, so
   with no mood of his the stripe is all hers (moods.js sets both). */
:root { --her-mood: var(--gold); --his-mood: var(--her-mood); }
@media (prefers-reduced-motion: no-preference) {
  :root { transition: --gold 1.6s ease, --her-mood 1.6s ease, --his-mood 1.6s ease; }
}
/* Their gradient: hers on the left where her word sits, his on the right where his does. */
.station { border-top-color: transparent;
  background: linear-gradient(90deg, color-mix(in srgb, var(--her-mood) 9%, transparent), color-mix(in srgb, var(--his-mood) 9%, transparent)), url('./decor/starfield.png') center / cover #1f2a26; }
.station::after { content: ''; position: absolute; left: 0; right: 0; top: -4px; height: 4px; pointer-events: none;
  background: linear-gradient(90deg, var(--her-mood), var(--his-mood)); }

/* His own colour for a word of his own (moods.mjs keepHisWord). */
.mood-own input#mood-own { border-color: var(--mood, var(--rule)); color: var(--mood, var(--ink)); }
.mood-own input[type="color"] { flex: none; width: 38px; min-width: 38px; padding: 2px; cursor: pointer; }