/* Hallmark · checked: 2026-10-30 · genre: modern-minimal (inferred) · shape: app screen
 * floor: labels, focus, motion, overflow, tokens (tv layer) fixed · structural: printed, not rebuilt
 * waive 62: the library banner is drawn by script, so it cannot exist with scripting off
 * waive 56: .e-top and the table heads stick in different scroll containers
 * waive 15 (cards, .e-flash): hover lift and the flash keep their shadow fade; :focus-visible sets transition: none, so rings still appear at once
 * waive 48 (editor, material, workflow, auth): literals left in place to keep this a no-risk polish; tv.css is tokenised
 * built: the project · redesign: polish · v2.0.0 */
/* AuthorBean "TV" theme layer — Apple TV app inspired look for the studio chrome.
   Loaded LAST from index.html. Authoring surfaces only: learner/course styles (runtime.css,
   course-styles.css, player) are not touched. Remove the <link> to go back to the previous look. */

/* ---------- Tokens ---------- */
:root,:root[data-theme="light"]{
 --e-font:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display","Segoe UI",system-ui,Roboto,"Helvetica Neue",Arial,sans-serif;
 --wf-display:-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI",system-ui,Roboto,"Helvetica Neue",Arial,sans-serif;
 --e-bg:#f5f5f7;--e-sunk:#ececf0;--e-panel:#ffffff;--e-ink:#1d1d1f;--e-muted:#6e6e73;--e-faint:#6e6e73;
 --e-accent:#0071e3;--e-accent-hover:#0062c4;--e-accent-ink:#ffffff;--e-accent-soft:#e3efff;--e-accent-text:#0058b0;
 --e-line:#d9d9de;--e-line2:#aeaeb2;--e-fill:#e8e8ed;--e-fill2:#dcdce1;
 --studio-shadow-color:rgb(0 0 0 / .10);--studio-scrim:rgb(0 0 0 / .45);
 --e-shadow-xs:0 1px 2px rgb(0 0 0 / .06);--e-shadow-sm:0 2px 8px rgb(0 0 0 / .08);
 --e-shadow:0 8px 28px rgb(0 0 0 / .12);--e-shadow-lg:0 30px 80px rgb(0 0 0 / .22);
 --e-ring:0 0 0 4px rgb(0 113 227 / .35);
 /* TV layer extras */
 --tv-glass:rgb(255 255 255 / .72);--tv-glass-strong:rgb(255 255 255 / .86);--tv-glass-edge:rgb(255 255 255 / .6);
 --tv-cta:#1d1d1f;--tv-cta-ink:#ffffff;--tv-cta-hover:#000000;
 --tv-poster-shadow:0 6px 18px rgb(0 0 0 / .14);--tv-poster-lift:0 22px 44px rgb(0 0 0 / .26);
 --tv-hero-1:#cfe3ff;--tv-hero-2:#d8f3ec;--tv-hero-ink:#1d1d1f;--tv-hero-muted:#3a3a3c;
 --tv-ease:cubic-bezier(.2,.8,.2,1);
 /* Over photographs and the banner: the same in both themes */
 --tv-heart:#e0245e;
 --tv-media-accent:#2997ff;--tv-media-bg:#050608;--tv-media-btn:#f5f5f7;--tv-media-ink-06:rgb(255 255 255 / .06);--tv-media-ink-14:rgb(255 255 255 / .14);--tv-media-ink-16:rgb(255 255 255 / .16);--tv-media-ink-18:rgb(255 255 255 / .18);--tv-media-ink-22:rgb(255 255 255 / .22);--tv-media-ink-26:rgb(255 255 255 / .26);--tv-media-ink-28:rgb(255 255 255 / .28);--tv-media-ink-35:rgb(255 255 255 / .35);--tv-media-ink-42:rgb(255 255 255 / .42);--tv-media-ink-45:rgb(255 255 255 / .45);--tv-media-ink-75:rgb(255 255 255 / .75);--tv-media-shade-18:rgb(0 0 0 / .18);--tv-media-shade-42:rgb(0 0 0 / .42);--tv-media-shade-45:rgb(0 0 0 / .45);--tv-media-shade-55:rgb(0 0 0 / .55);--tv-media-shade-6:rgb(0 0 0 / .6);--tv-media-shade-82:rgb(0 0 0 / .82);--tv-on-media:#ffffff;--tv-on-media-2:#e5e5ea;--tv-star:#ffd60a;
 color-scheme:light;
}
:root[data-theme="dark"]{
 --e-bg:#050506;--e-sunk:#111113;--e-panel:#1c1c1e;--e-ink:#f5f5f7;--e-muted:#a1a1a6;--e-faint:#98989d;
 --e-accent:#2997ff;--e-accent-hover:#5cb0ff;--e-accent-ink:#000000;--e-accent-soft:#0e2a47;--e-accent-text:#7cc0ff;
 --e-line:#2c2c2e;--e-line2:#545458;--e-fill:#2c2c2e;--e-fill2:#3a3a3c;
 --studio-shadow-color:rgb(0 0 0 / .55);--studio-scrim:rgb(0 0 0 / .62);
 --e-shadow-xs:0 1px 2px rgb(0 0 0 / .5);--e-shadow-sm:0 2px 8px rgb(0 0 0 / .5);
 --e-shadow:0 10px 30px rgb(0 0 0 / .55);--e-shadow-lg:0 30px 90px rgb(0 0 0 / .7);
 --e-ring:0 0 0 4px rgb(41 151 255 / .45);
 --tv-glass:rgb(28 28 30 / .66);--tv-glass-strong:rgb(28 28 30 / .82);--tv-glass-edge:rgb(255 255 255 / .08);
 --tv-cta:#f5f5f7;--tv-cta-ink:#000000;--tv-cta-hover:#ffffff;
 --tv-poster-shadow:0 8px 22px rgb(0 0 0 / .6);--tv-poster-lift:0 28px 60px rgb(0 0 0 / .8);
 --tv-hero-1:#0b3a6e;--tv-hero-2:#0b4a43;--tv-hero-ink:#f5f5f7;--tv-hero-muted:#d1d1d6;
 color-scheme:dark;
}

