/* ==========================================================================
   BASE — reset, typography, application shell
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg-app);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: var(--fw-regular);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "cv11" 1, "ss01" 1;
}

h1, h2, h3, h4, p, figure, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--brand); text-decoration: none; }
a:hover { color: var(--brand-hover); }

:focus-visible {
  outline: none;
  box-shadow: var(--sh-focus);
  border-radius: var(--r-sm);
}

/* ------------------------------------------------------------ typography */
.t-page     { font-family: var(--font-display); font-size: var(--fs-page);    line-height: var(--lh-page);    font-weight: var(--fw-black); letter-spacing: -.02em; }
.t-display  { font-family: var(--font-display); font-size: var(--fs-display); line-height: var(--lh-display); font-weight: var(--fw-black); letter-spacing: -.02em; }
.t-section  { font-family: var(--font-display); font-size: var(--fs-section); line-height: var(--lh-section); font-weight: var(--fw-black); letter-spacing: -.01em; }
.t-card     { font-family: var(--font-display); font-size: var(--fs-card); line-height: var(--lh-card); font-weight: var(--fw-bold); }
.t-body     { font-size: var(--fs-body);    line-height: var(--lh-body); }
.t-sm       { font-size: var(--fs-sm);      line-height: var(--lh-sm); }
.t-caption  { font-size: var(--fs-caption); line-height: var(--lh-caption); font-weight: var(--fw-medium); }
.t-micro    { font-size: var(--fs-micro);   line-height: var(--lh-micro);   font-weight: var(--fw-medium); }

.t-label {
  font-size: var(--fs-micro);
  line-height: var(--lh-micro);
  font-weight: var(--fw-black);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-muted);
}

.t-num {
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--tracking-num);
  font-feature-settings: "tnum" 1;
}

.t-muted     { color: var(--text-muted); }
.t-secondary { color: var(--text-secondary); }
.t-primary   { color: var(--text-primary); }
.t-brand     { color: var(--text-brand); }
.t-pos       { color: var(--positive); }
.t-neg       { color: var(--negative); }
.t-warn      { color: var(--warning); }
.t-semi      { font-weight: var(--fw-semi); }
.t-bold      { font-weight: var(--fw-bold); }
.t-right     { text-align: right; }
.t-center    { text-align: center; }
.t-truncate  { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* --------------------------------------------------------------- layout  */
.app {
  display: grid;
  grid-template-columns: var(--w-sidebar) minmax(0, 1fr);
  min-height: 100vh;
}
.app[data-sidebar="collapsed"] { grid-template-columns: var(--w-sidebar-collapsed) minmax(0, 1fr); }

.main { display: flex; flex-direction: column; min-width: 0; }

.page {
  padding: var(--page-pad-y) var(--page-pad-x) var(--sp-12);
  display: flex;
  flex-direction: column;
  gap: var(--section-gap);
  max-width: 1560px;
  width: 100%;
}

.page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-6); flex-wrap: wrap; }
.page-head__titles { display: flex; flex-direction: column; gap: var(--sp-2); min-width: 0; }
/* Section descriptions (owner copy 13.09) run to three sentences: cap the
   measure so the line stays readable instead of spanning the whole head. */
.page-head__titles > p { max-width: 72ch; }
.page-head__actions { display: flex; align-items: center; gap: var(--sp-2); }

/* view wrapper keeps the page rhythm inside itself: without this the sections
   of a view stack flush (the "glued cards" the owner circled, 24.08) */
.view { display: flex; flex-direction: column; gap: var(--section-gap); }
/* the hidden attribute must always win — .tree__row's display:grid used to
   override it and the overview tree painted all 106 rows expanded */
[hidden] { display: none !important; }

.section { display: flex; flex-direction: column; gap: var(--sp-4); }
.section-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); }

/* 12-column grid */
.grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--grid-gap); }
.col-2  { grid-column: span 2; }   .col-3  { grid-column: span 3; }
.col-4  { grid-column: span 4; }   .col-5  { grid-column: span 5; }
.col-6  { grid-column: span 6; }   .col-7  { grid-column: span 7; }
.col-8  { grid-column: span 8; }   .col-9  { grid-column: span 9; }
.col-12 { grid-column: span 12; }

.row  { display: flex; align-items: center; gap: var(--sp-3); }
.row-tight { display: flex; align-items: center; gap: var(--sp-2); }
.stack { display: flex; flex-direction: column; gap: var(--sp-2); }
/* A list container painted by script that holds several section-level
   blocks (a table card and the card under it). It spaces them the way .view
   spaces its own children, so a block inside it sits exactly as far from its
   neighbour as it would at the top level — an inline spacer div next to a
   flex gap used to add its height plus two gaps (Spy, 17.09.2026). */
.stack--section { gap: var(--section-gap); }
.spacer { flex: 1 1 auto; }

@media (max-width: 1280px) {
  .col-3 { grid-column: span 6; }
  .col-4 { grid-column: span 6; }
  .col-5, .col-7, .col-8, .col-9 { grid-column: span 12; }
}
@media (max-width: 860px) {
  :root { --page-pad-x: 16px; --grid-gap: 16px; --section-gap: 24px; }
  .app, .app[data-sidebar="collapsed"] { grid-template-columns: minmax(0, 1fr); }
  .col-2, .col-3, .col-4, .col-6 { grid-column: span 12; }
}

/* icons */
.i { width: 18px; height: 18px; flex: none; stroke-width: 1.75; }
.i-sm { width: 16px; height: 16px; flex: none; stroke-width: 1.75; }
.i-lg { width: 20px; height: 20px; flex: none; stroke-width: 1.75; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}