/* ================= THE ALTERNATE UX — THE UTILITY RAIL =================
   Time, time zones, weather and a month calendar — each a card with a quiet heading. Every
   figure is real: the reader's own zones, saved locations, and tasks. A widget that cannot
   load says so in its own card and takes nothing else down with it. */

.a-rail{ display:flex; flex-direction:column; gap:var(--a-3); min-width:0; }
.a-rail-card{ background:var(--a-panel); border:1px solid var(--a-line-soft);
  border-radius:var(--a-r-lg); padding:12px; display:flex; flex-direction:column; gap:10px; }
.a-rail-h{ display:flex; align-items:center; gap:8px; }
.a-rail-h .a-sec-h{ flex:1 1 auto; min-width:0; }

/* ---------- clock ----------
   Face and readout sit side by side, not stacked — stacked left empty panel down each side and
   pushed the digits a third of the way down the widget. The dial sizes itself to the card via
   `clamp`, not to a fixed number. */
.a-clock{ display:flex; flex-direction:row; align-items:center; gap:14px; }
.a-clock-face{ position:relative; flex:0 0 auto; width:clamp(68px, 30%, 92px); aspect-ratio:1; }
.a-clock-face svg{ width:100%; height:100%; display:block; }
/* Three lines, not a sentence — time, date and zone are three facts, not one run of text. */
.a-clock-now{ display:flex; flex-direction:column; gap:2px; min-width:0; flex:1 1 auto; }
.a-clock-now b{ white-space:nowrap; }
.a-clock-now > span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.a-clock-now b{ font-family:var(--a-mono); font-size:18px; letter-spacing:.02em; color:var(--a-text); }
.a-clock-now > span:not(.a-clock-zone){ font-size:12px; color:var(--a-dim); }
.a-clock-zone{ font-size:10px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--a-dim); }

/* ---------- time zones ----------
   The control itself is defined further down under "a zone is a control" — only its contents
   are here: place on the left, time on the right, tabular so a row never shifts a pixel. */
.a-zone-t{ min-width:0; flex:1 1 auto; font-size:12px; color:var(--a-dim);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.a-zone > b{ flex:0 0 auto; font-family:var(--a-mono); font-size:13px; font-weight:600;
  font-variant-numeric:tabular-nums; color:var(--a-text); }
.a-zone.on > b{ color:var(--a-blue-text); }

/* ---------- weather ---------- */
.a-wx-now{ display:flex; align-items:center; gap:12px; }
.a-wx-temp{ font-family:var(--a-display); font-size:28px; font-weight:600; line-height:1; }
.a-wx-cond{ font-size:12px; color:var(--a-dim); }
.a-wx-place{ font-size:11px; color:var(--a-faint); }
.a-wx-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:8px; }
.a-wx-cell{ display:flex; flex-direction:column; gap:2px; }
.a-wx-cell b{ font-size:10px; font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:var(--a-dim); }
.a-wx-cell span{ font-size:13px; font-variant-numeric:tabular-nums; }
/* As many days as the rail actually holds. The count is decided once, in
   weatherForecastDayCount() (JS/services/weather.js), and handed to the grid via `--wx-days` so
   the tracks and the children cannot disagree. The fallback (3) is the old behaviour, not a
   broken one — nothing sets the property until the strip has been measured. */
.a-wx-days{ display:grid; grid-template-columns:repeat(var(--wx-days, 3), 1fr); gap:8px; text-align:center; }
.a-wx-day{ display:flex; flex-direction:column; gap:3px; font-size:11px; }
.a-wx-day b{ font-size:10px; letter-spacing:.06em; text-transform:uppercase; color:var(--a-dim); }
.a-wx-day .t{ font-variant-numeric:tabular-nums; color:var(--a-dim); }
.a-wx-foot{ display:flex; align-items:center; gap:8px; font-size:11px; color:var(--a-faint); }

