/* ============================================================
   BunkerSafe split design system — shared by BunkerSafe.Web and
   BunkerSafe.Training. Approved 2026-08-04:
     Main     = Deep Harbor header + Signal Gold keel line + banner strip
     Training = pastel green header (Green Portal)
   ============================================================ */

:root {
    /* Brand */
    --deep-harbor: #0B2D4D;
    --coastal-teal: #0FA3A6;
    --signal-gold: #D9A01B;
    --anchor-gray: #3C434C;
    --sea-white: #FFFFFF;

    /* Learner-stage accents (brief section 5). Sky Mist is a CARD accent, never a
       page-wide field — the learning stage canvas stays Sea White. */
    --sky-mist: #E9F2F7;
    --sea-foam: #E6F6F2;
    --coral-mist: #FBE7E7;

    /* Module pastels — background + matching ink */
    --pastel-green: #DDF2E4;
    --pastel-green-ink: #1E6B45;
    --pastel-blue: #DCEBF7;
    --pastel-blue-ink: #1F5C8B;
    --pastel-blue-2: #D3E4F2;
    --pastel-blue-2-ink: #164A73;
    --pastel-red: #F9E0E0;
    --pastel-red-ink: #9C3232;
    --pastel-gray: #E4E6E9;
    --pastel-gray-ink: #3C434C;
    --pastel-orange: #FBE9D4;
    --pastel-orange-ink: #A65E12;

    --page-bg: #F5F7FA;
    --radius: 12px;
    --shadow: 0 2px 10px rgba(11, 45, 77, .10);
}

body {
    margin: 0;
    background: var(--page-bg);
    color: var(--anchor-gray);
    font-family: 'Segoe UI', system-ui, sans-serif;
}

/* ---------- Top bar (main site: Deep Harbor + gold keel line) ---------- */
.bs-topbar {
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 10px 24px;
    background: var(--deep-harbor);
    border-bottom: 3px solid var(--signal-gold);
    box-shadow: var(--shadow);
}

.bs-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
}

    .bs-brand img {
        height: 44px;
        width: auto;
    }

/* The mark and the wordmark share one optical baseline; the subline hangs
   under the wordmark only, never centred under the whole lockup. */
.bs-brand-copy {
    display: flex;
    flex-direction: column;
    gap: 3px;
    line-height: 1;
}

.bs-wordmark {
    font-weight: 800;
    font-size: 1.3rem;
    letter-spacing: .03em;
    color: var(--sea-white);
}

.bs-brand small {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: .58rem;
    letter-spacing: .32em;
    font-weight: 600;
    color: rgba(255, 255, 255, .65);
    text-transform: uppercase;
}

    .bs-brand small::before,
    .bs-brand small::after {
        content: "";
        height: 1px;
        flex: 1;
        min-width: 12px;
        background: rgba(255, 255, 255, .4);
    }

.bs-nav {
    display: flex;
    gap: 18px;
    flex: 1;
}

    .bs-nav a {
        color: var(--sea-white);
        text-decoration: none;
        font-weight: 600;
        font-size: .9rem;
    }

        .bs-nav a:hover,
        .bs-nav a:focus-visible {
            color: var(--signal-gold);
        }

.bs-user,
.bs-user a {
    color: var(--sea-white);
    font-weight: 600;
    font-size: .9rem;
    white-space: nowrap;
    text-decoration: none;
}

/* Hamburger: CSS-only checkbox toggle. MainLayout and the top bar render
   statically, so @onclick would never be wired up — this must not need JS. */
.bs-nav-toggle {
    display: none;
}

.bs-hamburger {
    display: none;
    cursor: pointer;
    padding: 8px;
    margin-left: 4px;
    border-radius: 8px;
}

    .bs-hamburger:hover {
        background: rgba(255, 255, 255, .12);
    }

    .bs-hamburger svg {
        display: block;
        width: 26px;
        height: 26px;
        stroke: var(--sea-white);
        stroke-width: 2.4;
        stroke-linecap: round;
        fill: none;
    }

.bs-nav-toggle:focus-visible + .bs-nav ~ .bs-hamburger,
.bs-hamburger:focus-within {
    outline: 2px solid var(--signal-gold);
    outline-offset: 2px;
}

