/* Designer site. Palette: white, orange #EF5F18, navy #261A66. Every page is Arabic RTL. */

/* Arabic text is cursive: letter-spacing breaks the joins between letters, so no text here is ever tracked. */
@font-face {
    font-family: "Readex Pro";
    src: url("fonts/readex-pro-arabic-wght-normal.woff2") format("woff2");
    font-weight: 160 700;
    font-display: swap;
    unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}
@font-face {
    font-family: "Readex Pro";
    src: url("fonts/readex-pro-latin-wght-normal.woff2") format("woff2");
    font-weight: 160 700;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Light is the base. Dark applies only through data-theme, which a small script in the page head sets before
   the first paint: from the visitor's saved choice, otherwise from their system preference. */
:root {
    color-scheme: light;

    /* Primitives: only the roles below may use these. */
    --white: #ffffff;
    --orange: #EF5F18;
    --navy: #261A66;
    --navy-deep: #17103F;

    --color-canvas: var(--white);
    --color-surface: var(--white);
    --color-sunken: #F6F5FA;
    --color-text: var(--navy-deep);
    --color-text-muted: #5A5578;
    --color-border: #E5E3EE;
    --color-field-border: #8A85A6;
    --color-placeholder: #6B6688;
    --color-accent: var(--navy);
    --color-accent-hover: #35278A;
    --color-on-accent: var(--white);
    --color-highlight: var(--orange);
    --color-on-highlight: var(--navy-deep);
    --color-focus: var(--orange);
    --color-panel: var(--navy);
    --color-on-panel: var(--white);
    --color-on-panel-muted: #CFCAE8;
    --color-edge: var(--navy);
    --color-bad: #B0102A;
    --color-bad-bg: #FDECEE;
    --color-ok: #056B40;
    --color-ok-bg: #E8F6EF;
    --color-pending: #7A4A00;
    --color-pending-bg: #FBF1DD;
    --art-sheet: var(--white);
    --art-ink: var(--navy);
    --shadow-pop: 0 2px 4px rgb(23 16 63 / .08), 0 16px 40px rgb(23 16 63 / .18);
    --scroll-shadow: rgb(23 16 63 / .22);

    --radius-shell: 32px;
    --radius-panel: 24px;
    --radius-card: 20px;
    --radius-control: 12px;
    --ease-move: cubic-bezier(.2, 0, 0, 1);
}

:root[data-theme="dark"] {
    color-scheme: dark;
    --color-canvas: #0D0826;
    --color-surface: #1B1446;
    --color-sunken: #150F38;
    --color-text: #F3F1FB;
    --color-text-muted: #B5B0D2;
    --color-border: #332A68;
    --color-field-border: #7D77A6;
    --color-placeholder: #A5A0C4;
    --color-accent: var(--white);
    --color-accent-hover: #E4E1F4;
    --color-on-accent: var(--navy);
    --color-panel: #2E2178;
    --color-edge: var(--orange);
    --color-bad: #FF9AA8;
    --color-bad-bg: #3A1230;
    --color-ok: #6FE0AC;
    --color-ok-bg: #0F2E2E;
    --color-pending: #F5B95F;
    --color-pending-bg: #33260F;
    --shadow-pop: 0 16px 40px rgb(0 0 0 / .5);
    --scroll-shadow: rgb(0 0 0 / .5);
}

* { box-sizing: border-box; }
html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body {
    margin: 0;
    padding: 24px 16px;
    background: var(--color-canvas);
    color: var(--color-text);
    font-family: "Readex Pro", "Segoe UI", Tahoma, "Noto Sans Arabic", Arial, sans-serif;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.7;
    -webkit-tap-highlight-color: transparent;
}
::selection { background: var(--color-highlight); color: var(--color-on-highlight); }
bdi { unicode-bidi: isolate; }
p { text-wrap: pretty; }

:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
main:focus { outline: none; } /* a skip-link target, never reached with the Tab key */

a { color: inherit; text-decoration-thickness: from-font; text-underline-position: from-font; }
.skip-link {
    position: absolute; inset-inline-start: 24px; top: -100px; z-index: 20;
    padding: 10px 16px; border-radius: var(--radius-control);
    background: var(--color-accent); color: var(--color-on-accent); font-weight: 500; text-decoration: none;
}
.skip-link:focus { top: 16px; }

/* ---------- Page frame ---------- */
.shell {
    position: relative;
    max-width: 1120px;
    min-height: calc(100dvh - 48px);
    margin-inline: auto;
    background: var(--color-surface);
    border: 1px solid transparent;
    border-radius: var(--radius-shell);
}

/* Dark/light switch. Both icons stay in the page and cross-fade. It needs the script, so it hides without it. */
html:not([data-theme]) .theme-toggle { display: none; }
.theme-toggle {
    position: relative; flex: none; width: 44px; min-height: 44px; padding: 0;
    background: var(--color-surface); color: var(--color-text); border-color: var(--color-field-border);
}
.theme-float { position: absolute; top: 24px; inset-inline-end: 24px; z-index: 5; }
.theme-icon {
    position: absolute; inset: 0; margin: auto; opacity: 0; scale: .25; filter: blur(4px);
    transition-property: opacity, scale, filter; transition-duration: 300ms; transition-timing-function: var(--ease-move);
}
[data-theme="light"] .theme-icon-moon, [data-theme="dark"] .theme-icon-sun { opacity: 1; scale: 1; filter: blur(0); }
/* Without this, every color on the page would animate at once and the switch would smear. */
.theme-switching *:not(.theme-icon) { transition: none !important; }
/* The view-transition name makes the header and main separate stacking layers, and main comes later:
   without a higher z-index, the account menu would open behind the page content. */
header.top { position: relative; z-index: 5; view-transition-name: site-header; }
.bar {
    display: flex; align-items: center; flex-wrap: wrap; gap: 12px 24px;
    min-height: 88px; padding: 16px 32px;
}
.brand { display: flex; align-items: center; gap: 12px; min-width: 0; font-size: 1.125rem; font-weight: 700; line-height: 1.3; text-decoration: none; }
.logo { display: block; width: auto; height: auto; max-height: 48px; max-width: 160px; object-fit: contain; }
.spacer { flex: 1; }

nav { display: flex; gap: 4px; }
nav a {
    position: relative; display: inline-flex; align-items: center; min-height: 44px; padding: 8px 16px;
    border-radius: var(--radius-control); color: var(--color-text-muted); font-weight: 500; text-decoration: none; white-space: nowrap;
    transition: color 150ms ease-out;
}
nav a.is-active { color: var(--color-text); }
.nav-label { position: relative; }
.nav-pill { position: absolute; inset: 0; border-radius: inherit; background: var(--color-sunken); box-shadow: inset 0 0 0 1px var(--color-border); view-transition-name: nav-active; }

.user-menu { position: relative; }
.user-menu summary {
    display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 14px;
    border: 1px solid var(--color-field-border); border-radius: var(--radius-control);
    font-size: .9375rem; font-weight: 500; cursor: pointer; list-style: none;
    transition: background-color 150ms ease-out;
}
.user-menu summary::-webkit-details-marker { display: none; }
.user-menu summary svg { flex: none; transition: rotate 150ms ease-out; }
.user-menu[open] summary svg { rotate: 180deg; }
.user-menu-list {
    position: absolute; inset-inline-end: 0; top: calc(100% + 8px); z-index: 15;
    display: grid; gap: 2px; min-width: 200px; padding: 8px;
    background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 18px; box-shadow: var(--shadow-pop);
}
.user-menu-list a, .user-menu-list button {
    display: flex; justify-content: flex-start; width: 100%; min-height: 44px; padding: 8px 12px;
    background: none; border: 0; border-radius: 10px; color: var(--color-text); font: inherit; font-weight: 400; text-decoration: none; cursor: pointer;
    transition: background-color 150ms ease-out;
}
.user-menu-list form { margin: 0; }
.user-menu-name { display: none; padding: 8px 12px; color: var(--color-text-muted); font-size: .875rem; overflow-wrap: anywhere; }

main { padding: 16px 32px 56px; view-transition-name: page; }

/* ---------- Type ---------- */
h1 { margin: 0 0 24px; font-size: 1.875rem; font-weight: 700; line-height: 1.3; text-wrap: balance; }
h2 { margin: 0 0 16px; font-size: 1.125rem; font-weight: 500; line-height: 1.4; text-wrap: balance; }
.display { margin: 0; font-size: clamp(2.25rem, 1.6rem + 2.6vw, 3.25rem); line-height: 1.25; }
.muted { color: var(--color-text-muted); }
.ok { color: var(--color-ok); }
.center { text-align: center; }
.field-hint, .field-rule { margin: 8px 0 0; color: var(--color-text-muted); font-size: .875rem; }
.total { margin: 0; font-size: 1.375rem; font-weight: 700; line-height: 1.4; font-variant-numeric: tabular-nums; }
.total:empty { display: none; }

/* The reference's highlighted section title. */
.chip, .card > h2 {
    display: inline-block; padding: 2px 12px; border-radius: 8px;
    background: var(--color-highlight); color: var(--color-on-highlight);
    font-weight: 500;
}
.chip { margin: 0; }

/* ---------- Surfaces ---------- */
.card {
    margin-bottom: 16px; padding: 24px;
    background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-card);
}
.card-ink { background: var(--color-panel); border-color: var(--color-panel); color: var(--color-on-panel); }
.card-ink .muted { color: var(--color-on-panel-muted); }
.card-edge { border-color: var(--color-edge); border-bottom-width: 4px; }
.narrow { max-width: 440px; margin-inline: auto; padding-top: 4vh; }
.form-page, .page-narrow { max-width: 720px; margin-inline: auto; }
.hero { margin-bottom: 24px; text-align: center; }
.hero h1 { margin: 0; }
.hero p { margin: 4px 0 0; }
.grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; }
.page-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px 24px; margin-bottom: 24px; }
.page-head h1 { margin: 0; }

