/* ==========================================================================
   Theory — curriculum overview, module pages, chapters and content blocks.

   Everything themable comes from the tokens in themes.css. The three
   --importance-* tokens are the only ones this file introduces.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Mode switch
   -------------------------------------------------------------------------- */

.mode-switch {
    display: flex;
    gap: 4px;
    padding: 4px;
    margin: 0 0 14px;
    background: var(--ds-raised);
    border: 1px solid var(--ds-border-subtle);
    border-radius: var(--radius-input);
}

.mode-switch-option {
    flex: 1 1 0;
    padding: 7px 10px;
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--ds-muted);
    background: transparent;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: background var(--transition-hover), color var(--transition-hover);
}

.mode-switch-option:hover {
    color: var(--ds-text);
}

.mode-switch-option.active {
    color: var(--accent-strong);
    background: var(--accent-tint);
}

/* A track with no modules yet still shows its row, so the shape of the
   curriculum is visible before it is written. */
.nav-subsection-empty {
    color: var(--ds-faint);
    font-style: italic;
    cursor: default;
}

.nav-subsection-empty:hover {
    background: transparent;
    color: var(--ds-faint);
}

/* --------------------------------------------------------------------------
   Overview
   -------------------------------------------------------------------------- */

.theory-overview-blurb {
    max-width: 62ch;
    margin: 10px 0 0;
    font-size: 14.5px;
    line-height: 1.65;
    color: var(--ds-muted);
}

.theory-track {
    margin-top: 34px;
}

.theory-empty {
    padding: 18px;
    font-size: 13.5px;
    color: var(--ds-faint);
    background: var(--ds-glass);
    border: 1px dashed var(--ds-border);
    border-radius: var(--radius-row);
}

.theory-module-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 14px;
}

.theory-module-card {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 16px 18px;
    text-decoration: none;
    background: var(--ds-surface);
    border: 1px solid var(--ds-border);
    border-radius: var(--radius-card);
    transition: border-color var(--transition-hover),
                box-shadow var(--transition-hover);
}

.theory-module-card:hover {
    border-color: var(--accent);
    box-shadow: var(--shadow-sm);
}

.theory-module-card:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
}

.theory-module-card-top {
    display: flex;
    align-items: baseline;
    gap: 10px;
}

.theory-module-number {
    flex: 0 0 auto;
    min-width: 22px;
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 600;
    color: var(--accent);
}

.theory-module-title {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    color: var(--ds-text);
}

.theory-module-tagline {
    margin: 0;
    font-size: 13px;
    line-height: 1.55;
    color: var(--ds-muted);
}

.theory-module-tagline-large {
    max-width: 62ch;
    margin-top: 8px;
    font-size: 15px;
}

.theory-module-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    margin-top: auto;
    padding-top: var(--space-2);
    font-size: var(--text-small);
    color: var(--ds-faint);
}

/* Position leads, duration follows. "5 chapters · 30 min" was inventory; what a
   reader coming back wants is how far in they are. */
.theory-module-meta .topic-stat.is-progress {
    color: var(--ds-text);
    font-weight: 600;
}

.theory-module-bar {
    height: 4px;
    margin-top: var(--space-3);
    background: var(--ds-hover);
    border-radius: var(--radius-pill);
    overflow: hidden;
}

.theory-module-bar-fill {
    display: block;
    height: 100%;
    width: 0;
    border-radius: inherit;
    background: var(--accent);
    transition: width var(--transition-panel);
}

/* The bar belongs to its track, like every other bar on the page. */
[data-hue="violet"]  .theory-module-bar-fill { background: var(--hue-violet-ink); }
[data-hue="sky"]     .theory-module-bar-fill { background: var(--hue-sky-ink); }
[data-hue="teal"]    .theory-module-bar-fill { background: var(--hue-teal-ink); }
[data-hue="lime"]    .theory-module-bar-fill { background: var(--hue-lime-ink); }
[data-hue="pink"]    .theory-module-bar-fill { background: var(--hue-pink-ink); }
[data-hue="amber"]   .theory-module-bar-fill { background: var(--hue-amber-ink); }
[data-hue="indigo"]  .theory-module-bar-fill { background: var(--hue-indigo-ink); }
[data-hue="rose"]    .theory-module-bar-fill { background: var(--hue-rose-ink); }
[data-hue="fuchsia"] .theory-module-bar-fill { background: var(--hue-fuchsia-ink); }
[data-hue="slate"]   .theory-module-bar-fill { background: var(--hue-slate-ink); }

