/* =============================================================================
   AlignerGate — application styles

   Tokens first, components second. Every colour, space and radius used
   anywhere in the application is declared once here, so a rebrand for a second
   lab is an edit to :root and nothing else.

   RTL is handled with logical properties (margin-inline, padding-inline,
   inset-inline) rather than a mirrored stylesheet. One rule serves both
   directions and they cannot drift apart.
   ============================================================================= */

/* -----------------------------------------------------------------------------
   Fonts — served from this site. The portal's content policy does not allow
   Google Fonts, so the approved typefaces never loaded before.
   ----------------------------------------------------------------------------- */
@font-face { font-family: 'Sora'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/sora-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'Sora'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/sora-latin-700-normal.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/ibm-plex-sans-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/ibm-plex-sans-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/ibm-plex-sans-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Sans Arabic'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/ibm-plex-sans-arabic-arabic-400-normal.woff2') format('woff2'); unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF; }
@font-face { font-family: 'IBM Plex Sans Arabic'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/ibm-plex-sans-arabic-arabic-500-normal.woff2') format('woff2'); unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF; }
@font-face { font-family: 'IBM Plex Sans Arabic'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/ibm-plex-sans-arabic-arabic-600-normal.woff2') format('woff2'); unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF; }

:root {
    /* Brand */
    --ink:            #0B2545;
    --ink-soft:       #143A5E;
    --accent:         #C2571A;
    --accent-soft:    #FFF1E3;
    --accent-border:  #F0C9A8;

    /* Surfaces */
    --page:           #F5F7FA;
    --surface:        #FFFFFF;
    --surface-alt:    #E8EDF3;
    --border:         #DDE3EA;

    /* Text */
    --text:           #0B2545;
    --text-muted:     #55657A;
    --text-faint:     #8494A8;
    --on-dark:        #FFFFFF;
    --on-dark-muted:  #B9C6D6;

    /* Status */
    --success:        #146B4E;
    --success-soft:   #EAF3EF;
    --danger:         #B3261E;
    --danger-soft:    #FDECEA;
    --info:           #1B4F8A;
    --info-soft:      #E9F1FA;

    /* Type */
    --font-display: 'Sora', 'IBM Plex Sans Arabic', 'Segoe UI', system-ui, sans-serif;
    --font-body:    'IBM Plex Sans', 'IBM Plex Sans Arabic', 'Segoe UI', system-ui, sans-serif;

    /* Space */
    --sp-1: 4px;
    --sp-2: 8px;
    --sp-3: 12px;
    --sp-4: 16px;
    --sp-5: 24px;
    --sp-6: 32px;
    --sp-7: 48px;

    /* Shape */
    --radius:    8px;
    --radius-lg: 12px;

    --shadow-sm: 0 1px 2px rgba(11, 37, 69, 0.06);
    --shadow-md: 0 4px 16px rgba(11, 37, 69, 0.08);
}

/* Arabic reads better with a slightly larger line height. */
[dir="rtl"] {
    --font-display: 'IBM Plex Sans Arabic', 'Sora', 'Segoe UI', Tahoma, sans-serif;
    --font-body:    'IBM Plex Sans Arabic', 'IBM Plex Sans', 'Segoe UI', Tahoma, sans-serif;
    line-height: 1.75;
}

/* -----------------------------------------------------------------------------
   Base
   ----------------------------------------------------------------------------- */

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

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

body {
    font-family: var(--font-body);
    font-size: 15px;
    line-height: 1.6;
    color: var(--text);
    background: var(--page);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
    font-family: var(--font-display);
    font-weight: 600;
    letter-spacing: -0.3px;
    margin: 0;
}

h1 { font-size: 28px; }
h2 { font-size: 20px; }
h3 { font-size: 16px; }

a { color: var(--ink); }
a:hover { color: var(--accent); }

/* A visible focus ring is an accessibility requirement, not a styling choice. */
:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* -----------------------------------------------------------------------------
   Layout
   ----------------------------------------------------------------------------- */

.topbar {
    height: 68px;
    background: var(--ink);
    padding-inline: var(--sp-6);
    display: flex;
    align-items: center;
    gap: var(--sp-6);
}

.topbar__brand {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    font-family: var(--font-display);
    font-size: 18px;
    font-weight: 700;
    color: var(--on-dark);
    text-decoration: none;
}

.topbar__nav {
    display: flex;
    align-items: center;
    gap: var(--sp-5);
    flex-grow: 1;
}

.topbar__link {
    font-size: 14px;
    color: var(--on-dark-muted);
    text-decoration: none;
    padding-block-end: var(--sp-1);
    border-block-end: 2px solid transparent;
}

.topbar__link:hover { color: var(--on-dark); }

.topbar__link--active {
    color: var(--on-dark);
    font-weight: 600;
    border-block-end-color: var(--accent);
}

.topbar__user {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    color: var(--on-dark);
    font-size: 14px;
}

.avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--accent);
    color: var(--on-dark);
    font-size: 13px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
}

.page {
    max-width: 1280px;
    margin-inline: auto;
    padding: var(--sp-6);
}

.page__head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--sp-4);
    margin-block-end: var(--sp-5);
    flex-wrap: wrap;
}

.page__sub {
    margin: var(--sp-1) 0 0;
    color: var(--text-muted);
}

/* -----------------------------------------------------------------------------
   Cards
   ----------------------------------------------------------------------------- */

.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: var(--sp-5);
}

.grid {
    display: grid;
    gap: var(--sp-4);
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

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

.stat__label {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    color: var(--text-muted);
}

.stat__value {
    font-family: var(--font-display);
    font-size: 40px;
    font-weight: 600;
    line-height: 1;
}

.stat__hint { font-size: 13px; color: var(--text-muted); }

/* Exactly one card carries colour: the one that needs an action. */
.stat--attention {
    background: var(--accent-soft);
    border-color: var(--accent-border);
}

.stat--attention .stat__label,
.stat--attention .stat__value { color: var(--accent); }

/* -----------------------------------------------------------------------------
   Forms
   ----------------------------------------------------------------------------- */

.field { margin-block-end: var(--sp-4); }

.field__label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    margin-block-end: var(--sp-2);
}

.input {
    width: 100%;
    height: 46px;
    padding-inline: var(--sp-3);
    font-family: var(--font-body);
    font-size: 15px;
    color: var(--text);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.input:focus {
    border-color: var(--ink);
    outline: none;
    box-shadow: 0 0 0 3px rgba(11, 37, 69, 0.1);
}

.field__hint {
    margin: var(--sp-2) 0 0;
    font-size: 12px;
    color: var(--text-faint);
}

/* -----------------------------------------------------------------------------
   Buttons
   ----------------------------------------------------------------------------- */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2);
    height: 46px;
    padding-inline: var(--sp-5);
    font-family: var(--font-body);
    font-size: 15px;
    font-weight: 600;
    border: 1px solid transparent;
    border-radius: var(--radius);
    cursor: pointer;
    text-decoration: none;
}

.btn--primary { background: var(--ink); color: var(--on-dark); }
.btn--primary:hover { background: var(--ink-soft); color: var(--on-dark); }

.btn--accent { background: var(--accent); color: var(--on-dark); }
.btn--accent:hover { filter: brightness(1.08); color: var(--on-dark); }

.btn--ghost {
    background: var(--surface);
    border-color: var(--border);
    color: var(--text);
}
.btn--ghost:hover { border-color: var(--ink); }

.btn--block { width: 100%; }

.btn--link {
    height: auto;
    padding: 0;
    background: none;
    border: none;
    font-size: 14px;
    font-weight: 500;
    color: var(--on-dark-muted);
}
.btn--link:hover { color: var(--on-dark); }

/* -----------------------------------------------------------------------------
   Alerts
   ----------------------------------------------------------------------------- */

.alert {
    padding: var(--sp-3) var(--sp-4);
    border-radius: var(--radius);
    border: 1px solid transparent;
    margin-block-end: var(--sp-4);
    font-size: 14px;
}

.alert--error   { background: var(--danger-soft);  border-color: var(--danger);  color: var(--danger); }
.alert--success { background: var(--success-soft); border-color: var(--success); color: var(--success); }
.alert--info    { background: var(--info-soft);    border-color: var(--info);    color: var(--info); }

