/* randomknights.org secondary pages (privacy, read more, terms): the app bar.
   The same band, lamp, BETA chip, wordmark and site label as the home page,
   with the same numbers: the "app bar standard" block below is byte for byte
   the block of the same name at the end of the header section of home.css
   (pinned by scripts/check.mjs). The pages load the vendored kit.css before
   site.css and this file, and the vendored theme.js in the head, so the lamp
   toggles the band exactly as it does on the home page. */

/* The band is the owner's strip for the current theme, one image per theme. */
.hd {
  width: 100%;
  background: var(--rk-ground) url(/assets/art/band-dark.webp) center bottom / cover no-repeat;
}
html[data-ck-theme="lite"] .hd,
html[data-ck-theme="fallback"] .hd {
  background-image: url(/assets/art/band-lite.webp);
}
.hd-org img,
.site-brand img {
  width: 100%;
  height: auto;
}
.hd .ck-lampbtn .hd-lamp-svg {
  display: block;
  width: 100%;
  height: auto;
  transform: scaleX(-1);
}
.hd .hd-lamp-svg .cls-2 {
  fill: #6fcf8c;
}
.hd .hd-lamp-svg .cls-3 {
  fill: #f1c503;
}
.lamp-on .cls-1 {
  fill: #ff4124;
}
.lamp-off .cls-1 {
  fill: #2b2b2b;
}
.hd .ck-lampbtn .lamp-off,
html[data-ck-theme="lite"] .hd .ck-lampbtn .lamp-on,
html[data-ck-theme="fallback"] .hd .ck-lampbtn .lamp-on {
  display: none;
}
html[data-ck-theme="lite"] .hd .ck-lampbtn .lamp-off,
html[data-ck-theme="fallback"] .hd .ck-lampbtn .lamp-off {
  display: block;
}
.site-brand {
  margin: 0;
  font-size: 0;
  line-height: 0;
}
.site-brand a {
  display: block;
}

/* ---------------------------------------------------------- app bar standard
   APPBAR-STANDARD v1 (2026-10-13). The same numbers, in the same order, on
   randomknights.xyz, .llc and .org: out\appbar\SPEC.md in the rand0m root
   lane. Mock units (--ub): 1 unit = 1/2560 of the 2560 x 1440 mock frame,
   scaled to fit the window (width and height) and held at the 1440 frame the
   other two sites use, so the three bars are the same size in the same window.
   The items anchor to the window edges (lamp and chip left, label right) and
   the wordmark to the window center, as the mock's full-bleed band draws them.
   Every item (lamp, BETA chip, wordmark, site label) is centered on ONE
   midline, half the band tall, at every window size (owner instruction
   2026-10-13). Sizes and x positions are the mock's. The site label art
   (ORG) keeps its own drawing and width; only its right edge and midline are
   standard. */
.hd {
  --ub: min(calc(100vw / 2560), calc(100svh / 1440), 0.5625px);
  --tu: calc(100vw / 1000);
  height: calc(148 * var(--ub));
}
.hd-in {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}
.hd .ck-lampbtn {
  position: absolute;
  left: calc(92 * var(--ub));
  top: calc(74 * var(--ub));
  width: max(48px, calc(105 * var(--ub)));
  height: max(48px, calc(109 * var(--ub)));
  margin: 0;
  transform: translateY(-50%);
}
.hd .ck-beta {
  position: absolute;
  left: calc(220 * var(--ub));
  top: calc(74 * var(--ub));
  margin: 0;
  transform: translateY(-50%);
}
.hd .site-brand {
  position: absolute;
  display: block;
  left: 50%;
  top: calc(74 * var(--ub));
  width: calc(564 * var(--ub));
  margin: 0;
  transform: translate(-50%, -50%);
}
.hd .hd-org {
  position: absolute;
  left: auto;
  right: calc(102 * var(--ub));
  top: calc(74 * var(--ub));
  width: calc(154.9 * var(--ub));
  margin: 0;
  transform: translateY(-50%);
}
.hd .hd-org img {
  display: block;
}
@media (min-width: 768px) and (max-width: 999px),
       (min-width: 1000px) and (max-width: 1366px) and (orientation: portrait) {
  .hd { height: calc(89 * var(--tu)); }
  .hd .ck-lampbtn {
    left: calc(22 * var(--tu));
    top: calc(44.5 * var(--tu));
    width: max(48px, calc(67 * var(--tu)));
    height: max(48px, calc(71 * var(--tu)));
  }
  .hd .ck-beta { left: calc(100 * var(--tu)); top: calc(44.5 * var(--tu)); }
  .hd .site-brand { top: calc(44.5 * var(--tu)); width: 36.5%; }
  .hd .hd-org { right: calc(29 * var(--tu)); top: calc(44.5 * var(--tu)); width: 10.2%; }
}
@media (max-width: 767px) {
  .hd { height: 64px; }
  .hd .ck-lampbtn { left: 5vw; top: 32px; width: 48px; height: 48px; }
  .hd .ck-beta { left: calc(5vw + 56px); top: 32px; }
  .hd .site-brand { display: none; }
  .hd .hd-org { right: 4vw; top: 32px; width: 66px; }
}