/* ════════════════════════════════════════════════════════════════════════
   EKGLab on a phone  (2026-10-05)

   ONE additive layer, loaded last on every page. Everything that changes a
   layout sits inside the COMPACT media query below, so a desktop or
   landscape-tablet window never matches a rule here and the desktop design
   cannot move. The only rules outside it hide the three controls
   js/mobile-shell.js adds (menu button, scrim, search button) on a wide screen.

   COMPACT = a phone in either orientation, or a tablet held upright:
       (max-width: 900px), (max-width: 1000px) and (max-height: 520px)
   js/mobile-shell.js uses the same query; change both together.
   PHONE (nested, max-width: 600px) = a phone held upright.

   Order: 1 the shell (drawer, top bar, search) · 2 things every page shares
   (panels, dialogs, menus) · 3 one section per page. docs/MOBILE.md is the
   reference, with the list of what was checked on each page.

   Why !important appears: the shell is positioned by Tailwind utilities
   (w-[230px], left-[230px], md:ml-[230px]) that the Tailwind CDN injects AFTER
   this file, so an equal-specificity rule here would lose.
   ════════════════════════════════════════════════════════════════════════ */

.ek-menu-btn, .ek-scrim, .ek-search-btn, .ek-search-close, .ek-drawer-close,
.ek-sheet, .ek-sheet-scrim, .ek-menu-pill, .ek-view-btn, .ek-pan, .ek-seek, .ek-drawer-tools, .ek-more-btn { display: none; }

