/* design v6 (DESIGN.md, render docs/design/redesign/direction-b-counter.html). web first, phone second.
   plain css, logical properties, every colour a token. no inline style anywhere (csp FR-047c) */

/* self-hosted faces only - csp font-src 'self' (DESIGN §7) */
@font-face {
    font-family: "Cairo";
    src: url("/fonts/cairo/cairo-400-800.woff2") format("woff2");
    font-weight: 400 800;
    font-display: swap;
}

/* landing wordmark + setup key glyphs (003 T023) */
@font-face {
    font-family: "Reem Kufi";
    src: url("/fonts/reem-kufi-arabic-700.woff2") format("woff2");
    font-weight: 700;
    font-display: swap;
}

@font-face {
    font-family: "Archivo";
    src: url("/fonts/archivo-latin-variable.woff2") format("woff2");
    font-weight: 100 900;
    font-stretch: 62% 125%;
    font-display: swap;
}

/* §2 tokens. light unless the person picked dark - no prefers-color-scheme on purpose */
:root {
    color-scheme: light;
    --bg: #F4F6F5;
    --card: #FFFFFF;
    --hover: #F7F9F8;
    --line: #DEE3E0;
    --ink: #1A1F1D;
    /* render #6B7571 / #E1F1EE gave 4.39 / 4.43:1 - nudged to pass 4.5 */
    --mute: #66706C;
    --green: #0F7B6C;
    --green-soft: #E6F4F1;
    --ochre: #E8611A;
    --ochre-ink: #9A3E0C;
    --ochre-soft: #FCE8DC;
    --red: #B3261E;
    /* owner 09-25: the side menu is its own panel; mute on it = --side-mute (5.0:1) */
    --side: #E6EEEB;
    --side-mute: #5C6662;
}

:root[data-theme="dark"] {
    color-scheme: dark;
    --bg: #121615;
    --card: #191E1C;
    --hover: #1F2523;
    --line: #2A312E;
    --ink: #ECEFEE;
    --mute: #98A29E;
    --green: #4FC3AF;
    --green-soft: #153B35;
    --ochre: #F0803F;
    --ochre-ink: #F0803F;
    --ochre-soft: #4A2413;
    --red: #F08A7E;
    --side: #151B19;
    --side-mute: #98A29E;
}

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

html {
    font-size: 16px;
}

/* §3: body 14px / 1.6 */
body {
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    font-family: "Cairo", system-ui, "Segoe UI", Tahoma, sans-serif;
    font-size: 14px;
    line-height: 1.6;
}

a {
    color: inherit;
}

:focus-visible {
    outline: 2px solid var(--green);
    outline-offset: 2px;
}

/* numbers: western digits, tabular, isolated ltr inside rtl (§6) */
.num {
    font-variant-numeric: tabular-nums;
    direction: ltr;
    unicode-bidi: isolate;
}

/* ── §4 top bar ─────────────────────────────────────────────── */
.topbar {
    position: sticky;
    inset-block-start: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    gap: 28px;
    block-size: 52px;
    padding-inline: 32px;
    border-block-end: 1px solid var(--line);
    background: var(--card);
}

/* ── brand lockup (lane 8, _Brand): «ع» cabinet mark + live word, mark on the left in both scripts ── */
.brand {
    display: inline-flex;
    flex: none;
    align-items: center;
    gap: 8px;
    /* the sheet's order: mark left, word right - in rtl and ltr alike */
    direction: ltr;
    color: var(--ink);
    line-height: 1;
    text-decoration: none;
}

.brand__mark {
    flex: none;
    inline-size: 24px;
    block-size: 24px;
    fill: var(--green);
}

/* two layers in one cell: the green word under, the dotless ink word over it = green «ي» dots */
.brand__word {
    display: inline-grid;
    font-size: 20px;
    font-weight: 800;
}

.brand__word > span {
    grid-area: 1 / 1;
}

.brand__word--dots .brand__name {
    color: var(--green);
}

.brand__ink {
    color: var(--ink);
    user-select: none;
}

.brand--door {
    flex-direction: column;
    gap: 10px;
}

.brand--door .brand__word {
    font-size: 26px;
}

.brand--door .brand__mark,
.brand--landing .brand__mark {
    inline-size: 40px;
    block-size: 40px;
}

.brand--landing {
    gap: 10px;
}

.brand--landing .brand__word {
    font-size: 24px;
}

/* the pages moved to the side menu (lane 7, v6 §4b); ≤640px this button opens it as a drawer */
.iconbtn.topbar__menu {
    display: none;
}

.topbar__end {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-inline-start: auto;
    color: var(--mute);
    font-size: 13px;
}

.topbar__who {
    color: var(--mute);
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-inline-size: 280px;
}

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

/* .bell keeps its own class name: the bell tests and the notifications door read it */
.iconbtn,
.bell {
    position: relative;
    display: grid;
    place-items: center;
    flex: none;
    inline-size: 32px;
    block-size: 32px;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: var(--card);
    color: var(--ink);
    cursor: pointer;
    text-decoration: none;
}

.iconbtn:hover,
.bell:hover {
    background: var(--hover);
}

.iconbtn svg,
.bell svg {
    inline-size: 16px;
    block-size: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* unread = an ochre badge with the count (never colour alone); ochre-ink keeps 4.5:1 */
.bell-badge {
    position: absolute;
    inset-block-start: -6px;
    inset-inline-end: -6px;
    min-inline-size: 18px;
    padding-inline: 4px;
    border-radius: 9px;
    background: var(--ochre-ink);
    color: var(--card);
    font-size: 12px;
    font-weight: 800;
    line-height: 18px;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.theme .theme__moon {
    display: none;
}

:root[data-theme="dark"] .theme .theme__moon {
    display: block;
}

:root[data-theme="dark"] .theme .theme__sun {
    display: none;
}

/* ── §4 page + head row ───────────────────────────────────────── */
.page {
    max-inline-size: 1240px;
    margin-inline: auto;
    padding: 22px 32px 48px;
}

.head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px 20px;
    margin-block-end: 16px;
}

.head__main {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1 1 320px;
    min-inline-size: 0;
}

.head h1,
.head__title {
    margin: 0;
    color: var(--ink);
    font-size: 20px;
    font-weight: 800;
    line-height: 1.35;
}

.head__fact {
    margin: 0;
    color: var(--mute);
    font-size: 13px;
}

/* a big number said in the head (job number, money net): 26px, ink or green */
.head__answer {
    margin: 4px 0 0;
    font-size: 26px;
    font-weight: 800;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}

.head__row {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

/* the way back: a quiet word above the title, one line */
.head__back {
    color: var(--mute);
    font-size: 13px;
    text-decoration: none;
    max-inline-size: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

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

.head__back::before {
    content: "→ ";
}

html[dir="ltr"] .head__back::before {
    content: "← ";
}

.head__nav {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    margin-block-start: 4px;
}

.actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* ── §5 buttons ───────────────────────────────────────────────── */
.button,
.actions a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 14px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: var(--card);
    color: var(--ink);
    font: inherit;
    font-size: 13.5px;
    font-weight: 700;
    line-height: 1.4;
    text-decoration: none;
    cursor: pointer;
    touch-action: manipulation;
}

.button:hover,
.actions a:hover {
    border-color: var(--ink);
}

/* the one green thing to press on a screen; text in --card so dark mode keeps 4.5:1 */
.button--main,
.button--brand,
.actions a.main {
    border-color: var(--green);
    background: var(--green);
    color: var(--card);
}

.button--main:hover,
.button--brand:hover,
.actions a.main:hover {
    border-color: var(--green);
    filter: brightness(.92);
}

.button--quiet {
    background: var(--card);
    color: var(--ink);
}

.button--danger {
    border-color: var(--red);
    background: var(--red);
    color: var(--card);
}

.button--danger:hover {
    border-color: var(--red);
    filter: brightness(.92);
}

/* a form's main button sits at the form's start, not across the whole laptop width */
.stack > .button,
.stack > form > .button {
    align-self: flex-start;
}

/* ── §5 inputs ────────────────────────────────────────────────── */
.field__label {
    color: var(--ink);
    font-size: 13.5px;
    font-weight: 700;
}

.field__input {
    min-block-size: 38px;
    padding: 7px 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--card);
    color: var(--ink);
    font: inherit;
    font-size: 14px;
}

.field__input::placeholder {
    color: var(--mute);
}

.field__input:focus,
.field__input:focus-visible {
    outline: none;
    border-color: var(--green);
    box-shadow: 0 0 0 3px var(--green-soft);
}

/* one slot under the input: help or error, never both */
.field__msg,
.field__help {
    margin: 0;
    color: var(--mute);
    font-size: 12.5px;
}

.field__msg--error {
    color: var(--red);
    font-weight: 700;
}

/* §4 search row «هل عندي هذه القطعة؟»: label + input + ink button, green ring on focus */
.ask,
.searchwrap {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px;
    padding-inline-start: 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--card);
}

.ask {
    margin-block-end: 18px;
}

.head .searchwrap {
    flex-basis: 100%;
    margin-block-start: 8px;
}

.ask:focus-within,
.searchwrap:focus-within {
    border-color: var(--green);
    box-shadow: 0 0 0 3px var(--green-soft);
}

.ask__glass {
    inline-size: 16px;
    block-size: 16px;
    flex: none;
    fill: none;
    stroke: var(--mute);
    stroke-width: 2;
    stroke-linecap: round;
}

.ask__label {
    font-size: 13.5px;
    font-weight: 700;
    white-space: nowrap;
}

.ask__input,
.search-input {
    flex: 1;
    min-inline-size: 0;
    border: 0;
    background: transparent;
    color: var(--ink);
    font: inherit;
    font-size: 14px;
    outline: none;
    unicode-bidi: plaintext;
}

.ask__input::placeholder,
.search-input::placeholder {
    color: var(--mute);
}

.ask__go,
.search-submit {
    padding: 7px 16px;
    border: 0;
    border-radius: 6px;
    background: var(--ink);
    color: var(--card);
    font: inherit;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}

.ask__go:hover,
.search-submit:hover {
    background: var(--green);
}

/* ── §5 cards, chips, panels ──────────────────────────────────── */
.card,
.rows,
.places {
    margin: 0;
    padding: 0 16px;
    list-style: none;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--card);
}

.card {
    padding: 14px 16px;
}

/* panel heading: 13px bold muted, a quiet link at the end */
.panel__title {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin: 0 0 8px;
    color: var(--mute);
    font-size: 13px;
    font-weight: 700;
}

.panel__title a {
    font-size: 12.5px;
    font-weight: 400;
    text-decoration: none;
}

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

/* §5 chips, named .flag: .chip is still the stock condition chip (word + square) */
.flag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px 8px;
    border-radius: 4px;
    background: var(--green-soft);
    color: var(--green);
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

.flag--hot {
    background: var(--ochre-soft);
    color: var(--ochre-ink);
}

.flag--done {
    border: 1px solid var(--line);
    background: var(--bg);
    color: var(--mute);
}

/* ── the stock answer, now a card under the head (was the green band) ── */
.answer {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 18px;
    align-items: start;
    margin-block-end: 16px;
    padding: 14px 16px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--card);
}

.answer-lead {
    grid-column: 1 / -1;
    margin: 0 0 4px;
    color: var(--mute);
    font-size: 13px;
    font-weight: 700;
}

.answer-lead--alone {
    margin: 0 0 12px;
    font-variant-numeric: tabular-nums;
}

.count {
    color: var(--green);
    font-size: 30px;
    font-weight: 800;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.count--zero {
    color: var(--mute);
}

.answer-body {
    min-inline-size: 0;
}

.answer-name {
    margin: 0;
    font-size: 16px;
    font-weight: 800;
    line-height: 1.3;
    unicode-bidi: plaintext;
}

.answer-spec {
    margin: 2px 0 0;
    color: var(--mute);
    font-size: 12.5px;
    font-variant-numeric: tabular-nums;
}

.answer-none,
.answer--empty {
    grid-template-columns: 1fr;
    row-gap: 10px;
}

.answer-none .button {
    justify-self: start;
}

.answer-empty {
    margin: 0;
    color: var(--mute);
}

.answer-where {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    gap: 6px 16px;
    margin: 10px 0 0;
    color: var(--mute);
    font-size: 13px;
}

.answer-where b {
    color: var(--ink);
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

/* the job head: #N plus the device, the state as a chip-like word */
.jobband__device {
    color: var(--ink);
    font-size: 17px;
    font-weight: 700;
}

/* the money head: net as the big number, direction said as a word */
.moneyband__net {
    margin: 4px 0 2px;
    color: var(--green);
    font-size: 30px;
    font-weight: 800;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}

.moneyband__net--down {
    color: var(--red);
}

.moneyband__why {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    color: var(--mute);
    font-size: 13px;
}

.moneyband__dir {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 700;
}

.moneyband__dir--up {
    background: var(--green-soft);
    color: var(--green);
}

.moneyband__dir--down {
    background: var(--ochre-soft);
    color: var(--red);
}

.moneyband__dir--even {
    border: 1px solid var(--line);
    color: var(--mute);
}

/* ── /home (owner 09-25: search, pulse, one tickets list) ─────────── */
/* four boxes: the day at a glance */
.pulse {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin: 0 0 18px;
    padding: 0;
    list-style: none;
}

.pulse__box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    block-size: 100%;
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--card);
    text-decoration: none;
}

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

.pulse__word {
    color: var(--mute);
    font-size: 13px;
    line-height: 1.3;
}

.pulse__word small {
    display: block;
    font-size: 12px;
}

.pulse__n {
    font-size: 22px;
    font-weight: 800;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.pulse__n--ok {
    color: var(--green);
}

.pulse__n--out {
    color: var(--red);
}

.pulse__box--hot {
    border-color: var(--ochre);
}

.pulse__box--hot .pulse__word {
    color: var(--ochre-ink);
    font-weight: 700;
}

.pulse__box--hot .pulse__word small {
    font-weight: 400;
}

.pulse__box--hot .pulse__n {
    color: var(--ochre);
}

/* tickets: dashed tear lines, punched half circles, a rotated stamp */
.tickets {
    margin: 0;
    padding: 0;
    list-style: none;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--card);
}

.ticket {
    position: relative;
    display: grid;
    grid-template-columns: 60px 1fr auto;
    gap: 0 14px;
    align-items: center;
    /* owner 09-25: tickets sat too close; more air inside each one */
    padding: 20px 18px;
    border-block-start: 1px dashed var(--line);
}