.theory-module-cta {
    margin-top: var(--space-3);
    font-family: var(--font-mono);
    font-size: var(--text-micro);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--accent-strong);
}

.theory-doc-kind {
    display: inline-block;
    margin-right: var(--space-2);
    padding: 1px 6px;
    font-family: var(--font-mono);
    font-size: var(--text-micro);
    color: var(--ds-faint);
    background: var(--ds-hover);
    border-radius: var(--radius-input);
}

/* --------------------------------------------------------------------------
   Module header
   -------------------------------------------------------------------------- */

.theory-breadcrumb {
    display: inline-block;
    margin-bottom: 10px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--ds-faint);
    text-decoration: none;
}

.theory-breadcrumb:hover {
    color: var(--accent-strong);
}

.theory-prerequisites,
.theory-dochub,
.theory-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 14px;
}

.theory-prerequisites-label,
.theory-docs-label,
.theory-related-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ds-faint);
}

.theory-prerequisite {
    padding: 5px 11px;
    font-size: 12.5px;
    color: var(--ds-muted);
    text-decoration: none;
    background: var(--ds-glass);
    border: 1px solid var(--ds-border);
    border-radius: 999px;
    transition: color var(--transition-hover), border-color var(--transition-hover);
}

.theory-prerequisite:hover {
    color: var(--accent-strong);
    border-color: var(--accent);
}

.theory-dochub-link {
    padding: 8px 14px;
    font-size: 13px;
    font-weight: 600;
    color: var(--accent-strong);
    text-decoration: none;
    background: var(--accent-tint);
    border: 1px solid var(--accent);
    border-radius: var(--radius-input);
    transition: background var(--transition-hover);
}

.theory-dochub-link:hover {
    background: var(--ds-raised);
}

.theory-control {
    padding: 7px 13px;
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--ds-muted);
    background: var(--ds-raised);
    border: 1px solid var(--ds-border);
    border-radius: var(--radius-input);
    cursor: pointer;
    transition: color var(--transition-hover), border-color var(--transition-hover);
}

.theory-control:hover {
    color: var(--ds-text);
    border-color: var(--accent);
}

.theory-control.active {
    color: var(--accent-strong);
    background: var(--accent-tint);
    border-color: var(--accent);
}

/* --------------------------------------------------------------------------
   Chapter rail
   -------------------------------------------------------------------------- */

.theory-rail {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 22px 0 8px;
    padding: 14px 16px;
    background: var(--accent-tint-soft);
    border: 1px solid var(--ds-border-subtle);
    border-radius: var(--radius-row);
}

.theory-rail-item {
    position: relative;
    padding: 5px 11px 5px 18px;
    font-size: 12.5px;
    color: var(--ds-muted);
    text-decoration: none;
    background: var(--ds-glass);
    border: 1px solid var(--ds-border);
    border-radius: 999px;
    transition: color var(--transition-hover), border-color var(--transition-hover);
}

.theory-rail-item::before {
    content: '';
    position: absolute;
    left: 8px;
    top: 50%;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    transform: translateY(-50%);
    background: var(--tier-good-dot);
}

.theory-rail-item.importance-must::before   { background: var(--tier-must-dot); }
.theory-rail-item.importance-should::before { background: var(--tier-should-dot); }

.theory-rail-item:hover {
    color: var(--accent-strong);
    border-color: var(--accent);
}

/* --------------------------------------------------------------------------
   Chapter
   -------------------------------------------------------------------------- */

.theory-chapter {
    margin-bottom: 18px;
    background: var(--ds-surface);
    border: 1px solid var(--ds-border);
    border-left: 3px solid var(--tier-good-dot);
    border-radius: var(--radius-row);
    scroll-margin-top: 90px;
}

.theory-chapter.importance-must   { border-left-color: var(--tier-must-dot); }
.theory-chapter.importance-should { border-left-color: var(--tier-should-dot); }

.theory-chapter-header {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 18px 20px;
    cursor: pointer;
}

.theory-chapter-header:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: -2px;
    border-radius: var(--radius-row);
}

.theory-chapter-number {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 600;
    color: var(--accent-strong);
    background: var(--accent-tint);
    border-radius: 8px;
}

.theory-chapter-heading {
    flex: 1 1 auto;
    min-width: 0;
}

