/**
 * ds.css — FFC design-system component classes (prefix ds-).
 *
 * Built from the design system's component READMEs (Button, Card, Field,
 * StatTile, StatusPill, AmountDisplay, ListRow). Every value is a token from
 * tokens.css. Logical properties only; RTL is the default, LTR the
 * translation. Loaded after base.css / forms.css so these classes win ties
 * without !important.
 *
 * Manual with examples: docs/DESIGN_SYSTEM.md
 *
 * Breakpoints: mobile < 768 · tablet 768–1023 · desktop 1024–1439 · wide >= 1440
 *
 * Contents
 *   1. Base                        8. Stat tile
 *   2. Layout                      9. Amount
 *   3. Type utilities             10. List row
 *   4. Focus                      11. Empty state, section heading
 *   5. Icons                      12. Page header, breadcrumbs, tabs, pagination
 *   6. Buttons                    12b. Accordion, 13. Prose
 *   7. Cards, status pill         14. Utilities
 *                                 15. Reduced motion
 */

/* ==========================================================================
   1. Base
   ========================================================================== */
body {
    font-family: var(--font-sans);
    color: var(--ink-primary);
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
}

/* Headings keep the UA bold (700), which Somar Sans now has as a real
   weight instead of the synthesised bold the old single-face families got. */

/* Audit #6: form controls and small semantic elements never fall back to
   the UA serif / system font; they take the surrounding family. */
button, input, select, textarea, optgroup,
time, small, cite, caption, figcaption, label, legend {
    font-family: inherit;
}

/* ==========================================================================
   2. Layout
   ========================================================================== */
@media (min-width: 768px) {
    :root { --gutter: var(--space-6); }
}
@media (min-width: 1024px) {
    :root { --gutter: var(--space-8); }
}

.ds-container {
    box-sizing: border-box;
    inline-size: 100%;
    max-inline-size: calc(var(--content-max) + 2 * var(--gutter));
    margin-inline: auto;
    padding-inline: var(--gutter);
}

.ds-section {
    padding-block: var(--space-16);
}
.ds-section--tight {
    padding-block: var(--space-8);
}
@media (min-width: 1024px) {
    .ds-section { padding-block: var(--space-20); }
    .ds-section--tight { padding-block: var(--space-12); }
}
.ds-section--raised { background-color: var(--surface-raised); }
.ds-section--base { background-color: var(--surface-base); }
.ds-section--sunken { background-color: var(--surface-sunken); }
.ds-section--brand,
.ds-section--brand-deep {
    background-color: var(--surface-brand);
    color: var(--ink-on-brand);
}
.ds-section--brand-deep { background-color: var(--surface-brand-deep); }

