/* ==========================================================================
   My Aphasia Plan — the one panel, first-week card, plan page, beat + modal.
   Spec: docs/MY-APHASIA-PLAN-SPEC.md §10, §13.1. Styled from the hub's real
   values (practice-home.css): --ph-blue frame = the panel, green = done /
   strong, faint blue = touched, gold = premium. No !important, no transitions
   on state-swapped nodes.
   ========================================================================== */

.as-plan-page,
.as-plan-panel,
.as-plan-week {
    --as-plan-blue: #185FA5;
    --as-plan-frame: #0F6E56;   /* panel frame + header band (Lyda 09-11: homework = green, library = blue) */
    --as-plan-green: #10B981;
    --as-plan-green-ink: #047857;
    --as-plan-gold: #FBC75A;
    --as-plan-grey: #CBD5E0;
    --as-plan-text: #1A202C;
    --as-plan-muted: #5a6678;
    color: var(--as-plan-text);
}

/* --- The panel ------------------------------------------------------------ */
.as-plan-panel {
    border: 3px solid var(--as-plan-frame);
    border-radius: 14px;
    margin: 10px 0 20px;
    background: #FFFFFF;
    box-shadow: 0 8px 20px rgba(15, 110, 86, 0.18);
    overflow: hidden;
}
.as-plan-panel .as-plan-panel-h {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 48px;
    padding: 10px 48px;
    border: none;
    border-radius: 0;
    background: var(--as-plan-frame);
    color: #FFFFFF;
    font: inherit;
    cursor: pointer;
    box-sizing: border-box;
    text-transform: none;
}
.as-plan-panel .as-plan-panel-h.is-static { cursor: default; }
.as-plan-panel .as-plan-panel-h h2 {
    margin: 0;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.2;
    color: #FFFFFF;
    text-align: center;
    text-transform: none;
}
.as-plan-panel .as-plan-panel-h:focus-visible { outline: 3px solid #FBC75A; outline-offset: -3px; }
.as-plan-sum {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 13px;
    font-weight: 600;
    opacity: 0.9;
}
.as-plan-chev {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.22);
    display: flex;
    align-items: center;
    justify-content: center;
}
/* Faint wash under the body so white rows lift off it (the wireframe cure). */
.as-plan-panel-b { padding: 12px 14px 10px; background: #F3F9F7; }

/* --- Homework rows: the rows ARE the buttons ------------------------------- */
.as-plan-rows { display: flex; flex-direction: column; gap: 8px; }
.as-plan-panel .as-plan-row {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 60px;
    padding: 10px 12px;
    border: 2px solid var(--as-plan-grey);
    border-radius: 12px;
    background: #FFFFFF;
    color: inherit;
    text-decoration: none;
    box-sizing: border-box;
    cursor: pointer;
}
.as-plan-panel .as-plan-row:hover { color: inherit; text-decoration: none; transform: translateY(-1px); }
.as-plan-panel .as-plan-row:focus-visible { outline: 3px solid var(--as-plan-blue); outline-offset: 2px; }
.as-plan-panel .as-plan-row.is-done {
    border-color: var(--as-plan-green);
    background: linear-gradient(180deg, #FFFFFF 0%, #EFF6E7 100%);
}
.as-plan-panel .as-plan-row.is-locked { border-color: var(--as-plan-gold); background: #FFFDF7; }
.as-plan-row.is-navigating,
.as-plan-link.is-navigating,
.as-plan-btn.is-navigating { opacity: 0.72; transform: scale(0.98); cursor: progress; }
.as-plan-row-e { width: 36px; font-size: 30px; line-height: 1; text-align: center; flex-shrink: 0; }
.as-plan-row-t { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.as-plan-row-n { font-size: 17px; font-weight: 600; line-height: 1.2; }
.as-plan-row-m { font-size: 13px; color: var(--as-plan-muted); margin-top: 3px; }

/* Binary marks: ✓ green = done · open circle = not done. Nothing else. */
.as-plan-mark {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 2px solid #94A3B8;
    background: #FFFFFF;
    box-sizing: border-box;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.as-plan-mark.is-done { border-color: var(--as-plan-green); background: var(--as-plan-green); }
.as-plan-prem {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 11px;
    font-weight: 700;
    color: #92400e;
    background: #FEF3C7;
    border: 1px solid var(--as-plan-gold);
    border-radius: 10px;
    padding: 4px 8px;
    white-space: nowrap;
    flex-shrink: 0;
}
/* Small lock, directly to the right of the word inside the Premium tag
   (Lyda 09-12) — replaces the separate left-hand lock mark. */
.as-plan-prem-lock { font-size: 9px; line-height: 1; }
.as-plan-panel .as-plan-link,
.as-plan-page .as-plan-link {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    margin-top: 4px;
    font-size: 14px;
    font-weight: 600;
    color: var(--as-plan-blue);
    text-decoration: none;
}
.as-plan-panel .as-plan-link:hover,
.as-plan-page .as-plan-link:hover { color: #134B84; text-decoration: none; }

/* Quiz / complete bodies: same frame, one state at a time. */
.as-plan-q { text-align: center; padding: 8px 0 6px; }
.as-plan-q-ic { font-size: 40px; line-height: 1; margin-bottom: 6px; }
.as-plan-q h3 { margin: 0 0 4px; font-size: 18px; font-weight: 700; text-transform: none; }
.as-plan-q p { margin: 0 0 14px; font-size: 14px; color: var(--as-plan-muted); }
.as-plan-bigchk {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--as-plan-green);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 6px auto 10px;
}
.as-plan-panel .as-plan-btn,
.as-plan-week .as-plan-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 52px;
    padding: 12px 20px;
    border: none;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 700;
    text-decoration: none;
    box-sizing: border-box;
    text-transform: none;
    cursor: pointer;
}
.as-plan-panel .as-plan-btn--act,
.as-plan-week .as-plan-btn--act { background: #15803d; color: #FFFFFF; box-shadow: 0 6px 16px rgba(21, 128, 61, 0.28); }
.as-plan-panel .as-plan-btn--act:hover,
.as-plan-week .as-plan-btn--act:hover { background: #166534; color: #FFFFFF; }
.as-plan-panel .as-plan-btn--gold,
.as-plan-week .as-plan-btn--gold { background: var(--as-plan-gold); color: var(--as-plan-text); margin-top: 12px; }
.as-plan-panel .as-plan-btn--gold:hover,
.as-plan-week .as-plan-btn--gold:hover { background: #F6B73C; color: var(--as-plan-text); }
.as-plan-panel .as-plan-btn:focus-visible,
.as-plan-week .as-plan-btn:focus-visible { outline: 3px solid var(--as-plan-blue); outline-offset: 2px; }

/* --- First week (free): centered title · Now | Goal · button only when met -- */
.as-plan-week {
    border: 2px solid var(--as-plan-gold);
    background: #FFFDF7;
    border-radius: 12px;
    padding: 14px;
    margin: 10px 0 18px;
}
.as-plan-week h3 { margin: 0 0 12px; font-size: 17px; font-weight: 700; text-align: center; text-transform: none; }
.as-plan-tbl { width: 100%; border-collapse: collapse; }
.as-plan-tbl th {
    padding: 0 4px 6px;
    font-size: 12px;
    font-weight: 600;
    color: var(--as-plan-muted);
    text-align: right;
    letter-spacing: 0.02em;
}
.as-plan-tbl th:first-child { text-align: left; }
.as-plan-tbl td { padding: 10px 4px; border-top: 1px solid #F1E4C0; font-size: 15px; text-align: right; }
.as-plan-tbl td:first-child { text-align: left; font-weight: 600; }
.as-plan-tbl-e { font-size: 20px; margin-right: 8px; vertical-align: middle; }
.as-plan-tbl-now { font-weight: 700; font-size: 16px; }
.as-plan-tbl-now.is-met { color: #3B6D11; }
.as-plan-tbl-goal { color: var(--as-plan-muted); }
.as-plan-tick {
    display: inline-flex;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--as-plan-green);
    align-items: center;
    justify-content: center;
    margin-left: 6px;
    vertical-align: middle;
}

/* --- Plan page ------------------------------------------------------------- */
.as-plan-page { max-width: 760px; margin: 0 auto; padding: 16px; box-sizing: border-box; }
.as-plan-welcome { text-align: center; padding: 8px 0 6px; }
.as-plan-welcome h1 { margin: 0 0 8px; font-size: 22px; font-weight: 700; line-height: 1.2; text-transform: none; }
.as-plan-streak {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    background: #FFF8E1;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
    color: #854F0B;
}
.as-plan-streak-f { font-size: 16px; }
.as-plan-muted { color: var(--as-plan-muted); text-align: center; }

/* My scores: Started → Now, the green tail IS the improvement. */
.as-plan-scores { display: flex; flex-direction: column; }
.as-plan-score { padding: 10px 0; border-top: 1px solid #EDF2F7; }
.as-plan-score:first-child { border-top: none; }
.as-plan-score-n { display: flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 600; }
.as-plan-score-none { color: var(--as-plan-muted); font-weight: 500; font-size: 13px; }
.as-plan-score.is-empty .as-plan-sbar { opacity: 0.45; }
.as-plan-score-e { font-size: 22px; line-height: 1; }
.as-plan-score-nums { margin-left: auto; display: flex; gap: 10px; align-items: baseline; font-size: 13px; }
.as-plan-score-started { color: var(--as-plan-muted); }
.as-plan-score-now { color: #3B6D11; font-weight: 700; font-size: 15px; }
.as-plan-sbar { position: relative; height: 10px; margin-top: 8px; background: #E2E8F0; border-radius: 5px; overflow: hidden; }
.as-plan-sbar-to { position: absolute; left: 0; top: 0; height: 100%; background: var(--as-plan-green); border-radius: 5px; }
.as-plan-sbar-from { position: absolute; left: 0; top: 0; height: 100%; background: #94A3B8; border-radius: 5px 0 0 5px; }

/* My plan: three groups, steps nested under their quiz on a rail. */
.as-plan-list { display: flex; flex-direction: column; gap: 14px; }
.as-plan-grp { display: flex; flex-direction: column; gap: 8px; }
.as-plan-steps {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-left: 22px;
    padding-left: 12px;
    border-left: 3px solid var(--as-plan-grey);
}
.as-plan-grp.is-done .as-plan-steps { border-left-color: var(--as-plan-green); }
.as-plan-panel .as-plan-item {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 56px;
    padding: 10px 12px;
    border: 2px solid var(--as-plan-grey);
    border-radius: 12px;
    background: #FFFFFF;
    color: inherit;
    text-decoration: none;
    box-sizing: border-box;
}
.as-plan-panel a.as-plan-item { cursor: pointer; }
.as-plan-panel a.as-plan-item:hover { color: inherit; text-decoration: none; }
.as-plan-panel .as-plan-item.is-done { border-color: var(--as-plan-green); background: linear-gradient(180deg, #FFFFFF 0%, #EFF6E7 100%); }
.as-plan-panel .as-plan-item.is-ready { border-color: var(--as-plan-green); background: #ECFDF5; }
/* Free member's locked Quiz 2/3 teaser: gold frame, Premium pill, no expand. */
.as-plan-panel .as-plan-item.is-locked { border-color: var(--as-plan-gold); background: #FFFDF7; }
.as-plan-item-num {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #EDF2F7;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    color: var(--as-plan-muted);
    flex-shrink: 0;
}
.as-plan-item.is-done .as-plan-item-num { background: var(--as-plan-green); color: #FFFFFF; }
.as-plan-item-qe { width: 28px; font-size: 22px; line-height: 1; text-align: center; flex-shrink: 0; }
.as-plan-item-t { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.as-plan-item-n { font-size: 16px; font-weight: 600; }
.as-plan-now { color: var(--as-plan-green-ink); }
.as-plan-item-m { font-size: 12px; color: var(--as-plan-muted); margin-top: 2px; }

/* How often + the toggle */
.as-plan-pills { display: flex; gap: 8px; }
.as-plan-panel .as-plan-pill {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    border: 2px solid var(--as-plan-grey);
    border-radius: 22px;
    background: #FFFFFF;
    color: var(--as-plan-text);
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    text-transform: none;
    cursor: pointer;
}
.as-plan-panel .as-plan-pill.is-on { border-color: var(--as-plan-blue); background: #EDF4FB; color: var(--as-plan-blue); }
.as-plan-panel .as-plan-pill:focus-visible { outline: 3px solid var(--as-plan-blue); outline-offset: 2px; }
.as-plan-panel .as-plan-setting {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    min-height: 44px;
    margin-top: 14px;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--as-plan-text);
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    text-transform: none;
    cursor: pointer;
}
.as-plan-sw {
    position: relative;
    width: 48px;
    height: 28px;
    border-radius: 14px;
    background: var(--as-plan-grey);
    flex-shrink: 0;
    display: inline-block;
}
.as-plan-sw.is-on { background: var(--as-plan-green); }
.as-plan-sw-knob {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #FFFFFF;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}
.as-plan-sw.is-on .as-plan-sw-knob { left: auto; right: 3px; }

/* --- Entry modal + celebration beat (inside the hub's modal chrome) ------- */
.practice-home-root .as-plan-entry .as-plan-q-ic { margin-bottom: 8px; }
.practice-home-root .as-plan-beat-body { margin: 0 0 14px; font-size: 14px; color: var(--as-plan-muted, #5a6678); }
.practice-home-root .as-plan-remind {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    min-height: 44px;
    margin-top: 10px;
    padding: 8px 0 0;
    border: none;
    background: transparent;
    color: #5a6678;
    font: inherit;
    font-size: 14px;
    text-transform: none;
    cursor: pointer;
}
/* Step medal: gold disc with the step number; sits on the hub's sunburst. */
.practice-home-root .practice-home-modal .as-plan-medal {
    position: relative;
    width: 84px;
    height: 84px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #FFE9A8 0%, #F6B73C 55%, #D98A12 100%);
    border: 3px solid #B8700A;
    box-shadow: 0 6px 14px rgba(184, 112, 10, 0.35), inset 0 2px 4px rgba(255, 255, 255, 0.6);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #5C3A05;
    box-sizing: border-box;
}
.practice-home-root .as-plan-medal-big { font-size: 34px; font-weight: 800; line-height: 1; }
.practice-home-root .as-plan-medal--glyph .as-plan-medal-big { font-size: 38px; }
.practice-home-root .as-plan-medal-small { font-size: 10px; font-weight: 700; letter-spacing: 0.12em; margin-top: 2px; }
.practice-home-root .as-plan-medal-check {
    position: absolute;
    right: -2px;
    bottom: -2px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--as-plan-green, #10B981);
    border: 2px solid #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* --- Skeleton (page) -------------------------------------------------------- */
.as-plan-skeleton { max-width: 760px; margin: 0 auto; padding: 16px; }
.as-plan-skel-bar { height: 24px; width: 60%; margin: 8px auto 16px; border-radius: 6px; background: #EDF2F7; }
.as-plan-skel-block { height: 180px; margin: 0 0 18px; border-radius: 14px; background: #EDF2F7; }
.as-plan-preview { padding: 16px; border: 2px dashed #CBD5E0; border-radius: 12px; text-align: center; color: #5a6678; }

/* Rows stay STACKED at every width (Lyda 09-11: side-by-side cramps them and
   breaks the vertical rhythm the My plan list has). */

@media (prefers-reduced-motion: reduce) {
    .as-plan-panel .as-plan-row:hover { transform: none; }
}

/* --- Step expansion (§10.2): tap a step → its exercises, in place ---------- */
.as-plan-step { display: flex; flex-direction: column; }
.as-plan-panel .as-plan-item--step {
    width: 100%;
    font: inherit;
    text-align: left;
    text-transform: none;
    cursor: pointer;
}
.as-plan-panel .as-plan-item--step:focus-visible { outline: 3px solid var(--as-plan-blue); outline-offset: 2px; }
.as-plan-step.is-open .as-plan-item--step { border-color: var(--as-plan-blue); }
.as-plan-step-body { padding: 10px 0 4px 6px; }
.as-plan-ex-cap { margin: 0 0 8px; font-size: 13px; color: var(--as-plan-muted); }
.as-plan-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.as-plan-chip { font-size: 13px; padding: 6px 10px; border-radius: 16px; background: #EDF2F7; color: var(--as-plan-muted); }
.as-plan-go { width: 28px; font-size: 22px; line-height: 1; text-align: center; color: var(--as-plan-blue); flex-shrink: 0; }

/* --- Plan page: back link · milestone medals · scores under the quiz ------- */
.as-plan-page .as-plan-back {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 4px;
    font-size: 15px;
    font-weight: 600;
    color: var(--as-plan-blue);
    text-decoration: none;
}
.as-plan-page .as-plan-back:hover { color: #134B84; text-decoration: none; }
/* Small gold medal = a plan milestone earned (step number, or ✓ for a quiz). */
.as-plan-medal-sm {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #FFE9A8 0%, #F6B73C 55%, #D98A12 100%);
    border: 2px solid #B8700A;
    box-shadow: 0 2px 6px rgba(184, 112, 10, 0.35), inset 0 1px 2px rgba(255, 255, 255, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #5C3A05;
    box-sizing: border-box;
}
.as-plan-medal-sm-n { font-size: 14px; font-weight: 800; line-height: 1; }
.as-plan-medal-sm svg path { stroke: #5C3A05; }
/* Quiz expansion (Start Quiz / last-tested scores) = a CONTAINED card under the
   quiz row, not loose text on the page (Lyda 09-12). Tight caption line-height;
   the primary action is a real solid button, not an underlined link. */
.as-plan-panel .as-plan-quiz-body {
    margin: 8px 0 4px 34px;
    padding: 14px;
    background: #FFFFFF;
    border: 2px solid var(--as-plan-grey);
    border-radius: 12px;
}
.as-plan-quiz-body .as-plan-ex-cap { margin: 0 0 10px; line-height: 1.3; }
.as-plan-quiz-body .as-plan-scores { background: transparent; border: none; border-radius: 0; padding: 0; }
.as-plan-panel .as-plan-quiz-body button.as-plan-retake--go,
.as-plan-panel .as-plan-quiz-body a.as-plan-retake--go {
    display: inline-flex; align-items: center; justify-content: center;
    min-height: 44px; margin-top: 0; padding: 8px 18px;
    background: var(--as-plan-blue); color: #FFFFFF;
    border: none; border-radius: 10px;
    text-decoration: none; font-weight: 700;
}
.as-plan-panel .as-plan-quiz-body button.as-plan-retake--go:hover,
.as-plan-panel .as-plan-quiz-body a.as-plan-retake--go:hover,
.as-plan-panel .as-plan-quiz-body button.as-plan-retake--go:focus,
.as-plan-panel .as-plan-quiz-body a.as-plan-retake--go:focus { background: #134B84; color: #FFFFFF; text-decoration: none; }

/* Goal = the next quiz's pass mark: a tick on the bar + "Goal 75%" in the row. */
.as-plan-score-goal { color: var(--as-plan-muted); font-size: 13px; white-space: nowrap; }
.as-plan-score-goal.is-met { color: #3B6D11; font-weight: 700; }
.as-plan-score-goal .as-plan-tick { width: 16px; height: 16px; margin-left: 4px; }
.as-plan-sbar-goal {
    position: absolute;
    top: -2px;
    width: 3px;
    height: 14px;
    margin-left: -1px;
    border-radius: 2px;
    background: var(--as-plan-blue);
}
.as-plan-sbar { overflow: visible; }

/* --- Hover / focus / active: pin every button-shaped row so the Elementor kit
   cannot paint it dark with white text (the ghost-letters bug) -------------- */
.as-plan-panel .as-plan-item--step:hover,
.as-plan-panel .as-plan-item--step:focus,
.as-plan-panel .as-plan-item--step:active {
    background: #F8FBFF;
    color: var(--as-plan-text);
    border-color: var(--as-plan-blue);
    box-shadow: none;
    transform: none;
}
.as-plan-panel .as-plan-item.is-done:hover,
.as-plan-panel .as-plan-item.is-done:focus,
.as-plan-panel .as-plan-item.is-done:active {
    background: linear-gradient(180deg, #FFFFFF 0%, #EFF6E7 100%);
    border-color: var(--as-plan-green);
    color: var(--as-plan-text);
}
.as-plan-panel .as-plan-panel-h:hover,
.as-plan-panel .as-plan-panel-h:focus,
.as-plan-panel .as-plan-panel-h:active { background: var(--as-plan-frame); color: #FFFFFF; box-shadow: none; transform: none; }
.as-plan-panel .as-plan-pill:hover,
.as-plan-panel .as-plan-pill:focus,
.as-plan-panel .as-plan-pill:active { background: #F8FBFF; color: var(--as-plan-text); border-color: var(--as-plan-blue); box-shadow: none; transform: none; }
.as-plan-panel .as-plan-pill.is-on:hover,
.as-plan-panel .as-plan-pill.is-on:focus { background: #EDF4FB; color: var(--as-plan-blue); }
.as-plan-panel .as-plan-setting:hover,
.as-plan-panel .as-plan-setting:focus,
.as-plan-panel .as-plan-setting:active { background: transparent; color: var(--as-plan-text); box-shadow: none; transform: none; }
.as-plan-panel .as-plan-row:hover .as-plan-row-n,
.as-plan-panel .as-plan-row:active .as-plan-row-n { color: var(--as-plan-text); }
.as-plan-panel .as-plan-row:hover .as-plan-row-m,
.as-plan-panel .as-plan-row:active .as-plan-row-m { color: var(--as-plan-muted); }
/* The pressed state dims the whole row a touch, never the ink alone. */
.as-plan-panel .as-plan-row.is-navigating { opacity: 0.85; }

/* Step + score sub-rows: indent their contents under the step. */
.as-plan-step-body { padding-left: 34px; }
.as-plan-quiz-body { padding-left: 34px; }
.as-plan-scorewrap { display: flex; flex-direction: column; gap: 8px; margin-left: 22px; padding-left: 12px; border-left: 3px solid var(--as-plan-green); }
.as-plan-fold { width: 28px; text-align: center; font-size: 18px; color: var(--as-plan-blue); flex-shrink: 0; }

/* ==========================================================================
   Colour roles (Lyda 09-11): homework = blue · steps = the path (white on the
   blue rail, current = blue border) · quizzes = warm amber (a moment, not a
   grind; the streak/medal warmth) · done = the green wash everywhere.
   Marks sit on the LEFT of every row; no grey number circles on steps.
   ========================================================================== */
.as-plan-panel .as-plan-item--quiz {
    background: #FFF8E1;
    border-color: #EF9F27;
}
.as-plan-panel .as-plan-item--quiz.is-ready { background: #FFF3C4; border-color: #D97706; }
.as-plan-panel .as-plan-item--quiz.is-done {
    background: linear-gradient(180deg, #FFFFFF 0%, #EFF6E7 100%);
    border-color: var(--as-plan-green);
}
.as-plan-panel .as-plan-item--step.is-now { border-color: var(--as-plan-blue); background: #F8FBFF; }
.as-plan-panel .as-plan-item--score { background: #FFFFFF; }
.as-plan-item-num { display: none; }
.as-plan-mark.is-lock { border: none; background: transparent; font-size: 18px; line-height: 1; }
/* Left-slot marks: same width as the medal so labels line up. */
.as-plan-panel .as-plan-item > .as-plan-mark,
.as-plan-panel .as-plan-item > .as-plan-medal-sm,
.as-plan-panel .as-plan-row > .as-plan-mark,
.as-plan-panel .as-plan-row > .as-plan-medal-sm { margin-right: 2px; }

/* --- Mobile: room to breathe (line spacing + word crowding) ---------------- */
.as-plan-row-n,
.as-plan-item-n { line-height: 1.35; }
.as-plan-row-m,
.as-plan-item-m { line-height: 1.4; margin-top: 4px; }
@media (max-width: 480px) {
    .as-plan-panel-b { padding: 12px 10px 10px; }
    .as-plan-panel .as-plan-row { padding: 12px 12px; gap: 10px; min-height: 64px; }
    .as-plan-panel .as-plan-item { padding: 12px 12px; gap: 10px; min-height: 60px; }
    .as-plan-row-e { width: 32px; font-size: 26px; }
    .as-plan-item-qe { width: 26px; font-size: 20px; }
    .as-plan-steps { margin-left: 14px; padding-left: 10px; }
    .as-plan-scorewrap { margin-left: 14px; padding-left: 10px; }
    .as-plan-step-body,
    .as-plan-quiz-body { padding-left: 12px; }
    /* The quiz card indents less on a phone. */
    .as-plan-panel .as-plan-quiz-body { margin-left: 12px; padding: 12px; }
    /* Score rows: the numbers drop under the skill name instead of squeezing beside it. */
    .as-plan-score-n { flex-wrap: wrap; row-gap: 4px; }
    .as-plan-score-nums { margin-left: 0; flex-basis: 100%; padding-left: 30px; gap: 12px; }
    .as-plan-score { padding: 12px 0; }
    .as-plan-ex-cap { line-height: 1.4; margin-bottom: 10px; }
    .as-plan-week h3,
    .as-plan-panel .as-plan-panel-h h2 { font-size: 16px; }
    .as-plan-tbl td { padding: 12px 4px; }
    /* Exercise rows under a step: tighten the left columns and the side chrome
       so common labels ("Hear a Sentence", "Verb Connections") fit on ONE line
       instead of wrapping into the Premium pill / time column (Lyda 2026-09-12
       mobile pass). Longer labels still wrap gracefully; nothing overlaps. */
    .as-plan-panel .as-plan-row { gap: 8px; padding: 11px 10px; }
    .as-plan-row-e { width: 28px; font-size: 24px; }
    .as-plan-row-n { font-size: 15px; }
    .as-plan-row-m { font-size: 12px; }
    .as-plan-prem { font-size: 10px; padding: 3px 7px; }
    .as-plan-row-time { min-width: 46px; font-size: 14px; }
    .as-plan-row-time.is-muted { font-size: 12px; }
    .as-plan-go { width: 20px; font-size: 20px; }
}

/* Recommended rows: the hub's own cues — faint blue once touched, the green
   wash at the goal — plus a thin accuracy track under the label. */
.as-plan-panel .as-plan-row.is-touched { background: linear-gradient(180deg, #FFFFFF 0%, #EDF4FB 100%); }
.as-plan-panel .as-plan-row.is-strong { background: linear-gradient(180deg, #FFFFFF 0%, #EFF6E7 100%); border-color: var(--as-plan-green); }
.as-plan-row-track { display: block; width: 100%; height: 4px; margin-top: 6px; background: #E2E8F0; border-radius: 2px; overflow: hidden; }
.as-plan-row-fill { display: block; height: 100%; background: var(--as-plan-blue); border-radius: 2px; }
.as-plan-row-fill.is-strong { background: var(--as-plan-green); }

/* Passed quiz bar = the dropdown: last-tested percent per skill + retake. */
.as-plan-lt { display: flex; flex-direction: column; background: #FFFFFF; border: 2px solid var(--as-plan-grey); border-radius: 12px; padding: 4px 14px; }
.as-plan-lt-row { display: flex; align-items: center; gap: 10px; min-height: 44px; border-top: 1px solid #EDF2F7; font-size: 16px; font-weight: 600; }
.as-plan-lt-row:first-child { border-top: none; }
.as-plan-lt-e { font-size: 22px; line-height: 1; }
.as-plan-lt-v { margin-left: auto; font-size: 17px; font-weight: 700; color: var(--as-plan-blue); }
.as-plan-panel .as-plan-btn--ghost { margin-top: 10px; background: #FFFFFF; color: var(--as-plan-blue); border: 2px solid var(--as-plan-blue); box-shadow: none; }
.as-plan-panel .as-plan-btn--ghost:hover { background: #F8FBFF; color: var(--as-plan-blue); }

/* Retake = a quiet text link under the scores, not a button. */
.as-plan-page .as-plan-retake { display: inline-flex; align-items: center; min-height: 44px; margin-top: 4px; padding: 0 4px; font-size: 14px; font-weight: 600; color: var(--as-plan-blue); text-decoration: underline; text-underline-offset: 3px; }
.as-plan-page .as-plan-retake:hover { color: #134B84; }

/* Quiz almost (not yet passed): amber row stays, scores show which skill is low. */
.as-plan-panel .as-plan-item--quiz.is-almost { background: #FFF8E1; border-color: #EF9F27; }
.as-plan-lt-v.is-met { color: #3B6D11; }
.as-plan-lt-v.is-low { color: #854F0B; }
.as-plan-page button.as-plan-retake { background: transparent; border: none; box-shadow: none; cursor: pointer; font: inherit; font-size: 14px; font-weight: 600; text-transform: none; }

/* Blue tone = every plan-page section except homework (green = homework only). */
.as-plan-panel.as-plan-panel--blue { border-color: var(--as-plan-blue); box-shadow: 0 8px 20px rgba(24, 95, 165, 0.18); }
.as-plan-panel.as-plan-panel--blue .as-plan-panel-h,
.as-plan-panel.as-plan-panel--blue .as-plan-panel-h:hover,
.as-plan-panel.as-plan-panel--blue .as-plan-panel-h:focus,
.as-plan-panel.as-plan-panel--blue .as-plan-panel-h:active { background: var(--as-plan-blue); }
.as-plan-panel.as-plan-panel--blue .as-plan-panel-b { background: #F4F8FC; }

/* The "Not now · back to homework" text link also lives in the HUB panel (not only the plan page). */
.as-plan-panel button.as-plan-retake { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; margin-top: 4px; padding: 0 4px; background: transparent; border: none; box-shadow: none; cursor: pointer; font: inherit; font-size: 14px; font-weight: 600; color: var(--as-plan-blue); text-decoration: underline; text-underline-offset: 3px; text-transform: none; }
.as-plan-panel button.as-plan-retake:hover,
.as-plan-panel button.as-plan-retake:focus,
.as-plan-panel button.as-plan-retake:active { background: transparent; color: #134B84; box-shadow: none; transform: none; }

.as-plan-goal-cap { margin: 12px 0 2px; text-align: center; }

.as-plan-pills { flex-wrap: wrap; }
.as-plan-panel .as-plan-pill { flex: 1 1 calc(33.333% - 6px); min-width: 90px; }

/* Time / accuracy column: right-aligned so the values stack down the list. */
.as-plan-row-time { min-width: 58px; text-align: right; font-size: 15px; font-weight: 700; color: var(--as-plan-text); flex-shrink: 0; white-space: nowrap; }
.as-plan-row-time.is-muted { color: var(--as-plan-muted); font-weight: 600; font-size: 13px; }
.as-plan-total { display: flex; justify-content: flex-end; gap: 10px; padding: 8px 14px 0; font-size: 15px; }
.as-plan-total-l { color: var(--as-plan-muted); font-weight: 600; }
.as-plan-total-v { min-width: 58px; text-align: right; font-weight: 700; color: var(--as-plan-text); }
@media (max-width: 480px) { .as-plan-total { padding-right: 12px; } }

/* Modal buttons (entry modal + celebration beat): pin hover/focus/active so the
   Elementor kit cannot paint them dark with white ink (the ghost-letters bug). */
.practice-home-root .as-plan-entry .practice-home-modal-btn--action:hover,
.practice-home-root .as-plan-entry .practice-home-modal-btn--action:focus,
.practice-home-root .as-plan-entry .practice-home-modal-btn--action:active,
.practice-home-root .as-plan-beat .practice-home-modal-btn--action:hover,
.practice-home-root .as-plan-beat .practice-home-modal-btn--action:focus,
.practice-home-root .as-plan-beat .practice-home-modal-btn--action:active { background: linear-gradient(135deg, #43E0A5 0%, #0AA876 100%); color: #FFFFFF; transform: none; }
.practice-home-root .as-plan-entry .practice-home-modal-btn--secondary:hover,
.practice-home-root .as-plan-entry .practice-home-modal-btn--secondary:focus,
.practice-home-root .as-plan-entry .practice-home-modal-btn--secondary:active,
.practice-home-root .as-plan-beat .practice-home-modal-btn--secondary:hover,
.practice-home-root .as-plan-beat .practice-home-modal-btn--secondary:focus,
.practice-home-root .as-plan-beat .practice-home-modal-btn--secondary:active { background: #F8FAFC; color: #334155; border-color: #CBD5E1; box-shadow: none; transform: none; }
.practice-home-root .as-plan-remind:hover,
.practice-home-root .as-plan-remind:focus,
.practice-home-root .as-plan-remind:active { background: transparent; color: #5a6678; box-shadow: none; transform: none; }
.practice-home-root .as-plan-entry .practice-home-modal-close:hover,
.practice-home-root .as-plan-beat .practice-home-modal-close:hover { background: transparent; color: #64748B; box-shadow: none; transform: none; }

/* --- Recommended-row progress indicator ---------------------------------- */
/* "now% / goal%" toward the mastery mark (replaces the janky "Not started →";
   Lyda 09-12). Right-aligned, nowrap; muted before any practice, green at goal. */
.as-plan-row-goal {
    min-width: 74px;
    text-align: right;
    font-size: 13px;
    font-weight: 700;
    color: var(--as-plan-text);
    flex-shrink: 0;
    white-space: nowrap;
}
.as-plan-row-goal.is-muted { color: var(--as-plan-muted); font-weight: 600; }
.as-plan-row-goal.is-strong { color: var(--as-plan-green-ink); }
@media (max-width: 480px) {
    .as-plan-row-goal { min-width: 64px; font-size: 12px; }
}

/* --- Premium prompt modal (self-contained; no hub CSS needed) ------------- */
.as-plan-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(15, 23, 42, 0.55);
}
.as-plan-modal {
    position: relative;
    width: 100%;
    max-width: 360px;
    box-sizing: border-box;
    padding: 30px 22px 22px;
    background: #FFFFFF;
    border-radius: 16px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
    text-align: center;
}
/* NB: selectors are scoped under .as-plan-page with an element qualifier so they
   beat the Elementor kit's global button/link styling (which otherwise paints
   these raw <button>s purple and recolours the <a>). Every kit-inflated property
   is reset explicitly. */
.as-plan-page button.as-plan-modal-close {
    position: absolute;
    top: 8px;
    right: 10px;
    width: 40px;
    height: 40px;
    min-height: 0;
    padding: 0;
    margin: 0;
    border: none;
    border-radius: 50%;
    background: transparent;
    box-shadow: none;
    font-size: 26px;
    font-weight: 400;
    line-height: 1;
    color: var(--as-plan-muted);
    text-transform: none;
    cursor: pointer;
}
.as-plan-page button.as-plan-modal-close:hover,
.as-plan-page button.as-plan-modal-close:focus,
.as-plan-page button.as-plan-modal-close:active { background: #F1F5F9; color: var(--as-plan-text); box-shadow: none; transform: none; }
.as-plan-modal-ic { font-size: 40px; line-height: 1; margin-bottom: 8px; }
.as-plan-modal-title { margin: 0 0 8px; font-size: 20px; font-weight: 800; color: var(--as-plan-text); line-height: 1.25; }
.as-plan-modal-body { margin: 0 0 18px; font-size: 15px; line-height: 1.4; color: var(--as-plan-muted); }
.as-plan-modal-actions { display: flex; flex-direction: column; gap: 10px; }
.as-plan-page a.as-plan-modal-btn,
.as-plan-page button.as-plan-modal-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 48px;
    padding: 10px 18px;
    margin: 0;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.2;
    text-transform: none;
    text-decoration: none;
    box-shadow: none;
    cursor: pointer;
    box-sizing: border-box;
}
/* Gold = Premium; dark ink on gold (fleet token rule). */
.as-plan-page a.as-plan-modal-btn--join { background: var(--as-plan-gold); color: #3A2A05; border: none; }
.as-plan-page a.as-plan-modal-btn--join:hover,
.as-plan-page a.as-plan-modal-btn--join:focus,
.as-plan-page a.as-plan-modal-btn--join:active { background: #F0B838; color: #3A2A05; text-decoration: none; }
.as-plan-page button.as-plan-modal-btn--close { background: transparent; border: 2px solid var(--as-plan-grey); color: var(--as-plan-text); }
.as-plan-page button.as-plan-modal-btn--close:hover,
.as-plan-page button.as-plan-modal-btn--close:focus,
.as-plan-page button.as-plan-modal-btn--close:active { background: #F4F8FC; color: var(--as-plan-text); box-shadow: none; transform: none; }
@media (prefers-reduced-motion: no-preference) {
    .as-plan-modal { animation: as-plan-modal-in 0.16s ease-out; }
    @keyframes as-plan-modal-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
}