/* Distributed Systems - shared stylesheet. All design lives here; pages carry no styles of their own
   (a page may add a small <style> block for something truly page-specific). */
/* ============================= TOKENS ============================= */
:root{
  color-scheme:light;
  --bg:#f3f4f7;
  --surface:#ffffff;
  --surface-2:#eaedf3;
  --surface-3:#dfe3ec;
  --ink:#141a2e;
  --ink-soft:#465071;
  --ink-faint:#7a819b;
  --line:#dbe0ea;
  --line-strong:#bcc4d4;
  --accent:#0b6e8a;        /* signal teal: links, active nav, key ideas */
  --accent-bg:#d9eef3;
  --good:#12765b;  --good-bg:#dbefe7;
  --bad:#b23b2a;   --bad-bg:#f7e1dc;
  --gold:#946410;  --gold-bg:#f3e7c9;   /* exam */
  --violet:#6b46b8; --violet-bg:#ece5f8;

  /* UML palette */
  --u-stroke:#243a4c;
  --u-fill:#f4fafb;
  --u-head:#d9ecf1;
  --u-note:#fff6cf;
  --u-note-line:#c9a73c;
  --u-state:#eef6f2;
  --u-state-line:#2c6b57;
  --u-uc:#f4f1fd;
  --u-life:#8d95ae;
  --u-frame:#56607e;
  /* Role colours, for colour-coding participants consistently (pattern roles, layers, before/after). */
  --r1:#2453c4; --r1-bg:#e3ebfc;
  --r2:#c0472f; --r2-bg:#fbe5df;
  --r3:#13805f; --r3-bg:#dcf1e8;
  --r4:#7a4cc7; --r4-bg:#eee6fb;
  --r5:#a26a0a; --r5-bg:#f6ebcf;

  --shadow: 0 1px 2px rgba(20,26,46,.05), 0 10px 28px -14px rgba(20,26,46,.22);
  --radius-s:5px;
  --radius-m:10px;
  --font-display:'Bricolage Grotesque', ui-sans-serif, system-ui, sans-serif;
  --font-body:'Source Serif 4', ui-serif, Georgia, serif;
  --font-sans:'IBM Plex Sans', ui-sans-serif, system-ui, sans-serif;
  --font-mono:'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --bg:#10131c; --surface:#171b27; --surface-2:#1e2331; --surface-3:#272d3e;
    --ink:#e8eaf2; --ink-soft:#adb4ca; --ink-faint:#7a819b;
    --line:#2a3042; --line-strong:#3b4258;
    --accent:#5cc6de; --accent-bg:#12313b;
    --good:#4fc9a3; --good-bg:#16352c;
    --bad:#f08670; --bad-bg:#3b2320;
    --gold:#e0b04f; --gold-bg:#382d16;
    --violet:#b69af0; --violet-bg:#2b2342;
    --u-stroke:#c3d0db; --u-fill:#172229; --u-head:#1c3540; --u-note:#3a3420; --u-note-line:#a58a3a;
    --u-state:#17302a; --u-state-line:#6cc7a6; --u-uc:#262140; --u-life:#69718a; --u-frame:#9aa3bd;
    --r1:#86a8ff; --r1-bg:#1d2a4c; --r2:#f2937d; --r2-bg:#3d2420; --r3:#5fd1ab; --r3-bg:#15362c;
    --r4:#bb9cf5; --r4-bg:#2c2445; --r5:#e6b65a; --r5-bg:#382c13;
    --shadow: 0 1px 2px rgba(0,0,0,.3), 0 12px 32px -16px rgba(0,0,0,.6);
  }
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --bg:#10131c; --surface:#171b27; --surface-2:#1e2331; --surface-3:#272d3e;
  --ink:#e8eaf2; --ink-soft:#adb4ca; --ink-faint:#7a819b;
  --line:#2a3042; --line-strong:#3b4258;
  --accent:#5cc6de; --accent-bg:#12313b;
  --good:#4fc9a3; --good-bg:#16352c;
  --bad:#f08670; --bad-bg:#3b2320;
  --gold:#e0b04f; --gold-bg:#382d16;
  --violet:#b69af0; --violet-bg:#2b2342;
  --u-stroke:#c3d0db; --u-fill:#172229; --u-head:#1c3540; --u-note:#3a3420; --u-note-line:#a58a3a;
  --u-state:#17302a; --u-state-line:#6cc7a6; --u-uc:#262140; --u-life:#69718a; --u-frame:#9aa3bd;
  --r1:#86a8ff; --r1-bg:#1d2a4c; --r2:#f2937d; --r2-bg:#3d2420; --r3:#5fd1ab; --r3-bg:#15362c;
  --r4:#bb9cf5; --r4-bg:#2c2445; --r5:#e6b65a; --r5-bg:#382c13;
  --shadow: 0 1px 2px rgba(0,0,0,.3), 0 12px 32px -16px rgba(0,0,0,.6);
}

