/* ============================================================================
   CollabPlane Vector — 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{gap:8px;background:var(--blue-dim);
      border:2px dashed color-mix(in srgb, var(--accent) 45%, var(--line));border-radius:14px;
      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)}

/* ── Resizable table columns (static/shared/coltable.js) ─────────────────
   A grip sits on each header's right edge; drag to resize, double-click to
   reset. Fixed layout means cell content must clip rather than force width. */
table.rz-on{table-layout:fixed}
table.rz-on th,table.rz-on td{overflow:hidden;text-overflow:ellipsis}
table.rz-on th{white-space:nowrap}
.rz-handle{position:absolute;top:0;right:-5px;width:11px;height:100%;z-index:3;
  cursor:col-resize;user-select:none;touch-action:none}
/* a persistent faint divider marks every draggable column edge; it thickens and
   turns accent on hover so it's obvious where (and that) you can resize */
.rz-handle:after{content:'';position:absolute;top:18%;bottom:18%;left:5px;width:1px;
  border-radius:2px;background:var(--line);transition:background .12s,top .12s,bottom .12s}
.rz-handle:hover:after,body.rz-dragging .rz-handle:after{
  background:var(--accent);width:2px;top:0;bottom:0}
body.rz-dragging{cursor:col-resize;user-select:none}

/* Legacy btn-* buttons keep the standard 9px radius, not the old 999px pill,
   so they match the .primary/.secondary vocabulary everywhere (chips, pills,
   pagers and steppers set their own radius, so they're unaffected). */
.btn-primary,.btn-secondary,.btn-ghost,
a.btn-primary,a.btn-secondary,a.btn-ghost,
button.btn-primary,button.btn-secondary,button.btn-ghost{border-radius:9px}

/* Legacy btn-* on target-scoped pages (acceptance/waves/advanced/job) were
   recolored to the per-target brand (webex cyan / zoom blue); pull them to the
   standard accent so they match .primary/.secondary and the non-target pages.
   DI (target-webex_di) is a separate class and keeps its brand untouched. */
.target-webex .btn-primary,.target-zoom .btn-primary{background:var(--accent)}
.target-webex .btn-ghost,.target-webex a.wiz-btn.btn-ghost,
.target-zoom .btn-ghost,.target-zoom a.wiz-btn.btn-ghost{
  background:var(--blue-dim);color:var(--accent)}
.target-webex .btn-ghost:hover,.target-webex a.wiz-btn.btn-ghost:hover,
.target-zoom .btn-ghost:hover,.target-zoom a.wiz-btn.btn-ghost:hover{
  background:var(--accent);color:#fff}

/* 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)}

/* ==================================================================
   v6.x — design-system completeness (CSS/UI consistency audit
   2026-07-18). Adds the missing classes/tokens that templates already
   reference so undefined selectors stop rendering unstyled or off-theme.
   Appended here (loads last) so it wins ties without touching app.css.
   ================================================================== */

/* token aliases — templates use these typo/short names; resolve them to
   the real tokens so BOTH light and dark themes get the right value
   (var() resolves at use, so a single alias covers both themes) */
:root{
  --panel2:var(--panel-2);
  --dim:var(--ink-dim);
  --warn-soft:var(--amber-dim);
}

/* status pills: `.pill.review` (Skip status on cloud/zoom device+feature
   rows) and `.statpill.bad` (red blocker) were undefined → colorless /
   inline-hacked. Mirror the amber/red token styles. */
.pill.review{border-color:var(--warn);color:var(--warn);
  background:var(--amber-dim)}
.statpill.bad{background:var(--red-dim);color:var(--bad)}

/* `.note.warn` was undefined → notes rendered blue instead of amber */
.note.warn{border-left-color:var(--warn)}

/* `.subhead` (waves + locations section sub-labels) was undefined */
.subhead{font-size:12px;font-weight:650;letter-spacing:.03em;
  text-transform:uppercase;color:var(--ink-dim);margin:14px 0 6px}

/* DI screens use a private button vocabulary (.btn.primary/.danger/.sm/
   .ghost) that the design system never defined → unstyled buttons. Map
   them onto the canonical looks. */
.btn.primary{background:var(--accent);color:#fff;border-color:transparent}
.btn.primary:hover{filter:brightness(1.08)}
.btn.ghost{background:transparent;color:var(--ink-dim);
  border:1px solid var(--line)}
.btn.ghost:hover{color:var(--ink);border-color:var(--ink-dim)}
.btn.danger{color:var(--bad);border-color:var(--bad);background:var(--panel)}
.btn.danger:hover{background:var(--bad);color:#fff}
.btn.sm{padding:4px 12px !important;font-size:12px !important}
.target-webex .btn.primary,.target-zoom .btn.primary,
.target-webex_di .btn.primary{background:var(--zoom-brand)}
.target-webex .btn.primary,.target-webex_di .btn.primary{
  background:var(--webex-brand)}