/* Atlas Backups v5. Primitives name values; semantic tokens name jobs; components read only semantic tokens.
   Light is the default; dark comes from the explicit data-theme override, or from the system when the reader chose to match it. Dense by design:
   36 px rows, 32 px controls, one toolbar line per job. */
:root {
	color-scheme: light dark;
	--n-0: #fbfcfb; --n-50: #f3f5f4; --n-100: #e8ecea; --n-200: #d3dbd8; --n-300: #b2bfbb; --n-500: #5d6c68; --n-600: #4a5955; --n-900: #0c1a17;
	--d-0: #081210; --d-50: #0d1a17; --d-100: #12231f; --d-200: #1a2e29; --d-300: #2a3d39; --d-400: #3d524d; --d-600: #9fb0ab; --d-900: #e8e9e6;
	--g-500: #1fad8b; --g-600: #167a60; --g-700: #116550; --g-300: #3fcaa6; --g-100: #e1f3ec; --g-dark-bg: #0f2a23;
	--font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", "Helvetica Neue", Arial, sans-serif;
	--font-mono: "Source Code Pro", ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;

	--color-bg: light-dark(var(--n-50), var(--d-0));
	--color-surface: light-dark(var(--n-0), var(--d-50));
	--color-surface-2: light-dark(var(--n-100), var(--d-100));
	--color-border: light-dark(var(--n-200), var(--d-300));
	--color-border-strong: light-dark(var(--n-300), var(--d-400));
	--color-text: light-dark(var(--n-900), var(--d-900));
	--color-text-2: light-dark(var(--n-600), var(--d-600));
	--color-link: light-dark(var(--g-700), var(--g-300));
	--color-accent-fill: light-dark(var(--g-600), var(--g-500));
	--color-on-accent: light-dark(#fbfcfb, #04110d);
	--color-selected: light-dark(var(--g-100), var(--g-dark-bg));
	--color-selected-edge: light-dark(var(--g-600), var(--g-300));
	--color-focus: light-dark(#0b5c47, #7ef0cf);
	--color-shadow: light-dark(rgb(12 26 23 / 0.14), rgb(0 0 0 / 0.5));

	--ok: light-dark(#0f7457, #3fcaa6); --ok-bg: light-dark(#e3f4ee, #0f2a23);
	--warning: light-dark(#8a5300, #f2b54a); --warning-bg: light-dark(#fbf0dc, #2a210d);
	--error: light-dark(#b42318, #ff8f80); --error-bg: light-dark(#fde8e6, #2c1512);
	/* A complete run in a chart or calendar: neutral, 3:1 on the surface; only problems take colour. */
	--spark: light-dark(#869490, #5f7570);
	--flash: light-dark(#fff1a8, #4a4000); --flash-edge: light-dark(#b38600, #e0c040);

	--lz-todo-bg: light-dark(#e3e6ea, #2c333a); --lz-todo-fg: light-dark(#3c4a63, #c3cfdb);
	--lz-prog-bg: light-dark(#dbe8ff, #0b3373); --lz-prog-fg: light-dark(#0747a6, #a5c8ff);
	--lz-done-bg: light-dark(#ddf5e9, #164b35); --lz-done-fg: light-dark(#05603a, #8fe8c0);
	--bar-todo: light-dark(#5b6678, #a3aebf); --bar-prog: light-dark(#2357b5, #86b4ff); --bar-done: light-dark(#17704a, #55cf96);

	/* Jira's fourteen issue colours: light values carry white text at 4.5:1 or more, dark values the dark-scheme ink (#04110d). */
	--jc-purple: light-dark(#6554c0, #b4a9f2); --jc-dark-purple: light-dark(#4b3ba3, #9d8eeb);
	--jc-blue: light-dark(#1d64d8, #8db6ff); --jc-dark-blue: light-dark(#2448b8, #7099f0);
	--jc-teal: light-dark(#0a7489, #6fd6eb); --jc-dark-teal: light-dark(#0b5e72, #4ec2d9);
	--jc-green: light-dark(#18784f, #78dcae); --jc-dark-green: light-dark(#0f5f3c, #4fc48d);
	--jc-yellow: light-dark(#7f5f00, #f5cd47); --jc-dark-yellow: light-dark(#8f4d00, #f2a94e);
	--jc-orange: light-dark(#b23f17, #ffa085); --jc-dark-orange: light-dark(#9c2f08, #f5835f);
	--jc-grey: light-dark(#5a687d, #b6c0cf); --jc-dark-grey: light-dark(#243859, #94a3bb);
	--on-jc: light-dark(#ffffff, #04110d);

	--s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px;
	/* four steps, each at least 1.2 times the one below: meta 12, body and controls 14, section 17, page title 24 */
	--t-cap: 0.75rem; --t-ui: 0.875rem; --t-body: 0.875rem; --t-lg: 1.0625rem; --t-h2: 1.0625rem; --t-h1: 1.5rem;
	--r-sm: 4px; --r-md: 6px; --r-lg: 10px;
	--ctl: 32px; --rh: 36px; --pad: clamp(16px, 3.5vw, 40px);
	--ease-out: cubic-bezier(0.23, 1, 0.32, 1);
}
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }
@media (max-width: 760px) { :root { --pad: 16px; } }

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--color-bg); color: var(--color-text); font: 400 var(--t-body)/1.45 var(--font-sans); overflow-wrap: break-word; }
a { color: var(--color-link); text-underline-offset: 0.18em; }
:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
h1, h2, h3, h4 { margin: 0; line-height: 1.25; font-weight: 650; text-wrap: balance; }
h1 { font-size: var(--t-h1); } h2 { font-size: var(--t-h2); } h3 { font-size: var(--t-body); } h4 { font-size: var(--t-ui); }
p { margin: 0; text-wrap: pretty; }
ul, ol { margin: 0; }
code { font: 0.92em var(--font-mono); background: var(--color-surface-2); padding: 0 3px; border-radius: var(--r-sm); }
time, .num, .n { font-variant-numeric: tabular-nums; }
.t2 { color: var(--color-text-2); }
.vh { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.ic { inline-size: 1em; block-size: 1em; flex: none; }
.n { font-size: var(--t-cap); color: var(--color-text-2); font-weight: 500; }
.k { font: 500 var(--t-ui)/1 var(--font-mono); color: var(--color-text-2); white-space: nowrap; }
main { --main-max: 112rem; display: block; inline-size: 100%; max-inline-size: calc(var(--main-max) + 2 * var(--pad)); margin-inline: auto; padding: 0 max(var(--pad), env(safe-area-inset-right)) calc(var(--s-5) + env(safe-area-inset-bottom)) max(var(--pad), env(safe-area-inset-left)); outline: none; }
/* the column a page reads in: one step at a time, a form, or lists and boards */
body.w-guide main { --main-max: 52rem; } body.w-form main { --main-max: 60rem; }

.skip { position: absolute; inset-inline-start: var(--s-2); inset-block-start: -4rem; z-index: 50; padding: var(--s-2) var(--s-3); border-radius: var(--r-md); background: var(--color-accent-fill); color: var(--color-on-accent); font-weight: 600; }
.skip:focus { inset-block-start: var(--s-2); }

/* prototype controls: outside the design, one line until opened */
.proto { font: 500 var(--t-cap)/1.5 var(--font-mono); color: var(--color-text-2); background: var(--color-surface-2); border-block-end: 1px dashed var(--color-border-strong); }
.proto summary { padding: 3px var(--pad); cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-block-size: 24px; }
.proto-in { display: flex; flex-direction: column; gap: 2px; padding: 0 var(--pad) var(--s-2); }
.proto-in a { display: inline-grid; place-items: center; min-block-size: 24px; padding-inline: 6px; margin-inline-start: 4px; border-radius: var(--r-sm); color: var(--color-text-2); }
.proto-in a[aria-current] { background: var(--color-text); color: var(--color-bg); text-decoration: none; }

/* header: one 48 px line. It is the size container its items fit into; the thresholds at which they move into the
   menu depend on the account's links, so the page carries them in its head (headerFit in src/ui/shell.ts). */
.hd { container: hd / inline-size; display: flex; align-items: center; gap: var(--s-2) var(--s-3); padding: 0 max(var(--pad), env(safe-area-inset-right), calc((100% - 112rem) / 2)) 0 max(var(--pad), env(safe-area-inset-left), calc((100% - 112rem) / 2)); min-block-size: 48px; background: var(--color-surface); border-block-end: 1px solid var(--color-border); }
.brand { display: inline-flex; align-items: center; gap: var(--s-2); min-block-size: 40px; color: var(--color-text); text-decoration: none; font: 600 var(--t-lg)/1 var(--font-mono); }
.brand svg { inline-size: 34px; block-size: auto; }
.pnav { display: flex; gap: 2px; }
.pnav a, .pop-menu a { display: inline-flex; align-items: center; gap: var(--s-2); min-block-size: var(--ctl); padding: 0 var(--s-2); border-radius: var(--r-md); color: var(--color-text); text-decoration: none; font-weight: 550; font-size: var(--t-body); }
.pnav a[aria-current] { box-shadow: inset 0 -2px 0 var(--color-selected-edge); border-radius: 0; }
.mark { display: inline-grid; place-items: center; inline-size: 20px; block-size: 20px; flex: none; }
.mark-logo img { inline-size: 18px; block-size: 18px; object-fit: contain; }
.lg-dark { display: none; }
:root[data-theme="dark"] .lg-light { display: none; } :root[data-theme="dark"] .lg-dark { display: inline; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .lg-light { display: none; } :root:not([data-theme="light"]) .lg-dark { display: inline; } }
.ask { position: relative; flex: 1 1 14rem; max-inline-size: 26rem; margin-inline-start: auto; }
.ask input, .qf input, .fld input:not([type="checkbox"]):not([type="radio"]), select { inline-size: 100%; min-block-size: var(--ctl); padding: 4px var(--s-3); border-radius: var(--r-md); border: 1px solid var(--color-border-strong); background: var(--color-bg); color: var(--color-text); font: inherit; }
.ask input, .qf input { padding-inline-start: 30px; }
.ask-ic, .q-ic { position: absolute; inset-inline-start: 10px; inset-block-start: 50%; translate: 0 -50%; color: var(--color-text-2); pointer-events: none; }
.ask-big { margin-inline-start: 0; max-inline-size: 40rem; }
.ask.is-busy .ask-ic { visibility: hidden; }
.ask.is-busy::after { content: ""; position: absolute; inset-inline-start: 11px; inset-block-start: 50%; inline-size: 12px; block-size: 12px; margin-block-start: -6px; border-radius: 50%; border: 2px solid var(--color-text-2); border-inline-end-color: transparent; animation: spin 0.8s linear infinite; }
.ask-big input { min-block-size: 44px; font-size: var(--t-lg); }
.hd-end { display: flex; align-items: center; gap: var(--s-1); margin-inline-start: auto; }
.ask + .hd-end { margin-inline-start: 0; }
.hb { position: relative; display: inline-grid; place-items: center; inline-size: var(--ctl); block-size: var(--ctl); border: 0; border-radius: var(--r-md); background: transparent; color: var(--color-text); cursor: pointer; font: inherit; }
.hb[aria-current] { background: var(--color-selected); }
.hb .ic { inline-size: 18px; block-size: 18px; }
.badge { position: absolute; inset-block-start: 1px; inset-inline-end: 0; min-inline-size: 16px; block-size: 16px; padding: 0 4px; border-radius: 8px; background: var(--error); color: var(--color-bg); font: 700 10px/16px var(--font-sans); }
.ask-link, .menu-btn { display: none; }
@media (hover: hover) and (pointer: fine) { .hb:hover, .pnav a:hover, .pop-menu a:hover, .fb-btn:hover, .btn:hover, .ib:hover { background: var(--color-surface-2); } }
.pop-menu :is(.m-nav, .m-set, .m-theme) { display: none; }
.m-nav a:not(:has(.mark)) { padding-inline-start: calc(2 * var(--s-2) + 20px); }
:is(.m-set, .m-cal) .ic { margin-inline: 2px; }
.m-theme { align-items: center; justify-content: space-between; gap: var(--s-3); margin-block-start: var(--s-1); padding: var(--s-1) 0 0 calc(2 * var(--s-2) + 20px); border-block-start: 1px solid var(--color-border); font-size: var(--t-body); }
.m-theme-o { display: inline-flex; gap: 2px; }
.m-theme .hb { padding: 0; justify-content: center; }
.m-theme .hb .ic { inline-size: 16px; block-size: 16px; }
/* search behind the button: a sheet over the header row, with its field focused as it opens */
.pop-ask { position: fixed; inset: 0 0 auto; margin: 0; inline-size: auto; block-size: auto; overflow: visible; border: 0; border-block-end: 1px solid var(--color-border-strong); padding: env(safe-area-inset-top) max(var(--pad), env(safe-area-inset-right)) 0 max(var(--pad), env(safe-area-inset-left)); background: var(--color-surface); color: var(--color-text); box-shadow: 0 8px 28px var(--color-shadow); }
.pop-ask:popover-open { display: flex; align-items: center; gap: var(--s-2); min-block-size: 48px; }
.pop-ask .ask { flex: 1 1 auto; max-inline-size: none; margin: 0; }
.pop-ask::backdrop { background: rgb(0 0 0 / 0.25); }

/* popovers: native light dismiss and Escape; anchored where the browser supports anchor positioning */
.pop { border: 1px solid var(--color-border-strong); border-radius: var(--r-lg); background: var(--color-surface); color: var(--color-text); box-shadow: 0 8px 28px var(--color-shadow); padding: var(--s-1); max-block-size: min(70dvh, 32rem); overflow: auto; inline-size: max-content; max-inline-size: min(92vw, 24rem); }
@supports (position-area: bottom) {
	.pop { margin: 4px 0 0; position-area: bottom span-right; position-try-fallbacks: flip-inline, flip-block; }
	.pop-hd { position-area: bottom span-left; }
}
.pop-menu { display: none; flex-direction: column; min-inline-size: 12rem; }
.pop-menu:popover-open { display: flex; }
.pop-menu a { font-weight: 450; }
.pop-menu a[aria-current] { background: var(--color-selected); font-weight: 600; }
.pop-list { list-style: none; padding: 0; }
.pop-list a { display: flex; gap: var(--s-2); padding: var(--s-2); border-radius: var(--r-md); color: var(--color-text); text-decoration: none; }
.pop-list .pn-t { display: grid; } .pop-list small { color: var(--color-text-2); }
.pop-bell { inline-size: 22rem; }
.pop-foot { display: block; padding: var(--s-2); border-block-start: 1px solid var(--color-border); }
.pop-wide { max-inline-size: min(92vw, 34rem); }

/* buttons */
.btn, .fb-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2); min-block-size: var(--ctl); padding: 0 var(--s-3); border-radius: var(--r-md); border: 1px solid var(--color-border-strong); background: var(--color-surface); color: var(--color-text); font: 550 var(--t-ui)/1 var(--font-sans); text-decoration: none; cursor: pointer; white-space: nowrap; }
.btn-primary { background: var(--color-accent-fill); border-color: var(--color-accent-fill); color: var(--color-on-accent); }
@media (hover: hover) and (pointer: fine) { .btn-primary:hover { background: var(--g-700); } }
.btn-danger { color: var(--error); border-color: currentColor; }
.fb-btn { padding: 0 var(--s-2); font-weight: 500; }
.fb-btn.on { border-color: var(--color-selected-edge); background: var(--color-selected); }
.link-btn { display: inline-flex; align-items: center; gap: var(--s-1); min-block-size: 28px; padding: 0 4px; border: 0; background: none; color: var(--color-link); font: inherit; font-size: var(--t-ui); text-decoration: underline; text-underline-offset: 0.18em; cursor: pointer; }

/* status atoms */
.sev { display: inline-flex; align-items: center; gap: 5px; font-weight: 600; font-size: var(--t-ui); white-space: nowrap; }
.sev-ok { color: var(--ok); } .sev-warning { color: var(--warning); } .sev-error { color: var(--error); }
/* Information: a state that needs no one, said quietly in the secondary ink, never in a status colour */
.tone-info { display: inline-flex; align-items: center; gap: 5px; color: var(--color-text-2); font-weight: 500; }
.tone-info .ic { inline-size: 14px; block-size: 14px; flex: none; }
.lz { display: inline-block; padding: 1px 5px; border-radius: 3px; font: 700 10.5px/1.45 var(--font-sans); letter-spacing: 0.03em; text-transform: uppercase; white-space: nowrap; }
.lz-todo { background: var(--lz-todo-bg); color: var(--lz-todo-fg); } .lz-progress { background: var(--lz-prog-bg); color: var(--lz-prog-fg); } .lz-done { background: var(--lz-done-bg); color: var(--lz-done-fg); }
.it { display: inline-flex; align-items: center; gap: 5px; } .it svg { flex: none; }
a.lbl { text-decoration: none; } a.lbl:hover { text-decoration: underline; }
.lbl { display: inline-block; padding: 0 5px; margin: 1px 3px 1px 0; border-radius: var(--r-sm); font-size: var(--t-cap); background: light-dark(oklch(0.94 0.035 var(--h)), oklch(0.31 0.045 var(--h))); color: light-dark(oklch(0.36 0.09 var(--h)), oklch(0.9 0.06 var(--h))); }
.av { display: inline-grid; place-items: center; inline-size: 20px; block-size: 20px; border-radius: 50%; font: 600 9px/1 var(--font-sans); background: light-dark(oklch(0.88 0.06 var(--h)), oklch(0.42 0.07 var(--h))); color: light-dark(oklch(0.3 0.08 var(--h)), oklch(0.96 0.02 var(--h))); flex: none; }
.who { display: inline-flex; align-items: center; gap: var(--s-2); }
.fail { color: var(--error); font-weight: 600; }
.mono { font-family: var(--font-mono); }
.miss { display: inline-flex; align-items: center; gap: var(--s-1); margin-inline-start: var(--s-2); color: var(--warning); font-size: var(--t-cap); font-weight: 600; white-space: nowrap; }
.note { display: flex; align-items: center; gap: var(--s-2); margin-block: var(--s-2); padding: var(--s-2) var(--s-3); border-radius: var(--r-md); background: var(--ok-bg); border: 1px solid color-mix(in oklab, var(--ok) 40%, transparent); }
.callout { display: flex; gap: var(--s-2); padding: var(--s-2) var(--s-3); border-radius: var(--r-md); margin-block: var(--s-2); }
.callout-warning { background: var(--warning-bg); border: 1px solid color-mix(in oklab, var(--warning) 45%, transparent); }
.callout .ic { margin-block-start: 3px; color: var(--warning); }

/* toolbar: title, views, freshness on one line */
.tb { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s-1) var(--s-3); min-block-size: 44px; border-block-end: 1px solid var(--color-border); }
.tb-h { display: inline-flex; align-items: center; gap: var(--s-2); margin: 0; font-size: var(--t-lg); font-weight: 650; }
.vtabs { display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; }
.vtabs a { display: inline-flex; align-items: center; gap: var(--s-2); min-block-size: var(--ctl); padding: 0 var(--s-2); border-radius: var(--r-md); color: var(--color-text-2); text-decoration: none; font-weight: 550; white-space: nowrap; }
.vtabs a[aria-current] { color: var(--color-text); background: var(--color-selected); box-shadow: inset 0 -2px 0 var(--color-selected-edge); }
@media (hover: hover) and (pointer: fine) { .vtabs a:hover { background: var(--color-surface-2); color: var(--color-text); } }
/* the area switcher (Jira project, Confluence space) sits beside the product's name */
.asw { flex: 0 1 auto; min-inline-size: 0; max-inline-size: 16rem; font-weight: 600; }
.asw-v { min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; }
.asw-menu a .n { color: var(--color-text-2); font-variant-numeric: tabular-nums; }
.asw-empty { color: var(--color-text-2); }
.fresh { display: inline-flex; align-items: center; gap: 5px; margin-inline-start: auto; color: var(--color-text-2); font-size: var(--t-ui); white-space: nowrap; }
.fresh-bad { color: var(--error); font-weight: 600; } .fresh-bad .ic { color: var(--error); }
.alert { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px var(--s-2); margin-block-start: var(--s-2); padding: 6px var(--s-3); border-radius: var(--r-md); font-size: var(--t-ui); }
.alert > span { flex: 1 1 20rem; }
.alert .ic { align-self: center; }
.alert-warning { background: var(--warning-bg); } .alert-warning .ic { color: var(--warning); }
.alert-error { background: var(--error-bg); } .alert-error .ic { color: var(--error); }
.alert a { font-weight: 600; white-space: nowrap; }

/* filter bar */
.fbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); padding-block: var(--s-2); }
.fbar-h { font-size: var(--t-body); display: inline-flex; gap: var(--s-2); align-items: center; }
.qf { position: relative; flex: 1 1 15rem; max-inline-size: 30rem; }
.fl { list-style: none; padding: 0; }
.fl a { display: flex; justify-content: space-between; align-items: center; gap: var(--s-4); min-block-size: 30px; padding: 0 var(--s-2); border-radius: var(--r-md); color: var(--color-text); text-decoration: none; }
.fl a[aria-current] { background: var(--color-selected); font-weight: 600; }
@media (hover: hover) and (pointer: fine) { .fl a:hover { background: var(--color-surface-2); } }
.fv { display: inline-flex; align-items: center; gap: var(--s-2); }
.fv-ic { color: var(--color-text-2); }
.more-f { padding: var(--s-2); } .more-f + .more-f { border-block-start: 1px solid var(--color-border); }
.more-f h3 { font-size: var(--t-ui); margin-block-end: 4px; }
.fields { list-style: none; padding: 0; columns: 2; font-size: var(--t-ui); }
.pop-f form { display: grid; gap: var(--s-2); padding: var(--s-2); }
.pop-f fieldset { border: 0; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, minmax(9rem, 1fr)); gap: 0 var(--s-3); }
.pop-f legend { font-weight: 600; margin-block-end: 4px; }
.ck { display: flex; align-items: center; gap: var(--s-2); min-block-size: 28px; }
.ck input { inline-size: 16px; block-size: 16px; margin: 0; accent-color: var(--color-accent-fill); }
.chips { display: flex; flex-wrap: wrap; gap: var(--s-2); padding-block-end: var(--s-2); }
.chip { display: inline-flex; align-items: center; gap: var(--s-1); min-block-size: 26px; padding: 0 8px; border-radius: var(--r-lg); background: var(--color-surface-2); color: var(--color-text); text-decoration: none; font: 500 var(--t-ui) var(--font-mono); }
.chip-clear { font-family: var(--font-sans); color: var(--color-link); background: none; }
.qerr { display: flex; gap: var(--s-2); align-items: baseline; margin-block-end: var(--s-2); padding: 6px var(--s-3); border-radius: var(--r-md); background: var(--error-bg); }
.qerr .ic { color: var(--error); align-self: center; }
.cnt { display: block; font-size: var(--t-cap); color: var(--color-text-2); padding-block-end: 4px; }
.empty { padding: var(--s-5) 0; color: var(--color-text-2); }
.lend { padding: var(--s-3) 0; color: var(--color-text-2); font-size: var(--t-ui); }
.lst > .lend { padding-inline: var(--s-3); }

/* list: fixed row height so lazily loaded chunks take their exact space before they arrive */
.lst { container: lst / inline-size; border: 1px solid var(--color-border); border-radius: var(--r-md); background: var(--color-surface); }
.lh { position: sticky; inset-block-start: 0; z-index: 2; display: grid; grid-template-columns: var(--tpl); align-items: center; min-block-size: 32px; padding-inline: var(--s-3) 0; background: var(--color-surface-2); border-block-end: 1px solid var(--color-border); border-start-start-radius: var(--r-md); border-start-end-radius: var(--r-md); font-size: var(--t-cap); font-weight: 600; color: var(--color-text-2); }
.lh a, .lh span { display: inline-flex; align-items: center; gap: 2px; min-block-size: 28px; padding-inline: var(--s-2); color: inherit; text-decoration: none; white-space: nowrap; overflow: hidden; }
.lh a:first-child { padding-inline-start: 0; }
.lh a[aria-current] { color: var(--color-text); }
.rows { list-style: none; padding: 0; margin: 0; }
.row { position: relative; display: grid; grid-template-columns: var(--tpl); align-items: center; block-size: var(--rh); padding-inline: var(--s-3) 0; border-block-end: 1px solid var(--color-border); overflow: hidden; }
.row .rl { display: flex; align-self: stretch; align-items: center; gap: var(--s-2); min-inline-size: 0; color: var(--color-text); text-decoration: none; font-weight: 500; }
.row .rl::after { content: ""; position: absolute; inset: 0; }
.row .rl:focus-visible { outline: none; }
.row:has(.rl:focus-visible) { outline: 2px solid var(--color-focus); outline-offset: -2px; }
.ti { min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.c { min-inline-size: 0; padding-inline: var(--s-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--t-ui); }
.c .who, .c .it { max-inline-size: 100%; } .c .who > span:last-child { overflow: hidden; text-overflow: ellipsis; }
.row[aria-current] { background: var(--color-selected); box-shadow: inset 3px 0 0 var(--color-selected-edge); scroll-initial-target: nearest; scroll-snap-align: center; }
@media (hover: hover) and (pointer: fine) { .row:hover { background: var(--color-surface-2); } }
.chunk { display: block; inline-size: 100%; block-size: calc(var(--n) * var(--rh)); border: 0; background: transparent; color-scheme: light dark; }
:root[data-theme="light"] .chunk { color-scheme: light; } :root[data-theme="dark"] .chunk { color-scheme: dark; }
.chunk-doc { background: transparent; overflow: hidden; }
.chunk-doc .lst { border: 0; border-radius: 0; background: transparent; }
@container lst (max-width: 639px) {
	.lh { display: none; }
	.row { display: flex; flex-wrap: wrap; align-content: center; column-gap: var(--s-2); row-gap: 2px; block-size: 56px; }
	.row .rl { flex: 1 0 100%; }
	.c { padding: 0; flex: none; max-inline-size: 45%; } .c:nth-of-type(n+4) { display: none; }
	.chunk { --rh: 56px; }
}
@container lst (max-width: 639px) { .rows { --rh: 56px; } }

/* board */
.board { overflow-x: auto; padding-block-end: var(--s-2); }
.bhead, .bgrid { display: grid; grid-template-columns: repeat(4, minmax(13rem, 1fr)); gap: var(--s-2); min-inline-size: 54rem; }
.bhead { position: sticky; inset-block-start: 0; z-index: 2; padding-block: 6px; background: var(--color-bg); }
.bhead > span { display: flex; align-items: center; gap: var(--s-2); padding-inline: var(--s-2); }
.lane { margin-block-end: var(--s-2); }
.lane summary { display: flex; align-items: center; gap: var(--s-2); min-block-size: 32px; cursor: pointer; font-weight: 600; font-size: var(--t-ui); }
/* a group never takes more than about two thirds of the screen: its cards scroll inside it, under its own header and count */
.lane > .bgrid { max-block-size: 70vh; max-block-size: 70dvh; overflow-y: auto; overscroll-behavior: contain; }
.gb b { font-weight: 650; }
.lane-n { display: inline-flex; align-items: center; gap: var(--s-2); }
.bcol { list-style: none; margin: 0; padding: 6px; display: grid; align-content: start; gap: var(--s-2); min-block-size: 3rem; border-radius: var(--r-md); background: var(--color-surface-2); }
.card { position: relative; display: grid; gap: var(--s-2); padding: var(--s-2); border-radius: var(--r-md); background: var(--color-surface); border: 1px solid var(--color-border); font-size: var(--t-ui); }
.card .rl { color: var(--color-text); text-decoration: none; font-weight: 500; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.card .rl::after { content: ""; position: absolute; inset: 0; }
.card .ti { white-space: normal; }
.card:has(.rl:focus-visible) { outline: 2px solid var(--color-focus); outline-offset: 1px; } .card .rl:focus-visible { outline: none; }
.card-m { display: flex; align-items: center; gap: var(--s-2); } .card-m .who { margin-inline-start: auto; }
.card[aria-current] { border-color: var(--color-selected-edge); background: var(--color-selected); scroll-initial-target: nearest; scroll-snap-align: center; }
@media (hover: hover) and (pointer: fine) { .card:hover { border-color: var(--color-border-strong); } }

/* timeline */
.tl-wrap { overflow-x: auto; border: 1px solid var(--color-border); border-radius: var(--r-md); background: var(--color-surface); }
.tl { --nw: 22rem; min-inline-size: 60rem; }
.tl-h, .tl-r { display: grid; grid-template-columns: var(--nw) minmax(0, 1fr); align-items: center; }
.tl-h { position: sticky; inset-block-start: 0; z-index: 2; min-block-size: 30px; background: var(--color-surface-2); border-block-end: 1px solid var(--color-border); font-size: var(--t-cap); font-weight: 600; color: var(--color-text-2); }
.tl-nh { padding-inline: var(--s-3); }
.tl-axis { position: relative; block-size: 30px; }
.tl-axis span { position: absolute; inset-inline-start: calc(var(--s) * 1%); inset-block-start: 7px; padding-inline-start: 6px; white-space: nowrap; }
.tl-body { position: relative; }
.tl-lines { position: absolute; inset: 0 0 0 var(--nw); pointer-events: none; }
.tl-lines i { position: absolute; inset-block: 0; inset-inline-start: calc(var(--s) * 1%); inline-size: 1px; background: var(--color-border); }
.tl-lines b { position: absolute; inset-block: 0; inset-inline-start: var(--today); inline-size: 2px; background: var(--color-accent-fill); }
.tl-r { min-block-size: 34px; border-block-end: 1px solid var(--color-border); }
.tl-r.sel { background: var(--color-selected); scroll-initial-target: nearest; scroll-snap-align: center; }
.tl-n { display: flex; align-items: center; gap: var(--s-2); min-inline-size: 0; padding-inline: var(--s-3) var(--s-2); font-size: var(--t-ui); }
.tl-n a { display: flex; align-items: baseline; gap: var(--s-2); min-inline-size: 0; flex: 1; color: var(--color-text); text-decoration: none; }
.tl-n a .ti { font-weight: 500; }
.tl-kids .tl-n { padding-inline-start: 2.6rem; }
.tl-e > summary { list-style: none; cursor: pointer; }
.tl-e > summary::-webkit-details-marker { display: none; }
.tl-e > summary .tl-n::before { content: ""; inline-size: 0; block-size: 0; border-block: 4px solid transparent; border-inline-start: 6px solid var(--color-text-2); transition: rotate 150ms var(--ease-out); flex: none; }
.tl-e[open] > summary .tl-n::before { rotate: 90deg; }
.tl-solo .tl-n { padding-inline-start: calc(var(--s-3) + 12px); }
.tl-tr { position: relative; block-size: 34px; }
.bar { position: absolute; inset-block: 7px; inset-inline-start: calc(var(--s) * 1%); inline-size: max(6px, calc((var(--e) - var(--s)) * 1%)); display: flex; align-items: center; padding-inline: 6px; border-radius: 4px; color: #fff; font: 600 11px/1 var(--font-mono); text-decoration: none; overflow: hidden; white-space: nowrap; }
.bar-todo { background: var(--bar-todo); } .bar-prog { background: var(--bar-prog); } .bar-done { background: var(--bar-done); }
:root[data-theme="dark"] .bar { color: #04110d; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .bar { color: #04110d; } }
@media (max-width: 760px) {
	.tl { --nw: 15rem; }
	.tl-n { flex-wrap: wrap; row-gap: 2px; padding-block: 4px; }
	.tl-n a { flex-basis: calc(100% - 22px); }
	.tl-n .k { flex: none; }
}

/* ---------- item frames ---------- */
/* Resizing: a transparent sizer carries the native `resize` grip; scaled along the edge it turns the grip
   into a full-length drag strip. Its size drives the panel through a one-cell grid; the panel opts out of
   sizing the cell with `contain`. The visible grip line is decoration only. */
.sizer { opacity: 0; overflow: hidden; z-index: 0; }
/* The scaled sizer covers its whole panel; the panel's content stacks above it, leaving only the strip its end margin
   uncovers, or a control that is not itself positioned sits under the sizer and never receives a press. */
:is(.ov-in, .split-in, .cf-tree-in, .ivx-full .it-main) { position: relative; z-index: 1; }
.grip { pointer-events: none; z-index: 2; display: grid; place-items: center; background: var(--color-surface-2); }
.grip::after { content: ""; border-radius: var(--r-sm); background: var(--color-border-strong); }
.grip-v { inline-size: 10px; } .grip-v::after { inline-size: 3px; block-size: 36px; }
.grip-h { block-size: 10px; } .grip-h::after { block-size: 3px; inline-size: 36px; }
.ov { z-index: 30; display: grid; overflow: clip; }
.ov-in { overflow: auto; background: var(--color-surface); outline: none; overscroll-behavior: contain; }

.ov-side { position: fixed; inset: 0 0 0 auto; direction: rtl; max-inline-size: 96vw; }
.ov-side > * { grid-area: 1 / 1; }
.ov-side .sizer { direction: rtl; align-self: end; resize: horizontal; inline-size: var(--ov); min-inline-size: 22rem; max-inline-size: 96vw; block-size: 16px; transform-origin: bottom; transform: translateY(120px) scaleY(200); }
.ov-side .grip { justify-self: left; block-size: 100dvh; border-inline-end: 1px solid var(--color-border); }
.ov-side .ov-in { direction: ltr; margin-inline-start: 10px; contain: inline-size; block-size: 100dvh; box-shadow: -10px 0 30px var(--color-shadow); }

.ov-overlay { position: fixed; inset: 0 0 auto 0; max-block-size: 96dvh; }
.ov-overlay > * { grid-area: 1 / 1; }
.ov-overlay .sizer { justify-self: end; resize: vertical; block-size: var(--ov); min-block-size: 12rem; max-block-size: 96dvh; inline-size: 16px; transform-origin: right; transform: translateX(120px) scaleX(200); }
.ov-overlay .grip { align-self: end; inline-size: 100%; border-block-start: 1px solid var(--color-border); }
.ov-overlay .ov-in { margin-block-end: 10px; contain: size; box-shadow: 0 10px 30px var(--color-shadow); }
.ivx-overlay .row[aria-current], .ivx-overlay .card[aria-current], .ivx-overlay .tl-r.sel { scroll-snap-align: end; }

/* every frame is an open, non-modal dialog; reset the user-agent dialog box */
dialog.ov, dialog.split-item, dialog.ov-full { margin: 0; padding: 0; border: 0; color: inherit; background: transparent; max-inline-size: none; max-block-size: none; inline-size: auto; block-size: auto; }
dialog:not([open]) { display: none; }
.ivx-full { position: relative; }
dialog.ov-full { position: absolute; inset: 0 0 auto 0; z-index: 30; min-block-size: 100%; background: var(--color-bg); }
.ov-full > .ov-in { overflow: visible; background: var(--color-bg); padding-inline: 0; }
.ivx-full .row[aria-current], .ivx-full .card[aria-current], .ivx-full .tl-r.sel { scroll-initial-target: none; }
.ivx-full:has(> dialog[open]) > :not(dialog) { visibility: hidden; }
body.iv-wide { block-size: 100dvh; display: flex; flex-direction: column; overflow: hidden; }
body.iv-wide main { flex: 1; min-block-size: 0; padding-block: 0; display: flex; }
.ivx-wide { flex: 1; min-block-size: 0; display: flex; }
.split { flex: 1; display: grid; grid-template-columns: auto minmax(0, 1fr); min-block-size: 0; }
.split-list { display: grid; grid-template-rows: minmax(0, 1fr); overflow: clip; min-block-size: 0; border-inline-end: 1px solid var(--color-border); }
.split-list > * { grid-area: 1 / 1; }
.split-list .sizer, .cf-tree .sizer, .ivx-full .it-body > .sizer { align-self: end; resize: horizontal; inline-size: var(--ov); min-inline-size: 16rem; max-inline-size: 70vw; block-size: 16px; transform-origin: bottom; transform: translateY(120px) scaleY(200); }
.split-list .grip, .cf-tree .grip, .ivx-full .it-body > .grip { justify-self: end; block-size: 100%; }
.split-in { margin-inline-end: 10px; contain: inline-size; overflow: auto; padding: 0 var(--s-3) var(--s-3) var(--pad); min-block-size: 0; }
.split-in .lst { --rh: 36px; }
.split-item { position: static; display: grid; min-block-size: 0; overflow: hidden; }
.split-item > .ov-in { overflow: auto; min-block-size: 0; }
.split:has(> dialog:not([open])) { grid-template-columns: minmax(0, 1fr); }
.split:has(> dialog:not([open])) .split-list > :is(.sizer, .grip) { display: none; }
.split:has(> dialog:not([open])) .split-in { contain: none; margin: 0; }

/* panel content */
.itm { container: it / inline-size; padding: 0 var(--s-4) var(--s-5); }
.it-bar { position: sticky; inset-block-start: 0; z-index: 3; display: flex; align-items: center; gap: var(--s-2); min-block-size: 44px; margin-inline: calc(-1 * var(--s-4)); padding-inline: var(--s-4) var(--s-2); background: var(--color-surface); border-block-end: 1px solid var(--color-border); }
.it-crumbs { display: flex; align-items: center; gap: var(--s-2); min-inline-size: 0; flex: 1; font-size: var(--t-ui); white-space: nowrap; overflow: hidden; }
.it-crumbs a { color: var(--color-text-2); }
.it-crumbs > :not(a) { flex: none; }
.it-bar .it-crumbs a { display: block; min-inline-size: 3ch; overflow: hidden; text-overflow: ellipsis; line-height: 24px; }
.it-ctl { display: flex; align-items: center; gap: var(--s-2); }
.ib-g { display: inline-flex; gap: 1px; padding: 1px; border: 1px solid var(--color-border); border-radius: var(--r-md); }
.ib { display: inline-grid; place-items: center; inline-size: 30px; block-size: 30px; border-radius: var(--r-sm); color: var(--color-text-2); }
.ib .ic { inline-size: 18px; block-size: 18px; }
.ib[aria-current] { background: var(--color-selected); color: var(--color-text); }
.ib.off { opacity: 0.35; }
.ib-close { color: var(--color-text); }
.it-head { display: grid; gap: var(--s-2); padding-block: var(--s-3) var(--s-2); }
.it-title { font-size: var(--t-h1); display: flex; align-items: center; gap: var(--s-2); }
.sl { display: flex; flex-wrap: wrap; align-items: center; gap: 6px var(--s-4); font-size: var(--t-ui); }
.ver-line { display: flex; align-items: flex-start; gap: var(--s-2); font-size: var(--t-ui); color: var(--color-text-2); }
.ver-line .ic { margin-block-start: 3px; }
.it-body { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-4); }
@container it (min-width: 44rem) { .it-body { grid-template-columns: minmax(0, 1fr) 17rem; } }
.it-sec { display: grid; gap: var(--s-2); padding-block: var(--s-2); }
.it-sec h2, .it-sec h3 { font-size: var(--t-body); display: flex; align-items: center; gap: var(--s-2); }
.it-sec p { max-inline-size: 72ch; }
.it-side { align-self: start; padding: var(--s-3); border: 1px solid var(--color-border); border-radius: var(--r-md); }
.dl { margin: 0; display: grid; gap: var(--s-2); font-size: var(--t-ui); }
.dl > div { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: var(--s-2); align-items: baseline; border-radius: var(--r-sm); }
.dl dt { color: var(--color-text-2); font-weight: 550; }
.dl dd { margin: 0; min-inline-size: 0; }
.dl-wide { grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: var(--s-2) var(--s-4); margin-block: var(--s-3); }
.dl-wide > div { grid-template-columns: 1fr; gap: 0; }
.files, .links { list-style: none; padding: 0; display: grid; gap: var(--s-1); }
.files li, .links li { display: flex; align-items: center; gap: var(--s-2); min-block-size: 28px; font-size: var(--t-ui); }
.links a { display: inline-flex; gap: var(--s-2); min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* activity (comments, history): who and when on one line, the time always at the right edge; the body below at full width */
.act { padding-block: var(--s-2); border-block-start: 1px solid var(--color-border); font-size: var(--t-ui); }
.act-h { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--s-3); min-block-size: 24px; }
.act-h .who { min-inline-size: 0; } .act-h .who > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.act-t { color: var(--color-text-2); white-space: nowrap; font-variant-numeric: tabular-nums; }
.act-b { margin-block-start: 4px; }
.act-b.rt, .act-b.rt > :is(p, ul, ol) { max-inline-size: none; }
.ivx-full .itm { max-inline-size: 90rem; margin-inline: auto; padding-inline: 0; }
@media (max-width: 760px) { .ov-full > .ov-in { padding-inline: 0; } }
.ivx-full .it-bar { margin-inline: 0; padding-inline: 0; background: var(--color-bg); }
.ivx-full .it-body { grid-template-columns: auto minmax(15rem, 1fr); gap: 0 var(--s-5); overflow: clip; padding: 4px; }
.ivx-full .it-body > * { grid-row: 1; }
.ivx-full .it-body > .sizer, .ivx-full .it-body > .grip, .ivx-full .it-main { grid-column: 1; }
.ivx-full .it-main { margin-inline-end: 14px; contain: inline-size; min-inline-size: 0; }
.ivx-full .it-side { grid-column: 2; }

/* changed fields: a brief highlight when a version comes into view, and a lasting word */
.chg-m { display: inline-block; margin-inline-start: 6px; padding: 0 4px; border-radius: var(--r-sm); border: 1px solid var(--flash-edge); color: var(--color-text); font: 600 10px/1.4 var(--font-sans); text-transform: uppercase; letter-spacing: 0.03em; vertical-align: middle; }
.chg-block { margin-block-end: 6px; }
.chg { animation: flash 1.6s var(--ease-out) both; border-radius: var(--r-sm); }
.live .chg { animation-name: none; }
.sl .chg, .rd-meta .chg { box-shadow: 0 0 0 2px var(--flash-edge); border-radius: 4px; }
@keyframes flash { from { background-color: var(--flash); } to { background-color: transparent; } }
@media (prefers-reduced-motion: reduce) { .chg { animation: none; } }

/* versions: live switch */
.vrail { border: 0; margin: 0; padding: var(--s-2) 0 0; min-inline-size: 0; }
.vrail legend { padding: 0; font-size: var(--t-ui); font-weight: 600; }
.vrail-in { display: flex; gap: var(--s-2); overflow-x: auto; padding: 6px 2px; scrollbar-width: thin; }
.vrail label { display: grid; gap: 1px; flex: none; min-inline-size: 8.5rem; max-inline-size: 13rem; padding: 5px var(--s-2); border: 1px solid var(--color-border); border-radius: var(--r-md); background: var(--color-surface); font-size: var(--t-ui); cursor: pointer; }
.vrail label small { color: var(--color-text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vrail input:checked + label { border-color: var(--color-selected-edge); background: var(--color-selected); box-shadow: inset 0 -2px 0 var(--color-selected-edge); }
.vrail input:focus-visible + label { outline: 2px solid var(--color-focus); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) { .vrail label:hover { border-color: var(--color-border-strong); background: var(--color-surface-2); } }
.vstack { display: grid; grid-template-columns: minmax(0, 1fr); }
.vstack > .vpane { grid-area: 1 / 1; visibility: hidden; }
.vstack .chg { animation-name: none; }

/* versions: list with side-by-side diff */
.vsec { padding-block: var(--s-3); border-block-start: 1px solid var(--color-border); margin-block-start: var(--s-3); }
.vsec h2, .vsec h3 { display: flex; align-items: baseline; gap: var(--s-2); margin-block-end: var(--s-2); }
.vs-hint { font-weight: 400; font-size: var(--t-ui); }
.vl-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-3); }
@container it (min-width: 40rem) { .vl-grid { grid-template-columns: 13rem minmax(0, 1fr); } }
.vl-items { list-style: none; padding: 0; display: grid; gap: var(--s-1); align-content: start; }
.vl-items a { display: grid; gap: 1px; padding: 6px var(--s-2); border-radius: var(--r-md); border: 1px solid var(--color-border); color: var(--color-text); text-decoration: none; font-size: var(--t-ui); }
.vl-items a[aria-current] { border-color: var(--color-selected-edge); background: var(--color-selected); }
.vl-items small { color: var(--color-text-2); }
.cmp { display: flex; align-items: center; gap: var(--s-2); margin-block-end: var(--s-2); font-size: var(--t-ui); }
.cmp select { inline-size: auto; }
.diff { inline-size: 100%; border-collapse: collapse; table-layout: fixed; font-size: var(--t-ui); }
.diff th, .diff td { padding: 6px var(--s-2); border-block-end: 1px solid var(--color-border); text-align: start; vertical-align: top; }
.diff thead th { font-size: var(--t-cap); color: var(--color-text-2); }
.diff tbody th { inline-size: 8.5rem; font-weight: 550; }
.diff thead th:first-child { inline-size: 8.5rem; }
.diff tr.chg { background: light-dark(#fff8d6, #2b2600); animation: none; }
.diff td p + p { margin-block-start: 4px; }
del { background: var(--error-bg); color: var(--color-text); text-decoration-color: var(--error); }
ins { background: var(--ok-bg); color: var(--color-text); text-decoration: none; box-shadow: inset 0 -2px 0 var(--ok); }

/* versions: rotary card file */
.rolo-wrap { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--s-2); }
.rolo-idx { display: flex; flex-direction: column; gap: 2px; }
.rolo-idx a { display: grid; place-items: center; min-inline-size: 36px; min-block-size: 26px; border-radius: var(--r-sm); font: 600 var(--t-cap) var(--font-mono); text-decoration: none; background: var(--color-surface-2); color: var(--color-text); }
.rolo { block-size: 21rem; overflow-y: auto; scroll-snap-type: y mandatory; perspective: 900px; padding-block: 5rem; border-radius: var(--r-lg); background: linear-gradient(var(--color-surface-2), var(--color-bg) 50%, var(--color-surface-2)); overscroll-behavior: contain; scrollbar-width: thin; }
.rcard { scroll-snap-align: center; inline-size: min(100% - 2rem, 30rem); block-size: 11rem; margin: 0 auto 10px; overflow: hidden; display: grid; grid-template-rows: auto auto 1fr auto; gap: var(--s-1); padding: 0 var(--s-3) var(--s-2); border: 1px solid var(--color-border-strong); border-radius: var(--r-md); background: var(--color-surface); box-shadow: 0 4px 14px var(--color-shadow); font-size: var(--t-ui); }
@supports (animation-timeline: view()) {
	.rcard { animation: drum linear both; animation-timeline: view(); animation-range: cover; transform-origin: 50% 50%; }
	@keyframes drum { 0% { transform: rotateX(62deg) scale(0.92); opacity: 0.45; } 50% { transform: none; opacity: 1; } 100% { transform: rotateX(-62deg) scale(0.92); opacity: 0.45; } }
}
@media (prefers-reduced-motion: reduce) { .rcard { animation: none !important; } }
.rtab { margin-inline: calc(-1 * var(--s-3)); padding: 4px var(--s-3); background: var(--color-surface-2); border-block-end: 1px solid var(--color-border); }
.rtab h4 { font-size: var(--t-ui); font-weight: 500; }
.rch { list-style: none; padding: 0; display: grid; gap: 2px; }
.rch li { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-1); }
.rsnap { display: flex; flex-wrap: wrap; gap: 2px var(--s-3); margin: 0; color: var(--color-text-2); }
.rsnap div { display: flex; gap: var(--s-1); align-items: center; } .rsnap dd { margin: 0; color: var(--color-text); }
.rc-open { justify-self: start; font-weight: 600; }
.rc-open[aria-current] { color: var(--color-text-2); text-decoration: none; }

/* phone: every frame becomes the whole screen */
@media (max-width: 760px) {
	.ov-side, .ov-overlay { inset: 0; max-inline-size: none; max-block-size: none; direction: ltr; }
	.ov .sizer, .ov .grip, .split-list > :is(.sizer, .grip), .ib-g:nth-child(2) { display: none; }
	dialog.split-item { position: fixed; inset: 0; z-index: 30; background: var(--color-surface); }
	.split-in { contain: none; margin: 0; }
	.ov-side .ov-in, .ov-overlay .ov-in { margin: 0; contain: none; block-size: 100dvh; inline-size: 100vw; }
	.split { grid-template-columns: minmax(0, 1fr); }
	.ivx-full .it-body { grid-template-columns: minmax(0, 1fr); }
	.ivx-full .it-body > .sizer, .ivx-full .it-body > .grip { display: none; }
	.ivx-full .it-main { contain: none; margin: 0; } .ivx-full .it-side { grid-column: 1; grid-row: auto; }
	.ib-g:first-child .ib:not([aria-current]):not(:last-child) { display: none; }
}

/* Confluence: tree and reader */
.cf { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0; align-items: start; margin-inline-start: calc(-1 * var(--pad)); }
.cf-tree { --ov: 17rem; position: sticky; inset-block-start: 0; display: grid; grid-template-rows: minmax(0, 1fr); block-size: 100dvh; overflow: clip; border-inline-end: 1px solid var(--color-border); background: var(--color-surface); }
.cf-tree > * { grid-area: 1 / 1; }
.cf-tree .sizer { min-inline-size: 12rem; max-inline-size: 40rem; }
.cf-tree-in { margin-inline-end: 10px; contain: inline-size; overflow: auto; padding: var(--s-2); font-size: var(--t-ui); }
.tree, .tree ul { list-style: none; padding: 0; }
.tree ul { padding-inline-start: 14px; }
.tree li { position: relative; }
.tn-a { display: block; min-block-size: 26px; margin-inline-start: 24px; padding: 3px 6px; border-radius: var(--r-sm); color: var(--color-text); text-decoration: none; line-height: 1.35; }
.tn-a[aria-current] { background: var(--color-selected); font-weight: 600; }
@media (hover: hover) and (pointer: fine) { .tn-a:hover { background: var(--color-surface-2); } }
.tree summary { position: absolute; inset-block-start: 0; inset-inline-start: 0; inline-size: 24px; block-size: 24px; display: grid; place-items: center; cursor: pointer; list-style: none; border-radius: var(--r-sm); }
.tree summary::-webkit-details-marker { display: none; }
.tree summary::before { content: ""; border-block: 4px solid transparent; border-inline-start: 6px solid var(--color-text-2); transition: rotate 150ms var(--ease-out); }
.tree details[open] > summary::before { rotate: 90deg; }
.tree summary .n { display: none; }
.rd { min-inline-size: 0; max-inline-size: 52rem; padding: var(--s-3) var(--s-5) var(--s-5); display: grid; gap: var(--s-2); }
.crumbs { display: flex; flex-wrap: wrap; gap: 4px 6px; font-size: var(--t-ui); color: var(--color-text-2); }
.crumbs a { color: var(--color-text-2); }
.rd-title { font-size: var(--t-h1); }
.rd-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px var(--s-3); font-size: var(--t-ui); }
.rd-body { display: grid; gap: var(--s-2); padding-block: var(--s-2); font-size: var(--t-body); line-height: 1.6; }
.rd-body p, .rd-body ul { max-inline-size: 70ch; }
.rd-body h3 { font-size: var(--t-lg); margin-block-start: var(--s-2); }
.rd-body pre { margin: 0; padding: var(--s-3); border-radius: var(--r-md); background: var(--color-surface-2); overflow-x: auto; font-size: var(--t-ui); }
.rd-body pre code { background: none; padding: 0; }
.info { display: flex; gap: var(--s-2); padding: var(--s-2) var(--s-3); border-radius: var(--r-md); background: light-dark(#e9f2ff, #0f2240); }
.info .ic { margin-block-start: 4px; color: light-dark(#0b56c2, #8fbfff); }
.tbl { overflow-x: auto; }
.tbl table { border-collapse: collapse; font-size: var(--t-ui); min-inline-size: 100%; }
.tbl th, .tbl td { padding: 5px var(--s-2); border: 1px solid var(--color-border); text-align: start; }
.tbl th { background: var(--color-surface-2); }
.rd .it-sec h2 { font-size: var(--t-body); }
.rd .vrail { padding-block-start: 0; }
@media (max-width: 760px) {
	.cf { grid-template-columns: minmax(0, 1fr); margin-inline: calc(-1 * var(--pad)); }
	.cf-tree { order: 2; position: static; block-size: auto; border: 0; border-block-start: 1px solid var(--color-border); }
	.cf-tree .sizer, .cf-tree .grip { display: none; }
	.cf-tree-in { contain: none; margin: 0; }
	.rd { padding-inline: var(--pad); }
}
.pv { margin: var(--s-2) 0; }
.pv img { display: block; max-inline-size: 100%; block-size: auto; border: 1px solid var(--color-border); border-radius: var(--r-md); }
.pv-text { padding: var(--s-4); border: 1px solid var(--color-border); border-radius: var(--r-md); background: var(--color-surface); display: grid; gap: var(--s-2); max-inline-size: 40rem; }

/* home */
/* Advanced, contents: a column per product */
.home { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 28rem), 1fr)); gap: var(--s-4) var(--s-5); padding-block-start: var(--s-3); }
.hp { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-2); align-content: start; min-inline-size: 0; }
.hp-h { display: flex; flex-wrap: nowrap; align-items: center; gap: var(--s-1) var(--s-3); min-block-size: 40px; border-block-end: 1px solid var(--color-border); }
.hp-h h2 { display: inline-flex; align-items: center; gap: var(--s-2); font-size: var(--t-lg); }
/* Home: what needs the person first, then a row per product, however many */
.hm { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-6); padding-block: var(--s-5) var(--s-6); }
.hm h2 { font-size: var(--t-h2); }
.att { display: grid; gap: var(--s-3); padding: var(--s-4) var(--s-5); border: 1px solid var(--color-border); border-radius: var(--r-lg); background: var(--color-surface); }
.att-on { border-color: color-mix(in oklab, var(--warning) 45%, var(--color-border)); background: color-mix(in oklab, var(--warning-bg) 55%, var(--color-surface)); }
.att-on:has(.sev-error) { border-color: color-mix(in oklab, var(--error) 45%, var(--color-border)); background: color-mix(in oklab, var(--error-bg) 55%, var(--color-surface)); }
.att-l { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-3); }
.att-l li { display: grid; grid-template-columns: 7rem minmax(0, 1fr) auto; align-items: center; gap: var(--s-1) var(--s-3); }
.att-t { display: grid; min-inline-size: 0; } .att-t b { font-weight: 600; } .att-t .t2 { font-size: var(--t-ui); }
@media (max-width: 640px) {
	.att { padding: var(--s-3) var(--s-4); }
	.att-l li { grid-template-columns: minmax(0, 1fr); gap: 2px; }
	.att-l .btn { justify-self: start; margin-block-start: var(--s-1); }
}
.pc > h3 { font-size: var(--t-lg); }
.pc > h3 a { display: inline-flex; align-items: center; gap: var(--s-2); min-block-size: 32px; color: var(--color-text); text-decoration: none; }
.pc-good { margin: 0; font-weight: 600; } .pc-next { margin: 0; color: var(--color-text-2); font-size: var(--t-ui); }
.att-a { justify-self: end; font-weight: 600; white-space: nowrap; }
.pcs { display: grid; gap: var(--s-3); }
.pc-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 24rem), 1fr)); gap: var(--s-4); }
.pc { display: grid; gap: var(--s-3); align-content: start; padding: var(--s-4) var(--s-5); border: 1px solid var(--color-border); border-radius: var(--r-lg); background: var(--color-surface); min-inline-size: 0; }
.pc-h { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-1) var(--s-3); }
.pc-h h3 { font-size: var(--t-lg); }
.pc-h h3 a { display: inline-flex; align-items: center; gap: var(--s-2); min-block-size: 32px; color: var(--color-text); text-decoration: none; }
@media (hover: hover) and (pointer: fine) { .pc-h h3 a:hover span { text-decoration: underline; } }
.pc-f { display: grid; grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr)); gap: var(--s-2) var(--s-4); margin: 0; }
.pc-f dt { font-size: var(--t-cap); color: var(--color-text-2); } .pc-f dd { margin: 0; font-size: var(--t-ui); font-weight: 550; overflow-wrap: anywhere; }
/* A host name breaks only where it must: it has the card's whole width. */
.pc-f .pc-site { grid-column: 1 / -1; }
/* a product's past two weeks: a column per UTC day, neutral height for how long its latest stored backup took, an exception lane under the baseline */
.spk { position: relative; margin: 0; display: grid; gap: var(--s-1); outline: none; }
.spk ol { position: relative; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(14, minmax(0, 1fr)); gap: 2px; cursor: crosshair; touch-action: pan-y; }
.spk li { display: grid; grid-template-rows: 36px 13px; justify-items: center; min-inline-size: 0; border-radius: var(--r-sm); }
.spk .b { align-self: end; inline-size: 100%; max-inline-size: 18px; block-size: var(--h, 0); border-radius: 3px 3px 0 0; background: var(--spark); }
.spk .b-tick { block-size: 3px; border-radius: 0; }
.spk .g { inline-size: 100%; display: grid; place-items: center; border-block-start: 1px solid var(--spark); }
.spk .spk-inc .g { border-block-start-style: dashed; }
.spk .spk-today { box-shadow: inset 0 0 0 1.5px var(--color-text-2); }
.spk li.on { outline: 2px solid var(--color-focus); outline-offset: 1px; }
.spk:focus-visible ol { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.spk-tip { display: none; position: absolute; inset-block-end: calc(100% + 6px); z-index: 5; min-inline-size: 11rem; max-inline-size: min(18rem, 90vw); padding: var(--s-2); border: 1px solid var(--color-border-strong); border-radius: var(--r-md); background: var(--color-surface); box-shadow: 0 6px 20px var(--color-shadow); font-size: var(--t-cap); line-height: 1.4; pointer-events: none; }
.spk-tip b { display: block; margin-block-end: 2px; }
.spk-dl { display: grid; grid-template-columns: auto auto; gap: 1px var(--s-2); }
.spk-dl > :nth-child(odd) { color: var(--color-text-2); }
.spk li.on .spk-tip { display: block; inset-inline-start: var(--tip-x, 0); }
@media (hover: hover) and (pointer: fine) { .spk:not(.js) li:hover .spk-tip { display: block; } }
.spk-cap { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); min-block-size: 20px; font-size: var(--t-cap); }
/* 44 px tall to touch, overlapping the space around its line rather than adding height */
.cal-open { display: inline-flex; align-items: center; gap: var(--s-1); min-block-size: 44px; margin-block: -12px; margin-inline-end: calc(-1 * var(--s-2)); padding: 0 var(--s-2); border: 0; border-radius: var(--r-md); background: none; color: var(--color-link); font: 550 var(--t-ui)/1 var(--font-sans); cursor: pointer; }
.cal-open .ic { inline-size: 16px; block-size: 16px; }
@media (hover: hover) and (pointer: fine) { .cal-open:hover { background: var(--color-surface-2); } }
time { white-space: nowrap; }
.runs { inline-size: 100%; border-collapse: collapse; font-size: var(--t-ui); font-variant-numeric: tabular-nums; }
.runs caption { text-align: start; font-size: var(--t-cap); color: var(--color-text-2); padding-block-end: 2px; }
.runs td { padding: 3px var(--s-3) 3px 0; border-block-start: 1px solid var(--color-border); white-space: nowrap; }
.runs td:last-child { padding-inline-end: 0; white-space: normal; }
.runs .sev { font-size: var(--t-ui); }
.pc-l { display: flex; flex-wrap: wrap; gap: 0 var(--s-4); padding-block-start: var(--s-2); border-block-start: 1px solid var(--color-border); }
.pc-l a { display: inline-flex; align-items: center; gap: var(--s-2); min-block-size: 32px; font-size: var(--t-ui); font-weight: 550; text-decoration: none; }
.pc-l a .ic { inline-size: 14px; block-size: 14px; }
@media (max-width: 640px) { .pc { padding: var(--s-3) var(--s-4); } }
/* One line per change at every width: the title gives way, the time stays */
.plist, .mini { list-style: none; padding: 0; border: 1px solid var(--color-border); border-radius: var(--r-md); background: var(--color-surface); }
.plist li + li, .mini li + li { border-block-start: 1px solid var(--color-border); }
.plist a { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr) auto; align-items: center; gap: var(--s-2); min-block-size: 34px; padding: 0 var(--s-3); color: var(--color-text); text-decoration: none; font-weight: 500; }
.mini li { display: flex; align-items: center; gap: var(--s-2); min-block-size: 34px; padding: 0 var(--s-3); font-size: var(--t-ui); }
.mini a { display: flex; align-items: center; gap: var(--s-2); flex: 1; min-inline-size: 0; color: var(--color-text); text-decoration: none; font-weight: 500; }
.mini .t2 { white-space: nowrap; }
.mini .sp { max-inline-size: 9rem; overflow: hidden; text-overflow: ellipsis; }
@media (hover: hover) and (pointer: fine) { .plist a:hover, .mini li:hover { background: var(--color-surface-2); } }
@media (max-width: 640px) { .mini .sp { display: none; } }

/* generic page */
.pg { display: grid; gap: var(--s-3); padding-block: var(--s-5); max-inline-size: 64rem; }
.pg-narrow { max-inline-size: 42rem; }
.pg-h { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-4); }
.pg h1 { display: flex; align-items: center; gap: var(--s-2); }
.lede { max-inline-size: 70ch; }
.seg-tabs { display: inline-flex; gap: 2px; padding: 2px; border: 1px solid var(--color-border); border-radius: var(--r-md); }
.seg-tabs a { display: inline-flex; align-items: center; gap: var(--s-1); min-block-size: 28px; padding: 0 var(--s-2); border-radius: 4px; color: var(--color-text-2); text-decoration: none; font-weight: 550; font-size: var(--t-ui); }
.seg-tabs a[aria-current] { background: var(--color-selected); color: var(--color-text); }

/* inbox */
.inbox { list-style: none; padding: 0; display: grid; gap: var(--s-2); }
.nt { display: grid; gap: var(--s-2); padding: var(--s-3) var(--s-4); border: 1px solid var(--color-border); border-radius: var(--r-lg); background: var(--color-surface); scroll-margin-block-start: var(--s-4); }
.nt:target { border-color: var(--color-selected-edge); box-shadow: 0 0 0 1px var(--color-selected-edge); }
.nt-top { display: flex; flex-wrap: wrap; align-items: center; gap: 4px var(--s-3); font-size: var(--t-ui); }
.nt-p { display: inline-flex; align-items: center; gap: var(--s-2); font-weight: 600; }
.nt h2 { font-size: var(--t-lg); }
.nt p { max-inline-size: 75ch; }
.nt-act { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); }

/* settings */
.diag { display: grid; gap: var(--s-2); margin-block: var(--s-3); padding: var(--s-3); border-radius: var(--r-md); }
.diag h3 { display: flex; align-items: center; gap: var(--s-2); font-size: var(--t-body); }
.diag h4 { margin-block-start: 4px; }
.diag ul, .diag ol { padding-inline-start: 1.25rem; display: grid; gap: 2px; }
.diag-error { background: var(--error-bg); border: 1px solid color-mix(in oklab, var(--error) 40%, transparent); } .diag-error h3 .ic { color: var(--error); }
.diag-warning { background: var(--warning-bg); border: 1px solid color-mix(in oklab, var(--warning) 40%, transparent); } .diag-warning h3 .ic { color: var(--warning); }
.row-f { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); }
.row-f select { inline-size: auto; }