/* -----------------------------------------------------------------------------
   Auth screen
   ----------------------------------------------------------------------------- */

.auth {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--sp-4);
    background: var(--ink);
}

.auth__card {
    width: 100%;
    max-width: 420px;
    background: var(--surface);
    border-radius: var(--radius-lg);
    padding: var(--sp-6);
    box-shadow: var(--shadow-md);
}

.auth__brand {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2);
    margin-block-end: var(--sp-5);
    font-family: var(--font-display);
    font-size: 22px;
    font-weight: 700;
    color: var(--ink);
}

.auth__title { text-align: center; margin-block-end: var(--sp-2); }

.auth__sub {
    text-align: center;
    color: var(--text-muted);
    font-size: 14px;
    margin: 0 0 var(--sp-5);
}

.auth__foot {
    margin: var(--sp-5) 0 0;
    text-align: center;
    font-size: 12px;
    color: var(--text-faint);
}

/* -----------------------------------------------------------------------------
   Utilities
   ----------------------------------------------------------------------------- */

.muted  { color: var(--text-muted); }
.center { text-align: center; }

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

@media (max-width: 720px) {
    .topbar { padding-inline: var(--sp-4); gap: var(--sp-4); }
    .topbar__nav { display: none; }
    .page { padding: var(--sp-4); }
    h1 { font-size: 22px; }
}

/* =============================================================================
   Tables, forms and admin components
   ============================================================================= */

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

.table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.table th {
    text-align: start;
    padding: var(--sp-3) var(--sp-4);
    background: var(--surface-alt);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    color: var(--text-muted);
    white-space: nowrap;
}

.table td {
    padding: var(--sp-3) var(--sp-4);
    border-block-start: 1px solid var(--border);
    vertical-align: top;
}

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

.table__num     { text-align: end; }
.table__actions { white-space: nowrap; text-align: end; }

/* A deactivated row stays readable but stops competing for attention. */
.row--muted td { opacity: 0.55; }

/* -----------------------------------------------------------------------------
   Chips
   ----------------------------------------------------------------------------- */

.chip {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 20px;
    background: var(--surface-alt);
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}

.chip--ok     { background: var(--success-soft); color: var(--success); }
.chip--warn   { background: var(--accent-soft);  color: var(--accent); }
.chip--danger { background: var(--danger-soft);  color: var(--danger); }

/* -----------------------------------------------------------------------------
   Inline actions
   ----------------------------------------------------------------------------- */

.inline-form { display: inline; }

.link-action {
    background: none;
    border: none;
    padding: 0;
    margin-inline-start: var(--sp-3);
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 500;
    color: var(--text-muted);
    text-decoration: none;
    cursor: pointer;
}

.link-action:first-child { margin-inline-start: 0; }
.link-action:hover { color: var(--accent); text-decoration: underline; }

/* -----------------------------------------------------------------------------
   Forms
   ----------------------------------------------------------------------------- */

.form-grid {
    display: grid;
    gap: var(--sp-4);
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

.field--wide { grid-column: span 2; }

select.input {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%2355657A' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--sp-3) center;
    padding-inline-end: var(--sp-6);
}

[dir="rtl"] select.input { background-position: left var(--sp-3) center; }

.form-actions {
    display: flex;
    gap: var(--sp-3);
    margin-block-start: var(--sp-5);
    flex-wrap: wrap;
}

/* -----------------------------------------------------------------------------
   Radio cards — a role is a consequential choice, so each option carries its
   own explanation instead of a bare label.
   ----------------------------------------------------------------------------- */

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

.radio-card {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-3);
    padding: var(--sp-3) var(--sp-4);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    cursor: pointer;
}

.radio-card:hover { border-color: var(--ink); }

.radio-card:has(input:checked) {
    border-color: var(--accent);
    background: var(--accent-soft);
}

.radio-card input { margin-block-start: 4px; }
.radio-card span  { display: block; }
.radio-card strong { display: block; margin-block-end: 2px; }
.radio-card .muted { font-size: 13px; }

/* -----------------------------------------------------------------------------
   Checkbox list
   ----------------------------------------------------------------------------- */

.check-list {
    display: grid;
    gap: var(--sp-2);
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

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

.check-item:has(input:checked) {
    border-color: var(--accent);
    background: var(--accent-soft);
}

/* -----------------------------------------------------------------------------
   Addresses
   ----------------------------------------------------------------------------- */

.address-list { display: flex; flex-direction: column; gap: var(--sp-3); }

.address {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--sp-4);
    padding: var(--sp-4);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.address--default {
    border-color: var(--success);
    background: var(--success-soft);
}

.address__head {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    margin-block-end: var(--sp-2);
}

.address__body {
    margin: 0;
    font-size: 14px;
    line-height: 1.6;
    color: var(--text-muted);
}

.address__actions { white-space: nowrap; }

@media (max-width: 720px) {
    .field--wide { grid-column: span 1; }
    .address { flex-direction: column; }
}

/* =============================================================================
   Language switch and RTL refinements
   ============================================================================= */

.lang-switch { display: flex; align-items: center; }

.topbar__name { white-space: nowrap; }

/* Arabic numerals in tables stay readable when the page flips direction:
   numeric cells keep LTR so "1-40" does not render as "40-1". */
[dir="rtl"] .table__num,
[dir="rtl"] code {
    direction: ltr;
    unicode-bidi: embed;
}

/* Mixed Arabic prose containing English clinical terms (IPR, Stage) renders
   correctly only when the container declares its base direction explicitly. */
[dir="rtl"] .field__hint,
[dir="rtl"] .page__sub,
[dir="rtl"] .muted {
    text-align: start;
}

@media (max-width: 900px) {
    .topbar__name { display: none; }
}

/* =============================================================================
   Case submission wizard
   ============================================================================= */

.wizard-steps {
    display: flex;
    align-items: stretch;
    gap: var(--sp-1);
    margin-block-end: var(--sp-5);
    overflow-x: auto;
    padding-block-end: var(--sp-1);
}

.wizard-step {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-2) var(--sp-4);
    border-radius: var(--radius);
    font-size: 13px;
    white-space: nowrap;
    text-decoration: none;
    color: var(--text-muted);
    background: var(--surface);
    border: 1px solid var(--border);
}

.wizard-step__num {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--surface-alt);
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 600;
    flex-shrink: 0;
}

.wizard-step--done            { color: var(--ink); border-color: var(--ink); }
.wizard-step--done:hover      { border-color: var(--accent); color: var(--accent); }
.wizard-step--done .wizard-step__num { background: var(--ink); color: #FFFFFF; }

.wizard-step--current {
    color: var(--accent);
    border-color: var(--accent);
    background: var(--accent-soft);
    font-weight: 600;
}
.wizard-step--current .wizard-step__num { background: var(--accent); color: #FFFFFF; }

.wizard-step--ahead { opacity: 0.6; }

/* -----------------------------------------------------------------------------
   Inline choices — radio groups that read as buttons
   ----------------------------------------------------------------------------- */

.choice-row { display: flex; flex-wrap: wrap; gap: var(--sp-2); }

.choice {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-2) var(--sp-4);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    cursor: pointer;
    font-size: 14px;
}

.choice:hover { border-color: var(--ink); }

.choice:has(input:checked) {
    border-color: var(--accent);
    background: var(--accent-soft);
    color: var(--accent);
    font-weight: 600;
}

.input--area {
    height: auto;
    padding: var(--sp-3);
    font-family: var(--font-body);
    line-height: 1.6;
    resize: vertical;
}

/* -----------------------------------------------------------------------------
   Package cards
   ----------------------------------------------------------------------------- */

.package-grid {
    display: grid;
    gap: var(--sp-4);
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    margin-block-start: var(--sp-4);
}

.package-card { cursor: pointer; }

/* The native radio is hidden but still focusable; the ring is drawn on the
   card so keyboard users see what is selected. */
.package-card input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
}

.package-card__inner {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
    height: 100%;
    padding: var(--sp-5);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
}

