/* core — Redesign A v2 ("Instrument"). Area styles; shared tokens live in index.html.
   Core tab (/core), exercise library and the full-screen session runner.
   Loaded after index.html, so these rules win over the older .core* rules. */

/* ── Core tab ─────────────────────────────────────────────────────────── */
.core-header { padding: 6px 0 0; }
.core-header .greet { margin-bottom: 10px; }

/* Progress card: blue edge + radial glow, huge "2 / 3". */
.coreHero {
  position: relative; overflow: hidden;
  border-color: rgba(122,167,255,.3);
}
.coreHero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(380px 200px at 100% 0%, rgba(122,167,255,.14), transparent 70%);
}
.coreHero > * { position: relative; }
.coreHero-top { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.coreHero-count { display: flex; align-items: baseline; gap: 6px; white-space: nowrap; }
.coreHero-n {
  font: 800 72px/.85 var(--font-sans); font-stretch: 65%;
  font-variant-numeric: tabular-nums; color: var(--color-text);
}
.coreHero-goal {
  font: 700 30px/1 var(--font-sans); font-stretch: 70%; color: var(--color-text-dim);
}
.coreHero-status {
  font: 500 14px/1.3 var(--font-sans); color: var(--color-text-muted);
  text-align: right; max-width: 150px;
}

/* Week circles: done = filled blue + check, today = ring, planned = dashed. */
.coreWeek { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin-top: 20px; padding: 0; }
.coreDay {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  background: none; border: none; padding: 0; color: inherit; cursor: pointer;
}
.coreDay:disabled { cursor: default; }
.coreDay-lbl {
  font: 700 11px/1 var(--font-mono); letter-spacing: 0; color: var(--color-text-label);
}
.coreDay-dot {
  width: 36px; height: 36px; border-radius: 50%; box-sizing: border-box;
  display: flex; align-items: center; justify-content: center;
  background: var(--color-surface-2); border: 1px solid var(--color-border-2);
  box-shadow: none; transition: background .15s, border-color .15s, opacity .15s;
}
.coreDay-dot svg { width: 16px; height: 16px; stroke: var(--color-bg); display: none; }
.coreDay-dot.is-done { background: var(--color-core); border-color: var(--color-core); }
.coreDay-dot.is-done svg { display: block; }
.coreDay-dot.is-today { background: transparent; border: 2px solid var(--color-core); box-shadow: 0 0 0 4px rgba(122,167,255,.14); }
.coreDay-dot.is-planned { background: transparent; border: 1.5px dashed var(--color-core); }
.coreDay.busy .coreDay-dot { opacity: .45; }
.coreDay:not(:disabled):active .coreDay-dot { transform: scale(.94); }
.coreHint {
  margin-top: 14px; text-align: left;
  font: 400 13px/1.4 var(--font-sans); color: var(--color-text-label);
}

/* Start now: two mode tiles + lime start button. */
.coreModes { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 14px; }
.coreMode {
  display: flex; flex-direction: column; gap: 6px; text-align: left; cursor: pointer;
  padding: 14px; border-radius: 16px;
  background: var(--color-inset); border: 1px solid var(--color-border);
  color: var(--color-text); transition: background .15s, border-color .15s;
}
.coreMode .num { font-size: 28px; }
.coreMode .num small { font-size: 14px; }
.coreMode-l { font: 500 13px/1.2 var(--font-sans); color: var(--color-text-muted); }
.coreMode.active { background: rgba(214,255,61,.08); border-color: rgba(214,255,61,.5); }
.coreStart { width: 100%; margin-top: 12px; min-height: 52px; font-size: 16px; }

/* Fixed days + reminder settings. */
.coreDayPick { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin: 14px 0 0; }
.coreDayPick button {
  height: 42px; border-radius: 12px; cursor: pointer;
  background: var(--color-inset); border: 1px solid var(--color-border);
  color: var(--color-text-muted); font: 700 14px/1 var(--font-mono);
}
.coreDayPick button.active {
  background: var(--color-accent-dim); border-color: var(--color-accent-line); color: var(--color-accent);
}
.corePrefs .coreRow {
  display: flex; align-items: center; gap: 12px;
  margin-top: 16px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,.06);
}
.corePrefs .coreRow + .coreRow { margin-top: 14px; }
.corePrefs .notifTxt { flex: 1; min-width: 0; }
.coreRow-t { flex: 1; font: 600 15px/1.2 var(--font-sans); color: var(--color-text); }
.corePrefs .notifDesc { font: 400 13px/1.35 var(--font-sans); color: var(--color-text-muted); margin-top: 3px; }
.coreTimes { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }
.coreTime {
  display: flex; flex-direction: column; gap: 6px;
  background: var(--color-inset); border-radius: 14px; padding: 10px 12px;
}
.coreTime input[type=time] {
  height: auto; padding: 0; border: none; background: none; border-radius: 0;
  font: 800 22px/1 var(--font-sans); font-stretch: 72%; color: var(--color-text);
}
.coreTip { font: 400 13px/1.4 var(--font-sans); color: var(--color-text-muted); }
.coreRemNote { margin-top: 10px; }
.coreRemNote a { color: var(--color-accent); }
.coreLink {
  display: inline-block; margin-top: 14px; text-decoration: none;
  font: 600 14px/1 var(--font-sans); color: var(--color-accent);
}

