/* ==========================================================================
   css/motion.css — owned by the motion agent (CONTRACTS.md §2).

   Roots: .hw-scrub (Full data "Timeline" tile, #motion-bar) and .hw-goes
   (Full data "GOES-18" tile + loop-player dialog, #imagery-panel), plus
   overrides for the player's existing .hw-imagery__* rules in app.css.

   Colour from tokens only. The shell's new tile tokens (--tile, --tile-2,
   --tile-track, --r-inner, --fs-*) are read with a fallback to the older
   token they alias, so this file renders correctly whichever lands first.
   Size and type come from the density tokens, so Comfy / Compact is free.
   ========================================================================== */

/* ---- Timeline tile ------------------------------------------------------- */

/* The tile head carries the controls row (screen 3b has no visible title and
   no status dot on this tile — it is a control, not a status). The <h2>
   stays for the heading outline, visually hidden. */
.hw-scrub > .hw-tile__head > .hw-tile__dot { display: none; }
.hw-scrub:not(.hw-scrub--calm) > .hw-tile__head > .hw-tile__title {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.hw-scrub--calm > .hw-tile__body { display: none; }

.hw-scrub__controls {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--s-2, 8px) var(--s-3, 12px);
  flex: 1 1 auto;
  min-width: 0;
}

.hw-scrub__play {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  padding: 6px 14px;
  border: 0;
  border-radius: var(--r-pill, 999px);
  background: var(--text);
  color: var(--tile, var(--surface));
  font-family: var(--font-display, var(--font-ui));
  font-size: var(--fs-meta, 12px);
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
}
.hw-scrub__play:hover { background: var(--text-dim); }
.hw-scrub__glyph { font-size: 0.85em; }

.hw-scrub__readout {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  flex: 1 1 16rem;
  min-width: 0;
  margin: 0;
  font-family: var(--font-display, var(--font-ui));
  font-size: var(--fs-meta, 12px);
  font-weight: 700;
  line-height: 1.4;
  color: var(--text-faint);
}
.hw-scrub__sep { margin-inline: 0.4em; }
.hw-scrub__time { color: var(--text); font-variant-numeric: tabular-nums; }
.hw-scrub__span { font-variant-numeric: tabular-nums; }

/* Reads as part of the sentence ("1× · Mon 16:02 …") but is a real button:
   it cycles the global speed. 24 px minimum even with a fine pointer. */
.hw-scrub__speed {
  min-width: 28px;
  min-height: 24px;
  margin-inline-start: -4px;
  padding: 2px 4px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--text-dim);
  font: inherit;
  font-variant-numeric: tabular-nums;
  text-decoration: underline dotted;
  text-underline-offset: 3px;
  cursor: pointer;
}
.hw-scrub__speed:hover { background: var(--tile-2, var(--surface-2)); color: var(--text); }

.hw-scrub__nowbtn,
.hw-scrub__motion {
  min-height: 28px;
  padding: 4px 10px;
  border: 0;
  border-radius: var(--r-pill, 999px);
  background: var(--tile-2, var(--surface-2));
  color: var(--text-faint);
  font-family: var(--font-display, var(--font-ui));
  font-size: var(--fs-meta, 12px);
  font-weight: 700;
  line-height: 1.2;
  cursor: pointer;
}
.hw-scrub__nowbtn:hover,
.hw-scrub__motion:hover { color: var(--text); }
.hw-scrub__motion { margin-inline-start: auto; }
/* Motion off is a deliberate "holding still" state: say it in words and
   give it an edge, not just a colour. */
.hw-scrub__motion[aria-checked="false"] {
  color: var(--text);
  box-shadow: inset 0 0 0 1px var(--border-control);
}

.hw-scrub__play:focus-visible,
.hw-scrub__speed:focus-visible,
.hw-scrub__nowbtn:focus-visible,
.hw-scrub__motion:focus-visible,
.hw-scrub__track:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* The slider. The hit area is the whole track (28 px, 44 px on touch); the
   visible rail is the 10 px pill inside it. */