/* Advanced */
.hist { list-style: none; padding: 0; border: 1px solid var(--color-border); border-radius: var(--r-md); background: var(--color-surface); }
.hr { display: grid; grid-template-columns: 11rem 8rem 12rem minmax(0, 1fr); align-items: center; gap: var(--s-2); min-block-size: 36px; padding: 4px var(--s-3); font-size: var(--t-ui); }
.hr + .hr { border-block-start: 1px solid var(--color-border); }
.hr-p { display: inline-flex; align-items: center; gap: var(--s-2); }
.hr-s { display: grid; } .hr-s small { color: var(--color-text-2); }
.hr-warning, .hr-error { background: color-mix(in oklab, var(--color-surface) 70%, var(--warning-bg)); }
.hr-error { background: color-mix(in oklab, var(--color-surface) 60%, var(--error-bg)); }
@media (max-width: 760px) { .hr { grid-template-columns: 1fr auto; } .hr-s { grid-column: 1 / -1; } }
.run-o { display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: center; }
.months { display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: var(--s-4) var(--s-5); }
.month h2 { margin-block-end: 6px; font-size: var(--t-body); }
/* calendar days: a neutral bar for a stored backup, a glyph for an exception beside it, today outlined */
.cal { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 3px; }
.wd { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 3px; font-size: var(--t-cap); color: var(--color-text-2); text-align: center; }
.cd { min-inline-size: 0; }
.cd-x { min-block-size: 44px; }
.cd-c { display: grid; grid-template-rows: 1fr 14px; justify-items: center; align-items: center; min-block-size: 44px; padding-block: 4px 3px; border-radius: var(--r-sm); font-size: var(--t-ui); font-variant-numeric: tabular-nums; color: var(--color-text); text-decoration: none; }
.cd-later .cd-c { color: var(--color-text-2); font-weight: 400; }
.cd-n { position: relative; }
.cd-q { position: absolute; inset-inline-start: 100%; inset-block-start: -3px; margin-inline-start: 1px; font-size: 10px; font-weight: 700; color: var(--color-text-2); }
.cd-m { display: inline-flex; align-items: center; gap: 3px; block-size: 14px; }
.cd-k { display: block; inline-size: 12px; block-size: 3px; border-radius: var(--r-sm); background: var(--spark); }
.cd-warning .cd-c { background: var(--warning-bg); } .cd-error .cd-c { background: var(--error-bg); }
.cd-warning .cd-k, .cd-error .cd-k { background: var(--color-text-2); }
.xg { inline-size: 12px; block-size: 12px; flex: none; stroke-width: 1.8; } .xg-warning { color: var(--warning); } .xg-error { color: var(--error); }
.cd[aria-current] .cd-c { box-shadow: inset 0 0 0 1.5px var(--color-text); font-weight: 650; }
@media (hover: hover) and (pointer: fine) { a.cd-c:hover { outline: 2px solid var(--color-focus); outline-offset: -1px; } }

