/* =========================================================================
   EMPIRIUM OS — MOBILE: THE FEEL LAYER
   The phone-sized counterpart to renderer/styles/eo-feel.css. Loaded LAST so
   these presentational rules win the cascade over app.css and the per-screen
   sheets. Everything here makes the app read as powered-on: lit HUD corners,
   a travelling signal packet on the chrome seams, real elevation, pointer
   acknowledgement, and a completion tick that draws instead of snapping.

   Scope discipline (same contract as desktop): skin + motion only. No
   selector reaches store/persistence/sync/audio logic. All decorative motion
   animates transform/opacity only, and every loop flattens under the
   prefers-reduced-motion guard at the foot of this file.

   NOT ported from desktop: hover states (no pointer on a phone), the boot
   overlay (the launch splash video already owns cold start), and the ambient
   grid/scanline (desktop deliberately retired it — structure.css:803).
   ========================================================================= */

:root{
  /* Elevation — app.css:393 already referenced --sh-1 but mobile's :root
     never defined it, so that segmented-control shadow rendered as nothing.
     Same values as renderer/styles/tokens.css so depth reads identically. */
  --sh-1:0 1px 2px rgba(0,0,0,.5);
  --sh-2:0 2px 8px rgba(0,0,0,.5), 0 12px 32px rgba(0,0,0,.45);
  --sh-3:0 24px 64px rgba(0,0,0,.6);

  /* Motion + HUD tokens the desktop sheets assume exist. */
  --ease-hud:cubic-bezier(.2,.8,.2,1);
  --hud-edge-soft:rgba(var(--accent-rgb),.22);
  --eo-seam-cycle:4.6s;      /* signal-packet period, matches desktop */
}

/* =======================================================================
   1 · LIT HUD CORNERS — a tick of accent light on two corners of a panel.
   Desktop pins these at -1px because its shell corners are near-square
   (--hud-r:3px). Mobile cards are 12px-rounded and several of them clip
   (.ps-card / .summary / .cmd-hs all set overflow:hidden), so the brackets
   are inset 6px instead: inside the curve, inside the clip, still reading
   as a machined corner. Zero layout cost — pure pseudo-elements.
   ======================================================================= */
.card,
.ps-card,
.suggestion,
.hud-corner-bracket{ position:relative; }

.card::before,.card::after,
.ps-card::before,.ps-card::after,
.suggestion::before,.suggestion::after,
.hud-corner-bracket::before,.hud-corner-bracket::after{
  content:''; position:absolute; z-index:1;
  width:9px; height:9px; pointer-events:none;
  border:1px solid var(--hud-edge-soft); border-radius:0;
}
.card::before,
.ps-card::before,
.suggestion::before,
.hud-corner-bracket::before{ top:6px; left:6px; border-right:0; border-bottom:0; }

.card::after,
.ps-card::after,
.suggestion::after,
.hud-corner-bracket::after{ right:6px; bottom:6px; border-left:0; border-top:0; }

/* The one card that must not get them: the routine status bar renders its
   own flush segment track to the card edge, and a bracket would collide. */
.cmd-hs::before,.cmd-hs::after{ content:none; }

/* Cards earn real elevation now that the tokens exist. */
.card{ box-shadow:var(--sh-1); }
.ps-card{ box-shadow:var(--sh-1); }

/* =======================================================================
   2 · SIGNAL PACKET ON THE CHROME SEAMS
   A lit packet travels the 1px hairline under the topbar and over the tab
   bar every 4.6s — the desktop's eoSignalFlowX (structure.css:1120) at
   phone scale. Costs zero pixels: it rides the border that is already there.
   overflow:hidden keeps the packet's overshoot from widening the layout.
   ======================================================================= */
.topbar{ overflow:hidden; }
.tabbar{ overflow:hidden; }

.topbar::after,
.tabbar::after{
  content:''; position:absolute; left:0;
  width:32%; height:2px; z-index:1;
  pointer-events:none; opacity:0;
  background:linear-gradient(90deg,
    transparent 0 6%,
    rgba(var(--accent-rgb),.08) 12%,
    rgba(var(--accent-rgb),.85) 30%,
    rgba(var(--accent-rgb),.14) 46%,
    transparent 62%);
  box-shadow:0 0 6px rgba(var(--accent-rgb),.45), 0 0 15px rgba(var(--accent-rgb),.2);
  will-change:transform,opacity;
  /* purpose: "the system is powered" seam telemetry — transform/opacity only */
  animation:mfSeamFlow var(--eo-seam-cycle) linear infinite;
}
.topbar::after{ bottom:-1px; }
.tabbar::after{ top:-1px; }
/* Offset so the two seams never pulse in lockstep — reads as circulation
   rather than a metronome. */
.tabbar::after{ animation-delay:calc(var(--eo-seam-cycle) / -2); }

@keyframes mfSeamFlow{
  0%  { transform:translate3d(-110%,0,0); opacity:0; }
  8%  { opacity:.85; }
  50% { opacity:.7; }
  84% { opacity:.8; }
  92% { opacity:0; }
  100%{ transform:translate3d(320%,0,0); opacity:0; }
}

