/* =========================================================================
   7 Degrees of Focus — stylesheet
   -------------------------------------------------------------------------
   Mobile-first. We style for a ~360-390px viewport FIRST, then progressively
   enhance with min-width media queries (>=600 tablet, >=900 desktop).
   We never reduce below the 360px baseline, so there is no horizontal scroll.

   Conventions enforced by this file:
   - Every tap target (.btn, .link-btn) is at least 44x44px.
   - No functionality depends on :hover (hovers only add subtle polish and
     are ignored on touch devices).
   - env(safe-area-inset-*) is respected so notched phones don't clip.
   - Single column on small screens; stats are visible without scrolling.
   ========================================================================= */

/* ---- Design tokens ------------------------------------------------------ */
:root {
  --bg:          #0d1117;
  --bg-elev:     #161b22;
  --bg-elev-2:   #1c2129;
  --border:      #2a3340;
  --text:        #e6edf3;
  --text-dim:    #9aa6b2;
  --primary:     #2f81f7;
  --primary-dim: #1c4ea3;
  --energy:      #3fb950;
  --focus:       #d29922;
  --danger:      #f85149;
  --radius:      12px;
  --tap:         44px;            /* minimum tap target size */
  --maxw:        560px;            /* comfortable phone reading width */
  --space:       16px;
  /* safe-area insets: 0 where unsupported (older browsers) — graceful fallback */
  --safe-top:    env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left:   env(safe-area-inset-left, 0px);
  --safe-right:  env(safe-area-inset-right, 0px);
}

/* ---- Reset (minimal) ---------------------------------------------------- */
* { box-sizing: border-box; }
html, body { height: 100%; }

/* -------------------------------------------------------------------------
   [hidden] enforcement (ROOT-CAUSE FIX for "every screen renders at once")
   -------------------------------------------------------------------------
   The HTML `hidden` attribute is supposed to give `display: none` via the
   user-agent stylesheet. But any author rule that sets `display` on the same
   element — e.g. `.screen { display: flex }` below — BEATS the UA sheet (author
   styles always win over UA styles in the cascade, regardless of specificity).
   That made every `.screen` always flex-visible, so JS toggling `el.hidden`
   had no visual effect and Start/Play/Subject/End screens all stacked at once.

   Fix: declare `[hidden]` in the AUTHOR sheet with !important so it outranks
   any `display` rule (including `.screen { display: flex }`). This is the
   standard, bulletproof pattern for hiding anything with the `hidden`
   attribute, and it means `el.hidden = true` in ui.js now truly hides.
   ------------------------------------------------------------------------- */
[hidden] { display: none !important; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 17px;            /* legible on phones without zoom */
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  /* consideration: respect prefers-reduced-motion */
}

/* ---- App shell ---------------------------------------------------------- */
.app {
  max-width: var(--maxw);
  margin: 0 auto;
  min-height: 100dvh;            /* dynamic viewport height handles mobile URL bars */
  display: flex;
  flex-direction: column;
  /* padding uses safe-area insets so notches/home indicator never overlap content */
  padding:
    calc(var(--space) + var(--safe-top))
    calc(var(--space) + var(--safe-right))
    calc(var(--space) + var(--safe-bottom))
    calc(var(--space) + var(--safe-left));
  gap: var(--space);
}

/* ---- Sticky stats bar (above the fold) --------------------------------- */
.stats-bar {
  position: sticky;
  top: var(--safe-top);
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px 14px;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 8px 12px;
  z-index: 2;
}
.stats-bar__day   { font-weight: 700; font-size: 15px; }
.stats-bar__block { color: var(--primary); font-weight: 700; text-align: right; }
.stats-bar__meters { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 6px; }

.meter { display: flex; align-items: center; gap: 8px; }
.meter__label { width: 24px; font-size: 12px; font-weight: 700; color: var(--text-dim); }
.meter__bar {
  flex: 1;
  height: 10px;
  background: var(--bg-elev-2);
  border-radius: 6px;
  overflow: hidden;
}
.meter__fill {
  display: block;
  height: 100%;
  width: 100%;
  border-radius: 6px;
  transition: width 220ms ease;
}
.meter__fill--en { background: var(--energy); }
.meter__fill--fo { background: var(--focus); }

/* A `.screen` with the `hidden` attribute is fully removed from layout by the
   global `[hidden] { display:none !important }` rule at the top of this file.
   Without that rule, THIS `display:flex` would override the UA `[hidden]`
   and every screen would render at once (the bug we just fixed). */
