/* OTAKU NOIR — tokyo.css — TOKYO UPLINK dashboard */

.tk-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 18px;
  margin-top: 18px;
}

/* ─── cohesive system: bands + status strip + wires ─ */
.tk-band { margin-top: 34px; scroll-margin-top: 70px; }
.tk-band .band-label {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 11px;
  letter-spacing: 0.22em;
  color: var(--fg-dim);
  text-transform: uppercase;
  border-bottom: 1px solid var(--border);
  padding-bottom: 7px;
}
.tk-band .band-note { color: var(--fg-faint); font-family: var(--jp); letter-spacing: 0.3em; }

.tk-status { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.tk-chip {
  display: flex;
  gap: 8px;
  align-items: baseline;
  background: rgba(16, 16, 21, 0.8);
  border: 1px solid var(--border);
  padding: 6px 11px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  color: var(--fg-faint);
  cursor: pointer;
}
.tk-chip b { color: var(--fg); font-weight: 500; font-variant-numeric: tabular-nums; }
.tk-chip:hover { border-color: var(--accent-2); }
.tk-chip.warn { border-color: var(--accent); }
.tk-chip.warn b { color: var(--accent); }
.tk-chip.wet { border-color: rgba(0, 224, 255, 0.5); }
.tk-chip.wet b { color: var(--accent-2); }

.tk-wires { margin-top: 9px; font-size: 9px; letter-spacing: 0.18em; color: var(--fg-faint); text-transform: uppercase; }
.tk-wire { margin-left: 12px; }
.tk-wire::before { content: "●"; margin-right: 4px; }
.tk-wire.up::before { color: var(--accent-2); }
.tk-wire.down::before { color: var(--accent); animation: ops-pulse 1.4s infinite; }

/* rain scope */
.tk-rain-cells { display: flex; gap: 10px; align-items: flex-end; }
.tk-rain-cell { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 9px; color: var(--fg-faint); }
.tk-rain-cell i { display: block; width: 100%; max-width: 40px; background: rgba(0, 224, 255, 0.15); }
.tk-rain-cell i.wet { background: linear-gradient(180deg, var(--accent-2), rgba(0, 224, 255, 0.3)); }
.tk-rain-cell b { color: var(--fg-dim); font-weight: 400; font-variant-numeric: tabular-nums; }

/* wind compass arrow */
.tk-windarrow { display: inline-block; font-style: normal; color: var(--accent-2); margin-right: 5px; }

/* orbital watch */
.tk-orbit-night { fill: rgba(0, 0, 0, 0.5); }
.tk-orbit-line { stroke: rgba(0, 224, 255, 0.4); fill: none; stroke-width: 1; }
.tk-orbit-grid { stroke: rgba(255, 255, 255, 0.05); stroke-width: 1; }
.tk-orbit-grid.eq { stroke: rgba(255, 255, 255, 0.12); }
.tk-orbit-gridlab { fill: var(--fg-faint); font-size: 6px; letter-spacing: 0.1em; font-family: var(--mono); }
.tk-orbit-sun { fill: var(--accent-3); }
.tk-orbit-iss { fill: var(--accent); }
.tk-orbit-trail { fill: rgba(255, 46, 60, 0.5); }
.tk-orbit-track { fill: none; stroke: rgba(0, 224, 255, 0.5); stroke-width: 1; stroke-dasharray: 5 4; }
.tk-orbit-foot { fill: rgba(255, 46, 60, 0.05); stroke: rgba(255, 46, 60, 0.3); stroke-width: 1; }
.tk-orbit-cross { stroke: var(--accent); stroke-width: 1; }
.tk-orbit-reticle {
  fill: none;
  stroke: var(--accent);
  stroke-width: 1;
  animation: tk-qpulse 1.6s infinite;
}
.tk-orbit-tele { flex: 1; min-width: 250px; font-size: 11px; }
.tk-tele-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 4px 8px;
  border-bottom: 1px dashed rgba(37, 37, 46, 0.6);
  color: var(--fg-faint);
  letter-spacing: 0.1em;
}
.tk-tele-row b { color: var(--fg-dim); font-weight: 400; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tk-tele-row.good b { color: var(--accent-2); }
.tk-tele-row.dim b { color: var(--fg-faint); }

/* sakura front */
.tk-front-dot.wait { fill: none; stroke: var(--fg-faint); stroke-width: 1; }
.tk-front-dot.bloom { fill: #ff9ad5; animation: tk-qpulse 1.8s infinite; }
.tk-front-dot.past { fill: rgba(255, 154, 213, 0.35); }

/* yamanote loop tool */
.tk-loop-wrap { flex: 0 0 340px; }
.tk-loop-ring { fill: none; stroke: rgba(0, 224, 255, 0.45); stroke-width: 2.5; }
.tk-loop-ring.ghost { stroke: rgba(255, 46, 60, 0.4); stroke-dasharray: 6 5; }
.tk-loop-hit { fill: transparent; cursor: pointer; }
.tk-loop-st { fill: var(--fg-dim); pointer-events: none; }
.tk-loop-st.sel-a { fill: var(--accent-2); }
.tk-loop-st.sel-b { fill: var(--accent-3); }
.tk-loop-lab { fill: var(--fg-faint); font-size: 6.4px; letter-spacing: 0.05em; font-family: var(--mono); cursor: pointer; }
.tk-loop-lab.sel-a { fill: var(--accent-2); }
.tk-loop-lab.sel-b { fill: var(--accent-3); }
.tk-loop-arc { fill: none; stroke: var(--accent-2); stroke-width: 3.5; opacity: 0.75; }
.tk-loop-train { fill: rgba(0, 224, 255, 0.9); }
.tk-loop-train.inner { fill: rgba(0, 224, 255, 0.45); }
.tk-loop-train.ghost { fill: var(--accent); animation: tk-qpulse 1.6s infinite; }
.tk-wide { grid-column: 1 / -1; }

.tk-panel {
  border: 1px solid var(--border);
  background: rgba(16, 16, 21, 0.82);
  padding: 16px 18px 18px;
  min-height: 150px;
  position: relative;
  overflow: hidden;
}
.tk-panel::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  background: linear-gradient(90deg, var(--accent), transparent 60%);
  opacity: 0.6;
}

.tk-panel-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--fg-dim);
  margin-bottom: 14px;
}
.tk-jp { color: var(--fg-faint); font-family: var(--jp); letter-spacing: 0.3em; }
.tk-src { margin-left: auto; font-size: 9px; color: var(--fg-faint); letter-spacing: 0.14em; }