.ticket::before,
.ticket::after {
    content: "";
    position: absolute;
    inset-block-start: -6px;
    inline-size: 12px;
    block-size: 12px;
    border: 1px solid var(--line);
    border-radius: 50%;
    background: var(--bg);
}

.ticket::before {
    inset-inline-start: -7px;
}

.ticket::after {
    inset-inline-end: -7px;
}

.ticket:first-child {
    border-block-start: 0;
}

.ticket:first-child::before,
.ticket:first-child::after {
    display: none;
}

.stamp {
    padding: 5px 0;
    border: 2px solid var(--ink);
    border-radius: 6px;
    background: var(--card);
    color: var(--ink);
    font-size: 20px;
    font-weight: 800;
    line-height: 1;
    text-align: center;
    text-decoration: none;
    direction: ltr;
    font-variant-numeric: tabular-nums;
    transform: rotate(-3deg);
}

.stamp--hot {
    border-color: var(--ochre);
    color: var(--ochre);
}

.ticket__what {
    min-inline-size: 0;
}

.ticket__what b {
    display: block;
    font-size: 13.5px;
    font-weight: 700;
    overflow-wrap: anywhere;
}

.ticket__what span {
    display: block;
    color: var(--mute);
    font-size: 12.5px;
}

.ticket__act {
    display: inline-block;
    margin-block-start: 3px;
    color: var(--ochre-ink);
    font-size: 12.5px;
    font-weight: 700;
    text-decoration: none;
}

.ticket__act:hover {
    text-decoration: underline;
}

.ticket__act::after {
    content: " ←";
}

html[dir="ltr"] .ticket__act::after {
    content: " →";
}

.board__empty {
    margin: 0;
    padding: 14px 16px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--card);
    color: var(--mute);
}

/* two columns of tickets on a wide screen; punches only on the outer edges */
@media (min-width: 1001px) {
    .tickets {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ticket:nth-child(2) {
        border-block-start: 0;
    }

    .ticket:nth-child(even) {
        border-inline-start: 1px dashed var(--line);
    }

    .ticket:nth-child(2)::after,
    .ticket:nth-child(even)::before,
    .ticket:nth-child(odd)::after {
        display: none;
    }

    /* an odd last ticket takes the whole row, no empty half */
    .ticket:last-child:nth-child(odd) {
        grid-column: 1 / -1;
    }

    .ticket:last-child:nth-child(odd):not(:first-child)::after {
        display: block;
    }
}

/* shelf bins: name, place line, quantity, a 4px bar in ten steps (csp: a class, never a width style) */
.bins {
    margin: 0;
    padding: 0;
    list-style: none;
}

.bin {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 4px 10px;
    padding: 9px 0 8px;
    border-block-start: 1px solid var(--line);
}

.bin:first-child {
    border-block-start: 0;
}

.bin__name {
    display: block;
    font-size: 13.5px;
    font-weight: 700;
    color: inherit;
    text-decoration: none;
    overflow-wrap: anywhere;
    unicode-bidi: plaintext;
}

.bin__fact {
    color: var(--mute);
    font-size: 12.5px;
}

.bin__qty {
    display: flex;
    align-items: baseline;
    gap: 4px;
}

.bin__qty .num {
    font-size: 18px;
    font-weight: 800;
}

.bin__qty--low .num {
    color: var(--ochre);
}

.bin__qty em {
    color: var(--mute);
    font-size: 12px;
    font-style: normal;
}

.barq {
    grid-column: 1 / -1;
    block-size: 4px;
    border-radius: 2px;
    background: var(--line);
    overflow: hidden;
}

.barq__fill {
    display: block;
    block-size: 100%;
    border-radius: 2px;
    background: var(--ink);
}

.barq__fill--low {
    background: var(--ochre);
}

.barq--0 .barq__fill { inline-size: 0; }
.barq--10 .barq__fill { inline-size: 10%; }
.barq--20 .barq__fill { inline-size: 20%; }
.barq--30 .barq__fill { inline-size: 30%; }
.barq--40 .barq__fill { inline-size: 40%; }
.barq--50 .barq__fill { inline-size: 50%; }
.barq--60 .barq__fill { inline-size: 60%; }
.barq--70 .barq__fill { inline-size: 70%; }
.barq--80 .barq__fill { inline-size: 80%; }
.barq--90 .barq__fill { inline-size: 90%; }
.barq--100 .barq__fill { inline-size: 100%; }


.till__rows .till__out {
    color: var(--red);
}

/* owner 09-25 option 2: stock + money side by side under the tickets (money only behind its gate) */
.board2 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    align-items: start;
    margin-block-start: 22px;
}

.board2 > :only-child {
    grid-column: 1 / -1;
}

@media (max-width: 1000px) {
    .board2 {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* money read: net big (green, red below zero), then label/value rows on lines */
.till__top {
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.till__net {
    color: var(--green);
    font-size: 30px;
    font-weight: 800;
    line-height: 1;
}

.till__net--out {
    color: var(--red);
}

.till__top em {
    color: var(--mute);
    font-size: 12.5px;
    font-style: normal;
}

.till__rows {
    display: grid;
    grid-template-columns: 1fr auto;
    margin: 8px 0 0;
    font-size: 13.5px;
}

.till__rows dt,
.till__rows dd {
    padding: 7px 0;
    border-block-start: 1px solid var(--line);
}

.till__rows dt {
    color: var(--mute);
}

.till__rows dd {
    margin: 0;
    font-weight: 700;
}

/* ── breakpoints (§4) ─────────────────────────────────────────── */
@media (max-width: 1000px) {
    .pulse {
        grid-template-columns: repeat(2, 1fr);
    }

    .page {
        padding-inline: 16px;
    }

    .topbar {
        gap: 12px;
        padding-inline: 16px;
    }
}

@media (max-width: 640px) {
    .topbar__who {
        display: none;
    }

    .head {
        flex-direction: column;
        align-items: stretch;
    }

    .head__main {
        flex-basis: auto;
    }

    .ask__label {
        display: none;
    }
}

@media (prefers-reduced-motion: no-preference) {
    .button,
    .actions a,
    .ask__go,
    .search-submit,
    .side a,
    .side summary,
    .pulse__box,
    .iconbtn {
        transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease;
    }
}

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

/* ── v5 screen rules below, tokens remapped to v6; each later lane rebuilds its own ── */

.heading {
    margin: 28px 16px 8px;
    font-size: 20px;
    font-weight: 700;
}

/* lists are lists: full-bleed rows on hairlines, never cards */
.list {
    list-style: none;
    margin: 0;
    padding: 0;
    border-block-start: 1px solid var(--line);
}

.row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 16px;
    border-block-end: 1px solid var(--line);
}

.row--stacked {
    flex-direction: column;
    align-items: stretch;
}

.row__main {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.row__name {
    font-weight: 700;
    overflow-wrap: anywhere;
    unicode-bidi: plaintext;
}

.row__spec {
    color: var(--mute);
    font-size: 14px;
    font-variant-numeric: tabular-nums;
}

.row__action {
    margin: 0;
}

.row__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.row__actions form {
    flex: 1 1 40%;
    margin: 0;
}

/* three buttons = two on the first row, the third full width. no ragged wrap */
.row__actions .button {
    width: 100%;
}

.note {
    margin: 12px 16px;
    color: var(--mute);
}

.note--refusal {
    color: var(--red);
    font-weight: 700;
}

.link {
    color: var(--ink);
}

/* forms */
.stack {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 22px 16px;
}

.field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.field--choice {
    flex-direction: row;
    align-items: center;
    gap: 12px;
    min-height: 44px;
}

/* the whole row is the tap target - one thumb, 44px (SC-011) */
.field--choice .field__label {
    display: flex;
    flex: 1;
    align-items: center;
    min-height: 44px;
}

.field__choice {
    width: 24px;
    height: 24px;
    margin: 0;
    /* D-3: a radio is not the answer */
    accent-color: var(--green);
}

.listhead {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    padding-block: 2px 8px;
}

.listhead h2 {
    margin: 0;
    font-size: 14px; /* body floor (DESIGN §2); was 16 */
    font-weight: 700;
}

.listhead span {
    font-size: 13px;
    color: var(--mute);
    font-variant-numeric: tabular-nums;
}

/* result row: name and spec at the start side, the count at the end side */
.prow {
    display: grid;
    grid-template-columns: 1fr auto;
    column-gap: 14px;
    align-items: center;
    min-block-size: 48px;
    padding-block: 12px;
    border-block-end: 1px solid var(--line);
    color: inherit;
    text-decoration: none;
}

.rows > li:last-child .prow,
.places > .place:last-child {
    border-block-end: 0;
}

.prow:hover {
    background: var(--hover);
}

.prow:focus-visible {
    outline: 3px solid var(--green);
    outline-offset: -3px;
    border-radius: 10px;
}

.prow-head {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.prow-name {
    font-weight: 700;
    font-size: 14px;
    unicode-bidi: plaintext;
    overflow-wrap: anywhere;
}

.prow-spec {
    font-size: 13.5px;
    color: var(--mute);
    font-variant-numeric: tabular-nums;
}

/* the big count in a row is brand, never brass - brass stays on the band (DESIGN §3 v5) */
.prow-total {
    font-family: "Archivo", "Cairo", sans-serif;
    font-weight: 800;
    font-size: 28px;
    line-height: 1;
    text-align: end;
    letter-spacing: -.02em;
    color: var(--green);
    font-variant-numeric: tabular-nums;
}

/* "you own none" is also an answer - greyed, never hidden (FR-005 is about rows, not products) */
.prow-total--zero {
    color: var(--mute);
    font-weight: 500;
}

/* one product's rows: where each piece sits */
.place {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas: "where qty" "actions actions";
    column-gap: 14px;
    padding-block: 12px;
    border-block-end: 1px solid var(--line);
}

.place-where {
    grid-area: where;
    min-width: 0;
}

.place-name {
    font-weight: 700;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

/* place tag (D006): where the piece sits, on the tint */
.tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 1px 8px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--hover);
    color: var(--mute);
    font-size: 13.5px;
    font-weight: 700;
}

/* repair tag: word + 1.5px --repair outline (blue in app), never colour alone */
.place-device,
.tag--repair {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 1px 8px;
    border: 1.5px solid var(--ink);
    border-radius: 8px;
    color: var(--ink);
    font-size: 13.5px;
    font-weight: 700;
}

.device-ref {
    font-size: 12px;
    font-weight: 400;
}

.serial {
    font-family: "Archivo", ui-monospace, monospace;
    font-weight: 600;
    font-size: 13.5px;
    color: var(--mute);
    background: var(--hover);
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 1px 8px;
    unicode-bidi: plaintext;
}

.place-qty {
    grid-area: qty;
    align-self: center;
    font-family: "Archivo", "Cairo", sans-serif;
    font-weight: 800;
    font-size: 28px;
    line-height: 1;
    letter-spacing: -.02em;
    color: var(--green);
    font-variant-numeric: tabular-nums;
}

.place-actions {
    grid-area: actions;
    margin-block-start: 2px;
    display: flex;
    gap: 0 10px;
    flex-wrap: wrap;
    font-size: 14px; /* tappable words are body, not small (DESIGN §2); was 14 */
}

/* row doors: plain small words (DESIGN §2), 48px tap both ways, never a second button row */
.place-actions a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-block-size: 48px;
    min-inline-size: 48px;
    padding-inline: 6px;
    border-radius: 8px;
    color: var(--green);
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 4px;
    text-decoration-thickness: 1.5px;
    touch-action: manipulation;
}

.place-actions a:focus-visible {
    outline: 3px solid var(--green);
    outline-offset: 1px;
}

/* the condition chip: a word plus a square, never colour alone. meaning unchanged in v5 */
.chip {
    margin-block-start: 3px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--hover);
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 2px 9px;
    font-size: 13px;
    color: var(--mute);
}

.sq {
    width: 1em;
    height: 1em;
    flex: none;
    border-radius: 2px;
    background: var(--green);
}

.sq--used {
    background: color-mix(in srgb, var(--green) 55%, transparent);
}

.sq--refurbished {
    background: color-mix(in srgb, var(--green) 30%, transparent);
}

/* attention keeps teal: app --repair is blue and means "inside a repair" only */
.sq--attention {
    background: var(--green);
}

/* clay has ONE meaning: broken or wrong */
.sq--defective {
    background: var(--red);
}

.product-actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding-block: 16px 12px;
}

.product-actions .link {
    display: inline-flex;
    align-items: center;
    min-block-size: 48px;
    padding-inline: 12px;
    color: var(--green);
    font-weight: 700;
}

/* htmx indicator styles live HERE, not injected. htmx-config turns its inline <style> off
   because the CSP has no 'unsafe-inline' and would silently block it (FR-047c). */
.htmx-indicator {
    opacity: 0;
}

.htmx-request .htmx-indicator,
.htmx-request.htmx-indicator {
    opacity: 1;
    transition: opacity 200ms ease-in;
}

/* ---- phase 4: the five operation screens (screens.md §2) ---- */

.form-title {
    margin: 16px 16px 4px;
    font-size: 20px;
    color: var(--ink);
}

.form-part {
    margin: 0 16px 12px;
    color: var(--mute);
}

/* the one sentence that says why the shop was refused (FR-028) */
/* v5 refusal pill (D006): clay text on its pale ground, 10px, no coloured edge (DESIGN §11) */
.refused {
    margin: 12px 16px;
    padding: 10px 12px;
    border-radius: 10px;
    background: var(--ochre-soft);
    color: var(--red);
    font-weight: 700;
}

/* toast = card with a brand edge (D031 shape) */
.toast {
    margin: 12px 0 0;
    padding: 10px 12px;
    /* S-65 / D-7: no coloured stripe - DESIGN §11 refuses it */
    border-radius: 10px;
    background: var(--card);
    border: 1px solid var(--line);
    color: var(--ink);
    font-weight: 700;
}

/* the row the member acts on: static facts on the tint inside the card (D020), never a field */
.source {
    margin: 0;
    padding: 10px 12px;
    border-radius: 10px;
    background: var(--hover);
}

.source-part {
    margin: 0 0 6px;
    font-weight: 700;
    overflow-wrap: anywhere;
}

