/* app/set-notify.css — page-local styles for Notifications.
   Prefix every selector `.e8-set-notify-`. Shared grammar lives in app/set-core.css and must not
   be duplicated here; if a page needs a new shared primitive, that is a core change, not a
   local override. Tokens only — no hex, no raw font sizes.

   THE ONE THING THIS FILE EXISTS FOR
   `.e8-set-notify-cols` is a two-track grid with FIXED tracks. It is rendered by the card's header
   row and by every body row alike, always inside the primitive's `.e8-set-row-ctl` slot, which is
   `flex: none`. So in every row the grid is exactly `2 × track` wide and its right edge is the
   card's own padding — which makes the two column centres identical by construction. A flex row
   would size each row's controls from that row's content ("App" is wider than an 18px checkbox)
   and the columns would drift down the card by a few pixels each. That drift is the named failure
   mode of this page in docs/SETTINGS-REFERENCE.md.

   Everything else here is text tone and hit area. Row padding, dividers, ink and the checkbox
   itself all come from set-core.css untouched, so a row here is dimensionally a row on Billing.

   ONE KNOWN DEFECT IS DELIBERATELY NOT FIXED HERE. `.e8-set-check`'s unchecked border is
   `--ui-border-strong`, which composites to 1.32:1 on the light card and 1.43:1 on the dark one
   against WCAG 2.1 SC 1.4.11's 3:1 for a control boundary — so on a page made of checkboxes the
   unchecked ones have no visible edge. Both the rule and the token are outside this file. A local
   `border-color` override would leave Notifications with a checkbox that does not match the one on
   Platform, which is precisely the drift the shared layer exists to prevent, so the fix belongs in
   set-core.css and the defect stays visible here until it lands. */

/* ---- the channel grid ------------------------------------------------------------------------
   Track width is set once. Both the header captions and the body cells read the same rule, so the
   only way to move a column is to move both. */
.e8-set-notify-cols {
  display: grid;
  grid-template-columns: repeat(2, 88px);
  align-items: center;
  justify-items: center;
}

/* Header column: the caption over its own select-all control, both centred on the track.
   The gap is `space-1`, not `space-2`, because the select-all now carries its own padding out to a
   24px target — 8px of grid gap on top of that separated the caption from the control it belongs to
   by more than the control is from the row below, and grew the header row past its old height. */
.e8-set-notify-colhead {
  display: grid;
  justify-items: center;
  row-gap: var(--ui-space-1);
}
.e8-set-notify-colcap {
  display: inline-flex;
  align-items: center;
  gap: var(--ui-space-1);
  white-space: nowrap;
  font-size: var(--ui-text-sm);
  font-weight: 500;
  color: var(--ui-text-secondary);
}
.e8-set-notify-colcap .material-symbols-outlined {
  font-size: var(--ui-icon-xs);
  color: var(--ui-icon-quiet);
}

/* The header row's own label. `.e8-set-row-label` is a block, so the bell needs an inline-flex
   wrapper to sit on the text baseline box rather than above it. */
.e8-set-notify-headlab {
  display: inline-flex;
  align-items: center;
  gap: var(--ui-space-2);
  font-weight: 600;
}
.e8-set-notify-headlab .material-symbols-outlined {
  font-size: var(--ui-icon-sm);
  color: var(--ui-icon-quiet);
}

/* ---- cells -----------------------------------------------------------------------------------
   The checkbox stays 18px (it is the shared control and must not drift), but an 18px pointer
   target is below every touch guideline, so an invisible pseudo-element widens the hit area to
   34px without changing a single pixel of the paint. */
