/* ==========================================================================
   TEO Express — design tokens and base styles.

   One stylesheet serves both Arabic (RTL) and English (LTR): every directional
   rule uses logical properties (margin-inline-start, inset-inline-end, …) so
   nothing needs mirroring per language.
   ========================================================================== */

:root {
    /* Surfaces and text — white background, dark readable text, light borders. */
    --c-bg:            #FFFFFF;
    --c-surface:       #FFFFFF;
    --c-surface-muted: #F7F8FA;
    --c-text:          #1F2330;
    --c-text-muted:    #5B6172;
    --c-border:        #E6E8EE;

    /* Brand, sampled from the logo. Used sparingly: primary actions, the
       active nav item, small accents. No heavy colour blocks. */
    --c-brand:         #7357A5;
    --c-brand-dark:    #5E4789;
    --c-brand-tint:    #F3F0F9;
    --c-accent:        #FACD15;

    /* Status colours. */
    --c-ok:            #15803D;
    --c-warn:          #B45309;
    --c-danger:        #B91C1C;

    /* Spacing scale. */
    --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:    8px;
    --radius-sm: 6px;

    --shadow: 0 1px 2px rgba(31, 35, 48, 0.06), 0 1px 3px rgba(31, 35, 48, 0.04);

    /* Arabic and Latin both render well in the system UI stack. */
    --font: system-ui, -apple-system, "Segoe UI", "Noto Naskh Arabic", "Tahoma", sans-serif;
    --font-mono: ui-monospace, "Cascadia Code", "Consolas", monospace;
}

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

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

body {
    margin: 0;
    background: var(--c-bg);
    color: var(--c-text);
    font-family: var(--font);
    font-size: 15px;
    line-height: 1.6;
}

h1, h2, h3 {
    line-height: 1.3;
    margin-block: 0 var(--s-3);
    font-weight: 600;
}

h1 { font-size: 1.5rem; }
h2 { font-size: 1.175rem; }
h3 { font-size: 1rem; }

p {
    margin-block: 0 var(--s-4);
}

a {
    color: var(--c-brand);
    text-underline-offset: 2px;
}

a:hover {
    color: var(--c-brand-dark);
}

