/* Lahja shop dashboard v2 (one page for every client shop). Light only (paper / onyx / warm stone / clay), built on tokens.css.
   Logical properties throughout, so the Arabic page (dir="rtl") mirrors itself. */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; color-scheme: light; background: var(--bg); }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font: var(--fw-regular) var(--fs-small)/var(--lh-small) var(--font-body);
  letter-spacing: var(--ls-body); -webkit-font-smoothing: antialiased; font-feature-settings: "tnum" 1;
  overflow-x: clip; min-block-size: 100dvh;
}
:lang(ar) body, body:lang(ar) { font-family: var(--font-arabic); letter-spacing: 0; }
button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; }
img { display: block; max-inline-size: 100%; }
a { color: var(--accent-text); }
:focus { outline: none; }
:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.ltr { direction: ltr; unicode-bidi: isolate; display: inline-block; }
.num { font-variant-numeric: tabular-nums; }
.muted { color: var(--text-3); }
.sr { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
[hidden] { display: none !important; }
h1, h2, h3, h4 { text-wrap: balance; }

.skip {
  position: absolute; inset-inline-start: var(--space-4); inset-block-start: -4rem; z-index: var(--z-toast);
  background: var(--inverse); color: var(--text-on-inverse); padding: var(--space-2) var(--space-4); border-radius: var(--radius-pill); text-decoration: none;
}
.skip:focus { inset-block-start: var(--space-2); }

/* ---------------------------------------------------------------- bar */
.bar {
  position: sticky; inset-block-start: 0; z-index: var(--z-nav);
  background: var(--material); backdrop-filter: blur(20px) saturate(160%); -webkit-backdrop-filter: blur(20px) saturate(160%);
  border-block-end: 1px solid var(--line);
}
.bar__in {
  max-inline-size: var(--container-wide); margin-inline: auto; padding-inline: var(--gutter);
  min-block-size: 4rem; display: flex; align-items: center; gap: var(--space-4);
}
.brand { display: flex; align-items: center; gap: var(--space-3); min-inline-size: 0; text-decoration: none; color: inherit; border-radius: var(--radius-sm); }
.brand img { inline-size: 2.25rem; block-size: 2.25rem; border-radius: var(--radius-sm); box-shadow: var(--shadow-xs); flex: none; }
.brand__logo { display: grid; place-items: center; inline-size: 2.25rem; block-size: 2.25rem; flex: none; overflow: hidden; border-radius: var(--radius-sm); background: var(--fill-strong); color: var(--text-2); font-weight: var(--fw-semibold); }
.brand__logo img { display: block; inline-size: 100%; block-size: 100%; object-fit: cover; border-radius: 0; box-shadow: none; }
.brand__logo:has(img) { background: none; box-shadow: var(--shadow-xs); }
.brand__t { display: grid; line-height: 1.25; min-inline-size: 0; }
.brand__t b { font-family: var(--font-display); font-weight: var(--fw-semibold); font-size: 0.975rem; letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.brand__t small { color: var(--text-3); font-size: var(--fs-caption); white-space: nowrap; }
:lang(ar) .brand__t b { font-family: var(--font-arabic); letter-spacing: 0; }
.bar__tabs { margin-inline: auto; }
.bar__end { display: flex; align-items: center; gap: var(--space-2); }
.bar__end form { margin: 0; }

/* segmented control (tabs, ranges, metric, filters) */
.seg {
  display: inline-flex; padding: 3px; gap: 2px; border-radius: var(--radius-pill);
  background: var(--bg-alt); border: 1px solid var(--line);
}
.seg button {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem;
  border: 0; background: transparent; cursor: pointer; color: var(--text-2);
  padding: 0.4rem 1rem; border-radius: var(--radius-pill); font-weight: var(--fw-medium); font-size: 0.875rem;
  transition: background var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard), box-shadow var(--dur-fast) var(--ease-standard), transform var(--dur-instant) ease-out;
  white-space: nowrap; min-block-size: 2.25rem;
}
.seg button:hover { color: var(--text); }
.seg button:active { transform: scale(0.97); }
.seg button[aria-selected="true"], .seg button[aria-pressed="true"] { background: var(--segment-thumb); color: var(--text); box-shadow: var(--shadow-sm); }
.seg--sm button { padding: 0.3rem 0.8rem; font-size: 0.8125rem; min-block-size: 2rem; }
.badge {
  display: inline-grid; place-items: center; min-inline-size: 1.35rem; block-size: 1.35rem; padding-inline: 0.35rem;
  border-radius: var(--radius-pill); background: var(--accent); color: var(--accent-contrast); font-size: 0.75rem; font-weight: var(--fw-semibold); line-height: 1;
}

.icon-btn {
  display: inline-grid; place-items: center; min-inline-size: 2.5rem; block-size: 2.5rem; padding-inline: 0.65rem;
  border-radius: var(--radius-pill); border: 1px solid var(--line); background: var(--card); cursor: pointer;
  color: var(--text-2); font-size: 0.8125rem; font-weight: var(--fw-semibold); text-decoration: none;
  transition: background var(--dur-fast) var(--ease-standard), color var(--dur-fast) ease, transform var(--dur-instant) ease-out;
}
.icon-btn:hover { background: var(--fill); color: var(--text); }
.icon-btn:active { transform: scale(0.96); }
.icon-btn svg { inline-size: 1.05rem; block-size: 1.05rem; }
.icon-btn--quiet { border-color: transparent; background: transparent; }

/* ---------------------------------------------------------------- page */
main { max-inline-size: var(--container-wide); margin-inline: auto; padding: var(--space-8) var(--gutter) var(--space-11); }
.head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--space-4) var(--space-6); margin-block-end: var(--space-7); }
.head__t { min-inline-size: 0; }
.head h1 {
  margin: 0; font-family: var(--font-display); font-weight: var(--fw-semibold);
  font-size: clamp(1.75rem, 1.4rem + 1.2vw, 2.375rem); line-height: 1.1; letter-spacing: -0.028em;
}
:lang(ar) .head h1 { font-family: var(--font-arabic); letter-spacing: 0; line-height: 1.35; }
.head p { margin: var(--space-1) 0 0; color: var(--text-3); }
.head p b { color: var(--text); font-weight: var(--fw-semibold); font-variant-numeric: tabular-nums; }
#allowance.is-full { color: var(--warning); }

