/* ============================================================
   Learn Wuji in One Week — v1 site
   Recreated from "Wuji Final — Structure 3" design handoff.
   Tokens are the spec; layout reflows mobile (<720px) → desktop.
   ============================================================ */

:root {
  /* Color tokens */
  --clay:   #B5613F;   /* primary accent */
  --clay-hover: #A4542F;
  --cocoa:  #5C4634;   /* deep accent */
  --ink:    #2A2520;   /* player bg, primary heading */
  --sand:   #F1E7D8;   /* warm panel */
  --paper:  #FBF7EF;   /* screen / card bg */
  --white:  #FFFFFF;
  --hairline: #ECE3D3;
  --hairline-solid: #D8C9B3;
  --hairline-sand: #E3D3BA;
  --wash:   #F6ECDC;   /* highlighted-script wash */
  --done-circle: #E7D9C5;
  --track-light: #ECE0CD;

  /* text */
  --t-heading: #2A2520;
  --t-body:    #3A352E;
  --t-body-2:  #5A5249;
  --t-secondary: #6A6056;
  --t-muted:   #8A8076;
  --t-muted-2: #9C7A4E;
  --t-faint:   #B3A48D;
  --t-faint-2: #BBAE9B;
  --t-faint-3: #C2B5A1;

  /* player on dark */
  --p-muted: #C69A78;
  --p-track: #4A3F35;
  --p-title: #F6ECDC;

  --eyebrow: #A89A86;

  /* type */
  --serif: 'Spectral', Georgia, serif;
  --sans: 'Hanken Grotesk', system-ui, sans-serif;
  --mono: 'Spline Sans Mono', ui-monospace, monospace;

  /* shadow */
  --sh-card: 0 6px 26px rgba(60,45,25,.13);
  --sh-play: 0 4px 13px rgba(181,97,63,.40);
  --sh-btn:  0 5px 16px rgba(181,97,63,.32);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  background: #efe6d6;            /* canvas behind the card */
  color: var(--t-body);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* The screen card */
.screen {
  display: block;
  background: var(--paper);
  min-height: 100vh;
}

/* Generic helpers */
.eyebrow {
  font: 600 11px/1 var(--sans);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--eyebrow);
}
.eyebrow.clay { color: var(--clay); letter-spacing: .2em; }
/* .only-mobile keeps its natural display on mobile; hidden at desktop (media query). */

a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }

em { font-style: italic; }
strong { font-weight: 600; }

/* ======================= HOME ======================= */

.home-wrap { padding: 34px 26px 30px; }

.home-eyebrow { letter-spacing: .22em; color: var(--clay); }

.home-h1 {
  font: 600 30px/1.14 var(--serif);
  margin: 14px 0 0;
  color: var(--t-heading);
}
.home-intro {
  font: 400 15px/1.65 var(--serif);
  color: var(--t-secondary);
  margin: 13px 0 0;
}
.quote-panel {
  margin: 24px 0 0;
  padding: 18px 20px;
  background: var(--sand);
  border-radius: 13px;
}
.quote-panel p {
  font: 500 16px/1.55 var(--serif);
  font-style: italic;
  color: var(--cocoa);
  margin: 0;
}

.progress-row {
  display: flex;
  align-items: center;
  gap: 13px;
  margin: 26px 0 0;
}
.progress-track {
  flex: 1;
  height: 6px;
  border-radius: 3px;
  background: var(--track-light);
  overflow: hidden;
}
.progress-fill { height: 100%; background: var(--clay); border-radius: 3px; }
.progress-label {
  font: 600 12px/1 var(--sans);
  color: #8A7F70;
  white-space: nowrap;
}

.week-eyebrow { margin: 32px 0 6px; }

/* week list */
.week-list { margin: 0; }
.row {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 17px 0;
  border-top: 1px solid var(--hairline);
  width: 100%;
  text-align: left;
  cursor: pointer;
}
.row:first-child { border-top: none; }
.row .circle {
  width: 30px; height: 30px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  flex: 0 0 auto;
  font: 600 14px/1 var(--sans);
}
.row .title { flex: 1; font: 500 16px/1.3 var(--serif); }

.row.completed .circle { background: var(--done-circle); color: var(--t-muted-2); }
.row.completed .title  { color: var(--t-body-2); }

.row.upcoming .circle  { border: 1px solid var(--hairline-solid); color: var(--t-faint); font-weight: 500; }
.row.upcoming .title   { color: var(--t-muted); }

.row.after .circle { border: 1px dashed var(--hairline-solid); color: var(--t-faint-3); font-weight: 500; font-size: 13px; }
.row.after .title  { color: var(--t-muted); }