/* the month peek: this month and last for one product, beside what opened it; a modal sheet along the bottom on phones */
.peek { padding: 0; inline-size: min(calc(100vw - 16px), 20rem); max-inline-size: none; max-block-size: min(80dvh, 36rem); overflow: hidden; display: none; flex-direction: column; color: var(--color-text); }
.peek:popover-open, .peek[open] { display: flex; }
@supports (position-area: bottom) { .peek { position-area: bottom span-left; position-try-fallbacks: flip-block, flip-inline, flip-block flip-inline, span-all left, span-all right; } }
.peek-h { flex: none; display: flex; align-items: center; gap: var(--s-2); padding-inline-start: var(--s-3); border-block-end: 1px solid var(--color-border); }
.peek-h b { flex: 1; font-weight: 650; }
.peek-x { inline-size: 44px; block-size: 44px; }
.peek-b { flex: 1 1 auto; min-block-size: 0; overflow: auto; overscroll-behavior: contain; display: grid; align-content: start; gap: var(--s-4); padding: var(--s-2) 12px var(--s-3); }
.peek-n { margin: 0; font-size: var(--t-ui); color: var(--color-text-2); }
.peek .month h3 { margin-block-end: 4px; font-size: var(--t-ui); }
.peek .cal, .peek .wd { gap: 2px; }
.peek-f { flex: none; display: flex; align-items: center; justify-content: space-between; min-block-size: 44px; padding: 0 var(--s-3); border-block-start: 1px solid var(--color-border); font-size: var(--t-ui); font-weight: 550; text-decoration: none; }
.peek-f .ic { inline-size: 14px; block-size: 14px; }
.peek:modal::backdrop { background: rgb(0 0 0 / 0.4); }
@media (max-width: 640px) {
	.peek:popover-open, .peek:modal { position: fixed; position-area: none; inset: auto 0 0 0; margin: 0; inline-size: 100%; max-inline-size: 100%; max-block-size: 75svh; border-inline: 0; border-block-end: 0; border-radius: var(--r-lg) var(--r-lg) 0 0; padding-block-end: env(safe-area-inset-bottom); }
}
/* the product's calendar: an icon at the end of its toolbar on wide screens, an action in the header menu below 901 px */
.tb .cal-btn { flex: none; inline-size: 44px; block-size: 44px; margin-inline-start: auto; }
.tb .fresh + .cal-btn { margin-inline-start: 0; }
.pop-menu .m-cal { display: none; }
@media (max-width: 900px) { .tb .cal-btn { display: none; } .pop-menu .m-cal { display: inline-flex; } .hd:has(.m-cal) .menu-btn { display: inline-grid; } }
@media (forced-colors: active) {
	.cd-k, .spk .b { forced-color-adjust: none; background: CanvasText; }
	.cd[aria-current] .cd-c, .spk .spk-today { outline: 2px solid CanvasText; outline-offset: -2px; }
}

