/* ==========================================================================
   Hadaf Track — design system
   Arabic-first (RTL). Written with logical properties throughout, so the
   whole layout mirrors correctly without a separate LTR stylesheet.

   Register: product. Dark brand chrome (the nav rail carries Hadaf's navy +
   mint identity) against a light content surface — screenshots and charts are
   the payload here, and they read best on light in a daylit office.
   Colour strategy: restrained. Mint is for primary action, current selection
   and live state. Never decoration.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
    /* Brand. Hex equivalents are the Hadaf Solutions source values. */
    --navy-900: oklch(0.19 0.021 252);      /* #101720 — nav rail, login backdrop */
    --navy-850: oklch(0.22 0.023 252);
    --navy-800: oklch(0.26 0.025 252);      /* hover on rail */
    --navy-700: oklch(0.32 0.026 252);      /* rail borders */
    --mint-500: oklch(0.72 0.135 172);      /* darker mint — for hairlines on light */
    --mint-400: oklch(0.79 0.148 172);      /* #00daa8 — the signature */
    --mint-300: oklch(0.86 0.110 172);

    /* Neutrals, tinted a touch toward the brand hue rather than default-warm. */
    --bg: oklch(0.984 0.003 252);           /* page */
    --surface: oklch(1 0 0);                /* panels */
    --surface-sunken: oklch(0.968 0.004 252); /* table headers, wells */
    --line: oklch(0.918 0.005 252);
    --line-strong: oklch(0.855 0.007 252);

    --ink: oklch(0.24 0.017 252);           /* body — 13.9:1 on white */
    --ink-muted: oklch(0.47 0.013 252);     /* secondary — 5.4:1 on white */
    --ink-faint: oklch(0.62 0.011 252);     /* 3.2:1 — non-text / large only */
    --ink-on-dark: oklch(0.97 0.003 252);
    --ink-on-dark-muted: oklch(0.74 0.010 252); /* 6.1:1 on navy-900 */

    /* Semantic. Each has a tint (background) and an ink (text on that tint),
       so badges never rely on washed-out gray on colour. */
    --ok: oklch(0.55 0.135 152);
    --ok-tint: oklch(0.955 0.033 152);
    --ok-ink: oklch(0.41 0.115 152);

    --bad: oklch(0.55 0.185 25);
    --bad-tint: oklch(0.958 0.028 25);
    --bad-ink: oklch(0.45 0.170 25);

    --warn: oklch(0.68 0.145 75);
    --warn-tint: oklch(0.962 0.040 75);
    --warn-ink: oklch(0.45 0.105 75);

    --info: oklch(0.55 0.130 250);
    --info-tint: oklch(0.960 0.025 250);
    --info-ink: oklch(0.44 0.130 250);

    --idle: oklch(0.62 0.011 252);
    --idle-tint: oklch(0.955 0.004 252);
    --idle-ink: oklch(0.44 0.012 252);

    /* Type. Fixed rem scale (product UI, consistent DPI) at a 1.16 ratio.
       Tajawal is the brand Arabic face; it is listed first so a self-hosted
       or locally installed copy wins, with a genuinely capable Arabic stack
       behind it — Segoe UI renders Arabic well on the Windows clients here. */
    --font: 'Tajawal', 'Segoe UI', 'Dubai', 'Noto Naskh Arabic', Tahoma, system-ui, sans-serif;
    --font-num: 'Segoe UI', system-ui, sans-serif; /* tabular figures for data */

    --text-xs: 0.75rem;
    --text-sm: 0.8125rem;
    --text-base: 0.9375rem;
    --text-md: 1.0625rem;
    --text-lg: 1.25rem;
    --text-xl: 1.5rem;

    /* Space — 4px base, varied deliberately for rhythm. */
    --s-1: 0.25rem;
    --s-2: 0.5rem;
    --s-3: 0.75rem;
    --s-4: 1rem;
    --s-5: 1.5rem;
    --s-6: 2rem;
    --s-7: 3rem;

    --radius-sm: 6px;
    --radius: 10px;
    --radius-lg: 14px;

    --shadow-sm: 0 1px 2px oklch(0.24 0.017 252 / 0.06);
    --shadow: 0 1px 3px oklch(0.24 0.017 252 / 0.08), 0 4px 12px oklch(0.24 0.017 252 / 0.05);
    --shadow-lg: 0 8px 32px oklch(0.24 0.017 252 / 0.14);

    --rail-w: 15rem;

    /* Semantic z-scale. No arbitrary 999s. */
    --z-sticky: 100;
    --z-drawer-backdrop: 200;
    --z-drawer: 210;
    --z-toast: 300;

    --ease: cubic-bezier(0.22, 1, 0.36, 1);  /* ease-out-quart */
    --dur: 180ms;
}

