/* AIQT site: shared stylesheet.
   AIQT palette (dark default + light) with a cleanlanguage.ai-scale type system:
   Inter + system fallback, large headings, wide hero, generous whitespace, and a
   teal "eyebrow" kicker above every section. */

/* dark is the default; a [data-theme] attribute (set by the toggle) beats the OS setting */
:root{
  --bg:#0b1220; --panel:#111b2e; --panel-2:#0e1728;
  --ink:#e6edf3; --muted:#9fb0c3; --faint:#7488a1;
  --line:#1e2c44; --accent:#5eb0ef; --accent-2:#7ee0c8;
  --on-accent:#08111f; --on-accent-2:#08111f;
}
:root[data-theme="dark"]{
  --bg:#0b1220; --panel:#111b2e; --panel-2:#0e1728;
  --ink:#e6edf3; --muted:#9fb0c3; --faint:#7488a1;
  --line:#1e2c44; --accent:#5eb0ef; --accent-2:#7ee0c8;
  --on-accent:#08111f; --on-accent-2:#08111f;
}
:root[data-theme="light"]{
  --bg:#f7f9fc; --panel:#ffffff; --panel-2:#f0f4fa;
  --ink:#101828; --muted:#41506a; --faint:#54637a;
  --line:#e2e8f2; --accent:#1d6fd0; --accent-2:#0f766e;
  --on-accent:#ffffff; --on-accent-2:#ffffff;
}
@media (prefers-color-scheme: light){
  :root:not([data-theme]){
    --bg:#f7f9fc; --panel:#ffffff; --panel-2:#f0f4fa;
    --ink:#101828; --muted:#41506a; --faint:#54637a;
    --line:#e2e8f2; --accent:#1d6fd0; --accent-2:#0f766e;
    --on-accent:#ffffff; --on-accent-2:#ffffff;
  }
}

*{box-sizing:border-box}
html{scroll-behavior:auto}
body{
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  margin:0; background:var(--bg); color:var(--ink);
  font-size:1.19rem; line-height:1.6; -webkit-font-smoothing:antialiased;
}
a{color:var(--accent); text-decoration:none}
a:hover{text-decoration:underline}
.wrap{margin:0 auto; padding:0 1.5rem}

section{padding:1.75rem 0}
h1,h2,h3{line-height:1.12; letter-spacing:-.025em; font-weight:750; text-wrap:pretty}
h1{font-size:clamp(2.1rem,4vw,3.2rem)}
h2{font-size:clamp(1.85rem,3.2vw,2.75rem); margin:0 0 1.15rem}
h3{font-size:1.42rem; margin:0 0 .5rem}
p{color:var(--muted); margin:0 0 1.05rem; text-wrap:pretty}
.lead{font-size:clamp(1.24rem,1.7vw,1.42rem); color:var(--ink); line-height:1.55; text-wrap:pretty}
code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.92em}

/* the teal kicker above every section */
.eyebrow{color:var(--accent-2); font-weight:800; letter-spacing:.12em;
  text-transform:uppercase; font-size:1.02rem; margin:0 0 .95rem}

/* top navigation */
.topnav{padding:.9rem 0; border-bottom:1px solid var(--line)}
.navrow{display:flex; justify-content:space-between; align-items:center;
  flex-wrap:wrap; gap:.7rem}
.brand{font-weight:800; font-size:1.15rem; color:var(--ink); letter-spacing:.02em}
.brand:hover{text-decoration:none}
.navlinks{display:flex; flex-wrap:wrap; gap:.7rem; align-items:center}
.navlinks a{color:var(--muted); font-size:1.08rem}
.navlinks a.plain:hover{color:var(--ink); text-decoration:none}
/* the two divergent-path links rendered as buttons */
.navlinks a.navbtn{color:var(--accent); font-weight:700; font-size:1.02rem; padding:.5rem 1.1rem;
    border:1px solid var(--accent); border-radius:999px; background:var(--panel)}
.navlinks a.navbtn:hover{background:var(--accent); color:var(--on-accent); border-color:transparent; text-decoration:none}

/* hero */
header.hero{padding:6rem 0 4.5rem; text-align:center; background:
  radial-gradient(1200px 420px at 50% -10%, rgba(94,176,239,.14), transparent 70%)}
header.hero h1{font-size:clamp(2.5rem,4.8vw,3.95rem); margin:0 auto 1.4rem}
header.hero .lead{max-width:62ch; margin:0 auto 1.7rem}
.ordering{display:inline-block; max-width:100%; overflow-x:auto; font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  background:var(--panel); border:1px solid var(--line); border-radius:12px;
  padding:.85rem 1.2rem; color:var(--ink); font-size:1.14rem; margin-top:.4rem}
.ordering .tier{color:var(--accent-2); font-weight:700}
.orderingnote{font-size:1.02rem; color:var(--faint); margin-top:.7rem}
.cta{margin-top:2.1rem; display:flex; gap:.85rem; justify-content:center; flex-wrap:wrap}
.btn{display:inline-block; padding:.8rem 1.5rem; border-radius:10px; font-weight:650;
  border:1px solid var(--line); font-size:1.14rem}
.btn.primary{background:var(--accent); color:var(--on-accent); border-color:transparent}
.btn.primary:hover{text-decoration:none; filter:brightness(1.08)}
.btn.ghost{background:transparent; color:var(--accent); border-color:var(--accent)}
.btn.ghost:hover{text-decoration:none; background:var(--accent); color:var(--on-accent); border-color:transparent}

/* internal page header (install, roadmap, developers, teams) */
.pagehead{padding-top:3.75rem; padding-bottom:1.25rem}
.pagehead h1{margin:.2rem 0 1.15rem}

