/*
 * ATARprepAI study workspace
 * A shared visual layer for the student-facing tools in templates/index.html.
 * Behaviour and visibility remain owned by the existing tool scripts.
 */

.study-tool-page {
    /* Repointed at the homepage palette (static/marketing-base.css) so the
       study tools stop being a third look after the homepage and the subject
       pages. The token NAMES are unchanged: ~700 lines of per-tool CSS below
       resolve them, and all of it inherits the new palette for free. */
    --study-accent: #5b50e8;
    --study-accent-strong: #4338ca;
    --study-accent-soft: rgba(91, 80, 232, 0.07);
    --study-ink: #20242b;
    --study-muted: #626872;
    --study-line: #dedfdf;
    --study-line-2: rgba(14, 18, 32, 0.14);
    --study-surface: #ffffff;
    --study-surface-soft: #f5f5f2;
    --study-shadow: 0 2px 8px rgba(14, 18, 32, 0.04);
    --study-shadow-small: 0 1px 3px rgba(14, 18, 32, 0.03);
    --study-shadow-hover: 0 3px 10px rgba(14, 18, 32, 0.06);
    --study-kicker: "Study workspace";
    padding: 96px clamp(16px, 3vw, 34px) 72px;
    /* White-first, like / and /quiz/<slug>. #f4f6ff was the old tinted ground. */
    background-color: #ffffff;
}

#featuresPage { --study-kicker: "Discover"; }
#statsPage { --study-kicker: "Your progress"; }
#dailyReview { --study-kicker: "Spaced repetition"; }
#plannerHub { --study-kicker: "Study planning"; }
#marksHub { --study-kicker: "Marks & grades"; }
#examPlanner { --study-kicker: "Exam countdown"; }
#essayFeedback { --study-kicker: "Writing coach"; }
#flashcardsPage { --study-kicker: "Active recall"; }
#conceptMapPage { --study-kicker: "Connect ideas"; }
#libraryPage { --study-kicker: "Your library"; }
#leaderboardPage { --study-kicker: "Weekly league"; }
#atarCalcPage { --study-kicker: "ATAR planning"; }
#timerPage { --study-kicker: "Focus mode"; }
#matchPage { --study-kicker: "Speed recall"; }
#writePage { --study-kicker: "Written recall"; }
#learnPage { --study-kicker: "Adaptive practice"; }
#testPage { --study-kicker: "Exam practice"; }
#pathPage { --study-kicker: "Syllabus path"; }
#cheatsheetPage { --study-kicker: "High-yield notes"; }

/* 880px was a phone-shaped column on a laptop, and every tool ended with a
   screenful of dead space under it. The homepage measure is 1140px; the tools
   that genuinely want to stay narrow opt back down below. */
.study-tool-page > * {
    width: 100%;
    max-width: 1080px;
}

.study-tool-page > svg.bp {
    display: none;
}

#flashcardsPage > *,
#testPage > * {
    max-width: 760px;
    margin-left: auto;
    margin-right: auto;
}

#matchPage > * {
    max-width: 920px;
}

#timerPage > * {
    max-width: 680px;
}

#atarCalcPage > .atar-wrap,
#atarCalcPage > .tool-steps {
    max-width: 720px;
}

/* The slim violet "exam margin" rule is retired with the tinted ground: it was
   positioned off the viewport centre, so at the new column width it floated in
   open space beside the content rather than marking its edge. The eyebrow on
   each tool hero is the shared signature now. */

.study-tool-page > h2,
.study-tool-page > .dash-head h2,
.study-tool-page > .match-head h2,
.study-tool-page > .atar-wrap h2 {
    margin-top: 0;
    margin-bottom: 12px;
    color: var(--study-ink);
    font-family: var(--font-display, "Plus Jakarta Sans", sans-serif);
    font-size: clamp(1.625rem, 2.8vw, 2rem);
    font-weight: 700;
    letter-spacing: -0.025em;
    line-height: 1.2;
}

.study-tool-page > h2 {
    margin-right: auto;
    margin-left: auto;
}

.study-tool-page > h2::before,
.study-tool-page > .dash-head h2::before,
.study-tool-page > .match-head h2::before,
.study-tool-page > .atar-wrap h2::before {
    display: block;
    margin-bottom: 8px;
    content: var(--study-kicker);
    color: var(--study-muted);
    font-family: var(--font-body, "Plus Jakarta Sans", sans-serif);
    font-size: .875rem;
    font-weight: 600;
    letter-spacing: 0;
    line-height: 1;
}

.study-tool-page .tool-avi {
    width: 38px;
    height: 38px;
    margin-right: 8px;
    vertical-align: -9px;
}

.study-tool-page > p,
.study-tool-page > .atar-wrap > p {
    max-width: 720px;
    margin-top: 0;
    color: var(--study-muted);
    font-size: 0.98rem;
    line-height: 1.65;
}

.study-tool-page .dash-head,
.study-tool-page .match-head {
    align-items: flex-end;
    margin-bottom: 10px;
}

/* ══════════════════════════════════════════════════════════════════════
   TOOL HERO
   Every tool opens on the same card the quiz home does (#heroHeader):
   badge, oversized display heading, one-line blurb, on a soft gradient
   panel. Same geometry and gradients as that hero so the quiz and the
   tools read as one product rather than two.

   The heading and blurb live inside .tool-hero, so the `>`-scoped rules
   below no longer reach them — these rules own that typography now.
   ══════════════════════════════════════════════════════════════════════ */
