/* World Clock — components. All colors via --twb-* tokens (tokens.css). */

* { box-sizing: border-box; }
html { height: 100%; }
body {
  margin: 0; min-height: 100vh;
  background: var(--twb-bg-0); color: var(--twb-text-normal);
  font-family: var(--twb-font-ui); line-height: var(--twb-line-height-tight);
  font-size: 15px;
  display: flex; flex-direction: column;
}
.mono { font-family: var(--twb-font-mono); }
::selection { background: var(--twb-selection); }

/* Accent choice: remap --twb-accent onto another token (works in both modes;
   color-mix tints re-derive automatically where supported). */
:root[data-accent="1"] { --twb-accent: var(--twb-accent-alt); }
:root[data-accent="2"] { --twb-accent: var(--twb-warm); }
:root[data-accent="3"] { --twb-accent: var(--twb-violet); }
:root[data-accent="4"] { --twb-accent: var(--twb-orange); }
:root[data-accent="5"] { --twb-accent: var(--twb-red); }

/* manifest label idiom */
.manifest-label {
  font-family: var(--twb-font-mono); font-size: 10.5px; font-weight: 650;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--twb-text-muted);
}

/* --- topbar --- */
.topbar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 16px;
  padding: 0 16px; height: 48px;
  background: var(--twb-bg-1); border-bottom: 1px solid var(--twb-border);
}
.site-title { color: var(--twb-accent); font-size: 12px; }
.topbar-utc { margin-left: auto; display: flex; align-items: baseline; gap: 6px; }
#utc-clock { font-size: 13px; color: var(--twb-text-soft); }
.topbar-actions { display: flex; gap: 4px; }
@media (max-width: 420px) { .topbar-utc .manifest-label { display: none; } }
.icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; padding: 0;
  background: transparent; border: 1px solid transparent;
  border-radius: var(--twb-radius-s); color: var(--twb-text-muted);
  cursor: pointer;
}
.icon-btn:hover { background: var(--twb-bg-3); color: var(--twb-text-normal); }
.icon-btn:focus-visible {
  outline: 2px solid var(--twb-focus-ring); outline-offset: 1px;
  border-color: var(--twb-accent);
}

/* --- layout --- */
main {
  width: 100%; max-width: 1200px; margin: 0 auto; padding: 16px;
  display: flex; flex-direction: column; gap: 16px; flex: 1; min-height: 0;
}
.panel {
  background: var(--twb-bg-1); border: 1px solid var(--twb-border);
  border-radius: var(--twb-radius-m); overflow: hidden;
}
.panel-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 8px 12px; border-bottom: 1px solid var(--twb-border);
}

/* --- footer --- */
.footer {
  display: flex; justify-content: center; gap: 18px;
  padding: 14px; border-top: 1px solid var(--twb-border);
  font-size: 11px; color: var(--twb-text-faint);
  background: var(--twb-bg-0); position: relative; z-index: 2;
}
.footer a { color: var(--twb-text-faint); }
.footer a:hover { color: var(--twb-accent); }

@media (prefers-reduced-motion: no-preference) {
  .icon-btn, .footer a { transition: background var(--twb-transition), color var(--twb-transition); }
}

/* --- clock cards --- */
.clock-grid {
  display: grid; gap: 12px; align-content: start;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  padding-bottom: 4px;
}
.clock-card {
  position: relative;
  background: var(--twb-bg-1); border: 1px solid var(--twb-border);
  border-radius: var(--twb-radius-m); padding: 12px 14px;
}
.clock-card-home { border-top: 2px solid var(--twb-accent); }
.card-top { display: flex; align-items: center; gap: 8px; }
.card-city {
  font-family: var(--twb-font-mono); font-size: 11px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--twb-accent);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.card-daynight { margin-left: auto; display: inline-flex; }
