/* 16 Oct 2026: the install-app buttons stay hidden until the browser offers an install */
[data-pwa-install][hidden]{display:none !important}
/* 14 Oct 2026: the side menu in capitals (Shekhar) */
.rail .nav-link,.rail .nav-sep{text-transform:uppercase;letter-spacing:.04em;font-size:.8rem}

html { scroll-behavior: smooth; -webkit-tap-highlight-color: transparent; }
.btn, .nav-link, .tab-link, .lens a, .tcheck { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }

/* an icon beside a word always keeps a gap */
.card-title { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.card-title > .icon { flex-shrink: 0; width: 1.125rem; height: 1.125rem; color: var(--x-gold); }
.label > .icon, legend > .icon, .modal-title > .icon, .tlist-head h2 > .icon, summary > .icon { display: inline-block; margin-right: 0.375rem; vertical-align: -0.15em; }
.badge > .icon, .alert-title > .icon { margin-right: 0.25rem; }
a.eyebrow:hover { text-decoration: none; filter: brightness(1.15); }

/* THE SIDE RAIL SCROLLS ON ITS OWN. It is a full-height sticky column, so on a
   short screen (or with every admin link showing) the lower items used to sit
   below the fold with no way to reach them. The rail now scrolls under the
   cursor, keeps its scroll to itself so the page behind does not move with it,
   and draws a thin gold thumb instead of the platform's grey bar. */
.rail { overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--x-gold) 40%, transparent) transparent; }
.rail::-webkit-scrollbar { width: 6px; }
.rail::-webkit-scrollbar-track { background: transparent; }
.rail::-webkit-scrollbar-thumb { border-radius: 999px; background: color-mix(in srgb, var(--x-gold) 30%, transparent); }
.rail:hover::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--x-gold) 55%, transparent); }
.rail > .me-card { position: sticky; bottom: 0; background: var(--x-rail); }

/* THE RIGHT-HAND SIDE OF A ROW IS A GRID, NOT A FLOW (2026-10-06). Laid out
   in a row, the stage picker started wherever the due chip and the avatar
   happened to end, so no two rows lined up down the list. Three fixed columns
   fix every row to the same vertical lines, and a row without a picker or
   without an avatar leaves that column empty instead of shuffling the rest. */
