/* ============================================================================
   Brig — shared design system (proposed site)
   One stylesheet, one set of tokens, change-in-one-place themable.
   Self-contained: no web fonts / CDN / images / trackers. System fonts only.
   Nav + language switcher are pure HTML/CSS (<details>) — no JavaScript.
   ========================================================================== */

:root{
  --ink:#15181d; --soft:#5b6370; --line:#e6e9ef; --bg:#fbfbfa; --card:#fff;
  --blue:#1f6feb; --blue-d:#1f5fd0; --blue-dd:#163e86;
  --green:#15803d; --green-bg:#dcfce7;
  --amber:#b45309; --amber-bg:#fef3c7;
  --red:#b91c1c; --red-bg:#fee2e2;
  --indigo:#4f46e5; --indigo-bg:#e9e7fb;
  --shadow:0 12px 40px rgba(20,40,90,.08); --shadow-sm:0 6px 18px rgba(20,40,90,.06);
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --maxw:1000px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0; color:var(--ink); background:var(--bg);
  font:16px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased}
a{color:var(--blue-d)}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 24px}
/* inline code — GitHub-style pill (applies to .mono spans and <code>) */
.mono, code{font-family:var(--mono); font-size:.86em; background:rgba(116,128,148,.14);
  border-radius:6px; padding:.15em .4em}
.em{color:var(--blue-d); font-weight:700}
img,svg{max-width:100%}

