/* skh-components.css — the shared look of the things every page is made of.

   Loads after skh-tokens.css and before skh-polish.css. It sets colour, type, border, radius,
   depth and state on the class names the pages already use (card, pill, chip, f, btn, empty,
   table, header). It never sets display, width, padding or margin on a layout element, so no
   page moves; it only starts looking like the others. Layout stays each page's own until that
   page's review batch. */

/* ---------------------------------------------------------------- chrome: the header on every page */
body>header,#skh-main>header,#skh-chrome-bar,.topbar{background:var(--surface);color:var(--ink);border-bottom:1px solid var(--line)}
body>header h1,#skh-main>header h1,.topbar h1{color:var(--ink);font-weight:700;letter-spacing:-.01em}
body>header a,#skh-main>header a,.topbar a,nav.main a{color:var(--text-muted);text-decoration:none;border-radius:var(--r-sm);transition:color var(--t-fast) var(--ease-out),background-color var(--t-fast) var(--ease-out)}
@media (hover:hover) and (pointer:fine){body>header a:hover,#skh-main>header a:hover,.topbar a:hover,nav.main a:hover{color:var(--ink);background:var(--surface2)}}
body>header a[aria-current="page"],#skh-main>header a[aria-current="page"],.topbar a[aria-current="page"],nav.main a[aria-current="page"],body>header a.on,#skh-main>header a.on,.topbar a.on{color:var(--brand)}

/* ---------------------------------------------------------------- the pricing pages' inline nav row */
nav[aria-label="Portal"] a{color:var(--text-muted);text-decoration:none;padding:6px 10px;border-radius:var(--r-sm);transition:color var(--t-fast) var(--ease-out),background-color var(--t-fast) var(--ease-out)}
@media (hover:hover) and (pointer:fine){nav[aria-label="Portal"] a:hover{color:var(--ink);background:var(--surface2)}}
nav[aria-label="Portal"] a[aria-current="page"]{color:var(--brand);background:var(--brand-soft)}

/* ---------------------------------------------------------------- surfaces */
.card,.panel,.tile,.box,.skh-card{background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-1);transition:box-shadow var(--t-base) var(--ease-out),border-color var(--t-base) var(--ease-out)}
@media (hover:hover) and (pointer:fine){.card:hover,.tile:hover{box-shadow:var(--shadow-2)}}
.card h2,.panel h2,.card h3,.panel h3{color:var(--ink);font-weight:600;letter-spacing:-.005em}
.card .sub,.card .meta,.panel .meta,.sub,.hint{color:var(--text-muted)}
.big{font-weight:600;letter-spacing:-.02em;color:var(--ink)}
.big.warn{color:var(--warn)}.big.crit,.big.bad{color:var(--crit)}.big.ok{color:var(--ok)}
hr,.divider{border:0;border-top:1px solid var(--line)}

/* ---------------------------------------------------------------- tables: dense, aligned, calm */
table{border-collapse:collapse;color:var(--ink)}
thead th,th{font-family:var(--font);font-weight:600;font-size:var(--fs-xs);letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted);text-align:left;border-bottom:1px solid var(--line)}
td{border-bottom:1px solid var(--line);vertical-align:middle}
tbody tr{transition:background-color var(--t-fast) var(--ease-out)}
@media (hover:hover) and (pointer:fine){tbody tr:hover{background:var(--surface2)}}
td.num,th.num,td.r,th.r,.num{text-align:right;font-variant-numeric:tabular-nums}
tbody tr:last-child td{border-bottom:0}

/* ---------------------------------------------------------------- pills, chips, filters, status */
.pill,.chip,.badge,span.tag,button.f,a.f,.filters .f{font-family:var(--font);font-weight:600;font-size:var(--fs-xs);letter-spacing:.02em;line-height:1;border-radius:var(--r-pill);background:var(--surface2);color:var(--ink);border:1px solid transparent;white-space:nowrap}
button.f,a.f,.filters .f{cursor:pointer;transition:background-color var(--t-fast) var(--ease-out),color var(--t-fast) var(--ease-out),border-color var(--t-fast) var(--ease-out)}
@media (hover:hover) and (pointer:fine){button.f:hover,a.f:hover,.filters .f:hover{border-color:var(--line-2)}}
button.f.on,a.f.on,.filters .f.on,.pill.on,.chip.on{background:var(--brand);color:var(--brand-ink);border-color:var(--brand)}
.pill.ok,.badge.ok,.chip.ok,.st.ok{background:var(--ok-bg);color:var(--ok)}
.pill.warn,.badge.warn,.chip.warn,.st.warn{background:var(--warn-bg);color:var(--warn)}
.pill.crit,.pill.bad,.badge.crit,.chip.crit,.st.crit,.st.bad{background:var(--crit-bg);color:var(--crit)}
.pill.late{background:var(--crit-bg);color:var(--crit)}
.dot{border-radius:var(--r-pill)}