.ds-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-4);
}
@media (min-width: 768px) {
    .ds-grid--2,
    .ds-grid--3,
    .ds-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
    .ds-grid { gap: var(--space-6); }
    .ds-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .ds-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
/* Tiles: as many 190px+ columns as fit (StatTile minimum width). */
.ds-grid--tiles { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
/* A grid of cards is often a real list (<ul>/<ol> role="list"): no markers. */
ul.ds-grid,
ol.ds-grid {
    margin: 0;
    padding: 0;
    list-style: none;
}
/* A card that is the only child of a grid cell fills the row height, so
   cards in one row line up (the <li> stretches; its card must follow). */
.ds-grid > li > .ds-card:only-child,
.ds-grid > li > .ds-stat-tile:only-child {
    block-size: 100%;
}

.ds-stack {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}
.ds-stack--tight { gap: var(--space-2); }
.ds-stack--loose { gap: var(--space-8); }

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

/* ==========================================================================
   3. Type utilities
   Arabic line-height floor (1.5) and zero tracking come from tokens.css
   (:root:lang(ar) re-points the --type-*-leading / -tracking variables).
   ========================================================================== */
.ds-display-lg,
.ds-display-md,
.ds-display-sm {
    font-family: var(--font-display);
    margin: 0;
}
.ds-display-lg {
    font-size: var(--type-display-lg-size);
    line-height: var(--type-display-lg-leading);
    font-weight: var(--type-display-lg-weight);
    letter-spacing: var(--type-display-lg-tracking);
}
.ds-display-md {
    font-size: var(--type-display-md-size);
    line-height: var(--type-display-md-leading);
    font-weight: var(--type-display-md-weight);
    letter-spacing: var(--type-display-md-tracking);
}
.ds-display-sm {
    font-size: var(--type-display-sm-size);
    line-height: var(--type-display-sm-leading);
    font-weight: var(--type-display-sm-weight);
    letter-spacing: var(--type-display-sm-tracking);
}
/* Phones: display steps down one size so a hero headline fits 390px. */
@media (max-width: 767px) {
    .ds-display-lg,
    .ds-display-md {
        font-size: var(--type-display-sm-size);
        line-height: var(--type-display-sm-leading);
    }
    .ds-display-sm {
        font-size: var(--type-title-1-size);
        line-height: var(--type-title-1-leading);
    }
}

.ds-large-title, .ds-title-1, .ds-title-2, .ds-title-3, .ds-headline, .ds-body,
.ds-body-emphasized, .ds-callout, .ds-subheadline, .ds-footnote, .ds-caption-1,
.ds-caption-2, .ds-label-caps {
    font-family: var(--font-sans);
    margin: 0;
}
.ds-large-title {
    font-size: var(--type-large-title-size);
    line-height: var(--type-large-title-leading);
    font-weight: var(--type-large-title-weight);
}
@media (max-width: 767px) {
    .ds-large-title {
        font-size: var(--type-title-1-size);
        line-height: var(--type-title-1-leading);
    }
}
.ds-title-1 {
    font-size: var(--type-title-1-size);
    line-height: var(--type-title-1-leading);
    font-weight: var(--type-title-1-weight);
}
.ds-title-2 {
    font-size: var(--type-title-2-size);
    line-height: var(--type-title-2-leading);
    font-weight: var(--type-title-2-weight);
}
.ds-title-3 {
    font-size: var(--type-title-3-size);
    line-height: var(--type-title-3-leading);
    font-weight: var(--type-title-3-weight);
}
.ds-headline {
    font-size: var(--type-headline-size);
    line-height: var(--type-headline-leading);
    font-weight: var(--type-headline-weight);
}
.ds-body {
    font-size: var(--type-body-size);
    line-height: var(--type-body-leading);
    font-weight: var(--type-body-weight);
}
.ds-body-emphasized {
    font-size: var(--type-body-emphasized-size);
    line-height: var(--type-body-emphasized-leading);
    font-weight: var(--type-body-emphasized-weight);
}
.ds-callout {
    font-size: var(--type-callout-size);
    line-height: var(--type-callout-leading);
    font-weight: var(--type-callout-weight);
}
.ds-subheadline {
    font-size: var(--type-subheadline-size);
    line-height: var(--type-subheadline-leading);
    font-weight: var(--type-subheadline-weight);
}
.ds-footnote {
    font-size: var(--type-footnote-size);
    line-height: var(--type-footnote-leading);
    font-weight: var(--type-footnote-weight);
}
.ds-caption-1 {
    font-size: var(--type-caption-1-size);
    line-height: var(--type-caption-1-leading);
    font-weight: var(--type-caption-1-weight);
}
.ds-caption-2 {
    font-size: var(--type-caption-2-size);
    line-height: var(--type-caption-2-leading);
    font-weight: var(--type-caption-2-weight);
}
/* Latin-only eyebrow. In Arabic it becomes caption-1 at 600, no case, no tracking. */
.ds-label-caps {
    font-size: var(--type-label-caps-size);
    line-height: var(--type-label-caps-leading);
    font-weight: var(--type-label-caps-weight);
    letter-spacing: var(--type-label-caps-tracking);
    text-transform: uppercase;
}
:lang(ar) .ds-label-caps,
.ds-label-caps:lang(ar) {
    font-size: var(--type-caption-1-size);
    line-height: var(--type-caption-1-leading);
    font-weight: 600;
    letter-spacing: normal;
    text-transform: none;
}

.ds-numeric-xl, .ds-numeric-lg, .ds-numeric-md, .ds-numeric-sm,
.ds-tabular {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
}
.ds-numeric-xl, .ds-numeric-lg, .ds-numeric-md, .ds-numeric-sm {
    font-family: var(--font-sans);
    margin: 0;
}
.ds-numeric-xl {
    font-size: var(--type-amount-xl-size);
    line-height: var(--type-amount-xl-leading);
    font-weight: var(--type-amount-xl-weight);
}
.ds-numeric-lg {
    font-size: var(--type-amount-lg-size);
    line-height: var(--type-amount-lg-leading);
    font-weight: var(--type-amount-lg-weight);
}
.ds-numeric-md {
    font-size: var(--type-amount-md-size);
    line-height: var(--type-amount-md-leading);
    font-weight: var(--type-amount-md-weight);
}
.ds-numeric-sm {
    font-size: var(--type-amount-sm-size);
    line-height: var(--type-amount-sm-leading);
    font-weight: var(--type-amount-sm-weight);
}

/* Ink helpers */
.ds-ink-primary { color: var(--ink-primary); }
.ds-ink-secondary { color: var(--ink-secondary); }
.ds-ink-tertiary { color: var(--ink-tertiary); }
.ds-ink-brand { color: var(--ink-brand); }
.ds-ink-on-brand { color: var(--ink-on-brand); }

/* ==========================================================================
   4. Focus — always visible: brand outline plus the focus-ring halo.
   ========================================================================== */
.ds-btn:focus-visible,
.ds-card--interactive:focus-visible,
.ds-pagination a:focus-visible,
.ds-breadcrumbs a:focus-visible,
.ds-section-heading__action:focus-visible,
.ds-prose a:focus-visible {
    outline: 2px solid var(--border-brand);
    outline-offset: 2px;
    box-shadow: 0 0 0 6px var(--focus-ring);
}
/* Inside a clipping container (.ds-list has overflow: hidden, .ds-tabs
   scrolls) the ring is drawn inside the element, as the accordion does. */
.ds-list-row:focus-visible,
.ds-tabs__tab:focus-visible {
    outline: 2px solid var(--border-brand);
    outline-offset: -2px;
    box-shadow: inset 0 0 0 6px var(--focus-ring);
}
/* On a brand surface the ring is drawn in white. */
.ds-section--brand :focus-visible,
.ds-section--brand-deep :focus-visible,
.ds-card--brand :focus-visible,
.ds-btn--on-brand:focus-visible,
.ds-btn--outline-on-brand:focus-visible {
    outline-color: var(--ink-on-brand);
    box-shadow: none;
}
/* ...except inside a white card placed on that surface: brand ring again. */
.ds-section--brand .ds-card:not(.ds-card--brand) :focus-visible,
.ds-section--brand-deep .ds-card:not(.ds-card--brand) :focus-visible {
    outline: 2px solid var(--border-brand);
    outline-offset: 2px;
    box-shadow: 0 0 0 6px var(--focus-ring);
}

/* ==========================================================================
   5. Icons — 24px line icons, 1.5 stroke, currentColor.
   ========================================================================== */
.ds-icon {
    inline-size: 20px;
    block-size: 20px;
    flex-shrink: 0;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}
/* Arrows, chevrons, back/forward and send glyphs mirror in RTL. */
[dir="rtl"] .ds-icon--mirror {
    transform: scaleX(-1);
}
/* "Back" use of a forward glyph: ds_icon('chevron', 'ds-icon--back'). */
.ds-icon--back { transform: scaleX(-1); }
[dir="rtl"] .ds-icon--mirror.ds-icon--back { transform: none; }

/* ==========================================================================
   6. Buttons
   ========================================================================== */
.ds-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    box-sizing: border-box;
    min-block-size: 44px;
    padding-block: var(--space-2);
    padding-inline: var(--space-5);
    margin: 0;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    background-color: transparent;
    color: var(--ink-primary);
    font-family: var(--font-sans);
    font-size: var(--type-headline-size);
    line-height: var(--type-headline-leading);
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition:
        background-color var(--duration-micro) var(--ease-standard),
        border-color var(--duration-micro) var(--ease-standard),
        color var(--duration-micro) var(--ease-standard),
        box-shadow var(--duration-micro) var(--ease-standard);
}
.ds-btn:hover { text-decoration: none; }

.ds-btn--sm {
    min-block-size: 36px;
    padding-block: var(--space-1);
    padding-inline: var(--space-3);
    font-size: var(--type-subheadline-size);
    line-height: var(--type-subheadline-leading);
}
/* sm is for pointer devices only; touch keeps the 44px target. */
@media (pointer: coarse) {
    .ds-btn--sm { min-block-size: 44px; }
}
.ds-btn--md { min-block-size: 44px; }
.ds-btn--lg {
    min-block-size: 52px;
    padding-inline: var(--space-6);
}
/* A full-width button may wrap a long translated label instead of
   overflowing a narrow card. */
.ds-btn--block {
    display: flex;
    inline-size: 100%;
    white-space: normal;
}
/* The single primary action of a form: full width on phones only. */
@media (max-width: 767px) {
    .ds-btn--block-mobile {
        display: flex;
        inline-size: 100%;
        white-space: normal;
    }
}

.ds-btn--primary {
    background-color: var(--brand-red);
    color: var(--ink-on-brand);
}
.ds-btn--primary:hover { background-color: var(--brand-red-hover); color: var(--ink-on-brand); }
.ds-btn--primary:active { background-color: var(--brand-red-pressed); }
/* The one lifted brand element on a marketing hero. Once per view. */
.ds-btn--elevated { box-shadow: var(--elevation-brand); }

.ds-btn--secondary {
    background-color: var(--surface-raised);
    border-color: var(--border-default);
    color: var(--ink-primary);
}
.ds-btn--secondary:hover {
    background-color: var(--surface-raised-alt);
    border-color: var(--border-strong);
    color: var(--ink-primary);
}
.ds-btn--secondary:active { background-color: var(--surface-sunken); }

.ds-btn--tertiary {
    color: var(--ink-brand);
    padding-inline: var(--space-3);
}
.ds-btn--tertiary:hover { background-color: var(--brand-red-tint); color: var(--ink-brand); }
.ds-btn--tertiary:active { background-color: var(--red-100); }

.ds-btn--destructive {
    border-color: var(--status-danger);
    color: var(--status-danger);
}
.ds-btn--destructive:hover { background-color: var(--status-danger-surface); color: var(--status-danger); }

/* White fill, red ink: the primary action when it sits on a red surface. */
.ds-btn--on-brand {
    background-color: var(--ink-on-brand);
    color: var(--brand-red);
}
.ds-btn--on-brand:hover { background-color: var(--brand-red-tint); color: var(--brand-red-pressed); }
.ds-btn--on-brand:active { background-color: var(--red-100); }
/* Outlined white on a red surface: the secondary action next to an on-brand
   primary (hero, brand bands). */
.ds-btn--outline-on-brand {
    background-color: transparent;
    border-color: var(--ink-on-brand);
    color: var(--ink-on-brand);
}
.ds-btn--outline-on-brand:hover {
    background-color: var(--brand-red-hover);
    border-color: var(--ink-on-brand);
    color: var(--ink-on-brand);
}
.ds-btn--outline-on-brand:active { background-color: var(--brand-red-pressed); }

/* Disabled keeps its colours and loses opacity; it never turns grey. */
.ds-btn:disabled,
.ds-btn[aria-disabled="true"],
.ds-btn.is-disabled {
    opacity: var(--opacity-disabled);
    cursor: not-allowed;
    pointer-events: none;
}

/* Loading: the label keeps its width and stays in the accessibility tree
   (opacity, not visibility); a spinner is drawn over it. */
.ds-btn__spinner {
    display: none;
    position: absolute;
    inset-block-start: 50%;
    inset-inline-start: 50%;
    inline-size: 18px;
    block-size: 18px;
    margin-block-start: -9px;
    margin-inline-start: -9px;
    border: 2px solid currentColor;
    border-block-start-color: transparent;
    border-radius: var(--radius-full);
    animation: ds-spin 700ms linear infinite;
}
.ds-btn.is-loading {
    pointer-events: none;
}
.ds-btn.is-loading > :not(.ds-btn__spinner) {
    opacity: 0;
}
/* Disabled while loading, but not dimmed: the spinner must stay visible. */
.ds-btn.is-loading:disabled,
.ds-btn.is-loading[aria-disabled="true"] {
    opacity: 1;
}
.ds-btn.is-loading .ds-btn__spinner {
    display: block;
}
@keyframes ds-spin {
    to { transform: rotate(360deg); }
}

/* ==========================================================================
   7a. Cards
   ========================================================================== */
.ds-card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-inline-size: 0;
    overflow: hidden;
    background-color: var(--surface-raised);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    box-shadow: var(--elevation-1);
    color: var(--ink-primary);
    text-align: start;
}
.ds-card--flat { box-shadow: var(--elevation-0); }

