/* Supplier console styles (Director N414, N418, N419, N423, N424, N426, N428, N429,
   N430, N431, N432). The approved prototype is the visual reference (N418): every size, colour
   and spacing below is copied from its inline styles, with line numbers noted.
   Designed at 1440 wide; it reflows down to 760 px, and below 760 px the phone
   rules at the end apply (13/10 handoff, N425, N428 — they replace the single
   N419 message). No blur or gradients, and no shadows but two: the light shadow
   of the M1 table card and the shadow of M1's price popover, copied from the
   prototype (N423: the prototype wins on look). Gold #D4B26A is forbidden here. Text grey on white is #6F6F6F, never
   #8C8C8C or #8D8D8D (N419 ruling 2). */

:root {
  --navy: #0D2042;
  --navy-hover: #16294D;
  --navy-line: #6E80A6;
  --on-navy: #C6C6C6;
  --orange: #FF8A1F;
  --white: #FFFFFF;
  --ink: #161616;
  --ink-2: #525252;
  --text-3: #6F6F6F; /* tertiary text grey on white, N419 ruling 2 */
  --gray-1: #F4F4F4;
  --line: #E0E0E0;
  --line-strong: #C6C6C6;
  --line-control: #8D8D8D;
  /* The focus ring only (Director ruling N452); buttons keep the orange above. */
  --focus: #D06300;
}

html,
body {
  margin: 0;
  height: 100%;
  background: var(--white);
  color: var(--ink);
  font-family: 'IBM Plex Sans Arabic', system-ui, sans-serif;
}

.app {
  direction: rtl;
  height: 100vh;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  background: var(--white);
  overflow: hidden;
}

/* Keyboard focus is visible; nothing changes for the mouse (N419 ruling 3). The
   ring is the prototype's ring in a darker orange, #D06300 (Director ruling N452;
   WCAG 1.4.11): #FF8A1F is 2.36:1 on white; #D06300 is the lightest orange of the
   same hue that reaches 3:1 on every ground it is drawn on — 3.84 on white, 3.49
   on #F4F4F4, 3.33 on #EBEFF7, 3.01 on the pressed unit's #DCE4F5, 4.20 on navy
   #0D2042, 3.73 on #16294F. tests/journeys/14-focus-ring.spec.js measures every
   control on its ground. */
:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

/* ── Top bar (prototype lines 22–56) ─────────────────────────────────────── */

.topbar {
  height: 48px;
  flex: 0 0 48px;
  background: var(--navy);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
}

.topbar-start {
  display: flex;
  align-items: center;
  min-width: 0;
  overflow: hidden;
  flex: 1 1 auto;
}

.logo {
  display: block;
  height: 22px;
  width: auto;
  flex: 0 0 auto;
  margin-inline-end: 16px;
}

.tabs {
  display: flex;
  align-items: center;
  min-width: 0;
  flex: 1 1 auto;
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
}

.tabs::-webkit-scrollbar {
  display: none;
}

.tab {
  position: relative;
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  height: 48px;
  padding: 0 16px;
  border: 0;
  background: none;
  font: inherit;
  font-size: 13px;
  font-weight: 400;
  color: var(--on-navy);
  cursor: pointer;
  white-space: nowrap;
}

.tab:hover {
  background: var(--navy-hover);
  color: var(--white);
}

/* An invoice due or being verified (lines 34–35; N857): an amber ring after «متجري». */
.tab-due {
  box-sizing: border-box;
  width: 7px;
  height: 7px;
  margin-inline-start: 6px;
  border: 1.5px solid #F1C21B;
  border-radius: 9999px;
}

.tab[aria-current='page'] {
  color: var(--white);
}

.tab[aria-current='page']:hover {
  background: none;
}

.tab[aria-current='page']::after {
  content: '';
  position: absolute;
  inset-inline-start: 0;
  bottom: 0;
  width: 100%;
  height: 3px;
  background: var(--orange);
}

/* The store tab: its long label from 900 px up, «متجري» below (prototype m9Label). */
.tab-narrow {
  display: none;
}

/* Below 900 px: «max-width: 899.98px» keeps 900 out, as before. Safari reads the
   range form only from 16.4; the floor is 15.5 (N495 E, N496 item 1). */
@media (max-width: 899.98px) {
  .tab-wide {
    display: none;
  }

  .tab-narrow {
    display: inline;
  }
}

.tab:focus-visible {
  outline-color: var(--white);
  outline-offset: -2px;
}

.topbar-end {
  display: flex;
  align-items: center;
  gap: 14px;
  flex: 0 0 auto;
  padding-inline-start: 12px;
}

/* The whole 48 px bar height is the tap area (13/10 handoff); nothing moves. */
.help {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  height: 48px;
  font-size: 13px;
  font-weight: 400;
  color: var(--on-navy);
  white-space: nowrap;
}

/* Help opens M7 (step 23): a real button with the link's look (the map's F2); white under the
   mouse, as the prototype's (line 46). */
button.help {
  padding: 0;
  border: 0;
  background: none;
  font-family: inherit;
  cursor: pointer;
}

button.help:hover {
  color: var(--white);
}

.avatar {
  flex: 0 0 30px;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: var(--navy-hover);
  border: 1px solid var(--navy-line);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 600;
  color: var(--white);
}

/* The letters are a button to his account, M6 (step 22): the same 30 px box as before. */
button.avatar {
  box-sizing: content-box;
  padding: 0;
  font-family: inherit;
  cursor: pointer;
}

button.avatar:hover {
  border-color: var(--white);
}

.screen {
  flex: 1;
  min-height: 0;
  overflow: auto;
}

/* ── M0 الدخول (prototype lines 58–87) ───────────────────────────────────── */

.m0 {
  height: 100%;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  background: var(--white);
  overflow: hidden;
}

.m0-start {
  background: var(--navy);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 28px;
  padding: 32px 40px;
  min-width: 0;
  min-height: 0;
  overflow-y: auto;
}

.m0-logo {
  display: block;
  height: 44px;
  width: auto;
  align-self: flex-start;
}

.m0-eyebrow {
  font-size: 16px;
  font-weight: 600;
  color: var(--orange);
  line-height: 1.6;
  max-width: 20em;
}

.m0-eyebrow-tail {
  color: var(--on-navy);
  font-weight: 400;
}

.m0-headline {
  font-size: 28px;
  font-weight: 300;
  color: var(--white);
  line-height: 1.3;
  margin-top: 10px;
  max-width: 20em;
  text-wrap: balance;
}

.m0-body {
  font-size: 16px;
  font-weight: 400;
  color: var(--on-navy);
  line-height: 1.8;
  margin-top: 16px;
  max-width: 20em;
  text-wrap: pretty;
}

.m0-end {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 32px;
  overflow-y: auto;
  min-width: 0;
}

.m0-box {
  width: 360px;
  max-width: 100%;
}

.m0-title {
  margin: 0;
  font-size: 28px;
  font-weight: 300;
  color: var(--ink);
  line-height: 1.3;
  text-wrap: balance;
}

/* The prototype draws this as a flex <span> in content-box sizing: 48px inside its
   1px border, so 360 × 50 on screen. A <button> does not stretch by itself, hence
   the explicit width that leaves room for the two borders. */
.m0-google {
  box-sizing: content-box;
  width: calc(100% - 2px);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 48px;
  margin: 24px 0 0;
  padding: 0;
  background: var(--white);
  border: 1px solid var(--navy);
  border-radius: 8px;
  font: inherit;
  cursor: pointer;
}

.m0-google:hover {
  background: var(--gray-1);
}

.m0-google-mark {
  flex: 0 0 18px;
}

.m0-google-label {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink);
}

.m0-others {
  margin-top: 32px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}

.m0-not-supplier {
  font-size: 12px;
  font-weight: 400;
  color: var(--ink-2);
  margin-bottom: 10px;
}

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

/* Content-box as in the prototype: 160px + 24px padding + 2px border do not fit
   twice in 360px, so the two links stack, each 360 × 46. */
.m0-link {
  flex: 1 1 160px;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  padding: 0 12px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  font-size: 13px;
  font-weight: 400;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
}

.m0-link:hover {
  background: var(--gray-1);
  border-color: var(--line-control);
}

/* ── M8 إكمال البيانات (prototype lines 88–280) ──────────────────────────────
   Sizes are the prototype's, including its content-box sizing where it has no
   box-sizing (choice chips: 44 px inside a 1 px border since the 13/10 handoff).
   Grey text that was #8C8C8C is #6F6F6F (N419 ruling 2). Step 5 (N426) brings
   the 13/10 changes that apply at every width: title line height, chips, the
   wrapping e-mail row and grey button, larger tap areas, and the send states. */

[hidden] {
  display: none !important;
}

.m8 {
  height: 100%;
  box-sizing: border-box;
  overflow-y: auto;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 28px 16px;
  background: var(--white);
}

.m8-card {
  width: 640px;
  max-width: 100%;
  box-sizing: border-box;
  background: var(--white);
  padding: 8px 4px 28px;
}

.m8-status {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-2);
}

.m8-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #0A7A5A;
  flex: 0 0 8px;
}

.m8-title {
  margin: 4px 0 0;
  font-size: 34px;
  font-weight: 300;
  color: var(--ink);
  line-height: 1.25;
  text-wrap: balance;
}

.m8-section {
  margin-top: 22px;
}

.m8-section-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line);
}

.m8-section-title {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
}

.m8-fields {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 14px;
}

.m8-activity {
  margin-top: 14px;
}

.m8-after {
  margin-top: 14px;
}

.m8-label {
  display: block;
  font-size: 12px;
  font-weight: 400;
  color: var(--ink-2);
  margin-bottom: 5px;
}

.m8-label-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 5px;
}

.m8-label-row .m8-label-in-row {
  margin-bottom: 0;
}

.m8-optional {
  font-size: 11.5px;
  font-weight: 400;
  color: var(--text-3);
}

.m8-input {
  width: 100%;
  box-sizing: border-box;
  height: 44px;
  background: var(--gray-1);
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  padding: 0 14px;
  font: inherit;
  font-size: 13.5px;
  font-weight: 400;
  color: var(--ink);
  outline: none;
}

/* The prototype marks the focused box by a navy border, not an outline. */
.m8-input:focus,
.m8-time:focus {
  border-color: var(--navy);
}

.m8-input:focus-visible,
.m8-time:focus-visible {
  outline: none;
}

.m8-ltr {
  direction: ltr;
  text-align: right;
}

.m8-error {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 6px;
}

.m8-error-dash {
  width: 9px;
  height: 3px;
  border-radius: 2px;
  background: #DA1E28;
  flex: 0 0 9px;
}

.m8-error-text {
  font-size: 11.5px;
  font-weight: 400;
  color: #DA1E28;
}

.m8-hint {
  font-size: 11.5px;
  font-weight: 400;
  color: var(--text-3);
  line-height: 1.7;
  margin-top: 6px;
}

/* Wilaya */
.m8-wil {
  position: relative;
}

.m8-wil-input {
  padding-inline-end: 40px;
}

.m8-wil-toggle {
  position: absolute;
  inset-inline-end: 0;
  top: 0;
  width: 40px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.m8-chevron {
  width: 7px;
  height: 7px;
  border-right: 1.5px solid var(--ink-2);
  border-bottom: 1.5px solid var(--ink-2);
  transform: translateY(-2px) rotate(45deg);
}

.m8-wil-pop {
  position: absolute;
  inset-inline-start: 0;
  inset-inline-end: 0;
  top: 48px;
  z-index: 20;
  background: var(--white);
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  padding: 4px;
}

/* The prototype scrolls the whole popup (max 232 px). Here the listbox itself
   scrolls, at the same height, so that assistive technology and axe-core see a
   combobox popup, which the keyboard drives through the box (N419 ruling 3). */
.m8-wil-list {
  max-height: 232px;
  overflow-y: auto;
}

.m8-wil-option {
  padding: 9px 12px;
  border-radius: 4px;
  font-size: 13px;
  font-weight: 400;
  color: var(--ink);
  cursor: pointer;
}

.m8-wil-option:hover,
.m8-wil-option.is-active {
  background: var(--gray-1);
}

.m8-wil-option.is-chosen {
  font-weight: 600;
  background: var(--gray-1);
}

.m8-wil-none {
  padding: 9px 12px;
  font-size: 12.5px;
  color: var(--text-3);
}

/* Map */
.m8-map-row {
  display: flex;
  align-items: stretch;
  gap: 8px;
}

.m8-map-row .m8-input {
  flex: 1;
  min-width: 0;
}

/* Its placeholder is words now (owner ruling, N500 item 4): read right to left while
   it shows, in its place at the right; a link typed or pasted stays left to right
   (.m8-ltr). */
.m8-map-row .m8-input:placeholder-shown {
  direction: rtl;
}

.m8-locate {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 44px;
  padding: 0 14px;
  box-sizing: border-box;
  border: 1px solid var(--navy);
  border-radius: 8px;
  background: var(--white);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--navy);
  cursor: pointer;
  white-space: nowrap;
}

.m8-locate:hover {
  background: var(--gray-1);
}

.m8-locate-icon {
  position: relative;
  width: 14px;
  height: 14px;
  border: 1.5px solid var(--navy);
  border-radius: 999px;
  box-sizing: border-box;
  flex: 0 0 14px;
}

.m8-locate-icon::after {
  content: '';
  position: absolute;
  inset: 3px;
  border-radius: 999px;
  background: var(--navy);
}

.m8-locate.is-busy {
  border-color: var(--line-strong);
  background: var(--gray-1);
  font-weight: 400;
  color: var(--ink-2);
  cursor: default;
}

.m8-locate.is-busy .m8-locate-icon {
  display: none;
}

/* Front photo: the prototype's image slot, 160 px, dashed ring at 35 %. */
.m8-photo {
  position: relative;
  display: block;
  width: 100%;
  height: 160px;
  border-radius: 8px;
  overflow: hidden;
  color: var(--ink-2);
  background: rgba(127, 127, 127, 0.08);
}

.m8-photo::after {
  content: '';
  position: absolute;
  inset: 0;
  border: 1.5px dashed currentColor;
  border-radius: 8px;
  opacity: 0.35;
  pointer-events: none;
}

.m8-photo.is-filled::after {
  display: none;
}

.m8-photo:has(.m8-photo-input:focus-visible) {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

.m8-photo-empty {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 12px;
  box-sizing: border-box;
  text-align: center;
  font-size: 13px;
  line-height: 1.3;
}

.m8-photo-empty svg {
  opacity: 0.45;
}

.m8-photo-caption {
  max-width: 90%;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--text-3);
}

.m8-photo.is-filled .m8-photo-empty {
  display: none;
}

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

.m8-photo-input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

/* Phones */
.m8-phones {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.m8-phone-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.m8-phone-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.m8-phone-row .m8-input {
  flex: 1;
  min-width: 0;
}

.m8-phones .m8-hint {
  margin-top: 0;
}

/* A 44 px tap target (13/10 handoff), drawn as before. */
.m8-phone-remove {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  height: 44px;
  padding: 0 4px;
  border: 0;
  background: none;
  font: inherit;
  font-size: 12px;
  font-weight: 400;
  color: #DA1E28;
  text-decoration: underline;
  cursor: pointer;
}

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

/* The hit area grows 13 px above and below; the layout does not move. */
.m8-phone-add {
  align-self: flex-start;
  padding: 13px 0;
  margin: -13px 0;
  font-size: 12px;
  font-weight: 600;
  color: var(--navy);
}

/* E-mail: shown, not edited */
/* The row wraps when the address is long: address first, then the note. */
.m8-mail {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 2px 10px;
  min-height: 44px;
  box-sizing: border-box;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--white);
}

.m8-mail-address {
  min-width: 0;
  overflow-wrap: anywhere;
  font-size: 13.5px;
  font-weight: 400;
  color: var(--ink);
  direction: ltr;
  unicode-bidi: isolate;
}

.m8-mail-note {
  font-size: 11.5px;
  font-weight: 400;
  color: var(--ink-2);
  white-space: nowrap;
}

/* Round choices: kind and who sees the stock */
.m8-choices {
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
}

.m8-legend {
  padding: 0;
  font-size: 12px;
  font-weight: 400;
  color: var(--ink-2);
  margin-bottom: 6px;
}

.m8-choice-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.m8-choice {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  height: 44px;
  padding: 0 16px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: var(--gray-1);
  cursor: pointer;
}

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

.m8-choice:has(.m8-choice-input:focus-visible) {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

.m8-choice-input,
.m8-check-input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  opacity: 0;
}

.m8-choice-ring {
  width: 15px;
  height: 15px;
  border: 1px solid var(--line-control);
  border-radius: 9999px;
  background: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 15px;
}

.m8-choice-dot {
  display: none;
  width: 8px;
  height: 8px;
  border-radius: 9999px;
  background: var(--navy);
}

.m8-choice-input:checked + .m8-choice-ring .m8-choice-dot {
  display: block;
}

.m8-choice-label {
  font-size: 13px;
  font-weight: 400;
  color: var(--ink-2);
}

.m8-choice-input:checked ~ .m8-choice-label {
  font-weight: 600;
  color: var(--ink);
}

/* Hours */
.m8-hours {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  min-height: 44px;
  box-sizing: border-box;
  padding: 8px 14px;
  background: var(--gray-1);
  border: 1px solid var(--line-strong);
  border-radius: 8px;
}

.m8-hours-text {
  font-size: 13.5px;
  font-weight: 400;
  color: var(--ink);
  line-height: 1.6;
}

.m8-hours-toggle {
  padding: 13px 0;
  margin: -13px 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  color: var(--navy);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  white-space: nowrap;
}

.m8-hours-toggle:hover {
  color: var(--orange);
}

.m8-sched {
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: var(--gray-1);
  overflow: hidden;
  margin-top: 8px;
}

.m8-day {
  display: grid;
  grid-template-columns: 92px 74px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  padding: 8px 14px;
  border-bottom: 1px solid var(--line);
  background: var(--white);
}

.m8-day-name {
  font-size: 13px;
  font-weight: 400;
  color: var(--ink);
}

.m8-check {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

.m8-box {
  width: 15px;
  height: 15px;
  border: 1px solid var(--line-control);
  border-radius: 4px;
  background: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 15px;
}

.m8-box-mark {
  display: none;
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: var(--navy);
}

.m8-check-input:checked + .m8-box .m8-box-mark {
  display: block;
}

.m8-check:has(.m8-check-input:focus-visible) .m8-box {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

.m8-day-state {
  font-size: 12.5px;
  font-weight: 400;
  color: var(--ink);
}

.m8-day-state.is-closed {
  color: var(--text-3);
}

.m8-day-times,
.m8-break-times {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.m8-break-times {
  display: inline-flex;
  flex-wrap: nowrap;
}

.m8-time {
  width: 88px;
  height: 36px;
  box-sizing: border-box;
  background: var(--gray-1);
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  padding: 0 10px;
  font: inherit;
  font-size: 13px;
  color: var(--ink);
  text-align: center;
  direction: ltr;
  outline: none;
}

.m8-time-break {
  width: 86px;
  background: var(--white);
}

.m8-time-dash {
  font-size: 12px;
  font-weight: 400;
  color: var(--ink-2);
}

.m8-spread {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 12px;
  font-weight: 400;
  color: var(--navy);
  text-decoration: underline;
  cursor: pointer;
}

.m8-break {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: var(--gray-1);
}

.m8-break-text {
  font-size: 12.5px;
  font-weight: 400;
  color: var(--ink);
}

/* Save: orange when complete; grey, naming what is missing, until then; pale
   orange while sending (13/10 handoff). */
.m8-save {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 100%;
  height: 52px;
  margin-top: 24px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: var(--orange);
  font: inherit;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--navy);
  cursor: pointer;
}

.m8-save:hover {
  background: #FFA24C;
}

/* A long message wraps instead of overflowing. Its words #525252 on #E0E0E0, 5.92:1, as M6's
   (step 22e, Director N786 answer 1); #6F6F6F gave 3.81:1. */
.m8-save.is-missing {
  height: auto;
  min-height: 52px;
  padding: 8px 16px;
  line-height: 1.5;
  background: var(--line);
  font-weight: 400;
  color: var(--ink-2);
  text-align: center;
}

.m8-save.is-busy,
.m8-save.is-busy:hover {
  background: rgba(255, 138, 31, 0.4);
  cursor: progress;
}

/* The failed send: a red line under the button; what he typed stays. */
.m8-send-error {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  margin-top: 10px;
}

.m8-send-error .m8-error-dash {
  margin-top: 9px;
}

.m8-send-error-text {
  font-size: 12.5px;
  font-weight: 400;
  color: #DA1E28;
  line-height: 1.7;
}

/* M8r طلب الانضمام: its own header over the shared form (prototype lines 98–102). */
.m8r-eyebrow {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-2);
}

.m8r-lead {
  margin: 8px 0 0;
  font-size: 13px;
  font-weight: 400;
  color: var(--ink-2);
  line-height: 1.8;
  text-wrap: pretty;
}

/* ── Toast (prototype lines 2828–2835) ───────────────────────────────────── */

.toast {
  position: fixed;
  bottom: 70px;
  inset-inline-end: 16px;
  z-index: 90;
  display: flex;
  align-items: center;
  min-height: 40px;
  box-sizing: border-box;
  width: max-content;
  min-width: min(240px, calc(100vw - 32px));
  max-width: min(560px, calc(100vw - 32px));
  padding: 8px 16px;
  background: var(--ink);
  border-radius: 8px;
  border-inline-start: 3px solid #24A148;
}

.toast-text {
  min-width: 0;
  font-size: 12.5px;
  font-weight: 400;
  color: var(--white);
  line-height: 1.6;
  overflow-wrap: anywhere;
}

/* «تراجَع» after a save (prototype line 2832): orange, underlined, 14 px after the
   text; #FF8A1F on #161616 is 7.68:1. A real button with no frame of its own. */
.toast-undo {
  flex: 0 0 auto;
  margin: 0;
  margin-inline-start: 14px;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--orange);
  text-decoration: underline;
  white-space: nowrap;
  cursor: pointer;
}

/* ── M0i: M0 on a phone in an in-app browser (13/10 prototype lines 79–84) ── */

.m0i-line {
  margin-top: 20px;
  font-size: 15px;
  font-weight: 400;
  color: var(--ink);
  line-height: 1.7;
  text-wrap: pretty;
}

.m0i-copy {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 48px;
  margin-top: 16px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: var(--orange);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--navy);
  cursor: pointer;
}

.m0i-copy:hover {
  background: #FFA24C;
}

/* After the copy: white with a navy border, «✓ نُسخ», no further action. */
.m0i-copy.is-copied,
.m0i-copy.is-copied:hover {
  border: 1px solid var(--navy);
  background: var(--white);
  cursor: default;
}

.m0i-hint {
  margin-top: 10px;
  font-size: 12.5px;
  font-weight: 400;
  color: var(--text-3);
  line-height: 1.8;
  text-wrap: pretty;
}

/* ── M8R قيد المراجعة and M13 أكمل من الحاسوب (13/10 prototype lines 294–321) ──
   Two centred messages drawn the same way: a 480 px card, a light title, a grey
   line, and the actions under a rule. M8R opens at every width; M13 is phone
   only. */

.m8-review,
.m13 {
  height: 100%;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow-y: auto;
  padding: 28px 16px 72px;
  background: var(--white);
}

.m8-review-card,
.m13-card {
  width: 480px;
  max-width: 100%;
  box-sizing: border-box;
  padding: 8px 4px;
  text-align: center;
}

.m8-review-title,
.m13-title {
  margin: 0;
  font-weight: 300;
  color: var(--ink);
  line-height: 1.25;
}

.m8-review-title {
  font-size: 34px;
}

.m13-title {
  font-size: 26px;
}

.m8-review-body,
.m13-body {
  margin: 8px 0 0;
  font-size: 13px;
  font-weight: 400;
  color: var(--ink-2);
  line-height: 1.8;
  text-wrap: pretty;
}

.m8-review-actions,
.m13-actions {
  display: flex;
  justify-content: center;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  flex-wrap: wrap;
}

/* Side by side on a wide screen; stacked on the phone (prototype m8RDir). */
.m8-review-actions {
  flex-direction: row;
  align-items: center;
  gap: 16px;
}

.m13-actions {
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
}

.m8-review-whatsapp {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  white-space: nowrap;
  height: 44px;
  padding: 0 20px;
  background: var(--navy);
  border-radius: 8px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--white);
  text-decoration: none;
  cursor: pointer;
}

.m8-review-whatsapp:hover {
  background: var(--navy-hover);
}

.m8-review-exit,
.m13-exit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 12px;
  border: 0;
  background: none;
  font: inherit;
  font-size: 12.5px;
  font-weight: 400;
  color: var(--navy);
  text-decoration: underline;
  cursor: pointer;
  white-space: nowrap;
}

/* M13 names the Google account he is signed in with. */
.m13-account {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  margin-top: 18px;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.m13-account-label {
  font-size: 11.5px;
  font-weight: 400;
  color: var(--ink-2);
}

.m13-account-mail {
  max-width: 100%;
  font-size: 13.5px;
  font-weight: 400;
  color: var(--ink);
  direction: ltr;
  unicode-bidi: isolate;
  overflow-wrap: anywhere;
}

/* ── M1F Stock disponible, empty catalogue (13/10 prototype lines 324–752) ────
   The table card with its navy column head, and the two ways in, centred in the
   table. The table reads left to right (French column names); its cells keep
   their own direction. */

.m1 {
  height: 100%;
  display: flex;
  flex-direction: column;
  background: var(--white);
}

.m1-card {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  margin: 12px 16px 58px;
  border-radius: 14px;
  overflow: hidden;
  background: var(--white);
  box-shadow: 0 1px 2px rgba(22, 22, 22, 0.06), 0 2px 10px rgba(22, 22, 22, 0.05);
}

.m1-scroll {
  flex: 1;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  direction: ltr;
}

.m1-inner {
  direction: ltr;
  min-width: 0;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  padding-bottom: 14px;
  box-sizing: border-box;
}

.m1-table {
  flex: 0 0 auto;
}

/* A table that is only its head (M1F, or M1 when nothing is left) sticks as a
   whole inside the inner column, as the prototype's head does (line 503). */
.m1-table:not(:has(.m1-row)) {
  position: sticky;
  top: 0;
  z-index: 2;
}

/* The prototype's eight columns: box · Référence · Désignation · Marque · Made in ·
   Prix · الحالة · نُشرت. */
.m1-head {
  display: grid;
  grid-template-columns:
    34px minmax(96px, 132px) minmax(160px, 3fr) minmax(70px, 96px) minmax(60px, 80px)
    minmax(84px, 104px) minmax(96px, 118px) 74px;
  align-items: center;
  gap: 8px;
  padding: 0 14px;
  height: 40px;
  background: var(--navy);
  /* The head stays in view while the rows scroll under it. */
  position: sticky;
  top: 0;
  z-index: 2;
}

.m1-head-box {
  position: relative;
  width: 14px;
  height: 14px;
}

/* Edit mode: the select-all box (prototype line 505). It draws no state, as the
   prototype's; the checkbox over it, unseen, takes a 34×40 click (the default
   under Q3, after the contract's 34×44 for a row's box) and tells its state. */
.m1-head-check {
  display: block;
  width: 14px;
  height: 14px;
  border: 1px solid var(--navy-line);
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.12);
}

.m1-head-tick {
  position: absolute;
  top: -13px;
  left: -10px;
  width: 34px;
  height: 40px;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.m1-head-tick:focus-visible + .m1-head-check {
  outline: 2px solid var(--white);
  outline-offset: 2px;
}

.m1-head-cell {
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 12px;
  font-weight: 600;
  color: var(--white);
}

.m1-head-end {
  text-align: end;
}

.m1f-empty {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 16px 72px;
}

.m1f-center {
  flex: 1 1 auto;
  min-width: 0;
}

.m1f-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 14px;
}

/* Content-box as in the prototype: the outline button is 44 px inside its 1 px
   border, so 46 px tall beside the 44 px orange one. */
.m1f-add,
.m1f-upload {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  box-sizing: content-box;
  white-space: nowrap;
  height: 44px;
  padding: 0 24px;
  border-radius: 8px;
  font: inherit;
  font-size: 13.5px;
  cursor: pointer;
}

.m1f-add {
  border: 0;
  background: var(--orange);
  font-weight: 600;
  color: var(--navy);
}

.m1f-add:hover {
  background: #FFA24C;
}

.m1f-upload {
  border: 1px solid var(--line-control);
  background: var(--white);
  font-weight: 400;
  color: var(--ink);
}

.m1f-upload:hover {
  background: var(--gray-1);
  border-color: var(--navy);
}

/* The table regions fill cards that clip their overflow, so their own focus ring
   cannot show: the card carries it while the region has the keyboard focus
   (N419 ruling 3). */
.m1-card:has(> .m1-scroll:focus-visible),
.m2-card:has(> .m2-scroll:focus-visible) {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

/* ── M1 Stock disponible, the filled catalogue (13/10 prototype lines 324–724) ─
   The toolbar (search, «النسخ», «عدِّل الجدول», «+ أضِف قطعة», «ارفع ملفًّا», «من آذن لهم
   فقط»), the views, the filters, the «غير مؤكّد» line, and the table card shared with
   M1F. Buttons are content-box, as the prototype's spans: a 1 px border makes a
   40 px button 42 px tall. */

.m1-tools {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--line);
}

.m1-search {
  width: 280px;
  flex: 0 0 280px;
  height: 40px;
  box-sizing: content-box;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: var(--gray-1);
  padding: 0 14px;
  font: inherit;
  font-size: 13.5px;
  font-weight: 400;
  color: var(--ink);
}

/* The prototype marks the focused field by a navy border, not an outline. */
.m1-search:focus {
  border-color: var(--navy);
}

.m1-search:focus-visible {
  outline: none;
}

/* The prototype leaves the placeholder to the browser, #757575: 4.19:1 on the grey
   field. The Director's ruling (N476, answer 2), as for M3's fields (N475): #707070,
   the grey closest to it that reaches 4.5:1 on #F4F4F4 (4.50). */
.m1-search::placeholder {
  color: #707070;
  opacity: 1;
}

