/* ================= THE ALTERNATE UX — RESPONSIVE =================
   Four deliberate shapes, not one shape shrunk — at every width the WORK keeps the space and
   the two rails become things you open, not things you squeeze.
     >=1500 three columns, both rails open    >=1180 three columns, tighter rails
     >= 900 two columns, utility rail drawer  >= 640 one column, details drawer, nav icons-only
     < 640  one column, phone chrome: compact bar, full-height sheets, bigger targets */

/* The bar gives in the order the shell states it must, before it runs out — measured at 1600px
   with everything shown: brand 68 + nav 762 + search 274 + identity 526, ~60px over budget.
   Captions and the account name go first (least load-bearing text), then nav labels, secondary
   first. */
@media (max-width:1699px){
  /* `.a-focus-l b` COMES BACK below 640px — see the phone block at the bottom of this file for
     why, and note that it depends on that block staying BELOW this one in source order. */
  .a-today-l b,.a-focus-l b{ display:none; }
  /* `.a-account .nm` has no name to cap any more — the control is avatar-only, named via the
     button's `title`/`aria-label`, which is why the hides below are accessibility-safe. */
  /* Messages keeps its icon, loses its word (it opens a panel, not a destination hunted by
     name); My Work is a menu of things already in the bar. Analytics' selector is gone, not
     hidden — a dead `[data-nav]` rule reads like a control that still exists. */
  .a-nav [data-nav="messages"] span,
  .a-nav [data-nav="mywork"] span{ display:none; }
}
@media (max-width:1499px){
  .alt-app{ --a-left:300px; --a-right:280px; }
  /* Then Team and OKRs, which are the two the reader leaves this app for. Tasks, Notes and
     Calendar — the three pages of this experience — keep their words longest. */
  .a-nav [data-nav="team"] span,.a-nav [data-nav="okrs"] span{ display:none; }
}
/* Drop to icons at 1365, not 1179 — measured on the real bar with 7 nav entries: at 1366 the
   nav needs 437px (icons take it to 294px), so this is the point past which the nav would
   start clipping. The rail widths below stay a separate question at 1179. These breakpoints
   are conservative (icons a little earlier than strictly needed) rather than wrong — tightening
   1365 further is a separate, validated change, not bundled here. */
@media (max-width:1365px){
  .a-nav a span,.a-nav button span{ display:none; }
  .a-nav a,.a-nav button{ padding:0 9px; }
}
/* The search-always-second-row rule lives in CSS/alt/alt-shell.css now (`.a-top`/`.a-top-search`
   base rules) — it became an unconditional style, not a responsive adjustment, so it moved to
   the file that owns those classes' definitions. */

/* AN INLINE-AT-LOW-RES VARIANT WAS INVESTIGATED AND DECLINED. PRODUCT OWNER (original): "Always
   keep the universal search in the second row." PRODUCT OWNER (on the later ask): "Only at low
   resolution — keep row 2 when wide."
   Why CSS alone cannot do it: `.a-top-search` sits AFTER `.a-top-right` (the identity cluster,
   ~576-584px) in DOM order, and flex-wrap packs lines strictly in DOM order — once an item is
   assigned a line, items after it are measured against what's left on THAT line, never an
   earlier roomier one. `.a-top-right`'s `margin-left:auto` resolves AFTER line-packing, so the
   gap it creates is invisible to the wrap decision. Measured across the full range (390-1920px,
   tasks/notes/team_board): slack never reaches either required floor (~562px above 1179px,
   380px at/below it) — the rule would compile clean and change nothing observable.
   Reordering the field with `order` was proven to work layout-wise but was rejected too: it
   would separate visual order from DOM/tab order, reopening (in reverse) the exact defect
   JS/alt/alt-shell.js:1308 already fixed by moving the field's markup last.
   `search-second-row.test.js`'s byte-for-byte pins on `.a-top-search`/`.a-top-row2` are
   load-bearing for this decision and stay untouched on purpose. */
@media (max-width:1179px){
  .alt-app{ --a-left:280px; --a-right:264px; }
}

