/* ===========================================================================
   OpenImpact.Horizon — canonical Sealed Horizon layout engine.
   Load order contract: tokens.css, then base.css, then the app stylesheet.
   Distilled from kora-base.css plus the hand-written patterns in Selo,
   Suara and Aprende. Every value below is a canonical token reference —
   no hardcoded colours, radii, shadows or durations belong in this file.
   =========================================================================== */

/* ---------------------------------------------------------------------------
   1. Reset, typography, container
   --------------------------------------------------------------------------- */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html, body {
    margin: 0;
    padding: 0;
}

/* Scrollbars: thin and quiet everywhere (ADR 0013). The standard properties do the work in
   current browsers; the -webkit- block below is only for older WebKit and Blink. CSS cannot
   hide a scrollbar until it is needed: that overlay behaviour belongs to the operating system.
   Opt out with .scrollbar-default (the browser's own bar) or .scrollbar-hidden (no bar, the
   content still scrolls; use it only where another control shows the position). */

* {
    scrollbar-width: thin;
    scrollbar-color: var(--scrollbar-thumb) transparent;
}

.scrollbar-default,
.scrollbar-default * {
    scrollbar-width: auto;
    scrollbar-color: auto;
}

.scrollbar-hidden {
    scrollbar-width: none;
}

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

@supports not (scrollbar-color: auto) {
  *::-webkit-scrollbar {
          width: 8px;
          height: 8px;
      }

  *::-webkit-scrollbar-track,
      *::-webkit-scrollbar-corner {
          background: transparent;
      }

  *::-webkit-scrollbar-thumb {
          background: var(--scrollbar-thumb);
          border-radius: var(--radius-pill);
      }

  *::-webkit-scrollbar-thumb:hover {
          background: var(--scrollbar-thumb-hover);
      }
}

body {
    font-family: var(--font-sans);
    background: var(--bg);
    color: var(--ink);
    line-height: var(--line-height);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

/* Links carry no underline by default — the browser's UA stylesheet adds one,
   and a bare `color` rule leaves it in place. Standalone links (nav items,
   cards, actions) read as links from context and position.

   .prose a deliberately opts back in: WCAG 1.4.1 wants >= 3:1 against the
   surrounding text when colour is the only cue for a link inside a block of
   text, and --accent-strong against the dark-mode --ink is only 2.90:1. In
   running prose the underline is doing real work, not decoration. */

a {
    color: var(--accent-strong);
    text-decoration: none;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-sans);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.15;
    color: var(--ink);
    margin: 0 0 var(--space-3);
}

h1 { font-size: var(--text-2xl); }

h2 { font-size: var(--text-xl); margin-top: var(--space-5); }

h3 { font-size: var(--text-lg); margin-top: var(--space-4); }

h4, h5, h6 { font-size: var(--text-base); margin-top: var(--space-3); }

h1:focus { outline: none; }

/* A centred content column with responsive padding. */

.container {
    width: 100%;
    max-width: 66rem;
    margin-inline: auto;
    padding-inline: var(--space-4);
    padding-block: var(--space-section);
}

@media (min-width: 768px) {
  .container { padding-inline: var(--space-5); }
}

@media (min-width: 1024px) {
  .container { padding-inline: var(--space-6); }
}

/* Comfortable reading width for prose-heavy content. */

.prose {
    max-width: var(--measure);
    font-size: var(--text-lg);
    line-height: var(--line-height);
}

.prose h1, .prose h2, .prose h3 {
    margin-top: var(--space-6);
}

.prose p {
    margin: 0 0 var(--space-4);
}

.prose a {
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
}

/* ---- Blazor framework boilerplate (every app currently repeats this) ---- */

.valid.modified:not([type="checkbox"]) {
    outline: 1px solid var(--accent);
}

.invalid {
    outline: 1px solid var(--danger);
}

.validation-message {
    color: var(--danger-text);
    font-size: var(--text-sm);
}

.blazor-error-boundary {
    background: var(--danger);
    padding: var(--space-4) var(--space-5);
    color: #fff;
    border-radius: var(--radius-sm);
}

.blazor-error-boundary::after {
    content: "An error has occurred.";
}

#blazor-error-ui {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--surface);
    border-top: 1px solid var(--warn);
    color: var(--ink);
    padding: var(--space-3) var(--space-5);
    box-shadow: var(--shadow-float);
    z-index: 1000;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    float: right;
}

/* ---------------------------------------------------------------------------
   2. Buttons
   --------------------------------------------------------------------------- */

/* The pill controls (.btn, .status-pill, .page-tabs a) carry deliberately
   off-grid optical padding. These are not scale leaks — snapping them to
   --space-* would visibly resize every button in the system. Leave them. */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: 0.62rem 1.25rem;
    border: 1px solid transparent;
    border-radius: var(--radius-pill);
    font: inherit;
    font-weight: 600;
    text-decoration: none;
    text-align: center;
    cursor: pointer;
    transition: transform var(--dur-fast) var(--ease),
                box-shadow var(--dur-fast) ease,
                background var(--dur-fast) ease,
                border-color var(--dur-fast) ease,
                color var(--dur-fast) ease;
}

.btn:active {
    transform: scale(0.98);
}

.btn[disabled],
.btn.is-disabled {
    opacity: 0.5;
    pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
  .btn:hover {
          transform: translateY(-1px);
      }
}

@media (prefers-reduced-motion: reduce) {
  .btn:active {
          transform: none;
      }
}

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

.btn-primary:hover {
    background: var(--accent-strong);
}

.btn-secondary {
    background: var(--accent-soft);
    color: var(--accent-strong);
}

.btn-secondary:hover {
}

.btn-ghost {
    background: transparent;
    color: var(--ink);
    border-color: var(--line);
}

.btn-ghost:hover {
    background: var(--surface-sunk);
}

.btn-danger {
    background: var(--danger);
    color: #fff;
}

.btn-danger:hover {
    filter: brightness(0.92);
}

/* ---------------------------------------------------------------------------
   3. Forms
   --------------------------------------------------------------------------- */

.field {
    margin-bottom: var(--space-4);
}

.field > label,
label {
    display: block;
    margin-bottom: var(--space-2);
    font-weight: 600;
    font-size: var(--text-sm);
    color: var(--ink);
}

input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="submit"]):not([type="button"]):not([type="file"]),
select,
textarea {
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding: var(--space-3);
    font: inherit;
    color: var(--ink);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    transition: border-color var(--dur-fast) ease, box-shadow var(--dur-fast) ease;
}

input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="submit"]):not([type="button"]):not([type="file"]):focus,
select:focus,
textarea:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-glow);
}

input:disabled,
select:disabled,
textarea:disabled {
    background: var(--surface-sunk);
    color: var(--muted);
    cursor: not-allowed;
    opacity: 0.7;
}

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

.help {
    display: block;
    margin-top: var(--space-1);
    font-size: var(--text-sm);
    color: var(--muted);
}

.help.is-danger {
    color: var(--danger-text);
}

/* ---------------------------------------------------------------------------
   4. Grid and spacing helpers
   --------------------------------------------------------------------------- */

.grid-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
    gap: var(--space-4);
}

.stack {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.stack.gap-2 { gap: var(--space-2); }

.stack.gap-4 { gap: var(--space-4); }

.stack.gap-6 { gap: var(--space-6); }

.cluster {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
}

/* ---------------------------------------------------------------------------
   5. Structural patterns
   --------------------------------------------------------------------------- */

/* Card */

.card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.card-header {
    display: flex;
    align-items: stretch;
    border-bottom: 1px solid var(--line-subtle);
}

.card-header-title {
    display: flex;
    align-items: center;
    flex-grow: 1;
    padding: var(--space-4) var(--space-5);
    font-weight: 700;
    color: var(--ink);
}

.card-header-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-4) var(--space-5);
    cursor: pointer;
}

.card-content {
    padding: var(--space-5);
}

.card-footer {
    display: flex;
    align-items: stretch;
    border-top: 1px solid var(--line);
}

.card-footer-item {
    display: flex;
    flex: 1 1 0;
    align-items: center;
    justify-content: center;
    padding: var(--space-3);
}

.card-footer-item:not(:last-child) {
    border-right: 1px solid var(--line);
}

/* Masthead: sticky glass bar. color-mix derives the translucent glass tint
   from --surface at request time, so it works for any surface colour a
   consumer's theme sets (including dark mode), not just white. */

.masthead {
    position: sticky;
    top: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-3) var(--space-5);
    background: color-mix(in srgb, var(--surface) 82%, transparent);
    backdrop-filter: saturate(160%) blur(16px);
    -webkit-backdrop-filter: saturate(160%) blur(16px);
    border-bottom: 1px solid var(--line-subtle);
}

/* Shell: sidebar-plus-content admin layout, collapsing to a horizontal
   scrolling top bar under 768px. */

.shell {
    display: flex;
    min-height: 100vh;
}

.shell-sidebar {
    flex: 0 0 15rem;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-5) var(--space-3);
    background: var(--surface);
    border-right: 1px solid var(--line-subtle);
}

.shell-main {
    flex: 1 1 auto;
    min-width: 0;
    padding: var(--space-6) var(--space-5);
}

@media (max-width: 768px) {
  .shell {
          flex-direction: column;
      }

  .shell-sidebar {
          flex: 0 0 auto;
          width: 100%;
          flex-direction: row;
          overflow-x: auto;
          position: sticky;
          top: 0;
          z-index: 6;
          border-right: 0;
          border-bottom: 1px solid var(--line-subtle);
          background: color-mix(in srgb, var(--surface) 82%, transparent);
          backdrop-filter: saturate(160%) blur(16px);
          -webkit-backdrop-filter: saturate(160%) blur(16px);
      }

  .shell-main {
          padding: var(--space-5) var(--space-4);
      }
}

/* Table */

.table {
    width: 100%;
    border-collapse: collapse;
}

.table th,
.table td {
    padding: var(--space-3) var(--space-4);
    text-align: left;
    border-bottom: 1px solid var(--line-subtle);
}

.table th {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

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

/* Modal scrim and slide-over scaffolding, geometry ported from Suara's
   SlideOver.razor.css. See "Flagged discrepancy for Phase 3" in
   docs/superpowers/plans/2026-07-05-horizon-phase-2-base-css.md before
   wiring the Blazor SlideOver component (Task 3.9) to these classes. */

.modal-scrim {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.42);
    z-index: 60;
}

.slide-over {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(30rem, 100%);
    background: var(--surface);
    border-left: 1px solid var(--line);
    z-index: 61;
    display: flex;
    flex-direction: column;
    outline: none;
}

.slide-over-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-4) var(--space-5);
    border-bottom: 1px solid var(--line);
    flex: 0 0 auto;
}

.slide-over-title {
    margin: 0;
    font-size: var(--text-lg);
}

.slide-over-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border: none;
    background: none;
    color: var(--muted);
    cursor: pointer;
    border-radius: var(--radius-sm);
}

.slide-over-close:hover {
    background: var(--surface-sunk);
    color: var(--ink);
}

.slide-over-body {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: var(--space-5);
}

.slide-over-foot {
    flex: 0 0 auto;
    padding: var(--space-4) var(--space-5);
    border-top: 1px solid var(--line);
    display: flex;
    gap: var(--space-3);
    justify-content: flex-end;
}

@media (prefers-reduced-motion: no-preference) {
  .slide-over {
          animation: horizon-slide-over-in var(--dur-slow) var(--ease);
      }

  .modal-scrim {
          animation: horizon-slide-over-fade var(--dur-slow) ease;
      }
}

@keyframes horizon-slide-over-in {
    from { transform: translateX(2rem); opacity: 0.6; }
    to { transform: translateX(0); opacity: 1; }
}

@keyframes horizon-slide-over-fade {
    from { opacity: 0; }
    to { opacity: 1; }
}

@media (max-width: 768px) {
  .slide-over {
          width: 100%;
          border-left: none;
      }
}

/* Status pill */

.status-pill {
    display: inline-block;
    padding: 0.2rem 0.65rem;
    border-radius: var(--radius-pill);
    font-size: var(--text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    /* The tint and the text both come from two custom properties, so a tone only sets those two.
       The text is mixed 35% toward the ink so it clears 4.5:1 on the tint (the old accent-on-accent-soft
       pill measured 2.96:1). A test computes the contrast of every tone, theme and surface. */
    --tone: var(--accent);
    --tone-text: var(--accent-strong);
    background: color-mix(in srgb, var(--tone) 8%, transparent);
    color: color-mix(in srgb, var(--tone-text) 65%, var(--ink));
}

.status-pill-ok { --tone: var(--ok); --tone-text: var(--ok-text); }
.status-pill-warn { --tone: var(--warn); --tone-text: var(--warn-text); }
.status-pill-danger { --tone: var(--danger); --tone-text: var(--danger-text); }
/* Neutral is the one tone that is not a tint: a sunk surface with muted text mixed toward the ink. */
.status-pill-neutral {
    --tone: var(--muted);
    --tone-text: var(--muted);
    background: var(--surface-sunk);
    color: color-mix(in srgb, var(--muted) 65%, var(--ink));
}

/* Empty state */

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

.empty-state-icon {
    color: var(--line);
}

.empty-state-message {
    margin: 0;
    max-width: var(--measure);
}

.empty-state-action {
    margin-top: var(--space-2);
}

/* Progress bar */

.progress {
    height: var(--space-2);
    border-radius: var(--radius-pill);
    background: var(--surface-sunk);
    overflow: hidden;
}

.progress-fill {
    height: 100%;
    background: var(--accent);
    border-radius: var(--radius-pill);
    transition: width var(--dur-slow) var(--ease);
}

@media (prefers-reduced-motion: reduce) {
  .progress-fill {
          transition: none;
      }
}

/* Metric card and summary cards. auto-fit/11rem match Suara's own values
   exactly (this component is sourced from Suara specifically), which is
   deliberately different from the generic .grid-cards primitive above
   (auto-fill/16rem). */

.summary-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
    gap: var(--space-4);
}

.metric-card {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    padding: var(--space-4);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
}

.metric-label {
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--muted);
}

.metric-value {
    font-size: var(--text-xl);
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--accent-strong);
    font-variant-numeric: tabular-nums;
}

.metric-detail {
    font-size: var(--text-sm);
    color: var(--muted);
}

/* Page header */

.page-header {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding-bottom: var(--space-2);
    margin-bottom: var(--space-section);
    border-bottom: 1px solid var(--line);
}

.page-breadcrumb {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    font-size: var(--text-sm);
    color: var(--muted);
}

.page-breadcrumb a {
    color: var(--muted);
}

.page-breadcrumb a:hover {
    color: var(--accent);
}

.page-header-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-4);
    flex-wrap: wrap;
}

.page-header-titles {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex-wrap: wrap;
}

.page-title {
    margin: 0;
}

.page-header-actions {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
}

.page-tabs {
    display: flex;
    gap: var(--space-1);
    flex-wrap: wrap;
}

.page-tabs a {
    padding: 0.4rem 0.7rem;
    border-radius: var(--radius-pill);
    color: var(--muted);
    text-decoration: none;
    font-size: var(--text-sm);
}

.page-tabs a:hover {
    background: var(--surface-sunk);
    color: var(--ink);
}

.page-tabs a.active {
    background: var(--accent-soft);
    color: var(--accent-strong);
    font-weight: 600;
}

/* ---------------------------------------------------------------------------
   6. Avatar
   --------------------------------------------------------------------------- */

.avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: var(--radius-pill);
    color: #fff;
    font-weight: 700;
    letter-spacing: 0.01em;
    user-select: none;
    overflow: hidden;
}

.avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.avatar-sm { width: 1.75rem; height: 1.75rem; font-size: var(--text-xs); }

.avatar-md { width: 2.25rem; height: 2.25rem; font-size: var(--text-sm); }

.avatar-lg { width: 3.5rem; height: 3.5rem; font-size: var(--text-lg); }

/* A small, brand-neutral palette so avatars for different people are visually
   distinguishable (Avatar.razor picks one deterministically from a name
   hash). These are fixed implementation-detail hues, not a themeable
   surface, so they live here rather than in tokens.css. */

.avatar-hue-0 { background: #0F766E; }

.avatar-hue-1 { background: #7C3AED; }

.avatar-hue-2 { background: #C2410C; }

.avatar-hue-3 { background: #BE123C; }

.avatar-hue-4 { background: #0369A1; }

.avatar-hue-5 { background: #4D7C0F; }

/* ---------------------------------------------------------------------------
   7. Alert
   --------------------------------------------------------------------------- */

.alert {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-5);
    border-radius: var(--radius-md);
    border: 1px solid transparent;
}

.alert-icon {
    display: flex;
    flex: 0 0 auto;
    margin-top: 0.15rem;
}

.alert-body {
    flex: 1 1 auto;
    min-width: 0;
}

.alert-title {
    margin: 0 0 var(--space-1);
    font-weight: 700;
}

.alert-message {
    margin: 0;
}

.alert-dismiss {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    cursor: pointer;
    padding: var(--space-1);
    border-radius: var(--radius-sm);
    color: inherit;
    opacity: 0.7;
}

.alert-dismiss:hover {
    opacity: 1;
    background: rgba(0, 0, 0, 0.06);
}

.alert-info {
    background: var(--surface-sunk);
    border-color: var(--line);
    color: var(--ink);
}

.alert-success {
    background: color-mix(in srgb, var(--ok) 8%, var(--surface));
    border-color: color-mix(in srgb, var(--ok) 25%, transparent);
    color: var(--ok-text);
}

.alert-warning {
    background: color-mix(in srgb, var(--warn) 8%, var(--surface));
    border-color: color-mix(in srgb, var(--warn) 25%, transparent);
    color: var(--warn-text);
}

.alert-danger {
    background: color-mix(in srgb, var(--danger) 8%, var(--surface));
    border-color: color-mix(in srgb, var(--danger) 25%, transparent);
    color: var(--danger-text);
}

/* ---------------------------------------------------------------------------
   8. Tooltip
   --------------------------------------------------------------------------- */

.tooltip-wrapper {
    position: relative;
    display: inline-flex;
}

.tooltip-bubble {
    position: absolute;
    z-index: 40;
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-sm);
    background: var(--ink);
    color: var(--surface);
    font-size: var(--text-xs);
    line-height: 1.4;
    white-space: nowrap;
    box-shadow: var(--shadow-float);
    pointer-events: none;
}

.tooltip-top {
    bottom: calc(100% + 0.4rem);
    left: 50%;
    transform: translateX(-50%);
}

.tooltip-bottom {
    top: calc(100% + 0.4rem);
    left: 50%;
    transform: translateX(-50%);
}

.tooltip-left {
    right: calc(100% + 0.4rem);
    top: 50%;
    transform: translateY(-50%);
}

.tooltip-right {
    left: calc(100% + 0.4rem);
    top: 50%;
    transform: translateY(-50%);
}

/* Section 9: Modal — centred dialog, sibling to slide-over above. Shares
   .modal-scrim as its backdrop; geometry here is new (slide-over is a
   side panel, modal is a centred card). */

.modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-height: calc(100vh - 4rem);
    background: var(--surface);
    border-radius: var(--radius-lg);
    z-index: 61;
    display: flex;
    flex-direction: column;
    outline: none;
}

.modal-sm { width: min(24rem, calc(100vw - 2rem)); }

.modal-md { width: min(32rem, calc(100vw - 2rem)); }

.modal-lg { width: min(48rem, calc(100vw - 2rem)); }

.modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-4) var(--space-5);
    border-bottom: 1px solid var(--line);
    flex: 0 0 auto;
}

.modal-title {
    margin: 0;
    font-size: var(--text-lg);
}

.modal-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border: none;
    background: none;
    color: var(--muted);
    cursor: pointer;
    border-radius: var(--radius-sm);
}

.modal-close:hover {
    background: var(--surface-sunk);
    color: var(--ink);
}

.modal-body {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: var(--space-5);
}

.modal-foot {
    flex: 0 0 auto;
    padding: var(--space-4) var(--space-5);
    border-top: 1px solid var(--line);
    display: flex;
    gap: var(--space-3);
    justify-content: flex-end;
}

@media (prefers-reduced-motion: no-preference) {
  .modal {
          animation: horizon-modal-in var(--dur-slow) var(--ease);
      }
}

@keyframes horizon-modal-in {
    from { opacity: 0; transform: translate(-50%, -50%) scale(0.96); }
    to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

@media (max-width: 576px) {
  .modal-sm,
      .modal-md,
      .modal-lg {
          width: calc(100vw - 1.5rem);
      }

  .modal {
          max-height: calc(100vh - 3rem);
      }
}

/* Section 10: Toast — event-driven notification stack, rendered by
   ToastHost.razor. Fixed top-right stack; colour variants reuse the same
   solid-fill treatment as .badge rather than Alert's tinted-background
   treatment, since toasts sit on arbitrary page backgrounds. */

.toast-container {
    position: fixed;
    top: var(--space-4);
    right: var(--space-4);
    z-index: 70;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    max-width: 22rem;
}

.toast {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-float);
    background: var(--ink);
    color: var(--surface);
}

.toast-message {
    flex: 1 1 auto;
    font-size: var(--text-sm);
}

.toast-dismiss {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    cursor: pointer;
    padding: var(--space-1);
    color: inherit;
    opacity: 0.7;
}

.toast-dismiss:hover {
    opacity: 1;
}

.toast-success { background: var(--ok); }

.toast-warning { background: var(--warn); }

.toast-danger { background: var(--danger); }

@media (prefers-reduced-motion: no-preference) {
  .toast {
          animation: horizon-toast-in var(--dur-base) var(--ease);
      }
}

@keyframes horizon-toast-in {
    from { opacity: 0; transform: translateX(1rem); }
    to { opacity: 1; transform: translateX(0); }
}

@media (max-width: 576px) {
  .toast-container {
          left: var(--space-4);
          right: var(--space-4);
          max-width: none;
      }
}

/* Section 11: Tabs — underline-indicator style (not Kora's gradient-pill
   theming, which is decorative beyond Sealed Horizon's single-accent
   language). Tabs.razor cascades itself to TabItem children; each TabItem
   renders its own .tab-panel only when active. */

.tabs {
    display: flex;
    gap: var(--space-2);
    border-bottom: 1px solid var(--line);
}

.tab-btn {
    padding: var(--space-3) var(--space-4);
    border: none;
    border-bottom: 2px solid transparent;
    background: none;
    color: var(--muted);
    font-size: var(--text-sm);
    font-weight: 500;
    cursor: pointer;
    margin-bottom: -1px;
    transition: color var(--dur-base) var(--ease), border-color var(--dur-base) var(--ease);
}

.tab-btn:hover {
    color: var(--ink);
}

.tab-btn.active {
    color: var(--accent);
    border-bottom-color: var(--accent);
}

.tab-panel {
    padding-top: var(--space-5);
}

/* Section 12: Dropdown — reuses the scrim click-catcher idiom already used
   by .modal-scrim (Modal/SlideOver), but transparent and layered below
   those (z-index 55/56 vs 60/61/70), for a plain outside-click-to-close
   menu with no dimming. */

.dropdown-wrapper {
    position: relative;
    display: inline-block;
}

.dropdown-trigger {
    display: inline-flex;
    cursor: pointer;
}

.dropdown-scrim {
    position: fixed;
    inset: 0;
    z-index: 55;
    background: transparent;
}

.dropdown-menu {
    position: absolute;
    top: calc(100% + var(--space-2));
    min-width: 12rem;
    background: var(--surface);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-float);
    padding: var(--space-2);
    z-index: 56;
    outline: none;
}

.dropdown-left {
    left: 0;
}

.dropdown-right {
    right: 0;
}

.dropdown-item {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    width: 100%;
    padding: var(--space-2) var(--space-3);
    border: none;
    background: none;
    color: var(--ink);
    font-size: var(--text-sm);
    text-align: left;
    cursor: pointer;
    border-radius: var(--radius-sm);
}

.dropdown-item:hover {
    background: var(--surface-sunk);
}

@media (prefers-reduced-motion: no-preference) {
  .dropdown-menu {
          animation: horizon-dropdown-in var(--dur-base) var(--ease);
      }
}

@keyframes horizon-dropdown-in {
    from { opacity: 0; transform: translateY(-0.25rem); }
    to { opacity: 1; transform: translateY(0); }
}

/* Section 13: DataTable — sortable/searchable/paginated wrapper around the
   existing .table styling (Phase 2); this section adds only the toolbar,
   sort affordance and pagination footer, not the table's own cell styling. */

.data-table-wrapper {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.data-table-toolbar {
    display: flex;
    justify-content: flex-end;
}

.data-table-toolbar input {
    max-width: 20rem;
}

.table-container {
    overflow-x: auto;
}

.table th.sortable {
    cursor: pointer;
    user-select: none;
}

.table th.sortable:hover {
    color: var(--ink);
}

.sort-indicator {
    margin-left: var(--space-1);
    font-size: 0.7em;
}

.table tbody tr.clickable {
    cursor: pointer;
}

.data-table-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
}

.data-table-page-info {
    font-size: var(--text-sm);
    color: var(--muted);
}

/* Section 14: Select — custom single-select combobox. Trigger is styled to
   match the bare input/select styling from Task 2.3 (border, radius,
   padding, focus ring); the open menu reuses Dropdown's existing
   .dropdown-scrim for outside-click closing rather than a second scrim
   class, and its entrance animation reuses the horizon-dropdown-in
   keyframe already defined for Dropdown. */

.select-wrapper {
    position: relative;
}

.select-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    width: 100%;
    box-sizing: border-box;
    padding: var(--space-3);
    font: inherit;
    color: var(--ink);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    cursor: pointer;
    text-align: left;
    transition: border-color var(--dur-fast) ease, box-shadow var(--dur-fast) ease;
}

.select-trigger:focus,
.select-trigger.is-open {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-glow);
}

.select-value.is-placeholder {
    color: var(--muted);
}

.select-menu {
    position: absolute;
    top: calc(100% + var(--space-2));
    left: 0;
    right: 0;
    background: var(--surface);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-float);
    padding: var(--space-2);
    z-index: 56;
    outline: none;
}

.select-search {
    padding: var(--space-1) var(--space-1) var(--space-2);
}

.select-options {
    max-height: 16rem;
    overflow-y: auto;
}

.select-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: var(--text-sm);
}

.select-option:hover,
.select-option.is-focused {
    background: var(--surface-sunk);
}

.select-option.is-selected {
    color: var(--accent);
    font-weight: 600;
}

@media (prefers-reduced-motion: no-preference) {
  .select-menu {
          animation: horizon-dropdown-in var(--dur-base) var(--ease);
      }
}

/* ===========================================================================
   Navigation: SideNav rail. Presentation-only chrome; all colours from tokens.
   Collapsed = icon-only 64px rail; expanded = 240px icon+label. The rail is
   position:fixed to the left edge (real app usage and gallery preview alike).
   =========================================================================== */

.side-nav {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    background: var(--surface);
    border-right: 1px solid var(--line);
    z-index: 40;
    overflow: hidden;
    transition: width var(--dur-slow) var(--ease);
}

.side-nav.is-collapsed { width: 64px; }

.side-nav.is-expanded { width: 240px; }

/* ===========================================================================
   App shell: the in-flow partner to the fixed .side-nav rail. .app-main clears
   the rail and tracks its collapse via :has(), with no JS and no binding.

   It deliberately owns NO padding and NO max-width — nest a .container inside
   for the reading column, or omit it for full-bleed. .container already owns
   padding-inline and the --space-section rhythm; a second padding owner here
   would double up.

   The 64px/240px literals mirror .side-nav.is-collapsed/.is-expanded above.
   They are structural constants, not a themeable surface, so they stay literal.
   =========================================================================== */

.app-shell {
    min-height: 100vh;
}

.app-main {
    margin-left: 64px;
    transition: margin-left var(--dur-slow) var(--ease);
}

.app-shell:has(.side-nav.is-expanded) .app-main {
    margin-left: 240px;
}

@media (max-width: 768px) {
  /* The rail hides and becomes an overlay drawer; content reclaims the width.
  
         Both selectors are required. A media query adds NO specificity, so a bare
         `.app-main` here would lose to the `:has()` rule above and the 240px rail
         offset would persist on mobile — which is the dead-space bug this whole
         primitive exists to remove. Repeating the `:has()` selector matches its
         specificity, and this block wins on source order. */

  .app-main,
      .app-shell:has(.side-nav.is-expanded) .app-main {
          margin-left: 0;
      }
}

@media (prefers-reduced-motion: reduce) {
  .side-nav { transition: none; }
}

.side-nav-brand {
    display: flex;
    align-items: center;
    min-height: 64px;
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--line-subtle);
    overflow: hidden;
    white-space: nowrap;
}

.side-nav-body {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    padding: var(--space-3) var(--space-2);
    overflow-y: auto;
    overflow-x: hidden;
}

.side-nav-footer {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    padding: var(--space-2);
    border-top: 1px solid var(--line-subtle);
}

/* Rail item: a grid so the icon column is fixed and the label fills the rest. */

.nav-item {
    display: grid;
    grid-template-columns: 40px 1fr auto;
    align-items: center;
    gap: var(--space-2);
    height: 44px;
    padding: 0 var(--space-2);
    border-radius: var(--radius-sm);
    color: var(--ink);
    text-decoration: none;
    position: relative;
    transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}

.nav-item:hover { background: var(--surface-sunk); }

.nav-item-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    color: var(--muted);
}

.nav-item-label {
    font-size: var(--text-sm);
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.nav-item-badge {
    justify-self: end;
    min-width: 1.25rem;
    padding: 0 var(--space-2);
    border-radius: var(--radius-pill);
    background: var(--accent-soft);
    color: var(--accent-strong);
    font-size: var(--text-xs);
    font-weight: 700;
    text-align: center;
}

/* Active: accent left-bar + soft fill + accent icon. Tokenised equivalent of
   Kora's teal accent, so it themes with the app automatically. */

.nav-item.is-active {
    background: var(--accent-soft);
    color: var(--accent-strong);
}

.nav-item.is-active .nav-item-icon { color: var(--accent-strong); }

.nav-item.is-active::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 60%;
    border-radius: 0 var(--radius-xs) var(--radius-xs) 0;
    background: var(--accent);
}

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

/* Group heading */

.nav-group { display: contents; }

.nav-group-label {
    padding: var(--space-3) var(--space-2) var(--space-1);
    font-size: var(--text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--muted);
    white-space: nowrap;
    overflow: hidden;
}

/* Toggle button shares the rail-item shape. */

.side-nav-toggle {
    display: grid;
    grid-template-columns: 40px 1fr;
    align-items: center;
    gap: var(--space-2);
    height: 44px;
    margin: var(--space-2);
    padding: 0 var(--space-2);
    border: none;
    background: none;
    color: var(--muted);
    border-radius: var(--radius-sm);
    cursor: pointer;
    text-align: left;
}

.side-nav-toggle:hover { background: var(--surface-sunk); color: var(--ink); }

/* Collapsed rail: hide every text label, keep only icons. */

.side-nav.is-collapsed .nav-item-label,
.side-nav.is-collapsed .nav-item-badge,
.side-nav.is-collapsed .nav-item-trailing,
.side-nav.is-collapsed .side-nav-toggle > .nav-item-label,
.side-nav.is-collapsed .side-nav-brand > * {
    display: none;
}

/* Collapsed group label becomes a divider rule instead of text. */

