/* MOVE — instrument-panel design system.
   Layout concept: a mixing console for your move. Dark graphite chassis, recessed panels,
   amber LED readouts for money, segmented meters for savings channels, a track-overview
   strip for move progress. Committed single dark look by design. */
:root {
  /* MOVE "toy console": a glossy, tactile control deck in candy colors.
     Lilac + hot pink + electric violet on a soft lavender ground, deep-plum LCD screens,
     pill buttons with a pressable lip, dotted and grained surfaces. */
  --bg: #f6f1ff;
  --chassis: #ece2ff;
  --panel: #ffffff;
  --panel-2: #fdfbff;
  --inset: #f7f2ff;
  --off: #e6dcfa;
  --line: #dccff5;
  --line-hi: #bba6ea;
  --fg: #1f1038;
  --fg-2: #4b3b6b;
  --dim: #7c6c99;
  --lcd: #2a1258;
  --lcd-fg: #ffffff;
  --amber: #ff2d95;
  --amber-hi: #ff5fb0;
  --amber-lo: #ffc4e2;
  --amber-glow: rgba(255, 45, 149, 0.35);
  --accent-text: #e0137c;
  --cyan: #7a4dff;
  --cyan-lo: #dccfff;
  --green: #10b36a;
  --green-lo: #c9f2dd;
  --red: #ff4b55;
  --red-lo: #ffd3d6;
  --lilac: #9270ce;
  --sun: #ffc93c;

  --f-display: "Nunito", "Arial Rounded MT Bold", "Helvetica Rounded", "Helvetica Neue", Arial, sans-serif;
  --f-ui: "Nunito", "Arial Rounded MT Bold", "Helvetica Neue", Arial, sans-serif;
  --f-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  --r: 18px;
  --r-sm: 12px;
  --bevel: inset 0 1px 0 #fff, inset 0 -2px 0 rgba(122,77,255,.08), 0 1px 0 rgba(60,20,120,.06), 0 10px 24px -12px rgba(70,30,140,.28);
  --well: inset 0 2px 5px rgba(60,20,120,.16), inset 0 0 0 1px rgba(122,77,255,.12);
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .3  0 0 0 0 .15  0 0 0 0 .55  0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");

  color-scheme: light;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--f-ui);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
img { max-width: 100%; }
[hidden] { display: none !important; }
button, input, select { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }

h1, h2, h3 { font-family: var(--f-display); text-wrap: balance; margin: 0; line-height: 1.05; }
p { margin: 0; }

/* ---------- primitives ---------- */
.wordmark {
  font-family: var(--f-display);
  font-weight: 900;
  font-stretch: 125%;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  line-height: 1;
}
.label {
  font-family: var(--f-ui);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--dim);
}
.mono { font-family: var(--f-mono); font-variant-numeric: tabular-nums; }
.num { font-variant-numeric: tabular-nums; }

.led {
  display: inline-block;
  width: fit-content;
  padding: .06em .28em .1em;
  border-radius: 2px;
  background: var(--lcd);
  box-shadow: inset 0 1px 3px rgba(0,0,0,.5);
  font-family: var(--f-mono);
  font-weight: 500;
  color: var(--lcd-fg);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  line-height: 1;
}

.panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--bevel);
}
.well {
  background: var(--inset);
  border-radius: var(--r-sm);
  box-shadow: var(--well);
}
.panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
}
.panel-body { padding: 14px; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 20px;
  border-radius: var(--r-sm);
  border: 1px solid var(--line-hi);
  background: linear-gradient(var(--panel-2), var(--panel));
  box-shadow: var(--bevel);
  font-family: var(--f-ui);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: transform 80ms ease, border-color 120ms ease, background 120ms ease;
}
.btn:hover { border-color: var(--dim); }
.btn:active { transform: translateY(1px); }
.btn-amber {
  background: var(--amber);
  border-color: var(--amber-hi);
  color: #1a1206;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 1px 0 rgba(0,0,0,.2);
}
.btn-amber:hover { background: var(--amber-hi); border-color: var(--amber-hi); }
.btn-sm { min-height: 34px; padding: 0 12px; font-size: 12px; }