.ds-card--brand {
    background-color: var(--surface-brand);
    border-color: var(--brand-red);
    box-shadow: var(--elevation-2);
    color: var(--ink-on-brand);
}
/* The two-bar F graphic device, cropped off the trailing and bottom edges. */
.ds-card--brand::after,
.ds-stat-tile--brand::after {
    content: "";
    position: absolute;
    inset-block-end: -30px;
    inset-inline-end: -24px;
    inline-size: 150px;
    block-size: 150px;
    opacity: var(--opacity-device-watermark);
    pointer-events: none;
    background:
        linear-gradient(var(--ink-on-brand), var(--ink-on-brand)) 0 20px / 120px 20px no-repeat,
        linear-gradient(var(--ink-on-brand), var(--ink-on-brand)) 0 60px / 84px 20px no-repeat,
        linear-gradient(var(--ink-on-brand), var(--ink-on-brand)) 0 20px / 20px 112px no-repeat;
}
.ds-card--brand > * { position: relative; z-index: var(--z-raised); }
/* The F never mirrors. In RTL the trailing edge is the F's stem side, so the
   device crops off the bottom edge only and stays readable as an F. */
[dir="rtl"] .ds-card--brand::after,
[dir="rtl"] .ds-stat-tile--brand::after,
[dir="rtl"] .ds-empty-state::after {
    inset-inline-end: var(--space-4);
}