.side-nav.is-collapsed .nav-group-label {
    height: 1px;
    padding: 0;
    margin: var(--space-2) var(--space-2);
    background: var(--line);
    color: transparent;
    overflow: hidden;
}

/* SideNav mobile drawer: below 768px the rail hides; when open it slides in
   above the reused .modal-scrim (scrim z-index 60, so the drawer sits above). */

@media (max-width: 768px) {
  .side-nav {
          transform: translateX(-100%);
          transition: transform var(--dur-slow) var(--ease);
          z-index: 61;
      }

  /* On mobile the drawer always shows the expanded (icon+label) form. */

  .side-nav.is-drawer-open {
          transform: translateX(0);
          width: 240px;
      }

  .side-nav.is-drawer-open .nav-item-label,
      .side-nav.is-drawer-open .nav-item-badge,
      .side-nav.is-drawer-open .nav-group-label,
      .side-nav.is-drawer-open .side-nav-brand > * {
          display: revert;
      }

  /* The collapse toggle is meaningless in the drawer: hide it on mobile. */

  .side-nav-toggle { display: none; }
}

@media (max-width: 768px) and (prefers-reduced-motion: reduce) {
  .side-nav { transition: none; }
}

/* ===========================================================================
   Navigation: TopNav app bar. Sticky, translucent surface, hairline underline.
   =========================================================================== */

.top-nav {
    position: sticky;
    top: 0;
    display: flex;
    align-items: center;
    gap: var(--space-4);
    height: 56px;
    padding: 0 var(--space-4);
    background: var(--surface);
    border-bottom: 1px solid var(--line);
    z-index: 30;
}

.top-nav-brand {
    display: flex;
    align-items: center;
    font-weight: 700;
    white-space: nowrap;
}

.top-nav-links {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    flex: 1 1 auto;
    overflow-x: auto;
}

.top-nav-actions {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-left: auto;
}

.top-nav-item {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    height: 36px;
    padding: 0 var(--space-3);
    border-radius: var(--radius-sm);
    color: var(--muted);
    text-decoration: none;
    font-size: var(--text-sm);
    font-weight: 500;
    white-space: nowrap;
    transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}

.top-nav-item:hover { background: var(--surface-sunk); color: var(--ink); }

.top-nav-item.is-active {
    color: var(--accent-strong);
    background: var(--accent-soft);
}

.top-nav-item:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: -2px;
}

.top-nav-menu {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: none;
    background: none;
    color: var(--ink);
    border-radius: var(--radius-sm);
    cursor: pointer;
}

.top-nav-menu:hover { background: var(--surface-sunk); }

/* ===========================================================================
   BottomSheet: bottom-anchored overlay. Stays docked to the bottom edge at
   every viewport width; only its width and horizontal centring change.
   Shares .modal-scrim as its backdrop (Section 9's convention). Top corners
   only are rounded; the bottom edge is always flush with the viewport.
   =========================================================================== */

.bottom-sheet {
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: min(80%, 75rem);
    max-height: var(--sheet-max-height, 85vh);
    display: flex;
    flex-direction: column;
    background: var(--surface);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    z-index: 61;
    outline: none;
}

/* Tablet: wider, same 75rem cap as desktop. */

@media (max-width: 1024px) {
  .bottom-sheet {
          width: min(90%, 75rem);
      }
}

/* Mobile: full width, edge-to-edge, no horizontal centring transform. */

@media (max-width: 768px) {
  .bottom-sheet {
          left: 0;
          width: 100%;
          transform: none;
      }
}

.bottom-sheet-handle {
    width: 2.25rem;
    height: 0.25rem;
    flex-shrink: 0;
    margin: var(--space-3) auto 0;
    background: var(--line);
    border-radius: var(--radius-pill);
}

.bottom-sheet-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-4) var(--space-5);
    border-bottom: 1px solid var(--line);
    flex: 0 0 auto;
}

.bottom-sheet-title {
    margin: 0;
    font-size: var(--text-lg);
}

.bottom-sheet-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border: none;
    background: none;
    color: var(--muted);
    cursor: pointer;
    border-radius: var(--radius-sm);
}

.bottom-sheet-close:hover {
    background: var(--surface-sunk);
    color: var(--ink);
}

.bottom-sheet-body {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: var(--space-5);
    padding-bottom: calc(var(--space-5) + env(safe-area-inset-bottom, 0px));
}

.bottom-sheet-foot {
    flex: 0 0 auto;
    padding: var(--space-4) var(--space-5);
    padding-bottom: calc(var(--space-4) + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--line);
    display: flex;
    gap: var(--space-3);
    justify-content: flex-end;
}

/* Entrance: slide up from the bottom. Desktop/tablet combine the slide with
   the horizontal centring transform; mobile has no centring transform to
   preserve, so it gets its own keyframe. */

@media (prefers-reduced-motion: no-preference) {
  .bottom-sheet {
          animation: horizon-bottom-sheet-in var(--dur-slow) var(--ease);
      }
}

@keyframes horizon-bottom-sheet-in {
    from { opacity: 0; transform: translateX(-50%) translateY(100%); }
    to { opacity: 1; transform: translateX(-50%) translateY(0); }
}

@media (max-width: 768px) and (prefers-reduced-motion: no-preference) {
  .bottom-sheet {
          animation-name: horizon-bottom-sheet-in-mobile;
      }
}

@keyframes horizon-bottom-sheet-in-mobile {
    from { opacity: 0; transform: translateY(100%); }
    to { opacity: 1; transform: translateY(0); }
}

/* ---------------------------------------------------------------------------
   Button sizes, loading and icon-only (the <Button> component's states)
   --------------------------------------------------------------------------- */

.btn-sm {
    padding: 0.35rem 0.85rem;
    font-size: var(--text-sm);
}

.btn-lg {
    padding: 0.8rem 1.6rem;
    font-size: var(--text-lg);
}

.btn-icon {
    padding: 0.55rem;
    aspect-ratio: 1;
}

/* The label is made transparent (not hidden) so the button keeps its width while
   loading. The spinner colour is per tone because the text colour is transparent. */

.btn {
    --btn-spinner: #fff;
}

.btn-secondary {
    --btn-spinner: var(--accent-strong);
}

.btn-ghost {
    --btn-spinner: var(--ink);
}

.btn.is-loading {
    position: relative;
    color: transparent;
    pointer-events: none;
}

.btn.is-loading::after {
    content: "";
    position: absolute;
    width: 1em;
    height: 1em;
    border: 2px solid var(--btn-spinner);
    border-right-color: transparent;
    border-radius: 50%;
    animation: horizon-spin 0.7s linear infinite;
}

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

@media (prefers-reduced-motion: reduce) {
  .btn.is-loading::after,
      .spinner {
          animation-duration: 2s;
      }
}

/* ---------------------------------------------------------------------------
   Checkbox, Switch, RadioGroup
   --------------------------------------------------------------------------- */

.check,
.switch {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    margin-bottom: 0;
    font-weight: 400;
    font-size: var(--text-base);
    cursor: pointer;
}

.check input {
    margin-top: 0.3rem;
    accent-color: var(--accent-strong);
}

.switch {
    align-items: center;
}

.switch input {
    position: absolute;
    opacity: 0;
}

.switch-track {
    position: relative;
    flex: none;
    width: 2.4rem;
    height: 1.4rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-pill);
    background: var(--line);
    transition: background var(--dur-fast) ease, border-color var(--dur-fast) ease;
}

.switch-track::after {
    content: "";
    position: absolute;
    top: 0.1rem;
    left: 0.1rem;
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
    background: var(--surface);
    outline: 1px solid var(--line);
    transition: transform var(--dur-fast) var(--ease);
}

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

.switch input:checked + .switch-track::after {
    transform: translateX(1rem);
}

.switch input:focus-visible + .switch-track {
    box-shadow: 0 0 0 3px var(--accent-glow);
}

.radio-group {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin: 0 0 var(--space-4);
    padding: 0;
    border: 0;
}

.radio-group legend {
    margin-bottom: var(--space-2);
    padding: 0;
    font-weight: 600;
    font-size: var(--text-sm);
}

/* ---------------------------------------------------------------------------
   Breadcrumbs
   --------------------------------------------------------------------------- */

.breadcrumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: var(--text-sm);
    color: var(--muted);
}

.breadcrumbs li + li::before {
    content: "/";
    margin-right: var(--space-2);
    opacity: 0.6;
}

.breadcrumbs a {
    color: var(--muted);
}

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

.breadcrumbs [aria-current="page"] {
    font-weight: 600;
    color: var(--ink);
}

/* Narrow: keep first and last, collapse whatever sits between into one ellipsis. */

@media (max-width: 576px) {
  .breadcrumbs li:not(:first-child):not(:last-child) {
          display: none;
      }

  .breadcrumbs li:first-child:not(:nth-last-child(-n+2))::after {
          content: "/ \2026";
          margin-left: var(--space-2);
          opacity: 0.6;
      }
}

/* ---------------------------------------------------------------------------
   Skeleton and Spinner
   --------------------------------------------------------------------------- */

.skeleton {
    height: 0.9rem;
    border-radius: var(--radius-surface);
    background: linear-gradient(90deg, var(--surface-sunk) 30%, var(--line-subtle) 50%, var(--surface-sunk) 70%);
    background-size: 200% 100%;
    animation: horizon-shimmer 1.4s linear infinite;
}

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

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

@media (prefers-reduced-motion: reduce) {
  .skeleton {
          animation: none;
      }
}

.spinner {
    display: inline-block;
    border: 2px solid var(--line);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: horizon-spin 0.8s linear infinite;
}

/* ---------------------------------------------------------------------------
   Pagination
   --------------------------------------------------------------------------- */

.pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-3);
    font-size: var(--text-sm);
    color: var(--muted);
}

.pagination-pages {
    display: flex;
    align-items: center;
    gap: var(--space-1);
}

.pagination-pages button {
    display: inline-grid;
    place-items: center;
    min-width: 2.25rem;
    height: 2.25rem;
    padding: 0 var(--space-2);
    font: inherit;
    color: var(--ink);
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--radius-surface);
    cursor: pointer;
}

.pagination-pages button:hover:not(:disabled) {
    background: var(--surface-sunk);
}

.pagination-pages button:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--accent-glow);
}

.pagination-pages button[aria-current="page"] {
    color: var(--accent-strong);
    font-weight: 600;
    background: var(--accent-soft);
    border-color: var(--accent);
}

.pagination-pages button:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.pagination-gap {
    min-width: 1.25rem;
    text-align: center;
}

/* ---------------------------------------------------------------------------
   Accordion (native <details>)
   --------------------------------------------------------------------------- */

.accordion-item {
    border-bottom: 1px solid var(--line);
}

.accordion-item:first-child {
    border-top: 1px solid var(--line);
}

.accordion-item summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-1);
    font-weight: 600;
    cursor: pointer;
    list-style: none;
}

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

.accordion-item summary::after {
    content: "+";
    font-weight: 400;
    font-size: var(--text-lg);
    color: var(--muted);
    transition: transform var(--dur-base) var(--ease);
}

.accordion-item[open] summary::after {
    transform: rotate(45deg);
}

.accordion-item summary:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: -2px;
}

.accordion-body {
    padding: 0 var(--space-1) var(--space-4);
    color: var(--muted);
}

@media (prefers-reduced-motion: reduce) {
  .accordion-item summary::after {
          transition: none;
      }
}

/* ---------------------------------------------------------------------------
   Tag and MultiSelect
   --------------------------------------------------------------------------- */

.tag {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: 0.1rem var(--space-3);
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--accent-strong);
    background: var(--accent-soft);
    border-radius: var(--radius-pill);
}

.tag:has(.tag-remove) {
    padding-right: var(--space-1);
}

.tag-remove {
    display: inline-grid;
    place-items: center;
    width: 1.25rem;
    height: 1.25rem;
    padding: 0;
    color: inherit;
    background: transparent;
    border: 0;
    border-radius: 50%;
    cursor: pointer;
}

.tag-remove:hover {
    background: var(--accent-glow);
}

.tag-remove:focus-visible {
    outline: 2px solid var(--accent);
}

.select-trigger-multi {
    flex-wrap: wrap;
    justify-content: flex-start;
    min-height: 2.9rem;
}

.select-trigger-multi > svg:last-child {
    margin-left: auto;
}

.select-toggle {
    flex: 1;
    min-width: 4rem;
    padding: 0;
    font: inherit;
    color: var(--ink);
    text-align: left;
    background: transparent;
    border: 0;
    cursor: pointer;
}

.select-toggle.is-placeholder {
    color: var(--muted);
}

.select-toggle:focus-visible {
    outline: none;
    text-decoration: underline;
}

.select-option-multi {
    justify-content: flex-start;
}

.select-check {
    display: inline-grid;
    place-items: center;
    flex: none;
    width: 1rem;
    height: 1rem;
    color: #fff;
    border: 1px solid var(--line);
    border-radius: 2px;
}

.select-option-multi.is-selected .select-check {
    background: var(--accent);
    border-color: var(--accent);
}

.select-option.is-disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

/* ---------------------------------------------------------------------------
   Table selection and BulkActionBar
   --------------------------------------------------------------------------- */

.select-cell {
    width: 2.5rem;
    padding-right: 0;
}

.table-check {
    appearance: none;
    display: inline-grid;
    place-items: center;
    width: 1rem;
    height: 1rem;
    margin: 0;
    vertical-align: middle;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 2px;
    cursor: pointer;
}

.table-check:checked,
.table-check.is-partial {
    background: var(--accent);
    border-color: var(--accent);
}

.table-check:checked::after {
    content: "";
    width: 0.3rem;
    height: 0.55rem;
    margin-top: -2px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.table-check.is-partial:not(:checked)::after {
    content: "";
    width: 0.55rem;
    height: 2px;
    background: #fff;
}

.table-check:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--accent-glow);
}

.table-check:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.table tbody tr.is-selected {
    background: var(--accent-soft);
}

.bulk-bar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-3);
    font-size: var(--text-sm);
    color: var(--bg);
    background: var(--ink);
    border-radius: var(--radius-surface);
}

.bulk-bar-count {
    font-weight: 600;
}

.bulk-bar-actions {
    display: flex;
    flex: 1;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.bulk-bar .btn-ghost {
    color: var(--bg);
    border-color: color-mix(in oklab, var(--bg) 30%, transparent);
    --btn-spinner: var(--bg);
}

.bulk-bar .btn-ghost:hover {
    background: color-mix(in oklab, var(--bg) 12%, transparent);
}

.bulk-bar-floating {
    position: fixed;
    left: 50%;
    bottom: var(--space-5);
    z-index: 55;
    width: max-content;
    max-width: calc(100vw - 2rem);
    transform: translateX(-50%);
    box-shadow: var(--shadow-float);
}

/* ---------------------------------------------------------------------------
   Stepper
   --------------------------------------------------------------------------- */

.stepper {
    display: flex;
    align-items: flex-start;
    margin: 0 0 var(--space-4);
    padding: 0;
    list-style: none;
}

.stepper-step {
    position: relative;
    flex: 1;
    min-width: 0;
    text-align: center;
}

.stepper-step::before {
    content: "";
    position: absolute;
    top: 1rem;
    left: -50%;
    right: 50%;
    height: 2px;
    background: var(--line);
}

.stepper-step:first-child::before {
    display: none;
}

.stepper-step.is-done::before,
.stepper-step.is-current::before {
    background: var(--accent);
}

.stepper-step button {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    width: 100%;
    padding: 0;
    font: inherit;
    color: inherit;
    background: none;
    border: 0;
    cursor: pointer;
}

.stepper-step button:disabled {
    cursor: not-allowed;
    opacity: 0.55;
}

.stepper-step button:focus-visible .stepper-dot {
    box-shadow: 0 0 0 3px var(--accent-glow);
}

.stepper-dot {
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--muted);
    background: var(--surface);
    border: 2px solid var(--line);
    border-radius: 50%;
}

.stepper-step.is-done .stepper-dot {
    color: #fff;
    background: var(--accent);
    border-color: var(--accent);
}

.stepper-step.is-current .stepper-dot {
    color: var(--accent-strong);
    border-color: var(--accent);
}

.stepper-label {
    padding-inline: var(--space-1);
    font-size: var(--text-sm);
    color: var(--muted);
}

.stepper-step.is-current .stepper-label {
    font-weight: 600;
    color: var(--ink);
}

/* Narrow: only the current step keeps its label. */

@media (max-width: 576px) {
  .stepper {
          padding-bottom: var(--space-5);
      }

  .stepper-label {
          display: none;
      }

  .stepper-step.is-current .stepper-label {
          position: absolute;
          top: 2.75rem;
          left: 50%;
          display: block;
          white-space: nowrap;
          transform: translateX(-50%);
      }
}

/* ---------------------------------------------------------------------------
   Timeline
   --------------------------------------------------------------------------- */

.timeline {
    position: relative;
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    list-style: none;
}

.timeline::before {
    content: "";
    position: absolute;
    top: 0.4rem;
    bottom: 0.4rem;
    left: 0.6875rem;
    width: 2px;
    background: var(--line);
}

.timeline-item {
    display: grid;
    grid-template-columns: 1.5rem minmax(0, 1fr);
    gap: var(--space-3);
    padding-bottom: var(--space-5);
}

.timeline-dot {
    z-index: 1;
    width: 1.5rem;
    height: 1.5rem;
    background: var(--surface);
    border: 2px solid var(--muted);
    border-radius: 50%;
}

.timeline-dot-report { border-color: var(--chart-2); }

.timeline-dot-action { border-color: var(--accent); }

.timeline-dot-alert { border-color: var(--danger-text); }

.timeline-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--space-2);
}

.timeline-title {
    font-weight: 600;
}

.timeline-kind {
    padding: 0 var(--space-2);
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--muted);
    background: var(--surface-sunk);
    border-radius: var(--radius-pill);
}

.timeline-kind-alert {
    color: var(--danger-text);
    background: color-mix(in oklab, var(--danger) 13%, transparent);
}

.timeline-kind-action {
    color: var(--accent-strong);
    background: var(--accent-soft);
}

.timeline-meta {
    font-size: var(--text-sm);
    color: var(--muted);
}

.timeline-detail {
    margin-top: var(--space-1);
    font-size: var(--text-sm);
}

/* ---------------------------------------------------------------------------
   LanguageSwitcher and script-aware typography
   --------------------------------------------------------------------------- */

.language-switcher {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 2px;
    padding: 3px;
    border: 1px solid var(--line);
    border-radius: var(--radius-pill);
}

.language-switcher button {
    padding: var(--space-1) var(--space-4);
    font: inherit;
    font-size: var(--text-sm);
    color: var(--ink);
    background: transparent;
    border: 0;
    border-radius: var(--radius-pill);
    cursor: pointer;
}

.language-switcher button[aria-pressed="true"] {
    font-weight: 600;
    color: var(--accent-strong);
    background: var(--accent-soft);
}

.language-switcher button:focus-visible {
    outline: 2px solid var(--accent);
}

/* Onest draws Latin only, so these scripts render in a system font. Those fonts read better
   with more leading, and each script has its own line-breaking. Set lang on the element (or
   on html) for the rules to apply. */

:lang(th) {
    line-height: 1.95;
    overflow-wrap: anywhere;
}

:lang(ja),
:lang(zh) {
    line-height: 1.85;
    line-break: strict;
}

:lang(ko) {
    line-height: 1.85;
    word-break: keep-all;
}

/* ---------------------------------------------------------------------------
   Utility: visible to screen readers only
   --------------------------------------------------------------------------- */

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

@keyframes horizon-pulse {
    50% { opacity: 0.25; }
}

.offline-banner {
    padding: var(--space-3) var(--space-4);
    font-size: var(--text-sm);
    background: color-mix(in oklab, var(--warn) 9%, transparent);
    border: 1px solid color-mix(in oklab, var(--warn) 40%, transparent);
    border-radius: var(--radius-surface);
}

/* ---------------------------------------------------------------------------
   MaskedValue and SensitivityBadge
   --------------------------------------------------------------------------- */

.masked-value {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
    font-size: var(--text-sm);
}

.masked-value-empty {
    font-family: inherit;
    color: var(--muted);
}

.masked-value button {
    padding: 0;
    font: inherit;
    font-family: var(--font-sans);
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--accent-strong);
    text-decoration: underline;
    text-underline-offset: 3px;
    background: none;
    border: 0;
    cursor: pointer;
}

.masked-value button:focus-visible {
    outline: 2px solid var(--accent);
}

/* ---------------------------------------------------------------------------
   Charts (inline SVG)
   --------------------------------------------------------------------------- */

.chart-figure {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    margin: 0;
}

.chart {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
}

.chart-tick,
.chart-value {
    font: 400 11px var(--font-sans);
    fill: var(--muted);
}

.chart-value {
    font-weight: 600;
    fill: var(--ink);
}

.chart-grid {
    stroke: var(--line);
    stroke-width: 1;
}

.chart-axis {
    stroke: var(--muted);
    stroke-width: 1;
}

.chart-tone-1 { fill: var(--chart-1); }

.chart-tone-2 { fill: var(--chart-2); }

.chart-tone-3 { fill: var(--chart-3); }

.chart-line {
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.chart-line-1 { stroke: var(--chart-1); }

.chart-legend,
.donut-legend {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3) var(--space-4);
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: var(--text-sm);
    color: var(--muted);
}

.donut-legend {
    flex-direction: column;
    gap: var(--space-2);
}

.chart-swatch {
    display: inline-block;
    width: 0.65rem;
    height: 0.65rem;
    margin-right: var(--space-2);
    border-radius: 2px;
}

.chart-swatch-1 { background: var(--chart-1); }

.chart-swatch-2 { background: var(--chart-2); }

.chart-swatch-3 { background: var(--chart-3); }

.donut {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-5);
}

.donut-svg {
    flex: none;
}

.donut-value {
    font: 700 22px var(--font-sans);
    fill: var(--ink);
}

.donut-legend strong {
    color: var(--ink);
    font-variant-numeric: tabular-nums;
}

.chart-empty {
    margin: 0;
    color: var(--muted);
}

.chart-table summary {
    cursor: pointer;
    font-size: var(--text-sm);
    color: var(--accent-strong);
}

.chart-table summary:focus-visible {
    outline: 2px solid var(--accent);
}

.chart-table-scroll {
    margin-top: var(--space-2);
    overflow-x: auto;
}

.chart-table .table th[scope="row"] {
    color: var(--ink);
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
}

/* ---------------------------------------------------------------------------
   LikertScale, RatingInput, QuizQuestion
   --------------------------------------------------------------------------- */

.likert,
.rating,
.quiz-options {
    margin: 0;
    padding: 0;
    border: 0;
}

.likert legend,
.rating legend,
.quiz-options legend {
    margin-bottom: var(--space-3);
    padding: 0;
    font-weight: 600;
}

.likert {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: var(--space-2);
}

.likert legend {
    grid-column: 1 / -1;
}

@media (max-width: 576px) {
  .likert {
          grid-template-columns: 1fr;
      }
}

.rating-stars {
    display: inline-flex;
    gap: var(--space-1);
}

.rating-star {
    position: relative;
    margin: 0;
    line-height: 0;
    border-radius: var(--radius-surface);
    cursor: pointer;
}

.rating-star input {
    position: absolute;
    opacity: 0;
}

.rating-star svg {
    width: 1.9rem;
    height: 1.9rem;
    fill: none;
    stroke: var(--muted);
    stroke-width: 1.6;
}

.rating-star.is-on svg {
    fill: var(--chart-3);
    stroke: var(--chart-3);
}

.rating-star:has(input:focus-visible) {
    outline: 2px solid var(--accent);
}

/* ---------------------------------------------------------------------------
   Chips (used by DateRangeInput presets and FilterBar)
   --------------------------------------------------------------------------- */

.chips {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
}

.chip-button {
    padding: 3px var(--space-3);
    font: inherit;
    font-size: var(--text-sm);
    color: var(--ink);
    background: transparent;
    border: 1px solid var(--line);
    border-radius: var(--radius-pill);
    cursor: pointer;
}

.chip-button:hover {
    background: var(--surface-sunk);
}

.chip-button[aria-pressed="true"] {
    font-weight: 600;
    color: var(--accent-strong);
    background: var(--accent-soft);
    border-color: var(--accent);
}

.chip-button:focus-visible {
    outline: 2px solid var(--accent);
}

/* ---------------------------------------------------------------------------
   LineChart additions
   --------------------------------------------------------------------------- */

.chart-line-2 { stroke: var(--chart-2); }

.chart-line-3 { stroke: var(--chart-3); }

.chart-area {
    stroke: none;
    opacity: 0.12;
}

.chart-target {
    stroke: var(--ink);
    stroke-width: 1.4;
    stroke-dasharray: 5 4;
    opacity: 0.7;
}

.chart-swatch-target {
    height: 0;
    width: 0.9rem;
    border-top: 2px dashed var(--ink);
    border-radius: 0;
}

/* ---------------------------------------------------------------------------
   DateInput and DateRangeInput
   --------------------------------------------------------------------------- */

input[type="date"] {
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding: var(--space-3);
    font: inherit;
    color: var(--ink);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-surface);
}

input[type="date"]:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-glow);
}

input[type="date"]:disabled {
    color: var(--muted);
    background: var(--surface-sunk);
}

.date-range {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.date-range-fields {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
    gap: var(--space-4);
}

.date-range-summary {
    font-size: var(--text-sm);
}

/* ---------------------------------------------------------------------------
   FileUpload
   --------------------------------------------------------------------------- */

.file-upload {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.file-drop {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-5) var(--space-4);
    text-align: center;
    border: 2px dashed var(--line);
    border-radius: var(--radius-surface);
}

.file-drop:hover,
.file-drop:focus-within {
    background: var(--accent-soft);
    border-color: var(--accent);
}

.file-drop:focus-within {
    box-shadow: 0 0 0 3px var(--accent-glow);
}

/* The native input covers the whole box, so a click or a drop anywhere reaches it. */

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

.file-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

.file-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--space-1) var(--space-3);
    padding: var(--space-3);
    border: 1px solid var(--line);
    border-radius: var(--radius-surface);
}

.file-item.is-bad {
    background: color-mix(in oklab, var(--danger) 6%, transparent);
    border-color: color-mix(in oklab, var(--danger) 40%, transparent);
}

.file-item-name {
    display: block;
    font-weight: 600;
    overflow-wrap: anywhere;
}

.file-item-meta {
    font-size: var(--text-sm);
    color: var(--muted);
}

.file-item-remove {
    padding: 0;
    font: inherit;
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--accent-strong);
    text-decoration: underline;
    text-underline-offset: 3px;
    background: none;
    border: 0;
    cursor: pointer;
}

.file-item-remove:focus-visible {
    outline: 2px solid var(--accent);
}

.file-item-bar {
    grid-column: 1 / -1;
    height: 0.4rem;
    overflow: hidden;
    background: var(--surface-sunk);
    border-radius: var(--radius-pill);
}

.file-item-bar i {
    display: block;
    height: 100%;
    background: var(--accent-strong);
    transition: width var(--dur-base) ease;
}

/* ---------------------------------------------------------------------------
   FilterBar
   --------------------------------------------------------------------------- */

.filter-bar {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.filter-bar-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--space-4);
}

.filter-field {
    flex: 1;
    min-width: 11rem;
    margin-bottom: 0;
}

.filter-bar-applied {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
}

.filter-count {
    font-size: var(--text-sm);
    color: var(--muted);
}

.filter-clear {
    padding: 0;
    font: inherit;
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--accent-strong);
    text-decoration: underline;
    text-underline-offset: 3px;
    background: none;
    border: 0;
    cursor: pointer;
}

.filter-clear:focus-visible {
    outline: 2px solid var(--accent);
}

.filter-multi {
    position: relative;
}

.filter-multi summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    padding: var(--space-3);
    list-style: none;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-surface);
    cursor: pointer;
}

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

.filter-multi[open] summary {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-glow);
}

.filter-multi-menu {
    position: absolute;
    top: calc(100% + var(--space-1));
    left: 0;
    right: 0;
    z-index: 56;
    display: flex;
    flex-direction: column;
    max-height: 16rem;
    padding: var(--space-2);
    overflow-y: auto;
    background: var(--surface);
    border-radius: var(--radius-surface);
    box-shadow: var(--shadow-float);
}

.filter-multi-menu label {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin: 0;
    padding: var(--space-2);
    font-weight: 400;
    border-radius: var(--radius-surface);
    cursor: pointer;
}

.filter-multi-menu label:hover {
    background: var(--surface-sunk);
}

.filter-multi-menu input {
    accent-color: var(--accent-strong);
}

/* ---------------------------------------------------------------------------
   DescriptionList
   --------------------------------------------------------------------------- */

.description-list {
    display: grid;
    margin: 0;
}

.description-list-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
    gap: var(--space-5) var(--space-6);
}

.description-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.description-item dt {
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--muted);
}

.description-item dd {
    margin: 0;
    overflow-wrap: anywhere;
}

.description-empty {
    font-style: italic;
    color: var(--muted);
}

.description-list-stacked .description-item {
    padding: var(--space-3) 0;
    border-bottom: 1px solid var(--line-subtle);
}

.description-list-inline .description-item {
    flex-direction: row;
    align-items: baseline;
    gap: var(--space-4);
    padding: var(--space-3) 0;
    border-bottom: 1px solid var(--line-subtle);
}

.description-list-inline .description-item dt {
    flex: 0 0 12rem;
}

@media (max-width: 576px) {
  .description-list-inline .description-item {
          flex-direction: column;
          gap: 2px;
      }

  .description-list-inline .description-item dt {
          flex: none;
      }
}

/* ---------------------------------------------------------------------------
   FormSection and FormActions
   --------------------------------------------------------------------------- */

.form-section {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    gap: var(--space-4) var(--space-6);
    padding: var(--space-5) 0;
    border-bottom: 1px solid var(--line);
}

.form-section-title {
    margin: 0;
    font-size: var(--text-lg);
}

.form-section-intro .help {
    margin-top: var(--space-1);
}

.form-section-fields {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

@media (max-width: 768px) {
  .form-section {
          grid-template-columns: 1fr;
      }
}

.form-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-surface);
}

/* Sticky keeps the bar in view. It takes no shadow: it also sits in the normal flow at the end of
   the form, where a shadow would be decoration, and its border and opaque surface already separate it. */

.form-actions.is-sticky {
    position: sticky;
    bottom: 0;
    z-index: 5;
}

.form-actions-state {
    font-size: var(--text-sm);
    color: var(--muted);
}

.form-actions-state.is-dirty {
    font-weight: 600;
    color: var(--warn-text);
}

.form-actions-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

/* ---------------------------------------------------------------------------
   TreeView
   --------------------------------------------------------------------------- */

.tree,
.tree ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.tree ul {
    padding-left: var(--space-5);
    border-left: 1px solid var(--line);
    margin-left: var(--space-3);
}

.tree-row {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    width: 100%;
    box-sizing: border-box;
    padding: var(--space-2);
    font: inherit;
    color: inherit;
    text-align: left;
    background: none;
    border: 0;
    border-radius: var(--radius-surface);
    cursor: pointer;
}

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

.tree-row:focus-visible {
    outline: 2px solid var(--accent);
}

.tree-row.is-selected {
    font-weight: 600;
    background: var(--accent-soft);
}

.tree-branch > summary {
    list-style: none;
}

.tree-branch > summary::-webkit-details-marker {
    display: none;
}