.card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs); padding: var(--space-6); min-inline-size: 0;
}
.card h2 { margin: 0; font-family: var(--font-display); font-size: 1.125rem; font-weight: var(--fw-semibold); letter-spacing: -0.012em; line-height: 1.35; }
:lang(ar) .card h2 { font-family: var(--font-arabic); letter-spacing: 0; }
.card__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3) var(--space-4); margin-block-end: var(--space-5); }
.card__sub { color: var(--text-3); font-size: var(--fs-caption); margin-block-start: 2px; }
.card + .card { margin-block-start: var(--space-5); }

.empty { color: var(--text-3); padding: var(--space-8) 0; text-align: center; list-style: none; }
.empty--sm { padding: var(--space-4) 0; font-size: 0.875rem; text-align: start; }

/* ---------------------------------------------------------------- reports (weekly + monthly) */
.reports { display: grid; gap: var(--space-4); grid-template-columns: minmax(0, 1fr); margin-block-end: var(--space-8); }
@media (min-width: 60rem) { .reports { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.report {
  display: grid; gap: var(--space-5); align-content: start;
  background: linear-gradient(180deg, var(--accent-soft), transparent 9rem), var(--card);
  border-color: var(--accent-soft-line);
}
.report + .report { margin-block-start: 0; }
.report__top { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); }
.report__eyebrow { color: var(--accent-text); font-size: 0.875rem; font-weight: var(--fw-semibold); }
.report__when { color: var(--text); font-size: 0.9375rem; font-weight: var(--fw-medium); margin-block-start: 2px; }
.report__note {
  flex: none; color: var(--text-3); font-size: 0.75rem; white-space: nowrap;
  border: 1px solid var(--line); background: var(--card); border-radius: var(--radius-pill); padding: 0.15rem 0.6rem;
}
.report__line { margin: 0; font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem); line-height: 1.6; font-weight: var(--fw-medium); text-wrap: pretty; color: var(--text); }
:lang(ar) .report__line { line-height: 1.85; }
.report__line b { font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; }
.report__line--na { color: var(--text-3); font-weight: var(--fw-regular); }
.report__figs {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4) var(--space-3);
  padding-block-start: var(--space-4); border-block-start: 1px solid var(--line);
}
.fig { display: grid; gap: 2px; min-inline-size: 0; }
.fig small { color: var(--text-3); font-size: var(--fs-caption); }
.fig b { font-family: var(--font-display); font-size: 1.25rem; font-weight: var(--fw-semibold); letter-spacing: -0.02em; line-height: 1.3; overflow-wrap: anywhere; }
.fig b small { display: inline; font-size: 0.6em; color: var(--text-3); font-weight: var(--fw-medium); margin-inline-start: 0.3rem; letter-spacing: 0; }
.fig .d { font-size: 0.75rem; }