/* search */
.sgrid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-5); }
.sg { display: grid; gap: var(--s-2); align-content: start; }
.sg h2 { display: flex; gap: var(--s-2); align-items: baseline; }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* phone density: one toolbar line, one scrolling filter row, an alert's explanation shortens to one line instead of disappearing */
@media (max-width: 640px) {
	/* the flex item's auto min-width is its unbroken text otherwise, which keeps it (and the alert) from ever shrinking enough to clip */
	.alert { flex-wrap: nowrap; align-items: center; padding-block: 0; }
	.alert > span { flex: 1 1 0; min-inline-size: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
	.alert > a { flex: none; }
	.tb { flex-wrap: nowrap; } .vtabs { flex: 1; min-inline-size: 0; } .fresh:not(.fresh-bad) { display: none; }
	/* beside a switcher the product's logo names it; the header names it in words */
	.tb-h:has(+ .asw) > span:not(.mark) { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
	.asw { max-inline-size: 42vw; }
	/* the grouping keeps its value; its label stays for screen readers */
	.gb .gb-l { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
	.hp-h { flex-wrap: wrap; } .hp .fresh { display: inline-flex; }
	.mini li { flex-wrap: wrap; row-gap: 2px; padding-block: 6px; } .mini a { flex-basis: 100%; } .mini a .ti { white-space: normal; }
	.fbar { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: calc(-1 * var(--pad)); padding-inline: var(--pad); }
	.fbar > * { flex: none; } .qf { flex: 0 0 62vw; }
}

/* every link that stands alone in a component gets a 24 px target (WCAG 2.5.8) */
.alert a, .hr-a, .mini a, .plist a, .crumbs a, .it-crumbs a, .nt-act a, .pop-foot, .rc-open, .tl-n a, .hp-views a, .vlist a, .files a, .links a, .qerr a, .rd-meta a, .dl a, .pg > p > a, .pg-narrow > p > a, .sg p a, .lend a, .note a, .callout a, .diag a, .fbar > a, .scard > p > a, .hint a, .st-sum a, .locked-why a, .facts a, .nextup a, .run a, .callout .acts a { display: inline-flex; align-items: center; gap: var(--s-1); min-block-size: 24px; min-inline-size: 24px; }
.card .rl { min-block-size: 24px; }
/* at phone width the alert's action is the only route to "what and why"; it gets a thumb-sized target there */
@media (max-width: 640px) { .alert a { min-block-size: 44px; min-inline-size: 44px; } }
/* timeline disclosure sits beside the epic link, never around it */
.tl-grp { position: relative; }
.tl-grp > details > summary { position: absolute; inset-block-start: 0; inset-inline-start: 4px; inline-size: 28px; block-size: 34px; display: grid; place-items: center; list-style: none; cursor: pointer; border-radius: var(--r-sm); }
.tl-grp > details > summary::-webkit-details-marker { display: none; }
.tl-grp > details > summary::before { content: ""; border-block: 4px solid transparent; border-inline-start: 6px solid var(--color-text-2); transition: rotate 150ms var(--ease-out); }
.tl-grp > details[open] > summary::before { rotate: 90deg; }
.tl-grp > .tl-r .tl-n { padding-inline-start: 34px; }
/* visually hidden inputs stay inside the scroller that shows their labels */
.vrail-in { position: relative; }
.rd, .it-head, .pg, .hp, .sg, .sm, .scard { grid-template-columns: minmax(0, 1fr); }
.live, .vrail { min-inline-size: 0; }
.hp-h h2 a, .row .rl, .rc-open { min-block-size: 24px; display: inline-flex; align-items: center; }
.row .rl { display: flex; }
.rcard { block-size: 12rem; }

/* version list: the version line is the button; pointing at a version previews it in place */
.vsw { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-1); }
/* versions: a strip in the page's flow between the heading and the body; it pushes the content, never covers it */
.vstrip { display: grid; gap: var(--s-2); margin-block: var(--s-2); padding-block: 6px; border-block: 1px solid var(--color-border); min-inline-size: 0; }
.vstrip-h { display: flex; align-items: baseline; gap: var(--s-2); font-size: var(--t-ui); color: var(--color-text-2); }
.vstrip-h .ic { align-self: center; }
.vstrip ul { list-style: none; margin: 0; padding: 0 0 2px; display: flex; gap: var(--s-1); overflow-x: auto; scrollbar-width: thin; }
.vstrip li { flex: none; }
.vstrip li a { display: grid; gap: 1px; min-block-size: 40px; padding: 4px var(--s-2); border: 1px solid var(--color-border); border-radius: var(--r-md); background: var(--color-surface); color: var(--color-text); text-decoration: none; font-size: var(--t-ui); }
.vstrip li a small { max-inline-size: 16rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--color-text-2); }
.vstrip li a[aria-current] { border-color: var(--color-selected-edge); background: var(--color-selected); }
.vstrip li a:focus-visible { outline-offset: 1px; }
@media (hover: hover) and (pointer: fine) { .vstrip li a:hover { border-color: var(--color-border-strong); background: var(--color-surface-2); } }
/* a previewed version flashes what changed: fields in yellow, added words green, dropped words red, then they settle */
.vsw .chg { --flash-name: watch; animation: watch 900ms ease-out both; animation-name: none; }
.vsw ins.dx { --flash-name: dx-in; text-decoration: none; border-radius: var(--r-sm); animation: dx-in 900ms ease-out both; animation-name: none; }
.vsw del.dx { --flash-name: dx-out; display: inline-block; max-inline-size: 0; overflow: hidden; vertical-align: bottom; white-space: nowrap; opacity: 0; color: var(--error); text-decoration: line-through; border-radius: var(--r-sm); animation: dx-out 900ms ease-out both; animation-name: none; }
@keyframes watch { 0%, 35% { background-color: var(--flash); box-shadow: 0 0 0 2px var(--flash-edge); } 100% { background-color: transparent; box-shadow: 0 0 0 2px transparent; } }
@keyframes dx-in { 0%, 35% { background-color: var(--ok-bg); box-shadow: 0 0 0 1px var(--ok); } 100% { background-color: transparent; box-shadow: 0 0 0 1px transparent; } }
@keyframes dx-out { 0%, 35% { max-inline-size: 40em; opacity: 1; background-color: var(--error-bg); } 100% { max-inline-size: 0; opacity: 0; background-color: transparent; } }
/* a version arrived at from another (?was=) plays its marks once, then reads exactly as the version does; dropped
   words are not shown in place, so nothing reflows (the compare view lists them) */
.vsw .vstack del.dx { display: none; }
.vsw .vtrans :is(.chg, ins.dx) { animation-name: var(--flash-name); }
.vsw .vtrans :is(.chg-m, .chg-block) { display: none; }
.vsw .vtrans .chg { box-shadow: none; }
@media (prefers-reduced-motion: reduce) { .vsw :is(.chg, .dx) { animation: none !important; } }
/* another version read as its changes: only the parts that changed; marks stay, since reading them is the point */
.dcmp-t { margin-inline-start: auto; padding: 2px var(--s-2); border: 1px solid var(--color-border-strong); border-radius: var(--r-md); color: var(--color-text); font-size: var(--t-ui); font-weight: 550; text-decoration: none; }
.dcmp-t[aria-current] { border-color: var(--color-selected-edge); background: var(--color-selected); }
.dcompare { display: grid; gap: var(--s-2); padding-block: var(--s-2); }
.dcmp-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-2) var(--s-4); }
.dcmp-f { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3); font-size: var(--t-ui); }
.dcmp-f label { display: inline-flex; align-items: center; gap: var(--s-2); font-weight: 600; }
.dcmp-f select { inline-size: auto; }
.dmodes { display: flex; flex-wrap: wrap; gap: 2px; margin: 0; font-size: var(--t-ui); }
.dmodes a { padding: 2px var(--s-2); border-radius: var(--r-sm); color: var(--color-text-2); text-decoration: none; font-weight: 550; }
.dmodes a[aria-current] { color: var(--color-text); background: var(--color-selected); box-shadow: inset 0 -2px 0 var(--color-selected-edge); }
.dparts { display: grid; gap: var(--s-4); padding-block: var(--s-3); }
.vstrip-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-1) var(--s-3); }
.vstrip-top > .vstack { flex: 1 1 18rem; min-inline-size: 0; }
.vprev { color: var(--warning); }
.dpart h3 { font-size: var(--t-ui); color: var(--color-text-2); font-weight: 600; margin-block-end: var(--s-1); }
.dinline { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-2); margin: 0; }
.dbefore { color: var(--color-text-2); text-decoration: line-through; text-decoration-color: color-mix(in oklab, var(--error) 60%, transparent); }
.darrow { color: var(--color-text-2); }
.dblk { padding: var(--s-1) var(--s-3); border-inline-start: 3px solid var(--color-border-strong); }
.dblk + .dblk { margin-block-start: var(--s-1); }
.dblk-old { border-color: var(--error); background: color-mix(in oklab, var(--error-bg) 60%, transparent); color: var(--color-text-2); }
.dblk-new { border-color: var(--ok); background: color-mix(in oklab, var(--ok-bg) 60%, transparent); }
.dfold summary { cursor: pointer; color: var(--color-link); font-size: var(--t-ui); font-weight: 550; padding-block: var(--s-1); }
.vsw .dparts ins.dx { animation: none; background-color: var(--ok-bg); box-shadow: 0 0 0 1px color-mix(in oklab, var(--ok) 50%, transparent); }
.vsw .dparts del.dx { animation: none; display: inline; max-inline-size: none; opacity: 1; white-space: normal; background-color: var(--error-bg); color: inherit; }
.dcols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-3); }
.dcol { min-inline-size: 0; padding: var(--s-2) var(--s-3); border: 1px solid var(--color-border); border-radius: var(--r-md); }
.vsw .dcol del.dx { display: none; }
.vsw .dcol-a ins.dx { background-color: var(--error-bg); box-shadow: none; text-decoration: line-through; }
@media (max-width: 640px) { .dcols { grid-template-columns: minmax(0, 1fr); } }
/* list sentinel: a plain link without script; a quiet loading line while the next chunk arrives */
li.more { padding: var(--s-2) var(--s-3); font-size: var(--t-ui); color: var(--color-text-2); }
li.more .loading { display: none; }
/* The scripting media feature is known before the first paint; a class set by a deferred script is not, and
   showing or hiding by it moves the page once the script runs. */
