/*
 * The admin menu: a row of group tabs under the top of the page, an all-pages menu, a header card on each page and an
 * in-page list of the current group. The same layout as the DesignProLeads and Trailhead admin, drawn in Transit's look:
 * signage type on the tab row and the header title, the Live slab on the "Admin" lead, the current group tab like a platform sign.
 *
 * Every selector starts .adm- (except the :root block). Every colour is a Transit token of static/css/app.css
 * (--bg, --surface, --card, --ink, --muted, --line, --slab, --st-live, --st-working), so there is no colour literal in this file
 * and the light and dark themes both read. Loaded by
 * templates/partials/head.html on every page; it changes nothing on a page that has no .adm- markup. adm-on on the shell is
 * set by templates/app.html when the page belongs to the admin menu.
 * Author: Jeremiah Buttler
 */

:root {
  --adm-list-w: 13rem;        /* the in-page list column */
  --adm-tabs-h: 3rem;         /* the tab row */
  --adm-mega-col-w: 11.5rem;  /* narrowest column of the all-pages menu */
  --adm-ic-w: 1.125rem;       /* icon size */
  --adm-ic-sm: 0.875rem;      /* small icon (lock, pill) */
  --adm-ic-xs: 0.75rem;       /* the path chevron */
  --adm-ic-lg: 1.25rem;       /* the all-pages button */
  --adm-btn-w: 2.5rem;        /* the icon-only button */
  --adm-vh-w: 1px;            /* visually hidden box */
}

/* ── Icons ─────────────────────────────────────────────────────────────── */
.adm-icons { position: absolute; width: 0; height: 0; overflow: hidden; }
.adm-ic {
  width: var(--adm-ic-w); height: var(--adm-ic-w); flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.75;
  stroke-linecap: round; stroke-linejoin: round;
}
.adm-vh {
  position: absolute; width: var(--adm-vh-w); height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ── Focus ─────────────────────────────────────────────────────────────── */
.adm-tab:focus-visible, .adm-all-btn:focus-visible, .adm-mega-link:focus-visible, .adm-mega-sub a:focus-visible,
.adm-inlist-link:focus-visible, .adm-inlist-sub a:focus-visible {
  outline: 3px solid var(--focus); outline-offset: 2px;
}

/* ── The tab row: the Admin groups ─────────────────────────────────────── */
.adm-tabs {
  position: relative; box-sizing: border-box; height: var(--adm-tabs-h);
  display: flex; align-items: stretch; gap: 0.5rem;
  padding: 0 max(var(--gutter), calc((100% - var(--wrap)) / 2 + var(--gutter)));
  background: var(--surface); border-bottom: 1px solid var(--line);
}
.adm-tabs-row {
  flex: 1 1 auto; min-width: 0; display: flex; align-items: stretch;
  overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin;
}
.adm-tabs-lead {
  position: relative; display: flex; align-items: center; gap: 0.5rem; flex: none;
  margin: 0.4375rem 0.5rem 0.4375rem 0; padding: 0 0.875rem; border-radius: var(--r);
  font-family: var(--font-sign); font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  background: var(--st-live); color: var(--bg); white-space: nowrap;
}
.adm-tabs-lead::after { content: none; }
.adm-tab {
  display: flex; align-items: center; gap: 0.5rem; flex: none;
  height: 100%; padding: 0 1rem; box-sizing: border-box;
  font-family: var(--font-sign); font-size: 0.9375rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--muted); text-decoration: none; white-space: nowrap;
  border: 1px solid transparent; border-top: 4px solid transparent; border-bottom: 0;
  transition: background-color 0.12s, color 0.12s;
}
.adm-tab .adm-ic { color: var(--muted); }
.adm-tab:hover { background: var(--bg); color: var(--ink); }
.adm-tab.is-current {
  background: var(--bg); color: var(--ink); font-weight: 700;
  border-color: var(--line); border-top-color: var(--st-working);
}
.adm-tab.is-current .adm-ic { color: var(--st-working-ink); }

