/* The few rules of the server-rendered board (docs/turbo.md) that the old styles do not have: forms and
   links standing where the old client had buttons, the picture's own page, the passing note's place.
   Everything else is styled by the sheets the old client uses. Colours are tokens only. */

/* A tile that is a link ("Choose" leads to the card's own page), and forms that hold a row's tiles and tabs. */
a.inbox-answer { text-decoration: none; box-sizing: border-box; }
form.inbox-actions, form.inbox-tabs { margin: 0; }
.inbox-revising-row > form { display: contents; }
a.inbox-thumb { text-decoration: none; }
a.inbox-stack-more { text-decoration: none; text-align: center; }
.inbox-group:empty { display: none; }
.agent-row[hidden] { display: none !important; }
a.agent-badge { text-decoration: none; }

/* The agent's advice on a tile: a line under the words, until the drawn marker's island stands. */
.focus-opt.is-advised .focus-opt-label { background: linear-gradient(transparent 55%, color-mix(in srgb, var(--advice, var(--accent)) 30%, transparent) 55%); }

/* ---- toast: one quiet line at the top right, the same on every page (server/views/toast.mjs) ----
   "<what happened>: <of what>  ↶ Undo", newest on top, three at most; a scribbled line under it is the time left. */
#says-host { top: 12px; right: 12px; left: auto; z-index: 80; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; max-width: calc(100vw - 24px); }
#says-host:empty { display: none; }
.says form { margin: 0; flex: none; }
#says-host .says {
  rotate: 0deg; max-width: min(440px, calc(100vw - 24px)); min-height: 44px; box-sizing: border-box; gap: 10px;
  padding: 4px 4px 6px 14px; border-radius: 12px; background: var(--surface); color: var(--fg);
  box-shadow: 0 0 0 1px var(--line), var(--shadow-md); transform-origin: 100% 0; animation: toast-in 200ms var(--ease-out);
}
#says-host .says[hidden] { display: none; }
@keyframes toast-in { from { opacity: 0; translate: 0 -6px; } }
#says-host .says-words { display: flex; align-items: baseline; gap: .35em; min-width: 0; padding-block: 6px; white-space: nowrap; }
#says-host .says-words b { flex: none; font: 600 var(--t-sm)/1.3 var(--font); letter-spacing: 0; }
#says-host .says-words b:not(:last-child)::after { content: ':'; }
#says-host .says-words span { min-width: 0; overflow: hidden; text-overflow: ellipsis; font: 400 var(--t-sm)/1.3 var(--font); color: var(--muted); opacity: 1; }
#says-host .says[role="alert"] .says-words b { color: var(--deny); }
#says-host .says-back { min-height: 36px; padding: 0 10px 0 8px; gap: 5px; background: transparent; color: var(--accent); }
#says-host .says-back:hover { filter: none; background: var(--accent-soft); }
#says-host .says-back:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
#says-host .says-back .back-arrow { width: 17px; height: 17px; }
#says-host .says-back kbd { color: var(--muted); }
#says-host .says:not(:has(form)) { padding-right: 14px; }
#says-host .back-line { left: 14px; bottom: 1px; width: calc(100% - 28px); color: var(--accent); opacity: .35; }
@media (max-width: 860px) {
  #says-host { top: 8px; right: 8px; max-width: calc(100vw - 16px); }
  #says-host .says { max-width: calc(100vw - 16px); padding-block: 4px 6px; }
}

/* A card's page: the pictures are a frame of their own; options that are ticked; the field's form. */
turbo-frame.focus-media { display: block; }
a.focus-figure, a.focus-thumb, a.focus-stage-step, a.focus-card-close, a.focus-back-desk { text-decoration: none; }
a.focus-stage-step { display: grid; place-items: center; }
label.focus-opt { cursor: pointer; }
label.focus-opt > input { position: absolute; opacity: 0; pointer-events: none; }
label.focus-opt:has(> input:checked) { border-color: var(--accent); }
label.focus-opt:has(> input:checked) .focus-opt-mark { opacity: 1; }
div.focus-opt { cursor: default; }
.focus-card .inbox-tab { align-self: flex-start; }

/* One picture, large, at its own address (/q/<n>/p/<i>): the browser's Back closes it. */
.t-picture { position: fixed; inset: 0; display: grid; grid-template-rows: auto minmax(0, 1fr); background: var(--bg); }
.t-picture-bar { display: flex; align-items: center; gap: var(--s-3); padding: 10px 14px; min-width: 0; }
.t-picture-bar .t-picture-back { position: static; min-width: 0; max-width: 46vw; }
.t-picture-bar .t-picture-back span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.t-picture-where { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font: 400 var(--t-sm)/1.3 var(--font); }
.t-picture-where b { color: var(--fg); font-weight: 600; }
.t-picture-view { display: grid; place-items: center; min-height: 0; padding: 0 14px 14px; cursor: zoom-out; }
.t-picture-view img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: var(--r-md); box-shadow: var(--shadow-md); background: var(--surface); }
.t-picture .focus-stage-step { position: fixed; top: 50%; }
.t-picture .focus-stage-step.is-prev { left: 14px; }
.t-picture .focus-stage-step.is-next { right: 14px; }

/* Turbo's progress line, in the board's ink. */
.turbo-progress-bar { background: var(--accent); height: 2px; }

.focus-opt.is-advised .focus-opt-label { width: fit-content; }

