/* =========================================================
   dash-base.css: the page itself. Reset, type, links, focus, the layout primitives
   (page, sections, grids, toolbars, stacks) and the few utility classes components and
   pages share (.muted, .mono, .num, .nowrap, .truncate, .small). Colours come from tokens.css.
   ========================================================= */

*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;}
body{margin:0;background:var(--page);color:var(--ink);font-family:var(--font-body);font-size:var(--fs-md);line-height:1.5;
  -webkit-font-smoothing:antialiased;font-variant-numeric:tabular-nums;}
h1,h2,h3,h4{margin:0;font-weight:600;line-height:var(--mm-line-height-snug);}
p{margin:0 0 var(--sp-2);}
p:last-child{margin-bottom:0;}
a{color:var(--link);text-decoration:none;}
a:hover{color:var(--link-hover);text-decoration:underline;}
code,kbd,pre,samp{font-family:var(--font-mono);font-size:0.92em;}
code{background:var(--soft);border-radius:var(--r-xs);padding:1px 5px;color:var(--ink);}
kbd{display:inline-block;min-width:20px;padding:1px 6px;border:1px solid var(--line);border-bottom-width:2px;border-radius:var(--r-sm);
  background:var(--surface);font-size:var(--fs-xs);text-align:center;color:var(--ink-2);}
hr{border:0;border-top:1px solid var(--line);margin:var(--sp-4) 0;}
img,svg{vertical-align:middle;}
button,input,textarea,select{font:inherit;color:inherit;}
:focus-visible{outline:2px solid var(--mm-border-focus);outline-offset:2px;}
::selection{background:var(--selected);}
[hidden]{display:none !important;}

/* ---- Utilities (shared by components and pages; never a colour of their own) ---- */
.muted{color:var(--muted);}
.ink-2{color:var(--ink-2);}
.small{font-size:var(--fs-sm);}
.xsmall{font-size:var(--fs-xs);}
.mono{font-family:var(--font-mono);font-size:0.92em;}
.num{text-align:right;font-variant-numeric:tabular-nums;}
.nowrap{white-space:nowrap;}
.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;}
.strong{font-weight:600;}
.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;}
.eyebrow{font-family:var(--font-label);font-weight:600;font-size:var(--fs-xs);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--muted);}

/* ---- Page frame (PageShell) ---- */
.page{max-width:var(--maxw);margin:0 auto;padding:var(--sp-6) var(--sp-6) var(--sp-12);}
.page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--sp-4);flex-wrap:wrap;margin-bottom:var(--sp-5);}
.page-head .page-title{display:flex;align-items:center;gap:var(--sp-3);min-width:0;}
.page-head h1{font-family:var(--font-display);font-style:italic;font-weight:800;font-size:var(--fs-3xl);line-height:1.05;
  letter-spacing:0.005em;text-transform:uppercase;color:var(--ink);}
.page-head h1:focus{outline:none;}
.page-head .page-sub{margin-top:var(--sp-1);color:var(--ink-2);font-size:var(--fs-md);}
.page-head .page-kicker{margin-bottom:var(--sp-1);}
.page-head .page-actions{display:flex;align-items:center;gap:var(--sp-2);flex-wrap:wrap;}

/* ---- Sections (Section, SectionHead) ---- */
.section{margin-top:var(--sp-6);}
.section:first-child{margin-top:0;}
.section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--sp-3);flex-wrap:wrap;margin-bottom:var(--sp-3);}
.section-head h2{font-family:var(--font-display);font-style:italic;font-weight:800;font-size:var(--fs-xl);text-transform:uppercase;letter-spacing:0.01em;}
.section-head .section-sub{margin:2px 0 0;color:var(--muted);font-size:var(--fs-sm);}
.section-head .acts{display:flex;gap:var(--sp-2);align-items:center;flex-wrap:wrap;}

/* ---- Grid (Grid Columns=N): equal columns that collapse on narrow screens ---- */
.grid{display:grid;gap:var(--sp-4);}
.grid-cols-1{grid-template-columns:minmax(0,1fr);}
.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr));}
.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr));}
.grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr));}
.grid-2-1{grid-template-columns:minmax(0,2fr) minmax(300px,1fr);}
.grid.align-start{align-items:start;}
.grid + .grid,.grid + .panel,.panel + .grid,.panel + .panel,.stats + .grid,.stats + .panel,.grid + .stats{margin-top:var(--sp-4);}
.grid > .panel,.grid > .stats,.grid > .grid,.grid > .stack,.grid > .section,.stack > .panel,.stack > .grid,.stack > .stats,.stack > .notice{margin-top:0;margin-bottom:0;}
@media (max-width:1180px){.grid-cols-4{grid-template-columns:repeat(2,minmax(0,1fr));}.grid-cols-3{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media (max-width:860px){.grid-cols-2,.grid-cols-3,.grid-cols-4,.grid-2-1{grid-template-columns:minmax(0,1fr);}}

/* ---- Stack (Stack Gap=N): vertical rhythm inside a panel ---- */
.stack{display:flex;flex-direction:column;gap:var(--sp-4);min-width:0;}
.stack.gap-1{gap:var(--sp-1);} .stack.gap-2{gap:var(--sp-2);} .stack.gap-3{gap:var(--sp-3);} .stack.gap-6{gap:var(--sp-6);}
.stack.row{flex-direction:row;flex-wrap:wrap;align-items:center;}

/* ---- Toolbar: filters on the left, actions on the right, wraps ---- */
.toolbar{display:flex;align-items:center;gap:var(--sp-2);flex-wrap:wrap;min-width:0;}
.toolbar > .grow{flex:1 1 auto;}
.toolbar.align-end{align-items:flex-end;}
.toolbar.boxed{padding:var(--sp-3) var(--sp-4);border-bottom:1px solid var(--line);}
.toolbar-label{font-size:var(--fs-sm);color:var(--muted);}
.page-head + .toolbar,.toolbar + .panel,.toolbar + .grid,.toolbar + .stats{margin-top:0;}
.page > .toolbar{margin-bottom:var(--sp-4);}

@media (max-width:720px){
  .page{padding:var(--sp-4) var(--sp-4) var(--sp-10);}
  .page-head h1{font-size:var(--fs-2xl);}
}

@media print{
  .rail,.topbar,.devbar,.toast-wrap{display:none !important;}
  .shell{margin-left:0 !important;}
  body{background:var(--surface);}
}