/* ============================================================================
   MADE OS — shared shell
   ----------------------------------------------------------------------------
   One container serves the whole mini-site, so unlike the standalone
   made-diagrams pages this CSS is a real shared file rather than a block
   pasted into every document. Change a token here and all nine pages move.

   Visual system inherited from brands/made-scientific/diagrams/workflows/
   (the BEACON / lifecycle / data-inputs / crm-mapping family) so the OS site
   and the deep-dive pages read as one product.

   THE STATE TAXONOMY IS THE POINT. Four states, and the difference between
   red and blue is the difference between an emergency and a roadmap item:

     live    green   verified running, this pass
     part    amber   runs, with a limit worth knowing
     broken  RED     WE BELIEVE THIS WORKS AND IT DOES NOT. Urgent.
     future  BLUE    known, scoped, not built yet. Not urgent.

   The older diagram pages used red for "not built". That conflated a dead
   agent flying a live flag with a roadmap item nobody has started, which are
   not remotely the same problem. Red is now reserved for false belief.
   ========================================================================= */

:root{
  /* MADE Scientific palette — matches brands/made-scientific/brand.json */
  --teal:#00545F; --teal-2:#057A6B; --mint:#57C2AC; --green:#43B02A;
  --ink:#131318; --bg:#FBFBFD; --muted:#62626A; --light:#F5F5F7;
  --teal-lt:#E6F1F2; --green-lt:#EDF8E9;
  --warn:#F2A900; --warn-lt:#FEF6E4; --danger:#EE3C27; --danger-lt:#FDECEA;
  --blue:#3B6FB6; --blue-lt:#EAF0F9; --grey:#9CA3AF; --border:#E1E1E4;
  --purple:#6B3D8F; --purple-lt:#F6F0FB;
  --sans:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);line-height:1.5;-webkit-font-smoothing:antialiased}
.wrap{max-width:1320px;margin:0 auto;padding:0 28px 90px}
a{color:var(--teal-2)}