.e8-set-notify-cell {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.e8-set-notify-cell .e8-set-check { position: relative; }
.e8-set-notify-cell .e8-set-check::before {
  content: '';
  position: absolute;
  inset: -8px;
  border-radius: var(--ui-radius-md);
}

/* ---- the per-column select-all ---------------------------------------------------------------
   This used to be a `Check` with a locally drawn mixed bar, and that was wrong twice over. It sat
   on the same fixed track at the same 18px as every cell below it, so the heading read as a fourth
   data row; and painting a third state onto a two-state control left the paint saying "some" while
   the button's own `aria-checked` said "false". Both faults are the same mistake — reaching for the
   shared checkbox for a job that is not a checkbox.

   So: a text button. Distinct from the column it heads by construction, no checked state to
   contradict, and small enough that §P3's "if it can be done without clutter" still holds at the
   46px track the narrow layout gives it.

   Secondary ink rather than accent, and deliberately. Accent on the tinted header composites to
   6.7:1 in light but only 4.3:1 in dark (the dark accent is the base lightened 64%), which is under
   4.5:1 for 11.5px text; `--ui-text-secondary` is 4.6:1 light and 6.7:1 dark. The underline, not the
   colour, is what marks it as actionable. Padding takes the target to ~25px tall — above the 24px
   floor — without the invisible pseudo-element the cells need, because here there is real text to
   pad. The focus ring is set-core's one blanket `.e8-set :focus-visible` rule, whose 6px radius this
   matches so the ring sits on the shape rather than around it. */
.e8-set-notify-all {
  padding: 5px 7px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  font: inherit;
  font-size: var(--ui-text-xs);
  line-height: 1.3;
  color: var(--ui-text-secondary);
  text-decoration: underline;
  text-underline-offset: 2px;
  white-space: nowrap;
  cursor: pointer;
}
.e8-set-notify-all:hover {
  background: color-mix(in srgb, var(--ui-fill) 70%, transparent);
  color: var(--ui-text);
}

/* ---- the quiet-hours range -------------------------------------------------------------------
   Two selects and a joining word, inside the row's own control slot. Deliberately NOT given a
   width: the shared select sizes to its content, and forcing a uniform control width is a named
   failure mode in docs/SETTINGS-REFERENCE.md. `min-width: 0` so the pair can shrink inside a
   squeezed row instead of pushing the label out of the card. */
.e8-set-notify-range {
  display: inline-flex;
  align-items: center;
  gap: var(--ui-space-2);
  min-width: 0;
}
.e8-set-notify-sep {
  flex: none;
  font-size: var(--ui-text-base);
  color: var(--ui-text-tertiary);
}

/* ---- footer ---------------------------------------------------------------------------------- */
.e8-set-notify-foot {
  margin: var(--ui-space-5) 0 0;
  font-size: var(--ui-text-base);
  line-height: 1.45;
  color: var(--ui-text-tertiary);
}

/* ---- narrow ----------------------------------------------------------------------------------
   AFTER every rule it overrides, per CLAUDE.md: a conditional at-rule adds no specificity, so a
   @media block written above its own base rule never applies in any state.

   set-core stacks a row's control under its text below 640px, which is right for a wide select and
   wrong here — two checkboxes are ~90px and stacking them would put the columns a full row away
   from the captions that explain them. These rows keep the label-left / columns-right shape at
   every width and narrow the tracks instead. Header and body narrow together, so the alignment
   guarantee is unchanged. Selectors are double-classed to beat set-core's equal-specificity rule
   regardless of stylesheet order. */
@media (max-width: 640px) {
  .e8-set-notify-row.e8-set-row {
    flex-wrap: nowrap;
    align-items: center;
  }
  .e8-set-notify-row .e8-set-row-ctl { width: auto; }
  .e8-set-notify-cols { grid-template-columns: repeat(2, 46px); }
  /* "Email" alone fits a 46px track; the glyph beside it does not. The caption text carries the
     meaning, so the ornament is what goes. */
  .e8-set-notify-colcap .material-symbols-outlined { display: none; }
  /* The select-all keeps its full 25px height — the target floor does not move with the viewport —
     and gives back only side padding, which is the axis the 46px track is short of. */
  .e8-set-notify-all { padding-left: 3px; padding-right: 3px; }
  /* The quiet-hours row DOES take set-core's stacking — one select per line would be worse than
     two side by side, so the pair takes the full stacked control slot and splits it. set-core
     already sets `.e8-set-select { width: 100% }` here; both then shrink to share the row. */
  .e8-set-notify-range { width: 100%; }
}