/* Upglory dashboard, components (2026-09-26).
   Every screen is built from these and nothing else. Class prefix `d-`.
   Each block says what the component is for; the styleguide shows every
   state; RULES.md says when to use which. Light and dark come from
   tokens.css alone: no colour in this file is written twice. */

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; background: var(--ground); color: var(--ink); font-family: var(--font-ui); font-size: var(--t-body); line-height: var(--lh); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
::selection { background: var(--accent-ground); }
.d-mono { font-family: var(--font-data); font-size: var(--t-data); font-variant-numeric: tabular-nums; font-variant-ligatures: none; }
.d-meta { color: var(--ink-3); font-size: var(--t-small); }
.d-sr { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.d-i { width: 1.125rem; height: 1.125rem; flex: none; stroke: currentColor; fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.d-i--s { width: 1rem; height: 1rem; }
.d-i--l { width: 1.375rem; height: 1.375rem; }

/* ---------- Shell: sidebar, top bar, content ----------
   The frame every signed-in page sits in (RULES 8). */
.d-app { display: grid; grid-template-columns: var(--sidebar) minmax(0, 1fr); min-height: 100vh; }
.d-side { position: sticky; top: 0; height: 100vh; background: var(--ground-2); border-right: 1px solid var(--line); display: flex; flex-direction: column; padding: var(--s-3); gap: 2px; overflow-y: auto; }
.d-ws { display: flex; align-items: center; gap: .625rem; width: 100%; padding: .5rem; border: 0; background: none; border-radius: var(--r-2); text-align: left; cursor: pointer; margin-bottom: var(--s-3); }
.d-ws:hover { background: var(--surface-2); }
.d-ws__logo { width: 2rem; height: 2rem; border-radius: var(--r-1); background: var(--ink); color: var(--ground); display: grid; place-items: center; font: 600 .75rem var(--font-title); flex: none; }
.d-ws__name { display: block; font-weight: 600; line-height: 1.2; }
.d-ws__plan { display: block; font-size: var(--t-small); color: var(--ink-3); }
.d-ws .d-i { margin-left: auto; color: var(--ink-3); }
.d-nav { display: grid; gap: 2px; }
.d-nav a:not(.d-me) { display: flex; align-items: center; gap: .625rem; height: 2.25rem; padding: 0 .625rem; border-radius: var(--r-2); color: var(--ink-2); font-weight: 500; }
.d-nav a:not(.d-me):hover { background: var(--surface-2); color: var(--ink); }
.d-nav a[aria-current] { background: var(--accent-ground); color: var(--accent-ink); font-weight: 600; }
.d-nav a[aria-current] .d-i { color: var(--accent-ink); }
.d-nav__count { margin-left: auto; font-family: var(--font-data); font-size: var(--t-data-s); color: var(--ink-2); font-variant-ligatures: none; }
.d-nav__count--bad { color: var(--down); font-weight: 600; }
.d-side__foot { margin-top: auto; display: grid; gap: 2px; padding-top: var(--s-4); }
.d-me { display: flex; align-items: center; gap: .625rem; width: 100%; padding: .5rem; margin-top: var(--s-2); border: 0; border-top: 1px solid var(--line); background: none; text-align: left; cursor: pointer; padding-top: var(--s-3); }
.d-me b { display: block; font-weight: 500; line-height: 1.2; }
.d-avatar { width: 1.75rem; height: 1.75rem; border-radius: 50%; background: var(--accent-ground); color: var(--accent-ink); display: grid; place-items: center; font: 600 .6875rem var(--font-ui); flex: none; }
.d-main { min-width: 0; display: flex; flex-direction: column; }
.d-top { position: sticky; top: 0; z-index: 20; height: var(--topbar); display: flex; align-items: center; gap: var(--s-4); padding: 0 var(--gutter); background: color-mix(in srgb, var(--ground) 88%, transparent); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); }
.d-page { width: 100%; max-width: var(--content); padding: var(--s-6) var(--gutter) var(--s-9); }

/* ---------- Live state ----------
   What is wrong right now, from anywhere (RULES 8, 9). Pill on a desktop,
   strip under the top bar on a phone. Links to the worst open incident. */
.d-live { display: inline-flex; align-items: center; gap: .5rem; height: 1.875rem; padding: 0 .75rem; border-radius: var(--r-pill); font-size: var(--t-small); font-weight: 500; white-space: nowrap; min-width: 0; }
.d-live--down { background: var(--down-ground); color: var(--down); }
.d-live--ok { background: var(--up-ground); color: var(--up); }
.d-live__n { font-weight: 600; }
.d-live__what { color: var(--ink); overflow: hidden; text-overflow: ellipsis; }
.d-live .d-mono { font-size: var(--t-data-s); color: var(--ink-2); }
.d-livestrip { display: none; }

/* ---------- Search (top bar) ---------- */
.d-search { margin-left: auto; display: flex; align-items: center; gap: .5rem; width: min(22rem, 40%); height: 2.125rem; padding: 0 .75rem; border-radius: var(--r-2); background: var(--surface); border: 1px solid var(--line); color: var(--ink-3); font-size: var(--t-small); }
.d-search input { flex: 1; min-width: 0; border: 0; background: none; font: inherit; color: var(--ink); outline: none; }
.d-kbd { font-family: var(--font-data); font-size: .6875rem; color: var(--ink-3); border: 1px solid var(--line-2); border-radius: 4px; padding: 0 .3rem; line-height: 1.3; font-variant-ligatures: none; }

/* ---------- Badge ----------
   One small indicator for counts and dots (audit: four patterns before). */
.d-badge { display: inline-grid; place-items: center; min-width: 1.125rem; height: 1.125rem; padding: 0 .3rem; border-radius: var(--r-pill); background: var(--accent); color: var(--ink-on-accent); font: 600 .6875rem/1 var(--font-data); font-variant-ligatures: none; }
.d-badge--down { background: var(--down-bar); }
.d-badge--dot { min-width: .5rem; width: .5rem; height: .5rem; padding: 0; }
.d-bell { position: relative; display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: var(--r-2); color: var(--ink-2); }
.d-bell:hover { background: var(--surface-2); }
.d-bell .d-badge { position: absolute; top: .125rem; right: .0625rem; }

/* ---------- Buttons ----------
   Primary: the one thing this screen is for. Default: everything else.
   Quiet: in toolbars. Danger: only inside a confirm dialog. Icon: a square
   button with an aria-label, always paired with a tooltip. */
.d-btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; height: var(--control); padding: 0 .875rem; border-radius: var(--r-2); border: 1px solid var(--line-2); background: var(--surface); color: var(--ink); font: 500 var(--t-body)/1 var(--font-ui); cursor: pointer; white-space: nowrap; transition: background var(--d-fast) var(--ease), border-color var(--d-fast) var(--ease); }
.d-btn:hover { background: var(--surface-2); border-color: var(--line-strong); }
.d-btn--primary { background: var(--accent); border-color: var(--accent); color: var(--ink-on-accent); }
.d-btn--primary:hover { background: var(--accent-2); border-color: var(--accent-2); }
.d-btn--quiet { border-color: transparent; background: transparent; color: var(--ink-2); }
.d-btn--quiet:hover { background: var(--surface-2); border-color: transparent; color: var(--ink); }
.d-btn--danger { background: var(--down); border-color: var(--down); color: #fff; }
.d-btn--s { height: var(--control-s); padding: 0 .625rem; font-size: var(--t-small); }
.d-btn--icon { width: var(--control); padding: 0; }
.d-btn--s.d-btn--icon { width: var(--control-s); }
.d-btn[aria-disabled="true"], .d-btn:disabled { opacity: .45; pointer-events: none; }
.d-btn[aria-pressed="true"] { background: var(--accent-ground); border-color: transparent; color: var(--accent-ink); }

/* ---------- State chip ----------
   A state is a word, a glyph and a colour together (RULES 6). */
.d-state { display: inline-flex; align-items: center; gap: .375rem; height: 1.375rem; padding: 0 .5rem; border-radius: var(--r-1); font-size: var(--t-small); font-weight: 500; white-space: nowrap; }
.d-state::before { content: ""; flex: none; width: .5rem; height: .5rem; border-radius: 50%; background: currentColor; }
.d-state--up { color: var(--up); background: var(--up-ground); }
.d-state--down { color: var(--down); background: var(--down-ground); }
.d-state--down::before { border-radius: 1px; transform: rotate(45deg); width: .4375rem; height: .4375rem; }
.d-state--degraded { color: var(--degraded); background: var(--degraded-ground); }
.d-state--degraded::before { border-radius: 0; background: none; width: 0; height: 0; border-left: .3125rem solid transparent; border-right: .3125rem solid transparent; border-bottom: .5rem solid currentColor; }
.d-state--paused { color: var(--paused); background: var(--paused-ground); }
.d-state--paused::before { background: none; border: 2px solid currentColor; }
.d-state--pending { color: var(--pending); background: var(--pending-ground); }
.d-state--pending::before { background: none; border: 2px dotted currentColor; }
.d-state--bare { background: none; padding: 0; }

/* ---------- Chip ----------
   A tag, a filter value, a plan name: neutral, never a state. */
.d-chip { display: inline-flex; align-items: center; gap: .25rem; height: 1.375rem; padding: 0 .5rem; border-radius: var(--r-1); background: var(--surface-sunk); color: var(--ink-2); font-size: var(--t-small); white-space: nowrap; }
.d-chip--plan { background: var(--ink); color: var(--ground); font-weight: 600; }

/* ---------- Strip ----------
   The product's signature: one bar per day, the worst state that day.
   30 days in a row, 90 on a monitor page (30 at 390, D-97). */
.d-strip { display: flex; gap: 2px; height: 1.125rem; align-items: stretch; }
.d-strip i { flex: 1; min-width: 2px; border-radius: 1px; background: var(--up-bar); }
.d-strip i.d { background: var(--down-bar); } .d-strip i.g { background: var(--degraded-bar); }
.d-strip i.n { background: var(--nodata-bar); } .d-strip i.p { background: var(--paused-bar); }
.d-strip--l { height: 2.25rem; gap: 3px; }

/* ---------- Page header ----------
   Title, one detail line (what, how many, the zone), actions on the right
   (RULES 7). A detail page adds the back link and a state. */
.d-ph { display: flex; align-items: flex-end; gap: var(--s-4); margin-bottom: var(--s-5); flex-wrap: wrap; }
.d-ph__title { margin: 0; font: 600 var(--t-title)/1.1 var(--font-title); letter-spacing: -.02em; display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; }
.d-ph__detail { margin: .375rem 0 0; color: var(--ink-3); font-size: var(--t-small); }
.d-ph__back { display: inline-flex; align-items: center; gap: .25rem; color: var(--ink-3); font-size: var(--t-small); margin-bottom: .375rem; }
.d-ph__back:hover { color: var(--ink); }
.d-ph__actions { margin-left: auto; display: flex; gap: var(--s-2); flex-wrap: wrap; }

/* ---------- Banner ----------
   Whatever is wrong on this screen, directly under the header, with the
   way to act (RULES 7). Down, warning (a limit, a failing channel), info
   (a plan-gated note), and quiet (acknowledged). */
.d-banner { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--s-4); padding: .875rem 1rem; border-radius: var(--r-3); border: 1px solid transparent; margin-bottom: var(--s-5); }
.d-banner__icon { width: 2.25rem; height: 2.25rem; border-radius: var(--r-2); display: grid; place-items: center; }
.d-banner__title { font-weight: 600; }
.d-banner__body { display: grid; gap: .5rem; min-width: 0; }
.d-banner__acts { display: flex; gap: var(--s-2); flex-wrap: wrap; justify-content: flex-end; }
.d-banner--down { background: var(--down-ground); border-color: color-mix(in srgb, var(--down) 25%, transparent); }
.d-banner--down .d-banner__icon { background: var(--down-bar); color: #fff; }
.d-banner--warn { background: var(--degraded-ground); border-color: color-mix(in srgb, var(--degraded) 25%, transparent); }
.d-banner--warn .d-banner__icon { background: var(--degraded-bar); color: #fff; }
.d-banner--info { background: var(--accent-ground); }
.d-banner--info .d-banner__icon { background: var(--accent); color: #fff; }
.d-banner--quiet { background: var(--surface); border-color: var(--line); }
.d-banner--quiet .d-banner__icon { background: var(--surface-sunk); color: var(--ink-2); }
.d-banner__more { font-size: var(--t-small); color: var(--ink-2); }

/* ---------- The explanation ----------
   Written by AI, marked as such at every width, never coloured as a state. */
.d-explain { background: var(--explain-ground); border-radius: var(--r-2); padding: .625rem .875rem; }
.d-explain__label { display: flex; align-items: center; gap: .375rem; margin-bottom: .25rem; font: 600 var(--t-small) var(--font-ui); color: var(--explain); }
.d-explain p { margin: 0; }
.d-explain__meta { margin-top: .375rem; font-size: var(--t-small); color: var(--ink-3); }
.d-banner .d-explain { background: color-mix(in srgb, var(--surface) 72%, transparent); }

/* ---------- Toolbar and segmented control ----------
   One row above a list: kind, order, then filters on the right. */
.d-toolbar { display: flex; align-items: center; gap: var(--s-2); margin-bottom: var(--s-3); flex-wrap: wrap; }
.d-toolbar__end { margin-left: auto; display: flex; gap: var(--s-2); }
.d-seg { display: inline-flex; padding: 2px; border-radius: var(--r-2); background: var(--surface); border: 1px solid var(--line); }
.d-seg button { display: inline-flex; align-items: center; gap: .375rem; height: 1.875rem; padding: 0 .75rem; border: 0; border-radius: .5rem; background: none; color: var(--ink-2); font-size: var(--t-small); font-weight: 500; cursor: pointer; white-space: nowrap; }
.d-seg button:hover { color: var(--ink); }
.d-seg button[aria-pressed="true"] { background: var(--accent-ground); color: var(--accent-ink); font-weight: 600; }
.d-seg .d-mono { font-size: var(--t-data-s); opacity: .75; }

/* ---------- List ----------
   The one list shape (RULES 1, D-84): state, name with address or schedule,
   tag, the figure now, uptime, the strip, then the actions, always visible
   (D-133). Group header rows carry a title and a count. On a phone every
   row becomes a card that keeps its labels. */
.d-list { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-3); overflow: hidden; }
.d-list th { text-align: left; font: 600 var(--t-small) var(--font-ui); color: var(--ink-3); padding: .625rem .75rem; background: var(--surface-2); border-bottom: 1px solid var(--line); white-space: nowrap; }
.d-list td { padding: .625rem .75rem; border-bottom: 1px solid var(--line); vertical-align: middle; }
.d-list tbody tr:last-child td { border-bottom: 0; }
.d-list tbody tr:hover td { background: var(--surface-2); }
.d-list .is-down td { background: color-mix(in srgb, var(--down-ground) 60%, var(--surface)); }
.d-list .is-down:hover td { background: color-mix(in srgb, var(--down-ground) 86%, var(--down)); }
.d-list .r { text-align: right; }
.d-list__group td { background: var(--surface-2); padding: .5rem .75rem; font-size: var(--t-small); }
.d-list__group b { font-weight: 600; margin-right: .5rem; }
.d-name { display: flex; align-items: center; gap: .5rem; min-width: 0; }
.d-name b { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.d-name .d-i { color: var(--ink-3); }
.d-name__sub { font-family: var(--font-data); font-size: var(--t-data-s); color: var(--ink-3); margin-top: .125rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 24rem; font-variant-ligatures: none; }
.d-star { width: var(--control-s); height: var(--control-s); display: grid; place-items: center; border: 0; background: none; border-radius: var(--r-1); color: var(--ink-3); cursor: pointer; }
.d-star[aria-pressed="true"] { color: var(--degraded-bar); }
.d-star[aria-pressed="true"] .d-i { fill: currentColor; }
.d-acts { white-space: nowrap; text-align: right; }
.d-acts .d-btn { margin-left: .25rem; }
.d-list td .d-strip { width: 7.5rem; }
.d-list__label { display: none; }

/* ---------- Card and figures ----------
   A surface for one topic. Figures: four at most in a row, a label over a
   large mono number with its unit and a trend or note. */
.d-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-3); }
.d-card__head { display: flex; align-items: center; gap: var(--s-3); padding: .875rem 1rem; border-bottom: 1px solid var(--line); }
.d-card__head h2 { margin: 0; font-size: var(--t-h2); font-weight: 600; }
.d-card__head .d-meta { margin-left: auto; }
.d-card__body { padding: 1rem; }
.d-figures { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-3); margin-bottom: var(--s-5); }
.d-figure { padding: .875rem 1rem; }
.d-figure + .d-figure { border-left: 1px solid var(--line); }
.d-figure__label { font-size: var(--t-small); color: var(--ink-3); }
.d-figure__n { font: 500 var(--t-figure)/1.1 var(--font-data); letter-spacing: -.02em; margin-top: .25rem; font-variant-numeric: tabular-nums; font-variant-ligatures: none; }
.d-figure__n small { font-size: var(--t-small); color: var(--ink-3); letter-spacing: 0; margin-left: .25rem; }
.d-figure__note { font-size: var(--t-small); color: var(--ink-3); margin-top: .125rem; }
.d-figure--bad .d-figure__n { color: var(--down); }
.d-figure__n--word { font: 600 1.125rem/1.3 var(--font-ui); letter-spacing: 0; padding-top: .45rem; color: var(--degraded); }