/* The all-pages button and menu. The panel hangs under the tab row, which is not a scroller, so nothing clips it. */
.adm-all { flex: none; align-self: center; position: static; }
.adm-all-btn {
  box-sizing: border-box; width: var(--adm-btn-w); height: 2.5rem; margin: 0; padding: 0;
  display: flex; align-items: center; justify-content: center; list-style: none; cursor: pointer;
  border: 1px solid var(--line-strong); border-radius: var(--r);
  background: var(--bg); color: var(--ink);
}
.adm-all-btn::-webkit-details-marker { display: none; }
.adm-all-btn .adm-ic { width: var(--adm-ic-lg); height: var(--adm-ic-lg); }
.adm-all[open] > .adm-all-btn { background: var(--st-live); color: var(--bg); border-color: var(--st-live); }
.adm-mega {
  position: absolute; left: 0; right: 0; top: 100%; z-index: 50;
  max-height: 75vh; overflow-y: auto;
  background: var(--bg); border-bottom: 1px solid var(--line);
  box-shadow: var(--shadow-3);
}
.adm-mega-cols {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(var(--adm-mega-col-w), 1fr)); gap: 1.5rem;
  padding: 1.25rem var(--gutter);
}
.adm-mega-col { min-width: 0; }
.adm-mega-head {
  display: flex; align-items: center; gap: 0.5rem; margin: 0 0 0.375rem; padding: 0 0.5rem 0.5rem;
  font-family: var(--font-sign); font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink); border-bottom: 3px solid var(--st-working); white-space: nowrap;
}
.adm-mega-link {
  display: flex; align-items: center; gap: 0.625rem; min-height: 2.375rem; padding: 0 0.5rem;
  border-radius: var(--r); font-size: 0.9375rem; font-weight: 500; color: var(--ink);
  text-decoration: none; white-space: nowrap;
}
.adm-mega-link .adm-ic { color: var(--muted); }
.adm-mega-link .adm-lock { margin-left: auto; width: var(--adm-ic-sm); height: var(--adm-ic-sm); }
.adm-mega-link:hover { background: var(--surface); color: var(--ink); }
.adm-mega-link.is-current { background: var(--st-live); color: var(--bg); font-weight: 700; }
.adm-mega-link.is-current .adm-ic { color: var(--bg); }
.adm-mega-sub { margin: 0.125rem 0 0.375rem 1rem; padding-left: 0.375rem; border-left: 2px solid var(--line); }
.adm-mega-sub a {
  display: flex; align-items: center; min-height: 1.875rem; padding: 0 0.5rem; border-radius: var(--r);
  font-size: 0.875rem; color: var(--muted); text-decoration: none; white-space: nowrap;
}
.adm-mega-sub a:hover { background: var(--surface); color: var(--ink); }
.adm-mega-key {
  display: flex; align-items: center; gap: 0.375rem; margin: 0; padding: 0.5rem var(--gutter);
  border-top: 1px solid var(--line); background: var(--surface);
  font-size: 0.875rem; font-weight: 600; color: var(--muted);
}
.adm-mega-key .adm-ic { width: var(--adm-ic-sm); height: var(--adm-ic-sm); }

/* ── The header card, the in-page list and the page ────────────────────── */
.adm-head {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 2rem;
  padding: 1.25rem 1.5rem;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-1);
}
.adm-head-main { min-width: 0; }
.adm-path {
  display: flex; align-items: center; gap: 0.375rem; margin: 0;
  font-family: var(--font-sign); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--muted); line-height: 1.3;
}
.adm-path .adm-ic { width: var(--adm-ic-xs); height: var(--adm-ic-xs); stroke-width: 2.25; }
.adm-head-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.875rem; margin-top: 0.375rem; }
.adm-head h1 { margin: 0; font-family: var(--font-sign); font-size: 1.9rem; line-height: 1.1; font-weight: 700; color: var(--ink); }
.adm-head-intro { margin: 0.5rem 0 0; color: var(--muted); line-height: 1.5; }
.adm-pill {
  display: inline-flex; align-items: center; gap: 0.375rem; height: 1.625rem; padding: 0 0.625rem; box-sizing: border-box;
  border-radius: 999px; font-size: 0.75rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase;
  line-height: 1; white-space: nowrap;
}
.adm-pill .adm-ic { width: var(--adm-ic-sm); height: var(--adm-ic-sm); }
.adm-pill--admin { background: var(--st-live); color: var(--bg); }
.adm-pill--staff { background: var(--bg); color: var(--ink); border: 1px solid var(--st-live); }