.m1-versions,
.m1-edit,
.m1-add,
.m1-upload,
.m1-who {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  box-sizing: content-box;
  height: 40px;
  border-radius: 8px;
  font: inherit;
  white-space: nowrap;
  cursor: pointer;
}

.m1-versions {
  gap: 6px;
  padding: 0 14px;
  border: 1px solid var(--line-strong);
  background: var(--white);
  font-size: 11.5px;
  font-weight: 400;
  color: var(--ink);
}

.m1-versions:hover {
  background: var(--gray-1);
  border-color: var(--line-control);
}

/* «سجلّ النسخ», the versions panel (prototype lines 448–477): a zero-height
   anchor under the toolbar, the panel hanging from it 8 px down and 16 px from the
   right edge, over the table. No shadow (its edge is the 1 px border). The time is
   #6F6F6F, not the prototype's #8C8C8C (N419 ruling 2). */
.m1-ver-anchor {
  position: relative;
  height: 0;
  z-index: 46;
  flex: 0 0 auto;
}

.m1-ver-anchor[hidden] {
  display: none;
}

.m1-ver {
  position: absolute;
  top: 8px;
  inset-inline-start: 16px;
  width: 430px;
  max-width: calc(100% - 32px);
  max-height: max(160px, calc(100vh - 300px));
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--line-control);
  border-radius: 8px;
  background: var(--white);
}

.m1-ver-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: var(--navy);
}

.m1-ver-title {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--white);
}

/* × is drawn 13 × 15; its press area reaches 25 × 25 with no change to the look
   (WCAG 2.5.8). */
.m1-ver-x {
  position: relative;
  padding: 0 2px;
  border: 0;
  background: none;
  font: inherit;
  font-size: 15px;
  font-weight: 400;
  line-height: 1;
  color: #A9B8D6;
  cursor: pointer;
}

.m1-ver-x::before {
  content: '';
  position: absolute;
  inset: -5px -6px;
}

.m1-ver-x:hover {
  color: var(--white);
}

.m1-ver-list {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  margin: 0;
  padding: 0;
  list-style: none;
}

.m1-ver-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 14px;
  border-bottom: 1px solid var(--line);
}

.m1-ver-row:hover {
  background: var(--gray-1);
}

.m1-ver-text {
  flex: 1 1 auto;
  min-width: 0;
}

.m1-ver-label {
  display: block;
  overflow: hidden;
  font-size: 12.5px;
  font-weight: 400;
  color: var(--ink);
  white-space: nowrap;
  text-overflow: ellipsis;
}

.m1-ver-when {
  display: block;
  margin-top: 3px;
  font-size: 11px;
  font-weight: 400;
  color: var(--text-3);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.m1-ver-n {
  flex: 0 0 auto;
  font-size: 11.5px;
  font-weight: 400;
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.m1-ver-cur {
  display: inline-flex;
  align-items: center;
  height: 26px;
  padding: 0 10px;
  border-radius: 6px;
  background: var(--navy);
  font-size: 11px;
  font-weight: 600;
  color: var(--white);
  white-space: nowrap;
}

.m1-ver-restore {
  display: inline-flex;
  align-items: center;
  box-sizing: content-box;
  height: 30px;
  padding: 0 14px;
  border: 1px solid var(--line-control);
  border-radius: 8px;
  background: var(--white);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
  cursor: pointer;
}

.m1-ver-restore:hover {
  background: var(--line);
}

.m1-ver-foot {
  flex: 0 0 auto;
  padding: 9px 14px;
  border-top: 1px solid var(--line);
  background: var(--gray-1);
}

.m1-ver-foot-text {
  font-size: 11px;
  font-weight: 400;
  line-height: 1.7;
  color: var(--ink-2);
}

.m1-edit,
.m1-upload {
  padding: 0 16px;
  border: 1px solid var(--line-control);
  background: var(--white);
  font-size: 13px;
  font-weight: 400;
  color: var(--ink);
}

.m1-edit:hover,
.m1-upload:hover,
.m1-who:hover {
  background: var(--gray-1);
  border-color: var(--navy);
}

.m1-spacer {
  flex: 1 1 auto;
}

/* Edit mode's buttons, in «عدِّل الجدول»'s place (prototype lines 353–374). */
.m1-edit-slot {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}

/* With nothing changed: grey, «أنهِ التعديل» (contract M1.edit.save). */
.m1-save,
.m1-cancel {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  box-sizing: content-box;
  height: 40px;
  border-radius: 8px;
  font: inherit;
  font-size: 13px;
  white-space: nowrap;
  cursor: pointer;
}

.m1-save {
  padding: 0 16px;
  border: 1px solid var(--line-strong);
  background: var(--white);
  font-weight: 400;
  color: var(--ink-2);
}

.m1-save:hover {
  background: var(--gray-1);
}

/* With changes: orange, «احفظ …» with the count. */
.m1-save-dirty {
  padding: 0 18px;
  border: 0;
  background: var(--orange);
  font-weight: 600;
  color: var(--navy);
}

.m1-save-dirty:hover {
  background: #FFA24C;
}

.m1-cancel {
  padding: 0 14px;
  border: 1px solid var(--line-control);
  background: var(--white);
  font-weight: 400;
  color: var(--ink);
}

.m1-cancel:hover {
  background: var(--gray-1);
}

/* «ألغِ» asked in its place: «تترك … بلا حفظ؟» · «نعم» · «تابِع التعديل». */
.m1-ask {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 40px;
  padding: 0 12px;
  border-radius: 8px;
  background: #DA1E28;
}

.m1-ask-word {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--white);
  white-space: nowrap;
}

.m1-ask-yes {
  display: inline-flex;
  align-items: center;
  height: 28px;
  padding: 0 10px;
  border: 0;
  border-radius: 6px;
  background: var(--white);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  color: #DA1E28;
  white-space: nowrap;
  cursor: pointer;
}

.m1-ask-keep {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 12px;
  font-weight: 400;
  color: var(--white);
  text-decoration: underline;
  white-space: nowrap;
  cursor: pointer;
}

/* On the red pill the orange ring would not show: white instead. */
.m1-ask :focus-visible {
  outline-color: var(--white);
}

.m1-add {
  padding: 0 22px;
  border: 0;
  background: var(--orange);
  font-size: 13px;
  font-weight: 600;
  color: var(--navy);
}

.m1-add:hover {
  background: #FFA24C;
}

/* ── Adding a part (sub-step 16e; prototype lines 519–531 and 727–745) ─────────
   The add row: under the navy head, in the table's eight columns, sticking 40 px
   down while the rows scroll under it (the head is z 2, the row z 1). */
.m1-addrow {
  display: grid;
  grid-template-columns:
    34px minmax(96px, 132px) minmax(160px, 3fr) minmax(70px, 96px) minmax(60px, 80px)
    minmax(84px, 104px) minmax(96px, 118px) 74px;
  align-items: center;
  gap: 8px;
  padding: 10px 14px 8px;
  border-bottom: 1px solid var(--line);
  background: var(--gray-1);
  position: sticky;
  top: 40px;
  z-index: 1;
}

.m1-addrow-cell {
  min-width: 0;
}

/* The five fields share one style (prototype lines 523–527); they are not edit
   mode's 32 px fields. */
.m1-addrow-input {
  display: block;
  width: 100%;
  box-sizing: border-box;
  height: 36px;
  border: 1px solid var(--line-control);
  border-radius: 8px;
  background: var(--white);
  padding: 0 10px;
  font: inherit;
  font-size: 12.5px;
  font-weight: 400;
  color: var(--ink);
  direction: ltr;
  outline: none;
}

.m1-addrow-input-des {
  font-size: 13px;
}

.m1-addrow-input-prix {
  font-size: 13.5px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

/* The prototype marks the focused field by a navy border, not an outline. */
.m1-addrow-input:focus {
  border-color: var(--navy);
}

.m1-addrow-input:focus-visible {
  outline: none;
}

/* The prototype gives no colour: the build's placeholder grey (N419). */
.m1-addrow-input::placeholder {
  color: var(--text-3);
}

/* Below 828 px, Made in's field is too narrow for its placeholder: the fields' inner
   padding is 8 px each side, a 46 px room for Made in, their widths unchanged (owner
   ruling, N500 item 5; 2 px each side, so that it fits with room to spare, N502 item 1;
   up to 828 px, so that it does at every width, N504 item 2a).
   «max-width: 827.98px» keeps 828 out, as the floor asks (N496 item 1). */
@media (max-width: 827.98px) {
  .m1-addrow-input {
    padding: 0 8px;
  }
}

/* While the row is open, Tab never leaves a row's field under the head (40 px)
   and the add row (55 px) that stick over the rows (WCAG 2.4.11). */
.m1-scroll:has(.m1-addrow:not([hidden])) {
  scroll-padding-top: 95px;
}

/* The narrowing told to a screen reader (Director N460), and the allowed list's
   search in M3 (17e): a status region nobody sees; it takes no room and changes
   nothing on screen. */
.m1-probe-live,
.m3-told {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* The bar: the card's last strip, under the table, from the right the button and
   «تراجَع». Spans in the prototype, so content-box: «تراجَع» is 38 px with its
   border. */
.m1-addbar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  padding: 12px 16px;
  border-top: 1px solid var(--line);
  background: var(--gray-1);
}

.m1-addbar-go,
.m1-addbar-back {
  display: inline-flex;
  align-items: center;
  box-sizing: content-box;
  height: 36px;
  border-radius: 8px;
  font: inherit;
  font-size: 12.5px;
  white-space: nowrap;
  cursor: pointer;
}

.m1-addbar-go {
  padding: 0 20px;
  border: 0;
  background: var(--orange);
  font-weight: 600;
  color: var(--navy);
}

.m1-addbar-go:hover {
  background: #FFA24C;
}

/* Grey while a field is missing (prototype line 733): #525252 on #E0E0E0, 5.92:1, as M8's grey
   save since step 22e (Director N821), not the prototype's #8C8C8C; aria-disabled, so it stays in
   the Tab order. */
.m1-addbar-missing,
.m1-addbar-missing:hover {
  background: var(--line);
  font-weight: 400;
  color: var(--ink-2);
  cursor: default;
}

.m1-addbar-back {
  padding: 0 14px;
  border: 1px solid var(--line-control);
  background: var(--white);
  font-weight: 400;
  color: var(--ink);
}

.m1-addbar-back:hover {
  background: var(--line);
}

/* The duplicate warning (sub-step 16h; prototype lines 736–741): after «تراجَع», it
   takes the rest of the bar, the link at its far end. Empty, it takes no room. */
.m1-addbar-dup {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.m1-addbar-dup:not(:empty) {
  flex: 1 1 260px;
}

.m1-addbar-dup-dash {
  flex: 0 0 9px;
  width: 9px;
  height: 3px;
  border-radius: 2px;
  background: #DA1E28;
}

.m1-addbar-dup-text {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 11.5px;
  font-weight: 500;
  color: var(--ink);
  line-height: 1.7;
}

.m1-addbar-dup-link {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--navy);
  text-decoration: underline;
  white-space: nowrap;
  cursor: pointer;
}

/* The pill: one frame, as the prototype draws it, holding buttons side by side
   (17c; the prototype nests them, its P9). Its whole height is theirs to click. */
.m1-who {
  align-items: stretch;
  padding: 0;
  border: 1px solid var(--line-strong);
  background: var(--white);
  font-size: 12.5px;
  font-weight: 400;
  color: var(--ink);
}

.m1-who-pill,
.m1-who-open,
.m1-who-cancel {
  display: inline-flex;
  align-items: center;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  white-space: nowrap;
  cursor: pointer;
}

.m1-who-pill {
  gap: 8px;
  padding: 0 14px;
  color: var(--ink);
}

/* In mode «من آذن لهم فقط» the pill stops 8 px before the bar, and the frame's
   end belongs to «افتحه لكلّ التجار» or to its question. */
.m1-who:has(.m1-who-end) .m1-who-pill {
  padding-inline-end: 8px;
}

.m1-who-end {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding-inline-end: 14px;
}

.m1-who-dot {
  width: 9px;
  height: 9px;
  flex: 0 0 9px;
  border-radius: 9999px;
  background: var(--navy);
}

/* «كلّ البائعين»: a green dot (prototype line 332). */
.m1-who-dot-all {
  background: #0A7A5A;
}

.m1-who-bar {
  width: 1px;
  height: 16px;
  flex: 0 0 1px;
  background: var(--line-strong);
}

.m1-who-open {
  font-weight: 600;
  color: #B35C00;
}

.m1-who-open:hover {
  color: var(--orange);
}

/* Its question in its place (17c; prototype lines 340–343): «أكِّد الفتح» navy on
   orange (6.84:1) and «تراجَع» (#525252, 7.81:1). */
.m1-who-confirm {
  display: inline-flex;
  align-items: center;
  height: 26px;
  margin: 0;
  padding: 0 12px;
  border: 0;
  border-radius: 6px;
  background: var(--orange);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  color: var(--navy);
  white-space: nowrap;
  cursor: pointer;
}

.m1-who-confirm:hover {
  background: #FFA24C;
}

.m1-who-cancel {
  font-size: 12px;
  font-weight: 400;
  color: var(--ink-2);
  text-decoration: underline;
}

.m1-who-cancel:hover {
  color: var(--ink);
}

/* The views: the label, a space and its count; the current one underlined. */
.m1-views {
  flex: 1 1 100%;
  min-width: 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 20px;
  padding: 2px 2px 0;
}

/* A full line: empty in read mode (it adds the 8 px gap), the hint in edit mode
   (prototype line 378). */
.m1-views-hint {
  flex: 1 1 100%;
  font-size: 11.5px;
  font-weight: 400;
  color: var(--ink-2);
  line-height: 1.6;
}

.m1-view {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 12.5px;
  font-weight: 400;
  color: var(--ink-2);
  white-space: nowrap;
  cursor: pointer;
}

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

/* #6F6F6F, not the prototype's #8C8C8C (N419 ruling 2). */
.m1-view-n,
.m1-miss-n {
  color: var(--text-3);
  font-variant-numeric: tabular-nums;
}

.m1-view-on .m1-view-in {
  color: var(--ink);
  font-weight: 600;
  box-shadow: inset 0 -2px 0 var(--orange);
  padding-bottom: 3px;
}

.m1-view-on .m1-view-n,
.m1-miss-on .m1-miss-n {
  font-weight: 400;
  color: var(--ink-2);
}

/* The filters: brand and country lists, the "missing" chips, the active tokens. */
.m1-filters {
  flex: 1 1 100%;
  min-width: 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 10px;
  padding: 8px 2px 0;
  margin-top: 8px;
  border-top: 1px solid var(--line);
}

.m1-select {
  height: 34px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: var(--white);
  padding: 0 10px;
  font: inherit;
  font-size: 12.5px;
  color: var(--ink);
  cursor: pointer;
  max-width: 200px;
}

.m1-select-pays {
  max-width: 190px;
}

/* The «العروض» chip (sub-step 16k; prototype lines 400–401): 36 px tall with its
   border, white with a grey edge (navy under the pointer), navy when on; its count
   on orange (6.84:1), first, so at the right. Off #161616 on white 18.10:1; on
   white on navy 16.12:1. */
.m1-offers {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  box-sizing: content-box;
  height: 34px;
  padding: 0 12px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: var(--white);
  font: inherit;
  font-size: 12.5px;
  font-weight: 400;
  color: var(--ink);
  white-space: nowrap;
  cursor: pointer;
}

.m1-offers[hidden] {
  display: none;
}

.m1-offers:hover {
  border-color: var(--navy);
}

.m1-offers-on {
  border-color: var(--navy);
  background: var(--navy);
  font-weight: 600;
  color: var(--white);
}

.m1-offers-n,
.m1-bar-end-n {
  display: inline-flex;
  align-items: center;
  height: 18px;
  padding: 0 6px;
  border-radius: 4px;
  background: var(--orange);
  font-size: 10.5px;
  font-weight: 600;
  color: var(--navy);
}

.m1-filters-bar {
  width: 1px;
  height: 20px;
  background: var(--line);
}

.m1-filters-end {
  display: contents;
}

/* The undo and redo arrows in edit mode (prototype lines 411–428): at the filter
   row's far end, 6 px apart; 34 × 30 inside a 1 px border. Live: the ink on white,
   #F4F4F4 under the pointer. Grey (nothing to undo or redo): a light border and a
   grey mark, no hover, the click doing nothing. */
.m1-arrows {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-inline-start: auto;
}

.m1-arrows[hidden] {
  display: none;
}

.m1-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: content-box;
  width: 34px;
  height: 30px;
  padding: 0;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: var(--white);
  color: var(--ink);
  cursor: pointer;
}

.m1-arrow:hover {
  background: var(--gray-1);
  border-color: var(--line-control);
}

.m1-arrow.m1-arrow-off,
.m1-arrow.m1-arrow-off:hover {
  border-color: var(--line);
  background: var(--white);
  color: var(--line-strong);
  cursor: default;
}

.m1-miss {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  box-sizing: content-box;
  height: 30px;
  padding: 0;
  border: 0;
  border-bottom: 2px solid transparent;
  background: none;
  font: inherit;
  font-size: 12px;
  font-weight: 400;
  color: var(--ink-2);
  white-space: nowrap;
  cursor: pointer;
}

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

.m1-miss-on {
  font-weight: 600;
  color: var(--ink);
  border-bottom-color: var(--orange);
}

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

.m1-token {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 30px;
  padding: 0 10px;
  border-radius: 8px;
  background: #FFE2C4;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--ink);
}

.m1-token-x {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 13px;
  color: var(--navy);
  cursor: pointer;
}

.m1-clear {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 11.5px;
  font-weight: 400;
  color: var(--navy);
  text-decoration: underline;
  white-space: nowrap;
  cursor: pointer;
}

/* «غير مؤكّد»: why, under the toolbar, on that view only. */
.m1-unsure {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  margin: 8px 16px 0;
  padding: 11px 14px;
  background: var(--gray-1);
  border-inline-start: 3px solid #8A6A12;
  border-radius: 0 8px 8px 0;
}

.m1-unsure[hidden] {
  display: none;
}

.m1-unsure-ring {
  width: 11px;
  height: 11px;
  flex: 0 0 11px;
  box-sizing: border-box;
  margin-top: 3px;
  border: 2px solid #8A6A12;
  border-radius: 9999px;
  background: var(--white);
}

.m1-unsure-text {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 12px;
  font-weight: 400;
  color: var(--ink);
  line-height: 1.75;
  text-wrap: pretty;
}

/* The table with rows scrolls sideways below 780 px of table. */
.m1-scroll-rows {
  overflow-x: auto;
}

.m1-inner-rows {
  min-width: 780px;
}

/* M1F's head, with no rows under it, as wide as M1's table at least: below 780 px it
   scrolls sideways with it, rather than lose its first column. The space under it
   keeps the card's width, its two buttons where they were (the Director's answer on
   N497 item 1). */
.m1-head-table {
  min-width: 780px;
}

.m1-sort {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  text-align: inherit;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
}

.m1-sort:focus-visible {
  outline-color: var(--white);
  outline-offset: -2px;
}

.m1-row {
  position: relative;
  display: grid;
  grid-template-columns:
    34px minmax(96px, 132px) minmax(160px, 3fr) minmax(70px, 96px) minmax(60px, 80px)
    minmax(84px, 104px) minmax(96px, 118px) 74px;
  align-items: center;
  gap: 8px;
  padding: 0 14px;
  min-height: 44px;
  border-bottom: 1px solid var(--line);
}

.m1-row:hover {
  background: var(--gray-1);
}

.m1-row-box {
  display: block;
  width: 34px;
  height: 44px;
  margin: 0 -10px;
}

/* Edit mode: the row's box (prototype lines 539–545), a checkbox (the Director's
   answer 1 under N447). The checkbox covers the 34×44 click, unseen; the drawn
   box under it shows a 9×9 navy square when the row is selected. */
.m1-row-edit .m1-row-box {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.m1-row-tick {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.m1-row-check {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border: 1px solid var(--line-control);
  border-radius: 4px;
  background: var(--white);
}

.m1-row-tick:checked + .m1-row-check::after {
  content: '';
  width: 9px;
  height: 9px;
  border-radius: 2px;
  background: var(--navy);
}

.m1-row-tick:focus-visible + .m1-row-check {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

/* A selected row (prototype lines 537–538): #EBEFF7, hover or not, and a 3 px
   orange edge on its left, the table reading left to right. On it the struck
   price is #525252 (6.78:1; #6F6F6F gives 4.36:1 there: the Director's answer 4
   under N447). */
.m1-row-sel,
.m1-row-sel:hover {
  background: #EBEFF7;
}

.m1-row-sel::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 3px;
  background: var(--orange);
  pointer-events: none;
}

.m1-row-sel .m1-prix-was {
  color: var(--ink-2);
}

/* Edit mode: the five fields (prototype lines 546–575). A changed cell is framed
   in orange (contract M1.cell.edit); the field in use is navy on #FFF6EC. */
.m1-cell-edit {
  overflow: visible;
}

.m1-input {
  display: block;
  width: 100%;
  box-sizing: border-box;
  height: 32px;
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  background: var(--white);
  padding: 0 8px;
  font: inherit;
  font-size: 12.5px;
  font-weight: 400;
  color: var(--ink);
  direction: ltr;
  outline: none;
}

.m1-input-ref {
  font-variant-numeric: tabular-nums;
}

.m1-input-des {
  font-size: 13px;
}

.m1-input-prix {
  font-size: 13.5px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.m1-input-dirty {
  border-color: var(--orange);
  background: #FFF3E6;
}

.m1-input:focus {
  border-color: var(--navy);
  background: #FFF6EC;
}

.m1-input:focus-visible {
  outline: none;
}

.m1-input::placeholder {
  color: var(--text-3);
}

/* The price cell in edit mode: the field, and under a changed price the price
   before, struck, and the change (prototype lines 573–597). His offer's line
   comes before the field in the page order and is drawn under it (16l). */
.m1-prix.m1-cell-edit {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  width: 100%;
}

.m1-prix.m1-cell-edit > .m1-off-edit {
  order: 1;
}

.m1-prix.m1-cell-edit > .m1-off-stack,
.m1-prix.m1-cell-edit > .m1-prix-trace {
  order: 2;
}

.m1-prix.m1-cell-edit > .m1-off-ask {
  order: 3;
}

/* Every display-only line drawn over or beside a field takes no clicks, so a click
   there always reaches the field under it (Director N472): the trace under a
   changed price (step 12) and the stack line (16m). Their words may run past the
   price column, over Made in's edge with a wider fallback font. */
.m1-show-only {
  pointer-events: none;
}

/* His offer in edit mode (sub-step 16l; prototype lines 576–588): one line,
   right to left (the map's Q4), which may run past the column without covering
   another control (Q5). Centred, as the prototype draws it, its left end would lie
   over the Made in field's lower edge, with «أنهِه» there; so it starts at the price
   column's left edge and runs to the right only, under the condition, which ends
   above it. The words #525252 (7.81:1 on white, 6.78:1 on a selected row); «أنهِه»
   and «يُنهى العرض» #A2191F (7.79:1, 6.76:1); «تراجَع» navy (16.12:1, 13.99:1). On a
   part marked for deletion they are not faded (the map's Q13). */
.m1-off-edit {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  margin-top: 4px;
  font-size: 10.5px;
  font-weight: 400;
  line-height: 1.3;
  white-space: nowrap;
}

.m1-off-edit[hidden] {
  display: none;
}

.m1-off-edit-word {
  color: var(--ink-2);
}

.m1-off-ending {
  font-weight: 600;
  color: #A2191F;
}

.m1-off-end,
.m1-off-keep {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-weight: 600;
  text-decoration: underline;
  cursor: pointer;
}

.m1-off-end {
  color: #A2191F;
}

.m1-off-keep {
  color: var(--navy);
}

.m1-off-end:disabled,
.m1-off-keep:disabled {
  cursor: default;
}

/* The stack line (sub-step 16m; prototype line 590): #0A7A5A, 600, under the field
   in the trace's place and centred as the trace is (the map's l.545). Its words run
   6 px past the column on each side, clear of the Made in field and the condition;
   with a wider fallback font they may reach them, and it takes no click
   (.m1-show-only) (5.32:1 on white, 4.84:1 under the pointer, 4.62:1 on a
   selected row). */
.m1-off-edit.m1-off-stack {
  justify-content: center;
  margin-top: 3px;
  font-weight: 600;
  color: #0A7A5A;
  font-variant-numeric: tabular-nums;
}

/* «اعرضه عرضًا» (sub-step 16m; prototype lines 598–603): the drawn 12 px box at
   the left of its word, the whole line its target. Unticked, a #8D8D8D edge (3.32:1
   on white), #525252 on a selected row (Director N451, B5: 6.78:1); ticked, navy
   with a white tick. The word navy (16.12:1). */
.m1-off-ask {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  margin-top: 4px;
  line-height: 1.3;
  white-space: nowrap;
  cursor: pointer;
}

.m1-off-ask[hidden] {
  display: none;
}

.m1-off-ask-input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.m1-off-ask-input:disabled {
  cursor: default;
}

.m1-off-ask-box {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 12px;
  width: 12px;
  height: 12px;
  box-sizing: border-box;
  border: 1px solid var(--line-control);
  border-radius: 3px;
  background: var(--white);
}

.m1-row-sel .m1-off-ask-box {
  border-color: var(--ink-2);
}

.m1-off-ask-on .m1-off-ask-box,
.m1-row-sel .m1-off-ask-on .m1-off-ask-box {
  border-color: var(--navy);
  background: var(--navy);
}

.m1-off-ask-on .m1-off-ask-box::after {
  content: '';
  width: 6px;
  height: 3px;
  border-left: 1.5px solid var(--white);
  border-bottom: 1.5px solid var(--white);
  transform: rotate(-45deg) translate(0.5px, -0.5px);
}

.m1-off-ask-input:focus-visible + .m1-off-ask-box {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

.m1-off-ask-word {
  font-size: 10.5px;
  font-weight: 600;
  color: var(--navy);
}

.m1-prix-trace {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  margin-top: 3px;
  font-size: 10.5px;
  font-weight: 400;
  line-height: 1.3;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* #6F6F6F, not the prototype's #8C8C8C (N419). */
.m1-prix-was {
  color: var(--text-3);
  text-decoration: line-through;
}

.m1-prix-delta {
  font-weight: 600;
}

.m1-prix-up {
  color: #0A7A5A;
}

.m1-prix-down {
  color: #A2191F;
}

.m1-ref,
.m1-marque,
.m1-pays {
  position: relative;
  min-width: 0;
  font-size: 12.5px;
  font-weight: 400;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.m1-ref {
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}

.m1-marque {
  color: var(--ink);
}

.m1-pays {
  color: var(--ink-2);
}

.m1-des {
  position: relative;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.m1-des-text {
  font-size: 13px;
  font-weight: 400;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.m1-prix {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 3px;
  line-height: 1.2;
}

.m1-prix-n {
  font-size: 14px;
  font-weight: 400;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

/* His live offer in read mode (sub-step 16j; prototype lines 658–666, 4554): the
   price green and 600 (5.32:1 on white, 4.84:1 on the hover grey), the original
   struck in red (5.00:1, 4.55:1), the discount on orange (6.84:1) and its last day
   (7.81:1, 7.10:1). */
.m1-prix-off .m1-prix-n {
  font-weight: 600;
  color: #0A7A5A;
}

.m1-off-line {
  display: flex;
  align-items: center;
  gap: 6px;
  direction: ltr;
  white-space: nowrap;
}

.m1-off-was {
  font-size: 11px;
  font-weight: 400;
  color: #DA1E28;
  text-decoration: line-through;
  font-variant-numeric: tabular-nums;
}

.m1-off-pct {
  display: inline-flex;
  align-items: center;
  height: 16px;
  padding: 0 5px;
  border-radius: 4px;
  background: var(--orange);
  font-size: 10.5px;
  font-weight: 600;
  color: var(--navy);
}

.m1-off-until {
  font-size: 10.5px;
  font-weight: 400;
  color: var(--ink-2);
  white-space: nowrap;
}

.m1-cond {
  position: relative;
  min-width: 0;
}

.m1-cond-in {
  display: flex;
  align-items: center;
  gap: 7px;
}

/* The condition is a shape, never a colour on the text (contract invariant 7). */
.m1-shape {
  width: 9px;
  height: 9px;
  flex: 0 0 9px;
  box-sizing: border-box;
  border-radius: 9999px;
}

.m1-shape-avail {
  background: #0A7A5A;
}

.m1-shape-unsure {
  border: 2px solid #8A6A12;
  background: var(--white);
}

.m1-shape-out {
  height: 3px;
  border-radius: 2px;
  background: #DA1E28;
}

.m1-cond-label {
  font-size: 12.5px;
  font-weight: 400;
  color: var(--ink);
}

/* Edit mode: the condition is a button, the shape and its word as in read mode
   (prototype line 677, cursor pointer in edit mode). */
.m1-cond-btn {
  display: flex;
  align-items: center;
  gap: 7px;
  /* The whole cell, as the prototype's flex span: the word sits at its right. */
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: var(--ink);
  text-align: start;
  cursor: pointer;
}

/* «غير مؤكّد» clicked: «متوفّرة» · «غير متوفّرة» over the cell, its row's height
   unchanged and its neighbour not pushed (prototype lines 670–675; contract
   M1.row.status.resolve). */
.m1-resolve {
  position: absolute;
  top: 50%;
  right: -53px;
  z-index: 25;
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  transform: translateY(-50%);
}

.m1-resolve-yes,
.m1-resolve-no {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  height: 32px;
  padding: 0 12px;
  border-radius: 6px;
  font: inherit;
  font-size: 12.5px;
  cursor: pointer;
}

.m1-resolve-yes {
  border: 1px solid #0A7A5A;
  background: #0A7A5A;
  font-weight: 600;
  color: var(--white);
}

/* Hovered, it keeps the prototype's own #0A7A5A: white 12.5px text at 5.32:1.
   The prototype's hover #0B8A66 gives 4.34:1, under WCAG AA (Director ruling
   N441: accessibility over the prototype's hover shade). */
.m1-resolve-yes:hover {
  border-color: #0A7A5A;
  background: #0A7A5A;
}

.m1-resolve-no {
  border: 1px solid var(--line-strong);
  background: var(--white);
  font-weight: 400;
  color: var(--ink);
}

.m1-resolve-no:hover {
  border-color: var(--line-control);
  background: var(--gray-1);
}

.m1-date {
  position: relative;
  font-size: 12px;
  font-weight: 400;
  color: var(--ink-2);
  text-align: end;
  font-variant-numeric: tabular-nums;
}

/* A row marked for deletion (prototype lines 536, 690–698): its five fields and
   its condition fade to 0.45 and are inert while it is marked; «ستُحذف» · «تراجَع»
   in the last cell do not fade (the Director's answer 3 under N447). On a
   selected row «ستُحذف» is the prototype's darker red #A2191F: #DA1E28 gives
   4.34:1 on #EBEFF7, #A2191F 6.76:1. */
.m1-row-del .m1-input,
.m1-row-del .m1-cond-btn {
  opacity: 0.45;
}

.m1-cond-btn:disabled {
  cursor: default;
}

.m1-del {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
}

.m1-del-mark {
  font-size: 11px;
  font-weight: 600;
  color: #DA1E28;
}

.m1-row-sel .m1-del-mark {
  color: #A2191F;
}

.m1-del-undo {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 11px;
  font-weight: 400;
  color: var(--navy);
  text-decoration: underline;
  cursor: pointer;
}

/* The bar (prototype lines 487–497): under the toolbar while a row is selected,
   as wide as the table card. */
.m1-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin: 8px 16px 0;
  padding: 0 16px;
  min-height: 44px;
  background: var(--navy);
  border-radius: 8px;
}

.m1-bar[hidden],
.m1-bar-hint[hidden] {
  display: none;
}

.m1-bar-count {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--white);
  white-space: nowrap;
}

.m1-bar-rule {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 11.5px;
  font-weight: 400;
  color: #A9B8D6;
  line-height: 1.7;
}

.m1-bar-hint {
  flex: 0 0 auto;
  font-size: 12px;
  font-weight: 400;
  color: #A9B8D6;
  white-space: nowrap;
}

/* The bar's «أنهِ العروض» (sub-step 16l; prototype line 492): white on navy
   (16.12:1; 14.40:1 under the pointer), a #6E80A6 edge (4.07:1), its count on
   orange. */
.m1-bar-end {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  box-sizing: content-box;
  height: 32px;
  padding: 0 12px;
  border: 1px solid var(--navy-line);
  border-radius: 8px;
  background: none;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  color: var(--white);
  white-space: nowrap;
  cursor: pointer;
}

.m1-bar-end:hover {
  background: var(--navy-hover);
}

.m1-bar-end[hidden] {
  display: none;
}

.m1-bar-del {
  display: inline-flex;
  align-items: center;
  box-sizing: content-box;
  height: 32px;
  padding: 0 12px;
  border: 1px solid #FF8A8A;
  border-radius: 8px;
  background: none;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  color: #FF8A8A;
  white-space: nowrap;
  cursor: pointer;
}

.m1-bar-del:hover {
  border-color: #DA1E28;
  background: #DA1E28;
  color: var(--white);
}

.m1-bar-clear {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 12.5px;
  font-weight: 400;
  color: var(--on-navy);
  white-space: nowrap;
  cursor: pointer;
}

.m1-bar-clear:hover {
  color: var(--white);
}

/* The price popover (prototype lines 604–630): navy, 300 px wide, beside the price
   field that has the focus, above everything. Its shadow is the prototype's
   (the default under Q19). Its amount's placeholder is #A9B8D6 (7.18:1) and its
   frame turns #DCE4F5 when the amount has the focus (the default under Q18). */
.m1-px {
  position: fixed;
  z-index: 200;
  /* Not the price cell's 1.2: the prototype's popover sits outside it. */
  line-height: normal;
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 300px;
  box-sizing: border-box;
  padding: 10px 11px;
  background: var(--navy);
  border-radius: 8px;
  box-shadow: 0 8px 22px rgba(13, 32, 66, 0.28);
}

.m1-px-head,
.m1-px-row {
  display: flex;
  align-items: center;
}

.m1-px-head {
  gap: 8px;
}

.m1-px-row {
  gap: 6px;
}

.m1-px-scope {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 11.5px;
  font-weight: 400;
  color: #A9B8D6;
  white-space: nowrap;
}

.m1-px-x {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 14px;
  line-height: 1;
  color: #A9B8D6;
  cursor: pointer;
}

.m1-px-x:hover {
  color: var(--white);
}

.m1-px-frame {
  flex: 1 1 auto;
  display: inline-flex;
  align-items: center;
  height: 32px;
  border: 1px solid var(--navy-line);
  border-radius: 8px;
  background: #16294F;
  overflow: hidden;
}

.m1-px-frame:focus-within {
  border-color: #DCE4F5;
}

.m1-px-amount {
  width: 100%;
  min-width: 0;
  height: 30px;
  box-sizing: border-box;
  border: 0;
  background: transparent;
  padding: 0 8px;
  text-align: center;
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--white);
  direction: ltr;
  outline: none;
}

.m1-px-amount::placeholder {
  color: #A9B8D6;
  opacity: 1;
}

.m1-px-amount:focus-visible {
  outline: none;
}

.m1-px-units {
  flex: 0 0 auto;
  align-self: stretch;
  display: inline-flex;
  border-inline-start: 1px solid var(--navy-line);
}

.m1-px-unit {
  display: inline-flex;
  align-items: center;
  padding: 0 9px;
  border: 0;
  border-radius: 0;
  background: none;
  font: inherit;
  font-size: 12px;
  font-weight: 400;
  color: #A9B8D6;
  cursor: pointer;
}

.m1-px-unit:hover {
  color: var(--white);
}

.m1-px-unit[aria-pressed='true'] {
  background: #DCE4F5;
  font-weight: 600;
  color: var(--navy);
  cursor: default;
}

.m1-px-unit:focus-visible {
  outline-offset: -2px;
}

.m1-px-down,
.m1-px-up {
  flex: 1 1 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: content-box;
  height: 32px;
  padding: 0;
  border-radius: 8px;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}

.m1-px-down {
  border: 0;
  background: var(--orange);
  color: var(--navy);
}

.m1-px-down:hover {
  background: #FFA24C;
}

.m1-px-up {
  border: 1px solid var(--navy-line);
  background: none;
  color: var(--white);
}

.m1-px-up:hover {
  background: #16294F;
}

/* No amount yet, or one out of range: the prototype's look for «خفّض» and «ارفع»
   that cannot act (lines 626, 628). Inactive, so exempt from WCAG 1.4.3. */
.m1-px-down:disabled {
  background: #2C4070;
  font-weight: 400;
  color: #8D9AB5;
  cursor: default;
}

.m1-px-up:disabled {
  border-color: #2C4070;
  background: none;
  font-weight: 400;
  color: #8D9AB5;
  cursor: default;
}

/* The popover's offers block (sub-step 16n; prototype lines 631–652), under a
   #2C4070 rule (decorative): «اعرضها كلّها عرضًا» white (16.12:1 on navy), its count
   #A9B8D6 (8.07:1); the drawn 14 px box #6E80A6 (4.07:1), ticked orange with a navy
   tick (6.84:1). With only some offers asked the checkbox is indeterminate and the
   box shows it (Director N473): orange, with a navy dash of the tick's weight
   (6.84:1 against the orange). The real checkbox lies over the whole line. */
.m1-px-offer {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  padding-top: 8px;
  border-top: 1px solid #2C4070;
  cursor: pointer;
}

.m1-px-offer[hidden],
.m1-px-durs[hidden],
.m1-px-days-row[hidden],
.m1-px-dur-note[hidden] {
  display: none;
}

.m1-px-offer-input,
.m1-px-dur-input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.m1-px-offer-box {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 14px;
  width: 14px;
  height: 14px;
  box-sizing: border-box;
  border: 1px solid var(--navy-line);
  border-radius: 3px;
  background: transparent;
}

.m1-px-offer-on .m1-px-offer-box {
  border-color: var(--orange);
  background: var(--orange);
}

.m1-px-offer-on .m1-px-offer-box::after {
  content: '';
  width: 7px;
  height: 3.5px;
  border-left: 1.5px solid var(--navy);
  border-bottom: 1.5px solid var(--navy);
  transform: rotate(-45deg) translate(0.5px, -0.5px);
}

.m1-px-offer-some .m1-px-offer-box {
  border-color: var(--orange);
  background: var(--orange);
}

.m1-px-offer-some .m1-px-offer-box::after {
  content: '';
  width: 7px;
  height: 0;
  border-bottom: 1.5px solid var(--navy);
}

/* The real checkbox and radios are see-through: the ring is drawn on the box and
   round the pill, not on them. */
.m1-px-offer-input:focus-visible,
.m1-px-dur-input:focus-visible {
  outline: none;
}

.m1-px-offer-input:focus-visible + .m1-px-offer-box {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

.m1-px-offer-word {
  flex: 1 1 auto;
  font-size: 12px;
  font-weight: 600;
  color: var(--white);
  white-space: nowrap;
}

.m1-px-offer-n,
.m1-px-dur-term,
.m1-px-days-word {
  font-size: 11px;
  font-weight: 400;
  color: #A9B8D6;
  white-space: nowrap;
}

/* «المدّة» and its five lengths, equal pills 28 px tall (the prototype's 26 and its
   border): off, a #6E80A6 edge (4.07:1) and white words; on, #DCE4F5 with navy
   words (12.64:1). The keyboard's ring goes round the pill (4.20:1 on navy). */
.m1-px-durs {
  display: flex;
  align-items: center;
  gap: 4px;
}

.m1-px-dur-term {
  margin-inline-end: 2px;
}

.m1-px-dur {
  position: relative;
  flex: 1 1 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 28px;
  box-sizing: border-box;
  border: 1px solid var(--navy-line);
  border-radius: 6px;
  background: transparent;
  font-size: 11px;
  font-weight: 400;
  color: var(--white);
  white-space: nowrap;
  cursor: pointer;
}

.m1-px-dur.m1-px-dur-on {
  border-color: #DCE4F5;
  background: #DCE4F5;
  font-weight: 600;
  color: var(--navy);
}

.m1-px-dur:has(> .m1-px-dur-input:focus-visible) {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

/* «مخصّصة»'s days: the field 52 × 26 on #16294F (white 14.34:1), its edge #6E80A6,
   #DCE4F5 while it has the focus (12.64:1 on navy), as the amount's frame. */
.m1-px-days-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

.m1-px-days {
  width: 52px;
  height: 26px;
  box-sizing: border-box;
  border: 1px solid var(--navy-line);
  border-radius: 6px;
  background: #16294F;
  padding: 0 6px;
  text-align: center;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--white);
  direction: ltr;
  outline: none;
}

.m1-px-days:focus {
  border-color: #DCE4F5;
}

.m1-px-days:focus-visible {
  outline: none;
}

/* The note: when the offers end, or that «دائم» stays (8.07:1). */
.m1-px-dur-note {
  font-size: 11px;
  font-weight: 400;
  line-height: 1.6;
  color: #A9B8D6;
}

/* What the search found. */
.m1-hit {
  background: #FFE9A8;
  border-radius: 2px;
  color: inherit;
}

/* Nothing left after the search or the filters. */
.m1-none {
  padding: 44px 16px;
}

.m1-none-title {
  margin: 0;
  font-size: 24px;
  font-weight: 300;
  color: var(--ink);
}

.m1-none-body {
  margin: 6px 0 0;
  font-size: 13px;
  font-weight: 400;
  color: var(--ink-2);
}

.m1-none-clear {
  display: inline-flex;
  align-items: center;
  box-sizing: content-box;
  height: 38px;
  margin-top: 12px;
  padding: 0 18px;
  border: 1px solid var(--line-control);
  border-radius: 8px;
  background: var(--white);
  font: inherit;
  font-size: 12.5px;
  font-weight: 400;
  color: var(--ink);
  cursor: pointer;
}

.m1-none-clear:hover {
  background: var(--gray-1);
}

/* ── M2F رفع ملفّ: the sheet, full screen (13/10 prototype lines 753–860) ───── */

.m2 {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  background: var(--white);
}

/* No sheet on show (only behind the gate, after «ملفٌّ آخر»). */
.m2-none {
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
}

.m2-none-box {
  width: 440px;
  max-width: 100%;
  text-align: center;
}

.m2-none-title {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
}

.m2-none-body {
  margin: 6px 0 0;
  font-size: 12.5px;
  font-weight: 400;
  color: var(--ink-2);
  line-height: 1.75;
  text-wrap: pretty;
}

.m2-none-upload {
  display: inline-flex;
  align-items: center;
  height: 44px;
  margin-top: 14px;
  padding: 0 24px;
  border: 0;
  border-radius: 8px;
  background: var(--orange);
  font: inherit;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--navy);
  cursor: pointer;
}

.m2-none-upload:hover {
  background: #FFA24C;
}

/* The file bar: name, the edited chip, «ملفٌّ آخر», and «انشر» or its confirmation. */
.m2-file {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 16px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
}

.m2-name {
  min-width: 0;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink);
  direction: ltr;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.m2-spacer {
  flex: 1 1 auto;
}

.m2-file-end {
  display: contents;
}

.m2-edited {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  height: 30px;
  padding: 0 11px;
  border: 1px solid var(--orange);
  border-radius: 8px;
  background: #FFF3E6;
  white-space: nowrap;
}

.m2-edited-word {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--ink);
}

.m2-edited-reset,
.m2-other,
.m2-case-swap {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-weight: 400;
  color: var(--navy);
  text-decoration: underline;
  cursor: pointer;
  white-space: nowrap;
}

.m2-edited-reset {
  font-size: 11.5px;
}

.m2-other,
.m2-case-swap {
  font-size: 12.5px;
}

.m2-publish {
  display: inline-flex;
  align-items: center;
  height: 40px;
  padding: 0 22px;
  border: 0;
  border-radius: 8px;
  background: var(--orange);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--navy);
  cursor: pointer;
  white-space: nowrap;
}

.m2-publish:hover,
.m2-ask-yes:hover {
  background: #FFA24C;
}

.m2-ask {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  height: 40px;
  padding: 0 14px;
  border-radius: 8px;
  background: var(--navy);
  white-space: nowrap;
}

.m2-ask-head {
  font-size: 12.5px;
  font-weight: 400;
  color: var(--white);
}

/* M2: the counts under the sentence (owner copy, N442). The bar grows to hold
   them; the counts are #C6C6C6 on navy (9.4:1); the parts that leave are white
   on #DA1E28 (5.0:1), the red of M1's «تترك … بلا حفظ؟». */
.m2-ask-counted {
  height: auto;
  min-height: 40px;
  box-sizing: border-box;
  padding: 6px 14px;
}

.m2-ask-say {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
}

.m2-ask-counts {
  font-size: 11.5px;
  font-weight: 400;
  color: var(--on-navy);
}

.m2-ask-out {
  padding: 1px 8px;
  border-radius: 4px;
  background: #DA1E28;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--white);
}

.m2-ask-yes {
  display: inline-flex;
  align-items: center;
  height: 30px;
  padding: 0 16px;
  border: 0;
  border-radius: 6px;
  background: var(--orange);
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--navy);
  cursor: pointer;
}

.m2-ask-back {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 12.5px;
  font-weight: 400;
  color: var(--on-navy);
  text-decoration: underline;
  cursor: pointer;
}

.m2-ask-back:hover {
  color: var(--white);
}

.m2-ask :focus-visible {
  outline-color: var(--white);
}

.m2-publish-none {
  display: inline-flex;
  align-items: center;
  height: 40px;
  padding: 0 22px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: var(--white);
  font-size: 13px;
  font-weight: 400;
  color: var(--ink-2);
  white-space: nowrap;
}

/* The case bar: إضافة or استبدال. */
.m2-case {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 16px;
  background: var(--gray-1);
  border-bottom: 1px solid var(--line);
}

.m2-case-chip {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  height: 26px;
  padding: 0 10px;
  border-radius: 6px;
  background: var(--navy);
  font-size: 11.5px;
  font-weight: 600;
  color: var(--white);
}

.m2-case-line {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 12.5px;
  font-weight: 400;
  color: var(--ink);
}

/* The flags. */
.m2-flags {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 22px;
  padding: 10px 16px;
  background: var(--gray-1);
  border-bottom: 1px solid var(--line);
}

.m2-flags[hidden] {
  display: none;
}

.m2-flag {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
}

.m2-flag-dash {
  width: 11px;
  height: 3px;
  flex: 0 0 11px;
  border-radius: 2px;
  background: #DA1E28;
}

.m2-flag-ring {
  width: 10px;
  height: 10px;
  flex: 0 0 10px;
  box-sizing: border-box;
  border: 2px solid #B28600;
  border-radius: 9999px;
  background: var(--white);
}

.m2-flag-warn,
.m2-flag-text {
  font-size: 12px;
  color: var(--ink);
  line-height: 1.7;
}

.m2-flag-warn,
.m2-flag-strong {
  font-weight: 600;
}

.m2-flag-text {
  font-weight: 400;
}

/* The sheet. */
.m2-card {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  margin: 12px 16px 58px;
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
}

.m2-scroll {
  flex: 1;
  min-height: 0;
  overflow: auto;
  direction: ltr;
}

.m2-table {
  min-width: 1120px;
}

.m2-head,
.m2-row {
  display: grid;
  grid-template-columns: 58px 150px minmax(0, 2fr) 120px 110px minmax(0, 124px);
  align-items: center;
  gap: 8px;
}

.m2-head {
  padding: 0 14px;
  height: 40px;
  background: var(--navy);
  position: sticky;
  top: 0;
  z-index: 2;
}

.m2-head-n {
  font-size: 11.5px;
  font-weight: 600;
  color: #A9B8D6;
}

.m2-head-cell {
  font-size: 12px;
  font-weight: 600;
  color: var(--white);
}

.m2-head-end {
  text-align: end;
}

.m2-row {
  position: relative;
  padding: 0 11px 0 14px;
  min-height: 46px;
  border-bottom: 1px solid var(--line);
  border-left: 3px solid transparent;
  background: var(--white);
}

.m2-row-bad {
  border-left-color: #DA1E28;
  background: #FFF8F8;
}

.m2-row:hover {
  background: var(--gray-1);
}

.m2-n {
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  flex-wrap: wrap;
}

/* #6F6F6F, not the prototype's #8C8C8C (N419 ruling 2). */
.m2-n-num {
  font-size: 11.5px;
  font-weight: 400;
  color: var(--text-3);
  font-variant-numeric: tabular-nums;
  direction: ltr;
}

.m2-n-bad {
  width: 9px;
  height: 3px;
  flex: 0 0 9px;
  border-radius: 2px;
  background: #DA1E28;
}

/* The dark warning #8A6A12, not the prototype's #B28600 (3.3:1 on white; N419). */
.m2-n-dup {
  font-size: 10px;
  font-weight: 600;
  color: #8A6A12;
  white-space: nowrap;
}

.m2-cell {
  min-width: 0;
  display: block;
}

.m2-input {
  display: block;
  width: 100%;
  box-sizing: border-box;
  height: 32px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--white);
  padding: 0 8px;
  font: inherit;
  font-size: 12.5px;
  color: var(--ink);
  direction: ltr;
}

.m2-input-des {
  font-size: 13px;
}

.m2-input-prixRaw {
  font-size: 13.5px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.m2-input-ref {
  font-variant-numeric: tabular-nums;
}

.m2-input-soft {
  border-color: #B28600;
}

.m2-input-edited {
  border-color: var(--orange);
  background: #FFF3E6;
}

.m2-input-hard {
  border-color: #DA1E28;
  background: #FFF0F0;
}

/* The prototype marks the focused field by a navy border, not an outline. */
.m2-input:focus {
  border-color: var(--navy);
}

.m2-input:focus-visible {
  outline: none;
}

/* ── M2F: the gate «ارفع ملفّك الأوّل», a dialog (lines 864–958) ──────────── */

.m2-gate {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 28px;
}

.m2-gate-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(13, 32, 66, 0.55);
}

.m2-gate-box {
  position: relative;
  width: 860px;
  max-width: 100%;
  max-height: 100%;
  display: flex;
  flex-direction: column;
  background: var(--white);
  border-radius: 14px;
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-width: none;
}

.m2-gate-box:focus-visible {
  outline: none;
}

.m2-gate-head {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--line);
}

.m2-gate-title {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
}

.m2-gate-close {
  padding: 0 4px;
  border: 0;
  background: none;
  font: inherit;
  font-size: 18px;
  font-weight: 400;
  line-height: 1;
  color: var(--ink-2);
  cursor: pointer;
}

.m2-gate-close:hover {
  color: var(--ink);
}

.m2-gate-body {
  flex: 0 0 auto;
  padding: 20px;
}

/* M2: the case before the file (prototype lines 873–909; contract M2.gate). */
.m2-gate-question {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
}

.m2-modes {
  display: flex;
  align-items: stretch;
  gap: 10px;
  margin-top: 10px;
}

.m2-mode {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 11px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 13px 16px;
  overflow: hidden;
  cursor: pointer;
}

.m2-mode:hover {
  border-color: var(--line-control);
  background: var(--gray-1);
}

.m2-mode-on,
.m2-mode-on:hover {
  border-color: var(--orange);
  background: #FFF6EC;
}

/* The chosen card's orange edge, on its start side. */
.m2-mode-on::before {
  content: '';
  position: absolute;
  inset-inline-start: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--orange);
}

.m2-mode:has(.m2-mode-input:focus-visible) {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

/* The real radio: present for the keyboard and screen readers, drawn by the ring. */
.m2-mode-input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  opacity: 0;
  pointer-events: none;
}

.m2-mode-ring {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 17px;
  height: 17px;
  flex: 0 0 17px;
  box-sizing: border-box;
  border: 1.5px solid var(--line-control);
  border-radius: 9999px;
  background: var(--white);
}

.m2-mode-dot {
  display: none;
  width: 8px;
  height: 8px;
  border-radius: 9999px;
  background: var(--orange);
}

.m2-mode-on .m2-mode-ring {
  border: 2px solid var(--orange);
  background: none;
}

.m2-mode-on .m2-mode-dot {
  display: block;
}

.m2-mode-text {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.m2-mode-title {
  font-size: 13.5px;
  font-weight: 400;
  color: var(--ink);
}

.m2-mode-on .m2-mode-title {
  font-weight: 600;
}

.m2-mode-line {
  font-size: 12px;
  font-weight: 400;
  color: var(--ink-2);
  line-height: 1.6;
  text-wrap: pretty;
}

.m2-gate-split {
  margin-top: 20px;
  border-top: 1px solid var(--line);
}

.m2-gate-cols {
  padding-top: 16px;
}

.m2-gate-free {
  margin: 0;
  font-size: 11.5px;
  font-weight: 400;
  color: var(--ink-2);
  line-height: 1.7;
  text-wrap: pretty;
}

.m2-gate-copyrow {
  display: flex;
  justify-content: flex-end;
  margin-top: 10px;
}

.m2-gate-copyall {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  color: var(--navy);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  white-space: nowrap;
}

/* Hovered, its words stay navy, 16.12:1 on white; the orange is its underline's alone, since
   orange words are 2.36:1 (Director N599: every state of a copy button 4.5:1 for its text). */
.m2-gate-copyall:hover {
  text-decoration-color: var(--orange);
}

.m2-gate-copied {
  font-size: 12px;
  font-weight: 600;
  color: #0A7A5A;
  white-space: nowrap;
}

/* A refused copy, said once in the gate's polite line, unseen (N597). */
.m2-gate-heard {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.m2-gate-heads {
  margin-top: 8px;
  direction: ltr;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.m2-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 12px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--gray-1);
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--navy);
  white-space: nowrap;
  cursor: pointer;
}

.m2-chip:hover {
  background: #FFE2C4;
  border-color: var(--orange);
}

.m2-chip-icon {
  position: relative;
  width: 11px;
  height: 12px;
  flex: 0 0 11px;
}

.m2-chip-back,
.m2-chip-front {
  position: absolute;
  width: 7px;
  height: 9px;
  border-radius: 2px;
}

.m2-chip-back {
  left: 0;
  top: 0;
  border: 1.2px solid #8DA0C6;
}

.m2-chip-front {
  left: 3px;
  top: 3px;
  border: 1.2px solid #4A5F8C;
  background: var(--white);
}

.m2-tick-short,
.m2-tick-long {
  position: absolute;
  height: 1.6px;
  background: #0A7A5A;
  transform-origin: left center;
}

.m2-tick-short {
  left: 1px;
  top: 4px;
  width: 4px;
  transform: rotate(45deg);
}

.m2-tick-long {
  left: 3.4px;
  top: 7.4px;
  width: 7px;
  transform: rotate(-52deg);
}

.m2-gate-rule {
  margin: 11px 0 0;
  font-size: 11.5px;
  font-weight: 500;
  color: var(--ink);
  line-height: 1.7;
}

.m2-gate-drop {
  position: relative;
  padding: 16px 20px 18px;
  border-top: 1px solid var(--line);
  background: var(--white);
}

/* The zone's frame is drawn behind it, so the dragged state moves nothing. */
.m2-gate-zone {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
  padding: 18px 20px;
  border-radius: 8px;
}

.m2-gate-zone::before {
  content: '';
  position: absolute;
  inset: 0;
  border: 1px dashed var(--line-strong);
  border-radius: 8px;
  background: var(--gray-1);
}

.m2-gate-zone-on::before {
  border: 2px solid var(--orange);
  background: #FFE2C4;
}

/* The gate while the file is read (handoff/2026-10-13/m2-reading/, N437): the
   file's name, «جارٍ قراءة ملفّك…» and an indeterminate bar on the zone's bottom
   edge, inside its frame. The zone keeps its height: 20 + 4 + 20 = 44 px, the
   button's height. Its rounded corners clip the bar, as on the handoff. */
.m2-gate-zone-reading {
  overflow: hidden;
}

.m2-gate-reading {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-width: 0;
  max-width: 100%;
}

.m2-gate-file {
  max-width: 100%;
  overflow: hidden;
  font-size: 13.5px;
  font-weight: 600;
  line-height: 20px;
  color: var(--ink);
  white-space: nowrap;
  text-overflow: ellipsis;
}

.m2-gate-reading-line {
  font-size: 12px;
  font-weight: 400;
  line-height: 20px;
  color: var(--ink-2);
}

.m2-gate-bar {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 3px;
  overflow: hidden;
  background: #FFE2C4;
}

/* The segment travels right to left (inline start to end in RTL), 1.8 s. */
.m2-gate-bar-run {
  position: absolute;
  top: 0;
  bottom: 0;
  inset-inline-start: -32%;
  width: 32%;
  border-radius: 2px;
  background: var(--orange);
  animation: mvRead 1.8s ease-in-out infinite;
}

@keyframes mvRead {
  0% { inset-inline-start: -32%; }
  100% { inset-inline-start: 100%; }
}

/* Reduced motion: the segment stands still, centred. */
@media (prefers-reduced-motion: reduce) {
  .m2-gate-bar-run {
    animation: none;
    inset-inline-start: 34%;
  }
}

.m2-gate-drop-text {
  position: relative;
  font-size: 13.5px;
  font-weight: 400;
  color: var(--ink);
  white-space: nowrap;
}

.m2-gate-divider {
  position: relative;
  width: 1px;
  height: 22px;
  background: var(--line-strong);
}

.m2-gate-pick {
  position: relative;
  display: inline-flex;
  align-items: center;
  height: 44px;
  padding: 0 24px;
  border: 0;
  border-radius: 8px;
  background: var(--orange);
  font: inherit;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--navy);
  cursor: pointer;
  white-space: nowrap;
}

