/* LUMINA Temple palette, read from the Codex site's own tokens rather than
   approximated, so the two read as one product.

   The theme is light and warm. An earlier build of this app was dark; it was
   rebuilt when the public site was redesigned.

   The meaning carried by color is unchanged and should not be decorated away:
   WATER BLUE is always a measured result, GOLD is always the traditional
   framework, and AQUA marks the parts of a panel you can act on. */
:root {
  /* Surfaces */
  --paper: #FAF8F3;        /* page */
  --paper-2: #F4F0E7;
  --card: #FFFDF8;         /* panels */
  --cream: #F7F2E4;
  --linen: #EFEADC;
  --surface: #FFFFFF;      /* data sits on white, which the zone palette is validated against */

  /* Ink */
  --ink: #1F2F2D;          /* headings */
  --gray: #4C5A57;         /* body */
  --gray-dk: #5F6C68;      /* secondary */

  /* Gold - the traditional framework */
  --gold: #C6A24F;
  --gold-dk: #7A5C18;
  --gold-deep: #6A4F12;
  --gold-lt: #E3CB8A;
  --gold-pale: #F6EBCE;

  /* Water - measured results */
  --water: #2F6980;
  --water-dk: #24566C;
  --water-mid: #3E7F99;
  --water-pale: #E9F2F6;

  /* Aqua - interactive surfaces */
  --aqua: #2C7A74;
  --aqua-dk: #1F5F5A;
  --aqua-lt: #96D2CA;
  --aqua-pale: #E7F3F0;

  --terra: #9E5346;
  --terra-pale: #F6E7E1;

  --line: rgba(31, 47, 45, 0.11);
  --line-gold: rgba(198, 162, 79, 0.34);
  --line-gold-soft: rgba(198, 162, 79, 0.26);
  --line-aqua: rgba(44, 122, 116, 0.24);
  --line-water: rgba(47, 105, 128, 0.24);

  --sh: 0 8px 30px rgba(31, 47, 45, 0.055);
  --sh-l: 0 18px 54px rgba(31, 47, 45, 0.10);

  /* The Codex box language: hairline borders and a generous radius scale. */
  --hair: 0.8px;
  --r-xl: 40px;
  --r-lg: 32px;   /* panels */
  --r-md: 16px;   /* cards, chart surfaces */
  --r-sm: 12px;   /* inputs, buttons */
  --r-pill: 9999px;

  --display: 'Marcellus', 'Palatino Linotype', Palatino, Georgia, serif;
  --body: 'DM Sans', system-ui, -apple-system, sans-serif;
  --mono: 'DM Mono', ui-monospace, SFMono-Regular, monospace;
  --verse: 'EB Garamond', Georgia, 'Times New Roman', serif;

  /* Semantic aliases, so markup does not have to know which hue is which. */
  --measured: var(--water);
  --symbolic: var(--gold);
  --library: var(--gold-dk);
  --danger: var(--terra);
  --ok: var(--aqua-dk);

  /* Interactive surfaces carry an aqua wash, so what you can act on is
     distinguishable from what only reports. */
  --control: var(--aqua-pale);
  --control-raised: #DDEEEA;
  --control-hover: #D2E8E3;
  --control-line: var(--line-aqua);
  --control-line-strong: rgba(44, 122, 116, 0.46);
}

* { box-sizing: border-box; }
body {
  margin: 0; background: var(--paper); color: var(--gray);
  font-family: var(--body);
  line-height: 1.65; -webkit-font-smoothing: antialiased;
}
.wrap { max-width: 1040px; margin: 0 auto; padding: 32px 16px 96px; }
h1, h2, h3 {
  font-family: var(--display); font-weight: 400; color: var(--ink);
  letter-spacing: .004em; line-height: 1.2;
}
h1 { font-size: 42px; margin: 0 0 10px; }
h2 { font-size: 28px; margin: 0 0 8px; }
h3 { font-size: 22px; margin: 0 0 6px; }
a { color: var(--water); text-underline-offset: 3px; }
.mono { font-family: var(--mono); }
.sub { color: var(--gray); font-size: 16px; max-width: 68ch; }
.hidden { display: none !important; }

/* ---------- top bar ---------- */
.topbar {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding-bottom: 18px; margin-bottom: 28px; border-bottom: var(--hair) solid var(--line);
}
.brand {
  font-family: var(--display); font-weight: 400; font-size: 22px; color: var(--ink);
  display: flex; align-items: center; gap: 11px; letter-spacing: .01em;
}
.brand .mark { width: 30px; height: 30px; flex-shrink: 0; display: block; }
.brand-stack { text-align: center; margin-bottom: 26px; }
.brand-stack .mark-lg { width: 96px; height: 96px; display: block; margin: 0 auto 14px; }
.brand-stack .brand-name { font-family: var(--display); font-weight: 400; font-size: 30px; color: var(--ink); }
.brand-stack .brand-sub {
  display: block; text-decoration: none;
  font-family: var(--body); font-size: 11px; font-weight: 500;
  letter-spacing: .15em; text-transform: uppercase; color: var(--gold-dk); margin-top: 7px;
}
a.brand-sub:hover { color: var(--gold-deep); text-decoration: underline; text-underline-offset: 4px; }

/* The way in for someone still deciding. Deliberately NOT the primary's aqua -
   two identical filled pills on one card read as one action duplicated. This
   takes --water-mid, the lightest blue in the palette, over a short gradient
   into --water so the label keeps its contrast at the pale end. */