.source-where {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

/* the count is brand like every row count; brass stays on the band (DESIGN §3 v5) */
.source-qty {
    margin-inline-start: auto;
    font-family: "Archivo", "Cairo", sans-serif;
    font-variant-numeric: tabular-nums;
    font-size: 24px;
    font-weight: 800;
    line-height: 1;
    color: var(--green);
}

/* the number is the loudest thing on an operation screen */
.field__input--qty {
    font-variant-numeric: tabular-nums;
    font-size: 24px;
    font-weight: 700;
}

/* history (D020): one card, one row per movement; kind = tag, who/when ink-45 (5.4:1 on card) */
.hrow {
    padding-block: 12px;
    border-block-end: 1px solid var(--line);
}

.rows > .hrow:last-child {
    border-block-end: 0;
}

.hrow__head {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.hrow__reason {
    color: var(--mute);
    font-size: 13.5px;
    overflow-wrap: anywhere;
}

.hrow__lines {
    margin: 6px 0 0;
    padding: 0;
    list-style: none;
}

.hline {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    padding-block: 4px;
}

.hrow__who {
    margin: 4px 0 0;
    display: flex;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    color: var(--mute);
    font-size: 14px;
}

.hrow__when {
    font-variant-numeric: tabular-nums;
}

.hline-qty {
    margin-inline-start: auto;
    font-variant-numeric: tabular-nums;
    font-weight: 700;
}

/* FR-021c: a stopped part folds away, it is never gone - native <details>, no script */
.fold {
    margin-block-start: 22px;
    border-block-start: 1px solid var(--line);
}

.fold__head {
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding-block: 12px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
}

.fold__head:focus-visible {
    outline: 2px solid var(--green);
    outline-offset: 2px;
}

.fold__count {
    font-size: 13px;
    font-weight: 500;
    color: var(--mute);
    font-variant-numeric: tabular-nums;
}

/* greyed, never hidden - the shop still owns these */
.rows--retired .prow-name,
.rows--retired .prow-spec {
    color: var(--mute);
}

/* the places screen: the name on one side, its two doors on the other */
.lrow {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    padding-block: 12px;
    border-block-end: 1px solid var(--line);
}

.lrow--stopped .field__input {
    color: var(--mute);
}

.lrow-name {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1 1 260px;
    min-width: 0;
}

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

.lrow-acts {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-inline-start: auto;
}

.lrow-mark {
    font-size: 13px;
    color: var(--mute);
}

/* a label the screen reader hears and the eye does not need - the row already says it */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* the tree's indent, as classes - a style="" attribute dies on the CSP (FR-047c) */
.lrow--d1 { padding-inline-start: 16px; }
.lrow--d2 { padding-inline-start: 28px; }
.lrow--d3 { padding-inline-start: 40px; }
.lrow--d4 { padding-inline-start: 52px; }
.lrow--d5 { padding-inline-start: 64px; }

/* a brand is a block: its own row, then its covers, then its models */
.brandblock {
    padding-block: 8px;
    border-block-end: 1px solid var(--line);
}

.brandblock .lrow {
    border-block-end: 0;
}

.subline {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    padding-block: 4px;
    padding-inline-start: 16px;
}

.pillform {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

/* a text input's intrinsic width plus three buttons is 435px - it must shrink (SC-006) */
.pillform .field__input {
    flex: 1 1 140px;
    min-width: 0;
}

.pill {
    padding: 4px 8px;
    background: var(--hover);
    font-size: 13px;
    unicode-bidi: plaintext;
}

/* the catalog's own nav, inside the band */
.catnav {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    padding-block-start: 12px;
}

.icon {
    inline-size: 22px;
    block-size: 22px;
    flex: none;
}

/* ── 004 repairs ── v5 tokens only: step band, choices, job facts, history (DESIGN §2, §6) ── */

.stack--card {
    padding: 14px;
}

.stack--tight {
    padding: 8px 0 0;
    gap: 12px;
}

/* a choice row is the whole tap target, 48px (DESIGN §2) */
.choicelist {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 0;
    padding: 0;
    border: 0;
}

.choice {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-areas: "radio main" "radio spec" "radio extra";
    column-gap: 12px;
    align-items: center;
    min-block-size: 48px;
    padding: 6px 4px;
    border-radius: 10px;
    touch-action: manipulation;
}

.choice:has(.field__choice:checked) {
    background: var(--hover);
}

.choice .field__choice {
    grid-area: radio;
    accent-color: var(--green);
}

.choice__main {
    grid-area: main;
    font-weight: 700;
    overflow-wrap: anywhere;
}

.choice__spec {
    grid-area: spec;
    color: var(--mute);
    font-size: 14px;
    font-variant-numeric: tabular-nums;
}

.choice--card {
    /* the newest visit, then the "N older" note: two rows, or the note paints over the visit */
    grid-template-areas: "radio main" "radio spec" "radio extra" "radio note";
    align-items: start;
    padding-block: 10px;
    border-block-end: 1px solid var(--line);
}

.choice--card .pastjobs {
    grid-area: extra;
}

.choice--card .note--flush {
    grid-area: note;
}

.more {
    border: 1.5px solid var(--line);
    border-radius: 10px;
    padding: 0 14px;
    background: var(--hover);
}

.more__word {
    min-block-size: 48px;
    display: flex;
    align-items: center;
    color: var(--mute);
    font-weight: 700;
    cursor: pointer;
}

.more[open] {
    padding-block-end: 14px;
}

.field__input--area {
    min-block-size: 96px;
    resize: vertical;
}

.stepback {
    margin: 16px 0 0;
    text-align: center;
}

.stepback .link,
.doors .link {
    display: inline-flex;
    align-items: center;
    min-block-size: 44px;
    padding-inline: 8px;
    color: var(--green);
    font-weight: 700;
    text-underline-offset: 4px;
}

.note--flush {
    margin: 0;
}

.facts {
    display: flex;
    flex-direction: column;
}

.fact {
    display: grid;
    grid-template-columns: minmax(72px, auto) 1fr;
    column-gap: 14px;
    align-items: baseline;
    padding-block: 10px;
    border-block-end: 1px solid var(--line);
}

.facts > .fact:last-child {
    border-block-end: 0;
}

.fact__label {
    color: var(--mute);
    font-size: 14px;
    font-weight: 700;
}

.fact__value {
    overflow-wrap: anywhere;
}

.fact--muted {
    grid-template-columns: 1fr;
    color: var(--mute);
    font-size: 14px;
}

.doors {
    margin: 8px 0 0;
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.moves {
    display: flex;
    flex-direction: column;
    list-style: none;
}

.move {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    min-block-size: 44px;
    padding-block: 6px;
    border-block-end: 1px solid var(--line);
    font-size: 14px; /* body copy floor (DESIGN §2); was 15 */
}

.moves > .move:last-child {
    border-block-end: 0;
}

.move__who {
    font-weight: 700;
}

.move__when {
    margin-inline-start: auto;
    color: var(--mute);
    font-size: 13.5px;
    font-variant-numeric: tabular-nums;
}

.deviceline {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.deviceline__mark {
    font-weight: 700;
}

.pastjobs {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}

.pastjob {
    padding-block: 10px;
    border-block-end: 1px solid var(--line);
}

.pastjobs > .pastjob:last-child {
    border-block-end: 0;
}

.pastjob__head {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin: 0 0 4px;
}

.pastjob__number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-block-size: 48px; /* walk-004: 44 sat under the 48px floor */
    min-inline-size: 48px; /* walk-004 review: «#3» measured 22px wide */
    color: var(--green);
    font-family: "Archivo", "Cairo", sans-serif;
    font-weight: 800;
    font-size: 18px;
    font-variant-numeric: tabular-nums;
}

.pastjob__when {
    margin-inline-start: auto;
    color: var(--mute);
    font-size: 13.5px;
    font-variant-numeric: tabular-nums;
}

.pastjob__who {
    margin: 0 0 4px;
    color: var(--mute);
    font-size: 14px;
    font-weight: 700;
}

.pastjob__note {
    margin: 0;
    font-size: 14px; /* body copy floor (DESIGN §2); was 15 */
}

.pastjob__label {
    color: var(--mute);
    font-weight: 700;
}

/* device-type rows share the location list's shape */
.trow {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-block: 12px;
    border-block-end: 1px solid var(--line);
}

.rows > li:last-child.trow {
    border-block-end: 0;
}

.trow--stopped .field__input {
    color: var(--mute);
}

.trow-name {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 8px;
    align-items: center;
    margin: 0;
}

.trow-acts {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
}

.trow-acts form {
    margin: 0;
}

.trow-mark {
    color: var(--mute);
    font-size: 14px;
    font-weight: 700;
}

.trow-count {
    color: var(--mute);
    font-size: 13.5px;
    font-variant-numeric: tabular-nums;
}

/* US2 (T046): amount beside the read-only currency, the reveal-on-choice amount, quote rounds */
.amountrow {
    display: grid;
    grid-template-columns: 1fr auto;
    column-gap: 12px;
    align-items: end;
}

.amountrow__currency {
    min-inline-size: 84px;
}

.field__input--static {
    display: flex;
    align-items: center;
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    color: var(--mute);
}

/* the final amount belongs to "replace" / "requote" only - shown by the checked radio, no script (CSP) */
.decide .decide__amount {
    display: none;
}

.decide:has(.decide__replace:checked) .decide__amount {
    display: grid;
}

.fact__who {
    display: block;
    margin-block-start: 2px;
    color: var(--mute);
    font-size: 13.5px;
    font-variant-numeric: tabular-nums;
}

.rounds {
    display: flex;
    flex-direction: column;
    list-style: none;
}

.round {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-areas: "number amount" "number decision";
    column-gap: 12px;
    align-items: center;
    min-block-size: 48px;
    padding-block: 8px;
    border-block-end: 1px solid var(--line);
}

.rounds > .round:last-child {
    border-block-end: 0;
}

.round__number {
    grid-area: number;
    color: var(--mute);
    font-size: 14px;
    font-weight: 700;
}

.round__amount {
    grid-area: amount;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.round__decision {
    grid-area: decision;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    color: var(--mute);
    font-size: 14px;
}

/* US3 parts (T061): the finder band, the allocation rows on the job, the item facts */

.facts--item {
    margin-block-end: 4px;
}

.partlist {
    display: flex;
    flex-direction: column;
    list-style: none;
    margin: 0;
    padding: 0;
}

.part {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas: "name state" "who who" "actions actions";
    column-gap: 12px;
    row-gap: 4px;
    padding-block: 10px;
    border-block-end: 1px solid var(--line);
}

.partlist > .part:last-child {
    border-block-end: 0;
}

.part__name {
    grid-area: name;
    font-weight: 700;
    overflow-wrap: anywhere;
}

.part__who {
    grid-area: who;
    color: var(--mute);
    font-size: 13.5px;
    font-variant-numeric: tabular-nums;
}

/* the ONE move as a quiet button, the way back as a plain word - both 48px (DESIGN §2) */
.part__actions {
    grid-area: actions;
    display: flex;
    align-items: center;
    gap: 8px 14px;
    flex-wrap: wrap;
    margin-block-start: 4px;
}

.part__back {
    display: inline-flex;
    align-items: center;
    padding: 0 4px;
    border: 0;
    background: transparent;
    color: var(--mute);
    font: inherit;
    font-size: 13px;
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 4px;
    cursor: pointer;
    touch-action: manipulation;
}

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

/* US4 endings: the parts a handover consumes, as rows above the one button (screens.md §5) */
.consumes__lead {
    margin: 0;
    color: var(--mute);
    font-weight: 700;
}

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

.consume {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    min-block-size: 48px;
    padding-block: 8px;
    border-block-end: 1px solid var(--line);
}

.consumes > .consume:last-child {
    border-block-end: 0;
}

.consume__name {
    font-weight: 700;
    overflow-wrap: anywhere;
}

/* ── v6 doors (lane 5): one centred card on the page ground, the wordmark above it, no bar ── */

/* svh, not dvh: a folding url bar must not re-centre the card mid-tap */
.door {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    min-block-size: 100vh;
    min-block-size: 100svh;
    padding: 64px 16px 40px;
}

/* a signed-in wall keeps the top bar: centre in what is left under it */
.topbar ~ .door {
    min-block-size: calc(100vh - 53px);
    min-block-size: calc(100svh - 53px);
    padding-block-start: 40px;
}

/* no bar, so the theme switch waits in the far corner */
.door__corner {
    position: absolute;
    inset-block-start: 16px;
    inset-inline-end: 16px;
}

.door__card {
    display: flex;
    flex-direction: column;
    gap: 18px;
    inline-size: 100%;
    max-inline-size: 440px;
    padding: 28px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--card);
}

/* setup asks five things: two per row on a laptop, one per row on a phone */
.door__card--wide {
    max-inline-size: 640px;
}

.door__title {
    margin: 0;
    color: var(--ink);
    font-size: 20px;
    font-weight: 800;
    line-height: 1.35;
}

/* the calm line sits under its title, not a card gap away */
.door__title + .door__sub {
    margin-block-start: -12px;
}

.door__sub {
    margin: 0;
    color: var(--mute);
    font-size: 13.5px;
}

.door__form {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* the one green button spans the card: nobody hunts for it */
.door__form .button--main,
.door__go {
    inline-size: 100%;
    min-block-size: 40px;
}

/* the quiet way out: a word under the card's button, never a second button */
.door__link {
    align-self: center;
    color: var(--mute);
    font-size: 13.5px;
    text-decoration: underline;
    text-decoration-color: var(--line);
    text-underline-offset: 4px;
}

.door__link:hover {
    color: var(--ink);
    text-decoration-color: currentColor;
}

.door__tag {
    margin: 0;
    color: var(--mute);
    font-size: 12.5px;
}

.door__hint {
    margin: 0;
    color: var(--mute);
    font-size: 12.5px;
}

.door .refused {
    margin: 0;
    border-radius: 8px;
}

/* the six digits: one wide box, spaced, centred, so a misread digit shows */
.field__input--code {
    font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
    font-size: 20px;
    letter-spacing: .3em;
    text-align: center;
}

/* the key to type into the authenticator: monospace, one press selects it whole */
.secret {
    margin: 0;
    padding: 10px 12px;
    border: 1px dashed var(--line);
    border-radius: 8px;
    background: var(--bg);
    color: var(--ink);
    font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .08em;
    text-align: center;
    overflow-wrap: anywhere;
    direction: ltr;
    user-select: all;
    -webkit-user-select: all;
}

/* the ten codes: two columns of five in one box; one press-and-hold selects them all (no script) */
.door__codes {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.codes {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 24px;
    margin: 0;
    padding: 4px 16px;
    list-style: none;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--bg);
    direction: ltr;
    user-select: all;
    -webkit-user-select: all;
}

.codes__item {
    padding: 8px 0;
    border-block-end: 1px solid var(--line);
    font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
    font-size: 14px;
    letter-spacing: .04em;
}

.codes__item:nth-last-child(-n+2) {
    border-block-end: 0;
}

/* choose-shop: one bordered list, the whole row is the label */
.door__choices {
    display: flex;
    flex-direction: column;
    min-inline-size: 0;
    margin: 0;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: 8px;
    overflow: hidden;
}

.door__choice {
    display: flex;
    align-items: center;
    gap: 12px;
    min-block-size: 48px;
    padding: 10px 14px;
    border-block-end: 1px solid var(--line);
    cursor: pointer;
}

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

.door__choice:hover {
    background: var(--hover);
}

.door__choice:has(.field__choice:checked) {
    background: var(--green-soft);
}

.door__choice .field__choice {
    flex: none;
    inline-size: 18px;
    block-size: 18px;
}

.door__choice-name {
    font-weight: 700;
    overflow-wrap: anywhere;
}

/* setup: three calm sections under a hairline each; a floated legend joins the flex column */
.door__section {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-inline-size: 0;
    margin: 0;
    padding: 16px 0 0;
    border: 0;
    border-block-start: 1px solid var(--line);
}

.door__legend {
    float: inline-start;
    inline-size: 100%;
    margin: 0;
    padding: 0;
    color: var(--mute);
    font-size: 13px;
    font-weight: 700;
}

.door__row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    gap: 14px;
}

/* walls: 404 / 403 / 400 and the app-fault page, the same card, centred words */
.wall {
    align-items: center;
    text-align: center;
}

.wall__text {
    margin: 0;
    max-inline-size: 42ch;
}

.wall__small {
    margin: 0;
    max-inline-size: 48ch;
    color: var(--mute);
    font-size: 12.5px;
    overflow-wrap: anywhere;
}

/* the app-fault wall carries the character (owner-locked place 5); static, it never walks in here */
.wall .andoosh {
    inline-size: 132px;
    block-size: auto;
}

/* S-70: the trace id behind one word; the id opens under it */
.wall__details > summary {
    display: inline-flex;
    align-items: center;
    min-block-size: 40px;
    color: var(--mute);
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}

.wall__code {
    font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
    overflow-wrap: anywhere;
    direction: ltr;
    unicode-bidi: isolate;
}

@media (max-width: 640px) {
    .door {
        justify-content: flex-start;
    }

    .door__card {
        padding: 22px 18px;
    }

    .door__row {
        grid-template-columns: 1fr;
    }
}

/* one lead line between a step band and its card */
.stepshell__lead {
    margin-block-end: 12px;
}

/* ── v5 stock operations + product (design-pass-v5 D020/D021) ────────────────────────── */

/* a condition as a choice row: the square rides the word (DESIGN §3, never colour alone) */
.choice__main .sq {
    display: inline-block;
    margin-inline-end: 8px;
    vertical-align: -.1em;
}

/* places: the list card, then the add form as its own card (D020) */
.rows > .lrow:last-child {
    border-block-end: 0;
}

/* the form sits above the list now; the gap moves to its end (walk-us3 finding 1) */
.addplace {
    margin-block-end: 16px;
}

/* ── 003 landing (T022), v6 identity (lane 5) - every rule rooted under .landing, working screens untouched ──
   the app's own tokens, light/dark and Cairo; film, veil, Andoosh walk and the doors kept */

.landing {
    /* clip, not hidden - sticky header survives, a stray transform cannot widen 390 (SC-001) */
    overflow-x: clip;
    background: var(--bg);
    color: var(--ink);
}

/* order 0: off-canvas until focused */
.landing__skip {
    position: fixed;
    z-index: 60;
    inset-block-start: 8px;
    inset-inline-start: 8px;
    padding: 10px 14px;
    border-radius: 6px;
    background: var(--ink);
    color: var(--card);
    font-weight: 700;
    text-decoration: none;
    transform: translateY(-200%);
}

.landing__skip:focus {
    transform: none;
}

/* order 1: the app's top bar, public - card ground, one hairline under it */
.landing__header {
    position: sticky;
    inset-block-start: 0;
    z-index: 40;
    border-block-end: 1px solid var(--line);
    background: var(--card);
}

.landing__nav {
    display: flex;
    align-items: center;
    gap: 8px;
    max-inline-size: 1240px;
    min-block-size: 56px;
    margin-inline: auto;
    padding: 8px 32px;
}

/* the lockup opens the row; the rest sits at the far end. ⚠ not a margin on .brand: it is direction ltr */
.landing__nav > .brand + * {
    margin-inline-start: auto;
}

/* doors: the app's buttons - bordered, green for the one that matters */
.landing__door {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-block-size: 44px;
    padding: 8px 20px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: var(--card);
    color: var(--ink);
    font-size: 15px;
    font-weight: 700;
    line-height: 1.4;
    text-decoration: none;
    white-space: nowrap;
}

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

.landing__door--main {
    border-color: var(--green);
    background: var(--green);
    color: var(--card);
}

.landing__door--main:hover {
    border-color: var(--green);
    filter: brightness(.92);
}

.landing__door--quiet {
    border-color: transparent;
    background: transparent;
    color: var(--mute);
}

.landing__door--quiet:hover {
    border-color: transparent;
    color: var(--ink);
}

.landing__header .landing__door {
    min-block-size: 34px;
    padding: 6px 12px;
    font-size: 13.5px;
}

/* one mark, then page */
.landing__intro {
    position: fixed;
    z-index: 70;
    inset: 0;
    display: grid;
    place-items: center;
    background: var(--bg);
    pointer-events: none;
    animation-name: landing-intro-leave;
    animation-duration: .3s;
    animation-delay: .78s;
    animation-timing-function: linear;
    animation-fill-mode: forwards;
}

.landing__intro .brand__mark {
    inline-size: clamp(96px, 18vw, 160px);
    block-size: clamp(96px, 18vw, 160px);
}

.landing__intro .brand__mark path {
    fill: transparent;
    stroke: var(--green);
    stroke-width: 1.25;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    animation-name: landing-intro-draw, landing-intro-fill;
    animation-duration: .7s, .08s;
    animation-delay: 0s, .7s;
    animation-timing-function: ease-out, linear;
    animation-fill-mode: forwards;
}

@keyframes landing-intro-draw {
    to {
        stroke-dashoffset: 0;
    }
}

@keyframes landing-intro-fill {
    to {
        fill: var(--green);
    }
}

@keyframes landing-intro-leave {
    from {
        opacity: 1;
        visibility: visible;
    }

    99.9% {
        opacity: 0;
        visibility: visible;
    }

    to {
        opacity: 0;
        visibility: hidden;
    }
}

/* order 3: hero - the words at the start, the film beside them on a laptop */
.landing__hero {
    display: grid;
    align-items: center;
    gap: 32px;
    max-inline-size: 1240px;
    margin-inline: auto;
    padding: 48px 32px 56px;
}

.landing__stage {
    position: relative;
    display: grid;
    place-items: center;
    padding-block: 12px;
    /* andoosh walks in from beyond the edge - the slide must not widen 390; clip sideways only */
    overflow: hidden;
    overflow: clip visible;
}

.landing__phone {
    position: relative;
    inline-size: clamp(200px, 50vw, 250px);
    aspect-ratio: 390 / 844;
    margin: 0;
    border: 8px solid var(--ink);
    border-radius: 28px;
    background: var(--ink);
    overflow: hidden;
    /* a shadow is darkness in both themes; an ink shadow glows white in dark */
    box-shadow: 0 24px 48px -24px rgb(0 0 0 / .45);
}

/* the film never leaves the phone; the poster hides only after `playing` */
.landing__poster,
.landing__film {
    position: absolute;
    inset: 0;
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
}

.landing--film-playing .landing__poster {
    visibility: hidden;
}

.landing__andoosh {
    position: absolute;
    inset-block-end: 3%;
    inset-inline-start: 4%;
    inline-size: clamp(90px, 24vw, 132px);
    animation: landing-andoosh-walk 1.1s cubic-bezier(.2, .8, .3, 1) both;
}

/* the walk shares the one authored opening - no burst, no float, no blink after it */
@keyframes landing-andoosh-walk {
    from {
        transform: translateX(70%);
        opacity: 0;
    }

    to {
        transform: none;
        opacity: 1;
    }
}

/* transform ignores dir: in LTR inline-start is the LEFT edge, so beyond it is -70% */
html[dir="ltr"] .landing__andoosh {
    animation-name: landing-andoosh-walk-ltr;
}

@keyframes landing-andoosh-walk-ltr {
    from {
        transform: translateX(-70%);
        opacity: 0;
    }

    to {
        transform: none;
        opacity: 1;
    }
}

/* the copy leads on a phone too: the question first, the film under it */
.landing__hero-copy {
    order: -1;
}

.landing__ask {
    margin: 0 0 12px;
    font-size: clamp(30px, 4vw, 40px);
    font-weight: 800;
    line-height: 1.25;
}

.landing__ask > span {
    display: block;
}

.landing__ask-answer {
    color: var(--green);
}

.landing__hero-body {
    margin: 0 0 24px;
    max-inline-size: 40ch;
    color: var(--mute);
    font-size: 16px;
}

.landing__doors {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

/* orders 4-7: four calm cards - line art in the brand green, a title, one sentence */
.landing__features {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    max-inline-size: 1240px;
    margin-inline: auto;
    padding: 0 32px 48px;
}

.landing__calm {
    padding: 20px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--card);
}

.landing__calm h2 {
    margin: 14px 0 6px;
    font-size: 16px;
    font-weight: 800;
    line-height: 1.4;
}

.landing__calm p {
    margin: 0;
    color: var(--mute);
}

/* one sheet, four crops: landing-art.svg is 4 squares side by side (T025). a mask, so the
   line art wears the theme's green in light and dark alike */
.landing__art {
    inline-size: 56px;
    block-size: 56px;
    background: var(--green);
    -webkit-mask-image: url("/images/landing/landing-art.svg");
    mask-image: url("/images/landing/landing-art.svg");
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 400% 100%;
    mask-size: 400% 100%;
    /* a neighbour's stroke crosses the crop edge by a pixel: trim both sides */
    clip-path: inset(0 3px);
}

.landing__art--quantity {
    -webkit-mask-position: 0% 50%;
    mask-position: 0% 50%;
}

.landing__art--movement {
    -webkit-mask-position: 33.3333% 50%;
    mask-position: 33.3333% 50%;
}

.landing__art--device {
    -webkit-mask-position: 66.6667% 50%;
    mask-position: 66.6667% 50%;
}

.landing__art--phone-first {
    -webkit-mask-position: 100% 50%;
    mask-position: 100% 50%;
}

/* order 8: closing invitation - one card, centred words, the two doors */
.landing__close {
    inline-size: min(1176px, calc(100% - 64px));
    margin: 0 auto 48px;
    padding: 40px 24px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--card);
    text-align: center;
}

.landing__close h2 {
    margin: 0 0 8px;
    font-size: 22px;
    font-weight: 800;
    line-height: 1.35;
}

.landing__close p {
    margin: 0 auto 20px;
    max-inline-size: 48ch;
    color: var(--mute);
}

.landing__close .landing__doors {
    justify-content: center;
}

/* order 9: footer - one muted line and the sign-in word */
.landing__footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    /* the hairline spans the cards above it, not the padding around them */
    inline-size: min(1176px, calc(100% - 64px));
    margin-inline: auto;
    padding: 16px 0 24px;
    border-block-start: 1px solid var(--line);
    color: var(--mute);
    font-size: 13px;
}

.landing__footer p {
    margin: 0;
}

@media (min-width: 900px) {
    .landing__hero {
        grid-template-columns: 1.1fr .9fr;
        padding-block: 64px 72px;
    }

    .landing__hero-copy {
        grid-column: 1;
        grid-row: 1;
    }

    .landing__stage {
        grid-column: 2;
        grid-row: 1;
    }
}

@media (max-width: 1000px) {
    .landing__features {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .landing__nav,
    .landing__hero,
    .landing__features {
        padding-inline: 16px;
    }

    .landing__hero {
        padding-block: 28px 40px;
    }

    .landing__features {
        grid-template-columns: 1fr;
    }

    .landing__close,
    .landing__footer {
        inline-size: calc(100% - 32px);
    }
}

/* one row at 390: setup waits in the hero and the closing card */
@media (max-width: 480px) {
    .landing__header .landing__door[href$="setup"] {
        display: none;
    }
}

/* reduced motion: Andoosh stands still from the first frame (R6) */
@media (prefers-reduced-motion: reduce) {
    .landing__intro {
        display: none;
        animation: none;
    }

    /* the LTR rule outweighs .landing__andoosh alone - name it or English still walks */
    .landing__andoosh,
    html[dir="ltr"] .landing__andoosh {
        animation: none;
    }
}

/* ── design v5 2c (D030-D033): catalog, notifications, people/admin, wall states ────────── */

/* a row's tags line: how it is counted, stopped, the role - words on the tint, never colour alone */
.prow-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-block-start: 6px;
}

/* the one button above the list, so it stays above the fold with any list length (D030) */
.product-actions--top {
    padding-block: 0 14px;
}

/* the three catalog doors as one card of 48px rows, under the list (DESIGN §2: nothing in the band) */
.card.doors {
    flex-direction: column;
    gap: 0;
    margin-block-start: 16px;
    padding-block: 0;
}

.card.doors .link {
    min-block-size: 48px;
    padding-inline: 0;
    border-block-end: 1px solid var(--line);
}

.card.doors .link:last-child {
    border-block-end: 0;
}

/* a fieldset is a field: no box of its own; min-inline-size 0 or it refuses to shrink under 390 */
.field--picks,
.field--modes {
    min-inline-size: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

/* the duplicate card: one question, open it or start it again */
.exists {
    margin-block-end: 14px;
}

/* toast (D031): a details element - the summary is the quiet dismiss, no script; closed = gone */
.toast {
    display: flex;
    align-items: center;
    gap: 12px;
    animation: toast-in .3s ease-out both;
}

.toast:not([open]) {
    display: none;
}

.toast__text {
    flex: 1;
    order: 0;
    margin: 0;
    min-inline-size: 0;
    overflow-wrap: anywhere;
}

.toast__close {
    order: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    min-block-size: 48px;
    min-inline-size: 48px;
    padding-inline: 14px;
    border-radius: 10px;
    background: var(--hover);
    color: var(--mute);
    font-size: 13.5px;
    font-weight: 700;
    list-style: none;
    cursor: pointer;
    touch-action: manipulation;
}

.toast__close::-webkit-details-marker {
    display: none;
}

.toast__close:focus-visible {
    outline: 3px solid var(--ink);
    outline-offset: 2px;
}

/* transform + opacity only (DESIGN §7); the app-wide reduced-motion rule turns it off */
@keyframes toast-in {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

/* the retired fold's summary is a tap: 48px like every other target */
.fold__head {
    min-block-size: 48px;
    align-items: center;
}

/* ── design v5 3 (D041): the ui-ux-pro-max sweep over the D040 walk ─────────────────────────── */

/* a row's name is what the reader came for: body copy (run 1 measured 16.5px) */
.prow-name {
    font-size: 14px;
}

/* a control says what it does, in body copy (15px measured) */
.toast__close {
    font-size: 14px;
}

/* the ask screen's prompt is a sentence, not a caption (15.5px measured); its hint stays small */
.answer-empty {
    font-size: 14px;
}

/* the in-device reference never falls under the 13px small-text floor (12px measured). the raw
   device id it prints is 004's own leftover, not a style matter: recorded, not restyled */
.device-ref {
    font-size: 13px;
}

/* step screens: 12px between the parts of ONE question (the next step down the §5 scale) buys the
   11px the regrade screen's button needed to clear the fixed nav (run 1: bottom 790 of fold 779) */
.stepshell .stack--card {
    gap: 12px;
}

/* ── 006 money, v5 rows: the money screens moved to «v6 lane 3»; share + deliver still read these ── */
.moneyrow {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-block-size: 56px;
    padding-block: 10px;
    border-block-end: 1px solid var(--line);
    color: inherit;
    text-decoration: none;
}

.rows > li:last-child .moneyrow {
    border-block-end: 0;
}

.moneyrow:hover {
    background: var(--hover);
}

.moneyrow:focus-visible {
    outline: 3px solid var(--green);
    outline-offset: -3px;
}

.moneyrow:not(a) {
    cursor: default;
}

.moneyrow__what {
    min-inline-size: 0;
    font-weight: 700;
    overflow-wrap: anywhere;
}

.moneyrow__state {
    color: var(--mute);
    font-size: 14px;
}

/* a yes/no row: the box, then the name. the whole row is the tap target */
.field--check {
    display: flex;
    align-items: center;
    gap: 12px;
    min-block-size: 48px;
}

.field--check .field__label {
    margin: 0;
    font-weight: 600;
}

.field__check {
    inline-size: 24px;
    block-size: 24px;
    accent-color: var(--green);
    flex: none;
}

/* the one question before an unpaid handover (FR-017) */
.deliver__unpaid {
    margin: 0 0 4px;
    font-size: 14px;
    font-weight: 700;
}

/* the keep-price switch: the box beside its word (T104b) */
.field--switch {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.field__switch {
    inline-size: 28px;
    block-size: 28px;
    flex: none;
    accent-color: var(--green);
}

/* ⚠ a short word like «صور» measured 46px wide - under the 48px tap floor */
.stepback .link {
    display: inline-block;
    min-inline-size: 48px;
    text-align: center;
}
/* ── 007 share · s1 ── v5 tokens only, no new colour (DESIGN §5, §6) ─────────────────────── */
/* csp drops a style ATTRIBUTE silently, so every number below is a class */
.share {
    --share-gap: 12px;
}

/* the item photos as tap targets. one is chosen, a second tap replaces it */
.sharetiles {
    list-style: none;
    margin: 12px 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
    gap: var(--share-gap);
}

.sharetile {
    display: block;
    inline-size: 100%;
    aspect-ratio: 1;
    padding: 0;
    border: 2px solid var(--line);
    border-radius: 12px;
    background: var(--card);
    overflow: hidden;
    cursor: pointer;
}

/* the chosen one must read from across the counter, not by a hairline */
.sharetile--chosen {
    border-color: var(--green);
    box-shadow: inset 0 0 0 3px var(--green-soft);
}

.sharetile img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    display: block;
}

/* the balance line above the words. never a heading, never a second question */
.sharecredits {
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
    margin: 0 0 12px;
    color: var(--mute);
    /* 17px floor: this line is body copy, not a caption (DESIGN §4) */
    font-size: 14px;
}

/* the price switch rides one 48px row with its word - the only two-control screen */
.field--row {
    display: flex;
    align-items: center;
    gap: 10px;
    min-block-size: 48px;
}

.sharecredits b {
    font-family: "Archivo", "Cairo", sans-serif;
    font-size: 19px;
    font-variant-numeric: tabular-nums;
    color: var(--ink);
}

/* the package is nearly spent - a warning colour, still not a second button */
.sharecredits--low b {
    color: var(--red);
}

/* the card itself, big. it is the whole answer of the card-ready screen */
.sharecard {
    display: block;
    inline-size: 100%;
    max-inline-size: 360px;
    margin: 12px auto;
    border-radius: 14px;
    border: 1px solid var(--line);
    background: var(--hover);
}

/* the card is 1080px wide: unbound it scrolls the phone sideways */
.sharecard img {
    display: block;
    inline-size: 100%;
    block-size: auto;
    border-radius: 14px;
}

/* «أعد الصنع» is a plain link under the one main button, never a second button */
.sharecard__again {
    display: block;
    margin: 14px 0 0;
    text-align: center;
}

.sharecard__cost {
    display: block;
    margin: 4px 0 0;
    text-align: center;
    color: var(--mute);
    font-size: 14px;
}

/* prepared or shared, said as a word. never «نُشرت» */
.sharestate {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 999px;
    background: var(--hover);
    color: var(--mute);
    /* a state word is body copy, and body copy has a 17px floor */
    font-size: 14px;
}

.sharestate--shared {
    background: var(--green-soft);
    color: var(--green);
}

/* the cards of one item, under its photos, links only (FR-046) */
.sharecards {
    list-style: none;
    margin: 8px 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
    gap: 8px;
}

/* one row, one 48px link: the thumb and the words sit inside it */
.sharecards .link {
    display: flex;
    align-items: center;
    gap: 10px;
    min-block-size: 48px;
    min-inline-size: 48px;
}

.sharecards img {
    inline-size: 100%;
    max-inline-size: 88px;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: 10px;
    display: block;
}

/* ── 007 share · s2 ── v5 tokens only, no new colour (DESIGN §5, §6) ─────────────────────── */
/* csp drops a style ATTRIBUTE silently, so every number below is a class */

/* the sheet button and the fallback pair sit on the card screen, one under the other */
.sharesheet {
    margin: 16px 0 0;
}

.sharesheet .button--main {
    inline-size: 100%;
}

/* decision 14: no sheet, no lie - the download and the copy are quiet, never main */
.sharefallback {
    margin: 12px 0 0;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    font-size: 14px;
}

.sharefallback .link,
.sharefallback .button--quiet {
    min-block-size: 48px;
    min-inline-size: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
}

/* the promise's own form. it is never tapped: the script submits it (inv 104) */
.sharemark {
    display: none;
}

/* which rung drew it - the WORD, never a provider's name (FR-047) */
.sharepainter {
    font-size: 13px;
    color: var(--mute);
}

/* the free reshare on a gallery row: quiet, so the list still shows 0 main buttons */
.sharereshare {
    margin: 0;
}

.sharereshare .button--quiet {
    min-block-size: 48px;
    min-inline-size: 48px;
    font-size: 14px;
    padding-inline: 14px;
}

/* s2 put a painter word and a reshare ask on every row: one card per line, and it wraps */
.sharecards {
    grid-template-columns: 1fr;
}

.sharecards .moneyrow {
    flex-wrap: wrap;
}

/* the thumb and the words take the whole line; the state, the rung and the ask sit under them */
.sharecards .link {
    flex: 1 1 100%;
    min-inline-size: 0;
}

.sharecards img {
    max-inline-size: 64px;
}

/* the repair door's upload: the same field the item photo page uses */
.share .field__input[type="file"] {
    min-block-size: 48px;
    font-size: 14px;
}

/* -- uat batch 0 -- */

/* -- uat batch 1b -- */

/* S-55: the open range is the filled chip; a kind is a part of «الداخل», indented under it */
.spans .link--current {
    background: var(--green-soft);
    color: var(--green);
    box-shadow: none;
}

.moneyrow--part {
    min-block-size: 44px;
    padding-inline-start: 18px;
    color: var(--mute);
}

.moneyrow--part .moneyrow__what {
    font-weight: 400;
}

/* S-78: a tap that grazes a choice row never paints the browser's blue selection */
.choice,
.choice * {
    user-select: none;
    -webkit-user-select: none;
    -webkit-tap-highlight-color: transparent;
}

/* S-51: one quiet-action look for every secondary link - a bordered 48px pill, no underline */
.stepnext .link,
.stepback .link,
.doors .link,
.product-actions .link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-block-size: 48px;
    padding-inline: 16px;
    border: 1.5px solid var(--line);
    border-radius: 12px;
    background: var(--card);
    color: var(--green);
    font-weight: 700;
    text-decoration: none;
}

/* S-40: the required mark, quiet - clay would read as «wrong» before anything was typed */
.field__req {
    margin-inline-start: 2px;
    color: var(--mute);
    font-weight: 400;
}

/* -- uat batch 2 screens -- */

.moneyhome__rows {
    margin-block-start: 16px;
}

/* quiet doors under the one button: pills that wrap, 8px apart */
.moneyhome__doors {
    margin-block-start: 16px;
    gap: 8px;
}

/* -- uat batch 2 fix -- */

/* SH-2: with matches the new-person fields open only under «زبون جديد»; no :has = always open */
.intake--matches .intake-new {
    display: none;
}

.intake--matches:has(.field__choice[name="customer"][value="new"]:checked) .intake-new {
    display: block;
}

/* -- uat batch 3 lists -- */

/* D-2 managed list: the whole row is one link - name, one fact, a hairline under it */
.mrow {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-block-size: 56px;
    padding-block: 10px;
    border-block-end: 1px solid var(--line);
    color: inherit;
    text-decoration: none;
}

.rows > li:last-child .mrow {
    border-block-end: 0;
}

.mrow:hover {
    background: var(--hover);
}

.mrow:focus-visible {
    outline: 3px solid var(--green);
    outline-offset: -3px;
    border-radius: 10px;
}

.mrow__name {
    min-width: 0;
    font-weight: 700;
    overflow-wrap: anywhere;
}

.mrow__fact {
    flex: none;
    color: var(--mute);
    font-size: 14px;
    font-variant-numeric: tabular-nums;
}

.mrow--stopped .mrow__name {
    color: var(--mute);
}

/* a tree row indents by class; the CSP drops style="" */
.mrow--d1 { padding-inline-start: 16px; }
.mrow--d2 { padding-inline-start: 28px; }
.mrow--d3 { padding-inline-start: 40px; }
.mrow--d4 { padding-inline-start: 52px; }
.mrow--d5 { padding-inline-start: 64px; }

/* -- uat batch 3 money -- */

/* S-69: money still owed at the handover = refusal weight, a pill above the button */
.deliver__owed {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    margin: 0 0 4px;
    padding: 6px 12px;
    border-radius: 999px;
    background: var(--ochre-soft);
    color: var(--red);
    font-size: 14px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.pastmore > summary {
    min-height: 48px;
    display: flex;
    align-items: center;
}

/* ── v6 lane 1: repairs (board, job, job steps, intake) ───────────── */

/* the board's views: bordered pills, the open one is the ink pill (like the top bar) */
.boardviews {
    margin: 0 0 14px;
}

.views {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.view {
    display: inline-flex;
    align-items: center;
    padding: 5px 12px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: var(--card);
    color: var(--mute);
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
}

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

.view--current,
.view--current:hover {
    border-color: var(--ink);
    background: var(--ink);
    color: var(--card);
}

.board__foot {
    margin: 12px 0 0;
}

.card__empty {
    margin: 0;
    color: var(--mute);
    font-size: 13.5px;
}

/* tables: sticky header under the bar, 13.5px rows, hover row, the row's first link covers the row */
.rtable-wrap {
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--card);
    overflow: clip;
}

.rtable {
    inline-size: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 13.5px;
}

.rtable th {
    position: sticky;
    inset-block-start: 52px;
    z-index: 1;
    padding: 9px 14px;
    border-block-end: 1px solid var(--line);
    background: var(--hover);
    color: var(--mute);
    font-size: 12.5px;
    font-weight: 700;
    text-align: start;
    white-space: nowrap;
}

.rtable td {
    padding: 10px 14px;
    border-block-end: 1px solid var(--line);
    vertical-align: middle;
}

.rtable tbody tr {
    position: relative;
}

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

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

.rtable .rtable__n {
    text-align: end;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.rtable__n--zero {
    color: var(--mute);
}

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

/* a door inside a covered row rides above the cover */
.rtable__act .button {
    position: relative;
    z-index: 2;
    padding-block: 5px;
}

.rtable__open,
.jobs .boardrow {
    color: inherit;
    font-weight: 700;
    text-decoration: none;
}

.rtable__open::after,
.jobs .boardrow::after {
    content: "";
    position: absolute;
    inset: 0;
}

.rtable__open:hover,
.jobs .boardrow:hover {
    text-decoration: underline;
}

.rtable__spec {
    display: block;
    color: var(--mute);
    font-size: 12.5px;
}

.jobs .boardrow {
    font-size: 15px;
    font-weight: 800;
}

.jobs__who {
    font-weight: 700;
}

.jobs__tech,
.jobs__when {
    color: var(--mute);
}

.jobs__when {
    white-space: nowrap;
}

/* the job head: #N and the device on one line, the state chip leads the fact line */
.jobhead {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 12px;
}

.jobhead > [aria-hidden] {
    font-size: 24px;
    direction: ltr;
    unicode-bidi: isolate;
    font-variant-numeric: tabular-nums;
}

.jobband__state {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

.actions form {
    margin: 0;
}

.actions a.actions__danger,
.button.actions__danger {
    color: var(--red);
}

/* the job page: facts and parts on the right, the timeline and past visits on the left */
.jobgrid {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    gap: 18px;
    align-items: start;
}

.jobgrid__side,
.jobgrid__main {
    display: flex;
    flex-direction: column;
    gap: 18px;
    min-inline-size: 0;
}

.jobpanel {
    min-inline-size: 0;
}

.facts.card {
    padding-block: 2px;
}

.fact {
    grid-template-columns: 96px 1fr;
    padding-block: 9px;
    font-size: 13.5px;
}

.fact__label {
    font-size: 13px;
}

/* an ended job or a job waiting on someone: one line above the columns */
.ended,
.waiting {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 12px;
    margin: 0 0 16px;
    padding: 10px 14px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--card);
    color: var(--ink);
    font-size: 13.5px;
    font-weight: 700;
}

.waiting {
    border-color: var(--ochre);
    background: var(--ochre-soft);
    color: var(--ochre-ink);
}

.ended__who {
    color: var(--mute);
    font-size: 13px;
    font-weight: 400;
}

#job > .refused,
.jobstep .refused,
.formpage .refused,
.managed .refused {
    margin: 0 0 14px;
}

/* parts on the job: name × n, a chip, who and when, the one legal move */
.card.parts {
    padding-block: 4px;
}

.part {
    padding-block: 10px;
    font-size: 13.5px;
}

.part__state {
    grid-area: state;
    align-self: start;
}

.part__state--in {
    border: 1px solid var(--ink);
    background: var(--card);
    color: var(--ink);
}

.part__who {
    font-size: 12.5px;
}

.part__actions {
    margin-block-start: 2px;
}

.part__actions form {
    margin: 0;
}

.card.parts .card__empty {
    padding-block: 10px;
}

.card.rounds {
    padding-block: 2px;
}

.round {
    min-block-size: 0;
    padding-block: 9px;
    font-size: 13.5px;
}

.round__number,
.round__decision {
    font-size: 13px;
}

/* the timeline: a line down the side, one dot per fact; notes are muted, moves wear their chip */
.timeline {
    margin: 0;
    padding: 8px 16px;
    list-style: none;
}

.timeline .move {
    position: relative;
    min-block-size: 0;
    padding-block: 8px;
    padding-inline-start: 22px;
    border-block-end: 0;
    font-size: 13.5px;
}

.timeline .move::before {
    content: "";
    position: absolute;
    inset-block: 0;
    inset-inline-start: 5px;
    border-inline-start: 2px solid var(--line);
}

.timeline .move:first-child::before {
    inset-block-start: 16px;
}

.timeline .move:last-child::before {
    inset-block-end: auto;
    block-size: 16px;
}

.timeline .move:only-child::before {
    display: none;
}

.timeline .move::after {
    content: "";
    position: absolute;
    inset-block-start: 12px;
    inset-inline-start: 1px;
    inline-size: 10px;
    block-size: 10px;
    border: 2px solid var(--green);
    border-radius: 50%;
    background: var(--card);
}

.move--note {
    color: var(--mute);
}

.timeline .move--note::after {
    border-color: var(--line);
}

.move__when {
    font-size: 12.5px;
}

/* past visits: #N, chip, who, when on one line; complaint and diagnosis under it */
.pastjob {
    padding-block: 10px;
}

.pastjob__head {
    gap: 4px 10px;
    margin: 0 0 2px;
}

.pastjob__number {
    min-block-size: 0;
    min-inline-size: 0;
    color: var(--ink);
    font-family: inherit;
    font-size: 15px;
    text-decoration: none;
}

.pastjob__number:hover {
    text-decoration: underline;
}

.pastjob__who {
    margin: 0;
    color: var(--mute);
    font-size: 13px;
    font-weight: 400;
}

.pastjob__when {
    font-size: 12.5px;
}

.pastjob__note {
    font-size: 13.5px;
}

/* a job step: the form card, the job's facts beside it */
.jobstep {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 18px;
    align-items: start;
}

.jobstep__main {
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-inline-size: 0;
    max-inline-size: 760px;
}

.jobstep__aside {
    position: sticky;
    inset-block-start: 70px;
}

.jobfacts {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 14px;
    margin: 0;
    font-size: 13.5px;
}

.jobfacts dt,
.jobfacts dd {
    padding-block: 7px;
    border-block-start: 1px solid var(--line);
}

.jobfacts dt:first-of-type,
.jobfacts dd:first-of-type {
    border-block-start: 0;
}

.jobfacts dt {
    color: var(--mute);
    font-size: 13px;
    font-weight: 700;
}

.jobfacts dd {
    margin: 0;
    overflow-wrap: anywhere;
}

/* forms as cards: visible labels, the main button at the form's start */
.form {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 18px 20px;
}

.form__foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 0;
}

.form--cols {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 18px;
}

.form.form--cols > .form__foot {
    grid-column: 1 / -1;
}

.formpage {
    display: flex;
    flex-direction: column;
    gap: 14px;
    max-inline-size: 640px;
}

.form .field__input--area {
    min-block-size: 84px;
}

.form .amountrow {
    grid-template-columns: minmax(0, 240px) 110px;
    justify-content: start;
}

.field__input--amount {
    font-variant-numeric: tabular-nums;
}

/* choices: bordered rows, the picked one green; a row of choices wraps like chips */
.form .choicelist {
    gap: 6px;
}

.form .choicelist > legend {
    margin-block-end: 6px;
}

.form .choice {
    min-block-size: 40px;
    padding: 7px 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    font-size: 13.5px;
}

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

.form .choice:has(.field__choice:checked) {
    border-color: var(--green);
    background: var(--green-soft);
}

.form .field__choice {
    inline-size: 16px;
    block-size: 16px;
}

.form .choice__spec {
    font-size: 12.5px;
}

.choicelist--row {
    flex-direction: row;
    flex-wrap: wrap;
}

.form .choice--card {
    border-block-end: 1px solid var(--line);
}

.form .more {
    padding: 0 14px;
    border: 1px dashed var(--line);
    border-radius: 8px;
    background: transparent;
}

.form .more__word {
    min-block-size: 40px;
    font-size: 13.5px;
}

.form .more[open] {
    padding-block-end: 14px;
}

/* the one slip that costs money: said above the button, in red on the soft ground (FR-017) */
.deliver__warn {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 2px 12px;
    padding: 12px 14px;
    border: 1px solid var(--red);
    border-radius: 8px;
    background: var(--ochre-soft);
    color: var(--red);
}

.deliver__icon {
    grid-row: span 2;
    inline-size: 22px;
    block-size: 22px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.deliver__warn .deliver__owed {
    margin: 0;
    padding: 0;
    border-radius: 0;
    background: none;
    font-size: 15px;
}

.deliver__warn .deliver__unpaid {
    margin: 0;
    color: var(--ink);
    font-size: 13.5px;
}

.consumes__lead {
    font-size: 13.5px;
}

.consume {
    min-block-size: 0;
    padding-block: 8px;
    font-size: 13.5px;
}

/* the intake: the phone on the right, the whole form beside it */
.intake-grid {
    display: grid;
    grid-template-columns: 320px minmax(0, 1fr);
    gap: 18px;
    align-items: start;
}

.intake-lookup {
    position: sticky;
    inset-block-start: 70px;
}

.intake-lookup .panel__title {
    margin: 0;
}

#intake-answer {
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-inline-size: 0;
}

.formsec {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 0;
    padding: 0 0 16px;
    border: 0;
    border-block-end: 1px solid var(--line);
}

.formsec.form--cols {
    display: grid;
}

.formsec.choicelist--row {
    flex-direction: row;
}

/* device types: the list, the add form beside it */
.managed {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 18px;
    align-items: start;
}

.managed__list {
    min-inline-size: 0;
}

.devicehistory {
    max-inline-size: 820px;
}

@media (max-width: 1000px) {
    .jobgrid,
    .jobstep,
    .intake-grid,
    .managed {
        grid-template-columns: minmax(0, 1fr);
    }

    .jobstep__aside,
    .intake-lookup {
        position: static;
    }

    .jobstep__main {
        max-inline-size: none;
    }
}

@media (max-width: 640px) {
    .form--cols,
    .formsec.form--cols {
        grid-template-columns: minmax(0, 1fr);
    }

    .form {
        padding: 14px;
    }

    /* a table becomes one card per row on the phone, same markup */
    .rtable thead {
        display: none;
    }

    .rtable,
    .rtable tbody,
    .rtable tr,
    .rtable td {
        display: block;
    }

    .rtable td {
        padding: 0;
        border: 0;
    }

    .rtable tbody tr {
        padding: 10px 14px;
        border-block-end: 1px solid var(--line);
    }

    .rtable tbody tr:last-child {
        border-block-end: 0;
    }

    .jobs tbody tr {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr) auto;
        grid-template-areas: "no device state" "no who when" "no tech tech";
        gap: 2px 12px;
        align-items: center;
    }

    .jobs__no { grid-area: no; align-self: start; }
    .jobs__device { grid-area: device; font-weight: 700; }
    .jobs__who { grid-area: who; font-weight: 400; }
    .jobs__state { grid-area: state; }
    .jobs__tech { grid-area: tech; font-size: 12.5px; }
    .jobs__when { grid-area: when; font-size: 12.5px; }

    .partrows tbody tr {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 6px 12px;
    }

    .partrows .rtable__n {
        margin-inline-start: auto;
    }
}


/* ── v6 lane 2: stock + catalog (tables, split page, form cards, filters) ── */

/* the page under the head: blocks 16px apart, nothing else */
.flow {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-inline-size: 0;
}

/* detail page: facts on the right (first child in rtl), the list or history on the left */
.split {
    display: grid;
    grid-template-columns: minmax(280px, 360px) minmax(0, 1fr);
    gap: 16px;
    align-items: start;
}

.split > * {
    min-inline-size: 0;
}

/* data table: sticky head under the 52px bar, 13.5px rows, hover row */
.dtable-wrap {
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--card);
    overflow: clip;
}

.dtable {
    inline-size: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 13.5px;
}

.dtable th {
    position: sticky;
    inset-block-start: 52px;
    z-index: 1;
    padding: 8px 12px;
    border-block-end: 1px solid var(--line);
    background: var(--card);
    color: var(--mute);
    font-size: 12.5px;
    font-weight: 700;
    text-align: start;
    white-space: nowrap;
}

.dtable td {
    padding: 9px 12px;
    border-block-end: 1px solid var(--line);
    vertical-align: middle;
}

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

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

.dtable__name {
    font-weight: 700;
    overflow-wrap: anywhere;
    unicode-bidi: plaintext;
}

.dtable__name a {
    text-decoration: none;
}

.dtable__name a:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
}

.dtable__sub {
    display: block;
    color: var(--mute);
    font-size: 12.5px;
    font-weight: 400;
}

.dtable__muted {
    color: var(--mute);
    font-size: 12.5px;
}

/* the one number of a row, and under it why (none now, stopped) */
.dtable__n {
    inline-size: 1%;
    text-align: end;
    white-space: nowrap;
}

.dtable__n b {
    display: block;
    color: var(--ink);
    font-size: 16px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    direction: ltr;
    unicode-bidi: isolate;
}

.dtable__n--zero b {
    color: var(--mute);
}

.dtable__why {
    color: var(--mute);
    font-size: 12.5px;
}

.dtable__doors {
    inline-size: 1%;
    white-space: nowrap;
}

.dtable__doors > * + * {
    margin-inline-start: 6px;
}

.dtable tr.is-stopped .dtable__name,
.dtable tr.is-stopped .dtable__name a {
    color: var(--mute);
}

/* a tree row indents by class; the csp drops style="" */
.dtable .indent--1 { padding-inline-start: 30px; }
.dtable .indent--2 { padding-inline-start: 48px; }
.dtable .indent--3 { padding-inline-start: 66px; }
.dtable .indent--4 { padding-inline-start: 84px; }
.dtable .indent--5 { padding-inline-start: 102px; }

/* small bordered door inside a row */
.button--sm {
    padding: 4px 10px;
    font-size: 12.5px;
}

.button--sm.button--quiet:hover {
    border-color: var(--ink);
}

/* inline rename: the name input and its save button on one line */
.rename {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0;
}

.rename .field__input {
    flex: 1 1 auto;
    min-inline-size: 0;
    max-inline-size: 320px;
    min-block-size: 32px;
    padding: 4px 10px;
    font-size: 13.5px;
    font-weight: 700;
}

.table-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    color: var(--mute);
    font-size: 12.5px;
}