/* ============================= RESET / BASE ============================= */
*,*::before,*::after{box-sizing:border-box}
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0; background:var(--bg); color:var(--ink); font-family:var(--font-body);
  font-size:17px; line-height:1.68; -webkit-font-smoothing:antialiased;
}
::selection{ background:var(--accent-bg); color:var(--ink); }
a{ color:var(--accent); text-decoration-thickness:1px; text-underline-offset:2px; }
a:hover{ text-decoration-thickness:2px; }
:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; border-radius:2px; }
@media (prefers-reduced-motion: reduce){ *{ animation-duration:.001ms !important; transition-duration:.001ms !important; } }

/* ============================= APP SHELL ============================= */
.app{ display:flex; min-height:100vh; }

.sidebar{
  width:300px; flex:0 0 300px; height:100vh; position:sticky; top:0; overflow-y:auto;
  background:var(--surface-2); border-right:1px solid var(--line);
  display:flex; flex-direction:column; scrollbar-width:thin;
}
.sidebar-head{ padding:26px 24px 18px; border-bottom:1px solid var(--line); }
.brand-mark{ display:block; width:40px; height:40px; margin-bottom:14px; color:var(--accent); }
.brand-code{
  font-family:var(--font-mono); font-size:11.5px; letter-spacing:.14em;
  color:var(--ink-faint); text-transform:uppercase; display:block; margin-bottom:4px;
}
.brand-title a{ color:inherit; text-decoration:none; }
.brand-title{ font-family:var(--font-display); font-weight:700; font-size:21px; line-height:1.12; color:var(--ink); text-wrap:balance; letter-spacing:-.01em; }
.brand-sub{ font-family:var(--font-sans); font-size:12.5px; color:var(--ink-soft); margin-top:7px; line-height:1.5; }
.theme-toggle{ margin-top:16px; display:inline-flex; gap:2px; padding:3px; background:var(--surface); border:1px solid var(--line); border-radius:20px; }
.theme-toggle button{
  border:none; background:transparent; color:var(--ink-faint); font-family:var(--font-mono);
  font-size:10.5px; letter-spacing:.06em; padding:5px 10px; border-radius:16px; cursor:pointer;
}
.theme-toggle button.active{ background:var(--ink); color:var(--bg); }

.nav-scroll{ flex:1; padding:10px 12px 32px; }
.nav-group{ margin-top:3px; }
.nav-group-head{ display:flex; align-items:stretch; border-radius:var(--radius-s); }
.nav-group-head:hover{ background:var(--surface-3); }
.nav-group-btn{
  flex:1 1 auto; display:flex; align-items:center; gap:10px; text-decoration:none;
  padding:9px 12px; font-family:var(--font-sans); font-size:13.5px; font-weight:500; color:var(--ink-soft);
}
.nav-group-head:hover .nav-group-btn, .nav-group.active>.nav-group-head .nav-group-btn{ color:var(--ink); }
.nav-group.active>.nav-group-head .nav-group-btn{ font-weight:600; }
.chev-btn{ background:transparent; border:none; cursor:pointer; color:var(--ink-faint); padding:0 12px; display:flex; align-items:center; }
.chev-btn .chev{ display:inline-block; font-size:9px; transition:transform .15s ease; }
.nav-group.open .chev-btn .chev{ transform:rotate(90deg); }
.nav-group-num{
  min-width:26px; height:22px; border-radius:6px; flex:0 0 auto; display:inline-flex; align-items:center; padding:0 5px;
  justify-content:center; font-family:var(--font-mono); font-size:10.5px; font-weight:600; border:1.3px solid var(--line-strong); color:var(--ink-faint);
}
.nav-group.active .nav-group-num{ border-color:var(--accent); color:var(--accent); background:var(--accent-bg); }
.nav-list{ list-style:none; margin:2px 0 8px; padding:0 0 0 34px; display:none; }
.nav-group.open .nav-list{ display:block; }
.nav-list li a{
  display:block; text-decoration:none; color:var(--ink-soft); font-family:var(--font-sans); font-size:13px; line-height:1.4;
  padding:5px 10px 5px 12px; border-left:1.5px solid var(--line); margin-left:1px;
}
.nav-list li a .n{ font-family:var(--font-mono); font-size:11px; color:var(--ink-faint); margin-right:6px; }
.nav-list li a:hover{ color:var(--ink); border-left-color:var(--ink-faint); }
.nav-list li a.active{ color:var(--accent); border-left-color:var(--accent); font-weight:600; }
.nav-list li a.active .n{ color:var(--accent); }

.main{ flex:1 1 auto; min-width:0; }

