/* ============================================================
   Summary Leadership · P×E Dashboard — dark "instrument" theme
   Shared across all dashboard pages. Loaded AFTER each page's
   inline <style>, so it overrides the legacy warm palette.
   Two fonts only: Archivo (sans) + IBM Plex Mono (mono).
   Arena colors are taken from the logo tiles:
     Chaotic=red · Crucible=amber · Clouded=silver · Cultivated=green
   ============================================================ */
:root{
  --paper:#0B0C14; --card:#12141F; --card-2:#1A1E2C; --card-3:#1F2434;
  --ink:#DCECF7; --muted:#93A4B8; --line:#28324A;
  --gold:#C8862F; --gold-dark:#E0A34A; --red:#6EA3C9;
  --live:#3FC98A;
  /* Arena tones straight from the logo tiles. */
  --a-chao:#E5726A; --a-chao-bg:rgba(176,58,50,.20);  --a-chao-ln:rgba(229,114,106,.36);
  --a-cruc:#E0A34A; --a-cruc-bg:rgba(200,134,47,.16); --a-cruc-ln:rgba(224,163,74,.36);
  --a-clou:#C6CDD5; --a-clou-bg:rgba(150,160,175,.16);--a-clou-ln:rgba(198,205,213,.30);
  --a-cult:#3FC98A; --a-cult-bg:rgba(46,125,79,.22);  --a-cult-ln:rgba(63,201,138,.34);
  /* legacy arena aliases some pages use */
  --a-cult-bg:rgba(46,125,79,.22);
  --serif:"Archivo",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --sans:"Archivo",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 20px 44px -22px rgba(0,0,0,.8);
  /* legacy warm aliases remapped to dark so token users go dark too */
  --card-2:#1A1E2C;
  /* legacy panel/on family (Solve, History, Team pages) — remapped to dark so
     surfaces and their text stay readable when a page's own class rule wins the
     cascade (e.g. .pf and .entry textarea). --panel* = a surface, --on* = text. */
  --panel:#12141F; --panel-2:#1A1E2C; --panel-3:#1F2434; --panel-line:#28324A;
  --on:#DCECF7; --on-2:#93A4B8;
}

body{
  background:var(--paper);
  color:var(--ink);
}
a{color:var(--gold-dark)}

/* Headings: sans, bold, technical. (Legacy pages used a serif here.) */
h1,h2,h3,h4,.intro h1,.arenawrap .head h3,.dcard .pn,.research h3,
.pagehead h1,.card h3,.panel h3,.sectitle{font-family:var(--sans); letter-spacing:-.012em}
.intro h1,.pagehead h1{font-weight:800; letter-spacing:-.018em; color:var(--ink)}