/* ---------- the rails become drawers ---------- */
@media (max-width:1023px){
  .a-main{ grid-template-columns:minmax(0,1fr) !important; }
  /* The top bar's wrap is declared once at 1179 now (not here) — the reason this band still
     matters: a horizontal scrollbar on the whole document is the worst layout failure, in
     exactly the band a small laptop or split-screen window sits in. */
  .a-dock-close{ align-self:flex-end; }
  .a-docked-only{ display:inline-flex !important; }
}
@media (min-width:1024px){
  .a-docked-only{ display:none !important; }
  .a-dock-close{ display:none !important; }
}
/* ---------- tablet portrait and below ---------- */
@media (max-width:820px){
  .a-nav{ overflow-x:auto; scrollbar-width:none; }
  .a-nav::-webkit-scrollbar{ display:none; }
  .a-band,.a-main,.a-quick{ padding-left:var(--a-3); padding-right:var(--a-3); }
  .a-analytics{ gap:var(--a-2); }
  .a-stats{ flex-wrap:wrap; }
  .a-stat{ min-width:calc(50% - var(--a-2)); flex:1 1 calc(50% - var(--a-2)); }
  .a-quicklinks{ max-width:none; flex:1 1 100%; }
  .a-two,.a-three{ grid-template-columns:1fr; }
  .a-week{ grid-template-columns:repeat(3,minmax(160px,1fr)); overflow-x:auto; }
}

/* ================= THE 24px POINTER FLOOR — AT EVERY WIDTH =================
   Outside any media query on purpose: sys_design-system.md §18 sets 24px as the floor
   EVERYWHERE, not just on the phone (44x44 is mobile.html's own, separate, rule) — a small
   control was never a phone-only problem. One block, one place: loads after every CSS/alt/
   component sheet (only alt-focus.css follows it), so it can raise targets without editing the
   files that own their looks.
   Two techniques: (a) GROW THE BOX where it's free to grow (the row already has slack below the
   control); (b) GROW ONLY THE HIT AREA via a transparent `::after` where the drawing itself is
   load-bearing and must not get bigger. Not touched here: the splitters (`.a-grip`/`.a-w-grip`)
   need their own pass with the drag geometry re-measured. The phone block below still wins
   where it goes further (32px) — that's an addition on top of this floor, not a substitute. */

/* ---------- (a) the box grows, because nothing is above it ---------- */
/* These four sit in fixed tracks beside a 45px `.a-row-main`, top-aligned, so extra height
   falls into already-empty column space (measured: `.a-row` is 61px before and after at
   1440/1024/768, 71px at 390). The star needs `flex-basis` AND `min-width` — `min-width:auto`'s
   automatic floor was the only reason it measured 32px before; both sides now state 24/32
   explicitly rather than relying on that default. */
.a-star{ flex-basis:24px; min-height:24px; }
/* `.a-more` is 26px wide only as a flex item — on a note card (no flex parent) it measured
   23x19. A min-width covers the non-flex case without touching the flex one (24 < 26). */
.a-more{ min-width:24px; min-height:24px; }
button.a-row-due{ min-height:24px; }
.a-note-line{ height:auto; min-height:24px; }
.a-dist-more{ min-height:24px; }
/* A chip is only a target when it's pressable — `.a-chip` is also a read-only label (a tag, a
   count), so only the BUTTON gets the floor; raising every chip would inflate read-only pills
   for no accessibility gain. */
button.a-chip{ height:auto; min-height:24px; }
/* The label IS the target — a checkbox's own box is 13px in every browser and cannot be the
   thing a person aims at. Declared here rather than in alt-shell.css, which this sheet does not
   own; the phone block below still takes it to 32. */
.a-check-l{ min-height:24px; }
/* The per-day "+" was 23px — one pixel under, which is exactly the kind of miss an estimate
   makes and a measurement does not. */
.a-cal-add{ min-height:24px; }
.a-cal-more{ min-height:24px; }

/* ---------- (b) the hit area grows, the drawing does not ---------- */
/* The check is a 19px circle and stays one — the pseudo-element is 24x24, centred, transparent,
   part of the button, so `elementFromPoint` at every edge of the 24px box answers `.a-check`. */
.a-check{ position:relative; }
.a-check::after{
  content:''; position:absolute; top:50%; left:50%; width:24px; height:24px;
  transform:translate(-50%,-50%);
}
/* The widget disclosure header may be 24px tall, the 14px chevron may not — vertical-only band,
   bounded by `left:0;right:0` so it never reaches the drag handle or overflow beside it. Costs
   nothing: a `min-height` here would have grown the rail by 50px over five cards at 1440. */
.a-w-fold{ position:relative; }
.a-w-fold::after{
  content:''; position:absolute; left:0; right:0; top:50%; height:24px; transform:translateY(-50%);
}
/* The task title is the one control whose column sets the row height — a `min-height` here
   would cost real space (67 rows × 4px on the densest surface). Its own `overflow:hidden`
   would clip a pseudo-element of its own, so the containing block moves one level out to
   `.a-row-main`, whose ancestor status escapes that clip. */
.a-row-main{ position:relative; }
.a-row-main > button.a-row-t::after{
  content:''; position:absolute; left:0; right:0; top:-2px; height:24px;
}
/* `.a-group-more` is drawn by alt-notes.css, which this sheet does not own. An 18px overflow on a
   note group row, on the one page where the alternative is a hover-only drag handle. */