@media (scripting: enabled) {
	li.more:not([data-failed]) a { display: none; }
	li.more:not([data-failed]) .loading { display: inline; }
}
@media (scripting: none) { .js-only { display: none; } }
@media (scripting: enabled) { .js-hide { display: none; } }
.grip[role="separator"] { pointer-events: none; }
.grip[role="separator"]:focus-visible { outline: 2px solid var(--color-focus); outline-offset: -2px; }
.grip[role="separator"]:focus-visible::after { background: var(--color-focus); }

/* ---------- app: values the backups hold ---------- */
/* Jira issue type tiles and priority glyphs; each tile keeps its glyph at 4.5:1 or more in both schemes. */
.ji { display: inline-grid; place-items: center; inline-size: 16px; block-size: 16px; flex: none; border-radius: var(--r-sm); }
img.ji { object-fit: contain; }
.jt svg { inline-size: 12px; block-size: 12px; }
.jp svg { inline-size: 16px; block-size: 16px; }
.jt { color: light-dark(#fff, #081210); }
.jt-blue { background: light-dark(#2563eb, #60a5fa); } .jt-red { background: light-dark(#dc2626, #f87171); } .jt-purple { background: light-dark(#9333ea, #c084fc); }
.jt-green { background: light-dark(#15803d, #4ade80); } .jt-orange { background: light-dark(#c2410c, #fb923c); } .jt-yellow { background: light-dark(#b45309, #fbbf24); } .jt-gray { background: light-dark(#4b5563, #9ca3af); }
.jp-blue { color: light-dark(#2563eb, #60a5fa); } .jp-red { color: light-dark(#dc2626, #f87171); } .jp-purple { color: light-dark(#9333ea, #c084fc); }
.jp-green { color: light-dark(#15803d, #4ade80); } .jp-orange { color: light-dark(#c2410c, #fb923c); } .jp-yellow { color: light-dark(#b45309, #fbbf24); } .jp-gray { color: light-dark(#4b5563, #9ca3af); }

/* Board columns follow the site's statuses, so their number varies. */
.bhead, .bgrid { grid-template-columns: repeat(var(--cols, 4), minmax(13rem, 1fr)); min-inline-size: calc(var(--cols, 4) * 13.5rem); }

/* Rich text from the backup: descriptions, comments, page bodies. */
.rt { display: grid; gap: var(--s-2); max-inline-size: 72ch; }
.rt > * { margin: 0; }
.rt img { max-inline-size: 100%; block-size: auto; border-radius: var(--r-sm); }
.rt table { border-collapse: collapse; font-size: var(--t-ui); }
.rt th, .rt td { border: 1px solid var(--color-border); padding: 4px 8px; text-align: start; vertical-align: top; }
.rt pre { margin: 0; padding: var(--s-3); border-radius: var(--r-md); background: var(--color-surface-2); overflow-x: auto; font-size: var(--t-ui); }
.rt pre code { background: none; padding: 0; }
.rt blockquote { margin: 0; padding-inline-start: var(--s-3); border-inline-start: 3px solid var(--color-border-strong); color: var(--color-text-2); }
.rt ul, .rt ol { padding-inline-start: 1.25rem; }
.rd-body.rt { max-inline-size: none; }
.rd-body.rt > p, .rd-body.rt > ul, .rd-body.rt > ol { max-inline-size: 70ch; }
.tbl, .rd-body .tbl, .rt .tbl { overflow-x: auto; }
.pre { white-space: pre-wrap; }

/* Field values in their readable form; see jira-field-values.ts. */
/* Jira issue colours: timeline bars, epic badges and colour swatches. */
.jc-purple { --jc: var(--jc-purple); } .jc-dark_purple { --jc: var(--jc-dark-purple); } .jc-blue { --jc: var(--jc-blue); } .jc-dark_blue { --jc: var(--jc-dark-blue); } .jc-teal { --jc: var(--jc-teal); } .jc-dark_teal { --jc: var(--jc-dark-teal); } .jc-green { --jc: var(--jc-green); } .jc-dark_green { --jc: var(--jc-dark-green); } .jc-yellow { --jc: var(--jc-yellow); } .jc-dark_yellow { --jc: var(--jc-dark-yellow); } .jc-orange { --jc: var(--jc-orange); } .jc-dark_orange { --jc: var(--jc-dark-orange); } .jc-grey { --jc: var(--jc-grey); } .jc-dark_grey { --jc: var(--jc-dark-grey); }
.bar[class*="jc-"] { background: var(--jc); color: var(--on-jc); }
.jc { display: inline-flex; align-items: center; gap: var(--s-2); }
.sw { inline-size: 12px; block-size: 12px; border-radius: var(--r-sm); background: var(--jc); flex: none; }
.eb { display: inline-block; max-inline-size: 100%; padding: 0 5px; border-radius: var(--r-sm); font: 600 var(--t-cap)/1.5 var(--font-sans); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; vertical-align: middle; background: var(--color-surface-2); color: var(--color-text); }
.eb[class*="jc-"] { background: var(--jc); color: var(--on-jc); }
.card-e { display: block; margin-block-start: 4px; min-inline-size: 0; }
.fvp .fvp { padding-inline-start: var(--s-2); border-inline-start: 2px solid var(--color-border); }
.allf { margin-block-start: var(--s-3); border-block-start: 1px solid var(--color-border); padding-block-start: var(--s-2); font-size: var(--t-ui); }
.allf > summary { display: inline-flex; align-items: center; gap: var(--s-1); min-block-size: 24px; cursor: pointer; color: var(--color-text-2); font-weight: 550; list-style: none; }
.allf > summary::-webkit-details-marker { display: none; }
.allf > summary .ic { transition: rotate 150ms var(--ease-out); }
.allf[open] > summary .ic { rotate: 90deg; }
.allf > p { margin: 4px 0 var(--s-2); }
.fvl { list-style: none; padding: 0; margin: 0; display: grid; gap: 2px; }
.fvp { margin: 0; display: grid; gap: 2px; }
.fvp > div { display: grid; grid-template-columns: minmax(6rem, max-content) minmax(0, 1fr); gap: var(--s-2); }
.fvp dt { color: var(--color-text-2); }
.fvp dd { margin: 0; min-inline-size: 0; }

/* Settings */
.note-error { background: var(--error-bg); border-color: color-mix(in oklab, var(--error) 40%, transparent); }
.note-error .ic { color: var(--error); }
/* Schedule: one sentence is the control; presets fill it, the server's reading stands under it */
.sch-f { display: grid; gap: var(--s-4); max-inline-size: 44rem; }
.sch-f > .acts .btn, .sch-f .btn-primary { justify-self: start; }
.sch-fld input { max-inline-size: none !important; }
.presets { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-block: 2px 4px; }
.btn-sm { min-block-size: 28px; padding: 0 var(--s-2); font-size: var(--t-cap); }
.sch-out { display: block; min-block-size: 2.6em; }
.sch-r { display: grid; gap: 2px; font-size: var(--t-ui); }
.sch-r > .ic { margin-block-start: 2px; color: var(--color-link); }
.sch-r b { font-weight: 600; } .sch-r .t2 { display: block; }
.sch-tz select { max-inline-size: min(100%, 20rem); margin-block-start: var(--s-2); }
.sch-ps { margin: 0; padding: 0; border: 0; min-inline-size: 0; }
.sch-ps legend { padding: 0; margin-block-end: var(--s-1); font-weight: 650; font-size: var(--t-ui); }
.sch-ps ul { list-style: none; margin: 0; padding: 0; border-block-start: 1px solid var(--color-border); }
.sch-p { display: grid; gap: 4px var(--s-3); padding-block: var(--s-3); border-block-end: 1px solid var(--color-border); font-size: var(--t-ui); }
.prod-on { display: inline-flex; align-items: center; gap: var(--s-2); font-size: var(--t-body); }
.prod-on input { inline-size: 16px; block-size: 16px; margin: 0; accent-color: var(--color-accent-fill); }
.sch-own-t { display: inline-flex; align-items: center; gap: var(--s-2); color: var(--color-text-2); }
.sch-p:not(:has(.sch-own-t input:checked)) .sch-own { display: none; }
.sch-own { padding-inline-start: var(--s-5); }
code.key { word-break: break-all; }
.pv-pdf { display: block; inline-size: 100%; block-size: min(70vh, 48rem); border: 1px solid var(--color-border); border-radius: var(--r-md); background: var(--color-surface); }
pre.pv-text { white-space: pre-wrap; display: block; font: var(--t-ui)/1.5 var(--font-mono); overflow-x: auto; }
.pv-file { margin-block: var(--s-2) var(--s-3); scroll-margin-block-start: var(--s-4); }
.pv-bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3); margin: 0; font-size: var(--t-ui); }
.pv-bar b { min-inline-size: 0; overflow-wrap: anywhere; }
.files a[aria-current="true"] { font-weight: 600; }
.files .dl-file { display: inline-flex; align-items: center; justify-content: center; min-block-size: 24px; min-inline-size: 24px; color: var(--color-text-2); }
.old-link { margin: var(--s-2) var(--pad) 0; }
.plist .pl-x { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--s-2); min-block-size: 34px; padding: 0 var(--s-3); font-weight: 500; }
.announce { margin: var(--s-2) var(--pad) 0; }
.alert-info { background: var(--ok-bg); border: 1px solid color-mix(in oklab, var(--ok) 40%, transparent); }
.it-bar:focus { outline: none; }

/* first run: the steps to a first backup, with the forms in line and a few facts beside */
.su { display: grid; gap: var(--s-4); padding-block: var(--s-4) var(--s-5); }
.su-h { display: grid; gap: var(--s-1); }
.su-t, .sm-t { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-4); }
.su-t h1 { font-size: var(--t-h1); letter-spacing: -0.01em; }
.su-t .note, .sm-h .note { margin: 0; padding: 2px var(--s-2); font-size: var(--t-ui); }
.su-h .lede { color: var(--color-text-2); max-inline-size: 60ch; }
.su-prog { display: flex; align-items: center; gap: var(--s-3); font-size: var(--t-ui); font-weight: 600; color: var(--color-text-2); }
.su-bar { display: grid; grid-template-columns: repeat(3, 2.5rem); gap: var(--s-1); flex: none; }
.su-bar i { block-size: 6px; border-radius: var(--r-sm); background: var(--color-border-strong); }
.su-bar i.done { background: var(--color-accent-fill); }
.su-bar i.cur { background: color-mix(in oklab, var(--color-accent-fill) 45%, var(--color-border-strong)); }
.steps { list-style: none; margin: 0; padding: 0; display: grid; }
.step { position: relative; display: grid; grid-template-columns: 2.25rem minmax(0, 1fr); gap: 0 var(--s-3); padding-block-end: var(--s-4); }
.step:not(:last-child)::before { content: ""; position: absolute; inset-block: 2.25rem 0; inset-inline-start: calc(1.125rem - 1px); inline-size: 2px; background: var(--color-border); }
.step.done:not(:last-child)::before { background: var(--color-accent-fill); }
.st-m { display: grid; place-items: center; inline-size: 2.25rem; block-size: 2.25rem; border-radius: 50%; border: 2px solid var(--color-border-strong); background: var(--color-surface); color: var(--color-text-2); font: 650 var(--t-body)/1 var(--font-sans); }
.step.done .st-m { border-color: var(--color-accent-fill); background: var(--color-accent-fill); color: var(--color-on-accent); }
.step:is(.current, .running) .st-m { border-color: var(--color-accent-fill); color: var(--color-link); }
.step.failed .st-m { border-color: var(--error); color: var(--error); }
.st-m .ic { inline-size: 16px; block-size: 16px; }
.st-b { display: grid; gap: var(--s-2); min-inline-size: 0; padding-block-start: 6px; }
.st-h { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-1) var(--s-3); }
.st-h h2 { font-size: var(--t-lg); }
.st-s { font-size: var(--t-cap); font-weight: 650; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-text-2); }
.step:is(.current, .running) .st-s { color: var(--color-link); } .step.done .st-s { color: var(--ok); } .step.failed .st-s { color: var(--error); }
.st-why { color: var(--color-text-2); max-inline-size: 62ch; }
.st-sum { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-1) var(--s-3); font-size: var(--t-ui); }
.st-sum b { font-weight: 600; }
.st-sum .logos { gap: var(--s-1); } .st-sum .logos span + img { margin-inline-start: var(--s-2); }
.st-lock, .locked-why { display: grid; grid-template-columns: 14px minmax(0, 1fr); align-items: baseline; gap: 2px var(--s-2); font-size: var(--t-ui); color: var(--color-text-2); }
.st-lock .ic, .locked-why .ic { align-self: center; }
.locked-why a { grid-column: 2; justify-self: start; }
.st-lock .ic, .locked-why .ic { inline-size: 14px; block-size: 14px; }
.st-card { position: relative; margin-block-start: var(--s-1); padding: var(--s-3) var(--s-4); border: 1px solid var(--color-border); border-radius: var(--r-lg); background: var(--color-surface); box-shadow: 0 1px 2px var(--color-shadow); display: grid; gap: var(--s-3); }
.frm, .frm-c { display: grid; gap: var(--s-2); }
.fld { display: grid; gap: var(--s-1); min-inline-size: 0; }
.fld label { font-weight: 600; font-size: var(--t-ui); }
.fld input:not([type="checkbox"]):not([type="radio"]) { max-inline-size: 30rem; min-block-size: 36px; }
.fld input:user-invalid, .fld input[aria-invalid="true"] { border-color: var(--error); box-shadow: 0 0 0 1px var(--error); }
.hint { font-size: var(--t-ui); color: var(--color-text-2); max-inline-size: 62ch; }
.hint .ic { inline-size: 12px; block-size: 12px; }
.ferr { display: flex; gap: var(--s-2); align-items: baseline; font-size: var(--t-ui); color: var(--error); font-weight: 550; }
.ferr .ic { align-self: center; }
.fld-pair, .fld-trio { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); align-items: start; gap: var(--s-2) var(--s-3); max-inline-size: 46rem; }
.fld-trio { grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); }
.prods { border: 0; padding: 0; margin: 0; min-inline-size: 0; }
.prod-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-2); }
@media (max-width: 480px) { .prod-row { grid-template-columns: minmax(0, 1fr); } }
.prods legend { font-weight: 600; font-size: var(--t-ui); margin-block-end: 4px; padding: 0; }
.prods .ferr { margin-block-start: 4px; }
.prod { display: grid; grid-template-columns: auto 22px minmax(0, 1fr); align-items: center; gap: var(--s-2); min-block-size: 36px; padding: 2px var(--s-2); border: 1px solid var(--color-border-strong); border-radius: var(--r-md); background: var(--color-bg); cursor: pointer; }
.prod:has(input:checked) { border-color: var(--color-selected-edge); background: var(--color-selected); }
.prod:has(input:focus-visible) { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.prod input { inline-size: 16px; block-size: 16px; margin: 0; accent-color: var(--color-accent-fill); }
.prod > span { display: grid; min-inline-size: 0; }
.prod b { font-weight: 600; }
.prod small { color: var(--color-text-2); font-size: var(--t-cap); }
.acts { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3); }
.acts .btn { min-block-size: 36px; padding-inline: var(--s-4); }
.more summary { display: inline-flex; align-items: center; gap: var(--s-1); min-block-size: 28px; color: var(--color-link); font-size: var(--t-ui); font-weight: 550; cursor: pointer; list-style: none; }
.more summary::-webkit-details-marker { display: none; }
.more summary .ic { transition: rotate 150ms var(--ease-out); }
.more[open] summary .ic { rotate: 90deg; }
.more[open] > :not(summary) { margin-block-start: var(--s-2); }
.keybox { display: grid; gap: var(--s-2); padding: var(--s-3) var(--s-4); border-radius: var(--r-md); background: var(--warning-bg); border: 1px solid color-mix(in oklab, var(--warning) 45%, transparent); }
.keybox code { display: inline-block; font-size: var(--t-body); word-break: break-all; padding: 4px 6px; background: var(--color-surface); user-select: all; }
.run { display: flex; align-items: flex-start; gap: var(--s-3); padding: var(--s-3); border-radius: var(--r-md); background: var(--color-selected); }
.run > div { display: grid; gap: var(--s-2); min-inline-size: 0; flex: 1; }
.run-n { display: grid; gap: var(--s-1); font-size: var(--t-ui); color: var(--color-text-2); font-variant-numeric: tabular-nums; }
.run-bar { display: block; block-size: 6px; border-radius: var(--r-sm); background: var(--color-border-strong); overflow: hidden; }
.run-bar i { display: block; block-size: 100%; border-radius: inherit; background: var(--color-accent-fill); }
.spin { inline-size: 18px; block-size: 18px; margin-block-start: 1px; border-radius: 50%; border: 2px solid color-mix(in oklab, var(--color-accent-fill) 30%, transparent); border-block-start-color: var(--color-accent-fill); animation: spin 900ms linear infinite; flex: none; }
@keyframes spin { to { rotate: 1turn; } }
@media (prefers-reduced-motion: reduce) { .spin { animation: none; border-color: var(--color-accent-fill); } .more summary .ic { transition: none; } }
.callout-error { background: var(--error-bg); border: 1px solid color-mix(in oklab, var(--error) 40%, transparent); } .callout-error > .ic { color: var(--error); }
.callout > div { display: grid; gap: var(--s-1); }
.note-error { background: var(--error-bg); border-color: color-mix(in oklab, var(--error) 40%, transparent); } .note-error .ic { color: var(--error); }
.su-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); gap: var(--s-3) var(--s-5); padding: var(--s-4); border-block-start: 1px solid var(--color-border); }
.su-facts .su-brand { grid-column: 1 / -1; }
.su-brand { display: flex; align-items: center; gap: var(--s-3); }
.su-brand svg { inline-size: 36px; block-size: 36px; color: var(--color-text); flex: none; }
.su-brand b { display: block; font: 600 var(--t-lg)/1.2 var(--font-mono); }
.su-brand small { color: var(--color-text-2); font-size: var(--t-ui); }
.su-brand .logos { margin-inline-start: auto; }
.facts { list-style: none; margin: 0; padding: 0; display: contents; font-size: var(--t-ui); }
.facts li { font-size: var(--t-ui); }
.facts li { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: var(--s-2); }
.facts li > .ic { inline-size: 16px; block-size: 16px; margin-block-start: 2px; color: var(--color-link); }
.facts b { display: block; font-weight: 600; font-size: var(--t-body); }
.logos { display: inline-flex; align-items: center; gap: var(--s-2); }
@media (max-width: 480px) {
	.su { padding-block-start: var(--s-4); }
	.su-h h1 { font-size: var(--t-h1); } .su-h .lede { font-size: var(--t-body); }
	.step { grid-template-columns: 1.75rem minmax(0, 1fr); gap: 0 var(--s-2); }
	.st-m { inline-size: 1.75rem; block-size: 1.75rem; font-size: var(--t-ui); }
	.step:not(:last-child)::before { inset-block-start: 1.75rem; inset-inline-start: calc(0.875rem - 1px); }
	.st-b { padding-block-start: 3px; }
	.st-card { padding: var(--s-3); margin-inline-start: calc(-1.75rem - var(--s-2)); }
}