/* ---------- Rows on rules (key and value) ---------- */
.d-rows { margin: 0; padding: 0; list-style: none; }
.d-rows li { display: grid; grid-template-columns: 9rem minmax(0, 1fr); gap: var(--s-3); padding: .5rem 0; border-bottom: 1px solid var(--line); font-size: var(--t-small); }
.d-rows li:last-child { border-bottom: 0; }
.d-rows li > span:first-child { color: var(--ink-3); }

/* ---------- Menu, popover and sheet ----------
   One set of items, a popover on a desktop and a sheet on a phone, the same
   items in the same order (RULES 9). */
.d-menu { position: absolute; z-index: 40; min-width: 14rem; padding: .375rem; background: var(--surface); border-radius: var(--r-3); box-shadow: var(--shadow-float); display: grid; gap: 1px; }
.d-menu a, .d-menu button { display: flex; align-items: center; gap: .625rem; width: 100%; height: 2.25rem; padding: 0 .625rem; border: 0; background: none; border-radius: var(--r-2); color: var(--ink); text-align: left; cursor: pointer; font-size: var(--t-body); }
.d-menu a:hover, .d-menu button:hover { background: var(--surface-2); }
.d-menu .d-i { color: var(--ink-3); }
.d-menu hr { border: 0; border-top: 1px solid var(--line); margin: .25rem 0; }
.d-menu__danger { color: var(--down) !important; }
.d-menu__danger .d-i { color: var(--down) !important; }
.d-menu__hint { margin-left: auto; font-family: var(--font-data); font-size: var(--t-data-s); color: var(--ink-3); font-variant-ligatures: none; }
.d-sheet { position: fixed; inset: auto 0 0; z-index: 60; background: var(--surface); border-radius: var(--r-3) var(--r-3) 0 0; box-shadow: var(--shadow-float); padding: .5rem .75rem calc(1rem + env(safe-area-inset-bottom)); }
.d-sheet::before { content: ""; display: block; width: 2.5rem; height: 4px; border-radius: 2px; background: var(--line-strong); margin: .25rem auto .75rem; }
.d-sheet .d-menu { position: static; box-shadow: none; padding: 0; }
.d-sheet .d-menu a, .d-sheet .d-menu button { height: var(--tap); }
.d-scrim { position: fixed; inset: 0; z-index: 55; background: var(--scrim); }

/* ---------- Dialog ----------
   A confirm names what it touches with numbers; Cancel and the verb
   (RULES 5). The check dialog uses the same frame, wider. */
.d-dialog { width: min(32rem, calc(100vw - 2rem)); background: var(--surface); color: var(--ink); border: 0; border-radius: var(--r-3); box-shadow: var(--shadow-float); padding: 0; }
.d-dialog--wide { width: min(56rem, calc(100vw - 2rem)); }
.d-dialog__head { padding: 1.125rem 1.25rem .5rem; }
.d-dialog__head h2 { margin: 0; font-size: 1.125rem; font-weight: 600; }
.d-dialog__body { padding: .25rem 1.25rem 1rem; color: var(--ink-2); }
.d-dialog__foot { display: flex; justify-content: flex-end; gap: var(--s-2); padding: .875rem 1.25rem; border-top: 1px solid var(--line); }

/* ---------- Toast ----------
   One line, bottom centre, four seconds, Undo when it can be undone. */
.d-toast { position: fixed; left: 50%; bottom: 1.5rem; z-index: 70; transform: translateX(-50%); display: inline-flex; align-items: center; gap: .75rem; padding: .625rem .625rem .625rem 1rem; border-radius: var(--r-pill); background: var(--ink); color: var(--ground); font-size: var(--t-small); box-shadow: var(--shadow-float); }
.d-toast button { border: 0; background: color-mix(in srgb, var(--ground) 16%, transparent); color: var(--ground); height: 1.75rem; padding: 0 .75rem; border-radius: var(--r-pill); font-weight: 600; cursor: pointer; }

/* ---------- Save bar ----------
   Docked to the foot of the content column, only when something changed,
   the count, Discard and Save (RULES 4). One sticky bar at a time. */
.d-savebar { position: sticky; bottom: 1rem; z-index: 15; display: flex; align-items: center; gap: var(--s-3); padding: .625rem .625rem .625rem 1rem; margin-top: var(--s-5); border-radius: var(--r-3); background: var(--ink); color: var(--ground); box-shadow: var(--shadow-float); }
.d-savebar b { font-weight: 600; }
.d-savebar .d-btn { border-color: transparent; }
.d-savebar .d-btn--quiet { color: color-mix(in srgb, var(--ground) 80%, transparent); }
.d-savebar .d-btn--quiet:hover { background: color-mix(in srgb, var(--ground) 12%, transparent); color: var(--ground); }
.d-savebar__acts { margin-left: auto; display: flex; gap: var(--s-2); }

/* ---------- Forms ----------
   Label over the field, one line of help under it, the error replacing the
   help. */
.d-field { display: grid; gap: .375rem; }
.d-label { font-weight: 500; font-size: var(--t-small); }
.d-input { width: 100%; height: var(--control); padding: 0 .75rem; border-radius: var(--r-2); border: 1px solid var(--line-2); background: var(--surface); color: var(--ink); font: inherit; }
.d-input:focus { outline: 2px solid var(--accent); outline-offset: -1px; border-color: transparent; }
.d-input--mono { font-family: var(--font-data); font-size: var(--t-data); font-variant-ligatures: none; }
.d-help { font-size: var(--t-small); color: var(--ink-3); }
.d-field.is-invalid .d-input { border-color: var(--down); }
.d-field.is-invalid .d-help { color: var(--down); }
.d-switch { position: relative; display: inline-block; width: 2.25rem; height: 1.25rem; border-radius: var(--r-pill); background: var(--line-strong); border: 0; cursor: pointer; flex: none; transition: background var(--d-fast) var(--ease); }
.d-switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 1rem; height: 1rem; border-radius: 50%; background: #fff; transition: transform var(--d-fast) var(--ease); }
.d-switch[aria-checked="true"] { background: var(--accent); }
.d-switch[aria-checked="true"]::after { transform: translateX(1rem); }

/* ---------- Tabs ---------- */
.d-tabs { display: flex; gap: var(--s-5); border-bottom: 1px solid var(--line); margin-bottom: var(--s-5); overflow-x: auto; scrollbar-width: none; }
.d-tabs::-webkit-scrollbar { display: none; }
.d-tabs a { padding: .625rem 0; color: var(--ink-3); font-weight: 500; border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; }
.d-tabs a:hover { color: var(--ink); }
.d-tabs a[aria-current] { color: var(--ink); border-bottom-color: var(--accent); }

/* ---------- Empty state and skeleton ---------- */
.d-empty { display: grid; justify-items: center; gap: .5rem; text-align: center; padding: var(--s-9) var(--s-5); }
.d-empty h2 { margin: 0; font-size: var(--t-h2); font-weight: 600; }
.d-empty p { margin: 0; color: var(--ink-2); max-width: 36ch; }
.d-skel { display: block; height: .875rem; border-radius: 4px; background: linear-gradient(90deg, var(--surface-sunk), var(--surface-2), var(--surface-sunk)); background-size: 200% 100%; animation: d-shimmer 1.4s linear infinite; }
@keyframes d-shimmer { to { background-position: -200% 0; } }