.brand-stack .brand-cta {
  display: inline-block; margin-top: 18px;
  background: linear-gradient(135deg, var(--water-mid) 0%, var(--water) 100%);
  color: #FFFFFF; text-decoration: none;
  font-family: var(--body); font-size: 13.5px; font-weight: 600; letter-spacing: .01em;
  padding: 11px 22px; border-radius: var(--r-pill);
  box-shadow: 0 5px 18px rgba(47, 105, 128, .26);
  transition: box-shadow .3s, transform .3s, filter .3s;
}
.brand-stack .brand-cta:hover {
  filter: brightness(1.06);
  box-shadow: 0 12px 30px rgba(47, 105, 128, .34); transform: translateY(-2px);
}
.topbar .spacer { flex: 1; }
.who { font-size: 13px; color: var(--gray); }
.who strong { color: var(--ink); font-weight: 500; }
.pill {
  font-family: var(--body); font-size: 10px; font-weight: 500;
  letter-spacing: .12em; text-transform: uppercase;
  padding: 4px 11px; border-radius: var(--r-pill);
  background: var(--water-pale); color: var(--water-dk); border: var(--hair) solid var(--line-water);
}
.pill.gold { background: var(--gold-pale); color: var(--gold-deep); border-color: var(--line-gold); }

/* ---------- navigation ---------- */
.mainnav { display: flex; gap: 4px; margin-left: 16px; flex-wrap: wrap; }
.navbtn {
  font-size: 14px; font-weight: 500; padding: 8px 16px;
  background: transparent; border: var(--hair) solid transparent; color: var(--gray);
  border-radius: var(--r-pill);
}
.navbtn:hover:not(:disabled) { background: var(--aqua-pale); color: var(--aqua-dk); border-color: var(--line-aqua); }
.navbtn.on { background: var(--gold-pale); color: var(--gold-deep); border-color: var(--line-gold); }

.whobtn {
  display: flex; align-items: center; gap: 10px; padding: 5px 14px 5px 5px;
  background: var(--card); border: var(--hair) solid var(--line); border-radius: var(--r-pill);
}
.whobtn:hover { border-color: var(--line-gold); background: var(--gold-pale); }

/* ---------- buttons & fields ---------- */
button {
  font-family: var(--body); font-size: 14px; font-weight: 500;
  border: var(--hair) solid var(--line-aqua); background: var(--aqua-pale); color: var(--aqua-dk);
  padding: 10px 18px; border-radius: var(--r-pill); cursor: pointer;
  transition: border-color .15s, background .15s, color .15s, opacity .15s;
}
button:hover:not(:disabled) { background: var(--control-hover); border-color: var(--control-line-strong); }
button:disabled { opacity: .4; cursor: default; }
button.primary {
  background: var(--aqua); color: var(--card); border-color: var(--aqua);
  box-shadow: 0 4px 16px rgba(47, 128, 122, .18);
}
button.primary:hover:not(:disabled) { background: var(--aqua-dk); border-color: var(--aqua-dk); }
button.gold { background: var(--gold-pale); color: var(--gold-deep); border-color: var(--line-gold); }
button.gold:hover:not(:disabled) { background: var(--gold-lt); border-color: var(--gold); }
button.rec { background: var(--terra-pale); color: var(--terra); border-color: var(--terra); }
button.ghost { background: transparent; border-color: var(--line); color: var(--gray); }
button.ghost:hover:not(:disabled) { background: var(--aqua-pale); border-color: var(--line-aqua); color: var(--aqua-dk); }
button.tiny { font-size: 12px; padding: 6px 13px; }
button.link { background: none; border: none; color: var(--water); padding: 0; text-decoration: underline; }

.field { margin-bottom: 18px; }
.field label {
  display: block; font-family: var(--body);
  font-size: 11px; font-weight: 500; color: var(--gray-dk);
  margin-bottom: 8px; text-transform: uppercase; letter-spacing: .14em;
}
.field input, .field textarea, .field select {
  width: 100%; font-family: var(--body); font-size: 15px; padding: 12px 14px;
  border: var(--hair) solid var(--line-aqua); border-radius: var(--r-sm);
  background: var(--card); color: var(--ink);
  transition: background .15s, border-color .15s, box-shadow .15s;
}
.field input:hover, .field textarea:hover, .field select:hover { border-color: var(--control-line-strong); }
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none; border-color: var(--aqua); background: var(--card);
  box-shadow: 0 0 0 3px rgba(44, 122, 116, 0.12);
}
.field input::placeholder, .field textarea::placeholder { color: rgba(76, 90, 87, .5); }
.field textarea { resize: vertical; min-height: 72px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 620px) { .field-row { grid-template-columns: 1fr; } }
.check {
  display: flex; gap: 11px; align-items: flex-start; font-size: 14px; margin-bottom: 18px;
  color: var(--gray); background: var(--aqua-pale); border: var(--hair) solid var(--line-aqua);
  border-radius: var(--r-md); padding: 14px 16px;
}
.check input { margin-top: 4px; flex-shrink: 0; accent-color: var(--aqua); }

/* ---------- panels ---------- */
section.panel {
  margin-top: 26px; padding: 32px; background: var(--card);
  border: var(--hair) solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh);
}
.panel-label {
  font-family: var(--body); font-size: 11px; font-weight: 500; letter-spacing: .15em;
  text-transform: uppercase; margin-bottom: 10px;
}
.panel.measured { border-color: var(--line-water); }
.panel.measured .panel-label { color: var(--water); }
.panel.symbolic { border-color: var(--line-gold); background: var(--cream); }
.panel.symbolic .panel-label { color: var(--gold-dk); }
.panel.library { border-color: var(--line-gold-soft); }
.panel.library .panel-label { color: var(--gold-dk); }
.panel .desc { color: var(--gray); font-size: 14.5px; margin-bottom: 20px; max-width: 68ch; }

.note {
  margin-top: 18px; padding: 15px 18px; border-radius: var(--r-md);
  font-size: 13.5px; color: var(--gray); line-height: 1.65;
}
.note.blue { background: var(--water-pale); border: var(--hair) solid var(--line-water); }
.note.gold { background: var(--gold-pale); border: var(--hair) solid var(--line-gold); }
.note.warn { background: var(--gold-pale); color: var(--gold-deep); border: var(--hair) solid var(--gold); }

