/* =========================================================================
   EMPIRIUM OS — panel styles for every eo-* module.
   Token-driven: inherits the Notion-dark tokens from structure.css so the
   layer reads as part of the same product. Design intent: calm, spacious,
   hierarchical. Large important cards, small supporting metadata, restrained
   motion, no decorative clutter.
   ========================================================================= */

/* ---------- Panel shell: same grid slot as every other main panel ---------- */
.eo-panel{
  grid-column:1; grid-row:3;
  display:none; flex-direction:column;
  min-height:0; overflow-y:auto; padding:0 28px 40px; gap:6px;
  scroll-behavior:smooth;
}
.eo-panel.visible{ display:flex; }

/* ---------- Page head ---------- */
.eo-page-head{
  display:flex; align-items:flex-end; justify-content:space-between; gap:18px;
  padding:22px 0 14px; flex-wrap:wrap;
}
.eo-kicker{
  font-size:var(--fs-label); text-transform:uppercase; letter-spacing:var(--tracking-label);
  color:var(--faint); font-weight:700;
}
.eo-page-title{
  margin:4px 0 0; font-size:var(--fs-page-title); font-weight:700; letter-spacing:-.3px;
  color:var(--text); line-height:1.2;
}
.eo-page-sub{ margin:6px 0 0; font-size:var(--fs-small); color:var(--muted); }
.eo-quick{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; }

/* ---------- Buttons ---------- */
.eo-btn{
  appearance:none; border:1px solid var(--line); background:var(--card);
  color:var(--text); font-size:var(--fs-small); font-weight:600;
  padding:7px 13px; cursor:pointer; border-radius:var(--r-md);
  transition:background var(--t-snap) var(--ease), border-color var(--t-snap) var(--ease), transform var(--t-snap) var(--ease);
  white-space:nowrap;
}
.eo-btn:hover{ background:var(--card-hover); border-color:var(--line-bright); }
.eo-btn:active{ transform:scale(.98); }
.eo-btn-primary{ background:var(--accent); border-color:var(--accent); color:#fff; }
.eo-btn-primary:hover{ background:var(--accent2); border-color:var(--accent2); }
.eo-btn-ghost{ background:transparent; border-color:transparent; color:var(--muted); }
.eo-btn-ghost:hover{ background:var(--card-hover); color:var(--text); }
.eo-btn-danger-ghost{ background:transparent; border-color:rgba(var(--danger-rgb),.4); color:var(--danger-soft); }
.eo-btn-danger-ghost:hover{ background:rgba(var(--danger-rgb),.12); }
.eo-btn-sm{ padding:4px 10px; font-size:var(--fs-caption); }
.eo-btn:disabled{ opacity:.55; cursor:default; }
.eo-x{
  appearance:none; background:transparent; border:none; color:var(--faint);
  cursor:pointer; font-size:12px; padding:4px 6px;
}
.eo-x:hover{ color:var(--danger-soft); }

/* ---------- Tabs ---------- */
.eo-tabs{
  display:flex; gap:2px; border-bottom:1px solid var(--line);
  margin-bottom:16px; overflow-x:auto; flex:none;
}
.eo-tabs-wrap{ flex-wrap:wrap; overflow:visible; }
.eo-tab{
  appearance:none; background:transparent; border:none; cursor:pointer;
  color:var(--muted); font-size:var(--fs-small); font-weight:600;
  padding:9px 13px; border-bottom:2px solid transparent !important;
  border-radius:var(--r-sm) var(--r-sm) 0 0 !important;
  transition:color var(--t-snap) var(--ease);
  white-space:nowrap;
}
.eo-tab:hover{ color:var(--text); background:var(--card-hover); }
.eo-tab.active{ color:var(--text); border-bottom-color:var(--accent) !important; }

/* ---------- Grid + cards ---------- */
.eo-view-body{ display:flex; flex-direction:column; gap:16px; }
.eo-grid{ display:grid; gap:14px; }
.eo-grid-cc{ grid-template-columns:repeat(2, minmax(0,1fr)); }
.eo-grid-2{ grid-template-columns:repeat(2, minmax(0,1fr)); }
.eo-grid-3{ grid-template-columns:repeat(3, minmax(0,1fr)); }
.eo-grid-blocks{ grid-template-columns:minmax(0,2fr) minmax(260px,1fr); align-items:start; }
.eo-span2{ grid-column:span 2; }
.eo-span3{ grid-column:span 3; }
@media (max-width:1100px){
  .eo-grid-cc, .eo-grid-2, .eo-grid-3, .eo-grid-blocks{ grid-template-columns:1fr; }
  .eo-span2, .eo-span3{ grid-column:span 1; }
}

.eo-card{
  background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg);
  box-shadow:var(--sh-1); display:flex; flex-direction:column; min-width:0;
}
.eo-card-head{
  display:flex; align-items:center; gap:10px; padding:12px 16px;
  border-bottom:1px solid var(--line-soft);
}
.eo-card-title{
  font-size:var(--fs-label); text-transform:uppercase; letter-spacing:var(--tracking-label);
  color:var(--muted); font-weight:700; flex:none;
}
.eo-card-meta{ font-size:var(--fs-caption); color:var(--faint); margin-left:auto; text-align:right; }
.eo-card-actions{ margin-left:auto; display:flex; gap:6px; align-items:center; flex:none; }
.eo-card-head .eo-card-meta + .eo-card-actions{ margin-left:8px; }
.eo-card-body{ padding:14px 16px 16px; display:flex; flex-direction:column; gap:10px; min-width:0; }
.eo-card-flush .eo-card-body{ padding:8px; gap:8px; }
.eo-card-hero{ border-color:var(--line-strong); }
.eo-card-hero .eo-card-title{ color:var(--text); }