/* generic two-column grid of cards */
.grid{display:grid; grid-template-columns:repeat(2,1fr); gap:1.1rem}
@media (max-width:640px){.grid{grid-template-columns:1fr}}
.card{background:var(--panel); border:1px solid var(--line); border-radius:14px;
  padding:1.5rem 1.6rem}
.card h3{color:var(--ink)}
.card p{margin:0}

/* three divergent paths */
.paths{display:grid; grid-template-columns:repeat(3,1fr); gap:1.1rem}
@media (max-width:760px){.paths{grid-template-columns:1fr}}
.path{background:var(--panel); border:1px solid var(--line); border-radius:14px;
  padding:1.5rem 1.6rem; display:flex; flex-direction:column; gap:.6rem}
.path h3{margin:0}
.path p{margin:0; flex:1}
.path .btn{align-self:flex-start; margin-top:.3rem; padding:.65rem 1.25rem; font-size:1.08rem}

/* platform quick-start (install page) */
.platforms{display:grid; grid-template-columns:repeat(3,1fr); gap:1.1rem}
@media (max-width:760px){.platforms{grid-template-columns:1fr}}
.platform{background:var(--panel); border:1px solid var(--line); border-radius:14px;
  padding:1.5rem 1.6rem; display:flex; flex-direction:column; gap:.7rem}
.platform h3{margin:0}
.platform p{margin:0; flex:1}
.platform .btn{align-self:flex-start; padding:.6rem 1.15rem; font-size:1.06rem}
.installlinks{margin-top:1.4rem; display:flex; gap:1.8rem; flex-wrap:wrap}
.installlinks a{font-weight:650}

/* numbered lists: rules and setup steps */
ol.rules,ol.steps{counter-reset:r; list-style:none; padding:0; margin:0}
ol.rules li,ol.steps li{background:var(--panel-2); border:1px solid var(--line);
  border-radius:12px; padding:1.1rem 1.2rem 1.1rem 3.5rem; position:relative; margin:.75rem 0}
ol.rules li::before,ol.steps li::before{counter-increment:r; content:counter(r);
  position:absolute; left:1.05rem; top:1.05rem; width:1.7rem; height:1.7rem; border-radius:50%;
  color:var(--on-accent); font-weight:700; font-size:.92rem; display:flex; align-items:center;
  justify-content:center}
ol.rules li::before{background:var(--accent)}
ol.steps li::before{background:var(--accent-2); color:var(--on-accent-2)}
ol.rules b,ol.steps b{color:var(--ink)}
ol.rules p,ol.steps li{color:var(--muted)}
ol.rules p{margin:.3rem 0 0}

ul.clean{margin:.5rem 0 0; padding-left:1.2rem}
ul.clean li{margin:.35rem 0; color:var(--muted)}

/* directory tree (development page) */
.tree{background:var(--panel-2); border:1px solid var(--line); border-radius:14px;
  padding:1.3rem 1.5rem; overflow-x:auto; margin:1.5rem 0 1rem; width:fit-content; max-width:100%}
.tree pre{margin:0; font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:1.06rem; line-height:1.8; color:var(--muted)}
.tree .dir{color:var(--ink); font-weight:600}
.tree .yours{color:var(--accent-2); font-weight:600}
.tree .updater{color:var(--accent); font-weight:600}
.tree .note{color:var(--faint)}

/* status pills */
.pill{display:inline-block; font-size:.88rem; font-weight:700; letter-spacing:.04em;
  text-transform:uppercase; padding:.26rem .75rem; border-radius:999px; margin-bottom:.2rem;
  align-self:flex-start}
.pill.now{background:rgba(126,224,200,.16); color:var(--accent-2)}
.pill.next{background:rgba(94,176,239,.16); color:var(--accent)}
.pill.idea{background:rgba(155,176,195,.14); color:var(--muted)}
.idea-note{font-size:1.02rem; color:var(--faint)}

#main{padding-bottom:4rem}

/* dark/light toggle */
.themetoggle{font:inherit; cursor:pointer; color:var(--muted); background:var(--panel);
  border:1px solid var(--line); border-radius:999px; padding:.42rem .9rem; font-size:1rem;
  font-weight:650; margin-left:.35rem}
.themetoggle:hover{border-color:var(--accent); color:var(--accent)}

/* examples: without/with comparison (linear, one example per row) */
.example{margin:0 0 1.9rem}
.example h3{font-size:1.42rem; margin:0 0 .7rem}
.compare{display:grid; grid-template-columns:1fr 1fr; gap:1rem}
@media (max-width:640px){.compare{grid-template-columns:1fr}}
.compare .col{border:1px solid var(--line); border-radius:14px; padding:1.4rem 1.5rem}
.compare .without{background:var(--panel-2)}
.compare .with{background:rgba(126,224,200,.10); border-color:var(--accent-2)}
.compare .lbl{font-size:.9rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase; margin:0 0 .55rem}
.compare .without .lbl{color:var(--faint)}
.compare .with .lbl{color:var(--accent-2)}
.compare .col p:last-child{margin:0}

/* cleanlanguage-style platform install buttons (welcoming, non-technical) */
.platform-actions{margin:1.9rem 0 0; display:grid; grid-template-columns:repeat(12,1fr); gap:.9rem}
.platform-button{grid-column:span 4; display:flex; align-items:center; gap:.95rem; min-height:86px;
  padding:1.1rem 1.25rem; border:1px solid var(--line); border-radius:16px; background:var(--panel);
  text-align:left; text-decoration:none;
  transition:transform .16s ease, border-color .16s ease, box-shadow .16s ease}