/* ---------------------------------------------------------------- KPI tiles */
.sec-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-1) var(--space-4); margin-block-end: var(--space-4); }
.sec-title { margin: 0; font-size: 1.25rem; font-weight: var(--fw-semibold); font-family: var(--font-display); letter-spacing: -0.015em; }
:lang(ar) .sec-title { font-family: var(--font-arabic); letter-spacing: 0; }
.sec-note { margin: 0; color: var(--text-3); font-size: var(--fs-caption); }
.kpis { display: grid; gap: var(--space-4); grid-template-columns: repeat(2, minmax(0, 1fr)); margin-block-end: var(--space-8); }
@media (min-width: 56rem) { .kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.kpi { padding: var(--space-5); border-radius: var(--radius-md); display: flex; flex-direction: column; gap: var(--space-1); min-inline-size: 0; }
.kpi + .kpi { margin-block-start: 0; }
.kpi__label { margin: 0; color: var(--text-2); font-size: 0.875rem; font-weight: var(--fw-medium); display: flex; align-items: center; gap: 0.45rem; line-height: 1.4; }
.kpi__label svg { inline-size: 1rem; block-size: 1rem; color: var(--text-3); flex: none; }
.kpi__value {
  font-family: var(--font-display); font-weight: var(--fw-semibold); letter-spacing: -0.03em;
  font-size: clamp(1.625rem, 1.35rem + 0.9vw, 2.125rem); line-height: 1.2; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.kpi__value small { font-size: 0.5em; letter-spacing: 0; color: var(--text-3); font-weight: var(--fw-medium); margin-inline-start: 0.45rem; }
.kpi__hint { color: var(--text-3); font-size: var(--fs-caption); line-height: 1.4; }
.cmp { list-style: none; margin: auto 0 0; padding: var(--space-3) 0 0; display: grid; gap: 0.3rem; border-block-start: 1px solid var(--line); margin-block-start: var(--space-3); }
.cmp li { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-2); font-size: 0.75rem; line-height: 1.35; cursor: help; }
.cmp__l { color: var(--text-3); min-inline-size: 0; }
.d { display: inline-flex; align-items: baseline; gap: 0.2rem; flex: none; font-weight: var(--fw-semibold); color: var(--text-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.d--up { color: var(--success); }
.d--down { color: var(--danger); }
.d--none { color: var(--text-disabled); font-weight: var(--fw-regular); }
.kpi.is-loading .cmp li { block-size: 1rem; }

/* funnel tile */
.fun { display: grid; gap: var(--space-3); margin-block-start: var(--space-2); }
.fun__row { display: grid; gap: 0.3rem; }
.fun__t { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-2); font-size: var(--fs-caption); color: var(--text-2); }
.fun__t b { font-size: 0.9375rem; color: var(--text); font-weight: var(--fw-semibold); }
.meter { block-size: 0.5rem; border-radius: var(--radius-pill); background: var(--bg-alt); overflow: hidden; }
.meter i { display: block; block-size: 100%; background: var(--nx-stone-400); border-radius: var(--radius-pill); transition: inline-size var(--dur-spring-smooth) var(--ease-spring-smooth); }
.meter--accent i { background: var(--accent); }
.fun__conv { margin-block-start: auto; padding-block-start: var(--space-3); border-block-start: 1px solid var(--line); display: flex; justify-content: space-between; align-items: baseline; font-size: var(--fs-caption); color: var(--text-3); }
.fun__conv b { font-family: var(--font-display); font-size: 1.25rem; color: var(--accent-text); font-weight: var(--fw-semibold); letter-spacing: -0.02em; }

/* ---------------------------------------------------------------- chart */
.chart { position: relative; min-block-size: 200px; }
.chart svg { inline-size: 100%; block-size: auto; display: block; overflow: visible; touch-action: pan-y; }
.chart .grid-line { stroke: var(--line); stroke-width: 1; stroke-dasharray: 2 4; }
.chart .base-line { stroke: var(--line-strong); stroke-width: 1; }
.chart .axis-text { fill: var(--text-3); font-size: 11px; font-family: var(--font-body); }
.chart .axis-text.is-today { fill: var(--accent-text); font-weight: 600; }
.chart .bar-mark { fill: var(--accent); transition: opacity var(--dur-fast) ease; }
.chart .bar-mark.is-today { opacity: 0.5; }
.chart.is-hovering .bar-mark { opacity: 0.3; }
.chart.is-hovering .bar-mark.is-active { opacity: 1; }
.chart__ph { block-size: 200px; border-radius: var(--radius-md); }
.tip {
  position: absolute; top: 0; left: 0; pointer-events: none; z-index: var(--z-raised); min-inline-size: 10rem;
  background: var(--material-strong); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--line); border-radius: var(--radius-sm); box-shadow: var(--shadow-md);
  padding: 0.6rem 0.8rem; font-size: var(--fs-caption); line-height: 1.55;
  opacity: 0; transform: translateY(4px); transition: opacity var(--dur-fast) ease, transform var(--dur-fast) var(--ease-out);
}
.tip.is-on { opacity: 1; transform: none; }
.tip b { font-size: 0.875rem; display: block; margin-block-end: 2px; }
.tip .row { display: flex; justify-content: space-between; gap: var(--space-4); color: var(--text-3); }
.tip .row span:last-child { color: var(--text-2); font-weight: var(--fw-semibold); }
.tip .row.is-key span { color: var(--text); }

/* ---------------------------------------------------------------- buttons, links */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; border: 1px solid transparent; cursor: pointer;
  background: var(--inverse); color: var(--text-on-inverse); border-radius: var(--radius-pill);
  padding: 0.65rem 1.35rem; font-weight: var(--fw-semibold); font-size: 0.9375rem; min-block-size: 2.75rem; white-space: nowrap; text-decoration: none;
  transition: background var(--dur-fast) ease, border-color var(--dur-fast) ease, transform var(--dur-instant) ease-out, opacity var(--dur-fast) ease;
}
.btn:hover { background: var(--inverse-hover); }
.btn:active { transform: scale(0.97); }
.btn:disabled { opacity: 0.55; cursor: progress; }
.btn svg { flex: none; }
.btn--accent { background: var(--accent); color: var(--accent-contrast); }
.btn--accent:hover { background: var(--accent-hover); }
.btn--quiet { background: var(--card); color: var(--text); border-color: var(--line-strong); }
.btn--quiet:hover { background: var(--fill); }
.btn--danger { background: var(--danger); color: #fff; }
.btn--danger:hover { background: #962015; }
.btn--sm { min-block-size: 2.25rem; padding: 0.35rem 0.9rem; font-size: 0.8125rem; }
.link-btn { background: none; border: 0; padding: 0.15rem 0; color: var(--accent-text); cursor: pointer; font-weight: var(--fw-medium); font-size: 0.875rem; border-radius: var(--radius-xs); text-align: start; }
.link-btn:hover { text-decoration: underline; text-underline-offset: 3px; }
.link-btn--sm { font-size: var(--fs-caption); }
.link-btn--danger { color: var(--text-3); }
.link-btn--danger:hover { color: var(--danger); }

/* ---------------------------------------------------------------- pills, tags */
.pill { display: inline-flex; align-items: center; gap: 0.35rem; border-radius: var(--radius-pill); padding: 0.2rem 0.65rem; font-size: 0.75rem; font-weight: var(--fw-semibold); white-space: nowrap; background: var(--fill); color: var(--text-2); line-height: 1.4; }
.pill::before { content: ""; inline-size: 0.4rem; block-size: 0.4rem; border-radius: 50%; background: currentColor; flex: none; }
.pill--ok { background: var(--success-soft); color: var(--success); }
.pill--low { background: var(--warning-soft); color: var(--warning); }
.pill--out { background: var(--danger-soft); color: var(--danger); }
.pill--accent { background: var(--accent-soft); color: var(--accent-text); }
.pill--info { background: rgba(47, 90, 122, 0.09); color: #2F5A7A; }
.pill--none { color: var(--text-3); }
.pill--none::before { background: var(--text-disabled); }
.pill--plain::before { display: none; }
.tag { display: inline-flex; align-items: center; font-size: 0.6875rem; font-weight: var(--fw-semibold); color: var(--accent-text); background: var(--accent-soft); border: 1px solid var(--accent-soft-line); border-radius: var(--radius-xs); padding: 0 0.4rem; line-height: 1.6; white-space: nowrap; }

/* ---------------------------------------------------------------- fields */
.field {
  display: flex; align-items: center; gap: 0.5rem; background: var(--card); border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm); padding-inline: 0.75rem; min-block-size: 2.75rem; min-inline-size: 0;
  transition: border-color var(--dur-fast) ease, box-shadow var(--dur-fast) ease;
}
.field:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.field svg { inline-size: 1rem; block-size: 1rem; color: var(--text-3); flex: none; }
.field input, .field select { border: 0; background: transparent; outline: 0; min-inline-size: 0; inline-size: 100%; padding-block: 0.55rem; box-shadow: none; }
.field select { cursor: pointer; }
.field--input { background: var(--bg-inset); border-color: var(--line); }
.field--input:focus-within { background: var(--card); }
.input, .textarea {
  inline-size: 100%; min-inline-size: 0; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--bg-inset);
  padding: 0.65rem 0.8rem; outline: 0; min-block-size: 2.75rem;
  transition: border-color var(--dur-fast) ease, box-shadow var(--dur-fast) ease, background var(--dur-fast) ease;
}
.input:focus, .textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); background: var(--card); }
.input[aria-invalid="true"], .textarea[aria-invalid="true"] { border-color: var(--danger); box-shadow: 0 0 0 3px var(--danger-soft); }
.input--sm { min-block-size: 2.25rem; padding: 0.35rem 0.65rem; font-size: 0.875rem; }
.input.num { font-variant-numeric: tabular-nums; -moz-appearance: textfield; appearance: textfield; }
.input.num::-webkit-outer-spin-button, .input.num::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.textarea { min-block-size: 7rem; resize: vertical; line-height: 1.6; }
.textarea--sm { min-block-size: 5rem; }
input[type="date"] { min-block-size: 0; }

.form { display: grid; gap: var(--space-4); }
.form label, .form__label { display: grid; gap: 0.4rem; font-weight: var(--fw-medium); font-size: 0.875rem; color: var(--text); }
.form label > small, .form__label small { color: var(--text-3); font-weight: var(--fw-regular); }
.form label { grid-template-columns: auto minmax(0, 1fr); column-gap: 0.4rem; align-items: baseline; }
.form label > small { font-size: var(--fs-caption); }
.form label > :not(span):not(small), .form label > .field, .form label > .counter { grid-column: 1 / -1; }
.form .photo-add { grid-template-columns: none; }
span.form__label { display: block; }
.form__row { display: grid; gap: var(--space-4); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 36rem) { .form__row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.form__block { display: grid; gap: var(--space-3); }
.form__label-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2); }
.form__end { display: flex; justify-content: flex-end; }
.counter { justify-self: end; color: var(--text-3); font-weight: var(--fw-regular) !important; font-size: 0.75rem !important; }