/* Exercise library. */
.coreSection { padding: 8px 2px 0; margin: 0; }
.coreEx {
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-lg); overflow: hidden; padding: 0;
}
.coreEx-head {
  display: flex; align-items: center; gap: 14px; width: 100%;
  background: none; border: none; padding: 14px 16px;
  text-align: left; color: inherit; cursor: pointer;
}
.coreEx-thumb {
  width: 80px; height: 44px; flex-shrink: 0; box-sizing: border-box;
  display: flex; align-items: center; padding: 0 4px;
  background: var(--color-inset); border-radius: 12px;
}
.coreEx-txt { flex: 1; min-width: 0; }
.coreEx-name { font: 700 16px/1.2 var(--font-sans); color: var(--color-text); }
.coreEx-sub { font: 400 13px/1.3 var(--font-sans); color: var(--color-text-muted); margin-top: 3px; }
.coreEx-dur { flex-shrink: 0; font: 500 12px/1 var(--font-mono); color: var(--color-text-muted); }
.coreEx-body { display: none; padding: 0; font-size: inherit; color: inherit; }
.coreEx.open .coreEx-body { display: block; }
.coreEx .coreDemo {
  max-width: none; margin: 0 16px 14px; padding: 14px 18px 6px;
  border-radius: 16px; background: var(--color-inset);
}
.coreEx-steps { display: flex; flex-direction: column; gap: 8px; padding: 0 16px 16px; }
.coreEx-step { display: flex; gap: 10px; font: 400 14px/1.45 var(--font-sans); color: var(--color-text-soft); }
.coreEx-step > span:first-child { font: 700 12px/1.7 var(--font-mono); color: var(--color-text-dim); flex-shrink: 0; }
.coreEx-check { margin-top: 4px; font: 400 14px/1.45 var(--font-sans); color: var(--color-text-soft); }
.coreEx-check b { color: var(--color-accent); font-weight: 600; }
.coreEx-easy { font: 400 14px/1.45 var(--font-sans); color: var(--color-text-muted); }
.coreEx-easy b { color: var(--color-text); font-weight: 600; }

/* Stick figures: light limbs, lime core line, far limbs dimmed. */
.coreFig polyline { stroke: var(--color-text); }
.coreFig polyline.core { stroke: var(--color-accent); }
.coreFig polyline.far { opacity: .38; }
.coreFig .floor { stroke: var(--color-text-dim); }
.coreFig circle { fill: var(--color-text); }
.coreDemo-cap {
  min-height: 2.8em; margin-top: 8px; text-align: center;
  font: 400 13px/1.4 var(--font-sans); color: var(--color-text-muted);
}

