/* ============================================================
   YKYMF admin bar (admin/adminbar.css)

   The one header every admin page shares: a black band (logo + ADMIN tag),
   a 6px red strip, then a menu row. Markup comes from admin_bar_html() in
   admin/lib.php; the dropdowns and the phone menu are run by the small script
   that function prints inside the bar.

   Self-contained on purpose. Every selector starts with .yk-ab, the bar and
   everything in it is reset with `all`, and it sets its own fonts and colours,
   so it looks the same on pages that load /assets/house.css and on pages that
   bring only their own CSS - and a page's own rules (header {...}, nav a {...},
   button {...}, a body > * rule) cannot change it. It also does not touch the
   page: only the :root variable and the page-fit rules at the end.

   --admin-bar-h is the bar's height. Full-screen pages (height: 100dvh shells)
   subtract it: height: calc(100dvh - var(--admin-bar-h, 76px)).
   The values below are the no-script defaults; the bar's script keeps the
   variable in step with the real height (ResizeObserver).
   ============================================================ */

:root { --admin-bar-h: 82px; }                      /* band 42 + strip 6 + menu 34 */
@media (max-width: 980px) { :root { --admin-bar-h: 48px; } }   /* band 42 + strip 6; the menu is behind the button */

/* ---------- The bar, its tokens (day) ---------- */
.yk-ab {
  all: initial;
  --yk-ab-font: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --yk-ab-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --yk-ab-red: #d4232f;          /* the strip */
  --yk-ab-tag: #ff5468;          /* ADMIN on black: the same red, lifted so it reads */
  --yk-ab-band: #111111;
  --yk-ab-band-ink: #ffffff;
  --yk-ab-menu-bg: #ffffff;
  --yk-ab-menu-ink: #111111;
  --yk-ab-menu-ink-2: #3a3a37;
  --yk-ab-menu-line: #d8d8d2;    /* hairlines */
  --yk-ab-menu-rule: #111111;    /* hover underline, dropdown frame */
  --yk-ab-pop-bg: #ffffff;
  --yk-ab-hover: #f3f3ef;
  --yk-ab-mark: #d4232f;         /* current page */
  --yk-ab-focus: #111111;
  --yk-ab-shadow: 0 12px 28px rgba(0, 0, 0, .18);

  display: block;
  position: relative;
  flex: none;
  z-index: 2147483000;
  box-sizing: border-box;
  width: 100%;
  font: 500 14px/1.2 var(--yk-ab-font);
  color: var(--yk-ab-menu-ink);
  text-align: left;
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
}
/* Console pages keep the bar at the top while they scroll (below their modals). */
.yk-ab--sticky { position: sticky; top: 0; z-index: 50; }

/* ---------- Tokens (night: the device setting, or chosen in the footer) ---------- */
:root[data-theme="night"] .yk-ab,
:root[data-theme="dark"] .yk-ab {
  --yk-ab-menu-bg: #0e0f16;
  --yk-ab-menu-ink: #edeef4;
  --yk-ab-menu-ink-2: #b7bacb;
  --yk-ab-menu-line: rgba(255, 255, 255, .14);
  --yk-ab-menu-rule: rgba(255, 255, 255, .45);
  --yk-ab-pop-bg: #13141d;
  --yk-ab-hover: rgba(255, 255, 255, .08);
  --yk-ab-mark: #ff5468;
  --yk-ab-focus: #edeef4;
  --yk-ab-shadow: 0 16px 36px rgba(0, 0, 0, .55);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="day"]):not([data-theme="light"]) .yk-ab {
    --yk-ab-menu-bg: #0e0f16;
    --yk-ab-menu-ink: #edeef4;
    --yk-ab-menu-ink-2: #b7bacb;
    --yk-ab-menu-line: rgba(255, 255, 255, .14);
    --yk-ab-menu-rule: rgba(255, 255, 255, .45);
    --yk-ab-pop-bg: #13141d;
    --yk-ab-hover: rgba(255, 255, 255, .08);
    --yk-ab-mark: #ff5468;
    --yk-ab-focus: #edeef4;
    --yk-ab-shadow: 0 16px 36px rgba(0, 0, 0, .55);
  }
}

/* ---------- Reset everything inside ---------- */
.yk-ab *, .yk-ab *::before, .yk-ab *::after { all: unset; box-sizing: border-box; }
.yk-ab input[type="hidden"], .yk-ab script { display: none; }
.yk-ab :focus-visible { outline: 3px solid var(--yk-ab-focus); outline-offset: -3px; }