/* ---------- chart surface: data sits on white ---------- */
.chart-surface {
  background: var(--surface); color: var(--ink);
  border: var(--hair) solid var(--line); border-radius: var(--r-md);
  padding: 22px; margin-top: 6px;
}
.chart-surface .meta, .chart-surface .zhz, .chart-surface .tl-axis, .chart-surface .legend { color: var(--gray-dk); }
.chart-surface .track { background: var(--linen); }
.chart-surface .compare-row { border-bottom-color: var(--line); }
.chart-surface table.data th { color: var(--gray-dk); border-bottom-color: var(--line); }
.chart-surface table.data td { border-bottom-color: var(--line); }
.chart-surface button { background: var(--aqua-pale); color: var(--aqua-dk); border-color: var(--line-aqua); }
.chart-surface button:hover:not(:disabled) { background: var(--control-hover); }
.chart-surface button.rec { background: var(--terra-pale); color: var(--terra); border-color: var(--terra); }
.chart-surface input[type=checkbox] { accent-color: var(--aqua); }

/* ---------- capture ---------- */
.capture-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 620px) { .capture-row { grid-template-columns: 1fr; } }
.capture-box {
  border: var(--hair) dashed var(--line-aqua); border-radius: var(--r-md);
  padding: 28px 20px; text-align: center; background: var(--aqua-pale);
  transition: border-color .15s, background .15s;
}
.capture-box p { margin: 0 0 14px; color: var(--aqua-dk); font-size: 14px; }
.capture-box.drop { cursor: pointer; }
.capture-box.drop:hover, .capture-box.drop.drag { border-color: var(--aqua); background: var(--control-hover); }
input[type=file] { display: none; }
.rec-dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--terra);
  display: inline-block; margin-right: 8px; animation: pulse 1.1s infinite;
}
@keyframes pulse { 0%,100% { opacity: 1 } 50% { opacity: .25 } }
.rec-time { font-family: var(--mono); font-size: 13px; color: var(--gray-dk); margin-top: 10px; }

.progress { height: 4px; background: var(--linen); border-radius: var(--r-pill); overflow: hidden; margin-top: 18px; }
.progress .bar { height: 100%; width: 0; background: var(--aqua); transition: width .12s linear; }
.status { font-size: 13.5px; color: var(--gray-dk); margin-top: 12px; min-height: 18px; }
.status.err { color: var(--terra); }
.status.ok { color: var(--aqua-dk); }

/* ---------- playback ---------- */
.player {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  margin-top: 18px; padding: 16px 18px;
  background: var(--aqua-pale); border: var(--hair) solid var(--line-aqua); border-radius: var(--r-md);
}
.player .pname { flex: 1; min-width: 130px; font-family: var(--mono); font-size: 12px; color: var(--aqua-dk); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.player .ptime { font-family: var(--mono); font-size: 12.5px; color: var(--aqua-dk); min-width: 96px; text-align: right; }
/* The rail is 4px because that is all it needs to read as a line, but the
   track around it is 18px so there is something to actually grab - a 3px
   target is a miss on a trackpad and hopeless on a phone. */
.player-scrub {
  position: relative; width: 100%; height: 18px; display: flex; align-items: center;
  cursor: pointer; touch-action: none;
}
.scrub-rail {
  width: 100%; height: 4px; background: rgba(44, 122, 116, .18);
  border-radius: var(--r-pill); overflow: hidden;
}
.scrub-rail .bar { height: 100%; width: 0; background: var(--gold); }
.scrub-knob {
  position: absolute; left: 0; top: 50%; width: 13px; height: 13px;
  margin-top: -6.5px; margin-left: -6.5px; border-radius: 50%;
  background: var(--gold); border: 2px solid var(--surface);
  box-shadow: 0 1px 4px rgba(31, 47, 45, .32); pointer-events: none;
}
.player-scrub:hover .scrub-knob { transform: scale(1.15); }
.player-scrub:focus-visible { outline: 2px solid var(--aqua); outline-offset: 4px; border-radius: var(--r-pill); }

/* ---------- "how to read this" ---------- */
/* Aqua, not gold: in this app gold means the traditional framework and aqua
   means something you can act on. This is a control, so it is aqua - tinting
   it gold would make a help toggle look like a claim. */
.ref {
  margin: 14px 0 4px; border: var(--hair) solid var(--line-aqua);
  border-radius: var(--r-sm); background: var(--aqua-pale);
}
.ref > summary {
  cursor: pointer; list-style: none; padding: 11px 14px;
  font-family: var(--body); font-size: 13px; font-weight: 600;
  letter-spacing: .01em; color: var(--aqua-dk);
  display: flex; align-items: center; gap: 9px;
}
.ref > summary::-webkit-details-marker { display: none; }
.ref-bulb { width: 17px; height: 17px; flex-shrink: 0; }
/* The bulb brightens on hover and while open, which is the whole joke. */
.ref > summary:hover .ref-bulb, .ref[open] > summary .ref-bulb { color: var(--gold-dk); }
.ref > summary::after {
  content: ''; margin-left: auto; width: 7px; height: 7px; flex-shrink: 0;
  border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px); transition: transform .2s;
}
.ref[open] > summary::after { transform: rotate(225deg) translate(-2px, -2px); }
.ref > summary:hover { color: var(--aqua); }
.ref-body { padding: 2px 16px 14px; background: var(--surface);
  border-radius: 0 0 var(--r-sm) var(--r-sm); padding-top: 14px; font-size: 14px; line-height: 1.7; color: var(--gray); }
.ref-body .gd-what { margin: 0 0 10px; color: var(--ink); }
.ref-body .gd-read { margin: 0 0 12px; padding-left: 18px; }
.ref-body .gd-read li { margin-bottom: 7px; }
.ref-body .gd-not {
  margin: 0; padding: 10px 12px; border-radius: var(--r-sm);
  background: var(--terra-pale); color: #7E3F35; font-size: 13.5px;
}
.ref-more { margin: 12px 0 0; font-size: 13px; }