.tree-branch > summary::before {
    content: "\25B8";
    display: inline-block;
    width: 1em;
    color: var(--muted);
    font-size: var(--text-sm);
    transition: transform var(--dur-fast) ease;
}

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

/* A leaf has no arrow, so it lines up with the branch text above it. */

.tree-leaf {
    padding-left: calc(var(--space-2) + 1em + var(--space-2));
}

@media (prefers-reduced-motion: reduce) {
  .tree-branch > summary::before {
          transition: none;
      }
}

/* ---------------------------------------------------------------------------
   CalendarMonth
   --------------------------------------------------------------------------- */

.calendar {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.calendar-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
}

.calendar-nav {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.calendar-title {
    min-width: 9rem;
    text-align: center;
}

.calendar-scroll {
    overflow-x: auto;
}

.calendar-grid {
    width: 100%;
    table-layout: fixed;
    border-collapse: separate;
    border-spacing: var(--space-1);
}

.calendar-grid th {
    padding: var(--space-1) 0;
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--muted);
}

.calendar-grid td {
    padding: 0;
    vertical-align: top;
}

.calendar-day {
    display: flex;
    flex-direction: column;
    gap: 3px;
    width: 100%;
    min-height: 4.75rem;
    box-sizing: border-box;
    padding: var(--space-2);
    overflow: hidden;
    font: inherit;
    color: inherit;
    text-align: left;
    background: var(--surface);
    border: 1px solid var(--line-subtle);
    border-radius: var(--radius-surface);
    cursor: pointer;
}

.calendar-day:hover {
    background: var(--surface-sunk);
}

.calendar-day:focus-visible {
    outline: 2px solid var(--accent);
}

.calendar-day.is-outside {
    opacity: 0.4;
}

.calendar-day.is-selected {
    background: var(--accent-soft);
    border-color: var(--accent);
}

.calendar-day-number {
    display: grid;
    place-items: center;
    width: 1.5rem;
    height: 1.5rem;
    font-size: var(--text-sm);
    font-weight: 600;
    border-radius: 50%;
}

.calendar-day.is-today .calendar-day-number {
    color: #fff;
    background: var(--accent);
}

.calendar-event {
    padding: 1px var(--space-1);
    font-size: var(--text-xs);
    line-height: 1.2;
    color: var(--accent-strong);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    background: var(--accent-soft);
    border-radius: 2px;
}

.calendar-more,
.calendar-count {
    font-size: var(--text-xs);
    color: var(--muted);
}

.calendar-count {
    display: none;
}

/* Narrow: cells are too small for event text, so show a count and let the agenda list the day. */

@media (max-width: 576px) {
  .calendar-day {
          min-height: 3.25rem;
          padding: var(--space-1);
      }

  .calendar-event,
      .calendar-more {
          display: none;
      }

  .calendar-count {
          display: inline;
      }
}

.calendar-agenda-title {
    margin: 0 0 var(--space-2);
    font-size: var(--text-base);
}

.calendar-agenda ul {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

.calendar-agenda-empty {
    margin: 0;
    color: var(--muted);
}

/* ---------------------------------------------------------------------------
   ReportPage: screen layout, then print
   --------------------------------------------------------------------------- */

.report-page {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
}

.report-header {
    padding-bottom: var(--space-3);
    border-bottom: 2px solid var(--ink);
}

.report-organisation {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--muted);
}

.report-title {
    margin: 0;
}

.report-period {
    font-size: var(--text-sm);
    color: var(--muted);
}

.report-section-title {
    margin: 0 0 var(--space-3);
    font-size: var(--text-lg);
}

.report-footer {
    display: none;
}

.page-break {
    display: none;
}

@page {
    size: A4;
    margin: 18mm;
}

@media print {
  /* Chrome that means nothing on paper. */

  .side-nav,
      .top-nav,
      .bottom-sheet,
      .toast-container,
      .modal-scrim,
      .btn,
      .filter-bar,
      .calendar-nav,
      #blazor-error-ui {
          display: none;
      }

  /* Always print in ink-friendly colours, even from dark mode. */

  :root,
      :root[data-theme="dark"] {
          --bg: white;
          --surface: white;
          --surface-sunk: white;
          --ink: black;
          --muted: dimgray;
          --line: silver;
          --line-subtle: gainsboro;
          --shadow-float: none;
      }

  body {
          background: white;
          color: black;
      }

  /* The rail is gone, so the content reclaims its width. */

  .app-shell .app-main,
      .app-shell:has(.side-nav.is-expanded) .app-main {
          margin-left: 0;
      }

  .report-page .card,
      .report-page .table-container {
          box-shadow: none;
      }

  .report-section.avoid-break,
      .report-page .card,
      .report-page tr,
      .report-page figure {
          break-inside: avoid;
      }

  .report-section-title,
      .report-title {
          break-after: avoid;
      }

  .page-break {
          display: block;
          break-after: page;
      }

  /* Repeats at the foot of every printed page. */

  .report-footer {
          position: fixed;
          right: 0;
          bottom: 0;
          left: 0;
          display: flex;
          justify-content: space-between;
          padding-top: var(--space-1);
          font-size: var(--text-xs);
          color: var(--muted);
          border-top: 1px solid var(--line);
      }

  /* A printed link has no click, so print where it goes. */

  .report-page a[href^="http"]::after {
          content: " (" attr(href) ")";
          font-size: var(--text-xs);
          color: var(--muted);
      }
}

/* ===========================================================================
   Layout, choice cards and document navigation
   Stack, Cluster, Grid, Section, Divider, AspectRatio, SelectableCard,
   ClickableCard, Collapsible, Outline. Each component owns its class prefix.
   =========================================================================== */

/* Gap scale shared by Stack, Cluster, Grid and Section: 1,2,3,4,5,6,8. */

.stack.gap-1, .cluster.gap-1, .grid-auto.gap-1 { gap: var(--space-1); }

.stack.gap-2, .cluster.gap-2, .grid-auto.gap-2 { gap: var(--space-2); }

.stack.gap-3, .cluster.gap-3, .grid-auto.gap-3 { gap: var(--space-3); }

.stack.gap-4, .cluster.gap-4, .grid-auto.gap-4 { gap: var(--space-4); }

.stack.gap-5, .cluster.gap-5, .grid-auto.gap-5 { gap: var(--space-5); }

.stack.gap-6, .cluster.gap-6, .grid-auto.gap-6 { gap: var(--space-6); }

.stack.gap-8, .cluster.gap-8, .grid-auto.gap-8 { gap: var(--space-8); }

/* Cluster */

.cluster-justify-center { justify-content: center; }

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

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

.cluster-align-start { align-items: flex-start; }

.cluster-align-stretch { align-items: stretch; }

/* Grid: as many columns as fit at --grid-min, and never wider than the container. */

.grid-auto {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--grid-min, 16rem)), 1fr));
    gap: var(--space-4);
}

/* Section */

.section-header {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.section-title {
    margin: 0;
}

.section-description {
    margin: 0;
    color: var(--muted);
    font-size: var(--text-sm);
    max-width: var(--measure);
}

/* Divider */

.divider {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    align-self: stretch;
    color: var(--muted);
    font-size: var(--text-sm);
}

.divider::before,
.divider::after {
    content: "";
    flex: 1 1 auto;
    height: 1px;
    background: var(--line);
}

.divider:not(.divider-labelled)::after {
    display: none;
}

.divider-vertical {
    display: inline-block;
    align-self: stretch;
    width: 1px;
    min-height: 1em;
    background: var(--line);
}

.divider-vertical::before,
.divider-vertical::after {
    display: none;
}

/* AspectRatio */

.aspect-ratio {
    position: relative;
    width: 100%;
    overflow: hidden;
}

.aspect-ratio > * {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.aspect-ratio > img,
.aspect-ratio > video {
    object-fit: cover;
}

/* SelectableCardGroup and SelectableCard */

.selectable-card-group {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.selectable-card-legend {
    padding: 0;
    margin-bottom: var(--space-3);
    font-weight: 600;
}

.selectable-card-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
    gap: var(--space-3);
}

.selectable-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    padding: var(--space-4);
    padding-right: var(--space-6);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-surface);
    cursor: pointer;
    font-weight: 400;
    transition: border-color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease);
}

.selectable-card:hover {
    border-color: var(--muted);
}

.selectable-card:has(input:checked),
.selectable-card.is-selected {
    border-color: var(--accent-strong);
    background: var(--accent-soft);
}

.selectable-card:has(input:focus-visible) {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.selectable-card:has(input:disabled),
.selectable-card.is-disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.selectable-card:has(input:disabled):hover {
    border-color: var(--line);
}

.selectable-card-title {
    font-weight: 600;
}

.selectable-card-description,
.selectable-card-body {
    color: var(--muted);
    font-size: var(--text-sm);
}

.selectable-card-tick {
    position: absolute;
    top: var(--space-3);
    right: var(--space-3);
    box-sizing: border-box;
    width: 1.25rem;
    height: 1.25rem;
    border: 2px solid var(--muted);
    background: var(--surface);
}

.selectable-card-radio .selectable-card-tick {
    border-radius: var(--radius-pill);
}

.selectable-card-check .selectable-card-tick {
    border-radius: var(--radius-surface);
}

.selectable-card:has(input:checked) .selectable-card-tick,
.selectable-card.is-selected .selectable-card-tick {
    border-color: var(--accent-strong);
    background: var(--accent-strong);
}

/* The mark inside the tick: a check for checkboxes, a dot for radios. The shape, not the
   colour, tells selected from not selected. */

.selectable-card-tick::after {
    content: "";
    display: none;
    box-sizing: border-box;
}

.selectable-card-check .selectable-card-tick::after {
    width: 0.35rem;
    height: 0.65rem;
    margin: 0.02rem auto 0;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.selectable-card-radio .selectable-card-tick::after {
    width: 0.4rem;
    height: 0.4rem;
    margin: 0.2rem auto 0;
    border-radius: var(--radius-pill);
    background: #fff;
}

.selectable-card:has(input:checked) .selectable-card-tick::after,
.selectable-card.is-selected .selectable-card-tick::after {
    display: block;
}

/* ClickableCard */

.clickable-card {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-4);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-surface);
    color: var(--ink);
    text-decoration: none;
    transition: border-color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease);
}

.clickable-card:hover {
    border-color: var(--accent-strong);
    background: var(--surface-sunk);
}

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

.clickable-card-title {
    font-weight: 600;
    font-size: var(--text-lg);
}

.clickable-card-body {
    color: var(--muted);
    font-size: var(--text-sm);
}

.clickable-card-action {
    margin-top: auto;
    padding-top: var(--space-2);
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--accent-strong);
}

.clickable-card-arrow {
    display: inline-block;
    margin-left: var(--space-1);
    transition: transform var(--dur-fast) var(--ease);
}

.clickable-card:hover .clickable-card-arrow,
.clickable-card:focus-visible .clickable-card-arrow {
    transform: translateX(0.25rem);
}

/* Collapsible (native <details>) */

.collapsible {
    border: 1px solid var(--line);
    border-radius: var(--radius-surface);
    background: var(--surface);
}

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

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

.collapsible > summary::before {
    content: "";
    flex: none;
    width: 0.5rem;
    height: 0.5rem;
    border: solid var(--muted);
    border-width: 0 2px 2px 0;
    transform: rotate(-45deg);
    transition: transform var(--dur-base) var(--ease);
}

.collapsible[open] > summary::before {
    transform: rotate(45deg);
}

.collapsible > summary:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: -2px;
}

.collapsible-title {
    flex: 1 1 auto;
    min-width: 0;
}

.collapsible-meta {
    margin-left: auto;
    color: var(--muted);
    font-size: var(--text-sm);
    font-weight: 400;
    text-align: right;
}

.collapsible-body {
    padding: 0 var(--space-4) var(--space-4);
    border-top: 1px solid var(--line-subtle);
    padding-top: var(--space-3);
}

/* Outline */

.outline {
    font-size: var(--text-sm);
}

.outline-label {
    display: block;
    margin-bottom: var(--space-2);
    color: var(--muted);
    font-size: var(--text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.outline-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.outline-list .outline-list {
    padding-left: var(--space-3);
}

.outline-link {
    display: block;
    padding: var(--space-1) var(--space-2);
    border-left: 2px solid transparent;
    color: var(--muted);
    text-decoration: none;
}

.outline-link:hover {
    color: var(--ink);
}

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

.outline-link.is-current {
    border-left-color: var(--accent-strong);
    color: var(--ink);
    font-weight: 600;
}

@media (prefers-reduced-motion: reduce) {
  .selectable-card,
      .clickable-card,
      .clickable-card-arrow,
      .collapsible > summary::before {
          transition: none;
      }

  .clickable-card:hover .clickable-card-arrow,
      .clickable-card:focus-visible .clickable-card-arrow {
          transform: none;
      }
}

/* ===========================================================================
   Action controls, status and notice, people and media
   ButtonGroup, SegmentedControl, ToggleButton, Toolbar, Banner, StatusDot,
   Badge, AvatarGroup, Thumbnail
   =========================================================================== */

/* ---- ButtonGroup: joined buttons, rounded at the outer ends only ---- */

.button-group {
    display: inline-flex;
    align-items: stretch;
}

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

.button-group > .btn:first-child {
    border-top-left-radius: var(--radius-pill);
    border-bottom-left-radius: var(--radius-pill);
}

.button-group > .btn:last-child {
    border-top-right-radius: var(--radius-pill);
    border-bottom-right-radius: var(--radius-pill);
}

.button-group > .btn + .btn {
    margin-left: -1px;
}

/* The focused or hovered button rises above its neighbours so its whole ring is visible. */

.button-group > .btn:hover,
.button-group > .btn:focus-visible {
    position: relative;
    z-index: 1;
}

.button-group > .btn:focus-visible,
.toggle-button:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* ---- ToggleButton ---- */

.toggle-button.is-pressed {
    background: var(--accent-soft);
    border-color: var(--accent-strong);
    color: var(--ink);
    font-weight: 700;
}

.toggle-button.is-pressed:hover {
    background: var(--accent-soft);
}

/* ---- SegmentedControl: native radios, visually hidden, inside pill labels ---- */

.segmented {
    display: inline-flex;
    padding: 2px;
    border: 1px solid var(--line);
    border-radius: var(--radius-pill);
    background: var(--surface-sunk);
}

.segmented-option {
    position: relative;
    display: inline-flex;
    align-items: center;
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-pill);
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--muted);
    cursor: pointer;
}

.segmented-input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: pointer;
}

.segmented-option:hover {
    color: var(--ink);
}

.segmented-option:has(input:checked) {
    background: var(--surface);
    color: var(--ink);
    font-weight: 700;
    box-shadow: inset 0 0 0 1px var(--accent-strong);
}

.segmented-option:has(input:focus-visible) {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
}

.segmented.is-disabled {
    opacity: 0.5;
}

.segmented.is-disabled .segmented-option,
.segmented.is-disabled .segmented-input {
    cursor: not-allowed;
}

/* ---- Toolbar ---- */

.toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2);
    border: 1px solid var(--line);
    border-radius: var(--radius-surface);
    background: var(--surface);
}

.toolbar-separator {
    align-self: stretch;
    width: 1px;
    margin: var(--space-1);
    background: var(--line);
}

/* ---- Banner: a full-width, page-level notice ---- */

.banner {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    width: 100%;
    padding: var(--space-3) var(--space-5);
    border-bottom: 1px solid var(--line);
    background: var(--surface-sunk);
    color: var(--ink);
}

.banner-icon {
    display: flex;
    flex: 0 0 auto;
    margin-top: 0.1rem;
}

.banner-body {
    flex: 1 1 auto;
    min-width: 0;
}

.banner-title {
    margin: 0;
    font-weight: 700;
}

.banner-message {
    margin: 0;
    font-size: var(--text-sm);
}

.banner-action {
    flex: 0 0 auto;
}

.banner-dismiss {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-1);
    border: 0;
    border-radius: var(--radius-sm);
    background: none;
    color: inherit;
    opacity: 0.75;
    cursor: pointer;
}

.banner-dismiss:hover {
    opacity: 1;
    background: var(--line-subtle);
}

.banner-dismiss:focus-visible {
    outline: 2px solid var(--accent);
    opacity: 1;
}

.banner-info .banner-icon { color: var(--muted); }

.banner-success {
    background: color-mix(in srgb, var(--ok) 8%, var(--surface));
    border-bottom-color: color-mix(in srgb, var(--ok) 30%, transparent);
}

.banner-success .banner-icon { color: var(--ok-text); }

.banner-warning {
    background: color-mix(in srgb, var(--warn) 8%, var(--surface));
    border-bottom-color: color-mix(in srgb, var(--warn) 30%, transparent);
}

.banner-warning .banner-icon { color: var(--warn-text); }

.banner-danger {
    background: color-mix(in srgb, var(--danger) 8%, var(--surface));
    border-bottom-color: color-mix(in srgb, var(--danger) 30%, transparent);
}

.banner-danger .banner-icon { color: var(--danger-text); }

/* ---- StatusDot: a dot and its state in words ---- */

.status-dot {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}

.status-dot-mark {
    flex: 0 0 auto;
    width: 0.6rem;
    height: 0.6rem;
    border-radius: 50%;
    background: var(--muted);
}

.status-dot-ok .status-dot-mark { background: var(--ok); }

.status-dot-warning .status-dot-mark { background: var(--warn); }

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

.status-dot-info .status-dot-mark { background: var(--chart-2); }

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

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

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

@keyframes horizon-status-pulse {
    0% { box-shadow: 0 0 0 0 color-mix(in srgb, currentColor 45%, transparent); }
    100% { box-shadow: 0 0 0 0.5rem transparent; }
}

@media (prefers-reduced-motion: no-preference) {
  .status-dot.is-pulse .status-dot-mark {
          animation: horizon-status-pulse 1.6s ease-out infinite;
      }
}

/* ---- Badge: a count or dot on the corner of another element ---- */

.badge-wrap {
    position: relative;
    display: inline-flex;
}

.badge {
    position: absolute;
    top: 0;
    right: 0;
    transform: translate(35%, -35%);
    min-width: 1.25rem;
    height: 1.25rem;
    padding: 0 0.35rem;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-pill);
    background: var(--danger);
    color: #fff;
    font-size: var(--text-xs);
    font-weight: 700;
    line-height: 1;
    /* A ring in the page colour keeps the badge readable over any content behind it. */
    outline: 2px solid var(--surface);
}

.badge-dot {
    min-width: 0.7rem;
    width: 0.7rem;
    height: 0.7rem;
    padding: 0;
}

/* ---- AvatarGroup: overlapping avatars and an overflow chip ---- */

.avatar-group {
    display: inline-flex;
    align-items: center;
}

.avatar-group > .avatar {
    outline: 2px solid var(--surface);
}

.avatar-group > .avatar + .avatar {
    margin-left: -0.6rem;
}

.avatar-overflow {
    background: var(--surface-sunk);
    color: var(--ink);
    font-weight: 700;
    border: 1px solid var(--line);
}

/* ---- Thumbnail: a fixed-ratio frame, so the page never jumps ---- */

.thumbnail {
    display: block;
    margin: 0;
}

.thumbnail-frame {
    position: relative;
    width: 100%;
    overflow: hidden;
    border-radius: var(--radius-surface);
    border: 1px solid var(--line);
    background: linear-gradient(90deg, var(--surface-sunk) 30%, var(--line-subtle) 50%, var(--surface-sunk) 70%);
    background-size: 200% 100%;
}

.thumbnail-frame.is-loaded {
    background: var(--surface-sunk);
}

@media (prefers-reduced-motion: no-preference) {
  .thumbnail-frame:not(.is-loaded) {
          animation: horizon-shimmer 1.4s linear infinite;
      }
}

.thumbnail-frame > img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.thumbnail-fallback {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    background: var(--surface-sunk);
    color: var(--muted);
    font-size: var(--text-sm);
    text-align: center;
}

.thumbnail-caption {
    margin-top: var(--space-2);
    font-size: var(--text-sm);
    color: var(--muted);
}

/* ---------------------------------------------------------------------------
   Content: Blockquote, Citation, Timestamp, Kbd, Code, CodeBlock
   --------------------------------------------------------------------------- */

.blockquote {
    margin: var(--space-4) 0;
    padding: var(--space-2) 0 var(--space-2) var(--space-4);
    max-width: var(--measure);
    font-size: var(--text-lg);
    line-height: var(--line-height);
    color: var(--ink);
    border-left: 3px solid var(--accent);
}

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

.blockquote > :last-child {
    margin-bottom: 0;
}

.citation {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1) var(--space-2);
    margin-top: var(--space-3);
    font-size: var(--text-sm);
    font-style: normal;
    color: var(--muted);
}

.citation-author {
    font-style: normal;
    font-weight: 600;
    color: var(--ink);
}

/* A middle dot between the parts. The empty alternative text keeps it out of a screen reader's speech. */

.citation-part::before {
    content: "\00b7";
    content: "\00b7" / "";
    margin-right: var(--space-2);
}

.citation > .citation-part:first-child::before {
    content: none;
}

.citation-note {
    font-style: italic;
}

.timestamp {
    white-space: nowrap;
}

kbd {
    display: inline-block;
    padding: 0 var(--space-2);
    font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
    font-size: 0.85em;
    line-height: 1.6;
    color: var(--ink);
    background: var(--surface-sunk);
    border: 1px solid var(--line);
    border-bottom-width: 2px;
    border-radius: var(--radius-surface);
}

.inline-code {
    padding: 0.1em var(--space-1);
    font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
    font-size: 0.9em;
    color: var(--ink);
    background: var(--surface-sunk);
    border: 1px solid var(--line);
    border-radius: var(--radius-surface);
}

.code-block {
    margin: var(--space-4) 0;
    min-width: 0;
    max-width: 100%;
}

.code-block-language {
    display: block;
    padding: var(--space-1) var(--space-3);
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--muted);
    background: var(--surface-sunk);
    border: 1px solid var(--line);
    border-bottom: 0;
    border-radius: var(--radius-surface) var(--radius-surface) 0 0;
}

.code-block pre {
    margin: 0;
    padding: var(--space-3) var(--space-4);
    overflow: auto;
    font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
    font-size: var(--text-sm);
    line-height: var(--line-height);
    color: var(--ink);
    background: var(--surface-sunk);
    border: 1px solid var(--line);
    border-radius: var(--radius-surface);
}

.code-block-language + pre {
    border-radius: 0 0 var(--radius-surface) var(--radius-surface);
}

.code-block pre:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.code-block code {
    font: inherit;
    white-space: pre;
}

/* ---------------------------------------------------------------------------
   Native inputs: SliderInput, DateTimeInput
   --------------------------------------------------------------------------- */

.slider {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.slider-row {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.slider input[type="range"] {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    accent-color: var(--accent-strong);
}

.slider input[type="range"]:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
}

.slider input[type="range"]:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.slider-value {
    flex: none;
    min-width: 3ch;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    text-align: right;
    color: var(--ink);
}

.slider-ends {
    display: flex;
    justify-content: space-between;
    gap: var(--space-3);
    font-size: var(--text-xs);
    color: var(--muted);
}

.datetime-input {
    display: block;
}

/* ===========================================================================
   Search inputs: Typeahead, TagInput, CheckboxGroup
   The Typeahead list reuses .select-menu / .select-option (Section 14).
   =========================================================================== */

.typeahead-input {
    padding-right: 2.5rem;
}

.typeahead-clear {
    position: absolute;
    top: 0;
    right: 0;
    display: grid;
    place-items: center;
    width: 2.5rem;
    height: 2.75rem;
    padding: 0;
    color: var(--muted);
    background: transparent;
    border: 0;
    cursor: pointer;
}

.typeahead-clear:hover {
    color: var(--ink);
}

.typeahead-clear:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--accent-glow);
}

.typeahead-menu mark {
    color: inherit;
    font-weight: 700;
    background: var(--accent-soft);
    text-decoration: underline;
}

.typeahead-status {
    padding: var(--space-2) var(--space-3);
    font-size: var(--text-sm);
    color: var(--muted);
}

.typeahead-status.is-error {
    color: var(--danger-text);
}

.tag-input-tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin: 0 0 var(--space-2);
    padding: 0;
    list-style: none;
}

.tag-input-row {
    display: flex;
    gap: var(--space-2);
    align-items: stretch;
}

.tag-input-row input {
    flex: 1;
    min-width: 0;
}

.tag-input-error {
    margin: var(--space-1) 0 0;
    font-size: var(--text-sm);
    color: var(--danger-text);
}

.checkbox-group {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    min-width: 0;
    margin: 0 0 var(--space-4);
    padding: 0;
    border: 0;
}

.checkbox-group legend {
    margin-bottom: var(--space-2);
    padding: 0;
    font-weight: 600;
    font-size: var(--text-sm);
}

.checkbox-group-all {
    padding-bottom: var(--space-2);
    font-weight: 600;
    border-bottom: 1px solid var(--line);
}

.checkbox-group-all .table-check {
    flex: none;
    margin-top: 0.3rem;
}

.checkbox-group-status {
    margin: 0;
}

.checkbox-group-status.is-short {
    color: var(--danger-text);
}

/* ===========================================================================
   Chat: ChatLayout, ChatMessage, ChatComposer, ToolCallCard
   =========================================================================== */

.chat {
    display: flex;
    flex-direction: column;
    height: 32rem;
    max-height: 80vh;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-surface);
}

/* column-reverse puts the scroll origin at the bottom, so the newest message stays in
   view as content is added, with no script. */

.chat-log {
    flex: 1;
    display: flex;
    flex-direction: column-reverse;
    min-height: 0;
    overflow-y: auto;
    padding: var(--space-4);
}

.chat-log:focus-visible {
    outline: none;
    box-shadow: inset 0 0 0 3px var(--accent-glow);
}

.chat-messages {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.chat-composer-slot {
    padding: var(--space-3);
    border-top: 1px solid var(--line);
}

.chat-message {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    max-width: 85%;
}

.chat-message-user {
    align-self: flex-end;
    flex-direction: row-reverse;
}

.chat-message-assistant {
    align-self: flex-start;
}

.chat-message-system {
    align-self: center;
    max-width: 100%;
    font-size: var(--text-sm);
    color: var(--muted);
    text-align: center;
}

.chat-message-main {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    min-width: 0;
}

.chat-message-user .chat-message-main {
    align-items: flex-end;
}

.chat-meta {
    display: flex;
    gap: var(--space-2);
    font-size: var(--text-xs);
    color: var(--muted);
}

.chat-author {
    font-weight: 600;
}

.chat-bubble {
    padding: var(--space-2) var(--space-3);
    overflow-wrap: anywhere;
    background: var(--surface-sunk);
    border-radius: var(--radius-surface);
}

.chat-message-user .chat-bubble {
    color: var(--ink);
    background: var(--accent-soft);
}

.chat-message-system .chat-bubble {
    background: transparent;
}

.chat-message.is-failed .chat-bubble {
    border: 1px solid var(--danger-text);
}

.chat-status {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-xs);
    color: var(--muted);
}

.chat-status.is-failed {
    color: var(--danger-text);
}

.chat-typing {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    min-height: 1.25rem;
}

.chat-typing-dot {
    width: 0.4rem;
    height: 0.4rem;
    background: var(--muted);
    border-radius: 50%;
}

@keyframes horizon-chat-pulse {
    0%, 60%, 100% { opacity: 0.35; }
    30% { opacity: 1; }
}

@media (prefers-reduced-motion: no-preference) {
  .chat-typing-dot {
          animation: horizon-chat-pulse 1.2s ease-in-out infinite;
      }

  .chat-typing-dot:nth-child(3) {
          animation-delay: 0.15s;
      }

  .chat-typing-dot:nth-child(4) {
          animation-delay: 0.3s;
      }
}

.chat-composer {
    display: flex;
    align-items: flex-end;
    gap: var(--space-2);
}

.chat-input {
    flex: 1;
    min-width: 0;
    min-height: 2.75rem;
    max-height: 10rem;
    field-sizing: content;
    resize: none;
}

.tool-call {
    margin-top: var(--space-2);
    font-size: var(--text-sm);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-surface);
}

.tool-call summary {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    cursor: pointer;
}

.tool-call summary:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--accent-glow);
}

.tool-call-dot {
    flex: none;
    width: 0.6rem;
    height: 0.6rem;
    background: var(--muted);
    border-radius: 50%;
}

.tool-call-done .tool-call-dot {
    background: var(--ok-text);
}

.tool-call-failed .tool-call-dot {
    background: var(--danger-text);
}

@media (prefers-reduced-motion: no-preference) {
  .tool-call-running .tool-call-dot {
          animation: horizon-chat-pulse 1.2s ease-in-out infinite;
      }
}

.tool-call-state {
    color: var(--muted);
}

.tool-call-failed .tool-call-state {
    color: var(--danger-text);
}

.tool-call-name {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-weight: 600;
}

.tool-call-body {
    padding: 0 var(--space-3) var(--space-3);
}

.tool-call-heading {
    margin: var(--space-2) 0 var(--space-1);
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--muted);
}

.tool-call pre {
    margin: 0;
    padding: var(--space-2);
    overflow-x: auto;
    font-size: var(--text-xs);
    background: var(--surface-sunk);
    border-radius: var(--radius-surface);
}

/* ---------------------------------------------------------------------------
   RepeaterField, InlineEdit and PinInput (form repeaters group)
   --------------------------------------------------------------------------- */

.repeater {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.repeater-rows {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.repeater-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--space-3);
    align-items: end;
    padding: var(--space-3);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-surface);
}

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

.repeater-fields {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
    gap: var(--space-3);
    min-width: 0;
}

.repeater-fields .field {
    margin-bottom: 0;
    min-width: 0;
}

.repeater-remove {
    align-self: end;
}

.repeater-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
}

.repeater-limit {
    font-size: var(--text-sm);
    color: var(--muted);
}

@media (max-width: 576px) {
  .repeater-row {
          grid-template-columns: minmax(0, 1fr);
          align-items: start;
      }

  .repeater-remove {
          justify-self: start;
      }
}

.inline-edit {
    display: inline-flex;
    flex-direction: column;
    gap: var(--space-1);
    max-width: 100%;
}

.inline-edit-value {
    display: inline-flex;
    align-items: baseline;
    gap: var(--space-2);
    max-width: 100%;
    padding: var(--space-1) var(--space-2);
    font: inherit;
    font-weight: 600;
    color: var(--ink);
    text-align: left;
    cursor: text;
    background: transparent;
    border: 0;
    border-bottom: 1px dashed var(--line);
    border-radius: var(--radius-surface);
}

.inline-edit-value:hover:not(:disabled) {
    background: var(--surface-sunk);
}

.inline-edit-value:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
}

.inline-edit-value:disabled {
    cursor: not-allowed;
    color: var(--muted);
}

.inline-edit-value.is-empty .inline-edit-text {
    font-weight: 400;
    color: var(--muted);
}

.inline-edit-pencil {
    font-weight: 400;
    color: var(--muted);
}

.inline-edit-form {
    display: inline-flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    align-items: center;
    max-width: 100%;
}

.inline-edit .inline-edit-input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="submit"]):not([type="button"]):not([type="file"]) {
    width: 16rem;
    max-width: 100%;
    padding: var(--space-1) var(--space-2);
}

.inline-edit textarea.inline-edit-input {
    min-height: 4rem;
}

.inline-edit-error {
    margin: 0;
    font-size: var(--text-sm);
    color: var(--danger-text);
}

.pin {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.pin-label {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--ink);
}

