/* ACT English Remediation v2 — shared styles */
:root{
  --cream:#FBF9F4;
  --navy:#1A2B4A;
  --terracotta:#D4763A;
  --sage:#6B8E5A;
  --rose:#C97B7B;
  --required-red:#B23B3B;
  --navy-soft:#3a4a66;
  --line:#e4ddcf;
  --card:#ffffff;
  --locked:#bcae97;
  --shadow:0 2px 14px rgba(26,43,74,.08);
  --radius:14px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--cream);
  color:var(--navy);
  font-family:'Inter',system-ui,-apple-system,sans-serif;
  font-size:clamp(17px,2.4vw,18px);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{font-family:'Source Serif 4',Georgia,serif;line-height:1.18;font-weight:600;color:var(--navy)}
h1{font-size:clamp(1.7rem,5vw,2.6rem);margin:.2em 0 .35em}
h2{font-size:clamp(1.35rem,3.6vw,1.9rem);margin:1.2em 0 .4em}
h3{font-size:clamp(1.12rem,2.8vw,1.35rem);margin:1em 0 .3em}
p{margin:.4em 0 .8em}
a{color:var(--terracotta);text-decoration:none}
a:hover{text-decoration:underline}
ul{margin:.4em 0 .9em;padding-left:1.2em}
li{margin:.25em 0}
img{max-width:100%}
.wrap{max-width:920px;margin:0 auto;padding:0 18px}