/* ---- skip link (a11y) ---- */
.skip{position:absolute; left:-999px; top:0; background:#fff; padding:8px 14px; border-radius:8px; z-index:100}
.skip:focus{left:12px; top:12px}

/* ============================== HEADER / NAV ============================== */
header.site{position:sticky; top:0; z-index:50; background:rgba(251,251,250,.86);
  backdrop-filter:saturate(160%) blur(8px); -webkit-backdrop-filter:saturate(160%) blur(8px);
  border-bottom:1px solid var(--line)}
header.site .bar{display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:18px; padding-top:13px; padding-bottom:13px; min-height:60px}
.brand{font-weight:800; letter-spacing:.01em; font-size:1.06rem; white-space:nowrap}
.brand small{color:var(--soft); font-weight:600}
.brand a{color:inherit; text-decoration:none}
.nav{display:flex; gap:20px; align-items:center; justify-content:center; font-size:.92rem; font-weight:600}
.nav a{color:var(--soft); text-decoration:none}
.nav a:hover,.nav a.active{color:var(--ink)}
.nav a.track{color:var(--blue-d)}
.navright{grid-column:3; justify-self:end; display:flex; align-items:center; gap:10px}

/* language switcher — <details> dropdown, all viewports */
.lang{position:relative}
.lang>summary{list-style:none; cursor:pointer; font-size:.85rem; font-weight:700; color:var(--soft);
  border:1px solid var(--line); background:#fff; border-radius:8px; padding:7px 11px; white-space:nowrap}
.lang>summary::-webkit-details-marker{display:none}
.lang>summary:hover{color:var(--ink); border-color:#cdd6e6}
.lang .menu{position:absolute; right:0; top:calc(100% + 6px); background:#fff; border:1px solid var(--line);
  border-radius:10px; box-shadow:var(--shadow); padding:6px; min-width:176px; display:flex; flex-direction:column; gap:1px; z-index:60}
.lang .menu a,.lang .menu .soon{display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:8px 11px; border-radius:7px; font-size:.9rem; font-weight:600; text-decoration:none; white-space:nowrap}
.lang .menu a{color:var(--ink)}
.lang .menu a:hover{background:#f3f6fc}
.lang .menu a.on{color:var(--blue-d)}
.lang .menu a.on::after{content:"✓"; font-size:.82rem}
.lang .menu .soon{color:#9aa3b2; cursor:default}
.lang .menu .soon::after{content:"Soon"; font-size:.62rem; font-weight:800; letter-spacing:.04em; text-transform:uppercase;
  color:#9aa3b2; background:#f1f3f7; border:1px solid var(--line); border-radius:999px; padding:2px 7px}

/* hamburger — <details>, mobile only */
.navm{position:relative; display:none}
.navm>summary{list-style:none; cursor:pointer; border:1px solid var(--line); background:#fff;
  border-radius:8px; width:40px; height:38px; display:flex; align-items:center; justify-content:center; font-size:1.15rem; color:var(--ink)}
.navm>summary::-webkit-details-marker{display:none}
.navm>summary svg{width:20px; height:20px; display:block}
.navm .sheet{position:absolute; right:0; top:calc(100% + 6px); background:#fff; border:1px solid var(--line);
  border-radius:12px; box-shadow:var(--shadow); padding:8px; min-width:220px; display:flex; flex-direction:column}
.navm .sheet a{text-decoration:none; color:var(--ink); font-weight:600; font-size:1rem; padding:12px 12px; border-radius:8px}
.navm .sheet a:hover{background:#f3f6fc}
.navm .sheet a.track{color:var(--blue-d)}

/* ============================== TYPOGRAPHY ============================== */
h1{font-size:clamp(2.1rem,6vw,3.6rem); line-height:1.07; letter-spacing:-.022em; font-weight:800; margin:.1em 0 .32em; max-width:18ch}
h2{font-size:clamp(1.5rem,3.6vw,2.1rem); line-height:1.14; letter-spacing:-.02em; font-weight:800; margin:0 0 .5em; max-width:26ch}
h3{font-size:1.04rem; margin:1.3em 0 .4em; letter-spacing:-.01em}
.lead{font-size:clamp(1.08rem,2.2vw,1.34rem); color:#2c313a; line-height:1.5; max-width:60ch; margin:0}
.sec-lead{font-size:1.06rem; color:#2c313a; max-width:64ch; margin:0 0 1.4em; line-height:1.55}
.eyebrow{font-size:.74rem; font-weight:800; letter-spacing:.10em; text-transform:uppercase; color:var(--blue-d); margin:0 0 .8em}
.kicker{display:inline-flex; align-items:center; gap:8px; font-size:.72rem; font-weight:800; letter-spacing:.10em;
  text-transform:uppercase; color:var(--blue-d); background:#eef3fc; border:1px solid #d7e3fb; padding:6px 13px; border-radius:999px; margin-bottom:18px}
.pill{display:inline-flex; align-items:center; gap:6px; font-size:.72rem; font-weight:800; color:var(--indigo);
  background:var(--indigo-bg); border:1px solid #d9d6f6; padding:4px 10px; border-radius:999px}

/* ============================== SECTIONS / HERO ============================== */
.hero{background:radial-gradient(1100px 560px at 50% -12%, #eef3fc 0%, var(--bg) 60%)}
.hero .wrap{padding-top:40px; padding-bottom:20px}
section{padding:58px 0}
section[id]{scroll-margin-top:80px}  /* anchor jumps clear the sticky header */
.final{text-align:center}
.final h2{margin-left:auto; margin-right:auto}
.final .sec-lead{margin-left:auto; margin-right:auto}

/* ============================== BUTTONS ============================== */
.actions{margin:1.6em 0 .4em; display:flex; flex-wrap:wrap; gap:11px; align-items:center}
a.cta{display:inline-block; padding:13px 22px; background:var(--blue); color:#fff; text-decoration:none;
  border-radius:9px; font-weight:700; box-shadow:var(--shadow-sm)}
a.cta:hover{background:var(--blue-d)}
a.ghost{display:inline-block; padding:13px 20px; border:1px solid var(--line); background:#fff; color:var(--ink);
  text-decoration:none; border-radius:9px; font-weight:700}
a.ghost:hover{border-color:#cdd6e6}
.works{margin-top:18px; color:var(--soft); font-size:.92rem; font-weight:600}
.works b{color:var(--ink)}

/* ============================== TRUST STRIP ============================== */
.trust{display:flex; flex-wrap:wrap; gap:8px 14px; padding:2px 0 16px; color:var(--soft); font-size:.88rem; font-weight:600}
.trust span{white-space:nowrap; display:inline-flex; align-items:center; gap:6px}
.trust .dot{width:6px; height:6px; border-radius:50%; background:var(--green)}

/* ============================== CARDS / GRID ============================== */
.grid{display:grid; gap:14px}
.g2{grid-template-columns:repeat(2,1fr)} .g3{grid-template-columns:repeat(3,1fr)}
.feat{background:var(--card); border:1px solid var(--line); border-radius:14px; padding:18px; box-shadow:var(--shadow-sm)}
.feat .ic{width:34px; height:34px; border-radius:9px; display:flex; align-items:center; justify-content:center; background:#eef3fc; color:var(--blue-d); margin-bottom:11px}
.feat .ic svg{width:19px; height:19px}
.feat b{display:block; font-size:1.02rem; letter-spacing:-.01em; margin-bottom:4px}
.feat p{margin:0; font-size:.93rem; color:var(--soft); line-height:1.5}
.feat.grn .ic{background:var(--green-bg); color:var(--green)}
.feat.ind .ic{background:var(--indigo-bg); color:var(--indigo)}
.feat.amb .ic{background:var(--amber-bg); color:var(--amber)}
.mode b{display:block; font-size:1.04rem; margin-bottom:3px}
.mode .tag{font-size:.72rem; font-weight:800; text-transform:uppercase; letter-spacing:.06em}
.mode.r1 .tag{color:var(--green)} .mode.r2 .tag{color:var(--amber)} .mode.r3 .tag{color:var(--indigo)}

/* split (two columns of prose) */
.split{display:flex; gap:30px; flex-wrap:wrap; align-items:flex-start}
.split>.c{flex:1 1 360px; min-width:300px}

/* incidents */
.inc{display:grid; gap:12px; grid-template-columns:repeat(3,1fr)}
.inc .i{background:var(--card); border:1px solid var(--line); border-left:3px solid var(--red); border-radius:10px; padding:14px 16px}
.inc .i b{display:block; margin-bottom:3px}
.inc .i p{margin:0; font-size:.9rem; color:var(--soft); line-height:1.5}

/* ============================== CODE / TERMINAL ============================== */
.codeblock{font-family:var(--mono); font-size:.9rem; line-height:1.7; background:#0f1320; color:#e7ebf5;
  border-radius:13px; padding:18px 20px; white-space:pre-wrap; overflow-wrap:break-word; -webkit-overflow-scrolling:touch; border:1px solid #1d2438; box-shadow:var(--shadow)}
.codeblock .cm{color:#8a93ab} .codeblock .ok{color:#7ee0a2} .codeblock .no{color:#ff9b9b}
.codeblock .hi{color:#86b7ff} .codeblock .kw{color:#c7a6ff} .codeblock .str{color:#9ad59a}
.term{font-family:var(--mono); font-size:.88rem; line-height:1.55; background:#0f1320; color:#e7ebf5;
  border-radius:13px; padding:18px 20px; overflow-x:auto; -webkit-overflow-scrolling:touch; border:1px solid #1d2438; box-shadow:var(--shadow)}
.term .meta{color:#aeb6cc} .term .meta b{color:#e7ebf5; font-weight:700}
.term .row{display:flex; gap:10px; padding:7px 0; border-top:1px solid #1b2236}
.term .row:first-of-type{border-top:0}
.term .act{flex:1 1 auto; color:#cdd5e6}
.term .v{flex:0 0 auto; font-weight:800; letter-spacing:.02em}
.term .v.ok{color:#7ee0a2} .term .v.no{color:#ff9b9b}
.term .why{display:block; color:#8a93ab; font-size:.82rem; margin-top:2px}
.term .star{background:#161c2e; border:1px solid #3b2d12; border-left:3px solid #f0b357; border-radius:8px; padding:9px 12px; margin:8px 0}
.term .star .lab{color:#f0b357; font-weight:800; font-size:.72rem; letter-spacing:.08em; text-transform:uppercase}
.aud{font-family:var(--mono); font-size:.85rem; line-height:1.7; background:#0f1320; color:#cdd5e6;
  border-radius:13px; padding:16px 20px; overflow-x:auto; -webkit-overflow-scrolling:touch; border:1px solid #1d2438}
.aud .ok2{color:#7ee0a2} .aud .ct{color:#f0b357} .aud .vf{color:#86b7ff}

/* ============================== NOTE / TABLE ============================== */
.note{display:flex; gap:11px; align-items:flex-start; font-size:.92rem; color:var(--soft);
  background:#fbfcfe; border:1px solid var(--line); border-radius:12px; padding:14px 16px; line-height:1.55; margin-top:14px}
.note .b{color:var(--ink); font-weight:700}
.note svg{width:17px; height:17px; color:var(--blue-d); flex:0 0 auto; margin-top:2px}
.cov{width:100%; border-collapse:collapse; font-size:.92rem; background:var(--card); border:1px solid var(--line); border-radius:12px; overflow:hidden}
.cov th,.cov td{text-align:left; padding:11px 14px; border-bottom:1px solid var(--line)}
.cov th{font-size:.74rem; text-transform:uppercase; letter-spacing:.06em; color:var(--soft); background:#f7f9fc}
.cov tr:last-child td{border-bottom:0}
.cov .y{color:var(--green); font-weight:700} .cov .p{color:var(--amber); font-weight:700} .cov .n{color:var(--red); font-weight:700}
.cov small{color:var(--soft)}
.tablewrap{overflow-x:auto; -webkit-overflow-scrolling:touch}

/* ============================== DOCS HUB ============================== */
.docs{display:grid; grid-template-columns:236px 1fr; gap:40px; align-items:start; padding:34px 0 60px}
.docsidebar{position:sticky; top:80px; font-size:.92rem}
.docnav{display:flex; flex-direction:column; gap:2px}
.docnav .grp{font-size:.7rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--soft); margin:16px 0 5px}
.docnav .grp:first-child{margin-top:0}
.docnav a{text-decoration:none; color:var(--soft); font-weight:600; padding:6px 10px; border-radius:7px}
.docnav a:hover{background:#f3f6fc; color:var(--ink)}
.docnav a.active{background:#eef3fc; color:var(--ink)}
.docnav .div{height:1px; background:var(--line); margin:14px 4px}
.docmain{min-width:0}
.docmain section{padding:0 0 38px; border:0; border-bottom:1px solid var(--line); margin-bottom:34px}
.docmain section:last-child{border-bottom:0}
.docmenu{display:none}
.docmenu>summary{list-style:none; cursor:pointer; font-weight:700; border:1px solid var(--line); background:#fff;
  border-radius:10px; padding:12px 14px; color:var(--ink)}
.docmenu>summary::-webkit-details-marker{display:none}
.docmenu>summary::after{content:"▾"; float:right; color:var(--soft)}
.docmenu .docnav{margin-top:8px; padding:10px; border:1px solid var(--line); border-radius:10px; background:#fff}

/* docs version selector — designed-in; one entry until there's a v0.2 to switch to */
.only-mobile{display:none}
.docver{position:relative; margin:0 0 16px}
.docver>summary{list-style:none; cursor:pointer; font-weight:700; font-size:.9rem; color:var(--ink);
  border:1px solid var(--line); background:#fff; border-radius:9px; padding:9px 12px; display:flex; align-items:center; gap:8px}
.docver>summary::-webkit-details-marker{display:none}
.docver>summary .vlabel{margin-left:auto; color:var(--soft)}
.docver .menu{position:absolute; left:0; right:0; top:calc(100% + 6px); background:#fff; border:1px solid var(--line);
  border-radius:10px; box-shadow:var(--shadow); padding:6px; display:flex; flex-direction:column; gap:2px; z-index:30}
.docver .menu a{text-decoration:none; color:var(--ink); font-weight:600; font-size:.9rem; padding:8px 10px; border-radius:7px}
.docver .menu a.on{color:var(--blue-d); background:#eef3fc}
.docver .menu .soon{color:#9aa3b2; font-size:.78rem; padding:8px 10px 4px; line-height:1.45}

/* FAQ accordion */
.faq details{background:var(--card); border:1px solid var(--line); border-radius:11px; margin:8px 0; overflow:hidden}
.faq summary{list-style:none; cursor:pointer; font-weight:700; padding:14px 16px; display:flex; justify-content:space-between; gap:12px; min-height:48px; align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; color:var(--soft); font-weight:800}
.faq details[open] summary::after{content:"–"}
.faq details[open] summary{border-bottom:1px solid var(--line)}
.faq .a{padding:14px 16px; color:var(--soft); font-size:.95rem; line-height:1.6}
.faq .a p{margin:0 0 .7em} .faq .a p:last-child{margin:0}

/* Changelog */
.rel{background:var(--card); border:1px solid var(--line); border-radius:12px; padding:16px 18px; margin:12px 0}
.rel .tag{font-family:var(--mono); font-weight:700; color:var(--blue-d)}
.rel .date{color:var(--soft); font-size:.85rem}
.rel ul{margin:.6em 0 0; padding-left:1.1em; color:var(--soft); font-size:.93rem; line-height:1.6}
.subscribe{display:inline-flex; align-items:center; gap:8px; font-weight:700; font-size:.9rem; text-decoration:none;
  color:var(--blue-d); border:1px solid #d7e3fb; background:#eef3fc; padding:9px 14px; border-radius:9px}

/* security depth — two-layer scope table as cards */
.layers{display:grid; grid-template-columns:1fr 1fr; gap:14px; margin:10px 0 8px}
.layer{background:var(--card); border:1px solid var(--line); border-radius:12px; padding:16px 18px}
.layer .h{font-weight:800; margin-bottom:6px}
.layer .scope{font-size:.8rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--blue-d); margin-bottom:8px}
.layer p{margin:0; color:var(--soft); font-size:.93rem; line-height:1.55}

/* blockquote / callout */
.callout{border-left:3px solid var(--blue); background:#f4f8ff; border-radius:10px; padding:12px 16px; color:#2c313a; font-size:.95rem; margin:12px 0}

/* prototype banner */
.proto{background:#fff7ed; border-bottom:1px solid #f0d089; color:#7a4b09; font-size:.84rem; text-align:center; padding:7px 16px}
.proto b{color:#5a3705}

/* ============================== FOOTER ============================== */
/* exactly ONE separating rule above the footer — no stacked dividers */
main > section:last-child{border-bottom:0}
footer.site{border-top:1px solid var(--line); background:#fff}
footer.site .cols{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; padding:34px 0 20px}
footer.site h4{font-size:.74rem; text-transform:uppercase; letter-spacing:.08em; color:var(--soft); margin:0 0 10px}
footer.site .col a{display:block; color:var(--ink); text-decoration:none; font-weight:600; font-size:.93rem; padding:5px 0}
footer.site .col a:hover{color:var(--blue-d)}
footer.site .col a.track{color:var(--blue-d)}
footer.site .legal{color:var(--soft); font-size:.88rem; padding:2px 0 38px; text-align:center}

/* ============================== RESPONSIVE ============================== */
@media (max-width:860px){ .g3{grid-template-columns:1fr} .inc{grid-template-columns:1fr}
  .docs{grid-template-columns:1fr; gap:0} .docsidebar{display:none} .docmenu{display:block; margin-bottom:22px} .only-mobile{display:block} }
@media (max-width:760px){ .g2{grid-template-columns:1fr} .layers{grid-template-columns:1fr} }
@media (max-width:640px){
  .nav{display:none} .navm{display:block}
  .hero .wrap{padding-top:28px; padding-bottom:36px}
  .actions a.cta,.actions a.ghost{width:100%; text-align:center}
  footer.site .cols{grid-template-columns:1fr; gap:16px}
  .lang>summary{padding:7px 9px}
}

/* honor reduced motion */
@media (prefers-reduced-motion:reduce){ *{animation:none !important; transition:none !important} html{scroll-behavior:auto} }

/* ===================== SECTION PERMALINKS (# on hover) ===================== */
/* Hover a section title to reveal a "#"; click it to copy a deep link to that
   section. brig.js injects the anchor after each i18n pass — progressive
   enhancement, so the page is unchanged when JS is off. */
.hanchor{position:relative; display:inline-block; margin-left:.34em; color:var(--soft);
  text-decoration:none; font-weight:600; line-height:1; opacity:0; vertical-align:baseline;
  transition:opacity .12s ease, color .12s ease; -webkit-user-select:none; user-select:none}
h2:hover .hanchor, .hanchor:focus-visible{opacity:.55}
.hanchor:hover{opacity:1; color:var(--blue-d)}
.hanchor:focus-visible{opacity:1; outline:2px solid var(--blue-d); outline-offset:3px; border-radius:5px}
@media (hover:none){ .hanchor{opacity:.4} }   /* no hover state on touch — keep it discoverable */
/* click-to-copy confirmation bubble */
.hanchor.flash::after{content:attr(data-msg); position:absolute; left:50%; bottom:calc(100% + 7px);
  transform:translateX(-50%); background:var(--ink); color:#fff; font-weight:700; font-size:.68rem; line-height:1;
  white-space:nowrap; padding:5px 8px; border-radius:6px; box-shadow:var(--shadow-sm); pointer-events:none; z-index:5}