/* ==========================================================================
   The top: one solid body (scripts/bar.js) holding the nameplate and a switch
   plate of keys, drawn in through a waist that carries a tuning dial.
   Loaded after main.css; it replaces the floating glass capsule.
   ========================================================================== */
html .bar {
  --np-hi: #45423a;
  --np-lo: #2b2924;
  --np-edge: rgb(0 0 0 / 0.65);
  --np-shine: rgb(255 255 255 / 0.12);
  --np-groove: rgb(0 0 0 / 0.45);
  --np-screw-hi: #8a857a;
  --np-screw-lo: #3d3a33;
  --nk-cap: #1d1b17;
  --nk-cap-hi: #26241f;
  --nk-base: #050504;
  --nk-text: var(--paper-dim);
  --nk-off: #4a463c;
  --nk-acid: #c6f432;
  --nk-acid-base: #6f8a17;
  --nk-on-acid: #20221d;
}
html .bar-nav {
  gap: 6px;
  padding: 7px 30px 9px;
  border: 0;
  border-radius: 12px;
  background:
    /* a little grain, so it reads as a made thing */
    repeating-linear-gradient(90deg, rgb(255 255 255 / 0.018) 0 1px, transparent 1px 3px),
    linear-gradient(170deg, var(--np-hi), var(--np-lo));
  box-shadow:
    0 0 0 1px var(--np-edge),
    inset 0 1px 0 var(--np-shine),
    inset 0 -2px 0 rgb(0 0 0 / 0.28),
    0 2px 0 rgb(0 0 0 / 0.35),
    0 10px 24px -6px rgb(0 0 0 / 0.55);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  overflow: visible;
}

/* Screws, one at each end. Slots turned differently, as a real fitter would leave them. */
html .bar-nav::before,
html .bar-nav::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 9px;
  height: 9px;
  margin-top: -4.5px;
  border-radius: 50%;
  background:
    linear-gradient(var(--slot, 30deg), transparent 42%, rgb(0 0 0 / 0.6) 42% 58%, transparent 58%),
    radial-gradient(circle at 35% 30%, var(--np-screw-hi), var(--np-screw-lo) 75%);
  box-shadow:
    0 0 0 1px rgb(0 0 0 / 0.5),
    0 1px 0 1px var(--np-shine);
  pointer-events: none;
}
html .bar-nav::before { left: 11px; --slot: 30deg; }
html .bar-nav::after { right: 11px; --slot: -55deg; }

/* The keys show where you are now, so the moving underline goes */
html .bar-nav__rail { display: none; }