/* ---------- Top bar (training site: Green Portal) ---------- */
.bs-topbar.training {
    background: var(--pastel-green);
    border-bottom-color: var(--pastel-green-ink);
}

    .bs-topbar.training .bs-wordmark {
        color: var(--deep-harbor);
    }

    .bs-topbar.training .bs-brand small {
        color: #6B7683;
    }

        .bs-topbar.training .bs-brand small::before,
        .bs-topbar.training .bs-brand small::after {
            background: #9AA4AE;
        }

    .bs-topbar.training .bs-nav a {
        color: var(--deep-harbor);
    }

        .bs-topbar.training .bs-nav a:hover,
        .bs-topbar.training .bs-nav a:focus-visible {
            color: var(--pastel-green-ink);
        }

    .bs-topbar.training .bs-user,
    .bs-topbar.training .bs-user a {
        color: var(--deep-harbor);
    }

/* ---------- Banner strip (main site) ---------- */
.launcher-banner {
    background: var(--deep-harbor);
    color: var(--sea-white);
    padding: 18px 24px;
}

    .launcher-banner h1 {
        margin: 0;
        font-size: 1.4rem;
        letter-spacing: .04em;
        text-wrap: balance;
    }

/* ---------- Module card grid ---------- */
.launcher-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    max-width: 1200px;
    margin: 28px auto;
    padding: 0 20px;
}

