/* Zodiac brand tokens applied per design-system.md (colour LOCKED 2026-06-30).
   Product-mode restraint: 60% neutral / 30% Core Purple structure / 10% frequency accents.
   Registry-only utility layer: IBM Plex Mono for concept IDs and machinery labels. */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600&family=Inter:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;700&display=swap');

:root{
  /* Neutrals (locked tokens) */
  --paper:#F6F1E8;        /* Cream: screen canvas */
  --card:#FFFFFF;         /* Bleach: cards */
  --ink:#1A1620;          /* Ink: text */
  --stage:#0B0712;        /* Stage: reversed dark surfaces */
  --moondust:#FBF8F3;     /* Moon Dust: cream text on dark */
  --line:#EEE9E0;         /* Mist: hairlines, subtle fills */
  --muted:#6E6875;        /* derived from Ink for secondary text */
  /* Core Purple: the single action/structure accent */
  --violet:#6521C9;       /* Core primary (class names kept; value remapped) */
  --core-deep:#38007A;
  --decision-bg:#EFECFF;  /* Core tint */
  --core-soft:#D2C8FF;
  /* Frequency text accents as status vocabulary (derived light fills noted in README) */
  --amber:#C25500;        --amber-bg:#FBEFE2;   /* Vitality: action needed */
  --green:#0A7A52;        --green-bg:#E7F4EE;   /* Abundance: approved, live */
  --red:#B90044;          --red-bg:#F9E6EE;     /* Love: rejected, killed */
  --gray-bg:#EEE9E0;      /* Mist: fyi */
  --gold:#FF9112;         /* Vitality primary (funnel chip, class name kept) */
  --mono:"IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --sans:"Inter", -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --display:"Fraunces", Georgia, serif;
}
*{box-sizing:border-box; margin:0; padding:0;}
body{background:var(--paper); color:var(--ink); font-family:var(--sans);
  font-size:15px; line-height:1.55; padding:0 20px 80px;}
