/* ============================================================
   TOMTC Site Migration Review Hub — house style
   (brand tokens mirrored from infra/incident-page/web/site.css)
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Zilla+Slab:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Hind:wght@300;400;500;600;700&display=swap');

:root {
  --tc-green:#004528; --tc-green-dark:#00351e; --tc-green-bright:#008845;
  --tc-blue:#3fa0cd; --tc-blue-text:#0a6e8b;
  --tc-orange:#e06b2f; --tc-navy:#25408f;
  --tc-ink:#303030; --tc-ink-strong:#262626; --tc-bg:#ffffff;
  --tc-bg-light:#f6f6f6; --tc-border:#e3e3e3; --tc-muted:#818181;
  --font-head:'Zilla Slab',Rockwell,Georgia,serif;
  --font-body:'Hind',system-ui,sans-serif;
  --radius:2px; --container:1120px;
}
*,*::before,*::after { box-sizing:border-box; }
body {
  margin:0; background:var(--tc-bg); color:var(--tc-ink);
  font-family:var(--font-body); font-size:1rem; line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3 { font-family:var(--font-head); color:var(--tc-ink-strong);
  line-height:1.12; margin:0 0 .4em; font-weight:700; }
a { color:var(--tc-blue-text); text-decoration:none; }
a:hover { color:var(--tc-green); }
.container { max-width:var(--container); margin:0 auto; padding:0 1.5rem; }
.eyebrow { font-family:var(--font-head); text-transform:uppercase;
  letter-spacing:.18em; font-size:.72rem; font-weight:600;
  color:var(--tc-blue); margin:0 0 .8rem; }

/* header */
header.hub-nav { position:sticky; top:0; z-index:50; background:var(--tc-green);
  border-bottom:3px solid var(--tc-blue); }
header.hub-nav .bar { display:flex; align-items:center; gap:1rem;
  min-height:64px; flex-wrap:wrap; padding-top:.4rem; padding-bottom:.4rem; }
.brand { display:flex; align-items:baseline; gap:.7rem; margin-right:auto; }
.brand-mark { font-family:var(--font-head); font-weight:800; color:#fff;
  background:var(--tc-green-bright); padding:.15em .5em; border-radius:var(--radius);
  font-size:.9rem; letter-spacing:.08em; }
.brand-title { font-family:var(--font-head); font-weight:700; color:#fff;
  font-size:1.15rem; }
.reviewer-box { display:flex; align-items:center; gap:.6rem; }
.reviewer-box label { color:#cfe6d9; font-family:var(--font-head);
  text-transform:uppercase; letter-spacing:.1em; font-size:.68rem; font-weight:600; }
.reviewer-box input { border:2px solid var(--tc-blue); border-radius:var(--radius);
  background:#fff; padding:.45em .7em; font-family:var(--font-body);
  font-size:.9rem; min-width:180px; }