.m2-gate-pick:hover {
  background: #FFA24C;
}

/* M2 with no case chosen: grey, unavailable (prototype line 944). Its text is #525252 on
   #E0E0E0, 5.92:1, as M8's grey save since step 22e (Director N821), not the prototype's #8C8C8C. */
.m2-gate-pick-none,
.m2-gate-pick-none:hover {
  background: var(--line);
  font-weight: 400;
  color: var(--ink-2);
}

.m2-gate-note {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 10px;
  min-height: 17px;
}

.m2-gate-bad {
  font-size: 11.5px;
  font-weight: 500;
  color: #DA1E28;
  text-align: center;
}

.m2-gate-excel {
  font-size: 11.5px;
  font-weight: 400;
  color: var(--ink-2);
  white-space: nowrap;
}

/* ── M3 «من يرى فهرسي» (sub-step 17; 13/10 prototype lines 961–1145) ────────────
   A full-screen panel over M1 and its bar, as the prototype draws it; the toast
   (z-index 90) stays above it. Every size below is the prototype's. */

.m3 {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: flex;
  flex-direction: column;
  background: var(--white);
}

.m3-head {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 0 0 auto;
  height: 48px;
  padding: 0 16px;
  background: var(--navy);
}

.m3-title {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--white);
}

/* «عُد إلى الفهرس»: 30 px inside its edge (32 in all), white on navy, 16.12:1. */
.m3-back {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  box-sizing: content-box;
  height: 30px;
  padding: 0 14px;
  border: 1px solid var(--navy-line);
  border-radius: 8px;
  background: none;
  font: inherit;
  font-size: 12px;
  font-weight: 400;
  color: var(--white);
  white-space: nowrap;
  cursor: pointer;
}

.m3-back:hover {
  background: var(--navy-hover);
}

.m3-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}

.m3-body {
  max-width: 900px;
  margin: 0 auto;
  padding: 18px 16px 64px;
}

/* The two modes (lines 971–978): «كلّ البائعين» then «من آذن لهم فقط». */
.m3-modes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 10px;
}

.m3-mode {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  min-width: 0;
  padding: 15px 17px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: var(--white);
  cursor: pointer;
}

.m3-mode:hover {
  border-color: var(--navy);
  background: var(--gray-1);
}

/* The current mode: framed in navy on grey, its name in 600. */
.m3-mode-on,
.m3-mode-on:hover {
  padding: 14px 16px;
  border: 2px solid var(--navy);
  background: var(--gray-1);
  cursor: default;
}

.m3-mode:has(.m3-mode-input:focus-visible) {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

/* The real radios: present for the keyboard and screen readers, drawn by the
   ring or by their option, which carry the focus ring. */
.m3-mode-input,
.m3-ref-input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  opacity: 0;
  pointer-events: none;
  outline: none;
}

