/* View-specific layout: Sessions + Home. Kit atoms live in kit.css. */

/* ── Sessions ── */

.sess-columns {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 26px;
  margin-top: 16px;
}

/* The per-session ledger sits BELOW the aggregate columns and owns the whole
   page width — it is the densest thing here, and its MODELS cell is what
   identifies a session. */
.sess-ledger { margin-top: 26px; }

.sess-row {
  display: flex;
  align-items: baseline;
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}

/* Grid and flex children default to min-width:auto, so they refuse to shrink
   below their own content and burst the container instead. Every fixed column
   below is a flex-basis that must be allowed to give. This was latent at the
   old type size and only surfaced as horizontal scroll once the scale grew. */
.sess-col, .sess-ledger { min-width: 0; }

.sess-burn-bars {
  display: grid;
  grid-template-columns: repeat(var(--burn-days), minmax(0, 1fr));
  align-items: end;
  gap: 4px;
  height: 56px;
  margin-top: 8px;
}

.sess-burn-bars > * { min-width: 0; }

.sess-burn-axis {
  position: relative;
  height: 1.35em;
  margin-top: 3px;
  font-size: var(--fs-micro);
}

.sess-burn-tick {
  position: absolute;
  top: 0;
  white-space: nowrap;
}

.sess-time { width: var(--col-time); flex-shrink: 0; color: var(--ink-3); }
.sess-cost { width: var(--col-cost); flex-shrink: 0; text-align: right; color: var(--ink); font-weight: 700; }
.sess-out { width: var(--col-out); flex-shrink: 0; text-align: right; }
.sess-lines { width: var(--col-lines); flex-shrink: 0; text-align: right; }
.sess-agents { width: var(--col-agents); flex-shrink: 0; text-align: right; padding-left: 6px; }
.sess-models { flex: 1; min-width: 0; padding-left: 14px; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.lineage-block {
  margin: 4px 0 0 var(--col-time);
  border-left: 1px solid var(--codex-stem);
  padding-left: 10px;
  font-size: var(--fs-xs);
  color: var(--codex);
  line-height: 1.8;
}

@media (max-width: 1350px) {
  .sess-columns { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 900px) {
  .sess-columns { grid-template-columns: 1fr; gap: 20px; }
  .sess-out, .sess-lines { display: none; }
  .sess-models { white-space: normal; }
  /* Phone columns still ride --fs-scale (the text must stay legible) but off
     a tighter base — at 1.5x the desktop bases alone ate the whole 390px and
     left the models column nothing. */
  .sess-ledger {
    --col-time: calc(74px * var(--fs-scale));
    --col-cost: calc(50px * var(--fs-scale));
  }
  /* AGENTS joins OUT and +LINES in standing down on a phone. It could not hold
     its own header ("AGENTS" needs 73px at scale 1.5 in a 48px cell, which is
     how the label came to paint over MODELS as "AGENTSMODELS"), and widening
     it to fit only starved MODELS — the column that actually identifies the
     session. The subagent count is a secondary fact and stays on desktop. */
  .sess-agents { display: none; }
  .lineage-block { margin-left: 14px; }
  .handoff, .handoff-teaser { margin-left: 14px !important; }
}

/* ── Home ── */

.home-verdict {
  display: flex;
  align-items: baseline;
  gap: 18px;
  flex-wrap: wrap;
  margin-top: 12px;
}

.home-river {
  display: flex;
  margin-top: 14px;
}

.river-rail {
  width: var(--rail-w);
  flex-shrink: 0;
  font-family: var(--font-mono);
}

.river-rail-block {
  border-top: 1px solid var(--hairline);
  padding: 10px 0 8px;
}

.river-lanes { position: relative; flex: 1; min-width: 0; }

.river-lane-sep { position: absolute; left: 0; right: 0; border-top: 1px solid var(--hairline); }

.river-svg {
  position: absolute;
  left: 0;
  overflow: visible;
  pointer-events: none;
}

.river-note,
.river-ai-peak,
.river-codex-label,
.river-web-cluster,
.river-web-latest,
.river-web-total,
.river-fleet-errors,
.river-fleet-live,
.river-trip-arrow,
.river-trip-label,
.river-charge,
.river-cal-allday,
.river-cal-next {
  position: absolute;
  white-space: nowrap;
}

.river-note { font-size: var(--fs-tiny); color: var(--ink-4); }
.river-ai-peak { font-size: var(--fs-tiny); color: var(--ink-3); }
.river-ai-live { position: absolute; transform: translate(-50%, -50%); }

.river-codex-strip {
  position: absolute;
  height: 3px;
  min-width: 3px;
  border-radius: 2px;
  background: var(--codex);
  opacity: .8;
}

.river-codex-label {
  right: calc(8px * var(--fs-scale));
  font-size: var(--fs-micro);
  color: var(--codex);
  opacity: .8;
}

.river-web-dot {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  transform: translateX(-50%);
}

.river-web-cluster { font-size: var(--fs-micro); color: var(--ink-4); }
.river-web-latest { font-size: var(--fs-tiny); }
.river-web-total { font-size: var(--fs-micro); color: var(--ink-4); }

.river-error-tick {
  position: absolute;
  width: 2px;
  background: var(--crit);
}

.river-fleet-errors { font-size: var(--fs-micro); color: var(--crit); }
.river-fleet-live { font-size: var(--fs-tiny); }

.river-dwell {
  position: absolute;
  box-sizing: border-box;
  overflow: hidden;
  padding: 0 calc(5px * var(--fs-scale));
  border: 1px solid var(--hairline);
  border-radius: 5px;
  background: rgba(255, 255, 255, .07);
  color: var(--ink-2);
  font-size: var(--fs-tiny);
  line-height: calc(18px * var(--fs-scale));
  text-overflow: clip;
  white-space: nowrap;
}

.river-trip-line {
  position: absolute;
  height: 2px;
  min-width: 2px;
  background: var(--ink-3);
}

.river-trip-arrow { color: var(--ink-3); font-size: var(--fs-tiny); line-height: 1; }
.river-trip-label { color: var(--ink-4); font-size: var(--fs-micro); }
.river-charge { color: var(--ink-2); font-size: var(--fs-tiny); line-height: 1; }

/* Calendar band — theme and feel, never a calendar replacement: translucent
   blocks in the calendar's own color, titles only when the block affords them */
.river-cal-block {
  position: absolute;
  box-sizing: border-box;
  overflow: hidden;
  padding: 0 calc(4px * var(--fs-scale));
  border: 1px solid;
  border-radius: 4px;
  color: var(--ink-2);
  font-size: var(--fs-micro);
  line-height: calc(14px * var(--fs-scale));
  text-overflow: clip;
  white-space: nowrap;
}

.river-cal-block--live { border-right: 0; border-radius: 4px 0 0 4px; }
.river-cal-allday { font-size: var(--fs-tiny); z-index: 2; }
.river-cal-next { font-size: var(--fs-tiny); color: var(--ink-3); }

/* Capture tick strip at the LIFE lane floor — created in ink, done in good
   (completion is state). Widths are graphic constants: they mean an instant. */
.river-cap-tick { position: absolute; width: 2px; height: 6px; background: var(--ink-3); }
.river-cap-tick--done { height: 8px; background: var(--good); }

.home-bottom {
  display: grid;
  grid-template-columns: minmax(420px, 1fr) 420px 340px;
  gap: 22px;
  margin-top: 18px;
}

@media (max-width: 1400px) {
  .home-bottom { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 900px) {
  .home-bottom { grid-template-columns: 1fr; gap: 16px; }
  /* Same min-width:auto trap as the session columns: a grid item refuses to
     shrink below its content, so one nowrap card header (CODEX · 7D  resets
     Sat 25 · 13:13) widened the whole track past the viewport. */
  .home-bottom > * { min-width: 0; }
  .home-bottom .card { min-width: 0; }
  /* Phone Home has no river (design 2a): the rail blocks become the summary,
     the lanes disappear — the day-shape belongs to desktop width. */
  .home-river { display: block; }
  .river-lanes { display: none; }
  .river-rail { width: auto; display: flex; gap: 22px; flex-wrap: wrap; }
  .river-rail-block { border-top: none; padding: 4px 0; min-height: 0 !important; }
}

/* Home runway: four quota dials in one card (2x2, collapsing to a column
   on phone). Replaces the old two-row grid of bar cards. */
.runway-dials {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px 12px;
  align-content: center;
}

@media (max-width: 900px) {
  .runway-dials { grid-template-columns: 1fr 1fr; gap: 14px 10px; }
  /* A dial does not shrink (nowrap label + fixed face), so at the desktop
     face size two of them plus the card padding overshoot a phone by ~20px.
     Smaller face, same 2x2 — still legible, and the card stops scrolling. */
  .runway-dials .dial--lg .dial-face { width: calc(42px * var(--fs-scale)); }
  .runway-dials .dial--lg .dial-pct { font-size: var(--fs-lg); }
}

/* A span whose start is off the left edge of today: squared-off left corner
   plus a caret, so a clamped start never reads as a real midnight start. */
.span-bar--clipped { border-top-left-radius: 0; border-bottom-left-radius: 0; }

.span-clip-mark {
  position: absolute;
  font-size: var(--fs-micro);
  color: var(--ink-4);
  line-height: 1;
}

/* ── Fleet services: worker span chips ──
   The 14px indent aligns the chips under the desktop TOP SPANS column. Once
   the row reflows to blocks on a phone that column is gone, so the indent is
   just a dent — and the chips need the full line to wrap into. */
@media (max-width: 900px) {
  .trow.tgrid > .worker-spans {
    flex: 0 0 100%;
    padding-left: 0 !important;
  }
}

/* ── Money/API: recent failures ──
   Desktop keeps the dense one-line-per-failure scan (62+150+88px of fixed
   columns plus the message). That is 486px at scale 1.5 and cannot fit a
   358px phone, so on a phone the row wraps: when · project · provider · CODE
   on the first line, and the exception prose drops to its own dim line. The
   code keeps the crit colour — it is the part you act on; the prose is
   context and reads as context. */
@media (max-width: 900px) {
  .fail-row { flex-wrap: wrap; padding: 7px 0; }
  .fail-row .fail-when,
  .fail-row .fail-proj,
  .fail-row .fail-prov { width: auto !important; }
  .fail-row .fail-msg {
    flex: 0 0 100% !important;
    white-space: normal !important;
    overflow: visible !important;
    font-size: var(--fs-micro);
    line-height: 1.5;
    color: var(--ink-4) !important;
    /* The message ends in a provider URL — one unbreakable token wider than
       the line, so white-space:normal alone still overflowed by 40px. */
    overflow-wrap: anywhere;
  }
}

/* A headline stat cluster is fixed-width blocks at a fixed gap; four of them
   need ~382px and a phone has 358px, so the last one (PROJECTS) fell off the
   edge. Wrap it and tighten the gap rather than shrinking the figures — these
   are the headline numbers of the view. */
@media (max-width: 900px) {
  .stat-cluster {
    flex-wrap: wrap;
    gap: 12px 20px !important;
  }
}

/* ── Live: one reader hit per row ──
   The desktop grid is 913px wide at scale 1.5 — the worst offender in the
   dashboard on a 390px phone. It also cannot take the generic .tgrid block
   reflow, because cell 1 is a dot gutter and cell 4 (PATH) is the thing you
   actually read. So Live gets its own three-line shape:

     ● 14:32 4m · arebladetlive
       /some/path/being-read
       Chrome · Windows · desktop · SE · via google

   PATH is promoted to its own line and allowed to wrap (a truncated URL is
   useless); everything else is context and rides one dim line. */
@media (max-width: 900px) {
  .live-row.tgrid {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 1px 8px;
    grid-template-columns: none;
    padding: 8px 0;
  }
  /* Beat the generic ".trow.tgrid > :first-child { flex: 0 0 100% }" — a dot
     does not get a line of its own. */
  .live-row.tgrid > .live-c-dot { flex: 0 0 auto; align-self: center; }
  .live-row.tgrid > .live-c-time,
  .live-row.tgrid > .live-c-site { flex: 0 0 auto; }

  .live-row.tgrid > .live-c-path {
    flex: 0 0 100%;
    overflow: visible !important;
    white-space: normal !important;
    word-break: break-all;
    color: var(--ink) !important;
  }

  .live-row.tgrid > .live-c-client,
  .live-row.tgrid > .live-c-geo,
  .live-row.tgrid > .live-c-via {
    flex: 0 0 auto;
    overflow: visible !important;
    white-space: normal !important;
    font-size: var(--fs-micro);
    color: var(--ink-4) !important;
  }
  /* Empty geo/via cells would otherwise leave orphan gaps in the flex line. */
  .live-row.tgrid > .live-c-geo:empty,
  .live-row.tgrid > .live-c-via:empty { display: none; }
}

/* ── Money bars: project and model names ──
   The name column is 118px (177px at scale 1.5) and a real model id is
   "claude-haiku-4-5-20251001" — 248px. Truncating the tail of a model name
   destroys exactly the part that identifies it (the version), so on a phone
   the name takes its own line and the bar keeps the one below.
   Scoped to --named: .barrow is shared by six views and most of them have
   short labels that would only gain wasted height from this. */
@media (max-width: 900px) {
  .barrow--named {
    flex-wrap: wrap;
    row-gap: 3px;
  }
  .barrow--named > .barrow-name {
    width: auto !important;
    flex: 0 0 100%;
    overflow: visible !important;
    white-space: normal !important;
    overflow-wrap: anywhere;
    color: var(--ink) !important;
  }
}

/* usage view */

.usage-view,
.usage-chart-card,
.usage-chart { min-width: 0; }

.usage-chart-card { margin-top: 14px; padding: 14px 16px 10px; }

.usage-chart-meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 14px;
  color: var(--ink-4);
  font-size: var(--fs-micro);
  letter-spacing: .06em;
  text-transform: uppercase;
}

.usage-chart { width: 100%; }

.usage-chart-fail {
  min-height: calc(180px * var(--fs-scale));
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-4);
  font-size: var(--fs-sm);
}

.usage-absence-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 10px;
}

