/* ============================================================
   togaf.css — the ADM method piece (/writing/togaf-method/).
   Layered on style.css + enhance.css + article.css + prefs.css.

   Everything is namespaced .togaf / .tg-* because the page's original
   vocabulary (.node, .chip, .timeline, .canvas, .fill, .num, .stage)
   collides with the site's own classes in both directions.

   Colour: the page's original green signature is replaced by the site's
   teal accent. Five semantic hues the site palette does not carry —
   --det, --agent, --good, --bad, --io — are declared on .togaf and flipped
   by [data-scheme], the same switch every other stylesheet keys off, with a
   third block warming the literals for Reading (which resolves to the light
   scheme but repaints the base palette onto paper). The hub stays amber on
   purpose: the page says so in prose.

   Type: no embedded faces. Display/body/mono come from the site tokens,
   and every authored size is calc(<size> * var(--fs, 1)) with a 12px
   floor, so the A-/A+ control works here as everywhere else. The wheel
   is exempt via prefs.css's `.canvas { --fs: 1 }` — its nodes are placed
   by percentage and would collide if their text grew independently.
   ============================================================ */
.togaf{
  --sig:var(--teal-400); --sig2:var(--teal-300); --onsig:var(--ink-950);
  --ink:var(--mist-100); --muted:var(--mist-200); --faint:var(--mist-400);
  --panel:rgba(var(--ink-900-rgb),.60); --panel2:rgba(var(--ink-800-rgb),.85);
  --line:rgba(var(--mist-400-rgb),.16); --line2:rgba(var(--mist-400-rgb),.32);
  --chipbg:rgba(var(--mist-400-rgb),.07);
  --mute-a:rgba(var(--mist-400-rgb),.45);
  /* semantic hues — dark scheme */
  --det:#6FE3C4;      /* deterministic / governance */
  --agent:var(--amber-400);
  --good:#3CC98D;
  --bad:#E4707C;
  --io:#7FB4F5;
  --exbg:rgba(251,191,36,.10); --exbd:rgba(251,191,36,.34); --exink:#F6E3B6;
  --stbg:rgba(93,214,229,.09);  --stbd:rgba(93,214,229,.32); --stink:#BFE9F0;
  --fbbg:rgba(228,112,124,.10); --fbbd:rgba(228,112,124,.34); --fbink:#F4CDD2;
  --glow:0 0 0 1px rgba(var(--mist-400-rgb),.06), 0 10px 30px rgba(0,0,0,.30);
  --stagebg:linear-gradient(180deg, rgba(var(--ink-800-rgb),.55), rgba(var(--ink-950-rgb),.55));
  /* The drawer is the one surface that must be fully opaque — it slides over the
     article, so any alpha lets the prose underneath read through its own text.
     --ink-900 is the site's raised-card token and is redefined by every theme
     (light and Reading included), so this needs no per-scheme override. */
  --drawerbg:var(--ink-900);
}
html[data-scheme="light"] .togaf{
  --onsig:#ffffff;
  --panel:rgba(var(--ink-900-rgb),.92); --panel2:rgba(var(--ink-800-rgb),.95);
  --line:rgba(var(--mist-400-rgb),.26); --line2:rgba(var(--mist-400-rgb),.42);
  --chipbg:rgba(var(--mist-400-rgb),.08);
  /* deepened for >=4.5:1 on the light surface, same as the site accents */
  --det:#0A6675;
  --good:#0F6B49;
  --bad:#A32B25;
  --io:#1F5FA8;
  --exbg:rgba(138,88,0,.09);  --exbd:rgba(138,88,0,.32); --exink:#4A3100;
  --stbg:rgba(10,102,117,.08); --stbd:rgba(10,102,117,.30); --stink:#083F49;
  --fbbg:rgba(163,43,37,.07);  --fbbd:rgba(163,43,37,.30); --fbink:#5C1512;
  --glow:0 0 0 1px rgba(var(--mist-400-rgb),.05), 0 8px 24px rgba(10,25,41,.08);
  --stagebg:linear-gradient(180deg, rgba(var(--ink-900-rgb),.9), rgba(var(--ink-800-rgb),.8));
}
/* Reading resolves to data-scheme="light", so the block above lands whole — but
   its accents are literal hexes picked for a blue-white page, and Reading repaints
   the base palette onto warm paper. Same argument, and same fix, as prefs.css
   makes for the hero's hardcoded teal rgba. The surfaces need no entry here: they
   are all rgba(var(--ink-*-rgb)) and follow the base tokens on their own. Hues are
   taken from the Reading ramp prefs.css already defines for .ra, so the two
   interactive layers agree on paper. */
