/* Rekta Design 0.2.0 components. Load after rekta.tokens.css. */
/* Rekta Design components.

   Load order: rekta.tokens.css, rekta.fonts.css, rekta.css. Every value comes from a --rk- token.

   Contract
   - Rekta defines only .rk-* classes and --rk-* properties. data-status, data-theme, data-density and data-motion
     apply on .rk and inside it; the theme, density and motion switches go on the root element.
   - Hide with the hidden attribute: Rekta's display rules never override it.
   - Public hooks a page may set: --rk-i (build-in index of a tile, 0-10), --rk-sec-w (width of a panorama section),
     --rk-split-w (width of a split's list pane; rekta.js writes it while the handle is dragged).
     Public hooks rekta.js writes and a page may read: --rk-banner-h, --rk-pivot-h, --rk-pivot-scale.
     Everything named --_rk-* is internal.
   - State that rekta.js writes lives in data-rk-* attributes (data-rk-pressed, data-rk-phase, data-rk-turn,
     data-rk-arriving, data-rk-fit, data-rk-state), never in classes, so a framework that owns className keeps it.

   Window-size classes
   - sideways: the place is at least bp-sideways-scroll-min (760px) wide AND the viewport is taller than
     bp-short-height (480px). Panoramas move sideways, sections scroll inside themselves.
   - compact: everything else (a phone, a landscape phone, a short or narrow window, high zoom). Everything stacks and
     the page scrolls. Places are size containers (.rk-place), so a pane decides by its own width, not the window's. */

/* Root ---------------------------------------------------------------------------------------------------------- */
.rk {
  background: var(--rk-bg); color: var(--rk-text-primary); accent-color: var(--rk-accent);
  font-family: var(--rk-font-sans); font-size: var(--rk-font-size-s); line-height: var(--rk-line-height-body);
  -webkit-text-size-adjust: 100%;
}
.rk *, .rk *::before, .rk *::after { box-sizing: border-box; }
.rk[hidden], .rk [hidden]:not([hidden="until-found"]) { display: none !important; }
.rk :where(h1, h2, h3, p, ul, ol) { margin: 0; }
.rk :where(a) { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 3px; transition: text-decoration-thickness var(--rk-duration-short) var(--rk-ease-base); }
.rk :focus-visible { outline: 2px solid var(--rk-focus); outline-offset: 2px; }
/* Keyboard focus never lands under the banner, a sticky strip or the app bar. */
:root { scroll-padding-block: calc(var(--rk-banner-h, 0px) + var(--rk-pivot-h, 0px)) calc(var(--rk-appbar-height) + env(safe-area-inset-bottom)); }

/* A place is one screen of the app: one <main>, labelled by its .rk-title, and a size container. */
.rk-place { container: rk / inline-size; }

/* Text roles ----------------------------------------------------------------------------------------------------- */
.rk-kicker { font-size: var(--rk-font-size-xs); font-weight: var(--rk-font-weight-semibold); color: var(--rk-text-contrast-high); letter-spacing: 0.02em; }
.rk-title { font-size: var(--rk-font-size-title); font-weight: var(--rk-font-weight-semibold); line-height: var(--rk-line-height-title); }
.rk-facts { font-size: var(--rk-font-size-xs); color: var(--rk-text-contrast-high); }
.rk-group { font-size: var(--rk-font-size-group); font-weight: var(--rk-font-weight-regular); line-height: var(--rk-line-height-tight); }
.rk-meta { font-size: var(--rk-font-size-xxs); color: var(--rk-text-contrast-high); font-variant-numeric: tabular-nums; }

/* Status: one rule per status; tiles, tags, sparklines, fields and the banner read these. An element without its own
   data-status does not inherit one: a neutral tag inside an info row stays neutral. */
[data-status='info'] { --_rk-fill: var(--rk-status-info-tile); --_rk-mark: var(--rk-status-info-full); --_rk-soft: var(--rk-status-info-soft); }
[data-status='success'] { --_rk-fill: var(--rk-status-success-tile); --_rk-mark: var(--rk-status-success-full); --_rk-soft: var(--rk-status-success-soft); }
[data-status='warning'] { --_rk-fill: var(--rk-status-warning-tile); --_rk-mark: var(--rk-status-warning-full); --_rk-soft: var(--rk-status-warning-soft); }
[data-status='error'] { --_rk-fill: var(--rk-status-error-tile); --_rk-mark: var(--rk-status-error-full); --_rk-soft: var(--rk-status-error-soft); }
:is(.rk-tag, .rk-tile, .rk-banner):not([data-status]) { --_rk-fill: initial; --_rk-mark: initial; --_rk-soft: initial; }

/* Hairline rows: content over chrome. */
.rk-rows { list-style: none; padding: 0; }
.rk-rows > li { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 0 var(--rk-space-m); padding: var(--rk-space-s) 0; border-top: 1px solid var(--rk-text-contrast-low); }
.rk-rows > li:last-child { border-bottom: 1px solid var(--rk-text-contrast-low); }
.rk-rows b { font-weight: var(--rk-font-weight-semibold); }

/* Tiles ---------------------------------------------------------------------------------------------------------- */
/* A full fill, 0-2px radius, no border, no shadow. Compact: at least two columns, as many tile-units as fit, each
   stretched to fill the row. Sideways: fixed tile-unit cells. */
.rk-tiles {
  display: grid; gap: var(--rk-space-s); grid-auto-flow: dense;
  grid-template-columns: repeat(auto-fill, minmax(min(var(--rk-tile-unit), (100% - var(--rk-space-s)) / 2), 1fr));
  grid-auto-rows: minmax(var(--rk-tile-unit), auto);
}
.rk-tile {
  position: relative; display: flex; flex-direction: column; justify-content: flex-end; gap: var(--rk-space-s);
  padding: 12px; border: 0; border-radius: var(--rk-radius-tile);
  background-color: var(--_rk-fill, var(--rk-surface));
  background-image: linear-gradient(var(--_rk-tint, transparent), var(--_rk-tint, transparent));
  color: var(--rk-text-primary); font: inherit; font-size: var(--rk-font-size-xs); line-height: var(--rk-line-height-compact); text-align: left; text-decoration: none;
  transition: background-color var(--rk-duration-short) var(--rk-ease-base), transform var(--rk-duration-short) var(--rk-ease-base);
}
/* Build-in plays on arrival only (first paint, or a place a tile opened): a re-render never replays it. */
/* A place that turned in has built itself already: its tiles do not rise a second time. */
[data-rk-arriving]:where(:not([data-rk-arriving='turned'])) .rk-tile { animation: rk-build-in var(--rk-duration-moderate) var(--rk-ease-in) calc(min(var(--rk-i, 0), 10) * var(--rk-duration-stagger)) backwards; }
a.rk-tile, button.rk-tile { cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; -webkit-user-drag: none; }
.rk-tile:focus-visible { outline: 2px solid currentColor; outline-offset: -5px; }
.rk-tile-word { position: absolute; top: 10px; right: 12px; font-size: var(--rk-font-size-xs); font-weight: var(--rk-font-weight-semibold); }
.rk-stat b { display: block; font-size: var(--rk-font-size-xxl); font-weight: var(--rk-font-weight-medium); font-variant-numeric: tabular-nums; line-height: 1; }
.rk-tile-msg { font-size: var(--rk-font-size-s); line-height: var(--rk-line-height-compact); }
.rk-w2 { grid-column: span 2; }
.rk-h2 { grid-row: span 2; }
@keyframes rk-build-in { from { opacity: 0; transform: translateY(6px); } }
/* Press: a tile nudges back where it is pressed, as a Metro tile does. rekta.js sets --_rk-px and --_rk-py (-1 to 1
   from the tile's centre; 0 0 for Space or Enter) and data-rk-pressed. Pressed in the middle it sinks straight back;
   near an edge, that edge goes back further, by up to tile-tilt. It sinks over duration-press and comes back over
   duration-short. */
.rk-tile[data-rk-pressed] {
  transform: perspective(var(--rk-turnstile-perspective)) rotateX(calc(var(--_rk-py, 0) * -1 * var(--rk-tile-tilt))) rotateY(calc(var(--_rk-px, 0) * var(--rk-tile-tilt))) scale(var(--rk-tile-press-scale));
  transition-duration: var(--rk-duration-short), var(--rk-duration-press);
}
/* The sink pulls the pressed edge inward, off the pointer. So the release still lands on the tile, its hit area
   reaches space-m past the resting box while pressed and for duration-short after. Content sits above it so it can
   be selected with a fine pointer. */
a.rk-tile::after, button.rk-tile::after { content: ''; position: absolute; inset: 0; transition: inset 0s var(--rk-duration-short); }
.rk-tile[data-rk-pressed]::after { inset: calc(-1 * var(--rk-space-m)); transition-delay: 0s; }
a.rk-tile > *, button.rk-tile > * { z-index: 1; }
a.rk-tile > :not(.rk-tile-word), button.rk-tile > :not(.rk-tile-word) { position: relative; }

/* Progress: a thin meter in the current text colour (on a tile) or the status mark. */
.rk-progress { appearance: none; display: block; width: 100%; height: 4px; border: 0; color: inherit; background: color-mix(in srgb, currentColor 20%, transparent); }
.rk-progress::-webkit-progress-bar { background: transparent; }
.rk-progress::-webkit-progress-value { background: currentColor; transition: width var(--rk-duration-moderate) var(--rk-ease-base); }
.rk-progress::-moz-progress-bar { background: currentColor; }
/* Without a value, the bar does not know how far it is: a segment runs along it, like the loading line. */
.rk-progress:indeterminate { background: linear-gradient(currentColor, currentColor) no-repeat -50% 0 / 30% 100%, color-mix(in srgb, currentColor 20%, transparent); animation: rk-busy var(--rk-duration-busy) linear infinite; }
.rk-progress:indeterminate::-moz-progress-bar { background: transparent; }

/* Sparkline: an inline trend. Status mark colour on the ground; the tile's text colour on a tile. It draws in on
   arrival; afterwards new readings just move the line. */
.rk-spark { display: block; width: 100%; height: auto; overflow: visible; color: var(--_rk-mark, currentColor); }
.rk-tile .rk-spark { color: inherit; }
.rk-spark polyline { fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; stroke-dasharray: 1; }
[data-rk-arriving] .rk-spark:not(.rk-spark--static) polyline { animation: rk-draw var(--rk-duration-long) var(--rk-ease-in) both; }
.rk-tile[data-status='success'] .rk-spark { display: none; }
@keyframes rk-draw { from { stroke-dashoffset: 1; } }

/* Pivot ---------------------------------------------------------------------------------------------------------- */
/* Fixed order, active title large and light; inactive titles scale down from the same line box, so the strip's
   height never depends on which title is active. Each title's hit area stays at least touch-target tall. */
.rk-pivot {
  --_rk-inactive: var(--rk-font-size-pivot-inactive);
  position: relative; display: flex; align-items: baseline; gap: var(--rk-space-l); min-height: var(--rk-touch-target);
  overflow-x: auto; overscroll-behavior-x: contain; white-space: nowrap; scrollbar-width: none; scroll-behavior: smooth;
}
.rk-pivot::-webkit-scrollbar { display: none; }
.rk-pivot > a, .rk-pivot > button {
  --_rk-s: var(--rk-pivot-scale, 0.6);
  position: relative; padding: 0; border: 0; background: none; cursor: pointer;
  font: inherit; font-size: var(--rk-font-size-pivot-active); font-weight: var(--rk-font-weight-light); line-height: var(--rk-line-height-nav);
  color: var(--rk-text-contrast-medium); text-decoration: none;
  transform: scale(var(--_rk-s)); transform-origin: left bottom;
  /* A scaled title keeps its full layout width; rekta.js writes that width to --_rk-w, and the end margin takes
     back what the scale gives up, so every gap reads as space-l. */
  margin-inline-end: calc(var(--_rk-w, 0px) * (var(--_rk-s) - 1));
  transition: transform var(--rk-duration-pivot-size) ease-in-out, margin-inline-end var(--rk-duration-pivot-size) ease-in-out, color var(--rk-duration-short) var(--rk-ease-base);
}
.rk-pivot > a::after, .rk-pivot > button::after {
  content: ''; position: absolute; inset: auto 0 0; height: max(100%, calc(var(--rk-touch-target) / var(--_rk-s)));
}
.rk-pivot--nav { --_rk-inactive: var(--rk-font-size-nav-inactive); }
.rk-pivot--nav > a, .rk-pivot--nav > button { font-size: var(--rk-font-size-nav-active); }
.rk-pivot > [aria-current], .rk-pivot > [aria-selected='true'] { --_rk-s: 1; color: var(--rk-text-primary); }
/* A strip whose titles all fit does not glide; its titles only change size. */
/* Down the side (rk-pivot--side in an rk-side): the titles as a list beside the facets, as tabs are in a browser
   either way. One size; the title in sight steps in by space-m and darkens over duration-pivot-size, the one before
   steps back: the motion says which was picked. Compact, it is the strip along the top again. */