.tside { display: grid; grid-template-columns: 4.5rem 7.5rem 6.25rem 1.5rem 1.75rem; align-items: center; gap: 0.5rem; }
.tside > .tdel { opacity: .45; } .trow:hover .tside > .tdel, .tside > .tdel:focus-visible { opacity: 1; color: var(--danger, #dc2626); }
.trow.htmx-swapping { opacity: 0; transition: opacity 150ms ease-out; }
/* the pin on a row (2026-10-13): quiet until it is pinned */
.tpin { border: 0; background: none; padding: 0; font: inherit; color: var(--muted); cursor: pointer; opacity: .55; }
.trow:hover .tpin, .tpin:focus-visible { opacity: 1; }
.tpin.is-pinned { opacity: 1; color: var(--x-gold); font-weight: 600; }
.tside > .tpin, .tside > .tpin-gap { width: 100%; justify-self: end; text-align: right; white-space: nowrap; font-size: 0.8125rem; overflow: hidden; text-overflow: ellipsis; }
.trow.is-pinned { box-shadow: inset 3px 0 0 var(--x-gold); }
.tside > .due { width: 100%; justify-content: center; }
.tside > .av { justify-self: center; }

/* THE STAGE PICKER ON A ROW. New to In progress is the move people make all
   day, and it used to need the task sheet. The select carries the stage it is
   on, so the row reads at a glance even before it is opened. Postponed is
   drawn calm and dashed: the work is parked on purpose, it is not an alarm. */
.tstage {
  appearance: none; -webkit-appearance: none;
  width: 100%; height: 1.75rem; padding: 0 1.4rem 0 0.625rem;
  border: 1px solid var(--border-strong); border-radius: 7px;
  background-color: var(--surface); color: var(--muted);
  font-family: inherit; font-size: 0.75rem; font-weight: 600; line-height: 1;
  text-overflow: ellipsis; cursor: pointer;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>");
  background-repeat: no-repeat; background-position: right 0.4rem center; background-size: 0.8125rem;
  transition: border-color 160ms var(--ease-lux), color 160ms var(--ease-lux), background-color 160ms var(--ease-lux);
}
/* The list the browser opens is the browser's own, so it is told which mode to
   draw it in; without this it paints a light popup under dark text. */
html[data-theme="dark"] .tstage { color-scheme: dark; }
html[data-theme="light"] .tstage { color-scheme: light; }
.tstage:hover { border-color: color-mix(in srgb, var(--x-gold) 60%, var(--border-strong)); color: var(--ink); }
.tstage:focus-visible { outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--x-gold) 25%, transparent); }
.tstage.htmx-request { opacity: 0.5; pointer-events: none; }
.tstage[data-stage="In progress"] { color: var(--accent-text); background-color: var(--accent-soft); border-color: color-mix(in srgb, var(--accent) 40%, var(--border)); }
.tstage[data-stage="Waiting approval"] { color: var(--warning-strong); background-color: var(--warning-soft); border-color: color-mix(in srgb, var(--warning) 45%, var(--border)); }
.tstage[data-stage="Postponed"] { color: var(--muted); background-color: var(--surface-2); border-style: dashed; border-color: var(--border-strong); }
@media (max-width: 860px) {
  .tside { grid-template-columns: 1.9rem 5.5rem 4.75rem 1.5rem 1.5rem; gap: 0.375rem; }
  .tpin-t { display: none; }
  .tside > .tdel { opacity: .7; }
  .tstage { font-size: 0.6875rem; padding: 0 1.2rem 0 0.4375rem; background-position: right 0.3rem center; }
}

/* a press you can feel */
.btn:active { transform: translateY(0) scale(0.965); transition-duration: 80ms; }
.nav-link:active, .tab-link:active, .lens a:active { transform: scale(0.97); transition-duration: 80ms; }
.tcheck:active { transform: scale(0.82); }
.btn .icon { transition: transform 250ms var(--ease-lux); }
.btn:hover .icon { transform: scale(1.08); }
.av { transition: transform 300ms var(--ease-lux); }
.av:hover { transform: scale(1.06); }
.av > .icon { width: 1rem; height: 1rem; }

/* rows settle in one after another. (2026-10-21, v154) Quicker: the last row is readable after 0.46 s, not 0.7 s,
   since a list is opened many times a day. */
.tlist .trow:not(.just-done) { animation: row-in 320ms var(--ease-lux) both; }
.tlist .trow:nth-child(2) { animation-delay: 20ms; }
.tlist .trow:nth-child(3) { animation-delay: 40ms; }
.tlist .trow:nth-child(4) { animation-delay: 60ms; }
.tlist .trow:nth-child(5) { animation-delay: 80ms; }
.tlist .trow:nth-child(6) { animation-delay: 100ms; }
.tlist .trow:nth-child(7) { animation-delay: 120ms; }
.tlist .trow:nth-child(n+8) { animation-delay: 140ms; }
@keyframes row-in { from { opacity: 0; transform: translateY(10px); } }

/* numbers arrive, they do not just appear */
.stat-value, .kpi-value, .score-num { animation: pop-in 420ms var(--ease-lux) 40ms both; }
@keyframes pop-in { from { opacity: 0; transform: translateY(8px) scale(0.96); } }

/* the sheet's backdrop fades in with it */
.sheet::backdrop { animation: veil-in 320ms var(--ease-lux) both; }
@keyframes veil-in { from { opacity: 0; } }

