/* public/src/css/tracker.css
   THE LIVE SKY TRACKER, on the front page. Built to the operator's mockup.

   Materials (CLAUDE.md rule 3):
     Reported    the dome and everything plotted on it, the callouts, the
                 state line under the dome, the LIVE/SIMULATED badge
     Furniture   the card, its header, the segmented control, the SHOW:
                 checkboxes and the TIME ACCELERATION buttons
     Marginalia  .tk-note - "*We can't confirm or deny." - handwriting, and
                 last in its own row

   Every colour is a token. The three things on this card that are NOT
   gated, and why:

     .tk-sky      --void inside a --panel card: 1.16, the same 1.16 a card
                  already has against the page. The dome reads as a hole cut
                  in the card because of its rim, not its fill - identical
                  reasoning to cards.css's own note.
     .tk-ground   --panel-lift land against a --void sky, 1.35. It is a
                  decorative silhouette carrying no information, so it takes
                  the same exemption --edge does; what makes the treeline
                  read at all is the --ink-dim outline on it.
     .tk-star     decoration. Not a star catalogue, and nothing claims it is.

   Everything that carries a reading IS gated: the four class colours as
   blips on --void and as callout borders and names on --panel, --ink-dim
   for the stats and the cardinals, --signal and --amber for the badge and
   the accelerated state. See test/contrast.js.

   Loaded last on the front page, so where a rule here and a rule in
   sections.css have equal specificity, this one wins. Sky Watch's own
   #scope rules are untouched: this sheet is not linked on that page. */

/* -- the row: tracker on the left, the passes card's slot on the right --
   The slot is deliberately empty markup. Reserving the column now means
   the tracker is laid out at its final width today rather than being
   re-flowed when the passes card lands in it. */
.trackerrow{display:grid;gap:1.5rem;margin:0}
.trackerrow > .card{margin-top:0}
.passes-slot{min-width:0}

@media (min-width:56rem){
  .trackerrow{grid-template-columns:minmax(0,2fr) minmax(0,1fr);align-items:start}
}

/* -- header row -------------------------------------------------------- */

.tk-hd{
  display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;
  gap:.75rem 1rem;
  border-bottom:1px solid var(--edge);padding-bottom:.75rem;margin:0 0 .9rem;
}
.tk-hd-l{flex:1 1 15rem;min-width:0}
.tk-hd-r{display:flex;align-items:center;gap:.5rem;flex:0 0 auto}

.tk-title{
  display:flex;align-items:center;gap:.55rem;flex-wrap:wrap;margin:0;
  font-family:var(--f-data);font-size:var(--step-1);line-height:1.2;
  letter-spacing:.06em;text-transform:uppercase;color:var(--signal);
}
.tk-title .hd-icon{width:1.35rem;height:1.35rem;flex:0 0 auto}
.tk-sub{margin:.4rem 0 0;color:var(--ink-dim);font-size:var(--step--1);line-height:1.5}

/* Reported material's badge: LIVE while the dome shows now, SIMULATED the
   instant TIME ACCELERATION is running - because then it is not now. The
   word itself comes from voice.js via tracker.js, never a content: value
   (see cards.css's note and test/theme.test.js). */
.tk-badge{
  font-size:var(--step--1);letter-spacing:.1em;white-space:nowrap;
  color:var(--signal);border:1px solid var(--signal);border-radius:999px;
  padding:.05rem .45rem;
}

/* -- the segmented control --------------------------------------------- */

.tk-views{display:flex;border:1px solid var(--edge);border-radius:999px;overflow:hidden}
.tk-view{
  font-family:var(--f-data);font-size:var(--step--1);letter-spacing:.1em;
  text-transform:uppercase;padding:.4rem .85rem;
  background:transparent;color:var(--ink-dim);border:0;cursor:pointer;
}
.tk-view[aria-pressed="true"]{background:var(--signal);color:var(--on-signal)}
/* Both halves are real now. MAP VIEW shipped struck through and disabled for
   one release because there was no map behind the tab; there is one, so the
   strike is gone. The rule stays because a control that CAN be dead here
   again must look dead rather than merely inert. */
.tk-view[disabled]{
  cursor:not-allowed;color:var(--ink-dim);
  text-decoration:line-through;text-decoration-thickness:1px;
}

.tk-info-btn{
  width:1.9rem;height:1.9rem;flex:0 0 auto;
  display:flex;align-items:center;justify-content:center;
  border:1px solid var(--edge-strong);border-radius:50%;
  background:transparent;color:var(--ink-dim);cursor:pointer;
  font-family:var(--f-data);font-size:var(--step--1);
}
.tk-info-btn:hover{color:var(--ink);border-color:var(--ink)}
/* Visually hidden, still read aloud: the (i) glyph is aria-hidden, so the
   button needs a real name beside it. */
