/* ==========================================================================
   Talmud Daily — learner account entry points on public pages

   Deliberately tiny. The account links are rendered as native members of
   whichever theme navigation is hosting them — `<li>` inside
   `.td-siteheader__menu`, bare anchors inside `nav.top .links` — so all of
   their spacing, colour, hover, and responsive behaviour comes from the
   theme's own stylesheet. This file only decides *which* of the two link sets
   is on screen, plus the dashboard call-to-action, which has no theme
   equivalent.

   Both link sets are present in the HTML for every visitor, identically, so
   these pages stay safe to serve from a shared cache. See the plugin's
   AccountNav class for the full reasoning.
   ========================================================================== */

/* ------------------------------------------------------- nav state switch */

/*
 * Two rules, and no `display` value is ever invented: the visible set simply
 * matches no hiding rule, so each item keeps whatever display the theme gives
 * it — `list-item` in the header menu, `inline` on the landing nav.
 *
 * Signed-out is the default, so a visitor without JavaScript gets a working,
 * honest header rather than a blank one.
 */
html:not(.td-signed-in) .td-account-item--in { display: none; }
html.td-signed-in .td-account-item--out { display: none; }

/* --------------------------------------------------------- dashboard CTA */

/*
 * Built from the theme's own vocabulary: cream layered surface, hairline rule,
 * burgundy eyebrow, serif heading, and the theme's `.btn` for the action. Only
 * the band itself is described here.
 */
/*
 * The dashboard has no single content wrapper: every top-level block
 * self-constrains to 1240px with 48px gutters, exactly as `.today` does around
 * its burgundy band. The call to action follows that same shape so it lines up
 * with the heading and the week list either side of it.
 */
.td-page .td-account-cta--dashboard {
  max-width: 1240px;
  margin: 0 auto;
  padding: 40px 48px 0;
}

.td-page .td-account-cta__band {
  padding: 30px 34px;
  background: var(--paper-pure);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--burgundy);
  border-radius: 2px;
}

html:not(.td-signed-in) .td-account-cta__state--in { display: none; }
html.td-signed-in .td-account-cta__state--out { display: none; }

.td-page .td-account-cta__eyebrow {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--burgundy);
  font-weight: 600;
  margin: 0 0 10px;
}

.td-page .td-account-cta__title {
  font-family: var(--serif);
  font-size: clamp(24px, 2.6vw, 32px);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0 0 10px;
}

.td-page .td-account-cta__copy {
  margin: 0;
  max-width: 62ch;
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.55;
  color: var(--muted);
}

.td-page .td-account-cta__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 22px;
  margin: 22px 0 0;
}