.package-card:hover .package-card__inner { border-color: var(--ink); }

.package-card input:checked + .package-card__inner {
    border-color: var(--accent);
    border-width: 2px;
    padding: calc(var(--sp-5) - 1px);
    background: var(--accent-soft);
}

.package-card input:focus-visible + .package-card__inner {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.package-card__badge {
    align-self: flex-start;
    padding: 2px 10px;
    border-radius: 20px;
    background: var(--accent-soft);
    color: var(--accent);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.4px;
}

.package-card input:checked + .package-card__inner .package-card__badge {
    background: var(--accent);
    color: #FFFFFF;
}

.package-card__name {
    font-family: var(--font-display);
    font-size: 18px;
    font-weight: 600;
    color: var(--ink);
}

.package-card__desc {
    font-size: 13px;
    color: var(--text-muted);
    line-height: 1.5;
}

.package-card__specs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-3);
    margin-block-start: auto;
    padding-block-start: var(--sp-3);
    border-block-start: 1px solid var(--border);
}

.spec { display: flex; flex-direction: column; gap: 2px; }

.spec__label {
    font-size: 11px;
    letter-spacing: 0.3px;
    color: var(--text-faint);
}

.spec__value {
    font-size: 14px;
    font-weight: 600;
    color: var(--ink);
}

/* Spec values mix Arabic labels with English numbers and terms; keeping them
   LTR stops "1 set" rendering as "set 1". */
[dir="rtl"] .spec__value { direction: ltr; text-align: right; }

/* =============================================================================
   Photo slots
   ============================================================================= */

/* Capped rather than stretched. 1fr let a slot grow to fill a wide screen,
   which made a thumbnail-sized control the biggest thing on the page. */
.slot-grid {
    display: grid;
    gap: var(--sp-3);
    grid-template-columns: repeat(auto-fill, minmax(120px, 150px));
    justify-content: start;
    margin-block-start: var(--sp-4);
}

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

/* A class rule beats the browser's own [hidden] styling, so a hidden slot
   would otherwise stay on screen. The free slots depend on this. */
.slot[hidden] { display: none; }

.slot__drop {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 4 / 3;
    border: 2px dashed var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    cursor: pointer;
    overflow: hidden;
    transition: border-color 0.15s, background 0.15s;
}

.slot__drop:hover { border-color: var(--ink); }

.slot--over .slot__drop {
    border-color: var(--accent);
    background: var(--accent-soft);
}

.slot--filled .slot__drop {
    border-style: solid;
    border-color: var(--success);
}

/* The icon sits under the photograph and disappears once one is present — it
   marks an empty slot, it does not illustrate the view. Sized in absolute
   pixels so it stays an icon rather than growing with the slot. */
.slot__guide {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-faint);
}

.slot__guide svg { width: 28px; height: 28px; }

.slot--filled .slot__guide { display: none; }

.slot__image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.slot__progress {
    position: absolute;
    inset-inline: 0;
    inset-block-end: 0;
    height: 4px;
    background: var(--surface-alt);
}

.slot__bar {
    display: block;
    height: 100%;
    width: 0;
    background: var(--accent);
    transition: width 0.2s;
}

.slot--busy .slot__drop { opacity: 0.7; }

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

.slot__label { font-size: 13px; color: var(--text-muted); }
.slot__req   { color: var(--accent); }

.slot--filled .slot__label { color: var(--text); font-weight: 500; }

.slot__remove {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border: 0;
    border-radius: 50%;
    background: var(--surface-alt);
    color: var(--text-muted);
    cursor: pointer;
    flex-shrink: 0;
}

.slot__remove:hover { background: var(--danger-soft); color: var(--danger); }

@media (max-width: 480px) {
    .slot-grid { grid-template-columns: repeat(2, 1fr); }
}
/* =============================================================================
   Wizard step 4 — prescription

   The tooth chart is the only genuinely new component here; everything else
   reuses .card, .choice-row and .field. Tooth boxes are laid out by quadrant
   and sized for a finger, because a doctor marks extractions on a tablet in
   the chair more often than at a desk.

   Note the direction rule on the chart. The arch is an anatomical layout, not
   text: the patient's right stays on the reader's left in Arabic exactly as it
   does in English, so the chart is pinned to ltr while the page around it
   flips.
   ============================================================================= */

.rx-modes {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
    margin-block-end: var(--sp-4);
}

.rx-modes .field__hint { margin-block-start: 0; }

.rx-item { margin-block-end: var(--sp-4); }

.rx-item__title {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    flex-wrap: wrap;
}

.rx-item__req { color: var(--accent); }

/* A contextual warning sits with the item it qualifies, not in a banner at the
   top of the page where it would be read once and then scrolled past. */
.rx-item__note {
    margin-block: var(--sp-2) var(--sp-4);
    padding: var(--sp-3);
    border-inline-start: 3px solid var(--accent-border);
    background: var(--accent-soft);
    border-radius: var(--radius);
    color: var(--text);
    font-size: 14px;
}

.rx-arch { margin-block-end: var(--sp-4); }
.rx-arch:last-child { margin-block-end: 0; }

.rx-arch__label {
    display: block;
    margin-block-end: var(--sp-2);
    font-size: 13px;
    font-weight: 600;
    color: var(--text-muted);
}

.rx-followup:not(:empty) { margin-block-start: var(--sp-3); }
.rx-followup .field:last-child { margin-block-end: 0; }

.rx-number {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    max-width: 220px;
}

/* A measurement reads left to right in both languages. */
.rx-number .input {
    direction: ltr;
    text-align: start;
}

.rx-number__unit {
    font-size: 14px;
    color: var(--text-muted);
    white-space: nowrap;
}

/* -----------------------------------------------------------------------------
   Tooth chart
   -------------------------------------------------------------------------- */

.rx-chart { margin-block-start: var(--sp-4); }

.tooth-set { margin-block-end: var(--sp-4); }
.tooth-set:last-of-type { margin-block-end: var(--sp-2); }

.tooth-set__label {
    display: block;
    margin-block-end: var(--sp-2);
    font-size: 13px;
    font-weight: 600;
    color: var(--text-muted);
}

/* Flex rather than grid. The arch is two quadrants either side of a midline,
   and saying exactly that in the markup leaves nothing for a stray rule
   elsewhere in this file to reinterpret. */
.tooth-chart {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
    direction: ltr;
    padding: var(--sp-3);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--page);
    overflow-x: auto;
}

.tooth-arch {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2);
    min-inline-size: max-content;
}

/* The occlusal line: the two arches face each other across it. */
.tooth-arch--lower {
    padding-block-start: var(--sp-2);
    border-block-start: 1px solid var(--border);
}

.tooth-quad {
    display: flex;
    gap: var(--sp-1);
}

.tooth-quad--right { justify-content: flex-end; }

.tooth-midline {
    inline-size: 1px;
    align-self: stretch;
    min-block-size: 34px;
    background: var(--text-faint);
    flex: 0 0 auto;
}

.tooth {
    inline-size: 34px;
    block-size: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--text);
    font-family: var(--font-body);
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    cursor: pointer;
    transition: background 0.12s ease, border-color 0.12s ease;
}

.tooth:hover { border-color: var(--ink); }

.tooth.is-selected {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--on-dark);
    font-weight: 600;
}

.rx-chart__summary {
    margin-block-start: var(--sp-3);
    font-size: 13px;
    color: var(--text-muted);
    direction: ltr;
    text-align: start;
}

.rx-chart__summary:empty { display: none; }

@media (max-width: 560px) {
    .tooth { inline-size: 30px; block-size: 30px; font-size: 11px; }
    .tooth-chart { gap: var(--sp-2); }
}


/* =============================================================================
   CBCT archive — step 3

   Rendered as a slot rather than a wide drop zone, so the thing to click looks
   the same as every other thing to click on this page. There is no thumbnail to
   show, so a filled CBCT slot shows a file mark and the size instead.
   ============================================================================= */

.slot--cbct .slot__drop { cursor: pointer; }

.slot__archive {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--sp-1);
    color: var(--success);
}

/* A file size reads left to right in both languages. */
.slot__archive-size {
    font-size: 13px;
    color: var(--text-muted);
    direction: ltr;
}