.theory-chapter-title {
    margin: 0;
    font-size: 17px;
    font-weight: 600;
    line-height: 1.35;
    color: var(--ds-text);
}

.theory-chapter-summary {
    margin: 5px 0 0;
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--ds-muted);
}

/* The same soft chip the question rows carry, for the same reason: a must-know
   chapter and a must-know question mean the same thing, and neither is an
   error to be outlined in red. */
.theory-importance {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 11px;
    font-size: var(--text-micro);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: nowrap;
    border: none;
    border-radius: var(--radius-pill);
    color: var(--tier-good-ink);
    background: var(--tier-good-bg);
}

.theory-importance::before {
    content: '';
    flex-shrink: 0;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--tier-good-dot);
}

.theory-importance.importance-must {
    color: var(--tier-must-ink);
    background: var(--tier-must-bg);
}

.theory-importance.importance-must::before { background: var(--tier-must-dot); }

.theory-importance.importance-should {
    color: var(--tier-should-ink);
    background: var(--tier-should-bg);
}

.theory-importance.importance-should::before { background: var(--tier-should-dot); }

.theory-chapter-body {
    padding: 0 20px 20px;
}

.theory-chapter.collapsed .theory-chapter-body {
    display: none;
}

/* Cram filter — hide everything that is not must-know, at every level the
   reader can be looking at: module cards on the overview, chapters and their
   rail on a module page, and terms in the glossary. One tier class, one rule. */
#topicContainer.cram-mode .theory-chapter:not(.importance-must),
#topicContainer.cram-mode .theory-module-card:not(.importance-must),
#topicContainer.cram-mode .theory-predict:not(.importance-must),
#topicContainer.cram-mode .theory-glossary-entry:not(.importance-must) {
    display: none;
}

/* The chapter rail is filtered with its chapters. The exclusion that used to
   sit here protected the glossary's own A–Z bar, which shared this markup and
   carried no tier; that bar is the sidebar's letter grid now and is outside
   #topicContainer entirely, so the rule no longer needs the exception. */
#topicContainer.cram-mode .theory-rail .theory-rail-item:not(.importance-must) {
    display: none;
}

/* A track or letter section left with nothing visible would otherwise show as
   a heading over empty space. */
#topicContainer.cram-mode .theory-track:not(:has(.importance-must)) {
    display: none;
}

/* --------------------------------------------------------------------------
   Blocks
   -------------------------------------------------------------------------- */

.theory-angle {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 16px;
    padding: 10px 14px;
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--ds-muted);
    background: var(--ds-glass);
    border-radius: var(--radius-input);
}

.theory-angle-label {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--accent-strong);
}

.theory-block-title {
    margin: 20px 0 8px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--ds-faint);
}

.theory-prose {
    font-size: 14.5px;
    line-height: 1.75;
    color: var(--ds-muted);
}

.theory-prose p { margin: 0 0 12px; }
.theory-prose ul,
.theory-prose ol { margin: 0 0 12px; padding-left: 22px; }
.theory-prose li { margin-bottom: 6px; }
.theory-prose strong { color: var(--ds-text); font-weight: 600; }
.theory-prose code,
.theory-definition code,
.theory-types code,
.theory-callout code,
.theory-table code {
    padding: 1px 5px;
    font-family: var(--font-mono);
    font-size: 0.88em;
    color: var(--ds-text);
    background: var(--accent-tint);
    border-radius: 4px;
}

.theory-prose a,
.theory-callout a,
.theory-definition a {
    color: var(--accent-strong);
}

/* Definition */
.theory-definition {
    margin: 16px 0;
    padding: 14px 16px;
    background: var(--ds-glass);
    border: 1px solid var(--ds-border);
    border-radius: var(--radius-row);
}

.theory-definition.is-important {
    border-color: var(--accent);
    box-shadow: var(--shadow-glow);
}

.theory-definition-term {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 6px;
    font-family: var(--font-mono);
    font-size: 14px;
    font-weight: 600;
    color: var(--accent-strong);
}

.theory-definition-aka {
    font-family: var(--font-sans);
    font-size: 11.5px;
    font-weight: 500;
    color: var(--ds-faint);
}

.theory-definition-body {
    font-size: 14px;
    line-height: 1.7;
    color: var(--ds-muted);
}

.theory-definition-body p:last-child { margin-bottom: 0; }