/* ---------- Fields ---------- */
.eo-field{ display:flex; flex-direction:column; gap:5px; min-width:0; flex:1; }
.eo-field-label{
  font-size:var(--fs-caption); text-transform:uppercase; letter-spacing:var(--tracking-label);
  color:var(--faint); font-weight:700;
}
.eo-field-hint{ font-size:var(--fs-caption); color:var(--faint); line-height:1.5; }
.eo-field-row{ display:flex; gap:10px; }
.eo-field-row .eo-field{ flex:1; }
.eo-input{
  width:100%; background:var(--card-subtle); border:1px solid var(--line);
  color:var(--text); font:inherit; font-size:var(--fs-body);
  padding:8px 10px; border-radius:var(--r-md); outline:none;
  transition:border-color var(--t-snap) var(--ease);
}
.eo-input:focus{ border-color:var(--accent); }
.eo-input::placeholder{ color:var(--faint); }
.eo-ta{ resize:vertical; min-height:38px; line-height:1.5; }
.eo-select{ cursor:pointer; }
.eo-check{
  display:flex; align-items:center; gap:9px; cursor:pointer;
  font-size:var(--fs-small); color:var(--text); padding:3px 0;
}
.eo-check input{ width:15px; height:15px; accent-color:var(--accent); cursor:pointer; flex:none; }
.eo-check-row{ display:flex; gap:18px; flex-wrap:wrap; }

/* ---------- Radio sets ---------- */
/* EO.ui.radios() reuses .eo-check for the label, so the drawn-checkbox rules
   in eo-feel.css apply here too. Round the box off and swap the tick for a
   dot; everything else (hover, glow, focus ring) is inherited. */
.eo-radio-set{ display:flex; flex-direction:column; gap:2px; }
.eo-radio-set.eo-reading-depth{ gap:4px; margin-top:2px; }
.eo-check input[type=radio]{ border-radius:50% !important; }
.eo-check input[type=radio]::after{
  left:50%; top:50%; width:5px; height:5px; border:0;
  border-radius:50% !important; background:var(--on-accent);
  transform:translate(-50%,-50%) scale(.4);
}
.eo-check input[type=radio]:checked::after{ transform:translate(-50%,-50%) scale(1); }

/* ---------- Sliders ---------- */
.eo-sliders{ display:grid; grid-template-columns:repeat(auto-fill, minmax(210px,1fr)); gap:12px 20px; }
.eo-sliders-compact{ grid-template-columns:repeat(auto-fill, minmax(150px,1fr)); }
.eo-slider{ display:flex; flex-direction:column; gap:3px; }
.eo-slider-top{ display:flex; justify-content:space-between; font-size:var(--fs-small); color:var(--muted); }
.eo-slider-top b{ color:var(--text); font-variant-numeric:tabular-nums; }
.eo-slider input[type=range]{ width:100%; accent-color:var(--accent); cursor:pointer; height:18px; }
.eo-slider-ends{ display:flex; justify-content:space-between; font-size:var(--fs-caption); color:var(--faint); }

