/* ==========================================================================
   THE FAMILY FORGE — app.css
   Styles for /app only (the offline-capable guided workout player).
   Loaded on top of site.css, which owns the tokens. Kept separate so the
   marketing pages don't pay for it.
   ========================================================================== */

/* ---------- App chrome -------------------------------------------------- */
/* Installed to the home screen, the site header is dead weight — hide it and
   let the in-app bar do the work. */
@media (display-mode: standalone) {
  .site-header, .site-footer { display: none !important; }
  body { padding-top: env(safe-area-inset-top); }
  .app-bar { display: flex !important; }
}
.app-bar { display: none; align-items: center; justify-content: space-between; gap: .8rem;
  position: sticky; top: 0; z-index: 30; background: var(--ink); color: var(--paper);
  padding: .7rem var(--gut); }
.app-bar__title { font-family: var(--display); font-weight: 800; text-transform: uppercase; font-size: 1.05rem; letter-spacing: .04em; }
.app-bar a, .app-bar button { color: var(--paper-2); background: none; border: 0; font-family: var(--label);
  text-transform: uppercase; letter-spacing: .12em; font-size: .74rem; text-decoration: none; cursor: pointer; padding: .4rem; }

#app { min-height: 60vh; }
.app-section { padding-block: clamp(1.6rem, 4vw, 2.6rem); }

/* ---------- Install / offline status ------------------------------------ */
.status-row { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 1.4rem; }
.pill { display: inline-flex; align-items: center; gap: .4rem; font-family: var(--label);
  text-transform: uppercase; letter-spacing: .12em; font-size: .68rem;
  border: 1.5px solid var(--ink); border-radius: 99px; padding: .38rem .8rem; background: rgba(255,251,240,.6); }
.pill--ok { border-color: var(--sage); color: #3c4736; }
.pill--warn { border-color: var(--rust); color: var(--rust); }
.pill b { font-weight: 600; }

/* ---------- Session list ------------------------------------------------ */
.app-list { display: grid; gap: 1rem; }
.app-card { display: grid; grid-template-columns: 84px 1fr; gap: 1rem; align-items: start;
  background: rgba(255,251,240,.55); border: var(--rule); border-radius: var(--radius);
  padding: .9rem; box-shadow: 4px 4px 0 rgba(27,32,28,.13); }
.app-card__thumb { width: 84px; aspect-ratio: 2/3; object-fit: cover; object-position: top center;
  border: 1px solid var(--ink); border-radius: 2px; background: var(--paper-3); }
.app-card__no { font-family: var(--label); font-size: .68rem; letter-spacing: .18em; text-transform: uppercase; color: var(--rust); }
.app-card h3 { font-size: 1.35rem; margin: .1rem 0 .35rem; }
.app-card__meta { font-size: .9rem; color: var(--ink-soft); margin: 0 0 .8rem; }
.app-card__best { font-family: var(--label); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--sage); margin: 0 0 .8rem; }
.app-card .btn-row { gap: .5rem; }
.app-card .btn { padding: .8rem 1.05rem; font-size: .78rem; }

/* ---------- Runner ------------------------------------------------------ */
/* Dark, high-contrast, thumb-reachable. This is the screen you look at with
   sweat in your eyes, so nothing subtle lives here. */
.runner { background: var(--ink); color: var(--paper); min-height: 100svh;
  display: flex; flex-direction: column;
  padding: calc(env(safe-area-inset-top) + .5rem) var(--gut) calc(env(safe-area-inset-bottom) + 1rem); }
body.is-running { background: var(--ink); }
body.is-running .site-header, body.is-running .site-footer, body.is-running .app-bar { display: none !important; }

.runner__top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-block: .4rem .8rem; }
.runner__phase { font-family: var(--label); text-transform: uppercase; letter-spacing: .2em; font-size: .7rem; color: var(--ember); }
.runner__quit { background: none; border: 1.5px solid rgba(236,224,198,.35); color: var(--paper-2);
  font-family: var(--label); text-transform: uppercase; letter-spacing: .12em; font-size: .68rem;
  padding: .45rem .8rem; border-radius: 2px; cursor: pointer; }