.card-home-tag { font-size: 9.5px; color: var(--twb-text-faint); }
.card-remove {
  position: absolute; top: 6px; right: 6px;
  width: 20px; height: 20px; padding: 0; line-height: 1;
  background: transparent; border: none; border-radius: var(--twb-radius-s);
  color: var(--twb-text-faint); font-size: 14px; cursor: pointer;
  opacity: 0;
}
.clock-card:hover .card-remove, .card-remove:focus-visible { opacity: 1; }
.card-remove:hover { background: var(--twb-bg-3); color: var(--twb-red); }
.card-remove:focus-visible { outline: 2px solid var(--twb-focus-ring); outline-offset: 1px; }
.clock-card:has(.card-remove) .card-daynight { margin-right: 14px; }
.card-time { font-size: 27px; color: var(--twb-text-normal); margin: 6px 0 2px; }
.card-ampm { font-size: 12px; color: var(--twb-text-muted); margin-left: 5px; }
.card-zoneline { font-size: 11px; color: var(--twb-text-muted); }
.card-chips { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.chip {
  font-size: 11px; padding: 1px 7px;
  border-radius: var(--twb-radius-s); border: 1px solid;
}
.chip-offset {
  color: var(--twb-accent-alt);
  background: var(--twb-active-line); border-color: var(--twb-tag-border);
}
.chip-today {
  color: var(--twb-text-muted);
  background: transparent; border-color: var(--twb-border);
}
.chip-otherday {
  color: var(--twb-warm);
  background: var(--twb-highlight); border-color: var(--twb-warm);
}
.card-date { font-size: 11px; color: var(--twb-text-faint); margin-top: 7px; }
.clock-card.dragging { opacity: 0.4; }
.clock-card.drag-over { border-color: var(--twb-accent); }

/* --- map --- */
.map-panel { flex-shrink: 0; }
#map-host { position: relative; }
/* Cap the map's height so it can't crowd the pinned grid down past the
   footer on short viewports (e.g. 1280x800 laptops) as well as narrow
   ones — the aspect-locked SVG otherwise grows with container width alone. */
@media (max-width: 900px), (max-height: 820px) {
  /* max-width = 2 x max-height keeps the element box at the viewBox's 2:1
     aspect whichever cap binds — otherwise preserveAspectRatio letterboxes
     the drawing and screen<->lat/lon math (connector, chip midpoint) skews. */
  #map-host svg { max-height: 40vh; max-width: 80vh; margin: 0 auto; }
}
.worldmap { display: block; width: 100%; height: auto; background: var(--twb-bg-0); }
.map-graticule line { stroke: var(--twb-border); stroke-width: 0.5; opacity: 0.35; }
.map-land { fill: var(--twb-bg-4); stroke: var(--twb-border-strong); stroke-width: 0.5; }
.map-night { fill: #000; opacity: 0.34; pointer-events: none; }
:root[data-theme="light"] .map-night { opacity: 0.18; }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .map-night { opacity: 0.18; }
}
.map-sun-core { fill: var(--twb-warm); }
.map-sun-halo { fill: none; stroke: var(--twb-warm); stroke-width: 1; opacity: 0.5; }
.map-marker .marker-dot { fill: var(--twb-accent); }
.map-marker .marker-ring { fill: none; stroke: var(--twb-accent); stroke-width: 1.2; }
.map-marker { cursor: pointer; }
.map-marker.marker-hilite .marker-dot { r: 5; }
.map-marker.marker-hilite .marker-dot,
.map-marker:hover .marker-dot { fill: var(--twb-accent-alt); }
.map-tip {
  position: absolute; z-index: 5; pointer-events: none;
  padding: 3px 8px; font-size: 11px; white-space: nowrap;
  background: var(--twb-bg-2); border: 1px solid var(--twb-border);
  border-radius: var(--twb-radius-s); color: var(--twb-text-normal);
  box-shadow: var(--twb-shadow-pane);
}
.clock-card.card-hilite { border-color: var(--twb-accent); }

/* --- settings panel --- */
#settings-panel {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 30;
  width: min(320px, 90vw);
  background: var(--twb-bg-1); border-left: 1px solid var(--twb-border);
  box-shadow: var(--twb-shadow-pane);
  transform: translateX(105%);
}
#settings-panel.open { transform: translateX(0); }
@media (prefers-reduced-motion: no-preference) {
  #settings-panel { transition: transform 160ms ease; }
}
.settings-body { padding: 12px; display: flex; flex-direction: column; gap: 14px; overflow-y: auto; }
.setting-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.seg { display: inline-flex; border: 1px solid var(--twb-border); border-radius: var(--twb-radius-s); overflow: hidden; }
.seg button {
  background: transparent; border: none; padding: 4px 9px; cursor: pointer;
  font-family: var(--twb-font-mono); font-size: 10.5px; letter-spacing: 0.05em;
  color: var(--twb-text-muted);
}
.seg button:hover { background: var(--twb-bg-3); color: var(--twb-text-normal); }
.seg button.seg-active { background: var(--twb-nav-active); color: var(--twb-accent); }
.accent-seg button { font-size: 13px; }
.accent-seg button.seg-active { background: var(--twb-bg-3); }
.text-btn {
  background: var(--twb-bg-2); border: 1px solid var(--twb-border);
  border-radius: var(--twb-radius-s); color: var(--twb-text-soft);
  padding: 4px 9px; font-size: 11px; cursor: pointer;
  max-width: 170px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.text-btn:hover { border-color: var(--twb-accent); color: var(--twb-text-normal); }

/* --- add-zone modal --- */
#add-modal {
  position: fixed; inset: 0; z-index: 40; display: none;
  background: rgba(0, 0, 0, 0.45);
  align-items: flex-start; justify-content: center; padding: 60px 16px;
}
#add-modal.open { display: flex; }
.modal-box { width: min(440px, 100%); max-height: 75vh; display: flex; flex-direction: column; box-shadow: var(--twb-shadow-pane); }
#add-search {
  margin: 10px 12px; padding: 7px 10px;
  background: var(--twb-bg-2); border: 1px solid var(--twb-border);
  border-radius: var(--twb-radius-s); color: var(--twb-text-normal); font-size: 13px;
}
#add-search:focus { outline: 2px solid var(--twb-focus-ring); border-color: var(--twb-accent); }
#add-results, #add-suggested { overflow-y: auto; }
#add-results { max-height: 240px; }
#add-suggested { max-height: 200px; }
.zone-row {
  display: flex; justify-content: space-between; gap: 12px; width: 100%;
  background: transparent; border: none; border-top: 1px solid var(--twb-border);
  padding: 7px 12px; font-size: 12px; color: var(--twb-text-soft);
  cursor: pointer; text-align: left;
}
.zone-row:hover { background: var(--twb-bg-3); color: var(--twb-text-normal); }
.zone-row.zone-row-active {
  background: var(--twb-nav-active); color: var(--twb-text-normal);
  box-shadow: inset 2px 0 0 var(--twb-accent);
}
.zone-row.zone-row-active .zone-id { color: var(--twb-text-soft); }
.zone-id { color: var(--twb-text-faint); font-size: 11px; }
.zone-empty { padding: 10px 12px; font-size: 11px; color: var(--twb-text-faint); }
/* --- site pet (site.config.json: pet_enabled) --- */
/* MODE=off: pet.js stops animating it, but the element itself isn't
   otherwise removed — hide it outright so it doesn't sit frozen on screen. */