.usage-absence-list > * { flex: 0 1 auto; min-width: 0; }

.usage-window-note {
  margin-top: 8px;
  color: var(--ink-4);
  font-size: var(--fs-tiny);
}

.usage-stats {
  display: flex;
  align-items: stretch;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 16px;
}

.usage-stat-card {
  flex: 0 1 calc(245px * var(--fs-scale));
  min-width: 0;
  padding: 14px 16px;
}

.usage-stat-card--wide { flex-basis: calc(285px * var(--fs-scale)); }

.usage-stat-card--overage {
  flex-basis: calc(220px * var(--fs-scale));
  border-color: rgba(208, 59, 59, .35);
  background: rgba(208, 59, 59, .06);
}

.usage-stat-line,
.usage-reset-value {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 14px;
  margin-top: 9px;
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
}

.usage-reset-value strong { font-size: var(--fs-2xl); color: var(--ink); }

.usage-stat-number {
  margin-top: 7px;
  color: var(--ink);
  font-size: var(--fs-3xl);
}

.usage-stat-detail,
.usage-stat-absent { color: var(--ink-4); font-size: var(--fs-tiny); }

.usage-ledger {
  --usage-ledger-cols: calc(118px * var(--fs-scale)) calc(118px * var(--fs-scale)) calc(90px * var(--fs-scale)) calc(82px * var(--fs-scale)) minmax(0, 1fr);
  margin-top: 20px;
  min-width: 0;
}

