/* LAKANA W-X / WX-Ag flagship pages.
   Scoped to the lwx- namespace so neither the shared design system nor the
   lav2-/lpl- namespaces used by architecture.html and proof-library.html are
   affected. Both flagship pages share this sheet. */

:root{--lakana-global-header-height:64px}

.lwx-skip-link{position:absolute;left:-9999px;top:0;z-index:9999;background:#0A1625;color:#fff;padding:14px 18px;border-radius:0 0 12px 0;font-weight:950;text-decoration:none}
.lwx-skip-link:focus{left:0}

#main [id]{scroll-margin-top:calc(var(--lakana-global-header-height,64px) + 56px)}

/* ---------- section nav ---------- */
.lwx-nav{
  display:flex;flex-wrap:wrap;gap:8px;margin:22px 0 0;padding:14px;
  background:#fff;border:1px solid var(--lakana-line,rgba(8,19,34,.16));border-radius:20px;
  box-shadow:0 12px 30px rgba(10,22,37,.06);
  position:sticky;top:calc(var(--lakana-global-header-height,64px) + 8px);z-index:40;
}
.lwx-nav a{
  font-size:.76rem;font-weight:900;letter-spacing:.02em;color:var(--lakana-ink,#081322);
  text-decoration:none;padding:8px 11px;border-radius:999px;background:#F1F5F8;
  border:1px solid rgba(8,19,34,.08);white-space:nowrap;
}
.lwx-nav a:hover,.lwx-nav a:focus-visible{background:rgba(13,115,119,.12);border-color:rgba(13,115,119,.35)}
.lwx-nav a:focus-visible,.lwx-section a:focus-visible,.lwx-hero a:focus-visible{outline:3px solid var(--lakana-teal,#0D7377);outline-offset:2px}

/* ---------- hero ---------- */
.lwx-hero{margin-top:22px}
.lwx-kicker{display:inline-block;text-transform:uppercase;letter-spacing:.16em;font-size:.72rem;font-weight:950;color:var(--lakana-teal,#0D7377);margin-bottom:10px}
.lwx-hero h1{margin:0 0 14px;font-size:2.05rem;letter-spacing:-.03em;line-height:1.2;max-width:940px}
.lwx-hero>p{max-width:900px;color:var(--lakana-muted,#657386);font-size:1.02rem;line-height:1.65;margin:0 0 18px}

.lwx-nonreplacement{
  background:#081322;color:#EAF4F4;border-radius:22px;padding:18px 20px;
  border:1px solid rgba(70,214,209,.25);max-width:940px;margin-bottom:18px;
}
.lwx-nonreplacement b{display:block;color:var(--lakana-teal-2,#46D6D1);font-size:.72rem;text-transform:uppercase;letter-spacing:.12em;margin-bottom:6px}
.lwx-nonreplacement p{margin:0 0 8px;color:rgba(234,244,244,.88);line-height:1.6;font-size:.92rem}
.lwx-nonreplacement p:last-child{margin-bottom:0}

/* ---------- sections ---------- */
.lwx-section{
  background:#fff;border:1px solid var(--lakana-line,rgba(8,19,34,.16));border-radius:28px;padding:26px;
  box-shadow:0 18px 46px rgba(10,22,37,.08);margin-top:22px;
}
.lwx-section h2{margin:0 0 6px;font-size:1.65rem;letter-spacing:-.03em}
.lwx-section h3{margin:22px 0 8px;font-size:1.15rem;letter-spacing:-.02em}
.lwx-lede{max-width:920px;color:var(--lakana-muted,#657386);line-height:1.65;margin:8px 0}

/* ---------- pipeline ---------- */
.lwx-pipeline{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:8px;counter-reset:lwxstep}
.lwx-pipeline>li{
  counter-increment:lwxstep;position:relative;padding:12px 14px 12px 46px;
  background:#F7FAFC;border:1px solid rgba(8,19,34,.08);border-radius:14px;
  font-size:.88rem;color:#405064;line-height:1.55;min-width:0;overflow-wrap:anywhere;
}
.lwx-pipeline>li::before{
  content:counter(lwxstep);position:absolute;left:12px;top:12px;width:24px;height:24px;border-radius:8px;
  background:rgba(13,115,119,.14);color:var(--lakana-teal,#0D7377);font-weight:950;font-size:.74rem;
  display:flex;align-items:center;justify-content:center;
}
.lwx-pipeline>li b{display:block;color:var(--lakana-ink,#081322);font-size:.8rem;text-transform:uppercase;letter-spacing:.06em;margin-bottom:3px}
.lwx-pipeline>li .owner{display:inline-block;margin-top:6px;font-size:.72rem;font-weight:900;color:#5D4A9C;background:rgba(93,74,156,.10);border:1px solid rgba(93,74,156,.3);border-radius:999px;padding:3px 9px}
.lwx-pipeline>li.optional{background:rgba(207,157,42,.08);border-color:rgba(207,157,42,.32)}
.lwx-pipeline>li.refusal{background:rgba(158,47,47,.05);border-color:rgba(158,47,47,.25)}

/* ---------- source class table ---------- */
.lwx-scroll{overflow-x:auto;margin-top:14px}
.lwx-table{width:100%;border-collapse:collapse;font-size:.84rem;min-width:640px}
.lwx-table th,.lwx-table td{text-align:left;padding:10px 12px;border-bottom:1px solid rgba(8,19,34,.08);vertical-align:top;line-height:1.5}
.lwx-table th{font-size:.7rem;text-transform:uppercase;letter-spacing:.08em;color:#7C8998;font-weight:950;background:#F7FAFC}
.lwx-table td.no{color:#9E2F2F}
.lwx-table td.yes{color:var(--lakana-teal,#0D7377);font-weight:800}

/* ---------- badges ---------- */
.lwx-badge{display:inline-flex;align-items:center;border-radius:999px;padding:4px 10px;font-size:.68rem;font-weight:950;letter-spacing:.04em;border:1px solid rgba(8,19,34,.14);background:#F1F5F8;color:#405064;margin:2px 4px 2px 0}
.lwx-badge.measured{background:rgba(13,115,119,.12);border-color:rgba(13,115,119,.32);color:var(--lakana-teal,#0D7377)}
.lwx-badge.derived{background:rgba(93,74,156,.10);border-color:rgba(93,74,156,.3);color:#5D4A9C}
.lwx-badge.limited{background:rgba(207,157,42,.12);border-color:rgba(207,157,42,.35);color:#8A6415}
.lwx-badge.proxy{background:rgba(158,47,47,.06);border-color:rgba(158,47,47,.28);color:#9E2F2F}
.lwx-badge.official{background:#0A1625;border-color:#0A1625;color:#fff}

/* ---------- cards ---------- */
.lwx-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px;margin-top:16px}
.lwx-card{background:#F7FAFC;border:1px solid rgba(8,19,34,.08);border-radius:18px;padding:16px;min-width:0;overflow-wrap:anywhere}
.lwx-card b{display:block;font-size:.95rem;color:var(--lakana-ink,#081322);margin-bottom:6px}
.lwx-card p{margin:0 0 8px;color:var(--lakana-muted,#657386);font-size:.85rem;line-height:1.55}
.lwx-card p:last-child{margin-bottom:0}
.lwx-card dl{margin:8px 0 0;display:grid;gap:5px}
.lwx-card dt{font-size:.66rem;text-transform:uppercase;letter-spacing:.07em;color:#7C8998;font-weight:900}
.lwx-card dd{margin:0 0 4px;font-size:.84rem;color:#354657;line-height:1.5}

/* ---------- refusal / non-claim ---------- */
.lwx-refusal{background:rgba(158,47,47,.05);border:1px solid rgba(158,47,47,.25);border-left:5px solid #9E2F2F;border-radius:14px;padding:12px 16px;margin:14px 0;max-width:940px}
.lwx-refusal>b{display:block;font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;color:#9E2F2F;margin-bottom:6px}
.lwx-refusal p,.lwx-refusal li{font-size:.87rem;color:#536172;line-height:1.6;margin:0 0 6px}
.lwx-refusal ul{margin:0;padding-left:18px}

.lwx-note{max-width:940px;color:#7C8998;font-size:.82rem;line-height:1.55;margin:10px 0 0}

/* ---------- boundary layer map ---------- */
.lwx-mapwrap{background:#fff;border:1px solid var(--lakana-line,rgba(8,19,34,.16));border-radius:18px;padding:12px;overflow-x:auto;margin-top:16px}
.lwx-mapsvg{width:100%;min-width:600px;height:auto;display:block}
.lwx-cell rect{fill:rgba(13,115,119,.05);stroke:rgba(13,115,119,.45);stroke-width:1.5;stroke-dasharray:7 5}
.lwx-cell text{font-size:11px;fill:#5D6B7D;font-family:inherit}
.lwx-anchor circle{fill:#0A1625;stroke:#0A1625}
.lwx-node circle{fill:rgba(13,115,119,.85);stroke:var(--lakana-teal,#0D7377)}
.lwx-general circle{fill:#fff;stroke:#8FA1B3;stroke-width:2}
.lwx-phonecount rect{fill:rgba(93,74,156,.10);stroke:#5D4A9C;stroke-width:1.5}
.lwx-phonecount text{font-size:11px;font-weight:800;fill:#5D4A9C;font-family:inherit}
.lwx-maplabel{font-size:11.5px;fill:#405064;font-family:inherit}
.lwx-maplegend{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px;margin-top:12px}
.lwx-maplegend .item{display:flex;gap:8px;align-items:flex-start;font-size:.8rem;color:#536172;line-height:1.45;min-width:0}
.lwx-swatch{width:16px;height:16px;border-radius:5px;flex:none;margin-top:2px}
.lwx-swatch.anchor{background:#0A1625}
.lwx-swatch.node{background:rgba(13,115,119,.85);border:1px solid var(--lakana-teal,#0D7377)}
.lwx-swatch.general{background:#fff;border:2px solid #8FA1B3}
.lwx-swatch.phone{background:rgba(93,74,156,.15);border:1px solid #5D4A9C}
.lwx-swatch.cell{background:rgba(13,115,119,.05);border:1.5px dashed rgba(13,115,119,.45)}

/* ---------- details ---------- */
.lwx-depth{border:1px solid var(--lakana-line,rgba(8,19,34,.16));border-radius:14px;margin:12px 0;background:#fff;max-width:960px}
.lwx-depth>summary{cursor:pointer;padding:12px 16px;font-weight:900;font-size:.9rem;color:var(--lakana-ink,#081322);list-style-position:inside}
.lwx-depth>summary:hover,.lwx-depth>summary:focus-visible{color:var(--lakana-teal,#0D7377)}
.lwx-depth[open]>summary{border-bottom:1px solid var(--lakana-line,rgba(8,19,34,.16))}
.lwx-depth>*:not(summary){margin-left:16px;margin-right:16px}
.lwx-depth>p:last-child,.lwx-depth>ul:last-child,.lwx-depth>div:last-child{margin-bottom:14px}

/* ---------- consent / phone panel ---------- */
.lwx-consent{display:grid;gap:10px;margin-top:16px}
.lwx-scope{display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:start;background:#F7FAFC;border:1px solid rgba(8,19,34,.08);border-radius:14px;padding:12px 14px}
/* white-space is deliberately normal, not nowrap: these badges now carry
   phrase-length recorded-demonstration labels (e.g. "AUTHORIZED IN RECORDED
   DEMONSTRATION"), and a nowrap span sizes to its full unbroken text on a
   CSS Grid `auto` track, forcing the row — and the page — wider than the
   viewport. Wrapping keeps the longest WORD as the width floor instead. */
.lwx-scope .state{font-size:.66rem;font-weight:950;text-transform:uppercase;letter-spacing:.05em;border-radius:999px;padding:4px 10px;white-space:normal;max-width:100%;align-self:start}
.lwx-scope .state.off{background:#F1F5F8;border:1px solid rgba(8,19,34,.14);color:#7C8998}
.lwx-scope .state.on{background:rgba(13,115,119,.12);border:1px solid rgba(13,115,119,.32);color:var(--lakana-teal,#0D7377)}
.lwx-scope .state.blocked{background:rgba(158,47,47,.06);border:1px solid rgba(158,47,47,.28);color:#9E2F2F}
.lwx-scope b{display:block;font-size:.86rem;color:var(--lakana-ink,#081322);margin-bottom:2px}
.lwx-scope span{display:block;font-size:.8rem;color:#657386;line-height:1.5}

/* ---------- code / trace ---------- */
.lwx-pre{background:#0A1625;color:#DDE7EF;border-radius:14px;padding:16px 18px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.78rem;line-height:1.65;overflow-x:auto;max-width:960px;white-space:pre}
.lwx-formula{background:#0A1625;color:#DDE7EF;border-radius:12px;padding:12px 14px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.78rem;line-height:1.6;overflow-x:auto;white-space:pre-wrap;margin:10px 0}

/* ---------- responsive ---------- */
@media(max-width:900px){
  .lwx-grid{grid-template-columns:1fr}
  .lwx-hero h1{font-size:1.6rem}
  .lwx-scope{grid-template-columns:1fr}
}
@media(max-width:740px){
  .lwx-nav{position:static}
  .lwx-section{padding:18px;border-radius:20px}
}

@media print{
  .lwx-nav,.lakana-global-menu-v3,#lakana-global-menu-v3,.lakana-cta-row{display:none!important}
  .lwx-section{border:1px solid #000;box-shadow:none;page-break-inside:avoid}
  .lwx-depth{border:none}
  a[href]::after{content:none}
  body{background:#fff}
}

@media(prefers-reduced-motion:reduce){
  .lwx-nav a,.lwx-card{transition:none}
}

/* Long unbroken tokens -- truth references, cell ids, method names -- are the
   one thing on these pages that can exceed a narrow viewport, because they
   carry no natural break opportunity. They wrap rather than push the page. */
.lwx-section code,.lwx-hero code,.lwx-card code,.lwx-note code,.lwx-scope code{
  overflow-wrap:anywhere;word-break:break-word;
  background:#F1F5F8;border-radius:5px;padding:1px 5px;font-size:.85em;
}
.lwx-section p,.lwx-hero p,.lwx-note,.lwx-lede{overflow-wrap:anywhere}
.lwx-scroll{max-width:100%}

/* ===========================================================================
   LIVE CONSOLES
   The two sections on these pages whose content is fetched rather than baked.
   They are styled to be visibly different from the recorded fixtures beside
   them, because "this was computed just now" and "this was computed when the
   page was built" are the distinction the whole section exists to make.
   ========================================================================= */

.lwx-fixture{
  background:#F7FAFC;border:1px solid rgba(8,19,34,.14);border-left:5px solid #7C8998;
  border-radius:14px;padding:12px 16px;margin:0 0 16px;max-width:940px;
}
.lwx-fixture b{display:block;font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;color:#5A6675}
.lwx-fixture p{margin:8px 0 0;font-size:.86rem;line-height:1.6;color:#405064}

.lwx-live-form{margin:18px 0 0;max-width:940px}
/* auto-fit with a minmax floor keeps the fields readable at every width without
   a media query per breakpoint. The 0 in minmax is deliberate: `min-width:auto`
   on a grid item lets long labels force horizontal overflow. */
.lwx-live-fields{display:grid;gap:14px 20px;grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr))}
.lwx-live-field{display:flex;flex-direction:column;gap:5px;margin:0;min-width:0}
.lwx-live-field label{font-size:.72rem;text-transform:uppercase;letter-spacing:.07em;font-weight:900;color:#5A6675}
.lwx-live-field input,.lwx-live-field select{
  font:inherit;font-size:.9rem;padding:9px 11px;border:1px solid rgba(8,19,34,.22);
  border-radius:10px;background:#fff;color:#081322;min-width:0;max-width:100%;
}
.lwx-live-field input:focus-visible,.lwx-live-field select:focus-visible,
.lwx-live-submit:focus-visible{outline:3px solid var(--lakana-teal,#0D7377);outline-offset:2px}
.lwx-live-hint{font-size:.76rem;line-height:1.5;color:#7C8998}

.lwx-live-actions{margin:18px 0 0}
.lwx-live-submit{
  font:inherit;font-weight:900;font-size:.85rem;letter-spacing:.03em;
  padding:11px 22px;border-radius:999px;border:1px solid transparent;
  background:var(--lakana-teal,#0D7377);color:#fff;cursor:pointer;
}
.lwx-live-submit:hover{filter:brightness(1.08)}

.lwx-live-status{
  margin:16px 0 0;padding:10px 14px;border-radius:12px;max-width:940px;
  font-size:.84rem;line-height:1.55;border:1px solid rgba(8,19,34,.14);background:#F7FAFC;color:#405064;
}
.lwx-live-idle{color:#7C8998}
.lwx-live-pending{border-color:rgba(13,115,119,.3);background:rgba(13,115,119,.06)}
.lwx-live-ok{border-color:rgba(13,115,119,.35);background:rgba(13,115,119,.08);color:#0B5457;font-weight:800}
.lwx-live-failed{border-color:rgba(158,47,47,.35);background:rgba(158,47,47,.06);color:#7E2626;font-weight:800}

.lwx-tablewrap{overflow-x:auto;margin-top:14px;max-width:100%}
.lwx-live-reason{margin-top:6px;font-size:.8rem;line-height:1.5;color:#7E2626}
.lwx-live-notes{margin:6px 0 0;padding-left:18px;font-size:.79rem;line-height:1.55;color:#7C8998}
.lwx-live-notes li{margin:3px 0}
.lwx-live-notes code{overflow-wrap:anywhere}

.lwx-sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

@media print{
  /* A console that fetches has nothing to print. The fixtures do. */
  .lwx-live-form,.lwx-live-actions{display:none!important}
  .lwx-fixture{border:1px solid #000}
}
@media(prefers-reduced-motion:reduce){
  .lwx-live-submit{transition:none}
}