/* Shared page geometry. Keep existing utility classes during migration. */
/* Base elements */
body { background: var(--dz-surface); }
[hidden] { display: none !important; }
a { color: var(--dz-accent); text-underline-offset: 3px; }
a.rs-btn { text-decoration: none; }
a:focus-visible { outline: var(--dz-focus-width) solid var(--dz-focus); outline-offset: var(--dz-focus-offset); }
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
del { color: var(--dz-muted); }
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; }

/* The paper page keeps a clear margin above its title. */
.page { box-sizing: border-box; min-width: 0; width: 100%; max-width: 1800px; min-height: 100dvh; padding: calc(var(--dz-space-48) + var(--dz-space-24)) max(var(--dz-space-32), calc((100vw - 1320px) / 2)) calc(var(--dz-space-32) * 2); background: var(--dz-surface); }
.narrow { max-width: 480px; }
.measure { max-width: 66ch; }

/* One title, one metadata line, and one main action. */
.rs-header { align-items: center; border-bottom: 0; padding-bottom: 0; gap: var(--dz-space-24); margin-bottom: var(--dz-gutter-wide); }
.rs-header__body { min-width: 0; }
.rs-header__title { overflow-wrap: anywhere; }
.page-header__metadata { display: flex; flex-wrap: wrap; align-items: center; gap: var(--dz-space-4) var(--dz-space-12); margin-top: var(--dz-space-12); color: var(--dz-muted); }
.rs-header__id { white-space: normal; }
.page-header__metadata .rs-header__meta { font-size: var(--dz-type-metadata-size); line-height: var(--dz-type-metadata-leading); }
.rs-header__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--dz-space-8); color: inherit; }
.rs-header__actions { flex-wrap: wrap; max-width: 100%; }
.rs-header__meta .rs-btn { font-size: var(--dz-type-metadata-size); }
.page-header + .section { margin-top: 0; }
.panel { min-width: 0; }
.panel__head { margin-bottom: var(--dz-space-16); }
.panel__head > p { margin-top: var(--dz-space-4); }
.panel__body > * + * { margin-top: var(--dz-space-16); }
.ruled-list, .rows { border-top: var(--dz-stroke-hair) solid var(--dz-line); }
.ruled-row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--dz-space-12) var(--dz-space-24); padding: var(--dz-space-16) 0; border-bottom: var(--dz-stroke-hair) solid var(--dz-line); }
.ruled-row__body { flex: 1; min-width: 0; }
.ruled-row__actions { display: flex; align-items: center; flex-wrap: wrap; gap: var(--dz-space-8); }
.ruled-row__body > p { margin-top: var(--dz-space-4); }


/* 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(--dz-space-4) var(--dz-gutter-wide); margin-top: var(--dz-space-16); border-bottom: var(--dz-stroke-hair) solid var(--dz-line); }
.nav .rsx-tabs { border-bottom: 0; }
.nav__count { margin-left: var(--dz-space-4); color: var(--dz-muted); }

/* Sections */
.nav + .section, .rs-header + .section { margin-top: var(--dz-gutter-wide); }
.section { margin-top: var(--dz-gutter-wide); }
.page-header + .section { margin-top: 0; }
.section__head { margin-bottom: var(--dz-space-16); }
.section__lead { margin-bottom: var(--dz-space-16); color: var(--dz-muted); }
.state { margin-top: var(--dz-space-48); padding-top: var(--dz-space-16); border-top: var(--dz-stroke-hair) solid var(--dz-line); }

/* 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(--dz-space-24); 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(--dz-space-24); align-items: start; }
.split__main { grid-column: span 7; min-width: 0; }
.split__side { grid-column: span 5; min-width: 0; padding: var(--dz-space-16); background: var(--dz-soft); }
.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(--dz-space-24); 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(--dz-space-8); }
.narrow .form > .rs-field, .narrow .form > .f-6, .narrow .form > .f-8 { grid-column: 1 / -1; }

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

/* 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(--dz-muted); }

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

/* 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 (min-width: 761px) and (max-width: 1180px) {
  .page { padding: var(--dz-space-48) var(--dz-space-24); }
}
@media (max-width: 760px) {
  .page { padding: var(--dz-space-32) var(--dz-gutter-phone) var(--dz-space-48); min-height: calc(100dvh - 68px); }
  .rs-header { flex-wrap: wrap; align-items: flex-start; gap: var(--dz-space-16); margin-bottom: var(--dz-space-32); }
  .rs-header__body { flex-basis: 100%; }
  .ruled-row { align-items: flex-start; }
}
@media (max-width: 640px) {
  .rs-header { flex-wrap: wrap; gap: var(--dz-space-8) var(--dz-space-24); }
  .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(--dz-stroke-hair) solid var(--dz-line); }
  .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; }
  .facts { grid-template-columns: minmax(0, 1fr); }
  .filters .rs-field { min-width: 100%; }
}

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

/* Login keeps one column and no nested panel. */
.shell--bare .page { max-width: 560px; min-height: 100dvh; margin-inline: auto; padding: max(calc(var(--dz-space-32) * 2), 12vh) var(--dz-space-32) var(--dz-space-48); }
.login-form { padding-top: var(--dz-space-24); border-top: var(--dz-stroke-hair) solid var(--dz-line); }
.login-form .rs-field { align-items: stretch; }
.login-form > .row > .rs-btn { width: 100%; }
.login-reveal { justify-content: flex-end; }
.login-section { margin-top: var(--dz-gutter-wide); }
.error-recovery { padding-top: var(--dz-space-24); border-top: var(--dz-stroke-hair) solid var(--dz-line); }
@media (max-width: 760px) { .shell--bare .page { padding: var(--dz-space-48) var(--dz-gutter-phone); } }

.login-reveal { display: flex; }
.login-reveal[hidden], .login-reveal [hidden] { display: none; }