.pin-boxes {
    display: flex;
    gap: var(--space-2);
}

.pin .pin-box:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="submit"]):not([type="button"]):not([type="file"]) {
    width: 3rem;
    height: 3.4rem;
    padding: 0;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 1.4rem;
    font-weight: 600;
    text-align: center;
}

.pin-valid .pin-box:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="submit"]):not([type="button"]):not([type="file"]) {
    border-color: var(--ok-text);
}

.pin-invalid .pin-box:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="submit"]):not([type="button"]):not([type="file"]) {
    border-color: var(--danger-text);
}

.pin-message {
    min-height: 1.5em;
    margin: 0;
    font-size: var(--text-sm);
    color: var(--muted);
}

.pin-valid .pin-message {
    color: var(--ok-text);
}

.pin-invalid .pin-message {
    color: var(--danger-text);
}

.pin-glyph {
    margin-right: var(--space-1);
    font-weight: 700;
}

@media (max-width: 576px) {
  .pin-boxes {
          gap: var(--space-1);
      }

  .pin .pin-box:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="submit"]):not([type="button"]):not([type="file"]) {
          width: 2.4rem;
          height: 3rem;
      }
}

/* ---------------------------------------------------------------------------
   KanbanBoard, DiffView and PrevNext (records group)
   --------------------------------------------------------------------------- */

.kanban {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-3);
}

@media (max-width: 1024px) {
  .kanban {
          grid-template-columns: repeat(2, minmax(0, 1fr));
      }
}

@media (max-width: 576px) {
  .kanban {
          grid-template-columns: minmax(0, 1fr);
      }
}

.kanban-column {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    min-width: 0;
    padding: var(--space-3);
    background: var(--surface-sunk);
    border-radius: var(--radius-surface);
}

.kanban-column-over {
    outline: 2px solid var(--warn-text);
    outline-offset: -2px;
}

.kanban-column-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    margin: 0;
    font-size: var(--text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--muted);
}

.kanban-count {
    font-variant-numeric: tabular-nums;
}

.kanban-warning {
    margin: 0;
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--warn-text);
}

.kanban-cards {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

.kanban-card {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-3);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-surface);
}

.kanban-card-body {
    min-width: 0;
    overflow-wrap: anywhere;
}

.kanban-move {
    padding: var(--space-1) var(--space-2);
    font-size: var(--text-xs);
}

.kanban-empty {
    margin: 0;
    padding: var(--space-3) var(--space-1);
    font-size: var(--text-xs);
    text-align: center;
    color: var(--muted);
    border: 1px dashed var(--line);
    border-radius: var(--radius-surface);
}

.diff {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.diff-none,
.diff-summary {
    margin: 0;
    font-size: var(--text-sm);
    color: var(--muted);
}

.diff-scroll {
    overflow-x: auto;
}

.diff-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--text-sm);
}

.diff-caption {
    padding-bottom: var(--space-2);
    text-align: left;
    font-size: var(--text-xs);
    color: var(--muted);
}

.diff-table th,
.diff-table td {
    padding: var(--space-2) var(--space-3);
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid var(--line-subtle);
}

.diff-table thead th {
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--muted);
    border-bottom-color: var(--line);
}

.diff-table tbody th {
    width: 28%;
    font-weight: 600;
}

.diff-row-same td {
    color: var(--muted);
}

.diff-old {
    padding: 0 var(--space-1);
    color: var(--danger-text);
    text-decoration: line-through;
    text-decoration-thickness: 1px;
    background: color-mix(in oklab, var(--danger) 9%, transparent);
}

.diff-new {
    padding: 0 var(--space-1);
    color: var(--ok-text);
    background: color-mix(in oklab, var(--ok) 10%, transparent);
}

.diff-masked {
    font-style: italic;
}

.diff-inline-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.diff-label {
    margin-bottom: var(--space-1);
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--muted);
}

.diff-table .diff-label {
    margin-bottom: 0;
    font-size: inherit;
    color: inherit;
}

.diff-line {
    display: grid;
    grid-template-columns: 1.2rem minmax(0, 1fr);
    gap: var(--space-2);
    align-items: baseline;
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-surface);
    overflow-wrap: anywhere;
}

.diff-line-removed {
    background: color-mix(in oklab, var(--danger) 9%, transparent);
}

.diff-line-added {
    background: color-mix(in oklab, var(--ok) 9%, transparent);
}

.diff-line-removed .diff-old,
.diff-line-added .diff-new {
    padding: 0;
    background: none;
}

.diff-line-same {
    color: var(--muted);
}

.diff-gutter {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-weight: 500;
    color: var(--muted);
}

.prev-next {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--space-3);
}

@media (max-width: 576px) {
  .prev-next {
          grid-template-columns: minmax(0, 1fr);
      }
}

.prev-next-link {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    padding: var(--space-3) var(--space-4);
    color: var(--ink);
    text-decoration: none;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-surface);
}

a.prev-next-link:hover {
    border-color: var(--accent);
    background: var(--accent-soft);
}

a.prev-next-link:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.prev-next-next {
    text-align: right;
}

@media (max-width: 576px) {
  .prev-next-next {
          text-align: left;
      }
}

.prev-next-direction {
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--muted);
}

.prev-next-title {
    overflow: hidden;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.prev-next-hint {
    font-size: var(--text-xs);
    color: var(--muted);
}

.prev-next-placeholder {
    color: var(--muted);
    background: transparent;
    border-style: dashed;
}

.prev-next-placeholder .prev-next-title {
    font-weight: 400;
}

/* ===========================================================================
   Data and notifications (ProgressRing, Heatmap, ConsentBlock, NotificationList)
   =========================================================================== */

/* ---- ProgressRing ---- */

.progress-ring {
    position: relative;
    display: inline-grid;
    place-items: center;
    flex: none;
}

.progress-ring-small { width: 56px; height: 56px; }

.progress-ring-medium { width: 96px; height: 96px; }

.progress-ring-large { width: 140px; height: 140px; }

.progress-ring svg {
    display: block;
    transform: rotate(-90deg);
}

.progress-ring-track {
    stroke: var(--line);
}

.progress-ring-arc {
    stroke: var(--chart-1);
    stroke-linecap: butt;
}

.progress-ring-ok .progress-ring-arc { stroke: var(--ok); }

.progress-ring-warn .progress-ring-arc { stroke: var(--warn); }

.progress-ring-danger .progress-ring-arc { stroke: var(--danger); }

.progress-ring-neutral .progress-ring-arc { stroke: var(--muted); }

.progress-ring-label {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    text-align: center;
    line-height: 1.15;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--ink);
}

.progress-ring-small .progress-ring-label { font-size: var(--text-xs); }

.progress-ring-medium .progress-ring-label { font-size: var(--text-lg); }

.progress-ring-large .progress-ring-label { font-size: var(--text-xl); }

.progress-ring-label small {
    display: block;
    font-size: var(--text-xs);
    font-weight: 400;
    color: var(--muted);
}

@media (prefers-reduced-motion: no-preference) {
  .progress-ring-arc {
          transition: stroke-dashoffset var(--dur-slow) var(--ease);
      }
}

/* ---- Heatmap ---- */

.heatmap {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.heatmap-toolbar {
    display: flex;
}

.heatmap-caption {
    margin: 0;
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--muted);
    text-align: left;
}

.heatmap-table .heatmap-caption {
    padding-bottom: var(--space-2);
}

.heatmap-scroll {
    overflow-x: auto;
}

.heatmap-grid {
    display: grid;
    grid-template-columns: max-content repeat(var(--heatmap-columns, 1), minmax(2.6rem, 1fr));
    gap: 3px;
    min-width: max-content;
    font-size: var(--text-xs);
}

.heatmap-column-name {
    padding: var(--space-1) 0;
    text-align: center;
    font-weight: 600;
    color: var(--muted);
}

.heatmap-row-name {
    display: flex;
    align-items: center;
    padding-right: var(--space-3);
    white-space: nowrap;
    color: var(--ink);
}

.heatmap-cell {
    display: grid;
    place-items: center;
    height: 2.1rem;
    padding: 0;
    border: 0;
    border-radius: var(--radius-surface);
    font: inherit;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    color: var(--ink);
    background: var(--surface-sunk);
    cursor: default;
}

.heatmap-cell[data-step="none"] {
    color: var(--muted);
}

.heatmap-cell:not([data-step="0"]):not([data-step="none"]),
.heatmap-swatch:not([data-step="0"]) {
    background: color-mix(in oklab, var(--chart-1) var(--heatmap-mix), var(--surface));
}

/* Strong steps are dark enough in light mode for ink; in dark mode the hue is light, so the text flips. */

.heatmap-cell-strong {
    color: var(--ink);
}

[data-theme="dark"] .heatmap-cell-strong {
    color: var(--surface);
}

.heatmap-cell:hover,
.heatmap-cell:focus-visible {
    outline: 2px solid var(--ink);
    outline-offset: 1px;
}

.table th.heatmap-num,
.table td.heatmap-num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.heatmap-legend {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-xs);
    color: var(--muted);
}

.heatmap-swatch {
    display: inline-block;
    width: 1.2rem;
    height: 0.8rem;
    border-radius: var(--radius-surface);
    background: var(--surface-sunk);
    border: 1px solid var(--line);
}

/* ---- ConsentBlock ---- */

.consent {
    border: 1px solid var(--line);
    border-radius: var(--radius-surface);
    background: var(--surface);
}

/* ---- NotificationList and NotificationItem ---- */

.notification-list {
    border: 1px solid var(--line);
    border-radius: var(--radius-surface);
    background: var(--surface);
}

.notification-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--line);
}

.notification-toolbar-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
    margin-left: auto;
}

.notification-count {
    font-size: var(--text-sm);
    font-weight: 600;
}

.notification-group-heading {
    margin: 0;
    padding: var(--space-2) var(--space-4);
    font-size: var(--text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--muted);
    background: var(--surface-sunk);
    border-bottom: 1px solid var(--line-subtle);
}

.notification-group-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.notification {
    display: grid;
    grid-template-columns: 0.7rem 2.25rem minmax(0, 1fr) auto;
    align-items: start;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--line-subtle);
}

.notification:last-child {
    border-bottom: 0;
}

.notification-unread {
    background: var(--accent-soft);
}

.notification-dot {
    width: 0.55rem;
    height: 0.55rem;
    margin-top: 0.7rem;
    border-radius: var(--radius-pill);
    background: transparent;
}

.notification-unread .notification-dot {
    background: var(--accent-strong);
}

.notification-avatar {
    display: inline-flex;
    min-height: 2.25rem;
}

.notification-body {
    min-width: 0;
}

.notification-text {
    margin: 0;
    overflow-wrap: anywhere;
}

.notification-actor {
    font-weight: 600;
}

.notification-link {
    color: inherit;
    text-decoration: none;
}

.notification-link:hover {
    text-decoration: underline;
}

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

.notification-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-top: var(--space-2);
}

.notification-when {
    font-size: var(--text-sm);
    color: var(--muted);
    white-space: nowrap;
}

.notification-empty {
    margin: 0;
    padding: var(--space-6) var(--space-4);
    text-align: center;
    color: var(--muted);
}

@media (max-width: 576px) {
  .notification {
          grid-template-columns: 0.7rem 2.25rem minmax(0, 1fr);
      }

  .notification-when {
          grid-column: 3;
      }
}

/* ---------------------------------------------------------------------------
   List and ListItem, InputGroup, ResultPage, TrendDelta, PasswordInput
   --------------------------------------------------------------------------- */

/* List */

.list {
    list-style: none;
    margin: 0;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: var(--radius-surface);
    background: var(--surface);
    overflow: hidden;
}

.list > .list-item + .list-item {
    border-top: 1px solid var(--line-subtle);
}

.list-flush > .list-item + .list-item {
    border-top: 0;
}

.list-item-body {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: var(--space-1) var(--space-4);
    align-items: center;
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    padding: var(--space-3) var(--space-4);
    margin: 0;
    border: 0;
    background: none;
    font: inherit;
    color: inherit;
    text-align: left;
    text-decoration: none;
}

.list-compact .list-item-body {
    padding: var(--space-2) var(--space-3);
}

.list-item-nolead {
    grid-template-columns: minmax(0, 1fr) auto;
}

.list-item-action {
    cursor: pointer;
}

.list-item-action:hover {
    background: var(--surface-sunk);
}

.list-item-action:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: -2px;
}

.list-item.is-current > .list-item-body {
    background: var(--accent-soft);
    box-shadow: inset 3px 0 0 var(--accent-strong);
}

.list-item.is-disabled > .list-item-body {
    color: var(--muted);
    cursor: not-allowed;
    opacity: 0.6;
}

.list-item.is-disabled > .list-item-action:hover {
    background: none;
}

.list-item-lead {
    display: grid;
    place-items: center;
}

.list-item-main {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.list-item-title {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 600;
    color: var(--ink);
}

.list-item-subtitle {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: var(--text-sm);
    color: var(--muted);
}

.list-compact .list-item-subtitle {
    display: none;
}

.list-item-extra {
    display: block;
    font-size: var(--text-sm);
    color: var(--muted);
}

.list-item-trailing {
    display: flex;
    gap: var(--space-2);
    align-items: center;
    font-size: var(--text-sm);
    color: var(--muted);
    white-space: nowrap;
}

.list-item-chevron {
    display: inline-flex;
    flex: none;
}

/* InputGroup */

.input-group {
    display: flex;
    align-items: stretch;
    min-width: 0;
    border-radius: var(--radius-sm);
}

.input-group > * {
    min-width: 0;
}

.input-group > * + * {
    margin-left: -1px;
}

.input-group:focus-within {
    box-shadow: 0 0 0 3px var(--accent-glow);
}

.input-group > input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="submit"]):not([type="button"]):not([type="file"]) {
    flex: 1 1 auto;
    width: auto;
    border-radius: 0;
}

.input-group > input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="submit"]):not([type="button"]):not([type="file"]):focus {
    box-shadow: none;
    position: relative;
    z-index: 1;
}

.input-group > select {
    flex: 0 0 auto;
    width: auto;
    border-radius: 0;
}

.input-group > select:focus {
    box-shadow: none;
    position: relative;
    z-index: 1;
}

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

.input-group-addon {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    padding: 0 var(--space-3);
    background: var(--surface-sunk);
    border: 1px solid var(--line);
    color: var(--muted);
    font-size: var(--text-sm);
    white-space: nowrap;
}

.input-group > :first-child {
    border-top-left-radius: var(--radius-sm);
    border-bottom-left-radius: var(--radius-sm);
}

.input-group > :last-child {
    border-top-right-radius: var(--radius-sm);
    border-bottom-right-radius: var(--radius-sm);
}

.input-group > input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="submit"]):not([type="button"]):not([type="file"]):first-child {
    border-top-left-radius: var(--radius-sm);
    border-bottom-left-radius: var(--radius-sm);
}

.input-group > input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="submit"]):not([type="button"]):not([type="file"]):last-child {
    border-top-right-radius: var(--radius-sm);
    border-bottom-right-radius: var(--radius-sm);
}

.input-group-invalid > input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="submit"]):not([type="button"]):not([type="file"]),
.input-group-invalid > select,
.input-group-invalid > .input-group-addon {
    border-color: var(--danger);
}

/* ResultPage */

.result {
    --result-tint: var(--muted);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
    max-width: 34rem;
    margin-inline: auto;
    padding: var(--space-8) var(--space-4);
    text-align: center;
}

.result-success {
    --result-tint: var(--ok);
}

.result-error {
    --result-tint: var(--danger);
}

.result-forbidden,
.result-offline {
    --result-tint: var(--warn);
}

.result-notfound {
    --result-tint: var(--muted);
}

.result-maintenance {
    --result-tint: var(--accent);
}

.result-icon {
    display: grid;
    place-items: center;
    width: 4rem;
    height: 4rem;
    border-radius: var(--radius-pill);
    background: color-mix(in oklab, var(--result-tint) 14%, transparent);
    color: var(--result-tint);
    font-size: var(--text-xl);
    font-weight: 700;
}

.result-code {
    font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
    font-size: var(--text-sm);
    font-weight: 600;
    letter-spacing: 0.1em;
    color: var(--muted);
}

.result-title {
    margin: 0;
    font-size: var(--text-xl);
}

.result-description {
    max-width: 44ch;
    color: var(--muted);
}

.result-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-2);
    margin-top: var(--space-2);
}

.result-reference {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    border: 1px dashed var(--line);
    border-radius: var(--radius-surface);
    font-size: var(--text-sm);
    color: var(--muted);
}

.result-reference code {
    font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
    color: var(--ink);
}

/* TrendDelta */

.trend-delta {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: 2px var(--space-3);
    border-radius: var(--radius-pill);
    font-size: var(--text-sm);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.trend-delta small {
    font-size: inherit;
    font-weight: 400;
}

.trend-delta-good {
    background: color-mix(in oklab, var(--ok) 13%, transparent);
    color: var(--ok-text);
}

.trend-delta-bad {
    background: color-mix(in oklab, var(--danger) 13%, transparent);
    color: var(--danger-text);
}

.trend-delta-flat {
    background: var(--surface-sunk);
    color: var(--muted);
}

.trend-delta-compared {
    margin-left: var(--space-2);
    font-size: var(--text-sm);
    color: var(--muted);
}

/* PasswordInput */

.password-input {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.password-input-wrap {
    position: relative;
    display: flex;
}

.password-input-wrap > input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="submit"]):not([type="button"]):not([type="file"]) {
    padding-right: 5rem;
}

.password-input-toggle {
    position: absolute;
    top: 50%;
    right: var(--space-2);
    translate: 0 -50%;
    padding: var(--space-1) var(--space-2);
    border: 0;
    border-radius: var(--radius-sm);
    background: none;
    font: inherit;
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--accent-strong);
    cursor: pointer;
}

.password-input-toggle:hover {
    background: var(--accent-soft);
}

.password-input-toggle:focus-visible {
    outline: 2px solid var(--accent);
}

.password-input-meter {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-1);
}

.password-input-meter > i {
    height: 6px;
    border-radius: var(--radius-pill);
    background: var(--line);
}

.password-input-meter[data-strength="1"] > i:nth-child(-n + 1) {
    background: var(--danger);
}

.password-input-meter[data-strength="2"] > i:nth-child(-n + 2) {
    background: var(--warn);
}

.password-input-meter[data-strength="3"] > i:nth-child(-n + 3) {
    background: var(--chart-1);
}

.password-input-meter[data-strength="4"] > i {
    background: var(--ok);
}

.password-input-strength {
    min-height: 1.4em;
    font-size: var(--text-sm);
    color: var(--muted);
}

.password-input-rules {
    display: grid;
    gap: 2px;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: var(--text-sm);
    color: var(--muted);
}

.password-input-rules > li::before {
    content: "\25CB\00a0";
}

.password-input-rules > li.is-met {
    color: var(--ok-text);
}

.password-input-rules > li.is-met::before {
    content: "\2713\00a0";
}

/* ---------------------------------------------------------------------------
   LineChart interactive additions (.line-chart-), ChartLegend (.chart-legend-list/-item/-swatch),
   BulletChart (.bullet-), TransferList (.transfer-)
   --------------------------------------------------------------------------- */

.line-chart-interactive .chart:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 4px;
}

/* Interactive charts tell lines apart without colour: solid, dashed, dotted. */

.line-chart-interactive .chart-line-2 { stroke-dasharray: 6 3; }

.line-chart-interactive .chart-line-3 { stroke-dasharray: 2 3; }

.line-chart-interactive .chart {
    overflow: visible;
    touch-action: pan-y;
}

.line-chart-cross {
    stroke: var(--ink);
    stroke-width: 1;
    stroke-dasharray: 3 3;
    opacity: 0.5;
    pointer-events: none;
}

.line-chart-pt {
    stroke: var(--surface);
    stroke-width: 2;
    pointer-events: none;
}

.line-chart-pt-1 { fill: var(--chart-1); }

.line-chart-pt-2 { fill: var(--chart-2); }

.line-chart-pt-3 { fill: var(--chart-3); }

/* The hidden attribute has no effect on SVG elements by itself. */

.line-chart-cross[hidden],
.line-chart-pt[hidden] {
    display: none;
}

.line-chart-hit {
    fill: transparent;
}

.line-chart-readout {
    min-height: 2.6em;
    margin: 0;
    font-size: var(--text-sm);
    color: var(--muted);
    font-variant-numeric: tabular-nums;
}

.chart-legend-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.chart-legend-item {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    min-height: 2rem;
    padding: var(--space-1) var(--space-3);
    border: 1px solid var(--line);
    border-radius: var(--radius-pill);
    background: var(--surface);
    color: var(--ink);
    font: inherit;
    font-size: var(--text-sm);
    cursor: pointer;
}

.chart-legend-item:hover {
    background: var(--surface-sunk);
}

.chart-legend-item:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* A hidden series is struck through as well as faded, so the state is not opacity alone. */

.chart-legend-item[aria-pressed="false"] {
    opacity: 0.6;
    text-decoration: line-through;
}

.chart-legend-item[aria-disabled="true"] {
    cursor: default;
}

/* The swatch is a short piece of the line: same colour, same dash pattern. */

.chart-legend-swatch {
    display: inline-block;
    width: 1.5rem;
    height: 0;
}

.chart-legend-swatch-1 { border-top: 3px solid var(--chart-1); }

.chart-legend-swatch-2 { border-top: 3px dashed var(--chart-2); }

.chart-legend-swatch-3 { border-top: 3px dotted var(--chart-3); }

.bullet {
    display: grid;
    grid-template-columns: minmax(0, 11rem) minmax(0, 1fr) 5.5rem;
    align-items: center;
    gap: var(--space-2) var(--space-4);
}

.bullet-name {
    font-size: var(--text-sm);
    font-weight: 600;
}

.bullet-track {
    position: relative;
    height: 22px;
    overflow: hidden;
    border-radius: 2px;
    background: var(--surface-sunk);
}

.bullet-band {
    position: absolute;
    top: 0;
    bottom: 0;
}

.bullet-band-1 { background: color-mix(in oklab, var(--ink) 16%, var(--surface)); }

.bullet-band-2 { background: color-mix(in oklab, var(--ink) 10%, var(--surface)); }

.bullet-band-3 { background: color-mix(in oklab, var(--ink) 5%, var(--surface)); }

.bullet-actual {
    position: absolute;
    left: 0;
    top: 7px;
    height: 8px;
    background: var(--chart-2);
}

.bullet-target {
    position: absolute;
    top: 3px;
    bottom: 3px;
    width: 3px;
    margin-left: -1px;
    background: var(--ink);
}

.bullet-value {
    font-size: var(--text-sm);
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.bullet-value small {
    display: block;
    color: var(--muted);
    font-size: var(--text-xs);
}

.transfer {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: stretch;
    gap: var(--space-3);
}

.transfer-box {
    display: block;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: var(--radius-surface);
    background: var(--surface);
}

/* The legend floats so it sits inside the border as the box header. */

.transfer-legend {
    float: left;
    display: flex;
    justify-content: space-between;
    gap: var(--space-2);
    box-sizing: border-box;
    width: 100%;
    margin: 0;
    padding: var(--space-3);
    border-bottom: 1px solid var(--line);
    font-size: var(--text-sm);
    font-weight: 600;
}

.transfer-legend + * {
    clear: both;
}

.transfer-count {
    color: var(--muted);
    font-weight: 400;
    font-variant-numeric: tabular-nums;
}

.transfer-search {
    padding: var(--space-2) var(--space-3);
    border-bottom: 1px solid var(--line-subtle);
}

.transfer-list {
    height: 15rem;
    margin: 0;
    padding: var(--space-1);
    overflow: auto;
    list-style: none;
}

.transfer-option {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-surface);
    font-weight: 400;
    cursor: pointer;
}

.transfer-option:hover {
    background: var(--surface-sunk);
}

.transfer-option:has(input:checked) {
    background: var(--accent-soft);
}

.transfer-option:has(input:focus-visible) {
    outline: 2px solid var(--accent);
    outline-offset: -2px;
}

.transfer-option input {
    width: 1rem;
    height: 1rem;
    accent-color: var(--accent-strong);
}

.transfer-empty {
    padding: var(--space-4) var(--space-3);
    text-align: center;
    color: var(--muted);
    font-size: var(--text-sm);
}

.transfer-actions {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: var(--space-2);
}

.transfer-glyph-v { display: none; }

.transfer-status {
    grid-column: 1 / -1;
    min-height: 1.4em;
    margin: 0;
    color: var(--muted);
    font-size: var(--text-sm);
}

@media (max-width: 576px) {
  .bullet {
          grid-template-columns: minmax(0, 1fr) 5rem;
      }

  .bullet-track {
          grid-column: 1 / -1;
          grid-row: 2;
      }

  .transfer {
          grid-template-columns: minmax(0, 1fr);
      }

  .transfer-actions {
          flex-direction: row;
          justify-content: center;
      }

  .transfer-glyph-h { display: none; }

  .transfer-glyph-v { display: inline; }
}

/* ---------------------------------------------------------------------------
   Carousel, ExpandableText and SkipLink (batch four, agent C)
   The optional horizon.js sets data-h-ready, data-h-open and aria-current.
   Without it the carousel is a scrollable strip and the text shows in full.
   --------------------------------------------------------------------------- */

.carousel {
    position: relative;
}

.carousel-track {
    display: flex;
    gap: var(--space-3);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    scrollbar-width: thin;
    padding-bottom: var(--space-1);
}

@media (prefers-reduced-motion: no-preference) {
  .carousel-track {
          scroll-behavior: smooth;
      }
}

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

.carousel-slide {
    flex: 0 0 100%;
    min-width: 0;
    margin: 0;
    scroll-snap-align: start;
    overflow: hidden;
    position: relative;
    border: 1px solid var(--line);
    border-radius: var(--radius-surface);
    background: var(--surface);
}

.carousel-per-2 .carousel-slide {
    flex-basis: calc((100% - var(--space-3)) / 2);
}

.carousel-per-3 .carousel-slide {
    flex-basis: calc((100% - 2 * var(--space-3)) / 3);
}

/* One slide at a time on a narrow screen, whatever the app asked for. */

@media (max-width: 576px) {
  .carousel-per-2 .carousel-slide,
      .carousel-per-3 .carousel-slide {
          flex-basis: 100%;
      }
}

.carousel-slide img {
    display: block;
    max-width: 100%;
    height: auto;
}

.carousel-caption {
    padding: var(--space-2) var(--space-3);
    font-size: 0.875rem;
    background: var(--surface);
}

.carousel-controls {
    display: none;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-3);
    margin-top: var(--space-3);
}

.carousel[data-h-ready] .carousel-controls {
    display: flex;
}

.carousel-buttons {
    display: flex;
    gap: var(--space-2);
}

.carousel-dots {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.carousel-dot {
    appearance: none;
    cursor: pointer;
    width: 0.625rem;
    height: 0.625rem;
    padding: 0;
    border: 0;
    border-radius: var(--radius-pill);
    background: var(--line);
    box-shadow: inset 0 0 0 1px var(--muted);
}

.carousel-dot[aria-current="true"] {
    background: var(--accent-strong);
    box-shadow: none;
}

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

.carousel-count {
    font-size: 0.875rem;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
}

/* ExpandableText: the clamp only applies once the script has measured the text. */

.expandable {
    --expandable-lines: 3;
}

.expandable-lines-1 { --expandable-lines: 1; }

.expandable-lines-2 { --expandable-lines: 2; }

.expandable-lines-3 { --expandable-lines: 3; }

.expandable-lines-4 { --expandable-lines: 4; }

.expandable-lines-5 { --expandable-lines: 5; }

.expandable-lines-6 { --expandable-lines: 6; }

.expandable-lines-7 { --expandable-lines: 7; }

.expandable-lines-8 { --expandable-lines: 8; }

.expandable-lines-9 { --expandable-lines: 9; }

.expandable-lines-10 { --expandable-lines: 10; }

.expandable[data-h-ready]:not([data-h-open]) .expandable-content {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: var(--expandable-lines);
    line-clamp: var(--expandable-lines);
    overflow: hidden;
}

.expandable-toggle {
    appearance: none;
    display: inline-block;
    margin-top: var(--space-1);
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--accent-strong);
    cursor: pointer;
}

.expandable-toggle[hidden] {
    display: none;
}

.expandable-toggle:hover {
    text-decoration: underline;
}

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

/* SkipLink: off-screen until it takes keyboard focus. */

.skip-link {
    position: absolute;
    left: var(--space-3);
    top: -4rem;
    z-index: 5;
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-surface);
    background: var(--ink);
    color: var(--bg);
    font-weight: 600;
    text-decoration: none;
}

@media (prefers-reduced-motion: no-preference) {
  .skip-link {
          transition: top var(--dur-fast) var(--ease);
      }
}

.skip-link:focus {
    top: var(--space-3);
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* ---------------------------------------------------------------------------
   Anchored panels: Popover, HoverCard, MenuButton, ContextMenu, CopyButton (ADR 0010)
   Without horizon.js the panel is a plain block below the anchor and the menu is a
   visible list. With it (the script sets data-h-ready on the root) the panel is a
   fixed popup that is hidden unless the script sets data-h-open on the root.
   The script owns data-h-ready, data-h-open and data-h-side; they are only styled here.
   No new box-shadow: the panels are bordered, as in the flat visual language (ADR 0004).
   --------------------------------------------------------------------------- */

.popover,
.menu {
    position: relative;
    display: inline-block;
}

.popover-anchor {
    display: inline-block;
}

.popover-panel,
.menu-panel {
    display: block;
    box-sizing: border-box;
    margin-top: var(--space-2);
    background: var(--surface);
    color: var(--ink);
    border: 1px solid var(--line);
    border-radius: var(--radius-surface);
}

.popover-panel {
    width: max-content;
    min-width: 12rem;
    max-width: min(22rem, calc(100vw - 2rem));
    padding: var(--space-3) var(--space-4);
    font-size: var(--text-sm);
}

.popover-panel > :first-child {
    margin-top: 0;
}

.popover-panel > :last-child {
    margin-bottom: 0;
}

.menu-panel {
    width: max-content;
    min-width: 12rem;
    max-width: min(22rem, calc(100vw - 2rem));
    padding: var(--space-1);
}

.popover-arrow {
    display: none;
}

.popover[data-h-ready] .popover-panel,
.menu[data-h-ready] .menu-panel {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 65;
    margin: 0;
    display: none;
}

.popover[data-h-ready][data-h-open] .popover-panel,
.menu[data-h-ready][data-h-open] .menu-panel {
    display: block;
}

.popover[data-h-ready] .popover-arrow {
    display: block;
    position: absolute;
    left: var(--space-4);
    width: 0.6rem;
    height: 0.6rem;
    background: var(--surface);
    border: 1px solid var(--line);
    transform: rotate(45deg);
}

.popover-panel[data-h-side="bottom"] .popover-arrow {
    top: -0.35rem;
    border-right: 0;
    border-bottom: 0;
}

.popover-panel[data-h-side="top"] .popover-arrow {
    bottom: -0.35rem;
    border-left: 0;
    border-top: 0;
}

@media (prefers-reduced-motion: no-preference) {
  .popover[data-h-open] .popover-panel,
      .menu[data-h-open] .menu-panel {
          animation: horizon-popover-in var(--dur-fast) var(--ease);
      }
}

@keyframes horizon-popover-in {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* Menu */

.menu[data-h-trigger="context"] {
    display: block;
}

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

.menu-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    box-sizing: border-box;
    width: 100%;
    margin: 0;
    padding: var(--space-2) var(--space-3);
    border: 0;
    border-radius: var(--radius-surface);
    background: none;
    color: var(--ink);
    font: inherit;
    font-size: var(--text-sm);
    text-align: left;
    cursor: pointer;
}

.menu-item:hover,
.menu-item:focus {
    background: var(--accent-soft);
    color: var(--accent-strong);
}

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

.menu-item[aria-disabled="true"] {
    opacity: 0.5;
    cursor: default;
}

.menu-item[aria-disabled="true"]:hover,
.menu-item[aria-disabled="true"]:focus {
    background: none;
    color: var(--ink);
}

.menu-item-danger {
    color: var(--danger-text);
}

.menu-item-danger:hover,
.menu-item-danger:focus {
    color: var(--danger-text);
}

.menu-shortcut {
    font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
    font-size: var(--text-xs);
    color: var(--muted);
}

.menu-separator {
    margin: var(--space-1) 0;
    border: 0;
    border-top: 1px solid var(--line);
}

/* CopyButton */

.copy-button-wrap {
    display: inline-flex;
}

.copy-button {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    margin: 0;
    padding: var(--space-1) var(--space-3);
    border: 1px solid var(--line);
    border-radius: var(--radius-pill);
    background: var(--surface);
    color: var(--ink);
    font: inherit;
    font-size: var(--text-sm);
    font-weight: 600;
    cursor: pointer;
}

.copy-button:hover {
    background: var(--surface-sunk);
}

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

.copy-button-icon {
    padding: var(--space-2);
    border-radius: var(--radius-surface);
}

.copy-button[data-h-state="copied"] {
    border-color: var(--ok);
    color: var(--ok-text);
}

.copy-button[data-h-state="failed"] {
    border-color: var(--warn);
    color: var(--warn-text);
}

/* ---------------------------------------------------------------------------
   CommandPalette (.command-palette-*): a search dialog. No new shadow: the scrim
   already separates it from the page. Behaviour (shortcut, focus) is horizon.js.
   --------------------------------------------------------------------------- */

.command-palette-scrim {
    position: fixed;
    inset: 0;
    z-index: 60;
    display: grid;
    align-items: start;
    justify-items: center;
    padding: 12vh var(--space-4) var(--space-4);
    background: color-mix(in oklab, var(--ink) 45%, transparent);
}

.command-palette-dialog {
    width: min(38rem, 100%);
    max-height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--surface);
    color: var(--ink);
    border: 1px solid var(--line);
    border-radius: var(--radius-surface);
}