/* a gold halo on the field you are typing in */
.input:focus-visible, .quick:focus-within { box-shadow: 0 0 0 4px color-mix(in srgb, var(--x-gold) 22%, transparent); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .tlist .trow, .stat-value, .kpi-value, .score-num, .sheet::backdrop { animation: none !important; }
  .btn:active, .nav-link:active, .tab-link:active, .lens a:active, .tcheck:active, .btn:hover .icon, .av:hover { transform: none; }
}
html.reduced-motion .tlist .trow, html.reduced-motion .stat-value, html.reduced-motion .kpi-value, html.reduced-motion .score-num { animation: none; }

/* (2026-10-21, v154) A SAVE ON THE SAME PAGE DOES NOT REPLAY THE ENTRANCE. After a pin, a stage change or any save the
   page comes back with html.just-saved (public/app.js); the page parts already stood still, but every task row and
   number still rose in again, so the list flickered for most of a second after each change. */
html.just-saved .tlist .trow, html.just-saved .stat-value, html.just-saved .kpi-value, html.just-saved .score-num { animation: none; }

/* (2026-10-21, v154) A PRESS ON EVERYTHING THAT CAN BE PRESSED. Task titles, the pin, the filter chips and the
   profile card gave no sign of the press until the answer came back. */
.ttitle:active { opacity: .62; transition: opacity 60ms; }
.tpin:active { transform: scale(0.9); transition-duration: 80ms; }
a.badge:active { transform: scale(0.95); transition-duration: 80ms; }
.me-card:active { transform: scale(0.985); transition-duration: 80ms; }
@media (prefers-reduced-motion: reduce) { .tpin:active, a.badge:active, .me-card:active { transform: none; } }
html.reduced-motion .tpin:active, html.reduced-motion a.badge:active, html.reduced-motion .me-card:active { transform: none; }

/* (2026-10-21, v154) THE SHEET OPENS ON THE CLICK. While the task (or a new task form) is on its way, the sheet
   already stands open with its outline (public/app.js openSheetLoading). */
.sheet-skel { display: grid; gap: 0.75rem; padding: 1.5rem; min-height: 16rem; align-content: start; }
.sheet-skel .sk { display: block; height: 0.875rem; width: 100%; border-radius: 6px; background: color-mix(in srgb, var(--ink) 9%, transparent); animation: sk-pulse 1.1s ease-in-out infinite; }
.sheet-skel .sk-title { height: 1.5rem; width: 62%; margin-bottom: 0.5rem; }
.sheet-skel .sk-short { width: 42%; }
.sheet-skel .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
@keyframes sk-pulse { 50% { opacity: 0.45; } }
@media (prefers-reduced-motion: reduce) { .sheet-skel .sk { animation: none; } }
html.reduced-motion .sheet-skel .sk { animation: none; }

/* ===================== UI CRAFT (2026-10-21, v155). Presentation only: no markup, no route, no data change. ===================== */