/* ---------------------------------------------------------------- inventory */
.card--list { padding-block-end: var(--space-4); }
.toolbar { display: grid; gap: var(--space-4); margin-block-end: var(--space-4); }
.toolbar__fields { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.toolbar__fields .field--search { flex: 1 1 16rem; }
.toolbar__fields .field--select { flex: 0 1 14rem; }
@media (min-width: 62rem) {
  .toolbar { grid-template-columns: auto minmax(0, 1fr); align-items: center; }
  .toolbar__fields { justify-content: flex-end; }
}
.chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.chip {
  display: inline-flex; align-items: center; gap: 0.45rem; min-block-size: 2.25rem; padding: 0.3rem 0.5rem 0.3rem 0.85rem;
  border-radius: var(--radius-pill); border: 1px solid var(--line-strong); background: var(--card); color: var(--text-2);
  font-size: 0.8125rem; font-weight: var(--fw-medium); cursor: pointer;
  transition: background var(--dur-fast) ease, border-color var(--dur-fast) ease, color var(--dur-fast) ease, transform var(--dur-instant) ease-out;
}
[dir="rtl"] .chip { padding: 0.3rem 0.85rem 0.3rem 0.5rem; }
.chip:hover { border-color: var(--text-3); color: var(--text); }
.chip:active { transform: scale(0.97); }
.chip__n { min-inline-size: 1.5rem; padding: 0 0.4rem; border-radius: var(--radius-pill); background: var(--bg-alt); color: var(--text-2); font-size: 0.75rem; line-height: 1.5rem; text-align: center; }
.chip[aria-pressed="true"] { background: var(--inverse); border-color: var(--inverse); color: var(--text-on-inverse); }
.chip[aria-pressed="true"] .chip__n { background: rgba(250, 249, 247, 0.16); color: var(--text-on-inverse); }
.chip--low .chip__n { color: var(--warning); }
.chip--out .chip__n { color: var(--danger); }

.inv { display: grid; }
.inv__head { display: none; }
.inv__row {
  display: grid; gap: 0.35rem var(--space-3); align-items: start;
  grid-template-columns: 3.25rem minmax(0, 1fr) auto;
  grid-template-areas: "img name name" "img st qty" "panel panel panel";
  padding-block: var(--space-4); border-block-end: 1px solid var(--line);
}
.inv__row:last-child { border-block-end: 0; }
.thumb { inline-size: 3.25rem; block-size: 3.25rem; border-radius: var(--radius-sm); object-fit: cover; background: var(--bg-inset); flex: none; border: 1px solid var(--line); }
.inv__row > .thumb { grid-area: img; }
.thumb--none { display: grid; place-items: center; color: var(--text-disabled); }
.thumb--none svg { inline-size: 55%; block-size: 55%; }
.inv__name { grid-area: name; min-inline-size: 0; display: grid; gap: 1px; }
.inv__name > b { font-weight: var(--fw-medium); line-height: 1.4; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.inv__name small { color: var(--text-3); font-size: var(--fs-caption); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inv__shop { display: flex; align-items: center; gap: var(--space-3); margin-block-start: 0.2rem; }
.inv__cat { display: none; color: var(--text-2); font-size: 0.875rem; min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inv__st { grid-area: st; align-self: center; }
.inv__qty { grid-area: qty; display: flex; justify-content: flex-end; align-items: center; }
.inv__panel { grid-area: panel; margin-block-start: var(--space-2); }
@media (min-width: 62rem) {
  .inv__row, .inv__head {
    grid-template-columns: 3rem minmax(0, 2.6fr) minmax(0, 1fr) 9.5rem 12rem;
    grid-template-areas: "img name cat st qty" "panel panel panel panel panel";
    column-gap: var(--space-5);
  }
  .inv__row { align-items: center; padding-block: var(--space-3); }
  .inv__row > .thumb { inline-size: 3rem; block-size: 3rem; }
  .inv__cat { display: block; grid-area: cat; }
  .inv__head { display: grid; grid-template-areas: none; padding-block: 0 var(--space-2); border-block-end: 1px solid var(--line); color: var(--text-3); font-size: var(--fs-caption); font-weight: var(--fw-medium); }
  .inv__head .e { text-align: end; }
  .inv__panel { grid-column: 2 / -1; }
}

.qty-whole { display: flex; flex-direction: column; align-items: flex-end; gap: 0.15rem; }
.stepper { display: inline-flex; align-items: center; border: 1px solid var(--line-strong); border-radius: var(--radius-pill); background: var(--card); overflow: hidden; transition: border-color var(--dur-fast) ease, box-shadow var(--dur-fast) ease; }
.stepper:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.stepper button {
  inline-size: 2.5rem; block-size: 2.5rem; border: 0; background: transparent; cursor: pointer; color: var(--text-2);
  display: grid; place-items: center; transition: background var(--dur-fast) ease, transform var(--dur-instant) ease-out;
}
.stepper button:hover { background: var(--fill); color: var(--text); }
.stepper button:active { transform: scale(0.9); background: var(--fill-strong); }
.stepper button:disabled { opacity: 0.35; cursor: not-allowed; }
.stepper button:focus-visible { box-shadow: inset 0 0 0 2px var(--accent); }
.stepper svg { inline-size: 0.9rem; block-size: 0.9rem; }
.stepper input {
  inline-size: 3.25rem; text-align: center; border: 0; background: transparent; outline: 0; font-weight: var(--fw-semibold); box-shadow: none !important;
  font-variant-numeric: tabular-nums; -moz-appearance: textfield; appearance: textfield; padding: 0; direction: ltr;
}
.stepper.is-over input { color: var(--danger); }
.stepper input::-webkit-outer-spin-button, .stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.stepper.is-saving { border-color: var(--accent-soft-line); }
.stepper.is-saved { border-color: var(--success); }
.set-btn {
  border: 1px dashed var(--line-strong); background: transparent; color: var(--text-2); border-radius: var(--radius-pill);
  padding: 0.45rem 1rem; min-block-size: 2.5rem; cursor: pointer; font-size: 0.8125rem; font-weight: var(--fw-medium); white-space: nowrap;
  transition: border-color var(--dur-fast) ease, color var(--dur-fast) ease, background var(--dur-fast) ease;
}
.set-btn:hover, .set-btn[aria-expanded="true"] { border-color: var(--accent); color: var(--accent-text); background: var(--accent-soft); }
.sizes-btn {
  display: inline-flex; align-items: center; gap: 0.5rem; border: 1px solid var(--line-strong); background: var(--card);
  border-radius: var(--radius-pill); padding: 0.4rem 0.7rem 0.4rem 0.95rem; min-block-size: 2.5rem; cursor: pointer; color: var(--text-2);
  font-size: 0.8125rem; transition: background var(--dur-fast) ease, border-color var(--dur-fast) ease, transform var(--dur-instant) ease-out;
}
[dir="rtl"] .sizes-btn { padding: 0.4rem 0.95rem 0.4rem 0.7rem; }
.sizes-btn b { color: var(--text); font-size: 1rem; font-weight: var(--fw-semibold); }
.sizes-btn:hover { background: var(--fill); }
.sizes-btn:active { transform: scale(0.97); }
.sizes-btn[aria-expanded="true"] { border-color: var(--accent-soft-line); background: var(--accent-soft); }
.chev { inline-size: 0.95rem; block-size: 0.95rem; flex: none; transition: transform var(--dur-base) var(--ease-spring-smooth); }
[aria-expanded="true"] > .chev { transform: rotate(180deg); }

.inv__panel { background: var(--bg-inset); border: 1px solid var(--line); border-radius: var(--radius-md); padding: var(--space-3); display: grid; gap: var(--space-3); animation: rise var(--dur-base) var(--ease-out) both; }
.sizes { display: grid; gap: var(--space-2); grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr)); }
.size-cell { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-sm); padding-block: 0.3rem; padding-inline: 0.75rem 0.3rem; }
.size-cell__l { font-variant-numeric: tabular-nums; direction: ltr; unicode-bidi: isolate; font-weight: var(--fw-semibold); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-inline-size: 0; }
.size-cell .stepper button { inline-size: 2.25rem; block-size: 2.25rem; }
.size-cell .stepper input { inline-size: 2.5rem; }
.add-size { display: grid; grid-template-columns: minmax(0, 1fr) 5.5rem auto; gap: var(--space-2); align-items: center; }
@media (min-width: 36rem) { .add-size { grid-template-columns: 9rem 6rem auto; justify-content: start; } }
.add-size .btn svg { inline-size: 0.9rem; block-size: 0.9rem; }
.mini { display: grid; gap: var(--space-3); grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: end; }
.mini label { display: grid; gap: 0.3rem; font-size: var(--fs-caption); color: var(--text-2); font-weight: var(--fw-medium); }
.mini__btns { grid-column: 1 / -1; display: flex; gap: var(--space-2); }
.mini__note { grid-column: 1 / -1; color: var(--text-3); font-size: 0.75rem; }
@media (min-width: 36rem) {
  .mini { grid-template-columns: 9rem 7rem auto; justify-content: start; }
  .mini__btns { grid-column: auto; }
}
.more { display: flex; justify-content: center; padding-block-start: var(--space-4); }
.list-foot { margin: var(--space-4) 0 0; padding-block-start: var(--space-4); border-block-start: 1px solid var(--line); color: var(--text-3); font-size: var(--fs-caption); }

/* ---------------------------------------------------------------- orders */
.otools { display: grid; gap: var(--space-3); grid-template-columns: repeat(2, minmax(0, 1fr)); margin-block-end: var(--space-4); }
.otools__q, .otools__seg { grid-column: 1 / -1; }
.otools__seg { display: flex; }
.otools__seg button { flex: 1; }
.ofield { display: grid; gap: 0.3rem; font-size: var(--fs-caption); color: var(--text-3); font-weight: var(--fw-medium); min-inline-size: 0; }
.ofield .field { min-block-size: 2.5rem; }
@media (min-width: 62rem) {
  .otools__seg { align-self: end; }
  .otools { grid-template-columns: minmax(16rem, 1.6fr) repeat(4, minmax(8.5rem, 1fr)); grid-template-areas: "q q q seg seg" "st ch fr to ."; }
  .otools__q { grid-area: q; } .otools__seg { grid-area: seg; justify-self: end; }
  .ofield--st { grid-area: st; } .ofield--ch { grid-area: ch; } .ofield--fr { grid-area: fr; } .ofield--to { grid-area: to; }
  .otools__seg button { flex: none; }
}
.ocount { color: var(--text-3); font-size: var(--fs-caption); padding-block: var(--space-2); border-block-end: 1px solid var(--line); }
.orders { display: grid; transition: opacity var(--dur-fast) ease; }
.orders.is-loading { opacity: 0.6; }

.order {
  display: grid; align-items: start; gap: 0.35rem var(--space-3);
  grid-template-columns: 2.5rem minmax(0, 1fr) auto;
  grid-template-areas:
    "check id sum"
    "check who who"
    ". call call"
    ". where where"
    ". items more"
    "detail detail detail";
  padding-block: var(--space-4); border-block-end: 1px solid var(--line);
  transition: background var(--dur-fast) ease;
}
.order:last-child { border-block-end: 0; }
.o-check { grid-area: check; position: relative; display: grid; place-items: center; inline-size: 2.5rem; block-size: 2.5rem; cursor: pointer; margin-block-start: -0.35rem; margin-inline-start: -0.4rem; }
.o-check input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.o-check__box {
  inline-size: 1.5rem; block-size: 1.5rem; border-radius: 0.45rem; border: 1.5px solid var(--line-strong); background: var(--card);
  display: grid; place-items: center; color: transparent;
  transition: background var(--dur-fast) ease, border-color var(--dur-fast) ease, color var(--dur-fast) ease, transform var(--dur-instant) ease-out;
}
.o-check__box svg { inline-size: 0.95rem; block-size: 0.95rem; }
.o-check:hover .o-check__box { border-color: var(--accent); }
.o-check input:checked + .o-check__box { background: var(--accent); border-color: var(--accent); color: var(--accent-contrast); }
.o-check input:focus-visible + .o-check__box { box-shadow: var(--focus-ring); }
.o-check input:active + .o-check__box { transform: scale(0.92); }
.o-id { grid-area: id; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.1rem var(--space-2); min-inline-size: 0; }
.o-id b { font-weight: var(--fw-semibold); font-variant-numeric: tabular-nums; }
.o-id small { color: var(--text-3); font-size: var(--fs-caption); }
.o-who { grid-area: who; display: flex; flex-wrap: wrap; align-items: center; gap: 0.15rem var(--space-3); min-inline-size: 0; }
.o-who b { font-weight: var(--fw-medium); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-inline-size: 100%; }
.o-who > .chan { max-inline-size: 100%; min-inline-size: 0; overflow: hidden; }
.o-who > .chan > .ltr { min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chan { display: inline-flex; align-items: center; gap: 0.35rem; color: var(--text-3); font-size: var(--fs-caption); min-inline-size: 0; }
.chan svg { inline-size: 0.95rem; block-size: 0.95rem; flex: none; }
.chan--whatsapp svg { color: #1F8A4C; }
.chan--instagram svg { color: #B4405C; }
.chan--messenger svg { color: #2F5A7A; }
.chan .ltr { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-inline-size: 14rem; }
.o-call { grid-area: call; display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem var(--space-2); min-inline-size: 0; }
.call { display: inline-flex; align-items: center; gap: 0.4rem; color: var(--text); text-decoration: none; font-weight: var(--fw-medium); font-variant-numeric: tabular-nums; border-radius: var(--radius-xs); padding-block: 0.15rem; }
.call svg { inline-size: 0.95rem; block-size: 0.95rem; color: var(--accent-text); }
.call:hover { color: var(--accent-text); }
.wa { display: inline-grid; place-items: center; inline-size: 2rem; block-size: 2rem; border-radius: var(--radius-pill); color: #1F8A4C; background: rgba(31, 138, 76, 0.08); }
.wa svg { inline-size: 1rem; block-size: 1rem; }
.wa:hover { background: rgba(31, 138, 76, 0.16); }
.differs { flex-basis: 100%; display: inline-flex; align-items: center; gap: 0.35rem; color: var(--warning); font-size: 0.75rem; font-weight: var(--fw-semibold); }
.differs svg { inline-size: 0.85rem; block-size: 0.85rem; flex: none; }
.o-where { grid-area: where; display: flex; gap: 0.4rem; align-items: flex-start; color: var(--text-2); font-size: 0.875rem; min-inline-size: 0; }
.o-where svg { inline-size: 0.95rem; block-size: 0.95rem; color: var(--text-3); flex: none; margin-block-start: 0.2rem; }
.o-where span { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.o-items { grid-area: items; display: flex; align-items: center; gap: var(--space-2); color: var(--text-3); font-size: var(--fs-caption); min-inline-size: 0; }
.thumbs { display: inline-flex; }
.thumbs img, .thumbs .ph { inline-size: 2rem; block-size: 2rem; border-radius: var(--radius-xs); object-fit: cover; border: 2px solid var(--card); background: var(--bg-inset); box-shadow: 0 0 0 1px var(--line); }
.thumbs .ph { display: grid; place-items: center; color: var(--text-disabled); }
.thumbs .ph svg { inline-size: 60%; block-size: 60%; }
.thumbs > * + * { margin-inline-start: -0.55rem; }
.o-sum { grid-area: sum; display: flex; flex-direction: column; align-items: flex-end; gap: 0.25rem; }
.o-total { font-weight: var(--fw-semibold); white-space: nowrap; }
.o-total small, .totals small, .line__p small, .line__t small small { color: var(--text-3); font-weight: var(--fw-regular); font-size: 0.75rem; }
.pend { color: var(--warning); font-weight: var(--fw-semibold); font-size: 0.8125rem; }
.o-more {
  grid-area: more; justify-self: end; display: inline-flex; align-items: center; gap: 0.35rem; border: 0; background: transparent; cursor: pointer;
  color: var(--text-2); font-size: var(--fs-caption); font-weight: var(--fw-medium); padding: 0.35rem 0.6rem; min-block-size: 2.25rem; border-radius: var(--radius-pill); white-space: nowrap;
}
.o-more:hover { background: var(--fill); color: var(--text); }
.o-detail { grid-area: detail; margin-block-start: var(--space-2); }
.order.is-checked > :not(.o-check):not(.o-detail):not(.o-more) { opacity: 0.55; }
.order.is-checked .o-id b { text-decoration: line-through; text-decoration-color: var(--text-3); }
.order.is-open { background: linear-gradient(180deg, transparent, transparent); }

.od { display: grid; gap: var(--space-4); background: var(--bg-inset); border: 1px solid var(--line); border-radius: var(--radius-md); padding: var(--space-4); animation: rise var(--dur-base) var(--ease-out) both; }
@media (min-width: 48rem) { .od { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: var(--space-6); padding: var(--space-5); } }
.od h4 { margin: 0 0 var(--space-2); font-size: var(--fs-caption); color: var(--text-3); font-weight: var(--fw-semibold); }
.od ul { list-style: none; margin: 0; padding: 0; display: grid; }
.line { display: grid; grid-template-columns: 2.75rem minmax(0, 1fr) auto; gap: var(--space-3); align-items: center; padding-block: var(--space-2); border-block-end: 1px solid var(--line); }
.line .thumb { inline-size: 2.75rem; block-size: 2.75rem; }
.line__t { display: grid; gap: 1px; min-inline-size: 0; }
.line__t b { font-weight: var(--fw-medium); font-size: 0.875rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.line__t small { color: var(--text-3); font-size: 0.75rem; }
.line__p { font-weight: var(--fw-semibold); font-size: 0.875rem; white-space: nowrap; }
.totals { display: grid; gap: 0.3rem; padding-block-start: var(--space-3); font-size: 0.875rem; }
.totals > div { display: flex; justify-content: space-between; gap: var(--space-3); color: var(--text-2); }
.totals__all { color: var(--text) !important; font-weight: var(--fw-semibold); font-size: 0.9375rem; padding-block-start: 0.3rem; border-block-start: 1px solid var(--line); }
.flag { display: flex; gap: 0.4rem; align-items: center; margin: var(--space-3) 0 0; color: var(--warning); font-size: var(--fs-caption); font-weight: var(--fw-semibold); }
.flag svg { inline-size: 0.9rem; block-size: 0.9rem; }
.od__side { display: grid; gap: var(--space-2); align-content: start; }
.kv { display: grid; gap: 1px; font-size: 0.875rem; }
.kv > span:first-child { color: var(--text-3); font-size: 0.75rem; }
.kv > span:last-child { overflow-wrap: anywhere; white-space: pre-line; }
.od__ticked { margin: 0; font-size: var(--fs-caption); }
.od__side .link-btn { justify-self: start; margin-block-start: var(--space-1); }

@media (min-width: 64rem) {
  .order {
    grid-template-columns: 2.5rem 9rem minmax(0, 1fr) minmax(12.5rem, 1.2fr) minmax(0, 1.2fr) minmax(0, 0.7fr) 9rem 8rem;
    grid-template-areas: "check id who call where items sum more" "detail detail detail detail detail detail detail detail";
    align-items: center; column-gap: var(--space-4); padding-block: var(--space-3);
  }
  .o-check { margin: 0; }
  .o-id { flex-direction: column; gap: 0; }
  .o-who { flex-direction: column; align-items: flex-start; gap: 0; }
  .o-sum { align-items: flex-end; }
  .order:hover { background: linear-gradient(90deg, transparent, var(--bg-inset) 2%, var(--bg-inset) 98%, transparent); }
}
@media (max-width: 23.99rem) { .o-more__t { display: none; } }

/* ---------------------------------------------------------------- teach the bot */
.teach .card__head { margin-block-end: var(--space-4); }
.picker { position: relative; display: grid; gap: 0.4rem; }
.picker__list {
  position: absolute; inset-inline: 0; inset-block-start: calc(100% + 4px); z-index: var(--z-raised); list-style: none; margin: 0; padding: var(--space-1);
  background: var(--card); border: 1px solid var(--line-strong); border-radius: var(--radius-sm); box-shadow: var(--shadow-lg);
  max-block-size: 18rem; overflow-y: auto; overscroll-behavior: contain;
}
.picker__list [role="option"] { display: flex; align-items: center; gap: var(--space-3); padding: 0.5rem 0.65rem; border-radius: var(--radius-xs); cursor: pointer; }
.picker__list [role="option"]:hover, .picker__list [role="option"][aria-selected="true"] { background: var(--fill); }
.picker__list .empty--sm { padding: var(--space-3); }
.picker__t { display: grid; flex: 1; min-inline-size: 0; line-height: 1.35; }
.picker__t b { font-weight: var(--fw-medium); font-variant-numeric: tabular-nums; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; justify-self: start; }
.picker__t small { color: var(--text-3); font-size: 0.75rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.picker__list small.muted { font-size: 0.75rem; white-space: nowrap; }
.picked { display: flex; align-items: center; gap: var(--space-3); min-block-size: 2.75rem; padding: 0.4rem 0.85rem; border: 1px solid var(--accent-soft-line); background: var(--accent-soft); border-radius: var(--radius-sm); }
.picked .chan svg, .picker__list .chan svg { inline-size: 1.15rem; block-size: 1.15rem; }
.fb { margin-block-start: var(--space-6); padding-block-start: var(--space-5); border-block-start: 1px solid var(--line); }
.fb__title { margin: 0 0 var(--space-2); font-size: 0.9375rem; font-weight: var(--fw-semibold); }
.fb__list, .past__list { list-style: none; margin: 0; padding: 0; display: grid; }
.fb__item { padding-block: var(--space-3); border-block-end: 1px solid var(--line); display: grid; gap: 0.25rem; }
.fb__item:last-child { border-block-end: 0; }
.fb__item p { margin: 0; color: var(--text); white-space: pre-line; overflow-wrap: anywhere; }
.fb__item.is-off p { color: var(--text-3); }
.fb__top { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-3); }
.fb__chat { font-weight: var(--fw-semibold); font-variant-numeric: tabular-nums; }
.fb__top small { font-size: 0.75rem; }
.fb__top > :last-child { margin-inline-start: auto; }

/* ---------------------------------------------------------------- dialogs */
.dlg {
  inline-size: min(40rem, calc(100% - 2rem)); max-block-size: min(52rem, calc(100dvh - 2rem)); padding: 0; border: 1px solid var(--line);
  border-radius: var(--radius-xl); background: var(--card); color: var(--text); box-shadow: var(--shadow-xl); overflow: hidden;
  flex-direction: column;
}
.dlg[open] { display: flex; animation: dlg-in var(--dur-spring-smooth) var(--ease-spring-smooth) both; }
.dlg::backdrop { background: var(--scrim); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); }
@keyframes dlg-in { from { opacity: 0; transform: translateY(12px) scale(0.985); } to { opacity: 1; transform: none; } }
.dlg__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-5) var(--space-6) var(--space-4); border-block-end: 1px solid var(--line); flex: none; }
.dlg__head h2 { margin: 0; font-size: 1.1875rem; font-weight: var(--fw-semibold); font-family: var(--font-display); letter-spacing: -0.015em; }
:lang(ar) .dlg__head h2 { font-family: var(--font-arabic); letter-spacing: 0; }
.dlg__body { padding: var(--space-5) var(--space-6) var(--space-6); overflow-y: auto; overscroll-behavior: contain; min-block-size: 0; }
.dlg__lead { margin: 0; color: var(--text-3); font-size: 0.875rem; }
.dlg__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); padding-block-start: var(--space-4); border-block-start: 1px solid var(--line); }
.dlg__actions { display: flex; gap: var(--space-2); margin-inline-start: auto; }
.dlg--confirm { inline-size: min(26rem, calc(100% - 2rem)); }
.dlg--confirm .dlg__body { display: grid; gap: var(--space-5); padding: var(--space-6); }
.confirm__msg { margin: 0; font-size: 1rem; line-height: 1.6; font-weight: var(--fw-medium); }
@media (max-width: 35.99rem) {
  .dlg:not(.dlg--confirm) { inline-size: 100%; max-inline-size: 100%; margin: auto 0 0; max-block-size: 94dvh; border-radius: var(--radius-xl) var(--radius-xl) 0 0; border-block-end: 0; }
  .dlg:not(.dlg--confirm)[open] { animation-name: sheet-in; }
  .dlg__head { padding-inline: var(--space-5); }
  .dlg__body { padding-inline: var(--space-5); padding-block-end: calc(var(--space-5) + env(safe-area-inset-bottom)); }
  .dlg__actions { inline-size: 100%; }
  .dlg__actions .btn { flex: 1; }
}
@keyframes sheet-in { from { transform: translateY(100%); } to { transform: none; } }

.photos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-2); }
.photo, .photo-add { position: relative; aspect-ratio: 1; border-radius: var(--radius-sm); overflow: hidden; }
.photo img { inline-size: 100%; block-size: 100%; object-fit: cover; border: 1px solid var(--line); border-radius: inherit; }
.photo.is-main::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 2px var(--accent); pointer-events: none; }
.photo__x {
  position: absolute; inset-block-start: 0.3rem; inset-inline-end: 0.3rem; inline-size: 1.75rem; block-size: 1.75rem; border-radius: 50%;
  border: 0; display: grid; place-items: center; cursor: pointer; background: rgba(28, 25, 23, 0.72); color: #fff;
}
.photo__x svg { inline-size: 0.8rem; block-size: 0.8rem; }
.photo-add {
  display: grid !important; place-content: center; justify-items: center; gap: 0.3rem; text-align: center; cursor: pointer;
  border: 1.5px dashed var(--line-strong); background: var(--bg-inset); color: var(--text-2); font-size: 0.75rem !important; padding: var(--space-2);
  transition: border-color var(--dur-fast) ease, background var(--dur-fast) ease, color var(--dur-fast) ease;
}
.photo-add:hover, .photo-add:focus-within { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-text); }
.photo-add svg { inline-size: 1.5rem; block-size: 1.5rem; }
.photo-add input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.photo-add[hidden] { display: none !important; }
.size-rows { display: grid; gap: var(--space-2); }
.size-row { display: grid; grid-template-columns: minmax(0, 1fr) 6.5rem 2.5rem; gap: var(--space-2); align-items: center; }
#addSizeRow { justify-self: start; }
.drop {
  display: flex !important; grid-template-columns: none; align-items: center; gap: var(--space-3); border: 1.5px dashed var(--line-strong); border-radius: var(--radius-sm);
  padding: var(--space-4); cursor: pointer; color: var(--text-2); background: var(--bg-inset); position: relative; font-weight: var(--fw-regular) !important;
  transition: border-color var(--dur-fast) ease, background var(--dur-fast) ease;
}
.drop:hover, .drop.is-over, .drop:focus-within { border-color: var(--accent); background: var(--accent-soft); }
.drop svg { inline-size: 1.4rem; block-size: 1.4rem; color: var(--accent-text); flex: none; }
.drop input { position: absolute; inline-size: 1px; block-size: 1px; opacity: 0; }
.past { margin-block-start: var(--space-2); padding-block-start: var(--space-4); border-block-start: 1px solid var(--line); }
.req { display: grid; gap: 0.25rem; padding-block: var(--space-3); border-block-end: 1px solid var(--line); }
.req:last-child { border-block-end: 0; }
.req__top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2); }
.req__top b { font-weight: var(--fw-semibold); font-size: 0.875rem; }
.req p { margin: 0; color: var(--text-2); font-size: 0.875rem; white-space: pre-line; overflow-wrap: anywhere; }
.req small { font-size: 0.75rem; }
.req .reply { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 0.45rem 0.7rem; color: var(--text); font-size: 0.8125rem; }