/* Density: on a phone the form used to start 493px down — more than half a
   screen of heading and blurb before the thing the page is for. The copy is
   kept (it explains the tool to someone who has never used it); it is just
   sized as the supporting text it is rather than as a landing-page lede. */
.study-tool-page .tool-hero {
    margin-bottom: 18px;
    padding: 0;
    border: 0;
    background: none;
    box-shadow: none;
}

/* Block, not flex: the badge below is a ::before, and as a flex item it
   would sit on the title's row instead of stacking above it. */
.study-tool-page .tool-hero h2 {
    display: block;
    max-width: 720px;
    margin: 0 0 8px;
    color: var(--study-ink);
    font-family: var(--font-display, "Plus Jakarta Sans", sans-serif);
    font-size: clamp(1.625rem, 2.8vw, 2rem);
    font-weight: 700;
    letter-spacing: -0.025em;
    line-height: 1.2;
    text-wrap: balance;
}

/* A quiet section label keeps the tool name as the primary heading. */
.study-tool-page .tool-hero h2::before {
    display: flex;
    width: fit-content;
    align-items: center;
    margin-bottom: 9px;
    padding-left: 0;
    border: 0;
    border-radius: 0;
    background: none;
    content: var(--study-kicker);
    color: var(--study-muted);
    font-family: var(--font-body, "Plus Jakarta Sans", sans-serif);
    font-size: .875rem;
    font-weight: 600;
    letter-spacing: 0;
    line-height: 1;
}

.study-tool-page .tool-hero p {
    max-width: 620px;
    margin: 0;
    color: var(--study-muted);
    font-size: 0.93rem;
    font-weight: 400;
    line-height: 1.65;
    text-wrap: pretty;
}

/* A second blurb is always the fine print (only the ATAR estimator has one). */
.study-tool-page .tool-hero p + p {
    margin-top: 8px;
    font-size: 0.88rem;
}

/* Pages whose heading shares its row with a live counter (Learn, Test,
   Match, Write) or the date (Dashboard): keep the badge stacking with the
   heading, and drop the counter onto the baseline beside it. */
.study-tool-page .tool-hero :is(.match-head, .dash-head) {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 10px;
    gap: 14px;
}

.study-tool-page .tool-hero :is(.match-head, .dash-head) h2 {
    margin-bottom: 0;
}

/* .lb-you and .lb-champ are deliberately NOT in the shared-surface list
   below. Both are gradient cards that set their own `color`, and the reset
   only replaces `background` — so flattening them to the neutral surface left
   .lb-you's white text on a white card. Every signed-out visitor got an
   invisible "Join the leaderboard" call to action. */
/* Shared surfaces.

   .study-gen and .fc-setup-card are deliberately NOT in this list. They wrap
   a tool's setup FORM, and the quiz builder puts the same kind of form
   straight on the ground with a hairline between sections — boxing it here is
   what made every tool page read as a white panel sitting on the app rather
   than part of it. The surfaces below are content cards, which the quiz page
   has too, so they keep theirs. */
.study-tool-page :is(
    .section-card,
    .daily-card,
    .stats-page-card,
    .set-row,
    .exam-plan-card,
    .essay-feedback-result,
    .essay-summary,
    .timer-settings-panel,
    .tt-card,
    .write-card,
    .test-q,
    .cs-sheet,
    .cmap-wrap,
    .lb-empty
) {
    border: 1px solid var(--study-line);
    border-radius: 12px;
    background: var(--study-surface);
    box-shadow: none;
}

.study-tool-page .section-card {
    padding: clamp(18px, 3vw, 26px);
}