/* form card: labels above inputs, 14px between fields, one green button at the start */
.formcard {
    display: flex;
    flex-direction: column;
    gap: 14px;
    max-inline-size: 760px;
    padding: 18px 20px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--card);
}

.formcard--wide {
    max-inline-size: none;
}

.formcard__note {
    margin: 0;
    color: var(--mute);
}

.formcard__row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.formcard__section {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding-block-start: 14px;
    border-block-start: 1px solid var(--line);
}

.formcard__section > h2 {
    margin: 0;
    color: var(--mute);
    font-size: 13px;
    font-weight: 700;
}

.formcard__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.formcard__pick {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    gap: 8px;
    margin: 0;
}

.formcard__pick > .field {
    flex: 1 1 320px;
}

.formcard .field__input--qty {
    max-inline-size: 160px;
}

/* a row of pill choices (condition, mode, brand, model) instead of 48px phone rows */
.picks {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0;
    border: 0;
    min-inline-size: 0;
}

.picks > legend {
    margin-block-end: 6px;
    padding: 0;
}

.pick {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: var(--card);
    font-size: 13.5px;
    font-weight: 700;
    cursor: pointer;
}

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

.pick:has(input:checked) {
    border-color: var(--green);
    background: var(--green-soft);
    color: var(--green);
}

