/* ============================================================
   Admin Training Builder — PowerPoint-style editor.

     at-*  — editor chrome (rail, toolbar, canvas frame, handles).
     tc-*  — "training content": the slide/theme/block styles, written
             to be reused by the cashier viewer so build == play.

   Slides are a fixed 16:9 stage that scales to fit. Blocks are placed
   free-form (absolute, percentage coords) and text scales with the stage
   via container-query units (cqw), so a desktop-authored layout still
   holds together on a cashier's phone.

   Fonts match the existing training modules: titles/headings in
   --tv-serif (Fraunces), body in --tv-sans (Inter); both tokens are
   defined on :root in layout.css.
   ============================================================ */

/* ── Top bar (module title + actions) ─────────────────────────── */
.at-topbar { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.at-title-input {
    flex: 1; min-width: 200px;
    font-family: var(--tv-serif, 'Fraunces', serif); font-size: 1.2rem; font-weight: 600;
    padding: 8px 12px; border: 1px solid var(--border-color, #d9dee5);
    border-radius: 8px; background: var(--card-bg, #fff); color: inherit;
}
.at-topbar-actions { display: flex; gap: 8px; flex-shrink: 0; }

/* ── Settings panel ───────────────────────────────────────────── */
.at-settings {
    border: 1px solid var(--border-color, #d9dee5); border-radius: 10px;
    padding: 14px 16px; margin-bottom: 14px; background: var(--card-bg, #fafbfc);
}
.at-settings .ar-field { margin-bottom: 10px; }

/* ── Editor: rail + main ──────────────────────────────────────── */
.at-editor {
    display: flex; gap: 16px; align-items: stretch;
    height: 72vh; min-height: 480px;
    border: 1px solid var(--border-color, #d9dee5); border-radius: 12px;
    overflow: hidden; background: var(--card-bg, #fff);
}

/* Slide thumbnail rail */
.at-rail {
    width: 184px; flex-shrink: 0; display: flex; flex-direction: column;
    border-right: 1px solid var(--border-color, #e6e9ee); background: var(--bg-muted, #f7f8fa);
}
.at-rail-thumbs { flex: 1; overflow-y: auto; padding: 12px; display: flex; flex-direction: column; gap: 10px; align-items: center; }
.at-rail-add { padding: 10px 12px; border-top: 1px solid var(--border-color, #e6e9ee); }
.at-rail-add .btn { width: 100%; }

.at-thumb {
    position: relative; width: 152px; height: 86px; flex-shrink: 0;
    border: 1px solid var(--border-color, #d9dee5); border-radius: 8px;
    overflow: hidden; cursor: pointer; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.05);
}
.at-thumb.is-active { outline: 3px solid var(--tv-accent, #00a88f); border-color: transparent; }
.at-thumb.is-dragover { outline: 2px dashed var(--tv-accent, #00a88f); }
.at-thumb-num {
    position: absolute; top: 4px; left: 4px; z-index: 3;
    font-size: .65rem; font-weight: 700; line-height: 1;
    background: rgba(0,0,0,.55); color: #fff; padding: 2px 5px; border-radius: 4px;
}
.at-thumb-flag {
    position: absolute; bottom: 4px; left: 4px; z-index: 3;
    font-size: .58rem; font-weight: 700; letter-spacing: .04em;
    background: var(--tv-amber, #e07b2a); color: #fff; padding: 2px 5px; border-radius: 4px;
}
.at-thumb-del {
    position: absolute; top: 3px; right: 3px; z-index: 3;
    border: none; background: rgba(0,0,0,.45); color: #fff;
    width: 18px; height: 18px; line-height: 16px; border-radius: 4px;
    cursor: pointer; font-size: .8rem; padding: 0; display: none;
}
.at-thumb:hover .at-thumb-del { display: block; }
/* Scaled, read-only render of the slide. */
.at-thumb-canvas {
    width: 760px; transform: scale(0.2); transform-origin: top left;
    pointer-events: none; position: absolute; top: 0; left: 0;
}

/* Main editing area */
.at-main { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.at-toolbar {
    display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
    padding: 10px 12px; border-bottom: 1px solid var(--border-color, #e6e9ee); background: var(--card-bg, #fff);
}
.at-tool {
    border: 1px solid var(--border-color, #d9dee5); background: var(--card-bg, #fff);
    color: inherit; border-radius: 6px; padding: 6px 10px; cursor: pointer;
    font-size: .85rem; font-weight: 500; white-space: nowrap;
}
.at-tool:hover { background: var(--bg-muted, #f0f2f5); }
.at-tool-sep { width: 1px; align-self: stretch; background: var(--border-color, #e0e4ea); margin: 2px 4px; }
.at-toolbar label { font-size: .8rem; display: inline-flex; align-items: center; gap: 6px; }
.at-theme-select { padding: 5px 8px; border: 1px solid var(--border-color, #d9dee5); border-radius: 6px; background: var(--card-bg, #fff); color: inherit; }
.at-hint { font-size: .75rem; opacity: .6; margin-left: auto; }

/* Canvas frame */
.at-canvas-wrap {
    flex: 1; overflow: auto; padding: 28px;
    display: flex; justify-content: center; align-items: flex-start; background: var(--bg-muted, #eef0f3);
}
.at-canvas { width: 100%; max-width: 880px; }

/* ── tc-*: the slide (shared with the viewer later) ───────────── */
.tc-slide {
    position: relative; width: 100%; aspect-ratio: 16 / 9;
    border-radius: 14px; box-shadow: 0 6px 24px rgba(0,0,0,.10); overflow: hidden;
    container-type: inline-size;            /* enables cqw sizing below */
    font-family: var(--tv-sans, 'Inter', system-ui, sans-serif);
}
.tc-light { background: var(--tv-card, #fbf7ee); color: var(--tv-ink, #1a2a4a); }
.tc-dark  { background: #15233a; color: #eef3fb; }
.tc-hero  { background: linear-gradient(135deg, #10243f 0%, #1a3a64 100%); color: #ffffff; }

/* Block placement wrapper (absolute, percentage-driven via inline style). */
.at-block { position: absolute; box-sizing: border-box; cursor: move; user-select: none; -webkit-user-select: none; }
.at-block.is-selected { outline: 2px solid var(--tv-accent, #00a88f); outline-offset: 1px; }
.at-block.is-editing { cursor: text; user-select: text; -webkit-user-select: text; }
/* Images shouldn't start a native drag or swallow the move gesture. */
.at-block .tc-image img { pointer-events: none; -webkit-user-drag: none; user-drag: none; }
.at-block-ctrls { position: absolute; top: -13px; right: -2px; z-index: 6; display: none; gap: 3px; }
.at-block.is-selected .at-block-ctrls { display: flex; }
.at-block-ctrls button {
    border: none; background: var(--tv-accent, #00a88f); color: #fff;
    width: 22px; height: 22px; border-radius: 5px; cursor: pointer;
    font-size: .75rem; line-height: 1; padding: 0; box-shadow: 0 1px 3px rgba(0,0,0,.25);
}
.at-handle {
    position: absolute; right: -6px; bottom: -6px; width: 13px; height: 13px; z-index: 6;
    background: var(--tv-accent, #00a88f); border: 2px solid #fff; border-radius: 3px;
    cursor: nwse-resize; display: none;
}
.at-block.is-selected .at-handle { display: block; }

/* Block typography — sizes in cqw so they scale with the slide. */
.tc-title {
    font-family: var(--tv-serif, 'Fraunces', serif); font-weight: 600;
    letter-spacing: -0.025em; line-height: 1.08; margin: 0;
    font-size: 40px; font-size: 5.2cqw;
}
.tc-heading {
    font-family: var(--tv-serif, 'Fraunces', serif); font-weight: 600;
    letter-spacing: -0.02em; line-height: 1.12; margin: 0;
    font-size: 28px; font-size: 3.6cqw;
}
.tc-paragraph { line-height: 1.5; margin: 0; font-size: 19px; font-size: 2.5cqw; }
.tc-textbox {
    border-left: 0.5cqw solid var(--tv-accent, #00a88f); padding: 0.9cqw 1.2cqw; margin: 0;
    background: rgba(0,0,0,.05); border-radius: 8px; line-height: 1.45;
    font-size: 19px; font-size: 2.5cqw;
}
.tc-dark .tc-textbox, .tc-hero .tc-textbox { background: rgba(255,255,255,.12); }
.tc-bullets { margin: 0; padding-left: 1.4em; }
.tc-bullet { line-height: 1.45; margin: 0.25em 0; font-size: 19px; font-size: 2.5cqw; }
.tc-bullets-edit { white-space: pre-wrap; line-height: 1.45; font-size: 19px; font-size: 2.5cqw; outline: none; }
.tc-image { margin: 0; }
.tc-image img { width: 100%; height: auto; display: block; border-radius: 8px; }
.tc-caption { font-size: 13px; font-size: 1.7cqw; opacity: .72; margin-top: .3em; font-style: italic; }

/* Inline-edit affordances (builder only). Placeholders show only on the
   live canvas, never in the read-only thumbnails. */
.tc-editable { outline: none; }
#atCanvas [data-placeholder]:empty::before { content: attr(data-placeholder); opacity: .4; }

/* Image upload placeholder. */
.tc-image-empty {
    border: 2px dashed currentColor; border-radius: 10px; padding: 1.6cqw; text-align: center;
    opacity: .65; cursor: pointer; font-size: 2cqw;
}
.tc-image-empty:hover { opacity: 1; }

/* ── Library (All modules) ────────────────────────────────────── */
.at-lib-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; gap: 12px; }
.at-module-rows { list-style: none; margin: 0; padding: 0; }
.at-module-row {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 12px 14px; border: 1px solid var(--border-color, #e6e9ee);
    border-radius: 10px; margin-bottom: 8px; background: var(--card-bg, #fff);
}
.at-module-meta { font-size: .82rem; opacity: .7; margin-top: 3px; }
.at-module-row-actions { display: flex; gap: 6px; flex-shrink: 0; }
.at-badge { font-size: .7rem; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: var(--bg-muted, #eef0f3); }
.at-badge-live { background: #d6f5e0; color: #0a7c3e; }
.at-badge-muted { background: #eceff3; color: #6b7280; }

/* ── Add-slide menu (slide type chooser) ──────────────────────── */
.at-rail-add { position: relative; }
.at-add-menu {
    position: absolute; bottom: calc(100% + 6px); left: 12px; right: 12px; z-index: 20;
    background: var(--card-bg, #fff); border: 1px solid var(--border-color, #d9dee5);
    border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,.16); padding: 6px;
    display: flex; flex-direction: column; gap: 2px;
}
.at-add-menu button {
    text-align: left; border: none; background: none; padding: 8px 10px;
    border-radius: 6px; cursor: pointer; font-size: .85rem; color: inherit;
}
.at-add-menu button:hover { background: var(--bg-muted, #f0f2f5); }

/* ── Question slide editor ────────────────────────────────────── */
.at-flag-badge {
    font-size: .62rem; font-weight: 700; letter-spacing: .06em;
    background: var(--tv-amber, #e07b2a); color: #fff; padding: 3px 9px; border-radius: 999px;
}
.at-qtype-label { font-family: var(--tv-serif, 'Fraunces', serif); font-weight: 600; font-size: 1rem; }

.at-q-wrap { flex: 1; overflow-y: auto; padding: 22px; background: var(--bg-muted, #eef0f3); }
.atq-card {
    max-width: 740px; margin: 0 auto; background: var(--card-bg, #fff);
    border: 1px solid var(--border-color, #e6e9ee); border-radius: 12px; padding: 20px 22px;
}
.atq-field { display: block; margin-bottom: 14px; }
.atq-label { display: block; font-size: .8rem; font-weight: 600; margin-bottom: 5px; opacity: .85; }
.atq-points { width: 130px; }
.atq-section-title { font-weight: 600; font-size: .9rem; margin: 18px 0 8px; }
.atq-hint { font-size: .78rem; opacity: .65; margin-top: 4px; }

.atq-opt { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.atq-opt .ar-input { flex: 1; }
.atq-correct { display: inline-flex; align-items: center; gap: 5px; font-size: .78rem; white-space: nowrap; }
.atq-remove { border: none; background: #f3d6d6; color: #a1221f; width: 28px; height: 28px; border-radius: 6px; cursor: pointer; flex-shrink: 0; font-size: .9rem; }
.atq-remove:hover { background: #ecc2c2; }
.atq-add { margin-top: 6px; }

.atq-tf { display: flex; gap: 10px; }
.atq-tf label { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--border-color, #d9dee5); border-radius: 8px; padding: 8px 16px; cursor: pointer; }

.atq-zone, .atq-item { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.atq-zone .ar-input, .atq-item .atq-item-text { flex: 1; }
.atq-itemzone { width: 170px; flex-shrink: 0; }
.atq-itembtn { border: 1px solid var(--border-color, #d9dee5); background: var(--card-bg, #fff); border-radius: 6px; padding: 6px 8px; cursor: pointer; font-size: .8rem; flex-shrink: 0; }
.atq-itemthumb { width: 34px; height: 34px; object-fit: cover; border-radius: 6px; flex-shrink: 0; }

.atq-img img { max-height: 130px; border-radius: 8px; display: block; margin-bottom: 6px; }

/* Question thumbnails in the rail. */
.at-thumb-q {
    position: absolute; inset: 0; padding: 9px 9px 7px; display: flex; flex-direction: column; gap: 4px;
    background: var(--tv-card, #fbf7ee); font-family: var(--tv-sans, 'Inter', sans-serif);
}
.at-thumb-q-prompt { font-size: .7rem; line-height: 1.2; color: var(--tv-ink, #1a2a4a); overflow: hidden; flex: 1; }
.at-thumb-q-type { font-size: .56rem; font-weight: 700; letter-spacing: .04em; color: var(--tv-ink-3, #6b6258); text-transform: uppercase; }

/* ── Small-screen fallback ────────────────────────────────────── */
@media (max-width: 820px) {
    .at-editor { flex-direction: column; height: auto; }
    .at-rail { width: auto; border-right: none; border-bottom: 1px solid var(--border-color, #e6e9ee); }
    .at-rail-thumbs { flex-direction: row; overflow-x: auto; }
    .at-canvas-wrap { padding: 12px; }
}

/* ============================================================
   Authored-module player (cashier-facing). Chrome = ap-*; slide
   content reuses tc-*. Uses the training viewer's --tv-* tokens.
   ============================================================ */
.ap-overlay {
    position: fixed; inset: 0; z-index: 4000; display: flex; align-items: center; justify-content: center;
    background: rgba(15, 20, 30, .55); padding: 16px; overflow: auto;
}
.ap-card {
    width: 100%; max-width: 860px; max-height: 96vh; display: flex; flex-direction: column;
    background: var(--tv-paper, #f2ebe0); border-radius: 16px; overflow: hidden;
    box-shadow: 0 18px 60px rgba(0,0,0,.4); font-family: var(--tv-sans, 'Inter', sans-serif);
}
.ap-header {
    display: flex; align-items: center; gap: 12px; padding: 12px 16px;
    background: #fff; border-bottom: 1px solid var(--tv-rule-2, #e2d8c4);
}
.ap-worth { font-size: .72rem; font-weight: 700; color: #fff; background: var(--tv-amber, #e07b2a); padding: 3px 9px; border-radius: 999px; white-space: nowrap; }
.ap-title { flex: 1; text-align: center; font-family: var(--tv-serif, 'Fraunces', serif); font-style: italic; font-weight: 600; color: var(--tv-ink, #1a2a4a); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ap-exit { border: none; background: none; font-size: 1.1rem; cursor: pointer; color: var(--tv-ink-3, #6b6258); padding: 4px 8px; border-radius: 6px; }
.ap-exit:hover { background: var(--tv-paper-2, #e8e0d2); }
.ap-progress { height: 4px; background: var(--tv-paper-2, #e8e0d2); }
.ap-progress-fill { height: 100%; width: 0; background: var(--tv-accent, #00a88f); transition: width .25s ease; }
.ap-stage { flex: 1; overflow-y: auto; padding: 24px; display: flex; justify-content: center; }
.ap-slide { align-self: flex-start; max-width: 760px; }
.ap-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; background: #fff; border-top: 1px solid var(--tv-rule-2, #e2d8c4); }
.ap-count { font-size: .85rem; color: var(--tv-ink-3, #6b6258); }

/* Question layout */
.ap-q { width: 100%; max-width: 640px; }
.ap-q-prompt { font-family: var(--tv-serif, 'Fraunces', serif); font-size: 1.5rem; font-weight: 600; color: var(--tv-ink, #1a2a4a); line-height: 1.2; margin-bottom: 16px; }
.ap-q-image { margin-bottom: 16px; text-align: center; }
.ap-q-image img { max-width: 100%; max-height: 260px; border-radius: 10px; }
.ap-options { display: flex; flex-direction: column; gap: 10px; }
.ap-tf { flex-direction: row; }
.ap-tf .ap-opt { flex: 1; text-align: center; }
.ap-opt {
    border: 2px solid var(--tv-rule, #d4c9b3); background: #fff; color: var(--tv-ink, #1a2a4a);
    border-radius: 12px; padding: 14px 16px; font-size: 1rem; cursor: pointer; text-align: left; transition: border-color .15s, background .15s;
}
.ap-opt:hover { border-color: var(--tv-accent, #00a88f); }
.ap-opt.is-chosen { border-color: var(--tv-accent, #00a88f); background: rgba(0,168,143,.10); font-weight: 600; }

/* Drag-drop (tap to assign) */
.ap-dd-pool { display: flex; flex-wrap: wrap; gap: 8px; min-height: 44px; padding: 10px; border: 2px dashed var(--tv-rule, #d4c9b3); border-radius: 10px; margin-bottom: 14px; }
.ap-dd-empty { color: var(--tv-ink-3, #6b6258); font-size: .9rem; }
.ap-dd-zones { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.ap-zone { border: 2px solid var(--tv-rule, #d4c9b3); border-radius: 10px; padding: 10px; background: #fff; min-height: 90px; }
.ap-zone-label { font-weight: 700; font-size: .85rem; color: var(--tv-ink, #1a2a4a); margin-bottom: 8px; text-align: center; }
.ap-zone-items { display: flex; flex-wrap: wrap; gap: 6px; }
.ap-chip {
    display: inline-flex; align-items: center; gap: 6px; border: 2px solid var(--tv-rule, #d4c9b3);
    background: var(--tv-paper, #f2ebe0); color: var(--tv-ink, #1a2a4a); border-radius: 999px;
    padding: 7px 12px; font-size: .9rem; cursor: pointer;
}
.ap-chip.is-selected { border-color: var(--tv-accent, #00a88f); background: rgba(0,168,143,.14); }
.ap-chip-placed { background: #fff; }
.ap-chip-img { width: 24px; height: 24px; object-fit: cover; border-radius: 4px; }
.ap-dd-hint { font-size: .8rem; color: var(--tv-ink-3, #6b6258); margin-top: 10px; }

/* Result modal */
.ap-result-overlay { position: absolute; inset: 0; z-index: 10; display: flex; align-items: center; justify-content: center; background: rgba(15,20,30,.5); padding: 16px; }
.ap-result-card { background: #fff; border-radius: 16px; padding: 28px 26px; max-width: 420px; text-align: center; box-shadow: 0 18px 50px rgba(0,0,0,.35); }
.ap-result-icon { font-size: 2.6rem; }
.ap-result-card h2 { font-family: var(--tv-serif, 'Fraunces', serif); margin: 8px 0 6px; color: var(--tv-ink, #1a2a4a); }
.ap-result-card p { color: var(--tv-ink-2, #3d3830); line-height: 1.5; }
.ap-result-actions { display: flex; gap: 10px; justify-content: center; margin-top: 18px; }

/* Player content blocks are read-only — no move cursor. */
.ap-slide .at-block { cursor: default; }

/* ============================================================
   Question-as-block (unified slide model)
   ============================================================ */
/* Slides that carry a question use a taller portrait canvas so the options /
   zones have room and stay tappable on phones. */
.tc-slide.has-question { aspect-ratio: 3 / 4; max-width: 560px; margin-inline: auto; }

/* + Question toolbar menu (drops down). */
.at-qadd-wrap { position: relative; display: inline-flex; }
.at-tool-q { border-color: var(--tv-accent, #00a88f); color: var(--tv-accent, #00a88f); font-weight: 600; }
#atQAddMenu { top: calc(100% + 4px); bottom: auto; left: 0; right: auto; min-width: 160px; }

/* In-place question preview on the canvas. Sizes in cqw so it scales with the
   slide, like the other blocks. */
.tcq {
    box-sizing: border-box; border: 1.5px dashed var(--tv-accent, #00a88f);
    background: rgba(0,168,143,.06); border-radius: 10px; padding: 1.4cqw 1.6cqw;
    color: var(--tv-ink, #1a2a4a); font-family: var(--tv-sans, 'Inter', sans-serif);
    font-size: 2.4cqw; line-height: 1.35; overflow: hidden;
}
.tc-dark .tcq, .tc-hero .tcq { color: #eef3fb; background: rgba(255,255,255,.10); }
.tcq-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: .45em; }
.tcq-badge { font-weight: 700; }
.tcq-pts { font-size: .82em; opacity: .7; }
.tcq-prompt { font-weight: 600; margin-bottom: .45em; }
.tcq-img { max-width: 40%; border-radius: 6px; margin-bottom: .45em; }
.tcq-opts { list-style: none; margin: 0; padding: 0; }
.tcq-opts li { padding: .28em .55em; border: 1px solid rgba(0,0,0,.14); border-radius: 6px; margin-bottom: .32em; }
.tcq-opts li.is-correct { border-color: var(--tv-accent, #00a88f); background: rgba(0,168,143,.16); font-weight: 600; }
.tcq-tf { display: flex; gap: .5em; }
.tcq-tf span { padding: .28em .9em; border: 1px solid rgba(0,0,0,.14); border-radius: 6px; }
.tcq-tf span.is-correct { border-color: var(--tv-accent, #00a88f); background: rgba(0,168,143,.16); font-weight: 600; }
.tcq-zones { display: flex; gap: .4em; flex-wrap: wrap; margin-bottom: .35em; }
.tcq-zone { padding: .22em .65em; border: 1px solid rgba(0,0,0,.2); border-radius: 6px; font-weight: 600; }
.tcq-items { display: flex; gap: .32em; flex-wrap: wrap; }
.tcq-item { padding: .18em .55em; background: #fff; color: #1a2a4a; border: 1px solid rgba(0,0,0,.14); border-radius: 999px; }
.tcq-hint { margin-top: .5em; font-size: .8em; opacity: .55; }

/* ── Question edit modal ──────────────────────────────────────── */
.atq-modal { position: fixed; inset: 0; z-index: 4500; display: flex; align-items: center; justify-content: center; background: rgba(15,20,30,.55); padding: 16px; }
.atq-modal-card { background: var(--card-bg, #fff); border-radius: 14px; width: 100%; max-width: 580px; max-height: 92vh; display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 18px 60px rgba(0,0,0,.4); }
.atq-modal-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid var(--border-color, #e6e9ee); }
.atq-modal-title { margin: 0; font-family: var(--tv-serif, 'Fraunces', serif); font-size: 1.2rem; color: var(--tv-ink, #1a2a4a); }
.atq-modal-body { padding: 16px 18px; overflow-y: auto; }
.atq-types { display: flex; gap: 6px; margin-bottom: 16px; }
.atq-typebtn { flex: 1; border: 1px solid var(--border-color, #d9dee5); background: var(--card-bg, #fff); border-radius: 8px; padding: 9px 6px; cursor: pointer; font-size: .85rem; color: inherit; }
.atq-typebtn.is-active { border-color: var(--tv-accent, #00a88f); background: rgba(0,168,143,.10); font-weight: 600; }

/* ── Player: let a portrait question slide scroll internally instead of
   clipping its question, and keep it phone-width. ── */
.ap-card .tc-slide { overflow: hidden auto; }
.ap-slide.has-question { max-width: 460px; }

/* Live/draft status badge in the editor topbar. */
.at-status-badge { font-size: .7rem; font-weight: 700; letter-spacing: .04em; padding: 4px 10px; border-radius: 999px; background: var(--bg-muted, #eceff3); color: #6b7280; flex-shrink: 0; }
.at-status-badge.is-published { background: #d6f5e0; color: #0a7c3e; }

/* Authored player rendered as a full page (real play, via navigateTo). */
.ap-page { display: flex; justify-content: center; padding: 16px; }
.ap-page .ap-card { max-height: none; box-shadow: 0 6px 24px rgba(0,0,0,.10); }
/* Result modal must cover the screen whether the player is a page or an overlay. */
.ap-result-overlay { position: fixed; }

/* Player: right/wrong reveal feedback + pre-question warning. */
.ap-opt.is-correct { border-color: #1a7f4b; background: rgba(26,127,75,.14); color: #0a5c34; font-weight: 600; }
.ap-opt.is-wrong { border-color: #b3261e; background: rgba(179,38,30,.12); color: #8a1f18; }
.ap-opt:disabled { cursor: default; }
.ap-chip.is-correct { border-color: #1a7f4b; background: rgba(26,127,75,.18); }
.ap-chip.is-wrong { border-color: #b3261e; background: rgba(179,38,30,.14); }
.ap-note { margin-top: 14px; padding: 12px 14px; border-radius: 10px; line-height: 1.45; font-size: .95rem; }
.ap-note.is-correct { background: rgba(26,127,75,.12); color: #0a5c34; }
.ap-note.is-wrong { background: rgba(179,38,30,.10); color: #8a1f18; }
.ap-check { margin-top: 12px; }
.ap-disclaimer { max-width: 600px; margin: 0 auto; }

/* ── Authored player chrome now reuses the legacy tv-card-shell. Slides fill
   the tv-slide-content area edge-to-edge (no inner card / box-in-box), so the
   warning, content and question slides are all the same size. ── */
.tv-slide-content > .tc-slide {
    aspect-ratio: auto; width: 100%; min-height: 100%; max-width: none;
    margin: 0; border-radius: 0; box-shadow: none; box-sizing: border-box;
}
.tv-slide-content > .ap-disclaimer { padding: 2.5rem 1.6rem; max-width: 640px; margin: 0 auto; }
/* Preview overlay just provides a dimmed backdrop; the card inside is the
   legacy shell. */
.ap-overlay { display: flex; align-items: center; justify-content: center; }

/* Authored player page matches the legacy training viewer's page backdrop. */
#authoredPlayerSection {
    padding: 2rem 1.5rem;
    background: var(--tv-paper);
    background-image: radial-gradient(rgba(29,26,22,0.025) 1px, transparent 1px);
    background-size: 4px 4px;
    color: var(--tv-ink);
}

/* Authored player: give the slide area a solid background so a background-less
   slide (the quiz warning) isn't see-through over the preview's dimmed backdrop.
   Content/question slides paint their own tc-slide background on top of this. */
#authoredPlayerSection .tv-slide-content,
.ap-overlay .tv-slide-content { background: var(--tv-card, #fbf7ee); }

/* ============================================================
   Training Builder & authored player — clearer, on-brand buttons.
   The site's .btn-secondary is a chunky solid indigo (#667eea) CTA, which
   reads as out-of-place "blue buttons" here. Within the builder/player we
   make secondary actions CLEAR (outlined, teal on hover), keep primary
   actions teal-solid, and right-size everything. Scoped so the rest of the
   site keeps its own button styling.
   ============================================================ */
#adminTrainingSection .btn,
#atQModal .btn,
#authoredPlayerSection .btn,
.ap-overlay .btn {
    width: auto;
    padding: 8px 16px;
    font-size: .9rem;
    font-weight: 600;
    border-radius: 8px;
    transition: all .18s;
}
/* Keep the rail's "+ Add slide" full-width. */
#adminTrainingSection .at-rail-add .btn { width: 100%; }

#adminTrainingSection .btn-secondary,
#atQModal .btn-secondary,
#authoredPlayerSection .btn-secondary,
.ap-overlay .btn-secondary {
    background: #fff;
    color: var(--tv-ink, #1a2a4a);
    border: 1.5px solid var(--border-color, #d9dee5);
    box-shadow: none;
}
#adminTrainingSection .btn-secondary:hover,
#atQModal .btn-secondary:hover,
#authoredPlayerSection .btn-secondary:hover,
.ap-overlay .btn-secondary:hover {
    background: rgba(0,168,143,.06);
    border-color: var(--primary-color, #00a88f);
    color: var(--primary-color, #00a88f);
    transform: none; box-shadow: none;
}

#adminTrainingSection .btn-primary,
#atQModal .btn-primary,
#authoredPlayerSection .btn-primary,
.ap-overlay .btn-primary {
    background: var(--primary-color, #00a88f);
    color: #fff;
    border: 1.5px solid var(--primary-color, #00a88f);
    box-shadow: none;
}
#adminTrainingSection .btn-primary:hover,
#atQModal .btn-primary:hover,
#authoredPlayerSection .btn-primary:hover,
.ap-overlay .btn-primary:hover {
    background: var(--primary-hover, #008f7a);
    border-color: var(--primary-hover, #008f7a);
    transform: none; box-shadow: 0 4px 14px rgba(0,168,143,.18);
}