/* ---------- Phone ---------- */
.d-phonebar, .d-tabbar { display: none; }
@media (max-width: 56.25em) {
  .d-app { grid-template-columns: 1fr; }
  .d-side, .d-top { display: none; }
  .d-page { padding: var(--s-4) var(--gutter-phone) calc(5rem + env(safe-area-inset-bottom)); }
  .d-phonebar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: .5rem; height: 3.25rem; padding: 0 var(--gutter-phone); background: color-mix(in srgb, var(--ground) 90%, transparent); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); }
  .d-phonebar .d-ws { width: auto; min-height: var(--tap); margin: 0; padding: .25rem; }
  .d-phonebar__title { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
  .d-phonebar--detail { gap: .25rem; padding-left: .25rem; }
  .d-phonebar--detail .d-ph__back { display: none; }
  body:has(.d-phonebar--detail) .d-ph__back { display: none; }
  .d-phonebar__end { margin-left: auto; display: flex; align-items: center; gap: .25rem; }
  .d-phonebar .d-bell { width: var(--tap); height: var(--tap); }
  .d-livestrip { display: flex; align-items: center; gap: .5rem; padding: .625rem var(--gutter-phone); background: var(--down-ground); color: var(--down); font-size: var(--t-small); font-weight: 500; border-bottom: 1px solid color-mix(in srgb, var(--down) 20%, transparent); }
  .d-livestrip .d-live__what { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .d-tabbar { position: fixed; inset: auto 0 0; z-index: 30; display: grid; grid-template-columns: repeat(5, 1fr); height: calc(3.75rem + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom); background: color-mix(in srgb, var(--surface) 94%, transparent); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-top: 1px solid var(--line); }
  .d-tabbar a, .d-tabbar button { position: relative; display: grid; justify-items: center; align-content: center; gap: .125rem; font-size: .6875rem; font-weight: 500; color: var(--ink-3); }
  .d-tabbar a[aria-current], .d-tabbar button[aria-expanded="true"] { color: var(--accent-ink); }
  .d-tabbar .d-badge { position: absolute; top: .375rem; left: calc(50% + .375rem); }
  .d-ph__title { font-size: 1.375rem; }
  .d-ph__actions .d-btn, .d-toolbar .d-btn, .d-seg button { height: var(--tap); }
  .d-seg button { padding: 0 .875rem; }
  .d-livestrip { min-height: var(--tap); }
  .d-ph__actions { margin-left: 0; width: 100%; }
  .d-banner { grid-template-columns: minmax(0, 1fr); gap: var(--s-3); }
  .d-banner__icon { display: none; }
  .d-banner__acts { grid-column: 1 / -1; justify-content: stretch; }
  .d-banner__acts .d-btn { flex: 1; height: var(--tap); }
  .d-toolbar { flex-wrap: nowrap; overflow-x: auto; margin-inline: calc(var(--gutter-phone) * -1); padding-inline: var(--gutter-phone); scrollbar-width: none; }
  .d-toolbar__end { margin-left: 0; }
  .d-figures { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .d-figure:nth-child(3) { border-left: 0; }
  .d-figure:nth-child(n+3) { border-top: 1px solid var(--line); }
  /* The list becomes cards that keep every label. */
  .d-list, .d-list tbody { display: block; background: none; border: 0; border-radius: 0; overflow: visible; }
  .d-list thead { display: none; }
  .d-list tbody { display: grid; gap: .5rem; }
  .d-list tbody tr { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; grid-template-areas: "name name state" "now uptime acts" "strip strip strip"; gap: .5rem .75rem; align-items: center; padding: .75rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-3); }
  .d-list tbody tr.is-down { background: color-mix(in srgb, var(--down-ground) 60%, var(--surface)); border-color: color-mix(in srgb, var(--down) 30%, transparent); }
  .d-list td, .d-list tbody tr:hover td, .d-list .is-down td { padding: 0; border: 0; background: none; }
  .d-list td[data-cell="name"] { grid-area: name; min-width: 0; }
  .d-list td[data-cell="state"] { grid-area: state; justify-self: end; }
  .d-list td[data-cell="now"] { grid-area: now; text-align: left; }
  .d-list td[data-cell="uptime"] { grid-area: uptime; text-align: right; }
  .d-list td[data-cell="now"], .d-list td[data-cell="uptime"] { display: grid; gap: 0; line-height: 1.25; }
  .d-list td[data-cell="strip"] { grid-area: strip; }
  .d-list td[data-cell="strip"] .d-strip { width: 100%; }
  .d-list td[data-cell="tag"], .d-list td[data-cell="star"] { display: none; }
  .d-list td[data-cell="acts"] { grid-area: acts; display: flex; gap: .375rem; position: relative; z-index: 1; }
  .d-list tbody tr { position: relative; }
  .d-list td[data-cell="name"] a::after { content: ""; position: absolute; inset: 0; border-radius: var(--r-3); }
  .d-list td[data-cell="acts"] .d-btn { height: var(--tap); width: var(--tap); margin: 0; }
  .d-list__label { display: block; font-family: var(--font-ui); font-size: .6875rem; color: var(--ink-3); }
  .d-list__group { display: block !important; padding: 0 !important; border: 0 !important; background: none !important; margin-top: .75rem; }
  .d-list__group td { display: block; background: none !important; padding: 0 .25rem; }
  .d-name__sub { max-width: none; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }

/* ---------- Detail page layout ----------
   Main content on the left, secondary cards on the right (RULES 7); one
   column on a phone with the secondary cards after. */
.d-split { display: grid; grid-template-columns: minmax(0, 1fr) 20rem; gap: var(--s-5); align-items: start; }
.d-stack { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-5); align-content: start; min-width: 0; }

/* ---------- Checks list ---------- */
.d-checks { list-style: none; margin: 0; padding: .25rem 0; }
.d-checks li { display: grid; grid-template-columns: 4rem 6rem minmax(0, 1fr) 6rem; gap: var(--s-3); align-items: center; padding: .5rem 1rem; border-bottom: 1px solid var(--line); font-size: var(--t-small); }
.d-checks li:last-child { border-bottom: 0; }
.d-checks .r { text-align: right; }

/* ---------- Row list (compact rows inside a card) ---------- */
.d-rowlist { list-style: none; margin: 0; padding: .25rem 0; }
.d-rowlist li { display: grid; grid-template-columns: 6rem minmax(0, 1fr) auto; gap: var(--s-3); align-items: center; padding: .625rem 1rem; border-bottom: 1px solid var(--line); }
.d-rowlist li:last-child { border-bottom: 0; }
.d-rowlist a b { font-family: var(--font-data); font-weight: 500; margin-right: .375rem; font-variant-ligatures: none; }
.d-rowlist a:hover { color: var(--accent-ink); }

/* ---------- Chart ---------- */
.d-chart { width: 100%; height: auto; display: block; }
.d-chart__grid line { stroke: var(--line); stroke-width: 1; }
.d-chart__band { fill: var(--down-ground); }
.d-chart__l1, .d-chart__l2 { fill: none; stroke-width: 1.75; stroke-linejoin: round; }
.d-chart__l1 { stroke: var(--accent); }
.d-chart__l2 { stroke: var(--explain); }
.d-chart__axis text { font: 400 11px var(--font-data); fill: var(--ink-3); font-variant-ligatures: none; }
.d-chart__axis text:last-child { text-anchor: end; }
.d-legend { display: flex; gap: var(--s-4); margin-top: .5rem; font-size: var(--t-small); color: var(--ink-2); }
.d-legend span::before { content: ""; display: inline-block; width: .75rem; height: 2px; margin-right: .375rem; vertical-align: middle; }
.d-legend__l1::before { background: var(--accent); }
.d-legend__l2::before { background: var(--explain); }
.d-legend__band::before { height: .625rem !important; background: var(--down-ground); }
.d-strip__axis { display: flex; justify-content: space-between; margin-top: .375rem; font-size: var(--t-data-s); color: var(--ink-3); }
.d-note { margin: 0; font-size: var(--t-small); color: var(--ink-2); }
.d-note b { display: block; font-size: var(--t-small); color: var(--ink-3); margin-bottom: .25rem; font-weight: 600; }
.d-note .d-meta { display: block; margin-top: .375rem; }
.d-card__head .d-btn, .d-card__head .d-seg { margin-left: auto; }
.d-card__head .d-meta + .d-btn { margin-left: 0; }
@media (max-width: 56.25em) {
  .d-split { grid-template-columns: minmax(0, 1fr); }
  /* The 90-day strip draws the last 30 days on a phone and says so (D-97). */
  .d-strip--l { gap: 2px; }
  .d-strip--l i:nth-child(-n+60) { display: none; }
  .d-strip__axis span:first-child { font-size: 0; }
  .d-strip__axis span:first-child::after { content: "last 30 days"; font-size: var(--t-data-s); }
  .d-card__head { flex-wrap: wrap; row-gap: .5rem; }
  .d-card__head .d-meta { margin-left: 0; flex-basis: 100%; order: 3; }
  .d-card__head .d-btn, .d-card__head .d-seg { margin-left: auto; }
  .d-checks li { grid-template-columns: 3rem minmax(0, 1fr) auto; }
  .d-checks li > :nth-child(3) { display: none; }
  .d-rowlist li { grid-template-columns: 1fr auto; }
  .d-rowlist li > .d-mono { grid-column: 1 / -1; }
}
.d-split > aside .d-rows li { grid-template-columns: 5.5rem minmax(0, 1fr); }

/* ---------- Timeline ----------
   An incident's story, each event with its time and who or what did it. */
.d-timeline { list-style: none; margin: 0; padding: .5rem 1rem; }
.d-timeline li { display: grid; grid-template-columns: 3.25rem 1.25rem minmax(0, 1fr); gap: .5rem; padding: .5rem 0; position: relative; }
.d-timeline li::before { content: ""; position: absolute; left: calc(3.25rem + .5rem + .5625rem); top: 1.5rem; bottom: -.5rem; width: 1px; background: var(--line-2); }
.d-timeline li:last-child::before { display: none; }
.d-timeline time { font-family: var(--font-data); font-size: var(--t-data-s); color: var(--ink-3); padding-top: .125rem; font-variant-ligatures: none; }
.d-timeline__dot { width: .75rem; height: .75rem; margin: .25rem 0 0 .25rem; border-radius: 50%; border: 2px solid var(--line-strong); background: var(--surface); position: relative; z-index: 1; }
.d-timeline__dot--down { background: var(--down-bar); border-color: var(--down-bar); }
.d-timeline__dot--warn { border-color: var(--degraded-bar); }
.d-timeline__dot--ok { border-color: var(--up-bar); background: var(--up-bar); }
.d-timeline__dot--wait { border-style: dashed; }
.d-timeline b { font-weight: 500; }
.d-timeline .d-meta { display: block; }

/* ---------- Evidence per location ---------- */
.d-evidence { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.d-evidence > div { padding: .75rem 1rem 1rem; }
.d-evidence > div + div { border-left: 1px solid var(--line); }
.d-evidence h3 { margin: 0 0 .5rem; font-size: var(--t-small); font-weight: 600; display: flex; justify-content: space-between; }
.d-evidence h3 .d-meta { font-weight: 400; }
.d-evidence .d-checks li { padding: .375rem 0; grid-template-columns: 3rem minmax(0, 1fr) auto; }

/* ---------- Update composer ---------- */
.d-stages { display: flex; gap: .25rem; flex-wrap: wrap; }
.d-textarea { width: 100%; min-height: 6rem; padding: .625rem .75rem; border-radius: var(--r-2); border: 1px solid var(--line-2); background: var(--surface); color: var(--ink); font: inherit; resize: vertical; }
.d-textarea:focus { outline: 2px solid var(--accent); outline-offset: -1px; border-color: transparent; }
.d-inline { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; }
.d-select { height: var(--control); padding: 0 2rem 0 .75rem; border-radius: var(--r-2); border: 1px solid var(--line-2); background: var(--surface); color: var(--ink); font: inherit; }

/* ---------- The acknowledge bar (phone only) ----------
   The one sticky bar on an incident page on a phone, above the tab bar. */
.d-actbar { display: none; }
@media (max-width: 56.25em) {
  .d-evidence { grid-template-columns: 1fr; }
  .d-evidence > div + div { border-left: 0; border-top: 1px solid var(--line); }
  .d-actbar { position: fixed; inset: auto 0 calc(3.75rem + env(safe-area-inset-bottom)); z-index: 25; display: flex; gap: .5rem; padding: .5rem var(--gutter-phone); background: color-mix(in srgb, var(--surface) 94%, transparent); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-top: 1px solid var(--line); }
  .d-actbar .d-btn { flex: 1; height: var(--tap); }
  .has-actbar .d-page { padding-bottom: calc(9rem + env(safe-area-inset-bottom)); }
  .has-actbar .d-banner__acts { display: none; }
  .has-actbar .d-ph__actions { display: none; }
  .has-actbar .d-toast { bottom: calc(3.75rem + env(safe-area-inset-bottom) + var(--tap) + 1.75rem); }
}

/* ---------- Section heading inside a page ---------- */
.d-group { margin: var(--s-6) 0 var(--s-3); font: 600 var(--t-small) var(--font-ui); color: var(--ink-3); }
.d-group:first-of-type { margin-top: 0; }
.d-link { color: var(--accent-ink); text-decoration: underline; text-underline-offset: 2px; }

/* ---------- Inbox rows ---------- */
.d-inbox { list-style: none; margin: 0; padding: 0; overflow: hidden; }
.d-inbox__row { display: grid; grid-template-columns: 2rem minmax(0, 1fr) auto auto; gap: var(--s-3); align-items: center; padding: .625rem .75rem .625rem 1rem; border-bottom: 1px solid var(--line); position: relative; }
.d-inbox__row:last-child { border-bottom: 0; }
.d-inbox__row a { display: grid; min-width: 0; }
.d-inbox__row a b { font-weight: 500; }
.d-inbox__row a .d-meta { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.d-inbox__row.is-unread { background: var(--surface); }
.d-inbox__row.is-unread::before { content: ""; position: absolute; left: .375rem; top: 50%; width: .375rem; height: .375rem; margin-top: -.1875rem; border-radius: 50%; background: var(--accent); }
.d-inbox__row.is-unread a b { font-weight: 600; }
.d-inbox__icon { width: 2rem; height: 2rem; border-radius: var(--r-2); display: grid; place-items: center; background: var(--surface-sunk); color: var(--ink-2); }
.d-inbox__icon--down { background: var(--down-ground); color: var(--down); }
.d-inbox__icon--up { background: var(--up-ground); color: var(--up); }
.d-inbox__icon--degraded { background: var(--degraded-ground); color: var(--degraded); }

/* ---------- Settings rows: a label and help on the left, the control on the right ---------- */
.d-settings { list-style: none; margin: 0; padding: 0; }
.d-settings li { display: flex; align-items: center; justify-content: space-between; gap: var(--s-5); padding: .875rem 1rem; border-bottom: 1px solid var(--line); }
.d-settings li:last-child { border-bottom: 0; }
.d-settings b { display: block; font-weight: 500; }
.d-settings .d-select:disabled { opacity: .5; }
@media (max-width: 56.25em) {
  .d-inbox__row { grid-template-columns: 2rem minmax(0, 1fr) auto; }
  .d-inbox__row time { grid-column: 2; grid-row: 2; }
  .d-inbox__row .d-btn { grid-column: 3; grid-row: 1 / span 2; width: var(--tap); height: var(--tap); }
  .d-settings li { flex-wrap: wrap; }
}
.d-badgepreview { display: inline-flex; align-items: center; gap: .5rem; justify-self: start; padding: .375rem .75rem; border-radius: var(--r-pill); border: 1px solid var(--line-2); background: var(--surface); }

/* ---------- Meter: usage against a limit ---------- */
.d-meter { height: 4px; border-radius: 2px; background: var(--surface-sunk); margin-top: .5rem; overflow: hidden; }
.d-meter i { display: block; height: 100%; background: var(--accent); border-radius: 2px; }
.d-meter--warn i { background: var(--degraded-bar); }

/* ---------- Plan choice ---------- */
.d-plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.d-plan { display: grid; gap: .375rem; align-content: start; padding: 1rem; }
.d-plan + .d-plan { border-left: 1px solid var(--line); }
.d-plan b { font-weight: 600; display: flex; align-items: center; gap: .5rem; }
.d-plan p { margin: 0 0 .5rem; }
.d-plan .d-btn { justify-self: start; }
.d-plan.is-current { background: var(--accent-ground); }
@media (max-width: 56.25em) {
  .d-plans { grid-template-columns: 1fr; }
  .d-plan + .d-plan { border-left: 0; border-top: 1px solid var(--line); }
  .d-settings li > .d-input, .d-settings li > .d-select, .d-settings li > .d-seg, .d-settings li > .d-inline { width: 100%; max-width: none !important; }
  .d-settings li .d-btn { height: var(--tap); }
  .d-toolbar form { flex-wrap: wrap; }
}

/* ---------- Wizard ----------
   A step rail on a desktop; on a phone one line, "Step 2 of 5", and the
   form first (RULES 9). The foot carries the draft, Back and Next. */
.d-wizard { display: grid; grid-template-columns: 14rem minmax(0, 40rem); gap: var(--s-6); align-items: start; }
.d-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: .25rem; position: sticky; top: calc(var(--topbar) + 1rem); }
.d-step { display: flex; align-items: center; gap: .625rem; padding: .5rem .5rem; border-radius: var(--r-2); color: var(--ink-3); font-weight: 500; }
.d-step__n { width: 1.5rem; height: 1.5rem; border-radius: 50%; display: grid; place-items: center; font: 500 var(--t-data-s) var(--font-data); border: 1px solid var(--line-2); background: var(--surface); font-variant-ligatures: none; }
.d-step--done { color: var(--ink-2); }
.d-step--done .d-step__n { background: var(--up-ground); color: var(--up); border-color: transparent; }
.d-step--current { color: var(--accent-ink); background: var(--accent-ground); font-weight: 600; }
.d-step--current .d-step__n { background: var(--accent); color: #fff; border-color: transparent; }
.d-steps__phone { display: none; }
.d-wizard__foot { display: flex; align-items: center; gap: var(--s-3); padding: .875rem 1rem; border-top: 1px solid var(--line); }
.d-wizard__foot .d-savebar__acts { margin-left: auto; }
@media (max-width: 56.25em) {
  .d-wizard { grid-template-columns: minmax(0, 1fr); gap: var(--s-3); }
  .d-steps { display: none; }
  .d-steps__phone { display: block; margin: 0; }
  .d-wizard__foot { flex-wrap: wrap; }
  .d-wizard__foot .d-btn { height: var(--tap); }
  .d-wizard__foot .d-savebar__acts { width: 100%; margin: 0; }
  .d-wizard__foot .d-savebar__acts .d-btn { flex: 1; }
  .d-savebar { flex-wrap: wrap; bottom: calc(4.25rem + env(safe-area-inset-bottom)); }
  .d-savebar__acts { width: 100%; }
  .d-savebar__acts .d-btn { flex: 1; height: var(--tap); }
}
.d-field > .d-seg, .d-field > .d-inline { justify-self: start; }

/* Meta text on a tinted ground steps up to ink-2 so it keeps 4.5:1 in both themes. */
.d-banner .d-meta, .d-inbox__row.is-unread .d-meta, .d-plan.is-current .d-meta, .d-list .is-down .d-meta, .d-list .is-down .d-name__sub { color: var(--ink-2); }
.d-savebar .d-btn--quiet { color: var(--ground); opacity: .85; }
.d-menu--static { position: static; }
.d-sheet--static { position: static; border-radius: var(--r-3); max-width: 24rem; }
.d-states { display: grid; grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr)); gap: var(--s-6); align-items: start; }
.d-states .d-group { margin-top: 0; }
.d-pick { list-style: none; margin: .25rem 0 0; padding: 0; border: 1px solid var(--line); border-radius: var(--r-2); }
.d-pick li { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); padding: .5rem .75rem; border-bottom: 1px solid var(--line); }
.d-pick li:last-child { border-bottom: 0; }
@media (max-width: 56.25em) { .d-pick li { flex-wrap: wrap; } .d-pick .d-input { max-width: none !important; } }
.d-field .d-inline { flex-wrap: nowrap; }
.d-states .d-toast { position: static !important; transform: none !important; }
@media (max-width: 56.25em) { .d-field > .d-seg { flex-wrap: wrap; max-width: 100%; } }

/* Acknowledged: the row keeps its state but loses its alarm; the marker
   turns from filled to outlined (the direction contract's interaction). */