.tk-sr{
  position:absolute;width:1px;height:1px;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap;
}

.tk-info{
  border:1px solid var(--edge);border-radius:var(--radius);
  background:var(--void);padding:.8rem .95rem;margin:0 0 .9rem;
}
.tk-info[hidden]{display:none}
.tk-info p{margin:0 0 .55rem;color:var(--ink-dim);font-size:var(--step--1);max-width:var(--measure)}
.tk-info p:last-child{margin-bottom:0}

/* -- the dome ----------------------------------------------------------- */

.tk-domewrap{margin:0 0 1rem}

/* sections.css styles #scope as Sky Watch's 260px instrument: a bordered
   circle with touch-action:none. None of that is right here, and all of it
   is reached by an id selector, so every override below has to carry the id
   too. touch-action:pan-y is not cosmetic - left as none, this circle is a
   dead zone that eats a vertical swipe on the first screen a phone visitor
   lands on (the same fix .frontscope #scope used to carry). */
.tracker #scope{
  display:block;width:100%;max-width:34rem;margin:0 auto;aspect-ratio:1;
  background:none;border:0;border-radius:0;
  cursor:default;touch-action:pan-y;
}

.tk-sky{fill:var(--void)}
.tk-star{fill:var(--ink-dim)}

/* The rim is a state boundary in the accelerated case, so it is drawn in a
   gated colour both ways: --edge-strong at 1x, --amber the moment the dome
   stops showing now. */
.tk-rim{fill:none;stroke:var(--edge-strong);stroke-width:2}
.tracker.tk--accel .tk-rim{stroke:var(--amber)}

/* The cardinals and the two elevation ticks are real text, so they take the
   text floor, not the graphics exemption the rings get. Re-sized from
   sections.css's 28/30px, which were chosen for a 260px scope. */
.tracker #scope .lbl{font-family:var(--f-data);font-size:17px;fill:var(--ink-dim)}
.tracker #scope .tick{font-family:var(--f-data);font-size:12px;fill:var(--ink-dim)}

/* The landscape. Decorative, aria-hidden in the markup, and clipped to the
   dome so it sits behind its lower edge. Land is --panel against a --void
   sky - 1.16, and deliberately so: what makes the treeline read is the
   --ink-dim outline, not the fill. */
.tk-ground{
  fill:var(--panel-lift);
  stroke:var(--ink-dim);stroke-opacity:.45;stroke-width:1.2;stroke-linejoin:round;
}
.tk-lit{fill:var(--amber)}
.tk-kit{fill:none;stroke:var(--ink-dim);stroke-opacity:.6;stroke-width:2.2;stroke-linecap:round}
.tk-tube{fill:none;stroke:var(--ink-dim);stroke-opacity:.6;stroke-width:4;stroke-linecap:round}
.tk-head{fill:var(--panel);stroke:var(--ink-dim);stroke-opacity:.6;stroke-width:1.8}

/* Trails: solid behind, dashed ahead, both in the object's class colour so
   a track is always attached to the dot it belongs to by more than
   proximity. The fade toward the tail is a per-segment stroke-opacity set
   in the markup - a gradient would need its own colour stops, and every
   colour on this site comes from a token. */
.tk-trail{fill:none;stroke-width:2.4;stroke-linecap:round}
.tk-lead{fill:none;stroke-width:1.3;stroke-dasharray:3 4;stroke-opacity:.5}

.tk-trail.pay,.tk-lead.pay{stroke:var(--sky)}
.tk-trail.star,.tk-lead.star{stroke:var(--iris)}
.tk-trail.rkt,.tk-lead.rkt{stroke:var(--amber)}
.tk-trail.deb,.tk-lead.deb{stroke:var(--rose)}

/* Blips. Debris stays a hollow ring rather than a filled dot, exactly as on
   the scope, so class is never carried by colour alone. */
.tk-blip.pay{fill:var(--sky)}
.tk-blip.star{fill:var(--iris)}
.tk-blip.rkt{fill:var(--amber)}
.tk-blip.deb{stroke:var(--rose);stroke-width:1.5}
.tk-blip.deb.big{stroke-width:2.2}

/* Callouts. The box is filled --panel and outlined in the class colour, so
   the name sits on the one ground every class colour has already been
   measured against, and the trails underneath it never show through the
   text. currentColor carries the class down to the border, the leader and
   the name from one place. */