/* ---------- Base ---------- */
html,body{background:var(--e-bg);overflow-x:clip}
body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;transition:background-color .3s ease,color .3s ease}
body,.e-app,#lib,.e-dialog,.e-btn,.e-in,.e-sel{font-family:var(--e-font)}
button:focus-visible,summary:focus-visible,.e-btn:focus-visible,.e-icbtn:focus-visible{outline:none;box-shadow:var(--e-ring)}
::selection{background:var(--e-accent);color:var(--e-accent-ink)}

/* ---------- Buttons: Apple pill controls ---------- */
.e-btn{border-radius:999px;font-weight:600;letter-spacing:-.005em;background:var(--e-fill);border-color:transparent;color:var(--e-ink)}
.e-btn:hover:not([disabled]){background:var(--e-fill2);border-color:transparent}
.e-btn.ghost{background:transparent}
.e-btn.ghost:hover:not([disabled]){background:var(--e-fill)}
.e-btn.primary,.ab-btn.primary{background:var(--tv-cta);color:var(--tv-cta-ink);border-color:transparent;box-shadow:none}
.e-btn.primary:hover:not([disabled]),.ab-btn.primary:hover{background:var(--tv-cta-hover);color:var(--tv-cta-ink);border-color:transparent}
.e-btn:not([disabled]):active,.e-icbtn:not([disabled]):active,.wf-fbtn:active,.lib-tile:active{transform:scale(.97);transition:transform .1s ease-out}
.e-icbtn{border-radius:999px}
.ab-btn{border-radius:999px;border-color:transparent;background:var(--e-fill);color:var(--e-ink)}

/* Inputs */
.e-in,.e-sel,.e-ta,.ab-input{background:var(--e-fill);border:1px solid transparent;border-radius:12px}
.e-in:hover,.e-sel:hover,.e-ta:hover{border-color:var(--e-line2)}
.e-in:focus,.e-sel:focus,.e-ta:focus,.ab-input:focus-visible{background:var(--e-panel);border-color:var(--e-accent);box-shadow:var(--e-ring)}

/* ---------- Library: sidebar rail (glass, like the TV app sidebar) ---------- */
.studio-rail{background:var(--tv-glass);-webkit-backdrop-filter:blur(30px) saturate(180%);backdrop-filter:blur(30px) saturate(180%);border-right:1px solid var(--tv-glass-edge)}
.studio-logo{color:var(--e-ink)}
.studio-nav{color:var(--e-muted);border-radius:14px;font-weight:500}
.studio-nav.active:before,.studio-nav:hover:before{background:var(--e-fill);border-radius:12px}
.studio-nav.active{color:var(--e-ink);font-weight:700}
.studio-nav.active:before{background:var(--e-fill2)}
.studio-fab{background:var(--tv-cta);color:var(--tv-cta-ink);border-radius:50%;box-shadow:var(--e-shadow-sm)}
.studio-fab:hover{background:var(--tv-cta-hover);box-shadow:var(--e-shadow)}