.hw-scrub__track {
  position: relative;
  height: 28px;
  margin-block-start: var(--s-1, 4px);
  cursor: pointer;
  touch-action: none;
  border-radius: var(--r-inner, 12px);
}
.hw-scrub__rail {
  position: absolute;
  inset-inline: 0;
  top: 50%;
  height: 10px;
  margin-top: -5px;
  border-radius: var(--r-pill, 999px);
  background: var(--tile-2, var(--surface-2));
  overflow: hidden;
}
.hw-scrub__observed,
.hw-scrub__forecast { position: absolute; inset-block: 0; }
.hw-scrub__observed {
  left: 0;
  background: color-mix(in srgb, var(--text-faint) 38%, var(--tile-2, var(--surface-2)));
}
/* Forecast ahead of NOW is hatched: it is a projection, not a record. */
.hw-scrub__forecast {
  background: repeating-linear-gradient(135deg,
    color-mix(in srgb, var(--accent) 20%, transparent) 0 5px,
    transparent 5px 10px);
}
.hw-scrub__nowmark,
.hw-scrub__tick {
  position: absolute;
  top: 50%;
  width: 3px;
  height: 18px;
  margin: -9px 0 0 -1.5px;
  border-radius: 2px;
  pointer-events: none;
}
.hw-scrub__nowmark { background: var(--accent); }
.hw-scrub__tick { background: var(--sev-severe); }
.hw-scrub__tick[hidden] { display: none; }

.hw-scrub__handle {
  position: absolute;
  top: 50%;
  width: 22px;
  height: 22px;
  margin: -11px 0 0 -11px;
  box-sizing: border-box;
  border-radius: 50%;
  background: var(--tile, var(--surface));
  border: 4px solid var(--text);
  box-shadow: var(--shadow-1);
  pointer-events: none;
  transition: transform var(--dur-1, 120ms) var(--ease-out, ease-out);
}
.hw-scrub__track:hover .hw-scrub__handle,
.hw-scrub__track.is-dragging .hw-scrub__handle { transform: scale(1.12); }

/* Day labels, NOW and the island tick: placed in px by motion.js at their
   real instants (collisions resolved there). */
.hw-scrub__labels {
  position: relative;
  height: 1.5em;
  font-family: var(--font-mono);
  font-size: var(--fs-micro, 10px);
  font-weight: 700;
  color: var(--text-faint);
  font-variant-numeric: tabular-nums;
}
.hw-scrub__label {
  position: absolute;
  top: 0;
  line-height: 1.5;
  white-space: nowrap;
}
.hw-scrub__label--now { color: var(--text); }
.hw-scrub__label--tick { color: var(--sev-severe); }

.hw-scrub__stats {
  margin: var(--s-1, 4px) 0 0;
  font-family: var(--font-mono);
  font-size: var(--fs-mono, 11.5px);
  font-weight: 500;
  line-height: 1.4;
  color: var(--text-dim);
  font-variant-numeric: tabular-nums;
}

/* ---- GOES-18 tile -------------------------------------------------------- */

.hw-goes { min-width: 0; }

.hw-goes__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}
.hw-goes__thumb {
  position: relative;
  display: block;
  aspect-ratio: 16 / 10;
  min-height: 38px;
  padding: 0;
  border: 0;
  border-radius: var(--r-inner, 12px);
  overflow: hidden;
  cursor: pointer;
  /* The design's hatched well: what shows while a frame loads or if it fails. */
  background: repeating-linear-gradient(135deg,
    var(--tile-track, var(--surface-3)) 0 8px,
    var(--tile-2, var(--surface-2)) 8px 16px);
}
.hw-goes__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity var(--dur-1, 120ms) var(--ease-out, ease-out);
}
.hw-goes__thumb:hover .hw-goes__img { opacity: 0.85; }
.hw-goes__thumb[data-failed] .hw-goes__img { display: none; }
.hw-goes__thumb:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* The label sits on imagery, so it uses the overlay pair that app.css
   guarantees legible over any photograph, in both themes. */
.hw-goes__label {
  position: absolute;
  left: 6px;
  bottom: 5px;
  padding: 1px 6px;
  border-radius: 6px;
  background: var(--overlay-scrim);
  color: var(--overlay-ink);
  font-family: var(--font-mono);
  font-size: var(--fs-micro, 10px);
  font-weight: 700;
  line-height: 1.5;
}
.hw-goes__meta {
  margin: var(--s-2, 8px) 0 0;
  font-family: var(--font-mono);
  font-size: var(--fs-micro, 10px);
  color: var(--text-faint);
}
.hw-goes__empty {
  margin: 0;
  font-size: var(--fs-body, 14px);
  color: var(--text-dim);
}

/* ---- Loop player dialog -------------------------------------------------- */

