/* ============================================================================
 * mystro-hero.css  v1.3.0
 * Destination: /var/www/mystro/css/mystro-hero.css
 * Created: 2026-06-12
 *
 * The single source of truth for the MyStro "hero" visual identity.
 * Derived verbatim from the MyStro Hero Style Guide (2026-06-11), which is
 * itself lifted from the in-app camera CSS (v1.13.5).
 *
 * WHY a shared file: each MyStro screen currently carries its own inline
 * <style>. Linking this one stylesheet per screen gives every page the same
 * tokens + component classes (.btn, .card, .field, .pill, .fab ...) so we
 * stop re-deriving colours and the identity stays consistent everywhere.
 *
 * USAGE: in each screen's <head>, after any reset:
 *   <link rel="stylesheet" href="/css/mystro-hero.css">
 * then build controls with the component classes below.
 *
 * RULE OF THUMB (guide §6): the flowing current is an OUTLINE, never a
 * background. Surfaces stay solid + dark; content is the bright thing.
 * ========================================================================== */

/* --- 1. Tokens (guide §2 + §11) ------------------------------------------- */
:root {
  /* surfaces (sampled from the hero image) */
  --bg:          #060613;            /* near-black page base */
  --panel:       #120c2e;            /* deep-indigo panel/card */
  --line:        #243047;            /* hairline divider */

  /* text */
  --ink:         #eef2f7;            /* primary text on dark */
  --muted:       #8b97aa;            /* secondary / captions */

  /* the hero trio — fixed jobs: cyan=structure, gold=highlight, green=brand */
  --cyan:        #00d4ff;
  --purple:      #667eea;
  --gold:        #d4af37;

  /* brand + state */
  --accent:      #57bd5b;            /* MyStro green — brand chrome ONLY */
  --accent-deep: #1f7340;
  --warn:        #f0b429;
  --bad:         #e5484d;
  --success:     #00e676;            /* electric green = success/ready/uploaded STATE (distinct from --accent brand) */

  /* lifted surfaces for content-heavy screens (guide §6) */
  --surface-0:   #060613;           /* = --bg, the page */
  --surface-1:   #120c2e;           /* = --panel, cards */
  --surface-2:   #18103c;           /* raised rows / headers / hover / fields */
  --surface-3:   #0d0a24;           /* sunk wells / bar bottom stop */
  --hairline:    rgba(0,212,255,.22);/* cyan-tinted top borders */

  /* the signature gradient — two full cycles so gold is ALWAYS in the window */
  --electro: linear-gradient(150deg,
    #00d4ff 0%, #667eea 12%, #d4af37 21%, #d4af37 29%,
    #00d4ff 50%, #667eea 62%, #d4af37 71%, #d4af37 79%, #00d4ff 100%);

  /* the FLOWING current — repeating gradient with ABSOLUTE px stops so the band
     geometry (and the scroll) is identical on every element regardless of its
     size/aspect. Percentage gradients couple the visual angle to each element's
     shape (tall frames vs wide buttons drift out of sync); px stops don't.
     Palindrome cyan->purple->gold->purple->cyan, period 600px -> seamless wrap. */
  --electro-stream: repeating-linear-gradient(150deg,
    #00d4ff 0px, #667eea 150px, #d4af37 300px, #667eea 450px, #00d4ff 600px);

  /* device safe areas */
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bot: env(safe-area-inset-bottom, 0px);
}

/* --- 2. Base reset + page (guide §11) ------------------------------------- */
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body {
  margin: 0;
  min-height: 100%;
  background: var(--bg);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif;
}

/* Optional lit-edge page background (guide §5). Add class="hero-stage" to body
   on immersive screens; content screens can stay flat on --bg. */
.hero-stage {
  background: linear-gradient(180deg, #18103c 0%, var(--bg) 44%, var(--bg) 56%, #18103c 100%);
  background-attachment: fixed;
}

/* --- 3. The signature current (guide §3) ---------------------------------- */
@keyframes btnSweep {
  /* Scroll the stream by ONE 600px period along the 150deg axis:
     V = 600 * (sin150, -cos150) = (300px, 519.615px), down-right. Because the
     stops are absolute px, this same vector applies to EVERY element -> one
     identical angle and one identical speed everywhere (frames + buttons stay
     in lockstep). One full period -> seamless loop. */
  from { background-position: 0 0, 0 0; }
  to   { background-position: 0 0, 300px 519.615px; }
}

/* Any interactive edge can carry the current via .electro / .btn / .fab.
   Transparent border + gradient border-box + slow animated position. */
.electro, .btn, .fab {
  border: 1px solid transparent;
  background:
    linear-gradient(rgba(2,2,9,.95), rgba(2,2,9,.95)) padding-box, /* recessed fill */
    var(--electro-stream) border-box;                              /* the current */
  background-size: 100% 100%, auto;
  background-repeat: no-repeat, repeat;
  animation: btnSweep 14s linear infinite;                         /* slow = ambient */
}

/* --- 4. Buttons (guide §7) ------------------------------------------------- */
.btn {
  appearance: none;
  color: var(--ink);
  font: 600 13px/1 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif;
  padding: 11px 12px;
  border-radius: 12px;
  cursor: pointer;
  min-width: 70px;
  box-shadow: 0 0 10px rgba(102,126,234,.16), inset 0 0 7px rgba(0,212,255,.05);
  text-shadow: 0 0 6px rgba(0,212,255,.3);
  text-decoration: none;             /* so <a class="btn"> matches <button> */
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
}
.btn:active, .fab:active { transform: scale(.97); }
.btn:focus-visible, .fab:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.btn[disabled], .btn.disabled { opacity: .4; pointer-events: none; }
.btn.on { color: #eaf6ff; box-shadow: 0 0 15px rgba(102,126,234,.5), inset 0 0 10px rgba(0,212,255,.16); }

/* Primary CTA — one per screen (guide §7). Solid gradient, no flow, dark ink. */
.btn-primary {
  border: none; animation: none;
  color: #04210d; font-weight: 800;
  background: linear-gradient(150deg, var(--purple), var(--cyan));
  box-shadow: 0 0 14px rgba(0,212,255,.4);
}

/* Secondary — static outline, no flow, so dense screens aren't a field of
   moving borders (guide §6 "ration the current"). */
.btn-secondary {
  border: 1px solid var(--line); animation: none; background: var(--surface-2);
  color: var(--ink); box-shadow: none;
}

/* Destructive — .btn plus red halo + bad ink (guide §7). Never the primary. */
.btn-danger { color: var(--bad); box-shadow: 0 0 10px rgba(229,72,77,.3); }

/* --- 5. Round action button / shutter (guide §7) -------------------------- */
.fab {
  width: 72px; height: 72px; border-radius: 50%;
  background:
    linear-gradient(rgba(2,2,9,.93), rgba(2,2,9,.93)) padding-box,
    var(--electro-stream) border-box;
  display: grid; place-items: center; cursor: pointer;
  box-shadow: 0 0 16px rgba(102,126,234,.4), 0 0 0 5px rgba(0,212,255,.08), inset 0 0 16px rgba(212,175,55,.3);
}
.fab svg { width: 30px; height: 30px; stroke: #fff; stroke-width: 1.4;
  filter: drop-shadow(0 0 5px rgba(255,255,255,.55)); }

/* --- 6. Card / panel (guide §7) ------------------------------------------- */
.card {
  background: var(--panel);
  border: 1px solid rgba(0,212,255,.2);
  border-radius: 18px;
  padding: 24px;
  box-shadow: 0 0 30px rgba(102,126,234,.25);
}

/* --- 7. Inputs / selects (guide §7) --------------------------------------- */
.field, input.field, select.field, textarea.field {
  background: var(--surface-2);
  border: 1px solid var(--line);
  color: var(--ink);
  border-radius: 8px;
  min-height: 36px;
  padding: 0 10px;
  font: 400 14px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif;
}
textarea.field { padding: 8px 10px; }
.field:focus { outline: none; border-color: var(--cyan); box-shadow: 0 0 0 2px rgba(0,212,255,.25); }
.field::placeholder { color: var(--muted); }
input[type=range] { accent-color: var(--cyan); }

/* --- 8. Pill / badge (guide §7) ------------------------------------------- */
.pill {
  display: inline-block;
  font-size: 10px; font-weight: 800; letter-spacing: .04em;
  color: #04210d; background: var(--cyan);
  border-radius: 999px; padding: 1px 7px;
}
.pill.warn { background: var(--warn); }
.pill.bad  { background: var(--bad); color: #fff; }
.pill.gold { background: var(--gold); }

/* --- 9. Status / coaching text (guide §7) --------------------------------- */
/* Black text in a white halo, for legibility OVER photos/video only. */
.status {
  color: #06090f; font-weight: 800; font-size: 21px; transition: opacity .25s;
  text-shadow: 0 0 5px #fff, 0 0 5px #fff, 0 0 10px #fff, 0 0 18px #fff, 0 1px 2px #fff;
}
.status[data-tone="good"] { opacity: 0; }
.status[data-tone="bad"]  { color: #1a0406; }

/* --- 10. Logo (guide §9) -------------------------------------------------- */
/* Always the PNG wordmark, never text. Soft lift on dark. */
.mystro-logo {
  height: 28px; width: auto; display: inline-block; vertical-align: middle;
  filter: drop-shadow(0 1px 3px rgba(0,0,0,.6));
}

/* --- 11. Small helpers ---------------------------------------------------- */
.muted { color: var(--muted); }
.hairline-top { border-top: 1px solid var(--hairline); }
a { color: var(--cyan); }

/* --- 13. Animated edge utility (guide §3, opt-in) ------------------------- */
/* Adds the signature flowing current to ANY element's OUTLINE while keeping
   that element's own surface fill (unlike .electro, which forces a near-black
   recessed fill). Point --electro-fill at the element's surface token. Driven
   by the shared btnSweep keyframe (§3); the reduced-motion floor (§12) stops it
   along with everything else. Used by the dashboard section frames; available
   to every screen as it converts. */
.electro-edge {
  --electro-fill: rgba(2,2,9,.95);
  border: 1px solid transparent;
  background:
    linear-gradient(var(--electro-fill), var(--electro-fill)) padding-box, /* surface */
    var(--electro-stream) border-box;                                      /* current */
  background-size: 100% 100%, auto;
  background-repeat: no-repeat, repeat;
  animation: btnSweep 14s linear infinite;
}

/* --- 12. Motion + accessibility floor (guide §8) -------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, .btn, .fab, .electro, .btn-primary { animation: none !important; }
}