html[data-theme="reading"] .togaf{
  --det:#0f5f66;
  --good:#0f6a4a;
  --bad:#96271c;
  --io:#1e40af;
  --exbg:rgba(122,74,18,.10); --exbd:rgba(122,74,18,.34); --exink:#4a2f08;
  --stbg:rgba(15,95,102,.09);  --stbd:rgba(15,95,102,.30); --stink:#0d4348;
  --fbbg:rgba(150,39,28,.08);  --fbbd:rgba(150,39,28,.30); --fbink:#5a1a12;
  --glow:0 0 0 1px rgba(var(--mist-400-rgb),.05), 0 8px 24px rgba(60,45,20,.10);
}
/* Inside .article-shell the grid column already sets the measure, so the
   original page wrapper only carries vertical rhythm. */
.togaf .tg-wrap{max-width:100%; margin:0; padding:0}
.togaf .tg-eyebrow{font-family:var(--font-mono); font-size:calc(12px * var(--fs, 1)); letter-spacing:.16em; color:var(--sig);
    text-transform:uppercase; font-weight:500; margin-bottom:8px}
.togaf h1{font-family:var(--font-display); font-size:calc(clamp(26px,3.4vw,44px) * var(--fs, 1)); margin:0 0 10px;
    letter-spacing:-.032em; font-weight:600; line-height:1.08; max-width:26ch}
.togaf h1 .tg-accent{color:var(--sig)}
.togaf h2{font-family:var(--font-display); font-size:calc(clamp(20px,2.3vw,29px) * var(--fs, 1)); letter-spacing:-.025em;
    font-weight:600; margin:0 0 6px}
.togaf .tg-kicker{font-family:var(--font-mono); font-size:calc(12px * var(--fs, 1)); letter-spacing:.15em;
    text-transform:uppercase; color:var(--faint); font-weight:500; margin:0 0 8px}
.togaf .tg-dek{color:var(--muted); font-size:calc(clamp(14px,1.5vw,17.5px) * var(--fs, 1)); line-height:1.55; max-width:78ch; margin:0}
.togaf section{margin-top:52px}
.togaf p{color:var(--muted); font-size:calc(15.5px * var(--fs, 1)); line-height:1.6; max-width:78ch}
.togaf p strong, .togaf .tg-dek strong{color:var(--ink); font-weight:500}
.togaf .tg-topbar{display:flex; justify-content:space-between; align-items:flex-start; gap:16px; flex-wrap:wrap}
.togaf .tg-tiles{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px; margin:20px 0 0}
.togaf .tg-tile{background:var(--panel); border:1px solid var(--line); border-top:3px solid var(--sig);
    border-radius:12px; padding:13px 15px}
.togaf .tg-tile.tg-amber{border-top-color:var(--agent)}
.togaf .tg-tile.tg-blue{border-top-color:var(--io)}
.togaf .tg-tile .tg-v{display:block; font-family:var(--font-display); font-size:calc(29px * var(--fs, 1)); font-weight:600;
    letter-spacing:-.03em; line-height:1.05}
.togaf .tg-tile .tg-l{display:block; font-size:calc(12.5px * var(--fs, 1)); color:var(--muted); margin-top:5px; line-height:1.35}
.togaf .tg-cards{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:14px; margin-top:18px}
.togaf .tg-card{background:var(--panel); border:1px solid var(--line); border-radius:13px; padding:15px 17px}
.togaf .tg-card h3{font-family:var(--font-display); font-size:calc(16.5px * var(--fs, 1)); font-weight:600;
    letter-spacing:-.015em; margin:0 0 7px; color:var(--sig)}