/* ---------- Chips ---------- */
.eo-chip{
  display:inline-flex; align-items:center; gap:5px;
  font-size:var(--fs-caption); font-weight:600; color:var(--muted);
  background:var(--card-subtle); border:1px solid var(--line);
  padding:2px 9px; border-radius:999px !important; white-space:nowrap;
}
.eo-chip-active{ color:#fff; background:var(--accent); border-color:var(--accent); }
.eo-chip-good{ color:var(--good); border-color:rgba(var(--good-rgb),.4); }
.eo-chip-bad{ color:var(--danger-soft); border-color:rgba(var(--danger-rgb),.4); }
.eo-chip-live{ color:var(--good); border-color:rgba(var(--good-rgb),.5); }
.eo-chip-done{ color:var(--faint); }
.eo-chip-planned{ color:var(--muted); }
.eo-chip-btn{ cursor:pointer; transition:all var(--t-snap) var(--ease); }
.eo-chip-btn:hover{ border-color:var(--line-bright); color:var(--text); }
.eo-chip-row{ display:flex; gap:6px; flex-wrap:wrap; }

.eo-emotion-tags{ display:flex; flex-wrap:wrap; gap:6px; }
.eo-emotion-tag{
  font-size:var(--fs-caption); font-weight:600; color:var(--faint);
  background:var(--card-subtle); border:1px solid var(--line);
  padding:4px 11px; border-radius:999px; cursor:pointer;
  transition:all var(--t-snap) var(--ease);
}
.eo-emotion-tag:hover{ border-color:var(--line-bright); color:var(--muted); }
.eo-emotion-tag-active{ color:#fff; background:var(--accent); border-color:var(--accent); }

/* ---------- Misc text ---------- */
.eo-note{ font-size:var(--fs-small); color:var(--muted); line-height:1.55; margin:0; }
.eo-note-strong{
  font-size:var(--fs-small); color:var(--text); line-height:1.55;
  background:var(--card-subtle); border-left:2px solid var(--line-strong);
  padding:10px 14px; border-radius:0 var(--r-md) var(--r-md) 0 !important;
}
.eo-mini-label{
  font-size:var(--fs-caption); text-transform:uppercase; letter-spacing:var(--tracking-label);
  color:var(--faint); font-weight:700; display:block; margin-top:2px;
}
.eo-accent{ color:var(--accent); }
.eo-row-gap{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-top:2px; }
.eo-empty{
  padding:22px 14px; text-align:center; color:var(--faint);
}
.eo-empty p{ margin:0 0 4px; font-size:var(--fs-small); color:var(--muted); }
.eo-empty span{ font-size:var(--fs-caption); }
.eo-add-row{ display:flex; gap:8px; align-items:center; padding-top:4px; }
.eo-add-row .eo-input{ flex:1; }

/* ---------- Command Centre specifics ---------- */
.eo-next-action{
  font-size:22px; font-weight:700; letter-spacing:-.2px; color:var(--text);
  line-height:1.35; padding:6px 0;
}
.eo-next-empty{ color:var(--faint); font-weight:500; font-size:var(--fs-content); }
.eo-sprint-mini b{ font-size:var(--fs-content); }
.eo-sprint-mini p{ margin:6px 0 8px; font-size:var(--fs-small); color:var(--muted); line-height:1.5; }
.eo-mode-rec{ font-size:var(--fs-small); color:var(--muted); }
.eo-mode-rec b{ color:var(--text); }
.eo-nogo-list{ margin:0; padding-left:18px; display:flex; flex-direction:column; gap:5px; }
.eo-nogo-list li{ font-size:var(--fs-small); color:var(--text); line-height:1.45; }
.eo-nogo-list li::marker{ color:var(--danger-soft); }
.eo-nogo-today{
  font-size:var(--fs-small); color:var(--muted); border-top:1px solid var(--line-soft);
  padding-top:8px; margin-top:4px;
}
.eo-proof-list{ margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:7px; }
.eo-proof-list li{ display:flex; flex-direction:column; gap:1px; font-size:var(--fs-small); color:var(--muted); line-height:1.45; }
.eo-proof-type{ font-size:var(--fs-caption); font-weight:700; color:var(--good); text-transform:uppercase; letter-spacing:var(--tracking-label); }
.eo-proof-mini{ display:flex; gap:5px; flex-wrap:wrap; }
.eo-rec-row{ display:flex; align-items:center; gap:8px; font-size:var(--fs-content); }
.eo-rec-dot{ width:10px; height:10px; border-radius:50% !important; display:inline-block; flex:none; }
.eo-rec-dot.green{ background:var(--good); }
.eo-rec-dot.amber{ background:var(--warn); }
.eo-rec-dot.red{ background:var(--danger); }
.eo-rec-dot.black{ background:#000; border:1px solid var(--line-bright); }
.eo-burn-row{ font-size:var(--fs-small); color:var(--muted); margin-top:2px; }
.eo-burn-low{ color:var(--good); } .eo-burn-moderate{ color:var(--warn); } .eo-burn-high{ color:var(--danger-soft); }
.eo-burn-reasons{ margin:2px 0 0; padding-left:16px; }
.eo-burn-reasons li{ font-size:var(--fs-caption); color:var(--faint); line-height:1.5; }
.eo-big-stat{ font-size:38px; font-weight:700; letter-spacing:-1px; color:var(--text); font-variant-numeric:tabular-nums; }
.eo-big-stat small{ font-size:var(--fs-small); font-weight:500; color:var(--faint); margin-left:7px; letter-spacing:0; }
.eo-pattern-row{
  display:flex; justify-content:space-between; gap:12px; align-items:baseline;
  font-size:var(--fs-small); color:var(--muted); padding:5px 0;
  border-bottom:1px solid var(--line-soft);
}
.eo-pattern-row:last-child{ border-bottom:none; }
.eo-pattern-row b{ color:var(--text); text-align:right; }

/* ---------- Command Centre — Phase 3: command deck ----------
   Scoped entirely under new, unique classnames (eo-command-*, eo-priority-*,
   eo-telemetry-*, eo-guardrail-*, eo-proof-log*, eo-system-readout,
   eo-radar-ring, eo-sprint-status-row, eo-mode-rec-label) so nothing here
   can affect the shared eo-card/eo-slider/eo-nogo-list/eo-proof-list styling
   consumed by other eo-* pages. Motion is transform/opacity only and
   inherits the global reduced-motion / data-motion="static" kill-switch
   in tokens.css — no extra guards needed here. */

.eo-command-deck{ display:flex; flex-direction:column; gap:6px; }

/* Card entrance: one-time rise + fade, staggered by grid position. */
.eo-command-deck .eo-grid-cc > .eo-card{
  animation:eoDeckIn .42s var(--ease-hud,var(--ease)) both;
  transition:transform var(--t-base) var(--ease), border-color var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease);
}
.eo-command-deck .eo-grid-cc > .eo-card:hover{ transform:translateY(-2px); border-color:var(--line-bright); }
.eo-command-deck .eo-grid-cc > *:nth-child(1){ animation-delay:0ms; }
.eo-command-deck .eo-grid-cc > *:nth-child(2){ animation-delay:40ms; }
.eo-command-deck .eo-grid-cc > *:nth-child(3){ animation-delay:80ms; }
.eo-command-deck .eo-grid-cc > *:nth-child(4){ animation-delay:120ms; }
.eo-command-deck .eo-grid-cc > *:nth-child(5){ animation-delay:160ms; }
.eo-command-deck .eo-grid-cc > *:nth-child(6){ animation-delay:200ms; }
.eo-command-deck .eo-grid-cc > *:nth-child(7){ animation-delay:240ms; }
@keyframes eoDeckIn{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } }

/* Opening cockpit area — sits directly under the hero cover banner. */
.eo-command-hero{
  position:relative; background:linear-gradient(160deg, var(--card-2), var(--card));
  border:1px solid var(--line); border-radius:var(--r-lg);
  padding:20px 22px 16px; margin:16px 0 16px; box-shadow:var(--sh-1);
}
.eo-command-hero::before{
  content:''; position:absolute; top:0; left:16px; right:16px; height:1px;
  background:linear-gradient(90deg, transparent, rgba(var(--accent-rgb),.55) 18%, rgba(var(--accent-rgb),.55) 82%, transparent);
}
.eo-command-hero-main{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.eo-command-hero .eo-quick{ align-self:flex-end; }

/* Technical metadata row: module status readout. */
.eo-system-readout{
  display:flex; flex-wrap:wrap; align-items:center; gap:14px;
  margin-top:12px; padding-top:10px; border-top:1px solid var(--line-soft);
  font-family:var(--font-mono, ui-monospace, monospace);
  font-size:10.5px; letter-spacing:.09em; text-transform:uppercase; color:var(--muted);
}
.eo-system-readout span{ display:inline-flex; align-items:center; gap:6px; white-space:nowrap; }
.eo-system-readout .hud-status-dot{ width:6px; height:6px; }
.eo-readout-risk.low{ color:var(--good); }
.eo-readout-risk.moderate{ color:var(--warn); }
.eo-readout-risk.high{ color:var(--danger-soft); }

/* Radar / status ring — one small earned instrument, not decoration. */
.eo-radar-ring{ flex:none; color:var(--good); }
.eo-radar-ring.moderate{ color:var(--warn); }
.eo-radar-ring.high{ color:var(--danger-soft); }
.eo-radar-sweep{ transform-origin:20px 20px; animation:eoRadarSweep 4s linear infinite; }
@keyframes eoRadarSweep{ to{ transform:rotate(360deg); } }

/* Next clean action — the priority mission card. */
.eo-priority-status{
  display:flex; align-items:center; gap:7px;
  font-family:var(--font-mono, ui-monospace, monospace);
  font-size:10px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--faint); font-weight:700;
}
.eo-priority-actions{ margin-top:2px; }

/* Sprint card — active campaign framing. */
.eo-sprint-status-row{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:2px; }
.eo-sprint-num{
  font-family:var(--font-mono, ui-monospace, monospace); font-size:10.5px;
  letter-spacing:.08em; text-transform:uppercase; color:var(--faint);
}

/* Today mode — system mode selector. */
.eo-mode-rec{ display:flex; align-items:baseline; gap:8px; }
.eo-mode-rec-label{
  font-size:var(--fs-caption); text-transform:uppercase; letter-spacing:.08em;
  color:var(--faint); font-weight:700;
}
.eo-mode-select-wrap select.eo-select:focus{ border-color:var(--accent); }

/* Current state check — telemetry channels. */
.eo-telemetry-channel .eo-slider-top{
  font-family:var(--font-mono, ui-monospace, monospace); text-transform:uppercase;
  letter-spacing:.06em; font-size:10px; color:var(--faint);
}
.eo-telemetry-channel .eo-slider-top b{ color:var(--accent); font-size:12px; }
.eo-telemetry-channel input[type=range]{ accent-color:var(--accent); }
.eo-telemetry-channel[data-slider="stress"] .eo-slider-top b,
.eo-telemetry-channel[data-slider="shame"] .eo-slider-top b,
.eo-telemetry-channel[data-slider="anxiety"] .eo-slider-top b,
.eo-telemetry-channel[data-slider="urgeRisk"] .eo-slider-top b,
.eo-telemetry-channel[data-slider="tiredness"] .eo-slider-top b,
.eo-telemetry-channel[data-slider="daydreamingRisk"] .eo-slider-top b{ color:var(--warn); }
.eo-telemetry-channel[data-slider="stress"] input[type=range],
.eo-telemetry-channel[data-slider="shame"] input[type=range],
.eo-telemetry-channel[data-slider="anxiety"] input[type=range],
.eo-telemetry-channel[data-slider="urgeRisk"] input[type=range],
.eo-telemetry-channel[data-slider="tiredness"] input[type=range],
.eo-telemetry-channel[data-slider="daydreamingRisk"] input[type=range]{ accent-color:var(--warn); }

/* No-go rules — system guardrail panel. */
.eo-guardrail-list{
  background:var(--card-subtle); border:1px solid var(--line-soft);
  border-radius:var(--r-md); padding:10px 14px 10px 28px;
}
.eo-guardrail-list li::marker{ color:var(--warn); font-weight:700; }

/* Proof log — mission evidence log. */
.eo-proof-log-empty{
  text-align:center; padding:20px 12px; border:1px dashed var(--line);
  border-radius:var(--r-md); background:var(--card-subtle);
}
.eo-proof-log-empty-kicker{
  display:block; font-family:var(--font-mono, ui-monospace, monospace);
  font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--faint); font-weight:700; margin-bottom:4px;
}
.eo-proof-log-empty p{ margin:0; font-size:var(--fs-small); color:var(--muted); }