/* ---------------------------------------------------------------- buttons */
.btn,.sk-btn,button.primary,.addbtn,.wn-btn{font-family:var(--font);font-weight:600;font-size:var(--fs-md);letter-spacing:.01em;color:var(--brand-ink);background:var(--brand);border:1px solid var(--brand);border-radius:var(--r-md);cursor:pointer;box-shadow:var(--shadow-1);transition:background-color var(--t-fast) var(--ease-out),border-color var(--t-fast) var(--ease-out),box-shadow var(--t-fast) var(--ease-out),transform var(--press,120ms) var(--ease-out)}
@media (hover:hover) and (pointer:fine){.btn:hover,.sk-btn:hover,button.primary:hover,.addbtn:hover,.wn-btn:hover{background:var(--brand-2);border-color:var(--brand-2);box-shadow:var(--shadow-2)}}
.btn.ghost,.sk-btn.ghost,.btn.secondary,.linklike-btn{background:var(--surface);color:var(--brand);border-color:var(--line-2);box-shadow:none}
@media (hover:hover) and (pointer:fine){.btn.ghost:hover,.sk-btn.ghost:hover,.btn.secondary:hover{background:var(--surface2);border-color:var(--brand)}}
.btn:disabled,.sk-btn:disabled,button.primary:disabled{opacity:.55;cursor:not-allowed;box-shadow:none}
.linklike{color:var(--brand);background:none;border:0;font:inherit;cursor:pointer;text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--line-2)}
@media (hover:hover) and (pointer:fine){.linklike:hover{text-decoration-color:var(--brand)}}
a{color:var(--brand);text-underline-offset:3px}
@media (hover:hover) and (pointer:fine){a:hover{color:var(--brand-2)}}

/* ---------------------------------------------------------------- inputs */
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),select,textarea{font-family:var(--font);font-size:var(--fs-base);color:var(--ink);background:var(--surface);border:1px solid var(--line-2);border-radius:var(--r-md);transition:border-color var(--t-fast) var(--ease-out),box-shadow var(--t-fast) var(--ease-out)}
@media (hover:hover) and (pointer:fine){input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):hover,select:hover,textarea:hover{border-color:var(--muted-2)}}
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):focus,select:focus,textarea:focus{outline:none;border-color:var(--brand);box-shadow:var(--focus-ring)}
input::placeholder,textarea::placeholder{color:var(--muted-2)}
label{color:var(--text-muted);font-weight:600;font-size:var(--fs-sm)}

/* ---------------------------------------------------------------- focus: one ring, follows the shape */
:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.btn:focus-visible,.sk-btn:focus-visible,.addbtn:focus-visible,.f:focus-visible{outline-offset:3px}

/* ---------------------------------------------------------------- states: honest, quiet, consistent */
.empty{color:var(--text-muted);font-size:var(--fs-md)}
.empty a,.empty .linklike{color:var(--brand)}
.skh-notice{display:block;font-size:var(--fs-sm);line-height:var(--lh);color:var(--ink);background:var(--surface2);border:1px solid var(--line);border-left:3px solid var(--muted-2);border-radius:var(--r-md);padding:10px 12px;margin:0 0 12px}
.skh-notice.stale{border-left-color:var(--warn);background:var(--warn-bg)}
.skh-notice.failed{border-left-color:var(--crit);background:var(--crit-bg)}
.skh-notice.expired{border-left-color:var(--brand);background:var(--brand-soft)}
.skh-notice b{font-weight:600}
.skh-notice a,.skh-notice .linklike{margin-left:2px}
.skh-notice button.linklike{font:inherit;font-weight:600;padding:6px 10px;min-height:36px;border-radius:var(--r-sm);text-decoration:none;background:var(--surface);border:1px solid var(--line-2)}
.skeleton{position:relative;overflow:hidden;background:var(--surface2);border-radius:var(--r-sm);color:transparent!important;min-height:1em}
.skeleton::after{content:"";position:absolute;inset:0;transform:translateX(-100%);background:linear-gradient(90deg,transparent,rgba(255,255,255,.35),transparent);animation:skh-shimmer 1.4s infinite}
@keyframes skh-shimmer{to{transform:translateX(100%)}}
.stale-values{opacity:.6;filter:grayscale(.3)}
.skh-toast{font-family:var(--font);background:var(--ink);color:var(--surface);border-radius:var(--r-md);box-shadow:var(--shadow-3)}

/* ---------------------------------------------------------------- footers and freshness lines */
.foot,footer,.freshness{font-family:var(--font);color:var(--text-muted);font-size:var(--fs-sm)}

/* ---------------------------------------------------------------- dark scheme details tokens cannot express */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .skeleton::after{background:linear-gradient(90deg,transparent,rgba(255,255,255,.08),transparent)}
  :root:not([data-theme="light"]) .skh-toast{background:var(--surface2);color:var(--ink)}
}
:root[data-theme="dark"] .skeleton::after{background:linear-gradient(90deg,transparent,rgba(255,255,255,.08),transparent)}
:root[data-theme="dark"] .skh-toast{background:var(--surface2);color:var(--ink)}

@media (prefers-reduced-motion:reduce){
  body>header a,#skh-main>header a,.topbar a,nav.main a,nav[aria-label="Portal"] a,
  .card,.panel,.tile,.box,.skh-card,tbody tr,
  button.f,a.f,.filters .f,.btn,.sk-btn,button.primary,.addbtn,.wn-btn,
  input,select,textarea,
  .card::before,.card::after,.tile::before,.tile::after,.skeleton::before,.skeleton::after{transition:none!important;animation:none!important}
  .skeleton::after{animation:none!important}
}
@media print{
  .card,.panel{box-shadow:none;border-color:#ccc}
  a{color:inherit;text-decoration:none}
}