.togaf .tg-card p{font-size:calc(14px * var(--fs, 1)); line-height:1.55; margin:0; max-width:none}
.togaf .tg-quote{border-left:3px solid var(--sig); background:var(--panel); border-radius:0 12px 12px 0;
    padding:13px 17px; margin:18px 0 0; font-size:calc(16px * var(--fs, 1)); line-height:1.55; color:var(--ink); max-width:88ch}
.togaf .tg-quote.tg-warn{border-left-color:var(--agent)}
.togaf .tg-quote .tg-who{display:block; margin-top:7px; font-family:var(--font-mono);
    font-size:calc(12px * var(--fs, 1)); color:var(--faint); letter-spacing:.06em}
/* ---- wheel stage ---- */
  .tg-stage{position:relative; background:var(--stagebg); border:1px solid var(--line); border-radius:20px;
    padding:16px; box-shadow:var(--glow); overflow:hidden; margin-top:18px}
.togaf .tg-canvas-wrap{display:flex; justify-content:center}
.togaf .tg-canvas{position:relative; width:min(100%,880px); aspect-ratio:1.38; max-height:74vh; min-height:360px}
.togaf svg.tg-links{position:absolute; inset:0; width:100%; height:100%; z-index:1; pointer-events:none}
.togaf .tg-node{position:absolute; transform:translate(-50%,-50%); z-index:3; width:16.5%; min-width:92px;
    background:var(--panel); border:1px solid var(--line); border-radius:13px; padding:10px 12px; cursor:pointer;
    transition:transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s, border-color .3s, opacity .3s;
    opacity:.55; text-align:center; font-family:inherit; color:var(--ink)}
.togaf .tg-node:focus-visible{outline:2px solid var(--sig); outline-offset:2px; opacity:1}
.togaf .tg-node .tg-nlabel{font-family:var(--font-display); font-size:calc(clamp(12px,1.15vw,15.5px) * var(--fs, 1));
    font-weight:600; line-height:1.15; letter-spacing:-.01em}
.togaf .tg-node .tg-ntag{font-family:var(--font-mono); font-size:calc(12px * var(--fs, 1)); text-transform:uppercase;
    letter-spacing:.07em; color:var(--faint); margin-top:3px; font-weight:500}
.togaf .tg-node.tg-seen{opacity:1}
.togaf .tg-node.tg-active{opacity:1; border-color:var(--accent,var(--sig)); background:var(--panel2);
    box-shadow:0 0 0 1px var(--accent,var(--sig)), 0 0 24px -6px var(--accent,var(--sig));
    transform:translate(-50%,-50%) scale(1.07)}
.togaf .tg-node.tg-hub{width:21%; min-width:120px; border-width:1.5px}

@media (max-width:640px){
  .togaf .tg-canvas{aspect-ratio:0.82; min-height:430px}
  .togaf .tg-node{min-width:78px; padding:8px 9px}
  /* keep "G · Governance" from breaking after the separator */
  .togaf .tg-node .tg-nlabel{font-size:calc(12px * var(--fs, 1)); text-wrap:balance}
  .togaf .tg-node .tg-ntag{display:none}
  .togaf .tg-node.tg-hub{min-width:96px}
}
.togaf .tg-g-phase{--accent:var(--sig)}
.togaf .tg-g-gov{--accent:var(--det)}
.togaf .tg-g-req{--accent:var(--agent)}
.togaf path.tg-link{fill:none; stroke:var(--line2); stroke-width:2; opacity:.55}
.togaf path.tg-link.tg-spoke{stroke-dasharray:3 6; opacity:.35}
.togaf path.tg-link.tg-lit{stroke:var(--sig); opacity:.8}
.togaf path.tg-link.tg-flow{stroke:var(--sig); stroke-width:3; opacity:1; stroke-dasharray:7 9; animation:flow .7s linear infinite}
@keyframes flow{to{stroke-dashoffset:-32}
}