/* Types */
.theory-types-list {
    margin: 0;
    padding-left: 20px;
}

.theory-types-item {
    margin-bottom: 14px;
    padding-left: 8px;
    border-left: 2px solid var(--ds-border);
}

.theory-types-name {
    font-family: var(--font-mono);
    font-size: 13.5px;
    font-weight: 600;
    color: var(--ds-text);
}

.theory-types-body {
    margin-top: 4px;
    font-size: 13.5px;
    line-height: 1.65;
    color: var(--ds-muted);
}

.theory-types-when {
    margin-top: 5px;
    font-size: 12.5px;
    font-style: italic;
    color: var(--ds-faint);
}

/* Syntax */
.theory-syntax { margin: 16px 0; }

.theory-syntax-notes {
    margin-top: 8px;
    font-size: 13px;
    line-height: 1.65;
    color: var(--ds-faint);
}

/* Tables */
.theory-table-wrap {
    margin: 16px 0;
    overflow-x: auto;
}

.theory-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13.5px;
}

.theory-table th,
.theory-table td {
    padding: 9px 12px;
    text-align: left;
    vertical-align: top;
    border: 1px solid var(--ds-border);
}

.theory-table thead th {
    font-weight: 600;
    color: var(--ds-text);
    background: var(--accent-tint-soft);
}

.theory-table td {
    color: var(--ds-muted);
    line-height: 1.6;
}

.theory-comparison-aspect {
    font-weight: 600;
    color: var(--ds-text);
    background: var(--ds-glass);
    white-space: nowrap;
}

/* Callouts */
.theory-callout {
    margin: 16px 0;
    padding: 12px 16px;
    border-radius: var(--radius-input);
    border-left: 3px solid var(--accent);
    background: var(--ds-glass);
}

.theory-callout-pitfall { border-left-color: var(--warning-color); }
.theory-callout-tip     { border-left-color: var(--accent); }

.theory-callout-label {
    margin-bottom: 5px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--ds-faint);
}

.theory-callout-pitfall .theory-callout-label { color: var(--warning-color); }
.theory-callout-tip .theory-callout-label     { color: var(--accent-strong); }

.theory-callout-body {
    font-size: 13.5px;
    line-height: 1.7;
    color: var(--ds-muted);
}

.theory-callout-body p:last-child { margin-bottom: 0; }

/* Drills — a task under a clock, so it reads as a card, not as prose. Tier
   reuses the importance palette: a tier-1 drill and a must-know chapter carry
   the same weight, and giving them two colour languages would say otherwise. */
.theory-drill {
    margin: 18px 0;
    padding: 14px 16px;
    background: var(--ds-glass);
    border: 1px solid var(--ds-border);
    border-left: 3px solid var(--tier-good-dot);
    border-radius: var(--radius-row);
}

.theory-drill.tier-1 { border-left-color: var(--tier-must-dot); }
.theory-drill.tier-2 { border-left-color: var(--tier-should-dot); }

.theory-drill-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 10px;
    margin-bottom: 8px;
}

.theory-drill-tier {
    padding: 2px 8px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--tier-good-dot);
    border: 1px solid currentColor;
    border-radius: 999px;
}

.theory-drill.tier-1 .theory-drill-tier { color: var(--tier-must-dot); }
.theory-drill.tier-2 .theory-drill-tier { color: var(--tier-should-dot); }

.theory-drill-title {
    flex: 1;
    font-size: 14.5px;
    font-weight: 600;
    color: var(--ds-text);
}

.theory-drill-clock {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--ds-faint);
    white-space: nowrap;
}

.theory-drill-prompt {
    font-size: 13.5px;
    line-height: 1.7;
    color: var(--ds-muted);
}

.theory-drill-prompt p:last-child { margin-bottom: 0; }

.theory-drill-watch {
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid var(--ds-border-subtle);
}

.theory-drill-watch-label {
    margin-bottom: 4px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--warning-color);
}

.theory-drill-watch ul {
    margin: 0;
    padding-left: 18px;
    font-size: 13px;
    line-height: 1.65;
    color: var(--ds-muted);
}

.theory-drill code {
    padding: 1px 5px;
    font-family: var(--font-mono);
    font-size: 0.88em;
    color: var(--ds-text);
    background: var(--accent-tint);
    border-radius: 4px;
}

.theory-drill .code-block { margin-top: 12px; }