.d-list .is-acked td, .d-list .is-acked:hover td { background: var(--surface); }
.d-list .is-acked .d-state--down::before { background: none; border: 2px solid currentColor; width: .5rem; height: .5rem; }
@media (max-width: 56.25em) { .d-list tbody tr.is-acked { background: var(--surface); border-color: var(--line); } }
.d-banner--quiet .d-banner__icon { background: var(--surface-sunk); color: var(--ink-2); }

/* Hidden means hidden, whatever the component's display. */
[hidden] { display: none !important; }

/* Word values in a data column stay in the interface face (mono is for
   figures, times, addresses and code only). */
.d-word { font-family: var(--font-ui) !important; font-size: var(--t-small) !important; color: var(--ink-2); }

/* The phone-only filter button that opens the order and filter sheet. */
.d-only-phone { display: none; }

/* The calm state of the live pill. */
.d-live--ok .d-live__what { color: var(--ink-2); }

@media (max-width: 56.25em) {
  .d-only-phone { display: inline-flex; }
  .d-only-desktop { display: none !important; }
  .d-toast { bottom: calc(3.75rem + env(safe-area-inset-bottom) + .75rem); max-width: calc(100% - 2 * var(--gutter-phone)); white-space: nowrap; }
  .d-seg button { min-height: var(--tap); }
  /* Cards keep the tag and the star (RULES 9). */
  .d-list tbody tr { grid-template-columns: minmax(0, 1fr) auto auto; grid-template-areas: "name star state" "tag tag tag" "now uptime acts" "strip strip strip"; }
  .d-list td[data-cell="tag"] { display: block; grid-area: tag; }
  .d-list td[data-cell="star"] { display: block; grid-area: star; position: relative; z-index: 1; }
  .d-list td[data-cell="star"] { align-self: start; margin: -.625rem 0 -.625rem; }
  .d-list td[data-cell="star"] .d-star { width: var(--tap); height: var(--tap); border: 0; }
}

@media (max-width: 56.25em) {
  .d-toolbar { overflow: visible; margin-inline: 0; padding-inline: 0; }
  .d-toolbar > .d-seg:first-child { flex: 1; min-width: 0; }
  .d-toolbar > .d-seg:first-child button { flex: 1; justify-content: center; padding: 0 .5rem; }
  .d-toolbar .d-btn--icon { width: var(--tap); flex: none; }
}

.d-live--wait { background: var(--surface-sunk); }

/* On the Account pages the person at the sidebar foot is the current entry (RULES 8). */
.d-me.is-current { background: var(--accent-ground); box-shadow: inset 2px 0 0 var(--accent); }

/* ===========================================================================
   Open states (2026-09-27). Everything that opens, picks or toggles, wired by
   assets/app.js. One floating layer for menus, dropdowns, the calendar and
   search results; one dialog; on a phone every floating layer and every
   dialog becomes a sheet from the bottom with the same items (RULES 9).
   =========================================================================== */

/* The floating layer. A menu, a listbox or a calendar placed under its
   trigger by app.js; hidden until opened. */
.d-float { position: fixed; z-index: 50; min-width: 12rem; max-width: min(24rem, calc(100vw - 1rem)); max-height: min(26rem, calc(100vh - 2rem)); overflow-y: auto; padding: .375rem; background: var(--surface); color: var(--ink); border-radius: var(--r-3); box-shadow: var(--shadow-float); animation: d-float-in var(--d-fast) var(--ease); }
.d-float[hidden] { display: none !important; }
.d-float.d-menu { position: fixed; }
@keyframes d-float-in { from { opacity: 0; transform: translateY(-4px); } }
.d-menu__label { padding: .5rem .625rem .25rem; font: 600 var(--t-small) var(--font-ui); color: var(--ink-3); }
.d-menu [role="menuitemradio"] .d-menu__tick, .d-menu [role="option"] .d-menu__tick { margin-left: auto; color: var(--accent-ink); visibility: hidden; }
.d-menu [aria-checked="true"] .d-menu__tick, .d-menu [aria-selected="true"] .d-menu__tick { visibility: visible; }
.d-menu [aria-selected="true"], .d-menu [aria-checked="true"] { font-weight: 600; }
.d-menu a:focus-visible, .d-menu button:focus-visible, .d-menu [role="option"]:focus-visible, .d-menu .is-active { outline: none; background: var(--surface-2); box-shadow: inset 0 0 0 2px var(--accent); }
.d-menu__ws { width: 1.5rem; height: 1.5rem; border-radius: var(--r-1); display: grid; place-items: center; background: var(--ink); color: var(--ground); font: 600 .6875rem var(--font-ui); flex: none; }
.d-menu__ws--2 { background: var(--explain); }
.d-menu .d-seg { width: 100%; margin: .125rem 0; }
/* Appearance in a menu: three rows like the others, the chosen one
   ticked (#543). The person's menu and More fit the window whole and
   never scroll inside; the script shifts one that cannot open below or
   above its trigger until it fits. */
.d-menu__choices { display: grid; gap: 1px; }
.d-menu__choices .d-menu__tick { margin-left: auto; color: var(--accent-ink); visibility: hidden; }
.d-menu__choices [aria-pressed="true"] { font-weight: 600; }
.d-menu__choices [aria-pressed="true"] .d-menu__tick { visibility: visible; }
.d-float.d-menu:is(#m-me, #m-more):not(.is-sheet) { max-height: none; overflow: visible; }
.d-menu .d-seg button { flex: 1; justify-content: center; height: 1.875rem; width: auto; padding: 0 .5rem; }
.d-menu__row { display: flex; align-items: center; gap: .5rem; padding: .25rem .625rem; font-size: var(--t-small); color: var(--ink-2); }
.d-menu label { display: flex; align-items: center; gap: .625rem; min-height: 2.25rem; padding: 0 .625rem; border-radius: var(--r-2); cursor: pointer; }
.d-menu label:hover { background: var(--surface-2); }
.d-menu__foot { display: flex; justify-content: space-between; gap: .5rem; padding: .375rem .25rem .125rem; border-top: 1px solid var(--line); margin-top: .25rem; }
.d-menu__foot .d-btn { height: var(--control-s); width: auto; font-size: var(--t-small); }

/* On a phone the floating layer is a sheet. */
.d-float.is-sheet { inset: auto 0 0 0 !important; width: 100%; max-width: none; max-height: 82vh; border-radius: var(--r-3) var(--r-3) 0 0; padding: .5rem .75rem calc(1rem + env(safe-area-inset-bottom)); animation: d-sheet-in var(--d-base) var(--ease); z-index: 60; }
.d-float.is-sheet::before { content: ""; display: block; width: 2.5rem; height: 4px; border-radius: 2px; background: var(--line-strong); margin: .25rem auto .75rem; }
.d-float.is-sheet a, .d-float.is-sheet button:not(.d-seg button):not(.d-cal__day):not(.d-cal__nav), .d-float.is-sheet [role="option"], .d-float.is-sheet label { min-height: var(--tap); }
@keyframes d-sheet-in { from { transform: translateY(100%); } }

/* The dialog: the native element, styled. Esc and the backdrop close it. */
dialog.d-dialog { position: fixed; inset: 0; margin: auto; max-height: calc(100vh - 2rem); overflow: auto; }
dialog.d-dialog::backdrop { background: var(--scrim); }
dialog.d-dialog[open] { animation: d-float-in var(--d-base) var(--ease); }
.d-dialog__head { display: flex; align-items: flex-start; gap: .75rem; }
.d-dialog__head h2 { flex: 1; }
.d-dialog__head p { margin: .25rem 0 0; font-size: var(--t-small); color: var(--ink-3); }
.d-dialog__x { margin: -.25rem -.5rem 0 0; }
.d-dialog__body { display: grid; gap: 1rem; }
.d-dialog__body > p { margin: 0; }
.d-dialog__foot .d-btn--quiet { margin-right: auto; }
.d-dialog__foot .d-danger-left { margin-right: auto; }
.d-dialog .d-field .d-input { max-width: none; }
.d-typed { font-family: var(--font-data); font-weight: 600; color: var(--ink); font-variant-ligatures: none; }
@media (max-width: 56.25em) {
  dialog.d-dialog { inset: auto 0 0 0; margin: 0; width: 100%; max-width: none; max-height: 90vh; border-radius: var(--r-3) var(--r-3) 0 0; padding-bottom: env(safe-area-inset-bottom); }
  dialog.d-dialog[open] { animation: d-sheet-in var(--d-base) var(--ease); }
  .d-dialog__foot { flex-wrap: wrap; }
  .d-dialog__foot .d-btn { flex: 1; height: var(--tap); }
  .d-dialog__foot .d-btn--quiet, .d-dialog__foot .d-danger-left { flex-basis: 100%; order: 3; margin: 0; }
}

/* The dropdown: a button that reads like a field and opens a listbox.
   Used instead of the native select everywhere in the app. */
.d-dd { position: relative; display: inline-flex; min-width: 10rem; }
.d-dd__btn { display: flex; align-items: center; gap: .5rem; width: 100%; height: var(--control); padding: 0 .625rem 0 .75rem; border-radius: var(--r-2); border: 1px solid var(--line-2); background: var(--surface); color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.d-dd__btn:hover { border-color: var(--line-strong); }
.d-dd__btn[aria-expanded="true"] { outline: 2px solid var(--accent); outline-offset: -1px; border-color: transparent; }
.d-dd__btn > span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.d-dd__btn .d-i { color: var(--ink-3); flex: none; }
.d-dd--mono .d-dd__btn, .d-dd__list.is-mono [role="option"] { font-family: var(--font-data); font-size: var(--t-data); font-variant-ligatures: none; }
.d-dd--s .d-dd__btn { height: var(--control-s); font-size: var(--t-small); }
.d-dd.is-disabled .d-dd__btn { opacity: .5; cursor: not-allowed; }
/* A field a member reads but cannot change (brief 30): dimmed like a disabled dropdown. */
.d-input:disabled, .d-textarea:disabled { opacity: .5; cursor: not-allowed; }
.d-dd__list [role="option"] { display: flex; align-items: center; gap: .625rem; min-height: 2.25rem; padding: .25rem .625rem; border-radius: var(--r-2); cursor: pointer; }
.d-dd__list [role="option"]:hover { background: var(--surface-2); }
.d-dd__list [role="option"] small { color: var(--ink-3); font-size: var(--t-small); font-weight: 400; }
.d-dd__list [role="option"][hidden] { display: none; }
.d-dd__search { position: sticky; top: -.375rem; margin: -.375rem -.375rem .375rem; padding: .5rem; background: var(--surface); border-bottom: 1px solid var(--line); }
.d-dd__search .d-input { height: 2rem; }
.d-dd__none { padding: .75rem .625rem; color: var(--ink-3); font-size: var(--t-small); }

/* Checkbox and radio: the native input, drawn in the system's shape so
   keyboard, labels and forms keep working. */
.d-cb, .d-rb { appearance: none; -webkit-appearance: none; flex: none; width: 1.125rem; height: 1.125rem; margin: 0; display: inline-grid; place-content: center; border: 1.5px solid var(--line-strong); background: var(--surface); cursor: pointer; transition: background var(--d-fast) var(--ease), border-color var(--d-fast) var(--ease); }
.d-cb { border-radius: .3125rem; }
.d-rb { border-radius: 50%; }
.d-cb:hover, .d-rb:hover { border-color: var(--accent); }
.d-cb::after { content: ""; width: .3125rem; height: .5625rem; border: solid var(--ink-on-accent); border-width: 0 2px 2px 0; transform: translateY(-1px) rotate(45deg) scale(0); transition: transform var(--d-fast) var(--ease); }
.d-cb:checked, .d-cb:indeterminate { background: var(--accent); border-color: var(--accent); }
.d-cb:checked::after { transform: translateY(-1px) rotate(45deg) scale(1); }
.d-cb:indeterminate::after { width: .5rem; height: 0; border-width: 0 0 2px 0; transform: none; }
.d-rb::after { content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: var(--accent); transform: scale(0); transition: transform var(--d-fast) var(--ease); }
.d-rb:checked { border-color: var(--accent); }
.d-rb:checked::after { transform: scale(1); }
.d-cb:disabled, .d-rb:disabled { opacity: .45; cursor: not-allowed; }
.d-cb:focus-visible, .d-rb:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.d-check { display: inline-flex; align-items: center; gap: .5rem; cursor: pointer; }
@media (max-width: 56.25em) { .d-check { min-height: var(--tap); } }

/* A choice: a radio or checkbox with a title and one line, as a row. */
.d-choices { display: grid; gap: .5rem; }
.d-choice { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .125rem .75rem; align-items: start; padding: .75rem .875rem; border: 1px solid var(--line-2); border-radius: var(--r-2); cursor: pointer; }
.d-choice:hover { border-color: var(--line-strong); }
.d-choice:has(:checked) { border-color: var(--accent); background: var(--accent-ground); }
.d-choice:has(:disabled) { opacity: .55; cursor: not-allowed; }
.d-choice > input { margin-top: .125rem; grid-row: span 2; }
.d-choice b { font-weight: 600; }
.d-choice span { font-size: var(--t-small); color: var(--ink-3); }

/* The date field and its calendar. Weeks start on Monday. */
.d-date { display: inline-flex; align-items: center; gap: .5rem; height: var(--control); padding: 0 .75rem; border-radius: var(--r-2); border: 1px solid var(--line-2); background: var(--surface); color: var(--ink); font: inherit; cursor: pointer; white-space: nowrap; }
.d-date:hover { border-color: var(--line-strong); }
.d-date[aria-expanded="true"] { outline: 2px solid var(--accent); outline-offset: -1px; border-color: transparent; }
.d-date .d-i { color: var(--ink-3); }
.d-date .is-empty { color: var(--ink-3); }
.d-cal { width: 17.5rem; padding: .75rem; }
.d-cal--range { width: auto; max-width: calc(100vw - 1rem); display: grid; grid-template-columns: 9rem 17rem; gap: .75rem; }
.d-cal__presets { display: grid; align-content: start; gap: 2px; padding-right: .75rem; border-right: 1px solid var(--line); }
.d-cal__presets button { height: 2rem; padding: 0 .5rem; border: 0; border-radius: var(--r-2); background: none; color: var(--ink-2); font: inherit; font-size: var(--t-small); text-align: left; cursor: pointer; }
.d-cal__presets button:hover { background: var(--surface-2); color: var(--ink); }
.d-cal__presets button[aria-pressed="true"] { background: var(--accent-ground); color: var(--accent-ink); font-weight: 600; }
.d-cal__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: .5rem; }
.d-cal__head b { font: 600 var(--t-body) var(--font-ui); white-space: nowrap; }
.d-cal__nav { width: 2rem; height: 2rem; display: grid; place-items: center; border: 0; border-radius: var(--r-2); background: none; color: var(--ink-2); cursor: pointer; }
.d-cal__nav:hover { background: var(--surface-2); color: var(--ink); }
.d-cal__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px 0; }
.d-cal__wd { height: 1.75rem; display: grid; place-items: center; font-size: var(--t-small); color: var(--ink-3); }
.d-cal__day { height: 2.25rem; border: 0; background: none; color: var(--ink); font: 500 var(--t-data) var(--font-data); border-radius: var(--r-2); cursor: pointer; font-variant-ligatures: none; }
.d-cal__day:hover { background: var(--surface-2); }
.d-cal__day.is-out { color: var(--ink-3); opacity: .6; }
.d-cal__day.is-today { box-shadow: inset 0 0 0 1px var(--line-strong); }
.d-cal__day.is-in { background: var(--accent-ground); color: var(--accent-ink); border-radius: 0; }
.d-cal__day[aria-selected="true"] { background: var(--accent); color: var(--ink-on-accent); font-weight: 600; }
.d-cal__day:disabled { color: var(--ink-3); opacity: .35; cursor: not-allowed; background: none; }
.d-cal__day:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.d-cal__foot { display: flex; justify-content: space-between; align-items: center; gap: .5rem; margin-top: .625rem; padding-top: .625rem; border-top: 1px solid var(--line); font-size: var(--t-small); color: var(--ink-3); }
.d-cal__foot .d-btn { height: var(--control-s); font-size: var(--t-small); }
@media (max-width: 56.25em) {
  .d-cal, .d-cal--range { width: 100%; }
  .d-cal--range { grid-template-columns: 1fr; }
  .d-cal__presets { grid-auto-flow: column; grid-auto-columns: max-content; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--line); padding: 0 0 .5rem; }
  .d-cal__day { height: var(--tap); }
}