.rk-side { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: var(--rk-space-xl); align-items: start; }
.rk-pivot--side { flex-direction: column; align-items: flex-start; gap: var(--rk-space-xs); overflow: visible; padding-inline-end: var(--rk-space-m); }
.rk-pivot--side > :is(a, button) {
  --_rk-s: 1; --_rk-step: 0px; font-size: var(--rk-font-size-pivot-active); margin: 0; transform: translateX(var(--_rk-step));
  transition: transform var(--rk-duration-pivot-size) ease-in-out, color var(--rk-duration-pivot-size) ease-in-out;
}
.rk-pivot--side > :is([aria-current], [aria-selected='true']) { --_rk-step: var(--rk-space-m); }
.rk-pivot--side > :is([aria-current], [aria-selected='true']):dir(rtl) { --_rk-step: calc(-1 * var(--rk-space-m)); }

/* Buttons and switches ------------------------------------------------------------------------------------------- */
/* Primary takes the accent slot (ink by default). Height follows the density: 44px for touch, 32px for a fine pointer. */
.rk-btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: var(--rk-space-s);
  min-height: var(--rk-control-height); padding: 0 var(--rk-control-padding); border: 2px solid currentColor; border-radius: var(--rk-radius-s);
  background-color: transparent; color: inherit; font: inherit; font-weight: var(--rk-font-weight-semibold); cursor: pointer;
  transition: background-color var(--rk-duration-short) var(--rk-ease-base);
}
.rk-btn:active, .rk-btn[aria-expanded='true'] { background-color: var(--rk-hover); }
.rk-btn--primary, .rk-btn--primary:active { background-color: var(--rk-accent); border-color: var(--rk-accent); color: var(--rk-on-accent); }
.rk-btn--primary:active { background-image: linear-gradient(var(--rk-hover), var(--rk-hover)); }
.rk-btn:disabled, .rk-btn[aria-disabled='true'] { border-color: var(--rk-disabled); background: none; color: var(--rk-disabled); cursor: not-allowed; }
.rk-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--rk-space-s); }
/* A checkbox or radio with its label; a group of them goes in .rk-choices. */
.rk-switch { display: inline-flex; align-items: center; gap: var(--rk-space-s); min-height: var(--rk-control-height); font-weight: var(--rk-font-weight-semibold); cursor: pointer; }
/* Drawn by Rekta, as rekta-core draws it, the same in every browser: a 20px square with a 2px frame; checked, the
   accent with an on-accent mark (on the label, as inputs take no pseudo-elements everywhere). A radio is a ring, and
   checked an accent ring around an accent dot. Pressed, the hover fill around it; never a hover tint. */
.rk-switch { position: relative; }
.rk-switch input {
  -webkit-appearance: none; appearance: none; flex: none; width: 20px; height: 20px; margin: 0;
  border: 2px solid var(--rk-text-primary); border-radius: 0; background: transparent; color: inherit; cursor: inherit;
}
.rk-switch input[type='radio'] { border-radius: 50%; }
.rk-switch input:checked { border-color: var(--rk-accent); background-color: var(--rk-accent); }
.rk-switch input[type='radio']:checked { background: radial-gradient(circle, var(--rk-accent) 0 4.5px, transparent 5.5px); }
.rk-switch:has(> input[type='checkbox']:first-child:checked)::before {
  content: ''; position: absolute; left: 0; top: 50%; width: 20px; height: 20px; margin-top: -10px; pointer-events: none;
  background-color: var(--rk-on-accent);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10l3.5 3.5L15 6.5' fill='none' stroke='%23000' stroke-width='2'/%3E%3C/svg%3E") center / 20px no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10l3.5 3.5L15 6.5' fill='none' stroke='%23000' stroke-width='2'/%3E%3C/svg%3E") center / 20px no-repeat;
}
.rk-switch:active input:not(:disabled):not(:checked) { background-color: var(--rk-hover); box-shadow: 0 0 0 4px var(--rk-hover); }
.rk-switch:has(> input:disabled) { color: var(--rk-disabled); cursor: not-allowed; }
.rk-switch input:disabled { border-color: var(--rk-disabled); }
.rk-switch input[type='checkbox']:disabled:checked { background-color: var(--rk-disabled); }
.rk-switch input[type='radio']:disabled:checked { background-image: radial-gradient(circle, var(--rk-disabled) 0 4.5px, transparent 5.5px); }
@media (forced-colors: active) { .rk-switch input { forced-color-adjust: auto; -webkit-appearance: auto; appearance: auto; } .rk-switch::before { display: none; } }
.rk-choices { display: flex; flex-wrap: wrap; gap: 0 var(--rk-space-l); margin: 0; padding: 0; border: 0; min-width: 0; }
.rk-choices > legend { padding: 0; margin-bottom: var(--rk-space-xs); }

/* Fields --------------------------------------------------------------------------------------------------------- */
/* Label above, 1px control border, cause and remedy below. */
.rk-field { display: flex; flex-direction: column; gap: var(--rk-space-xs); }
.rk-label { font-size: var(--rk-font-size-xs); font-weight: var(--rk-font-weight-semibold); color: var(--rk-text-contrast-high); }
.rk-input {
  min-height: var(--rk-control-height); width: 100%; padding: 0 12px; border: 1px solid var(--rk-text-contrast-medium); border-radius: var(--rk-radius-s);
  background: var(--rk-bg); color: var(--rk-text-primary); font: inherit;
  transition: border-color var(--rk-duration-short) var(--rk-ease-base);
}
textarea.rk-input { min-height: 88px; padding: 10px 12px; resize: vertical; }
.rk-input::placeholder { color: var(--rk-text-contrast-medium); opacity: 1; }
.rk-input:focus-visible { border-color: var(--rk-text-primary); outline: 2px solid var(--rk-focus); outline-offset: 2px; }
.rk-input:disabled { border-color: var(--rk-disabled); color: var(--rk-disabled); cursor: not-allowed; }
.rk-hint { font-size: var(--rk-font-size-xs); color: var(--rk-text-contrast-high); }
.rk-field[data-status='error'] .rk-input { padding-inline: 11px; border: 2px solid var(--rk-status-error-full); }
.rk-field[data-status='error'] .rk-hint { color: var(--rk-text-primary); }
.rk-field[data-status='error'] .rk-hint::before { content: ''; display: inline-block; width: 8px; height: 8px; margin-right: 6px; background: var(--_rk-mark); }
/* A label may say "optional"; required fields carry no mark. */
.rk-optional { font-weight: var(--rk-font-weight-regular); color: var(--rk-text-contrast-high); }
/* The summary of what needs attention, first in the form: a sentence with the error square and a link to each field,
   a hairline below, no fill. It takes focus when the form is sent with errors. */
.rk-errors { animation: rk-arrive var(--rk-duration-short) var(--rk-ease-in) both; padding-bottom: var(--rk-space-m); border-bottom: 1px solid var(--rk-text-contrast-low); color: var(--rk-text-primary); }
.rk-errors:focus-visible { outline: 2px solid var(--rk-focus); outline-offset: 4px; }
.rk-errors > p { font-weight: var(--rk-font-weight-semibold); }
.rk-errors > p::before { content: ''; display: inline-block; width: 8px; height: 8px; margin-right: 6px; background: var(--rk-status-error-full); }
.rk-errors > ul { margin: var(--rk-space-xs) 0 0; padding: 0 0 0 14px; list-style: none; }
.rk-errors > ul > li + li { margin-top: 2px; }
.rk-errors a { color: inherit; }
/* Why a control cannot act now: a hint beside it, always shown, read with it. */
.rk-actions > .rk-why { flex: 1 1 12rem; }

/* Inputs --------------------------------------------------------------------------------------------------------- */
/* Native where it can be: a select, number, date and time are the platform's own controls in Rekta's frame, so
   their pickers, keyboard and screen-reader support come for free. */
select.rk-input {
  appearance: none; padding-right: 36px; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 18px) 55%, calc(100% - 13px) 55%; background-size: 5px 5px; background-repeat: no-repeat;
}
select.rk-input[multiple] { padding: var(--rk-space-xs) 0; background-image: none; }
select.rk-input option { background: var(--rk-bg); color: var(--rk-text-primary); }
.rk-input[type='number'] { -moz-appearance: textfield; appearance: textfield; font-variant-numeric: tabular-nums; }
.rk-input[type='number']::-webkit-inner-spin-button, .rk-input[type='number']::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.rk-input:is([type='date'], [type='time'], [type='datetime-local'], [type='month'], [type='week']) { font-variant-numeric: tabular-nums; }
.rk-input::-webkit-calendar-picker-indicator {
  width: 16px; height: 16px; padding: 2px; opacity: 1; cursor: pointer; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='black' stroke-width='1.6'%3E%3Cpath d='M3 5h14v12H3zM3 8.5h14M7 3v4M13 3v4'/%3E%3C/svg%3E") center / 16px no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='black' stroke-width='1.6'%3E%3Cpath d='M3 5h14v12H3zM3 8.5h14M7 3v4M13 3v4'/%3E%3C/svg%3E") center / 16px no-repeat;
}
.rk-input[type='time']::-webkit-calendar-picker-indicator {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='black' stroke-width='1.6'%3E%3Ccircle cx='10' cy='10' r='7'/%3E%3Cpath d='M10 6v4l3 2'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='black' stroke-width='1.6'%3E%3Ccircle cx='10' cy='10' r='7'/%3E%3Cpath d='M10 6v4l3 2'/%3E%3C/svg%3E");
}
/* Combobox: a field with a chevron button; its list floats below like a menu. The active option looks focused while
   focus stays in the field; the current choice carries a check. */
.rk-combo { position: relative; display: flex; }
.rk-combo > .rk-input { padding-right: 40px; }
.rk-combo-btn {
  position: absolute; inset: 1px 1px 1px auto; width: 36px; border: 0; border-radius: 0 var(--rk-radius-s) var(--rk-radius-s) 0; background: none; color: inherit; cursor: pointer;
}
.rk-combo-btn::before { content: ''; position: absolute; left: 50%; top: 50%; width: 6px; height: 6px; margin: -5px 0 0 -3px; border: solid currentColor; border-width: 0 1.6px 1.6px 0; transform: rotate(45deg); }
.rk-combo-list { padding: var(--rk-space-xs) 0; margin: 0; list-style: none; }
.rk-combo-list [role='option'][aria-selected='true'] { outline: 2px solid var(--rk-focus); outline-offset: -2px; background-color: var(--rk-hover); }
.rk-combo-list [role='option']::before { content: ''; flex: none; width: 10px; height: 6px; margin: -3px 2px 0 0; }
.rk-combo-list [data-rk-chosen]::before { border: solid currentColor; border-width: 0 0 2px 2px; transform: rotate(-45deg); }
.rk-combo-list[aria-busy='true']::before {
  content: ''; position: absolute; inset: 0 0 auto; height: 2px;
  background: linear-gradient(var(--rk-text-primary), var(--rk-text-primary)) no-repeat -50% 0 / 30% 100%; animation: rk-busy var(--rk-duration-busy) linear infinite;
}

/* Toggle switch, the Metro way: a square-cornered frame, the accent fill growing from the leading edge when on, a solid
   ink bar as the thumb, and the state word beside it. The checkbox (role="switch") stays the real control. */