@media (max-width:760px){
  .eo-command-hero{ padding:16px 16px 14px; }
  .eo-command-hero .eo-quick{ align-self:flex-start; }
}

/* ---------- Rescue Mode view ---------- */
.eo-rescue-wrap{ max-width:640px; margin:8vh auto 40px; display:flex; flex-direction:column; gap:22px; width:100%; }
.eo-rescue-head{ text-align:center; }
.eo-rescue-kicker{
  font-size:var(--fs-label); text-transform:uppercase; letter-spacing:var(--tracking-wide);
  color:var(--warn); font-weight:700;
}
.eo-rescue-head h2{ margin:10px 0 6px; font-size:26px; font-weight:700; letter-spacing:-.3px; }
.eo-rescue-head p{ margin:0; color:var(--muted); font-size:var(--fs-body); }
.eo-rescue-steps{ display:flex; flex-direction:column; gap:10px; }
.eo-rescue-step{
  display:flex; gap:14px; align-items:flex-start;
  background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:14px 16px; transition:opacity var(--t-base) var(--ease);
}
.eo-rescue-step.done{ opacity:.55; }
.eo-rescue-tick{
  flex:none; width:32px; height:32px; border-radius:50% !important;
  border:1px solid var(--line-bright); background:var(--card-subtle);
  color:var(--muted); font-weight:700; cursor:pointer; font-size:13px;
  transition:all var(--t-snap) var(--ease);
}
.eo-rescue-step.done .eo-rescue-tick{ background:var(--good); border-color:var(--good); color:#fff; }
.eo-rescue-step-body{ display:flex; flex-direction:column; gap:6px; flex:1; }
.eo-rescue-step-body b{ font-size:var(--fs-content); }
.eo-rescue-step-body span{ font-size:var(--fs-small); color:var(--muted); }
.eo-rescue-foot{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap; }

/* Rescue Mode simplifies the whole app: only Command Centre + Health
   stay in the nav; the right column and music chrome go quiet. */
body.eo-rescue .nav-rail-list > *{ display:none !important; }
body.eo-rescue .nav-rail-list .eo-nav-sec-main,
body.eo-rescue .nav-rail-list #navOSCommand,
body.eo-rescue .nav-rail-list #navEOHealth{ display:flex !important; }
body.eo-rescue .rightcol{ display:none !important; }
body.eo-rescue .shell{ grid-template-columns:1fr 0 !important; }
body.eo-rescue .topbar .hbtn,
body.eo-rescue #eoCaptureBtn{ display:none !important; }

/* ---------- Today ---------- */
.eo-identity-line{
  font-size:var(--fs-content); font-weight:600; color:var(--text);
  border-left:2px solid var(--line-strong); padding:6px 12px;
  background:var(--card-subtle); border-radius:0 var(--r-md) var(--r-md) 0 !important;
}
.eo-focus-list{ margin:0; padding-left:18px; display:flex; flex-direction:column; gap:6px; }
.eo-focus-list li{ font-size:var(--fs-small); color:var(--text); line-height:1.5; }
.eo-brief-close{ display:flex; gap:20px; flex-wrap:wrap; }
.eo-guide-step b{ font-size:var(--fs-small); }
.eo-guide-step p{ margin:3px 0 10px; font-size:var(--fs-small); color:var(--muted); line-height:1.55; }
.eo-rehearse-form{ display:flex; flex-direction:column; gap:8px; margin-top:10px; }
.eo-rehearsal-list{ margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:12px; }
.eo-rehearsal-list li{ display:flex; flex-direction:column; gap:2px; font-size:var(--fs-small); color:var(--muted); border-left:2px solid var(--line-bright); padding-left:12px; }
.eo-rehearsal-list li b{ color:var(--text); }
.eo-script{ font-size:var(--fs-content); line-height:1.65; }

/* ---------- Sprint Control ---------- */
.eo-sprint-list{ display:flex; flex-direction:column; gap:14px; }
.eo-sprint-card.active{ border-color:rgba(var(--accent-rgb),.55); }
.eo-sprint-mission{ margin:0; font-size:var(--fs-content); color:var(--text); font-weight:600; line-height:1.45; }
.eo-sprint-identity{ margin:2px 0 4px; font-size:var(--fs-small); color:var(--accent); font-style:italic; }
.eo-sprint-cols{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:14px; margin-top:6px; }
.eo-sprint-cols p{ margin:4px 0 0; font-size:var(--fs-caption); color:var(--muted); line-height:1.55; }
@media (max-width:1000px){ .eo-sprint-cols{ grid-template-columns:1fr; } }
.eo-sprint-edit{ display:flex; flex-direction:column; gap:10px; }
.eo-week-nav{ display:flex; align-items:center; gap:12px; margin-bottom:14px; font-size:var(--fs-content); }

/* ---------- Work Blocks / generic block rows ---------- */
.eo-blocks-col, .eo-blocks-side{ display:flex; flex-direction:column; gap:14px; min-width:0; }
.eo-block{
  background:var(--card-subtle); border:1px solid var(--line-soft); border-radius:var(--r-md);
  padding:10px 12px; display:flex; flex-direction:column; gap:8px;
}
.eo-block.live{ border-color:rgba(var(--good-rgb),.5); }
.eo-block.done{ opacity:.75; }
.eo-block.bad{ border-color:rgba(var(--danger-rgb),.35); }
.eo-block-top{ display:flex; align-items:center; gap:9px; flex-wrap:wrap; }
.eo-block-top b{ font-size:var(--fs-small); }
.eo-block-meta{ font-size:var(--fs-caption); color:var(--faint); }
.eo-block-detail{
  border-top:1px solid var(--line-soft); padding-top:10px;
  display:flex; flex-direction:column; gap:10px;
}
.eo-allow-list, .eo-ban-list{ margin:2px 0 6px; padding-left:18px; display:flex; flex-direction:column; gap:4px; }
.eo-allow-list li{ font-size:var(--fs-small); color:var(--text); }
.eo-allow-list li::marker{ color:var(--good); }
.eo-ban-list li{ font-size:var(--fs-small); color:var(--muted); }
.eo-ban-list li::marker{ color:var(--danger); }
.eo-banned-label{ color:var(--danger-soft); }

/* ---------- Launch gates ---------- */
.eo-gate-bar{
  height:6px; background:var(--card-subtle); border:1px solid var(--line-soft);
  border-radius:999px !important; overflow:hidden;
}
.eo-gate-bar i{ display:block; height:100%; background:var(--accent); border-radius:999px !important; transition:width var(--t-slow) var(--ease); }
.eo-gate-meta{ font-size:var(--fs-caption); color:var(--faint); }
.eo-gate-list{ margin:4px 0 0; padding:0; list-style:none; display:flex; flex-direction:column; gap:2px; }
.eo-task-list{ margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:2px; }
.eo-task-list li{ display:flex; align-items:center; gap:6px; }
.eo-task-list li .eo-check{ flex:1; }
.eo-task-list li.done .eo-check span{ text-decoration:line-through; color:var(--faint); }

/* ---------- Sales ---------- */
.eo-metric-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(140px,1fr)); gap:12px; }
.eo-metric{
  background:var(--card-subtle); border:1px solid var(--line-soft); border-radius:var(--r-md);
  padding:10px 12px; display:flex; flex-direction:column; gap:8px; align-items:center;
}
.eo-metric-lbl{ font-size:var(--fs-caption); color:var(--faint); text-transform:uppercase; letter-spacing:var(--tracking-label); font-weight:700; }
.eo-metric-ctl{ display:flex; align-items:center; gap:12px; }
.eo-metric-ctl b{ font-size:24px; font-variant-numeric:tabular-nums; min-width:34px; text-align:center; }
.eo-step{
  width:28px; height:28px; border-radius:50% !important; border:1px solid var(--line);
  background:var(--card); color:var(--text); font-size:15px; cursor:pointer;
  transition:all var(--t-snap) var(--ease);
}
.eo-step:hover{ border-color:var(--line-bright); color:var(--text); }
.eo-skill-lvl{ font-size:var(--fs-caption); color:var(--accent); font-weight:700; }
.eo-charisma-grid{ display:flex; flex-direction:column; }
.eo-charisma-row{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  font-size:var(--fs-small); color:var(--text); padding:7px 2px;
  border-bottom:1px solid var(--line-soft);
}
.eo-charisma-row:last-child{ border-bottom:none; }
.eo-charisma-row.inverse span:first-child{ color:var(--muted); }
.eo-yn{ display:flex; gap:4px; }
.eo-yn-btn{
  appearance:none; border:1px solid var(--line); background:transparent; color:var(--faint);
  font-size:var(--fs-caption); font-weight:700; padding:2px 10px; cursor:pointer; border-radius:999px !important;
}
.eo-yn-btn.on{ background:var(--accent); border-color:var(--accent); color:#fff; }

/* ---------- Regulation ---------- */
.eo-protocol-grid{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(170px,1fr)); gap:8px; margin-bottom:16px;
}
.eo-protocol-btn{
  appearance:none; background:var(--card); border:1px solid var(--line); color:var(--text);
  font-size:var(--fs-small); font-weight:600; padding:13px 12px; cursor:pointer;
  border-radius:var(--r-md); text-align:left;
  transition:all var(--t-snap) var(--ease);
}
.eo-protocol-btn:hover{ border-color:var(--line-bright); background:var(--card-hover); }
.eo-protocol-btn.active{ border-color:var(--accent); background:rgba(var(--accent-rgb),.10); }
.eo-protocol-form{ margin-bottom:16px; }
.eo-audio-card b{ font-size:var(--fs-content); }