/* Predict — the same card as a drill, holding a question instead of a task.
   The left edge takes the importance colour directly rather than a difficulty
   tier, because for a puzzle those are the same judgement: how likely you are
   to be asked it is how much it is worth attempting. */
.theory-predict {
    margin: 18px 0;
    padding: 14px 16px;
    background: var(--ds-glass);
    border: 1px solid var(--ds-border);
    border-left: 3px solid var(--tier-good-dot);
    border-radius: var(--radius-row);
}

.theory-predict.importance-must   { border-left-color: var(--tier-must-dot); }
.theory-predict.importance-should { border-left-color: var(--tier-should-dot); }

.theory-predict-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: 8px;
}

.theory-predict-label {
    flex: 1;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--ds-faint);
}

.theory-predict-prompt {
    margin-bottom: 10px;
    font-size: 13.5px;
    line-height: var(--leading-body);
    color: var(--ds-text);
}

.theory-predict-prompt p:last-child { margin-bottom: 0; }

.theory-predict code {
    font-family: var(--font-mono);
    font-size: 0.92em;
    color: var(--accent-strong);
}

/* The reveal control sits under the code and above the answer, so the reading
   order and the tab order are the same order the reader works in. */
.theory-predict-reveal {
    display: inline-flex;
    align-items: center;
    height: 34px;
    margin-top: 12px;
    padding: 0 var(--space-4);
    font-family: inherit;
    font-size: var(--text-small);
    font-weight: 600;
    color: var(--accent);
    background: var(--ds-raised);
    border: 1px solid var(--ds-border);
    border-radius: var(--radius-pill);
    cursor: pointer;
    transition: background var(--transition-hover), border-color var(--transition-hover);
}

.theory-predict-reveal:hover {
    background: var(--ds-hover);
    border-color: var(--accent);
}

@media (pointer: coarse) {
    .theory-predict-reveal { height: 40px; }
}

/* Built up front, hidden with a class. Revealing is a class toggle, so a
   revealed block survives a cram toggle and a re-filter. */
.theory-predict-answer { display: none; }
.theory-predict.revealed .theory-predict-answer { display: block; }

.theory-predict-answer .code-output {
    margin-top: 12px;
    border-radius: var(--radius-row);
}

.theory-predict-distractor {
    margin-top: 10px;
    padding: 10px 12px;
    font-size: 13px;
    line-height: var(--leading-body);
    color: var(--ds-muted);
    background: var(--ds-sunken);
    border-radius: var(--radius-input);
}

.theory-predict-distractor::before {
    content: 'The common wrong answer';
    display: block;
    margin-bottom: 4px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--warning-color);
}