.page-hero{ padding:64px 56px 44px; max-width:1080px; border-bottom:1px solid var(--line); position:relative; }
.eyebrow{
  font-family:var(--font-mono); font-size:12px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-faint); display:flex; align-items:center; gap:10px; margin-bottom:18px;
}
.eyebrow .dot{ width:8px; height:8px; border-radius:2px; background:var(--accent); flex:0 0 auto; transform:rotate(45deg); }
.page-title{
  font-family:var(--font-display); font-weight:700; font-size:clamp(34px,5vw,56px);
  line-height:1.03; text-wrap:balance; margin:0 0 20px; letter-spacing:-.02em;
}
.page-dek{ font-size:19px; line-height:1.6; color:var(--ink-soft); max-width:64ch; text-wrap:pretty; margin:0; }
.page-body{ padding:8px 56px 40px; max-width:1080px; }

/* "What you'll be able to do" strip under the hero */
.outcomes{ display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:12px; margin:28px 0 0; padding:0; list-style:none; max-width:none; }
.outcomes li{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-m); padding:12px 14px; font-family:var(--font-sans); font-size:14px; line-height:1.45; color:var(--ink-soft); margin:0; }
.outcomes li b{ display:block; font-family:var(--font-mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--accent); margin-bottom:4px; font-weight:600; }

.section{ padding:56px 0; border-bottom:1px solid var(--line); }
.section:last-child{ border-bottom:none; }
.section-kicker{ font-family:var(--font-mono); font-size:12.5px; color:var(--accent); letter-spacing:.05em; margin-bottom:8px; font-weight:600; }
.section h2{ font-family:var(--font-display); font-weight:700; font-size:32px; line-height:1.15; margin:0 0 22px; text-wrap:balance; scroll-margin-top:24px; letter-spacing:-.015em; }
.section h3{ font-family:var(--font-display); font-weight:650; font-size:22px; line-height:1.25; margin:40px 0 14px; scroll-margin-top:24px; letter-spacing:-.01em; }
.section h4{ font-family:var(--font-sans); font-weight:600; font-size:16px; margin:26px 0 10px; color:var(--ink); }
.section p{ margin:0 0 18px; max-width:70ch; }
.section p.wide{ max-width:none; }
.section ul, .section ol{ margin:0 0 18px; padding-left:1.3em; max-width:70ch; }
.section li{ margin-bottom:8px; }
.section li::marker{ color:var(--ink-faint); }
.section strong{ font-weight:650; color:var(--ink); }
.section em{ font-style:italic; }
.lead{ font-size:19px; color:var(--ink-soft); }