.study-tool-page .section-card-title,
.study-tool-page .study-gen-title,
.study-tool-page .dash-sec-title {
    margin-top: 0;
    color: var(--study-ink);
    font-family: var(--font-display, "Plus Jakarta Sans", sans-serif);
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.study-tool-page .study-gen-title {
    margin-bottom: 10px;
}

.study-tool-page .dash-sec-title {
    margin-bottom: 0;
}

.study-tool-page .section-card-title svg,
.study-tool-page .dash-sec-head svg {
    color: var(--study-accent);
}

/* The card is white now, so a white field would vanish into it — fields take
   the tinted surface and lift to white on focus. */
.study-tool-page :is(.input-text, .select-styled, .textarea-notes, .study-gen-topic, .csel-btn) {
    min-height: 48px;
    border: 1.5px solid var(--study-line-2);
    border-radius: 12px;
    background: var(--study-surface-soft);
    box-shadow: none;
    color: var(--study-ink);
    font-family: var(--font-body, "Plus Jakarta Sans", sans-serif);
    font-size: 0.95rem;
    transition: border-color 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

.study-tool-page :is(.input-text, .select-styled, .textarea-notes, .study-gen-topic, .csel-btn):hover {
    border-color: rgba(91, 80, 232, 0.32);
}

.study-tool-page :is(.input-text, .select-styled, .textarea-notes, .study-gen-topic, .csel-btn):focus {
    border-color: var(--study-accent);
    outline: 0;
    background: var(--study-surface);
    box-shadow: 0 0 0 4px rgba(91, 80, 232, 0.12);
}

.study-tool-page .field-label,
.study-tool-page .study-deck-bar label {
    margin-bottom: 7px;
    color: var(--study-muted);
    font-size: .875rem;
    font-weight: 600;
    letter-spacing: 0;
}

/* The homepage's calm, solid primary. The Duolingo 3D push
   (box-shadow: 0 5px 0) was the loudest thing on every tool page and survives
   nowhere else in the product. */
.study-tool-page :is(.btn-generate, .tool-cta, .btn-essay, .fc-btn-know) {
    min-height: 48px;
    border: 0;
    border-radius: 8px;
    background: #5b50e8;
    box-shadow: none;
    color: #fff;
    font-family: var(--font-body, "Plus Jakarta Sans", sans-serif);
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0;
    transition: transform 160ms ease, box-shadow 200ms ease, filter 160ms ease;
}

.study-tool-page :is(.btn-generate, .tool-cta, .btn-essay, .fc-btn-know):not(:disabled):hover {
    box-shadow: none;
    transform: none;
    background: #4b40d8;
}

.study-tool-page :is(.btn-generate, .tool-cta, .btn-essay, .fc-btn-know):not(:disabled):active {
    transform: translateY(0);
}

.study-tool-page :is(button, input, select, textarea, [tabindex]):focus-visible {
    outline: 3px solid #5b50e8;
    outline-offset: 3px;
}

.study-tool-page .test-opt:has(input:focus-visible) {
    outline: 3px solid #5b50e8;
    outline-offset: 3px;
}

/* ══════════════════════════════════════════════════════════════════════
   TAB STRIP
   Scoped to .study-tool-page on purpose: .tabs / .tab-btn / .tab-slider are
   shared with the quiz builder's own material picker (index.html #tabs), and
   the builder is deliberately left exactly as #144-#147 shipped it.
   ══════════════════════════════════════════════════════════════════════ */
.study-tool-page .tabs {
    padding: 4px;
    border: 1px solid var(--study-line);
    border-radius: 999px;
    background: var(--study-surface-soft);
}

.study-tool-page .tab-slider {
    top: 4px;
    left: 4px;
    height: calc(100% - 8px);
    border: 1px solid var(--study-line);
    border-radius: 999px;
    background: var(--study-surface);
    box-shadow: 0 1px 2px rgba(14, 18, 32, 0.05), 0 4px 12px rgba(14, 18, 32, 0.06);
}

.study-tool-page .tab-btn {
    min-height: 44px;
    padding: 10px 12px;
    border-radius: 999px;
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--study-muted);
    transition: color 160ms ease;
}

/* The active tab was only a shade darker than its neighbours — at a glance the
   strip read as four identical buttons. */
.study-tool-page .tab-btn.active {
    color: var(--study-accent);
    font-weight: 800;
}

.study-tool-page .tab-btn:not(.active):hover {
    color: var(--study-ink);
}

/* In dark the trough and the slider both resolve to near-black surfaces, so
   the selected tab reads as one of four identical buttons. Sink the trough and
   tint the slider instead. */
[data-dark] .study-tool-page .tabs {
    border-color: rgba(255, 255, 255, 0.08);
    background: rgba(0, 0, 0, 0.28);
}

[data-dark] .study-tool-page .tab-slider {
    border-color: rgba(255, 255, 255, 0.22);
    background: rgba(255, 255, 255, 0.08);
    box-shadow: none;
}

/* ══════════════════════════════════════════════════════════════════════
   HOW-IT-WORKS STRIP
   The form-only tools (ATAR estimator, cheat sheet, concept map, timer,
   learning path) are a single card on an otherwise empty screen — there is no
   saved-work list to fill the space the way Flashcards or My Library have. A
   compact three-step strip explains the tool instead of padding the page.
   ══════════════════════════════════════════════════════════════════════ */
.study-tool-page .tool-steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-top: 34px;
    border-top: 1px solid var(--study-line);
}

.study-tool-page .tool-step {
    padding: 18px 0;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
}

.study-tool-page .tool-step b {
    display: block;
    margin-bottom: 5px;
    color: var(--study-ink);
    font-family: var(--font-display, "Plus Jakarta Sans", sans-serif);
    font-size: 1rem;
    font-weight: 800;
}

.study-tool-page .tool-step span {
    color: var(--study-muted);
    font-size: 0.88rem;
    font-weight: 400;
    line-height: 1.5;
}

.study-tool-page .tool-step i {
    display: flex;
    width: 24px;
    height: 24px;
    align-items: center;
    justify-content: center;
    margin-bottom: 7px;
    border-radius: 0;
    background: none;
    color: var(--study-muted);
    font-family: var(--font-display, "Plus Jakarta Sans", sans-serif);
    font-size: 0.8rem;
    font-style: normal;
    font-weight: 800;
}

@media (max-width: 860px) {
    .study-tool-page .tool-steps { grid-template-columns: 1fr; gap: 0; }
    .study-tool-page .tool-step {
        display: grid;
        grid-template-columns: 24px minmax(0, 1fr);
        gap: 4px 12px;
    }
    .study-tool-page .tool-step + .tool-step { border-top: 1px solid var(--study-line); }
    .study-tool-page .tool-step i { grid-row: 1 / span 2; margin: 0; }
    .study-tool-page .tool-step b,
    .study-tool-page .tool-step span { grid-column: 2; margin: 0; }
}
/* ══════════════════════════════════════════════════════════════════════
   ALLOWANCE METER
   What the next click will cost, and what is left to pay it from.
   Sits directly above the pane's generate button.

   It is the SAME COMPONENT as the quiz builder's meter — the markup carries
   `usage-meter` and the builder's own child classes, so both cards share one
   paint, one set of warn/full tints and one dark-mode rule, and neither can
   drift from the other. What lives here is only what the pane adds: where the
   card sits, how wide it may be, and the one state the builder has no
   equivalent for.

   The price is a total plus a caption, never a rate inside a sentence — a rate
   has to be multiplied before it means anything, and the sentence that carried
   it split its own accent run across two lines at every card width but the
   260px maximum.
   ══════════════════════════════════════════════════════════════════════ */