/* ---------- Health trends ---------- */
.eo-trend-bars{
  display:flex; align-items:flex-end; gap:4px; height:90px; padding-top:6px;
}
.eo-trend-bars span{ flex:1; display:flex; align-items:flex-end; height:100%; }
.eo-trend-bars i{
  display:block; width:100%; border-radius:2px 2px 0 0 !important; min-height:2px;
  background:var(--line-bright);
}
.eo-trend-bars i.good{ background:rgba(var(--good-rgb),.75); }
.eo-trend-bars i.bad{ background:rgba(var(--danger-rgb),.6); }

/* ---------- Dream Bank ---------- */
.eo-dream-board{
  display:grid; grid-template-columns:repeat(5, minmax(0,1fr)); gap:12px; align-items:start;
}
@media (max-width:1200px){ .eo-dream-board{ grid-template-columns:repeat(2, minmax(0,1fr)); } }
.eo-dream-col{
  background:var(--panel); border:1px solid var(--line-soft); border-radius:var(--r-lg);
  padding:10px; display:flex; flex-direction:column; gap:8px; min-height:120px;
}
.eo-dream-col.now{ border-color:rgba(var(--accent-rgb),.5); }
.eo-dream-col-head{
  display:flex; justify-content:space-between; align-items:baseline;
  font-size:var(--fs-label); text-transform:uppercase; letter-spacing:var(--tracking-label);
  color:var(--muted); font-weight:700; padding:2px 4px 6px;
  border-bottom:1px solid var(--line-soft);
}
.eo-dream-col.now .eo-dream-col-head{ color:var(--accent); }
.eo-dream-col-head span{ color:var(--faint); font-weight:500; }
.eo-dream{
  background:var(--card); border:1px solid var(--line); border-radius:var(--r-md);
  overflow:hidden;
}
.eo-dream-top{ padding:9px 11px; cursor:pointer; display:flex; flex-direction:column; gap:2px; }
.eo-dream-top:hover{ background:var(--card-hover); }
.eo-dream-top b{ font-size:var(--fs-small); line-height:1.35; }
.eo-dream-top span{ font-size:var(--fs-caption); color:var(--faint); }
.eo-dream-detail{ padding:10px 11px; border-top:1px solid var(--line-soft); display:flex; flex-direction:column; gap:9px; }
.eo-dream-empty{ text-align:center; color:var(--faint); font-size:var(--fs-small); padding:12px 0; }