.rk-toggle { position: relative; display: inline-flex; align-items: center; gap: var(--rk-space-s); min-height: var(--rk-control-height); font-weight: var(--rk-font-weight-semibold); cursor: pointer; }
.rk-toggle > input { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; }
.rk-toggle-track {
  position: relative; flex: none; width: 46px; height: 22px; padding: 2px; border: 2px solid var(--rk-text-primary);
  background: linear-gradient(var(--rk-accent), var(--rk-accent)) no-repeat; background-origin: content-box; background-clip: content-box; background-size: 0 100%;
  transition: background-size var(--rk-duration-short) var(--rk-ease-base);
}
.rk-toggle-track::after {
  content: ''; position: absolute; top: -2px; bottom: -2px; left: -2px; width: 12px; background: var(--rk-text-primary);
  transition: transform var(--rk-duration-short) var(--rk-ease-base);
}
.rk-toggle > input:checked + .rk-toggle-track { background-size: calc(100% - 14px) 100%; }
.rk-toggle > input:checked + .rk-toggle-track::after { transform: translateX(34px); }
.rk-toggle > input:focus-visible + .rk-toggle-track { outline: 2px solid var(--rk-focus); outline-offset: 2px; }
.rk-toggle > input:disabled + .rk-toggle-track { border-color: var(--rk-disabled); }
.rk-toggle > input:disabled + .rk-toggle-track::after { background: var(--rk-disabled); }
.rk-toggle:has(> input:disabled) { color: var(--rk-disabled); cursor: not-allowed; }
.rk-toggle-label { margin-right: var(--rk-space-s); }
.rk-toggle-word { min-width: 2.2em; font-weight: var(--rk-font-weight-regular); color: var(--rk-text-contrast-high); }
.rk-toggle-word::before { content: attr(data-off); }
.rk-toggle > input:checked ~ .rk-toggle-word::before { content: attr(data-on); }

/* Stepper: − field +, joined; the field centred in tabular figures. */
.rk-stepper { display: inline-flex; align-items: stretch; }
.rk-stepper > .rk-input { width: 5.5em; border-radius: 0; text-align: center; }
.rk-stepper > [data-rk-step] {
  flex: none; width: var(--rk-control-height); min-height: var(--rk-control-height); border: 1px solid var(--rk-text-contrast-medium); background: none; color: inherit; font: inherit; font-size: var(--rk-font-size-m); line-height: 1; cursor: pointer;
}
.rk-stepper > [data-rk-step]:first-child { border-right: 0; border-radius: var(--rk-radius-s) 0 0 var(--rk-radius-s); }
.rk-stepper > [data-rk-step]:last-child { border-left: 0; border-radius: 0 var(--rk-radius-s) var(--rk-radius-s) 0; }
.rk-stepper > [data-rk-step]:active { background-color: var(--rk-hover); }
.rk-stepper > [data-rk-step][aria-disabled='true'] { color: var(--rk-disabled); cursor: not-allowed; }

/* Slider: a 6px track filled with the accent up to the value, an ink bar as the thumb (rekta.js writes --_rk-v). */
.rk-range { -webkit-appearance: none; appearance: none; width: 100%; height: var(--rk-control-height); margin: 0; background: none; cursor: pointer; --_rk-v: 50%; }
.rk-range::-webkit-slider-runnable-track { height: 6px; background: linear-gradient(var(--rk-accent), var(--rk-accent)) 0 / var(--_rk-v) 100% no-repeat, var(--rk-text-contrast-low); }
.rk-range::-moz-range-track { height: 6px; background: var(--rk-text-contrast-low); }
.rk-range::-moz-range-progress { height: 6px; background: var(--rk-accent); }
.rk-range::-webkit-slider-thumb { -webkit-appearance: none; width: 10px; height: 24px; margin-top: -9px; border: 0; border-radius: 0; background: var(--rk-text-primary); }
.rk-range::-moz-range-thumb { width: 10px; height: 24px; border: 0; border-radius: 0; background: var(--rk-text-primary); }
.rk-range:focus-visible { outline: none; }
.rk-range:focus-visible::-webkit-slider-thumb { outline: 2px solid var(--rk-focus); outline-offset: 2px; }
.rk-range:focus-visible::-moz-range-thumb { outline: 2px solid var(--rk-focus); outline-offset: 2px; }
.rk-range:disabled { cursor: not-allowed; }
.rk-range:disabled::-webkit-slider-thumb { background: var(--rk-disabled); }
.rk-range + output { min-width: 3.5em; font-weight: var(--rk-font-weight-medium); font-variant-numeric: tabular-nums; text-align: right; }
.rk-slider { display: flex; align-items: center; gap: var(--rk-space-m); }

/* Segments: two to five options side by side, one chosen; a row of joined buttons, the chosen one in the accent. */
.rk-segments { position: relative; display: inline-flex; flex-wrap: wrap; margin: 0; padding: 0; border: 0; min-width: 0; }
.rk-segments-slide { position: absolute; z-index: 0; background: var(--rk-accent); transform-origin: 0 50%; pointer-events: none; }
.rk-segments > label { z-index: 1; }
.rk-segments[data-rk-sliding] > label { transition: none; }
/* While the accent block slides in, the chosen label waits for it: no fill of its own, its text turns light halfway. */
.rk-segments > label[data-rk-sliding]:has(> input:checked) { background-color: transparent; transition: color 0s linear calc(var(--rk-duration-short) / 2); }
.rk-segments > label {
  position: relative; display: inline-flex; align-items: center; min-height: var(--rk-control-height); padding: 0 var(--rk-control-padding);
  border: 2px solid var(--rk-text-primary); font-weight: var(--rk-font-weight-semibold); cursor: pointer; white-space: nowrap;
  transition: background-color var(--rk-duration-short) var(--rk-ease-base), color var(--rk-duration-short) var(--rk-ease-base);
}
.rk-segments > label + label { margin-left: -2px; }
.rk-segments > label:first-of-type { border-radius: var(--rk-radius-s) 0 0 var(--rk-radius-s); }
.rk-segments > label:last-of-type { border-radius: 0 var(--rk-radius-s) var(--rk-radius-s) 0; }
.rk-segments > label > input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: inherit; }
.rk-segments > label:has(> input:checked) { z-index: 1; border-color: var(--rk-accent); background-color: var(--rk-accent); color: var(--rk-on-accent); }
.rk-segments > label:has(> input:focus-visible) { z-index: 2; outline: 2px solid var(--rk-focus); outline-offset: 2px; }
.rk-segments > label:has(> input:disabled) { border-color: var(--rk-disabled); color: var(--rk-disabled); cursor: not-allowed; }

/* Drop zone: a dashed frame around a file input; files dragged over it make it solid and lay the hover over it. */
.rk-drop {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--rk-space-xs);
  min-height: 7.5rem; padding: var(--rk-space-l) var(--rk-space-m); border: 2px dashed var(--rk-text-contrast-medium); border-radius: var(--rk-radius-s);
  text-align: center; color: var(--rk-text-contrast-high); cursor: pointer;
  transition: border-color var(--rk-duration-short) var(--rk-ease-base), background-color var(--rk-duration-short) var(--rk-ease-base);
}
.rk-drop > input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.rk-drop b { color: var(--rk-text-primary); }
.rk-drop:has(> input:focus-visible) { outline: 2px solid var(--rk-focus); outline-offset: 2px; }
.rk-drop[data-rk-over] { border-style: solid; border-color: var(--rk-text-primary); background-color: var(--rk-hover); color: var(--rk-text-primary); }

/* Desktop ------------------------------------------------------------------------------------------------------- */
/* Tooltip: a small ink strip, like a toast, above its control (below when there is no room). It comes and goes; it
   never holds anything the control does not already say or name. */