@media (prefers-reduced-motion: reduce){
  .togaf path.tg-link.tg-flow{animation:none}
  /* The autoplay walk is what lifts a node out of its dimmed state, and the walk
     does not run under reduced motion — so the old page showed nine faded boxes
     to exactly the readers who had opted out. Show the finished wheel instead. */
  .togaf .tg-node{opacity:1}
  .togaf .tg-node.tg-active{transform:translate(-50%,-50%)}
  .togaf *, .togaf *::before, .togaf *::after{
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important}
  .togaf .tg-pbtn:hover, .togaf .tg-snode:hover{transform:none}
}
.togaf .tg-gov{display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-top:14px; padding:11px 12px;
    background:var(--panel); border:1px solid var(--line); border-radius:13px}
.togaf .tg-gov .tg-gtitle{font-family:var(--font-mono); font-size:calc(12px * var(--fs, 1)); font-weight:500;
    letter-spacing:.12em; text-transform:uppercase; color:var(--faint); margin-right:4px}
.togaf .tg-chip{display:inline-flex; align-items:center; gap:6px; font-size:calc(13px * var(--fs, 1)); font-weight:500; color:var(--muted);
    background:var(--chipbg); border:1px solid var(--line); border-radius:999px; padding:6px 11px; cursor:default; transition:.3s}
.togaf .tg-chip i{width:7px;height:7px;border-radius:50%;background:var(--mute-a); transition:.3s}
.togaf .tg-chip.tg-on{color:var(--onsig); background:var(--sig); border-color:var(--sig)}
.togaf .tg-chip.tg-on i{background:var(--onsig)}
.togaf .tg-cap{margin-top:14px; min-height:62px; display:flex; gap:14px; align-items:center;
    background:var(--panel); border:1px solid var(--line); border-radius:13px; padding:13px 16px}
.togaf .tg-cap .tg-num{font-family:var(--font-mono); font-size:calc(12.5px * var(--fs, 1));font-weight:500;color:var(--sig); white-space:nowrap}
.togaf .tg-cap .tg-txt{font-size:calc(clamp(14px,1.55vw,18px) * var(--fs, 1)); font-weight:300; line-height:1.4}
.togaf .tg-cap .tg-txt b{color:var(--sig); font-weight:600}
.togaf .tg-controls{display:flex; align-items:center; gap:12px; margin-top:12px; flex-wrap:wrap}
.togaf .tg-btn{background:var(--panel); border:1px solid var(--line); color:var(--ink); width:44px;height:44px;
    border-radius:11px; cursor:pointer; font-size:calc(15px * var(--fs, 1)); display:grid; place-items:center; transition:.2s}
.togaf .tg-btn:hover{border-color:var(--sig); color:var(--sig)}
.togaf .tg-btn.tg-play{background:var(--sig); border-color:var(--sig); color:var(--onsig); width:50px;height:50px}
.togaf .tg-timeline{flex:1; min-width:200px; height:34px; position:relative; display:flex; align-items:center}
.togaf .tg-track{position:absolute; left:0; right:0; height:6px; background:var(--line); border-radius:999px; top:50%; transform:translateY(-50%)}
.togaf .tg-fill{position:absolute; left:0; height:6px; background:linear-gradient(90deg,var(--sig),var(--sig2));
    border-radius:999px; top:50%; transform:translateY(-50%); width:0%}
.togaf .tg-ticks{position:absolute; inset:0; display:flex; justify-content:space-between}
.togaf .tg-tick{width:13px;height:13px;border-radius:50%; background:var(--panel2); border:2px solid var(--line2);
    cursor:pointer; align-self:center; transition:.2s; z-index:2}
.togaf .tg-tick:focus-visible{outline:2px solid var(--sig); outline-offset:3px}
.togaf .tg-tick.tg-done{border-color:var(--sig)}
.togaf .tg-tick.tg-cur{border-color:var(--sig); background:var(--sig); box-shadow:0 0 10px var(--sig)}
/* ---- principles grid ---- */
.togaf .tg-pgrid{display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:10px; margin-top:18px}
.togaf .tg-pbtn{background:var(--panel); border:1px solid var(--line); border-radius:11px; padding:11px 13px;
    text-align:left; cursor:pointer; font-family:inherit; color:var(--ink); transition:.25s}