/* ============================= BOXES ============================= */
.box{ border:1px solid var(--line-strong); border-radius:var(--radius-m); background:var(--surface); padding:22px 26px; margin:26px 0; }
.box-label{ font-family:var(--font-mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; display:inline-flex; align-items:center; gap:7px; margin-bottom:12px; font-weight:600; }
.box-label::before{ content:""; width:7px; height:7px; border-radius:2px; background:currentColor; transform:rotate(45deg); }
.box.definition{ border-left:4px solid var(--accent); }
.box.definition .box-label{ color:var(--accent); }
.box.principle{ border-left:4px solid var(--violet); background:linear-gradient(180deg,var(--violet-bg),var(--surface) 64px); }
.box.principle .box-label{ color:var(--violet); }
.box.example{ border-left:4px solid var(--ink-faint); }
.box.example .box-label{ color:var(--ink-faint); }
.box.intuition{ border:1px dashed var(--line-strong); background:transparent; }
.box.intuition .box-label{ color:var(--ink-soft); }
.box.warning{ border-left:4px solid var(--bad); background:linear-gradient(180deg,var(--bad-bg),var(--surface) 70px); }
.box.warning .box-label{ color:var(--bad); }
.box.exam{ border-left:4px solid var(--gold); background:linear-gradient(180deg,var(--gold-bg),var(--surface) 70px); }
.box.exam .box-label{ color:var(--gold); }
.box.good{ border-left:4px solid var(--good); background:linear-gradient(180deg,var(--good-bg),var(--surface) 70px); }
.box.good .box-label{ color:var(--good); }
.box.recap{ border:1.5px solid var(--accent); background:var(--accent-bg); }
.box.recap .box-label{ color:var(--accent); }
.box p:last-child, .box ul:last-child, .box ol:last-child, .box .table-wrap:last-child, .box figure:last-child{ margin-bottom:0; }
.box > *:first-child:not(.box-label){ margin-top:0; }

/* Steps of a recipe / procedure */
ol.recipe{ counter-reset:step; list-style:none; padding-left:0; max-width:72ch; }
ol.recipe > li{ counter-increment:step; position:relative; padding:2px 0 2px 46px; margin-bottom:14px; }
ol.recipe > li::before{ content:counter(step); position:absolute; left:0; top:1px; width:30px; height:30px; border-radius:50%;
  background:var(--accent); color:var(--surface); font-family:var(--font-mono); font-size:13px; font-weight:700; display:flex; align-items:center; justify-content:center; }

/* Tags / pills */
.tag{ display:inline-flex; align-items:center; gap:5px; font-family:var(--font-mono); font-size:11px; padding:2px 9px; border-radius:20px; letter-spacing:.03em; vertical-align:2px; white-space:nowrap; }
.tag.exam{ background:var(--gold-bg); color:var(--gold); }
.tag.good{ background:var(--good-bg); color:var(--good); }
.tag.bad{ background:var(--bad-bg); color:var(--bad); }
.tag.neutral{ background:var(--surface-3); color:var(--ink-soft); }
.tag.accent{ background:var(--accent-bg); color:var(--accent); }

/* Coloured inline role names, matching the r1..r5 diagram colours */
.role{ font-family:var(--font-sans); font-weight:600; padding:0 5px; border-radius:4px; white-space:nowrap; }
.role.r1{ color:var(--r1); background:var(--r1-bg); } .role.r2{ color:var(--r2); background:var(--r2-bg); }
.role.r3{ color:var(--r3); background:var(--r3-bg); } .role.r4{ color:var(--r4); background:var(--r4-bg); }
.role.r5{ color:var(--r5); background:var(--r5-bg); }

/* ============================= TABLES ============================= */
.table-wrap{ overflow-x:auto; margin:24px 0; border:1px solid var(--line); border-radius:var(--radius-m); background:var(--surface); }
table{ border-collapse:collapse; width:100%; font-family:var(--font-sans); font-size:14.5px; line-height:1.5; }
table caption{ text-align:left; padding:12px 16px 0; font-family:var(--font-mono); font-size:11.5px; color:var(--ink-faint); }
th,td{ padding:10px 15px; text-align:left; vertical-align:top; border-bottom:1px solid var(--line); }
th{ background:var(--surface-2); font-weight:600; font-size:13px; color:var(--ink-soft); }
tr:last-child td{ border-bottom:none; }
tbody tr:hover td{ background:var(--surface-2); }
td code, th code{ white-space:nowrap; }
table.center td, table.center th{ text-align:center; }

/* ============================= FIGURES & UML ============================= */
figure.diagram{ margin:30px 0; }
figure.diagram .fig-scroll{ overflow-x:auto; border:1px solid var(--line); border-radius:var(--radius-m); background:var(--surface); }
figure.diagram svg{ width:100%; height:auto; display:block; }
/* .wide figures keep a minimum width on phones and scroll sideways instead of shrinking the text */
figure.diagram.wide svg{ min-width:640px; }
figure.diagram figcaption{ font-family:var(--font-sans); font-size:13.5px; color:var(--ink-soft); margin-top:10px; line-height:1.5; max-width:80ch; }
figure.diagram figcaption b{ color:var(--ink); }
.fig-pair{ display:grid; grid-template-columns:1fr 1fr; gap:20px; margin:30px 0; }
.fig-pair figure.diagram{ margin:0; }
@media (max-width:760px){ .fig-pair{ grid-template-columns:1fr; } }

svg.uml{ font-family:var(--font-sans); font-size:13px; color:var(--ink); }
svg.uml :where(text:not([fill])){ fill:var(--ink); }  /* :where keeps this weaker than .soft, .mult, .t-r1 etc. */
svg.uml .mono, svg.uml .mem, svg.uml .msg{ font-family:var(--font-mono); font-size:12px; }
svg.uml .name{ font-weight:600; font-size:13.5px; }
svg.uml .ital{ font-style:italic; }
svg.uml .ul{ text-decoration:underline; }
svg.uml .small{ font-size:11.5px; }
svg.uml .tiny{ font-size:10.5px; }
svg.uml .soft{ fill:var(--ink-soft); }
svg.uml .faint{ fill:var(--ink-faint); }
svg.uml .stereo{ font-size:11.5px; fill:var(--ink-soft); }
svg.uml .mult{ font-family:var(--font-mono); font-size:11.5px; fill:var(--ink-soft); }
svg.uml .lbl{ font-size:12px; fill:var(--ink-soft); font-style:italic; }
svg.uml .t-acc{ fill:var(--accent); } svg.uml .t-good{ fill:var(--good); } svg.uml .t-bad{ fill:var(--bad); } svg.uml .t-gold{ fill:var(--gold); }
svg.uml .t-r1{ fill:var(--r1); } svg.uml .t-r2{ fill:var(--r2); } svg.uml .t-r3{ fill:var(--r3); } svg.uml .t-r4{ fill:var(--r4); } svg.uml .t-r5{ fill:var(--r5); }
svg.uml .bold{ font-weight:650; }

/* class boxes: <rect class="cls"> outer, <rect class="cls-head"> header band, <line class="cls-sep"> compartment rules */
svg.uml .cls{ fill:var(--u-fill); stroke:var(--u-stroke); stroke-width:1.4; }
svg.uml .cls-head{ fill:var(--u-head); stroke:none; }
svg.uml .cls-sep{ stroke:var(--u-stroke); stroke-width:1; }
svg.uml .iface{ fill:var(--u-fill); stroke:var(--u-stroke); stroke-width:1.4; stroke-dasharray:none; }
/* lines */
svg.uml .ln{ stroke:var(--u-stroke); stroke-width:1.4; fill:none; }
svg.uml .dash{ stroke-dasharray:6 4; }
svg.uml .dot{ stroke-dasharray:2 3; }
svg.uml .thick{ stroke-width:2.2; }
/* notes */
svg.uml .note{ fill:var(--u-note); stroke:var(--u-note-line); stroke-width:1.2; }
svg.uml .note-link{ stroke:var(--u-note-line); stroke-width:1.2; stroke-dasharray:4 3; fill:none; }
/* sequence diagrams */
svg.uml .life{ stroke:var(--u-life); stroke-width:1.2; stroke-dasharray:6 5; fill:none; }
svg.uml .lifebox{ fill:var(--u-fill); stroke:var(--u-stroke); stroke-width:1.4; }
svg.uml .act{ fill:var(--surface); stroke:var(--u-stroke); stroke-width:1.2; }
svg.uml .frame{ fill:none; stroke:var(--u-frame); stroke-width:1.2; }
svg.uml .frame-tag{ fill:var(--surface-2); stroke:var(--u-frame); stroke-width:1.2; }
svg.uml .frame-div{ stroke:var(--u-frame); stroke-width:1.1; stroke-dasharray:6 4; }
svg.uml .guard{ font-family:var(--font-mono); font-size:11.5px; fill:var(--ink-soft); }
/* use cases */
svg.uml .uc{ fill:var(--u-uc); stroke:var(--u-stroke); stroke-width:1.4; }
svg.uml .sysbox{ fill:none; stroke:var(--u-stroke); stroke-width:1.4; }
/* state machines */
svg.uml .state{ fill:var(--u-state); stroke:var(--u-state-line); stroke-width:1.5; }
svg.uml .state-sep{ stroke:var(--u-state-line); stroke-width:1; }
svg.uml .pseudo{ fill:var(--u-stroke); stroke:none; }
svg.uml .final-ring{ fill:none; stroke:var(--u-stroke); stroke-width:1.5; }
svg.uml .choice{ fill:var(--surface); stroke:var(--u-stroke); stroke-width:1.4; }
/* packages / components / nodes */
svg.uml .pkg{ fill:var(--u-fill); stroke:var(--u-stroke); stroke-width:1.4; }
svg.uml .pkg-tab{ fill:var(--u-head); stroke:var(--u-stroke); stroke-width:1.4; }
svg.uml .node3d{ fill:var(--u-head); stroke:var(--u-stroke); stroke-width:1.3; }
/* generic plain shapes for non-UML explanatory diagrams */
svg.uml .card{ fill:var(--surface); stroke:var(--line-strong); stroke-width:1.2; }
svg.uml .card-2{ fill:var(--surface-2); stroke:var(--line-strong); stroke-width:1.2; }
svg.uml .card-acc{ fill:var(--accent-bg); stroke:var(--accent); stroke-width:1.4; }
svg.uml .card-good{ fill:var(--good-bg); stroke:var(--good); stroke-width:1.4; }
svg.uml .card-bad{ fill:var(--bad-bg); stroke:var(--bad); stroke-width:1.4; }
svg.uml .card-gold{ fill:var(--gold-bg); stroke:var(--gold); stroke-width:1.4; }
svg.uml .card-violet{ fill:var(--violet-bg); stroke:var(--violet); stroke-width:1.4; }
svg.uml .ln-acc{ stroke:var(--accent); } svg.uml .ln-good{ stroke:var(--good); } svg.uml .ln-bad{ stroke:var(--bad); } svg.uml .ln-gold{ stroke:var(--gold); } svg.uml .ln-faint{ stroke:var(--line-strong); }
svg.uml .fill-acc{ fill:var(--accent); } svg.uml .fill-good{ fill:var(--good); } svg.uml .fill-bad{ fill:var(--bad); }
/* role tints: add r1..r5 to a .cls/.lifebox/.uc/.state/.card shape (and .ln for a line) */
svg.uml .r1{ fill:var(--r1-bg); stroke:var(--r1); } svg.uml .r2{ fill:var(--r2-bg); stroke:var(--r2); }
svg.uml .r3{ fill:var(--r3-bg); stroke:var(--r3); } svg.uml .r4{ fill:var(--r4-bg); stroke:var(--r4); }
svg.uml .r5{ fill:var(--r5-bg); stroke:var(--r5); }
svg.uml .ln.r1, svg.uml .ln.r2, svg.uml .ln.r3, svg.uml .ln.r4, svg.uml .ln.r5{ fill:none; }
svg.uml .cls-head.r1{ fill:var(--r1); opacity:.16; stroke:none; } svg.uml .cls-head.r2{ fill:var(--r2); opacity:.16; stroke:none; }
svg.uml .cls-head.r3{ fill:var(--r3); opacity:.16; stroke:none; } svg.uml .cls-head.r4{ fill:var(--r4); opacity:.16; stroke:none; }
svg.uml .cls-head.r5{ fill:var(--r5); opacity:.16; stroke:none; }
/* highlight ring for "look here" */
svg.uml .hl{ fill:none; stroke:var(--gold); stroke-width:2.4; stroke-dasharray:none; }
svg.uml .hl-soft{ fill:var(--gold-bg); stroke:none; opacity:.85; }
svg.uml .badge{ fill:var(--gold); }
svg.uml .badge-t{ fill:var(--surface); font-family:var(--font-mono); font-size:11px; font-weight:700; }
/* stick figure actors: <use href="#u-actor" x=".." y=".."/> (32 wide, 56 tall, origin top-left) */
svg.uml use.actor{ color:var(--u-stroke); }

/* ============================= INTERACTIVE: STEPPER ============================= */
.panel{ border:1px solid var(--line-strong); border-radius:var(--radius-m); background:var(--surface); padding:24px 26px; margin:30px 0; box-shadow:var(--shadow); }
.panel-head{ display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:16px; flex-wrap:wrap; }
.panel-title{ font-family:var(--font-display); font-weight:700; font-size:19px; }
.btnrow{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
button.step-btn{
  font-family:var(--font-mono); font-size:12px; letter-spacing:.03em; padding:8px 14px; border-radius:20px;
  border:1px solid var(--line-strong); background:var(--surface); color:var(--ink); cursor:pointer;
  transition:background .12s ease, color .12s ease, border-color .12s ease;
}
button.step-btn:hover{ background:var(--surface-2); }
button.step-btn.primary{ background:var(--accent); color:#fff; border-color:var(--accent); }
:root[data-theme="dark"] button.step-btn.primary{ color:#0f1424; }
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) button.step-btn.primary{ color:#0f1424; } }
button.step-btn:disabled{ opacity:.4; cursor:not-allowed; }
.step-count{ font-family:var(--font-mono); font-size:12px; color:var(--ink-faint); min-width:56px; text-align:center; }
.stepper .stage{ border:1px solid var(--line); border-radius:var(--radius-m); overflow-x:auto; background:var(--surface); }
.stepper .stage svg{ width:100%; height:auto; display:block; }
.stepper.wide .stage svg{ min-width:640px; }
.stepper [data-step], .stepper [data-only]{ transition:opacity .25s ease; }
.stepper .is-hidden{ opacity:0; pointer-events:none; }
.stepper .is-ghost{ opacity:.18; }
.stepper .narration{ font-size:15.5px; color:var(--ink-soft); border-top:1px solid var(--line); margin-top:16px; padding-top:14px; min-height:52px; }
.stepper .narration strong{ color:var(--ink); }
.stepper ol.steps{ display:none; }

/* ============================= INTERACTIVE: TABS ============================= */
.tabs{ margin:28px 0; }
.tab-btns{ display:flex; gap:4px; flex-wrap:wrap; border-bottom:1px solid var(--line-strong); }
.tab-btns button{ font-family:var(--font-sans); font-size:14px; font-weight:500; padding:9px 16px; border:1px solid transparent; border-bottom:none;
  background:transparent; color:var(--ink-soft); cursor:pointer; border-radius:var(--radius-s) var(--radius-s) 0 0; margin-bottom:-1px; }
.tab-btns button:hover{ color:var(--ink); background:var(--surface-2); }
.tab-btns button.active{ background:var(--surface); color:var(--accent); border-color:var(--line-strong); font-weight:600; }
.tab-panel{ display:none; padding:20px 0 0; }
.tab-panel.active{ display:block; }
.tab-panel > *:last-child{ margin-bottom:0; }

/* ============================= QUIZ ============================= */
details.quiz{ border:1px dashed var(--line-strong); border-radius:var(--radius-m); padding:16px 24px; margin:22px 0; background:var(--surface); }
details.quiz summary{ cursor:pointer; list-style:none; display:flex; align-items:baseline; gap:14px; }
details.quiz summary::-webkit-details-marker{ display:none; }
details.quiz summary .box-label{ margin-bottom:0; color:var(--accent); flex:0 0 auto; }
details.quiz summary::after{ content:"show answer"; margin-left:auto; padding-left:14px; font-family:var(--font-mono); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--accent); flex:0 0 auto; white-space:nowrap; }
details.quiz[open] summary::after{ content:"hide answer"; }
details.quiz .answer{ margin-top:14px; padding-top:14px; border-top:1px dashed var(--line); }
details.quiz .answer p:last-child, details.quiz .answer ul:last-child{ margin-bottom:0; }
details.quiz ol.opts{ list-style:upper-alpha; margin:12px 0 0; }
@media (max-width:560px){
  details.quiz{ padding:14px 16px; }
  details.quiz summary{ flex-wrap:wrap; row-gap:8px; }
  details.quiz summary::after{ order:1; }
  details.quiz summary > span:not(.box-label){ order:2; flex:1 1 100%; min-width:0; }
}

/* ============================= CODE ============================= */
code{ font-family:var(--font-mono); font-size:.86em; background:var(--surface-2); padding:1px 5px; border-radius:4px; }
pre.code{ font-family:var(--font-mono); font-size:13.5px; line-height:1.6; background:var(--surface); border:1px solid var(--line); border-left:4px solid var(--accent);
  border-radius:var(--radius-m); padding:16px 20px; overflow-x:auto; margin:22px 0; tab-size:4; }
pre.code code{ background:none; padding:0; font-size:inherit; }
pre.code .k{ color:var(--violet); font-weight:600; }
pre.code .s{ color:var(--good); }
pre.code .c{ color:var(--ink-faint); font-style:italic; }
pre.code .t{ color:var(--accent); }
pre.code .n{ color:var(--r5); }
pre.code .a{ color:var(--r2); }
pre.code mark{ background:var(--gold-bg); color:inherit; border-radius:3px; padding:0 2px; }
pre.text{ font-family:var(--font-mono); font-size:13.5px; line-height:1.6; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-m); padding:16px 20px; overflow-x:auto; margin:22px 0; white-space:pre-wrap; }

/* ============================= LAYOUT HELPERS ============================= */
.grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:20px; margin:26px 0; }
.grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin:26px 0; }
.grid-2 > .box, .grid-3 > .box{ margin:0; }
@media (max-width:860px){ .grid-3{ grid-template-columns:1fr 1fr; } }
@media (max-width:760px){ .grid-2, .grid-3{ grid-template-columns:1fr; } }