:root[data-pet="off"] #site-pet { display: none; }
#site-pet {
  position: fixed; left: 0; top: 0;
  width: var(--pet-size, 28px); height: var(--pet-size, 28px);
  /* Below the topbar's stacking context (20) so the ghost never covers the
     open search dropdown or steals a click on a result; still floats above
     the article's auto-stacked content. */
  z-index: 19; pointer-events: none;
  opacity: var(--pet-base-opacity, 0.7);  /* translucent; dims further while napping */
  transition: opacity 0.9s ease;
}
#site-pet.pet-nap { opacity: 0.3; }
.pet-tilt { width: 100%; height: 100%; }
.pet-sprite {
  width: 100%; height: 100%;
  pointer-events: auto; cursor: grab;
  touch-action: none;
  animation: pet-bob 2.4s ease-in-out infinite;
}
.pet-sprite:active { cursor: grabbing; }
.pet-sprite svg { display: block; width: 100%; height: 100%; shape-rendering: crispEdges; }
/* Petting the ghost cycles its body through the theme palette (same six
   tokens as the folder colors); the index rides on data-color, and 0 is the
   default accent. Tokens are theme-aware, so the color follows light/dark. */
.pet-body { fill: var(--twb-accent); }
#site-pet[data-color="1"] .pet-body { fill: var(--twb-accent-alt); }
#site-pet[data-color="2"] .pet-body { fill: var(--twb-warm); }
#site-pet[data-color="3"] .pet-body { fill: var(--twb-violet); }
#site-pet[data-color="4"] .pet-body { fill: var(--twb-orange); }
#site-pet[data-color="5"] .pet-body { fill: var(--twb-red); }
.pet-eyes-open rect, .pet-eyes-closed rect { fill: var(--twb-bg-0); }
.pet-eyes-happy path { stroke: var(--twb-bg-0); stroke-width: 1.2; fill: none; }
.pet-eyes-closed, .pet-eyes-happy { display: none; }
.pet-sprite.pet-blink .pet-eyes-open,
#site-pet.pet-nap .pet-eyes-open,
.pet-sprite.pet-happy .pet-eyes-open { display: none; }
.pet-sprite.pet-blink .pet-eyes-closed,
#site-pet.pet-nap .pet-eyes-closed { display: inline; }
.pet-sprite.pet-happy .pet-eyes-happy { display: inline; }
/* Wide "boo!" eyes (jump scare) and dizzy X-eyes (rapid boops). */
.pet-eyes-scared circle { fill: var(--twb-bg-0); }
.pet-eyes-dizzy path { stroke: var(--twb-bg-0); stroke-width: 1.1; fill: none; stroke-linecap: round; }
.pet-eyes-scared, .pet-eyes-dizzy { display: none; }
.pet-sprite.pet-boo .pet-eyes-open,
.pet-sprite.pet-dizzy .pet-eyes-open { display: none; }
.pet-sprite.pet-boo .pet-eyes-scared { display: inline; }
.pet-sprite.pet-dizzy .pet-eyes-dizzy { display: inline; }
/* Boo: a sudden big pop. Dizzy: a woozy wobble. */
.pet-sprite.pet-boo { animation: pet-boo 0.5s ease-out; }
.pet-sprite.pet-dizzy { animation: pet-dizzy-wob 0.5s ease-in-out 3; }
@keyframes pet-boo {
  0% { transform: scale(1); } 22% { transform: scale(1.75); }
  55% { transform: scale(1.35); } 100% { transform: scale(1.3); }
}
@keyframes pet-dizzy-wob {
  0%, 100% { transform: rotate(-13deg) scale(1.02); }
  50% { transform: rotate(13deg) scale(1.02); }
}
/* Boop: a quick happy squish-and-pop (overrides the idle bob while it plays). */
.pet-sprite.pet-happy { animation: pet-boop 0.5s ease-in-out; }
.pet-sprite.pet-sneak { animation-play-state: paused; }
/* Startled: cartoon vertical squash-and-stretch as it zips away (#3). */
.pet-sprite.pet-spook { animation: pet-spook 0.5s ease-out; }
/* Bored barrel-roll / flip (#4). */
.pet-sprite.pet-spin { animation: pet-spin 0.74s ease-in-out; }
.pet-sprite.pet-flip { animation: pet-flip 0.74s ease-in-out; }
/* The whole ghost dips in opacity for the beat of a startle. */
#site-pet.pet-startled { animation: pet-startle-fade 0.7s ease-out; }
.pet-particle {
  position: absolute; left: 9px; top: -8px;
  font-family: var(--twb-font-mono); font-size: 12px; font-weight: 700;
  pointer-events: none;
  animation: pet-float 1.3s ease-out forwards;
}
.pet-heart { color: var(--twb-red); }
.pet-bang { color: var(--twb-accent); }
.pet-z { color: var(--twb-text-muted); }
.pet-wake { color: var(--twb-accent-alt); font-size: 10px; }
/* Afterimage: faint body silhouettes left behind while zipping fast. */
.pet-trail {
  position: fixed; z-index: 18; pointer-events: none;
  opacity: 0.3; animation: pet-trail-fade 0.42s ease-out forwards;
}
.pet-trail svg { display: block; width: 100%; height: 100%; }
.pet-trail .pet-body { fill: var(--twb-text-faint); }
.pet-trail g { display: none; }
@keyframes pet-trail-fade { from { opacity: 0.32; } to { opacity: 0; } }
/* Jump scare (opt-in): a huge ghost face lunges in, fills the screen, and
   shakes, then fades. */