/* The tool panes now show the BUILDER'S dock, not a card of their own: a ring
   you tap, sitting directly above the button it prices. The card it replaced
   was 110px of stacked lines quoting a raw credit balance — the unit being
   retired — where the builder had already moved to one number and a popover. */
.study-tool-page .allowance {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    width: 100%;
    margin: 18px 0 10px;
    /* The card's own surface is gone; the ring brings its own. */
    border: 0;
    padding: 0;
    background: none;
    box-shadow: none;
}

/* The play modes put Generate in a flex row with the topic input, so the dock
   is inserted above the ROW; it must not inherit the row's own top spacing. */
.study-tool-page .study-gen .allowance { margin-top: 10px; }

.study-tool-page .allowance[hidden] { display: none; }

/* The painter still writes these — they carry states the ring cannot show —
   but the dock reads them through the ring's own line, so they stay out of
   the layout rather than being deleted from the markup. */
.study-tool-page .allowance :is(.allowance-label, .usage-meter-count, .usage-bar,
    .usage-msg, .usage-burst, .usage-cost) { display: none; }

/* An outage: the ring shows a dash, so the dash needs to look deliberate. */
.study-tool-page .allowance.is-stale .usage-ring-btn {
    border-style: dashed;
}

/* The upgrade offer is a .usage-upgrade now — the same class the builder's
   meter uses, so one rule paints it in both. This scoped pair styled an
   .allowance-upgrade that no code ever rendered; it is kept only as the
   pane's own accent override, which the shared rule has no way to know. */
.study-tool-page .usage-upgrade { color: var(--study-accent); }

/* ══════════════════════════════════════════════════════════════════════
   CONTROL WIDTHS
   .btn-generate is width:100% globally (index.html), which at the tool column
   made every submit button 1000px+ of solid violet. A button the width of the
   page is the loudest "unfinished" signal in the set — cap it and let it sit
   at the start of its row like a real form's submit.
   ══════════════════════════════════════════════════════════════════════ */
.study-tool-page :is(.btn-generate, .tool-cta, .btn-essay) {
    width: auto;
    min-width: 210px;
    max-width: 100%;
    padding-left: 28px;
    padding-right: 28px;
}

/* The ones that genuinely are the page's single action stay full width. */
.study-tool-page :is(.tt-card, .fc-setup-card) :is(.btn-generate, .tool-cta) {
    width: 100%;
}

/* Fields were inheriting the same full-bleed treatment: a 1080px text input
   above a 320px select reads as a mistake rather than a hierarchy. */
.study-tool-page :is(.study-gen-topic, .input-text) {
    max-width: 560px;
}

.study-tool-page :is(.textarea-notes, #essayText, #csTopic) {
    max-width: 100%;
}

/* ── My Library — chip filters over one hairline list per section ── */
#libraryPage > :is(.tool-hero, .lib-chips, .lib-pane) {
    width: 100%;
    max-width: 760px;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
}

/* Quizlet-shaped filter chips: filled at rest, outlined when selected. */
.lib-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 2px 0 4px;
}
.lib-chip {
    padding: 8px 16px;
    border: 1.5px solid transparent;
    border-radius: 999px;
    background: rgba(91, 80, 232, 0.07);
    color: var(--text-secondary);
    font: inherit;
    font-size: 0.86rem;
    font-weight: 700;
    line-height: 1.2;
    cursor: pointer;
    transition: background 0.14s ease, border-color 0.14s ease, color 0.14s ease;
}
.lib-chip:hover { background: rgba(91, 80, 232, 0.12); }
.lib-chip:focus-visible { outline: 2px solid var(--violet); outline-offset: 2px; }
.lib-chip[aria-selected="true"] {
    border-color: var(--violet);
    background: transparent;
    color: var(--text-primary);
}
.lib-chip[hidden] { display: none; }
[data-dark] .lib-chip { background: rgba(255, 255, 255, 0.055); color: #B4B4BD; }
[data-dark] .lib-chip:hover { background: rgba(255, 255, 255, 0.08); }
[data-dark] .lib-chip[aria-selected="true"] {
    border-color: #F5F5F7;
    background: transparent;
    color: #fff;
}

/* A real section heading, not a caption: the library is a page of lists and
   the eye needs somewhere to land between them. */
.lib-h {
    margin: 26px 0 2px;
    font-size: 1.02rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: var(--text-primary);
}
.lib-h:focus-visible { outline: 2px solid var(--violet); outline-offset: 2px; }

/* No enclosing card. Rows stand on the page, separated by a hairline and
   given room to breathe — a bordered box around the whole list made a
   handful of quizzes read as a dense table. */
/* A grid of sets, not a table of rows.

   The list was a stack of full-width flex rows, and on a phone that is the
   shape that fails: fixed-width action buttons ate the line and drove the
   title column toward zero, so a saved set rendered as "Chemistry Uni..." or
   shredded a word per line. A card cannot do that — the title gets the card's
   full width and the actions get their own line underneath.

   auto-fill/minmax means one column on a phone and as many as fit on a
   desktop, with no breakpoint to keep in sync. */
.lib-list {
    margin-top: 10px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(238px, 1fr));
    gap: 10px;
    align-items: start;
}