/* active row = sand panel */
.row.active {
  background: var(--sand);
  border-radius: 14px;
  border-top: none;
  padding: 18px 16px;
  margin-top: 3px;
}
.row.active + .row { border-top: 1px solid var(--hairline); }
.row.active .circle { width: 32px; height: 32px; background: var(--clay); color: #fff; }
/* quiet "you are here" dot for active rows with no day number (e.g. Start here) */
.row.active .circle .adot { display: block; width: 7px; height: 7px; border-radius: 50%; background: #fff; }
.row.active .title  { font: 600 17px/1.25 var(--serif); color: var(--t-heading); }
.row.active .subtitle {
  font: 400 12.5px/1.3 var(--sans);
  color: var(--t-muted-2);
  margin-top: 3px;
}
.row .today {
  font: 600 12px/1 var(--sans);
  color: var(--clay);
  white-space: nowrap;
  flex: 0 0 auto;
}
.row:hover .title { color: var(--clay); }
.row.active:hover { filter: brightness(.985); }

/* desktop top bar (shared) — hidden on mobile */
.topbar {
  display: none;
  align-items: center;
  justify-content: space-between;
  padding: 28px 56px;
  border-bottom: 1px solid var(--hairline);
}
.topbar .wordmark { letter-spacing: .22em; color: var(--clay); font: 600 12px/1 var(--sans); text-transform: uppercase; }
.topbar .right { display: flex; align-items: center; gap: 16px; }
.topbar .progress-track { width: 150px; flex: 0 0 auto; }
.topbar .dayof { font: 500 13px/1 var(--sans); color: var(--eyebrow); }

/* back link (shared by topbar + mobile) — padded hit area, clear hover */
.backlink {
  display: inline-flex;
  align-items: center;
  font: 600 13px/1 var(--sans);
  color: var(--clay);
  cursor: pointer;
  padding: 7px 10px;
  margin: -7px -10px;     /* keep visual position; enlarge clickable area */
  border-radius: 8px;
}
.backlink:hover { color: var(--clay-hover); background: var(--sand); }
.lesson-top-mobile .backlink { font-size: 12px; }

/* primary button */
.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font: 600 15px/1 var(--sans);
  color: #fff;
  background: var(--clay);
  padding: 16px 28px;
  border-radius: 11px;
  box-shadow: var(--sh-btn);
  margin-top: 34px;
}
.btn-primary:hover { background: var(--clay-hover); }
.btn-primary .chev { font-size: 16px; }
/* the home "Continue" button is desktop-only */
.btn-primary.continue { display: none; }

/* ======================= LESSON ======================= */

.lesson-top-mobile {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 26px 26px 0;
  font: 500 12px/1 var(--sans);
  color: var(--eyebrow);
}
.lesson-top-mobile .backlink { color: var(--clay); font-weight: 600; }

.lesson-head { padding: 20px 26px 0; }
.lesson-h1 {
  font: 600 29px/1.12 var(--serif);
  margin: 11px 0 0;
  color: var(--t-heading);
}
.lesson-oneliner {
  font: 400 15px/1.55 var(--serif);
  font-style: italic;
  color: var(--t-secondary);
  margin: 9px 0 0;
}

/* player */
.player {
  margin: 22px 26px 0;
  padding: 15px 18px;
  background: var(--ink);
  border-radius: 16px;
  display: flex;
  align-items: center;
  gap: 14px;
}
.player .playbtn {
  width: 50px; height: 50px;
  border-radius: 50%;
  background: var(--clay);
  display: flex; align-items: center; justify-content: center;
  flex: 0 0 auto;
  box-shadow: var(--sh-play);
}
.player .playbtn:hover { background: var(--clay-hover); }
.player .bars { display: flex; gap: 4px; }
.player .bars i { width: 4.5px; height: 18px; background: #fff; border-radius: 2px; display: block; }
.player .triangle {
  width: 0; height: 0;
  border-left: 16px solid #fff;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  margin-left: 4px;
}
.player .meta { flex: 1; min-width: 0; }
.player .now {
  font: 600 10px/1 var(--sans);
  letter-spacing: .14em;
  color: var(--p-muted);
  margin-bottom: 6px;
  text-transform: uppercase;
}
.player .track-title { font: 600 16px/1.2 var(--serif); color: var(--p-title); }
.player .scrub { display: flex; align-items: center; gap: 8px; margin-top: 9px; }
.player .ptrack {
  flex: 1; height: 3px;
  border-radius: 2px;
  background: var(--p-track);
  position: relative;
}
.player .pfill { width: 0; height: 100%; background: var(--clay); border-radius: 2px; }
.player .knob {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translate(-50%,-50%);
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--p-title);
}
.player .ptime { font: 500 10px/1 var(--mono); color: var(--p-muted); flex: 0 0 auto; }

/* non-interactive hero glyph (timer ⏱ / prompt dot) — same circle, no play affordance */
.player .playbtn.static { cursor: default; box-shadow: none; font-size: 22px; }
.player .playbtn.prompt { background: transparent; border: 1.5px solid var(--p-track); }
.player .prompt-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--p-muted); display: block; }