.wc-scare-overlay {
  position: fixed; inset: 0; z-index: 60; pointer-events: none;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0, 0, 0, 0.55);
  animation: wc-scare-fade 0.85s ease-out forwards;
}
.wc-scare-face {
  width: auto; height: 94vh; max-width: 96vw;
  --scare-col: var(--twb-accent);   /* matches the ghost you're chasing (data-color) */
  filter: drop-shadow(0 0 34px var(--scare-col));
  animation: wc-scare-shake 0.45s ease-in-out, wc-scare-pop 0.85s ease-out;
}
.wc-scare-face[data-color="1"] { --scare-col: var(--twb-accent-alt); }
.wc-scare-face[data-color="2"] { --scare-col: var(--twb-warm); }
.wc-scare-face[data-color="3"] { --scare-col: var(--twb-violet); }
.wc-scare-face[data-color="4"] { --scare-col: var(--twb-orange); }
.wc-scare-face[data-color="5"] { --scare-col: var(--twb-red); }
.wc-scare-face .face-body { fill: var(--scare-col); }
.wc-scare-face .face-dark { fill: var(--twb-bg-0); }
@keyframes wc-scare-fade { 0%, 68% { opacity: 1; } 100% { opacity: 0; } }
@keyframes wc-scare-pop { 0% { transform: scale(0.2); } 22% { transform: scale(1.06); } 100% { transform: scale(1); } }
@keyframes wc-scare-shake {
  0%, 100% { margin-left: 0; margin-top: 0; }
  12% { margin-left: -26px; margin-top: 14px; }
  26% { margin-left: 22px; margin-top: -18px; }
  40% { margin-left: -30px; margin-top: -10px; }
  55% { margin-left: 26px; margin-top: 18px; }
  72% { margin-left: -16px; margin-top: 8px; }
  86% { margin-left: 12px; margin-top: -6px; }
}
@keyframes pet-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}
@keyframes pet-boop {
  0%, 100% { transform: scale(1); }
  30% { transform: scale(1.35); }
  60% { transform: scale(0.9); }
}
@keyframes pet-spook {
  0% { transform: scaleY(1) scaleX(1); }
  25% { transform: scaleY(1.5) scaleX(0.65); }
  60% { transform: scaleY(0.9) scaleX(1.12); }
  100% { transform: scaleY(1) scaleX(1); }
}
@keyframes pet-spin {
  from { transform: rotate(0); }
  to { transform: rotate(360deg); }
}
@keyframes pet-flip {
  from { transform: rotateY(0); }
  to { transform: rotateY(360deg); }
}
@keyframes pet-startle-fade {
  0% { opacity: 0.7; }
  30% { opacity: 0.25; }
  100% { opacity: 0.7; }
}
@keyframes pet-float {
  from { opacity: 1; transform: translateY(0); }
  to { opacity: 0; transform: translateY(-26px); }
}
.pet-bubble {
  position: absolute; left: 50%; bottom: 100%; margin-bottom: 6px;
  transform: translateX(-50%);
  padding: 3px 7px; font-family: var(--twb-font-mono); font-size: 11px; line-height: 1.2;
  white-space: nowrap; color: var(--twb-text-normal);
  background: var(--twb-bg-2); border: 1px solid var(--twb-border);
  border-radius: 6px; box-shadow: 0 2px 8px rgba(0,0,0,.28);
  pointer-events: none; animation: pet-bubble-in 2.6s ease forwards;
}
.pet-bubble::after {
  content: ""; position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  border: 4px solid transparent; border-top-color: var(--twb-bg-2);
}
.pet-bubble-boop, .pet-bubble-good { color: var(--twb-accent); }
@keyframes pet-bubble-in {
  0% { opacity: 0; transform: translateX(-50%) translateY(4px); }
  12%, 82% { opacity: 1; transform: translateX(-50%) translateY(0); }
  100% { opacity: 0; transform: translateX(-50%) translateY(-2px); }
}