/* Top bar: floating translucent material, content scrolls under it */
.l-app .e-top{position:sticky;top:0;z-index:25;background:var(--tv-glass);-webkit-backdrop-filter:blur(30px) saturate(180%);backdrop-filter:blur(30px) saturate(180%);border-bottom:1px solid var(--tv-glass-edge)}
.e-name b{font-weight:700;letter-spacing:-.02em}
.e-mark i{border-radius:8px}

/* Page heading: large, bold, tight tracking */
.l-main{max-width:1440px}
.studio-breadcrumb{font-size:13px;font-weight:500;letter-spacing:0;color:var(--e-muted)}
.studio-heading h1{font-size:clamp(34px,4.2vw,52px);font-weight:800;line-height:1.05;letter-spacing:-.03em}
.studio-heading p{font-size:15px;color:var(--e-muted)}

.wf-pipe-l i,.wf-pipe i{height:4px;border-radius:2px;background:var(--e-fill2)}
.wf-pipe-l .d i,.wf-pipe .d{background:var(--e-ink)}
.wf-pipe-l .c i,.wf-pipe .c{background:var(--e-accent)}

/* ---------- Library layout ---------- */
.lib-wrap{gap:36px}
.lib-side{background:var(--e-panel);border:0;border-radius:22px;padding:14px 10px;box-shadow:var(--e-shadow-sm)}
.lib-vbtn{border-radius:12px;font-weight:500}
.lib-vbtn:hover{background:var(--e-fill)}
.lib-vbtn[aria-current="page"]{background:var(--e-fill2);color:var(--e-ink);font-weight:700}
.lib-vbtn[aria-current="page"] .e-ico{color:var(--e-ink)}
.lib-fhead h3{font-size:13px;letter-spacing:0;color:var(--e-muted)}

.studio-search{height:44px;border:1px solid transparent;border-radius:999px;background:var(--e-fill);color:var(--e-muted)}
.studio-search:focus-within{background:var(--e-panel);border-color:var(--e-accent);box-shadow:var(--e-ring);outline:none}
.lib-sort .e-sel{border-radius:999px;height:44px}

/* Shelf heading */
.lib-crumbs h2{font-size:clamp(22px,2.2vw,28px);font-weight:800;letter-spacing:-.025em}
.studio-count{font-size:13px;font-weight:600;color:var(--e-muted);background:var(--e-fill);border-radius:999px;padding:2px 10px;letter-spacing:0}
.lib-ctx{color:var(--e-muted)}

/* Stage filters: tvOS segmented pills */
.wf-filters{gap:8px}
.wf-fbtn{min-height:38px;padding:0 16px;border:0;border-radius:999px;background:var(--e-fill);color:var(--e-ink);font-weight:600;font-family:var(--e-font)}
.wf-fbtn:hover{background:var(--e-fill2)}
.wf-fbtn span{background:transparent;color:var(--e-muted);padding:0}
.wf-fbtn[aria-pressed="true"]{background:var(--tv-cta);color:var(--tv-cta-ink)}
.wf-fbtn[aria-pressed="true"] span{background:transparent;color:inherit;opacity:.7}

/* Folder tiles: a horizontal shelf that scrolls sideways */
.lib-tiles{display:grid;grid-auto-flow:column;grid-template-columns:none;grid-auto-columns:minmax(220px,260px);gap:16px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;scroll-padding-inline:4px;padding:6px 4px 14px;margin:0 -4px 20px;scrollbar-width:thin;scrollbar-color:var(--e-line2) transparent}
.lib-tiles>[role="listitem"]{scroll-snap-align:start}
.lib-tile{min-height:96px;border:0;border-radius:18px;padding:16px 18px;background:var(--e-panel);box-shadow:var(--tv-poster-shadow);transition:transform .35s var(--tv-ease),box-shadow .35s var(--tv-ease),background-color .2s}
.lib-tile .e-ico{width:30px;height:30px;color:var(--e-accent-text)}
.lib-tile b{font-size:16px;font-weight:700;letter-spacing:-.01em}
.lib-tile:hover,.lib-tile:focus-visible{transform:scale(1.04);box-shadow:var(--tv-poster-lift),var(--e-ring);border-color:transparent}
.lib-tile:hover{box-shadow:var(--tv-poster-lift)}