.pick input {
    margin: 0;
    accent-color: var(--green);
}

.pick__help {
    display: block;
    color: var(--mute);
    font-size: 12.5px;
    font-weight: 400;
}

.picks__note {
    flex-basis: 100%;
    font-size: 12.5px;
}

/* a warning card: ochre edge, the words say it too (never colour alone) */
.warn {
    border-color: var(--ochre);
    background: var(--ochre-soft);
}

.warn__title {
    margin: 0 0 6px;
    color: var(--ochre-ink);
    font-weight: 700;
}

.warn__list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.warn__list a {
    color: var(--ink);
    font-weight: 700;
}

.pick--block {
    align-items: start;
    flex: 1 1 260px;
}

.pick--block input {
    margin-block-start: 5px;
}

/* filter chips: plain GET links, the open one filled ink and aria-current */
.filters {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

.filters__label {
    margin-inline-end: 4px;
    color: var(--mute);
    font-size: 12.5px;
    font-weight: 700;
}

.filters a {
    padding: 3px 10px;
    border: 1px solid var(--line);
    border-radius: 4px;
    background: var(--card);
    color: var(--ink);
    font-size: 12.5px;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}

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

.filters a[aria-current] {
    border-color: var(--ink);
    background: var(--ink);
    color: var(--card);
}

/* the stock answer's facts card: the number big, the name, where the pieces sit */
.stockfacts {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.stockfacts__top {
    display: flex;
    align-items: baseline;
    gap: 10px;
}

.stockfacts__n {
    color: var(--green);
    font-size: 30px;
    font-weight: 800;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    direction: ltr;
    unicode-bidi: isolate;
}

.stockfacts__n--zero {
    color: var(--mute);
}

.stockfacts__lead {
    color: var(--mute);
    font-size: 13px;
    font-weight: 700;
}

.stockfacts h2,
.stockfacts h1 {
    margin: 0;
    font-size: 16px;
    font-weight: 800;
    line-height: 1.35;
    unicode-bidi: plaintext;
}

.stockfacts__spec {
    margin: 0;
    color: var(--mute);
    font-size: 12.5px;
}

.stockfacts__where {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    list-style: none;
    border-block-start: 1px solid var(--line);
}

.stockfacts__where li {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding-block: 6px;
    border-block-end: 1px solid var(--line);
    font-size: 13.5px;
}

.stockfacts__where b {
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

/* an operation's source row: the count, the part, where, condition, serial - one line */
.itemfacts {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
    padding-block-end: 14px;
    border-block-end: 1px solid var(--line);
}

.itemfacts > b {
    color: var(--green);
    font-size: 22px;
    font-weight: 800;
    line-height: 1;
}

.itemfacts__name {
    font-weight: 800;
    unicode-bidi: plaintext;
}

.itemfacts .chip,
.itemfacts .tag,
.itemfacts .place-device,
.itemfacts .serial {
    margin: 0;
    padding: 0 7px;
    border-radius: 4px;
    font-size: 12.5px;
}

/* a calm empty line inside a card */
.empty {
    margin: 0;
    padding: 14px 16px;
    border: 1px dashed var(--line);
    border-radius: 8px;
    color: var(--mute);
}

/* history: one row per movement, kind as a flag, the lines under it */
.dtable .hlines {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.dtable .hlines li {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 8px;
}

.dtable .chip,
.dtable .tag,
.dtable .tag--repair,
.dtable .place-device,
.dtable .serial,
.stockfacts .chip {
    margin: 0;
    padding: 0 7px;
    border-radius: 4px;
    font-size: 12.5px;
}

/* a part's facts: label and value rows, the rare doors under them */
dl.facts {
    margin: 0 0 12px;
}

dl.facts dd {
    margin: 0;
}

.facts__doors {
    margin-block-start: 12px;
}

/* item photos: a row of thumbs on the card */
.photos {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.photos img {
    inline-size: 120px;
    block-size: 120px;
    object-fit: cover;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--hover);
}

@media (max-width: 1000px) {
    .split {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* phone: a table row becomes a block; the head row hides, each cell says its own words */
@media (max-width: 640px) {
    .dtable thead {
        position: absolute;
        inline-size: 1px;
        block-size: 1px;
        overflow: hidden;
        clip-path: inset(50%);
    }

    .dtable,
    .dtable tbody {
        display: block;
    }

    .dtable tr {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 6px 12px;
        padding: 10px 12px;
        border-block-end: 1px solid var(--line);
    }

    .dtable tbody tr:last-child {
        border-block-end: 0;
    }

    .dtable td {
        display: block;
        padding: 0;
        border: 0;
    }

    .dtable td.dtable__name,
    .dtable td.dtable__wide {
        flex: 1 1 100%;
    }

    .dtable__n,
    .dtable__doors {
        inline-size: auto;
    }

    .dtable__doors {
        white-space: normal;
    }

    .dtable .indent--1,
    .dtable .indent--2,
    .dtable .indent--3,
    .dtable .indent--4,
    .dtable .indent--5 {
        padding-inline-start: 0;
    }

    .formcard {
        padding: 14px;
    }

    .formcard__row {
        grid-template-columns: minmax(0, 1fr);
    }

    .rename .field__input {
        max-inline-size: none;
    }
}

/* -- v6 lane 4: people, shop, settings, admin, notifications -- */

/* settings: the index on the right (first in rtl), the sections beside it */
.settings {
    display: grid;
    grid-template-columns: 200px minmax(0, 1fr);
    gap: 24px;
    align-items: start;
}

.settings__index {
    position: sticky;
    inset-block-start: 74px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.settings__index a {
    padding: 7px 12px;
    border-radius: 6px;
    color: var(--mute);
    font-size: 13.5px;
    font-weight: 700;
    text-decoration: none;
}

.settings__index a:hover {
    background: var(--hover);
    color: var(--ink);
}

.settings__body {
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-inline-size: 820px;
    min-inline-size: 0;
}

/* a jump from the index lands under the 52px bar, not behind it */
.setsec {
    scroll-margin-block-start: 74px;
}

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

/* one setting per line: what it is on the start side, its value or door on the end side */
.setrow {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding-block: 12px;
    border-block-start: 1px solid var(--line);
}

.setrow:first-child {
    border-block-start: 0;
}

.setrow form {
    margin: 0;
}

.setrow__what {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-inline-size: 0;
}

.setrow__what b {
    font-size: 14px;
    font-weight: 700;
}

.setrow__what span {
    color: var(--mute);
    font-size: 12.5px;
}

.setrow__value {
    font-weight: 700;
    overflow-wrap: anywhere;
}

/* a door row: the whole line is the link, a chevron says where it goes */
.setrow:has(> .setrow__door) {
    padding-block: 0;
}

.setrow__door {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-inline: -8px;
    padding: 12px 8px;
    border-radius: 6px;
    color: var(--ink);
    text-decoration: none;
}

.setrow__door:hover {
    background: var(--hover);
}

.setrow__go {
    inline-size: 16px;
    block-size: 16px;
    flex: none;
    fill: none;
    stroke: var(--mute);
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

html[dir="ltr"] .setrow__go {
    transform: scaleX(-1);
}

/* a post inside a table row sits on the line with the row's other doors */
.rowform {
    display: inline-block;
    margin: 0;
}

/* notifications: one card of rows; unread = a green dot, ink words and the flag (never colour alone) */
.nlist {
    margin: 0;
    padding: 0;
    list-style: none;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--card);
    overflow: clip;
}

.nlist form {
    margin: 0;
}

.nlist > li + li {
    border-block-start: 1px solid var(--line);
}

.nrow {
    display: flex;
    align-items: center;
    gap: 12px;
    inline-size: 100%;
    padding: 11px 16px;
    border: 0;
    background: none;
    color: var(--ink);
    font: inherit;
    font-size: 13.5px;
    font-weight: 700;
    text-align: start;
    cursor: pointer;
}

.nrow:hover {
    background: var(--hover);
}

.nrow__dot {
    inline-size: 8px;
    block-size: 8px;
    flex: none;
    border-radius: 50%;
    background: var(--green);
}

.nrow__text {
    flex: 1 1 auto;
    min-inline-size: 0;
    overflow-wrap: anywhere;
}

.nrow__when {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: none;
    color: var(--mute);
    font-size: 12.5px;
    font-weight: 400;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.nrow--read {
    color: var(--mute);
    font-weight: 400;
}

.nrow--read .nrow__dot {
    background: transparent;
}

@media (max-width: 1000px) {
    .settings {
        grid-template-columns: minmax(0, 1fr);
        gap: 12px;
    }

    .settings__index {
        position: static;
        flex-direction: row;
        flex-wrap: wrap;
    }

    .settings__index a {
        border: 1px solid var(--line);
        background: var(--card);
    }
}

@media (max-width: 640px) {
    .setrow {
        flex-wrap: wrap;
    }

    .nrow {
        flex-wrap: wrap;
        padding-inline: 12px;
    }

    .nrow__when {
        flex-basis: 100%;
        padding-inline-start: 20px;
    }
}

/* a dead form looks dead: no provider = the invite fields stay, greyed (S-06) */
.button:disabled,
.field__input:disabled {
    cursor: not-allowed;
    opacity: .55;
}

.button:disabled:hover {
    border-color: var(--line);
    filter: none;
}

/* a cell that opens with a bdi: plaintext would skip the isolate and read the cell as ltr */
.dtable__name:has(> bdi:first-child) {
    unicode-bidi: isolate;
}

/* ── v6 lane 3: money (panel, amount columns, amount inputs, one-form buy) ── */

/* money in green, money out red; a word or a column head says it too, never colour alone */
.amount--in {
    color: var(--green);
}

.amount--out {
    color: var(--red);
}

/* the money panel (render): the till rows as doors, a part indented under its side */
.moneypanel {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.moneypanel .till__top {
    margin: 0;
}

.moneypanel .till__rows {
    margin: 0;
}

.till__rows a {
    color: inherit;
    text-decoration: none;
}

.till__rows a:hover {
    color: var(--ink);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.till__rows .till__part {
    padding-inline-start: 14px;
    color: var(--mute);
    font-size: 12.5px;
    font-weight: 400;
}

.moneypanel__net--even {
    color: var(--ink);
}

.moneypanel__net--down {
    color: var(--red);
}

.moneypanel__sub {
    margin: 10px 0 0;
}

.moneypanel__line {
    margin: 0;
    color: var(--mute);
    font-size: 12.5px;
}

/* a side card's number: big, but under the page's one headline */
.moneypanel__n {
    color: var(--ink);
    font-size: 22px;
    font-weight: 800;
    line-height: 1;
}

/* an amount cell: end side, bold, tabular; the colour class rides the cell */
.dtable__amount {
    inline-size: 1%;
    font-weight: 800;
    text-align: end;
    white-space: nowrap;
}

.dtable th.dtable__amount {
    font-weight: 700;
}

/* amounts are typed left to right, tabular, as wide as a number and no wider */
.field__input--amount {
    max-inline-size: 220px;
    font-variant-numeric: tabular-nums;
    text-align: end;
}

/* two panels or two tables side by side; one column under 1000px */
.twin {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    align-items: start;
}

.twin > * {
    min-inline-size: 0;
}

.twin--wide {
    gap: 24px;
}

/* a money form: its first section sits flush under the card top */
.moneyform > section.formcard__section:first-of-type {
    padding-block-start: 0;
    border-block-start: 0;
}

.formcard__row--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* S-54: with suppliers the name box opens only under the new-supplier pill; no :has = always open */
.buy--suppliers:has(input[name="Supplier"][value="new"]:not(:checked)) .buy__new {
    display: none;
}

.moneyform .field--switch {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
}

.moneyform .field__switch {
    inline-size: 20px;
    block-size: 20px;
}

@media (max-width: 1000px) {
    .twin {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 640px) {
    .formcard__row--3 {
        grid-template-columns: minmax(0, 1fr);
    }

    .field__input--amount {
        max-inline-size: none;
    }

    .dtable__amount {
        inline-size: auto;
        margin-inline-start: auto;
    }
}

/* ── v6 lane 7: side menu (248px, two levels, <details> per group) + pins ── */

/* the top bar spans; the menu is the first column (right in rtl), the page the second */
.app--side {
    display: grid;
    grid-template-columns: 248px minmax(0, 1fr);
    grid-template-rows: auto 1fr;
    min-block-size: 100vh;
}

.app--side > .topbar {
    grid-column: 1 / -1;
}

.app--side > .side {
    grid-column: 1;
    grid-row: 2;
}

.app--side > main {
    grid-column: 2;
    grid-row: 2;
    inline-size: 100%;
    min-inline-size: 0;
}

/* a popover (the phone drawer); wider it undoes every UA popover rule and stays in the grid */
.side {
    position: sticky;
    inset: auto;
    inset-block-start: 52px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-self: start;
    inline-size: auto;
    block-size: calc(100vh - 52px);
    margin: 0;
    padding: 16px 12px 24px;
    overflow-y: auto;
    border: 0;
    border-inline-end: 1px solid var(--line);
    background: var(--side);
    color: var(--ink);
}

.side__drawerhead {
    display: none;
}

.side__title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 4px;
    padding-inline: 10px;
    color: var(--side-mute);
    font-size: 12.5px;
    font-weight: 700;
}

.side__empty {
    margin: 0;
    padding-inline: 10px;
    color: var(--side-mute);
    font-size: 12.5px;
}

.side__list {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin: 0;
    padding: 0;
    list-style: none;
}

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

/* level 1: icon + word, bold */
.side__nav > a,
.side__jump,
.side__pins a,
.side__group > summary {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 10px;
    border-radius: 6px;
    color: var(--ink);
    font-size: 13.5px;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
}

.side__pins a {
    font-weight: 400;
}

/* the group icon link lives only in the 641-1000 icon column; beats .side__nav > a */
.side__nav > .side__jump {
    display: none;
}

.side__group > summary {
    list-style: none;
}

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

/* the fold's chevron: down when closed, up when open */
.side__group > summary::after {
    content: "";
    flex: none;
    inline-size: 7px;
    block-size: 7px;
    margin-inline-start: auto;
    border-inline-end: 1.8px solid var(--side-mute);
    border-block-end: 1.8px solid var(--side-mute);
    transform: translateY(-2px) rotate(45deg);
}

.side__group[open] > summary::after {
    transform: translateY(2px) rotate(225deg);
}

/* on the --side panel a lifted row is the card colour */
.side__group--current > summary {
    background: var(--card);
}

/* level 2: indented under the icon, plain words */
.side__group .side__list {
    margin-block: 2px 6px;
}

.side__group .side__list a {
    display: block;
    padding: 6px 10px;
    padding-inline-start: 38px;
    border-radius: 6px;
    color: var(--side-mute);
    font-size: 13.5px;
    text-decoration: none;
}

.side__nav > a:hover,
.side__jump:hover,
.side__pins a:hover,
.side__group > summary:hover,
.side__group .side__list a:hover {
    background: var(--card);
    color: var(--ink);
}

/* the current page = the ink pill of the old nav */
.side__nav > a[aria-current],
.side__jump[aria-current],
.side__group .side__list a[aria-current] {
    background: var(--ink);
    color: var(--card);
    font-weight: 700;
}

.side__icon {
    flex: none;
    inline-size: 18px;
    block-size: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* «ثبّت في القائمة»: a small bordered door; pinned = green-soft, pressed */
.pinform {
    margin: 0;
}

.pin svg {
    inline-size: 14px;
    block-size: 14px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.pin[aria-pressed="true"] {
    border-color: var(--green);
    background: var(--green-soft);
    color: var(--ink);
}

/* «اختصاراتي» doors: three small forms on one line */
.pindoor {
    display: inline-block;
    margin: 0;
}

.pindoor .button:disabled {
    border-color: var(--line);
    color: var(--mute);
    cursor: default;
}

/* ≤1000px: icons only, the word stays for readers and the title; a group icon opens its first page */
@media (min-width: 641px) and (max-width: 1000px) {
    .app--side {
        grid-template-columns: 64px minmax(0, 1fr);
    }

    .side {
        padding-inline: 8px;
    }

    .side__group,
    .side__empty {
        display: none;
    }

    .side__nav > .side__jump {
        display: flex;
    }

    .side__nav > a,
    .side__jump,
    .side__pins a,
    .side__title {
        justify-content: center;
        padding-inline: 0;
    }

    .side__nav > a span,
    .side__jump span,
    .side__pins a span,
    .side__title span {
        position: absolute;
        inline-size: 1px;
        block-size: 1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }
}

/* ≤640px: one column; the menu button opens the full menu as a drawer from the start edge */
@media (max-width: 640px) {
    .app--side {
        display: block;
    }

    .iconbtn.topbar__menu {
        display: grid;
    }

    .side:not(:popover-open) {
        display: none;
    }

    .side:popover-open {
        position: fixed;
        inset-block: 0;
        inset-inline-start: 0;
        inset-inline-end: auto;
        inline-size: min(300px, 86vw);
        block-size: 100dvh;
        max-block-size: none;
    }

    .side::backdrop {
        background: color-mix(in srgb, black 40%, transparent);
    }

    .side__drawerhead {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding-inline: 10px 0;
    }

    .side__drawerhead .brand__mark {
        inline-size: 28px;
        block-size: 28px;
    }
}

/* ── v6 lane 10: «حسابك» + the side menu's foot (his name → /account, the door out) ── */

/* pinned to the bottom of the menu column; the phone drawer carries it too */
.side__foot {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-block-start: auto;
    padding-block-start: 12px;
    border-block-start: 1px solid var(--line);
}

.side__out {
    margin: 0;
}

.side__me,
.side__outbtn {
    display: flex;
    align-items: center;
    gap: 10px;
    inline-size: 100%;
    min-inline-size: 0;
    padding: 7px 10px;
    border: 0;
    border-radius: 6px;
    background: none;
    color: var(--ink);
    font: inherit;
    font-size: 13.5px;
    text-align: start;
    text-decoration: none;
    cursor: pointer;
}

.side__me {
    font-weight: 700;
}

/* a long name ends in «…»; it never widens the menu */
.side__me > span {
    min-inline-size: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.side__me:hover,
.side__outbtn:hover {
    background: var(--card);
}

/* the «اسمك» door on /more: the name sits by the chevron, not mid-row */
.setrow__door > .setrow__value {
    margin-inline-start: auto;
}

/* 641-1000px icon column: icons only, the words stay for readers */
@media (min-width: 641px) and (max-width: 1000px) {
    .side__me,
    .side__outbtn {
        justify-content: center;
        padding-inline: 0;
    }

    .side__me > span,
    .side__outbtn > span {
        position: absolute;
        inline-size: 1px;
        block-size: 1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }
}

/* ── UAT walk 1, lane intake (B3, B8, B9, B10, B13) ───────────────── */

/* B9: the «+» beside a select or a row of pills; 40px like a form choice */
.addrow {
    display: flex;
    align-items: center;
    gap: 8px;
}

.addrow > .field__input {
    flex: 1 1 auto;
    min-inline-size: 0;
}

.plus {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    inline-size: 40px;
    block-size: 40px;
    padding: 0;
    border: 1px dashed var(--line);
    border-radius: 8px;
    background: transparent;
    color: var(--green);
    cursor: pointer;
    touch-action: manipulation;
}

.plus:hover {
    border-color: var(--green);
    background: var(--green-soft);
}

.plus:focus-visible {
    outline: 2px solid var(--green);
    outline-offset: 2px;
}

/* the native dialog: one question, one field, one button */
.dialog {
    inline-size: min(420px, calc(100vw - 32px));
    padding: 0;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--card);
    color: var(--ink);
}

.dialog::backdrop {
    background: color-mix(in srgb, black 40%, transparent);
}

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

/* B3: the unanswered group says so in red */
.choicelist--error > legend {
    color: var(--red);
}

.form .choicelist--error .choice {
    border-color: var(--red);
}

.choicelist > .field__msg {
    flex-basis: 100%;
}

/* B13: the note chips, a tap writes the word into the box */
.notechips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-block-end: 6px;
}

.notechips[hidden] {
    display: none;
}

.notechip {
    min-block-size: 36px;
    padding: 4px 12px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--card);
    color: var(--ink);
    font: inherit;
    font-size: 13.5px;
    cursor: pointer;
    touch-action: manipulation;
}

.notechip:hover {
    border-color: var(--green);
    background: var(--green-soft);
}

.notechip:focus-visible {
    outline: 2px solid var(--green);
    outline-offset: 2px;
}

/* B10: the extra details fold behind a chevron; the button stands apart below */
.fold--form {
    margin-block-start: 0;
    border-block-end: 1px solid var(--line);
}

.fold--form > .fold__head {
    justify-content: space-between;
    list-style: none;
    color: var(--mute);
}

.fold--form > .fold__head::-webkit-details-marker {
    display: none;
}

.fold__chevron {
    flex: none;
    transition: transform .15s ease;
}

.fold--form[open] > .fold__head .fold__chevron {
    transform: rotate(180deg);
}

.fold--form[open] {
    padding-block-end: 16px;
}

@media (prefers-reduced-motion: reduce) {
    .fold__chevron {
        transition: none;
    }
}

.form__foot--apart {
    margin-block-start: 28px;
}

/* walk 1 B2: the repairs search - label above, box and button on one row */
.boardsearch {
    margin: 0 0 14px;
    max-inline-size: 560px;
}

.boardsearch__row {
    display: flex;
    gap: 8px;
}

.boardsearch__row > .field__input {
    flex: 1 1 auto;
    min-inline-size: 0;
}

/* walk 1 L1: repair photos - a thumb grid, the add form, the dialog viewer */
.photos__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
    gap: 8px;
    margin: 0 0 12px;
    padding: 0;
    list-style: none;
}

.photos__tile {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.photos__open {
    display: block;
    border: 1px solid var(--line);
    border-radius: 8px;
    overflow: hidden;
    background: var(--hover);
}

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

.photos__open:focus-visible {
    outline: 2px solid var(--green);
    outline-offset: 2px;
}

.photos__thumb {
    display: block;
    inline-size: 100%;
    aspect-ratio: 1;
    object-fit: cover;
}

.photos__remove summary {
    cursor: pointer;
    color: var(--mute);
    font-size: 12.5px;
}

.photos__remove form {
    margin-block-start: 4px;
}

.photos__add {
    display: grid;
    gap: 8px;
}

.photofield__input {
    padding: 8px;
}

.photoview {
    inline-size: min(1100px, calc(100vw - 32px));
    block-size: min(820px, calc(100vh - 32px));
    padding: 0;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--card);
    color: var(--ink);
}

.photoview[open] {
    display: flex;
    flex-direction: column;
}

.photoview::backdrop {
    background: color-mix(in srgb, black 60%, transparent);
}

.photoview__bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 10px 14px;
    border-block-end: 1px solid var(--line);
}

.photoview__title {
    margin: 0;
    font-size: 14px;
    font-weight: 700;
}

.photoview__tools {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.photoview__stage {
    flex: 1 1 auto;
    min-block-size: 0;
    overflow: auto;
    display: grid;
    place-items: center;
    background: var(--bg);
    touch-action: pan-x pan-y;
}

.photoview__img {
    display: block;
    max-inline-size: 100%;
    max-block-size: 100%;
    object-fit: contain;
}

/* zoomed: the width comes from photos.js, the stage scrolls to pan */
.photoview__img--zoomed {
    max-inline-size: none;
    max-block-size: none;
}

@media (max-width: 640px) {
    .photoview {
        inline-size: 100vw;
        block-size: 100vh;
        max-inline-size: 100vw;
        max-block-size: 100vh;
        border-radius: 0;
    }
}

/* ── spec 009 «ابدأ محلك»: the first-run checklist, its film, the home note ── */
.startpage {
    max-inline-size: 860px;
}

.startlist {
    margin: 0;
    padding-block: 4px;
    list-style: none;
}

/* one step per row: number or tick, what to do, state, one button */
.startstep {
    display: grid;
    grid-template-columns: 32px 1fr auto auto;
    align-items: center;
    gap: 14px;
    padding-block: 12px;
    border-block-start: 1px solid var(--line);
}

.startstep:first-child {
    border-block-start: 0;
}

.startstep__n {
    display: grid;
    place-items: center;
    inline-size: 32px;
    block-size: 32px;
    border: 1px solid var(--line);
    border-radius: 50%;
    color: var(--mute);
    font-size: 13.5px;
    font-weight: 800;
}

.startstep__n svg {
    inline-size: 18px;
    block-size: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.startstep--done .startstep__n {
    border-color: var(--green);
    background: var(--green-soft);
    color: var(--green);
}

.startstep__what {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-inline-size: 0;
}

.startstep__what b {
    font-size: 14px;
    font-weight: 700;
}

.startstep__what span {
    color: var(--mute);
    font-size: 12.5px;
}

.startfilm__line {
    margin: 0 0 10px;
    color: var(--mute);
    font-size: 12.5px;
}

.startfilm__video {
    display: block;
    inline-size: 100%;
    max-block-size: 70vh;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--bg);
}

/* home: one quiet line, never a band; hidden once all eight are done */
.startnote {
    margin: 0 0 14px;
    font-size: 13.5px;
}

.startnote a {
    color: var(--ochre-ink);
    font-weight: 700;
}

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

@media (max-width: 640px) {
    .startstep {
        grid-template-columns: 32px 1fr;
    }

    .startstep .flag {
        grid-column: 2;
        justify-self: start;
    }

    .startstep .button {
        grid-column: 2;
        justify-self: start;
    }
}

/* ── UAT walk 2, lane stock-fixes (S2, D5) ── */

/* S2: a name opens with <a><bdi>; plaintext read the Latin first letter and flipped the cell ltr */
.dtable__name {
    unicode-bidi: isolate;
    text-align: start;
}

/* D5: the unit's shop number, a quiet door beside its serial */
.piece-no {
    margin-inline-start: 8px;
    color: var(--mute);
    font-size: 12.5px;
    text-decoration: none;
}

.piece-no:hover {
    color: var(--ink);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* D5: the label preview = the printed card, 74mm wide */
.label {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    inline-size: 74mm;
    max-inline-size: 100%;
    margin-block: 16px;
    padding: 4mm;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: white;
    color: black;
    text-align: center;
}

.label p {
    margin: 0;
}

.label__shop {
    font-size: 11px;
}

.label__name {
    font-size: 14px;
    font-weight: 700;
    overflow-wrap: anywhere;
}

.label__number {
    font-size: 18px;
    font-weight: 800;
    letter-spacing: .04em;
}

.label__qr {
    inline-size: 100%;
}

/* the qr keeps black on white in dark mode too; a scanner needs the contrast */
.qr {
    display: block;
    inline-size: 100%;
    block-size: auto;
}

.qr__paper {
    fill: white;
}

.qr__ink {
    fill: black;
}

@media print {
    body:has(.label) .topbar,
    body:has(.label) .side,
    body:has(.label) .head {
        display: none;
    }

    body:has(.label),
    body:has(.label) .page {
        margin: 0;
        padding: 0;
        background: white;
    }

    body:has(.label).app--side {
        display: block;
    }

    .label {
        page: label;
        margin: 0;
        border: 0;
        border-radius: 0;
        break-inside: avoid;
    }

    @page label {
        size: 74mm 105mm;
        margin: 4mm;
    }
}

/* walk 2 D1: the one receive door - source, lines, pay */
.receive__source {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* only the picked source's fields; old browsers keep all of them visible */
@supports selector(:has(*)) {
    .receive .receive__source {
        display: none;
    }

    .receive:has(input[name="source"][value="supplier"]:checked) .receive__source--supplier,
    .receive:has(input[name="source"][value="person"]:checked) .receive__source--person,
    .receive:has(input[name="source"][value="shop"]:checked) .receive__source--shop,
    .receive:has(input[name="source"][value="internet"]:checked) .receive__source--internet {
        display: flex;
    }
}

.receive__lines {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.receive-line__box {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 0;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--bg);
    min-inline-size: 0;
}

.receive-line__title {
    padding: 0 6px;
    color: var(--mute);
    font-size: 13px;
    font-weight: 700;
}

.receive-line__new {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.receive-line__new > summary {
    color: var(--ochre-ink);
    font-size: 13.5px;
    font-weight: 700;
    cursor: pointer;
}

.receive-line__new[open] > summary {
    margin-block-end: 12px;
}

.receive-line__new > .formcard__row + .formcard__row,
.receive-line__new > .formcard__row + .field {
    margin-block-start: 12px;
}

/* the deal page: one row per line of the delivery */
.deal-lines {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.deal-lines__row {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 12px;
    padding-block: 6px;
    border-block-end: 1px solid var(--line);
}

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

.deal-lines__serial {
    color: var(--mute);
    font-size: 13px;
}

@media (max-width: 640px) {
    .receive-line__box .formcard__row {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* owner 09-27: a counted line has no serial box; the pick's data-mode or the new piece's pill decides, no JS */
.receive-line__serial {
    display: none;
}

.receive-line:has(option[data-mode="serialized"]:checked) .receive-line__serial,
.receive-line:has(option[value="new"]:checked):has(input[name$=".NewMode"][value="serialized"]:checked) .receive-line__serial {
    display: block;
}

/* walk 2 owner note: an extra line can be dropped; the button hangs at the box's far corner */
.receive-line__remove {
    align-self: flex-start;
    margin-block-start: -6px;
    padding: 4px 10px;
    font-size: 13px;
}

/* owner 10-19 «عن هذا الموقع»: one block per screen inside the settings cards, a hairline between */
.about__item {
    padding-block: 12px;
    border-block-start: 1px solid var(--line);
}

.about__item:first-of-type {
    padding-block-start: 0;
    border-block-start: 0;
}

.about__item p,
.about__note {
    margin: 0 0 4px;
}

.about__name {
    margin: 0 0 4px;
    font-size: 15px;
    font-weight: 800;
}

.about__ask {
    font-weight: 700;
}

.about__note {
    padding-block-start: 12px;
    border-block-start: 1px solid var(--line);
    color: var(--mute);
}