/* Spectre Design System — the instrument kit: every signed-in screen (dashboards,
   admin, tools). Copy this file verbatim next to tokens.css and load it after it;
   put your own screens in a third file, written on the tokens only, and check all
   three with lint.py. Do not edit the copy: change the kit in the skill.

   What is here: base type, the frame (1440, gutter), the top bar and the room
   strip, type roles, controls (buttons, fields, tabs), panels, readouts, messages,
   tags, tables, and the instruments — charts (stretched marks, HTML labels), the
   week lines, the range instrument, bars in rows, the mix bar, sparklines.
   Class names are the kit's API; the markup contract is in SKILL.md, "Instrument kit".
   Positions over a chart are integers in hundredths of a per cent: style="--x:4750". */

/* ---------------------------------------------------------------- base */
*, *::before, *::after { box-sizing: border-box; }
html { font-optical-sizing: auto; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { font-size: var(--fs-2); }
h1, h2, h3, h4 { margin: 0; color: var(--ink); line-height: var(--lh-head); font-weight: 400; text-wrap: balance; }
h1 { font-size: var(--fs-6); font-weight: 300; letter-spacing: -0.02em; }
h2 { font-size: var(--fs-4); }
h3 { font-size: var(--fs-3); font-weight: 500; }
h4 { font-size: var(--fs-2); font-weight: 500; }
p { margin: 0 0 var(--s-3); }
b, strong { font-weight: 500; }
small { font-size: var(--fs-1); }
ul, ol { margin: 0 0 var(--s-3); padding-left: var(--s-5); }
li { margin-bottom: var(--s-1); }
hr { border: 0; border-top: 1px solid var(--line); margin: var(--s-6) 0; }
code, kbd { font: inherit; background: var(--ground-2); padding: 0 var(--s-1); border-radius: var(--r-control); }
img, svg, embed { max-width: 100%; }
abbr { text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
::selection { background: var(--ink); color: var(--on-ink); }
* { scrollbar-color: var(--line-control) transparent; }
details > summary { cursor: pointer; list-style: none; }
details > summary::-webkit-details-marker { display: none; }
[hidden] { display: none; }
/* ---------------------------------------------------------------- frame */
.page { min-height: 100vh; }
/* The instrument frame. The shell puts every page inside one .frame; the two
   bars run full width and frame their own contents. Nothing inside frames again. */
.frame, .page > .wrap, .nav-inner, .room-inner { width: 100%; max-width: var(--frame-instrument); margin-inline: auto; padding-inline: var(--gutter); }
.frame .wrap { max-width: none; padding-inline: 0; }
.frame > .panel:first-of-type, .frame > .card:first-of-type { margin-top: var(--s-6); }
.wrap { padding-block: var(--s-6) var(--s-8); }
.wrap.flush-top { padding-block: 0 var(--s-6); }
.wrap.flush-bottom { padding-bottom: 0; }
/* the top bar: wordmark, rooms, status, three quiet controls */
.nav { position: relative; border-bottom: 1px solid var(--line); background: var(--ground); }
.nav-inner { display: flex; align-items: stretch; gap: var(--s-5); min-height: 56px; }
.nav-id { display: flex; align-items: center; gap: var(--s-3); white-space: nowrap; }
.mark { color: var(--ink); font-size: var(--fs-2); font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; }
.org { color: var(--text-2); }
.nav-links { display: flex; align-items: stretch; gap: var(--s-5); }
.nav-links a, .nav-menu-links a { display: flex; align-items: center; color: var(--text-2); text-decoration: none; white-space: nowrap; border-bottom: 2px solid transparent; transition: color var(--t-state) var(--ease); }
.nav-links a:hover, .nav-menu-links a:hover { color: var(--ink); }
.nav-links a.on { color: var(--ink); font-weight: 500; border-bottom-color: var(--ink); }
.nav .spacer { flex: 1; }
.nav-status { display: flex; align-items: center; gap: var(--s-2); font-size: var(--fs-1); color: var(--text-2); white-space: nowrap; }
.dot { flex: none; width: 6px; height: 6px; border-radius: 50%; }
.dot.live { background: var(--red); }
.dot.off { border: 1px solid var(--line-control); }
.nav .btn { align-self: center; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2); min-height: 44px; min-width: 44px; padding: 0 var(--s-2); border: 0; border-radius: var(--r-control); background: transparent; color: var(--text-2); font-size: var(--fs-2); text-decoration: none; cursor: pointer; transition: color var(--t-state) var(--ease); }
.btn:hover { color: var(--ink); }
.half { position: relative; display: block; width: 14px; height: 14px; border: 1px solid currentColor; border-radius: 50%; overflow: hidden; }
.half::before { content: ""; position: absolute; inset: 0 50% 0 0; background: currentColor; }
.nav-menu { display: none; }
.nav-many .nav-links { display: none; }
.nav-many .nav-menu { display: block; }
.nav-menu summary { display: flex; align-items: center; min-height: 56px; color: var(--ink); }
.nav-menu-links { position: absolute; z-index: 30; top: 100%; left: 0; right: 0; display: flex; flex-direction: column; padding: var(--s-2) var(--gutter) var(--s-4); background: var(--panel); border-bottom: 1px solid var(--line); box-shadow: var(--shadow-float); }
.nav-menu-links a { min-height: 44px; border-bottom: 1px solid var(--line); }
.nav-menu-links a.on { color: var(--ink); font-weight: 500; }
.nav-menu:not([open]) .nav-menu-links { display: none; }
/* the room strip: where you are inside a room */
.room { border-bottom: 1px solid var(--line); }
.room-inner { display: flex; gap: var(--s-5); overflow-x: auto; scrollbar-width: none; }
.room a { display: flex; align-items: center; min-height: 48px; color: var(--text-2); text-decoration: none; white-space: nowrap; border-bottom: 2px solid transparent; transition: color var(--t-state) var(--ease); }
.room a:hover { color: var(--ink); }
.room a.on { color: var(--ink); font-weight: 500; border-bottom-color: var(--red); }
/* ---------------------------------------------------------------- type roles */
.lead, h1.lead { margin: 0 0 var(--s-2); }
.sublead { font-size: var(--fs-3); color: var(--text-2); margin: 0 0 var(--s-6); max-width: 70ch; }
.hint, .sub, .muted, .help, .note { color: var(--text-2); }
.section-lead { color: var(--text-2); max-width: 70ch; }
.hint, .note, .help { max-width: 70ch; }
.tiny, .k-target, .src { font-size: var(--fs-1); color: var(--text-3); }
.eyebrow { display: block; color: var(--text-2); margin: 0 0 var(--s-2); }
.empty, .nodata, .empty-note { color: var(--text-3); padding: var(--s-4) 0; margin: 0; }
.money { white-space: nowrap; }
.cur { color: var(--text-3); }
.up, .down, .delta { color: var(--text-2); }
section + section { margin-top: var(--s-7); }
.wrap > h2, .frame > h2, .frame > section:not(.panel):not(.card) > h2 { margin: var(--s-7) 0 var(--s-3); }
/* ---------------------------------------------------------------- controls */
.button { display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2); min-height: 44px; padding: 0 var(--s-5); border: 1px solid var(--ink); border-radius: var(--r-control); background: transparent; color: var(--ink); font-size: var(--fs-2); font-weight: 500; line-height: 1.2; text-decoration: none; white-space: nowrap; cursor: pointer; transition: background-color var(--t-state) var(--ease), color var(--t-state) var(--ease); }
.button:hover { background: var(--ground-2); }
.button:active, .btn:active { transform: translateY(1px); }
.button.primary { background: var(--ink); border-color: var(--ink); color: var(--on-ink); }
.button.primary:hover { background: var(--ink-hover); border-color: var(--ink-hover); }
.button.ghost, .button.mini, .linkbtn, .button.quiet { min-height: 44px; padding: 0; border-color: transparent; background: transparent; color: var(--ink); font-weight: 400; text-decoration: underline; text-decoration-color: var(--line-control); text-underline-offset: 4px; }
.button.ghost:hover, .button.mini:hover, .linkbtn:hover, .button.quiet:hover { background: transparent; text-decoration-color: var(--ink); }
.button.secondary { border-color: var(--ink); }
.button.danger, .button.destructive { color: var(--danger); border-color: var(--danger); }
.button:disabled, .button[aria-disabled="true"] { color: var(--text-3); border-color: var(--line); background: transparent; cursor: not-allowed; }
.linkbtn { border: 0; cursor: pointer; }
.actions-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-5); margin-top: var(--s-4); }
.actions-end { justify-content: flex-end; }
.field { display: flex; flex-direction: column; gap: var(--s-1); margin-bottom: var(--s-4); max-width: 520px; }
.field > label, .field > span, .field > b { color: var(--text-2); font-weight: 400; }
input:where(:not([type="checkbox"], [type="radio"], [type="hidden"], [type="file"], [type="submit"], [type="range"])),
select, textarea { width: 100%; max-width: 100%; min-height: 44px; padding: 0 var(--s-3); border: 1px solid var(--line-control); border-radius: var(--r-control); background: var(--panel); color: var(--ink); font-size: var(--fs-2); transition: border-color var(--t-state) var(--ease); }
textarea { padding: var(--s-3); min-height: 96px; resize: vertical; line-height: var(--lh-body); }
input:hover, select:hover, textarea:hover { border-color: var(--ink); }
/* A field in use is edged in ink, not red: a red ring round an empty field reads as an error. */
input:focus-visible, select:focus-visible, textarea:focus-visible { outline-color: var(--ink); outline-offset: 0; }
input::placeholder, textarea::placeholder { color: var(--text-3); }
input:disabled, select:disabled, textarea:disabled { color: var(--text-3); border-color: var(--line); background: var(--ground-2); }
input[type="checkbox"], input[type="radio"] { width: 16px; height: 16px; margin: 0; accent-color: var(--ink); flex: none; }
input[type="file"] { max-width: 100%; color: var(--text-2); }
input[type="file"]::file-selector-button { min-height: 44px; margin-right: var(--s-3); padding: 0 var(--s-4); border: 1px solid var(--ink); border-radius: var(--r-control); background: transparent; color: var(--ink); font: inherit; cursor: pointer; }
input.mini { width: 120px; }
input.tiny { max-width: 96px; }
.grid-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0 var(--s-5); }
.grid-form .field { max-width: none; }
.inline-form { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); margin: var(--s-1) 0; }
.inline-form input { width: auto; }
.check-stack { display: grid; gap: var(--s-3); margin-top: var(--s-3); }
.check-stack label, label.check { display: flex; align-items: center; gap: var(--s-2); }
.switch { display: flex; gap: var(--s-3); align-items: flex-start; padding: var(--s-4); border: 1px solid var(--line); border-radius: var(--r-panel); background: var(--panel); }
.switch input { margin-top: 2px; }
.switch .txt b { display: block; margin-bottom: var(--s-1); }
/* ---------------------------------------------------------------- containers */
.panel, .card { min-width: 0; margin: 0 0 var(--s-5); padding: var(--s-5); background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-panel); }
.panel > h2, .card > h2 { margin: 0 0 var(--s-2); }
.card > h3, .panel > h3 { margin: 0 0 var(--s-1); }
.panel.soft, .card.soft { background: var(--ground-2); border-color: transparent; }
.panel-top { margin-bottom: 0; }
.grid-2 { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-5); align-items: start; margin-bottom: var(--s-5); }
.grid-2 > .card, .grid-2 > .panel { margin: 0; }
.card.wide { grid-column: 1 / -1; }
.panel > .hint, .card > .sub, .card > .hint { margin-bottom: var(--s-4); }
/* readouts: label, value, what it is against */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(176px, 1fr)); gap: var(--s-5) var(--s-6); margin: var(--s-5) 0 var(--s-7); padding-top: var(--s-4); border-top: 1px solid var(--line); }
.kpi { display: flex; flex-direction: column; min-width: 0; }
.k-label, .kpi .k { color: var(--text-2); }
.k-value, .kpi .v { margin: var(--s-2) 0; color: var(--ink); font-size: var(--fs-6); font-weight: 300; letter-spacing: -0.02em; line-height: var(--lh-data); white-space: nowrap; }
.k-foot { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-1) var(--s-2); font-size: var(--fs-1); color: var(--text-2); }
/* messages: a different object from a panel — a wash, no border, a word for the kind */
.banner { position: relative; display: flex; gap: var(--s-4); align-items: flex-start; margin: 0 0 var(--s-4); padding: var(--s-3) var(--s-7) var(--s-3) var(--s-4); background: var(--ground-2); border-radius: var(--r-panel); }
.banner .kind { flex: none; min-width: 80px; color: var(--text-2); }
.banner b { display: block; font-weight: 500; }
.banner.warn { background: var(--warn-wash); }
.banner.warn .kind { color: var(--warn); }
.banner.bad { background: var(--danger-wash); }
.banner.bad .kind { color: var(--danger); }
.banner.ok { background: var(--ok-wash); }
.banner.ok .kind { color: var(--ok); }
.banner .x { position: absolute; top: 0; right: 0; min-width: 44px; min-height: 44px; border: 0; background: transparent; color: var(--text-2); font-size: var(--fs-4); line-height: 1; cursor: pointer; }
.banner .x:hover { color: var(--ink); }
.banner-restore { border: 0; background: transparent; padding: 0; min-height: 44px; color: var(--text-2); text-decoration: underline; text-decoration-color: var(--line-control); text-underline-offset: 4px; cursor: pointer; }
.toast { position: fixed; left: 50%; bottom: var(--s-5); z-index: 50; display: none; max-width: 90vw; padding: var(--s-3) var(--s-4); transform: translateX(-50%); background: var(--ink); color: var(--on-ink); border-radius: var(--r-panel); }
/* tags: a word in a quiet box; coloured only when it is news */
.pill, .tag, .state { display: inline-flex; align-items: center; gap: var(--s-1); min-height: 20px; padding: 0 var(--s-2); border-radius: var(--r-control); background: var(--ground-2); color: var(--text-2); font-size: var(--fs-1); line-height: 1.5; white-space: nowrap; }
.pill.bad, .tag.bad, .pill.critical, .tag.critical, .state.failed, .state.blocked, .tag.failed { background: var(--danger-wash); color: var(--danger); }
.pill.warn, .tag.warn, .pill.serious, .tag.serious, .state.wait, .state.waiting { background: var(--warn-wash); color: var(--warn); }
.pill.ok, .tag.ok, .pill.good, .tag.good, .state.done, .tag.proven, .pill.proven { background: var(--ok-wash); color: var(--ok); }
.pill .ic, .tag .ic { font-style: normal; }
.empty-state { padding: var(--s-8) 0; text-align: center; color: var(--text-2); }
.empty-state .big, .big { font-size: var(--fs-4); color: var(--ink); margin-bottom: var(--s-2); }
.checklist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.checklist li { display: flex; gap: var(--s-3); align-items: flex-start; padding: var(--s-3) 0; border-bottom: 1px solid var(--line); margin: 0; }
.checklist li:last-child { border-bottom: 0; }
.checklist .mark { flex: none; width: 16px; }
.checklist .what { flex: 1; }
.checklist .why { display: block; margin-top: var(--s-1); }
.steps { margin: var(--s-3) 0 0; padding-left: var(--s-5); }
/* ---------------------------------------------------------------- tables */
.table-wrap, .scroll, .chart-scroll { overflow-x: auto; max-width: 100%; }
table { width: 100%; border-collapse: collapse; font-size: var(--fs-2); line-height: 1.45; }
th { padding: var(--s-2) var(--s-3); background: var(--ground-2); color: var(--text-2); font-size: var(--fs-1); font-weight: 400; text-align: left; vertical-align: bottom; white-space: nowrap; border-bottom: 1px solid var(--line); }
td { padding: var(--s-3); border-bottom: 1px solid var(--line); vertical-align: baseline; }
td.num, th.num, td.n, th.n { text-align: right; white-space: nowrap; }
tfoot td, tr.total td, tr.sum td { border-top: 1px solid var(--ink); border-bottom: 0; }
td.note { color: var(--text-2); }
/* ---------------------------------------------------------------- instruments */
/* Charts: marks in a stretched SVG with non-scaling strokes, labels in HTML, so
   a chart is crisp at 360 px and at 1440 px and its figures stay 12 px. */