/* ---------- Course cards: poster-first, like TV app artwork ---------- */
.wf-grid:not(.studio-list){grid-template-columns:repeat(auto-fill,minmax(260px,1fr))!important;gap:36px 26px}
.wf-lcard{background:transparent!important;border:0!important;box-shadow:none!important;overflow:visible!important;border-radius:0!important;transform:none!important}
.wf-lcard:hover{transform:none!important;box-shadow:none!important}
.wf-grid:not(.studio-list) .wf-cover{height:auto;aspect-ratio:16/9;border-radius:18px;box-shadow:var(--tv-poster-shadow);padding:12px 14px;transform-origin:50% 60%;transition:transform .4s var(--tv-ease),box-shadow .4s var(--tv-ease)}
.wf-cover{isolation:isolate}
.wf-cover::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;border-radius:inherit;opacity:0;transition:opacity .4s var(--tv-ease);
 background:linear-gradient(115deg,var(--tv-media-ink-28) 0%,var(--tv-media-ink-06) 32%,transparent 55%);box-shadow:inset 0 0 0 1px var(--tv-media-ink-18)}
.wf-cover b{font-size:84px;font-weight:800;letter-spacing:-.04em;color:var(--tv-media-ink-42)}
.wf-lcard:hover .wf-cover,.wf-lcard:focus-within .wf-cover{transform:scale(1.045) translateY(-4px);box-shadow:var(--tv-poster-lift)}
.wf-lcard:hover .wf-cover::after,.wf-lcard:focus-within .wf-cover::after{opacity:1}
.wf-chip{z-index:2;background:var(--tv-media-shade-55);color:var(--tv-on-media);-webkit-backdrop-filter:blur(14px) saturate(180%);backdrop-filter:blur(14px) saturate(180%);font-size:11px;font-weight:700;letter-spacing:.02em;padding:4px 10px}
.lib-star{z-index:3;background:var(--tv-media-shade-45);color:var(--tv-on-media);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);width:40px;height:40px}
.lib-star[aria-pressed="true"]{color:var(--tv-star)}
.lib-star[aria-pressed="true"] .e-ico{fill:var(--tv-star);stroke:var(--tv-star)}
.wf-cb{padding:14px 2px 0;gap:6px}
.wf-cb h3{font-size:17px;font-weight:700;letter-spacing:-.015em;line-height:1.25}
.wf-cb .wf-eyebrow{font-size:12px;font-weight:700;letter-spacing:0;color:var(--e-muted)}
.wf-meta,.studio-updated{color:var(--e-muted)}
.studio-tags span{border-radius:999px;background:var(--e-fill);color:var(--e-ink);border:0}
.wf-foot{border-top:0;padding-top:6px}
.wf-acts .e-icbtn{border-radius:999px}
.wf-acts .e-icbtn:hover{background:var(--e-fill)}
@media (hover:hover) and (pointer:fine){
 .wf-grid:not(.studio-list) .wf-acts{opacity:0;transition:opacity .2s ease}
 .wf-grid:not(.studio-list) .wf-lcard:hover .wf-acts,.wf-grid:not(.studio-list) .wf-lcard:focus-within .wf-acts{opacity:1}
}
/* List view keeps a row surface */
.studio-list .wf-lcard{background:var(--e-panel)!important;border-radius:18px!important;box-shadow:var(--e-shadow-sm)!important;overflow:hidden!important}
.studio-list .wf-cb{padding:14px 18px}

/* Selection, bulk bar, empty states */
.lib-bulk{border-radius:18px;background:var(--tv-glass-strong);-webkit-backdrop-filter:blur(24px) saturate(180%);backdrop-filter:blur(24px) saturate(180%);border:1px solid var(--tv-glass-edge)}
.studio-empty-saved{border-radius:24px;background:var(--e-panel);border:0}
.studio-footer{border-top-color:var(--e-line);color:var(--e-muted)}

/* ---------- Editor chrome (authoring only) ---------- */
.e-app .e-top{background:var(--tv-glass-strong);-webkit-backdrop-filter:blur(30px) saturate(180%);backdrop-filter:blur(30px) saturate(180%);border-bottom:1px solid var(--tv-glass-edge)}
.wf-bar{background:var(--tv-glass);-webkit-backdrop-filter:blur(30px) saturate(180%);backdrop-filter:blur(30px) saturate(180%);border-bottom:1px solid var(--tv-glass-edge)}
.wf-steps ol{background:var(--e-fill);border-radius:999px;padding:4px}
.wf-steps button{border-radius:999px}
.wf-steps button:hover{background:var(--e-fill2)}
.wf-steps button[aria-current="step"]{background:var(--tv-cta);color:var(--tv-cta-ink);box-shadow:var(--e-shadow-sm)}
.wf-steps [aria-current="step"] .wf-dot{background:var(--tv-cta-ink);border-color:var(--tv-cta-ink);color:var(--tv-cta)}
.e-rail{background:var(--e-sunk)}
.e-rail button{border-radius:16px}
.e-rail button[aria-pressed="true"]{background:var(--e-fill2);color:var(--e-ink)}
.e-panel{background:var(--e-panel)}