/* self-narrate live timer (shares the .player ink frame) */
.timer-hero .timer-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 8px; }
.timer-hero .timer-display { font: 600 22px/1 var(--mono); color: var(--p-title); min-width: 64px; }
.timer-hero .timer-controls { display: flex; gap: 6px; flex-wrap: wrap; }
.timer-hero .t-btn {
  font: 500 12px/1 var(--sans);
  padding: 7px 10px;
  border-radius: 7px;
  border: 1px solid var(--p-track);
  background: transparent;
  color: var(--p-title);
  cursor: pointer;
}
.timer-hero .t-btn:hover { background: rgba(255,255,255,.07); }
/* the play/pause circle reuses .player .playbtn (clay, hover, shadow) — it IS the start control */
.timer-hero .t-toggle { padding: 0; }

.session-eyebrow { margin: 28px 26px 4px; }

/* desktop-only step caption under the player */
.step-caption { display: none; }

/* closing note (e.g. Day 7) */
.lesson-closing {
  margin: 22px 26px 36px;
  padding: 18px 20px;
  background: var(--sand);
  border-radius: 14px;
  font: 400 15px/1.65 var(--serif);
  color: var(--t-body-2);
}
.lesson-closing a { color: var(--clay); font-weight: 500; }

/* completion block at the bottom of a day / article */
.day-finish {
  margin: 26px 26px 40px;
  padding-top: 28px;
  border-top: 1px solid var(--hairline);
  text-align: center;
}
.btn-primary.finish-btn { margin-top: 0; }
.article .day-finish { margin: 30px 0 0; }

.accordion { padding: 0 26px 36px; }

/* segment rows (collapsed) */
.seg {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 17px 0;
  border-top: 1px solid var(--hairline);
  width: 100%;
  text-align: left;
  cursor: pointer;
}
.seg:first-child { border-top: none; }
.seg .scircle {
  width: 26px; height: 26px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  flex: 0 0 auto;
  font: 600 13px/1 var(--sans);
}
.seg .stitle { flex: 1; font: 500 15px/1.3 var(--serif); }
.seg .stitle .sub { font: 400 12px/1 var(--sans); color: var(--t-faint-2); }
.seg .sdur { font: 500 11px/1 var(--mono); color: var(--t-faint-2); }
.seg .schev { font: 400 13px/1 var(--sans); color: var(--t-faint-3); margin-left: 2px; }

.seg.completed .scircle { background: var(--done-circle); color: var(--t-muted-2); }
.seg.completed .stitle  { color: var(--t-muted); }

.seg.upcoming .scircle { border: 1px solid var(--hairline-solid); }
.seg.upcoming .stitle  { color: var(--t-body-2); }
.seg.upcoming .scircle .tri {
  width: 0; height: 0;
  border-left: 8px solid var(--t-faint);
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  margin-left: 2px;
}
.seg.upcoming .scircle .dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--t-faint);
  display: block;
}
.seg.upcoming .scircle.timer { color: var(--t-faint); border-color: var(--hairline-solid); }
.seg:hover .stitle { color: var(--clay); }

