/* Shared blog stylesheet — Fluent 2 inspired, light/dark/auto themes, WCAG 2.2 AA */
:root {
  --brand-100:#0a0e4a; --brand-90:#11186d; --brand-80:#1a259a; --brand-70:#2a37c4;
  --brand-60:#464feb; --brand-50:#5b67ef; --brand-40:#7882f3; --brand-30:#969ef6;
  --brand-20:#b4baf9; --brand-10:#d2d6fc; --brand-5:#ebedfe;
  --danger:#c50f1f; --danger-bg:#fdf3f4;
  --warn:#bc4b09; --warn-bg:#fff9f5;
  --success:#0e700e; --success-bg:#f1faf1;
  --font-fam:"Segoe UI Variable","Segoe UI",-apple-system,BlinkMacSystemFont,system-ui,sans-serif;
  --font-mono:"Cascadia Code",Consolas,"SF Mono",ui-monospace,monospace;
  --size-100:10px; --size-200:12px; --size-300:14px; --size-400:16px;
  --size-500:20px; --size-600:24px; --size-700:28px; --size-800:32px;
  --size-900:40px;
  --stroke-1:1px; --stroke-2:2px;
  --radius-2:2px; --radius-4:4px; --radius-6:6px; --radius-8:8px; --radius-circ:9999px;
  --dur-fast:100ms; --dur-norm:200ms;
  --ease:cubic-bezier(0.33,0,0.67,1);
}
:root, [data-theme="light"] {
  --bg-canvas:#fafafa; --bg-surface:#ffffff; --bg-surface-2:#f5f5f5; --bg-surface-3:#ebebeb;
  --fg-primary:#242424; --fg-secondary:#424242; --fg-tertiary:#616161; --fg-disabled:#bdbdbd;
  --fg-on-brand:#ffffff;
  --bd-default:#d1d1d1; --bd-subtle:#e6e6e6; --bd-strong:#767676;
  --shadow-2:0 1px 2px rgba(0,0,0,.07), 0 0 2px rgba(0,0,0,.06);
  --code-bg:#f5f5f5; --code-fg:#242424;
  --diagram-bg:#ffffff;
  --link:#464feb;
}
[data-theme="dark"] {
  --bg-canvas:#141414; --bg-surface:#1f1f1f; --bg-surface-2:#292929; --bg-surface-3:#333333;
  --fg-primary:#ffffff; --fg-secondary:#d6d6d6; --fg-tertiary:#adadad; --fg-disabled:#5c5c5c;
  --bd-default:#525252; --bd-subtle:#3d3d3d; --bd-strong:#adadad;
  --shadow-2:0 1px 2px rgba(0,0,0,.36), 0 0 2px rgba(0,0,0,.24);
  --brand-60:#7882f3; --brand-5:#1a1d4a;
  --danger:#ff99a4; --danger-bg:#2a1115;
  --warn:#ffb366; --warn-bg:#2b1d12;
  --success:#7adc7a; --success-bg:#112912;
  --code-bg:#1b1b1b; --code-fg:#d6d6d6;
  --diagram-bg:#1b1b1b;
  --link:#7882f3;
}
@media (prefers-color-scheme: dark) {
  [data-theme="auto"] {
    --bg-canvas:#141414; --bg-surface:#1f1f1f; --bg-surface-2:#292929; --bg-surface-3:#333333;
    --fg-primary:#ffffff; --fg-secondary:#d6d6d6; --fg-tertiary:#adadad; --fg-disabled:#5c5c5c;
    --bd-default:#525252; --bd-subtle:#3d3d3d; --bd-strong:#adadad;
    --shadow-2:0 1px 2px rgba(0,0,0,.36), 0 0 2px rgba(0,0,0,.24);
    --brand-60:#7882f3; --brand-5:#1a1d4a;
    --danger:#ff99a4; --danger-bg:#2a1115;
    --warn:#ffb366; --warn-bg:#2b1d12;
    --success:#7adc7a; --success-bg:#112912;
    --code-bg:#1b1b1b; --code-fg:#d6d6d6;
    --diagram-bg:#1b1b1b;
    --link:#7882f3;
  }
}