/* Dialogs and overlays: thicker material, rounder corners */
.e-dialog,.ab-dialog,.ab-card{border-radius:28px;border:1px solid var(--tv-glass-edge);box-shadow:var(--e-shadow-lg)}
.e-dialog h2,.ab-dlg-head h2,.ab-title{font-weight:800;letter-spacing:-.025em}
.ab-overlay{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.ab-banner,.ab-toast{border-radius:999px;background:var(--tv-glass-strong);color:var(--e-ink);-webkit-backdrop-filter:blur(24px) saturate(180%);backdrop-filter:blur(24px) saturate(180%);border:1px solid var(--tv-glass-edge)}
.ab-auth{background:radial-gradient(80% 60% at 80% 0%,var(--tv-hero-1),transparent 60%),radial-gradient(70% 60% at 0% 100%,var(--tv-hero-2),transparent 60%),var(--e-bg)}

/* ---------- Accessibility preferences ---------- */
@media (prefers-reduced-motion:reduce){
 .wf-lcard:hover .wf-cover,.wf-lcard:focus-within .wf-cover,.lib-tile:hover,.lib-tile:focus-visible{transform:none}
 .e-btn:active,.e-icbtn:active,.wf-fbtn:active,.lib-tile:active{transform:none}
}
@media (prefers-reduced-transparency:reduce){
 .studio-rail,.l-app .e-top,.e-app .e-top,.wf-bar,.lib-bulk,.ab-banner,.ab-toast,.wf-cont-a .e-btn:not(.wf-dark-btn),.wf-chip,.lib-star{-webkit-backdrop-filter:none;backdrop-filter:none}
 .studio-rail,.l-app .e-top,.e-app .e-top,.wf-bar,.lib-bulk,.ab-banner,.ab-toast{background:var(--e-panel)}
}
@media (prefers-contrast:more){
 :root,:root[data-theme="light"]{--e-muted:#3a3a3c;--e-line:#8e8e93;--tv-glass-edge:#8e8e93}
 :root[data-theme="dark"]{--e-muted:#d1d1d6;--e-line:#8e8e93;--tv-glass-edge:#8e8e93}
 .studio-rail,.l-app .e-top,.e-app .e-top,.wf-bar{background:var(--e-panel)}
 .wf-fbtn,.lib-tile,.lib-side,.studio-search{border:1px solid var(--e-line2)}
}
@media (max-width:700px){
 .wf-grid:not(.studio-list){grid-template-columns:1fr!important}
 .studio-rail{border-right:0;border-top:1px solid var(--tv-glass-edge)}
}

/* ---------- Polish (2026-10-30) ---------- */
/* Focus rings appear at once, never fade in with a hover transition. */
:is(button,a,input,select,textarea,summary,[tabindex]):focus-visible{transition:none!important}
/* The footer heart is a drawn icon, not an emoji. */
.studio-heart{display:inline-block;width:14px;height:14px;margin-left:4px;vertical-align:-2px;fill:var(--tv-heart)}
/* Phones: the two add buttons share an icon, so they keep their words. */
@media (max-width:700px){.wf-tools #wfAddLesson.e-btn,.wf-tools #wfAddSection.e-btn{width:auto;padding:0 12px 0 10px;gap:4px}.wf-tools #wfAddLesson.e-btn .lbl,.wf-tools #wfAddSection.e-btn .lbl{position:static;width:auto;height:auto;overflow:visible;clip:auto}}
/* Phones: Review and Publish have no tools in the bar, so the empty band goes. */
@media (max-width:700px){.e-app[data-stage="review"]>.wf-bar,.e-app[data-stage="publish"]>.wf-bar{display:none}}
.studio-footer a{color:var(--e-accent-text);text-underline-offset:2px}
/* Media library and AI check: on wide screens they take the panel's column instead of floating over the page, so nothing on the page is covered. */
@media (min-width:1025px){
 .e-app.has-tool .e-body{grid-template-columns:var(--e-rail) var(--e-pw) minmax(0,1fr)}
 .e-media,.ai-drawer{width:var(--e-pw);box-shadow:none;border-right:1px solid var(--e-line)}
}
/* Toasts keep their natural width (the text no longer wraps into a narrow column beside the button). */
.e-toast{width:max-content;max-width:min(600px,calc(100% - 32px));text-align:left}