/* Front arrows — the dock flyout and the day scrubber.
   Tokens come from the Tactical Glass layer in main.css; --arw-accent is the
   colour of the side you are currently drawing for. */

/* Set on :root by the hud whenever the drawing side changes, so the dock glyph
   and the day strip (which are not nested) stay the same colour. */
:root { --arw-accent: #ff7a68; }

/* === dock flyout ======================================================== */

 /* The day strip lives on the same strip of map, directly under this flyout.
   mountArrowDays publishes its height so the panel starts above it instead of
   landing on top of it. */
.arw-flyout {
  flex-direction: column;
  bottom: calc(100% + 10px + var(--arw-days-h, 0px));
}

.arw-panel {
  display: flex;
  flex-direction: column;
  gap: 9px;
  width: 268px;
  padding: 11px 12px 10px;
  background: var(--glass-strong);
  border: 1px solid var(--edge-soft);
  border-radius: 10px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(9px);
  -webkit-backdrop-filter: blur(9px);
}

.arw-row { display: flex; align-items: center; gap: 6px; }
.arw-sides { gap: 7px; }

/* The swatch IS the label — the colour already says which side it draws. */
.arw-side {
  width: 26px;
  height: 22px;
  padding: 0;
  border: 1px solid rgba(0, 0, 0, 0.45);
  border-radius: 5px;
  background: var(--sw, #888);
  cursor: pointer;
  opacity: 0.55;
  transition: opacity 0.14s ease, box-shadow 0.14s ease, transform 0.08s ease;
}
.arw-side:hover { opacity: 0.85; }
.arw-side:active { transform: scale(0.94); }
.arw-side:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--blue-400); }
.arw-side.is-on {
  opacity: 1;
  box-shadow: 0 0 0 1px rgba(8, 14, 23, 0.9), 0 0 0 2px currentColor, 0 0 9px color-mix(in srgb, var(--sw) 60%, transparent);
  color: #eaf4ff;
}