/* Settings: the section list carries each section's state; a card per section */
/* Sections: plain links, never state. Beside the cards where there is room, a disclosure where there is not. */
.sm-b { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-5); }
.sm-c { display: grid; gap: var(--s-5); min-inline-size: 0; }
.diag-tech summary { cursor: pointer; color: var(--color-text-2); font-size: var(--t-ui); }
.diag-tech p { margin: var(--s-1) 0 0; font-size: var(--t-ui); color: var(--color-text-2); overflow-wrap: anywhere; }
.bdg { display: inline-flex; align-items: center; gap: var(--s-1); font-size: var(--t-cap); font-weight: 600; color: var(--color-text-2); white-space: nowrap; }
.bdg .ic { inline-size: 12px; block-size: 12px; }
.bdg-ok { color: var(--ok); } .bdg-warning { color: var(--warning); } .bdg-error { color: var(--error); }
.sm { display: grid; gap: var(--s-5); align-content: start; padding-block: var(--s-5) var(--s-6); }
.sm-h { display: grid; gap: var(--s-2); }
.nextup { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3); padding: var(--s-3) var(--s-4); border-radius: var(--r-lg); background: var(--color-selected); border: 1px solid color-mix(in oklab, var(--color-selected-edge) 35%, transparent); }
.nextup b { font-weight: 650; }
/* Settings sections are separated by space and a hairline, not boxed; only a problem (the diagnosis) is tinted */
.scard { position: relative; display: grid; gap: var(--s-3); scroll-margin-block-start: var(--s-3); min-inline-size: 0; }
.sm-c > .scard + .scard { padding-block-start: var(--s-5); border-block-start: 1px solid var(--color-border); }
.scard-h { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-1) var(--s-3); }
.scard-h h2 { display: inline-flex; align-items: center; gap: var(--s-2); font-size: var(--t-lg); }
.scard-h .bdg { margin-inline-start: auto; font-size: var(--t-ui); font-weight: 500; }
.scard > .anchor { position: absolute; inset-block-start: 0; }
.scard-n { display: inline-grid; place-items: center; inline-size: 1.5rem; block-size: 1.5rem; border-radius: 50%; border: 1.5px solid var(--color-border-strong); font-size: var(--t-cap); font-weight: 650; color: var(--color-text-2); }
.scard.locked { color: var(--color-text-2); }
/* identifiers read as monospace text, not as chips */
.scard dd code, .scard p > code.key { padding: 0; border: 0; background: none; }
.scard .dl-wide { margin-block: 0; }
.plist-add { list-style: none; margin: 0; padding: 0; }
.prow { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; align-items: center; gap: var(--s-3); padding-block: var(--s-2); }
.prow + .prow { border-block-start: 1px solid var(--color-border); }
.prow b { display: block; }
.acc { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--s-3); }
.acc .dl-wide { flex: 1 1 24rem; }
/* Backup key: one field with Generate beside it; a generated key reads as the key it is */
.kgen { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); max-inline-size: 40rem; }
.kgen input { flex: 1 1 16rem; min-inline-size: 0; max-inline-size: none !important; }
/* A key shown masked: Copy right beside it, Show reveals it in place, Download saves it */
.kshow { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-1) var(--s-2); }
.kshow code { font: 500 var(--t-body) var(--font-mono); padding: 4px 8px; border-radius: var(--r-sm); background: var(--color-surface); border: 1px solid var(--color-border); overflow-wrap: anywhere; word-break: break-all; }
.kshow .key-full { display: none; }
.keybox:has(.reveal-k:checked) .key-m, .kdraft-prev:has(.reveal-k:checked) .key-m { display: none; }
.keybox:has(.reveal-k:checked) .key-full, .kdraft-prev:has(.reveal-k:checked) .key-full { display: inline; }
.kcopy { inline-size: 32px; block-size: 32px; border: 1px solid var(--color-border-strong); background: var(--color-surface); }
.kcopy .ic { inline-size: 16px; block-size: 16px; }
.kcopied { font-size: var(--t-ui); }
.kacts { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-1) var(--s-4); }
.kdl { display: inline-flex; align-items: center; gap: var(--s-2); min-block-size: 32px; font-size: var(--t-ui); font-weight: 550; }
.kdraft-prev { display: grid; gap: var(--s-2); padding: var(--s-3); border-radius: var(--r-md); background: var(--warning-bg); border: 1px solid color-mix(in oklab, var(--warning) 45%, transparent); }
/* A button busy with its work: the two labels share one box, so the button keeps its size */
.btn-busy { display: inline-grid; } .btn-busy > span { grid-area: 1 / 1; text-align: center; }
.btn-busy .lb-b { visibility: hidden; display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.btn-busy .spin { flex: none; inline-size: 10px; block-size: 10px; border-radius: 50%; border: 2px solid currentColor; border-inline-end-color: transparent; animation: spin 0.8s linear infinite; }
.btn-busy[aria-busy="true"] .lb { visibility: hidden; } .btn-busy[aria-busy="true"] .lb-b { visibility: visible; }
.btn[disabled] { opacity: 0.75; cursor: progress; }
.kgen-note { display: flex; align-items: start; gap: var(--s-2); font-size: var(--t-ui); font-weight: 550; }
.kgen-note .ic { margin-block-start: 2px; color: var(--ok); }

/* Safari zooms a page when a focused control's text is below 16 px; small and touch screens get 16 px controls */
@media (max-width: 760px), (pointer: coarse) {
	input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), select, textarea { font-size: 16px; }
}

