/*
 * GED CSS Bundle: recordings.bundle.css
 * Auto-generated by scripts/bundle_ged_css.py
 * DO NOT EDIT - Edit source files instead
 *
 * Sources: static/css/shared/brand/brand-tokens.css, shell-base.css, modules/classroom/static/css/classroom-library-base.css, recordings-base.css, shell-desktop.css, modules/classroom/static/css/classroom-library-desktop.css, recordings-desktop.css, shell-tablet.css, modules/classroom/static/css/classroom-library-tablet.css, recordings-tablet.css, shell-mobile.css, modules/classroom/static/css/classroom-library-mobile-portrait.css, recordings-mobile.css, shell-landscape.css, modules/classroom/static/css/classroom-library-mobile-landscape.css, recordings-landscape.css
 */

/* === static/css/shared/brand/brand-tokens.css === */

/* THE CLASSROOM BRAND'S TOKENS, for a site whose pages are not built on the
   free class page's stylesheet (the GED site, 2026-10-11). The values are the
   free class page's own (static/css/public/free-class/free-class-base.css
   :root), and `ged_site_env.sh test brand --case tokens` fails the moment the
   two differ, so the brand has one set of values.

   Ink and slate, GOLD as the one accent, Space Grotesk headings, Inter body.
   On :root, never on a page element: a modal renders outside the page root
   and must still resolve every var(). No media query: this opens a bundle. */

:root {
    --fc-ink: #0f172a;
    --fc-ink-2: #1e293b;
    --fc-soft: #475569;
    --fc-muted: #64748b;
    --fc-line: #e2e8f0;
    --fc-line-soft: #f1f5f9;
    --fc-bg: #f8fafc;
    --fc-card: #ffffff;
    --fc-gold: #fdcc05;
    --fc-gold-hover: #f59e0b;
    --fc-gold-deep: #b45309;
    --fc-gold-soft: #fef3c7;
    --fc-ar: #3b82f6;
    --fc-ar-deep: #1e3a8a;
    --fc-green: #047857;
    --fc-green-soft: #d1fae5;
    --fc-shadow: 0 4px 14px rgba(15, 23, 42, 0.06);
    --fc-shadow-lg: 0 10px 28px rgba(15, 23, 42, 0.12);
    --fc-head: 'Space Grotesk', sans-serif;
    --fc-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    --fc-gutter: 24px;
    --fc-max: 1120px;
}


/* === shell-base.css === */

/* GED page shell — BASE (no media query): the body reset, the topbar and
   the footer every page carries. Never linked on its own: the bundler
   interleaves the five shell tiers into each page's bundle
   (scripts/bundle_ged_css.py), so a page still has exactly ONE bundle.

   ON THE CLASSROOM BRAND (2026-10-11): every colour and face is a token of
   static/css/shared/brand/brand-tokens.css, which opens the bundle (ink and
   slate, gold as the one accent, Space Grotesk headings, Inter body). The
   markup and every word are unchanged (`test brand`). */

html {
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    font-family: var(--fc-body);
    font-size: 16px;
    line-height: 1.5;
    color: var(--fc-ink-2);
    background: var(--fc-bg);
}

.g-page {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.g-page > main {
    flex: 1;
    /* ⛔ A DEFINITE WIDTH IS LOAD-BEARING, measured 2026-09-13. Every page main
       centres itself with `margin: 0 auto` under its own max-width. `.g-page` is
       a COLUMN flex container, and in flexbox an auto margin on the CROSS axis
       cancels `align-items: stretch`: the item shrink-wraps to its content and
       the auto margins eat the slack. Without this, max-width only CAPPED a
       fit-content width and every page was as wide as its widest child — on
       /account a subscriber got a 526px column with the two component cards side
       by side while a lifetime buyer got 432px with the same cards STACKED.
       border-box keeps the page's own padding inside the 100% so a narrow
       viewport cannot overflow. Arms: pages suite case H. */
    width: 100%;
    box-sizing: border-box;
}

/* Topbar */
.g-topbar {
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--fc-card);
    border-bottom: 1px solid var(--fc-line);
    /* Thin, because the controls set the height: every one is a 44px target. */
    padding: 6px 24px;
}