/* Nav */
.nav{background:rgba(11,12,20,.86); border-bottom-color:var(--line)}
.nav a.tab,.nav a.util,.nav a.back{color:var(--muted)}
.nav a.tab:hover,.nav a.util:hover{background:rgba(255,255,255,.06); color:var(--ink)}
.nav a.back:hover{color:var(--ink)}
.nav a.tab.on{background:var(--gold); color:#0B0C14}
.nav .home b{color:var(--ink)} .nav .home b i{color:var(--red)}

/* Section headings.
   These were set in tracked-out gold monospace with a triangle marker, which
   gave every section a terminal banner that fought the nav, the cards and the
   body copy. The heading now takes the page's own sans in the page's own ink,
   and gold goes back to carrying actions and one eyebrow. */
.kick{font-family:var(--mono); letter-spacing:.14em; color:var(--muted)}
.sec{font-family:var(--sans); letter-spacing:-.018em; color:var(--ink)}
.intro .kick,.kick{color:var(--gold-dark)}
.sec .eyebrow{color:var(--gold-dark)}
.sec .hint{font-family:var(--sans); letter-spacing:0; color:var(--muted)}
.kick::before{content:"// "; color:var(--gold-dark)}
.intro p,.intro p b{color:var(--ink)}
.intro p{color:var(--muted)} .intro p b{color:var(--ink)}

/* Generic surfaces */
.card,.panel,.ctx,.arenawrap,.dcard,.howview,.research,.tile,.box,.well,
.metric,.stat,.list,.row-card{background:var(--card); border-color:var(--line); color:var(--ink)}
.ctx,.arenawrap,.dcard,.howview,.research,.card,.panel{border-radius:10px}

/* Forms */
.field label{color:var(--ink)} .field .sub{color:var(--muted)}
.field input,.field select,input[type=text],input[type=number],input[type=email],select,textarea{
  background:var(--card-2); border-color:var(--line); color:var(--ink)}
.field input:focus,.field select:focus,.field textarea:focus,input:focus,select:focus,textarea:focus{background:var(--card-2); border-color:var(--gold)}
::placeholder{color:#5f7088}
optgroup{color:var(--muted); background:#0F1220} option{color:var(--ink); background:#12141F}
.industry-note{background:var(--card-2); border-color:var(--line); color:var(--muted)}

/* Buttons */
button,.btn,.cta,.save button{color:#0B0C14}
.ctx .save button,.btn-primary,.cta{background:var(--gold)}
.ctx .save button:hover,.btn-primary:hover,.cta:hover{background:var(--gold-dark); color:#0B0C14}
.ctx .save .msg{color:var(--live)}

/* Animated "how it works" bits */
.node .glyph,.dcard .ico{background:linear-gradient(160deg,#1c2233,#141824); border-color:var(--line)}
.node .lab{color:var(--ink)}
.n-hub .glyph{background:var(--card-2); border-color:var(--line)} .n-hub .st{color:var(--gold-dark)}
.chip{background:var(--card-2); border-color:var(--line)} .chip .clab{color:var(--ink)}
.chip.solid{border-color:var(--live)} .chip .badge .ok{color:var(--live)}
.pill{background:var(--card-2); border-color:var(--line); color:var(--muted)}
.chip > svg,.node .glyph svg,.dcard .ico svg,.n-hub .glyph svg{stroke:var(--gold-dark)}
.wires line{stroke:var(--line)}

/* Tool cards */
.dcard:hover{border-color:var(--gold)}
.dcard .go{color:var(--ink)}
.dcard .badge{color:var(--gold-dark); background:rgba(200,134,47,.14); border-color:rgba(224,163,74,.34)}

/* Arenas — logo colors, mono names, calibrated top-rules */
.arenawrap{background:var(--card); border-color:var(--line)}
.quad{border-top-width:2px; border-radius:8px}
.quad .an{font-family:var(--mono); letter-spacing:.02em}
.quad .ad{color:#B7C4D6} .quad .tags span{background:rgba(255,255,255,.05)}
.quad.chao{background:var(--a-chao-bg); border-color:var(--a-chao-ln); border-top-color:var(--a-chao)} .quad.chao .an,.quad.chao .tags span{color:var(--a-chao)}
.quad.cruc{background:var(--a-cruc-bg); border-color:var(--a-cruc-ln); border-top-color:var(--a-cruc)} .quad.cruc .an,.quad.cruc .tags span{color:var(--a-cruc)}
.quad.clou{background:var(--a-clou-bg); border-color:var(--a-clou-ln); border-top-color:var(--a-clou)} .quad.clou .an,.quad.clou .tags span{color:var(--a-clou)}
.quad.cult{background:var(--a-cult-bg); border-color:var(--a-cult-ln); border-top-color:var(--a-cult)} .quad.cult .an,.quad.cult .tags span{color:var(--a-cult)}
.quad.you{box-shadow:0 0 0 2px var(--gold)}

/* Axis titles — larger */
.yaxis,.xaxis{font-family:var(--mono); color:var(--muted)}
.yaxis .ylabel,.xaxis .xlabel{font-size:19px; letter-spacing:.16em; color:var(--ink); font-weight:700}

/* Research callout + footer */
.research{background:var(--card-2); border-color:var(--line); border-left-color:var(--gold)}
.research a.cta{background:var(--gold); color:#0B0C14} .research a.cta:hover{background:var(--gold-dark)}
.foot{border-top-color:var(--line); color:var(--muted)}

/* Tabular numbers for data-ish text */
.dcard .desc,.arena-foot,.anim-cap,.foot,.quad .ad,.metric,.stat{font-variant-numeric:tabular-nums}

/* ---- page-specific surfaces caught in the rollout sweep ---- */
textarea,input{background:var(--card-2); border-color:var(--line); color:var(--ink)}

/* 90-day plan */
.tbtn{background:var(--card-2); border-color:var(--line); color:var(--muted)}
.tbtn.on,.tbtn:hover{background:var(--gold); color:#0B0C14}
.progbar{background:var(--card-2)}
.miss,.readout,.planGate{background:var(--card); border-color:var(--line); color:var(--ink)}

/* research */
.feat{background:var(--card); border-color:var(--line); color:var(--ink)}

/* team analytics */
.viewtoggle,.viewnote,.tip{background:var(--card-2); border-color:var(--line); color:var(--ink)}
.demo{background:var(--card-2); color:var(--muted)}
.tm{background:var(--card); border-color:var(--line); color:var(--ink)} .tm.you{background:var(--card-2)}
.dot.you{background:var(--gold)} .cl{background:var(--card); color:var(--ink)}
.pill.good{background:rgba(63,201,138,.16); color:var(--live); border-color:rgba(63,201,138,.34)}
.pill.watch{background:rgba(224,163,74,.16); color:var(--gold-dark); border-color:rgba(224,163,74,.34)}
.pill.risk{background:rgba(229,114,106,.16); color:var(--a-chao); border-color:rgba(229,114,106,.34)}
.abadge{border:1px solid}
.abadge.a-chaotic{background:var(--a-chao-bg); color:var(--a-chao); border-color:var(--a-chao-ln)}
.abadge.a-crucible{background:var(--a-cruc-bg); color:var(--a-cruc); border-color:var(--a-cruc-ln)}
.abadge.a-clouded{background:var(--a-clou-bg); color:var(--a-clou); border-color:var(--a-clou-ln)}
.abadge.a-cultivated{background:var(--a-cult-bg); color:var(--a-cult); border-color:var(--a-cult-ln)}
.co{background:var(--card); color:var(--ink)}

/* token-flip fixes (specificity-matched to legacy inline rules) */
#focusCustom{background:var(--card-2); color:var(--ink)}
.co{background:var(--card); color:var(--ink)}
.tm .tip{background:#0F1320; color:var(--ink); border-color:var(--line)}
.tm .tip b{color:var(--ink)} .tm .tip i{color:var(--gold-dark)}
span.fbnote{background:var(--card-2); color:var(--ink); border-color:var(--line)}

/* profile pills/badges */
.badge{color:var(--gold-dark); background:rgba(200,134,47,.14); border-color:rgba(224,163,74,.34)}
.fields span{color:var(--ink); background:var(--card-2); border-color:var(--line)}

/* ---- legacy per-page tokens remapped to the dark logo palette ---- */
:root{
  --ok:#3FC98A; --warn:#E0A34A; --bad:#E5726A; --teal:#6EA3C9; --blue:#6EA3C9;
  --chaotic:#E5726A; --crucible:#E0A34A; --clouded:#C6CDD5; --cultivated:#3FC98A;
  --chaotic-soft:#2A1A18; --crucible-soft:#2A2214; --clouded-soft:#20242E; --cultivated-soft:#16241C;
  --a-cult:#3FC98A; --a-cruc:#E0A34A; --a-clou:#C6CDD5; --a-chao:#E5726A;
  --gold:#C8862F; --gold-dark:#E0A34A;
}

/* team arena map: literal light gradients -> dark arena tints, bright labels */
.q.tl{background:linear-gradient(150deg,#2a1a18,#1b1113); --qink:var(--a-chao)}
.q.tr{background:linear-gradient(150deg,#2a2214,#1a1610); --qink:var(--a-cruc)}
.q.bl{background:linear-gradient(150deg,#20242e,#151920); --qink:var(--a-clou)}
.q.br{background:linear-gradient(150deg,#16241c,#0f1913); --qink:var(--a-cult)}
.q.bl::before{opacity:.12}
.demo{background:rgba(200,134,47,.14); border-color:var(--a-cruc-ln)}

/* page header banners (app/solve, plan) were light — sit them on the dark ground */
.top{background:transparent; border:0; box-shadow:none}

/* ---- text contrast: dark-on-dark fixes across pages ---- */
h1,h2,h3,h4{color:var(--ink)}
td,th{color:var(--ink)}
.ptitle{color:var(--ink)}
.flabel,.ownlabel,.pathblk .pn,.planhead h2,.phase-t,.readout .rtitle,.readout .rtag b{color:var(--ink)}
.readout .rwhy,.act .atext,.gtext,.find p,.co p,.co,.roster td{color:#C3D0DE}
.readout .rlab{color:var(--live)}
.readout .rtag{background:var(--card-2); border-color:var(--line); color:var(--ink)}
.chip:hover,.tbtn:hover,.addhelp:hover,.nav a.tab:hover{color:var(--ink)}
h1.ptitle{color:var(--ink)}
.top .ptitle{color:var(--ink)} .top .psub{color:var(--muted)}

/* ---- explore-style.html (Explore your style) — scoped to avoid class collisions ---- */
.p-explore .head{background:transparent}
.p-explore .head h1{color:var(--ink)}
.p-explore .banner,.p-explore .reset,.p-explore .sig p,.p-explore .pair p,.p-explore .arenagap .gsub,.p-explore .blk p{color:#B7C4D6}
.p-explore .reset{background:var(--card-2); border-color:var(--line)}
.p-explore .basetrack,.p-explore .meter,.p-explore .fbar{background:var(--card-2)}
.p-explore .field{background:var(--card); border-color:var(--line)}
.p-explore .q.bl.on{background:linear-gradient(150deg,#3a4150,#262c38)}
/* fit-status chips: edge=good(green) · near=amber · gap=red */
.p-explore .tag.edge,.p-explore .achip.edge{background:rgba(63,201,138,.16); color:var(--live); border-color:rgba(63,201,138,.34)}
.p-explore .tag.near,.p-explore .achip.near{background:rgba(224,163,74,.16); color:var(--gold-dark); border-color:rgba(224,163,74,.34)}
.p-explore .tag.gap,.p-explore .achip.gap{background:rgba(229,114,106,.16); color:var(--a-chao); border-color:rgba(229,114,106,.34)}
/* gap-analysis blocks */
.p-explore .gapdem,.p-explore .subcta{background:var(--card); border-color:var(--line)}
.p-explore .gblock.you,.p-explore .gmove.cap{background:rgba(200,134,47,.14)}
.p-explore .gblock.need,.p-explore .gmove{background:rgba(63,201,138,.12)}
.p-explore .gmove{color:var(--live)}
.p-explore .gmove b{background:rgba(63,201,138,.22)}
.p-explore .gmove.cap b{background:rgba(224,163,74,.22)}
.p-explore .gland b{background:rgba(229,114,106,.16); color:var(--a-chao)}
.p-explore .subcta h2{color:var(--ink)}
/* explore-style.html sets --ink and --muted to the light-theme ink inside its
   panels, and this sheet paints those panels dark, so the trait names, the
   signature heading and every var(--ink) label inside them read at about
   1.2:1. Point the panel tokens at this theme's text colours. */
.p-explore .card,.p-explore .sig,.p-explore details.tp{--ink:var(--on); --muted:var(--on-2)}
/* The same page hard-codes these labels in light-theme colours. */
.p-explore .gmove b{color:var(--live)}
.p-explore .gblock.you .bl{color:var(--gold-dark)}
.p-explore .gblock.need .bl{color:var(--live)}
.p-explore .gland{color:#B7C4D6}

/* ---- contrast fixes (from WCAG audit: too-dark text + light-on-light markers) ---- */
.sub{ color: var(--muted); }
.chip{ color: var(--muted); }
.chip.on{ background: var(--gold); border-color: var(--gold); color: #0B0C14; }
.chip:hover, .addhelp:hover{ color: var(--ink); }
.addhelp{ color: var(--muted); }
em{ color: var(--ink); }
/* team member markers: solid light arena fills -> dark text; use the silver token for clouded */
.tm.a-clouded, .mini.a-clouded{ background: var(--a-clou); }
.mini.a-chaotic, .mini.a-crucible, .mini.a-clouded, .mini.a-cultivated,
.tm.a-chaotic, .tm.a-crucible, .tm.a-clouded, .tm.a-cultivated{ color: #0B0C14; }

/* ---- 90-day plan: light surfaces the token flip missed (light-on-light) ---- */
/* Path-selector cards were a warm cream with light text -> dark card surfaces. */
.pathblk{ background: var(--card-2); border-color: var(--line); }
.pathblk:hover{ border-color: var(--gold); }
.pathblk.on{ background: var(--card-3); border-color: var(--gold); box-shadow: 0 0 0 3px rgba(200,134,47,.18); }
.pathblk::before{ border-color: var(--line); background: var(--card); }
.pathblk.on::before{ border-color: var(--gold); background: radial-gradient(circle, var(--gold) 0 4px, var(--card) 5px); }
.pathbadge{ color: var(--live); background: rgba(63,201,138,.16); border-color: rgba(63,201,138,.34); }
/* Milestone box + row hover were light. */
.mile{ background: var(--card-2); border-color: var(--line); border-left-color: var(--gold); }
.act:hover{ background: var(--card-2); }
/* Evidence chips were a cream pill. */
a.cite{ background: var(--card-2); border-color: var(--line); color: var(--gold-dark); }
a.cite:hover{ border-color: var(--gold); background: var(--card-3); }
/* Strength/hedge tags -> the dark pill convention (bright text on a dark tint). */
.lev{ color: #C3D0DE; }
.lev-s .levtag{ color: var(--live); background: rgba(63,201,138,.16); border-color: rgba(63,201,138,.34); }
.lev-h .levtag{ color: var(--gold-dark); background: rgba(224,163,74,.16); border-color: rgba(224,163,74,.34); }
/* "How we validate" box was light mint with light text. */
.validate{ background: rgba(63,201,138,.10); border-color: rgba(63,201,138,.28); color: #C3D0DE; }
.validate b{ color: var(--live); }

/* ---- deeper phase blocks (aim / how / cadence / script / watch) on dark ---- */
/* aim: the phase's lead line — bright, calm, not shouting. */
.aim{ color: var(--ink); }
/* per-action how-to: the muted secondary line under each step. */
.act .ahow{ color: var(--muted); }
.act.done .ahow{ color: #64748b; }
/* cadence: a neutral instrument surface, mono-ish label in gold. */
.cadence{ background: var(--card-2); border-color: var(--line); color: #C3D0DE; }
.cadence .clab{ color: var(--gold-dark); }
/* "Try saying": supportive blue/gold tint, bright quoted text (pill convention). */
.say{ background: rgba(110,163,201,.14); border-color: rgba(110,163,201,.30);
  border-left-color: var(--red); }
.say .saylab{ color: var(--gold-dark); }
.say .saytxt{ color: var(--ink); }
/* "Watch for": cautionary amber/red tint, readable bright text. */
.watch{ background: rgba(224,163,74,.14); border-color: rgba(224,163,74,.34);
  border-left-color: var(--a-cruc); color: #E6D3B4; }
.watch .watchlab{ color: var(--gold-dark); }

/* ============================================================
   The product mark, P×Ei and P×Et.
   One rule for every page, so the mark cannot drift from one to
   the next. The glyph is a self-coloured asset, which is why it
   can be an <img>: no page has to set its colour.
   Running text and the nav take the -sm glyph, which is the
   letter on its own. pxei-glyph.svg puts the mark on the brand
   paper, for a tile or an app icon that has room for it.
   tools/build_product_marks.py draws all four assets.
   Usage:  <span class="mark">P&times;E<img class="gl"
             src="/assets/pxei-glyph-sm.svg" alt="i"
             width="26" height="62"></span>
   ============================================================ */
.mark{white-space:nowrap}
.mark .gl{display:inline-block; width:auto; height:.70em; vertical-align:baseline;
  position:relative; top:-.30em; margin-left:.06em}
h1 .mark .gl,.ptitle .mark .gl{height:.56em; top:-.42em}
/* The nav sets .nav .home img{display:block} for the company logo, and that
   rule outranks .mark .gl, so the glyph has to take its display back here. */
.nav .home .mark .gl{display:inline-block; vertical-align:baseline;
  width:auto; height:.80em; top:-.34em}
/* The brand line: company, then the product's own mark. */
.nav .home{gap:9px}
.nav .home .brandmark{font:800 17px/1 var(--sans); color:var(--ink); letter-spacing:-.01em;
  padding-left:9px; border-left:1px solid var(--line);
  display:inline-flex; align-items:center; gap:7px}

/* The product mark, which is the four arenas with the bench lit on them: one
   cell for P×Ei and three for P×Et.
 *
 * It replaced a lime chip with the letter i or t knocked out of it. At this
 * size an i and a t are the same vertical stroke, so the two products wore
 * marks nobody could tell apart -- which is most of what a product mark is for.
 * One dot against three survives being small.
 *
 * Square and on the baseline rather than a superscript: this is a symbol, not a
 * letter, and hanging it above the line was what forced it small enough to
 * stop working. */
.nav .home .brandmark .gm{display:inline-block; width:19px; height:19px}

/* Running text takes a plain typographic superscript, never an image.
 *
 * Inline at 15px any image is noise, and the chip had the same problem there
 * that it had in the nav -- it arrived as a smudge. A letter does not, because
 * a reader mid-sentence has the context the nav cannot give them. The grid
 * carries the distinction where it matters and prose just says the name. */
.mark .sx{font-size:.58em; line-height:0; vertical-align:super; font-weight:inherit}

/* The door between the two tools, for somebody who is in both.
 *
 * Set apart from the tabs beside it because it does not select a page within
 * this tool -- it leaves. A manager who cannot see it is a manager who has to
 * remember a URL, and a leader who can see it when they have no bench is being
 * shown a tab into somebody else's product, which is the thing the split took
 * away. */
/* The app switcher at the top right: P×Eⁱ and P×Eᵗ in one dropdown. A
   <details>, so it needs no script. The menu is anchored to the right edge so it
   never runs off a phone screen. */
.nav .apps{position:relative; margin-left:6px}
.nav .apps summary{list-style:none; cursor:pointer; display:flex; align-items:center; gap:7px;
  padding:7px 10px; border:1px solid var(--line); border-radius:9px; color:var(--ink);
  font:800 15px/1 var(--sans); white-space:nowrap}
.nav .apps summary::-webkit-details-marker{display:none}
.nav .apps summary:hover,.nav .apps[open] summary{background:rgba(255,255,255,.06)}
.nav .apps summary:focus-visible{outline:2px solid var(--gold); outline-offset:2px}
.nav .apps .car{font-size:10px; color:var(--muted)}
.nav .apps .sx{font-size:.62em; vertical-align:super; line-height:0}
.nav .appmenu,.appmenu.appmenu-open{position:absolute; right:0; top:calc(100% + 6px); z-index:60; width:280px;
  max-width:calc(100vw - 32px); background:var(--card); border:1px solid var(--line);
  border-radius:12px; padding:6px; box-shadow:0 18px 40px -18px rgba(0,0,0,.8); display:grid; gap:4px}
.appmenu .app{display:grid; grid-template-columns:24px minmax(0,1fr); gap:4px 10px;
  align-items:center; padding:10px; border-radius:9px; text-decoration:none; color:var(--ink)}
.appmenu a.app:hover,.appmenu a.app:focus-visible{background:var(--card-2); outline:none}
.appmenu .app img{width:22px; height:22px; display:block}
.appmenu .an{display:grid; gap:2px}
.appmenu .an b{font:800 15px/1.1 var(--sans)}
.appmenu .an small{font-size:13px; color:var(--muted)}
.appmenu .app em{grid-column:2; font-style:normal; font-size:12px; color:var(--muted)}
.appmenu .app.cur{background:var(--card-2)}
.appmenu .app.cur em{color:var(--gold)}
.appmenu .app.off{opacity:.62}
.appmenu .sx{font-size:.62em; vertical-align:super; line-height:0}
/* The switcher takes room at the right; below 1440px the back link keeps its
   logo and drops its words, so the nav fits a laptop screen without scrolling. */
@media (max-width:1440px){.nav a.back .bt{display:none}}

/* The Solve page's arena chip keeps a white gradient from the light theme, so on
   the dark ground it reads as a lit slab beside its neutral neighbour. */
.chip.arena{background:var(--card-2); border-color:rgba(198,154,63,.45); color:var(--ink)}