/* A card that navigates: the whole card is the target, with hover + chevron. */
a.ds-card,
.ds-card--interactive {
    color: var(--ink-primary);
    text-decoration: none;
    cursor: pointer;
    transition:
        box-shadow var(--duration-standard) var(--ease-standard),
        border-color var(--duration-standard) var(--ease-standard),
        transform var(--duration-standard) var(--ease-standard);
}
.ds-card--interactive:hover {
    border-color: var(--border-default);
    box-shadow: var(--elevation-2);
    color: var(--ink-primary);
}
/* The lift is for a pointer that can hover; after a tap it would stick. */
@media (hover: hover) {
    .ds-card--interactive:hover { transform: translateY(calc(-1 * var(--space-px) * 2)); }
}
.ds-card--interactive.ds-card--brand,
.ds-card--interactive.ds-card--brand:hover { color: var(--ink-on-brand); }
.ds-card--interactive:hover .ds-card__title { color: var(--ink-brand); }
.ds-card--brand.ds-card--interactive:hover .ds-card__title { color: var(--ink-on-brand); }

.ds-card__chevron {
    flex-shrink: 0;
    color: var(--ink-tertiary);
    transition: transform var(--duration-micro) var(--ease-standard);
}
.ds-card--brand .ds-card__chevron { color: var(--ink-on-brand); }
.ds-card--interactive:hover .ds-card__chevron { color: var(--ink-brand); }

.ds-card__media {
    position: relative;
    aspect-ratio: var(--ds-media-ratio, 16 / 9);
    overflow: hidden;
    background-color: var(--surface-sunken);
}
.ds-card__media--square { --ds-media-ratio: 1 / 1; }
.ds-card__media--4x3 { --ds-media-ratio: 4 / 3; }
.ds-card__media--3x2 { --ds-media-ratio: 3 / 2; }
.ds-card__media img,
.ds-card__media picture,
.ds-card__media video {
    display: block;
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
}

.ds-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding-block: var(--space-4);
    padding-inline: var(--space-4);
    border-block-end: 1px solid var(--separator);
}
.ds-card--brand .ds-card__header { border-block-end-color: var(--red-400); }
/* Under media (news/story cards) the header reads as the card's caption: no rule. */
.ds-card__header--plain {
    align-items: flex-start;
    border-block-end: 0;
    padding-block-end: 0;
}
.ds-card__header--plain + .ds-card__body { padding-block-start: var(--space-3); }
/* Header-only card (title/meta, no body or footer): the header closes the
   card, so it gets the full bottom padding and no separator rule. */
.ds-card__header:last-child {
    border-block-end: 0;
    padding-block-end: var(--space-4);
}
.ds-card__body {
    flex: 1 1 auto;
    padding: var(--space-4);
}
.ds-card__body > * + * { margin-block-start: var(--space-3); }
.ds-card__body p { max-inline-size: 62ch; }
.ds-card__footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding-block: var(--space-3);
    padding-inline: var(--space-4);
    border-block-start: 1px solid var(--separator);
}
.ds-card__footer--end { justify-content: flex-end; }
/* The footer slot's wrapper takes the free width, so block / block-mobile
   buttons inside it can span the card (the chevron, if any, stays at the end). */
.ds-card__footer > div:first-child {
    flex: 1 1 auto;
    min-inline-size: 0;
}
.ds-card--brand .ds-card__footer { border-block-start-color: var(--red-400); }
@media (min-width: 768px) {
    .ds-card__header,
    .ds-card__footer { padding-inline: var(--space-5); }
    .ds-card__body { padding: var(--space-5); }
    .ds-card__header:last-child { padding-block-end: var(--space-5); }
}
.ds-card__title {
    margin: 0;
    font-family: var(--font-sans);
    font-size: var(--type-title-3-size);
    line-height: var(--type-title-3-leading);
    font-weight: var(--type-title-3-weight);
    color: inherit;
    transition: color var(--duration-micro) var(--ease-standard);
}
.ds-card__meta {
    margin: 0;
    font-family: var(--font-sans);
    font-size: var(--type-footnote-size);
    line-height: var(--type-footnote-leading);
    color: var(--ink-secondary);
    font-variant-numeric: tabular-nums;
}
.ds-card--brand .ds-card__meta,
.ds-card--brand .ds-card__body { color: var(--ink-on-brand); }
/* Header action: ink-brand text, never a filled button. */
.ds-card__action {
    font-size: var(--type-subheadline-size);
    line-height: var(--type-subheadline-leading);
    font-weight: 600;
    color: var(--ink-brand);
    text-decoration: none;
    white-space: nowrap;
}
.ds-card__action:hover { text-decoration: underline; }
/* A nested region inside a card: raised-alt, never another shadow. */
.ds-card__inset { background-color: var(--surface-raised-alt); }

/* ==========================================================================
   7b. Status pill — always glyph + word.
   ========================================================================== */
.ds-status-pill {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    min-block-size: 28px;
    padding-block: var(--space-1);
    padding-inline: var(--space-3);
    border-radius: var(--radius-full);
    font-family: var(--font-sans);
    font-size: var(--type-footnote-size);
    line-height: var(--type-footnote-leading);
    font-weight: 600;
    white-space: nowrap;
    vertical-align: middle;
    background-color: var(--surface-sunken);
    color: var(--ink-secondary);
}
.ds-status-pill .ds-icon {
    inline-size: 16px;
    block-size: 16px;
    stroke-width: 2;
}
.ds-status-pill--success { background-color: var(--status-success-surface); color: var(--status-success); }
.ds-status-pill--warning { background-color: var(--status-warning-surface); color: var(--status-warning); }
.ds-status-pill--critical { background-color: var(--status-critical-surface); color: var(--status-critical); }
.ds-status-pill--info { background-color: var(--status-info-surface); color: var(--status-info); }
.ds-status-pill--neutral { background-color: var(--surface-sunken); color: var(--ink-secondary); }
/* Solid maroon: the single most severe item in a view, at most once. */
.ds-status-pill--strong {
    background-color: var(--brand-maroon);
    color: var(--ink-on-brand);
}