/* A key */
html .bar-nav__link {
  position: relative;
  gap: 8px;
  min-height: 34px;
  margin-bottom: 3px; /* room for the key's depth, fixed so pressing never moves the plate */
  padding: 0 14px 0 11px;
  border: 0;
  border-radius: 8px;
  color: var(--nk-text);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: linear-gradient(180deg, var(--nk-cap-hi), var(--nk-cap));
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.07),
    0 0 0 1px rgb(0 0 0 / 0.55),
    0 3px 0 var(--nk-base);
  transform: translateY(0);
  transition:
    transform var(--press) var(--ease),
    box-shadow var(--press) var(--ease),
    color var(--press) var(--ease),
    filter var(--press) var(--ease);
}
/* Its light */
html .bar-nav__link::before {
  content: "";
  flex: none;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--nk-off);
  transition: background-color 140ms linear, box-shadow 140ms linear;
}
html .bar-nav__link:hover {
  color: var(--paper);
  background: linear-gradient(180deg, var(--nk-cap-hi), var(--nk-cap));
  filter: brightness(1.18);
}
html .bar-nav__link:hover::before { background: #7d775f; }

/* You are here: the key is down and its light is on */
html .bar-nav__link[aria-current="true"] {
  color: var(--paper);
  background: linear-gradient(180deg, var(--nk-cap), #181713);
  transform: translateY(2px);
  box-shadow:
    inset 0 1px 2px rgb(0 0 0 / 0.5),
    0 0 0 1px rgb(0 0 0 / 0.55),
    0 1px 0 var(--nk-base);
}
html .bar-nav__link[aria-current="true"]::before {
  background: var(--nk-acid);
  box-shadow: 0 0 6px 1px rgb(198 244 50 / 0.8);
}

/* Pressing: all the way down, at once */
html .bar-nav__link:active {
  transform: translateY(3px);
  box-shadow:
    inset 0 1px 2px rgb(0 0 0 / 0.5),
    0 0 0 1px rgb(0 0 0 / 0.55),
    0 0 0 var(--nk-base);
  transition-duration: 40ms;
}

/* Contact: the one acid key */
html .bar-nav__link--contact {
  margin-left: 4px;
  color: var(--nk-on-acid);
  background: linear-gradient(180deg, #d4f85c, var(--nk-acid) 60%);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.5),
    0 0 0 1px rgb(0 0 0 / 0.4),
    0 3px 0 var(--nk-acid-base);
}
html .bar-nav__link--contact::before { background: rgb(32 34 29 / 0.75); }
html .bar-nav__link--contact:hover {
  color: var(--nk-on-acid);
  background: linear-gradient(180deg, #d4f85c, var(--nk-acid) 60%);
  filter: brightness(1.06);
}
html .bar-nav__link--contact:hover::before { background: rgb(32 34 29 / 0.75); }
html .bar-nav__link--contact[aria-current="true"] {
  color: var(--nk-on-acid);
  background: linear-gradient(180deg, var(--nk-acid), #b5e324);
  box-shadow:
    inset 0 1px 2px rgb(0 0 0 / 0.18),
    0 0 0 1px rgb(0 0 0 / 0.4),
    0 1px 0 var(--nk-acid-base);
}
html .bar-nav__link--contact[aria-current="true"]::before {
  background: var(--nk-on-acid);
  box-shadow: none;
}
html .bar-nav__link--contact:active {
  box-shadow:
    inset 0 1px 2px rgb(0 0 0 / 0.18),
    0 0 0 1px rgb(0 0 0 / 0.4),
    0 0 0 var(--nk-acid-base);
}

html .bar-nav__link:focus-visible {
  outline: 2px solid var(--acid);
  outline-offset: 3px;
}

/* The light switch is one more switch on the same plate: no plate of its own,
   just a rocker set into this one, after an engraved line */
html .theme-toggle {
  margin-left: 6px;
  margin-bottom: 2px;
}
html .theme-toggle::before {
  content: "";
  position: absolute;
  left: -6px;
  top: 6px;
  bottom: 6px;
  width: 1px;
  background: var(--np-groove);
  box-shadow: 1px 0 0 var(--np-shine);
}
html .switch {
  background: linear-gradient(180deg, rgb(0 0 0 / 0.35), rgb(0 0 0 / 0.18));
  box-shadow:
    inset 0 1px 2px rgb(0 0 0 / 0.55),
    0 1px 0 var(--np-shine);
}

/* ---------- The nameplate: your name, screwed onto the same material ----------
   Its own small plate, not a bar across the screen. The acid line becomes a lit strip set into it. */
html .bar-brand {
  gap: 2px;
  min-height: 58px;
  padding: 7px 30px 8px 36px;
  border-radius: 12px;
  background:
    repeating-linear-gradient(90deg, rgb(255 255 255 / 0.018) 0 1px, transparent 1px 3px),
    linear-gradient(170deg, var(--np-hi), var(--np-lo));
  box-shadow:
    0 0 0 1px var(--np-edge),
    inset 0 1px 0 var(--np-shine),
    inset 0 -2px 0 rgb(0 0 0 / 0.28),
    0 2px 0 rgb(0 0 0 / 0.35),
    0 10px 24px -6px rgb(0 0 0 / 0.55);
}
/* The lit strip, sitting in a groove */
html .bar-brand::before {
  left: 22px;
  top: 12px;
  bottom: 12px;
  width: 3px;
  border-radius: 2px;
  background: var(--acid);
  box-shadow: 0 0 0 1px rgb(0 0 0 / 0.45), 0 0 8px rgb(198 244 50 / 0.55);
}
/* Screws, same as the nav plate's */
html .bar-brand::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background:
    linear-gradient(30deg, transparent 42%, rgb(0 0 0 / 0.6) 42% 58%, transparent 58%) 7px 50% / 9px 9px no-repeat,
    radial-gradient(circle at 35% 30%, var(--np-screw-hi), var(--np-screw-lo) 75%) 7px 50% / 9px 9px no-repeat,
    linear-gradient(-55deg, transparent 42%, rgb(0 0 0 / 0.6) 42% 58%, transparent 58%) calc(100% - 11px) 50% / 9px 9px no-repeat,
    radial-gradient(circle at 35% 30%, var(--np-screw-hi), var(--np-screw-lo) 75%) calc(100% - 11px) 50% / 9px 9px no-repeat;
  -webkit-mask:
    radial-gradient(circle 4.5px at 11.5px 50%, #000 99%, transparent),
    radial-gradient(circle 4.5px at calc(100% - 15.5px) 50%, #000 99%, transparent);
  mask:
    radial-gradient(circle 4.5px at 11.5px 50%, #000 99%, transparent),
    radial-gradient(circle 4.5px at calc(100% - 15.5px) 50%, #000 99%, transparent);
}
html .bar-brand__name { font-size: 17px; line-height: 22px; }
html .bar-brand__role { font-size: 12px; line-height: 18px; }
html[data-theme="light"] .bar-brand::before {
  background: #8fbf1a;
  box-shadow: 0 0 0 1px rgb(32 34 29 / 0.25), 0 0 6px rgb(143 191 26 / 0.45);
}

/* ---------- Light: a white plate, pale keys ---------- */
html[data-theme="light"] .bar {
  --np-hi: #ffffff;
  --np-lo: #e4e3dc;
  --np-edge: rgb(32 34 29 / 0.28);
  --np-shine: rgb(255 255 255 / 0.9);
  --np-groove: rgb(32 34 29 / 0.2);
  --np-screw-hi: #ffffff;
  --np-screw-lo: #bdbbb1;
  --nk-cap: #f3f2ec;
  --nk-cap-hi: #ffffff;
  --nk-base: #b9b7ad;
  --nk-text: #4f5149;
  --nk-off: #cfcdc3;
  --nk-acid-base: #7d9a1c;
}
html[data-theme="light"] .bar-nav,
html[data-theme="light"] .bar-brand {
  box-shadow:
    0 0 0 1px var(--np-edge),
    inset 0 1px 0 var(--np-shine),
    inset 0 -2px 0 rgb(32 34 29 / 0.06),
    0 2px 0 rgb(32 34 29 / 0.12),
    0 10px 24px -8px rgb(32 34 29 / 0.3);
}
html[data-theme="light"] .bar-nav__link {
  box-shadow:
    inset 0 1px 0 #fff,
    0 0 0 1px rgb(32 34 29 / 0.22),
    0 3px 0 var(--nk-base);
}
html[data-theme="light"] .bar-nav__link:hover { color: var(--paper); filter: brightness(0.97); }
html[data-theme="light"] .bar-nav__link:hover::before { background: #a9a798; }
html[data-theme="light"] .bar-nav__link[aria-current="true"] {
  color: var(--paper);
  background: linear-gradient(180deg, #e9e8e1, #f1f0ea);
  box-shadow:
    inset 0 1px 2px rgb(32 34 29 / 0.2),
    0 0 0 1px rgb(32 34 29 / 0.22),
    0 1px 0 var(--nk-base);
}
html[data-theme="light"] .bar-nav__link[aria-current="true"]::before {
  background: #6f8f00;
  box-shadow: 0 0 5px 1px rgb(111 143 0 / 0.55);
}
html[data-theme="light"] .bar-nav__link--contact,
html[data-theme="light"] .bar-nav__link--contact:hover { color: var(--nk-on-acid); }
html[data-theme="light"] .bar-nav__link--contact {
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.5),
    0 0 0 1px rgb(32 34 29 / 0.3),
    0 3px 0 var(--nk-acid-base);
}
html[data-theme="light"] .switch {
  background: linear-gradient(180deg, rgb(32 34 29 / 0.12), rgb(32 34 29 / 0.04));
  box-shadow:
    inset 0 1px 2px rgb(32 34 29 / 0.25),
    0 1px 0 #fff;
}

/* ---------- Phones: the plate at the bottom, keys share the width ---------- */
@media (max-width: 767px) {
  html .bar-nav {
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.2fr) minmax(0, 1fr) 36px;
    gap: 6px;
    padding: 7px 26px 9px;
  }
  html .bar-brand { min-height: 50px; padding: 5px 26px 6px 32px; }
  html .bar-brand::before { left: 19px; top: 11px; bottom: 11px; }
  html .bar-brand__name { font-size: 15px; line-height: 20px; }
  html .bar-brand__role { font-size: 11px; line-height: 16px; }
  html .bar-nav::before { left: 9px; }
  html .bar-nav::after { right: 9px; }
  html .bar-nav__link {
    min-height: 40px;
    padding: 4px 4px 0;
    font-size: 13px;
    letter-spacing: 0;
    text-transform: none; /* full words fit a thumb-width key this way */
  }
  /* The light moves to the top of the key, so the word gets the whole width */
  html .bar-nav__link::before {
    position: absolute;
    top: 5px;
    left: 50%;
    width: 4px;
    height: 4px;
    margin-left: -2px;
  }
  html .bar-nav__link--contact { margin-left: 0; }
  html .theme-toggle { margin-left: 0; width: 36px; }
  html .theme-toggle::before { left: -4px; }
}

/* The name and the keys sit above the body behind them */
html .bar-brand,
html .bar-nav { z-index: 1; }

/* ==========================================================================
   B · One body + tuning dial
   The name and the keys sit on one solid body, cast in a single piece: full
   height at both ends, drawn in through a smooth waist in the middle. The
   waist holds a tuning dial: the whole page as a scale, a mark where each
   section starts, and an acid needle where you are.
   ========================================================================== */
.bar-body, .bar-dial { display: none; }
@media (min-width: 768px) {
  html .bar-body {
    display: block;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    pointer-events: none;
    filter: drop-shadow(0 2px 0 rgb(0 0 0 / 0.35)) drop-shadow(0 10px 14px rgb(0 0 0 / 0.4));
  }
  html .bb-hi { stop-color: var(--np-hi); }
  html .bb-lo { stop-color: var(--np-lo); }
  html .bb-grain { fill: rgb(255 255 255 / 0.02); }
  html .bb-shine { stroke: var(--np-shine); stroke-width: 1.2; }
  html .bb-edge { stroke: var(--np-edge); stroke-width: 1; }
  html .bb-screw circle { fill: var(--np-screw-lo); stroke: rgb(0 0 0 / 0.5); stroke-width: 1; }
  html .bb-screw path { stroke: rgb(0 0 0 / 0.6); stroke-width: 1.4; stroke-linecap: round; }
  html[data-theme="light"] .bb-screw circle { fill: #d6d4ca; stroke: rgb(32 34 29 / 0.35); }
  html[data-theme="light"] .bar-body {
    filter: drop-shadow(0 2px 0 rgb(32 34 29 / 0.1)) drop-shadow(0 10px 14px rgb(32 34 29 / 0.16));
  }

  /* The name and the keys lose their own plates: they are part of the body now */
  html .bar-brand,
  html .bar-nav,
  html[data-theme="light"] .bar-brand,
  html[data-theme="light"] .bar-nav {
    background: none;
    box-shadow: none;
  }
  html .bar-brand { padding-left: 38px; padding-right: 8px; }
  html .bar-brand::before { left: 26px; }
  html .bar-brand::after,
  html .bar-nav::before,
  html .bar-nav::after { display: none; }
  html .bar-nav { padding-left: 8px; padding-right: 30px; }

  /* The dial window */
  html .bar-dial {
    display: block;
    position: absolute;
    z-index: 1;
    border-radius: 5px;
    background: #0d0d0b;
    box-shadow: inset 0 1px 3px rgb(0 0 0 / 0.85), 0 1px 0 var(--np-shine);
    overflow: hidden;
    pointer-events: none;
  }
  /* The scale: fine ticks along the bottom */
  .bar-dial__scale {
    position: absolute;
    inset: 0 120px 0 12px; /* the right end is kept for the station name */
    background:
      repeating-linear-gradient(90deg, rgb(255 255 255 / 0.16) 0 1px, transparent 1px 6px) left bottom / 100% 5px no-repeat;
  }
  /* A mark where each section starts */
  .bar-dial__mark {
    position: absolute;
    bottom: 0;
    width: 1px;
    height: 10px;
    background: rgb(255 255 255 / 0.35);
  }
  .bar-dial__mark b {
    position: absolute;
    bottom: 11px;
    left: 3px;
    font: 500 9px/1 var(--f-body);
    letter-spacing: 0.04em;
    font-variant-numeric: tabular-nums;
    color: rgb(255 255 255 / 0.3);
    transition: color 140ms linear;
  }
  .bar-dial__mark.is-quiet b { opacity: 0; }
  .bar-dial__mark.is-here { background: var(--acid); }
  .bar-dial__mark.is-here b { opacity: 1; }
  .bar-dial__mark.is-here b { color: var(--acid); }
  /* The needle */
  .bar-dial__needle {
    position: absolute;
    top: 3px;
    bottom: 0;
    left: 12px;
    width: 2px;
    margin-left: -1px;
    border-radius: 1px;
    background: var(--acid);
    box-shadow: 0 0 6px 1px rgb(198 244 50 / 0.7);
    will-change: transform;
  }
  /* The station you're on, written at the right of the window */
  .bar-dial__read {
    position: absolute;
    top: 50%;
    right: 10px;
    width: 96px;
    margin-top: -5px;
    text-align: right;
    overflow: hidden;
    text-overflow: ellipsis;
    font: 500 10px/1 var(--f-body);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #b9b4a6;
    white-space: nowrap;
  }
  .bar-dial.is-tight .bar-dial__scale { right: 12px; }
  /* a hairline between the scale and the name */
  .bar-dial::after {
    content: "";
    position: absolute;
    top: 5px;
    bottom: 5px;
    right: 112px;
    width: 1px;
    background: rgb(255 255 255 / 0.1);
  }
  .bar-dial.is-tight::after,
  .bar-dial.is-tight .bar-dial__read,
  .bar-dial.is-tight .bar-dial__mark b { display: none; }
}