/* ============================================================
   Stoic+ — App shell & interaction styles.
   The responsive web-app column, bottom nav, sliders, and motion.
   All color/type/radius/space/motion values come from tokens in
   colors_and_type.css — no raw palette hex lives here.

   NOTE: this is a real hosted web app, not a device mockup.
   Per CLAUDE.md §0 + Design Law 10 there is no phone bezel, no
   notch, no simulated status bar. Full-bleed on phones; a centered
   ~440px column letterboxed by the near-black bg on wider viewports.
   ============================================================ */

* { box-sizing: border-box; }

/* The document itself never scrolls — all scrolling lives inside .viewport.
   This kills the document scrollbar, so the centered column can't shift
   sideways (or change width) between screens. */
html, body { margin: 0; height: 100%; overflow: hidden; }

body {
  /* Near-black letterboxing for the app column on wide viewports. */
  background: var(--color-bg);
  background: radial-gradient(120% 90% at 50% 0%, #0c1014 0%, #050608 70%) fixed;
  font-family: var(--font-sans);
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: stretch;
  justify-content: center;
  -webkit-font-smoothing: antialiased;
  color-scheme: dark;
}

/* #root is the React mount sitting between body (the flex centering context)
   and .app. Make it transparent to layout so .app is body's actual flex child.
   Otherwise #root shrink-wraps to content and .app's width:100% tracks it —
   making the column a different width on every screen. */
#root { display: contents; }

/* The single app column. Mobile: full-bleed. Desktop/tablet: a
   centered ~440px column, letterboxed by the body background. */
.app {
  position: relative;
  width: 100%;
  max-width: 440px;
  /* A DEFINITE device-height frame so the column is the same size on every
     screen — the content area (.viewport) scrolls inside it. Using min-height
     here would let tall screens grow the frame and short ones shrink it. */
  height: 100vh;
  height: 100dvh;
  background: var(--color-bg);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

@media (min-width: 480px) {
  body { padding: 24px 16px; align-items: center; }
  .app {
    min-height: 0;
    height: 880px;
    max-height: calc(100dvh - 48px);
    border-radius: var(--radius-xl);
    border: 1px solid #1a2027;
    box-shadow: 0 40px 110px -34px #000;
  }
}

/* Scrolling screen region. Bottom padding clears the floating nav;
   top/side padding respect notch safe-areas on installed/mobile. */
.viewport {
  flex: 1 1 auto;
  min-height: 0; /* let the flex child shrink so it scrolls instead of growing .app */
  overflow-y: auto;
  overflow-x: hidden; /* never a horizontal scrollbar — keeps width constant */
  -webkit-overflow-scrolling: touch;
  /* Hide the scrollbar on every engine so it never consumes width: a screen
     that scrolls looks identical in width to one that doesn't. */
  scrollbar-width: none;     /* Firefox */
  -ms-overflow-style: none;  /* old Edge/IE */
  position: relative;
  z-index: 1;
  padding: calc(20px + env(safe-area-inset-top)) 18px
           calc(108px + env(safe-area-inset-bottom));
}
.viewport::-webkit-scrollbar { width: 0; height: 0; display: none; } /* WebKit */
/* Gating screens (sign-in, welcome) carry no bottom nav → no clearance. */
.viewport.flush { padding-bottom: calc(20px + env(safe-area-inset-bottom)); }

/* Ambient light layer the glass refracts (behind everything). */
.app > .ambient { z-index: 0; }

/* ---- Entrance motion: transform only, content stays visible if
        the timeline is frozen (Design Law / entrance rule). ---- */
.screen { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  .screen { animation: rise var(--dur-slow) var(--ease-out); }
}
@keyframes rise { from { transform: translateY(10px); } to { transform: none; } }

.press { transition: transform var(--dur-fast) var(--ease-out), filter var(--dur-fast) var(--ease-out); }
.press:active { transform: scale(0.97); filter: brightness(0.92); }

/* ---- Floating glass bottom nav ---- */
.nav {
  position: absolute;
  left: 18px; right: 18px;
  bottom: calc(18px + env(safe-area-inset-bottom));
  z-index: 30;
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 8px 10px;
  border-radius: var(--radius-pill);
}
.nav button {
  background: none; border: none; cursor: pointer; flex: 1;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  color: var(--color-text-faint); font-family: var(--font-sans);
  font-size: 10px; font-weight: 600; letter-spacing: 0.02em; padding: 8px 0;
  border-radius: var(--radius-pill);
  transition: color var(--dur-fast) var(--ease-out);
  min-height: 44px;
}
.nav button.active { color: var(--color-amber); }
.nav button.active .nav-lbl {
  background: var(--grad-amber);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.nav button.active svg { stroke: url(#navGold); }

/* ---- Glass sheet motion ---- */
@media (prefers-reduced-motion: no-preference) {
  .sheet-scrim { animation: scrimIn var(--dur-mid) var(--ease-out); }
  .sheet-panel { animation: sheetUp var(--dur-slow) var(--ease-out); }
}
@keyframes scrimIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes sheetUp { from { transform: translateY(40px); } to { transform: none; } }

/* ---- Check-in slider (segmented 1–10 range) ---- */
.metric-range {
  -webkit-appearance: none; appearance: none; width: 100%; height: 8px;
  border-radius: var(--radius-pill); outline: none; cursor: pointer; margin: 0;
  background: linear-gradient(90deg, rgba(212,204,138,0.7) 0 var(--pct,50%), rgba(255,255,255,0.07) var(--pct,50%) 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.28), inset 0 0 0 1px rgba(255,255,255,0.08);
}
.metric-range::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 24px; height: 24px; border-radius: var(--radius-pill);
  background: rgba(255,255,255,0.18); -webkit-backdrop-filter: blur(8px) saturate(140%); backdrop-filter: blur(8px) saturate(140%);
  border: 1px solid rgba(255,255,255,0.55);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.6), 0 0 0 5px rgba(187,176,101,0.22), 0 2px 8px rgba(0,0,0,0.55); cursor: grab;
}
.metric-range:active::-webkit-slider-thumb { cursor: grabbing; box-shadow: inset 0 1px 0 rgba(255,255,255,0.6), 0 0 0 7px rgba(187,176,101,0.3), 0 2px 8px rgba(0,0,0,0.55); }
.metric-range::-moz-range-thumb {
  width: 22px; height: 22px; border-radius: var(--radius-pill); background: rgba(255,255,255,0.18);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.55); box-shadow: inset 0 1px 0 rgba(255,255,255,0.6), 0 0 0 5px rgba(187,176,101,0.22); cursor: grab;
}
.metric-range::-moz-range-track { background: transparent; }

/* ---- Check-badge draw-on (end of check-in) ---- */
.check-draw { stroke-dasharray: 30; stroke-dashoffset: 0; }
@media (prefers-reduced-motion: no-preference) {
  .check-badge .check-draw { animation: checkDraw 600ms var(--ease-out) both; }
}
@keyframes checkDraw { 0% { stroke-dashoffset: 30; } 45% { stroke-dashoffset: 30; } 100% { stroke-dashoffset: 0; } }

/* ---- Live trend pulsing end-dot ---- */
.live-dot { position: absolute; width: 11px; height: 11px; border-radius: var(--radius-pill); background: var(--color-amber); box-shadow: 0 0 0 4px rgba(187,176,101,0.18), var(--glow-amber); transform: translate(-50%,-50%); }
.live-dot::after { content: ""; position: absolute; inset: -4px; border-radius: var(--radius-pill); border: 2px solid rgba(187,176,101,0.5); }
@media (prefers-reduced-motion: no-preference) {
  .live-dot::after { animation: ping 2.4s var(--ease-out) infinite; }
}
@keyframes ping { 0% { transform: scale(1); opacity: 0.8; } 70%,100% { transform: scale(2.4); opacity: 0; } }

/* ---- Confirmation badge pop + staggered welcome rows ---- */
@media (prefers-reduced-motion: no-preference) {
  .pop { animation: pop 460ms var(--ease-out); }
  .welcome-row { animation: rise var(--dur-slow) var(--ease-out); animation-delay: var(--d, 0ms); }
}
@keyframes pop { 0% { transform: scale(0.6); opacity: 0; } 60% { transform: scale(1.08); } 100% { transform: scale(1); opacity: 1; } }

/* ---- Form controls inherit the type system ---- */
input, button, textarea { font-family: var(--font-sans); }
input::placeholder { color: var(--color-text-faint); }

/* ---- Dev-only Prototype-states trigger (hidden unless ?dev) ---- */
.dev-beaker {
  position: absolute; left: 14px; bottom: calc(86px + env(safe-area-inset-bottom));
  z-index: 35; width: 38px; height: 38px; border-radius: var(--radius-pill);
  display: flex; align-items: center; justify-content: center;
  color: var(--color-text-faint); cursor: pointer;
}

/* Boot fallback before React mounts / if scripts fail to load. */
.boot {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  color: var(--color-text-faint); font-size: 14px; font-family: var(--font-sans);
}