/* Uncharted theme v2 (15.10) · Christiaan's design system, email "Cool stuff!! - Follow-up" 14.10:
   "2. Modern Navigator + 3. The New Age of Discovery + a touch of 4. The Future Is Uncharted".
   Space Grotesk (primary) · Inter (supporting) · Newsreader Italic (editorial accent)
   Aubergine #49223F · Compass Gold #E8BD69 · Background neutral #F3EFE8
   "Use gold as a precise accent, not as a dominant fill." Brighter and more expressive than v1
   (his note to Lenz + Penélope), technical but trustworthy. Signature: compass + chart linework.
   Loaded last on every page, so it overrides each page's own palette. */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Inter:wght@400;500;600;700&family=Newsreader:ital,opsz,wght@1,6..72,400;1,6..72,500&display=swap');

html:root, html:root:not([data-theme="x"]){
  --aubergine:#49223F; --aubergine-deep:#2E1428; --gold-light:#E8BD69; --gold-deep:#9A7022;
  --gold:#9A7022;   /* gold as TEXT on parchment needs depth to read; fills use --gold-light */ --parchment:#F3EFE8;
  --bg:#F3EFE8; --panel:#FFFFFF; --ink:#2B1426; --muted:#6E5A68; --line:#E4DACD;
  --accent:#49223F; --accent-ink:#FFFFFF; --good:#2F7D5B; --bubble:#FFFFFF; --me:#49223F; --dark:#49223F;
  --serif:'Space Grotesk',Inter,system-ui,sans-serif;            /* headlines (name kept for old pages) */
  --display:'Space Grotesk',Inter,system-ui,sans-serif;
  --editorial:'Newsreader',Georgia,serif;                         /* italic accents only */
  --mono:'Space Grotesk',Inter,system-ui,sans-serif;               /* labels: uppercase + tracking */
  color-scheme:light;
}
html body{
  background-color:var(--bg); color:var(--ink);
  font-family:Inter,system-ui,sans-serif;
  /* fine chart linework: latitude and longitude in aubergine, barely there */
  background-image:
    radial-gradient(1000px 420px at 85% -160px, rgba(232,189,105,.22), transparent 70%),
    repeating-linear-gradient(0deg, rgba(73,34,63,.045) 0 1px, transparent 1px 72px),
    repeating-linear-gradient(90deg, rgba(73,34,63,.045) 0 1px, transparent 1px 72px);
  background-attachment:fixed;
}
html body h1, html body h2, html body h3{font-family:var(--display);font-weight:700;letter-spacing:-.015em;color:var(--ink)}
html body h1 em, html body .editorial{font-family:var(--editorial);font-style:italic;font-weight:500;letter-spacing:0;color:var(--aubergine)}
html body h1 em{color:var(--gold-deep)}
::selection{background:var(--gold);color:var(--aubergine-deep)}
a{color:var(--aubergine)}