/* Search results under the top bar's search. */
.d-results { width: 26rem; }
.d-results a { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .625rem; min-height: 2.5rem; padding: .25rem .625rem; border-radius: var(--r-2); color: var(--ink); text-decoration: none; }
.d-results a:hover, .d-results a.is-active { background: var(--surface-2); }
.d-results a .d-meta { font-size: var(--t-small); }
.d-results mark { background: none; color: var(--accent-ink); font-weight: 600; }

/* A row that just arrived or changed, marked for a moment. */
@keyframes d-arrive { from { background: var(--accent-ground); } }
.is-arrived, .is-arrived > td { animation: d-arrive 1.6s var(--ease); }
.d-empty-row td { padding: 2rem 1rem; text-align: center; color: var(--ink-3); }
.d-empty-row .d-btn { margin-top: .5rem; }

/* The save bar appears only when something changed (RULES 4). */
.d-savebar[hidden] { display: none; }
.d-savebar:not([hidden]) { animation: d-float-in var(--d-base) var(--ease); }

/* Code in a dialog (setup examples, a check's evidence). */
.d-code { margin: 0; padding: .75rem .875rem; border-radius: var(--r-2); background: var(--surface-sunk); font: 400 var(--t-data-s)/1.6 var(--font-data); color: var(--ink); white-space: pre-wrap; word-break: break-word; font-variant-ligatures: none; }
.d-kv { display: grid; grid-template-columns: 8rem minmax(0, 1fr); gap: .375rem .75rem; margin: 0; font-size: var(--t-small); }
.d-kv dt { color: var(--ink-3); }
.d-kv dd { margin: 0; font-family: var(--font-data); font-size: var(--t-data-s); overflow-wrap: anywhere; font-variant-ligatures: none; }

/* A tag name being renamed in place. */
.d-rename { display: flex; gap: .375rem; align-items: center; }
.d-rename .d-input { height: var(--control-s); width: 11rem; }

/* Phone More tab is a button that opens a sheet. */
.d-tabbar button { border: 0; background: none; font-family: inherit; cursor: pointer; }

.d-input.is-invalid, .d-textarea.is-invalid, .d-field.is-invalid .d-textarea { border-color: var(--down); }
.d-step[data-go] { cursor: pointer; }
.d-step[data-go]:hover span:last-child { text-decoration: underline; }
.d-badgepreview[data-shape="bar"] { border-radius: var(--r-1); width: 100%; justify-content: space-between; }
.d-badgepreview[data-shape="text"] { background: none; border: 0; padding: 0; }
.d-note + .d-note { margin-top: .75rem; }
.d-avatarbtn { display: grid; place-items: center; width: var(--tap); height: var(--tap); padding: 0; border: 0; background: none; border-radius: 50%; cursor: pointer; }
input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
/* A long dialog scrolls under its own footer: the actions stay in reach. */
.d-dialog__foot { position: sticky; bottom: 0; background: var(--surface); z-index: 1; }
.d-dialog__head { position: sticky; top: 0; background: var(--surface); z-index: 1; }
.d-dialog .d-field .d-inline { flex-wrap: wrap; }
.d-cal__presets { scrollbar-width: none; }
.d-cal__presets::-webkit-scrollbar { display: none; }

/* ---- Alignment and hover pass (2026-09-27). ----------------------------
   Inline controls sit on the middle of the line, not the text baseline, so
   an icon-only button lines up with a labelled one beside it. */
.d-btn, .d-dd, .d-date, .d-seg, .d-switch, .d-star, .d-chip, .d-state, .d-avatar, .d-ws__logo { vertical-align: middle; }
.d-acts { vertical-align: middle; }

/* Every interactive thing answers the pointer. One vocabulary: a surface
   lift for areas, ink for text links, the accent for what is selected. */
.d-star { transition: color var(--d-fast) var(--ease), background var(--d-fast) var(--ease); }
.d-star:hover { color: var(--degraded-bar); background: var(--surface-2); }
.d-me { transition: background var(--d-fast) var(--ease); border-radius: var(--r-2); }
.d-me:hover { background: color-mix(in srgb, var(--ink) 6%, transparent); }
.d-avatarbtn:hover .d-avatar { box-shadow: 0 0 0 2px var(--line-strong); }
.d-link { text-underline-offset: .15em; }
.d-link:hover { color: var(--ink); text-decoration-thickness: 2px; }
a.d-live, .d-livestrip { transition: filter var(--d-fast) var(--ease), background var(--d-fast) var(--ease); }
a.d-live:hover { filter: brightness(.96); text-decoration: none; }
a.d-live:hover .d-live__what { text-decoration: underline; text-underline-offset: .15em; }
.d-livestrip:hover { background: color-mix(in srgb, var(--down) 16%, var(--surface)); }
a.d-name:hover b { text-decoration: underline; text-underline-offset: .15em; }

.d-inbox__row { transition: background var(--d-fast) var(--ease); }
.d-inbox__row:hover { background: var(--surface-2); }
.d-inbox__row a:hover b { text-decoration: underline; text-underline-offset: .15em; }
.d-search { transition: border-color var(--d-fast) var(--ease); }
.d-search:hover { border-color: var(--line-strong); }
.d-search:focus-within { border-color: transparent; outline: 2px solid var(--accent); outline-offset: -1px; }
.d-banner__more:hover { color: var(--ink); text-decoration: underline; }
.d-switch:hover { filter: brightness(.94); }
.d-switch:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.ed-sw { transition: transform var(--d-fast) var(--ease); }
.ed-sw:hover { transform: scale(1.08); }
.d-tabbar a:hover, .d-tabbar button:hover { color: var(--ink); }
.d-plan .d-btn:hover { border-color: var(--line-strong); }
.d-rowlist li a:hover { text-decoration: underline; text-underline-offset: .15em; }

/* ---- Phone pass (2026-09-27): the review of every page at 390. ---------- */
p, .d-help, .d-meta, .d-name__sub { text-wrap: pretty; }
.d-wizard__foot > .d-btn--quiet:first-child { margin-left: -.625rem; }
@media (max-width: 56.25em) {
  /* List cards. Actions get their own row so names never starve; a card
     with a tag (monitors) keeps tag and actions on one row. */
  .d-list tbody tr { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name state" "now uptime" "strip strip" "acts acts"; }
  .d-list tbody tr:has(> td[data-cell="tag"]) { grid-template-columns: minmax(0, 1fr) auto auto; grid-template-areas: "name star state" "tag acts acts" "now uptime uptime" "strip strip strip"; }
  .d-list td[data-cell="state"] { align-self: start; }
  .d-list td[data-cell="name"] b, .d-name__sub { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; }
  .d-list td[data-cell="now"] { white-space: nowrap; }
  .d-list td[data-cell="uptime"] { justify-self: end; }
  .d-list td[data-cell="acts"] { justify-content: flex-end; align-items: center; }
  .d-list td[data-cell="acts"]:empty { display: none; }
  .d-list td[data-cell="acts"] .d-btn { height: var(--tap); width: auto; min-width: var(--tap); padding: 0 .875rem; }
  .d-list td[data-cell="acts"] .d-btn--icon { width: var(--tap); padding: 0; }
  .d-list td[data-cell="tag"] { align-self: center; }
  /* Card heads: the action at the right edge and tall enough to tap. */
  .d-card__head .d-meta + .d-btn { margin-left: auto; }
  .d-card__head .d-btn { height: var(--tap); }
  .d-card__head a.d-meta { display: inline-flex; align-items: center; min-height: var(--tap); }
  /* One height per toolbar row. */
  .d-toolbar .d-search, .d-toolbar .d-input, .d-toolbar .d-dd__btn, .d-toolbar .d-btn, .d-toolbar .d-date { height: var(--tap); }
  /* A segmented choice in a form stays on one line. */
  .d-field > .d-seg { flex-wrap: nowrap; width: 100%; }
  .d-field > .d-seg button { flex: 1 1 auto; justify-content: center; padding: 0 .5rem; }
  /* A switch stays at the right of its setting. */
  .d-settings li:has(> .d-switch) { flex-wrap: nowrap; }
  /* Short lists: the pill keeps its size, the titles share one edge. */
  .d-rowlist li { grid-template-columns: auto minmax(0, 1fr); }
  .d-rowlist .d-state { justify-self: start; }
  .d-checks li { grid-template-columns: 4.75rem minmax(0, 1fr) auto; }
}

/* ---- The day card on every strip bar (2026-09-27). ---------------------
   CSS only: hover, focus or a tap shows the day. The public page carries no
   script, so this must not need any. Bars near either end open inward. */
.d-list { overflow: visible; }
.d-list thead th:first-child { border-top-left-radius: var(--r-3); }
.d-list thead th:last-child { border-top-right-radius: var(--r-3); }
.d-list tbody tr:last-child td:first-child { border-bottom-left-radius: var(--r-3); }
.d-list tbody tr:last-child td:last-child { border-bottom-right-radius: var(--r-3); }
.d-strip { position: relative; }
.d-strip i { position: relative; cursor: default; outline: none; }
.d-strip i.m { background: var(--pending-bar); }
.d-strip i:hover, .d-strip i:focus { z-index: 5; }
.d-strip i::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--ink); opacity: 0; transition: opacity var(--d-fast) var(--ease); }
.d-strip i:hover::before, .d-strip i:focus-within::before { opacity: .28; }
.d-strip i:focus-visible { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--accent); }
.d-tip { position: absolute; bottom: calc(100% + .625rem); left: 50%; z-index: 45; width: max-content; min-width: 13rem; max-width: 20rem; display: grid; gap: .25rem;
  padding: .75rem 1rem .8125rem; border-radius: var(--r-3); background: var(--surface); color: var(--ink); box-shadow: var(--shadow-float);
  font: 400 var(--t-body)/1.4 var(--font-ui); text-align: left; white-space: normal; cursor: auto;
  opacity: 0; visibility: hidden; transform: translate(-50%, 4px); transition: opacity 120ms var(--ease) 140ms, transform 120ms var(--ease) 140ms, visibility 0s linear 260ms; }
.d-tip::after { content: ""; position: absolute; top: 100%; left: 50%; width: .5rem; height: .5rem; background: var(--surface); transform: translate(-50%, -50%) rotate(45deg); box-shadow: 2px 2px 3px -1px rgba(18, 19, 21, .12); }
.d-strip i:hover .d-tip, .d-strip i:focus-within .d-tip { opacity: 1; visibility: visible; pointer-events: auto; transform: translate(-50%, 0); transition-delay: 0s; }
.d-strip i:hover, .d-strip i:focus-within { z-index: 6; }
.d-tip time { font: 500 var(--t-data-s) var(--font-data); color: var(--ink-3); font-variant-ligatures: none; }
.d-tip__s { display: flex; align-items: center; gap: .375rem; font-weight: 600; }
.d-tip__s::before { content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: var(--up-bar); flex: none; }
.d-tip__s--d::before { background: var(--down-bar); border-radius: 1px; transform: rotate(45deg); width: .4375rem; height: .4375rem; }
.d-tip__s--g::before { background: none; width: 0; height: 0; border-radius: 0; border-left: .28rem solid transparent; border-right: .28rem solid transparent; border-bottom: .5rem solid var(--degraded-bar); }
.d-tip__s--n::before { background: var(--nodata-bar); }
.d-tip__s--p::before, .d-tip__s--m::before { background: none; border: 2px solid var(--pending-bar); width: .375rem; height: .375rem; }
.d-tip__d { color: var(--ink-2); }
/* Bars near the ends open their card inward. */
.d-strip i:nth-child(-n+8) .d-tip { left: -.25rem; transform: translate(0, 4px); }
.d-strip i:nth-last-child(-n+8) .d-tip { left: auto; right: -.25rem; transform: translate(0, 4px); }
.d-strip i:nth-child(-n+8):is(:hover, :focus-within) .d-tip, .d-strip i:nth-last-child(-n+8):is(:hover, :focus-within) .d-tip { transform: translate(0, 0); }
.d-strip i:nth-child(-n+8) .d-tip::after { left: .75rem; }
.d-strip i:nth-last-child(-n+8) .d-tip::after { left: auto; right: .25rem; }
.d-strip--l i:nth-child(-n+16) .d-tip, .pub-strip i:nth-child(-n+16) .d-tip { left: -.25rem; right: auto; transform: translate(0, 4px); }
.d-strip--l i:nth-last-child(-n+16) .d-tip, .pub-strip i:nth-last-child(-n+16) .d-tip { left: auto; right: -.25rem; transform: translate(0, 4px); }
.d-strip--l i:nth-child(-n+16):is(:hover, :focus-within) .d-tip, .pub-strip i:nth-child(-n+16):is(:hover, :focus-within) .d-tip,
.d-strip--l i:nth-last-child(-n+16):is(:hover, :focus-within) .d-tip, .pub-strip i:nth-last-child(-n+16):is(:hover, :focus-within) .d-tip { transform: translate(0, 0); }
.d-strip--l i:nth-child(-n+16) .d-tip::after, .pub-strip i:nth-child(-n+16) .d-tip::after { left: .75rem; right: auto; }
.d-strip--l i:nth-last-child(-n+16) .d-tip::after, .pub-strip i:nth-last-child(-n+16) .d-tip::after { left: auto; right: .25rem; }
@media (max-width: 56.25em) {
  /* On a phone a 90-day strip shows its last 30; the first shown opens right. */
  .d-strip--l i:nth-child(n+61):nth-child(-n+70) .d-tip, .pub-strip i:nth-child(n+61):nth-child(-n+70) .d-tip { left: -.25rem; right: auto; transform: translate(0, 4px); }
  .d-strip--l i:nth-child(n+61):nth-child(-n+70):is(:hover, :focus-within) .d-tip, .pub-strip i:nth-child(n+61):nth-child(-n+70):is(:hover, :focus-within) .d-tip { transform: translate(0, 0); }
  .d-strip--l i:nth-child(n+61):nth-child(-n+70) .d-tip::after, .pub-strip i:nth-child(n+61):nth-child(-n+70) .d-tip::after { left: .75rem; right: auto; }
  .d-tip { max-width: min(16rem, calc(100vw - 3rem)); }
}