.launcher-card {
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    border: none;
    padding: 22px;
    text-align: center;
    transition: transform .15s;
}

    .launcher-card:hover {
        transform: translateY(-3px);
    }

    .launcher-card h3 {
        margin: .5rem 0 .25rem;
        color: inherit;
    }

    .launcher-card p {
        font-size: .85rem;
        margin: 0 0 12px;
    }

    .launcher-card .launcher-glyph {
        width: 36px;
        height: 36px;
        stroke: currentColor;
        fill: none;
        stroke-width: 1.8;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

/* Painted bitmap glyphs, used where the design supplies one instead of a line icon. */
.launcher-icon {
    width: 64px;
    height: 64px;
    object-fit: contain;
}

.launcher-card--green { background: var(--pastel-green); color: var(--pastel-green-ink); }
.launcher-card--blue { background: var(--pastel-blue); color: var(--pastel-blue-ink); }
.launcher-card--blue-2 { background: var(--pastel-blue-2); color: var(--pastel-blue-2-ink); }
.launcher-card--red { background: var(--pastel-red); color: var(--pastel-red-ink); }
.launcher-card--gray { background: var(--pastel-gray); color: var(--pastel-gray-ink); }
.launcher-card--orange { background: var(--pastel-orange); color: var(--pastel-orange-ink); }

/* Card action — matches RadzenButton's footprint so the two can sit together. */
.launcher-btn {
    display: inline-block;
    background: var(--coastal-teal);
    color: var(--sea-white);
    border: none;
    border-radius: 8px;
    padding: 8px 18px;
    font-weight: 600;
    font-size: .85rem;
    font-family: inherit;
    text-decoration: none;
    cursor: pointer;
}

    .launcher-btn:hover {
        filter: brightness(.92);
        color: var(--sea-white);
    }

    .launcher-btn:focus-visible {
        outline: 2px solid var(--deep-harbor);
        outline-offset: 2px;
    }

/* ---------- Footer ---------- */
.bs-footer {
    text-align: center;
    padding: 18px;
    font-size: .8rem;
    color: var(--anchor-gray);
}

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
    .launcher-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .launcher-grid {
        grid-template-columns: 1fr;
    }

    .bs-topbar {
        flex-wrap: wrap;
        gap: 14px;
    }

    /* Main site collapses to the hamburger dropdown. */
    .bs-topbar:not(.training) .bs-hamburger {
        display: block;
    }

    .bs-topbar:not(.training) .bs-user {
        margin-left: auto;
    }

    /* flex:0 0 100% is load-bearing — .bs-nav carries flex:1 from the desktop
       rule, which would otherwise lay the dropdown out as a side column. */
    .bs-topbar:not(.training) .bs-nav {
        display: none;
        order: 4;
        flex: 0 0 100%;
        width: 100%;
        flex-direction: column;
        gap: 0;
        padding-top: 4px;
    }

        .bs-topbar:not(.training) .bs-nav a {
            padding: 12px 4px;
            border-top: 1px solid rgba(255, 255, 255, .14);
        }

    .bs-topbar:not(.training) .bs-nav-toggle:checked ~ .bs-nav {
        display: flex;
    }

    /* Training keeps the approved wrapped nav. */
    .bs-topbar.training .bs-nav {
        order: 3;
        width: 100%;
        flex-wrap: wrap;
        gap: 12px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .launcher-card {
        transition: none;
    }
}

/* ============================================================
   Training management pages, ported from the main application.
   Prefixed tm- so nothing collides with the launcher or top bar.
   ============================================================ */

.tm-page {
    /* Fluid up to a generous ceiling: 1200px left a wide strip of empty page on
       anything wider than a laptop while the grids inside still had to scroll
       horizontally for lack of room. This gives the grids the width first and
       only caps out once the row stops being comfortable to read. */
    width: 100%;
    max-width: 1800px;
    margin: 24px auto;
    padding: 0 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    box-sizing: border-box;
}

@media (max-width: 700px) {
    .tm-page { padding: 0 12px; margin: 16px auto; gap: 12px; }
}

.tm-page-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.tm-title {
    margin: 0;
    font-size: 1.5rem;
    color: var(--deep-harbor);
}

.tm-subtitle {
    margin: 4px 0 0;
    font-size: .85rem;
    color: #5A6B7D;
    max-width: 68ch;
}

.tm-panel {
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

/* Every RadzenHtmlEditor in the course creation area sets a fixed pixel height
   inline (style="height: 160px") for a sane starting size. The CSS `resize`
   property does not conflict with that: it lets the reader drag the box taller
   from wherever it currently renders, independent of who set the original
   height, so no !important fight with the inline style is needed. Radzen's own
   base rule sets overflow:hidden on this element, which also hides the resize
   handle in most browsers — switched to auto so the handle shows and any
   content that briefly exceeds the box scrolls instead of being clipped. */
.rz-html-editor {
    resize: vertical;
    overflow: auto;
}

.tm-panel-title {
    margin: 0;
    font-size: 1.05rem;
    color: var(--deep-harbor);
}

.tm-panel-sub {
    margin: 2px 0 14px;
    font-size: .82rem;
    color: #5A6B7D;
}

.tm-empty {
    padding: 24px;
    text-align: center;
    color: #5A6B7D;
    font-size: .88rem;
}

/* ---- Rank profile cards ---- */
.tm-rank-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.tm-rank-card {
    border: 1px solid #DCE3EA;
    border-radius: 10px;
    padding: 12px 14px;
    background: #FBFCFD;
}

.tm-rank-head {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.tm-rank-order {
    flex: none;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--deep-harbor);
    color: var(--sea-white);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .8rem;
    font-weight: 700;
}

.tm-rank-titles { flex: 1; min-width: 0; }

.tm-rank-name {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
    color: var(--deep-harbor);
}

.tm-rank-desc {
    font-size: .82rem;
    color: #5A6B7D;
    margin-top: 2px;
}

.tm-rank-actions {
    display: flex;
    gap: 2px;
    flex: none;
}

.tm-rank-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 10px 0 0 40px;
}

/* ---- Modal ---- */
.tm-modal-scrim {
    position: fixed;
    inset: 0;
    z-index: 1200;
    background: rgba(11, 45, 77, .45);
    display: flex;
    align-items: center;
    /* "safe" falls back to start-alignment once content is taller than the viewport.
       Plain center clips a tall dialog at BOTH ends: the browser centers it against
       its own natural height first, then has nowhere to scroll to reach whatever
       ran off the top. Two declarations on purpose — a browser that doesn't know
       "safe center" ignores the line and keeps plain center from the line above. */
    align-items: safe center;
    justify-content: center;
    padding: 20px;
    overflow-y: auto;
}

.tm-modal {
    width: 100%;
    max-width: 520px;
    background: var(--sea-white);
    /* The card is now self-limiting: it never exceeds the viewport, so centering it
       in the scrim can never clip it top or bottom — it grows a scrollbar of its own
       well before that happens. Padding is unchanged (--rz-card-padding, 20px) —
       everything between the title and the actions row keeps relying on it exactly
       as before; only the title and actions bar bleed out of it, below. */
    max-height: calc(100vh - 40px);
    overflow-y: auto;
    border-radius: var(--radius);
}

.tm-modal--wide { max-width: 640px; }

.tm-modal-title {
    /* Bleeds out of the card's own padding to form a full-width header bar, then
       sticks to the top of the card's OWN scroll area — not the page's — while
       the fields beneath scroll underneath it. Negative margin removes the gap
       the padding would otherwise leave above/beside it; "top: -20px" cancels
       that same padding so it lands flush against the border on scroll rather
       than stopping 20px short of it. */
    position: sticky;
    top: -20px;
    z-index: 2;
    margin: -20px -20px 14px;
    padding: 16px 24px;
    font-size: 1.1rem;
    color: var(--pastel-green-ink);
    background: var(--pastel-green);
    border-radius: var(--radius) var(--radius) 0 0;
}

.tm-modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    /* Sticks to the BOTTOM of the card's own scroll area for the same reason the
       title sticks to the top: a tall form's Save button must stay reachable
       without hunting for it below the fold. Mirrors the title's bleed/offset. */
    position: sticky;
    bottom: -20px;
    z-index: 2;
    margin: 18px -20px -20px;
    padding: 12px 24px 20px;
    background: var(--sea-white);
    border-top: 1px solid #E3E8ED;
}