.a-group-more{ position:relative; }
.a-group-more::after{
  content:''; position:absolute; top:50%; left:50%; width:24px; height:24px;
  transform:translate(-50%,-50%);
}
/* Minimalist's row drag handle (alt-minimal.css) is a 16x14 drawing, deliberately subtle next
   to a 32px row's title — so it owns no size here, only the target. Measured:
   `elementFromPoint` at the edges of a 24px box missed the drawing before this rule existed.
   No clipping ancestor between it and `.a-row`, so it needs no containing-block trick. */
.a-minimal-row-grab{ position:relative; }
.a-minimal-row-grab::after{
  content:''; position:absolute; top:50%; left:50%; width:24px; height:24px;
  transform:translate(-50%,-50%);
}

/* ---------- the identity corner gives way in a fixed order ----------
   [S] STRIDE | [team mark] Team name → [S] STRIDE | [team mark] → [S] | [team mark]
   The product survives the team name, and the mark survives the word — dropping STRIDE first
   while keeping the team name would put the bar back in the ambiguity the split exists to
   remove. The team's mark is never dropped, at any width. All of this goes before any
   navigation destination does — order of sacrifice is stated in sys_branding.md. */
@media (max-width:1099px){
  .a-team-name{ display:none; }
}
@media (max-width:839px){
  .a-brand b{ display:none; }
}