.notice, .alert, .info { margin-bottom: 16px; padding: 12px 16px; border-radius: var(--radius-control); font-size: .9375rem; }
.notice { background: var(--color-ok-bg); color: var(--color-ok); }
.alert { background: var(--color-bad-bg); color: var(--color-bad); }
.info { background: var(--color-sunken); }
.join-approved { padding: 16px; font-size: 1.125rem; font-weight: 700; text-align: center; }

.state { display: inline-block; padding: 2px 12px; border-radius: 999px; font-size: .875rem; font-weight: 500; white-space: nowrap; }
.state-active { background: var(--color-ok-bg); color: var(--color-ok); }
.state-pending { background: var(--color-pending-bg); color: var(--color-pending); }
.state-rejected, .state-revoked { background: var(--color-bad-bg); color: var(--color-bad); }

.summary-band {
    margin: 0 0 16px; padding: 20px 24px; border-radius: var(--radius-card);
    background: var(--color-panel); color: var(--color-on-panel);
}

/* ---------- Controls ---------- */
label { display: block; margin: 16px 0 6px; font-size: .9375rem; font-weight: 500; }
.card > label:first-child, .card > .grid:first-child > div:first-child > label:first-child, form > label:first-child { margin-top: 0; }
@media (min-width: 641px) { .card > .grid:first-child > div:nth-child(2) > label:first-child { margin-top: 0; } }
input, select, textarea {
    width: 100%; min-height: 48px; padding: 10px 14px;
    background: var(--color-surface); color: var(--color-text);
    border: 1px solid var(--color-field-border); border-radius: var(--radius-control);
    font: inherit; font-size: 1rem; line-height: 1.5;
    transition: border-color 150ms ease-out;
}
input:focus, select:focus, textarea:focus { border-color: var(--color-accent); outline: 2px solid var(--color-focus); outline-offset: 1px; }
input.en { direction: ltr; text-align: left; }
input::placeholder, textarea::placeholder { color: var(--color-placeholder); opacity: 1; }
select {
    appearance: none; padding-inline-end: 40px; cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%238A85A6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 6 4 4 4-4'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: left 14px center;
}