.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 8px;
  border-radius: 2px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
  border: 1px solid currentColor;
}
.chip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.chip.confirmed { color: var(--green); }
.chip.projected { color: #b4600a; }
.chip.potential { color: var(--cyan); }
.chip.avoided { color: var(--fg-2); }
.chip.time { color: var(--cyan); }
.chip.risk { color: var(--red); }
.chip.plain::before { display: none; }

/* segmented meter — horizontal */
.meter {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 2px;
  height: 10px;
}
.meter i {
  display: block;
  border-radius: 1px;
  background: var(--off);
}
.meter i.on { background: var(--cyan); }
.meter i.on.g { background: var(--green); }
.meter i.on.c { background: var(--amber); }

/* track overview (move progress) */
.track {
  position: relative;
  height: 56px;
  display: flex;
  align-items: center;
  gap: 1px;
  padding: 0 2px;
  overflow: hidden;
}
.track b {
  flex: 1;
  min-width: 1px;
  background: #4d6f86;
  border-radius: 1px;
}
.track b.played { background: #e9f3fa; }
.track .playhead {
  position: absolute;
  top: 0; bottom: 0;
  width: 2px;
  background: var(--red);
}
.cues { position: relative; height: 18px; }
.cue {
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--dim);
  white-space: nowrap;
}
.cue::before {
  content: "";
  display: block;
  width: 0; height: 0;
  margin: 0 auto 2px;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-bottom: 5px solid var(--dim);
}
.cue.done { color: var(--cyan); }
.cue.done::before { border-bottom-color: var(--cyan); }

/* knob-like score dial */
.dial {
  color: var(--fg);
  --v: 90;
  width: 54px; height: 54px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 45%, #eef2f4 0 52%, transparent 53%),
    conic-gradient(from 225deg, var(--cyan) calc(var(--v) * 2.7deg), #a9b6bd 0 270deg, transparent 0);
  display: grid;
  place-items: center;
  font-family: var(--f-mono);
  font-weight: 600;
  font-size: 15px;
  flex: none;
}
.dial.low { background:
    radial-gradient(circle at 50% 45%, #eef2f4 0 52%, transparent 53%),
    conic-gradient(from 225deg, var(--red) calc(var(--v) * 2.7deg), #a9b6bd 0 270deg, transparent 0); }
.dial.mid { background:
    radial-gradient(circle at 50% 45%, #eef2f4 0 52%, transparent 53%),
    conic-gradient(from 225deg, var(--fg-2) calc(var(--v) * 2.7deg), #a9b6bd 0 270deg, transparent 0); }

/* tables */
.tbl-wrap { overflow-x: auto; }
table.tbl { width: 100%; border-collapse: collapse; font-size: 14px; }
.tbl th, .tbl td { padding: 8px 10px; text-align: right; border-bottom: 1px solid var(--line); white-space: nowrap; }
.tbl th:first-child, .tbl td:first-child { text-align: left; }
.tbl thead th { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--dim); font-weight: 600; }
.tbl td { font-family: var(--f-mono); font-variant-numeric: tabular-nums; }
.tbl td:first-child { font-family: var(--f-ui); color: var(--fg-2); }
.tbl .add { color: var(--red); }
.tbl .inc { color: var(--dim); }
.tbl tfoot td { border-bottom: 0; font-weight: 600; color: var(--fg); }
.tbl .pick { background: rgba(28,116,184,.08); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ---------- animated logo: the word zooms off, leaving its cloud and speed lines ---------- */
.logo { position: relative; display: inline-flex; text-decoration: none; }
.logo-stack { position: relative; display: block; overflow: hidden; padding: 4px 2px; margin: -4px -2px; }
.logo-stack img { display: block; height: 100%; width: auto; }
.logo-stack .lw { position: absolute; inset: 4px 2px; height: calc(100% - 8px); }
.logo-stack .lp, .logo-stack .lw { transform-origin: 30% 60%; }
.logo.go .lw { animation: logo-word 2.4s cubic-bezier(.3,.7,.2,1) both; }
.logo.go .lp { animation: logo-puff 2.4s ease-out both; }
@keyframes logo-word {
  0% { transform: none; filter: none; opacity: 1; }
  10% { transform: translateX(-5%) scaleX(1.06) skewX(6deg); }
  22% { transform: translateX(115%) skewX(-24deg) scaleX(1.3); filter: blur(5px); opacity: 0; }
  58% { transform: translateX(-115%) skewX(-24deg) scaleX(1.3); filter: blur(5px); opacity: 0; }
  74% { transform: translateX(5%) skewX(12deg) scaleX(.96); filter: blur(1px); opacity: 1; }
  86% { transform: translateX(-2%) skewX(-4deg); filter: none; }
  100% { transform: none; }
}
@keyframes logo-puff {
  0%, 18% { transform: none; opacity: 1; }
  30% { transform: translateX(-3%) scale(1.06); opacity: 1; }
  48% { transform: translateX(-8%) scale(1.25); opacity: 0; filter: blur(2px); }
  70% { transform: translateX(-20%) scale(.9); opacity: 0; filter: none; }
  84% { transform: translateX(2%) scale(1.04); opacity: 1; }
  100% { transform: none; opacity: 1; }
}


/* =================== toy-console skin =================== */
body {
  background-color: var(--bg);
  background-image: var(--grain), radial-gradient(rgba(122,77,255,.13) 1.2px, transparent 1.3px);
  background-size: 160px 160px, 22px 22px;
}
.label { font-weight: 800; letter-spacing: .12em; color: var(--dim); }
.panel {
  background: var(--grain), linear-gradient(180deg, #fff, var(--panel-2));
  border: 1.5px solid var(--line);
}
.well { background: var(--inset); }

/* LCD: glossy plum screen with scanlines */
.led {
  border-radius: 8px;
  padding: .1em .38em .14em;
  background:
    linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,0) 48%),
    repeating-linear-gradient(0deg, rgba(255,255,255,.05) 0 1px, transparent 1px 3px),
    var(--lcd);
  box-shadow: inset 0 2px 6px rgba(0,0,0,.55), 0 0 0 2px #fff, 0 0 0 3.5px var(--line-hi);
  text-shadow: 0 0 10px rgba(255,140,220,.45);
}

/* pill buttons with a pressable lip */
.btn {
  border-radius: 999px;
  border: 0;
  font-weight: 900;
  letter-spacing: .06em;
  color: var(--fg);
  background: linear-gradient(180deg, #fff 0%, #f1eaff 100%);
  box-shadow: inset 0 1px 0 #fff, inset 0 -3px 0 rgba(122,77,255,.12), 0 4px 0 #cdbbf3, 0 10px 18px -8px rgba(70,30,140,.4);
  transform: translateY(0);
  transition: transform 90ms ease, box-shadow 90ms ease, filter 120ms ease;
}
.btn:hover { filter: brightness(1.03); transform: translateY(-1px); box-shadow: inset 0 1px 0 #fff, inset 0 -3px 0 rgba(122,77,255,.12), 0 5px 0 #cdbbf3, 0 14px 22px -8px rgba(70,30,140,.45); }
.btn:active { transform: translateY(4px); box-shadow: inset 0 1px 0 #fff, 0 0 0 #cdbbf3, 0 4px 8px -4px rgba(70,30,140,.4); }
.btn-amber {
  color: #fff;
  text-shadow: 0 1px 0 rgba(150,0,70,.4);
  background: linear-gradient(180deg, #ff6cbb 0%, var(--amber) 55%, #ea137f 100%);
  box-shadow: inset 0 2px 0 rgba(255,255,255,.45), inset 0 -3px 0 rgba(120,0,60,.25), 0 4px 0 #b80a63, 0 12px 22px -8px rgba(255,45,149,.6);
}
.btn-amber:hover { background: linear-gradient(180deg, #ff83c6 0%, #ff3d9e 55%, #f01a86 100%); box-shadow: inset 0 2px 0 rgba(255,255,255,.45), inset 0 -3px 0 rgba(120,0,60,.25), 0 5px 0 #b80a63, 0 16px 26px -8px rgba(255,45,149,.65); }
.btn-amber:active { box-shadow: inset 0 2px 0 rgba(255,255,255,.35), 0 0 0 #b80a63, 0 4px 10px -4px rgba(255,45,149,.6); }

.chip { border-radius: 999px; padding: 3px 10px; font-weight: 800; border-width: 1.5px; background: rgba(255,255,255,.7); }
.chip.projected { color: var(--accent-text); }

/* meters become candy LEDs */
.meter { gap: 3px; height: 12px; }
.meter i { border-radius: 4px; background: var(--off); box-shadow: inset 0 1px 1px rgba(60,20,120,.15); }
.meter i.on { background: linear-gradient(180deg, #a98bff, var(--cyan)); box-shadow: 0 0 6px rgba(122,77,255,.45), inset 0 1px 0 rgba(255,255,255,.5); }
.meter i.on.g { background: linear-gradient(180deg, #45e19a, var(--green)); box-shadow: 0 0 6px rgba(16,179,106,.4), inset 0 1px 0 rgba(255,255,255,.5); }
.meter i.on.c { background: linear-gradient(180deg, #ff7cc2, var(--amber)); box-shadow: 0 0 6px var(--amber-glow), inset 0 1px 0 rgba(255,255,255,.5); }

.track b { background: #6b4fb3; border-radius: 2px; }
.track b.played { background: linear-gradient(180deg, #ffd1ec, #ff7cc2); }
.track .playhead { background: var(--sun); width: 3px; box-shadow: 0 0 10px var(--sun); }
.cue.done { color: var(--cyan); }
.cue.done::before { border-bottom-color: var(--cyan); }

/* chunky metallic knobs */
.dial {
  background:
    radial-gradient(circle at 40% 35%, #fff 0 18%, #efe8ff 42%, #d9ccf7 52%, transparent 53%),
    conic-gradient(from 225deg, var(--amber) calc(var(--v) * 2.7deg), var(--off) 0 270deg, transparent 0);
  box-shadow: 0 3px 0 #cdbbf3, 0 8px 14px -6px rgba(70,30,140,.4);
  color: var(--fg); font-weight: 700;
}
.dial.mid { background: radial-gradient(circle at 40% 35%, #fff 0 18%, #efe8ff 42%, #d9ccf7 52%, transparent 53%), conic-gradient(from 225deg, var(--cyan) calc(var(--v) * 2.7deg), var(--off) 0 270deg, transparent 0); }
.dial.low { background: radial-gradient(circle at 40% 35%, #fff 0 18%, #efe8ff 42%, #d9ccf7 52%, transparent 53%), conic-gradient(from 225deg, var(--red) calc(var(--v) * 2.7deg), var(--off) 0 270deg, transparent 0); }

.tbl .pick { background: rgba(255,45,149,.06); }