:root {
    --brand: #0ea5e9;
    --primary: #0369a1;
    --primary-dark: #075985;
    --ink: #15283e;
    --muted: #61748a;
    --line: #dce5ee;
    --measure: 68ch;
}
* {
    box-sizing: border-box;
}
body {
    margin: 0;
    background: #f3f7fb;
    color: var(--ink);
    font:
        15px/1.6 system-ui,
        -apple-system,
        Segoe UI,
        sans-serif;
}
button,
input {
    font: inherit;
}
button,
a,
input {
    touch-action: manipulation;
}
button {
    cursor: pointer;
    border: 1px solid var(--line);
    border-radius: 9px;
    background: white;
    color: var(--ink);
    padding: 9px 14px;
    font-weight: 600;
}
button:hover {
    border-color: var(--brand);
    background: #eff9ff;
}
button:disabled {
    opacity: 0.5;
    cursor: wait;
}
button:focus-visible,
a:focus-visible,
input:focus-visible {
    outline: 3px solid #38bdf8;
    outline-offset: 3px;
}
[hidden] {
    display: none !important;
}
header {
    display: flex;
    align-items: center;
    gap: 30px;
    padding: 20px 5%;
    background: #102338;
    color: white;
}
.brand {
    color: white;
    text-decoration: none;
    font-weight: 800;
    letter-spacing: 2px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.mark {
    background: var(--brand);
    padding: 4px 9px;
    border-radius: 8px;
    letter-spacing: -1px;
}
.brand small {
    font-size: 10px;
    color: #7dd3fc;
    letter-spacing: 2px;
}
.chapter {
    border-left: 1px solid #415269;
    padding-left: 28px;
    font-size: 10px;
    letter-spacing: 1px;
    color: #9eb4c9;
}
.chapter b {
    display: block;
    font-size: 13px;
    color: #fff;
    letter-spacing: 0;
}
.free {
    margin-left: auto;
    color: #a5e4ff;
    font-size: 13px;
    border: 1px solid #3c5c77;
    padding: 4px 12px;
    border-radius: 30px;
}
main {
    max-width: 1400px;
    margin: auto;
    padding: 36px 5% 10px;
}
.intro {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 40px;
    margin-bottom: 35px;
}
.eyebrow {
    font-size: 10px;
    letter-spacing: 2px;
    font-weight: 800;
    color: #087bad;
}
h1 {
    font-size: clamp(32px, 3.8vw, 49px);
    line-height: 1.12;
    letter-spacing: -2px;
    margin: 12px 0;
}
h1 span {
    color: var(--brand);
}
.intro p {
    color: var(--muted);
}
.goal {
    width: 340px;
    background: linear-gradient(130deg, #e1f4ff, #fff);
    border: 1px solid #cce7f7;
    border-radius: 16px;
    padding: 23px;
}
.goal > span {
    font-size: 10px;
    letter-spacing: 1.5px;
    color: #087bad;
    font-weight: 800;
}
.goal strong {
    display: block;
    font-size: 20px;
    margin-top: 8px;
}
.goal p {
    font-size: 13px;
    margin: 6px 0 14px;
}
.goal small {
    color: var(--muted);
    font-size: 11px;
}
.progress {
    height: 5px;
    border-radius: 8px;
    background: #d3e5f1;
    margin-bottom: 9px;
}
.progress i {
    height: 100%;
    display: block;
    width: 0;
    background: var(--brand);
    border-radius: 8px;
    transition: width 0.4s;
}
.workspace {
    display: grid;
    grid-template-columns: minmax(300px, 0.83fr) minmax(440px, 1.5fr);
    gap: 24px;
    align-items: start;
}
.card {
    background: white;
    border: 1px solid var(--line);
    border-radius: 17px;
    box-shadow: 0 8px 30px #213c5b06;
    overflow: hidden;
}
.panel-head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 19px 23px;
    border-bottom: 1px solid var(--line);
}
.avatar {
    display: grid;
    place-items: center;
    background: #e6f6ff;
    color: #0284c7;
    border-radius: 12px;
    width: 40px;
    height: 40px;
    font-size: 23px;
}
h2 {
    margin: 0;
    font-size: 15px;
}
.panel-head small {
    font-size: 11px;
    color: var(--muted);
}
.dot {
    width: 7px;
    height: 7px;
    background: #22b298;
    border-radius: 50%;
    margin-left: auto;
}
.tutor-body {
    padding: 23px;
}
.pill {
    font-size: 10px;
    letter-spacing: 1.5px;
    color: #065f8f;
    font-weight: 800;
}
.tutor h3 {
    font-size: 22px;
    line-height: 1.3;
    margin: 10px 0 16px;
}
.bubble {
    background: #f0f7fc;
    border: 1px solid #e2edf6;
    border-radius: 0 14px 14px;
    padding: 18px;
    font-size: 15px;
    line-height: 1.6;
    min-height: 115px;
}
.practice {
    margin: 20px 0;
    font-size: 13px;
    color: var(--muted);
    border-left: 2px solid #7dd3fc;
    padding-left: 14px;
}
.practice strong {
    color: var(--ink);
}
.practice p {
    margin: 4px 0;
}
.primary {
    width: 100%;
    background: var(--primary);
    border-color: var(--primary);
    color: white;
    padding: 12px 16px;
    min-height: 44px;
    text-align: left;
}
.primary:hover {
    background: var(--primary-dark);
    border-color: var(--primary-dark);
    color: white;
}
.primary span {
    float: right;
}
.secondary-actions {
    display: flex;
    gap: 8px;
    margin-top: 9px;
}
.secondary-actions button {
    font-size: 12px;
    flex: 1;
    min-height: 40px;
}
.ai-status {
    font-size: 11px;
    color: var(--muted);
    margin: 16px 0;
}
label {
    font-size: 12px;
    font-weight: 600;
}
.ask {
    display: flex;
    gap: 6px;
    margin-top: 7px;
}
.ask input {
    min-width: 0;
    width: 100%;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 9px;
    font-size: 12px;
}
#answer {
    font-size: 13px;
    color: var(--muted);
}
.sheet-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    font-size: 12px;
}
.file-icon {
    background: #e1f3ee;
    color: #168661;
    padding: 4px 7px;
    border-radius: 5px;
    margin-right: 9px;
    font-size: 17px;
}
#saved {
    font-size: 11px;
    color: #1f6f4a;
}
.formula-bar {
    display: flex;
    align-items: center;
    border-block: 1px solid var(--line);
    background: #fafcfe;
    min-height: 43px;
    font-size: 12px;
}
.formula-bar span {
    width: 65px;
    text-align: center;
    border-right: 1px solid var(--line);
}
.formula-bar b {
    font-style: italic;
    color: #8393a3;
    margin: 0 15px;
}
.formula-bar output {
    overflow: auto;
    white-space: nowrap;
    max-width: 80%;
    color: var(--muted);
}
.grid-wrap {
    overflow: auto;
    min-height: 310px;
}
table {
    border-collapse: collapse;
    width: 100%;
    table-layout: fixed;
    font-size: 13px;
}
th,
td {
    border-right: 1px solid #e3eaf1;
    border-bottom: 1px solid #e3eaf1;
    height: 43px;
    text-align: left;
    padding: 0 13px;
    position: relative;
}
thead th {
    height: 30px;
    text-align: center;
    background: #f3f6fa;
    color: #54657a;
    font-size: 11px;
    font-weight: 600;
}
th:first-child {
    width: 38px;
    text-align: center;
    padding: 0;
    font-size: 10px;
    font-weight: 500;
    background: #f7f9fc;
    color: #54657a;
}
td {
    cursor: pointer;
    transition: background 0.3s;
}
td.highlight {
    background: #e0f4ff;
    box-shadow: inset 0 0 0 1px #38bdf8;
}
td.heading {
    font-weight: 700;
    background: #edf4fa;
}
td.total {
    font-weight: 700;
}
td.selected {
    outline: 2px solid #0284c7;
    outline-offset: -2px;
}
td input {
    position: absolute;
    inset: 0;
    width: 100%;
    border: 2px solid #0284c7;
    padding: 8px;
    font-size: 13px;
    background: #f0faff;
    color: #123;
}
.sheet-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    background: #f7fafd;
    border-block: 1px solid var(--line);
}
.sheet-tab {
    border-bottom: 3px solid var(--brand);
    padding: 8px 22px;
    font-size: 12px;
    font-weight: 700;
}
.sheet-footer small {
    font-size: 10px;
    color: var(--muted);
}
.sheet-hint {
    display: flex;
    gap: 15px;
    padding: 20px;
    background: #f8fcff;
}
.sheet-hint > span {
    color: var(--brand);
    font-size: 25px;
}
.sheet-hint p {
    font-size: 13px;
    color: var(--muted);
    margin: 0;
}
.tools {
    display: flex;
    gap: 10px;
    padding: 15px 20px;
}
.tools button {
    font-size: 12px;
    min-height: 40px;
}
.tools button:last-child {
    margin-left: auto;
}
.error {
    color: #b42318;
    padding: 0 20px;
    font-size: 13px;
}
#replay-box {
    background: #fffbeb;
    padding: 14px;
    border-radius: 8px;
    margin-top: 12px;
    font-size: 13px;
}
#replay-box small {
    font-size: 10px;
    letter-spacing: 1px;
    font-weight: 700;
    color: #8a4b00;
}
footer {
    display: flex;
    gap: 40px;
    justify-content: space-between;
    margin: 35px 0 10px;
    color: #5b6b7d;
    font-size: 12px;
    line-height: 1.5;
}
footer span {
    letter-spacing: 1px;
    min-width: 220px;
}
footer b {
    display: block;
    letter-spacing: 0;
    font-weight: 400;
}
footer p {
    max-width: 500px;
    margin: 0;
}
.mobile-tabs {
    display: none;
}
@media (max-width: 850px) {
    main {
        padding: 22px 4%;
    }
    .workspace {
        grid-template-columns: 1fr;
    }
    .intro {
        gap: 20px;
    }
    .goal {
        width: 290px;
    }
    .chapter {
        display: none;
    }
    .mobile-tabs {
        display: flex;
        gap: 10px;
        margin: 15px 0;
    }
    .mobile-tabs button {
        flex: 1;
    }
    .mobile-tabs [aria-pressed="true"] {
        background: #102338;
        color: white;
    }
    .workspace .card {
        display: none;
    }
    .workspace .card.active {
        display: block;
    }
    .intro h1 {
        font-size: 36px;
    }
    .sheet {
        min-width: 0;
    }
}
@media (max-width: 560px) {
    header {
        padding: 15px 4%;
    }
    .brand {
        font-size: 12px;
        gap: 7px;
    }
    .brand small {
        display: none;
    }
    .intro {
        display: block;
    }
    .intro h1 br {
        display: none;
    }
    .intro h1 {
        font-size: 37px;
    }
    .goal {
        width: 100%;
        padding: 16px;
        margin-top: 22px;
    }
    .goal strong {
        font-size: 17px;
    }
    .goal p {
        margin: 3px 0 12px;
    }
    .grid-wrap {
        min-height: 300px;
    }
    th,
    td {
        padding: 0 8px;
    }
    .sheet-head {
        padding: 16px 12px;
    }
    #saved {
        font-size: 9px;
    }
    footer {
        display: block;
    }
    footer p {
        margin-top: 12px;
    }
    .tutor-body {
        padding: 20px;
    }
}
.nav-link {
    color: #b9d7ea;
    margin-left: auto;
    font-size: 13px;
}
.landing {
    padding: 20px 0;
}
.landing h1 {
    font-size: clamp(35px, 4.5vw, 58px);
}
.cta {
    display: inline-block;
    background: var(--primary);
    color: white;
    text-decoration: none;
    padding: 13px 22px;
    border-radius: 9px;
    font-weight: 700;
    margin-top: 12px;
}
.cta:hover {
    background: var(--primary-dark);
}
.cta span {
    margin-left: 30px;
}
.no-card {
    display: block;
    color: var(--muted);
    font-size: 11px;
    margin-top: 10px;
}
.landing-note {
    max-width: 260px;
    color: var(--muted);
    border-left: 2px solid #8fd7fa;
    padding-left: 24px;
}
.landing-note > span {
    font-size: 45px;
    color: #9bdaf8;
    display: block;
    font-weight: 800;
}
.landing-note strong {
    color: var(--ink);
}
.landing-note p {
    font-size: 13px;
}
.preview-layout {
    display: grid;
    grid-template-columns: 0.65fr 1.5fr;
    border-top: 1px solid var(--line);
}
.mini-tutor {
    background: #f5faff;
    padding: 26px;
}
.mini-tutor p {
    font-size: 13px;
    color: var(--muted);
}
.mini-tutor .prompt {
    color: var(--ink);
    font-weight: 700;
    font-size: 16px;
}
.mini-tutor small {
    display: block;
    font-size: 10px;
    color: var(--muted);
    margin-top: 15px;
}
.sample {
    padding: 28px;
    min-height: 300px;
}
.sample pre {
    font-size: clamp(11px, 1.5vw, 16px);
    line-height: 2;
    margin-top: 30px;
    white-space: pre-wrap;
    color: #6a7785;
}
.loose {
    font-size: 12px;
    color: #8a99a9;
}
.sample table {
    margin-top: 14px;
}
.sample td {
    background: #e9f7ff;
    animation: glow 1.3s ease-out;
}
.chart {
    margin-top: 20px;
    font-size: 11px;
}
.chart > div {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 10px 0;
}
.chart span {
    width: 70px;
    flex-shrink: 0;
}
.chart i {
    display: block;
    background: linear-gradient(90deg, #0284c7, #38bdf8);
    color: white;
    padding: 4px 10px;
    font-style: normal;
    border-radius: 4px;
    animation: grow 0.6s ease-out;
}
.benefits {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
    margin: 30px 0;
}
.benefits p {
    font-size: 13px;
    color: var(--muted);
}
.plans {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}
.plan {
    padding: 27px;
}
.plan h2 {
    margin-top: 18px;
    font-size: 21px;
}
.plan h3 {
    color: #0284c7;
    font-size: 17px;
}
.plan p {
    font-size: 14px;
    color: var(--muted);
}
.unavailable {
    display: block;
    background: #edf2f7;
    color: #6c7e8e;
    padding: 12px;
    border-radius: 8px;
    font-size: 12px;
}
.terms {
    padding: 25px;
    margin: 25px 0;
}
.terms p {
    font-size: 14px;
    color: var(--muted);
}
@keyframes glow {
    from {
        background: #9adeff;
    }
    to {
        background: #e9f7ff;
    }
}
@keyframes grow {
    from {
        transform: scaleX(0.2);
        transform-origin: left;
    }
    to {
        transform: scaleX(1);
        transform-origin: left;
    }
}
@media (prefers-reduced-motion: reduce) {
    * {
        animation: none !important;
        transition: none !important;
    }
}
@media (max-width: 850px) {
    .plans {
        grid-template-columns: 1fr;
    }
    .landing-note {
        display: none;
    }
    .preview-layout {
        grid-template-columns: 1fr;
    }
    .mini-tutor {
        padding: 20px;
    }
    .sample {
        padding: 20px;
    }
    .benefits {
        gap: 15px;
    }
}
@media (max-width: 560px) {
    .benefits {
        grid-template-columns: 1fr;
        gap: 5px;
    }
    .preview .sheet-head {
        gap: 10px;
        font-size: 11px;
    }
}
.calculated {
    display: block;
    margin: 0 20px;
    color: #087b64;
    font-size: 14px;
    font-weight: 700;
}
.calculated:empty {
    display: none;
}
.free {
    text-decoration: none;
}
#check:enabled {
    cursor: pointer;
}
.formula-bar output {
    flex: 1;
    min-width: 0;
}
.formula-bar button {
    font-size: 11px;
    white-space: nowrap;
    margin: 4px 8px;
    padding: 4px 8px;
}
td input[aria-invalid="true"] {
    border-color: #b42318;
    background: #fff5f4;
}
.lesson-nav {
    display: flex;
    gap: 10px;
    margin: 0 0 22px;
    flex-wrap: wrap;
}
.lesson-nav button {
    font-size: 12px;
    flex: 1;
}
.lesson-nav [aria-current="step"] {
    background: #102338;
    color: white;
    border-color: #102338;
}
.continue {
    margin-top: 10px;
    background: #087e69;
    border-color: #087e69;
}
.editable {
    box-shadow: inset 0 -2px 0 #7dd3fc;
}
.chart-panel {
    padding: 22px;
    border-top: 1px solid var(--line);
}
.chart-panel h3 {
    margin: 10px 0;
    font-size: 18px;
}
.chart-panel svg {
    display: block;
    width: 100%;
    height: auto;
}
.chart-panel rect[role="button"] {
    cursor: pointer;
    transition: fill 0.2s;
}
.chart-panel rect[role="button"]:hover,
.chart-panel rect[role="button"]:focus {
    fill: #0369a1;
    outline: 2px solid #38bdf8;
}
.chart-panel p,
.chart-panel small {
    font-size: 12px;
    color: var(--muted);
}
#chart-form {
    display: grid;
    gap: 9px;
    margin-top: 15px;
}
#chart-form input,
#chart-form select {
    font: inherit;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 10px;
    width: 100%;
    background: white;
    color: var(--ink);
}
#chart-form button {
    margin-top: 6px;
}
#chart-save-state {
    display: block;
}
.sheet-head #sheet-name {
    font-size: 12px;
}
@media (max-width: 560px) {
    .lesson-nav {
        gap: 5px;
    }
    .lesson-nav button {
        padding: 8px 6px;
        font-size: 10px;
    }
    .grid-wrap td {
        font-size: 12px;
    }
    .sheet-head #sheet-name {
        font-size: 10px;
    }
    .chart-panel {
        padding: 15px;
    }
}
.lesson-nav button span {
    display: block;
}
.lesson-nav button small {
    display: block;
    font-size: 10px;
    font-weight: 500;
    margin-top: 4px;
    opacity: 0.85;
}
.chapter-status {
    font-size: 13px;
    color: var(--muted);
    margin: -10px 0 18px;
}
.unfinished-notice {
    display: flex;
    gap: 16px;
    align-items: center;
    background: #fffbeb;
    border: 1px solid #f1df9d;
    border-radius: 12px;
    padding: 14px 18px;
    margin-bottom: 22px;
}
.unfinished-notice p {
    font-size: 13px;
    margin: 0;
    flex: 1;
}
.unfinished-notice button {
    font-size: 11px;
    white-space: nowrap;
}
@media (max-width: 560px) {
    .unfinished-notice {
        display: block;
        padding: 13px;
    }
    .unfinished-notice button {
        margin-top: 10px;
    }
    .lesson-nav button small {
        font-size: 9px;
    }
}
#grid.chart-selectable td {
    user-select: none;
    -webkit-user-select: none;
    touch-action: none;
    cursor: cell;
}
#grid td.chart-range {
    background: #dff4ff;
    box-shadow: inset 0 0 0 1px #38bdf8;
}
.chart-range-tools {
    background: #eff9ff;
    border-bottom: 1px solid #cce7f7;
    padding: 16px 20px;
}
.chart-range-tools strong {
    font-size: 15px;
}
.chart-range-tools p {
    font-size: 12px;
    color: var(--muted);
    margin: 5px 0 12px;
}
.range-entry {
    display: flex;
    gap: 12px;
    align-items: end;
}
.range-entry > div {
    flex: 1;
}
.range-entry input {
    display: block;
    width: 100%;
    border: 1px solid #a9cada;
    border-radius: 7px;
    padding: 9px;
    font: inherit;
    background: white;
    color: var(--ink);
}
.range-entry button {
    width: auto;
    white-space: nowrap;
    font-size: 12px;
}
.chart-range-tools small {
    display: block;
    font-size: 11px;
    color: #087bad;
    margin-top: 8px;
}
#chart-form {
    padding: 16px;
    background: #f3faff;
    border: 1px solid #dcebf5;
    border-radius: 10px;
    margin: 0 0 22px;
}
#chart-form h3 {
    margin: 0;
}
#chart-form #chart-source-summary {
    margin: 0 0 5px;
}
@media (max-width: 560px) {
    .range-entry {
        display: block;
    }
    .range-entry button {
        width: 100%;
        margin-top: 10px;
    }
    .chart-range-tools {
        padding: 14px;
    }
}
.chapter-nav {
    display: flex;
    gap: 10px;
    margin-bottom: 14px;
}
.chapter-nav button {
    font-size: 12px;
}
.chapter-nav [aria-current="true"] {
    border-color: #0284c7;
    background: #e6f6ff;
}
.prompt-panel {
    border-top: 1px solid var(--line);
    padding-top: 14px;
    margin: 10px 0 20px;
}
.prompt-panel h3 {
    font-size: 16px;
    margin: 8px 0;
}
.prompt-panel p,
.prompt-panel li {
    font-size: 13px;
    line-height: 1.55;
}
.prompt-panel details {
    font-size: 13px;
    background: #f6f9fc;
    padding: 10px;
    border-radius: 8px;
    margin: 10px 0;
}
.prompt-panel summary {
    cursor: pointer;
    font-weight: 650;
}
.prompt-panel textarea {
    width: 100%;
    resize: vertical;
    min-height: 150px;
    font: 13px/1.5 system-ui;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 10px;
    margin: 8px 0;
}
.prompt-panel button {
    font-size: 12px;
}
.prompt-panel small {
    display: block;
    font-size: 11px;
    color: var(--muted);
    margin-top: 8px;
}
.prompt-panel pre {
    white-space: pre-wrap;
    font-size: 10px;
    overflow: auto;
    max-height: 220px;
}
.prompt-panel ul {
    padding-left: 17px;
}
#proposal-changes {
    max-height: 230px;
    overflow: auto;
}
#proposal-review {
    border: 1px solid #c8e4f5;
    border-radius: 10px;
    padding: 12px;
    background: #f6fbff;
    margin-top: 14px;
}
#proposal-review h4 {
    margin: 0;
}
.replace-label {
    display: flex;
    gap: 8px;
    align-items: start;
    margin: 10px 0;
    color: #885713;
    font-size: 11px;
}
.replace-label input {
    margin-top: 4px;
}
.finding {
    padding: 12px;
    background: #edf9f5;
    border-radius: 8px;
    font-weight: 650;
}
.finding:empty {
    display: none;
}
#preview-banner a {
    font-size: 11px;
    white-space: nowrap;
}
@media (max-width: 560px) {
    .chapter-nav {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }
    .chapter-nav button {
        font-size: 10px;
        padding: 8px;
    }
    .prompt-panel textarea {
        font-size: 14px;
    }
}
.shared-error {
    margin: 0 0 18px;
    padding: 12px 16px;
    background: #fff3f2;
    border: 1px solid #f2b5af;
    border-radius: 9px;
}
.shared-error:empty {
    display: none;
}
.workbook-details {
    font-size: 12px;
    color: var(--muted);
    padding: 10px 20px;
    border-top: 1px solid var(--line);
}
.workbook-details summary {
    cursor: pointer;
}
.workbook-details p {
    margin: 8px 0;
}
.prompt-error {
    margin: 12px 0 0;
}