/* ---------- the guide page ---------- */
.gd-hero { margin-bottom: 10px; }
.gd-eyebrow {
  font-family: var(--body); font-size: 11px; font-weight: 500;
  letter-spacing: .18em; text-transform: uppercase; color: var(--gold-dk); margin-bottom: 12px;
}
.gd-intro {
  font-family: var(--verse); font-size: 19px; line-height: 1.62; color: var(--ink);
  padding: 22px 26px; border-radius: 28px; margin-bottom: 8px;
  background: linear-gradient(135deg, var(--gold-pale) 0%, var(--aqua-pale) 100%);
  border: var(--hair) solid var(--line-gold);
}
.gd-intro p { margin: 0 0 12px; }
.gd-intro p:last-child { margin-bottom: 0; }

.gd-sec { padding: 40px 0 4px; scroll-margin-top: 20px; }
.gd-kind {
  font-family: var(--body); font-size: 10.5px; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase; margin-bottom: 10px;
}
.gd-kind-measured { color: var(--water-dk); }
.gd-kind-traditional { color: var(--gold-dk); }
.gd-kind-library { color: var(--aqua-dk); }
.gd-head {
  font-family: var(--display); font-weight: 400; font-size: 29px; line-height: 1.24;
  color: var(--ink); margin: 0 0 16px;
}
.gd-body {
  background: var(--surface); border: var(--hair) solid var(--line);
  border-radius: 28px; padding: 24px 28px; box-shadow: var(--sh-card);
  font-size: 16px; line-height: 1.75; color: var(--gray);
}
.gd-body .gd-what { margin: 0 0 14px; font-size: 17px; color: var(--ink); }
.gd-body .gd-read { margin: 0 0 16px; padding-left: 20px; }
.gd-body .gd-read li { margin-bottom: 9px; }
.gd-body .gd-not {
  margin: 0; padding: 14px 16px; border-radius: var(--r-md);
  background: var(--terra-pale); color: #7E3F35;
}
.gd-foot { margin-top: 54px; font-size: 16px; line-height: 1.75; color: var(--gray); }
.gd-back { font-weight: 600; }

/* ---------- zone bars ---------- */
.zonebar { display: grid; grid-template-columns: 118px 1fr 58px; align-items: center; gap: 12px; padding: 6px 0; }
.zname { font-size: 14px; font-weight: 500; display: flex; align-items: center; gap: 8px; color: var(--ink); }
.zhz { font-family: var(--mono); font-size: 10.5px; margin-left: 17px; }
.zdot { width: 9px; height: 9px; border-radius: var(--r-pill); flex-shrink: 0; }
.track { height: 16px; background: var(--linen); border-radius: var(--r-pill); overflow: hidden; }
.fill { height: 100%; border-radius: var(--r-pill); transition: width .5s cubic-bezier(.2,.8,.2,1); }
.pct { font-family: var(--mono); font-size: 12.5px; text-align: right; color: var(--ink); }