/* LIGHT MODE CONTRAST. The brand gold (about 3:1 on a light ground) is darkened only where it is used as text. */
html[data-theme="light"] .eyebrow, html[data-theme="light"] .tab-link[aria-current], html[data-theme="light"] .tab-link.is-active,
html[data-theme="light"] .flow-count-n, html[data-theme="light"] .tpin.is-pinned { color: color-mix(in srgb, var(--x-gold) 62%, #000000); }

/* SURFACES AND NUMBERS. Hairline borders, a faint top light on raised cards, figures that line up in columns. */
.kpi-value, .stat-value, .score-num, .due, .tmeta, .n, table td, table th, .flow-count-n, .ui-count { font-variant-numeric: tabular-nums; }
.card, .kpi { border-color: color-mix(in srgb, var(--ink) 9%, transparent); }
.card { box-shadow: inset 0 1px 0 color-mix(in srgb, var(--ink) 5%, transparent), var(--x-shadow, 0 0 #0000); }
main h1 { letter-spacing: -0.02em; }
main .card > .card-title { padding-bottom: 0.75rem; margin-bottom: 0.25rem; border-bottom: 1px solid color-mix(in srgb, var(--ink) 8%, transparent); }
.kpi-value { letter-spacing: -0.02em; }
:is(.table-wrap, .overflow-x-auto) > table > tbody > tr { transition: background-color 120ms; }
:is(.table-wrap, .overflow-x-auto) > table > tbody > tr:hover { background: color-mix(in srgb, var(--ink) 4%, transparent); }
:is(.table-wrap, .overflow-x-auto) > table th { font-size: 0.75rem; letter-spacing: 0.04em; color: var(--muted); }

/* TASK ROWS. The stage is shown as a small dot before the title, so the row reads without its controls. On a screen
   with a mouse, Pin, Stage and Delete wait out of sight and come up as one floating pill when the row is pointed at
   or a control in it has focus. A pinned pin stays visible. Phones keep every control as before. */
.trow:has(.tstage[data-stage="In progress"]) .ttitle::before,
.trow:has(.tstage[data-stage="Waiting approval"]) .ttitle::before,
.trow:has(.tstage[data-stage="Postponed"]) .ttitle::before { content: ""; display: inline-block; width: 0.5rem; height: 0.5rem; margin-right: 0.5rem; border-radius: 999px; vertical-align: 0.08em; }
.trow:has(.tstage[data-stage="In progress"]) .ttitle::before { background: var(--accent-text); }
.trow:has(.tstage[data-stage="Waiting approval"]) .ttitle::before { background: var(--warning); }
.trow:has(.tstage[data-stage="Postponed"]) .ttitle::before { background: transparent; box-shadow: inset 0 0 0 1.5px var(--muted); }
@media (hover: hover) and (min-width: 861px) {
  .trow .tside { border-radius: 999px; padding: 2px 6px; margin-right: -6px; transition: background-color 140ms, box-shadow 160ms; }
  .trow .tside > .tstage, .trow .tside > .tdel, .trow .tside > .tpin:not(.is-pinned) { opacity: 0; transform: translateX(4px); transition: opacity 140ms ease, transform 180ms var(--ease-lux); }
  .trow:hover .tside > .tstage, .trow:hover .tside > .tdel, .trow:hover .tside > .tpin,
  .trow:focus-within .tside > .tstage, .trow:focus-within .tside > .tdel, .trow:focus-within .tside > .tpin { opacity: 1; transform: none; }
  .trow:hover .tside, .trow:focus-within .tside { background: var(--surface-2); box-shadow: 0 0 0 1px var(--border), 0 8px 18px -12px rgba(0, 0, 0, 0.45); }
}

/* SIDE MENU GROUPS. Each group heading folds its links away; the group holding the open page always stays open. */
.rail .nav-sep[data-ui-group] { display: flex; align-items: center; justify-content: space-between; cursor: pointer; user-select: none; border-radius: 6px; }
.rail .nav-sep[data-ui-group]::after { content: ""; width: 0.4rem; height: 0.4rem; margin-right: 0.45rem; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); opacity: 0.65; transition: transform 180ms var(--ease-lux); }
.rail .nav-sep[data-ui-group][aria-expanded="false"]::after { transform: rotate(-45deg); }
.rail .nav-sep[data-ui-group]:hover { color: var(--ink); }
.rail .nav-sep[data-ui-group]:focus-visible { outline: 2px solid var(--x-gold); outline-offset: 2px; }
.rail .nav-link[data-ui-hidden] { display: none; }

/* PAGE CHANGE LINE. Shown only when the page takes longer than 120 ms, with a moving shine. */
html.is-loading #veil { opacity: 1; transform: scaleX(0.7); transition: transform 1.8s var(--ease-lux) 120ms, opacity 100ms linear 120ms; }
#veil { overflow: hidden; }
#veil::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.65), transparent); transform: translateX(-100%); animation: veil-shine 900ms linear infinite; }
@keyframes veil-shine { to { transform: translateX(100%); } }

/* LONG TABLES PAGE ON THE SCREEN. A table over 20 rows (Audit log, Website visitors and the like) shows 20 at a
   time with a filter box and Back / Next; rows past 20 stay out of the first layout so the page does not stall.
   Tables with fields or tick boxes in their rows are left whole, so nothing hidden is ever ticked by accident. */
:is(.table-wrap, .overflow-x-auto) > table:not([data-ui-paged]):not(:has(tbody :is(input, select, textarea))) > tbody > tr:not([data-row]):nth-child(n+21) { display: none; }
.ui-pagebar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 0.75rem; margin: 0.75rem 0; }
.ui-pagebar .ui-filter { flex: 1 1 14rem; max-width: 20rem; }
.ui-pagebar .ui-count { font-size: 0.8125rem; color: var(--muted); }
.ui-pagebar nav { display: flex; gap: 0.375rem; }

/* ACCESS PAGE. The permission tick boxes become switches; the input itself, its name and value are unchanged. */
input[type="checkbox"][name="acl"] { -webkit-appearance: none; appearance: none; position: relative; width: 2.1rem; height: 1.2rem; margin: 0; border-radius: 999px; background: var(--border-strong); vertical-align: middle; cursor: pointer; transition: background-color 160ms; }
input[type="checkbox"][name="acl"]::before { content: ""; position: absolute; top: 2px; left: 2px; width: calc(1.2rem - 4px); height: calc(1.2rem - 4px); border-radius: 999px; background: var(--surface); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35); transition: transform 180ms var(--ease-lux); }
input[type="checkbox"][name="acl"]:checked { background: var(--success); }
input[type="checkbox"][name="acl"]:checked::before { transform: translateX(0.9rem); }
input[type="checkbox"][name="acl"]:focus-visible { outline: 2px solid var(--x-gold); outline-offset: 2px; }
input[type="checkbox"][name="acl"]:disabled { opacity: 0.45; cursor: not-allowed; }

@media (prefers-reduced-motion: reduce) {
  #veil::after { animation: none; }
  .trow .tside > .tstage, .trow .tside > .tdel, .trow .tside > .tpin, input[type="checkbox"][name="acl"]::before, .rail .nav-sep[data-ui-group]::after { transition: none; }
}
html.reduced-motion #veil::after { animation: none; }

/* ===================== UI CRAFT 2 (2026-10-21, v156). Presentation only. ===================== */

/* PAGE HEADS, LENSES AND FILTER CHIPS: tighter, quieter, one clear "on" state. */
.page-title { letter-spacing: -0.025em; }
.page-sub { color: var(--muted); }
.dash-head { align-items: flex-end; gap: 1rem; }
a.badge[aria-pressed] { border-radius: 999px; padding-inline: 0.7rem; transition: background-color 140ms, color 140ms, border-color 140ms; }
a.badge[aria-pressed="true"] { background: var(--ink); color: var(--canvas); border-color: var(--ink); }

/* BOARD COLUMNS: calm columns, cards that lift when pointed at, long columns scroll inside themselves. */
main .grid > section.rounded-2xl[aria-label] { background: color-mix(in srgb, var(--ink) 3%, transparent); border-color: color-mix(in srgb, var(--ink) 8%, transparent); }
main .grid > section.rounded-2xl[aria-label] > h2 { padding: 0.125rem 0.25rem; letter-spacing: 0.01em; }
main .grid > section.rounded-2xl[aria-label] li.rounded-xl { border-color: color-mix(in srgb, var(--ink) 9%, transparent); transition: border-color 140ms, transform 180ms var(--ease-lux), box-shadow 180ms; }
main .grid > section.rounded-2xl[aria-label] li.rounded-xl:hover { border-color: color-mix(in srgb, var(--ink) 22%, transparent); transform: translateY(-1px); box-shadow: 0 10px 22px -16px rgba(0, 0, 0, 0.55); }
@media (min-width: 1024px) {
  main .grid > section.rounded-2xl[aria-label] > ul { max-height: 68vh; overflow-y: auto; padding-right: 2px; scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--ink) 18%, transparent) transparent; }
}