.togaf .tg-pbtn:hover{border-color:var(--sig); transform:translateY(-1px)}
.togaf .tg-pbtn:focus-visible{border-color:var(--sig); outline:2px solid var(--sig); outline-offset:2px}
.togaf .tg-pbtn .tg-pid{font-family:var(--font-mono); font-size:calc(12px * var(--fs, 1)); color:var(--sig);
    letter-spacing:.08em; font-weight:500}
.togaf .tg-pbtn .tg-pid .tg-abs{color:var(--agent)}
.togaf .tg-pbtn .tg-pname{display:block; font-family:var(--font-display); font-size:calc(14px * var(--fs, 1));
    font-weight:600; letter-spacing:-.01em; margin-top:3px; line-height:1.2}
/* ---- case strip ---- */
.togaf .tg-strip{display:flex; gap:0; align-items:stretch; margin-top:18px; flex-wrap:wrap}
.togaf .tg-snode{flex:1 1 150px; min-width:150px; background:var(--panel); border:1px solid var(--line);
    border-radius:12px; padding:12px 13px; cursor:pointer; font-family:inherit; color:var(--ink);
    text-align:left; transition:.25s; position:relative; margin-right:26px}
.togaf .tg-snode:last-child{margin-right:0}
.togaf .tg-snode::after{content:"→"; position:absolute; right:-22px; top:50%; transform:translateY(-50%);
    color:var(--faint); font-size:calc(16px * var(--fs, 1))}
.togaf .tg-snode:last-child::after{content:""}
.togaf .tg-snode:hover{border-color:var(--sig); transform:translateY(-2px)}
.togaf .tg-snode:focus-visible{border-color:var(--sig); outline:2px solid var(--sig); outline-offset:2px}
.togaf .tg-snode .tg-sk{font-family:var(--font-mono); font-size:calc(12px * var(--fs, 1)); letter-spacing:.1em;
    text-transform:uppercase; color:var(--faint)}
.togaf .tg-snode .tg-sname{display:block; font-family:var(--font-display); font-size:calc(14.5px * var(--fs, 1));
    font-weight:600; margin-top:4px; line-height:1.2}
.togaf .tg-snode.tg-warn{border-top:3px solid var(--agent)}
.togaf .tg-snode.tg-good{border-top:3px solid var(--good)}
.togaf .tg-snode.tg-det{border-top:3px solid var(--det)}
.togaf .tg-snode.tg-bad{border-top:3px solid var(--bad)}
/* ---- phase browser ---- */
.togaf .tg-ptabs{display:flex; gap:6px; flex-wrap:wrap; margin-top:18px}
.togaf .tg-ptab{background:var(--panel); border:1px solid var(--line); border-radius:10px; padding:9px 14px;
    cursor:pointer; font-family:var(--font-display); font-weight:600; font-size:calc(14px * var(--fs, 1));
    color:var(--muted); transition:.2s; letter-spacing:-.01em}
.togaf .tg-ptab .tg-pl{font-family:var(--font-mono); font-size:calc(12px * var(--fs, 1)); color:var(--sig);
    display:block; letter-spacing:.1em; font-weight:500}
.togaf .tg-ptab:hover{border-color:var(--sig); color:var(--ink)}
.togaf .tg-ptab.tg-on{background:var(--sig); border-color:var(--sig); color:var(--onsig)}
.togaf .tg-ptab.tg-on .tg-pl{color:var(--onsig)}
.togaf .tg-ppanel{background:var(--panel); border:1px solid var(--line); border-radius:16px; padding:20px 22px;
    margin-top:14px; box-shadow:var(--glow)}
.togaf .tg-ppanel .tg-phead{display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; margin-bottom:4px}
.togaf .tg-ppanel .tg-pletter{font-family:var(--font-display); font-size:calc(38px * var(--fs, 1)); font-weight:600;
    color:var(--sig); letter-spacing:-.03em; line-height:1}
