/* ============================================================
   SWH TOOLS — SHARED STYLESHEET
   The one place the look of every tool is defined.

   USE IT: put these two lines in <head> of any tool page,
   before that page's own <style> block:

     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="stylesheet" href="/assets/swh.css">

   Then delete that page's :root block, body/header/footer rules,
   and any .btn/.card/table styling it duplicates. Keep only the
   CSS that is genuinely unique to that tool.

   RULE OF THUMB: colors go in the tokens below, never hardcoded
   in a page. If you need a new color everywhere, add it here.
   ============================================================ */

/* ---------- 0. HIDDEN MEANS HIDDEN ----------
   The browser's own rule is [hidden]{display:none}, specificity (0,1,0), and
   it loses to any author rule that sets display on a class — .dcard{display:
   block}, .tabs{display:flex}, .badge{display:inline-block}. So an element
   given the hidden attribute stayed on screen, and the page looked like its
   JavaScript had not run.

   That bug was found and patched five separate times before this rule
   existed, once per element, in five different files. It belongs here once.

   !important is load-bearing: without it this loses to the very rules it is
   here to beat. Nothing should ever want an element that is hidden to paint,
   so there is no case this steals. */
[hidden]{display:none!important}

/* ---------- 1. TOKENS ---------- */
:root{
  /* surfaces */
  --pellon:#F2F3F1;        /* page background */
  --card:#FFFFFF;          /* card / panel background */
  --tint:#F4F5F2;          /* subtle fill (readonly fields, zebra rows) */
  --ticket:#FAFBF9;        /* card headers, table headers */

  /* text + lines */
  --ink:#16181D;           /* primary text, dark header bar */
  --ink-soft:#5A6068;      /* secondary text, labels */
  --hairline:#DDE0DB;      /* borders */
  --hairline-soft:#ECEEEA; /* inner borders, table row dividers */

  /* accent */
  --press-blue:#2751E6;
  --press-blue-hover:#1E42C8;
  --press-blue-soft:#E8EDFF;

  /* Status colours come in three roles — use the right one:
       --x        fills, borders, dots, meter bars (NOT small text)
       --x-soft   tinted background behind status text
       --x-ink    the text colour to put ON --x-soft (contrast-checked)
     Putting --warn on --warn-soft as text measures 2.71:1 and fails
     WCAG AA; --warn-ink on --warn-soft measures 5.26:1 and passes. */
  --good:#1E9E58;  --good-soft:#E2F5EA;  --good-ink:#177E45;
  --warn:#C8862D;  --warn-soft:#FDF0DE;  --warn-ink:#8A5A12;
  --bad:#C0392B;   --bad-soft:#FBE7E5;   --bad-ink:#8C2B1C;

  /* accents used by specific tools */
  --video:#7C3AED;
  --doc:#1E9E58;

  --radius:10px;
  --mono:'JetBrains Mono','SF Mono',Monaco,Consolas,monospace;

  /* legacy aliases — so older pages keep working mid-migration.
     Prefer the names above in new code. */
  --paper:var(--pellon);
  --line:var(--hairline);
  --rule:var(--hairline);
  --mut:var(--ink-soft);
  --muted:var(--ink-soft);
  --accent:var(--press-blue);
}

/* ---------- 2. BASE ---------- */
*{box-sizing:border-box;margin:0;padding:0}
html{font-size:15px}
body{font-family:'Inter',system-ui,-apple-system,sans-serif;background:var(--pellon);
  color:var(--ink);min-height:100vh}