.command-palette-input {
    width: 100%;
    padding: var(--space-4) var(--space-5);
    font: inherit;
    font-size: var(--text-base);
    color: inherit;
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--line);
    border-radius: 0;
}

.command-palette-input:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: -2px;
}

.command-palette-list {
    list-style: none;
    margin: 0;
    padding: var(--space-2);
    max-height: 20rem;
    overflow-y: auto;
}

.command-palette-group,
.command-palette-empty {
    padding: var(--space-2) var(--space-3) var(--space-1);
    font-size: var(--text-xs);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted);
}

.command-palette-empty {
    text-transform: none;
    letter-spacing: normal;
    font-size: var(--text-sm);
    padding: var(--space-4) var(--space-3);
}

.command-palette-option {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-surface);
    cursor: pointer;
}

.command-palette-option:hover {
    background: var(--surface-sunk);
}

.command-palette-option[aria-selected="true"] {
    background: var(--accent-soft);
    color: var(--accent-strong);
    font-weight: 600;
}

.command-palette-hint {
    flex: 0 0 auto;
    font-size: var(--text-xs);
    color: var(--muted);
}

.command-palette-foot {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    padding: var(--space-2) var(--space-4);
    border-top: 1px solid var(--line);
    font-size: var(--text-xs);
    color: var(--muted);
}

/* ---------------------------------------------------------------------------
   LightboxGallery / LightboxItem (.lightbox-*): thumbnails plus a full-viewport
   native <dialog>. Without the script the thumbnails are plain links to the image
   and the closed dialog is not displayed.
   --------------------------------------------------------------------------- */

.lightbox-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-3);
}

@media (min-width: 576px) {
  .lightbox-cols-3 .lightbox-grid,
      .lightbox-cols-4 .lightbox-grid,
      .lightbox-cols-5 .lightbox-grid,
      .lightbox-cols-6 .lightbox-grid {
          grid-template-columns: repeat(3, minmax(0, 1fr));
      }
}

@media (min-width: 768px) {
  .lightbox-cols-4 .lightbox-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }

  .lightbox-cols-5 .lightbox-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }

  .lightbox-cols-6 .lightbox-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

.lightbox-thumb {
    display: block;
    overflow: hidden;
    background: var(--surface-sunk);
    border: 1px solid var(--line);
    border-radius: var(--radius-surface);
}

.lightbox-thumb img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

.lightbox-thumb:focus-visible,
.lightbox-btn:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

[data-h-ready] .lightbox-thumb {
    cursor: zoom-in;
}

.lightbox-dialog {
    width: 100vw;
    max-width: none;
    height: 100dvh;
    max-height: none;
    padding: 0;
    border: 0;
    background: transparent;
    color: #fff;
}

.lightbox-dialog[open] {
    display: block;
}

.lightbox-dialog::backdrop {
    background: color-mix(in oklab, var(--ink) 85%, transparent);
}

.lightbox-frame {
    height: 100%;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    gap: var(--space-3);
    padding: var(--space-4);
}

.lightbox-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-3);
    font-size: var(--text-sm);
}

.lightbox-stage {
    display: grid;
    place-items: center;
    min-height: 0;
}

.lightbox-image {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: var(--radius-surface);
}

.lightbox-btn {
    padding: var(--space-2) var(--space-4);
    font: inherit;
    font-weight: 600;
    color: #fff;
    background: transparent;
    border: 1px solid color-mix(in oklab, #fff 45%, transparent);
    border-radius: var(--radius-pill);
    cursor: pointer;
}

.lightbox-btn:hover {
    background: color-mix(in oklab, #fff 15%, transparent);
}

.lightbox-dialog .lightbox-btn:focus-visible {
    outline-color: #fff;
}

/* ---------------------------------------------------------------------------
   SignaturePad, RangeSlider, Splitter and ReorderableList (batch five, agent C)
   The optional horizon.js sets data-h-ready, data-h-dragging, data-h-drag and
   aria-valuenow, and draws on the signature canvas. Without it the range slider
   and the reorder buttons work, the splitter shows its panes at their size, and
   the signature canvas is inert (collect a typed name as well).
   --------------------------------------------------------------------------- */

.signature-pad {
    border: 1px solid var(--line);
    border-radius: var(--radius-surface);
    background: var(--surface);
}

.signature-pad.invalid {
    border-color: var(--danger);
}

.signature-pad-canvas {
    display: block;
    width: 100%;
    height: var(--signature-height, 180px);
    touch-action: none;
    cursor: crosshair;
    background: linear-gradient(var(--line), var(--line)) no-repeat var(--space-4) calc(100% - 2.5rem) / calc(100% - 2 * var(--space-4)) 1px;
}

.signature-pad[data-h-disabled] .signature-pad-canvas {
    cursor: not-allowed;
    opacity: 0.6;
}

.signature-pad-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    border-top: 1px solid var(--line);
    font-size: var(--text-sm);
    color: var(--muted);
}

.signature-pad-actions {
    display: inline-flex;
    gap: var(--space-2);
}

/* RangeSlider: two native range inputs over one track. Only the thumbs take the pointer. */

.range-slider {
    --range-lo: 0%;
    --range-hi: 100%;
}

.range-slider-head {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--space-2);
    margin-bottom: var(--space-1);
}

.range-slider-label {
    font-weight: 600;
}

.range-slider-value {
    font-size: var(--text-sm);
    color: var(--muted);
    font-variant-numeric: tabular-nums;
}

.range-slider-control {
    position: relative;
    height: 28px;
}

.range-slider-track,
.range-slider-fill {
    position: absolute;
    top: 12px;
    height: 4px;
    border-radius: var(--radius-pill);
}

.range-slider-track {
    left: 0;
    right: 0;
    background: var(--line);
}

.range-slider-fill {
    left: var(--range-lo);
    right: calc(100% - var(--range-hi));
    background: var(--accent-strong);
}

.range-slider-input {
    position: absolute;
    inset: 0;
    z-index: 2;
    width: 100%;
    margin: 0;
    background: none;
    pointer-events: none;
    appearance: none;
    -webkit-appearance: none;
}

.range-slider-input.range-slider-top {
    z-index: 3;
}

.range-slider-input::-webkit-slider-runnable-track {
    background: none;
    height: 28px;
}

.range-slider-input::-moz-range-track {
    background: none;
}

.range-slider-input::-webkit-slider-thumb {
    pointer-events: auto;
    -webkit-appearance: none;
    width: 20px;
    height: 20px;
    margin-top: 4px;
    border-radius: 50%;
    background: var(--surface);
    border: 2px solid var(--accent-strong);
    cursor: pointer;
}

.range-slider-input::-moz-range-thumb {
    pointer-events: auto;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--surface);
    border: 2px solid var(--accent-strong);
    cursor: pointer;
}

.range-slider-input:focus-visible {
    outline: none;
}

.range-slider-input:focus-visible::-webkit-slider-thumb {
    box-shadow: 0 0 0 3px var(--accent-glow);
}

.range-slider-input:focus-visible::-moz-range-thumb {
    box-shadow: 0 0 0 3px var(--accent-glow);
}

.range-slider.is-disabled {
    opacity: 0.6;
}

.range-slider.is-disabled .range-slider-fill {
    background: var(--muted);
}

.range-slider-scale {
    display: flex;
    justify-content: space-between;
    font-size: var(--text-xs);
    color: var(--muted);
    font-variant-numeric: tabular-nums;
}

/* Splitter: two panes and a handle. --splitter-size is the first pane's share. */

.splitter {
    --splitter-size: 50%;
    --splitter-height: 20rem;
    --splitter-vertical: 0;
    display: grid;
    grid-template-columns: var(--splitter-size) 0.625rem minmax(0, 1fr);
    height: var(--splitter-height);
    border: 1px solid var(--line);
    border-radius: var(--radius-surface);
    background: var(--surface);
    overflow: hidden;
}

.splitter-pane {
    min-width: 0;
    min-height: 0;
    overflow: auto;
    padding: var(--space-3);
}

.splitter-handle {
    position: relative;
    background: var(--surface-sunk);
    border-inline: 1px solid var(--line);
    cursor: col-resize;
    touch-action: none;
}

.splitter-handle::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 2px;
    height: 1.75rem;
    translate: -50% -50%;
    border-radius: 1px;
    background: var(--muted);
}

.splitter-handle:hover,
.splitter-handle[data-h-dragging],
.splitter[data-h-dragging] .splitter-handle {
    background: var(--accent-soft);
}

.splitter[data-h-dragging] {
    user-select: none;
}

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

@media (max-width: 576px) {
  .splitter {
          --splitter-vertical: 1;
          grid-template-columns: minmax(0, 1fr);
          grid-template-rows: var(--splitter-size) 0.625rem minmax(0, 1fr);
      }

  .splitter-handle {
          cursor: row-resize;
          border-inline: 0;
          border-block: 1px solid var(--line);
      }

  .splitter-handle::after {
          width: 1.75rem;
          height: 2px;
      }
}

/* ReorderableList: buttons always work; the drag handle appears once the script is ready. */

.reorderable {
    list-style: none;
    margin: 0;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: var(--radius-surface);
    background: var(--surface);
}

.reorderable-item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-3);
    background: var(--surface);
}

.reorderable-item + .reorderable-item {
    border-top: 1px solid var(--line-subtle);
}

.reorderable-body {
    flex: 1 1 auto;
    min-width: 0;
}

.reorderable-rank {
    min-width: 1.5rem;
    font-size: var(--text-sm);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--muted);
}

.reorderable-moves {
    display: inline-flex;
    gap: var(--space-1);
}

.reorderable-handle {
    display: none;
    appearance: none;
    padding: var(--space-1) var(--space-2);
    border: 0;
    border-radius: var(--radius-sm);
    background: none;
    font: inherit;
    color: var(--muted);
    cursor: grab;
    touch-action: none;
}

.reorderable[data-h-ready] .reorderable-handle {
    display: inline-block;
}

.reorderable-handle:hover {
    background: var(--surface-sunk);
}

.reorderable-handle:focus-visible {
    outline: 2px solid var(--accent);
}

.reorderable[data-h-dragging] {
    user-select: none;
}

.reorderable[data-h-dragging] .reorderable-handle {
    cursor: grabbing;
}

.reorderable-item[data-h-drag] {
    position: relative;
    z-index: 1;
    background: var(--accent-soft);
    outline: 2px solid var(--accent);
    outline-offset: -2px;
}

/* ---------------------------------------------------------------------------
   ThemeSwitcher, Popconfirm, OverflowList and InfiniteList (batch six, agent A).
   The script owns data-h-ready, data-h-state and data-h-open; they are only styled here.
   No new box-shadow.
   --------------------------------------------------------------------------- */

/* ThemeSwitcher */

.theme-switcher {
    display: inline-flex;
    gap: 2px;
    padding: 3px;
    border: 1px solid var(--line);
    border-radius: var(--radius-pill);
}

.theme-switcher:not([data-h-ready]) {
    display: none;
}

.theme-switcher-option {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    margin: 0;
    padding: 5px var(--space-4);
    border: 0;
    border-radius: var(--radius-pill);
    background: none;
    color: var(--ink);
    font: inherit;
    font-size: var(--text-sm);
    cursor: pointer;
}

.theme-switcher-option:hover {
    background: var(--surface-sunk);
}

.theme-switcher-option[aria-checked="true"] {
    background: var(--accent-soft);
    color: var(--accent-strong);
    font-weight: 600;
}

.theme-switcher-option:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
}

.theme-switcher[data-h-storage] .theme-switcher-option[data-h-theme] {
    white-space: nowrap;
}

/* Popconfirm */

.popconfirm-detail {
    margin: var(--space-1) 0 var(--space-3);
    color: var(--muted);
}

.popconfirm-actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-2);
    margin-top: var(--space-3);
}

.popconfirm-actions [data-h-close] {
    cursor: pointer;
}

/* OverflowList */

.overflow-list {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-1);
    min-width: 0;
}

.overflow-list[data-h-ready] {
    flex-wrap: nowrap;
}

.overflow-list-item[data-h-ov-item] {
    flex: none;
}

.overflow-list-item[data-h-current] {
    position: relative;
}

.overflow-list-item[data-h-state="hidden"] {
    position: absolute;
    visibility: hidden;
    pointer-events: none;
}

.overflow-list-more {
    flex: none;
    margin-left: auto;
}

.overflow-list-more[data-h-ov-more][hidden],
.overflow-list .menu-item[data-h-ov-entry][hidden] {
    display: none;
}

/* InfiniteList */

.infinite-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.infinite-list-status {
    margin: 0;
    color: var(--muted);
    font-size: var(--text-sm);
}

.infinite-list[data-h-auto] .infinite-list-sentinel,
.infinite-list-sentinel[data-h-sentinel] {
    height: 1px;
}

.infinite-list [data-h-load] {
    align-self: flex-start;
}

.infinite-list[aria-busy="true"] [data-h-load] {
    cursor: progress;
}

/* ===========================================================================
   Batch six (B): DataTable upgrades, EditableGrid, TreeSelect.
   Appended as one block. Tokens only, one radius, no --shadow-float.
   =========================================================================== */

/* ---- DataTable upgrades: sticky header, column picker, row detail, totals ---- */

.data-table-toolbar-columns {
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-3);
}

.data-table-columns {
    margin: 0;
    padding: 0;
    border: 0;
    min-width: 0;
}

.data-table-columns legend {
    padding: 0;
    margin-bottom: var(--space-2);
    font-weight: 600;
}

.data-table-column-option {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-1) 0;
}

.data-table-scroll {
    max-height: var(--data-table-max-height, 24rem);
    overflow: auto;
    border: 1px solid var(--line);
    border-radius: var(--radius-surface);
}

.data-table-scroll:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.data-table-sticky {
    border-collapse: separate;
    border-spacing: 0;
}

.data-table-sticky thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--surface-sunk);
    border-bottom: 1px solid var(--line);
}

.data-table-expander-cell {
    width: 2.5rem;
    padding-right: 0;
}

.data-table-expander {
    appearance: none;
    display: inline-grid;
    place-items: center;
    width: 1.75rem;
    height: 1.75rem;
    padding: 0;
    border: 0;
    border-radius: var(--radius-surface);
    background: transparent;
    color: var(--muted);
    font: inherit;
    cursor: pointer;
}

.data-table-expander:hover {
    background: var(--surface-sunk);
    color: var(--ink);
}

.data-table-expander:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
}

.data-table-expander[aria-expanded="true"] {
    color: var(--ink);
}

.data-table-expander[aria-expanded="true"] > span {
    display: inline-block;
    transform: rotate(90deg);
}

.table tbody tr.data-table-detail:hover {
    background: transparent;
}

.data-table-detail > td {
    padding: var(--space-4);
    background: var(--surface-sunk);
    color: var(--muted);
}

.data-table-totals > th,
.data-table-totals > td {
    background: var(--surface-sunk);
    font-weight: 600;
    color: var(--ink);
    text-transform: none;
    letter-spacing: normal;
    font-size: var(--text-sm);
    border-top: 1px solid var(--line);
    border-bottom: 0;
}

.data-table-sticky tfoot th,
.data-table-sticky tfoot td,
.data-table-scroll tfoot th,
.data-table-scroll tfoot td {
    position: sticky;
    bottom: 0;
    z-index: 1;
}

/* ---- EditableGrid ---- */

.editable-grid {
    border: 1px solid var(--line);
    border-radius: var(--radius-surface);
    background: var(--surface);
    overflow: auto;
}

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

.editable-grid-table {
    width: 100%;
    min-width: 34rem;
    border-collapse: collapse;
    font-size: var(--text-sm);
}

.editable-grid-table th {
    padding: var(--space-2) var(--space-3);
    background: var(--surface-sunk);
    border-bottom: 1px solid var(--line);
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-align: left;
    text-transform: uppercase;
    color: var(--muted);
}

.editable-grid-table th.editable-grid-colhead {
    text-align: right;
}

.editable-grid-table th.editable-grid-rowhead {
    font-size: var(--text-sm);
    font-weight: 600;
    letter-spacing: normal;
    text-transform: none;
    color: var(--ink);
    white-space: nowrap;
    border-bottom: 1px solid var(--line-subtle);
}

.editable-grid-table td {
    padding: 0;
    border: 1px solid var(--line-subtle);
}

.editable-grid .editable-grid-cell:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="submit"]):not([type="button"]):not([type="file"]) {
    box-sizing: border-box;
    width: 100%;
    min-width: 3.5rem;
    margin: 0;
    padding: var(--space-2) var(--space-3);
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    color: var(--ink);
    font: inherit;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.editable-grid .editable-grid-cell:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="submit"]):not([type="button"]):not([type="file"]):focus,
.editable-grid .editable-grid-cell:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="submit"]):not([type="button"]):not([type="file"]):focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: -2px;
    background: var(--accent-soft);
    box-shadow: none;
}

.editable-grid .editable-grid-cell.is-invalid:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="submit"]):not([type="button"]):not([type="file"]) {
    background: color-mix(in oklab, var(--danger) 12%, transparent);
    outline: 2px solid var(--danger);
    outline-offset: -2px;
}

.editable-grid .editable-grid-cell:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="submit"]):not([type="button"]):not([type="file"]):disabled {
    color: var(--muted);
    cursor: not-allowed;
}

.editable-grid-table td.editable-grid-total {
    padding: var(--space-2) var(--space-3);
    background: var(--surface-sunk);
    font-weight: 600;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.editable-grid-status {
    position: sticky;
    left: 0;
    margin: 0;
    padding: var(--space-2) var(--space-3);
    font-size: var(--text-sm);
    color: var(--danger-text);
}

.editable-grid-status:empty {
    display: none;
}

/* ---- TreeSelect ---- */

.tree-select {
    position: relative;
    max-width: 28rem;
}

.tree-select-trigger {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    width: 100%;
    padding: var(--space-3);
    border: 1px solid var(--line);
    border-radius: var(--radius-surface);
    background: var(--surface);
    color: var(--ink);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.tree-select-trigger:focus-visible,
.tree-select-trigger[aria-expanded="true"] {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-glow);
    outline: none;
}

.tree-select-trigger:disabled {
    color: var(--muted);
    cursor: not-allowed;
}

.tree-select-trigger.invalid {
    border-color: var(--danger);
}

.tree-select-placeholder,
.tree-select-path {
    color: var(--muted);
}

.tree-select-caret {
    flex: none;
    color: var(--muted);
}

.tree-select-panel {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + var(--space-1));
    z-index: 56;
    padding: var(--space-2);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-surface);
}

.tree-select-search {
    box-sizing: border-box;
    width: 100%;
    margin-bottom: var(--space-2);
}

.tree-select-tree,
.tree-select-tree ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.tree-select-tree {
    max-height: 15rem;
    overflow: auto;
}

.tree-select-tree ul {
    padding-left: var(--space-4);
}

.tree-select-tree li {
    outline: none;
}

.tree-select-row {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2);
    border-radius: var(--radius-surface);
    font-size: var(--text-sm);
    cursor: pointer;
}

.tree-select-row:hover {
    background: var(--surface-sunk);
}

.tree-select-tree li:focus > .tree-select-row {
    background: var(--accent-soft);
    outline: 2px solid var(--accent);
    outline-offset: -2px;
}

.tree-select-row.is-selected {
    font-weight: 600;
    color: var(--accent-strong);
}

.tree-select-row.is-group {
    color: var(--muted);
}

.tree-select-twist {
    flex: none;
    width: 1.1rem;
    text-align: center;
    color: var(--muted);
}

.tree-select-empty {
    margin: 0;
    padding: var(--space-3);
    font-size: var(--text-sm);
    color: var(--muted);
}

@media (prefers-reduced-motion: no-preference) {
  .data-table-expander[aria-expanded="true"] > span {
          transition: transform var(--dur-fast) var(--ease);
      }
}

.editable-grid-cell[data-h-cell][data-h-row][data-h-col] {
    text-overflow: ellipsis;
}

/* ---------------------------------------------------------------------------
   Tour (.tour-), GaugeChart (.gauge-), FunnelChart (.funnel-), GanttChart (.gantt-)
   --------------------------------------------------------------------------- */

/* Tour: the spotlight is a fixed box the script sizes over the target; its huge spread shadow dims the
   rest of the page (this is not --shadow-float). Both pieces sit above dialogs. */

.tour-spotlight[data-h-spot] {
    position: fixed;
    z-index: 80;
    border-radius: var(--radius-surface);
    box-shadow: 0 0 0 9999px color-mix(in oklab, var(--ink) 55%, transparent);
    pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
  .tour-spotlight[data-h-spot] {
          transition: left var(--dur-base) var(--ease), top var(--dur-base) var(--ease),
              width var(--dur-base) var(--ease), height var(--dur-base) var(--ease);
      }
}

.tour-card[data-h-tour-target] {
    position: fixed;
    z-index: 81;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    width: min(19rem, calc(100vw - 24px));
    padding: var(--space-4);
    background: var(--surface);
    color: var(--ink);
    border: 1px solid var(--line);
    border-radius: var(--radius-surface);
}

/* Without the script (no data-h-ready) the card sits at the bottom centre of the screen. The script
   positions it with inline left and top once it is running. */

.tour-card[data-h-tour-target]:not([data-h-ready]) {
    left: 50%;
    bottom: var(--space-4);
    transform: translateX(-50%);
}

.tour-title {
    margin: 0;
}

.tour-body {
    margin: 0;
    color: var(--muted);
    font-size: var(--text-sm);
}

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

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

.tour-count {
    color: var(--muted);
    font-size: var(--text-xs);
    font-variant-numeric: tabular-nums;
}

.tour-dots {
    display: flex;
    gap: 5px;
}

.tour-dot {
    width: 7px;
    height: 7px;
    border-radius: var(--radius-pill);
    background: var(--line);
}

.tour-dot-on {
    background: var(--accent-strong);
}

.tour-actions {
    display: flex;
    gap: var(--space-2);
}

/* GaugeChart */

.gauge {
    width: min(100%, 18rem);
}

.gauge-dial {
    position: relative;
}

.gauge-svg {
    display: block;
    width: 100%;
    height: auto;
}

.gauge-band {
    fill: none;
    stroke-width: 16;
    stroke-linecap: butt;
}

.gauge-band-1 { stroke: color-mix(in oklab, var(--ink) 16%, var(--surface)); }

.gauge-band-2 { stroke: color-mix(in oklab, var(--ink) 10%, var(--surface)); }

.gauge-band-3 { stroke: color-mix(in oklab, var(--ink) 5%, var(--surface)); }

.gauge-arc {
    fill: none;
    stroke-width: 6;
    stroke-linecap: butt;
}

.gauge-poor { stroke: var(--danger); }

.gauge-fair { stroke: var(--warn); }

.gauge-good { stroke: var(--ok); }

.gauge-target {
    stroke: var(--ink);
    stroke-width: 3;
}

.gauge-reading {
    position: absolute;
    left: 0;
    right: 0;
    bottom: var(--space-2);
    text-align: center;
    line-height: 1.1;
}

.gauge-value {
    font-size: var(--text-2xl);
    font-variant-numeric: tabular-nums;
}

.gauge-caption {
    display: block;
    color: var(--muted);
    font-size: var(--text-xs);
}

.gauge-label {
    margin: var(--space-1) 0 0;
    text-align: center;
    font-size: var(--text-sm);
    font-weight: 600;
}

/* FunnelChart */

.funnel-title {
    margin: 0 0 var(--space-2);
    font-size: var(--text-sm);
    font-weight: 600;
}

.funnel-stages {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    margin: 0;
    padding: 0;
    list-style: none;
}

.funnel-row {
    display: grid;
    grid-template-columns: 8rem minmax(0, 1fr) 6.5rem;
    align-items: center;
    gap: var(--space-3);
    font-size: var(--text-sm);
}

.funnel-bar {
    position: relative;
    height: 26px;
    border-radius: 2px;
    background: var(--surface-sunk);
}

.funnel-fill {
    position: absolute;
    inset: 0 auto 0 0;
    display: block;
    border-radius: 2px;
}

.funnel-fill-1 { background: var(--chart-1); }

.funnel-fill-2 { background: var(--chart-2); }

.funnel-fill-3 { background: var(--chart-3); }

.funnel-count {
    text-align: right;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.funnel-drop {
    margin: var(--space-1) 0 var(--space-1) calc(8rem + var(--space-3));
    color: var(--muted);
    font-size: var(--text-xs);
}

@media (max-width: 576px) {
  .funnel-row {
          grid-template-columns: minmax(0, 1fr) 5rem;
      }

  .funnel-bar {
          grid-column: 1 / -1;
          grid-row: 2;
      }

  .funnel-drop {
          margin-left: 0;
      }
}

/* GanttChart: a name column and one lane; bars and markers are placed by percentage of the window. */

.gantt {
    --gantt-name-width: 13rem;
}

.gantt-toolbar {
    display: flex;
    justify-content: flex-end;
    margin-bottom: var(--space-3);
}

.gantt-scroll {
    overflow: auto;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-surface);
}

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

.gantt-grid {
    position: relative;
    min-width: calc(var(--gantt-name-width) + var(--gantt-months) * 2.6rem);
    font-size: var(--text-sm);
}

.gantt-row {
    display: grid;
    grid-template-columns: var(--gantt-name-width) minmax(0, 1fr);
    border-bottom: 1px solid var(--line-subtle);
}

.gantt-name {
    min-width: 0;
    padding: var(--space-2) var(--space-3);
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-weight: 500;
}

.gantt-name small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--muted);
    font-size: var(--text-xs);
    font-weight: 400;
}

.gantt-head {
    background: var(--surface-sunk);
    border-bottom: 1px solid var(--line);
}

.gantt-head-name {
    color: var(--muted);
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.gantt-lane {
    position: relative;
    min-height: 2.75rem;
}

.gantt-head-lane {
    min-height: 2.25rem;
}

.gantt-month {
    position: absolute;
    top: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    color: var(--muted);
    font-size: var(--text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.gantt-month small {
    font-size: var(--text-xs);
    font-weight: 400;
    letter-spacing: 0;
}

.gantt-bar {
    position: absolute;
    top: var(--space-2);
    z-index: 1;
    box-sizing: border-box;
    min-width: 6px;
    height: 22px;
    overflow: hidden;
    border-radius: var(--radius-xs);
    background: color-mix(in oklab, var(--chart-1) 35%, var(--surface));
    border: 1px solid var(--chart-1);
}

.gantt-bar-blue {
    background: color-mix(in oklab, var(--chart-2) 35%, var(--surface));
    border-color: var(--chart-2);
}

.gantt-bar-amber {
    background: color-mix(in oklab, var(--chart-3) 35%, var(--surface));
    border-color: var(--chart-3);
}

.gantt-done {
    position: absolute;
    inset: 0 auto 0 0;
    background: var(--chart-1);
}

.gantt-bar-blue .gantt-done { background: var(--chart-2); }

.gantt-bar-amber .gantt-done { background: var(--chart-3); }

.gantt-milestone {
    position: absolute;
    top: 9px;
    z-index: 2;
    width: 14px;
    height: 14px;
    margin-left: -7px;
    background: var(--ink);
    border: 2px solid var(--surface);
    transform: rotate(45deg);
}

.gantt-overlay {
    position: absolute;
    top: 0;
    bottom: 0;
    left: var(--gantt-name-width);
    right: 0;
    pointer-events: none;
}

.gantt-gridline {
    position: absolute;
    top: 0;
    bottom: 0;
    border-left: 1px solid var(--line-subtle);
}

.gantt-today {
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: 3;
    width: 2px;
    margin-left: -1px;
    background: var(--danger);
}

.gantt-legend {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-4);
    margin: var(--space-2) 0 0;
    color: var(--muted);
    font-size: var(--text-xs);
}

.gantt-legend-item {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}

.gantt-key {
    display: inline-block;
}

.gantt-key-bar {
    width: 18px;
    height: 8px;
    border: 1px solid var(--chart-1);
    background: color-mix(in oklab, var(--chart-1) 35%, var(--surface));
}

.gantt-key-milestone {
    width: 9px;
    height: 9px;
    background: var(--ink);
    transform: rotate(45deg);
}

.gantt-key-today {
    width: 2px;
    height: 14px;
    background: var(--danger);
}

.gantt-num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

@media (max-width: 576px) {
  .gantt {
          --gantt-name-width: 8rem;
      }
}

.gantt-table tbody th[scope="row"] {
    color: var(--ink);
    font-size: var(--text-sm);
    letter-spacing: normal;
    text-transform: none;
}

/* ---------------------------------------------------------------------------
   Batch seven, agent A: TextArea upgrades (.text-area-), PhoneInput (.phone-input-),
   ColorInput (.color-input-), BeforeAfter (.before-after-)
   --------------------------------------------------------------------------- */

/* TextArea: autosize (the script sets the height, so the drag handle would fight it) */

textarea[data-h-max-rows][data-h-ready] {
    resize: none;
}

/* TextArea: character count */

.text-area-wrap {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.text-area-count {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-3);
    font-size: var(--text-sm);
    color: var(--muted);
    font-variant-numeric: tabular-nums;
}

.text-area-count.is-warn {
    color: var(--warn-text);
}

.text-area-count.is-over {
    color: var(--danger-text);
    font-weight: 600;
}

/* A symbol as well as the colour, so the state is never colour alone. */

.text-area-count.is-warn .text-area-number::before {
    content: "!\00a0";
}

.text-area-count.is-over .text-area-number::before {
    content: "\2715\00a0";
}

.text-area-bar {
    height: 3px;
    border-radius: var(--radius-pill);
    background: var(--line);
    overflow: hidden;
}

.text-area-bar > i {
    display: block;
    height: 100%;
    background: var(--accent-strong);
}

.text-area-count.is-warn + .text-area-bar > i {
    background: var(--warn);
}

.text-area-count.is-over + .text-area-bar > i {
    background: var(--danger);
}

@media (prefers-reduced-motion: no-preference) {
  .text-area-bar > i {
          transition: width var(--dur-fast) ease;
      }
}

/* PhoneInput: joined select and input reuse .input-group */

.phone-input {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    max-width: 26rem;
}

.phone-input .phone-input-country {
    padding-right: var(--space-2);
}

.phone-input-status {
    margin: 0;
    font-size: var(--text-sm);
    color: var(--muted);
}

.phone-input-status.is-ok {
    color: var(--ok-text);
}

.phone-input-status.is-danger {
    color: var(--danger-text);
}

/* ColorInput */

.color-input {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    max-width: 30rem;
}

.color-input-row {
    display: flex;
    align-items: stretch;
    gap: var(--space-3);
}

.color-input-row > input[type="color"]:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="submit"]):not([type="button"]):not([type="file"]) {
    flex: none;
    width: 3rem;
    height: auto;
    min-height: 2.5rem;
    padding: 2px;
    cursor: pointer;
}