.g-topbar-inner {
    max-width: 1100px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    /* The row may wrap BETWEEN whole items when space runs out. Without this
       its only escape from a tight viewport was to break through a word. */
    flex-wrap: wrap;
    row-gap: 8px;
}

/* ⛔ A TOPBAR LABEL IS ONE PHRASE AND MUST NEVER SPLIT, seen at 390px: the row
   ran out of width and the browser broke inside the words — "Duran / Learning"
   and "Sign / out", with the GED badge stranded between them. This is ONE
   shared component (templates/ged/shared/ged_topbar.html), so this one rule
   fixes every page. Arms: pages suite case I. */
.g-brand-name,
.g-brand-sub,
.g-topbar-link,
.g-topbar-signin,
.g-acct-label,
.g-acct-item {
    white-space: nowrap;
}

/* ⭐ EVERY CONTROL IN THE BAR IS A 44px TARGET (the touch minimum), on every
   tier: the bar's height comes from the controls, not from its padding. */
.g-brand {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    text-decoration: none;
}

/* The d-mark. Sized in em so it tracks the wordmark at every tier instead of
   needing its own override in each one. */
.g-brand-mark {
    flex: 0 0 auto;
    width: 1.6em;
    height: 1.6em;
    object-fit: contain;
}

/* --- the brand as a menu (pages that pass `brand_menu`) ------------------ */

.g-brand-wrap {
    position: relative;
}

.g-brand-button {
    font: inherit;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    align-items: center;
}

.g-brand-menu {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    z-index: 200;
    min-width: 200px;
    padding: 6px;
    background: var(--fc-card);
    border: 1px solid var(--fc-line);
    border-radius: 12px;
    box-shadow: var(--fc-shadow-lg);
}

/* ⛔ Born hidden, and a `display` on the class would defeat the attribute.
   Same guard the practice page's clip player needs. */
.g-brand-menu[hidden] {
    display: none;
}

.g-brand-menu-item,
.g-acct-item {
    display: flex;
    align-items: center;
    min-height: 44px;
    box-sizing: border-box;
    padding: 0 12px;
    border-radius: 7px;
    font-size: 0.88rem;
    font-weight: 500;
    color: var(--fc-ink-2);
    text-decoration: none;
    white-space: nowrap;
}

.g-brand-menu-item:hover,
.g-brand-menu-item:focus,
.g-acct-item:hover,
.g-acct-item:focus {
    background: var(--fc-line-soft);
    color: var(--fc-ink);
}

/* --- the Account menu (a signed-in student's bar) ------------------------- */

.g-acct-wrap {
    position: relative;
}

.g-acct-button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 0 6px;
    font: inherit;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--fc-soft);
    background: none;
    border: none;
    cursor: pointer;
}

.g-acct-button:hover {
    color: var(--fc-ink);
}

/* The student's initial in a circle: the account control people already
   know. The word beside it says what it is wherever there is room for it. */
.g-acct-initial {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--fc-ink);
    color: var(--fc-gold);
    font-family: var(--fc-head);
    font-size: 0.85rem;
    font-weight: 800;
}

.g-acct-button[aria-expanded="true"] .g-acct-initial {
    box-shadow: 0 0 0 3px var(--fc-gold-soft);
}

.g-acct-menu {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 200;
    min-width: 200px;
    padding: 6px;
    background: var(--fc-card);
    border: 1px solid var(--fc-line);
    border-radius: 12px;
    box-shadow: var(--fc-shadow-lg);
}

/* ⛔ Born hidden, and a `display` on the class would defeat the attribute. */
.g-acct-menu[hidden] {
    display: none;
}