/* ---------- Mood Board ---------- */
.eo-mood-grid{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(230px,1fr)); gap:16px;
  padding-top:4px;
}
.eo-mood-item{
  background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg);
  overflow:hidden; transition:transform var(--t-base) var(--ease), border-color var(--t-base) var(--ease);
}
.eo-mood-item:hover{ transform:translateY(-2px); border-color:var(--line-bright); }
.eo-mood-img{ height:140px; background:var(--card-subtle); overflow:hidden; display:flex; align-items:center; justify-content:center; }
.eo-mood-img img{ width:100%; height:100%; object-fit:cover; display:block; }
.eo-mood-img.broken img{ display:none; }
.eo-mood-noimg{
  font-size:34px; font-weight:700; color:var(--faint);
  background:linear-gradient(150deg, var(--card-2), var(--card-subtle));
  width:100%; height:100%; display:flex; align-items:center; justify-content:center;
}
.eo-mood-body{ padding:11px 13px; display:flex; flex-direction:column; gap:3px; cursor:pointer; }
.eo-mood-body b{ font-size:var(--fs-small); }
.eo-mood-meta{ font-size:var(--fs-caption); color:var(--faint); }
.eo-mood-body p{ margin:4px 0 0; font-size:var(--fs-caption); color:var(--muted); line-height:1.5; }
.eo-mood-edit{ padding:11px 13px; border-top:1px solid var(--line-soft); display:flex; flex-direction:column; gap:9px; }

/* ---------- Overlay + modal (capture router, proof entry) ---------- */
.eo-overlay{
  position:fixed; inset:0; z-index:400; display:none;
  align-items:flex-start; justify-content:center;
  background:rgba(0,0,0,.55); backdrop-filter:blur(2px);
  padding:9vh 20px 20px; overflow-y:auto;
}
.eo-overlay.open{ display:flex; }
.eo-modal{
  width:min(620px, 100%); background:var(--panel); border:1px solid var(--line);
  border-radius:var(--r-xl); box-shadow:var(--sh-3); overflow:hidden;
  animation:eoModalIn .18s var(--ease);
}
.eo-modal-sm{ width:min(420px, 100%); }
@keyframes eoModalIn{ from{ opacity:0; transform:translateY(8px);} to{ opacity:1; transform:none;} }
.eo-modal-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:13px 18px; border-bottom:1px solid var(--line);
}
.eo-modal-head b{ font-size:var(--fs-content); }
.eo-modal-body{ padding:16px 18px 18px; display:flex; flex-direction:column; gap:12px; }
.eo-scope-qs{ display:flex; flex-direction:column; gap:2px; }
.eo-route-hint{
  font-size:var(--fs-small); color:var(--accent); min-height:18px; font-weight:600;
}
.eo-routes{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:8px; }
.eo-route-btn{
  appearance:none; text-align:left; background:var(--card); border:1px solid var(--line);
  border-radius:var(--r-md); padding:10px 12px; cursor:pointer; color:var(--text);
  display:flex; flex-direction:column; gap:2px;
  transition:all var(--t-snap) var(--ease);
}
.eo-route-btn:hover{ border-color:var(--line-bright); background:var(--card-hover); }
.eo-route-btn b{ font-size:var(--fs-small); }
.eo-route-btn span{ font-size:var(--fs-caption); color:var(--faint); line-height:1.4; }

/* Command's direct Inbox capture keeps the familiar Thought Capture controls
   while sitting naturally in the shared overlay. */
.eo-inbox-capture-modal{ width:min(760px, 100%); }
.eo-inbox-capture-modal .eo-modal-head > div{ display:flex; align-items:center; gap:10px; }
.eo-inbox-capture-sub{ margin:0; color:var(--faint); font-size:var(--fs-small); }
.eo-inbox-capture-input{ min-height:128px; resize:vertical; }
.eo-inbox-capture-foot{ display:flex; align-items:center; justify-content:space-between; gap:12px; }

/* ---------- Topbar quick buttons ---------- */
.eo-top-btn{
  appearance:none; display:inline-flex; align-items:center; gap:6px;
  background:var(--card); border:1px solid var(--line); color:var(--text);
  font-size:var(--fs-small); font-weight:600; padding:5px 12px; cursor:pointer;
  border-radius:var(--r-md); margin-right:8px;
  transition:all var(--t-snap) var(--ease);
}
.eo-top-btn:hover{ border-color:var(--line-bright); }
.eo-top-btn.eo-top-reg{ color:var(--warn); }