/* ==========================================================================
   8. Stat tile
   ========================================================================== */
.ds-stat-tile {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    min-inline-size: 0;
    overflow: hidden;
    padding: var(--space-5);
    background-color: var(--surface-raised);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    box-shadow: var(--elevation-1);
    color: var(--ink-primary);
    text-align: start;
}
.ds-stat-tile__icon {
    display: grid;
    place-items: center;
    inline-size: 40px;
    block-size: 40px;
    margin-block-end: var(--space-2);
    border-radius: var(--radius-sm);
    background-color: var(--surface-sunken);
    color: var(--ink-secondary);
}
.ds-stat-tile__icon--success { background-color: var(--status-success-surface); color: var(--status-success); }
.ds-stat-tile__icon--warning { background-color: var(--status-warning-surface); color: var(--status-warning); }
.ds-stat-tile__icon--aqua { background-color: var(--brand-aqua-tint); color: var(--brand-aqua-ink); }
.ds-stat-tile__label {
    margin: 0;
    font-size: var(--type-caption-1-size);
    line-height: var(--type-caption-1-leading);
    color: var(--ink-secondary);
}
.ds-stat-tile__value {
    margin: 0;
    font-family: var(--font-sans);
    font-size: var(--type-amount-lg-size);
    line-height: var(--type-amount-lg-leading);
    font-weight: var(--type-amount-lg-weight);
    color: var(--ink-primary);
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
    white-space: nowrap;
    unicode-bidi: isolate;
}
.ds-stat-tile__unit {
    font-size: 0.5em;
    font-weight: 600;
    color: var(--ink-secondary);
}
.ds-stat-tile__unit--symbol {
    font-size: 0.75em;
    color: inherit;
}
.ds-stat-tile__note {
    margin: var(--space-1) 0 0;
    font-size: var(--type-caption-1-size);
    line-height: var(--type-caption-1-leading);
    color: var(--ink-secondary);
}
/* The one brand tile per group. */
.ds-stat-tile--brand {
    background-color: var(--surface-brand);
    border-color: var(--brand-red);
    box-shadow: var(--elevation-2);
}
.ds-stat-tile--brand::after {
    inset-block-start: -18px;
    inset-block-end: auto;
    inset-inline-end: -26px;
    inline-size: 120px;
    block-size: 120px;
}
.ds-stat-tile--brand .ds-stat-tile__value { color: var(--ink-on-brand); }
/* Text on brand red is --ink-on-brand only. */
.ds-stat-tile--brand .ds-stat-tile__label,
.ds-stat-tile--brand .ds-stat-tile__note,
.ds-stat-tile--brand .ds-stat-tile__unit { color: var(--ink-on-brand); }
.ds-stat-tile--brand .ds-stat-tile__icon { background-color: var(--brand-red-pressed); color: var(--ink-on-brand); }
a.ds-stat-tile { text-decoration: none; }
.ds-stat-tile__chevron {
    position: absolute;
    inset-block-start: var(--space-5);
    inset-inline-end: var(--space-4);
}
.ds-stat-tile--brand .ds-stat-tile__chevron { color: var(--ink-on-brand); }

/* ==========================================================================
   9. Amount — figure + currency in one bidi-isolated, non-wrapping unit.
   ========================================================================== */
.ds-amount {
    display: inline-block;
    unicode-bidi: isolate;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
    color: inherit;
}
.ds-amount__value { unicode-bidi: isolate; }
.ds-amount__currency {
    /* Smaller than the figure, never below the smallest type size (11px). */
    font-size: max(0.55em, var(--type-caption-2-size));
    font-weight: 600;
    color: var(--ink-secondary);
}
.ds-amount--xl { font-size: var(--type-amount-xl-size); line-height: var(--type-amount-xl-leading); font-weight: var(--type-amount-xl-weight); }
.ds-amount--lg { font-size: var(--type-amount-lg-size); line-height: var(--type-amount-lg-leading); font-weight: var(--type-amount-lg-weight); }
.ds-amount--md { font-size: var(--type-amount-md-size); line-height: var(--type-amount-md-leading); font-weight: var(--type-amount-md-weight); }
.ds-amount--sm { font-size: var(--type-amount-sm-size); line-height: var(--type-amount-sm-leading); font-weight: var(--type-amount-sm-weight); }
.ds-amount--success { color: var(--status-success); }
.ds-amount--critical { color: var(--status-critical); }
.ds-amount--success .ds-amount__currency,
.ds-amount--critical .ds-amount__currency { color: inherit; }
.ds-section--brand .ds-amount__currency,
.ds-card--brand .ds-amount__currency,
.ds-stat-tile--brand .ds-amount__currency { color: var(--ink-on-brand); }
/* In a table, amounts end-align so they line up in both directions. */
td .ds-amount, th .ds-amount { text-align: end; }

/* ==========================================================================
   10. List row — grouped inset list inside one card.
   ========================================================================== */
