/* ============================================================================
   SIP Toolkit Suite — post-tool style normalizer (v5.0.2)

   Loaded AFTER each page's own <style> block (see base.html), so it wins
   ties against the historical per-tool CSS. Purpose: one clean, modern
   typography and control language across every app WITHOUT touching the
   tools' layout or data styling.

   Monospace stays where it belongs — protocol data: ladders, raw SIP,
   tables of ids, textareas, code. Interface text (headings, buttons,
   labels, pills, tabs) is the shared sans stack.
   ========================================================================== */

/* --- headings: humanist sans, tighter, no letterspaced all-caps titles */
h1,h2,h3,
header h1,header h2,
.panel h2,.panel h3,
.logo-text,.section-title{
  font-family:var(--sans);
  letter-spacing:-.01em;
  font-weight:600;
}
header h1{font-size:16px}

/* the old two-tone/tri-color title spans read as one color now */
header h1 span,h1 .in,h1 .out,h1 .rx,h1 .tx,.logo-text span{color:inherit}

/* small section headers inside panels: quiet caps, sans */
.panel h2{font-size:12px;font-weight:600;letter-spacing:.05em;
          text-transform:uppercase;color:var(--ink-dim)}

/* --- controls: sans + pill buttons, softer inputs.
       One button spec everywhere: same font, size, padding, radius —
       an Analyze button looks identical on every app. Small icon buttons
       keep their own class-level sizing (classes beat this element rule). */
button,.btn,.chip,.tab{font-family:var(--sans)}
button{border-radius:999px;font-size:13.5px;font-weight:600;
       letter-spacing:0;padding:9px 18px;text-transform:none}
.reveal-btn,.drawer-close,.help-close{border-radius:8px}
input[type=text],input[type=password],input[type=email],input[type=number],
input[type=date],input[type=datetime-local],select{
  font-family:var(--sans);border-radius:8px}

/* --- labels / meta text: sans, regular case */
label,.fld>span,.fld-lbl,th,.stat .l{font-family:var(--sans)}

/* --- pills & badges: sans */
.pill,.header-badge,.tag{font-family:var(--sans);font-weight:600}

/* --- links: never the old underlineless cyan-on-everything */
a{text-decoration:none}
a:hover{text-decoration:underline}

/* --- focus ring: one consistent accent */
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* keep data views monospace explicitly (defensive, in case a tool relied
   on inheritance) */
textarea,pre,code,.kv,.ladder,.raw,.msg,.mono{font-family:var(--mono)}

/* ==================================================================
   v5.0.3 — component enforcement.
   These selectors re-assert the shared component library AFTER any
   legacy per-tool definition, so the same element renders identically
   on every app. Mechanics (hidden/show states, per-tool layout) are
   deliberately not touched. Canonical definitions: shared/app.css.
   ================================================================== */

.drop{border:1.5px dashed var(--line);border-radius:var(--radius);
      padding:28px 22px;text-align:center;color:var(--ink-dim);
      font-size:13.5px;background:var(--panel)}
.drop.hover,.drop:focus-visible{border-color:var(--accent);
      background:rgba(100,158,255,.06)}
.drop strong,.drop b{color:var(--ink);font-weight:600}
.filename{font-family:var(--mono);font-size:12.5px;color:var(--ok)}

.note{background:var(--panel-2);border:1px solid var(--line);
      border-left:3px solid var(--accent);border-radius:8px;
      padding:10px 14px;color:var(--ink-dim);font-size:12.5px}

.err,.error{background:var(--red-dim);border:1px solid var(--bad);
      color:var(--bad);border-radius:8px;padding:10px 14px;font-size:13px}

.stat{background:var(--panel);border:1px solid var(--line);
      border-radius:10px;padding:10px 16px;min-width:92px;
      border-right:1px solid var(--line)}
.stat .n{font-family:var(--mono);font-size:21px;font-weight:600;
         color:var(--ink)}
.stat .l{font-family:var(--sans);font-size:10.5px;font-weight:600;
         color:var(--ink-dim);text-transform:uppercase;letter-spacing:.06em}
.stat.ok .n{color:var(--ok)}
.stat.warn .n{color:var(--warn)}
.stat.crit .n,.stat.bad .n{color:var(--bad)}
.stats{border:none;overflow:visible;gap:10px}

.progress{background:var(--panel-2);border:1px solid var(--line);
      border-left:3px solid var(--accent);border-radius:8px}
.spin{border:2px solid var(--line);border-top-color:var(--accent)}

.secret-wrap .reveal-btn,.reveal-btn{background:var(--panel);
      border:1px solid var(--line);color:var(--ink-dim);border-radius:6px;
      font-size:10.5px;font-family:var(--sans);font-weight:600}
.reveal-btn:hover{color:var(--ink);border-color:var(--accent)}

/* every primary action (Analyze, Fetch, Test, Build, …) = the ONE accent */
.btn-primary{background:var(--accent);color:#fff;border:none}
.btn-primary:hover{filter:brightness(1.08);background:var(--accent)}
.btn-primary:disabled{opacity:.55;cursor:default;filter:none}
.btn-ghost{background:transparent;color:var(--ink-dim);
      border:1px solid var(--line)}
.btn-ghost:hover{color:var(--ink);border-color:var(--ink-dim)}

table.kv td.hn{color:var(--accent)}

.drawer{background:var(--panel);border-left:1px solid var(--line);
      box-shadow:-18px 0 40px rgba(0,0,0,.4)}
.drawer-close{background:none;border:1px solid var(--line);
      color:var(--ink-dim);border-radius:8px}
.drawer-close:hover{color:var(--ink)}

/* ==================================================================
   v5.0.3 — single header per page.
   Inside the workspace canvas the shell already shows the app's name,
   tagline, description and Help — so each page's own legacy <header>
   is hidden (no more double headers). Standalone views (/apps, direct
   URLs) keep their header, now with the house gradient.
   ================================================================== */
html.embedded body > header{display:none !important}

/* gradient page headers (standalone) + tokens defined in app.css */
body > header{background:var(--head-grad);background-color:var(--panel)}