/* expanded segment (sand panel) */
.seg-open {
  margin-top: 3px;
  background: var(--sand);
  border-radius: 15px;
  padding: 17px 19px;
}
.seg-open + .seg { border-top: 1px solid var(--hairline); margin-top: 3px; }
.seg-open .open-head {
  display: flex;
  align-items: center;
  gap: 13px;
  cursor: pointer;
}
.seg-open .open-head .scircle {
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--clay);
  display: flex; align-items: center; justify-content: center;
  flex: 0 0 auto;
}
.seg-open .open-head .scircle .head-dot { width: 8px; height: 8px; border-radius: 50%; background: #fff; display: block; }
.seg-open .open-head .scircle .head-timer { font-size: 14px; line-height: 1; }
.seg-open .open-head .scircle .bars { display: flex; gap: 2.5px; }
.seg-open .open-head .scircle .bars i { width: 2.5px; height: 9px; background: #fff; border-radius: 1px; display: block; }
.seg-open .open-head .stitle { flex: 1; font: 600 16px/1.3 var(--serif); color: var(--t-heading); }
.seg-open .open-head .sdur { font: 500 11px/1 var(--mono); color: var(--t-muted-2); }
.seg-open .open-head .schev { color: var(--t-muted-2); margin-left: 5px; }

.seg-body {
  margin-top: 15px;
  padding-top: 15px;
  border-top: 1px solid var(--hairline-sand);
}
.seg-body p {
  font: 400 16px/1.8 var(--serif);
  color: var(--t-body);
  margin: 0 0 13px;
}
.seg-body p:last-child { margin-bottom: 0; }
.seg-body p .lead { font-weight: 600; color: var(--t-heading); }
/* highlighted essentialized-cue line */
.seg-body p.cue {
  font-weight: 500;
  color: var(--t-heading);
  background: var(--wash);
  border-radius: 7px;
  padding: 9px 13px;
  box-shadow: inset 3px 0 0 var(--clay);
}
.seg-body .note {
  font: 400 14.5px/1.7 var(--serif);
  color: var(--t-secondary);
  background: var(--wash);
  border-radius: 7px;
  padding: 11px 15px;
  margin: 0 0 13px;
}
.seg-body .note .note-label {
  display: block;
  font: 700 9.5px/1 var(--sans);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--t-muted-2);
  margin-bottom: 7px;
}

/* checklist (recall / self-narrate) */
.checklist { margin: 4px 0 0; padding: 0; list-style: none; }
.checklist li {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 7px 0;
}
.checklist .box {
  width: 17px; height: 17px;
  border: 1.5px solid var(--t-faint);
  border-radius: 5px;
  flex: 0 0 auto;
  margin-top: 2px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 11px;
}
.checklist .box.checked { background: var(--clay); border-color: var(--clay); }
.checklist .ctext { font: 400 14.5px/1.4 var(--serif); color: var(--t-body); }

/* collapsible cue reveal — narrate / recall from memory first, then self-check */
.cuecheck {
  margin-top: 14px;
  border: 1px solid var(--hairline-solid);
  border-radius: 10px;
  background: var(--white);
  padding: 0 15px;
}
.cuecheck summary {
  cursor: pointer;
  list-style: none;
  font: 600 13px/1.3 var(--sans);
  color: var(--t-secondary);
  padding: 12px 0;
  display: flex;
  align-items: center;
}
.cuecheck summary::-webkit-details-marker { display: none; }
.cuecheck summary::before {
  content: '▸';
  color: var(--clay);
  font-size: 11px;
  margin-right: 9px;
}
.cuecheck[open] summary::before { content: '▾'; }
.cuecheck[open] summary { border-bottom: 1px solid var(--hairline); }
.cuecheck .checklist { padding: 4px 0 8px; }

/* success card */
.success {
  margin-top: 16px;
  padding: 15px 17px;
  background: var(--white);
  border-left: 4px solid var(--cocoa);
  border-radius: 0 11px 11px 0;
}
.success .slabel {
  font: 700 10px/1 var(--sans);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--cocoa);
  margin-bottom: 9px;
}
.success .stext { font: 400 14px/1.55 var(--serif); color: var(--t-body-2); margin: 0 0 12px; }
.success .check { display: flex; align-items: center; gap: 10px; cursor: pointer; }
.success .check .box {
  width: 18px; height: 18px;
  border: 1.5px solid var(--t-faint);
  border-radius: 5px;
  flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 12px;
}
.success .check .box.checked { background: var(--clay); border-color: var(--clay); }
.success .check span { font: 500 13px/1.3 var(--sans); color: var(--t-secondary); }

/* audio-placeholder note */
.audio-placeholder {
  margin-top: 13px;
  font: 500 11px/1.4 var(--sans);
  letter-spacing: .04em;
  color: var(--t-faint);
  font-style: normal;
}

/* ======================= ARTICLE (Start here / Where to go next) ======================= */
.article { padding: 20px 26px 40px; }
.article h1 { font: 600 29px/1.12 var(--serif); color: var(--t-heading); margin: 12px 0 0; }
.article h2 { font: 600 19px/1.3 var(--serif); color: var(--t-heading); margin: 30px 0 0; }
.article p { font: 400 16px/1.75 var(--serif); color: var(--t-body); margin: 13px 0 0; }
.article ul { margin: 12px 0 0; padding-left: 20px; }
.article li { font: 400 16px/1.7 var(--serif); color: var(--t-body); margin: 7px 0; }
.article .lead-quote {
  margin: 22px 0 0;
  padding: 18px 20px;
  background: var(--sand);
  border-radius: 13px;
  font: 500 16px/1.55 var(--serif);
  font-style: italic;
  color: var(--cocoa);
}
.article .callout {
  margin: 16px 0 0;
  padding: 14px 18px;
  background: var(--wash);
  border-radius: 11px;
  font: 400 15px/1.65 var(--serif);
  color: var(--t-secondary);
}
.article .draft {
  color: var(--t-faint);
  font-style: italic;
}