.usage-ledger-grid {
  --cols: var(--usage-ledger-cols);
  padding: 7px 0;
  border-bottom: 1px solid var(--hairline);
  font-size: var(--fs-sm);
  color: var(--ink-2);
}

.usage-ledger-grid > * { min-width: 0; }
.usage-kind-early { color: var(--ink); font-weight: 700; }

.usage-view .infobox { margin-top: 16px; }
.usage-view .infobox-body p { margin: 0 0 9px; }

@media (max-width: 900px) {
  .usage-chart-card { padding-left: 8px; padding-right: 8px; }
  .usage-stat-card,
  .usage-stat-card--wide,
  .usage-stat-card--overage { flex: 1 1 100%; }
  .usage-ledger-grid > :last-child { white-space: normal; }
}

/* ── Fleet exceptions + numbers appendix ── */
.services-exception {
  margin-top: 26px;
  min-width: 0;
}

.services-exception-empty {
  margin-top: 9px;
  color: var(--ink-4);
  font-size: var(--fs-sm);
}

.services-exception-caption {
  margin-top: 6px;
  color: var(--ink-4);
  font-size: var(--fs-micro);
  line-height: 1.45;
}

.services-exception-row {
  padding: 8px 0;
  border-bottom: 1px solid rgba(255, 255, 255, .06);
  color: var(--ink-2);
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  font-variant-numeric: tabular-nums;
  line-height: 1.6;
  overflow-wrap: anywhere;
}