/* Cards for "at a glance" grids */
.cards{ display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:14px; margin:24px 0; }
.card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-m); padding:16px 18px; font-family:var(--font-sans); font-size:14.5px; line-height:1.5; color:var(--ink-soft); }
.card h4{ margin:0 0 6px; font-family:var(--font-display); font-size:17px; font-weight:650; color:var(--ink); }
.card .k{ font-family:var(--font-mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--accent); display:block; margin-bottom:6px; font-weight:600; }
a.card{ text-decoration:none; transition:border-color .12s ease, transform .12s ease; }
a.card:hover{ border-color:var(--accent); transform:translateY(-1px); }

/* "You are here" artefact map (rendered by app.js into <div class="map-here" data-here="..">) */
.map-here{ margin:30px 0 0; }
.map-here svg{ width:100%; height:auto; display:block; }
.map-here .mh-box{ fill:var(--surface); stroke:var(--line-strong); stroke-width:1.2; }
.map-here .mh-box.on{ fill:var(--accent-bg); stroke:var(--accent); stroke-width:2; }
.map-here .mh-t{ font-family:var(--font-sans); font-size:12.5px; fill:var(--ink-soft); }
.map-here .mh-t.on{ fill:var(--accent); font-weight:650; }
.map-here .mh-k{ font-family:var(--font-mono); font-size:9.5px; letter-spacing:.1em; fill:var(--ink-faint); }
.map-here .mh-ln{ stroke:var(--line-strong); stroke-width:1.3; fill:none; }
.map-here .mh-band{ fill:var(--surface-2); }
.map-here .mh-bandt{ font-family:var(--font-mono); font-size:10px; letter-spacing:.14em; fill:var(--ink-faint); }
.map-here a{ cursor:pointer; }
.map-here a:hover .mh-box{ stroke:var(--accent); }