.ds-list-label {
    margin: 0 0 var(--space-2);
    padding-inline: var(--space-2);
    font-size: var(--type-caption-1-size);
    line-height: var(--type-caption-1-leading);
    font-weight: 600;
    color: var(--ink-secondary);
}
.ds-list {
    margin: 0;
    padding: 0;
    list-style: none;
    overflow: hidden;
    background-color: var(--surface-raised);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    box-shadow: var(--elevation-1);
}
.ds-list > li { list-style: none; }
.ds-list-row {
    --ds-row-inset: var(--space-4);
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--space-3);
    min-block-size: 64px;
    padding-block: var(--space-3);
    padding-inline: var(--space-4);
    color: var(--ink-primary);
    text-decoration: none;
    text-align: start;
}
.ds-list-row--compact { min-block-size: 44px; }
/* Inset separator: starts where the row's text starts. */
.ds-list > li + li > .ds-list-row::before,
.ds-list > .ds-list-row + .ds-list-row::before {
    content: "";
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: var(--ds-row-inset);
    inset-inline-end: 0;
    block-size: 1px;
    background-color: var(--separator);
}
.ds-list-row:has(.ds-list-row__icon) {
    --ds-row-inset: calc(var(--space-4) + 40px + var(--space-3));
}
a.ds-list-row { cursor: pointer; transition: background-color var(--duration-micro) var(--ease-standard); }
a.ds-list-row:hover { background-color: var(--surface-raised-alt); color: var(--ink-primary); }
.ds-list-row__icon {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    inline-size: 40px;
    block-size: 40px;
    border-radius: var(--radius-sm);
    background-color: var(--surface-sunken);
    color: var(--ink-secondary);
}
.ds-list-row__main {
    flex: 1 1 auto;
    min-inline-size: 0;
}
.ds-list-row__title,
.ds-list-row__subtitle {
    display: block;
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ds-list-row__title {
    font-size: var(--type-headline-size);
    line-height: var(--type-headline-leading);
    font-weight: var(--type-headline-weight);
}
.ds-list-row__subtitle {
    font-size: var(--type-subheadline-size);
    line-height: var(--type-subheadline-leading);
    color: var(--ink-secondary);
}
.ds-list-row__trailing {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: var(--space-1);
    flex-shrink: 0;
    text-align: end;
    white-space: nowrap;
}
.ds-list-row__chevron {
    flex-shrink: 0;
    color: var(--ink-tertiary);
}

/* ==========================================================================
   11. Empty state — one line of explanation and one action.
   ========================================================================== */
.ds-empty-state {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
    padding-block: var(--space-12);
    padding-inline: var(--space-6);
    background-color: var(--surface-raised);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    text-align: center;
    color: var(--ink-primary);
}
/* The F graphic device as an edge crop off the trailing bottom corner. */
.ds-empty-state::after {
    content: "";
    position: absolute;
    inset-block-end: -44px;
    inset-inline-end: -36px;
    inline-size: 150px;
    block-size: 150px;
    opacity: var(--opacity-device-graphic);
    pointer-events: none;
    background:
        linear-gradient(var(--brand-red), var(--brand-red)) 0 20px / 120px 20px no-repeat,
        linear-gradient(var(--brand-red), var(--brand-red)) 0 60px / 84px 20px no-repeat,
        linear-gradient(var(--brand-red), var(--brand-red)) 0 20px / 20px 112px no-repeat;
}
.ds-empty-state > * { position: relative; z-index: var(--z-raised); }
@media (max-width: 767px) {
    /* No room for a readable crop on a phone: a scaled-down corner read as
       stray pink blocks next to the action, so the device is dropped. */
    .ds-empty-state::after { display: none; }
}
.ds-empty-state--inline {
    border: 0;
    border-radius: 0;
    padding-block: var(--space-8);
}
.ds-empty-state__icon {
    display: grid;
    place-items: center;
    inline-size: 56px;
    block-size: 56px;
    border-radius: var(--radius-full);
    background-color: var(--brand-red-tint);
    color: var(--ink-brand);
}
.ds-empty-state__icon .ds-icon { inline-size: 28px; block-size: 28px; }
.ds-empty-state__title {
    margin: 0;
    font-family: var(--font-sans);
    font-size: var(--type-title-3-size);
    line-height: var(--type-title-3-leading);
    font-weight: var(--type-title-3-weight);
}
.ds-empty-state__text {
    margin: 0;
    max-inline-size: 48ch;
    font-size: var(--type-callout-size);
    line-height: var(--type-callout-leading);
    color: var(--ink-secondary);
}
.ds-empty-state__action { margin-block-start: var(--space-2); }
/* Several actions (primary + secondary), centred and wrapping. */
.ds-empty-state__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-3);
    margin-block-start: var(--space-2);
}
/* A whole page that is one state (404, 419, thank-you): h1-sized title. */
.ds-empty-state--page {
    padding-block: var(--space-16);
}
.ds-empty-state--page .ds-empty-state__title {
    font-family: var(--font-display);
    font-size: var(--type-title-1-size);
    line-height: var(--type-title-1-leading);
    font-weight: var(--type-title-1-weight);
}

/* ==========================================================================
   Section heading (x-section-heading)
   ========================================================================== */
.ds-section-heading {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-3) var(--space-6);
    margin-block-end: var(--space-8);
}
.ds-section-heading__text {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    min-inline-size: 0;
    max-inline-size: 62ch;
}
.ds-section-heading__title {
    margin: 0;
    font-family: var(--font-display);
    font-size: var(--type-title-1-size);
    line-height: var(--type-title-1-leading);
    font-weight: 700;
    color: inherit;
}
@media (min-width: 1024px) {
    .ds-section-heading__title {
        font-size: var(--type-display-sm-size);
        line-height: var(--type-display-sm-leading);
    }
}
.ds-section-heading__subtitle {
    margin: 0;
    font-size: var(--type-body-size);
    line-height: var(--type-body-leading);
    color: var(--ink-secondary);
}
.ds-section--brand .ds-section-heading__subtitle,
.ds-section--brand-deep .ds-section-heading__subtitle { color: var(--ink-on-brand); }
.ds-section-heading__action {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    min-block-size: 44px;
    font-weight: 600;
    color: var(--ink-brand);
    text-decoration: none;
    white-space: nowrap;
}
.ds-section-heading__action:hover { text-decoration: underline; color: var(--ink-brand); }
.ds-section--brand .ds-section-heading__action,
.ds-section--brand-deep .ds-section-heading__action { color: var(--ink-on-brand); }

/* ==========================================================================
   12. Page header, breadcrumbs, tabs, pagination
   ========================================================================== */