.tk-callout.pay{color:var(--sky)}
.tk-callout.star{color:var(--iris)}
.tk-callout.rkt{color:var(--amber)}
.tk-callout.deb{color:var(--rose)}
.tk-box{fill:var(--panel);stroke:currentColor;stroke-width:1.3}
.tk-leader{stroke:currentColor;stroke-opacity:.75;stroke-width:1.2}
.tk-name{fill:currentColor;font-family:var(--f-data);font-weight:500;letter-spacing:.03em}
.tk-stat{fill:var(--ink-dim);font-family:var(--f-data)}

/* -- MAP VIEW ----------------------------------------------------------- */
/*
   The second half of the segmented control: a world map in an
   equirectangular projection, drawn from committed public-domain coastlines
   and real sub-satellite points. DECISIONS D44-D46, worldmap.js.

   Materials: the sea, the land, the graticule and the frame are Furniture -
   they are the instrument. Everything in #wm-live is Reported: every dot,
   every track, the terminator and the reader's own position are computed
   from real elements at the shown instant.

   THE ONE THING WORTH KNOWING ABOUT THIS SHEET. The night side is not a
   wash over the day side, it is the bare ground - because --void is already
   the darkest surface in the palette and there is nothing left to darken it
   with. So the DAY side is painted, one surface up, clipped to the daylit
   polygon: sea --void by night and --panel by day, land --panel by night and
   --panel-lift by day. Each of those pairs is 1.16 apart, which is the same
   1.16 that separates a card from the page - so, exactly as with a card,
   what makes the two halves read as different things is the boundary between
   them, and that boundary is the terminator drawn as a real --ink-dim line.
   D46's night-is-shaded still holds: night is the unlit half either way.
   If the two halves ever read as one, raise --panel-lift. Never lower a
   floor, and never wash --void. */

.tracker .tk-map{
  display:block;width:100%;max-width:44rem;margin:0 auto;
  aspect-ratio:2 / 1;
  background:none;border:0;cursor:default;touch-action:pan-y;
}
/* Hiding the view that is not showing, and the selectors have to carry the
   ids to do it. `.tracker #scope` above sets display:block through an ID, so
   a rule written `.tracker .tk-dome[hidden]` loses to it on specificity and
   the dome stays on screen UNDER the map - which is exactly what shipped to
   the first screenshot of this branch. Both views were drawn, one above the
   other, and the tab appeared to do nothing but add a map.
   Same reason sections.css's #scope rules have to be overridden with the id
   in the first place. Do not "simplify" these back to class selectors. */
.tracker #scope[hidden],.tracker #tk-map[hidden]{display:none}

/* Sea and land, night and day. The four fills above, in the same order. */
.wm-sea{fill:var(--void)}
.wm-sea.wm-lit{fill:var(--panel)}
.wm-land{
  fill:var(--panel);
  stroke:var(--ink-dim);stroke-opacity:.5;stroke-width:1.2;stroke-linejoin:round;
}
.wm-land.wm-lit{fill:var(--panel-lift)}

/* Furniture: meridians and parallels every 30 degrees, the equator picked
   out. Decorative structure, so --edge, exactly as a card outline is. */
.wm-grid{stroke:var(--edge);stroke-width:1;fill:none}
.wm-eq{stroke-width:1.6}

/* Reported: the sunrise-sunset line, computed from the real sub-solar point.
   It is the boundary the two ground colours are read against, so it takes a
   gated colour rather than --edge. */
.wm-term{fill:none;stroke:var(--ink-dim);stroke-opacity:.85;stroke-width:2}

/* The frame does the job the dome's rim does, including saying when the card
   has stopped showing now. */
.wm-frame{fill:none;stroke:var(--edge-strong);stroke-width:3}
.tracker.tk--accel .wm-frame{stroke:var(--amber)}

/* Ground tracks. Solid behind, dashed ahead, both in the object's class
   colour - the same grammar the dome's trails use, so the eye reads the two
   views the same way. Each is emitted as one path PER SEGMENT: a track that
   crosses the antimeridian is split rather than drawn straight across the
   map, which is the single most likely visible defect in this view. */
.wm-trail{fill:none;stroke-width:3.2;stroke-linecap:round;stroke-opacity:.75}
.wm-lead{fill:none;stroke-width:2;stroke-dasharray:5 6;stroke-opacity:.55}

.wm-trail.pay,.wm-lead.pay{stroke:var(--sky)}
.wm-trail.star,.wm-lead.star{stroke:var(--iris)}
.wm-trail.rkt,.wm-lead.rkt{stroke:var(--amber)}
.wm-trail.deb,.wm-lead.deb{stroke:var(--rose)}

/* Sub-satellite points. Debris stays a hollow ring rather than a filled dot,
   exactly as on the dome and the scope, so class is never carried by colour
   alone. */
.wm-sub.pay{fill:var(--sky)}
.wm-sub.star{fill:var(--iris)}
.wm-sub.rkt{fill:var(--amber)}
.wm-sub.deb{stroke:var(--rose);stroke-width:1.6}
.wm-sub.deb.big{stroke-width:2.4}