.td-page .td-account-cta__link {
  font-family: var(--sans);
  color: var(--burgundy);
  font-size: 15px;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

@media (max-width: 900px) {
  .td-page .td-account-cta--dashboard { padding: 32px 24px 0; }
  .td-page .td-account-cta__band { padding: 26px 22px; }
}

/* ------------------------------------------------- episode progress control */

/*
 * Both states ship in the cached HTML and the browser reveals one, exactly as
 * the account links do. The signed-in half additionally stays hidden until the
 * private bootstrap confirms a session that may write progress, so a control
 * that cannot work is never shown.
 */
html.td-signed-in .td-progress__signed-out { display: none; }

/*
 * The theme's device-local "I did today's episode" band is the anonymous
 * experience. A signed-in learner gets the account-backed control instead, as
 * Task 69 intends — this is the one theme selector this feature touches.
 */
html.td-signed-in .td-page .td-ep-mark { display: none; }

.td-page .td-progress {
  margin: 0 auto;
  padding: 0 48px 8px;
  max-width: 1240px;
  font-family: var(--sans);
}

.td-page .td-progress__prompt {
  margin: 0;
  font-size: 15px;
  color: var(--muted);
}

.td-page .td-progress__prompt a {
  color: var(--burgundy);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.td-page .td-progress__or { margin: 0 6px; }

.td-page .td-progress__button {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 28px;
  background: var(--ink);
  color: var(--paper);
  border: 1px solid var(--ink);
  border-radius: 1px;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.td-page .td-progress__button:hover:not(:disabled) {
  background: var(--burgundy);
  border-color: var(--burgundy);
}

.td-page .td-progress__button:focus-visible {
  outline: 2px solid var(--burgundy);
  outline-offset: 3px;
}

.td-page .td-progress__button:disabled {
  opacity: 0.6;
  cursor: progress;
}

/*
 * The completed state is carried by the label text and a tick, not by colour
 * alone, so it survives both greyscale and a screen reader.
 *
 * `--complete` is #557A2F. Used as a *fill* with cream text on it — 6.0:1, well
 * clear of AA — rather than as a text colour on cream, where it would not pass.
 * That is the rule for this colour everywhere it appears.
 */
.td-page .td-progress__button.is-complete {
  background: var(--complete);
  color: var(--paper-pure);
  border-color: var(--complete);
}

.td-page .td-progress__button.is-complete:hover:not(:disabled) {
  background: #466526;
  border-color: #466526;
}

.td-page .td-progress__button.is-complete::before {
  content: "✓";
  font-size: 15px;
  line-height: 1;
}

/* ------------------------------------------- the control under the player */

/*
 * The second mount, centred beneath Watch / Listen only on the dark burgundy
 * media stage. Same control, same state, different background — so the only
 * thing that changes is what it is drawn against.
 */
/*
 * `.td-ep-player-inner` already supplies the 1240px cap and the 48px gutters, so
 * the base rule's copies of both are released here rather than applied twice.
 * The section's own 48px bottom padding gives the control its room.
 */
.td-page .td-progress--player {
  max-width: none;
  margin: 24px 0 0;
  padding: 0;
  display: flex;
  justify-content: center;
  text-align: center;
}

.td-page .td-progress--player .td-progress__signed-in,
.td-page .td-progress--player .td-progress__signed-out { width: 100%; }

.td-page .td-progress--player .td-progress__button {
  background: rgba(242, 237, 223, 0.1);
  border-color: rgba(242, 237, 223, 0.45);
  color: var(--paper-pure);
}

.td-page .td-progress--player .td-progress__button:hover:not(:disabled) {
  background: var(--paper-pure);
  border-color: var(--paper-pure);
  color: var(--burgundy);
}

/* Completed reads the same on either background: green fill, cream label. */
.td-page .td-progress--player .td-progress__button.is-complete {
  background: var(--complete);
  border-color: var(--complete);
  color: var(--paper-pure);
}

.td-page .td-progress--player .td-progress__button:focus-visible {
  outline: 2px solid var(--paper-pure);
  outline-offset: 3px;
}

.td-page .td-progress--player .td-progress__status { color: rgba(242, 237, 223, 0.85); }
.td-page .td-progress--player .td-progress__status.is-error { color: #F6C8C8; font-weight: 600; }

.td-page .td-progress--player .td-progress__prompt { color: rgba(242, 237, 223, 0.85); }
.td-page .td-progress--player .td-progress__prompt a { color: var(--paper-pure); }

/* -------------------------------------------- dashboard learner summary */

/*
 * Every value in here is a placeholder until the learner's own browser fills
 * it in — see AccountNav::render_cta(). Nothing about the layout depends on
 * knowing the numbers, so hydration changes text and one bar width and shifts
 * nothing else.
 */
.td-page .td-summary {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: 22px 40px;
  margin: 18px 0 20px;
  align-items: start;
}

.td-page .td-summary__label {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--muted);
  margin: 0 0 6px;
}

.td-page .td-summary__value {
  font-family: var(--serif);
  font-size: clamp(26px, 3vw, 34px);
  line-height: 1.05;
  color: var(--ink);
  margin: 0;
  font-variant-numeric: tabular-nums;
}

.td-page .td-summary__note {
  margin: 8px 0 0;
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.5;
  color: var(--muted);
}

.td-page .td-summary__bar {
  margin-top: 12px;
  height: 6px;
  background: var(--rule);
  border-radius: 999px;
  overflow: hidden;
}

.td-page .td-summary__bar span {
  display: block;
  height: 100%;
  width: 0;
  background: var(--complete);
  border-radius: 999px;
  transition: width 0.4s ease;
}

@media (max-width: 700px) {
  .td-page .td-summary { grid-template-columns: minmax(0, 1fr); gap: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  .td-page .td-summary__bar span { transition: none; }
}

.td-page .td-progress__status {
  margin: 10px 0 0;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--muted);
  min-height: 1.5em;
}

.td-page .td-progress__status.is-error { color: var(--burgundy); font-weight: 600; }

@media (max-width: 900px) {
  .td-page .td-progress { padding-left: 24px; padding-right: 24px; }
  .td-page .td-progress__button { width: 100%; justify-content: center; }
}