/* The name can be long and arrives from the uploaded file, so it is allowed to
   wrap rather than push the remove button out of the slot. */
.slot--cbct .slot__label {
    word-break: break-all;
    line-height: 1.4;
}


/* =============================================================================
   STL models — step 5

   The same slot as everywhere else in the wizard, because it is the same
   action. A mesh has no thumbnail, so a filled slot shows a file mark, the size
   and the name underneath rather than a picture.
   ============================================================================= */

.slot--mesh .slot__drop { cursor: pointer; }

/* The scanner names the file, so it can be long and must be allowed to wrap
   rather than push the slot out of its column. */
.slot__filename {
    margin: 0;
    font-size: 12px;
    color: var(--text-muted);
    word-break: break-all;
    line-height: 1.4;
    direction: ltr;
    text-align: start;
}

.slot__filename:empty { display: none; }


/* =============================================================================
   Review — step 6

   A read-only page, so nothing here is interactive. The one thing that matters
   is that the outstanding list is easy to scan: a doctor who cannot submit
   should find the reason in a glance, not read a paragraph.
   ============================================================================= */

.review-blockers {
    margin: var(--sp-3) 0 0;
    padding-inline-start: var(--sp-5);
    color: var(--danger);
}

.review-blockers li {
    margin-block-end: var(--sp-1);
    font-size: 14px;
}

.review-group {
    margin-block: var(--sp-4) var(--sp-2);
    font-size: 14px;
    color: var(--text-muted);
}

.review-thumbs {
    display: grid;
    gap: var(--sp-3);
    grid-template-columns: repeat(auto-fill, minmax(100px, 120px));
    justify-content: start;
}

.review-thumb { margin: 0; }

.review-thumb img {
    inline-size: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
}

.review-thumb figcaption {
    margin-block-start: var(--sp-1);
    font-size: 12px;
    color: var(--text-muted);
}

.review-list {
    margin: 0 0 var(--sp-4);
}

/* Label and value on one line at desk width, stacked on a phone, without a
   table — a table would carry column rules this page does not need. */
.review-row {
    display: grid;
    grid-template-columns: minmax(180px, 30%) 1fr;
    gap: var(--sp-2) var(--sp-4);
    padding-block: var(--sp-2);
    border-block-end: 1px solid var(--border);
}

.review-row:last-child { border-block-end: none; }

.review-row dt {
    font-size: 14px;
    color: var(--text-muted);
}

.review-row dd {
    margin: 0;
    font-size: 14px;
}

.review-note {
    display: block;
    margin-block-start: var(--sp-1);
    font-size: 13px;
    color: var(--text-muted);
}

/* Tooth numbers and file names read left to right in both languages. */
.review-teeth,
.review-filename {
    direction: ltr;
    text-align: start;
    word-break: break-all;
}

@media (max-width: 560px) {
    .review-row { grid-template-columns: 1fr; gap: var(--sp-1); }
}


/* =============================================================================
   Case page

   Two columns at desk width, one on a phone. The stage track is the only piece
   with real colour: a doctor opening a case wants to know where it has got to
   before anything else, and colour is how that answer arrives fastest.
   ============================================================================= */

.case-head {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    margin-block-end: var(--sp-4);
    padding: var(--sp-3) var(--sp-4);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.case-head__portrait {
    inline-size: 36px;
    block-size: 36px;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    overflow: hidden;
    background: var(--surface-alt);
    border: 1px solid var(--border);
}

.case-head__portrait img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
}

.case-head__initial {
    font-family: var(--font-display);
    font-size: 15px;
    color: var(--text-muted);
}

.case-head__main { flex: 1; min-inline-size: 0; }

.case-head__title {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    flex-wrap: wrap;
}

.case-head__title h1 { margin: 0; }

.case-head__meta {
    margin: var(--sp-1) 0 0;
    font-size: 14px;
    color: var(--text-muted);
}

/* A case number is an identifier, not prose: it reads left to right in both
   languages and is the thing a doctor reads out on the phone. */
.case-head__number {
    direction: ltr;
    display: inline-block;
    font-variant-numeric: tabular-nums;
    color: var(--text);
}

.case-star {
    display: inline-flex;
    padding: var(--sp-1);
    border: none;
    background: none;
    color: var(--text-faint);
    cursor: pointer;
    transition: color 0.15s;
}

.case-star:hover { color: var(--text-muted); }

.case-star.is-on {
    color: var(--accent);
    fill: currentColor;
}

.case-star[disabled] { opacity: 0.5; cursor: default; }

/* -----------------------------------------------------------------------------
   Layout
   -------------------------------------------------------------------------- */

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

.case-main > .card,
.case-side > .card { margin-block-end: var(--sp-4); }

@media (max-width: 860px) {
    .case-layout { grid-template-columns: 1fr; }
}

/* -----------------------------------------------------------------------------
   Stage track
   -------------------------------------------------------------------------- */

.stage-track {
    display: flex;
    margin: 0;
    padding: 0;
    list-style: none;
}

.stage {
    flex: 1;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--sp-2);
    text-align: center;
}

/* The connecting line is drawn from each stage back to the one before, so it
   never overhangs either end of the track. */
.stage::before {
    content: '';
    position: absolute;
    inset-block-start: 7px;
    inset-inline-end: 50%;
    inline-size: 100%;
    block-size: 2px;
    background: var(--border);
}

.stage:first-child::before { display: none; }

.stage--done::before { background: var(--accent); }

.stage__dot {
    position: relative;
    inline-size: 16px;
    block-size: 16px;
    border-radius: 50%;
    border: 2px solid var(--border);
    background: var(--surface);
}

.stage--done .stage__dot {
    border-color: var(--accent);
    background: var(--accent);
}

.stage--current .stage__dot {
    border-color: var(--accent);
    background: var(--surface);
}

.stage__name {
    font-size: 12px;
    color: var(--text-muted);
    line-height: 1.3;
}

.stage--done .stage__name,
.stage--current .stage__name { color: var(--text); }

.stage--current .stage__name { font-weight: 600; }

/* -----------------------------------------------------------------------------
   Collapsible sections
   -------------------------------------------------------------------------- */

.case-section > summary {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    font-family: var(--font-display);
    font-size: 16px;
    font-weight: 600;
    color: var(--ink);
    cursor: pointer;
    list-style: none;
}

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

/* A caret drawn in the text direction, so it points inward on both sides. */
.case-section > summary::after {
    content: '';
    inline-size: 6px;
    block-size: 6px;
    margin-inline-start: auto;
    border-inline-end: 2px solid var(--text-faint);
    border-block-end: 2px solid var(--text-faint);
    transform: rotate(45deg);
    transition: transform 0.15s;
}

.case-section[open] > summary::after { transform: rotate(-135deg); }

.case-section[open] > summary { margin-block-end: var(--sp-3); }

/* -----------------------------------------------------------------------------
   Events
   -------------------------------------------------------------------------- */

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

.event {
    display: grid;
    grid-template-columns: minmax(140px, auto) 1fr auto;
    gap: var(--sp-2) var(--sp-3);
    padding-block: var(--sp-2);
    border-block-end: 1px solid var(--border);
    font-size: 14px;
}

.event:last-child { border-block-end: none; }

/* Timestamps are data, not prose. */
.event__when {
    direction: ltr;
    text-align: start;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
    font-size: 13px;
}

.event__who {
    color: var(--text-muted);
    font-size: 13px;
}

@media (max-width: 560px) {
    .event { grid-template-columns: 1fr; gap: var(--sp-1); }
    .stage__name { font-size: 11px; }
}


/* =============================================================================
   Design versions

   The version waiting for the doctor is the only one that looks live. Older
   versions stay in the list because the comments made against them belong
   there, but nothing about them invites a click.
   ============================================================================= */

.design-list {
    margin: 0 0 var(--sp-4);
    padding: 0;
    list-style: none;
}

.design {
    padding: var(--sp-3) 0;
    border-block-end: 1px solid var(--border);
}

.design:last-child { border-block-end: none; }