/* ---------- Black band: logo + ADMIN ---------- */
.yk-ab .yk-ab-band { display: block; background: var(--yk-ab-band); color: var(--yk-ab-band-ink); }
.yk-ab .yk-ab-band :focus-visible { outline-color: #ffffff; }
.yk-ab .yk-ab-bandin { display: flex; align-items: center; gap: 12px; height: 42px; padding: 0 24px; }
.yk-ab .yk-ab-brand { display: inline-flex; align-items: center; gap: 12px; height: 100%; color: var(--yk-ab-band-ink); cursor: pointer; text-decoration: none; }
.yk-ab .yk-ab-logo { display: block; flex: none; width: 49px; height: 26px; color: var(--yk-ab-band-ink); }
.yk-ab .yk-ab-tag { display: inline-block; font: 600 11px/1 var(--yk-ab-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--yk-ab-tag); }

/* ---------- Red strip ---------- */
.yk-ab .yk-ab-strip { display: block; height: 6px; background: var(--yk-ab-red); }

/* ---------- Menu row ---------- */
.yk-ab .yk-ab-nav {
  display: flex; align-items: stretch; gap: 2px;
  height: 34px; padding: 0 20px;
  background: var(--yk-ab-menu-bg); color: var(--yk-ab-menu-ink);
  border-bottom: 1px solid var(--yk-ab-menu-line);
}
.yk-ab .yk-ab-link, .yk-ab .yk-ab-trigger {
  display: inline-flex; align-items: center; height: 100%; padding: 0 12px;
  font: 600 13.5px/1 var(--yk-ab-font); color: var(--yk-ab-menu-ink);
  white-space: nowrap; text-decoration: none; cursor: pointer;
}
.yk-ab .yk-ab-link:hover, .yk-ab .yk-ab-trigger:hover { box-shadow: inset 0 -3px 0 var(--yk-ab-menu-rule); }
.yk-ab .yk-ab-group.is-open > .yk-ab-trigger { background: var(--yk-ab-hover); box-shadow: inset 0 -3px 0 var(--yk-ab-menu-rule); }
.yk-ab .yk-ab-link[aria-current], .yk-ab .yk-ab-trigger[aria-current] { box-shadow: inset 0 -3px 0 var(--yk-ab-mark); }
.yk-ab .yk-ab-spacer { display: block; flex: 1 1 auto; }
.yk-ab .yk-ab-form { display: flex; height: 100%; }

/* ---------- Dropdowns ---------- */
.yk-ab .yk-ab-group { position: relative; display: flex; height: 100%; }
.yk-ab .yk-ab-caret {
  display: inline-block; width: 0; height: 0; margin-left: 7px;
  border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid currentColor;
  transition: transform .15s ease;
}
.yk-ab .yk-ab-group.is-open .yk-ab-caret { transform: rotate(180deg); }
.yk-ab .yk-ab-pop {
  display: none; position: absolute; top: 100%; left: 0; z-index: 2;
  min-width: 230px; max-height: calc(100vh - 150px); overflow-y: auto; padding: 6px 0;
  background: var(--yk-ab-pop-bg); color: var(--yk-ab-menu-ink);
  border: 1px solid var(--yk-ab-menu-rule); border-top: 3px solid var(--yk-ab-red);
  box-shadow: var(--yk-ab-shadow);
}
.yk-ab .yk-ab-group.is-open > .yk-ab-pop { display: block; }
.yk-ab .yk-ab-group.yk-ab-flip > .yk-ab-pop { left: auto; right: 0; }
/* No script: open on hover or keyboard focus instead. */
.yk-ab:not(.yk-ab-js) .yk-ab-group:hover > .yk-ab-pop,
.yk-ab:not(.yk-ab-js) .yk-ab-group:focus-within > .yk-ab-pop { display: block; }

.yk-ab .yk-ab-pop li { display: block; }
.yk-ab .yk-ab-item {
  display: block; padding: 9px 18px;
  font: 500 14px/1.25 var(--yk-ab-font); color: var(--yk-ab-menu-ink);
  white-space: nowrap; text-decoration: none; cursor: pointer;
}
.yk-ab .yk-ab-item:hover, .yk-ab .yk-ab-item:focus-visible { background: var(--yk-ab-hover); }
.yk-ab .yk-ab-item[aria-current] { font-weight: 700; box-shadow: inset 4px 0 0 var(--yk-ab-mark); }
.yk-ab .yk-ab-sub { padding-left: 34px; font-size: 13px; color: var(--yk-ab-menu-ink-2); }
.yk-ab .yk-ab-pop li.yk-ab-sep { height: 1px; margin: 6px 10px; background: var(--yk-ab-menu-line); }

/* ---------- Menu button (phones; shown only when the script is running) ---------- */
.yk-ab .yk-ab-toggle { display: none; }
.yk-ab .yk-ab-burger {
  display: block; width: 18px; height: 2px; background: currentColor;
  box-shadow: 0 -6px 0 currentColor, 0 6px 0 currentColor;
}

/* ---------- Narrow screens: the menu folds behind the button ---------- */
@media (max-width: 980px) {
  .yk-ab .yk-ab-bandin { padding: 0 16px; }
  .yk-ab.yk-ab-js .yk-ab-toggle {
    display: inline-flex; align-items: center; justify-content: center; margin-left: auto;
    width: 42px; height: 34px; color: var(--yk-ab-band-ink); cursor: pointer;
    border: 2px solid rgba(255, 255, 255, .55);
  }
  .yk-ab.yk-ab-js .yk-ab-toggle[aria-expanded="true"] { background: rgba(255, 255, 255, .16); border-color: #ffffff; }

  .yk-ab .yk-ab-nav { flex-direction: column; align-items: stretch; gap: 0; height: auto; padding: 4px 16px 14px; }
  .yk-ab.yk-ab-js .yk-ab-nav { display: none; }
  .yk-ab.yk-ab-js.is-menu-open .yk-ab-nav {
    display: flex; position: absolute; top: 100%; left: 0; right: 0;
    max-height: calc(100vh - 56px); overflow-y: auto;
    border-bottom: 6px solid var(--yk-ab-red); box-shadow: var(--yk-ab-shadow);
  }
  .yk-ab .yk-ab-nav > * { flex: none; }
  .yk-ab .yk-ab-spacer { display: none; }
  .yk-ab .yk-ab-form { display: block; height: auto; }
  .yk-ab .yk-ab-link, .yk-ab .yk-ab-trigger {
    display: flex; width: 100%; height: 46px; padding: 0 2px;
    border-bottom: 1px solid var(--yk-ab-menu-line);
  }
  .yk-ab .yk-ab-trigger { justify-content: space-between; }
  .yk-ab .yk-ab-caret { margin-right: 4px; }
  .yk-ab .yk-ab-link:hover, .yk-ab .yk-ab-trigger:hover { box-shadow: none; }
  .yk-ab .yk-ab-link[aria-current], .yk-ab .yk-ab-trigger[aria-current] { box-shadow: inset 4px 0 0 var(--yk-ab-mark); padding-left: 12px; }
  .yk-ab .yk-ab-group { display: block; height: auto; }
  .yk-ab .yk-ab-group.is-open > .yk-ab-trigger { background: none; box-shadow: none; }
  .yk-ab .yk-ab-group.is-open > .yk-ab-trigger[aria-current] { box-shadow: inset 4px 0 0 var(--yk-ab-mark); }
  .yk-ab .yk-ab-pop {
    position: static; min-width: 0; max-height: none; padding: 2px 0 8px 12px;
    background: none; border: 0; box-shadow: none; overflow: visible;
  }
  .yk-ab .yk-ab-item { padding: 12px 8px; white-space: normal; }
  .yk-ab .yk-ab-sub { padding-left: 24px; }
  /* No script: nothing to toggle, so every group is simply listed. */
  .yk-ab:not(.yk-ab-js) .yk-ab-pop { display: block; }
}

@media print { .yk-ab { display: none; } }

/* ============================================================
   Full-screen pages sized to the whole window. Each rule is keyed on the
   page's folder (data-yk-ab-section, set by admin_bar_html) and only
   moves the page's own box down by the bar's height; --admin-bar-h is the
   bar's height (see the top of this file).
   ============================================================ */

/* Overhand: the TV mockup is a fixed layer over the whole window. */
.yk-ab[data-yk-ab-section="overhand"] ~ .app { top: var(--admin-bar-h); }

/* Game History: the family tree's viewport is "window minus its own 96px header". */
.yk-ab[data-yk-ab-section="game-history"] ~ .tree-viewport,
.yk-ab[data-yk-ab-section="game-history"] ~ * .tree-viewport { height: calc(100vh - 96px - var(--admin-bar-h)); }