.g-acct-who {
    display: block;
    max-width: 240px;
    padding: 6px 12px 8px;
    margin-bottom: 4px;
    border-bottom: 1px solid var(--fc-line-soft);
    font-size: 0.78rem;
    color: var(--fc-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.g-acct-item[aria-current="page"] {
    font-weight: 700;
    color: var(--fc-ink);
    box-shadow: inset 3px 0 0 var(--fc-gold);
}

/* The wordmark in the brand's heading face, the tag in tracked uppercase:
   the free class page's lockup (.fc-brand-name / .fc-brand-tag). */
.g-brand-name {
    font-family: var(--fc-head);
    font-size: 1.05rem;
    font-weight: 800;
    letter-spacing: -0.2px;
    color: var(--fc-ink);
}

.g-brand-sub {
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: var(--fc-muted);
}

.g-topbar-links {
    display: flex;
    align-items: center;
    gap: 20px;
}

.g-topbar-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    min-height: 44px;
    min-width: 44px;
    padding: 0 4px;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--fc-soft);
    text-decoration: none;
}

.g-topbar-link:hover {
    color: var(--fc-ink);
}

/* Where am I: the page you are on reads as chosen, underlined in the gold. */
.g-topbar-link[aria-current="page"] {
    color: var(--fc-ink);
    font-weight: 700;
    text-decoration: underline;
    text-decoration-color: var(--fc-gold);
    text-decoration-thickness: 3px;
    text-underline-offset: 6px;
}

/* The one action in the bar: the brand's primary button (.fc-btn-primary),
   gold with ink words. */
.g-topbar-signin {
    font: inherit;
    font-family: var(--fc-head);
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 0.3px;
    color: var(--fc-ink);
    background: var(--fc-gold);
    border: none;
    border-radius: 10px;
    min-height: 44px;
    padding: 0 18px;
    cursor: pointer;
    box-shadow: 0 6px 18px rgba(253, 204, 5, 0.35);
    transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.g-topbar-signin:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 24px rgba(253, 204, 5, 0.45);
}

/* Footer: names the business on every page (Twilio 30506, the end business
   must be obvious), and links every legal page. The ink block the class
   page closes on. */
.g-footer {
    background: var(--fc-ink);
    color: rgba(255, 255, 255, 0.6);
    padding: 32px 24px;
}

.g-footer-inner {
    max-width: 1100px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.g-footer-brand {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.g-footer-name {
    font-family: var(--fc-head);
    font-size: 0.95rem;
    font-weight: 800;
    color: #fff;
}

.g-footer-llc {
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.6);
}

.g-footer-links {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.g-footer-links a {
    font-size: 0.82rem;
    color: rgba(255, 255, 255, 0.72);
    text-decoration: none;
}

.g-footer-links a:hover {
    color: var(--fc-gold);
}

.g-footer-copy {
    width: 100%;
    margin: 0;
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.45);
}


/* === modules/classroom/static/css/classroom-library-base.css === */

/* THE RECORDINGS LIBRARY on the GED and teachers sites (classroom upgrade
   step 13) — BASE, no media query. A dashboard: the document never scrolls,
   the list region does. Every token sits on :root so the dialogs, which
   render outside the page element, keep them. The site's own chrome (the
   GED topbar and footer, the teachers header) keeps its own styles; this
   file styles only .cls-lib-* and the page lock. */

:root {
    --cls-lib-ink: #0f172a;
    --cls-lib-muted: #64748b;
    --cls-lib-line: #e2e8f0;
    --cls-lib-bg: #f8fafc;
    --cls-lib-card: #ffffff;
    --cls-lib-gold: #fdcc05;
    --cls-lib-gold-ink: #7c5a00;
    --cls-lib-green: #16a34a;
    --cls-lib-green-bg: #dcfce7;
    --cls-lib-blue: #1e40af;
    --cls-lib-radius: 14px;
}

/* THE LOCK: the page is exactly the viewport; only the list scrolls. */
html.cls-library-doc,
body.cls-library-page {
    height: 100%;
    overflow: hidden;
}

body.cls-library-page {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    color: var(--cls-lib-ink);
    background: var(--cls-lib-bg);
}

.cls-library {
    height: 100dvh;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

/* The GED shell's .g-page sets min-height: 100vh; the library's own height wins. */
.cls-library.g-page {
    min-height: 0;
}

.cls-lib-main {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    padding: 20px 24px 16px;
    box-sizing: border-box;
}

.cls-lib-head {
    flex: 0 0 auto;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--cls-lib-line);
}

.cls-lib-title {
    margin: 0;
    font-size: 1.6rem;
    font-weight: 800;
    letter-spacing: -0.3px;
}

.cls-lib-sub {
    margin: 4px 0 0;
    font-size: 0.92rem;
    color: var(--cls-lib-muted);
}

.cls-lib-count {
    margin: 0;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--cls-lib-muted);
    white-space: nowrap;
}