.chart { position: relative; margin: var(--s-4) 0 0; min-width: 0; }
.chart .plot { position: relative; height: 200px; }
.chart.short .plot { height: 120px; }
.chart.tall .plot { height: 240px; }
.chart .plot > svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.chart svg * { vector-effect: non-scaling-stroke; }
.chart .grid { fill: none; stroke: var(--line); stroke-width: 1px; }
.chart .axis { fill: none; stroke: var(--line-control); stroke-width: 1px; }
.chart .line { fill: none; stroke: var(--ink); stroke-width: 1.5px; stroke-linejoin: round; stroke-linecap: round; }
.chart .line.ma { stroke: var(--text-3); stroke-width: 1px; stroke-dasharray: 4 4; }
.chart .area { fill: var(--ink); fill-opacity: 0.06; stroke: none; }
.chart svg .bar { fill: var(--text-3); }
.chart svg .bar.emphasis, .chart svg .bar.now, .chart svg .bar.positive { fill: var(--ink); }
.chart svg .bar.forecast { fill: none; stroke: var(--text-3); stroke-width: 1px; stroke-dasharray: 3 3; }
.chart svg .bar.negative { fill: var(--panel); stroke: var(--ink); stroke-width: 1px; }
.chart .dot { fill: none; stroke: var(--ink); stroke-width: 5px; stroke-linecap: round; }
.chart .dot.here { stroke: var(--red); stroke-width: 7px; }
.chart .dot.forecast { stroke: var(--text-3); }
.chart .hit { fill: none; stroke: transparent; stroke-width: 20px; stroke-linecap: round; pointer-events: stroke; }
.chart .templine { fill: none; stroke: var(--ink); stroke-width: 1px; }
.chart svg .precip { fill: var(--text-3); }
.chart .zero { fill: none; stroke: var(--ink); stroke-width: 1px; }
.chart .label { position: absolute; font-size: var(--fs-1); line-height: 1; white-space: nowrap; pointer-events: none; }
.chart .label.y { left: 0; top: calc(var(--y, 0) * .01%); color: var(--text-3); transform: translateY(calc(-100% - 4px)); }
.chart .label.y.below { transform: translateY(4px); }
.chart .label.end { right: 0; top: calc(var(--y, 0) * .01%); color: var(--ink); font-weight: 500; transform: translateY(calc(-100% - 10px)); }
.chart .label.band { left: 0; color: var(--text-3); }
.chart .xaxis { position: relative; height: 16px; margin-top: var(--s-2); }
.chart .xaxis .label { top: 0; left: calc(var(--x, 0) * .01%); color: var(--text-3); transform: translateX(-50%); }
.chart .xaxis .label.first { transform: none; }
.chart .xaxis .label.last { transform: translateX(-100%); }
.chart .strip { position: relative; height: 72px; margin-top: var(--s-4); border-top: 1px solid var(--line); }
.chart .strip > svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.chart-key, .legend { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); margin: var(--s-3) 0 0; padding: 0; list-style: none; font-size: var(--fs-1); color: var(--text-2); }
.chart-key span, .legend li { display: inline-flex; align-items: center; gap: var(--s-2); margin: 0; }
.legend b { font-weight: 400; color: var(--ink); }
.key, .swatch { display: inline-block; flex: none; width: 10px; height: 10px; }
.swatch { height: 2px; width: 16px; background: var(--ink); }
.swatch.ma { background: var(--text-3); }
.swatch.rev { width: 10px; height: 10px; background: var(--text-3); }
.swatch.fc { width: 10px; height: 10px; border: 1px dashed var(--text-3); }
.swatch.rain { width: 4px; height: 10px; background: var(--text-3); }
.series-1 { background: var(--ink); }
.series-2 { background: var(--text-2); }
.series-3 { background: var(--text-3); }
.series-4 { background: var(--line-control); }
.series-5 { background: var(--line); }
.series-6 { background: var(--ground-2); }
/* week lines: one line per weekday over its hours, every day on one scale (the
   strongest hour rises 0.85 of a row, so days never cross); each day's strongest
   hour an ink dot, the week's strongest red. The week is never a grid of dots. */