a{color:var(--violet);}
a:focus-visible, button:focus-visible{outline:2px solid var(--violet); outline-offset:2px;}
.wrap{max-width:800px; margin:0 auto;}
header{padding:38px 0 8px;}
.eyebrow{font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted);}
h1{font-family:var(--display); font-optical-sizing:auto; font-size:clamp(28px,4.5vw,40px); font-weight:600; letter-spacing:-.01em; margin:6px 0 2px;}
.sub{color:var(--muted); font-size:13.5px; font-family:var(--mono);}
hr.spectrum{height:3px; border:none; margin:16px 0 0;
  /* The four locked frequency primaries: Core, Love, Vitality, Abundance */
  background:linear-gradient(90deg,#6521C9,#B90044,#FF9112,#12A56E);}

/* Needs-you rollup (reversed: Stage ground, Moon Dust text) */
.needs-you{margin:24px 0 8px; background:var(--stage); color:var(--moondust); border-radius:8px; padding:16px 18px;}
.needs-you .label{font-family:var(--mono); font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--core-soft);}
.needs-you ul{list-style:none; margin-top:8px;}
.needs-you li{padding:3px 0; font-size:14.5px;}
.needs-you a{color:var(--moondust); text-decoration-color:var(--core-soft); text-underline-offset:3px;}
.needs-you .none{color:#9C93A8; font-size:14px; margin-top:6px;}

.idnote{font-family:var(--mono); font-size:11px; color:var(--muted); margin:10px 0 0; line-height:1.6;}

/* Sections and rows (TOC) */
.sec{margin-top:36px;}
.sec-head{display:flex; align-items:baseline; gap:10px; border-bottom:1px solid var(--line); padding-bottom:6px;}
.chip{width:10px; height:10px; border-radius:50%; flex:none; transform:translateY(-1px);}
.chip.gold{background:var(--gold);} .chip.violet{background:var(--violet);}
.sec-head h2{font-family:var(--display); font-optical-sizing:auto; font-size:19px; font-weight:600; letter-spacing:0;}
.row{display:flex; flex-wrap:wrap; align-items:center; gap:10px;
  background:var(--card); border:1px solid var(--line); border-radius:8px;
  padding:12px 16px; margin-top:10px; text-decoration:none; color:var(--ink);}
.row:hover{border-color:var(--core-soft);}
.row .rid{font-family:var(--mono); font-size:12.5px; font-weight:700;}
.row .rname{font-size:14px; font-weight:600;}
.row .spacer{margin-left:auto;}

/* Status pills: the four frequency text accents as status vocabulary */
.pill{font-family:var(--mono); font-size:9.5px; letter-spacing:.1em; text-transform:uppercase;
  padding:2px 9px; border-radius:12px; font-weight:700; white-space:nowrap;}
.pill.action_needed{background:var(--amber-bg); color:var(--amber);}
.pill.fyi{background:var(--gray-bg); color:var(--muted);}
.pill.approved{background:var(--green-bg); color:var(--green);}
.pill.revisions{background:var(--decision-bg); color:var(--violet);}
.pill.rejected,.pill.killed{background:var(--red-bg); color:var(--red);}
.pill.live{background:var(--green-bg); color:var(--green);}
/* ALARM fallback: any status outside the canonical set renders loud, not invisible */
.pill:not(.action_needed):not(.fyi):not(.approved):not(.revisions):not(.rejected):not(.killed):not(.live){
  background:var(--red-bg); color:var(--red); border:1px dashed var(--red);}

/* Batch page: brief header */
.batch-head{display:flex; flex-wrap:wrap; align-items:baseline; gap:10px; border-bottom:2px solid var(--ink); padding-bottom:8px; margin-top:24px;}
.batch-id{font-family:var(--mono); font-weight:700; font-size:15px;}
.batch-title{font-family:var(--display); font-optical-sizing:auto; font-size:17px; font-weight:600;}
.brief-grid{display:grid; grid-template-columns:110px 1fr 110px 1fr; gap:8px 12px; padding:14px 0; border-bottom:1px solid var(--line); font-size:13px;}
.brief-grid .k{font-family:var(--mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); padding-top:2px;}

/* Cards (accordions) */
details{border:1px solid var(--line); border-radius:8px; margin-top:12px; background:var(--card); overflow:hidden;}
details[open]{border-color:var(--core-soft);}
summary{list-style:none; cursor:pointer; padding:12px 16px; display:flex; align-items:center; gap:10px; flex-wrap:wrap;}
summary::-webkit-details-marker{display:none;}
summary:hover{background:var(--moondust);}
.sid{font-family:var(--mono); font-size:12.5px; font-weight:700;}
.sname{font-size:14px; font-weight:600;}
.sask{font-size:12.5px; color:var(--muted); width:100%;}
.chev{margin-left:auto; color:var(--muted); transition:transform .15s; font-size:12px;}
details[open] .chev{transform:rotate(90deg);}
@media (prefers-reduced-motion: reduce){ .chev{transition:none;} }
.panel{padding:4px 16px 16px; border-top:1px solid var(--line);}
.prow{display:grid; grid-template-columns:100px 1fr; gap:10px; padding:8px 0; border-bottom:1px solid var(--line); font-size:13.5px;}
.prow:last-of-type{border-bottom:none;}
.pk{font-family:var(--mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); padding-top:2px;}
.copybit{background:var(--moondust); border:1px solid var(--line); border-radius:6px; padding:10px 12px; font-size:13px; margin-top:4px;}

/* Verdict buttons: Core Purple carries the action (single accent rule) */
.btnrow{display:flex; gap:8px; margin-top:12px; flex-wrap:wrap;}
.btn{font-family:var(--mono); font-size:12px; font-weight:700; padding:8px 16px; border-radius:6px; border:none; cursor:pointer;}
.btn.ok{background:var(--violet); color:#fff;}
.btn.ok:hover{background:var(--core-deep);}
.btn.chg{background:var(--card); color:var(--ink); border:1px solid var(--line);}
.btn.rej{background:var(--card); color:var(--red); border:1px solid var(--red-bg);}
.btn:disabled{opacity:.5; cursor:default;}
.cmtbox{display:none; margin-top:10px;}
.cmtbox.show{display:block;}
.cmtbox textarea{width:100%; min-height:60px; border:1px solid var(--line); border-radius:6px;
  padding:8px 10px; font-family:var(--sans); font-size:13px; margin-bottom:8px; resize:vertical;}
.toast{display:none; margin-top:10px; font-size:12.5px; padding:8px 12px; border-radius:6px; font-family:var(--mono);}
.toast.ok{background:var(--green-bg); color:var(--green);}
.toast.err{background:var(--red-bg); color:var(--red);}
.toast.show{display:block;}

.foot{margin-top:48px; padding-top:14px; border-top:1px solid var(--line); font-size:12.5px; color:var(--muted);}
.offline{background:var(--amber-bg); color:var(--amber); font-family:var(--mono); font-size:12px; padding:10px 14px; border-radius:6px; margin-top:20px; display:none;}
.offline.show{display:block;}

@media (max-width:620px){
  .brief-grid{grid-template-columns:100px 1fr;}
}