/* Base
   Reset, type defaults, focus ring and layout utilities shared by every screen. */

*{box-sizing:border-box}
html,body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
body{background:var(--ground);color:var(--ink);font-family:var(--ui);font-size:14px;line-height:1.5;letter-spacing:-.005em}
h1,h2,h3,h4{margin:0;text-wrap:balance;letter-spacing:-.024em;font-weight:650}
button{font:inherit;color:inherit;letter-spacing:inherit}
input,select,textarea{font:inherit;color:var(--ink);letter-spacing:inherit}
:focus-visible{outline:none;box-shadow:0 0 0 3.5px var(--brand-glow);border-radius:var(--r-xs)}
.num{font-variant-numeric:tabular-nums}
[hidden]{display:none!important}
::selection{background:var(--brand-soft)}

/* layout utilities */
.panel{background:var(--surface);border:1px solid var(--hairline);border-radius:var(--r-lg);
  box-shadow:var(--sh-2),var(--rim);min-width:0}
.panel-pad{padding:20px}
.stack{display:flex;flex-direction:column;gap:20px;min-width:0}
.stack>*{min-width:0}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.eyebrow{font-size:10.5px;font-weight:650;letter-spacing:.09em;text-transform:uppercase;color:var(--faint)}
.hint{color:var(--muted);font-size:13px;max-width:66ch;line-height:1.55}
.divider{height:1px;background:var(--hairline)}
.spacer{flex:1}
.empty-state{padding:56px 20px;text-align:center;color:var(--muted)}
.empty-state h3{font-size:17px;color:var(--ink);margin-bottom:6px}

@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* small helpers used by the views */
.stack-sm{gap:10px}
.stack-xs{gap:8px}
.row-tight{gap:6px}
.row-fields{gap:16px;align-items:flex-end}
.grow{flex:1;min-width:0}
.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.centered{text-align:center}
.mono{font-family:ui-monospace,Menlo,monospace;font-size:11px}
.section-head{margin-bottom:12px}
.w-150{width:150px}.w-180{width:180px}.w-210{width:210px}.w-230{width:230px}.w-300{width:300px}
.is-good{color:var(--ok)}
.is-warn{color:var(--warn)}
.is-bad{color:var(--crit)}
.empty-state .hint{margin:0 auto}