/* The unhandled-error bar's stacking is fixed in MainLayout.razor.css, NOT here: the
   scoped copy of #blazor-error-ui compiles with a [b-hash] attribute and loads after
   this file, so a plain #blazor-error-ui rule here is outranked and silently loses.
   Measured, not assumed — the computed z-index stayed 1000 when it lived here.

   Toasts must outrank the modal scrim (z-index 1200 above). A failure raised while a
   dialog is open is precisely the case the toast exists for, so it cannot render behind
   the thing that caused it. */
.rz-notification {
    z-index: 1400;
}

/* ---- Validation ----
   ValidationSummary renders a <ul class="validation-message"> and per-field messages
   render as <div class="validation-errors">. Nothing styled either, so a blocked
   submit produced body-coloured text that read as decoration. */
.validation-message,
.validation-errors {
    margin: 8px 0 0;
    padding-left: 18px;
    color: var(--pastel-red-ink);
    font-size: .85rem;
    font-weight: 600;
}

.validation-message li,
.validation-errors li {
    margin-top: 2px;
}

/* ---- Form grid ---- */
.tm-form-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 12px;
}

.tm-col-2 { grid-column: span 2; }
.tm-col-3 { grid-column: span 3; }
.tm-col-4 { grid-column: span 4; }
.tm-col-6 { grid-column: span 6; }
.tm-col-8 { grid-column: span 8; }
.tm-col-12 { grid-column: span 12; }

.tm-label {
    display: block;
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #5A6B7D;
    margin-bottom: 4px;
}

.tm-input { width: 100%; }

.tm-check {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: .88rem;
}

/* ---- Module library / course builder additions ---- */
.tm-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    margin-bottom: 14px;
}

.tm-filters .tm-input { flex: 1 1 220px; width: auto; }
.tm-filters .tm-check { flex: 0 0 auto; }

.tm-grid { margin-top: 4px; }

.tm-link {
    color: var(--deep-harbor);
    font-weight: 600;
    text-decoration: none;
}

.tm-link:hover { text-decoration: underline; }

.tm-row-actions {
    display: flex;
    gap: 4px;
    align-items: center;
    flex-wrap: wrap;
}

/* Icon-only action rows inside a grid cell: never wrap. A grid row is a fixed height,
   so a wrapped second line of icons gets clipped by the row instead of growing it —
   that's the "icons scattered across two rows" look this fixes. */
.tm-row-actions--nowrap {
    flex-wrap: nowrap;
}

.tm-hint {
    font-size: .78rem;
    color: #6B7A89;
    margin: 4px 0;
}

.tm-badge-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 6px;
}

.tm-breadcrumb {
    display: flex;
    gap: 6px;
    align-items: center;
    font-size: .8rem;
    color: #6B7A89;
    margin-bottom: 4px;
}

.tm-breadcrumb a { color: var(--deep-harbor); text-decoration: none; }
.tm-breadcrumb a:hover { text-decoration: underline; }

/* ---- Metric strip (Courses) ---- */
.tm-metric-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
}

.tm-metric-label {
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: #6B7A89;
}

.tm-metric-value {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--deep-harbor);
}