.rk-tip {
  position: fixed; inset: auto; margin: 0; z-index: var(--rk-layer-float); max-width: min(20rem, calc(100vw - 2 * var(--rk-space-m)));
  padding: 4px var(--rk-space-s); border: 0; border-radius: var(--rk-radius-s); background: var(--rk-text-primary); color: var(--rk-bg);
  font: inherit; font-size: var(--rk-font-size-xs); font-weight: var(--rk-font-weight-semibold); line-height: var(--rk-line-height-compact); pointer-events: none;
}
.rk-tip:is(:popover-open, [data-rk-open]) { animation: rk-float-in var(--rk-duration-float) var(--rk-ease-in) both; --_rk-from: 4px; }
.rk-tip[data-rk-side='below'] { --_rk-from: -4px; }
.rk-tip .rk-key { margin-left: var(--rk-space-xs); border-color: color-mix(in srgb, var(--rk-bg) 50%, transparent); color: inherit; }
/* Icons: 20px, stroke 1.6, square ends, in the text colour (rekta.icons.svg: <svg class="rk-icon"><use href="#rk-i-NAME"/>). */
.rk-icon { display: inline-block; flex: none; width: 20px; height: 20px; vertical-align: middle; fill: none; stroke: currentColor; stroke-width: 1.6; overflow: visible; }
.rk-icon--16 { width: 16px; height: 16px; }
/* Visually hidden, still read. */
.rk-sr { position: absolute; left: 0; top: 0; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Tree: rows at the density's height, indented one space-m per level, a chevron that turns as an item opens. A
   selected item takes the accent, like any Metro selection. */
.rk-tree, .rk-tree ul { margin: 0; padding: 0; list-style: none; }
.rk-tree [role='treeitem'] { outline: none; }
.rk-tree-row {
  display: flex; align-items: center; gap: var(--rk-space-xs); min-height: var(--rk-row-height);
  padding: 0 var(--rk-space-s) 0 calc(var(--_rk-level, 0) * var(--rk-space-m)); cursor: pointer; user-select: none;
  transition: background-color var(--rk-duration-short) var(--rk-ease-base), color var(--rk-duration-short) var(--rk-ease-base);
}
.rk-tree-row > a { color: inherit; text-decoration: none; }
.rk-tree-twisty { position: relative; flex: none; width: 20px; height: 20px; }
[aria-expanded] > .rk-tree-row > .rk-tree-twisty::before {
  content: ''; position: absolute; left: 6px; top: 6px; width: 6px; height: 6px; border: solid currentColor; border-width: 1.6px 1.6px 0 0;
  transform: rotate(45deg); transition: transform var(--rk-duration-short) var(--rk-ease-base);
}
[aria-expanded='true'] > .rk-tree-row > .rk-tree-twisty::before { transform: translate(1px, 1px) rotate(135deg); }
.rk-tree [role='treeitem'][aria-selected='true'] > .rk-tree-row {
  --rk-text-primary: var(--rk-on-accent); --rk-text-contrast-high: var(--rk-on-accent); --rk-text-contrast-medium: var(--rk-on-accent);
  background-color: var(--rk-accent); color: var(--rk-on-accent);
}
.rk-tree [role='treeitem']:focus-visible > .rk-tree-row { outline: 2px solid var(--rk-focus); outline-offset: -2px; }
.rk-tree [role='treeitem'][aria-selected='true']:focus-visible > .rk-tree-row { outline-color: currentColor; outline-offset: -4px; }

/* Sortable: a grip (six squares) on each item; the dragged item lifts as a floating surface (bg and a 1px edge, no
   shadow), the others make room. */
.rk-grip { position: relative; flex: none; width: 24px; min-height: var(--rk-row-height); padding: 0; border: 0; background: none; color: var(--rk-text-contrast-medium); cursor: grab; touch-action: none; }
.rk-grip::before { content: ''; position: absolute; inset: 0; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M7 4h2v2H7zM11 4h2v2h-2zM7 9h2v2H7zM11 9h2v2h-2zM7 14h2v2H7zM11 14h2v2h-2z'/%3E%3C/svg%3E") center / 20px no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M7 4h2v2H7zM11 4h2v2h-2zM7 9h2v2H7zM11 9h2v2h-2zM7 14h2v2H7zM11 14h2v2h-2z'/%3E%3C/svg%3E") center / 20px no-repeat; }
.rk-grip:focus-visible { outline: 2px solid var(--rk-focus); outline-offset: -2px; }
[data-rk-sorting] > :not([data-rk-dragging]) { transition: transform var(--rk-duration-short) var(--rk-ease-base); }
[data-rk-dragging], [data-rk-grabbed] { position: relative; z-index: 2; background-color: var(--rk-bg); outline: 1px solid var(--rk-text-contrast-medium); outline-offset: -1px; }
[data-rk-dragging] .rk-grip { cursor: grabbing; }
[data-rk-grabbed] .rk-grip { color: var(--rk-text-primary); }

/* Virtual list: a bounded scroller; rows sit at their place by top, at the density's row height, on hairlines. */
.rk-virtual { position: relative; overflow-y: auto; overscroll-behavior: contain; border-top: 1px solid var(--rk-text-contrast-low); outline: none; scrollbar-width: thin; }
.rk-virtual-body { position: relative; }
.rk-virtual-row {
  position: absolute; left: 0; right: 0; display: flex; align-items: center; gap: var(--rk-space-m); height: var(--rk-row-height);
  padding: 0 var(--rk-space-s) 0 calc(14px + var(--rk-space-s)); border-bottom: 1px solid var(--rk-text-contrast-low); cursor: pointer; white-space: nowrap; overflow: hidden;
  transition: background-color var(--rk-duration-short) var(--rk-ease-base), color var(--rk-duration-short) var(--rk-ease-base);
}
.rk-virtual:focus-visible { outline: 2px solid var(--rk-focus); outline-offset: 2px; }
.rk-virtual:focus-visible .rk-virtual-row[data-rk-active] { outline: 2px solid var(--rk-focus); outline-offset: -2px; }
.rk-virtual-row[aria-selected='true']::before {
  content: ''; position: absolute; left: var(--rk-space-xs); top: 50%; width: 11px; height: 6px; margin-top: -5px;
  border-left: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg);
}

/* Table columns: an invisible 9px handle on each head cell's trailing edge, a hairline while hovered, focused or
   dragged. Editing: the cell holds a field; a refusal shows below it in ink, like a tooltip. */
.rk-col-handle { position: absolute; top: 0; bottom: 0; right: -4px; z-index: 1; width: 9px; cursor: col-resize; touch-action: none; outline: none; }
.rk-col-handle::after { content: ''; position: absolute; inset: 20% 4px; width: 1px; background: transparent; transition: background-color var(--rk-duration-short) var(--rk-ease-base); }
.rk-col-handle:focus-visible::after, .rk-col-handle[data-rk-dragging]::after { width: 2px; background: var(--rk-text-contrast-medium); }
.rk-col-handle:focus-visible { outline: 2px solid var(--rk-focus); outline-offset: -2px; }
.rk-table td[data-rk-editing] { position: relative; padding-block: 2px; }
.rk-cell-input { min-height: calc(var(--rk-row-height) - 6px); padding-inline: var(--rk-space-xs); }
.rk-table td[data-rk-editing][aria-busy='true'] .rk-cell-input { color: var(--rk-text-contrast-high); cursor: progress; }
.rk-table td[data-rk-editing][data-status='error'] .rk-cell-input { border: 2px solid var(--rk-status-error-full); }
.rk-cell-error {
  animation: rk-float-in var(--rk-duration-float) var(--rk-ease-in) both; --_rk-from: -4px;
  position: absolute; left: 0; top: 100%; z-index: 3; width: max-content; max-width: 20rem; margin-top: 2px; padding: 4px var(--rk-space-s);
  border-radius: var(--rk-radius-s); background: var(--rk-text-primary); color: var(--rk-bg); font-size: var(--rk-font-size-xs); font-weight: var(--rk-font-weight-semibold); white-space: normal;
}
.rk-cell-error::before { content: ''; display: inline-block; width: 8px; height: 8px; margin-right: 6px; background: var(--rk-status-error-tile); }

/* Live: a region says how fresh it is (.rk-age); stale or offline, the line takes the waiting square and the word,
   and sparklines stop looking current. Held, it says so; waiting updates wait behind a quiet button. */
.rk-age { font-size: var(--rk-font-size-xs); color: var(--rk-text-contrast-high); font-variant-numeric: tabular-nums; transition: color var(--rk-duration-short) var(--rk-ease-base); }
[data-rk-live] [data-rk-value], [data-rk-live] .rk-spark { transition: color var(--rk-duration-short) var(--rk-ease-base), opacity var(--rk-duration-short) var(--rk-ease-base); }
[data-rk-live='stale'] .rk-age, [data-rk-live='offline'] .rk-age { color: var(--rk-text-primary); font-weight: var(--rk-font-weight-semibold); }
[data-rk-live='stale'] .rk-age::before, [data-rk-live='offline'] .rk-age::before { content: ''; display: inline-block; width: 8px; height: 8px; margin-right: 6px; background: var(--rk-status-warning-full); }
[data-rk-live='stale'] .rk-spark, [data-rk-live='offline'] .rk-spark { opacity: 0.35; }
[data-rk-live='stale'] [data-rk-value], [data-rk-live='offline'] [data-rk-value] { color: var(--rk-text-contrast-high); }
.rk-live-more { animation: rk-arrive var(--rk-duration-short) var(--rk-ease-in) both; min-height: 0; padding: 2px var(--rk-space-s); font-size: var(--rk-font-size-xs); }

/* Data ---------------------------------------------------------------------------------------------------------- */
/* Charts, in ink and grey: the first series text-primary, a second text-contrast-medium; the accent only for the point
   under the pointer. Hairline gridlines, 2px lines, square bar ends, every label in a text colour. */
.rk-chart { position: relative; min-width: 0; }
.rk-chart > * + * { margin-top: var(--rk-space-xs); }
.rk-chart-svg { display: block; max-width: 100%; height: auto; overflow: visible; outline: none; font-size: var(--rk-font-size-xs); font-variant-numeric: tabular-nums; touch-action: pan-y; }
.rk-chart-svg:focus-visible { outline: 2px solid var(--rk-focus); outline-offset: 4px; }
.rk-chart-grid line { stroke: var(--rk-text-contrast-low); stroke-width: 1; shape-rendering: crispEdges; }
.rk-chart-grid text { fill: var(--rk-text-contrast-high); }
.rk-chart .rk-s0 { --_rk-series: var(--rk-text-primary); }
.rk-chart .rk-s1 { --_rk-series: var(--rk-text-contrast-medium); }
.rk-line { fill: none; stroke: var(--_rk-series); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; stroke-dasharray: 1 0; }
.rk-line[data-rk-draw] { stroke-dasharray: 1; animation: rk-draw var(--rk-duration-long) var(--rk-ease-in) both; }
@keyframes rk-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
.rk-bar { fill: var(--_rk-series); transform-box: fill-box; transform-origin: bottom; transition: opacity var(--rk-duration-short) var(--rk-ease-base); }
.rk-bar[data-rk-grow] { animation: rk-grow var(--rk-duration-moderate) var(--rk-ease-in) both; }
@keyframes rk-grow { from { transform: scaleY(0); } }
.rk-chart-svg[data-rk-hovering] .rk-bar:not([data-rk-hot]) { opacity: 0.35; }
.rk-bar.rk-s0[data-rk-hot] { fill: var(--rk-accent); }
.rk-chart-value, .rk-chart-end.rk-t0 { fill: var(--rk-text-primary); font-weight: var(--rk-font-weight-semibold); }
.rk-chart-end.rk-t1 { fill: var(--rk-text-contrast-high); }
.rk-chart-hit { fill: transparent; cursor: crosshair; }
.rk-chart-cross { stroke: var(--rk-text-contrast-medium); stroke-width: 1; shape-rendering: crispEdges; }
.rk-chart-dot { fill: var(--_rk-series); stroke: var(--rk-bg); stroke-width: 2; }
.rk-chart-dot.rk-s0 { fill: var(--rk-accent); }
.rk-legend { display: flex; flex-wrap: wrap; gap: var(--rk-space-xs) var(--rk-space-m); margin: 0; padding: 0; list-style: none; font-size: var(--rk-font-size-xs); color: var(--rk-text-contrast-high); }
.rk-legend > li { display: inline-flex; align-items: center; gap: 6px; }
.rk-legend i { flex: none; background: var(--_rk-series); }
.rk-key-line { width: 14px; height: 2px; }
.rk-key-box { width: 10px; height: 10px; }
.rk-chart-table > summary { width: max-content; font-size: var(--rk-font-size-xs); font-weight: var(--rk-font-weight-semibold); color: var(--rk-text-contrast-high); cursor: pointer; }
.rk-chart-table > table { margin-top: var(--rk-space-xs); }

/* Meter: a quantity against its whole. A 6px hairline-grey track; the fill in ink, or in a status's full colour
   when the value means that status (a disk nearly full). The label and the value sit above it. */
.rk-meter { position: relative; height: 6px; overflow: hidden; background: var(--rk-text-contrast-low); }
.rk-meter::before { content: ''; position: absolute; inset: 0 auto 0 0; width: calc(var(--rk-v, 0) * 100%); background: var(--_rk-mark, var(--rk-text-primary)); transition: width var(--rk-duration-moderate) var(--rk-ease-base); }
.rk-meter-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--rk-space-s); margin-bottom: var(--rk-space-xs); font-size: var(--rk-font-size-xs); color: var(--rk-text-contrast-high); }
.rk-meter-head > b { font-size: var(--rk-font-size-s); font-weight: var(--rk-font-weight-medium); font-variant-numeric: tabular-nums; color: var(--rk-text-primary); }

/* Progress dots, the Metro way, for a wait that blocks (signing in, installing, the first load): five small squares
   fly in from the leading edge, bunch up slowly through the middle and speed off, one after another. Regions keep
   the calm 2px line. Under reduced motion they stand still in the middle. */
.rk-dots { position: relative; display: block; width: 100%; height: 4px; overflow: hidden; color: var(--rk-text-primary); }
.rk-dots > i { position: absolute; top: 0; left: -2%; width: 4px; height: 4px; background: currentColor; opacity: 0; animation: rk-dots var(--rk-duration-dots) infinite; animation-delay: calc(var(--_rk-n, 0) * var(--rk-duration-dots) * 0.07); }
.rk-dots > i:nth-child(2) { --_rk-n: 1; }
.rk-dots > i:nth-child(3) { --_rk-n: 2; }
.rk-dots > i:nth-child(4) { --_rk-n: 3; }
.rk-dots > i:nth-child(5) { --_rk-n: 4; }
@keyframes rk-dots {
  0% { left: -2%; opacity: 0; animation-timing-function: cubic-bezier(0.1, 0.7, 0.4, 1); }
  6% { opacity: 1; }
  35% { left: 44%; animation-timing-function: linear; }
  62% { left: 56%; animation-timing-function: cubic-bezier(0.6, 0, 0.9, 0.3); }
  90% { opacity: 1; }
  100% { left: 102%; opacity: 0; }
}

/* Shell ---------------------------------------------------------------------------------------------------------- */
/* The title bar of an installed app: shown in a PWA's window-controls overlay, or when a native shell sets
   data-rk-titlebar on the root. It is the window's drag area (its controls are not), on the ground, a hairline below;
   the window's own buttons keep their room (titlebar-area-*). The app's name, then the place's name, light. */
.rk-titlebar {
  display: none; align-items: center; gap: var(--rk-space-s); height: env(titlebar-area-height, 36px); padding: 0 var(--rk-space-s);
  background: var(--rk-bg); border-bottom: 1px solid var(--rk-text-contrast-low); font-size: var(--rk-font-size-xs); white-space: nowrap; user-select: none;
  -webkit-app-region: drag; app-region: drag;
}
.rk-titlebar :is(a, button, input, select, [tabindex]) { -webkit-app-region: no-drag; app-region: no-drag; }
.rk-titlebar .rk-ab { min-width: 32px; min-height: 28px; padding: 0 var(--rk-space-xs); justify-content: center; }
.rk-titlebar-name b { font-weight: var(--rk-font-weight-semibold); }
.rk-titlebar-place { overflow: hidden; text-overflow: ellipsis; font-weight: var(--rk-font-weight-light); color: var(--rk-text-contrast-high); }
.rk-titlebar-place:not(:empty)::before { content: '/'; margin-right: var(--rk-space-s); color: var(--rk-text-contrast-medium); }
.rk-titlebar--inline { display: flex; }
@media (display-mode: window-controls-overlay) {
  .rk-titlebar:not(.rk-titlebar--inline) { display: flex; position: fixed; top: env(titlebar-area-y, 0); left: env(titlebar-area-x, 0); width: env(titlebar-area-width, 100%); z-index: var(--rk-layer-banner); }
  .rk:has(> .rk-titlebar) { padding-top: env(titlebar-area-height, 36px); }
}
:root[data-rk-titlebar] .rk-titlebar:not(.rk-titlebar--inline) { display: flex; position: fixed; inset: 0 0 auto; z-index: var(--rk-layer-banner); padding-right: var(--rk-titlebar-controls, 140px); }
:root[data-rk-titlebar] .rk:has(> .rk-titlebar) { padding-top: env(titlebar-area-height, 36px); }