/* --------------------------------------------------------------------------
   2. Reset & base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

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

body {
    margin: 0;
    font-family: var(--font);
    font-size: var(--text-base);
    line-height: 1.55;
    color: var(--ink);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { margin: 0; font-weight: 700; line-height: 1.25; text-wrap: balance; }
h1 { font-size: var(--text-xl); letter-spacing: -0.01em; }
h2 { font-size: var(--text-lg); letter-spacing: -0.005em; }
h3 { font-size: var(--text-md); }
p { margin: 0; }

a { color: var(--info-ink); text-decoration: none; }
a:hover { text-decoration: underline; }

/* One visible focus treatment for everything. */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
    outline: 2px solid var(--info);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

/* Numeric data gets tabular figures so columns align down the page. */
.num { font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1; }

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

/* --------------------------------------------------------------------------
   3. App shell
   -------------------------------------------------------------------------- */
.shell { min-height: 100vh; }

/* -- Nav rail (desktop) --------------------------------------------------- */
.rail {
    position: fixed;
    inset-block: 0;
    inset-inline-start: 0;
    width: var(--rail-w);
    background: var(--navy-900);
    color: var(--ink-on-dark);
    display: flex;
    flex-direction: column;
    z-index: var(--z-drawer);
}

.rail__brand {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    padding: var(--s-5) var(--s-5) var(--s-4);
}

/* The Hadaf mark: concentric "target/aperture" rings. Drawn, not an asset —
   it stays crisp at any DPI and needs no network request. */
.rail__mark { flex: none; display: block; }

.rail__name {
    font-size: var(--text-md);
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.2;
}
.rail__name span {
    display: block;
    font-size: var(--text-xs);
    font-weight: 500;
    color: var(--ink-on-dark-muted);
    letter-spacing: 0;
}

.rail__nav {
    flex: 1;
    overflow-y: auto;
    padding: var(--s-2) var(--s-3) var(--s-4);
}

.rail__group + .rail__group { margin-block-start: var(--s-5); }

.rail__grouplabel {
    padding: 0 var(--s-3) var(--s-2);
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--ink-on-dark-muted);
}

.rail__link {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    padding: var(--s-2) var(--s-3);
    margin-block-end: 2px;
    border-radius: var(--radius-sm);
    color: var(--ink-on-dark-muted);
    font-size: var(--text-base);
    font-weight: 500;
    transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.rail__link:hover {
    background: var(--navy-800);
    color: var(--ink-on-dark);
    text-decoration: none;
}
.rail__link[aria-current='page'] {
    background: var(--navy-800);
    color: var(--ink-on-dark);
}
/* Current page is marked by a mint dot, not a side-stripe. */
.rail__link[aria-current='page']::before {
    content: '';
    inline-size: 6px;
    block-size: 6px;
    border-radius: 50%;
    background: var(--mint-400);
    flex: none;
}
.rail__link:not([aria-current='page'])::before {
    content: '';
    inline-size: 6px;
    block-size: 6px;
    flex: none;
}

.rail__foot {
    padding: var(--s-4) var(--s-5);
    border-block-start: 1px solid var(--navy-700);
    display: flex;
    align-items: center;
    gap: var(--s-3);
}

.avatar {
    inline-size: 2rem;
    block-size: 2rem;
    flex: none;
    border-radius: 50%;
    background: var(--navy-700);
    color: var(--ink-on-dark);
    display: grid;
    place-items: center;
    font-size: var(--text-sm);
    font-weight: 700;
}

.rail__who { min-width: 0; line-height: 1.3; }
.rail__who strong {
    display: block;
    font-size: var(--text-sm);
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.rail__who span { font-size: var(--text-xs); color: var(--ink-on-dark-muted); }

/* -- Mobile top bar ------------------------------------------------------- */
.topbar {
    display: none;
    align-items: center;
    gap: var(--s-3);
    padding: var(--s-3) var(--s-4);
    background: var(--navy-900);
    color: var(--ink-on-dark);
    position: sticky;
    inset-block-start: 0;
    z-index: var(--z-sticky);
}
.topbar__title { font-size: var(--text-md); font-weight: 700; }

.iconbtn {
    display: grid;
    place-items: center;
    inline-size: 2.25rem;
    block-size: 2.25rem;
    border: 1px solid var(--navy-700);
    border-radius: var(--radius-sm);
    background: transparent;
    color: inherit;
    cursor: pointer;
    transition: background var(--dur) var(--ease);
}
.iconbtn:hover { background: var(--navy-800); }

.scrim {
    position: fixed;
    inset: 0;
    background: oklch(0.19 0.021 252 / 0.55);
    z-index: var(--z-drawer-backdrop);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--dur) var(--ease);
}

/* -- Content -------------------------------------------------------------- */
.content {
    padding-inline-start: var(--rail-w);
    min-height: 100vh;
}

.page {
    max-width: 82rem;
    margin-inline: auto;
    padding: var(--s-6) var(--s-6) var(--s-7);
}

.page__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--s-4);
    flex-wrap: wrap;
    margin-block-end: var(--s-5);
}
.page__head p {
    margin-block-start: var(--s-1);
    color: var(--ink-muted);
    font-size: var(--text-sm);
    max-width: 70ch;
}

