/* The drawer as a game menu (0.18). Tabs are drawn plates, each wearing a
   cut-out sticker; each panel opens on a title card, a halftone plate with
   the panel's cut-out banner floating out of it on a hard ink shadow. The
   pictures come from tools/art/cut.py (admin/art.js lists them); without
   them the plain icon heads in admin.css still stand. Correct with every
   animation removed; the life is in admin-motion.css. Admin only. */

/* Tab plates: an inked plate each, pushed into its shadow when pressed; the
   chosen one is the yellow plate, sitting proud. */
#admin-tabs { gap: 4px; padding: 10px 8px 12px; }
#admin-tabs button {
  border: 2px solid var(--ink-line); border-radius: 6px; background: var(--surface);
  box-shadow: 2px 2px 0 var(--ink-line); padding: 6px 1px 5px; gap: 2px;
}
#admin-tabs button:hover { background: var(--paper-2); color: var(--ink); box-shadow: 3px 3px 0 var(--ink-line); translate: -1px -1px; }
#admin-tabs button:active { translate: 2px 2px; box-shadow: 0 0 0 var(--ink-line); }
#admin-tabs button[aria-selected="true"] { box-shadow: 3px 3px 0 var(--ink-line); translate: -1px -1px; }
#admin-tabs[data-glide]::after { bottom: 2px; height: 3px; }
.tab-art {
  display: block; width: 32px; height: 32px; object-fit: contain;
  filter: drop-shadow(1.5px 1.5px 0 var(--ink-line));
}
#admin[data-big] .tab-art { width: 38px; height: 38px; }
#admin-tabs button[aria-selected="true"] .tab-art { scale: 1.12; }

/* Title card. The banner is taller than the plate, so it breaks out of the
   top edge; the card leaves room above for that. */
.panel-head.title-card {
  position: relative; display: block; min-height: 124px; margin: 22px 0 18px; padding: 16px 18px 14px;
  color: #FFFFFF; border: 3px solid var(--ink-line); border-radius: 6px; box-shadow: var(--pop-lg);
  background: radial-gradient(circle, var(--plate-dot) 0 1.5px, transparent 2.1px) 0 0 / 10px 10px, var(--plate);
}
.title-card .title-words { position: relative; z-index: 1; max-width: 46%; display: grid; gap: 8px; justify-items: start; }
.title-card h2 {
  margin: 0; font-family: var(--display); font-weight: 400; font-size: 44px; line-height: 1.05; letter-spacing: .03em;
  color: #FFFFFF; -webkit-text-stroke: 5px #14162B; paint-order: stroke fill; text-shadow: 3px 3px 0 #14162B;
  padding-top: .08em; overflow-wrap: anywhere;
}
#admin[data-big] .title-card h2 { font-size: 52px; }
.title-card .chord { margin: 0; color: #E4E7FC; }
.title-card .chord kbd { background: #14162B; color: #FFE14D; border-color: #000; }
.panel-banner {
  position: absolute; right: 10px; bottom: 8px; width: 56%; height: calc(100% + 36px);
  object-fit: contain; object-position: right bottom; pointer-events: none;
  filter: drop-shadow(5px 5px 0 #14162B);
}
/* A layered banner: the same objects as the flat one, but a picture each,
   so they stand at three depths and each moves on its own period
   (admin-fx.css). The stack keeps the flat banner's box; the pieces overlap
   inside it, the front one biggest and on the deepest ink shadow. */
.banner-stack {
  position: absolute; right: 12px; bottom: 6px; width: 58%; height: calc(100% + 20px);
  pointer-events: none;
}
.banner-layer { position: absolute; bottom: 0; display: block; object-fit: contain; }
.banner-layer[data-n="1"] { right: 0; width: 44%; height: 100%; object-position: right bottom; z-index: 3; filter: drop-shadow(5px 5px 0 #14162B); }
.banner-layer[data-n="2"] { left: 0; width: 36%; height: 76%; object-position: left bottom; z-index: 2; filter: drop-shadow(4px 4px 0 #14162B); }
.banner-layer[data-n="3"] { left: 28%; width: 32%; height: 64%; object-position: center bottom; z-index: 1; filter: drop-shadow(3px 3px 0 #14162B); }

.panel-head.title-card + .lead { margin-top: -4px; }

/* A narrow drawer (a phone in the browser demo): the words over the top,
   the picture under them. */
@media (max-width: 520px) {
  .panel-head.title-card { min-height: 0; padding-bottom: 104px; }
  .title-card .title-words { max-width: none; }
  .title-card h2 { font-size: 36px; }
  .panel-banner, .banner-stack { width: calc(100% - 20px); height: 110px; }
}

/* An all-clear: the shield beside the line that says everything passed. */
.all-clear { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; padding: 8px 12px 8px 8px; border: 2px solid var(--ink-line); border-radius: var(--r); background: var(--paper-2); }
.all-clear p { margin: 0; }
.clear-art { display: block; width: 44px; height: auto; flex: none; filter: drop-shadow(3px 3px 0 var(--ink-line)); }

/* Empty states: a cut-out and one line where a list has nothing yet. */
.empty-state { grid-column: 1 / -1; display: grid; justify-items: center; gap: 6px; padding: 14px 12px 18px; text-align: center; color: var(--ink-2); }
.empty-state p { margin: 0; max-width: 34em; }
.empty-art { display: block; width: min(200px, 55%); height: auto; filter: drop-shadow(4px 4px 0 var(--ink-line)); }