/* Touch: fields never set text below 16px, so iOS does not zoom the page when one takes focus. */
@media (pointer: coarse) { .rk-input { font-size: max(16px, 1rem); } }

/* Tags: a status square and a lowercase word, on the ground; soft adds a tint for running text. */
.rk-tag { display: inline-flex; align-items: center; gap: 6px; font-size: var(--rk-font-size-xs); font-weight: var(--rk-font-weight-semibold); line-height: var(--rk-line-height-compact); color: var(--rk-text-primary); white-space: nowrap; }
.rk-tag::before { content: ''; flex: none; width: 8px; height: 8px; background: var(--_rk-mark, var(--rk-text-contrast-medium)); }
.rk-tag--soft { padding: 2px var(--rk-space-s); border-radius: var(--rk-radius-s); background: var(--_rk-soft, var(--rk-surface)); }

/* App bar -------------------------------------------------------------------------------------------------------- */
/* Bottom at every width, frosted glass, labelled controls 48px in every density. The live state's word is always
   visible: the square's colour is never the only signal. */
.rk-appbar {
  position: fixed; inset: auto 0 0; z-index: var(--rk-layer-appbar); display: flex; align-items: center; gap: var(--rk-space-xs);
  height: calc(var(--rk-appbar-height) + env(safe-area-inset-bottom)); padding: 0 var(--rk-space-m) env(safe-area-inset-bottom);
  background: var(--rk-glass); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-top: 1px solid var(--rk-text-contrast-low);
}
.rk-ab {
  display: inline-flex; flex: none; align-items: center; gap: 6px; min-width: 48px; min-height: 48px; padding: 0 10px;
  border: 0; border-radius: var(--rk-radius-s); background: none; color: inherit; cursor: pointer;
  font: inherit; font-size: var(--rk-font-size-xs); font-weight: var(--rk-font-weight-semibold);
  transition: background-color var(--rk-duration-short) var(--rk-ease-base);
}
.rk-ab:active { background-color: var(--rk-hover); }
.rk-ab b { font-weight: inherit; }
.rk-ab svg { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; }
.rk-ab-back { order: -1; }
.rk-ab[data-rk-overflow] { display: none; }
.rk-ab-status { display: inline-flex; flex: none; align-items: center; gap: var(--rk-space-s); margin-right: auto; font-size: var(--rk-font-size-xs); color: var(--rk-text-contrast-high); white-space: nowrap; }
.rk-pulse { width: 8px; height: 8px; flex: none; background: var(--rk-status-success-full); animation: rk-pulse var(--rk-duration-pulse) ease-in-out infinite; }
.rk-appbar[data-rk-state='paused'] .rk-pulse { background: var(--rk-status-warning-full); animation: none; }
.rk-appbar[data-rk-state='halted'] .rk-pulse { background: var(--rk-status-error-full); animation: none; }
.rk-ab-k { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@keyframes rk-pulse { 50% { opacity: 0.25; } }

/* Data states --------------------------------------------------------------------------------------------------- */
/* A data region (.rk-region: a list, table or tile grid; its kicker sits above it, so the region starts at its first
   hairline) is loading while aria-busy="true": after busy-delay a 2px line runs along that hairline, and still
   placeholders (.rk-ghost) hold the layout. Nothing shimmers: movement is for live data. Empty and failed regions
   say so in a sentence (.rk-empty), with the way on. */
.rk-region { position: relative; }
.rk-region[aria-busy='true']::before, .rk-btn[data-rk-pending]::after {
  content: ''; position: absolute; inset: 0 0 auto; z-index: 1; height: 2px; pointer-events: none;
  background: linear-gradient(var(--rk-text-primary), var(--rk-text-primary)) no-repeat -50% 0 / 30% 100%;
  animation: rk-busy var(--rk-duration-busy) linear infinite, rk-wait 0s linear var(--rk-duration-busy-delay) backwards;
}
@keyframes rk-busy { from { background-position: -50% 0; } to { background-position: 150% 0; } }
@keyframes rk-wait { from { visibility: hidden; } }
.rk-ghost { display: block; flex: none; width: 8em; max-width: 100%; height: 0.75em; border-radius: var(--rk-radius-s); background: var(--rk-surface); }
.rk-rows > li:has(> .rk-ghost) { align-items: center; min-height: var(--rk-row-height); }
.rk-empty { padding-block: var(--rk-space-m); border-top: 1px solid var(--rk-text-contrast-low); color: var(--rk-text-contrast-high); }
.rk-empty > * + * { margin-top: var(--rk-space-s); }
.rk-empty[data-status='error'] { color: var(--rk-text-primary); }
.rk-empty[data-status='error'] > :first-child::before { content: ''; display: inline-block; width: 8px; height: 8px; margin-right: 6px; background: var(--_rk-mark); }
/* Pending: the button keeps its width and says what it is doing ("saving…"); the line runs under it. */
.rk-btn[data-rk-pending] { cursor: progress; }
.rk-btn[data-rk-pending]::after { inset: auto 0 -6px; }

/* Table ---------------------------------------------------------------------------------------------------------- */
/* Hairlines and the density's row height; the head in the kicker's voice, sticking to the top of what scrolls; the
   sorted column in text-primary with a triangle; numbers right-aligned in tabular figures. The row's main cell is a
   <th scope="row">; a selectable table starts each row with an empty .rk-check cell for the checkmark. Narrower
   than 760px, rows stack (below). */
.rk-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.rk-table :is(th, td) { padding: var(--rk-space-xs) var(--rk-space-s); text-align: left; vertical-align: middle; }
.rk-table thead th {
  position: sticky; top: 0; z-index: 1; padding-block: var(--rk-space-s); background: var(--rk-bg); border-bottom: 1px solid var(--rk-text-contrast-low);
  font-size: var(--rk-font-size-xs); font-weight: var(--rk-font-weight-semibold); color: var(--rk-text-contrast-high); white-space: nowrap;
}
.rk-table thead th:is([aria-sort='ascending'], [aria-sort='descending']) { color: var(--rk-text-primary); }
.rk-table tbody tr { border-top: 1px solid var(--rk-text-contrast-low); }
.rk-table tbody tr:last-child { border-bottom: 1px solid var(--rk-text-contrast-low); }
.rk-table tbody :is(th, td) { height: var(--rk-row-height); }
.rk-table tbody th { font-weight: var(--rk-font-weight-semibold); }
.rk-table .rk-num { text-align: right; }
.rk-table .rk-check { width: calc(14px + 2 * var(--rk-space-s)); }
.rk-sort {
  display: inline-flex; align-items: center; gap: 6px; min-height: var(--rk-control-height); margin-block: calc(-1 * var(--rk-space-s)); padding: 0;
  border: 0; background: none; color: inherit; font: inherit; cursor: pointer; text-align: inherit;
}
/* Borders draw the triangle, so forced colours keep it. */
.rk-table th[aria-sort='ascending'] .rk-sort::after, .rk-table th[aria-sort='descending'] .rk-sort::after { content: ''; border: 4px solid transparent; }
.rk-table th[aria-sort='ascending'] .rk-sort::after { border-top-width: 0; border-bottom-color: currentColor; }
.rk-table th[aria-sort='descending'] .rk-sort::after { border-bottom-width: 0; border-top-color: currentColor; }
.rk-table-wrap { overflow-x: auto; overscroll-behavior-x: contain; }

/* Search and filters: a row above a list or table. The search field leads; each filter is a button that says what it
   keeps ("status: failed, done", or "status: any") and opens a menu of checkbox items; "clear filters" shows while
   anything is filtered. */
.rk-filters { display: flex; flex-wrap: wrap; align-items: center; gap: var(--rk-space-s); }
.rk-search { position: relative; flex: 1 1 14rem; max-width: 24rem; }
.rk-search > svg { position: absolute; left: 10px; top: 50%; width: 16px; height: 16px; transform: translateY(-50%); fill: none; stroke: currentColor; stroke-width: 1.6; color: var(--rk-text-contrast-high); pointer-events: none; }
.rk-search > .rk-input { padding-left: 32px; }
.rk-search > .rk-input::-webkit-search-cancel-button { cursor: pointer; }
/* A quiet button: same size, no frame, for a secondary action beside framed ones (clear filters). */
.rk-btn--quiet { border-color: transparent; color: var(--rk-text-contrast-high); }

/* Selection, the Metro way: a selected row or entry takes the accent fill (ink unless the product sets an accent)
   with on-accent text and a checkmark at its leading edge, no box. It nudges where it is pressed (data-rk-press):
   less than a tile, rows being long and low. Its colour changes after the nudge. The text tokens follow the fill,
   so tags, facts and links stay readable on it; a status square keeps its colour inside an on-accent ring. */
[data-rk-press]:not(.rk-tile) {
  transition: transform var(--rk-duration-short) var(--rk-ease-base), background-color var(--rk-duration-short) var(--rk-ease-base), color var(--rk-duration-short) var(--rk-ease-base);
  -webkit-tap-highlight-color: transparent; cursor: pointer;
}
[data-rk-press]:not(.rk-tile)[data-rk-pressed] {
  transform: perspective(var(--rk-turnstile-perspective)) rotateX(calc(var(--_rk-py, 0) * -1 * var(--rk-row-tilt))) rotateY(calc(var(--_rk-px, 0) * var(--rk-row-tilt))) scale(var(--rk-row-press-scale));
  transition-duration: var(--rk-duration-press);
}
[data-rk-select] > [aria-selected='true'], .rk-virtual-row[aria-selected='true'] {
  --rk-text-primary: var(--rk-on-accent); --rk-text-contrast-high: var(--rk-on-accent); --rk-text-contrast-medium: var(--rk-on-accent); --rk-text-contrast-low: transparent;
  background-color: var(--rk-accent); color: var(--rk-on-accent);
}
:is([data-rk-select] > [aria-selected='true'], .rk-virtual-row[aria-selected='true'], .rk-tree [aria-selected='true'] > .rk-tree-row) .rk-tag::before { box-shadow: 0 0 0 1px var(--rk-on-accent); }
[data-rk-select] > [aria-selected='true'] :is(.rk-check, .rk-mark)::before {
  content: ''; display: block; width: 11px; height: 6px; margin: 0 auto 3px;
  border-left: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg);
}
/* The whole item is the target, so its title link reads as its title; it keeps the link for a new tab. */
[data-rk-select] > * a[href] { color: inherit; text-decoration: none; }
[data-rk-select] > * a[href]:hover { text-decoration: underline; text-underline-offset: 3px; }
/* The checkmark draws in after the nudge, short stroke first. */
[data-rk-select] > [aria-selected='true'] :is(.rk-check, .rk-mark)::before, .rk-rows[data-rk-select] > li[aria-selected='true']::before {
  animation: rk-check var(--rk-duration-short) var(--rk-ease-in) var(--rk-duration-press) both;
}
@keyframes rk-check { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
[data-rk-select] > :focus-visible { outline: 2px solid var(--rk-focus); outline-offset: -2px; }
[data-rk-select] > [aria-selected='true']:focus-visible { outline-color: currentColor; outline-offset: -4px; }
/* A selectable list: each entry starts with a slot for the checkmark. */
.rk-rows[data-rk-select] > li { position: relative; padding-left: calc(14px + var(--rk-space-s)); padding-right: var(--rk-space-s); }
.rk-rows[data-rk-select] > li[aria-selected='true']::before {
  content: ''; position: absolute; left: var(--rk-space-xs); top: 50%; width: 11px; height: 6px; margin-top: -5px;
  border-left: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg);
}

