/* ============================================================
   hi! — Roundup standard  ·  one look for the review surface
   Cairo, 2026-09-04 · governed by HI_Design_Doctrine_2026-09-02
   Reference: hi-agents/skills/cairo/references/roundup-standard.md
   Load on every Roundup page AFTER any page-local <style>:
     <link rel="stylesheet" href="/review/roundup.css">
   ============================================================ */

/* -- tokens -------------------------------------------------- */
:root{
  --paper:#FFFFFF; --ink:#111111;
  --grey-hi:#EDEDED; --grey-lo:#767676; --grey-deep:#595959;
  --line:#e2e2e2;
  --yellow:#EFD865; --red:#FF3821; --ochre:#6F5F00;
  /* state — hues locked by Elizabeth 2026-09-04; values contrast-proven */
  --ok:#4f8a63;    --ok-deep:#2f5c42;   --ok-bg:#f5fbf7;   --ok-chip:#dff0e5;  --ok-note:#3E7A52;
  --wait:#c9a227;  --wait-deep:#6F5F00; --wait-bg:#fffdf3; --wait-chip:#fbf0c9;
  --block:#c8503a; --block-deep:#a8331d;--block-bg:#fdf6f4;--block-chip:#ffe1dc;--block-note:#b8301c;
  /* type scale — 16 base, 1.25 ratio */
  --s-2:10.5px; --s-1:12px; --s0:15px; --s1:19px; --s2:24px; --s3:30px; --s4:40px;
  --mono:'IBM Plex Mono',ui-monospace,monospace;
  --speak:'Bricolage Grotesque','Arial Black',sans-serif;
  --text:'Instrument Sans',system-ui,sans-serif;
}

/* -- page frame ---------------------------------------------- */
html{background:var(--grey-hi)}
body:not([class*="rs-legacy"]){margin:0;background:var(--grey-hi);color:var(--ink);
  font-family:var(--text);font-size:var(--s0);line-height:1.6;
  display:flex;flex-direction:column;align-items:center;padding:0 20px 90px}
body:not([class*="rs-legacy"]) .wrap{width:100%;max-width:760px}
::selection{background:var(--yellow)}
a{color:inherit}
:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* back pill — every page can always get home */
#hi-back{position:fixed;top:14px;left:14px;z-index:50;font-family:var(--mono);
  font-size:var(--s-1);font-weight:500;text-decoration:none;color:var(--paper);
  background:var(--ink);padding:8px 14px;transition:.15s}
#hi-back:hover{background:var(--red)}

/* header band */
.rs-header{background:var(--paper);align-self:stretch;margin:0 -20px 26px;
  padding:46px 20px 34px;border-bottom:4px solid var(--ink)}
.rs-header .hdr{max-width:760px;margin:0 auto}
.kick{font-family:var(--mono);font-size:var(--s-1);letter-spacing:.1em;
  text-transform:uppercase;color:var(--grey-lo);font-weight:500;margin-bottom:14px;
  display:flex;align-items:center;gap:10px}
.kick::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--red);flex:none}
body:not([class*="rs-legacy"]) h1{font-family:var(--speak);font-weight:800;font-size:var(--s4);line-height:1.05;
  margin:0 0 14px;letter-spacing:-.02em;text-wrap:balance}
body:not([class*="rs-legacy"]) mark{background:linear-gradient(transparent 58%,var(--yellow) 58%);padding:0 2px;color:inherit}
body:not([class*="rs-legacy"]) .sub{font-size:16px;color:#3a3a3a;margin:0;max-width:56ch}

/* byline — the page-level credit, same grammar as the card credit */
.byline{font-family:var(--mono);font-size:11px;color:var(--grey-lo);margin:14px 0 0;
  display:flex;align-items:center;gap:8px;letter-spacing:.01em}
.byline::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--red);flex:none}
.byline b{color:var(--ink);font-weight:600}

/* section labels */
body:not([class*="rs-legacy"]) h2{font-family:var(--mono);font-size:var(--s-1);letter-spacing:.1em;text-transform:uppercase;
  color:var(--grey-lo);font-weight:500;margin:34px 0 14px}

/* -- the card ------------------------------------------------ */
body:not([class*="rs-legacy"]) .card{background:var(--paper);border:1px solid var(--line);padding:22px 24px;
  margin-bottom:12px;display:flex;gap:18px;align-items:flex-start}
body:not([class*="rs-legacy"]) .num{font-family:var(--mono);font-size:13px;color:var(--grey-lo);flex:none;padding-top:4px;width:22px}
body:not([class*="rs-legacy"]) .card .body{flex:1;min-width:0}
body:not([class*="rs-legacy"]) .card h3{font-family:var(--speak);font-weight:600;font-size:21px;
  margin:0 0 10px;letter-spacing:-.01em;text-wrap:balance}
body:not([class*="rs-legacy"]) .card p{margin:0 0 14px;font-size:var(--s0);color:#3a3a3a}

/* the record strip — credit + state at the card's foot, behind a hairline.
   The title owns the top of the card; who made it and where it stands are a
   record, and records sit at the foot, full-width, in mono. */
.meta{display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  margin:18px 0 0;padding-top:13px;border-top:1px solid var(--grey-hi)}
.credit{font-family:var(--mono);font-size:11px;color:var(--grey-lo);letter-spacing:.01em;
  display:inline-flex;align-items:center;gap:8px;margin:0;line-height:1.6}
.credit::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--red);flex:none}
.credit b{color:var(--ink);font-weight:500}
.meta .spacer{flex:1}