.m3-mode-ring {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 17px;
  height: 17px;
  flex: 0 0 17px;
  box-sizing: border-box;
  margin-top: 2px;
  border: 1.5px solid var(--line-control);
  border-radius: 9999px;
  background: var(--white);
}

.m3-mode-dot {
  display: none;
  width: 8px;
  height: 8px;
  border-radius: 9999px;
  background: var(--navy);
}

.m3-mode-on .m3-mode-ring {
  border: 2px solid var(--navy);
  background: none;
}

.m3-mode-on .m3-mode-dot {
  display: block;
}

.m3-mode-text {
  min-width: 0;
}

.m3-mode-name {
  display: block;
  font-size: 14px;
  font-weight: 400;
  color: var(--ink);
}

.m3-mode-on .m3-mode-name {
  font-weight: 600;
}

.m3-mode-line {
  display: block;
  margin-top: 3px;
  font-size: 12px;
  font-weight: 400;
  color: var(--ink-2);
  line-height: 1.6;
  text-wrap: pretty;
}

/* The question after choosing the other mode (17b; lines 979–987): its line,
   «نعم، …» navy on orange (6.84:1) and «تراجَع» (#525252, 7.81:1). */
.m3-ask {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 10px;
  padding: 12px 14px;
  border: 1px solid var(--navy);
  border-radius: 8px;
  background: var(--white);
}

.m3-ask-line {
  flex: 1 1 220px;
  min-width: 0;
  font-size: 12.5px;
  font-weight: 400;
  color: var(--ink);
  line-height: 1.7;
  text-wrap: pretty;
}

.m3-ask-acts {
  display: flex;
  align-items: center;
  gap: 14px;
  flex: 0 0 auto;
}

.m3-ask-yes {
  display: inline-flex;
  align-items: center;
  height: 34px;
  padding: 0 18px;
  border: 0;
  border-radius: 8px;
  background: var(--orange);
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--navy);
  white-space: nowrap;
  cursor: pointer;
}

.m3-ask-yes:hover {
  background: #FFA24C;
}

.m3-ask-no {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 12.5px;
  font-weight: 400;
  color: var(--ink-2);
  text-decoration: underline;
  white-space: nowrap;
  cursor: pointer;
}

.m3-ask-no:hover {
  color: var(--ink);
}

/* In mode «كلّ البائعين» blocking follows the cards, or their question. */
.m3-ask + .m3-block {
  margin-top: 26px;
}

/* The reference for sellers without permission (lines 988–1009). */
.m3-ref {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 14px;
  padding: 12px 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.m3-ref-name {
  flex: 0 0 auto;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
}

.m3-ref-note {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 11.5px;
  font-weight: 400;
  color: var(--ink-2);
  line-height: 1.6;
  text-wrap: pretty;
}

.m3-ref-pick {
  display: inline-flex;
  align-items: stretch;
  flex: 0 0 auto;
  margin-inline-start: auto;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  overflow: hidden;
}

/* The two options clip their corners, so the ring goes round the pair; only the
   chosen one takes the focus. */
.m3-ref-pick:has(.m3-ref-input:focus-visible) {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

.m3-ref-opt {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  padding: 0 18px;
  background: var(--white);
  font-size: 12.5px;
  font-weight: 400;
  color: var(--ink-2);
  white-space: nowrap;
  cursor: pointer;
}

.m3-ref-opt:hover {
  background: var(--gray-1);
  color: var(--ink);
}

.m3-ref-opt-on,
.m3-ref-opt-on:hover {
  background: var(--navy);
  font-weight: 600;
  color: var(--white);
  cursor: default;
}

.m3-ref-bar {
  width: 1px;
  flex: 0 0 1px;
  background: var(--line-strong);
}

/* The requests (lines 1015–1025): the card, its orange count and «←». */
.m3-reqs {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  margin: 26px 0 18px;
  padding: 14px 16px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: var(--white);
  font: inherit;
  text-align: start;
  cursor: pointer;
}

.m3-reqs:hover {
  border-color: var(--navy);
  background: var(--gray-1);
}

.m3-reqs-name {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink);
}

/* Navy on orange, 6.84:1. */
.m3-reqs-n {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  min-width: 26px;
  height: 26px;
  padding: 0 8px;
  border-radius: 9999px;
  background: var(--orange);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--navy);
  font-variant-numeric: tabular-nums;
  direction: ltr;
}

.m3-reqs-arrow {
  flex: 0 0 auto;
  font-size: 14px;
  color: var(--ink-2);
}

/* «المأذون لهم» and «البائعون المحجوبون» (lines 1028–1066, 1113–1137). */
.m3-allowed {
  margin-bottom: 52px;
}

.m3-blocked {
  margin: 30px 0 26px;
}

.m3-list-head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 9px;
}

.m3-list-title {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
}

.m3-list-n {
  font-size: 13px;
  font-weight: 400;
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}

/* «تديرها أيضًا من قائمة زبائني»: 44 px tall, without moving the head. */
.m3-clients {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin: -12px 0;
  margin-inline-start: auto;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 12px;
  font-weight: 400;
  color: var(--navy);
  text-decoration: underline;
  white-space: nowrap;
  cursor: pointer;
}

.m3-search,
.m3-block-search {
  display: block;
  width: 100%;
  height: 40px;
  box-sizing: border-box;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  font: inherit;
  font-size: 13px;
  font-weight: 400;
  color: var(--ink);
}

.m3-search {
  margin-bottom: 8px;
  padding: 0 14px;
  background: var(--gray-1);
}

.m3-block-search {
  padding: 0 12px;
  background: var(--white);
}

/* The prototype leaves the placeholders to the browser, #757575: 4.19:1 on the
   grey field (its P12). The Director's ruling (N475): the grey closest to it that
   reaches 4.5:1 on #F4F4F4, #707070 (4.50; 4.95 on the white field). */
.m3-search::placeholder,
.m3-block-search::placeholder {
  color: #707070;
  opacity: 1;
}

/* The prototype marks the focused field by a navy border, not an outline. */
.m3-search:focus,
.m3-block-search:focus {
  border-color: var(--navy);
}

.m3-search:focus-visible,
.m3-block-search:focus-visible {
  outline: none;
}

.m3-box {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--white);
  overflow: hidden;
}

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

.m3-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 13px;
  border-bottom: 1px solid var(--line);
}

/* Allowed: a green dot, 5.32:1 on white. */
.m3-dot {
  width: 9px;
  height: 9px;
  flex: 0 0 9px;
  border-radius: 9999px;
  background: #0A7A5A;
}

/* Blocked: a red dash, 5.00:1 on white. */
.m3-dash {
  width: 9px;
  height: 3px;
  flex: 0 0 9px;
  border-radius: 2px;
  background: #DA1E28;
}

.m3-who {
  flex: 1 1 auto;
  min-width: 0;
}

.m3-name {
  display: block;
  font-size: 13px;
  font-weight: 400;
  color: var(--ink);
}

.m3-line {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 14px;
  margin-top: 3px;
}

/* The blocked rows' one line: wilaya • phones • e-mail. */
.m3-line-dots {
  gap: 8px;
}

.m3-wilaya {
  font-size: 12px;
  font-weight: 400;
  color: var(--ink);
  white-space: nowrap;
}

.m3-tel,
.m3-mail {
  font-size: 12px;
  font-weight: 400;
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.m3-sep {
  width: 3px;
  height: 3px;
  flex: 0 0 3px;
  border-radius: 9999px;
  background: var(--line-control);
}

/* The allowed rows' e-mail, on its own line, from the right. */
.m3-email {
  display: block;
  margin-top: 2px;
  font-size: 12px;
  font-weight: 400;
  color: var(--ink-2);
  text-align: right;
  overflow-wrap: anywhere;
}

.m3-since {
  flex: 0 0 auto;
  font-size: 11.5px;
  font-weight: 400;
  color: var(--ink-2);
  white-space: nowrap;
}

.m3-act {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  box-sizing: content-box;
  height: 28px;
  padding: 0 10px;
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  background: var(--white);
  font: inherit;
  font-size: 12px;
  font-weight: 400;
  color: var(--ink);
  white-space: nowrap;
  cursor: pointer;
}

.m3-act:hover {
  background: var(--gray-1);
}

.m3-empty {
  margin: 0;
  padding: 16px 13px;
  font-size: 12.5px;
  font-weight: 400;
  color: var(--ink-2);
}

/* The search leaves nobody (line 1060; its words the owner's, N485): a little less
   room than nobody at all. */
.m3-no-hit {
  padding: 14px 13px;
}

/* The question in the row (17e; prototype lines 1047–1053): navy, in the place of
   the date and «اسحب الإذن»; its words white (16.12:1), «نعم، اسحبه» navy on white
   (16.12:1), «تراجَع» #C6C6C6 (9.44:1). The orange ring is 4.20:1 on the navy. */
.m3-row-ask {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  flex: 0 1 auto;
  gap: 10px;
  box-sizing: content-box;
  min-height: 28px;
  padding: 4px 10px;
  border-radius: 6px;
  background: var(--navy);
}

.m3-row-ask-words {
  font-size: 12px;
  font-weight: 400;
  color: var(--white);
}

.m3-row-ask-yes {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 10px;
  border: 0;
  border-radius: 6px;
  background: var(--white);
  font: inherit;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--navy);
  white-space: nowrap;
  cursor: pointer;
}

.m3-row-ask-no {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 11.5px;
  font-weight: 400;
  color: var(--line-strong);
  text-decoration: underline;
  white-space: nowrap;
  cursor: pointer;
}

.m3-row-ask-no:hover {
  color: var(--white);
}

/* Blocking (lines 1068–1110), in both modes. */
.m3-block {
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.m3-modes + .m3-block {
  margin-top: 26px;
}

.m3-block-title {
  margin: 0 0 10px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink);
}

/* What the block search found (17f; lines 1073–1105): a card of its own under the
   field, its rows without a mark. */
.m3-hits {
  margin-top: 12px;
}

/* «احجبه»: dark red, 7.79:1 on white; its hover a pale red with a red edge. */
.m3-act-block {
  color: #A2191F;
}

.m3-act-block:hover {
  border-color: #DA1E28;
  background: #FFF1F1;
}

/* The question in a found row (lines 1089–1094): in the place of «احجبه», its words
   #161616 (18.10:1), «نعم، احجبه» white on red #DA1E28 (5.00:1), «تراجَع» #525252
   (7.81:1). The rings stand on the white row: 3.84:1. */
.m3-hit-ask {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  min-width: 0;
}

.m3-hit-ask-words {
  font-size: 12.5px;
  font-weight: 400;
  color: var(--ink);
}

.m3-hit-ask-yes {
  display: inline-flex;
  align-items: center;
  height: 28px;
  padding: 0 12px;
  border: 0;
  border-radius: 6px;
  background: #DA1E28;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  color: var(--white);
  white-space: nowrap;
  cursor: pointer;
}

.m3-hit-ask-yes:hover {
  background: #B81922;
}

.m3-hit-ask-no {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 12px;
  font-weight: 400;
  color: var(--ink-2);
  text-decoration: underline;
  white-space: nowrap;
  cursor: pointer;
}

.m3-hit-ask-no:hover {
  color: var(--ink);
}

/* ── The phone: below 760 px wide (13/10 handoff, README "Phone") ─────────────
   Only M0, M8, M8r, M8R and M7 open; app.js shows M13 for the rest. */

/* «max-width: 759.98px»: below 760 px, 760 itself out, as before (N496 item 1). */
@media (max-width: 759.98px) {
  /* M0: one column. The navy block fills the height above the form, logo at the
     top, copy at its foot; one page scroll, no inner scrolls (prototype m0* values,
     line 4831). */
  .m0 {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(max-content, 1fr) max-content;
    overflow-x: hidden;
    overflow-y: auto;
  }

  .m0-start {
    gap: 24px;
    padding: 24px 20px 32px;
    overflow-y: visible;
  }

  .m0-logo {
    height: 36px;
  }

  .m0-headline {
    font-size: 22px;
  }

  .m0-body {
    font-size: 14.5px;
  }

  .m0-spacer {
    display: none;
  }

  .m0-end {
    align-items: flex-start;
    padding: 28px 20px 32px;
    overflow-y: visible;
  }

  .m0-title {
    font-size: 22px;
  }

  /* M8 and M8r: tighter frame, 26 px title, the e-mail row padded to wrap, and
     each day on two rows: day and open/closed, then the times. */
  .m8 {
    padding: 20px 16px;
  }

  .m8-card {
    padding: 0 0 24px;
  }

  .m8-title {
    font-size: 26px;
  }

  .m8-mail {
    padding: 8px 14px;
  }

  .m8-day {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px 12px;
    padding: 10px 14px;
  }

  .m8-day-times {
    grid-column: 1 / -1;
  }

  /* M8R: 26 px title; WhatsApp full width, «اخرج» below it (README "M8R phone"). */
  .m8-review-title {
    font-size: 26px;
  }

  .m8-review-actions {
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
  }
}

/* ── M11, his list (sub-step 20; prototype lines 2477–2587) ─────────────────── */

/* A screen of its own under the top bar, as M12: the head stays, the rest scrolls. */
.m11 {
  height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: var(--white);
}

.m11-top {
  flex: 0 0 auto;
  padding: 20px 16px 16px;
  border-bottom: 1px solid var(--line);
}

.m11-top-in {
  max-width: 900px;
  margin: 0 auto;
}

.m11-title {
  margin: 3px 0 0;
  font-size: 26px;
  font-weight: 300;
  line-height: 1.35;
  color: var(--ink);
}

/* The head's line: #525252 on white, 7.81:1. */
.m11-line {
  margin: 0;
  font-size: 12.5px;
  font-weight: 400;
  color: var(--ink-2);
  text-wrap: balance;
}

.m11-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}

.m11-body {
  max-width: 900px;
  margin: 0 auto;
  padding: 18px 16px 64px;
}

.m11-h {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
}

/* The add's head, its line 10 px under it, the field 9 px under that. */
.m11-add .m11-h {
  margin-bottom: 10px;
}

.m11-add-line {
  margin: 0 0 9px;
  font-size: 11.5px;
  font-weight: 400;
  line-height: 1.75;
  color: var(--ink-2);
  text-wrap: pretty;
}

/* The fields' edge #8D8D8D, 3.02:1 on their #F4F4F4, not the prototype's #C6C6C6 (the M11
   map's P4); a navy edge when focused, as M3's searches. */
.m11-paste,
.m11-search {
  box-sizing: border-box;
  border: 1px solid var(--line-control);
  border-radius: 8px;
  background: var(--gray-1);
  font: inherit;
  font-size: 13px;
  font-weight: 400;
  color: var(--ink);
}

/* Inline, as the prototype's: its line's descent stays under it, before the button's row. */
.m11-paste {
  display: inline-block;
  width: 100%;
  min-height: 104px;
  resize: vertical;
  padding: 11px 13px;
  line-height: 1.9;
  direction: ltr;
  text-align: right;
}

.m11-paste:focus,
.m11-search:focus {
  border-color: var(--navy);
}

.m11-paste:focus-visible,
.m11-search:focus-visible {
  outline: none;
}

/* The placeholders: #6F6F6F, 4.57:1 on #F4F4F4 (the M11 map's question 11). */
.m11-paste::placeholder,
.m11-search::placeholder {
  color: var(--text-3);
  opacity: 1;
}

.m11-add-row {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 10px;
}

/* «أضِف العناوين» (20b): navy on orange, 6.84:1 (8.08:1 pointed at); with nothing to add,
   #6F6F6F on #E0E0E0, as M9S's form's unavailable controls (P4); while a paste is out,
   «جارٍ الإضافة…», #525252 on #E0E0E0, 5.92:1. */
.m11-add-btn {
  display: inline-flex;
  align-items: center;
  height: 44px;
  padding: 0 24px;
  border: 0;
  border-radius: 8px;
  background: var(--orange);
  font: inherit;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--navy);
  white-space: nowrap;
  cursor: pointer;
}

.m11-add-btn:hover {
  background: #FFA24C;
}

/* Not ready: #525252 on #E0E0E0, 5.92:1 (Director N821). */
.m11-add-btn[aria-disabled="true"] {
  background: var(--line);
  font-weight: 400;
  color: var(--ink-2);
  cursor: default;
}

.m11-add-btn.is-busy {
  font-weight: 600;
  color: var(--ink-2);
  cursor: progress;
}

/* A failed paste: a red line under the button, the field as it was. #DA1E28 on white, 5.00:1. */
.m11-failed {
  display: flex;
  flex: 1 1 100%;
  align-items: center;
  gap: 7px;
  order: 9;
  margin: 0;
}

.m11-failed[hidden] {
  display: none;
}

.m11-failed-dash {
  flex: 0 0 9px;
  width: 9px;
  height: 3px;
  border-radius: 2px;
  background: #DA1E28;
}

.m11-failed-text {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 11.5px;
  font-weight: 400;
  line-height: 1.6;
  color: #DA1E28;
}

/* What is said politely: heard, not seen. */
.m11-told {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.m11-told-line {
  display: block;
}

/* The paste's report (prototype lines 2516–2544): its head on #F4F4F4, a row per line. */
.m11-report {
  margin-top: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
}

.m11-rep-top {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 14px;
  background: var(--gray-1);
}

.m11-rep-dot {
  flex: 0 0 9px;
  width: 9px;
  height: 9px;
  border-radius: 9999px;
  background: #0A7A5A;
}

.m11-rep-head {
  flex: 1 1 auto;
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
}

/* «أغلِق»: #525252 on #F4F4F4, 7.10:1. */
.m11-close {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 12px;
  font-weight: 400;
  color: var(--ink-2);
  text-decoration: underline;
  cursor: pointer;
}

/* The blocks a paste lifted (N573 item 1): always in the report, #161616 on white. */
.m11-rep-unblock {
  margin: 0;
  padding: 8px 14px;
  border-top: 1px solid var(--line);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink);
}

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

.m11-rep-have,
.m11-rep-bad {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 8px 14px;
  border-top: 1px solid var(--line);
}

.m11-rep-typed {
  flex: 1 1 200px;
  min-width: 0;
  font-size: 12.5px;
  color: var(--ink);
  direction: ltr;
  text-align: right;
  unicode-bidi: isolate;
  overflow-wrap: anywhere;
}

.m11-rep-note {
  font-size: 11.5px;
  color: var(--ink-2);
  white-space: nowrap;
}

.m11-rep-dash {
  flex: 0 0 10px;
  width: 10px;
  height: 3px;
  border-radius: 2px;
  background: #DA1E28;
}

/* A refused line's reason: #A2191F on white, 7.79:1. */
.m11-rep-why {
  font-size: 11.5px;
  font-weight: 600;
  color: #A2191F;
}

.m11-rep-held {
  margin: 0;
  padding: 10px 14px 4px;
  border-top: 1px solid var(--line);
  font-size: 12px;
  font-weight: 400;
  color: var(--ink-2);
}

.m11-rep-gmail {
  margin: 0;
  padding: 8px 14px 11px;
  border-top: 1px solid var(--line);
  font-size: 11.5px;
  line-height: 1.7;
  color: var(--ink-2);
}

.m11-rep-gmail [dir="ltr"] {
  unicode-bidi: isolate;
}

/* The prototype's 26 px between the add and the list. */
.m11-clients {
  margin-top: 26px;
}

.m11-list-top {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 9px;
}

.m11-count {
  font-size: 13px;
  font-weight: 400;
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}

.m11-search-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.m11-search {
  flex: 1 1 260px;
  min-width: 0;
  max-width: 420px;
  height: 40px;
  padding: 0 12px;
}

/* How many the search finds: a status line, always there and empty while the search is
   (WCAG 4.1.3, as M1's). */
.m11-hits {
  font-size: 12px;
  font-weight: 400;
  color: var(--ink-2);
  white-space: nowrap;
}

/* Navy on white, 16.12:1. */
.m11-clear {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 12px;
  font-weight: 400;
  color: var(--navy);
  text-decoration: underline;
  white-space: nowrap;
  cursor: pointer;
}

.m11-clear[hidden] {
  display: none;
}

.m11-box {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
}

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

.m11-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 11px 14px;
  border-bottom: 1px solid var(--line);
}

.m11-who {
  flex: 1 1 240px;
  min-width: 0;
}

.m11-head-line {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
}

/* A name is isolated: a Latin one keeps its place in the line. */
.m11-name {
  unicode-bidi: isolate;
}

.m11-wilaya {
  font-weight: 400;
  color: var(--ink-2);
}

.m11-mail {
  display: block;
  margin-top: 1px;
  font-size: 13px;
  font-weight: 400;
  color: var(--ink);
  direction: ltr;
  text-align: right;
  unicode-bidi: isolate;
  overflow-wrap: anywhere;
}

/* The first phone, a WhatsApp link: #0A7A5A on white, 5.32:1. */
.m11-tel {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  color: #0A7A5A;
  text-decoration: none;
  direction: ltr;
  unicode-bidi: isolate;
  white-space: nowrap;
}

.m11-tel-dot {
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  border-radius: 9999px;
  background: #0A7A5A;
}

/* «احذف» (sub-step 20c; prototype line 2568): #A2191F on white, 7.79:1; while another
   delete is out it waits, #6F6F6F, 5.02:1. */
.m11-del {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  height: 36px;
  padding: 0 4px;
  border: 0;
  background: none;
  font: inherit;
  font-size: 12px;
  font-weight: 400;
  color: #A2191F;
  text-decoration: underline;
  white-space: nowrap;
  cursor: pointer;
}

.m11-del[aria-disabled="true"] {
  color: var(--text-3);
  cursor: default;
}

/* The question in its row (lines 2570–2577): #161616 and #525252 on #FFF1F1, 16.46 and
   7.11:1. */
.m11-ask {
  display: flex;
  flex: 1 1 100%;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  min-width: 0;
  padding: 10px 12px;
  border-radius: 8px;
  background: #FFF1F1;
}

.m11-ask-text {
  flex: 1 1 200px;
  min-width: 0;
  margin: 0;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.7;
  color: var(--ink);
  overflow-wrap: anywhere;
}

.m11-ask-q {
  display: block;
  font-weight: 600;
}

.m11-ask-line {
  display: block;
  color: var(--ink-2);
  text-wrap: pretty;
}

.m11-ask-buttons {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 12px;
}

/* «احذفه»: #A2191F on white, 7.79:1; under the mouse on #FFF1F1, 7.09:1. Busy, «جارٍ الحذف…»
   #525252 on white, 7.81:1. */
.m11-del-yes {
  display: inline-flex;
  align-items: center;
  height: 36px;
  padding: 0 14px;
  border: 1px solid #DA1E28;
  border-radius: 8px;
  background: var(--white);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  color: #A2191F;
  white-space: nowrap;
  cursor: pointer;
}

.m11-del-yes:hover {
  background: #FFF1F1;
}

.m11-del-yes.is-busy,
.m11-del-yes.is-busy:hover {
  border-color: var(--line-strong);
  background: var(--white);
  color: var(--ink-2);
  cursor: progress;
}

/* «أبقِه»: #525252 on #FFF1F1, 7.11:1; under the mouse #161616, 16.46:1. */
.m11-del-keep {
  display: inline-flex;
  align-items: center;
  height: 36px;
  padding: 0 4px;
  border: 0;
  background: none;
  font: inherit;
  font-size: 12px;
  font-weight: 400;
  color: var(--ink-2);
  text-decoration: underline;
  white-space: nowrap;
  cursor: pointer;
}

.m11-del-keep:hover {
  color: var(--ink);
}

.m11-del-keep[hidden] {
  display: none;
}

/* A failed delete, under its buttons: #DA1E28 on #FFF1F1, 4.55:1. */
.m11-del-failed {
  display: flex;
  flex: 1 1 100%;
  align-items: center;
  gap: 7px;
  order: 9;
  margin: 0;
}

/* The store's note (lines 2491–2498): #161616 on #F4F4F4, 16.45:1; «فهمت» #161616 on white,
   18.10:1, under the mouse on #E0E0E0, 13.71:1. */
.m11-note {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
  padding: 12px 14px;
  border-radius: 8px;
  background: var(--gray-1);
}

.m11-note-dot {
  flex: 0 0 8px;
  width: 8px;
  height: 8px;
  border-radius: 9999px;
  background: #24A148;
}

.m11-note-text {
  flex: 1 1 220px;
  min-width: 0;
  margin: 0;
  font-size: 12.5px;
  font-weight: 400;
  line-height: 1.7;
  color: var(--ink);
  text-wrap: pretty;
}

.m11-note-n {
  font-weight: 600;
}

.m11-note-ok {
  display: inline-flex;
  align-items: center;
  height: 36px;
  padding: 0 14px;
  border: 1px solid var(--line-control);
  border-radius: 8px;
  background: var(--white);
  font: inherit;
  font-size: 12.5px;
  font-weight: 400;
  color: var(--ink);
  white-space: nowrap;
  cursor: pointer;
}

.m11-note-ok:hover {
  background: var(--line);
}

/* No result, and the empty list: #525252 on white, 7.81:1; the empty list's head
   #161616, its way to M12 navy. */
.m11-nohit,
.m11-empty {
  margin: 0;
  padding: 14px;
  font-size: 12.5px;
  font-weight: 400;
  color: var(--ink-2);
}

.m11-empty {
  line-height: 1.8;
  text-wrap: pretty;
}

.m11-empty-head {
  font-weight: 600;
  color: var(--ink);
}

.m11-asks {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-weight: 600;
  color: var(--navy);
  text-decoration: underline;
  cursor: pointer;
}

/* ── M12 «the requests», read only (sub-step 18; prototype lines 2589–2645) ── */

/* A screen of its own under the top bar: the head stays, the list scrolls. */
.m12 {
  height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: var(--white);
}

.m12-top {
  flex: 0 0 auto;
  padding: 20px 16px 16px;
  border-bottom: 1px solid var(--line);
}

.m12-top-in {
  max-width: 900px;
  margin: 0 auto;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
}

.m12-title {
  flex: 1 1 auto;
  min-width: 0;
  margin: 3px 0 0;
  font-size: 26px;
  font-weight: 300;
  line-height: 1.35;
  color: var(--ink);
}

.m12-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}

/* The prototype's 18 px, then its 22 px spacer, above the note or the empty box. */
.m12-body {
  max-width: 900px;
  margin: 0 auto;
  padding: 40px 16px 64px;
}

/* The one note (M12.note): #525252 on white, 7.81:1; its middle #161616. */
.m12-note {
  margin: 0 0 12px;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.8;
  color: var(--ink-2);
  text-wrap: pretty;
}

.m12-note-strong {
  font-weight: 600;
  color: var(--ink);
}

.m12-list {
  margin: 0;
  padding: 0;
  list-style: none;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
}

.m12-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
}

.m12-who {
  flex: 1 1 240px;
  min-width: 0;
}

.m12-head-line {
  display: block;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink);
}

/* A name is isolated: a Latin one keeps its place in the line. */
.m12-name {
  unicode-bidi: isolate;
}

.m12-wilaya {
  font-weight: 400;
  color: var(--ink-2);
}

.m12-mail {
  display: block;
  margin-top: 3px;
  font-size: 13px;
  font-weight: 400;
  color: var(--ink);
  direction: ltr;
  text-align: right;
  unicode-bidi: isolate;
  overflow-wrap: anywhere;
}

/* The first phone, a WhatsApp link: #0A7A5A on white, 5.32:1. */
.m12-tel {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 5px;
  font-size: 12.5px;
  font-weight: 600;
  color: #0A7A5A;
  text-decoration: none;
  direction: ltr;
  unicode-bidi: isolate;
}

.m12-tel-dot {
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-radius: 9999px;
  background: #0A7A5A;
}

.m12-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 5px;
}

/* The day he asked: #6F6F6F, 5.02:1, not the prototype's #8C8C8C, 3.36:1 (N419
   ruling 2; the map's P4). */
.m12-when {
  font-size: 11.5px;
  font-weight: 400;
  color: var(--text-3);
  unicode-bidi: isolate;
}

/* The search engine or the store's link: framed grey, #525252 on white, 7.81:1. */
.m12-src {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 8px;
  border: 1px solid var(--line-strong);
  border-radius: 4px;
  background: var(--white);
  font-size: 11px;
  font-weight: 400;
  color: var(--ink-2);
  white-space: nowrap;
}

/* A private link: white on navy, 16.12:1. */
.m12-src-link {
  border: 0;
  background: var(--navy);
  color: var(--white);
}

/* A blocked seller's request (ONE.block.request): #A2191F on white, 7.79:1. */
.m12-blocked {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 22px;
  padding: 0 8px;
  border: 1px solid #DA1E28;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 400;
  color: #A2191F;
  white-space: nowrap;
}

.m12-dash {
  flex: 0 0 auto;
  width: 8px;
  height: 2px;
  background: #DA1E28;
}

.m12-acts {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
}

/* The prototype's spans: 36 px inside, «لا»'s border outside it. */
.m12-yes,
.m12-no {
  box-sizing: content-box;
  display: inline-flex;
  align-items: center;
  height: 36px;
  border-radius: 8px;
  font: inherit;
  font-size: 12.5px;
  white-space: nowrap;
  cursor: pointer;
}

/* Navy on orange, 6.84:1; on hover 8.08:1. */
.m12-yes {
  padding: 0 18px;
  border: 0;
  background: var(--orange);
  font-weight: 600;
  color: var(--navy);
}

.m12-yes:hover {
  background: #FFA24C;
}

.m12-no {
  padding: 0 16px;
  border: 1px solid var(--line-control);
  background: var(--white);
  font-weight: 400;
  color: var(--ink);
}

.m12-no:hover {
  background: var(--gray-1);
}

/* None waiting: #525252 on #F4F4F4, 7.10:1; its head #161616, its link navy. */
.m12-none {
  margin: 0;
  padding: 14px 15px;
  background: var(--gray-1);
  border-radius: 8px;
  font-size: 12.5px;
  font-weight: 400;
  line-height: 1.8;
  color: var(--ink-2);
  text-wrap: pretty;
}

.m12-none-head {
  font-weight: 600;
  color: var(--ink);
}

.m12-clients {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-weight: 600;
  color: var(--navy);
  text-decoration: underline;
  cursor: pointer;
}

