/* ================= THE ALTERNATE UX — THE OKR APPLICATION =================
   okrs.html loads this file for the canonical flow dialog, import/export panes and shared
   drawer chrome (JS/features/okr-flow.js, okr-import.js, okr-import-preview.js all emit
   `.a-okr-*` markup here). A large part is unreachable dead weight from a second OKR page that
   was never adopted and is now deleted — removing it is a separate, browser-validated change,
   not a side effect of this pass.

   Everything is scoped to `.alt-app`: CSS/okr.css loads immediately before this file and owns
   the classic OKR names, and the scope is the wall against ever redressing the production board.

   Two palettes, both contrast-checked in light and dark: `--a-*` (alt-tokens.css — surfaces,
   text, spacing, motion; gold is emphasis, never status) and `--okr-*` (tokens.css — the six
   health aliases, redefined by `body.theme-light` upstream, which is why this file has almost
   no light-mode block). No raw hex for a status, ever — section 1 maps each `st-*` stem onto
   three inherited custom properties once, read by every dot/pill/bar/stat/column/badge.

   No authored z-index on a layer — every overlay goes through JS/alt/alt-layers.js; the few
   `z-index` declarations below are a token restatement and sticky table headers, not layers.
   Read alt-tokens.css and alt-components.css before adding anything here — `.a-btn`, `.a-chip`,
   `.a-input`, `.a-tabs`, `.a-card`, `.a-stat` and the rest are EXTENDED here, never redefined.
   alt-responsive.css loads after this file; its six breakpoints (≤1699/1499/1179/1023/820/639)
   are the only ones section 12 uses.

   `.a-okr-bar` named two things once — the objectives toolbar when paired with `.a-toolbar`,
   a progress track otherwise. The toolbar meaning had no caller anywhere in the repository
   (2026-10-01 dead-CSS pass) and is gone; `.a-okr-bar` is the progress track now, full stop.
   `.a-okr-view` (the context strip's "View" cluster, and `#altOkrView` as the workspace host)
   went the same way in the same pass — neither emitter ever shipped on this page. */


/* ================= 1 · THE STATUS COLOUR SYSTEM — DECLARED ONCE =================
   One mapping, inherited by everything: `okrTokenFor(status)` returns one of six stems, markup
   carries `st-<stem>`, and each stem sets three custom properties — `--okr-c` (the solid colour:
   fills, rules, dots, bar segments), `--okr-ct` (text colour, the measured `-text` variant,
   never the solid), `--okr-cs` (soft wash, contrast-checked against `--okr-ct`). Custom
   properties inherit, so one class on a container reaches every child without a selector per
   component — the alternative is the classic board's `.x.st-behind`/`.y.st-behind` triple per
   element, one more place to forget per status added. Anything rendering a GLYPH uses
   `--okr-ct`; anything rendering a SHAPE uses `--okr-c` — there is no third option, and colour
   never carries a status alone (the pill holds its label, the stat its caption, section 11
   prints everything in black on white). */
.alt-app .st-behind  { --okr-c:var(--okr-behind);   --okr-ct:var(--okr-behind-text);   --okr-cs:var(--okr-behind-soft); }
.alt-app .st-slightly{ --okr-c:var(--okr-slightly); --okr-ct:var(--okr-slightly-text); --okr-cs:var(--okr-slightly-soft); }
.alt-app .st-ontrack { --okr-c:var(--okr-ontrack);  --okr-ct:var(--okr-ontrack-text);  --okr-cs:var(--okr-ontrack-soft); }
.alt-app .st-ahead   { --okr-c:var(--okr-ahead);    --okr-ct:var(--okr-ahead-text);    --okr-cs:var(--okr-ahead-soft); }
.alt-app .st-done    { --okr-c:var(--okr-done);     --okr-ct:var(--okr-done-text);     --okr-cs:var(--okr-done-soft); }
.alt-app .st-idle    { --okr-c:var(--okr-idle);     --okr-ct:var(--okr-idle-text);     --okr-cs:var(--okr-idle-soft); }
/* `st-quiet` is deliberately NOT a seventh row in this pattern — copying the shape verbatim
   measured pixel-identical to `.st-idle` (same aliases, `--okr-idle-text`/`--okr-idle-soft`).
   Hollow rather than filled: `--okr-c` carries a real, measured-different colour for the border
   and dot; `--okr-cs` is `transparent` so the pill reads as an outline, not a sixth colour. */
.alt-app .st-quiet   { --okr-c:var(--okr-quiet);    --okr-ct:var(--okr-quiet);         --okr-cs:transparent; }
/* The fallback is per-declaration, not per-container — every `var(--okr-c, …)` below carries
   its own neutral. A container-level default was tried and is wrong: it breaks the places where
   the correct neutral is `transparent` (an unscored row's spine), which a container default
   cannot express. */


/* ================= 2 · THE SHARED ATOMS =================

   The dozen small things every surface on this page draws. Each is a shape plus the three
   status properties from section 1 — no component below re-states a colour. */

/* The tiny uppercase caption. Deliberately identical to `.a-field > span` from
   alt-components.css: a caption over a select and a caption over a figure are the same object,
   and drawing them 1px apart is how a page starts looking hand-assembled. */
.alt-app .a-okr-lbl{
  font:700 10px/1.4 var(--a-body); letter-spacing:.09em; text-transform:uppercase;
  color:var(--a-dim); white-space:nowrap; flex:0 0 auto;
}

/* A FIGURE IS A FIGURE IS A FIGURE. Tabular numerals so a column of percentages lines up on the
   decimal rather than dancing with the glyph widths, which is the difference between a table you
   can scan and one you have to read. */
.alt-app .a-okr-num{
  font-family:var(--a-mono); font-variant-numeric:tabular-nums; font-size:12px;
  color:var(--a-text); white-space:nowrap;
}

/* The health dot. 8px on an objective, 6px on a key result — a measure's verdict is subordinate
   to the objective's, and the size says so before the colour does. */
.alt-app .a-okr-dot{
  width:8px; height:8px; border-radius:50%; flex:0 0 auto; display:inline-block;
  background:var(--okr-c, var(--a-line-strong));
}
.alt-app .a-okr-dot.is-kr{ width:6px; height:6px; }

/* THE STATUS PILL — the outlined badge, wearing the wash its own text is measured against.
   `--okr-cs` under `--okr-ct` is a pairing CSS/tokens.css records a ratio for in both themes,
   which is why this component needs no light-mode override. */