.pet-header { padding: 8px 0 2px; border-bottom: 1px solid var(--twb-border); margin-top: 4px; }
#pet-settings { display: flex; flex-direction: column; gap: 12px; }
#pet-settings input[type="range"] { width: 140px; accent-color: var(--twb-accent); }

/* --- scrollbars (per THEME-SPEC; ported from the vault repo) --- */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--twb-border-strong) transparent;
}
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background-color: var(--twb-border-strong);
  background-clip: padding-box;
  border: 2px solid transparent;
  border-radius: 5px;
}
::-webkit-scrollbar-thumb:hover { background-color: var(--twb-text-faint); }
::-webkit-scrollbar-corner { background: transparent; }

/* --- Step 1b theming coverage gaps --- */
#add-search::placeholder { color: var(--twb-text-faint); }

/* Range sliders: themed thumb/track (accent-color covers most browsers;
   explicit styling for full cross-browser + high-contrast track look). */
#pet-settings input[type="range"] {
  height: 4px; border-radius: var(--twb-radius-pill);
  background: var(--twb-bg-3); outline: none;
}
#pet-settings input[type="range"]::-webkit-slider-runnable-track {
  height: 4px; border-radius: var(--twb-radius-pill); background: var(--twb-bg-3);
}
#pet-settings input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 14px; height: 14px; margin-top: -5px;
  border-radius: 50%; background: var(--twb-accent);
  border: 2px solid var(--twb-bg-1); cursor: pointer;
}
#pet-settings input[type="range"]::-moz-range-track {
  height: 4px; border-radius: var(--twb-radius-pill); background: var(--twb-bg-3);
}
#pet-settings input[type="range"]::-moz-range-thumb {
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--twb-accent); border: 2px solid var(--twb-bg-1); cursor: pointer;
}
#pet-settings input[type="range"]:focus-visible {
  outline: 2px solid var(--twb-focus-ring); outline-offset: 2px;
}