/* ---------- month calendar ---------- */
.a-cal-h{ display:flex; align-items:center; gap:6px; }
.a-cal-h b{ flex:1 1 auto; text-align:center; font-size:13px; font-weight:600; }
/* Seven columns that fit the rail: `1fr` alone is `minmax(auto,1fr)`, floored at each track's
   automatic minimum size — when that floor exceeds the rail's share, the grid grows past its
   container (measured: Saturday painted outside the card). `minmax(0,1fr)` removes the floor;
   the real cause was the button's own padding, below. */
.a-cal-grid{ display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:2px; }
/* Two month grids in a column read as one twelve-row grid unless something separates them — the
   rule is on the caption AFTER a grid, since the first month has no caption of its own (its name
   is in the nav row). */
.a-cal-grid + .a-cal-h{ margin-top:8px; padding-top:8px; border-top:1px solid var(--a-line); }
.a-cal-dow{ font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:var(--a-faint); text-align:center; padding:2px 0; }
/* A day is a <button>, so it arrives with the user agent's own padding — Chrome's 1px 6px added
   12px of horizontal padding inside a centred flex cell with no use for it, and a grid track's
   automatic minimum counts padding+border: 12px padding + 2px border took a ~19px number to a
   33.6px floor and pushed the seventh column out. `padding:0` — the cell sizes itself with
   `aspect-ratio`, so padding has nothing to do here. */