/* clock */
.tk-clock {
  font-size: clamp(34px, 5vw, 52px);
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--fg);
  text-shadow: 0 0 18px rgba(255, 46, 60, 0.25);
  font-variant-numeric: tabular-nums;
}
.tk-clock-sub { margin-top: 4px; font-size: 12px; color: var(--fg-dim); }
.tk-clock-foot {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 14px;
  padding-top: 10px;
  border-top: 1px dashed var(--border);
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--fg-faint);
}
.tk-clock-foot b { color: var(--accent-2); font-weight: 500; }

/* big number panels */
.tk-big {
  font-size: clamp(30px, 4vw, 46px);
  font-weight: 800;
  color: var(--fg);
  font-variant-numeric: tabular-nums;
}
.tk-unit { font-size: 14px; color: var(--fg-faint); margin-left: 6px; font-weight: 400; }
.tk-cond { margin-top: 4px; font-size: 12px; color: var(--accent-2); min-height: 1.6em; }

.tk-rows { margin-top: 12px; font-size: 12px; color: var(--fg-dim); }
.tk-rows > div { display: flex; justify-content: space-between; gap: 12px; padding: 3px 0; }
.tk-rows-loose > div { padding: 6px 0; border-bottom: 1px dashed rgba(37, 37, 46, 0.6); }
.tk-rows b { color: var(--fg); font-weight: 500; font-variant-numeric: tabular-nums; }

.tk-meter {
  height: 8px;
  border: 1px solid var(--border);
  margin-top: 8px;
  background: rgba(0, 0, 0, 0.4);
}
.tk-meter i { display: block; height: 100%; width: 0; transition: width 0.8s; }