/* ==========================================================================
   Beginner-UX refinement layer
   Presentation only. Every rule below keys off ids, [hidden] and :checked
   states that lesson.js / workbench.js already set, so nothing here needs
   script changes. Sections: shared → /learn → /course.
   ========================================================================== */

/* --- Shared: readable measure, header wrap -------------------------------- */
.bubble,
.practice,
.prompt-panel > p,
#business-brief,
#course-explanation,
#course-brief,
#course-transfer,
#course-example-text,
.course-section > p,
#course-ai-panel > p,
.bench-note,
.terms p,
.onboarding-card p,
.intro > div > p {
    max-width: var(--measure);
}
header {
    flex-wrap: wrap;
    row-gap: 10px;
}
header a {
    min-height: 32px;
    display: inline-flex;
    align-items: center;
}
.header-link {
    color: #cfe8f7;
    font-size: 13px;
}

/* --- Shared: button hierarchy ---------------------------------------------
   .primary is the single strong action. Buttons that are not the current
   step are demoted to "quiet" (white, blue outline). --- */
.primary.quiet {
    background: #fff;
    border-color: #9cc7e3;
    color: var(--primary-dark);
}
.primary.quiet:hover {
    background: #eff9ff;
    border-color: var(--primary);
}

/* --- Shared: workflow step strip (static markup; CSS marks the current one) */
.steps {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 4px;
    list-style: none;
    margin: 6px 0 14px;
    padding: 0;
    counter-reset: step;
    font-size: 12px;
    color: var(--muted);
}
.steps li {
    counter-increment: step;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px 4px 4px;
    border: 1px solid var(--line);
    border-radius: 30px;
    background: #fff;
    font-weight: 600;
    line-height: 1.2;
}
.steps li::before {
    content: counter(step);
    display: inline-grid;
    place-items: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #e9f0f6;
    color: #4a5b6c;
    font-size: 11px;
    font-weight: 800;
}