/* COMMAND MENU (Ctrl+K / Cmd+K) and its button in the top bars. */
dialog.ui-cmdk { padding: 0; border: 0; background: transparent; margin: 12vh auto auto; width: min(640px, calc(100vw - 2rem)); overflow: visible; }
dialog.ui-cmdk::backdrop { background: rgba(0, 0, 0, 0.45); backdrop-filter: blur(2px); }
.ui-cmdk-box { border-radius: 16px; border: 1px solid color-mix(in srgb, var(--ink) 12%, transparent); background: var(--surface); color: var(--ink); box-shadow: 0 24px 60px -20px rgba(0, 0, 0, 0.6); overflow: hidden; animation: cmdk-in 160ms var(--ease-lux) both; }
@keyframes cmdk-in { from { opacity: 0; transform: translateY(-6px) scale(0.985); } }
.ui-cmdk-input { width: 100%; border: 0; outline: 0; background: transparent; color: var(--ink); font: inherit; font-size: 1rem; padding: 1rem 1.125rem; border-bottom: 1px solid color-mix(in srgb, var(--ink) 9%, transparent); }
.ui-cmdk-list { list-style: none; margin: 0; padding: 0.375rem; max-height: min(52vh, 420px); overflow-y: auto; }
.ui-cmdk-item { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.55rem 0.75rem; border-radius: 10px; cursor: pointer; font-size: 0.9rem; }
.ui-cmdk-item small { color: var(--muted); font-size: 0.75rem; white-space: nowrap; }
.ui-cmdk-item.is-active { background: color-mix(in srgb, var(--ink) 9%, transparent); }
.ui-cmdk-empty { padding: 1rem; color: var(--muted); font-size: 0.875rem; }
.ui-cmdk-foot { display: flex; gap: 1rem; padding: 0.55rem 1rem; border-top: 1px solid color-mix(in srgb, var(--ink) 9%, transparent); font-size: 0.75rem; color: var(--muted); }
.ui-cmdk-foot kbd, .ui-cmdk-pill kbd { font: inherit; font-size: 0.7rem; line-height: 1.2; padding: 0.05rem 0.35rem; border-radius: 5px; border: 1px solid color-mix(in srgb, var(--ink) 15%, transparent); background: color-mix(in srgb, var(--ink) 5%, transparent); }
.ui-cmdk-pill { display: inline-flex; align-items: center; gap: 0.3rem; height: 2rem; padding: 0 0.6rem; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--ink) 12%, transparent); background: transparent; color: var(--muted); font: inherit; font-size: 0.8rem; cursor: pointer; transition: color 140ms, border-color 140ms; }
.ui-cmdk-pill:hover { color: var(--ink); border-color: color-mix(in srgb, var(--ink) 25%, transparent); }
.ui-cmdk-pill:focus-visible { outline: 2px solid var(--x-gold); outline-offset: 2px; }
.ui-cmdk-pill .icon { width: 0.9rem; height: 0.9rem; }