/* ---------- masthead ---------- */
.masthead{background:var(--teal);color:#fff;padding:22px 0 30px;margin-bottom:30px}
.masthead .wrap{padding-bottom:0}
.brandrow{display:flex;align-items:center;gap:12px;margin-bottom:20px;flex-wrap:wrap}
.logomark{width:26px;height:26px;border-radius:6px;background:var(--green);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:14px;color:#fff;flex:none;text-decoration:none}
.brandname{font-size:14px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;opacity:.92;text-decoration:none;color:#fff}
.brandsub{font-size:12px;opacity:.62;margin-left:auto;letter-spacing:.04em}
h1{margin:0 0 14px;font-size:38px;line-height:1.12;font-weight:700;letter-spacing:-.02em}
.lede{margin:0;max-width:1000px;font-size:15.5px;color:rgba(255,255,255,.86)}
.lede code{background:rgba(255,255,255,.13);padding:1px 5px;border-radius:4px;font-family:var(--mono);font-size:12.5px}
.lede b{color:#fff}
.verified{margin-top:18px;display:inline-flex;align-items:center;gap:9px;background:rgba(67,176,42,.18);border:1px solid rgba(67,176,42,.5);color:#DFF3D6;padding:7px 14px;border-radius:20px;font-size:12.5px}
.verified b{color:#fff;font-weight:600}
.verified.warn{background:rgba(242,169,0,.16);border-color:rgba(242,169,0,.5);color:#FBE9C4}
.sibling{margin-top:14px;font-size:12.5px;color:rgba(255,255,255,.7)}
.sibling a{color:var(--mint);text-decoration:none;border-bottom:1px solid rgba(87,194,172,.4)}
.sibling a:hover{color:#fff;border-color:#fff}

/* ---------- nav (the mini-site spine) ---------- */
.osnav{display:flex;flex-wrap:wrap;gap:2px;margin-top:22px;border-bottom:1px solid rgba(255,255,255,.16)}
.osnav a{font-size:13px;font-weight:600;color:rgba(255,255,255,.72);text-decoration:none;padding:9px 15px 10px;border-bottom:2px solid transparent;letter-spacing:-.005em}
.osnav a:hover{color:#fff;background:rgba(255,255,255,.06)}
.osnav a.on{color:#fff;border-bottom-color:var(--mint)}
.osnav .spacer{flex:1}

/* ---------- legend ---------- */
.legend{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 30px;align-items:stretch}
.lg{display:inline-flex;align-items:center;gap:7px;font-size:12px;background:#fff;border:1px solid var(--border);border-radius:18px;padding:6px 13px;color:var(--muted)}
.lg b{color:var(--ink);font-weight:650}
.dot{width:9px;height:9px;border-radius:50%;flex:none}
.d-live{background:var(--green)} .d-part{background:var(--warn)}
.d-broken{background:var(--danger)} .d-future{background:var(--blue)}
.lg-sep{width:1px;background:var(--border);margin:4px 6px}

/* ---------- section chrome ---------- */
.refhead{margin:52px 0 8px;padding-top:30px;border-top:2px solid var(--teal)}
.refhead:first-of-type{margin-top:0;padding-top:0;border-top:none}
.refhead .kick{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#2C7A1C}
.refhead h2{margin:6px 0 6px;font-size:26px;font-weight:700;letter-spacing:-.015em}
.refhead p{margin:0;color:var(--muted);font-size:14px;max-width:900px}
.refhead p+p{margin-top:8px}
.grouphead{margin:34px 0 14px;font-size:12px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:var(--teal);padding-bottom:7px;border-bottom:1px solid var(--border);display:flex;align-items:baseline;gap:10px}
.grouphead .gcount{margin-left:auto;font-family:var(--mono);font-size:11px;color:var(--muted);letter-spacing:0;text-transform:none;font-weight:600}

/* ---------- phase strip (flow pages) ---------- */
.phase{margin-bottom:26px;background:#fff;border:1px solid var(--border);border-radius:14px;overflow:hidden}
.ph-head{display:flex;align-items:baseline;gap:14px;padding:16px 20px 13px;border-bottom:1px solid var(--light);flex-wrap:wrap}
.ph-kicker{font-size:10.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:#2C7A1C;background:var(--green-lt);padding:4px 9px;border-radius:5px;flex:none}
.ph-title{font-size:19px;font-weight:700;margin:0;letter-spacing:-.01em}
.ph-sub{font-size:12.5px;color:var(--muted);flex:1 1 340px;min-width:240px}
.ph-sub code{font-family:var(--mono);font-size:11.5px;background:var(--light);padding:1px 4px;border-radius:3px;color:var(--teal-2)}
.strip{display:flex;padding:18px 20px 20px;overflow-x:auto;align-items:stretch}
.node{flex:1 1 0;min-width:158px;background:var(--light);border:1px solid var(--border);border-left:3px solid var(--grey);border-radius:9px;padding:11px 12px 12px;cursor:pointer;transition:.13s;text-align:left;font-family:inherit;display:flex;flex-direction:column;gap:6px}
.node+.node{margin-left:26px;position:relative}
.node+.node::before{content:'';position:absolute;left:-19px;top:50%;width:12px;height:1.5px;background:var(--border)}
.node+.node::after{content:'';position:absolute;left:-9px;top:50%;transform:translateY(-50%);border-left:5px solid var(--grey);border-top:4px solid transparent;border-bottom:4px solid transparent;opacity:.55}
.node:hover{background:#fff;border-color:var(--mint);box-shadow:0 3px 12px rgba(0,84,95,.09);transform:translateY(-1px)}
.node.sel{background:#fff;border-color:var(--teal);box-shadow:0 0 0 2px rgba(0,84,95,.13)}
.node.s-live{border-left-color:var(--green)} .node.s-part{border-left-color:var(--warn)}
.node.s-broken{border-left-color:var(--danger)} .node.s-future{border-left-color:var(--blue);border-style:dashed}
.n-top{display:flex;align-items:center;gap:6px}
.n-num{font-family:var(--mono);font-size:10px;color:var(--muted);font-weight:600}
.n-state{margin-left:auto;width:8px;height:8px;border-radius:50%}
.n-label{font-size:13.5px;font-weight:650;line-height:1.28;letter-spacing:-.005em}
.n-summ{font-size:11px;color:var(--muted);line-height:1.42;margin-top:1px}
.n-cost{font-size:9.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:2px 6px;border-radius:4px;align-self:flex-start;border:1px solid transparent;background:var(--teal-lt);color:var(--teal);border-color:#CFE3E5}
.n-more{font-size:9.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--teal-2);margin-top:auto;opacity:.75}
.node:hover .n-more{opacity:1}

/* ---------- cards ---------- */
.cards{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;align-items:stretch}
.cards.one{grid-template-columns:1fr}
.cards.three{grid-template-columns:repeat(3,1fr)}
.card{background:#fff;border:1px solid var(--border);border-top:3px solid var(--grey);border-radius:11px;padding:16px 17px 17px;scroll-margin-top:20px;display:flex;flex-direction:column}
.card.s-live{border-top-color:var(--green)} .card.s-part{border-top-color:var(--warn)}
.card.s-broken{border-top-color:var(--danger)} .card.s-future{border-top-color:var(--blue)}
.card.flash{box-shadow:0 0 0 3px rgba(87,194,172,.55)}
.c-top{display:flex;align-items:center;gap:9px;margin-bottom:3px;flex-wrap:wrap}
.c-num{font-family:var(--mono);font-size:10.5px;font-weight:700;color:#fff;background:var(--teal);padding:2px 6px;border-radius:4px}
.c-name{font-size:16px;font-weight:700;letter-spacing:-.01em;margin:0}
.c-name a{color:inherit;text-decoration:none;border-bottom:1.5px solid var(--mint)}
.c-name a:hover{color:var(--teal-2)}
.c-badges{display:flex;gap:6px;margin:8px 0 13px;flex-wrap:wrap}
.badge{font-size:10px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;padding:3px 8px;border-radius:4px;border:1px solid}
.b-live{background:var(--green-lt);color:#2C7A1C;border-color:#CBE8C0}
.b-part{background:var(--warn-lt);color:#8A6100;border-color:#F3E1B8}
.b-broken{background:var(--danger-lt);color:#B02A1A;border-color:#F7C9C2}
.b-future{background:var(--blue-lt);color:#2C5488;border-color:#C9D9EF}
.b-neutral{background:var(--light);color:var(--muted);border-color:var(--border)}
.b-mono{font-family:var(--mono);text-transform:none;letter-spacing:0;font-size:10.5px}

/* ---------- card fields ---------- */
.f{margin:0 0 10px;font-size:13.2px}
.f .k{display:block;font-size:9.8px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:2px}
.f code,.metric code,.note code,.summ code,.br code{font-family:var(--mono);font-size:11.8px;background:var(--light);padding:1px 4px;border-radius:3px;color:var(--teal-2);word-break:break-word}
.f.out{background:var(--teal-lt);margin:auto -17px -17px;padding:11px 17px 12px;border-top:1px solid #D6E7E9;border-radius:0 0 9px 9px}
.f.out .k{color:var(--teal)}
.summ{background:var(--teal-lt);border-left:3px solid var(--mint);padding:11px 13px;border-radius:0 7px 7px 0;font-size:13.4px;line-height:1.58;margin:0 0 13px;color:#123C42}
.summ .k{display:block;font-size:9.6px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--teal);margin-bottom:3px}
.summ code{background:rgba(0,84,95,.09);color:var(--teal)}
.metric{display:flex;justify-content:space-between;gap:10px;font-size:12.4px;padding:4px 0;border-bottom:1px dotted var(--border)}
.metric b{font-family:var(--mono);font-weight:700;white-space:nowrap}
.m-ok b{color:#2C7A1C} .m-mid b{color:#8A6100} .m-bad b{color:#B02A1A}
.note{background:var(--warn-lt);border-left:3px solid var(--warn);padding:9px 12px;border-radius:0 6px 6px 0;font-size:12.4px;margin:12px 0 0;color:#5C4300}
.note.bad{background:var(--danger-lt);border-left-color:var(--danger);color:#8C2114}
.note.good{background:var(--green-lt);border-left-color:var(--green);color:#265F18}
.note.info{background:var(--blue-lt);border-left-color:var(--blue);color:#24456F}
.note b{font-weight:700}
.branch{margin:0 0 12px;border:1px dashed #CFE3E5;border-radius:8px;padding:10px 12px;background:#FCFEFE}
.branch .k{display:block;font-size:9.6px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--teal);margin-bottom:6px}
.br{display:flex;gap:8px;font-size:12.6px;padding:3px 0;align-items:baseline}
.br .pip{font-family:var(--mono);font-size:10.5px;font-weight:700;color:var(--teal-2);background:var(--teal-lt);border-radius:3px;padding:1px 5px;flex:none;min-width:62px;text-align:center}
.br.par .pip{background:var(--green-lt);color:#2C7A1C}
.br.alt .pip{background:var(--warn-lt);color:#8A6100}
.br.no .pip{background:var(--danger-lt);color:#B02A1A}

/* ---------- rule block (teal callout) ---------- */
.rule{background:var(--teal);color:#fff;border-radius:12px;padding:19px 22px;margin:30px 0}
.rule.danger{background:#8C2114}
.rule .k{font-size:10.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--mint);margin-bottom:7px}
.rule.danger .k{color:#FFC9C0}
.rule h3{margin:0 0 8px;font-size:18px;font-weight:700}
.rule p{margin:0 0 8px;font-size:13.6px;color:rgba(255,255,255,.88)}
.rule p:last-child{margin-bottom:0}
.rule b{color:#fff}
.rule code{background:rgba(255,255,255,.14);padding:1px 5px;border-radius:4px;font-family:var(--mono);font-size:12px}
.rule ol,.rule ul{margin:8px 0 0;padding-left:20px;font-size:13.4px;color:rgba(255,255,255,.88)}
.rule li{margin-bottom:6px}
.rule a{color:var(--mint)}
.rule.danger a{color:#FFC9C0}

/* ---------- tables ---------- */
.tiers{width:100%;border-collapse:collapse;margin:12px 0 0;font-size:13px}
.tiers th{text-align:left;font-size:9.8px;letter-spacing:.1em;text-transform:uppercase;color:var(--mint);padding:0 10px 7px 0;font-weight:700;border-bottom:1px solid rgba(255,255,255,.22)}
.tiers td{padding:9px 10px 9px 0;vertical-align:top;border-bottom:1px solid rgba(255,255,255,.13);color:rgba(255,255,255,.88)}
.tiers td:first-child{white-space:nowrap;font-weight:700;color:#fff}
.tiers tr:last-child td{border-bottom:none}
.tiers code{font-size:11.5px}

.dt{width:100%;border-collapse:collapse;font-size:13px;background:#fff;border:1px solid var(--border);border-radius:11px;overflow:hidden}
.dt th{text-align:left;font-size:9.8px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:700;padding:11px 12px;background:var(--light);border-bottom:1px solid var(--border);white-space:nowrap}
.dt td{padding:10px 12px;vertical-align:top;border-bottom:1px solid var(--light)}
.dt tr:last-child td{border-bottom:none}
.dt tbody tr:hover{background:#FCFEFE}
.dt code{font-family:var(--mono);font-size:11.3px;background:var(--light);padding:1px 4px;border-radius:3px;color:var(--teal-2)}
.dt .nm{font-weight:650;letter-spacing:-.005em;white-space:nowrap}
.dt .nm a{color:inherit;text-decoration:none;border-bottom:1.5px solid var(--mint)}
.dt .nm a:hover{color:var(--teal-2)}
.dt .sc{border-left:3px solid var(--grey)}
.dt .sc.s-live{border-left-color:var(--green)} .dt .sc.s-part{border-left-color:var(--warn)}
.dt .sc.s-broken{border-left-color:var(--danger)} .dt .sc.s-future{border-left-color:var(--blue)}
.dt .mut{color:var(--muted);font-size:12.3px}
.dt .mono{font-family:var(--mono);font-size:11.3px;color:var(--muted)}

/* ---------- KPI row ---------- */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(148px,1fr));gap:12px;margin:0 0 30px}
.kpi{background:#fff;border:1px solid var(--border);border-radius:11px;padding:13px 14px 14px}
.kpi .kl{font-size:9.8px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.kpi .kv{font-size:27px;font-weight:700;letter-spacing:-.02em;margin-top:3px;line-height:1.1}
.kpi .ks{font-size:11.5px;color:var(--muted);margin-top:2px;line-height:1.35}
.kpi.ok .kv{color:#2C7A1C} .kpi.mid .kv{color:#8A6100} .kpi.bad .kv{color:#B02A1A} .kpi.info .kv{color:var(--blue)}

/* ---------- pillar cards (hub) ---------- */
.pillars{display:grid;grid-template-columns:repeat(auto-fit,minmax(292px,1fr));gap:16px;margin:0 0 12px}
.pillar{background:#fff;border:1px solid var(--border);border-top:3px solid var(--teal);border-radius:12px;padding:18px 19px 19px;display:flex;flex-direction:column;text-decoration:none;color:inherit;transition:.14s}
.pillar:hover{border-color:var(--mint);box-shadow:0 4px 16px rgba(0,84,95,.1);transform:translateY(-2px)}
.pillar .pnum{font-family:var(--mono);font-size:10.5px;font-weight:700;color:var(--muted);letter-spacing:.08em}
.pillar h3{margin:5px 0 7px;font-size:19px;font-weight:700;letter-spacing:-.015em}
.pillar .pdesc{font-size:13.2px;color:var(--muted);line-height:1.55;margin:0 0 13px}
.pillar .pstat{margin-top:auto;display:flex;align-items:baseline;gap:8px;padding-top:11px;border-top:1px solid var(--light);flex-wrap:wrap}
.pillar .pstat .big{font-family:var(--mono);font-size:16px;font-weight:700;color:var(--teal)}
.pillar .pstat .sm{font-size:11.5px;color:var(--muted)}
.pillar .go{font-size:10px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--teal-2);margin-left:auto}

/* ---------- spine diagram ---------- */
.spine{display:flex;flex-wrap:wrap;align-items:center;gap:0;background:#fff;border:1px solid var(--border);border-radius:12px;padding:18px 20px;margin:0 0 26px;overflow-x:auto}
.spine .sn{font-size:13px;font-weight:650;padding:8px 13px;border-radius:7px;background:var(--teal-lt);color:var(--teal);white-space:nowrap;border:1px solid #CFE3E5}
.spine .sn.acc{background:var(--green-lt);color:#2C7A1C;border-color:#CBE8C0}
.spine .ar{color:var(--grey);padding:0 9px;font-size:14px;flex:none}

/* ---------- footer ---------- */
footer{margin-top:56px;padding-top:22px;border-top:1px solid var(--border);font-size:12.3px;color:var(--muted);line-height:1.72}
footer b{color:var(--ink)}
footer code{font-family:var(--mono);font-size:11.3px;background:var(--light);padding:1px 4px;border-radius:3px;color:var(--teal-2)}
footer a{color:var(--teal-2)}

/* ---------- responsive ---------- */
@media (max-width:980px){
  .cards,.cards.three{grid-template-columns:1fr}
  h1{font-size:29px}
  .wrap{padding:0 18px 70px}
  .node+.node{margin-left:18px}
  .dt{display:block;overflow-x:auto}
}
@media print{
  .osnav,.n-more{display:none}
  body{background:#fff}
  .card,.phase,.kpi,.pillar{break-inside:avoid}
}