.togaf .tg-ppanel h3{font-family:var(--font-display); font-size:calc(21px * var(--fs, 1)); font-weight:600;
    letter-spacing:-.02em; margin:0}
.togaf .tg-ppanel .tg-pstd{font-size:calc(13px * var(--fs, 1)); color:var(--faint); margin:2px 0 12px; font-style:italic}
.togaf .tg-pgridd{display:grid; grid-template-columns:1.05fr 1fr; gap:20px; align-items:start}

@media (max-width:820px){
  .togaf .tg-pgridd{grid-template-columns:1fr}
}
.togaf .tg-ppanel p{font-size:calc(14.5px * var(--fs, 1)); max-width:none}
.togaf .tg-ppanel .tg-ptiles{display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:10px; margin-top:14px}
.togaf .tg-ppanel .tg-ptile{background:var(--chipbg); border:1px solid var(--line); border-radius:10px; padding:10px 12px}
.togaf .tg-ppanel .tg-ptile .tg-v{display:block; font-family:var(--font-display); font-size:calc(22px * var(--fs, 1)); font-weight:600; letter-spacing:-.02em}
.togaf .tg-ppanel .tg-ptile .tg-l{display:block; font-size:calc(12px * var(--fs, 1)); color:var(--muted); margin-top:3px; line-height:1.3}
.togaf .tg-ppanel .tg-rq{border-left:3px solid var(--good); background:var(--stbg); border-radius:0 10px 10px 0;
    padding:10px 14px; margin-top:14px; font-size:calc(13.8px * var(--fs, 1)); line-height:1.55; color:var(--stink)}
.togaf .tg-ppanel .tg-rq b{color:inherit}
.togaf .tg-ppanel .tg-docs{margin-top:12px; font-family:var(--font-mono); font-size:calc(12px * var(--fs, 1)); color:var(--faint)}
/* per-phase visual primitives */
.togaf .tg-vflow{display:flex; flex-direction:column; gap:7px}
.togaf .tg-vrow{display:flex; align-items:center; gap:9px}
.togaf .tg-vrow .tg-vlab{flex:0 0 118px; font-size:calc(12px * var(--fs, 1)); color:var(--muted); text-align:right; line-height:1.25}
/* No opacity on the bar: it composites the LABEL as well as the fill, and that
   is what dropped every coloured bar under 4.5:1 (dark --bad measured 2.86:1,
   --io 2.07:1, light --agent 4.38:1). The fills are already tuned per scheme,
   so the bars carry them at full strength and the label uses --onsig — the
   same "ink that reads on the accent" token the default teal bar uses, and the
   one that flips with the scheme. #fff was only ever right on the light scheme. */
.togaf .tg-vrow .tg-vbar{height:22px; border-radius:5px; background:var(--sig); min-width:8px;
    display:flex; align-items:center; padding:0 8px; color:var(--onsig);
    font-family:var(--font-mono); font-size:calc(12px * var(--fs, 1)); white-space:nowrap}
.togaf .tg-vrow .tg-vbar.tg-amber{background:var(--agent)}
.togaf .tg-vrow .tg-vbar.tg-blue{background:var(--io); color:var(--onsig)}
.togaf .tg-vrow .tg-vbar.tg-mute{background:var(--mute-a); color:var(--ink)}
.togaf .tg-vrow .tg-vbar.tg-bad{background:var(--bad); color:var(--onsig)}
.togaf .tg-vnote{font-size:calc(12px * var(--fs, 1)); color:var(--faint); margin-top:6px}
.togaf .tg-vsteps{display:flex; gap:0; flex-wrap:wrap}
.togaf .tg-vstep{flex:1 1 70px; min-width:70px; background:var(--chipbg); border:1px solid var(--line);
    border-radius:9px; padding:8px 9px; margin-right:16px; position:relative}