/* Visible focus for keyboard users, on every interactive element. */
:focus-visible {
    outline: 2px solid var(--c-brand);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

code, pre {
    font-family: var(--font-mono);
    font-size: 0.875em;
}

code {
    background: var(--c-surface-muted);
    border: 1px solid var(--c-border);
    border-radius: 4px;
    padding: 0.1em 0.35em;
    /* Latin code inside an Arabic sentence must stay left-to-right. */
    direction: ltr;
    unicode-bidi: embed;
}

/* --- layout helpers ------------------------------------------------------- */

.wrap {
    max-width: 56rem;
    margin-inline: auto;
    padding-inline: var(--s-4);
    padding-block: var(--s-6);
}

.card {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
    padding: var(--s-5);
    box-shadow: var(--shadow);
}

.stack > * + * {
    margin-block-start: var(--s-4);
}

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

.btn {
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    padding: 0.5rem 1rem;
    border: 1px solid var(--c-border);
    border-radius: var(--radius-sm);
    background: var(--c-surface);
    color: var(--c-text);
    font: inherit;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
}

.btn:hover {
    background: var(--c-surface-muted);
    color: var(--c-text);
}

.btn--primary {
    background: var(--c-brand);
    border-color: var(--c-brand);
    color: #FFFFFF;
}

.btn--primary:hover {
    background: var(--c-brand-dark);
    border-color: var(--c-brand-dark);
    color: #FFFFFF;
}

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

.pill {
    display: inline-block;
    padding: 0.1rem 0.5rem;
    border-radius: 999px;
    font-size: 0.8125rem;
    font-weight: 600;
    border: 1px solid currentColor;
}

.pill--ok     { color: var(--c-ok); }
.pill--warn   { color: var(--c-warn); }

/* A heading between cards, for a page built out of several sections. */
.section-title {
    margin-block: var(--s-6) var(--s-3);
    font-size: 1.0625rem;
    font-weight: 600;
}

/* A plain list of statements, used where prose would be longer than the
   points it makes. */
.bullets {
    margin-block: var(--s-2);
    padding-inline-start: var(--s-5);
    line-height: 1.7;
}

.bullets li + li { margin-block-start: var(--s-1); }

/* A row that needs a second look before it is acted on. Tinted rather than
   coloured, so a table of them is still readable. */
.is-warn > td { background: #FFFBEB; }

/* --- the lesson stage ------------------------------------------------------
   Sized to be filmed: one step fills it, the type is large enough to read in
   a compressed video on a phone, and nothing moves except the progress bar.
   -------------------------------------------------------------------------- */

.stage {
    margin-block-end: var(--s-5);
    padding: var(--s-5);
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
    background: #FFF;
    box-shadow: var(--shadow);
}

.stage__screen {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 15rem;
    padding: var(--s-5);
    border-radius: var(--radius);
    background: var(--c-brand-tint);
    text-align: center;
}

.stage__slide { max-width: 40rem; }

.stage__count {
    margin: 0 0 var(--s-3);
    color: var(--c-text-muted);
    font-size: 0.875rem;
    font-variant-numeric: tabular-nums;
}

.stage__show {
    margin: 0;
    font-size: 1.75rem;
    font-weight: 600;
    line-height: 1.4;
}

.stage__where {
    margin-block: var(--s-3) 0;
    direction: ltr;
    color: var(--c-brand);
    font-family: ui-monospace, "Cascadia Code", "Consolas", monospace;
    font-size: 0.9375rem;
}

.stage__note,
.stage__warn {
    margin-block-start: var(--s-4);
    padding: var(--s-3) var(--s-4);
    border-inline-start: 3px solid var(--c-brand);
    border-radius: var(--radius-sm);
    background: #FFF;
    font-size: 1.0625rem;
    text-align: start;
}

.stage__warn {
    border-inline-start-color: var(--c-warn);
    color: var(--c-warn);
    font-weight: 500;
}

.stage__bar {
    overflow: hidden;
    height: 4px;
    margin-block-start: var(--s-3);
    border-radius: 2px;
    background: var(--c-border);
}

.stage__fill {
    display: block;
    width: 0;
    height: 100%;
    background: var(--c-brand);
}

/* The line the person recording reads. Marked out as theirs, not the
   viewer's, by sitting outside the screen area. */
.stage__say {
    margin-block: var(--s-4) 0;
    padding: var(--s-4);
    border: 1px dashed var(--c-border);
    border-radius: var(--radius-sm);
    font-size: 1.25rem;
    line-height: 1.8;
}

.stage__controls {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-2);
    margin-block-start: var(--s-4);
}

/* --- the written lesson ---------------------------------------------------- */

.help-steps {
    margin: 0 0 var(--s-5);
    padding-inline-start: var(--s-5);
}

.help-step {
    margin-block-end: var(--s-4);
    padding-inline-start: var(--s-2);
    line-height: 1.8;
}

.help-step__show {
    margin: 0 0 var(--s-1);
    font-weight: 600;
}

.help-step__note,
.help-step__warn {
    margin-block: var(--s-2) 0;
    padding: var(--s-2) var(--s-3);
    border-inline-start: 3px solid var(--c-brand);
    border-radius: var(--radius-sm);
    background: var(--c-brand-tint);
    font-size: 0.9375rem;
}

.help-step__warn {
    border-inline-start-color: var(--c-warn);
    background: #FFFBEB;
    color: var(--c-warn);
}

.help-card .card__title a { text-decoration: none; }
.help-card .card__title a:hover { text-decoration: underline; }

@media (max-width: 600px) {
    .stage { padding: var(--s-3); }
    .stage__screen { min-height: 11rem; padding: var(--s-4); }
    .stage__show { font-size: 1.3125rem; }
    .stage__say { font-size: 1.0625rem; }

    /* Nothing here has a space bar or arrow keys. */
    .stage__keys { display: none; }
}
.pill--danger { color: var(--c-danger); }

/* --- key/value list ------------------------------------------------------- */

.kv {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: var(--s-2) var(--s-4);
    margin: 0;
}

.kv dt {
    color: var(--c-text-muted);
}

.kv dd {
    margin: 0;
    font-weight: 500;
}

/* On a narrow screen the two columns stack instead of squeezing. */
@media (max-width: 30rem) {
    .kv {
        grid-template-columns: 1fr;
        gap: var(--s-1) 0;
    }

    .kv dd {
        margin-block-end: var(--s-3);
    }
}

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

/* ==========================================================================
   Layout
   ========================================================================== */

/* Visually hidden, still read by screen readers. */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.skip-link {
    position: absolute;
    inset-block-start: -3rem;
    inset-inline-start: var(--s-4);
    z-index: 100;
    padding: var(--s-2) var(--s-4);
    background: var(--c-brand);
    color: #FFFFFF;
    border-radius: 0 0 var(--radius) var(--radius);
    text-decoration: none;
}

.skip-link:focus {
    inset-block-start: 0;
    color: #FFFFFF;
}

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

.lead {
    font-size: 1.0625rem;
    color: var(--c-text-muted);
}

/* --- signed-out pages ----------------------------------------------------- */

.body--auth {
    min-height: 100vh;
    display: grid;
    place-items: center;
    background: var(--c-surface-muted);
}

.auth {
    width: 100%;
    max-width: 26rem;
    padding: var(--s-5) var(--s-4);
    text-align: center;
}

.auth__brand {
    margin-block-end: var(--s-5);
}

.auth__logo {
    height: auto;
    max-width: 180px;
}

.auth__tagline {
    margin-block: var(--s-2) 0;
    color: var(--c-text-muted);
    font-size: 0.875rem;
}

.auth__card {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
    padding: var(--s-5);
    box-shadow: var(--shadow);
    text-align: start;
}

.auth__title {
    margin-block-start: 0;
}

.auth__intro {
    color: var(--c-text-muted);
    font-size: 0.9375rem;
}

.auth__lang {
    margin-block: var(--s-4) 0;
    font-size: 0.875rem;
}

.error__code {
    margin: 0;
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--c-border);
    line-height: 1;
}

/* --- forms ---------------------------------------------------------------- */

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

.field__label {
    display: block;
    margin-block-end: var(--s-1);
    font-weight: 500;
    font-size: 0.9375rem;
}

.field__input {
    display: block;
    width: 100%;
    padding: 0.55rem 0.7rem;
    border: 1px solid var(--c-border);
    border-radius: var(--radius-sm);
    background: var(--c-surface);
    color: var(--c-text);
    font: inherit;
}

.field__input:focus {
    border-color: var(--c-brand);
    outline: 2px solid var(--c-brand);
    outline-offset: -1px;
}

.field__hint {
    margin-block: var(--s-1) 0;
    font-size: 0.8125rem;
    color: var(--c-text-muted);
}

.form__section {
    margin-block: var(--s-5) var(--s-3);
    padding-block-start: var(--s-4);
    border-block-start: 1px solid var(--c-border);
    font-size: 0.9375rem;
    color: var(--c-text-muted);
}

.btn--block {
    width: 100%;
    justify-content: center;
}

.btn--quiet {
    background: transparent;
    border-color: var(--c-border);
    color: var(--c-text-muted);
    font-size: 0.875rem;
}

