/* ======================================================================
   CTI AI Insights: Editorial review build
   Brand source: Cititec standard template (logo, Proxima Nova, Space Grotesk)
   Primary publishing identity: Commodities Tech Insider
   Secondary endorsement: Powered by Cititec
   ====================================================================== */

@font-face{font-family:"Proxima Nova";src:url("../assets/fonts/ProximaNova-regular.ttf") format("truetype");font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:"Proxima Nova";src:url("../assets/fonts/ProximaNova-italic.ttf") format("truetype");font-weight:400;font-style:italic;font-display:swap;}
@font-face{font-family:"Proxima Nova";src:url("../assets/fonts/ProximaNova-bold.ttf") format("truetype");font-weight:700;font-style:normal;font-display:swap;}
@font-face{font-family:"Proxima Nova";src:url("../assets/fonts/ProximaNova-boldItalic.ttf") format("truetype");font-weight:700;font-style:italic;font-display:swap;}
@font-face{font-family:"Space Grotesk";src:url("../assets/fonts/SpaceGrotesk-regular.ttf") format("truetype");font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:"Space Grotesk";src:url("../assets/fonts/SpaceGrotesk-bold.ttf") format("truetype");font-weight:700;font-style:normal;font-display:swap;}

:root{
  /* Cititec brand ink, sampled from the supplied wordmark */
  --brand:#0D2F20;
  --brand-deep:#071B12;
  --brand-mid:#12402C;

  /* pale mint: restrained highlight and interaction colour */
  --mint:#DCEAE0;
  --mint-soft:#EDF4EF;
  --mint-line:#C3D9C9;
  --mint-on-dark:#9DC7AC;

  --ink:#141C17;
  --ink-2:#3A463E;
  --muted:#5A665E;
  --faint:#636D65;

  /* cream is the dominant reading surface */
  --paper:#FAF7F0;
  --paper-2:#F4F0E6;
  --card:#FFFFFF;
  --rule:#E3DDCE;
  --rule-2:#EEE9DC;

  --accent:var(--brand);
  --accent-2:var(--brand-mid);
  --accent-soft:var(--mint-soft);

  --tension:#8A4A1E;
  --tension-soft:#FBF0E6;
  --examine:#265F42;
  --examine-soft:var(--mint-soft);

  --src-private:#0D2F20;
  --src-private-soft:#E4EEE7;
  --src-external:#37506C;
  --src-external-soft:#E9EEF3;
  --src-cititec:#6B5316;
  --src-cititec-soft:#F7F0DE;

  --gap:#8A4A1E;

  /* UNVERIFIED: awaiting the confirmed Cititec brand yellow. Until it is
     supplied this falls back to an existing token, so no invented colour
     ships. Replace this one value to introduce the brand accent. */
  --brand-accent:var(--mint-line);

  --display:"Space Grotesk","Arial Narrow",sans-serif;
  --sans:"Proxima Nova",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;

  --wrap:1180px;
  --col:34rem;   /* single reading measure used by every narrative section */

  /* breathing room scale */
  --s-section:4.25rem;
  --s-block:2.4rem;
  --s-card:1.75rem;
  --s-para:1.15em;
  --radius-sm:3px;
  --ctrl-h:2.35rem;

  --shadow:0 1px 2px rgba(10,26,18,.04),0 12px 34px rgba(10,26,18,.07);
  --shadow-lift:0 2px 6px rgba(10,26,18,.06),0 20px 48px rgba(10,26,18,.10);
  --radius:6px;
  --dur:200ms;
}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:0.001ms !important;animation-iteration-count:1 !important;transition-duration:0.001ms !important;scroll-behavior:auto !important;}
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--sans);font-size:1.02rem;line-height:1.68;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{font-family:var(--display);line-height:1.14;margin:0;font-weight:700;letter-spacing:-.01em;color:var(--ink)}
p{margin:0 0 var(--s-para)}
a{color:var(--accent);text-underline-offset:.18em;text-decoration-thickness:.06em}
a:hover{color:var(--accent-2)}
button{font-family:var(--sans)}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 2rem}
.col{max-width:var(--col)}
.skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:#fff;padding:.75rem 1rem;z-index:200}
.skip:focus{left:.5rem;top:.5rem}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* ---------- review-build banner ---------- */

/* ---------- masthead ---------- */
.masthead{background:var(--brand);border-bottom:1px solid rgba(255,255,255,.08)}
.masthead .wrap{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;padding-top:1.5rem;padding-bottom:1.5rem;flex-wrap:wrap}
.cti-lockup{display:flex;flex-direction:column;gap:.15rem;text-decoration:none}
.cti-name{font-family:var(--display);font-size:1.18rem;font-weight:700;letter-spacing:.02em;color:#fff;line-height:1.05}
.cti-edition{font-family:var(--sans);font-size:.76rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--mint-on-dark);margin-top:.35rem}
.powered-by{display:flex;align-items:center;gap:.7rem}
.powered-by-label{font-family:var(--sans);font-size:.76rem;font-weight:600;letter-spacing:.11em;text-transform:uppercase;color:var(--mint-on-dark)}
.powered-by img{height:26px;width:auto;display:block;filter:brightness(0) invert(1)}