/* While the selection mode lasts, the app bar carries the selection's count and actions instead of its own. */
.rk-ab-selection { display: none; flex: 1 1 auto; align-items: center; gap: var(--rk-space-xs); min-width: 0; }
.rk-appbar[data-rk-selecting] > :not(.rk-ab-selection) { display: none; }
.rk-appbar[data-rk-selecting] > .rk-ab-selection { display: flex; }
/* The bar changes its commands, as Metro's did: the selection's slide up into it, its own come back the same way. */
.rk-appbar[data-rk-selecting] > .rk-ab-selection, .rk-appbar[data-rk-unselecting] > :not(.rk-ab-selection) { animation: rk-ab-in var(--rk-duration-short) var(--rk-ease-in) both; }
@keyframes rk-ab-in { from { opacity: 0; transform: translateY(12px); } }
.rk-ab-count { margin-right: auto; font-size: var(--rk-font-size-xs); font-weight: var(--rk-font-weight-semibold); white-space: nowrap; }

/* Split ---------------------------------------------------------------------------------------------------------- */
/* A list and the detail of its current item. Sideways, side by side: each pane scrolls itself, divided by a hairline
   with an invisible 9px handle (role="separator") that thickens while hovered, focused or dragged. Compact, one pane
   at a time: rekta.js hides the other. */
.rk-split-handle { display: none; }
.rk-split-detail .rk-split-back { display: inline-flex; }

/* Floating surfaces ---------------------------------------------------------------------------------------------- */
/* Menus and lists that float next to their control: bg, a 1px text-contrast-medium edge, radius-s, no shadow. They
   live in the top layer (popover); rekta.js places them below the control, or above when there is no room. */
.rk-float {
  position: fixed; inset: auto; margin: 0; z-index: var(--rk-layer-float);
  min-width: 12rem; max-width: min(24rem, calc(100vw - 2 * var(--rk-space-m))); max-height: min(24rem, 60dvh); overflow-y: auto; overscroll-behavior: contain;
  padding: var(--rk-space-xs) 0; border: 1px solid var(--rk-text-contrast-medium); border-radius: var(--rk-radius-s);
  background: var(--rk-bg); color: var(--rk-text-primary); font: inherit; font-size: var(--rk-font-size-s); line-height: var(--rk-line-height-compact);
}
.rk-float:is(:popover-open, [data-rk-open]) { animation: rk-float-in var(--rk-duration-float) var(--rk-ease-in) both; }
.rk-float[data-rk-side='above'] { --_rk-from: 4px; }
@keyframes rk-float-in { from { opacity: 0; transform: translateY(var(--_rk-from, -4px)); } }
/* A menu: one item per row at the density's row height; a check for a chosen option, a key hint at the end. */
.rk-menu-item {
  display: flex; align-items: center; gap: var(--rk-space-s); width: 100%; min-height: var(--rk-row-height); padding: 0 var(--rk-space-m);
  border: 0; background: none; color: inherit; font: inherit; text-align: left; text-decoration: none; cursor: pointer; white-space: nowrap;
}
.rk-menu-item:focus-visible { outline: 2px solid var(--rk-focus); outline-offset: -2px; background-color: var(--rk-hover); }
.rk-menu-item[aria-disabled='true'] { color: var(--rk-disabled); cursor: not-allowed; }
.rk-menu-item[role='menuitemcheckbox']::before, .rk-menu-item[role='menuitemradio']::before { content: ''; flex: none; width: 10px; height: 10px; border: 1px solid currentColor; }
.rk-menu-item[aria-checked='true']::before { background: currentColor; }
.rk-menu-key { margin-left: auto; padding-left: var(--rk-space-l); font-size: var(--rk-font-size-xxs); color: var(--rk-text-contrast-high); }
.rk-menu-sep { height: 0; margin: var(--rk-space-xs) 0; border: 0; border-top: 1px solid var(--rk-text-contrast-low); }
/* Palette: go to a place or run a command. It rises from the app bar at every width, centred, up to 40rem wide;
   the active option (aria-selected) looks focused while focus stays in the input. */
.rk-palette { inset: auto 0 calc(var(--rk-appbar-height) + env(safe-area-inset-bottom) + var(--rk-space-s)); margin-inline: auto; width: min(40rem, calc(100% - 2 * var(--rk-space-m))); max-width: none; max-height: min(28rem, 70dvh); padding: 0; overflow: hidden; --_rk-from: 4px; }
.rk-palette:is(:popover-open, [data-rk-open]) { display: flex; flex-direction: column; }
.rk-palette > input { flex: none; border: 0; border-bottom: 1px solid var(--rk-text-contrast-low); border-radius: 0; min-height: calc(var(--rk-control-height) + var(--rk-space-s)); padding-inline: var(--rk-space-m); }
.rk-palette > input:focus-visible { outline: 0; border-color: var(--rk-text-contrast-medium); }
.rk-palette > :is(ul, ol) { flex: 1 1 auto; margin: 0; padding: var(--rk-space-xs) 0; overflow-y: auto; list-style: none; }
.rk-palette [role='option'][aria-selected='true'] { outline: 2px solid var(--rk-focus); outline-offset: -2px; background-color: var(--rk-hover); }
.rk-palette-empty { margin: 0 var(--rk-space-m); }
/* A key, as on the keyboard: in hints, the palette and the shortcut list. */
.rk-key { display: inline-block; min-width: 1.6em; padding: 0 4px; border: 1px solid var(--rk-text-contrast-medium); border-radius: var(--rk-radius-s); font-size: var(--rk-font-size-xxs); font-weight: var(--rk-font-weight-semibold); line-height: 1.5; text-align: center; color: var(--rk-text-primary); white-space: nowrap; }
.rk-menu-label { padding: var(--rk-space-s) var(--rk-space-m) var(--rk-space-xs); font-size: var(--rk-font-size-xs); font-weight: var(--rk-font-weight-semibold); color: var(--rk-text-contrast-high); }

/* Crumb: the way up from a place to its parent, first in the place's header. It is a link to the parent's address
   with data-rk-back: rekta.js goes back when the parent is the place below, else forward to it. The sideways
   window has no back in the app bar, so every place below the top has a crumb. */
.rk-crumb {
  display: inline-flex; align-items: center; gap: var(--rk-space-xs); min-height: var(--rk-control-height);
  color: var(--rk-text-contrast-high); font-size: var(--rk-font-size-xs); font-weight: var(--rk-font-weight-semibold); text-decoration: none;
  transition: color var(--rk-duration-short) var(--rk-ease-base);
}
.rk-crumb svg { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; }

/* Sheet ---------------------------------------------------------------------------------------------------------- */
/* A short question from the top edge; everything behind it stays where it was and does not scroll. A tap on the
   shading cancels (closedby="any", with a script fallback); with unsaved input, use closedby="closerequest". */
.rk-sheet {
  margin: 0 auto auto; width: min(32rem, 100%); max-width: 100%; max-height: calc(100dvh - var(--rk-space-xl)); overflow-y: auto; overscroll-behavior: contain;
  padding: var(--rk-space-l) var(--rk-space-m);
  border: 0; border-bottom: 1px solid var(--rk-text-contrast-low); border-radius: 0 0 var(--rk-radius-m) var(--rk-radius-m);
  background: var(--rk-bg); color: var(--rk-text-primary);
}
.rk-sheet[open] { animation: rk-from-top var(--rk-duration-short) var(--rk-ease-in) both; }
.rk-sheet::backdrop { background: var(--rk-shading); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.rk-sheet > * + *, .rk-sheet form > * + * { margin-top: var(--rk-space-m); }
.rk-sheet .rk-kicker + * { margin-top: var(--rk-space-xs); }
:root:has(dialog.rk-sheet[open]) { overflow: hidden; scrollbar-gutter: stable; }
.rk-scrim { position: fixed; inset: 0; background: var(--rk-shading); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
@keyframes rk-from-top { from { opacity: 0; transform: translateY(-16px); } }
/* Something that appears in place to say a thing (an error summary, a refusal, waiting updates): a fade and 8px. */
@keyframes rk-arrive { from { opacity: 0; transform: translateY(-8px); } }

/* Panorama ------------------------------------------------------------------------------------------------------- */
/* Compact: sections stack and the page scrolls. Sideways: sections side by side, each scrolling inside itself; the
   place gives the panorama a bounded height. */
.rk-panorama { padding-inline: var(--rk-space-m); }
.rk-sec { padding-block: var(--rk-space-l); }
.rk-sec + .rk-sec { border-top: 1px solid var(--rk-text-contrast-low); }
.rk-sec > * + * { margin-top: var(--rk-space-m); }
.rk-sec > .rk-kicker + * { margin-top: var(--rk-space-xs); }
/* Compact: a section strip that is a direct child of the place sticks under the banner. It never shrinks. A top-level
   strip (rk-pivot--nav) takes the facet level here: sticking, it holds less of a small screen. */
.rk-place > .rk-pivot {
  flex: none;
  position: sticky; top: var(--rk-banner-h, 0px); z-index: var(--rk-layer-sticky);
  padding-inline: var(--rk-space-m); background: var(--rk-bg); border-bottom: 1px solid var(--rk-text-contrast-low);
}
.rk-place > .rk-pivot--nav { --_rk-inactive: var(--rk-font-size-pivot-inactive); }
.rk-place > .rk-pivot--nav > :is(a, button) { font-size: var(--rk-font-size-pivot-active); }

/* Feedback: toast and status banner ------------------------------------------------------------------------------ */
/* An event is ink and leaves; a state is a tile and stays.
   Toast: one ink strip for something that just happened. With undo, its window closes as a 2px line and a tabular
   figure, once a second. Sideways it hangs from the top centre (space-m below a standing banner, no lower than
   mid-screen); compact it rises from the app bar, within the thumb's reach. Enters 12px from its edge over
   duration-short and leaves the same way, reversed.
   Status banner: a lasting system state on its status-*-tile fill across the top, the state word large and light
   in a column one tile-unit wide, so the sentence starts on tile column 2. It fades in 8px once per state, the place
   below moving with it, then holds still. Both draw a transparent outline that only forced colours show. */

/* Toast region: always mounted, empty when idle; it is the live region. Place it after the content whose actions
   raise toasts, so the next Tab reaches undo. One cell: a new toast is inserted once the old one has left. */
.rk-toasts {
  --_rk-from: -12px;
  position: fixed; inset: min(calc(var(--rk-banner-h, 0px) + env(safe-area-inset-top, 0px) + var(--rk-space-m)), 50dvh) 0 auto; z-index: var(--rk-layer-toast);
  display: grid; grid-template-columns: minmax(0, 1fr); align-items: start; padding-inline: var(--rk-space-m); pointer-events: none;
}
@supports (anchor-name: --a) {
  .rk-toasts { top: min(calc(anchor(--rk-banner bottom, 0px) + var(--rk-space-m)), 50dvh); }
}
.rk-toast {
  position: relative; display: flex; align-items: stretch;
  min-height: calc(var(--rk-control-height) + var(--rk-space-xs)); overflow: hidden; border-radius: var(--rk-radius-s);
  outline: 1px solid transparent; outline-offset: -1px;
  background: var(--rk-text-primary); color: var(--rk-bg); pointer-events: auto;
  animation: rk-toast-in var(--rk-duration-short) var(--rk-ease-in) both;
}
.rk-toasts > .rk-toast { grid-area: 1 / 1; }
.rk-toast[data-rk-phase='leaving'] { pointer-events: none; animation: rk-toast-out var(--rk-duration-short) var(--rk-ease-in) reverse both; }
.rk-toast-msg { flex: 1 1 auto; align-self: center; min-width: 0; padding: calc(var(--rk-space-s) + var(--rk-space-xs)) var(--rk-space-m); text-wrap: pretty; }
.rk-toast-act {
  position: relative; flex: none; display: inline-flex; align-items: center; gap: var(--rk-space-s);
  min-width: var(--rk-control-height); padding: 0 var(--rk-space-m); border: 0; background: none; color: inherit;
  font: inherit; font-weight: var(--rk-font-weight-semibold); cursor: pointer;
  transition: background-color var(--rk-duration-short) var(--rk-ease-base);
}
/* A divider at the progress track's 20%, inset clear of the line beneath; borders, so forced colours keep them. */
.rk-toast-act::before {
  content: ''; position: absolute; inset: calc(var(--rk-space-s) + var(--rk-space-xs)) auto calc(var(--rk-space-s) + var(--rk-space-xs)) 0;
  border-left: 1px solid color-mix(in srgb, currentColor 20%, transparent);
}
.rk-toast-act:active { background-color: var(--rk-hover); }
.rk-toast-act:focus-visible { outline: 2px solid currentColor; outline-offset: -10px; }
.rk-toast-count { min-width: 1ch; font-weight: var(--rk-font-weight-medium); font-variant-numeric: tabular-nums; }
/* The undo window: 2px, inset space-xs, anchored under the action. rekta.js steps --_rk-left from 1 to 0 once a
   second with the figure; each step glides like a live bar. */
.rk-toast-line {
  position: absolute; inset: auto var(--rk-space-xs) var(--rk-space-xs); border-top: 2px solid; pointer-events: none;
  transform: scaleX(var(--_rk-left, 1)); transform-origin: right;
  transition: transform var(--rk-duration-long) var(--rk-ease-in);
}
.rk-toast-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@keyframes rk-toast-in { from { opacity: 0; transform: translateY(var(--_rk-from)); visibility: hidden; } }
@keyframes rk-toast-out { from { opacity: 0; transform: translateY(var(--_rk-from)); visibility: hidden; } }

/* Status banner: in flow at the top of the app root, sticky under the safe area, full bleed. No radius, border or
   shadow on a fill; the neutral state takes a hairline so it parts from bg. Mounted once; data-rk-phase="clear" when
   no state stands (no height, live regions still in the tree, so the next state is announced). */
.rk-banner {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: var(--rk-layer-banner); anchor-name: --rk-banner; flex: none; min-height: 0;
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--rk-space-m) var(--rk-space-l);
  padding: var(--rk-space-m); overflow: clip; outline: 1px solid transparent; outline-offset: -1px;
  background-color: var(--_rk-fill, var(--rk-surface)); color: var(--rk-text-primary);
  animation: rk-banner-in var(--rk-duration-short) var(--rk-ease-in) both;
}
.rk-banner:not([data-status]) { border-bottom: 1px solid var(--rk-text-contrast-low); }
.rk-banner[data-rk-phase='leaving'] { pointer-events: none; animation: rk-banner-out var(--rk-duration-short) var(--rk-ease-in) reverse both; }
.rk-banner[data-rk-phase='clear'] { height: 0; padding-block: 0; border: 0; outline: 0; animation: none; transition: none; }
.rk-banner[data-rk-phase='clear'] > .rk-actions { display: none; }
/* Two live regions (alert, status); the one in use lays out word column and sentence, the other stays empty. Wrap
   points come from the grid; word, sentence and action share a first baseline. */
.rk-banner-live { flex: 1 1 calc(3 * var(--rk-tile-unit) + 2 * var(--rk-space-s)); min-width: 0; }
.rk-banner-live > * { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--rk-space-s); }
.rk-banner-head { flex: none; min-width: var(--rk-tile-unit); }
.rk-banner-word { display: block; font-size: var(--rk-font-size-l); font-weight: var(--rk-font-weight-light); line-height: var(--rk-line-height-tight); }
.rk-banner-time { display: block; margin-top: var(--rk-space-xs); font-size: var(--rk-font-size-xs); font-variant-numeric: tabular-nums; }
.rk-banner-msg { flex: 1 1 calc(2 * var(--rk-tile-unit) + var(--rk-space-s)); max-width: calc(4 * var(--rk-tile-unit) + 3 * var(--rk-space-s)); text-wrap: pretty; }
.rk-banner[data-status] :focus-visible { outline-color: currentColor; }
@keyframes rk-banner-in { from { opacity: 0; transform: translateY(-8px); } }
@keyframes rk-banner-out { from { opacity: 0; transform: translateY(-8px); } }
@supports (interpolate-size: allow-keywords) {
  .rk-banner { interpolate-size: allow-keywords; transition: height var(--rk-duration-short) var(--rk-ease-in), padding-block var(--rk-duration-short) var(--rk-ease-in); }
  @keyframes rk-banner-out { from { opacity: 0; transform: translateY(-8px); height: 0; padding-block: 0; } }
}

