/* ============================================================
   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.
   ============================================================ */

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

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}
}