button, .btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 12px;
    min-height: 48px; padding: 10px 24px;
    background: var(--color-accent); color: var(--color-on-accent);
    border: 1px solid transparent; border-radius: var(--radius-control);
    font: inherit; font-weight: 500; line-height: 1.4; text-decoration: none; cursor: pointer;
    transition-property: scale, background-color, border-color, color;
    transition-duration: 150ms; transition-timing-function: ease-out;
}
button.wide, .btn.wide { width: 100%; }
.btn-outline { background: transparent; color: var(--color-text); border-color: var(--color-accent); }
.btn-small { min-height: 44px; padding: 8px 16px; }

/* Forward action: a small orange disc with an arrow that points the way Arabic reads. */
.go { padding-inline-end: 12px; }
.go::after {
    content: ""; flex: none; width: 28px; height: 28px; border-radius: 50%;
    background: var(--color-highlight) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%2317103F' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13 8H3M7 4 3 8l4 4'/%3E%3C/svg%3E") center no-repeat;
    transition: translate 150ms ease-out;
}

button.link {
    min-height: 44px; padding: 8px 12px; background: none; color: var(--color-text-muted); font-weight: 500;
}
button.link.register-link {
    display: block; width: 100%; margin-top: 12px; color: var(--color-text); font-weight: 400;
    text-align: center; text-decoration: underline; text-decoration-thickness: from-font; white-space: normal;
}
button.link.danger { min-height: 36px; padding: 4px 10px; color: var(--color-bad); }