/* Empty-state copy spans the collection instead of being clipped in one tile. */
.lib-list-empty .lib-row {
    grid-column: 1 / -1;
    padding: clamp(24px, 4vw, 36px);
    gap: 18px;
    box-shadow: var(--study-shadow-small);
}
.lib-list-empty .lib-row-sub {
    max-width: 54ch;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    line-height: 1.6;
    margin-top: 8px;
}
.lib-list-empty .lib-act {
    min-height: 44px;
    padding: 10px 16px;
}

.lib-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    padding: 20px;
    margin: 0;
    border-radius: 18px;
    border: 1px solid var(--card-border);
    background: var(--card-bg, #fff);
    transition: border-color .16s ease, box-shadow .16s ease;
}

/* Border and shadow give the whole card emphasis without shifting its position. */
.lib-row:hover {
    border-color: rgba(91, 80, 232, .34);
    box-shadow: 0 5px 16px rgba(43, 35, 113, .08);
    transform: none;
}

/* flex-basis:100% is what forces the break, so the split never depends on how
   wide a particular set's name happens to render. */
.lib-row-info { flex: 1 1 100%; }
/* The hover tint is what replaces the box: it draws the row the moment you
   reach for it, and nothing before that. */

/* The one you were part-way through gets the whole first row of the grid. */
.lib-row-resume {
    grid-column: 1 / -1;
    background: rgba(91, 80, 232, 0.06);
    border-color: rgba(91, 80, 232, .22);
}
.lib-row-resume:hover { background: rgba(91, 80, 232, 0.09); }
.lib-row-info { min-width: 0; }
/* Two lines, then clip. A set called "Earth and Environmental Science" is
   worth wrapping for; ellipsising it at one line is what made two sets from
   the same subject indistinguishable. */