*,*::before,*::after { box-sizing:border-box; }
html { scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  *,*::before,*::after { animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; }
}

body {
  margin:0; background:var(--bg-canvas); color:var(--fg-primary);
  font-family:var(--font-fam); font-size:var(--size-400); line-height:1.6;
  font-feature-settings:"kern" 1,"liga" 1,"ss03" 1;
  transition:background var(--dur-norm) var(--ease), color var(--dur-norm) var(--ease);
  -webkit-font-smoothing:antialiased;
}

a { text-decoration:none; color:var(--link); }
a:hover { text-decoration:underline; }

.skip { position:absolute; top:-40px; left:16px; background:var(--brand-60); color:#fff; padding:8px 16px; border-radius:var(--radius-4); z-index:100; font-weight:600; transition:top var(--dur-fast) var(--ease); }
.skip:focus { top:16px; outline:2px solid #fff; outline-offset:2px; }

.appbar { position:sticky; top:0; z-index:50; background:color-mix(in srgb, var(--bg-surface) 88%, transparent); border-bottom:var(--stroke-1) solid var(--bd-subtle); backdrop-filter:saturate(180%) blur(10px); -webkit-backdrop-filter:saturate(180%) blur(10px); }
.appbar-inner { max-width:1280px; margin:0 auto; display:flex; align-items:center; gap:16px; padding:14px 24px; }
.appbar-title { font-size:var(--size-300); font-weight:600; color:var(--fg-secondary); letter-spacing:0.02em; }
.appbar-title a { color:inherit; }
.appbar-nav { margin-left:auto; display:flex; align-items:center; gap:8px; }
.appbar-link { color:var(--fg-secondary); padding:6px 12px; border-radius:var(--radius-4); font-size:var(--size-300); font-weight:500; }
.appbar-link:hover { background:var(--bg-surface-2); color:var(--fg-primary); text-decoration:none; }
.appbar-prev, .appbar-next { background:var(--bg-surface-2); border:var(--stroke-1) solid var(--bd-subtle); color:var(--fg-secondary); padding:6px 10px; border-radius:var(--radius-4); font-size:var(--size-200); font-weight:500; transition:background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease); }
.appbar-prev:hover, .appbar-next:hover { background:var(--bg-surface-3); border-color:var(--brand-60); color:var(--brand-60); text-decoration:none; }
.appbar-jump-wrap { position:relative; display:inline-flex; align-items:center; }
.appbar-jump-wrap::before { content:""; position:absolute; left:14px; top:50%; transform:translateY(-50%); width:14px; height:14px; background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23464feb' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='8'/><line x1='21' y1='21' x2='16.65' y2='16.65'/></svg>"); background-repeat:no-repeat; background-size:contain; pointer-events:none; opacity:0.85; }
.appbar-jump { background:var(--bg-surface); border:var(--stroke-1) solid var(--bd-subtle); color:var(--fg-primary); padding:9px 36px 9px 36px; border-radius:var(--radius-4); font:500 14px/1.2 var(--font-fam); cursor:pointer; min-width:260px; max-width:320px; appearance:none; -webkit-appearance:none; background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%23464feb' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='1 1 6 6 11 1'/></svg>"); background-repeat:no-repeat; background-position:right 12px center; transition:border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease); text-overflow:ellipsis; white-space:nowrap; overflow:hidden; }
.appbar-jump:hover { border-color:var(--brand-60); box-shadow:0 0 0 3px rgba(70,79,235,0.08); }
.appbar-jump:focus-visible { outline:none; border-color:var(--brand-60); box-shadow:0 0 0 3px rgba(70,79,235,0.25); }
.appbar-jump option { padding:8px 12px; font-size:14px; background:var(--bg-surface); color:var(--fg-primary); }
@media (max-width:900px) {
  .appbar-jump { min-width:200px; max-width:220px; padding:8px 32px 8px 32px; font-size:13px; }
}
@media (max-width:640px) {
  .appbar-jump { min-width:0; max-width:160px; padding:7px 28px 7px 28px; font-size:12px; }
  .appbar-jump-wrap::before { left:10px; width:12px; height:12px; }
  .appbar-prev, .appbar-next { padding:4px 8px; font-size:12px; }
}
@media (max-width:480px) {
  .appbar-jump-wrap { display:none; }
}

.theme-toggle { display:inline-flex; align-items:center; gap:6px; background:var(--bg-surface-2); border:var(--stroke-1) solid var(--bd-subtle); color:var(--fg-secondary); padding:6px 12px; border-radius:var(--radius-4); font:500 var(--size-300)/1 var(--font-fam); cursor:pointer; transition:background var(--dur-fast) var(--ease); }
.theme-toggle:hover { background:var(--bg-surface-3); color:var(--fg-primary); }
.theme-toggle:focus-visible { outline:2px solid var(--brand-60); outline-offset:2px; }
.theme-toggle svg { width:16px; height:16px; }

.hero { background: radial-gradient(ellipse 1200px 400px at 50% 0%, color-mix(in srgb, var(--brand-60) 9%, transparent), transparent), linear-gradient(180deg, var(--bg-surface) 0%, var(--bg-canvas) 100%); border-bottom:var(--stroke-1) solid var(--bd-subtle); }
.hero-inner { max-width:760px; margin:0 auto; padding:72px 24px 48px; }
.hero-eyebrow { display:inline-block; color:var(--brand-60); background:var(--brand-5); font-weight:600; font-size:var(--size-200); letter-spacing:0.08em; text-transform:uppercase; padding:5px 12px; border-radius:var(--radius-circ); margin:0 0 24px; }
.hero-title { font-size:clamp(32px, 5.2vw, 56px); line-height:1.08; font-weight:700; letter-spacing:-0.025em; margin:0 0 24px; color:var(--fg-primary); }
.hero-dek { font-size:var(--size-500); line-height:1.5; color:var(--fg-secondary); margin:0 0 36px; font-weight:400; }
.hero-meta { display:flex; align-items:center; gap:14px; flex-wrap:wrap; font-size:var(--size-300); color:var(--fg-tertiary); padding-top:24px; border-top:var(--stroke-1) solid var(--bd-subtle); }
.hero-meta-divider { color:var(--bd-default); }

.article { max-width:760px; margin:0 auto; padding:32px 24px 80px; }

.thesis { margin:0 0 36px; padding:24px 28px; background:var(--bg-surface); border:var(--stroke-1) solid var(--bd-subtle); border-left:4px solid var(--brand-60); border-radius:var(--radius-8); box-shadow:var(--shadow-2); }
.thesis-label { font-size:var(--size-200); font-weight:600; color:var(--brand-60); letter-spacing:0.08em; text-transform:uppercase; margin:0 0 10px; }
.thesis-body { font-size:var(--size-500); line-height:1.45; color:var(--fg-primary); font-weight:500; letter-spacing:-0.005em; margin:0; }

.article p, .article ul, .article ol { font-size:var(--size-400); color:var(--fg-secondary); margin:0 0 18px; }
.article ul, .article ol { padding-left:24px; }
.article li { margin:6px 0; }
.article li::marker { color:var(--fg-tertiary); }

.article h2 { font-size:var(--size-700); font-weight:600; letter-spacing:-0.015em; color:var(--fg-primary); margin:56px 0 16px; scroll-margin-top:88px; }
.article h2::before { content:""; display:block; width:32px; height:3px; background:var(--brand-60); margin-bottom:16px; border-radius:2px; }
.article h3 { font-size:var(--size-600); font-weight:600; color:var(--fg-primary); margin:36px 0 12px; scroll-margin-top:88px; }
.article h4 { font-size:var(--size-500); font-weight:600; color:var(--fg-primary); margin:24px 0 8px; }

.article a:focus-visible { outline:2px solid var(--brand-60); outline-offset:2px; border-radius:var(--radius-2); }
.article strong { color:var(--fg-primary); font-weight:600; }
.article em { color:var(--fg-primary); }

.article code { font-family:var(--font-mono); font-size:0.9em; background:var(--code-bg); color:var(--code-fg); padding:1px 6px; border-radius:var(--radius-2); border:var(--stroke-1) solid var(--bd-subtle); }
.article pre { background:var(--code-bg); border:var(--stroke-1) solid var(--bd-subtle); border-radius:var(--radius-6); padding:16px 20px; overflow-x:auto; font-family:var(--font-mono); font-size:var(--size-300); line-height:1.55; margin:20px 0 28px; color:var(--code-fg); }
.article pre code { background:transparent; padding:0; border:0; color:inherit; }

.toc { background:var(--bg-surface); border:var(--stroke-1) solid var(--bd-subtle); border-radius:var(--radius-8); padding:24px 28px; margin:24px 0 40px; box-shadow:var(--shadow-2); }
.toc-title { font-size:var(--size-200); font-weight:600; color:var(--fg-tertiary); text-transform:uppercase; letter-spacing:0.08em; margin:0 0 16px; }
.toc ol { margin:0; padding-left:0; list-style:none; counter-reset:toc; }
.toc li { margin:8px 0; font-size:var(--size-300); counter-increment:toc; padding-left:32px; position:relative; }
.toc li::before { content:counter(toc, decimal-leading-zero); position:absolute; left:0; top:0; font-variant-numeric:tabular-nums; color:var(--fg-tertiary); font-weight:600; font-size:var(--size-200); }
.toc a { color:var(--fg-secondary); font-weight:500; }
.toc a:hover { color:var(--brand-60); text-decoration:none; }

.pullquote { border-left:4px solid var(--brand-60); padding:14px 0 14px 28px; margin:36px 0; font-size:var(--size-600); line-height:1.4; color:var(--fg-primary); font-weight:400; letter-spacing:-0.01em; }

.callout { display:flex; gap:14px; background:var(--bg-surface); border:var(--stroke-1) solid var(--bd-subtle); border-left-width:4px; border-radius:var(--radius-6); padding:18px 22px; margin:28px 0; }
.callout-info { border-left-color:var(--brand-60); background:var(--brand-5); }
.callout-warn { border-left-color:var(--warn); background:var(--warn-bg); }
.callout-danger { border-left-color:var(--danger); background:var(--danger-bg); }
.callout-success { border-left-color:var(--success); background:var(--success-bg); }
.callout-icon { flex:0 0 auto; width:24px; height:24px; display:grid; place-items:center; margin-top:2px; }
.callout-icon svg { width:20px; height:20px; }
.callout-info .callout-icon { color:var(--brand-60); }
.callout-warn .callout-icon { color:var(--warn); }
.callout-danger .callout-icon { color:var(--danger); }
.callout-success .callout-icon { color:var(--success); }
.callout-body { flex:1; font-size:var(--size-300); color:var(--fg-secondary); }
.callout-body p { margin:6px 0; }
.callout-body p:last-child { margin-bottom:0; }
.callout-body strong { color:var(--fg-primary); display:block; margin-bottom:4px; font-size:var(--size-400); }

.antipattern { background:var(--bg-surface); border:var(--stroke-1) solid var(--bd-subtle); border-top:4px solid var(--warn); border-radius:var(--radius-8); padding:24px 28px; margin:28px 0; box-shadow:var(--shadow-2); }
.antipattern-label { display:inline-block; font-size:var(--size-200); font-weight:700; color:var(--warn); background:var(--warn-bg); letter-spacing:0.08em; text-transform:uppercase; padding:4px 10px; border-radius:var(--radius-4); margin:0 0 12px; }
.antipattern-title { font-size:var(--size-600); font-weight:600; color:var(--fg-primary); margin:0 0 14px; letter-spacing:-0.01em; }
.antipattern-body p { margin:8px 0 14px; color:var(--fg-secondary); font-size:var(--size-400); }
.antipattern-body p:last-child { margin-bottom:0; }
.antipattern-body strong { color:var(--fg-primary); }

.article table { width:100%; border-collapse:collapse; background:var(--bg-surface); border-radius:var(--radius-6); overflow:hidden; margin:20px 0 28px; font-size:var(--size-300); }
.article th, .article td { border:1px solid #e6e6e6; text-align:left; padding:14px 18px; vertical-align:top; }
[data-theme="dark"] .article th, [data-theme="dark"] .article td { border-color:var(--bd-subtle); }
@media (prefers-color-scheme: dark) { [data-theme="auto"] .article th, [data-theme="auto"] .article td { border-color:var(--bd-subtle); } }
.article th { background-color:#f5f5f5; font-weight:600; color:var(--fg-primary); font-size:var(--size-200); text-transform:uppercase; letter-spacing:0.05em; }
[data-theme="dark"] .article th { background-color:var(--bg-surface-2); }
@media (prefers-color-scheme: dark) { [data-theme="auto"] .article th { background-color:var(--bg-surface-2); } }

figure { margin:36px 0; background:var(--bg-surface); border:var(--stroke-1) solid var(--bd-subtle); border-radius:var(--radius-8); padding:28px; box-shadow:var(--shadow-2); }
figure svg { display:block; width:100%; height:auto; max-width:100%; background:var(--diagram-bg); }
figcaption { margin-top:18px; font-size:var(--size-300); color:var(--fg-tertiary); text-align:left; padding-top:14px; border-top:var(--stroke-1) solid var(--bd-subtle); }
figcaption strong { color:var(--fg-secondary); font-weight:600; }

.dg-bg { fill:var(--diagram-bg); }
.dg-node { fill:var(--bg-surface-2); stroke:var(--bd-default); stroke-width:1.5; }
.dg-node-brand { fill:var(--bg-surface); stroke:var(--brand-60); stroke-width:2; }
.dg-node-danger { fill:var(--bg-surface); stroke:var(--danger); stroke-width:2; }
.dg-node-warn { fill:var(--bg-surface); stroke:var(--warn); stroke-width:2; }
.dg-node-success { fill:var(--bg-surface); stroke:var(--success); stroke-width:2; }
.dg-label { fill:var(--fg-primary); font:500 13px var(--font-fam); }
.dg-label-sm { fill:var(--fg-tertiary); font:400 11px var(--font-fam); }
.dg-label-brand { fill:var(--brand-60); font:600 13px var(--font-fam); }
.dg-label-danger { fill:var(--danger); font:600 13px var(--font-fam); }
.dg-label-warn { fill:var(--warn); font:600 13px var(--font-fam); }
.dg-edge { stroke:var(--bd-strong); stroke-width:1.5; fill:none; }
.dg-edge-brand { stroke:var(--brand-60); stroke-width:2; fill:none; }
.dg-edge-danger { stroke:var(--danger); stroke-width:2; fill:none; }
.dg-edge-success { stroke:var(--success); stroke-width:2; fill:none; }
.dg-edge-dashed { stroke-dasharray:4 4; }
.dg-zone-fill { fill:var(--bg-surface-2); opacity:0.5; rx:8; ry:8; }

.seq-arrow { stroke-width:2; fill:none; stroke-dasharray:600; stroke-dashoffset:600; }
@media (prefers-reduced-motion: reduce) { .seq-arrow { stroke-dashoffset:0; } .seq-arrow animate { display:none; } .seq-label { opacity:1 !important; } }
.seq-label { opacity:0; }

.steps { list-style:none; counter-reset:stp; padding:0; margin:20px 0 28px; display:grid; gap:14px; }
.steps > li { counter-increment:stp; position:relative; background:var(--bg-surface); border:var(--stroke-1) solid var(--bd-subtle); border-radius:var(--radius-6); padding:18px 18px 18px 60px; }
.steps > li::before { content:counter(stp); position:absolute; left:16px; top:18px; width:30px; height:30px; border-radius:var(--radius-circ); background:var(--brand-60); color:#fff; display:grid; place-items:center; font:600 var(--size-300)/1 var(--font-fam); }
.steps > li strong { display:block; font-size:var(--size-400); color:var(--fg-primary); margin-bottom:6px; }
.steps > li p { margin:0; font-size:var(--size-300); color:var(--fg-secondary); }

.checklist { list-style:none; padding:0; margin:20px 0 28px; }
.checklist li { position:relative; padding-left:36px; margin:10px 0; font-size:var(--size-300); color:var(--fg-secondary); }
.checklist li::before { content:""; position:absolute; left:0; top:2px; width:22px; height:22px; border-radius:var(--radius-4); background:var(--success-bg); border:var(--stroke-1) solid color-mix(in srgb, var(--success) 40%, transparent); }
.checklist li::after { content:""; position:absolute; left:7px; top:6px; width:8px; height:13px; border:solid var(--success); border-width:0 2px 2px 0; transform:rotate(45deg); }

.refs { margin:32px 0 0; padding:24px 28px; background:var(--bg-surface-2); border:var(--stroke-1) solid var(--bd-subtle); border-radius:var(--radius-8); }
.refs h3 { font-size:var(--size-300); font-weight:600; color:var(--fg-tertiary); text-transform:uppercase; letter-spacing:0.08em; margin:0 0 14px; }
.refs ol { margin:0; padding-left:22px; font-size:var(--size-300); color:var(--fg-secondary); }
.refs li { margin:8px 0; }
.refs em { color:var(--fg-primary); font-style:italic; }

.footer { max-width:760px; margin:0 auto; padding:40px 24px 56px; border-top:var(--stroke-1) solid var(--bd-subtle); color:var(--fg-tertiary); font-size:var(--size-300); text-align:center; }
.footer p { margin:6px 0; }

:focus-visible { outline:2px solid var(--brand-60); outline-offset:2px; border-radius:var(--radius-2); }

@media print {
  .appbar, .theme-toggle, .footer { display:none; }
  .hero, .article, figure, .thesis, .antipattern, .refs { break-inside:avoid; }
  body { background:white; color:black; }
  a { color:black; text-decoration:underline; }
}


/* Sleek Home pill — used in subpage app bars to return to root index */
.appbar-home {
  display:inline-flex; align-items:center; gap:6px;
  padding:5px 11px 5px 9px;
  border-radius:999px;
  border:1px solid var(--bd-subtle);
  background:var(--bg-surface);
  color:var(--fg-secondary);
  text-decoration:none;
  font:600 12px/1 var(--font-fam);
  letter-spacing:0.02em;
  transition:color .2s var(--ease), border-color .2s var(--ease),
             background .2s var(--ease), transform .2s var(--ease),
             box-shadow .2s var(--ease);
}
.appbar-home svg { width:14px; height:14px; transition:transform .25s var(--ease); }
.appbar-home:hover, .appbar-home:focus-visible {
  color:var(--brand-60); border-color:var(--brand-60);
  background:color-mix(in oklab, var(--brand-60) 8%, var(--bg-surface));
  box-shadow:0 4px 12px -6px color-mix(in oklab, var(--brand-60) 60%, transparent);
  text-decoration:none; outline:none;
}
.appbar-home:hover svg, .appbar-home:focus-visible svg { transform:translateY(-1px); }