.services-exception-row > .service-name { white-space: normal; }

.services-numbers {
  margin-top: 30px;
  padding-top: 8px;
}

.services-numbers > .infobox-summary {
  display: flex;
  width: 100%;
}

.services-numbers-body { min-width: 0; }

@media (max-width: 900px) {
  .trow.tgrid.services-error-row > [data-l="ROUTE"] {
    white-space: normal;
    overflow-wrap: anywhere;
  }
}

/* ── Fleet inventory names + non-RED emitters ── */
.service-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.other-emitter-context {
  display: block;
  margin-top: 7px;
  color: var(--ink-4);
  font-size: var(--fs-tiny);
  line-height: 1.35;
}

.other-emitter {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: baseline;
  gap: 10px 18px;
  padding: 9px 0;
  border-bottom: 1px solid rgba(255, 255, 255, .06);
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
}

.other-emitter-rows {
  color: var(--ink-3);
  white-space: nowrap;
}

.other-emitter-metrics {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  min-width: 0;
}

@media (max-width: 900px) {
  .other-emitter { grid-template-columns: 1fr; gap: 5px; }
}

/* ── Maps information band ── */

.maps-view,
.maps-info-band,
.maps-summary-card,
.maps-place-identity { min-width: 0; }

.maps-info-band {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 12px;
}