/* ---------- Nav section marker (used by rescue-mode CSS) ---------- */
.eo-nav-sec-main{ display:flex; }

/* ---------- Auto-Suggestion: a private reading page. The words are the
   interface — chrome recedes until hovered. There is no edit mode: the
   title and body are click-to-edit in place, and a picture rail runs down
   the right of the text (drag & drop images onto it). ---------- */
#eoAutosuggestPanel{ padding-bottom:12px; }
.eo-as-layout{ display:flex; flex-direction:column; flex:1 1 auto; min-height:0; gap:0; padding-top:4px; }

/* Selector bar: present but whisper-quiet until you reach for it */
.eo-as-topbar{ display:flex; gap:8px; align-items:center; flex:none; opacity:.45; transition:opacity var(--t-snap) var(--ease); }
.eo-as-topbar:hover, .eo-as-topbar:focus-within{ opacity:1; }
.eo-as-select{ flex:1; min-width:0; }
.eo-as-rail-empty{ font-size:var(--fs-small); color:var(--faint); }

/* The "page": no card chrome — just text floating on the background */
.eo-as-doc{ flex:1 1 auto; min-height:0; overflow-y:auto; padding:6px 18px 48px; }
.eo-as-doc.eo-card{ background:transparent; border:none; box-shadow:none; }

/* Document head: compact, left-aligned; actions fade in on hover */
.eo-as-doc-head{
  display:flex; align-items:flex-end; justify-content:space-between; gap:14px; flex-wrap:wrap;
  padding:10px 0 12px; margin-bottom:6px;
  border-bottom:1px solid var(--line-soft);
}
.eo-as-doc-head h1{
  margin:0; font-family:var(--font-reading);
  font-size:27px; font-weight:600; letter-spacing:-.2px; line-height:1.2; color:var(--text);
  cursor:text; border-radius:var(--r-sm);
}
.eo-as-doc-head h1:hover{ background:rgba(var(--accent-rgb),.05); }
.eo-as-doc-meta{
  margin-top:4px; font-size:var(--fs-caption); color:var(--faint);
  text-transform:uppercase; letter-spacing:var(--tracking-wide);
}
.eo-as-actions{ opacity:.3; transition:opacity var(--t-snap) var(--ease); }
.eo-as-actions select.eo-input{ width:auto; max-width:220px; }
.eo-as-doc:hover .eo-as-actions, .eo-as-actions:focus-within{ opacity:1; }

.eo-as-doc-empty-state{ max-width:640px; margin:36px auto 0; text-align:center; }
.eo-as-doc-empty-state p{ font-size:var(--fs-content); color:var(--text); margin:0 0 4px; }

/* Narration player: one slim row under the doc head. Stays visible on its
   own — unlike .eo-as-actions it does not fade until hover, since it needs
   to read at a glance while a clip is playing. */