/* Stopwatches */
.clocks { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; }
.clock { background: rgba(236,224,198,.07); border: 1.5px solid rgba(236,224,198,.22); border-radius: var(--radius); padding: .7rem .8rem .8rem; }
.clock--step { border-color: rgba(201,120,45,.55); }
.clock__label { font-family: var(--label); text-transform: uppercase; letter-spacing: .16em; font-size: .62rem; color: rgba(236,224,198,.7); margin-bottom: .2rem; }
.clock__value { font-family: var(--display); font-weight: 800; font-size: clamp(2rem, 10vw, 2.9rem); line-height: .95;
  font-variant-numeric: tabular-nums; letter-spacing: .01em; }
.clock--step .clock__value { color: var(--ember); }
.clock--paused .clock__value { opacity: .5; }
.clock__ctl { display: flex; gap: .4rem; margin-top: .55rem; }
.clock__ctl button { flex: 1; background: rgba(236,224,198,.1); border: 1px solid rgba(236,224,198,.3);
  color: var(--paper-2); font-family: var(--label); text-transform: uppercase; letter-spacing: .1em;
  font-size: .64rem; padding: .5rem .3rem; border-radius: 2px; cursor: pointer; min-height: 38px; }
.clock__ctl button:active { background: rgba(236,224,198,.22); }
.clock--paused { border-style: dashed; }

/* Current step */
.step { flex: 1; display: flex; flex-direction: column; justify-content: center; padding-block: 1.4rem; }
.step__count { font-family: var(--label); text-transform: uppercase; letter-spacing: .18em; font-size: .68rem; color: rgba(236,224,198,.6); margin-bottom: .5rem; }
.step__round { display: inline-block; font-family: var(--label); text-transform: uppercase; letter-spacing: .14em;
  font-size: .66rem; color: var(--ink); background: var(--ember); border-radius: 99px; padding: .25rem .7rem; margin-bottom: .7rem; }
.step__reps { font-family: var(--display); font-weight: 800; font-size: clamp(4rem, 22vw, 7rem); line-height: .85; color: var(--ember); }
.step__reps small { font-size: .3em; letter-spacing: .1em; display: block; margin-top: .3rem; color: var(--paper-2); }
.step__title { font-family: var(--display); font-weight: 800; text-transform: uppercase;
  font-size: clamp(2.1rem, 9vw, 3.2rem); line-height: .95; margin: .3rem 0 0; }
.step__note { font-size: 1.08rem; color: var(--paper-2); margin: .8rem 0 0; }
.step__body { font-family: var(--body); font-style: italic; font-size: 1.15rem; color: var(--paper);
  border-left: 3px solid var(--ember); padding-left: .9rem; margin: 1rem 0 0; }
.step__items { list-style: none; padding: 0; margin: 1rem 0 0; }
.step__items li { display: grid; grid-template-columns: 3.2rem 1fr; gap: .1rem .8rem;
  padding: .55rem 0; border-top: 1px solid rgba(236,224,198,.16); }
.step__items li:first-child { border-top: 0; }
.step__items .r { font-family: var(--display); font-weight: 800; font-size: 1.5rem; line-height: 1; color: var(--ember); }
.step__items .n { font-family: var(--display); font-weight: 800; text-transform: uppercase; font-size: 1.18rem; line-height: 1.05; align-self: center; }
.step__items .sub { grid-column: 2; font-size: .9rem; color: rgba(236,224,198,.7); }

/* Advance controls — bottom, thumb zone, deliberately large */
.runner__foot { display: grid; gap: .55rem; }
.btn--advance { width: 100%; background: var(--ember); border-color: var(--ember); color: var(--ink);
  font-size: 1rem; padding: 1.35em 1.5em; box-shadow: 4px 4px 0 rgba(0,0,0,.4); }