.maps-summary-card { padding: 14px 16px; }

.maps-vehicle-card {
  flex: 0 1 calc(330px * var(--fs-scale));
}

.maps-places-card,
.maps-places-wrap {
  flex: 1 1 calc(470px * var(--fs-scale));
  min-width: 0;
}

.maps-vehicle-lead {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 8px;
  margin-top: 8px;
  color: var(--ink-3);
  font-size: var(--fs-sm);
}

.maps-vehicle-lead strong {
  color: var(--ink);
  font-size: var(--fs-3xl);
}

.maps-vehicle-trips { margin-left: auto; }

.maps-energy {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 5px 14px;
  margin-top: 10px;
  color: var(--ink-3);
  font-size: var(--fs-xs);
}

.maps-energy strong { color: var(--ink-2); }

.maps-place-list { margin-top: 7px; }

.maps-place-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  padding: 6px 0;
  border-bottom: 1px solid var(--hairline);
  color: var(--ink-2);
  font-size: var(--fs-sm);
}

.maps-place-identity > :first-child {
  overflow-wrap: anywhere;
}

.maps-place-identity .microlabel { margin-top: 2px; }

.maps-place-dwell {
  flex-shrink: 0;
  color: var(--ink);
  font-size: var(--fs-xs);
}

.maps-place-empty {
  padding: 9px 0;
  color: var(--ink-4);
  font-size: var(--fs-sm);
}

.maps-summary-foot {
  margin-top: 9px;
  color: var(--ink-4);
  font-size: var(--fs-tiny);
}

.maps-view .infobox { margin-top: 14px; }
.maps-view .infobox-body p { margin: 0 0 9px; }

@media (max-width: 900px) {
  .maps-info-band { display: block; }
  .maps-info-band > * + * { margin-top: 12px; }
  .maps-vehicle-trips { margin-left: 0; }
}

/* ── MCP last-call spotlight ── */

.mcp-spotlight {
  max-width: calc(760px * var(--fs-scale));
  margin-top: 14px;
  padding: 20px 22px;
  min-width: 0;
  background: linear-gradient(120deg, rgba(144, 133, 233, .09), var(--surface) 58%);
}

.mcp-spotlight-headline {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 7px 10px;
  margin-top: 8px;
  min-width: 0;
  font-family: var(--font-mono);
}

.mcp-spotlight-headline strong {
  min-width: 0;
  overflow-wrap: anywhere;
  color: var(--ink);
  font-size: var(--fs-2xl);
}

.mcp-spotlight-connector {
  min-width: 0;
  color: var(--ink-2);
  overflow-wrap: anywhere;
}

.mcp-spotlight-ago {
  color: var(--ink-4);
  white-space: nowrap;
}

.mcp-spotlight-snippet {
  margin-top: 13px;
  padding: 11px 13px;
  border-left: 2px solid var(--series-5);
  background: rgba(0, 0, 0, .18);
  color: var(--ink-2);
  font-size: var(--fs-sm);
  line-height: 1.55;
  overflow-wrap: anywhere;
}

.mcp-spotlight-footer {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 13px;
}

.mcp-error-flag {
  border-color: rgba(208, 59, 59, .5);
  color: var(--crit);
}

.mcp-recent-duration {
  flex-shrink: 0;
  color: var(--ink-4);
  text-align: right;
}

@media (max-width: 900px) {
  .mcp-spotlight { padding: 16px; }
}