.eo-as-audio{
  flex-basis:100%; display:flex; align-items:center; gap:10px;
  margin-top:2px; padding:7px 10px;
  border:1px solid var(--line-soft); border-radius:var(--r-md);
  background:rgba(var(--accent-rgb),.04);
}
.eo-as-audio.eo-as-audio-empty{ background:none; border-style:dashed; padding:5px 10px; }
.eo-as-audio-play{
  flex:0 0 auto; width:26px; height:26px; border-radius:50%; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  border:1px solid rgba(var(--accent-rgb),.5); background:var(--card); color:var(--accent-soft);
  font-size:11px; line-height:1; transition:background var(--t-snap) var(--ease), color var(--t-snap) var(--ease);
}
.eo-as-audio-play:hover{ background:var(--accent); color:#fff; }
.eo-as-audio-dl{ font-size:12px; }
.eo-as-audio-scrub{
  flex:1 1 auto; min-width:60px; height:4px; -webkit-appearance:none; appearance:none;
  background:var(--line); border-radius:2px; cursor:pointer;
}
.eo-as-audio-scrub::-webkit-slider-thumb{
  -webkit-appearance:none; width:11px; height:11px; border-radius:50%;
  background:var(--accent); border:2px solid var(--card); box-shadow:0 0 0 1px rgba(var(--accent-rgb),.5);
}
.eo-as-audio-time{
  flex:0 0 auto; font-size:11px; font-variant-numeric:tabular-nums; color:var(--faint); min-width:70px; text-align:center;
}
.eo-as-audio-name{
  flex:0 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  font-size:var(--fs-caption); color:var(--muted);
}
.eo-as-audio-add .eo-btn, .eo-as-audio-replace .eo-btn{ cursor:pointer; }

/* Two columns: the text page, and a picture rail that runs its full height */
.eo-as-page{ display:flex; align-items:stretch; gap:26px; }
.eo-as-text{ flex:1 1 auto; min-width:0; max-width:1090px; }

/* Body: serif, left-aligned, generous leading, only slight indent */
.eo-as-doc-body{
  padding:8px 0 0 6px;
  font-family:var(--font-reading);
  font-size:18px; line-height:1.85; color:var(--text);
  cursor:text; border-radius:var(--r-sm);
}
.eo-as-doc-body:hover{ background:rgba(var(--accent-rgb),.03); }
.eo-as-doc-body h1, .eo-as-doc-body h2, .eo-as-doc-body h3{
  margin:30px 0 12px; font-weight:600; color:var(--text); line-height:1.3;
}
.eo-as-doc-body h1:first-child, .eo-as-doc-body h2:first-child, .eo-as-doc-body h3:first-child{ margin-top:2px; }
.eo-as-doc-body h1{ font-size:1.45em; }
.eo-as-doc-body h2{ font-size:1.2em; }
.eo-as-doc-body h3{
  font-size:.75em; font-family:inherit; text-transform:uppercase; letter-spacing:var(--tracking-wide);
  color:var(--accent-soft); font-weight:700;
}
.eo-as-doc-body p{ margin:0 0 1.05em; }
.eo-as-doc-body p.eo-as-doc-empty{ color:var(--faint); font-style:italic; }
.eo-as-doc-body strong{ color:var(--text); font-weight:700; }
.eo-as-doc-body em{ color:var(--accent-soft); }
.eo-as-doc-body blockquote{
  margin:1.3em 0; padding:2px 0 2px 20px;
  border-left:2px solid rgba(var(--accent-rgb),.45);
  background:none; font-style:italic; font-size:1.04em; line-height:1.8;
  color:var(--muted);
}
.eo-as-doc-body blockquote p{ margin:0 0 6px; }
.eo-as-doc-body blockquote p:last-child{ margin-bottom:0; }
/* Dividers as a small flourish instead of a rule across the page */
.eo-as-doc-body hr{
  border:none; height:auto; margin:1.8em 0; text-align:left; background:none;
}
.eo-as-doc-body hr::after{
  content:"\00B7\2002\00B7\2002\00B7"; color:rgba(var(--accent-rgb),.6);
  font-size:18px; letter-spacing:4px;
}

/* Inline editors: styled exactly like the page they replace */
.eo-as-title-edit{
  width:100%; max-width:640px; background:transparent; outline:none;
  border:none; border-bottom:1px solid rgba(var(--accent-rgb),.5);
  font-family:var(--font-reading); color:var(--text);
  font-size:27px; font-weight:600; letter-spacing:-.2px; line-height:1.2; padding:0 2px 2px;
}
.eo-as-body-edit{
  display:block; width:100%; resize:none; outline:none; overflow:hidden;
  background:transparent; border:none; border-left:2px solid rgba(var(--accent-rgb),.5);
  padding:8px 0 0 10px; margin-left:-6px;
  font-family:var(--font-reading); color:var(--text);
  font-size:18px; line-height:1.85;
}
.eo-as-body-edit::placeholder, .eo-as-title-edit::placeholder{ color:var(--faint); }

/* Pinboard: a corkboard-like strip as long as the text. Photos are tacked
   wherever you drop them, each at its own tilt, and can be dragged around. */
.eo-as-media{
  position:relative; flex:1 1 280px; min-width:220px; min-height:260px;
  border-left:1px solid var(--line-soft); border-radius:var(--r-sm);
  overflow:hidden;
}
.eo-as-media.dragging{ background:rgba(var(--accent-rgb),.06); border-left-color:var(--accent); }
.eo-as-board-hint{
  position:absolute; inset:14px; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:2px; text-align:center;
  border:1px dashed var(--line); border-radius:var(--r-md); cursor:pointer;
  font-size:var(--fs-caption); color:var(--faint);
  opacity:.55; transition:opacity var(--t-snap) var(--ease), border-color var(--t-snap) var(--ease);
}
.eo-as-board-hint span{ font-size:10px; letter-spacing:.5px; pointer-events:none; }
.eo-as-board-hint:hover, .eo-as-media.dragging .eo-as-board-hint{
  opacity:1; border-color:rgba(var(--accent-rgb),.6); color:var(--muted);
}

/* A pinned photo: little white-framed print with a thumbtack.
   Width is per-pin (--pw, set inline) so each photo can be resized. */
.eo-as-pin{
  position:absolute; width:var(--pw, 172px); margin:0; cursor:grab;
  transform:rotate(var(--rot)); transform-origin:50% 8px;
  filter:drop-shadow(0 8px 14px rgba(0,0,0,.45));
  transition:transform .18s var(--ease);
  touch-action:none; user-select:none;
}
.eo-as-pin img{
  display:block; width:100%; pointer-events:none;
  border:6px solid #f3efe6; border-bottom-width:14px; border-radius:2px;
}
/* the thumbtack */
.eo-as-pin::after{
  content:""; position:absolute; top:-6px; left:50%; margin-left:-8px;
  width:16px; height:16px; border-radius:50%;
  background:radial-gradient(circle at 34% 28%, #ff9d94, #e5423a 55%, #7e1410);
  box-shadow:0 3px 4px rgba(0,0,0,.55), inset 0 -2px 3px rgba(0,0,0,.35);
  z-index:2;
}
.eo-as-pin:hover{ transform:rotate(var(--rot)) scale(1.03); z-index:5; }
.eo-as-pin.lifting{
  cursor:grabbing; z-index:9; transition:none;
  transform:rotate(var(--rot)) scale(1.06);
  filter:drop-shadow(0 16px 22px rgba(0,0,0,.55));
}
.eo-as-img-x{
  position:absolute; top:2px; right:-6px; width:22px; height:22px;
  border:none; border-radius:50%; cursor:pointer; font-size:11px; line-height:1;
  background:rgba(0,0,0,.6); color:#fff; opacity:0; z-index:3;
  transition:opacity var(--t-snap) var(--ease);
}
.eo-as-pin:hover .eo-as-img-x{ opacity:1; }

/* Resize corner — same square nwse-resize handle as the Maps whiteboard
   nodes (.maps-resize), reused here so drag-to-resize reads as one pattern
   across the app. */
.eo-as-pin-resize{
  position:absolute; right:-5px; bottom:8px; width:12px; height:12px; border-radius:3px;
  background:var(--accent); border:2px solid var(--bg); cursor:nwse-resize;
  opacity:0; transition:opacity var(--t-snap) var(--ease); z-index:4;
}
.eo-as-pin:hover .eo-as-pin-resize{ opacity:1; }
.eo-as-pin-resize:hover{ transform:scale(1.2); }

/* The cute drop: falls in from above, squashes on landing, wobbles settled */
@keyframes eoPinDrop{
  0%  { transform:translateY(-110px) rotate(calc(var(--rot) - 16deg)) scale(1.22); opacity:0; }
  45% { transform:translateY(6px)    rotate(calc(var(--rot) + 6deg))  scale(.92, .86); opacity:1; }
  62% { transform:translateY(-10px)  rotate(calc(var(--rot) - 4deg))  scale(1.05); }
  78% { transform:translateY(3px)    rotate(calc(var(--rot) + 2deg))  scale(.98, .96); }
  90% { transform:translateY(-2px)   rotate(calc(var(--rot) - 1deg))  scale(1.01); }
  100%{ transform:translateY(0)      rotate(var(--rot))               scale(1); }
}
.eo-as-pin.fresh{ animation:eoPinDrop .7s cubic-bezier(.3,1.2,.5,1) both; }
/* the tack pops in only once the photo has landed */
@keyframes eoTackIn{
  0%,70%{ opacity:0; transform:scale(.4); }
  85%   { opacity:1; transform:scale(1.35); }
  100%  { opacity:1; transform:scale(1); }
}
.eo-as-pin.fresh::after{ animation:eoTackIn .8s var(--ease) both; }