.err { display: block; margin-top: 4px; color: var(--color-bad); font-size: .9375rem; }

/* ---------- Tables ---------- */
/* The edge shadows show only on a side that has more to scroll to; they are symmetric, so they work in RTL. */
.table-wrap {
    position: relative; /* keeps visually hidden text in a table inside the scroller instead of widening the page */
    overflow-x: auto;
    background:
        linear-gradient(to right, var(--color-surface) 30%, transparent) left center / 40px 100% no-repeat local,
        linear-gradient(to left, var(--color-surface) 30%, transparent) right center / 40px 100% no-repeat local,
        radial-gradient(farthest-side at 0 50%, var(--scroll-shadow), transparent) left center / 12px 100% no-repeat scroll,
        radial-gradient(farthest-side at 100% 50%, var(--scroll-shadow), transparent) right center / 12px 100% no-repeat scroll;
}
table { width: 100%; border-collapse: collapse; font-size: .9375rem; }
th, td { padding: 12px; border-bottom: 1px solid var(--color-border); text-align: start; vertical-align: top; font-variant-numeric: tabular-nums; }
th { color: var(--color-text-muted); font-size: .875rem; font-weight: 500; white-space: nowrap; }
tbody tr:last-child td { border-bottom: 0; }
.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ---------- Sign-in ---------- */
.auth {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px;
    max-width: 960px; margin-inline: auto; padding-top: 16px;
}
.auth-brand {
    display: flex; flex-direction: column; justify-content: flex-end; gap: 4px; min-height: 540px; padding: 32px;
    background: var(--color-panel); color: var(--color-on-panel); border-radius: var(--radius-panel); overflow: hidden;
}
.auth-brand .art { margin-block: auto; }
.auth-shop { margin: 0; font-size: 1.5rem; font-weight: 700; line-height: 1.3; overflow-wrap: anywhere; }
.auth-tagline { margin: 0; color: var(--color-on-panel-muted); font-size: .9375rem; }
.auth-form { display: flex; flex-direction: column; justify-content: center; min-width: 0; padding: 16px 24px; }
.auth-logo { display: block; width: auto; height: auto; max-width: 180px; max-height: 72px; margin-bottom: 24px; object-fit: contain; }
.auth-form h1 { margin: 0 0 4px; font-size: 2rem; }
.auth-lead { margin: 0 0 16px; }
.auth-form .field-hint { margin: 12px 0 20px; }

/* ---------- Public home ---------- */
.landing-hero { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: center; gap: 32px; padding-block: 24px 56px; }
.landing-lead { max-width: 44ch; margin: 16px 0 28px; color: var(--color-text-muted); font-size: 1.0625rem; }
.landing-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.section-head { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 16px; margin-bottom: 20px; }
.section-head p { margin: 0; color: var(--color-text-muted); }
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.steps .card { margin: 0; }
.steps h3 { margin: 16px 0 6px; font-size: 1.125rem; font-weight: 500; line-height: 1.4; }
.steps p { margin: 0; font-size: .9375rem; }
.step-num {
    display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 50%;
    background: var(--color-highlight); color: var(--color-on-highlight); font-weight: 700; font-variant-numeric: tabular-nums;
}
.art { display: block; width: 100%; height: auto; max-width: 440px; margin-inline: auto; }

