/* ============================================================================
   Administration Appearance System (Owner UI/UX Program #5) — semantic token layer.
   Apollo administration/builder chrome ONLY. Website Design/content/Preview/public
   output/Static Export never consume these variables.
   Light is the default (:root); Dark and Apollo Original Blue override the same
   tokens. `Apollo Original Blue` intentionally carries Apollo's original
   administration palette so that appearance reproduces the pre-batch look.
   ============================================================================ */
:root{ --apollo-admin-bg:#f6f7f9;
 --apollo-admin-bg-deep:#eef1f5;
 --apollo-admin-surface:#ffffff;
 --apollo-admin-surface-2:#f4f6f9;
 --apollo-admin-surface-3:#eef2f7;
 --apollo-admin-border:#d7dce4;
 --apollo-admin-border-soft:#e8ecf1;
 --apollo-admin-border-strong:#b6bfcc;
 --apollo-admin-text:#141a24;
 --apollo-admin-text-soft:#2b3542;
 --apollo-admin-text-quiet:#41505f;
 --apollo-admin-muted:#5f6b7d;
 --apollo-admin-link:#1f4fd8;
 --apollo-admin-link-hover:#1638a0;
 --apollo-admin-focus:#2563eb;
 --apollo-admin-focus-outline:#b45309;
 --apollo-admin-accent:#2563eb;
 --apollo-admin-accent-hover:#1d4ed8;
 --apollo-admin-accent-contrast:#ffffff;
 --apollo-admin-code-text:#1e3a8a;
 --apollo-admin-success-bg:#e6f6ec;
 --apollo-admin-success-border:#9bd6b4;
 --apollo-admin-success-text:#14653c;
 --apollo-admin-danger-bg:#fdecec;
 --apollo-admin-danger-border:#e9a8a8;
 --apollo-admin-danger-strong:#b91c1c;
 --apollo-admin-danger-text:#8f1d1d;
 --apollo-admin-danger-accent:#b91c1c;
 --apollo-admin-link-soft-bg:rgba(37,99,235,.08);
 --apollo-admin-danger-soft-bg:rgba(185,28,28,.08);
 --apollo-admin-danger-hover-bg:rgba(185,28,28,.10);
 --apollo-admin-shadow:0 14px 45px rgba(15,23,42,.16); --apollo-admin-focus-ring:rgba(37,99,235,.18);
 --apollo-admin-danger-bg-deep:#f6dcdc;
 --apollo-admin-danger-border-strong:#d98a8a;}
html[data-apollo-appearance="light"]{ --apollo-admin-bg:#f6f7f9;
 --apollo-admin-bg-deep:#eef1f5;
 --apollo-admin-surface:#ffffff;
 --apollo-admin-surface-2:#f4f6f9;
 --apollo-admin-surface-3:#eef2f7;
 --apollo-admin-border:#d7dce4;
 --apollo-admin-border-soft:#e8ecf1;
 --apollo-admin-border-strong:#b6bfcc;
 --apollo-admin-text:#141a24;
 --apollo-admin-text-soft:#2b3542;
 --apollo-admin-text-quiet:#41505f;
 --apollo-admin-muted:#5f6b7d;
 --apollo-admin-link:#1f4fd8;
 --apollo-admin-link-hover:#1638a0;
 --apollo-admin-focus:#2563eb;
 --apollo-admin-focus-outline:#b45309;
 --apollo-admin-accent:#2563eb;
 --apollo-admin-accent-hover:#1d4ed8;
 --apollo-admin-accent-contrast:#ffffff;
 --apollo-admin-code-text:#1e3a8a;
 --apollo-admin-success-bg:#e6f6ec;
 --apollo-admin-success-border:#9bd6b4;
 --apollo-admin-success-text:#14653c;
 --apollo-admin-danger-bg:#fdecec;
 --apollo-admin-danger-border:#e9a8a8;
 --apollo-admin-danger-strong:#b91c1c;
 --apollo-admin-danger-text:#8f1d1d;
 --apollo-admin-danger-accent:#b91c1c;
 --apollo-admin-link-soft-bg:rgba(37,99,235,.08);
 --apollo-admin-danger-soft-bg:rgba(185,28,28,.08);
 --apollo-admin-danger-hover-bg:rgba(185,28,28,.10);
 --apollo-admin-shadow:0 14px 45px rgba(15,23,42,.16); --apollo-admin-focus-ring:rgba(37,99,235,.18);
 --apollo-admin-danger-bg-deep:#f6dcdc;
 --apollo-admin-danger-border-strong:#d98a8a;}
html[data-apollo-appearance="dark"]{ --apollo-admin-bg:#16181c;
 --apollo-admin-bg-deep:#101216;
 --apollo-admin-surface:#1d2026;
 --apollo-admin-surface-2:#242830;
 --apollo-admin-surface-3:#2b3038;
 --apollo-admin-border:#343a44;
 --apollo-admin-border-soft:#262a32;
 --apollo-admin-border-strong:#49505c;
 --apollo-admin-text:#eceef2;
 --apollo-admin-text-soft:#d5dae2;
 --apollo-admin-text-quiet:#b9c0cb;
 --apollo-admin-muted:#96a0ad;
 --apollo-admin-link:#a5b4fc;
 --apollo-admin-link-hover:#c7d2fe;
 --apollo-admin-focus:#8b95ff;
 --apollo-admin-focus-outline:#fcd34d;
 --apollo-admin-accent:#4f46e5;
 --apollo-admin-accent-hover:#4338ca;
 --apollo-admin-accent-contrast:#ffffff;
 --apollo-admin-code-text:#c7d2fe;
 --apollo-admin-success-bg:#14301f;
 --apollo-admin-success-border:#2f6f4a;
 --apollo-admin-success-text:#a7f3c6;
 --apollo-admin-danger-bg:#3a1618;
 --apollo-admin-danger-border:#8d3b3b;
 --apollo-admin-danger-strong:#ef4444;
 --apollo-admin-danger-text:#fca5a5;
 --apollo-admin-danger-accent:#f87171;
 --apollo-admin-link-soft-bg:rgba(165,180,252,.12);
 --apollo-admin-danger-soft-bg:rgba(239,68,68,.14);
 --apollo-admin-danger-hover-bg:rgba(239,68,68,.18);
 --apollo-admin-shadow:0 14px 45px rgba(0,0,0,.55); --apollo-admin-focus-ring:rgba(139,149,255,.24);
 --apollo-admin-danger-bg-deep:#42151a;
 --apollo-admin-danger-border-strong:#b4545a;}
html[data-apollo-appearance="blue"]{ --apollo-admin-bg:#0f172a;
 --apollo-admin-bg-deep:#0b1224;
 --apollo-admin-surface:#111827;
 --apollo-admin-surface-2:#172033;
 --apollo-admin-surface-3:#1e293b;
 --apollo-admin-border:#334155;
 --apollo-admin-border-soft:#1e293b;
 --apollo-admin-border-strong:#475569;
 --apollo-admin-text:#f8fafc;
 --apollo-admin-text-soft:#e5e7eb;
 --apollo-admin-text-quiet:#cbd5e1;
 --apollo-admin-muted:#94a3b8;
 --apollo-admin-link:#93c5fd;
 --apollo-admin-link-hover:#bfdbfe;
 --apollo-admin-focus:#60a5fa;
 --apollo-admin-focus-outline:#fbbf24;
 --apollo-admin-accent:#2563eb;
 --apollo-admin-accent-hover:#1d4ed8;
 --apollo-admin-accent-contrast:#ffffff;
 --apollo-admin-code-text:#dbeafe;
 --apollo-admin-success-bg:#14532d;
 --apollo-admin-success-border:#166534;
 --apollo-admin-success-text:#bbf7d0;
 --apollo-admin-danger-bg:#7f1d1d;
 --apollo-admin-danger-border:#991b1b;
 --apollo-admin-danger-strong:#b91c1c;
 --apollo-admin-danger-text:#fecaca;
 --apollo-admin-danger-accent:#fca5a5;
 --apollo-admin-link-soft-bg:rgba(147,197,253,.1);
 --apollo-admin-danger-soft-bg:rgba(248,113,113,.12);
 --apollo-admin-danger-hover-bg:rgba(248,113,113,.14);
 --apollo-admin-shadow:0 14px 45px rgba(0,0,0,.4); --apollo-admin-focus-ring:rgba(96,165,250,.22);
 --apollo-admin-danger-bg-deep:#450a0a;
 --apollo-admin-danger-border-strong:#f87171;}
/* Shared administration topbar (Owner Visual Review correction).
   Slim single row: page context on the left, compact utilities on the right — ONE appearance icon
   that cycles Light → Dark → Apollo Original Blue, and a compact Logout. This replaces the
   permanently visible three-button appearance group (Appearance Light Dark Apollo Blue) and the large
   bright-blue Logout control, which together stacked several rows of utility chrome before the
   breadcrumb and the content, especially at mobile widths. */
body.apollo-admin .backend-header{gap:.75rem;padding:.5rem 1.25rem;align-items:center;justify-content:space-between;flex-direction:row;flex-wrap:nowrap;min-height:0}
.bh-context{display:flex;flex-wrap:wrap;align-items:baseline;gap:.1rem .55rem;min-width:0}
.bh-title{color:var(--apollo-admin-text);font-size:1rem;line-height:1.3;letter-spacing:-.015em;min-width:0;overflow-wrap:anywhere}
.bh-sub{display:inline;color:var(--apollo-admin-muted);font-size:.85rem;min-width:0}
.bh-utilities{display:flex;align-items:center;gap:.4rem;flex:0 0 auto}
.bh-utilities form{margin:0}
.appearance-cycle{margin:0}
.appearance-cycle button,.admin-utility{display:inline-flex;align-items:center;justify-content:center;gap:.35rem;min-height:2.1rem;padding:.3rem .55rem;border:1px solid var(--apollo-admin-border);border-radius:10px;background:var(--apollo-admin-bg-deep);color:var(--apollo-admin-text-quiet);font-size:.82rem;font-weight:600;line-height:1;cursor:pointer;text-decoration:none}
.appearance-cycle button{width:2.35rem;padding:.3rem}
.backend-header .appearance-cycle button:hover,.backend-header .admin-utility:hover{background:var(--apollo-admin-surface-3);color:var(--apollo-admin-text);border-color:var(--apollo-admin-border-strong);text-decoration:none}
.backend-header .appearance-cycle button:focus-visible,.backend-header .admin-utility:focus-visible{outline:2px solid var(--apollo-admin-focus);outline-offset:2px}
.backend-header .bh-sub,.backend-header .admin-utility-label{display:inline;color:var(--apollo-admin-muted);font-size:.85rem}
.appearance-icon,.admin-utility-icon{display:block;flex:0 0 auto}
.backend-header .admin-utility-logout:hover{color:var(--apollo-admin-danger-text);border-color:var(--apollo-admin-danger-border-strong)}
@media(max-width:760px){body.apollo-admin .backend-header{display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:.5rem;padding:.45rem .85rem}.bh-context{flex-wrap:nowrap;overflow:hidden}.bh-title{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:.95rem}.bh-sub{white-space:nowrap}.backend-header .admin-utility-logout .admin-utility-label{display:none}.backend-header .admin-utility-logout{width:2.35rem;padding:.3rem}}
body{font-family:system-ui,-apple-system,Segoe UI,sans-serif;margin:0;min-height:100vh;background:var(--apollo-admin-bg);color:var(--apollo-admin-text-soft)}header{display:flex;gap:1rem;align-items:center;justify-content:space-between;padding:1rem 1.25rem;background:var(--apollo-admin-surface);color:var(--apollo-admin-text);border-bottom:1px solid var(--apollo-admin-border);box-shadow:0 16px 40px rgba(0,0,0,.18)}header strong{letter-spacing:-.015em}header nav{display:flex;gap:.85rem;align-items:center;flex-wrap:wrap}header a,a{color:var(--apollo-admin-link);text-decoration:none}a:hover{text-decoration:underline;color:var(--apollo-admin-link-hover)}header form{margin:0}main{max-width:980px;margin:clamp(1.25rem,5vh,3rem) auto;background:var(--apollo-admin-surface);color:var(--apollo-admin-text-soft);padding:clamp(1.25rem,3vw,2rem);border:1px solid var(--apollo-admin-border);border-radius:20px;box-shadow:0 24px 80px rgba(0,0,0,.24);box-sizing:border-box;width:min(980px,calc(100vw - 2rem))}h1,h2,h3{color:var(--apollo-admin-text);letter-spacing:-.02em}p,li,label{color:var(--apollo-admin-text-quiet)}ul{padding-left:1.25rem}label{display:block;margin:.9rem 0;font-size:.95rem}input,select,textarea,button{font:inherit;box-sizing:border-box;max-width:100%}input,select,textarea{width:100%;padding:.7rem .85rem;border:1px solid var(--apollo-admin-border-strong);border-radius:10px;background:var(--apollo-admin-bg);color:var(--apollo-admin-text);margin-top:.35rem}select{color-scheme:dark}textarea{min-height:7rem}input:focus,select:focus,textarea:focus{outline:2px solid var(--apollo-admin-focus);outline-offset:2px;border-color:var(--apollo-admin-focus)}button,.button{background:var(--apollo-admin-accent);color:var(--apollo-admin-accent-contrast);border:0;border-radius:10px;padding:.7rem 1rem;cursor:pointer;font-weight:700;display:inline-flex;align-items:center;justify-content:center}button:hover,.button:hover{background:var(--apollo-admin-accent-hover);text-decoration:none}form{margin:1rem 0}form[style*="display:inline"]{display:inline-block;margin:.2rem .25rem}code{background:var(--apollo-admin-surface-3);color:var(--apollo-admin-code-text);padding:.12rem .35rem;border-radius:6px;border:1px solid var(--apollo-admin-border)}[role=alert]{color:var(--apollo-admin-danger-text);background:var(--apollo-admin-danger-bg);border:1px solid var(--apollo-admin-danger-border);padding:.75rem;border-radius:10px}[role=status]{color:var(--apollo-admin-success-text);background:var(--apollo-admin-success-bg);border:1px solid var(--apollo-admin-success-border);padding:.75rem;border-radius:10px}.editor-section,.editor-container,.editor-columns,.editor-column,.editor-block{border-color:var(--apollo-admin-border);background:var(--apollo-admin-bg);color:var(--apollo-admin-text-soft)}.editor-preview{background:var(--apollo-page-bg,#fff);color:var(--apollo-text,#111);font-family:var(--apollo-font-body,system-ui,sans-serif);font-size:var(--apollo-base-font-size,16px);line-height:var(--apollo-line-height,1.5);border-radius:14px;overflow:hidden}.editor-preview h1,.editor-preview h2,.editor-preview h3{font-family:var(--apollo-font-heading,system-ui,sans-serif);color:var(--apollo-text,#111)}.editor-section,.editor-container,.editor-columns,.editor-column,.editor-block{border:1px solid var(--apollo-admin-border);border-radius:.65rem;margin:1rem 0;padding:1rem;max-width:var(--apollo-content-width,760px)}.editor-container{background:var(--apollo-admin-surface-2)}.editor-columns{display:grid;gap:1rem}.editor-columns.preset-two_equal{grid-template-columns:repeat(2,minmax(0,1fr))}.editor-columns.preset-three_equal{grid-template-columns:repeat(3,minmax(0,1fr))}.editor-columns.preset-one_third_two_thirds{grid-template-columns:1fr 2fr}.editor-columns.preset-two_thirds_one_third{grid-template-columns:2fr 1fr}.editor-column{min-width:0;background:var(--apollo-admin-surface)}.apollo-button,.editor-preview button{background:var(--apollo-accent,#2255ff);color:var(--apollo-accent-contrast,#fff)}.editor-preview img{max-width:100%;height:auto}@media (max-width:720px){header{align-items:flex-start;flex-direction:column}main{margin:1rem auto;padding:1.15rem;border-radius:16px}.editor-columns,.editor-columns.preset-two_equal,.editor-columns.preset-three_equal,.editor-columns.preset-one_third_two_thirds,.editor-columns.preset-two_thirds_one_third{display:block}.editor-section,.editor-container,.editor-columns,.editor-column,.editor-block{max-width:100%;overflow-wrap:anywhere}.editor-preview input,.editor-preview textarea,.editor-preview select{max-width:100%;box-sizing:border-box}}

body.apollo-admin{min-height:100vh;display:grid;grid-template-columns:260px minmax(0,1fr);background:var(--apollo-admin-bg);color:var(--apollo-admin-text-soft)}.backend-sidebar{position:sticky;top:0;height:100vh;padding:1.25rem;border-right:1px solid var(--apollo-admin-border);background:var(--apollo-admin-bg-deep)}.backend-sidebar strong{display:block;margin-bottom:1rem;color:var(--apollo-admin-text)}.backend-sidebar nav{display:grid;gap:.35rem}.backend-sidebar a{padding:.65rem .75rem;border-radius:12px;color:var(--apollo-admin-text-quiet);text-decoration:none}.backend-sidebar a.active,.backend-sidebar a:hover{background:var(--apollo-admin-surface-3);color:var(--apollo-admin-text)}.backend-app{min-width:0}.backend-header{display:flex;justify-content:space-between;gap:1rem;align-items:center;padding:1rem 1.5rem;border-bottom:1px solid var(--apollo-admin-border);background:var(--apollo-admin-surface)}.backend-header span{display:block;color:var(--apollo-admin-muted);font-size:.9rem}.backend-app main{padding:1.5rem;max-width:none;width:auto;margin:0;background:none;border:0;border-radius:0;box-shadow:none}.breadcrumbs{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap;padding:.9rem 1.5rem;color:var(--apollo-admin-muted)}.breadcrumbs a{color:var(--apollo-admin-link)}.breadcrumbs .crumb-current{color:var(--apollo-admin-text-soft);font-weight:600}.resource-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:1rem}.resource-card,.card{border:1px solid var(--apollo-admin-border);border-radius:18px;background:var(--apollo-admin-surface);padding:1rem;box-shadow:0 14px 45px rgba(0,0,0,.18)}.resource-card h2,.resource-card h3{margin-top:0}.pill{display:inline-block;padding:.18rem .55rem;border:1px solid var(--apollo-admin-border-strong);border-radius:999px;color:var(--apollo-admin-text-quiet)}.empty{border:1px dashed var(--apollo-admin-border-strong);border-radius:18px;padding:1rem;color:var(--apollo-admin-text-quiet);background:var(--apollo-admin-bg-deep)}.media-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:1rem}.media-thumb{max-width:100%;height:auto;border-radius:12px;border:1px solid var(--apollo-admin-border)}@media(max-width:760px){body.apollo-admin{display:block}.backend-sidebar{position:static;height:auto}.backend-sidebar nav{grid-template-columns:repeat(2,minmax(0,1fr))}.backend-header{display:block}.backend-app main{padding:1rem}}

.caps{display:flex;flex-wrap:wrap;gap:.4rem;align-items:center;margin:.5rem 0}
.form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1rem;margin:1rem 0}

.card form{max-width:900px}
.card-actions{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.5rem;align-items:center}
.muted{color:var(--apollo-admin-muted)}.meta{color:var(--apollo-admin-muted);font-size:.85rem;margin:.35rem 0 0}.actions{display:flex;flex-wrap:wrap;align-items:center;gap:.1rem .6rem;margin:.35rem 0 0}a.action-link,button.action-link{display:inline-flex;align-items:center;gap:.2rem;padding:.14rem .4rem;color:var(--apollo-admin-link);font-size:.85rem;font-weight:600;text-decoration:none;border:0;background:transparent;border-radius:6px;cursor:pointer;line-height:1.4}a.action-link:hover,button.action-link:hover{color:var(--apollo-admin-link-hover);text-decoration:underline;background:var(--apollo-admin-link-soft-bg)}a.action-link:focus-visible,button.action-link:focus-visible{outline:2px solid var(--apollo-admin-focus);outline-offset:2px}a.action-link.danger,button.action-link.danger{color:var(--apollo-admin-danger-accent)}a.action-link.danger:hover,button.action-link.danger:hover{color:var(--apollo-admin-danger-text);background:var(--apollo-admin-danger-hover-bg)}.media-list{list-style:none;padding:0;margin:0}.media-row{display:flex;align-items:center;flex-wrap:wrap;gap:.5rem .75rem;padding:.55rem 0;border-bottom:1px solid var(--apollo-admin-border-soft)}.media-row:last-child{border-bottom:0}.media-row .media-thumb{flex:none}.media-info{flex:1 1 auto;min-width:0;overflow-wrap:anywhere}.media-info code{display:inline-block}.media-actions{display:flex;gap:.4rem;flex:0 0 auto;flex-wrap:wrap}
.resource-card h2 a{color:var(--apollo-admin-text);text-decoration:underline;text-decoration-color:var(--apollo-admin-muted);text-decoration-thickness:2px;text-underline-offset:4px}.resource-card h2 a:hover{color:var(--apollo-admin-link);text-decoration-color:var(--apollo-admin-focus)}.resource-card h2 a:focus-visible{outline:2px solid var(--apollo-admin-focus);outline-offset:3px;border-radius:4px}

/* Menu UI A — canonical Menus, Menu Locations and Menu Items */
.menu-list{list-style:none;padding:0;margin:.75rem 0;display:grid;gap:.35rem}
.menu-list li{display:flex;align-items:center;flex-wrap:wrap;gap:.5rem;padding:.5rem .65rem;border:1px solid var(--apollo-admin-border);border-radius:12px;background:var(--apollo-admin-bg-deep)}
.menu-list li.active{border-color:var(--apollo-admin-focus);background:var(--apollo-admin-surface-2)}
.menu-list .menu-name{font-weight:600;color:var(--apollo-admin-text);text-decoration:none}
.menu-list .menu-name:hover,.menu-list .menu-name:focus-visible{color:var(--apollo-admin-link-hover);text-decoration:underline}
.menu-detail{margin:.85rem 0 0;padding:.7rem 0 0;border-top:1px solid var(--apollo-admin-border-soft);display:grid;gap:.5rem}
.card .inline-form{display:flex;flex-wrap:wrap;align-items:flex-end;gap:.5rem;max-width:none;margin:.55rem 0}
.card .inline-form label{margin:0;font-size:.85rem;color:var(--apollo-admin-text-quiet)}
.card .inline-form input,.card .inline-form select{width:auto;min-width:13rem;margin-top:.2rem}
.card .inline-form button{white-space:nowrap}
.table-wrap{overflow-x:auto;margin:.75rem 0}
.table{width:100%;border-collapse:collapse;min-width:34rem}
.table th,.table td{text-align:left;padding:.55rem .65rem;border-bottom:1px solid var(--apollo-admin-border-soft);vertical-align:middle}
.table thead th{color:var(--apollo-admin-muted);font-size:.78rem;text-transform:uppercase;letter-spacing:.04em;font-weight:600}
.table tbody th{font-weight:600;color:var(--apollo-admin-text-soft)}
.nav-list{list-style:none;padding:0;margin:.75rem 0}
.nav-item{padding:.6rem 0;border-bottom:1px solid var(--apollo-admin-border-soft)}
.nav-item:last-child{border-bottom:0}
.nav-item-main{display:flex;align-items:center;flex-wrap:wrap;gap:.5rem}
.nav-item-label{font-weight:600;color:var(--apollo-admin-text);overflow-wrap:anywhere}
.pill-muted{color:var(--apollo-admin-muted);border-color:var(--apollo-admin-border)}
.nav-edit{margin:.65rem 0 0;padding:.85rem;border:1px solid var(--apollo-admin-border);border-radius:12px;background:var(--apollo-admin-bg-deep);display:grid;gap:.5rem}
.nav-edit .form-grid{margin:0}
.nav-edit label{margin:0;font-size:.85rem}
.nav-edit .check,.card .check{display:flex;align-items:center;gap:.5rem;margin:.2rem 0}
.nav-edit .check input,.card .check input{width:auto;margin:0}
details.disclosure{margin:.5rem 0;border:1px solid var(--apollo-admin-border);border-radius:12px;background:var(--apollo-admin-bg-deep)}
details.disclosure>summary{cursor:pointer;padding:.6rem .8rem;color:var(--apollo-admin-text-quiet);font-weight:600}
details.disclosure>summary:hover{color:var(--apollo-admin-text)}
details.disclosure>summary:focus-visible{outline:2px solid var(--apollo-admin-focus);outline-offset:2px}
details.disclosure[open]>summary{border-bottom:1px solid var(--apollo-admin-border-soft)}
details.disclosure .disclosure-body{padding:.4rem .8rem .9rem}
.add-items{margin:.85rem 0 0;padding:.75rem 0 0;border-top:1px solid var(--apollo-admin-border-soft)}
.add-items h3{margin:0 0 .35rem}
button.action-link[disabled]{opacity:.35;cursor:not-allowed;text-decoration:none}
/* Menu UI B — one exposed submenu level (top-level items with their submenu items) */
.nav-sub{list-style:none;padding:0;margin:.5rem 0 0;border-left:2px solid var(--apollo-admin-border)}
.nav-sub .nav-item{padding:.5rem 0 .5rem .85rem;border-bottom:1px solid var(--apollo-admin-border-soft)}
.nav-sub .nav-item:last-child{border-bottom:0}
.nav-sub .nav-item-label{font-weight:500}
/* Menu Integrity D — computed target health: Needs Repair state and the explicit repair workflow */
.pill-danger{color:var(--apollo-admin-danger-accent);border-color:var(--apollo-admin-danger-strong);background:var(--apollo-admin-danger-soft-bg)}
.nav-repair-notice{color:var(--apollo-admin-danger-text);background:var(--apollo-admin-danger-soft-bg);border:1px solid var(--apollo-admin-danger-strong);border-radius:10px;padding:.6rem .75rem;margin:.5rem 0 0}
.nav-item.is-broken{border-left:2px solid var(--apollo-admin-danger-strong);padding-left:.6rem}
.nav-sub .nav-item.is-broken{padding-left:.85rem}
details.nav-repair{margin:.6rem 0 .2rem;border-color:var(--apollo-admin-danger-bg)}
details.nav-repair>summary{color:var(--apollo-admin-danger-accent)}
details.nav-repair>summary:hover{color:var(--apollo-admin-danger-text)}
details.nav-repair[open]>summary{border-bottom:1px solid var(--apollo-admin-danger-bg)}
.nav-repair .disclosure-body{display:grid;gap:.6rem}
.nav-repair label{display:block;font-size:.85rem;color:var(--apollo-admin-text-quiet)}
.nav-repair select,.nav-repair input{width:100%;min-width:0;box-sizing:border-box}
.repair-note{margin:0;color:var(--apollo-admin-muted);font-size:.85rem;overflow-wrap:anywhere}

@media(max-width:760px){
  .card .inline-form{flex-direction:column;align-items:stretch}
  .card .inline-form input,.card .inline-form select{width:100%;min-width:0}
  .nav-item-main{align-items:flex-start}
  /* stacked Location rows instead of horizontal scrolling */
  .table{min-width:0}
  .table thead{display:none}
  .table,.table tbody,.table tr,.table th,.table td{display:block;width:100%}
  .table tr{padding:.6rem 0;border-bottom:1px solid var(--apollo-admin-border-soft)}
  .table tr:last-child{border-bottom:0}
  .table th,.table td{border-bottom:0;padding:.15rem 0}
}

/* Pages UI Simplification — compact Website Pages management surface (Owner UI/UX Program #4).
   Additive only: existing components (.card, .button, .action-link, .pill, .empty, .meta) keep their
   rules so the later appearance batch can re-tokenise the whole admin palette in one place. */
/* The `secondary` button modifier is already used in Apollo markup (Pages, Page details, composer and
   Visual Editor chrome) but had no rule, so every secondary button rendered as a bright primary button.
   Implementing it in the established admin palette gives Search and Create Page their intended
   restrained weight. Purely visual, additive and easy for the appearance batch to re-tokenise. */
button.secondary,.button.secondary{background:var(--apollo-admin-surface);color:var(--apollo-admin-text-quiet);border:1px solid var(--apollo-admin-border);font-weight:600}
button.secondary:hover,.button.secondary:hover{background:var(--apollo-admin-surface-3);color:var(--apollo-admin-text);border-color:var(--apollo-admin-border-strong)}
button.secondary:focus-visible,.button.secondary:focus-visible{outline:2px solid var(--apollo-admin-focus);outline-offset:2px}
.pages-toolbar{display:flex;flex-wrap:wrap;align-items:flex-end;gap:.6rem 1rem;margin:.25rem 0 .5rem}
.pages-search{display:flex;flex-wrap:wrap;align-items:flex-end;gap:.4rem .6rem;margin:0;flex:1 1 20rem}
.pages-search label{margin:0;font-size:.85rem;color:var(--apollo-admin-text-quiet);flex:0 0 auto}
.pages-search input{width:auto;min-width:11rem;flex:1 1 11rem;margin-top:.2rem}
.pages-search button{white-space:nowrap}
.pages-create{margin-left:auto}
.page-list{list-style:none;padding:0;margin:.25rem 0 0}
.page-row{display:flex;align-items:center;gap:.5rem .75rem;padding:.55rem 0;border-bottom:1px solid var(--apollo-admin-border-soft)}
.page-row:last-child{border-bottom:0}
.page-row-main{display:flex;flex-wrap:wrap;align-items:center;gap:.35rem .6rem;flex:1 1 auto;min-width:0;overflow-wrap:anywhere}
.page-title{font-weight:600;color:var(--apollo-admin-text);text-decoration:none}
.page-title:hover,.page-title:focus-visible{text-decoration:underline}
.page-title:focus-visible{outline:2px solid var(--apollo-admin-focus);outline-offset:2px}
.page-slug{color:var(--apollo-admin-muted);font-size:.85rem;overflow-wrap:anywhere}
.page-empty{margin:.35rem 0 0}
details.disclosure.page-actions{position:relative;margin:0;border:0;background:transparent;flex:0 0 auto}
details.disclosure.page-actions>summary{list-style:none;display:inline-flex;align-items:center;justify-content:center;width:2.25rem;height:2.25rem;padding:0;border:1px solid var(--apollo-admin-border);border-radius:8px;background:var(--apollo-admin-bg-deep);color:var(--apollo-admin-text-quiet);font-size:1.05rem;font-weight:600;line-height:1}
details.disclosure.page-actions>summary::-webkit-details-marker{display:none}
details.disclosure.page-actions>summary:hover{color:var(--apollo-admin-text);border-color:var(--apollo-admin-border-strong)}
details.disclosure.page-actions[open]>summary{border-bottom:1px solid var(--apollo-admin-border)}
details.disclosure.page-actions .disclosure-body{position:absolute;right:0;top:calc(100% + .3rem);z-index:20;min-width:11.5rem;padding:.3rem;border:1px solid var(--apollo-admin-border);border-radius:12px;background:var(--apollo-admin-bg-deep);box-shadow:var(--apollo-admin-shadow)}
details.disclosure.page-actions.menu-up .disclosure-body{top:auto;bottom:calc(100% + .3rem)}
.page-actions-list{list-style:none;margin:0;padding:0}
.page-actions-list li{margin:0}
.page-actions-list .action-link{display:flex;width:100%;padding:.4rem .5rem;border-radius:8px}
.page-actions-list .action-link:hover,.page-actions-list .action-link:focus-visible{background:var(--apollo-admin-surface)}
@media(max-width:760px){
  .pages-search{flex:1 1 100%}
  .pages-search input{flex:1 1 100%}
  .pages-create{margin-left:0;width:100%;text-align:center}
  .page-row{align-items:flex-start;gap:.5rem}
  details.disclosure.page-actions>summary{width:2.5rem;height:2.5rem}
}

/* ============================================================================
   Visual Website Media Manager (Media Program #2) — additive only.
   Reuses the appearance tokens and the accepted `details.disclosure.page-actions` ⋮ pattern, so
   Light, Dark and Apollo Original Blue all apply and Media thumbnails keep their real colours.
   ============================================================================ */
.mm-head{display:grid;gap:.85rem}
.mm-head-top{display:flex;flex-wrap:wrap;align-items:baseline;gap:.35rem .9rem}
.mm-title{margin:0;font-size:1.35rem}
.mm-scope{margin:0}
.mm-actions{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center}
.mm-actions .button{text-decoration:none}
.mm-tools{display:flex;flex-wrap:wrap;align-items:flex-end;gap:.5rem .9rem;margin:0}
.mm-field{margin:0;font-size:.85rem;color:var(--apollo-admin-text-quiet)}
.mm-field input,.mm-field select{width:auto;min-width:9.5rem;margin-top:.2rem}
.mm-search{flex:1 1 16rem}
.mm-search input{width:100%;min-width:0}
.mm-clear{align-self:center}
.mm-scope-note{flex:1 1 100%;margin:.15rem 0 0;font-size:.8rem}
.mm-notice{margin:.6rem 0 0;border-radius:12px;padding:.6rem .75rem;border:1px solid var(--apollo-admin-border);background:var(--apollo-admin-surface-2);color:var(--apollo-admin-text-soft)}
p[role=alert].mm-notice{border-color:var(--apollo-admin-danger-border);background:var(--apollo-admin-danger-soft-bg);color:var(--apollo-admin-danger-text)}
p[role=status].mm-notice{border-color:var(--apollo-admin-success-border);background:var(--apollo-admin-success-bg);color:var(--apollo-admin-success-text)}
.mm-sep{color:var(--apollo-admin-border-strong)}
.mm-section{margin:1.1rem 0 0}
.mm-section-head{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem .8rem}
.mm-h2{margin:0;font-size:1.05rem}
.mm-grid{list-style:none;margin:.6rem 0 0;padding:0;display:grid;gap:.7rem}
.mm-folders{grid-template-columns:repeat(auto-fill,minmax(11rem,1fr))}
.mm-items{grid-template-columns:repeat(auto-fill,minmax(10.5rem,1fr))}
.mm-card{position:relative;border:1px solid var(--apollo-admin-border);border-radius:16px;background:var(--apollo-admin-surface)}
.mm-card:focus-within{border-color:var(--apollo-admin-border-strong)}
.mm-open{display:grid;gap:.35rem;padding:.8rem;color:var(--apollo-admin-text);text-decoration:none;border-radius:15px}
.mm-open:hover{text-decoration:none}
.mm-open:focus-visible{outline:2px solid var(--apollo-admin-focus);outline-offset:2px}
.mm-folder-icon{display:flex;align-items:center;justify-content:center;width:3rem;height:3rem;border-radius:12px;background:var(--apollo-admin-surface-3);color:var(--apollo-admin-link)}
.mm-name{font-weight:600;color:var(--apollo-admin-text);overflow-wrap:anywhere}
.mm-subline{display:flex;flex-wrap:wrap;gap:.25rem;color:var(--apollo-admin-muted);font-size:.78rem}
.mm-where{color:var(--apollo-admin-text-quiet)}
.mm-thumb-link{display:block;padding:.4rem}
.mm-thumb{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:contain;border-radius:12px;background:var(--apollo-admin-surface-2)}
.mm-item-body{display:grid;gap:.25rem;padding:0 .8rem .8rem}
.mm-item-body .mm-name{font-size:.9rem}
.mm-menu{position:absolute;top:.4rem;right:.4rem;z-index:2}
.mm-menu .disclosure-body{width:min(21rem,calc(100vw - 3rem))}
.mm-menu-form{display:grid;gap:.45rem;margin:.35rem 0 0;max-width:none}
.mm-menu-form label{margin:0;font-size:.8rem;color:var(--apollo-admin-text-quiet)}
.mm-menu-form input,.mm-menu-form select{width:100%;min-width:0;margin-top:.15rem}
.mm-menu-form button{justify-self:start}
.mm-menu-danger{border-top:1px solid var(--apollo-admin-border-soft);padding-top:.55rem}
.mm-danger{color:var(--apollo-admin-danger-text);border-color:var(--apollo-admin-danger-border-strong)}
.mm-empty{margin:.6rem 0 0;display:grid;gap:.4rem;justify-items:start}
.mm-empty h3,.mm-empty p{margin:0}
.mm-quiet{color:var(--apollo-admin-muted)}
.mm-detail-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:1.1rem;align-items:start;margin-top:.6rem}
.mm-detail-preview{display:block;border:1px solid var(--apollo-admin-border);border-radius:16px;background:var(--apollo-admin-surface-2);padding:.5rem}
.mm-detail-preview img{display:block;width:100%;height:auto;max-height:60vh;object-fit:contain;border-radius:12px}
.mm-detail-preview:focus-visible{outline:2px solid var(--apollo-admin-focus);outline-offset:2px}
.mm-detail-body{display:grid;gap:.6rem;min-width:0}
.mm-facts{margin:0;display:grid;gap:.2rem}
.mm-facts div{display:flex;flex-wrap:wrap;gap:.2rem .9rem;border-bottom:1px solid var(--apollo-admin-border-soft);padding:.35rem 0}
.mm-facts dt{color:var(--apollo-admin-muted);font-size:.78rem;text-transform:uppercase;letter-spacing:.03em;min-width:6.5rem}
.mm-facts dd{margin:0;color:var(--apollo-admin-text-soft);overflow-wrap:anywhere}
.mm-back{display:inline-block;margin-bottom:.2rem}
.mm-note{margin:.2rem 0 0}
.mm-move{margin:.3rem 0 0}
details.mm-new{position:relative;margin:0}
details.mm-new>summary,details.mm-menu>summary{list-style:none}
details.mm-new>summary::-webkit-details-marker,details.mm-menu>summary::-webkit-details-marker{display:none}
details.mm-new[open]>summary{border-bottom:1px solid var(--apollo-admin-border-soft)}
@media(max-width:760px){
  .mm-field,.mm-search{flex:1 1 100%}
  .mm-field input,.mm-field select{width:100%;min-width:0}
  .mm-tools button{width:100%}
  .mm-actions .button,details.mm-new>summary{flex:1 1 100%;justify-content:center}
  .mm-folders{grid-template-columns:repeat(auto-fill,minmax(9rem,1fr))}
  .mm-items{grid-template-columns:repeat(auto-fill,minmax(8.5rem,1fr))}
  .mm-detail-grid{grid-template-columns:minmax(0,1fr)}
  /* in-flow contextual menus on small screens: never an overlay that could overflow the viewport */
  details.disclosure.page-actions.mm-menu{position:static;margin:.1rem .55rem .6rem}
  details.disclosure.page-actions.mm-menu>summary{width:100%;height:2.4rem;justify-content:center;border-radius:10px}
  details.disclosure.page-actions.mm-menu .disclosure-body{position:static;width:auto;box-shadow:none;background:var(--apollo-admin-bg-deep)}
  .mm-menu .disclosure-body{width:auto}
}
/* Media Manager amendment — grid items must be allowed to shrink (auto min-width would let a wide
   destination <select> inside an in-flow contextual menu push the column past the viewport). */
.mm-card,.mm-menu-form,.mm-menu .disclosure-body,.mm-item-body{min-width:0}
.mm-menu-form input,.mm-menu-form select{max-width:100%}

/* Media Manager amendment 2 — the pre-existing Pages disclosure rule sets min-width:11.5rem, which is
   right for a desktop dropdown but wider than a 390 px media tile; the manager's in-flow small-screen
   menus must be allowed to shrink to their tile. */
@media(max-width:760px){
  details.disclosure.page-actions.mm-menu{min-width:0}
  details.disclosure.page-actions.mm-menu .disclosure-body{min-width:0;max-width:100%;width:100%;box-sizing:border-box}
  ul.mm-grid,ul.mm-grid>li{min-width:0}
}

/* Media Manager amendment 3 — the pre-existing Pages disclosure rule places details.disclosure
   .page-actions with position:relative, which outranks the manager's simpler .mm-menu selector and
   dropped the contextual button into the tile's bottom-left corner. The manager's contextual menu
   belongs in the tile's top-right corner on wide screens, and in-flow below the tile on small ones. */
details.disclosure.page-actions.mm-menu{position:absolute;top:.45rem;right:.45rem;z-index:3}
@media(max-width:760px){
  details.disclosure.page-actions.mm-menu{position:static;top:auto;right:auto;margin:.1rem .55rem .6rem}
}

/* ============================================================================
   Owner Visual Review correction — Media Manager UX (additive only).
   (a) the control card is tightened: concise context, then one wrapping bar that
       holds the actions (Upload / New folder) and the search + filter tools;
   (b) the contextual `⋮` menus are now action-first progressive disclosure: the
       menu lists the available actions, and choosing one reveals ONLY that
       action's focused form (field/destination + its button + Cancel) instead of
       expanding every operation form at once and turning a small tile into a long
       administration panel.
   Colours come from the existing --apollo-admin-* tokens, so Light, Dark and
   Apollo Original Blue all apply and Media thumbnails keep their real colours.
   ============================================================================ */
.mm-head{gap:.5rem}
.mm-head-top{align-items:center;gap:.2rem .7rem}
.mm-title{font-size:1.25rem}
.mm-scope{font-size:.85rem}
.mm-bar{display:flex;flex-wrap:wrap;align-items:flex-end;gap:.5rem .9rem}
.mm-bar .mm-actions{flex:0 0 auto}
.mm-bar .mm-tools{flex:1 1 24rem}
.mm-tools{gap:.4rem .8rem}
.mm-scope-note{font-size:.75rem;margin:.1rem 0 0}
.mm-action-list{list-style:none;margin:0;padding:0}
.mm-action-list>li{margin:0}
.mm-action-list>li+li{border-top:1px solid var(--apollo-admin-border-soft)}
.mm-action-link,details.mm-action>summary{display:flex;align-items:center;justify-content:space-between;gap:.5rem;width:100%;padding:.45rem .5rem;border-radius:8px;color:var(--apollo-admin-link);font-size:.85rem;font-weight:600;text-decoration:none;cursor:pointer}
.mm-action-link:hover,details.mm-action>summary:hover{background:var(--apollo-admin-surface);color:var(--apollo-admin-link-hover);text-decoration:none}
.mm-action-link:focus-visible,details.mm-action>summary:focus-visible{outline:2px solid var(--apollo-admin-focus);outline-offset:2px}
details.mm-action{display:block}
details.mm-action>summary{list-style:none}
details.mm-action>summary::-webkit-details-marker{display:none}
details.mm-action>summary::after{content:"\203A";display:inline-block;color:var(--apollo-admin-muted);font-size:1.05rem;line-height:1;transition:transform .12s ease}
details.mm-action[open]>summary{background:var(--apollo-admin-surface-2);color:var(--apollo-admin-text);border-radius:8px 8px 0 0}
details.mm-action[open]>summary::after{transform:rotate(90deg)}
details.mm-action.mm-action-danger>summary{color:var(--apollo-admin-danger-accent)}
.mm-action-body{padding:.1rem .5rem .55rem;border-top:1px solid var(--apollo-admin-border-soft);border-radius:0 0 8px 8px}
.mm-action-body .mm-menu-form{margin:0}
.mm-action-buttons{display:flex;flex-wrap:wrap;align-items:center;gap:.45rem;margin-top:.1rem}
.mm-action-note{margin:.2rem 0 .35rem;font-size:.78rem;line-height:1.35}
.mm-cancel{white-space:nowrap}
@media (prefers-reduced-motion: reduce){details.mm-action>summary::after{transition:none}}
@media(max-width:760px){
  .mm-head{gap:.45rem}
  .mm-head-top{gap:.1rem .6rem}
  .mm-bar{gap:.45rem}
  .mm-action-link,details.mm-action>summary{padding:.5rem .45rem}
}

/* ============================================================================
   Reusable Website Media Library selector (Media Program #3) — additive only.
   Media Program #4: the rules below are deliberately NOT scoped to the administration body class. The
   same component must work in every Human Media-selection surface, and the Visual Editor and the page
   composer are full-screen shells that do not carry it. Every selector stays namespaced (`.ml-*`,
   `dialog.apollo-media-library*`, the library-open body state), so it can never reach a Website's own
   content, and the Website stylesheet never contains any of it.
   The selection-focused companion to the Visual Website Media Manager. It reuses the accepted
   appearance tokens (--apollo-admin-*), the shared folder/thumbnail/card vocabulary and the
   `details.disclosure` pattern, so Light, Dark and Apollo Original Blue all apply, and Media
   thumbnails keep their real colours (nothing here filters, dims, blends or re-opacities an image).
   Every rule is class-scoped: no bare element selector is introduced, so nothing in this section can
   reach the Website canvas, Preview, public output or Static Export.
   ============================================================================ */
.ml-host{display:grid;gap:.4rem;justify-items:start}
.ml-host-readout{margin:0;font-size:.9rem;color:var(--apollo-admin-text-soft)}
.ml-host-note{margin:0}
.ml-surface{display:grid;gap:.85rem;min-width:0}
.ml-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.45rem .9rem}
.ml-head-text{min-width:0}
.ml-title{margin:0;font-size:1.18rem}
.ml-h2{margin:0;font-size:1.02rem}
.ml-h3{margin:1rem 0 0;font-size:.95rem}
.ml-scope{margin:.2rem 0 0;font-size:.82rem;color:var(--apollo-admin-muted)}
.ml-sep{color:var(--apollo-admin-border-strong)}
.ml-tools{display:flex;flex-wrap:wrap;align-items:flex-end;gap:.5rem .9rem;margin:0}
.ml-field{margin:0;font-size:.82rem;color:var(--apollo-admin-text-quiet)}
.ml-field input,.ml-field select{width:auto;min-width:9rem;margin-top:.2rem}
.ml-search{flex:1 1 15rem}
.ml-search input{width:100%;min-width:0}
.ml-scope-note{flex:1 1 100%;margin:.15rem 0 0;font-size:.8rem;color:var(--apollo-admin-muted)}
.ml-notice{margin:0;border-radius:12px;padding:.6rem .75rem;border:1px solid var(--apollo-admin-border);background:var(--apollo-admin-surface-2);color:var(--apollo-admin-text-soft)}
.ml-notice[role=alert]{border-color:var(--apollo-admin-danger-border);background:var(--apollo-admin-danger-soft-bg);color:var(--apollo-admin-danger-text)}
.ml-notice[role=status]{border-color:var(--apollo-admin-success-border);background:var(--apollo-admin-success-bg);color:var(--apollo-admin-success-text)}
.ml-section{display:grid;gap:.5rem}
.ml-section-head{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem .8rem}
.ml-grid{list-style:none;margin:0;padding:0;display:grid;gap:.7rem}
.ml-grid.ml-folders{grid-template-columns:repeat(auto-fill,minmax(11rem,1fr))}
.ml-grid.ml-items{grid-template-columns:repeat(auto-fill,minmax(10.5rem,1fr))}
.ml-card{position:relative;border:1px solid var(--apollo-admin-border);border-radius:16px;background:var(--apollo-admin-surface);min-width:0}
.ml-card:focus-within{border-color:var(--apollo-admin-border-strong)}
.ml-open{display:grid;gap:.35rem;padding:.8rem;color:var(--apollo-admin-text);text-decoration:none;border-radius:15px}
.ml-open:hover{text-decoration:none}
.ml-open:focus-visible{outline:2px solid var(--apollo-admin-focus);outline-offset:2px}
.ml-folder-icon{display:flex;align-items:center;justify-content:center;width:3rem;height:3rem;border-radius:12px;background:var(--apollo-admin-surface-3);color:var(--apollo-admin-link)}
.ml-name{font-weight:600;color:var(--apollo-admin-text);overflow-wrap:anywhere}
.ml-subline{display:flex;flex-wrap:wrap;gap:.25rem;color:var(--apollo-admin-muted);font-size:.78rem}
.ml-where{color:var(--apollo-admin-text-quiet)}
.ml-thumb{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:contain;border-radius:12px;background:var(--apollo-admin-surface-2)}
.ml-selected-pill{justify-self:start;border-radius:999px;padding:.1rem .5rem;font-size:.72rem;font-weight:600;background:var(--apollo-admin-accent);color:var(--apollo-admin-accent-contrast)}
.ml-selected-pill[hidden]{display:none}
.ml-card[data-apollo-library-selected="true"]{border-color:var(--apollo-admin-accent);background:var(--apollo-admin-link-soft-bg)}
.ml-card[data-apollo-library-selected="true"] .ml-open{box-shadow:inset 0 0 0 2px var(--apollo-admin-accent)}
.ml-empty{display:grid;gap:.4rem;justify-items:start}
.ml-empty h3,.ml-empty p{margin:0}
.ml-quiet{color:var(--apollo-admin-muted)}
.ml-menu-form{display:grid;gap:.45rem;margin:.35rem 0 0;max-width:none}
.ml-menu-form label{margin:0;font-size:.8rem;color:var(--apollo-admin-text-quiet)}
.ml-menu-form input,.ml-menu-form select{width:100%;min-width:0;margin-top:.15rem}
.ml-menu-form button{justify-self:start}
.ml-foot{position:sticky;bottom:0;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.5rem .9rem;margin-top:.9rem;padding:.7rem 0 .2rem;border-top:1px solid var(--apollo-admin-border-soft);background:var(--apollo-admin-bg)}
.ml-summary{margin:0;font-size:.9rem;color:var(--apollo-admin-text-soft)}
.ml-foot-actions{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;margin-left:auto}
.ml-cancel{text-decoration:none}
.ml-use-form{margin:0}
.ml-payload{margin:.6rem 0 0;max-height:16rem;overflow:auto;border:1px solid var(--apollo-admin-border);border-radius:12px;background:var(--apollo-admin-surface-2);color:var(--apollo-admin-code-text);padding:.6rem .7rem;font-size:.78rem;white-space:pre-wrap;overflow-wrap:anywhere}
.ml-returned{margin:.6rem 0 0;font-size:.9rem;color:var(--apollo-admin-text-soft)}
.ml-loading{margin:0;padding:.6rem 0;color:var(--apollo-admin-muted)}
/* The bounded modal surface: native <dialog> + showModal() provides the modal semantics. */
dialog.apollo-media-library{width:min(62rem,calc(100vw - 2rem));max-width:min(62rem,calc(100vw - 2rem));max-height:min(88vh,52rem);margin:auto;padding:0;border:1px solid var(--apollo-admin-border-strong);border-radius:18px;background:var(--apollo-admin-bg);color:var(--apollo-admin-text);box-shadow:var(--apollo-admin-shadow);overflow:auto}
dialog.apollo-media-library::backdrop{background:rgba(2,6,23,.55)}
dialog.apollo-media-library:not([open]){display:none}
.ml-body{padding:1.1rem}
body.apollo-media-library-open{overflow:hidden}
@media (prefers-reduced-motion: reduce){.ml-card{transition:none}}
@media(max-width:760px){
  .ml-field input,.ml-field select{width:100%;min-width:0}
  .ml-tools{gap:.45rem}
  .ml-tools .button{min-height:44px}
  /* every actionable control in the sheet keeps the 44 px touch minimum (the upload submit was 41 px) */
  dialog.apollo-media-library button,dialog.apollo-media-library .button{min-height:44px}
}
/* Mobile: an intentional near-full-screen selection sheet rather than a crushed desktop dialog. */
@media(max-width:560px){
  dialog.apollo-media-library{width:100vw;max-width:100vw;height:100dvh;max-height:100dvh;margin:0;border:0;border-radius:0}
  .ml-body{padding:.75rem .75rem 0}
  .ml-title{font-size:1.05rem}
  .ml-close{min-height:44px;min-width:44px}
  .ml-grid.ml-folders,.ml-grid.ml-items{grid-template-columns:1fr 1fr;gap:.55rem}
  .ml-open{padding:.6rem;gap:.3rem}
  .ml-folder-icon{width:2.5rem;height:2.5rem}
  .ml-upload>summary,.ml-new>summary{min-height:44px;display:inline-flex;align-items:center}
  .ml-foot{padding:.6rem 0 calc(.6rem + env(safe-area-inset-bottom,0px))}
  .ml-foot-actions{width:100%;justify-content:flex-end}
  .ml-foot-actions .button{min-height:44px;min-width:7.5rem}
}
@media(min-width:561px) and (max-width:900px){
  .ml-grid.ml-items{grid-template-columns:repeat(auto-fill,minmax(9.5rem,1fr))}
}