/* ?debug=layout, where the deployment allows it: container outlines, the content column, the 8 px grid and text baselines */
body.debug-layout main { background-image: repeating-linear-gradient(to right, color-mix(in oklab, #e0218a 10%, transparent) 0 1px, transparent 1px 8px), repeating-linear-gradient(to bottom, color-mix(in oklab, #e0218a 10%, transparent) 0 1px, transparent 1px 8px); box-shadow: inset 0 0 0 2px #e0218a; }
body.debug-layout :is(.hd, main > *, .su, .sm, .scard, .step, .st-card, .home > section, .hp-h, .tb, .fbar, .lst, .itm, .rd, .set2, .vstrip, .act) { outline: 1px dashed color-mix(in oklab, #2563eb 70%, transparent); outline-offset: -1px; }
body.debug-layout :is(p, li, h1, h2, h3, dd, dt, label) { background-image: linear-gradient(to top, color-mix(in oklab, #16a34a 55%, transparent) 1px, transparent 1px); background-size: 100% 1lh; }

/* a credential field that is not a password: masked by the stylesheet, with a Show toggle beside it */
.fld:has(.masked) { grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--s-2); }
.fld:has(.masked) > :not(.masked, .rv) { grid-column: 1 / -1; }
.masked { -webkit-text-security: disc; }
.fld:has(.reveal:checked) .masked { -webkit-text-security: none; }
.rv { display: inline-flex; align-items: center; gap: var(--s-2); min-block-size: 36px; font-size: var(--t-ui); font-weight: 550; color: var(--color-text-2); cursor: pointer; }
.rv input { inline-size: 16px; block-size: 16px; margin: 0; accent-color: var(--color-accent-fill); }
/* the account's role and what it may do: information, not links */
.perms { display: grid; gap: var(--s-2); }
.perms h3 { font-size: var(--t-ui); color: var(--color-text-2); }
.perms ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); gap: 4px var(--s-4); }
.perm { font-size: var(--t-ui); }
.who { margin: 0; font-size: var(--t-ui); color: var(--color-text-2); } .who b { color: var(--color-text); font-weight: 600; }

/* footer: one quiet line under every page, two at most on phones */
.ft { display: flex; flex-wrap: wrap; align-items: center; gap: 2px var(--s-4); max-inline-size: calc(112rem + 2 * var(--pad)); margin-inline: auto; padding: var(--s-2) max(var(--pad), env(safe-area-inset-right)) calc(var(--s-2) + env(safe-area-inset-bottom)) max(var(--pad), env(safe-area-inset-left)); border-block-start: 1px solid var(--color-border); color: var(--color-text-2); font-size: var(--t-cap); }
body.w-guide .ft { max-inline-size: calc(52rem + 2 * var(--pad)); } body.w-form .ft { max-inline-size: calc(60rem + 2 * var(--pad)); }
.ft-p { font-weight: 600; } .ft-v { font: 500 var(--t-cap) var(--font-mono); }
.ft nav { margin-inline-start: auto; }
.ft ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 2px var(--s-3); }
.ft a { display: inline-flex; align-items: center; min-block-size: 24px; color: var(--color-text-2); }
@media (hover: hover) and (pointer: fine) { .ft a:hover { color: var(--color-link); } }
@media (max-width: 640px) { .ft nav { margin-inline-start: 0; } }
body.iv-wide .ft { display: none; }
.kstr { display: grid; gap: var(--s-1); margin-top: var(--s-2); font-size: var(--t-ui); }
.kstr ul { margin: var(--s-1) 0 0; padding-left: 1.2em; }
.kstr-refused > p:first-child b { color: var(--error); }
.kstr-fair > p:first-child b { color: var(--warning); }
.kstr-strong > p:first-child b, .kstr-uncrackable > p:first-child b { color: var(--ok); }

/* Settings, Notifications: kinds of email with what each sends, and the addresses they go to. */
.nks { display: grid; gap: var(--s-2); margin: 0; padding: 0; border: 0; min-inline-size: 0; }
.nks legend { padding: 0; margin-block-end: var(--s-1); font-weight: 650; }
.nk { display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: 2px var(--s-2); align-items: start; padding-block: 2px; }
.nk input { inline-size: 16px; block-size: 16px; margin: 3px 0 0; accent-color: var(--color-accent-fill); }
.nk > span { display: grid; gap: 2px; max-inline-size: 62ch; }
.nk .t2 { font-size: var(--t-ui); }
.scard h3 { font-size: var(--t-ui); font-weight: 650; margin: 0; }
.rcps { list-style: none; margin: 0; padding: 0; }
.rcp { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 2px var(--s-3); padding-block: var(--s-2); }
.rcp + .rcp { border-block-start: 1px solid var(--color-border); }
.rcp-a { display: grid; min-inline-size: 0; }
.rcp-a b { overflow-wrap: anywhere; font-weight: 550; }
.rcp-a small { font-size: var(--t-cap); }
.rcp-x { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 0 var(--s-2); }
.rcp-x form { display: contents; }
.rcp-x .link-btn { padding-inline: 0; }
.link-danger { color: var(--error); }
@media (max-width: 639.98px) { .rcp-x:empty { display: none; } }
@media (min-width: 640px) {
	/* One grid for the list, so every row's status and actions line up. */
	.rcps { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; column-gap: var(--s-3); }
	.rcp { grid-column: 1 / -1; grid-template-columns: subgrid; }
	.rcp-x { grid-column: auto; justify-content: end; }
}

/* The line beside a form's buttons: progress while it runs, then the server's answer. One line, so nothing moves. */
.say { display: inline-flex; align-items: center; gap: var(--s-2); flex: 1 1 12rem; min-inline-size: 0; min-block-size: 1.4em; font-size: var(--t-ui); color: var(--color-text-2); }
.say > span { min-inline-size: 0; overflow-wrap: anywhere; }
.say .ic { inline-size: 14px; block-size: 14px; flex: none; }
.say-ok { color: var(--ok); } .say-err { color: var(--error); font-weight: 550; }
.say-busy::before { content: ""; inline-size: 12px; block-size: 12px; flex: none; border-radius: 50%; border: 2px solid currentColor; border-inline-end-color: transparent; animation: spin 0.8s linear infinite; }
/* A busy button keeps its box and never draws over its label. One with a busy label shows that label with its spinner
   beside it (.btn-busy above); any other shows a spinner in place of its label, which stays in the box to hold its
   width and name the button. */
.btn.is-busy { cursor: progress; }
.btn.is-busy:not(.btn-busy) { position: relative; -webkit-text-fill-color: transparent; }
.btn.is-busy:not(.btn-busy) > * { visibility: hidden; }
.btn.is-busy:not(.btn-busy)::after { content: ""; position: absolute; inset: 0; margin: auto; inline-size: 10px; block-size: 10px; border-radius: 50%; border: 2px solid currentColor; border-inline-end-color: transparent; animation: spin 0.8s linear infinite; }
@media (prefers-reduced-motion: reduce) { .say-busy::before, .btn.is-busy::after, .btn-busy .spin, .ask.is-busy::after { animation-duration: 2.4s; } }
/* A field's hint and its problem share one line. */
.hint.ferr { color: var(--error); font-weight: 550; display: flex; gap: var(--s-2); align-items: start; }
.hint.ferr .ic { inline-size: 14px; block-size: 14px; flex: none; margin-block-start: 2px; }
/* A checked field's line holds two lines from the start, one of them tall enough for a link's 24 px target, so a
   problem written in place of a hint with a link moves nothing below. */
.fld:has([data-check]) > .hint { min-block-size: calc(1.45em + 24px); }
.sg .mini a .ti { white-space: normal; }

/* sign-in and password reset: the product's tokens, one primary action, the password as the secondary way in */
.signin { min-block-size: 100dvh; display: grid; place-items: start center; padding: clamp(var(--s-5), 12vh, 7rem) var(--pad) var(--s-6); background: var(--color-bg); color: var(--color-text); font: 400 var(--t-body)/1.45 var(--font-sans); }
.signin[data-theme="dark"] { color-scheme: dark; } .signin[data-theme="light"] { color-scheme: light; }
.signin-in { inline-size: min(100%, 24rem); display: grid; gap: var(--s-4); }
.signin-brand { display: flex; align-items: center; gap: var(--s-2); margin: 0; font-weight: 650; font-size: var(--t-lg); }
.signin-logo { display: inline-flex; } .signin-logo svg { inline-size: 40px; block-size: 40px; }
.signin h1 { font-size: var(--t-h1); margin: 0; }
.signin p { margin: 0; }
.signin-main { inline-size: 100%; min-block-size: 44px; font-size: var(--t-body); }
.signin-pw summary { cursor: pointer; color: var(--color-link); font-weight: 550; min-block-size: 32px; display: flex; align-items: center; }
.signin-pw[open] summary { margin-block-end: var(--s-3); }
.signin-form { display: grid; gap: var(--s-3); }
.signin-form .fld input:not([type="checkbox"]):not([type="radio"]) { max-inline-size: none; font-size: 16px; }
.signin-form .btn { justify-self: start; min-block-size: 40px; padding-inline: var(--s-4); }
.pw { position: relative; }
.pw input { padding-inline-end: 2.5rem !important; }
.pw-eye { position: absolute; inset-block: 0; inset-inline-end: 4px; display: grid; place-items: center; inline-size: 36px; border: 0; background: none; color: var(--color-text-2); cursor: pointer; }
.pw-eye svg { inline-size: 18px; block-size: 18px; }
.signin-links { display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-4); font-size: var(--t-ui); }
.signin-links a, .signin p a { color: var(--color-link); }
.plist li > a { display: grid; grid-template-columns: minmax(0, 1fr) auto; min-block-size: 34px; }