/* Place change --------------------------------------------------------------------------------------------------- */
/* A tile that links to another view turns the place around its leading edge (Metro's turnstile), a page turned in a
   book. Leaving, each part in view swings toward the viewer, gathering speed, by --_rk-turn-out; it stays whole for
   the first 40% of its time, so the swing reads, then fades. The pressed tile keeps its press and goes last, from its
   pressed pose. Arriving, each part of the new place swings in from --_rk-turn-in, fast at first, whole after the
   first third. Each part's heft grows with its area: a line of text about 0.6, a tile 0.8, a wide tile 1.0, a table
   up to 1.4. It sets both when the part starts, (heft - 0.5) x 6 x duration-stagger after the turn begins, and how
   long it takes, the token's time (duration-short leaving, duration-moderate arriving) x heft: light parts go first
   and quickest, heavy ones later and slower, as a light thing starts and stops sooner than a heavy one. Parts that
   weigh the same follow one another in reading order, half a duration-stagger apart, six steps at most. An arriving part lands with a trace of speed left and fills backwards
   only, so its motion, its animation and its layer end in the same frame: nothing settles afterwards. Back runs the
   other way round. rekta.js sets data-rk-turn and the part's --_rk-turn-origin, --_rk-turn-oy, --_rk-turn-delay,
   --_rk-turn-duration and --_rk-turn-perspective. */
:root { --_rk-turn-out: 60deg; --_rk-turn-in: 70deg; --_rk-ease-turn-out: cubic-bezier(0.35, 0, 0.65, 0.6); --_rk-ease-turn-in: cubic-bezier(0.22, 0.9, 0.6, 0.98); }
[data-rk-turn='out'], [data-rk-turn='back-out'], [data-rk-turn='pressed'] {
  transform-origin: var(--_rk-turn-origin, 0px) var(--_rk-turn-oy, 50%); pointer-events: none;
  animation: rk-turn-out var(--_rk-turn-duration, var(--rk-duration-short)) var(--_rk-ease-turn-out) var(--_rk-turn-delay, 0ms) both;
}
[data-rk-turn='back-out'] { animation-name: rk-turn-back-out; }
[data-rk-turn='pressed'] { animation-name: rk-turn-pressed; }
/* doubled, so a tile's build-in gives way to its turn */
[data-rk-turn][data-rk-turn='in'], [data-rk-turn][data-rk-turn='back-in'] {
  transform-origin: var(--_rk-turn-origin, 0px) var(--_rk-turn-oy, 50%);
  animation: rk-turn-in var(--_rk-turn-duration, var(--rk-duration-moderate)) var(--_rk-ease-turn-in) var(--_rk-turn-delay, 0ms) backwards;
}
[data-rk-turn][data-rk-turn='back-in'] { animation-name: rk-turn-back-in; }
@keyframes rk-turn-out {
  from { transform: translate(var(--_rk-turn-snap, 0px)) perspective(var(--_rk-turn-perspective, var(--rk-turnstile-perspective))) rotateY(0deg); }
  40% { opacity: 1; }
  to { opacity: 0; transform: translate(var(--_rk-turn-snap, 0px)) perspective(var(--_rk-turn-perspective, var(--rk-turnstile-perspective))) rotateY(calc(-1 * var(--_rk-turn-out))); }
}
@keyframes rk-turn-back-out {
  from { transform: translate(var(--_rk-turn-snap, 0px)) perspective(var(--_rk-turn-perspective, var(--rk-turnstile-perspective))) rotateY(0deg); }
  40% { opacity: 1; }
  to { opacity: 0; transform: translate(var(--_rk-turn-snap, 0px)) perspective(var(--_rk-turn-perspective, var(--rk-turnstile-perspective))) rotateY(var(--_rk-turn-out)); }
}
@keyframes rk-turn-pressed {
  from { transform-origin: 50% 50%; }
  40% { opacity: 1; }
  to { opacity: 0; transform-origin: var(--_rk-turn-origin, 0px) var(--_rk-turn-oy, 50%); transform: perspective(var(--_rk-turn-perspective, var(--rk-turnstile-perspective))) rotateX(0deg) rotateY(calc(-1 * var(--_rk-turn-out))) scale(1); }
}
/* the end keeps the snap: the last frames sit on the pixels the part rests on */
@keyframes rk-turn-in {
  from { opacity: 0; transform: translate(var(--_rk-turn-snap, 0px)) perspective(var(--_rk-turn-perspective, var(--rk-turnstile-perspective))) rotateY(var(--_rk-turn-in)); }
  35% { opacity: 1; }
  to { transform: translate(var(--_rk-turn-snap, 0px)) perspective(var(--_rk-turn-perspective, var(--rk-turnstile-perspective))) rotateY(0deg); }
}
@keyframes rk-turn-back-in {
  from { opacity: 0; transform: translate(var(--_rk-turn-snap, 0px)) perspective(var(--_rk-turn-perspective, var(--rk-turnstile-perspective))) rotateY(calc(-1 * var(--_rk-turn-in))); }
  35% { opacity: 1; }
  to { transform: translate(var(--_rk-turn-snap, 0px)) perspective(var(--_rk-turn-perspective, var(--rk-turnstile-perspective))) rotateY(0deg); }
}

/* Input-dependent rules ------------------------------------------------------------------------------------------ */
/* Hover tints only where hover exists: on touch they would stick after a tap. */
@media (hover: hover) {
  .rk :where(a):hover { text-decoration-thickness: 2px; }
  a.rk-tile:hover, button.rk-tile:hover { --_rk-tint: var(--rk-hover); }
  .rk-pivot > :hover { color: var(--rk-text-primary); }
  .rk-btn:hover { background-color: var(--rk-hover); }
  .rk-btn--primary:hover { background-color: var(--rk-accent); background-image: linear-gradient(var(--rk-hover), var(--rk-hover)); }
  .rk-btn:disabled:hover, .rk-btn[aria-disabled='true']:hover { background: none; }
  .rk-input:hover:not(:disabled) { border-color: var(--rk-text-primary); }
  .rk-ab:hover { background-color: var(--rk-hover); }
  .rk-crumb:hover { color: var(--rk-text-primary); }
  .rk-menu-item:hover:not([aria-disabled='true']) { background-color: var(--rk-hover); }
  .rk-table tbody tr:has(a, input, button):hover, [data-rk-select] > :hover { background-image: linear-gradient(var(--rk-hover), var(--rk-hover)); }
  .rk-sort:hover { color: var(--rk-text-primary); }
  .rk-btn--quiet:hover { color: var(--rk-text-primary); }
  .rk-split-handle:hover::after { width: 2px; background-color: var(--rk-text-contrast-medium); }
  .rk-toast-act:hover { background-color: var(--rk-hover); }
  .rk-segments > label:hover:not(:has(> input:checked, > input:disabled)) { background-color: var(--rk-hover); }
  .rk-stepper > [data-rk-step]:hover:not([aria-disabled='true']), .rk-combo-btn:hover { background-color: var(--rk-hover); }
  .rk-drop:hover { border-color: var(--rk-text-primary); color: var(--rk-text-primary); }
  .rk-tree-row:hover, .rk-virtual-row:hover { background-image: linear-gradient(var(--rk-hover), var(--rk-hover)); }
  .rk-grip:hover { color: var(--rk-text-primary); }
  .rk-col-handle:hover::after { width: 2px; background: var(--rk-text-contrast-medium); }
  .rk-table td[data-rk-edit]:hover:not([data-rk-editing]) { text-decoration: underline dotted; text-underline-offset: 3px; }
}
/* A fine pointer can select text inside tiles and rows (dragging never activates them: rekta.js); touch gets no
   text selection and no long-press callout on them. */
@media (pointer: fine) { .rk-tile, .rk-rows :is(a, button) { user-select: text; } }
@media (hover: none) { .rk-tile, .rk-rows :is(a, button) { user-select: none; -webkit-touch-callout: none; } }