/* --------------------------------------------------------------------------
   4. Panels
   Deliberately not "cards everywhere": a panel is a titled region with a
   header rule. Panels never nest.
   -------------------------------------------------------------------------- */
.panel {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}
.panel + .panel { margin-block-start: var(--s-5); }

.panel__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-4);
    flex-wrap: wrap;
    padding: var(--s-4) var(--s-5);
    border-block-end: 1px solid var(--line);
}
.panel__head h2, .panel__head h3 { font-size: var(--text-md); }
.panel__body { padding: var(--s-5); }
.panel__body--flush { padding: 0; }

/* --------------------------------------------------------------------------
   5. Toolbar / filters
   -------------------------------------------------------------------------- */
.toolbar {
    display: flex;
    align-items: flex-end;
    gap: var(--s-3);
    flex-wrap: wrap;
}
.toolbar > .spacer { margin-inline-start: auto; }

.field { display: flex; flex-direction: column; gap: var(--s-1); min-width: 0; }
.field > span {
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--ink-muted);
}

/* --------------------------------------------------------------------------
   6. Form controls — one vocabulary everywhere
   -------------------------------------------------------------------------- */
.input, .select {
    font-family: inherit;
    font-size: var(--text-base);
    color: var(--ink);
    background: var(--surface);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-sm);
    padding: 0.4375rem var(--s-3);
    min-height: 2.25rem;
    transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.input::placeholder { color: var(--ink-muted); }
.input:hover:not(:disabled), .select:hover:not(:disabled) { border-color: var(--ink-faint); }
.input:focus, .select:focus {
    outline: none;
    border-color: var(--info);
    box-shadow: 0 0 0 3px oklch(0.55 0.130 250 / 0.15);
}
.input:disabled, .select:disabled {
    background: var(--surface-sunken);
    color: var(--ink-muted);
    cursor: not-allowed;
}
.input[aria-invalid='true'] { border-color: var(--bad); }

.select {
    appearance: none;
    padding-inline-end: var(--s-6);
    /* Chevron drawn with a gradient pair so there is no image request.
       Positioned on the inline-end edge in both directions. */
    background-image:
        linear-gradient(45deg, transparent 50%, var(--ink-muted) 50%),
        linear-gradient(135deg, var(--ink-muted) 50%, transparent 50%);
    background-position:
        right var(--s-4) top 50%, right calc(var(--s-4) - 5px) top 50%;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
}
[dir='rtl'] .select {
    background-position:
        left var(--s-4) top 50%, left calc(var(--s-4) - 5px) top 50%;
}

.check { display: inline-flex; align-items: center; gap: var(--s-2); font-size: var(--text-sm); }
.check input { inline-size: 1rem; block-size: 1rem; accent-color: var(--info); }

/* --------------------------------------------------------------------------
   7. Buttons — every state, one shape
   -------------------------------------------------------------------------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--s-2);
    font-family: inherit;
    font-size: var(--text-base);
    font-weight: 600;
    line-height: 1;
    min-height: 2.25rem;
    padding: 0 var(--s-4);
    border-radius: var(--radius-sm);
    border: 1px solid transparent;
    cursor: pointer;
    white-space: nowrap;
    transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease),
                color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn:disabled { opacity: 0.55; cursor: not-allowed; }

/* Primary: mint field with navy ink. Mint as *text* on white would fail
   contrast badly (~1.9:1), so the signature colour is carried as a surface. */
.btn--primary { background: var(--mint-400); color: var(--navy-900); }
.btn--primary:hover:not(:disabled) { background: var(--mint-300); }