/* Nav */
.nav{position:sticky;top:0;z-index:40;background:rgba(251,249,244,.94);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.nav-inner{max-width:920px;margin:0 auto;display:flex;align-items:center;gap:14px;padding:10px 18px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:9px;font-family:'Source Serif 4',serif;font-weight:600;font-size:1.05rem;color:var(--navy)}
.brand:hover{text-decoration:none}
.nav-links{display:flex;gap:6px;margin-left:auto;align-items:center;flex-wrap:wrap}
.nav-links a{color:var(--navy);font-size:.92rem;padding:8px 10px;border-radius:9px;min-height:44px;display:inline-flex;align-items:center}
.nav-links a:hover{background:#f0eadd;text-decoration:none}
.nav-links a.coin-pill{display:inline-flex;align-items:center;gap:6px;background:var(--navy);color:#fff;padding:8px 13px;border-radius:999px;font-weight:600;font-size:.92rem;min-height:44px}
.nav-links a.coin-pill:hover{text-decoration:none;color:#fff;background:var(--navy)}
.coin-pill .c{color:var(--terracotta)}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--terracotta);color:#fff;border:none;border-radius:11px;padding:13px 20px;font:inherit;font-weight:600;cursor:pointer;min-height:44px;text-align:center}
.btn:hover{filter:brightness(.95);text-decoration:none;color:#fff}
.btn.secondary{background:transparent;color:var(--navy);border:1.5px solid var(--navy)}
.btn.ghost{background:#fff;color:var(--navy);border:1.5px solid var(--line)}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn-row{display:flex;gap:10px;flex-wrap:wrap;margin:14px 0}

/* Cards */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:18px 20px;box-shadow:var(--shadow);margin:16px 0}
.hero{padding:34px 0 8px}
.hero .lead{font-size:clamp(1.15rem,3vw,1.4rem);max-width:34ch}
.eyebrow{text-transform:uppercase;letter-spacing:.13em;font-size:.74rem;font-weight:700;color:var(--terracotta);margin:0 0 6px}

/* Pills */
.pill{display:inline-flex;align-items:center;gap:6px;font-size:.78rem;font-weight:600;padding:5px 11px;border-radius:999px;background:#f0eadd;color:var(--navy)}
.pill.chart{background:#efe6d6;color:#8a5a2a}
.pill.sage{background:#e7efe1;color:#46663a}
.pill.rose{background:#f6e7e7;color:#9d5151}
.pill.lock{background:#ece4d3;color:#8a7a58}
.pill.terra{background:var(--terracotta);color:#fff;text-decoration:none}
.pill.navy{background:var(--navy);color:#fff}
.pill.locked{background:#ece4d3;color:#8a7a58}
a.pill{text-decoration:none}
.pill.navy{background:var(--navy);color:#fff}

/* Pattern progress */
.pattern{display:grid;grid-template-columns:1fr;gap:4px;padding:11px 0;border-bottom:1px solid var(--line)}
.pattern:last-child{border-bottom:none}
.pattern .row{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.pattern .name{font-weight:600}
.pattern .pct{font-size:.85rem;color:var(--navy-soft)}
.bar{height:9px;background:#ece4d3;border-radius:999px;overflow:hidden}
.bar > i{display:block;height:100%;background:var(--sage);border-radius:999px;transition:width .4s}

/* Calendar */
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.cal-dow{font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--navy-soft);text-align:center;padding:4px 0}
.cal-cell{aspect-ratio:1/1;border:1px solid var(--line);border-radius:10px;padding:5px;display:flex;flex-direction:column;gap:2px;font-size:.66rem;background:#fff;min-height:52px;overflow:hidden}
.cal-cell.empty{background:transparent;border:none}
.cal-cell .d{font-weight:700;font-size:.78rem}
.cal-cell .abbr{color:var(--navy-soft);line-height:1.15}
.cal-cell.past{background:#f1ece1;color:#9a9079;opacity:.72}
.cal-cell.past .d{color:#9a9079}
.cal-cell.today{border:2px solid var(--terracotta);box-shadow:0 0 0 3px rgba(212,118,58,.15)}
.cal-cell.locked{background:#f4efe5}
.cal-cell.locked .lk{margin-left:auto;font-size:.7rem}
.cal-cell.test{outline:2px dashed var(--sage);outline-offset:-3px}
.cal-cell a{color:var(--terracotta)}
@media(min-width:620px){.cal-page .cal-cell{font-size:.74rem;min-height:84px}}

/* Today card */
.today-card{background:linear-gradient(180deg,#fff, #fdfaf3);border:1.5px solid var(--terracotta)}
.today-topics{display:flex;flex-direction:column;gap:8px;margin-top:8px}
.today-topics a{display:flex;align-items:center;gap:10px;padding:12px 14px;background:#fff;border:1px solid var(--line);border-radius:11px;color:var(--navy);font-weight:600;min-height:44px}
.today-topics a:hover{border-color:var(--terracotta);text-decoration:none}

/* Topic page */
.video-card summary{cursor:pointer;font-weight:600;font-family:'Source Serif 4',serif;font-size:1.15rem;list-style:none;display:flex;align-items:center;gap:10px}
.video-card summary::-webkit-details-marker{display:none}
.video-card summary .chev{transition:transform .2s;color:var(--terracotta)}
.video-card[open] summary .chev{transform:rotate(90deg)}
.video-frame{position:relative;width:100%;aspect-ratio:16/9;border-radius:11px;overflow:hidden;background:#000;margin-top:12px}
.video-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.video-placeholder{aspect-ratio:16/9;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:6px;background:#f1ece1;border:1px dashed var(--locked);border-radius:11px;color:var(--navy-soft);margin-top:12px;text-align:center;padding:16px}
.req-badge{display:none;align-items:center;gap:7px;background:var(--required-red);color:#fff;font-weight:700;font-size:.82rem;padding:7px 13px;border-radius:999px;margin:10px 0}
.req-badge.show{display:inline-flex}
.video-progress{height:7px;background:#e0d8c8;border-radius:999px;overflow:hidden;margin:8px 0;display:none}
.video-progress.show{display:block}
.video-progress > i{display:block;height:100%;width:0;background:var(--terracotta)}

/* Rule card */
.rulecard{background:#fff;border:1.5px solid var(--terracotta);border-radius:var(--radius);padding:16px 18px;box-shadow:var(--shadow)}
.rulecard h4{margin-top:0;color:var(--terracotta);font-size:.78rem;letter-spacing:.12em;text-transform:uppercase}
.rulecard ul{margin:.3em 0}
@media(min-width:900px){
  .topic-layout{display:grid;grid-template-columns:1fr 300px;gap:26px;align-items:start}
  .topic-aside{position:sticky;top:74px}
}
.mobile-rulecard{display:none}
@media(max-width:899px){
  .topic-aside{display:none}
  .mobile-rulecard{display:block;position:fixed;left:0;right:0;bottom:0;z-index:30;background:#fff;border-top:2px solid var(--terracotta);box-shadow:0 -4px 18px rgba(26,43,74,.12);transition:transform .25s}
  .mobile-rulecard summary{padding:11px 16px;font-weight:700;color:var(--terracotta);cursor:pointer;list-style:none;font-size:.95rem}
  .mobile-rulecard summary::-webkit-details-marker{display:none}
  .mobile-rulecard .body{padding:0 16px 16px;max-height:46vh;overflow:auto}
  .mobile-rulecard.hidden{display:none}
}

/* Quiz */
.q{border:1px solid var(--line);border-radius:12px;padding:15px 16px;margin:13px 0;background:#fff}
.q .stem{font-weight:600;margin-bottom:10px}
.q .qnum{color:var(--terracotta);font-weight:700;font-size:.8rem;margin-right:6px}
.choices{display:flex;flex-direction:column;gap:8px}
.choice-row{display:flex;align-items:stretch;gap:8px;width:100%}
.choice-row .choice{flex:1}
.elim-btn{flex:0 0 auto;width:36px;min-height:44px;border:1.5px solid var(--line);border-radius:10px;background:#fff;color:var(--navy-soft);font:inherit;font-size:14px;font-weight:600;cursor:pointer;padding:0;display:flex;align-items:center;justify-content:center;line-height:1}
.elim-btn:hover{border-color:var(--navy-soft);color:var(--navy)}
.elim-btn:focus-visible{outline:2px solid var(--navy);outline-offset:2px}
.choice-row.eliminated .elim-btn{background:var(--navy-soft);color:#fff;border-color:var(--navy-soft)}
.choice-row.eliminated .choice{opacity:.45;text-decoration:line-through;background:#f3efe6}
.choice-row.eliminated .choice:hover{border-color:var(--line)}
.choice{display:flex;gap:10px;align-items:flex-start;padding:11px 13px;border:1.5px solid var(--line);border-radius:10px;cursor:pointer;background:#fff;min-height:44px;font:inherit;text-align:left;color:var(--navy);width:100%}
.choice:hover{border-color:var(--navy-soft)}
.choice.selected{border-color:var(--navy);background:#f7f3ea}
.choice .ltr{font-weight:700;color:var(--navy-soft)}
.choice.correct{border-color:var(--sage);background:#eef4e9}
.choice.incorrect{border-color:var(--rose);background:#f8ecec}
.why{font-size:.85rem;margin-top:7px;padding:9px 11px;border-radius:9px;background:#f4efe5;display:none}
.why.show{display:block}
.why.correct{background:#eef4e9;color:#46663a}
.why.incorrect{background:#f8ecec;color:#9d5151}
.quiz-result{font-weight:700;font-size:1.05rem;padding:14px 16px;border-radius:12px;margin:14px 0;display:none}
.quiz-result.show{display:block}
.quiz-result.pass{background:#eef4e9;color:#46663a;border:1px solid var(--sage)}
.quiz-result.fail{background:#f8ecec;color:#9d5151;border:1px solid var(--rose)}
.section-tag{display:inline-block;font-size:.74rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--navy-soft);margin:0 0 4px}
.locked-veil{text-align:center;padding:50px 20px}
.locked-veil .lk{font-size:2.4rem}
.mastery-banner{display:none;background:linear-gradient(120deg,#6B8E5A,#557a45);color:#fff;border-radius:var(--radius);padding:20px 22px;margin:18px 0}
.mastery-banner.show{display:block}
.mastery-banner h3{color:#fff;margin-top:0}

/* tables */
table{width:100%;border-collapse:collapse;font-size:.9rem;margin:12px 0}
th,td{text-align:left;padding:9px 10px;border-bottom:1px solid var(--line)}
th{font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;color:var(--navy-soft)}
.table-wrap{overflow-x:auto}
.status-locked{color:var(--locked);font-weight:600}
.status-prog{color:var(--terracotta);font-weight:600}
.status-master{color:var(--sage);font-weight:600}

.foot{margin:40px 0 90px;padding-top:18px;border-top:1px solid var(--line);font-size:.85rem;color:var(--navy-soft)}
.note{font-size:.9rem;color:var(--navy-soft);background:#f4efe5;padding:11px 14px;border-radius:10px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
.grid-2{display:grid;gap:14px}
@media(min-width:680px){.grid-2{grid-template-columns:1fr 1fr}}
.code-box{font-family:ui-monospace,monospace;font-size:1.4rem;letter-spacing:.25em;background:var(--navy);color:#fff;padding:12px 18px;border-radius:11px;display:inline-block;font-weight:700}
textarea.sync{width:100%;min-height:90px;font-family:ui-monospace,monospace;font-size:.8rem;border:1px solid var(--line);border-radius:10px;padding:10px}

/* ===== Worked example (v5.1) ===== */
.worked-example { font-family: inherit; }
.we-header { margin-bottom: 8px; }
.we-badge { display: inline-block; padding: 3px 10px; background: var(--terracotta); color: #fff; border-radius: 12px; font-size: .75rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.we-passage { background: #fdfaf2; border-left: 3px solid var(--navy-soft); padding: 10px 14px; border-radius: 0 6px 6px 0; margin: 10px 0 14px; font-size: 1rem; line-height: 1.55; color: var(--navy); }
.we-passage .underlined { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.we-stem { font-weight: 600; color: var(--navy); margin: 8px 0 10px; }
.we-choices { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.we-choice-row { display: flex; align-items: stretch; gap: 8px; padding: 11px 13px; border: 1.5px solid var(--line); border-radius: 10px; background: #fff; }
.we-choice-row.we-correct { border-color: var(--sage); background: #eef4e9; }
.we-choice-row.we-eliminated { opacity: .75; background: #f3efe6; }
.we-choice-row.we-eliminated .we-choice-text { text-decoration: line-through; color: #7a7567; }
.we-elim-btn { flex: 0 0 auto; width: 32px; min-height: 32px; border: 1.5px solid var(--line); border-radius: 8px; font: inherit; font-size: 14px; font-weight: 700; cursor: default; display: flex; align-items: center; justify-content: center; line-height: 1; }
.we-correct-btn { background: var(--sage); color: #fff; border-color: var(--sage); }
.we-wrong-btn { background: var(--navy-soft); color: #fff; border-color: var(--navy-soft); }
.we-choice-body { flex: 1; }
.we-choice-text { font-weight: 500; color: var(--navy); }
.we-choice-text .ltr { font-weight: 700; color: var(--navy-soft); margin-right: 6px; }
.we-choice-why { margin-top: 5px; font-size: .9rem; color: #555; line-height: 1.45; }
.trap-chip { display: inline-block; padding: 2px 8px; background: var(--navy); color: #fff; border-radius: 10px; font-size: .72rem; font-weight: 600; margin-left: 4px; vertical-align: middle; }
.we-walkthrough { margin-top: 14px; padding: 12px 14px 12px 12px; background: #fbf6e9; border: 1px solid #e5d99c; border-radius: 8px; }
.we-walk-title { font-weight: 700; color: var(--navy); margin-bottom: 8px; font-size: .95rem; }
.we-walk-list { margin: 0; padding-left: 22px; }
.we-walk-list li { margin: 5px 0; line-height: 1.5; color: var(--navy); }
.we-walk-list li.we-walk-cut { color: #6b5848; }
.we-walk-list li.we-walk-keep { color: #3d5c2c; }

/* Challenge chip on Practice B questions */
.challenge-chip { display: inline-block; padding: 2px 8px; background: var(--terracotta); color: #fff; border-radius: 10px; font-size: .7rem; font-weight: 700; letter-spacing: .04em; margin-left: 8px; text-transform: uppercase; }

/* Hide the rule-card aside while a diagnostic is in view */
body.act-diag-mode .topic-aside { display: none !important; }
body.act-diag-mode .rule-card-mobile { display: none !important; }

/* ===== Re-teach card (shown after failing diag1 twice) ===== */
.reteach-card { background: #fff8eb; border: 2px solid var(--terracotta); border-radius: 14px; padding: 22px 24px; margin: 12px 0 18px; box-shadow: 0 2px 8px rgba(0,0,0,0.04); }
.reteach-card h3 { margin-top: 0; color: var(--terracotta); font-family: var(--font-heading, 'Lora', serif); font-size: 1.4rem; }
.reteach-card h4 { color: var(--navy); margin-top: 18px; margin-bottom: 8px; }
.reteach-card p, .reteach-card li { color: var(--navy); line-height: 1.55; font-size: 1rem; }
.reteach-card ul, .reteach-card ol { padding-left: 22px; margin: 8px 0 12px; }
.reteach-card li { margin: 6px 0; }
.reteach-card strong { color: var(--terracotta); }
.reteach-card em { color: var(--navy-soft); font-style: normal; font-weight: 500; }
.reteach-card table { border-collapse: collapse; width: 100%; margin: 12px 0; font-size: .95rem; }
.reteach-card th, .reteach-card td { border: 1px solid #e0d7c2; padding: 8px 10px; text-align: left; vertical-align: top; }
.reteach-card th { background: #f3eadb; color: var(--navy); }
.reteach-card div[style*="background"] { border-radius: 8px; }
@media (max-width: 600px) { .reteach-card { padding: 16px 18px; } .reteach-card h3 { font-size: 1.2rem; } }

/* ---- v7: Decision tree card (pre-diagnostic) ---- */
.dt-card {
  background: #fdf6e8;
  border: 2px solid var(--terracotta, #c65d3a);
  border-radius: 10px;
  padding: 14px 18px;
  margin: 16px 0;
}
.dt-card[open] { padding-bottom: 18px; }
.dt-summary {
  cursor: pointer;
  font-size: 1.02rem;
  color: var(--navy, #1e2a4a);
  padding: 4px 0;
  outline: none;
  list-style: none;
}
.dt-summary::marker, .dt-summary::-webkit-details-marker { display: none; }
.dt-summary::before {
  content: '\25B6';
  font-size: .8em;
  margin-right: 8px;
  display: inline-block;
  transition: transform .18s ease;
}
.dt-card[open] .dt-summary::before { transform: rotate(90deg); }
.dt-steps { margin-top: 10px; display: flex; flex-direction: column; gap: 12px; }
.dt-step { display: flex; align-items: flex-start; gap: 12px; }
.dt-step-n {
  flex: 0 0 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--terracotta, #c65d3a);
  color: #fff;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .95rem;
  margin-top: 2px;
}
.dt-step-body { flex: 1 1 auto; }
.dt-step-q { margin: 0 0 6px 0; color: var(--navy, #1e2a4a); line-height: 1.4; }
.dt-actions { margin: 4px 0 0 0; padding-left: 18px; color: #3a3a3a; }
.dt-actions li { margin: 3px 0; line-height: 1.4; }
.dt-trap {
  margin: 14px 0 0 0;
  padding: 10px 12px;
  background: #fff4e6;
  border-left: 4px solid var(--terracotta, #c65d3a);
  border-radius: 6px;
  font-size: .95rem;
  color: #4a2a1a;
}
@media (max-width: 600px) {
  .dt-card { padding: 12px 14px; }
  .dt-step-n { flex-basis: 24px; height: 24px; font-size: .85rem; }
}