.lib-row-title {
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: -0.005em;
    color: var(--text-primary);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.lib-row-sub {
    margin-top: 2px;
    font-size: 0.8rem;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.lib-act {
    flex: none;
    padding: 7px 14px;
    border: 1px solid var(--card-border);
    border-radius: 12px;
    background: transparent;
    color: var(--violet);
    font: inherit;
    font-size: 0.82rem;
    font-weight: 700;
    line-height: 1.2;
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
}
.lib-act:hover {
    border-color: var(--card-border-hover);
    background: rgba(91, 80, 232, 0.05);
}
/* A retake spends nothing — the row says so, because the action beside it
   (a fresh generation) does spend. */
.lib-act-free { gap: 7px; }
.lib-free {
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 1px 6px 2px;
    border-radius: 999px;
    background: rgba(34, 197, 94, 0.14);
    color: #15803d;
}
[data-dark] .lib-free { background: rgba(34, 197, 94, 0.18); color: #4ade80; }

.lib-act-primary {
    background: var(--violet);
    border-color: var(--violet);
    color: #fff;
}
.lib-act-primary:hover { background: var(--violet); filter: brightness(1.07); }

.lib-icon {
    flex: none;
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
}
.lib-icon svg { width: 14px; height: 14px; }
.lib-icon:hover { background: rgba(91, 80, 232, 0.08); color: var(--text-primary); }
.lib-icon:focus-visible { outline: 2px solid var(--violet); outline-offset: -1px; }

/* Accuracy chip — real colours, not opacity, on both themes. */
.lib-acc {
    flex: none;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 800;
}
.lib-acc.good { background: rgba(34, 197, 94, 0.12); color: #15803d; }
.lib-acc.mid { background: rgba(91, 80, 232, 0.10); color: #4f46e5; }
.lib-acc.low { background: rgba(244, 63, 94, 0.12); color: #be123c; }
[data-dark] .lib-acc.good { background: rgba(34, 197, 94, 0.16); color: #4ade80; }
[data-dark] .lib-acc.mid { background: rgba(255, 255, 255, 0.08); color: #a89ffb; }
[data-dark] .lib-acc.low { background: rgba(244, 63, 94, 0.18); color: #fda4af; }

.lib-notes-hint { font-size: 0.78rem; color: var(--text-muted); margin: 4px 0 0; }

/* Note composer — same card recipe as the lists it sits above. */
#libNoteNew { margin-top: 12px; }
#libNoteNew[hidden] { display: none; }
.lib-note-compose {
    margin-top: 10px;
    padding: 14px;
    border: 1px solid var(--card-border);
    border-radius: 14px;
    background: var(--card-bg);
}
.lib-note-compose[hidden] { display: none; }
.lib-note-compose :is(.input-text, .textarea-notes) {
    width: 100%;
    box-sizing: border-box;
}
.lib-note-actions { display: flex; gap: 8px; margin-top: 12px; }
.lib-note-err { margin-top: 8px; font-size: 0.8rem; color: #be123c; }
.lib-note-err[hidden] { display: none; }
[data-dark] .lib-note-err { color: #fda4af; }

[data-dark] .lib-row:hover { background: rgba(255, 255, 255, 0.03); }
[data-dark] .lib-row-resume { background: rgba(255, 255, 255, 0.055); }
[data-dark] .lib-row-resume:hover { background: rgba(255, 255, 255, 0.08); }
[data-dark] .lib-icon:hover { background: rgba(255, 255, 255, 0.055); }
[data-dark] .lib-act:hover { background: rgba(255, 255, 255, 0.055); }

/* Setup and picker rows */
.study-tool-page .study-gen {
    margin: 18px 0;
    padding: 18px;
    background:
        linear-gradient(90deg, rgba(91, 80, 232, 0.04), transparent 42%),
        var(--study-surface);
}


.study-tool-page .study-gen-row {
    gap: 10px;
}

.study-tool-page .study-deck-bar {
    min-height: 62px;
    margin: 14px 0 18px;
    padding: 8px 10px 8px 14px;
    border: 1px solid var(--study-line);
    border-radius: 16px;
    background: var(--study-surface-soft);
}

.study-tool-page .study-hint,
.study-tool-page .cmap-hint {
    border-radius: 12px;
    background: rgba(91, 80, 232, 0.07);
    color: #5c637a;
}

/* Discover, dashboard, review and planning */
.study-tool-page .features-list-item {
    position: relative;
    gap: 14px;
    overflow: hidden;
    text-align: left;
    transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.study-tool-page button.features-list-item:hover {
    border-color: rgba(91, 80, 232, 0.28);
    box-shadow: var(--study-shadow);
    transform: translateY(-2px);
}

.study-tool-page .features-list-icon {
    width: 42px;
    height: 42px;
    border-radius: 13px;
    background: var(--study-accent-soft);
    color: var(--study-accent);
}

.study-tool-page .features-list-title {
    color: var(--study-ink);
    font-size: 0.98rem;
}

.study-tool-page .features-list-desc {
    color: var(--study-muted);
    line-height: 1.5;
}

.study-tool-page .stats-page-grid {
    gap: 12px;
}

.study-tool-page .stats-page-card {
    padding: 18px;
}

.study-tool-page .dash-hero {
    overflow: hidden;
    border-radius: 20px;
    box-shadow: var(--study-shadow);
}

.study-tool-page .dash-sec-head {
    margin-top: 28px;
    padding: 0 2px 10px;
    border-bottom: 1px solid var(--study-line);
}

.study-tool-page .daily-card {
    padding: 20px;
}

.study-tool-page .daily-quests {
    gap: 10px;
}

.study-tool-page .exam-planner-form {
    position: relative;
    overflow: hidden;
}

.study-tool-page .exam-planner-form::before {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: 3px;
    background: var(--study-accent);
    content: "";
}

.study-tool-page .exam-plan-card {
    padding: 18px;
}

/* Flashcards, recall modes and tests */
.study-tool-page .fc-setup-card {
    padding: 4px 0 0;
}

.study-tool-page .fc-deck-row {
    border-color: var(--study-line);
    border-radius: 16px;
    background: var(--study-surface);
    box-shadow: 0 5px 16px rgba(38, 33, 111, 0.05);
}

.study-tool-page .fc-card {
    border: 1px solid rgba(91, 80, 232, 0.2);
    border-radius: 20px;
    box-shadow: 0 8px 24px rgba(38, 33, 111, .09);
}

.study-tool-page .fc-progress-bar,
.study-tool-page .match-progress,
.study-tool-page .write-bar,
.study-tool-page .path-progress {
    height: 8px;
    background: rgba(91, 80, 232, 0.1);
}

.study-tool-page .fc-progress-fill,
.study-tool-page .match-progress-fill,
.study-tool-page .write-bar-fill,
.study-tool-page .path-progress-fill {
    background: var(--study-accent);
}

.study-tool-page .learn-choice,
.study-tool-page .test-opt {
    min-height: 54px;
    border: 1.5px solid var(--study-line);
    border-radius: 15px;
    background: var(--study-surface);
    box-shadow: none;
}

.study-tool-page .learn-choice:hover:not(:disabled),
.study-tool-page .test-opt:hover {
    border-color: rgba(91, 80, 232, 0.42);
    background: #f8f7ff;
}

.study-tool-page .write-card,
.study-tool-page .test-q {
    padding: clamp(18px, 3vw, 24px);
}

.study-tool-page .match-tile {
    min-height: 96px;
    border: 1.5px solid var(--study-line);
    border-radius: 17px;
    background: var(--study-surface);
    box-shadow: var(--study-shadow-small);
}

.study-tool-page .match-tile:hover:not(.gone):not(.sel) {
    border-color: rgba(91, 80, 232, 0.36);
    box-shadow: var(--study-shadow);
}

/* Visual tools, timer and calculators */
.study-tool-page .cmap-wrap {
    min-height: 420px;
    overflow: auto;
    background:
        linear-gradient(rgba(91, 80, 232, 0.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(91, 80, 232, 0.045) 1px, transparent 1px),
        #fff;
    background-size: 24px 24px;
}

.study-tool-page .cmap-wrap svg {
    min-width: 700px;
}

.study-tool-page .tt-card {
    padding: clamp(24px, 5vw, 42px);
    text-align: center;
}

.study-tool-page .tt-clock {
    color: var(--study-ink);
    font-size: clamp(4rem, 14vw, 7rem);
    letter-spacing: -0.055em;
}

.study-tool-page .tt-phase {
    color: var(--study-accent);
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.study-tool-page .tt-secondary,
.study-tool-page .tt-len button,
.study-tool-page .atar-add,
.study-tool-page .fc-btn-ghost {
    min-height: 42px;
    border: 1px solid var(--study-line);
    border-radius: 999px;
    background: var(--study-surface-soft);
    color: #535b73;
    font-weight: 800;
}

.study-tool-page .tt-len button.active {
    border-color: rgba(91, 80, 232, 0.34);
    background: var(--study-accent-soft);
    color: var(--study-accent);
}

.study-tool-page .atar-wrap {
    max-width: 880px;
}

.study-tool-page .atar-row {
    gap: 10px;
    margin-bottom: 10px;
    padding: 10px;
    border: 1px solid var(--study-line);
    border-radius: 16px;
    background: var(--study-surface);
}

.study-tool-page .atar-result {
    border: 1px solid rgba(91, 80, 232, 0.2);
    border-radius: 22px;
    background: var(--study-surface);
    box-shadow: var(--study-shadow);
}

.study-tool-page .atar-result .atar-big {
    color: var(--study-accent);
    font-size: clamp(3rem, 10vw, 5.5rem);
}

.study-tool-page .cs-sheet {
    position: relative;
    padding: clamp(22px, 4vw, 34px);
}

.study-tool-page .cs-sheet::before {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 30px;
    width: 1px;
    background: rgba(239, 68, 68, 0.18);
    content: "";
    pointer-events: none;
}

.study-tool-page .cs-sheet > * {
    margin-left: 24px;
}

/* Settings and learning path */
.study-tool-page .set-row {
    min-height: 76px;
    margin-bottom: 10px;
    padding: 15px 18px;
}

.study-tool-page .set-row-title {
    color: var(--study-ink);
    font-weight: 850;
}

.study-tool-page .set-row-sub {
    color: var(--study-muted);
}

.study-tool-page .path-controls {
    padding: 0 0 20px;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.study-tool-page .path-nodes {
    margin-top: 24px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    gap: 0;
    align-items: stretch;
    counter-reset: syllabus-point;
}

.study-tool-page .path-nodes::before { display: none; }
.study-tool-page .path-node {
    flex-direction: row;
    align-items: center;
    gap: 18px;
    min-height: 86px;
    padding: 18px 16px;
    border-bottom: 1px solid var(--study-line);
    transform: none !important;
    counter-increment: syllabus-point;
}
.study-tool-page .path-node.current { border: 1px solid var(--study-line); border-radius: 10px; background: var(--study-surface); }
.study-tool-page .path-node > :is(.path-avi, .path-spark, .path-start) { display: none; }
.study-tool-page .path-node .path-circle {
    width: 44px;
    height: 44px;
    flex: none;
    border: 1px solid var(--study-line);
    border-radius: 8px;
    box-shadow: none;
    background: transparent;
    color: var(--study-muted);
}
.study-tool-page .path-node .path-circle svg { display: none; }
.study-tool-page .path-node .path-circle::before { content: counter(syllabus-point, decimal-leading-zero); font: 650 .8rem/1 var(--font-ui); }
.study-tool-page .path-node.current .path-circle { background: #5b50e8; color: #fff; border-color: #5b50e8; }
.study-tool-page .path-node.done .path-circle { color: var(--study-accent); background: var(--study-accent-soft); border-color: transparent; }
.study-tool-page .path-node.done .path-circle::before { content: "✓"; font-size: 1.2rem; }
.study-tool-page .path-node :is(.path-circle:hover, .path-circle:active) { transform: none; box-shadow: none; }
.study-tool-page .path-label { max-width: none; text-align: left; font-size: .9rem; line-height: 1.5; font-weight: 550; color: var(--study-muted); }
.study-tool-page .path-node.current .path-label { color: var(--study-ink); font-weight: 650; }
.study-tool-page .path-node.current .path-label::after { content: "Current topic · practise next"; display: block; margin-top: 5px; font-size: .72rem; font-weight: 500; color: var(--study-accent); }
.study-tool-page .path-node.done .path-label { color: var(--study-ink); }
.study-tool-page .path-goal { margin-top: 0; border-bottom: 0; }
.study-tool-page .path-goal .path-trophy { width: 44px; height: 44px; flex: none; border-radius: 8px; background: transparent; color: var(--study-muted); box-shadow: none; }
.study-tool-page .path-goal .path-trophy svg { width: 24px; height: 24px; }
.study-tool-page .path-progress { height: 4px; background: var(--study-line); }
.study-tool-page .path-progress-fill { background: var(--study-accent); }

/* Child components use margin shorthands for vertical rhythm. Restore the
   workspace's horizontal centring after those rules so setup rows cannot
   escape the shared content frame. */
.study-tool-page > :not(svg.bp) {
    margin-inline: auto;
}

/* Dark mode */
/* Tool hero — mirrors [data-dark] #heroHeader on the quiz home. */
/* The hero is a masthead now, not a panel — nothing to re-skin but the
   eyebrow's leading rule, which keeps its gradient in both themes. */
[data-dark] .study-tool-page .tool-hero h2::before {
    color: var(--study-accent);
}

[data-dark] .study-tool-page {
    --study-accent: #8b7cf8;
    --study-accent-strong: #6f64ff;
    --study-accent-soft: rgba(157, 148, 255, 0.1);
    --study-ink: #F5F5F7;
    --study-muted: #B4B4BD;
    --study-line: #343840;
    --study-line-2: rgba(255, 255, 255, 0.14);
    --study-surface: #202329;
    --study-surface-soft: #1b1e24;
    --study-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
    --study-shadow-small: 0 1px 3px rgba(0, 0, 0, 0.1);
    --study-shadow-hover: 0 3px 10px rgba(0, 0, 0, 0.14);
    background-color: #111113;
}

[data-dark] .study-tool-page :is(.input-text, .select-styled, .textarea-notes, .study-gen-topic, .csel-btn) {
    border-color: var(--study-line-2);
    background: var(--study-surface-soft);
    color: var(--study-ink);
}

[data-dark] .study-tool-page :is(.input-text, .select-styled, .textarea-notes, .study-gen-topic, .csel-btn):focus {
    background: var(--study-surface);
}

[data-dark] .study-tool-page .field-label,
[data-dark] .study-tool-page .study-deck-bar label,
[data-dark] .study-tool-page .set-row-sub {
    color: var(--study-muted);
}

[data-dark] .study-tool-page :is(button, input, select, textarea, [tabindex]):focus-visible,
[data-dark] .study-tool-page .test-opt:has(input:focus-visible) {
    outline-color: #b9b2ff;
}

[data-dark] .study-tool-page :is(
    .tt-secondary,
    .tt-len button,
    .atar-add,
    .fc-btn-ghost
) {
    color: var(--study-muted);
}

[data-dark] .study-tool-page .learn-choice,
[data-dark] .study-tool-page .test-opt,
[data-dark] .study-tool-page .cmap-wrap,
[data-dark] .study-tool-page .path-nodes {
    background-color: #18181B;
}

/* The syllabus list shares the page ground in both themes. */
[data-dark] .student-workspace #pathPage .path-nodes { background: transparent; }
[data-dark] .student-workspace #pathPage .path-node.locked .path-circle { background: transparent; color: var(--study-muted); }
[data-dark] .student-workspace #pathPage .path-goal .path-trophy { background: transparent; box-shadow: none; }

[data-dark] .study-tool-page .learn-choice:hover:not(:disabled),
[data-dark] .study-tool-page .test-opt:hover {
    background: #232327;
}

[data-dark] .study-tool-page .cs-sheet::before {
    background: rgba(248, 113, 113, 0.22);
}

/* Semantic interaction states must win over the neutral workspace surfaces. */
.study-tool-page .learn-choice.correct {
    border-color: #047857;
    background: #059669;
    box-shadow: 0 6px 20px rgba(5, 150, 105, 0.26);
    color: #fff;
}

.study-tool-page .learn-choice.wrong {
    border-color: #be123c;
    background: #e11d48;
    box-shadow: 0 6px 20px rgba(225, 29, 72, 0.24);
    color: #fff;
}

.study-tool-page .learn-choice.correct::before,
.study-tool-page .learn-choice.wrong::before {
    border-color: rgba(255, 255, 255, 0.45);
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
}

.study-tool-page .match-tile.sel {
    border-color: var(--study-accent);
    background: var(--study-accent-soft);
    box-shadow: 0 0 0 3px rgba(91, 80, 232, 0.13);
}

.study-tool-page .match-tile.wrong {
    border-color: #e11d48;
    background: #fff1f3;
    box-shadow: 0 0 0 3px rgba(225, 29, 72, 0.1);
}

[data-dark] .study-tool-page .match-tile.wrong {
    background: rgba(225, 29, 72, 0.18);
}

.study-tool-page .test-q.test-correct {
    border-color: #059669;
    box-shadow: 0 0 0 2px rgba(5, 150, 105, 0.08);
}

.study-tool-page .test-q.test-wrong {
    border-color: #e11d48;
    box-shadow: 0 0 0 2px rgba(225, 29, 72, 0.08);
}

.study-tool-page .test-opt:has(input:checked),
.study-tool-page .test-opt:has(input:checked):hover {
    border-color: var(--study-accent);
    background: var(--study-accent-soft);
    box-shadow: none;
}

.study-tool-page .test-opt:has(input:checked)::before {
    border-color: var(--study-accent);
    background: var(--study-accent);
    color: #fff;
}

@media (max-width: 720px) {
    .study-tool-page {
        padding: 78px 14px 40px;
    }

    .study-tool-page::after {
        top: 93px;
        left: 8px;
        height: 72px;
    }

    /* The padding and radius here are what is left of the hero's own card,
       which the base rule already turned off — on a phone they were just
       bulk around a transparent box. */
    .study-tool-page .tool-hero {
        padding: 0;
        border-radius: 0;
    }

    .study-tool-page .tool-hero h2 {
        font-size: clamp(1.4rem, 5.6vw, 1.75rem);
    }

    /* The counter would squeeze the heading to a couple of characters
       on a phone, so let it drop under the title instead. */
    .study-tool-page .tool-hero :is(.match-head, .dash-head) {
        align-items: flex-start;
        flex-direction: column;
        gap: 6px;
    }

    .study-tool-page > h2,
    .study-tool-page > .dash-head h2,
    .study-tool-page > .match-head h2,
    .study-tool-page > .atar-wrap h2 {
        font-size: 1.8rem;
    }

    .study-tool-page > p,
    .study-tool-page > .atar-wrap > p {
        font-size: 0.92rem;
    }

    .study-tool-page .section-card,
    .study-tool-page .write-card,
    .study-tool-page .test-q {
        padding: 16px;
        border-radius: 17px;
    }

    .study-tool-page .study-gen-row {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
    }

    .study-tool-page .study-gen-row .study-gen-btn {
        width: 100%;
    }

    .study-tool-page .btn-generate {
        width: auto !important;
    }

    .study-tool-page .tabs .tab-btn {
        min-height: 44px;
    }

    .study-tool-page .match-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 9px;
    }

    .study-tool-page .match-tile {
        min-height: 84px;
    }

    .study-tool-page .tt-controls {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .study-tool-page .tt-controls .tool-cta {
        grid-column: 1 / -1;
        width: 100%;
    }

    .study-tool-page .path-controls,
    .study-tool-page .study-deck-bar {
        align-items: stretch;
        flex-direction: column;
    }
}

@media (prefers-reduced-motion: reduce) {
    .study-tool-page *,
    .study-tool-page *::before,
    .study-tool-page *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
    }
}