/* A superseded version is history, not an option. */
.design:not(.design--live) .design__version { color: var(--text-muted); }

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

.design__version {
    font-family: var(--font-display);
    font-weight: 600;
    direction: ltr;
}

.design__meta {
    margin: var(--sp-1) 0 0;
    font-size: 13px;
    color: var(--text-muted);
}

/* Timestamps are data. */
.design__when {
    direction: ltr;
    display: inline-block;
    font-variant-numeric: tabular-nums;
}

.design__actions {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-3);
    flex-wrap: wrap;
    margin-block-start: var(--sp-3);
}

/* Requesting changes is folded away: approving is the common answer, and two
   equally weighted buttons would make the doctor choose before reading. */
.design__revision summary,
.design__release summary {
    display: inline-block;
    font-size: 14px;
    color: var(--text-muted);
    cursor: pointer;
    padding-block: var(--sp-2);
}

.design__revision summary:hover,
.design__release summary:hover { color: var(--ink); }

.design__revision[open],
.design__release[open] { inline-size: 100%; }

.design__revision textarea { margin-block-end: var(--sp-3); }

.design__release {
    padding-block-start: var(--sp-3);
    border-block-start: 1px solid var(--border);
}


/* =============================================================================
   Case list

   One tab carries colour and it is the one that asks something of the reader.
   Everything else on this screen is a place to look, not a thing to do.
   ============================================================================= */

.case-tabs {
    display: flex;
    gap: var(--sp-1);
    flex-wrap: wrap;
    margin-block-end: var(--sp-4);
    border-block-end: 1px solid var(--border);
}

.case-tab {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-2) var(--sp-3);
    color: var(--text-muted);
    text-decoration: none;
    font-size: 14px;
    border-block-end: 2px solid transparent;
    margin-block-end: -1px;
}

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

.case-tab.is-active {
    color: var(--ink);
    font-weight: 600;
    border-block-end-color: var(--ink);
}

.case-tab__count {
    display: inline-block;
    min-inline-size: 20px;
    padding-inline: 6px;
    border-radius: 10px;
    background: var(--surface-alt);
    color: var(--text-muted);
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    text-align: center;
}

/* The only coloured tab, and only while it holds something. */
.case-tab--attention .case-tab__count {
    background: var(--accent);
    color: var(--on-dark);
}

.case-tab--attention.is-active { border-block-end-color: var(--accent); }

.case-search {
    display: flex;
    gap: var(--sp-2);
    margin-block-end: var(--sp-4);
    flex-wrap: wrap;
}

.case-search .input { flex: 1; min-inline-size: 200px; max-inline-size: 420px; }

.case-col-star {
    inline-size: 36px;
    text-align: center;
}

.case-row__sub {
    display: block;
    font-size: 12px;
    color: var(--text-muted);
}

/* Case numbers and dates are identifiers, not prose. */
.case-row__number {
    direction: ltr;
    text-align: start;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.pager {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-3);
    margin-block-start: var(--sp-4);
}

.pager__state {
    font-size: 14px;
    color: var(--text-muted);
}

/* Visible to a screen reader, invisible on screen — for a column whose heading
   is an icon. */
.sr-only {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}


/* =============================================================================
   Manufacturing and shipment

   The one rule worth stating: a confirmed fact and an expected date do not look
   the same. A forecast presented in the same weight as a fact is how a clinic
   ends up telling a patient their aligners arrived.
   ============================================================================= */

.ship-list {
    margin: 0 0 var(--sp-4);
    padding: 0;
    list-style: none;
}

.ship {
    padding-block: var(--sp-3);
    border-block-end: 1px solid var(--border);
}

.ship:last-child { border-block-end: none; }

.ship__head {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    flex-wrap: wrap;
    margin-block-end: var(--sp-2);
}

.ship__phase {
    font-family: var(--font-display);
    font-weight: 600;
}

/* Something that happened. */
.ship__fact {
    color: var(--ink);
    direction: ltr;
    text-align: start;
    font-variant-numeric: tabular-nums;
}

/* Something that has not happened yet, and must not read as though it has. */
.ship__forecast {
    color: var(--text-muted);
    direction: ltr;
    text-align: start;
    font-variant-numeric: tabular-nums;
}

.ship__actions {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-3);
    flex-wrap: wrap;
    margin-block-start: var(--sp-3);
}

.ship__actions summary,
.ship__new summary {
    display: inline-block;
    font-size: 14px;
    color: var(--text-muted);
    cursor: pointer;
    padding-block: var(--sp-2);
}

.ship__actions summary:hover,
.ship__new summary:hover { color: var(--ink); }

.ship__actions details[open] { inline-size: 100%; }

.ship__new {
    padding-block-start: var(--sp-3);
    border-block-start: 1px solid var(--border);
}

/* Completing a case is not the common action on this panel, so it does not
   look like one. */
.ship__complete {
    margin-block-start: var(--sp-3);
    padding-block-start: var(--sp-3);
    border-block-start: 1px solid var(--border);
}


/* =============================================================================
   Case page — action card, index and panels

   The action card is the one coloured thing below the stage track, because it
   is the one thing on the page that asks the reader to do something. The
   index is a short list of places to look; the panels are where the looking
   happens.
   ============================================================================= */

.case-head__name {
    margin: 0;
    font-family: var(--font-display);
    font-size: 17px;
    font-weight: 600;
    color: var(--ink);
}

.case-head__name .case-head__number {
    margin-inline-start: var(--sp-2);
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 400;
    color: var(--text-muted);
}

.case-head .case-head__meta { margin-block-start: 2px; font-size: 13px; }

.case-layout > .card { margin-block-end: 0; }

.case-action {
    margin-block: var(--sp-4);
    padding: var(--sp-4);
    border: 1px solid var(--accent-border);
    border-radius: var(--radius);
    background: var(--accent-soft);
}

.case-action__label {
    margin: 0 0 var(--sp-2);
    font-size: 12px;
    color: var(--text-muted);
}

.case-action__row {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    flex-wrap: wrap;
}

.case-action__row form { margin: 0; }

.case-action__text { flex: 1; min-inline-size: 200px; }

.case-action__title {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--ink);
}

.case-action__sub {
    margin: var(--sp-1) 0 0;
    font-size: 13px;
    color: var(--text-muted);
}

/* The second choice on the card is folded away. Approving is the usual answer;
   two buttons of equal weight would make the reader decide before reading. */
.case-action__more {
    margin-block-start: var(--sp-3);
    padding-block-start: var(--sp-3);
    border-block-start: 1px solid var(--accent-border);
}

.case-action__more summary {
    font-size: 13px;
    color: var(--text-muted);
    cursor: pointer;
}

.case-action__more form {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--sp-2);
    margin-block-start: var(--sp-3);
}

.case-action__more textarea { inline-size: 100%; }

/* -----------------------------------------------------------------------------
   Case file index
   -------------------------------------------------------------------------- */

.case-index {
    margin: 0 0 var(--sp-3);
    padding: 0;
    list-style: none;
}

.case-index button {
    display: flex;
    align-items: center;
    justify-content: space-between;
    inline-size: 100%;
    padding: var(--sp-2) 0;
    border: none;
    border-block-end: 1px solid var(--border);
    background: none;
    color: var(--text);
    font: inherit;
    font-size: 14px;
    text-align: start;
    cursor: pointer;
}

.case-index li:last-child button { border-block-end: none; }

.case-index button:hover { color: var(--ink); }

.case-index__count {
    min-inline-size: 22px;
    padding-inline: 6px;
    border-radius: 10px;
    background: var(--surface-alt);
    color: var(--text-muted);
    font-size: 12px;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.case-facts {
    margin: 0;
    padding-block-start: var(--sp-3);
    border-block-start: 1px solid var(--border);
}

button.link-action {
    padding: 0;
    border: none;
    background: none;
    font: inherit;
    cursor: pointer;
}

/* -----------------------------------------------------------------------------
   Panels
   -------------------------------------------------------------------------- */

.panel-host[hidden] { display: none; }

.panel-host {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: var(--sp-5) var(--sp-4);
    overflow-y: auto;
}

.panel-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(11, 37, 69, 0.45);
}