.alt-app .a-okr-pill{
  display:inline-flex; align-items:center; gap:5px; min-height:20px; padding:1px 8px;
  border-radius:var(--a-r-pill); font:600 11px/1.4 var(--a-body); white-space:nowrap;
  border:1px solid var(--okr-c, var(--a-line-strong));
  background:var(--okr-cs, var(--a-raised));
  color:var(--okr-ct, var(--a-dim));
  max-width:100%; overflow:hidden; text-overflow:ellipsis;
}
/* THE DOT IS DRAWN ONLY IF THE MARKUP DID NOT DRAW ONE. The wireframes put a dot inside every
   status chip, but which agent's markup emits it varies by surface — and a pill with two dots
   reads as a rendering fault. `:has()` asks the question rather than guessing at it; where it is
   unsupported the selector is simply dropped and the pill keeps its word, which is the half that
   actually carries the meaning. */
.alt-app .a-okr-pill:not(:has(.a-okr-dot))::before{
  content:''; width:6px; height:6px; border-radius:50%; flex:0 0 auto;
  background:var(--okr-c, currentColor);
}

/* THE PROGRESS TRACK. The `:not(.a-toolbar)` qualifier is a leftover from a toolbar meaning
   `.a-okr-bar` no longer has (removed 2026-10-01, dead-CSS pass) — harmless since nothing pairs
   the two classes any more, left as-is rather than touched outside this pass's scope. */
.alt-app .a-okr-bar:not(.a-toolbar){
  height:6px; border-radius:3px; overflow:hidden; display:flex; min-width:0;
  background:var(--a-line-soft);
}
.alt-app .a-okr-bar:not(.a-toolbar) > i{
  display:block; height:100%; background:var(--okr-c, var(--a-blue-fill));
  transition:width var(--dur-progress, 420ms) var(--a-ease);
}

/* Owner: the avatar and the name, as one object, so a row can clip the name without orphaning
   the face. `min-width:0` on the flex child is load-bearing — without it the box is sized by its
   text and the ellipsis never happens. */
.alt-app .a-okr-av{
  display:inline-flex; align-items:center; gap:6px; min-width:0; max-width:100%;
  font-size:12px; color:var(--a-dim);
}
/* The initials chip is drawn separately from its container — `.a-okr-av` was doing double duty
   as the chip itself, rendering a 15×15 square with low-contrast text (measured 2.6:1 blue,
   1.83:1 red, the only failures on the page). Now round, sized, white — like ALT Tasks/Team. */
.alt-app .a-okr-av > .av{
  flex:0 0 auto; width:20px; height:20px; border-radius:var(--a-r-pill);
  display:inline-flex; align-items:center; justify-content:center;
  font:600 9px/1 var(--a-body); color:#fff; letter-spacing:.02em;
}
.alt-app .a-okr-av.sm > .av{ width:18px; height:18px; font-size:8px; }
.alt-app .a-okr-av > .nm{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.alt-app .a-okr-av > span{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.alt-app .a-okr-av .a-av{ flex:0 0 auto; }

/* The local empty state — a panel, a column or a group with nothing in it. `.a-empty` is the
   page-sized one; this is its inline sibling, quiet enough that six of them in a Kanban row do
   not read as an error. */
.alt-app .a-okr-empty{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px;
  padding:var(--a-4) var(--a-3); text-align:center;
  font-size:12px; line-height:1.55; color:var(--a-faint);
}

/* Square, not the task list's circle — this selects a row for bulk action and completes
   nothing; a circle reading as "done" is the fastest way to archive an objective by accident. */
.alt-app .a-okr-check{
  width:var(--a-okr-checkw, 16px); height:var(--a-okr-checkw, 16px);
  flex:0 0 auto; margin:0; cursor:pointer;
  accent-color:var(--a-blue-fill);
}
/* Only ever the control itself — putting the class on the surrounding <label> forces the whole
   row to this box's 16×16 size (measured: three two-line rows collapsed into one square). */
.alt-app label.a-okr-check,
.alt-app .a-check-l.a-okr-check{
  width:auto; height:auto; display:flex; align-items:flex-start; gap:var(--a-2);
  cursor:pointer;
}
.alt-app .a-okr-check:focus-visible{ outline:2px solid var(--a-ring); outline-offset:2px; }
/* `.a-input.sm`/`.a-select.sm` live in alt-components.css now, shared by every page that loads
   it — not restated here. The one thing still wrong on its own: `.a-search .a-input` and
   `.a-input.sm` are a same-file source-order tie, so this rule is three classes, always wins
   regardless of order, and is kept here as this page's own search-in-strip geometry. */
.alt-app .a-search .a-input.sm{ padding-left:28px; }

/* Which filters are on, visibly — a filter the reader can't see is one that silently narrows
   their data. Full width under the strip, read as a consequence of the row above. */
.alt-app .a-okr-chips{
  display:flex; align-items:center; flex-wrap:wrap; gap:6px; min-width:0;
  padding:var(--a-2) 0 0; border-top:1px solid var(--a-line-soft);
}
/* The clear affordance inside a chip. It is inside the chip's own button, so it needs no target
   of its own — but it does need to look like the thing that will happen. */
.alt-app .a-okr-chips .a-chip .x{
  margin-left:2px; font-size:10px; line-height:1; opacity:.7;
}
.alt-app .a-okr-chips .a-chip:hover .x{ opacity:1; }

/* ---- The filter chips — "Filter…" and "Clear filters", matching tasks.html's own pair ----
   `.n` duplicates alt-tasks.css:1311's `.a-btn .n` rule deliberately, not reused: that file
   belongs to another lane's exclusive ownership (Definition of Done rule 11), and okrs.html
   doesn't even load it. Two identical five-property badges cost less than a cross-lane edit;
   promote to alt-components.css if a third page ever wants it. */
#okrFiltersSummary .n,
#okrClearAll .n{ margin-left:5px; font:600 10px/1 var(--a-mono); opacity:.8; }

/* `#okrFiltersSummary` takes tasks.html's own quiet-pill face — owner request 2026-09-19:
   "after style the button just like tasks.html… having round corners and the filter icon."
   Mirrored, not reused: the rule that draws tasks.html's face belongs to another lane's
   exclusive file (Definition of Done rule 11), so the four declarations are restated here
   rather than widening that selector across pages. `color:var(--a-dim)` travels with the ground
   and so does the hover step — a face that agreed on two properties and disagreed on a third
   isn't tasks.html's face. `#okrFiltersSummary.on` below still wins unchanged: an id+class
   outranks a bare id regardless of source order. */
#okrFiltersSummary{
  background:transparent; border-color:var(--a-line-soft); border-radius:var(--a-r-pill);
  color:var(--a-dim);
}
#okrFiltersSummary:hover{
  background:var(--a-raised); color:var(--a-text); border-color:var(--a-line-strong);
}