/* ---- keys, the Trommi menu, the long-press sheet (worker D: views/menu.mjs, views/keys.mjs) ---- */
#jump-form { margin: 0; }
turbo-frame#jump-results { display: grid; }
turbo-frame#jump-results:empty { display: none; }
.topbar .sidedoors a.menu-desk { text-decoration: none; }
.keys-sheet header form { margin: 0; }
.keys-foot a { color: inherit; }
.ledger-line.is-current { outline: 3px solid var(--fg); outline-offset: -3px; }
.ledger-line:focus { outline-offset: -3px; }
.rowmenu-in > form { display: contents; }
.rowmenu-in button[hidden] { display: none; }
.rowmenu-in a.rowmenu-open { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 0 8px; border-radius: 10px; color: var(--fg); font: 500 1rem/1.2 var(--font); text-decoration: none; }
.rowmenu-in a.rowmenu-open:active { background: var(--sunken); }
.rowmenu-in a.rowmenu-open svg { flex: none; width: 22px; height: 22px; color: var(--ink); }

/* ---- The Agents page (views/agents.mjs) and a session's small forms (views/session-edit.mjs, controller "pops") ----
   The lines are css/ledger.css. New here: controls that are <details> with their content lying over the page
   (no veil), forms where the old client had buttons, a main's subs under it, what the hub refused, the phone. */
.t-pick { position: relative; min-width: 0; max-width: 100%; }
.t-pick > summary { list-style: none; cursor: pointer; }
.t-pick > summary::-webkit-details-marker { display: none; }
.t-pop { position: absolute; z-index: 40; left: 0; top: calc(100% + 8px); margin: 0; user-select: text; -webkit-user-select: text; }
.t-pop-wait { padding: var(--s-2) var(--s-3); color: var(--muted); font-size: var(--t-sm); white-space: nowrap; }
.mark-picker.t-pop { width: max-content; max-width: calc(100vw - 16px); }
.t-menu { display: grid; gap: 2px; min-width: 168px; max-width: min(280px, calc(100vw - 16px)); max-height: min(60vh, 420px); overflow-y: auto; padding: 6px; border-radius: 12px; background: var(--surface); color: var(--fg); box-shadow: 0 0 0 1px var(--line-strong), var(--shadow-lg); }
.t-menu button { min-height: 36px; padding: 0 10px; border: 0; border-radius: var(--r-sm); background: none; color: var(--fg); font: 500 var(--t-sm)/1.2 var(--font); text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.t-menu button:hover, .t-menu button:focus-visible { background: var(--sunken); }
.t-menu button[aria-current="true"] { font-weight: 700; box-shadow: inset 3px 0 0 var(--fg); }
.ledger-acts .t-pop { left: auto; right: 0; }
.ledger-line form { margin: 0; }
.ledger-face form, .ledger-acts > form, .ledger-with form { display: contents; }
.ledger-tools > form { flex: 1 1 260px; max-width: 360px; margin: 0; }
.ledger-tools .ledger-find { max-width: none; }
a.ledger-th, a.ledger-ib, a.ledger-q, a.ledger-more, a.ledger-ans, a.ledger-link, a.ledger-sheet-item { text-decoration: none; }
a.ledger-th { min-height: 32px; align-items: center; color: var(--faint); }
a.ledger-th:hover { color: var(--fg); }
a.ledger-link { display: inline-flex; align-items: center; text-decoration: underline; text-decoration-color: var(--line-strong); }
a.ledger-ans { display: inline-grid; margin-left: auto; }
a.ledger-more { display: inline-flex; align-items: center; }
a.ledger-sheet-item { display: flex; align-items: center; }
.ledger-mark { display: block; }
.ledger-name > .t-pick { flex: 0 1 auto; }
.ledger-rename { display: block; }
/* A main's subs stand under it, a step in. */
.ledger-line.is-sub .ledger-face { margin-left: 10px; }
.ledger-line.is-sub .ledger-face .agent-avatar { width: 31px; height: 31px; margin-top: 4px; }
/* (No transform on a line's parts: it would hold the open control under the lines that follow.) */
.ledger-line:has(details.t-pick[open]) { z-index: 5; }
.ledger-line.is-sub .ledger-name { padding-left: 12px; }
/* The main agent's choice: "belongs under", drawn; beside the name where there is room, alone where there is none. */
.ledger-main > .sketch { flex: none; width: 18px; height: 18px; margin-right: 4px; }
/* In his own order a line moves one place up or down: two small forms in the grip's place. */
.ledger-grip > form { display: grid; gap: 0; }
.ledger-grip { padding: 0; gap: 0; }
.ledger-grip button { width: 18px; height: 17px; padding: 0; border: 0; border-radius: 4px; background: none; color: var(--line-strong); }
.ledger-grip button .sketch { display: block; width: 16px; height: 16px; margin: auto; }
.ledger-grip button[value="up"] .sketch { scale: 1 -1; }
.ledger-line:hover .ledger-grip button, .ledger-grip button:focus-visible { color: var(--muted); }
.ledger-grip button:hover { background: var(--sunken); color: var(--fg); }
.ledger[data-sorted] .ledger-grip > form { visibility: hidden; }
/* What the hub refused: a quiet line under the session's line. */
.ledger-err { grid-column: 3 / -1; margin: -4px 0 8px; color: var(--deny); font-size: var(--t-sm); }
.ledger-open, .ledger-dots { display: none; }
.t-marks-page { position: static; margin: var(--s-6) auto; width: max-content; max-width: calc(100vw - 16px); }
/* A session's heading: its mark and its name, each the control that changes it. */
.t-session-edit { display: inline-flex; align-items: center; gap: var(--s-3); min-width: 0; }
.t-head-mark, .t-head-name { display: block; }
@media (min-width: 861px) {
  /* The room of the last column: as wide in every line; the two choices (desk, main agent) have their own. */
  .ledger[data-desks] { --pick-desk: 100px; }
  .ledger[data-mains] { --pick-main: 120px; }
  .ledger-acts { align-items: center; }
  .ledger-acts summary.ledger-desk { display: flex; align-items: center; box-sizing: border-box; height: 34px; margin-right: 4px; padding: 0 8px; border: 1px solid var(--line-strong); border-radius: var(--r-sm); background-color: var(--surface); color: var(--fg); font: 500 var(--t-sm)/1 var(--font); }
  .ledger-acts summary.ledger-desk > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}
@media (min-width: 1241px) and (max-width: 1500px) {
  .ledger[data-desks] .ledger-line, .ledger[data-mains] .ledger-line { grid-template-columns: 18px 44px minmax(0, 1.3fr) 104px minmax(0, 1.9fr) 88px var(--acts, 132px); }
  .ledger[data-desks] .ledger-line > :is(.ledger-cell, .ledger-th):nth-child(6), .ledger[data-mains] .ledger-line > :is(.ledger-cell, .ledger-th):nth-child(6) { display: none; }
}
@media (min-width: 861px) and (max-width: 1360px) {
  /* Each choice is a small drawn button; its list says the rest. The desk's is drawn by css/ledger.css; the main agent's is
     the pen's "belongs under" (the crown means one thing only: the crowned session of a desk). */
  .ledger-acts summary.ledger-main { background-image: none; justify-content: center; color: var(--muted); }
  .ledger-acts summary.ledger-main > .sketch { width: 20px; height: 20px; margin: 0; }
  .ledger[data-desks] { --pick-desk: 38px; }
  .ledger[data-mains] { --pick-main: 38px; }
  .ledger-acts summary.ledger-desk { margin-right: 0; border-color: transparent; }
  .ledger-acts summary.ledger-desk > span { display: none; }
  .ledger-acts summary.ledger-main[data-set] { border-color: var(--line-strong); }
}
@media (max-width: 860px) {
  /* A line is mark, name, state and "…": a tap on the line opens the session, "…" the sheet at the lower edge. */
  .ledger-pick, .ledger-acts > a.ledger-ib { display: none; }
  .ledger-dots { display: block; position: relative; z-index: 2; }
  .ledger-open { display: block; position: absolute; inset: 0; z-index: 1; }
  .ledger-tools > form { max-width: none; }
  .t-sheet { position: fixed; z-index: 90; left: 0; right: 0; bottom: 0; display: grid; gap: 2px; box-sizing: border-box; width: auto; max-width: none; max-height: 82dvh; overflow-y: auto; user-select: text; -webkit-user-select: text; }
  .t-sheet form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s-2); margin: 0; }
  .t-sheet form > .ledger-sheet-item:only-of-type { grid-column: 1 / -1; }
  .t-sheet form:has(> input[type="text"]) > .ledger-sheet-item { grid-column: auto; background: var(--sunken); font-weight: 600; }
  .t-sheet input[type="text"] { min-width: 0; min-height: 48px; padding: 0 12px; border: 1px solid var(--line-strong); border-radius: var(--r-md); background: transparent; color: var(--fg); font-size: max(16px, 1em); }
  .t-sheet .ledger-sheet-item { width: 100%; box-sizing: border-box; }
  .t-sheet-marks > summary { list-style: none; display: flex; align-items: center; cursor: pointer; }
  .t-sheet-marks > summary::-webkit-details-marker { display: none; }
  .t-sheet-marks .mark-grid { margin: var(--s-2) var(--s-3) var(--s-3); width: auto; }
}

