/* ════════════════════════════════════════════════════════════════════════════
   today.css (v1.15) : compact home cockpit (study-state.js / renderToday)
   Uses base.css tokens only; adds the three mastery state colours as aliases.
   ════════════════════════════════════════════════════════════════════════════ */

:root {
  --mastery-none:     #D2D7DD;
  --mastery-learning: #D97706;
  --mastery-solid:    #166534;
}

.today-page { max-width: 680px; }

/* ── Study strip : one slim row ── */
.start-strip {
  display: flex; align-items: center; gap: 10px;
  min-height: var(--tap-min);
  padding: 8px 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  text-decoration: none;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.start-strip:hover { border-color: var(--primary); box-shadow: var(--shadow-md); }
.start-strip__play {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0;
  background: var(--primary); color: #fff; font-size: 11px;
  padding-left: 2px;
}
.start-strip--done .start-strip__play { background: var(--mastery-solid); padding-left: 0; }
.start-strip__label { font-size: 14px; font-weight: 700; color: var(--text); white-space: nowrap; }
.start-strip__meta {
  font-size: 12.5px; color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.start-strip__due {
  font-size: 11.5px; font-weight: 700; flex-shrink: 0;
  font-variant-numeric: tabular-nums;
  color: var(--primary); background: var(--primary-bg);
  border-radius: 99px; padding: 2px 9px;
}

/* ── Continue line ── */
.resume-strip {
  font-size: 12.5px; color: var(--text-muted);
  margin: 0 2px var(--section-gap);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.resume-strip__label {
  font-size: 10.5px; font-weight: 800; text-transform: uppercase;
  letter-spacing: 0.05em; color: var(--text-muted); margin-right: 6px;
}
.resume-strip a { color: var(--text-secondary); text-decoration: none; font-weight: 600; }
.resume-strip a:hover { color: var(--primary); }

/* Rhythm: strip sits tight above its Continue line; full gap otherwise */
.start-strip { margin-bottom: var(--section-gap); }
.start-strip:has(+ .resume-strip) { margin-bottom: 10px; }

/* ── Section heading hint (today page only) ── */
.today-page .section-heading { display: flex; align-items: baseline; gap: 8px; }
.section-hint {
  margin-left: auto;
  font-size: 11px; font-weight: 500;
  text-transform: none; letter-spacing: 0;
  color: var(--text-muted);
  white-space: nowrap;
}

/* ── Heat strip ──
   Chips speak the app-wide ledger language: white surface, hairline border,
   3px region-colour left edge. Mastery is a small dot (grey / amber / green). */
.heat-strip {
  display: flex; flex-wrap: wrap; gap: var(--sp-2);
  list-style: none; padding: 0; margin: 0 0 var(--section-gap);
}
.chip-mastery {
  position: relative;
  display: inline-flex; align-items: center; gap: 7px;
  min-height: 36px; padding: 4px 12px 4px 15px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 13px; font-weight: 600; color: var(--text-secondary);
  text-decoration: none;
  transition: border-color var(--transition);
}
/* Region edge: a vertically inset indicator bar. A border-left or inset
   shadow would follow the 8px corner radius and read as a "(" bracket. */
.chip-mastery::before {
  content: ''; position: absolute; left: 0; top: 8px; bottom: 8px;
  width: 3px; border-radius: 0 2px 2px 0;
  background: var(--chip-col, var(--border));
}
.chip-mastery:hover { border-color: var(--primary); }
.chip-mastery::after {
  content: ''; width: 7px; height: 7px; border-radius: 50%;
  background: var(--mastery-none); flex-shrink: 0;
}
.chip-mastery.is-learning::after { background: var(--mastery-learning); }
.chip-mastery.is-solid::after    { background: var(--mastery-solid); }
.chip-mastery__due {
  font-size: 11px; font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--text);
  background: var(--surface-sunken);
  border-radius: 9px; padding: 0 6px; line-height: 1.6;
}

/* Region edge colour reuses base.css --col-* tokens */
.chip-mastery--lumbar      { --chip-col: var(--col-lumbar); }
.chip-mastery--cervical    { --chip-col: var(--col-cervical); }
.chip-mastery--thoracic    { --chip-col: var(--col-thoracic); }
.chip-mastery--shoulder    { --chip-col: var(--col-shoulder); }
.chip-mastery--hip         { --chip-col: var(--col-hip); }
.chip-mastery--knee        { --chip-col: var(--col-knee); }
.chip-mastery--ankle       { --chip-col: var(--col-ankle); }
.chip-mastery--upper-limb  { --chip-col: var(--col-upper-limb); }
.chip-mastery--neuro       { --chip-col: var(--col-neuro); }
.chip-mastery--systemic    { --chip-col: var(--col-systemic); }
.chip-mastery--medications { --chip-col: var(--col-medications); }

/* ── Browse grid ── */
.today-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 6 tiles = 2 even rows */
  gap: var(--sp-2);
}
.today-tile {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 14px 8px 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  text-decoration: none;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.today-tile:hover { border-color: var(--primary); box-shadow: var(--shadow-md); }
.today-tile__icon { font-size: 20px; line-height: 1; }
.today-tile__label {
  font-size: 12.5px; font-weight: 600; color: var(--text-secondary);
  text-align: center; line-height: 1.3;
}
.today-tile:hover .today-tile__label { color: var(--primary); }

/* ── Desktop two-column cockpit ──
   Session + regions on the left, tools rail on the right; uses the width
   instead of pooling everything in the top-left quarter of the viewport. */
@media (min-width: 1100px) {
  .today-page {
    max-width: 1000px;
    display: grid;
    grid-template-columns: 1fr 300px;
    grid-template-areas:
      "strip   browse"
      "resume  browse"
      "regions browse";
    grid-template-rows: auto auto 1fr;
    column-gap: 40px;
    align-items: start;
  }
  .today-page .start-strip    { grid-area: strip; }
  .today-page .resume-strip   { grid-area: resume; }
  .today-page .today-regions  { grid-area: regions; }
  .today-page .today-browse   { grid-area: browse; }
  .today-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ── Mobile ── */
@media (max-width: 600px) {
  .today-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .start-strip { flex-wrap: wrap; row-gap: 2px; }
  .start-strip__meta { flex-basis: 100%; order: 4; padding-left: 38px; white-space: normal; }
}


/* ── Mobile density ── */
@media (max-width: 767px) {
  .start-strip { padding: 7px 10px; }
  .resume-strip { margin-bottom: 24px; }
  .heat-strip { gap: 6px; margin-bottom: 24px; }
  .chip-mastery { min-height: 33px; padding: 3px 11px; }
  .today-grid { gap: 6px; }
  .today-tile { padding: 10px 6px 9px; gap: 4px; }
}