.togaf .tg-vstep:last-child{margin-right:0}
.togaf .tg-vstep::after{content:"\2192"; position:absolute; right:-14px; top:50%; transform:translateY(-50%); color:var(--faint); font-size:calc(12px * var(--fs, 1))}
.togaf .tg-vstep:last-child::after{content:""}
.togaf .tg-vstep .tg-vk{font-family:var(--font-mono); font-size:calc(12px * var(--fs, 1)); letter-spacing:.08em; color:var(--faint); text-transform:uppercase}
.togaf .tg-vstep .tg-vn{display:block; font-family:var(--font-display); font-size:calc(12px * var(--fs, 1)); font-weight:600; margin-top:2px; line-height:1.2}
.togaf .tg-vstep .tg-vd{display:block; font-size:calc(12px * var(--fs, 1)); color:var(--muted); margin-top:2px}
.togaf .tg-vstep.tg-hot{border-color:var(--det); border-width:1.5px}
.togaf .tg-xchips{display:flex; gap:7px; flex-wrap:wrap}
.togaf .tg-xchip{font-size:calc(12px * var(--fs, 1)); color:var(--muted); border:1px solid var(--line); border-radius:999px; padding:5px 10px; background:var(--chipbg)}
.togaf .tg-xchip.tg-dead{text-decoration:line-through; color:var(--faint)}
.togaf .tg-xchip.tg-hot{border-color:var(--sig); color:var(--ink)}
.togaf .tg-xchip.tg-abs{border-color:var(--bad); color:var(--ink)}
/* ---- drawer ---- */
.togaf .tg-drawer{position:fixed; top:0; right:0; height:100%; width:min(540px,94vw); background:var(--drawerbg);
    border-left:1px solid var(--line); box-shadow:-20px 0 50px rgba(0,0,0,.35); transform:translateX(102%);
    transition:transform .35s cubic-bezier(.2,.8,.2,1); z-index:30; padding:26px 28px 44px; overflow-y:auto}
.togaf .tg-drawer.tg-open{transform:translateX(0)}
.togaf .tg-drawer .tg-x{position:absolute; top:16px; right:16px; cursor:pointer; color:var(--muted); font-size:calc(20px * var(--fs, 1)); background:none;border:0}
.togaf .tg-drawer .tg-dtag{display:inline-block; font-family:var(--font-mono); font-size:calc(12px * var(--fs, 1));
    font-weight:500;text-transform:uppercase;letter-spacing:.1em; color:var(--onsig); padding:4px 10px;
    border-radius:999px; margin-bottom:12px; background:var(--sig)}
.togaf .tg-drawer h3{font-family:var(--font-display); margin:0 0 8px; font-size:calc(24px * var(--fs, 1)); letter-spacing:-.02em; font-weight:600}
.togaf .tg-drawer .tg-lead{color:var(--muted); line-height:1.55; font-size:calc(15px * var(--fs, 1)); margin:0 0 4px}
.togaf .tg-drawer h5{margin:15px 0 5px; font-family:var(--font-mono); font-size:calc(12px * var(--fs, 1));
    font-weight:500; letter-spacing:.1em; text-transform:uppercase; color:var(--sig)}
.togaf .tg-drawer ul{margin:0; padding-left:18px}
.togaf .tg-drawer li{color:var(--muted); line-height:1.55; font-size:calc(14px * var(--fs, 1)); margin-bottom:6px}
.togaf .tg-drawer li code, .togaf .tg-drawer p code{font-family:var(--font-mono); font-size:calc(12px * var(--fs, 1));
    color:var(--ink); background:var(--chipbg); border:1px solid var(--line); padding:1px 5px; border-radius:5px}