/* ---- Builder two-column shell ---- */
.tm-builder-layout {
    display: grid;
    grid-template-columns: minmax(220px, 300px) 1fr;
    gap: 16px;
    align-items: start;
}

.tm-builder-layout--even { grid-template-columns: 1fr 1fr; }

.tm-lesson-list { display: flex; flex-direction: column; gap: 6px; }

.tm-lesson-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 8px 10px;
    border: 1px solid #DCE3EA;
    border-radius: 8px;
    background: var(--sea-white);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.tm-lesson-item:hover { border-color: var(--coastal-teal); }

.tm-lesson-item.is-current {
    border-color: var(--coastal-teal);
    box-shadow: inset 3px 0 0 var(--coastal-teal);
    background: #F2F9FA;
}

/* ---- Question bank rows ----
   Same skin as .tm-lesson-item, but the row carries its own action buttons, so the
   clickable area has to be an inner button: nesting the delete button inside a button
   is invalid HTML and the browser hoists it out of the row. */
.tm-question-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 8px;
    padding: 8px 10px;
    border: 1px solid #DCE3EA;
    border-radius: 8px;
    background: var(--sea-white);
}

.tm-question-row:hover { border-color: var(--coastal-teal); }

.tm-question-row.is-current {
    border-color: var(--coastal-teal);
    box-shadow: inset 3px 0 0 var(--coastal-teal);
    background: #F2F9FA;
}

.tm-question-row-main {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.tm-question-row-prompt {
    font-weight: 600;
    color: var(--deep-harbor);
}

/* The prompt is authored rich text, so it arrives wrapped in its own block elements —
   without this every row grows a paragraph's worth of margin and the list stops
   reading as a list. */
.tm-question-row-prompt > :first-child { margin-top: 0; }
.tm-question-row-prompt > :last-child { margin-bottom: 0; }

/* The editor renders inline, directly under the row it belongs to. The teal edge and the
   negative top margin tie it to that row so it reads as an expansion of it rather than as
   the next item in the list. */
.tm-question-editor {
    margin-top: -4px;
    border-color: var(--coastal-teal);
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    box-shadow: inset 3px 0 0 var(--coastal-teal);
    background: #FAFCFD;
}

/* ---- Stepper ---- */
.tm-stepper {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.tm-step {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border: 1px solid #DCE3EA;
    border-radius: 999px;
    background: var(--sea-white);
    font: inherit;
    cursor: pointer;
}

.tm-step-num {
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #E8EDF2;
    font-size: .78rem;
    font-weight: 700;
}

.tm-step.is-active { border-color: var(--signal-gold); }
.tm-step.is-active .tm-step-num { background: var(--signal-gold); color: var(--sea-white); }
.tm-step.is-done .tm-step-num { background: var(--pastel-green); color: var(--pastel-green-ink); }

/* ---- Sub-panels inside a panel ---- */
.tm-subpanel {
    border: 1px solid #E3E8ED;
    border-radius: 10px;
    padding: 12px;
    margin-bottom: 12px;
}

.tm-subpanel-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.tm-subpanel-title {
    margin: 0 0 10px;
    font-size: .95rem;
    color: var(--deep-harbor);
}

.tm-subpanel-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}

/* ---- Quiz question sub-panel: shaded so it reads apart from its answer options ---- */
.tm-subpanel--question {
    background: #E7ECF1;
    border-color: #D3DBE3;
}

.tm-subpanel--question > .tm-form-grid,
.tm-subpanel--question > .tm-subpanel {
    background: var(--sea-white);
}

.tm-subpanel-head--toggle {
    cursor: pointer;
    margin-bottom: 0;
}

.tm-subpanel--question > .tm-form-grid {
    border-radius: 8px;
    padding: 10px;
    margin-top: 8px;
}

.tm-subpanel-toggle-left {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.tm-subpanel-preview {
    color: #6B7A89;
    font-weight: 400;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tm-option-formatted-toggle {
    display: flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    margin-top: 8px;
}

.tm-thumb-preview {
    display: block;
    max-width: 100%;
    max-height: 160px;
    border-radius: 8px;
    margin: 8px 0;
}

.tm-video-preview { width: 100%; max-height: 320px; border-radius: 8px; }

/* ---- Library / course module cards ---- */
.tm-library-list { display: flex; flex-direction: column; gap: 8px; }

.tm-library-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid #E3E8ED;
    border-radius: 10px;
}

.tm-library-title { font-weight: 600; color: var(--deep-harbor); }
.tm-library-meta { font-size: .78rem; color: #6B7A89; }

/* ---- Lesson block accordion ---- */
.tm-block-list { display: flex; flex-direction: column; gap: 8px; }

.tm-block {
    border: 1px solid #E3E8ED;
    border-radius: 10px;
    overflow: hidden;
}

.tm-block.is-selected { border-color: var(--coastal-teal); }

.tm-block-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    background: #F7F9FB;
    cursor: pointer;
}

.tm-block-head-left { display: flex; align-items: center; gap: 8px; min-width: 0; }

.tm-block-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--anchor-gray); }
.tm-block-dot--card { background: var(--pastel-blue-ink); }
.tm-block-dot--video { background: var(--pastel-red-ink); }
.tm-block-dot--flashcard { background: var(--pastel-orange-ink); }
.tm-block-dot--quiz { background: var(--pastel-green-ink); }
.tm-block-dot--assessment { background: var(--signal-gold); }
.tm-block-dot--download { background: var(--pastel-gray-ink); }