/* ---- the session page (worker A: views/session.mjs, t/islands/composer.js) ---- */
/* The log begins at its end and stays there while messages arrive, without a script: a reversed column scrolls
   from its end, and what is put in above (the earlier messages) does not move what is in view. */
#session .log { display: flex; flex-direction: column-reverse; }
#session .log-inner { flex: none; }
/* The frame the earlier messages are loaded into is no box: they are lines of the log like the others. */
turbo-frame.log-earlier { display: contents; }
.log-earlier-link { align-self: center; display: inline-flex; align-items: center; gap: 8px; min-height: 32px; margin-bottom: var(--s-4); padding: 0 14px; border-radius: var(--r-pill); background: var(--sunken); color: var(--muted); font-size: var(--t-sm); font-weight: 500; }
.log-earlier-link:hover { color: var(--fg); }
.log-earlier-link b { color: var(--faint); font-weight: 600; font-variant-numeric: tabular-nums; }
.log-earlier-link.is-later { margin: var(--s-6) 0 0; }
turbo-frame.log-earlier[busy] > .log-earlier-link { opacity: .5; pointer-events: none; }
#session a.shot { cursor: zoom-in; }
#session a.event { text-align: left; user-select: text; -webkit-user-select: text; }
#session a.file-row, #session a.msg-about { text-align: left; }
#session .pane-who .pane-mark { display: block; }
/* What the session is at, at the end of the conversation: one quiet line per piece of running work. */
.session-status { display: grid; gap: 6px; justify-items: start; margin-top: var(--s-6); }
.session-status[hidden] { display: none; }
.status-line { display: flex; align-items: center; gap: 8px; max-width: 100%; min-width: 0; color: var(--muted); font-size: var(--t-sm); }
.status-line b { flex: none; max-width: 60%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--fg); font-weight: 600; }
.status-line[data-state="done"] b { color: var(--muted); font-weight: 500; }
.status-detail { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.status-ago { flex: none; color: var(--faint); font-size: var(--t-xs); }
.status-mark { flex: none; width: 18px; height: 18px; display: grid; place-items: center; color: var(--accent); }
.status-mark svg { width: 18px; height: 18px; fill: none; }
.status-mark .agent-ring { position: static; color: inherit; }
.status-mark .ring-loop { opacity: .38; stroke-width: 2.2; }
.status-line[data-state="decision"] .status-mark { color: var(--urg-high); }
.status-line[data-state="done"] .status-mark { color: var(--faint); }
.session-status .working { margin-top: var(--s-2); }
/* The composer: the clip is the label of a real file field; the chosen files stand above the words. */
.composer-clip { cursor: pointer; }
.composer .composer-file { cursor: default; }
.composer-file-off { flex: none; width: 20px; height: 20px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; background: none; font: 400 15px/1 var(--font); color: var(--muted); cursor: pointer; }
.composer-file-off:hover { background: var(--fg); color: var(--bg); }
/* The heading's controls (views/session-edit.mjs), on the heading's line under the band: the name in the heading's letters. */
#session .pane-who .t-head-name strong { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 800 1.5rem/1.15 var(--display); letter-spacing: -.02em; }
#session .pane-who .t-session-edit { min-height: 44px; align-items: flex-start; }
/* Messages that arrive while one reads further up do not move what is in view: the controller "log" keeps the place. */
#session .log { overflow-anchor: none; }
#session .jump[hidden], #session .open-jump[hidden] { display: none; }
.empty-pick { text-align: center; }
.composer-files-plain { flex: 0 0 100%; padding: 2px 8px; color: var(--muted); font-size: var(--t-xs); }
.session-past { display: grid; justify-items: start; }
.session-past .event { margin-top: 0; }
a.open-jump { text-decoration: none; }
/* The filter beside the composer (views/session.mjs sessionFilters): one quiet line icon at the bar's right; its menu
   opens upward, the one in view ticked; a dot on the icon while a filter is on. */
#session .session-compose { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 8px; align-items: end; }
#session .session-compose > :not(.composer, .session-filter) { grid-column: 1 / -1; }
.session-filter { margin-bottom: 7px; }
/* (session.css keeps a row free under the composer for the old pills; on a wide screen nothing stands there now.
   A phone keeps it: the memo button sits in it.) */
@media (min-width: 861px) { body[data-view="chat"]:not([data-pair]) #session .dock { padding-bottom: max(var(--s-4), env(safe-area-inset-bottom, 0px)); } }
.session-filter-btn { position: relative; width: 42px; height: 42px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 50%; background: var(--surface); color: var(--muted); transition: color var(--d-fast) var(--ease-out), border-color var(--d-fast) var(--ease-out); }
.session-filter-btn:hover, .session-filter[open] > .session-filter-btn { color: var(--fg); border-color: var(--line-strong); }
.session-filter[data-on] > .session-filter-btn { color: var(--fg); border-color: var(--line-strong); }
.session-filter-btn .ico { width: 19px; height: 19px; }
.session-filter-dot { position: absolute; top: 7px; right: 7px; width: 9px; height: 9px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 2px var(--surface); }
.session-filter-menu.t-pop { top: auto; bottom: calc(100% + 8px); left: auto; right: 0; }
.session-filter-menu a { display: flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 10px 0 8px; border-radius: var(--r-sm); color: var(--fg); font-size: var(--t-sm); font-weight: 500; text-decoration: none; white-space: nowrap; }
.session-filter-menu a:hover, .session-filter-menu a:focus-visible { background: var(--sunken); }
.session-filter-menu a[aria-current="true"] { font-weight: 700; }
.session-filter-tick { width: 16px; height: 16px; visibility: hidden; }
.session-filter-menu a[aria-current="true"] .session-filter-tick { visibility: visible; }
.session-filter-menu b { margin-left: auto; padding: 1px 7px; border-radius: var(--r-pill); background: var(--urg-high); color: var(--surface); font-size: var(--t-xs); font-weight: 700; font-variant-numeric: tabular-nums; }
.session-filter-menu b:empty { display: none; }
@media (max-width: 860px) {
  .session-filter { margin-bottom: 6px; }
  .session-filter-btn { width: 40px; height: 40px; }
  #session .session-compose { column-gap: 6px; }
}

/* ---- the session's files (views/session.mjs filesChip, filesDrawer; t/controllers/files_controller.js): "N files"
   beside the quiet line opens a drawer from the right, the conversation stays; on a phone "Files (N)" in the filter
   menu opens it as a sheet from below. Sober: lines and tokens, nothing drawn. ---- */
#session .pane-now .files-chip { flex: none; align-self: center; display: inline-flex; align-items: center; gap: 4px; margin-left: 2px; padding: 1px 9px 1px 6px; border-radius: var(--r-pill); box-shadow: inset 0 0 0 1px var(--line-strong); color: var(--muted); font: 600 var(--t-xs)/1.5 var(--font); text-decoration: none; white-space: nowrap; }
#session .pane-now .files-chip .ico { width: 13px; height: 13px; }
#session .pane-now .files-chip span { overflow: visible; min-width: 0; }
#session .pane-now .files-chip:hover, #session[data-files-open] .pane-now .files-chip { color: var(--fg); background: var(--sunken); }
.session-filter-files .session-filter-tick { visibility: visible; }
@media (min-width: 861px) { .session-filter-menu .session-filter-files { display: none; } }
.files-drawer { position: fixed; z-index: 60; top: var(--s-3); right: var(--s-3); bottom: calc(var(--s-3) + 68px); width: min(380px, calc(100vw - 2 * var(--s-3))); display: flex; flex-direction: column; border-radius: var(--r-lg); background: var(--surface); color: var(--fg); box-shadow: 0 0 0 1px var(--line-strong), var(--shadow-lg); }
.files-drawer[hidden] { display: none; }
.files-head { flex: none; display: flex; align-items: center; gap: 8px; padding: 10px 8px 8px 18px; border-bottom: 1px solid var(--line); }
.files-head h3 { margin: 0; font: 800 1.1rem/1 var(--display); }
.files-close { margin-left: auto; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; color: var(--muted); }
.files-close:hover, .files-close:focus-visible { background: var(--sunken); color: var(--fg); }
.files-close .ico { width: 18px; height: 18px; }
.files-frame { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.files-frame[busy]:empty::before { content: ""; display: block; margin: var(--s-6) auto; width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--line-strong); border-top-color: transparent; animation: files-turn .8s linear infinite; }
@keyframes files-turn { to { transform: rotate(1turn); } }
.files-list { padding: 4px 8px 12px; }
.files-sum { margin: 8px 10px 4px; color: var(--muted); font-size: var(--t-xs); }
.files-group { display: grid; gap: 8px; padding: 10px; }
.files-group + .files-group { border-top: 1px solid var(--line); }
.files-group-head { display: flex; align-items: center; gap: 8px; min-width: 0; }
.files-where { flex: 1; min-width: 0; display: flex; align-items: baseline; gap: 8px; color: var(--fg); text-decoration: none; }
.files-where b { flex: none; color: var(--muted); font-size: .68rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.files-where b time { font: inherit; }
.files-where span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--t-sm); font-weight: 600; }
a.files-where:hover span { text-decoration: underline; }
.files-jump { flex: none; display: inline-flex; align-items: center; gap: 1px; padding: 3px 4px 3px 9px; border-radius: var(--r-pill); box-shadow: inset 0 0 0 1px var(--line-strong); color: var(--fg); font-size: .72rem; font-weight: 600; text-decoration: none; }
.files-jump:hover, .files-jump:focus-visible { background: var(--sunken); }
.files-jump .ico { width: 13px; height: 13px; }
.files-thumbs { display: flex; align-items: center; gap: 6px; }
.files-thumb { position: relative; flex: none; display: grid; place-items: center; width: 64px; height: 44px; overflow: hidden; border-radius: 6px; background: var(--sunken); color: var(--faint); box-shadow: inset 0 0 0 1px var(--line); }
.files-thumb.asset-preview { grid-area: auto; width: 64px; height: 44px; }
.files-thumb > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.files-thumb .asset-glyph { width: 22px; height: 22px; }
.files-thumb.asset-preview > iframe { display: none; }
.files-more, .files-empty { color: var(--muted); font-size: var(--t-xs); }
.files-empty { margin: var(--s-4) 10px; line-height: 1.4; }
#session .is-jumped { animation: files-jumped 1.8s var(--ease-out); border-radius: var(--r-md); }
@keyframes files-jumped { 0%, 45% { box-shadow: 0 0 0 3px var(--accent); } 100% { box-shadow: 0 0 0 3px transparent; } }
@media (min-width: 1280px) { #session[data-files-open] { padding-right: 392px; } }
@media (max-width: 860px) {
  .files-drawer { top: auto; left: 0; right: 0; bottom: 0; width: auto; height: min(74vh, 640px); padding-bottom: env(safe-area-inset-bottom, 0px); border-radius: var(--r-xl) var(--r-xl) 0 0; z-index: 2700; }
}
@media (prefers-reduced-motion: reduce) { #session .is-jumped { animation-duration: .01s; box-shadow: 0 0 0 3px var(--accent); } }

/* Memos and the Desk's paper (views/memo.mjs, t/controllers/memo*, t/lib/memo.js, t/lib/paper.js): what the old sheets
   (quicksend.css, deskpad.css) do not have. The round button is a form; a note without a place of its own stands
   above it; a note of the paper waits unseen until the paper is laid; on a phone only the note he opened on
   this page is out, as the sheet. */
.memo-new { display: contents; }
@media (min-width: 861px) { .memo[data-unplaced]:not(.is-paper) { left: auto; top: auto; right: var(--s-4); bottom: calc(var(--s-4) + 64px); } }
.memo[data-place="paper"]:not(.is-paper) { display: none; }
a.memo-send { text-decoration: none; box-sizing: border-box; }
.memo-gap { flex: 1; }   /* the room between the tools and the crown (the note's look is chosen elsewhere) */
@media (max-width: 860px) { .memo:not(.is-paper):not([data-sheet]) { display: none; } }
.session-past { grid-template-columns: minmax(0, 1fr); }
.session-cards > .hist-heading { margin-top: var(--s-8); }
/* The notes that were put away hang off the round button: their number on it, the list above it on a click. */
.memo-count { position: absolute; right: -4px; top: -4px; min-width: 18px; height: 18px; padding: 0 4px; box-sizing: border-box; display: grid; place-items: center; border-radius: var(--r-pill); background: var(--accent); color: var(--bg); font: 700 .68rem/1 var(--font); box-shadow: 0 0 0 2px var(--bg); }
.memo-open[data-count]::after { content: none; }
.memo-away { position: fixed; z-index: 2601; right: var(--s-4); bottom: calc(var(--s-4) + 52px + env(safe-area-inset-bottom, 0px)); width: min(320px, calc(100vw - 2 * var(--s-4))); max-height: min(60vh, 420px); overflow-y: auto; display: grid; gap: 2px; padding: 6px; border-radius: var(--r-md, 12px); background: var(--surface); box-shadow: 0 0 0 1px var(--line), var(--shadow-md); }
.memo-away[hidden] { display: none; }
.memo-away form { margin: 0; }
.memo-away-line { width: 100%; min-height: 40px; display: flex; align-items: center; gap: 8px; padding: 6px 8px; border: 0; border-radius: 8px; background: none; color: var(--fg); font: 500 var(--t-sm)/1.3 var(--font); text-align: left; cursor: pointer; }
.memo-away-line:hover, .memo-away-line:focus-visible { background: var(--sunken); outline: 0; }
.memo-away-line svg { flex: none; width: 20px; height: 20px; }
.memo-away-line span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.memo-away-new { font-weight: 700; }
.memo-away-float { display: none; }
@media (max-width: 860px) { .memo-away-float { display: block; } }
/* (the list opens above the button on a phone too: the button stands bottom right everywhere, quicksend.css) */

/* A card's page: the note on one option, attached files, the walk, an earlier version. */
.focus-opt-note[hidden] { display: none; }
.focus-opt .focus-opt-pen { cursor: pointer; }
label.focus-clip { cursor: pointer; }
.focus-chip { display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border: 0; border-radius: var(--r-pill); background: var(--sunken); color: var(--fg); font: 500 var(--t-xs)/1 var(--font); }
button.t-chip-drop { background: none; color: var(--muted); text-decoration: underline; cursor: pointer; }
.t-walk-step { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; color: var(--muted); text-decoration: none; }
a.t-walk-step:hover { background: var(--sunken); color: var(--fg); }
span.t-walk-step { opacity: .3; }
.t-walk-step .focus-icon { width: 17px; height: 17px; }
.t-version-note { display: block; }
.t-opt-links ul { margin: 4px 0 0; padding-left: 1.1em; }
.t-picture-fit { position: relative; display: inline-block; max-width: 100%; max-height: 100%; }
.t-picture-fit img { display: block; }
.focus-sec-pic { display: block; }
/* Something to read on a phone: its picture stands low, so that Acknowledge is in the first screen (card Nr. 180). */
@media (max-width: 860px) {
  .focus-card[data-kind="info"] .focus-figure { height: 140px !important; min-height: 0; }
  .focus-card[data-kind="info"] .focus-figure img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
  .focus-card[data-kind="info"] .focus-thumbs { display: none; }
}
/* The way back from a large picture (focus.css hides .focus-back-desk outside the card's window): shown in the bar, for a session's picture and a card's alike. */
.t-picture-bar .t-picture-back { display: inline-flex; align-items: center; gap: 6px; flex: none; height: 36px; padding: 0 14px 0 10px; border-radius: var(--r-pill); background: var(--surface); box-shadow: 0 0 0 1px var(--line); color: var(--fg); font-size: var(--t-sm); font-weight: 600; }
.t-picture-bar .t-picture-back .focus-icon { flex: none; width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.focus-opt-note input:focus-visible { outline: none; }
.t-walk-step { background: none; box-shadow: none; flex: none; }

/* The crown switch in a session's heading (views/session-edit.mjs crownControl; placed by beside.css). */
.t-crown-form { display: contents; }
#session .pane-who .crown-toggle[aria-pressed="false"] { opacity: 0; }
#session .pane-who:hover .crown-toggle[aria-pressed="false"], #session .pane-who .crown-toggle:focus-visible { opacity: .5; }

/* Parity with the old board (worker "parity"): the phone's Agents button beside the memo button, the memo count of
   a phone (a floating note waits at the button there too), the index-card heading's tabs as links. */
@media (min-width: 861px) { .memo-count-phone { display: none; } }
@media (max-width: 860px) { .memo-count:not(.memo-count-phone) { display: none; } }
.topbar .roster-open { color: var(--muted); }
.topbar .roster-open .sketch { width: 22px; height: 22px; }
a.inbox-index-tab { text-decoration: none; }
a.inbox-index-tab:hover { color: var(--fg); background: var(--surface); }
.inbox-index-tab .inbox-from-mark { flex: none; overflow: visible; }
@media (max-width: 860px) { .inbox-index > a.inbox-index-tab:nth-of-type(2) { display: flex; } }   /* the walk is an <a> too: the first tab stays */
/* The opened Trommi menu: a plain sheet of paper under the pill (no clipboard: css/clipboard.css is kept for a
   settings page). Paper surface, a thin pen line, a quiet shadow; the entries are simple rows. */
.topbar #brand-doors:not([hidden]) {
  background: var(--surface); border: 1.5px solid color-mix(in srgb, var(--fg) 70%, transparent); border-radius: 12px;
  box-shadow: 0 10px 28px -16px rgb(20 30 25 / .45);
}
.topbar #brand-doors :is(.menu-desks, .menu-grid, .menu-foot, .menu-dev) { border-top-style: dashed; }

/* The bracket round an unfolded main's subs is drawn inside the main's row (t/application.js folds). */
.agent-row.is-main[data-fold] { position: relative; }

/* The Desk box: beside "Desk", small and quiet, the count with an arrow: the way into the walk (views/sidebar.mjs deskState). */
.deskpill { position: relative; }
.desk-state:empty { display: none; }
.desk-next { display: inline-flex; align-items: center; gap: 2px; height: 26px; padding: 0 4px 0 2px; border-radius: 999px; color: var(--muted); text-decoration: none; white-space: nowrap; }
.desk-next:hover { color: var(--fg); background: var(--sunken); }
.desk-next-n { min-width: 22px; height: 22px; padding: 0 5px; box-sizing: border-box; display: grid; place-items: center; border-radius: 11px; box-shadow: inset 0 0 0 1.5px var(--line-strong); color: var(--fg); font: 700 .74rem/1 var(--font); }
.desk-next.is-knock .desk-next-n { box-shadow: inset 0 0 0 2px var(--urg-high); color: var(--urg-high); }
.desk-next .sketch { width: 15px; height: 15px; stroke-width: 2; }
@media (min-width: 861px) {
  .topbar .desk-state { position: absolute; right: 12px; top: 50%; translate: 0 -50%; z-index: 2; }
}
@media (max-width: 860px) {
  .topbar .desk-state { position: static; display: flex; align-items: center; margin: 0 2px 0 4px; translate: none; }
}
/* The menu's head: the connection as a dot and a word, Team as a drawing at the right. */
.topbar #brand-doors .menu-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 2px 6px 4px; }
.topbar #brand-doors .menu-top .conn { order: 0; flex: none; margin: 0; padding: 0 6px; height: 28px; border: 0; font: 500 var(--t-xs)/1 var(--font); color: var(--muted); }
.topbar #brand-doors a.menu-team { flex: none; width: 36px; min-height: 36px; padding: 0; justify-content: center; border-radius: 9px; }
.topbar #brand-doors a.menu-team svg { width: 22px; height: 22px; }
/* "Desks" with its "+", and the line that names a new one. */
.topbar #brand-doors .menu-desks-head { display: flex; align-items: center; justify-content: space-between; margin-top: 6px; padding-top: 6px; border-top: 1px dashed var(--line); }
.topbar #brand-doors .menu-desks-head .menu-head { padding-top: 3px; }
.topbar #brand-doors .menu-desks-head + .menu-desks { margin-top: 0; padding-top: 0; border-top: 0; }
.topbar #brand-doors button.menu-desk-add { width: 30px; min-height: 30px; padding: 0; justify-content: center; border-radius: 8px; color: var(--muted); }
.topbar #brand-doors button.menu-desk-add svg { width: 18px; height: 18px; }
.topbar #brand-doors .menu-desk-form[hidden] { display: none; }
/* Dev: one entry with its drawing, folded; what it holds stands under it, a little in. */
.topbar #brand-doors details.menu-dev { margin-top: 6px; padding-top: 6px; border-top: 1px dashed var(--line); }
.topbar #brand-doors details.menu-dev > summary { display: flex; align-items: center; gap: 10px; min-height: 36px; padding: 0 12px; border-radius: 9px; list-style: none; cursor: pointer; color: var(--muted); font: 500 var(--t-sm)/1 var(--font); }
.topbar #brand-doors details.menu-dev > summary::-webkit-details-marker { display: none; }
.topbar #brand-doors details.menu-dev > summary:is(:hover, :focus-visible) { background: var(--sunken); }
.topbar #brand-doors details.menu-dev > summary::after { content: "›"; margin-left: auto; transition: rotate 120ms; }
.topbar #brand-doors details.menu-dev[open] > summary::after { rotate: 90deg; }
.topbar #brand-doors details.menu-dev svg { width: 20px; height: 20px; }
.topbar #brand-doors .menu-dev-items { display: grid; padding-left: 20px; }
@media (max-width: 860px) { .topbar #brand-doors details.menu-dev > summary, .topbar #brand-doors a.menu-team { min-height: 44px; } .topbar #brand-doors a.menu-team { width: 44px; } }
.topbar #brand-doors .menu-desk-form { display: flex; gap: 6px; padding: 3px 4px 5px; }
.topbar #brand-doors .menu-desk-form .menu-desk-field { flex: 1; min-width: 0; width: auto; }
.topbar #brand-doors .menu-desk-form button { flex: none; width: auto; min-height: 36px; padding: 0 14px; justify-content: center; border-radius: 8px; background: var(--fg); color: var(--bg); }

/* What??: the word written by hand (pen.js sketchSvg('what'), card Nr. 206) on the Desk tile and in the phone sheet. */
.inbox-answer.is-thumb .sketch.sketch-what { width: 72px; height: 25px; stroke-width: 2.2; }
.rowmenu-in button .sketch-what { width: 63px; height: 22px; stroke-width: 2; }

.inbox-answer[data-controller~="advice"] { position: relative; isolation: isolate; }

/* Desk rows (his word, 3 October): the answer tiles have ONE colour for every session, the bell's green, not the
   session's tone; who asks is said by its drawing at the left and its name beside it. */
.inbox-row .inbox-actions {
  --tone-pen: var(--accent);
  --tone-mid: color-mix(in srgb, var(--accent) 60%, var(--surface));
  --tone-edge: color-mix(in srgb, var(--accent) 24%, var(--surface));
  --tone-wash: color-mix(in srgb, var(--accent) 9%, var(--surface));
}
.inbox-row .inbox-actions .inbox-answer.is-lead { background: var(--accent); color: var(--accent-fg, var(--surface)); }
.inbox-gutter-name { display: none; }
@media (min-width: 861px) {
  .inbox-group[data-sender] > .inbox-row > .inbox-gutter .inbox-gutter-name { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; position: absolute; left: 50%; top: calc(100% + 4px); width: 64px; translate: -50% 0; text-align: center; overflow-wrap: anywhere; font: 600 .66rem/1.2 var(--font); color: var(--tone-pen); }
  .inbox-group[data-sender] > .inbox-row > .inbox-gutter::after { display: none; }
}
/* Menu round 3 (card Nr. 199): the jump field with the theme's sun/moon beside it; no connection line in the menu. */
.topbar #brand-doors .menu-top { padding: 0 0 4px; }
.topbar #brand-doors .menu-top #jump-form { flex: 1; min-width: 0; }
.topbar #brand-doors .menu-top button.menu-theme { flex: none; width: 36px; min-height: 36px; padding: 0; justify-content: center; border-radius: 9px; }
.topbar #brand-doors .menu-top button.menu-theme .menu-word { display: none; }
/* The pill names the desk in view; a lost connection is a small warning dot on it, nothing else. */
.brand-open .pill-word { max-width: 14ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.brand-open .pill-conn { display: none; }
.brand-open .pill-conn[data-state="offline"] { display: inline-block; width: 8px; height: 8px; margin: 0 2px 0 4px; padding: 0; border: 0; border-radius: 50%; background: var(--urg-critical); }
.brand-open .pill-conn i, .brand-open .pill-conn::after, .brand-open .pill-conn i::after { display: none; }
.brand-open .pill-conn #conn-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media (max-width: 860px) { .topbar #brand-doors .menu-top button.menu-theme { width: 44px; min-height: 44px; } }
.topbar #brand-doors .menu-top button.menu-theme::after, :root[data-theme="dark"] .topbar #brand-doors .menu-top button.menu-theme::after { content: none; }
.topbar #brand-doors .menu-top { display: flex; align-items: center; gap: 6px; }
/* Stopped (cards Nr. 202/203): the raised hand, solid red, means the SESSION is really stopped (server/blocked.mjs);
   the knock (warm orange) stays the sign of an urgent card. One colour each. Sidebar badge, the Desk box, a session's
   heading, the Agents line. */
.agent-badge[data-state="blocked"], .agent-badge[data-state="blocked"][data-offline], .desk-blocked, .t-blocked { color: var(--urg-critical); }
.agent-badge[data-state="blocked"] .hand-loop, .desk-blocked .hand-loop, .t-blocked .hand-loop { fill: var(--urg-critical); stroke: var(--urg-critical); }
.agent-badge[data-state="blocked"] .hand-pen, .desk-blocked .hand-pen, .t-blocked .hand-pen { stroke: var(--surface); stroke-width: 1.7; }
.desk-blocked { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; margin-right: 2px; border-radius: 50%; text-decoration: none; }
.desk-blocked { position: relative; }
.desk-blocked:hover { background: var(--urg-critical-soft); }
.t-blocked { display: inline-flex; align-items: center; gap: 6px; min-width: 0; margin-left: 4px; font: 600 .8rem/1.2 var(--font); }
.t-blocked .hand-mark { position: static; flex: none; width: 26px; height: 26px; }
.t-blocked span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ledger-line[data-state="stopped"] .ledger-state { color: var(--urg-critical); }
.ledger-why { font-weight: 600; }
@media (max-width: 860px) { .t-blocked span { display: none; } }
/* In the folded rail the Desk box has no room for it: the session's own row shows the hand there. */
@media (min-width: 861px) { [data-rail="folded"] .topbar .desk-blocked { display: none; } }
/* "Next" above the Desk (views/nextplease.mjs): one small plain sentence, "Next 3 →", no tab. On a wide screen it
   starts where the cards start (past the column of session drawings). */
.inbox-head:has(> .inbox-title > .inbox-next) { margin-bottom: var(--s-3); }
.inbox-title > p.inbox-next { display: block; margin: 0; font: 600 var(--t-md)/1.5 var(--font); letter-spacing: 0; color: var(--muted); }
.inbox-next > .inbox-go { gap: .35em; color: inherit; }
.inbox-next > .inbox-go:hover, .inbox-next > .inbox-go:focus-visible { color: var(--fg); }
.inbox-next .inbox-next-n { font-weight: 700; color: var(--fg); }
.inbox-next > .inbox-go .sketch { width: 16px; height: 16px; }
@media (min-width: 861px) { .inbox-title > p.inbox-next { padding-left: 46px; } }
/* Decided on card Nr. 208 (switch in views/gutter-hover.mjs, on by default): who asks is a hand-drawn arrow
   from the session's row in the sidebar to the card under the pointer (controller "pointto"); the name under the
   drawing beside the card goes, the drawing stays. A phone is unchanged. */
.inbox-gutter.is-sidebar-arrow .inbox-gutter-name { display: none !important; }
.pointto-layer { position: fixed; inset: 0; z-index: 40; width: 100vw; height: 100vh; overflow: visible; pointer-events: none; fill: none; stroke-width: 2.2px; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 860px) { .pointto-layer { display: none; } }