@media (max-width: 900px), (max-width: 1000px) and (max-height: 520px) {

    /* ── 1. THE SHELL ─────────────────────────────────────────────────── */

    /* The sidebar becomes a drawer: off the left edge until the menu button
       brings it in over the page. It is the page's own sidebar, not a copy. */
    #sidebar, .ek-drawer, html.ek-has-shell body > aside:first-of-type {
        width: min(84vw, 300px) !important;
        transform: translate3d(-105%, 0, 0);
        visibility: hidden;
        transition: transform .28s cubic-bezier(.2,.75,.2,1), visibility 0s linear .28s;
        z-index: 1300 !important;
        box-shadow: none !important;
        padding-bottom: env(safe-area-inset-bottom, 0px);
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
    }
    html.ek-nav-open #sidebar, html.ek-nav-open .ek-drawer, html.ek-nav-open body > aside:first-of-type {
        transform: none;
        visibility: visible;
        transition: transform .28s cubic-bezier(.2,.75,.2,1), visibility 0s;
        box-shadow: 18px 0 50px rgba(0,0,0,.5) !important;
    }
    .ek-scrim {
        display: block; position: fixed; inset: 0; z-index: 1290;
        background: rgba(12,17,24,.56); opacity: 0; pointer-events: none;
        transition: opacity .22s ease; touch-action: none;
    }
    html.ek-nav-open .ek-scrim { opacity: 1; pointer-events: auto; }
    html.ek-nav-open body { overflow: hidden; }

    .ek-drawer-close {
        display: flex; position: absolute; top: 13px; right: 10px; z-index: 3;
        width: 36px; height: 36px; align-items: center; justify-content: center;
        border: 0; border-radius: 9px; background: rgba(255,255,255,.07); color: rgba(255,255,255,.82);
        cursor: pointer;
    }
    .ek-drawer-close:active { background: rgba(255,255,255,.16); }
    /* links in the drawer are finger-sized */
    .ek-drawer .sidebar-nav-item { min-height: 44px; font-size: 15px; }

    /* The top bar spans the screen: menu · title · search · the icons. */
    #topBar, .ek-topbar, html.ek-has-shell body > header:first-of-type {
        left: 0 !important;
        padding-left: 6px !important; padding-right: 8px !important;
        gap: 2px !important;
    }
    main { margin-left: 0 !important; }

    .ek-menu-btn {
        display: inline-flex; flex: none; align-items: center; justify-content: center;
        width: 42px; height: 42px; border: 0; border-radius: 10px;
        background: transparent; color: #232e3a; cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }
    .ek-menu-btn:active, .ek-search-btn:active { background: #eef1f6; }
    .ek-menu-btn:focus-visible, .ek-search-btn:focus-visible, .ek-drawer-close:focus-visible { outline: 2px solid #26408b; outline-offset: 1px; }

    /* the title takes the room that is left and truncates */
    .ek-topbar > .ek-menu-btn + * { flex: 1 1 auto !important; min-width: 0; margin-left: 2px !important; }
    .ek-topbar > .ek-menu-btn + * h1 { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
    .ek-topbar > .flex-1, .ek-topbar > div:empty { display: none !important; }           /* the spacer: the title does that job here */

    /* search folds into an icon; opened, the field lies across the whole bar */
    .ek-topbar .topbar-search { display: none; }
    .ek-search-btn {
        display: inline-flex; flex: none; align-items: center; justify-content: center;
        width: 38px; height: 38px; border: 0; border-radius: 10px; background: transparent; color: #5f6876; cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }
    html.ek-search-open .ek-topbar > * { visibility: hidden; }
    html.ek-search-open .ek-topbar .topbar-search {
        visibility: visible; display: flex; position: absolute; left: 10px; right: 10px; top: 50%;
        width: auto; height: 42px; margin: 0; transform: translateY(-50%); z-index: 5;
    }
    html.ek-search-open .ek-topbar .topbar-search * { visibility: visible; }
    .ek-topbar .topbar-search-kbd { display: none; }
    .ek-topbar .topbar-search-input { font-size: 16px; }              /* under 16px, iOS zooms the page on focus */
    html.ek-search-open .ek-search-close {
        display: block; flex: none; align-self: stretch; margin: 0 4px 0 6px; padding: 0 10px; border: 0; background: transparent;
        font: 600 14px/1 'Inter', system-ui, sans-serif; color: #26408b; cursor: pointer; position: relative; z-index: 2;
    }
    /* its results fill the width under the bar (js/search.js sizes it from the sidebar's edge) */
    .search-dropdown { left: 0 !important; width: 100vw !important; top: 62px !important; border-radius: 0 0 14px 14px; max-height: calc(100dvh - 70px); }

    /* the icon group: no divider, no chevron beside the avatar */
    .ek-topbar > .border-l { border-left: 0 !important; padding-left: 0 !important; margin-left: 0 !important; gap: 0 !important; }
    .ek-topbar #userMenuBtn { padding: 2px !important; gap: 0 !important; }
    .ek-topbar #userMenuBtn > .material-symbols-outlined { display: none; }
    .ek-topbar #userMenuWrap { margin-left: 2px !important; }
    /* badges and extra buttons a page puts beside its title give way to the title */
    .ek-topbar > .ek-menu-btn + * > :not(.material-symbols-outlined):not(h1):not(svg) { display: none !important; }

    /* Broadcast needs a second screen, which a phone does not have: its controls are not offered here
       (the owner's call, 2026-10-05). The sidebar's Broadcast button, the 12-lead broadcast and the
       live teaching tools on the player and True Sim, and the Studio's broadcast bar and dock. */
    #btnInstructor, .broadcast-cta, #btnLead12, .bc-icon, #bcModeSeg, #btnBcastBar, #broadcastDock { display: none !important; }
    /* Poll is a classroom tool run from a desk: it is not offered in the phone layout (the owner,
       2026-10-06). Where it was the only thing under "Session" (True Sim), the heading goes too. */
    #viewBtnPoll { display: none !important; }
    .pkm-section:has(> .pkm-session-btns):not(:has(.pkm-session-btn:not(#viewBtnPoll))) { display: none !important; }

    /* Waveform Studio and any page whose top bar has no id: the same bar, by a selector strong
       enough to outrank the Studio's own icon-rail rule (body.rail-mode header.fixed). */
    html.ek-has-shell body header.ek-topbar { left: 0 !important; }
    html.ek-has-shell body .wbMain { margin-left: 0 !important; }

    @media (max-width: 600px) {
        /* a phone held upright: the title drops its icon so the words fit, and the icons close up a little */
        .ek-topbar > .ek-menu-btn + * > .material-symbols-outlined, .ek-topbar > .ek-menu-btn + * > svg { display: none !important; }
        .ek-topbar > .ek-menu-btn + * h1 { font-size: 15.5px !important; }
        .ek-topbar .w-9 { width: 34px !important; }
        .ek-search-btn { width: 34px; }
        .ek-menu-btn { width: 40px; }
    }
    /* EKG Foundations' Video Tutorial is not offered in the phone layout (the owner, 2026-10-05) */
    #videoTutorialBtn { display: none !important; }
    /* Reference Desk: the question box is three lines tall, so its own example is not cut off */
    .refdesk .rd-input { min-height: 76px; }

    /* Games: a running game hides the sidebar outright (css/games.css); as a drawer it can stay reachable */
    html.ek-has-shell body.gm-playing aside.ek-drawer { display: flex !important; }
    .gm-stage { left: 0 !important; }
    /* things other pages pin to the sidebar's old edge */
    .at-captions { left: 8px !important; right: 8px !important; width: auto !important; }
    .ua-scrim { left: 0 !important; }


    /* ── 2. WHAT EVERY PAGE SHARES ────────────────────────────────────── */

    /* a page never pans sideways: anything wide scrolls inside its own box */
    main { max-width: 100vw; overflow-x: clip; }

    /* Panels that float at the right edge on a desktop (favorites, points of interest, polls,
       notifications, the settings menu) become sheets that rise from the bottom. */
    .fav-panel, .poi-panel, .poll-panel, .nb-panel, .ekg-settings-menu {
        position: fixed !important; left: 0 !important; right: 0 !important; top: auto !important; bottom: 0 !important;
        width: auto !important; max-width: none !important; max-height: min(82dvh, 720px) !important;
        border-radius: 20px 20px 0 0 !important; margin: 0 !important;
        box-shadow: 0 -18px 50px rgba(15,23,42,.28) !important;
        padding-bottom: env(safe-area-inset-bottom, 0px);
        overflow-y: auto; overscroll-behavior: contain; z-index: 1250 !important;
    }
    .nb-panel::before, .ekg-settings-menu::before {
        content: ''; display: block; width: 38px; height: 4px; margin: 8px auto 4px; border-radius: 99px; background: #d5dbe4;
    }

    /* dialogs fill the width, with room to breathe at the edges */
    .fav-dialog, .pdf12-card { width: calc(100vw - 24px) !important; max-width: 520px !important; max-height: calc(100dvh - 32px) !important; }
    .pdf12-card { display: flex; flex-direction: column; }
    .pdf12-body { overflow-y: auto; }


    /* ── 3. PAGE BY PAGE ──────────────────────────────────────────────── */

    /* Libraries (12 Lead, Arrhythmia): each row of filter chips is one line you swipe along,
       fading out at the right edge so it reads as more to come. */
    .lib-filters-wrap { padding-left: 0 !important; padding-right: 0 !important; }
    .lib-tier1, .lib-tier2-wrap.is-open .lib-tier2-inner {
        flex-wrap: nowrap !important; overflow-x: auto !important; overflow-y: hidden;
        padding-left: 16px; padding-right: 28px; scrollbar-width: none; -webkit-overflow-scrolling: touch;
        -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 34px), transparent);
                mask-image: linear-gradient(to right, #000 calc(100% - 34px), transparent);
    }
    .lib-tier1::-webkit-scrollbar, .lib-tier2-inner::-webkit-scrollbar { display: none; }
    .lib-tier1 > *, .lib-tier2-inner > * { flex: none; }

    /* Classroom: the class switcher on its own line, the actions under it */
    .cls-toolbar { flex-wrap: wrap; gap: 10px; }
    .cls-toolbar-actions { margin-left: 0; flex-wrap: wrap; width: 100%; }
    .cls-toolbar-actions .cls-tbtn { flex: 1 1 auto; justify-content: center; }

    /* EKG Foundations, Rhythm Foundations */
    .continue-btn { max-width: 100%; }
    .citeTip { max-width: min(300px, calc(100vw - 48px)); }

    /* Delineation Curation (admin): the approved tally drops under the title */
    .da-head { flex-wrap: wrap; gap: 12px; }
    .da-approved { margin-left: 0; flex: 1 1 100%; min-width: 0; max-width: 100%; }

    /* My Progress: tighter gutters, and each recent quiz keeps its name, bar, score and pill on one line */
    .pg-wrap { padding: 24px 16px 56px !important; }
    .pg-q { grid-template-columns: minmax(0, 1fr) minmax(54px, 96px) 44px 48px !important; gap: 9px !important; }

    /* ── ECG Player and True Sim: the monitor, redrawn for a phone held upright ──
       A phone is about 70 mm wide. js/app.js gives the screen as much paper as fits at a readable
       scale (about 3 s; a small box is ~4.6 px), so this is no longer ten seconds squeezed across.
       Around it, everything is rearranged for one hand:
         1. the monitor runs edge to edge: no card margins, every pixel of width is tracing;
         2. the header is two lines: the record and its rate, then the leads as a strip to swipe;
         3. the tools leave the left edge (they cost 52 px of tracing) for a dock UNDER the
            screen, finger-sized, beside the gain;
         4. the transport is one row built round a large play button. */
    @media (max-width: 700px) {
        /* no gap under the top bar: the monitor starts where the bar ends, a hairline between
           (the owner: "that gap shouldnt exist. just have a thin divider") */
        div:has(> #ecgCard) { padding-top: 0 !important; }
        #ecgCard { margin-left: calc(50% - 50vw) !important; margin-right: calc(50% - 50vw) !important;
                   border-radius: 0 !important; border-left: 0 !important; border-right: 0 !important;
                   border-top: 1px solid #e3e7ee !important; }
        body.sim-page #ecgCard { top: 62px; }

        /* THE HEADER, one line: the record, its heart rate, the star and More. Points of
           interest, Share and the leads are moved into sheets by js/mobile-shell.js; the
           rhythm label is also on the Rhythm tile under the monitor. */
        .player-hdr { height: auto !important; min-height: 56px; flex-wrap: wrap; align-items: center; gap: 2px 6px !important; padding: 6px 4px 6px 14px !important; }
        .player-hdr-identity { flex: 1 1 0; min-width: 0; }
        .player-hdr-title { font-size: 16px; }
        .player-hdr-gap, .player-hdr-sep { display: none !important; }
        .player-hdr-rhythm { display: none !important; }
        .player-hdr-vitals { flex: none; margin: 0 4px 0 0 !important; }
        .player-hdr-actions { flex: none; gap: 0 !important; }
        .player-hdr-actions > button { width: 44px !important; height: 44px !important; }
        .player-hdr .player-hdr-leads { order: 10; flex: 1 0 100%; min-width: 0; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
        .player-hdr-leads::-webkit-scrollbar { display: none; }
        .player-hdr .player-hdr-leads .player-lead-pill { flex: 1 0 auto; height: 40px; min-width: 44px; font-size: 13.5px; }

        .player-canvas-area { flex-direction: column-reverse; }
        #ecgScreen { min-height: 0 !important; height: clamp(230px, 38dvh, 330px) !important; flex: none !important; }
        /* two leads at once: both screens, the menus and the transport fit the first screenful */
        #ecgScreen2 { height: clamp(150px, 30dvh, 280px) !important; }
        html:has(#btnDualLead.active) #ecgScreen,
        html:has(#btnDualLead.active) #ecgScreen2 { height: clamp(150px, calc((100dvh - 284px) / 2), 280px) !important; }
        .player-canvas-area > .player-toolbar {
            width: auto !important; flex-direction: row !important; justify-content: flex-start !important; align-items: center;
            gap: 2px; padding: 5px 8px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
            border-top: 1px solid var(--plr-grid-border, #e3e7ee); border-right: 0 !important;
        }
        .player-canvas-area > .player-toolbar::-webkit-scrollbar { display: none; }
        .player-canvas-area > .player-toolbar .tbtn { width: 46px; height: 46px; flex: none; border-radius: 12px; }
        .player-canvas-area > .player-toolbar .tbtn svg { width: 21px; height: 21px; }
        .player-canvas-area > .player-toolbar .tbtn .tbtn-tip { display: none !important; }            /* a hover tip has no hover here */
        .player-canvas-area .player-tool-sep { width: 1px !important; height: 26px !important; flex: none; margin: 0 6px !important; }
        .player-canvas-area .player-gain-lbl { flex: none; margin: 0 4px 0 2px !important; font-size: 10px !important; }
        .player-canvas-area .player-gain-wrap { flex: none; width: 108px !important; height: 46px !important; }
        .player-canvas-area > .player-toolbar #gainSlider { transform: none !important; width: 100px !important; height: 6px !important; writing-mode: horizontal-tb !important; direction: ltr; }
        .player-canvas-area .player-gain-val { flex: none; margin: 0 6px 0 4px !important; font-size: 11px !important; white-space: nowrap; }
        .player-info { right: 8px; bottom: 8px; }

    }
    .player-hdr .player-hdr-leads { min-width: 0; overflow-x: auto; scrollbar-width: none; }

    /* THE TWELVE LEADS under the monitor, upright: the standard sheet, two of its four columns
       to a screen (the limb leads, then the chest leads), the same two halves as a flashcard's
       sheet, with the same control under it (js/mobile-shell.js initPan). Twelve strips one
       under the next were 1,900 px of scrolling; this is 280. The cell keeps its calibrated
       25:12 shape, so a lead is 2.5 s at about 3.1 px to the millimetre. Cabrera's order is
       js/app.js's own (an inline order per cell): its first two columns are the limb leads too. */
    @media (max-width: 700px) {
        .ecg12-grid {
            position: relative; grid-template-columns: repeat(4, 50%) !important; gap: 0 !important; padding: 0 !important; max-width: none !important;
            overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; scrollbar-width: none;
        }
        .ecg12-grid::-webkit-scrollbar { display: none; }
        .ecg12-grid::before, .ecg12-grid::after { content: ''; position: absolute; top: 0; width: 1px; height: 1px; pointer-events: none; }
        .ecg12-grid::before { left: 0; scroll-snap-align: start; }
        .ecg12-grid::after { left: calc(200% - 1px); scroll-snap-align: end; }
        .ecg12-grid > .ecg12-cell { box-shadow: inset -1px -1px 0 rgba(20,24,29,.09); }
        .ecg12-axis { display: none !important; }   /* the four-column time ruler belongs to the sheet */
    }

    /* ── Home, upright: everything in view ──
       The desktop's two rows of tall cards to swipe show one and a bit at a time on a phone, so
       finding Games took six swipes. Here each row is a two-column grid of compact tiles (name
       and one line of what it is), with My Progress across the top as a summary. */
    @media (max-width: 600px) {
        .home-feature-track { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; overflow: visible !important; padding: 0 !important; margin: 0 !important; scroll-snap-type: none; }
        /* the card's own 22 px padding and the body's 14 px left 99 px of a 171 px card for its words */
        .home-feature-card { flex: none !important; width: auto !important; height: auto !important; min-height: 0; padding: 0 !important; border-radius: 16px !important; }
        .home-feature-card .home-feature-hero, .home-feature-card .home-feature-meta { display: none !important; }
        .home-feature-card.home-progress-card { padding: 4px 2px 18px !important; }       /* its tiles and bars need the card's edge kept clear */
        .home-feature-body { padding: 16px 16px 17px !important; gap: 6px !important; height: auto !important; flex: 1 1 auto; justify-content: flex-start !important; }
        .home-welcome-greeting { font-size: 22px !important; line-height: 1.2 !important; letter-spacing: -.02em; margin-bottom: 0 !important; }
        .home-welcome-sub, .home-feature-card:not(.home-progress-card) .home-feature-tag { display: none !important; }
        .home-feature-card:not(.home-progress-card) .home-feature-body { padding: 13px 14px 14px !important; gap: 4px !important; min-height: 84px; box-sizing: border-box; }
        .home-feature-card:not(.home-progress-card) .home-feature-sub { -webkit-line-clamp: 2 !important; font-size: 12.5px !important; }
        .home-feature-card { border-radius: 14px !important; }
        .home-feature-title { font-size: 15.5px !important; line-height: 1.2 !important; }
        .home-feature-sub { font-size: 13px !important; line-height: 1.4 !important; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; margin: 0 !important; }
        .home-progress-card { grid-column: 1 / -1; display: grid !important; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 12px; padding-bottom: 12px; }
        .home-progress-card .hp-week { display: none !important; }
        .home-progress-card .hp-stats { padding: 0 14px 0 0 !important; margin: 0 !important; gap: 8px; }
        .home-progress-card .hp-acc { grid-column: 1 / -1; padding: 0 14px !important; margin: 4px 0 0 !important; }
        .home-feature-section { margin-bottom: 22px !important; }
    }

    /* True Sim: the rhythm cards sit two across instead of one narrow column */
    .sim-section-cards { gap: 10px; }
    .sim-section-cards .sim-card { flex: 1 1 calc(50% - 5px); width: auto !important; min-width: 0; max-width: none; }

    /* Waveform Studio: the bar keeps its own controls (bandwidth, save preset, reset) and lets them
       scroll if they run out of room; search and settings are a tap away in the menu's other pages. */
    body:has(.wbMain) .ek-search-btn, body:has(.wbMain) #btnSettings { display: none !important; }
    body:has(.wbMain) .ek-topbar > .ek-menu-btn + * { flex: 0 0 auto !important; }
    #topbarLab { flex: 1 1 auto !important; min-width: 0; overflow-x: auto; scrollbar-width: none; }
    #topbarLab::-webkit-scrollbar { display: none; }
    /* its workbench fills the screen that is really there (100vh runs under a phone browser's bars) */
    html.ek-has-shell body .wbMain { height: 100dvh !important; }
    .seglab .slab { height: calc(100dvh - 62px) !important; }
    /* The public Studio (waveform-studio.html, body[data-ek-shell="bar"]) wears this bar with no
       sidebar: no menu button, no drawer. Its brand block (the logo, the page's name) and its one
       button keep their size and the spacer between them stays. Nothing is asked to shrink,
       because the Studio's own fit ladder measures the bar: it shortens the button to "Sign up",
       then drops the page's name, so a narrow phone is handled without a width written here. */
    body[data-ek-shell="bar"] .ek-topbar { padding-left: 12px !important; padding-right: 10px !important; gap: 6px !important; }
    body[data-ek-shell="bar"] .ek-topbar > .flex-1 { display: block !important; min-width: 0; }
    body[data-ek-shell="bar"] .ek-topbar > #topbarLab { flex: 0 1 auto !important; }
    body[data-ek-shell="bar"] .ek-topbar .wsCta { height: 36px; }
    /* Its two locked features (PDF export on Pro, Broadcast on Instructor) are links to the plans.
       Broadcast is not offered on a phone at all (no second screen), so it is not advertised here
       either. In the tools sheet the PDF one is a row like the others, its plan at the right. */
    #wsLockCast { display: none !important; }
    .ek-sheet #topbarLab .wsLocked .wsPlan { order: 9; flex: none; margin-left: auto; height: 22px; padding: 0 9px 0 7px; font-size: 12px; }
    .ek-sheet #topbarLab .wsLocked .wsPlan .material-symbols-outlined { width: auto; font-size: 13px; }
    .ek-sheet #topbarLab .wsLocked > .material-symbols-outlined { color: #9aa3af; }
    @media (max-width: 600px) {
        /* a phone held upright: a slightly smaller logo and closer spacing, so the page's name stays
           beside it on a 375 px phone (the fit ladder still drops it where it does not fit) */
        body[data-ek-shell="bar"] .ek-topbar { padding-left: 10px !important; padding-right: 8px !important; }
        body[data-ek-shell="bar"] .ek-topbar .wsBrand { gap: 9px; margin-left: 0; }
        body[data-ek-shell="bar"] .ek-topbar .wsBrand img { height: 22px; }
        body[data-ek-shell="bar"] .ek-topbar .wsCta { padding: 0 13px; }
    }

    /* A phone on its side: short and wide. */
    @media (max-height: 520px) and (min-width: 600px) {
        /* Waveform Studio: the 12-lead and the console side by side again, as on a desktop */
        .seglab .slab { grid-template-columns: minmax(0, 1fr) min(300px, 40vw) !important; grid-template-rows: minmax(0, 1fr) 52px !important; }
        .seglab .console { grid-row: 1 / 3 !important; grid-column: 2 !important; border-top: 0 !important; border-left: 1px solid var(--wb-seam) !important; }
        .seglab .vitals { grid-row: 2 !important; grid-column: 1 !important; }
        /* ECG Player: the record's name keeps its place; the lead strip gives way and scrolls */
        .player-hdr-identity { flex: 0 0 auto; }
        .player-hdr-leads { flex: 1 1 0; }
    }

    /* ── Menus that rise from the bottom (js/mobile-shell.js, second half) ──
       One button names the current choice; its sheet has room for finger-sized, labelled rows.
       The owner, 2026-10-05: "they won't all fit, so don't try and force it. keep things clean." */
    .ek-sheet-scrim {
        display: block; position: fixed; inset: 0; z-index: 1270; background: rgba(12,17,24,.5);
        opacity: 0; pointer-events: none; transition: opacity .2s ease; touch-action: none;
    }
    html.ek-sheet-open .ek-sheet-scrim { opacity: 1; pointer-events: auto; }
    html.ek-sheet-open body { overflow: hidden; }
    .ek-sheet {
        display: flex; flex-direction: column; position: fixed; left: 0; right: 0; bottom: 0; z-index: 1280;
        max-height: min(86dvh, 700px); background: #fff; border-radius: 22px 22px 0 0;
        box-shadow: 0 -20px 60px rgba(15,23,42,.3); padding-bottom: env(safe-area-inset-bottom, 0px);
        transform: translate3d(0, 104%, 0); visibility: hidden;
        transition: transform .28s cubic-bezier(.2,.75,.2,1), visibility 0s linear .28s;
        font-family: 'Inter', system-ui, -apple-system, sans-serif; color: #14181d;
    }
    .ek-sheet.is-open { transform: none; visibility: visible; transition: transform .28s cubic-bezier(.2,.75,.2,1), visibility 0s; }
    .ek-sheet::before { content: ''; flex: none; width: 38px; height: 4px; margin: 8px auto 0; border-radius: 99px; background: #d5dbe4; }
    .ek-sheet-head { flex: none; display: flex; align-items: center; justify-content: space-between; padding: 4px 8px 6px 20px; }
    .ek-sheet-head b { font-size: 17px; font-weight: 700; letter-spacing: -.01em; }
    .ek-sheet-close { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; border: 0; border-radius: 12px; background: transparent; color: #5b6573; cursor: pointer; }
    .ek-sheet-close:active { background: #eef1f6; }
    .ek-sheet-body { overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: 2px 12px 16px; }
    .ek-sheet-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 56px; padding: 6px 10px; border-top: 1px solid #eef1f5; }
    .ek-sheet-row-l { font-size: 15px; font-weight: 600; }

    /* a button that names the current choice and opens a sheet */
    .ek-menu-pill {
        flex: 1 1 0; min-width: 0; height: 48px; display: inline-flex; align-items: center; justify-content: space-between; gap: 8px;
        padding: 0 14px 0 16px; border: 1px solid #dfe4ec; border-radius: 13px; background: #fff; color: #14181d;
        font: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background .14s, border-color .14s;
    }
    .ek-menu-pill[hidden] { display: none; }
    .ek-menu-pill:active { background: #f4f6fa; }
    .ek-menu-pill svg { flex: none; color: #5b6573; }
    .ek-menu-pill-t { min-width: 0; display: flex; align-items: baseline; gap: 8px; white-space: nowrap; overflow: hidden; }
    .ek-menu-pill-t small { font-size: 13px; font-weight: 500; color: #5b6573; }
    .ek-menu-pill-t b { font-size: 16px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; }
    .ek-menu-pill.is-on { border-color: #26408b; background: rgba(38,64,139,.06); }
    .ek-menu-pill.is-on .ek-menu-pill-t b, .ek-menu-pill.is-on svg { color: #26408b; }
    .ek-menu-pill:focus-visible, .ek-sheet-close:focus-visible, .ek-view-btn:focus-visible { outline: 2px solid #26408b; outline-offset: 2px; }

    /* Lead: the twelve in the order they are read, three across (limb leads, augmented, V1 to V3, V4 to V6) */
    .ek-sheet .player-hdr-leads {
        display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; order: 0;
        padding: 6px 8px 8px !important; border: 0 !important; background: none !important; box-shadow: none !important; overflow: visible !important;
    }
    .ek-sheet .player-hdr-leads .player-lead-pill {
        height: 54px !important; min-width: 0; border: 1px solid #dfe4ec; border-radius: 13px; background: #fff; color: #14181d;
        font-size: 16px !important; letter-spacing: .02em; text-transform: none; box-shadow: none;
    }
    .ek-sheet .player-hdr-leads .player-lead-pill.active { border-color: #26408b; background: rgba(38,64,139,.08); color: #26408b; box-shadow: inset 0 0 0 1px #26408b; }

    /* Tools: each one a row with its name and what it does (the desktop's hover tip, shown as text) */
    .ek-sheet .player-toolbar {
        position: static !important; width: auto !important; display: flex; flex-direction: column !important; align-items: stretch !important;
        justify-content: flex-start !important; gap: 2px; padding: 0 !important; overflow: visible !important; border: 0 !important; background: none !important;
    }
    .ek-sheet .player-toolbar .tbtn {
        width: 100% !important; height: auto !important; min-height: 60px; flex-direction: row-reverse; justify-content: flex-end; gap: 16px; padding: 8px 12px; border-radius: 13px;
        color: #26323f; text-align: left;
    }
    .ek-sheet .player-toolbar .tbtn svg { width: 24px; height: 24px; flex: none; }
    .ek-sheet .player-toolbar .tbtn > :not(svg):not(.tbtn-tip) { flex: none; min-width: 24px; text-align: center; }
    .ek-sheet .player-toolbar .tbtn .tbtn-tip {
        display: block !important; position: static !important; transform: none !important; opacity: 1 !important; visibility: visible !important;
        width: auto !important; max-width: none !important; padding: 0 !important; background: none !important; box-shadow: none !important;
        color: #5b6573 !important; font-size: 13.5px; font-weight: 400; line-height: 1.4; letter-spacing: 0; text-transform: none; white-space: normal; pointer-events: none;
    }
    .ek-sheet .player-toolbar .tbtn .tbtn-tip::before, .ek-sheet .player-toolbar .tbtn .tbtn-tip::after { display: none !important; }
    .ek-sheet .player-toolbar .tbtn .tbtn-tip b { display: block; color: #14181d !important; font-size: 15.5px; font-weight: 600; }
    .ek-sheet .player-toolbar .tbtn.active { background: rgba(38,64,139,.08); color: #26408b; }
    .ek-sheet .player-toolbar .tbtn.active .tbtn-tip b { color: #26408b !important; }
    .ek-sheet .player-toolbar #btnCreateClip { display: none !important; }            /* clip authoring is a desktop job */
    .ek-sheet .player-tool-sep { display: none !important; }
    /* gain, as a row: its name, the slider, the value */
    .ek-sheet .player-gain-lbl { order: 20; margin: 8px 12px 0 !important; padding-top: 12px; border-top: 1px solid #eef1f5; font-size: 15px !important; font-weight: 600; letter-spacing: 0; text-transform: lowercase; color: #14181d !important; text-align: left; }
    .ek-sheet .player-gain-lbl::first-letter { text-transform: uppercase; }
    .ek-sheet .player-gain-wrap { order: 21; width: auto !important; height: 44px !important; margin: 0 12px; }
    .ek-sheet .player-toolbar #gainSlider { transform: none !important; width: 100% !important; height: 6px !important; writing-mode: horizontal-tb !important; }
    .ek-sheet .player-gain-val { order: 22; margin: 0 12px 6px !important; font-size: 13px !important; color: #5b6573 !important; text-align: left; }
    .ek-sheet .ek-sheet-row .player-speed-seg { flex: none; }

    /* 12-lead view: its controls, one group to a line */
    .ek-sheet .ecg12-toolbar { display: flex !important; flex-direction: column; align-items: stretch; gap: 12px; padding: 4px 8px 8px !important; border: 0 !important; background: none !important; }
    .ek-sheet .ecg12-toolbar .ecg12-tb-sep { display: none !important; }
    .ek-sheet .ecg12-toolbar .ecg12-tb-group { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 !important; }
    .ek-sheet .ecg12-toolbar .ecg12-format-btn { height: 46px; padding: 0 18px; font-size: 14.5px; border-radius: 12px; }
    .ek-sheet .ecg12-toolbar .ecg12-gain-btn { width: 46px; height: 46px; font-size: 20px; border-radius: 12px; }
    .ek-sheet .ecg12-toolbar .ecg12-gain-val { font-size: 15px; min-width: 84px; text-align: center; }
    .ek-view-btn { display: none; }

    @media (max-width: 700px) {
        /* THE CONTROLS, three lines under the screen:
             1. a seek line with the time at each end (the desktop's scrubber window is dropped
                on a phone, the owner's call; this is what moves through a thirty-minute record
                in its place, and its two ends stand in for Start and End);
             2. the player controls, CENTRED: back 5 s, play, forward 5 s;
             3. the two menus side by side, each half the width: Lead and Tools.
           (Lead, the controls and Tools shared one row at first. On the owner's phone that row
           was a few pixels too wide: Tools dropped under it and the controls sat off centre.
           Nothing here depends on the row fitting any more.) */
        .player-playbar {
            display: flex !important; flex-wrap: wrap !important; align-items: center; justify-content: center;
            height: auto !important; column-gap: 8px !important; row-gap: 0 !important; padding: 0 12px calc(10px + env(safe-area-inset-bottom, 0px)) !important;
        }
        .player-playbar > .ek-seek { display: flex; order: -3; flex: 1 0 100%; }
        .player-playbar::after { content: ''; order: 5; flex: 0 0 100%; height: 0; }       /* the line break between the controls and the menus */
        .player-playbar > .ek-menu-pill { order: 10; flex: 1 1 0; min-width: 0; height: 46px; margin: 0; padding: 0 10px 0 14px; border-color: #cfd6e0; border-radius: 12px; }
        .player-playbar > .ek-menu-pill .ek-menu-pill-t small { font-size: 13px; }
        .player-playbar > .ek-menu-pill .ek-menu-pill-t b { font-size: 16px; }
        .player-playbar > .ek-tools-btn:not(.is-on) .ek-menu-pill-t small { font-size: 16px; font-weight: 600; color: #14181d; }
        .player-playbar > .ek-tools-btn:not(.is-on) .ek-menu-pill-t b { display: none; }
        .player-playbar .tbtn { width: 44px !important; height: 44px !important; }
        .player-playbar #btnPlayPause { width: 54px !important; height: 54px !important; margin: 4px 6px 8px; }
        .player-playbar #btnSkipStart, .player-playbar #btnSkipEnd, .player-playbar .player-scrubber-wrap,
        .player-playbar .player-time { display: none !important; }
        /* back and forward five seconds, drawn as what they do (two small triangles said little) */
        .player-playbar #btnStepBack > *, .player-playbar #btnStepFwd > * { display: none !important; }
        .player-playbar #btnStepBack { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2326323f' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 12a7.5 7.5 0 1 0 2.4-5.5'/%3E%3Cpath d='M4 4.5v4.5h4.5'/%3E%3Ctext x='12' y='15' text-anchor='middle' font-family='Arial,Helvetica,sans-serif' font-size='7.5' font-weight='700' fill='%2326323f' stroke='none'%3E5%3C/text%3E%3C/svg%3E") center / 28px 28px no-repeat !important; }
        .player-playbar #btnStepFwd { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2326323f' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19.5 12a7.5 7.5 0 1 1-2.4-5.5'/%3E%3Cpath d='M20 4.5v4.5h-4.5'/%3E%3Ctext x='12' y='15' text-anchor='middle' font-family='Arial,Helvetica,sans-serif' font-size='7.5' font-weight='700' fill='%2326323f' stroke='none'%3E5%3C/text%3E%3C/svg%3E") center / 28px 28px no-repeat !important; }
        body.sim-page .player-playbar .sim-live-btn { margin-left: 2px; }

        .ek-seek { align-items: center; gap: 10px; height: 32px; padding-top: 4px; }
        .ek-seek.is-off { visibility: hidden; }
        .ek-seek span { flex: none; min-width: 32px; font: 500 11.5px/1 ui-monospace, 'SF Mono', Menlo, Consolas, monospace; color: #404750; font-variant-numeric: tabular-nums; }
        .ek-seek span:last-child { text-align: right; }
        .ek-seek input { flex: 1 1 auto; min-width: 0; height: 28px; margin: 0; padding: 0; background: transparent; -webkit-appearance: none; appearance: none; cursor: pointer; }
        .ek-seek input:focus-visible { outline: 2px solid #26408b; outline-offset: 2px; border-radius: 6px; }
        .ek-seek input::-webkit-slider-runnable-track { height: 4px; border-radius: 99px; background: linear-gradient(90deg, #26408b var(--ek-seek, 0%), #e3e7ee var(--ek-seek, 0%)); }
        .ek-seek input::-webkit-slider-thumb { -webkit-appearance: none; width: 16px; height: 16px; margin-top: -6px; border: 0; border-radius: 50%; background: #26408b; box-shadow: 0 1px 4px rgba(15,23,42,.3); }
        .ek-seek input::-moz-range-track { height: 4px; border-radius: 99px; background: #e3e7ee; }
        .ek-seek input::-moz-range-progress { height: 4px; border-radius: 99px; background: #26408b; }
        .ek-seek input::-moz-range-thumb { width: 16px; height: 16px; border: 0; border-radius: 50%; background: #26408b; box-shadow: 0 1px 4px rgba(15,23,42,.3); }

        /* A 12-LEAD RECORD IS A STILL SHEET (round 5): its ten seconds laid out whole at the
           monitor's scale, to slide under a finger. Nothing sweeps, so there is no play
           button, no step buttons and no seek line: Lead and Tools share the row, and a bar
           under the screen shows which part is in view (the owner: "it shouldnt play for 10
           seconds at all, it should just show it"). The screen is 250 mm at 4.6 px to the
           millimetre, js/app.js PHONE_PX_PER_MM: keep the two numbers in step. */
        html.ek-twelve .player-screens-col { min-width: 0; max-width: 100vw; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; scrollbar-width: none; }
        html.ek-twelve .player-screens-col::-webkit-scrollbar { display: none; }
        html.ek-twelve #ecgScreen { width: 1150px !important; }
        html.ek-twelve .player-info { display: none !important; }
        html.ek-twelve .player-playbar > .tbtn, html.ek-twelve .player-playbar > .ek-seek, html.ek-twelve .player-playbar::after { display: none !important; }
        html.ek-twelve .player-playbar { padding-top: 8px !important; }
        html.ek-twelve .ek-sheet #btnLoop { display: none !important; }
        .player-canvas-area > .ek-pan { order: -1; border-bottom: 0 !important; }

        /* THE LABELS AT THE PLAYHEAD, one quiet line under the controls: the rhythm and the
           beat. The heart rate is in the header and the position on the seek line, so those
           two tiles are not repeated; a record with no beat labels shows no line at all. */
        div:has(> #ecgCard) > #ecgCard { order: -2; }
        div:has(> #ecgCard) > .metric-grid {
            order: -1; display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 0 !important;
            margin: -16px calc(50% - 50vw) 0 !important; background: #fff; border-bottom: 1px solid #e3e7ee;
        }
        html.ek-no-vitals div:has(> #ecgCard) > .metric-grid { display: none !important; }
        .metric-grid > #wHR, .metric-grid > #wTime, .metric-grid .mc-accent { display: none !important; }
        .metric-grid > .metric-card { padding: 10px 16px 11px !important; gap: 0 !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; }
        .metric-grid > #wBeat { border-left: 1px solid #e3e7ee !important; }
        html.ek-no-beat .metric-grid { grid-template-columns: minmax(0, 1fr) !important; }
        html.ek-no-beat .metric-grid > #wBeat, html.ek-no-beat .metric-grid .mc-sublabel { display: none !important; }
        .metric-grid .mc-body { gap: 3px !important; }
        .metric-grid .mc-label { font-size: 11.5px !important; font-weight: 600 !important; letter-spacing: 0 !important; text-transform: none !important; color: #5b6573 !important; }
        .metric-grid .mc-value { font-family: 'Inter', system-ui, -apple-system, sans-serif !important; font-size: 15px !important; font-weight: 600 !important; letter-spacing: 0 !important; line-height: 1.25 !important; }
        .metric-grid .mc-sublabel { margin-top: 0 !important; font-size: 12px !important; }

        /* THE 12-LEAD PANEL under the player: room to breathe.
           Edge to edge like the monitor; the title on one line with a single View button (its
           nine controls live in a sheet); the legend as a quiet caption; then the strips at full
           width, the measurements as six generous tiles, and space between the sections. */
        #ecg12Panel, #ptbxlAnalysis { margin-left: calc(50% - 50vw) !important; margin-right: calc(50% - 50vw) !important; border-radius: 0 !important; border-left: 0 !important; border-right: 0 !important; }
        #ecg12Panel { margin-top: 14px !important; }
        .ecg12-header { height: auto !important; padding: 0 !important; gap: 0 !important; display: block !important; }
        .ecg12-hdr-top { display: flex; align-items: center; gap: 12px; padding: 16px 16px 12px !important; height: auto !important; }
        .ecg12-hdr-left { flex: 1 1 auto; min-width: 0; }
        .ecg12-hdr-meta { display: none !important; }
        .ek-view-btn {
            display: inline-flex; flex: none; align-items: center; gap: 7px; height: 44px; padding: 0 16px; border: 1px solid #dfe4ec; border-radius: 12px;
            background: #fff; color: #14181d; font: 600 14.5px/1 'Inter', system-ui, sans-serif; cursor: pointer;
        }
        .ek-view-btn:active { background: #f4f6fa; }
        .ecg12-stmap-legend { padding: 0 16px 14px !important; font-size: 13px !important; line-height: 1.55 !important; }
        /* the measurements: the panel's own band (a value over its name), three to a row */
        .ecg12-sheet .ecg12-measurements { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; margin-top: 0 !important; padding: 0 !important; }
        .ecg12-sheet .ecg12-meas-pill { padding: 12px 6px !important; border-bottom: 1px solid #eef1f6 !important; }
        .ecg12-sheet .ecg12-meas-pill:nth-child(3n + 1) { border-left: 0 !important; }
        .ecg12-body { row-gap: 8px !important; }
        .ecg12-footer { padding: 14px 16px 18px !important; gap: 10px !important; flex-wrap: wrap; }
        .ecg12-footer > * { flex: 1 1 140px; justify-content: center; min-height: 46px; }
    }

    /* ── More: what left the player's header (the owner: "other than the record number, the HR
       and the favorites star, everything else should be under a menu. keep it clean") ──
       The header's own Points of interest and Share buttons as two rows, then the page's own
       menu: filter, beat labels, dual lead, poll. */
    .ek-sheet-acts { display: flex; flex-direction: column; gap: 2px; }
    .ek-sheet-acts:not(:empty) { padding-bottom: 8px; margin-bottom: 2px; border-bottom: 1px solid #eef1f5; }
    .ek-sheet-acts > button {
        display: flex; align-items: center; justify-content: flex-start; gap: 16px; width: 100% !important; height: auto !important; min-height: 56px;
        margin: 0 !important; padding: 0 12px !important; border: 0 !important; border-radius: 13px !important; background: none !important; box-shadow: none !important;
        color: #26323f !important; font-size: 0 !important; letter-spacing: 0 !important; text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent;
    }
    /* each row is its icon, then its name 16 px along: the name is set here, so the button's own
       type (Points of interest is small capitals in the header) does not reach it */
    .ek-sheet-acts > button { gap: 0 !important; text-transform: none !important; }
    .ek-sheet-acts > button::after { margin-left: 16px; font: 600 15.5px/1.2 'Inter', system-ui, -apple-system, sans-serif; letter-spacing: 0; text-transform: none; color: #14181d; }
    .ek-sheet-acts > #viewBtnPOI { order: -1; }
    .ek-sheet-acts > #viewBtnPOI::after { content: 'Points of interest'; }
    .ek-sheet-acts > #playerShareBtn::after { content: 'Share this record'; }
    .ek-sheet-acts > button svg { width: 22px !important; height: 22px !important; flex: none; margin: 0 1px; }
    .ek-sheet-acts > button .material-symbols-outlined { flex: none; width: 24px; font-size: 24px !important; text-align: center; }
    .ek-sheet-acts > button:disabled { opacity: .4; }
    .ek-sheet-acts > button:active { background: #f4f6fa !important; }
    .ek-sheet .player-kebab-menu {
        display: block !important; position: static !important; width: auto !important; padding: 0 !important;
        border: 0 !important; border-radius: 0 !important; box-shadow: none !important; background: none !important;
    }
    .ek-sheet .pkm-section { padding: 12px 10px 10px; }
    .ek-sheet .pkm-section + .pkm-section { border-top: 1px solid #eef1f5; }
    .ek-sheet .pkm-section-title { margin-bottom: 4px; font-size: 13px; font-weight: 600; letter-spacing: 0; text-transform: none; color: #5b6573; }
    .ek-sheet .pkm-row { min-height: 48px; padding: 0; }
    .ek-sheet .pkm-row + .pkm-row { margin-top: 2px; }
    .ek-sheet .pkm-row .pkm-lbl { font-size: 15px; font-weight: 600; color: #14181d; }
    .ek-sheet .pkm-toggle-label { display: flex; align-items: center; width: 100%; min-height: 48px; }
    .ek-sheet .pkm-seg { padding: 3px; gap: 2px; border-radius: 11px; background: #eef1f6; }
    .ek-sheet .pkm-seg button { min-width: 62px; height: 38px; padding: 0 12px; border-radius: 9px; font-size: 14px; color: #5b6573; }
    .ek-sheet .pkm-seg button.bpf-seg-active { background: #fff; color: #14181d; box-shadow: 0 1px 2px rgba(15,23,42,.12); }
    .ek-sheet .pkm-session-btns { display: flex; gap: 8px; padding-top: 4px; }
    .ek-sheet .pkm-session-btn { flex: 1 1 0; height: 48px; justify-content: center; border-radius: 12px; font-size: 14.5px; }

    /* ── A card's leads behind one button (a quiz question, a flashcard) ── */
    .ek-card-lead { display: inline-flex; flex: 1 1 0; height: 44px; padding: 0 10px 0 12px; border-color: #cfd6e0; border-radius: 9px; }
    .ek-card-lead .ek-menu-pill-t { gap: 6px; }
    .ek-card-lead .ek-menu-pill-t small { font-size: 13px; }
    .ek-card-lead .ek-menu-pill-t b { font-size: 15px; }
    .ek-sheet .rq-leads, .ek-sheet .fc-lead-seg {
        display: grid !important; grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); gap: 8px; padding: 6px 8px 8px;
    }
    .ek-sheet .rq-lead, .ek-sheet .fc-lead-opt {
        width: auto; min-width: 0; height: 54px; padding: 0; border: 1px solid #dfe4ec; border-radius: 13px; background: #fff; color: #14181d;
        font: 600 16px/1 'Inter', system-ui, -apple-system, sans-serif; letter-spacing: .02em; cursor: pointer;
    }
    .ek-sheet .rq-lead.is-on, .ek-sheet .fc-lead-opt.is-on { border-color: #26408b; background: rgba(38,64,139,.08); color: #26408b; box-shadow: inset 0 0 0 1px #26408b; }
    .ek-sheet .player-hdr-leads { grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)) !important; }

    /* ── Paper wider than the phone: something to hold (js/mobile-shell.js initPan) ──
       Under a strip, a slim bar whose thumb is the part on screen; it drags, so the strip can
       be moved while the calipers or the lens own the touch. Under a 12-lead sheet, its two
       halves by name. */
    .ek-pan.is-on { display: block; background: #fff; border-bottom: 1px solid #e7ebf1; }
    .fc-rcard > .ek-pan { order: 1; }
    .ek-pan-track { position: relative; height: 28px; margin: 0 16px; touch-action: none; cursor: grab; -webkit-tap-highlight-color: transparent; }
    .ek-pan-track::before { content: ''; position: absolute; left: 0; right: 0; top: 12px; height: 4px; border-radius: 99px; background: #e6eaf0; }
    .ek-pan-track i { position: absolute; top: 12px; height: 4px; min-width: 24px; border-radius: 99px; background: #7b8696; transition: background .14s, height .14s, top .14s; }
    .ek-pan.is-held .ek-pan-track i { top: 11px; height: 6px; background: #26408b; }
    .ek-pan-pages { display: none; }
    .ek-pan.is-pages .ek-pan-track { display: none; }
    .ek-pan.is-pages .ek-pan-pages { display: flex; padding: 10px 16px 12px; }
    .ek-pan-pages button {
        flex: 1 1 0; height: 40px; border: 1px solid #cfd6e0; background: #fff; color: #404750; cursor: pointer;
        font: 600 14px/1 'Inter', system-ui, -apple-system, sans-serif; -webkit-tap-highlight-color: transparent;
    }
    .ek-pan-pages button:first-child { border-radius: 9px 0 0 9px; border-right: 0; }
    .ek-pan-pages button:last-child { border-radius: 0 9px 9px 0; }
    .ek-pan-pages button[aria-pressed="true"] { background: #14181d; border-color: #14181d; color: #fff; }
    .ek-pan-pages button:focus-visible { outline: 2px solid #26408b; outline-offset: 2px; }
    .ek-slides { scrollbar-width: none; overscroll-behavior-x: contain; }
    .ek-slides::-webkit-scrollbar { display: none; }
    /* a 12-lead sheet comes to rest on one half or the other */
    .ek-slides-pages { scroll-snap-type: x mandatory; }
    .ek-slides-pages .q12-sheet::before, .ek-slides-pages .q12-sheet::after,
    .ek-slides-pages .fc-paper-slide::before, .ek-slides-pages .fc-paper-slide::after { content: ''; position: absolute; top: 0; width: 1px; height: 1px; pointer-events: none; }
    .ek-slides-pages .q12-sheet::before, .ek-slides-pages .fc-paper-slide::before { left: 0; scroll-snap-align: start; }
    .ek-slides-pages .q12-sheet::after, .ek-slides-pages .fc-paper-slide::after { right: 0; scroll-snap-align: end; }

    /* ── Full screen on a phone held upright (js/ecg12-sheet.js adds .is-pan) ──
       The whole screen, not a card on a desk: the bands are the screen's width and the paper
       between them is as tall as the screen allows, sliding sideways a column at a time
       (the owner: "the full screen option ... doesnt actually make it any bigger at all"). */
    .ecg12-fs-modal.is-pan { align-items: stretch !important; justify-content: flex-start !important; background: #fff !important; animation: none !important; }
    .ecg12-fs-modal.is-pan .ecg12-fs-backdrop { display: none; }
    .ecg12-fs-modal.is-pan .ecg12-fs-sheet { height: 100%; border-radius: 0 !important; box-shadow: none !important; animation: none !important; }
    .ecg12-fs-modal.is-pan .ecg12-fs-paper {
        overflow-x: auto; overflow-y: hidden; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
        scroll-snap-type: x proximity; scrollbar-width: none; margin: auto 0;
    }
    .ecg12-fs-modal.is-pan .ecg12-fs-paper::-webkit-scrollbar { display: none; }
    .ecg12-fs-snap { position: absolute; top: 0; width: 1px; height: 1px; scroll-snap-align: start; pointer-events: none; }
    .ecg12-fs-modal.is-pan .ecg12-fs-hdr-top { flex-wrap: wrap; gap: 6px 8px; padding: 8px 8px 8px 16px; }
    .ecg12-fs-modal.is-pan .ecg12-fs-heading { flex: 1 1 0; min-width: 0; }
    .ecg12-fs-modal.is-pan .ecg12-fs-title { font-size: 16px; white-space: normal; }
    .ecg12-fs-modal.is-pan .ecg12-fs-sub { white-space: normal; }
    .ecg12-fs-modal.is-pan .ecg12-fs-close.iri-pill { order: 2; width: 44px; height: 44px; margin: 0; }
    .ecg12-fs-modal.is-pan .ecg12-fs-dx { order: 3; flex: 1 0 100%; justify-content: flex-start; margin: 0; }
    .ecg12-fs-modal.is-pan .ecg12-fs-dx:empty { display: none; }
    .ecg12-fs-modal.is-pan .ecg12-fs-hdr-data { display: block; padding: 8px 16px 10px; }
    .ecg12-fs-modal.is-pan .ecg12-fs-ro-list { justify-content: space-between; gap: 8px 12px; }
    .ecg12-fs-modal.is-pan .ecg12-fs-ro { padding: 0; border: 0; }
    .ecg12-fs-modal.is-pan .ecg12-fs-ro-list .ecg12-meas-irregular { margin-left: 0; }
    .ecg12-fs-modal.is-pan .ecg12-fs-stx { flex-wrap: wrap; gap: 6px 14px; margin: 8px 0 0; white-space: normal; }
    .ecg12-fs-modal.is-pan .ecg12-fs-foot { flex-wrap: wrap; justify-content: flex-start; gap: 6px 14px; padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px)); white-space: normal; }
    .ecg12-fs-modal.is-pan .ecg12-fs-brand img, .ecg12-fs-modal.is-pan .ecg12-fs-fmt, .ecg12-fs-modal.is-pan .ecg12-fs-cal > i:last-of-type { display: none; }
    .ecg12-fs-modal.is-pan .ecg12-fs-brand { display: block; flex: 1 1 100%; line-height: 1.5; }
    .ecg12-fs-modal.is-pan .ecg12-fs-brand .ecg12-fs-pos { margin-right: 10px; }
    .ecg12-fs-modal.is-pan .ecg12-fs-cal { flex-wrap: wrap; gap: 2px 0; }
    .ecg12-fs-modal.is-pan .ecg12-fs-acts { order: -1; flex: 1 0 100%; gap: 10px; }
    .ecg12-fs-modal.is-pan .ecg12-fs-act { flex: 1 1 0; min-width: 0; height: 50px; font-size: 16px; }

    /* ── True Sim, upright (round 6) ──
       Picking a rhythm is the first thing to do, and the monitor is pinned over the list. So
       before a rhythm is chosen the monitor is only its name line, and once one is playing it
       is a short screen with room under it to pick the next (it took 500 of 844 px). The
       cards give their two lines to the rhythm's name: six in a row read "Normal Si...". */
    @media (max-width: 700px) {
        body.sim-page #ecgScreen { height: clamp(150px, 24dvh, 200px) !important; }
        body.sim-page:not(:has(.sim-card-on)) .player-canvas-area,
        body.sim-page:not(:has(.sim-card-on)) .player-playbar,
        body.sim-page:not(:has(.sim-card-on)) .player-hdr-vitals { display: none !important; }
        body.sim-page .player-playbar { padding-top: 6px !important; }
        .sim-card { padding: 12px !important; }
        .sim-card-header { height: auto !important; align-items: flex-start !important; }
        .sim-card-title-row { flex: 1 1 auto; min-width: 0; }
        .sim-card-name {
            display: -webkit-box !important; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; white-space: normal !important;
            min-height: 2.5em; font-size: 14px !important; line-height: 1.25 !important;
        }
        .sim-card-lib, .sim-card-drag-handle, .sim-card-rename, .sim-card-delete { display: none !important; }    /* naming and ordering clips is a desktop job */
    }

    /* ── The libraries and My Progress, upright (round 6): less before the first record ──
       The page's name is in the top bar and in its heading; the sentence under the heading and
       the promotion for the condition explorer took 150 to 300 px ahead of the first card. */
    @media (max-width: 700px) {
        .lib-page-header { padding-bottom: 0 !important; margin-bottom: 10px !important; }
        .lib-page-header > p { display: none !important; }
        .lib-page-header h1 { font-size: 22px !important; }
        /* the condition explorer keeps its button; the card that advertised it goes */
        .lib-explorer-promo { padding: 0 !important; margin: 0 20px 12px !important; border: 0 !important; border-radius: 0 !important; background: none !important; box-shadow: none !important; }
        .lib-explorer-head { display: block !important; min-height: 0 !important; }
        .lib-explorer-head > :not(.lib-explorer-cta), .lib-explorer-cta .lib-explorer-cap { display: none !important; }
        .lib-explorer-cta { display: flex !important; align-items: center; }
        .lib-explorer-btn { height: 40px; font-size: 14px; }
        .lib-count-bar { margin: 4px 0 0 !important; padding: 0 2px !important; font-size: 12.5px; }
        .pg-title { display: none !important; }
        .pg-head { margin-bottom: 12px !important; }
    }

    /* ── Delineation Lab, upright (round 7) ──
       Practice is the beat and its six markers. The five stages were five stacked cards, 570 px
       ahead of the beat: they are one row to swipe. The card runs edge to edge so the beat has
       the whole width, its header is three tidy lines, and the keyboard hint is left to a desk.
       (The markers already answer a finger: js/delineation.js listens for pointer and touch.) */
    @media (max-width: 700px) {
        .dl-wrap { padding: 14px 0 40px !important; }
        .dl-head { padding: 0 16px; gap: 12px !important; margin-bottom: 14px !important; }
        .dl-title { font-size: 22px !important; }
        .dl-sub { font-size: 13.5px !important; }
        #screenPractice:not([hidden]) { display: flex; flex-direction: column; }
        .dl-stages {
            display: flex !important; gap: 8px !important; margin: 0 0 12px !important; padding: 2px 16px 4px !important;
            overflow-x: auto; scroll-snap-type: x proximity; scroll-padding-left: 16px; -webkit-overflow-scrolling: touch; scrollbar-width: none;
        }
        .dl-stages::-webkit-scrollbar { display: none; }
        .dl-stage { flex: 0 0 auto; width: 168px; padding: 10px 12px !important; scroll-snap-align: start; }
        .dl-stage-h { display: none !important; }
        .dl-card { border-left: 0 !important; border-right: 0 !important; border-radius: 0 !important; }
        .dl-cardhead { display: grid !important; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 6px 10px !important; padding: 14px 16px 10px !important; }
        .dl-cardhead h2 { grid-column: 1; grid-row: 1; margin: 0; font-size: 20px !important; white-space: nowrap; }
        .dl-cardhead .dl-progress { grid-column: 2; grid-row: 1; white-space: nowrap; }
        .dl-cardhead .dl-chip { grid-column: 1 / -1; grid-row: 2; justify-self: start; white-space: nowrap; }
        .dl-cardhead .dl-meta { grid-column: 1 / -1; grid-row: 3; margin: 0 !important; }
        .dl-main { padding: 10px 0 14px !important; }
        .dl-workhead { padding: 0 16px; }
        .dl-workhead .dl-eyebrow { display: none !important; }
        .dl-legend { display: block !important; padding: 10px 16px 0 !important; }
        .dl-legend span { display: block !important; font-size: 12px !important; line-height: 1.55; }
        .dl-legend span + span { margin-top: 4px; }
        .dl-legend i { margin-right: 7px; vertical-align: middle; }
        .dl-verdict { margin-left: 16px; margin-right: 16px; }
    }

    /* ── Classroom, upright (round 7): the class's name, then its two controls on their own line ──
       ("Assign set" was cut off at the edge of the card.) */
    @media (max-width: 700px) {
        .cls-dash-head { flex-wrap: wrap !important; gap: 14px !important; }
        .cls-dash-id { flex: 1 0 100%; }
        .cls-dash-head-right { flex: 1 0 100%; justify-content: space-between; flex-wrap: wrap; gap: 10px; margin: 0 !important; }
        .cls-assign-btn { min-height: 40px; }
    }

    /* ── Waveform Studio, upright (round 5) ──
       Its tools leave the top bar, where they ran off the edge, for a sheet behind one
       button. Its 12-lead keeps the standard layout at twice the width, two columns to a
       screen (limb leads, then chest leads), with the rhythm strip sliding under them: the
       Studio draws one canvas to the size of its box, so the box is simply made twice as wide
       inside a scroller. */
    @media (max-width: 700px) {
        .ek-more-btn {
            display: inline-flex; flex: none; align-items: center; justify-content: center; width: 44px; height: 44px; margin-left: auto;
            border: 0; border-radius: 10px; background: none; color: #404750; cursor: pointer; -webkit-tap-highlight-color: transparent;
        }
        .ek-more-btn:active { background: #eef1f6; }
        .ek-more-btn:focus-visible { outline: 2px solid #26408b; outline-offset: 1px; }
        .ek-more-btn + * { margin-left: 0 !important; }

        .seglab .slab { grid-template-rows: minmax(0, 1fr) auto 52px clamp(220px, 38dvh, 420px) !important; }
        .seglab .monWrap {
            grid-row: 1 !important; padding: 0 !important; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory;
            -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; scrollbar-width: none;
        }
        .seglab .monWrap::-webkit-scrollbar { display: none; }
        .seglab #gridCard { width: 200% !important; height: 100% !important; margin: 0 !important; border-radius: 0 !important; }
        .seglab #gridCard::before, .seglab #gridCard::after { content: ''; position: absolute; top: 0; width: 1px; height: 1px; pointer-events: none; }
        .seglab #gridCard::before { left: 0; scroll-snap-align: start; }
        .seglab #gridCard::after { right: 0; scroll-snap-align: end; }
        .seglab .slab > .ek-pan { grid-row: 2; grid-column: 1; background: transparent !important; border: 0 !important; }
        .seglab .slab > .ek-pan.is-pages .ek-pan-pages { padding: 6px 12px 8px; }
        .seglab .slab > .ek-pan .ek-pan-pages button { height: 36px; background: transparent; border-color: rgba(255,255,255,.2); color: #b9c4d0; }
        .seglab .slab > .ek-pan .ek-pan-pages button[aria-pressed="true"] { background: #a6cfd5; border-color: #a6cfd5; color: #10161d; }
        .seglab .vitals { grid-row: 3 !important; }
        .seglab .console { grid-row: 4 !important; }
    }
    /* the Studio's tools, in their sheet: each a row with its name and what it does */
    .ek-sheet #topbarLab { display: flex !important; flex-direction: column; align-items: stretch !important; gap: 2px !important; overflow: visible !important; min-width: 0; }
    .ek-sheet #topbarLab .bcModeSeg { align-self: stretch; height: 46px; margin: 2px 8px 10px; }
    .ek-sheet #topbarLab .bcModeSeg button { flex: 1 1 0; font-size: 14.5px; }
    .ek-sheet #topbarLab .labBtn {
        position: static; display: flex; align-items: center; justify-content: flex-start; gap: 16px; width: 100%; height: auto; min-height: 58px; padding: 8px 12px;
        border: 0; border-radius: 13px; background: none; box-shadow: none; color: #26323f; text-align: left;
    }
    .ek-sheet #topbarLab .labBtn:active { background: #f4f6fa; }
    .ek-sheet #topbarLab .labBtn .material-symbols-outlined { flex: none; width: 24px; font-size: 24px; }
    .ek-sheet #topbarLab .labBtn .lbl { display: inline !important; font-size: 15.5px; font-weight: 600; color: #14181d; }
    .ek-sheet #topbarLab .labBtn .labTip {
        display: block !important; position: static !important; transform: none !important; opacity: 1 !important; visibility: visible !important;
        width: auto !important; max-width: none !important; padding: 0 !important; background: none !important; box-shadow: none !important;
        color: #5b6573 !important; font-size: 13.5px; font-weight: 400; line-height: 1.4; text-align: left; white-space: normal; pointer-events: none;
    }
    .ek-sheet #topbarLab .labBtn .labTip::before, .ek-sheet #topbarLab .labBtn .labTip::after { display: none !important; }
    .ek-sheet #topbarLab .labBtn .labTip b { display: block; color: #14181d !important; font-size: 15.5px; font-weight: 600; }
    .ek-sheet #topbarLab .labBtn.bcast, .ek-sheet #topbarLab .broadcast-cta { display: none !important; }

    /* ── Favorites and Settings, at the foot of the drawer (js/mobile-shell.js moves them) ──
       The top bar keeps the menu, the page's name, search, the bell and the account. */
    .ek-drawer-tools { display: flex; flex-direction: column; gap: 2px; order: 99; margin-top: 6px; padding: 8px 10px calc(12px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid rgba(255,255,255,.09); }
    .ek-drawer-tools > button {
        display: flex !important; align-items: center; justify-content: flex-start !important; gap: 12px; width: 100% !important; height: 46px !important; margin: 0 !important; padding: 0 12px !important;
        border: 0 !important; border-radius: 10px !important; background: none !important; color: rgba(255,255,255,.84) !important; cursor: pointer;
    }
    .ek-drawer-tools > button::after { font: 500 14px/1 'Inter', system-ui, -apple-system, sans-serif; }
    .ek-drawer-tools > #favPanelBtn::after { content: 'Favorites'; }
    .ek-drawer-tools > #btnSettings::after { content: 'Settings'; }
    .ek-drawer-tools > button:active { background: rgba(255,255,255,.09) !important; }

    /* ── A session is the whole screen (round 4, 2026-10-05) ──
       A quiz question or a flashcard is one job. While one is on screen the site's top bar is
       put away (62 px back) and the session's own bar (leave, progress, count) is the top of
       the page. The action (Reveal, Missed it / Got it, Next) is fixed to the bottom edge,
       under the thumb, however long the card is. */
    html.ek-has-shell:has(#screenQuestion:not([hidden]), #screenLead12:not([hidden]), #screenBBB:not([hidden]), #fcReview:not([hidden])) .ek-topbar { display: none !important; }
    html.ek-has-shell:has(#screenQuestion:not([hidden]), #screenLead12:not([hidden]), #screenBBB:not([hidden]), #fcReview:not([hidden])) main { padding-top: 0 !important; }

    /* ── Quizzes and flashcards, upright: the card is the screen ──
       No gutters either side of the card and no rounded corners: the paper, the question and the
       answers each run the full width of the phone (the owner: "you should be taking up the full
       width ... don't keep unneeded white space that makes it all too narrow"). A card reads
       top to bottom: its tools in one row directly above the paper, the paper, the question. */
    @media (max-width: 700px) {
        .quiz-screen.q12-page { padding: 0 !important; }           /* the 12-lead screens carry their own gutter */
        .q12-wrap { padding: 0 0 104px !important; gap: 0 !important; }
        .fc-review { padding: 0 0 104px !important; }
        /* the session's bar */
        .q12-top, .fc-rv-top {
            position: sticky; top: 0; z-index: 25; height: 52px; box-sizing: border-box; margin: 0 !important; padding: 0 16px 0 4px !important; gap: 10px !important;
            background: #fff; border-bottom: 1px solid #e3e7ee;
        }
        .q12-close, .fc-rv-close { flex: none; width: 44px !important; height: 44px !important; border: 0 !important; background: none !important; box-shadow: none !important; }
        .q12-count, .fc-rv-count { min-width: 0 !important; font-size: 13px !important; }

        .q12-card { border: 0 !important; border-radius: 0 !important; box-shadow: none !important; overflow: visible !important; }
        .q12-bar { padding: 10px 12px !important; gap: 10px !important; min-height: 0 !important; }
        .q12-body { padding: 18px 16px 22px !important; }
        #screenEnd { padding: 24px 0 40px !important; }
        .q12-end-head, .q12-end-actions { padding: 0 16px; }
        .q12-end-card { border-radius: 0 !important; border-left: 0 !important; border-right: 0 !important; }
        /* the chooser: cards to the edges of a 12 px gutter, their text given the width */
        #screenSelect { padding: 12px 12px 48px !important; }
        .qsel-card { padding: 16px !important; gap: 12px !important; }
        .qsel-card-icon, .qsel-card-arrow { display: none !important; }

        /* THE TOOL ROW: Lead, Calipers, Magnifier, each a third of the width */
        .rq-tools, #fcBarRhythm .fc-tools { flex: 1 0 100%; gap: 8px; }
        .rq-tools > *, #fcBarRhythm .fc-tools > * {
            flex: 1 1 0; min-width: 0; height: 44px !important; padding: 0 8px; justify-content: center; border-radius: 10px; font-size: 14px; white-space: nowrap; overflow: hidden;
        }
        .rq-tools > .ek-card-lead, #fcBarRhythm .fc-tools > .ek-card-lead { justify-content: space-between; padding: 0 8px 0 12px; }
        .rq-lead, .fc-lead-opt { min-width: 48px; height: 44px; }       /* two leads sit in the bar: finger-sized */

        /* THE READOUT (rate, length) shares the line under the paper with the position bar */
        .ek-pan.is-on:not(.is-pages) { display: flex; align-items: center; gap: 12px; padding: 0 16px; }
        .ek-pan .ek-pan-track { flex: 1 1 auto; height: 34px; margin: 0; }
        .ek-pan .ek-pan-track::before, .ek-pan .ek-pan-track i { top: 15px; }
        .ek-pan.is-held .ek-pan-track i { top: 14px; }
        .ek-pan.is-still .ek-pan-track { visibility: hidden; }
        .ek-pan > .rq-scale, .ek-pan > .fc-scale { flex: none; margin: 0 !important; gap: 0 8px !important; font-size: 12px !important; white-space: nowrap; }
        .ek-pan > .rq-scale > span:not([id]), .ek-pan > .fc-scale > span:not([id]) { display: none; }     /* 25 mm/s and 10 mm/mV: the pulse on the paper says so */
        .ek-pan.is-pages > .rq-scale, .ek-pan.is-pages > .fc-scale { display: none !important; }

        /* THE QUESTION: a headline that leaves room for every answer on the same screen */
        .rq-body { padding: 16px 16px 18px !important; gap: 14px !important; }
        .rq-body-l { gap: 8px !important; }
        .rq-q { font-size: 26px !important; line-height: 1.12 !important; }
        .rq-q.is-long { font-size: 21px !important; line-height: 1.2 !important; }
        .rq-sub { font-size: 14px !important; line-height: 1.45 !important; }
        .rq-choices { gap: 8px !important; }
        .rq-choice { min-height: 52px; font-size: 16px; }
        .rq-foot { min-height: 0 !important; padding: 0 16px 8px !important; }
        .rq-foot-note { font-size: 13px; }

        /* A 12-LEAD CARD'S BAR: who it is, with its tools as icons at the right; under it the
           measurements as one even line (the owner: "the measurements appear very messy"). */
        .q12-bar:not(.rq-bar), .fc-rcard.is-12lead .fc-rc-bar {
            display: grid !important; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 0 8px !important; padding: 2px 6px 0 16px !important;
        }
        .fc-rcard.is-12lead #fcBarTwelve:not([hidden]) { display: contents; }
        .q12-id, .fc-12-id { grid-column: 1; grid-row: 1; min-height: 48px; flex-direction: row !important; align-items: center; gap: 10px !important; margin: 0 !important; font-size: 13.5px !important; }
        .q12-id b, .fc-12-id b { font-size: 16px !important; }
        .q12-tools, .fc-rcard.is-12lead .fc-rc-bar-r { grid-column: 2; grid-row: 1; margin: 0 !important; }
        .q12-tools, #fcTools12:not([hidden]) { display: flex; flex-wrap: nowrap; gap: 0; }
        .fc-rcard.is-12lead .fc-scale { display: none; }
        .q12-tools > *, #fcTools12 > * {
            flex: none; width: 44px; height: 44px !important; padding: 0 !important; justify-content: center; gap: 0 !important;
            border: 0 !important; border-radius: 10px !important; background: none !important; color: #26323f !important; font-size: 0 !important;
        }
        .q12-tools > * svg, #fcTools12 > * svg { width: 21px; height: 21px; }
        .q12-tools > .is-on, #fcTools12 > .is-on { background: #14181d !important; color: #fff !important; }
        .q12-ro-list, .fc-ro-list { grid-column: 1 / -1; grid-row: 2; }
        .q12-ro-list:not([hidden]), .fc-ro-list { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 12px; padding: 0 10px 12px 0; }
        .q12-ro, .fc-ro { gap: 4px !important; padding: 0 !important; border: 0 !important; }
        .q12-ro-k, .fc-ro-k { font-size: 11px !important; }
        .q12-ro-v, .fc-ro-v { font-size: 15.5px !important; }
        .q12-ro-v small, .fc-ro-v small { margin-left: 2px !important; font-size: 10.5px !important; }
        .q12-strip-note { max-width: 44%; white-space: normal !important; line-height: 1.3; }

        /* THE 12-LEAD QUIZZES: the task first, then the sheet it is about, the action at the foot */
        #screenLead12 .q12-foot, #screenBBB .q12-foot { display: contents; }
        #screenLead12 .q12-foot-l, #screenBBB .q12-foot-l { order: -1; flex: none !important; gap: 4px; padding: 14px 16px 4px; }
        .q12-display { font-size: 24px !important; line-height: 1.14 !important; }
        .q12-display.is-long { font-size: 21px !important; }
        .q12-sub { font-size: 13.5px !important; line-height: 1.45 !important; }
        #screenBBB .q12-acts { flex-direction: column; align-items: stretch; gap: 8px; margin: 0 !important; padding: 14px 16px 6px; }
        #screenBBB .q12-acts > * { width: 100%; min-height: 50px; justify-content: center; font-size: 15.5px; }

        /* THE PAPER slides sideways at a readable scale; it is never cut off */
        .fc-paper { overflow-x: auto !important; overflow-y: hidden !important; -webkit-overflow-scrolling: touch; }
        .fc-paper-track { position: static !important; justify-content: flex-start !important; width: max-content; min-width: 100%; height: 100%; }
        .fc-paper-track.is-out { display: none !important; }       /* no paper feed on a phone: the next card is simply there */
        .fc-paper-track.is-in { animation: none !important; }
        .q12-paper:not(.rq-paper) { overflow-x: auto !important; overflow-y: hidden !important; justify-content: flex-start !important; -webkit-overflow-scrolling: touch; }

        /* Flashcards: the review card */
        .fc-rcard { border: 0 !important; border-radius: 0 !important; box-shadow: none !important; overflow: visible !important; }
        .fc-rc-bar { padding: 10px 12px !important; gap: 10px !important; min-height: 0 !important; }
        .fc-rc-bar-l { flex: 1 0 100%; }
        .fc-rc-bar-r { margin-left: 0 !important; }
        .fc-rc-bar-r:not(:has(> :not([hidden]))), .fc-rcard:not(.is-12lead) .fc-rc-bar-r { display: none; }      /* its readout moved under the paper */
        .fc-body-cols { padding: 18px 16px 20px !important; gap: 14px !important; min-height: 0 !important; align-content: flex-start; }
        .fc-display { font-size: 28px !important; }
        .fc-display-12 { font-size: 24px !important; }
        .fc-q-sub, .fc-ask12-sub { font-size: 14.5px !important; }
        /* before the reveal, the worksheet's five blank lines are five words: what to work out */
        .fc-rows:has(.fc-row-blank) { flex-flow: row wrap !important; gap: 8px; border-top: 0 !important; }
        .fc-rows:has(.fc-row-blank) .fc-row { padding: 6px 12px !important; border: 1px solid #e3e7ee !important; border-radius: 99px; }
        .fc-rows:has(.fc-row-blank) .fc-row-k { font-size: 13.5px; color: #404750; }
        .fc-rows:has(.fc-row-blank) .fc-row-blank { display: none; }
        .fc-rc-foot, .fc-rcard.is-12lead .fc-rc-foot { padding: 16px 16px 6px !important; gap: 12px !important; border-top: 0 !important; }
        .fc-keys { display: none !important; }                      /* keyboard hints: a phone has no keys */
        .fc-rc-foot-l { flex: 1 1 100% !important; }
        .fc-rc-foot-l:not(:has(> :not(.fc-keys):not([hidden]))) { display: none; }
        .fc-rc-foot:not(:has(> .fc-rc-foot-l > :not(.fc-keys):not([hidden]))) { padding: 0 !important; min-height: 0 !important; }

        /* THE ACTION, fixed to the bottom edge */
        .fc-rc-acts, #screenLead12 .q12-acts, .rq-foot .q12-acts:has(> .q12-btn:not([hidden])) {
            position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; box-sizing: border-box; display: flex; align-items: center; gap: 10px 12px;
            margin: 0 !important; padding: 10px 16px calc(12px + env(safe-area-inset-bottom, 0px)) !important;
            background: #fff; border-top: 1px solid #e3e7ee; box-shadow: 0 -10px 24px rgba(15,23,42,.06);
        }
        .fc-rc-acts > button:not([hidden]) { flex: 1 1 0; width: auto !important; height: 54px; border-radius: 13px; font-size: 16.5px; }
        #screenLead12 .q12-acts .q12-marked, .rq-foot .q12-acts .q12-marked, .rq-foot .q12-acts .rq-foot-note { flex: 1 1 auto; min-width: 0; margin: 0 !important; }
        #screenLead12 .q12-acts .q12-btn, .rq-foot .q12-acts .q12-btn { flex: 1 1 auto; height: 54px; border-radius: 13px; font-size: 16.5px; }
    }
}