/* ==========================================================================
   Shared kiosk furniture: the family strip, and the compact theme rail.

   Three of these pages — the TV cabinet, GAMBA, and the crawl — could be
   reached but not left. You arrived at a walnut television, turned the knobs,
   and then had nowhere to go but the back button. The strip below is the fix,
   and it is the only chrome the whole family shares.

   It is painted entirely from the role variables that assets/kiosk-theme.js
   writes onto :root, so it wears whatever theme the reader last picked, on
   every page, including the ones whose own colours never change. Fallbacks
   are given for the first frame, before the module has run.
   ========================================================================== */

.kiosk-strip {
  --k-fg:   var(--fg,  #b9f7c0);
  --k-dim:  var(--fg2, #4f8f63);
  --k-acc:  var(--acc, #67F454);
  --k-bg:   var(--bg0, #04080a);
  --k-line: var(--mut, #1d3b2a);

  position: relative;
  z-index: 60;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
  padding: 7px 14px;
  font: 500 12px/1.35 ui-monospace, SFMono-Regular, "JetBrains Mono", Menlo, monospace;
  letter-spacing: .02em;
  color: var(--k-dim);
  background: color-mix(in srgb, var(--k-bg) 88%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--k-line) 70%, transparent);
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
}

/* The cabinet pages centre a single object in the viewport and often hide
   overflow, so the strip floats over them instead of pushing the furniture
   down and introducing a scrollbar where there was none. */
.kiosk-strip.float {
  position: fixed;
  inset: 0 0 auto 0;
  border-bottom-color: color-mix(in srgb, var(--k-line) 50%, transparent);
}

.kiosk-strip .k-home {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-right: 4px;
  font-weight: 700;
  color: var(--k-fg);
  text-decoration: none;
}
.kiosk-strip .k-home img { display: block; width: 15px; height: 15px; }
.kiosk-strip .k-home:hover { color: var(--k-acc); }

.kiosk-strip .k-sep {
  width: 1px;
  height: 14px;
  margin: 0 3px;
  background: color-mix(in srgb, var(--k-line) 90%, transparent);
}

.kiosk-strip a.k-link {
  padding: 3px 8px;
  border-radius: 6px;
  color: var(--k-dim);
  text-decoration: none;
  border: 1px solid transparent;
  transition: color .14s ease, border-color .14s ease, background-color .14s ease;
  white-space: nowrap;
}
.kiosk-strip a.k-link:hover {
  color: var(--k-fg);
  border-color: color-mix(in srgb, var(--k-line) 80%, transparent);
  background: color-mix(in srgb, var(--k-fg) 7%, transparent);
}
.kiosk-strip a.k-link:focus-visible {
  outline: 2px solid var(--k-acc);
  outline-offset: 1px;
}
/* The page you are on is named, not linked — a self-link in a nav is a small
   lie about where clicking takes you. */
.kiosk-strip .k-here {
  padding: 3px 8px;
  border-radius: 6px;
  color: var(--k-acc);
  border: 1px solid color-mix(in srgb, var(--k-acc) 38%, transparent);
  background: color-mix(in srgb, var(--k-acc) 10%, transparent);
  white-space: nowrap;
}

.kiosk-strip .k-spacer { flex: 1 1 auto; min-width: 0; }

/* ---- the compact theme rail ------------------------------------------- */

.kiosk-rail {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
}
.kiosk-rail-lab {
  margin-right: 2px;
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--fg2, #4f8f63);
  opacity: .8;
}

.kiosk-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 7px 3px 4px;
  font: inherit;
  font-size: 11px;
  line-height: 1.3;
  color: var(--fg2, #4f8f63);
  background: transparent;
  border: 1px solid color-mix(in srgb, var(--mut, #1d3b2a) 70%, transparent);
  border-radius: 999px;
  cursor: pointer;
  transition: color .14s ease, border-color .14s ease, background-color .14s ease;
}
.kiosk-chip:hover {
  color: var(--fg, #b9f7c0);
  border-color: color-mix(in srgb, var(--fg, #b9f7c0) 34%, transparent);
}
.kiosk-chip:focus-visible { outline: 2px solid var(--acc, #67F454); outline-offset: 1px; }
.kiosk-chip[aria-pressed="true"] {
  color: var(--fgb, #fff);
  border-color: color-mix(in srgb, var(--acc, #67F454) 55%, transparent);
  background: color-mix(in srgb, var(--acc, #67F454) 14%, transparent);
}

/* Four roles in one 12px square. One accent square cannot tell gruvbox from
   everforest at this size, and those are the two a reader actually weighs. */
.kiosk-sw {
  width: 12px; height: 12px;
  border-radius: 3px;
  flex: 0 0 auto;
  background:
    linear-gradient(135deg, var(--c1) 0 50%, transparent 50% 100%),
    linear-gradient(225deg, var(--c2) 0 50%, transparent 50% 100%),
    linear-gradient(45deg,  var(--c3) 0 50%, transparent 50% 100%),
    linear-gradient(315deg, var(--c4) 0 50%, transparent 50% 100%);
  box-shadow: inset 0 0 0 1px #0006;
}

.kiosk-nm { white-space: nowrap; }

/* ---- narrow ------------------------------------------------------------
   Parker runs tiled panes; 968px and 390px are real widths here, not
   hypothetical ones. Past the first the chip names go and the swatches
   carry the choice; past the second the rail drops out entirely, because a
   theme picker is not what someone came to a phone-width kiosk for. */
@media (max-width: 968px) {
  .kiosk-strip { padding: 6px 10px; font-size: 11px; }
  .kiosk-rail-lab { display: none; }
  .kiosk-nm { display: none; }
  .kiosk-chip { padding: 3px 4px; }
}
@media (max-width: 620px) {
  .kiosk-strip .k-spacer { display: none; }
  .kiosk-rail { display: none; }
  .kiosk-strip { gap: 3px 6px; }
}

@media (prefers-reduced-motion: reduce) {
  .kiosk-strip a.k-link, .kiosk-chip { transition: none; }
}