/* The top bar's pill while requests wait (18b; README l.40; prototype lines 41–44): 28 px
   inside a 1 px edge, as the prototype's span. White on navy, 16.12:1; its edge #6E80A6
   on navy, 4.07:1; its dot orange on navy, 6.84:1; on hover white on #16294D, 14.40:1. */
.m12-pill {
  box-sizing: content-box;
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  gap: 7px;
  height: 28px;
  padding: 0 11px;
  border: 1px solid var(--navy-line);
  border-radius: 8px;
  background: none;
  font: inherit;
  font-size: 12px;
  font-weight: 400;
  color: var(--white);
  white-space: nowrap;
  cursor: pointer;
}

.m12-pill:hover {
  background: var(--navy-hover);
}

.m12-pill-dot {
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-radius: 9999px;
  background: var(--orange);
}

.m12-pill-n {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* ── M9 «the store» before the subscription, read only (sub-step 19; prototype lines
   1149–1235) ─────────────────────────────────────────────────────────────────── */

/* The screen scrolls as one page. The navy and grey bands run its full width as plain
   blocks (the prototype bleeds them out of its column with container units, Safari 16:
   N530 item 2); their text, and the white blocks', sit in the same 900 px column. */
.m9 {
  background: var(--white);
}

.m9-title {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* No browser margins; at no weight, so that each block's own spacing wins. */
:where(.m9) :where(h2, h3, p, ul) {
  margin: 0;
  padding: 0;
}

:where(.m9) ul {
  list-style: none;
}

.m9-band {
  padding: 0 16px;
}

.m9-in,
.m9-col {
  max-width: 900px;
  margin: 0 auto;
}

.m9-col {
  padding: 0 16px;
}

/* The calls: navy on orange, 6.84:1; on hover #FFA24C, 8.08:1. */
.m9-start {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  padding: 0 28px;
  border: 0;
  border-radius: 8px;
  background: var(--orange);
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  color: var(--navy);
  white-space: nowrap;
  cursor: pointer;
}

.m9-start:hover {
  background: #FFA24C;
}

/* The promise (lines 1153–1162): white and orange on navy, 16.12 and 6.84:1; the lead
   #A9B8D6, 8.07:1. The title's 5 % of the width never falls under 36 px from 760 px. */
.m9-promise {
  padding-top: 54px;
  padding-bottom: 50px;
  background: var(--navy);
}

.m9-eyebrow {
  margin-bottom: 14px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--orange);
}

.m9-hero {
  max-width: 700px;
  font-size: clamp(26px, 5vw, 36px);
  font-weight: 300;
  line-height: 1.4;
  color: var(--white);
  text-wrap: balance;
}

.m9-hero-strong {
  font-weight: 600;
  color: var(--orange);
}

.m9-lead {
  max-width: 580px;
  margin-top: 10px;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.85;
  color: #A9B8D6;
  text-wrap: pretty;
}

.m9-calls {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 16px;
  margin-top: 22px;
}

/* The titles of the white blocks and of the offer (lines 1166, 1180, 1217). */
.m9-h2 {
  font-size: 22px;
  font-weight: 300;
  line-height: 1.45;
  color: var(--ink);
  text-wrap: pretty;
}

/* The problem (lines 1165–1171): its 4 px under the title, then a 14 px spacer. */
.m9-problem {
  padding-top: 40px;
}

.m9-problem .m9-h2 {
  margin-bottom: 18px;
}

.m9-limits {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  border-top: 1px solid var(--line);
}

.m9-limit {
  padding: 16px 0 18px;
  padding-inline-end: 20px;
  border-bottom: 1px solid var(--line);
}

.m9-limit-head {
  margin-bottom: 4px;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
}

.m9-limit-body {
  font-size: 13px;
  font-weight: 400;
  line-height: 1.85;
  color: var(--ink-2);
  text-wrap: pretty;
}

/* The answer's picture (line 1175) is not published (N530 item 5): its block keeps
   the picture's size, 3200 × 1786, at the screen's full width, and stays empty. */
.m9-pic {
  margin-top: 40px;
  aspect-ratio: 3200 / 1786;
}

/* The owner's picture, the block's full width (prototype line 1175). */
.m9-pic-img {
  display: block;
  width: 100%;
  height: auto;
}

/* The offer (lines 1178–1213): #161616 and #525252 on #F4F4F4, 16.45 and 7.10:1. */
.m9-offer {
  margin-top: 40px;
  padding-top: 44px;
  padding-bottom: 44px;
  background: var(--gray-1);
}

.m9-offer-in {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.m9-offer-title {
  width: 100%;
  margin-bottom: 4px;
}

.m9-offer-sub {
  width: 100%;
  max-width: 600px;
  margin-bottom: 18px;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.8;
  color: var(--ink-2);
  text-wrap: pretty;
}

.m9-card {
  width: 100%;
  max-width: 460px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--white);
  text-align: start;
}

.m9-card-top {
  padding: 22px 22px 20px;
}

.m9-plans {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 6px;
}

/* A plan (lines 1188–1196): 1 px #C6C6C6 on white; picked, 2 px navy on #F4F4F4, its
   padding 1 px less so that it keeps its size. */
.m9-plan {
  position: relative;
  display: block;
  min-width: 0;
  padding: 12px 12px 11px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: var(--white);
  cursor: pointer;
}

.m9-plan:has(.m9-plan-input:checked) {
  padding: 11px 11px 10px;
  border: 2px solid var(--navy);
  background: var(--gray-1);
}

.m9-plan:has(.m9-plan-input:focus-visible) {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

.m9-plan-input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* The year's badge: white on green #0A7A5A, 5.32:1. */
.m9-plan-badge {
  position: absolute;
  top: -10px;
  inset-inline-end: 10px;
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding: 0 8px;
  border-radius: 4px;
  background: #0A7A5A;
  font-size: 10.5px;
  font-weight: 600;
  color: var(--white);
  white-space: nowrap;
}

.m9-plan-head {
  display: flex;
  align-items: center;
  gap: 7px;
}

.m9-plan-ring {
  flex: 0 0 14px;
  width: 14px;
  height: 14px;
  box-sizing: border-box;
  border: 1px solid var(--line-control);
  border-radius: 9999px;
}

.m9-plan:has(.m9-plan-input:checked) .m9-plan-ring {
  border: 4px solid var(--navy);
}

.m9-plan-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
}

.m9-plan-price {
  display: block;
  margin-top: 8px;
  font-size: 16px;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
}

.m9-plan-n {
  font-variant-numeric: tabular-nums;
  direction: ltr;
  unicode-bidi: isolate;
}

.m9-plan-dzd {
  font-size: 0.72em;
  font-weight: 400;
  color: var(--ink-2);
}

.m9-plan-per {
  display: block;
  margin-top: 1px;
  font-size: 11px;
  font-weight: 400;
  color: var(--ink-2);
}

.m9-plan-free {
  display: block;
  margin-top: 6px;
  font-size: 11px;
  font-weight: 400;
  color: #0A7A5A;
}

.m9-due {
  margin-top: 12px;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.7;
  color: var(--ink-2);
  text-align: center;
}

.m9-due-zero {
  font-weight: 600;
  color: var(--ink);
}

.m9-start-card {
  display: flex;
  width: 100%;
  height: 46px;
  margin-top: 18px;
  padding: 0;
  font-size: 14px;
}

.m9-card-inc {
  padding: 16px 22px 20px;
  border-top: 1px solid var(--line);
}

.m9-inc-head {
  margin-bottom: 6px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink);
}

.m9-inc-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 5px 0;
}

/* The tick: two green strokes, turned. */
.m9-tick {
  flex: 0 0 11px;
  width: 11px;
  height: 6px;
  margin-top: 7px;
  border-left: 1.5px solid #0A7A5A;
  border-bottom: 1.5px solid #0A7A5A;
  transform: rotate(-45deg);
}

.m9-inc-text {
  min-width: 0;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.7;
  color: var(--ink);
  text-wrap: pretty;
}

.m9-paynote {
  margin-top: 12px;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.8;
  color: var(--ink-2);
}

/* The questions (lines 1216–1227). */
.m9-faq {
  padding-top: 40px;
}

.m9-faq-title {
  margin-bottom: 18px;
}

.m9-faq-list {
  border-top: 1px solid var(--line);
}

.m9-faq-item {
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
}

.m9-faq-q {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink);
}

.m9-faq-a {
  max-width: 640px;
  margin-top: 4px;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.85;
  color: var(--ink-2);
  text-wrap: pretty;
}

/* The closing (lines 1229–1234): flush with the screen's foot. */
.m9-closing {
  margin-top: 44px;
  padding-top: 48px;
  padding-bottom: 56px;
  background: var(--navy);
}

.m9-closing-in {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 18px;
}

.m9-closing-title {
  max-width: 640px;
  font-size: 26px;
  font-weight: 300;
  line-height: 1.5;
  color: var(--white);
}

.m9-closing-in .m9-start {
  align-self: flex-start;
}

/* ── M9's checkout «the subscription request», a dialog over M9 (sub-step 19b; prototype
   lines 1820–1891) ─────────────────────────────────────────────────────────────── */

.m9c {
  position: fixed;
  inset: 0;
  z-index: 95;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 48px 16px;
  overflow-y: auto;
}

.m9c-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(6, 14, 32, 0.72);
}

.m9c-box {
  position: relative;
  width: 100%;
  max-width: 460px;
  padding: 14px;
  border-radius: 8px;
  background: var(--gray-1);
}

.m9c-box:focus-visible {
  outline: none;
}

.m9c-close {
  position: absolute;
  top: -14px;
  inset-inline-end: -14px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  box-sizing: content-box;
  padding: 0;
  border: 1px solid var(--line-strong);
  border-radius: 9999px;
  background: var(--white);
  font: inherit;
  font-size: 16px;
  font-weight: 400;
  color: var(--ink);
  cursor: pointer;
}

.m9c-card {
  padding: 20px 20px 22px;
  border-radius: 8px;
  background: var(--white);
}

:where(.m9c) :where(h2, p, ol) {
  margin: 0;
  padding: 0;
}

.m9c-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--ink);
}

.m9c-label {
  margin-top: 14px;
  font-size: 12.5px;
  font-weight: 400;
  color: var(--ink-2);
}

/* The plan, two in one grey bar; the picked one white with an edge. */
.m9c-seg {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px;
  margin-top: 8px;
  padding: 4px;
  border-radius: 8px;
  background: var(--gray-1);
}

.m9c-seg-item {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 36px;
  box-sizing: content-box;
  border: 1px solid transparent;
  border-radius: 6px;
  white-space: nowrap;
  cursor: pointer;
}

.m9c-seg-item:has(.m9c-seg-input:checked) {
  border-color: var(--line-strong);
  background: var(--white);
}

.m9c-seg-item:has(.m9c-seg-input:focus-visible) {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

.m9c-seg-input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.m9c-seg-name {
  font-size: 12.5px;
  font-weight: 400;
  color: var(--ink);
}

.m9c-seg-item:has(.m9c-seg-input:checked) .m9c-seg-name {
  font-weight: 600;
}

/* The year's saving: green #0A7A5A on white or on #F4F4F4, 5.32 and 4.88:1. */
.m9c-seg-badge {
  font-size: 11px;
  font-weight: 600;
  color: #0A7A5A;
}

/* The store's card (lines 1836–1843). */
.m9c-store {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-top: 12px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.m9c-logo {
  display: flex;
  flex: 0 0 44px;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 8px;
  background: var(--navy);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--white);
  direction: ltr;
}

.m9c-store-text {
  flex: 1;
  min-width: 0;
}

.m9c-store-name {
  display: block;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink);
}

.m9c-store-free {
  display: block;
  margin-top: 2px;
  font-size: 12px;
  font-weight: 400;
  color: #0A7A5A;
}

.m9c-price {
  display: block;
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid var(--line);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.6;
  color: var(--ink-2);
  text-wrap: pretty;
}

.m9c-price-n {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  direction: ltr;
  unicode-bidi: isolate;
}

/* The time line (lines 1844–1888): a dot and a line on the right of each stop. */
.m9c-line {
  margin-top: 18px;
  list-style: none;
}

.m9c-stop {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) auto;
  column-gap: 12px;
  align-items: stretch;
}

.m9c-mark {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.m9c-dot {
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
  margin-top: 3px;
  box-sizing: border-box;
  border: 2px solid var(--navy);
  border-radius: 9999px;
  background: var(--white);
}

.m9c-bar {
  flex: 1 1 auto;
  min-height: 18px;
  margin-top: 3px;
  width: 2px;
  background: var(--line-strong);
}

.m9c-stop-now .m9c-dot {
  border: 0;
  background: var(--navy);
}

.m9c-stop-now .m9c-bar {
  background: var(--navy);
}

.m9c-stop-remind .m9c-bar {
  width: 0;
  border-inline-start: 2px dashed var(--line-strong);
  background: none;
}

.m9c-stop-bill .m9c-dot {
  border-color: var(--line-control);
}

.m9c-stop-last .m9c-dot {
  border-color: var(--line-strong);
}

.m9c-stop-last .m9c-bar {
  display: none;
}

.m9c-stop-text {
  min-width: 0;
  padding-bottom: 16px;
}

.m9c-stop-last .m9c-stop-text {
  padding-bottom: 0;
}

.m9c-day {
  display: block;
  font-size: 13.5px;
  font-weight: 600;
  line-height: 22px;
  color: var(--ink);
}

.m9c-words {
  display: block;
  margin-top: 1px;
  font-size: 11.5px;
  font-weight: 400;
  line-height: 1.6;
  color: var(--ink-2);
}

.m9c-sum {
  text-align: left;
}

.m9c-sum-now,
.m9c-sum-bill {
  font-size: 13.5px;
  font-weight: 600;
  line-height: 22px;
  color: var(--ink);
  white-space: nowrap;
}

.m9c-sum-now {
  font-size: 18px;
}

.m9c-n {
  font-variant-numeric: tabular-nums;
  direction: ltr;
  unicode-bidi: isolate;
}

.m9c-dzd {
  font-size: 0.7em;
  font-weight: 400;
  color: var(--ink-2);
}

.m9c-terms {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  font-size: 11.5px;
  font-weight: 400;
  line-height: 1.9;
  color: var(--ink-2);
  text-wrap: pretty;
}

/* «ابدأ شهرك المجّانيّ»: navy on orange, 6.84:1; on hover #FFA24C, 8.08:1. */
.m9c-start {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 48px;
  margin-top: 16px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: var(--orange);
  font: inherit;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--navy);
  cursor: pointer;
}

.m9c-start:hover {
  background: #FFA24C;
}

/* ── M9S's head, after the subscription (sub-step 19b; prototype lines 1252–1290) ── */

.m9s-col {
  max-width: 900px;
  margin: 0 auto;
  padding: 18px 16px 64px;
}

/* The status line: #161616 and #525252 on #F4F4F4, 16.45 and 7.10:1. */
.m9s-life {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 18px;
  padding: 11px 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--gray-1);
}

.m9s-life-head {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 7px;
}

.m9s-dot {
  flex: 0 0 9px;
  width: 9px;
  height: 9px;
  border-radius: 9999px;
  background: #0A7A5A;
}

.m9s-life-title {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
}

.m9s-life-sub {
  flex: 1 1 200px;
  min-width: 0;
  font-size: 11.5px;
  font-weight: 400;
  font-variant-numeric: tabular-nums;
  color: var(--ink-2);
}

.m9s-open {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 9px;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
}

.m9s-link {
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.m9s-link-in {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.m9s-address {
  flex: 1 1 240px;
  min-width: 0;
  padding: 9px 12px;
  border-radius: 6px;
  background: var(--gray-1);
  font-size: 13px;
  font-weight: 400;
  color: var(--ink);
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.m9s-copy {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 7px;
  height: 34px;
  box-sizing: content-box;
  padding: 0 14px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: var(--white);
  font: inherit;
  font-size: 12.5px;
  font-weight: 400;
  color: var(--ink);
  white-space: nowrap;
  cursor: pointer;
}

.m9s-copy:hover {
  border-color: var(--navy);
  background: var(--gray-1);
}

/* Copied: green #0A7A5A on white, 5.32:1. */
.m9s-copy.is-copied {
  border-color: #0A7A5A;
  font-weight: 600;
  color: #0A7A5A;
}

.m9s-told,
.m9l-told {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ── M9S below its head (sub-step 19c; prototype lines 1291–1356, 1580–1586) ────────── */

/* A card: #161616 and #525252 on white, 18.10 and 7.81:1; on #F4F4F4 when pointed at. */
.m9s-card {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--white);
  font: inherit;
  color: var(--ink);
  text-align: start;
  cursor: pointer;
}

.m9s-card:hover {
  border-color: var(--navy);
  background: var(--gray-1);
}

.m9s-see {
  margin-top: 10px;
}

.m9s-card-text {
  flex: 1;
  min-width: 0;
}

.m9s-card-title {
  display: block;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink);
}

.m9s-card-line {
  display: block;
  margin-top: 3px;
  font-size: 12px;
  font-weight: 400;
  color: var(--ink-2);
}

/* The arrow at a card's end, drawn as the prototype's (two edges turned). */
.m9s-chev {
  display: block;
  flex: 0 0 7px;
  width: 7px;
  height: 7px;
  border-left: 1.5px solid var(--ink-2);
  border-bottom: 1.5px solid var(--ink-2);
  transform: rotate(45deg);
}

:where(.m9s, .m9s-ask) :where(h2, p) {
  margin: 0;
}

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

.m9s-clients-head {
  margin: 30px 0 10px;
}

.m9s-clients {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 12px;
  margin-bottom: 24px;
}

.m9s-list,
.m9s-asks {
  border-color: var(--line-strong);
}

/* Requests waiting: white on navy, 16.12:1; the count navy on orange, 6.84:1. */
.m9s-asks-on {
  border-color: var(--navy);
  background: var(--navy);
}

.m9s-asks-on:hover {
  border-color: var(--navy);
  background: #16294D;
}

.m9s-asks-on .m9s-card-title {
  color: var(--white);
}

.m9s-asks-n {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  min-width: 26px;
  height: 26px;
  padding: 0 8px;
  border-radius: 9999px;
  background: var(--orange);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--navy);
  font-variant-numeric: tabular-nums;
}

.m9s-others-head {
  margin-bottom: 4px;
}

.m9s-others-line {
  margin-bottom: 10px;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.8;
  color: var(--ink-2);
}

.m9s-switches {
  overflow: hidden;
  margin-bottom: 24px;
  border: 1px solid var(--line);
  border-radius: 8px;
}

/* A switch's row: the prototype's 48 px inside its 8 px padding and 1 px line, 65 in all. */
.m9s-switch {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 65px;
  padding: 8px 16px;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
  font: inherit;
  text-align: start;
  cursor: pointer;
}

.m9s-switch:hover {
  background: var(--gray-1);
}

.m9s-switch-text {
  flex: 1;
  min-width: 0;
}

.m9s-switch-label {
  display: block;
  font-size: 13px;
  font-weight: 400;
  color: var(--ink);
}

.m9s-switch-line {
  display: block;
  margin-top: 1px;
  font-size: 11.5px;
  font-weight: 400;
  color: var(--ink-2);
}

/* The reference a seller not on his list sees, M3's setting (Director N682 item 1): a row as the
   switch's, 65 px; its name #161616 and its state #525252 on white, 18.10 and 7.81:1; the way to
   M3, navy underlined, 16.12:1, its line thicker under the mouse. */
.m9s-ref {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 65px;
  padding: 8px 16px;
  box-sizing: border-box;
  border-bottom: 1px solid var(--line);
}

.m9s-ref-text {
  flex: 1;
  min-width: 0;
}

.m9s-ref-label {
  display: block;
  font-size: 13px;
  font-weight: 400;
  color: var(--ink);
}

.m9s-ref-state {
  display: block;
  margin-top: 1px;
  font-size: 11.5px;
  font-weight: 400;
  color: var(--ink-2);
}

.m9s-ref-go {
  flex: 0 0 auto;
  min-height: 24px;
  padding: 0;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: 12px;
  font-weight: 400;
  color: var(--navy);
  text-decoration: underline;
  white-space: nowrap;
  cursor: pointer;
}

.m9s-ref-go:hover {
  text-decoration-thickness: 2px;
}

/* On: navy, the knob at the start's far side; off: #8D8D8D, the knob at its start (the
   owner's ruling, N539 item 1: 3.32:1 on white, 3.02:1 on the row's hover grey, and
   the white knob 3.32:1 on it; the prototype's #C6C6C6 was 1.71:1). */
.m9s-track {
  position: relative;
  display: inline-block;
  flex: 0 0 40px;
  width: 40px;
  height: 22px;
  border-radius: 999px;
  background: var(--navy);
}

.m9s-knob {
  position: absolute;
  top: 2px;
  inset-inline-start: 20px;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: var(--white);
}

.m9s-switch[aria-checked="false"] .m9s-track {
  background: #8D8D8D;
}

.m9s-switch[aria-checked="false"] .m9s-knob {
  inset-inline-start: 2px;
}

/* The row to M14, after the private links (19d): the prototype's 26 and 4 px spacers, 30 px;
   the last card's 10 px stays inside the links' section, so they add up to 40. */
.m9s-row {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  margin-top: 30px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--white);
  font: inherit;
  text-align: start;
  cursor: pointer;
}

.m9s-row:hover {
  border-color: var(--navy);
  background: var(--gray-1);
}

.m9s-row-text {
  flex: 1 1 auto;
  min-width: 0;
}

.m9s-row-title {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
}

/* ── M9S's private links (sub-step 19d; prototype lines 1356–1574) ────────────────────
   Above them, the switches' 24 px and the prototype's 6 px; below the last card, its 10 px
   and the prototype's 26 and 4 px, kept inside the section (flow-root) so that they add.
   #161616 and #525252 on white, 18.10 and 7.81:1; the scope #6F6F6F, 5.02:1 (P4); «احذفه»
   #A2191F, 7.79:1; white on #DA1E28, 5.00:1. */
.m9l {
  display: flow-root;
  margin-top: 30px;
}

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

.m9l-head {
  flex: 1 1 auto;
}

.m9l-new {
  position: relative;
  top: -6px;
  display: inline-flex;
  align-items: center;
  height: 34px;
  box-sizing: content-box;
  padding: 0 14px;
  border: 1px solid var(--navy);
  border-radius: 8px;
  background: var(--white);
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--navy);
  white-space: nowrap;
  cursor: pointer;
}

.m9l-new:hover {
  background: var(--gray-1);
}

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

.m9l-card {
  overflow: hidden;
  margin-bottom: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.m9l-in {
  padding: 14px 16px;
}

.m9l-name-row {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 8px;
}

.m9l-name {
  min-width: 0;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--ink);
  overflow-wrap: anywhere;
}

.m9l-ch {
  font-size: 12.5px;
  font-weight: 400;
  color: var(--ink-2);
  white-space: nowrap;
}

.m9l-scope {
  margin-top: 2px;
  font-size: 11.5px;
  font-weight: 400;
  line-height: 1.6;
  color: var(--text-3);
}

/* Under a link's scope, its parts repriced since it was made (lines 1543–1548; N541 item 4):
   #525252 on white, 7.81:1. */
.m9l-changed {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 12px;
  margin-top: 10px;
  font-size: 12px;
  font-weight: 400;
  color: var(--ink-2);
}

.m9l-changed-n {
  white-space: nowrap;
}

.m9l-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.m9l-address {
  display: flex;
  flex: 1 1 220px;
  align-items: center;
  gap: 8px;
  min-width: 0;
  height: 34px;
  box-sizing: content-box;
  padding: 0 4px 0 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--gray-1);
  direction: ltr;
}

.m9l-url {
  flex: 1;
  min-width: 0;
  font-size: 12px;
  font-weight: 400;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.m9l-open {
  display: inline-flex;
  flex: 0 0 28px;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: transparent;
  cursor: pointer;
}

.m9l-open:hover {
  background: var(--line);
}

.m9l-copy {
  display: inline-flex;
  align-items: center;
  height: 34px;
  box-sizing: content-box;
  padding: 0 14px;
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  background: var(--white);
  font: inherit;
  font-size: 12px;
  font-weight: 400;
  color: var(--ink);
  white-space: nowrap;
  cursor: pointer;
}

.m9l-copy:hover {
  border-color: var(--navy);
}

/* Copied: green #0A7A5A on white, 5.32:1. */
.m9l-copy.is-copied {
  border-color: #0A7A5A;
  font-weight: 600;
  color: #0A7A5A;
}

.m9l-view {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 12px;
  font-weight: 400;
  color: var(--navy);
  text-decoration: underline;
  white-space: nowrap;
  cursor: pointer;
}

.m9l-gap {
  flex: 1 1 auto;
}

.m9l-delete {
  display: inline-flex;
  align-items: center;
  height: 34px;
  box-sizing: content-box;
  padding: 0 10px;
  border: 0;
  background: none;
  font: inherit;
  font-size: 12px;
  font-weight: 400;
  color: #A2191F;
  white-space: nowrap;
  cursor: pointer;
}

.m9l-delete:hover {
  text-decoration: underline;
}

/* The question in its place (lines 1562–1567): #161616 and #525252 on #F4F4F4, 16.45 and 7.10:1. */
.m9l-ask {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 14px;
  margin-top: 10px;
  padding: 12px 14px;
  border-inline-start: 3px solid #DA1E28;
  border-radius: 8px;
  background: var(--gray-1);
}

.m9l-ask-text {
  flex: 1 1 220px;
  min-width: 0;
  font-size: 12.5px;
  font-weight: 400;
  line-height: 1.7;
  color: var(--ink);
  text-wrap: pretty;
}

.m9l-ask-yes {
  display: inline-flex;
  align-items: center;
  height: 34px;
  box-sizing: content-box;
  padding: 0 16px;
  border: 0;
  border-radius: 8px;
  background: #DA1E28;
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--white);
  white-space: nowrap;
  cursor: pointer;
}

.m9l-ask-yes:hover {
  background: #BA1B23;
}

.m9l-ask-keep {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 12.5px;
  font-weight: 400;
  color: var(--ink-2);
  white-space: nowrap;
  cursor: pointer;
}

.m9l-ask-keep:hover {
  color: var(--ink);
}

.m9l-none {
  padding: 14px 0;
  font-size: 12.5px;
  font-weight: 400;
  color: var(--ink-2);
}

/* ── M9S's private-link form (sub-step 19e; prototype lines 1367–1528) ─────────────────
   #161616 and #525252 on white and on #F4F4F4; the notes and «بلا اسم بعد» #6F6F6F (P4; the
   prototype's #8C8C8C), 5.02:1. The ready button's missing word #525252 on #E0E0E0, 5.92:1:
   the prototype's #8C8C8C is 2.55:1, and the word says what is missing. */
.m9f {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin-bottom: 14px;
  padding: 16px;
  border: 1px solid var(--navy);
  border-radius: 8px;
}

.m9f-name {
  display: block;
}

.m9f-label {
  display: block;
  margin-bottom: 5px;
  font-size: 11.5px;
  font-weight: 400;
  color: var(--ink-2);
}

.m9f-name-input,
.m9f-find,
.m9f-add {
  min-width: 0;
  box-sizing: border-box;
  padding: 0 12px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: var(--white);
  font: inherit;
  color: var(--ink);
}

.m9f-name-input:focus,
.m9f-find:focus,
.m9f-add:focus {
  border-color: var(--navy);
}

/* The prototype leaves the placeholders to the browser: the build's placeholder grey (N419),
   #6F6F6F, 5.02:1 on the white fields. */
.m9f-name-input::placeholder,
.m9f-find::placeholder,
.m9f-add::placeholder {
  color: var(--text-3);
  opacity: 1;
}

.m9f-name-input {
  width: 100%;
  max-width: 360px;
  height: 40px;
  font-size: 13px;
}

.m9f-head {
  margin-bottom: 6px;
  font-size: 11.5px;
  font-weight: 400;
  color: var(--ink-2);
}

/* The two choices: what it opens, who sees its prices (lines 1381–1384, 1475–1478). */
.m9f-opts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 8px;
}

.m9f-opt {
  position: relative;
  display: block;
  padding: 12px 14px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: var(--white);
  cursor: pointer;
}

.m9f-opt:hover {
  border-color: var(--navy);
}

.m9f-opt:has(.m9f-opt-input:checked) {
  padding: 11px 13px;
  border: 2px solid var(--navy);
  background: var(--gray-1);
  cursor: default;
}

.m9f-opt:has(.m9f-opt-input:focus-visible),
.m9f-part:has(.m9f-check:focus-visible),
.m9f-seller:has(.m9f-check:focus-visible) {
  outline: 2px solid var(--focus);
  outline-offset: -2px;
}

.m9f-opt:has(.m9f-opt-input:focus-visible) {
  outline-offset: 2px;
}