/* -- tags: one pill language -------------------------------- */
.tag{display:inline-block;font-family:var(--mono);font-size:var(--s-2);font-weight:600;
  letter-spacing:.05em;text-transform:uppercase;padding:3px 9px;border-radius:2px}
.t-who{background:var(--yellow);color:var(--ochre)}
.t-both{background:var(--block-chip);color:var(--block-note)}
.t-fyi{background:var(--grey-hi);color:var(--grey-deep)}
.t-ok{background:var(--ok-chip);color:var(--ok-deep)}
.t-wait{background:var(--wait-chip);color:var(--wait-deep)}
.t-block{background:var(--block-chip);color:var(--block-deep)}

/* -- state: card level --------------------------------------- */
.card.greenlit,.gl-ok  {border-color:var(--ok);   background:var(--ok-bg);   box-shadow:inset 4px 0 0 var(--ok)}
.card.waiting          {border-color:var(--wait); background:var(--wait-bg); box-shadow:inset 4px 0 0 var(--yellow)}
.card.blocked          {border-color:var(--block);background:var(--block-bg);box-shadow:inset 4px 0 0 var(--red)}
.card.split            {border-color:var(--block);background:var(--block-bg);
  box-shadow:inset 4px 0 0 var(--red);position:relative}
.card.split::before{content:"";position:absolute;left:0;top:0;bottom:50%;width:4px;background:var(--ok)}
.glnote{font-family:var(--mono);font-size:11.5px;margin:8px 0 0;color:var(--ok-note)}
.glnote.wait{color:var(--wait-deep)}
.glnote.block{color:var(--block-note)}

/* legacy badge aliases (index script + older pages) */
.gl{display:inline-block;font-family:var(--mono);font-size:var(--s-2);font-weight:600;
  letter-spacing:.05em;text-transform:uppercase;padding:3px 9px;border-radius:2px;
  background:var(--ok-chip);color:var(--ok-deep)}
.gl.wait{background:var(--wait-chip);color:var(--wait-deep)}
.gl.block{background:var(--block-chip);color:var(--block-deep)}
.pill{display:inline-block;font-family:var(--mono);font-size:var(--s-2);font-weight:600;
  letter-spacing:.05em;text-transform:uppercase;padding:3px 9px;border-radius:2px}
.p-stacy{background:var(--yellow);color:var(--ochre)}
.p-both{background:var(--block-chip);color:var(--block-note)}
.p-fyi{background:var(--grey-hi);color:var(--grey-deep)}

/* -- links --------------------------------------------------- */
body:not([class*="rs-legacy"]) a.go{display:inline-block;font-family:var(--mono);font-size:13px;font-weight:500;
  text-decoration:none;color:var(--paper);background:var(--ink);padding:9px 17px;transition:.15s}
body:not([class*="rs-legacy"]) a.go:hover{background:var(--red)}
body:not([class*="rs-legacy"]) a.alt{background:var(--paper);color:var(--ink);border:1px solid var(--ink);margin-left:7px}
body:not([class*="rs-legacy"]) a.alt:hover{background:var(--yellow);color:var(--ink);border-color:var(--yellow)}

/* callout / note */
body:not([class*="rs-legacy"]) .note{background:var(--paper);border-left:4px solid var(--yellow);padding:16px 20px;
  margin-bottom:26px;font-size:var(--s0)}
.note b{font-weight:600}

body:not([class*="rs-legacy"]) footer{margin-top:40px;padding-top:22px;border-top:1px solid #d3d3d3;
  font-family:var(--mono);font-size:var(--s-1);color:var(--grey-deep);line-height:1.8}

/* ============================================================
   Legacy normalization — retokens pages built before the
   standard without touching their markup. Body classes:
     rs-legacy-dark  (old dark/acid pages)
     rs-legacy-warm  (warm-paper #FBF8F1 pages, --bang orange)
   ============================================================ */
body.rs-legacy-dark{
  --bg:var(--grey-hi); --card:var(--paper); --ink:#111111;
  --dim:var(--grey-lo); --hi:var(--yellow); --line:#e2e2e2; --red:#FF3821;
  background:var(--grey-hi); color:#111;
  display:block; margin:0 auto}
body.rs-legacy-dark .card{border-radius:0}
body.rs-legacy-dark .num{background:var(--yellow);color:var(--ochre);border-radius:2px}
body.rs-legacy-dark code,body.rs-legacy-dark .mono{color:var(--ochre)}
body.rs-legacy-dark .callout{border-left-color:var(--yellow);color:#3a3a3a}

body.rs-legacy-warm{
  --paper:#FFFFFF; --muted:var(--grey-lo); --line:#e2e2e2;
  --bang:var(--red); --card:#ffffff;
  background:var(--grey-hi)}
body.rs-legacy-warm .theme,body.rs-legacy-warm .tablebox{border-radius:0}
body.rs-legacy-warm .bubble{border-radius:0;box-shadow:4px 4px 0 var(--yellow)}

/* rs-legacy-plain: keeps its own type and layout entirely; palette untouched.
   Gets tokens, the back pill, tags, byline, and the approval component only. */