/* A day card with somewhere to go. The card is a child of its bar, so the
   pointer can move into it and it stays; the short delay covers the gap. */
.d-strip i.has-link { cursor: pointer; }
.d-tip time { font-size: var(--t-data-s); }
.d-tip__s { font-size: var(--t-body); }
.d-tip__d { font-size: var(--t-small); }
.d-tip__a { display: inline-flex; align-items: center; gap: .375rem; justify-self: start; margin-top: .375rem; padding: .375rem .625rem; border-radius: var(--r-2); background: var(--accent-ground); color: var(--accent-ink); font: 600 var(--t-small) var(--font-ui); text-decoration: none; }
.d-tip__a:hover { background: var(--accent); color: var(--ink-on-accent); }
.d-tip__a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.pub-body .d-tip__a { background: color-mix(in srgb, var(--brand) 10%, var(--surface)); color: var(--brand); }
.pub-body .d-tip__a:hover { background: var(--brand); color: var(--brand-ink); }
@media (max-width: 56.25em) { .d-tip { min-width: 12rem; max-width: min(20rem, calc(100vw - 2.5rem)); } }
body:has(.d-savebar:not([hidden])) .d-toast { bottom: 6.5rem; }
/* Hover intent: a card opens when the pointer rests on its bar, so a path
   across the neighbours to reach a card's link opens none of theirs.
   A tap or the keyboard opens it at once. */
.d-strip i:hover .d-tip { transition: opacity 120ms var(--ease) 130ms, transform 120ms var(--ease) 130ms, visibility 0s linear 130ms; }
.d-strip i:focus-within .d-tip { transition-delay: 0s; }