.m9f-opt-input,
.m9f-check {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.m9f-opt-text {
  display: block;
}

.m9f-opt-t {
  display: block;
  font-size: 13px;
  font-weight: 400;
  color: var(--ink);
}

.m9f-opt:has(.m9f-opt-input:checked) .m9f-opt-t {
  font-weight: 600;
}

.m9f-opt-d {
  display: block;
  margin-top: 2px;
  font-size: 11.5px;
  font-weight: 400;
  color: var(--ink-2);
}

/* The picker (lines 1385–1468). */
.m9f-picker {
  margin-top: 8px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.m9f-pick-top {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 12px;
  background: var(--gray-1);
}

.m9f-pick-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.m9f-pick-sums {
  gap: 12px;
}

.m9f-find {
  flex: 1 1 220px;
  height: 38px;
  font-size: 13px;
}

.m9f-drop {
  position: relative;
  flex: 0 0 auto;
}

.m9f-drop-btn,
.m9f-toggle {
  display: inline-flex;
  align-items: center;
  height: 38px;
  box-sizing: content-box;
  padding: 0 12px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: var(--white);
  font: inherit;
  font-size: 12.5px;
  font-weight: 400;
  color: var(--ink);
  white-space: nowrap;
  cursor: pointer;
}

.m9f-drop-btn {
  gap: 9px;
}

.m9f-drop-btn:hover,
.m9f-drop.is-open .m9f-drop-btn {
  border-color: var(--navy);
}

.m9f-drop-chev {
  display: block;
  flex: 0 0 7px;
  width: 7px;
  height: 7px;
  box-sizing: content-box;
  border-right: 1.5px solid var(--ink-2);
  border-bottom: 1.5px solid var(--ink-2);
  transform: rotate(45deg) translate(-1px, -1px);
}

.m9f-menu {
  position: absolute;
  top: 40px;
  inset-inline-start: 0;
  z-index: 30;
  display: block;
  width: max-content;
  min-width: 100%;
  max-height: 260px;
  overflow-y: auto;
  scrollbar-width: none;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: var(--white);
  box-shadow: 0 10px 26px rgba(13, 32, 66, 0.14);
}

.m9f-menu-item {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 38px;
  padding: 0 14px;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: var(--white);
  font: inherit;
  font-size: 12.5px;
  color: var(--ink);
  white-space: nowrap;
  cursor: pointer;
}

.m9f-menu-item:hover {
  background: var(--gray-1);
}

.m9f-menu-item[aria-pressed="true"] {
  background: var(--navy);
  color: var(--white);
}

.m9f-toggle {
  flex: 0 0 auto;
  gap: 6px;
}

.m9f-toggle[aria-pressed="true"] {
  border-color: var(--navy);
  background: var(--navy);
  font-weight: 600;
  color: var(--white);
}

/* The offers' count: navy on orange, 6.84:1. */
.m9f-off-n {
  display: inline-flex;
  align-items: center;
  height: 18px;
  padding: 0 6px;
  border-radius: 4px;
  background: var(--orange);
  font-size: 10.5px;
  font-weight: 600;
  color: var(--navy);
}

.m9f-shown {
  flex: 1 1 auto;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink);
}

.m9f-link {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  color: var(--navy);
  text-decoration: underline;
  white-space: nowrap;
  cursor: pointer;
}

.m9f-link-quiet {
  font-weight: 400;
  color: var(--ink-2);
}

/* «ألغِ الكلّ»: #A2191F on white, 7.79:1. */
.m9f-link-red {
  font-weight: 400;
  color: #A2191F;
}

.m9f-picked {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.m9f-picked-word {
  flex: 1 1 auto;
  font-size: 12px;
  font-weight: 600;
  color: var(--navy);
}

.m9f-parts,
.m9f-sellers {
  margin: 0;
  padding: 0;
  overflow-y: auto;
  list-style: none;
}

.m9f-parts {
  max-height: 240px;
}

.m9f-part,
.m9f-seller {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-bottom: 1px solid var(--line);
  background: var(--white);
  cursor: pointer;
}

.m9f-part:hover,
.m9f-part:has(.m9f-check:checked),
.m9f-seller:hover,
.m9f-seller:has(.m9f-check:checked) {
  background: var(--gray-1);
}

/* A box: its edge #8D8D8D on white, 3.32:1; ticked, navy. */
.m9f-box {
  display: flex;
  flex: 0 0 14px;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  box-sizing: border-box;
  border: 1px solid var(--line-control);
  border-radius: 4px;
  background: var(--white);
}

.m9f-check:checked + .m9f-box {
  border-color: var(--navy);
  background: var(--navy);
}

/* A part's box ticked shows its mark (line 1438); a client's is filled only (line 1489). */
.m9f-part .m9f-check:checked + .m9f-box::after {
  content: '';
  width: 6px;
  height: 3px;
  box-sizing: content-box;
  border-bottom: 1.5px solid var(--white);
  border-left: 1.5px solid var(--white);
  transform: rotate(-45deg) translate(0, -1px);
}

.m9f-part-text {
  flex: 1;
  min-width: 0;
}

.m9f-part-des,
.m9f-part-ref {
  display: block;
  direction: ltr;
  text-align: right;
  unicode-bidi: isolate;
}

.m9f-part-des {
  font-size: 12.5px;
  font-weight: 400;
  line-height: 1.45;
  color: var(--ink);
}

/* The search's hit: #161616 on #EBEFF7, 15.70:1. */
.m9f-hit {
  padding: 0 2px;
  border-radius: 3px;
  background: #EBEFF7;
  font-weight: 600;
}

.m9f-part-marque {
  color: var(--ink-2);
}

.m9f-part-ref {
  margin-top: 2px;
  font-size: 11.5px;
  font-weight: 400;
  color: var(--ink-2);
}

.m9f-part-side {
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  align-items: flex-end;
  gap: 3px;
}

.m9f-part-price {
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

.m9f-part-pct {
  display: inline-flex;
  align-items: center;
  height: 18px;
  padding: 0 6px;
  border-radius: 4px;
  background: var(--orange);
  font-size: 10.5px;
  font-weight: 600;
  color: var(--navy);
  direction: ltr;
}

.m9f-part-prix {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink);
}

.m9f-part-n,
.m9f-part-old {
  font-variant-numeric: tabular-nums;
  direction: ltr;
  unicode-bidi: isolate;
}

.m9f-part-dzd {
  font-size: 11px;
  font-weight: 400;
  color: var(--ink-2);
}

.m9f-part-was,
.m9f-part-cond {
  font-size: 11px;
  font-weight: 400;
  color: var(--ink-2);
  white-space: nowrap;
}

.m9f-part-old {
  color: var(--text-3);
}

.m9f-cond-mark {
  display: inline-block;
  margin-inline-end: 5px;
  vertical-align: middle;
}

.m9f-cond-avail .m9f-cond-mark {
  width: 7px;
  height: 7px;
  border-radius: 9999px;
  background: #0A7A5A;
}

.m9f-cond-unsure .m9f-cond-mark {
  width: 7px;
  height: 7px;
  box-sizing: border-box;
  border: 1.5px solid #8A6A12;
  border-radius: 9999px;
}

.m9f-cond-out .m9f-cond-mark {
  width: 8px;
  height: 2px;
  background: #DA1E28;
}

/* Who sees its prices: his clients to tick, one more by address (lines 1479–1510). */
.m9f-some {
  margin-top: 8px;
}

.m9f-some-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
}

.m9f-chosen {
  flex: 1 1 auto;
  font-size: 11.5px;
  font-weight: 400;
  color: var(--ink-2);
}

.m9f-some-head .m9f-link {
  font-size: 11.5px;
}

.m9f-sellers {
  max-height: 220px;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.m9f-seller-text {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.m9f-seller-line {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
}

.m9f-seller-name {
  min-width: 0;
  overflow: hidden;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
  text-overflow: ellipsis;
}

.m9f-seller-name.is-blank {
  font-weight: 400;
  color: var(--text-3);
}

.m9f-seller-wil {
  flex: 0 0 auto;
  font-size: 11.5px;
  font-weight: 400;
  color: var(--ink-2);
  white-space: nowrap;
}

.m9f-seller-reach {
  align-items: center;
  gap: 10px;
  font-size: 11.5px;
  font-weight: 400;
  color: var(--ink-2);
}

.m9f-seller-mail {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  unicode-bidi: isolate;
}

.m9f-seller-tel {
  flex: 0 0 auto;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  unicode-bidi: isolate;
}

.m9f-add-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
}

.m9f-add {
  flex: 1 1 auto;
  height: 36px;
  font-size: 12.5px;
}

.m9f-add.is-bad {
  border-color: #DA1E28;
}

/* «أضِفه»: white on navy, 16.12:1; not yet, #6F6F6F on #E0E0E0, an inactive control. */
.m9f-add-btn {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  height: 36px;
  box-sizing: content-box;
  padding: 0 14px;
  border: 0;
  border-radius: 8px;
  background: var(--navy);
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--white);
  white-space: nowrap;
  cursor: pointer;
}

.m9f-add-btn:hover {
  background: var(--navy-hover);
}

/* Not ready: #525252 on #E0E0E0, 5.92:1 (Director N821). */
.m9f-add-btn[aria-disabled="true"] {
  background: var(--line);
  font-weight: 400;
  color: var(--ink-2);
  cursor: default;
}

/* The add field's line: #A2191F, #525252 or #161616 on white. */
.m9f-add-msg {
  margin-top: 5px;
  font-size: 11.5px;
  font-weight: 400;
  line-height: 1.6;
  color: #A2191F;
}

.m9f-add-msg[data-tone="new"] {
  color: var(--ink-2);
}

.m9f-add-msg[data-tone="have"] {
  color: var(--ink);
}

.m9f-note {
  margin-top: 6px;
  font-size: 11px;
  font-weight: 400;
  line-height: 1.7;
  color: var(--text-3);
  text-wrap: pretty;
}

/* A copy per channel (lines 1512–1522). */
.m9f-chans {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

.m9f-chan {
  display: inline-flex;
  align-items: center;
  height: 32px;
  box-sizing: content-box;
  padding: 0 14px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: var(--white);
  font: inherit;
  font-size: 12.5px;
  font-weight: 400;
  color: var(--ink);
  white-space: nowrap;
  cursor: pointer;
}

.m9f-chan[aria-pressed="true"] {
  border-color: var(--navy);
  background: var(--navy);
  font-weight: 600;
  color: var(--white);
}

/* The ready button: navy on orange, 6.84:1 (8.08:1 pointed at); and «ألغِ». */
.m9f-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
}

.m9f-save {
  display: inline-flex;
  align-items: center;
  height: 44px;
  box-sizing: content-box;
  padding: 0 24px;
  border: 0;
  border-radius: 8px;
  background: var(--orange);
  font: inherit;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--navy);
  white-space: nowrap;
  cursor: pointer;
}

.m9f-save:hover {
  background: #FFA24C;
}

.m9f-save[aria-disabled="true"] {
  background: var(--line);
  font-weight: 400;
  color: var(--ink-2);
  cursor: default;
}

.m9f-cancel {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 12.5px;
  font-weight: 400;
  color: var(--ink-2);
  text-decoration: underline;
  cursor: pointer;
}

/* A switch's question (lines 1345–1356): #161616 and #525252 on white; white on navy. */
.m9s-ask {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.m9s-ask-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(13, 32, 66, 0.45);
}

.m9s-ask-box {
  position: relative;
  width: 100%;
  max-width: 400px;
  padding: 24px 22px 20px;
  border-radius: 14px;
  background: var(--white);
}

.m9s-ask-title {
  font-size: 20px;
  font-weight: 300;
  line-height: 1.4;
  color: var(--ink);
}

.m9s-ask-word {
  margin-top: 8px;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.85;
  color: var(--ink-2);
  text-wrap: pretty;
}

.m9s-ask-yes {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 46px;
  margin-top: 20px;
  border: 0;
  border-radius: 8px;
  background: var(--navy);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--white);
  cursor: pointer;
}

.m9s-ask-yes:hover {
  background: #16294D;
}

.m9s-ask-back-wrap {
  margin-top: 10px;
  text-align: center;
}

.m9s-ask-back {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 12.5px;
  font-weight: 400;
  color: var(--ink-2);
  text-decoration: underline;
  cursor: pointer;
}

/* ── M10, his store as his clients see it (sub-step 21; the 14 Oct prototype, lines
   1989–2501; the 14 Oct README «M10 — store table (desktop)») ──────────────────────── */

/* The preview: its bar, then the store in its frame on a grey ground (lines 1990–2053). */
.m10 {
  height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: var(--gray-1);
}

.m10-bar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 12px;
  height: 44px;
  padding: 0 16px;
  box-sizing: border-box;
  background: var(--white);
  border-bottom: 1px solid var(--line);
}

/* #525252 on white, 7.81:1. */
.m10-bar-label {
  flex: 0 0 auto;
  font-size: 12.5px;
  font-weight: 400;
  color: var(--ink-2);
}

.m10-bar-gap {
  flex: 1 1 auto;
}

.m10-frames {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
}

/* The bar's buttons: #161616 on white, 18.10:1; under the mouse on #F4F4F4, 16.45:1. Their
   edge is the build's #8D8D8D (3.32:1), not the prototype's #C6C6C6 (the map's P8). */
.m10-frame-btn,
.m10-close {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  height: 28px;
  padding: 0 12px;
  border: 1px solid var(--line-control);
  border-radius: 8px;
  background: var(--white);
  font: inherit;
  font-size: 12px;
  font-weight: 400;
  color: var(--ink);
  white-space: nowrap;
  cursor: pointer;
}

.m10-frame-btn:hover,
.m10-close:hover {
  background: var(--gray-1);
  border-color: var(--navy);
}

/* The frame on show: white on navy, 16.12:1, under the mouse too. */
.m10-frame-btn[aria-pressed='true'],
.m10-frame-btn[aria-pressed='true']:hover {
  border-color: var(--navy);
  background: var(--navy);
  font-weight: 600;
  color: var(--white);
  cursor: default;
}

/* The design strip (21g; lines 2003–2030): three cells a thin line apart, under the bar. The
   cells' names #6F6F6F on white, 5.02:1, without the prototype's letter spacing, which breaks
   Arabic letters apart; the edges #8D8D8D, 3.32:1, as the build's fields (P8). */
.m10-strip {
  flex: 0 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  background: var(--white);
  border-bottom: 1px solid var(--line);
}

.m10-cell {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  padding: 14px 18px;
}

.m10-cell + .m10-cell {
  border-inline-start: 1px solid var(--line);
}

.m10-cell-identity {
  flex: 1 1 260px;
}

.m10-cell-name {
  font-size: 10.5px;
  font-weight: 600;
  color: var(--text-3);
  white-space: nowrap;
}

/* The logo: a 76 px square; empty, the picture's mark and its word #525252 on #F4F4F4, 7.10:1,
   inside a dashed edge. */
.m10-logo-pick {
  position: relative;
  display: block;
  width: 76px;
  height: 76px;
  cursor: pointer;
}

.m10-logo-input,
.m10-skin-input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.m10-logo-face {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  border: 1px dashed #8D8D8D;
  border-radius: 8px;
  overflow: hidden;
  background: var(--gray-1);
  font-size: 11.5px;
  font-weight: 400;
  color: var(--ink-2);
}

.m10-logo-pick:hover .m10-logo-face {
  border-color: var(--navy);
}