.panel {
    position: relative;
    inline-size: 100%;
    max-inline-size: 760px;
    border-radius: var(--radius);
    background: var(--surface);
    border: 1px solid var(--border);
}

.panel__head {
    position: sticky;
    inset-block-start: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
    padding: var(--sp-3) var(--sp-4);
    border-block-end: 1px solid var(--border);
    background: var(--surface);
    border-start-start-radius: var(--radius);
    border-start-end-radius: var(--radius);
}

.panel__head h2 { margin: 0; font-size: 17px; }

.panel__close {
    display: inline-flex;
    padding: var(--sp-2);
    border: none;
    border-radius: var(--radius);
    background: none;
    color: var(--text-muted);
    cursor: pointer;
}

.panel__close:hover { background: var(--surface-alt); color: var(--ink); }

.panel__body { padding: var(--sp-4); }

.panel__body section > .review-group:first-child { margin-block-start: 0; }

.panel__body form.design__release,
.panel__body form.ship__new,
.panel__body form.ship__complete {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--sp-2);
    margin-block-start: var(--sp-4);
    padding-block-start: var(--sp-4);
    border-block-start: 1px solid var(--border);
}

.panel__body form .form-grid { inline-size: 100%; }

@media (max-width: 560px) {
    .case-head { flex-wrap: wrap; }
    .panel-host { padding: 0; }
    .panel { border-radius: 0; min-block-size: 100%; }
}


/* =============================================================================
   Messages and patient links
   ============================================================================= */

/* Unread is the only reason this counter should draw the eye. */
.case-index__count--new {
    background: var(--accent);
    color: var(--on-dark);
}

.thread {
    margin: 0 0 var(--sp-4);
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
}

.thread__msg {
    max-inline-size: 85%;
    padding: var(--sp-3);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
}

/* The reader's own messages sit on their side of the thread, so a glance says
   who said what without reading the names. */
.thread__msg--mine {
    align-self: flex-end;
    background: var(--surface-alt);
}

.thread__msg--new { border-color: var(--accent-border); }

.thread__who {
    margin: 0 0 var(--sp-1);
    font-size: 13px;
    font-weight: 600;
    color: var(--ink);
}

.thread__when {
    margin-inline-start: var(--sp-2);
    font-weight: 400;
    color: var(--text-muted);
    direction: ltr;
    display: inline-block;
    font-variant-numeric: tabular-nums;
}

.thread__body {
    margin: 0;
    font-size: 14px;
    line-height: 1.6;
    white-space: normal;
    word-break: break-word;
}

.thread__form {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--sp-2);
    padding-block-start: var(--sp-4);
    border-block-start: 1px solid var(--border);
}

.thread__form textarea { inline-size: 100%; }

.share-controls {
    display: flex;
    gap: var(--sp-3);
    margin-block-start: var(--sp-1);
}

.share-controls form { margin: 0; }

.link-action--danger { color: var(--danger); }


/* The revision choice sits in the row as a button. When opened, its note box
   takes the full width below the row rather than squeezing beside Approve. */
.case-action__revise > summary {
    list-style: none;
    cursor: pointer;
}

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

.case-action__revise[open] {
    flex-basis: 100%;
    order: 10;
}

.case-action__revise[open] > summary { margin-block-end: var(--sp-3); }

.case-action__revise form {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--sp-2);
}

.case-action__revise textarea { inline-size: 100%; }


/* The doctor's request for changes. It is the brief for the next version, so
   it sits above the designer's action rather than inside a panel, and it reads
   as a quotation — these are the doctor's words, not the system's. */
.revision-brief {
    margin-block-end: var(--sp-4);
    padding-block-end: var(--sp-4);
    border-block-end: 1px solid var(--accent-border);
}

.revision-brief__title {
    margin: 0 0 var(--sp-2);
    font-size: 14px;
    font-weight: 600;
    color: var(--ink);
}

.revision-brief__note {
    margin: 0 0 var(--sp-2);
    padding: var(--sp-3);
    border-inline-start: 3px solid var(--accent);
    border-radius: var(--radius);
    background: var(--surface);
    font-size: 14px;
    line-height: 1.6;
    color: var(--text);
}

.revision-brief__note footer {
    margin-block-start: var(--sp-2);
    font-size: 12px;
    color: var(--text-muted);
}

.design .revision-brief__note { margin-block-start: var(--sp-2); }


/* Plans: every version, always reachable. One row each, the open button at
   the end of the row where the eye finishes reading it. */
.plans { margin-block-end: var(--sp-4); }

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

.plans__item {
    padding-block: var(--sp-3);
    border-block-end: 1px solid var(--border);
}

.plans__item:last-child { border-block-end: none; padding-block-end: 0; }

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

.plans__meta {
    flex: 1;
    min-inline-size: 180px;
    font-size: 13px;
    color: var(--text-muted);
}

.plans__open { white-space: nowrap; }

/* =============================================================================
   2026-09 refresh — application shell and refined components

   Loaded last so it refines what is above without renaming it: every view
   written against the earlier classes keeps working, and reads better.
   ============================================================================= */

:root {
    --page:          #F4F6F9;
    --border:        #E3E8EF;
    --border-strong: #CDD5E0;
    --surface-hover: #F8FAFC;
    --warn:          #9A5B00;
    --warn-soft:     #FFF4E0;
    --radius:        10px;
    --radius-lg:     14px;
    --shadow-sm:     0 1px 2px rgba(11, 37, 69, .05), 0 1px 1px rgba(11, 37, 69, .03);
    --shadow-md:     0 6px 20px -6px rgba(11, 37, 69, .14), 0 2px 6px rgba(11, 37, 69, .05);
    --shadow-lg:     0 24px 48px -12px rgba(11, 37, 69, .28);
    --sidebar-w:     248px;
    --appbar-h:      64px;
    --ease:          cubic-bezier(.2, .7, .2, 1);
}

body { font-size: 14.5px; letter-spacing: -0.005em; }
h1 { font-size: 26px; letter-spacing: -0.02em; }
h2 { font-size: 17px; letter-spacing: -0.01em; }
::selection { background: var(--accent-soft); color: var(--ink); }

.skip-link {
    position: absolute; inset-inline-start: 12px; top: -48px; z-index: 200;
    padding: 8px 14px; border-radius: var(--radius); background: var(--ink); color: #fff;
}
.skip-link:focus { top: 12px; }

/* ---------- shell ---------- */

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