/* --- Shared: pending (proposed, not yet saved) vs saved treatments ---------- */
.pending-tag,
.saved-tag,
.example-tag {
    display: inline-block;
    font-size: 10px;
    letter-spacing: 1.2px;
    font-weight: 800;
    text-transform: uppercase;
    padding: 3px 9px;
    border-radius: 30px;
    line-height: 1.5;
}
.pending-tag {
    background: #fff4dc;
    color: #8a4b00;
    border: 1px solid #f1d7a0;
}
.saved-tag {
    background: #e3f5ea;
    color: #1f6f4a;
    border: 1px solid #bfe3cd;
}
.example-tag {
    background: #eef1f5;
    color: #4a5b6c;
    border: 1px solid #d9e1ea;
}
#proposal-review,
#ai-review {
    border: 2px dashed #e0b45c;
    border-radius: 12px;
    background: #fffaf0;
    padding: 14px;
    margin-top: 14px;
}
#proposal-review h4,
#ai-review h4 {
    margin: 8px 0 4px;
    font-size: 16px;
}
#proposal-review details,
#ai-review details {
    background: #fff;
    border: 1px solid #f1e3c4;
}
#proposal-review .replace-label,
#ai-review label {
    display: flex;
    gap: 8px;
    align-items: start;
    font-size: 13px;
    color: var(--ink);
    margin: 10px 0;
}
#replace-label,
#ai-replace-label {
    color: #8a4b00;
}
#proposal-review input[type="checkbox"],
#ai-review input[type="checkbox"] {
    width: 18px;
    height: 18px;
    margin-top: 1px;
    flex-shrink: 0;
    accent-color: var(--primary);
}
#saved {
    display: inline-block;
    background: #e3f5ea;
    border: 1px solid #bfe3cd;
    border-radius: 30px;
    padding: 3px 10px;
    font-weight: 700;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    font-size: 10px;
}