.platform-button:hover{transform:translateY(-3px); border-color:var(--accent); text-decoration:none;
  box-shadow:0 12px 30px rgba(0,0,0,.16)}
.platform-button.wide{grid-column:span 6}
@media (max-width:760px){.platform-button,.platform-button.wide{grid-column:span 12}}
.platform-button strong,.platform-button small{display:block}
.platform-button strong{font-size:1.1rem; line-height:1.2; color:var(--ink)}
.platform-button small{margin-top:.25rem; color:var(--muted); font-size:.98rem; line-height:1.35}
.platform-icon{flex:0 0 48px; width:48px; height:48px; display:grid; place-items:center;
  border-radius:13px; color:#fff; font-size:1.1rem; font-weight:800; letter-spacing:-.03em}
.platform-icon.claude{background:#c15f3c}
.platform-icon.chatgpt{background:#10a37f}
.platform-icon.copilot{background:linear-gradient(135deg,#0a6ed1,#2ec6c2)}
.platform-icon.copilotstudio{background:linear-gradient(135deg,#8b5cf6,#0a6ed1)}
.platform-icon.guide{background:var(--accent)}
.platform-icon.source{background:#4a5568; font-size:.92rem}
.platform-icon.gemini{background:linear-gradient(135deg,#4285f4,#9b72cb)}

/* secondary content-tab bar (row 2, cleanlanguage-style pills) */
.subnav{border-bottom:1px solid var(--line); padding:.3rem 0 .7rem}
.subrow{display:flex; flex-wrap:wrap; gap:.5rem; align-items:center; justify-content:center}
.subnav a{display:inline-flex; align-items:center; padding:.5rem 1.1rem; border-radius:999px;
  border:1px solid var(--line); background:var(--panel); color:var(--ink); font-weight:650;
  font-size:1.02rem; text-decoration:none}
.subnav a:hover{border-color:var(--accent); color:var(--accent); text-decoration:none}
.subnav a.active,.subnav a.active:hover{background:var(--accent); border-color:transparent; color:var(--on-accent)}

/* evidence-status label under an example title */
.evidence-label{display:inline-block; font-size:.82rem; font-weight:700; letter-spacing:.05em;
  text-transform:uppercase; color:var(--faint); margin:.1rem 0 .55rem}

/* one status model: the available/in-development/ideas strip */
.statusstrip{background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:1.1rem 1.4rem}
.statusstrip p{margin:.55rem 0; color:var(--muted)}
.statusstrip p:first-child{margin-top:0}
.statusstrip p:last-child{margin-bottom:0}
.statusstrip .pill{margin-right:.55rem}

/* precision tables (permissions, data-flow), pending-marked */
.tablewrap{overflow-x:auto; margin:1.2rem 0}
.dtable{width:100%; border-collapse:collapse; font-size:1rem}
.dtable th,.dtable td{border:1px solid var(--line); padding:.6rem .8rem; text-align:left; vertical-align:top; color:var(--muted)}
.dtable th{color:var(--ink); font-weight:700; background:var(--panel-2)}
.dtable .pending{color:var(--faint); font-style:italic}

/* skip-to-content link (visible on focus) */
.skip{position:absolute; left:-9999px; top:0; z-index:100; background:var(--accent); color:var(--on-accent);
  padding:.6rem 1rem; border-radius:0 0 8px 0; font-weight:700}
.skip:focus{left:0; text-decoration:none}

/* progressive-disclosure expander */
details.more{border:1px solid var(--line); border-radius:12px; background:var(--panel-2); margin:1.3rem 0}
details.more>summary{cursor:pointer; padding:1rem 1.2rem; font-weight:700; color:var(--ink); list-style:none}
details.more>summary::-webkit-details-marker{display:none}
details.more>summary::after{content:" \25B8"; color:var(--accent); font-weight:700}
details.more[open]>summary::after{content:" \25BE"}
details.more .inner{padding:0 1.2rem 1.2rem}
/* enforcement register: the verbatim technical-limits residual quoted from the ledger. pre-wrap keeps a
   multi-paragraph residue's line breaks intact (the Markdown view renders the same residue in a code block) */
.ledger-residual{white-space:pre-wrap; overflow-wrap:anywhere}

/* examples audience filter (centered pills, distinct from body text) */
.jumpfilter{text-align:center; margin:.4rem 0 1.4rem}
.jumpfilter span{color:var(--faint); margin-right:.4rem}
.jumpfilter a{display:inline-block; padding:.4rem .95rem; margin:.2rem; border-radius:999px;
  border:1px solid var(--line); background:var(--panel); color:var(--ink); font-weight:650; text-decoration:none}
.jumpfilter a:hover{border-color:var(--accent); color:var(--accent); text-decoration:none}

/* per-example one-line summary (a mobile aid below the pair) */
.diff{margin:.9rem 0 0; color:var(--muted)}
.diff b{color:var(--accent-2)}

/* single-line nav tabs (content sections + roadmap/about as buttons) */
.navtab{display:inline-flex; align-items:center; padding:.5rem 1.05rem; border-radius:999px;
  border:1px solid var(--accent); background:var(--panel); color:var(--accent); font-weight:700;
  font-size:1.02rem; text-decoration:none}
.navtab:hover{background:var(--accent); color:var(--on-accent); border-color:transparent; text-decoration:none}
.navtab.active,.navtab.active:hover{background:var(--accent); border-color:transparent; color:var(--on-accent)}

/* visually-hidden (for table captions/labels) + visible focus */
.vh{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0}
a:focus-visible,button:focus-visible,summary:focus-visible,.navtab:focus-visible,.btn:focus-visible,input:focus-visible{outline:3px solid var(--accent); outline-offset:2px; border-radius:6px}

/* ---- sidebar navigation ---- */
.layout{display:flex; align-items:flex-start}
.sidebar{position:sticky; top:0; height:100vh; overflow-y:auto; flex:0 0 auto; width:max-content;
  background:var(--panel); border-right:1px solid var(--line); padding:1.5rem 1rem 1.2rem;
  display:flex; flex-direction:column}
.sidebar .brand{font-size:1.35rem; font-weight:800; color:var(--ink); text-decoration:none;
  letter-spacing:.02em; margin:0 0 .4rem .2rem}
.sidebar h4{font-size:.7rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
  color:var(--faint); margin:1.05rem 0 .3rem; padding:0 .6rem}
.sidebar a.navlink{display:block; padding:.4rem .6rem; border-radius:8px; color:var(--muted);
  text-decoration:none; font-size:1rem; line-height:1.3; white-space:nowrap}
.sidebar a.navlink:hover{background:var(--panel-2); color:var(--ink)}
.sidebar a.navlink.active{background:var(--panel-2); color:var(--accent); font-weight:600;
  box-shadow:inset 3px 0 0 var(--accent)}
.sidebar .sb-theme{margin-top:auto; align-self:flex-start}
.content{flex:1 1 auto; min-width:0}
.whatis{color:var(--ink); font-size:1.05rem; line-height:1.55; margin:.2rem 0 0}
.navtoggle{display:none}
.navbackdrop{display:none}
@media (max-width:900px){
  .layout{display:block}
  .sidebar{position:fixed; top:0; left:0; width:max-content; min-width:13rem;
    transform:translateX(-100%); transition:transform .22s ease; box-shadow:0 0 40px rgba(0,0,0,.45); z-index:50}
  .sidebar.open{transform:none}
  .content{padding-top:3.3rem}
  .navtoggle{display:inline-flex; align-items:center; gap:.4rem; position:fixed; top:.6rem; left:.6rem;
    z-index:60; background:var(--panel); color:var(--ink); border:1px solid var(--line);
    border-radius:8px; padding:.45rem .7rem; font-size:.95rem; cursor:pointer}
  .navbackdrop.open{display:block; position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:40}
}

@media (prefers-reduced-motion: no-preference){ html{scroll-behavior:smooth} }

/* ================= visual refresh (UI/UX review) ================= */
:root, :root[data-theme="dark"]{ --warn:#f2a35c; --warn-tint:rgba(242,163,92,.07); --warn-line:rgba(242,163,92,.30); }
:root[data-theme="light"]{ --warn:#8a4106; --warn-tint:rgba(138,65,6,.06); --warn-line:rgba(138,65,6,.28); }
@media (prefers-color-scheme: light){ :root:not([data-theme]){ --warn:#8a4106; --warn-tint:rgba(138,65,6,.06); --warn-line:rgba(138,65,6,.28); } }

/* gradient brand text (hero payoff line) */
.grad{background:linear-gradient(90deg,var(--accent) 10%,var(--accent-2) 90%); -webkit-background-clip:text; background-clip:text; color:transparent}

/* hero: bigger type + two-colour atmosphere + faint graph-paper grid (no mask; grid is scoped to the hero) */
header.hero h1{font-size:clamp(2.6rem,5.4vw,4.4rem); font-weight:800; letter-spacing:-.03em; line-height:1.06}
header.hero{ padding:5.5rem 0 4rem;
  background:
    radial-gradient(900px 380px at 22% -8%, rgba(94,176,239,.16), transparent 70%),
    radial-gradient(900px 380px at 78% -8%, rgba(126,224,200,.12), transparent 70%),
    repeating-linear-gradient(90deg, rgba(159,176,195,.05) 0 1px, transparent 1px 72px),
    repeating-linear-gradient(0deg,  rgba(159,176,195,.05) 0 1px, transparent 1px 72px); }
:root[data-theme="light"] header.hero{
  background:
    radial-gradient(900px 380px at 22% -8%, rgba(29,111,208,.10), transparent 70%),
    radial-gradient(900px 380px at 78% -8%, rgba(15,118,110,.08), transparent 70%),
    repeating-linear-gradient(90deg, rgba(65,80,106,.05) 0 1px, transparent 1px 72px),
    repeating-linear-gradient(0deg,  rgba(65,80,106,.05) 0 1px, transparent 1px 72px); }

/* warm 'Without AIQT' columns (one change transforms every compare pair) */
.compare .without{ background:var(--warn-tint); border-color:var(--warn-line) }
.compare .without .lbl{ color:var(--warn) }

/* card hover life + section rhythm */
.card,.path,.platform{transition:border-color .18s ease, transform .18s ease, box-shadow .18s ease}
.card:hover,.path:hover,.platform:hover{border-color:var(--accent); transform:translateY(-2px); box-shadow:0 10px 28px rgba(0,0,0,.18)}
:root[data-theme="light"] .card:hover,:root[data-theme="light"] .path:hover,:root[data-theme="light"] .platform:hover{box-shadow:0 10px 28px rgba(16,24,40,.08)}
@media (prefers-reduced-motion: reduce){ .card,.path,.platform,.platform-button{transition:none} .card:hover,.path:hover,.platform:hover,.platform-button:hover{transform:none} }
section{padding:3.25rem 0}
.section-alt{background:var(--panel-2); border-top:1px solid var(--line); border-bottom:1px solid var(--line)}

/* sharper eyebrow (main engine of the repetition) + readable measure */
.eyebrow{font-size:.84rem; letter-spacing:.16em}


/* ================= persistent top bar + 2x2 logo ================= */
.topbar{position:sticky; top:0; z-index:60; display:flex; align-items:center; gap:.9rem;
  height:3.6rem; padding:0 1rem; background:var(--panel); border-bottom:1px solid var(--line)}
.topbar .navtoggle{display:none; position:static; align-items:center; background:none;
  border:1px solid var(--line); border-radius:8px; color:var(--ink); padding:.3rem .55rem;
  font-size:1.1rem; line-height:1; cursor:pointer}
.topbar .logo{display:flex; align-items:center; gap:.5rem; text-decoration:none}
.topbar .logomark{display:block; flex:0 0 auto}
.topbar .logotext{color:var(--ink); font-weight:800; font-size:1.22rem; letter-spacing:.04em}
.topbar .topformula{margin-left:auto; min-width:0; font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:.9rem; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.topbar .topformula .tier{background:linear-gradient(90deg,var(--accent),var(--accent-2));
  -webkit-background-clip:text; background-clip:text; color:transparent; font-weight:700}
.topbar .topformula .t2{color:var(--ink)}
.topbar .topformula .t3{color:var(--muted)}
.topbar .topformula .t4{color:var(--faint)}
/* the sidebar now sits below the top bar */
.sidebar{top:3.6rem; height:calc(100vh - 3.6rem)}
@media (max-width:860px){ .topbar .topformula{display:none} }
@media (max-width:900px){ .topbar .navtoggle{display:inline-flex} }

/* ================= consolidated install page: platform picker + in-place filter ================= */
/* The picker cards double as filter controls. Only /js/install.js sets data-family on the root, so every
   hiding rule below is inert when scripts are blocked, fail, or are disabled, and the whole page stays
   visible (progressive enhancement). Reuses AIQT's own .platform-actions / .platform-button / .card tokens;
   no new palette. */
html[data-family] section[data-family-section]{display:none}
html[data-family="claude"] section[data-family-section="claude"],
html[data-family="chatgpt"] section[data-family-section="chatgpt"],
html[data-family="gemini"] section[data-family-section="gemini"],
html[data-family="copilot"] section[data-family-section="copilot"],
html[data-family="copilotstudio"] section[data-family-section="copilotstudio"],
html[data-family="other"] section[data-family-section="other"]{display:block}

/* the selected card, marked with aria-current by the script (accent border + faint accent tint) */
.platform-button[aria-current="true"]{border-color:var(--accent); background:rgba(94,176,239,.14)}
:root[data-theme="light"] .platform-button[aria-current="true"]{background:rgba(29,111,208,.10)}
@media (prefers-color-scheme: light){ :root:not([data-theme]) .platform-button[aria-current="true"]{background:rgba(29,111,208,.10)} }
.platform-button[aria-current="true"] strong{text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:2px}

/* the "show all" reset lives under the picker; hidden until the script reveals it. .btn sets
   display:inline-block, which outranks the UA [hidden] rule, so a hidden .btn needs this to stay hidden. */
.family-reset{margin:1.1rem 0 0}
#family-reset[hidden]{display:none}

/* per-section "last verified" stamp and the section jump-links */
.verified{margin:-.4rem 0 1.1rem; font-size:.92rem; color:var(--faint)}
.section-links{font-size:1.02rem}
.section-links a{font-weight:650}

/* ===== design system v2 (2026-09-18 redesign) ===== */
/* This layer is purely additive. It leaves every selector, token, and behaviour above
   untouched, so the existing pages render as before, and adds an explicit type and spacing
   scale, elevation and status tokens, and the redesign components. Overriding is limited to
   the type scale and the section rhythm the redesign brief calls for.
   Semantic accent roles, applied consistently below:
     --accent-2 (teal, #7ee0c8)  = SOURCE, the eyebrow kicker, and the "generate" step.
     --accent   (blue, #5eb0ef)  = the generated VIEW, the primary CTA, and inline links.
   Contrast note: #5eb0ef and #7ee0c8 are low-contrast on the light theme for small text, so
   they are used for large text, borders, icons, and fills only; body-size inline links use
   --link, a darker blue on light that clears WCAG AA. */

/* theme-independent scale tokens: type, spacing, radii, and the monospace family */
:root{
  --fs-hero:clamp(2.5rem,5vw,3.9rem); --fs-h2:clamp(1.8rem,3vw,2.4rem); --fs-h3:1.4rem;
  --fs-lead:1.2rem; --fs-body:1.06rem; --fs-small:.9rem;
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-6:24px; --sp-8:32px;
  --sp-12:48px; --sp-16:64px; --sp-24:96px;
  --radius:14px; --radius-sm:10px;
  --font-mono:ui-monospace,"JetBrains Mono",SFMono-Regular,Menlo,monospace;
}

/* status, link, and elevation tokens, dark values (default plus explicit dark).
   --warn / --warn-tint / --warn-line are already defined above in the visual-refresh block
   (amber, dark and light); this layer reuses them and adds --ok, --danger, --link, shadows. */
:root, :root[data-theme="dark"]{
  --ok:#3fbf8f; --ok-tint:rgba(63,191,143,.14); --ok-line:rgba(63,191,143,.35);
  --danger:#f2645a; --danger-tint:rgba(242,100,90,.12); --danger-line:rgba(242,100,90,.38);
  --link:#5eb0ef;
  --shadow-1:0 1px 2px rgba(0,0,0,.32), 0 4px 12px rgba(0,0,0,.22);
  --shadow-2:0 6px 16px rgba(0,0,0,.34), 0 16px 40px rgba(0,0,0,.28);
}
:root[data-theme="light"]{
  --ok:#0a6b45; --ok-tint:rgba(10,107,69,.10); --ok-line:rgba(10,107,69,.30);
  --danger:#a51f16; --danger-tint:rgba(165,31,22,.09); --danger-line:rgba(165,31,22,.30);
  --link:#1552a6;
  --shadow-1:0 1px 2px rgba(16,24,40,.06), 0 4px 12px rgba(16,24,40,.06);
  --shadow-2:0 8px 20px rgba(16,24,40,.10), 0 16px 40px rgba(16,24,40,.10);
}
@media (prefers-color-scheme: light){
  :root:not([data-theme]){
    --ok:#0a6b45; --ok-tint:rgba(10,107,69,.10); --ok-line:rgba(10,107,69,.30);
    --danger:#a51f16; --danger-tint:rgba(165,31,22,.09); --danger-line:rgba(165,31,22,.30);
    --link:#1552a6;
    --shadow-1:0 1px 2px rgba(16,24,40,.06), 0 4px 12px rgba(16,24,40,.06);
    --shadow-2:0 8px 20px rgba(16,24,40,.10), 0 16px 40px rgba(16,24,40,.10);
  }
}

/* light-theme: darken the small-text accent foregrounds that fall just below WCAG AA.
   .pill.next and .sidebar a.navlink.active render --accent on a light fill (~4.4:1);
   scope the darker blue to light only, leaving the dark-theme --accent untouched. */
:root[data-theme="light"] .pill.next{color:#1b52a0}
:root[data-theme="light"] .sidebar a.navlink.active{color:#1552a6}
@media (prefers-color-scheme: light){
  :root:not([data-theme]) .pill.next{color:#1b52a0}
  :root:not([data-theme]) .sidebar a.navlink.active{color:#1552a6}
}

/* type scale applied to the shared elements (a refinement of the existing sizes) */
body{font-size:var(--fs-body)}
header.hero h1{font-size:var(--fs-hero)}
h2{font-size:var(--fs-h2)}
h3{font-size:var(--fs-h3)}
.lead{font-size:var(--fs-lead)}
/* body-size inline links use the AA-safe --link token (identical to --accent on dark) */
a{color:var(--link)}

/* section rhythm: generous, responsive vertical padding drawn from the spacing ramp */
section{padding:clamp(var(--sp-8),5vw,var(--sp-24)) 0}

.hero-copy{min-width:0}

/* ---- landing sub-nav: a sticky anchor row of pill links ---- */
.anchornav{position:sticky; top:3.6rem; z-index:40; display:flex; flex-wrap:wrap; gap:var(--sp-2);
  padding:var(--sp-3) 0; background:color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter:saturate(1.1) blur(6px); border-bottom:1px solid var(--line)}
.anchornav a{display:inline-flex; align-items:center; padding:var(--sp-2) var(--sp-4); border-radius:999px;
  border:1px solid var(--line); background:var(--panel); color:var(--ink); font-weight:650;
  font-size:var(--fs-small); text-decoration:none; white-space:nowrap}
.anchornav a:hover{border-color:var(--accent); color:var(--accent); text-decoration:none}

/* ---- the source -> view -> gate flow diagram (grid plus inline SVG connectors) ---- */
.flow{margin:var(--sp-6) auto 0; max-width:52rem}
.flow-row{display:grid; grid-template-columns:1fr auto 1fr; gap:var(--sp-4); align-items:stretch}
@media (max-width:720px){ .flow-row{grid-template-columns:1fr; gap:var(--sp-6)} }
.flow-node{background:var(--panel); border:1px solid var(--line); border-radius:var(--radius);
  border-top:3px solid var(--line); padding:var(--sp-6); box-shadow:var(--shadow-1); min-width:0}
.flow-node.src{border-top-color:var(--accent-2)}   /* teal: the machine-written source */
.flow-node.view{border-top-color:var(--accent)}     /* blue: the generated, human-read view */
.flow-arrow{display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:var(--sp-2); color:var(--muted)}
.flow-arrow svg{display:block; width:56px; height:24px}
@media (max-width:720px){ .flow-arrow svg{transform:rotate(90deg)} }
.flow-arrow .lbl{display:inline-flex; align-items:center; padding:var(--sp-1) var(--sp-3); border-radius:999px;
  background:var(--accent-2); color:var(--on-accent-2); font-family:var(--font-mono);
  font-size:var(--fs-small); font-weight:700; white-space:nowrap}
/* the gate bar sits after the row inside .flow, so it spans the full width of both columns */
.flow-gate{margin-top:var(--sp-4); display:flex; align-items:center; justify-content:center; gap:var(--sp-3);
  padding:var(--sp-3) var(--sp-6); border-radius:var(--radius-sm); border:1px solid var(--line);
  background:var(--panel-2); font-weight:700; color:var(--ink)}
.flow-gate.ok{border-color:var(--ok-line); background:var(--ok-tint)}
.flow-gate.ok::before{content:"\2713"; color:var(--ok); font-weight:800}
.flow-gate.warn{border-color:var(--danger-line); background:var(--danger-tint)}
.flow-gate.warn::before{content:"\26A0"; color:var(--danger); font-weight:800}
.flow-cap{margin:var(--sp-3) 0 0; color:var(--muted); font-size:var(--fs-small); text-align:center}

/* ---- paired TOML-beside-Markdown code showcase (also reused small as the hero mock) ---- */
.codepair{display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-4); width:fit-content; max-width:100%}
@media (max-width:720px){ .codepair{grid-template-columns:1fr} }
.codecard{background:var(--panel); border:1px solid var(--line); border-radius:var(--radius);
  border-top:3px solid var(--line); overflow:hidden; box-shadow:var(--shadow-1); min-width:0; width:fit-content; max-width:100%}
.codepair .codecard{width:auto; max-width:none}
.codecard.src{border-top-color:var(--accent-2)}    /* teal: the .toml source panel */
.codecard.view{border-top-color:var(--accent)}      /* blue: the generated .md view panel */
.codecard-bar{display:flex; align-items:center; gap:var(--sp-2); padding:var(--sp-3) var(--sp-4);
  border-bottom:1px solid var(--line); background:var(--panel-2); font-family:var(--font-mono);
  font-size:var(--fs-small); color:var(--muted)}
/* faux window chrome: a three-dot cluster rendered from one pseudo-element */
.codecard-bar::before{content:""; flex:0 0 auto; width:.62rem; height:.62rem; border-radius:50%;
  background:var(--faint); box-shadow:1rem 0 0 var(--faint), 2rem 0 0 var(--faint); margin-right:2.4rem}
.codebody{margin:0; padding:var(--sp-6); font-family:var(--font-mono);
  font-size:var(--fs-small); line-height:1.7; color:var(--ink); white-space:pre-wrap; overflow-wrap:anywhere}
.tok-tbl{color:var(--accent)}     /* the [[table]] header */
.tok-key{color:var(--ink)}        /* a key name */
.tok-str{color:var(--accent-2)}   /* a string value (source tone) */
.tok-num{color:var(--warn)}       /* a number or bare scalar */
.code-cap{margin:var(--sp-4) 0 0; color:var(--muted); text-align:center}

/* ---- benefit grid (icon-led claim cards, three-up on desktop) ---- */
.benefits{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--sp-4)}
@media (max-width:900px){ .benefits{grid-template-columns:repeat(2,1fr)} }
@media (max-width:640px){ .benefits{grid-template-columns:1fr} }
/* balanced variants: the shared 3-col default strands a lonely single card when the count mod 3 is 1
   (4 cards read 3+1, 7 read 3+3+1). A scoped modifier picks a column count whose last row keeps at
   least two cards, without changing the 3-col default other grids depend on. */
.benefits.two-col{grid-template-columns:repeat(2,1fr)}   /* 4 cards: 2 + 2 */
.benefits.four-col{grid-template-columns:repeat(4,1fr)}  /* 7 cards: 4 + 3 */
@media (max-width:900px){ .benefits.four-col{grid-template-columns:repeat(2,1fr)} }
@media (max-width:640px){ .benefits.two-col, .benefits.four-col{grid-template-columns:1fr} }
/* a block following a .benefits grid (e.g. the profile-example .codecard) clears the cards above it */
.benefits + .codecard{margin-top:var(--sp-12)}
.benefit{background:var(--panel); border:1px solid var(--line); border-radius:var(--radius);
  padding:var(--sp-6); box-shadow:var(--shadow-1)}
.benefit-ico{display:grid; place-items:center; width:44px; height:44px; border-radius:var(--radius-sm);
  color:var(--accent); background:color-mix(in srgb, var(--accent) 14%, transparent); margin-bottom:var(--sp-4)}
.benefit-ico svg{width:28px; height:28px}
.benefit h3{margin:0 0 var(--sp-2); color:var(--ink)}
.benefit p{margin:0; color:var(--muted)}

/* ---- persona cards (leaders first; three-up) ---- */
.personas{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--sp-4)}
@media (max-width:900px){ .personas{grid-template-columns:1fr} }
.persona{background:var(--panel); border:1px solid var(--line); border-radius:var(--radius);
  padding:var(--sp-6); box-shadow:var(--shadow-1)}
.persona-ico{display:grid; place-items:center; width:44px; height:44px; border-radius:var(--radius-sm);
  color:var(--accent-2); background:color-mix(in srgb, var(--accent-2) 16%, transparent); margin-bottom:var(--sp-4)}
.persona-ico svg{width:28px; height:28px}
.persona h3{margin:0 0 var(--sp-2); color:var(--ink)}
.persona p{margin:0; color:var(--muted)}
/* leaders come first, so the leaders card carries a subtly stronger border and resting elevation */
.persona.lead{border-color:var(--accent-2); box-shadow:var(--shadow-2)}

/* ---- status chips (rounded pills using the status tints) ---- */
.chip{display:inline-flex; align-items:center; gap:var(--sp-1); padding:var(--sp-1) var(--sp-3);
  border-radius:999px; font-size:var(--fs-small); font-weight:700; letter-spacing:.02em;
  border:1px solid var(--line); background:var(--panel-2); color:var(--muted)}
.chip.ok{background:var(--ok-tint); border-color:var(--ok-line); color:var(--ok)}
.chip.warn{background:var(--warn-tint); border-color:var(--warn-line); color:var(--warn)}
.chip.view{border-color:var(--accent); color:var(--accent)}   /* blue: a generated-view chip */

/* ---- entry-points router (grid of hover-lift link-cards) ---- */
.doors{display:grid; grid-template-columns:repeat(2,1fr); gap:var(--sp-4); max-width:56rem; margin-inline:auto}
@media (max-width:640px){ .doors{grid-template-columns:1fr} }
.door{display:block; background:var(--panel); border:1px solid var(--line); border-radius:var(--radius);
  padding:var(--sp-6); box-shadow:var(--shadow-1); text-decoration:none; color:inherit}
.door:hover{text-decoration:none}
.door-ico{display:grid; place-items:center; width:44px; height:44px; border-radius:var(--radius-sm);
  color:var(--accent); background:color-mix(in srgb, var(--accent) 14%, transparent); margin-bottom:var(--sp-4)}
.door-ico svg{width:28px; height:28px}
.door h3{margin:0 0 var(--sp-2); color:var(--ink)}
.door p{margin:0; color:var(--muted)}

/* ---- removable coming-soon banner: delete the whole block between the markers to remove ---- */
/* cs-banner:start */
.cs-banner{margin:0 0 var(--sp-6); padding:var(--sp-3) var(--sp-6); border-radius:var(--radius-sm);
  border:1px solid var(--warn-line); background:var(--warn-tint); color:var(--muted);
  text-align:center; font-size:var(--fs-small)}
.cs-banner b{color:var(--warn)}
/* cs-banner:end */

/* ---- reference-page appeal pattern (per-file pages) ---- */
.refhead{margin:0 0 var(--sp-6)}
.refchips{display:flex; flex-wrap:wrap; gap:var(--sp-2); margin:var(--sp-3) 0 0}
.refchips span, .refchips code{display:inline-flex; align-items:center; padding:var(--sp-1) var(--sp-3);
  border-radius:var(--radius-sm); border:1px solid var(--line); background:var(--panel-2);
  font-family:var(--font-mono); font-size:var(--fs-small); color:var(--muted)}
/* the "problem it solves" pull-quote, with a teal (source-tone) left accent bar */
.refpull{margin:var(--sp-6) 0; padding:var(--sp-2) 0 var(--sp-2) var(--sp-6);
  border-left:3px solid var(--accent-2); color:var(--ink); font-size:var(--fs-lead); line-height:1.5}
/* the Pairs-with / Lifecycle / Referenced-by mini definition-list strip */
.refstrip{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--sp-4); margin:var(--sp-6) 0}
@media (max-width:720px){ .refstrip{grid-template-columns:1fr} }
.refstrip dt{margin:0 0 var(--sp-2); color:var(--accent-2); font-size:var(--fs-small); font-weight:800;
  letter-spacing:.08em; text-transform:uppercase}
.refstrip dd{margin:0; color:var(--muted)}

/* ---- card hover polish: resting --shadow-1 lifts to --shadow-2 with a 1px rise ---- */
.benefit,.persona,.door,.codecard{transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease}
.benefit:hover,.persona:hover,.door:hover,.codecard:hover{transform:translateY(-1px); box-shadow:var(--shadow-2)}
.door:hover,.codecard:hover{border-color:var(--accent)}
@media (prefers-reduced-motion: reduce){
  .benefit,.persona,.door,.codecard{transition:none}
  .benefit:hover,.persona:hover,.door:hover,.codecard:hover{transform:none}
}

/* ---- reference-hub tab strip + panels (progressive enhancement) ---- */
.navtabs{display:flex; flex-wrap:wrap; gap:var(--sp-2); margin:var(--sp-6) 0 var(--sp-4);
  border-bottom:1px solid var(--line); padding-bottom:var(--sp-4)}
/* JS-on active tab. JS-off leaves every .navtab in its resting pill state. */
.navtab[aria-selected="true"]{background:var(--accent); border-color:transparent; color:var(--on-accent)}
/* Panel-hiding applies ONLY once theme.js sets data-tabs-js on <html>; without JS all panels stay visible. */
html[data-tabs-js] .tabpanel[hidden]{display:none}
html[data-tabs-js] .navtabs{gap:var(--sp-2) 0}          /* tabs abut as a real tablist when enhanced */
.tabpanel{scroll-margin-top:4.5rem}                     /* clear the sticky topbar on a hash jump */
.tabpanel[id]{scroll-margin-top:4.5rem}
.tabpanel:focus-visible{outline:3px solid var(--accent); outline-offset:4px}
.showall{margin:0 0 var(--sp-8)}
.showall[hidden]{display:none}                          /* .btn is inline-block, which outranks UA [hidden] */
@media print{
  html[data-tabs-js] .tabpanel[hidden]{display:block}   /* print the whole document, all panels */
  .navtabs,.showall{display:none}
}

/* ---- rendered-markdown view body: proportional, real block elements, no monospace, no forced scrollbar ---- */
.codeview{margin:0; padding:var(--sp-6); color:var(--ink); font-size:var(--fs-body); line-height:1.6;
  overflow-wrap:anywhere}
.codeview-genhdr{margin:0 0 var(--sp-4); padding-bottom:var(--sp-3); border-bottom:1px solid var(--line);
  color:var(--faint); font-size:var(--fs-small)}          /* the do-not-edit header, subtle */
.codeview-h1{margin:0 0 var(--sp-3); font-size:1.05rem; letter-spacing:.06em; text-transform:uppercase; color:var(--muted)}
.codeview h4,.codeview h5{color:var(--ink)}
.codeview-list{margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:var(--sp-2)}
.codeview-list li{display:flex; align-items:baseline; flex-wrap:wrap; gap:var(--sp-2); color:var(--ink)}
.codeview-id{font-family:var(--font-mono); color:var(--accent)}
.codeview-tag{color:var(--faint); font-size:var(--fs-small)}
.codeview table{width:100%; border-collapse:collapse; font-size:var(--fs-small)}   /* tables wrap, no h-scroll */
.codeview th,.codeview td{padding:var(--sp-2) var(--sp-3); border-bottom:1px solid var(--line);
  text-align:left; vertical-align:top; overflow-wrap:anywhere}
.codeview th{color:var(--muted); font-weight:700}

/* ---- full-width vertically-stacked code pair (landing hero + "see it in one file") ---- */
.codepair.stack{grid-template-columns:1fr}