/* THE ONE REGION THAT SCROLLS */
.cls-lib-list {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 14px 0 8px;
}

.cls-lib-empty {
    margin: 24px 0;
    color: var(--cls-lib-muted);
}

/* The ways out on the teachers library (2026-10-05): home, and the live
   class. The GED page has its own topbar and shows none. */
.cls-lib-ways {
    flex: 0 0 auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin: 0 0 14px;
}
.cls-lib-way {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    padding: 0 14px;
    border-radius: 999px;
    border: 1px solid var(--cls-lib-line);
    background: #fff;
    color: inherit;
    font-size: 0.9rem;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}
.cls-lib-way.is-live { background: #fdcc05; border-color: #fdcc05; color: #1a202c; }
.cls-lib-empty-link { display: inline-block; margin-top: 8px; font-weight: 700; color: #b8860b; text-decoration: none; }

.cls-lib-group {
    margin-bottom: 18px;
}

.cls-lib-group-head {
    display: flex;
    align-items: baseline;
    gap: 12px;
    margin: 0 0 8px;
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--cls-lib-muted);
}

.cls-lib-group-note {
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    color: var(--cls-lib-gold-ink);
}

.cls-lib-group-free .cls-lib-group-month {
    color: var(--cls-lib-gold-ink);
}

/* A ROW */
.cls-lib-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 12px 16px;
    margin-bottom: 8px;
    background: var(--cls-lib-card);
    border: 1px solid var(--cls-lib-line);
    border-radius: var(--cls-lib-radius);
    color: inherit;
    text-decoration: none;
    cursor: pointer;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.cls-lib-row:hover,
.cls-lib-row:focus-visible {
    border-color: var(--cls-lib-blue);
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.06);
    outline: none;
}

.cls-lib-row.is-locked {
    background: #fbfcfd;
}

.cls-lib-row-main {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.cls-lib-row-title {
    font-weight: 700;
    font-size: 1rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cls-lib-row.is-locked .cls-lib-row-title {
    color: var(--cls-lib-muted);
}

.cls-lib-row-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    font-size: 0.82rem;
    color: var(--cls-lib-muted);
}

.cls-lib-row-badges {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
}

.cls-lib-badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 9px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.3px;
    white-space: nowrap;
}

.cls-lib-badge-a {
    background: #fff7d6;
    color: var(--cls-lib-gold-ink);
}

.cls-lib-badge-b {
    background: var(--cls-lib-green-bg);
    color: #166534;
}

.cls-lib-badge-free {
    background: var(--cls-lib-gold);
    color: var(--cls-lib-ink);
}

.cls-lib-badge-short {
    display: none;
}

.cls-lib-lock {
    display: inline-flex;
    width: 26px;
    height: 26px;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: #eef2f7;
    color: var(--cls-lib-muted);
}

.cls-lib-lock svg {
    width: 15px;
    height: 15px;
}

/* THE DIALOGS: the chooser and the lock, outside the page element. */
.cls-lib-overlay {
    position: fixed;
    inset: 0;
    z-index: 300;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(15, 23, 42, 0.55);
}

.cls-lib-overlay[hidden] {
    display: none;
}

