/* Admin surfaces (0.10): the drawer reads like a printed comic panel.
   Solid fills, ink outlines, hard offset shadows (--pop), a yellow caption
   box for each card's title, and the site's halftone art under the drawer.
   No translucency, no blur, no glow, no gradients: the owner's call after
   the glass pass looked like every other generated UI. Colours are tokens
   (theme.css) so light and dark both come from there. Motion lives in
   admin-motion.css; this file is correct with every animation removed.
   OhSnap styling, admin only. */

#admin {
  background: var(--paper); border-left: 3px solid var(--ink-line);
  box-shadow: -8px 0 0 rgba(20, 22, 43, .35);
  isolation: isolate; overflow: hidden;
}
#admin > * { position: relative; z-index: 1; }
/* The texture: halftone, lightened for the light theme, strongest at the
   foot of the drawer so the panel text sits on the calm middle. */
#admin::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: url(../img/admin/halftone.webp) center / 720px auto repeat;
  filter: var(--tex-filter); opacity: var(--tex-opacity); mix-blend-mode: var(--tex-blend);
  -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, .6) 0%, rgba(0, 0, 0, .1) 35%, rgba(0, 0, 0, .2) 70%, #000 100%);
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, .6) 0%, rgba(0, 0, 0, .1) 35%, rgba(0, 0, 0, .2) 70%, #000 100%);
}
#admin .ambient {
  position: absolute; right: -70px; bottom: -70px; width: 280px; height: 280px; z-index: 0; pointer-events: none;
  background: url(../img/admin/confetti.webp) center / contain no-repeat;
  filter: var(--tex-filter); mix-blend-mode: var(--tex-blend); opacity: var(--amb-opacity);
}

/* Head: flat brand blue with an ink rule under it. */
#admin-head { background: var(--blue); border-bottom: 3px solid var(--ink-line); }
#admin-head::after { display: none; }
#admin-theme, #admin-close, #admin-quit { border: 2px solid var(--ink-line); box-shadow: 2px 2px 0 var(--ink-line); background: #3543B8; }
#admin-quit { background: #E4485B; }
#admin-theme:hover, #admin-close:hover, #admin-quit:hover { background: #FFE14D; color: #14162B; }

/* Tabs: a solid strip; the chosen tab is a yellow block, and one blue bar
   slides under it. hub.js sets --tab-i and --tab-n; the columns are even
   so the bar's place is plain arithmetic and survives any resize. */
#admin-tabs { background: var(--surface); border-bottom: 3px solid var(--ink-line); }
#admin-tabs button { border-bottom-color: transparent !important; border-radius: 4px 4px 0 0; }
#admin-tabs button[aria-selected="true"] { background: var(--yellow); color: #14162B; }
#admin-tabs button[aria-selected="true"] .ico { color: #14162B; }
#admin-tabs[data-glide]::after {
  --col: calc((100% - 24px - (var(--tab-n, 1) - 1) * 4px) / var(--tab-n, 1));
  content: ""; position: absolute; bottom: -3px; height: 4px;
  left: calc(12px + var(--tab-i, 0) * (var(--col) + 4px)); width: var(--col);
  background: var(--blue);
}
#admin-tabs[data-glide="none"]::after { display: none; }

/* Cards: a comic panel each, with a yellow caption box for the title. */
.panel fieldset {
  position: relative; background: var(--surface); border: 2px solid var(--ink-line);
  border-radius: 6px; box-shadow: var(--pop);
}
.panel legend {
  background: var(--yellow); color: #14162B; border: 2px solid var(--ink-line);
  border-radius: 3px; padding: 2px 9px; letter-spacing: .08em;
}
.row input[type="text"], .row input[type="number"], .row select, .row textarea, .folder-pick input, .folder-pick select, .asset-pick select, .url-add input {
  border: 2px solid var(--ink-line); border-radius: 4px;
}
.row input:focus-visible, .row select:focus-visible, .row textarea:focus-visible, .folder-pick input:focus-visible,
.url-add input:focus-visible, .asset-pick select:focus-visible { border-color: var(--blue); box-shadow: 0 0 0 3px var(--yellow); }
.thumb { border-color: var(--ink-line); border-radius: 4px; }
.welcome { border: 2px solid var(--ink-line); border-radius: 6px; }
.layout-pick { border-color: var(--ink-line); border-radius: 4px; }

/* Toggles: every tick in a .row.check is a sliding switch. Still a real
   checkbox (keyboard, label click, form.js), only drawn differently. */
#admin .row.check input[type="checkbox"] {
  -webkit-appearance: none; appearance: none; position: relative; flex: none;
  width: 40px; height: 22px; border-radius: 999px; border: 2px solid var(--ink-line); background: var(--surface);
}
#admin .row.check input[type="checkbox"]::before {
  content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%;
  background: var(--ink-line);
}
#admin .row.check input[type="checkbox"]:checked { background: var(--blue); }
#admin .row.check input[type="checkbox"]:checked::before { translate: 18px 0; background: #FFE14D; }
#admin .row.check input[type="checkbox"]:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--yellow); }
#admin .row.check input[type="checkbox"]:disabled { opacity: .5; cursor: default; }
body[data-admin-theme="dark"] #admin .row.check input[type="checkbox"]:not(:checked)::before { background: #FFFFFF; }

/* Buttons: ink outline and a hard shadow; pressing pushes them into it. */
.btn { border: 2px solid var(--ink-line); border-radius: 5px; box-shadow: 2px 2px 0 var(--ink-line); background: var(--surface); }
.btn.primary { background: var(--blue); color: #fff; border-color: var(--ink-line); box-shadow: 2px 2px 0 var(--ink-line); }
.btn.warn { background: var(--yellow); color: #14162B; border-color: var(--ink-line); }
.btn.danger { background: var(--danger); color: #fff; border-color: var(--ink-line); }
.btn:hover, .btn.primary:hover, .btn.warn:hover, .btn.danger:hover { filter: none; border-color: var(--ink-line); box-shadow: 3px 3px 0 var(--ink-line); }
.btn:focus-visible { box-shadow: 2px 2px 0 var(--ink-line), 0 0 0 3px var(--yellow); }
.btn:disabled { box-shadow: none; }

/* Modal, cheat sheet, toasts: solid panels with an ink outline. */
#modal-root { background: rgba(20, 22, 43, .6); -webkit-backdrop-filter: none; backdrop-filter: none; }
.modal, #cheatsheet { background: var(--surface); border: 3px solid var(--ink-line); border-radius: 8px; box-shadow: var(--pop-lg); }
.toast { background: #14162B; border: 2px solid #000; border-radius: 6px; box-shadow: 3px 3px 0 #000; }
.toast, .toast.error, .toast.ok { border-left: 2px solid #000; }
.modal h2, #cheatsheet h2 { font-family: var(--display); font-weight: 400; letter-spacing: .04em; font-size: 22px; }