.compare-row { display: grid; grid-template-columns: 118px 1fr; align-items: center; gap: 12px; padding: 8px 0; border-bottom: var(--hair) solid var(--line); }
.compare-row:last-child { border-bottom: none; }
.compare-tracks { display: flex; flex-direction: column; gap: 5px; }
.compare-track { display: grid; grid-template-columns: 1fr 46px 50px; align-items: center; gap: 9px; }
.compare-track .track { height: 11px; }
.compare-track .pct { font-size: 11px; }
.compare-track .tag { font-size: 10px; font-family: var(--mono); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.legend { display: flex; gap: 16px; margin-bottom: 14px; font-size: 12.5px; flex-wrap: wrap; color: var(--gray-dk); }
.legend span { display: inline-flex; align-items: center; gap: 7px; }
.swatch { width: 10px; height: 10px; border-radius: var(--r-pill); display: inline-block; flex-shrink: 0; }

/* ---------- timeline ---------- */
.tl-wrap { position: relative; }
#timelineCanvas { width: 100%; height: 200px; border-radius: var(--r-sm); display: block; cursor: crosshair; }
.tl-axis { display: flex; justify-content: space-between; font-family: var(--mono); font-size: 10.5px; margin-top: 7px; }
.tl-tip {
  position: absolute; pointer-events: none; z-index: 5; display: none;
  background: var(--card); color: var(--ink); border: var(--hair) solid var(--line-gold);
  border-radius: var(--r-sm); padding: 13px 15px; font-size: 12px; min-width: 172px;
  box-shadow: var(--sh-l);
}
.tl-tip .tl-t { font-family: var(--mono); color: var(--water); margin-bottom: 8px; font-size: 10.5px; letter-spacing: .08em; }
.tl-tip .tl-row { display: flex; align-items: center; gap: 8px; justify-content: space-between; padding: 1px 0; }
.tl-tip .tl-row .nm { display: flex; align-items: center; gap: 7px; }
.tl-tip .tl-row .vv { font-family: var(--mono); color: var(--gray); }
.tl-tip .tl-row.dim { opacity: .45; }
.tl-cursor { position: absolute; top: 0; width: 1px; background: rgba(31,47,45,.35); pointer-events: none; display: none; }

/* ---------- geometry ---------- */
.geo-row { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
@media (max-width: 700px) { .geo-row { grid-template-columns: 1fr; } }
.geo-box { text-align: center; }
.geo-box canvas {
  width: 100%; max-width: 320px; aspect-ratio: 1; border-radius: var(--r-md);
  background: var(--surface); border: var(--hair) solid var(--line); touch-action: none; cursor: grab;
}
.geo-caption { font-size: 13px; color: var(--gray-dk); margin-top: 11px; }
.geo-freqs { font-family: var(--mono); font-size: 11.5px; color: var(--gray-dk); margin-top: 4px; }
.geo-legend { justify-content: center; gap: 14px; margin-top: 10px; font-size: 12px; margin-bottom: 0; }
.geo-legend .mono { font-size: 10.5px; opacity: .75; }

/* ---------- tables ---------- */
table.data { width: 100%; border-collapse: collapse; font-size: 13.5px; }
table.data th {
  text-align: left; font-family: var(--body);
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .13em;
  color: var(--gray-dk); font-weight: 500; padding: 0 10px 11px; border-bottom: var(--hair) solid var(--line);
}
table.data td { padding: 11px 10px; border-bottom: var(--hair) solid var(--line); vertical-align: top; color: var(--ink); }
table.data tr:last-child td { border-bottom: none; }
.meta { color: var(--gray-dk); font-size: 12.5px; }
.tag {
  display: inline-flex; align-items: center; gap: 6px; font-size: 10.5px; padding: 4px 10px;
  border-radius: var(--r-pill); background: var(--gold-pale); color: var(--gold-deep);
  font-weight: 500; white-space: nowrap; font-family: var(--body); letter-spacing: .04em;
}
.tag.blue { background: var(--water-pale); color: var(--water-dk); }
.empty { color: var(--gray-dk); font-size: 14px; padding: 28px 0; text-align: center; }
.row-actions { display: flex; justify-content: flex-end; gap: 10px; margin-bottom: 16px; flex-wrap: wrap; }
.table-scroll { overflow-x: auto; }

/* ---------- track chooser ---------- */
.tracks { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 620px) { .tracks { grid-template-columns: 1fr; } }
.track-card {
  text-align: left; padding: 20px 22px; border-radius: var(--r-md);
  border: var(--hair) solid var(--line-aqua); background: var(--aqua-pale);
  cursor: pointer; color: var(--gray);
}
.track-card:hover { background: var(--control-hover); border-color: var(--control-line-strong); }
.track-card.on { border-color: var(--aqua); background: var(--control-raised); }
.track-card strong { display: block; font-size: 15px; margin-bottom: 5px; font-weight: 500; color: var(--ink); }
.track-card span { font-size: 13px; color: var(--gray); }

/* ---------- avatars ---------- */
.avatar {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0;
  background-size: cover; background-position: center;
  background-color: var(--gold-pale);
  border: var(--hair) solid var(--line-gold);
  font-family: var(--body); font-size: 11.5px; font-weight: 500;
  color: var(--gold-deep); letter-spacing: .04em; overflow: hidden;
}
.avatar.initials { background-image: none; }
.avatar-lg { width: 70px; height: 70px; font-size: 22px; }
.avatar-xl { width: 110px; height: 110px; font-size: 34px; }

/* ---------- welcome ---------- */
.welcome-row { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.welcome-date {
  font-family: var(--body); font-size: 11px; font-weight: 500;
  letter-spacing: .15em; text-transform: uppercase; color: var(--gold-dk); margin-bottom: 6px;
}
#welcomeGreeting { margin-bottom: 8px; }
.photo-row { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; }

/* ---------- auth / consent ---------- */
.card {
  max-width: 470px; margin: 52px auto; padding: 40px; background: var(--card);
  border: var(--hair) solid var(--line-gold); border-radius: var(--r-lg); box-shadow: var(--sh-l);
}
.consent-body {
  max-height: 48vh; overflow-y: auto; padding: 24px 26px;
  border: var(--hair) solid var(--line); border-radius: var(--r-md);
  background: var(--paper); font-size: 16px; color: var(--gray);
  font-family: var(--verse); line-height: 1.7;
}
.consent-body h2 { font-size: 21px; margin: 24px 0 9px; color: var(--gold-dk); font-family: var(--display); }
.consent-body h2:first-child { margin-top: 0; }
.consent-body ul { padding-left: 22px; }
.consent-body li { margin-bottom: 8px; }
.consent-body p { margin: 0 0 12px; }
.consent-body strong { color: var(--ink); font-weight: 600; }
.consent-actions { display: flex; gap: 12px; margin-top: 22px; flex-wrap: wrap; }

.sentiment-score { font-family: var(--mono); font-size: 34px; font-weight: 500; }
.hits { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 14px; }
.hit { font-size: 11.5px; padding: 4px 11px; border-radius: var(--r-pill); font-family: var(--mono); }

/* ---------- section heading icons ---------- */
.panel h2 { display: flex; align-items: center; gap: 12px; }
.h-icon { width: 22px; height: 22px; flex-shrink: 0; opacity: .9; }
.panel.measured .h-icon { color: var(--water); }
.panel.symbolic .h-icon { color: var(--gold-dk); }
.panel.library .h-icon { color: var(--gold-dk); }
@media (max-width: 620px) { .h-icon { width: 19px; height: 19px; } }

/* ---------- dashboard ---------- */
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(156px, 1fr)); gap: 14px; margin-bottom: 24px; }
.tile {
  padding: 20px 22px; border: var(--hair) solid var(--line-gold-soft); border-radius: var(--r-md);
  background: var(--cream); box-shadow: var(--sh);
}
.tile-label {
  font-family: var(--body); font-size: 10px; font-weight: 500; letter-spacing: .15em;
  text-transform: uppercase; color: var(--gold-dk);
}
.tile-value {
  font-family: var(--display); font-size: 36px; font-weight: 400;
  line-height: 1.1; margin-top: 6px; color: var(--ink);
}
.tile-sub { font-size: 12px; color: var(--gray-dk); margin-top: 4px; }

.dash-block + .dash-block { margin-top: 28px; padding-top: 24px; border-top: var(--hair) solid var(--line); }
.dash-head {
  font-family: var(--body); font-size: 11px; font-weight: 500; letter-spacing: .13em;
  text-transform: uppercase; color: var(--gray-dk); margin-bottom: 16px;
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.dash-head strong { font-family: var(--body); font-size: 14px; letter-spacing: 0; text-transform: none; color: var(--ink); }
.nlabel { font-weight: 400; color: var(--gray-dk); letter-spacing: .05em; }
.prov {
  background: var(--gold-pale); color: var(--gold-deep); border-radius: var(--r-pill);
  padding: 3px 10px; font-size: 9.5px; letter-spacing: .1em;
}
.dash-note { margin-top: 16px; font-size: 12.5px; color: var(--gray-dk); line-height: 1.65; max-width: 76ch; }
.dash-note.warn-note {
  background: var(--gold-pale); border: var(--hair) solid var(--line-gold);
  border-radius: var(--r-sm); padding: 13px 15px; color: var(--gold-deep);
}
.dash-note strong { color: var(--gold-deep); }

.chart-surface .zonebar { grid-template-columns: 116px 1fr 58px 46px; }
.chart-surface .sd { font-family: var(--mono); font-size: 10.5px; color: var(--gray-dk); text-align: right; }
.spread-track { position: relative; }
.spread-track .spread { position: absolute; top: 0; bottom: 0; background: rgba(31,47,45,.09); border-radius: var(--r-pill); }
.spread-track .fill { position: relative; }

.diverge-track { position: relative; background: var(--linen); }
.diverge-track .axis { position: absolute; left: 50%; top: -2px; bottom: -2px; width: 1px; background: rgba(31,47,45,.28); }
.diverge-track .fill { position: absolute; top: 0; bottom: 0; }
.chart-surface .pct.up { color: var(--aqua-dk); }
.chart-surface .pct.down { color: var(--terra); }

.minibar { display: flex; height: 12px; border-radius: var(--r-pill); overflow: hidden; min-width: 130px; background: var(--linen); }
.minibar span { display: block; height: 100%; }
.chart-surface .empty { color: var(--gray-dk); }

footer {
  margin-top: 56px; padding-top: 24px; border-top: var(--hair) solid var(--line);
  font-size: 12px; color: var(--gray-dk); line-height: 1.75;
}

/* ---------- segment chooser ---------- */
.segment {
  margin-top: 18px; padding: 20px 22px;
  background: var(--cream); border: var(--hair) solid var(--line-gold); border-radius: var(--r-md);
}
.seg-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.seg-head strong { font-size: 14px; font-weight: 500; color: var(--ink); }
.seg-head .meta { font-family: var(--mono); font-size: 12px; }
.seg-wave-wrap {
  position: relative; height: 96px; border-radius: var(--r-sm); overflow: hidden;
  background: var(--surface); border: var(--hair) solid var(--line); cursor: ew-resize;
  touch-action: none;
}
#segCanvas { width: 100%; height: 100%; display: block; }
.seg-mask { position: absolute; top: 0; bottom: 0; background: rgba(31, 47, 45, .5); pointer-events: none; }
.seg-mask-l { left: 0; }
.seg-mask-r { right: 0; }
.seg-handle {
  position: absolute; top: 0; bottom: 0; width: 13px; margin-left: -6px;
  cursor: ew-resize; touch-action: none; z-index: 3;
}
.seg-handle::before {
  content: ''; position: absolute; left: 5px; top: 0; bottom: 0; width: 3px;
  background: var(--gold); box-shadow: 0 0 0 1px rgba(255,253,248,.85);
}
.seg-handle::after {
  content: ''; position: absolute; left: 1px; top: 50%; margin-top: -13px;
  width: 11px; height: 26px; border-radius: var(--r-pill);
  background: var(--gold); box-shadow: var(--sh);
}
.seg-actions { display: flex; align-items: center; gap: 10px; margin-top: 14px; flex-wrap: wrap; }
.seg-actions .status { margin-top: 0; }

/* Out of sight and out of the tab order, but not display:none - some
   form-fillers skip hidden fields, and this one wants to be filled in. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- public introduction ----------
   Shaped after loveofone.com rather than a deck: white cards on the warm
   ground, a 28px radius, a soft lift on hover, and a rise-and-fade as each
   block enters the viewport. The easing and durations are taken from that site
   on purpose, so the two read as one family.

   Each section carries a tone so the page moves through the palette instead of
   being gold from top to bottom. The tones are chosen rather than cycled - the
   section that says "this is not medical care" is terra because it is the one
   that says no. The sections are not numbered: a numbered run reads as a pitch,
   and this is an invitation. */
/* The introduction is a reading page, so the whole view shares one column:
   1040 is a dashboard width, and at that measure the hero and the top bar
   overhung the text by 248px. 792 less the wrap's 32px of padding puts the top
   bar, the hero and the prose on exactly the same two edges. */
#viewAbout.wrap { max-width: 792px; }
.prose { max-width: 760px; }

.tone-gold  { --tone: var(--gold);  --tone-deep: var(--gold-deep); --tone-pale: var(--gold-pale);  --tone-line: var(--line-gold); }
.tone-aqua  { --tone: var(--aqua);  --tone-deep: var(--aqua-dk);   --tone-pale: var(--aqua-pale);  --tone-line: var(--line-aqua); }
.tone-water { --tone: var(--water); --tone-deep: var(--water-dk);  --tone-pale: var(--water-pale); --tone-line: var(--line-water); }
.tone-terra { --tone: var(--terra); --tone-deep: #7E3F35;          --tone-pale: var(--terra-pale); --tone-line: rgba(158, 83, 70, .32); }

/* The two shadow weights the Love of One cards use. */
:root { --sh-card: 0 8px 30px rgba(31, 47, 45, .06); --sh-lift: 0 18px 56px rgba(31, 47, 45, .12); }

/* ----- hero -----
   The picture is the subject, so it is the whole panel rather than a band
   above the words, and the words float on it. That keeps the eyebrow and the
   headline above the fold, which a full-width 16:9 image on its own did not. */
.ab-hero {
  position: relative; border-radius: 28px; overflow: hidden;
  display: grid; place-items: center;
  min-height: min(78vh, 620px); padding: 44px 28px;
  box-shadow: var(--sh-lift); background: var(--cream);
  margin-bottom: 18px;
}
.ab-hero-media { position: absolute; inset: 0; }
.ab-hero-media img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform 1.4s cubic-bezier(.2, .8, .2, 1);
}
.ab-hero:hover .ab-hero-media img { transform: scale(1.03); }

.ab-hero-text {
  position: relative; z-index: 1; text-align: center;
  max-width: 580px; padding: 40px 42px; border-radius: 28px;
  background: rgba(255, 255, 255, .6);
  backdrop-filter: blur(9px) saturate(1.05);
  -webkit-backdrop-filter: blur(9px) saturate(1.05);
  border: var(--hair) solid rgba(255, 255, 255, .75);
  box-shadow: 0 18px 56px rgba(31, 47, 45, .12);
}
/* Without the blur, 60% white over the darker gold strokes is thin enough to
   cost the headline its contrast. Where it is unsupported, the panel is
   simply more opaque. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .ab-hero-text { background: rgba(255, 255, 255, .84); }
}

.ab-hero-eyebrow {
  font-family: var(--body); font-size: 11px; font-weight: 500;
  letter-spacing: .18em; text-transform: uppercase; color: var(--gold-dk); margin-bottom: 14px;
}
.ab-hero h1 {
  font-family: var(--display); font-weight: 400; color: var(--ink);
  font-size: 42px; line-height: 1.16; margin: 0 0 18px;
}
.ab-hero-lede {
  font-family: var(--verse); font-size: 20px; line-height: 1.6; color: var(--gray);
  margin: 0 auto 26px; max-width: 28em;
}
.ab-hero-lede em { font-style: italic; }
.ab-hero-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

.ab-btn {
  display: inline-block; text-decoration: none; border-radius: var(--r-pill);
  font-family: var(--body); font-weight: 600; font-size: 15px; padding: 13px 28px;
  transition: background .3s, color .3s, box-shadow .3s, transform .3s;
}
.ab-btn:hover { transform: translateY(-2px); }
.ab-btn-primary {
  background: linear-gradient(135deg, var(--water-mid) 0%, var(--water) 100%);
  color: #FFFFFF; box-shadow: 0 6px 20px rgba(47, 105, 128, .28);
}
.ab-btn-primary:hover { color: #FFFFFF; box-shadow: 0 12px 32px rgba(47, 105, 128, .36); }
.ab-btn-ghost {
  background: rgba(255, 255, 255, .72); color: var(--gray);
  border: var(--hair) solid var(--line);
}
.ab-btn-ghost:hover { background: #FFFFFF; color: var(--water-dk); box-shadow: var(--sh-card); }

@media (max-width: 620px) {
  .ab-hero { min-height: min(74vh, 560px); padding: 26px 14px; }
  .ab-hero-text { padding: 28px 22px; }
  .ab-hero h1 { font-size: 30px; }
  .ab-hero-lede { font-size: 17.5px; }
  .ab-btn { width: 100%; }
}

/* ----- back to top -----
   Only worth showing once there is something to come back from, so it is
   revealed past a screen and a half of scrolling. */
.ab-top {
  position: fixed; right: 24px; bottom: 26px; z-index: 40;
  width: 46px; height: 46px; border-radius: 50%; padding: 0;
  display: grid; place-items: center; cursor: pointer;
  background: rgba(255, 255, 255, .82);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border: var(--hair) solid var(--line-gold); color: var(--gold-deep);
  box-shadow: var(--sh-card);
  opacity: 0; visibility: hidden; transform: translateY(10px);
  transition: opacity .3s, transform .3s, visibility .3s, box-shadow .3s, background .3s;
}
.ab-top.is-visible { opacity: 1; visibility: visible; transform: none; }
.ab-top:hover { background: #FFFFFF; box-shadow: var(--sh-lift); transform: translateY(-2px); }
.ab-top svg { width: 21px; height: 21px; }
@media (max-width: 620px) { .ab-top { right: 16px; bottom: 18px; } }

/* ----- sections ----- */
.ab-sec { padding: 56px 0 8px; }
.ab-sec:first-of-type { padding-top: 46px; }

.ab-eyebrow {
  font-family: var(--body); font-size: 11.2px; font-weight: 500;
  letter-spacing: .18em; text-transform: uppercase; color: var(--tone-deep);
  margin-bottom: 14px;
}
.ab-head {
  font-family: var(--display); font-weight: 400; color: var(--ink);
  font-size: 34px; line-height: 1.22; margin: 0 0 20px; letter-spacing: .004em;
}
@media (max-width: 620px) {
  .ab-head { font-size: 27px; }
  .ab-head br { display: none; }
}
.ab-rule {
  width: 120px; height: 2px; margin-bottom: 26px; border-radius: var(--r-pill);
  background: linear-gradient(90deg, var(--tone) 0%, var(--tone) 40%, transparent 100%);
}

.ab-body { font-size: 17px; line-height: 1.78; color: var(--gray); }
.ab-body p { margin: 0 0 17px; }
.ab-body strong { color: var(--ink); font-weight: 600; }
.ab-body a { color: var(--tone-deep); }

/* ----- cards ----- */
.ab-cards {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(258px, 1fr));
  gap: 16px; margin: 26px 0 28px;
}
.ab-card {
  background: var(--surface); border-radius: 28px; padding: 26px 28px;
  border: var(--hair) solid var(--line); box-shadow: var(--sh-card);
  transition: box-shadow .3s, transform .3s, border-color .3s;
}
.ab-card:hover {
  transform: translateY(-3px); box-shadow: var(--sh-lift); border-color: var(--tone-line);
}
/* The figure takes the section's tone through `currentColor`, so one drawing
   serves every card rather than one copy per color. */
.ab-card-icon {
  width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center;
  background: var(--tone-pale); border: var(--hair) solid var(--tone-line);
  color: var(--tone-deep); margin-bottom: 16px;
  transition: transform .4s cubic-bezier(.2, .8, .2, 1), background .3s;
}
.ab-card-icon svg { width: 23px; height: 23px; display: block; }
.ab-card:hover .ab-card-icon,
.ab-body a.ab-podcast:hover .ab-card-icon { transform: scale(1.09) rotate(-5deg); }
/* The tinted card already sits on the tone, so its figure needs the paper back. */
.ab-card-mark .ab-card-icon { background: var(--surface); }

.ab-card-title {
  font-family: var(--display); font-weight: 400; font-size: 20px; line-height: 1.3;
  color: var(--ink); margin: 0 0 10px;
}
.ab-card-body { font-size: 15.5px; line-height: 1.7; color: var(--gray); margin: 0; }
/* The one card that is an admission rather than a reassurance. */
.ab-card-mark { background: var(--tone-pale); border-color: var(--tone-line); }
.ab-card-mark .ab-card-title { color: var(--tone-deep); }

/* ----- steps ----- */
.ab-steps { display: grid; gap: 14px; margin: 26px 0 28px; }
.ab-step {
  display: flex; gap: 18px; align-items: flex-start;
  background: var(--surface); border-radius: 28px; padding: 22px 26px;
  border: var(--hair) solid var(--line); box-shadow: var(--sh-card);
  transition: box-shadow .3s, transform .3s, border-color .3s;
}
.ab-step:hover {
  transform: translateY(-3px); box-shadow: var(--sh-lift); border-color: var(--tone-line);
}
.ab-step-n {
  flex-shrink: 0; width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--display); font-size: 16px;
  color: var(--tone-deep); background: var(--tone-pale);
  border: var(--hair) solid var(--tone-line);
}
.ab-step .ab-card-title { font-size: 18px; margin-bottom: 4px; }

/* ----- pull quotes ----- */
.ab-quote {
  font-family: var(--verse); font-style: italic; font-size: 20px; line-height: 1.6;
  margin: 28px 0; padding: 22px 26px; border-radius: 28px;
  border-left: 3px solid var(--tone);
  background: var(--tone-pale); color: var(--tone-deep);
}
.ab-quote em { font-style: normal; }

/* The one line on this page that might stop someone signing up. Every other
   panel here is a tint; this is the only solid block of color, so it reads as
   a statement being made rather than a passage being quoted. Gold on the edge
   because aqua on aqua would be no edge at all. */
.ab-quote.ab-quote-solid {
  background: linear-gradient(135deg, var(--aqua) 0%, var(--aqua-dk) 100%);
  color: #FFFFFF; border-left-color: var(--gold); border-left-width: 4px;
  font-size: 21px; padding: 26px 30px;
  box-shadow: 0 10px 30px rgba(44, 122, 116, .24);
}

/* The boundary section reads as a held edge rather than more prose. */
.tone-terra .ab-body {
  background: var(--terra-pale); border: var(--hair) solid var(--tone-line);
  border-radius: 28px; padding: 24px 26px;
}
.tone-terra .ab-body p:last-child { margin-bottom: 0; }

/* ----- podcast card ----- */
.ab-body a.ab-podcast {
  display: block; text-decoration: none;
  margin-top: 28px; padding: 26px 28px; border-radius: 28px;
  background: linear-gradient(135deg, var(--gold-pale) 0%, #FBF4E2 100%);
  border: var(--hair) solid var(--line-gold); box-shadow: var(--sh-card);
  transition: box-shadow .3s, transform .3s;
}
.ab-body a.ab-podcast:hover { transform: translateY(-3px); box-shadow: var(--sh-lift); }
.ab-podcast .ab-card-icon {
  background: rgba(255, 255, 255, .6); border-color: var(--line-gold); color: var(--gold-deep);
}
.ab-podcast-label {
  font-family: var(--body); font-size: 10.5px; font-weight: 500;
  letter-spacing: .15em; text-transform: uppercase; color: var(--gold-dk); margin-bottom: 9px;
}
.ab-podcast-title {
  font-family: var(--display); font-size: 22px; color: var(--gold-deep); line-height: 1.35;
}
.ab-podcast-sub { font-size: 13.5px; color: var(--gold-dk); margin-top: 8px; }

/* ----- call to action ----- */
.ab-cta { margin-top: 32px; }
/* The element selector is load-bearing. `.ab-body a` paints every link in the
   tone color; without the `a` here the two rules tie on specificity and only
   source order keeps the label from turning tone-on-tone and vanishing. */
.ab-body a.ab-cta-btn {
  display: inline-block; background: var(--aqua); color: #FFFFFF;
  text-decoration: none; padding: 15px 34px; border-radius: var(--r-pill);
  font-family: var(--body); font-weight: 600; font-size: 16px; letter-spacing: .01em;
  box-shadow: 0 6px 20px rgba(44, 122, 116, .26);
  transition: background .3s, box-shadow .3s, transform .3s;
}
.ab-body a.ab-cta-btn:hover {
  background: var(--aqua-dk); color: #FFFFFF;
  box-shadow: 0 12px 32px rgba(44, 122, 116, .34); transform: translateY(-2px);
}

/* ----- sign-off ----- */
.ab-signoff { margin-top: 66px; }
.ab-signoff .ab-rule { --tone: var(--gold); width: 80px; margin-bottom: 20px; }
.ab-signoff p {
  font-family: var(--display); font-size: 23px; color: var(--ink); margin: 0 0 5px;
}
.ab-signoff span {
  font-family: var(--body); font-size: 11px; letter-spacing: .15em;
  text-transform: uppercase; color: var(--gold-dk);
}
.ab-signoff span a { color: var(--gold-dk); text-decoration: none; }
.ab-signoff span a:hover { color: var(--gold-deep); text-decoration: underline; text-underline-offset: 4px; }

.aboutback { font-size: 14px; color: var(--water); }

/* ----- entrance ----- */
[data-reveal] { transition: opacity .85s, transform .85s cubic-bezier(.2, .8, .2, 1); }
.pre-reveal { opacity: 0; transform: translateY(26px); }
.is-revealed { opacity: 1; transform: none; }

/* Motion is decoration here. Anyone who has asked their system for less gets
   the page in its settled state, with nothing to wait for. */
@media (prefers-reduced-motion: reduce) {
  [data-reveal], .pre-reveal { opacity: 1 !important; transform: none !important; transition: none; }
  .ab-card:hover .ab-card-icon, .ab-body a.ab-podcast:hover .ab-card-icon,
  .ab-top:hover, .ab-btn:hover, .ab-card:hover, .ab-step:hover,
  .ab-body a.ab-podcast:hover, .ab-body a.ab-cta-btn:hover,
  .brand-stack .brand-cta:hover { transform: none; }
  .ab-hero:hover .ab-hero-media img { transform: none; }
}