body.cls-lib-modal-open {
    overflow: hidden;
}

.cls-lib-dialog {
    position: relative;
    width: 100%;
    max-width: 460px;
    max-height: calc(100dvh - 32px);
    overflow-y: auto;
    padding: 24px 22px 22px;
    background: var(--cls-lib-card);
    border-radius: 18px;
    box-shadow: 0 20px 50px rgba(15, 23, 42, 0.25);
    box-sizing: border-box;
}

.cls-lib-dialog-close {
    position: absolute;
    top: 10px;
    right: 12px;
    border: none;
    background: none;
    font-size: 1.6rem;
    line-height: 1;
    color: var(--cls-lib-muted);
    cursor: pointer;
}

.cls-lib-dialog-kicker {
    margin: 0 0 4px;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--cls-lib-gold-ink);
}

.cls-lib-dialog-title {
    margin: 0 0 12px;
    font-size: 1.2rem;
    font-weight: 800;
    letter-spacing: -0.2px;
}

.cls-lib-dialog-text {
    margin: 0 0 14px;
    color: var(--cls-lib-muted);
    font-size: 0.95rem;
}

.cls-lib-options {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.cls-lib-option {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 14px 16px;
    border: 1px solid var(--cls-lib-line);
    border-radius: 12px;
    color: inherit;
    text-decoration: none;
}

.cls-lib-option:hover {
    border-color: var(--cls-lib-blue);
}

.cls-lib-option-name {
    font-weight: 800;
}

.cls-lib-option-desc {
    font-size: 0.85rem;
    color: var(--cls-lib-muted);
}

.cls-lib-plans {
    list-style: none;
    margin: 0 0 14px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.cls-lib-plan {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 9px 12px;
    border: 1px solid var(--cls-lib-line);
    border-radius: 10px;
    font-size: 0.9rem;
}

.cls-lib-plan.is-highlight {
    border-color: var(--cls-lib-gold);
    background: #fffbeb;
}

.cls-lib-cta {
    display: block;
    padding: 12px 16px;
    border-radius: 10px;
    background: var(--cls-lib-ink);
    color: #fff;
    font-weight: 800;
    text-align: center;
    text-decoration: none;
}

.cls-lib-fine {
    margin: 10px 0 0;
    font-size: 0.8rem;
    color: var(--cls-lib-muted);
    text-align: center;
}


/* === recordings-base.css === */

/* THE RECORDINGS LIBRARY on the GED site — BASE (no media query), after the
   library's own base (modules/classroom/static/css/classroom-library-base.css,
   shared with the teachers site). The Classroom brand's faces reach the
   library here, on this site only (2026-10-11): Inter for the page, Space
   Grotesk for its headings, prices and buttons, the gold rule on the row a
   student can open free. Words and markup unchanged (`test brand`). */

body.cls-library-page[data-site="ged"] {
    font-family: var(--fc-body);
    color: var(--fc-ink-2);
    background:
        radial-gradient(900px 420px at 12% -140px, rgba(59, 130, 246, 0.10) 0%, transparent 60%),
        radial-gradient(900px 480px at 88% -180px, rgba(253, 204, 5, 0.14) 0%, transparent 60%),
        var(--fc-bg);
}

[data-site="ged"] .cls-lib-title,
[data-site="ged"] .cls-lib-dialog-title {
    font-family: var(--fc-head);
    font-weight: 800;
    letter-spacing: -0.5px;
    color: var(--fc-ink);
}

[data-site="ged"] .cls-lib-group-month,
[data-site="ged"] .cls-lib-dialog-kicker,
[data-site="ged"] .cls-lib-count {
    font-family: var(--fc-head);
}

[data-site="ged"] .cls-lib-row-title,
[data-site="ged"] .cls-lib-option-name,
[data-site="ged"] .cls-lib-plan strong {
    font-family: var(--fc-head);
    font-weight: 700;
}

[data-site="ged"] .cls-lib-cta {
    font-family: var(--fc-head);
    letter-spacing: 0.3px;
}

[data-site="ged"] .cls-lib-group-free .cls-lib-row {
    border-left: 4px solid var(--fc-gold);
}


/* === shell-desktop.css === */

/* GED page shell — DESKTOP (the default tier; the base describes it). */


/* === modules/classroom/static/css/classroom-library-desktop.css === */

/* THE RECORDINGS LIBRARY — DESKTOP (1025 and up). The row keeps its badges
   on one line; a short laptop (1280x720) still fits: the header stays one
   row and the list takes the rest. */
@media (min-width: 1025px) {
    .cls-lib-main {
        padding: 24px 24px 18px;
    }

    .cls-lib-row {
        padding: 14px 18px;
    }
}

/* A short desktop viewport: tighter header so more rows show. */
@media (min-width: 1025px) and (max-height: 760px) {
    .cls-lib-main {
        padding: 14px 24px 12px;
    }

    .cls-lib-title {
        font-size: 1.3rem;
    }

    .cls-lib-head {
        padding-bottom: 10px;
    }
}


/* === recordings-desktop.css === */

/* THE RECORDINGS LIBRARY on the GED site — DESKTOP. Nothing beyond base;
   the file keeps the tier ladder complete. */
@media (min-width: 1025px) {
    [data-site="ged"] .cls-lib-title { font-size: 1.8rem; }
}


/* === shell-tablet.css === */

/* GED page shell — TABLET (769 to 1024). */
@media (max-width: 1024px) and (min-width: 769px) {
    .g-topbar {
        padding: 6px 20px;
    }

    .g-footer {
        padding: 28px 20px;
    }
}


/* === modules/classroom/static/css/classroom-library-tablet.css === */

/* THE RECORDINGS LIBRARY — TABLET (769 to 1024). The badges keep their full
   words; the header wraps when the count no longer fits beside the title. */
@media (max-width: 1024px) and (min-width: 769px) {
    .cls-lib-main {
        padding: 18px 20px 14px;
    }

    .cls-lib-head {
        flex-wrap: wrap;
    }

    .cls-lib-row {
        padding: 12px 14px;
    }
}


/* === recordings-tablet.css === */

/* THE RECORDINGS LIBRARY on the GED site — TABLET (769 to 1024). Nothing
   beyond base; the file keeps the tier ladder complete. */
@media (max-width: 1024px) and (min-width: 769px) {
    [data-site="ged"] .cls-lib-title { font-size: 1.7rem; }
}


/* === shell-mobile.css === */

/* GED page shell — MOBILE PORTRAIT (<= 768). */
@media (max-width: 768px) and (orientation: portrait) {
    /* ⛔ THE TOPBAR IS ONE ROW. `flex-wrap` is still on as the last-resort
       escape — without it a tight viewport breaks through a word instead —
       but nothing here may be big enough to NEED it. It was wrapping onto two
       rows at 390px and 375px, which on a §10 locked page costs the content a
       whole row of permanent frame. Everything below is sized so the brand and
       the links fit beside each other on the narrowest screen served.
       Asserted, not eyeballed: contract SAME_ROW + the viewport suite. */
    .g-topbar {
        padding: 4px 10px;
    }

    /* Measured, not eyeballed (test topbar, 2026-10-04): the visitor's bar
       needed 365px of the 355px an iPhone SE leaves, so the spacing gives
       here while every control keeps its 44px target. */
    .g-topbar-inner {
        gap: 8px;
    }

    .g-topbar-links {
        gap: 6px;
    }

    .g-topbar-link {
        padding: 0 2px;
    }

    /* The initial alone on a phone: the circle is the account control people
       already know, and the button keeps its name ("Account menu") for a
       screen reader. Every other label in the bar stays visible. */
    .g-acct-label {
        display: none;
    }

    .g-brand {
        gap: 5px;
    }

    /* The d-mark costs real width on a 375px bar, and the bar has to stay one
       row. Smaller than its em default rather than dropped: the mark is the
       brand, and the wordmark beside it can afford to be the thing that gives. */
    .g-brand-mark {
        width: 1.35em;
        height: 1.35em;
    }

    .g-brand-name {
        font-size: 0.94rem;
    }

    .g-brand-sub {
        font-size: 0.62rem;
        letter-spacing: 0.06em;
    }

    .g-topbar-link,
    .g-topbar-signin {
        font-size: 0.82rem;
    }

    .g-topbar-signin {
        padding: 0 10px;
    }

    .g-footer {
        padding: 28px 16px;
    }

    .g-footer-inner {
        flex-direction: column;
        align-items: flex-start;
    }

    .g-footer-links {
        gap: 14px;
    }
}


/* === modules/classroom/static/css/classroom-library-mobile-portrait.css === */

/* THE RECORDINGS LIBRARY — MOBILE PORTRAIT (768 and under). The row stacks:
   the title and date above, the badges below in their short words; the
   header loses its subtitle so the list keeps the screen. */
@media (max-width: 768px) and (orientation: portrait) {
    .cls-lib-main {
        padding: 14px 16px 10px;
    }

    .cls-lib-head {
        align-items: baseline;
        padding-bottom: 10px;
    }

    .cls-lib-title {
        font-size: 1.3rem;
    }

    .cls-lib-sub {
        display: none;
    }

    .cls-lib-row {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
        padding: 12px 14px;
    }

    .cls-lib-row-title {
        white-space: normal;
    }

    .cls-lib-row-badges {
        flex-wrap: wrap;
    }

    .cls-lib-badge-full {
        display: none;
    }

    .cls-lib-badge-short {
        display: inline;
    }

    .cls-lib-group-head {
        flex-wrap: wrap;
        gap: 4px 12px;
    }

    .cls-lib-dialog {
        padding: 20px 16px 18px;
    }
}


/* === recordings-mobile.css === */

/* THE RECORDINGS LIBRARY on the GED site — MOBILE PORTRAIT (<= 768). */
@media (max-width: 768px) and (orientation: portrait) {
    [data-site="ged"] .cls-lib-group-free .cls-lib-row { border-left-width: 3px; }
}


/* === shell-landscape.css === */

/* GED page shell — MOBILE LANDSCAPE (<= 768, landscape). */
@media (max-width: 768px) and (orientation: landscape) {
    .g-topbar {
        padding: 4px 16px;
    }

    .g-footer {
        padding: 20px 16px;
    }

    .g-footer-inner {
        gap: 10px;
    }
}


/* === modules/classroom/static/css/classroom-library-mobile-landscape.css === */

/* THE RECORDINGS LIBRARY — MOBILE LANDSCAPE (768 and under, wide and short).
   Height is the constraint: a one-line header, short badge words, tight rows,
   and the dialogs scroll inside themselves. */
@media (max-width: 768px) and (orientation: landscape) {
    .cls-lib-main {
        padding: 8px 16px 6px;
    }

    .cls-lib-head {
        padding-bottom: 6px;
    }

    .cls-lib-title {
        font-size: 1.1rem;
    }

    .cls-lib-sub {
        display: none;
    }

    .cls-lib-list {
        padding: 8px 0 4px;
    }

    .cls-lib-row {
        padding: 8px 12px;
        margin-bottom: 6px;
    }

    .cls-lib-badge-full {
        display: none;
    }

    .cls-lib-badge-short {
        display: inline;
    }

    .cls-lib-dialog {
        max-height: calc(100dvh - 16px);
        padding: 14px 16px;
    }

    .cls-lib-dialog-title {
        font-size: 1rem;
        margin-bottom: 8px;
    }
}


/* === recordings-landscape.css === */

/* THE RECORDINGS LIBRARY on the GED site — MOBILE LANDSCAPE (<= 768,
   landscape). */
@media (max-width: 768px) and (orientation: landscape) {
    [data-site="ged"] .cls-lib-group-free .cls-lib-row { border-left-width: 3px; }
}