.m10-logo-input:focus-visible + .m10-logo-face,
.m10-skin-input:focus-visible + .m10-skin-box {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

.m10-logo-icon {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.m10-logo-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Taking the logo away (Director N701): the strip's own button, as AR.m10EditIdentity beside the identity —
   30 px, #161616 on white (18.10:1), the #8D8D8D edge (3.32:1) — and the prototype's hover. */
.m10-logo-remove {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  height: 30px;
  padding: 0 12px;
  border: 1px solid #8D8D8D;
  border-radius: 6px;
  background: var(--white);
  font: inherit;
  font-size: 11.5px;
  font-weight: 400;
  color: var(--ink);
  white-space: nowrap;
  cursor: pointer;
}

.m10-logo-remove:hover {
  border-color: var(--navy);
  background: var(--gray-1);
}

.m10-logo-remove[hidden] {
  display: none;
}

/* The colours: seven 30 px squares, the chosen one edged navy, 2 px; then his own colour. */
.m10-colours {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
  min-width: 0;
}

.m10-skins {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.m10-skin {
  position: relative;
  display: block;
  width: 30px;
  height: 30px;
}

.m10-skin-box {
  display: block;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  border: 1px solid #8D8D8D;
  border-radius: 6px;
}

.m10-skin:hover .m10-skin-box {
  border-color: var(--navy);
}

.m10-skin-input:checked + .m10-skin-box {
  border: 2px solid var(--navy);
}

/* His own colour: its field and its value #161616 on white, 18.10:1. */
.m10-own {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 30px;
  padding: 0 10px;
  box-sizing: border-box;
  border: 1px solid #8D8D8D;
  border-radius: 6px;
  background: var(--white);
  font-size: 11px;
  font-weight: 400;
  color: var(--ink);
  white-space: nowrap;
  cursor: pointer;
}

.m10-own:hover,
.m10-own-on {
  border-color: var(--navy);
}

.m10-own-on {
  border-width: 2px;
}

.m10-own-input {
  width: 15px;
  height: 15px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

.m10-own-value {
  font-variant-numeric: tabular-nums;
  unicode-bidi: isolate;
}

/* The identity: his name #161616, his line #525252, on white, 18.10 and 7.81:1; the way to his
   account, not built: drawn, #161616 on white, it does nothing. */
.m10-identity {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.m10-identity-words {
  flex: 1;
  min-width: 0;
}

/* One line each, cut with «…» when narrow; a line high enough that the marks above and below the
   Arabic letters are not cut by it. */
.m10-identity-name,
.m10-identity-tag {
  display: block;
  line-height: 1.6;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.m10-identity-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
}

.m10-identity-tag {
  margin-top: 2px;
  font-size: 11.5px;
  font-weight: 400;
  color: var(--ink-2);
}

.m10-identity-edit {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  height: 30px;
  padding: 0 12px;
  border: 1px solid #8D8D8D;
  border-radius: 6px;
  background: var(--white);
  font: inherit;
  font-size: 11.5px;
  font-weight: 400;
  color: var(--ink);
  white-space: nowrap;
  cursor: pointer;
}

/* It opens M6 (step 22): the prototype's hover (line 2028). */
.m10-identity-edit:hover {
  border-color: var(--navy);
  background: var(--gray-1);
}

.m10-stage {
  flex: 1;
  min-height: 0;
  display: flex;
  padding: 22px 16px 26px;
}

/* The store at the desktop's width (1040 px) or a phone's (390 px; `stMaxW`, line 4858). On
   the desktop its list scrolls; on the phone the whole store does, as a phone's page. */
.m10-frame {
  --m10-side: clamp(14px, 4vw, 26px);
  width: 100%;
  max-width: 1040px;
  margin: 0 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  background: var(--white);
  border: 1px solid var(--line);
  overflow: hidden;
}

.m10-frame-phone {
  --m10-side: 12px;
  max-width: 390px;
  overflow-y: auto;
}

/* The head (lines 2056–2094): navy at first, its colours the design strip's (21g; web/screens/
   m10-design.js `headPalette`): every text there 4.5:1 or more on its ground, the focus ring 3:1.
   On navy its name #F4F4F4, 14.66:1; its line and facts #8D9AB5, 5.70:1. */
.m10-head {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px 24px;
  padding: clamp(16px, 4vw, 22px) clamp(14px, 4vw, 26px) clamp(14px, 3.5vw, 20px);
  background: var(--head-bg, var(--navy));
}

.m10-id {
  display: flex;
  align-items: center;
  gap: 13px;
  flex: 1 1 260px;
  min-width: 0;
}

/* His letters while there is no logo: navy on #DCE4F5, 12.64:1 (white on navy on a light head,
   16.12:1); his logo in its place, square, the picture filling it. */
.m10-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: clamp(52px, 13vw, 72px);
  height: clamp(52px, 13vw, 72px);
  border-radius: 8px;
  overflow: hidden;
  background: var(--head-mark, #DCE4F5);
  font-size: clamp(18px, 4.5vw, 24px);
  font-weight: 600;
  color: var(--head-mark-ink, var(--navy));
}

.m10-mark-logo {
  background: transparent;
}

.m10-logo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* The focus ring on the head's ground: the console's orange while it reaches 3:1, else its ink. */
.m10-head :focus-visible {
  outline-color: var(--head-focus, var(--focus));
}

.m10-names {
  flex: 1;
  min-width: 0;
}

.m10-name {
  margin: 0;
  font-size: clamp(17px, 4.4vw, 22px);
  font-weight: 300;
  line-height: 1.3;
  color: var(--head-ink, #F4F4F4);
  overflow-wrap: anywhere;
}

.m10-tag {
  margin: 4px 0 0;
  font-size: 12.5px;
  font-weight: 400;
  line-height: 1.6;
  color: var(--head-sub, #8D9AB5);
}

/* His wilaya, address, phones and e-mail: a column beside, after a rule (lines 2066–2072). */
.m10-facts {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  flex: 0 0 auto;
  min-width: 0;
  padding-inline-start: 24px;
  border-inline-start: 1px solid var(--head-line, #757F92);
}

.m10-fact {
  font-size: 12px;
  font-weight: 400;
  line-height: 1.75;
  color: var(--head-sub, #8D9AB5);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  unicode-bidi: isolate;
}

/* The phones (WhatsApp, contract §10 b) and the e-mail: #F4F4F4 on navy, 14.66:1. */
.m10-fact-link {
  color: var(--head-ink, #F4F4F4);
  text-decoration: underline;
}

/* The phone's head (lines 2075–2094). */
.m10-frame-phone .m10-head {
  display: block;
  padding: 10px 14px 4px;
}

.m10-frame-phone .m10-id {
  gap: 12px;
}

.m10-frame-phone .m10-mark {
  flex: 0 0 48px;
  width: 48px;
  height: 48px;
  font-size: 17px;
}

.m10-frame-phone .m10-name {
  font-size: 17px;
}

.m10-frame-phone .m10-tag {
  margin-top: 2px;
  font-size: 11px;
  line-height: 1.55;
}

/* The wilaya · the address: #A9B8D6 on navy, 8.07:1. */
.m10-place {
  margin: 6px 0 0;
  font-size: 11px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--head-place, #A9B8D6);
  overflow-wrap: anywhere;
}

/* The phones, then the e-mail, each a 44 px target. They wrap rather than cut the e-mail. */
.m10-reach {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  column-gap: 12px;
  margin-top: 2px;
  min-width: 0;
}

.m10-tel,
.m10-mail {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex: 0 0 auto;
  height: 44px;
  padding: 0 4px;
  box-sizing: border-box;
  font-size: 11.5px;
  font-weight: 400;
  color: var(--head-ink, #F4F4F4);
  text-decoration: none;
  white-space: nowrap;
}

.m10-mail {
  order: 9;
  gap: 6px;
}

.m10-reach-text {
  font-variant-numeric: tabular-nums;
}

.m10-icon {
  flex: 0 0 11px;
  width: 11px;
  height: 11px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* The search (lines 2123–2127, 21b): a white bar over the count, kept at the top while the
   phone's store scrolls (`stSearchPos`). */
.m10-search {
  position: sticky;
  top: 0;
  z-index: 9;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 14px var(--m10-side) 16px;
  background: var(--white);
}

.m10-frame-phone .m10-search {
  padding: 18px 12px 10px;
}

/* Its field: #161616 on #F4F4F4, 16.45:1; its words #6F6F6F, 4.57:1. Its edge is the build's
   #8D8D8D (3.32:1), not the prototype's #C6C6C6 (the map's P8); navy while he types in it. */
.m10-find {
  flex: 1 1 200px;
  min-width: 110px;
  max-width: 460px;
  height: 44px;
  box-sizing: border-box;
  padding: 0 14px;
  border: 1px solid var(--line-control);
  border-radius: 8px;
  background: var(--gray-1);
  font: inherit;
  font-size: 13.5px;
  font-weight: 400;
  color: var(--ink);
}

.m10-frame-phone .m10-find {
  flex: 1 1 auto;
  min-width: 0;
  max-width: none;
}

.m10-find:focus {
  border-color: var(--navy);
}

.m10-find:focus-visible {
  outline: none;
}

.m10-find::placeholder {
  color: var(--text-3);
  opacity: 1;
}

/* The desktop's lists (21c; lines 2135–2166; contract M10.filter.drop): a button naming what is
   chosen, #161616 on white, 18.10:1; its edge the build's #8D8D8D (P8), navy under the mouse
   and while it is open. */
.m10-drop {
  position: relative;
  flex: 0 0 auto;
}

.m10-drop-btn,
.m10-avail {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  height: 44px;
  padding: 0 12px;
  box-sizing: border-box;
  border: 1px solid var(--line-control);
  border-radius: 8px;
  background: var(--white);
  font: inherit;
  font-size: 12.5px;
  font-weight: 400;
  color: var(--ink);
  white-space: nowrap;
  cursor: pointer;
}

.m10-drop-btn:hover,
.m10-drop-btn[aria-expanded='true'] {
  border-color: var(--navy);
}

.m10-chevron {
  display: block;
  flex: 0 0 7px;
  width: 7px;
  height: 7px;
  box-sizing: border-box;
  border-right: 1.5px solid var(--ink-2);
  border-bottom: 1.5px solid var(--ink-2);
  transform: rotate(45deg) translate(-1px, -1px);
}

/* Its choices, under it, as wide as they need (line 2142). */
.m10-drop-panel {
  position: absolute;
  top: 46px;
  inset-inline-start: 0;
  z-index: 30;
  width: max-content;
  min-width: 100%;
  max-height: 260px;
  overflow-y: auto;
  box-sizing: border-box;
  background: var(--white);
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  box-shadow: 0 10px 26px rgba(13, 32, 66, .14);
}

/* Each line #161616 on white, 18.10:1, on #F4F4F4 under the mouse, 16.45:1; a chosen one white
   on navy, 16.12:1. */
.m10-drop-all,
.m10-opt {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 38px;
  padding: 0 14px;
  box-sizing: border-box;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: var(--white);
  font: inherit;
  font-size: 12.5px;
  font-weight: 400;
  color: var(--ink);
  white-space: nowrap;
  cursor: pointer;
}

.m10-drop-all:hover,
.m10-opt:hover {
  background: var(--gray-1);
}

.m10-opt.is-on,
.m10-opt.is-on:hover {
  background: var(--navy);
  color: var(--white);
}

/* The checkbox itself is not drawn: its line is (the prototype's); the focus ring is the line's. */
.m10-opt-box {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.m10-opt:has(.m10-opt-box:focus-visible) {
  outline: 2px solid var(--focus);
  outline-offset: -2px;
}

/* «Only available»: on, white on navy, 16.12:1, 600 (line 2169). */
.m10-avail {
  padding: 0 14px;
}

.m10-avail:hover {
  background: var(--gray-1);
  border-color: var(--navy);
}

.m10-avail[aria-pressed='true'],
.m10-avail[aria-pressed='true']:hover {
  border-color: var(--navy);
  background: var(--navy);
  font-weight: 600;
  color: var(--white);
}

/* The way to clear them: navy on white, 16.12:1, a 44 px target (line 2171). */
.m10-unfilter,
.m10-unfilter-none,
.m10-sheet-unfilter {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 12px;
  font-weight: 400;
  color: var(--navy);
  text-decoration: underline;
  white-space: nowrap;
  cursor: pointer;
}

/* The phone's field, with the filter button and «×» in its box (lines 2127–2131). */
.m10-findbox {
  display: flex;
  align-items: stretch;
  flex: 1 1 0;
  min-width: 0;
  height: 44px;
  box-sizing: border-box;
  border: 1px solid var(--line-control);
  border-radius: 8px;
  overflow: hidden;
  background: var(--gray-1);
}

.m10-findbox:focus-within {
  border-color: var(--navy);
}

.m10-findbox .m10-find {
  height: 100%;
  border: 0;
  border-radius: 0;
  background: transparent;
}

/* The filter button: its icon #161616 on white; its word heard only; how many filters are on,
   white on navy, 16.12:1. */
.m10-filter-btn,
.m10-unfilter-x {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 44px;
  min-width: 44px;
  padding: 0;
  box-sizing: border-box;
  border: 0;
  border-inline-start: 1px solid var(--line-control);
  background: var(--white);
  font: inherit;
  color: var(--ink);
  cursor: pointer;
}

.m10-filter-btn:hover,
.m10-unfilter-x:hover {
  background: var(--gray-1);
}

.m10-filter-icon {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.m10-filter-word {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.m10-badge {
  position: absolute;
  top: 5px;
  inset-inline-start: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  box-sizing: border-box;
  border-radius: 999px;
  background: var(--navy);
  font-size: 11px;
  font-weight: 600;
  color: var(--white);
  font-variant-numeric: tabular-nums;
}

/* «×», clearing them: #525252 on white, 7.81:1; #161616 on #F4F4F4 under the mouse. */
.m10-unfilter-x {
  font-size: 15px;
  color: var(--ink-2);
}

.m10-unfilter-x:hover {
  color: var(--ink);
}

/* The phone's sheet, at the store's foot over its rows (lines 2429–2461). */
.m10-sheet {
  position: sticky;
  bottom: 0;
  z-index: 12;
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  max-height: 78%;
  margin-top: auto;
  padding: 14px 16px 16px;
  box-sizing: border-box;
  background: var(--white);
  border-top: 1px solid var(--line);
  border-radius: 14px 14px 0 0;
  box-shadow: 0 -10px 26px rgba(13, 32, 66, .14);
}

.m10-sheet-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex: 0 0 auto;
  margin-bottom: 12px;
}

.m10-sheet-title {
  margin: 0;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink);
}

/* «×»: #525252 on white, 7.81:1. */
.m10-sheet-x {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  box-sizing: border-box;
  border: 1px solid var(--line-control);
  border-radius: 8px;
  background: var(--white);
  font: inherit;
  font-size: 14px;
  color: var(--ink-2);
  cursor: pointer;
}

.m10-sheet-x:hover {
  background: var(--gray-1);
  color: var(--ink);
}

.m10-sheet-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}

/* Each section's name: #525252 on white, 7.81:1. */
.m10-sheet-label {
  margin: 0 0 7px;
  font-size: 11px;
  font-weight: 400;
  color: var(--ink-2);
}

.m10-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

/* A chip: #161616 on white, its count #525252, 7.81:1; chosen, white on navy, its count
   #A9B8D6, 8.07:1. */
.m10-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 44px;
  padding: 0 14px;
  box-sizing: border-box;
  border: 1px solid var(--line-control);
  border-radius: 999px;
  background: var(--white);
  font: inherit;
  font-size: 12.5px;
  font-weight: 400;
  color: var(--ink);
  white-space: nowrap;
  cursor: pointer;
}

.m10-chip:hover {
  background: var(--gray-1);
  border-color: var(--navy);
}

.m10-chip-n {
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}

.m10-chip[aria-pressed='true'],
.m10-chip[aria-pressed='true']:hover {
  border-color: var(--navy);
  background: var(--navy);
  font-weight: 600;
  color: var(--white);
}

.m10-chip[aria-pressed='true'] .m10-chip-n {
  color: #A9B8D6;
}

/* «Only available» in the sheet, the row's width (line 2454). */
.m10-sheet-avail {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 46px;
  box-sizing: border-box;
  border: 1px solid var(--line-control);
  border-radius: 8px;
  background: var(--white);
  font: inherit;
  font-size: 13px;
  font-weight: 400;
  color: var(--ink);
  cursor: pointer;
}

.m10-sheet-avail:hover {
  background: var(--gray-1);
  border-color: var(--navy);
}

.m10-sheet-avail[aria-pressed='true'],
.m10-sheet-avail[aria-pressed='true']:hover {
  border-color: var(--navy);
  background: var(--navy);
  font-weight: 600;
  color: var(--white);
}

.m10-sheet-foot {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex: 0 0 auto;
  margin-top: 13px;
}

.m10-sheet-unfilter {
  font-size: 12.5px;
}

/* How many parts show (line 2199): #6F6F6F on white, 5.02:1 — the owner's grey, not the
   prototype's #8C8C8C (N613). */
.m10-count {
  flex: 0 0 auto;
  margin: 0;
  padding: 0 26px 10px;
  border-bottom: 1px solid var(--line);
  font-size: 11px;
  font-weight: 400;
  color: var(--text-3);
  white-space: nowrap;
}

/* Heard, not seen: the count once his typing pauses; a copy's words. */
.m10-heard,
.m10-told,
.m10-order-heard {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* The list: on the desktop it scrolls, sideways too below the grid's width (DESIGN.md §8: the
   table does not reflow); on the phone it is part of the page. */
.m10-list {
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: 0 var(--m10-side);
}

.m10-frame-phone .m10-list {
  flex: 0 0 auto;
  overflow: visible;
}

/* Its focus drawn inside it, as the frame clips what lies outside. */
.m10-list:focus-visible {
  outline-offset: -2px;
}

.m10-rows {
  margin: 0 calc(-1 * var(--m10-side));
  padding: 0;
  list-style: none;
}

/* The grid needs 992 px: its last column may use the row's end padding, as the prototype's
   does at 1040 px; below that the list scrolls. */
.m10-frame-desk .m10-rows {
  min-width: calc(992px + var(--m10-side));
}

.m10-row {
  border-bottom: 1px solid var(--line);
  box-sizing: border-box;
}

.m10-row:hover {
  background: var(--gray-1);
}

/* A desktop row (14 Oct): one grid, the same on every row, so the columns align with no
   header row. */
.m10-row-desk {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) 140px 100px 84px 68px 96px 104px 150px;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 6px var(--m10-side);
}

.m10-row-desk .m10-des {
  min-width: 0;
  font-size: 14px;
  font-weight: 400;
  line-height: 18px;
  color: var(--ink);
  overflow-wrap: break-word;
}

/* The reference and its copy's words: beside it while they fit, under it when not (21b). */
.m10-row-desk .m10-ref {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 4px;
  min-width: 0;
  padding-inline-end: 8px;
  font-size: 14px;
  color: var(--ink);
}

.m10-row-desk .m10-marque {
  font-size: 14px;
  color: var(--ink);
  white-space: nowrap;
}

/* The country and the day: #525252, 7.81:1 on white, 7.10:1 under the mouse. */
.m10-row-desk .m10-pays,
.m10-row-desk .m10-date {
  font-size: 13px;
  color: var(--ink-2);
  white-space: nowrap;
}

.m10-row-desk .m10-date {
  font-variant-numeric: tabular-nums;
}

/* The state: a shape, then its word (contract M10.state). */
.m10-state {
  color: var(--ink);
  white-space: nowrap;
  unicode-bidi: isolate;
}

.m10-row-desk .m10-state {
  font-size: 14px;
}

.m10-shape {
  display: inline-block;
  width: 9px;
  height: 9px;
  margin-inline-end: 6px;
  border-radius: 9999px;
  background: #0A7A5A;
  vertical-align: middle;
}

.m10-state-unsure .m10-shape {
  box-sizing: border-box;
  border: 2px solid #8A6A12;
  background: none;
}

/* «غير متوفّر»: #6F6F6F, 5.02:1 on white and 4.57:1 under the mouse — the owner's grey, not
   the prototype's #8C8C8C (N613). */
.m10-state-out {
  color: var(--text-3);
}

.m10-state-out .m10-shape {
  height: 3px;
  border-radius: 2px;
  background: #DA1E28;
}

/* The price, a live offer stacked over it (14 Oct): «دج» after the number, smaller and
   quieter (contract M10.money). */
.m10-price {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  min-width: 0;
}

.m10-off {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

/* The discount: navy on orange, 6.84:1. */
.m10-pct {
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding: 0 7px;
  border-radius: 4px;
  background: var(--orange);
  font-size: 10.5px;
  font-weight: 600;
  color: var(--navy);
}

/* The original, struck: #6F6F6F (N613), 5.02:1, 4.57:1 under the mouse. */
.m10-was {
  font-size: 12px;
  font-weight: 400;
  color: var(--text-3);
  font-variant-numeric: tabular-nums;
}

.m10-prix {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
  direction: rtl;
  unicode-bidi: isolate;
}

.m10-num {
  font-variant-numeric: tabular-nums;
}

.m10-dzd {
  font-size: .82em;
  font-weight: 400;
  color: var(--ink-2);
}

/* What the search found (contract M10.hi; 14 Oct): 600 on #EBEFF7, #161616, 15.70:1. */
.m10-hit {
  padding: 0 2px;
  border-radius: 3px;
  background: #EBEFF7;
  font-weight: 600;
  color: var(--ink);
}

/* A reference: a button that copies it (lines 2216, 2243). #161616 on white, 18.10:1; under
   the mouse on #EBEFF7, 15.70:1. Its icon 11 px, #6F6F6F rather than #8C8C8C (N613). */
.m10-copy {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 20px;
  padding: 0;
  border: 0;
  border-radius: 3px;
  background: none;
  font: inherit;
  line-height: 18px;
  color: var(--ink);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  unicode-bidi: isolate;
  cursor: pointer;
}

.m10-copy:hover {
  background: #EBEFF7;
}

.m10-copy-icon {
  flex: 0 0 11px;
  width: 11px;
  height: 11px;
  fill: none;
  stroke: var(--text-3);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Its words once the clipboard has answered: refused #161616, 18.10:1; copied green #0A7A5A,
   5.32:1 on white and 4.84:1 under the mouse. */
.m10-said {
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
  direction: rtl;
  unicode-bidi: isolate;
}

/* Under a long reference, its line keeps the row at 48 px. */
.m10-row-desk .m10-said {
  line-height: 16px;
}

.m10-meta .m10-said {
  margin-inline-start: 4px;
}

.m10-said.is-copied {
  color: #0A7A5A;
}

/* Nothing found (lines 2266–2271): #525252 on #F4F4F4, 7.10:1; the way to clear the search
   navy, 14.66:1, a 44 px target. */
.m10-none,
.m10-nofilter {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 12px 0 18px;
  padding: 13px 15px;
  border-inline-start: 3px solid var(--navy);
  border-radius: 8px;
  background: var(--gray-1);
}

.m10-none-text,
.m10-nofilter-text {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 11.5px;
  font-weight: 400;
  line-height: 1.7;
  color: var(--ink-2);
}

/* Nothing passes the filters: the way to clear them right after the line, as the prototype's
   (lines 2273–2274), not at the box's end. */
.m10-nofilter-text {
  flex: 0 1 auto;
}

.m10-unfilter-none {
  margin: -12px 0;
}

.m10-clear {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  min-height: 44px;
  margin: -12px 0;
  margin-inline-start: auto;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  color: var(--navy);
  text-decoration: underline;
  white-space: nowrap;
  cursor: pointer;
}

/* The order's column (21d; lines 2222–2233): «add», or − how many +, at the row's end. */
.m10-act {
  display: flex;
  justify-content: flex-end;
  min-width: 0;
}

.m10-order {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
}

/* «Add»: #161616 on white, 18.10:1; under the mouse on #F4F4F4, 16.45:1; its edge the build's
   #8D8D8D (P8), navy under the mouse. */
.m10-add {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  padding: 0 18px;
  box-sizing: border-box;
  border: 1px solid var(--line-control);
  border-radius: 8px;
  background: var(--white);
  font: inherit;
  font-size: 12.5px;
  font-weight: 400;
  color: var(--ink);
  white-space: nowrap;
  cursor: pointer;
}

.m10-add:hover {
  background: var(--gray-1);
  border-color: var(--navy);
}

/* − how many +: 36 · 40 · 36 px, 5 px apart on the desktop (README «M10 — store table»). */
.m10-step {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 36px;
}

.m10-minus,
.m10-plus {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  box-sizing: border-box;
  border: 1px solid var(--line-control);
  border-radius: 4px;
  background: var(--white);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
}

.m10-minus:hover,
.m10-plus:hover {
  background: var(--gray-1);
}

/* + at 999 does nothing: #6F6F6F, 5.02:1. */
.m10-plus[aria-disabled='true'],
.m10-plus[aria-disabled='true']:hover {
  background: var(--white);
  color: var(--text-3);
  cursor: default;
}

/* How many: 600 #161616 on white, 18.10:1; navy edge while he types. */
.m10-qty {
  width: 40px;
  height: 36px;
  padding: 0 4px;
  box-sizing: border-box;
  border: 1px solid var(--line-control);
  border-radius: 4px;
  background: var(--white);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink);
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.m10-qty:focus {
  border-color: var(--navy);
}

.m10-qty:focus-visible {
  outline: none;
}

/* On the phone (lines 2250–2260): at the line's end, 44 px; the stepper one box, 44 · 36 · 44. */
.m10-row-phone .m10-order {
  margin-inline-start: auto;
}

.m10-row-phone .m10-add {
  height: 44px;
}

.m10-row-phone .m10-step {
  gap: 0;
  height: 44px;
  border: 1px solid var(--line-control);
  border-radius: 8px;
  overflow: hidden;
}

.m10-row-phone .m10-minus,
.m10-row-phone .m10-plus {
  width: 44px;
  height: 42px;
  border: 0;
  border-radius: 0;
}

.m10-row-phone .m10-qty {
  width: 36px;
  height: 42px;
  border: 0;
  border-radius: 0;
}

/* The cart (lines 2181–2189; contract M10.cart), at the desktop's search bar's start and on its
   own line on the phone (R41): how many pieces #A9B8D6 on navy, 8.07:1, over the total, white,
   16.12:1; then the review's word, navy on orange, 6.84:1. Under the mouse its navy is #16294D.
   One button, no floating badge (Director N682 item 7). */
.m10-cart,
.m10-cart-phone {
  display: inline-flex;
  align-items: stretch;
  flex: 0 0 auto;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  overflow: hidden;
  background: var(--navy);
  font: inherit;
  cursor: pointer;
}

.m10-cart:hover,
.m10-cart-phone:hover {
  background: var(--navy-hover);
}

.m10-cart-sum {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 14px;
}

.m10-cart-n {
  font-size: 10.5px;
  font-weight: 400;
  line-height: 1.3;
  color: #A9B8D6;
  white-space: nowrap;
}

.m10-cart-total {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--white);
  text-align: right;
  white-space: nowrap;
}

.m10-cart-num {
  font-variant-numeric: tabular-nums;
  unicode-bidi: isolate;
}

.m10-cart-go {
  display: inline-flex;
  align-items: center;
  padding: 0 14px;
  background: var(--orange);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--navy);
  white-space: nowrap;
}

/* The phone's cart on its own line under the field, at its start, as the 14 Oct prototype draws
   it (R41; N642 item 4, N647 item 1). */
.m10-frame-phone .m10-findbox {
  flex: 1 1 100%;
}

/* A control held while a send is out (21e): #6F6F6F on white, 5.02:1. */
.m10-minus[aria-disabled='true'],
.m10-minus[aria-disabled='true']:hover,
.m10-add[aria-disabled='true'],
.m10-add[aria-disabled='true']:hover {
  background: var(--white);
  color: var(--text-3);
  cursor: default;
}

/* The review (21e; lines 2343–2423): in the frame, under the head, its lines at most 720 px wide.
   On the desktop its lines scroll and the total stays under them; on the phone the whole store
   scrolls, as a phone's page. */
.m10-review {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.m10-frame-phone .m10-review {
  flex: 0 0 auto;
}

.m10-rv-body {
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: 0 var(--m10-side) 8px;
}

.m10-frame-phone .m10-rv-body {
  flex: 0 0 auto;
  overflow: visible;
}

.m10-rv-body > * {
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}

/* Its title bar (line 2347), at the top while the lines scroll: the way back, then «your order from»
   and the shop's name, 300, #161616 on white, 18.10:1. */
.m10-rv-head {
  position: sticky;
  top: 0;
  z-index: 8;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  margin-bottom: 12px;
  padding: 12px 0;
  background: var(--white);
}

.m10-frame-phone .m10-rv-head {
  margin-bottom: 8px;
  padding: 4px 0;
}

/* The way back (line 2348): a 44 px round target, its arrow #161616; #F4F4F4 under the mouse. */
.m10-rv-back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  margin-inline-start: -12px;
  margin-inline-end: -6px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
}

.m10-rv-back:hover {
  background: var(--gray-1);
}

.m10-back-icon {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  transform: scaleX(-1);
}

.m10-rv-title {
  flex: 1 1 0;
  min-width: 0;
  margin: 0;
  font-size: 18px;
  font-weight: 300;
  line-height: 1.3;
  color: var(--ink);
  overflow-wrap: anywhere;
}

.m10-frame-phone .m10-rv-title {
  font-size: 16px;
}

.m10-rv-shop {
  unicode-bidi: isolate;
}

/* Its lines (lines 2355–2387), in one box with #E0E0E0 edges. */
.m10-rv-lines {
  margin-top: 0;
  margin-bottom: 0;
  padding: 0;
  list-style: none;
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
}

.m10-rv-line {
  padding: 11px 14px;
  border-bottom: 1px solid var(--line);
}

.m10-rv-line:last-child {
  border-bottom: 0;
}

.m10-rv-top {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.m10-rv-info {
  flex: 1 1 auto;
  min-width: 0;
}

/* The name · the brand: #161616, 18.10:1, the brand 600; the dot #6F6F6F. */
.m10-rv-name {
  font-size: 12.5px;
  font-weight: 400;
  line-height: 1.4;
  color: var(--ink);
  text-align: right;
  overflow-wrap: anywhere;
}

.m10-rv-marque {
  font-weight: 600;
}

.m10-rv-name .m10-dot {
  color: var(--text-3);
}

/* The reference and the country, and the unit price: #525252, 7.81:1; the reference and the
   price #161616. The price he chose it at, struck before today's: #6F6F6F, 5.02:1 (N647). */
.m10-rv-meta,
.m10-rv-unit {
  margin-top: 2px;
  font-size: 11px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--ink-2);
}

.m10-rv-meta {
  text-align: right;
}

.m10-frame-phone .m10-rv-meta .m10-copy {
  min-height: 44px;
  margin: -13px 0;
}

.m10-rv-meta .m10-said {
  margin-inline-start: 4px;
}

.m10-rv-price,
.m10-rv-was,
.m10-rv-linesum-num,
.m10-rv-total-num {
  font-variant-numeric: tabular-nums;
  unicode-bidi: isolate;
}

.m10-rv-price {
  color: var(--ink);
}

.m10-rv-was {
  color: var(--text-3);
}

/* × (line 2364): 24 px on the desktop, 44 px on the phone; #6F6F6F, 5.02:1 (the prototype's
   #8C8C8C is under AA, P2); under the mouse #A2191F on #FFF1F1, 7.09:1. */
.m10-rv-x {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: flex-start;
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: transparent;
  font: inherit;
  font-size: 14px;
  line-height: 1;
  color: var(--text-3);
  cursor: pointer;
}

.m10-rv-x:hover {
  background: #FFF1F1;
  color: #A2191F;
}

.m10-rv-x[aria-disabled='true'],
.m10-rv-x[aria-disabled='true']:hover {
  background: transparent;
  color: var(--text-3);
  cursor: default;
}

.m10-frame-phone .m10-rv-x {
  width: 44px;
  height: 44px;
  margin: -11px -10px 0 0;
}

/* A question in place (lines 2368–2372, 2394–2398): #161616 on #F4F4F4, 16.45:1, a red rule at
   its start; its yes white on red #DA1E28, 5.00:1, #BA1B23 under the mouse, 6.42:1; its no
   #525252, 7.10:1, #161616 under the mouse. */
.m10-rv-ask {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 9px;
  padding: 9px 11px;
  background: var(--gray-1);
  border-inline-start: 3px solid #DA1E28;
  border-radius: 6px;
}

.m10-rv-ask-all {
  gap: 10px 14px;
  margin-top: 8px;
  padding: 11px 14px;
  border-radius: 8px;
}

.m10-rv-ask-text {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 11.5px;
  line-height: 1.7;
  color: var(--ink);
}

.m10-rv-ask-all .m10-rv-ask-text {
  font-size: 12px;
}

.m10-rv-yes {
  display: inline-flex;
  align-items: center;
  height: 28px;
  padding: 0 12px;
  border: 0;
  border-radius: 6px;
  background: #DA1E28;
  font: inherit;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--white);
  cursor: pointer;
}

.m10-rv-yes:hover {
  background: #BA1B23;
}

.m10-rv-ask-all .m10-rv-yes {
  height: 32px;
  padding: 0 14px;
  border-radius: 8px;
  font-size: 12px;
}

.m10-rv-keep {
  min-height: 24px;
  padding: 0;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: 11.5px;
  color: var(--ink-2);
  cursor: pointer;
}

.m10-rv-keep:hover {
  color: var(--ink);
}

.m10-rv-ask-all .m10-rv-keep {
  font-size: 12px;
}

.m10-frame-phone .m10-rv-yes,
.m10-frame-phone .m10-rv-keep {
  min-height: 44px;
}

/* − how many +, and what the line costs (lines 2374–2385): 28 px on the desktop (`stRvBtn`); on
   the phone one 44 px box, as the store's. The cost #161616 600; «DZD» smaller, #525252. */
.m10-rv-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 9px;
}

.m10-rv-row .m10-step {
  height: 28px;
}

.m10-rv-row .m10-minus,
.m10-rv-row .m10-plus {
  width: 28px;
  height: 28px;
}

.m10-rv-row .m10-qty {
  height: 28px;
  font-size: 12.5px;
}

.m10-frame-phone .m10-rv-row .m10-step {
  gap: 0;
  height: 44px;
  margin-inline-start: auto;
  border: 1px solid var(--line-control);
  border-radius: 8px;
  overflow: hidden;
}

.m10-frame-phone .m10-rv-row .m10-minus,
.m10-frame-phone .m10-rv-row .m10-plus {
  width: 44px;
  height: 42px;
  border: 0;
  border-radius: 0;
}

.m10-frame-phone .m10-rv-row .m10-qty {
  width: 36px;
  height: 42px;
  border: 0;
  border-radius: 0;
}

.m10-rv-linesum {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
}

.m10-rv-dzd {
  font-size: .82em;
  font-weight: 400;
  color: var(--ink-2);
}

/* A part that left the order (N647): its name and reference #525252, 7.81:1; its state as the
   store's «unavailable». */
.m10-rv-left .m10-rv-name {
  color: var(--ink-2);
}

.m10-rv-left .m10-state {
  display: inline-block;
  margin-top: 4px;
  font-size: 11.5px;
}

/* «empty the order» (line 2390): #6F6F6F, 5.02:1 (the prototype's #8C8C8C is under AA, P2); #A2191F
   under the mouse, 7.79:1. */
.m10-rv-emptyrow {
  display: flex;
  justify-content: flex-start;
  margin-top: 10px;
}

.m10-rv-empty {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: 11.5px;
  color: var(--text-3);
  white-space: nowrap;
  cursor: pointer;
}

.m10-rv-empty:hover {
  color: #A2191F;
}

.m10-rv-empty[aria-disabled='true'],
.m10-rv-empty[aria-disabled='true']:hover {
  color: var(--text-3);
  cursor: default;
}

.m10-frame-phone .m10-rv-empty {
  min-height: 44px;
}

/* The total and the send (lines 2403–2423): under the lines, a rule above. «total» #525252,
   7.81:1; the total #161616 600, 17 px, «DZD» smaller. */
.m10-rv-bar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  padding: 12px max(var(--m10-side), calc(50% - 360px)) 14px;
  border-top: 1px solid var(--line);
  background: var(--white);
}

.m10-rv-sum {
  flex: 1 1 auto;
  min-width: 0;
}

.m10-rv-sum-label {
  display: block;
  font-size: 11px;
  color: var(--ink-2);
}

.m10-rv-total {
  display: block;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--ink);
}

.m10-rv-total .m10-rv-dzd {
  font-size: .7em;
}

/* «send the order» and «yes, send it»: navy on orange, 6.84:1; #FFA24C under the mouse, 8.08:1. */
.m10-rv-send,
.m10-rv-sendyes {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  height: 46px;
  padding: 0 26px;
  border: 0;
  border-radius: 8px;
  background: var(--orange);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--navy);
  white-space: nowrap;
  cursor: pointer;
}

.m10-rv-send:hover,
.m10-rv-sendyes:hover {
  background: #FFA24C;
}

/* Its question in place (line 2414): #161616, 18.10:1. */
.m10-rv-sendask {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 7px;
  flex: 0 1 auto;
  min-width: 0;
}

.m10-rv-sendto {
  font-size: 12px;
  line-height: 1.6;
  color: var(--ink);
  text-align: left;
  text-wrap: pretty;
}

/* Failed (line 2415): red #DA1E28 on white, 5.00:1, after a red dash. */
.m10-rv-failed {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0;
}

.m10-rv-failed-dash {
  flex: 0 0 9px;
  width: 9px;
  height: 3px;
  border-radius: 2px;
  background: #DA1E28;
}

.m10-rv-failed-text {
  font-size: 11.5px;
  line-height: 1.6;
  color: #DA1E28;
}

/* Out (line 2416): #525252 on #E0E0E0, 5.92:1. */
.m10-rv-busy {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 46px;
  padding: 0 26px;
  box-sizing: border-box;
  border-radius: 8px;
  background: var(--line);
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-2);
  white-space: nowrap;
}

.m10-rv-sendbtns {
  display: flex;
  align-items: center;
  gap: 14px;
}

/* «back»: #525252 underlined, 7.81:1, a 44 px target; #161616 under the mouse. */
.m10-rv-sendback {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: 12.5px;
  color: var(--ink-2);
  text-decoration: underline;
  white-space: nowrap;
  cursor: pointer;
}

.m10-rv-sendback:hover {
  color: var(--ink);
}

/* The order received (lines 2465–2474): over the store, a navy veil and a white card, its mark
   green #0A7A5A, its words #161616 300, 17 px, 18.10:1. Seen only: the screen's status line says
   it. On the phone a sheet from the frame's foot. */
.m10-stage {
  position: relative;
}

.m10-pop {
  position: absolute;
  top: 22px;
  right: 16px;
  bottom: 26px;
  left: 16px;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  padding: 28px;
  pointer-events: none;
}

.m10-pop-veil {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(13, 32, 66, 0.45);
}

.m10-pop-card {
  position: relative;
  width: 100%;
  max-width: 360px;
  box-sizing: border-box;
  padding: 26px 24px;
  border-radius: 14px;
  background: var(--white);
  text-align: center;
}

.m10-pop-mark {
  position: relative;
  display: inline-block;
  width: 46px;
  height: 46px;
  box-sizing: border-box;
  border: 1.5px solid #0A7A5A;
  border-radius: 9999px;
}

.m10-pop-mark::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 15px;
  height: 8px;
  border-left: 2px solid #0A7A5A;
  border-bottom: 2px solid #0A7A5A;
  transform: translate(-50%, -65%) rotate(-45deg);
}

.m10-pop-text {
  margin: 12px 0 0;
  font-size: 17px;
  font-weight: 300;
  line-height: 1.5;
  color: var(--ink);
  text-wrap: pretty;
}

.m10-frame-phone + .m10-pop {
  max-width: 390px;
  align-items: flex-end;
  padding: 0;
}

.m10-frame-phone + .m10-pop .m10-pop-card {
  max-width: none;
  padding: 14px 20px 26px;
  border-radius: 16px 16px 0 0;
}

.m10-frame-phone + .m10-pop .m10-pop-card::before {
  content: '';
  display: block;
  width: 36px;
  height: 4px;
  margin: 0 auto 14px;
  border-radius: 999px;
  background: var(--line);
}
/* A private link's line in the head (21f; lines 2063, 2082): its name in a box, #F4F4F4 on navy,
   14.66:1, its edge #8D9AB5; how many of its parts, #8D9AB5, 5.70:1; the way to the whole store,
   #F4F4F4 underlined, white under the mouse. */
.m10-link {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 10px;
  margin-top: 8px;
}

.m10-link-name {
  display: inline-flex;
  align-items: center;
  height: 24px;
  max-width: 100%;
  padding: 0 9px;
  box-sizing: border-box;
  border: 1px solid var(--head-sub, #8D9AB5);
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--head-ink, #F4F4F4);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  unicode-bidi: plaintext;
}

.m10-link-n {
  font-size: 11.5px;
  font-weight: 400;
  color: var(--head-sub, #8D9AB5);
  white-space: nowrap;
}

.m10-whole {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: 11.5px;
  font-weight: 400;
  color: var(--head-ink, #F4F4F4);
  text-decoration: underline;
  white-space: nowrap;
  cursor: pointer;
}

.m10-whole:hover {
  color: var(--head-hover, var(--white));
}

.m10-frame-phone .m10-whole {
  min-height: 44px;
}

/* A visitor's sign-in (21f; line 2191), at the bar's end: navy on orange, 6.84:1; its line #525252,
   7.81:1, «@gmail.com» set apart left to right. On the phone, its own line at the bar's foot. In
   the preview it does nothing, and says so. */
.m10-signin {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 4px 10px;
  flex: 0 0 auto;
  margin-inline-start: auto;
}

.m10-frame-phone .m10-signin {
  flex-direction: row-reverse;
  flex: 1 1 100%;
  order: 9;
}

.m10-signin-btn {
  display: inline-flex;
  align-items: center;
  height: 34px;
  padding: 0 16px;
  border: 0;
  border-radius: 8px;
  background: var(--orange);
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--navy);
  white-space: nowrap;
  cursor: default;
}

.m10-frame-phone .m10-signin-btn {
  height: 44px;
}

.m10-signin-hint {
  font-size: 10.5px;
  font-weight: 400;
  color: var(--ink-2);
  white-space: nowrap;
}

.m10-signin-mail {
  unicode-bidi: isolate;
}

/* A phone row (lines 2237–2264): the name · the brand, then the reference · the country · the
   state; the price under them. */
.m10-row-phone {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
  min-height: 40px;
  padding: 8px 12px;
}

.m10-info {
  flex: 1 1 100%;
  min-width: 0;
}

.m10-title {
  font-size: 13px;
  font-weight: 400;
  line-height: 1.4;
  color: var(--ink);
  text-align: right;
  text-wrap: pretty;
  overflow-wrap: anywhere;
}

.m10-dot {
  color: var(--text-3);
}

.m10-meta {
  font-size: 11.5px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--ink-2);
}

/* The phone's reference: 600, a 44 px target in its 18 px line (`stRefH`, `stRefMar`). */
.m10-meta .m10-copy {
  min-height: 44px;
  margin: -13px 0;
  font-weight: 600;
}

.m10-buy {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  flex: 1 1 100%;
}

.m10-row-phone .m10-price {
  flex-direction: row;
  align-items: center;
  gap: 10px;
}

/* «SUPPORTED BY MT AUTO», the store's last row (contract M10.foot; line 2427): #525252 on
   white, 7.81:1; navy under the mouse, 16.12:1. */
.m10-foot {
  flex: 0 0 auto;
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
  padding: 14px 26px;
  border-top: 1px solid var(--line);
  background: var(--white);
  font-size: 11px;
  font-weight: 400;
  color: var(--ink-2);
}

.m10-frame-phone .m10-foot {
  padding: 0 16px;
}

.m10-by {
  display: inline-flex;
  align-items: center;
  gap: .35em;
  letter-spacing: .08em;
  white-space: nowrap;
  color: var(--ink-2);
  text-decoration: none;
}

.m10-frame-phone .m10-by {
  min-height: 44px;
}

.m10-by:hover {
  color: var(--navy);
}

.m10-by-name {
  font-weight: 600;
}

/* ── M6 حسابي, his account (step 22, 22b; prototype lines 2670–2839) ───────────
   The header: the title and the save; the body: M8's form in its account mode, and the
   card "how a seller sees you in search" beside it. Fixed faults (the map's P1): the clean
   and the not-ready save, and the card's photo place, in #525252 (5.92:1 on #E0E0E0, 6.43:1
   on #E7E9EE); the prototype's #8C8C8C reads 2.55:1 and 2.77:1. */
.m6 {
  height: 100%;
  display: flex;
  flex-direction: column;
  background: var(--white);
}

.m6-head {
  flex: 0 0 auto;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  padding: 24px 16px 18px;
  border-bottom: 1px solid var(--line);
}

.m6-title {
  margin: 0;
  font-size: 40px;
  font-weight: 300;
  line-height: 1.15;
  color: var(--ink);
}

.m6-save-slot {
  flex: 0 1 auto;
  min-width: 0;
}

.m8-save.m6-save {
  width: auto;
  height: 44px;
  margin-top: 0;
  padding: 0 24px;
  font-size: 13.5px;
  white-space: nowrap;
}

.m8-save.m6-save.is-clean,
.m8-save.m6-save.is-missing {
  background: var(--line);
  color: var(--ink-2);
  cursor: default;
}

/* Not ready: the first problem named; the words may wrap. */
.m8-save.m6-save.is-missing {
  height: auto;
  min-height: 44px;
  max-width: 460px;
  padding: 8px 18px;
  font-weight: 400;
  white-space: normal;
}

.m6-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
}

.m8.m6-form {
  flex: 2 1 460px;
  min-width: 0;
  height: auto;
  overflow: visible;
  display: block;
  padding: 18px 16px 40px;
}

.m6-form .m8-card {
  width: auto;
  padding: 0;
}

.m6-form .m8-section {
  margin-top: 0;
}

.m6-form .m8-section-head {
  padding-bottom: 0;
  border-bottom: 0;
}

.m6-form .m8-section-title {
  font-size: 15px;
}

.m8-fields.m6-fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
  margin-top: 12px;
}

.m6-fields > * {
  min-width: 0;
}

.m6-fields > .m6-wide {
  grid-column: 1 / -1;
}

.m6-fields > .m8-after {
  margin-top: 0;
}

/* The card (22b; lines 2810–2832). */
.m6-card-col {
  flex: 1 1 320px;
  max-width: 470px;
  min-width: 0;
  box-sizing: border-box;
  padding: 18px 16px 58px;
  border-inline-start: 1px solid var(--line);
  background: var(--gray-1);
}

.m6-card-title {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
}

.m6-card {
  margin-top: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
  background: var(--white);
}

.m6-card-photo {
  height: 96px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #E7E9EE;
  font-size: 12px;
  font-weight: 400;
  color: var(--ink-2);
}

.m6-card-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.m6-card-body {
  padding: 13px 14px;
}

.m6-card-name {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--ink);
  overflow-wrap: anywhere;
}

.m6-card-place,
.m6-card-spec {
  margin-top: 3px;
  font-size: 12.5px;
  font-weight: 400;
  line-height: 1.6;
  color: var(--ink-2);
  overflow-wrap: anywhere;
}

.m6-card-reach {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
}

.m6-card-chip {
  display: inline-flex;
  align-items: center;
  height: 26px;
  padding: 0 10px;
  border-radius: 6px;
  background: var(--gray-1);
  font-size: 11.5px;
  font-weight: 400;
  color: var(--ink);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.m6-card-mail {
  min-width: 0;
  font-size: 11.5px;
  font-weight: 400;
  color: var(--ink);
  overflow-wrap: anywhere;
}

.m6-card-hours {
  margin-top: 10px;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.6;
  color: var(--ink-2);
}

/* The minimum order's row (22c; prototype lines 2825–2828), then his parts' count under it. */
.m6-card-min,
.m6-card-count {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.m6-card-min {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}

.m6-card-count {
  margin-top: 5px;
}

.m6-card-min-label {
  font-size: 12px;
  font-weight: 400;
  color: var(--ink-2);
  white-space: nowrap;
}

.m6-card-min-v {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.m6-card-count-label {
  font-size: 12px;
  font-weight: 400;
  color: var(--ink-2);
  white-space: nowrap;
}

.m6-card-count-n {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

/* ── M7, help (step 23; prototype lines 2841–2852) ─────────────────────────── */

/* One column in the middle of a white screen; it scrolls when the window is short. */
/* M7's page area stretches to the bottom of the window, as the prototype's M7 does under its bar (line
   2842; Director N824 item 1), so the column sits in its middle. */
.screen[data-screen="M7"] {
  display: flex;
  flex-direction: column;
}

.m7 {
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding: 28px 16px 72px;
  background: var(--white);
  overflow-y: auto;
}

.m7-column {
  width: 480px;
  max-width: 100%;
  box-sizing: border-box;
  text-align: center;
}

.m7-title {
  margin: 0;
  font-size: 34px;
  font-weight: 300;
  line-height: 1.2;
  color: var(--ink);
}

/* #525252 on white, 7.81:1. */
.m7-line {
  margin: 10px 0 0;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.8;
  color: var(--ink-2);
  text-wrap: balance;
}

.m7-actions,
.m7-back-row {
  display: flex;
  justify-content: center;
}

.m7-actions {
  margin-top: 24px;
}

/* The platform's WhatsApp: navy on orange, 7.71:1; #FFA24C under the mouse. */
.m7-whatsapp {
  display: inline-flex;
  align-items: center;
  height: 48px;
  padding: 0 26px;
  box-sizing: border-box;
  background: var(--orange);
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--navy);
  text-decoration: none;
  white-space: nowrap;
}

.m7-whatsapp:hover {
  background: #FFA24C;
}

.m7-back-row {
  margin-top: 8px;
}

/* Back to the screen he came from: 44 px, navy, underlined. */
.m7-back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 12px;
  border: 0;
  background: none;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 400;
  color: var(--navy);
  text-decoration: underline;
  /* The line drawn whole, under the letters too (N824 item 2). */
  text-decoration-skip-ink: none;
  white-space: nowrap;
  cursor: pointer;
}

/* ── The minimum order (step 22c; Director N788 item 1) ────────────────────────── */

/* M6's field (prototype lines 2790–2795): its title as a section's, the amount and «دج», its line. */
.m6-min {
  margin-top: 24px;
}

.m6-min-title {
  display: block;
  margin-bottom: 10px;
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
}

.m6-min-row {
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 320px;
}

.m8-input.m6-min-input {
  flex: 1;
  min-width: 0;
  font-weight: 600;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.m6-min-dzd {
  font-size: 13px;
  color: var(--ink-2);
  white-space: nowrap;
}

/* #525252 on white, 7.81:1. */
.m6-min-hint {
  margin: 10px 0 0;
  font-size: 12px;
  line-height: 1.7;
  color: var(--ink-2);
  text-wrap: pretty;
}

/* M10's review: the minimum under the total, #525252; red #DA1E28 while the order is under it,
   5.00:1 on white. */
.m10-rv-min {
  display: block;
  margin-top: 2px;
  font-size: 12px;
  color: var(--ink-2);
}

.m10-rv-min.is-below {
  color: #DA1E28;
}

/* What the order lacks to reach his minimum (Director N833), under the red row: #DA1E28 on white,
   5.00:1; hidden at the minimum or over it. */
.m10-rv-short {
  display: block;
  margin-top: 2px;
  font-size: 12px;
  font-weight: 600;
  color: #DA1E28;
  text-wrap: pretty;
}

.m10-rv-short[hidden] {
  display: none;
}

/* The send while the order is under the minimum: unavailable, #525252 on #E0E0E0, 5.92:1. */
.m10-rv-send[aria-disabled="true"],
.m10-rv-send[aria-disabled="true"]:hover {
  background: var(--line);
  color: var(--ink-2);
  cursor: default;
}

/* ── M14, his subscription (step 24; prototype lines 1683–1990) ──────────────── */

/* M9S's head with the renewal stopped (lines 1252–1267): the dot an amber ring; «resume». */
.m9s-life-warn .m9s-life-head .m9s-dot {
  box-sizing: border-box;
  background: none;
  border: 2px solid #8A6A12;
}

.m9s-resume,
.m9s-pay,
.m9s-reopen,
.m14-pay-open,
.m14-resume,
.m14-reopen {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  height: 34px;
  padding: 0 16px;
  border: 0;
  border-radius: 8px;
  background: var(--orange);
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--navy);
  white-space: nowrap;
  cursor: pointer;
}

.m14-resume,
.m14-pay-open,
.m14-reopen {
  height: 36px;
  font-size: 13px;
}

/* Ended, M9S's card (24b-3; lines 1240–1250): «reactivate your store», larger. */
.m9s-reopen {
  height: 44px;
  padding: 0 24px;
  font-size: 13.5px;
}

.m9s-pay:hover,
.m9s-reopen:hover,
.m14-reopen:hover,
.m14-pay-open:hover {
  background: #FFA24C;
}

.m9s-resume:hover,
.m14-resume:hover {
  background: #FFA24C;
}

.m9s-row {
  cursor: pointer;
}

.m14 {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  background: var(--white);
}

.m14-page {
  max-width: 900px;
  margin: 0 auto;
  padding: 22px 16px 64px;
}

.m14-top {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 12px;
}

.m14-title {
  flex: 1 1 auto;
  margin: 0;
  font-size: 26px;
  font-weight: 300;
  color: var(--ink);
}

/* #525252 on white, 7.81:1. */
.m14-now {
  font-size: 12.5px;
  color: var(--ink-2);
  white-space: nowrap;
}

.m14-num {
  font-variant-numeric: tabular-nums;
}

.m14-box {
  margin-top: 16px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.m14-box-head {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 34px;
  margin-bottom: 12px;
}

.m14-sec {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
}

/* «غيّر الخطّة»: navy on white, 16.12:1; #F4F4F4 under the mouse, 14.77:1. */
.m14-switch {
  display: inline-flex;
  align-items: center;
  height: 34px;
  padding: 0 14px;
  border: 1px solid var(--navy);
  border-radius: 8px;
  background: var(--white);
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--navy);
  white-space: nowrap;
  cursor: pointer;
}

.m14-switch:hover {
  background: var(--gray-1);
}

.m14-note,
.m14-ask {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
  margin-bottom: 11px;
  padding: 12px 14px;
  border-radius: 8px;
  background: var(--gray-1);
}

.m14-note-words {
  flex: 1 1 220px;
  min-width: 0;
  line-height: 1.6;
}

/* Ended (24b-3; line 3365): the note's edge red. */
.m14-note-bad {
  border-inline-start: 3px solid #DA1E28;
}

/* The invoice due's two actions (24b-2; line 1921): «I don't want to renew», then «pay the invoice». */
.m14-note-acts {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 14px;
}

/* «I don't want to renew» (line 1922): a grey underlined word, #525252 on #F4F4F4, 7.0:1. */
.m14-void {
  padding: 0;
  border: 0;
  background: none;
  font-family: inherit;
  font-size: 12px;
  color: var(--ink-2);
  text-decoration: underline;
  white-space: nowrap;
  cursor: pointer;
}

/* M9S ended (24b-3; lines 1240–1250): «متجرك مغلق», a red bar, since when; «reactivate your store». */
.m9s-ended {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 20px;
  margin-bottom: 18px;
  padding: 18px 20px;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.m9s-ended-words {
  flex: 1 1 260px;
  min-width: 0;
}

.m9s-ended-head {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0;
}

.m9s-ended-bar {
  flex: 0 0 12px;
  width: 12px;
  height: 3px;
  border-radius: 2px;
  background: #DA1E28;
}

.m9s-ended-title {
  font-size: 18px;
  font-weight: 300;
  line-height: 1.4;
  color: var(--ink);
}

.m9s-ended-line {
  margin: 4px 0 0;
  font-size: 12.5px;
  line-height: 1.8;
  color: var(--ink-2);
  text-wrap: pretty;
}

.m14-note-title {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
}

/* #525252 on #F4F4F4, 7.00:1. */
.m14-note-body {
  display: block;
  margin-top: 2px;
  font-size: 12px;
  color: var(--ink-2);
  text-wrap: pretty;
}

/* The stop's question (lines 1938–1947): a red edge; «keep», then the red «stop», then «are you sure?». */
.m14-ask {
  gap: 10px 14px;
  padding: 11px 14px;
  border-inline-start: 3px solid #DA1E28;
}

.m14-ask-words {
  flex: 1 1 100%;
  min-width: 0;
  font-size: 12.5px;
  line-height: 1.8;
  color: var(--ink);
  text-wrap: pretty;
}

.m14-keep {
  padding: 0;
  border: 0;
  background: none;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--navy);
  text-decoration: underline;
  white-space: nowrap;
  cursor: pointer;
}

.m14-ask-gap {
  flex: 1 1 auto;
}

/* Red #DA1E28 on white, 5.00:1; white on red, 5.00:1. */
.m14-stop-btn,
.m14-stop-yes {
  display: inline-flex;
  align-items: center;
  height: 34px;
  padding: 0 14px;
  border: 1.5px solid #DA1E28;
  border-radius: 8px;
  background: var(--white);
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 600;
  color: #DA1E28;
  white-space: nowrap;
  cursor: pointer;
}

.m14-stop-yes {
  background: #DA1E28;
  color: var(--white);
}

/* Paid for a year, the half year offered before the stop (24b-1; line 1943): white on navy, 16.12:1. */
.m14-half {
  display: inline-flex;
  align-items: center;
  height: 34px;
  padding: 0 14px;
  border: 0;
  border-radius: 8px;
  background: var(--navy);
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--white);
  white-space: nowrap;
  cursor: pointer;
}

.m14-half:hover {
  background: var(--navy-hover);
}

.m14-sure {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.m14-sure-q {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
}

/* The two cycles (lines 1948–1960). */
.m14-cycles {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 28px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  padding: 14px 16px;
  border-radius: 8px;
  background: var(--gray-1);
}

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

.m14-cycle-label {
  font-size: 11.5px;
  color: var(--ink-2);
}

.m14-cycle-name {
  margin-top: 3px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink);
}

.m14-cycle-sub {
  margin-top: 1px;
  font-size: 12px;
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}

.m14-arrow {
  font-size: 16px;
  font-weight: 300;
  color: var(--ink-2);
  text-align: center;
}

.m14-stop-row {
  display: flex;
  justify-content: flex-start;
  margin-top: 12px;
}

/* «أوقِف التجديد»: #525252 on white, 7.81:1; red under the mouse, 5.00:1. */
.m14-stop {
  padding: 0;
  border: 0;
  background: none;
  font-family: inherit;
  font-size: 12px;
  color: var(--ink-2);
  text-decoration: underline;
  text-underline-offset: 3px;
  white-space: nowrap;
  cursor: pointer;
}

.m14-stop:hover {
  color: #DA1E28;
}

.m14-inv-head {
  margin: 22px 0 10px;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
}

/* The invoices (lines 1964–1983): a navy head, white words, 16.12:1. */
.m14-table {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.m14-tr {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.6fr) minmax(0, .8fr) minmax(0, .8fr) 64px;
  gap: 10px;
  align-items: center;
  min-height: 46px;
  padding: 0 13px;
  border-top: 1px solid var(--line);
}

.m14-th {
  min-height: 36px;
  height: 36px;
  border-top: 0;
  background: var(--navy);
}

.m14-th .m14-cell {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--white);
}

.m14-cell {
  min-width: 0;
  font-size: 12.5px;
  color: var(--ink);
}

.m14-no,
.m14-period {
  font-variant-numeric: tabular-nums;
}

.m14-no {
  text-align: right;
}

.m14-period {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.m14-amount {
  font-weight: 600;
}

.m14-dzd {
  font-size: .85em;
  font-weight: 400;
  color: var(--ink-2);
}

.m14-state {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
}

.m14-dot {
  flex: 0 0 8px;
  width: 8px;
  height: 8px;
  border-radius: 9999px;
  background: #0A7A5A;
}

.m14-show {
  padding: 0;
  border: 0;
  background: none;
  font-family: inherit;
  font-size: 12px;
  color: var(--navy);
  text-decoration: underline;
  white-space: nowrap;
  cursor: pointer;
}

/* How invoices are paid (line 1984): #525252 on white; the link navy. */
.m14-pay {
  margin: 12px 0 0;
  font-size: 11.5px;
  line-height: 1.8;
  color: var(--ink-2);
  text-wrap: pretty;
}

.m14-contact {
  font-weight: 600;
  color: var(--navy);
  text-decoration: underline;
}

/* The dialogs (lines 1594, 1683, 1713, 1763): over a dark veil, a white box, «×» on its corner. */
.m14d {
  position: fixed;
  inset: 0;
  z-index: 95;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 48px 16px;
  overflow-y: auto;
}

.m14d-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(6, 14, 32, .72);
}

.m14d-box {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  max-width: 560px;
  padding: 24px 24px 22px;
  border-radius: 8px;
  background: var(--white);
}

.m14d-box:focus {
  outline: none;
}

.m14d-close {
  position: absolute;
  top: -14px;
  inset-inline-end: -14px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid var(--line-strong);
  border-radius: 9999px;
  background: var(--white);
  font-family: inherit;
  font-size: 16px;
  color: var(--ink);
  cursor: pointer;
}

.m14d-title {
  margin: 0;
  font-size: 22px;
  font-weight: 300;
  color: var(--ink);
}

/* The plan's switch (lines 1763–1813). */
.m14-sw-opts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 18px;
}