/* Tutor example reads as an example, not as instructions */
details.example {
    background: #f6f8fa;
    border-left: 3px solid #cbd5e1;
    border-radius: 0 8px 8px 0;
}
details.example summary {
    color: #4a5b6c;
}
details.example > p {
    font-style: italic;
    color: #3d4c5c;
    padding: 2px 0 2px 12px;
    border-left: 2px solid #d9e1ea;
}
details.example button {
    font-size: 12px;
    min-height: 40px;
}

/* --- Shared: errors and feedback --------------------------------------------- */
.shared-error,
#native-error:not(:empty) {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    color: #8f1d14;
    background: #fff3f2;
    border: 1px solid #f2b5af;
    border-left: 4px solid #b42318;
    border-radius: 9px;
    padding: 12px 16px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.5;
    scroll-margin-top: 90px;
}
.shared-error::before,
#native-error:not(:empty)::before {
    content: "!";
    flex-shrink: 0;
    display: inline-grid;
    place-items: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #b42318;
    color: #fff;
    font-weight: 800;
    font-size: 14px;
}
.prompt-error {
    margin: 12px 0 0;
}
.finding {
    border: 1px solid #bfe3cd;
    color: #1f4d38;
}

/* --- /learn: tutor panel ------------------------------------------------------ */
.lesson-actions {
    display: grid;
    gap: 8px;
    margin-top: 6px;
}
.lesson-actions .cta {
    text-align: center;
    margin: 0;
}
.lesson-actions:not(:has(> :not([hidden]))) {
    display: none;
}
.prompt-panel h3 {
    font-size: 17px;
}
.prompt-panel label {
    display: block;
    font-size: 13px;
}
.prompt-panel textarea {
    font-size: 14px;
    line-height: 1.55;
}
#generate-proposal,
#apply-proposal,
#check,
#next,
#continue,
#next-chapter {
    font-size: 14px;
}
.secondary-actions {
    margin-top: 14px;
}