/* ── Session runner (full screen) ─────────────────────────────────────── */
.coreTrain {
  background: var(--color-bg);
  padding: calc(env(safe-area-inset-top) + 16px) 24px calc(env(safe-area-inset-bottom) + 24px);
  --phase: var(--color-accent);
}
.coreTrain.resting { --phase: var(--color-warn); }
.coreTrain-head { flex-shrink: 0; max-width: 560px; width: 100%; margin: 0 auto; }
.coreTrain-bar { height: 4px; border-radius: 2px; background: var(--color-surface-2); overflow: hidden; }
.coreTrain-bar > div { background: var(--phase); }
.coreTrain.resting .coreTrain-bar > div { background: var(--phase); }
.coreTrain-top {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 0; margin-top: 16px;
}
.coreTrain-phase {
  font: 500 12px/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase;
  color: var(--phase);
}
.coreTrain-close {
  width: 40px; height: 40px; border-radius: 50%; border: none; cursor: pointer;
  background: var(--color-surface-2); color: var(--color-text-muted); font-size: 16px;
}
.coreTrain-main {
  flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch;
  display: flex; flex-direction: column; padding: 0; text-align: left;
}
.coreTrain-inner {
  flex: 1; display: flex; flex-direction: column; justify-content: center;
  max-width: 560px; width: 100%; margin: 0 auto; padding: 20px 0;
}
.coreTrain-pre { font: 500 14px/1 var(--font-mono); color: var(--color-text-label); text-transform: uppercase; }
.coreTrain-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-top: 10px; }
.coreTrain-title {
  margin: 0; font: 800 48px/.9 var(--font-sans); font-stretch: 68%;
  text-transform: uppercase; letter-spacing: 0; color: var(--color-text);
}
.coreTrain-timer {
  flex-shrink: 0; margin: 0;
  font: 800 96px/.8 var(--font-sans); font-stretch: 62%; letter-spacing: -.02em;
  font-variant-numeric: tabular-nums; color: var(--phase);
}
.coreTrain.resting .coreTrain-timer { color: var(--phase); }
.coreTrain-fig {
  max-width: none; margin: 22px 0 0; padding: 20px 18px 8px;
  border-radius: var(--radius-xl); background: var(--color-surface); border: 1px solid var(--color-border);
}
.coreTrain-fig .coreFig { max-width: 360px; margin: 0 auto; }
.coreTrain.resting .coreFig polyline.core { stroke: var(--color-warn); }
.coreTrain-check {
  margin-top: 18px; font: 400 16px/1.45 var(--font-sans); color: var(--color-text-muted);
}
.coreTrain-check b { color: var(--phase); font-weight: 600; }
.coreTrain.resting .coreTrain-check { color: var(--color-text-muted); }
.coreTrain-ctrl {
  display: grid; grid-template-columns: 1fr 1.6fr 1fr; gap: 8px;
  padding: 0; max-width: 560px; width: 100%; margin: 0 auto; flex-shrink: 0;
}
.coreTrain-ctrl .btn { min-height: 60px; border-radius: 18px; padding: 0 8px; font-size: 15px; }
.coreTrain-ctrl .btn-primary { font-size: 17px; }
.coreTrain-ctrl .coreTrain-doneBtn { grid-column: 1 / -1; min-height: 56px; font-size: 16px; }

/* Finished. */
.coreTrain-done { padding-top: 0; display: flex; flex-direction: column; gap: 16px; }
.coreTrain-done h2 {
  margin: 0; font: 800 96px/.85 var(--font-sans); font-stretch: 62%;
  text-transform: uppercase; color: var(--color-accent);
}
.coreTrain-done p { margin: 0; font: 400 18px/1.45 var(--font-sans); color: var(--color-text-soft); }

/* Stop-confirm dialog as a bottom sheet. */
.coreDialog { background: rgba(0,0,0,.6); padding: 0; }
.coreDialog-card {
  max-width: 560px; border-radius: 30px 30px 0 0; padding: 26px 20px calc(env(safe-area-inset-bottom) + 28px);
  background: var(--color-sheet); border: none; border-top: 1px solid rgba(255,255,255,.09);
}
.coreDialog-card h3 {
  margin: 0; text-align: left;
  font: 800 38px/.92 var(--font-sans); font-stretch: 70%; text-transform: uppercase;
}
.coreDialog-sub { margin: 10px 0 18px; font: 400 15px/1.5 var(--font-sans); color: var(--color-text-soft); }
.coreDialog-btns { gap: 8px; }
.coreDialog-btns .btn { min-height: 52px; padding: 0 8px; }
.coreDialog-btns .btn-danger { background: var(--color-warn-bg); border: 1px solid rgba(255,138,61,.4); color: var(--color-warn); }

@media (min-width: 700px) {
  .coreTrain-title { font-size: 64px; }
  .coreTrain-timer { font-size: 140px; }
  .coreTrain-check { font-size: 19px; }
  .coreTrain-fig .coreFig { max-width: 440px; }
}