/* ======================= RESPONSIVE: DESKTOP ======================= */
@media (min-width: 720px) {
  body { padding: 40px 0; }
  .screen {
    max-width: 1240px;
    margin: 0 auto;
    min-height: auto;
    border-radius: 18px;
    box-shadow: var(--sh-card);
    overflow: hidden;
  }
  .only-mobile { display: none !important; }
  .topbar { display: flex; }
  .btn-primary.continue { display: inline-flex; }
  .step-caption { display: block; }

  /* ---- Home desktop ---- */
  .home-wrap { padding: 0; }
  .home-body {
    display: flex;
    gap: 72px;
    padding: 64px 56px;
  }
  .home-hero { width: 400px; flex: 0 0 auto; }
  .home-hero .home-h1 { font: 600 46px/1.08 var(--serif); margin: 0; }
  .home-hero .home-intro { font: 400 17px/1.65 var(--serif); margin: 20px 0 0; }
  .home-hero .quote-panel { margin: 30px 0 0; padding: 22px 24px; border-radius: 14px; }
  .home-hero .quote-panel p { font-size: 17px; }
  .home-week { flex: 1; }
  .home-week .week-eyebrow { margin: 0 0 4px; }
  .home-week .row { padding: 20px 0; gap: 16px; }
  .home-week .row .circle { width: 32px; height: 32px; }
  .home-week .row .title { font-size: 17px; }
  .home-week .row.active { padding: 22px; border-radius: 15px; }
  .home-week .row.active .circle { width: 34px; height: 34px; }
  .home-week .row.active .title { font-size: 19px; }
  .home-week .row.active .subtitle { font-size: 13px; }

  /* ---- Lesson desktop ---- */
  .lesson-body {
    display: flex;
    gap: 72px;
    padding: 56px;
    align-items: flex-start;
  }
  .lesson-left { width: 400px; flex: 0 0 auto; position: sticky; top: 40px; }
  .lesson-left .lesson-head { padding: 0; }
  .lesson-left .lesson-h1 { font: 600 44px/1.06 var(--serif); margin: 14px 0 0; }
  .lesson-left .lesson-oneliner { font-size: 17px; line-height: 1.6; margin: 14px 0 0; }
  .lesson-left .player { margin: 32px 0 0; padding: 18px 20px; }
  .lesson-left .player .playbtn { width: 54px; height: 54px; }
  .lesson-left .player .bars i { width: 5px; height: 20px; }
  .step-caption { margin-top: 18px; font: 500 13px/1.5 var(--sans); color: var(--t-muted-2); }

  .lesson-right { flex: 1; max-width: 660px; }
  .lesson-right .session-eyebrow { margin: 0 0 4px; }
  .lesson-right .accordion { padding: 0; }
  .lesson-right .seg { padding: 22px 0; }
  .lesson-right .seg .scircle { width: 28px; height: 28px; }
  .lesson-right .seg .stitle { font-size: 17px; }
  .lesson-right .seg .sdur { font-size: 12px; }
  .lesson-right .seg-open { padding: 24px 28px; border-radius: 16px; }
  .lesson-right .seg-open .open-head .scircle { width: 28px; height: 28px; }
  .lesson-right .seg-open .open-head .stitle { font-size: 19px; }
  .lesson-right .seg-body { margin-top: 18px; padding-top: 18px; }
  .lesson-right .seg-body p { font-size: 17px; line-height: 1.85; margin-bottom: 14px; }
  .lesson-right .seg-body p.cue { padding: 11px 16px; border-radius: 8px; }
  .lesson-right .success { padding: 18px 22px; border-radius: 0 12px 12px 0; }
  .lesson-right .success .stext { font-size: 15px; line-height: 1.6; }
  .lesson-right .success .check span { font-size: 14px; }
  .lesson-right .day-finish { margin: 30px 0 0; }

  /* ---- Article desktop ---- */
  .article { max-width: 720px; margin: 0 auto; padding: 56px; }
  .article h1 { font-size: 42px; line-height: 1.06; }
  .article p, .article li { font-size: 17px; }
}