.ridge { --pitch: 34px; }
.ridge .plot { height: calc(var(--rows, 7) * var(--pitch)); }
.ridge .dot.peak { stroke: var(--red); stroke-width: 7px; }
.chart-note { margin-top: var(--s-3); color: var(--text-2); font-size: var(--fs-1); }
.ridge .label.row { left: 0; top: calc(var(--y, 0) * .01%); color: var(--text-3); transform: translateY(calc(-100% - 3px)); }
.ridge .plot > svg { left: 40px; width: calc(100% - 40px); }
.ridge .xaxis { margin-left: 40px; }
.seq-0 { background: var(--ground-2); }
.seq-1 { background: color-mix(in oklch, var(--ink) 10%, var(--panel)); }
.seq-2 { background: color-mix(in oklch, var(--ink) 22%, var(--panel)); }
.seq-3 { background: color-mix(in oklch, var(--ink) 34%, var(--panel)); }
.seq-4 { background: color-mix(in oklch, var(--ink) 48%, var(--panel)); }
.seq-5 { background: color-mix(in oklch, var(--ink) 62%, var(--panel)); }
.seq-6 { background: color-mix(in oklch, var(--ink) 80%, var(--panel)); }
.seq-7 { background: var(--ink); }
/* small multiples and bars in rows */
svg.spark { display: inline-block; width: 104px; height: 28px; vertical-align: middle; overflow: visible; }
svg.spark .line { fill: none; stroke: var(--text-2); stroke-width: 1px; }
svg.spark .tip { fill: var(--ink); }
.hbar { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; align-items: center; gap: var(--s-3); padding: var(--s-1) 0; font-size: var(--fs-1); }
.hbar .t { color: var(--text-2); }
.hbar .track { height: 4px; background: var(--line); }
.hbar .b { display: block; height: 4px; min-width: 2px; background: var(--ink); }
.hbar .v { text-align: right; color: var(--text-2); white-space: nowrap; }
.range { position: relative; height: 24px; margin: var(--s-3) 0 var(--s-1); border-bottom: 1px solid var(--line); }
.range .span { position: absolute; bottom: 0; left: calc(var(--x, 0) * .01%); width: calc(var(--w, 0) * .01%); height: 4px; background: var(--text-3); }
.range .needle { position: absolute; bottom: 0; left: calc(var(--x, 0) * .01%); width: 2px; height: 16px; margin-left: -1px; background: var(--ink); }
.range-ends { display: flex; justify-content: space-between; font-size: var(--fs-1); color: var(--text-3); }
/* ---------------------------------------------------------------- widths */
@media (min-width: 600px) {
  .grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 899px) {
  .nav-links { display: none; }
  .nav-menu { display: block; }
}
@media (max-width: 599px) {
  body { font-size: var(--fs-2); }
  .nav-inner { flex-wrap: wrap; gap: 0 var(--s-3); }
  .nav-id .org { display: none; }
  .nav .spacer { display: none; }
  .nav-status { order: 10; flex-basis: 100%; min-height: 32px; white-space: normal; }
  .nav .btn { margin-left: auto; }
  .nav .btn ~ .btn { margin-left: 0; }
  .wrap { padding-block: var(--s-5) var(--s-7); }
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4); }
  .chart .plot { height: 160px; }
  .ridge { --pitch: 26px; }
  .actions-row .button:not(.ghost):not(.mini) { flex: 1 1 auto; }
  .banner { flex-direction: column; gap: var(--s-1); }
  table.grid.stack, table.grid.stack tbody, table.grid.stack tr, table.grid.stack td { display: block; width: 100%; }
  table.grid.stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  table.grid.stack tr { padding: var(--s-3) 0; border-bottom: 1px solid var(--line); }
  table.grid.stack td { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-3); min-width: 0; padding: var(--s-1) 0; border: 0; text-align: right; overflow-wrap: anywhere; }
  table.grid.stack td::before { content: attr(data-label); flex: 0 1 auto; min-width: 0; color: var(--text-2); text-align: left; white-space: nowrap; }
  table.grid.stack td:first-child { display: block; padding-bottom: var(--s-2); text-align: left; font-weight: 500; }
  table.grid.stack td:first-child::before, table.grid.stack td.setcell::before { content: none; }
  table.grid.stack td.setcell { display: block; text-align: left; padding-top: var(--s-2); }
  table.grid.stack td.setcell .inline-form input { flex: 1 1 auto; width: auto; min-width: 0; }
  table.grid.stack td.setcell input.mini { min-height: 44px; }
  table.grid.stack td.setcell .button.mini { min-height: 44px; min-width: 44px; padding: 0 var(--s-3); }
}
.doc .head .org { color: var(--text-2); font-size: 9pt; }
/* ---------------------------------------------------------------- print */
@media print {
  .nav, .room, .banner .x, .banner-restore { display: none; }
  .frame, .wrap { max-width: none; padding: 0; }
}