.color-input-row > input.color-input-hex:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="submit"]):not([type="button"]):not([type="file"]) {
    flex: 0 1 9rem;
    width: auto;
    min-width: 0;
    font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
    text-transform: uppercase;
}

.color-input-error {
    margin: 0;
    font-size: var(--text-sm);
    color: var(--danger-text);
}

.color-input-swatches {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.color-input-swatch {
    position: relative;
    width: 2rem;
    height: 2rem;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--swatch);
    cursor: pointer;
}

.color-input-swatch:disabled {
    cursor: not-allowed;
    opacity: 0.6;
}

.color-input-swatch:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* The chosen swatch carries a tick, so it is not marked by colour alone. */

.color-input-swatch[aria-pressed="true"]::after {
    content: "\2713";
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: #fff;
    font-weight: 700;
    text-shadow: 0 0 2px black;
}

.color-input-contrast-title {
    margin: 0 0 var(--space-1);
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--muted);
}

.color-input-ratios {
    display: grid;
    gap: var(--space-1);
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: var(--text-sm);
    font-variant-numeric: tabular-nums;
}

.color-input-ratio {
    display: flex;
    gap: var(--space-2);
}

.color-input-ratio-mark {
    flex: none;
    width: 1.1em;
    text-align: center;
    font-weight: 700;
}

.color-input-ratio.is-aaa,
.color-input-ratio.is-aa {
    color: var(--ok-text);
}

.color-input-ratio.is-large {
    color: var(--warn-text);
}

.color-input-ratio.is-fail {
    color: var(--danger-text);
}

/* BeforeAfter */

.before-after {
    position: relative;
    width: 100%;
    max-width: 40rem;
    aspect-ratio: var(--before-after-ratio, 16 / 10);
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: var(--radius-surface);
    background: var(--surface-sunk);
    user-select: none;
    touch-action: pan-y;
}

.before-after-image {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.before-after-after {
    clip-path: inset(0 0 0 var(--before-after-pos, 50%));
}

.before-after-chip {
    position: absolute;
    top: var(--space-2);
    padding: 2px var(--space-3);
    border-radius: var(--radius-pill);
    background: color-mix(in oklab, black 60%, transparent);
    color: #fff;
    font-size: var(--text-xs);
    font-weight: 600;
    pointer-events: none;
}

.before-after-chip-before {
    left: var(--space-2);
}

.before-after-chip-after {
    right: var(--space-2);
}

/* The real slider covers the picture and is invisible, so keyboard, touch and screen readers all work. */

.before-after-slider[data-h-slider] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: ew-resize;
}

.before-after-handle {
    position: absolute;
    top: 0;
    bottom: 0;
    left: var(--before-after-pos, 50%);
    width: 3px;
    background: #fff;
    transform: translateX(-50%);
    pointer-events: none;
    box-shadow: 0 0 0 1px color-mix(in oklab, black 30%, transparent);
}

.before-after-handle::after {
    content: "\2194";
    position: absolute;
    top: 50%;
    left: 50%;
    display: grid;
    place-items: center;
    width: 2.25rem;
    height: 2.25rem;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: #fff;
    color: black;
    font-weight: 700;
    box-shadow: 0 0 0 1px color-mix(in oklab, black 30%, transparent);
}

.before-after-slider:focus-visible ~ .before-after-handle::after {
    outline: 3px solid var(--accent);
    outline-offset: 2px;
}

/* ---------------------------------------------------------------------------
   ScheduleView (.schedule-)
   --------------------------------------------------------------------------- */

.schedule {
    --schedule-hour: 3.2rem;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.schedule-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
}

.schedule-nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
}

.schedule-title {
    margin-left: var(--space-2);
}

.schedule-scroller {
    overflow: auto;
    max-height: 32rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-surface);
    background: var(--surface);
}

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

.schedule-grid {
    display: grid;
    grid-template-columns: 3.25rem repeat(var(--schedule-days, 7), minmax(0, 1fr));
    min-width: 38rem;
    position: relative;
}

.schedule-corner,
.schedule-head {
    position: sticky;
    top: 0;
    z-index: 3;
    padding: var(--space-2) var(--space-1);
    background: var(--surface-sunk);
    border-bottom: 1px solid var(--line);
    text-align: center;
    font-size: var(--text-sm);
    font-weight: 600;
}

.schedule-head small {
    display: block;
    font-weight: 400;
    color: var(--muted);
}

.schedule-head.is-today {
    color: var(--accent-strong);
    box-shadow: inset 0 -2px 0 var(--accent-strong);
}

.schedule-hour {
    height: var(--schedule-hour);
    padding: 0 var(--space-2);
    font-size: var(--text-xs);
    color: var(--muted);
    text-align: right;
    font-variant-numeric: tabular-nums;
    transform: translateY(-0.55em);
}

.schedule-day {
    position: relative;
    height: calc(var(--schedule-hours, 11) * var(--schedule-hour));
    border-left: 1px solid var(--line-subtle);
    background-image: linear-gradient(var(--line-subtle) 1px, transparent 1px);
    background-size: 100% var(--schedule-hour);
}

.schedule-day.is-today {
    background-color: var(--accent-soft);
}

.schedule-event {
    --schedule-color: var(--chart-1);
    position: absolute;
    box-sizing: border-box;
    top: calc(var(--schedule-from, 0) * var(--schedule-hour));
    height: calc(var(--schedule-span, 1) * var(--schedule-hour) - 2px);
    left: calc(100% / var(--schedule-cols, 1) * var(--schedule-col, 0) + 2px);
    width: calc(100% / var(--schedule-cols, 1) - 4px);
    margin: 0;
    padding: var(--space-1) var(--space-2);
    overflow: hidden;
    border: 0;
    border-left: 3px solid var(--schedule-color);
    border-radius: var(--radius-surface);
    background: color-mix(in oklab, var(--schedule-color) 16%, var(--surface));
    color: var(--ink);
    font: inherit;
    font-size: var(--text-xs);
    line-height: 1.25;
    text-align: left;
    cursor: pointer;
    z-index: 1;
}

.schedule-tone-blue { --schedule-color: var(--chart-2); }

.schedule-tone-amber { --schedule-color: var(--chart-3); }

.schedule-event:hover {
    z-index: 2;
    box-shadow: inset 0 0 0 1px var(--ink);
}

.schedule-event:focus-visible {
    z-index: 2;
    outline: 2px solid var(--accent);
    outline-offset: 1px;
}

.schedule-event-title,
.schedule-event-time {
    display: block;
}

.schedule-event-title {
    font-weight: 600;
}

.schedule-event-time {
    color: var(--muted);
    font-variant-numeric: tabular-nums;
}

.schedule-now {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(var(--schedule-from, 0) * var(--schedule-hour));
    border-top: 2px solid var(--danger);
    z-index: 2;
    pointer-events: none;
}

/* ---------------------------------------------------------------------------
   CalendarHeatmap (.calendar-heatmap-)
   --------------------------------------------------------------------------- */

.calendar-heatmap {
    --calendar-heatmap-cell: 0.8rem;
    --calendar-heatmap-gap: 3px;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.calendar-heatmap-toolbar {
    display: flex;
}

.calendar-heatmap-scroll {
    overflow-x: auto;
    padding-bottom: var(--space-1);
}

.calendar-heatmap-caption {
    padding-bottom: var(--space-2);
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--muted);
    text-align: left;
}

.calendar-heatmap-wrap {
    display: grid;
    grid-template-columns: 2.2rem max-content;
    column-gap: var(--space-2);
    font-size: var(--text-xs);
    color: var(--muted);
}

.calendar-heatmap-weekdays {
    display: grid;
    grid-template-rows: repeat(7, var(--calendar-heatmap-cell));
    gap: var(--calendar-heatmap-gap);
    padding-top: calc(1rem + var(--calendar-heatmap-gap));
    text-align: right;
    line-height: var(--calendar-heatmap-cell);
}

.calendar-heatmap-months {
    display: grid;
    grid-template-columns: repeat(var(--calendar-heatmap-weeks, 53), calc(var(--calendar-heatmap-cell) + var(--calendar-heatmap-gap)));
    height: 1rem;
    margin-bottom: var(--calendar-heatmap-gap);
    white-space: nowrap;
}

.calendar-heatmap-grid {
    display: grid;
    grid-template-rows: repeat(7, var(--calendar-heatmap-cell));
    grid-auto-flow: column;
    grid-auto-columns: var(--calendar-heatmap-cell);
    gap: var(--calendar-heatmap-gap);
}

.calendar-heatmap-grid i,
.calendar-heatmap-swatch {
    display: block;
    width: var(--calendar-heatmap-cell);
    height: var(--calendar-heatmap-cell);
    border-radius: 2px;
    background: var(--surface-sunk);
}

.calendar-heatmap-grid i:not([data-step="0"]),
.calendar-heatmap-swatch:not([data-step="0"]) {
    background: color-mix(in oklab, var(--chart-1) var(--calendar-heatmap-mix), var(--surface));
}

.calendar-heatmap-grid i:hover {
    outline: 2px solid var(--ink);
    outline-offset: 1px;
}

.calendar-heatmap-swatch {
    display: inline-block;
    border: 1px solid var(--line);
}

.calendar-heatmap-legend {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-xs);
    color: var(--muted);
}

.table th.calendar-heatmap-num,
.table td.calendar-heatmap-num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------------------------
   WaffleChart (.waffle-)
   --------------------------------------------------------------------------- */

.waffle-figure {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: var(--space-4) var(--space-5);
    margin: 0;
}

.waffle {
    display: grid;
    grid-template-columns: repeat(var(--waffle-columns, 10), 1fr);
    gap: 4px;
    width: min(100%, 16rem);
}

.waffle-cell {
    display: block;
    aspect-ratio: 1;
    background: var(--surface-sunk);
    border: 1px solid var(--line-subtle);
}

.waffle-circle .waffle-cell { border-radius: 50%; }

.waffle-square .waffle-cell { border-radius: var(--radius-surface); }

.waffle-cell.waffle-part-1 { background: var(--chart-1); border-color: var(--chart-1); }

.waffle-cell.waffle-part-2 { background: var(--chart-2); border-color: var(--chart-2); }

.waffle-cell.waffle-part-3 { background: var(--chart-3); border-color: var(--chart-3); }

.waffle-legend {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: var(--text-sm);
}

.waffle-legend li {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.waffle-legend strong {
    margin-left: auto;
    padding-left: var(--space-3);
    font-variant-numeric: tabular-nums;
}

.waffle-key {
    flex: none;
    width: 0.8rem;
    height: 0.8rem;
    border-radius: 50%;
    background: var(--surface-sunk);
    border: 1px solid var(--line);
}

.waffle-key.waffle-part-1 { background: var(--chart-1); border-color: var(--chart-1); }

.waffle-key.waffle-part-2 { background: var(--chart-2); border-color: var(--chart-2); }

.waffle-key.waffle-part-3 { background: var(--chart-3); border-color: var(--chart-3); }

/* ---------------------------------------------------------------------------
   RadarChart (.radar-) and ScatterChart (.scatter-)
   --------------------------------------------------------------------------- */

.radar,
.scatter {
    display: block;
    width: 100%;
    max-width: 28rem;
    height: auto;
}

.radar-ring {
    fill: none;
    stroke: var(--line);
}

.radar-spoke {
    stroke: var(--line);
}

.radar-series {
    stroke-width: 2.2;
    stroke-linejoin: round;
}

.radar-series-1 { fill: color-mix(in oklab, var(--chart-1) 22%, transparent); stroke: var(--chart-1); }

.radar-series-2 { fill: color-mix(in oklab, var(--chart-2) 16%, transparent); stroke: var(--chart-2); stroke-dasharray: 7 4; }

.radar-series-3 { fill: color-mix(in oklab, var(--chart-3) 16%, transparent); stroke: var(--chart-3); stroke-dasharray: 2 4; stroke-linecap: round; }

.radar-key {
    display: inline-block;
    width: 1.4rem;
    margin-right: var(--space-2);
    vertical-align: middle;
    border-top: 3px solid var(--chart-1);
}

.radar-key-2 { border-top: 3px dashed var(--chart-2); }

.radar-key-3 { border-top: 3px dotted var(--chart-3); }

.scatter-median {
    stroke: var(--muted);
    stroke-width: 1;
    stroke-dasharray: 4 4;
}

.scatter-point {
    fill: var(--chart-1);
    stroke: var(--surface);
    stroke-width: 2;
    cursor: pointer;
}

.scatter-point:hover,
.scatter-point:focus-visible {
    fill: var(--ink);
    stroke: var(--accent);
    stroke-width: 3;
    outline: none;
}

.scatter-readout {
    min-height: 1.5em;
    margin: 0;
}

/* ---------------------------------------------------------------------------
   QrCode and MentionsInput
   --------------------------------------------------------------------------- */

/* The code is always dark on white, in dark mode too, so that scanners can read it. */

.qr-code {
    display: block;
    max-width: 100%;
    height: auto;
}

.qr-code-bg {
    fill: #fff;
}

.qr-code-dark {
    fill: black;
}

.qr-code-error {
    max-width: 24rem;
    margin: 0;
    padding: var(--space-3);
    border: 1px dashed var(--line);
    border-radius: var(--radius-sm);
    color: var(--muted);
    font-size: var(--text-sm);
}

.mentions-input {
    position: relative;
    max-width: 34rem;
}

.mentions-input-textarea {
    min-height: 5.5rem;
}

.mentions-input-textarea[data-h-mention-input][data-h-keys] {
    border-color: var(--accent);
}

.mentions-input-textarea[data-h-caret] {
    scroll-margin-bottom: var(--space-8);
}

.mentions-input [data-h-caret-value] {
    display: none;
}

.mentions-input-list[data-h-mention-list] {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 56;
    min-width: 13rem;
    max-width: 100%;
    max-height: 14rem;
    margin: var(--space-1) 0 0;
    padding: var(--space-1);
    overflow-y: auto;
    list-style: none;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
}

.mentions-input-option {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-xs);
    color: var(--ink);
    font-size: var(--text-sm);
    cursor: pointer;
}

.mentions-input-option:hover {
    background: var(--surface-sunk);
}

/* The highlighted option is shown by a bar and bold text as well as by colour. */

.mentions-input-option[aria-selected="true"] {
    background: var(--accent-soft);
    color: var(--accent-strong);
    font-weight: 600;
    box-shadow: inset 3px 0 0 var(--accent-strong);
}

/* ---------------------------------------------------------------------------
   SankeyChart (.sankey-), TreemapChart (.treemap-) and TileMap (.tile-map-)
   --------------------------------------------------------------------------- */

.sankey {
    display: block;
    width: 100%;
    height: auto;
    font-family: var(--font-sans);
}

/* Labels sit beside the boxes, with a halo in the surface colour so a band behind them never hides the text. */

.sankey-label {
    font-size: 12px;
    fill: var(--ink);
    paint-order: stroke;
    stroke: var(--surface);
    stroke-width: 3px;
    stroke-linejoin: round;
}

.sankey-link {
    fill: none;
    opacity: 0.32;
    transition: opacity 0.12s;
}

.sankey-link:hover {
    opacity: 0.7;
}

.sankey-link.sankey-tone-0 { stroke: var(--muted); }

.sankey-link.sankey-tone-1 { stroke: var(--chart-1); }

.sankey-link.sankey-tone-2 { stroke: var(--chart-2); }

.sankey-link.sankey-tone-3 { stroke: var(--chart-3); }

.sankey-rect.sankey-tone-0 { fill: var(--muted); }

.sankey-rect.sankey-tone-1 { fill: var(--chart-1); }

.sankey-rect.sankey-tone-2 { fill: var(--chart-2); }

.sankey-rect.sankey-tone-3 { fill: var(--chart-3); }

.sankey-node {
    outline: none;
    cursor: default;
}

.sankey-node:hover .sankey-rect,
.sankey-node:focus-visible .sankey-rect {
    stroke: var(--ink);
    stroke-width: 2px;
}

.table th.sankey-num,
.table td.sankey-num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

@media (prefers-reduced-motion: reduce) {
  .sankey-link {
          transition: none;
      }
}

.treemap {
    position: relative;
    width: 100%;
    max-width: 100%;
    background: var(--surface-sunk);
}

.treemap-cell {
    position: absolute;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    min-width: 0;
    margin: 0;
    padding: var(--space-2);
    overflow: hidden;
    border: 2px solid var(--surface);
    border-radius: var(--radius-surface);
    font: inherit;
    font-size: var(--text-sm);
    line-height: 1.25;
    text-align: left;
    color: var(--ink);
    background: color-mix(in oklab, var(--accent) 10%, var(--surface));
}

button.treemap-cell {
    cursor: pointer;
}

.treemap-depth-0 { background: color-mix(in oklab, var(--accent) 10%, var(--surface)); }

.treemap-depth-1 { background: color-mix(in oklab, var(--accent) 24%, var(--surface)); }

.treemap-depth-2 { background: color-mix(in oklab, var(--accent) 37%, var(--surface)); }

.treemap-depth-3 { background: color-mix(in oklab, var(--accent) 50%, var(--surface)); }

.treemap-depth-4 { background: color-mix(in oklab, var(--accent) 72%, var(--surface)); }

/* The darkest step is light enough in dark mode that the text flips to the surface colour. */

[data-theme="dark"] .treemap-depth-4 {
    color: var(--surface);
}

button.treemap-cell:hover {
    box-shadow: inset 0 0 0 2px var(--ink);
}

button.treemap-cell:focus-visible {
    outline: 2px solid var(--ink);
    outline-offset: -4px;
    z-index: 1;
}

/* Words wrap between words only: a name too long for its cell is clipped at the edge (the full text is in the tooltip and the accessible name). */

.treemap-name {
    max-width: 100%;
    font-weight: 600;
}

.treemap-value,
.treemap-detail {
    max-width: 100%;
    font-variant-numeric: tabular-nums;
}

/* A medium cell keeps only its name, and a small one shows nothing. Each still carries its accessible name. */

.treemap-cell-medium .treemap-value,
.treemap-cell-medium .treemap-detail,
.treemap-cell-small .treemap-name,
.treemap-cell-small .treemap-value,
.treemap-cell-small .treemap-detail {
    display: none;
}

/* ---------------------------------------------------------------------------
   Batch eight (B): DumbbellChart (.dumbbell-), LogicModel (.logic-model-),
   MatrixQuestion (.matrix-question-), CurrencyInput (.currency-input-)
   --------------------------------------------------------------------------- */

/* DumbbellChart */

.dumbbell {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    margin: 0;
}

.dumbbell-legend {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-4);
    font-size: var(--text-sm);
    color: var(--muted);
}

.dumbbell-legend-item {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}

.dumbbell-key {
    display: inline-block;
    width: 0.75rem;
    height: 0.75rem;
    border-radius: var(--radius-pill);
    background: var(--muted);
}

.dumbbell-key-better { background: var(--ok); }

.dumbbell-key-worse { background: var(--danger); }

.dumbbell-key-neutral { background: var(--chart-2); }

/* The rows are display: contents, so the label, track and change columns line up across every row. */

.dumbbell-chart {
    display: grid;
    grid-template-columns: minmax(6rem, 11rem) minmax(12rem, 1fr) auto;
    align-items: center;
    column-gap: var(--space-4);
}

.dumbbell-axis,
.dumbbell-row {
    display: contents;
}

.dumbbell-axis-track {
    position: relative;
    height: 1.25rem;
}

.dumbbell-tick {
    position: absolute;
    top: 0;
    transform: translateX(-50%);
    font-size: var(--text-xs);
    color: var(--muted);
    white-space: nowrap;
}

.dumbbell-tick-first { transform: none; }

.dumbbell-tick-last { transform: translateX(-100%); }

.dumbbell-name {
    padding: var(--space-1) 0;
    font-size: var(--text-sm);
    font-weight: 600;
    overflow-wrap: anywhere;
}

.dumbbell-track {
    position: relative;
    height: 2rem;
    border-right: 1px solid var(--line-subtle);
    background-image: linear-gradient(to right, var(--line-subtle) 1px, transparent 1px);
    background-size: 25% 100%;
    background-repeat: repeat-x;
}

.dumbbell-bar {
    position: absolute;
    top: 50%;
    height: 4px;
    margin-top: -2px;
    background: var(--muted);
}

.dumbbell-dot {
    position: absolute;
    top: 50%;
    width: 0.9rem;
    height: 0.9rem;
    margin: -0.45rem 0 0 -0.45rem;
    border: 2px solid var(--surface);
    border-radius: var(--radius-pill);
    background: var(--muted);
}

.dumbbell-dot-start { background: var(--muted); }

.dumbbell-bar.dumbbell-better,
.dumbbell-dot.dumbbell-better { background: var(--ok); }

.dumbbell-bar.dumbbell-worse,
.dumbbell-dot.dumbbell-worse { background: var(--danger); }

.dumbbell-bar.dumbbell-neutral,
.dumbbell-dot.dumbbell-neutral { background: var(--chart-2); }

.dumbbell-change {
    font-size: var(--text-sm);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--muted);
}

.dumbbell-change.dumbbell-better { color: var(--ok-text); }

.dumbbell-change.dumbbell-worse { color: var(--danger-text); }

.dumbbell-change.dumbbell-neutral { color: var(--ink); }

.dumbbell-slope {
    display: block;
    width: 100%;
    max-width: 32rem;
    height: auto;
}

.dumbbell-slope text {
    font-size: 11px;
    fill: var(--ink);
}

.dumbbell-slope .dumbbell-slope-head {
    fill: var(--muted);
    font-weight: 600;
}

.dumbbell-slope-axis {
    stroke: var(--line);
    stroke-width: 1;
}

.dumbbell-slope-line {
    stroke: var(--muted);
    stroke-width: 2;
}

.dumbbell-slope-dot { fill: var(--muted); }

.dumbbell-slope-line.dumbbell-better { stroke: var(--ok); }

.dumbbell-slope-line.dumbbell-worse { stroke: var(--danger); }

.dumbbell-slope-line.dumbbell-neutral { stroke: var(--chart-2); }

.dumbbell-slope-dot.dumbbell-better { fill: var(--ok); }

.dumbbell-slope-dot.dumbbell-worse { fill: var(--danger); }

.dumbbell-slope-dot.dumbbell-neutral { fill: var(--chart-2); }

.dumbbell-slope-dot-start { fill: var(--muted); }

.dumbbell-slope text.dumbbell-better { fill: var(--ok-text); }

.dumbbell-slope text.dumbbell-worse { fill: var(--danger-text); }

@media (max-width: 576px) {
  .dumbbell-chart {
          grid-template-columns: minmax(0, 1fr) auto;
          column-gap: var(--space-3);
      }

  .dumbbell-axis > :first-child {
          display: none;
      }

  .dumbbell-name {
          grid-column: 1 / -1;
          padding-top: var(--space-3);
      }
}

/* CurrencyInput: the drop-down and the amount reuse .input-group */

.currency-input {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    max-width: 24rem;
}

.currency-input .currency-input-code {
    padding-right: var(--space-2);
    background: var(--surface-sunk);
    font-weight: 600;
}

.currency-input .input-group > input {
    font-variant-numeric: tabular-nums;
}

.currency-input-help {
    margin: 0;
    font-size: var(--text-sm);
    color: var(--muted);
}

.currency-input-help.is-danger {
    color: var(--danger-text);
}

/* SwipeActions: the actions sit under the face; the face slides aside to show them. */

.swipe-actions {
    position: relative;
    overflow: hidden;
    background: var(--surface);
    border-bottom: 1px solid var(--line-subtle);
}

.swipe-actions-tray {
    position: absolute;
    inset-block: 0;
    inset-inline-end: 0;
    display: flex;
    width: calc(var(--swipe-actions, 1) * var(--swipe-action-width, 5rem));
    visibility: hidden;
}

.swipe-actions.is-open .swipe-actions-tray,
.swipe-actions[data-h-open] .swipe-actions-tray,
.swipe-actions[data-h-dragging] .swipe-actions-tray {
    visibility: visible;
}

.swipe-actions-action {
    flex: 1 1 0;
    min-width: 0;
    appearance: none;
    padding: var(--space-2);
    border: 0;
    border-radius: 0;
    font: inherit;
    font-size: var(--text-sm);
    font-weight: 600;
    text-align: center;
    overflow-wrap: anywhere;
    cursor: pointer;
    color: #fff;
}

.swipe-actions-action:focus-visible {
    outline: 2px solid var(--ink);
    outline-offset: -3px;
}

/* White text on the fixed status colours (warn, danger) and on a darkened chart-2 for info, all above 4.5 to 1. */

.swipe-actions-tone-warning {
    background: var(--warn);
}

.swipe-actions-tone-danger {
    background: var(--danger);
}

.swipe-actions-tone-info {
    background: color-mix(in oklab, var(--chart-2), black 45%);
}

.swipe-actions-tone-neutral {
    background: var(--surface-sunk);
    color: var(--ink);
    border-inline-start: 1px solid var(--line);
}

.swipe-actions-face {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    background: var(--surface);
    touch-action: pan-y;
    transition: transform var(--dur-fast) var(--ease);
}

.swipe-actions.is-open .swipe-actions-face,
.swipe-actions[data-h-open] .swipe-actions-face {
    transform: translateX(calc(var(--swipe-actions, 1) * var(--swipe-action-width, 5rem) * -1));
}

.swipe-actions:dir(rtl).is-open .swipe-actions-face,
.swipe-actions:dir(rtl)[data-h-open] .swipe-actions-face {
    transform: translateX(calc(var(--swipe-actions, 1) * var(--swipe-action-width, 5rem)));
}

.swipe-actions[data-h-dragging] .swipe-actions-face {
    transition: none;
    user-select: none;
}

@media (prefers-reduced-motion: reduce) {
  .swipe-actions-face {
          transition: none;
      }
}

.swipe-actions-content {
    flex: 1 1 auto;
    min-width: 0;
}

.swipe-actions-more {
    flex: none;
    appearance: none;
    display: grid;
    place-items: center;
    width: 2.25rem;
    height: 2.25rem;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--surface);
    font: inherit;
    color: var(--ink);
    cursor: pointer;
}

.swipe-actions-more:hover {
    background: var(--surface-sunk);
}

.swipe-actions-more:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* CommentThread: each thread is a bordered card; replies sit under a rule. */

.comment-thread-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    max-width: 40rem;
}

.comment-thread {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    padding: var(--space-4);
    border: 1px solid var(--line);
    border-radius: var(--radius-surface);
    background: var(--surface);
}

.comment-thread.is-resolved {
    background: var(--surface-sunk);
}

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

.comment-thread-who {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--space-2);
    font-size: var(--text-sm);
    color: var(--muted);
}

.comment-thread-author {
    color: var(--ink);
    font-weight: 600;
}

.comment-thread-you {
    padding: 0 var(--space-2);
    border-radius: var(--radius-pill);
    background: var(--accent-soft);
    color: var(--accent-strong);
    font-size: var(--text-xs);
    font-weight: 700;
}

.comment-thread-body {
    overflow-wrap: anywhere;
    white-space: pre-wrap;
}

.comment-thread-replies {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    margin-inline-start: var(--space-4);
    padding-inline-start: var(--space-4);
    border-inline-start: 1px solid var(--line);
}

.comment-thread-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.comment-thread-input {
    min-height: 4.5rem;
}

.comment-thread-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
}

.comment-thread-resolved {
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--ok-text);
}

.comment-thread-empty {
    margin: 0;
}

@media (max-width: 576px) {
  .comment-thread {
          padding: var(--space-3);
      }

  .comment-thread-replies {
          margin-inline-start: 0;
          padding-inline-start: var(--space-3);
      }
}

/* ---------------------------------------------------------------------------
   Batch nine, agent A: FormWizard, LocationInput, PeriodPicker, ActivityFeed
   --------------------------------------------------------------------------- */

/* FormWizard (.form-wizard-) */

.form-wizard {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.form-wizard-steps {
    display: flex;
    flex-wrap: wrap;
    margin: 0;
    padding: 0;
    list-style: none;
    border-bottom: 1px solid var(--line);
}

.form-wizard-step {
    flex: 1 1 9rem;
    min-width: 0;
}

.form-wizard-step-button {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    width: 100%;
    box-sizing: border-box;
    margin-bottom: -1px;
    padding: var(--space-3);
    font: inherit;
    font-size: var(--text-sm);
    text-align: start;
    color: var(--muted);
    background: none;
    border: 0;
    border-bottom: 2px solid transparent;
    cursor: pointer;
}

.form-wizard-step-button:hover {
    color: var(--ink);
}

.form-wizard-step-button:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: -2px;
}

.form-wizard-dot {
    display: grid;
    flex: none;
    place-items: center;
    width: 1.6rem;
    height: 1.6rem;
    font-size: var(--text-xs);
    font-weight: 600;
    border: 1px solid var(--line);
    border-radius: 50%;
}

.form-wizard-step-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.form-wizard-step-note {
    font-size: var(--text-xs);
    color: var(--muted);
}

.form-wizard-step-fix {
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--danger-text);
}

.form-wizard-step.is-current .form-wizard-step-button {
    color: var(--ink);
    font-weight: 600;
    border-bottom-color: var(--accent);
}

.form-wizard-step.is-current .form-wizard-dot {
    color: #fff;
    background: var(--accent-strong);
    border-color: var(--accent-strong);
}

.form-wizard-step.is-done .form-wizard-dot {
    color: var(--accent-strong);
    background: var(--accent-soft);
    border-color: var(--accent);
}

.form-wizard-step.has-issues .form-wizard-dot {
    color: var(--danger-text);
    border-color: var(--danger);
}

.form-wizard-position {
    margin: 0;
    font-size: var(--text-sm);
    color: var(--muted);
}