/* `.on` lights "Filter…" whenever a filter is active — toggled from okrActiveFilterCount(), not
   from whether the popover is open (those are independent since the 2026-09-19 popover
   conversion). Same blue-soft wash as `.okr-ctx-clear` (CSS/okr-suite.css) — this board already
   has one "selected" language, reused rather than forked for one chip. An id, so it wins over
   that file's class rule regardless of load order. */
#okrFiltersSummary.on{
  border-color:var(--a-blue); color:var(--a-blue-text); background:var(--a-blue-soft);
}

/* The one property the popover conversion needed to change — outside-click dismissal (see
   okrs.html's own comment on `#okrFiltersPop`). Everything else about the surface is
   CSS/okr-suite.css's, unedited; only `position:absolute` assumed an ancestor (the retired
   `<details>`) that no longer exists. An id wins over that file's class regardless of load order. */
#okrFiltersPop{ position:fixed; }
.alt-app .a-okr-panel{
  display:flex; flex-direction:column; gap:var(--a-2); min-width:0;
  padding:var(--a-3); border-radius:var(--a-r-lg);
  background:var(--a-panel); border:1px solid var(--a-line-soft);
}

/* A WIDE TABLE SCROLLS IN ITS OWN BOX AND THE PAGE NEVER DOES. This is the container class every
   table on this page is wrapped in; without it a seven-column breakdown at 700px is 130px of
   horizontal scroll on the whole document, which is the most visible layout failure there is.
   `overscroll-behavior-x:contain` keeps a sideways trackpad flick inside the table rather than
   navigating the browser back. */
.alt-app .a-okr-tscroll{
  min-width:0; max-width:100%; overflow-x:auto; overscroll-behavior-x:contain;
  padding-bottom:2px;
}

/* THE TABLE. Written for a real `<table>`, because a data grid announced as a table is the whole
   reason a screen reader can say "row 4, column Progress" — a stack of divs cannot. The three
   `display:table-*` lines below are a safety net so a div-based rendering is still a grid rather
   than a pile, but a real table is the requirement. */
/* `min-width:max-content` replaces a magic number per breakpoint — `width:100%` inside a narrow
   panel does not scroll, it CRUSHES (measured: seven columns squeezed into 360px, "Completed"
   read as "Complet…"). Content width as the floor scrolls at any width, for any column count. */
.alt-app .a-okr-table{
  width:100%; min-width:max-content; border-collapse:collapse; font-size:12px;
}
.alt-app div.a-okr-table{ display:table; }
.alt-app div.a-okr-table .a-okr-tr{ display:table-row; }
.alt-app div.a-okr-table .a-okr-th,
.alt-app div.a-okr-table .a-okr-td{ display:table-cell; }
/* THE HEADER STICKS TO THE TOP OF ITS OWN SCROLLER, which is what makes a twenty-row breakdown
   readable without scrolling back up to remember which column is which. `z-index:1` is a
   stacking context over the rows it scrolls past — not a layer, and not something layers.js
   places. */
.alt-app .a-okr-th{
  position:sticky; top:0; z-index:1;
  padding:6px 10px; text-align:left; white-space:nowrap;
  font:700 10px/1.4 var(--a-body); letter-spacing:.08em; text-transform:uppercase;
  color:var(--a-dim); background:var(--a-panel);
  border-bottom:1px solid var(--a-line);
}
.alt-app .a-okr-th.num{ text-align:right; }
.alt-app .a-okr-tr{ border-bottom:1px solid var(--a-line-soft); }
.alt-app .a-okr-tr:last-child{ border-bottom:0; }
.alt-app .a-okr-tr:hover{ background:var(--a-raised); }
/* A ROW THAT IS A DESTINATION SAYS SO. Some breakdown rows navigate — press "Site Tech" and the
   objectives narrow to it — and a row that does nothing must not wear the same cursor. */
.alt-app .a-okr-tr[tabindex],
.alt-app .a-okr-tr[role="button"]{ cursor:pointer; }
.alt-app .a-okr-tr:focus-visible{ outline:2px solid var(--a-ring); outline-offset:-2px; }
/* THE TOTALS ROW IS PART OF THE TABLE, NOT A FOURTH COMPONENT. A rule above it and a heavier
   face is the whole difference; drawing it as a separate strip is how a total ends up disagreeing
   with the column it totals. */
.alt-app .a-okr-tr.total,
.alt-app .a-okr-table tfoot .a-okr-tr{
  border-top:1px solid var(--a-line); border-bottom:0; font-weight:600;
}
.alt-app .a-okr-tr.total:hover,
.alt-app .a-okr-table tfoot .a-okr-tr:hover{ background:transparent; }
.alt-app .a-okr-td{
  padding:7px 10px; color:var(--a-text); vertical-align:middle;
}
/* FIGURES RIGHT, TABULAR, AND ON THE STATUS COLOUR WHEN THE CELL CARRIES A STEM. A column of
   counts that is left-aligned cannot be compared down the page, which is the only reason the
   column exists. */
.alt-app .a-okr-td.num{
  text-align:right; font-family:var(--a-mono); font-variant-numeric:tabular-nums;
  white-space:nowrap; color:var(--okr-ct, var(--a-text));
}
/* A zero in a status column is information, and it is quiet information. */
.alt-app .a-okr-td.num.is-zero{ color:var(--a-faint); }
.alt-app .a-okr-td .a-okr-bar:not(.a-toolbar){ min-width:70px; }
/* RESOLVED 2026-10-01 (the open question the comment here used to leave standing): nothing in
   JS/ or any page emits the class `a-okr-list` -- its only mention anywhere in the runtime tree
   is a comment in okr-report-view.js. The six grid-width custom properties that block declared
   (`--a-okr-w-owner` through `-updated`) had exactly one reader, the `grid-template-columns`
   below, and that rule never painted them: `.a-okr-row` never appears without
   `okr-report-objrow` (okr-report-view.js's only emitter composes the two together), and
   CSS/okr-report-card.css's `.okr-report-objrow.a-okr-row` carries its OWN four-track
   `grid-template-columns` — same (0,2,0) specificity, loaded after this file, so it always wins
   the cascade. Measured at 1440px: a bare `.a-okr-row` with no sibling class computes this
   file's seven tracks; the real row, carrying both classes the way the DOM always does, computes
   the report's four. The seven-track grid has never been visible. Deleted, with the two
   responsive overrides that only ever fed it (formerly here at ≤1699px/≤1499px).

   `--a-okr-disc` and `--a-okr-checkw` are NOT part of that dead grid — they size `.a-okr-disc`
   (the report row's disclosure button, live) and `.a-okr-check` (the selection checkbox the
   export/import panes draw, also live), and `.a-okr-c-title`'s sub-line indent below reads both
   to stay under whichever controls are actually present. None of those three rules is nested
   inside `.a-okr-list`, so the pair moves to `.alt-app` itself — the one selector this page's
   body always matches — rather than staying homed on a selector nothing matches. One token
   pair, declared once, read by every consumer regardless of which row or dialog draws it. */