.tm-block-order { font-weight: 700; color: #6B7A89; }
.tm-block-type { font-weight: 600; color: var(--deep-harbor); }
.tm-block-title { color: #6B7A89; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.tm-block-body { padding: 12px; }

.tm-option-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 6px 0;
}

.tm-option-row .tm-input { flex: 1 1 auto; }

.tm-add-block-row {
    display: flex;
    align-items: flex-end;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 12px;
}

.tm-add-block-row .tm-input { flex: 1 1 220px; width: auto; }

.tm-modal-actions--split { justify-content: space-between; }

.tm-modal--xwide { max-width: 1020px; }

/* ---- Rank matrix ---- */
.tm-matrix-wrap { overflow-x: auto; }

.tm-matrix { border-collapse: collapse; width: 100%; }

.tm-matrix th,
.tm-matrix td {
    border: 1px solid #E3E8ED;
    padding: 8px 10px;
    text-align: center;
    font-size: .85rem;
}

.tm-matrix th { background: #F7F9FB; color: var(--deep-harbor); }
.tm-matrix-rowhead { text-align: left; }

.tm-rank-config-list { display: flex; flex-direction: column; gap: 8px; }

.tm-rank-config-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border: 1px solid #E3E8ED;
    border-radius: 8px;
}

/* ---- Media upload (shared MediaUploadField) ---- */
.tm-upload-actions {
    display: flex;
    gap: 8px;
    margin-top: 10px;
    flex-wrap: wrap;
}

.tm-upload-progress {
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* ---- Media gallery (picker + library) ---- */
.tm-gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 12px;
    margin-top: 12px;
    max-height: 52vh;
    overflow-y: auto;
}

.tm-gallery-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 8px;
    background: #FFFFFF;
    border: 1px solid #E3E8ED;
    border-radius: 8px;
    cursor: pointer;
    text-align: left;
    font: inherit;
}

.tm-gallery-item:hover {
    border-color: var(--coastal-teal, #1C7C8C);
    box-shadow: 0 1px 4px rgba(11, 45, 77, .14);
}

.tm-gallery-item img {
    width: 100%;
    height: 96px;
    object-fit: cover;
    border-radius: 4px;
    background: #F4FAFB;
}

.tm-gallery-name {
    font-size: .82rem;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tm-gallery-meta {
    font-size: .74rem;
    opacity: .7;
}

.tm-gallery-pager {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: 12px;
}

.tm-gallery-item--used {
    border-left: 3px solid var(--coastal-teal, #1C7C8C);
}

.tm-sequence { margin: 0; padding-left: 20px; font-size: .88rem; }

.tm-lesson-editor { margin-bottom: 14px; }

.tm-panel--rail { align-self: start; }

.tm-rank-checklist {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 6px 14px;
    margin: 10px 0;
}

@media (max-width: 900px) {
    .tm-builder-layout,
    .tm-builder-layout--even,
    .tm-subpanel-row { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
    .tm-col-2, .tm-col-3, .tm-col-4, .tm-col-6, .tm-col-8 { grid-column: span 12; }
    .tm-rank-badges { margin-left: 0; }
}