/* ---------- Order form ---------- */
.price-panel {
    margin-top: 16px; padding: 16px 20px; border-radius: var(--radius-control);
    background: var(--color-panel); color: var(--color-on-panel);
}
.price-panel p { margin: 0; }
.price-panel .muted { color: var(--color-on-panel-muted); }
.price-panel .total { margin-top: 4px; }
.dropzone {
    position: relative; padding: 32px 16px; text-align: center;
    background: var(--color-sunken); border: 2px dashed var(--color-field-border); border-radius: var(--radius-control);
    transition: background-color 150ms ease-out, border-color 150ms ease-out;
}
.dropzone svg { display: block; margin: 0 auto 12px; color: var(--color-highlight); }
.dropzone p { margin: 0 0 8px; }
.dropzone label { margin: 0; }
.dropzone .btn { background: transparent; color: var(--color-text); border-color: var(--color-accent); }
.dropzone-title { font-size: 1.0625rem; font-weight: 500; }
.dropzone:focus-within { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.dropzone.dragging { background: var(--color-ok-bg); border-style: solid; border-color: var(--color-ok); }
.file-list { margin: 12px 0; padding: 0; list-style: none; }
.file-list li { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 12px; padding: 8px 0; border-bottom: 1px solid var(--color-border); }
.file-name { flex: 1 1 180px; min-width: 0; overflow-wrap: anywhere; }

.gallery { margin-top: 16px; }
.gallery[hidden] { display: none; }
.gallery-main { display: block; border-radius: var(--radius-control); background: var(--color-sunken); overflow: hidden; }
.gallery-main img { display: block; width: 100%; height: auto; max-height: 360px; object-fit: contain; animation: fade-in 300ms ease-out both; }
.gallery-thumbs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.gallery-thumbs[hidden] { display: none; }
.gallery-thumb { width: 64px; min-height: 64px; height: 64px; padding: 0; overflow: hidden; background: var(--color-sunken); border: 2px solid transparent; border-radius: 10px; }
.gallery-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.gallery-thumb[aria-pressed="true"] { border-color: var(--color-accent); }

/* ---------- Financial ---------- */
.period-totals { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 16px; }
.period-totals .card > h2 { display: block; padding: 0; margin-bottom: 8px; background: none; color: inherit; font-size: 1rem; }
.period-totals .card:nth-child(2) { background: var(--color-panel); border-color: var(--color-panel); color: var(--color-on-panel); }
.period-totals .card:nth-child(2) .muted { color: var(--color-on-panel-muted); }
.period-totals .total, .period-totals .muted { margin: 0; }

/* ---------- Welcome toast: the one deliberately English, left-to-right element. It never blocks the page. ---------- */
.welcome { position: fixed; inset-inline: 0; top: 32px; z-index: 10; display: flex; justify-content: center; pointer-events: none; }
.welcome span {
    padding: 10px 24px; border-radius: 999px; background: var(--color-accent); color: var(--color-on-accent);
    font-weight: 500; box-shadow: var(--shadow-pop); animation: welcome 3200ms ease-out both;
}
@keyframes welcome { 0%, 100% { opacity: 0; } 10%, 85% { opacity: 1; } }

/* ---------- Hover only where a pointer can really hover ---------- */
@media (hover: hover) {
    nav a:hover { color: var(--color-text); }
    .user-menu summary:hover, .user-menu-list a:hover, .user-menu-list button:hover { background: var(--color-sunken); }
    button:hover, .btn:hover { background: var(--color-accent-hover); }
    .btn-outline:hover, .dropzone .btn:hover, .theme-toggle:hover { background: var(--color-sunken); }
    button.link:hover { background: var(--color-sunken); }
    .gallery-thumb:hover { background: var(--color-sunken); border-color: var(--color-field-border); }
    .gallery-thumb[aria-pressed="true"]:hover { border-color: var(--color-accent); }
    button.link.register-link:hover { background: none; color: var(--color-text-muted); }
    input:hover, select:hover, textarea:hover { border-color: var(--color-text-muted); }
    tbody tr:hover td { background: var(--color-sunken); }
}

/* ---------- Motion. Movement and blur run only for people who have not asked for less. ---------- */
@view-transition { navigation: auto; }

/* The frame stays still; only the page content changes, and the active-page pill slides to its new link. */
::view-transition-old(root), ::view-transition-new(root) { animation: none; }
::view-transition-group(page) { animation: none; }
::view-transition-group(nav-active) { z-index: 1; animation-duration: 300ms; animation-timing-function: var(--ease-move); }
::view-transition-group(site-header) { z-index: 2; animation-duration: 300ms; }
::view-transition-old(page) { animation: fade-out 150ms ease-out both; }
::view-transition-new(page) { animation: fade-in 300ms ease-out both; }

@keyframes fade-in { from { opacity: 0; } }
@keyframes fade-out { to { opacity: 0; } }
@keyframes page-enter { from { opacity: 0; translate: 0 12px; filter: blur(4px); } }
@keyframes page-exit { to { opacity: 0; translate: 0 -12px; filter: blur(4px); } }
@keyframes pop-in { from { opacity: 0; translate: 0 -4px; } }

.enter > * { animation: fade-in 300ms ease-out both; }
.user-menu[open] .user-menu-list { animation: fade-in 150ms ease-out both; }

@media (prefers-reduced-motion: reduce) {
    .theme-icon { scale: 1; filter: none; }
}

@media (prefers-reduced-motion: no-preference) {
    html { scroll-behavior: smooth; }
    ::view-transition-old(page) { animation-name: page-exit; }
    ::view-transition-new(page) { animation-name: page-enter; }

    /* A staged entrance, on the public pages only: people see these rarely, so it never slows routine work. */
    .enter > * { animation-name: page-enter; }
    .enter > :nth-child(2) { animation-delay: 100ms; }
    .enter > :nth-child(3) { animation-delay: 200ms; }
    .enter > :nth-child(4) { animation-delay: 300ms; }

    .user-menu[open] .user-menu-list { animation-name: pop-in; }
    button:not(:disabled):active, .btn:active { scale: .96; }
    @media (hover: hover) { .go:hover::after { translate: -3px 0; } }
}

/* ---------- Narrow screens ---------- */
@media (max-width: 860px) {
    .auth { grid-template-columns: minmax(0, 1fr); gap: 8px; padding-top: 0; }
    .auth-brand { min-height: 0; padding: 20px 24px; }
    .auth-brand .art { display: none; }
    .auth-form { padding: 16px 0; }
    .auth-shop { font-size: 1.25rem; }
    .landing-hero { grid-template-columns: minmax(0, 1fr); padding-bottom: 32px; }
    .steps { grid-template-columns: minmax(0, 1fr); }
    .bar { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 12px; min-height: 0; padding: 16px 20px 8px; }
    .user-menu summary bdi { display: inline-block; max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .bar .spacer { display: none; }
    .bar nav { grid-column: 1 / -1; grid-row: 2; }
    .bar nav a { flex: 1; justify-content: center; padding-inline: 8px; }
    main { padding: 16px 20px 40px; }
}
@media (max-width: 640px) {
    body { padding: 0; }
    .shell { min-height: 100dvh; border-radius: 0; }
    .theme-float { top: 12px; inset-inline-end: 12px; }
    .grid, .period-totals { grid-template-columns: minmax(0, 1fr); }
    h1 { font-size: 1.625rem; }
    .auth-form h1 { font-size: 1.75rem; }
    .card { padding: 20px; }
}
@media (max-width: 480px) {
    .brand { font-size: 1rem; overflow-wrap: anywhere; }
    .brand .logo { max-width: 56px; max-height: 36px; }
    .user-menu summary { padding-inline: 10px; }
    .user-menu summary bdi { max-width: 80px; }
    .user-menu-name { display: block; } /* the shortened username in full */
}
@media (max-width: 380px) {
    .bar nav a { font-size: .875rem; padding-inline: 4px; }
}

/* High-contrast mode draws its own colors; keep the panels readable and the active page marked. */
@media (forced-colors: active) {
    .nav-pill { border: 2px solid Highlight; }
    .chip, .card > h2 { border: 1px solid CanvasText; }
}