.alt-app{
  --a-okr-disc:22px;
  --a-okr-checkw:16px;
}
.alt-app .a-okr-row{
  display:grid; align-items:center; gap:var(--a-3); min-width:0;
}

/* THE GROUP. A heading, its own counts, and a body that folds. `.collapsed` hides the body rather
   than removing the group — the header keeps the counts, so a folded area still reports what is
   inside it and the reader is not folding information away blind. */
.alt-app .a-okr-group{
  display:flex; flex-direction:column; min-width:0;
  border-top:1px solid var(--a-line-soft);
}
.alt-app .a-okr-group:first-child{ border-top:0; }
.alt-app .a-okr-group.collapsed .a-okr-group-b{ display:none; }
.alt-app .a-okr-group-h{
  display:flex; align-items:center; gap:var(--a-2); min-width:0; width:100%;
  padding:9px var(--a-3); border:0; border-radius:var(--a-r-sm);
  background:transparent; color:var(--a-text); text-align:left; cursor:pointer;
  font:700 12px/1.4 var(--a-body);
}
.alt-app .a-okr-group-h:hover{ background:var(--a-raised); }
.alt-app .a-okr-group-h:focus-visible{ outline:2px solid var(--a-ring); outline-offset:-2px; }
/* The chevron turns rather than swapping glyph, so the two states are one object in two
   positions. `--a-quick` is zeroed for anybody who asked for less movement. */