.a-cal-d{
  aspect-ratio:1; display:flex; align-items:center; justify-content:center; position:relative;
  border-radius:var(--a-r-sm); background:none; border:1px solid transparent; padding:0;
  cursor:pointer;
  color:var(--a-dim); font:inherit; font-size:12px; font-variant-numeric:tabular-nums;
}
.a-cal-d:hover{ background:var(--a-raised); color:var(--a-text); }
.a-cal-d.out{ color:var(--a-faint); opacity:.5; }
.a-cal-d.sel{ background:var(--a-blue-fill); color:#fff; }

/* ---------- the rail's own small pieces ---------- */
.a-zones{ display:flex; flex-direction:column; gap:2px; margin-top:8px; }
.a-cal-d.pad{ visibility:hidden; }
/* ---- OPEN TASKS ARE BOLD; TODAY IS A FILLED SQUARE (owner's design, 2026-09-20) ----
   The dot is gone — a 4px circle was a smudge up close and invisible at a distance, competing
   for room in an aspect-ratio:1 cell; weight reads at both and takes no space (the count still
   reaches assistive tech via the cell's aria-label). `.has` is 600 not 700, so a day that is
   both today AND has tasks stays distinguishable from `.today` at 700. Today is filled, not
   merely outlined — an outline alone was easy to lose against the grid's own hairlines. */
.a-cal-d.has{ font-weight:600; color:var(--a-text); }
.a-cal-d.today{
  border-color:var(--a-blue); background:var(--a-blue-soft);
  color:var(--a-blue); font-weight:700;
}
/* The key under the grid. Quiet by construction — it explains the grid, it is not part of it. */
.a-cal-key{
  margin:6px 0 0; padding-top:6px; border-top:1px solid var(--a-line);
  font-size:11px; line-height:1.25; color:var(--a-dim);
}
.a-cal-key b{ color:var(--a-text); font-weight:600; }
.a-cal-dow{
  font-size:10px; color:var(--a-dim); text-align:center; padding-bottom:2px;
  text-transform:uppercase; letter-spacing:.04em;
}

/* ---------- the day popover ----------
   The surface itself is NOT declared here — `.cfg-popover` (CSS/components.css) brings ground/
   border/radius/shadow, `.alt-app .cfg-popover` (alt-message-center.css) redresses them in this
   experience's tokens; restating either here would be a second opinion that could drift. Wider
   than `.cfg-popover`'s 236px (same reason as `.okr-outside-pop`) because these rows carry a task
   TITLE. Not scoped to `.alt-app` — every class here is emitted only by this file's own popover,
   so a bare class is already as narrow as a scoped one; source order (this sheet loads after
   components.css) settles the (0,1,0) tie. */
.a-cal-pop{
  width:min(300px, calc(100vw - 32px));
  padding:12px;
}
.a-cal-pop-head{ margin-bottom:8px; }
.a-cal-pop-title{ margin:0; font-size:13px; font-weight:600; color:var(--a-text); line-height:1.3; }
.a-cal-pop-sub{ margin:2px 0 0; font-size:11px; color:var(--a-dim); }
/* A day can hold more than a panel should. The list scrolls rather than the panel, so the head
   naming the day and the two destinations at the foot stay on screen however long it runs. */
.a-cal-pop-list{
  margin:0; padding:0; list-style:none;
  display:flex; flex-direction:column; gap:2px;
  max-height:220px; overflow-y:auto;
}
.a-cal-pop-row{
  display:flex; align-items:flex-start; gap:8px;
  padding:5px 4px; border-radius:var(--a-r-sm);
}
/* Same marker vocabulary as the OKR panel, drawn from this experience's own tokens rather than
   `.okr-dot` (a stylesheet no rail host loads). Neutral by default; late/today are the only
   variation within one day's list, since every row shares a due date. `is-done` is a THIRD state
   for a different list — the completed-today popover (altCompletedPopFill()) reuses this whole
   surface rather than building a second one; green, because done is neither late nor at risk. */
.a-cal-pop-dot{
  flex:0 0 auto; width:7px; height:7px; margin-top:5px;
  border-radius:50%; background:var(--a-dim);
}
.a-cal-pop-dot.is-late{ background:var(--a-red); }
.a-cal-pop-dot.is-today{ background:var(--a-blue); }
.a-cal-pop-dot.is-done{ background:var(--a-green); }
.a-cal-pop-text{ display:flex; flex-direction:column; gap:1px; min-width:0; }
/* `min-width:0` above and `overflow-wrap` here are one answer, not two — a flex item's automatic
   minimum is its content, so a long unbroken word pushes this column wider than the panel (the
   same floor that put Saturday outside the card above, via the flex route instead of grid). */
.a-cal-pop-t{ font-size:12px; line-height:1.35; color:var(--a-text); overflow-wrap:anywhere; }
.a-cal-pop-m{ font-size:11px; line-height:1.3; color:var(--a-dim); overflow-wrap:anywhere; }
/* The muted sentence at the foot of the panel this copies: what the controls below it do, said
   before they are reached. */
.a-cal-pop-foot{
  margin:8px 0 0; padding-top:8px; border-top:1px solid var(--a-line);
  font-size:11px; line-height:1.35; color:var(--a-dim);
}
/* Two destinations, equal weight — neither is the safe default, so neither takes `.primary`.
   They wrap rather than shrink: a 300px panel fits both side by side, a clamped one does not. */
.a-cal-pop-acts{ display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; }
.a-cal-pop-act{ flex:1 1 auto; }

.a-wx-cell + .a-wx-cell{ margin-top:10px; padding-top:10px; border-top:1px solid var(--a-line); }
.a-wx-day .d{ color:var(--a-dim); }
.a-wx-day .i{ font-size:14px; }

/* ---------- the widget shell ----------
   The header is the control: a disclosure that folds it, a handle that moves it, an overflow
   that does the rest. A collapsed widget keeps its header and place. */
.a-rail-h{ display:flex; align-items:center; gap:6px; }
/* The handle is visible before it is touched — a hover-only affordance is a capability the
   reader has to be told about (sys_design-system §21c), now that the rail's own handle and
   Alt+arrow ARE the way widget order is set (the old Settings list is gone). Low opacity at
   rest, full on hover or on focus-within, so a keyboard reader sees what they can move. */
.a-w-grab{
  display:inline-flex; width:16px; height:16px; color:var(--a-faint); cursor:grab;
  flex:0 0 auto; opacity:.45; transition:opacity var(--a-quick) var(--a-ease);
}
.a-rail-card:hover .a-w-grab,
.a-rail-card:focus-within .a-w-grab{ opacity:1; }
.a-w-grab svg{ width:14px; height:14px; }
.a-w-fold{
  display:flex; align-items:center; gap:6px; flex:1 1 auto; min-width:0;
  background:none; border:0; padding:0; cursor:pointer; color:inherit; font:inherit; text-align:left;
}
/* A widget title is a section label — `.a-sec-h` is this experience's one treatment for that,
   and the wireframe already picked it for Time/Weather/Quick links. The bare h3 here had no
   rule at all and fell to the UA default (16px/400, reading as body copy). Declared here rather
   than adding `.a-sec-h` to the element because that class also carries `display:flex` and
   would fight the button's own layout. */
.a-w-fold h3{
  margin:0; flex:1 1 auto; min-width:0;
  font-size:10px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:var(--a-dim);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.a-w-fold .cv{ display:inline-flex; width:14px; height:14px; color:var(--a-faint); flex:0 0 auto; }
.a-w-fold .cv svg{ width:14px; height:14px; }
.a-w-fold:focus-visible{ outline:2px solid var(--a-ring); outline-offset:2px; border-radius:4px; }
.a-w-a{ display:flex; align-items:center; gap:4px; flex:0 0 auto; }
.a-rail-card.collapsed{ padding-bottom:8px; }
.a-collab{ display:flex; align-items:center; gap:8px; padding:3px 0; }
.a-collab b{ flex:0 1 auto; font-size:13px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.a-collab .a-hint{ margin-left:auto; }

/* ---------- how tall a widget's body is ----------
   The grip is the card's last child, a real focusable separator (arrows and Home work on it) —
   its LOOK is defined once in alt-components.css, only its placement is the rail's business.
   Negative margins put it on the card's own edge rather than floating inside the padding. */
.a-w-grip{ margin:-2px -12px -10px; }
/* A folded widget has nothing to resize, and offering the gesture anyway is a control that
   silently does nothing — the same answer every grip in this experience gives when stacked. */
.a-rail-card.collapsed .a-w-grip,
.a-w-grip[aria-disabled="true"]{ display:none; }
/* A body given a height must be allowed to be that height — it is a flex item in a column card,
   and a flex item's default `min-height:auto` is its content, so a smaller height is ignored. */
.a-rail-b{ min-height:0; }

/* ---------- A CARD NOBODY HAS DRAGGED STILL CANNOT RUN AWAY ----------
   A reader who has never dragged a widget has no stored height, so nothing bounds the card at
   all — unbounded growth, not a widget in a rail. The ceiling (320px) is the tallest body this
   rail draws at rest (the month grid plus its key); rail-widget-sizing.test.js asserts it against
   the MEASURED at-rest height rather than a number in this comment, so appending to any rail
   body re-opens that measurement rather than silently scrolling. It is a DEFAULT, not a limit —
   altSplitter() lets a widget be dragged to 640px, and any stored height wins outright.

   `:not([style*="overflow-y"])` is the seam, load-bearing both ways: a plain `max-height` would
   clamp an explicit inline `height` too, so keying on the absence of the inline pair (which
   altWidgetApplyHeight()/altApplyNoDateHeight() always write or clear together) leaves a
   deliberately-set height untouched in either direction. No `scrollbar-gutter` here — overflowing
   is the exception, not the rule, for a body under this ceiling. Applies to every widget body,
   not only quick links. */
.a-rail-b:not([style*="overflow-y"]){ max-height:320px; overflow-y:auto; }

/* ---------- AND WHEN IT IS SCROLLING, IT HAS TO BE A USABLE SCROLLER ----------
   The height replaced a hard cap (quick links were capped at four); `overflow-y:auto` (set by
   altWidgetApplyHeight() whenever a height is stored) is what makes the rest reachable instead
   of dropped. `scrollbar-gutter:stable` reserves the track — without it an overlay scrollbar
   sits on the last chip and the row steps sideways the moment the list overflows. The 80px floor
   matches altSplitter()'s own drag clamp, so a stored height can never give a scroll region
   shorter than one row plus the affordance to scroll it. Keyed on the style the applier sets, so
   a body at its intrinsic height reserves no gutter it will never use. */
.a-rail-b[style*="overflow-y"]{ min-height:80px; scrollbar-gutter:stable; }

/* A scrolling list of links needs a little air at the bottom, or the last row reads as cut off
   rather than as the end of the list. Only when it scrolls — at rest the card's own padding
   already answers it. */
#altLinksBody[style*="overflow-y"]{ padding-bottom:2px; }

/* ---------- a zone is a control ---------- */
.a-zone{
  display:flex; align-items:center; gap:10px; width:100%; text-align:left;
  background:none; border:1px solid transparent; border-radius:var(--a-r-sm);
  padding:3px 6px; color:inherit; font:inherit; cursor:pointer;
}
.a-zone:hover{ background:var(--a-raised); }
.a-zone.on{ border-color:var(--a-blue); background:var(--a-blue-soft); }
.a-zone.on .a-zone-t{ color:var(--a-blue-text); }
.a-zone:focus-visible{ outline:2px solid var(--a-ring); outline-offset:1px; }
/* What a folded widget still says. Right-aligned in the header, quiet, and monospaced so the
   digits do not shift the header a pixel every second. */
.a-w-peek{
  margin-left:auto; font:600 12px/1 var(--a-mono); color:var(--a-dim);
  font-variant-numeric:tabular-nums;
}
.a-rail-card:not(.collapsed) .a-w-peek{ display:none; }

/* The card that holds the figures can carry a control under them — the way back from whatever
   they narrowed. */
.a-rail-card > .a-btn{ margin-top:8px; align-self:flex-start; }
.a-rail-card{ display:flex; flex-direction:column; }

/* ---------- a city in the rail is a control ---------- */
.a-wx-cell{
  display:block; width:100%; text-align:left; background:none; border:0; padding:4px 6px;
  margin:0 -6px; border-radius:var(--a-r-sm); color:inherit; font:inherit; cursor:pointer;
}
.a-wx-cell:hover{ background:var(--a-raised); }
.a-wx-cell:focus-visible{ outline:2px solid var(--a-ring); outline-offset:1px; }

/* ---------- the full forecast ----------
   The reading, not the glance — one place in full, the reader's others as a line each, and each
   of those opens (a summary is the same information at a different size, not a different kind). */
.a-wx-modal{ width:min(880px, 94vw); height:min(720px, 88vh); }
.a-wx-body{ display:grid; grid-template-columns:minmax(0,1fr) 240px; gap:var(--a-4); align-items:start; }
.a-wx-main{ display:flex; flex-direction:column; gap:var(--a-3); min-width:0; }
.a-wx-head{ display:flex; align-items:flex-start; gap:var(--a-4); flex-wrap:wrap; }
.a-wx-place-l{ flex:1 1 auto; min-width:0; }
.a-wx-place-l h3{ font:600 17px/1.2 var(--a-display); margin:0; }
.a-wx-now-l{ display:flex; align-items:baseline; gap:10px; flex:0 0 auto; }
.a-wx-now-l .ic{ font-size:30px; line-height:1; }
.a-wx-now-l .deg{ font:600 40px/1 var(--a-display); font-variant-numeric:tabular-nums; }
.a-wx-now-l .cond{ font-size:13px; color:var(--a-dim); }
.a-wx-facts{ display:grid; grid-template-columns:repeat(auto-fit, minmax(96px, 1fr)); gap:var(--a-2); }
.a-wx-fact{
  padding:10px 12px; border-radius:var(--a-r); background:var(--a-raised);
  border:1px solid var(--a-line-soft); display:flex; flex-direction:column; gap:3px;
}
.a-wx-fact b{ font:600 17px/1 var(--a-display); font-variant-numeric:tabular-nums; }
.a-wx-fact span{ font-size:11px; color:var(--a-faint); }
/* The hour strip's slot — `min-width:0` because this is a column-flex child holding a horizontal
   scroller; without it the box sizes to its 24 cells and widens the modal. The cells themselves
   are CSS/weather-hourly.css, shared with the phone's identical markup. */
.a-wx-hours{ min-width:0; }
.a-wx-days-l{ display:flex; flex-direction:column; gap:4px; }
.a-wx-day-l{
  display:grid; grid-template-columns:minmax(0,1fr) 28px 44px 44px; align-items:center; gap:8px;
  padding:8px 10px; border-radius:var(--a-r); background:var(--a-raised);
  border:1px solid var(--a-line-soft); font-size:13px;
}
.a-wx-day-l .i{ font-size:16px; text-align:center; }
.a-wx-day-l .hi{ text-align:right; font-variant-numeric:tabular-nums; font-weight:600; }
.a-wx-day-l .lo{ text-align:right; font-variant-numeric:tabular-nums; color:var(--a-faint); }
.a-wx-others{ display:flex; flex-direction:column; gap:var(--a-2); min-width:0; }
.a-wx-list{ display:flex; flex-direction:column; gap:4px; }
.a-wx-row{
  display:grid; grid-template-columns:minmax(0,1fr) 22px 40px; grid-template-rows:auto auto;
  align-items:center; gap:2px 8px; text-align:left; cursor:pointer;
  padding:8px 10px; border-radius:var(--a-r); background:var(--a-raised);
  border:1px solid var(--a-line-soft); color:inherit; font:inherit;
}
.a-wx-row:hover{ border-color:var(--a-blue); }
.a-wx-row:focus-visible{ outline:2px solid var(--a-ring); outline-offset:1px; }
.a-wx-row .p{ font-size:13px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.a-wx-row .i{ font-size:15px; text-align:center; }
.a-wx-row .t{ text-align:right; font:600 15px/1 var(--a-display); font-variant-numeric:tabular-nums; }
.a-wx-row .c{ grid-column:1 / 4; font-size:11px; color:var(--a-faint); }
@media (max-width:820px){
  .a-wx-body{ grid-template-columns:minmax(0,1fr); }
  .a-wx-modal{ width:96vw; height:92vh; }
}

/* ---------- QUICK LINKS: THE CHIPS WERE TOUCHING ----------
   `--a-1` (4px) between chips, `--a-2` (8px) between wrapped rows — not the other way round: the
   complaint was horizontal spacing (chips touching, 0px measured), so only that axis moved.
   `align-content:flex-start`, not the default `normal` (which resolves to `stretch` for a
   multi-line flex box given any height taller than its content) — `stretch` was multiplying the
   declared row-gap by up to 5x as the card was resized, which read as "the links are too far
   apart" after the horizontal fix had already landed. A resized card taller than its chips shows
   empty card below them, like every other widget body here. */
#altLinksBody{
  display:flex; flex-wrap:wrap; gap:var(--a-2) var(--a-1);
  align-items:flex-start; align-content:flex-start;
}

/* No footer action in this card — a "Manage links…" button here would be a second door to the
   same place the card's own ⋯ menu already opens (altOpenSettings('rail','links')). The reader's
   route is the ⋯ in the card header, which altWidgetShell() draws on every card in every state. */

/* ================= MOTION =================
   One transition in this file: the drag handle strengthening. Everything else the rail offers a
   pointer answers between two frames. `--dur-micro` (140ms linear) is the application's clock
   for hover/selected state (sys_design-system §2b); `.a-w-grab` keeps `--a-quick` instead,
   because a control STRENGTHENED by hover is appearing, not answering.

   These are component classes, not structure — each rule dresses one control by its own class,
   so a card drawn on three pages instead of four cannot leave a selector pointing at nothing.
   No chevron rule: the widget's glyph is swapped, not rotated — a rotation belongs with the
   shared list in CSS/components.css if the rail ever adopts one. No layout property: a dragged
   height is already motion and must not be eased under the cursor. Reduced motion is answered
   at the token (`--dur-micro` zeroed on `.alt-app`). */
.a-cal-d,
.a-zone,
.a-wx-cell,
.a-wx-row{
  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;
}