.stage { flex: 1 1 auto; display: flex; flex-direction: column; }
.screen { display: flex; flex-direction: column; gap: 14px; animation: fade 160ms ease; }
.screen[hidden] { display: none; } /* belt-and-braces; the global rule already covers this */
@keyframes fade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

.title    { font-size: 24px; margin: 6px 0 0; }
.subtitle { color: var(--text-dim); margin: 0; }
.prompt   { font-size: 18px; margin: 4px 0 6px; }
.hint     { color: var(--text-dim); font-size: 14px; margin: 0; }

/* ---- Buttons ----------------------------------------------------------- */
.btn-stack { display: flex; flex-direction: column; gap: 10px; }

/* Tap target guarantees: min-height + width:100% in a single column keeps
   every button >=44px tall and full-width (easy thumb reach). */
.btn {
  min-height: var(--tap);
  padding: 12px 16px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--bg-elev);
  color: var(--text);
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  width: 100%;
  transition: background 120ms ease, border-color 120ms ease, transform 80ms ease;
}
.btn:active { transform: scale(0.98); }            /* active works on touch */
.btn--primary { background: var(--primary); border-color: var(--primary); color: #fff; }
.btn--primary:active { background: var(--primary-dim); }
.btn--ghost { background: transparent; color: var(--text-dim); }

.link-btn {
  min-height: var(--tap);
  min-width: var(--tap);
  padding: 8px 12px;
  border: none;
  background: transparent;
  color: var(--text-dim);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  border-radius: 8px;
  justify-self: end;
}
.link-btn:active { color: var(--text); }

/* hover is polish only; nothing depends on it (touch devices ignore it) */
@media (hover: hover) {
  .btn:hover { border-color: var(--primary); }
  .btn--primary:hover { background: var(--primary-dim); }
  .link-btn:hover { color: var(--text); }
}

/* ---- Event log ---------------------------------------------------------
   Moved to sit directly below the stats bar in index.html so the latest event
   is visible without scrolling on a phone. max-height + overflow-y:auto keeps
   it from pushing the action buttons off-screen as entries accumulate; new
   entries prepend (js/ui.js), so the newest is always at the top of the box. */
.log {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px 14px;
  max-height: 160px;        /* compact on mobile, doesn't bury the buttons */
  overflow-y: auto;         /* internal scroll; the box itself never grows past this */
  -webkit-overflow-scrolling: touch;
}
.log__intro { margin: 0 0 8px; font-size: 13px; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.06em; }
.log__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.log__list li {
  font-size: 14px;
  color: var(--text);
  padding: 8px 10px;
  background: var(--bg-elev-2);
  border-radius: 8px;
  border-left: 3px solid var(--primary);
}
.log__list li.is-fatigue { border-left-color: var(--danger); }
.log__list li.is-life    { border-left-color: var(--energy); }
.log__list li.is-funny   { border-left-color: var(--focus); }
.log__empty { color: var(--text-dim); font-size: 14px; font-style: italic; }

/* ---- Footer controls --------------------------------------------------- */
.controls { display: flex; justify-content: flex-end; }

/* ---- Game-over summary card ------------------------------------------- */
.summary-card {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 6px 12px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px;
  font-size: 15px;
}
.summary-card dt { color: var(--text-dim); font-weight: 600; }
.summary-card dd { margin: 0; font-weight: 700; }

/* =========================================================================
   Progressive enhancement — tablet (>=600px). Wider gutters, two-up stats.
   ========================================================================= */
@media (min-width: 600px) {
  :root { --space: 22px; }
  body { font-size: 18px; }
  .stats-bar { grid-template-columns: auto 1fr auto; }
  .stats-bar__meters { grid-column: 2 / 3; flex-direction: row; }
  .stats-bar .meter { flex: 1; }
  /* Previously .btn-stack had max-width:420px here, which left-shifted buttons
     inside the centered .app. Removed so buttons fill the centered app column
     and stay centered on desktop. */
  .log { max-height: 200px; }
  .log__list { display: grid; grid-template-columns: 1fr 1fr; }
}

/* =========================================================================
   Progressive enhancement — desktop (>=900px). Centered, airy, side log.
   ========================================================================= */
@media (min-width: 900px) {
  :root { --maxw: 760px; }
  body { font-size: 19px; }
  .log { max-height: 260px; }
  .log__list { grid-template-columns: 1fr 1fr 1fr; }
}

/* ---- Reduced motion ----------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}