/* The reader. Lime, like every other "this is you" on the site, and a ring
   with a broken crosshair rather than a dot - so it can never be mistaken
   for one of the objects it sits among. */
.wm-you{fill:none;stroke:var(--signal);stroke-width:2.4;stroke-linecap:round}

/* Name labels, on the same construction as the dome's callouts: a --panel
   box outlined in the class colour, so the name sits on the one ground every
   class colour has already been measured against and the tracks underneath
   never show through the text. */
.wm-callout.pay{color:var(--sky)}
.wm-callout.star{color:var(--iris)}
.wm-callout.rkt{color:var(--amber)}
.wm-callout.deb{color:var(--rose)}
.wm-box{fill:var(--panel);stroke:currentColor;stroke-width:1.8}
.wm-leader{stroke:currentColor;stroke-opacity:.75;stroke-width:1.6}
.wm-name{fill:currentColor;font-family:var(--f-data);font-weight:500;letter-spacing:.03em}

/* The state line: empty while the dome is simply live and populated, and
   never a placeholder. min-height keeps the card from jumping a line when
   it fills. */
.tk-state{
  font-family:var(--f-data);font-size:var(--step--1);letter-spacing:.1em;
  text-align:center;color:var(--ink-dim);margin:.6rem 0 0;min-height:1.3em;
}
.tracker.tk--accel .tk-state{color:var(--amber)}

/* -- the bottom row: SHOW: and TIME ACCELERATION ------------------------ */

.tk-foot{
  display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-start;
  gap:1rem 1.5rem;
  border-top:1px solid var(--edge);padding-top:.9rem;
}
.tk-show{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem .9rem;min-width:0}
.tk-show-l,.tk-accel-l{
  font-family:var(--f-data);font-size:var(--step--1);letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-dim);
}

.tk-chk{display:inline-flex;align-items:center;gap:.4rem;font-size:var(--step--1);cursor:pointer}
.tk-chk input{width:.95rem;height:.95rem;margin:0;cursor:pointer}
.tk-chk.pay {color:var(--sky);  accent-color:var(--sky)}
.tk-chk.deb {color:var(--rose); accent-color:var(--rose)}
.tk-chk.rkt {color:var(--amber);accent-color:var(--amber)}
.tk-chk.star{color:var(--iris); accent-color:var(--iris)}
/* The two with no class behind them. The box keeps its colour so the
   mockup's row survives, but the label goes dim, the input is genuinely
   disabled, and each carries its own reason as a title. */
.tk-chk.dead{color:var(--ink-dim);cursor:not-allowed}
.tk-chk.dead input{cursor:not-allowed}

/* Marginalia, and last in its row: the joke that the two dead filters are
   carrying. Same treatment as .tapenote in sections.css. */
.tk-note{
  flex:1 0 100%;
  font-family:var(--f-hand);font-size:var(--step-1);line-height:1.2;
  color:var(--signal);transform:rotate(-.6deg);margin:.1rem 0 0;
}

.tk-accel{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;margin-left:auto}
.tk-rates{display:flex;gap:.3rem}
.tk-rate{
  font-family:var(--f-data);font-size:var(--step--1);letter-spacing:.06em;
  background:transparent;color:var(--ink-dim);
  border:1px solid var(--edge);border-radius:6px;
  padding:.35rem .65rem;min-width:2.7rem;cursor:pointer;
}
.tk-rate:hover{color:var(--ink);border-color:var(--edge-strong)}
.tk-rate[aria-pressed="true"]{background:var(--signal);color:var(--on-signal);border-color:var(--signal)}
/* Accelerated: the pressed rate goes amber too, so the badge, the rim, the
   state line and the button the reader pressed all say the same thing at
   once. Nobody should be able to mistake 20x for now. */
.tracker.tk--accel .tk-rate[aria-pressed="true"]{
  background:var(--amber);color:var(--on-signal);border-color:var(--amber);
}

/* The dome scales with the card, and so does every glyph in it - a 12-unit
   tick is 16px on a 544px desktop dome and 9.5px on a 316px phone one, which
   is under this site's own floor. The narrow sizes below put both back over
   it. Same breakpoint tracker.js uses to drop from five labels to three. */
@media (max-width:56rem){
  .tracker #scope .lbl{font-size:20px}
  .tracker #scope .tick{font-size:16px}
}

@media (max-width:34rem){
  /* Nothing on this card may push the page sideways at 390px. The header's
     right-hand group drops under the title rather than squeezing it, and
     both bottom groups go full width. */
  .tk-hd-r{width:100%}
  .tk-foot{gap:1rem}
  .tk-accel{width:100%}
}