/* hero */
.hub-hero { background:linear-gradient(110deg, var(--tc-green-dark) 0%,
  var(--tc-green) 60%, #0a5c39 100%); color:#fff; padding:2.6rem 0 2.2rem; }
.hub-hero h1 { color:#fff; font-size:clamp(1.9rem,3.6vw,2.6rem); }
.hub-hero .lead { color:#eaf5ef; font-weight:300; max-width:60ch; margin:0 0 1.2rem; }
.progress { display:flex; gap:.6rem; flex-wrap:wrap; }
.chip { font-family:var(--font-head); font-size:.8rem; letter-spacing:.04em;
  padding:.35em .8em; border-radius:999px; background:rgba(255,255,255,.12);
  color:#eaf5ef; border:1px solid rgba(255,255,255,.25); }
.chip b { font-size:1rem; }
.chip-approved b { color:#7fe0a8; }
.chip-changes b { color:#ffb27f; }
.chip-unreviewed b { color:#cfe6d9; }

/* round tabs */
.tabs-band { background:#fff; border-bottom:1px solid var(--tc-border); }
.tabs { display:flex; gap:.4rem; padding-top:.9rem; }
.tab { font-family:var(--font-head); text-transform:uppercase;
  letter-spacing:.09em; font-size:.78rem; font-weight:700; cursor:pointer;
  background:var(--tc-bg-light); color:var(--tc-ink);
  border:1px solid var(--tc-border); border-bottom:none;
  border-radius:var(--radius) var(--radius) 0 0; padding:.7em 1.4em .6em; }
.tab .tab-note { font-weight:400; font-size:.66rem; color:var(--tc-muted);
  text-transform:none; letter-spacing:.02em; margin-left:.35em; }
.tab.active { background:var(--tc-green); color:#fff;
  border-color:var(--tc-green); }
.tab.active .tab-note { color:#cfe6d9; }
.round-banner { margin:1rem 0 0; background:#fdf3ec;
  border:1px solid var(--tc-orange); border-left:5px solid var(--tc-orange);
  border-radius:var(--radius); padding:.7em 1em; font-size:.9rem; }
.round-banner b { color:var(--tc-orange); }

/* round-2 type chips + round-1 reference link */
.type-chip { font-family:var(--font-head); text-transform:uppercase;
  letter-spacing:.08em; font-size:.62rem; font-weight:700;
  padding:.25em .7em; border-radius:999px; white-space:nowrap; }
.type-chip.type-verify { background:var(--tc-green-bright); color:#fff; }
.type-chip.type-question { background:var(--tc-navy); color:#fff; }
.r1-ref { margin:.3rem 0 0; font-size:.78rem; }
.r1-ref a { color:var(--tc-muted); text-decoration:underline dotted; }
.r1-ref a:hover { color:var(--tc-blue-text); }
.row.flash { outline:3px solid var(--tc-blue); outline-offset:2px;
  transition:outline-color .4s; }

/* filters */
.filters-band { background:var(--tc-bg-light); border-bottom:1px solid var(--tc-border);
  position:sticky; top:64px; z-index:40; }
.filters { display:flex; gap:1rem; align-items:flex-end; padding:.8rem 1.5rem;
  flex-wrap:wrap; }
.filters label { display:flex; flex-direction:column; gap:.25rem;
  font-family:var(--font-head); text-transform:uppercase; letter-spacing:.1em;
  font-size:.65rem; font-weight:600; color:var(--tc-muted); }
.filters label.grow { flex:1 1 220px; }
.filters select, .filters input { border:1px solid var(--tc-border);
  border-radius:var(--radius); padding:.45em .6em; font-family:var(--font-body);
  font-size:.9rem; background:#fff; }
.result-count { font-size:.8rem; color:var(--tc-muted); padding-bottom:.5em; }

/* rows */
main { padding:1.6rem 1.5rem 4rem; }
.loading { color:var(--tc-muted); }
.section-header { margin:2.2rem 0 .8rem; display:flex; align-items:baseline; gap:.8rem; }
.section-header h2 { margin:0; font-size:1.4rem; color:var(--tc-green); }
.section-header .sec-count { font-size:.8rem; color:var(--tc-muted); }
.row { border:1px solid var(--tc-border); border-left:5px solid var(--tc-border);
  border-radius:var(--radius); background:#fff; margin-bottom:.9rem;
  padding:1rem 1.2rem; }
.row.agg-approved { border-left-color:var(--tc-green-bright); }
.row.agg-changes { border-left-color:var(--tc-orange); }
.row-top { display:flex; gap:1rem; align-items:baseline; flex-wrap:wrap; }
.row-top h3 { margin:0; font-size:1.08rem; }
.row-links { display:flex; gap:.6rem; margin-left:auto; }
.row-links a, .row-links .removed {
  font-family:var(--font-head); text-transform:uppercase; letter-spacing:.08em;
  font-size:.68rem; font-weight:600; padding:.35em .8em;
  border:1.5px solid var(--tc-blue-text); border-radius:var(--radius);
  white-space:nowrap; }
.row-links a.new-link { border-color:var(--tc-green); color:var(--tc-green); }
.row-links a.new-link:hover { background:var(--tc-green); color:#fff; }
.row-links a.old-link:hover { background:var(--tc-blue-text); color:#fff; }
.row-links .removed { border-color:var(--tc-border); color:var(--tc-muted);
  background:var(--tc-bg-light); cursor:default; }
.row .desc { margin:.35rem 0 .2rem; font-size:.92rem; }
.row .keych { margin:0; font-size:.85rem; color:var(--tc-blue-text); }
.row .keych::before { content:"Key changes: "; font-weight:600;
  color:var(--tc-muted); }
.row .slug { font-size:.72rem; color:var(--tc-muted); font-family:monospace; }

/* review states */
.reviews { margin:.7rem 0 0; display:flex; flex-direction:column; gap:.35rem; }
.review-line { font-size:.85rem; display:flex; gap:.55rem; align-items:baseline;
  flex-wrap:wrap; background:var(--tc-bg-light); border-radius:var(--radius);
  padding:.35em .7em; }
.review-line .who { font-weight:600; }
.review-line .when { color:var(--tc-muted); font-size:.75rem; }
.review-line .comment { flex-basis:100%; color:var(--tc-ink); }
.status-pill { font-family:var(--font-head); text-transform:uppercase;
  letter-spacing:.07em; font-size:.62rem; font-weight:700;
  padding:.2em .65em; border-radius:999px; color:#fff; }
.status-pill.approved { background:var(--tc-green-bright); }
.status-pill.changes_requested { background:var(--tc-orange); }

/* review controls */
.controls { margin-top:.7rem; display:flex; gap:.6rem; align-items:flex-start;
  flex-wrap:wrap; }
.controls textarea { flex:1 1 260px; min-height:2.4em; max-height:8em;
  border:1px solid var(--tc-border); border-radius:var(--radius);
  font-family:var(--font-body); font-size:.88rem; padding:.45em .6em; resize:vertical; }
.btn { font-family:var(--font-head); text-transform:uppercase;
  letter-spacing:.09em; font-size:.7rem; font-weight:700; border-radius:var(--radius);
  border:2px solid transparent; cursor:pointer; padding:.7em 1.2em;
  transition:background .15s, color .15s; white-space:nowrap; }
.btn-approve { background:var(--tc-green); color:#fff; }
.btn-approve:hover { background:var(--tc-green-dark); }
.btn-changes { background:#fff; color:var(--tc-orange); border-color:var(--tc-orange); }
.btn-changes:hover { background:var(--tc-orange); color:#fff; }
.btn[disabled] { opacity:.5; cursor:not-allowed; }
.post-error { flex-basis:100%; color:#c0492b; font-size:.8rem; margin:0; }

/* footer */
footer.hub-foot { background:var(--tc-green); color:#9fc4af;
  border-top:3px solid var(--tc-blue); padding:1.4rem 0; font-size:.85rem; }
footer.hub-foot p { margin:0; }

@media (max-width:640px) {
  .filters-band { position:static; }
  .row-links { margin-left:0; }
}