/* State machine for the lesson guide, keyed off what lesson.js shows.
   review   : #proposal-review visible       -> Apply is the primary action
   applied  : #applied-prompt-status filled  -> Check is the primary action
   complete : continue / next-chapter / summary visible -> Continue
   otherwise: the form's Generate button is the primary action. */
#tutor:has(#prompt-panel:not([hidden]) #prompt-form:not([hidden])):has(#proposal-review[hidden]):has(#applied-prompt-status:empty) #check,
#tutor:has(#proposal-review:not([hidden])) #check,
#tutor:has(#proposal-review:not([hidden])) #generate-proposal,
#tutor:has(#proposal-review[hidden]):has(#applied-prompt-status:not(:empty)) #generate-proposal,
#tutor:has(#continue:not([hidden]), #next-chapter:not([hidden]), #save-offer:not([hidden]), #free-summary:not([hidden]), #chapter-preview:not([hidden])) #generate-proposal {
    background: #fff;
    border-color: #9cc7e3;
    color: var(--primary-dark);
}
#tutor:has(#proposal-review:not([hidden])) #check:hover,
#tutor:has(#proposal-review:not([hidden])) #generate-proposal:hover,
#tutor:has(#proposal-review[hidden]):has(#applied-prompt-status:not(:empty)) #generate-proposal:hover {
    background: #eff9ff;
}
#apply-proposal:disabled {
    opacity: 1;
    background: #e9f0f6;
    border-color: #d9e1ea;
    color: #4a5b6c;
    cursor: not-allowed;
}

/* Step strip on /learn: current step highlighted, earlier steps ticked. */
#prompt-panel:not(:has(#proposal-review:not([hidden]))):has(#applied-prompt-status:empty) .steps li:nth-child(1),
#prompt-panel:has(#proposal-review:not([hidden])):has(#prompt-reviewed:not(:checked)) .steps li:nth-child(2),
#prompt-panel:has(#proposal-review:not([hidden])):has(#prompt-reviewed:checked) .steps li:nth-child(3),
#prompt-panel:has(#proposal-review[hidden]):has(#applied-prompt-status:not(:empty)) .steps li:nth-child(4) {
    border-color: var(--primary);
    background: #eaf6fe;
    color: var(--primary-dark);
}
#prompt-panel:not(:has(#proposal-review:not([hidden]))):has(#applied-prompt-status:empty) .steps li:nth-child(1)::before,
#prompt-panel:has(#proposal-review:not([hidden])):has(#prompt-reviewed:not(:checked)) .steps li:nth-child(2)::before,
#prompt-panel:has(#proposal-review:not([hidden])):has(#prompt-reviewed:checked) .steps li:nth-child(3)::before,
#prompt-panel:has(#proposal-review[hidden]):has(#applied-prompt-status:not(:empty)) .steps li:nth-child(4)::before {
    background: var(--primary);
    color: #fff;
}
#prompt-panel:has(#proposal-review:not([hidden])) .steps li:nth-child(1),
#prompt-panel:has(#proposal-review:not([hidden])):has(#prompt-reviewed:checked) .steps li:nth-child(2),
#prompt-panel:has(#proposal-review[hidden]):has(#applied-prompt-status:not(:empty)) .steps li:nth-child(-n + 3) {
    color: #1f6f4a;
    border-color: #cfe8db;
}
#prompt-panel:has(#proposal-review:not([hidden])) .steps li:nth-child(1)::before,
#prompt-panel:has(#proposal-review:not([hidden])):has(#prompt-reviewed:checked) .steps li:nth-child(2)::before,
#prompt-panel:has(#proposal-review[hidden]):has(#applied-prompt-status:not(:empty)) .steps li:nth-child(-n + 3)::before {
    content: "\2713";
    background: #d8f0e4;
    color: #1f6f4a;
}

/* Lesson complete: calm, rewarding */
#tutor:has(#continue:not([hidden]), #next-chapter:not([hidden]), #save-offer:not([hidden]), #free-summary:not([hidden]), #chapter-preview:not([hidden])) .bubble {
    background: #eefaf3;
    border-color: #bfe3cd;
}
#tutor:has(#continue:not([hidden]), #next-chapter:not([hidden]), #save-offer:not([hidden]), #free-summary:not([hidden]), #chapter-preview:not([hidden])) #mode {
    color: #1f6f4a;
}
#tutor:has(#continue:not([hidden]), #next-chapter:not([hidden]), #save-offer:not([hidden]), #free-summary:not([hidden]), #chapter-preview:not([hidden])) #mode::before {
    content: "\2713\00a0";
}
#applied-prompt-status:not(:empty) {
    margin: 12px 0 0;
    padding: 10px 12px;
    background: #eefaf3;
    border: 1px solid #bfe3cd;
    border-radius: 8px;
    color: #1f4d38;
    font-weight: 600;
}
.save-offer h3 {
    font-size: 18px;
    margin: 0 0 8px;
}
.save-offer p {
    font-size: 14px;
}
.save-offer button {
    margin-top: 10px;
}
.continue {
    background: #0f7a62;
    border-color: #0f7a62;
}
.continue:hover {
    background: #0b5f4c;
    border-color: #0b5f4c;
}