.theory-predict-distractor p:last-child { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   Chapter footer — docs and related questions
   -------------------------------------------------------------------------- */

.theory-docs,
.theory-related {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px solid var(--ds-border-subtle);
}

.theory-doc-link,
.theory-related-link {
    padding: 5px 11px;
    font-size: 12.5px;
    color: var(--ds-muted);
    text-decoration: none;
    background: var(--ds-glass);
    border: 1px solid var(--ds-border);
    border-radius: 999px;
    transition: color var(--transition-hover), border-color var(--transition-hover);
}

.theory-doc-link:hover,
.theory-related-link:hover {
    color: var(--accent-strong);
    border-color: var(--accent);
}

.theory-doc-link.doc-kind-api {
    font-family: var(--font-mono);
    font-size: 11.5px;
}

/* --------------------------------------------------------------------------
   Narrow screens
   -------------------------------------------------------------------------- */

@media (max-width: 768px) {
    .theory-module-grid {
        grid-template-columns: 1fr;
    }

    .theory-chapter-header {
        flex-wrap: wrap;
        padding: 14px 16px;
    }

    .theory-chapter-body {
        padding: 0 16px 16px;
    }

    .theory-importance {
        order: 3;
    }
}

/* --------------------------------------------------------------------------
   Glossary — #glossary

   Reuses the definition card wholesale, so a term looks the same here as it
   does in the chapter that introduced it. The card's own additions — the ASKED
   chip, the backlink, the grid — live in css/rail.css with the rest of the
   mode. What is left here is the card, which Theory still uses.

   The in-page A–Z jump bar went with the move: the sidebar's letter grid does
   that job now, and two alphabets on one screen is one too many.
   -------------------------------------------------------------------------- */

.theory-glossary-entry {
    margin: 12px 0;
}

.theory-glossary-source {
    display: inline-block;
    margin-top: 10px;
    font-size: 11.5px;
    font-weight: 500;
    color: var(--ds-faint);
    text-decoration: none;
    border-bottom: 1px dashed var(--ds-border);
    transition: color var(--transition-hover), border-color var(--transition-hover);
}

.theory-glossary-source:hover {
    color: var(--accent-strong);
    border-bottom-color: var(--accent-strong);
}

/* --------------------------------------------------------------------------
   Read progress
   -------------------------------------------------------------------------- */

.theory-progress {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 12px;
}

/* Inside a track heading the bar sits beside the rule, not under the title. */
.subsection-header .theory-progress {
    flex: none;
    width: 180px;
    margin-top: 0;
}

.theory-progress-track {
    flex: 1;
    height: 5px;
    border-radius: 999px;
    background: var(--ds-hover);
    overflow: hidden;
}

.theory-progress-fill {
    height: 100%;
    border-radius: var(--radius-pill);
    background: var(--accent);
    transition: width var(--transition-panel);
}

/* The bar belongs to its track, so it takes the track's hue rather than the
   one accent every bar on the page would otherwise share. */
[data-hue="violet"]  .theory-progress-fill { background: var(--hue-violet-ink); }
[data-hue="sky"]     .theory-progress-fill { background: var(--hue-sky-ink); }
[data-hue="teal"]    .theory-progress-fill { background: var(--hue-teal-ink); }
[data-hue="lime"]    .theory-progress-fill { background: var(--hue-lime-ink); }
[data-hue="pink"]    .theory-progress-fill { background: var(--hue-pink-ink); }
[data-hue="amber"]   .theory-progress-fill { background: var(--hue-amber-ink); }
[data-hue="indigo"]  .theory-progress-fill { background: var(--hue-indigo-ink); }
[data-hue="rose"]    .theory-progress-fill { background: var(--hue-rose-ink); }
[data-hue="fuchsia"] .theory-progress-fill { background: var(--hue-fuchsia-ink); }
[data-hue="slate"]   .theory-progress-fill { background: var(--hue-slate-ink); }

.theory-progress-label {
    flex: none;
    font-size: 11.5px;
    font-weight: 500;
    color: var(--ds-faint);
    white-space: nowrap;
}

.theory-module-read {
    flex: 0 0 auto;
    width: 14px;
    height: 14px;
    margin-left: auto;
    color: var(--success-color);
}

.theory-module-card.is-read .theory-module-title {
    color: var(--ds-muted);
}

/* The cross-track dependency a track-ordered page cannot show. */
.theory-card-prereqs {
    margin-top: 10px;
    padding-top: 9px;
    border-top: 1px dashed var(--ds-border);
    font-size: 11.5px;
    line-height: 1.5;
    color: var(--ds-faint);
}


/* --------------------------------------------------------------------------
   Glossary terms in prose

   A dashed underline rather than a solid one: the word is annotated, not
   linked, and clicking it does not take you anywhere.
   -------------------------------------------------------------------------- */

.glossary-term {
    position: relative;
    color: var(--accent-strong);
    border-bottom: 1px dashed var(--accent-tint);
    cursor: help;
}

.glossary-term:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
    border-radius: var(--radius-input);
}

.glossary-popover {
    position: absolute;
    left: 0;
    top: calc(100% + 8px);
    z-index: 1200;
    display: none;
    width: max-content;
    max-width: 320px;
    padding: var(--space-3) var(--space-4);
    text-align: left;
    background: var(--ds-raised);
    border: 1px solid var(--ds-border);
    border-radius: var(--radius-row);
    box-shadow: var(--shadow-lg);
}

.glossary-term:hover .glossary-popover,
.glossary-term.is-open .glossary-popover {
    display: block;
}

.glossary-popover-term {
    display: block;
    margin-bottom: var(--space-2);
    font-family: var(--font-mono);
    font-size: var(--text-small);
    color: var(--accent-strong);
}

.glossary-popover-body {
    display: block;
    font-size: var(--text-small);
    line-height: var(--leading-body);
    color: var(--ds-muted);
}

.glossary-popover-body p {
    margin: 0;
}

/* Set by placePopover when the measured box would cross the viewport edge. */
.glossary-term.align-right .glossary-popover {
    left: auto;
    right: 0;
}