/* =========================================================================
   EMPIRIUM OS — PHASE 3.5 · THE FEEL LAYER
   Loaded LAST (after empirium.css). Everything that makes the system read as
   powered-on, in-world software: the activated type grammar (Space Grotesk
   display / JetBrains Mono data / Inter reading), the boot readout, live
   chrome telemetry, operator identity, interaction acknowledgement, and the
   HUD empty-state grammar.

   Scope discipline: skin + motion only. No selector here reaches into
   store/persistence/timers/audio logic. All decorative motion is
   transform/opacity, and every loop or entrance honours the global
   prefers-reduced-motion and html[data-motion="static"] kill-switches in
   tokens.css (plus explicit guards at the end of this file).
   ========================================================================= */

/* =======================================================================
   1 · TYPE GRAMMAR — the three faces take their roles app-wide.
   Display (Space Grotesk): identity + wayfinding — page titles, brand,
   section headers, kickers. Mono (JetBrains Mono): anything the system
   "measures" — clocks, stats, timers, counts, meta. Body (Inter): reading.
   ======================================================================= */

/* Wayfinding + identity → display face */
.eo-page-title,
.todo-section-label,.finances-section-label,.as-subnav-title,.vb-subnav-title,
.todo-sidebar-label,
.eo-rescue-head h2,
.cs-inner h2,
.tc-hero-greet,.as-doc-title,
.eo-next-action,
.dash-card-title,.card-hd,.dash-card-hd,.tc-quick-hd,
.modal h2,.modal h3,.eo-modal-head b,
.cp-page-title,.maps-drawer-head{
  font-family:var(--font-display);
}
.eo-page-title{ letter-spacing:.01em; font-weight:600; }
.todo-section-label,.finances-section-label,.as-subnav-title,.vb-subnav-title{
  letter-spacing:.02em;
}
/* Kill the surviving wellness-era treatments: heavy rounded greetings with
   negative tracking become firm display headings. */
.tc-hero-greet{ font-weight:600;letter-spacing:0; }
.as-doc-title{ font-weight:600;letter-spacing:0; }
.eo-next-action{ font-weight:600;letter-spacing:0; }
/* Operator identity line above the daily greeting — the system knows who
   is at the console. Copy lives here as pure presentation. */
.tc-hero-greet{ position:relative; }
.tc-hero-greet::before{
  content:'OPERATOR // ASH — LINK ACTIVE';
  display:block;margin-bottom:7px;
  font-family:var(--font-mono);font-size:9.5px;font-weight:700;
  letter-spacing:var(--tracking-label);text-transform:uppercase;
  color:rgba(var(--accent-rgb),.6);
}

/* System wordmark — the OS says its own name properly */
.nav-brand-name{
  font-family:var(--font-display);
  display:inline-flex;align-items:baseline;gap:4px;min-width:0;
  overflow:visible;text-overflow:clip;white-space:nowrap;
  text-transform:uppercase;letter-spacing:.08em;
  font-size:10px;opacity:1;color:var(--text);
}
.nav-brand-ver{
  flex:0 0 auto;
  font-family:var(--font-mono);font-size:7.5px;color:var(--faint);
  letter-spacing:.04em;margin-left:0;
}

/* Kickers / overlines / nav sections → mono, one tracked label voice */
.eo-kicker,.nav-sec,.eo-card-title,.eo-field-label,.eo-mini-label,
.eo-rescue-kicker,.bookmark-bar-label,.home-habit-group-label,
.sidebar-morning-label,.tc-sprint-section-label,.card-title,
.maps-drawer-grp,.ct-today-lbl{
  font-family:var(--font-mono);
}

/* Measured values → mono. Numbers the system reports must read as data. */
.eo-big-stat,.ct-time,#timerText,.eo-metric-ctl b,
.sidebar-morning-count,.eo-slider-top b,
.pb-sub #leftHz,.pb-sub #rightHz,.orb .core .bh,.orb .core .bl,
.vol-val,.eo-card-meta,.eo-week-nav b,
.tc-stat .v,.ct-today-val,.cu-acct-reset,.cu-metric-pct,
.tc-count,.maps-zpct,
.tl-streak-num,.hud-index-badge{
  font-family:var(--font-mono);
  font-variant-numeric:tabular-nums;
}
/* Mission clocks: firm mono readouts, not spa numerals. Weight-300 +
   2px tracking was the last surviving meditation-app signature. */