/* ---------------------------------------------------------------- toast, footer */
.toast {
  position: fixed; inset-inline: 0; inset-block-end: calc(var(--space-6) + env(safe-area-inset-bottom)); margin-inline: auto; inline-size: max-content; max-inline-size: calc(100% - 2rem);
  z-index: var(--z-toast); background: var(--inverse); color: var(--text-on-inverse); border-radius: var(--radius-pill);
  padding: 0.7rem 1.25rem; box-shadow: var(--shadow-lg); font-weight: var(--fw-medium); text-align: center;
  opacity: 0; transform: translateY(12px) scale(0.98); pointer-events: none;
  transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-spring-smooth) var(--ease-spring-smooth);
}
.toast[data-kind="bad"] { background: var(--danger); color: #fff; }
.toast.is-on { opacity: 1; transform: none; }
.foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-3); color: var(--text-3); font-size: var(--fs-caption); max-inline-size: var(--container-wide); margin-inline: auto; padding: 0 var(--gutter) var(--space-7); }
.foot a { color: inherit; display: inline-flex; align-items: center; gap: 0.4rem; text-decoration: none; border-radius: var(--radius-xs); }
.foot a:hover { color: var(--text); }
.foot svg { inline-size: 0.9rem; block-size: 0.9rem; }