.m14-sw-opt {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 14px 14px 15px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: var(--white);
  cursor: pointer;
}

.m14-sw-opt:has(input:checked) {
  padding: 13px 13px 14px;
  border: 2px solid var(--navy);
  background: var(--gray-1);
}

.m14-sw-input {
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: var(--navy);
}

.m14-sw-tags {
  position: absolute;
  top: 13px;
  inset-inline-end: 14px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* The year's saving: white on green, 5.48:1. */
.m14-sw-badge {
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding: 0 8px;
  border-radius: 4px;
  background: #0A7A5A;
  font-size: 10.5px;
  font-weight: 600;
  color: var(--white);
  white-space: nowrap;
}

.m14-sw-mine {
  font-size: 10.5px;
  font-weight: 600;
  color: var(--ink-2);
  white-space: nowrap;
}

.m14-sw-name {
  margin-top: 12px;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
}

.m14-sw-price {
  margin-top: 3px;
  font-size: 12.5px;
  color: var(--ink-2);
  white-space: nowrap;
}

.m14-sw-price-n,
.m14-rs-price-n,
.m14-iv-total-n {
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}

.m14-sw-change {
  margin-top: 16px;
  padding: 16px 18px;
  border-radius: 8px;
  background: var(--gray-1);
}

.m14-sw-head {
  margin: 0 0 10px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
}

.m14-sw-cycles {
  padding: 0;
  grid-template-columns: minmax(0, 1fr) 24px minmax(0, 1fr);
}

.m14-sw-down {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  margin-top: 12px;
  padding: 11px 14px;
  border-inline-start: 3px solid #8A6A12;
  border-radius: 8px;
  background: var(--gray-1);
}

.m14-sw-down-words {
  flex: 1 1 260px;
  margin: 0;
  font-size: 12.5px;
  line-height: 1.8;
  color: var(--ink);
  text-wrap: pretty;
}

.m14-sw-keep,
.m14-rs-back {
  padding: 0;
  border: 0;
  background: none;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--navy);
  text-decoration: underline;
  white-space: nowrap;
  cursor: pointer;
}

/* «ثبّت …» and «نعم، استأنِف التجديد»: navy on orange, 6.84:1; #FFA24C under the mouse. */
.m14-sw-fix,
.m14-sw-same,
.m14-rs-yes {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 100%;
  height: 46px;
  margin-top: 16px;
  border: 0;
  border-radius: 8px;
  background: var(--orange);
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--navy);
  cursor: pointer;
}

.m14-sw-fix:hover,
.m14-rs-yes:hover {
  background: #FFA24C;
}

/* «هذه خطّتك الحاليّة», unavailable: #525252 on #E0E0E0, 5.92:1 (the prototype's #8C8C8C, 2.55:1). */
.m14-sw-same {
  background: var(--line);
  font-weight: 400;
  color: var(--ink-2);
  cursor: default;
}

/* Resuming and renewing (lines 1713–1761; N857): centred, 400 px inside, no ×. */
.m14d.m14-rs {
  align-items: center;
  padding: 24px 16px;
}

.m14-rs .m14d-box {
  /* The prototype's 400 px plus its padding (it counts padding outside the width). */
  max-width: 444px;
  padding: 24px 22px 20px;
}

.m14-rs .m14d-title,
.m14-iv .m14d-title {
  font-size: 20px;
}

.m14-rs-word {
  margin: 10px 0 0;
  font-size: 13px;
  line-height: 1.85;
  color: var(--ink);
  text-wrap: pretty;
}

.m14-rs-label {
  margin: 16px 0 0;
  font-size: 11.5px;
  color: var(--ink-2);
}

.m14-rs-seg {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px;
  margin-top: 6px;
  padding: 4px;
  border-radius: 8px;
  background: var(--gray-1);
}

/* Each plan its name over the year's saving (lines 1720–1725). */
.m14-rs-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  min-height: 44px;
  padding: 4px 6px;
  border: 1px solid transparent;
  border-radius: 6px;
  font-size: 12.5px;
  color: var(--ink);
  text-align: center;
  white-space: nowrap;
  cursor: pointer;
}

.m14-rs-item:has(input:checked) {
  border-color: var(--line-strong);
  background: var(--white);
  font-weight: 600;
}

.m14-rs-input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.m14-rs-item:has(input:focus-visible) {
  outline: 2px solid var(--navy);
  outline-offset: 2px;
}

.m14-rs-badge {
  font-size: 10.5px;
  font-weight: 600;
  color: #0A7A5A;
}

/* The plan and its price on #F4F4F4 (lines 1727–1730). */
.m14-rs-sum {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 10px;
  padding: 12px 14px;
  border-radius: 8px;
  background: var(--gray-1);
}

.m14-rs-plan-name {
  flex: 1 1 auto;
  font-size: 12.5px;
  font-weight: 400;
  color: var(--ink-2);
}

.m14-rs-price {
  font-size: 15px;
  font-weight: 600;
  white-space: nowrap;
}

.m14-rs-price .m14-dzd {
  font-size: .75em;
}

/* The time line (lines 1731–1755): 12 px marks, today's filled navy, the reminder's a navy ring, the last a
   grey ring (#8D8D8D on white, 3.3:1), joined by a dashed #C6C6C6 line. */
.m14-rs-line {
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
}

.m14-rs-stop {
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr);
  column-gap: 10px;
}

.m14-rs-rail {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.m14-rs-mark {
  flex: 0 0 12px;
  box-sizing: border-box;
  width: 12px;
  height: 12px;
  margin-top: 4px;
  border: 2px solid var(--navy);
  border-radius: 9999px;
  background: var(--white);
}

.m14-rs-stop-now .m14-rs-mark {
  border: 0;
  background: var(--navy);
}

.m14-rs-stop-last .m14-rs-mark {
  border-color: #8D8D8D;
}

.m14-rs-dash {
  flex: 1 1 auto;
  width: 0;
  min-height: 14px;
  margin-top: 3px;
  border-inline-start: 2px dashed var(--line-strong);
}

.m14-rs-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding-bottom: 12px;
}

.m14-rs-stop-last .m14-rs-text {
  padding-bottom: 0;
}

.m14-rs-day {
  font-size: 12.5px;
  font-weight: 600;
  line-height: 20px;
  color: var(--ink);
}

.m14-rs-words {
  margin-top: 1px;
  font-size: 11.5px;
  color: var(--ink-2);
}

.m14-rs-back-row {
  display: flex;
  justify-content: center;
  margin-top: 10px;
}

/* «تراجَع» (line 1758): #525252, regular, underlined; «الدفع» / «نعم، استأنِف التجديد» 18 px under the line. */
.m14-rs-back {
  font-weight: 400;
  line-height: 24px;
  color: var(--ink-2);
}

.m14-rs-yes {
  margin-top: 18px;
}

/* The invoice (lines 1683–1711). Its header row: the title, the number on the far side (N850). */
.m14-iv-title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.m14-iv-no {
  font-size: 12px;
  font-weight: 400;
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}

/* The invoice's view (lines 1683–1711; N857): 420 px inside, no ×. */
.m14-iv .m14d-box {
  /* The prototype's 420 px plus its padding. */
  max-width: 464px;
  padding: 22px 22px 18px;
}

.m14-iv-facts {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 8px 16px;
  margin: 16px 0 0;
  font-size: 12.5px;
}

/* To whom (line 1692): the shop's name in bold. */
.m14-iv-to {
  font-weight: 600;
}

.m14-iv-term {
  color: var(--ink-2);
}

.m14-iv-value {
  margin: 0;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

/* The line (lines 1696–1702): a rule above it only, its words and the amount on one baseline. */
.m14-iv-line {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

.m14-iv-words {
  flex: 1 1 auto;
  min-width: 0;
}

.m14-iv-item {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
}

.m14-iv-item-note {
  display: block;
  margin-top: 2px;
  font-size: 11.5px;
  color: var(--ink-2);
}

.m14-iv-total {
  font-size: 20px;
  font-weight: 600;
  white-space: nowrap;
}

.m14-iv-total .m14-dzd {
  font-size: .6em;
}

.m14-iv-note {
  margin: 12px 0 0;
  font-size: 11.5px;
  line-height: 1.8;
  color: var(--ink-2);
}

.m14-iv-foot {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 16px;
}

/* «أغلِق»: white on navy, filled as drawn (line 1707; N850), 16.12:1. */
.m14-iv-close {
  display: inline-flex;
  align-items: center;
  height: 36px;
  padding: 0 16px;
  border: 0;
  border-radius: 8px;
  background: var(--navy);
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--white);
  cursor: pointer;
}

@media (max-width: 899.98px) {
  .m14-tr {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.4fr) minmax(0, .8fr) minmax(0, .9fr) 56px;
    gap: 8px;
  }
}

/* A store stopped by the owner (Director N822): one line, a red edge; #161616 on #F4F4F4, the link
   #0D2042, as M14's pay line. */
.owner-stop {
  margin: 0 0 14px;
  padding: 11px 14px;
  border-inline-start: 3px solid #DA1E28;
  border-radius: 8px;
  background: var(--gray-1);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.6;
  color: var(--ink);
}

.m14-owner-stop {
  margin-top: 14px;
}

.owner-stop-contact {
  color: var(--navy);
  text-decoration: underline;
}

/* ── 24c: the invoice due, the pay dialog, the payment being verified (Directors N818, N821, N827;
   prototype lines 1594–1682, 1918–1925, 1972–1980) ──────────────────────────────────────────── */

/* The next cycle's invoice due or being verified: an amber ring, as M9S's head. */
.m14-dot.is-warn {
  box-sizing: border-box;
  background: none;
  border: 2px solid #8A6A12;
}

/* «Pay it» in the invoice's row: navy, underlined, as «show it». */
.m14-pay-row {
  padding: 0;
  border: 0;
  background: none;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  color: var(--navy);
  text-decoration: underline;
  white-space: nowrap;
  cursor: pointer;
}

.m14-pay .m14d-box {
  max-width: 460px;
  padding: 22px 22px 18px;
}

/* What is paid now (lines 1603–1609): #F4F4F4, the amount large. */
.m14p-now {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-top: 14px;
  padding: 14px 16px;
  border-radius: 8px;
  background: var(--gray-1);
}

.m14p-now-words {
  min-width: 0;
}

.m14p-now-title {
  display: block;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink);
}

/* #525252 on #F4F4F4, 7.00:1. */
.m14p-now-sub {
  display: block;
  margin-top: 2px;
  font-size: 11.5px;
  color: var(--ink-2);
}

.m14p-now-amount {
  font-size: 22px;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
}

.m14p-now-n {
  font-variant-numeric: tabular-nums;
  unicode-bidi: isolate;
}

.m14p-now-amount .m14-dzd {
  font-size: .55em;
  font-weight: 400;
  color: var(--ink-2);
}

/* BaridiMob or CCP (lines 1610–1614): two halves on #F4F4F4, the chosen one white. */
.m14p-methods {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px;
  margin-top: 14px;
  padding: 4px;
  border-radius: 8px;
  background: var(--gray-1);
}

.m14p-method {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 400;
  color: var(--ink);
  white-space: nowrap;
  cursor: pointer;
}

.m14p-method[aria-pressed="true"] {
  border-color: var(--line-control);
  background: var(--white);
  font-weight: 600;
}

/* The platform's account (lines 1615–1624). */
.m14p-acct {
  margin-top: 12px;
  padding: 13px 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.m14p-acct-label {
  font-size: 11.5px;
  color: var(--ink-2);
}

.m14p-acct-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 7px;
}

.m14p-acct-n {
  min-width: 0;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  unicode-bidi: isolate;
  overflow-wrap: anywhere;
}

.m14p-holder {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed var(--line);
  font-size: 12px;
  color: var(--ink-2);
  direction: ltr;
  text-align: right;
}

.m14p-addr {
  margin-top: 3px;
  font-size: 12px;
  color: var(--ink-2);
}

/* «Copy»: bordered; copied, green #0A7A5A on white, 5.36:1. */
.m14-copy-wrap {
  display: inline-flex;
  flex: 0 0 auto;
}

.m14-told {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.m14p-copy-acct {
  display: inline-flex;
  align-items: center;
  height: 30px;
  padding: 0 12px;
  border: 1px solid var(--line-control);
  border-radius: 6px;
  background: var(--white);
  font-family: inherit;
  font-size: 12px;
  color: var(--ink);
  white-space: nowrap;
  cursor: pointer;
}

.m14p-copy-acct:hover {
  border-color: var(--navy);
}

.m14p-copy-acct.is-copied {
  border-color: #0A7A5A;
  font-weight: 600;
  color: #0A7A5A;
}

/* The steps (lines 1625–1666): a navy number, then the words. */
.m14p-steps {
  display: flex;
  flex-direction: column;
  gap: 11px;
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
}

.m14p-step {
  display: flex;
  align-items: flex-start;
  gap: 11px;
}

.m14p-step-n {
  display: flex;
  flex: 0 0 24px;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 6px;
  background: var(--navy);
  font-size: 10.5px;
  font-weight: 600;
  color: var(--white);
  direction: ltr;
}

.m14p-step-words {
  flex: 1;
  min-width: 0;
  padding-top: 2px;
  font-size: 12.5px;
  line-height: 1.8;
  color: var(--ink);
  text-wrap: pretty;
}

.m14p-price,
.m14p-no,
.m14p-wa {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  unicode-bidi: isolate;
}

/* The platform's e-mail, and «copy» under it, underlined (lines 1635–1639). */
.m14p-mail {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 6px;
  padding: 8px 11px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--gray-1);
}

.m14p-mail-addr {
  min-width: 0;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink);
  unicode-bidi: isolate;
  overflow-wrap: anywhere;
}

.m14p-copy-mail {
  padding: 0;
  border: 0;
  background: none;
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--navy);
  text-decoration: underline;
  white-space: nowrap;
  cursor: pointer;
}

.m14p-copy-mail.is-copied {
  color: #0A7A5A;
  text-decoration: none;
}

/* «Confirm the payment», then the question (lines 1668–1677). */
.m14p-confirm {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 46px;
  margin-top: 18px;
  border: 1.5px solid var(--navy);
  border-radius: 8px;
  background: var(--white);
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--navy);
  cursor: pointer;
}

.m14p-confirm:hover {
  background: var(--gray-1);
}

.m14p-ask {
  margin-top: 18px;
}

.m14p-ask-q {
  margin-bottom: 8px;
  font-size: 12.5px;
  text-align: center;
  color: var(--ink);
}

.m14p-yes {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 46px;
  border: 0;
  border-radius: 8px;
  background: var(--orange);
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--navy);
  cursor: pointer;
}

.m14p-yes:hover {
  background: #FFA24C;
}

.m14p-later-row {
  margin-top: 8px;
  text-align: center;
}

/* #525252 on white, 7.81:1. */
.m14p-later {
  min-height: 32px;
  padding: 0 8px;
  border: 0;
  background: none;
  font-family: inherit;
  font-size: 12.5px;
  color: var(--ink-2);
  text-decoration: underline;
  cursor: pointer;
}

/* How invoices are paid (line 1678), centred under a line. */
.m14p-foot {
  margin: 14px 0 0;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  font-size: 11.5px;
  line-height: 1.8;
  text-align: center;
  color: var(--ink-2);
  text-wrap: pretty;
}