/* Inner-page header (<x-page-header>): breadcrumbs + the page's h1 + intro on
   the sunken surface, with an optional decorative edge graphic. */
.ds-page-header {
    position: relative;
    overflow: hidden;
    background-color: var(--surface-sunken);
    padding-block: var(--space-8) var(--space-10);
}
.ds-page-header__inner {
    position: relative;
    z-index: var(--z-raised);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}
.ds-page-header__title,
.ds-page-header__intro {
    margin: 0;
}
.ds-page-header__intro {
    max-inline-size: 62ch;
}
.ds-page-header__icon {
    position: absolute;
    inset-block-end: 0;
    inset-inline-end: var(--space-6);
    max-block-size: 168px;
    inline-size: auto;
    opacity: var(--opacity-device-graphic);
    pointer-events: none;
}
/* Below desktop the intro runs the full width and would sit on the graphic. */
@media (max-width: 1023px) {
    .ds-page-header__icon { display: none; }
}

.ds-breadcrumbs ol,
.ds-breadcrumbs ul {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-1) var(--space-2);
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: var(--type-subheadline-size);
    line-height: var(--type-subheadline-leading);
    color: var(--ink-secondary);
}
.ds-breadcrumbs li {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}
/* Separator chevron, drawn with borders so it flips with direction. */
.ds-breadcrumbs li + li::before {
    content: "";
    inline-size: 6px;
    block-size: 6px;
    border-block-start: 1.5px solid currentColor;
    border-inline-end: 1.5px solid currentColor;
    transform: rotate(45deg);
    opacity: 0.6;
}
[dir="rtl"] .ds-breadcrumbs li + li::before { transform: rotate(-45deg); }
/* The current page stays beside its separator and wraps inside its own box
   (a long title on a phone) instead of dropping the chevron onto a new line. */
.ds-breadcrumbs li:last-child {
    flex: 1 1 0;
    min-inline-size: 8em;
}
.ds-breadcrumbs li:last-child::before { flex-shrink: 0; }
.ds-breadcrumbs a {
    display: inline-flex;
    align-items: center;
    min-block-size: 44px;
    color: var(--ink-secondary);
    text-decoration: none;
}
.ds-breadcrumbs a:hover { color: var(--ink-brand); text-decoration: underline; }
.ds-breadcrumbs [aria-current="page"] { color: var(--ink-primary); font-weight: 600; }
.ds-section--brand .ds-breadcrumbs ol,
.ds-section--brand .ds-breadcrumbs ul,
.ds-section--brand .ds-breadcrumbs a,
.ds-section--brand .ds-breadcrumbs [aria-current="page"] { color: var(--ink-on-brand); }

.ds-tabs {
    display: flex;
    gap: var(--space-1);
    overflow-x: auto;
    border-block-end: 1px solid var(--border-subtle);
    scrollbar-width: none;
}
.ds-tabs__tab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-block-size: 44px;
    padding-inline: var(--space-4);
    margin: 0 0 -1px;
    border: 0;
    border-block-end: 2px solid transparent;
    background: transparent;
    color: var(--ink-secondary);
    font-family: var(--font-sans);
    font-size: var(--type-headline-size);
    line-height: var(--type-headline-leading);
    font-weight: 600;
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
    transition: color var(--duration-micro) var(--ease-standard), border-color var(--duration-micro) var(--ease-standard);
}
.ds-tabs__tab:hover { color: var(--ink-primary); }
.ds-tabs__tab[aria-selected="true"],
.ds-tabs__tab.is-active {
    color: var(--ink-brand);
    border-block-end-color: var(--border-brand);
}
/* Segmented control variant. */
.ds-tabs--segmented {
    display: inline-flex;
    padding: var(--space-1);
    border: 0;
    border-radius: var(--radius-sm);
    background-color: var(--surface-sunken);
}
.ds-tabs--segmented .ds-tabs__tab {
    margin: 0;
    border: 0;
    border-radius: var(--radius-xs);
    min-block-size: 44px;
}
.ds-tabs--segmented .ds-tabs__tab[aria-selected="true"],
.ds-tabs--segmented .ds-tabs__tab.is-active {
    background-color: var(--surface-raised);
    color: var(--ink-primary);
    box-shadow: var(--elevation-1);
}

/* Pagination: resources/views/vendor/pagination/ds.blade.php
   ($items->links('pagination::ds')). */
.ds-pagination ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-2);
    margin: 0;
    padding: 0;
    list-style: none;
}
.ds-pagination__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-inline-size: 44px;
    min-block-size: 44px;
    padding-inline: var(--space-3);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-sm);
    background-color: var(--surface-raised);
    color: var(--ink-primary);
    font-family: var(--font-sans);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    text-decoration: none;
    transition: border-color var(--duration-micro) var(--ease-standard), background-color var(--duration-micro) var(--ease-standard);
}
a.ds-pagination__link:hover {
    border-color: var(--border-strong);
    background-color: var(--surface-raised-alt);
    color: var(--ink-primary);
}
.ds-pagination__link[aria-current="page"] {
    border-color: var(--brand-red);
    background-color: var(--brand-red);
    color: var(--ink-on-brand);
}
.ds-pagination__link.is-disabled {
    opacity: var(--opacity-disabled);
    pointer-events: none;
}
.ds-pagination__gap {
    border-color: transparent;
    background-color: transparent;
    min-inline-size: var(--space-6);
    padding-inline: 0;
}

/* ==========================================================================
   12b. Accordion — <x-accordion-item> inside .ds-accordion[data-accordion]
   (behaviour: public/assets/js/ds.js). One card; rows split by separators.
   ========================================================================== */
