/* SchoolScreen — app styles (Phase 1)
   Small custom layer on top of Bootstrap 5. */

.navbar-brand img {
    display: block;
}

/* SchoolScreen wordmark — icon.svg + live Poppins text (navy + bright blue) */
.ss-brand-icon {
    display: block;
}

.ss-wordmark {
    font-family: "Poppins", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-weight: 700;
    font-size: 1.35rem;
    line-height: 1;
    letter-spacing: -0.01em;
}

.ss-word-school {
    color: #0b1f52; /* dark navy (matches icon frame) */
}

.ss-word-screen {
    color: #1363f3; /* bright blue (matches icon accent) */
}

main {
    /* Room for future canvas-style screen workspace. */
    min-height: 50vh;
}

footer {
    font-size: 0.875rem;
}

/* Screen builder canvas (Phase 6) */
.ss-canvas {
    min-height: 300px;
    overflow: hidden;
}

/* Toolbox panel picker (Phase 11.5) — collapsible, top-left of the canvas, on
   top of panels (but below Bootstrap modals at 1050+). Edit mode only. */
.ss-toolbox {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 1030;
    width: auto;
    max-width: 210px;
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
    overflow: hidden;
}

.ss-toolbox-toggle {
    list-style: none;
    cursor: pointer;
    user-select: none;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.45rem 0.6rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: #0d6efd;
    background: #f8f9fa;
}

.ss-toolbox-toggle::-webkit-details-marker,
.ss-toolbox-toggle::marker {
    display: none;
    content: "";
}

.ss-toolbox-body {
    display: flex;
    flex-direction: column;
    padding: 0.3rem 0.4rem;
    max-height: 70vh;
    overflow-y: auto;
}

/* Cookie notice (Phase 15.1) — a small fixed bar on non-canvas pages. */
.ss-cookie-notice {
    position: fixed;
    left: 50%;
    bottom: 12px;
    transform: translateX(-50%);
    z-index: 1080;
    max-width: min(720px, 94vw);
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 0.9rem;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 10px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}
.ss-cookie-notice .btn { flex: 0 0 auto; }

/* Admin panels (Phase 15.1) — content can scroll within the panel. */
.ss-gdpr, .ss-useradmin { overflow: auto; }
.ss-gdpr-table th, .ss-gdpr-table td { font-size: 0.85rem; }

/* Legal document pages (Phase 15.1) */
.ss-legal { line-height: 1.6; }
.ss-legal h1 { font-size: 1.6rem; }
.ss-legal h2 { font-size: 1.25rem; margin-top: 1.2rem; }