/* ============================= PAGER / MOBILE ============================= */
.pager{ display:flex; justify-content:space-between; gap:16px; padding:36px 56px 90px; border-top:1px solid var(--line); max-width:1080px; }
.pager a{ text-decoration:none; color:inherit; }
.pager-card{ border:1px solid var(--line-strong); border-radius:var(--radius-m); padding:16px 20px; background:var(--surface); max-width:340px; }
.pager-card:hover{ border-color:var(--accent); }
.pager-card .eyebrow{ margin-bottom:6px; }
.pager-card .ptitle{ font-family:var(--font-display); font-weight:650; font-size:17px; }
.pager-next{ text-align:right; margin-left:auto; }

.mobile-bar{ display:none; }
@media (max-width:900px){
  .sidebar{ position:fixed; inset:0 auto 0 0; z-index:40; transform:translateX(-100%); transition:transform .2s ease; box-shadow:var(--shadow); }
  .sidebar.open{ transform:translateX(0); }
  .mobile-bar{ display:flex; align-items:center; gap:12px; position:sticky; top:0; z-index:30; background:var(--surface); border-bottom:1px solid var(--line); padding:12px 16px; }
  .mobile-bar strong{ font-family:var(--font-mono); font-size:12px; letter-spacing:.06em; }
  .mobile-bar button{ background:none; border:1px solid var(--line-strong); border-radius:8px; padding:7px 10px; font-family:var(--font-mono); font-size:12px; color:var(--ink); }
  .page-hero{ padding:40px 18px 30px; }
  .page-body{ padding:0 18px 30px; }
  .pager{ padding:28px 16px 70px; }
  .section h2{ font-size:27px; }
  body{ font-size:16.5px; }
  .box{ padding:18px 18px; }
  .panel{ padding:18px 16px; }
  pre.code{ font-size:12.5px; padding:14px 14px; }
}
@media (prefers-reduced-motion: no-preference){ html.ready{ scroll-behavior:smooth; } }
@media print{
  .sidebar, .mobile-bar, .pager, .btnrow{ display:none !important; }
  .stepper .is-hidden, .stepper .is-ghost{ opacity:1 !important; }
  .tab-panel{ display:block !important; }
}
.stepper .hl-on{ stroke:var(--gold) !important; stroke-width:2.6px !important; }
.stepper text.hl-on, .stepper tspan.hl-on{ fill:var(--gold) !important; stroke:none !important; font-weight:700; }
.stepper g.hl-on > text{ fill:var(--gold) !important; stroke:none !important; }
svg.uml .ra{ font-family:var(--font-mono); font-size:14px; font-style:normal; }
/* long inline identifiers (e.g. ICreditAuthorizationServiceAdapter) may break on phones */
.section :not(pre) > code{ overflow-wrap:anywhere; }