.btn--default {
    background: var(--surface);
    border-color: var(--line-strong);
    color: var(--ink);
}
.btn--default:hover:not(:disabled) { background: var(--surface-sunken); border-color: var(--ink-faint); }

.btn--quiet { background: transparent; color: var(--ink-muted); }
.btn--quiet:hover:not(:disabled) { background: var(--surface-sunken); color: var(--ink); }

.btn--danger { background: var(--surface); border-color: var(--line-strong); color: var(--bad-ink); }
.btn--danger:hover:not(:disabled) { background: var(--bad-tint); border-color: var(--bad); }

.btn--sm { min-height: 1.875rem; padding: 0 var(--s-3); font-size: var(--text-sm); }

.btn-row { display: flex; gap: var(--s-2); flex-wrap: wrap; }

/* --------------------------------------------------------------------------
   8. Tables
   -------------------------------------------------------------------------- */
.table-wrap { overflow-x: auto; }  /* wide data scrolls itself, never the page */

table.data {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--text-base);
}
table.data th, table.data td {
    padding: var(--s-3) var(--s-4);
    text-align: start;
    border-block-end: 1px solid var(--line);
    vertical-align: middle;
}
table.data thead th {
    position: sticky;
    inset-block-start: 0;
    background: var(--surface-sunken);
    color: var(--ink-muted);
    font-size: var(--text-xs);
    font-weight: 600;
    white-space: nowrap;
    z-index: 1;
}
table.data tbody tr:last-child td { border-block-end: 0; }
table.data tbody tr { transition: background var(--dur) var(--ease); }
table.data tbody tr:hover { background: var(--surface-sunken); }
table.data td.num, table.data th.num { font-variant-numeric: tabular-nums; }
table.data .cell-actions { text-align: end; white-space: nowrap; }

/* A quiet inline bar behind a numeric cell — reads magnitude at a glance
   without a whole chart. */
.bar {
    display: block;
    block-size: 4px;
    border-radius: 2px;
    background: var(--info);
    opacity: 0.35;
    margin-block-start: var(--s-1);
    min-inline-size: 2px;
}

/* --------------------------------------------------------------------------
   9. Badges & status
   -------------------------------------------------------------------------- */
.badge {
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    padding: 0.125rem var(--s-2);
    border-radius: var(--radius-sm);
    font-size: var(--text-xs);
    font-weight: 600;
    white-space: nowrap;
}
.badge::before {
    content: '';
    inline-size: 6px;
    block-size: 6px;
    border-radius: 50%;
    background: currentColor;
    flex: none;
}
.badge--ok   { background: var(--ok-tint);   color: var(--ok-ink); }
.badge--bad  { background: var(--bad-tint);  color: var(--bad-ink); }
.badge--warn { background: var(--warn-tint); color: var(--warn-ink); }
.badge--info { background: var(--info-tint); color: var(--info-ink); }
.badge--idle { background: var(--idle-tint); color: var(--idle-ink); }

/* Live indicator: a mint pulse. Meaning is carried by the label too, never
   by colour or motion alone. */
.live {
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--ink-muted);
}
.live__dot {
    inline-size: 8px;
    block-size: 8px;
    border-radius: 50%;
    background: var(--mint-500);
    position: relative;
}
.live__dot::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: var(--mint-400);
    animation: pulse 2s var(--ease) infinite;
}
@keyframes pulse {
    0%   { transform: scale(1);   opacity: 0.7; }
    70%  { transform: scale(2.4); opacity: 0; }
    100% { transform: scale(2.4); opacity: 0; }
}

/* --------------------------------------------------------------------------
   10. Stats — a compact figure row, not the hero-metric template
   -------------------------------------------------------------------------- */
.stats {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-6);
    padding: var(--s-4) var(--s-5);
}
.stat { min-width: 0; }
.stat__label {
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--ink-muted);
    margin-block-end: var(--s-1);
}
.stat__value {
    font-size: var(--text-lg);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
}
.stat__value small { font-size: var(--text-sm); font-weight: 500; color: var(--ink-muted); }

/* --------------------------------------------------------------------------
   11. Messages
   -------------------------------------------------------------------------- */
