/* Live view — the ClockRing and the three lists around it.
 *
 * Loaded alongside app.css, which already owns the shell, the buttons, the
 * banners and the coverage bars. Nothing here restates them.
 *
 * Every colour is a token (05_CONVENTIONS.md guardrail 10). The one exception
 * is the territory hue on a row's left edge and on an arc, which arrives from
 * the API as `var(--t-<key>, <hex>)` built by components/territory-paint.js —
 * the token wins, the row's own value is only the fallback.
 *
 * Sizes lean large on purpose. This is read at arm's length, in blinding sun
 * and at 3am, by someone who has not slept.
 */

/* --- layout --------------------------------------------------------------- */

.live { display: flex; flex-direction: column; gap: var(--space-5); }

/* On a phone the list comes before the dial.
 *
 * Source order is the desktop's (and the screen reader's): the ring is the
 * screen's headline and it sits top-left. But 340px of clock face above the
 * fold is 340px spent on atmosphere, and the question somebody opens this
 * screen with at 3am is "am I on now" — which the on-now column answers in
 * words. The design says the same thing with `ordRing: isPhone ? 2 : 1`. */
.live-body { display: flex; flex-direction: column; gap: var(--space-6); }

.live-cols { order: 1; }
.live-ring-col { order: 2; }
.live-asides { order: 3; }

.live-ring-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
}

.live-cols { display: flex; flex-direction: column; gap: var(--space-6); }

.live-asides {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
}

.live-day {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  font-family: var(--font-ui);
  font-size: var(--size-small);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--soft);
}

/* --- the breathing pulse ---------------------------------------------------
 * The one animation on this screen, and it earns its place: it is how you know
 * at a glance that the numbers are live rather than a page left open since
 * yesterday. Under prefers-reduced-motion tokens.css stops it and it becomes
 * exactly what the design asks for — a static dot. */

.pulse {
  width: 9px;
  height: 9px;
  border-radius: var(--radius-pill);
  background: var(--live);
  flex: none;
  animation: breathe 2.6s ease-in-out infinite;
}

.pulse--live { background: var(--live); }
.pulse--gap { background: var(--gap); }

/* --- the ring ------------------------------------------------------------- */

.ring-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.ring {
  position: relative;
  width: 100%;
  max-width: 310px;
  padding: var(--space-4) 0;
}

.ring-svg { display: block; width: 100%; height: auto; overflow: visible; }

.ring-track { fill: none; stroke: var(--card); }
.ring-track--inner { opacity: 0.75; }

.ring-arc { fill: none; stroke-linecap: butt; }

.ring-hand { stroke: var(--ink); stroke-width: 2.5; stroke-linecap: round; }
.ring-hub { fill: var(--ink); }

.ring-centre {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.ring-time {
  font-family: var(--font-display);
  /* Sized to sit inside the innermost ring rather than across it: the hole is
   * the box width scaled by 91/260, so this has to stay under about a third of
   * the container. */
  font-size: 26px;
  line-height: 1;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.ring-sub {
  margin-top: var(--space-1);
  font-size: var(--size-kicker);
  letter-spacing: var(--track-kicker);
  color: var(--soft);
}

/* Four quarter labels punched through the ring, on the page background. */
.ring-mark {
  position: absolute;
  font-size: var(--size-micro);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.1em;
  color: var(--soft);
  background: var(--bg);
  font-variant-numeric: tabular-nums;
}

.ring-mark--0,
.ring-mark--2 { left: 50%; transform: translateX(-50%); padding: 0 var(--space-1); text-transform: uppercase; }
.ring-mark--0 { top: 0; }
.ring-mark--2 { bottom: 0; }
.ring-mark--1,
.ring-mark--3 { top: 50%; transform: translateY(-50%); padding: var(--space-1) 0; }
.ring-mark--1 { right: -6px; }
.ring-mark--3 { left: -6px; }

/* Out of season: the four tracks are drawn, the hand is at now, and nothing is
 * on it. Says so, rather than leaving a bare diagonal line to be read as a bug. */
.ring-empty {
  margin: var(--space-2) 0 0;
  font-size: var(--size-micro);
  color: var(--soft);
  text-align: center;
  line-height: 1.45;
}

/* --- section headings ----------------------------------------------------- */

.kicker {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  font-family: var(--font-ui);
  font-size: var(--size-kicker);
  font-weight: var(--weight-bold);
  letter-spacing: var(--track-kicker);
  text-transform: uppercase;
  color: var(--soft);
}

.kicker--gap { color: var(--gap); }
.kicker--live { color: var(--live); }
.kicker--soon { color: var(--soon); }

.col-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2);
  padding-bottom: var(--space-2);
  margin-bottom: var(--space-3);
  border-bottom: 1px solid var(--line);
}

.col-note {
  font-size: var(--size-micro);
  color: var(--soft);
  font-variant-numeric: tabular-nums;
}

.countdown { font-variant-numeric: tabular-nums; }

/* --- needed right now ------------------------------------------------------
 * The loudest thing on the screen, deliberately: an uncovered core seat during
 * the burn is the one problem this app exists to make visible. */

/* --- the next thing happening in camp ------------------------------------- */

/* The design's event banner: a fill, an icon, three lines and a door. Its
 * surface follows how close the event is — panel, then --soon-bg inside four
 * hours, then --live-bg while it runs. */
.live-event {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
  background: var(--panel);
  border-radius: var(--radius-card);
  padding: var(--space-4) 17px;
}

.live-event.is-soon { background: var(--soon-bg); }
.live-event.is-now { background: var(--live-bg); }