/* Focus-visible rings on remaining interactive surfaces */
.seg button:focus-visible,
.zone-row:focus-visible,
.text-btn:focus-visible {
  outline: 2px solid var(--twb-focus-ring); outline-offset: -2px;
}

/* --- time scrubber --- */
.scrub-bar {
  display: flex; align-items: center; gap: 12px;
  padding: 7px 14px; flex-shrink: 0;
  background: var(--twb-bg-1); border: 1px solid var(--twb-border);
  border-radius: var(--twb-radius-m);
}
#scrub-range { flex: 1; accent-color: var(--twb-accent); min-width: 0; }
.scrub-label { font-size: 12px; color: var(--twb-text-muted); min-width: 62px; text-align: right; }
:root[data-scrub="on"] .scrub-label { color: var(--twb-warm); font-weight: 700; }
:root[data-scrub="on"] .scrub-bar { border-color: var(--twb-warm); }
.scrub-now-btn {
  background: var(--twb-highlight); border: 1px solid var(--twb-warm);
  border-radius: var(--twb-radius-s); color: var(--twb-warm);
  font-size: 10.5px; letter-spacing: 0.06em; padding: 3px 9px; cursor: pointer;
  /* Always occupies its slot; only paints while scrubbed, so the flex:1
     slider track never resizes mid-drag when crossing NOW. */
  visibility: hidden;
}
:root[data-scrub="on"] .scrub-now-btn { visibility: visible; }
.scrub-now-btn:hover { background: var(--twb-warm); color: var(--twb-text-on-accent); }

/* --- help overlay --- */
#help-modal {
  position: fixed; inset: 0; z-index: 40; display: none;
  background: rgba(0, 0, 0, 0.45);
  align-items: flex-start; justify-content: center; padding: 60px 16px;
}
#help-modal.open { display: flex; }
#help-modal .modal-box { width: min(340px, 100%); }
.help-body { padding: 10px 14px 14px; display: flex; flex-direction: column; gap: 8px; }
.help-row { display: flex; align-items: center; gap: 12px; font-size: 12px; color: var(--twb-text-soft); }
.help-row kbd {
  min-width: 44px; text-align: center; padding: 2px 6px;
  background: var(--twb-bg-2); border: 1px solid var(--twb-border);
  border-bottom-width: 2px; border-radius: var(--twb-radius-s);
  color: var(--twb-accent); font-family: var(--twb-font-mono); font-size: 11px;
}

/* --- kiosk mode --- */
:root[data-kiosk="on"] .topbar,
:root[data-kiosk="on"] .footer,
:root[data-kiosk="on"] .card-chips { display: none; }
:root[data-kiosk="on"]:not([data-scrub="on"]) .scrub-bar { display: none; }
:root[data-kiosk="on"] main { max-width: none; }
:root[data-kiosk="on"] .card-time { font-size: 42px; }
:root[data-kiosk="on"] .clock-grid { grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); }
.kiosk-hint {
  position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%); z-index: 50;
  padding: 5px 12px; font-size: 11px; letter-spacing: 0.08em;
  background: var(--twb-bg-2); border: 1px solid var(--twb-border);
  border-radius: var(--twb-radius-s); color: var(--twb-text-muted);
  box-shadow: var(--twb-shadow-pane);
  animation: kiosk-hint-fade 2.6s ease forwards;
}
@keyframes kiosk-hint-fade {
  0% { opacity: 0; } 12%, 78% { opacity: 1; } 100% { opacity: 0; }
}