.ct-time,.rc-timer{
  font-family:var(--font-mono);font-weight:500;letter-spacing:.06em;
}
.sw-display{
  font-family:var(--font-mono);font-weight:500;letter-spacing:.04em;
}
.eo-big-stat{ font-weight:600;letter-spacing:0; }
.eo-big-stat small{ font-family:var(--font-body); }
/* Archived personal documents: serif body stays, but the meta line reads
   as the system rendering the file. */
.eo-as-doc-meta{ font-family:var(--font-mono); }

/* =======================================================================
   2 · CHROME TELEMETRY — live readouts in the frame (see js/eo-fx.js).
   A system that is ON shows its own signs of life: local time, session
   uptime, operator tag, build tag.
   ======================================================================= */
.eo-tele-date-big{
  font-family:var(--font-mono);font-size:15px;letter-spacing:.1em;
  color:var(--text);text-transform:uppercase;font-weight:600;
  margin-left:16px;white-space:nowrap;
  -webkit-user-select:none;user-select:none;
}
@media (max-width:1000px){
  .eo-tele-date-big{ display:none; }
}
/* Build / link tag at the foot of the command rail */
.eo-nav-buildtag{
  flex:0 0 auto;display:flex;align-items:center;gap:7px;
  padding:7px 10px 8px;border-top:1px solid var(--line-soft);
  font-family:var(--font-mono);font-size:9px;letter-spacing:.12em;
  color:var(--faint);text-transform:uppercase;white-space:nowrap;overflow:hidden;
  -webkit-user-select:none;user-select:none;
}
.eo-nav-buildtag .hud-status-dot{ width:5px;height:5px; }

/* Sound toggle button state (topbar .hbtn) */
.eo-sound-btn .eo-snd-off{ display:none; }
.eo-sound-btn[aria-pressed="false"] .eo-snd-on{ display:none; }
.eo-sound-btn[aria-pressed="false"] .eo-snd-off{ display:block; }
.eo-sound-btn[aria-pressed="true"]{ color:var(--accent-soft); }

/* =======================================================================
   3 · BOOT SEQUENCE — one-time-per-session power-on readout.
   Markup lives in index.html (#eoBoot); the pre-paint <script> flags
   html[data-booting="1"] so the overlay covers first paint with no flash.
   js/eo-boot.js staggers the lines and lifts the overlay. Skippable by
   any key/click; skipped entirely under static/reduced motion.
   ======================================================================= */
#eoBoot{
  position:fixed;inset:0;z-index:500;display:none;
  align-items:center;justify-content:center;
  background:
    radial-gradient(120% 85% at 50% -12%, rgba(var(--accent-rgb),.05), transparent 60%),
    radial-gradient(145% 120% at 50% 42%, transparent 52%, rgba(0,0,0,.55) 100%),
    var(--bg);
  cursor:pointer;
}
html[data-booting="1"] #eoBoot{ display:flex; }
#eoBoot.eo-boot-out{
  opacity:0;transition:opacity .38s var(--ease-hud);pointer-events:none;
}
.eo-boot-inner{
  width:min(430px,86vw);display:flex;flex-direction:column;gap:18px;
}
.eo-boot-brand{
  display:flex;align-items:center;gap:12px;
}
.eo-boot-brand svg{
  width:26px;height:26px;color:var(--accent);
  filter:drop-shadow(0 0 8px rgba(var(--accent-rgb),.55));
}
.eo-boot-brand b{
  font-family:var(--font-display);font-size:17px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--text);
}
.eo-boot-brand span{
  font-family:var(--font-mono);font-size:10px;color:var(--faint);
  letter-spacing:.12em;margin-left:auto;
}
/* The readout lines — staggered power-on (opacity/transform only) */
.eo-boot-lines{
  display:flex;flex-direction:column;gap:7px;
  font-family:var(--font-mono);font-size:11px;letter-spacing:.08em;
  color:var(--muted);text-transform:uppercase;
}
.eo-boot-lines span{
  display:flex;justify-content:space-between;gap:12px;
  opacity:0;transform:translateY(4px);
  /* purpose: boot readout stagger (MOTION_SYSTEM §5) */
  animation:eoBootLine .3s var(--ease-hud) forwards;
}
.eo-boot-lines span i{ font-style:normal;color:var(--good); }
.eo-boot-lines span:nth-child(1){ animation-delay:.15s; }
.eo-boot-lines span:nth-child(2){ animation-delay:.35s; }
.eo-boot-lines span:nth-child(3){ animation-delay:.55s; }
.eo-boot-lines span:nth-child(4){ animation-delay:.75s; }
.eo-boot-lines span:nth-child(5){ animation-delay:.95s; }
@keyframes eoBootLine{ to{ opacity:1;transform:none; } }
/* Progress rail beneath the readout */
.eo-boot-rail{
  height:2px;background:rgba(var(--accent-rgb),.12);overflow:hidden;position:relative;
  border-radius:0 !important;
}
.eo-boot-rail i{
  position:absolute;inset:0;transform-origin:0 50%;transform:scaleX(0);
  background:linear-gradient(90deg,rgba(var(--accent-rgb),.4),var(--accent));
  box-shadow:0 0 12px rgba(var(--accent-rgb),.5);
  /* purpose: boot progress (MOTION_SYSTEM §5) — transform only */
  animation:eoBootRail 1.25s var(--ease-snap) .12s forwards;
  border-radius:0 !important;
}
@keyframes eoBootRail{ to{ transform:scaleX(1); } }
/* Final operator line */
.eo-boot-hello{
  font-family:var(--font-display);font-size:12px;font-weight:600;
  letter-spacing:.22em;text-transform:uppercase;color:var(--accent);
  opacity:0;
  animation:eoBootLine .3s var(--ease-hud) 1.45s forwards;
  text-shadow:0 0 14px rgba(var(--accent-rgb),.45);
}
.eo-boot-skip{
  position:absolute;bottom:26px;left:0;right:0;text-align:center;
  font-family:var(--font-mono);font-size:9px;letter-spacing:.18em;
  color:var(--faint);text-transform:uppercase;opacity:0;
  animation:eoBootLine .3s var(--ease-hud) 1s forwards;
}

