/* tools.css — elevated inner-tool layer ("Validation Terminal" instrument look).
   Linked AFTER each Film Room tool's inline <style> so it lifts the shared
   primitives (tables, panels, toggles, selectors, badges, scrollbars) to the
   design-system language without rewriting each tool's bespoke markup.
   Tokens are duplicated here so a tool can adopt it standalone. */
:root{
  --bg:#080d18; --bg2:#0b1426; --panel:#0d1932; --ink:#eef3ff; --muted:#8398c4;
  --cyan:#3fe0c8; --pink:#ff4d8d; --magenta:#ff4d8d; --green:#46d17a; --yellow:#ffd24a; --amber:#ffd24a;
  --border:#16264a; --line:rgba(63,224,200,.07);
  --disp:'Archivo',system-ui,sans-serif; --mono:'IBM Plex Mono',ui-monospace,monospace;
}

/* atmosphere: faint instrument grid + corner glow behind every tool */
body{
  background:
    radial-gradient(120% 55% at 90% -10%, rgba(63,224,200,.07), transparent 60%),
    linear-gradient(var(--line) 1px, transparent 1px) 0 0/100% 44px,
    linear-gradient(90deg, var(--line) 1px, transparent 1px) 0 0/44px 100%,
    var(--bg) !important;
  -webkit-font-smoothing:antialiased;
}

/* ---- tool header strip (opt-in: <div class="gt-head"><span class="gt-k">…</span><h2>…</h2></div>) ---- */
.gt-head{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin:2px 2px 14px}
.gt-head .gt-k{font-family:var(--mono);font-size:.64rem;letter-spacing:.2em;text-transform:uppercase;color:var(--magenta)}
.gt-head h1,.gt-head h2{font-family:var(--disp);font-weight:900;letter-spacing:-.01em;font-size:1.15rem;margin:0}

/* ---- toggle rows: subtabs / segmented controls ---- */
.subtabs,.subtab,.seg,.seg .segb,.segb{font-family:var(--mono)!important}
.subtab{font-size:.7rem!important;letter-spacing:.05em;text-transform:uppercase;font-weight:600!important;
  border-radius:9px!important;padding:9px 15px!important;background:var(--panel)!important;
  border:1px solid var(--border)!important;color:var(--muted)!important;opacity:1!important;transition:color .18s,border-color .18s,background .18s}
.subtab:hover{color:var(--ink)!important}
.subtab.active{color:var(--cyan)!important;border-color:var(--cyan)!important;background:rgba(63,224,200,.08)!important}
.seg{border:1px solid var(--border)!important;border-radius:9px!important;overflow:hidden}
.seg .segb,.segb{font-size:.68rem!important;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)!important;padding:6px 12px!important}
.seg .segb.on,.segb.on{background:var(--cyan)!important;color:#04140f!important;font-weight:600}

/* ---- instrument table ---- */
table{border-collapse:separate!important;border-spacing:0;width:100%;font-size:.8rem}
thead th{font-family:var(--mono)!important;font-size:.64rem!important;letter-spacing:.09em;text-transform:uppercase;
  font-weight:600!important;color:var(--muted)!important;padding:9px 10px!important;
  border-bottom:1px solid var(--border)!important;position:sticky;top:0;background:var(--bg);z-index:2;white-space:nowrap}
thead th:hover{color:var(--cyan)!important}
tbody td{padding:8px 10px!important;border-bottom:1px solid rgba(22,38,74,.55)!important;
  font-variant-numeric:tabular-nums;color:var(--ink)}
tbody tr.row,tbody tr[class*="row"]{cursor:pointer;transition:background .12s}
tbody tr.row:hover{background:rgba(63,224,200,.06)!important}
tbody tr.row.sel,tbody tr.sel{background:rgba(63,224,200,.10)!important;outline:1px solid var(--cyan)!important;outline-offset:-1px}

/* ---- framed panels / drills ---- */
.drill,.panel,.card,.box{
  background:linear-gradient(180deg,rgba(13,25,50,.9),rgba(8,13,24,.85))!important;
  border:1px solid var(--border)!important;border-radius:14px!important}
.drill h3,.panel h3{font-family:var(--disp);font-weight:800;letter-spacing:-.01em;
  padding-bottom:10px;margin-bottom:10px;border-bottom:1px solid var(--border)}

/* ---- badges / pills ---- */
.badge{font-family:var(--mono)!important;font-weight:700!important;border-radius:6px!important;
  padding:1px 8px!important;font-size:.74rem;letter-spacing:.02em}

/* ---- native selects → instrument dropdowns ---- */
select{font-family:var(--mono)!important;font-size:.74rem!important;background:var(--panel)!important;
  color:var(--ink)!important;border:1px solid var(--border)!important;border-radius:8px!important;
  padding:7px 10px!important;letter-spacing:.02em;cursor:pointer;transition:border-color .18s}
select:hover,select:focus{border-color:var(--cyan)!important;outline:none}
label,.lbl{font-family:var(--mono);letter-spacing:.06em;text-transform:uppercase}

/* ---- muted helper + thin instrument scrollbar ---- */
.muted{color:var(--muted)!important}
*::-webkit-scrollbar{width:9px;height:9px}
*::-webkit-scrollbar-thumb{background:rgba(63,224,200,.18);border-radius:6px}
*::-webkit-scrollbar-thumb:hover{background:rgba(63,224,200,.32)}
*{scrollbar-width:thin;scrollbar-color:rgba(63,224,200,.22) transparent}