.togaf .tg-drawer .tg-bx{margin:12px 0 2px; border-radius:10px; padding:11px 14px; border:1px solid}
.togaf .tg-drawer .tg-ex{background:var(--exbg); border-color:var(--exbd)}
.togaf .tg-drawer .tg-ex h5{margin:0 0 4px; color:var(--agent)}
.togaf .tg-drawer .tg-ex p{margin:0; color:var(--exink); font-size:calc(13.8px * var(--fs, 1)); line-height:1.55}
.togaf .tg-drawer .tg-st{background:var(--stbg); border-color:var(--stbd)}
.togaf .tg-drawer .tg-st h5{margin:0 0 4px; color:var(--good)}
.togaf .tg-drawer .tg-st p{margin:0; color:var(--stink); font-size:calc(13.8px * var(--fs, 1)); line-height:1.55}
.togaf .tg-drawer .tg-fb{background:var(--fbbg); border-color:var(--fbbd)}
.togaf .tg-drawer .tg-fb h5{margin:0 0 4px; color:var(--bad)}
.togaf .tg-drawer .tg-fb p{margin:0; color:var(--fbink); font-size:calc(13.8px * var(--fs, 1)); line-height:1.55}
.togaf .tg-backdrop{position:fixed; inset:0; background:rgba(4,10,7,.5); opacity:0; pointer-events:none; transition:.3s; z-index:29}
html[data-theme="light"] .togaf .tg-backdrop{background:rgba(8,32,20,.28)}
.togaf .tg-backdrop.tg-open{opacity:1; pointer-events:auto}
.togaf .tg-hint{font-size:calc(12.5px * var(--fs, 1));color:var(--faint); margin-top:8px}
.togaf kbd{font-family:var(--font-mono); font-size:calc(12px * var(--fs, 1)); border:1px solid var(--line2);
    border-radius:4px; padding:1px 5px; background:var(--chipbg)}
.togaf .tg-foot{display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-top:56px;
    padding-top:18px; border-top:1px solid var(--line); color:var(--muted); font-size:calc(13px * var(--fs, 1))}
.togaf .tg-foot .tg-stack{font-family:var(--font-mono); font-size:calc(12px * var(--fs, 1))}

/* ---- utilities that replace the original page's inline style attributes.
        The site's CSP is style-src 'self' with no unsafe-inline, so a style=""
        would simply not apply. ---- */
.togaf .tg-flush{margin-bottom:0}
.togaf .tg-quote.tg-quote-gap{margin-top:20px}
.togaf .tg-ord{font-size:calc(16px * var(--fs, 1))}
.togaf .tg-vnote.tg-vnote-tight{margin:0 0 4px}
.togaf .tg-vnote.tg-vnote-gap{margin-bottom:6px}
.togaf .tg-xchips.tg-xchips-gap{margin-bottom:10px}

/* ---- narrow viewports: the phase-panel rows.
   This block has to sit AFTER the .tg-vrow rules above, not with the other
   max-width:640px rules near the top — same specificity, so source order decides.

   The measured cause of the original page's 447px floor at every viewport below
   it: a rigid 118px label that could not shrink next to a nowrap bar that could
   not wrap, so each row held a ~408px min-content, the phase panel overflowed,
   and body{overflow-x:hidden} clipped the right-hand side without a scrollbar.
   The bar keeps its data-w width on wide screens and goes full-width here, so
   flex-basis rather than width:100% — the JS still writes an inline width. ---- */
@media (max-width:640px){
  .togaf .tg-vrow{flex-wrap:wrap; gap:4px}
  .togaf .tg-vrow .tg-vlab{flex:1 1 100%; text-align:left}
  .togaf .tg-vrow .tg-vbar{
    flex:1 1 100%; width:auto !important; min-width:0;
    white-space:normal; height:auto; min-height:22px; padding:5px 9px; line-height:1.35}
  .togaf .tg-ppanel{padding:16px 14px}
  .togaf .tg-ptiles{grid-template-columns:repeat(auto-fit,minmax(min(110px,100%),1fr))}
}

/* ---- shell width.
   article.css caps .article-shell at 1180px, which leaves this page's content
   column around 760px once the 240px table of contents and the gap are taken
   out. That is right for a 68ch prose column and wrong for the ADM wheel: the
   nodes are sized as a percentage of the canvas, so a narrower canvas does not
   scale their type down with it and the ring gets crowded. Paragraphs here are
   capped at 78ch by .togaf p, so widening the shell lengthens the diagrams
   without lengthening the lines. ---- */
@media (min-width:1280px){
  .togaf-shell{max-width:1400px}
}