/* Approved education compact Mac presentation. Screen-only; original data/handlers retained. */
@media screen {
  /* Normalize legacy 99% zoom only for the active education page or its open editor. */
  html body:has(#pipeline-content:not(.hidden) #edu-content-inner:not(.hidden)),
  html body:has(#edu-editor-modal.active) { zoom:1!important; }
  html #edu-content-inner,
  html #edu-editor-modal { color:var(--ui-text-1); color-scheme:light; font:12px/1.4 var(--ui-font); }
  html #edu-content-inner *,
  html #edu-editor-modal * { box-sizing:border-box; }
  html #edu-content-inner [hidden],
  html #edu-editor-modal [hidden] { display:none!important; }
  html #edu-content-inner :focus-visible,
  html #edu-editor-modal :focus-visible { outline:2px solid var(--ui-accent-text)!important; outline-offset:-2px; }
  html #edu-content-inner { min-width:0; padding:12px 16px!important; background:var(--ui-surface); scrollbar-gutter:stable; }
  html #edu-content-inner :is(button,input,label,p,span,h3,div),
  html #edu-editor-modal :is(button,input,label,p,span,h3,div) { font-size:max(11px,1em); }
  html #edu-content-inner [class*='text-[10px]'],
  html #edu-editor-modal [class*='text-[10px]'] { font-size:var(--ui-text-caption)!important; }
  html #edu-content-inner [class*='text-gray-'],
  html #edu-editor-modal [class*='text-gray-'] { color:var(--ui-text-2)!important; }
  html #edu-content-inner [class*='text-indigo-'],
  html #edu-editor-modal [class*='text-indigo-'] { color:var(--ui-accent-text)!important; }
  html #edu-content-inner [class*='bg-indigo-6'],
  html #edu-editor-modal [class*='bg-indigo-6'] { background:var(--ui-accent-text)!important; color:var(--ui-on-accent)!important; }
  html #edu-content-inner [class*='bg-indigo-1'],
  html #edu-content-inner [class*='bg-indigo-5'],
  html #edu-editor-modal [class*='bg-indigo-1'],
  html #edu-editor-modal [class*='bg-indigo-5'] { background:var(--ui-accent-tint)!important; color:var(--ui-accent-text)!important; }
  html #edu-content-inner button,
  html #edu-editor-modal button { min-width:28px; min-height:28px; border-radius:5px!important; font:12px/1.3 var(--ui-font); box-shadow:none!important; }

  /* Original thumbnail/title list, one column at every width. */
  html #edu-content-inner .edu-list-heading { padding:0 0 10px; margin:0; border:0; border-bottom:1px solid var(--ui-line); border-radius:0!important; background:var(--ui-surface)!important; }
  html #edu-content-inner .edu-list-heading>div { flex-wrap:wrap; }
  html #edu-content-inner .edu-list-heading p { margin-top:5px; }
  html #edu-content-inner .edu-deck-list { display:flex; flex-direction:column; gap:0; }
  html #edu-content-inner .edu-deck-row { display:flex; align-items:center; gap:12px; padding:9px 4px; margin:0; border:0; border-bottom:1px solid var(--ui-line); border-radius:0!important; box-shadow:none!important; min-width:0; background:var(--ui-surface)!important; transition:none; }
  html #edu-content-inner .edu-cover { width:104px; flex:none; border:1px solid var(--ui-line); border-radius:5px!important; background:var(--ui-bg)!important; }
  html #edu-content-inner .edu-cover img { width:100%; aspect-ratio:16/9; object-fit:contain; }
  html #edu-content-inner .edu-cover>div { color:var(--ui-text-2); }
  html #edu-content-inner .edu-deck-text { order:0; gap:0; min-width:0; padding:0; }
  html #edu-content-inner .edu-deck-text h3 { font-size:var(--ui-text-body); font-weight:600!important; line-height:1.4; margin:2px 0; color:var(--ui-text-1)!important; }
  html #edu-content-inner .edu-deck-text p { font-size:var(--ui-text-caption); white-space:nowrap; display:block; overflow:hidden; text-overflow:ellipsis; margin:0; }
  html #edu-content-inner .edu-deck-text>span:last-child { display:none; }
  html #edu-content-inner .edu-deck-text>div { gap:5px; margin:0; flex-wrap:wrap; }
  html #edu-content-inner .edu-deck-text span { border-radius:4px!important; padding:1px 5px; font-weight:500!important; line-height:1.5; }
  html #edu-content-inner .edu-row-actions { position:static; order:2; flex:none; gap:4px; margin-left:auto; }
  html #edu-content-inner .edu-row-actions button { border:1px solid var(--ui-line-control); background:var(--ui-surface)!important; color:var(--ui-text-2)!important; }

  /* Same viewer IDs, original cyclic navigation and native fullscreen. */
  html #edu-content-inner .edu-view-tools { margin:0 0 8px; }
  html #edu-content-inner .edu-view-tools button { padding:0 9px; border:1px solid var(--ui-line-control); }
  html #edu-content-inner .edu-view-panel { border:1px solid var(--ui-line); border-radius:8px!important; box-shadow:none!important; min-width:0; }
  html #edu-content-inner .edu-view-heading { padding:8px 12px; background:var(--ui-surface-alt)!important; }
  html #edu-content-inner .edu-view-heading>div { flex-wrap:wrap; gap:6px; }
  html #edu-content-inner .edu-view-heading h3 { white-space:normal; overflow:visible; overflow-wrap:anywhere; font-size:var(--ui-text-callout); line-height:1.4; color:var(--ui-text-1)!important; font-weight:600!important; }
  html #edu-content-inner .edu-view-heading p { white-space:normal; overflow:visible; overflow-wrap:anywhere; font-size:var(--ui-text-caption); line-height:1.5; }
  html #edu-content-inner #edu-stage { display:flex; justify-content:center; align-items:center; background:var(--ui-text-1)!important; }
  html #edu-content-inner #edu-viewer-img { display:block; width:100%; height:auto; max-height:clamp(180px,calc(100dvh - 365px),620px); aspect-ratio:16/9; object-fit:contain; background:var(--ui-text-1)!important; }
  html #edu-content-inner #edu-stage>button { background:var(--ui-text-1)!important; color:var(--ui-on-accent)!important; border:1px solid var(--ui-on-accent); min-width:32px; min-height:32px; }
  html #edu-content-inner #edu-stage>div { background:var(--ui-text-1)!important; color:var(--ui-on-accent)!important; font-size:var(--ui-text-caption); }
  html #edu-content-inner .edu-view-thumbs { display:flex; overflow-x:auto; gap:6px; padding:7px 10px; scrollbar-gutter:stable; }
  html #edu-content-inner .edu-thumb { width:72px; min-height:40px; flex:none; }
  html #edu-content-inner .edu-thumb.border-indigo-500 { border-color:var(--ui-accent-text)!important; }
  html #edu-content-inner #edu-stage:fullscreen { width:100vw; height:100vh; background:var(--ui-text-1)!important; }
  html #edu-content-inner #edu-stage:fullscreen #edu-viewer-img { width:100%; height:100%; max-height:none; object-fit:contain; }
  html #edu-content-inner #edu-stage:-webkit-full-screen { width:100vw; height:100vh; background:var(--ui-text-1)!important; }
  html #edu-content-inner #edu-stage:-webkit-full-screen #edu-viewer-img { width:100%; height:100%; max-height:none; object-fit:contain; }

  /* Body-level original modal. Keep .modal.active for the shared popup history/scroll guard. */
  html #edu-editor-modal { z-index:20000; padding:24px 12px; background:var(--ui-scrim)!important; font:12px/1.5 var(--ui-font); }
  html #edu-editor-modal>div { max-width:680px; max-height:calc(100dvh - 48px); margin:0; border:1px solid var(--ui-line-control); border-radius:12px!important; background:var(--ui-bg)!important; overflow:hidden; box-shadow:var(--ui-elev-sheet)!important; }
  html #edu-editor-modal>div>div:first-child,
  html #edu-editor-modal>div>div:last-child { padding:10px 16px; flex-shrink:0; background:var(--ui-surface-alt)!important; }
  html #edu-editor-modal>div>div:nth-child(2) { padding:12px 16px; min-height:0; scrollbar-gutter:stable; overscroll-behavior:contain; }
  html #edu-editor-modal #edu-ed-title { font-size:var(--ui-text-title3); font-weight:600!important; color:var(--ui-text-1)!important; }
  html #edu-editor-modal>div>div:first-child button { font-size:22px; background:var(--ui-fill)!important; color:var(--ui-text-1)!important; }
  html #edu-editor-modal label { font-size:var(--ui-text-caption)!important; font-weight:500!important; }
  html #edu-editor-modal .text-red-500 { color:var(--ui-danger)!important; }
  html #edu-editor-modal input:not([type=file]) { height:28px; width:100%; min-width:0; border:1px solid var(--ui-line-control)!important; border-radius:5px!important; padding:0 7px!important; background:var(--ui-surface)!important; color:var(--ui-text-1)!important; font:12px var(--ui-font); box-shadow:var(--ui-elev-field)!important; }
  html #edu-editor-modal input::placeholder { color:var(--ui-text-2); opacity:1; }
  html #edu-editor-modal label:has(#edu-ed-file) { min-height:28px; display:inline-flex; align-items:center; border:1px solid var(--ui-line-control); border-radius:5px!important; background:var(--ui-surface)!important; color:var(--ui-accent-text)!important; padding:0 9px; }
  html #edu-editor-modal #edu-ed-grid { display:flex; gap:8px; overflow-x:auto; scrollbar-gutter:stable; padding-bottom:8px; scroll-snap-type:x proximity; }
  html #edu-editor-modal #edu-ed-grid>.edu-film-item { flex:0 0 168px; min-width:0; scroll-snap-align:start; border:1px solid var(--ui-line-control); border-radius:5px!important; background:var(--ui-surface)!important; }
  html #edu-editor-modal #edu-ed-grid>.edu-film-item>img { width:100%; aspect-ratio:16/9; object-fit:contain; background:var(--ui-text-1)!important; }
  html #edu-editor-modal #edu-ed-grid>.edu-film-item>div:not(.edu-film-actions) { font-size:var(--ui-text-caption); background:var(--ui-text-1)!important; color:var(--ui-on-accent)!important; }
  html #edu-editor-modal #edu-ed-grid .edu-film-actions { position:static; justify-content:flex-end; gap:4px; padding:4px; background:var(--ui-surface-alt)!important; }
  html #edu-editor-modal #edu-ed-grid .edu-film-actions button { width:28px; height:28px; border:1px solid var(--ui-line-control); background:var(--ui-surface)!important; color:var(--ui-text-2)!important; font-size:var(--ui-text-footnote); }
  html #edu-editor-modal #edu-ed-grid .edu-film-actions button:last-child { font-size:20px; color:var(--ui-danger)!important; }
  html #edu-editor-modal #edu-ed-grid button:disabled { opacity:.45; }
  html #edu-editor-modal #edu-ed-grid>div:only-child:not(.edu-film-item) { flex:1; min-width:0; }
}
@media screen and (hover:hover) {
  html #edu-content-inner .edu-deck-row:hover { background:var(--ui-surface-alt)!important; }
}
@media screen and (max-width:640px) {
  /* Keep the last actions/thumbnail scrollable clear of the existing floating help button. */
  html #edu-content-inner { padding:10px 8px 76px!important; }
  html #edu-content-inner .edu-deck-row { gap:8px; padding:8px 0; flex-wrap:wrap; }
  html #edu-content-inner .edu-cover { width:80px; }
  html #edu-content-inner .edu-deck-text { flex:1; min-width:0; }
  html #edu-content-inner .edu-deck-text h3 { font-size:var(--ui-text-footnote); }
  html #edu-content-inner .edu-row-actions { width:100%; justify-content:flex-end; margin-top:-2px; }
  html #edu-content-inner .edu-row-actions button { width:44px; height:44px; }
  html #edu-content-inner .edu-list-heading button,
  html #edu-content-inner .edu-view-tools button { min-height:44px; }
  html #edu-content-inner .edu-list-heading>div>div { flex-wrap:wrap; }
  html #edu-content-inner .edu-view-heading { padding:8px; }
  html #edu-content-inner #edu-stage>button { width:44px; height:44px; }
  html #edu-content-inner #edu-viewer-img { max-height:42dvh; }
  html #edu-content-inner .edu-thumb { min-height:44px; }
  html #edu-editor-modal { padding:24px 0 0; align-items:flex-end; }
  html #edu-editor-modal>div { max-width:100%; max-height:calc(100dvh - 24px); border-radius:14px 14px 0 0!important; border-bottom:0; }
  html #edu-editor-modal>div>div { padding-left:12px!important; padding-right:12px!important; }
  html #edu-editor-modal>div>div:last-child { padding-bottom:max(10px,env(safe-area-inset-bottom)); }
  html #edu-editor-modal button,
  html #edu-editor-modal input:not([type=file]),
  html #edu-editor-modal label:has(#edu-ed-file) { min-height:44px; }
  html #edu-editor-modal input:not([type=file]) { font-size:16px; }
  html #edu-editor-modal>div>div:first-child button { min-width:44px; }
  html #edu-editor-modal #edu-ed-grid>.edu-film-item { flex-basis:180px; }
  html #edu-editor-modal #edu-ed-grid .edu-film-actions button { width:44px; height:44px; }
}