.btn.is-busy {
    opacity: 0.6;
    cursor: progress;
}

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

/* --- flash messages ------------------------------------------------------- */

.flashes {
    margin-block-end: var(--s-4);
}

.flash {
    padding: var(--s-3) var(--s-4);
    border: 1px solid var(--c-border);
    border-inline-start: 3px solid var(--c-text-muted);
    border-radius: var(--radius-sm);
    background: var(--c-surface-muted);
    margin-block-end: var(--s-3);
    font-size: 0.9375rem;
}

.flash--success { border-inline-start-color: var(--c-ok);     background: #F0FDF4; }
.flash--error   { border-inline-start-color: var(--c-danger); background: #FEF2F2; }
.flash--warning { border-inline-start-color: var(--c-warn);   background: #FFFBEB; }
.flash--info    { border-inline-start-color: var(--c-brand);  background: var(--c-brand-tint); }

.flash__list {
    margin: 0;
    padding-inline-start: 1.1rem;
}

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

.body--admin {
    background: var(--c-surface-muted);
}

.shell {
    min-height: 100vh;
}

/* Mobile bar. Hidden once the sidebar becomes permanent. */
.topbar {
    position: sticky;
    inset-block-start: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    gap: var(--s-3);
    padding: var(--s-2) var(--s-3);
    background: var(--c-surface);
    border-block-end: 1px solid var(--c-border);
}

.topbar__menu {
    display: grid;
    place-items: center;
    width: 2.5rem;
    height: 2.5rem;
    padding: 0;
    border: 1px solid var(--c-border);
    border-radius: var(--radius-sm);
    background: var(--c-surface);
    cursor: pointer;
}

/* Three bars drawn with borders, so no icon font or SVG file is needed. */
.topbar__menu-icon {
    position: relative;
    display: block;
    width: 1rem;
    height: 0;
    border-block-start: 2px solid var(--c-text);
}

.topbar__menu-icon::before,
.topbar__menu-icon::after {
    position: absolute;
    inset-inline-start: 0;
    display: block;
    width: 1rem;
    height: 0;
    border-block-start: 2px solid var(--c-text);
    content: "";
}

.topbar__menu-icon::before { inset-block-start: -6px; }
.topbar__menu-icon::after  { inset-block-start: 4px; }

.topbar__title {
    font-weight: 600;
}

.drawer-backdrop {
    position: fixed;
    inset: 0;
    z-index: 25;
    background: rgba(31, 35, 48, 0.45);
}

.sidebar {
    position: fixed;
    inset-block: 0;
    inset-inline-start: 0;
    z-index: 30;
    width: 15rem;
    display: flex;
    flex-direction: column;
    background: var(--c-surface);
    border-inline-end: 1px solid var(--c-border);
    padding: var(--s-4) var(--s-3);
    transform: translateX(-100%);
    transition: transform 0.2s ease;
    overflow-y: auto;
}

/* In RTL the drawer sits on the right, so it slides in from the other side. */
[dir="rtl"] .sidebar {
    transform: translateX(100%);
}

.drawer-open .sidebar {
    transform: translateX(0);
}

.sidebar__brand {
    padding-inline: var(--s-2);
    margin-block-end: var(--s-5);
}

.sidebar__logo {
    height: auto;
    max-width: 120px;
}

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

.nav__item {
    display: block;
    padding: 0.5rem var(--s-3);
    border-radius: var(--radius-sm);
    color: var(--c-text);
    text-decoration: none;
    font-size: 0.9375rem;
}

.nav__item:hover {
    background: var(--c-surface-muted);
    color: var(--c-text);
}

/* A thin brand bar on the leading edge marks the current section. */
.nav__item.is-active {
    background: var(--c-brand-tint);
    color: var(--c-brand-dark);
    font-weight: 600;
    box-shadow: inset 3px 0 0 0 var(--c-brand);
}

[dir="rtl"] .nav__item.is-active {
    box-shadow: inset -3px 0 0 0 var(--c-brand);
}

.sidebar__footer {
    margin-block-start: auto;
    padding-block-start: var(--s-4);
    border-block-start: 1px solid var(--c-border);
}

.sidebar__lang {
    display: inline-block;
    margin-block-end: var(--s-3);
    font-size: 0.875rem;
}

.sidebar__user {
    display: flex;
    flex-direction: column;
    margin-block-end: var(--s-3);
    padding-inline: var(--s-1);
}

.sidebar__user-name {
    font-weight: 600;
    font-size: 0.9375rem;
}

.sidebar__user-role {
    font-size: 0.8125rem;
    color: var(--c-text-muted);
}

.sidebar__logout {
    margin: 0;
}

.main {
    min-width: 0;
}

.page {
    max-width: 68rem;
    margin-inline: auto;
    padding: var(--s-5) var(--s-4) var(--s-7);
}

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

.page__back {
    display: inline-block;
    margin-block-end: var(--s-1);
    font-size: 0.875rem;
}

.page__title {
    margin: 0;
}

/* --- content blocks ------------------------------------------------------- */

.card {
    margin-block-end: var(--s-4);
}

.card__title {
    margin-block-start: 0;
    font-size: 1rem;
}

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

.stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
    gap: var(--s-3);
    margin-block-end: var(--s-4);
}

.stat {
    display: flex;
    flex-direction: column;
    gap: var(--s-1);
    padding: var(--s-4);
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
}

.stat--attention {
    border-color: var(--c-accent);
    box-shadow: inset 0 -3px 0 0 var(--c-accent);
}

.stat__label {
    font-size: 0.875rem;
    color: var(--c-text-muted);
}

.stat__value {
    font-size: 1.75rem;
    font-weight: 600;
    line-height: 1.1;
}

/* --- tables --------------------------------------------------------------- */

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

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

.table td,
.table th {
    padding: 0.4rem 0.6rem;
    border-block-end: 1px solid var(--c-border);
    text-align: start;
    vertical-align: top;
}

.table tr:last-child td {
    border-block-end: 0;
}

/* The system report shows English technical values, so it stays left-to-right
   even when the interface is Arabic. */
.table--ltr {
    direction: ltr;
    text-align: left;
}

.table__status { width: 1%; white-space: nowrap; }
.table__name   { font-weight: 500; }
.table__note   { color: var(--c-text-muted); font-size: 0.875rem; }

/* --- desktop -------------------------------------------------------------- */

@media (min-width: 60rem) {
    .topbar,
    .drawer-backdrop {
        display: none;
    }

    .shell {
        display: grid;
        grid-template-columns: 15rem 1fr;
    }

    .sidebar {
        position: sticky;
        inset-block-start: 0;
        height: 100vh;
        transform: none;
        transition: none;
    }

    [dir="rtl"] .sidebar {
        transform: none;
    }

    .page {
        padding-inline: var(--s-5);
    }
}

/* ==========================================================================
   Lists, profiles and the side drawer
   ========================================================================== */

.toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-3);
    margin-block-end: var(--s-4);
}

