/* The app shell and the sign-in screens (build map S02, Director text N549). Every size,
   colour and space is the prototype's inline style for the element named in the comment
   (app file, «الدخول»); colours go through tokens.css. Ruling 15: the border of anything the
   seller taps or types in is --line-control where the HTML has #4A5F8C. Director text N551,
   answer 6: a 1 px line that is the only edge of a field is a control border too
   (--line-control); a line that bounds no field is a divider (--line-light). */

/* The phone column: 390 px, the full height of the window, centred on a computer. */
[hidden] { display: none !important; }
html, body { margin: 0; }
body { background: var(--ground); color: var(--ink-primary); font-family: var(--font); }
/* No browser trace (owner ruling, Director text N807 point 1): no pull-to-refresh or bounce of
   the page; no pinch-zoom (the gesture only: the viewport keeps zoom open for the phone's own
   text size, WCAG 1.4.4); no blue flash on a tap; no text selected by accident, and no long-press
   menu on what is tapped — the fields stay selectable. */
html, body { overscroll-behavior: none; touch-action: pan-x pan-y; -webkit-tap-highlight-color: transparent; }
body { -webkit-user-select: none; user-select: none; }
input, textarea { -webkit-user-select: text; user-select: text; }
button, a, [role="button"] { -webkit-touch-callout: none; touch-action: manipulation; }
/* The phone's safe areas (N807 point 3): drawn edge to edge (viewport-fit=cover), the screens keep
   clear of the status bar, the navigation bar and a notch (#app's padding), and so do the sheets
   that rise from the bottom; the ground fills the bars' place. */