/* =======================================================================
   4 · INTERACTION ACKNOWLEDGEMENT — the system heard you.
   ======================================================================= */
/* Universal press feedback: every button gives a decisive mechanical dip.
   (transform only; excluded where a component defines its own press). */
button:active:not(:disabled){ transform:scale(.97); }
.play-btn:active:not(:disabled),.circle-btn:active:not(:disabled){ transform:scale(.94); }
.eo-yn-btn{ transition:all var(--t-snap) var(--ease); }

/* Drawn checkboxes — the stock OS widget breaks the fiction at the single
   most frequent touch point. Mirrors the .tsb-check HUD pattern already
   landed in structure.css; tick scales in on :checked. */
.checklist-item input[type=checkbox],.eo-check input{
  -webkit-appearance:none;appearance:none;
  width:15px;height:15px;border-radius:2px !important;
  border:1px solid var(--line-bright);background:var(--card-subtle);
  position:relative;cursor:pointer;
  transition:border-color .15s,background .15s,box-shadow .15s;
}
.checklist-item input[type=checkbox]:hover,.eo-check input:hover{ border-color:var(--accent); }
.checklist-item input[type=checkbox]:checked,.eo-check input:checked{
  border-color:var(--accent);
  background:linear-gradient(180deg,rgba(var(--accent-rgb),.92),rgba(var(--accent-rgb),.7));
  box-shadow:0 0 8px rgba(var(--accent-rgb),.35);
}
.checklist-item input[type=checkbox]::after,.eo-check input::after{
  content:'';position:absolute;left:4px;top:1px;width:4px;height:8px;
  border:solid var(--on-accent);border-width:0 2px 2px 0;border-radius:0 !important;
  opacity:0;transform:rotate(45deg) scale(.4);
  /* purpose: completion tick draw (MOTION_SYSTEM §4) */
  transition:transform .16s var(--ease-hud),opacity .12s var(--ease);
}
.checklist-item input[type=checkbox]:checked::after,.eo-check input:checked::after{
  opacity:1;transform:rotate(45deg) scale(1);
}
.checklist-item input[type=checkbox]:focus-visible,.eo-check input:focus-visible{
  outline:2px solid var(--accent);outline-offset:1px;
}
/* Completion settles instead of snapping */
.checklist-item .item-text{ transition:color var(--t-base) var(--ease); }

/* Pointer ping — js/eo-fx.js spawns one at the click point (immune to list
   re-renders). Cyan = command registered; green = completion logged.
   purpose: action acknowledgement (MOTION_SYSTEM §4) — transform/opacity. */