/* /learn: the saved sheet and its chrome */
.sheet-head {
    padding: 16px 20px;
}
.sheet-head #sheet-name {
    font-size: 14px;
}
.formula-bar {
    font-size: 13px;
}
.formula-bar button {
    min-height: 34px;
}
.workbook-details summary,
.course-options summary,
.tutor details > summary {
    cursor: pointer;
    padding: 5px 0;
}
.tutor details > summary {
    font-weight: 650;
}
.course-options summary {
    font-weight: 600;
    color: var(--primary-dark);
}
.next-skill a,
.next-skill a:visited {
    color: var(--primary-dark);
}
.next-skill strong {
    font-size: 14px;
}
.next-skill p {
    font-size: 15px;
}

/* --- /learn and /course: mobile tab switchers + 390px safety ---------------- */
.mobile-tabs button,
.course-mobile-tabs button {
    min-height: 44px;
    flex: 1;
    font-size: 14px;
}
.course-mobile-tabs [aria-pressed="true"],
.mobile-tabs [aria-pressed="true"] {
    background: #102338;
    color: #fff;
    border-color: #102338;
}
@media (max-width: 850px) {
    .mobile-tabs {
        position: sticky;
        top: 0;
        z-index: 5;
        background: #f3f7fb;
        padding: 8px 0;
        margin: 8px 0 12px;
    }
}
@media (max-width: 560px) {
    header {
        gap: 10px 14px;
        padding: 12px 16px;
    }
    .nav-link {
        margin-left: 0;
        order: 3;
    }
    .free {
        margin-left: auto;
    }
    main {
        padding: 18px 16px 10px;
    }
    .lesson-nav button {
        font-size: 12px;
        min-height: 44px;
    }
    .lesson-nav button small {
        font-size: 10px;
    }
    .chapter-nav button {
        font-size: 12px;
        min-height: 44px;
    }
    .tools {
        flex-wrap: wrap;
    }
    .tools button {
        min-height: 44px;
    }
    .tools button:last-child {
        margin-left: 0;
    }
    .prompt-panel textarea,
    .ask input {
        font-size: 16px;
    }
    .ask button {
        min-width: 44px;
    }
    .secondary-actions {
        flex-wrap: wrap;
    }
    .secondary-actions button {
        min-height: 44px;
    }
    .formula-bar output {
        max-width: none;
    }
    .steps {
        font-size: 11px;
    }
    .steps li {
        padding-right: 8px;
    }
    .goal {
        margin-top: 16px;
    }
    .intro.lesson-intro h1 {
        font-size: 30px;
        letter-spacing: -1px;
    }
}

/* --- /course and /workbench ---------------------------------------------------- */
.course-nav {
    display: grid;
    gap: 8px;
    padding: 12px 14px;
    margin: 12px 0 18px;
    background: #f3f7fb;
    border: 1px solid var(--line);
    border-radius: 10px;
}
.course-nav label {
    margin: 0 0 2px;
    font-size: 12px;
    color: var(--muted);
}
.course-nav select {
    width: 100%;
    min-height: 40px;
    font-size: 14px;
    text-overflow: ellipsis;
}
.course-nav .bench-actions {
    margin: 4px 0 0;
    gap: 8px;
}
.course-nav .bench-actions button {
    font-size: 13px;
    min-height: 40px;
}
.course-nav #course-progress {
    margin: 4px 0 0;
    font-size: 12px;
    color: var(--muted);
}
.course-nav #course-history {
    font-size: 13px;
}
#course-title {
    font-size: 24px;
    line-height: 1.25;
    margin: 6px 0 8px;
}
#course-demo-container {
    background: #f6f8fa;
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 10px 14px;
    margin: 16px 0;
}
#course-demo-container > summary {
    color: #4a5b6c;
}
#course-demo-container > summary::after {
    content: " · optional";
    font-weight: 500;
    color: var(--muted);
}
#course-demo-panel.course-section {
    border-top: 0;
    margin-top: 6px;
    padding-top: 6px;
}
.course-section {
    margin-top: 20px;
}
.course-section h3 {
    font-size: 18px;
}
#course-ai-panel {
    border: 2px solid #bfe0f3;
    border-radius: 12px;
    background: #f6fbff;
    padding: 16px;
    margin-top: 20px;
}
#course-ai-panel > h3 {
    margin-top: 0;
    font-size: 19px;
}
#course-ai-panel > details:not(#ai-review) {
    font-size: 13px;
    color: var(--muted);
}
#course-ai-panel textarea {
    width: 100%;
    min-height: 140px;
    font-size: 14px;
    line-height: 1.55;
    padding: 10px;
    border: 1px solid #9cc7e3;
    border-radius: 8px;
}
#course-ai-panel #ai-generate,
#course-ai-panel #ai-apply {
    width: 100%;
    margin-top: 10px;
    min-height: 44px;
    font-size: 14px;
    text-align: left;
    background: var(--primary);
    border: 1px solid var(--primary);
    color: #fff;
}
#course-ai-panel #ai-generate:hover,
#course-ai-panel #ai-apply:hover {
    background: var(--primary-dark);
    border-color: var(--primary-dark);
}
#course-ai-panel:has(#ai-review:not([hidden])) #ai-generate {
    background: #fff;
    border-color: #9cc7e3;
    color: var(--primary-dark);
}
#course-ai-panel:has(#ai-review:not([hidden])) #ai-generate:hover {
    background: #eff9ff;
}
#course-ai-panel #ai-apply:disabled {
    opacity: 1;
    background: #e9f0f6;
    border-color: #d9e1ea;
    color: #4a5b6c;
    cursor: not-allowed;
}
#ai-review .bench-grid {
    max-height: 260px;
    border: 1px solid #f1e3c4;
}
#ai-plan-status {
    font-weight: 600;
}
#course-ai-panel .steps li:nth-child(1),
#course-ai-panel:has(#ai-review:not([hidden])):has(#ai-confirm:not(:checked)) .steps li:nth-child(2),
#course-ai-panel:has(#ai-review:not([hidden])):has(#ai-confirm:checked) .steps li:nth-child(3) {
    border-color: var(--primary);
    background: #eaf6fe;
    color: var(--primary-dark);
}
#course-ai-panel .steps li:nth-child(1)::before,
#course-ai-panel:has(#ai-review:not([hidden])):has(#ai-confirm:not(:checked)) .steps li:nth-child(2)::before,
#course-ai-panel:has(#ai-review:not([hidden])):has(#ai-confirm:checked) .steps li:nth-child(3)::before {
    background: var(--primary);
    color: #fff;
}
#course-ai-panel:has(#ai-review:not([hidden])) .steps li:nth-child(1),
#course-ai-panel:has(#ai-review:not([hidden])):has(#ai-confirm:checked) .steps li:nth-child(2) {
    color: #1f6f4a;
    border-color: #cfe8db;
    background: #fff;
}
#course-ai-panel:has(#ai-review:not([hidden])) .steps li:nth-child(1)::before,
#course-ai-panel:has(#ai-review:not([hidden])):has(#ai-confirm:checked) .steps li:nth-child(2)::before {
    content: "\2713";
    background: #d8f0e4;
    color: #1f6f4a;
}
#course-check-form > button,
#course-ask-form button {
    min-height: 44px;
}
#course-check-form > button {
    margin-top: 12px;
    border-color: var(--primary);
    color: var(--primary-dark);
    background: #fff;
}
#course-check-form > button:hover {
    background: #eff9ff;
}
#course-checks li {
    padding: 6px 10px;
    border-radius: 6px;
    background: #f3f7fb;
}
#course-checks:empty {
    display: none;
}
.workbook-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    margin: 0 0 8px;
}
.workbook-head h2 {
    font-size: 18px;
    margin: 0;
}
#native-status {
    margin: 4px 0;
    font-weight: 600;
}
#native-message:empty {
    display: none;
}
#native-message:not(:empty) {
    padding: 10px 12px;
    background: #eef4fa;
    border: 1px solid #c9dcec;
    border-left: 4px solid var(--primary);
    border-radius: 8px;
    font-weight: 600;
}
.compact-cell-editor {
    margin-top: 10px;
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: #f8fafc;
}
.compact-cell-editor h2 {
    font-size: 14px;
    color: #4a5b6c;
}
.compact-cell-editor h2 small {
    display: block;
    font-weight: 500;
    font-size: 12px;
    color: var(--muted);
    margin-top: 2px;
}
.compact-cell-editor label {
    font-size: 12px;
    margin: 8px 0 4px;
}
.compact-cell-editor input,
.compact-cell-editor select {
    min-height: 36px;
    font-size: 14px;
}
.compact-cell-editor button {
    min-height: 40px;
}
#native-errors:empty {
    display: none;
}
#native-errors li {
    color: #8f1d14;
}
.bench-actions button,
.bench-actions a {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
}
@media (max-width: 560px) {
    .course-box {
        padding: 14px;
    }
    #course-title {
        font-size: 21px;
    }
    #course-ai-panel {
        padding: 12px;
    }
    .cell-edit-fields {
        grid-template-columns: 1fr;
    }
    .bench-actions {
        gap: 8px;
    }
    .course-nav .bench-actions button {
        flex: 1 1 100%;
    }
}