.arw-patterns .spot-hud-ic { width: 28px; height: 26px; font-size: 13px; }
.arw-mini { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.arw-mini input[type="range"] { width: 70px; accent-color: var(--accent); }
.arw-mini > b { min-width: 30px; text-align: right; font-size: 10px; color: #cfe0f2; font-variant-numeric: tabular-nums; }

.arw-slider {
  display: grid;
  grid-template-columns: 44px 1fr 52px;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  color: var(--muted);
}
.arw-slider input[type="range"] { width: 100%; accent-color: var(--accent); }
.arw-slider > b { text-align: right; font-size: 10.5px; color: #dcebff; font-variant-numeric: tabular-nums; }

.arw-acts { gap: 6px; }
.arw-acts .cmd-btn { flex: 1; height: 26px; padding: 0 8px; font-size: 10px; }
.arw-ic { width: 26px; height: 26px; flex: none; font-size: 14px; line-height: 1; }
.arw-ic[disabled] { opacity: 0.3; cursor: not-allowed; }

.arw-hint {
  font-size: 10.5px;
  line-height: 1.45;
  color: var(--muted);
  border-top: 1px solid var(--edge-soft);
  padding-top: 7px;
  min-height: 29px;
}
.arw-hint b { color: #dcebff; font-weight: 700; }

.arw-main.is-on { color: var(--arw-accent); filter: drop-shadow(0 0 9px color-mix(in srgb, var(--arw-accent) 70%, transparent)); }

/* === day scrubber ======================================================= */
/* Sits on the same strip of map as the bottom glyph dock, just above it. */

/* Centred over the MAP (mountArrowDays measures the two side panels and sets
   `left` in px), not over the bottom glyph dock. */
.arw-days {
  position: fixed;
  left: 50%;
  bottom: 74px;
  z-index: 31;
  width: 436px;
  max-width: calc(100vw - 32px);
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 9px 11px 8px;
  background: var(--glass);
  border: 1px solid var(--edge-soft);
  border-radius: 10px;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(9px);
  -webkit-backdrop-filter: blur(9px);
  pointer-events: auto;
}
.arw-days[hidden] { display: none; }

/* --- operations bar --- */
.arw-ops-bar { position: relative; display: flex; align-items: center; gap: 8px; }

.arw-ops-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 62%;
  min-width: 0;
  height: 24px;
  padding: 0 8px;
  color: #dcebff;
  background: rgba(120, 184, 255, 0.1);
  border: 1px solid var(--edge-soft);
  border-radius: 6px;
  font: inherit;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.03em;
  cursor: pointer;
}
.arw-ops-chip:hover { background: rgba(61, 139, 255, 0.2); border-color: var(--edge); }
.arw-ops-chip > i {
  width: 7px; height: 7px; flex: none;
  border-radius: 50%;
  background: var(--arw-accent, #ff7a68);
  box-shadow: 0 0 7px var(--arw-accent, #ff7a68);
}
.arw-ops-chip.is-all > i { background: var(--muted); box-shadow: none; }
.arw-ops-chip > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.arw-ops-chip > em { font-style: normal; color: var(--muted); font-size: 9px; }

.arw-clear { height: 22px; padding: 0 9px; font-size: 9.5px; flex: none; }

.arw-ops-count {
  flex: 1;
  min-width: 0;
  font-size: 10px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.arw-days-close {
  width: 22px; height: 22px; flex: none;
  display: flex; align-items: center; justify-content: center;
  color: var(--muted);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 5px;
  font: inherit; font-size: 15px; line-height: 1;
  cursor: pointer;
}
.arw-days-close:hover { color: #e7a59b; border-color: rgba(217, 101, 90, 0.5); background: rgba(217, 101, 90, 0.12); }

/* --- operations menu --- */
.arw-ops-menu {
  position: absolute;
  left: 0;
  bottom: calc(100% + 8px);
  z-index: 2;
  width: 262px;
  max-height: 46vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 8px;
  background: var(--glass-strong);
  border: 1px solid var(--edge-soft);
  border-radius: 9px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.arw-ops-menu[hidden] { display: none; }
.arw-ops-title {
  font-size: 9px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--muted); padding: 1px 2px 5px;
}
.arw-ops-row { display: flex; align-items: stretch; gap: 3px; border-radius: 6px; }
.arw-ops-row.is-on { background: rgba(61, 139, 255, 0.16); }
.arw-ops-pick {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  padding: 5px 7px;
  color: var(--text);
  background: transparent;
  border: none;
  border-radius: 6px;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.arw-ops-pick:hover { background: rgba(120, 184, 255, 0.12); }
.arw-ops-pick > b { font-size: 11.5px; font-weight: 650; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.arw-ops-pick > small { font-size: 9.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.arw-ops-all { border: 1px solid var(--edge-soft); margin-bottom: 4px; }
.arw-ops-all.is-on, .arw-ops-row.is-on .arw-ops-pick { color: var(--ink); }

.arw-ops-edit, .arw-ops-del {
  width: 22px; flex: none;
  color: var(--muted);
  background: transparent;
  border: none;
  border-radius: 5px;
  font: inherit; font-size: 12px;
  cursor: pointer;
}
.arw-ops-edit:hover { color: var(--ink); background: rgba(120, 184, 255, 0.18); }
.arw-ops-del:hover { color: #e7a59b; background: rgba(217, 101, 90, 0.18); }

.arw-ops-rename {
  width: 100%;
  height: 20px;
  padding: 0 4px;
  color: var(--ink);
  background: rgba(8, 14, 23, 0.8);
  border: 1px solid var(--blue-400);
  border-radius: 4px;
  font: inherit;
  font-size: 11.5px;
}
.arw-ops-empty { padding: 6px 4px; font-size: 10.5px; color: var(--muted); }
.arw-ops-new {
  margin-top: 4px;
  padding: 6px;
  color: var(--accent);
  background: rgba(61, 139, 255, 0.1);
  border: 1px dashed var(--edge-soft);
  border-radius: 6px;
  font: inherit; font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.04em; text-transform: uppercase;
  cursor: pointer;
}
.arw-ops-new:hover { background: rgba(61, 139, 255, 0.2); border-color: var(--edge); }

.arw-days-head { display: flex; align-items: center; gap: 8px; }
.arw-days-title { flex: 1; display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.arw-days-title > b {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: var(--text);
  white-space: nowrap;
}
.arw-days-title > span {
  font-size: 10.5px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.arw-step {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #b7c7da;
  background: rgba(14, 22, 34, 0.5);
  border: 1px solid var(--edge-soft);
  border-radius: 6px;
  font: inherit;
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
}
.arw-step:hover { color: var(--ink); background: rgba(61, 139, 255, 0.2); border-color: var(--edge); }

/* The strip itself: one column per day, height = how many arrows were drawn. */
.arw-track {
  position: relative;
  height: 44px;
  border-radius: 6px;
  background: linear-gradient(180deg, rgba(8, 14, 23, 0.5), rgba(8, 14, 23, 0.18));
  border: 1px solid rgba(120, 184, 255, 0.12);
  cursor: ew-resize;
  touch-action: none;
  outline: none;
}
.arw-track:focus-visible { box-shadow: 0 0 0 1px var(--blue-500), var(--glow); }

.arw-track-bars {
  position: absolute;
  inset: 3px 2px 3px 2px;
  display: flex;
  align-items: flex-end;
  gap: 1px;
}

.arw-bar {
  position: relative;
  flex: 1 1 0;
  height: 100%;
  min-width: 0;
  padding: 0;
  background: none;
  border: none;
  border-radius: 2px;
  cursor: pointer;
  display: flex;
  align-items: flex-end;
}
.arw-bar > i {
  display: block;
  width: 100%;
  height: max(3px, var(--h, 0%));
  border-radius: 2px 2px 1px 1px;
  background: rgba(120, 184, 255, 0.26);
  transition: background 0.12s ease, height 0.12s ease;
}
.arw-bar.is-empty > i { height: 3px; background: rgba(120, 184, 255, 0.1); }
.arw-bar.is-weekend { background: rgba(120, 184, 255, 0.04); }
.arw-bar:hover > i { background: rgba(120, 184, 255, 0.5); }
.arw-bar.is-trail > i { background: color-mix(in srgb, var(--arw-accent, #ff7a68) 45%, rgba(120, 184, 255, 0.3)); }
.arw-bar.is-cur > i {
  background: var(--arw-accent, #ff7a68);
  box-shadow: 0 0 8px color-mix(in srgb, var(--arw-accent, #ff7a68) 65%, transparent);
}

.arw-track-cursor {
  position: absolute;
  top: -2px;
  bottom: -2px;
  width: 0;
  border-left: 1px solid color-mix(in srgb, var(--arw-accent, #ff7a68) 80%, transparent);
  pointer-events: none;
}
.arw-track-cursor::before {
  content: '';
  position: absolute;
  top: -1px;
  left: -3px;
  width: 6px;
  height: 6px;
  border-radius: 1px;
  background: var(--arw-accent, #ff7a68);
  transform: rotate(45deg);
}
.arw-track-cursor[hidden] { display: none; }

.arw-days-foot { display: flex; align-items: center; gap: 6px; }
.arw-days-foot .cmd-btn { height: 24px; padding: 0 9px; font-size: 10px; }
.arw-days-foot [data-act="play"] { width: 30px; padding: 0; }
.arw-trail {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-left: auto;
  font-size: 10px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.arw-trail input[type="range"] { width: 62px; accent-color: var(--accent); }
.arw-trail > b { min-width: 12px; text-align: right; color: #dcebff; font-variant-numeric: tabular-nums; }

@media (max-width: 920px) {
  .arw-days { left: 50% !important; bottom: 118px; width: calc(100vw - 24px); }
  .arw-panel { width: min(268px, calc(100vw - 40px)); }
}

@media (prefers-reduced-motion: reduce) {
  .arw-bar > i { transition: none; }
}