/* TranquilTech family layer (Pass 6c, October 2026).
   Loaded after each page's own <style> blocks, so it settles the shared parts: the reader
   choices, the themes (Night default, Day, Calm night, Calm day), motion, product colors
   and the footer. Values from the TranquilTech design system's tokens.json. */

/* ─── Calm's reading faces: declared here, downloaded only when Calm sets them on text ─── */
@font-face { font-family: "IBM Plex Sans"; src: url("/public/fonts/ibm-plex-sans-latin-wght-normal.woff2") format("woff2"); font-weight: 100 700; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("/public/fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
:root { --font-calm: "IBM Plex Sans", system-ui, sans-serif; --font-calm-mono: "IBM Plex Mono", ui-monospace, monospace; }

/* ─── Reader choices in the nav ─── */
.site-nav .nav-links { margin-left: auto; }
.rc { position: relative; flex: none; }
.rc-open { font: 600 13px/1 var(--font-sans); color: var(--ink-2); background: transparent; border: 1px solid var(--control-edge); border-radius: var(--r-pill, 99px); padding: 8px 13px; min-height: 34px; cursor: pointer; white-space: nowrap; transition: color .15s, border-color .15s, background .15s; }
.rc-open:hover, .rc-open[aria-expanded="true"] { color: var(--ink); border-color: var(--moss); background: var(--bg-surface); }
.rc-panel { position: absolute; top: calc(100% + 13px); right: 0; z-index: 120; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; width: max-content; max-width: calc(100vw - 32px); padding: 14px; background: var(--bg); border: 1px solid var(--line); box-shadow: var(--shadow-lg); }
.rc-panel[hidden] { display: none; }
.rc-seg { display: inline-flex; border: 1px solid var(--control-edge); border-radius: 99px; padding: 3px; gap: 3px; }
.rc-seg button { font: 600 13px/1 var(--font-sans); color: var(--ink-2); background: none; border: 0; border-radius: 99px; padding: 8px 14px; min-height: 32px; cursor: pointer; }
.rc-seg button[aria-pressed="true"] { background: var(--moss-3); color: var(--ink); }
.rc-toggle { display: inline-flex; align-items: center; gap: 10px; font: 600 13px/1 var(--font-sans); color: var(--ink-2); background: none; border: 1px solid var(--control-edge); border-radius: 99px; padding: 8px 14px 8px 10px; min-height: 40px; cursor: pointer; white-space: nowrap; }
.rc-toggle .sw { width: 28px; height: 16px; border-radius: 99px; border: 1px solid var(--control-edge); position: relative; flex: none; }
.rc-toggle .sw::after { content: ""; position: absolute; top: 2px; left: 2px; width: 10px; height: 10px; border-radius: 50%; background: var(--ink-3); }
.rc-toggle[aria-pressed="true"] { color: var(--ink); border-color: var(--moss); }
.rc-toggle[aria-pressed="true"] .sw { background: var(--moss-3); border-color: var(--moss); }
.rc-toggle[aria-pressed="true"] .sw::after { left: 14px; background: var(--ink); }
.rc-seg button:hover, .rc-toggle:hover { color: var(--ink); }
/* Up to 880px the links fold into the menu and the Display button sits beside it: in one row they need 851px.
   The menu drops below the bar on every page (some pages' own styles set .nav-links to relative). */
@media (max-width: 880px) {
  .site-nav .container { gap: 12px; }
  .rc { order: 2; margin-left: auto; }
  .nav-toggle-label { order: 3; }
  .site-nav .nav-links { position: absolute; }
  .nav-ind { display: none; }
  /* the menu's checkbox stays reachable from the keyboard (Space opens and closes it); the ring shows on its bars */
  .site-nav .nav-toggle { display: block; position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; }
  .nav-toggle:focus-visible ~ .nav-toggle-label { outline: 2px solid var(--moss); outline-offset: 3px; border-radius: 4px; }
}
@media (max-width: 720px) {
  .rc-panel { position: fixed; top: 60px; left: 16px; right: 16px; width: auto; max-width: none; }
}

/* ─── Readable letters: every face in Atkinson Hyperlegible Next, at its own spacing ─── */
html[data-letters="readable"] body, html[data-letters="readable"] body * { font-family: var(--font-sans) !important; }
html[data-letters="readable"] :is(h1, h2, h3, h4, .nd b, .amt, .tot b) { letter-spacing: 0 !important; }

/* ─── Calm: reading text in IBM Plex Sans (Plex Mono where the site sets mono); headings keep Fraunces.
       Readable letters wins the text when both are on. ─── */
html[data-calm="on"]:not([data-letters="readable"]) { --font-mono: var(--font-calm-mono); }
html[data-calm="on"]:not([data-letters="readable"]) :is(p, li, dd, .lead, .hero-sub, .t-detail, .body, .tot span, .ans, .facts div):not(.t-label, .section-label, .hero-eyebrow, .amt, .rn, .a) { font-family: var(--font-calm); }

/* ─── Control edges at 3:1 (#646b67 in Night): the demo controls set in each page's own styles ─── */
.hs button.alt, .qs button { border-color: var(--control-edge); }
.qs button:hover, .qs button.on { border-color: var(--moss); }
.pane .lbl button { border-color: var(--moss-2); }

/* ─── Motion. Motion off, Calm, or the device's reduce-motion setting (which always wins):
       every loop stops on a still frame and transitions stop. The live dot and the RootSignal ring
       keep moving otherwise; the transcript cursor blinks five times, then holds (page styles);
       the metro map traces once and holds (page script). The Kindling ember canvas is unchanged and
       never runs while still. ─── */
html[data-motion="off"], html[data-calm="on"] { scroll-behavior: auto; }
html[data-motion="off"] *, html[data-motion="off"] *::before, html[data-motion="off"] *::after,
html[data-calm="on"] *, html[data-calm="on"] *::before, html[data-calm="on"] *::after { animation: none !important; transition: none !important; }
html[data-motion="off"] .ember-canvas, html[data-calm="on"] .ember-canvas { visibility: hidden; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ─── Products in their own colors: a dot beside each name in the footer list (names stay in ink) ─── */
.flinks a { justify-content: flex-start; }
.flinks a .pill { margin-left: auto; }
.flinks a::before { content: ""; flex: none; align-self: center; width: 7px; height: 7px; border-radius: 50%; background: var(--pc, transparent); margin-right: -3px; }
.flinks a[href*="attuned.you"] { --pc: var(--prod-attuned); }
.flinks a[href*="jobgenie.help"] { --pc: var(--prod-jobgenie); }
.flinks a[href*="skool.com"] { --pc: var(--prod-neurospicy); }
.flinks a[href*="innerworkings.space"] { --pc: var(--prod-innerworkings); }
.flinks a[href*="wick.help"] { --pc: var(--prod-wick); }
.flinks a[href*="lamplighter.help"] { --pc: var(--prod-lamplighter); }
.flinks a[href$="/mycelial"] { --pc: var(--prod-mycelial); }
.flinks a[href$="/kindling"], .flinks a[href*="kindling.foundation"] { --pc: var(--prod-kindling); }

/* ─── One focus radius (4px) for links and focusable rooms; controls keep their own shape ─── */
:focus-visible, a:focus-visible, button:focus-visible, [tabindex]:focus-visible { border-radius: 4px; }
.btn:focus-visible { border-radius: var(--r); }
.rc-open:focus-visible, .rc-toggle:focus-visible, .rc-seg button:focus-visible, .qs button:focus-visible, .hs button:focus-visible,
.pane .lbl button:focus-visible, .sig button:focus-visible { border-radius: 99px; }

/* ─── Calm night: the family Calm rule on Night (text eased to about 9.5:1, accents at half chroma,
       ground lifted a few steps, edges and focus at 3:1). Values from tokens.json; measured on the pages. ─── */
:root[data-calm="on"] {
  --bg: #131816; --bg-1: #161b19; --bg-2: #1a201d; --bg-surface: #1f2623;
  --line: #2a3330; --line-soft: #232b28; --control-edge: #6d7470;
  --ink: #bdc0bc; --ink-2: #95a199; --ink-3: #7e8f86; --ink-4: #7e8f86; --ink-mute: #7e8f86; --ink-map: #7e8f86;
  --moss: #7d9484; --moss-2: #5c6f62; --moss-3: #3a4c41; --moss-light: #8fa596;
  --moss-glow: rgba(124, 146, 131, 0.12); --moss-border: rgba(124, 146, 131, 0.25);
  --ember: #b29a84; --ember-soft: rgba(178, 154, 132, 0.10); --ember-border: rgba(178, 154, 132, 0.30); --lantern: #a08c78;
  --door-hover: rgba(111, 156, 126, .04); --leaf-sheen: rgba(255, 255, 255, .02);
  --nav-solid: rgba(19, 24, 22, 0.96); --nav-glass: rgba(19, 24, 22, 0.86);
  --glow-1: #1b231f; --glow-2: #171d1a;
  --cv-moss: 124,146,131; --cv-moss-light: 143,165,150; --cv-ember: 178,154,132; --cv-lantern: 160,140,120;
}
/* Calm halves the map's moss glow along with the accents */
html[data-calm="on"] .net .veil { opacity: .5; }

/* ─── Day (built last): a near-white page; the nav and the home hero with its metro map stay on the
       night ground (the night band). Calm day is Day with Calm: its band takes Calm night.
       The site still opens in Night. ─── */
:root[data-theme="day"] {
  --bg: #efefec; --bg-1: #f7f7f5; --bg-2: #ecece8; --bg-surface: #ecece8;
  --line: #dcdcd6; --line-soft: #e8e8e3; --control-edge: #767d76;
  --ink: #1b211e; --ink-2: #3a443e; --ink-3: #55605a; --ink-4: #55605a; --ink-mute: #55605a; --ink-map: #55605a;
  --moss: #33583f; --moss-2: #2b4b36; --moss-3: #3a6049; --moss-light: #4d7a5f;
  --moss-glow: rgba(58, 96, 73, 0.10); --moss-border: rgba(58, 96, 73, 0.30);
  --ember: #89591b; --ember-soft: rgba(138, 90, 28, 0.10); --ember-border: rgba(138, 90, 28, 0.35); --lantern: #7d521a;
  --door-hover: rgba(58, 96, 73, 0.05); --leaf-sheen: rgba(0, 0, 0, 0.02);
  --glow-1: transparent; --glow-2: transparent;
  --shadow-lg: 0 12px 40px rgba(27, 33, 30, 0.10), 0 4px 12px rgba(27, 33, 30, 0.06);
  --on-moss: #f7f7f5;  /* a light label on moss-3 */
}
:root[data-theme="day"][data-calm="on"] {
  --bg: #e4e7e3; --bg-1: #eceeeb; --bg-2: #e1e5e1; --bg-surface: #e1e5e1;
  --line: #cfd5d0; --line-soft: #dadfdb; --control-edge: #7e847d;
  --ink: #363d3a; --ink-2: #4c5650; --ink-3: #5e6662; --ink-4: #5e6662; --ink-mute: #5e6662; --ink-map: #5e6662;
  --moss: #506255; --moss-2: #45564a; --moss-3: #516357; --moss-light: #66796b;
  --moss-glow: rgba(81, 99, 86, 0.10); --moss-border: rgba(81, 99, 86, 0.30);
  --ember: #715a40; --ember-soft: rgba(121, 97, 71, 0.10); --ember-border: rgba(121, 97, 71, 0.35); --lantern: #6f5a43;
  --door-hover: rgba(58, 96, 73, 0.05); --leaf-sheen: rgba(0, 0, 0, 0.02);
  --on-moss: #eceeeb;
}
/* the night band: Night's values (Calm night's in Calm day) */
:root[data-theme="day"] :is(.site-nav, main > .hero) {
  --bg: #0a0f0d; --bg-1: #0e1311; --bg-2: #121918; --bg-surface: #1a201d; --line: #222b27; --line-soft: #1c2420; --control-edge: #646b67;
  --ink: #eaede9; --ink-2: #b8c4bc; --ink-3: #7a8f84; --ink-4: #728a7e; --ink-mute: #7a8f84; --ink-map: #7e9388;
  --moss: #6f9c7e; --moss-2: #4d7a5f; --moss-3: #3a6049; --moss-light: #8fbd9e;
  --moss-glow: rgba(111, 156, 126, 0.15); --moss-border: rgba(111, 156, 126, 0.25);
  --ember: #d4a373; --ember-soft: rgba(212, 163, 115, 0.12); --ember-border: rgba(212, 163, 115, 0.3); --lantern: #b08a64;
  --glow-1: #182820; --glow-2: #121c18; --on-moss: #eaede9;
  --shadow-lg: 0 12px 40px rgba(0,0,0,0.6), 0 4px 12px rgba(0,0,0,0.4);
  --cv-moss: 111,156,126; --cv-moss-light: 143,189,158; --cv-ember: 212,163,115; --cv-lantern: 176,138,100;
  color: var(--ink);
}
:root[data-theme="day"][data-calm="on"] :is(.site-nav, main > .hero) {
  --bg: #131816; --bg-1: #161b19; --bg-2: #1a201d; --bg-surface: #1f2623; --line: #2a3330; --line-soft: #232b28; --control-edge: #6d7470;
  --ink: #bdc0bc; --ink-2: #95a199; --ink-3: #7e8f86; --ink-4: #7e8f86; --ink-mute: #7e8f86; --ink-map: #7e8f86;
  --moss: #7d9484; --moss-2: #5c6f62; --moss-3: #3a4c41; --moss-light: #8fa596;
  --moss-glow: rgba(124, 146, 131, 0.12); --moss-border: rgba(124, 146, 131, 0.25);
  --ember: #b29a84; --ember-soft: rgba(178, 154, 132, 0.10); --ember-border: rgba(178, 154, 132, 0.30); --lantern: #a08c78;
  --glow-1: #1b231f; --glow-2: #171d1a; --on-moss: #bdc0bc;
  --nav-solid: rgba(19, 24, 22, 0.96); --nav-glass: rgba(19, 24, 22, 0.86);
  --cv-moss: 124,146,131; --cv-moss-light: 143,165,150; --cv-ember: 178,154,132; --cv-lantern: 160,140,120;
}
/* the hero carries its own night ground and the atmosphere the page body gives it in Night */
:root[data-theme="day"] main > .hero {
  background: radial-gradient(ellipse 80% 60% at 75% -5%, var(--glow-1) 0%, transparent 60%), var(--bg-1);
  border-bottom-color: var(--line-soft);
}
/* on the light page a moss-3 fill takes a light label; inside the band it keeps ink */
:root[data-theme="day"] :is(.btn-primary, .btn-primary:hover, .hs button:not(.alt), .rc-seg button[aria-pressed="true"]) { color: var(--on-moss); }
/* product dots on a light ground keep Night's product colors as fills, with a 1.5px ink ring carrying 3:1 */
:root[data-theme="day"] .flinks a::before { box-shadow: 0 0 0 1.5px var(--ink); }
/* map stations in Day: the product color as a fill, ringed in the band's ink */
:root[data-theme="day"] .nd[style*="--pc"] i,
:root[data-theme="day"] .nd[style*="--pc"]:is(:hover, :focus-visible, .on) i { background: var(--pc); border: 1.5px solid var(--ink); }
/* over a light page the nav's glass turned gray (ink-3 links read 2.96:1): in Day the nav is solid night */
:root[data-theme="day"] .site-nav { background: var(--bg); -webkit-backdrop-filter: none; backdrop-filter: none; }
@media (max-width: 880px) { :root[data-theme="day"] .nav-links { background: var(--bg); } }