/* ---------- hero ---------- */
.hero{background:var(--brand);color:#fff;padding:4.4rem 0 3.4rem;position:relative}
.hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:rgba(255,255,255,.10)}
.kicker{font-family:var(--sans);font-size:.76rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--mint-on-dark);margin-bottom:2rem}
.hero h1{font-size:clamp(2.35rem,5.2vw,3.85rem);letter-spacing:-.022em;max-width:15ch;color:#fff;line-height:1.07}
.title-note{font-family:var(--sans);font-size:.79rem;color:var(--mint-on-dark);margin-top:1.1rem;font-style:italic;opacity:.85}
.standfirst{font-family:var(--sans);font-size:clamp(1.08rem,1.9vw,1.28rem);line-height:1.6;color:#DCE7DE;max-width:48ch;margin-top:1.7rem;font-weight:400}
.hero-meta{font-family:var(--sans);font-size:.94rem;letter-spacing:0;color:var(--ink-2);
  margin-top:2.9rem;background:var(--paper);border:1px solid var(--rule);
  border-top:3px solid var(--brand-accent);border-radius:var(--radius);padding:1.65rem 1.85rem;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(15.5rem,1fr));gap:1.5rem 2.6rem;
  max-width:62rem;line-height:1.6}
.hero-meta > div{min-width:0}
.hero-meta b{display:block;margin-bottom:.45rem;font-family:var(--sans);font-size:.835rem;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}

/* ---------- nav ---------- */
.navbar{position:sticky;top:0;z-index:60;background:rgba(250,247,240,.95);backdrop-filter:saturate(160%) blur(12px);border-bottom:1px solid var(--rule)}
/* The navbar spans wider than the reading measure so all seven section
   labels stay visible at desktop widths rather than scrolling out of view. */
.navbar .wrap{display:flex;align-items:center;gap:.85rem;padding:0 2rem;max-width:min(1560px,100%)}
.navlist{display:flex;gap:.1rem;overflow-x:auto;scrollbar-width:none;flex:1;margin:0;padding:0;list-style:none;
  -webkit-mask-image:linear-gradient(to right,#000 calc(100% - 2rem),transparent 100%);
  mask-image:linear-gradient(to right,#000 calc(100% - 2rem),transparent 100%)}
.navlist::-webkit-scrollbar{display:none}
.navlist a{font-family:var(--sans);font-size:.835rem;font-weight:700;letter-spacing:.005em;color:var(--ink-2);text-decoration:none;white-space:nowrap;padding:1.05rem .5rem;display:block;border-bottom:2px solid transparent;transition:color var(--dur)}
.navlist a:hover{color:var(--ink)}
.navlist a.on{color:var(--accent);border-bottom-color:var(--accent)}
.nav-tools{display:flex;gap:.5rem;align-items:center;padding:.5rem 0;flex-shrink:0}
.icon-btn{font-family:var(--sans);font-size:.78rem;font-weight:600;color:var(--ink-2);background:var(--card);border:1px solid var(--rule);border-radius:var(--radius-sm);height:2.05rem;padding:0 .75rem;cursor:pointer;white-space:nowrap;display:inline-flex;align-items:center;gap:.4rem;transition:border-color var(--dur),color var(--dur)}
.icon-btn:hover{border-color:var(--accent);color:var(--accent)}
.icon-btn.active{background:var(--accent);border-color:var(--accent);color:#fff}

/* ---------- evidence lens filter bar ---------- */
/* The lens now sits inside the snapshot, between the introduction and the
   cards, and pins to the top of the viewport once scrolled past. */
.lens-sentinel{height:0}
.lens-bar{background:var(--card);border:1px solid var(--rule);border-radius:var(--radius);
  margin:0 0 2rem;padding:.95rem 1.15rem}
.lens-inner{display:flex;flex-direction:column;gap:.7rem}
.lens-row{display:flex;align-items:center;gap:.7rem;flex-wrap:wrap}
.lens-bar.pinned{position:fixed;top:var(--lens-top,0);left:0;right:0;z-index:55;margin:0;
  border-radius:0;border-left:0;border-right:0;border-top:0;
  padding:.6rem max(2rem,calc((100vw - var(--wrap)) / 2 + 2rem));
  box-shadow:0 8px 16px -14px rgba(10,26,18,.55)}
.lens-bar.pinned .ev-controls{display:none}
.lens-label{font-family:var(--sans);font-size:.79rem;font-weight:700;letter-spacing:.06em;color:var(--ink-2)}
/* Expand and collapse all, driving both card toggles and inline notes. */
.ev-controls{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;
  padding-top:.7rem;border-top:1px solid var(--rule-2)}
.ev-ctrl{font-family:var(--sans);font-size:.79rem;font-weight:600;color:var(--accent);
  background:none;border:1px solid var(--mint-line);border-radius:var(--radius-sm);
  padding:.35rem .7rem;cursor:pointer;transition:background var(--dur),border-color var(--dur)}
.ev-ctrl:hover{background:var(--mint-soft);border-color:var(--accent)}
.ev-ctrl-note{font-family:var(--sans);font-size:.78rem;color:var(--muted)}
.lens-chip{font-family:var(--sans);font-size:.81rem;font-weight:600;padding:.44rem .9rem;border-radius:20px;border:1px solid var(--rule);background:var(--card);color:var(--ink-2);cursor:pointer;display:inline-flex;align-items:center;gap:.45rem;transition:all var(--dur)}
.lens-chip .dot{width:8px;height:8px;border-radius:50%;display:inline-block}
.lens-chip[data-src="private"] .dot{background:var(--src-private)}
.lens-chip[data-src="external"] .dot{background:var(--src-external)}
.lens-chip[data-src="cititec"] .dot{background:var(--src-cititec)}
.lens-chip.active[data-src="private"]{background:var(--src-private-soft);border-color:var(--src-private);color:var(--src-private)}
.lens-chip.active[data-src="external"]{background:var(--src-external-soft);border-color:var(--src-external);color:var(--src-external)}
.lens-chip.active[data-src="cititec"]{background:var(--src-cititec-soft);border-color:var(--src-cititec);color:var(--src-cititec)}
.lens-reset{font-family:var(--sans);font-size:.78rem;color:var(--muted);background:none;border:none;cursor:pointer;text-decoration:underline;text-underline-offset:.2em}
body.lens-filtering [data-source]{opacity:.22;transition:opacity var(--dur)}
body.lens-filtering [data-source].lens-match{opacity:1}

/* ---------- evidence badges (inline, restrained) ---------- */
.src-badge{display:inline-flex;align-items:center;gap:.34rem;font-family:var(--sans);font-size:.78rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;padding:.2rem .55rem;border-radius:20px;white-space:nowrap;vertical-align:middle}
.src-badge .dot{width:6px;height:6px;border-radius:50%}
.src-badge[data-src="private"]{background:var(--src-private-soft);color:var(--src-private)}
.src-badge[data-src="private"] .dot{background:var(--src-private)}
.src-badge[data-src="external"]{background:var(--src-external-soft);color:var(--src-external)}
.src-badge[data-src="external"] .dot{background:var(--src-external)}
.src-badge[data-src="cititec"]{background:var(--src-cititec-soft);color:var(--src-cititec)}
.src-badge[data-src="cititec"] .dot{background:var(--src-cititec)}
.gap-badge{display:inline-flex;align-items:center;font-family:var(--sans);font-size:.78rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;padding:.2rem .55rem;border-radius:20px;background:#fff;color:var(--gap);border:1px dashed var(--gap)}

/* ---------- snapshot ---------- */
.snapshot{padding:var(--s-section) 0;border-bottom:0;background:var(--paper-2)}
.sec-label{font-family:var(--sans);font-size:.75rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2)}
/* A13 applies to the executive snapshot label specifically, not to every
   small-caps label in the report. */
.sec-label.snap-label{text-transform:none;letter-spacing:.02em;font-size:.85rem}
.snapshot h2{font-size:clamp(1.75rem,3vw,2.2rem);margin:1rem 0 .9rem;letter-spacing:-.015em}
.orientation{font-family:var(--sans);font-size:1.13rem;font-weight:500;line-height:1.62;color:var(--ink);max-width:58ch;margin:0 0 1rem}
.snapshot .lede{color:var(--muted);max-width:56ch;margin-bottom:2rem;font-size:.97rem}
.snap-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(20rem,1fr));gap:1.4rem}
.snap{background:var(--card);padding:var(--s-card) 1.7rem;position:relative;border:1px solid var(--rule);border-radius:var(--radius);box-shadow:var(--shadow);transition:box-shadow var(--dur)}
.snap:hover{box-shadow:var(--shadow-lift)}
.snap-top{display:flex;justify-content:space-between;align-items:flex-start;gap:.5rem;margin-bottom:.65rem}
.snap-num{font-family:var(--display);font-size:.95rem;font-weight:700;letter-spacing:.06em;color:var(--accent)}
.snap-head{font-family:var(--display);font-size:1.17rem;line-height:1.36;font-weight:700;letter-spacing:-.008em;margin:0}
.snap-summary{font-size:1rem;color:var(--ink-2);margin-top:1.1rem;line-height:1.68}
.snap-toggle{font-family:var(--sans);font-size:.8rem;font-weight:700;color:var(--accent);margin-top:1.3rem;display:inline-flex;align-items:center;gap:.45rem;background:var(--mint-soft);border:1px solid var(--mint-line);border-radius:3px;cursor:pointer;padding:.45rem .75rem;transition:background var(--dur)}
.snap-toggle:hover{background:var(--mint)}
.snap-toggle::after{content:"+";font-size:.95rem;line-height:1}
.snap-toggle[aria-expanded="true"]::after{content:"\2013"}
.snap-toggle[aria-expanded="true"]{color:var(--accent)}
.snap-evidence{font-size:.97rem;color:var(--ink-2);margin-top:1.4rem;padding-top:1.4rem;border-top:1px solid var(--rule-2);display:none;line-height:1.68}
.snap-evidence.open{display:block}
.snap-evidence p{margin-bottom:.75em}
.snap-evidence .ev-block{margin-bottom:1.35rem}
.snap-evidence .ev-block:last-child{margin-bottom:0}
.snap-evidence .badges{display:flex;gap:.4rem;flex-wrap:wrap;margin-bottom:.4rem}
.snap-jump{font-family:var(--sans);font-size:.81rem;font-weight:600;text-decoration:none;border-bottom:1px solid var(--accent-soft)}
/* Only the snapshot cards position their comment button absolutely; the
   card is position:relative. Elsewhere the button is a normal flex/flow
   child, otherwise it escapes its unpositioned container. */
.card-comment{position:static}
.snap > .card-comment{position:absolute;top:1.5rem;right:1.5rem}
.feature-head{position:relative}
.feature-head .card-comment,.briefing-panel .card-comment{flex-shrink:0}

/* ---------- comment button ---------- */
.comment-btn{width:26px;height:26px;border-radius:50%;border:1px solid var(--rule);background:var(--card);color:var(--muted);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;font-size:.72rem;transition:all var(--dur)}
.comment-btn:hover{border-color:var(--accent);color:var(--accent)}
.comment-btn.has-comments{background:var(--tension-soft);border-color:var(--tension);color:var(--tension)}
.section-comment-row{display:flex;justify-content:flex-end;margin-top:1.2rem}

/* ---------- sections ---------- */
.section{padding:var(--s-section) 0;border-bottom:0}
.surface-cream{background:var(--paper-2)}
.surface-white{background:var(--card)}
.surface-mint{background:var(--mint-soft)}
/* hairline only where two like surfaces meet */
.surface-white + .surface-white,.surface-cream + .surface-cream{border-top:1px solid var(--rule)}
/* keep anchored headings clear of the sticky nav */
section[id],div[id="top"]{scroll-margin-top:5rem}
.section-head{display:grid;grid-template-columns:7.5rem 1fr;gap:1.1rem;align-items:start;margin-bottom:var(--s-block);padding-bottom:1.3rem;border-bottom:1px solid var(--rule)}
.section-num{font-family:var(--sans);font-size:1.25rem;font-weight:700;letter-spacing:.01em;color:var(--ink-2);padding-top:.62rem;border-top:2px solid var(--ink);line-height:1.2}
.section-head h2{font-size:clamp(1.7rem,3vw,2.25rem);letter-spacing:-.02em;max-width:22ch;line-height:1.14}
.section-head .sub{font-family:var(--sans);font-size:1.01rem;font-weight:400;color:var(--ink-2);margin-top:.8rem;max-width:54ch;line-height:1.62}
.section-head h2 + .sub{font-weight:400}
.body{max-width:var(--col)}
.body.wide{max-width:none}
.body h3{font-family:var(--display);font-size:1.2rem;margin:2.6rem 0 .9rem;letter-spacing:-.008em;padding-top:1.4rem;border-top:1px solid var(--rule)}
.body h3:first-child{margin-top:0;padding-top:0;border-top:0}
.lead-para{font-size:1.18rem;line-height:1.58;color:var(--ink);margin-bottom:1.35em}

/* ---------- expandable qualification note ---------- */
.expand-note{margin:1.5rem 0;max-width:var(--col)}
.expand-note summary{cursor:pointer;font-family:var(--sans);font-size:.85rem;font-weight:600;color:var(--accent);list-style:none;display:flex;align-items:flex-start;gap:.5rem;line-height:1.45}
.expand-note summary:hover{text-decoration:underline;text-underline-offset:.2em}
.expand-note summary::before{flex:0 0 auto;line-height:1.25}
.expand-note summary::-webkit-details-marker{display:none}
.expand-note summary::before{content:"+";color:var(--accent);font-size:1rem}
.expand-note[open] summary::before{content:"\2013"}
.expand-note-body{font-size:.97rem;color:var(--ink-2);padding:1rem 0 .4rem 1.5rem;border-left:2px solid var(--mint-line);margin-left:.05rem;margin-top:.7rem;line-height:1.68}

.market-dek{font-family:var(--sans);font-size:.8rem;color:var(--muted);margin:0 0 .9rem}

/* ---------- feature card shell ---------- */
.body .feature,.body .bench,.body .wide-block{width:min(calc(var(--wrap) - 3rem),calc(100vw - 4.5rem));max-width:none}
.feature{margin:var(--s-block) 0;background:var(--card);border:1px solid var(--rule);border-radius:var(--radius);box-shadow:none;overflow:hidden}
.feature-head{padding:1.5rem 1.8rem 1.25rem;border-bottom:1px solid var(--rule);display:flex;justify-content:space-between;align-items:flex-start;gap:1.5rem;background:var(--mint-soft)}
.feature-head .sec-label{color:var(--accent)}
.feature-head h3{font-size:1.22rem;margin:.5rem 0 .45rem;letter-spacing:-.012em;padding-top:0;border-top:0}
.feature-head p{font-family:var(--sans);font-size:.91rem;color:var(--ink-2);margin:0;max-width:56ch;line-height:1.55}
.feature-body{padding:1.7rem 1.8rem 1.9rem}

/* ---------- market activity chart ---------- */
/* The panels sit inside the 34rem reading measure, so two columns left each
   label too narrow and forced it to wrap away from its figure. */
.chart-panels{display:grid;grid-template-columns:1fr;gap:1.2rem}
.chart-panel{background:var(--paper);border:1px solid var(--rule);border-radius:4px;padding:1.7rem 1.8rem}
.chart-panel h4{font-family:var(--display);font-size:.98rem;margin-bottom:.35rem}
.chart-panel .chart-note{font-size:.86rem;color:var(--ink-2);margin-bottom:1.1rem;line-height:1.5}
.bar-row{margin-bottom:.9rem}
.bar-row:last-child{margin-bottom:0}
.bar-label{font-family:var(--sans);font-size:.88rem;color:var(--ink-2);margin-bottom:.4rem;display:flex;
  justify-content:space-between;align-items:baseline;gap:1.5rem;flex-wrap:nowrap;line-height:1.45}
.bar-label span{flex:1 1 auto;min-width:0}
.bar-label b{flex:0 0 auto;color:var(--ink);font-weight:700;text-align:right}
.bar-track{height:10px;background:var(--rule-2);border-radius:20px;overflow:hidden}
.bar-fill{height:100%;background:var(--accent);border-radius:20px;width:0;transition:width 700ms ease}
.chart-panel.impact .bar-fill{background:var(--tension)}
.chart-counterpoint{grid-column:1/-1;background:var(--tension-soft);border:1px solid #E9CDAE;border-radius:4px;padding:1.1rem 1.3rem;font-size:.92rem;color:#5A3612}
.chart-counterpoint b{display:block;font-family:var(--sans);font-size:.76rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;margin-bottom:.4rem;color:var(--tension)}

/* ---------- buttons ---------- */
.btn{font-family:var(--sans);font-size:.8rem;font-weight:700;height:var(--ctrl-h);padding:0 1.15rem;border-radius:var(--radius-sm);border:1px solid var(--accent);background:var(--accent);color:#fff;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;transition:background var(--dur)}
.btn:hover{background:var(--accent-2);border-color:var(--accent-2);color:#fff}
.btn.ghost{background:transparent;color:var(--ink-2);border-color:var(--rule)}
.btn.ghost:hover{color:var(--accent);border-color:var(--accent);background:transparent}

/* ---------- ask the briefing ---------- */

/* ---------- in-development list ---------- */

/* ---------- method / source notes ---------- */

/* ---------- comment drawer ---------- */
.drawer-backdrop{position:fixed;inset:0;background:rgba(13,20,17,.4);z-index:190;display:none}
.drawer-backdrop.open{display:block}
.comment-drawer{position:fixed;top:0;right:0;height:100%;width:min(420px,92vw);background:var(--card);z-index:200;box-shadow:-8px 0 30px rgba(0,0,0,.15);transform:translateX(100%);transition:transform 220ms ease;display:flex;flex-direction:column}
.comment-drawer.open{transform:translateX(0)}
.drawer-head{padding:1.3rem 1.4rem 1rem;border-bottom:1px solid var(--rule);display:flex;justify-content:space-between;align-items:flex-start;gap:1rem}
.drawer-head h3{font-size:1.1rem}
.drawer-context{font-family:var(--sans);font-size:.75rem;color:var(--muted);margin-top:.3rem}
.drawer-close{background:none;border:none;font-size:1.3rem;color:var(--muted);cursor:pointer;line-height:1;padding:.2rem}
.drawer-body{padding:1.2rem 1.4rem;overflow-y:auto;flex:1}
.drawer-body label{display:block;font-family:var(--sans);font-size:.72rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);margin:1rem 0 .4rem}
.drawer-body label:first-child{margin-top:0}
.drawer-body select,.drawer-body textarea,.drawer-body input[type=text]{width:100%;font-family:var(--sans);font-size:.9rem;padding:.6rem .7rem;border:1px solid var(--rule);border-radius:3px;background:var(--paper);color:var(--ink)}
.drawer-body textarea{min-height:6rem;resize:vertical}
.selected-text-preview{font-size:.83rem;color:var(--ink-2);background:var(--paper);border-left:3px solid var(--accent);padding:.6rem .8rem;margin-top:.3rem;font-style:italic}
.drawer-actions{padding:1rem 1.4rem 1.3rem;border-top:1px solid var(--rule);display:flex;gap:.6rem}
.comment-list{margin-top:1.6rem;padding-top:1.2rem;border-top:1px solid var(--rule)}
.comment-item{padding:.8rem 0;border-top:1px solid var(--rule-2)}
.comment-item:first-child{border-top:0}
.comment-item .meta{display:flex;justify-content:space-between;font-family:var(--sans);font-size:.72rem;color:var(--muted);margin-bottom:.35rem}
.comment-item .cat-tag{font-weight:700;color:var(--accent);text-transform:uppercase;letter-spacing:.05em;font-size:.68rem}
.comment-item .text{font-size:.9rem;color:var(--ink-2)}
.comment-item .status{display:inline-block;margin-top:.4rem;font-size:.7rem;font-weight:700;padding:.14rem .5rem;border-radius:20px}
.comment-item .status.open{background:var(--tension-soft);color:var(--tension)}
.comment-item .status.resolved{background:var(--examine-soft);color:var(--examine)}
.comment-item .resolve-btn{font-family:var(--sans);font-size:.7rem;background:none;border:none;color:var(--muted);text-decoration:underline;cursor:pointer;margin-left:.6rem}
.empty-comments{font-size:.85rem;color:var(--faint);font-style:italic}

/* ---------- footer ---------- */
footer{background:var(--brand-deep);color:#A9C0B0;padding:4.5rem 0 4rem;font-family:var(--sans);font-size:.84rem}

footer h4{font-size:.76rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--mint-on-dark);margin-bottom:1.1rem}
footer p{margin-bottom:.65em;line-height:1.6}
footer a{color:#D5DBCF}
footer a:hover{color:#fff}
.foot-brand{font-family:var(--display);font-size:1rem;font-weight:700;letter-spacing:.03em;color:#fff;margin-bottom:1.2rem}
.foot-bottom{margin-top:2.2rem;padding-top:1.3rem;border-top:1px solid #1E2B23;font-size:.79rem;color:#6E7E71;display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap}

/* ---------- responsive ---------- */
@media (max-width:820px){
  .section-head{grid-template-columns:1fr;gap:.85rem}
  .section-num{border-top:0;padding-top:0}
  .foot-grid{grid-template-columns:1fr;gap:1.6rem}
  .hero{padding:2.6rem 0 2rem}
  .section{padding:2.8rem 0}
  .feature-head,.feature-body{padding-left:1.2rem;padding-right:1.2rem}
  .body .feature,.body .bench,.body .wide-block{width:100%}
  .q{grid-template-columns:1fr;gap:.7rem}
  .masthead .wrap{gap:.6rem}
  /* keep the section list usable: the review chip and long button labels
     otherwise squeeze the scroller down to a sliver on a phone */
  .navbar .wrap{gap:.5rem}
  .navbar .review-chip{display:none}
  .nav-tools{gap:.35rem}
  .icon-btn{font-size:.76rem;padding:0 .55rem}
  .navlist a{padding:1.1rem .55rem}
}
@media (max-width:520px){
  body{font-size:1rem}
  .wrap{padding:0 1.1rem}
  .powered-by-label{font-size:.76rem;letter-spacing:.1em}
}

/* Review-build chrome yields space to the section labels before the labels
   themselves are allowed to scroll out of view. */
@media (max-width:1400px){.navbar .review-chip{display:none}}
@media (max-width:1300px){.navlist a{padding-left:.35rem;padding-right:.35rem}}

/* ---------- print ---------- */
@media print{
  :root{--paper:#fff}
  body{background:#fff;font-size:10.5pt;line-height:1.45;color:#000}
  /* chrome that must never print */
  .navbar,.lens-bar,.comment-btn,.card-comment,.box-comment,.section-comment-row,
  .overall-comment-wrap,.comment-drawer,.drawer-backdrop,  .snap-toggle,.review-chip{display:none !important}
  .masthead{border-bottom:1px solid #ccc}
  a{color:#000;text-decoration:none}
  .hero{padding:1.4rem 0}
  .hero h1{font-size:26pt}
  .section{padding:1.15rem 0;border-bottom:0}
  .section-head{break-after:avoid}
  .body .feature,.body .bench,.body .wide-block{width:100%}
  .feature,.snap,details.auth{break-inside:avoid}
  .snap-evidence{display:block !important}
  footer{background:#fff;color:#333;border-top:1px solid #ccc}
  footer h4,.foot-brand{color:#000}
  footer a{color:#000}
    .expand-note{display:block}
  .expand-note-body{display:block !important}
}

/* ---------- comment-button placement helpers (added for review mode) ---------- */
.overall-comment-wrap{position:fixed;bottom:1.4rem;right:1.4rem;z-index:150}
.overall-comment-wrap .comment-btn{width:46px;height:46px;font-size:1.05rem;box-shadow:var(--shadow);background:var(--accent);border-color:var(--accent);color:#fff}
.overall-comment-wrap .comment-btn:hover{background:var(--accent-2)}
.overall-comment-wrap .comment-btn.has-comments{background:var(--tension);border-color:var(--tension)}
body.review-mode-off .overall-comment-wrap{display:none}
@media print{.overall-comment-wrap{display:none !important}}

/* build separation notes */

/* reserved approved material */

/* ---------- responsive: keep breathing room on mobile ---------- */
@media (max-width:820px){
  :root{--s-section:4rem;--s-block:2.4rem;--s-card:1.6rem}
  .hero{padding:3.5rem 0 3.5rem}
  .hero-meta{margin-top:2.4rem;gap:1rem}
  .snap-grid{gap:1.1rem}
  .snap{padding:1.7rem 1.5rem}
  .feature-head,.feature-body{padding-left:1.5rem;padding-right:1.5rem}
  .author-card{grid-template-columns:1fr;gap:2rem;padding:2.2rem 1.7rem}
  .author-photo,.author-monogram{width:120px;height:120px}
  .author-photo-pending{width:120px}
  .wrap{padding:0 1.4rem}
}
@media (max-width:520px){
  .wrap{padding:0 1.2rem}
  .masthead .wrap{padding-top:1.1rem;padding-bottom:1.1rem}
}

/* ---------- print: author panel renders on white ---------- */
@media print{
      .conv-out{background:#f2f2f2 !important;color:#000 !important}
  .author-section{background:#fff !important}
  .author-card{border:1px solid #999 !important;box-shadow:none !important;break-inside:avoid}
  .author-monogram{background:#f2f2f2 !important;color:#000 !important}
}

/* ======================================================================
   FDE ROLE COMPARATOR
   Same card shell, typography and control language as every other
   feature. Its dark band is a header accent, not a separate design.
   ====================================================================== */

/* ======================================================================
   AUTHOR PANEL: dark closing anchor, centred and composed
   ====================================================================== */
.visually-hidden{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.author-section{background:var(--brand);color:#fff;padding:var(--s-section) 0 calc(var(--s-section) * .9)}
.author-panel{max-width:56rem;margin:0 auto;text-align:center}
.author-eyebrow{font-family:var(--sans);font-size:.75rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--mint-on-dark);margin-bottom:2rem}
.author-inner{display:grid;grid-template-columns:auto 1fr;gap:2.6rem;align-items:start;text-align:left}
.author-figure{margin:0;flex-shrink:0}
.author-photo{width:190px;height:190px;border-radius:50%;object-fit:cover;display:block;
  border:3px solid var(--mint-on-dark);box-shadow:0 0 0 8px rgba(157,199,172,.10)}
.author-name{font-family:var(--display);font-size:1.75rem;font-weight:700;letter-spacing:-.018em;color:#fff;margin-bottom:.4rem}
.author-title{font-family:var(--sans);font-size:.78rem;font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:var(--mint-on-dark);margin-bottom:1.4rem}
.author-bio p{font-size:.97rem;line-height:1.7;color:#C8D6CB;margin-bottom:1em;max-width:58ch}
.author-bio p:last-child{margin-bottom:0}
.author-contact{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.6rem}
.author-link{font-family:var(--sans);font-size:.82rem;font-weight:600;color:#fff;text-decoration:none;border:1px solid rgba(255,255,255,.26);border-radius:var(--radius-sm);height:var(--ctrl-h);padding:0 1rem;display:inline-flex;align-items:center;transition:all var(--dur)}
.author-link:hover{background:var(--mint);border-color:var(--mint);color:var(--brand-deep)}
.author-endorse{display:flex;align-items:center;justify-content:center;gap:.9rem;margin-top:2.6rem;padding-top:1.8rem;border-top:1px solid rgba(255,255,255,.14)}
.author-pub{font-family:var(--sans);font-size:.76rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#fff}
.author-dot{width:4px;height:4px;border-radius:50%;background:var(--mint-on-dark);display:inline-block}
.author-powered{font-family:var(--sans);font-size:.76rem;font-weight:600;letter-spacing:.11em;text-transform:uppercase;color:var(--mint-on-dark)}
.author-logo{height:30px;width:auto;filter:brightness(0) invert(1)}

/* ======================================================================
   SLIM FOOTER
   ====================================================================== */
footer{background:var(--brand-deep);color:#A9C0B0;padding:2.2rem 0 2.4rem;font-family:var(--sans);font-size:.82rem}
.foot-row{display:flex;justify-content:space-between;align-items:center;gap:1.6rem;flex-wrap:wrap;padding-bottom:1.4rem;border-bottom:1px solid rgba(255,255,255,.10)}
.foot-identity{display:flex;align-items:center;gap:1.2rem;flex-wrap:wrap}
.foot-brand{font-family:var(--display);font-size:1.02rem;font-weight:700;letter-spacing:.04em;color:#fff}
.foot-powered{display:inline-flex;align-items:center;gap:.5rem}
.foot-powered span{font-size:.76rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--mint-on-dark)}
.foot-powered img{height:24px;width:auto;filter:brightness(0) invert(1)}
.foot-links{display:flex;gap:1.4rem;flex-wrap:wrap}
.foot-links a{color:#CFDDD2;text-decoration:none;font-size:.86rem}
.foot-links a:hover{color:#fff;text-decoration:underline}
.foot-bottom{margin-top:1.2rem;font-size:.79rem;color:#93A79A;display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap}

/* ---------- comment drawer status ---------- */
.drawer-status{padding:.8rem 1.4rem;font-family:var(--sans);font-size:.78rem;line-height:1.5;border-bottom:1px solid var(--rule)}
.drawer-status.loading{background:var(--paper-2);color:var(--muted)}
.drawer-status.online{background:var(--mint-soft);color:var(--accent)}
.drawer-status.offline{background:var(--tension-soft);color:#5A3612}
.drawer-status b{display:block;margin-bottom:.2rem}
.comment-list-head{font-family:var(--sans);font-size:.7rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);margin-bottom:.6rem}
#c-submit:disabled{opacity:.45;cursor:not-allowed}

/* ---------- responsive ---------- */
@media (max-width:820px){
  :root{--s-section:3rem;--s-block:1.9rem;--s-card:1.4rem}
  .author-inner{grid-template-columns:1fr;gap:1.6rem;text-align:center;justify-items:center}
  .author-photo{width:140px;height:140px}
  .author-bio p{text-align:left}
  .author-contact{justify-content:center}
  .foot-row{flex-direction:column;align-items:flex-start;gap:1rem}
}

/* ---------- print ---------- */
@media print{
  .surface-white,.surface-cream,.surface-mint{background:#fff !important}
  .author-section{background:#fff !important;color:#000 !important}
    .author-name,.author-title,.author-bio p,.author-pub,.author-powered{color:#000 !important}
  .author-logo,.foot-powered img{filter:none !important}
  .author-panel{max-width:none}
  footer{background:#fff !important;color:#333 !important;border-top:1px solid #ccc}
  .foot-brand,.foot-links a{color:#000 !important}
  .drawer-status{display:none !important}
}

/* ======================================================================
   METHOD & SOURCES: compact disclosure
   ====================================================================== */
.method-strip{padding:2.4rem 0}
.method-disclosure{max-width:var(--wrap);border:1px solid var(--rule);border-radius:var(--radius);background:var(--card)}
.method-disclosure summary{cursor:pointer;list-style:none;padding:1rem 1.3rem;display:flex;
  align-items:baseline;gap:.7rem;flex-wrap:wrap;font-family:var(--sans)}
.method-disclosure summary::-webkit-details-marker{display:none}
.method-disclosure summary::before{content:"+";color:var(--accent);font-size:1rem;font-weight:700}
.method-disclosure[open] summary::before{content:"\2013"}
.md-label{font-size:.835rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--accent)}
.md-sum{font-size:.91rem;color:var(--ink-2);line-height:1.5}
.method-body{padding:0 1.3rem 1.4rem;border-top:1px solid var(--rule-2)}
.md-layers{display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));gap:1.2rem;margin:1.2rem 0}
.md-layer p{font-size:.91rem;color:var(--ink-2);line-height:1.58;margin:.5rem 0 0}
.md-note{font-size:.91rem;color:var(--ink-2);line-height:1.62;margin:0 0 1rem;max-width:74ch}
.md-sources{margin:0;padding-left:1.1rem;columns:2;column-gap:2rem}
.md-sources li{font-size:.86rem;color:var(--ink-2);margin-bottom:.45em;break-inside:avoid}
.md-sources a{color:var(--accent)}
.md-sources .src-note{display:block;margin-top:.3rem;font-size:.82rem;line-height:1.5;color:var(--muted)}
@media (max-width:820px){.md-sources{columns:1}}

/* ======================================================================
   REVIEW INDICATOR: restrained, lives in the toolbar only
   ====================================================================== */
.review-chip{font-family:var(--sans);font-size:.76rem;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--accent);background:var(--mint);border-radius:20px;
  padding:.28rem .6rem;white-space:nowrap}

/* ---------- responsive ---------- */
@media (max-width:900px){
}

/* ---------- print ---------- */
@media print{
  .method-disclosure{border-color:#999 !important}
  .method-body{display:block !important}
  .review-chip{display:none !important}
}
.foot-sep{color:var(--mint-on-dark);font-size:1rem;line-height:1}

/* ======================================================================
   WHERE FIRMS ARE APPLYING AI: evidence-state list
   ====================================================================== */
.ev-legend{display:flex;flex-wrap:wrap;gap:.7rem;margin-bottom:1.6rem;padding-bottom:1.1rem;border-bottom:1px solid var(--rule)}
/* Restrained badge treatment matching the source labels, so the evidence
   states read as labels rather than stray small caps. */
.ev-key{display:inline-flex;align-items:center;gap:.4rem;font-family:var(--sans);font-size:.8rem;
  font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-2);white-space:nowrap;
  background:var(--paper-2);border:1px solid var(--rule);border-radius:20px;padding:.2rem .6rem}
.surface-cream .ev-key{background:var(--card)}
.ev-key i{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.ev-production i{background:var(--brand)}
.ev-pilot i{background:var(--mint-line);box-shadow:inset 0 0 0 2px var(--brand)}
.ev-production{color:var(--brand);background:var(--mint-soft);border-color:var(--mint-line)}
.apps{list-style:none;margin:0;padding:0;display:grid;gap:0}
.app{padding:1.35rem 0;border-bottom:1px solid var(--rule)}
.app:last-child{border-bottom:0}
/* A15: the badge belongs beside the title it qualifies, not pinned to the
   far edge of the measure. */
.app-top{display:flex;justify-content:flex-start;align-items:baseline;gap:.85rem;flex-wrap:wrap;margin-bottom:.5rem}
.app-title{font-family:var(--display);font-size:1.08rem;font-weight:700;margin:0;padding:0;border:0;letter-spacing:-.008em}
.app-text{margin:0;font-size:1rem;line-height:1.66;color:var(--ink-2);max-width:var(--col)}
.apps-closing{margin-top:1.4rem;font-size:.95rem;color:var(--ink-2);max-width:var(--col)}

/* ======================================================================
   FORWARD-DEPLOYED CAPABILITY: four evidence-led views
   ====================================================================== */
.cap{background:var(--brand);border-radius:var(--radius);overflow:hidden;margin:var(--s-block) 0;
  width:min(calc(var(--wrap) - 4rem),calc(100vw - 4rem))}
.cap-head{display:flex;justify-content:space-between;align-items:flex-start;gap:1.5rem;
  padding:1.9rem 2.1rem 1.4rem;border-bottom:1px solid rgba(255,255,255,.12)}
.cap-kicker{font-family:var(--sans);font-size:.75rem;font-weight:700;letter-spacing:.11em;
  text-transform:uppercase;color:var(--mint-on-dark);margin-bottom:.55rem}
.cap-title{font-family:var(--display);font-size:clamp(1.2rem,2.1vw,1.5rem);color:#fff;
  margin:0 0 .55rem;padding:0;border:0;letter-spacing:-.01em;line-height:1.22}
.cap-dek{font-family:var(--sans);font-size:.95rem;color:#C3D7C9;margin:0;max-width:60ch;line-height:1.55}
.cap-head .comment-btn{background:transparent;border-color:rgba(255,255,255,.28);color:var(--mint-on-dark);flex-shrink:0}
.cap-body{display:grid;grid-template-columns:16.5rem 1fr;gap:0}
.cap-tabs{display:flex;flex-direction:column;border-right:1px solid rgba(255,255,255,.12);padding:1.2rem 0}
.cap-tab{display:flex;align-items:flex-start;gap:.7rem;text-align:left;background:none;border:0;
  border-left:2px solid transparent;cursor:pointer;padding:.85rem 1.5rem .85rem 2rem;
  font-family:var(--sans);font-size:.86rem;font-weight:600;line-height:1.35;color:#A9C0B0;
  transition:color var(--dur),border-color var(--dur),background var(--dur)}
.cap-tab:hover{color:#fff}
.cap-tab.active{color:#fff;border-left-color:var(--mint);background:rgba(255,255,255,.05)}
.cap-tab-n{font-family:var(--display);font-size:.76rem;font-weight:700;letter-spacing:.06em;
  color:var(--mint-on-dark);padding-top:.25rem;min-width:1ch}
.cap-tab.active .cap-tab-n{color:var(--mint)}
.cap-panel{padding:1.9rem 2.1rem 2rem}
.cap-panel-top{display:flex;justify-content:space-between;align-items:baseline;gap:1.2rem;
  flex-wrap:wrap;margin-bottom:.9rem}
.cap-panel-h{font-family:var(--display);font-size:1.08rem;color:#fff;margin:0;padding:0;border:0}
.cap-srcs{display:flex;gap:.4rem;flex-wrap:wrap}
.cap-src{display:inline-flex;align-items:center;gap:.35rem;font-family:var(--sans);font-size:.76rem;
  font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#A9C0B0;
  border:1px solid rgba(255,255,255,.18);border-radius:20px;padding:.16rem .55rem}
/* on-dark equivalents of the lens dots: the light-background tokens vanish here */
.cap-src i{width:5px;height:5px;border-radius:50%;background:var(--mint-on-dark)}
.cap-src[data-src="cititec"] i{background:#D9B860}
.cap-panel p{margin:0 0 .85rem;font-size:.94rem;line-height:1.66;color:#C8D6CB;max-width:62ch}
.cap-panel p:last-child{margin-bottom:0}
.cap-list{margin:0;padding:0;list-style:none;max-width:62ch}
.cap-list li{position:relative;padding-left:1.3rem;margin-bottom:.75em;font-size:.94rem;
  line-height:1.6;color:#C8D6CB}
.cap-list li:last-child{margin-bottom:0}
.cap-list li::before{content:"";position:absolute;left:0;top:.62em;width:6px;height:6px;
  border-radius:50%;background:var(--mint-on-dark)}
.cap-closing{margin-top:1.2rem !important;padding-top:1.1rem;border-top:1px solid rgba(255,255,255,.12);
  font-size:.88rem !important;color:#A9C0B0 !important}

/* ======================================================================
   VALUE, MEASUREMENT AND RUN ECONOMICS
   ====================================================================== */
.val-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(16rem,1fr));gap:1.2rem;align-items:start}
.val-card{background:var(--card);border:1px solid var(--rule);border-top:3px solid var(--brand);
  border-radius:var(--radius);padding:1.5rem 1.6rem}
.val-h{font-family:var(--display);font-size:1.06rem;margin:0 0 .9rem;padding:0;border:0;letter-spacing:-.005em}
.val-card ul{margin:0;padding-left:1.05rem}
.val-card li{font-size:.96rem;line-height:1.62;color:var(--ink-2);margin-bottom:.65em}
.val-card li:last-child{margin-bottom:0}
.val-q{margin:1.1rem 0 0;padding-top:.95rem;border-top:1px solid var(--mint-line);
  font-size:.9rem;line-height:1.55;color:var(--ink-2)}
.val-q p{margin:0 0 .5em;font-size:.95rem;line-height:1.55}
.val-q p:last-child{margin-bottom:0}
.val-q span{display:block;font-family:var(--sans);font-size:.76rem;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;color:var(--accent);margin-bottom:.4rem}

@media (max-width:900px){
  .cap{width:100%}
  .cap-head{padding:1.5rem 1.4rem 1.2rem}
  .cap-body{grid-template-columns:1fr}
  .cap-tabs{flex-direction:row;overflow-x:auto;scrollbar-width:none;border-right:0;
    border-bottom:1px solid rgba(255,255,255,.12);padding:0}
  .cap-tabs::-webkit-scrollbar{display:none}
  .cap-tab{padding:.95rem 1rem;border-left:0;border-bottom:2px solid transparent;white-space:nowrap;font-size:.82rem}
  .cap-tab.active{border-left-color:transparent;border-bottom-color:var(--mint)}
  .cap-panel{padding:1.5rem 1.4rem 1.7rem}
  .cap-panel-top{gap:.5rem}
  .app-top{gap:.4rem}
}

@media print{
  .cap{background:#fff !important;border:1px solid #999}
  .cap-title,.cap-panel-h{color:#000 !important}
  .cap-dek,.cap-panel p,.cap-list li{color:#333 !important}
  .cap-kicker,.cap-closing,.cap-src{color:#555 !important}
  .cap-src{border-color:#bbb !important}
  .cap-body{display:block !important}
  .cap-tabs{display:none !important}
  /* every view prints, whether or not it is the selected tab */
  .cap-panel,.cap-panel[hidden]{display:block !important;padding:1rem 0 0 !important;break-inside:avoid}
  .cap-panel-h{border-bottom:1px solid #ccc;padding-bottom:.3rem}
  .cap-list li::before{background:#666 !important}
  .cap-closing{border-top-color:#ccc !important}
  .val-card{border-color:#999 !important;break-inside:avoid}
  .app{break-inside:avoid}
}

/* Always-visible qualification lifted out of the capability tab set, so no
   material caveat depends on the reader selecting a tab. */
.cap-note{font-family:var(--sans);font-size:.95rem;line-height:1.62;color:var(--ink-2);
  max-width:var(--col);margin:1.4rem 0 0;padding-left:1rem;border-left:2px solid var(--mint-line)}

/* Talent-market bridge. */
.talent-cta{margin:1.8rem 0 0}
.talent-cta .btn{text-decoration:none}

/* Focus visibility on every control the reader can reach. */
.snap-toggle:focus-visible,.ev-ctrl:focus-visible,.lens-chip:focus-visible,
.lens-reset:focus-visible,.expand-note summary:focus-visible,.talent-cta .btn:focus-visible{
  outline:2px solid var(--accent);outline-offset:3px;border-radius:2px}

@media (max-width:820px){
  /* The lens stays in the document flow on smaller screens. */
  .lens-bar.pinned{position:static;padding:.95rem 1.15rem;box-shadow:none;
    border:1px solid var(--rule);border-radius:var(--radius)}
  .lens-bar.pinned .ev-controls{display:flex}
  .lens-sentinel{height:0 !important}
  .section-head{grid-template-columns:1fr}
  .section-num{font-size:1.15rem}
}

@media print{
  /* Every disclosure prints open. */
  .snap-evidence{display:block !important}
  .snap-toggle{display:none !important}
  details.expand-note > .expand-note-body,
  details.method-disclosure > .method-body{display:block !important}
  .lens-bar,.lens-sentinel,.ev-controls{display:none !important}
  .cap-note{color:#000 !important;border-left-color:#666 !important}
  .hero-meta{background:#fff !important;border-color:#999 !important;color:#000 !important}
  .hero-meta b{color:#000 !important}
  .ev-key{border-color:#999 !important;background:#fff !important;color:#000 !important}
  .talent-cta .btn{border:1px solid #666 !important;background:#fff !important;color:#000 !important}
}

/* ======================================================================
   AUTHORITY DISCLOSURES
   One neutral treatment for every classification. The surface is
   transparent, the rules are fine and neutral, and no authority type gets
   its own colour, panel or border. Classification is carried by the written
   label on the metadata line. The only coloured element is the small
   Evidence gap flag.
   ====================================================================== */
details.auth{
  max-width:var(--col);margin:1.6rem 0;
  background:transparent;border:1px solid var(--rule);border-radius:var(--radius)}
details.auth + details.auth{margin-top:.85rem}

details.auth > summary{
  list-style:none;cursor:pointer;
  display:flex;align-items:flex-start;gap:1rem;
  padding:1.05rem 1.25rem;
  transition:background var(--dur)}
details.auth > summary::-webkit-details-marker{display:none}
details.auth > summary::marker{content:""}
details.auth > summary:hover{background:rgba(18,33,26,.025)}
details.auth > summary:focus-visible{outline:2px solid var(--accent);outline-offset:-2px;border-radius:var(--radius)}

details.auth .auth-text{flex:1 1 auto;min-width:0;display:block}

/* 1. the descriptive title leads, in the normal dark reading colour */
details.auth .auth-title{
  display:block;font-family:var(--display);font-size:1.08rem;font-weight:700;
  line-height:1.38;letter-spacing:-.006em;color:var(--ink)}

/* 2. a quiet metadata line beneath it, on its own row */
details.auth .auth-meta{
  display:flex;align-items:center;flex-wrap:wrap;gap:.45rem;
  margin-top:.42rem;
  font-family:var(--sans);font-size:.8rem;font-weight:400;
  letter-spacing:.01em;color:var(--muted);line-height:1.45}
details.auth .auth-meta-text{white-space:normal}

/* 3. provenance keeps a small subdued dot, no pill */
details.auth .auth-dot{
  width:6px;height:6px;border-radius:50%;flex:0 0 auto;background:var(--faint)}
details.auth .auth-dot[data-src="private"]{background:var(--src-private)}
details.auth .auth-dot[data-src="external"]{background:var(--src-external)}
details.auth .auth-dot[data-src="cititec"]{background:var(--src-cititec)}

/* 4. Evidence gap is the one place a warning colour is used */
details.auth .gap-flag{
  font-family:var(--sans);font-size:.76rem;font-weight:700;letter-spacing:.05em;
  text-transform:uppercase;color:var(--gap);
  border:1px solid var(--gap);border-radius:2px;padding:.05rem .38rem;line-height:1.5}

/* 5. restrained chevron */
details.auth .auth-chevron{
  flex:0 0 auto;width:.62rem;height:.62rem;margin-top:.5rem;
  border-right:1.5px solid var(--muted);border-bottom:1.5px solid var(--muted);
  transform:rotate(45deg);transform-origin:60% 60%;
  transition:transform var(--dur),border-color var(--dur)}
details.auth[open] .auth-chevron{transform:rotate(-135deg)}
details.auth > summary:hover .auth-chevron{border-color:var(--accent)}

/* 6. expanded copy sits beneath a subtle neutral rule */
details.auth .auth-body{
  padding:1.05rem 1.25rem 1.15rem;border-top:1px solid var(--rule-2);
  margin:0 0 0 0}
details.auth .auth-body p{margin:0 0 .75em;font-size:1rem;line-height:1.68;color:var(--ink-2)}
details.auth .auth-body p:last-child{margin-bottom:0}
details.auth .auth-body ol{margin:.1rem 0 0;padding-left:1.2rem}
details.auth .auth-body li{margin-bottom:.7em;font-size:1rem;line-height:1.62;color:var(--ink-2);padding-left:.2rem}
details.auth .auth-body li:last-child{margin-bottom:0}

/* quiet subheading for specific cases inside a disclosure */
details.auth .auth-sublabel{
  font-family:var(--sans);font-size:.76rem;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;color:var(--muted);
  margin:1.3rem 0 .6rem;padding-top:.85rem;border-top:1px solid var(--rule-2)}

/* review comment control stays reachable while collapsed */
details.auth > summary .box-comment{position:static;flex:0 0 auto;margin-top:-.15rem}

@media (max-width:820px){
  details.auth > summary{padding:.95rem 1rem;gap:.7rem}
  details.auth .auth-body{padding:.95rem 1rem 1.05rem}
  details.auth .auth-title{font-size:1.04rem}
}

@media print{
  details.auth{border-color:#999 !important;background:#fff !important;break-inside:avoid}
  details.auth .auth-chevron{display:none !important}
  details.auth .auth-title{color:#000 !important}
  details.auth .auth-meta,details.auth .auth-sublabel{color:#333 !important}
  details.auth .auth-body{display:block !important;border-top-color:#ccc !important}
  details.auth .auth-body p,details.auth .auth-body li{color:#000 !important}
  details.auth .gap-flag{color:#333 !important;border-color:#666 !important}
}