.adm-body {
  display: grid; grid-template-columns: var(--adm-list-w) minmax(0, 1fr); gap: 2rem;
  margin-top: 1.5rem; align-items: start;
}
.adm-main { min-width: 0; }

.adm-inlist { padding: 0.5rem; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); }
.adm-inlist-link {
  display: flex; align-items: center; gap: 0.625rem; min-height: 2.5rem; padding: 0.375rem 0.625rem;
  border-radius: var(--r); font-size: 0.9375rem; font-weight: 500; color: var(--ink);
  text-decoration: none; overflow-wrap: anywhere;
}
.adm-inlist-link + .adm-inlist-link, .adm-inlist-sub + .adm-inlist-link { margin-top: 0.125rem; }
.adm-inlist-link .adm-ic { color: var(--muted); }
.adm-inlist-link .adm-lock { margin-left: auto; width: var(--adm-ic-sm); height: var(--adm-ic-sm); }
.adm-inlist-link:hover { background: var(--surface); color: var(--ink); }
.adm-inlist-link.is-current { background: var(--st-live); color: var(--bg); font-weight: 700; }
.adm-inlist-link.is-current .adm-ic { color: var(--bg); }
.adm-inlist-sub { margin: 0.25rem 0 0.375rem 1.125rem; padding-left: 0.375rem; border-left: 2px solid var(--line); }
.adm-inlist-sub a {
  display: flex; align-items: center; min-height: 2.25rem; padding: 0 0.625rem; border-radius: var(--r);
  font-size: 0.9375rem; color: var(--muted); text-decoration: none; white-space: nowrap;
}
.adm-inlist-sub a + a { margin-top: 0.125rem; }
.adm-inlist-sub a:hover { background: var(--surface); color: var(--ink); }
.adm-inlist-sub a.is-current {
  background: var(--surface); color: var(--ink); font-weight: 700; box-shadow: inset 4px 0 0 var(--st-working);
}

/* ── Motion ────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .adm-tab { transition: none; }
}

/* ── Under 1280 px (as Trailhead and DesignProLeads): tab icons hidden and tighter tabs, so every group fits the row ── */
@media (max-width: 1279px) {
  .adm-tab .adm-ic { display: none; }
  .adm-tab { padding: 0 0.75rem; }
}

/* ── Under 1024 px: the tab row scrolls sideways inside itself; the list is a full-width card above the page ── */
@media (max-width: 1023px) {
  .adm-body { grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
  .adm-inlist-link { min-height: 2.75rem; }
  .adm-inlist-sub a { min-height: 2.75rem; }
}

/* ── A phone: the bell and the Admin link are on the top bar, so the tab row has the whole width ── */
@media (max-width: 860px) {
  .adm-tabs { padding: 0 14px; }
}

/* ── 640 px and under (holds at 375 px): every link and button is at least 44 px high ── */
@media (max-width: 640px) {
  .adm-head { flex-direction: column; gap: 0.75rem; padding: 1rem; }
  .adm-head h1 { font-size: 1.25rem; }
  .adm-all-btn { width: 2.75rem; height: 2.75rem; }
  .adm-mega-cols { padding: 1rem 14px; }
  .adm-mega-key { padding: 0.5rem 14px; }
  .adm-mega-link { min-height: 2.75rem; }
  .adm-mega-sub a { min-height: 2.75rem; }
}