/* =======================================================================
   3 · POINTER ACKNOWLEDGEMENT — the system heard your thumb.
   js/mobile-feel.js spawns a ring at the touch point on pointerdown (not
   click: on touch the ring must land with the finger, not after it lifts).
   Fixed-positioned and detached from the row, so a list re-render can never
   replay or orphan it. Cyan = command registered, green = completion logged.
   ======================================================================= */
.mf-ping{
  position:fixed; z-index:600;
  width:34px; height:34px; margin:-17px 0 0 -17px;
  border:1px solid rgba(var(--accent-rgb),.75); border-radius:50%;
  pointer-events:none; opacity:0;
  animation:mfPing .36s var(--ease-hud) both;
}
.mf-ping.good{ border-color:rgba(var(--good-rgb),.85); }
@keyframes mfPing{
  0%  { opacity:.9; transform:scale(.3); }
  100%{ opacity:0;  transform:scale(1.2); }
}

/* =======================================================================
   4 · THE COMPLETION TICK DRAWS IN
   app.css only creates .check i::after in the checked state, so there was
   no element to animate from and the tick snapped on. The geometry moves to
   the base rule here; :checked now only flips opacity/transform, which the
   transition can actually interpolate. Same .16s scale-in as desktop
   (eo-feel.css:281). Geometry is unchanged — the tick lands where it did.
   ======================================================================= */
.check i::after{
  content:''; position:absolute; left:8px; top:3px;
  width:6px; height:12px;
  border:solid var(--on-accent); border-width:0 2.5px 2.5px 0;
  opacity:0; transform:rotate(45deg) scale(.4);
  transition:transform .16s var(--ease-hud), opacity .12s ease;
}
.check[aria-checked="true"] i::after{
  opacity:1; transform:rotate(45deg) scale(1);
}

/* =======================================================================
   5 · LIVE DOCK — binaural + focus session reach-through on Command.
   Rendered by mobile-feel.js into Command's own markup, directly under the
   hero banner, and ONLY while something is actually running: zero pixels
   the rest of the time, which is the whole point. Each chip deep-links
   through the app's already-exported MobileApp.openUtility() — no new
   navigation surface is invented here.
   ======================================================================= */
.cmd-dock{
  display:flex; align-items:center; gap:8px;
  min-height:36px; margin:-4px 0 14px; padding:0 10px;
  background:linear-gradient(180deg,var(--card-2),var(--card));
  border:1px solid rgba(var(--accent-rgb),.28); border-radius:var(--r-md);
  box-shadow:var(--sh-1), inset 0 1px 0 rgba(var(--accent-rgb),.06);
  overflow:hidden;
}

/* The live tick — one breathing dot that says the strip is not a label. */
.cmd-dock-live{
  flex:none; width:7px; height:7px; border-radius:50%;
  background:var(--accent); box-shadow:0 0 4px rgba(var(--accent-rgb),.5);
  animation:mfDockPing 2.1s ease-out infinite;
}
@keyframes mfDockPing{
  0%  { box-shadow:0 0 0 0 rgba(var(--accent-rgb),.35); }
  70% { box-shadow:0 0 0 6px rgba(var(--accent-rgb),0); }
  100%{ box-shadow:0 0 0 0 rgba(var(--accent-rgb),0); }
}

.cmd-dock-item{
  flex:0 1 auto; min-width:0;
  display:flex; align-items:baseline; gap:6px;
  /* The strip is 36px, so the visual chip stays small while the tap target
     is stretched to full height by the padding — same trick as .step-dot. */
  padding:9px 2px; margin:0;
  background:none; border:0; cursor:pointer; color:var(--muted);
  font-family:var(--font-mono); font-size:10px; letter-spacing:1.1px;
  text-transform:uppercase; white-space:nowrap;
}
.cmd-dock-item:active{ color:var(--text); }
.cmd-dock-item b{
  font-family:var(--font-mono); font-size:12px; font-weight:600;
  letter-spacing:.04em; color:var(--accent);
  font-variant-numeric:tabular-nums;   /* countdown must not wobble per tick */
  text-transform:none;
}
.cmd-dock-item.is-focus b{ color:var(--good); }
.cmd-dock-sep{ flex:none; color:var(--faint); font-size:11px; }

/* Binaural gets an inline stop because killing sound fast is a real need and
   the action is instant and reversible. Focus deliberately does NOT: ending
   a session writes a history record and has its own confirm flow, so that
   chip only deep-links to the screen that owns it. */
.cmd-dock-stop{
  flex:none; margin-left:auto;
  width:30px; height:30px; padding:0;
  display:flex; align-items:center; justify-content:center;
  background:var(--card-subtle); color:var(--muted);
  border:1px solid var(--line-soft); border-radius:var(--r-sm);
  cursor:pointer; font-size:9px; line-height:1;
}
.cmd-dock-stop:active{ color:var(--danger); border-color:rgba(var(--danger-rgb),.4); }

/* =======================================================================
   6 · MOTION GUARDS
   app.css:628 already kills animation+transition app-wide under
   prefers-reduced-motion. These remove the ambient loops outright so a
   flattened frame never freezes a packet mid-travel or a ping mid-expand.
   ======================================================================= */
@media (prefers-reduced-motion:reduce){
  .topbar::after,.tabbar::after{ display:none; }
  .cmd-dock-live{ animation:none; }
  .mf-ping{ display:none; }
  .check i::after{ transition:none; }
}