#app {
  position: relative;
  box-sizing: border-box;
  width: 390px;
  max-width: 100%;
  padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
  height: 100vh;
  height: 100dvh;
  margin-inline: auto;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: var(--ground);
}
.mt-screen { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.mt-ltr { direction: ltr; unicode-bidi: isolate; }
.mt-heading { margin: 0; font: inherit; }
.mt-heading:focus { outline: none; }
/* Read by screen readers only, not seen (the home's «الرئيسة», Director text N560, answer 14). */
.mt-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
input::placeholder { color: var(--ink-tertiary); opacity: 1; }

/* A1, A1b — the launch screen (the design's <mt-auto-splash>, label SELLER). */
.splash { flex: 1; min-height: 0; display: flex; flex-direction: column; margin: 0; padding: 0; border: 0; background: transparent; cursor: pointer; }
/* The launch stage full-bleed exactly as approved, the asset's own 1.04 zoom-out and all (owner ruling of 2 Nov, «أ»; Director text N979 on Q-411): the one named exemption from N183's edge point, written in the layout check. */
.splash mt-auto-splash { width: 100%; height: 100%; }

/* A2, A8 — «الدخول». */
.login { flex: 1; min-height: 0; overflow-y: auto; padding: 24px 16px 12px; display: flex; flex-direction: column; }
.login__top { flex-shrink: 0; display: flex; flex-direction: column; gap: 20px; }
.login__logo { width: 120px; height: auto; display: block; align-self: flex-start; }
.login__title { color: var(--ink-primary); font-size: 24px; font-weight: 300; line-height: 1.4; text-wrap: pretty; }
.login__for { display: flex; flex-direction: column; gap: 8px; }
.login__for-label { color: var(--ink-tertiary); font-size: 11.5px; font-weight: 600; }
.login__points { display: flex; flex-direction: column; gap: 6px; color: var(--ink-secondary); font-size: 13px; line-height: 1.6; }
.login__verb { color: var(--ink-primary); font-weight: 600; }
.login__bottom { flex-shrink: 0; margin-top: auto; padding-top: 28px; display: flex; flex-direction: column; gap: 12px; }
.login__google { display: flex; align-items: center; justify-content: center; gap: 10px; height: 52px; margin: 0; padding: 0; border: 0; border-radius: var(--radius); background: var(--structural-light); color: var(--ground); font-family: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; }
.login__google svg { flex-shrink: 0; }
.login__gbad { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.login__gbad-line { display: flex; align-items: center; justify-content: center; gap: 8px; color: var(--ink-primary); font-size: 12.5px; line-height: 1.6; text-wrap: pretty; }
.mt-dash { flex-shrink: 0; width: 12px; height: 3px; background: var(--error); }
.login__or { display: flex; align-items: center; gap: 10px; color: var(--ink-tertiary); font-size: 11.5px; }
.login__or-line { flex: 1; height: 1px; background: var(--line-light); }
.login__mail { display: flex; align-items: center; height: 48px; box-sizing: border-box; border-radius: var(--radius); border: 1px solid var(--line-control); background: var(--ground); direction: ltr; overflow: hidden; }
.login__mail--bad { border-color: var(--error); }
.login__mail:focus-within { outline: 2px solid var(--ink-primary); outline-offset: 2px; }
.login__input { flex: 1; min-width: 0; height: 100%; padding: 0 4px 0 12px; margin: 0; border: 0; background: transparent; color: var(--ink-primary); font-size: 14px; font-family: inherit; outline: none; direction: ltr; text-align: left; }
.login__suffix { flex-shrink: 0; padding: 0 12px 0 0; color: var(--ink-secondary); font-size: 14px; }
.login__bad { color: var(--error); font-size: 12px; font-weight: 600; }
.login__send { height: 52px; }
.login__help { display: flex; align-items: center; justify-content: center; height: 44px; margin: -4px 0 0; padding: 0; border: 0; background: transparent; color: var(--ink-secondary); font-family: inherit; font-size: 12.5px; text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }

/* A3, A4, A4b, A4c — «اكتب الرمز». */
.code__head { padding: 10px 12px; display: flex; align-items: center; }
.code { flex: 1; min-height: 0; overflow-y: auto; padding: 4px 16px 16px; display: flex; flex-direction: column; gap: 14px; }
.code__title { color: var(--ink-primary); font-size: 24px; font-weight: 300; }
.code__sent { color: var(--ink-secondary); font-size: 12.5px; line-height: 1.7; }
.code__mail { color: var(--ink-primary); }
.code__change { display: inline-block; padding: 12px 4px; margin: -12px -4px; border: 0; background: transparent; color: var(--ink-primary); font: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.code__cells { position: relative; display: flex; gap: 8px; direction: ltr; }
.code__cell { flex: 1; display: flex; align-items: center; justify-content: center; height: 56px; box-sizing: border-box; border-radius: var(--radius); border: 1px solid var(--line-control); background: var(--ground); color: var(--ink-primary); font-size: 22px; font-weight: 600; font-variant-numeric: tabular-nums; direction: ltr; unicode-bidi: isolate; }
.code__cell--next { border-color: var(--structural-light); }
.code__cells--bad .code__cell { border-color: var(--error); }
/* Visible focus (ruling 14): the next digit's cell carries the ring while the hidden input has focus. */
.code__cells:focus-within .code__cell--at { outline: 2px solid var(--ink-primary); outline-offset: 2px; }
.code__input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; opacity: 0; background: transparent; color: transparent; caret-color: transparent; font-size: 16px; cursor: pointer; }
.code__alert { display: flex; align-items: center; gap: 8px; color: var(--ink-primary); font-size: 12.5px; }
/* A code being checked, or the market step after it (Director text N578, points 5 and 6): the
   field cannot be edited, and «لصق الرمز» waits. The HTML draws no such state:
   the ink steps down to the tertiary ink, the borders stay. */
.code__cells--busy .code__cell { color: var(--ink-tertiary); }
.code__cells--busy .code__input { cursor: progress; }
.code__paste[aria-disabled='true'] { color: var(--ink-tertiary); cursor: progress; }
.code__row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.code__paste { display: inline-flex; align-items: center; flex-shrink: 0; white-space: nowrap; height: 44px; padding: 0 14px; margin: 0; border-radius: var(--radius); border: 1px solid var(--line-control); background: transparent; color: var(--ink-primary); font-family: inherit; font-size: 12px; font-weight: 600; cursor: pointer; }
.code__wait { color: var(--ink-secondary); font-size: 12px; }
.code__left { color: var(--ink-primary); font-variant-numeric: tabular-nums; }
.code__resend { display: inline-flex; align-items: center; height: 44px; margin: 0; padding: 0; border: 0; background: transparent; color: var(--ink-primary); font-family: inherit; font-size: 12px; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.code__spam { color: var(--ink-secondary); font-size: 11.5px; line-height: 1.6; text-wrap: pretty; }
.code__valid { color: var(--ink-tertiary); font-size: 11.5px; }

/* A5, A6 — «طلب الانضمام» (the app's shared form). */
.form__head { padding: 10px 12px 10px; display: flex; align-items: center; gap: 6px; border-bottom: 1px solid var(--line-light); }
.form__title { flex: 1; min-width: 0; color: var(--ink-primary); font-size: 17px; font-weight: 600; }
.form__out { display: inline-flex; align-items: center; height: 44px; padding: 0 8px; margin: 0; border: 0; background: transparent; color: var(--ink-secondary); font-family: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; }
.form { flex: 1; min-height: 0; overflow-y: auto; padding: 12px 16px 20px; display: flex; flex-direction: column; gap: 12px; }
.form__steps { flex-shrink: 0; display: flex; gap: 6px; }
.form__step { flex: 1; display: flex; flex-direction: column; gap: 6px; }
.form__step-bar { height: 3px; background: var(--line-light); }
.form__step-bar--on { background: var(--action); }
.form__step-label { color: var(--ink-tertiary); font-size: 11.5px; font-weight: 600; }
.form__step-label--now { color: var(--ink-primary); }
.form__list { flex-shrink: 0; display: flex; flex-direction: column; gap: 18px; }
/* The 1 px lines between the fields show the group's colour. They are the fields' only
   visible edge, so they are control borders (Director text N551, answer 6; HTML #2C4070). */
.form__group { display: flex; flex-direction: column; gap: 1px; background: var(--line-control); }
.form__row { display: flex; gap: 1px; }
.field { flex: 1; min-width: 0; min-height: 56px; box-sizing: border-box; display: flex; align-items: stretch; gap: 8px; padding: 0; background: var(--ground); cursor: text; }
.field__body { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: flex-end; gap: 2px; padding-top: 8px; }
.field__label { color: var(--ink-secondary); font-size: 11.5px; font-weight: 600; line-height: 16px; }
.field__sub { color: var(--ink-tertiary); font-weight: 400; }
.field__input { height: 30px; padding: 0; margin: 0; border: none; border-bottom: 2px solid transparent; border-radius: 0; background: transparent; color: var(--ink-primary); font-size: 14px; font-family: inherit; outline: none; width: 100%; box-sizing: border-box; text-align: right; }
.field__input:focus { border-bottom-color: var(--structural-light); }
.field__input--bad { border-bottom-color: var(--error); }
/* The suggestion form's fields (N4, N8, N4o): underlined in the ink at rest, as the app file draws them (N1029, Q-459); the focused one takes the shared focus colour (#DCE4F5), as the app file turns it (N1035, SR51). */
.field__input--lined { border-bottom-color: var(--ink-primary); }
.field__err { display: flex; align-items: center; gap: 8px; padding: 4px 0 8px; color: var(--ink-primary); font-size: 12.5px; line-height: 1.5; text-wrap: pretty; }
.field__btn { flex-shrink: 0; align-self: center; display: inline-flex; align-items: center; height: 44px; padding: 0 12px; margin: 0; border-radius: var(--radius); border: 1px solid var(--structural-light); background: transparent; color: var(--ink-primary); font-family: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; }
.pick { flex: 1; min-width: 0; min-height: 56px; box-sizing: border-box; display: flex; align-items: stretch; gap: 8px; padding: 0; margin: 0; border: 0; background: var(--ground); color: inherit; font-family: inherit; text-align: right; cursor: pointer; }
.pick__value { min-height: 30px; display: flex; align-items: center; border-bottom: 2px solid transparent; box-sizing: border-box; font-size: 14px; }
.pick__v { color: var(--ink-primary); }
.pick__ph { color: var(--ink-tertiary); }
.pick__chevron { flex-shrink: 0; align-self: center; color: var(--ink-secondary); font-size: 20px; line-height: 1; }
.form__groups { flex-shrink: 0; display: flex; flex-direction: column; gap: 18px; }
.chips { display: flex; flex-direction: column; gap: 8px; }
.chips__head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.chips__h { color: var(--ink-primary); font-size: 13.5px; font-weight: 600; }
.chips__en { color: var(--ink-tertiary); font-weight: 400; font-size: 12px; }
.chips__count { color: var(--ink-secondary); font-size: 12px; font-variant-numeric: tabular-nums; }
.chips__list { display: flex; flex-wrap: wrap; gap: 12px 6px; }
.chip { display: inline-flex; align-items: center; height: 44px; margin: -6px 0; padding: 0; border: 0; background: transparent; color: inherit; font-family: inherit; flex-shrink: 0; max-width: 100%; cursor: pointer; }
.chip__face { display: inline-flex; align-items: center; height: 32px; box-sizing: border-box; white-space: nowrap; padding: 0 10px; border-radius: var(--radius); border: 1px solid var(--line-control); background: transparent; color: var(--ink-primary); font-size: 12px; font-weight: 600; unicode-bidi: isolate; }
.chip--on .chip__face { border-color: var(--structural-light); background: var(--structural-light); color: var(--ground); }
.chip__ring { flex-shrink: 0; width: 7px; height: 7px; margin-inline-end: 6px; box-sizing: border-box; border-radius: var(--radius-pill); border: 1.5px solid var(--ground); }
.chip__x { margin-inline-start: 6px; font-size: 11px; }
.chip--add .chip__face { border: 1px dashed var(--line-strong); color: var(--ink-primary); }
.chip--add:hover .chip__face { border-color: var(--structural-light); }
.chips__other { display: flex; align-items: center; gap: 6px; }
.chips__input { flex: 1; min-width: 0; height: 44px; padding: 0 12px; margin: 0; border-radius: var(--radius); border: 1px solid var(--structural-light); background: var(--ground); color: var(--ink-primary); font-size: 14px; font-family: inherit; outline: none; box-sizing: border-box; }
.chips__input:focus-visible { outline: 2px solid var(--ink-primary); outline-offset: 2px; }
.chips__add { flex-shrink: 0; display: inline-flex; align-items: center; height: 44px; padding: 0 14px; margin: 0; border: 0; border-radius: var(--radius); background: var(--structural-light); color: var(--ground); font-family: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; }
.chips__add[aria-disabled='true'] { border: 1px solid var(--line-mid); background: transparent; color: var(--ink-tertiary); cursor: default; }
.chips__cancel { flex-shrink: 0; display: inline-flex; align-items: center; height: 44px; padding: 0 8px; margin: 0; border: 0; background: transparent; color: var(--ink-secondary); font-family: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; }
.form__end { flex-shrink: 0; margin-top: auto; display: flex; flex-direction: column; gap: 8px; }
.form__miss { color: var(--ink-secondary); font-size: 12px; line-height: 1.6; text-align: center; text-wrap: balance; }
.form__cta { width: 100%; }

/* A7 — «حسابك قيد المراجعة». */
.wait { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 14px; padding: 24px 16px; }
.wait__title { color: var(--ink-primary); font-size: 24px; font-weight: 300; }
.wait__steps { display: flex; flex-direction: column; gap: 12px; padding: 14px 12px; border: 1px solid var(--line-light); border-radius: var(--radius); background: var(--layer); margin: 0; list-style: none; }
.wait__step { display: flex; align-items: center; gap: 10px; }
.wait__dot { flex: 0 0 10px; width: 10px; height: 10px; box-sizing: border-box; border-radius: var(--radius-pill); }
.wait__dot--done { background: var(--success); }
.wait__dot--now { border: 2px solid var(--structural-light); }
.wait__dot--later { border: 2px solid var(--line-mid); }
.wait__text { display: flex; flex-direction: column; gap: 1px; }
.wait__label { color: var(--ink-primary); font-size: 13px; font-weight: 600; }
.wait__label--later { color: var(--ink-tertiary); }
.wait__note { color: var(--ink-secondary); font-size: 11.5px; }
.wait__support { display: flex; align-items: center; justify-content: center; height: 48px; margin: 0; padding: 0; border-radius: var(--radius); border: 1px solid var(--structural-light); background: transparent; color: var(--ink-primary); font-family: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.wait__out { display: flex; align-items: center; justify-content: center; height: 44px; margin: 0; padding: 0; border: 0; background: transparent; color: var(--ink-secondary); font-family: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; }

/* Visible focus for the screens' own controls (ruling 14), as for the parts. */
.splash:focus-visible, .login__google:focus-visible, .login__help:focus-visible, .code__change:focus-visible,
.code__paste:focus-visible, .code__resend:focus-visible, .form__out:focus-visible, .field__btn:focus-visible,
.pick:focus-visible, .chip:focus-visible, .chips__add:focus-visible, .chips__cancel:focus-visible,
.wait__support:focus-visible, .wait__out:focus-visible { outline: 2px solid var(--ink-primary); outline-offset: 2px; }
.splash:focus-visible { outline-offset: -4px; }

/* A5b — the wilaya picker, a sheet over A5 (the app file's picker). Ruling 15: the search
   field's and the unchosen ring's #4A5F8C become --line-control. The 1 px lines between the
   rows only separate them: decorative, #2C4070 (Director text N560, answer 11). */
.wil__scrim { position: absolute; inset: 0; z-index: 40; background: var(--scrim); }
.wil { position: absolute; left: 0; right: 0; bottom: 0; z-index: 41; height: 86%; box-sizing: border-box; overflow-y: auto; padding: 10px 16px 0; display: flex; flex-direction: column; gap: 10px; border-top: 1px solid var(--line-light); border-radius: var(--radius-sheet) var(--radius-sheet) 0 0; background: var(--ground); }
.wil__handle { flex-shrink: 0; display: block; width: 42px; height: 4px; margin: 0 auto; border-radius: var(--radius-pill); background: var(--line-mid); }
.wil__head { flex-shrink: 0; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.wil__title { margin: 0; min-width: 0; color: var(--ink-primary); font-size: 19px; font-weight: 300; }
.wil__close { flex-shrink: 0; display: inline-flex; align-items: center; height: 44px; padding: 0 4px; margin: 0; border: 0; background: transparent; color: var(--ink-secondary); font-family: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; }
.wil__q { flex-shrink: 0; width: 100%; height: 44px; padding: 0 12px; margin: 0; box-sizing: border-box; border-radius: var(--radius); border: 1px solid var(--line-control); background: transparent; color: var(--ink-primary); font-family: inherit; font-size: 14px; text-align: right; outline: none; }
.wil__q:focus { border-color: var(--structural-light); }
.wil__body { flex: 1; min-height: 0; overflow-y: auto; margin: 0 -16px; padding: 0 16px 20px; }
.wil__list { display: flex; flex-direction: column; gap: 1px; background: var(--line-light); }
.wil__opt { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 6px 0; box-sizing: border-box; background: var(--ground); cursor: pointer; }
.wil__dot { flex: 0 0 18px; width: 18px; height: 18px; box-sizing: border-box; border-radius: var(--radius-pill); border: 1.5px solid var(--line-control); }
.wil__opt[aria-selected='true'] .wil__dot { border: 5px solid var(--structural-light); }
.wil__n { flex: 0 0 20px; color: var(--ink-tertiary); font-size: 12px; font-variant-numeric: tabular-nums; }
.wil__name { flex: 1; min-width: 0; color: var(--ink-primary); font-size: 14px; line-height: 1.5; text-wrap: pretty; }
.wil__empty { display: flex; flex-direction: column; gap: 4px; padding: 20px 0; }
/* Always there for screen readers (N568, point 12); with nothing to say it takes no room. */
.wil__empty:empty { padding: 0; }
.wil__empty-a { color: var(--ink-primary); font-size: 14px; }
.wil__q:focus-visible, .wil__close:focus-visible { outline: 2px solid var(--ink-primary); outline-offset: 2px; }
.wil__opt:focus-visible { outline: 2px solid var(--ink-primary); outline-offset: -2px; }

/* S03 — the market home without offers (E14o, E14z) and its pop-up (G20, G21). Every value
   from the app file's «الرئيسة والبحث» markup (phone) and its pop-up; the banner button from
   the owner's ruling of 18/10/2026: 36 px, the dark veil, ink #F4F4F4, 10 px from its corner. */
.home { position: relative; }
/* With no connection, its one line at the top (N845), in the failure-line style. */
.home__offline { padding: 10px 16px 0; }
.home__top { padding: 12px 16px 4px; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.home__bar { display: flex; align-items: center; gap: 4px; min-width: 0; flex: 1 1 auto; }
.home__chip { position: relative; display: flex; align-items: center; gap: 5px; height: 44px; padding: 0 8px; margin: 0; border-radius: var(--radius); border: 1px solid var(--structural-light); background: var(--layer); color: var(--ink-primary); font-family: inherit; cursor: pointer; }
.home__chip--orders { padding: 0 6px; flex-shrink: 0; }
.home__chip--needs { justify-content: center; flex-shrink: 0; }
.home__chip-text { color: var(--ink-primary); font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.home__badge { min-width: 18px; height: 18px; border-radius: var(--radius-pill); background: var(--structural-light); color: var(--ground); font-size: 11.5px; font-weight: 600; display: flex; align-items: center; justify-content: center; padding: 0 5px; font-variant-numeric: tabular-nums; direction: ltr; }
.home__basket { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; line-height: 1.15; }
.home__basket-label { color: var(--ink-secondary); font-size: 10.5px; font-weight: 400; white-space: nowrap; }
.home__basket-sum { color: var(--ink-primary); font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.home__num { font-variant-numeric: tabular-nums; }
.home__space { flex: 1 1 auto; }
.home__account { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; margin: 0; border-radius: var(--radius); border: 1px solid var(--structural-light); background: var(--layer); color: var(--structural-light); font-family: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.home__body { flex: 1; min-height: 0; overflow-y: hidden; padding: 14px 16px 0; display: flex; flex-direction: column; gap: 14px; }
/* 2 px of room above the first row, taken back by the margin, so the tap layers of a list's
   header (44 px on a 40 px row, ruling 14) are not cut at the top; nothing seen moves. */
.home__scroll { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; scrollbar-width: none; margin: -2px -16px 0; padding: 2px 16px 88px; display: flex; flex-direction: column; gap: 3px; }
.home__empty { flex-shrink: 0; width: 100%; display: flex; flex-direction: column; align-items: stretch; gap: 24px; padding: 120px 0 15px; text-align: center; }
.home__logo { height: 64px; width: auto; display: block; align-self: center; }
/* Owner ruling 32: the greeting on E14z, as the owner approved it (N569, Q-142): 22 px,
   semibold, #F4F4F4 (14.66:1 on the ground), centred, cut after two lines, 15 px under the
   logo; the search keeps the column's 24 px under it. Without the greeting (E14o) the logo
   stands alone, as drawn. */
.home__brand { display: flex; flex-direction: column; gap: 15px; }
.home__hello { margin: 0; color: var(--ink-primary); font-size: 22px; font-weight: 600; line-height: 1.4; text-align: center; overflow-wrap: anywhere; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
.home__search { display: block; width: 100%; padding: 0 6px; margin: 0; border-radius: var(--radius); border: 1.5px solid var(--structural-light); background: var(--layer); color: inherit; font-family: inherit; text-align: start; cursor: text; }
.home__search-row { display: flex; align-items: center; gap: 9px; height: 56px; }
.home__search-go { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; flex: 0 0 44px; border-radius: var(--radius); background: var(--action); color: var(--ground); }
.home__search-ph { min-width: 0; color: var(--ink-tertiary); font-size: 12.5px; font-weight: 400; line-height: 1.4; text-align: start; text-wrap: pretty; }
.home__banner { flex-shrink: 0; display: flex; flex-direction: column; border-radius: var(--radius); overflow: hidden; position: sticky; top: 0; z-index: 5; background: var(--ground); }
.home__banner-in { flex-shrink: 0; position: relative; margin: 4px 0; }
/* The banner's outline is a card outline, decorative (Director text N560, answer 11). */
.banner { position: relative; display: block; width: 100%; padding: 0; margin: 0; border-radius: var(--radius); border: 1px solid var(--line-light); overflow: hidden; background: var(--layer); color: inherit; font-family: inherit; cursor: pointer; }
.banner:active { filter: brightness(0.82); }
.banner__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; opacity: 0; }
.banner__img--ready { opacity: 1; }
.banner__cta { position: absolute; display: inline-flex; align-items: center; gap: 5px; width: max-content; max-width: calc(100% - 20px); height: 36px; padding: 0 12px; border-radius: var(--radius); background: var(--scrim); color: var(--ink-primary); font-size: 12px; font-weight: 600; white-space: nowrap; }
.banner__cta--bl { bottom: 10px; left: 10px; }
.banner__cta--br { bottom: 10px; right: 10px; }
.banner__cta--tl { top: 10px; left: 10px; }
.banner__cta--tr { top: 10px; right: 10px; }
.home__fab { position: absolute; right: 16px; bottom: 76px; z-index: 20; width: 52px; height: 52px; padding: 0; margin: 0; border-radius: var(--radius-pill); border: 1px solid color-mix(in srgb, var(--structural-light) 55%, transparent); background: color-mix(in srgb, var(--selected) 55%, transparent); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: transform 0.22s ease, opacity 0.22s ease; }
.home__fab:hover { background: color-mix(in srgb, var(--selected) 90%, transparent); }
.home__fab--dim { transform: scale(0.72); opacity: 0.35; }
@media (prefers-reduced-motion: reduce) { .home__fab { transition: none; } }
.pop__scrim { position: absolute; inset: 0; z-index: 60; background: var(--scrim); }
.pop { position: absolute; top: 50%; left: 20px; right: 20px; transform: translateY(-50%); z-index: 61; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.pop__frame { position: relative; align-self: stretch; max-height: 560px; overflow-y: auto; overflow-x: hidden; scrollbar-width: none; border-radius: var(--radius); border: 1px solid var(--line-light); background: var(--layer); }
.pop__x { position: absolute; top: 6px; left: 6px; z-index: 2; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; margin: 0; border: 0; background: transparent; cursor: pointer; }
.pop__x-face { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: var(--radius-pill); background: var(--scrim); }
.pop__body { padding: 52px 18px 20px; display: flex; flex-direction: column; gap: 8px; }
.pop__title { margin: 0; color: var(--ink-primary); font-size: 19px; font-weight: 300; line-height: 1.35; text-wrap: pretty; }
.pop__text { margin: 0; color: var(--ink-secondary); font-size: 12.5px; line-height: 1.7; text-wrap: pretty; }
.pop__cta { align-self: center; margin: 8px 0 0; display: inline-flex; align-items: center; justify-content: center; height: 44px; padding: 0 22px; border: 0; border-radius: var(--radius); background: var(--action); color: var(--ground); font-family: inherit; font-size: 13px; font-weight: 600; white-space: nowrap; cursor: pointer; }
.pop__free { position: relative; align-self: stretch; max-height: 520px; }
.pop__img { display: block; width: 100%; height: 100%; object-fit: contain; }
.pop__go { display: block; width: 100%; height: 100%; padding: 0; margin: 0; border: 0; background: transparent; cursor: pointer; }
/* The home with offers: the small logo in the top bar, the search above the list. */
.home__toplogo { flex-shrink: 0; height: 32px; width: auto; display: block; }
.home__bar--fit { flex: 0 1 auto; }
.home__body > .home__search { flex-shrink: 0; }
/* A private link's wait under the search line (S41; N1500 on Q-597): no space at all until the box is in it,
   so the home is laid out as drawn; the box itself is the shared one (parts.css, .mt-wait). */
.home__link-wait { flex-shrink: 0; }
.home__link-wait:empty { display: none; }
/* The offers list (the app file's «عروض» list). Ruling 15: the photos' front card, the
   control's own edge, #4A5F8C → --line-control; the other lines are decorative (#2C4070). */
.offers { flex-shrink: 0; display: flex; flex-direction: column; gap: 4px; }
.offers__head { flex-shrink: 0; display: flex; align-items: center; gap: 8px; height: 40px; border-bottom: 1px solid var(--line-light); }
.offers__title { color: var(--ink-primary); font-size: 13px; font-weight: 600; }
.offers__purch-slot { display: contents; }
.offers__purch { position: relative; display: flex; align-items: center; gap: 6px; height: 36px; padding: 0 10px; margin: 0; flex: 0 0 auto; white-space: nowrap; border-radius: var(--radius); border: 1px solid var(--structural-light); background: var(--ground); color: inherit; font-family: inherit; cursor: pointer; }
/* The HTML's hit layer (inset -4px -1px) reaches 42 px on this 36 px chip; 5 px makes the
   44 px of ruling 14, unseen. */
.offers__purch::before { content: ''; position: absolute; inset: -5px -1px; }
.offers__purch-label { color: var(--ink-primary); font-size: 12px; font-weight: 600; }
.offers__purch-n { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 5px; border-radius: var(--radius-pill); background: var(--structural-light); color: var(--ground); font-size: 11.5px; font-weight: 600; font-variant-numeric: tabular-nums; direction: ltr; }
.offers__purch-n--grew { animation: mt-bump 0.9s ease-out; }
@media (prefers-reduced-motion: reduce) { .offers__purch-n--grew { animation-name: mt-glow; } }
@keyframes mt-bump { 0% { transform: scale(1); background: var(--structural-light); } 18% { transform: scale(1.3); background: var(--success); } 45% { transform: scale(1); background: var(--success); } 100% { transform: scale(1); background: var(--structural-light); } }
@keyframes mt-glow { 0% { background: var(--structural-light); } 15% { background: var(--success); } 50% { background: var(--success); } 100% { background: var(--structural-light); } }
.offers__purch-sub { color: var(--ink-secondary); font-size: 11.5px; font-weight: 600; }
.offers__all { display: inline-flex; align-items: center; height: 44px; padding: 0; margin: 0; border: 0; background: transparent; color: var(--ink-primary); font-family: inherit; font-size: 12.5px; font-weight: 600; white-space: nowrap; cursor: pointer; }
.offers__list { display: grid; grid-template-columns: 1fr; column-gap: 16px; }
.offer { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border-bottom: 1px solid var(--line-light); }
.offer__photos { position: relative; width: 38px; aspect-ratio: 3 / 4; flex: 0 0 38px; padding: 0; margin: 0; border: 0; background: transparent; cursor: pointer; }
.offer__photos::before { content: ''; position: absolute; inset: -4px -3px; }
.offer__vid { position: absolute; bottom: -4px; left: -4px; z-index: 2; width: 16px; height: 16px; border-radius: var(--radius-pill); background: var(--structural-light); display: flex; align-items: center; justify-content: center; }
.offer__card { position: absolute; inset: 0; border-radius: 7px; background: var(--layer); border: 1px solid var(--line-light); }
.offer__card--back1 { transform: rotate(-8deg); }
.offer__card--back2 { transform: rotate(5deg); }
.offer__card--front { border-radius: var(--radius); background: var(--line-light); border: 1px solid var(--line-control); display: flex; align-items: center; justify-content: center; }
.offer__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.offer__timer { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding-bottom: 6px; margin-bottom: 2px; border-bottom: 1px solid var(--line-light); }
.offer__timer-label { color: var(--ink-secondary); font-size: 11.5px; font-weight: 600; white-space: nowrap; }
.offer__t { color: var(--ink-primary); font-size: 12.5px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.offer__name { color: var(--ink-primary); font-size: 12px; text-align: right; line-height: 1.4; text-wrap: pretty; }
.offer__meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; color: var(--ink-secondary); font-size: 11.5px; }
.offer__ref { color: var(--ink-primary); font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.offer__brand { white-space: nowrap; }
.offer__tiers { display: flex; gap: 6px; margin-top: 4px; }
.offer__tier { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 5px 4px; border-radius: var(--radius-small); border: 1px solid var(--line-light); }
.offer__tier--on { border: 0; background: var(--structural-light); }
.offer__tier-range { color: var(--ink-secondary); font-size: 10.5px; font-variant-numeric: tabular-nums; }
.offer__tier-p { color: var(--ink-primary); font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; }
.offer__tier--on .offer__tier-range, .offer__tier--on .offer__tier-p { color: var(--ground); }
.offer__foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 2px; }
.offer__price { color: var(--ink-primary); font-size: 14px; font-weight: 600; white-space: nowrap; }
.offer__act { display: contents; }
/* «اشترِ» outlined, as drawn (owner ruling 30). */
.offer__buy { display: inline-flex; align-items: center; justify-content: center; height: 44px; padding: 0 18px; margin: 0; border-radius: var(--radius); border: 1px solid var(--structural-light); background: transparent; color: var(--ink-primary); font-family: inherit; font-size: 12.5px; font-weight: 600; white-space: nowrap; cursor: pointer; }
/* The HTML clips the counter to its pill (overflow: hidden), which cuts the rounded corners off
   the tap areas of − and +; unclipped, each keeps its whole 44 × 44 square (ruling 14). The
   count's lines are 42 px, the height the clipping left them, so nothing seen changes. */
.offer__step { display: inline-flex; align-items: center; height: 44px; border-radius: var(--radius-pill); border: 1px solid var(--structural-light); background: var(--ground); direction: ltr; }
.offer__step-btn { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; margin: 0; border: 0; background: transparent; color: var(--ink-primary); font-family: inherit; font-size: 17px; cursor: pointer; }
.offer__step-q { min-width: 40px; text-align: center; color: var(--ink-primary); font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; border-inline: 1px solid var(--line-light); line-height: 42px; }
/* E14g, the photo viewer (N563, Q-122): the app file's photoPart frame, 16 px in from the
   sides and 176 px from the bottom; 84 px from the top, the HTML's 118 px less its 9:41 bar
   (34 px), which belongs to the prototype's frame, not the app (N565, Q-131). Its outline
   is decorative (a container). The round faces of «السابقة» and «التالية» are the edges of
   controls: #4A5F8C in the HTML → --line-control, 3.03:1 → 5.78:1 on the frame's #060E20
   (ruling 15's intent, N565 Q-137). It takes no text selection, which would turn the next
   swipe into a drag of the selected words; nothing seen changes. */
.gal__scrim { position: absolute; inset: 0; z-index: 59; background: var(--scrim); }
.gal { position: absolute; z-index: 60; left: 16px; right: 16px; top: 84px; bottom: 176px; touch-action: pan-y; user-select: none; background: var(--deep); border: 1px solid var(--line-light); border-radius: 22px; overflow: hidden; }
.gal__half { position: absolute; top: 60px; bottom: 60px; width: 50%; cursor: pointer; }
.gal__half--prev { right: 0; }
.gal__half--next { left: 0; }
.gal__nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; margin: 0; border: 0; background: transparent; cursor: pointer; }
.gal__nav--prev { right: 6px; }
.gal__nav--next { left: 6px; }
.gal__nav-face { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: var(--radius-pill); background: var(--scrim); border: 1px solid var(--line-control); }
/* The HTML lets no tap through to its play button (pointer-events: none on the whole
   centre, so a tap turns the page); here the button takes it (Q-130). */
.gal__centre { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; pointer-events: none; }
.gal__page { display: contents; }
/* A picture the seller took (S13b): the whole of it in the frame, under its controls. */
.gal__pic { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; object-fit: contain; }
.gal__pic[hidden] { display: none; }
.gal__cap { color: var(--ink-secondary); font-size: 11.5px; }
.gal__play { pointer-events: auto; display: flex; align-items: center; justify-content: center; width: 64px; height: 64px; padding: 0; margin: 0; border: 0; border-radius: var(--radius-pill); background: var(--structural-light); cursor: pointer; }
.gal__top { position: absolute; top: 0; left: 0; right: 0; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 13px; }
.gal__title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: right; color: var(--ink-primary); font-size: 11.5px; font-weight: 600; }
.gal__x { display: flex; align-items: center; justify-content: center; flex: 0 0 44px; width: 44px; height: 44px; margin: -8px -8px -8px 0; padding: 0; border: 0; border-radius: var(--radius-pill); background: var(--scrim-soft); color: var(--ink-primary); font-family: inherit; font-size: 19px; cursor: pointer; }
.gal__x:focus-visible, .gal__play:focus-visible { outline: 2px solid var(--ink-primary); outline-offset: 2px; }
.gal__nav:focus-visible { outline: 2px solid var(--ink-primary); outline-offset: -2px; }
/* G22: the picture, and the button below it (Director text N560, answer 2). */
.pop__pic { display: block; width: 100%; padding: 0; margin: 0; border: 0; border-radius: 7px 7px 0 0; overflow: hidden; background: var(--layer); }
.pop__pic--go { cursor: pointer; }
.pop__pic-img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.pop__body--pic { padding: 4px 18px 16px; }
.home__chip:focus-visible, .home__account:focus-visible, .home__search:focus-visible, .home__fab:focus-visible,
.pop__x:focus-visible, .pop__cta:focus-visible, .offers__purch:focus-visible, .offers__all:focus-visible,
.offer__photos:focus-visible, .offer__buy:focus-visible { outline: 2px solid var(--ink-primary); outline-offset: 2px; }
.banner:focus-visible, .pop__go:focus-visible, .pop__pic--go:focus-visible, .offer__step-btn:focus-visible { outline: 2px solid var(--ink-primary); outline-offset: -2px; }

/* S04 — the search field (E6, E6n, E6c, E15a): every value from the app file's search view
   (phone). The field's edge, #DCE4F5 as drawn, is its own (lighter than ruling 15's
   --line-control); the line between «امسح» and «تصفية» bounds no field: a divider. The top
   bar's chips are the home's (.home__chip). */
.search__head { flex-shrink: 0; padding: 8px 12px 0; display: flex; flex-direction: column; gap: 6px; }
.search__top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.search__bar { display: flex; align-items: center; gap: 8px; }
/* The counts are 18 × 18 with their padding inside, as the HTML draws them (border-box). */
.search__bar .home__badge { box-sizing: border-box; flex-shrink: 0; }
.search__field { display: flex; align-items: center; gap: 6px; height: 50px; padding: 0 12px 0 4px; border-radius: var(--radius); border: 1px solid var(--structural-light); background: var(--selected); }
.search__input { flex: 1; min-width: 0; height: 44px; padding: 0; margin: 0; border: 0; outline: none; background: transparent; color: var(--ink-primary); font-family: var(--font); font-size: 13.5px; font-weight: 600; }
/* The placeholder at the field's 600, as the HTML draws it. Its colour: owner ruling N707
   (Q-175), this field only — #8D9AB5 was 3.94:1 on #1E3A6E; every other placeholder keeps
   N551 answer 8. */
.search__input::placeholder { color: var(--ink-placeholder-selected); }
.search__clear { display: flex; align-items: center; justify-content: center; flex: 0 0 44px; width: 44px; height: 44px; padding: 0; margin: 0; border: 0; background: transparent; color: var(--ink-secondary); font-family: inherit; font-size: 15px; cursor: pointer; }
.search__sep { flex: 0 0 1px; width: 1px; height: 24px; background: var(--line-light); }
.search__filter { position: relative; display: flex; align-items: center; justify-content: center; flex: 0 0 44px; width: 44px; height: 44px; padding: 0; margin: 0; border: 0; background: transparent; cursor: pointer; }
.search__body { flex: 1; min-height: 0; overflow-y: auto; padding: 12px 16px 16px; }
.search__offers { margin-top: 4px; }
.search__all { padding: 0 8px; }
.search__offline { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 48px 18px 0; text-align: center; }
.search__offline-title { color: var(--ink-primary); font-size: 13px; font-weight: 600; line-height: 1.7; }
.search__offline-text { color: var(--ink-secondary); font-size: 12.5px; line-height: 1.7; text-wrap: pretty; }
.search__retry { display: inline-flex; align-items: center; height: 44px; padding: 0 18px; margin: 0; border-radius: var(--radius); border: 1px solid var(--structural-light); background: transparent; color: var(--ink-primary); font-family: inherit; font-size: 12.5px; font-weight: 600; white-space: nowrap; cursor: pointer; }
/* Visible focus (ruling 14): the field carries the ring while its input has the focus, as
   «الدخول»'s e-mail field does (.login__mail). */
.search__field:has(.search__input:focus) { outline: 2px solid var(--ink-primary); outline-offset: 2px; }
.search__clear:focus-visible, .search__filter:focus-visible, .search__retry:focus-visible { outline: 2px solid var(--ink-primary); outline-offset: 2px; }

/* S05a — the results (E6b, E12, E4, E15, E12x): every value from the app file's results view
   (phone). E4 hides «تصفية» and its line, as the HTML does (filterBtnOn). */
.search__field--none .search__sep, .search__field--none .search__filter { display: none; }
.results__count { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 0 0 4px; }
.results__n { color: var(--ink-secondary); font-size: 11.5px; font-weight: 600; white-space: nowrap; }
.results__num { color: var(--ink-primary); font-variant-numeric: tabular-nums; }
.results__sort { display: inline-flex; align-items: center; gap: 5px; min-height: 44px; padding: 0 4px; margin: 0; border: 0; background: transparent; font-family: inherit; cursor: pointer; }
.results__sort-label { color: var(--structural-light); font-size: 11.5px; font-weight: 600; }
.results__list, .results__wait { margin: 0 -16px; }
.result { display: flex; align-items: flex-start; gap: 10px; padding: 8px 16px 7px; border-bottom: 1px solid var(--layer); }
.result__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
/* An offer bought from the results: − [typed quantity] + (the app file's results row; N830, Q-253). */
.result__qty { box-sizing: border-box; display: inline-flex; align-items: center; height: 44px; border-radius: var(--radius-pill); border: 1px solid var(--structural-light); background: var(--layer); overflow: hidden; direction: ltr; }
.result__qty-btn { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; margin: 0; border: 0; background: transparent; color: var(--ink-primary); font-family: inherit; font-size: 17px; font-weight: 400; cursor: pointer; }
.result__qty-btn:hover { background: var(--selected); }
.result__qty-btn--max, .result__qty-btn--max:hover { color: var(--line-mid); background: transparent; cursor: not-allowed; }
.result__qty-in { box-sizing: border-box; width: 40px; height: 44px; padding: 0; margin: 0; text-align: center; background: var(--ground); border: 0; border-inline: 1px solid var(--line-light); outline: none; color: var(--ink-primary); font-family: inherit; font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; user-select: text; }
.result__qty-btn:focus-visible, .result__qty-in:focus-visible { outline: 2px solid var(--ink-primary); outline-offset: -2px; }
/* A supplier's price with an end (ruling 19; the app file's itemT row): label and time left. */
.result__t { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding-bottom: 6px; margin-bottom: 4px; border-bottom: 1px solid var(--line-light); }
.result__t[hidden] { display: none; }
.result__t-label { color: var(--ink-secondary); font-size: 11.5px; font-weight: 600; white-space: nowrap; }
.result__t-left { color: var(--ink-primary); font-size: 12.5px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.result__name { color: var(--ink-primary); font-size: 11.5px; font-weight: 400; text-align: right; line-height: 1.35; text-wrap: pretty; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.result__meta { display: flex; align-items: center; justify-content: flex-end; gap: 4px; color: var(--ink-secondary); font-size: 11.5px; line-height: 1.4; }
.result__ref { color: var(--ink-primary); font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* 24 × 20 as drawn; its tap layer is the 44 px of ruling 14 (.mt-hit), unseen. */
.result__copy { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 20px; flex: 0 0 24px; padding: 0; margin: 0; border: 0; background: transparent; cursor: pointer; }
.result__made { white-space: nowrap; }
.result__sup { color: var(--ink-secondary); font-size: 11.5px; line-height: 1.5; }
.result__pub { white-space: nowrap; }
/* The supplier's minimum order (owner, N743 Q-193), as the app file draws it: 11 px on one line,
   the sums #F4F4F4 600, a 8 × 2 px #FA4D56 dash before «ينقص». */
.result__min-slot { display: contents; }
.result__min { display: flex; align-items: center; gap: 8px; color: var(--ink-secondary); font-size: 11.5px; line-height: 1.5; }
.result__min-text { white-space: nowrap; font-size: 11px; }
.result__min-sum { white-space: nowrap; }
.result__min-num { color: var(--ink-primary); font-weight: 600; font-variant-numeric: tabular-nums; }
.result__min-dash { display: inline-block; width: 8px; height: 2px; border-radius: 1px; background: var(--error); vertical-align: middle; margin-inline-end: 4px; }
.result__foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 38px; margin-top: 3px; }
.result__state { display: flex; align-items: center; gap: 12px; min-width: 0; flex-wrap: wrap; }
.result__price { color: var(--ink-primary); font-size: 14px; font-weight: 600; white-space: nowrap; }
/* The supplier's discount (S05c, ruling 19), as the app file draws it: the price #42BE65, the
   price before it 11.5px #FA4D56 struck; under them, 11px, the percentage #42BE65 600, then
   «حتّى <date>» #C6C6C6 or «ينتهي خلال» #C6C6C6 with the time left #F4F4F4 600. */
.result__off { display: inline-flex; flex-direction: column; gap: 1px; }
.result__off-row { display: inline-flex; align-items: baseline; gap: 8px; white-space: nowrap; }
.result__off-row--sub { gap: 6px; font-size: 11px; }
.result__price--off { color: var(--success); }
.result__was { color: var(--error); font-size: 11.5px; text-decoration: line-through; font-variant-numeric: tabular-nums; }
.result__pct { color: var(--success); font-weight: 600; font-variant-numeric: tabular-nums; }
.result__until { color: var(--ink-secondary); font-variant-numeric: tabular-nums; }
.result__left { display: inline-flex; align-items: baseline; gap: 4px; color: var(--ink-secondary); }
.result__clock { color: var(--ink-primary); font-weight: 600; font-variant-numeric: tabular-nums; }
.result__avail { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-primary); font-size: 11.5px; font-weight: 600; white-space: nowrap; }
/* «غير مؤكّد» (S06), as the app file draws it: a ring for a dot (1.5px #F1C21B), then «اسأله» —
   a 32 px pill on #16294F with a #DCE4F5 edge, its telephone sign #F1C21B and a ‹ #DCE4F5. */
.result__dot.result__dot--unconf { box-sizing: border-box; background: transparent; border: 1.5px solid var(--warning); }
.result__ask { display: inline-flex; align-items: center; gap: 5px; height: 32px; padding: 0 11px; margin: 0; border-radius: var(--radius-pill); border: 1px solid var(--structural-light); background: var(--layer); color: var(--ink-primary); font-family: inherit; font-size: 11.5px; font-weight: 600; white-space: nowrap; cursor: pointer; }
.result__ask:hover { background: var(--selected); }
.result__ask-go { color: var(--structural-light); font-size: 13px; line-height: 1; }
/* A line waiting for the supplier's leave (S07, the app file's isPending): its brand and country
   alone (11.5px #C6C6C6, no reference); «اتصل به» 11px 600 #DCE4F5 underlined (3px under), its
   44 px reaching 8px over its neighbours; «بانتظار الإذن» 44 px, a #2C4070 edge, #C6C6C6 with a
   7 px ring — not a control. */
.result__made--alone { color: var(--ink-secondary); font-size: 11.5px; line-height: 1.5; text-align: right; }
.result__notes { color: var(--ink-secondary); font-size: 11.5px; line-height: 1.5; }
.result__call { display: inline-flex; align-items: center; min-height: 44px; margin: -8px 0; padding: 0; border: 0; background: transparent; color: var(--structural-light); font-family: inherit; font-size: 11px; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; cursor: pointer; }
.result__waiting { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 44px; padding: 0 12px; box-sizing: border-box; border-radius: var(--radius-pill); border: 1px solid var(--line-light); color: var(--ink-secondary); font-size: 11.5px; font-weight: 600; white-space: nowrap; }
/* A hidden line (S07, E12a), as the app file draws it: its note #C6C6C6; «اعرضها» a 36 px pill
   #DCE4F5 with #0D2042 ink and an eye, «اطلب الإذن» a 44 px pill on #16294F with a #DCE4F5 edge;
   both 11.5px 600, at least 80 px wide, 12px sides. */
.result__note { display: block; color: var(--ink-secondary); }
.result__locked-acts { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.result__show { display: inline-flex; align-items: center; justify-content: center; gap: 5px; height: 36px; min-width: 80px; padding: 0 12px; margin: 0; border: 0; border-radius: var(--radius-pill); background: var(--structural-light); color: var(--ground); font-family: inherit; font-size: 11.5px; font-weight: 600; white-space: nowrap; cursor: pointer; }
.result__leave { display: inline-flex; align-items: center; justify-content: center; height: 44px; min-width: 80px; padding: 0 12px; margin: 0; border-radius: var(--radius-pill); border: 1px solid var(--structural-light); background: var(--layer); color: var(--ink-primary); font-family: inherit; font-size: 11.5px; font-weight: 600; white-space: nowrap; cursor: pointer; }
.result__leave:hover { background: var(--selected); }
.result__ring { box-sizing: border-box; width: 7px; height: 7px; border-radius: var(--radius-pill); border: 1.5px solid var(--ink-secondary); }
.result__dot { width: 8px; height: 8px; border-radius: var(--radius-pill); background: var(--success); }
.result__buy { display: inline-flex; align-items: center; justify-content: center; height: 44px; min-width: 70px; padding: 0 14px; margin: 0; border: 0; border-radius: var(--radius-pill); background: var(--structural-light); color: var(--ground); font-family: inherit; font-size: 11.5px; font-weight: 600; white-space: nowrap; cursor: pointer; }
/* The typed letters (owner, N656; Director texts N657, N738 ruling 5): weight 600 on #EBEFF7,
   radius 3px — a later ruling than the HTML's #4A5F8C, radius 2px. The ink on that light ground
   is --ground (the tokens' rule for light fills; asked, Q-185). */
/* An inline-block: its box is its line box, so the highlight stays inside the name's two-line clamp (N183; N973 on Q-410 — as an inline, the font's content area stood 1 px above the first line and was cut). */
.result__hl { display: inline-block; background: var(--highlight); color: var(--ground); font-weight: 600; border-radius: 3px; }
/* Grey placeholder rows while the lines load (owner, N739 Q-e): no words; --layer bars in a
   row's own places. */
.result--wait { flex-direction: column; gap: 6px; padding: 10px 16px 9px; }
.wait__bar { display: block; height: 10px; border-radius: var(--radius-small); background: var(--layer); }
.wait__bar--name { width: 72%; height: 12px; }
.wait__bar--meta { width: 44%; }
.wait__bar--sup { width: 56%; }
.wait__foot { align-self: stretch; display: flex; align-items: center; justify-content: space-between; margin-top: 4px; }
.wait__bar--price { flex: 0 0 28%; height: 14px; }
.wait__pill { width: 70px; height: 36px; border-radius: var(--radius-pill); background: var(--layer); }
.results__none-title { color: var(--ink-secondary); font-size: 12.5px; font-weight: 600; line-height: 1.7; }
.results__none-text { color: var(--ink-secondary); font-size: 12px; line-height: 1.7; text-wrap: balance; }
.results__sort:focus-visible, .result__copy:focus-visible, .result__buy:focus-visible { outline: 2px solid var(--ink-primary); outline-offset: 2px; }

/* S05b (Director text N771), the app file's sheets and filter, phone. E4f's «امسح التصفية»: the
   width of the view, its border ruling 15's. */
.results__clear { align-self: stretch; display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 44px; margin: 0; padding: 0 12px; border-radius: var(--radius); border: 1px solid var(--line-control); background: transparent; color: var(--ink-primary); font-family: inherit; font-size: 11.5px; font-weight: 600; cursor: pointer; }
/* «تصفية»'s count (fCount), on its corner. */
.search__filter-n { position: absolute; top: 5px; left: 1px; min-width: 16px; height: 16px; box-sizing: border-box; padding: 0 4px; border-radius: var(--radius-pill); background: var(--structural-light); color: var(--ground); font-size: 10.5px; font-weight: 600; display: flex; align-items: center; justify-content: center; font-variant-numeric: tabular-nums; }
.search__filter-n[hidden] { display: none; }
/* The chips of the filter under the field: a 44 px tap area around each 32 px chip. */
.search__chips-slot:empty { display: none; }
.search__chips { display: flex; align-items: center; gap: 5px; padding: 2px 0 0; overflow-x: auto; }
.search__chip { display: inline-flex; align-items: center; flex: 0 0 auto; min-height: 44px; padding: 0; margin: 0; border: 0; background: transparent; font-family: inherit; cursor: pointer; }
.search__chip-face { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; box-sizing: border-box; padding: 0 10px; border-radius: var(--radius-pill); border: 1px solid var(--structural-light); background: var(--layer); color: var(--structural-light); font-size: 11.5px; font-weight: 600; white-space: nowrap; }
.search__chip-label { unicode-bidi: isolate; }
.search__chip-x { font-size: 13px; }

/* The sheets: at the foot of the column, over a scrim; E5 no taller than 780 px and scrolling. */
.sheet__scrim { position: absolute; inset: 0; z-index: 40; background: var(--scrim); }
.sheet { position: absolute; left: 0; right: 0; bottom: 0; z-index: 41; box-sizing: border-box; overflow-y: auto; border-top: 1px solid var(--line-light); border-radius: var(--radius-sheet) var(--radius-sheet) 0 0; background: var(--ground); }
.sheet--sort { padding: 10px 16px 22px; }
.sheet--filter { padding: 12px 16px 20px; display: flex; flex-direction: column; max-height: min(780px, 100%); }
.sheet__handle { display: block; flex-shrink: 0; width: 42px; height: 4px; margin: 0 auto 11px; border-radius: var(--radius-pill); background: var(--line-mid); }
.sheet--filter .sheet__handle { margin-bottom: 12px; border-radius: 4px; background: var(--ink-tertiary); }
.sheet__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 9px; }
.sheet__head--filter { align-items: baseline; flex-shrink: 0; margin-bottom: 0; }
.sheet__title { margin: 0; color: var(--ink-primary); font-size: 14.5px; font-weight: 600; }
.sheet__x { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; margin: 0; border: 0; background: transparent; color: var(--ink-secondary); font-family: inherit; font-size: 18px; cursor: pointer; }
.sheet__clear { padding: 0; margin: 0; border: 0; background: transparent; color: var(--ink-secondary); font-family: inherit; font-size: 11.5px; font-weight: 400; cursor: pointer; }
/* E11's options: the chosen one on --selected with a light edge, the others on --layer. */
.sheet__options { display: flex; flex-direction: column; gap: 6px; }
.sheet__option { display: grid; grid-template-columns: 19px 1fr; align-items: center; gap: 10px; min-height: 52px; padding: 4px 12px; margin: 0; border-radius: var(--radius); border: 1px solid var(--line-control); background: var(--layer); font-family: inherit; text-align: start; cursor: pointer; }
.sheet__option--on { border-color: var(--structural-light); background: var(--selected); }
.sheet__radio { width: 19px; height: 19px; box-sizing: border-box; border-radius: var(--radius-pill); border: 1px solid var(--line-control); display: flex; align-items: center; justify-content: center; }
.sheet__option--on .sheet__radio { border: 1.5px solid var(--structural-light); }
.sheet__radio-dot { width: 9px; height: 9px; border-radius: var(--radius-pill); background: var(--structural-light); }
.sheet__option-label { color: var(--ink-primary); font-size: 12.5px; font-weight: 600; }
/* E5's lists. */
/* 2 px of room for a focus ring at both sides, the panels centred (N183; N973 on Q-412). */
.sheet__scroll { flex: 1; min-height: 0; overflow-y: auto; margin-top: 12px; padding: 0 2px; }
.sheet__label { margin: 0 0 6px; color: var(--ink-secondary); font-size: 11.5px; font-weight: 600; letter-spacing: .06em; }
.sheet__specs { border: 1px solid var(--line-light); border-radius: var(--radius); overflow: hidden; }
.sheet__spec { width: 100%; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 10px; min-height: 44px; padding: 3px 11px; margin: 0; border: 0; border-bottom: 1px solid var(--layer); background: transparent; font-family: inherit; text-align: start; cursor: pointer; }
.sheet__spec-label { color: var(--ink-primary); font-size: 12px; font-weight: 600; }
.sheet__check { width: 20px; height: 20px; box-sizing: border-box; flex: 0 0 20px; border-radius: 4px; border: 1px solid var(--line-control); display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 600; }
.sheet__check--on, .sheet__check--mixed { border-color: var(--structural-light); background: var(--structural-light); color: var(--ground); }
.sheet__check-bar { width: 10px; height: 2px; background: var(--ground); }
.sheet__makes { display: flex; gap: 6px; padding: 7px 11px 9px; overflow-x: auto; border-bottom: 1px solid var(--layer); direction: ltr; justify-content: flex-end; }
.sheet__make { display: inline-flex; align-items: center; flex: 0 0 auto; min-height: 44px; padding: 0 11px; margin: 0; border-radius: var(--radius-pill); border: 1px solid var(--line-control); background: transparent; color: var(--ink-primary); font-family: inherit; font-size: 11.5px; font-weight: 400; white-space: nowrap; cursor: pointer; }
.sheet__make--on { border-color: var(--structural-light); background: var(--structural-light); color: var(--ground); font-weight: 600; }
.sheet__sups-head { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 44px; margin: 6px 0 0; padding: 0; border: 0; border-bottom: 1px solid var(--line-light); background: transparent; font-family: inherit; cursor: pointer; }
.sheet__sups-title { color: var(--ink-primary); font-size: 12px; font-weight: 600; }
.sheet__sups-n { display: flex; align-items: center; gap: 7px; }
.sheet__sups-count { color: var(--ink-secondary); font-size: 11.5px; font-variant-numeric: tabular-nums; }
.sheet__chevron { color: var(--structural-light); font-size: 11.5px; }
.sheet__sups { margin: 7px 0 11px; border: 1px solid var(--line-light); border-radius: var(--radius); overflow: hidden; }
.sheet__sup { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 48px; padding: 4px 11px; margin: 0; border: 0; border-bottom: 1px solid var(--layer); background: transparent; font-family: inherit; text-align: start; cursor: pointer; }
.sheet__sup-text { min-width: 0; }
.sheet__sup-name, .sheet__sup-sub { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11.5px; }
.sheet__sup-name { color: var(--ink-primary); font-weight: 600; }
.sheet__sup-sub { color: var(--ink-secondary); font-weight: 400; }
.sheet__done { flex-shrink: 0; display: flex; align-items: center; justify-content: center; min-height: 52px; margin: 15px 0 0; padding: 0; border: 0; border-radius: var(--radius); background: var(--action); color: var(--ground); font-family: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; }
:is(.sheet__x, .sheet__clear, .sheet__option, .sheet__spec, .sheet__make, .sheet__sups-head, .sheet__sup, .sheet__done, .search__chip, .results__clear, .result__ask, .result__call, .result__show, .result__leave, .sheet__go, .sheet__undo, .sup__x, .sup__copy, .sup__link):focus-visible { outline: 2px solid var(--ink-primary); outline-offset: -2px; }

/* E13 «بيانات المورّد» (S06), as the app file draws it: 18px sides, 14px between its parts; the
   shop 56 px, radius 8; the name 17px 300; the × 44 px in a box (its edge ruling 15's
   --line-control); «تسأل عن» on --layer; «اتّصل»: 52 px lines, each phone a tel: link with a
   #42BE65 sign, the e-mail a mailto: link, each with its copy button (44 px, the reference's 52);
   then the speciality, the hours and the minimum, 8px rows under a line. */
/* E12c and E12r (S07), as the app file draws them: 18px sides, 24 under, 14 between; the question
   19px 300; the name 12.5px 600; the text 12.5px #C6C6C6, 1.7 high; the action 50 px #FF8A1F
   with #0D2042 ink, 14px 600; «تراجع» 48 px, 13.5px 600, its edge ruling 15's --line-control
   (the app file's #4A5F8C). */
.sheet--reveal, .sheet--leave { padding: 10px 18px 24px; display: flex; flex-direction: column; gap: 14px; }
:is(.sheet--reveal, .sheet--leave) .sheet__handle { margin-bottom: 0; }
.sheet__ask-title { margin: 0; color: var(--ink-primary); font-size: 19px; font-weight: 300; line-height: 1.4; }
.sheet__ask-name { color: var(--ink-primary); font-size: 12.5px; font-weight: 600; text-align: right; line-height: 1.45; }
.sheet__ask-text { margin: 0; color: var(--ink-secondary); font-size: 12.5px; line-height: 1.7; }
.sheet__ask-acts { display: flex; flex-direction: column; gap: 8px; }
.sheet__go { display: flex; align-items: center; justify-content: center; height: 50px; margin: 0; border: 0; border-radius: var(--radius); background: var(--action); color: var(--ground); font-family: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.sheet__undo { display: flex; align-items: center; justify-content: center; height: 48px; margin: 0; border: 1px solid var(--line-control); border-radius: var(--radius); background: transparent; color: var(--ink-primary); font-family: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; }
.sheet__undo:hover { border-color: var(--structural-light); }
.sheet--supplier { padding: 10px 18px 22px; display: flex; flex-direction: column; gap: 14px; max-height: min(760px, 100%); }
.sheet--supplier .sheet__handle { margin-bottom: 0; }
.sup__head { display: flex; align-items: flex-start; gap: 12px; }
.sup__photo { width: 56px; height: 56px; flex: 0 0 56px; border-radius: var(--radius); object-fit: cover; }
.sup__id { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.sup__name { margin: 0; color: var(--ink-primary); font-size: 17px; font-weight: 300; line-height: 1.3; }
.sup__where { color: var(--ink-secondary); font-size: 11.5px; line-height: 1.5; }
.sup__x { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; flex: 0 0 44px; padding: 0; margin: 0; border: 1px solid var(--line-control); border-radius: var(--radius); background: transparent; color: var(--ink-primary); font-family: inherit; font-size: 16px; cursor: pointer; }
.sup__ask { display: flex; align-items: stretch; overflow: hidden; border: 1px solid var(--line-light); border-radius: var(--radius); background: var(--layer); }
.sup__ask-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; padding: 9px 12px; }
.sup__ask-label { color: var(--ink-secondary); font-size: 11.5px; }
.sup__ask-name { color: var(--ink-primary); font-size: 12px; line-height: 1.4; text-align: right; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sup__ask-ref { color: var(--ink-primary); font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; }
.sup__copy { display: flex; align-items: center; justify-content: center; width: 44px; flex: 0 0 44px; min-height: 52px; padding: 0; margin: 0; border: 0; border-inline-start: 1px solid var(--line-light); background: transparent; cursor: pointer; }
.sup__copy--ask { width: 52px; flex-basis: 52px; min-height: 0; }
.sup__copy:hover, .sup__link:hover { background: var(--selected); }
.sup__contact { display: flex; flex-direction: column; gap: 6px; }
.sup__label { color: var(--ink-secondary); font-size: 11.5px; font-weight: 600; }
.sup__lines { overflow: hidden; border: 1px solid var(--line-light); border-radius: var(--radius); }
.sup__line { display: flex; align-items: stretch; border-bottom: 1px solid var(--line-light); background: var(--layer); }
.sup__line:last-child { border-bottom: 0; }
.sup__link { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; height: 52px; padding: 0 12px; text-decoration: none; cursor: pointer; }
.sup__num { color: var(--ink-primary); font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; }
.sup__mail { min-width: 0; overflow: hidden; color: var(--ink-primary); font-size: 12.5px; font-weight: 600; white-space: nowrap; text-overflow: ellipsis; }
.sup__facts { display: flex; flex-direction: column; }
.sup__fact { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 8px 0; border-top: 1px solid var(--line-light); }
.sup__fact-label { color: var(--ink-secondary); font-size: 11.5px; }
.sup__fact-value { color: var(--ink-primary); font-size: 12.5px; font-weight: 600; text-align: left; }
.search__chip:focus-visible { outline-offset: 2px; }
/* The sheets rise from above the phone's navigation bar (N807 point 3, safe areas). */
.mt-sheet, .wil, .sheet { bottom: env(safe-area-inset-bottom, 0px); }

/* The basket (S10, app «السلّة»; the app file's basket view, phone). */
.basket__head { padding: 10px 12px 10px; display: flex; align-items: center; gap: 6px; border-bottom: 1px solid var(--line-light); }
.basket__title { flex: 1; min-width: 0; color: var(--ink-primary); font-size: 17px; font-weight: 600; }
.basket__link, .basket__empty { display: flex; align-items: center; height: 44px; padding: 0 10px; margin: 0; border: 0; background: transparent; color: var(--structural-light); font-family: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; }
.basket__empty { color: var(--ink-secondary); }
.basket__empty--sure { color: var(--error); white-space: nowrap; }
.basket__empty-slot { display: contents; }
.basket__list { flex: 1; min-height: 0; overflow-y: auto; padding: 12px 16px 16px; display: flex; flex-direction: column; gap: 12px; }
.basket__group { flex-shrink: 0; background: var(--layer); border: 1px solid var(--line-light); border-radius: var(--radius); overflow: hidden; }
.basket__card { padding: 11px 12px 10px; display: flex; flex-direction: column; gap: 3px; }
.basket__sup { color: var(--ink-primary); font-size: 13.5px; font-weight: 600; }
.basket__line { color: var(--ink-secondary); font-size: 11.5px; line-height: 1.5; }
.basket__line--ltr { direction: ltr; text-align: right; unicode-bidi: isolate; line-height: normal; }
.basket__line--num { font-variant-numeric: tabular-nums; }
.basket__item { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; border-top: 1px solid var(--line-light); }
.basket__name { color: var(--ink-primary); font-size: 12px; text-align: right; line-height: 1.4; }
.basket__meta { color: var(--ink-secondary); font-size: 11.5px; text-align: right; }
.basket__ref { color: var(--ink-primary); font-weight: 600; font-variant-numeric: tabular-nums; }
.basket__state { display: flex; align-items: center; gap: 6px; color: var(--ink-secondary); font-size: 11.5px; }
.basket__foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 2px; }
.basket__price { color: var(--ink-primary); font-size: 14px; font-weight: 600; white-space: nowrap; }
.basket__num { font-variant-numeric: tabular-nums; }
.basket__qty { box-sizing: border-box; display: inline-flex; align-items: center; height: 44px; border-radius: var(--radius-pill); border: 1px solid var(--structural-light); background: var(--ground); overflow: hidden; direction: ltr; }
.basket__qty-btn { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; margin: 0; border: 0; background: transparent; color: var(--ink-primary); font-family: inherit; font-size: 17px; cursor: pointer; }
.basket__qty-btn:hover { background: var(--selected); }
.basket__qty-in { box-sizing: border-box; width: 44px; height: 44px; padding: 0; margin: 0; text-align: center; background: var(--layer); border: 0; border-inline: 1px solid var(--line-light); outline: none; color: var(--ink-primary); font-family: inherit; font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; user-select: text; }
.basket__qty-btn:focus-visible, .basket__qty-in:focus-visible { outline: 2px solid var(--ink-primary); outline-offset: -2px; }
.basket__subtotal { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 10px 12px; border-top: 1px solid var(--line-light); }
.basket__sub-label { color: var(--ink-secondary); font-size: 12px; }
.basket__sub-sum { color: var(--ink-primary); font-size: 14px; font-weight: 600; white-space: nowrap; flex-shrink: 0; }
.basket__min { display: flex; align-items: center; gap: 8px; padding: 9px 12px; border-top: 1px solid var(--line-light); background: var(--ground); }
.basket__dot { width: 8px; height: 8px; border-radius: var(--radius-pill); background: var(--success); flex: 0 0 8px; }
.basket__dash { width: 9px; height: 3px; background: var(--error); flex: 0 0 9px; }
.basket__min-text { color: var(--ink-primary); font-size: 11.5px; font-weight: 600; }
.basket__min-text--short { flex: 1; min-width: 0; }
.basket__more { display: inline-flex; align-items: center; min-height: 44px; padding: 0 10px; margin: -12px -10px; border: 0; background: transparent; color: var(--structural-light); font-family: inherit; font-size: 11.5px; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; cursor: pointer; }
/* Fixed at the bottom, outside the list (ruling 9 as ruling 25 keeps it), as wide as it needs. */
/* The bar at the width the app file draws it (align-self: flex-start left 105 px empty at its left) and centred, its two sides equal and its buttons at their drawn size (N183; Director texts N973 and N979 on Q-409). */
.basket__sum { flex: 0 0 auto; align-self: center; border-top: 1px solid var(--line-light); padding: 12px 16px 18px; display: flex; flex-direction: column; gap: 9px; }
.basket__sum[hidden] { display: none; }
.basket__total { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.basket__total-label { color: var(--ink-secondary); font-size: 12.5px; }
.basket__total-sum { color: var(--ink-primary); font-size: 17px; font-weight: 600; white-space: nowrap; flex-shrink: 0; }
.basket__acts { display: flex; gap: 8px; }
.basket__send { flex: 1; display: flex; align-items: center; justify-content: center; gap: 5px; height: 52px; padding: 0 12px; margin: 0; border: 0; border-radius: var(--radius); background: var(--action); color: var(--ground); font-family: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; }
.basket__send--off { background: var(--line-light); color: var(--ink-secondary); cursor: default; }
.basket__save { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; height: 52px; padding: 0 18px; margin: 0; border-radius: var(--radius); border: 1px solid var(--line-control); background: transparent; color: var(--ink-primary); font-family: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; }
.basket__save:hover { border-color: var(--structural-light); }
.basket__why { color: var(--ink-secondary); font-size: 11.5px; line-height: 1.6; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.basket__none { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; text-align: center; padding: 0 20px; }
.basket__none-title { color: var(--ink-primary); font-size: 15px; font-weight: 600; }
.basket__fill { display: inline-flex; align-items: center; height: 44px; padding: 0 16px; margin: 0; border-radius: var(--radius); border: 1px solid var(--structural-light); background: transparent; color: var(--ink-primary); font-family: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; }
:is(.basket__link, .basket__empty, .basket__more, .basket__send, .basket__save, .basket__fill):focus-visible { outline: 2px solid var(--ink-primary); outline-offset: 2px; }

/* F5 «احفظ السلّة» and F17, before sending (S10, its second part; the app file's sheets, phone). */
.sheet--save, .sheet--send { padding: 10px 18px 22px; display: flex; flex-direction: column; gap: 10px; }
.sheet--send { gap: 12px; max-height: min(720px, 100%); }
.sheet--save .sheet__handle, .sheet--send .sheet__handle { margin-bottom: 0; }
.save__title, .send__title { margin: 0; color: var(--ink-primary); font-size: 17px; font-weight: 300; }
.send__title { line-height: 1.4; text-wrap: pretty; }
.save__text { margin: 0; color: var(--ink-secondary); font-size: 12.5px; line-height: 1.6; }
.save__label { margin-top: 4px; color: var(--ink-secondary); font-size: 11.5px; font-weight: 600; }
.save__field { box-sizing: border-box; display: flex; align-items: center; gap: 6px; height: 50px; padding: 0 6px 0 12px; border-radius: var(--radius); background: var(--selected); border: 1px solid var(--structural-light); }
.save__in { flex: 1; min-width: 0; height: 44px; padding: 0; margin: 0; background: transparent; border: 0; outline: none; color: var(--ink-primary); font-family: inherit; font-size: 13.5px; font-weight: 600; user-select: text; }
.save__clear { display: flex; align-items: center; justify-content: center; width: 36px; height: 44px; padding: 0; margin: 0; border: 0; background: transparent; color: var(--ink-secondary); font-family: inherit; font-size: 15px; cursor: pointer; }
.save__clear[hidden] { display: none; }
.save__go { height: 52px; margin-top: 4px; }
.send__from { color: var(--ink-primary); font-size: 12.5px; font-weight: 600; text-align: right; }
.send__list { border: 1px solid var(--line-light); border-radius: var(--radius); overflow: hidden; }
.send__row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border-bottom: 1px solid var(--line-light); background: var(--layer); }
.send__sup { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.send__name { color: var(--ink-primary); font-size: 13px; font-weight: 600; }
.send__mail { color: var(--ink-secondary); font-size: 11.5px; text-align: right; white-space: nowrap; }
.send__sum { color: var(--ink-primary); font-size: 13px; font-weight: 600; white-space: nowrap; }
.save__clear:focus-visible { outline: 2px solid var(--ink-primary); outline-offset: -2px; }
/* The name's ring on its box, as the search field's (ruling 14: a visible focus). */
.save__field:has(.save__in:focus) { outline: 2px solid var(--ink-primary); outline-offset: 2px; }

/* «السجل», its saved lists (S11; the app file's history and savedOpen views, phone). */
.hist__tabs { display: flex; gap: 6px; padding: 10px 16px 0; }
.hist__tab { flex: 1; display: flex; align-items: center; justify-content: center; height: 44px; margin: 0; padding: 0; border-radius: var(--radius-pill); border: 1px solid var(--line-control); background: transparent; color: var(--ink-primary); font-family: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; }
.hist__tab--on { border-color: var(--structural-light); background: var(--structural-light); color: var(--ground); }
.hist__list { flex: 1; min-height: 0; overflow-y: auto; padding: 12px 16px 16px; display: flex; flex-direction: column; gap: 8px; }
.hist__row { flex-shrink: 0; display: flex; flex-direction: column; gap: 4px; margin: 0; padding: 12px; border-radius: var(--radius); border: 1px solid var(--line-control); background: var(--layer); color: inherit; font-family: inherit; text-align: right; cursor: pointer; }
.hist__row-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.hist__name { min-width: 0; color: var(--ink-primary); font-size: 14px; font-weight: 600; }
.hist__sum { color: var(--ink-primary); font-size: 13px; font-weight: 600; white-space: nowrap; }
.hist__parts { color: var(--ink-primary); font-size: 11.5px; font-weight: 400; line-height: 1.5; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.hist__parts-ltr { unicode-bidi: isolate; }
.hist__when { color: var(--ink-secondary); font-size: 11.5px; }
.hist__none { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; text-align: center; padding: 40px 20px; }
.hist__none-title { color: var(--ink-primary); font-size: 15px; font-weight: 600; }
.hist__none-text { color: var(--ink-secondary); font-size: 12.5px; line-height: 1.7; }
.hist__title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hist__saved { padding: 8px 16px 0; color: var(--ink-secondary); font-size: 11.5px; }
.hist__open { flex: 1; min-height: 0; overflow-y: auto; padding: 10px 16px 16px; display: flex; flex-direction: column; gap: 12px; }
.hist__qty { box-sizing: border-box; min-width: 40px; text-align: center; color: var(--ink-primary); font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; border-inline: 1px solid var(--line-light); line-height: 44px; }
.hist__out { width: 9px; height: 3px; background: var(--error); }
/* Fixed at the bottom (ruling 9 as ruling 25 keeps it), the column's width. */
.hist__bar { flex-shrink: 0; border-top: 1px solid var(--line-light); padding: 12px 16px 18px; display: flex; flex-direction: column; gap: 9px; }
.hist__bar .basket__save { padding: 0 18px; }
.hist__bar .hist__delete { padding: 0 16px; }
.hist__delete-sure { flex: 1; min-width: 0; display: flex; align-items: center; justify-content: center; height: 52px; margin: 0; padding: 0 10px; border-radius: var(--radius); border: 1px solid var(--error); background: transparent; color: var(--error); font-family: inherit; font-size: 13.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; }
.hist__delete-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.hist__note { color: var(--ink-secondary); font-size: 11.5px; text-align: center; }
:is(.hist__tab, .hist__row, .hist__delete-sure):focus-visible { outline: 2px solid var(--ink-primary); outline-offset: 2px; }

/* «الطلبات المرسَلة» (S12; the app file's history view, its sent tab, and sendOpen, phone). The
   filters' unchosen edge is the HTML's #2C4070 on a tapped control: ruling 15 (Q-286). */
.hist__filters { display: flex; gap: 8px; flex-shrink: 0; }
.hist__filter { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; height: 48px; margin: 0; padding: 0 12px; border-radius: var(--radius); background: var(--layer); border: 1px solid var(--line-control); color: inherit; font-family: inherit; text-align: right; cursor: pointer; }
.hist__filter-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.hist__filter-label { color: var(--ink-secondary); font-size: 10.5px; }
.hist__filter-value { color: var(--ink-primary); font-size: 12.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hist__filter svg { flex: 0 0 14px; }
.hist__count { color: var(--ink-secondary); font-size: 11.5px; font-weight: 600; }
.order__open-list { padding: 12px 16px 16px; }
.order__when { color: var(--ink-secondary); font-size: 11.5px; }
.order__sup { font-size: 14px; }
.order__item { gap: 3px; }
.order__line { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.order__calc { color: var(--ink-primary); font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.order__file { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 8px 6px 12px; border-top: 1px solid var(--line-light); }
.order__file-name { min-width: 0; color: var(--structural-light); font-size: 11.5px; unicode-bidi: isolate; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.order__open { flex: 0 0 auto; display: flex; align-items: center; height: 44px; margin: 0; padding: 0 16px; border-radius: var(--radius-pill); border: 1px solid var(--structural-light); background: transparent; color: var(--ink-primary); font-family: inherit; font-size: 12px; font-weight: 600; cursor: pointer; }
.order__bar { gap: 10px; }
.order__total { padding: 0 2px; }
.order__bar :is(.order__again, .order__add) { flex: 1; min-width: 0; padding: 0 8px; white-space: nowrap; }
:is(.hist__filter, .order__open):focus-visible { outline: 2px solid var(--ink-primary); outline-offset: 2px; }

/* «المراجعة», «رجوع»'s place in the search while completing an order (S12d; the app file's compShow). */
.search__review { display: flex; align-items: center; gap: 2px; height: 44px; margin: 0; padding: 0; padding-inline-end: 8px; border: 0; background: transparent; color: var(--ink-primary); font-family: inherit; font-size: 12.5px; font-weight: 600; white-space: nowrap; cursor: pointer; }
.search__review-mark { display: flex; align-items: center; justify-content: center; width: 32px; height: 44px; }
.search__review:focus-visible { outline: 2px solid var(--ink-primary); outline-offset: 2px; }

/* F21 «راجِع قبل الإرسال» (S12c; the app file's reorder, phone). */
.reorder__list { padding: 10px 16px 16px; }
.reorder__was s { text-decoration: line-through; }
.reorder__short { display: flex; align-items: center; gap: 10px; padding: 0 8px 10px 12px; }
.reorder__short-text { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; color: var(--ink-primary); font-size: 11.5px; font-weight: 600; }
.reorder__bar { flex: 0 0 9px; width: 9px; height: 3px; background: var(--error); }
.reorder__complete { flex: 0 0 auto; display: flex; align-items: center; height: 44px; margin: 0; padding: 0 14px; border-radius: var(--radius); border: 1px solid var(--structural-light); background: transparent; color: var(--ink-primary); font-family: inherit; font-size: 12px; font-weight: 600; white-space: nowrap; cursor: pointer; }
.reorder__complete:hover { background: var(--selected); }
.reorder__ok { display: flex; align-items: center; gap: 8px; padding: 0 12px 11px; color: var(--ink-secondary); font-size: 11.5px; }
.reorder__send--off { background: var(--action-disabled); cursor: not-allowed; }
.reorder__complete:focus-visible { outline: 2px solid var(--ink-primary); outline-offset: 2px; }

/* «الطلبات المرسَلة»'s filters (S12b; the app file's supSheet and dateSheet). A filter in use is edged
   in the action colour; a choice's edge and unchosen ring are ruling 15's --line-control (the HTML's
   #2C4070 and #4A5F8C, Q-286). A calendar day with no basket sent is --ink-tertiary (owner, N859,
   Q-301: the HTML's #4A5F8C was 2.54:1). */
.hist__filter--on { border-color: var(--action); }
.hist__none--filter { flex: 0 0 auto; gap: 10px; padding: 40px 12px; }
.sheet--hist { padding: 10px 18px 24px; display: flex; flex-direction: column; gap: 12px; max-height: 86%; }
.sheet--hist .sheet__handle { margin-bottom: 0; }
/* «احتياجاتي» (S13, the app file's sheetNeeds): M1, M7. Ruling 15: the pictures' front card, the
   control's own edge, #4A5F8C → --line-control; the rows' and back cards' #2C4070 are decorative. */
.sheet--needs { padding: 10px 16px 20px; display: flex; flex-direction: column; gap: 10px; max-height: min(640px, 100%); }
.sheet--needs .sheet__handle { margin-bottom: 0; }
.needs__head { flex-shrink: 0; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.needs__titles { display: flex; align-items: baseline; gap: 8px; white-space: nowrap; }
.needs__title { margin: 0; color: var(--ink-primary); font-size: 15px; font-weight: 600; }
.needs__count { color: var(--ink-secondary); font-size: 11.5px; }
.needs__list { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; }
.needs__none { margin: 0; padding: 18px 14px; color: var(--ink-secondary); font-size: 12.5px; line-height: 1.7; }
.needs__row { display: flex; align-items: center; gap: 10px; margin-bottom: 7px; padding: 9px 11px; border-radius: var(--radius); background: var(--layer); border: 1px solid var(--line-light); }
.needs__pics { position: relative; flex: 0 0 50px; width: 50px; height: 54px; padding: 0; margin: 0; border: 0; background: transparent; cursor: pointer; }
.needs__pics--one { display: flex; align-items: center; justify-content: center; box-sizing: border-box; border-radius: var(--radius); background: var(--line-light); border: 1px solid var(--line-control); }
.needs__card { position: absolute; inset: 3px 2px; border-radius: var(--radius); background: var(--layer); border: 1px solid var(--line-light); }
.needs__card--l { transform: rotate(-6deg); }
.needs__card--r { transform: rotate(5deg); }
.needs__card--top { inset: 4px 3px; background: var(--line-light); border-color: var(--line-control); display: flex; align-items: center; justify-content: center; }
.needs__text { flex: 1; min-width: 0; }
.needs__what { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: right; unicode-bidi: isolate; color: var(--ink-primary); font-size: 12px; font-weight: 600; }
.needs__what--none { color: var(--ink-secondary); font-weight: 400; }
.needs__meta { display: block; margin-top: 5px; white-space: nowrap; color: var(--ink-secondary); font-size: 11.5px; }
.needs__x { display: flex; align-items: center; justify-content: center; flex: 0 0 44px; width: 44px; height: 44px; margin: -8px -6px -8px 0; padding: 0; border: 0; background: transparent; color: var(--ink-secondary); font-family: inherit; font-size: 14px; cursor: pointer; }
.needs__x:hover { color: var(--ink-primary); }
.needs__undo { flex-shrink: 0; display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 48px; padding: 0 6px 0 12px; border-radius: var(--radius); background: var(--structural-light); }
.needs__undo[hidden] { display: none; }
.needs__undo-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ground); font-size: 12.5px; font-weight: 600; }
.needs__undo-what { direction: ltr; unicode-bidi: isolate; }
.needs__undo-go { display: flex; align-items: center; flex: 0 0 auto; height: 44px; padding: 0 12px; margin: 0; border: 0; background: transparent; color: var(--ground); font-family: inherit; font-size: 12.5px; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.needs__new { flex-shrink: 0; display: flex; align-items: center; justify-content: center; gap: 8px; height: 48px; padding: 0; margin: 0; border-radius: var(--radius); border: 1px solid var(--structural-light); background: transparent; color: var(--ink-primary); font-family: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.needs__new:hover { background: var(--layer); }
.needs__plus { font-size: 18px; line-height: 1; }
:is(.needs__pics, .needs__x, .needs__new):focus-visible { outline: 2px solid var(--ink-primary); outline-offset: 2px; }
.needs__undo-go:focus-visible { outline: 2px solid var(--ground); outline-offset: -2px; }
/* The capture sheet (S13b, the app file's sheetCapture): M2, M3. Ruling 15: «صورة» and «تمّ», #4A5F8C
   → --line-control. */
.sheet--capture { padding: 10px 18px 22px; display: flex; flex-direction: column; gap: 12px; }
.sheet--capture .sheet__handle { margin-bottom: 0; }
.needs__field { box-sizing: border-box; width: 100%; resize: none; margin: 0; padding: 12px; border-radius: var(--radius); border: 1px solid var(--structural-light); background: var(--selected); outline: none; color: var(--ink-primary); font-family: inherit; font-size: 13.5px; font-weight: 600; line-height: 1.6; user-select: text; }
/* The HTML leaves the placeholder to the browser's own grey; --ink-secondary (4.5:1 or more, ruling
   14) in its place (Q-323). */
.needs__field::placeholder { color: var(--ink-secondary); opacity: 1; }
.needs__field:focus-visible { outline: 2px solid var(--ink-primary); outline-offset: 2px; }
.needs__file { display: none; }
.needs__acts { display: flex; gap: 8px; }
.needs__save-slot { display: contents; }
.needs__photo { display: inline-flex; align-items: center; justify-content: center; gap: 7px; flex: 0 0 auto; height: 48px; padding: 0 14px; margin: 0; border-radius: var(--radius); border: 1px solid var(--line-control); background: transparent; color: var(--ink-primary); font-family: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; }
.needs__photo:hover { border-color: var(--structural-light); }
.needs__save { flex: 1; display: flex; align-items: center; justify-content: center; height: 48px; padding: 0; margin: 0; border: 0; border-radius: var(--radius); background: var(--action); color: var(--ground); font-family: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.needs__save--off { background: var(--line-light); color: var(--ink-secondary); cursor: default; }
.needs__saved { display: flex; align-items: center; gap: 8px; }
.needs__dot { flex: 0 0 9px; width: 9px; height: 9px; border-radius: var(--radius-pill); background: var(--success); }
.needs__last { padding: 11px 12px; border-radius: var(--radius); background: var(--layer); border: 1px solid var(--line-light); color: var(--ink-primary); font-size: 13px; line-height: 1.6; overflow-wrap: anywhere; }
.needs__done { flex: 1; display: flex; align-items: center; justify-content: center; height: 48px; padding: 0; margin: 0; border-radius: var(--radius); border: 1px solid var(--line-control); background: transparent; color: var(--ink-primary); font-family: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
:is(.needs__photo, .needs__save, .needs__done):focus-visible { outline: 2px solid var(--ink-primary); outline-offset: 2px; }
.hsheet__title { margin: 0; color: var(--ink-primary); font-size: 19px; font-weight: 300; }
.hsheet__opts { display: flex; flex-direction: column; gap: 12px; }
.hsheet__opt { display: flex; align-items: center; gap: 10px; min-height: 48px; margin: 0; padding: 0 12px; border-radius: var(--radius); background: var(--layer); border: 1px solid var(--line-control); color: inherit; font-family: inherit; text-align: right; cursor: pointer; }
.hsheet__opts[aria-label='التاريخ'] .hsheet__opt { min-height: 44px; }
.hsheet__ring { flex: 0 0 18px; width: 18px; height: 18px; box-sizing: border-box; border-radius: var(--radius-pill); border: 1.5px solid var(--line-control); }
.hsheet__ring--on { border: 5px solid var(--structural-light); }
.hsheet__label { flex: 1; min-width: 0; color: var(--ink-primary); font-size: 13px; font-weight: 600; }
.hsheet__count { color: var(--ink-secondary); font-size: 11.5px; white-space: nowrap; }
.hsheet__cal { display: flex; flex-direction: column; gap: 12px; }
.hsheet__navrow { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 4px; }
.hsheet__nav { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin: 0; padding: 0; border: 0; background: transparent; cursor: pointer; }
.hsheet__month { color: var(--ink-primary); font-size: 13.5px; font-weight: 600; }
.hsheet__grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); row-gap: 2px; }
.hsheet__wday { text-align: center; color: var(--ink-secondary); font-size: 10.5px; padding-bottom: 4px; }
.hsheet__day { display: flex; align-items: center; justify-content: center; height: 44px; margin: 0; padding: 0; border: 0; background: transparent; color: var(--ink-tertiary); font-family: inherit; font-size: 12.5px; font-variant-numeric: tabular-nums; cursor: pointer; }
.hsheet__day--sent { color: var(--ink-primary); font-weight: 600; }
.hsheet__day--in { color: var(--ink-primary); font-weight: 600; background: var(--selected); }
.hsheet__day--end { color: var(--ground); font-weight: 600; background: var(--structural-light); border-radius: var(--radius); }
.hsheet__hint { color: var(--ink-secondary); font-size: 11.5px; text-align: center; }
.hsheet__apply { display: flex; align-items: center; justify-content: center; height: 52px; flex-shrink: 0; margin: 0; border: 0; border-radius: var(--radius); background: var(--action); color: var(--ground); font-family: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; }
.hsheet__apply--off { background: var(--action-disabled); cursor: not-allowed; }
:is(.hsheet__opt, .hsheet__nav, .hsheet__day, .hsheet__apply):focus-visible { outline: 2px solid var(--ink-primary); outline-offset: 2px; }

/* F18, the basket sent (the app file's sent view). */
.sent { align-items: center; justify-content: center; gap: 14px; padding: 0 28px; text-align: center; }
.sent__mark { flex: 0 0 auto; box-sizing: border-box; width: 56px; height: 56px; border-radius: var(--radius-pill); border: 2px solid var(--success); color: var(--success); display: flex; align-items: center; justify-content: center; }
.sent__title { color: var(--ink-primary); font-size: 22px; font-weight: 300; line-height: 1.4; white-space: nowrap; }
.sent__view { display: flex; align-items: center; height: 44px; padding: 0 18px; margin: 6px 0 0; border-radius: var(--radius); border: 1px solid var(--structural-light); background: transparent; color: var(--ink-primary); font-family: inherit; font-size: 13px; font-weight: 600; white-space: nowrap; cursor: pointer; }
.sent__view:hover { background: var(--selected); }
.sent__back { display: flex; align-items: center; height: 44px; padding: 0 18px; margin: 0; border: 0; background: transparent; color: var(--ink-secondary); font-family: inherit; font-size: 13px; font-weight: 400; white-space: nowrap; cursor: pointer; }
.sent__back:hover { color: var(--ink-primary); }
:is(.sent__view, .sent__back):focus-visible { outline: 2px solid var(--ink-primary); outline-offset: 2px; }
/* «العروض» (S14, the app file's offers and purch views): G1 «كلّ العروض», G2 «سلّة العروض». Ruling
   15: an origin chip not chosen, the control's own edge, #4A5F8C → --line-control; the box and row
   lines are decorative (#2C4070). */
.offers__all-title { flex: 1; min-width: 0; color: var(--ink-primary); font-size: 17px; font-weight: 600; }
.offers__all-body { flex: 1; min-height: 0; overflow-y: auto; padding: 12px 16px 16px; display: flex; flex-direction: column; gap: 12px; }
.offers__origins { flex-shrink: 0; display: flex; gap: 6px; overflow-x: auto; margin: -4px -16px; padding: 4px 16px; scrollbar-width: none; }
.offers__origins::-webkit-scrollbar { display: none; }
/* 36 px as drawn; an unseen layer makes the 44 px of ruling 14. */
.offers__origin { position: relative; flex: 0 0 auto; display: inline-flex; align-items: center; height: 36px; padding: 0 14px; margin: 0; border-radius: var(--radius-pill); border: 1px solid var(--line-control); background: transparent; color: var(--ink-primary); font-family: inherit; font-size: 12px; font-weight: 600; white-space: nowrap; cursor: pointer; }
.offers__origin::before { content: ''; position: absolute; inset: -5px 0; }
.offers__origin--on { border-color: var(--structural-light); background: var(--structural-light); color: var(--ground); }
.offers__origin:focus-visible { outline: 2px solid var(--ink-primary); outline-offset: 2px; }
.offers__box { flex-shrink: 0; border: 1px solid var(--line-light); border-radius: var(--radius); overflow: hidden; }
.offers__box .offer:focus { outline: 2px solid var(--ink-primary); outline-offset: -2px; }
.purch__body { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.purch__scroll { flex: 1; min-height: 0; overflow-y: auto; padding: 12px 16px 16px; display: flex; flex-direction: column; gap: 12px; }
.purch__row { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; border-bottom: 1px solid var(--line-light); }
.purch__sums { display: flex; flex-direction: column; gap: 1px; }
.purch__each { color: var(--ink-secondary); font-size: 11px; white-space: nowrap; }
.purch__warn { display: flex; gap: 8px; align-items: flex-start; margin: 4px 2px 0; padding: 10px 12px; border-radius: var(--radius); border: 1px solid var(--line-mid); color: var(--ink-primary); font-size: 12px; line-height: 1.6; }
.purch__warn svg { flex: 0 0 16px; margin-top: 2px; }
.purch__foot { flex-shrink: 0; border-top: 1px solid var(--line-light); padding: 12px 16px 18px; display: flex; flex-direction: column; gap: 9px; }
.purch__go { display: flex; align-items: center; justify-content: center; height: 52px; padding: 0; margin: 0; border: 0; border-radius: var(--radius); background: var(--action); color: var(--ground); font-family: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; }
.purch__empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; text-align: center; padding: 40px 24px; }
.purch__empty-title { margin: 0; color: var(--ink-primary); font-size: 15px; font-weight: 600; }
.purch__empty-text { margin: 0; color: var(--ink-secondary); font-size: 12.5px; line-height: 1.7; }
.purch__show { display: inline-flex; align-items: center; height: 44px; padding: 0 16px; margin: 0; border-radius: var(--radius); border: 1px solid var(--structural-light); background: transparent; color: var(--ink-primary); font-family: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; }
:is(.purch__go, .purch__show):focus-visible { outline: 2px solid var(--ink-primary); outline-offset: 2px; }

/* «التوصيل» (S14b, H1–H4): the app file's delivery view. The off mode's border and the unpicked
   radio's are --line-control in place of the HTML's #4A5F8C (ruling 15). */
.deliv__scroll { flex: 1; min-height: 0; overflow-y: auto; padding: 12px 16px 16px; display: flex; flex-direction: column; gap: 12px; }
.deliv__section { flex-shrink: 0; display: flex; flex-direction: column; gap: 8px; }
.deliv__label { color: var(--ink-primary); font-size: 13px; font-weight: 600; white-space: nowrap; }
.deliv__modes { display: flex; gap: 8px; }
.deliv__mode { flex: 1; display: flex; align-items: center; justify-content: center; height: 48px; padding: 0; margin: 0; border-radius: var(--radius); border: 1px solid var(--line-control); background: transparent; color: var(--ink-primary); font-family: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; }
.deliv__mode--on { border-color: var(--structural-light); background: var(--structural-light); color: var(--ground); }
.deliv__addr { flex-shrink: 0; box-sizing: border-box; padding: 12px; display: flex; align-items: center; gap: 10px; border-radius: var(--radius); border: 1px solid var(--line-light); background: var(--layer); }
.deliv__addr-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.deliv__addr-label { color: var(--ink-secondary); font-size: 11.5px; }
.deliv__addr-text { color: var(--ink-primary); font-size: 12.5px; font-weight: 600; line-height: 1.5; }
.deliv__change { display: inline-flex; align-items: center; height: 44px; padding: 0 14px; margin: 0; border-radius: var(--radius-pill); border: 1px solid var(--structural-light); background: transparent; color: var(--ink-primary); font-family: inherit; font-size: 12px; font-weight: 600; white-space: nowrap; cursor: pointer; }
.deliv__ships { display: contents; }
/* S14c: the office search (H5), the shipments' heads (H8), the cap's warning (H6, H7), «ادفع من أرباحك».
   The search box's border and the checkbox's are --line-control (ruling 15). */
.deliv__find { flex-shrink: 0; box-sizing: border-box; display: flex; align-items: center; gap: 8px; height: 46px; padding: 0 12px; border-radius: var(--radius); background: var(--layer); border: 1px solid var(--line-control); }
.deliv__find[hidden] { display: none; }
.deliv__find svg { flex: 0 0 16px; }
.deliv__find-in { flex: 1; min-width: 0; height: 44px; padding: 0; margin: 0; background: transparent; border: 0; outline: none; color: var(--ink-primary); font-family: inherit; font-size: 13px; user-select: text; }
.deliv__find-in::placeholder { color: var(--ink-secondary); opacity: 1; }
.deliv__find:has(.deliv__find-in:focus-visible) { outline: 2px solid var(--ink-primary); outline-offset: 2px; }
.deliv__head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.deliv__head-sub { color: var(--ink-secondary); font-size: 11.5px; white-space: nowrap; }
.deliv__over { display: flex; gap: 8px; align-items: flex-start; padding: 10px 12px; border-radius: var(--radius); border: 1px solid var(--line-mid); color: var(--ink-primary); font-size: 12px; line-height: 1.6; }
.deliv__over svg { flex: 0 0 16px; margin-top: 2px; }
.deliv__none { box-sizing: border-box; padding: 14px 12px; border-radius: var(--radius); border: 1px solid var(--line-light); background: var(--layer); color: var(--ink-secondary); font-size: 12px; text-align: center; }
.deliv__pay-slot { display: contents; }
.deliv__pay { flex-shrink: 0; display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 2px; margin: 0; border: 0; background: transparent; font-family: inherit; text-align: start; cursor: pointer; }
.deliv__pay-box { flex: 0 0 20px; width: 20px; height: 20px; box-sizing: border-box; border-radius: 4px; border: 1.5px solid var(--line-control); display: flex; align-items: center; justify-content: center; color: var(--ground); font-size: 13px; font-weight: 600; }
.deliv__pay-box--on { border-color: var(--structural-light); background: var(--structural-light); }
.deliv__pay-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.deliv__pay-label { color: var(--ink-primary); font-size: 12.5px; font-weight: 600; }
.deliv__pay-sub { display: flex; flex-wrap: wrap; column-gap: 10px; color: var(--ink-secondary); font-size: 11.5px; line-height: 1.6; }
.deliv__pay-line { white-space: nowrap; }
.deliv__pay-amt { flex-shrink: 0; color: var(--ink-secondary); font-size: 12px; white-space: nowrap; }
.deliv__v--disc { color: var(--success); }
.deliv__pay:focus-visible { outline: 2px solid var(--ink-primary); outline-offset: 2px; }
/* G10s «وصل طلبك»: the app file's card over the dimmed home. */
.done__scrim { position: absolute; inset: 0; z-index: 70; background: var(--scrim); }
.done { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 71; box-sizing: border-box; width: calc(100% - 48px); max-width: 280px; display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 28px 20px; border-radius: 28px; background: var(--layer); border: 1px solid var(--line-light); }
.done__check { display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: var(--radius-pill); background: var(--success); color: var(--ground); font-size: 28px; font-weight: 600; }
.done__text { color: var(--ink-primary); font-size: 19px; font-weight: 300; line-height: 1.4; text-align: center; white-space: nowrap; }
.deliv__ship { flex-shrink: 0; display: flex; flex-direction: column; gap: 8px; }
.deliv__opts { border: 1px solid var(--line-light); border-radius: var(--radius); background: var(--layer); overflow: hidden; }
.deliv__opt { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 56px; padding: 8px 12px; margin: 0; box-sizing: border-box; border: 0; border-bottom: 1px solid var(--line-light); background: transparent; font-family: inherit; text-align: start; cursor: pointer; }
.deliv__opt--on { background: var(--selected); }
.deliv__radio { flex: 0 0 18px; width: 18px; height: 18px; box-sizing: border-box; border-radius: var(--radius-pill); border: 1.5px solid var(--line-control); }
.deliv__radio--on { border: 5px solid var(--structural-light); }
.deliv__opt-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.deliv__opt-name { color: var(--ink-primary); font-size: 13px; font-weight: 600; text-align: right; }
.deliv__opt-sub { color: var(--ink-secondary); font-size: 11px; line-height: 1.5; text-wrap: pretty; }
.deliv__opt-price { color: var(--ink-primary); font-size: 13px; font-weight: 600; white-space: nowrap; }
.deliv__sums { flex-shrink: 0; display: flex; flex-direction: column; gap: 6px; padding: 0 2px; }
.deliv__row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.deliv__k { color: var(--ink-secondary); font-size: 12.5px; }
.deliv__k--wrap { flex: 1; min-width: 0; line-height: 1.6; }
.deliv__v { color: var(--ink-primary); font-size: 13px; font-weight: 600; white-space: nowrap; }
.deliv__unpicked { color: var(--ink-secondary); font-size: 12.5px; white-space: nowrap; }
.deliv__total { border-top: 1px solid var(--line-light); padding-top: 8px; }
.deliv__total-label { color: var(--ink-primary); font-size: 12.5px; font-weight: 600; }
.deliv__total-sum { color: var(--ink-primary); font-size: 17px; font-weight: 600; white-space: nowrap; }
.deliv__est { color: var(--ink-secondary); font-size: 11px; line-height: 1.6; }
.deliv__foot { flex-shrink: 0; border-top: 1px solid var(--line-light); padding: 12px 16px 18px; display: flex; flex-direction: column; gap: 6px; }
.deliv__confirm { display: flex; align-items: center; justify-content: center; height: 52px; padding: 0; margin: 0; border: 0; border-radius: var(--radius); background: var(--action); color: var(--ground); font-family: inherit; font-size: 13.5px; font-weight: 600; white-space: nowrap; cursor: pointer; }
.deliv__confirm--off { background: var(--action-disabled); cursor: default; }
.deliv__back { display: flex; align-items: center; justify-content: center; height: 44px; padding: 0; margin: 0; border: 0; background: transparent; color: var(--ink-secondary); font-family: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; }
:is(.deliv__mode, .deliv__change, .deliv__confirm, .deliv__back):focus-visible { outline: 2px solid var(--ink-primary); outline-offset: 2px; }
.deliv__opt:focus-visible { outline: 2px solid var(--ink-primary); outline-offset: -2px; }

/* H9 «عنوان التسليم»: the app file's address sheet. The fields' border is --line-control in place of
   the HTML's #2C4070 (ruling 15), as the HTML's fields are drawn elsewhere in the app. */
.sheet--addr { padding: 10px 18px 24px; display: flex; flex-direction: column; gap: 12px; }
.sheet--addr .sheet__handle { margin-bottom: 0; }
.addr__title { margin: 0; color: var(--ink-primary); font-size: 19px; font-weight: 300; line-height: 1.4; }
.addr__field { display: flex; flex-direction: column; gap: 4px; }
.addr__label { color: var(--ink-secondary); font-size: 11.5px; }
.addr__in { box-sizing: border-box; height: 48px; padding: 0 12px; margin: 0; border-radius: var(--radius); background: var(--layer); border: 1px solid var(--line-control); outline: none; color: var(--ink-primary); font-family: inherit; font-size: 13px; font-weight: 600; user-select: text; }
.addr__in::placeholder { color: var(--ink-secondary); opacity: 1; }
.addr__check { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0; margin: 0; border: 0; background: transparent; font-family: inherit; text-align: start; cursor: pointer; }
.addr__box { flex: 0 0 20px; width: 20px; height: 20px; box-sizing: border-box; border-radius: 4px; border: 1.5px solid var(--line-control); display: flex; align-items: center; justify-content: center; }
.addr__box svg { display: none; }
.addr__box--on { border: 0; background: var(--structural-light); color: var(--ground); }
.addr__box--on svg { display: block; }
/* The app's one tick (N910): an inline SVG sized to its text and coloured by it, never the check-mark character. */
.mt-tick { display: inline-block; flex: 0 0 auto; vertical-align: -0.125em; }

/* «حسابي» (S15; the app file's acct menu): the bar with «رجوع» and the title (17 px 600) over a
   --line-light rule; the shop block — a 56 px photo button round a 48 px circle (the owner's
   initial on --structural-light; the photo, on --layer with a --line-mid edge), the «+» / pencil
   badge (20 px, --ink-primary on a 2 px --ground ring), the name 15 px 600, the wilaya 12 px
   --ink-secondary, «تعذّر رفع الصورة» 12 px 600 --error with «أعد المحاولة» underlined; the rows
   box (--line-light, radius 8): 52 px rows, 13.5 px 600 with an 11.5 px --ink-secondary line,
   a chevron on; «تسجيل الخروج» 48 px --error 13.5 px 600; «MT AUTO — 1.0» 11 px --ink-tertiary. */
.acct { display: flex; flex-direction: column; }
.acct__head { display: flex; align-items: center; gap: 6px; padding: 10px 12px; border-bottom: 1px solid var(--line-light); }
.acct__title { margin: 0; flex: 1; color: var(--ink-primary); font-size: 17px; font-weight: 600; }
.acct__body { flex: 1; min-height: 0; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 14px; }
.acct__shop { display: flex; align-items: center; gap: 12px; }
.acct__photo { position: relative; flex: 0 0 56px; width: 56px; height: 56px; display: flex; align-items: center; justify-content: center; padding: 0; margin: 0; border: 0; background: transparent; font-family: inherit; cursor: pointer; }
.acct__pic { width: 48px; height: 48px; box-sizing: border-box; border-radius: var(--radius-pill); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.acct__pic--initial { background: var(--structural-light); color: var(--ground); font-size: 18px; font-weight: 600; }
.acct__pic--photo { background: var(--layer); border: 1px solid var(--line-mid); }
.acct__img { display: block; width: 100%; height: 100%; object-fit: cover; }
.acct__badge { position: absolute; bottom: 0; left: 0; width: 20px; height: 20px; box-sizing: border-box; border-radius: var(--radius-pill); background: var(--ink-primary); border: 2px solid var(--ground); color: var(--ground); font-size: 13px; font-weight: 600; line-height: 1; display: flex; align-items: center; justify-content: center; }
.acct__id { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; line-height: 1.5; }
.acct__name { color: var(--ink-primary); font-size: 15px; font-weight: 600; }
.acct__where { color: var(--ink-secondary); font-size: 12px; }
.acct__fail { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 2px; }
.acct__fail-text { flex-shrink: 0; white-space: nowrap; color: var(--error); font-size: 12px; font-weight: 600; }
.acct__retry { position: relative; flex-shrink: 0; padding: 0; margin: 0; border: 0; background: transparent; color: var(--ink-primary); font-family: inherit; font-size: 12px; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.acct__rows { border: 1px solid var(--line-light); border-radius: var(--radius); overflow: hidden; }
.acct__row { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; min-height: 52px; padding: 8px 12px; margin: 0; box-sizing: border-box; border: 0; border-bottom: 1px solid var(--line-light); background: transparent; color: var(--ink-primary); font-family: inherit; text-align: start; cursor: pointer; }
.acct__row:last-child { border-bottom: 0; }
.acct__row:hover { background: var(--layer); }
.acct__row-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; line-height: 1.5; }
.acct__row-label { color: var(--ink-primary); font-size: 13.5px; font-weight: 600; }
.acct__row-sub { color: var(--ink-secondary); font-size: 11.5px; }
.acct__out { display: flex; align-items: center; min-height: 48px; padding: 0 2px; margin: 0; border: 0; background: transparent; color: var(--error); font-family: inherit; font-size: 13.5px; font-weight: 600; text-align: start; cursor: pointer; }
.acct__version { color: var(--ink-tertiary); font-size: 11px; text-align: center; font-variant-numeric: tabular-nums; }
.acct__file { display: none; }
:is(.acct__photo, .acct__row, .acct__out, .acct__retry, .acct__opt, .acct__settings, .contact__link):focus-visible { outline: 2px solid var(--ink-primary); outline-offset: 2px; }
/* The photo sheet (N1p, N1pe) and the camera refused (N1pd): the title 17 px light, the options
   52 px on --layer with a --line-light edge (13.5 px 600; «احذف الصورة» in --error), the refusal's
   text 13 px --ink-secondary, «افتح الإعدادات» 48 px on --structural-light with --ground ink. */
.sheet--photo, .sheet--denied, .sheet--contact { display: flex; flex-direction: column; gap: 10px; padding: 10px 18px 24px; }
:is(.sheet--photo, .sheet--denied, .sheet--contact) .sheet__handle { width: 36px; margin-bottom: 0; }
.acct__sheet-head, .contact__head { margin-bottom: 0; }
.acct__sheet-title, .contact__title { margin: 0; flex: 1; min-width: 0; color: var(--ink-primary); font-size: 17px; font-weight: 300; line-height: 1.4; }
.acct__opt { display: flex; align-items: center; min-height: 52px; padding: 0 12px; margin: 0; border-radius: var(--radius); border: 1px solid var(--line-control); background: var(--layer); color: var(--ink-primary); font-family: inherit; font-size: 13.5px; font-weight: 600; text-align: start; cursor: pointer; }
/* «احذف الصورة»: the HTML draws the error red on the layer #16294F, 4.28:1 (Q-72, open); ruling 14
   holds over the package (N877), so it is drawn on the ground, 4.85:1 — Q-388. */
.acct__opt--danger { color: var(--error); background: transparent; }
.acct__denied-text { margin: 0; color: var(--ink-secondary); font-size: 13px; line-height: 1.7; text-wrap: pretty; }
.acct__settings { display: flex; align-items: center; justify-content: center; height: 48px; margin: 0; border: 0; border-radius: var(--radius); background: var(--structural-light); color: var(--ground); font-family: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; }
/* «تواصل مع المنصّة» (N3): two links, 56 px on --layer with a --line-light edge — the label 13.5 px
   600, the number 11.5 px --ink-secondary, a ‹ on the far side. */
.contact__link { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 56px; padding: 8px 12px; box-sizing: border-box; border-radius: var(--radius); border: 1px solid var(--line-control); background: var(--layer); color: var(--ink-primary); text-decoration: none; }
.contact__text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.contact__label { color: var(--ink-primary); font-size: 13.5px; font-weight: 600; }
.contact__sub { color: var(--ink-secondary); font-size: 11.5px; font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.contact__chev { flex-shrink: 0; color: var(--ink-secondary); font-size: 15px; }
.addr__check-label { color: var(--ink-primary); font-size: 12.5px; }
.addr__go { height: 50px; }
:is(.addr__in, .addr__check):focus-visible { outline: 2px solid var(--ink-primary); outline-offset: 2px; }

/* S17 «اقترح مورّدًا أو تاجر جملة» (N4, N8): the pictures block of the app file's line 922. */
.sugg__photos { flex-shrink: 0; display: flex; flex-direction: column; gap: 8px; }
.sugg__photos-label { color: var(--ink-secondary); font-size: 12px; font-weight: 600; }
.sugg__shots { display: flex; gap: 8px; flex-wrap: wrap; }
/* The box keeps its «أزل» pill hanging over its corner, as the app file draws it (no clip); the
   picture itself takes the box's rounding. The add button is tapped, so its dashed border takes the
   tapped controls' line (3:1 on the ground, ruling 14), not the app file's #4A5F8C (2.5:1). */
.sugg__shot { position: relative; flex: 0 0 72px; width: 72px; height: 72px; box-sizing: border-box; border-radius: 8px; border: 1px solid var(--line-mid); background: var(--layer); }
.sugg__img { display: block; width: 100%; height: 100%; border-radius: 7px; object-fit: cover; }
/* «أزل» above the neighbouring box: its 44 px tap area hangs 17 px past its own box, over the 8 px
   gap and 9 px of the next picture, which would otherwise cover it (the boxes are positioned too). */
.sugg__rm { position: absolute; top: -17px; left: -17px; z-index: 1; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; padding: 0; margin: 0; border: 0; background: transparent; cursor: pointer; }
.sugg__rm-x { width: 26px; height: 26px; border-radius: var(--radius-pill); background: var(--structural-light); color: var(--ground); font-size: 12px; font-weight: 600; display: flex; align-items: center; justify-content: center; }
.sugg__add { display: flex; align-items: center; justify-content: center; gap: 6px; height: 72px; padding: 0 14px; margin: 0; border-radius: 8px; border: 1px dashed var(--line-control); background: transparent; color: var(--ink-primary); font-family: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; }
.sugg__file { display: none; }
:is(.sugg__add, .sugg__rm):focus-visible { outline: 2px solid var(--ink-primary); outline-offset: 2px; }

/* The short centred window that closes by itself (screens/window.js; board 08's B7s, B9yp, B7ts,
   D1w — N988): its scrim at the board's 0.72, the window 248 px wide on the layer with the light
   line, 28 px corners, the 64 px green circle with the check, the 17 px line, the small Latin line. */
.window__scrim { position: absolute; inset: 0; z-index: 40; background: var(--scrim); }
.window { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 41; box-sizing: border-box; width: 248px; display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 28px 20px 24px; border-radius: 28px; background: var(--layer); border: 1px solid var(--line-light); text-align: center; cursor: pointer; }
.window__check { display: flex; align-items: center; justify-content: center; width: 64px; height: 64px; border-radius: var(--radius-pill); background: var(--success); color: var(--ground); }
.window__text { color: var(--ink-primary); font-size: 17px; font-weight: 600; line-height: 1.45; }
/* N1291 (O-146): the optional quieter line between them, as board 08's D1w draws it. */
.window__line { color: var(--ink-secondary); font-size: 12.5px; line-height: 1.6; }
.window__sub { color: var(--ink-tertiary); font-size: 12px; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* S18 «منتجاتي» (P1, P1e, P1d): the app file's orders view with ordTab 'prod' (its lines 1163–1400). */
.prod { display: flex; flex-direction: column; height: 100%; }
/* The header as the app file draws it: 10 px above, 6 px below, no line under it (the list's own top line follows). */
.prod__head { padding: 10px 12px 6px; display: flex; align-items: center; gap: 6px; }
/* Every button of the screen in the app's font (a button's own default font would widen or narrow it: the compare tool, step 46). */
:is(.prod__add-top, .prod__chip, .prod__ord, .prod__yes, .prod__no, .prod__switch, .prod__act, .prod__keep, .prod__go, .prod__add-first) { font-family: inherit; }
.prod__add-top { flex-shrink: 0; display: inline-flex; align-items: center; height: 44px; margin: 0; padding: 0 14px; border-radius: var(--radius); border: 0; background: var(--action); color: var(--ground); font-size: 13px; font-weight: 600; white-space: nowrap; cursor: pointer; }
.prod__body { flex: 1; min-height: 0; overflow-y: auto; padding: 12px 16px 20px; display: flex; flex-direction: column; gap: 10px; }
/* The row scrolls sideways; its padding keeps the chips' 44 px tap layers (.mt-hit) inside the scroll box, as .offers__origins. */
.prod__chips { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; flex-shrink: 0; margin: -4px -16px; padding: 4px 16px; }
.prod__chip { flex-shrink: 0; display: inline-flex; align-items: center; gap: 5px; height: 36px; margin: 0; padding: 0 12px; border-radius: var(--radius-pill); border: 1px solid var(--line-control); background: transparent; color: var(--ink-primary); font-size: 12px; font-weight: 600; white-space: nowrap; cursor: pointer; }
.prod__chip--on { border-color: var(--structural-light); background: var(--structural-light); color: var(--ground); }
.prod__rows { flex-shrink: 0; border-top: 1px solid var(--line-light); }
.prod__row { display: flex; align-items: flex-start; gap: 10px; padding: 11px 0; border-bottom: 1px solid var(--line-light); }
/* The pictures' stack (38 × 51): two tilted cards under the top one with its camera, the play badge at the corner. */
.prod__media { position: relative; flex: 0 0 38px; width: 38px; aspect-ratio: 3 / 4; margin: 2px 0 0; padding: 0; border: 0; background: transparent; cursor: pointer; }
.prod__media::before { content: ''; position: absolute; inset: -4px -3px; }
.prod__play { position: absolute; bottom: -4px; left: -4px; z-index: 2; width: 16px; height: 16px; border-radius: var(--radius-pill); background: var(--structural-light); display: flex; align-items: center; justify-content: center; }
.prod__card { position: absolute; inset: 0; border-radius: 7px; background: var(--layer); border: 1px solid var(--line-light); }
.prod__card--l { transform: rotate(-8deg); }
.prod__card--r { transform: rotate(5deg); }
.prod__card--top { border-radius: var(--radius); background: var(--line-light); border-color: var(--line-mid); display: flex; align-items: center; justify-content: center; }
.prod__main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.prod__top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.prod__title { display: block; flex: 1; min-width: 0; color: var(--ink-primary); font-size: 13.5px; font-weight: 600; line-height: 1.45; unicode-bidi: isolate; text-align: right; overflow-wrap: anywhere; }
.prod__price { flex-shrink: 0; color: var(--ink-primary); font-size: 13px; font-weight: 600; white-space: nowrap; }
.prod__sub { color: var(--ink-secondary); font-size: 11.5px; line-height: 1.6; }
.prod__brand { unicode-bidi: isolate; }
.prod__ord { position: relative; align-self: flex-start; display: inline-flex; align-items: center; min-height: 32px; margin: 0; padding: 0; border: 0; background: transparent; color: var(--ink-primary); font-size: 12px; font-weight: 600; text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }
/* Its tap layer: 12 px up into the reference line (no control there), none down into the switch's own 44 px. */
.prod__ord::before { content: ''; position: absolute; inset: -12px 0 0; }
.prod__state { display: flex; align-items: center; flex-wrap: wrap; gap: 0 4px; }
.prod__hidden { flex-basis: 100%; color: var(--warning); font-size: 11.5px; font-weight: 600; line-height: 1.6; }
.prod__soon { flex-basis: 100%; color: var(--ink-secondary); font-size: 11.5px; font-weight: 600; line-height: 1.6; }
.prod__ask { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.prod__ask-q { color: var(--ink-primary); font-size: 12px; font-weight: 600; padding-inline-end: 2px; }
.prod__yes, .prod__no { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; height: 44px; margin: 0; padding: 0 8px; box-sizing: border-box; border-radius: var(--radius); background: transparent; color: var(--ink-primary); font-size: 12.5px; font-weight: 600; cursor: pointer; }
.prod__yes { border: 1px solid var(--structural-light); }
/* «لا» is tapped: the tapped controls' line (3:1 on the ground, ruling 14), not the app file's #4A5F8C. */
.prod__no { border: 1px solid var(--line-control); }
.prod__switch { display: inline-flex; align-items: center; gap: 6px; height: 44px; margin: 0; padding: 0 4px 0 2px; border: 0; background: transparent; white-space: nowrap; color: var(--ink-primary); font-size: 12.5px; font-weight: 600; cursor: pointer; }
.prod__track { display: flex; justify-content: flex-start; align-items: center; width: 40px; height: 24px; padding: 3px; box-sizing: border-box; border-radius: var(--radius-pill); background: var(--error); border: 1px solid var(--error); }
.prod__track--on { justify-content: flex-end; background: var(--success); border-color: var(--success); }
.prod__knob { width: 16px; height: 16px; border-radius: var(--radius-pill); background: var(--ink-primary); }
.prod__acts { margin-inline-start: auto; display: inline-flex; flex-wrap: nowrap; }
.prod__act { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin: 0; padding: 0; border: 0; background: transparent; cursor: pointer; }
.prod__del { display: flex; flex-direction: column; gap: 10px; margin-top: 6px; padding: 12px; border: 1px solid var(--error); border-radius: var(--radius); }
.prod__del-q { color: var(--ink-primary); font-size: 12.5px; font-weight: 600; line-height: 1.7; text-wrap: pretty; }
.prod__del-row { display: flex; gap: 8px; }
.prod__keep, .prod__go { flex: 1; display: flex; align-items: center; justify-content: center; height: 48px; margin: 0; padding: 0; border-radius: var(--radius); font-size: 13px; font-weight: 600; cursor: pointer; }
.prod__keep { border: 1px solid var(--structural-light); background: transparent; color: var(--ink-primary); }
.prod__go { border: 0; background: var(--error); color: var(--ground); }
.prod__none { padding: 16px 4px; color: var(--ink-primary); font-size: 13px; font-weight: 600; }
/* No products (P1e): the shelves full-bleed, the picture fading into the ground. */
.prod__empty { flex: 1; display: flex; flex-direction: column; margin: -12px -16px -20px; }
.prod__shelves { position: relative; flex-shrink: 0; height: 236px; overflow: hidden; }
.prod__shelves-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 30% 50%; display: block; }
.prod__shelves-fade { position: absolute; inset: 0; background: linear-gradient(to bottom, color-mix(in srgb, var(--ground) 10%, transparent) 0%, color-mix(in srgb, var(--ground) 55%, transparent) 45%, var(--ground) 100%); }
.prod__why { display: flex; flex-direction: column; gap: 10px; padding: 18px 16px 0; color: var(--ink-secondary); font-size: 13.5px; line-height: 1.65; }
.prod__flow { display: flex; flex-direction: column; }
.prod__part { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: var(--radius); background: var(--layer); border: 1px solid var(--line-light); }
/* «فيديو» in --ink-secondary, not the app file's tertiary ink: 3.94:1 on --selected fails the 4.5:1 (Q-471). */
.prod__part-video { flex: 0 0 40px; width: 40px; height: 64px; border-radius: 4px; background: var(--selected); border: 1px dashed var(--line-mid); box-sizing: border-box; color: var(--ink-secondary); font-size: 10.5px; display: flex; align-items: center; justify-content: center; }
.prod__part-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.prod__part-name { color: var(--ink-primary); font-size: 13.5px; font-weight: 600; }
.prod__part-sub { color: var(--ink-secondary); font-size: 12px; }
.prod__then { display: flex; align-items: stretch; position: relative; }
.prod__line { flex: 0 0 30px; position: relative; }
/* The connector's two strokes are elements, not pseudo-elements, so the layout check sees them (the cover guard's K6, step 45). */
.prod__line-v { position: absolute; right: 15px; top: 0; bottom: 0; width: 1px; background: var(--line-mid); }
.prod__line--last .prod__line-v { bottom: auto; height: calc(50% + 5px); }
.prod__line-h { position: absolute; right: 15px; left: 0; top: calc(50% + 5px); height: 1px; background: var(--line-mid); }
.prod__then-text { flex: 1; min-width: 0; margin-top: 10px; padding: 10px 12px; border: 1px solid var(--line-light); border-radius: var(--radius); color: var(--ink-primary); font-size: 13px; font-weight: 600; line-height: 1.5; text-wrap: pretty; }
.prod__first { margin-top: auto; display: flex; flex-direction: column; gap: 10px; padding: 24px 16px 20px; }
.prod__add-first { display: flex; align-items: center; justify-content: center; height: 52px; margin: 0; padding: 0; border: 0; border-radius: var(--radius); background: var(--action); color: var(--ground); font-size: 14px; font-weight: 600; cursor: pointer; }
:is(.prod__add-top, .prod__chip, .prod__media, .prod__ord, .prod__yes, .prod__no, .prod__switch, .prod__act, .prod__keep, .prod__go, .prod__add-first):focus-visible { outline: 2px solid var(--ink-primary); outline-offset: 2px; }

/* «أضِف منتجًا» / «تعديل المنتج» (S18b, step 47): the product form, P2 and its states, as the app
   file's prodForm view draws it (lines 1122–1161) with board 15b's weight block. */
.pf { display: flex; flex-direction: column; height: 100%; }
/* The app file sizes every box with its border inside (its *{box-sizing:border-box}): a 48 px field box is 48 px whole (the compare tool, step 47). */
.pf, .pf *, .pf__status, .pf__status * { box-sizing: border-box; }
.pf__head { flex-shrink: 0; padding: 10px 12px 10px; display: flex; align-items: center; gap: 6px; border-bottom: 1px solid var(--line-light); }
.pf__title { flex: 1; min-width: 0; margin: 0; color: var(--ink-primary); font-size: 17px; font-weight: 600; }
.pf__body { flex: 1; min-height: 0; overflow-y: auto; padding: 12px 16px 20px; display: flex; flex-direction: column; gap: 14px; }
.pf__tip { flex-shrink: 0; display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; border-radius: var(--radius); background: var(--layer); border: 1px solid var(--line-light); }
.pf__tip-title { color: var(--structural-light); font-size: 11px; font-weight: 600; }
.pf__tip-text { color: var(--ink-primary); font-size: 13px; line-height: 1.7; text-wrap: pretty; }
.pf__video { flex-shrink: 0; display: flex; flex-direction: column; gap: 10px; }
.pf__block { display: flex; flex-direction: column; gap: 2px; }
.pf__labelrow { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.pf__video-label { color: var(--ink-primary); font-size: 14px; font-weight: 600; }
.pf__req { color: var(--ink-secondary); font-size: 11px; font-weight: 600; }
.pf__video-ai { color: var(--structural-light); font-size: 12.5px; font-weight: 600; line-height: 1.7; text-wrap: pretty; }
.pf__video-proof { color: var(--ink-secondary); font-size: 12px; line-height: 1.7; text-wrap: pretty; }
.pf__video-length { color: var(--ink-primary); font-size: 12px; font-weight: 600; }
.pf__video-slot { display: flex; flex-direction: column; gap: 10px; }
.pf__video-slot:empty { display: none; }
.pf__alert { display: flex; align-items: center; gap: 8px; color: var(--ink-primary); font-size: 12.5px; font-weight: 600; line-height: 1.6; }
.pf__bar { flex: 0 0 12px; width: 12px; height: 3px; background: var(--error); }
.pf__steps { display: flex; flex-direction: column; gap: 6px; }
.pf__steps-title { color: var(--ink-secondary); font-size: 12px; font-weight: 600; }
.pf__step { display: flex; align-items: flex-start; gap: 10px; color: var(--ink-primary); font-size: 12.5px; line-height: 1.6; }
.pf__step-n { flex: 0 0 20px; width: 20px; height: 20px; border-radius: var(--radius-small); background: var(--line-light); color: var(--ink-primary); font-size: 11px; font-weight: 600; display: flex; align-items: center; justify-content: center; }
.pf__step-t { flex: 1; min-width: 0; text-wrap: pretty; }
.pf__shoot { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
/* The controls' borders the app file draws in #4A5F8C are --line-control (ruling 15, 4.85:1), as the list's chips. */
.pf__film, .pf__upload { display: flex; align-items: center; justify-content: center; height: 48px; margin: 0; padding: 0; border-radius: var(--radius); border: 1px solid var(--line-control); background: transparent; color: var(--ink-primary); font-family: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.pf__film { border-color: var(--structural-light); }
.pf__kept { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.pf__kept-text { display: flex; align-items: center; gap: 7px; color: var(--ink-primary); font-size: 12.5px; font-weight: 600; }
.pf__dot { flex: 0 0 9px; width: 9px; height: 9px; border-radius: var(--radius-pill); background: var(--success); }
.pf__kept-acts { display: inline-flex; align-items: center; }
.pf__relink { display: inline-flex; align-items: center; height: 44px; margin: 0; padding: 0 8px; border: 0; background: transparent; color: var(--ink-primary); font-family: inherit; font-size: 12.5px; font-weight: 600; text-decoration: underline; text-underline-offset: 4px; cursor: pointer; white-space: nowrap; }
.pf__del { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin: 0; padding: 0; border: 0; background: transparent; cursor: pointer; }
.pf__file { display: none; }
.pf__ai-any { flex-shrink: 0; color: var(--structural-light); font-size: 12.5px; font-weight: 600; line-height: 1.7; text-wrap: pretty; }
/* The fields' panel as drawn (its line on top, 14 px under it, 12 px between the fields), with no box
   of its own: a panel a few px taller than the scroll area but shorter than the screen reads as cut
   to the layout check (N183) whatever its scroll — the 6 kg product's P2e (Q-479). Its line and space
   are its first field's; the 14 px of the form between the fields, less 2, give their 12. */
.pf__fields { display: contents; }
.pf__fields > * { flex-shrink: 0; }
.pf__fields > :first-child { padding-top: 14px; border-top: 1px solid var(--line-light); }
.pf__fields > * + * { margin-top: -2px; }
.pf__field { display: flex; flex-direction: column; gap: 6px; }
.pf__label { color: var(--ink-secondary); font-size: 12px; font-weight: 600; text-wrap: pretty; }
.pf__note { color: var(--structural-light); font-size: 11.5px; font-weight: 600; }
.pf__note--unsure { color: var(--warning); }
.pf__box { display: flex; align-items: center; gap: 8px; height: 48px; padding: 0 12px; border-radius: var(--radius); border: 1px solid var(--line-control); background: var(--ground); }
.pf__box--ai { border-color: var(--structural-light); }
.pf__box--unsure { border-color: var(--warning); }
/* The input itself as the app file's: its own height (24 px at 15 px) and the browser's 1 × 2 px padding, centred in its 48 px box (the compare tool, step 47). */
.pf__input { flex: 1; min-width: 0; margin: 0; padding: 1px 2px; background: transparent; border: 0; outline: none; color: var(--ink-primary); font-size: 15px; font-weight: 600; font-family: inherit; }
.pf__input[dir="ltr"] { direction: ltr; unicode-bidi: isolate; text-align: left; }
.pf__input[inputmode="numeric"] { font-variant-numeric: tabular-nums; direction: ltr; unicode-bidi: isolate; text-align: right; }
.pf__input::placeholder { color: var(--ink-tertiary); opacity: 1; }
.pf__unit { color: var(--ink-secondary); font-size: 12.5px; }
.pf__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.pf__chip { display: inline-flex; align-items: center; height: 40px; margin: 0; padding: 0 12px; border-radius: var(--radius); border: 1px solid var(--line-control); background: transparent; color: var(--ink-primary); font-family: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.pf__chip--on { border-color: var(--structural-light); background: var(--structural-light); color: var(--ground); }
.pf__other-slot:empty, .pf__kg-slot:empty, .pf__sum-slot:empty, .pf__fail-slot:empty, .pf__miss-slot:empty { display: none; }
.pf__weight-note { color: var(--ink-tertiary); font-size: 11.5px; line-height: 1.5; text-wrap: pretty; }
.pf__weights { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 6px; }
.pf__weight { display: inline-flex; align-items: center; justify-content: center; height: 40px; margin: 0; padding: 0 12px; border-radius: var(--radius); border: 1px solid var(--line-control); background: transparent; color: var(--ink-primary); font-family: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.pf__weight--on { border-color: var(--structural-light); background: var(--structural-light); color: var(--ground); }
.pf__sum { display: flex; flex-direction: column; gap: 6px; padding-top: 10px; border-top: 1px solid var(--line-light); }
.pf__sum-row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.pf__sum-label { color: var(--ink-secondary); font-size: 12.5px; }
.pf__sum-val { color: var(--ink-primary); font-size: 13px; font-weight: 600; white-space: nowrap; flex-shrink: 0; }
.pf__sum-val--net { font-size: 16px; }
.pf__sum-note { color: var(--ink-secondary); font-size: 11.5px; line-height: 1.6; text-wrap: pretty; }
.pf__commits { flex-shrink: 0; display: flex; flex-direction: column; gap: 4px; padding-top: 14px; border-top: 1px solid var(--line-light); }
.pf__confirm { color: var(--ink-primary); font-size: 13px; font-weight: 600; }
.pf__points { display: flex; flex-direction: column; gap: 6px; padding: 2px 0 4px; }
.pf__point { display: flex; align-items: flex-start; gap: 8px; color: var(--ink-secondary); font-size: 12.5px; line-height: 1.6; text-wrap: pretty; }
.pf__point-dot { flex: 0 0 5px; width: 5px; height: 5px; margin-top: 8px; border-radius: var(--radius-pill); background: var(--ink-tertiary); }
.pf__point-text { flex: 1; min-width: 0; }
.pf__agree { display: flex; align-items: flex-start; gap: 10px; min-height: 44px; margin: 0; padding: 6px 0; border: 0; background: transparent; font-family: inherit; text-align: start; cursor: pointer; }
.pf__check { flex: 0 0 20px; width: 20px; height: 20px; margin-top: 1px; border-radius: var(--radius-small); border: 1px solid var(--structural-light); background: transparent; display: flex; align-items: center; justify-content: center; color: var(--ground); font-size: 13px; font-weight: 600; }
.pf__agree--on .pf__check { background: var(--structural-light); }
.pf__agree-text { color: var(--ink-primary); font-size: 12.5px; line-height: 1.7; text-wrap: pretty; }
.pf__fail { flex-shrink: 0; display: flex; flex-direction: column; gap: 6px; padding: 12px; border: 1px solid var(--line-light); border-radius: var(--radius); background: var(--layer); }
.pf__fail-title { display: flex; align-items: center; gap: 8px; color: var(--ink-primary); font-size: 13px; font-weight: 600; }
.pf__fail-sub { color: var(--ink-secondary); font-size: 12px; line-height: 1.7; text-wrap: pretty; }
.pf__miss { color: var(--warning); font-size: 12px; font-weight: 600; line-height: 1.6; text-wrap: pretty; }
.pf__cta { flex-shrink: 0; display: flex; align-items: center; justify-content: center; height: 52px; margin: 0; padding: 0; border: 0; border-radius: var(--radius); background: var(--action); color: var(--ground); font-family: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.pf__cta--off { background: var(--action-disabled); }
/* The reading (P2r): the app file's overlay, z 70 (under the toasts, N1033), its status box at the bottom with the sheets' rounding. */
.pf__scrim { z-index: 70; }
.pf__status { position: absolute; left: 0; right: 0; bottom: 0; z-index: 71; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 28px 16px 24px; border-radius: var(--radius-sheet) var(--radius-sheet) 0 0; background: var(--layer); }
.pf__spinner { display: block; width: 36px; height: 36px; margin-bottom: 6px; border-radius: var(--radius-pill); border: 3px solid var(--line-light); border-top-color: var(--structural-light); animation: pf-spin .9s linear infinite; }
@keyframes pf-spin { to { transform: rotate(360deg); } }
.pf__status-text { color: var(--ink-primary); font-size: 17px; font-weight: 300; }
:is(.pf__film, .pf__upload, .pf__relink, .pf__del, .pf__chip, .pf__weight, .pf__agree, .pf__cta):focus-visible { outline: 2px solid var(--ink-primary); outline-offset: 2px; }
.pf__box:focus-within { outline: 2px solid var(--ink-primary); outline-offset: 2px; }

/* «الأرباح» (S29, step 48; board 08's D2 states, under the orders frame): the three tiles, the note,
   the orders, or «لا أرباح بعد». Sizes and colours from the board's inline styles; the tile tapped
   (D2w) has ruling 15's control border in place of the board's #2C4070. */
.earn__body { display: flex; flex-direction: column; gap: 10px; padding: 12px 16px 20px; }
.earn__tiles { flex-shrink: 0; display: flex; gap: 6px; }
.earn__tile { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 3px; margin: 0; padding: 10px; border-radius: 8px; background: var(--layer); border: 1px solid var(--line-light); color: var(--ink-primary); font-family: inherit; text-align: start; }
.earn__tile--tap { border-color: var(--line-control); cursor: pointer; }
.earn__tile--light { background: var(--structural-light); border: 0; color: var(--ground); }
.earn__tile-label { color: var(--ink-secondary); font-size: 11.5px; white-space: nowrap; }
.earn__tile-sum { display: flex; align-items: baseline; gap: 3px; white-space: nowrap; }
.earn__tile-n { color: var(--ink-primary); font-size: 16px; font-weight: 600; font-variant-numeric: tabular-nums; }
.earn__tile-dzd { color: var(--ink-secondary); font-size: 10.5px; }
.earn__tile--light :is(.earn__tile-label, .earn__tile-n, .earn__tile-dzd) { color: var(--ground); }
.earn__withdraw { margin-top: 6px; display: flex; align-items: center; justify-content: center; height: 32px; border-radius: 4px; background: var(--structural-light); color: var(--ground); font-size: 13px; font-weight: 600; }
.earn__details { margin-top: 6px; display: flex; align-items: center; justify-content: center; height: 32px; border-radius: 4px; border: 1px solid var(--ground); color: var(--ground); font-size: 13px; font-weight: 600; }
.earn__note { flex-shrink: 0; display: flex; align-items: baseline; gap: 7px; margin: -2px 0 0; color: var(--ink-secondary); font-size: 12px; line-height: 1.6; text-wrap: pretty; }
.earn__dot { flex: 0 0 4px; width: 4px; height: 4px; border-radius: var(--radius-pill); background: var(--ink-tertiary); transform: translateY(-3px); }
.earn__note-head { color: var(--ink-primary); font-weight: 600; }
.earn__link { display: inline; margin: -12px 0; padding: 12px 0; border: 0; background: transparent; color: var(--ink-primary); font-family: inherit; font-size: inherit; font-weight: 600; line-height: inherit; text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }
.earn__orders-title { margin: 0; padding-top: 8px; color: var(--ink-primary); font-size: 13.5px; font-weight: 600; }
.earn__orders { flex-shrink: 0; display: flex; flex-direction: column; margin-top: -4px; }
.earn__order-row { border-top: 1px solid var(--line-light); }
.earn__order { display: flex; flex-direction: column; gap: 3px; width: 100%; margin: 0; padding: 10px 0; border: 0; background: transparent; color: inherit; font-family: inherit; text-align: start; cursor: pointer; }
.earn__order-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.earn__part { min-width: 0; color: var(--ink-primary); font-size: 14px; font-weight: 600; text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.earn__sum { flex-shrink: 0; color: var(--ink-primary); font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.earn__order-sub { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.earn__car { min-width: 0; color: var(--ink-secondary); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.earn__no, .earn__day { font-variant-numeric: tabular-nums; }
.earn__state { display: flex; align-items: center; gap: 6px; color: var(--ink-secondary); font-size: 11.5px; white-space: nowrap; }
.earn__ring { flex: 0 0 8px; width: 8px; height: 8px; box-sizing: border-box; border-radius: var(--radius-pill); border: 2px solid var(--line-strong); }
.earn__disc { flex: 0 0 8px; width: 8px; height: 8px; border-radius: var(--radius-pill); background: var(--ink-primary); }
.earn__none { flex-shrink: 0; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 40px 12px; text-align: center; }
.earn__none-title { margin: 0; color: var(--ink-primary); font-size: 15px; font-weight: 600; }
.earn__none-text { margin: 0; color: var(--ink-secondary); font-size: 12.5px; line-height: 1.6; text-wrap: pretty; }
:is(.earn__tile--tap, .earn__link, .earn__order):focus-visible { outline: 2px solid var(--ink-primary); outline-offset: 2px; }

/* «المهامّ» (S40, step 54; board 16's T1 · T1e drawn as board 09's C8t by ruling 24 of N548): the
   tasks' full cards, sizes and colours from C8t's inline styles; the border of what is tapped is
   ruling 15's (--line-control), as programmer 2's own B7 controls. T1e: board 16's. */
.task__list { display: flex; flex-direction: column; gap: 10px; padding: 12px 16px 20px; }
.task__item { flex-shrink: 0; }
.task__card { display: flex; flex-direction: column; padding: 4px 14px 6px; border-radius: var(--radius); background: var(--layer); }
.task__head { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; min-height: 52px; margin: 0; padding: 0; border: 0; background: transparent; color: inherit; font-family: inherit; text-align: right; cursor: pointer; }
.task__titles { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.task__part { color: var(--ink-primary); font-size: 15px; font-weight: 600; white-space: nowrap; text-align: right; }
.task__car { color: var(--ink-secondary); font-size: 12px; white-space: nowrap; text-align: right; }
.task__ref { flex-shrink: 0; display: inline-flex; align-items: center; gap: 6px; }
.task__id { color: var(--ink-secondary); font-size: 11.5px; font-variant-numeric: tabular-nums; }
.task__chev { color: var(--ink-tertiary); font-size: 18px; line-height: 1; }
.task__row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 2px 0; }
.task__status { display: flex; align-items: center; gap: 7px; margin: 0; padding-bottom: 2px; color: var(--ink-primary); font-size: 12.5px; font-weight: 600; }
.task__disc { flex: 0 0 9px; width: 9px; height: 9px; border-radius: var(--radius-pill); background: var(--success); }
.task__dash { flex: 0 0 12px; width: 12px; height: 3px; background: var(--error); }
.task__asked { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.task__asked .task__status { padding-bottom: 0; }
.task__said { display: flex; flex-direction: column; gap: 2px; margin: 0; padding-inline-start: 19px; }
.task__said-k { color: var(--ink-secondary); font-size: 11.5px; }
.task__said-t { color: var(--ink-primary); font-size: 12.5px; line-height: 1.6; text-wrap: pretty; }
.task__video { position: relative; flex: 0 0 36px; width: 36px; height: 64px; box-sizing: border-box; margin: 0; padding: 0; border-radius: var(--radius-small); border: 1px solid var(--line-control); background: repeating-linear-gradient(135deg, var(--selected) 0px, var(--selected) 6px, var(--ground) 6px, var(--ground) 12px); display: flex; align-items: center; justify-content: center; color: var(--ink-primary); cursor: pointer; }
.task__video-len { position: absolute; bottom: 2px; left: 3px; padding: 0 3px; border-radius: var(--radius-small); background: var(--scrim); color: var(--ink-primary); font-size: 10.5px; line-height: 1.4; font-variant-numeric: tabular-nums; }
.task__body { display: flex; flex-direction: column; padding-top: 10px; }
.task__text { margin: 8px 0 0; color: var(--ink-secondary); font-size: 12.5px; line-height: 1.6; text-wrap: pretty; }
.task__facts { display: flex; flex-direction: column; margin: 8px 0 10px; }
.task__fact { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 8px; align-items: baseline; min-height: 28px; }
.task__fact-k { color: var(--ink-secondary); font-size: 12px; }
.task__fact-v { margin: 0; color: var(--ink-primary); font-size: 13px; font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
.task__offer { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.task__who { min-width: 0; display: flex; flex-direction: column; gap: 2px; padding-top: 2px; }
.task__brand { color: var(--ink-primary); font-size: 14px; font-weight: 600; text-align: right; }
.task__country { font-weight: 400; }
.task__note { margin: 0; color: var(--ink-secondary); font-size: 12px; line-height: 1.5; text-wrap: pretty; }
.task__sums { flex-shrink: 0; display: flex; flex-direction: column; align-items: flex-end; gap: 1px; }
.task__sum { color: var(--ink-primary); font-size: 16px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.task__net { color: var(--ink-secondary); font-size: 11.5px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.task__held { margin: 0; padding-top: 8px; color: var(--ink-secondary); font-size: 12px; line-height: 1.6; }
.task__steps { display: flex; flex-direction: column; margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--line-light); }
.task__steps-title { margin: 0; padding-bottom: 4px; color: var(--ink-primary); font-size: 13px; font-weight: 600; }
.task__step-list { margin: 0; padding: 0; list-style: none; }
.task__step { display: flex; align-items: flex-start; gap: 10px; padding: 7px 0; border-top: 1px solid var(--line-light); }
.task__step-n { flex: 0 0 20px; width: 20px; height: 20px; border-radius: var(--radius-pill); background: var(--structural-light); color: var(--ground); font-size: 11px; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; }
.task__step-t { min-width: 0; color: var(--ink-primary); font-size: 12.5px; line-height: 1.6; text-wrap: pretty; }
.task__step-b { font-weight: 600; }
.task__warn { display: flex; align-items: baseline; gap: 8px; margin: 0; padding: 8px 0 0; border-top: 1px solid var(--line-light); color: var(--ink-secondary); font-size: 12px; line-height: 1.6; }
.task__warn-dash { flex: 0 0 12px; width: 12px; height: 3px; background: var(--warning); transform: translateY(-3px); }
.task__go { position: relative; display: flex; align-items: center; justify-content: center; height: 48px; margin: 12px 0 4px; padding: 0; border: 0; border-radius: var(--radius); background: var(--action); color: var(--ground); font-family: inherit; font-size: 14px; font-weight: 600; white-space: nowrap; cursor: pointer; }
.task__go--film, .task__go--outline { margin-top: 10px; }
.task__go--outline { border: 1px solid var(--structural-light); background: transparent; color: var(--ink-primary); }
.task__cant { position: relative; display: flex; align-items: center; justify-content: center; min-height: 44px; margin: 0; padding: 0; border: 0; background: transparent; color: var(--ink-primary); font-family: inherit; font-size: 13px; font-weight: 600; text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }
.task__none { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 64px 16px; text-align: center; }
.task__none-title { margin: 0; color: var(--ink-primary); font-size: 15px; font-weight: 300; line-height: 1.5; white-space: nowrap; }
.task__head--plain { cursor: default; }
/* T1e's link (the owner's ruling Q-541, N1258): as the app's other text links on a dark ground (.earn__link). */
.task__none-link { position: relative; min-height: 44px; margin: 0; padding: 0; border: 0; background: transparent; color: var(--ink-primary); font-family: inherit; font-size: 13px; font-weight: 600; text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }
:is(.task__head, .task__video, .task__go, .task__cant, .task__none-link):focus-visible { outline: 2px solid var(--ink-primary); outline-offset: 2px; }
/* S36 (step 55): C8tc's badge, video and tick; C8ts's line; C9x's card (board 09's inline styles). */
.task__dialog-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.task__dialog-head .mt-dialog__title { margin: 0; }
.task__badge { flex-shrink: 0; margin: 0; padding: 3px 8px; border-radius: var(--radius-small); border: 1px solid var(--line-light); color: var(--ink-primary); font-size: 12px; font-variant-numeric: tabular-nums; }
.task__poster { position: relative; align-self: stretch; height: 440px; margin: 0; padding: 0; border: 0; border-radius: var(--radius); overflow: hidden; background: repeating-linear-gradient(135deg, var(--selected) 0px, var(--selected) 8px, var(--ground) 8px, var(--ground) 16px); display: flex; align-items: center; justify-content: center; color: var(--ink-primary); font-family: inherit; cursor: pointer; }
.task__poster-play { width: 52px; height: 52px; border-radius: var(--radius-pill); background: var(--scrim); display: flex; align-items: center; justify-content: center; }
.task__poster-top { position: absolute; left: 0; right: 0; top: 0; padding: 8px 10px; background: var(--scrim); display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.task__poster-t { min-width: 0; color: var(--ink-primary); font-size: 13px; font-weight: 600; text-align: right; }
.task__poster-len { flex-shrink: 0; padding: 1px 6px; border-radius: var(--radius-small); background: var(--scrim); color: var(--ink-primary); font-size: 11.5px; font-variant-numeric: tabular-nums; }
.task__agree-row { padding-top: 4px; border-top: 1px solid var(--line-light); }
.task__agree { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 52px; margin: 0; padding: 0; border: 0; background: transparent; font-family: inherit; text-align: start; cursor: pointer; }
.task__check { flex: 0 0 22px; width: 22px; height: 22px; box-sizing: border-box; border-radius: var(--radius-small); border: 2px solid var(--line-control); display: flex; align-items: center; justify-content: center; color: var(--ground); }
.task__agree--on .task__check { background: var(--structural-light); border-color: var(--structural-light); }
.task__agree-t { color: var(--ink-primary); font-size: 13px; font-weight: 600; line-height: 1.5; }
.task__stock-done { color: var(--ink-secondary); font-size: 12.5px; }
/* C8ts as board 09 draws it (A-022, ruled in N1382; N1383), exactly as board 10's E3s (programmer 3's
   .oauto-stock): no handle, 20 16 28, a top line, 12 px between «تمّ تأكيد تسليم الطرد · MT-####»
   (12.5 px), the question (17 px, 600, 1.5) and the two buttons (48 px, outlined #DCE4F5) — 166 px. */
.task__stock { gap: 12px; padding: 20px 16px 28px; border-top: 1px solid var(--line-light); }
.task__stock .mt-sheet__handle { display: none; }
.task__stock .mt-sheet__text { font-size: 12.5px; line-height: normal; }
.task__stock .mt-sheet__title { font-size: 17px; font-weight: 600; line-height: 1.5; }
.task__stock .mt-sheet__actions { margin-top: 0; }
.task__gone { margin: 0; color: var(--ink-secondary); font-size: 12.5px; line-height: 1.6; text-wrap: pretty; }
.task__offer--off .task__brand, .task__offer--off .task__sum { color: var(--ink-secondary); }
.task__gap { height: 10px; }
:is(.task__poster, .task__agree):focus-visible { outline: 2px solid var(--ink-primary); outline-offset: 2px; }

/* S30, S31, S33 — the withdrawals (programmer 3, Director texts N1309, N1311: additions at the end of
   this sheet; board 08's inline styles, ruling 15's line on what is tapped). */
.wd-sheet { gap: 8px; padding: 10px 16px 24px; }
.wd-sheet .mt-sheet__title { font-weight: 600; line-height: normal; }
.wd-details .mt-sheet__title { line-height: normal; }
.wd-sheet .mt-btn--action { font-size: 14.5px; }
/* A-017 (N1322, N1353): the form's rows one under the other with no gap, as board 08's D2wt and D2wm —
   two classes, so `.wd__sheet`'s gap below does not win; the handle 10 px above the title while a way is
   chosen (D2w: its 2 px margin and the sheet's 8 px gap), 6 px once the form shows (D2wt, D2wm). */
.wd__sheet.wd__sheet--form { gap: 0; }
.wd__sheet--form > .mt-btn { margin-top: 8px; }
.wd__sheet:not(.wd__sheet--form) > .mt-btn { margin-top: 6px; }
/* The button's amount 4 px from «·», as drawn (the space before it collapses in the flex button). */
.wd__go-n { margin-right: 4px; font-variant-numeric: tabular-nums; }
.wd-sheet .mt-sheet__handle, .wd-details .mt-sheet__handle { width: 42px; }
.wd-sheet .mt-sheet__handle { margin-bottom: 2px; }
.wd-sheet:has(.wd__sheet--form) .mt-sheet__handle { margin-bottom: -2px; }
.wd-details { gap: 6px; padding: 10px 18px 22px; }
.wd-details .mt-sheet__titlerow { min-height: 44px; }
.wd-details .mt-close { margin: 0; }
.wd__sheet { display: flex; flex-direction: column; gap: 8px; }
.wd__avail { margin: 0; color: var(--ink-secondary); font-size: 12.5px; }
.wd__avail-n { color: var(--ink-primary); font-weight: 600; }
.wd__ways { display: flex; flex-direction: column; gap: 8px; }
.wd__ways-title { padding-top: 6px; color: var(--ink-secondary); font-size: 12px; font-weight: 600; }
.wd__way { display: flex; align-items: flex-start; gap: 10px; min-height: 52px; box-sizing: border-box; margin: 0; padding: 10px 12px; border-radius: 8px; border: 1px solid var(--line-control); background: transparent; color: var(--ink-primary); font-family: inherit; text-align: start; cursor: pointer; }
.wd__ring { flex: 0 0 18px; width: 18px; height: 18px; box-sizing: border-box; border-radius: var(--radius-pill); border: 2px solid var(--line-strong); }
.wd__way .wd__ring { margin-top: 1px; }
.wd__way-text { display: flex; flex-direction: column; gap: 2px; }
.wd__way-name { font-size: 13.5px; font-weight: 600; }
.wd__way-sub { color: var(--ink-secondary); font-size: 12px; }
.wd__spend { align-self: flex-start; min-height: 44px; margin: 0; padding: 0; border: 0; background: transparent; color: var(--ink-primary); font-family: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.wd__spend-or { color: var(--ink-secondary); font-weight: 400; }
.wd__spend-link { text-decoration: underline; text-underline-offset: 4px; }
.wd__chosen { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 48px; border-top: 1px solid var(--line-light); }
.wd__chosen-text { display: flex; flex-direction: column; gap: 1px; }
.wd__chosen-name { color: var(--ink-primary); font-size: 14px; font-weight: 600; }
.wd__change { display: flex; align-items: center; gap: 4px; min-height: 44px; margin: 0; padding: 0; border: 0; background: transparent; color: var(--ink-primary); font-family: inherit; font-size: 13px; font-weight: 600; text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }
.wd__field { display: flex; flex-direction: column; gap: 6px; padding: 12px 0; border-top: 1px solid var(--line-light); }
.wd__label { color: var(--ink-secondary); font-size: 12px; font-weight: 600; }
.wd__box { display: flex; align-items: center; gap: 8px; height: 44px; box-sizing: border-box; padding: 0 12px; border-radius: 8px; border: 1px solid var(--line-control); }
.wd__input { flex: 1; min-width: 0; height: 30px; margin: 0; padding: 0; border: 0; border-bottom: 2px solid transparent; border-radius: 0; background: transparent; color: var(--ink-primary); font-family: inherit; font-size: 14.5px; }
.wd__input:focus { outline: none; border-bottom-color: var(--structural-light); }
.wd__box:focus-within { border-color: var(--structural-light); }
.wd__input--n { font-variant-numeric: tabular-nums; text-align: right; }
.wd__unit { color: var(--ink-secondary); font-size: 13px; }
.wd__hint { color: var(--ink-secondary); font-size: 11.5px; line-height: 1.5; }
.wd__keep-row { padding: 4px 0; border-top: 1px solid var(--line-light); }
.wd__keep { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; margin: 0; padding: 0; border: 0; background: transparent; color: var(--ink-primary); font-family: inherit; text-align: start; cursor: pointer; }
.wd__tick { flex: 0 0 20px; width: 20px; height: 20px; box-sizing: border-box; border-radius: 4px; border: 2px solid var(--line-strong); }
.wd__keep[aria-checked='true'] .wd__tick { border-color: var(--structural-light); background: var(--structural-light); }
.wd__keep-text { font-size: 12.5px; }
.wd__merge { display: flex; flex-direction: column; gap: 4px; margin: 4px 0; padding: 12px; border-radius: 8px; border: 1px solid var(--structural-light); }
.wd__merge-title { color: var(--ink-primary); font-size: 13px; font-weight: 600; }
.wd__merge-sum { color: var(--ink-secondary); font-size: 12.5px; font-weight: 400; font-variant-numeric: tabular-nums; }
.wd__details-head { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 1px; }
.wd__merge-dzd { color: var(--ink-secondary); font-size: 12.5px; font-weight: 400; }
.wd__merge-to { color: var(--ink-secondary); font-size: 12px; }
.wd__line { flex-shrink: 0; display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; border-radius: 8px; background: var(--layer); }
.wd__line--done { border: 1px solid var(--structural-light); }
.wd__line-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.wd__sum { display: flex; align-items: baseline; gap: 3px; white-space: nowrap; }
.wd__sum-n { color: var(--ink-primary); font-size: 18px; font-weight: 600; font-variant-numeric: tabular-nums; }
.wd__sum-dzd { color: var(--ink-secondary); font-size: 11.5px; }
.wd__line-day { color: var(--ink-secondary); font-size: 12px; white-space: nowrap; }
.wd__status { display: flex; align-items: center; gap: 8px; margin: 0; color: var(--ink-primary); font-size: 12.5px; font-weight: 600; }
.wd__ring--small { flex: 0 0 9px; width: 9px; height: 9px; border: 2px solid var(--ink-primary); }
.wd__disc { flex: 0 0 9px; width: 9px; height: 9px; border-radius: var(--radius-pill); background: var(--success); }
.wd__dash { flex: 0 0 12px; width: 12px; height: 3px; background: var(--error); }
.wd__textbtn { align-self: flex-start; min-height: 44px; margin: -8px 0 -10px; padding: 0; border: 0; background: transparent; color: var(--ink-primary); font-family: inherit; font-size: 13px; font-weight: 600; text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }
.wd__q { margin: 0; color: var(--ink-secondary); font-size: 12.5px; }
.wd__said { margin: 0; color: var(--ink-secondary); font-size: 12px; line-height: 1.6; }
.wd__ask-acts { display: flex; gap: 8px; }
.wd__ask-acts > .mt-btn { flex: 1 1 0%; height: 44px; min-height: 44px; }
.wd__ask { display: flex; flex-direction: column; gap: 8px; padding-top: 8px; border-top: 1px solid var(--line-light); }
.wd__ask-text { margin: 0; color: var(--ink-primary); font-size: 12.5px; line-height: 1.6; }
.wd__ask-slot:empty { display: none; }
.wd__page { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; padding: 16px 16px 20px; }
.wd__total { flex-shrink: 0; display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 12px 14px; border-radius: 8px; background: var(--structural-light); color: var(--ground); }
.wd__total-label { font-size: 12.5px; }
.wd__total-sum { display: flex; align-items: baseline; gap: 3px; }
.wd__total-n { font-size: 18px; font-weight: 600; font-variant-numeric: tabular-nums; }
.wd__total-dzd { font-size: 11.5px; }
.wd__month { margin: 4px 0 4px; color: var(--ink-secondary); font-size: 12px; font-weight: 600; }
.wd__past { flex-shrink: 0; display: flex; align-items: center; gap: 10px; width: 100%; margin: 0; padding: 12px 14px; border: 0; border-radius: 8px; background: var(--layer); color: inherit; font-family: inherit; text-align: start; cursor: pointer; }
.wd__past-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.wd__chev { color: var(--ink-tertiary); font-size: 18px; }
.wd__none { margin: 0; padding: 2px 0 0; color: var(--ink-secondary); font-size: 13px; text-align: center; }
/* D2hd's rows as board 08 draws them (A-017): the key in an 84 px column, the value beside it. */
.wd__row { display: grid; grid-template-columns: 84px minmax(0, 1fr); align-items: baseline; gap: 8px; padding: 9px 0; border-top: 1px solid var(--line-light); }
.wd__row-k { color: var(--ink-secondary); font-size: 12px; }
.wd__row-v { color: var(--ink-primary); font-size: 13px; font-weight: 600; }
.wd__row-state { display: flex; align-items: center; gap: 7px; }
.wd__details-day { color: var(--ink-secondary); font-size: 12px; }
:is(.wd__way, .wd__spend, .wd__change, .wd__keep, .wd__textbtn, .wd__past):focus-visible { outline: 2px solid var(--ink-primary); outline-offset: 2px; }

/* S32 — the withdrawal in cash, and D2p2 (programmer 3, auto-06, Director text N1362; board 08's inline
   styles, ruling 15's line on what is tapped). D2wc: the shop, «من يستلم». */
.wd__shop { color: var(--ink-primary); font-size: 13.5px; line-height: 1.6; }
.wd__field--who { gap: 8px; }
.wd__name { display: flex; flex-direction: column; gap: 8px; }
.wd__label--name { padding-top: 4px; }
.wd__whos { display: flex; gap: 8px; }
.wd__who { flex: 1 1 0%; display: flex; align-items: center; justify-content: center; height: 44px; box-sizing: border-box; margin: 0; padding: 0; border-radius: 8px; border: 1px solid var(--line-control); background: transparent; color: var(--ink-primary); font-family: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; }
.wd__who[aria-checked='true'] { border: 0; background: var(--structural-light); color: var(--ground); }
/* D2pc: «اعرض رمز الاستلام» and «ألغِ طلب السحب» side by side. */
.wd__acts { display: flex; align-items: center; gap: 20px; margin: -8px 0 -10px; }
.wd__acts > .wd__textbtn { margin: 0; }
/* D2pq: «أكّد الاستلام», a switch; its track drawn #4A5F8C off, green on. */
.wd__switch { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 48px; box-sizing: border-box; margin: 0; padding: 0 12px; border-radius: 8px; border: 1px solid var(--line-control); background: transparent; color: var(--ink-primary); font-family: inherit; font-size: 13.5px; font-weight: 600; text-align: start; cursor: pointer; }
.wd__track { position: relative; flex: 0 0 44px; width: 44px; height: 26px; border-radius: var(--radius-pill); background: var(--line-mid); }
.wd__knob { position: absolute; top: 3px; inset-inline-start: 3px; width: 20px; height: 20px; border-radius: var(--radius-pill); background: var(--ink-primary); }
.wd__switch[aria-checked='true'] .wd__track { background: var(--success); }
.wd__switch[aria-checked='true'] .wd__knob { inset-inline-start: auto; inset-inline-end: 3px; }
/* D2pr: «رمز الاستلام». */
.wd-code { gap: 10px; padding: 10px 16px 24px; }
.wd-code .mt-sheet__title { font-weight: 600; line-height: normal; }
.wd-code .mt-sheet__handle { width: 42px; }
/* The QR inline on a line of the sheet's 16 px, as board 08 draws its svg: the line's descent under it (231 px in all). */
.wd__qr { align-self: center; padding: 14px; border-radius: 8px; background: var(--white); }
/* S41 (N1520): while the QR waits, programmer 1's box in its place on the sheet's own ground (its ink is the
   sheet's), in the tile's size so nothing moves when the picture comes. */
.wd__qr--wait { box-sizing: border-box; display: flex; align-items: center; justify-content: center; width: 224px; height: 231px; padding: 0; background: transparent; }
.wd__qr--wait .mt-wait { padding: 0; }
.wd__code { align-self: center; color: var(--ink-primary); font-size: 30px; font-weight: 600; letter-spacing: .3em; font-variant-numeric: tabular-nums; padding-left: .3em; }
.wd__crows { display: flex; flex-direction: column; }
.wd__crow { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 9px 0; border-top: 1px solid var(--line-light); }
.wd__crow-k { color: var(--ink-secondary); font-size: 12.5px; }
.wd__crow-v { color: var(--ink-primary); font-size: 13.5px; font-weight: 600; text-align: left; font-variant-numeric: tabular-nums; }
.wd__open { margin: 0; color: var(--ink-secondary); font-size: 12px; line-height: 1.6; }
.wd__code-acts { display: flex; gap: 8px; }
.wd__code-acts > .mt-btn { flex: 1 1 0%; font-size: 14px; }
/* D2p2: «اسحب» off (a grey outline, the tile no longer tapped) and the note under the tiles. */
.wd__withdraw-off { box-sizing: border-box; border: 1px solid var(--line-mid); background: transparent; color: var(--ink-tertiary); }
.wd__two { flex-shrink: 0; margin: -2px 0 0; color: var(--ink-secondary); font-size: 12px; line-height: 1.6; }
:is(.wd__who, .wd__switch):focus-visible { outline: 2px solid var(--ink-primary); outline-offset: 2px; }