/* ============================= DISTRIBUTED-SYSTEMS DIAGRAM KIT =============================
   Extra shapes for networks, hosts, processes, time-space diagrams, protocol stacks and packets.
   Icons (#d-server, #d-pc, #d-phone, #d-db, #d-file, #d-key, #d-lock, #d-cloud, #d-lost, #d-clock)
   live in js/uml.js; colour an icon with style="color:var(--r2)" (default: the UML stroke colour). */
svg.uml .host{ fill:none; stroke:var(--line-strong); stroke-width:1.4; stroke-dasharray:7 4; }
svg.uml .host-fill{ fill:var(--surface-2); stroke:var(--line-strong); stroke-width:1.2; }
svg.uml .host-t, svg.uml .zone-t{ font-family:var(--font-mono); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; fill:var(--ink-faint); font-weight:600; }
svg.uml .proc{ fill:var(--u-fill); stroke:var(--u-stroke); stroke-width:1.4; }
svg.uml .zone{ fill:var(--surface-2); stroke:none; }
svg.uml .zone-line{ stroke:var(--line-strong); stroke-width:1.2; stroke-dasharray:3 4; }
svg.uml .net{ fill:var(--accent-bg); stroke:var(--accent); stroke-width:1.3; stroke-dasharray:5 4; }
svg.uml .wire{ stroke:var(--ink-faint); stroke-width:2.2; fill:none; stroke-linecap:round; }
svg.uml .tl{ stroke:var(--u-stroke); stroke-width:1.6; fill:none; }
svg.uml .tick{ stroke:var(--u-stroke); stroke-width:1.2; }
svg.uml .ev{ fill:var(--u-stroke); stroke:none; }
svg.uml .ev-hollow{ fill:var(--surface); stroke:var(--u-stroke); stroke-width:1.5; }
svg.uml .pkt{ fill:var(--surface); stroke:var(--u-stroke); stroke-width:1.2; }
svg.uml .pkt-h{ fill:var(--u-head); stroke:var(--u-stroke); stroke-width:1.2; }
svg.uml .thr{ fill:none; stroke-width:2.6; stroke-linecap:round; }
svg.uml .thr.r1, svg.uml .thr.r2, svg.uml .thr.r3, svg.uml .thr.r4, svg.uml .thr.r5{ fill:none; }
svg.uml .halo{ paint-order:stroke; stroke:var(--surface); stroke-width:5px; stroke-linejoin:round; }
svg.uml .cut{ stroke:var(--bad); stroke-width:2.2; stroke-dasharray:3 3; fill:none; }
svg.uml use.icon{ color:var(--u-stroke); }
/* glossary letter rows (appendix) */
table.glossary tr.gl-letter th{ background:var(--surface-2); font-family:var(--font-display); font-size:16px; color:var(--accent); padding-top:10px; padding-bottom:6px; }
table.glossary td:last-child{ white-space:nowrap; font-family:var(--font-mono); font-size:13px; }
/* phone-width safety: long labels, inline mono and tags may wrap instead of widening the page */
.box-label{ flex-wrap:wrap; max-width:100%; }
.section .mono, .section .proto{ overflow-wrap:anywhere; }
@media (max-width:600px){ .tag{ white-space:normal; } #page-10 span.proto{ white-space:normal; } }