/* quakes */
.tk-quakes { display: flex; flex-direction: column; gap: 6px; }
.tk-quake {
  display: flex;
  align-items: baseline;
  gap: 14px;
  font-size: 12px;
  padding: 7px 10px;
  border: 1px solid rgba(37, 37, 46, 0.7);
  background: rgba(0, 0, 0, 0.25);
}
.tk-quake b { color: var(--accent-2); min-width: 44px; font-variant-numeric: tabular-nums; }
.tk-quake span { color: var(--fg-dim); flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tk-quake i { color: var(--fg-faint); font-style: normal; font-size: 10px; letter-spacing: 0.1em; }
.tk-quake.sev-mid b { color: var(--accent-3); }
.tk-quake.sev-high b { color: var(--accent); text-shadow: 0 0 8px rgba(255, 46, 60, 0.5); }
.tk-quake-empty { font-size: 12px; color: var(--fg-faint); padding: 8px 2px; }

/* ─── maps (seismic + sea state) ────────────────── */
.tk-seis { display: flex; gap: 16px; align-items: stretch; flex-wrap: wrap; }
.tk-seis .tk-map-wrap { flex: 0 0 300px; }
.tk-seis .tk-quakes { flex: 1; min-width: 260px; }
.tk-map-wrap {
  border: 1px solid var(--border);
  background:
    linear-gradient(rgba(255, 46, 60, 0.03) 1px, transparent 1px) 0 0 / 28px 28px,
    linear-gradient(90deg, rgba(255, 46, 60, 0.03) 1px, transparent 1px) 0 0 / 28px 28px,
    rgba(0, 0, 0, 0.3);
}
.tk-tide-wrap { max-width: 560px; margin: 0 auto; }
.tk-map { width: 100%; height: auto; display: block; }
.tk-map-land { fill: #14141b; stroke: #3d3d49; stroke-width: 1; }
.tk-map-quake { stroke: none; opacity: 0.85; }
.tk-map-quake.q-low { fill: rgba(0, 224, 255, 0.65); }
.tk-map-quake.q-mid { fill: rgba(255, 210, 63, 0.8); }
.tk-map-quake.q-high { fill: rgba(255, 46, 60, 0.9); }
.tk-map-quake.q-new { animation: tk-qpulse 1.6s infinite; }
@keyframes tk-qpulse { 50% { opacity: 0.3; } }
.tk-map-node { fill: var(--fg-faint); }
.tk-map-node.lit { fill: var(--accent-2); }
.tk-map-label { fill: var(--fg-faint); font-size: 7px; letter-spacing: 0.08em; text-anchor: middle; font-family: var(--mono); }
.tk-map-label.lit { fill: var(--accent-2); }
/* sea state: dot = wave height band, tick = the way the waves are running */
.tk-map-sea { stroke: none; opacity: 0.9; }
.tk-map-sea.s-calm { fill: rgba(0, 224, 255, 0.35); }
.tk-map-sea.s-slight { fill: rgba(0, 224, 255, 0.75); }
.tk-map-sea.s-mod { fill: rgba(255, 210, 63, 0.85); }
.tk-map-sea.s-rough { fill: rgba(255, 46, 60, 0.9); }
.tk-map-sea.s-high { fill: rgba(255, 46, 60, 1); animation: tk-qpulse 1.6s infinite; }
.tk-map-swell { stroke: rgba(200, 210, 225, 0.5); stroke-width: 1; }
.tk-map-ping {
  fill: none;
  stroke: var(--accent);
  stroke-width: 1;
  transform-box: fill-box;
  transform-origin: center;
  animation: tk-ping 2.4s ease-out infinite;
}
@keyframes tk-ping { from { transform: scale(0.4); opacity: 0.9; } to { transform: scale(2.8); opacity: 0; } }
.tk-map-denied { fill: var(--accent); font-size: 8px; letter-spacing: 0.16em; text-anchor: middle; font-family: var(--mono); }

@media (prefers-reduced-motion: reduce) {
  .tk-map-quake.q-new, .tk-map-sea.s-high, .tk-map-ping { animation: none; }
}

/* week board */
.tk-nodes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 8px;
}
.tk-node {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  font-size: 11px;
  letter-spacing: 0.12em;
}
.tk-node b { font-weight: 500; }
.tk-node.up b { color: var(--accent-2); }
.tk-node.up span { color: var(--fg-dim); }
.tk-node.down { border-color: rgba(255, 46, 60, 0.5); }
.tk-node.down b { color: var(--fg-faint); }
.tk-node.down span { color: var(--accent); animation: ops-pulse 1.6s infinite; }

/* week ahead — seven tappable day tiles + the detail line under them */
.tk-week { grid-template-columns: repeat(auto-fit, minmax(104px, 1fr)); }
.tk-day {
  display: flex; flex-direction: column; align-items: flex-start; gap: 3px;
  font-family: var(--mono); text-align: left; cursor: pointer;
  background: rgba(0, 0, 0, 0.25); color: var(--fg-dim);
  border-left-width: 3px; transition: border-color 0.2s, background 0.2s;
}
.tk-day b { letter-spacing: 0.14em; font-size: 10px; color: var(--fg-dim); }
.tk-day span { font-size: 14px; letter-spacing: 0.04em; font-variant-numeric: tabular-nums; }
.tk-day i { font-style: normal; font-size: 10px; letter-spacing: 0.1em; color: var(--fg-faint); }
.tk-day:hover { background: rgba(255, 255, 255, 0.04); }
.tk-day.on { background: rgba(255, 46, 60, 0.07); border-color: var(--fg-faint); }
.tk-day.on b { color: var(--fg); }
.tk-day.d-up { border-left-color: var(--accent-2); }
.tk-day.d-up span { color: var(--accent-2); }
.tk-day.d-mid { border-left-color: var(--accent-3); }
.tk-day.d-mid span { color: var(--accent-3); }
.tk-day.d-down { border-left-color: var(--accent); }
.tk-day.d-down span { color: var(--accent); }
.tk-week-note { margin-top: 10px; }

/* ─── tools band ────────────────────────────────── */
.tk-tools { margin-top: 18px; }
.tk-wide2 { grid-column: span 2; }

/* yen desk */
.tk-fx-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.tk-fx-row label {
  font-size: 18px;
  font-weight: 800;
  color: var(--accent-3);
}
.tk-fx-row input {
  flex: 1;
  min-width: 110px;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid var(--border);
  color: var(--fg);
  font-family: var(--mono);
  font-size: 16px;
  font-variant-numeric: tabular-nums;
  padding: 8px 10px;
  outline: none;
}
.tk-fx-row input:focus { border-color: var(--accent-2); box-shadow: 0 0 10px rgba(0, 224, 255, 0.2); }
.tk-fx-row input::-webkit-outer-spin-button,
.tk-fx-row input::-webkit-inner-spin-button { -webkit-appearance: none; }
.tk-fx-eq { color: var(--fg-faint); }
.tk-fx-step {
  flex: 0 0 auto;
  min-width: 46px;
  padding: 8px 0;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid var(--border);
  color: var(--accent-3);
  font-family: var(--mono);
  font-size: 18px;
  font-weight: 700;
  cursor: pointer;
}
.tk-fx-step:hover, .tk-fx-step:focus { border-color: var(--accent-2); color: var(--accent-2); }
.tk-fx-row select {
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid var(--border);
  color: var(--accent-2);
  font-family: var(--mono);
  font-size: 13px;
  padding: 8px 6px;
  outline: none;
}
.tk-fx-table {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 8px;
  margin-top: 14px;
}
.tk-fx-cell {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 7px 10px;
  border: 1px solid rgba(37, 37, 46, 0.7);
  background: rgba(0, 0, 0, 0.25);
  font-size: 12px;
}
.tk-fx-cell span { color: var(--fg-faint); }
.tk-fx-cell b { color: var(--fg); font-weight: 500; font-variant-numeric: tabular-nums; }

/* field phrases */
.tk-phrase {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  text-align: left;
  background: none;
  border: 1px dashed var(--border);
  padding: 14px;
  cursor: pointer;
  font-family: var(--mono);
}
.tk-phrase:hover { border-color: var(--accent-2); }
.tk-phrase-jp {
  font-family: var(--jp);
  font-size: 22px;
  font-weight: 700;
  color: var(--fg);
}
.tk-phrase-ro { font-size: 13px; color: var(--accent-3); letter-spacing: 0.06em; }
.tk-phrase-en { font-size: 12px; color: var(--fg-dim); }

.tk-facts b { text-align: right; }

/* word of the day */
.tk-wotd {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  width: 100%;
  background: none;
  border: none;
  padding: 0;
  text-align: left;
  font-family: var(--mono);
  cursor: pointer;
}
.tk-wotd:hover .tk-wotd-avatar { border-color: var(--accent-2); }
.tk-wotd-body span { display: block; }
.tk-wotd-avatar {
  flex: 0 0 74px;
  width: 74px;
  height: 74px;
  object-fit: cover;
  object-position: 65% 20%;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.35);
}
.tk-wotd-avatar.full {
  flex-basis: 108px;
  width: 108px;
  height: 190px;
  border-radius: 0;
  object-fit: contain;
  object-position: center top;
  border-color: rgba(255, 46, 60, 0.5);
}
.tk-wotd-body { min-width: 0; }
.tk-wotd-jp {
  font-family: var(--jp);
  font-size: 26px;
  font-weight: 700;
  color: var(--fg);
  line-height: 1.25;
}
.tk-wotd-ro { font-size: 13px; color: var(--accent-3); letter-spacing: 0.08em; margin-top: 2px; }
.tk-wotd-en { font-size: 12px; color: var(--fg-dim); margin-top: 6px; }
.tk-wotd-note { font-size: 11px; color: var(--accent-2); margin-top: 8px; }