.form-wizard-panel {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    max-width: 32rem;
    min-height: 10rem;
}

.form-wizard-summary {
    max-width: 32rem;
    padding: var(--space-3) var(--space-4);
    font-size: var(--text-sm);
    background: color-mix(in oklab, var(--danger) 7%, transparent);
    border: 1px solid var(--danger);
    border-radius: var(--radius-surface);
}

.form-wizard-summary:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.form-wizard-summary-title {
    color: var(--danger-text);
}

.form-wizard-summary-note {
    margin: var(--space-1) 0 0;
    color: var(--muted);
}

.form-wizard-summary-list {
    margin: var(--space-1) 0 0;
    padding-inline-start: 1.1em;
}

.form-wizard-summary-list a {
    color: var(--ink);
    text-decoration: underline;
}

.form-wizard-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
}

.form-wizard-actions-start {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

@media (max-width: 576px) {
  .form-wizard-step {
          flex-basis: 100%;
      }

  .form-wizard-actions {
          flex-direction: column-reverse;
          align-items: stretch;
      }

  .form-wizard-actions-start {
          justify-content: space-between;
      }
}

/* LocationInput (.location-input-) */

.location-input {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    max-width: 34rem;
}

.location-input-format {
    display: inline-flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.location-input-format-button {
    padding: var(--space-1) var(--space-3);
    font: inherit;
    font-size: var(--text-sm);
    color: var(--ink);
    background: none;
    border: 1px solid var(--line);
    border-radius: var(--radius-pill);
    cursor: pointer;
}

.location-input-format-button:hover:not(:disabled) {
    background: var(--surface-sunk);
}

.location-input-format-button[aria-pressed="true"] {
    font-weight: 600;
    color: var(--accent-strong);
    background: var(--accent-soft);
    border-color: var(--accent);
}

.location-input-format-button:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
}

.location-input-format-button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.location-input-pair {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
    gap: var(--space-3);
}

.location-input-field {
    min-width: 0;
}

.location-input-legend {
    display: block;
    margin-bottom: var(--space-2);
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--ink);
}

.location-input-dms {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr)) 4.5rem;
    gap: var(--space-2);
}

.location-input-error:empty,
.location-input-status:empty {
    display: none;
}

.location-input-status {
    margin: 0;
    font-size: var(--text-sm);
    color: var(--warn-text);
}

.location-input-fix {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
    font-size: var(--text-sm);
    color: var(--muted);
}

/* Without the script nothing would happen, so the locate button, its busy text and the hidden fix input are not shown. */

.location-input:not([data-h-ready]) [data-h-locate],
.location-input:not([data-h-ready]) .location-input-busy,
.location-input [data-h-fix] {
    display: none;
}

.location-input .location-input-busy {
    display: none;
}

.location-input[data-h-state="busy"] .location-input-busy {
    display: inline;
}

.location-input-pill {
    display: inline-flex;
    align-items: center;
    padding: 0 var(--space-3);
    font-size: var(--text-xs);
    font-weight: 600;
    border: 1px solid var(--line);
    border-radius: var(--radius-pill);
}

.location-input-pill.is-ok {
    color: var(--ok-text);
    border-color: var(--ok);
}

.location-input-pill.is-warn {
    color: var(--warn-text);
    border-color: var(--warn);
}

@media (max-width: 576px) {
  .location-input-dms {
          grid-template-columns: repeat(3, minmax(0, 1fr));
      }

  .location-input-dms select {
          grid-column: 1 / -1;
      }
}

/* PeriodPicker (.period-picker-) */

.period-picker {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.period-picker-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
}

.period-picker-kinds {
    display: inline-flex;
    flex-wrap: wrap;
    padding: 2px;
    background: var(--surface-sunk);
    border: 1px solid var(--line);
    border-radius: var(--radius-pill);
}

.period-picker-kind {
    padding: var(--space-2) var(--space-4);
    font: inherit;
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--muted);
    background: none;
    border: 0;
    border-radius: var(--radius-pill);
    cursor: pointer;
}

.period-picker-kind:hover {
    color: var(--ink);
}

.period-picker-kind[aria-pressed="true"] {
    color: var(--ink);
    background: var(--surface);
    box-shadow: inset 0 0 0 1px var(--accent-strong);
}

.period-picker-kind:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
}

.period-picker-note {
    margin: 0;
    font-size: var(--text-sm);
    color: var(--muted);
}

.period-picker-nav {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.period-picker-year {
    min-width: 6rem;
    text-align: center;
}

.period-picker-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr));
    gap: var(--space-2);
}

.period-picker-period {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: var(--space-2) var(--space-3);
    font: inherit;
    font-size: var(--text-sm);
    text-align: start;
    color: var(--ink);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-surface);
    cursor: pointer;
}

.period-picker-period small {
    font-size: var(--text-xs);
    color: var(--muted);
}

.period-picker-period:hover:not(:disabled) {
    background: var(--surface-sunk);
}

.period-picker-period[aria-pressed="true"] {
    font-weight: 600;
    background: var(--accent-soft);
    border-color: var(--accent);
}

.period-picker-period:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
}

.period-picker-period:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.period-picker-custom {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
}

.period-picker-date {
    min-width: 10rem;
}

.period-picker-error:empty,
.period-picker-summary:empty {
    display: none;
}

.period-picker-summary {
    margin: 0;
    font-size: var(--text-sm);
    color: var(--muted);
}

/* ActivityFeed (.activity-feed-) */

.activity-feed {
    display: flex;
    flex-direction: column;
    max-width: 40rem;
}

.activity-feed-filter {
    margin-bottom: var(--space-3);
}

.activity-feed-heading {
    margin: var(--space-5) 0 var(--space-2);
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted);
}

.activity-feed-group:first-of-type .activity-feed-heading {
    margin-top: 0;
}

.activity-feed-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.activity-feed-event {
    display: grid;
    grid-template-columns: 2rem minmax(0, 1fr) auto;
    align-items: start;
    gap: 2px var(--space-3);
    padding: var(--space-3) 0;
    border-bottom: 1px solid var(--line-subtle);
}

.activity-feed-avatar {
    grid-row: span 2;
}

.activity-feed-text {
    font-size: var(--text-sm);
    overflow-wrap: anywhere;
}

.activity-feed-actor {
    font-weight: 600;
}

.activity-feed-target {
    font-weight: 600;
}

a.activity-feed-target {
    color: var(--accent-strong);
    text-decoration: underline;
}

.activity-feed-time {
    font-size: var(--text-xs);
    color: var(--muted);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.activity-feed-details {
    grid-column: 2 / 4;
    font-size: var(--text-sm);
    color: var(--muted);
}

.activity-feed-details summary {
    width: max-content;
    cursor: pointer;
}

.activity-feed-details summary:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.activity-feed-changes {
    display: grid;
    gap: var(--space-1);
    margin: var(--space-2) 0 0;
    padding: 0;
    list-style: none;
}

.activity-feed-change {
    display: grid;
    grid-template-columns: minmax(6rem, auto) 1fr;
    gap: var(--space-3);
}

.activity-feed-field {
    color: var(--muted);
}

.activity-feed-values {
    display: flex;
    flex-wrap: wrap;
    gap: 0 var(--space-2);
    color: var(--ink);
    overflow-wrap: anywhere;
}

.activity-feed-values del {
    color: var(--danger-text);
    text-decoration: line-through;
}

.activity-feed-values ins {
    color: var(--ok-text);
    text-decoration: none;
}

.activity-feed-detail {
    margin: var(--space-2) 0 0;
    color: var(--ink);
    overflow-wrap: anywhere;
}

.activity-feed-empty {
    margin: 0;
    color: var(--muted);
}

.activity-feed-more {
    display: flex;
    justify-content: center;
    margin-top: var(--space-4);
}

@media (max-width: 576px) {
  .activity-feed-event {
          grid-template-columns: 2rem minmax(0, 1fr);
      }

  .activity-feed-time {
          grid-column: 2;
      }

  .activity-feed-details {
          grid-column: 2;
      }
}

.waterfall-svg,
.distribution-svg {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
}

.waterfall-bar-total { fill: var(--muted); background: var(--muted); }

.waterfall-bar-increase { fill: var(--chart-1); background: var(--chart-1); }

.waterfall-bar-decrease { fill: var(--danger); background: var(--danger); }

.waterfall-bar-flat { fill: var(--muted); background: var(--muted); }

.waterfall-value {
    font: 600 11px var(--font-sans);
    font-variant-numeric: tabular-nums;
    fill: var(--ink);
}

.waterfall-value-increase { fill: var(--ok-text); }

.waterfall-value-decrease { fill: var(--danger-text); }

.waterfall-step:focus-visible {
    outline: 2px solid var(--accent);
}

.waterfall-connector {
    stroke: var(--muted);
    stroke-width: 1;
    stroke-dasharray: 3 3;
}

.waterfall-legend {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-4);
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: var(--text-sm);
    color: var(--muted);
}

.waterfall-legend li {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}

.waterfall-key {
    display: inline-block;
    width: 0.9rem;
    height: 0.9rem;
    border-radius: var(--radius-surface);
}

.waterfall-gap {
    margin: 0;
    padding: var(--space-2) var(--space-3);
    border-inline-start: 3px solid var(--warn);
    background: color-mix(in oklab, var(--warn) 10%, var(--surface));
    color: var(--warn-text);
    font-size: var(--text-sm);
}

.distribution-bar {
    fill: var(--chart-2);
}

.distribution-bar:hover {
    fill: var(--ink);
}

.distribution-whisker {
    stroke: var(--ink);
    stroke-width: 1;
}

.distribution-box {
    fill: var(--accent-soft);
    stroke: var(--accent-strong);
    stroke-width: 1.5;
}

.distribution-median {
    stroke: var(--accent-strong);
    stroke-width: 3;
}

.distribution-outlier {
    fill: none;
    stroke: var(--danger);
    stroke-width: 1.5;
}

.distribution-summary,
.distribution-note {
    margin: 0;
}

/* ---------------------------------------------------------------------------
   MarkdownView and MarkdownEditor
   --------------------------------------------------------------------------- */

.markdown {
    min-width: 0;
    color: var(--ink);
    line-height: var(--line-height);
    overflow-wrap: anywhere;
}

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

.markdown > :last-child {
    margin-bottom: 0;
}

.markdown h1,
.markdown h2,
.markdown h3,
.markdown h4,
.markdown h5,
.markdown h6 {
    margin: 1.2em 0 0.4em;
    line-height: 1.25;
}

.markdown h1 {
    font-size: var(--text-xl);
}

.markdown h2 {
    font-size: var(--text-lg);
}

.markdown h3 {
    font-size: var(--text-base);
}

.markdown h4,
.markdown h5,
.markdown h6 {
    font-size: var(--text-sm);
}

.markdown p,
.markdown ul,
.markdown ol,
.markdown blockquote,
.markdown pre {
    margin: var(--space-3) 0;
}

.markdown ul,
.markdown ol {
    padding-inline-start: 1.5em;
}

.markdown li > ul,
.markdown li > ol {
    margin: var(--space-1) 0;
}

.markdown a {
    color: var(--accent-strong);
    text-decoration: underline;
}

.markdown code {
    padding: 0.1em 0.35em;
    font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
    font-size: 0.9em;
    background: var(--surface-sunk);
    border-radius: var(--radius-surface);
}

.markdown pre.markdown-code {
    padding: var(--space-3) var(--space-4);
    overflow: auto;
    font-size: var(--text-sm);
    line-height: var(--line-height);
    background: var(--surface-sunk);
    border: 1px solid var(--line);
    border-radius: var(--radius-surface);
}

.markdown pre.markdown-code:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.markdown pre.markdown-code code {
    padding: 0;
    font-size: inherit;
    background: none;
    white-space: pre;
    overflow-wrap: normal;
}

.markdown blockquote {
    padding-inline-start: var(--space-3);
    color: var(--muted);
    border-inline-start: 3px solid var(--accent);
}

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

.markdown blockquote > :last-child {
    margin-bottom: 0;
}

.markdown hr {
    margin: var(--space-4) 0;
    border: 0;
    border-top: 1px solid var(--line);
}

.markdown img {
    max-width: 100%;
    height: auto;
}

.markdown li.markdown-task {
    list-style: none;
    margin-inline-start: -1.25em;
}

.markdown li.markdown-task input {
    margin: 0 var(--space-2) 0 0;
    vertical-align: middle;
    accent-color: var(--accent-strong);
}

.markdown-table-scroll {
    max-width: 100%;
    margin: var(--space-3) 0;
    overflow-x: auto;
    border: 1px solid var(--line);
    border-radius: var(--radius-surface);
}

.markdown-table-scroll:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.markdown-table {
    width: max-content;
    min-width: 100%;
    border-collapse: collapse;
    font-size: var(--text-sm);
}

.markdown-table th,
.markdown-table td {
    padding: var(--space-2) var(--space-3);
    text-align: start;
    vertical-align: top;
    border-bottom: 1px solid var(--line-subtle);
}

.markdown-table th {
    font-weight: 600;
    background: var(--surface-sunk);
    border-bottom: 1px solid var(--line);
}

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

.markdown-table .markdown-align-left {
    text-align: left;
}

.markdown-table .markdown-align-center {
    text-align: center;
}

.markdown-table .markdown-align-right {
    text-align: right;
}

.markdown-editor {
    display: flex;
    flex-direction: column;
    max-width: 100%;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-surface);
    transition: border-color var(--dur-fast) ease, box-shadow var(--dur-fast) ease;
}

.markdown-editor:focus-within {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-glow);
}

.markdown-editor-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2);
    border-bottom: 1px solid var(--line);
}

/* The formatting buttons need the script, so without it they are not shown and the editor is a plain text area. */

.markdown-editor-toolbar {
    display: none;
    flex-wrap: wrap;
    gap: var(--space-1);
}

.markdown-editor[data-h-ready] .markdown-editor-toolbar {
    display: flex;
}

.markdown-editor-switch {
    display: inline-flex;
    margin-inline-start: auto;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: var(--radius-surface);
}

.markdown-editor-toolbar [data-h-md],
.markdown-editor-mode {
    min-width: 2rem;
    height: 2rem;
    padding: 0 var(--space-2);
    font: inherit;
    font-size: var(--text-sm);
    color: var(--ink);
    cursor: pointer;
    background: transparent;
    border: 0;
    border-radius: var(--radius-surface);
}

.markdown-editor-mode {
    padding: 0 var(--space-3);
    border-radius: 0;
}

.markdown-editor-toolbar [data-h-md]:hover,
.markdown-editor-mode:hover {
    background: var(--surface-sunk);
}

.markdown-editor-toolbar [data-h-md]:focus-visible,
.markdown-editor-mode:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: -2px;
}

.markdown-editor-mode[aria-pressed="true"] {
    font-weight: 600;
    color: var(--accent-strong);
    background: var(--accent-soft);
}

.markdown-editor-toolbar [data-h-md]:disabled {
    color: var(--muted);
    cursor: not-allowed;
    background: transparent;
}

.markdown-editor-tool-bold {
    font-weight: 700;
}

.markdown-editor-tool-italic {
    font-style: italic;
}

.markdown-editor .markdown-editor-input,
.markdown-editor textarea[data-h-md-input] {
    min-height: 10rem;
    font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
    font-size: var(--text-sm);
    line-height: 1.6;
    border: 0;
    border-radius: 0;
    resize: vertical;
}

.markdown-editor .markdown-editor-input:focus {
    border-color: transparent;
    box-shadow: none;
}

.markdown-editor .markdown-editor-input[hidden] {
    display: none;
}

.markdown-editor-preview {
    min-height: 10rem;
    padding: var(--space-3) var(--space-4);
}

.markdown-editor-empty {
    margin: 0;
    color: var(--muted);
}

.markdown-editor-count {
    display: flex;
    justify-content: flex-end;
    padding: var(--space-1) var(--space-3);
    font-size: var(--text-xs);
    font-variant-numeric: tabular-nums;
    color: var(--muted);
    border-top: 1px solid var(--line);
}

.markdown-editor-count.is-warn {
    color: var(--warn-text);
}

.markdown-editor-count.is-over {
    font-weight: 600;
    color: var(--danger-text);
}

.markdown-editor.is-disabled {
    background: var(--surface-sunk);
}

@media (max-width: 576px) {
  .markdown-editor-switch {
          margin-inline-start: 0;
      }
}

/* ---------------------------------------------------------------------------
   ApprovalFlow
   --------------------------------------------------------------------------- */

.approval-flow {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    max-width: 36rem;
}

.approval-flow-list {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    list-style: none;
}

.approval-flow-step {
    position: relative;
    display: grid;
    grid-template-columns: 2rem minmax(0, 1fr);
    gap: var(--space-1) var(--space-3);
    padding-bottom: var(--space-4);
}

.approval-flow-step::before {
    position: absolute;
    top: 2rem;
    bottom: 0;
    inset-inline-start: calc(1rem - 1px);
    content: "";
    border-inline-start: 2px solid var(--line);
}

.approval-flow-step:last-child {
    padding-bottom: 0;
}

.approval-flow-step:last-child::before {
    display: none;
}

.approval-flow-dot {
    z-index: 1;
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    font-size: var(--text-sm);
    font-weight: 700;
    color: var(--muted);
    background: var(--surface);
    border: 2px solid var(--line);
    border-radius: var(--radius-pill);
}

.approval-flow-step.is-current .approval-flow-dot {
    color: var(--accent-strong);
    border-color: var(--accent);
}

.approval-flow-step.is-approved .approval-flow-dot {
    color: var(--surface);
    background: var(--ok-text);
    border-color: var(--ok-text);
}

.approval-flow-step.is-rejected .approval-flow-dot {
    color: var(--surface);
    background: var(--danger-text);
    border-color: var(--danger-text);
}

.approval-flow-step.is-skipped .approval-flow-dot {
    border-style: dashed;
}

.approval-flow-body {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    min-width: 0;
}

.approval-flow-heading {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-1) var(--space-2);
    min-height: 2rem;
}

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

.approval-flow-step.is-unreached .approval-flow-title {
    color: var(--muted);
}

.approval-flow-note {
    font-size: var(--text-xs);
    color: var(--muted);
}

.approval-flow-group {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    border: 1px dashed var(--line);
    border-radius: var(--radius-surface);
}

.approval-flow-group-label {
    font-size: var(--text-xs);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--muted);
}

.approval-flow-approver {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    min-width: 0;
}

.approval-flow-person {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--space-1) var(--space-2);
}

.approval-flow-name {
    font-weight: 600;
    overflow-wrap: anywhere;
}

.approval-flow-person time {
    font-size: var(--text-xs);
    font-variant-numeric: tabular-nums;
    color: var(--muted);
}

.approval-flow-pill {
    display: inline-block;
    padding: 0.1rem 0.55rem;
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--muted);
    border: 1px solid currentcolor;
    border-radius: var(--radius-pill);
}

.approval-flow-pill-approved {
    color: var(--ok-text);
}

.approval-flow-pill-rejected {
    color: var(--danger-text);
}

.approval-flow-pill-skipped {
    border-style: dashed;
}

.approval-flow-comment {
    padding-inline-start: var(--space-3);
    font-size: var(--text-sm);
    color: var(--muted);
    overflow-wrap: anywhere;
    border-inline-start: 2px solid var(--line);
}

.approval-flow-summary {
    margin: 0;
    font-size: var(--text-sm);
    color: var(--muted);
}

/* ---------------------------------------------------------------------------
   PermissionMatrix
   --------------------------------------------------------------------------- */

.permission-matrix {
    max-width: 100%;
}

.permission-matrix-scroll {
    max-width: 100%;
    max-height: min(70vh, 36rem);
    overflow: auto;
    border: 1px solid var(--line);
    border-radius: var(--radius-surface);
}

.permission-matrix-scroll:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.permission-matrix-table {
    width: 100%;
    min-width: 34rem;
    font-size: var(--text-sm);
    border-collapse: separate;
    border-spacing: 0;
}

.permission-matrix-table th,
.permission-matrix-table td {
    padding: var(--space-2) var(--space-3);
    text-align: center;
    background: var(--surface);
    border-bottom: 1px solid var(--line-subtle);
}

.permission-matrix-table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    font-weight: 600;
    vertical-align: bottom;
    background: var(--surface-sunk);
    border-bottom: 1px solid var(--line);
}

.permission-matrix-corner,
.permission-matrix-table th.permission-matrix-permission {
    position: sticky;
    inset-inline-start: 0;
    z-index: 1;
    min-width: 11rem;
    font-weight: 500;
    text-align: start;
}

.permission-matrix-table thead th.permission-matrix-corner {
    z-index: 3;
    text-align: start;
}

.permission-matrix-permission-name,
.permission-matrix-description {
    display: block;
}

.permission-matrix-description {
    font-size: var(--text-xs);
    font-weight: 400;
    color: var(--muted);
}

.permission-matrix-table tr.permission-matrix-group th {
    font-size: var(--text-xs);
    letter-spacing: 0.06em;
    text-align: start;
    text-transform: uppercase;
    color: var(--muted);
    background: var(--surface-sunk);
}

.permission-matrix-role {
    min-width: 6rem;
}

.permission-matrix-role-name,
.permission-matrix-count {
    display: block;
}

.permission-matrix-count {
    font-size: var(--text-xs);
    font-weight: 400;
    font-variant-numeric: tabular-nums;
    color: var(--muted);
}

.permission-matrix-cell input[type="checkbox"] {
    width: 1.1rem;
    height: 1.1rem;
    margin: 0;
    cursor: pointer;
    accent-color: var(--accent-strong);
}

.permission-matrix-cell input[type="checkbox"]:disabled {
    cursor: not-allowed;
}

.permission-matrix-table td.permission-matrix-cell.is-locked {
    background: var(--surface-sunk);
}

.permission-matrix-toggle {
    display: inline-flex;
    gap: var(--space-1);
    align-items: center;
    padding: var(--space-1);
    font: inherit;
    font-size: var(--text-xs);
    font-weight: 400;
    color: var(--muted);
    cursor: pointer;
    background: transparent;
    border: 0;
    border-radius: var(--radius-surface);
}

.permission-matrix-toggle:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
}

.permission-matrix-toggle:disabled {
    cursor: not-allowed;
}

.permission-matrix-box {
    display: inline-grid;
    place-items: center;
    width: 1.1rem;
    height: 1.1rem;
    font-size: 0.8rem;
    font-weight: 700;
    line-height: 1;
    color: var(--surface);
    background: var(--surface);
    border: 1px solid var(--muted);
    border-radius: var(--radius-surface);
}

.permission-matrix-toggle.is-checked .permission-matrix-box,
.permission-matrix-toggle.is-mixed .permission-matrix-box {
    color: #fff;
    background: var(--accent-strong);
    border-color: var(--accent-strong);
}

.permission-matrix.is-read-only .permission-matrix-cell input[type="checkbox"],
.permission-matrix.is-read-only .permission-matrix-toggle {
    cursor: default;
}

/* ---- Narrow screens: two controls that made the page wider than the viewport (found by the ADR 0017 audit) ---- */

/* A long set of segments scrolls inside the control instead of widening the page. */

.segmented {
    max-width: 100%;
    overflow-x: auto;
}

/* Visually hidden text inside the permission table is absolutely positioned; without a positioned scroller it
   landed outside it and widened the page. */

.permission-matrix-scroll {
    position: relative;
}

/* A text-alternative table that is also a .table kept the table's full width and stuck out of the page. */

table.visually-hidden {
    width: 1px;
    table-layout: fixed;
}

/* The scrolling regions of the table, grid, tree, calendar and chart components contain visually hidden text (absolutely
   positioned); they must be positioned themselves or that text lands outside them and widens the page. DataTable's
   .table-container held the header's visually hidden label, which sat at about 667px on a 375px phone. A test lists every
   scroller and fails for one that is neither positioned here nor named as not needing it. Each is its own rule, not one
   grouped rule, so stylesheet trimming keeps only the rules of the components an app uses. */

.category-grid-scroll {
    position: relative;
}

.tree-table-scroll {
    position: relative;
}

.progress-table-scroll {
    position: relative;
}

.quadrant-chart-scroll {
    position: relative;
}

.table-container {
    position: relative;
}

.data-table-scroll {
    position: relative;
}

.chart-table-scroll {
    position: relative;
}

.calendar-scroll {
    position: relative;
}

.diff-scroll {
    position: relative;
}

.heatmap-scroll {
    position: relative;
}

.editable-grid {
    position: relative;
}

.gantt-scroll {
    position: relative;
}

.schedule-scroller {
    position: relative;
}

.calendar-heatmap-scroll {
    position: relative;
}

.markdown-table-scroll {
    position: relative;
}

.availability-grid-scroll {
    position: relative;
}

/* A preformatted block scrolls inside itself instead of widening the page. */

pre {
    max-width: 100%;
    overflow-x: auto;
}

/* A long inline code sample may break rather than push the page wider. */

:not(pre) > code {
    overflow-wrap: anywhere;
}

/* The theme switcher in a top bar takes less room on a phone, so the bar fits at 375px. */

@media (max-width: 576px) {
  .top-nav-actions .theme-switcher-option {
          padding-inline: var(--space-2);
      }
}

/* ===========================================================================
   Accessibility pass A: Select and MultiSelect list focus
   =========================================================================== */

.select-options[tabindex]:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* Dropdown: visible focus on the roving menu item, and no ring on the area that takes focus back for a plain trigger. */

.dropdown-item:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: -2px;
    background: var(--surface-sunk);
}

.dropdown-trigger:focus {
    outline: none;
}

/* ==========================================================================
   Accessibility pass B: DataTable sort buttons, keyboard rows (additions only)
   ========================================================================== */

.table th .sort-button {
    appearance: none;
    background: none;
    border: 0;
    padding: 0;
    margin: 0;
    font: inherit;
    color: inherit;
    text-align: inherit;
    cursor: pointer;
    user-select: none;
}

.table th .sort-button:hover {
    color: var(--ink);
}

.table th .sort-button:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: var(--radius-surface);
}

.table tbody tr.clickable:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: -2px;
}

/* Tooltip: the bubble can be hovered so it stays open (WCAG 1.4.13). The transparent bridge keeps the pointer inside the wrapper while it crosses the gap. */

.tooltip-bubble {
    pointer-events: auto;
}

.tooltip-bubble::before {
    content: "";
    position: absolute;
    inset: -0.5rem;
}

/* ---------------------------------------------------------------------------
   Accessibility pass D: reduced motion must slow the spinner, not freeze or race it.
   A later .spinner rule sets a 0.8s animation shorthand, so the reduced-motion
   duration set earlier never applied; this one comes after it.
   --------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .spinner {
          animation-duration: 2.4s;
      }

  .btn.is-loading::after {
          animation-duration: 2.4s;
      }
}

/* ==========================================================================
   Batch ten A: CategoryGrid (additions only)
   ========================================================================== */

.category-grid {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.category-grid-scroll {
    overflow-x: auto;
    max-width: 100%;
    border: 1px solid var(--line);
    border-radius: var(--radius-surface);
    background: var(--surface);
}

.category-grid-scroll:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.category-grid-table {
    width: 100%;
    min-width: 30rem;
    border-collapse: separate;
    border-spacing: 0;
    font-size: var(--text-sm);
}

.category-grid-table th,
.category-grid-table td {
    padding: 0;
    border-bottom: 1px solid var(--line-subtle);
    border-right: 1px solid var(--line-subtle);
    text-align: right;
    background: var(--surface);
}

.category-grid-table thead th {
    padding: var(--space-2) var(--space-3);
    background: var(--surface-sunk);
    border-bottom: 1px solid var(--line);
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--muted);
}

.category-grid-table thead th.category-grid-corner,
.category-grid-table tbody th,
.category-grid-table tfoot th {
    text-align: left;
}

.category-grid-table tbody th,
.category-grid-table tfoot th {
    padding: var(--space-2) var(--space-3);
    background: var(--surface-sunk);
    border-right: 1px solid var(--line);
    font-weight: 600;
    white-space: nowrap;
}

.category-grid-table td.category-grid-total {
    padding: var(--space-2) var(--space-3);
    background: var(--surface-sunk);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.category-grid-table tfoot th,
.category-grid-table tfoot td {
    border-top: 1px solid var(--line);
    border-bottom: 0;
}

.category-grid .category-grid-input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="submit"]):not([type="button"]):not([type="file"]) {
    box-sizing: border-box;
    width: 100%;
    min-width: 4.5rem;
    margin: 0;
    padding: var(--space-2) var(--space-3);
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    color: var(--ink);
    font: inherit;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.category-grid .category-grid-input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="submit"]):not([type="button"]):not([type="file"]):focus,
.category-grid .category-grid-input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="submit"]):not([type="button"]):not([type="file"]):focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: -2px;
    background: var(--accent-soft);
    box-shadow: none;
}

.category-grid .category-grid-cell.is-invalid .category-grid-input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="submit"]):not([type="button"]):not([type="file"]) {
    background: color-mix(in oklab, var(--danger) 12%, transparent);
    outline: 2px solid var(--danger);
    outline-offset: -2px;
}

.category-grid .category-grid-input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="submit"]):not([type="button"]):not([type="file"]):disabled {
    color: var(--muted);
    cursor: not-allowed;
}

.category-grid-status {
    margin: 0;
    font-size: var(--text-sm);
    color: var(--danger-text);
}

.category-grid-status:empty {
    display: none;
}

/* ==========================================================================
   Batch ten A: TreeTable (additions only)
   ========================================================================== */

