/* ================= The quarter grid — JS/components/okr-quarter-grid.js =================

   Nothing here is a new component. Every piece is an existing suite primitive,
   already dressed for `.alt-app` in its own sheet: the trigger is `.ms-trigger`
   (multi-select.js), the surface is `.cfg-popover`, quick picks are `.at-tabs`/
   `.at-tab` (the board's own View strip track, but `role="group"` since a pick
   REPLACES the selection rather than switching a panel), counts are `.a-chip`
   with `.a-mono`, paging reuses the month-nav's chevron buttons. This file is
   layout only — the sizing those shared pieces do not already know.

   No new colour. Selection speaks through `--a-blue`/`--a-blue-soft`, the pair
   `.okr-ctx-clear` already uses. A quarter's past/current/upcoming state is
   STRUCTURE, not colour — a stronger border, never a fill, the same rule
   `.okr-cell.now` in CSS/okr.css states — so "selected" and "is current" stay
   two pictures that can both be true of one cell. A no-board cell borrows
   `.okr-cell.empty`'s recipe from that file. */

body.alt-app .okr-qg-trigger{
  width:auto; min-width:160px; max-width:220px;
}

body.alt-app .okr-qg-pop{
  width:min(380px, calc(100vw - 32px));
  padding:var(--a-3);
  display:flex; flex-direction:column; gap:var(--a-3);
}

/* Quick picks reuse `.at-tabs`/`.at-tab`, not `.a-btn`. It wraps rather than
   scrolls: that track's own horizontal-scroll rule answers a narrow VIEWPORT, but
   this popover's fixed 380px overflows the same four tabs at any window width, so
   scrolling was never the fix. `height:auto` lets `.at-tab`'s own `height:100%`
   resolve to content height, so a second row costs a few pixels, not a gesture
   nobody would discover on a control this size. */
body.alt-app .okr-qg-quick{
  width:100%; height:auto; flex-wrap:wrap; row-gap:2px;
}

/* The window bar — not `.a-cal-h` (that belongs to CSS/alt/alt-rail.css, never
   loaded here), but the same reused chevron-button pair. Layout only. */
body.alt-app .okr-qg-window{
  display:flex; align-items:center; gap:6px;
}
body.alt-app .okr-qg-window-label{
  flex:1 1 auto; text-align:center; font-size:12px; font-weight:700; color:var(--a-dim);
}

/* ---- the grid itself ----
   `display:contents` on each row is what lets its five children fall into ONE
   shared grid instead of nesting a grid inside a grid, so every year's Q1 lines
   up under the one above it. */
body.alt-app .okr-qg-grid{
  display:grid; grid-template-columns:minmax(34px,auto) repeat(4,minmax(56px,1fr));
  gap:6px; max-height:min(360px, 50vh); overflow-y:auto; overflow-x:hidden;
  padding-right:2px;
}
body.alt-app .okr-qg-row{ display:contents; }

body.alt-app .okr-qg-year{
  display:flex; align-items:center; justify-content:flex-start;
  font-size:11px; font-weight:700; color:var(--a-dim); padding:0 2px;
}
body.alt-app .okr-qg-head .okr-qg-colhead{
  display:flex; align-items:center; justify-content:center;
  font-size:10px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:var(--a-faint); padding-bottom:2px;
}

/* Cells at least `--a-row` (44px) tall — the design system's own touch-target floor,
   CSS/alt/alt-tokens.css. */
body.alt-app .okr-qg-cell{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px;
  min-height:var(--a-row); border:1px solid var(--a-line-soft); border-radius:var(--a-r-sm);
  background:var(--a-raised); color:var(--a-text); cursor:pointer; padding:4px 2px;
  font-family:var(--a-body); text-align:center;
}
body.alt-app button.okr-qg-cell:hover{ border-color:var(--a-line-strong); }
body.alt-app button.okr-qg-cell:focus-visible{ outline:2px solid var(--a-ring); outline-offset:1px; }
body.alt-app .okr-qg-cell-label{ font-size:12px; font-weight:700; }
body.alt-app .okr-qg-cell-sub{ font-size:10px; color:var(--a-dim); }
/* The state word beside the count, one line under the label rather than a third.
   `flex-wrap:wrap` because "upcoming" beside a two-digit chip is the widest pair. */