.msg {
    display: flex;
    align-items: flex-start;
    gap: var(--s-3);
    padding: var(--s-3) var(--s-4);
    border-radius: var(--radius-sm);
    border: 1px solid;
    font-size: var(--text-sm);
    margin-block-end: var(--s-4);
}
.msg--error { background: var(--bad-tint); border-color: oklch(0.55 0.185 25 / 0.3); color: var(--bad-ink); }
.msg--ok    { background: var(--ok-tint);  border-color: oklch(0.55 0.135 152 / 0.3); color: var(--ok-ink); }
.msg--info  { background: var(--info-tint); border-color: oklch(0.55 0.130 250 / 0.25); color: var(--info-ink); }

/* --------------------------------------------------------------------------
   12. Empty states — teach the interface rather than say "no data"
   -------------------------------------------------------------------------- */
.empty {
    padding: var(--s-7) var(--s-5);
    text-align: center;
    color: var(--ink-muted);
}
.empty__mark { color: var(--line-strong); margin-block-end: var(--s-3); }
.empty h3 { font-size: var(--text-base); color: var(--ink); margin-block-end: var(--s-1); }
.empty p { font-size: var(--text-sm); max-width: 46ch; margin-inline: auto; }
.empty .btn { margin-block-start: var(--s-4); }

/* --------------------------------------------------------------------------
   13. Screenshot gallery
   -------------------------------------------------------------------------- */
.gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: var(--s-4);
    padding: var(--s-5);
}
.shot { margin: 0; min-width: 0; }
.shot a {
    display: block;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    overflow: hidden;
    background: var(--surface-sunken);
    transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.shot a:hover { border-color: var(--mint-500); box-shadow: var(--shadow); }
.shot img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.shot figcaption {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-2);
    margin-block-start: var(--s-2);
    font-size: var(--text-xs);
    color: var(--ink-muted);
    font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------------
   14. Charts
   -------------------------------------------------------------------------- */
.chart { padding: var(--s-5); }
.chart canvas { max-width: 100%; }

/* --------------------------------------------------------------------------
   15. Login
   -------------------------------------------------------------------------- */
.auth {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: var(--s-5);
    background:
        radial-gradient(60rem 40rem at 50% -10%, var(--navy-800), transparent 70%),
        var(--navy-900);
}
.auth__box { width: min(24rem, 100%); }
.auth__brand {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--s-3);
    color: var(--ink-on-dark);
    margin-block-end: var(--s-5);
}
.auth__card {
    background: var(--surface);
    border-radius: var(--radius-lg);
    padding: var(--s-6);
    box-shadow: var(--shadow-lg);
}
.auth__card h1 { font-size: var(--text-lg); margin-block-end: var(--s-1); }
.auth__card > p {
    color: var(--ink-muted);
    font-size: var(--text-sm);
    margin-block-end: var(--s-5);
}
.auth__form { display: flex; flex-direction: column; gap: var(--s-4); }
.auth__form .btn { width: 100%; min-height: 2.5rem; margin-block-start: var(--s-1); }
.auth__foot {
    margin-block-start: var(--s-5);
    text-align: center;
    font-size: var(--text-xs);
    color: var(--ink-on-dark-muted);
}

/* --------------------------------------------------------------------------
   16. Responsive — structural, not fluid type
   -------------------------------------------------------------------------- */
@media (max-width: 1023px) {
    .content { padding-inline-start: 0; }
    .topbar { display: flex; }

    .rail {
        transform: translateX(100%);          /* RTL: rail sits on the right */
        transition: transform var(--dur) var(--ease);
        box-shadow: var(--shadow-lg);
    }
    [dir='ltr'] .rail { transform: translateX(-100%); }

    .shell.is-open .rail { transform: translateX(0); }
    .shell.is-open .scrim { opacity: 1; pointer-events: auto; }

    .page { padding: var(--s-5) var(--s-4) var(--s-6); }
    .stats { gap: var(--s-5); }
}

@media (max-width: 560px) {
    .page { padding: var(--s-4) var(--s-3) var(--s-6); }
    .panel__head { padding: var(--s-3) var(--s-4); }
    .panel__body { padding: var(--s-4); }
    .toolbar { align-items: stretch; flex-direction: column; }
    .toolbar .btn { width: 100%; }
    .gallery { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); padding: var(--s-4); gap: var(--s-3); }
}

/* --------------------------------------------------------------------------
   17. Reduced motion & print
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    /* The live dot still needs to read as "live" without pulsing. */
    .live__dot::after { animation: none; opacity: 0.35; transform: scale(1.8); }
}

@media print {
    .rail, .topbar, .scrim, .toolbar, .cell-actions { display: none !important; }
    .content { padding-inline-start: 0; }
    .panel { border-color: #ccc; box-shadow: none; break-inside: avoid; }
    body { background: #fff; }
}