/* onlyati-ui core stylesheet. Everything sits in the `onlyati` cascade layer, so an app's own
   unlayered CSS always wins without specificity fights. Tokens come from tokens.css.

   Responsiveness: phone < 600px, tablet 600–1023px, desktop >= 1024px. Page chrome (app bar,
   windows flattening, toasts) uses viewport media queries; components that live inside panes
   (tables, forms, split views) use container queries so they adapt to the space they get. */

@layer onlyati {
  /* ---------- base ---------- */
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }

  body {
    margin: 0;
    min-height: 100vh;
    background: var(--bg-canvas);
    color: var(--text-primary);
    font-family: var(--font-body);
    font-size: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
    line-height: 1.55;
    overflow-wrap: break-word;
  }

  a {
    color: var(--accent-primary);
    text-underline-offset: 0.15em;
  }

  :focus-visible {
    outline: 2px solid var(--accent-primary);
    outline-offset: 2px;
  }

  /* .link: a quiet link for contexts that already signal interactivity (a table row, a list
     item); it underlines only on hover/focus. Prose links (.markdown-body a) always underline. */
  .link {
    text-decoration: none;
  }

  .link:hover,
  .link:focus-visible {
    text-decoration: underline;
  }

  h1,
  h2,
  h3,
  h4 {
    text-wrap: balance;
    font-weight: 700;
    margin: 0;
    line-height: 1.25;
  }

  h1 {
    font-size: clamp(1.6rem, 1.35rem + 1.2vw, 2.1rem);
    letter-spacing: -0.01em;
  }

  h2 {
    font-size: clamp(1.2rem, 1.1rem + 0.5vw, 1.4rem);
  }

  h3 {
    font-size: 1.05rem;
  }

  h4 {
    font-size: 0.95rem;
  }

  p,
  ul,
  ol,
  dl,
  figure {
    margin: 0;
  }

  code,
  kbd,
  samp,
  .mono {
    font-family: var(--font-mono);
    font-size: 0.9em;
  }

  mark {
    background: var(--highlight-yellow);
    color: var(--text-primary);
    padding: 0 3px;
    border-radius: 3px;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
  }

  mark.alt {
    background: var(--highlight-peach);
  }

  hr {
    border: 0;
    border-top: 1px solid var(--border-muted);
    margin: 0;
    width: 100%;
  }

  img,
  svg,
  video {
    max-width: 100%;
  }

  /* arrows and chevrons point the other way in right-to-left text (Icon adds .icon-dir) */
  :dir(rtl) svg.icon-dir {
    transform: scaleX(-1);
  }

  svg.icon {
    width: 1.1em;
    height: 1.1em;
    flex: none;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    vertical-align: -0.15em;
  }

  .visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .skip-link {
    position: absolute;
    inset-inline-start: var(--sp-4);
    top: -100px;
    z-index: 50;
    background: var(--accent-primary);
    color: var(--accent-primary-ink);
    padding: var(--sp-2) var(--sp-4);
    border-radius: var(--radius-control);
  }

  .skip-link:focus {
    top: var(--sp-2);
  }

  /* ---------- layout helpers ---------- */
  .row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-3);
    align-items: center;
  }

  .row.end {
    justify-content: flex-end;
  }

  .row.between {
    justify-content: space-between;
  }

  .vstack {
    display: flex;
    flex-direction: column;
    gap: var(--sp-4);
  }

  .vstack.tight {
    gap: var(--sp-2);
  }

  .spacer {
    flex: 1;
  }

  .muted,
  .meta {
    color: var(--text-secondary);
  }

  .meta {
    font-size: 0.9rem;
  }

  .lead {
    color: var(--text-secondary);
    max-width: var(--measure);
    font-size: 1.05rem;
  }

  .prose {
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
    max-width: var(--measure);
  }

  .eyebrow {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--accent-primary);
  }

  /* ---------- app bar ---------- */
  /* A slim light bar floating over the page like a window: inset from the viewport edges and
     aligned to the content column. Below desktop width it flattens to a full-width bar and the
     nav + account collapse into a native popover sheet (no JS). */
  .appbar {
    position: sticky;
    top: var(--sp-3);
    z-index: 10;
    min-height: var(--appbar-height);
    width: calc(100% - 2 * var(--sp-4));
    max-width: calc(var(--content-max) - 2 * var(--sp-4));
    margin: var(--sp-3) auto 0;
    background: var(--bg-surface);
    color: var(--text-primary);
    border: 1px solid var(--border-muted);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-window);
  }

  .appbar-inner {
    min-height: var(--appbar-height);
    padding-inline: var(--sp-4);
    display: flex;
    align-items: center;
    gap: var(--sp-4);
  }

  .appbar .brand {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    min-width: 0;
    font-weight: 700;
    font-size: 1.05rem;
    color: inherit;
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .appbar-menu {
    display: contents;
  }

  .appbar-menu-btn {
    display: none;
  }

  .appbar-nav {
    display: flex;
    gap: var(--sp-1);
  }

  .appbar-nav a {
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 0.9rem;
    padding: var(--sp-2) var(--sp-3);
    border-radius: var(--radius-control);
    white-space: nowrap;
  }

  .appbar-nav a:hover {
    background: var(--bg-surface-alt);
    color: var(--text-primary);
  }

  .appbar-nav a[aria-current="page"] {
    color: var(--text-primary);
    background: var(--bg-surface-alt);
    font-weight: 700;
  }

  .appbar-account {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
  }

  .appbar-account form {
    display: flex;
  }

  .profile-link {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    color: inherit;
    text-decoration: none;
  }

  .profile-name {
    display: none;
  }

  /* ---------- page ---------- */
  .page-main {
    max-width: var(--content-max);
    margin-inline: auto;
    padding-inline: var(--sp-4);
    padding-block: var(--sp-8) 64px;
    display: flex;
    flex-direction: column;
    gap: 40px;
  }

  .page-header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--sp-3) var(--sp-6);
  }

  .page-header-text {
    display: flex;
    flex-direction: column;
    gap: var(--sp-1);
    min-width: 0;
  }

  .page-header-text p {
    color: var(--text-secondary);
    max-width: var(--measure);
  }

  .section {
    display: flex;
    flex-direction: column;
    gap: var(--sp-4);
  }

  .section-head {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--sp-3);
  }

  /* ---------- avatar ---------- */
  /* A single character in a rounded rectangle (same radius as buttons), not a circle. */
  .avatar {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-control);
    background: var(--accent-special);
    color: var(--text-on-fill);
    display: inline-grid;
    place-items: center;
    flex: none;
    font-size: 0.85rem;
    font-weight: 700;
    text-decoration: none;
  }

  .avatar.lg {
    width: 48px;
    height: 48px;
    font-size: 1.2rem;
  }

  img.avatar {
    object-fit: cover;
    background: var(--bg-surface-alt);
  }

  .avatar-group {
    display: inline-flex;
  }

  .avatar-group .avatar {
    border: 2px solid var(--bg-canvas);
  }

  .avatar-group > * + * {
    margin-inline-start: -8px;
  }

  .avatar-group > span:has(> .avatar) {
    display: inline-flex;
  }

  /* ---------- windows ---------- */
  /* A static window-style box: hairline border, card radius, soft pronounced shadow and a slim
     dark title strip. Not movable or resizable, it's only styling. On phones it flattens into a
     full-width section with a plain heading. */
  .window {
    width: 100%;
    min-width: 0;
    border: 1px solid var(--border-muted);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-window);
    overflow: clip;
    background: var(--bg-surface);
    container-type: inline-size;
  }

  .window-title {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--sp-2);
    min-height: 40px;
    padding: var(--sp-2) var(--sp-4);
    background: var(--bg-window-title);
    color: var(--text-on-window-title);
  }

  .window-title h1,
  .window-title h2,
  .window-title h3 {
    font-size: 0.95rem;
    color: inherit;
    margin-inline-end: auto;
  }

  .window-title .btn.secondary,
  .window-title .badge {
    border-color: var(--border-on-chrome);
    background: transparent;
    color: var(--text-on-window-title);
  }

  .window-title .btn.primary {
    background: var(--text-on-window-title);
    color: var(--bg-window-title);
  }

  .window-title .btn.secondary:hover {
    background: var(--hover-on-chrome);
  }

  .window-title :focus-visible {
    outline-color: var(--text-on-window-title);
  }

  .window-body {
    padding: var(--sp-6);
    display: flex;
    flex-direction: column;
    gap: var(--sp-4);
    min-width: 0;
  }

  .window-body.flush {
    padding: 0;
  }

  .window-body.compact {
    padding: var(--sp-4);
    gap: var(--sp-3);
  }

  .window-footer {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: var(--sp-2);
    padding: var(--sp-3) var(--sp-6);
    border-top: 1px solid var(--border-muted);
  }

  .window.narrow {
    max-width: 440px;
    margin-inline: auto;
  }

  /* ---------- split view ---------- */
  /* Sidebar + content pane side by side, each its own window. The host is the container, so the
     split adapts to the space it gets: side by side when wide, narrower sidebar at tablet sizes,
     stacked (sidebar first, collapsible) when narrow. */
  .split-host {
    container-type: inline-size;
    min-width: 0;
  }

  .split {
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr);
    gap: var(--sp-4);
    align-items: start;
  }

  .split-side,
  .split-main {
    min-width: 0;
    border: 1px solid var(--border-muted);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-window);
    overflow: clip;
    background: var(--bg-surface);
  }

  .split-main {
    container-type: inline-size;
  }

  .split-side {
    position: sticky;
    top: calc(var(--appbar-height) + var(--sp-3) + var(--sp-4));
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - var(--appbar-height) - var(--sp-3) - 2 * var(--sp-4));
  }

  /* the sidebar is a <details> so it can collapse when stacked; when side by side the summary is
     hidden and ui.js keeps it open */
  .split-side > summary {
    list-style: none;
    cursor: pointer;
  }

  .split-side > summary::-webkit-details-marker {
    display: none;
  }

  .split-side > summary .chevron {
    display: none;
    margin-inline-start: auto;
    transition: transform var(--dur-fast);
  }

  .split-side[open] > summary .chevron {
    transform: rotate(180deg);
  }

  .split-side .window-body {
    padding: var(--sp-2);
    gap: 2px;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: var(--border-muted) transparent;
  }

  .nav-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
    list-style: none;
    padding: 0;
  }

  .nav-row {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-2);
    padding: var(--sp-2);
    border-radius: var(--radius-control);
    font-size: 0.9rem;
    color: var(--text-secondary);
    text-decoration: none;
    min-width: 0;
    overflow-wrap: anywhere;
  }

  .nav-row:hover {
    background: var(--bg-surface-alt);
    color: var(--text-primary);
  }

  .nav-row[aria-current="page"],
  .nav-row.active {
    background: var(--bg-surface-alt);
    color: var(--text-primary);
    font-weight: 700;
  }

  .nav-row > svg.icon {
    margin-top: 0.15em;
  }

  .nav-row > .nav-label {
    flex: 1;
    min-width: 0;
  }

  .nav-badge {
    flex: none;
    min-width: 1.5rem;
    padding: 0 var(--sp-2);
    border-radius: var(--radius-pill);
    background: var(--bg-surface-alt);
    color: var(--text-secondary);
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1.5rem;
    text-align: center;
    font-variant-numeric: tabular-nums;
  }

  .nav-row[aria-current="page"] > .nav-badge {
    background: var(--accent-primary);
    color: var(--accent-primary-ink);
  }

  /* the letter that stands in for a missing icon, shown only in the collapsed rail */
  .nav-initial {
    display: none;
  }

  /* nested items: a <details> whose summary is a nav row */
  .nav-sub > summary {
    list-style: none;
    cursor: pointer;
  }

  .nav-sub > summary::-webkit-details-marker {
    display: none;
  }

  .nav-sub > summary .chevron,
  .nav-group > summary .chevron {
    flex: none;
    margin-inline-start: auto;
    transition: transform var(--dur-fast);
  }

  .nav-sub[open] > summary .chevron,
  .nav-group[open] > summary .chevron {
    transform: rotate(180deg);
  }

  .nav-sub > .nav-list {
    margin-top: 2px;
    padding-inline-start: var(--sp-6);
  }

  .nav-group + .nav-group {
    margin-top: var(--sp-4);
  }

  .nav-group-label {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-1) var(--sp-2);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-secondary);
  }

  summary.nav-group-label {
    list-style: none;
    cursor: pointer;
  }

  summary.nav-group-label::-webkit-details-marker {
    display: none;
  }

  @container (max-width: 860px) {
    .split {
      grid-template-columns: 200px minmax(0, 1fr);
    }
  }

  @container (max-width: 640px) {
    .split {
      grid-template-columns: minmax(0, 1fr);
    }

    .split-side {
      position: static;
      max-height: none;
    }

    .split-side > summary .chevron {
      display: inline-block;
    }

    .split-side .window-body {
      max-height: 50vh;
    }
  }

  /* ---------- buttons ---------- */
  /* Filled accent for the one primary ("suggested") action per view, outline for secondary,
     filled danger for destructive actions: GNOME's suggested/destructive-action convention. */
  .btn {
    font-family: var(--font-body);
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1.3;
    border-radius: var(--radius-control);
    padding: calc(var(--sp-2) * var(--density)) calc(var(--sp-4) * var(--density));
    border: 1px solid transparent;
    background: transparent;
    color: var(--text-primary);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2);
    text-decoration: none;
    white-space: nowrap;
    transition: background-color var(--dur-fast), filter var(--dur-fast);
  }

  .btn.primary {
    background: var(--accent-primary);
    color: var(--accent-primary-ink);
  }

  .btn.secondary {
    border-color: var(--border-muted);
  }

  .btn.secondary:hover,
  .btn.ghost:hover {
    background: var(--bg-surface-alt);
  }

  .btn.primary:hover,
  .btn.danger:hover,
  .btn.warning:hover {
    filter: brightness(1.12);
  }

  .btn.danger {
    background: var(--status-danger);
    color: var(--text-on-fill);
  }

  .btn.warning {
    background: var(--status-warning);
    color: var(--text-on-fill);
  }

  .btn.ghost {
    color: var(--accent-primary);
  }

  .btn.sm {
    font-size: 0.8rem;
    padding: var(--sp-1) var(--sp-3);
  }

  .btn.lg {
    font-size: 1rem;
    padding: var(--sp-3) var(--sp-6);
  }

  .btn.icon-only {
    padding: var(--sp-2);
    aspect-ratio: 1;
  }

  .btn.block {
    width: 100%;
  }

  .btn:disabled,
  .btn[aria-disabled="true"] {
    opacity: 0.5;
    cursor: not-allowed;
    filter: none;
  }

  /* set by ui.js while the htmx request this button triggered is in flight */
  .btn[aria-busy="true"] {
    cursor: progress;
    position: relative;
    color: transparent !important;
  }

  .btn[aria-busy="true"]::after {
    content: "";
    position: absolute;
    inset: 0;
    margin: auto;
    width: 1em;
    height: 1em;
    border: 2px solid currentColor;
    border-color: var(--spinner-color, var(--text-secondary)) transparent;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
  }

  .btn.primary[aria-busy="true"]::after {
    --spinner-color: var(--accent-primary-ink);
  }

  .btn.danger[aria-busy="true"]::after,
  .btn.warning[aria-busy="true"]::after {
    --spinner-color: var(--text-on-fill);
  }

  .btn-group {
    display: inline-flex;
  }

  .btn-group > .btn {
    border-radius: 0;
  }

  .btn-group > .btn + .btn {
    margin-inline-start: -1px;
  }

  .btn-group > .btn:first-child {
    border-start-start-radius: var(--radius-control);
    border-end-start-radius: var(--radius-control);
  }

  .btn-group > .btn:last-child {
    border-start-end-radius: var(--radius-control);
    border-end-end-radius: var(--radius-control);
  }

  /* ---------- forms ---------- */
  .form {
    display: flex;
    flex-direction: column;
    gap: var(--sp-4);
    container-type: inline-size;
  }

  .form.inline {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--sp-3);
    container-type: normal;
  }

  input:not([type="checkbox"], [type="radio"], [type="range"], [type="color"], [type="hidden"]),
  textarea,
  select {
    font-family: var(--font-body);
    font-size: 0.95rem;
    line-height: 1.4;
    padding: calc(var(--sp-2) * var(--density)) calc(var(--sp-3) * var(--density));
    border: 1px solid var(--border-muted);
    border-radius: var(--radius-control);
    background: var(--bg-canvas);
    color: var(--text-primary);
    max-width: 100%;
    min-width: 0;
  }

  input:hover:not(:disabled, [readonly]),
  textarea:hover:not(:disabled, [readonly]),
  select:hover:not(:disabled) {
    border-color: color-mix(in srgb, var(--text-secondary) 45%, var(--border-muted));
  }

  input:focus-visible,
  textarea:focus-visible,
  select:focus-visible {
    outline: 2px solid var(--accent-primary);
    outline-offset: 0;
    border-color: var(--accent-primary);
  }

  input:disabled,
  textarea:disabled,
  select:disabled {
    opacity: 0.6;
    cursor: not-allowed;
  }

  input[type="checkbox"],
  input[type="radio"],
  input[type="range"],
  progress {
    accent-color: var(--accent-primary);
  }

  textarea {
    resize: vertical;
    min-height: 6em;
  }

  textarea.mono,
  input.mono {
    font-family: var(--font-mono);
    font-size: 0.88rem;
  }

  [aria-invalid="true"] {
    border-color: var(--status-danger) !important;
  }

  [aria-invalid="true"]:focus-visible {
    outline-color: var(--status-danger);
  }

  .field {
    display: flex;
    flex-direction: column;
    gap: var(--sp-1);
    min-width: 0;
  }

  .field-label {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-primary);
  }

  .field-label .req {
    color: var(--status-danger);
    margin-inline-start: 2px;
  }

  .field-hint {
    font-size: 0.8rem;
    color: var(--text-secondary);
  }

  .field-error {
    display: flex;
    align-items: center;
    gap: var(--sp-1);
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--status-danger);
  }

  .field > input,
  .field > textarea,
  .field > select,
  .field > .search-input,
  .field > .copy-field {
    width: 100%;
  }

  .field-label .opt {
    margin-inline-start: var(--sp-1);
    font-weight: 400;
    color: var(--text-secondary);
  }

  .field-count {
    font-size: 0.8rem;
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
    text-align: end;
  }

  .field-count.over {
    color: var(--status-danger);
    font-weight: 600;
  }

  input::-webkit-calendar-picker-indicator {
    cursor: pointer;
    opacity: 0.7;
  }

  input::-webkit-calendar-picker-indicator:hover {
    opacity: 1;
  }

  /* input group: text, icons or a button inside the control's border */
  .input-group {
    display: flex;
    align-items: stretch;
    min-width: 0;
    width: 100%;
    border: 1px solid var(--border-muted);
    border-radius: var(--radius-control);
    background: var(--bg-canvas);
    overflow: hidden;
  }

  .input-group:hover {
    border-color: color-mix(in srgb, var(--text-secondary) 45%, var(--border-muted));
  }

  .input-group:focus-within {
    outline: 2px solid var(--accent-primary);
    border-color: var(--accent-primary);
  }

  .input-group.invalid {
    border-color: var(--status-danger);
  }

  .input-group.invalid:focus-within {
    outline-color: var(--status-danger);
  }

  .input-group > input {
    flex: 1;
    min-width: 0;
    border: 0 !important;
    border-radius: 0;
    background: transparent;
  }

  .input-group > input:focus-visible {
    outline: none;
  }

  .input-addon {
    display: flex;
    align-items: center;
    flex: none;
    padding-inline: var(--sp-3);
    background: var(--bg-surface-alt);
    color: var(--text-secondary);
    font-size: 0.9rem;
    white-space: nowrap;
  }

  .input-addon:first-child {
    border-inline-end: 1px solid var(--border-muted);
  }

  .input-addon:not(:first-child) {
    border-inline-start: 1px solid var(--border-muted);
  }

  .input-addon.icon-addon {
    background: transparent;
    border: 0;
    padding-inline: var(--sp-3) 0;
  }

  .input-addon.icon-addon:not(:first-child) {
    padding-inline: 0 var(--sp-3);
  }

  .input-button {
    display: flex;
    flex: none;
  }

  .input-button > .btn {
    border-radius: 0;
    border-width: 0;
    border-inline-start: 1px solid var(--border-muted);
  }

  .input-button > .btn.ghost {
    border: 0;
    color: var(--text-secondary);
  }

  .input-button > .btn.ghost:hover {
    color: var(--text-primary);
  }

  /* password show/hide and number steppers need ui.js; without it the input works alone */
  .password-field .input-button,
  .number-field .input-button {
    display: none;
  }

  .ui-js .password-field .input-button,
  .ui-js .number-field .input-button {
    display: flex;
  }

  .password-toggle .when-shown,
  .password-toggle[aria-pressed="true"] .when-hidden {
    display: none;
  }

  .password-toggle[aria-pressed="true"] .when-shown {
    display: inline;
  }

  .number-field > input {
    text-align: center;
    appearance: textfield;
    -moz-appearance: textfield;
  }

  .number-field > input::-webkit-inner-spin-button,
  .number-field > input::-webkit-outer-spin-button {
    appearance: none;
    margin: 0;
  }

  .range-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--sp-2);
  }

  .range-value {
    font-family: var(--font-mono);
    font-size: 0.85rem;
    font-variant-numeric: tabular-nums;
    color: var(--text-secondary);
  }

  .range-field > input[type="range"] {
    width: 100%;
    margin: var(--sp-1) 0;
  }

  /* combobox & tag input: the native control shows without JS, the combobox with it */
  .combobox {
    position: relative;
  }

  .combobox > .combo-control {
    display: none;
  }

  .ui-js .combobox > .combo-native {
    display: none;
  }

  .ui-js .combobox > .combo-control {
    display: flex;
  }

  .combobox > .combo-native {
    width: 100%;
  }

  .combobox select[multiple].combo-native {
    min-height: 8em;
  }

  .combo-control {
    flex-wrap: wrap;
    align-items: center;
    cursor: text;
  }

  .combo-control > input {
    flex: 1 1 8ch;
  }

  .combo-caret {
    cursor: pointer;
    transition: transform var(--dur-fast);
  }

  .combobox.open .combo-caret {
    transform: rotate(180deg);
  }

  .combobox.loading .combo-caret {
    animation: spin 0.8s linear infinite;
  }

  .combo-chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-1);
    margin: 0;
    padding: var(--sp-1) 0 var(--sp-1) var(--sp-1);
    list-style: none;
  }

  .combo-chips:empty {
    display: none;
  }

  .combo-chip {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    max-width: 100%;
    padding-block: 1px;
    padding-inline: var(--sp-2) 2px;
    border: 1px solid var(--border-muted);
    border-radius: var(--radius-pill);
    background: var(--bg-surface-alt);
    font-size: 0.85rem;
    line-height: 1.5;
  }

  .combo-chip > span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .combo-chip-remove {
    display: grid;
    place-items: center;
    width: 20px;
    height: 20px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
  }

  .combo-chip-remove:hover {
    background: var(--border-muted);
    color: var(--text-primary);
  }

  .combo-chip-remove svg.icon {
    width: 0.85em;
    height: 0.85em;
  }

  .combo-list {
    position: absolute;
    inset-inline: 0;
    z-index: 30;
    max-height: min(18rem, 50vh);
    overflow-y: auto;
    margin: var(--sp-1) 0 0;
    padding: var(--sp-1);
    list-style: none;
    border: 1px solid var(--border-muted);
    border-radius: var(--radius-control);
    background: var(--bg-surface);
    box-shadow: var(--shadow-window);
  }

  .combo-list[hidden] {
    display: none;
  }

  .combo-option {
    display: flex;
    flex-direction: column;
    padding: var(--sp-2) var(--sp-3);
    padding-inline-end: var(--sp-8);
    position: relative;
    border-radius: calc(var(--radius-control) - 2px);
    cursor: pointer;
  }

  .combo-option small {
    color: var(--text-secondary);
    font-size: 0.8rem;
  }

  .combo-option.active,
  .combo-option:hover {
    background: var(--bg-surface-alt);
  }

  .combo-option.active {
    outline: 2px solid var(--accent-primary);
    outline-offset: -2px;
  }

  .combo-option[aria-selected="true"] {
    font-weight: 700;
  }

  .combo-option[aria-selected="true"]::after {
    content: "";
    position: absolute;
    inset-inline-end: var(--sp-3);
    top: 50%;
    width: 0.4em;
    height: 0.75em;
    border: solid var(--accent-primary);
    border-width: 0 2px 2px 0;
    transform: translateY(-60%) rotate(45deg);
  }

  .combo-option[aria-disabled="true"] {
    opacity: 0.5;
    cursor: not-allowed;
  }

  /* filtering sets the hidden attribute; keep it stronger than the display rules above */
  .combo-option[hidden],
  .command-item[hidden],
  .command-group[hidden] {
    display: none;
  }

  .combo-empty {
    padding: var(--sp-2) var(--sp-3);
    color: var(--text-secondary);
    font-style: italic;
  }

  /* fieldset: a group of related fields under a legend */
  .fieldset {
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
    padding: var(--sp-4);
    border-radius: var(--radius-card);
  }

  .fieldset > legend {
    font-size: 0.95rem;
    font-weight: 700;
  }

  .fieldset-description {
    margin-top: calc(-1 * var(--sp-2));
    color: var(--text-secondary);
    font-size: 0.88rem;
  }

  .fieldset-body {
    display: flex;
    flex-direction: column;
    gap: var(--sp-4);
  }

  /* error summary: the list of a form's errors, linking to the fields */
  .error-summary {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
    padding: var(--sp-3) var(--sp-4);
    border: 2px solid var(--status-danger);
    border-radius: var(--radius-control);
    background: var(--tint-danger);
    color: var(--text-primary);
  }

  .error-summary:focus-visible {
    outline-offset: 3px;
  }

  .error-summary h2 {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    font-size: 1rem;
    color: var(--status-danger);
  }

  .error-summary ul {
    margin: 0;
    padding-inline-start: 1.6em;
    display: flex;
    flex-direction: column;
    gap: var(--sp-1);
  }

  .error-summary a {
    color: var(--status-danger);
    font-weight: 600;
  }

  /* two-column label/field grid when the form is wide enough */
  .form-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--sp-4);
  }

  @container (min-width: 640px) {
    .form-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: var(--sp-4) var(--sp-6);
    }

    .form-grid > .wide {
      grid-column: 1 / -1;
    }
  }

  .form-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: var(--sp-2);
  }

  @container (max-width: 420px) {
    .form-actions {
      flex-direction: column-reverse;
    }

    .form-actions .btn {
      width: 100%;
    }
  }

  fieldset {
    border: 1px solid var(--border-muted);
    border-radius: var(--radius-control);
    padding: var(--sp-3) var(--sp-4);
    margin: 0;
    min-width: 0;
  }

  legend {
    font-size: 0.85rem;
    font-weight: 600;
    padding-inline: var(--sp-1);
  }

  .choice-group {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
  }

  .choice-group.horizontal {
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--sp-2) var(--sp-6);
  }

  .choice {
    display: inline-flex;
    align-items: flex-start;
    gap: var(--sp-2);
    cursor: pointer;
    font-size: 0.95rem;
  }

  .choice input {
    width: 1.1em;
    height: 1.1em;
    margin: 0.2em 0 0;
    flex: none;
  }

  .choice small {
    display: block;
    color: var(--text-secondary);
    font-size: 0.8rem;
  }

  /* switch: a styled checkbox (role="switch"), so it submits like one */
  .switch {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-3);
    cursor: pointer;
    font-size: 0.95rem;
  }

  .switch input {
    appearance: none;
    position: relative;
    flex: none;
    width: 40px;
    height: 24px;
    margin: 0;
    border-radius: var(--radius-pill);
    background: var(--border-muted);
    border: 1px solid color-mix(in srgb, var(--text-secondary) 30%, var(--border-muted));
    cursor: pointer;
    transition: background-color var(--dur-fast);
  }

  .switch input::after {
    content: "";
    position: absolute;
    top: 2px;
    inset-inline-start: 2px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--switch-knob);
    box-shadow: var(--shadow-soft);
    transition: transform var(--dur-fast) var(--ease-out);
  }

  .switch input:checked {
    background: var(--accent-primary);
    border-color: var(--accent-primary);
  }

  .switch input:checked::after {
    transform: translateX(16px);
  }

  .switch input:checked:dir(rtl)::after {
    transform: translateX(-16px);
  }

  .switch input:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }

  .search-input {
    position: relative;
    display: flex;
    align-items: center;
  }

  .search-input > svg.icon {
    position: absolute;
    inset-inline-start: var(--sp-3);
    color: var(--text-secondary);
    pointer-events: none;
  }

  .search-input > input {
    width: 100%;
    padding-inline-start: calc(var(--sp-3) + 1.1em + var(--sp-2));
  }

  .search-input > .spinner {
    position: absolute;
    inset-inline-end: var(--sp-3);
  }

  .copy-field {
    display: flex;
    min-width: 0;
  }

  .copy-field > input {
    flex: 1;
    font-family: var(--font-mono);
    font-size: 0.85rem;
    border-radius: 0;
    border-start-start-radius: var(--radius-control);
    border-end-start-radius: var(--radius-control);
    background: var(--bg-surface-alt);
  }

  .copy-field > .btn {
    border-radius: 0;
    border-start-end-radius: var(--radius-control);
    border-end-end-radius: var(--radius-control);
    margin-inline-start: -1px;
  }

  .file-drop {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2);
    padding: var(--sp-6) var(--sp-4);
    text-align: center;
    border: 2px dashed var(--border-muted);
    border-radius: var(--radius-card);
    background: var(--bg-canvas);
    color: var(--text-secondary);
    cursor: pointer;
    transition: border-color var(--dur-fast), background-color var(--dur-fast);
  }

  .file-drop:hover,
  .file-drop:focus-within,
  .file-drop.drag-over {
    border-color: var(--accent-primary);
    background: color-mix(in srgb, var(--accent-primary) 5%, var(--bg-canvas));
  }

  .file-drop > input[type="file"] {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
  }

  .file-drop > svg.icon {
    width: 28px;
    height: 28px;
    color: var(--accent-primary);
  }

  .file-drop strong {
    color: var(--text-primary);
  }

  .file-drop-list {
    list-style: none;
    padding: 0;
    font-size: 0.85rem;
    font-family: var(--font-mono);
    color: var(--text-primary);
  }

  /* ---------- badges & tags ---------- */
  /* Status badges are rounded rectangles (button radius) pairing an icon with a label. Topic tags
     are pills instead, so they read as a different kind of thing. */
  .badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1.4;
    padding: 3px 10px;
    border-radius: var(--radius-control);
    border: 1px solid currentColor;
    white-space: nowrap;
    flex: none;
    background: var(--bg-surface-alt);
    color: var(--text-secondary);
  }

  .badge svg.icon {
    width: 0.95em;
    height: 0.95em;
  }

  .badge.in-progress {
    background: var(--highlight-yellow);
    color: var(--status-in-progress);
  }

  .badge.completed,
  .badge.success {
    background: var(--tint-completed);
    color: var(--status-completed);
  }

  .badge.special {
    background: var(--tint-special);
    color: var(--accent-special);
  }

  .badge.info {
    background: var(--tint-info);
    color: var(--accent-info);
  }

  .badge.accent {
    background: var(--bg-surface-alt);
    color: var(--accent-primary);
  }

  .badge.warning {
    background: var(--tint-warning);
    color: var(--status-warning);
  }

  .badge.danger {
    background: var(--tint-danger);
    color: var(--status-danger);
  }

  .tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    list-style: none;
    padding: 0;
  }

  .tag {
    font-size: 0.75rem;
    color: var(--text-secondary);
    background: var(--bg-surface-alt);
    padding: 2px 8px;
    border-radius: var(--radius-pill);
    border: 1px solid color-mix(in srgb, currentColor 40%, transparent);
    text-decoration: none;
    white-space: nowrap;
  }

  a.tag:hover {
    color: var(--text-primary);
  }

  kbd {
    display: inline-block;
    padding: 1px 6px;
    font-size: 0.8em;
    line-height: 1.4;
    border: 1px solid var(--border-muted);
    border-bottom-width: 2px;
    border-radius: 5px;
    background: var(--bg-surface);
    color: var(--text-primary);
    white-space: nowrap;
  }

  /* ---------- callouts & banners ---------- */
  .callout {
    border-radius: var(--radius-control);
    padding: var(--sp-3) var(--sp-4);
    font-size: 0.92rem;
    display: flex;
    gap: var(--sp-2);
    align-items: flex-start;
    background: var(--highlight-peach);
    color: var(--text-primary);
  }

  .callout.info {
    background: color-mix(in srgb, var(--accent-info) 12%, var(--bg-surface));
    color: var(--accent-info);
  }

  .callout.important {
    background: color-mix(in srgb, var(--accent-primary) 12%, var(--bg-surface));
    color: var(--accent-primary);
  }

  .callout.warning {
    color: var(--status-warning);
  }

  .callout.danger {
    background: var(--tint-danger-strong);
    color: var(--status-danger);
  }

  .callout.success {
    background: var(--tint-completed);
    color: var(--status-completed);
  }

  .callout-icon {
    flex: none;
    font-size: 1rem;
    line-height: 1.45;
  }

  .callout-body {
    display: flex;
    flex-direction: column;
    gap: var(--sp-1);
    min-width: 0;
  }

  .callout-label {
    display: block;
    font-weight: 700;
  }

  .callout-body > :not(.callout-label) {
    color: var(--text-primary);
  }

  /* banner: a page-level strip (maintenance, session expiry), unlike a transient toast */
  .banner {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--sp-2) var(--sp-3);
    padding: var(--sp-3) var(--sp-4);
    border: 1px solid currentColor;
    border-radius: var(--radius-card);
    font-size: 0.92rem;
    background: var(--tint-info);
    color: var(--accent-info);
  }

  .banner > .banner-text {
    flex: 1 1 16rem;
    color: var(--text-primary);
  }

  .banner > .banner-text strong {
    color: inherit;
  }

  .banner.warning {
    background: var(--tint-warning);
    color: var(--status-warning);
  }

  .banner.danger {
    background: var(--tint-danger);
    color: var(--status-danger);
  }

  .banner.success {
    background: var(--tint-completed);
    color: var(--status-completed);
  }

  /* ---------- cards ---------- */
  .card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
    gap: var(--sp-4);
    list-style: none;
    padding: 0;
  }

  .card {
    border: 1px solid var(--border-muted);
    border-radius: var(--radius-card);
    background: var(--bg-surface);
    padding: var(--sp-4);
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
    min-width: 0;
    box-shadow: var(--shadow-soft);
    color: inherit;
  }

  a.card {
    text-decoration: none;
    transition: border-color var(--dur-fast);
  }

  a.card:hover {
    border-color: var(--bg-window-title);
  }

  .card.raised {
    box-shadow: var(--shadow-window);
  }

  .card-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: var(--sp-3);
  }

  .card-head h3 {
    line-height: 1.3;
    overflow-wrap: anywhere;
  }

  .card-text {
    color: var(--text-secondary);
    font-size: 0.92rem;
  }

  .card-foot {
    margin-top: auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-2);
  }

  /* ---------- key/value facts ---------- */
  .facts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
    gap: var(--sp-3) var(--sp-6);
    padding: var(--sp-3) var(--sp-4);
    background: var(--bg-surface);
    border: 1px solid var(--border-muted);
    border-radius: var(--radius-card);
  }

  .facts > div {
    min-width: 0;
  }

  .facts dt {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-secondary);
  }

  .facts dd {
    margin: 0;
    font-weight: 600;
    font-size: 0.95rem;
    line-height: 1.4;
    overflow-wrap: anywhere;
  }

  .facts .wide {
    grid-column: 1 / -1;
  }

  /* ---------- tables ---------- */
  /* The wrapper scrolls wide tables inside itself, never the page. A .stack table turns each row
     into a card of label/value pairs when its container is narrow (labels from data-label). */
  .table-wrap {
    width: 100%;
    overflow-x: auto;
    container-type: inline-size;
    border: 1px solid var(--border-muted);
    border-radius: var(--radius-card);
    background: var(--bg-surface);
  }

  .window-body.flush > .table-wrap {
    border: none;
    border-radius: 0;
  }

  .table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
  }

  .table th,
  .table td {
    text-align: start;
    padding: var(--sp-3) var(--sp-4);
    border-bottom: 1px solid var(--border-muted);
    vertical-align: middle;
  }

  .table th {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--text-secondary);
    white-space: nowrap;
    background: var(--bg-surface);
  }

  .table tbody tr:hover {
    background: var(--bg-surface-alt);
  }

  .table tbody tr:last-child td {
    border-bottom: none;
  }

  .table .num {
    text-align: end;
    font-variant-numeric: tabular-nums;
  }

  .table .actions {
    text-align: end;
    white-space: nowrap;
  }

  .table .actions .row {
    justify-content: flex-end;
    flex-wrap: nowrap;
    gap: var(--sp-2);
  }

  .table.striped tbody tr:nth-child(even) {
    background: color-mix(in srgb, var(--bg-surface-alt) 55%, transparent);
  }

  .table.compact th,
  .table.compact td {
    padding: var(--sp-2) var(--sp-3);
  }

  @container (max-width: 560px) {
    .table.stack thead {
      position: absolute;
      width: 1px;
      height: 1px;
      overflow: hidden;
      clip-path: inset(50%);
    }

    .table.stack,
    .table.stack tbody,
    .table.stack tr,
    .table.stack td {
      display: block;
      width: 100%;
    }

    .table.stack tr {
      padding: var(--sp-2) var(--sp-4);
      border-bottom: 1px solid var(--border-muted);
    }

    .table.stack tbody tr:last-child {
      border-bottom: none;
    }

    .table.stack td {
      display: grid;
      grid-template-columns: minmax(6rem, 35%) minmax(0, 1fr);
      gap: var(--sp-3);
      padding: var(--sp-1) 0;
      border: none;
      text-align: start;
    }

    .table.stack td > * {
      justify-self: start;
    }

    .table.stack td::before {
      content: attr(data-label);
      font-size: 0.78rem;
      font-weight: 700;
      color: var(--text-secondary);
    }

    .table.stack td:not([data-label])::before,
    .table.stack td[data-label=""]::before {
      content: none;
    }

    .table.stack td:not([data-label]),
    .table.stack td[data-label=""] {
      display: block;
    }

    .table.stack .actions .row {
      justify-content: flex-start;
      flex-wrap: wrap;
    }

    .table.stack td.select {
      display: block;
      width: auto;
      padding-bottom: var(--sp-1);
    }

    .table.stack > .empty-body {
      display: none;
    }

    .table.stack:not(:has(> tbody.rows > tr)) > .empty-body {
      display: block;
    }

    .table.stack .empty-body tr,
    .table.stack .empty-body td {
      display: block;
    }
  }

  /* table extras: toolbar, bulk bar, sorting, selection, sticky header, empty state */
  .table-block {
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
    min-width: 0;
  }

  .window-body.flush > .table-block > .table-toolbar,
  .window-body.flush > .table-block > .bulk-bar {
    margin: var(--sp-3) var(--sp-4) 0;
  }

  .window-body.flush > .table-block {
    gap: 0;
  }

  .table-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-2) var(--sp-3);
  }

  .table-toolbar > .search-input {
    flex: 1 1 14rem;
  }

  .bulk-bar {
    position: sticky;
    top: var(--sp-2);
    z-index: 5;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-2) var(--sp-3);
    padding: var(--sp-2) var(--sp-3);
    border-radius: var(--radius-control);
    background: var(--bg-window-title);
    color: var(--text-on-window-title);
    box-shadow: var(--shadow-toast);
  }

  .bulk-bar .bulk-count {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    margin-inline-end: auto;
  }

  .bulk-bar .btn.secondary,
  .bulk-bar .btn.ghost {
    border-color: var(--border-on-chrome);
    color: var(--text-on-window-title);
    background: transparent;
  }

  .bulk-bar .btn.secondary:hover,
  .bulk-bar .btn.ghost:hover {
    background: var(--hover-on-chrome);
  }

  .bulk-bar :focus-visible {
    outline-color: var(--text-on-window-title);
  }

  /* without JS the bar is always there; ui.js shows it only while rows are selected */
  .ui-js .bulk-bar:not(.active) {
    display: none;
  }

  .table th.select,
  .table td.select {
    width: 1%;
    padding-inline-end: 0;
  }

  .table .select input {
    width: 1.1em;
    height: 1.1em;
    margin: 0;
    vertical-align: middle;
  }

  .table tbody tr:has(> td.select input:checked) {
    background: color-mix(in srgb, var(--accent-primary) 9%, var(--bg-surface));
  }

  .sort-link {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-1);
    color: inherit;
    text-decoration: none;
  }

  .sort-link:hover {
    color: var(--text-primary);
  }

  .sort-link .sort-icon.idle {
    opacity: 0.35;
  }

  .sort-link:hover .sort-icon.idle {
    opacity: 0.8;
  }

  th[aria-sort="ascending"],
  th[aria-sort="descending"] {
    color: var(--text-primary);
  }

  .table-wrap.sticky {
    max-height: var(--table-max-height, 70vh);
    overflow: auto;
  }

  .table-wrap.sticky thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    box-shadow: inset 0 -1px 0 var(--border-muted);
  }

  .table .empty-body {
    display: none;
  }

  .table:not(:has(> tbody.rows > tr)) > .empty-body {
    display: table-row-group;
  }

  .table .empty-body td {
    border-bottom: none;
  }

  .table .empty-body tr:hover,
  .table .load-more-row:hover {
    background: none;
  }

  .load-more {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2);
    padding: var(--sp-2);
  }

  /* ---------- boxed list ---------- */
  /* GNOME's boxed list: rows in one rounded box separated by hairlines. */
  .boxed-list-block {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
    min-width: 0;
  }

  .boxed-list-title {
    font-size: 0.95rem;
  }

  .boxed-list {
    list-style: none;
    margin: 0;
    padding: 0;
    border: 1px solid var(--border-muted);
    border-radius: var(--radius-card);
    background: var(--bg-surface);
    overflow: clip;
    container-type: inline-size;
  }

  .list-row + .list-row {
    border-top: 1px solid var(--border-muted);
  }

  .list-row-inner {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    min-height: 52px;
    padding: var(--sp-2) var(--sp-4);
    color: inherit;
    text-decoration: none;
  }

  a.list-row-inner:hover {
    background: var(--bg-surface-alt);
  }

  a.list-row-inner:focus-visible {
    outline-offset: -2px;
  }

  .list-leading {
    display: grid;
    place-items: center;
    flex: none;
    color: var(--text-secondary);
  }

  .list-text {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
  }

  .list-title {
    font-weight: 600;
    overflow-wrap: anywhere;
  }

  .list-subtitle {
    font-size: 0.85rem;
    color: var(--text-secondary);
    overflow-wrap: anywhere;
  }

  .list-trailing {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    flex: none;
    color: var(--text-secondary);
  }

  .list-trailing .switch > span:empty {
    display: none;
  }

  .list-chevron {
    flex: none;
    color: var(--text-secondary);
  }

  @container (max-width: 360px) {
    .list-row-inner {
      flex-wrap: wrap;
    }

    .list-trailing {
      margin-inline-start: auto;
    }
  }

  /* ---------- stat ---------- */
  .stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
    gap: var(--sp-4);
  }

  .stat {
    display: flex;
    flex-direction: column;
    gap: var(--sp-1);
    min-width: 0;
    padding: var(--sp-4);
    border: 1px solid var(--border-muted);
    border-radius: var(--radius-card);
    background: var(--bg-surface);
    box-shadow: var(--shadow-soft);
    color: inherit;
    text-decoration: none;
  }

  a.stat:hover {
    border-color: var(--bg-window-title);
  }

  .stat-label {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    font-size: 0.85rem;
    color: var(--text-secondary);
  }

  .stat-value {
    font-size: clamp(1.5rem, 1.3rem + 0.8vw, 2rem);
    font-weight: 700;
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
  }

  .stat-change {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-1);
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-secondary);
  }

  .stat-change.good {
    color: var(--status-completed);
  }

  .stat-change.bad {
    color: var(--status-danger);
  }

  .stat-hint {
    font-weight: 400;
    color: var(--text-secondary);
    font-size: 0.85rem;
  }

  /* ---------- status dot ---------- */
  .status-dot {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    font-size: 0.88rem;
    white-space: nowrap;
  }

  .status-dot > .dot {
    position: relative;
    flex: none;
    width: 0.6rem;
    height: 0.6rem;
    border-radius: 50%;
    background: var(--dot-color, var(--text-secondary));
  }

  .status-dot.success {
    --dot-color: var(--status-completed);
  }

  .status-dot.warning {
    --dot-color: var(--status-warning);
  }

  .status-dot.danger {
    --dot-color: var(--status-danger);
  }

  .status-dot.info {
    --dot-color: var(--accent-info);
  }

  .status-dot.pulse > .dot::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: var(--dot-color, var(--text-secondary));
    animation: dot-pulse 1.8s ease-out infinite;
  }

  @keyframes dot-pulse {
    to {
      transform: scale(2.6);
      opacity: 0;
    }
  }

  time[data-relative-time] {
    white-space: nowrap;
  }

  /* ---------- tree view ---------- */
  .tree ul {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .tree ul ul {
    padding-inline-start: var(--sp-4);
    margin-inline-start: calc(var(--sp-2) + 0.5em);
    border-inline-start: 1px solid var(--border-muted);
  }

  .tree-row {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-1) var(--sp-2);
    border-radius: var(--radius-control);
    color: var(--text-primary);
    font-size: 0.9rem;
    text-decoration: none;
    cursor: pointer;
    list-style: none;
  }

  .tree-row::-webkit-details-marker {
    display: none;
  }

  .tree-row:hover {
    background: var(--bg-surface-alt);
  }

  .tree-row[aria-current="page"] {
    background: var(--bg-surface-alt);
    font-weight: 700;
  }

  .tree-row > svg.icon:not(.tree-chevron) {
    color: var(--text-secondary);
  }

  .tree-chevron {
    flex: none;
    width: 1em;
    height: 1em;
    color: var(--text-secondary);
    transition: transform var(--dur-fast);
  }

  .tree details[open] > summary > .tree-chevron {
    transform: rotate(90deg);
  }

  .tree details[open] > summary > .tree-chevron:dir(rtl) {
    transform: scaleX(-1) rotate(90deg);
  }

  .tree-label {
    flex: 1;
    min-width: 0;
    overflow-wrap: anywhere;
  }

  /* ---------- sparkline ---------- */
  .sparkline {
    position: relative;
    display: inline-block;
    width: var(--spark-width, 100%);
    min-width: 4rem;
    height: var(--spark-height, 2rem);
    vertical-align: middle;
  }

  .sparkline svg {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
  }

  .spark-line {
    fill: none;
    stroke: color-mix(in srgb, var(--text-secondary) 70%, transparent);
    stroke-width: 2;
    stroke-linejoin: round;
    stroke-linecap: round;
    vector-effect: non-scaling-stroke;
  }

  .spark-area {
    fill: color-mix(in srgb, var(--accent-primary) 12%, transparent);
    stroke: none;
  }

  .spark-dot {
    position: absolute;
    left: var(--x);
    top: var(--y);
    width: 8px;
    height: 8px;
    margin: -4px 0 0 -4px;
    border-radius: 50%;
    background: var(--accent-primary);
    box-shadow: 0 0 0 2px var(--bg-surface);
  }

  .stat .sparkline {
    margin-top: var(--sp-2);
  }

  /* ---------- bar chart ---------- */
  .bar-chart {
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
    min-width: 0;
    container-type: inline-size;
  }

  .bar-chart figcaption {
    font-weight: 700;
  }

  .bar-chart dl {
    display: grid;
    grid-template-columns: minmax(6rem, max-content) minmax(0, 1fr);
    gap: var(--sp-2) var(--sp-3);
    margin: 0;
  }

  .bar-row {
    display: contents;
  }

  .bar-row dt {
    font-size: 0.88rem;
    color: var(--text-primary);
    overflow-wrap: anywhere;
  }

  .bar-row dd {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    margin: 0;
    min-width: 0;
  }

  .bar-track {
    flex: 1;
    min-width: 0;
  }

  /* thin bar from a shared baseline, rounded only at the data end */
  .bar-fill {
    display: block;
    width: var(--value, 0%);
    min-width: 2px;
    height: 12px;
    border-radius: 0 4px 4px 0;
    background: var(--accent-primary);
  }

  .bar-fill:dir(rtl) {
    border-radius: 4px 0 0 4px;
  }

  .bar-row.muted .bar-fill {
    background: color-mix(in srgb, var(--text-secondary) 45%, transparent);
  }

  .bar-value {
    flex: none;
    min-width: 3.5rem;
    font-size: 0.85rem;
    font-variant-numeric: tabular-nums;
    color: var(--text-secondary);
    text-align: end;
  }

  .bar-row:not(.muted) .bar-value {
    color: var(--text-primary);
  }

  @container (max-width: 360px) {
    .bar-chart dl {
      grid-template-columns: minmax(0, 1fr);
      gap: 2px;
    }

    .bar-row dd {
      margin-bottom: var(--sp-2);
    }
  }

  /* ---------- avatar group & figure ---------- */
  .avatar-more {
    background: var(--bg-surface-alt);
    color: var(--text-secondary);
    font-size: 0.75rem;
  }

  .figure {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
    min-width: 0;
  }

  .figure img {
    display: block;
    max-width: 100%;
    height: auto;
    border-radius: var(--radius-control);
  }

  .figure.framed img {
    padding: var(--sp-2);
    border: 1px solid var(--border-muted);
    background: var(--bg-surface);
  }

  .figure figcaption {
    font-size: 0.85rem;
    color: var(--text-secondary);
  }

  /* ---------- tabs ---------- */
  /* Link/htmx tabs: a tablist row that scrolls horizontally when it overflows. */
  .tabs {
    display: flex;
    gap: var(--sp-1);
    border-bottom: 1px solid var(--border-muted);
    overflow-x: auto;
    scrollbar-width: none;
  }

  .tabs::-webkit-scrollbar {
    display: none;
  }

  .tabs > a,
  .tabs > button {
    flex: none;
    font: inherit;
    font-size: 0.9rem;
    font-weight: 600;
    padding: var(--sp-2) var(--sp-4);
    border: none;
    border-bottom: 3px solid transparent;
    margin-bottom: -1px;
    background: none;
    color: var(--text-secondary);
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
  }

  .tabs > a:hover,
  .tabs > button:hover {
    color: var(--text-primary);
  }

  .tabs > [aria-selected="true"],
  .tabs > [aria-current="page"] {
    color: var(--text-primary);
    border-bottom-color: var(--accent-primary);
  }

  .tab-panel-host {
    padding-top: var(--sp-4);
    min-width: 0;
  }

  /* CSS-only tabs (from learn_it's lesson editor): radio inputs + labels + panels, all panels stay
     in the DOM so htmx targets inside hidden ones keep working. Works for up to 8 tabs. */
  .radio-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0 var(--sp-1);
    position: relative;
  }

  .radio-tabs > input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
  }

  .radio-tabs > label {
    cursor: pointer;
    padding: var(--sp-2) var(--sp-4);
    border: 1px solid var(--border-muted);
    border-bottom: none;
    border-radius: var(--radius-control) var(--radius-control) 0 0;
    background: var(--bg-surface-alt);
    color: var(--text-secondary);
    font-size: 0.85rem;
    font-weight: 600;
  }

  .radio-tabs > input:checked + label {
    background: var(--bg-canvas);
    color: var(--text-primary);
  }

  .radio-tabs > input:focus-visible + label {
    outline: 2px solid var(--accent-primary);
    outline-offset: 2px;
  }

  .radio-tabs > .tab-panel {
    display: none;
    order: 99;
    width: 100%;
    min-width: 0;
    border: 1px solid var(--border-muted);
    border-radius: var(--radius-control);
    border-start-start-radius: 0;
    padding: var(--sp-4);
    background: var(--bg-canvas);
  }

  .radio-tabs:has(> input:nth-of-type(1):checked) > .tab-panel:nth-of-type(1),
  .radio-tabs:has(> input:nth-of-type(2):checked) > .tab-panel:nth-of-type(2),
  .radio-tabs:has(> input:nth-of-type(3):checked) > .tab-panel:nth-of-type(3),
  .radio-tabs:has(> input:nth-of-type(4):checked) > .tab-panel:nth-of-type(4),
  .radio-tabs:has(> input:nth-of-type(5):checked) > .tab-panel:nth-of-type(5),
  .radio-tabs:has(> input:nth-of-type(6):checked) > .tab-panel:nth-of-type(6),
  .radio-tabs:has(> input:nth-of-type(7):checked) > .tab-panel:nth-of-type(7),
  .radio-tabs:has(> input:nth-of-type(8):checked) > .tab-panel:nth-of-type(8) {
    display: block;
  }

  /* ---------- segmented control ---------- */
  /* A small set of mutually exclusive views (learn_it's admin Lessons | Programs switch). */
  .segmented {
    display: inline-flex;
    max-width: 100%;
    padding: 3px;
    gap: 2px;
    border: 1px solid var(--border-muted);
    border-radius: calc(var(--radius-control) + 3px);
    background: var(--bg-surface);
    overflow-x: auto;
    scrollbar-width: none;
  }

  .segmented > a,
  .segmented > button,
  .segmented > label {
    flex: none;
    font: inherit;
    font-size: 0.88rem;
    font-weight: 600;
    padding: var(--sp-1) var(--sp-4);
    border: none;
    border-radius: var(--radius-control);
    background: none;
    color: var(--text-secondary);
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
  }

  .segmented > input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
  }

  .segmented > a:hover,
  .segmented > button:hover,
  .segmented > label:hover {
    color: var(--text-primary);
  }

  .segmented > [aria-current="page"],
  .segmented > [aria-pressed="true"],
  .segmented > input:checked + label {
    background: var(--accent-primary);
    color: var(--accent-primary-ink);
  }

  .segmented > input:focus-visible + label {
    outline: 2px solid var(--accent-primary);
    outline-offset: 1px;
  }

  /* ---------- theme toggle ---------- */
  /* A segmented System / Light / Dark switch. The Apply button is the no-JS fallback; ui.js
     applies a choice at once, so it hides the button. */
  .theme-toggle {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
  }

  .theme-toggle .segmented {
    position: relative;
    margin: 0;
  }

  .theme-toggle .segmented > label {
    display: inline-grid;
    place-items: center;
    padding: var(--sp-1) var(--sp-2);
  }

  .ui-js .theme-apply {
    display: none;
  }

  /* ---------- breadcrumbs ---------- */
  .breadcrumbs ol {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-1);
    list-style: none;
    padding: 0;
    font-size: 0.88rem;
    color: var(--text-secondary);
  }

  .breadcrumbs li {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-1);
    min-width: 0;
  }

  .breadcrumbs li + li::before {
    content: "/";
    color: var(--border-muted);
    font-weight: 700;
  }

  .breadcrumbs a {
    color: var(--text-secondary);
    text-decoration: none;
  }

  .breadcrumbs a:hover {
    color: var(--accent-primary);
    text-decoration: underline;
  }

  .breadcrumbs [aria-current="page"] {
    color: var(--text-primary);
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .breadcrumbs .crumb-ellipsis {
    display: none;
  }

  /* ---------- pagination ---------- */
  .pagination ul {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-1);
    list-style: none;
    padding: 0;
  }

  .pagination a,
  .pagination span {
    display: inline-grid;
    place-items: center;
    min-width: 2.25rem;
    height: 2.25rem;
    padding: 0 var(--sp-2);
    border-radius: var(--radius-control);
    font-size: 0.9rem;
    font-variant-numeric: tabular-nums;
    color: var(--text-primary);
    text-decoration: none;
  }

  .pagination a:hover {
    background: var(--bg-surface-alt);
  }

  .pagination [aria-current="page"] {
    background: var(--accent-primary);
    color: var(--accent-primary-ink);
    font-weight: 700;
  }

  .pagination .page-gap {
    color: var(--text-secondary);
  }

  .pagination .page-step {
    border: 1px solid var(--border-muted);
    gap: var(--sp-1);
    display: inline-flex;
    align-items: center;
  }

  .pagination [aria-disabled="true"] {
    opacity: 0.45;
    pointer-events: none;
  }

  .pagination .page-summary {
    display: none;
    color: var(--text-secondary);
    font-size: 0.85rem;
  }

  /* ---------- accordion ---------- */
  .accordion {
    border: 1px solid var(--border-muted);
    border-radius: var(--radius-card);
    background: var(--bg-surface);
    overflow: clip;
  }

  .accordion > details + details {
    border-top: 1px solid var(--border-muted);
  }

  .accordion summary {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-3) var(--sp-4);
    font-weight: 600;
    cursor: pointer;
    list-style: none;
  }

  .accordion summary::-webkit-details-marker {
    display: none;
  }

  .accordion summary:hover {
    background: var(--bg-surface-alt);
  }

  .accordion summary .chevron {
    margin-inline-start: auto;
    color: var(--text-secondary);
    transition: transform var(--dur-fast);
  }

  .accordion details[open] > summary .chevron {
    transform: rotate(180deg);
  }

  .accordion .accordion-body {
    padding: 0 var(--sp-4) var(--sp-4);
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
  }

  /* ---------- code block ---------- */
  .code-block {
    position: relative;
    min-width: 0;
    border: 1px solid var(--border-muted);
    border-radius: var(--radius-control);
    background: var(--bg-surface-alt);
    overflow: clip;
  }

  .code-block-head {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    padding-block: var(--sp-1);
    padding-inline: var(--sp-3) var(--sp-1);
    border-bottom: 1px solid var(--border-muted);
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: var(--text-secondary);
  }

  .code-block-head .btn {
    margin-inline-start: auto;
  }

  .code-block pre {
    margin: 0;
    padding: var(--sp-3);
    overflow-x: auto;
    font-size: 0.85rem;
    line-height: 1.55;
    background: transparent;
  }

  .code-block pre code {
    font-size: inherit;
  }

  /* ---------- dialog ---------- */
  /* Native <dialog> styled as a window. Centered on wider screens; a bottom sheet on phones with
     sticky footer actions. */
  dialog.dialog {
    width: min(480px, calc(100vw - var(--sp-8)));
    max-height: calc(100dvh - var(--sp-8));
    padding: 0;
    border: 1px solid var(--border-muted);
    border-radius: var(--radius-card);
    background: var(--bg-surface);
    color: var(--text-primary);
    box-shadow: var(--shadow-window);
    overflow: hidden;
    flex-direction: column;
  }

  dialog.dialog[open] {
    display: flex;
    animation: dialog-in var(--dur) var(--ease-out);
  }

  dialog.dialog.wide {
    width: min(760px, calc(100vw - var(--sp-8)));
  }

  dialog.dialog::backdrop {
    background: var(--backdrop);
  }

  dialog.dialog > form,
  dialog.dialog > .dialog-content {
    display: flex;
    flex-direction: column;
    min-height: 0;
    flex: 1;
  }

  dialog.dialog .window-body {
    overflow-y: auto;
  }

  dialog.dialog .dialog-close {
    margin-inline-start: auto;
    color: inherit;
    border-color: transparent;
    padding: var(--sp-1);
  }

  .dialog-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: var(--sp-2);
    padding: var(--sp-3) var(--sp-6) var(--sp-4);
    border-top: 1px solid var(--border-muted);
    background: var(--bg-surface);
  }

  @keyframes dialog-in {
    from {
      opacity: 0;
      transform: translateY(8px) scale(0.98);
    }
  }

  /* ---------- dropdown menu ---------- */
  /* A native popover anchored under its button. ui.js positions it next to the opener; without JS
     it falls back to the browser's centered popover. */
  .dropdown {
    position: relative;
    display: inline-flex;
  }

  .menu {
    margin: 0;
    inset: auto;
    min-width: 12rem;
    max-width: min(20rem, calc(100vw - var(--sp-4)));
    padding: var(--sp-1);
    border: 1px solid var(--border-muted);
    border-radius: var(--radius-control);
    background: var(--bg-surface);
    color: var(--text-primary);
    box-shadow: var(--shadow-window);
  }

  .menu:popover-open {
    display: flex;
    flex-direction: column;
    gap: 1px;
  }

  .menu > a,
  .menu > button,
  .menu > form > button {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    width: 100%;
    padding: var(--sp-2) var(--sp-3);
    border: none;
    border-radius: calc(var(--radius-control) - 2px);
    background: none;
    font: inherit;
    font-size: 0.9rem;
    text-align: start;
    color: var(--text-primary);
    text-decoration: none;
    cursor: pointer;
  }

  .menu > a:hover,
  .menu > button:hover,
  .menu > form > button:hover,
  .menu > a:focus-visible,
  .menu > button:focus-visible {
    background: var(--bg-surface-alt);
    outline: none;
  }

  .menu > .danger,
  .menu > form > .danger {
    color: var(--status-danger);
  }

  .menu > hr {
    margin: var(--sp-1) 0;
  }

  .menu > .menu-label {
    padding: var(--sp-1) var(--sp-3);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-secondary);
  }

  /* ---------- popover panel ---------- */
  .popover-panel {
    margin: 0;
    inset: auto;
    width: min(280px, calc(100vw - var(--sp-4)));
    padding: var(--sp-4);
    border: 1px solid var(--border-muted);
    border-radius: var(--radius-card);
    background: var(--bg-surface);
    color: var(--text-primary);
    box-shadow: var(--shadow-window);
  }

  .popover-panel.wide {
    width: min(360px, calc(100vw - var(--sp-4)));
  }

  .popover-panel:popover-open {
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
  }

  .popover-title {
    font-size: 0.95rem;
  }

  /* ---------- command palette ---------- */
  dialog.dialog.command-palette {
    width: min(640px, calc(100vw - var(--sp-8)));
    margin-block-start: min(12vh, 120px);
    max-height: min(70dvh, 560px);
  }

  .command-search {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-3) var(--sp-4);
    border-bottom: 1px solid var(--border-muted);
    color: var(--text-secondary);
  }

  .command-search input {
    flex: 1;
    min-width: 0;
    padding: var(--sp-1) 0;
    border: 0;
    background: transparent;
    font-size: 1.05rem;
  }

  .command-search input:focus-visible {
    outline: none;
  }

  .command-list {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    margin: 0;
    padding: var(--sp-2);
    list-style: none;
  }

  .command-group {
    padding: var(--sp-2) var(--sp-3) var(--sp-1);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-secondary);
  }

  .command-item {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-2) var(--sp-3);
    border-radius: var(--radius-control);
    cursor: pointer;
  }

  .command-item > svg.icon {
    color: var(--text-secondary);
  }

  .command-item.active {
    background: var(--accent-primary);
    color: var(--accent-primary-ink);
  }

  .command-item.active > svg.icon,
  .command-item.active .command-hint {
    color: inherit;
  }

  .command-label {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .command-hint {
    flex: none;
    font-size: 0.8rem;
    color: var(--text-secondary);
  }

  .command-foot {
    padding: var(--sp-2) var(--sp-4);
    border-top: 1px solid var(--border-muted);
    font-size: 0.78rem;
    color: var(--text-secondary);
  }

  .command-button {
    justify-content: flex-start;
    min-width: min(16rem, 100%);
    color: var(--text-secondary);
    font-weight: 400;
  }

  .command-button-label {
    flex: 1;
    text-align: start;
  }

  .command-button-keys kbd {
    font-size: 0.72rem;
  }

  /* ---------- stepper ---------- */
  .stepper {
    container-type: inline-size;
    min-width: 0;
  }

  .stepper ol {
    display: flex;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .stepper li {
    flex: 1 1 0;
    min-width: 0;
    position: relative;
  }

  /* the connector line from each marker to the next */
  .stepper li:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 15px;
    inset-inline-start: calc(32px + var(--sp-2));
    inset-inline-end: var(--sp-2);
    height: 2px;
    border-radius: 2px;
    background: var(--border-muted);
  }

  .stepper li.done:not(:last-child)::after {
    background: var(--accent-primary);
  }

  .step-inner {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--sp-2);
    color: inherit;
    text-decoration: none;
  }

  a.step-inner:hover .step-label {
    text-decoration: underline;
  }

  .step-marker {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 2px solid var(--border-muted);
    background: var(--bg-canvas);
    color: var(--text-secondary);
    font-size: 0.85rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
  }

  .stepper .done .step-marker {
    border-color: var(--accent-primary);
    background: var(--accent-primary);
    color: var(--accent-primary-ink);
  }

  .stepper .current .step-marker {
    border-color: var(--accent-primary);
    color: var(--accent-primary);
  }

  .step-text {
    display: flex;
    flex-direction: column;
    padding-inline-end: var(--sp-2);
  }

  .step-label {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-secondary);
  }

  .stepper .current .step-label,
  .stepper .done .step-label {
    color: var(--text-primary);
  }

  .step-hint {
    font-size: 0.8rem;
    color: var(--text-secondary);
  }

  .stepper-summary {
    display: none;
    margin-top: var(--sp-2);
    font-size: 0.9rem;
    color: var(--text-secondary);
  }

  @container (max-width: 520px) {
    .step-text {
      position: absolute;
      width: 1px;
      height: 1px;
      overflow: hidden;
      clip-path: inset(50%);
    }

    .stepper-summary {
      display: block;
    }
  }

  /* ---------- tooltip ---------- */
  /* CSS-only: the trigger references the bubble with aria-describedby, the bubble shows on hover
     and keyboard focus. */
  .tooltip {
    position: relative;
    display: inline-flex;
  }

  .tooltip > [role="tooltip"] {
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    z-index: 30;
    transform: translateX(-50%);
    width: max-content;
    max-width: min(16rem, 80vw);
    padding: var(--sp-1) var(--sp-2);
    border-radius: 6px;
    background: var(--text-primary);
    color: var(--bg-canvas);
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1.35;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--dur-fast);
  }

  .tooltip.below > [role="tooltip"] {
    bottom: auto;
    top: calc(100% + 6px);
  }

  .tooltip:hover > [role="tooltip"],
  .tooltip:focus-within > [role="tooltip"] {
    opacity: 1;
    visibility: visible;
  }

  /* ---------- toasts ---------- */
  /* One shape in four severities, varying only fill and icon. Always stacked top-right of the
     viewport, whichever element triggered them; full width at the top on phones. */
  #toast-region {
    position: fixed;
    top: calc(var(--sp-6) + env(safe-area-inset-top, 0px));
    inset-inline-end: calc(var(--sp-6) + env(safe-area-inset-right, 0px));
    z-index: 40;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: var(--sp-3);
    width: min(380px, calc(100vw - 2 * var(--sp-6)));
    pointer-events: none;
  }

  .toast {
    pointer-events: auto;
    display: flex;
    align-items: flex-start;
    gap: var(--sp-2);
    max-width: 100%;
    padding-block: var(--sp-3);
    padding-inline: var(--sp-4) var(--sp-2);
    border-radius: var(--radius-control);
    font-size: 0.88rem;
    font-weight: 600;
    line-height: 1.4;
    box-shadow: var(--shadow-toast);
    background: var(--text-primary);
    color: var(--bg-canvas);
    animation: toast-in 0.2s var(--ease-out);
  }

  .toast > svg {
    flex: none;
    margin-top: 1px;
    stroke: currentColor;
    fill: none;
  }

  .toast-text {
    flex: 1;
    min-width: 0;
    padding-inline-end: var(--sp-2);
  }

  .toast-close {
    flex: none;
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    margin: -2px 0;
    padding: 0;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: inherit;
    opacity: 0.75;
    cursor: pointer;
  }

  .toast-close:hover {
    opacity: 1;
    background: var(--hover-on-fill);
  }

  .toast.success {
    background: var(--status-completed);
    color: var(--text-on-fill);
  }

  .toast.warning {
    background: var(--status-warning);
    color: var(--text-on-fill);
  }

  .toast.danger {
    background: var(--status-danger);
    color: var(--text-on-fill);
  }

  .toast.toast-leaving {
    animation: toast-out var(--dur) ease-in forwards;
  }

  @keyframes toast-in {
    from {
      opacity: 0;
      transform: translateY(-8px);
    }
  }

  @keyframes toast-out {
    to {
      opacity: 0;
      transform: translateY(-8px);
    }
  }

  /* ---------- status: spinner, progress, skeleton ---------- */
  .spinner {
    display: inline-block;
    flex: none;
    width: 1.1em;
    height: 1.1em;
    border: 2px solid var(--border-muted);
    border-top-color: var(--accent-primary);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    vertical-align: -0.2em;
  }

  .spinner.lg {
    width: 2rem;
    height: 2rem;
    border-width: 3px;
  }

  @keyframes spin {
    to {
      transform: rotate(360deg);
    }
  }

  /* htmx toggles .htmx-request on the indicator (or its ancestor) during a request */
  .htmx-indicator {
    opacity: 0;
    transition: opacity 0.2s ease-in;
  }

  .htmx-request .htmx-indicator,
  .htmx-request.htmx-indicator {
    opacity: 1;
  }

  .progress {
    display: flex;
    flex-direction: column;
    gap: var(--sp-1);
    min-width: 0;
  }

  .progress-label {
    display: flex;
    justify-content: space-between;
    gap: var(--sp-2);
    font-size: 0.82rem;
    color: var(--text-secondary);
  }

  .progress-label .value {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
  }

  .progress-track {
    position: relative;
    height: 8px;
    border-radius: var(--radius-pill);
    background: var(--border-muted);
    overflow: hidden;
  }

  .progress-track.thin {
    height: 4px;
    border-radius: 0;
  }

  .progress-fill {
    height: 100%;
    width: var(--value, 0%);
    border-radius: inherit;
    background: var(--progress-color, var(--accent-primary));
    transition: width var(--dur) var(--ease-out);
  }

  .progress.success {
    --progress-color: var(--status-completed);
  }

  .progress.warning {
    --progress-color: var(--status-warning);
  }

  .progress.danger {
    --progress-color: var(--status-danger);
  }

  .progress-track.indeterminate .progress-fill {
    width: 35%;
    animation: indeterminate 1.3s ease-in-out infinite;
  }

  @keyframes indeterminate {
    from {
      transform: translateX(-100%);
    }
    to {
      transform: translateX(300%);
    }
  }

  /* global request bar: a thin line at the very top while any htmx request is in flight */
  #request-bar {
    position: fixed;
    inset: 0 0 auto;
    z-index: 60;
    height: 3px;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s;
    overflow: hidden;
  }

  #request-bar::after {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 30%;
    background: var(--accent-primary);
    animation: indeterminate 1.1s ease-in-out infinite;
  }

  #request-bar.active {
    opacity: 1;
    transition-delay: 0.15s;
  }

  .skeleton {
    display: block;
    height: 0.9em;
    border-radius: 4px;
    background: linear-gradient(90deg, var(--bg-surface-alt) 25%, var(--bg-surface) 50%, var(--bg-surface-alt) 75%);
    background-size: 200% 100%;
    animation: shimmer 1.4s linear infinite;
  }

  .skeleton.title {
    height: 1.4em;
    width: 45%;
  }

  .skeleton.block {
    height: 6rem;
    border-radius: var(--radius-control);
  }

  .skeleton-lines {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
  }

  .skeleton-lines .skeleton:last-child {
    width: 70%;
  }

  @keyframes shimmer {
    from {
      background-position: 200% 0;
    }
    to {
      background-position: -200% 0;
    }
  }

  .upload-progress {
    display: flex;
    flex-direction: column;
    gap: var(--sp-1);
  }

  .upload-progress[hidden] {
    display: none;
  }

  .upload-progress .progress-fill {
    width: 0;
  }

  /* keyboard shortcut help ("?") */
  .hotkey-list {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    gap: var(--sp-2) var(--sp-4);
    align-items: center;
    margin: 0;
  }

  .hotkey-list dt {
    white-space: nowrap;
  }

  .hotkey-list dd {
    margin: 0;
    color: var(--text-secondary);
  }

  /* ---------- empty state ---------- */
  .empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-8) var(--sp-4);
    text-align: center;
  }

  .empty-state > .empty-icon {
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    border-radius: var(--radius-card);
    background: var(--bg-surface-alt);
    color: var(--text-secondary);
  }

  .empty-state > .empty-icon svg.icon {
    width: 26px;
    height: 26px;
  }

  .empty-state p {
    max-width: 40ch;
    color: var(--text-secondary);
  }

  /* ---------- error page ---------- */
  .error-page {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--sp-3);
    max-width: 36rem;
    margin-inline: auto;
    padding: clamp(var(--sp-8), 10vh, 120px) var(--sp-4);
    text-align: center;
  }

  .error-page > .error-icon {
    display: grid;
    place-items: center;
    width: 72px;
    height: 72px;
    border-radius: var(--radius-card);
    background: var(--bg-surface-alt);
    color: var(--text-secondary);
  }

  .error-page > .error-icon svg.icon {
    width: 34px;
    height: 34px;
  }

  .error-status {
    font-family: var(--font-mono);
    font-size: 0.85rem;
    letter-spacing: 0.12em;
    color: var(--text-secondary);
  }

  .error-text {
    color: var(--text-secondary);
    max-width: 44ch;
  }

  .error-page > .row {
    justify-content: center;
    margin-top: var(--sp-2);
  }

  /* ---------- markdown ---------- */
  /* Set for reading: ~70ch prose, code blocks/tables/images may use the full pane but scroll
     inside themselves, never the page. */
  .markdown-body {
    display: flex;
    flex-direction: column;
    gap: var(--sp-4);
    min-width: 0;
    font-size: 1.1rem;
    line-height: 1.7;
  }

  .markdown-body > * {
    max-width: var(--measure);
    margin-block: 0;
  }

  .markdown-body > pre,
  .markdown-body > table,
  .markdown-body > img,
  .markdown-body > p:has(> img:only-child),
  .markdown-body > .callout {
    max-width: 100%;
  }

  .markdown-body > table,
  .markdown-body > img {
    align-self: flex-start;
  }

  .markdown-body > table {
    display: block;
    overflow-x: auto;
  }

  .markdown-body h1,
  .markdown-body h2,
  .markdown-body h3,
  .markdown-body h4 {
    line-height: 1.3;
    scroll-margin-top: calc(var(--appbar-height) + var(--sp-8));
  }

  .markdown-body h2 {
    margin-top: var(--sp-6);
  }

  .markdown-body h3,
  .markdown-body h4 {
    margin-top: var(--sp-4);
  }

  .markdown-body > :first-child {
    margin-top: 0;
  }

  .markdown-body ul,
  .markdown-body ol {
    padding-inline-start: 1.4em;
    display: flex;
    flex-direction: column;
    gap: var(--sp-1);
  }

  .markdown-body li > ul,
  .markdown-body li > ol {
    margin-top: var(--sp-1);
  }

  .markdown-body li:has(> input[type="checkbox"]) {
    list-style: none;
    margin-inline-start: -1.4em;
  }

  .markdown-body li > input[type="checkbox"] {
    margin-block: 0;
    margin-inline: 0 var(--sp-2);
  }

  .markdown-body a {
    text-decoration-line: underline;
    text-decoration-color: color-mix(in srgb, var(--accent-primary) 45%, transparent);
    text-underline-offset: 2px;
  }

  .markdown-body a:hover {
    color: color-mix(in srgb, var(--accent-primary) 75%, var(--text-primary));
    text-decoration-color: currentColor;
  }

  .markdown-body h1 > a.anchor,
  .markdown-body h2 > a.anchor,
  .markdown-body h3 > a.anchor,
  .markdown-body h4 > a.anchor {
    margin-inline-start: var(--sp-2);
    color: var(--text-secondary);
    text-decoration: none;
    opacity: 0;
  }

  .markdown-body :is(h1, h2, h3, h4):hover > a.anchor,
  .markdown-body a.anchor:focus-visible {
    opacity: 1;
  }

  .markdown-body img {
    max-width: 100%;
    height: auto;
    border-radius: var(--radius-control);
  }

  .markdown-body code {
    background: var(--bg-surface-alt);
    padding: 1px 5px;
    border-radius: 4px;
    font-size: 0.88em;
  }

  .markdown-body pre,
  .code-block pre {
    tab-size: 4;
  }

  .markdown-body pre {
    padding: var(--sp-3) var(--sp-4);
    border-radius: var(--radius-control);
    overflow-x: auto;
    font-size: 0.92rem;
    line-height: 1.55;
  }

  .markdown-body pre:not(.chroma) {
    background: var(--bg-surface-alt);
  }

  .markdown-body pre code {
    background: none;
    padding: 0;
    font-size: inherit;
  }

  .markdown-body blockquote {
    margin: 0;
    padding-inline-start: var(--sp-4);
    border-inline-start: 3px solid var(--border-muted);
    color: var(--text-secondary);
  }

  .markdown-body table {
    border-collapse: collapse;
    font-size: 0.95rem;
  }

  .markdown-body th,
  .markdown-body td {
    border: 1px solid var(--border-muted);
    padding: var(--sp-1) var(--sp-3);
  }

  .markdown-body th {
    background: var(--bg-surface);
  }

  .markdown-body hr {
    margin-block: var(--sp-4);
  }

  .markdown-body .callout {
    font-size: 0.95rem;
  }

  /* ---------- table of contents ---------- */
  .toc {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 0.87rem;
  }

  .toc-title {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-secondary);
    padding: var(--sp-1) var(--sp-2);
  }

  .toc a {
    display: block;
    padding: var(--sp-1) var(--sp-2);
    padding-inline-start: calc(var(--sp-2) + (var(--toc-level, 2) - 2) * 12px);
    border-radius: var(--radius-control);
    color: var(--text-secondary);
    text-decoration: none;
    overflow-wrap: anywhere;
  }

  .toc a:hover {
    background: var(--bg-surface-alt);
    color: var(--text-primary);
  }

  .toc a[aria-current="true"] {
    background: var(--bg-surface-alt);
    color: var(--text-primary);
    font-weight: 700;
  }

  /* reading layout: content + sticky TOC column on desktop, collapsible TOC above on smaller */
  .doc-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 15rem;
    gap: var(--sp-8);
    align-items: start;
  }

  .doc-layout > .doc-toc {
    position: sticky;
    top: calc(var(--appbar-height) + var(--sp-3) + var(--sp-4));
    max-height: calc(100vh - var(--appbar-height) - var(--sp-8));
    overflow-y: auto;
    order: 2;
  }

  .doc-toc > summary {
    display: none;
  }

  /* ---------- markdown editor ---------- */
  .md-editor {
    container-type: inline-size;
    min-width: 0;
  }

  /* live mode: write and preview side by side when there is room */
  @container (min-width: 900px) {
    .md-editor.live .radio-tabs {
      flex-wrap: nowrap;
      gap: var(--sp-3);
    }

    .md-editor.live .radio-tabs > label {
      display: none;
    }

    .md-editor.live .radio-tabs > .tab-panel {
      display: block;
      flex: 1 1 0;
      width: auto;
      border-radius: var(--radius-control);
      max-height: 75vh;
      overflow: auto;
    }
  }

  .md-editor textarea {
    width: 100%;
    min-height: max(320px, 50vh);
    font-family: var(--font-mono);
    font-size: 0.9rem;
    line-height: 1.6;
    border: none;
    border-radius: 0;
    background: transparent;
    padding: 0;
    resize: vertical;
  }

  .md-editor textarea:focus-visible {
    outline: none;
  }

  .md-editor .tab-panel:has(textarea:focus-visible) {
    outline: 2px solid var(--accent-primary);
    outline-offset: -1px;
  }

  .md-editor .md-preview-empty {
    color: var(--text-secondary);
    font-style: italic;
  }

  .md-editor.drag-over .tab-panel {
    outline: 2px dashed var(--accent-primary);
    outline-offset: -2px;
  }

  /* ---------- code editor ---------- */
  /* The textarea stays in the DOM for the form; once CodeMirror is mounted (.is-ready) it is only
     kept for submit and validation. Token colors use the --hue-*-ink pairs, which clear 4.5:1 on
     --bg-surface in both modes. */
  .code-editor {
    container-type: inline-size;
    position: relative;
  }

  .code-editor.is-ready > textarea {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    padding: 0;
    border: 0;
    opacity: 0;
    overflow: hidden;
    pointer-events: none;
  }

  .code-editor-host {
    --code-line: 1.6;
    block-size: calc(var(--code-rows, 12) * var(--code-line) * 0.88rem + var(--sp-3));
    min-block-size: 8rem;
    max-block-size: 90vh;
    resize: vertical;
    overflow: hidden;
    border: 1px solid var(--border-muted);
    border-radius: var(--radius-control);
    background: var(--bg-surface);
    color: var(--text-primary);
  }

  .code-editor-host:hover {
    border-color: color-mix(in srgb, var(--text-secondary) 45%, var(--border-muted));
  }

  .code-editor-host:focus-within {
    outline: 2px solid var(--accent-primary);
    outline-offset: 0;
    border-color: var(--accent-primary);
  }

  .code-editor:has([aria-invalid="true"]) .code-editor-host {
    border-color: var(--status-danger);
  }

  /* Editor size, type, gutter, current line, selection, brackets, search and panel colors are the
     CodeMirror theme in build/codemirror/entry.js: CodeMirror's own CSS is unlayered and would
     beat this layer. What is left here is the frame and the syntax colors. */

  .code-editor-host .cm-panels input,
  .code-editor-host .cm-panels button {
    font: inherit;
    font-size: 0.85rem;
    margin: 2px;
  }

  /* syntax: names from @lezer/highlight's classHighlighter */
  .code-editor-host .tok-keyword,
  .code-editor-host .tok-operatorKeyword,
  .code-editor-host .tok-modifier {
    color: var(--hue-purple-ink);
  }

  .code-editor-host .tok-string,
  .code-editor-host .tok-string2,
  .code-editor-host .tok-regexp,
  .code-editor-host .tok-inserted {
    color: var(--hue-green-ink);
  }

  .code-editor-host .tok-number,
  .code-editor-host .tok-atom,
  .code-editor-host .tok-bool,
  .code-editor-host .tok-literal,
  .code-editor-host .tok-escape {
    color: var(--hue-orange-ink);
  }

  .code-editor-host .tok-typeName,
  .code-editor-host .tok-className,
  .code-editor-host .tok-namespace,
  .code-editor-host .tok-tagName {
    color: var(--hue-teal-ink);
  }

  .code-editor-host .tok-propertyName,
  .code-editor-host .tok-attributeName,
  .code-editor-host .tok-labelName,
  .code-editor-host .tok-macroName,
  .code-editor-host .tok-variableName.tok-definition,
  .code-editor-host .tok-url,
  .code-editor-host .tok-link {
    color: var(--hue-blue-ink);
  }

  .code-editor-host .tok-comment,
  .code-editor-host .tok-meta,
  .code-editor-host .tok-punctuation {
    color: var(--text-secondary);
  }

  .code-editor-host .tok-comment {
    font-style: italic;
  }

  .code-editor-host .tok-heading,
  .code-editor-host .tok-strong {
    font-weight: 700;
  }

  .code-editor-host .tok-emphasis {
    font-style: italic;
  }

  .code-editor-host .tok-strikethrough {
    text-decoration: line-through;
  }

  /* not color alone: errors and deletions are also underlined / struck through */
  .code-editor-host .tok-invalid {
    color: var(--status-danger);
    text-decoration: underline wavy;
  }

  .code-editor-host .tok-deleted {
    color: var(--status-danger);
    text-decoration: line-through;
  }

  @media (pointer: coarse) {
    .code-editor-host .cm-panels button,
    .code-editor-host .cm-panels input[type="checkbox"] {
      min-block-size: var(--touch-target);
      min-inline-size: var(--touch-target);
    }

    .code-editor-host .cm-panels input[type="text"] {
      min-block-size: var(--touch-target);
    }
  }

  /* ---------- app shell ---------- */
  /* Sidebar + top bar + content for applications. The sidebar is a popover so it can be a drawer
     below desktop width without JS; on desktop the rules below pin it in place as a column. */
  .app-shell {
    display: grid;
    grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
    min-height: 100vh;
    min-height: 100dvh;
  }

  .app-shell.collapsed {
    grid-template-columns: 64px minmax(0, 1fr);
  }

  .app-sidebar {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
    position: sticky;
    top: 0;
    inset: auto;
    width: auto;
    height: 100vh;
    height: 100dvh;
    margin: 0;
    padding: 0;
    overflow: hidden;
    border: 0;
    border-inline-end: 1px solid var(--border-muted);
    background: var(--bg-surface);
    color: var(--text-primary);
  }

  .app-sidebar-head {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    min-height: var(--appbar-height);
    padding: var(--sp-2) var(--sp-3) 0;
    padding-inline-start: var(--sp-4);
  }

  .app-sidebar-head .brand {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    min-width: 0;
    flex: 1;
    font-weight: 700;
    font-size: 1.05rem;
    color: inherit;
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .app-sidebar-close {
    display: none;
  }

  .app-sidebar-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: var(--border-muted) transparent;
    padding: var(--sp-2) var(--sp-3) var(--sp-4);
  }

  .app-sidebar-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-3) var(--sp-4);
    border-top: 1px solid var(--border-muted);
  }

  .app-sidebar-foot .profile-link {
    flex: 1;
    min-width: 0;
  }

  .app-sidebar-foot .profile-name {
    display: inline;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .app-body {
    display: flex;
    flex-direction: column;
    min-width: 0;
  }

  .app-topbar {
    position: sticky;
    top: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    min-height: var(--appbar-height);
    padding: var(--sp-2) clamp(var(--sp-4), 3vw, var(--sp-8));
    padding-top: max(var(--sp-2), env(safe-area-inset-top, 0px));
    background: color-mix(in srgb, var(--bg-canvas) 88%, transparent);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--border-muted);
  }

  .app-topbar-main {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: var(--sp-3);
  }

  .app-topbar-main h1 {
    font-size: 1.1rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .app-topbar-actions {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
  }

  .app-menu-btn,
  .app-collapse-btn {
    display: none;
  }

  /* the collapse button needs ui.js (it keeps the choice in a cookie) */
  .ui-js .app-collapse-btn {
    display: inline-flex;
  }

  .app-main {
    width: 100%;
    max-width: var(--content-max);
    margin-inline: auto;
    padding: var(--sp-8) clamp(var(--sp-4), 3vw, var(--sp-8)) var(--sp-12);
    display: flex;
    flex-direction: column;
    gap: var(--sp-8);
  }

  .app-main:focus {
    outline: none;
  }

  .app-footer {
    width: 100%;
    max-width: var(--content-max);
    margin: auto auto 0;
    padding: 0 clamp(var(--sp-4), 3vw, var(--sp-8)) var(--sp-6);
  }

  /* collapsed rail: icons (or initials) only, labels available as tooltips */
  .app-shell.collapsed .app-sidebar :is(.nav-label, .nav-badge, .nav-group-label, .chevron, .app-sidebar-foot) {
    display: none;
  }

  .app-shell.collapsed .app-sidebar-head {
    justify-content: center;
    padding-inline: var(--sp-2);
  }

  .app-shell.collapsed .app-sidebar-head .brand {
    flex: none;
  }

  .app-shell.collapsed .app-sidebar-body {
    padding-inline: var(--sp-2);
  }

  .app-shell.collapsed .nav-row {
    justify-content: center;
  }

  .app-shell.collapsed .nav-row > svg.icon {
    margin: 0;
  }

  .app-shell.collapsed .nav-initial {
    display: inline-grid;
    place-items: center;
    width: 1.4em;
    font-weight: 700;
  }

  .app-shell.collapsed .nav-sub > .nav-list {
    padding-inline-start: 0;
  }

  .app-shell.collapsed .nav-group {
    display: block;
  }

  .app-shell.collapsed .nav-group + .nav-group {
    margin-top: var(--sp-2);
    padding-top: var(--sp-2);
    border-top: 1px solid var(--border-muted);
  }

  .app-shell.collapsed .app-sidebar-head .brand > :not(:first-child) {
    display: none;
  }

  /* ---------- drawer ---------- */
  /* A full-height <dialog> sliding in from an edge. End drawers become bottom sheets on phones;
     start drawers (navigation) stay side panels. */
  dialog.dialog.drawer {
    --drawer-from: 100%;
    width: min(400px, calc(100vw - var(--sp-8)));
    max-width: none;
    height: 100vh;
    height: 100dvh;
    max-height: none;
    margin: 0;
    margin-inline-start: auto;
    border-width: 0;
    border-inline-start-width: 1px;
    border-radius: 0;
  }

  dialog.dialog.drawer:dir(rtl) {
    --drawer-from: -100%;
  }

  dialog.dialog.drawer-start {
    --drawer-from: -100%;
    margin-inline: 0 auto;
    border-inline-start-width: 0;
    border-inline-end-width: 1px;
  }

  dialog.dialog.drawer-start:dir(rtl) {
    --drawer-from: 100%;
  }

  dialog.dialog.drawer-wide {
    width: min(560px, calc(100vw - var(--sp-8)));
  }

  dialog.dialog.drawer[open] {
    animation: drawer-in var(--dur) var(--ease-out);
  }

  dialog.dialog.drawer-bottom {
    width: 100%;
    height: fit-content;
    max-height: min(80dvh, 720px);
    margin: auto 0 0;
    border-width: 1px 0 0;
    border-radius: var(--radius-card) var(--radius-card) 0 0;
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }

  dialog.dialog.drawer-bottom[open] {
    animation: sheet-in var(--dur) var(--ease-out);
  }

  /* pin the actions to the bottom of a full-height drawer; a bottom sheet just fits its content */
  dialog.dialog.drawer .dialog-actions {
    margin-top: auto;
  }

  @keyframes drawer-in {
    from {
      transform: translateX(var(--drawer-from));
    }
  }

  /* ---------- footer ---------- */
  .footer {
    display: flex;
    flex-direction: column;
    gap: var(--sp-6);
    padding-top: var(--sp-6);
    border-top: 1px solid var(--border-muted);
    color: var(--text-secondary);
    font-size: 0.88rem;
  }

  .footer-columns {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr));
    gap: var(--sp-6);
  }

  .footer-column h2 {
    font-size: 0.8rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-primary);
    margin-bottom: var(--sp-2);
  }

  .footer ul {
    list-style: none;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--sp-1);
  }

  .footer a {
    color: inherit;
    text-decoration: none;
  }

  .footer a:hover {
    color: var(--accent-primary);
    text-decoration: underline;
  }

  .footer-bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-2) var(--sp-6);
  }

  .footer-bottom ul {
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--sp-1) var(--sp-4);
  }

  /* ---------- reduced motion ---------- */
  @media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
    }

    .spinner,
    .btn[aria-busy="true"]::after {
      animation-duration: 1.5s !important;
      animation-iteration-count: infinite !important;
    }
  }

  /* ---------- touch: 44px minimum targets on coarse pointers ---------- */
  @media (pointer: coarse) {
    .btn,
    .appbar-nav a,
    .tabs > a,
    .tabs > button,
    .segmented > a,
    .segmented > button,
    .segmented > label,
    .radio-tabs > label,
    .menu > a,
    .menu > button,
    .nav-row,
    .tree-row,
    .combo-option,
    .command-item,
    .sort-link,
    .list-row-inner,
    .nav-group > summary,
    .footer a,
    .toc a,
    .accordion summary,
    .pagination a,
    input:not([type="checkbox"], [type="radio"], [type="range"], [type="hidden"]),
    select {
      min-height: var(--touch-target);
    }

    .btn.icon-only,
    .pagination a {
      min-width: var(--touch-target);
    }

    .input-addon {
      min-height: var(--touch-target);
    }

    .radio-tabs > label,
    .segmented > a,
    .segmented > button,
    .segmented > label,
    .nav-row,
    .toc a {
      display: inline-flex;
      align-items: center;
    }

    .nav-row,
    .toc a {
      display: flex;
    }

    .toast-close {
      width: var(--touch-target);
      height: var(--touch-target);
      margin-block: -10px;
      margin-inline: 0 -4px;
    }
  }

  /* ---------- tablet and below: app bar collapses into the popover sheet ---------- */
  @media (max-width: 1023px) {
    .appbar-menu-btn {
      display: inline-grid;
      place-items: center;
      width: 40px;
      height: 40px;
      padding: 0;
      color: inherit;
      background: transparent;
      border: 1px solid var(--border-muted);
      border-radius: var(--radius-control);
      cursor: pointer;
      flex: none;
    }

    .appbar-menu-btn:hover {
      background: var(--bg-surface-alt);
    }

    @media (pointer: coarse) {
      .appbar-menu-btn {
        width: var(--touch-target);
        height: var(--touch-target);
      }
    }

    .appbar-menu:not(:popover-open) {
      display: none;
    }

    .appbar-menu:popover-open {
      display: flex;
      flex-direction: column;
      gap: var(--sp-3);
      position: fixed;
      inset-block: var(--menu-top, calc(var(--appbar-height) + var(--sp-3) * 2)) auto;
      inset-inline: auto var(--sp-4);
      width: min(360px, calc(100vw - 2 * var(--sp-4)));
      max-height: calc(100dvh - var(--appbar-height) - var(--sp-8));
      overflow-y: auto;
      margin: 0;
      padding: var(--sp-2) var(--sp-3) var(--sp-4);
      color: var(--text-primary);
      background: var(--bg-surface);
      border: 1px solid var(--border-muted);
      border-radius: var(--radius-card);
      box-shadow: var(--shadow-window);
    }

    .appbar-menu .appbar-nav {
      flex-direction: column;
      gap: 2px;
    }

    .appbar-menu .appbar-nav a {
      padding: var(--sp-3);
      font-size: 1rem;
      color: var(--text-secondary);
    }

    .appbar-menu .appbar-nav a[aria-current="page"],
    .appbar-menu .appbar-nav a:hover {
      background: var(--bg-surface-alt);
      color: var(--text-primary);
    }

    .appbar-menu .appbar-account {
      flex-wrap: wrap;
      justify-content: space-between;
      padding-top: var(--sp-3);
      border-top: 1px solid var(--border-muted);
    }

    .appbar-menu .profile-name {
      display: inline;
      font-weight: 700;
    }

    .appbar-menu .appbar-account .btn {
      flex: 1;
    }

    /* app shell: the sidebar turns into a drawer behind the menu button */
    .app-shell,
    .app-shell.collapsed {
      grid-template-columns: minmax(0, 1fr);
    }

    .app-sidebar:not(:popover-open) {
      display: none;
    }

    .app-sidebar:popover-open {
      position: fixed;
      inset-block: 0;
      inset-inline: 0 auto;
      width: min(300px, 85vw);
      height: 100dvh;
      box-shadow: var(--shadow-window);
      animation: drawer-in var(--dur) var(--ease-out);
      --drawer-from: -100%;
    }

    .app-sidebar:popover-open:dir(rtl) {
      --drawer-from: 100%;
    }

    .app-sidebar::backdrop {
      background: var(--backdrop);
    }

    .app-menu-btn,
    .app-sidebar-close {
      display: inline-flex;
    }

    .ui-js .app-collapse-btn {
      display: none;
    }

    /* the drawer always shows the full labels */
    .app-shell.collapsed .app-sidebar :is(.nav-label, .nav-badge, .nav-group-label, .chevron, .app-sidebar-foot) {
      display: revert;
    }

    .app-shell.collapsed .app-sidebar .nav-initial {
      display: none;
    }

    .app-shell.collapsed .nav-row {
      justify-content: flex-start;
    }

    .doc-layout {
      grid-template-columns: minmax(0, 1fr);
      gap: var(--sp-4);
    }

    .doc-layout > .doc-toc {
      position: static;
      max-height: none;
      order: 0;
      border: 1px solid var(--border-muted);
      border-radius: var(--radius-card);
      background: var(--bg-surface);
      padding: var(--sp-1) var(--sp-2);
    }

    .doc-toc > summary {
      display: flex;
      align-items: center;
      gap: var(--sp-2);
      padding: var(--sp-2);
      font-weight: 700;
      cursor: pointer;
      list-style: none;
    }

    .doc-toc > summary::-webkit-details-marker {
      display: none;
    }

    .doc-toc > summary .chevron {
      margin-inline-start: auto;
      transition: transform var(--dur-fast);
    }

    .doc-toc[open] > summary .chevron {
      transform: rotate(180deg);
    }

    .doc-toc .toc-title {
      display: none;
    }
  }

  /* ---------- phone ---------- */
  @media (max-width: 599px) {
    .appbar {
      top: 0;
      width: 100%;
      max-width: none;
      margin: 0;
      padding-top: env(safe-area-inset-top, 0px);
      border-width: 0 0 1px;
      border-radius: 0;
      box-shadow: none;
    }

    .appbar-inner {
      padding-inline: var(--sp-3);
      gap: var(--sp-3);
    }

    .appbar-menu:popover-open {
      inset: calc(var(--appbar-height) + env(safe-area-inset-top, 0px)) 0 auto;
      width: auto;
      border-width: 0 0 1px;
      border-radius: 0;
    }

    .page-main {
      padding-inline: var(--sp-4);
      padding-block: var(--sp-6) var(--sp-12);
      gap: var(--sp-8);
    }

    .window:not(.keep-boxed) {
      border: none;
      border-radius: 0;
      box-shadow: none;
      overflow: visible;
      background: none;
    }

    .window:not(.keep-boxed) > .window-title,
    .window:not(.keep-boxed) > form > .window-title,
    .split-side > summary.window-title,
    .split-main > .window-title {
      padding-inline: 0;
      background: none;
      color: var(--text-primary);
      border-bottom: 1px solid var(--border-muted);
    }

    .window:not(.keep-boxed) > .window-title :is(.btn.secondary, .badge),
    .split :is(.split-side, .split-main) > .window-title :is(.btn.secondary, .badge) {
      border-color: var(--border-muted);
      color: var(--text-primary);
    }

    .window:not(.keep-boxed) > .window-title .btn.primary,
    .split :is(.split-side, .split-main) > .window-title .btn.primary {
      background: var(--accent-primary);
      color: var(--accent-primary-ink);
    }

    .window:not(.keep-boxed) .window-title :focus-visible {
      outline-color: var(--accent-primary);
    }

    .window:not(.keep-boxed) > .window-body,
    .window:not(.keep-boxed) > form > .window-body {
      padding-inline: 0;
    }

    .window:not(.keep-boxed) > .window-footer,
    .window:not(.keep-boxed) > form > .window-footer {
      padding-inline: 0;
    }

    .split-side,
    .split-main {
      border: none;
      border-radius: 0;
      box-shadow: none;
      overflow: visible;
      background: none;
    }

    .split-main > .window-body {
      padding: var(--sp-4) 0 0;
    }

    .split-side .window-body {
      padding: var(--sp-2) 0;
    }

    .markdown-body {
      font-size: 1.05rem;
      line-height: 1.65;
    }

    #toast-region {
      top: calc(var(--sp-2) + env(safe-area-inset-top, 0px));
      inset-inline-end: var(--sp-2);
      inset-inline-start: var(--sp-2);
      width: auto;
      align-items: stretch;
    }

    dialog.dialog,
    dialog.dialog.wide {
      width: 100%;
      max-width: 100%;
      max-height: 92dvh;
      margin: auto 0 0;
      border-radius: var(--radius-card) var(--radius-card) 0 0;
      border-width: 1px 0 0;
      padding-bottom: env(safe-area-inset-bottom, 0px);
    }

    dialog.dialog[open] {
      animation: sheet-in var(--dur) var(--ease-out);
    }

    dialog.dialog.command-palette {
      width: 100%;
      max-height: 85dvh;
      margin: 0 0 auto;
      border-width: 0 0 1px;
      border-radius: 0 0 var(--radius-card) var(--radius-card);
      padding-top: env(safe-area-inset-top, 0px);
    }

    dialog.dialog.command-palette[open] {
      animation: dialog-in var(--dur) var(--ease-out);
    }

    .command-button-keys,
    .command-button-label {
      display: none;
    }

    .command-button {
      min-width: 0;
      aspect-ratio: 1;
      padding: var(--sp-2);
    }

    dialog.dialog.drawer-end {
      width: 100%;
      height: fit-content;
      max-height: 92dvh;
      margin: auto 0 0;
      border-width: 1px 0 0;
      border-radius: var(--radius-card) var(--radius-card) 0 0;
      padding-bottom: env(safe-area-inset-bottom, 0px);
    }

    dialog.dialog.drawer-end[open] {
      animation: sheet-in var(--dur) var(--ease-out);
    }

    dialog.dialog.drawer-start {
      width: min(320px, 88vw);
      height: 100dvh;
      max-height: none;
      margin: 0;
      margin-inline-end: auto;
      border-radius: 0;
      border-width: 0;
      border-inline-end-width: 1px;
    }

    dialog.dialog.drawer-start[open] {
      animation: drawer-in var(--dur) var(--ease-out);
    }

    .app-main {
      padding-block: var(--sp-6) var(--sp-12);
      gap: var(--sp-6);
    }

    .dialog-actions {
      position: sticky;
      bottom: 0;
      flex-direction: column-reverse;
    }

    .dialog-actions .btn {
      width: 100%;
    }

    .breadcrumbs li:not(:first-child, .crumb-ellipsis, :nth-last-child(-n + 2)) {
      display: none;
    }

    .breadcrumbs .crumb-ellipsis {
      display: inline-flex;
    }

    .pagination li:has(> .page-num),
    .pagination li:has(> .page-gap) {
      display: none;
    }

    .pagination .page-summary {
      display: inline;
      padding: 0 var(--sp-2);
    }

    .pagination ul {
      justify-content: space-between;
      width: 100%;
    }

    .pagination .step-label {
      display: none;
    }

    .page-header {
      align-items: stretch;
      flex-direction: column;
    }
  }

  @keyframes sheet-in {
    from {
      transform: translateY(100%);
    }
  }
}