body.alt-app .okr-qg-cell-meta{
  display:flex; align-items:center; justify-content:center; flex-wrap:wrap;
  gap:0 3px; row-gap:1px;
}
body.alt-app .okr-qg-cell-state{ font-size:10px; color:var(--a-dim); }
/* The separator never dangles: wrapped in its own inline-flex span so it and the
   chip move to a new line together or not at all, rather than a bare " · " left
   alone at the end of a line with the chip pushed to the next one. */
body.alt-app .okr-qg-cell-count-group{ display:inline-flex; align-items:baseline; }
/* A real `.a-chip`, shrunk to fit rather than restated as bespoke text — only its
   padding/height and cursor are overridden, since the cell is the click target. */
body.alt-app .okr-qg-cell-chip{
  height:16px; padding:0 6px; cursor:inherit; background:var(--a-panel); border-color:transparent;
}
body.alt-app .okr-qg-cell-chip .n{ font-size:11px; opacity:.85; }

/* SELECTION IS THE ONLY THING THAT TAKES COLOUR HERE — see the header comment. */
body.alt-app .okr-qg-cell.on{
  border-color:var(--a-blue); background:var(--a-blue-soft); color:var(--a-blue-text);
}
body.alt-app .okr-qg-cell.on .okr-qg-cell-sub{ color:var(--a-blue-text); }
body.alt-app .okr-qg-cell.on .okr-qg-cell-state{ color:var(--a-blue-text); }
body.alt-app .okr-qg-cell.on .okr-qg-cell-chip{ background:var(--a-blue-soft); }

/* CURRENT IS STRUCTURE, NOT SELECTION — a stronger edge, matching `.okr-cell.now` in
   CSS/okr.css exactly for the reason recorded there: a fill would make "today's quarter" read
   as chosen no matter what the reader actually picked. */
body.alt-app .okr-qg-cell.is-current{ border-color:var(--a-line-strong); }
body.alt-app .okr-qg-cell.is-current.on{ border-color:var(--a-blue); }

/* No board — `.okr-cell.empty`'s recipe, carried over rather than reinvented. In
   `periods` mode this is a plain `<div>`; in `range` mode a real button. */
body.alt-app .okr-qg-cell.no-board{
  background:transparent; border-style:dashed; color:var(--a-faint);
}
body.alt-app .okr-qg-cell.no-board .okr-qg-cell-sub{ color:var(--a-faint); }
body.alt-app div.okr-qg-cell.no-board{ cursor:default; }

/* ---- footer ---- */
body.alt-app .okr-qg-footer{
  display:flex; align-items:center; justify-content:space-between; gap:var(--a-3);
  padding-top:var(--a-2); border-top:1px solid var(--a-line-soft);
}
body.alt-app .okr-qg-summary{
  font-size:12px; color:var(--a-dim); min-width:0; overflow:hidden; text-overflow:ellipsis;
  white-space:nowrap;
}
body.alt-app .okr-qg-actions{ display:flex; gap:6px; flex:0 0 auto; }

/* ---- phone width: the grid still fits; the trigger just stops being narrow next
   to everything else that has already gone full-width (alt-responsive.css's pattern). ---- */
@media (max-width:639px){
  body.alt-app .okr-qg-trigger{ width:100%; max-width:none; }
  body.alt-app .okr-qg-pop{ width:min(340px, calc(100vw - 24px)); }
  body.alt-app .okr-qg-grid{ grid-template-columns:minmax(28px,auto) repeat(4,minmax(48px,1fr)); gap:4px; }
}