.alt-app .a-okr-group-h .cv{
  display:flex; flex:0 0 auto; color:var(--a-faint);
  transition:transform var(--a-quick) var(--a-ease);
}
.alt-app .a-okr-group-h .cv > svg{ width:14px; height:14px; }
.alt-app .a-okr-group-h[aria-expanded="false"] .cv{ transform:rotate(-90deg); }
.alt-app .a-okr-group-h .nm{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
/* THE GROUP'S OWN SENTENCE — "9 in flight · 7 behind · 0 slightly behind · 0 on track". Quiet,
   pushed to the right, and it is the reason a folded group is still worth folding. */
.alt-app .a-okr-group-meta{
  display:flex; align-items:center; flex-wrap:wrap; gap:var(--a-2); min-width:0;
  margin-left:auto; font:500 11px/1.4 var(--a-body); color:var(--a-faint);
  font-variant-numeric:tabular-nums;
}
.alt-app .a-okr-group-meta > *{ flex:0 0 auto; }
.alt-app .a-okr-group-b{ display:flex; flex-direction:column; gap:2px; min-width:0; padding-bottom:var(--a-2); }

/* The row is dense by construction: a fixed minimum well under `--a-row`, one line of title,
   everything else in a fixed track so titles never end in different places. The left edge
   carries health as a 3px spine (zero width cost) — never the only signal; the status column
   two tracks over holds the word. */
.alt-app .a-okr-row{
  padding:6px var(--a-3); min-height:34px;
  border:1px solid transparent; border-left:3px solid var(--okr-c, transparent);
  border-radius:var(--a-r-sm); background:transparent; cursor:pointer;
  color:inherit; font:inherit; text-align:left; width:100%;
}
.alt-app .a-okr-row:hover{ background:var(--a-raised); border-color:var(--a-line-soft); border-left-color:var(--okr-c, var(--a-line)); }
.alt-app .a-okr-row:focus-visible{ outline:2px solid var(--a-ring); outline-offset:-2px; }
/* AN OBJECTIVE IS THE HEADLINE AND A KEY RESULT IS THE EVIDENCE. The objective is heavier and
   sits at the left margin; the measure is indented INSIDE ITS OWN CELL rather than by a different
   track count, which is what keeps every column below the header it belongs to. */
.alt-app .a-okr-row.is-obj{ min-height:38px; }
.alt-app .a-okr-row.is-obj .a-okr-t{ font-weight:600; }
.alt-app .a-okr-row.is-kr{ min-height:32px; }
.alt-app .a-okr-row.is-kr .a-okr-c-title{ padding-left:var(--a-6); }
.alt-app .a-okr-row.is-kr .a-okr-t{ font-size:12.5px; color:var(--a-dim); }
/* Selected for a bulk action, and open in the drawer, are two different states that can both be
   true. Selection is a ground; open is a spine and a border, so a selected-and-open row still
   reads as both. */
.alt-app .a-okr-row.sel{ background:var(--a-blue-soft); border-color:var(--a-blue); }
.alt-app .a-okr-row.open{ background:var(--a-raised); border-color:var(--a-line-strong); }
.alt-app .a-okr-row.open .a-okr-t{ color:var(--a-text); }

/* THE DISCLOSURE. Its own target inside the title cell, so pressing it opens the measures and
   pressing the title opens the objective — two jobs, two hit areas, no guessing. 26px is above
   the 24px floor the design system sets for a target. */
.alt-app .a-okr-disc{
  display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto;
  width:var(--a-okr-disc, 22px); height:var(--a-okr-disc, 22px);
  padding:0; border:0; border-radius:var(--a-r-sm);
  background:transparent; color:var(--a-faint); cursor:pointer;
  transition:transform var(--a-quick) var(--a-ease);
}
.alt-app .a-okr-disc:hover{ background:var(--a-panel); color:var(--a-text); }
.alt-app .a-okr-disc:focus-visible{ outline:2px solid var(--a-ring); outline-offset:1px; }
.alt-app .a-okr-disc > svg{ width:14px; height:14px; }
.alt-app .a-okr-disc[aria-expanded="false"]{ transform:rotate(-90deg); }
/* A ROW WITH NOTHING UNDER IT KEEPS THE SPACE BUT NOT THE CONTROL, so every title in the column
   starts on the same vertical line. A missing box shifts the text beside it and the list stops
   scanning. The list emits an empty `<span class="a-okr-disc">` for that slot; a span is not a
   button, so it must not answer a hover as though it were one. */
.alt-app span.a-okr-disc{ pointer-events:none; }
.alt-app .a-okr-disc.none{ visibility:hidden; pointer-events:none; }

/* THE TITLE CELL: disclosure, selection, dot, title, and an optional second line. One line by
   construction — `white-space:nowrap` on the title, not a hope that the content is short. */
.alt-app .a-okr-c-title{
  display:flex; align-items:center; flex-wrap:wrap; gap:1px var(--a-2); min-width:0;
}
/* `flex:1 1 0`, not `flex:1 1 auto` — a bug shipped once. A wrapping flex container breaks
   lines on each item's flex-BASIS, not its shrunk size; with `auto` a long title's full-width
   basis pushed it onto its own line, leaving a lone coloured dot. Zero basis has nothing to
   overflow with, so the title always stays on the control's line. */
.alt-app .a-okr-t{
  min-width:0; flex:1 1 0; font-size:13.5px; line-height:1.35; color:var(--a-text);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
/* THE SUB-LINE IS OPTIONAL AND IT IS ONE LINE. "Lena Ravenel · 2026 Q3 · 3 key results" is what
   separates two objectives with similar titles; a sub-line that can wrap is a list where no two
   rows are the same height, which is the defect that stops a list scanning. */
.alt-app .a-okr-sub{
  min-width:0; font-size:11px; line-height:1.4; color:var(--a-faint);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
/* A title that opens something is still a title — the drawer renders it as a real `<button>`
   (right element: a thing that opens a panel is a button, not a span+handler), but `.a-btn` is
   inline-flex and `text-overflow:ellipsis` doesn't apply to a flex container, so a long title
   pushed the health chip off the line. Blockifying restores the ellipsis and strips the chrome. */
.alt-app button.a-okr-t{
  display:block; height:auto; min-height:0; padding:0; text-align:left;
  background:none; border:0; border-radius:var(--a-r-sm);
  color:var(--a-text); font-family:var(--a-body); font-weight:500; cursor:pointer;
}
.alt-app button.a-okr-t:hover{ color:var(--a-blue-text); text-decoration:underline; }
.alt-app button.a-okr-t:focus-visible{ outline:2px solid var(--a-ring); outline-offset:2px; }

/* THE SUB-LINE TAKES A LINE OF ITS OWN, AND IT SAYS SO WHERE IT MEANS IT. `flex:1 1 100%` is
   what forces the break, and it is declared only on the two containers where the sub-line is a
   SECOND ROW of a horizontal line — the list's title cell and the drawer's measure headline. It
   is deliberately NOT on the base class: `.a-okr-sub` is also a direct child of `.a-okr-krrow`,
   which is a COLUMN, and a 100% basis there means 100% of the height. The controls stay on the
   title's line either way, which is where they belong — they act on the objective, not on its
   description. */
.alt-app .a-okr-c-title > .a-okr-sub,
.alt-app .a-okr-krrow-t > .a-okr-sub{ flex:1 1 100%; }
/* THE INDENT IS COMPUTED FROM THE CONTROLS THAT ARE ACTUALLY THERE, so the second line starts
   under the first line's TEXT rather than under its chevron. The two cases differ by exactly the
   selection box, which only an objective has, and `:has()` is what lets the stylesheet ask
   instead of guess. Both sums are built from the same custom properties the controls themselves
   are sized with, so the phone's larger targets move the indent with them and there is no
   literal to keep in step. */
.alt-app .a-okr-c-title > .a-okr-sub{
  padding-left:calc(var(--a-okr-disc, 22px) + 6px + var(--a-2) * 2);
}
.alt-app .a-okr-c-title:has(> .a-okr-check) > .a-okr-sub{
  padding-left:calc(var(--a-okr-checkw, 16px) + var(--a-okr-disc, 22px) + 8px + var(--a-2) * 3);
}
/* PROGRESS IS A BAR AND A NUMBER, IN THAT ORDER. The bar is the comparison down the column and
   the figure is the fact; the figure is fixed-width and tabular so the bars all end in the same
   place. An objective with no key results has no progress at all — the emitting code writes an
   em dash, and that must line up with the percentages above it. */
.alt-app .a-okr-c-progress{
  display:flex; align-items:center; gap:var(--a-2); min-width:0;
}
.alt-app .a-okr-c-progress .a-okr-bar:not(.a-toolbar){ flex:1 1 auto; min-width:44px; }
.alt-app .a-okr-c-progress .a-okr-num{ flex:0 0 40px; text-align:right; color:var(--a-text); }


/* ---------- THE CANONICAL PROGRESS CONTROL, IN A LIST CELL ----------
   The key-result row carries the SAME control the classic board uses — the product's promise
   (help/help-okrs.html) is "the progress bar is the control… there is no Edit dialog to go
   through." Two things measured to make it fit: the slider needed a 32px touch target (shipped
   at 16px), padded out without moving anything on screen; and the check-in prompt, inserted as a
   SIBLING of the bar, stretched the row ~200px and pushed rows below it mid-gesture — floated
   out of flow, it now appears under its own bar and the list stays still. */
.alt-app .a-okr-c-progress{ position:relative; }
.alt-app .a-okr-c-progress .okr-progress-row{ flex:1 1 auto; min-width:0; margin-top:0; }
.alt-app .a-okr-c-progress .okr-prog-num input{ width:62px; }
.alt-app .a-okr-c-progress .okr-progress-live{ padding:13px 0; margin:-13px 0; }
.alt-app .a-okr-c-progress .okr-checkin-prompt{
  position:absolute; top:calc(100% + 4px); right:0; z-index:2; width:min(300px, 80vw);
}
@media (max-width:820px){
  .alt-app .a-okr-c-progress{ flex:1 1 210px; min-width:200px; }
}

/* ---------- THE FLOW DIALOGS: TEMPLATES, IMPORT, EXPORT, PRINT, BULK ----------
   A flex item with `overflow:auto` has a min-content height of ZERO — not a detail, it is why
   whole sections of these dialogs were invisible (measured: a 389px table rendered in a 2px
   box). `flex:0 0 auto` on every direct child makes each section as tall as its contents, so the
   PANE is what scrolls. */
.alt-app .a-okr-flow-b > *{ flex:0 0 auto; }

/* The dialog is as tall as what it holds — `.a-modal`'s fixed height (alt-shell.css) is right
   for the settings dialog it was written for and wrong for a flow (measured: 300px of empty box
   under three template cards). A maximum keeps the cap and drops the padding. */
.alt-app .a-modal.a-okr-flow{ height:auto; max-height:min(760px, 88vh); }

/* THE SHARED BULK PANE'S OWN MARKUP. okr-bulk.js emits these classes and NO stylesheet in the
   repository has ever defined them — the classic page renders them undressed too. They are
   dressed here rather than in CSS/okr.css because this is the page that puts that pane in front
   of somebody: a list of twenty tick-rows with no spacing is a list nobody can scan. */
.alt-app .okr-bulk-tools{
  display:flex; align-items:center; flex-wrap:wrap; gap:var(--a-2);
  padding-bottom:var(--a-2); border-bottom:1px solid var(--a-line-soft);
}
.alt-app .okr-bulk-count{ font:600 12px/1 var(--a-body); color:var(--a-dim); }
.alt-app .okr-bulk-list{
  display:flex; flex-direction:column; gap:2px;
  max-height:min(46vh, 340px); overflow-y:auto; margin:var(--a-2) 0;
}
.alt-app .okr-bulk-list label{
  display:flex; align-items:flex-start; gap:var(--a-2);
  padding:6px var(--a-2); border-radius:var(--a-r-sm); cursor:pointer; min-height:32px;
}
.alt-app .okr-bulk-list label:hover{ background:var(--a-raised); }
.alt-app .okr-bulk-status{ font-size:12px; color:var(--a-dim); min-height:18px; }
.alt-app .okr-bulk-status.err{ color:var(--a-red); }
.alt-app .group-pick-main{ display:flex; flex-direction:column; gap:1px; min-width:0; }
.alt-app .group-pick-name{
  font:500 13px/1.4 var(--a-body); color:var(--a-text);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.alt-app .group-pick-sub{ font-size:11px; color:var(--a-faint); }

/* A measure in the drawer is a BLOCK, not a row — a wrapping flex row put the drag control and
   four buttons on the headline's own line and made every measure a different height. The row
   itself is not a control: it carries `data-kr-row` and holds several; a `cursor:pointer` here
   would promise a click the block doesn't answer. */
.alt-app .a-okr-krlist{ display:flex; flex-direction:column; gap:var(--a-2); min-width:0; }
.alt-app .a-okr-krrow{
  display:flex; flex-direction:column; align-items:stretch; gap:6px; min-width:0; width:100%;
  padding:9px var(--a-3); border-radius:var(--a-r-sm);
  border:1px solid var(--a-line-soft); border-left:3px solid var(--okr-c, var(--a-line-strong));
  background:var(--a-panel); color:inherit; text-align:left;
}
.alt-app .a-okr-krrow:focus-within{ border-color:var(--a-line-strong); border-left-color:var(--okr-c, var(--a-line-strong)); }
/* The headline: dot, title, health, and the trend pushed to the far end by `.a-spacer`. */
.alt-app .a-okr-krrow-t{
  display:flex; align-items:center; flex-wrap:wrap; gap:6px var(--a-2); min-width:0;
}
/* Everything on this line holds its size except the title, which is the one thing that should
   give — `flex:0 0 auto` on the rest is right for the dot/chip/trend and catastrophic for the
   title (a long name pushed its chip to a second line and ran past the edge). Zero basis on the
   title means it can never overflow; source order settles the specificity tie. */
.alt-app .a-okr-krrow-t > *{ flex:0 0 auto; }
.alt-app .a-okr-krrow-t > .a-okr-t{ flex:1 1 0; min-width:0; }
.alt-app .a-okr-krrow-t .a-spacer{ flex:1 1 auto; min-width:0; }
/* The facts line WRAPS — five labelled facts, three lines long at 390px. Clipping it to one
   would hide the pace, which explains the health chip above it. The list's sub-line is the
   opposite case and stays on one line, where every row must be the same height. */
.alt-app .a-okr-krrow > .a-okr-sub{
  flex:0 0 auto; white-space:normal; overflow:visible; line-height:1.55;
}
.alt-app .a-okr-krrow > .a-okr-bar:not(.a-toolbar){ min-width:60px; }


/* ================= 9 · FLOWS, TEMPLATES, IMPORT/EXPORT AND SETTINGS =================

   THE MULTI-STEP SURFACES. Each is hosted inside the shared modal, so the frame, the elevation
   and the dismissal are already drawn by alt-shell.css; what follows is only the inside. */
.alt-app .a-okr-flow{
  display:flex; flex-direction:column; min-width:0; min-height:0; gap:0; flex:1 1 auto;
}
.alt-app .a-okr-flow-h{
  flex:0 0 auto; display:flex; align-items:center; gap:var(--a-2); flex-wrap:wrap; min-width:0;
  padding:var(--a-3) var(--a-4); border-bottom:1px solid var(--a-line);
  font:700 15px/1.3 var(--a-display); color:var(--a-text);
}
.alt-app .a-okr-flow-h .a-spacer{ flex:1 1 auto; }
.alt-app .a-okr-flow-b{
  flex:1 1 auto; min-height:0; min-width:0; overflow-y:auto; overflow-x:hidden;
  display:flex; flex-direction:column; gap:var(--a-4); padding:var(--a-4);
}
/* Sticky for the same reason the drawer's footer is: on a short window the flow's body scrolls
   and "Upload & preview" must not be a screen below the fold of the thing it acts on. */
.alt-app .a-okr-flow-f{
  flex:0 0 auto; position:sticky; bottom:0;
  display:flex; align-items:center; flex-wrap:wrap; gap:var(--a-2); min-width:0;
  padding:var(--a-3) var(--a-4);
  padding-bottom:calc(var(--a-3) + env(safe-area-inset-bottom, 0px));
  background:var(--a-raised); border-top:1px solid var(--a-line);
}
.alt-app .a-okr-flow-f .a-spacer{ flex:1 1 auto; }

/* THE DROP ZONE. Dashed because it accepts something; it is also a real control, so it has a
   focus ring and a keyboard path — a drop target that can only be reached by dragging is a
   feature a keyboard user does not have. */
.alt-app .a-okr-drop{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:var(--a-2);
  min-height:150px; padding:var(--a-5); text-align:center;
  border:2px dashed var(--a-line); border-radius:var(--a-r-lg);
  background:var(--a-panel); color:var(--a-dim); font-size:13px; line-height:1.55;
  transition:border-color var(--a-quick) var(--a-ease), background var(--a-quick) var(--a-ease);
}
.alt-app .a-okr-drop:focus-visible{ outline:2px solid var(--a-ring); outline-offset:2px; }
.alt-app .a-okr-drop.over,
.alt-app .a-okr-drop.dragover{ border-color:var(--a-blue); background:var(--a-blue-soft); color:var(--a-blue-text); }
.alt-app .a-okr-drop small{ font-size:11px; color:var(--a-faint); }

/* COLUMN MAPPING. One row per source column: what the file called it, and what it becomes. Two
   fixed tracks and a middle that gives, so the selects all line up down the page. */
.alt-app .a-okr-map{ display:flex; flex-direction:column; gap:6px; min-width:0; }
.alt-app .a-okr-maprow{
  display:grid; align-items:center; gap:var(--a-2); min-width:0;
  grid-template-columns:minmax(0,1fr) 18px minmax(0,1fr);
  padding:6px var(--a-2); border-radius:var(--a-r-sm);
  border:1px solid var(--a-line-soft); background:var(--a-panel);
  font-size:12px;
}
.alt-app .a-okr-maprow > .src{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--a-dim); }
.alt-app .a-okr-maprow > .arw{ color:var(--a-faint); text-align:center; }
/* A column the mapper could not place is not an error, it is a decision waiting — amber, because
   nothing is wrong yet and red would say something is. */
.alt-app .a-okr-maprow.unmapped{ border-color:var(--a-amber); background:var(--a-amber-soft); }
.alt-app .a-okr-maprow.invalid{ border-color:var(--a-red); background:var(--a-red-soft); }

/* THE IMPORT PREVIEW. It is the widest thing in this application and it scrolls in its own box —
   the same rule as every other table here, and the same reason. */
.alt-app .a-okr-preview{
  min-width:0; max-width:100%; max-height:46vh;
  overflow:auto; overscroll-behavior:contain;
  border:1px solid var(--a-line-soft); border-radius:var(--a-r);
}
.alt-app .a-okr-preview .a-okr-table{ font-size:11.5px; }
.alt-app .a-okr-preview .a-okr-td{ padding:5px 8px; white-space:nowrap; }


/* ================= 11 · PRINT =================
   A printed OKR review is a document, not a screenshot — everything that is chrome comes off,
   what's left is black on white. Status survives in WORDS: a health carried only by colour
   doesn't survive a monochrome printer or a colour-vision deficiency, so every pill prints as an
   outlined box with its own label — which means the markup must emit the status word inside the
   pill, not a bare dot. `print-color-adjust:exact` is only on the bars, since a magnitude is
   worth keeping in colour where a category is more legible in black. */
@media print{
  .alt-app .a-top,
  .alt-app .a-status,
  .alt-app .a-scrim,
  .alt-app .a-okr-chips,
  .alt-app .a-okr-print .a-btn,
  .alt-app .a-okr-print .a-okr-check,
  .alt-app .a-okr-print .a-okr-disc,
  .alt-app .a-okr-print .a-okr-tscroll::-webkit-scrollbar{ display:none; }

  .alt-app,
  .alt-app .a-page,
  .alt-app .a-main,
  .alt-app .a-centre{
    height:auto; max-height:none; overflow:visible; display:block;
    background:#fff; color:#000;
  }
  .alt-app .a-okr-print{
    display:block; background:#fff; color:#000;
    font-family:var(--a-body); font-size:11pt; line-height:1.4;
  }
  /* AN OBJECTIVE AND ITS MEASURES ARE ONE THING, so they do not break across a page. */
  .alt-app .a-okr-print .a-okr-group,
  .alt-app .a-okr-print .a-okr-row.is-obj,
  .alt-app .a-okr-print .a-okr-krrow{ break-inside:avoid; page-break-inside:avoid; }
  .alt-app .a-okr-print .a-okr-group-h{ break-after:avoid; page-break-after:avoid; }

  .alt-app .a-okr-print .a-okr-row,
  .alt-app .a-okr-print .a-okr-krrow,
  .alt-app .a-okr-print .a-okr-tr{
    border-color:#999; border-left-color:#999; background:#fff; color:#000;
  }
  .alt-app .a-okr-print .a-okr-t,
  .alt-app .a-okr-print .a-okr-td,
  .alt-app .a-okr-print .a-okr-num{ color:#000; }
  .alt-app .a-okr-print .a-okr-sub,
  .alt-app .a-okr-print .a-okr-lbl,
  .alt-app .a-okr-print .a-okr-th{ color:#333; background:#fff; }
  /* THE WORD, IN A BOX. No wash — a 16%-alpha tint prints as a grey smear that makes the label
     harder to read, which is the opposite of what it is here for. */
  .alt-app .a-okr-print .a-okr-pill{
    background:#fff; color:#000; border:1px solid #000;
    -webkit-print-color-adjust:exact; print-color-adjust:exact;
  }
  .alt-app .a-okr-print .a-okr-pill::before{ display:none; }
  /* The dot alone means nothing on paper, so it is drawn as an outline the caption sits beside
     rather than as a filled disc that reads as a printing artefact. */
  .alt-app .a-okr-print .a-okr-dot{ background:#fff; border:1px solid #000; }
  .alt-app .a-okr-print .a-okr-bar:not(.a-toolbar){
    border:1px solid #000; background:#fff;
    -webkit-print-color-adjust:exact; print-color-adjust:exact;
  }
  .alt-app .a-okr-print .a-okr-bar:not(.a-toolbar) > i{
    -webkit-print-color-adjust:exact; print-color-adjust:exact;
  }
  /* The board and tables stop scrolling and start wrapping — a scroll container prints only its
     visible slice, the most common way a printed report loses half its data. */
  .alt-app .a-okr-print .a-okr-tscroll,
  .alt-app .a-okr-print .a-okr-preview{ overflow:visible; max-height:none; }
  .alt-app .a-okr-print .a-okr-panel{
    background:#fff; border:1px solid #000; break-inside:avoid; page-break-inside:avoid;
  }
  /* The sticky headers un-stick: on paper "sticky" means the header prints once, at the top of
     page one, and every following page is unlabelled columns. */
  .alt-app .a-okr-print .a-okr-th{ position:static; background:#fff; }
  /* The chart's strokes are inline `style` (`stroke:var(--a-blue)`), which no stylesheet rule
     can override without `!important` — redefining the two TOKENS inside the printable view
     reaches them through the cascade instead, for everything else in there at the same time. */
  .alt-app .a-okr-print{ --a-blue:#000; --a-blue-text:#000; --a-blue-fill:#000; --a-dim:#555; }
}


/* ================= 12 · RESPONSIVE =================
   The same six breakpoints alt-responsive.css uses, and no seventh — that file settles the
   shell at every width; a breakpoint invented here would be a second responsive story for one
   page. The rule at every width: no horizontal page scroll, 1920 down to 320 — wide content
   scrolls inside its own box. */


/* ---------- ≤1179: the tightest the seven-column list goes ----------
   Below this the tracks would be narrower than their own content and the ellipsis would be doing
   all the work, so ≤1023 stacks instead.

   THE TWO-ROW GRID THIS COMMENT USED TO DESCRIBE IS GONE, for the same reason the base rule's
   seven tracks went (see above `.alt-app .a-okr-row`'s own comment): it read the same six
   `--a-okr-w-*` tokens, those tokens no longer exist, and the override never painted the real
   row anyway — CSS/okr-report-card.css's `.okr-report-objrow.a-okr-row` ties this file's
   specificity and loads after it, so its own four-track grid always won at this width too.
   `row-gap` and the two sibling rules below are NOT part of that dead `grid-template-columns` —
   each is a property the later file never declares, so each still reaches the real row
   untouched by which grid-template-columns wins. Keeping them is what "live declarations only"
   means one level down from the base rule. */
@media (max-width:1179px){
  .alt-app .a-okr-row{ row-gap:3px; }
  .alt-app .a-okr-c-title{ grid-column:1 / -1; }
  .alt-app .a-okr-c-progress{ min-width:90px; }
}


/* ---------- ≤820: tablet portrait. The list stops being a grid ----------
   Seven tracks in 780px is seven ellipses — the row becomes a wrapping flex box: title on its
   own line, facts follow in the wireframe's mobile order (health, progress, owner, area,
   updated); nothing is dropped. The header goes with the grid it named; every remaining cell is
   self-describing (a labelled pill, a percentage, a face and name, a chip, a phrase). */
@media (max-width:820px){
  .alt-app .a-okr-row{
    display:flex; flex-wrap:wrap; align-items:center; gap:6px var(--a-2);
    padding:8px var(--a-2); min-height:var(--a-row);
  }
  .alt-app .a-okr-c-title{ flex:1 1 100%; }
  .alt-app .a-okr-c-progress{ flex:1 1 130px; min-width:110px; }
  .alt-app .a-okr-row.is-kr .a-okr-c-title{ padding-left:var(--a-5); }
}

/* ---------- ≤639: phone ----------
   alt-responsive.css raises `--a-row` to 48px and the control heights to 34/38 here, so a list
   row inherits its 48px minimum from the token rather than from a number repeated in this file.
   Everything below is what that token cannot say on its own. */
@media (max-width:639px){

  /* THE ROW KEEPS THE PHONE'S TARGET HEIGHT, which is `--a-row` — 48px here, set by the token.
     Restating 48 as a literal would be a second answer to a question already answered. */
  .alt-app .a-okr-row{ min-height:var(--a-row); padding:9px var(--a-2); }
  .alt-app .a-okr-row.is-obj,
  .alt-app .a-okr-row.is-kr{ min-height:var(--a-row); }
  .alt-app .a-okr-row.is-kr .a-okr-c-title{ padding-left:var(--a-4); }
  .alt-app .a-okr-t{ font-size:14px; }
  /* TAP TARGETS. The disclosure is a 22px control, fine with a mouse and a coin toss with a
     thumb; 32px is this experience's phone floor, raised through the one token every reader of
     it already shares (see the token's own declaration above `.a-okr-row`) — wherever
     `.a-okr-disc` is actually drawn at this width (today, only the report row's own toggle), it
     grows with no second declaration to keep in step. THE SUB-LINE'S INDENT MOVES WITH IT, for
     the same reason: `.a-okr-c-title > .a-okr-sub`'s `padding-left` above reads this same
     custom property, so the second line stays under the title instead of drifting left of it
     the moment the control beside it grows.

     `--a-okr-checkw` is DELIBERATELY NOT RAISED to a target size here, and that is not an
     oversight — measured, not assumed. `.a-okr-check` is never drawn bare: every emitter wraps
     it in `<label class="a-check-l">`, and CSS/alt/alt-responsive.css already carries the
     Suite's one answer for that component — "a checkbox's own box is 13px in every browser;
     the LABEL is the target" — sizing the box itself a flat 18px and giving `.a-check-l` a
     32px `min-height` so the real target is the row, not the box. That rule's selector,
     `.a-check-l input[type="checkbox"]`, outranks `.alt-app .a-okr-check` on specificity
     (two classes plus an attribute beats two classes) regardless of which stylesheet loads
     second, so a bigger box declared here would never paint — confirmed live at 390px: the
     box measures 18×18 with this token still at 16px. Matching the token to 18px (rather than
     inventing a third number, 20, that nothing would ever render) keeps it truthful for its
     one other reader, `.a-okr-c-title:has(> .a-okr-check) > .a-okr-sub`'s padding calc, should
     that selector ever start matching real markup — see that rule's own comment. Flagged back:
     the product's cross-page checkbox convention already exceeds the 20px this page's own
     history asked for (32px of real target via the label, not 20px of box), so there is
     nothing to raise. */
  .alt-app{ --a-okr-disc:32px; --a-okr-checkw:18px; }
  .alt-app .a-okr-group-h{ min-height:40px; }
  .alt-app .a-okr-krrow{ min-height:40px; }
  .alt-app .a-okr-pill{ min-height:24px; }
  .alt-app .a-okr-chips .a-chip{ min-height:28px; }
  .alt-app .a-okr-maprow{ grid-template-columns:minmax(0,1fr); gap:4px; }
  .alt-app .a-okr-maprow > .arw{ text-align:left; }
  .alt-app .a-okr-flow-b{ padding:var(--a-3); gap:var(--a-3); }
  .alt-app .a-okr-flow-h,
  .alt-app .a-okr-flow-f{ padding:var(--a-2) var(--a-3); }
  .alt-app .a-okr-drop{ min-height:120px; padding:var(--a-4); }
}

/* ================= MOTION: THE MICRO RESPONSE =================
   This page already had the TRAVEL (bars fill on `--dur-progress`, the ring sweeps, chevrons
   turn on `--a-quick`) but not the RESPONSE — the other half of the classic vocabulary,
   `--dur-micro` (140ms, linear, sys_design-system.md §2b), for sixteen hover rules including the
   six status tiles that are the board's main filter. `--a-quick` stays where it already was;
   declarations below only add colour/background transitions, never restate travel. Deliberately
   excluded: `box-shadow` (an easing ring on six tiles is paint the compositor can't skip) and
   every layout property (a column's width IS the board's layout — sys_design-system.md, "what a
   disclosure may NOT animate"). Reduced motion answers at the token: alt-tokens.css zeroes
   `--dur-micro` on `.alt-app`, which is this page's own `<body>`. */
.alt-app .a-okr-row,
.alt-app button.a-okr-t,
.alt-app .a-okr-tr,
.alt-app .a-okr-group-h,
.alt-app .a-okr-check,
.alt-app .okr-bulk-list label,
.alt-app .a-okr-chips .a-chip .x{
  transition:background-color var(--dur-micro, 140ms) linear,
             border-color     var(--dur-micro, 140ms) linear,
             color            var(--dur-micro, 140ms) linear,
             opacity          var(--dur-micro, 140ms) linear;
}
/* Both halves, on one control — rotation is the disclosure's travel (`--a-quick`), ground and
   glyph colour are the hover (`--dur-micro`); restated together since a bare `transition` would
   replace the rule above rather than add to it. */
.alt-app .a-okr-disc{
  transition:transform        var(--a-quick) var(--a-ease),
             background-color var(--dur-micro, 140ms) linear,
             color            var(--dur-micro, 140ms) linear;
}