/* Forced colours drop fills: tiles keep an edge, marks keep their square, the meter keeps its track and value. */
@media (forced-colors: active) {
  .rk-tile { outline: 1px solid CanvasText; outline-offset: -1px; }
  .rk-tag::before, .rk-pulse, .rk-field[data-status='error'] .rk-hint::before { forced-color-adjust: none; background: CanvasText; }
  .rk-progress { forced-color-adjust: none; color: CanvasText; border: 1px solid CanvasText; }
  .rk-region[aria-busy='true']::before, .rk-btn[data-rk-pending]::after, .rk-empty[data-status='error'] > :first-child::before { forced-color-adjust: none; background: CanvasText; }
  .rk-ghost { forced-color-adjust: none; background: GrayText; }
  .rk-float { border-color: CanvasText; }
  .rk-errors > p::before { forced-color-adjust: none; background: CanvasText; }
  [data-rk-select] > [aria-selected='true'] { forced-color-adjust: none; background-color: Highlight; color: HighlightText; }
  .rk-split-handle::after { background: CanvasText; }
  .rk-toggle-track { forced-color-adjust: none; border-color: CanvasText; background-image: linear-gradient(Highlight, Highlight); }
  .rk-toggle-track::after { background: CanvasText; }
  .rk-segments > label:has(> input:checked) { forced-color-adjust: none; border-color: Highlight; background-color: Highlight; color: HighlightText; }
  .rk-range::-webkit-slider-runnable-track { background: linear-gradient(Highlight, Highlight) 0 / var(--_rk-v) 100% no-repeat, GrayText; }
  .rk-range::-webkit-slider-thumb { background: CanvasText; }
  .rk-tip, .rk-cell-error { border: 1px solid CanvasText; }
  .rk-meter { forced-color-adjust: none; border: 1px solid CanvasText; background: Canvas; }
  .rk-meter::before, .rk-dots > i { forced-color-adjust: none; background: CanvasText; }
  .rk-chart .rk-s0, .rk-chart .rk-s1 { forced-color-adjust: none; --_rk-series: CanvasText; }
  .rk-chart .rk-s1 { stroke-dasharray: 4 3; }
  .rk-virtual-row[aria-selected='true'], .rk-tree [aria-selected='true'] > .rk-tree-row { forced-color-adjust: none; background-color: Highlight; color: HighlightText; }
  .rk-grip::before { forced-color-adjust: none; background: CanvasText; }
  [data-rk-live='stale'] .rk-age::before, [data-rk-live='offline'] .rk-age::before { forced-color-adjust: none; background: CanvasText; }
}

/* Window-size classes -------------------------------------------------------------------------------------------- */
/* Short viewports (400% zoom, a landscape phone, a short window) are compact: nothing sticks to the top. */
@media (max-height: 480px) {
  .rk-banner, .rk-place > .rk-pivot { position: static; }
  :root { scroll-padding-top: 0; }
}
/* Compact viewport: toasts rise from the app bar. */
@media (max-width: 759.98px), (max-height: 480px) {
  .rk-side { grid-template-columns: minmax(0, 1fr); row-gap: var(--rk-space-m); }
  .rk-pivot--side { flex-direction: row; align-items: baseline; gap: var(--rk-space-l); overflow-x: auto; padding-inline-end: 0; }
  .rk-pivot--side > :is(a, button) {
    --_rk-s: var(--rk-pivot-scale, 0.6); transform: scale(var(--_rk-s)); margin-inline-end: calc(var(--_rk-w, 0px) * (var(--_rk-s) - 1));
    transition: transform var(--rk-duration-pivot-size) ease-in-out, margin-inline-end var(--rk-duration-pivot-size) ease-in-out, color var(--rk-duration-short) var(--rk-ease-base);
  }
  .rk-pivot--side > :is([aria-current], [aria-selected='true']) { --_rk-s: 1; }
  .rk-toasts { --_rk-from: 12px; inset: auto 0 calc(var(--rk-appbar-height) + env(safe-area-inset-bottom) + var(--rk-space-s)); top: auto; }
  @supports (anchor-name: --a) { .rk-toasts { top: auto; } }
}
/* Sideways viewport: chrome at desktop scale. */
@media (min-width: 760px) and (min-height: 481px) {
  .rk-appbar { padding-inline: var(--rk-space-xl); }
  .rk-ab-back { display: none; }
  .rk-ab-k { position: static; width: auto; height: auto; overflow: visible; clip-path: none; }
  .rk-sheet { padding-inline: var(--rk-space-xl); }
  .rk-toasts { justify-items: center; }
  .rk-toast { max-width: 32rem; }
  .rk-banner { padding-inline: var(--rk-space-xl); }
}
/* The live state's word shows at every width. */
.rk-ab-status .rk-ab-k { position: static; width: auto; height: auto; overflow: visible; clip-path: none; }
/* Narrow place: table rows stack. Check (if any), main cell and status on the first line, the other cells as
   "label value" below, labelled from data-label (rekta.js fills it from the head). The head becomes a row of sort
   buttons. Decided by the place's width, not the viewport's height: a wide, short window still has room. */
@container rk (max-width: 759.98px) {
  .rk-table, .rk-table :is(thead, tbody, tr, th, td) { display: block; }
  .rk-table tr { position: relative; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px var(--rk-space-m); }
  .rk-table tr:has(> .rk-check) { padding-left: calc(14px + var(--rk-space-m)); padding-right: var(--rk-space-s); }
  .rk-table .rk-check { position: absolute; left: var(--rk-space-xs); top: var(--rk-space-m); width: 14px; padding: 0; }
  .rk-table thead tr { padding-block: var(--rk-space-xs); border-bottom: 1px solid var(--rk-text-contrast-low); }
  .rk-table thead th { position: static; padding: 0; border: 0; background: none; }
  .rk-table thead th:not([aria-sort]):not(.rk-check) { display: none; }
  .rk-table thead tr:has(> .rk-check) { padding-left: 0; }
  .rk-table thead .rk-check { display: none; }
  .rk-table tbody tr { padding-block: var(--rk-space-s); }
  .rk-table tbody :is(th, td) { height: auto; padding: 0; }
  .rk-table tbody th { order: 1; flex: 1 1 0; min-width: 50%; }
  .rk-table tbody td:has(> .rk-tag) { order: 2; margin-left: auto; }
  .rk-table tbody tr::before { content: ''; order: 3; flex: 0 0 100%; }
  .rk-table tbody td:not(.rk-check):not(:has(> .rk-tag)) { order: 4; font-size: var(--rk-font-size-xs); color: var(--rk-text-contrast-high); text-align: left; }
  .rk-table tbody td[data-label]:not(.rk-check):not(:has(> .rk-tag))::before { content: attr(data-label) ' '; color: var(--rk-text-contrast-medium); }
}

/* Sideways place: decided by the place's own width (a pane in a split decides by its pane) and the viewport height. */
@container rk (min-width: 760px) {
  @media (min-height: 481px) {
    .rk-tiles { grid-template-columns: repeat(auto-fill, var(--rk-tile-unit)); grid-auto-rows: var(--rk-tile-unit); }
    .rk-panorama {
      display: flex; gap: var(--rk-space-xl); min-height: 0; padding-inline: var(--rk-space-xl);
      overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scroll-padding-inline: var(--rk-space-xl); scroll-behavior: smooth;
      scrollbar-width: thin; scrollbar-color: var(--rk-text-contrast-low) transparent;
    }
    /* Sections are sized in tile units; more width shows more sections, never wider ones. */
    .rk-sec { flex: 0 0 var(--rk-sec-w, calc(3 * var(--rk-tile-unit) + 2 * var(--rk-space-s) + 2 * var(--rk-space-xl))); overflow-x: hidden; overflow-y: auto; scrollbar-width: thin; padding-right: var(--rk-space-s); }
    .rk-sec + .rk-sec { border-top: 0; }
    /* A table head sticks to the section's top edge, not below its padding. */
    .rk-sec .rk-table thead th { top: calc(-1 * var(--rk-space-l)); }
    /* Lets the last section reach the left edge; gone when everything fits. */
    .rk-panorama-end { flex: 0 0 max(0px, calc(100% - var(--rk-sec-w, calc(3 * var(--rk-tile-unit) + 2 * var(--rk-space-s) + 2 * var(--rk-space-xl))) - var(--rk-space-xl))); }
    .rk-panorama[data-rk-fit] > .rk-panorama-end { display: none; }
    .rk-place > .rk-pivot { position: static; padding-inline: var(--rk-space-xl); background: none; border-bottom: 0; }
    .rk-place > .rk-pivot--nav { --_rk-inactive: var(--rk-font-size-nav-inactive); }
    .rk-place > .rk-pivot--nav > :is(a, button) { font-size: var(--rk-font-size-nav-active); }
    .rk-split {
      display: grid; min-height: 0;
      grid-template-columns: minmax(var(--rk-pane-min), var(--rk-split-w, calc(4 * var(--rk-tile-unit) + 3 * var(--rk-space-s)))) 1px minmax(var(--rk-pane-min), 1fr);
    }
    .rk-split > :is(.rk-split-list, .rk-split-detail) { min-width: 0; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
    .rk-split-handle { display: block; position: relative; z-index: 2; width: 9px; margin-inline: -4px; cursor: col-resize; touch-action: none; }
    .rk-split-handle::after {
      content: ''; position: absolute; inset: 0 auto 0 50%; width: 1px; transform: translateX(-50%); background: var(--rk-text-contrast-low);
      transition: width var(--rk-duration-short) var(--rk-ease-base), background-color var(--rk-duration-short) var(--rk-ease-base);
    }
    .rk-split-handle:focus-visible::after, .rk-split-handle[data-rk-dragging]::after { width: 2px; background-color: var(--rk-text-contrast-medium); }
    .rk-split-handle:focus-visible { outline-offset: -2px; }
    .rk-split-detail .rk-split-back { display: none; }
    .rk-table-wrap { overflow-x: visible; }
  }
}
@media (min-width: 2560px) {
  .rk { --rk-tile-unit: var(--rk-tile-unit-ultrawide); }
}

/* A change of the whole look (theme) cross-fades over duration-short (rekta.js starts a view transition). */
::view-transition-old(root), ::view-transition-new(root) { animation-duration: var(--rk-duration-short); animation-timing-function: var(--rk-ease-base); }

/* Reduced motion: the tokens zero every duration; these are the parts that are not durations. */
@media (prefers-reduced-motion: reduce) {
  :root:not([data-motion='on']) :is(.rk-panorama, .rk-pivot) { scroll-behavior: auto; }
  :root:not([data-motion='on']) .rk-pulse { animation: none; }
  :root:not([data-motion='on']) .rk-tile[data-rk-pressed] { transform: scale(var(--rk-tile-press-scale)); }
  :root:not([data-motion='on']) [data-rk-press]:not(.rk-tile)[data-rk-pressed] { transform: scale(var(--rk-row-press-scale)); }
  :root:not([data-motion='on']) .rk-region[aria-busy='true']::before, :root:not([data-motion='on']) .rk-btn[data-rk-pending]::after { background-size: 100% 100%; background-color: var(--rk-text-contrast-medium); background-image: none; }
  :root:not([data-motion='on']) .rk-dots > i { animation: none; opacity: 1; left: calc(50% - 22px + var(--_rk-n, 0) * 10px); }
  :root:not([data-motion='on']) .rk-progress:indeterminate { animation: none; background-size: 100% 100%; }
}
:root[data-motion='off'] :is(.rk-panorama, .rk-pivot) { scroll-behavior: auto; }
:root[data-motion='off'] .rk-pulse { animation: none; }
:root[data-motion='off'] .rk-tile[data-rk-pressed] { transform: scale(var(--rk-tile-press-scale)); }
:root[data-motion='off'] [data-rk-press]:not(.rk-tile)[data-rk-pressed] { transform: scale(var(--rk-row-press-scale)); }
:root[data-motion='off'] .rk-region[aria-busy='true']::before, :root[data-motion='off'] .rk-btn[data-rk-pending]::after { background-size: 100% 100%; background-color: var(--rk-text-contrast-medium); background-image: none; }
:root[data-motion='off'] .rk-dots > i { animation: none; opacity: 1; left: calc(50% - 22px + var(--_rk-n, 0) * 10px); }
:root[data-motion='off'] .rk-progress:indeterminate { animation: none; background-size: 100% 100%; }