/* layout.css: page layout for all wireframes. Colour, type and components come from raster.css and ext.css.
   Every value is a Raster token. Heavy rules (--stroke-rule) stay in raster.css: under the PageHeader,
   under table heads, over a total row (decision G6). Here, lines are hairlines.
   A group of screens may add its own layout-<group>.css after this file. */

/* Base elements */
a { color: var(--ink); text-underline-offset: 3px; }
a.rs-btn { text-decoration: none; }
a:focus-visible { outline: var(--stroke-rule) solid var(--ink); outline-offset: 2px; }
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
del { color: var(--ink-2); }
ins { text-decoration: underline; text-underline-offset: 3px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Page: flush left, never centred */
.page { box-sizing: border-box; max-width: 1280px; padding: var(--space-4) var(--space-5) var(--space-6); }
.narrow { max-width: 480px; }
.measure { max-width: 66ch; }

/* Navigation (G3): one text row under the PageHeader, two groups, the current page marked.
   The tabs themselves are .rsx-tabs / .rsx-tab from ext.css. */
.nav { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-1) var(--space-5); margin-top: var(--space-3); border-bottom: var(--stroke-hair) solid var(--rule); }
.nav .rsx-tabs { border-bottom: 0; }
.nav__count { margin-left: var(--space-1); color: var(--ink-2); }

/* Sections */
.nav + .section, .rs-header + .section { margin-top: var(--space-5); }
.section { margin-top: var(--space-5); }
.section__head { margin-bottom: var(--space-3); }
.section__lead { margin-bottom: var(--space-3); color: var(--ink-2); }
.state { margin-top: var(--space-6); padding-top: var(--space-3); border-top: var(--stroke-hair) solid var(--rule); }

/* Grid: 12 columns, gutter --space-4. Children take .c-1 to .c-12. */
.grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--space-4); align-items: start; }
.c-1 { grid-column: span 1; }
.c-2 { grid-column: span 2; }
.c-3 { grid-column: span 3; }
.c-4 { grid-column: span 4; }
.c-5 { grid-column: span 5; }
.c-6 { grid-column: span 6; }
.c-7 { grid-column: span 7; }
.c-8 { grid-column: span 8; }
.c-9 { grid-column: span 9; }
.c-10 { grid-column: span 10; }
.c-11 { grid-column: span 11; }
.c-12 { grid-column: 1 / -1; }

/* Two regions: main (7/12) and a side panel in --paper-2 (5/12). Modifier --8-4 gives 8/12 and 4/12.
   The side panel is a ground, not a card: no line, no shadow. For S6 and S4. */
.split { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--space-4); align-items: start; }
.split__main { grid-column: span 7; min-width: 0; }
.split__side { grid-column: span 5; min-width: 0; padding: var(--space-3); background: var(--paper-2); }
.split--8-4 > .split__main { grid-column: span 8; }
.split--8-4 > .split__side { grid-column: span 4; }

/* Form grid: fields take 4 columns; .f-6, .f-8, .f-12 widen one */
.form { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--space-4); align-items: start; }
.form > .rs-field { grid-column: span 4; }
.form > .f-6 { grid-column: span 6; }
.form > .f-8 { grid-column: span 8; }
.form > .f-12, .form > .form__wide { grid-column: 1 / -1; }
.form__actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: var(--space-2); }
.narrow .form > .rs-field, .narrow .form > .f-6, .narrow .form > .f-8 { grid-column: 1 / -1; }

/* Stacks and rows */
.stack > * + * { margin-top: var(--space-3); }
.stack-1 > * + * { margin-top: var(--space-1); }
.stack-2 > * + * { margin-top: var(--space-2); }
.stack-4 > * + * { margin-top: var(--space-4); }
.row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.row--end { align-items: flex-end; }
.row--gap { gap: var(--space-2) var(--space-4); }
.filters { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-3); margin-bottom: var(--space-4); }
.filters .rs-field { min-width: 180px; }
.divider { padding-top: var(--space-3); border-top: var(--stroke-hair) solid var(--rule); }

/* Tables. Put .hide-s on the head cell AND on every cell of the same column: they hide together at 640 px.
   .scroll wraps a table that must not break the page; .nw keeps one line; .trunc cuts a long value with CSS. */
.scroll { overflow-x: auto; }
.rs-table td.nw, .rs-table td.rs-idx { white-space: nowrap; }
.trunc { display: inline-block; max-width: 24ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }
.rs-table td a { overflow-wrap: anywhere; }
.sub { display: block; color: var(--ink-2); }

/* Ruled lists with an index column, and definition rows */
.rows { border-top: var(--stroke-hair) solid var(--ink); }
.rows > li { padding: var(--space-3) 0; border-bottom: var(--stroke-hair) solid var(--rule); }
.rows > li[aria-current] { background: var(--paper-2); }
.item { display: grid; grid-template-columns: var(--space-5) minmax(0, 1fr); gap: var(--space-3); }
.item__idx { color: var(--ink-2); white-space: nowrap; }
.item__act { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2); }
.facts { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 4fr); gap: var(--space-1) var(--space-3); }
.facts dt { color: var(--ink-2); }

/* Hooks: extension classes that need a width rule inside grids (see ext.css) */
.rsx-tabs, .rsx-tab, .rsx-tabset, .rsx-tabradio, .rsx-panels, .rsx-panel, .rsx-check, .rsx-checks, .rsx-disclosure { box-sizing: border-box; }

@media (max-width: 900px) {
  .grid > *, .split > .split__main, .split > .split__side { grid-column: 1 / -1; }
  .split--8-4 > .split__main, .split--8-4 > .split__side { grid-column: 1 / -1; }
}

@media (max-width: 640px) {
  .page { padding: var(--space-3) var(--space-3) var(--space-5); }
  .rs-header { flex-wrap: wrap; gap: var(--space-2) var(--space-4); }
  .rs-header__body { flex-basis: 100%; }
  .rs-header__actions { flex-wrap: wrap; max-width: 100%; }
  .nav { flex-direction: column; align-items: flex-start; gap: 0; }
  .rs-metrics { flex-direction: column; }
  .rs-metric { border-left: 0; padding-left: 0; border-top: var(--stroke-hair) solid var(--rule); }
  .rs-metric:first-child { border-top: 0; }
  .rs-table .hide-s { display: none; }
  .rs-table td { white-space: normal; }
  .rs-table td.rs-num, .rs-table td.nw { white-space: nowrap; }
  .form > .rs-field, .form > .f-6, .form > .f-8 { grid-column: 1 / -1; }
  .path thead { display: none; }
  .path tr, .path td { display: block; }
  .path td.rs-idx { display: inline-block; }
  .path tr { padding: var(--space-2) 0; border-top: var(--stroke-hair) solid var(--rule); }
  .facts { grid-template-columns: minmax(0, 1fr); }
  .filters .rs-field { min-width: 100%; }
}

@media print {
  .nav { display: none; }
  .split__side { background: none; }
}