button{font-family:inherit;cursor:pointer}
a{color:var(--press-blue)}
:focus-visible{outline:2px solid var(--press-blue);outline-offset:2px}
@media (prefers-reduced-motion: reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

/* Condensed uppercase type — headings, labels, chips, table headers */
h1,h2,h3,.cond{font-family:'Barlow Condensed',sans-serif}

/* ---------- 3. HEADER / SHELL ---------- */
header{background:var(--ink);color:#fff;padding:0 24px;display:flex;align-items:center;
  gap:16px;height:60px;position:sticky;top:0;z-index:40}
.brand{display:flex;align-items:baseline;gap:10px}
/* The back link (a.home) is the first element in the header, so it sits
   top-left. margin-right:auto on the brand pushes any trailing content
   (login/status/action buttons) to the right, keeping them clear of it. */
header .brand{margin-right:auto}
.brand h1{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:1.45rem;
  letter-spacing:.06em;text-transform:uppercase}
.brand .sub{font-family:'Barlow Condensed',sans-serif;font-weight:600;font-size:.95rem;
  letter-spacing:.14em;text-transform:uppercase;color:#9BA3AE}
header a.home{color:#B7BEC7;font-size:.82rem;text-decoration:none}
header a.home:hover{color:#fff}

/* ---- standard header: back arrow · page title · user slot ----
   New pages use: <a class="home back" href="…" aria-label="Back">←</a>
   <h1 class="page-title">Title</h1> <div class="head-user" id="…"></div>
   The title takes margin-right:auto so the user slot sits far right. */
header a.home.back{font-size:1.35rem;line-height:1;flex:none;color:#C9CFD6}
header .page-title{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:1.35rem;
  letter-spacing:.06em;text-transform:uppercase;color:#fff;margin-right:auto;
  min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* .head-user / .avatar-btn / .usermenu-pop / .head-signin styles are
   injected by assets/user-menu.js so pages without swh.css match too. */

main{max-width:1200px;margin:0 auto;padding:22px 24px 80px}
main.narrow{max-width:760px}

footer{max-width:1200px;margin:30px auto 0;padding:0 24px 40px;font-size:.76rem;color:var(--ink-soft)}

/* ---------- 4. SECTION HEADINGS ---------- */
.cat-head{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:1.15rem;
  letter-spacing:.09em;text-transform:uppercase;margin:26px 0 4px;padding-bottom:6px;
  border-bottom:2px solid var(--ink)}
.group-head{font-family:'Barlow Condensed',sans-serif;font-weight:600;font-size:.82rem;
  letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft);margin:14px 0 2px}

/* ---------- 5. CONTROLS (search + filter chips) ---------- */
.controls{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:8px}
.search{flex:1;min-width:230px;max-width:400px;padding:10px 13px;border:1px solid var(--hairline);
  border-radius:8px;font-size:.92rem;background:var(--card);color:var(--ink)}
.search::placeholder{color:#9AA0A8}
.search:focus{outline:none;border-color:var(--press-blue);box-shadow:0 0 0 3px var(--press-blue-soft)}
.chips{display:flex;gap:6px;flex-wrap:wrap}
.chip{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--hairline);
  background:var(--card);border-radius:6px;padding:7px 12px;text-decoration:none;
  font-family:'Barlow Condensed',sans-serif;font-weight:600;font-size:.84rem;
  letter-spacing:.09em;text-transform:uppercase;color:var(--ink-soft)}
.chip:hover{border-color:var(--press-blue);color:var(--ink)}
.chip.on{border-color:var(--ink);color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.chip .dot{width:9px;height:9px;border-radius:50%}
.count{font-size:.8rem;color:var(--ink-soft);margin-left:auto}

/* ---------- 6. CARDS + PANELS ---------- */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:12px;margin-top:10px}

.card{background:var(--card);border:1px solid var(--hairline);border-radius:var(--radius);
  margin-bottom:16px;overflow:hidden}
.card-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
  padding:12px 16px;border-bottom:1px solid var(--hairline);background:var(--ticket)}
.card-head h2{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:1.05rem;
  letter-spacing:.09em;text-transform:uppercase}
.card-head .hint{font-size:.76rem;color:var(--ink-soft)}
.card-body{padding:16px}

.panel{background:var(--card);border:1px solid var(--hairline);border-radius:var(--radius);
  padding:16px 18px;margin-bottom:16px}
.panel h3{font-family:'Barlow Condensed',sans-serif;font-weight:600;font-size:.82rem;
  letter-spacing:.13em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:10px}

/* Card that is itself a link/button */
.card-link{display:block;text-decoration:none;color:var(--ink);
  transition:border-color .12s, transform .12s}
.card-link:hover{border-color:var(--press-blue);transform:translateY(-2px)}

/* ---------- 7. BUTTONS ---------- */
/* Both `.btn.primary` and `.btn-primary` work — pages use both spellings. */
.btn{border:1px solid var(--hairline);background:var(--card);color:var(--ink);border-radius:8px;
  padding:8px 14px;font-weight:600;font-size:.85rem;line-height:1.2;text-decoration:none;
  display:inline-flex;align-items:center;gap:6px;transition:border-color .12s, background .12s}
.btn:hover{border-color:var(--ink)}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn.primary,.btn-primary{background:var(--press-blue);border-color:var(--press-blue);color:#fff}
.btn.primary:hover,.btn-primary:hover{background:var(--press-blue-hover);border-color:var(--press-blue-hover)}
.btn.dark,.btn-dark{background:var(--ink);border-color:var(--ink);color:#fff}
.btn.good,.btn-good{background:var(--good);border-color:var(--good);color:#fff}
.btn.good:hover,.btn-good:hover{background:var(--good-ink);border-color:var(--good-ink)}
.btn.danger,.btn-danger{border-color:var(--bad);color:var(--bad)}
.btn.danger:hover,.btn-danger:hover{background:var(--bad);color:#fff}
.btn.ghost,.btn-ghost{background:var(--card);color:var(--ink);border:1px solid var(--hairline)}
.btn.sm,.btn-small{padding:6px 10px;font-size:.78rem;border-radius:6px}
.btn.tiny{padding:3px 9px;font-size:.72rem;border-radius:6px}

/* ---------- 8. FORM FIELDS ---------- */
.field{display:flex;flex-direction:column}
.field label{font-family:'Barlow Condensed',sans-serif;font-size:.76rem;font-weight:600;
  letter-spacing:.11em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:5px}
.field input,.field select,.field textarea{font-family:'Inter',sans-serif;font-size:.92rem;
  padding:9px 11px;border:1px solid var(--hairline);border-radius:8px;
  background:var(--card);color:var(--ink)}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--press-blue)}
.field input[readonly]{background:var(--tint);color:var(--ink-soft)}
.field-note{font-size:.72rem;color:var(--ink-soft);font-style:italic;margin-top:3px}

/* ---------- 9. TABLES ---------- */
.table-wrap{background:var(--card);border:1px solid var(--hairline);border-radius:var(--radius);overflow-x:auto}
.table-wrap table{width:100%;border-collapse:collapse}
.table-wrap th{font-family:'Barlow Condensed',sans-serif;font-weight:600;font-size:.76rem;
  letter-spacing:.11em;text-transform:uppercase;color:var(--ink-soft);text-align:left;
  padding:11px 12px;border-bottom:1px solid var(--hairline);white-space:nowrap;background:var(--ticket)}
.table-wrap td{padding:10px 12px;border-bottom:1px solid var(--hairline-soft);font-size:.88rem;vertical-align:middle}
.table-wrap tbody tr:hover{background:#F6F8FF}
.table-wrap tbody tr:last-child td{border-bottom:none}

/* ---------- 10. PILLS / BADGES ---------- */
.pill{display:inline-block;padding:3px 9px;border-radius:5px;font-family:'Barlow Condensed',sans-serif;
  font-size:.7rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  background:var(--tint);color:var(--ink-soft)}
.pill.good{background:var(--good-soft);color:var(--good-ink)}
.pill.warn{background:var(--warn-soft);color:var(--warn-ink)}
.pill.bad{background:var(--bad-soft);color:var(--bad-ink)}
.pill.info{background:var(--press-blue-soft);color:var(--press-blue)}

/* Callout box for warnings inside content */
.warn-box{background:var(--bad-soft);color:var(--bad);font-weight:600;padding:10px 14px;
  border-radius:8px;font-size:.86rem;line-height:1.5}

/* ---------- 11. EMPTY / LOADING STATES ---------- */
.state{background:var(--card);border:1px solid var(--hairline);border-radius:var(--radius);
  padding:44px 30px;text-align:center;color:var(--ink-soft);margin-top:14px}
.state h2{font-family:'Barlow Condensed',sans-serif;letter-spacing:.05em;text-transform:uppercase;
  color:var(--ink);margin-bottom:8px}
.state ol{text-align:left;max-width:560px;margin:14px auto 0;line-height:1.8}
.state code{background:#EEF0EC;padding:2px 6px;border-radius:4px;font-size:.85em}
.spinner{width:26px;height:26px;border-radius:50%;margin:0 auto 12px;border:3px solid var(--hairline);
  border-top-color:var(--press-blue);animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- 12. MODAL ---------- */
.overlay{position:fixed;inset:0;background:rgba(22,24,29,.65);z-index:50;display:none}
.overlay.open{display:block}
.modal{position:fixed;inset:0;z-index:60;display:none;align-items:center;justify-content:center;padding:24px}
.modal.open{display:flex}

/* ---------- 13. MOBILE ---------- */
@media (max-width:640px){
  header{padding:0 14px}
  main{padding:14px 12px 60px}
  footer{padding:0 14px 40px}
  .brand .sub{display:none}
  .count{display:none}
}