.toolbar__search {
    display: flex;
    gap: var(--s-2);
    flex: 1 1 18rem;
}

.toolbar__search .field__input {
    flex: 1 1 auto;
    min-width: 0;
}

.inline-form {
    display: inline;
    margin: 0;
}

.scope {
    margin-block-end: var(--s-3);
    font-size: 0.875rem;
}

.scope__toggle {
    margin-inline-start: var(--s-3);
}

.empty {
    padding: var(--s-6) var(--s-4);
    text-align: center;
    color: var(--c-text-muted);
    background: var(--c-surface);
    border: 1px dashed var(--c-border);
    border-radius: var(--radius);
}

/* Codes and phone numbers are Latin digits inside Arabic pages, so they are
   pinned left-to-right or the punctuation jumps around. */
.code {
    font-family: var(--font-mono);
    font-size: 0.9em;
    direction: ltr;
    unicode-bidi: embed;
    display: inline-block;
}

.code--lg {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--c-brand-dark);
}

.identity {
    margin: 0;
}

.req {
    color: var(--c-danger);
}

.note {
    font-size: 0.8125rem;
}

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

.card--flush {
    padding: 0;
    overflow: hidden;
}

.card--narrow {
    max-width: 36rem;
}

/* --- list tables ---------------------------------------------------------- */

.table--list thead th {
    background: var(--c-surface-muted);
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--c-text-muted);
    border-block-end: 1px solid var(--c-border);
}

.table--list td,
.table--list th {
    padding: 0.6rem 0.75rem;
}

.table--list tbody tr:hover {
    background: var(--c-surface-muted);
}

/* On a narrow screen each row becomes a card, so nothing scrolls sideways.
   The header is hidden and every cell carries its own label instead. */
@media (max-width: 48rem) {
    .table--list thead {
        display: none;
    }

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

    .table--list tr {
        padding: var(--s-3);
        border-block-end: 1px solid var(--c-border);
    }

    .table--list tr:last-child {
        border-block-end: 0;
    }

    .table--list td {
        display: flex;
        justify-content: space-between;
        gap: var(--s-3);
        padding: 0.15rem 0;
        border: 0;
    }

    .table--list td::before {
        content: attr(data-label);
        color: var(--c-text-muted);
        font-size: 0.8125rem;
        flex: 0 0 auto;
    }
}

/* --- pager ---------------------------------------------------------------- */

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

.pager__state {
    font-size: 0.875rem;
    color: var(--c-text-muted);
}

/* --- account figures ------------------------------------------------------ */

.currency-blocks {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
    gap: var(--s-3);
}

.currency-block {
    padding: var(--s-4);
    background: var(--c-surface-muted);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-sm);
}

.currency-block__title {
    margin-block: 0 var(--s-3);
    font-size: 0.8125rem;
    letter-spacing: 0.08em;
    color: var(--c-text-muted);
    text-transform: uppercase;
}

.kv--figures {
    grid-template-columns: 1fr auto;
    gap: var(--s-2) var(--s-3);
}

.kv--figures dd {
    font-family: var(--font-mono);
    direction: ltr;
    unicode-bidi: embed;
    text-align: end;
}

.figure--due {
    color: var(--c-danger);
    font-weight: 600;
}

.figure--credit {
    color: var(--c-ok);
    font-weight: 600;
}

.field__static {
    margin: 0;
    padding: 0.55rem 0;
    font-weight: 600;
}

.form__actions {
    display: flex;
    gap: var(--s-2);
    margin-block-start: var(--s-5);
}

/* --- side drawer ---------------------------------------------------------- */

.side-drawer {
    position: fixed;
    inset: 0;
    z-index: 50;
}

.side-drawer__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(31, 35, 48, 0.45);
}

.side-drawer__panel {
    position: absolute;
    inset-block: 0;
    /* Opens from the trailing edge, which is the left in Arabic and the right
       in English — handled by the logical property, not a mirrored rule. */
    inset-inline-end: 0;
    width: min(32rem, 100%);
    display: flex;
    flex-direction: column;
    background: var(--c-surface);
    border-inline-start: 1px solid var(--c-border);
    box-shadow: 0 0 40px rgba(31, 35, 48, 0.18);
    overflow-y: auto;
}

.side-drawer__head {
    position: sticky;
    inset-block-start: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-3);
    padding: var(--s-4);
    background: var(--c-surface);
    border-block-end: 1px solid var(--c-border);
}

.side-drawer__title {
    margin: 0;
    font-size: 1.0625rem;
}

