/* ============================================================================
   PBS Houston — shared design system (see /UI-GUIDELINES.md for intent)
   One stylesheet for every page. Tokens + components only; page-specific
   styles (drawing colors, print sheets, SVG previews) stay on their pages.
   Load this FIRST; a page's own <style> may override during migration.
   ============================================================================ */

/* ---- 1. Tokens ---- */
:root{
  --ink:#1c2522;        /* primary text, nav bg, borders-strong */
  --ink-soft:#4a5651;   /* secondary text */
  --line:#2a3531;       /* strong rule / hero underline */
  --rule:#cdc6b6;       /* light divider */
  --hairline:#e3dfd6;   /* extra-light border (panel seams) */
  --paper:#f3efe7;      /* page background */
  --paper-edge:#e7e1d4; /* subtle panels / nav text */
  --card:#fbf9f4;       /* cards, panels, inputs */
  --accent:#b5462f;     /* terracotta — primary actions, active, annotation */
  --accent-soft:#d98a6f;/* brand mark, soft accents */
  --accent-bg:#fbeae5;  /* accent tint (selected/op backgrounds) */
  --accent-line:#e6b9ad;/* accent tint border */
  --teal:#2f5d6e;       /* secondary accent (info, closet/section) */
  --teal-bg:#eef5f7;    /* teal tint */
  --teal-line:#a9c6cf;  /* teal tint border */
  --tag-bg:#eae4d6;     /* chips/tags */
  --ok:#2f7d4f; --ok-bg:#eef6f0; --ok-line:#a9cdb7;
  --warn:#b5462f; --warn-bg:#faf3e4; --warn-line:#e2c99a;
  --custom:#b5462f;
  --overlay:rgba(28,37,34,.5);
  --shadow-pop:0 14px 44px rgba(0,0,0,.3);
  /* kanban stage tokens (light-theme equivalents of the board's semantics) */
  --stage-todo:#7d8780; --stage-design:#2f5d6e; --stage-review:#6d5a8f;
  --stage-ready:#a97b2f; --stage-prod:#2f7d4f; --stage-done:#3c8d54;
  --pri-high:#b5462f; --pri-med:#a97b2f; --pri-low:#2f7d4f;
  --serif:"Iowan Old Style","Palatino Linotype","Book Antiqua",Palatino,Georgia,serif;
  --mono:"SFMono-Regular","Menlo","Consolas","Liberation Mono",monospace;
}

/* ---- 2. Base ---- */
*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--serif);line-height:1.5}
h1,h2,h3,h4{font-weight:600;letter-spacing:-.015em}
h1{font-size:clamp(30px,5vw,48px);margin:0 0 12px}
.mono{font-family:var(--mono)}
.wrap{max-width:1120px;margin:0 auto;padding:40px 32px 90px}
.hero{border-bottom:2px solid var(--line);padding-bottom:26px;margin-bottom:34px}
.eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--accent);margin:0 0 12px}
.lede{font-size:16px;color:var(--ink-soft);max-width:66ch;margin:0}
.group-label{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft);margin:34px 0 14px;display:flex;align-items:center;gap:12px}
.group-label::after{content:"";flex:1;height:1px;background:var(--rule)}
.minilabel{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft)}