/* Companion mode status badge (Phase 14.7) — subtle, top-centre of the canvas. */
.ss-companion {
    position: absolute;
    top: 10px;
    left: 14px;
    z-index: 1031;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.15rem 0.6rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(0, 0, 0, 0.12);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
    font-size: 0.75rem;
    color: #495057;
    cursor: pointer;
    user-select: none;
}
.ss-companion-dot {
    width: 0.55rem;
    height: 0.55rem;
    border-radius: 50%;
    background: #198754;            /* synced (green) */
    flex: 0 0 auto;
}
.ss-companion[data-status="reconnecting"] .ss-companion-dot { background: #ffc107; }
.ss-companion[data-status="stale"] .ss-companion-dot { background: #dc3545; }
.ss-companion[data-status="changed"] { border-color: #0d6efd; color: #0d6efd; }
.ss-companion[data-status="changed"] .ss-companion-dot { background: #0d6efd; }
/* Hidden while presenting full-screen (keep the class display clean). */
.ss-canvas:fullscreen .ss-companion { display: none !important; }

/* Toolbox fuzzy search (Phase 14.7) — slimline, doesn't dominate the Toolbox. */
.ss-toolbox-search {
    margin-bottom: 0.35rem;
}
.ss-toolbox-noresults {
    margin: 0.2rem 0.1rem 0.4rem;
}

/* Collapsible category sections within the Toolbox (one per module). */
.ss-toolbox-cat {
    border-top: 1px solid rgba(0, 0, 0, 0.06);
}

.ss-toolbox-cat:first-child {
    border-top: 0;
}

.ss-toolbox-cat-head {
    list-style: none;
    cursor: pointer;
    user-select: none;
    display: flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.4rem 0.3rem 0.25rem;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #6c757d;
}

.ss-toolbox-cat-head::-webkit-details-marker,
.ss-toolbox-cat-head::marker {
    display: none;
    content: "";
}

.ss-toolbox-cat-head::before {
    content: "\25B8"; /* ▸ */
    font-size: 0.65rem;
    transition: transform 0.15s ease;
}

.ss-toolbox-cat[open] > .ss-toolbox-cat-head::before {
    transform: rotate(90deg);
}

.ss-toolbox-cat-body {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding-bottom: 0.2rem;
}

.ss-toolbox-btn {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    width: 100%;
    padding: 0.4rem 0.5rem;
    border: 1px solid transparent;
    border-radius: 6px;
    background: transparent;
    color: #212529;
    text-align: left;
    font-size: 0.85rem;
    cursor: pointer;
}

.ss-toolbox-btn:hover,
.ss-toolbox-btn:focus-visible {
    background: #e7f1ff;
    border-color: #cfe2ff;
    outline: none;
}

.ss-toolbox-icon {
    width: 24px;
    height: 24px;
    flex: 0 0 24px;
    object-fit: contain;
}

.ss-toolbox-initials {
    width: 24px;
    height: 24px;
    flex: 0 0 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    background: #0d6efd;
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
}

.ss-toolbox-label {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Floating Edit/Done toggle — circular, pinned bottom-right of the canvas, on
   top of everything; muted until hovered/focused, then highlights. */
.ss-mode-toggle {
    position: absolute;
    right: 14px;
    bottom: 70px;
    z-index: 1030;
    width: 48px;
    height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: #6c757d;
    background: rgba(255, 255, 255, 0.75);
    border: 1px solid rgba(0, 0, 0, 0.15);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
    opacity: 0.5;
    text-decoration: none;
    transition: opacity 0.15s ease, background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.ss-mode-toggle:hover,
.ss-mode-toggle:focus-visible {
    opacity: 1;
    color: #fff;
    background: #0d6efd;
    border-color: #0d6efd;
    box-shadow: 0 2px 10px rgba(13, 110, 253, 0.4);
}

/* Full-screen presentation toggle (Phase 14) — same muted-circular treatment as
   the Edit/Done toggle. It sits in the bottom-right corner (and the Edit/Done
   toggle stacks just above it) so that in full-screen — where the Edit toggle is
   hidden — the corner button is still present rather than leaving a gap. */
.ss-fs-toggle {
    position: absolute;
    right: 14px;
    bottom: 14px;
    z-index: 1030;
    width: 48px;
    height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: #6c757d;
    background: rgba(255, 255, 255, 0.75);
    border: 1px solid rgba(0, 0, 0, 0.15);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
    opacity: 0.5;
    cursor: pointer;
    transition: opacity 0.15s ease, background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.ss-fs-toggle:hover,
.ss-fs-toggle:focus-visible {
    opacity: 1;
    color: #fff;
    background: #0d6efd;
    border-color: #0d6efd;
    box-shadow: 0 2px 10px rgba(13, 110, 253, 0.4);
}

/* Swap the expand/contract icons depending on full-screen state. */
.ss-fs-toggle .ss-fs-icon-close { display: none; }
.ss-fs-toggle.ss-fs-on .ss-fs-icon-open { display: none; }
.ss-fs-toggle.ss-fs-on .ss-fs-icon-close { display: inline; }

/* While presenting full-screen, strip the editing chrome for a clean display.
   The full-screen toggle itself stays so it can be clicked to exit (Esc works
   too). :fullscreen only applies when the canvas is the full-screen element. */
.ss-canvas:fullscreen {
    background: #fff;
    overflow: auto;
}

.ss-canvas:fullscreen .ss-toolbox,
.ss-canvas:fullscreen .ss-mode-toggle,
.ss-canvas:fullscreen .ss-tabs,
.ss-canvas:fullscreen .ss-canvas-credit,
.ss-canvas:fullscreen .ss-onboard,
.ss-canvas:fullscreen .ss-panel-actions,
.ss-canvas:fullscreen .ss-panel-resize {
    display: none !important;
}

/* Full-screen is presentation/view-only (Phase 14): even if the screen was in
   edit mode, present it as view mode — drop the editing chrome (above), the dashed
   frameless outline, and render frameless panels frameless (header hidden, no
   border/background) exactly as in view mode. Dragging/resizing is also blocked in
   JS while full-screen, and the configure (⚙) buttons are hidden so the
   can't-open-a-modal-in-full-screen confusion goes away. Leave full-screen (Esc or
   the toggle) to return to editing. */
.ss-canvas:fullscreen .ss-panel.ss-frameless {
    outline: none !important;
}

.ss-canvas:fullscreen .ss-panel.ss-frameless,
.ss-canvas:fullscreen .ss-panel.ss-frameless > .card-body {
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.ss-canvas:fullscreen .ss-panel.ss-frameless > .ss-panel-head {
    visibility: hidden !important;
}

/* First-run onboarding hint (Phase 14) — a small dismissible card near the
   Toolbox; above panels, below the avatar/modals. */
.ss-onboard {
    position: absolute;
    top: 64px;
    left: 14px;
    z-index: 1035;
    max-width: min(320px, 80vw);
}

.ss-onboard-card {
    background: #fff;
    border: 1px solid rgba(13, 110, 253, 0.35);
    border-radius: 10px;
    padding: 0.75rem 0.85rem;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
}

.ss-onboard-title { color: #0d6efd; }

/* Page navigation (Phase 14.5) — a pill of next/back + an "x of y" counter, sat
   just to the left of the Edit toggle in the bottom-right. Stays visible while
   presenting full-screen (you flip pages from here); only the add/delete-page
   controls are editing-only and hidden in full-screen. */
.ss-pagenav {
    position: absolute;
    right: 74px;
    bottom: 14px;
    z-index: 1030;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 3px 6px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.85);
    border: 1px solid rgba(0, 0, 0, 0.15);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
    opacity: 0.8;
    transition: opacity 0.15s ease;
}

.ss-pagenav:hover,
.ss-pagenav:focus-within {
    opacity: 1;
}

.ss-page-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    padding: 0;
    border-radius: 50%;
    border: 1px solid rgba(0, 0, 0, 0.12);
    background: #fff;
    color: #495057;
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
}

.ss-page-btn:hover:not(:disabled),
.ss-page-btn:focus-visible {
    color: #fff;
    background: #0d6efd;
    border-color: #0d6efd;
}

.ss-page-btn:disabled {
    opacity: 0.4;
    cursor: default;
}

.ss-page-add { color: #198754; }
.ss-page-del { color: #b02a37; }

.ss-page-counter {
    min-width: 4.5em;
    text-align: center;
    font-size: 0.85rem;
    font-variant-numeric: tabular-nums;
    color: #495057;
    user-select: none;
}

/* Panels not on the current page are hidden (client-side page switching). */
.ss-page-hidden {
    display: none !important;
}

/* While presenting full-screen, keep next/back/counter but drop the add/delete
   page controls (those are editing-only). */
.ss-canvas:fullscreen .ss-page-editonly {
    display: none !important;
}

/* Builder page (Phase 11.5): full-canvas, chromeless — no navbar/footer, the
   canvas fills the entire viewport so the screen *is* the product. */
body.ss-builder-page main {
    display: flex;
    flex-direction: column;
    min-height: 0;
}

body.ss-builder-page main > section,
body.ss-builder-page main > section > .container-fluid {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
    padding: 0;       /* edge-to-edge: no section/container padding */
    max-width: none;
}

body.ss-builder-page .ss-canvas {
    flex: 1 1 auto;
    min-height: 0;
    border: 0;            /* full-bleed app surface, no frame */
    border-radius: 0;
}

/* SchoolScreen canvas watermark — subtle, decorative, behind panels, never
   intercepts clicks. Icon + name stacked vertically and centred. Works in both
   view and edit modes. */
.ss-watermark {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    opacity: 0.07;
    pointer-events: none;
    user-select: none;
    z-index: 0;
    width: max-content;
    max-width: 90%;
}

.ss-watermark-icon {
    width: clamp(70px, 16vw, 240px);
    height: auto;
}

.ss-watermark-name {
    font-family: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
    font-weight: 700;
    font-size: clamp(2rem, 9vw, 7rem);
    line-height: 1;
    letter-spacing: 0.01em;
    white-space: nowrap;
}

/* Canvas credit (formerly the page footer) — muted, pinned to the bottom-centre
   edge of the canvas, behind any panels placed over it. */
.ss-canvas-credit {
    position: absolute;
    bottom: 6px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 0;
    max-width: 96%;
    font-size: 0.7rem;
    line-height: 1.2;
    color: rgba(108, 117, 125, 0.65);
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    pointer-events: none;
    user-select: none;
}

/* Empty-canvas hint — centred so it isn't hidden behind the top-left Toolbox. */
.ss-empty {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin: 0;
    max-width: 80%;
    text-align: center;
    z-index: 1;
}

/* User avatar badge + menu (Phase 11.5) — replaces the top nav on screen pages.
   Fixed top-right, above panels/Toolbox, below Bootstrap modals (1050+). */
.ss-avatar-wrap {
    position: fixed;
    top: 12px;
    right: 14px;
    z-index: 1040;
}

.ss-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 2px solid #fff;
    background: #1363f3;
    color: #fff;
    font-weight: 700;
    font-size: 0.95rem;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    cursor: pointer;
    padding: 0;
}

.ss-avatar:focus-visible {
    outline: 2px solid #0d6efd;
    outline-offset: 2px;
}

.ss-avatar-sm {
    width: 38px;
    height: 38px;
    font-size: 0.85rem;
    box-shadow: none;
    cursor: default;
    flex: 0 0 38px;
}

.ss-avatar-menu {
    min-width: 220px;
}

.ss-avatar-identity {
    max-width: 280px;
}

/* Pinned screen tabs (Phase 12) — quick-switch tabs along the top edge of the
   canvas, between the Toolbox (top-left) and the avatar (top-right). Above
   panels, below Bootstrap modals. */
.ss-tabs {
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1030;
    max-width: calc(100% - 360px);
    display: flex;
    gap: 0.25rem;
    padding: 0.2rem;
    overflow-x: auto;
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 999px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
}

.ss-tab {
    flex: 0 0 auto;
    max-width: 170px;
    padding: 0.2rem 0.75rem;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: #495057;
    font-size: 0.8rem;
    line-height: 1.4;
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
}

.ss-tab:hover,
.ss-tab:focus-visible {
    background: #e9ecef;
    color: #212529;
    outline: none;
}

.ss-tab.active {
    background: #0d6efd;
    color: #fff;
}

.ss-tab-more {
    color: #6c757d;
    font-weight: 700;
}

/* Manage Screens modal — keep the rename/category input groups a sensible width. */
.ss-screen-field {
    min-width: 220px;
    flex: 1 1 240px;
}

.ss-panel {
    overflow: hidden;
    /* Fixed-size panel: header stays put, body scrolls internally. */
    display: flex;
    flex-direction: column;
}

/* The header (drag handle + actions) must not shrink. */
.ss-panel > .ss-panel-head {
    flex: 0 0 auto;
}

/* The body fills the remaining height and scrolls vertically when content
   overflows, rather than clipping or spilling outside the panel (Phase 10
   refinement). Text wraps; no horizontal scroll. */
.ss-panel > .card-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    overflow-wrap: anywhere;
}

.ss-canvas[data-editable="1"] .ss-panel-head {
    cursor: move;
    user-select: none;
}

/* Panel action buttons (configure / delete) — clean icons on one baseline */
.ss-panel-actions .btn {
    line-height: 1;
    text-decoration: none;
}

.ss-panel-actions .btn:hover {
    text-decoration: none;
}

.ss-panel-actions form {
    display: flex;
    align-items: center;
}

.ss-panel-edit,
.ss-panel-del {
    font-size: 1.05rem;
}

.ss-panel-edit {
    color: #6c757d; /* muted, not a link blue */
}

.ss-panel-del {
    color: #dc3545;
}

/* Rich text panel (Phase 11) — display styles + configure editor */
.ss-richtext > :last-child {
    margin-bottom: 0 !important;
}

.ss-rt-heading {
    font-size: 1.2rem;
    font-weight: 600;
    line-height: 1.2;
}

.ss-rt-heading p {
    margin-bottom: 0;
}

.ss-rt-callout {
    border-color: #6c757d !important;
}

/* Rich text body sizes (Phase 14.5) — scale the whole body (paragraphs, lists,
   headings) so it reads on a projector / class display. Headings use em so they
   scale with the chosen size. The size class wins over Bootstrap's .small because
   app.css loads after Bootstrap. */
.ss-rt-size-lg { font-size: 1.3rem; }
.ss-rt-size-xl { font-size: 1.8rem; }
.ss-rt-size-xxl { font-size: 2.6rem; }

/* Heading style + a size: bump a bit further so it still reads as a heading. */
.ss-rt-size-lg.ss-rt-heading { font-size: 1.6rem; }
.ss-rt-size-xl.ss-rt-heading { font-size: 2.2rem; }
.ss-rt-size-xxl.ss-rt-heading { font-size: 3rem; }

/* Rich text configure editor: slimline toolbar + Markdown source + Preview */
.ss-rt-tools .btn,
.ss-rt-modes .btn {
    --bs-btn-padding-y: 0.15rem;
    --bs-btn-padding-x: 0.5rem;
}

.ss-rt-source {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.875rem;
}

.ss-rt-preview {
    min-height: 4rem;
    background: #fff;
}

/* "Hide edges" / frameless panels — generic per-panel display option.
   In VIEW mode the header (title + its bar) is hidden and the panel's border and
   background are removed so the content sits directly on the screen.
   In EDIT mode the panel stays fully visible, with a subtle dashed outline as a
   reminder that its edges are hidden when viewing. */
.ss-canvas[data-editable="0"] .ss-panel.ss-frameless,
.ss-canvas[data-editable="0"] .ss-panel.ss-frameless > .card-body {
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

/* Hide the header WITHOUT collapsing its space (visibility, not display:none), so
   the body content stays exactly where it was placed in edit mode instead of
   jumping up by the header's height when the header disappears in view mode. The
   header reserves no clicks (visibility:hidden isn't hit-tested). */
.ss-canvas[data-editable="0"] .ss-panel.ss-frameless > .ss-panel-head {
    visibility: hidden !important;
}

.ss-canvas[data-editable="1"] .ss-panel.ss-frameless {
    outline: 1px dashed rgba(0, 0, 0, 0.25);
    outline-offset: -1px;
}

/* Classroom utility panels (Phase 11) */
.ss-timer-display {
    font-variant-numeric: tabular-nums;
}

/* Keep timer/countdown/name-picker control labels on one line. */
.ss-sw-controls .btn,
.ss-cd-controls .btn,
.ss-name-controls .btn {
    white-space: nowrap;
}

.ss-timer-done [data-ss-timer-display] {
    color: #dc3545;
    font-weight: 700;
}

/* Full-screen mode (countdown / timer / name picker) — fill the screen, centred
   both ways, with a large display + big buttons for classroom viewing. Separate
   rules per vendor pseudo so an unknown one can't drop the whole block. */
.card-body:fullscreen {
    width: 100%;
    height: 100%;
    background: #fff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.card-body:-webkit-full-screen {
    width: 100%;
    height: 100%;
    background: #fff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

/* Countdown digits are short -> very large. */
.ss-countdown:fullscreen [data-ss-timer-display] { font-size: 28vmin; line-height: 1; }
.ss-countdown:-webkit-full-screen [data-ss-timer-display] { font-size: 28vmin; line-height: 1; }

/* Stopwatch shows MM:SS.mmm (longer) -> a bit smaller so it fits across. */
.ss-timer:fullscreen [data-ss-timer-display] { font-size: 16vmin; line-height: 1; }
.ss-timer:-webkit-full-screen [data-ss-timer-display] { font-size: 16vmin; line-height: 1; }

/* Picked name -> large and wrapping. */
.ss-namepicker:fullscreen .ss-name-display { font-size: 16vmin; line-height: 1.1; }
.ss-namepicker:-webkit-full-screen .ss-name-display { font-size: 16vmin; line-height: 1.1; }

/* Larger controls in any fullscreened panel. */
.card-body:fullscreen .btn-group .btn { font-size: 2rem; padding: 0.5rem 1.5rem; }
.card-body:-webkit-full-screen .btn-group .btn { font-size: 2rem; padding: 0.5rem 1.5rem; }

/* Random name picker */
.ss-name-display {
    word-break: break-word;
}

.ss-name-picked .ss-name-display {
    animation: ss-name-pop 0.45s ease;
    color: #198754;
}

@keyframes ss-name-pop {
    0% { transform: scale(0.85); }
    60% { transform: scale(1.12); }
    100% { transform: scale(1); }
}

/* Seating plan (Phase 12.5) — panel body display + configure-modal editor */
.ss-seating {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.ss-seat-canvas,
.ss-seat-editor-canvas {
    position: relative;
    min-height: 180px;
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 6px;
    background:
        linear-gradient(rgba(13, 110, 253, 0.04) 1px, transparent 1px) 0 0 / 100% 28px,
        linear-gradient(90deg, rgba(13, 110, 253, 0.04) 1px, transparent 1px) 0 0 / 28px 100%,
        #fff;
    overflow: auto;
}

.ss-seat-editor-canvas {
    height: 300px;
    flex: 1 1 auto;
}

/* In the panel body the canvas fills the available height (placement happens here). */
.ss-seat-canvas {
    flex: 1 1 auto;
}

.ss-seat-desk {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 2px 4px;
    border: 1px solid #6c757d;
    border-radius: 5px;
    background: #f8f9fa;
    font-size: 0.72rem;
    line-height: 1.1;
    overflow: hidden;
}

.ss-seat-desk.occupied {
    background: #e7f1ff;
    border-color: #0d6efd;
}

.ss-seat-canvas .ss-seat-desk,
.ss-seat-editor-canvas .ss-seat-desk {
    cursor: move;
    user-select: none;
}

.ss-seat-name { font-weight: 600; overflow-wrap: anywhere; }
.ss-seat-tags { color: #6c757d; font-size: 0.62rem; }
.ss-seat-label { color: #6c757d; }

.ss-seat-occ {
    cursor: grab;
    pointer-events: auto;
}

.ss-seat-unplaced,
.ss-seat-editor-unplaced {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem;
    min-height: 1.8rem;
}

.ss-seat-unplaced,
.ss-seat-editor-unplaced {
    border: 1px dashed rgba(0, 0, 0, 0.15);
    border-radius: 6px;
    padding: 0.3rem;
    margin-top: 0.4rem;
}

.ss-seat-unplaced-label { color: #6c757d; font-size: 0.75rem; }

.ss-seat-chip {
    display: inline-block;
    padding: 0.1rem 0.5rem;
    border-radius: 999px;
    background: #e9ecef;
    font-size: 0.75rem;
    white-space: nowrap;
}

.ss-seat-unplaced .ss-seat-chip,
.ss-seat-editor-unplaced .ss-seat-chip {
    cursor: grab;
}

.ss-qr canvas,
.ss-qr img {
    display: inline-block;
    max-width: 100%;
    height: auto;
}

.ss-checklist-list label {
    cursor: pointer;
}

.ss-image {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

/* Embed panels (webpage + video) — the iframe fills the panel body and resizes
   with it. In edit mode the iframe ignores pointer events so it can't swallow
   drag/resize/configure/delete; in view mode it is fully interactive. */
.ss-embed-panel {
    display: flex;
    flex-direction: column;
    height: 100%;
    position: relative;
}

/* Webpage embed full-screen toggle (Phase 14.7) — subtle, top-right over the page. */
.ss-embed-fs {
    position: absolute;
    top: 6px;
    right: 6px;
    z-index: 2;
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1px solid rgba(0, 0, 0, 0.15);
    background: rgba(255, 255, 255, 0.85);
    color: #495057;
    cursor: pointer;
    opacity: 0.55;
    transition: opacity 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}
.ss-embed-panel:hover .ss-embed-fs { opacity: 1; }
.ss-embed-fs:hover,
.ss-embed-fs:focus-visible {
    opacity: 1;
    color: #fff;
    background: #0d6efd;
    border-color: #0d6efd;
}
.ss-embed-panel:fullscreen { background: #fff; }

.ss-embed-frame {
    flex: 1 1 auto;
    width: 100%;
    min-height: 120px;
    border: 0;
    background: #fff;
}

.ss-canvas[data-editable="1"] .ss-embed-frame {
    pointer-events: none;
}

/* Panel resize handle (edit mode only) */
.ss-panel-resize {
    display: none;
}

.ss-canvas[data-editable="1"] .ss-panel-resize {
    display: block;
    position: absolute;
    right: 2px;
    bottom: 2px;
    width: 14px;
    height: 14px;
    cursor: nwse-resize;
    border-right: 2px solid rgba(0, 0, 0, 0.35);
    border-bottom: 2px solid rgba(0, 0, 0, 0.35);
    border-bottom-right-radius: 3px;
}

/* Polls panel (Phase 12.6) — large coloured answer buttons increment per-option
   counts, shown as a conic-gradient pie chart + legend. */
.ss-poll {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    overflow: auto;
}

.ss-poll-question {
    font-weight: 600;
    font-size: 1.05rem;
    line-height: 1.2;
    text-align: center;
}

.ss-poll-buttons {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.4rem;
}

.ss-poll-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.4rem;
    min-height: 56px;
    padding: 0.5rem 0.75rem;
    border: 0;
    border-radius: 8px;
    font-weight: 600;
    font-size: 1rem;
    line-height: 1.15;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    transition: transform 0.06s ease, filter 0.12s ease;
}

.ss-poll-btn:hover { filter: brightness(1.06); }
.ss-poll-btn:active { transform: translateY(1px) scale(0.99); }
.ss-poll-btn:focus-visible { outline: 3px solid rgba(0, 0, 0, 0.45); outline-offset: 2px; }

.ss-poll-btn-label { overflow-wrap: anywhere; }

.ss-poll-btn-count {
    flex: 0 0 auto;
    min-width: 1.6em;
    text-align: center;
    font-variant-numeric: tabular-nums;
    background: rgba(255, 255, 255, 0.85);
    color: #212529;
    border-radius: 999px;
    padding: 0 0.4rem;
    font-size: 0.9rem;
}

.ss-poll-results {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.ss-poll-chart {
    flex: 0 0 auto;
    width: 110px;
    height: 110px;
    border-radius: 50%;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
    background: #e9ecef;   /* neutral fallback before any responses */
}

.ss-poll-chart-empty {
    background: repeating-conic-gradient(#e9ecef 0deg 18deg, #f1f3f5 18deg 36deg);
}

.ss-poll-legend {
    flex: 1 1 auto;
    list-style: none;
    margin: 0;
    padding: 0;
    min-width: 8rem;
}

.ss-poll-legend-item {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.1rem 0;
    font-size: 0.85rem;
}

.ss-poll-swatch {
    flex: 0 0 auto;
    width: 0.9rem;
    height: 0.9rem;
    border-radius: 3px;
    border: 1px solid rgba(0, 0, 0, 0.15);
}

.ss-poll-legend-label { flex: 1 1 auto; overflow-wrap: anywhere; }
.ss-poll-legend-val { flex: 0 0 auto; color: #495057; font-variant-numeric: tabular-nums; }

.ss-poll-empty { text-align: center; }

/* Configure modal: option rows editor. */
.ss-poll-option-row .ss-poll-remove { flex: 0 0 auto; }

/* Full-screen poll (Phase 12.6) — the poll card-body is the full-screen element;
   scale everything up for class display. */
.ss-poll:fullscreen {
    background: #fff;
    padding: 2.5vmin !important;
    gap: 2vmin;
    justify-content: center;
}
.ss-poll:fullscreen .ss-poll-question { font-size: clamp(1.6rem, 5vmin, 4rem); }
.ss-poll:fullscreen .ss-poll-buttons { gap: 1.5vmin; }
.ss-poll:fullscreen .ss-poll-btn {
    min-height: clamp(70px, 14vmin, 160px);
    font-size: clamp(1.2rem, 3.4vmin, 2.6rem);
    border-radius: 14px;
}
.ss-poll:fullscreen .ss-poll-btn-count { font-size: clamp(1rem, 2.6vmin, 2rem); }
.ss-poll:fullscreen .ss-poll-results { gap: 3vmin; }
.ss-poll:fullscreen .ss-poll-chart { width: clamp(160px, 30vmin, 360px); height: clamp(160px, 30vmin, 360px); }
.ss-poll:fullscreen .ss-poll-legend-item { font-size: clamp(1rem, 2.6vmin, 2rem); }
.ss-poll:fullscreen .ss-poll-swatch { width: 1.2em; height: 1.2em; }

/* Deck-pinned panels (Phase 14.6) — a subtle indicator in edit mode. */
.ss-pin-badge { color: #0d6efd; font-size: 0.8em; }
.ss-panel-pin { color: #6c757d; }
.ss-panel-pin.ss-pin-on { color: #0d6efd; }
.ss-canvas[data-editable="1"] .ss-panel.ss-panel-pinned > .ss-panel-head {
    box-shadow: inset 3px 0 0 #0d6efd;
}
/* The pin badge in the title is an edit-time hint only. */
.ss-canvas[data-editable="0"] .ss-pin-badge { display: none; }

/* My Class panel (Phase 14.6) */
.ss-myclass { overflow: auto; }
.ss-myclass-list {
    margin: 0;
    padding-left: 1.4rem;
    columns: 2;
    column-gap: 1rem;
}
.ss-myclass-item { overflow-wrap: anywhere; }

/* Group Maker panel (Phase 14.6) */
.ss-gm { display: flex; flex-direction: column; overflow: auto; }
.ss-gm-groups {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 0.5rem;
    align-content: start;
}
.ss-gm-card {
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 8px;
    background: #f8f9fa;
    padding: 0.35rem 0.5rem;
}
.ss-gm-card-head {
    font-weight: 600;
    font-size: 0.85rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    margin-bottom: 0.25rem;
    padding-bottom: 0.15rem;
}
.ss-gm-card-n { color: #6c757d; font-weight: 400; }
.ss-gm-card-list {
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 0.85rem;
}
.ss-gm-card-list li { overflow-wrap: anywhere; padding: 0.05rem 0; }