/* --- nicknames + copy --- */
.card-name-input {
  width: 110px; padding: 1px 4px;
  background: var(--twb-bg-2); border: 1px solid var(--twb-accent);
  border-radius: var(--twb-radius-s); color: var(--twb-text-normal);
  font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase;
}
.card-time { cursor: pointer; }
.card-time:hover { color: var(--twb-accent); }
.copy-flash {
  position: absolute; top: 30px; right: 8px;
  padding: 1px 7px; font-size: 10px; letter-spacing: 0.06em;
  background: var(--twb-tag-bg); border: 1px solid var(--twb-tag-border);
  border-radius: var(--twb-radius-s); color: var(--twb-accent);
  animation: kiosk-hint-fade 1.4s ease forwards;
}

/* --- waking-hours bar (09:00-17:00 band, marker = local now) --- */
.card-daybar {
  position: relative; height: 3px; margin-top: 8px;
  background: var(--twb-bg-3); border-radius: 2px;
}
.daybar-work {
  position: absolute; top: 0; bottom: 0;
  left: 37.5%; width: 33.333%;                /* 09:00 .. 17:00 of a 24h track */
  background: var(--twb-tag-bg); border-radius: 2px;
}
.daybar-now {
  position: absolute; top: -2px; width: 2px; height: 7px;
  background: var(--twb-accent); border-radius: 1px;
}

/* --- map measure connectors (multiple; label rides the line) --- */
.map-clear-btn {
  position: absolute; bottom: 8px; right: 8px; z-index: 4;
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 8px; height: auto;
  font-size: 10.5px; font-weight: 650; letter-spacing: 0.07em;
  background: var(--twb-bg-2); border: 1px solid var(--twb-border);
  border-radius: var(--twb-radius-s); color: var(--twb-text-muted);
  cursor: pointer; box-shadow: var(--twb-shadow-pane);
}
.map-clear-btn:hover { border-color: var(--twb-red); color: var(--twb-red); background: var(--twb-bg-3); }
.map-clear-btn:focus-visible { outline: 2px solid var(--twb-focus-ring); outline-offset: 1px; }
.conn-hit { fill: none; stroke: transparent; stroke-width: 14; pointer-events: stroke; cursor: pointer; }
.conn-line {
  fill: none; stroke: var(--twb-accent-alt); stroke-width: 1.5;
  stroke-dasharray: 7 5; pointer-events: none;
}
.conn-dot { fill: var(--twb-accent-alt); pointer-events: none; }
.conn-snap { fill: none; stroke: var(--twb-accent-alt); stroke-width: 1.4; opacity: 0.8; }
.conn-label {
  font-family: var(--twb-font-mono); font-size: 12px; font-weight: 700;
  letter-spacing: 0.06em; fill: var(--twb-text-normal);
  paint-order: stroke; stroke: var(--twb-bg-0); stroke-width: 3px;
  pointer-events: none;
}
.conn-g.conn-old { opacity: 0.55; }
.conn-g:hover { opacity: 1; }
.conn-g:hover .conn-line { stroke: var(--twb-red); }
.conn-g:hover .conn-dot { fill: var(--twb-red); }
@media (prefers-reduced-motion: no-preference) {
  .conn-line.conn-flow-fwd { animation: conn-flow 0.9s linear infinite; }
  .conn-line.conn-flow-rev { animation: conn-flow 0.9s linear infinite reverse; }
}
@keyframes conn-flow {
  from { stroke-dashoffset: 0; }
  to { stroke-dashoffset: -24; }
}

/* --- map time labels --- */
.marker-time {
  font-family: var(--twb-font-mono); font-size: 9px; font-weight: 700;
  fill: var(--twb-text-normal);
  paint-order: stroke; stroke: var(--twb-bg-0); stroke-width: 2.5px;
  pointer-events: none;
}

/* --- collapsible map --- */
.panel-header-right { display: flex; align-items: center; gap: 8px; }
.map-toggle { width: 22px; height: 22px; }
.map-toggle svg { transition: transform var(--twb-transition); }
@media (prefers-reduced-motion: reduce) { .map-toggle svg { transition: none; } }
:root[data-map="collapsed"] #map-host { display: none; }
:root[data-map="collapsed"] .map-toggle svg { transform: rotate(180deg); }