.eo-click-ping{
  position:fixed;z-index:600;width:26px;height:26px;margin:-13px 0 0 -13px;
  border:1px solid rgba(var(--accent-rgb),.8);border-radius:50% !important;
  pointer-events:none;opacity:0;
  animation:eoClickPing .34s var(--ease-hud) both;
}
.eo-click-ping.good{ border-color:rgba(var(--good-rgb),.85); }
@keyframes eoClickPing{
  0%{ opacity:.85;transform:scale(.35); }
  100%{ opacity:0;transform:scale(1.15); }
}
/* Row edge-flash (attached transiently by JS only when the row survives) */
@keyframes eoPingEdge{
  0%{ box-shadow:inset 2px 0 0 var(--good), 0 0 0 0 rgba(var(--good-rgb),.35); }
  60%{ box-shadow:inset 2px 0 0 var(--good), 0 0 14px 2px rgba(var(--good-rgb),.18); }
  100%{ box-shadow:inset 2px 0 0 rgba(var(--good-rgb),0), 0 0 0 0 rgba(var(--good-rgb),0); }
}
.eo-ping{ animation:eoPingEdge .55s var(--ease-hud) both; }

/* LIVE RECORDING — tracker.js already toggles .is-running (tracker.js:243);
   no stylesheet ever styled it. While logging, the system must visibly be
   recording: lit start control + glowing mission clock. */
.btn-start.is-running{
  box-shadow:0 0 0 1px rgba(var(--accent-rgb),.55), 0 0 16px rgba(var(--accent-rgb),.3) !important;
  position:relative;
}
.btn-start.is-running::after{
  content:'';position:absolute;inset:-3px;border-radius:inherit;pointer-events:none;
  border:1px solid rgba(var(--accent-rgb),.4);
  /* purpose: live-recording heartbeat (MOTION_SYSTEM §4) — opacity only */
  animation:eoRecPulse 2s ease-in-out infinite;
}
@keyframes eoRecPulse{ 0%,100%{opacity:.15;} 50%{opacity:.7;} }
.card:has(.btn-start.is-running) .sw-display{
  color:var(--accent-soft);
  text-shadow:0 0 20px rgba(var(--accent-rgb),.3);
}

/* Row targeting — the system acknowledges what the operator points at */
.checklist-item:hover,.checklist-item:focus-within{
  background:rgba(var(--accent-rgb),.05);
  box-shadow:inset 2px 0 0 rgba(var(--accent-rgb),.55);
}
.log-item:hover,.task-history-item:hover{
  border-color:var(--line-bright);background:rgba(var(--text-rgb),.035);
}
.eo-pattern-row:hover,.eo-charisma-row:hover{ background:rgba(var(--text-rgb),.03); }

/* Instrument sliders — the plain white media thumb becomes a lit grip.
   (accent-color declarations are dead under the global appearance:none.) */
input[type=range]::-webkit-slider-thumb{
  background:var(--accent);
  border:1px solid rgba(255,255,255,.35);
  border-radius:3px !important;
  box-shadow:0 0 10px rgba(var(--accent-rgb),.45);
}
.eo-telemetry-channel[data-slider="stress"] input[type=range]::-webkit-slider-thumb,
.eo-telemetry-channel[data-slider="shame"] input[type=range]::-webkit-slider-thumb,
.eo-telemetry-channel[data-slider="anxiety"] input[type=range]::-webkit-slider-thumb,
.eo-telemetry-channel[data-slider="urgeRisk"] input[type=range]::-webkit-slider-thumb,
.eo-telemetry-channel[data-slider="tiredness"] input[type=range]::-webkit-slider-thumb,
.eo-telemetry-channel[data-slider="daydreamingRisk"] input[type=range]::-webkit-slider-thumb{
  background:var(--warn);
  box-shadow:0 0 10px rgba(var(--warn-rgb),.45);
}

/* Confirm overlay — a system interlock engaging, not a browser alert */
@keyframes eoFadeIn{ from{opacity:0;} to{opacity:1;} }
@keyframes eoRiseIn{ from{opacity:0;transform:translateY(8px);} to{opacity:1;transform:none;} }
.confirm-overlay{ animation:eoFadeIn .16s var(--ease) both; }
.confirm-box{ animation:eoRiseIn .18s var(--ease-hud) both; }
.confirm-box h3{ font-family:var(--font-display); }