/* petal watch */
.tk-sakura::before { background: linear-gradient(90deg, #ff9ad5, transparent 60%); }
.tk-sakura .tk-big { color: #ffb7e0; text-shadow: 0 0 16px rgba(255, 154, 213, 0.35); }
.tk-sakura-meter { border-color: rgba(255, 154, 213, 0.4); }
.tk-sakura-meter i { background: linear-gradient(90deg, #ff9ad5, #ffd6ee); transition: width 1.2s; }
.tk-sakura-note { color: var(--fg-faint); }

/* mei mei explains */
.tk-mm {
  display: flex;
  gap: 16px;
  align-items: stretch;
  width: 100%;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font-family: var(--mono);
  text-align: left;
}
.tk-mm-portrait {
  flex: 0 0 clamp(150px, 24%, 210px);
  aspect-ratio: 5 / 8;                 /* portrait frame sized to the full figure */
  border: 1px solid var(--border);
  background: rgba(0, 0, 0, 0.35);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
/* blurred cover-fill of the SAME image behind the sharp figure — the box is
   always full (no letterbox bars) and none of the figure is cropped away.
   Driven by --mm-bg, set per-frame in mmGate(). */
.tk-mm-portrait::before {
  content: "";
  position: absolute;
  inset: -12%;                         /* overscan so the blur never shows an edge */
  background-image: var(--mm-bg);
  background-size: cover;
  background-position: center;
  filter: blur(16px) brightness(0.42) saturate(1.1);
  transform: scale(1.06);
  z-index: 0;
}
.tk-mm-portrait::after {                /* accent glow, kept from the old look */
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 22%, rgba(0, 224, 255, 0.1), transparent 62%);
  z-index: 1;
  pointer-events: none;
}
.mm-dark .tk-mm-portrait::after {
  background: radial-gradient(circle at 50% 22%, rgba(255, 46, 60, 0.12), transparent 62%);
}
.tk-mm-portrait img {
  position: relative;
  z-index: 2;                          /* sharp figure above the blur fill */
  width: 100%;
  height: 100%;
  object-fit: contain;                 /* tall art: whole figure, never cropped */
  object-position: center bottom;
  filter: drop-shadow(0 4px 14px rgba(0, 0, 0, 0.55));
}
/* wide/landscape art fills the tall frame instead of shrinking to its width */
.tk-mm-portrait.mm-wide img {
  object-fit: cover;
  object-position: center center;
}
.mm-dark .tk-mm-portrait {
  flex-basis: 190px;
  border-color: rgba(255, 46, 60, 0.5);
}
.tk-mm-bubble {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
  border-left: 2px solid var(--accent-2);
  padding: 12px 4px 12px 16px;
  min-height: 140px;
}
.mm-dark .tk-mm-bubble { border-left-color: var(--accent); }
.tk-mm-line {
  font-size: 14px;
  line-height: 1.7;
  color: var(--fg);
}
.tk-mm-topic {
  font-size: 10px;
  letter-spacing: 0.2em;
  color: var(--accent-2);
  text-transform: uppercase;
}
.mm-dark .tk-mm-topic { color: var(--accent); }
.tk-mm:hover .tk-mm-portrait { border-color: var(--accent-2); }

/* holiday board */
.tk-holidays span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tk-holidays b { text-align: right; white-space: nowrap; }
.tk-holiday-today {
  border: 1px solid rgba(255, 46, 60, 0.5) !important;
  background: rgba(255, 46, 60, 0.08);
  padding: 6px 8px !important;
}
.tk-holiday-today b { color: var(--accent); }

@media (max-width: 700px) {
  .tk-wide2 { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .tk-grid { grid-template-columns: 1fr; }
}

/* ─── field notes: the ward board (board.js) ────── */
.nb-wrap { display: grid; grid-template-columns: 1.15fr 1fr; gap: 16px; margin-top: 12px; }
.nb-map-col { min-width: 0; }
.nb-map { position: relative; }
.nb-svg { width: 100%; height: auto; display: block; max-height: 420px; }

.nb-ward {
  fill: var(--nb-ward); stroke: var(--bg); stroke-width: 0.9;
  cursor: pointer; transition: fill 0.18s ease, filter 0.3s ease; outline: none;
}
.nb-ward:hover, .nb-ward:focus-visible { fill: #23232d; }
.nb-ward:focus-visible { stroke: var(--accent); stroke-width: 1.1; }
.nb-ward.sel {
  stroke: var(--accent); stroke-width: 1.2;
  filter: drop-shadow(0 0 4px rgba(255, 46, 60, 0.55));
}
.nb-label {
  font-family: var(--mono); font-size: 4.4px; letter-spacing: 0.1em;
  fill: var(--fg-faint); text-anchor: middle; pointer-events: none;
}

/* day phase — tokyo.js sunrise/sunset grades the chart */
.nb-map { --nb-ward: #16161d; }
.nb-map.nb-day { --nb-ward: #202028; }
.nb-map.nb-day .nb-svg { filter: saturate(0.85) brightness(1.12); }
.nb-map.nb-dusk { --nb-ward: #1d1820; }
.nb-map.nb-dusk .nb-svg { filter: sepia(0.14) saturate(1.1); }
.nb-map.nb-night { --nb-ward: #14141b; }

/* tremor rings + aircraft blips */
.nb-quake circle { fill: none; stroke-width: 0.8; }
.nb-quake.q-low circle { stroke: rgba(0, 224, 255, 0.7); }
.nb-quake.q-mid circle { stroke: rgba(255, 210, 63, 0.8); }
.nb-quake.q-high circle { stroke: rgba(255, 46, 60, 0.9); }
.nb-quake .nb-quake-core { fill: currentColor; stroke: none; }
.nb-quake.q-low { color: rgba(0, 224, 255, 0.7); }
.nb-quake.q-mid { color: rgba(255, 210, 63, 0.8); }
.nb-quake.q-high { color: rgba(255, 46, 60, 0.9); }
.nb-quake-fresh circle { animation: tk-qpulse 1.6s infinite; }
.nb-blip path { fill: var(--accent-2); opacity: 0.85; }

.nb-legend {
  display: flex; gap: 14px; flex-wrap: wrap; margin-top: 8px;
  font-size: 10px; letter-spacing: 0.14em; color: var(--fg-faint); text-transform: uppercase;
}
.nb-legend .nb-leg-phase { color: var(--fg-dim); }

.nb-tip {
  position: fixed; z-index: 60; pointer-events: none; display: none;
  background: var(--bg-panel-2); border: 1px solid var(--border);
  padding: 5px 11px; font-size: 12px; white-space: nowrap;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.55);
}
.nb-tip b { font-family: var(--jp); font-weight: 700; margin-right: 8px; }
.nb-tip span { color: var(--fg-dim); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; }
.nb-tip i { color: var(--accent); font-style: normal; font-size: 10px; margin-left: 8px; }

/* dossier side */
.nb-side { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.nb-head { display: flex; align-items: baseline; gap: 12px; border-bottom: 1px solid var(--border); padding-bottom: 8px; }
.nb-head-jp { font-family: var(--jp); font-weight: 700; font-size: 22px; letter-spacing: 0.08em; }
.nb-head-en { color: var(--fg-dim); font-size: 10.5px; letter-spacing: 0.2em; text-transform: uppercase; }
.nb-notes { flex: 1; overflow-y: auto; max-height: 260px; margin-top: 10px; display: flex; flex-direction: column; gap: 12px; padding-right: 6px; }
.nb-empty { color: var(--fg-faint); font-size: 12.5px; padding: 14px 0; }
.nb-empty-jp { display: block; font-family: var(--jp); font-size: 16px; color: var(--fg-dim); margin-bottom: 4px; }

.nb-note { position: relative; border-left: 2px solid var(--border); padding: 1px 0 1px 12px; }
.nb-note-meta { display: flex; gap: 10px; align-items: baseline; font-size: 10px; color: var(--fg-dim); letter-spacing: 0.06em; }
.nb-note-meta b { color: var(--fg); font-weight: 500; }
.nb-note-cond { font-size: 10px; color: var(--fg-faint); margin-top: 2px; }
.nb-note-txt { margin-top: 3px; font-size: 12.5px; white-space: pre-wrap; overflow-wrap: break-word; }
.nb-note-phs { display: flex; gap: 7px; margin-top: 7px; flex-wrap: wrap; }
.nb-note-phs img {
  width: 84px; height: 63px; object-fit: cover; display: block;
  border: 1px solid var(--border); cursor: zoom-in; filter: saturate(0.85) contrast(1.04);
}
.nb-note-phs img:hover { border-color: var(--accent); }
.nb-del {
  position: absolute; top: -2px; right: 0; width: 18px; height: 18px;
  background: var(--bg); border: 1px solid var(--border); color: var(--fg-dim);
  font-size: 11px; line-height: 1; cursor: pointer;
}
.nb-del:hover { color: var(--accent); border-color: var(--accent); }

/* form */
.nb-form { border-top: 1px solid var(--border); margin-top: 10px; padding-top: 10px; display: flex; flex-direction: column; gap: 8px; }
.nb-form input[type="text"], .nb-form textarea {
  width: 100%; background: var(--bg); color: var(--fg);
  border: 1px solid var(--border); padding: 7px 10px;
  font-family: var(--mono); font-size: 12.5px;
}
.nb-form textarea { resize: vertical; min-height: 48px; }
.nb-form input:focus, .nb-form textarea:focus { outline: none; border-color: var(--accent); }
.nb-form ::placeholder { color: var(--fg-faint); }
.nb-prev { display: flex; gap: 8px; }
.nb-prev:empty { display: none; }
.nb-pp { position: relative; }
.nb-pp img { width: 64px; height: 48px; object-fit: cover; border: 1px solid var(--border); display: block; }
.nb-pp button {
  position: absolute; top: -7px; right: -7px; width: 17px; height: 17px;
  background: var(--bg); border: 1px solid var(--border); color: var(--fg-dim);
  font-size: 10px; line-height: 1; cursor: pointer;
}
.nb-tools { display: flex; align-items: center; gap: 10px; }
.nb-btn {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.18em;
  cursor: pointer; padding: 8px 16px; border: 1px solid var(--accent);
  background: transparent; color: var(--accent); transition: background 0.15s, color 0.15s;
}
.nb-btn:hover, .nb-btn:focus-visible { background: var(--accent); color: var(--bg); outline: none; }
.nb-btn:disabled { opacity: 0.4; pointer-events: none; }
.nb-btn.ghost { border-color: var(--border); color: var(--fg-dim); padding: 7px 10px; }
.nb-btn.ghost:hover { background: var(--border); color: var(--fg); }
.nb-msg { font-size: 10px; color: var(--fg-dim); letter-spacing: 0.05em; margin-left: auto; }

#nb-lb {
  position: fixed; inset: 0; z-index: 80; display: none;
  background: rgba(4, 4, 7, 0.93); cursor: zoom-out;
  align-items: center; justify-content: center; padding: 4vh 4vw;
}
#nb-lb img { max-width: 100%; max-height: 100%; border: 1px solid var(--border); box-shadow: 0 20px 80px rgba(0, 0, 0, 0.8); }

@media (max-width: 860px) {
  .nb-wrap { grid-template-columns: 1fr; }
  .nb-svg { max-height: 46vh; }
}
@media (prefers-reduced-motion: reduce) {
  .nb-quake-fresh circle { animation: none; }
}

/* ─── the paperwork desk (bureau.js) ────────────── */
.bd-wrap { display: grid; grid-template-columns: 190px 1fr; gap: 16px; margin-top: 12px; }
.bd-tabs { display: flex; flex-direction: column; gap: 6px; }
.bd-tab {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em;
  text-align: left; padding: 8px 10px; cursor: pointer;
  background: rgba(16, 16, 21, 0.8); color: var(--fg-dim);
  border: 1px solid var(--border); border-left-width: 3px;
}
.bd-tab:hover { color: var(--fg); border-color: var(--fg-faint); }
.bd-tab.on { color: var(--fg); border-left-color: var(--accent); background: rgba(255, 46, 60, 0.06); }
.bd-form { min-width: 0; }
.bd-head b { display: block; font-size: 12px; letter-spacing: 0.14em; }
.bd-head span { display: block; font-size: 10px; color: var(--fg-faint); letter-spacing: 0.14em; text-transform: uppercase; margin-top: 2px; }
.bd-body { margin-top: 12px; display: flex; flex-direction: column; gap: 10px; }
.bd-row { display: flex; flex-direction: column; gap: 4px; }
.bd-row span { font-size: 10px; color: var(--fg-dim); letter-spacing: 0.16em; text-transform: uppercase; }
.bd-row input, .bd-row textarea {
  background: var(--bg); color: var(--fg); border: 1px dashed var(--border);
  padding: 7px 10px; font-family: var(--mono); font-size: 12.5px;
}
.bd-row textarea { resize: vertical; min-height: 52px; }
.bd-row input:focus, .bd-row textarea:focus { outline: none; border-color: var(--accent); border-style: solid; }
.bd-check { font-size: 12px; color: var(--fg-dim); cursor: pointer; display: flex; align-items: center; gap: 8px; }
.bd-check input { accent-color: var(--accent); }
.bd-submit {
  align-self: flex-start; font-family: var(--mono); font-size: 10.5px;
  letter-spacing: 0.18em; cursor: pointer; padding: 9px 18px;
  border: 1px solid var(--accent); background: transparent; color: var(--accent);
  transition: background 0.15s, color 0.15s;
}
.bd-submit:hover { background: var(--accent); color: var(--bg); }
.bd-zone { min-height: 74px; margin-top: 14px; position: relative; }
.bd-stamp {
  display: inline-block; font-family: var(--mono); font-weight: 800;
  font-size: 17px; letter-spacing: 0.2em; text-transform: uppercase;
  padding: 6px 14px; border: 3px double currentColor; transform: rotate(-8deg);
  animation: bd-slam 0.22s cubic-bezier(0.2, 2, 0.4, 1);
}
.bd-stamp.deny { color: var(--accent); }
.bd-stamp.approve { color: var(--accent-2); }
.bd-stamp.note { color: var(--accent-3); }
@keyframes bd-slam {
  from { transform: rotate(-8deg) scale(2.4); opacity: 0; }
  to { transform: rotate(-8deg) scale(1); opacity: 1; }
}
.bd-line { margin-top: 10px; font-size: 12.5px; color: var(--fg-dim); max-width: 60ch; }
.bd-album { font-size: 10.5px; color: var(--accent-2); letter-spacing: 0.18em; }
.bd-poses { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 7px; }
.bd-pose {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.06em;
  text-align: left; padding: 7px 9px; cursor: pointer;
  background: var(--bg); color: var(--fg-dim); border: 1px dashed var(--border);
}
.bd-pose:hover { color: var(--fg); border-color: var(--accent); }
.bd-pose.got { color: var(--accent-2); border-style: solid; border-color: rgba(0, 224, 255, 0.35); }
@media (prefers-reduced-motion: reduce) { .bd-stamp { animation: none; } }
@media (max-width: 700px) {
  .bd-wrap { grid-template-columns: 1fr; }
  .bd-tabs { flex-direction: row; flex-wrap: wrap; }
}

/* I-5 clause notes */
.bd-check { align-items: flex-start; }
.bd-check-label { display: flex; flex-direction: column; gap: 1px; }
.bd-check-note { font-style: normal; font-size: 10px; color: var(--fg-faint); letter-spacing: 0.06em; }

/* ─── the still: full-frame portrait + pull-quote (tokyo.js) ────── */
#mm-still {
  position: fixed; inset: 0; z-index: 90; display: none;
  cursor: zoom-out;
  background:
    radial-gradient(ellipse at 38% 42%, rgba(0, 224, 255, 0.05), transparent 55%),
    radial-gradient(circle at 50% 50%, #0b0b10 0%, #050507 78%);
  animation: mm-still-fade 0.32s ease;
}
#mm-still.on { display: flex; }
@keyframes mm-still-fade { from { opacity: 0; } to { opacity: 1; } }
.mm-still-inner {
  margin: auto; width: min(1120px, 94vw); max-height: 90vh;
  display: grid; grid-template-columns: minmax(0, 44%) 1fr;
  gap: clamp(24px, 5vw, 72px); align-items: center;
  padding: 4vh 2vw;
}
.mm-still-art { display: flex; align-items: center; justify-content: center; min-width: 0; }
.mm-still-art img {
  max-height: 82vh; max-width: 100%; object-fit: contain; display: block;
  border: 1px solid var(--border);
  box-shadow: 0 40px 120px rgba(0, 0, 0, 0.75), 0 0 0 1px rgba(0, 224, 255, 0.06);
  filter: saturate(1.02) contrast(1.03);
}
.mm-still-dark .mm-still-art img { box-shadow: 0 40px 120px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(255, 46, 60, 0.14); }
.mm-still-text { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.mm-still-eyebrow {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.34em;
  color: var(--accent-2); text-transform: uppercase;
}
.mm-still-dark .mm-still-eyebrow { color: var(--accent); }
.mm-still-line {
  font-family: var(--jp); font-weight: 700;
  font-size: clamp(22px, 3.5vw, 42px); line-height: 1.32;
  letter-spacing: 0.01em; text-wrap: balance; color: var(--fg);
}
.mm-still-mark {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.26em;
  color: var(--fg-faint); text-transform: uppercase; margin-top: 6px;
}
.mm-still-close {
  position: absolute; top: 22px; right: 26px; z-index: 2;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.2em;
  color: var(--fg-dim); text-transform: uppercase; pointer-events: none;
}
@media (max-width: 720px) {
  .mm-still-inner { grid-template-columns: 1fr; gap: 22px; padding: 8vh 6vw 4vh; }
  .mm-still-art img { max-height: 52vh; }
  .mm-still-line { font-size: clamp(20px, 6vw, 30px); }
}
@media (prefers-reduced-motion: reduce) { #mm-still { animation: none; } }

/* 47-O random approval reveal */
.bd-reveal { margin-top: 12px; }
.bd-reveal img {
  max-width: 180px; max-height: 300px; display: block;
  border: 1px solid rgba(0, 224, 255, 0.4); cursor: zoom-in;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.6);
}
.bd-reveal img:hover { border-color: var(--accent-2); }
#bd-lb {
  position: fixed; inset: 0; z-index: 95; display: none;
  background: rgba(4, 4, 7, 0.94); cursor: zoom-out;
  align-items: center; justify-content: center; padding: 4vh 4vw;
}
#bd-lb img { max-width: 100%; max-height: 100%; border: 1px solid var(--border); box-shadow: 0 30px 90px rgba(0, 0, 0, 0.8); }

/* ─── legibility: lift the greys on the Tokyo tab ────────────────
   --fg-faint (#4a4a52) sat around 3:1 on the near-black ground — too dark for
   the label/meta text it's used on (30 uses here). These are scoped to the
   page so the rest of the site keeps its original palette. */
.page-tokyo {
  --fg-dim: #a8a8b2;    /* was #8a8a92 */
  --fg-faint: #7c7c88;  /* was #4a4a52 */
}

/* ─── midnight index (midnight.js) ─────────────────── */
.mi-rows { display: flex; flex-direction: column; gap: 2px; }
.mi-row {
  display: grid;
  grid-template-columns: 130px 1fr auto;
  gap: 12px;
  align-items: baseline;
  padding: 6px 9px;
  border-left: 2px solid var(--border);
  background: rgba(0, 0, 0, 0.22);
  font-size: 11.5px;
  color: var(--fg-faint);
  transition: border-color 0.3s, color 0.3s;
}
.mi-row.on { border-left-color: var(--accent-2); color: var(--fg-dim); background: rgba(0, 224, 255, 0.045); }
.mi-name { color: var(--fg-dim); letter-spacing: 0.12em; white-space: nowrap; }
.mi-row.on .mi-name { color: var(--fg); }
.mi-name i { font-style: normal; font-family: var(--jp); color: var(--fg-faint); margin-left: 7px; letter-spacing: 0.16em; }
.mi-note { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mi-when { white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--fg-faint); font-weight: 400; }
.mi-row.on .mi-when { color: var(--accent-2); }
.mi-verdict { margin-top: 12px; }
@media (max-width: 620px) {
  .mi-row { grid-template-columns: 1fr auto; }
  .mi-note { display: none; }
}