/* ---------- phone ---------- */
@media (max-width:639px){
  .alt-app{ --a-row:48px; --a-ctl:34px; --a-ctl-lg:38px; }
  /* `.a-brand b` is already hidden from 839px up; restated here so this block reads as the
     complete phone picture on its own. */
  .a-brand b{ display:none; }
  .a-team{ margin-left:7px; padding-left:8px; }
  /* Today folds to its ring; Focus keeps its whole two-line readout, caption and all.
     PRODUCT OWNER'S CONTRACT: the control must stay IDENTIFIABLE and OPERABLE at every
     supported width — it may compact to a canonical icon, but never degrade to an unlabelled
     chevron. Focus has no glyph of its own (unlike Create's plus, Today's ring, the AI pill's
     dot), so folding its text would leave a bare chevron — identifiable to nobody. The width is
     bounded without a new rule: `.a-focus{max-width:210px}` plus the 150px ellipsis on
     `.a-focus-l span` (both alt-shell.css) cap it at ~193px inside a ~285px box at 320px.
     `.a-today-l` is a different control, left alone — hiding its label still leaves `.a-ring`,
     a 34px progress ring with a visible percentage, so Today compacts to icon+readout, which
     the contract permits. */
  .a-today-l{ display:none; }
  /* This beats the 1699px block's `.a-focus-l b{display:none}` on SOURCE ORDER alone — same
     specificity, later block. If these two blocks were ever reordered the caption would
     silently vanish again; shell-identity.test.js resolves the cascade rather than grepping
     for either rule, for exactly that reason. */
  .a-focus-l b{ display:block; }
  .a-today,.a-focus{ padding:0 8px; }
  /* `.a-account .nm{display:none}` is gone with the span it hid — worth knowing why it mattered:
     it once left the account button with accessible name "" on every suite page, because the
     label lived only in that text node. */
  /* The cluster wraps — its six children are all `flex:0 0 auto` to keep identity in the
     corner at every width the bar is one row, which added to 312px inside a 285px box at 320px.
     `.a-top{flex-wrap:wrap}` restating here is dead: the base rule (alt-shell.css) already sets
     it unconditionally. */
  .a-top-right{ margin-left:0; flex:1 1 100%; flex-wrap:wrap; gap:6px; justify-content:flex-start; }
  /* Create keeps its icon and loses its word — it is the blue button, which is identification
     enough, and its aria-label carries the name. */
  .a-top-right #altCreateBtn{ font-size:0; gap:0; padding:0 9px; }
  .a-top-right #altCreateBtn svg{ width:17px; height:17px; }
  .a-top-right #altCreateBtn svg:last-child{ display:none; }
  /* ---------- THE `Focused` TOGGLE FOLDS TO ITS RETICLE ----------
     Same contract as `.a-focus-l` above, opposite outcome: this button HAS a glyph
     (`altIcon('focusReticle')`, shared by its three hosts — #altFocusedBtn, #altNoteFocusToggle,
     #altTeamFocusedBtn, one control via `.a-btn.a-focus-btn` so all three hosts fold together),
     so folding the word is the compaction the contract permits rather than a second special
     case. Nothing above 640px is touched (90.50x26 on tasks/notes, 100.63x32 on the team board).
     MEASURE AFTER `document.fonts.ready`: a cold-load measurement in the system-ui fallback
     reads ~0.5px wider per character (91.06x26, 100.70x32) — a font race, not a regression; the
     settled numbers are arithmetically exact.
     Clipped, not `display:none` — these buttons have no `aria-label` (name comes from this span's
     text; `title` is the description, and doesn't exist on touch at all). The `.sr-only` pattern
     keeps the span in the accessibility tree so the computed name is identical at every width. */
  .a-btn.a-focus-btn{ position:relative; }
  .a-btn.a-focus-btn .a-focus-btn-t{
    position:absolute; width:1px; height:1px; padding:0; margin:-1px;
    overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0;
  }
  /* ---------- AND THE MOMENTUM BAND WRAPS, SO `Focused` HAS SOMEWHERE TO GO ----------
     The third piece of the same defect, unreachable from a rule on the button alone: the band
     is a single nowrap row with the toggle pinned to its right end, and at 390px needed 398px in
     379px of room — MEASURED: the button sat 20px past the edge, `elementFromPoint()` at its
     centre returned null. Wrapping, not shrinking the chip: `#momentumChip{min-width:0}` also
     fixes it but costs the chip's own readability — its message is already elided at these
     widths, and shrinking past min-content would make it mostly ellipsis at 320px. No `row-gap`
     here: the band's own `gap` shorthand already sets it.
     This rule lives here, not in alt-tasks.css (where the band's other two rules live), because
     it's a BREAKPOINT behaviour — this file is where the suite's breakpoints live. Nothing above
     640px is touched; `flex-wrap` is declared only inside this query. */
  .alt-app #altBand{ flex-wrap:wrap; }
  .a-row{ flex-wrap:wrap; row-gap:6px; }
  .a-row-t{ flex:1 1 100%; white-space:normal; }
  .a-row-meta{ flex:1 1 100%; justify-content:flex-end; }
  .a-row-due{ min-width:0; }
  /* Touch targets — what a thumb gets ON TOP of the unconditional floor above (not instead of
     it): 32px where 24 is the minimum, the whole checkbox ROW rather than the label's line box,
     and a disclosure sized for a header with no hover-revealed drag handle beside it. */
  .a-check{ width:24px; height:24px; }
  /* `flex-basis` beside `width` — both are flex items in a task row and the basis decides the
     main size. The floor above replaces the automatic `min-width:auto` minimum this rule relied
     on before, so the intended width is now stated rather than inferred. */
  .a-star,.a-more{ width:32px; height:32px; padding:7px; flex-basis:32px; }
  /* `button.a-chip` by name: the floor above is `(0,1,1)` and would otherwise out-specify this
     rule and pull a pressable chip back DOWN to 24 on the one device that most needs 26. */
  .a-chip,button.a-chip,.a-note-line{ min-height:26px; display:inline-flex; align-items:center; }
  .a-dist-more{ min-height:26px; }
  .a-row-t,button.a-row-t{ min-height:26px; display:flex; align-items:center; }
  .a-w-fold{ min-height:28px; }
  .a-group-more{ width:28px; height:28px; opacity:1; }
  .a-w-grab{ display:none; }          /* dragging a widget is a pointer gesture; the menu moves it */
  /* The note group grip goes for the same reason, and the row goes back to three tracks with it
     so the empty cell does not leave every group name indented past nothing. Reordering a group
     here is the row menu's Move up / Move down, which calls the identical altNudgeGroup(). */
  .a-group-grab{ display:none; }
  .a-group-row{ grid-template-columns:minmax(0,1fr) 26px; }
  .a-ncl-item .a-w-grab{ display:none; }
  .a-note-card .a-more,.a-ncl-item .a-more{ opacity:1; }
  /* No matching rule for `.tcl-a` here, deliberately — CSS/checklist.css already carries its
     own `@media (max-width:640px)` reveal rule (plus `hover:none`), unprefixed so every host
     the checklist renders on gets it from one rule set — the Suite's own `#panel`
     (task-editor-markup.js) and the team board's task view (JS/alt/alt-team-task.js) today;
     a second rule here would only restate it. */
  /* A checkbox's own box is 13px in every browser; the LABEL is the target, so the whole row
     gets the height and the box sits in the middle of it. */
  .a-check-l{ min-height:32px; }
  .a-check-l input[type="checkbox"]{ width:18px; height:18px; flex:0 0 auto; }
  .a-quick{ overflow-x:auto; flex-wrap:nowrap; }
  .a-quick .a-btn{ flex:0 0 auto; }
  .a-week{ grid-template-columns:repeat(2,minmax(150px,1fr)); }
  /* The per-day "+" is a thumb target on a phone, not a hairline. */
  .a-cal-add{ min-height:32px; }
  .a-month{ grid-auto-rows:minmax(74px,auto); font-size:11px; }
  .a-list-foot{ flex-wrap:wrap; }
}