.tree-table {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.tree-table-bar {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.tree-table-scroll {
    overflow-x: auto;
    max-width: 100%;
    border: 1px solid var(--line);
    border-radius: var(--radius-surface);
    background: var(--surface);
}

.tree-table-scroll:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.tree-table-grid {
    width: 100%;
    min-width: 30rem;
    border-collapse: collapse;
    font-size: var(--text-sm);
}

.tree-table-grid th {
    padding: var(--space-2) var(--space-3);
    background: var(--surface-sunk);
    border-bottom: 1px solid var(--line);
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-align: left;
    text-transform: uppercase;
    color: var(--muted);
}

.tree-table-grid th.tree-table-num,
.tree-table-grid td.tree-table-num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.tree-table-grid td,
.tree-table-grid tbody th {
    padding: var(--space-2) var(--space-3);
    border-bottom: 1px solid var(--line-subtle);
}

.tree-table-grid tbody th {
    background: transparent;
    font-size: var(--text-sm);
    font-weight: 400;
    letter-spacing: normal;
    text-transform: none;
    color: var(--ink);
}

.tree-table-row.is-parent > th,
.tree-table-row.is-parent > td {
    font-weight: 600;
}

.tree-table-row.is-clickable {
    cursor: pointer;
}

.tree-table-row.is-clickable:hover {
    background: var(--surface-sunk);
}

.tree-table-row:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: -2px;
}

.tree-table-row[tabindex="0"] {
    background: var(--accent-soft);
}

.tree-table-name {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding-inline-start: calc(var(--tree-level, 0) * 1.5rem);
}

.tree-table-toggle,
.tree-table-spacer {
    flex: none;
    width: 1.5rem;
    height: 1.5rem;
}

.tree-table-toggle {
    appearance: none;
    display: grid;
    place-items: center;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: var(--radius-xs);
    background: transparent;
    color: var(--muted);
    font-size: var(--text-xs);
    cursor: pointer;
}

.tree-table-toggle:hover {
    background: var(--surface-sunk);
    color: var(--ink);
}

.tree-table-toggle:focus-visible {
    outline: 2px solid var(--accent);
}

.tree-table-rolled {
    color: var(--muted);
    font-style: italic;
    font-weight: 400;
}

.tree-table-empty {
    color: var(--muted);
}

/* ---------------------------------------------------------------------------
   Batch ten (B): QuadrantChart (.quadrant-chart-)
   --------------------------------------------------------------------------- */

.quadrant-chart-scroll {
    overflow-x: auto;
}

.quadrant-chart-scroll:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.quadrant-chart-svg {
    display: block;
    width: 100%;
    min-width: 32rem;
    height: auto;
}

.quadrant-chart-plot {
    fill: var(--surface);
    stroke: var(--line);
}

/* One accent tint on the top right zone only: it marks a position, not a verdict. */

.quadrant-chart-zone-high {
    fill: var(--accent-soft);
}

.quadrant-chart-split {
    stroke: var(--muted);
    stroke-width: 1;
    stroke-dasharray: 4 4;
}

.quadrant-chart-zone-name {
    font: 600 11px var(--font-sans);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    fill: var(--muted);
}

.quadrant-chart-dot {
    fill: var(--chart-1);
    stroke: var(--surface);
    stroke-width: 2;
}

.quadrant-chart-label {
    font: 400 12px var(--font-sans);
    fill: var(--ink);
    paint-order: stroke;
    stroke: var(--surface);
    stroke-width: 3px;
    stroke-linejoin: round;
}

.quadrant-chart-label-number {
    font-weight: 700;
}

.quadrant-chart-point-button {
    cursor: pointer;
}

.quadrant-chart-point-button:hover .quadrant-chart-dot,
.quadrant-chart-point-button:focus-visible .quadrant-chart-dot {
    fill: var(--ink);
    stroke: var(--accent);
    stroke-width: 3;
}

.quadrant-chart-point-button:focus-visible {
    outline: none;
}

.quadrant-chart-key {
    font-size: var(--text-sm);
}

.quadrant-chart-key-title {
    margin: 0 0 var(--space-1);
    color: var(--muted);
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.quadrant-chart-key ul {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1) var(--space-4);
    margin: 0;
    padding: 0;
    list-style: none;
}

.quadrant-chart-key-number {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------------------------
   Checklist
   --------------------------------------------------------------------------- */

.checklist {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    max-width: 36rem;
}

.checklist-summary {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.checklist-status {
    margin: 0;
    font-size: var(--text-sm);
    color: var(--muted);
}

.checklist-alert {
    color: var(--danger-text);
    font-weight: 600;
}

.checklist-list {
    list-style: none;
    margin: 0;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: var(--radius-surface);
    background: var(--surface);
}

.checklist-item {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: var(--space-1) var(--space-3);
    align-items: start;
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--line-subtle);
}

.checklist-item:last-child {
    border-bottom: 0;
}

.checklist-item input[type="checkbox"] {
    width: 1.15rem;
    height: 1.15rem;
    margin-top: 0.2rem;
    accent-color: var(--accent-strong);
}

.checklist-item label {
    margin: 0;
    font-weight: 500;
    cursor: pointer;
}

.checklist-item.is-done label {
    color: var(--muted);
    text-decoration: line-through;
}

.checklist-item.is-missing {
    background: var(--surface-sunk);
    box-shadow: inset 3px 0 0 var(--danger);
}

.checklist-required {
    font-size: var(--text-xs);
    font-weight: 400;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.checklist-help {
    margin: 0;
    font-size: var(--text-sm);
    color: var(--muted);
}

.checklist-error {
    margin: 0;
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--danger-text);
}

.checklist-note-button {
    padding: 0.125rem var(--space-3);
    border: 0;
    border-radius: var(--radius-pill);
    background: transparent;
    color: var(--muted);
    font: inherit;
    font-size: var(--text-sm);
    cursor: pointer;
}

.checklist-note-button:hover {
    background: var(--surface-sunk);
}

.checklist-note-button:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
}

.checklist-note {
    grid-column: 2 / 4;
}

.checklist-note textarea {
    width: 100%;
    min-height: 3.4rem;
    resize: vertical;
}

.checklist-actions {
    display: flex;
    gap: var(--space-3);
}

@media (max-width: 576px) {
  .checklist-item {
          grid-template-columns: auto minmax(0, 1fr);
      }

  .checklist-note-button {
          grid-column: 2;
          justify-self: start;
      }

  .checklist-note {
          grid-column: 1 / -1;
      }
}

/* ---------------------------------------------------------------------------
   AmountPicker
   --------------------------------------------------------------------------- */

.amount-picker {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    max-width: 32rem;
}

.amount-picker-presets {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.amount-picker-preset {
    min-width: 4.4rem;
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--line);
    border-radius: var(--radius-surface);
    background: var(--surface);
    color: var(--ink);
    font: inherit;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    text-align: center;
    cursor: pointer;
}

.amount-picker-preset:hover {
    background: var(--surface-sunk);
}

.amount-picker-preset:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
}

.amount-picker-preset[aria-checked="true"] {
    border-color: var(--accent);
    background: var(--accent-soft);
    color: var(--accent-strong);
}

.amount-picker-code {
    font-size: var(--text-xs);
    font-weight: 400;
    color: var(--muted);
}

.amount-picker-preset[aria-checked="true"] .amount-picker-code {
    color: inherit;
}

.amount-picker-other {
    max-width: 16rem;
}

.amount-picker-input {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.amount-picker-message {
    margin: 0;
    font-size: var(--text-sm);
    color: var(--muted);
}

.amount-picker-message.is-danger {
    color: var(--danger-text);
}

/* ---------------------------------------------------------------------------
   PatternInput
   --------------------------------------------------------------------------- */

.pattern-input {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    max-width: 22rem;
}

.pattern-input input {
    font-variant-numeric: tabular-nums;
}

.pattern-input-message {
    margin: 0;
    font-size: var(--text-sm);
    color: var(--muted);
}

.pattern-input-message.is-ok {
    color: var(--ok-text);
}

.pattern-input-message.is-danger {
    color: var(--danger-text);
}

/* ---------------------------------------------------------------------------
   Countdown: a time element with a counted text. States are classes from C# and the
   script-owned data-h-state; neither relies on colour alone (urgent is also bold, and
   a hidden word follows the element for assistive technology).
   --------------------------------------------------------------------------- */

.countdown {
    font-variant-numeric: tabular-nums;
}

.countdown-urgent,
.countdown[data-h-state="urgent"] {
    color: var(--warn-text);
    font-weight: 600;
}

.countdown-past,
.countdown[data-h-state="past"] {
    color: var(--muted);
    font-weight: inherit;
}

/* ---------------------------------------------------------------------------
   Highlight: the parts of a text that match a search, on a real mark element.
   The tint is a mix of the third chart colour, so it follows the theme; the text keeps its
   own colour. In forced-colours mode the system mark colours take over.
   --------------------------------------------------------------------------- */

.highlight-mark {
    background: color-mix(in oklab, var(--chart-3) 38%, transparent);
    color: inherit;
    border-radius: var(--radius-surface);
}

@media (forced-colors: active) {
  .highlight-mark {
          background: Mark;
          color: MarkText;
      }
}

/* ==========================================================================
   Batch eleven A: CrossTab (additions only)
   ========================================================================== */

.cross-tab {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.cross-tab-scroll {
    position: relative;
    overflow-x: auto;
    max-width: 100%;
    border: 1px solid var(--line);
    border-radius: var(--radius-surface);
    background: var(--surface);
}

.cross-tab-scroll:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.cross-tab-table {
    width: 100%;
    min-width: 24rem;
    border-collapse: separate;
    border-spacing: 0;
    font-size: var(--text-sm);
}

.cross-tab-table th,
.cross-tab-table td {
    padding: var(--space-2) var(--space-3);
    border-bottom: 1px solid var(--line-subtle);
    background: var(--surface);
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.cross-tab-table thead th {
    background: var(--surface-sunk);
    border-bottom: 1px solid var(--line);
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--muted);
}

.cross-tab-table thead th.cross-tab-corner,
.cross-tab-table tbody th,
.cross-tab-table tfoot th {
    text-align: left;
}

.cross-tab-table tbody th,
.cross-tab-table tfoot th {
    background: var(--surface-sunk);
    border-right: 1px solid var(--line);
    font-weight: 600;
}

.cross-tab-table td.cross-tab-total,
.cross-tab-table tfoot td {
    background: var(--surface-sunk);
    font-weight: 600;
}

.cross-tab-table tfoot th,
.cross-tab-table tfoot td {
    border-top: 1px solid var(--line);
    border-bottom: 0;
}

.cross-tab-percent {
    display: block;
    font-size: var(--text-xs);
    font-weight: 400;
    color: var(--muted);
}

.cross-tab-button {
    display: block;
    width: 100%;
    margin: calc(var(--space-2) * -1) calc(var(--space-3) * -1);
    padding: var(--space-2) var(--space-3);
    box-sizing: content-box;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: right;
    font-variant-numeric: tabular-nums;
    cursor: pointer;
}

.cross-tab-button:hover {
    background: var(--accent-soft);
}

.cross-tab-button:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: -2px;
    background: var(--accent-soft);
}

.cross-tab-button .cross-tab-percent {
    color: var(--muted);
}

/* ==========================================================================
   Batch eleven A: ComparisonTable (additions only)
   ========================================================================== */

.comparison-table {
    max-width: 100%;
}

.comparison-table-scroll {
    position: relative;
    overflow: auto;
    max-width: 100%;
    max-height: 75vh;
    border: 1px solid var(--line);
    border-radius: var(--radius-surface);
    background: var(--surface);
}

.comparison-table-scroll:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.comparison-table-grid {
    width: 100%;
    min-width: 30rem;
    border-collapse: separate;
    border-spacing: 0;
    font-size: var(--text-sm);
}

.comparison-table-grid th,
.comparison-table-grid td {
    padding: var(--space-2) var(--space-3);
    border-bottom: 1px solid var(--line-subtle);
    background: var(--surface);
    text-align: center;
    vertical-align: middle;
}

.comparison-table-grid thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--surface-sunk);
    border-bottom: 1px solid var(--line);
    font-weight: 600;
}

.comparison-table-grid tbody th[scope="row"],
.comparison-table-grid tfoot th[scope="row"],
.comparison-table-grid thead th.comparison-table-corner {
    position: sticky;
    left: 0;
    z-index: 1;
    min-width: 8rem;
    text-align: left;
    font-weight: 500;
}

.comparison-table-grid thead th.comparison-table-corner {
    z-index: 3;
}

.comparison-table-feature {
    display: block;
}

.comparison-table-help {
    display: block;
    font-size: var(--text-xs);
    font-weight: 400;
    color: var(--muted);
}

.comparison-table-name {
    display: block;
}

.comparison-table-subtitle {
    display: block;
    font-size: var(--text-xs);
    font-weight: 400;
    color: var(--muted);
}

.comparison-table-grid tr.comparison-table-group th {
    position: static;
    background: var(--surface-sunk);
    text-align: left;
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--muted);
}

.comparison-table-grid th.is-recommended,
.comparison-table-grid td.is-recommended {
    background: color-mix(in oklab, var(--accent) 10%, var(--surface));
}

.comparison-table-grid thead th.is-recommended {
    background: color-mix(in oklab, var(--accent) 20%, var(--surface));
}

.comparison-table-flag {
    display: block;
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ink);
}

.comparison-table-yes {
    color: var(--ok-text);
    font-weight: 700;
}

.comparison-table-no {
    color: var(--muted);
}

.comparison-table-grid tfoot td {
    border-bottom: 0;
    border-top: 1px solid var(--line);
}

.comparison-table-grid tfoot th {
    border-bottom: 0;
    border-top: 1px solid var(--line);
}

/* ==========================================================================
   Batch eleven A: ReviewSummary (additions only)
   ========================================================================== */

.review-summary {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    max-width: 40rem;
}

.review-summary-status {
    margin: 0;
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--ok-text);
}

.review-summary-status.is-attention {
    color: var(--warn-text);
}

.review-summary-group {
    border: 1px solid var(--line);
    border-radius: var(--radius-surface);
    background: var(--surface);
}

.review-summary-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-3);
    border-bottom: 1px solid var(--line);
    background: var(--surface-sunk);
}

.review-summary-title {
    margin: 0;
    font-size: var(--text-sm);
    font-weight: 600;
}

.review-summary-list {
    display: grid;
    grid-template-columns: minmax(7rem, 0.4fr) 1fr;
    gap: var(--space-2) var(--space-3);
    margin: 0;
    padding: var(--space-3);
    font-size: var(--text-sm);
}

.review-summary-list dt {
    color: var(--muted);
}

.review-summary-list dd {
    margin: 0;
    overflow-wrap: anywhere;
    white-space: pre-line;
}

.review-summary-missing {
    color: var(--warn-text);
    font-weight: 600;
}

.review-summary-empty {
    color: var(--muted);
}

@media (max-width: 576px) {
  .review-summary-list {
          grid-template-columns: 1fr;
          gap: 0;
      }

  .review-summary-list dd {
          margin-bottom: var(--space-2);
      }
}

/* ---------------------------------------------------------------------------
   Batch eleven (B): RatingSummary (.rating-summary-)
   --------------------------------------------------------------------------- */

.rating-summary {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--space-5);
    align-items: start;
    max-width: 38rem;
}

.rating-summary-mean {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 6rem;
}

.rating-summary-score {
    font-size: 2.4rem;
    line-height: 1;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
}

.rating-summary-out,
.rating-summary-count,
.rating-summary-none {
    color: var(--muted);
    font-size: var(--text-sm);
}

.rating-summary-levels {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

.rating-summary-row {
    display: grid;
    grid-template-columns: 4.5rem minmax(0, 1fr) 5.5rem;
    gap: var(--space-3);
    align-items: center;
    width: 100%;
    padding: 2px var(--space-2);
    font: inherit;
    font-size: var(--text-sm);
    color: inherit;
    text-align: left;
    background: none;
    border: 0;
    border-radius: var(--radius-surface);
}

button.rating-summary-row {
    cursor: pointer;
}

button.rating-summary-row:hover {
    background: var(--surface-sunk);
}

button.rating-summary-row:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.rating-summary-name {
    overflow-wrap: anywhere;
}

.rating-summary-track {
    display: block;
    height: 0.6rem;
    overflow: hidden;
    background: var(--surface-sunk);
    border: 1px solid var(--line);
    border-radius: var(--radius-pill);
}

.rating-summary-track i {
    display: block;
    height: 100%;
    background: var(--accent-strong);
}

.rating-summary-figures {
    color: var(--muted);
    text-align: right;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

/* The chosen level: a heavier name, a tint on the row and an ink bar, so it is not shown by colour alone. */

.rating-summary-selected .rating-summary-row {
    background: var(--accent-soft);
    box-shadow: inset 3px 0 0 var(--ink);
}

.rating-summary-selected .rating-summary-name {
    font-weight: 700;
}

.rating-summary-selected .rating-summary-track i {
    background: var(--ink);
}

@media (max-width: 576px) {
  .rating-summary {
          grid-template-columns: minmax(0, 1fr);
          gap: var(--space-3);
      }

  .rating-summary-mean {
          flex-direction: row;
          flex-wrap: wrap;
          align-items: baseline;
          gap: var(--space-2) var(--space-3);
      }

  .rating-summary-row {
          grid-template-columns: 3.5rem minmax(0, 1fr) 5rem;
          gap: var(--space-2);
      }
}

/* ---------------------------------------------------------------------------
   Batch eleven (B): ProportionBar (.proportion-bar-)
   --------------------------------------------------------------------------- */

.proportion-bar {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    max-width: 40rem;
}

.proportion-bar-track {
    display: flex;
    height: 2.2rem;
    overflow: hidden;
    background: var(--surface-sunk);
    border: 1px solid var(--line);
    border-radius: var(--radius-surface);
}

.proportion-bar-seg {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    box-sizing: border-box;
    min-width: 2px;
    margin: 0;
    padding: 0 var(--space-2);
    overflow: hidden;
    font: inherit;
    font-size: var(--text-xs);
    font-weight: 600;
    white-space: nowrap;
    border: 0;
    border-right: 1px solid var(--surface);
}

.proportion-bar-seg:last-child {
    border-right: 0;
}

button.proportion-bar-seg {
    cursor: pointer;
}

button.proportion-bar-seg:hover {
    filter: brightness(1.08);
}

button.proportion-bar-seg:focus-visible {
    outline: 2px solid var(--ink);
    outline-offset: -3px;
}

.proportion-bar-text {
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Text on a segment is dark on the light chart colours and the surface colour on the darker ones, in both themes. */

.proportion-bar-tone-chart1 {
    background: var(--chart-1);
    color: black;
}

.proportion-bar-tone-chart2 {
    background: var(--chart-2);
    color: var(--surface);
}

.proportion-bar-tone-chart3 {
    background: var(--chart-3);
    color: black;
}

.proportion-bar-tone-neutral {
    background: var(--muted);
    color: var(--surface);
}

/* The unfilled stretch is hatched, so it reads as "not filled" without colour. */

.proportion-bar-remainder {
    background: repeating-linear-gradient(135deg, var(--surface-sunk) 0, var(--surface-sunk) 5px, var(--line) 5px, var(--line) 7px);
    color: var(--ink);
}

.proportion-bar-legend {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
    gap: var(--space-2) var(--space-5);
    margin: 0;
    padding: 0;
    font-size: var(--text-sm);
    list-style: none;
}

.proportion-bar-legend-item {
    display: flex;
    gap: var(--space-2);
    align-items: baseline;
}

.proportion-bar-swatch {
    flex: none;
    align-self: center;
    width: 0.8rem;
    height: 0.8rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-surface);
}

.proportion-bar-legend-label {
    min-width: 0;
    overflow-wrap: anywhere;
}

.proportion-bar-legend-value {
    margin-left: auto;
    color: var(--muted);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

@media (forced-colors: active) {
  .proportion-bar-seg {
          border-right-color: CanvasText;
      }
}

/* ---------------------------------------------------------------------------
   Batch eleven (B): AttachmentList (.attachment-list-)
   --------------------------------------------------------------------------- */

.attachment-list {
    max-width: 40rem;
    margin: 0;
    padding: 0;
    list-style: none;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-surface);
}

.attachment-list-item {
    display: grid;
    grid-template-columns: 2.6rem minmax(0, 1fr) auto;
    gap: var(--space-1) var(--space-3);
    align-items: center;
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--line-subtle);
}

.attachment-list-item:last-child {
    border-bottom: 0;
}

.attachment-list-empty {
    padding: var(--space-3) var(--space-4);
    color: var(--muted);
}

.attachment-list-type {
    display: grid;
    place-items: center;
    height: 2.2rem;
    overflow: hidden;
    font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
    font-size: 0.68rem;
    font-weight: 700;
    color: var(--muted);
    background: var(--surface-sunk);
    border: 1px solid var(--line);
    border-radius: var(--radius-surface);
}

.attachment-list-main {
    min-width: 0;
}

.attachment-list-name {
    display: block;
    font-weight: 500;
    overflow-wrap: anywhere;
}

a.attachment-list-name {
    color: var(--accent-strong);
    text-decoration: underline;
}

a.attachment-list-name:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.attachment-list-meta {
    font-size: var(--text-sm);
    color: var(--muted);
}

.attachment-list-error {
    color: var(--danger-text);
}

.attachment-list-actions {
    display: flex;
    gap: var(--space-2);
}

.attachment-list-actions .btn {
    white-space: nowrap;
}

.attachment-list-progress {
    grid-column: 2 / 4;
    margin-top: var(--space-1);
}

@media (max-width: 576px) {
  .attachment-list-item {
          grid-template-columns: 2.6rem minmax(0, 1fr);
      }

  .attachment-list-actions {
          grid-column: 2;
          flex-wrap: wrap;
      }

  .attachment-list-progress {
          grid-column: 2;
      }
}

/* ---------------------------------------------------------------------------
   DurationInput (batch eleven, agent C): one group of labelled whole-number fields, a total in words and a help line.
   No box-shadow is used.
   --------------------------------------------------------------------------- */

.duration-input {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    min-width: 0;
    max-width: 28rem;
    margin: 0;
    padding: 0;
    border: 0;
}

.duration-input-legend {
    margin-bottom: var(--space-2);
    padding: 0;
    font-weight: 600;
    font-size: var(--text-sm);
    color: var(--ink);
}

.duration-input-fields {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
}

.duration-input-unit {
    display: flex;
    flex: 0 0 9rem;
    align-items: center;
    gap: var(--space-2);
}

.duration-input-unit input {
    flex: 1 1 auto;
    min-width: 0;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.duration-input-unit-name {
    font-size: var(--text-sm);
    color: var(--muted);
}

.duration-input-total {
    margin: 0;
    font-weight: 600;
    color: var(--ink);
}

.duration-input-help {
    margin: 0;
    font-size: var(--text-sm);
    color: var(--muted);
}

.duration-input-help.is-danger {
    color: var(--danger-text);
}

@media (max-width: 576px) {
  .duration-input {
          max-width: none;
      }
}

/* ---------------------------------------------------------------------------
   RecurrenceInput (batch eleven, agent C): native selects and fields, weekday toggle buttons, a summary sentence,
   the next dates and the rule text. No box-shadow is used.
   --------------------------------------------------------------------------- */

.recurrence-input {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    min-width: 0;
    max-width: 36rem;
}

.recurrence-input-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--space-3);
}

.recurrence-input-field {
    flex: 1 1 12rem;
    min-width: 0;
}

.recurrence-input-field.recurrence-input-short {
    flex: 0 1 8rem;
}

.recurrence-input-label {
    display: block;
    margin-bottom: var(--space-2);
    font-weight: 600;
    font-size: var(--text-sm);
    color: var(--ink);
}

.recurrence-input-with-unit {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.recurrence-input-with-unit input {
    min-width: 0;
    font-variant-numeric: tabular-nums;
}

.recurrence-input-unit {
    font-size: var(--text-sm);
    color: var(--muted);
    white-space: nowrap;
}

.recurrence-input-weekdays {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.recurrence-input-weekday {
    min-width: 2.75rem;
    min-height: 2.75rem;
    padding: var(--space-2) var(--space-3);
    font: inherit;
    color: var(--ink);
    background: transparent;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    cursor: pointer;
}

.recurrence-input-weekday:hover {
    background: var(--surface-sunk);
}

.recurrence-input-weekday[aria-pressed="true"] {
    font-weight: 600;
    color: var(--accent-strong);
    background: var(--accent-soft);
    border-color: var(--accent);
}

.recurrence-input-weekday[aria-pressed="true"]::after {
    content: "\2713";
    margin-left: var(--space-1);
    font-size: var(--text-sm);
}

.recurrence-input-weekday:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.recurrence-input-weekday:disabled {
    cursor: not-allowed;
    opacity: 0.7;
}

.recurrence-input-summary {
    padding: var(--space-3);
    background: var(--surface-sunk);
    border: 1px solid var(--line);
    border-radius: var(--radius-surface);
}

.recurrence-input-sentence {
    margin: 0;
    font-weight: 600;
    color: var(--ink);
}

.recurrence-input-next {
    margin: var(--space-2) 0 0;
    font-size: var(--text-sm);
    color: var(--muted);
}

.recurrence-input-dates {
    margin: var(--space-1) 0 0;
    padding-left: var(--space-5);
}

.recurrence-input-none {
    margin: var(--space-2) 0 0;
    font-size: var(--text-sm);
}

.recurrence-input-none.is-danger {
    color: var(--danger-text);
}

.recurrence-input-rule {
    margin: var(--space-2) 0 0;
    font-size: var(--text-sm);
    color: var(--muted);
}

.recurrence-input-rule code {
    overflow-wrap: anywhere;
}

@media (max-width: 576px) {
  .recurrence-input {
          max-width: none;
      }

  .recurrence-input-field.recurrence-input-short {
          flex: 1 1 8rem;
      }
}

@media (forced-colors: active) {
  .recurrence-input-weekday[aria-pressed="true"] {
          border-color: Highlight;
          outline: 1px solid Highlight;
      }
}

/* RecurrenceInput: a short field that sits on its own row (the day of the month) keeps its short width */

.recurrence-input > .recurrence-input-short {
    max-width: 8rem;
}

/* RecurrenceInput: a field that sits directly in the column takes its own height, not the row's flex basis */

.recurrence-input > .recurrence-input-field {
    flex: none;
}

/* ==========================================================================
   Batch eleven D: AvailabilityGrid (additions only)
   Every cell is a toggle button; a marked cell shows a tick as well as a tint, and an unavailable
   cell is hatched as well as disabled, so colour is never the only signal.
   ========================================================================== */

.availability-grid {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    max-width: 100%;
}

.availability-grid-scroll {
    overflow-x: auto;
    max-width: 100%;
    padding-bottom: var(--space-1);
}

.availability-grid-table {
    border-collapse: separate;
    border-spacing: 3px;
    font-size: var(--text-sm);
}

.availability-grid-table thead th {
    padding: var(--space-1) 0;
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--muted);
    text-align: center;
}

.availability-grid-table tbody th {
    padding-right: var(--space-2);
    font-size: var(--text-xs);
    font-weight: 400;
    color: var(--muted);
    text-align: right;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.availability-grid-slot {
    padding: 0;
}

.availability-grid-cell {
    box-sizing: border-box;
    display: grid;
    place-items: center;
    min-width: 3.6rem;
    width: 100%;
    height: 2.25rem;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: var(--radius-surface);
    background: var(--surface);
    color: var(--ink);
    font: inherit;
    font-weight: 700;
    cursor: pointer;
    user-select: none;
}

.availability-grid-cell:hover:not(:disabled) {
    background: var(--surface-sunk);
}

.availability-grid-cell:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
    position: relative;
    z-index: 1;
}

.availability-grid-cell[aria-pressed="true"] {
    background: color-mix(in oklab, var(--accent) 38%, var(--surface));
    border-color: var(--accent-strong);
}

.availability-grid-cell[aria-pressed="true"]::after {
    content: "\2713";
}

.availability-grid-cell:disabled {
    cursor: not-allowed;
    color: var(--muted);
    background: repeating-linear-gradient(45deg, var(--surface-sunk), var(--surface-sunk) 4px, var(--surface) 4px, var(--surface) 8px);
}

.availability-grid.is-disabled .availability-grid-cell[aria-pressed="true"]:disabled {
    background: color-mix(in oklab, var(--accent) 38%, var(--surface));
    border-color: var(--accent-strong);
    color: var(--ink);
}

/* With the script, a touch on a cell starts a drag instead of scrolling, so the scroll area is the margin around the grid. */

.availability-grid[data-h-ready] .availability-grid-cell {
    touch-action: none;
}

.availability-grid[data-h-dragging] {
    user-select: none;
}

.availability-grid-hint {
    margin: 0;
    font-size: var(--text-xs);
    color: var(--muted);
}

.availability-grid-summary {
    margin: 0;
    font-size: var(--text-sm);
}

@media (forced-colors: active) {
  .availability-grid-cell[aria-pressed="true"] {
          background: Highlight;
          color: HighlightText;
      }

  .availability-grid-cell:disabled {
          color: GrayText;
          border-style: dashed;
      }
}

/* ==========================================================================
   Batch eleven D: AudioPlayer (additions only)
   The audio element is the browser's own. The transcript is a plain list of times and text; with the
   script each cue also becomes a button (the script sets role and tabindex) and the cue being played
   is marked by aria-current, shown with a bar and a heavier weight as well as a tint.
   ========================================================================== */

.audio-player {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    max-width: 42rem;
}

.audio-player-audio {
    width: 100%;
}

.audio-player-none {
    margin: 0;
    padding: var(--space-3);
    border: 1px dashed var(--line);
    border-radius: var(--radius-surface);
    color: var(--muted);
    font-size: var(--text-sm);
}

.audio-player-heading {
    margin: 0;
    font-size: var(--text-base);
}

.audio-player-transcript {
    max-height: 16rem;
    overflow: auto;
    border: 1px solid var(--line);
    border-radius: var(--radius-surface);
    background: var(--surface);
}

.audio-player-transcript:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.audio-player-cues {
    margin: 0;
    padding: 0;
    list-style: none;
}

.audio-player-cue {
    display: grid;
    grid-template-columns: 3.4rem minmax(0, 1fr);
    gap: var(--space-3);
    padding: var(--space-2) var(--space-3);
    border-bottom: 1px solid var(--line-subtle);
    border-left: 3px solid transparent;
    font-size: var(--text-sm);
}

.audio-player-cue:last-child {
    border-bottom: 0;
}

.audio-player-cue time {
    padding-top: 2px;
    font-size: var(--text-xs);
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    color: var(--muted);
}

.audio-player-text {
    min-width: 0;
    overflow-wrap: anywhere;
}

.audio-player-speaker {
    font-weight: 700;
}

.audio-player-cue[role="button"] {
    cursor: pointer;
}

.audio-player-cue[role="button"]:hover {
    background: var(--surface-sunk);
}

.audio-player-cue[role="button"]:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: -2px;
}

.audio-player-cue[aria-current="true"] {
    background: var(--accent-soft);
    border-left-color: var(--accent-strong);
    font-weight: 600;
}

@media (forced-colors: active) {
  .audio-player-cue[aria-current="true"] {
          border-left-color: Highlight;
          background: Canvas;
      }
}

/* ---------------------------------------------------------------------------
   Batch 13, agent C: DisaggregationPicker (.disaggregation-) and QuestionnaireMap (.questionnaire-map-)
   --------------------------------------------------------------------------- */

/* DisaggregationPicker */

.disaggregation {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}
/* Hero, FeatureList and Feature. Flat, tokens only, nothing animated. */

.hero {
    display: grid;
    gap: 1.5rem;
    padding-block: 1rem 0;
    align-items: center;
}

.hero-text {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    min-width: 0;
}

.hero-center {
    text-align: center;
    justify-items: center;
}

.hero-center .hero-text {
    align-items: center;
}

.hero-center .hero-actions {
    justify-content: center;
}

.hero-eyebrow {
    font-size: var(--text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--muted);
    margin: 0;
}

.hero-title {
    font-size: 1.8rem;
    line-height: 1.2;
    font-weight: 700;
    letter-spacing: -0.01em;
    max-width: 26ch;
    margin: 0;
}

.hero-intro {
    color: var(--muted);
    line-height: var(--line-height);
    max-width: 46ch;
    margin: 0;
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin-top: 0.4rem;
}

.hero-media {
    min-width: 0;
}

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

.hero-media img,
.hero-media svg {
    height: auto;
}

/* A start-aligned hero with media sits in two columns on wide screens; the class is set in the markup. */
@media (min-width: 768px) {
    .hero-split {
        grid-template-columns: 1.2fr 1fr;
    }
}

.feature-list {
    list-style: none;
    margin: 0;
    padding: var(--space-5) 0 0;
    border-top: 1px solid var(--line);
    display: grid;
    gap: 1.2rem;
    grid-template-columns: repeat(auto-fit, minmax(min(var(--feature-min, 14rem), 100%), 1fr));
}

.feature {
    min-width: 0;
}

.feature-title {
    margin: 0 0 0.25rem;
    font-size: var(--text-base);
}

.feature-body {
    margin: 0;
    color: var(--muted);
    font-size: 0.92rem;
}

.feature-icon {
    display: block;
    margin-bottom: 0.4rem;
    color: var(--accent-strong);
}