/* panels: a short rise when a tab opens */
.panel { animation: rise var(--dur-slow) var(--ease-out) both; }
@keyframes rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.skeleton { color: transparent !important; background: linear-gradient(90deg, var(--fill), var(--fill-strong), var(--fill)); background-size: 200% 100%; animation: shimmer 1.4s linear infinite; border-radius: var(--radius-xs); }
@keyframes shimmer { to { background-position: -200% 0; } }

/* ---------------------------------------------------------------- phone */
@media (max-width: 47.99rem) {
  .bar__in { flex-wrap: wrap; padding-block: var(--space-2); gap: var(--space-2) var(--space-3); min-block-size: 0; }
  .bar__tabs { order: 3; inline-size: 100%; display: flex; }
  .bar__tabs .seg { inline-size: 100%; }
  .bar__tabs .seg button { flex: 1; padding-inline: 0.5rem; }
  .bar__end { margin-inline-start: auto; }
  main { padding-block-start: var(--space-6); }
  .head { margin-block-end: var(--space-5); }
  .head > .seg { inline-size: 100%; }
  .head > .seg button { flex: 1; padding-inline: 0.5rem; }
  .head > .btn { inline-size: 100%; }
  .card { padding: var(--space-5) var(--space-4); border-radius: var(--radius-md); }
  .kpis { gap: var(--space-3); }
  .kpi { padding: var(--space-4); }
}
/* phone: one tile per row, the number on one side and its three comparisons on the other */
@media (max-width: 35.99rem) {
  .kpis { grid-template-columns: minmax(0, 1fr); }
  .kpi:not(.kpi--funnel) {
    display: grid; column-gap: var(--space-4); row-gap: var(--space-1); align-items: start;
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.3fr); column-gap: var(--space-3);
    grid-template-areas: "label cmp" "value cmp" "hint cmp";
  }
  .kpi:not(.kpi--funnel) .kpi__label { grid-area: label; }
  .kpi:not(.kpi--funnel) .kpi__value { grid-area: value; }
  .kpi:not(.kpi--funnel) .kpi__hint { grid-area: hint; }
  .kpi:not(.kpi--funnel) .cmp {
    grid-area: cmp; align-self: center; margin: 0; padding: 0; padding-inline-start: var(--space-4); border: 0; border-inline-start: 1px solid var(--line);
  }
  .kpi__value { white-space: normal; font-size: 1.75rem; }
  .reports { margin-block-end: var(--space-7); }
  .report__top { flex-direction: column; gap: var(--space-2); }
  .toolbar__fields .field--select { flex: 1 1 100%; }
  .fig b { font-size: 1.125rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; scroll-behavior: auto !important; }
}
@media (prefers-reduced-transparency: reduce) {
  .bar, .tip { background: var(--bg); backdrop-filter: none; -webkit-backdrop-filter: none; }
}
@media (prefers-contrast: more) {
  .card, .field, .stepper, .chip { border-color: var(--text-2); }
}
@media print {
  .bar, .foot, .toast, .teach, .otools { display: none; }
  body { background: #fff; }
}
.teach, .order { scroll-margin-block-start: 8.5rem; }
.teach .form, .teach .fb { max-inline-size: 46rem; }