/* Red buttons keep their red on hover; a red-text button tints on hover. */
.d-btn--danger:hover { background: color-mix(in srgb, var(--down) 84%, #000); border-color: color-mix(in srgb, var(--down) 84%, #000); color: #fff; }
.d-btn--danger:disabled { background: var(--down); border-color: var(--down); color: #fff; }
.d-btn.d-menu__danger:hover { background: var(--down-ground); border-color: color-mix(in srgb, var(--down) 35%, transparent); }

/* ---- Toast kinds (2026-09-27). The ink pill stays; a coloured mark says
   what kind of news it is, and a thin line runs out while Undo lasts. ---- */
.d-toast { overflow: hidden; gap: .625rem; padding: .5rem .5rem .5rem .5rem; padding-right: 1.125rem; font-size: var(--t-body); font-weight: 500; animation: d-toast-in 320ms cubic-bezier(.16, 1, .3, 1); }
.d-toast.has-undo { padding-right: .5rem; }
.d-toast.is-leaving { animation: d-toast-out 200ms var(--ease) forwards; }
@keyframes d-toast-in { from { opacity: 0; transform: translate(-50%, 1rem) scale(.96); } }
@keyframes d-toast-out { to { opacity: 0; transform: translate(-50%, .5rem) scale(.98); } }
.d-toast__mark { width: 1.75rem; height: 1.75rem; border-radius: 50%; display: grid; place-items: center; flex: none; background: color-mix(in srgb, var(--up-bar) 24%, transparent); color: var(--up-bar); }
.d-toast__mark .d-i { width: 1rem; height: 1rem; stroke-width: 2.5; }
.d-toast--info .d-toast__mark { background: color-mix(in srgb, var(--pending-bar) 28%, transparent); color: var(--pending-bar); }
.d-toast--warn .d-toast__mark { background: color-mix(in srgb, var(--degraded-bar) 26%, transparent); color: var(--degraded-bar); }
.d-toast--error .d-toast__mark { background: color-mix(in srgb, var(--down-bar) 26%, transparent); color: var(--down-bar); }
.d-toast.has-undo::after { content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 100%; background: color-mix(in srgb, var(--ground) 55%, transparent); transform-origin: left; animation: d-toast-time var(--toast-ms, 5s) linear forwards; }
@keyframes d-toast-time { to { transform: scaleX(0); } }
.d-toast button { margin-left: .375rem; }
.d-states .d-toast { animation: none; }
@media (prefers-reduced-motion: reduce) { .d-toast, .d-toast.is-leaving { animation: none; } .d-toast.has-undo::after { animation: none; } }

/* ---- The bell opens the inbox's latest (2026-09-27). --------------------- */
button.d-bell { border: 0; background: none; cursor: pointer; padding: 0; }
.d-bell[aria-expanded="true"] { background: var(--surface-2); color: var(--ink); }
.d-bellpanel { width: 25rem; padding: 0; overflow: hidden; display: block; }
.d-bellpanel.is-sheet { width: 100%; padding: .5rem 0 calc(.75rem + env(safe-area-inset-bottom)); }
.d-bellpanel__head { display: flex; align-items: center; gap: .5rem; padding: .75rem .75rem .625rem 1rem; border-bottom: 1px solid var(--line); }
.d-bellpanel__head b { font: 600 var(--t-body) var(--font-ui); }
.d-bellpanel__head .d-btn { margin-left: auto; width: auto; height: var(--control-s); }
.d-bellpanel .d-inbox { max-height: 22rem; overflow-y: auto; border: 0; border-radius: 0; box-shadow: none; }
.d-bellpanel .d-inbox__row { padding: .625rem .75rem .625rem 1rem; }
.d-bellpanel .d-menu__a, .d-bellpanel a, .d-bellpanel button { height: auto; }
.d-bellpanel .d-inbox__row a { display: grid; padding: 0; width: auto; }
.d-bellpanel .d-inbox__row .d-btn { width: var(--control-s); height: var(--control-s); padding: 0; justify-content: center; }
.d-bellpanel__foot { display: flex !important; align-items: center; justify-content: center; gap: .375rem; height: 2.75rem !important; border-top: 1px solid var(--line); font-weight: 600; color: var(--accent-ink) !important; border-radius: 0 !important; }
.d-bellpanel__foot:hover { background: var(--surface-2); }

/* ---- Plan gates: the feature stays in view, a lock says why, a tap says
   what the plan adds and how to get it (RULES 6). ------------------------ */
.d-gate-tag { display: inline-flex; align-items: center; gap: .25rem; height: 1.25rem; padding: 0 .4375rem; margin-left: .375rem; border-radius: var(--r-pill); background: var(--accent-ground); color: var(--accent-ink); font: 600 .6875rem var(--font-ui); vertical-align: middle; white-space: nowrap; }
.d-gate-tag .d-i { width: .6875rem; height: .6875rem; stroke-width: 2.5; }
.d-seg button.is-gated { color: var(--ink-3); gap: .3125rem; }
.d-seg button.is-gated .d-i { width: .75rem; height: .75rem; color: var(--accent-ink); }
.d-seg button.is-gated:hover { color: var(--accent-ink); background: var(--accent-ground); }
.d-btn--upgrade { background: var(--accent-ground); border-color: transparent; color: var(--accent-ink); font-weight: 600; }
.d-btn--upgrade:hover { background: var(--accent); border-color: var(--accent); color: var(--ink-on-accent); }
.d-link--btn { border: 0; background: none; padding: 0; font: inherit; color: var(--accent-ink); text-decoration: underline; text-underline-offset: .15em; cursor: pointer; }
input.d-cb[data-upgrade] { cursor: pointer; }
.d-upgrade { width: min(28rem, calc(100vw - 2rem)); overflow: hidden; }
.d-upgrade__hero { position: relative; display: flex; align-items: flex-end; gap: .75rem; height: 6.5rem; padding: 1rem 1.25rem; background: radial-gradient(120% 140% at 0% 0%, color-mix(in srgb, var(--accent) 22%, var(--surface)) 0%, var(--accent-ground) 45%, var(--surface) 100%); }
.d-upgrade__hero .d-dialog__x { position: absolute; top: .75rem; right: .75rem; margin: 0; }
.d-upgrade__mark { width: 3rem; height: 3rem; border-radius: var(--r-3); display: grid; place-items: center; background: var(--accent); color: var(--ink-on-accent); box-shadow: 0 .5rem 1.25rem -.5rem color-mix(in srgb, var(--accent) 70%, transparent); }
.d-upgrade__mark .d-i { width: 1.5rem; height: 1.5rem; }
.d-upgrade__plan { display: inline-flex; align-items: center; gap: .3125rem; height: 1.5rem; padding: 0 .625rem; border-radius: var(--r-pill); background: var(--surface); color: var(--accent-ink); font: 600 var(--t-small) var(--font-ui); box-shadow: 0 0 0 1px var(--line); }
.d-upgrade__plan .d-i { width: .75rem; height: .75rem; }
.d-upgrade h2 { margin: .25rem 0 0; font: 600 1.25rem var(--font-title); color: var(--ink); }
.d-upgrade .d-dialog__body > p { color: var(--ink-2); }
.d-upgrade__list { list-style: none; margin: 0; padding: 0; display: grid; gap: .375rem; color: var(--ink); font-size: var(--t-small); }
.d-upgrade__list li { display: flex; align-items: center; gap: .5rem; }
.d-upgrade__list .d-i { width: .875rem; height: .875rem; color: var(--up); stroke-width: 2.5; }
.d-upgrade__price { padding-top: .75rem; border-top: 1px solid var(--line); font-size: var(--t-small); }
.d-upgrade__price b { font: 600 1.125rem var(--font-data); color: var(--ink); font-variant-ligatures: none; }

/* ---- The explanation: written by AI, and it looks like it (D-49). ------- */
.d-explain { position: relative; background: linear-gradient(135deg, var(--explain-ground) 0%, color-mix(in srgb, var(--explain-ground) 35%, var(--surface)) 100%); border: 1px solid color-mix(in srgb, var(--explain) 20%, transparent); border-radius: var(--r-3); padding: .75rem 1rem .8125rem; }
.d-explain__label .d-i { color: var(--explain); }
.d-explain__ai { display: inline-flex; align-items: center; height: 1.125rem; padding: 0 .4375rem; margin-left: .25rem; border-radius: var(--r-pill); background: color-mix(in srgb, var(--explain) 14%, transparent); color: var(--explain); font: 600 .6875rem var(--font-ui); }
.d-explain--lead { padding: 1.25rem 1.5rem 1rem; box-shadow: 0 1rem 2.5rem -1.75rem color-mix(in srgb, var(--explain) 60%, transparent); }
.d-explain--lead .d-explain__label { font-size: var(--t-body); margin-bottom: .5rem; }
.d-explain--lead p { font-size: 1.125rem; line-height: 1.5; max-width: 68ch; color: var(--ink); }
.d-explain__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem; margin-top: .875rem; padding-top: .75rem; border-top: 1px solid color-mix(in srgb, var(--explain) 16%, transparent); }
.d-explain__foot .d-explain__meta { margin: 0; }
.d-explain__acts { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.d-explain__vote { display: inline-flex; align-items: center; gap: .125rem; font-size: var(--t-small); color: var(--ink-3); }

/* ---- Evidence rows open their check. -------------------------------------- */
[data-ck] { cursor: pointer; transition: background var(--d-fast) var(--ease); }
[data-ck]:hover, [data-ck].is-open { background: var(--surface-2); }
[data-ck]:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.d-ck__result { display: flex; align-items: center; gap: .75rem; }
.d-ck__result .d-state { font-size: 1rem; height: 2rem; padding: 0 .75rem; }
.d-ck__result b { display: block; font-weight: 600; }
.d-ck__phases { display: flex; gap: 2px; height: 1.75rem; border-radius: var(--r-1); overflow: hidden; }
.d-ck__phases i { position: relative; min-width: 2.25rem; display: grid; place-items: center; font: 500 .6875rem var(--font-data); font-style: normal; color: var(--ink); font-variant-ligatures: none; }
.d-ck__phases i.p0 { background: color-mix(in srgb, var(--pending-bar) 45%, var(--surface)); }
.d-ck__phases i.p1 { background: color-mix(in srgb, var(--pending-bar) 65%, var(--surface)); }
.d-ck__phases i.p2 { background: color-mix(in srgb, var(--explain) 35%, var(--surface)); }
.d-ck__phases i.p3 { background: color-mix(in srgb, var(--degraded-bar) 50%, var(--surface)); }
.d-ck__phases i.p4 { background: color-mix(in srgb, var(--up-bar) 40%, var(--surface)); }
.d-ck__phases i[style*="flex:1;"] { display: none; }
.d-ck__legend { display: flex; gap: .875rem; font-size: .75rem; color: var(--ink-3); }
.d-ck__nav { display: inline-flex; align-items: center; gap: .375rem; margin-right: auto; }
@media (max-width: 56.25em) { .d-ck__nav { flex-basis: 100%; order: -1; justify-content: center; } .d-ck__nav .d-btn { flex: none !important; } .d-bellpanel { width: 100%; } }

/* ---- Custom domain card. ---------------------------------------------- */
.dm-side { flex-wrap: nowrap; }
.dm-steps { display: grid !important; gap: .875rem; background: var(--surface-2); }
.dm-steps[hidden] { display: none !important; }
.dm-lead { margin: 0; font-size: var(--t-small); color: var(--ink-2); }
.dm-rec { display: grid; border: 1px solid var(--line-2); border-radius: var(--r-2); background: var(--surface); overflow: hidden; }
.dm-rec > div { display: grid; grid-template-columns: 5rem 1fr 1.6fr; align-items: center; gap: .75rem; padding: .5rem .75rem; }
.dm-rec > div + div { border-top: 1px solid var(--line); }
.dm-rec__head { background: var(--surface-2); font-size: .75rem; font-weight: 600; color: var(--ink-3); }
.dm-rec [role="cell"] { display: flex; align-items: center; gap: .25rem; min-width: 0; overflow-wrap: anywhere; }
.dm-check { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; }
.dm-check .d-meta b { color: var(--degraded); }
.d-spin { animation: d-spin 900ms linear infinite; }
@keyframes d-spin { to { transform: rotate(360deg); } }
@media (max-width: 56.25em) { .dm-rec > div { grid-template-columns: 4rem 1fr; } .dm-rec > div > :nth-child(3) { grid-column: 1 / -1; } .dm-rec__head { display: none !important; } }

/* ---- Pages outside the app: sign in, a code, an invitation, an email's
   one action. One card under the mark, nothing else to look at. ---------- */
.au-body { margin: 0; min-height: 100vh; background: radial-gradient(90% 60% at 50% 0%, var(--accent-ground), var(--ground) 70%); color: var(--ink); font: 400 var(--t-body)/1.5 var(--font-ui); }
.au { max-width: 26rem; margin: 0 auto; padding: var(--s-8) var(--gutter-phone) var(--s-6); display: grid; gap: var(--s-5); justify-items: stretch; }
.au-mark { justify-self: center; display: inline-flex; align-items: center; gap: .5rem; font: 700 1.25rem var(--font-title); letter-spacing: -.02em; color: var(--ink); text-decoration: none; }
.au-mark svg { width: 1.75rem; height: .625rem; fill: currentColor; }
.au-card { display: grid; gap: .875rem; padding: var(--s-6); background: var(--surface); border-radius: 1.125rem; box-shadow: 0 1px 0 var(--line), 0 1.5rem 3rem -2rem rgba(18, 19, 21, .35); }
.au-card h1 { margin: 0; font: 600 1.5rem/1.2 var(--font-title); letter-spacing: -.02em; }
.au-lead { margin: 0; color: var(--ink-2); }
.au-form { display: grid; gap: .75rem; }
.au-wide { width: 100%; height: var(--tap); }
.au-or { display: flex; align-items: center; gap: .75rem; font-size: var(--t-small); color: var(--ink-3); }
.au-or::before, .au-or::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.au-alt { display: grid; gap: .5rem; }
.au-note { margin: 0; font-size: var(--t-small); color: var(--ink-3); text-align: center; }
.au-foot { margin: 0; text-align: center; font-size: .75rem; color: var(--ink-3); }
.au-foot a { color: var(--ink-3); }
.au-back { display: inline-flex; align-items: center; gap: .375rem; font-size: var(--t-small); color: var(--ink-2); text-decoration: none; }
.au-code { display: grid; grid-template-columns: repeat(6, 1fr); gap: .5rem; }
.au-digit { height: 3.25rem; padding: 0; text-align: center; font: 600 1.375rem var(--font-data); font-variant-ligatures: none; }
.au-code.is-wrong .au-digit { border-color: var(--down); animation: au-shake 300ms; }
.au-code.is-wrong + .au-codemsg { color: var(--down); }
@keyframes au-shake { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
.au-ws { width: 3rem; height: 3rem; border-radius: var(--r-3); display: grid; place-items: center; background: var(--ink); color: var(--ground); font: 600 1.125rem var(--font-title); }
.au-rows li { grid-template-columns: 7rem 1fr; }
.au-okmark { width: 3rem; height: 3rem; border-radius: 50%; display: grid; place-items: center; background: var(--up-ground); color: var(--up); }
.au-okmark .d-i { width: 1.5rem; height: 1.5rem; stroke-width: 2.5; }
.au-done { display: flex; align-items: center; gap: .5rem; margin: 0; padding: .75rem .875rem; border-radius: var(--r-2); background: var(--up-ground); color: var(--up); font-weight: 600; }
.au-code404 { font-size: 2.5rem; font-weight: 600; color: var(--ink-3); letter-spacing: -.04em; }
.au-pubhead { justify-self: center; }
.au-card > .d-state { justify-self: start; }
.au-card > [data-ack-ask], .au-card > [data-stop-ask], .au-card > [data-stop-done] { display: grid; gap: .875rem; }
.au-card > [hidden] { display: none !important; }
/* A notice or an error at the top of an auth card is the banner; the card's
   own gap spaces it, so the page banner's margin goes. */
.au-card > .d-banner { margin: 0; }
/* The app approval (#1214) sets out rows, two choices and a warning, so
   its card is wider. The app's name and the line under it read as one
   block, left aligned, and the warning's text lines up under its title
   rather than under the icon. The workspace dropdown fills its field. */
.au--wide { max-width: 32rem; }
.au-app { display: grid; gap: .25rem; }
.au-app .au-note { text-align: start; }
.au-dd { display: flex; width: 100%; }
@media (min-width: 56.3125em) {
  .au--wide .d-banner__body > :not(:first-child) { grid-column: 2 / -1; }
}
/* The bot check is the provider's own widget in an iframe; this is its
   stand-in, sized as the widget is (65px high, the card's width), so the
   form is drawn with it in place. The real one is not styled by us. */
.au-bot { display: flex; align-items: center; gap: .625rem; min-height: 4.0625rem; padding: .75rem 1rem; border: 1px solid var(--line-2); border-radius: var(--r-2); background: var(--surface-2); color: var(--ink-2); font-size: var(--t-small); }
.au-bot__ok { color: var(--up); }
.au-bot__bad { color: var(--down); }
.au-bot__end { margin-left: auto; }
.d-field.is-invalid .au-bot { border-color: var(--down); }
/* The fragment error panel inside a list: one row, no hover, the full
   width on a phone where rows are cards. */
.d-empty-row td > .d-empty { padding: var(--s-6) var(--s-4); color: var(--ink); }
.d-list tbody tr.d-empty-row:hover td { background: none; }
@media (max-width: 56.25em) {
  .d-list tbody tr.d-empty-row, .d-list tbody tr.d-empty-row td { display: block; }
}
/* The states page: the fragment panels sit apart from the open menus. */
.d-states + .d-stack { margin-top: var(--s-8); }
/* The Telegram step inside Add a channel. */
.tg { display: grid; gap: .75rem; padding: .875rem 1rem; border-radius: var(--r-2); background: var(--surface-2); }
.tg-steps { margin: 0; padding-left: 1.25rem; display: grid; gap: .75rem; }
.tg-steps li { display: grid; gap: .125rem; justify-items: start; }
.tg-steps span { font-size: var(--t-small); color: var(--ink-3); }
.tg-steps .d-btn { margin-top: .25rem; }
.tg-code { display: inline-flex !important; align-items: center; gap: .25rem; font-size: 1.25rem !important; color: var(--ink) !important; letter-spacing: .08em; }
.tg-status { display: flex; align-items: center; gap: .5rem; margin: 0; font-size: var(--t-small); color: var(--ink-2); }
.tg-status.is-ok { color: var(--up); font-weight: 600; }

/* ---- Badges: five styles, light and dark. The page's state is the
   colour; the rest is the page's name and the Upglory mark. ------------- */
.bdg-grid { --b-bg: #FFFFFF; --b-ink: #121315; --b-ink-2: #5C5A55; --b-line: rgba(18, 19, 21, .14); --b-state: #D6972B; --b-state-ink: #8A5300;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: .5rem; }
.bdg-grid[data-theme="dark"] { --b-bg: #1A1C20; --b-ink: #F1EEE6; --b-ink-2: #A9A499; --b-line: rgba(241, 238, 230, .16); --b-state-ink: #F0B45A; }
.bdg-opt { position: relative; display: grid; gap: .625rem; justify-items: center; align-content: space-between; padding: 1rem .75rem .625rem; border: 1px solid var(--line-2); border-radius: var(--r-2); background: var(--surface-2); cursor: pointer; transition: border-color var(--d-fast) var(--ease), background var(--d-fast) var(--ease); }
.bdg-grid[data-theme="dark"] .bdg-opt { background: #0F1012; }
.bdg-opt:hover { border-color: var(--line-strong); }
.bdg-opt:has(:checked) { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.bdg-opt:has(:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.bdg-opt > .d-rb { position: absolute; opacity: 0; pointer-events: none; }
.bdg-opt > b { font: 600 .75rem var(--font-ui); color: var(--ink-2); }
.bdg-grid[data-theme="dark"] .bdg-opt > b { color: #A9A499; }
.bdg { display: inline-flex; align-items: center; gap: .375rem; font: 600 .75rem/1 var(--font-ui); color: var(--b-ink); white-space: nowrap; }
.bdg__dot { width: .5rem; height: .5rem; border-radius: 50%; background: var(--b-state); flex: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--b-state) 22%, transparent); }
.bdg--pill { height: 1.375rem; padding: 0 .625rem 0 .5rem; border-radius: 999px; background: var(--b-bg); border: 1px solid var(--b-line); }
.bdg--mark { height: 1.5rem; padding: 0 .5rem 0 0; border-radius: .375rem; background: var(--b-bg); border: 1px solid var(--b-line); overflow: hidden; gap: .5rem; }
.bdg--mark .bdg__brand { display: grid; place-items: center; align-self: stretch; padding: 0 .4375rem; background: var(--b-ink); color: var(--b-bg); }
.bdg--mark .bdg__brand svg { width: 1.125rem; height: .4rem; fill: currentColor; }
.bdg--mark .bdg__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; color: var(--b-ink-2); font-weight: 500; }
.bdg--mark .bdg__state { display: inline-flex; align-items: center; gap: .3125rem; flex: none; }
/* A badge stays inside its tile's padding: a long page name on the mark
   gives way with an ellipsis rather than pushing out to the edges (#543). */
.bdg-opt > .bdg { max-width: 100%; }
.bdg--bar { height: 1.25rem; border-radius: .25rem; overflow: hidden; gap: 0; font: 500 .6875rem/1 var(--font-data); font-variant-ligatures: none; }
.bdg--bar span { height: 100%; display: grid; place-items: center; padding: 0 .4375rem; }
.bdg--bar span:first-child { background: #3B3D42; color: #F1EEE6; }
.bdg--bar span:last-child { background: var(--b-state); color: #121315; font-weight: 600; }
.bdg--card { display: grid; gap: .3125rem; width: 10.5rem; padding: .625rem .6875rem; border-radius: .625rem; background: var(--b-bg); border: 1px solid var(--b-line); box-shadow: 0 .375rem 1rem -.625rem rgba(0, 0, 0, .35); white-space: normal; }
.bdg--card .bdg__top { display: flex; align-items: center; gap: .375rem; }
.bdg--card .bdg__logo { width: 1.125rem; height: 1.125rem; border-radius: .25rem; display: grid; place-items: center; background: var(--b-ink); color: var(--b-bg); font: 600 .5rem var(--font-title); }
.bdg--card b { font: 600 .75rem var(--font-title); }
.bdg--card .bdg__state { display: inline-flex; align-items: center; gap: .3125rem; color: var(--b-state-ink); }
.bdg__strip { display: flex; gap: 1px; height: .75rem; }
.bdg__strip i { flex: 1; border-radius: 1px; background: #2E9E68; }
.bdg__strip i.g { background: #D6972B; } .bdg__strip i.d { background: #E8462F; }
.bdg__up { font: 500 .625rem var(--font-data); color: var(--b-ink-2); font-variant-ligatures: none; }
.bdg--text { color: var(--b-state-ink); gap: .4375rem; }
.bdg-row { display: flex; flex-wrap: wrap; gap: .5rem; }
.bdg-code { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .5rem; align-items: start; }
.bdg-code .d-code { margin: 0; }
.d-upgrade .d-dialog__body { padding-top: 1.125rem; }

/* ---- Pass of 2026-09-27, evening. ---------------------------------------- */
/* Choose its own: the channels appear under the choice. */
.d-choice__more { display: none; gap: .375rem; margin: -.25rem 0 .25rem 2.5rem; padding: .625rem .75rem; border-left: 1px solid var(--line-2); }
.d-choice:has(:checked) + .d-choice__more { display: grid; }
.d-ownlist { display: grid; gap: .25rem; padding-left: 1.75rem; transition: opacity var(--d-fast) var(--ease); }
[data-own-group]:has(input[value="follow"]:checked) .d-ownlist { opacity: .45; pointer-events: none; }
/* Unread: a soft tint, a stronger title, and the mark on the row's icon. */
.d-inbox__row.is-unread::before { content: none; }
.d-inbox__row.is-unread { background: color-mix(in srgb, var(--accent-ground) 55%, var(--surface)); }
.d-inbox__row.is-unread:hover { background: color-mix(in srgb, var(--accent-ground) 80%, var(--surface)); }
.d-inbox__row:not(.is-unread) a b { color: var(--ink-2); }
.d-inbox__icon { position: relative; }
.d-inbox__row.is-unread .d-inbox__icon::after { content: ""; position: absolute; top: -3px; right: -3px; width: .5625rem; height: .5625rem; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 2px var(--surface); }
.d-inbox__row.is-unread time { color: var(--accent-ink); font-weight: 600; }
/* The bell panel: one line per item, the time and the action at the right. */
.d-bellpanel { width: 27rem; }
.d-bellpanel .d-inbox__row { grid-template-columns: 2rem minmax(0, 1fr) auto; grid-template-areas: "i t w" "i m b"; gap: .125rem .75rem; padding: .75rem 1rem; }
.d-bellpanel .d-inbox__icon { grid-area: i; align-self: center; }
.d-bellpanel .d-inbox__row a { display: contents; }
.d-bellpanel .d-inbox__row a b { grid-area: t; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--t-small); }
.d-bellpanel .d-inbox__row a .d-meta { grid-area: m; font-size: .75rem; }
.d-bellpanel .d-inbox__row time { grid-area: w; justify-self: end; font-size: .75rem; }
.d-bellpanel .d-inbox__row .d-btn { grid-area: b; justify-self: end; width: 1.5rem; height: 1.5rem; }
@media (hover: hover) { .d-bellpanel .d-inbox__row .d-btn { opacity: 0; } .d-bellpanel .d-inbox__row:hover .d-btn, .d-bellpanel .d-inbox__row .d-btn:focus-visible { opacity: 1; } }
/* The time bar: room for its numbers. */
.d-ck__phases i { min-width: 3.5rem; padding: 0 .5rem; overflow: hidden; white-space: nowrap; }
.d-ck__phases i span { overflow: hidden; text-overflow: clip; }
/* The badge, full width under the settings. */
.bdg-wide { margin-top: var(--s-5); }
.bdg-wide .bdg-pick { display: grid; grid-template-columns: minmax(0, 1fr) 24rem; gap: var(--s-4) var(--s-5); align-items: start; }
.bdg-wide .bdg-grid { grid-row: span 3; grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); }
.bdg-wide .bdg-pick > p { grid-column: 2; }
@media (max-width: 56.25em) { .bdg-wide .bdg-pick { grid-template-columns: 1fr; } .bdg-wide .bdg-grid { grid-row: auto; } .bdg-wide .bdg-pick > p { grid-column: 1; } }

/* ---- The interactive response chart. --------------------------------------- */
.d-ichart { position: relative; width: 100%; min-height: 200px; }
.d-ichart--big { min-height: 320px; }
.d-chart__ylab { font: 400 10px var(--font-data); fill: var(--ink-3); text-anchor: end; font-variant-ligatures: none; }
.d-chart__bandtop { fill: var(--down-bar); }
.d-chart__l1, .d-chart__l2 { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.d-chart__area { stroke: none; opacity: .07; }
.d-chart__area--1 { fill: var(--accent); } .d-chart__area--2 { fill: var(--explain); }
.d-chart__cross { stroke: var(--ink-3); stroke-width: 1; stroke-dasharray: 3 3; }
.d-chart__dot { stroke: var(--surface); stroke-width: 2; }
.d-chart__dot--1 { fill: var(--accent); } .d-chart__dot--2 { fill: var(--explain); }
.d-chart__hit { fill: transparent; cursor: crosshair; }
.d-ichart__tip { position: absolute; top: .25rem; z-index: 5; display: grid; gap: .25rem; min-width: 12rem; padding: .625rem .75rem; border-radius: var(--r-2); background: var(--surface); box-shadow: var(--shadow-float); font-size: var(--t-small); }
.d-ichart__tip time { font: 500 var(--t-data-s) var(--font-data); color: var(--ink-3); font-variant-ligatures: none; }
.d-ichart__row { display: flex; align-items: center; gap: .5rem; }
.d-ichart__row i { width: .625rem; height: 2px; border-radius: 1px; }
.d-ichart__row--1 i { background: var(--accent); } .d-ichart__row--2 i { background: var(--explain); }
.d-ichart__row b { margin-left: auto; font: 600 var(--t-data) var(--font-data); font-variant-ligatures: none; }
.d-ichart__inc { display: inline-flex; align-items: center; gap: .375rem; margin-top: .125rem; padding-top: .375rem; border-top: 1px solid var(--line); color: var(--down); font-weight: 600; text-decoration: none; }
.d-ichart__inc:hover { text-decoration: underline; }
.d-ichart__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; }
.d-legend button { border: 0; background: none; padding: .25rem .375rem; margin: -.25rem 0; border-radius: var(--r-1); font: inherit; color: var(--ink-2); cursor: pointer; display: inline-flex; align-items: center; gap: .375rem; }
.d-legend button:hover { background: var(--surface-2); color: var(--ink); }
.d-legend button[aria-pressed="false"] { color: var(--ink-3); text-decoration: line-through; opacity: .7; }
.d-card__head .d-seg + .d-btn { margin-left: .375rem; }
.bdg-wide .bdg-grid { grid-template-columns: repeat(auto-fill, minmax(15.5rem, 1fr)); }
.bdg-opt { overflow: hidden; }

/* ---- Private notes. ------------------------------------------------------------ */
.nt-card { display: grid; }
.nt-item { display: grid; gap: .375rem; padding: .875rem 1rem; border-bottom: 1px solid var(--line); cursor: pointer; transition: background var(--d-fast) var(--ease); }
.nt-item:hover { background: var(--surface-2); }
.nt-item:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.nt-by { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem .5rem; font-size: var(--t-small); color: var(--ink-3); }
.nt-by .d-avatar { width: 1.375rem; height: 1.375rem; font-size: .625rem; }
.nt-by b { font-weight: 600; color: var(--ink); }
.nt-by .d-mono { font-size: var(--t-data-s); }
.nt-edited { font-style: italic; }
.nt-pin { display: inline-flex; align-items: center; gap: .25rem; height: 1.25rem; padding: 0 .4375rem; border-radius: var(--r-pill); background: var(--degraded-ground); color: var(--degraded); font-weight: 600; font-size: .6875rem; }
.nt-pin .d-i { width: .6875rem; height: .6875rem; fill: currentColor; }
.nt-clamp { position: relative; max-height: 5.75rem; overflow: hidden; }
/* The fade is only on a note the clamp cuts short: the script marks it
   is-clamped when its words run past the box, so a short note reads in
   full ink (#543). */
.nt-clamp.is-clamped::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1.75rem; background: linear-gradient(transparent, var(--surface)); pointer-events: none; }
.nt-item:hover .nt-clamp.is-clamped::after { background: linear-gradient(transparent, var(--surface-2)); }
/* A button or a link alike: the words centred in the card's own row. */
.nt-all { display: flex; align-items: center; justify-content: center; width: 100%; height: 2.5rem; padding: 0 1rem; border: 0; background: none; color: var(--accent-ink); font: 600 var(--t-small) var(--font-ui); text-decoration: none; cursor: pointer; }
.nt-all:hover { background: var(--surface-2); }
.nt-empty { margin: 0; padding: 1rem; font-size: var(--t-small); color: var(--ink-3); }
.nt-md { font-size: var(--t-small); line-height: 1.55; color: var(--ink); }
.nt-md > * { margin: 0 0 .5rem; } .nt-md > :last-child { margin-bottom: 0; }
.nt-md h4 { font: 600 var(--t-body) var(--font-ui); margin-top: .25rem; }
.nt-md ol, .nt-md ul { padding-left: 1.25rem; }
.nt-md code { padding: .0625rem .3125rem; border-radius: .25rem; background: var(--surface-sunk); font: 500 .8125em var(--font-data); font-variant-ligatures: none; }
.nt-md pre { padding: .625rem .75rem; border-radius: var(--r-2); background: var(--surface-sunk); overflow-x: auto; }
.nt-md pre code { padding: 0; background: none; }
.nt-md blockquote { padding: .125rem 0 .125rem .75rem; border-left: 1px solid var(--line-strong); color: var(--ink-2); }
.nt-md a { color: var(--accent-ink); overflow-wrap: anywhere; }
.nt-md hr { border: 0; border-top: 1px solid var(--line); }
.nt-plain { margin: 0; padding: .625rem .75rem; border-radius: var(--r-2); background: var(--surface-sunk); font: 400 var(--t-data-s)/1.55 var(--font-data); white-space: pre-wrap; overflow-wrap: anywhere; font-variant-ligatures: none; }
.nt-read { display: grid; gap: .875rem; }
.nt-read .nt-md { font-size: var(--t-body); }
.nt-compose { display: grid; gap: .625rem; }
.nt-text { min-height: 12rem; font: 400 var(--t-data)/1.55 var(--font-data); font-variant-ligatures: none; }
.nt-preview { min-height: 12rem; padding: .75rem .875rem; border: 1px dashed var(--line-2); border-radius: var(--r-2); }
.nt-opts { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.25rem; }
.nt-opts [data-nt-len] { margin-left: auto; }
.nt-opts [data-nt-len].is-near { color: var(--degraded); font-weight: 600; }
.nt-del { color: var(--down); }
.nt-del:hover { background: var(--down-ground) !important; color: var(--down) !important; }
.nt-allhead { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.nt-bar { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.nt-search { margin: 0; flex: 1 1 14rem; width: auto; height: var(--control); }
.nt-list { display: grid; border: 1px solid var(--line); border-radius: var(--r-3); overflow: hidden; }
.nt-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "by kind" "body acts"; gap: .5rem 1rem; padding: .875rem 1rem; border-bottom: 1px solid var(--line); }
.nt-row:last-child { border-bottom: 0; }
.nt-row .nt-by { grid-area: by; } .nt-row .nt-kind { grid-area: kind; justify-self: end; font-size: .75rem; color: var(--ink-3); }
.nt-row .nt-clamp { grid-area: body; cursor: pointer; }
.nt-rowacts { grid-area: acts; display: flex; gap: .25rem; align-self: end; }
@media (max-width: 56.25em) { .nt-row { grid-template-columns: 1fr; grid-template-areas: "by" "kind" "body" "acts"; } .nt-row .nt-kind { justify-self: start; } .nt-rowacts { justify-content: flex-end; } }

/* ---- Banner: the actions share the headline's row; what follows the
   headline (the explanation, the other open incidents) takes the full
   width under it. On a phone the actions come last, full width. -------- */
.d-banner { align-items: start; column-gap: var(--s-4); row-gap: .625rem; }
.d-banner__body { display: contents; }
.d-banner__icon { grid-column: 1; grid-row: 1; align-self: center; }
.d-banner__body > :first-child { grid-column: 2; grid-row: 1; align-self: center; min-width: 0; }
.d-banner__body > :not(:first-child) { grid-column: 1 / -1; min-width: 0; }
.d-banner__acts { grid-column: 3; grid-row: 1; align-self: center; flex-wrap: nowrap; }
@media (max-width: 56.25em) {
  .d-banner__body > :first-child, .d-banner__body > :not(:first-child) { grid-column: 1 / -1; }
  .d-banner__acts { grid-column: 1 / -1; grid-row: auto; order: 9; flex-wrap: wrap; }
}
/* On a phone every field and control that takes text or a tap meets the
   tap rule (2.75rem), and every text field carries 16px text, below which
   iOS zooms the page on focus. min-height wins over the compact heights
   set for a desktop (a table row's rename, the dropdown's filter, a small
   dropdown), so nothing here needs to outrank them. The six code boxes are
   already larger and keep their own size. Desktop is unchanged. */
@media (max-width: 56.25em) {
  .d-input:not(.au-digit), .d-textarea, .d-dd__btn, .d-date, .d-search { min-height: var(--tap); }
  .d-input:not(.au-digit), .d-textarea, .d-search input { font-size: 1rem; }
}

/* ---------- The monitors list, the jobs brief 26 draws ----------
   Hover definitions: the strip's day card (d-tip) behind a state chip, a Now
   figure or "2 more", on hover, keyboard focus and a tap. It opens below
   its chip; --start and --end pin it to that side of the chip. */
.d-hastip { position: relative; display: inline-flex; align-items: center; outline: none; cursor: default; border-radius: var(--r-1); }
.d-hastip:focus-visible { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--accent); }
.d-hastip > .d-tip { bottom: auto; top: calc(100% + .5rem); min-width: 12rem; font-size: var(--t-small); z-index: 46; }
.d-hastip > .d-tip::after { top: 0; }
.d-hastip--start > .d-tip { left: -.25rem; transform: translate(0, -4px); }
.d-hastip--start > .d-tip::after { left: 1rem; }
.d-hastip--end > .d-tip { left: auto; right: -.25rem; transform: translate(0, -4px); }
.d-hastip--end > .d-tip::after { left: auto; right: .75rem; }
.d-hastip:is(:hover, :focus-visible, .is-open) > .d-tip { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition-delay: 0s; }
.d-hastip:is(.d-hastip--start, .d-hastip--end):is(:hover, :focus-visible, .is-open) > .d-tip { transform: none; }
.d-hastip > .d-tip b { font-weight: 600; }
/* A long address (#543, finding 12): one line, cut with an ellipsis, the
   whole of it in a card on hover, keyboard focus and a tap. The card is
   drawn from data-full, so the words are in the page once and never cut;
   the script marks an address that is actually cut (is-cut). A line that
   holds one lets its card out of its own box. */
.d-addr { --addr-room: calc(100vw - 2rem); position: relative; display: block; min-width: 0; max-width: 100%; outline: none; }
.d-addr:not(.d-addr--inline) { contain: inline-size; }
.d-addr--inline { display: inline-block; vertical-align: bottom; }
.d-addr__text { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; overflow-wrap: normal; }
.d-addr.is-cut { cursor: default; }
.d-addr:focus-visible { border-radius: var(--r-1); box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--accent); }
/* The card is drawn only while it is asked for, so a hidden one never
   widens the page; --addr-room is the room to its right, set by the script. */
.d-addr.is-cut:is(:hover, :focus-visible, .is-open):not([data-tip-closed])::after, :focus-visible > .d-addr.is-cut::after, a:focus-visible .d-addr.is-cut::after { content: attr(data-full); position: absolute; left: 0; top: calc(100% + .375rem); z-index: 46; width: max-content; max-width: min(32rem, var(--addr-room)); padding: .5rem .75rem; border-radius: var(--r-2); background: var(--surface); color: var(--ink); box-shadow: var(--shadow-float); font: 400 var(--t-data-s)/1.45 var(--font-data); white-space: normal; overflow-wrap: anywhere; text-align: left; pointer-events: none; animation: d-float-in var(--d-fast) var(--ease); font-variant-ligatures: none; }
:is(.d-name__sub, .d-ph__detail):has(> .d-addr) { overflow: visible; }
.d-list:has(.d-addr) { overflow: visible; }
.d-list:has(.d-addr) thead th:first-child { border-top-left-radius: var(--r-3); }
.d-list:has(.d-addr) thead th:last-child { border-top-right-radius: var(--r-3); }
/* The tips open outside the table, so its corners are rounded without clipping. */
.d-list[data-monitors] { overflow: visible; }
.d-list[data-monitors] thead th:first-child { border-top-left-radius: var(--r-3); }
.d-list[data-monitors] thead th:last-child { border-top-right-radius: var(--r-3); }
/* The list's own find sits in the toolbar at the height of its buttons. */
.d-toolbar .d-search--list { width: 11.5rem; height: var(--control); margin-left: 0; }
/* A picking menu keeps its foot (the line on the picks, Clear, Manage) in view. */
.d-menu--pick .d-menu__foot { position: sticky; bottom: -.375rem; flex-wrap: wrap; align-items: center; margin-bottom: -.375rem; padding-bottom: .5rem; background: var(--surface); }
.d-menu--pick .d-menu__foot > p { flex-basis: 100%; margin: 0; padding: .125rem .375rem; }
.d-menu--pick .d-menu__foot > a { margin-left: auto; }
/* The import preview: the line as it came, and what will happen to it. */
.d-pick--preview li > .d-mono { min-width: 0; font-size: var(--t-data-s); overflow-wrap: anywhere; }
.d-pick--preview li > span:last-child { white-space: nowrap; }
/* A kind the New menu names but cannot make yet (D-184). */
.d-menu [aria-disabled="true"] { color: var(--ink-3); cursor: default; }
.d-menu [aria-disabled="true"]:hover { background: none; }
.d-menu [aria-disabled="true"] .d-i { opacity: .7; }
@media (max-width: 56.25em) {
  .d-list td[data-cell="state"] .d-hastip--start > .d-tip { left: auto; right: -.25rem; }
  .d-list td[data-cell="state"] .d-hastip--start > .d-tip::after { left: auto; right: .75rem; }
  .d-list td:is([data-cell="now"], [data-cell="tag"]) .d-hastip--end > .d-tip { right: auto; left: -.25rem; }
  .d-list td:is([data-cell="now"], [data-cell="tag"]) .d-hastip--end > .d-tip::after { right: auto; left: 1rem; }
  .d-hastip > .d-tip { max-width: calc(100vw - 3rem); }
}

/* ---------- The monitor page, its edit screen and the wizard, brief 27 ----------
   A card's one line when there is nothing to list yet, or the rule under a
   list (both locations must agree). */
.d-card__note { margin: 0; padding: .875rem 1rem; font-size: var(--t-small); color: var(--ink-3); }
.d-checks + .d-card__note { padding: .625rem 1rem; border-top: 1px solid var(--line); }
/* The line under a card's rows that says where the set came from. */
.d-card__line { display: block; margin: .625rem 0 0; }
/* A figure not known yet: the word in its place, quiet, at the figure's height. */
.d-figure__none { display: inline-block; font: 500 1.125rem/1.7 var(--font-ui); letter-spacing: 0; color: var(--ink-3); }
/* A key behind a small mark in a card head, opening the day card. */
.d-card__head > .d-hastip { padding: .25rem; margin: -.25rem -.25rem -.25rem 0; color: var(--ink-3); }
.d-card__head > .d-hastip:hover { color: var(--ink); }
.d-tip__s > .d-tip__d { font-weight: 400; }
/* Incident numbers under the expanded chart's axis, each a link. */
.d-chart__mark { font: 600 11px var(--font-data); fill: var(--down); font-variant-ligatures: none; }
.d-chart__marktick { stroke: var(--down-bar); stroke-width: 2; }
/* Review rows that end in Edit. */
.d-rows--edit li { grid-template-columns: 8rem minmax(0, 1fr) auto; align-items: baseline; }
.d-rows--edit li > span:nth-child(2) { overflow-wrap: anywhere; }
/* The locations, each with its country, wrap rather than run off a phone. */
.d-field .d-inline[data-checks] { flex-wrap: wrap; row-gap: .25rem; }
/* The test check's result on review. */
.d-checks--test { padding: 0; border: 1px solid var(--line); border-radius: var(--r-2); }
/* The phone's one line on a screen that is easier on a computer (D-154). */
.d-phoneline { align-items: center; gap: .5rem; margin: 0; font-size: var(--t-small); color: var(--ink-2); }
.d-phoneline .d-btn { margin-left: auto; }
@media (max-width: 56.25em) {
  .d-card__head > .d-hastip { margin-left: auto; }
  .d-rows--edit li { grid-template-columns: 6.5rem minmax(0, 1fr) auto; }
}