.hw-goes__dialog {
  /* The canvas is square, so the dialog is sized by whichever of width or
     height runs out first — never taller than the viewport. */
  width: min(680px, calc(100vw - 32px), calc(100dvh - 230px));
  min-width: min(320px, calc(100vw - 32px));
  max-height: calc(100dvh - 32px);
  padding: 0;
  border: 0;
  border-radius: var(--r-tile, 20px);
  background: var(--tile, var(--surface));
  color: var(--text);
  box-shadow: var(--shadow-3);
  overflow: auto;
}
.hw-goes__dialog::backdrop {
  background: color-mix(in srgb, var(--frame, var(--bg)) 78%, transparent);
}
.hw-goes__panel {
  display: flex;
  flex-direction: column;
  gap: var(--s-3, 12px);
  padding: var(--tile-pad, 16px);
}
.hw-goes__dhead { display: flex; align-items: center; gap: var(--s-2, 8px); }
.hw-goes__dtitle {
  flex: 1 1 auto;
  margin: 0;
  font-family: var(--font-display, var(--font-ui));
  font-size: var(--fs-title, 15px);
  font-weight: 700;
}
.hw-goes__close {
  display: inline-grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 50%;
  background: var(--tile-2, var(--surface-2));
  color: var(--text);
  font-size: 15px;
  cursor: pointer;
}
.hw-goes__close:hover { background: var(--tile-track, var(--surface-3)); }
.hw-goes__close:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* The player's own rules live in app.css (section 16) and one of them is
   scoped through #imagery-panel, so these carry the id to win. */
#imagery-panel .hw-goes__dialog .hw-imagery { height: auto; gap: var(--s-3, 12px); }
#imagery-panel .hw-goes__dialog .hw-imagery__stage {
  flex: none;
  min-height: 0;
  aspect-ratio: 1;
  border: 0;
  border-radius: var(--r-inner, 12px);
  background: var(--surface-sunken);
}
#imagery-panel .hw-goes__dialog .hw-imagery__band,
#imagery-panel .hw-goes__dialog .hw-imagery__btn {
  min-height: 32px;
  padding: 4px 12px;
  border: 0;
  border-radius: var(--r-pill, 999px);
  background: var(--tile-2, var(--surface-2));
  color: var(--text-dim);
  font-family: var(--font-mono);
  font-size: var(--fs-micro, 11px);
  font-weight: 700;
}
#imagery-panel .hw-goes__dialog .hw-imagery__band:hover,
#imagery-panel .hw-goes__dialog .hw-imagery__btn:hover { color: var(--text); background: var(--tile-track, var(--surface-3)); }
#imagery-panel .hw-goes__dialog .hw-imagery__band[aria-pressed="true"],
#imagery-panel .hw-goes__dialog .hw-imagery__btn[aria-pressed="true"],
#imagery-panel .hw-goes__dialog .hw-imagery__btn--play {
  background: var(--accent);
  color: var(--text-on-accent);
}
#imagery-panel .hw-goes__dialog .hw-imagery__band[hidden] { display: none; }
#imagery-panel .hw-goes__dialog .hw-imagery__btn:disabled { opacity: 0.55; cursor: default; }
#imagery-panel .hw-goes__dialog .hw-imagery__band:focus-visible,
#imagery-panel .hw-goes__dialog .hw-imagery__btn:focus-visible,
#imagery-panel .hw-goes__dialog .hw-imagery__scrub:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
#imagery-panel .hw-goes__dialog .hw-imagery__meta { font-size: var(--fs-micro, 10px); }

/* ---- Phone: controls on one row, readout on its own row beneath (3d) ----- */

@media (max-width: 600px) {
  .hw-scrub__readout { order: 5; flex-basis: 100%; }
}

/* ---- Touch: 44 px targets ------------------------------------------------ */

@media (pointer: coarse) {
  .hw-scrub__play,
  .hw-scrub__speed,
  .hw-scrub__nowbtn,
  .hw-scrub__motion,
  .hw-goes__close { min-height: 44px; min-width: 44px; }
  .hw-scrub__track { height: 44px; }
  .hw-goes__thumb { min-height: 44px; }
  #imagery-panel .hw-goes__dialog .hw-imagery__band,
  #imagery-panel .hw-goes__dialog .hw-imagery__btn { min-height: 44px; min-width: 44px; }
  #imagery-panel .hw-goes__dialog .hw-imagery__scrub { height: 44px; }
}

/* ---- Motion gate --------------------------------------------------------- */

:root[data-motion="off"] .hw-scrub__handle,
:root[data-motion="off"] .hw-goes__img { transition: none; }
@media (prefers-reduced-motion: reduce) {
  .hw-scrub__handle,
  .hw-goes__img { transition: none; }
}