.side-drawer__close {
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
    border: 1px solid var(--c-border);
    border-radius: var(--radius-sm);
    background: var(--c-surface);
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
}

.side-drawer__body {
    padding: var(--s-4);
}

/* Stop the page behind the drawer scrolling under it. */
.side-drawer-open {
    overflow: hidden;
}

/* ==========================================================================
   Orders
   ========================================================================== */

/* --- bulk update bar ------------------------------------------------------ */

.bulkbar {
    padding: var(--s-4);
    margin-block-end: var(--s-4);
    background: var(--c-brand-tint);
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
}

.bulkbar__row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--s-3);
}

.bulkbar__field { flex: 0 1 14rem; }
.bulkbar__value { flex: 1 1 18rem; }
.bulkbar__apply { flex: 0 0 auto; }

.bulkbar .field__label {
    margin-block-end: var(--s-1);
}

.bulkbar__count {
    margin-block: var(--s-3) 0;
    font-weight: 600;
    font-size: 0.9375rem;
}

.bulkbar__warn {
    margin-block: var(--s-1) 0;
}

/* --- filters -------------------------------------------------------------- */

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

.toolbar__filters .field__input {
    width: auto;
    min-width: 9rem;
}

.table__check {
    width: 1%;
    white-space: nowrap;
}

.stage {
    display: inline-block;
    margin-inline-start: var(--s-2);
    font-size: 0.8125rem;
    color: var(--c-text-muted);
}

/* --- tracking timeline ---------------------------------------------------- */

.timeline {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-4);
    margin: 0 0 var(--s-4);
    padding: 0;
    list-style: none;
}

.timeline__step {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    font-size: 0.9375rem;
    color: var(--c-text-muted);
}

.timeline__dot {
    width: 0.75rem;
    height: 0.75rem;
    border-radius: 50%;
    border: 2px solid var(--c-border);
    background: var(--c-surface);
    flex: 0 0 auto;
}

.timeline__step--done .timeline__dot {
    background: var(--c-brand);
    border-color: var(--c-brand);
}

.timeline__step--done .timeline__label {
    color: var(--c-text);
}

.timeline__step--current .timeline__dot {
    background: var(--c-accent);
    border-color: var(--c-accent);
    /* A soft ring marks where the shipment is now. */
    box-shadow: 0 0 0 4px rgba(250, 205, 21, 0.3);
}

.timeline__step--current .timeline__label {
    color: var(--c-text);
    font-weight: 600;
}

.status-form {
    padding-block-start: var(--s-4);
    border-block-start: 1px solid var(--c-border);
    max-width: 28rem;
}

/* --- internal note -------------------------------------------------------- */

.internal-note {
    margin-block-start: var(--s-4);
    padding: var(--s-3) var(--s-4);
    background: var(--c-surface-muted);
    border-inline-start: 3px solid var(--c-accent);
    border-radius: var(--radius-sm);
}

.internal-note__title {
    margin-block: 0 var(--s-2);
    font-size: 0.875rem;
    color: var(--c-text-muted);
}

.internal-note p {
    margin-block-end: 0;
}

/* --- status history ------------------------------------------------------- */

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

.history__item {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--s-2) var(--s-3);
    padding-block: var(--s-2);
    border-block-end: 1px solid var(--c-border);
    font-size: 0.9375rem;
}

.history__item:last-child {
    border-block-end: 0;
}

.history__when {
    font-family: var(--font-mono);
    font-size: 0.8125rem;
    color: var(--c-text-muted);
    direction: ltr;
    unicode-bidi: embed;
    flex: 0 0 auto;
}

.history__what {
    flex: 1 1 12rem;
}

.history__who {
    font-size: 0.8125rem;
    color: var(--c-text-muted);
}

.history__note {
    flex: 1 1 100%;
    font-size: 0.875rem;
    color: var(--c-text-muted);
}

/* --- side-by-side fields -------------------------------------------------- */

.field-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
    gap: var(--s-3);
}

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

/* ==========================================================================
   Invoices, money and the calculator
   ========================================================================== */

.inline-create {
    display: flex;
    gap: var(--s-2);
    align-items: center;
    margin-block-end: var(--s-4);
}

.inline-create .field__input {
    width: auto;
}

.check {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    margin-block-end: var(--s-3);
    font-size: 0.9375rem;
}

/* Amounts line up when they are monospaced and pinned left-to-right. */
.amount,
.items-table input[name="item_amount[]"] {
    font-family: var(--font-mono);
    direction: ltr;
    text-align: end;
}

.items-table td {
    padding: 0.3rem 0.4rem;
    vertical-align: middle;
}

.items-table .field__input {
    padding: 0.4rem 0.5rem;
}

.money-form,
.cost-form {
    padding-block: var(--s-4);
    border-block-start: 1px solid var(--c-border);
}

.field__input--tiny {
    width: auto;
    max-width: 11rem;
    padding: 0.3rem 0.5rem;
    font-size: 0.875rem;
    display: inline-block;
}

.void-form {
    display: flex;
    gap: var(--s-2);
    align-items: center;
    flex-wrap: wrap;
}

/* A voided movement stays visible, but reads as struck through. */
.is-voided td {
    opacity: 0.6;
    text-decoration: line-through;
}

.is-voided .pill,
.is-voided .muted {
    text-decoration: none;
}

/* --- the internal block ---------------------------------------------------
   Costs and profit. Marked with the brand accent so it is obvious at a
   glance that this part is not for the customer. */

.card--internal {
    border-color: var(--c-accent);
    box-shadow: inset 0 0 0 1px var(--c-accent);
}

.card--internal .card__title {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    flex-wrap: wrap;
}