/* Lesson complete: every workflow step is done; tools row wraps cleanly */
#tutor:has(#continue:not([hidden]), #next-chapter:not([hidden]), #save-offer:not([hidden]), #free-summary:not([hidden]), #chapter-preview:not([hidden])):has(#prompt-panel) #prompt-panel .steps li {
    border-color: #cfe8db;
    background: #fff;
    color: #1f6f4a;
}
#tutor:has(#continue:not([hidden]), #next-chapter:not([hidden]), #save-offer:not([hidden]), #free-summary:not([hidden]), #chapter-preview:not([hidden])):has(#prompt-panel) #prompt-panel .steps li::before {
    content: "\2713";
    background: #d8f0e4;
    color: #1f6f4a;
}
.tools {
    flex-wrap: wrap;
    align-items: center;
}
.tools button {
    white-space: nowrap;
}
.tools details {
    flex-basis: 100%;
}
.tools details summary {
    cursor: pointer;
    padding: 4px 0;
}
#saved {
    white-space: nowrap;
}
.sheet-head {
    flex-wrap: wrap;
    gap: 8px 12px;
}
.course-section > details {
    margin: 8px 0;
}
.course-section > details > summary {
    padding: 6px 0;
}

/* --- Script hooks added after the first pass --------------------------------
   lesson.js    : #applied-prompt-status.is-warning when the learner edited the
                  generated result (prompt_result_modified).
   workbench.js : #course-ai-panel[data-ai-recorded="true"] once a reviewed
                  AI workflow has been applied (state.ai_workflow_recorded). */

/* /learn: experimented-with result -> amber warning, Generate is primary again */
#applied-prompt-status.is-warning:not(:empty) {
    background: #fff4dc;
    border-color: #f1d7a0;
    border-left: 4px solid #c77700;
    color: #6b3a00;
}
#tutor:has(#proposal-review[hidden]):has(#applied-prompt-status.is-warning) #generate-proposal {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
}
#tutor:has(#proposal-review[hidden]):has(#applied-prompt-status.is-warning) #generate-proposal:hover {
    background: var(--primary-dark);
    border-color: var(--primary-dark);
}
#tutor:has(#proposal-review[hidden]):has(#applied-prompt-status.is-warning) #check {
    background: #fff;
    border-color: #9cc7e3;
    color: var(--primary-dark);
}
#prompt-panel:has(#proposal-review[hidden]):has(#applied-prompt-status.is-warning) .steps li:nth-child(-n + 4) {
    border-color: var(--line);
    background: #fff;
    color: var(--muted);
}
#prompt-panel:has(#proposal-review[hidden]):has(#applied-prompt-status.is-warning) .steps li:nth-child(-n + 4)::before {
    content: counter(step);
    background: #e9f0f6;
    color: #4a5b6c;
}
#prompt-panel:has(#proposal-review[hidden]):has(#applied-prompt-status.is-warning) .steps li:nth-child(1) {
    border-color: var(--primary);
    background: #eaf6fe;
    color: var(--primary-dark);
}
#prompt-panel:has(#proposal-review[hidden]):has(#applied-prompt-status.is-warning) .steps li:nth-child(1)::before {
    background: var(--primary);
    color: #fff;
}

