/* The day page's layout: header row, chip strip, status lines (day-page A).
 *
 * Linked after views.css so it can override it; every colour comes from
 * tokens.css. The dock's own rules live in capture.css; the cards keep their
 * pre-rebuild look until increment B redraws them (then cards.css).
 *
 * Wave M (increment D) split this file, rule for rule, when it stood at 778
 * of HARD RULE 8's 800 lines: Planned today is planned.css, and the sheets
 * on #day-sheet (the tick's question, Next chase, Close day) are
 * day-sheets.css — both linked right after this file. The toast, the status
 * lines and the utilities stay here.
 *
 * AMENDMENT to views.css rule 1 (nothing declares `display` on [data-view]):
 * the first rule below DOES — guarded by :not([hidden]). app.css's
 * `[hidden] { display: none !important }` still outranks it, so the router's
 * `hidden` keeps meaning hidden; the guard only exists so the visible Today
 * view can be a flex column that reaches the tab bar.
 */

[data-view="today"]:not([hidden]) {
  display: flex;
  flex-direction: column;
  flex: 1 0 auto;
}

.day:not([hidden]) {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

/* ------------------------------------------------------------------ header */

.day__row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
  min-height: var(--touch);
}

.view__title.day__date {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 1.2;
}

/* On a 320 px phone the row has 177 px for `‹ date ›` beside `₹2,180 · All ▾`,
 * and at 1.5rem only the year's narrowest dates fit ("Sun 11 Oct" 177 px; "Mon
 * 20 May" 192 px) — so the total wrapped under the date on most days and took
 * 48 px from the timeline. A step down keeps the widest date at 170 px. A
 * longer total still wraps, as the row is built to (flex-wrap above). */
@media (max-width: 344px) {
  .view__title.day__date {
    font-size: 1.25rem;
  }
}

/* The same wrap, one filter over and one width up (wave X integration). With
 * the filter on Business or Personal the total is 42 px wider than with "All"
 * (`₹2,180 · Business ▾` is 145 px), and on a 360 px phone the row's 328 px
 * then hold it beside the date only for the year's narrower dates ("Sun 11 Oct"
 * 167 + 8 + 145 = 320; "Mon 12 Oct" 331; "Mon 20 May" 345) — so choosing
 * Business dropped the total under the date on most days and took 48 px from
 * the timeline. The same step down, but ONLY while a filter is on: on "All",
 * which is what he sees every time the page opens, the date keeps its 1.5rem.
 * From 380 px the row holds the widest date at full size (192 + 8 + 145 in
 * 348). A five-digit total can still wrap, as the row is built to. */
@media (max-width: 379.98px) {
  .day__row:has(.day__scope option:not([value="all"]):checked) .view__title.day__date {
    font-size: 1.25rem;
  }
}

/* Plain muted text, exactly as the wireframe draws the header's right side. */
.day__sum {
  margin: 0;
  color: var(--ink-muted);
}

.day__sum .num {
  font-variant-numeric: tabular-nums;
}

.day__pick {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.day__scope {
  appearance: none;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  min-height: var(--touch);
  padding: 0 1.1em 0 0;
}

.day__scope:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

.day__caret {
  position: absolute;
  right: 0;
  pointer-events: none;
}

/* -------------------------------------------------------------- chip strip */

.day__chips {
  display: flex;
  flex-wrap: wrap;
  column-gap: var(--space-1);
  row-gap: 0;
}

/* The 44px target is the button; the pill inside is drawn smaller, so two
 * rows of chips read light without overlapping touch targets (§1 dec. 30). */
.day__chip {
  min-height: var(--touch);
  padding: 0;
  border: 0;
  background: transparent;
  font: inherit;
  cursor: pointer;
}

.day__pill {
  display: inline-block;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0 var(--space-2);
  font-size: var(--text-sm);
  color: var(--ink-muted);
}

.day__chip[aria-pressed="true"] .day__pill {
  background: var(--accent);
  color: var(--accent-ink);
  border-color: transparent;
}

.day__chip:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 999px;
}

/* Wave M (increment D): on a phone the strip is ONE row that scrolls
 * sideways. Its five pills took two 44 px rows at 360 px (the phone review of
 * 2026-10-10, finding 1), a row the timeline now has. The edge that hides a
 * pill fades — day.js marks it through scroll-row.js, whose FADE_REM is this
 * 1.5rem — and a pill that has just been pressed is brought into view. No
 * scrollbar: a phone draws none, and the fade is the sign. The desk keeps
 * its wrapping strip. */