.ds-accordion {
    background-color: var(--surface-raised);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    box-shadow: var(--elevation-1);
    overflow: hidden;
}
.ds-accordion__item + .ds-accordion__item {
    border-block-start: 1px solid var(--separator);
}
.ds-accordion__heading {
    margin: 0;
    font-family: var(--font-sans);
    font-size: inherit;
    line-height: inherit;
}
.ds-accordion__trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    inline-size: 100%;
    min-block-size: 56px;
    padding-block: var(--space-4);
    padding-inline: var(--space-5);
    border: 0;
    background-color: transparent;
    color: var(--ink-primary);
    font-family: var(--font-sans);
    font-size: var(--type-headline-size);
    line-height: var(--type-headline-leading);
    font-weight: var(--type-headline-weight);
    text-align: start;
    cursor: pointer;
    transition: background-color var(--duration-micro) var(--ease-standard);
}
.ds-accordion__trigger:hover {
    background-color: var(--surface-raised-alt);
}
.ds-accordion__trigger:focus-visible {
    outline: 2px solid var(--border-brand);
    outline-offset: -2px;
    box-shadow: inset 0 0 0 6px var(--focus-ring);
}
.ds-accordion__trigger[aria-expanded="true"] {
    color: var(--ink-brand);
}
.ds-accordion__icon {
    flex-shrink: 0;
    color: var(--ink-tertiary);
    transition: transform var(--duration-standard) var(--ease-standard);
}
.ds-accordion__trigger[aria-expanded="true"] .ds-accordion__icon {
    transform: rotate(180deg);
    color: var(--ink-brand);
}
.ds-accordion__panel {
    padding-inline: var(--space-5);
    padding-block: 0 var(--space-5);
}
.ds-accordion__panel[hidden] {
    display: none;
}
.ds-accordion__panel > p {
    max-inline-size: 70ch;
}

/* ==========================================================================
   13. Prose — long-form article / CMS text.
   ========================================================================== */
.ds-prose {
    max-inline-size: 72ch;
    font-family: var(--font-sans);
    font-size: var(--type-body-size);
    line-height: var(--type-body-leading);
    color: var(--ink-primary);
    overflow-wrap: break-word;
    text-align: start;
}
:lang(ar) .ds-prose,
.ds-prose:lang(ar) { line-height: 1.8; }
/* Audit #12: CMS bodies arrive with inline font styles pasted from Word
   (font-family: Arial, font-size: 12pt ...). Inline styles can only be
   overridden with !important, so these three resets are deliberate. */
.ds-prose * {
    font-family: inherit !important;
}
.ds-prose [style*="font-size"],
.ds-prose [style*="line-height"] {
    font-size: inherit !important;
    line-height: inherit !important;
}
.ds-prose :is(code, pre, kbd, samp) {
    font-family: var(--font-mono) !important;
}
.ds-prose > * + * { margin-block-start: var(--space-4); }
.ds-prose h2, .ds-prose h3, .ds-prose h4 {
    margin-block: var(--space-8) 0;
    font-weight: 700;
    color: var(--ink-primary);
}
.ds-prose h2 { font-size: var(--type-title-1-size); line-height: var(--type-title-1-leading); }
.ds-prose h3 { font-size: var(--type-title-2-size); line-height: var(--type-title-2-leading); }
.ds-prose h4 { font-size: var(--type-title-3-size); line-height: var(--type-title-3-leading); }
.ds-prose h2 + *, .ds-prose h3 + *, .ds-prose h4 + * { margin-block-start: var(--space-3); }
.ds-prose p { margin-block-end: 0; }
.ds-prose ul, .ds-prose ol {
    padding-inline-start: var(--space-6);
    margin-inline: 0;
}
.ds-prose ul { list-style: disc; }
.ds-prose ol { list-style: decimal; }
.ds-prose li { margin-block-start: var(--space-2); }
.ds-prose li::marker { color: var(--ink-brand); }
.ds-prose a {
    color: var(--ink-brand);
    text-decoration: underline;
    text-underline-offset: 3px;
}
.ds-prose a:hover { color: var(--brand-red-hover); }
/* An address never breaks at its hyphen ("it@al-" / "oula.iq"). */
.ds-prose a[href^="mailto:"] { white-space: nowrap; }
.ds-prose strong, .ds-prose b { font-weight: 600; }
.ds-prose img,
.ds-prose video,
.ds-prose iframe {
    display: block;
    max-inline-size: 100%;
    block-size: auto;
    border-radius: var(--radius-md);
}
.ds-prose figure { margin-inline: 0; }
.ds-prose figcaption {
    margin-block-start: var(--space-2);
    font-size: var(--type-footnote-size);
    line-height: var(--type-footnote-leading);
    color: var(--ink-secondary);
}
.ds-prose blockquote {
    margin-inline: 0;
    padding-block: var(--space-2);
    padding-inline-start: var(--space-4);
    border-inline-start: 4px solid var(--brand-red);
    color: var(--ink-secondary);
}
.ds-prose hr {
    border: 0;
    border-block-start: 1px solid var(--border-subtle);
    margin-block: var(--space-8);
}
/* Tables scroll inside themselves, never the page. */
.ds-prose table {
    display: block;
    max-inline-size: 100%;
    overflow-x: auto;
    border-collapse: collapse;
    font-size: var(--type-subheadline-size);
    line-height: var(--type-subheadline-leading);
}
.ds-prose th,
.ds-prose td {
    padding: var(--space-2) var(--space-3);
    border-block-end: 1px solid var(--separator);
    text-align: start;
    vertical-align: top;
}
.ds-prose th {
    background-color: var(--surface-raised-alt);
    font-weight: 600;
}
.ds-prose code {
    padding: var(--space-px) var(--space-1);
    border-radius: var(--radius-xs);
    background-color: var(--surface-sunken);
    font-size: 0.85em;
}

/* ==========================================================================
   14. Utilities
   ========================================================================== */
.ds-visually-hidden,
.ds-visually-hidden-focusable:not(:focus):not(:focus-within) {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}
.ds-surface-raised { background-color: var(--surface-raised); }
.ds-surface-base { background-color: var(--surface-base); }

/* ==========================================================================
   15. Reduced motion — transforms collapse, transitions shorten to 100ms.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    :root {
        --duration-micro: 100ms;
        --duration-standard: 100ms;
        --duration-large: 100ms;
    }
    html { scroll-behavior: auto; }
    .ds-card--interactive:hover { transform: none; }
    .ds-btn__spinner { animation-duration: 1400ms; }
}