/* /course: workflow applied and nothing pending -> Check outcomes is primary */
#course-ai-panel[data-ai-recorded="true"]:has(#ai-review[hidden]) #ai-generate {
    background: #fff;
    border-color: #9cc7e3;
    color: var(--primary-dark);
}
#course-ai-panel[data-ai-recorded="true"]:has(#ai-review[hidden]) #ai-generate:hover {
    background: #eff9ff;
}
#course-panel:has(#course-ai-panel[data-ai-recorded="true"]):has(#ai-review[hidden]) #course-check-form > button {
    width: 100%;
    min-height: 44px;
    font-size: 14px;
    text-align: left;
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
}
#course-panel:has(#course-ai-panel[data-ai-recorded="true"]):has(#ai-review[hidden]) #course-check-form > button:hover {
    background: var(--primary-dark);
    border-color: var(--primary-dark);
}
#course-ai-panel[data-ai-recorded="true"]:has(#ai-review[hidden]) .steps li:nth-child(-n + 3) {
    color: #1f6f4a;
    border-color: #cfe8db;
    background: #fff;
}
#course-ai-panel[data-ai-recorded="true"]:has(#ai-review[hidden]) .steps li:nth-child(-n + 3)::before {
    content: "\2713";
    background: #d8f0e4;
    color: #1f6f4a;
}
#course-ai-panel[data-ai-recorded="true"]:has(#ai-review[hidden]) .steps li:nth-child(4) {
    border-color: var(--primary);
    background: #eaf6fe;
    color: var(--primary-dark);
}
#course-ai-panel[data-ai-recorded="true"]:has(#ai-review[hidden]) .steps li:nth-child(4)::before {
    content: counter(step);
    background: var(--primary);
    color: #fff;
}

/* --- Round 3: completed-lesson strips, empty/locked course panel ------------ */

/* /learn: a lesson is complete when the prompt form is visible (step >= 3) but
   lesson.js has hidden both #check and #next (it hides #check whenever
   state.complete is true). This holds even when Continue / next-chapter are
   hidden because the whole chapter is already complete. */
#tutor:has(#prompt-panel:not([hidden]) #prompt-form:not([hidden])):has(#check[hidden]):has(#next[hidden]):has(#proposal-review[hidden]) #prompt-panel .steps li {
    border-color: #cfe8db;
    background: #fff;
    color: #1f6f4a;
}
#tutor:has(#prompt-panel:not([hidden]) #prompt-form:not([hidden])):has(#check[hidden]):has(#next[hidden]):has(#proposal-review[hidden]) #prompt-panel .steps li::before {
    content: "\2713";
    background: #d8f0e4;
    color: #1f6f4a;
}
#tutor:has(#prompt-panel:not([hidden]) #prompt-form:not([hidden])):has(#check[hidden]):has(#next[hidden]):has(#proposal-review[hidden]) .bubble {
    background: #eefaf3;
    border-color: #bfe3cd;
}
#tutor:has(#prompt-panel:not([hidden]) #prompt-form:not([hidden])):has(#check[hidden]):has(#next[hidden]):has(#proposal-review[hidden]) #mode {
    color: #1f6f4a;
}
#tutor:has(#prompt-panel:not([hidden]) #prompt-form:not([hidden])):has(#check[hidden]):has(#next[hidden]):has(#proposal-review[hidden]) #mode::before {
    content: "\2713\00a0";
}
#tutor:has(#prompt-panel:not([hidden]) #prompt-form:not([hidden])):has(#check[hidden]):has(#next[hidden]):has(#proposal-review[hidden]) #generate-proposal {
    background: #fff;
    border-color: #9cc7e3;
    color: var(--primary-dark);
}

/* /course: passing assessment. Activates once workbench.js sets
   data-assessment="passed" on #course-panel (requested hook); per-item
   classes .is-passed / .is-attention on #course-checks li are optional. */
#course-panel[data-assessment="passed"] #course-ai-panel .steps li {
    border-color: #cfe8db;
    background: #fff;
    color: #1f6f4a;
}
#course-panel[data-assessment="passed"] #course-ai-panel .steps li::before {
    content: "\2713";
    background: #d8f0e4;
    color: #1f6f4a;
}
#course-panel[data-assessment="passed"] #course-check-form > button {
    width: auto;
    background: #fff;
    border-color: #9cc7e3;
    color: var(--primary-dark);
}
#course-panel[data-assessment="passed"] #course-checks {
    border: 1px solid #bfe3cd;
    background: #eefaf3;
    border-radius: 10px;
    padding: 10px 12px 10px 30px;
    margin: 14px 0;
}
#course-panel[data-assessment="needs-attention"] #course-checks {
    border: 1px solid #f1d7a0;
    background: #fff8e6;
    border-radius: 10px;
    padding: 10px 12px 10px 30px;
    margin: 14px 0;
}
#course-panel[data-assessment] #course-checks li {
    background: transparent;
    padding: 4px 0;
}
#course-checks li.is-passed {
    color: #1f6f4a;
}
#course-checks li.is-attention {
    color: #8a4b00;
    font-weight: 600;
}

/* /course: no lesson open -> collapse the empty lesson sections; keep the
   lesson selector, progress and title visible. */
#course-panel[data-lesson-open="false"] .course-section:has(#course-brief),
#course-panel[data-lesson-open="false"] .course-section:has(#course-check-form),
#course-panel[data-lesson-open="false"] #course-demo-container {
    display: none;
}
#course-explanation:empty {
    display: none;
}

/* /course: locked learner -> the explanation (message + sign-in link) reads as
   a calm notice card. Wording is set by workbench.js and is unchanged. */
#course-panel[data-locked="true"] #course-explanation {
    margin: 10px 0 4px;
    padding: 14px 16px;
    background: #eef4fa;
    border: 1px solid #c9dcec;
    border-left: 4px solid var(--primary);
    border-radius: 10px;
    color: var(--ink);
    font-size: 15px;
    line-height: 1.6;
}
#course-panel[data-locked="true"] #course-explanation a {
    display: inline-block;
    margin-top: 6px;
    font-weight: 700;
    color: var(--primary-dark);
}
#course-panel[data-locked="true"] #course-title {
    font-size: 21px;
}
#course-panel[data-locked="true"] #course-start:disabled {
    cursor: not-allowed;
}

/* Passed assessment wins over the "workflow recorded" primary rule for the
   Check-outcomes button (specificity 4,3,1 > 4,2,1). needs-attention keeps
   the recorded rule, so Check stays the primary action until it passes. */
#course-panel[data-assessment="passed"][data-lesson-open="true"]:has(#course-ai-panel[data-ai-recorded]):has(#ai-review) #course-check-form > button {
    width: auto;
    text-align: center;
    background: #fff;
    border-color: #9cc7e3;
    color: var(--primary-dark);
}
#course-panel[data-assessment="passed"][data-lesson-open="true"]:has(#course-ai-panel[data-ai-recorded]):has(#ai-review) #course-check-form > button:hover {
    background: #eff9ff;
    border-color: var(--primary);
}

.holiday-offer{border-top:4px solid #008bb5}.holiday-offer h2{font-size:clamp(1.5rem,3vw,2.25rem);line-height:1.2;margin:12px 0 18px}.holiday-offer button{max-width:100%;white-space:normal}.holiday-offer p{max-width:75ch}