/* Title decode — js/eo-fx.js scrambles the incoming page title; this only
   styles the run so glyph churn doesn't wobble layout. */
.eo-decoding{
  font-variant-numeric:tabular-nums;
  text-shadow:0 0 10px rgba(var(--accent-rgb),.25);
}

/* =======================================================================
   5 · HUD EMPTY STATES — standby readouts instead of apologies.
   The .eo-empty / empty-state grammar: a bracketed STANDBY frame.
   ======================================================================= */
.eo-empty,.eo-proof-log-empty{
  position:relative;
  border:1px dashed var(--line) !important;
  background:
    linear-gradient(180deg, rgba(var(--accent-rgb),.02), transparent 60%),
    var(--card-subtle);
}
.eo-empty::before,.eo-proof-log-empty::before{
  content:'';position:absolute;top:-1px;left:-1px;width:9px;height:9px;
  border:1px solid var(--hud-edge-soft);border-right:0;border-bottom:0;
  border-radius:0 !important;
}
.eo-empty::after,.eo-proof-log-empty::after{
  content:'';position:absolute;bottom:-1px;right:-1px;width:9px;height:9px;
  border:1px solid var(--hud-edge-soft);border-left:0;border-top:0;
  border-radius:0 !important;
}
.eo-empty-kicker{
  display:block;font-family:var(--font-mono);font-size:10px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--faint);
  font-weight:700;margin-bottom:5px;
}

/* Native selects: keep platform behavior, remove the stock OS arrow. */
.eo-select,
select.eo-input,
.habit-form-group select{
  appearance:none;-webkit-appearance:none;
  padding-right:32px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2393DCF0' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 10px center;
  background-size:12px 12px;
}
.eo-select option,
select.eo-input option,
.habit-form-group select option{
  background:var(--card-2);color:var(--text);
}

/* =======================================================================
   6 · FOCUS DECK — live signal read in the bottom dock.
   .pb-eq bars go live (cyan, brighter) while body.eo-audio-live is set by
   js/eo-fx.js watching the play state; idle keeps the dim standby loop.
   The binaural orb pulse already tracks --pulse; here it just gains a
   mono readout treatment for its numbers (see §1).
   ======================================================================= */
body.eo-audio-live .pb-eq i{
  background:var(--accent);
  box-shadow:0 0 6px rgba(var(--accent-rgb),.5);
  opacity:.9;
}
body.eo-audio-live .track.selected{
  border-color:rgba(var(--accent-rgb),.65);
  box-shadow:0 0 0 1px rgba(var(--accent-rgb),.42),0 0 18px rgba(var(--accent-rgb),.16);
}
body.eo-audio-live .track.selected .tplay{
  color:var(--on-accent);
  border-color:var(--accent);
  background:var(--accent);
  box-shadow:0 0 12px rgba(var(--accent-rgb),.42);
}
/* Live EQ (analyser-driven, binaural only): five bars scaled by JS via
   a --eq custom prop per bar. transform-only; visible only while live. */
#eoLiveEq{ display:none;align-items:flex-end;gap:3px;height:16px;flex:0 0 auto;pointer-events:none; }
body.eo-audio-live #eoLiveEq{ display:inline-flex; }
html[data-motion="static"] #eoLiveEq i{ transform:scaleY(.4); }
#eoLiveEq i{
  width:3px;height:100%;transform-origin:50% 100%;
  background:var(--accent);box-shadow:0 0 6px rgba(var(--accent-rgb),.45);
  border-radius:1px !important;
  transform:scaleY(var(--eq,.15));
  transition:transform .09s linear;
}

/* =======================================================================
   7 · MOTION GUARDS — flatten everything above.
   ======================================================================= */
@media (prefers-reduced-motion:reduce){
  #eoBoot{ display:none !important; }
  .eo-boot-lines span,.eo-boot-rail i,.eo-boot-hello,.eo-boot-skip{ animation:none !important;opacity:1;transform:none; }
  .eo-ping,.eo-click-ping{ animation:none; }
  .eo-click-ping{ display:none; }
  .btn-start.is-running::after{ animation:none;opacity:.4; }
  button:active:not(:disabled){ transform:none; }
}
html[data-motion="static"] #eoBoot{ display:none !important; }
html[data-motion="static"] .eo-ping{ animation:none; }
html[data-motion="static"] .eo-click-ping{ display:none; }
html[data-motion="static"] .btn-start.is-running::after{ animation:none;opacity:.4; }