.live-event-icon { font-size: 20px; flex: none; }

.live-event-body {
  flex: 1;
  min-width: 170px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.live-event-title { font-size: 17px; font-weight: var(--weight-semibold); }
.live-event-when { font-size: var(--size-small); color: var(--soft); }

.needs {
  background: var(--gap-bg);
  border-radius: var(--radius-card);
  padding: 15px 17px;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.needs-list,
.rows,
.later,
.legend { list-style: none; margin: 0; padding: 0; }

.needs-list {
  /* Columns rather than one long list, so on a wide screen the Claim button
   * stays beside the words it belongs to instead of a foot away at the edge. */
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--space-2);
}

.need {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 11px;
  min-height: 52px;
  padding: 11px 13px;
  border-radius: var(--radius-control);
  background: var(--panel);
  color: var(--ink);
}

/* --- rows ----------------------------------------------------------------- */

.rows { display: flex; flex-direction: column; gap: var(--space-2); }

.row {
  display: flex;
  /* The columns are narrow on a desktop. When the text and the button stop
   * fitting side by side the button drops to its own line instead of squeezing
   * a camper's name into one word per row. */
  flex-wrap: wrap;
  align-items: center;
  gap: 11px;
  min-height: 52px;
  padding: 11px 13px;
  border-radius: var(--radius-control);
  /* The territory's hue, so a row can be traced back to its arc on the ring.
   * The design leaves this edge off — it is our addition, and the reason it
   * stays is that four rings of colour above a monochrome list is a puzzle. At
   * 3px it matches every other accent edge in the design (agenda shift cards,
   * training rows) rather than being the one 4px line in the app. The colour
   * itself is an inline style from components/territory-paint.js — it is data,
   * and only the fallback below lives in the stylesheet. */
  border-left: 3px solid var(--line);
}

.row--live { background: var(--live-bg); color: var(--ink); }
.row--gap { background: var(--gap-bg); color: var(--gap); }
.row--held { background: var(--card); color: var(--ink); }
.row--open { background: var(--soon-bg); color: var(--soon); }
/* Only an admin ever sees this one: a column camp has not released (Rule 7). */
.row--closed { background: var(--card); color: var(--soft); }
.row--mine { box-shadow: inset 0 0 0 2px var(--ink); }

.row-emoji { font-size: 19px; flex: none; }

.row-body { flex: 1 1 140px; min-width: 0; }


/* Keeps the button at the right edge, on its own line once the row wraps. */
.row > .btn,
.need > .btn { margin-left: auto; }

.row-name {
  display: block;
  font-size: var(--size-body);
  font-weight: var(--weight-semibold);
}

/* No opacity here on purpose: a gap row is --gap on --gap-bg, which clears AA
 * at full strength and stops clearing it the moment it is faded. */
.row-sub {
  display: block;
  font-size: var(--size-micro);
  line-height: 1.35;
}

/* --- rest of today -------------------------------------------------------- */

.later { display: flex; flex-direction: column; gap: var(--space-3); }

.later-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--size-small);
  min-height: 26px;
}

.later-time {
  width: 78px;
  flex: none;
  font-weight: var(--weight-semibold);
  font-variant-numeric: tabular-nums;
}

.bars-wrap { flex: none; display: inline-flex; }

.later-text { flex: 1; min-width: 0; color: var(--soft); }

.later-flag { font-weight: var(--weight-semibold); color: var(--soft); white-space: nowrap; }
.later-flag.is-gap { color: var(--gap); }

/* The design sets this 15px clear of the last change of the day. */
.later-more { margin-top: 15px; }

/* --- the panels under the ring -------------------------------------------- */

.card {
  width: 100%;
  max-width: 340px;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  align-items: flex-start;
  background: var(--panel);
  border-radius: var(--radius-card);
  padding: var(--space-4);
}

.card--you { background: var(--card); }

/* The card's one door — "My shifts →" or "Sign in →" (the design's youCta). */
.you-door { margin-top: var(--space-3); margin-right: var(--space-2); }
.card--anon { background: var(--soon-bg); }

.card-note {
  margin: 0;
  font-size: var(--size-micro);
  color: var(--soft);
  line-height: 1.5;
}

.card-note--rule {
  border-top: 1px solid var(--line);
  padding-top: var(--space-2);
  width: 100%;
}

.you-line {
  margin: 0;
  font-size: var(--size-body);
  font-weight: var(--weight-semibold);
}

.legend { display: flex; flex-direction: column; gap: var(--space-2); width: 100%; }

.legend-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--size-micro);
  color: var(--soft);
}

.legend-swatch { width: 26px; border-radius: 3px; flex: none; }
.legend-text { flex: 1; min-width: 0; }
.legend-text strong { color: var(--ink); font-weight: var(--weight-semibold); }

/* --- buttons this screen adds --------------------------------------------- */

.btn--gap { border-color: var(--gap); background: var(--gap); color: var(--on); }
.btn--outline { border-color: currentColor; background: transparent; color: inherit; }

/* --- desktop: the ring left, the three lists beside it --------------------- */

@media (min-width: 768px) {
  .live-body {
    display: grid;
    grid-template-columns: 340px 1fr;
    grid-template-areas:
      'ring cols'
      'aside cols';
    grid-template-rows: auto 1fr;
    column-gap: var(--space-6);
    row-gap: var(--space-5);
    align-items: start;
  }

  .live-ring-col { grid-area: ring; }
  .live-cols { grid-area: cols; }
  .live-asides { grid-area: aside; }

  .live-cols {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: var(--space-5);
  }

  .ring-time { font-size: 28px; }
}