/* Buttons: aubergine primary, gold only as the focus/selection marker */
html body button.primary{background:var(--aubergine);color:#fff}
html body button.sel, html body .chips button.sel{outline:0;box-shadow:inset 0 0 0 2px var(--gold-deep);background:#FBF6EC}
html body input[type=range]{accent-color:var(--aubergine)}
html body :focus-visible{outline:2px solid var(--gold-deep);outline-offset:2px}

/* Chat: white bubbles on parchment, the founder's own answers in aubergine */
html body .msg{box-shadow:0 1px 0 rgba(73,34,63,.05)}
html body .msg.me{color:#fff}
html body .msg.me a{color:var(--gold-light)}
html body .dock{background:linear-gradient(rgba(243,239,232,0),var(--bg) 18%)}

/* Founder ID card = the Founder Trade Card (collectible, holographic): the one dark object,
   aubergine with a fine gold frame and a slow foil sheen. */
/* Brandbook Edition 01 (14.10): "Overuse metallic effects or gradients" is a Don't, so the card is a
   flat aubergine with a fine gold rule; secondary colours Muted Mauve + Deep Plum added. */
html:root{--mauve:#A98BA3; --deep-plum:#241622}
html body .idcard{
  position:relative; overflow:clip; isolation:isolate; color:#F7F2EA;
  background:#49223F;
  border:1px solid rgba(232,189,105,.8);
  box-shadow:0 0 0 4px rgba(232,189,105,.14), 0 18px 44px rgba(46,20,40,.28);
}
html body .idcard h3{color:#F7F2EA}
/* cartographic linework instead of a foil sheen: faint latitude lines + a compass ring, top right */
html body .idcard::after{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(circle at 92% 8%, transparent 46px, rgba(232,189,105,.35) 47px, transparent 48px),
    repeating-linear-gradient(0deg, rgba(232,189,105,.06) 0 1px, transparent 1px 34px);
}
html body .idcard h3, html body .idcard .scores b{font-family:var(--display)}
html body .idcard .stage{font-family:var(--display);font-weight:600;letter-spacing:.1em;background:var(--gold-light);color:var(--aubergine-deep)}
html body .idcard .scores b{color:var(--gold-light)}
html body .idcard .muted{color:#D9C8D2}

/* Pressed toggles and action pills: aubergine, never a gold slab */
html body [aria-pressed=true], html body .bar button.go{background:var(--aubergine)!important;color:#fff!important;border-color:var(--aubergine)!important}
html body .tag{border-color:var(--gold-light)!important;color:var(--gold-deep)!important;background:#FBF6EC}

/* Dark variant for the departure board (an airport board at night; Direction 4, "a touch of"):
   <html data-board>. Same tokens, inverted. */
html[data-board]:root{
  --bg:#2E1428; --panel:#3A1A33; --ink:#F7F2EA; --muted:#CDB9C6; --line:#5A3550;
  --gold:#E8BD69; --gold-deep:#E8BD69; --accent:#E8BD69; --accent-ink:#2E1428; color-scheme:dark;
}
html[data-board] body{
  background-image:
    radial-gradient(1000px 480px at 50% -140px, rgba(232,189,105,.16), transparent 70%),
    repeating-linear-gradient(0deg, rgba(232,189,105,.05) 0 1px, transparent 1px 72px),
    repeating-linear-gradient(90deg, rgba(232,189,105,.05) 0 1px, transparent 1px 72px);
}
html[data-board] body h1, html[data-board] body h2, html[data-board] body h3{color:var(--ink)}
html[data-board] body h1 em{color:var(--gold-light)}
html[data-board] body [aria-pressed=true]{background:var(--gold-light)!important;color:var(--aubergine-deep)!important;border-color:var(--gold-light)!important}

/* ── Night look (experiment, 15.10): near-black base, purple + gold on top, one bright signal ──
   Sneaker logic: black carries the shoe, the purple panel and the gold stitching pop on it.
   Signal = the bright event colour (Portugal Tech Week, Startup Nights), used on progress only. */
html[data-look="night"]:root, html[data-look="night"]:root:not([data-theme="x"]){
  --bg:#121012; --panel:#1C171B; --ink:#F3EFE8; --muted:#B5A5B0; --line:#342A31;
  --bubble:#1C171B; --me:#49223F; --dark:#49223F; --accent:#E8BD69; --accent-ink:#241622;
  --gold:#E8BD69; --gold-deep:#E8BD69; --signal:#FF5A3C; color-scheme:dark;
}
html[data-look="night"] body{
  background-image:
    radial-gradient(900px 380px at 85% -140px, rgba(73,34,63,.55), transparent 70%),
    repeating-linear-gradient(0deg, rgba(232,189,105,.05) 0 1px, transparent 1px 72px),
    repeating-linear-gradient(90deg, rgba(232,189,105,.05) 0 1px, transparent 1px 72px);
}
html[data-look="night"] body h1, html[data-look="night"] body h2, html[data-look="night"] body h3{color:var(--ink)}
html[data-look="night"] body h1 em, html[data-look="night"] body .editorial{color:#E8BD69}
html[data-look="night"] a{color:#E8BD69}
html[data-look="night"] header b{color:#F3EFE8!important}
html[data-look="night"] body button, html[data-look="night"] body .btn{background:var(--panel);color:var(--ink);border-color:var(--line)}
html[data-look="night"] body button.primary{background:#49223F;color:#fff;box-shadow:inset 0 -3px 0 #E8BD69}
html[data-look="night"] body button.sel, html[data-look="night"] body .chips button.sel{background:#2A1F27;box-shadow:inset 0 0 0 2px #E8BD69}
html[data-look="night"] .progress i, html[data-look="night"] .goalbar i{background:var(--signal)!important}
html[data-look="night"] .voyage i.on{color:#F3EFE8!important;border-color:var(--signal)!important}
html[data-look="night"] .bars i{background:#E8BD69!important}
html[data-look="night"] .card, html[data-look="night"] .sheet{background:var(--panel);border-color:var(--line)}
html[data-look="night"] input, html[data-look="night"] textarea, html[data-look="night"] select{background:#161216;color:var(--ink);border-color:var(--line)}
html[data-look="night"] .dock{background:linear-gradient(transparent,var(--bg) 18%)}
html[data-look="night"] a.cal{background:#2A1F27;color:#E8BD69}

/* ── Partner skin: Founders Club by Heineken (concept mock-up, 15.10) ──
   Green carries, white and silver breathe, red only as a pin-point. No partner logo files: name in
   type only, labelled as a concept for discussion. */
html[data-brand="heineken"]:root, html[data-brand="heineken"]:root:not([data-theme="x"]){
  --aubergine:#0E5C2F; --aubergine-deep:#083D1F; --gold-light:#D7DDD3; --gold-deep:#0E5C2F; --gold:#0E5C2F;
  --bg:#F2F5EF; --panel:#FFFFFF; --ink:#10261A; --muted:#55685C; --line:#D6DFD4;
  --accent:#0E5C2F; --me:#0E5C2F; --dark:#0E5C2F; --bubble:#FFFFFF; --signal:#D2232A;
}
html[data-brand="heineken"] body{background-image:
  radial-gradient(900px 380px at 85% -140px, rgba(14,92,47,.16), transparent 70%),
  repeating-linear-gradient(0deg, rgba(14,92,47,.04) 0 1px, transparent 1px 72px),
  repeating-linear-gradient(90deg, rgba(14,92,47,.04) 0 1px, transparent 1px 72px)}
html[data-brand="heineken"] body button.primary{background:#0E5C2F;color:#fff}
html[data-brand="heineken"] .progress i, html[data-brand="heineken"] .goalbar i{background:#D2232A!important}
html[data-brand="heineken"] .voyage i.on{color:#0E5C2F!important;border-color:#D2232A!important}
html[data-brand="heineken"] .idcard{background:#0E5C2F!important}
html[data-brand="heineken"] .bars i{background:#0E5C2F!important}
html[data-brand="heineken"] header b{color:#0E5C2F!important}
html[data-brand="heineken"] .badge{background:#D7DDD3;color:#083D1F}

/* ── Atlantic look (21.10, Joanna to Christiaan 20.10): "keep the aubergine and gold as the anchor and add
   the light from the sea: ocean blue, sand and more white space". ?look=atlantic turns it on (look.js),
   /looks.html shows it next to the Brandbook look. Aubergine stays the primary button, the ID card and the
   headline ink; gold stays the precise accent (focus, selection, the card's rule). Ocean blue carries links,
   progress and charts; sand carries the soft fills; the page is near-white with more air around everything.
   Every text pair is AA, checked in test/looks.test.mjs. ── */
html[data-look="atlantic"]:root, html[data-look="atlantic"]:root:not([data-theme="x"]){
  --bg:#FCFBF8; --panel:#FFFFFF; --ink:#2B1426; --muted:#56606C; --line:#E7DFD1;
  --ocean:#1F5F8B; --ocean-light:#8FB9D4; --ocean-tint:#EAF2F7; --sand:#E9DCC4; --sand-tint:#F6F0E5;
  --gold:#8A6418; --gold-deep:#8A6418; --good:#2A7353;
  --accent:#49223F; --accent-ink:#FFFFFF; --bubble:#FFFFFF; --me:#49223F; --signal:#1F5F8B;
}
html[data-look="atlantic"] body{
  line-height:1.6;
  background-image:
    radial-gradient(1100px 460px at 82% -200px, rgba(31,95,139,.16), transparent 70%),
    radial-gradient(900px 420px at 10% 110%, rgba(233,220,196,.55), transparent 70%),
    repeating-linear-gradient(0deg, rgba(31,95,139,.035) 0 1px, transparent 1px 96px),
    repeating-linear-gradient(90deg, rgba(31,95,139,.035) 0 1px, transparent 1px 96px);
}
html[data-look="atlantic"] a{color:var(--ocean)}
html[data-look="atlantic"] .msg.me a, html[data-look="atlantic"] .idcard a{color:var(--gold-light)}
html[data-look="atlantic"] body h1 em{color:var(--ocean)}
html[data-look="atlantic"] header b{color:var(--aubergine)}
/* more white space: the same pages, more air */
html[data-look="atlantic"] main{padding-top:34px}
html[data-look="atlantic"] h1{margin-top:30px;margin-bottom:12px}
html[data-look="atlantic"] h2{margin-top:44px}
html[data-look="atlantic"] .lede{margin-bottom:28px}
html[data-look="atlantic"] .card{padding:20px;margin:16px 0;border-color:var(--line);box-shadow:0 1px 2px rgba(31,95,139,.06)}
html[data-look="atlantic"] .msg{padding:14px 16px;margin:14px 0;border-color:var(--line);box-shadow:0 1px 2px rgba(31,95,139,.05)}
html[data-look="atlantic"] .msg.me{border-color:transparent}
html[data-look="atlantic"] .tiles{gap:14px}
html[data-look="atlantic"] .tile, html[data-look="atlantic"] .panel, html[data-look="atlantic"] .f{padding:18px 20px;border-color:var(--line);box-shadow:0 1px 2px rgba(31,95,139,.05)}
html[data-look="atlantic"] th, html[data-look="atlantic"] td{padding-top:10px;padding-bottom:10px}
html[data-look="atlantic"] tr.sel td{background:var(--ocean-tint)}
/* sand for the soft fills, ocean for movement: progress, bars, charts */
html[data-look="atlantic"] .progress, html[data-look="atlantic"] .goalbar{background:var(--sand)}
html[data-look="atlantic"] .progress i, html[data-look="atlantic"] .goalbar i, html[data-look="atlantic"] .funnel i,
html[data-look="atlantic"] .bars i{background:var(--ocean)!important}
html[data-look="atlantic"] .funnel div.warn i{background:var(--gold-light)!important}
html[data-look="atlantic"] .tag{background:var(--sand-tint);border-color:var(--sand)!important}
html[data-look="atlantic"] body button.sel, html[data-look="atlantic"] body .chips button.sel{background:var(--sand-tint)}
html[data-look="atlantic"] a.cal{background:var(--ocean-tint);color:var(--ocean)}
html[data-look="atlantic"] .dock{background:linear-gradient(rgba(252,251,248,0),var(--bg) 18%)}
html[data-look="atlantic"] input, html[data-look="atlantic"] textarea, html[data-look="atlantic"] select{background:#FFFFFF;border-color:var(--line)}
/* the ID card stays the one aubergine object, with a line of sea under the gold rule */
html[data-look="atlantic"] .idcard{box-shadow:0 0 0 4px rgba(232,189,105,.14), 0 6px 0 -2px var(--ocean-light), 0 18px 44px rgba(31,95,139,.18)}

/* ── Aqua palette (preview, 27.10). Christiaan's mail 27.10 after the Africa Tech Festival banner: "a slightly more
   bright 'plum' color and more aqua ocean style blue - mixed with white tiles", plus his 19.10 underwater palette.
   Opt-in only: ?theme=aqua sets <html data-palette="aqua"> for this tab (look.js), ?theme=off clears it. Without the
   attribute none of these rules match, so the default look stays exactly as it is.
   A brighter plum page with aqua light from above and ocean blue from below; the content sits on white tiles with
   plum ink; aqua replaces gold for the primary button, selection, progress and the ID card's rule; ocean blue
   carries the founder's own answers and the evidence bars. Two text scopes: light ink on the plum page, plum ink
   inside every white tile. Every pair is AA, checked in test/palette-aqua.test.mjs. Token and colour changes only,
   no layout changes. ── */
html[data-palette="aqua"]:root, html[data-palette="aqua"]:root:not([data-theme="x"]){
  --bg:#5B1F5E; --plum-bright:#6B2470; --card-dark:#2A0B32; --on-bg:#FFFFFF; --on-bg-muted:#EBD9EE; --line-bg:#7C3A80;
  --aqua:#2FD3B5; --aqua-light:#5EE6CC; --aqua-ink:#2A0B30; --ocean:#14598A; --teal-deep:#0A6B5E;
  --tile-bg:#FFFFFF; --tile-ink:#2E0E34; --tile-muted:#66506B; --tile-line:#E6DCEA; --field:#F6F0F8;
  --panel:#FFFFFF; --bubble:#FFFFFF; --ink:#2E0E34; --muted:#66506B; --line:#E6DCEA;
  --accent:#2FD3B5; --accent-ink:#2A0B30; --aubergine:#6B2470; --aubergine-deep:#2A0B32;
  --gold-light:#2FD3B5; --gold-deep:#0A6B5E; --gold:#0A6B5E; --me:#14598A; --dark:#2A0B32; --signal:#2FD3B5;
}
/* the page: light ink on plum, aqua light from above, ocean from below, a faint chart grid */
html[data-palette="aqua"] body{
  --ink:var(--on-bg); --muted:var(--on-bg-muted); --line:var(--line-bg); --link:var(--aqua-light);
  color:var(--ink); background-color:var(--bg);
  background-image:
    radial-gradient(1100px 520px at 82% -200px, rgba(47,211,181,.30), transparent 70%),
    radial-gradient(900px 480px at 8% 112%, rgba(20,89,138,.55), transparent 70%),
    radial-gradient(520px 520px at 108% 58%, rgba(196,46,140,.22), transparent 70%),
    repeating-linear-gradient(0deg, rgba(255,255,255,.035) 0 1px, transparent 1px 72px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.035) 0 1px, transparent 1px 72px);
}
/* white tiles: plum ink inside every card, bubble, button and field */
html[data-palette="aqua"] .msg, html[data-palette="aqua"] .card, html[data-palette="aqua"] .tile, html[data-palette="aqua"] .panel,
html[data-palette="aqua"] .sheet, html[data-palette="aqua"] .f, html[data-palette="aqua"] button, html[data-palette="aqua"] .btn,
html[data-palette="aqua"] input, html[data-palette="aqua"] textarea, html[data-palette="aqua"] select{
  --ink:var(--tile-ink); --muted:var(--tile-muted); --line:var(--tile-line); --link:var(--teal-deep); color:var(--ink);
}
html[data-palette="aqua"] a{color:var(--link)}
html[data-palette="aqua"] .msg, html[data-palette="aqua"] .card, html[data-palette="aqua"] .sheet{border-color:transparent;box-shadow:0 1px 2px rgba(42,11,48,.18), 0 8px 24px rgba(42,11,48,.14)}
html[data-palette="aqua"] input:not([type=range]):not([type=checkbox]):not([type=radio]), html[data-palette="aqua"] textarea, html[data-palette="aqua"] select,
html[data-palette="aqua"] .port code, html[data-palette="aqua"] .bgo .cells button, html[data-palette="aqua"] .bgo .nums button{background:var(--field)}
/* on the plum page: brand line, hats, headline accents */
html[data-palette="aqua"] header b, html[data-palette="aqua"] .brand{color:var(--on-bg)}
html[data-palette="aqua"] .voyage i.on{color:var(--on-bg)!important;border-color:var(--aqua)!important}
html[data-palette="aqua"] body h1 em, html[data-palette="aqua"] body .editorial{color:var(--aqua-light)}
html[data-palette="aqua"] .card .editorial, html[data-palette="aqua"] .msg .editorial, html[data-palette="aqua"] .sheet .editorial{color:var(--teal-deep)}
html[data-palette="aqua"] body .dock{background:linear-gradient(rgba(91,31,94,0),var(--bg) 18%)}
html[data-palette="aqua"] body :focus-visible{outline-color:var(--aqua)}
html[data-palette="aqua"] body input[type=range], html[data-palette="aqua"] .check input{accent-color:var(--teal-deep)}
html[data-palette="aqua"] svg [fill="#E8BD69"]{fill:var(--aqua)}
html[data-palette="aqua"] svg [stroke="#E8BD69"], html[data-palette="aqua"] svg [stroke="#B98A2E"]{stroke:var(--aqua)}
html[data-palette="aqua"] header svg [fill="#49223F"], html[data-palette="aqua"] .brand svg [fill="#49223F"]{fill:var(--card-dark)}
/* aqua replaces gold: the primary button, selection, progress, badges */
html[data-palette="aqua"] body button.primary, html[data-palette="aqua"] .tools button.go{background:var(--aqua);color:var(--aqua-ink);border-color:var(--aqua)}
html[data-palette="aqua"] body button.primary small{color:var(--aqua-ink)}
html[data-palette="aqua"] body button.sel, html[data-palette="aqua"] body .chips button.sel{background:#E3FAF4;box-shadow:inset 0 0 0 2px var(--teal-deep)}
html[data-palette="aqua"] .progress i, html[data-palette="aqua"] .goalbar i{background:var(--aqua)!important}
html[data-palette="aqua"] .badge, html[data-palette="aqua"] .idcard .stage{background:var(--aqua);color:var(--aqua-ink)}
html[data-palette="aqua"] .ladder span.on{color:var(--aqua)}
/* ocean blue: the founder's own answers and the evidence bars */
html[data-palette="aqua"] .msg.me a{color:var(--on-bg)}
html[data-palette="aqua"] .bars i{background:var(--ocean)!important}
html[data-palette="aqua"] .wheel [fill="#E8BD69"]{fill:var(--aqua)}
html[data-palette="aqua"] .wheel [stroke="#B98A2E"]{stroke:var(--teal-deep)}
/* the dark objects (ID card, Founder ID head): deep plum with a fine aqua rule */
html[data-palette="aqua"] body .idcard, html[data-palette="aqua"] .head{background:var(--card-dark);border:1px solid rgba(47,211,181,.75);box-shadow:0 0 0 4px rgba(47,211,181,.14), 0 6px 16px rgba(20,4,24,.25)}
html[data-palette="aqua"] body .idcard::after{background:
  radial-gradient(circle at 92% 8%, transparent 46px, rgba(47,211,181,.40) 47px, transparent 48px),
  repeating-linear-gradient(0deg, rgba(47,211,181,.06) 0 1px, transparent 1px 34px)}
html[data-palette="aqua"] body .idcard .scores b{color:var(--aqua)}

/* ── Navigator palette v2 (preview, 27.10). Christiaan's second mail 27.10, after the aqua sheet: "I love the darker
   blue + purple ... ocean vibes", "a bit more neon effect with the blue/green", the "goldish yellow ... more
   intellectual ... just for digital system experience", "the greenish more for a dark mode", "make the background
   purple darker", "Purple for campaign to jump out and then use the blue style when Technology interacts with people".
   His references: Growth Lab (Base44) and the Zoetermeer board: near-black navy, dark cards with thin borders, neon
   wheel, mono uppercase tracked labels, gold for the active step and the primary button.
   Opt-in only: ?theme=navigator sets <html data-palette="navigator"> for this tab (look.js), ?theme=off clears it.
   Roles: deep purple-navy page; dark cards, thin borders; --region (neon green by default) = the wheel, progress and
   the ID card's rule; --sys gold = the machine (primary buttons, active step, system labels); --campaign purple = the
   ID card and the Founder ID head; --tech ocean blue = the AI's own bubbles; --me deep violet = the founder's answers.
   ?region=africa|pt|eu swaps --region only (aqua, gold, pink/purple). Every pair is AA, checked in
   test/palette-navigator.test.mjs. Token and colour changes only, no layout changes. ── */
html[data-palette="navigator"]:root, html[data-palette="navigator"]:root:not([data-theme="x"]){
  --bg:#100C2A; --panel:#19153A; --line:#2C2856; --line-strong:#3F3A78; --field:#0C0922;
  --ink:#EEEDF7; --muted:#ABA8CC; --region:#3DF5A0; --region-ink:#0B0A1E;
  --sys:#F5C84A; --sys-ink:#1A1306; --campaign:#4B1F78; --campaign-deep:#2A1250; --campaign-light:#CDB6FF;
  --tech:#0E2C4F; --tech-ink:#E6F1FF; --tech-line:#21507F; --me:#2D1B57;
  --bubble:#0E2C4F; --accent:#F5C84A; --accent-ink:#1A1306; --good:#3DF5A0;
  --aubergine:#4B1F78; --aubergine-deep:#100C2A; --gold-light:#F5C84A; --gold-deep:#F5C84A; --gold:#F5C84A;
  --parchment:#19153A; --dark:#4B1F78; --signal:#3DF5A0;
  --nmono:"JetBrains Mono","IBM Plex Mono",ui-monospace,"SF Mono",Menlo,monospace;
  color-scheme:dark;
}
html[data-palette="navigator"][data-region="africa"]:root{--region:#2EE8D4; --region-ink:#0B0A1E}
html[data-palette="navigator"][data-region="pt"]:root{--region:#EDAE3B; --region-ink:#0B0A1E}
html[data-palette="navigator"][data-region="eu"]:root{--region:#E77BFF; --region-ink:#0B0A1E}
/* the page: deep purple-navy, the campaign purple glowing from above, the ocean from below, a fine chart grid */
html[data-palette="navigator"] body{
  color:var(--ink); background-color:var(--bg);
  background-image:
    radial-gradient(1100px 520px at 85% -220px, rgba(75,31,120,.70), transparent 70%),
    radial-gradient(900px 520px at 5% 115%, rgba(14,44,79,.90), transparent 70%),
    repeating-linear-gradient(0deg, rgba(140,150,255,.045) 0 1px, transparent 1px 48px),
    repeating-linear-gradient(90deg, rgba(140,150,255,.045) 0 1px, transparent 1px 48px);
}
html[data-palette="navigator"] body h1, html[data-palette="navigator"] body h2, html[data-palette="navigator"] body h3{color:var(--ink)}
html[data-palette="navigator"] body h1 em{color:var(--region)}
html[data-palette="navigator"] body .editorial{color:var(--campaign-light)}
html[data-palette="navigator"] a{color:var(--region)}
html[data-palette="navigator"] ::selection{background:var(--region);color:var(--region-ink)}
html[data-palette="navigator"] body :focus-visible{outline:2px solid var(--sys);outline-offset:2px}
/* dark cards with thin borders */
html[data-palette="navigator"] body .card, html[data-palette="navigator"] body .sheet, html[data-palette="navigator"] body .tile,
html[data-palette="navigator"] body .panel, html[data-palette="navigator"] body .f{background:var(--panel);border:1px solid var(--line-strong);box-shadow:none;color:var(--ink)}
html[data-palette="navigator"] body button, html[data-palette="navigator"] body .btn{background:var(--panel);color:var(--ink);border:1px solid var(--line-strong)}
html[data-palette="navigator"] body button small{color:var(--muted)}
html[data-palette="navigator"] body input:not([type=range]):not([type=checkbox]):not([type=radio]), html[data-palette="navigator"] body textarea,
html[data-palette="navigator"] body select, html[data-palette="navigator"] .port code{background:var(--field);color:var(--ink);border-color:var(--line-strong)}
html[data-palette="navigator"] body input[type=range], html[data-palette="navigator"] .check input{accent-color:var(--region)}
html[data-palette="navigator"] body .dock{background:linear-gradient(rgba(16,12,42,0),var(--bg) 18%)}
/* the AI talks in ocean blue; the founder's own answers in deep violet */
html[data-palette="navigator"] body .msg:not(.me){background:var(--tech);color:var(--tech-ink);border:1px solid var(--tech-line);box-shadow:inset 3px 0 0 rgba(56,190,255,.55)}
html[data-palette="navigator"] body .msg.me{background:var(--me);color:var(--ink);border:1px solid var(--line-strong)}
html[data-palette="navigator"] body .msg.me a{color:var(--region)}
html[data-palette="navigator"] .typing i{background:var(--region)!important}
/* gold = the system: primary buttons, the active step, pressed toggles, system labels */
html[data-palette="navigator"] body button.primary, html[data-palette="navigator"] .tools button.go{background:var(--sys);color:var(--sys-ink);border:1px solid var(--sys);font-family:var(--nmono);text-transform:uppercase;letter-spacing:.08em;font-size:15px}
html[data-palette="navigator"] body button.primary small{color:var(--sys-ink)}
html[data-palette="navigator"] body button.sel, html[data-palette="navigator"] body .chips button.sel, html[data-palette="navigator"] body .days button.sel{background:rgba(245,200,74,.12);color:var(--ink);box-shadow:inset 0 0 0 2px var(--sys);outline:0}
html[data-palette="navigator"] body [aria-pressed=true], html[data-palette="navigator"] body .bar button.go{background:var(--sys)!important;color:var(--sys-ink)!important;border-color:var(--sys)!important}
html[data-palette="navigator"] .voyage i{color:var(--muted);border-color:var(--line-strong);font-family:var(--nmono);letter-spacing:.14em}
html[data-palette="navigator"] .voyage i.on{color:var(--sys)!important;border-color:var(--sys)!important}
html[data-palette="navigator"] .kick, html[data-palette="navigator"] body .sheet h2, html[data-palette="navigator"] .team tr.gap td{color:var(--sys);font-family:var(--nmono);letter-spacing:.16em;text-transform:uppercase}
html[data-palette="navigator"] .tag{background:transparent;border-color:var(--sys)!important;color:var(--sys)!important;font-family:var(--nmono);text-transform:uppercase;letter-spacing:.08em}
/* mono uppercase tracked micro-labels */
html[data-palette="navigator"] header b, html[data-palette="navigator"] .brand{color:var(--ink);font-family:var(--nmono);letter-spacing:.24em}
html[data-palette="navigator"] header span{color:var(--muted);font-family:var(--nmono);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase}
html[data-palette="navigator"] .badge, html[data-palette="navigator"] body .idcard .stage{background:var(--sys);color:var(--sys-ink);font-family:var(--nmono);text-transform:uppercase;letter-spacing:.1em}
html[data-palette="navigator"] .tools button{background:var(--panel);color:var(--ink);border-color:var(--line-strong);font-family:var(--nmono);text-transform:uppercase;letter-spacing:.08em;font-size:12px}
html[data-palette="navigator"] .ftype, html[data-palette="navigator"] .head .ftype{background:rgba(255,255,255,.08);color:var(--ink);border-color:var(--line-strong)}
html[data-palette="navigator"] .ftype small{color:var(--muted)}
html[data-palette="navigator"] header svg [fill="#E8BD69"], html[data-palette="navigator"] .brand svg [fill="#E8BD69"]{fill:var(--sys)}
html[data-palette="navigator"] header svg [stroke="#E8BD69"], html[data-palette="navigator"] .brand svg [stroke="#E8BD69"], html[data-palette="navigator"] .brand svg [stroke="#B98A2E"]{stroke:var(--sys)}
html[data-palette="navigator"] header svg [fill="#49223F"], html[data-palette="navigator"] .brand svg [fill="#49223F"]{fill:var(--campaign)}
/* neon accent (--region): the wheel, progress, evidence bars, scores */
html[data-palette="navigator"] .progress, html[data-palette="navigator"] .goalbar{background:var(--line)}
html[data-palette="navigator"] .progress i, html[data-palette="navigator"] .goalbar i{background:var(--region)!important;box-shadow:0 0 10px var(--region)}
html[data-palette="navigator"] .bars i{background:var(--region)!important}
html[data-palette="navigator"] .wheel [fill="#E8BD69"]{fill:var(--region);fill-opacity:.28;filter:drop-shadow(0 0 6px var(--region))}
html[data-palette="navigator"] .wheel [stroke="#B98A2E"]{stroke:var(--region)}
html[data-palette="navigator"] .ladder span.on, html[data-palette="navigator"] td.s{color:var(--region);font-family:var(--nmono)}
html[data-palette="navigator"] a.cal{background:var(--panel);color:var(--region);border-color:var(--line-strong)}
html[data-palette="navigator"] .bgo .cells button.moderate{background:rgba(245,200,74,.14);border-color:var(--sys)}
html[data-palette="navigator"] .bgo .cells button.strong, html[data-palette="navigator"] .bgo .nums button.sel{background:var(--campaign);color:var(--ink);border-color:var(--campaign)}
html[data-palette="navigator"] .flag{color:#FF9A9A}
/* purple = the campaign: the ID card and the Founder ID head, with a fine neon rule */
html[data-palette="navigator"] body .idcard, html[data-palette="navigator"] .head{background:linear-gradient(160deg,var(--campaign),var(--campaign-deep));color:var(--ink);border:1px solid var(--region);box-shadow:0 0 0 1px rgba(0,0,0,.2), 0 0 22px -4px var(--region)}
html[data-palette="navigator"] body .idcard::after{background:
  radial-gradient(circle at 92% 8%, transparent 46px, var(--region) 47px, transparent 48px),
  repeating-linear-gradient(0deg, rgba(255,255,255,.05) 0 1px, transparent 1px 34px);opacity:.55}
html[data-palette="navigator"] body .idcard .scores b{color:var(--region);font-family:var(--nmono)}
html[data-palette="navigator"] body ::placeholder{color:var(--muted);opacity:1}
html[data-palette="navigator"] .tools button.go{font-size:12px}
/* phones: the mono labels keep the one-row layout of today's look */
@media (max-width:600px){
  html[data-palette="navigator"] .tools button, html[data-palette="navigator"] .tools button.go{font-size:11px;letter-spacing:.03em;padding:9px 11px}
  html[data-palette="navigator"] .badge{letter-spacing:.03em;font-size:11px}
}

/* ── Navigator 3 palette (preview, 28.10). Christiaan's third mail 28.10, after the v2 sheet: one BLUE element that
   connects everything and makes the purple stand out; keep the original Founder Index purple (investor-facing:
   character, style, reliability); three modes: dark purple = reflection (slow, desktop), dark blue with purple =
   action with the AI agent, bright label colours = campaign/engagement; the AI agent and the reports feel like a lab,
   a "tech kitchen", a nod to MS-DOS / C64 terminals; not a candy store; region accents stay; keep it simple.
   Opt-in only: ?theme=navigator3 sets <html data-palette="navigator3"> for this tab and data-mode from the page
   (look.js): "agent" on / and /coach, "reflect" everywhere else. v2 (?theme=navigator) is untouched.
   Roles: --blue = the one thread (primary buttons, active step, progress, links, focus, system labels, the AI's
   prompt, the ID card's frame); --fi = the Founder Index purple #49223F (ID card, Founder ID head, the founder's own
   answers); --label = the bright label (neon green, or the region accent) on small chips, the wheel and the scores
   only; --term = the AI's terminal screen. Every pair is AA, checked in test/palette-navigator3.test.mjs.
   Token and colour changes plus the terminal type for the AI, no layout or copy change. ── */
html[data-palette="navigator3"]:root, html[data-palette="navigator3"]:root:not([data-theme="x"]){
  --bg:#1C0B1A; --panel:#2A1428; --line:#43243F; --line-strong:#6A3E64; --field:#140812;
  --ink:#F5EFF4; --muted:#C9B5C6;
  --blue:#5C8DFF; --blue-ink:#0A1230;
  --fi:#49223F; --fi-deep:#2E1428; --me:#49223F;
  --label:#3DF5A0; --label-ink:#0B0A1E;
  --term:#060A1C; --term-ink:#CFE3FF;
  --bubble:#060A1C; --accent:#5C8DFF; --accent-ink:#0A1230; --good:#3DF5A0;
  --aubergine:#49223F; --aubergine-deep:#1C0B1A; --gold-light:#5C8DFF; --gold-deep:#5C8DFF; --gold:#5C8DFF;
  --parchment:#2A1428; --dark:#49223F; --signal:#3DF5A0;
  --tmono:"IBM Plex Mono","JetBrains Mono",ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  color-scheme:dark;
}
/* agent mode: the page turns dark blue, the purple stays */
html[data-palette="navigator3"][data-mode="agent"]:root{
  --bg:#0A1433; --panel:#13204A; --line:#24356E; --line-strong:#34509A; --field:#081029; --muted:#AFC0E6;
}
html[data-palette="navigator3"][data-region="africa"]:root{--label:#2EE8D4; --label-ink:#0B0A1E}
html[data-palette="navigator3"][data-region="pt"]:root{--label:#EDAE3B; --label-ink:#0B0A1E}
html[data-palette="navigator3"][data-region="eu"]:root{--label:#E77BFF; --label-ink:#0B0A1E}
/* the page: reflect = dark purple with the Founder Index purple glowing from above; agent = dark blue with the
   same purple glow; both with a fine blue chart grid, the blue thread under everything */
html[data-palette="navigator3"] body{
  color:var(--ink); background-color:var(--bg);
  background-image:
    radial-gradient(1100px 520px at 85% -220px, rgba(73,34,63,.95), transparent 70%),
    repeating-linear-gradient(0deg, rgba(92,141,255,.05) 0 1px, transparent 1px 48px),
    repeating-linear-gradient(90deg, rgba(92,141,255,.05) 0 1px, transparent 1px 48px);
}
html[data-palette="navigator3"][data-mode="agent"] body{
  background-image:
    radial-gradient(1000px 480px at 90% -200px, rgba(73,34,63,.85), transparent 70%),
    repeating-linear-gradient(0deg, rgba(92,141,255,.07) 0 1px, transparent 1px 48px),
    repeating-linear-gradient(90deg, rgba(92,141,255,.07) 0 1px, transparent 1px 48px);
}
html[data-palette="navigator3"] body h1, html[data-palette="navigator3"] body h2, html[data-palette="navigator3"] body h3{color:var(--ink)}
html[data-palette="navigator3"] body h1 em{color:var(--blue)}
html[data-palette="navigator3"] body .editorial{color:var(--muted)}
html[data-palette="navigator3"] a{color:var(--blue)}
html[data-palette="navigator3"] ::selection{background:var(--blue);color:var(--blue-ink)}
html[data-palette="navigator3"] body :focus-visible{outline:2px solid var(--blue);outline-offset:2px}
/* dark cards, thin borders */
html[data-palette="navigator3"] body .card, html[data-palette="navigator3"] body .sheet, html[data-palette="navigator3"] body .tile,
html[data-palette="navigator3"] body .panel, html[data-palette="navigator3"] body .f{background:var(--panel);border:1px solid var(--line-strong);box-shadow:none;color:var(--ink)}
html[data-palette="navigator3"] body button, html[data-palette="navigator3"] body .btn{background:var(--panel);color:var(--ink);border:1px solid var(--line-strong)}
html[data-palette="navigator3"] body button small{color:var(--muted)}
html[data-palette="navigator3"] body input:not([type=range]):not([type=checkbox]):not([type=radio]), html[data-palette="navigator3"] body textarea,
html[data-palette="navigator3"] body select, html[data-palette="navigator3"] .port code{background:var(--field);color:var(--ink);border-color:var(--line-strong)}
html[data-palette="navigator3"] body input[type=range], html[data-palette="navigator3"] .check input{accent-color:var(--blue)}
html[data-palette="navigator3"] body .dock{background:linear-gradient(rgba(10,20,51,0),var(--bg) 18%)}
html[data-palette="navigator3"] body ::placeholder{color:var(--muted);opacity:1}
/* the AI talks like a terminal: near-black screen, mono type, square corners, a blue > prompt, faint scanlines */
html[data-palette="navigator3"] body .msg:not(.me){font-family:var(--tmono);font-size:.9em;line-height:1.5;color:var(--term-ink);background-color:var(--term);background-image:repeating-linear-gradient(0deg, rgba(92,141,255,.06) 0 1px, transparent 1px 3px);border:1px solid rgba(92,141,255,.45);border-radius:3px;box-shadow:inset 3px 0 0 var(--blue), 0 0 18px -8px var(--blue)}
html[data-palette="navigator3"] body .msg:not(.me)::before{content:'> ';color:var(--blue);font-weight:700}
html[data-palette="navigator3"] body .msg:not(.me) b, html[data-palette="navigator3"] body .msg:not(.me) strong{color:#FFFFFF}
html[data-palette="navigator3"] body .msg.me{background:var(--me);color:var(--ink);border:1px solid var(--line-strong)}
html[data-palette="navigator3"] body .msg.me a{color:var(--label)}
html[data-palette="navigator3"] .typing i{background:var(--blue)!important;border-radius:0!important;opacity:1}
/* blue = the system: primary buttons, the active step, pressed toggles, system labels */
html[data-palette="navigator3"] body button.primary, html[data-palette="navigator3"] .tools button.go{background:var(--blue);color:var(--blue-ink);border:1px solid var(--blue);font-family:var(--tmono);text-transform:uppercase;letter-spacing:.08em;font-size:15px}
html[data-palette="navigator3"] body button.primary small{color:var(--blue-ink)}
html[data-palette="navigator3"] body button.sel, html[data-palette="navigator3"] body .chips button.sel, html[data-palette="navigator3"] body .days button.sel{background:rgba(92,141,255,.14);color:var(--ink);box-shadow:inset 0 0 0 2px var(--blue);outline:0}
html[data-palette="navigator3"] body [aria-pressed=true], html[data-palette="navigator3"] body .bar button.go{background:var(--blue)!important;color:var(--blue-ink)!important;border-color:var(--blue)!important}
html[data-palette="navigator3"] .voyage i{color:var(--muted);border-color:var(--line-strong);font-family:var(--tmono);letter-spacing:.14em}
html[data-palette="navigator3"] .voyage i.on{color:var(--blue)!important;border-color:var(--blue)!important}
html[data-palette="navigator3"] .kick, html[data-palette="navigator3"] body .sheet h2, html[data-palette="navigator3"] .team tr.gap td{color:var(--blue);font-family:var(--tmono);letter-spacing:.16em;text-transform:uppercase}
/* mono uppercase tracked micro-labels in the header */
html[data-palette="navigator3"] header b, html[data-palette="navigator3"] .brand{color:var(--ink);font-family:var(--tmono);letter-spacing:.24em}
html[data-palette="navigator3"] header span{color:var(--muted);font-family:var(--tmono);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase}
html[data-palette="navigator3"] .tools button{background:var(--panel);color:var(--ink);border-color:var(--line-strong);font-family:var(--tmono);text-transform:uppercase;letter-spacing:.08em;font-size:12px}
html[data-palette="navigator3"] .ftype, html[data-palette="navigator3"] .head .ftype{background:rgba(255,255,255,.08);color:var(--ink);border-color:var(--line-strong)}
html[data-palette="navigator3"] .ftype small{color:var(--muted)}
/* bright labels = campaign/engagement, small chips only, dark ink on the bright colour */
html[data-palette="navigator3"] .badge, html[data-palette="navigator3"] body .idcard .stage{background:var(--label);color:var(--label-ink);font-family:var(--tmono);text-transform:uppercase;letter-spacing:.1em}
html[data-palette="navigator3"] .tag{background:var(--label);border-color:var(--label)!important;color:var(--label-ink)!important;font-family:var(--tmono);text-transform:uppercase;letter-spacing:.08em}
/* progress and evidence in blue; the wheel and the scores in the label colour (the region, when one is set) */
html[data-palette="navigator3"] .progress, html[data-palette="navigator3"] .goalbar{background:var(--line)}
html[data-palette="navigator3"] .progress i, html[data-palette="navigator3"] .goalbar i{background:var(--blue)!important;box-shadow:0 0 10px var(--blue)}
html[data-palette="navigator3"] .bars i{background:var(--blue)!important}
html[data-palette="navigator3"] .wheel [fill="#E8BD69"]{fill:var(--label);fill-opacity:.3;filter:drop-shadow(0 0 5px var(--label))}
html[data-palette="navigator3"] .wheel [stroke="#B98A2E"]{stroke:var(--label)}
html[data-palette="navigator3"] .ladder span.on, html[data-palette="navigator3"] td.s{color:var(--label);font-family:var(--tmono)}
html[data-palette="navigator3"] a.cal{background:var(--panel);color:var(--blue);border-color:var(--line-strong)}
html[data-palette="navigator3"] .bgo .cells button.moderate{background:rgba(92,141,255,.16);border-color:var(--blue)}
html[data-palette="navigator3"] .bgo .cells button.strong, html[data-palette="navigator3"] .bgo .nums button.sel{background:var(--fi);color:var(--ink);border-color:var(--fi)}
html[data-palette="navigator3"] .flag{color:#FF9A9A}
/* the Founder Index purple, framed in the blue: the ID card and the Founder ID head */
html[data-palette="navigator3"] body .idcard, html[data-palette="navigator3"] .head{background:linear-gradient(160deg,var(--fi),var(--fi-deep));color:var(--ink);border:1px solid var(--blue);box-shadow:0 0 0 3px rgba(92,141,255,.16), 0 0 24px -6px var(--blue)}
html[data-palette="navigator3"] body .idcard::after{background:
  radial-gradient(circle at 92% 8%, transparent 46px, rgba(92,141,255,.55) 47px, transparent 48px),
  repeating-linear-gradient(0deg, rgba(255,255,255,.05) 0 1px, transparent 1px 34px);opacity:.55}
html[data-palette="navigator3"] body .idcard .scores b{color:var(--label);font-family:var(--tmono)}
html[data-palette="navigator3"] .tools button.go{font-size:12px}
/* phones: the mono labels keep the one-row layout */
@media (max-width:600px){
  html[data-palette="navigator3"] .tools button, html[data-palette="navigator3"] .tools button.go{font-size:11px;letter-spacing:.03em;padding:9px 11px}
  html[data-palette="navigator3"] .badge{letter-spacing:.03em;font-size:11px}
}