.profit {
    margin-block-start: var(--s-4);
    padding: var(--s-4);
    background: var(--c-surface-muted);
    border-radius: var(--radius-sm);
}

.profit .kv {
    max-width: 26rem;
}

/* --- modal ---------------------------------------------------------------- */

.modal {
    position: fixed;
    inset: 0;
    z-index: 60;
    display: grid;
    place-items: center;
    padding: var(--s-4);
}

.modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(31, 35, 48, 0.5);
}

.modal__panel {
    position: relative;
    width: min(44rem, 100%);
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    background: var(--c-surface);
    border-radius: var(--radius);
    box-shadow: 0 10px 50px rgba(31, 35, 48, 0.25);
    overflow: hidden;
}

.modal__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-3);
    padding: var(--s-4);
    border-block-end: 1px solid var(--c-border);
}

.modal__title {
    margin: 0;
    font-size: 1.0625rem;
}

.modal__body {
    padding: var(--s-4);
    overflow-y: auto;
}

/* --- calculator ----------------------------------------------------------- */

.calc-group {
    padding-block-end: var(--s-4);
    margin-block-end: var(--s-4);
    border-block-end: 1px solid var(--c-border);
}

.calc-group:last-of-type {
    border-block-end: 0;
}

.calc-group__title {
    margin-block: 0 var(--s-3);
    font-size: 0.8125rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--c-text-muted);
}

.calc-group--result {
    padding: var(--s-4);
    background: var(--c-brand-tint);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-sm);
}

.calc-out dd {
    font-weight: 600;
}

.calc-error {
    margin-block: var(--s-3) 0;
    color: var(--c-danger);
    font-size: 0.875rem;
}

@media (max-width: 36rem) {
    .modal {
        padding: 0;
    }

    .modal__panel {
        width: 100%;
        max-height: 100vh;
        height: 100%;
        border-radius: 0;
    }
}

/* The `hidden` attribute must win over the display set above, or the modal
   renders on page load. Author styles beat the browser default, so it has to
   be stated here. */
.modal[hidden],
.side-drawer[hidden] {
    display: none;
}

/* ==========================================================================
   Finance and reports
   ========================================================================== */

/* --- the general / order choice ------------------------------------------- */

.target {
    margin: 0 0 var(--s-4);
    padding: var(--s-4);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-sm);
    background: var(--c-surface-muted);
}

.target legend {
    padding-inline: var(--s-2);
}

.target__option {
    display: flex;
    align-items: flex-start;
    gap: var(--s-3);
    padding-block: var(--s-2);
    cursor: pointer;
}

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

.target__option input {
    margin-block-start: 0.25rem;
    flex: 0 0 auto;
}

/* --- report filters -------------------------------------------------------- */

.report-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--s-3);
}

.report-filters .field {
    margin-block-end: 0;
}

.report-filters .field__input {
    width: auto;
    min-width: 9rem;
}

.field--actions {
    align-self: flex-end;
}

.report-actions {
    margin-block-end: var(--s-4);
}

.scope-line {
    padding: var(--s-3) var(--s-4);
    background: var(--c-brand-tint);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-sm);
    font-size: 0.9375rem;
}

.currency-blocks--report {
    grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
    margin-block-end: var(--s-4);
}

.currency-blocks--report .currency-block {
    background: var(--c-surface);
}

.subhead {
    margin-block: var(--s-4) var(--s-2);
    font-size: 0.875rem;
    color: var(--c-text-muted);
}

/* --- print ----------------------------------------------------------------- */

.body--print {
    background: #FFFFFF;
}

.print-head {
    display: flex;
    align-items: center;
    gap: var(--s-4);
    padding-block-end: var(--s-4);
    margin-block-end: var(--s-4);
    border-block-end: 2px solid var(--c-border);
}

.print-logo {
    height: auto;
    max-width: 140px;
}

@media print {
    /* Nothing interactive belongs on paper. */
    .topbar,
    .sidebar,
    .drawer-backdrop,
    .report-actions,
    .report-filters,
    .btn,
    form {
        display: none !important;
    }

    .body--print,
    .body--admin {
        background: #FFFFFF;
    }

    .page {
        max-width: none;
        padding: 0;
    }

    .card,
    .currency-block,
    .scope-line {
        border: 1px solid #999;
        box-shadow: none;
        break-inside: avoid;
    }

    /* The scope must stay legible in black and white. */
    .scope-line {
        background: #FFFFFF;
    }

    a[href]::after {
        content: "";
    }
}

/* ==========================================================================
   The conversation on a shipment, and the small pieces the customer portal
   shares with the admin.
   ========================================================================== */

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

.thread__item {
    padding: var(--s-3);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-sm);
    background: var(--c-surface);
    max-width: 44rem;
}

/* The company's own messages sit against the start edge, the customer's
   against the end edge, so a thread reads at a glance in either direction. */
.thread__item--mine {
    margin-inline-end: auto;
    background: var(--c-brand-tint);
    border-color: #DCD4EC;
}

.thread__item--theirs {
    margin-inline-start: auto;
    background: var(--c-surface-muted);
}

/* An internal note is staff-only; the accent stripe says so without words. */
.thread__item--internal {
    background: #FFFBEB;
    border-color: #F6E7A8;
    border-inline-start: 3px solid var(--c-accent);
}

.thread__who {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: var(--s-2);
    margin: 0 0 var(--s-1);
    font-size: 0.8125rem;
    font-weight: 600;
}

.thread__when {
    font-weight: 400;
    color: var(--c-text-muted);
    font-variant-numeric: tabular-nums;
}

.thread__body {
    margin: 0;
    overflow-wrap: anywhere;
}

/* --- shared small pieces --------------------------------------------------- */

.badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.25rem;
    height: 1.25rem;
    padding-inline: 0.3rem;
    margin-inline-start: var(--s-2);
    border-radius: 999px;
    background: var(--c-brand);
    color: #FFFFFF;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.badge--new {
    background: var(--c-accent);
    color: #4A3B00;
}

.badge[hidden] {
    display: none;
}

.num {
    text-align: end;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

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

.table--plain td {
    padding: var(--s-2) 0;
    border-block-end: 1px solid var(--c-border);
    vertical-align: top;
}

.table--plain tr:last-child td {
    border-block-end: 0;
}

/* ==========================================================================
   Tracking
   ========================================================================== */

/* The five stages with their counts, doubling as the status filter. */
.board {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
    gap: var(--s-2);
    margin-block-end: var(--s-4);
}

.board__card {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: var(--s-3);
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    text-decoration: none;
    color: inherit;
}

.board__card:hover,
.board__card:focus {
    border-color: var(--c-brand);
}

.board__card.is-active {
    border-color: var(--c-brand);
    background: var(--c-brand-tint);
}

.board__count {
    font-size: 1.375rem;
    font-weight: 600;
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
}

.board__label {
    font-size: 0.8125rem;
    color: var(--c-text-muted);
}

.board__card.is-active .board__label {
    color: var(--c-brand-dark);
}

/* The last stage is the finished one, so it reads calmer than the rest. */
.board__card--delivered .board__count {
    color: var(--c-ok);
}

/* --- rows ------------------------------------------------------------------ */

/* Which field a search hit, shown because a customer code and a shipment
   number differ by a single digit. */
.pill--quiet {
    background: var(--c-surface-muted);
    color: var(--c-text-muted);
    font-weight: 400;
}

/* The wording carried over from the old spreadsheet. */
.legacy {
    display: block;
    margin-block-start: var(--s-1);
    font-size: 0.75rem;
    color: var(--c-warn);
}

.when {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    color: var(--c-text-muted);
}

/* ==========================================================================
   Settings
   ========================================================================== */

/* The hub: one card per section the person may actually open. */
.tiles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: var(--s-3);
    margin-block-end: var(--s-5);
}

.tile {
    display: block;
    padding: var(--s-4);
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    text-decoration: none;
    color: inherit;
}

.tile:hover,
.tile:focus {
    border-color: var(--c-brand);
    background: var(--c-brand-tint);
}

.tile__title {
    margin: 0 0 var(--s-1);
    font-size: 1rem;
    color: var(--c-brand);
}

.tile__what {
    margin: 0;
    font-size: 0.875rem;
    color: var(--c-text-muted);
}

.tile__note {
    margin: var(--s-2) 0 0;
    font-size: 0.8125rem;
    color: var(--c-warn);
}

/* --- the permission grid --------------------------------------------------- */

.perms {
    margin: 0 0 var(--s-4);
    padding: var(--s-3) var(--s-4);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-sm);
    background: var(--c-surface-muted);
}

.perms legend {
    padding-inline: var(--s-2);
    font-weight: 600;
    font-size: 0.875rem;
}

.perms__item {
    display: flex;
    align-items: flex-start;
    gap: var(--s-3);
    padding-block: var(--s-2);
    cursor: pointer;
}

.perms__item + .perms__item {
    border-block-start: 1px solid var(--c-border);
}

.perms__item input {
    margin-block-start: 0.3rem;
    flex: 0 0 auto;
}

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

.perms__what {
    line-height: 1.4;
}

/* The key itself is secondary: it matters when reading the audit trail, not
   when deciding what someone may do. */
.perms__key {
    font-size: 0.75rem;
    color: var(--c-text-muted);
}

/* --- the audit trail ------------------------------------------------------- */

.audit-details {
    margin: 0;
    padding-inline-start: 1rem;
    font-size: 0.8125rem;
    color: var(--c-text-muted);
}

.audit-details li {
    overflow-wrap: anywhere;
}

/* --- shared --------------------------------------------------------------- */

.plain-list {
    margin: 0 0 var(--s-3);
    padding-inline-start: 1.1rem;
}

.plain-list li + li {
    margin-block-start: var(--s-2);
}

/* A switched-off account or a hidden notice: still readable, visibly not in
   play. Opacity alone would fail a contrast check, so the text colour moves
   with it. */
.is-off {
    background: var(--c-surface-muted);
}

.is-off .card__title,
tr.is-off td {
    color: var(--c-text-muted);
}

.btn--danger {
    border-color: var(--c-danger);
    color: var(--c-danger);
    background: var(--c-surface);
}

.btn--danger:hover,
.btn--danger:focus {
    background: var(--c-danger);
    color: #FFFFFF;
}

/* ==========================================================================
   Files, and the photo viewer

   Shared by the office, the warehouse and the customer portal: the same
   thumbnails and the same viewer, so a photograph behaves identically
   wherever it is looked at.
   ========================================================================== */

/* --- bigger targets, for a phone used standing up -------------------------- */

/* About a fingertip; anything smaller is a miss waiting to happen. */
.btn--big {
    min-height: 3rem;
    padding-inline: var(--s-4);
    font-size: 1rem;
}

.field__input--big {
    min-height: 3rem;
    font-size: 1rem;
}

/* A file input dressed as a button. The real input stays inside the label,
   so a click and a keyboard both still reach it. */
