/* MitaBase Pro — a product of ETMITA · https://etmita.com
   Copyright © ETMITA. All rights reserved. */
/*
 * public/overview.css — Übersicht v3 (the MITA Base command-center
 * port). Almost everything on this page is Tailwind utilities
 * generated from src/styles/overview-preset.cjs against the token
 * scope in public/overview-tokens.css — this file holds ONLY what
 * utilities cannot express:
 *
 *   · the once-per-session entrance choreography (.ov3-in arms it;
 *     overview.page.ts removes the class after it finishes so the 8 s
 *     poll's re-paints never re-stagger the page)
 *   · the vehicle-track drive-in (van + Volt bar grow from origin)
 *   · the activity-feed scrollbar
 *   · reduced-motion kills
 *
 * Markup + logic: /js/pages/overview.js (GENERATED from
 * src/features/overview/overview.page.ts — never edit the emit).
 *
 * Since 2026-09-13 this file also owns the LAYOUT and the CARD, which
 * used to be Tailwind utilities inside the markup string. Two things
 * the operator saw on the live panel: cards in a row that did not
 * match in height, leaving a hole under the short one; and white
 * cards on a cream ground. The first is a layout rule, the second a
 * token (overview-tokens.css). Both belong in a sheet a test can read.
 */

/* ── the page: two independent columns, never rows ─────────────────
   A row pairs a fixed-height card with one that grows with the day,
   and the short one leaves a hole under itself. Columns stack what
   they are given and cannot. Widths are container queries: the
   sidebar collapses, and a viewport media query does not see the
   page's real width (the dispatch page's idiom). */
.ov3-page {
  container-type: inline-size;
  container-name: ov3;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 16px 24px 28px;
}
.ov3-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}
.ov3-main,
.ov3-rail {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}
/* a card for a station this administrator was not given (2026-09-17) */
.ov3-card[hidden], .ov3-pair[hidden] { display: none !important; }
.ov3-pair {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  align-items: stretch;
}
@container ov3 (min-width: 720px) {
  .ov3-pair { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* 1000px of page, not viewport: a 1440 laptop with the sidebar open
   has ~1140px of page and must still get the rail beside the board */
@container ov3 (min-width: 1000px) {
  .ov3-grid { grid-template-columns: minmax(0, 8fr) minmax(300px, 4fr); }
}
@container ov3 (min-width: 1600px) {
  .ov3-grid { grid-template-columns: minmax(0, 9fr) minmax(340px, 3fr); }
}

/* ── the card: a hairline on a one-step-lighter surface. No shadow at
   rest — separation comes from the ground being a step below the card
   (#FAFAFA under #FFFFFF) and from the line, the way Notion's and
   Linear's flat cards do it; a shadow on top of that is the "generic
   card" look. 16px: the design system's card radius (13–18). ── */
.ov3-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 18px 20px;
  border: 1px solid var(--border-subtle);
  border-radius: 16px;
  background: var(--surface-card);
}
/* The live board keeps one anchor: a Volt rule along its top edge —
   INSIDE the card, not lying across its top (operator, 2026-09-14).
   A 3px-tall bar cannot carry a 16px corner: the browser scales the
   radius down to the box height, so the bar's square ends stuck out
   past the card's rounded corners and read as a separate line above
   the card. So the rule is painted as a background band on a layer
   that fills the padding box and carries the card's INNER radius
   (16px minus the 1px border) — the curve clips the band, and the
   Volt gradient survives. background-image, never the `background`
   shorthand: a plain colour there would flood the whole card. */
.ov3-hero { position: relative; }
.ov3-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 15px;
  background-image: var(--accent-fill);
  background-repeat: no-repeat;
  background-size: 100% 3px;
  background-position: top center;
  pointer-events: none;
}
.ov3-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 12px;
}
.ov3-eyebrow {
  font-family: var(--font-mono), "IBM Plex Mono", ui-monospace, monospace;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}
/* figures line up in columns: tabular digits everywhere mono is used */
.ov3-page .font-mono { font-variant-numeric: tabular-nums; }
.ov3-feed { max-height: 34rem; }

/* ── entrance: cards fade/slide in, staggered (port: i × 70–110 ms).
      Armed by .ov3-in only — without it, elements render settled. ── */
.ov3-in .ov3-card {
  animation: ov3Rise 0.5s cubic-bezier(0, 0, 0.2, 1) backwards;
}
.ov3-in .ov3-card:nth-child(2) { animation-delay: 0.07s; }
.ov3-in .ov3-card:nth-child(3) { animation-delay: 0.14s; }
.ov3-in .ov3-rise {
  animation: ov3Rise 0.5s cubic-bezier(0, 0, 0.2, 1) backwards;
  /* per-item extra delay comes inline from the renderer */
}
@keyframes ov3Rise {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

/* vans drive in from the origin; bars grow from 0 (700 ms ease-out,
   delay = index × 110 ms — inline). Only while .ov3-in is armed. */
.ov3-in .ov3-van {
  animation: ov3Drive 0.7s cubic-bezier(0, 0, 0.2, 1) backwards;
}
.ov3-in .ov3-track-bar {
  animation: ov3Grow 0.7s cubic-bezier(0, 0, 0.2, 1) backwards;
}
@keyframes ov3Drive {
  from { left: 5%; }
}
@keyframes ov3Grow {
  from { width: 0; }
}

/* ── activity feed scrollbar (thin; Volt on hover) ─────────────── */
.ov3-feed { scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }
.ov3-feed::-webkit-scrollbar { width: 6px; }
.ov3-feed::-webkit-scrollbar-track { background: transparent; }
.ov3-feed::-webkit-scrollbar-thumb {
  background: var(--border-strong);
  border-radius: 999px;
}
.ov3-feed:hover::-webkit-scrollbar-thumb { background: var(--accent-fill-solid); }

/* new-event pulse (app.js installFeedPulse stamps .pulse-once) */
.ov3-feed .pulse-once { animation: ov3FeedIn 0.8s cubic-bezier(0, 0, 0.2, 1); }
@keyframes ov3FeedIn {
  0% { background: var(--accent-soft); }
  100% { background: transparent; }
}

/* ── reduced motion: everything instant ────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .ov3-in .ov3-card,
  .ov3-in .ov3-rise,
  .ov3-in .ov3-van,
  .ov3-in .ov3-track-bar,
  .ov3-feed .pulse-once { animation: none !important; }
}