/* PHONES: Pin, Stage and Delete sit behind one "..." button on each task row; a tap opens them as a pill. */
.ui-more { display: none; }
@media (max-width: 767px) {
  .trow { position: relative; }
  .trow .tside { display: flex; align-items: center; justify-content: flex-end; gap: 0.375rem; }
  .trow .tside > .tpin:not(.is-pinned), .trow .tside > .tstage, .trow .tside > .tdel { display: none; }
  .ui-more { display: inline-grid; place-items: center; width: 2rem; height: 2rem; border: 0; border-radius: 999px; background: transparent; color: var(--muted); font-size: 1.15rem; line-height: 1; cursor: pointer; }
  .ui-more:active, .trow.ui-open .ui-more { background: color-mix(in srgb, var(--ink) 10%, transparent); color: var(--ink); }
  .trow.ui-open .tside { position: absolute; right: 0.5rem; top: 50%; transform: translateY(-50%); z-index: 5; padding: 0.25rem 0.375rem; border-radius: 999px; background: var(--surface-2); box-shadow: 0 0 0 1px var(--border), 0 10px 24px -12px rgba(0, 0, 0, 0.55); }
  .trow.ui-open .tside > .tpin, .trow.ui-open .tside > .tdel { display: inline-flex; }
  .trow.ui-open .tside > .tstage { display: block; width: 6.5rem; }
}