/* ---- 3. Top nav (identical on every page; mark current with .on) ---- */
.topnav{background:var(--ink);color:var(--paper-edge);font-family:var(--mono);font-size:12px;display:flex;align-items:center;gap:4px;padding:7px 18px;flex-wrap:wrap}
.topnav .brand{color:var(--accent-soft);font-weight:700;letter-spacing:.14em;margin-right:14px}
.topnav a{color:var(--paper-edge);text-decoration:none;padding:5px 12px;border-radius:6px}
.topnav a:hover{background:#33403b}
.topnav a.on{background:var(--accent);color:#fff}

/* ---- 4. Buttons ---- */
.btn{font:inherit;font-size:13.5px;color:var(--ink);background:var(--card);border:1px solid var(--rule);border-radius:8px;padding:8px 14px;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;gap:6px;transition:border-color .12s,background .12s}
.btn:hover{border-color:var(--accent)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:600}
.btn.primary:hover{background:#9c3b27;border-color:#9c3b27}
.btn.subtle{color:var(--ink-soft);background:transparent}
.btn.subtle:hover{color:var(--accent)}
.btn.danger{color:#a03123;border-color:#f1d9d5;background:#fbeeec}
.btn.sm{font-size:12px;padding:5px 10px;border-radius:6px}
.btn:disabled{opacity:.55;cursor:not-allowed}

/* ---- 5. Forms ---- */
.f{font:inherit;font-size:13.5px;width:100%;padding:8px 10px;color:var(--ink);background:#fff;border:1px solid var(--rule);border-radius:7px}
select.f{cursor:pointer}
.f:focus{border-color:var(--accent)}
.fld{display:block}
.fld label,label.mini{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft);margin:10px 0 4px}
.fld .err{font-size:12.5px;color:var(--warn);margin-top:4px}
.chk{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--rule);background:#fff;border-radius:6px;padding:4px 8px;font-size:13px;cursor:pointer}

/* ---- 6. Cards ---- */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px}
.card{display:block;text-decoration:none;color:inherit;background:var(--card);border:1px solid var(--rule);border-radius:12px;padding:20px 20px 18px;transition:border-color .15s,transform .15s}
.card:hover{border-color:var(--accent);transform:translateY(-2px)}
.card .ic{font-size:22px}
.card h3{margin:8px 0 4px;font-size:18px}
.card p{margin:0;font-size:13.5px;color:var(--ink-soft)}
.card .who{display:inline-block;margin-top:12px;font-family:var(--mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--teal);border:1px solid var(--teal-line);background:var(--teal-bg);border-radius:5px;padding:2px 7px}
.card.op .who{color:var(--accent);border-color:var(--accent-line);background:var(--accent-bg)}

/* ---- 7. Panels & tables ---- */
.panel{background:var(--card);border:1px solid var(--rule);border-radius:10px}
.panel-head{background:var(--tag-bg);border-bottom:1px solid var(--line);padding:9px 14px;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);border-radius:10px 10px 0 0}
table.data{width:100%;border-collapse:collapse;font-size:13.5px}
table.data th{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);text-align:left;padding:8px 10px;border-bottom:2px solid var(--line);font-weight:500}
table.data td{padding:8px 10px;border-bottom:1px solid #f0ece3;vertical-align:top}
table.data .num{font-variant-numeric:tabular-nums;white-space:nowrap}
.table-scroll{overflow-x:auto}

/* ---- 8. Badges & chips ---- */
.badge{display:inline-block;font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;border:1px solid var(--rule);background:var(--tag-bg);color:var(--ink-soft);border-radius:5px;padding:2px 7px}
.badge.draft{color:var(--warn);border-color:var(--warn-line);background:var(--warn-bg)}
.badge.submitted,.badge.info{color:var(--teal);border-color:var(--teal-line);background:var(--teal-bg)}
.badge.in_production,.badge.custom{color:var(--accent);border-color:var(--accent-line);background:var(--accent-bg)}
.badge.complete,.badge.ok,.badge.pub{color:var(--ok);border-color:var(--ok-line);background:var(--ok-bg)}
.chip{display:inline-flex;align-items:center;gap:5px;background:var(--tag-bg);border-radius:12px;padding:2px 9px;font-size:12px}

/* ---- 9. Callout ---- */
.tip{background:var(--teal-bg);border-left:4px solid var(--teal);border-radius:0 8px 8px 0;padding:10px 14px;font-size:13.5px}
.tip.warn{background:var(--warn-bg);border-left-color:var(--warn)}

/* ---- 10. Overlay & modal ---- */
.overlay{position:fixed;inset:0;background:var(--overlay);z-index:9990;display:flex;align-items:center;justify-content:center;padding:16px}
.modal{background:var(--card);color:var(--ink);border:1px solid var(--rule);border-radius:12px;box-shadow:var(--shadow-pop);max-width:560px;width:100%;max-height:90vh;overflow:auto;padding:20px 22px}
.modal .x{float:right;border:0;background:none;font-size:18px;line-height:1;cursor:pointer;color:var(--ink-soft)}

/* ---- 11. States (design all four: default/loading/empty/error) ---- */
.empty{padding:22px 16px;color:var(--ink-soft);font-size:13px;text-align:center}
.loading{padding:22px 16px;color:var(--ink-soft);font-size:13px;text-align:center}
.loading::before{content:"";display:inline-block;width:14px;height:14px;margin-right:8px;vertical-align:-2px;border:2px solid var(--rule);border-top-color:var(--accent);border-radius:50%;animation:agspin .8s linear infinite}
@keyframes agspin{to{transform:rotate(360deg)}}
.errorbox{padding:14px 16px;color:var(--warn);background:var(--warn-bg);border:1px solid var(--warn-line);border-radius:8px;font-size:13.5px}

/* ---- 12. Accessibility & responsive ---- */
:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.f:focus-visible{outline-offset:-1px}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none!important;animation-duration:.01ms!important}
}
@media (pointer:coarse){
  .btn,.f,.topnav a{min-height:44px}
  .btn.sm{min-height:36px}
}
@media (max-width:640px){
  .wrap{padding:20px 16px 60px}
  .f,input.f,select.f{font-size:16px} /* prevent iOS zoom */
}