.btn--file {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.btn--file input[type="file"] {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.btn--file:focus-within {
    outline: 2px solid var(--c-brand);
    outline-offset: 2px;
}

/* --- small state labels ---------------------------------------------------- */

.flag {
    display: inline-block;
    padding: 2px var(--s-2);
    border-radius: var(--radius-sm);
    font-size: 0.75rem;
    background: var(--c-surface-muted);
    color: var(--c-text-muted);
}

.flag--ok {
    background: #ECFDF3;
    color: var(--c-ok);
}

.flag--warn {
    background: #FFFBEB;
    color: var(--c-warn);
}

/* --- file tiles ------------------------------------------------------------ */

.tile-files {
    list-style: none;
    margin: 0 0 var(--s-3);
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(7rem, 1fr));
    gap: var(--s-3);
}

.tile-files--small {
    grid-template-columns: repeat(auto-fill, minmax(5rem, 1fr));
}

.tile-file {
    display: flex;
    flex-direction: column;
    gap: var(--s-1);
    min-width: 0;
}

.tile-file__open {
    display: block;
    padding: 0;
    border: 1px solid var(--c-border);
    border-radius: var(--radius-sm);
    background: var(--c-surface-muted);
    cursor: zoom-in;
    overflow: hidden;
}

.tile-file__open img {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
}

.tile-file__doc {
    display: flex;
    flex-direction: column;
    gap: var(--s-1);
    padding: var(--s-3);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-sm);
    background: var(--c-surface-muted);
    text-decoration: none;
    color: inherit;
    min-width: 0;
}

.tile-file__ext {
    font-weight: 600;
    color: var(--c-brand);
    font-size: 0.8125rem;
}

.tile-file__name,
.tile-file__for {
    font-size: 0.75rem;
    color: var(--c-text-muted);
    overflow-wrap: anywhere;
}

.tile-file__remove {
    padding: 0;
    border: 0;
    background: none;
    color: var(--c-danger);
    font: inherit;
    font-size: 0.75rem;
    text-align: start;
    cursor: pointer;
}

/* Showing or hiding a file from the customer is not a destructive act, so
   it does not borrow the colour of one. */
.tile-file__toggle {
    color: var(--c-brand);
}

/* --- the viewer ------------------------------------------------------------ */

.viewer {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: flex;
    flex-direction: column;
    background: rgba(17, 18, 24, 0.97);
}

.viewer[hidden] {
    display: none;
}

/* Nothing behind the viewer should scroll while it is open. */
body.viewer-open {
    overflow: hidden;
}

.viewer__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-3);
    padding: var(--s-3) var(--s-4);
    color: #FFFFFF;
}

.viewer__name {
    font-size: 0.875rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.viewer__close {
    flex: 0 0 auto;
    width: 2.75rem;
    height: 2.75rem;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.14);
    color: #FFFFFF;
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
}

.viewer__close:hover,
.viewer__close:focus {
    background: rgba(255, 255, 255, 0.26);
}

/* touch-action: none is the point of this rule. Without it a pinch zooms the
   whole page and the photograph stays exactly as small as it was. */
.viewer__stage {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    touch-action: none;
    overscroll-behavior: contain;
}

.viewer__image {
    max-width: 100%;
    max-height: 100%;
    transform-origin: center center;
    will-change: transform;
    user-select: none;
    -webkit-user-drag: none;
}

.viewer__hint {
    margin: 0;
    padding: var(--s-3) var(--s-4);
    color: rgba(255, 255, 255, 0.72);
    font-size: 0.8125rem;
    text-align: center;
}

/* --- the review queue ------------------------------------------------------
   One block per item, with the photograph big enough to read a label off and
   the fields beside it. On a phone the picture goes above the fields. */

.review__item {
    margin-block-end: var(--s-5);
}

.review__head {
    display: flex;
    align-items: flex-start;
    gap: var(--s-3);
}

.review__pick input {
    inline-size: 1.15rem;
    block-size: 1.15rem;
    margin-block-start: 0.35rem;
}

.review__where {
    margin-block: 0.25rem 0;
    font-size: 0.9rem;
}

.review__reason {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--s-2);
    margin-block: var(--s-3) 0;
    font-size: 0.92rem;
}

.review__body {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--s-4);
    margin-block-start: var(--s-4);
}

@media (min-width: 46rem) {
    .review__body {
        grid-template-columns: 14rem 1fr;
    }
}

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

.review__image {
    display: grid;
    place-items: center;
    inline-size: 100%;
    max-inline-size: 13rem;
    aspect-ratio: 1;
    padding: var(--s-2);
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
    background: var(--c-surface-muted);
    cursor: zoom-in;
    overflow: hidden;
}

/* A frame of a fixed size, with the picture fitted inside it: a product
   photograph fills it, and a tiny image stays its own size rather than
   being blown up into a blur. */
.review__image img {
    max-inline-size: 100%;
    max-block-size: 100%;
    inline-size: auto;
    block-size: auto;
}

.review__image:focus-visible {
    outline: 2px solid var(--c-brand);
    outline-offset: 2px;
}

.review__pending {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    font-size: 0.92rem;
}

.review__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-2);
    margin-block-start: var(--s-4);
}

.review__hints {
    margin-block: var(--s-2) 0;
    font-size: 0.85rem;
}

/* --- what an import did ----------------------------------------------------- */

.import-row {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--s-2);
    font-size: 0.9rem;
}

.import-row + .import-row {
    margin-block-start: var(--s-3);
    padding-block-start: var(--s-3);
    border-block-start: 1px solid var(--c-border);
}

.import-warn {
    margin-block: var(--s-2) 0;
    padding-inline-start: var(--s-4);
    font-size: 0.88rem;
}

/* A heading inside a card, under its title. */
.card__subtitle {
    margin-block: var(--s-5) var(--s-3);
    font-size: 1rem;
    font-weight: 600;
}

/* The review tile on the dashboard is a link to the queue; it must not look
   like body text with an underline. */
a.stat {
    color: inherit;
    text-decoration: none;
}

a.stat:hover,
a.stat:focus-visible {
    border-color: var(--c-brand);
}