.sidebar {
    position: sticky; top: 0; flex: 0 0 var(--sidebar-w); height: 100vh;
    display: flex; flex-direction: column;
    background: linear-gradient(180deg, #0B2545 0%, #0A2140 100%);
    color: var(--on-dark-muted); padding: 18px 14px; z-index: 60;
}
.sidebar__brand {
    display: flex; align-items: center; gap: 10px; padding: 6px 10px 22px;
    color: #fff; text-decoration: none;
    font-family: var(--font-display); font-size: 18px; font-weight: 700; letter-spacing: -0.02em;
}
.sidebar__brand:hover { color: #fff; }
.brand-mark {
    display: inline-flex; align-items: center; justify-content: center;
    inline-size: 34px; block-size: 34px; border-radius: 10px;
    background: var(--accent); color: #fff; box-shadow: 0 6px 16px -6px rgba(194, 87, 26, .7);
}
.sidebar__nav { display: flex; flex-direction: column; gap: 2px; flex: 1; overflow-y: auto; }
.sidebar__group {
    margin: 22px 10px 8px; font-size: 11px; font-weight: 600;
    letter-spacing: .08em; text-transform: uppercase; color: rgba(185, 198, 214, .6);
}
.side-link {
    position: relative; display: flex; align-items: center; gap: 12px;
    padding: 9px 12px; border-radius: 9px;
    color: var(--on-dark-muted); text-decoration: none; font-weight: 500;
    transition: background .15s var(--ease), color .15s var(--ease);
}
.side-link:hover { background: rgba(255, 255, 255, .06); color: #fff; }
.side-link.is-active { background: rgba(255, 255, 255, .1); color: #fff; }
.side-link.is-active::before {
    content: ''; position: absolute; inset-inline-start: -14px; top: 8px; bottom: 8px;
    inline-size: 3px; border-radius: 0 3px 3px 0; background: var(--accent);
}
[dir="rtl"] .side-link.is-active::before { border-radius: 3px 0 0 3px; }
.side-link svg { flex: 0 0 auto; opacity: .9; }
.side-link__badge {
    margin-inline-start: auto; min-inline-size: 20px; padding: 1px 6px; border-radius: 10px;
    background: var(--accent); color: #fff; font-size: 11px; font-weight: 600; text-align: center;
}
.sidebar__foot { padding: 12px 10px 4px; border-top: 1px solid rgba(255, 255, 255, .08); }
.sidebar__role { font-size: 12px; color: rgba(185, 198, 214, .7); }

.shell__main { flex: 1; min-inline-size: 0; display: flex; flex-direction: column; }

.appbar {
    position: sticky; top: 0; z-index: 50; height: var(--appbar-h);
    display: flex; align-items: center; gap: 16px; padding-inline: 28px;
    background: rgba(244, 246, 249, .82); backdrop-filter: saturate(1.4) blur(12px);
    -webkit-backdrop-filter: saturate(1.4) blur(12px);
    border-bottom: 1px solid var(--border);
}
.appbar__menu { display: none; }
.appbar__tools { display: flex; align-items: center; gap: 8px; margin-inline-start: auto; }

.page { max-width: 1320px; width: 100%; padding: 28px; outline: none; }

/* ---------- search ---------- */

.search {
    position: relative; flex: 1; max-inline-size: 460px;
    display: flex; align-items: center; gap: 8px; height: 40px; padding-inline: 12px;
    background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
    color: var(--text-faint); transition: border-color .15s, box-shadow .15s;
}
.search:focus-within { border-color: var(--ink); box-shadow: 0 0 0 4px rgba(11, 37, 69, .06); }
.search__input {
    flex: 1; min-inline-size: 0; height: 100%; border: 0; outline: 0; background: transparent;
    font: inherit; color: var(--text);
}
.search__input::-webkit-search-cancel-button { display: none; }
.search__kbd {
    font: 600 11px var(--font-body); color: var(--text-faint);
    border: 1px solid var(--border); border-radius: 5px; padding: 1px 6px; background: var(--page);
}
.search__results {
    position: absolute; top: calc(100% + 6px); inset-inline: 0; z-index: 70; padding: 6px;
    background: var(--surface); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow-lg);
}
.search__row { display: flex; flex-direction: column; padding: 8px 10px; border-radius: 8px; text-decoration: none; }
.search__row:hover, .search__row:focus { background: var(--page); outline: none; }
.search__name { font-weight: 600; color: var(--text); }
.search__meta { font-size: 12px; color: var(--text-muted); }
.search__empty { margin: 0; padding: 10px; font-size: 13px; color: var(--text-muted); }

/* ---------- buttons ---------- */

.btn { height: 40px; padding-inline: 16px; font-size: 14px; font-weight: 600; border-radius: 10px;
       transition: background .15s var(--ease), border-color .15s, box-shadow .15s, transform .05s; }
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn--sm { height: 32px; padding-inline: 12px; font-size: 13px; border-radius: 8px; }
.btn--lg { height: 46px; padding-inline: 20px; font-size: 15px; }
.btn--icon { inline-size: 40px; padding: 0; position: relative; }
.btn--accent { box-shadow: 0 1px 0 rgba(255, 255, 255, .15) inset, 0 4px 12px -4px rgba(194, 87, 26, .55); }
.btn--ghost { box-shadow: var(--shadow-sm); }
.btn--ghost:hover { border-color: var(--border-strong); background: var(--surface-hover); }
.btn--danger { background: var(--danger); color: #fff; }
.btn--danger:hover { filter: brightness(1.08); color: #fff; }
summary.btn { list-style: none; }
summary.btn::-webkit-details-marker { display: none; }

/* ---------- cards, forms, tables ---------- */

.card { border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.card--flush { padding: 0; overflow: hidden; }
.card--spaced { margin-top: var(--sp-4); }
.card__head {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 16px 20px; border-bottom: 1px solid var(--border);
}
.input { height: 42px; border-radius: 10px; border-color: var(--border-strong); transition: border-color .15s, box-shadow .15s; }
.input:focus { border-color: var(--ink); box-shadow: 0 0 0 4px rgba(11, 37, 69, .07); outline: none; }
.input--area { height: auto; padding-block: 10px; }
.table th { font-size: 11.5px; letter-spacing: .06em; background: #FAFBFC; }
.table td { vertical-align: middle; }
.case-row__name { font-weight: 600; color: var(--text); text-decoration: none; }
.case-row__name:hover { color: var(--accent); }
.tag {
    display: inline-block; margin-inline-start: 6px; padding: 1px 7px; border-radius: 6px;
    background: var(--info-soft); color: var(--info); font-size: 11px; font-weight: 600; vertical-align: 1px;
}
.alert--danger { background: var(--danger-soft); border-color: var(--danger); color: var(--danger); }

/* ---------- status pills ---------- */

.status-pill {
    display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
    padding: 3px 10px 3px 8px; border-radius: 999px; font-size: 12px; font-weight: 600;
    background: var(--surface-alt); color: var(--text-muted);
}
.status-pill::before { content: ''; inline-size: 6px; block-size: 6px; border-radius: 50%; background: currentColor; }
.status-pill--ok      { background: var(--success-soft); color: var(--success); }
.status-pill--warn    { background: var(--warn-soft);    color: var(--warn); }
.status-pill--danger  { background: var(--danger-soft);  color: var(--danger); }
.status-pill--info    { background: var(--info-soft);    color: var(--info); }
.status-pill--neutral { background: var(--surface-alt);  color: var(--text-muted); }

/* ---------- menus ---------- */

.menu { position: relative; }
.menu > summary { list-style: none; cursor: pointer; }
.menu > summary::-webkit-details-marker { display: none; }
.menu__list {
    position: absolute; top: calc(100% + 8px); inset-inline-end: 0; z-index: 80;
    min-inline-size: 220px; padding: 6px;
    background: var(--surface); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow-lg);
    animation: menu-in .14s var(--ease);
}
.menu__list--form { min-inline-size: 280px; padding: 12px; display: grid; gap: 8px; }
.menu__list--form form { display: grid; gap: 8px; }
@keyframes menu-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.menu__item {
    display: flex; align-items: center; inline-size: 100%; padding: 9px 12px; border: 0; border-radius: 8px;
    background: transparent; font: inherit; font-weight: 500; color: var(--text); text-align: start;
    text-decoration: none; cursor: pointer;
}
.menu__item:hover { background: var(--page); color: var(--text); }
.menu__item--danger { color: var(--danger); }
.menu__item--danger:hover { background: var(--danger-soft); color: var(--danger); }
.menu__who { display: flex; flex-direction: column; padding: 8px 12px 10px; margin-bottom: 4px; border-bottom: 1px solid var(--border); }
.menu__who span { font-size: 12px; color: var(--text-muted); }

.account { display: flex; align-items: center; gap: 10px; padding: 4px 8px 4px 4px; border-radius: 999px; color: var(--text); }
.account:hover { background: var(--surface); }
.account__name { font-weight: 600; font-size: 13.5px; white-space: nowrap; }
.avatar { background: var(--ink); color: #fff; }
.avatar--soft {
    inline-size: 36px; block-size: 36px; flex: 0 0 auto; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--surface-alt); color: var(--ink); font-family: var(--font-display); font-weight: 600;
}

.lang-switch .btn { box-shadow: none; }

/* ---------- bell ---------- */

.bell__count {
    position: absolute; top: 4px; inset-inline-end: 4px; min-inline-size: 17px; block-size: 17px;
    padding: 0 4px; border-radius: 9px; border: 2px solid var(--page);
    background: var(--accent); color: #fff; font-size: 10px; font-weight: 700; line-height: 13px; text-align: center;
}
.bell__list { inline-size: 360px; max-inline-size: calc(100vw - 24px); padding: 0; overflow: hidden; }
.bell__head { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; border-bottom: 1px solid var(--border); }
.bell__empty { margin: 0; padding: 24px 14px; text-align: center; color: var(--text-muted); font-size: 13px; }
.bell__all { display: block; padding: 11px; text-align: center; font-size: 13px; font-weight: 600; border-top: 1px solid var(--border); text-decoration: none; }

.notify-list { list-style: none; margin: 0; padding: 0; }
.notify-list li + li { border-top: 1px solid var(--border); }
.notify-item { display: flex; align-items: flex-start; gap: 12px; padding: 12px 16px; text-decoration: none; color: var(--text); }
.notify-item:hover { background: var(--surface-hover); color: var(--text); }
.notify-item__dot { flex: 0 0 8px; block-size: 8px; margin-top: 7px; border-radius: 50%; background: transparent; }
.notify-item.is-unread .notify-item__dot { background: var(--accent); }
.notify-item.is-unread .notify-item__title { font-weight: 600; }
.notify-item__body { flex: 1; display: flex; flex-direction: column; min-inline-size: 0; }
.notify-item__meta, .notify-item__when { font-size: 12px; color: var(--text-muted); }
.notify-item__when { white-space: nowrap; }

/* ---------- toasts ---------- */

.toasts {
    position: fixed; bottom: 24px; inset-inline-end: 24px; z-index: 300;
    display: flex; flex-direction: column; gap: 10px; max-inline-size: min(420px, calc(100vw - 32px));
}
.toast {
    display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px 12px 16px;
    background: var(--ink); color: #fff; border-radius: 12px; box-shadow: var(--shadow-lg);
    border-inline-start: 4px solid var(--info-soft); animation: toast-in .25s var(--ease);
    transition: opacity .25s, transform .25s;
}
.toast--success { border-inline-start-color: #3FBF8C; }
.toast--error   { background: #7A1C16; border-inline-start-color: #F6B5A4; }
.toast__text { flex: 1; font-size: 14px; line-height: 1.5; }
.toast__close { border: 0; background: transparent; color: rgba(255, 255, 255, .7); font-size: 20px; line-height: 1; cursor: pointer; padding: 0 2px; }
.toast__close:hover { color: #fff; }
.toast.is-leaving { opacity: 0; transform: translateY(8px); }
@keyframes toast-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* ---------- empty states ---------- */

.empty { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 48px 24px; text-align: center; color: var(--text-faint); }
.empty__title { margin: 8px 0 0; font-weight: 600; color: var(--text); }
.empty__sub { margin: 0; font-size: 13px; color: var(--text-muted); max-inline-size: 360px; }

/* ---------- dashboard ---------- */

.hero {
    display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap;
    margin-bottom: 22px;
}
.hero__eyebrow { margin: 0 0 4px; font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-faint); }
.hero__title { font-size: 30px; }
.hero__sub { margin: 6px 0 0; color: var(--text-muted); }

.pipeline {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); gap: 10px; margin-bottom: 22px;
}
.pipeline__item {
    position: relative; display: flex; flex-direction: column; gap: 2px; padding: 14px 16px;
    background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
    box-shadow: var(--shadow-sm); text-decoration: none; color: var(--text); overflow: hidden;
    transition: transform .15s var(--ease), box-shadow .15s;
}
.pipeline__item:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); color: var(--text); }
.pipeline__item::after { content: ''; position: absolute; inset-inline: 0; bottom: 0; block-size: 3px; background: var(--border); }
.pipeline__item--warn.has-cases::after   { background: var(--accent); }
.pipeline__item--info.has-cases::after   { background: #3E7CC6; }
.pipeline__item--ok.has-cases::after     { background: var(--success); }
.pipeline__item--neutral.has-cases::after{ background: var(--text-faint); }
.pipeline__item--warn.has-cases { background: var(--accent-soft); border-color: var(--accent-border); }
.pipeline__value { font-family: var(--font-display); font-size: 26px; font-weight: 600; line-height: 1.1; }
.pipeline__label { font-size: 12.5px; color: var(--text-muted); }

.dash-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 20px; align-items: start; }

.task-list { list-style: none; margin: 0; padding: 0; }
.task { display: flex; align-items: center; gap: 14px; padding: 12px 20px; }
.task + .task { border-top: 1px solid var(--border); }
.task:hover { background: var(--surface-hover); }
.task__main { flex: 1; min-inline-size: 0; display: flex; flex-direction: column; }
.task__name { font-weight: 600; color: var(--text); text-decoration: none; }
.task__name:hover { color: var(--accent); }
.task__meta { font-size: 12.5px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.feed { list-style: none; margin: 0; padding: 12px 20px 16px; }
.feed__item { position: relative; display: flex; gap: 12px; padding: 8px 0; }
.feed__item:not(:last-child)::before {
    content: ''; position: absolute; inset-inline-start: 4px; top: 22px; bottom: -8px; inline-size: 1px; background: var(--border);
}
.feed__dot { flex: 0 0 9px; block-size: 9px; margin-top: 6px; border-radius: 50%; background: var(--surface); border: 2px solid var(--ink); }
.feed__body { display: flex; flex-direction: column; min-inline-size: 0; }
.feed__body a { font-weight: 600; color: var(--text); text-decoration: none; }
.feed__body a:hover { color: var(--accent); }
.feed__meta { font-size: 12px; color: var(--text-muted); }

/* ---------- case page ---------- */

.case-head { padding: 16px 18px; border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); gap: 14px; }
.case-head__portrait { inline-size: 48px; block-size: 48px; }
.case-head__name { font-family: var(--font-display); font-size: 19px; font-weight: 600; }
.case-action { border-radius: var(--radius-lg); box-shadow: var(--shadow-md); }
.notice {
    display: flex; flex-wrap: wrap; gap: 6px 16px; margin-bottom: 16px; padding: 10px 14px;
    background: var(--info-soft); color: var(--info); border-radius: 10px; font-size: 13.5px;
}
.notice a { font-weight: 600; }
.inline-form { display: inline; }
.inline-form button { vertical-align: baseline; }

.link-list { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; }
.link-list__item { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 10px; }
.link-list__item.is-dead { opacity: .65; }

.new-link { margin-bottom: 18px; padding: 14px; border-radius: 12px; background: var(--success-soft); border: 1px solid #BFDCCF; }
.new-link__title { margin: 0 0 8px; font-weight: 600; color: var(--success); }
.new-link__row { display: flex; gap: 8px; }
.new-link__row .input { direction: ltr; font-size: 13px; }

.panel { box-shadow: var(--shadow-lg); }

.auth__forgot { text-align: end; margin-top: 6px; }

/* ---------- sign-in ---------- */

.auth-body .auth {
    background:
        radial-gradient(1200px 600px at 110% -10%, rgba(194, 87, 26, .22), transparent 60%),
        radial-gradient(900px 500px at -10% 110%, rgba(62, 124, 198, .25), transparent 60%),
        linear-gradient(160deg, #0B2545, #081B34);
}
.auth__card { border-radius: 18px; box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .45); padding: 36px; }
.auth__brand .brand-mark { margin-inline-end: 2px; }

/* ---------- responsive ---------- */

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

@media (max-width: 900px) {
    .sidebar {
        position: fixed; inset-block: 0; inset-inline-start: 0; inline-size: 272px;
        transform: translateX(-100%); transition: transform .22s var(--ease); box-shadow: var(--shadow-lg);
    }
    [dir="rtl"] .sidebar { transform: translateX(100%); }
    .sidebar.is-open { transform: none; }
    .sidebar-scrim { position: fixed; inset: 0; z-index: 55; background: rgba(8, 20, 38, .45); }
    .appbar { padding-inline: 14px; gap: 10px; }
    .appbar__menu { display: inline-flex; }
    .account__name, .search__kbd { display: none; }
    .page { padding: 18px 14px; }
    .hero__title { font-size: 24px; }
}

@media (max-width: 560px) {
    .lang-switch { display: none; }
    .task { flex-wrap: wrap; padding: 12px 14px; }
    .task .status-pill { order: 3; }
    .task .btn { order: 4; margin-inline-start: auto; }
    .toasts { inset-inline: 16px; bottom: 16px; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; }
}