/* SECTION JUMP BAR (Rules and settings, Platform: all companies). */
.ui-jump { position: sticky; top: 0.5rem; z-index: 6; display: flex; gap: 0.25rem; width: max-content; max-width: 100%; overflow-x: auto; margin-top: 1.25rem; padding: 0.3rem; border: 1px solid color-mix(in srgb, var(--ink) 9%, transparent); border-radius: 999px; background: color-mix(in srgb, var(--surface) 85%, transparent); backdrop-filter: blur(10px); scrollbar-width: none; }
.ui-jump::-webkit-scrollbar { display: none; }
.ui-jump button { flex: none; border: 0; background: none; color: var(--muted); font: inherit; font-size: 0.8125rem; font-weight: 600; padding: 0.35rem 0.8rem; border-radius: 999px; cursor: pointer; white-space: nowrap; transition: color 140ms, background-color 140ms; }
.ui-jump button:hover { color: var(--ink); background: color-mix(in srgb, var(--ink) 6%, transparent); }
.ui-jump button.is-on { color: var(--ink); background: color-mix(in srgb, var(--ink) 11%, transparent); }
.ui-jump button:focus-visible { outline: 2px solid var(--x-gold); outline-offset: 1px; }

/* SETTINGS LAYOUT (Rules and settings): title and help on the left, the card with its fields on the right. */
.ui-settings { display: flex; flex-direction: column; margin-top: 1.5rem; }
.ui-set { display: grid; gap: 0.875rem; padding: 2rem 0; scroll-margin-top: 4rem; }
.ui-set + .ui-set { border-top: 1px solid color-mix(in srgb, var(--ink) 8%, transparent); }
@media (min-width: 1024px) {
  .ui-set { grid-template-columns: minmax(0, 17rem) minmax(0, 1fr); gap: 2.5rem; align-items: start; }
  .ui-set-meta { position: sticky; top: 4.5rem; }
}
.ui-set-meta .card-title { border: 0; padding: 0; margin: 0 0 0.4rem; font-size: 1rem; }
.ui-set-meta > p { margin: 0; font-size: 0.875rem; line-height: 1.55; color: var(--muted); }
.ui-set-card { margin-top: 0 !important; }
.ui-set-card form { gap: 0.875rem; }
.ui-set-card .card-title.mt-6 { margin-top: 1.75rem; padding-top: 1.25rem; padding-bottom: 0; border-bottom: 0; border-top: 1px solid color-mix(in srgb, var(--ink) 8%, transparent); }

/* PLATFORM: ALL COMPANIES: a strip of what the directory holds. */
.ui-dir { scroll-margin-top: 4rem; }
main[data-ui-layout="platform"] > section { scroll-margin-top: 4rem; }
.ui-strip { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0.75rem 0 1rem; }
.ui-strip span { display: inline-flex; align-items: baseline; gap: 0.4rem; padding: 0.4rem 0.75rem; border-radius: 10px; border: 1px solid color-mix(in srgb, var(--ink) 9%, transparent); background: var(--surface); font-size: 0.8125rem; color: var(--muted); }
.ui-strip b { color: var(--ink); font-size: 1rem; font-variant-numeric: tabular-nums; }

@media (prefers-reduced-motion: reduce) {
  .ui-cmdk-box { animation: none; }
  main .grid > section.rounded-2xl[aria-label] li.rounded-xl:hover { transform: none; }
}
html.reduced-motion .ui-cmdk-box { animation: none; }
html.reduced-motion main .grid > section.rounded-2xl[aria-label] li.rounded-xl:hover { transform: none; }