@media (max-width: 1099.98px) {
  .day__chips {
    flex-wrap: nowrap;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
  }

  .day__chips::-webkit-scrollbar {
    display: none;
  }

  .day__chip {
    flex: none;
    white-space: nowrap;
  }

  /* A scroller clips what is drawn outside it: the focus ring goes inside. */
  .day__chip:focus-visible {
    outline-offset: -2px;
  }

  .day__chips[data-more] {
    -webkit-mask-image: linear-gradient(to right, var(--ink) calc(100% - 1.5rem), transparent);
    mask-image: linear-gradient(to right, var(--ink) calc(100% - 1.5rem), transparent);
  }

  .day__chips[data-before] {
    -webkit-mask-image: linear-gradient(to right, transparent, var(--ink) 1.5rem);
    mask-image: linear-gradient(to right, transparent, var(--ink) 1.5rem);
  }

  .day__chips[data-before][data-more] {
    -webkit-mask-image: linear-gradient(to right, transparent, var(--ink) 1.5rem, var(--ink) calc(100% - 1.5rem), transparent);
    mask-image: linear-gradient(to right, transparent, var(--ink) 1.5rem, var(--ink) calc(100% - 1.5rem), transparent);
  }
}

/* ---------------------------------------------------------- the toast (C2)
 *
 * Outside every view (index.html) and `position: fixed` — so, like #keypad,
 * nothing between <html> and it may grow a transform (views.css rule 2).
 * It sits just ABOVE the dock, never over it: a toast over the foot would
 * hide ₹ for its 5 s, the one button most likely to be wanted straight after
 * a tick. The dock names itself as the anchor, and the toast takes it as its
 * DEFAULT anchor (`position-anchor`), not only inside anchor(): the dock is
 * sticky, and an engine tracks a sticky or scrolled box's live position for
 * the default anchor alone. Named only in anchor(--dock top), Edge kept the
 * dock's old place whenever the day above it changed height under a toast —
 * a filter, the Paid line's redraw — and the toast hung 46 px above the dock
 * or sat 18 px over ₹ until it closed. An engine without CSS anchor
 * positioning, or a page whose dock is not drawn, gets the fallback — the
 * toast just above the tab bar. Above the dock (z-index 2), below the sheets
 * (20). The Undo is toast.js's `.btn`, which carries the 44px target; here a
 * text button in the structural green, "— Undo" read as one pair. */

.capture__bar {
  anchor-name: --dock;
}

.toast {
  position: fixed;
  left: var(--space-4);
  right: var(--space-4);
  bottom: calc(var(--tabs-h) + var(--space-2));
  z-index: 10;
  display: flex;
  align-items: center;
  gap: var(--space-1);
  max-width: 32rem;
  margin: 0 auto;
  padding: var(--space-1) var(--space-1) var(--space-1) var(--space-4);
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--border);
  border-left: 4px solid var(--accent);
  border-radius: var(--radius);
  box-shadow: var(--shadow-dock);
  font-size: var(--text-base);
}

@supports (anchor-name: --dock) {
  .toast {
    position-anchor: --dock;
    bottom: calc(anchor(top, var(--tabs-h)) + var(--space-2));
  }
}

.toast__text {
  flex: 1 1 auto;
  min-width: 0;
  overflow-wrap: anywhere;
}

.toast__undo {
  flex: none;
  padding: 0 var(--space-3) 0 var(--space-1);
  border-color: transparent;
  background: transparent;
  color: var(--accent);
  font-weight: 700;
}

/* ------------------------------------------------------------ status lines */

.day__showing,
.day__hidden {
  margin: 0;
  color: var(--ink-muted);
  font-size: var(--text-md);
}

/* "Show all" rides inside the showing line as a link-shaped button. */
.day__showall {
  border: 0;
  background: transparent;
  padding: 0 var(--space-1);
  min-height: var(--touch);
  color: var(--accent);
  font: inherit;
  font-size: var(--text-md);
  font-weight: 600;
  text-decoration: underline;
  cursor: pointer;
}

.day__showall:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* --------------------------------------------------------------- utilities */

.num {
  font-variant-numeric: tabular-nums;
}

/* Visually hidden, still announced — the Planned-today heading (C1) and every
 * later label that is structure for a screen reader and noise for the eye. */
.vh {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}