.btn--advance:hover { background: #d98a3e; color: var(--ink); }
.btn--finish { background: var(--sage); border-color: var(--sage); color: #fdf6e6; }
.btn--finish:hover { background: #6d7d63; color: #fff; }
.runner__foot .row { display: flex; gap: .55rem; }
.btn--back { flex: 1; background: transparent; border-color: rgba(236,224,198,.35); color: var(--paper-2); box-shadow: none; padding: .95em 1em; }
.btn--back:hover { background: rgba(236,224,198,.12); color: var(--paper); }
.btn--back[disabled] { opacity: .35; pointer-events: none; }
.progress { height: 5px; background: rgba(236,224,198,.18); border-radius: 99px; overflow: hidden; margin-bottom: .3rem; }
.progress span { display: block; height: 100%; background: var(--ember); transition: width .2s ease; }

/* ---------- Ready + summary screens ------------------------------------ */
.ready { text-align: left; }
.ready h1 { font-size: clamp(2.4rem, 11vw, 4rem); }
.ready__list { list-style: none; padding: 0; margin: 1.2rem 0; }
.ready__list li { padding: .55rem 0; border-top: 1px solid rgba(236,224,198,.16); font-size: 1rem; color: var(--paper-2); }
.ready__list b { color: var(--paper); font-family: var(--label); text-transform: uppercase; letter-spacing: .1em; font-size: .74rem; display: block; }

.splits { width: 100%; border-collapse: collapse; margin-top: 1rem; font-size: .95rem; }
.splits th { text-align: left; font-family: var(--label); text-transform: uppercase; letter-spacing: .12em;
  font-size: .64rem; color: rgba(236,224,198,.65); padding: .4rem .3rem; border-bottom: 1px solid rgba(236,224,198,.25); }
.splits td { padding: .5rem .3rem; border-bottom: 1px solid rgba(236,224,198,.12); }
.splits td:last-child, .splits th:last-child { text-align: right; font-variant-numeric: tabular-nums; }
.splits tr.is-phase td { font-family: var(--label); text-transform: uppercase; letter-spacing: .14em;
  font-size: .66rem; color: var(--ember); padding-top: .9rem; border-bottom: 0; }
.result { display: grid; gap: .6rem; grid-template-columns: 1fr 1fr; margin: 1.2rem 0; }
.result div { background: rgba(236,224,198,.07); border: 1.5px solid rgba(236,224,198,.22); border-radius: var(--radius); padding: .8rem; }
.result dt { font-family: var(--label); text-transform: uppercase; letter-spacing: .14em; font-size: .62rem; color: rgba(236,224,198,.7); }
.result dd { margin: .2rem 0 0; font-family: var(--display); font-weight: 800; font-size: 2rem; line-height: 1; font-variant-numeric: tabular-nums; }
.result .pr { color: var(--ember); }

/* ---------- History ----------------------------------------------------- */
.history { list-style: none; padding: 0; margin: 0; }
.history li { display: flex; justify-content: space-between; gap: 1rem; align-items: baseline;
  padding: .6rem 0; border-top: 1px solid var(--paper-edge); }
.history li:first-child { border-top: 0; }
.history .when { font-size: .92rem; color: var(--ink-soft); }
.history .what { font-family: var(--label); text-transform: uppercase; letter-spacing: .08em; font-size: .78rem; }
.history .t { font-family: var(--display); font-weight: 800; font-size: 1.25rem; font-variant-numeric: tabular-nums; }

/* ---------- Install sheet ---------------------------------------------- */
.install { border: 1.5px dashed var(--ink); border-radius: var(--radius); padding: 1rem 1.1rem; background: rgba(255,251,240,.45); }
.install ol { margin: .6rem 0 0; padding-left: 1.3rem; }
.install li { margin-bottom: .35rem; }
.install summary { font-family: var(--label); text-transform: uppercase; letter-spacing: .12em; font-size: .76rem; cursor: pointer; }

@media (min-width: 620px) {
  .app-list { grid-template-columns: repeat(2, 1fr); }
  .runner { max-width: 620px; margin-inline: auto; }
}
@media print { .runner, .app-bar { display: none !important; } }