/* ============================================================================
   Retails back-office — "warm boutique" design-system seed.
   Tokens are the approved Claude Design values; keep every layout rule
   direction-agnostic (logical properties only — never left/right).
   ========================================================================== */

:root {
  /* Palette */
  --bg: #faf6f0;
  --ink: #33291f;
  --muted: #8c7a63;
  --secondary: #5c4d3c;
  --accent: #b4531f;
  --accent-soft: #b4531f14;
  --success: #4f7a5c;
  --success-soft: #4f7a5c14;
  --danger: #a03a2e;
  --danger-soft: #a03a2e14;
  --warn: #a8722a;
  --warn-soft: #a8722a1a;
  --border: #e6dccd;
  --divider: #f0e9dd;
  --surface: #ffffff;

  /* Shape */
  --radius-card: 14px;
  --radius-button: 12px;

  /* Type */
  --font: "Tajawal", -apple-system, "Segoe UI", Tahoma, Arial, sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.5;
}

a { color: var(--accent); text-decoration: none; }

h1, h2, h3 { margin: 0; font-weight: 700; }

/* ---------- App shell ---------- */

.shell {
  display: grid;
  grid-template-columns: 248px 1fr;
  min-height: 100vh;
}

.sidebar {
  border-inline-end: 1px solid var(--border);
  background: var(--surface);
  padding: 1rem 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.35rem 0.65rem 1rem;
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--ink);
}

.brand-mark {
  inline-size: 34px;
  block-size: 34px;
  border-radius: 10px;
  background: var(--accent);
  color: #fff;
  display: grid;
  place-items: center;
  font-weight: 800;
}

.nav-link {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.55rem 0.65rem;
  border-radius: var(--radius-button);
  color: var(--secondary);
  font-weight: 500;
}

.nav-link:hover { background: var(--divider); }

.nav-link.active {
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 700;
}

.nav-link .nav-icon { inline-size: 1.25rem; text-align: center; }

.nav-link.locked { color: var(--muted); }

.lock-hint {
  margin-inline-start: auto;
  font-size: 0.72rem;
  color: var(--accent);
  background: var(--accent-soft);
  border-radius: 999px;
  padding: 0.05rem 0.5rem;
  white-space: nowrap;
}

.main { display: flex; flex-direction: column; min-inline-size: 0; }

/* ---------- Top bar ---------- */

.topbar {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 0.7rem 1.4rem;
  border-block-end: 1px solid var(--border);
  background: var(--surface);
  flex-wrap: wrap;
}

.topbar .spacer { flex: 1; }

.select {
  font-family: var(--font);
  font-size: 0.9rem;
  color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-button);
  padding: 0.4rem 0.7rem;
}

.btn {
  font-family: var(--font);
  font-size: 0.9rem;
  font-weight: 700;
  border-radius: var(--radius-button);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--secondary);
  padding: 0.4rem 0.9rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.btn:hover { border-color: var(--muted); }

.btn-accent {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

.user-chip {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.25rem 0.6rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg);
}

.avatar {
  inline-size: 30px;
  block-size: 30px;
  border-radius: 50%;
  background: var(--success);
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 0.8rem;
  font-weight: 700;
}

.user-chip .who { display: flex; flex-direction: column; line-height: 1.15; }
.user-chip .who .name { font-size: 0.85rem; font-weight: 700; }
.user-chip .who .tenant { font-size: 0.72rem; color: var(--muted); }

.dev-stub-badge {
  font-size: 0.68rem;
  color: var(--warn);
  background: var(--warn-soft);
  border-radius: 999px;
  padding: 0.05rem 0.45rem;
}

/* Development anonymous fallback (V7): the chip must never pass for a signed-in user. */
.user-chip-stub { border: 1px dashed var(--warn); background: var(--warn-soft); }
.user-chip-stub .avatar { background: var(--warn); color: #fff; }
.user-chip-stub .who .name { font-size: 0.78rem; font-weight: 700; color: var(--warn); }

/* Mock ORG-2 data (V3): a human must never mistake fabricated rows for the API's. */
.demo-data-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-block-start: 0.5rem;
  padding: 0.3rem 0.7rem;
  border: 1px dashed var(--warn);
  border-radius: 999px;
  color: var(--warn);
  background: var(--warn-soft);
  font-size: 0.8rem;
  font-weight: 700;
}

/* ---------- Page + cards ---------- */

.page { padding: 1.4rem; display: flex; flex-direction: column; gap: 1.1rem; }

.page-head { display: flex; align-items: baseline; gap: 0.8rem; flex-wrap: wrap; }
.page-head h1 { font-size: 1.35rem; }
.page-note { color: var(--muted); font-size: 0.82rem; }

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: 1rem 1.1rem;
  min-inline-size: 0;
}

.card-head {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-block-end: 0.7rem;
}

.card-head h2 { font-size: 0.98rem; color: var(--secondary); }
.card-head .count-pill {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--accent);
  background: var(--accent-soft);
  border-radius: 999px;
  padding: 0.05rem 0.55rem;
}

.grid-kpi {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
}

.grid-widgets {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 1rem;
  align-items: start;
}

.kpi-label { color: var(--muted); font-size: 0.82rem; font-weight: 500; }
.kpi-value { font-size: 1.55rem; font-weight: 800; margin-block: 0.15rem; }
.kpi-compare { display: flex; gap: 0.7rem; font-size: 0.78rem; flex-wrap: wrap; }

.delta-up { color: var(--success); font-weight: 700; }
.delta-down { color: var(--danger); font-weight: 700; }
.delta-flat { color: var(--muted); font-weight: 700; }

/* ---------- Tables & rows ---------- */

.table-wrap { overflow-x: auto; }

table.simple {
  inline-size: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
}

table.simple th {
  text-align: start;
  color: var(--muted);
  font-weight: 500;
  font-size: 0.78rem;
  padding: 0.35rem 0.5rem;
  border-block-end: 1px solid var(--divider);
}

table.simple td {
  padding: 0.45rem 0.5rem;
  border-block-end: 1px solid var(--divider);
}

table.simple tr:last-child td { border-block-end: none; }

.num { font-variant-numeric: tabular-nums; white-space: nowrap; }

.row-list { display: flex; flex-direction: column; }

.row-item {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding-block: 0.5rem;
  border-block-end: 1px solid var(--divider);
  font-size: 0.88rem;
}

.row-item:last-child { border-block-end: none; }

.row-item .grow { flex: 1; min-inline-size: 0; }
.row-item .title { font-weight: 700; }
.row-item .sub { color: var(--muted); font-size: 0.78rem; }

.pill {
  border-radius: 999px;
  padding: 0.08rem 0.6rem;
  font-size: 0.75rem;
  font-weight: 700;
  white-space: nowrap;
}

.pill-success { color: var(--success); background: var(--success-soft); }
.pill-danger { color: var(--danger); background: var(--danger-soft); }
.pill-warn { color: var(--warn); background: var(--warn-soft); }
.pill-muted { color: var(--muted); background: var(--divider); }

.offline-row { opacity: 0.55; }

/* ---------- Bars (sales by branch) ---------- */

.bar-track {
  block-size: 8px;
  border-radius: 999px;
  background: var(--divider);
  overflow: hidden;
}

.bar-fill {
  block-size: 100%;
  border-radius: 999px;
  background: var(--accent);
}

/* ---------- Empty & locked states ---------- */

.empty-state {
  text-align: center;
  color: var(--muted);
  padding: 1.6rem 1rem;
  font-size: 0.88rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  align-items: center;
}

.empty-state .glyph { font-size: 1.6rem; }

.locked-card { position: relative; }

.locked-overlay {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding: 1.2rem;
  text-align: center;
  color: var(--muted);
  font-size: 0.85rem;
}

/* ---------- Setup checklist ---------- */

.check-item { display: flex; align-items: center; gap: 0.55rem; padding-block: 0.32rem; font-size: 0.88rem; }
.check-done { color: var(--muted); text-decoration: line-through; }
.check-mark { color: var(--success); font-weight: 800; }
.check-todo-mark { color: var(--border); font-weight: 800; }

.progress-track { block-size: 8px; border-radius: 999px; background: var(--divider); overflow: hidden; margin-block: 0.5rem; }
.progress-fill { block-size: 100%; background: var(--success); border-radius: 999px; }

/* ---------- Responsive ---------- */

@media (max-width: 860px) {
  .shell { grid-template-columns: 1fr; }
  .sidebar {
    flex-direction: row;
    overflow-x: auto;
    border-inline-end: none;
    border-block-end: 1px solid var(--border);
    align-items: center;
  }
  .brand { padding-block-end: 0.35rem; }
  .nav-link { white-space: nowrap; }
}

/* ---------- Forms & alerts ---------- */

.input {
  font-family: var(--font);
  font-size: 0.95rem;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-button);
  padding: 0.55rem 0.8rem;
  inline-size: 100%;
}

.input:focus, .select:focus { outline: 2px solid var(--accent-soft); border-color: var(--accent); }
.input.invalid { border-color: var(--danger); }

.field-error { color: var(--danger); font-size: 0.8rem; }

.alert {
  border-radius: var(--radius-button);
  padding: 0.6rem 0.9rem;
  font-size: 0.88rem;
  border: 1px solid transparent;
}

.alert-danger { color: var(--danger); background: var(--danger-soft); border-color: var(--danger); }
.alert-success { color: var(--success); background: var(--success-soft); border-color: var(--success); }
.alert-warn { color: var(--warn); background: var(--warn-soft); border-color: var(--warn); }

.btn:disabled { opacity: 0.55; cursor: not-allowed; }
.btn-block { inline-size: 100%; justify-content: center; }
.btn-small { font-size: 0.8rem; padding: 0.25rem 0.6rem; }
.btn-danger { color: var(--danger); border-color: var(--danger); background: var(--danger-soft); }
.inline-form { display: inline; margin: 0; }

/* ---------- Auth (sign-in) ---------- */

.auth-shell {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 1.5rem;
}

.auth-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: 1.6rem 1.5rem;
  inline-size: min(100%, 400px);
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.auth-card .brand { padding-inline: 0; }
.auth-card h1 { font-size: 1.3rem; }
.auth-form { display: flex; flex-direction: column; gap: 0.4rem; }
.auth-form label { font-size: 0.85rem; color: var(--secondary); font-weight: 500; margin-block-start: 0.4rem; }
.auth-form .btn { margin-block-start: 0.8rem; }

.auth-divider {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--muted);
  font-size: 0.8rem;
}

.auth-divider::before, .auth-divider::after { content: ""; flex: 1; border-block-start: 1px solid var(--divider); }
.auth-hint { margin: 0; text-align: center; }
.google-mark { font-weight: 800; color: var(--accent); }
.lang-link { align-self: center; font-size: 0.85rem; }

/* ---------- List toolbar, sort, pager ---------- */

.toolbar {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
  margin-block-end: 0.8rem;
}

.toolbar-search { inline-size: min(100%, 260px); }
.toolbar .spacer { flex: 1; }

.sort-btn {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  text-align: start;
}

.column-chooser { position: relative; }
.column-chooser summary { list-style: none; }
.column-chooser summary::-webkit-details-marker { display: none; }

.column-menu {
  position: absolute;
  inset-inline-end: 0;
  inset-block-start: calc(100% + 0.3rem);
  z-index: 5;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-button);
  padding: 0.5rem 0.8rem;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  min-inline-size: 180px;
  font-size: 0.85rem;
  box-shadow: 0 8px 24px rgba(51, 41, 31, 0.12);
}

.column-menu label { display: flex; align-items: center; gap: 0.45rem; }

table.registers td.actions { white-space: nowrap; }
table.registers td.actions .btn + .btn { margin-inline-start: 0.4rem; }
tr.alert-row td { background: var(--danger-soft); }

.pager {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
  margin-block-start: 0.8rem;
}

.pager .spacer { flex: 1; }

/* ---------- Modal ---------- */

.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(51, 41, 31, 0.45);
  display: grid;
  place-items: center;
  padding: 1rem;
  z-index: 20;
}

.modal {
  background: var(--surface);
  border-radius: var(--radius-card);
  padding: 1.3rem 1.4rem;
  inline-size: min(100%, 440px);
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}

.modal h2 { font-size: 1.05rem; }
.modal p { margin: 0; font-size: 0.9rem; }
.modal-actions { display: flex; justify-content: flex-end; gap: 0.5rem; margin-block-start: 0.4rem; }

.pairing-code {
  font-size: 2.2rem;
  font-weight: 800;
  letter-spacing: 0.35em;
  text-align: center;
  font-variant-numeric: tabular-nums;
  padding: 0.6rem;
  border-radius: var(--radius-button);
  background: var(--accent-soft);
  color: var(--accent);
}

/* ---------- Public surfaces (landing / pricing / sign-up) ----------
   Signed-out chrome. Logical properties only — the whole page mirrors in RTL with no
   direction-specific rules (i18n-rtl.md). */

.public-shell {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.public-bar {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.7rem 1.4rem;
  border-block-end: 1px solid var(--border);
  background: var(--surface);
  position: sticky;
  inset-block-start: 0;
  z-index: 10;
  flex-wrap: wrap;
}

.public-bar .brand { padding: 0; font-size: 1.05rem; }

.public-nav { display: flex; gap: 1rem; margin-inline-start: 0.8rem; }
.public-nav a { color: var(--secondary); font-weight: 500; font-size: 0.9rem; }
.public-nav a:hover { color: var(--accent); }

.public-main {
  flex: 1;
  inline-size: min(100%, 1080px);
  margin-inline: auto;
  padding: 2.4rem 1.4rem 3rem;
}

.public-footer {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
  padding: 1rem 1.4rem;
  border-block-start: 1px solid var(--border);
  color: var(--muted);
  font-size: 0.85rem;
  background: var(--surface);
}

/* ---------- Hero ---------- */

.hero { text-align: center; padding-block: 1.5rem 2.5rem; }
.hero.narrow { inline-size: min(100%, 560px); margin-inline: auto; }

.hero .eyebrow {
  margin: 0 0 0.6rem;
  color: var(--accent);
  font-weight: 700;
  font-size: 0.82rem;
  letter-spacing: 0.04em;
}

.hero h1 { font-size: clamp(1.7rem, 4vw, 2.6rem); line-height: 1.25; }

.hero-sub {
  margin: 0.8rem auto 0;
  max-inline-size: 62ch;
  color: var(--secondary);
  font-size: 1.02rem;
}

.hero-cta {
  display: flex;
  gap: 0.6rem;
  justify-content: center;
  flex-wrap: wrap;
  margin-block: 1.4rem 0.7rem;
}

.btn-lg { padding: 0.6rem 1.3rem; font-size: 0.98rem; }

.notice { text-align: start; margin-block-start: 1.4rem; border-inline-start: 4px solid var(--warn); }
.notice p { margin: 0 0 0.4rem; }
.notice p:last-child { margin-block-end: 0; color: var(--secondary); }

/* ---------- Sections ---------- */

.section { padding-block: 2.4rem; scroll-margin-block-start: 4.5rem; }
.section > h2 { font-size: 1.5rem; text-align: center; }
.section-sub {
  margin: 0.6rem auto 1.8rem;
  max-inline-size: 66ch;
  text-align: center;
  color: var(--muted);
}
.closing { text-align: center; }

/* ---------- Pros grid ---------- */

.pros {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1rem;
}

.pro-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: 1.1rem 1.2rem;
}

.pro-glyph {
  display: grid;
  place-items: center;
  inline-size: 34px;
  block-size: 34px;
  border-radius: 10px;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 1rem;
  font-weight: 800;
  margin-block-end: 0.6rem;
}

.pro-card h3 { font-size: 1rem; margin-block-end: 0.35rem; }
.pro-card p { margin: 0; color: var(--secondary); font-size: 0.9rem; }

/* ---------- Plan cards ---------- */

.plans {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1rem;
  align-items: stretch;
}

.plan-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: 1.2rem 1.1rem;
}

.plan-card.featured { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }

.plan-flag {
  position: absolute;
  inset-block-start: -0.7rem;
  inset-inline-start: 1rem;
  background: var(--accent);
  color: #fff;
  border-radius: 999px;
  padding: 0.1rem 0.6rem;
  font-size: 0.72rem;
  font-weight: 700;
}

.plan-card h3 { font-size: 1.05rem; }

.plan-price { margin: 0; display: flex; align-items: baseline; gap: 0.3rem; flex-wrap: wrap; }
.plan-price .amount { font-size: 1.9rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.plan-price .per, .plan-from { color: var(--muted); font-size: 0.85rem; }
.plan-price-alt { margin: -0.2rem 0 0; color: var(--muted); font-size: 0.82rem; }
.plan-limits { margin: 0; color: var(--secondary); font-size: 0.86rem; }

.plan-lines { list-style: none; margin: 0.3rem 0 0.6rem; padding: 0; display: grid; gap: 0.35rem; flex: 1; }
.plan-lines .line { display: flex; gap: 0.45rem; align-items: flex-start; font-size: 0.86rem; }
.plan-lines .mark { font-size: 0.8rem; line-height: 1.5; }
.plan-lines .yes .mark { color: var(--success); }
.plan-lines .no { color: var(--muted); }
.plan-lines .no .mark { color: var(--muted); }
.plan-lines .detail .mark { color: var(--accent); }

/* ---------- Add-ons ---------- */

.addons { margin-block-start: 1.2rem; }
.addons h3 { font-size: 1rem; margin-block-end: 0.6rem; }
.addons ul { list-style: none; margin: 0 0 0.7rem; padding: 0; display: grid; gap: 0.35rem; }
.addons li {
  display: flex;
  gap: 0.6rem;
  align-items: baseline;
  font-size: 0.9rem;
  border-block-end: 1px solid var(--divider);
  padding-block-end: 0.35rem;
}
.addons li:last-of-type { border-block-end: 0; }
.addons .addon-price { margin-inline-start: auto; color: var(--secondary); font-weight: 700; white-space: nowrap; }

@media (max-width: 640px) {
  .public-nav { display: none; }
  .public-main { padding-inline: 1rem; }
}

/* ---------- ON-1 sign-up wizard ----------
   Logical properties only: the stepper, the slug row and the banner all mirror in Arabic
   without a single left/right rule. */

.signup { text-align: start; }
.signup h1, .signup .hero-sub { text-align: center; }

.wizard-steps {
  list-style: none;
  margin: 1.4rem 0 1rem;
  padding: 0;
  display: flex;
  gap: 0.5rem;
  justify-content: center;
  flex-wrap: wrap;
  font-size: 0.85rem;
}

.wizard-step {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--muted);
  padding: 0.25rem 0.7rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface);
}

.wizard-step .step-num {
  inline-size: 1.35rem;
  block-size: 1.35rem;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: var(--divider);
  color: var(--secondary);
  font-size: 0.75rem;
  font-weight: 700;
}

.wizard-step.current { color: var(--ink); border-color: var(--accent); font-weight: 700; }
.wizard-step.current .step-num { background: var(--accent); color: #fff; }
.wizard-step.done { color: var(--success); border-color: var(--success); }
.wizard-step.done .step-num { background: var(--success-soft); color: var(--success); }

.signup-card { text-align: start; display: flex; flex-direction: column; gap: 0.85rem; }
.signup-card h2 { font-size: 1.15rem; }

.form-grid { display: grid; gap: 0.85rem; }

.field { display: flex; flex-direction: column; gap: 0.28rem; }
.field label { font-size: 0.85rem; font-weight: 700; }
.field .optional { font-weight: 400; color: var(--muted); font-size: 0.78rem; }
.field-help { margin: 0.2rem 0 0; display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; font-size: 0.82rem; }

.check-line { display: flex; align-items: flex-start; gap: 0.5rem; font-size: 0.88rem; }
.check-line input { margin-block-start: 0.2rem; }

.slug-row { display: flex; align-items: stretch; gap: 0; }

.slug-prefix {
  display: flex;
  align-items: center;
  padding-inline: 0.7rem;
  border: 1px solid var(--border);
  border-inline-end: none;
  border-start-start-radius: var(--radius-button);
  border-end-start-radius: var(--radius-button);
  background: var(--divider);
  color: var(--secondary);
  font-size: 0.85rem;
  white-space: nowrap;
}

.slug-row .input {
  border-start-start-radius: 0;
  border-end-start-radius: 0;
}

.slug-status { font-size: 0.8rem; min-block-size: 1.1em; color: var(--muted); }
.slug-status.slug-ok { color: var(--success); font-weight: 700; }
.slug-status.slug-bad { color: var(--danger); font-weight: 700; }
.slug-status.slug-pending { color: var(--muted); }

.store-url { margin: 0; font-size: 1.05rem; font-weight: 700; word-break: break-all; }

/* ---------- Tenant switcher (ON-1 account ↔ multiple tenants) ---------- */

.tenant-switcher { margin-block-start: 1rem; border-block-start: 1px solid var(--divider); padding-block-start: 0.8rem; }
.tenant-switcher h3 { font-size: 0.95rem; margin-block-end: 0.4rem; }
.tenant-switcher .row-item { gap: 0.6rem; align-items: center; }
.tenant-switcher .spacer { flex: 1; }
.tenant-switcher .who { display: flex; flex-direction: column; line-height: 1.2; min-inline-size: 0; }
.tenant-switcher .who .name { font-weight: 700; font-size: 0.9rem; }
.tenant-switcher .who .tenant { font-size: 0.75rem; color: var(--muted); word-break: break-all; }

/* ---------- Q4 subscription banner (trial → grace → lock) ---------- */

.sub-banner {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  flex-wrap: wrap;
  padding: 0.6rem 1.1rem;
  font-size: 0.88rem;
  border-block-end: 1px solid var(--border);
}

.sub-banner .spacer { flex: 1; }
.sub-banner .sub-glyph { font-size: 1.05rem; }
.sub-banner .sub-text { display: flex; flex-direction: column; line-height: 1.25; min-inline-size: 0; }
.sub-banner .sub-detail { font-size: 0.8rem; opacity: 0.9; }

.sub-banner.sub-info { background: var(--accent-soft); color: var(--secondary); }
.sub-banner.sub-warning { background: var(--warn-soft); color: var(--warn); }
.sub-banner.sub-critical { background: var(--warn-soft); color: var(--danger); border-block-end-color: var(--danger); }
.sub-banner.sub-locked { background: var(--danger-soft); color: var(--danger); border-block-end-color: var(--danger); }

@media (min-width: 720px) {
  .form-grid { grid-template-columns: 1fr 1fr; }
  .form-grid .field:has(#storeName),
  .form-grid .field:has(#slug) { grid-column: 1 / -1; }
}

@media (max-width: 480px) {
  .wizard-steps { font-size: 0.78rem; }
  .sub-banner { align-items: flex-start; }
}

/* ============================================================================
   Data lists & editors — the doc 01 §7.3 list standard and §7.4 form standard.

   These classes were being used by CAT-2/CAT-3 before they were ever defined,
   so those screens rendered as unstyled tables; ORG-1/ORG-3/ORG-4 and CAT-1
   use the same vocabulary. Logical properties only — every one of these has to
   mirror in Arabic without a second rule.
   ========================================================================== */

.list-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  padding-block-end: 0.8rem;
  margin-block-end: 0.2rem;
  border-block-end: 1px solid var(--divider);
}

/* The search box takes the slack; the filters keep their intrinsic width. */
.list-toolbar input[type="search"] { flex: 1 1 14rem; min-inline-size: 10rem; }
.list-toolbar .btn-accent { margin-inline-start: auto; }

table.data-table {
  inline-size: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
}

table.data-table th {
  text-align: start;
  color: var(--muted);
  font-weight: 500;
  font-size: 0.78rem;
  padding: 0.45rem 0.55rem;
  border-block-end: 1px solid var(--border);
  white-space: nowrap;
}

table.data-table td {
  padding: 0.55rem 0.55rem;
  border-block-end: 1px solid var(--divider);
  vertical-align: top;
}

table.data-table tr:last-child td { border-block-end: none; }
table.data-table tbody tr:hover { background: var(--accent-soft); }

/* Archived and suspended rows stay legible — greyed, never hidden: they are
   still the answer to "who rang this up last year?". */
table.data-table tr.row-archived td { color: var(--muted); }

.col-actions { text-align: end; white-space: nowrap; }
.col-actions .btn { margin-inline-start: 0.3rem; }

.cell-sub { color: var(--muted); font-size: 0.78rem; margin-block-start: 0.15rem; }
.mono { font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; }

/* A button that reads as a link: the row's primary affordance without turning
   the whole row into a click target that swallows the action buttons. */
.link {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  color: var(--accent);
  cursor: pointer;
  text-align: start;
}
.link:hover { text-decoration: underline; }
.link.strong { font-weight: 600; color: var(--ink); }
.link.strong:hover { color: var(--accent); }

.checkbox {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.85rem;
  white-space: nowrap;
  cursor: pointer;
}
.checkbox input { accent-color: var(--accent); }

.check-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
  gap: 0.35rem 0.8rem;
  padding-block: 0.3rem;
}

.field-label {
  display: block;
  font-size: 0.8rem;
  color: var(--secondary);
  font-weight: 600;
  margin-block-end: 0.25rem;
}

/* A branch code, a permission key, an action name — short identifiers that are
   typed and read back, so they get a monospaced, bounded shape. */
.code-chip {
  display: inline-block;
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: 0.8rem;
  background: var(--divider);
  border-radius: 6px;
  padding: 0.1rem 0.4rem;
}

.pin-input {
  inline-size: 8rem;
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: 1.3rem;
  letter-spacing: 0.35em;
  text-align: center;
}

.modal-wide { inline-size: min(100%, 680px); }
/* The unsaved-changes guard sits above the editor it is guarding. */
.modal-top { z-index: 30; }

/* Depth in a tree, expressed as leading space rather than nested tables — a
   table per level cannot be scanned down one column. */
.tree-indent { display: inline-block; inline-size: calc(var(--depth, 0) * 1.4rem); }

.diff-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 0.8rem;
}

.json-block {
  margin: 0;
  max-block-size: 18rem;
  overflow: auto;
  background: var(--bg);
  border: 1px solid var(--divider);
  border-radius: 8px;
  padding: 0.6rem;
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: 0.76rem;
  /* Audit payloads are machine-written and can be a single very long line. */
  white-space: pre-wrap;
  word-break: break-word;
  /* jsonb is data, not prose: it reads left-to-right even on an Arabic page. */
  direction: ltr;
  text-align: start;
}

/* ---------- Settings screens (M2) ---------- */

/* A form that is a page rather than a dialog needs its own action bar. */
.form-actions {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
  margin-block: 0.4rem 1rem;
}

.field-warn {
  display: block;
  color: var(--warn);
  font-size: 0.78rem;
  margin-block-start: 0.2rem;
}

.alert-warn { color: var(--warn); background: var(--warn-soft); }
.alert-success { color: var(--success); background: var(--success-soft); }

/* The rate history under a tax class: a row of dated chips, so "what was the rate in March"
   is answered by looking rather than by clicking. */
.sub-row td { padding-block-start: 0; border-block-end: 1px solid var(--divider); }

.rate-history {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  padding-block-end: 0.4rem;
}

.rate-chip {
  display: inline-flex;
  align-items: baseline;
  gap: 0.35rem;
  font-size: 0.82rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.15rem 0.5rem;
}

.rate-chip .rate-date { color: var(--muted); font-size: 0.74rem; }
.rate-current { border-color: var(--success); }
/* A rate that has not started yet is not the rate — it is a promise about one. */
.rate-scheduled { border-style: dashed; border-color: var(--warn); }

/* ---------------------------------------------------------------- ST-2 receipt designer */

/* Form beside paper. Collapses to one column on a phone — the owner persona works from one
   half the time (doc 01 §7). */
.designer {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 1rem;
    align-items: start;
}

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

.designer-preview { position: sticky; top: 1rem; }

.color-field { display: flex; gap: .5rem; align-items: center; }
.color-swatch { inline-size: 3rem; block-size: 2.25rem; padding: 0; border: 1px solid var(--line); border-radius: .375rem; background: none; }
.color-field .input { inline-size: 8rem; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }

.locked-list { list-style: none; margin: .5rem 0 0; padding: 0; display: grid; gap: .375rem; }
.locked-list li { display: flex; align-items: center; gap: .5rem; }

.attribution { margin-block-start: 1rem; }
.pill { display: inline-block; padding: .125rem .5rem; border-radius: 999px; font-size: .8125rem; }
.pill-on { background: var(--ok-bg, #e6f4ea); color: var(--ok-fg, #17632c); }
.pill-off { background: var(--muted-bg, #eee); color: var(--muted-fg, #555); }

.tabs { display: flex; gap: .25rem; }
.tab { border: 1px solid var(--line); background: none; padding: .25rem .625rem; border-radius: .375rem; cursor: pointer; }
.tab-on { background: var(--accent, #2563eb); color: #fff; border-color: transparent; }

/* The paper. Monospace and pre-wrapped, because the preview reproduces a fixed-column printer:
   proportional type would centre and wrap differently from the register and the whole screen
   would be showing something the printer never produces. */
.paper {
    font-family: ui-monospace, SFMono-Regular, Menlo, "Courier New", monospace;
    font-size: .8125rem;
    line-height: 1.35;
    white-space: pre;
    overflow-x: auto;
    background: #fff;
    color: #111;
    border: 1px solid var(--line);
    border-radius: .375rem;
    padding: .75rem;
    margin: .5rem 0 0;
}

.paper-58 { max-inline-size: 26rem; }
.paper-80 { max-inline-size: 36rem; }

.preview-notes { display: grid; gap: .25rem; margin-block-start: .5rem; }

/* ------------------------------------------------------------------ M6 inventory (INV-1/2/5) */

/* The matrix scrolls rather than wrapping: a chain with eight branches must stay readable, and
   a wrapped column is a column nobody trusts. */
.matrix-scroll { overflow-x: auto; }
.matrix th.num, .matrix td.num { text-align: end; white-space: nowrap; }
.data-table td.num, .data-table th.num { text-align: end; }
.data-table td.strong { font-weight: 600; }

/* Negative is the one state that must be unmissable — it means the books disagree with the
   shelf. Colour alone would fail a colour-blind owner, so the row also carries a start border. */
.row-negative { background: var(--danger-bg, #fdecec); }
.row-negative > td:first-child { border-inline-start: 3px solid var(--danger-fg, #b3261e); }
.data-table td.neg { color: var(--danger-fg, #b3261e); font-weight: 600; }
.data-table td.low { color: var(--warn-fg, #8a5300); }

.cell-title { font-weight: 500; }
.cell-sub { font-size: .8125rem; color: var(--muted-fg, #666); }

.row-drill > td { background: var(--surface-2, #fafafa); }
.drill-list { list-style: none; margin: .5rem 0 0; padding: 0; display: grid; gap: .25rem; }
.drill-list li { display: flex; gap: .5rem; align-items: baseline; flex-wrap: wrap; }

.picker-list { list-style: none; margin: .375rem 0 0; padding: 0; display: grid; gap: .25rem; }
.picker-list li { padding: .125rem 0; }

.input-qty { inline-size: 6rem; text-align: end; }

.alert-warn { background: var(--warn-bg, #fff4e5); color: var(--warn-fg, #8a5300); }

/* ---------------------------------------------------------------- RPT-1/2/3 report screens */

.report-section { margin-block-start: 1.25rem; }
.report-section-title { font-size: 1rem; margin: 0 0 .5rem; }

/* Breakdowns sit side by side so branch / register / cashier / method read as one comparison,
   and collapse to one column on a phone (doc 01 §7 — the owner works from one half the time). */
.report-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); gap: 1rem; }

.kpi-row { display: flex; flex-wrap: wrap; gap: 1.25rem; margin-block-end: .75rem; }
.kpi { display: flex; flex-direction: column; min-inline-size: 7rem; }
.kpi-label { font-size: .8125rem; color: var(--muted-fg, #666); }
.kpi-value { font-size: 1.25rem; font-variant-numeric: tabular-nums; }
.kpi-value.strong { font-weight: 600; }
.kpi-value.neg { color: var(--danger-fg, #b3261e); }

/* The heatmap encodes intensity as opacity over the accent, and ALSO prints the transaction
   count in each cell — colour alone would leave a colour-blind owner reading nothing. */
.heatmap { display: grid; grid-template-columns: repeat(auto-fit, minmax(3rem, 1fr)); gap: .25rem; }
.heat-cell {
    display: flex; flex-direction: column; align-items: center; gap: .125rem;
    padding: .375rem .25rem; border-radius: .25rem;
    background: color-mix(in srgb, var(--accent, #2563eb) calc(var(--heat) * 100%), transparent);
    border: 1px solid var(--line);
}
.heat-hour { font-size: .75rem; font-variant-numeric: tabular-nums; }
.heat-count { font-size: .8125rem; font-weight: 600; }

.alert-info { background: var(--info-bg, #eef4ff); color: var(--info-fg, #1e40af); }

.data-table tfoot td { border-block-start: 2px solid var(--line); font-weight: 600; }

/* ------------------------------------------------------------------ M14 operator console (SA-1)
   Deliberately a different visual register from the store back office. An operator is looking at
   somebody else's business, so the chrome should never be mistakable for their own — hence the
   dark bar and the permanent warning strip rather than the usual header.

   All spacing is logical (inline-start/end, not left/right) so the area mirrors correctly in
   Arabic, like every other screen. */

.badge {
    display: inline-block;
    padding: 0.1rem 0.5rem;
    border-radius: 999px;
    font-size: 0.75rem;
    line-height: 1.5;
    background: var(--surface-2, #eceff3);
    color: var(--secondary, #5b6472);
    white-space: nowrap;
}
.badge-success { background: #e4f5ea; color: #1c6b3a; }
.badge-info    { background: #e6eefc; color: #1f4a8f; }
.badge-warning { background: #fdf0dc; color: #8a5a10; }
.badge-danger  { background: #fbe6e6; color: #99231f; }

.operator-shell { min-block-size: 100vh; display: flex; flex-direction: column; }

.operator-bar {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    padding: 0.7rem 1.2rem;
    background: #1d2330;
    color: #f2f4f8;
}
.operator-brand { display: flex; align-items: center; gap: 0.5rem; font-weight: 600; }
.operator-nav { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.operator-nav a {
    color: #c8cfdb;
    text-decoration: none;
    padding: 0.3rem 0.7rem;
    border-radius: 6px;
}
.operator-nav a:hover { background: rgba(255, 255, 255, 0.08); color: #fff; }
.operator-nav a.active { background: rgba(255, 255, 255, 0.16); color: #fff; }
.operator-identity {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    margin-inline-start: auto;
}
.operator-identity .page-note { color: #aab3c2; }

/* Permanent, not dismissible: forgetting whose data you are looking at is the mistake this
   console is most likely to cause. */
.operator-warning {
    padding: 0.5rem 1.2rem;
    background: #fdf0dc;
    color: #8a5a10;
    font-size: 0.85rem;
    border-block-end: 1px solid #f0dcb8;
}

.operator-main { padding: 1.2rem; flex: 1; }

.op-totals { display: flex; flex-wrap: wrap; gap: 1.6rem; }
.op-stat { display: flex; flex-direction: column; gap: 0.15rem; }
.op-stat-value { font-size: 1.4rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.op-stat-label { font-size: 0.78rem; color: var(--secondary, #5b6472); }

.op-store { display: flex; flex-direction: column; gap: 0.1rem; }

.op-detail-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
    gap: 1rem;
}
.op-detail-grid > div { display: flex; flex-direction: column; gap: 0.2rem; }

.op-actions { display: flex; flex-wrap: wrap; gap: 0.6rem; }

.op-flags { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.3rem; }
.op-flags li { display: flex; gap: 0.6rem; align-items: baseline; }

@media (max-width: 640px) {
    .operator-identity { margin-inline-start: 0; inline-size: 100%; }
    .op-totals { gap: 1rem; }
}

/* ---------------------------------------------------------------- print

   A supplier statement gets printed and handed over, so the print path is a real output, not a
   fallback. It prints the page's own DOM: same figures, same language, same direction, nothing
   that can drift away from what the screen showed. Navigation, filters and buttons are chrome and
   are dropped; the card loses its frame so the paper is not a screenshot of an app. */
@media print {
    .sidebar,
    .topbar,
    .operator-bar,
    .public-bar,
    .no-print {
        display: none !important;
    }

    .shell,
    .main,
    .page {
        display: block;
        margin: 0;
        padding: 0;
        max-inline-size: none;
    }

    .card {
        border: none;
        box-shadow: none;
        padding: 0;
        margin-block-end: 1rem;
        break-inside: auto;
    }

    /* A row split across a page break is a row an accountant reads twice. */
    .data-table tr {
        break-inside: avoid;
    }

    .data-table thead {
        display: table-header-group;
    }
}

/* ---------------------------------------------------------------- CAT-5 label sheet

   A 5 × 13 grid of A4 label stationery, drawn at the proportions of the real thing so a person
   can see the sheet they are about to feed rather than count squares in their head. Positions
   before the chosen start are drawn as already peeled off — a part-used sheet is the normal
   state of a stockroom, and getting the offset wrong wastes the whole sheet. */
.label-sheet {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 2px;
    max-inline-size: 40rem;
    padding: .5rem;
    background: var(--divider);
    border-radius: .25rem;
}

.label-cell {
    aspect-ratio: 38 / 21;
    background: var(--surface, #fff);
    border: 1px dashed var(--divider);
    padding: .125rem .25rem;
    overflow: hidden;
    font-size: .5rem;
    line-height: 1.15;
}

.label-cell.label-used {
    background: repeating-linear-gradient(
        45deg, var(--divider), var(--divider) 3px, transparent 3px, transparent 6px);
}

.label-name { font-weight: 600; }
.label-price { font-size: .625rem; font-weight: 700; }
.label-sku { color: var(--muted); }

@media print {
    .sheet-preview .label-sheet { background: none; padding: 0; }
    .sheet-preview .label-cell { border-color: transparent; }
}

/* CAT-1: the row being dragged. Dimmed rather than hidden — a row that vanishes mid-drag makes
   the list jump under the cursor and the drop lands somewhere nobody aimed at. */
.data-table tr.row-dragging { opacity: .45; }
.data-table tr[draggable="true"] { cursor: grab; }

/* NTF-1 alert centre.

   Severity is carried by a start-edge bar rather than a background wash: the row still has to be
   readable, and colour alone is not an accessible signal — the alert's own text says what it is.
   Logical properties throughout, so the bar lands on the correct edge in Arabic. */
.notification-list { list-style: none; margin: 0; padding: 0; }

.notification {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    padding: .75rem 1rem;
    border-block-end: 1px solid var(--divider);
    border-inline-start: 3px solid transparent;
}

.notification:last-child { border-block-end: none; }

.notification.sev-info { border-inline-start-color: var(--secondary); }
.notification.sev-warning { border-inline-start-color: var(--warn, #b8860b); }
.notification.sev-critical { border-inline-start-color: var(--danger, #b3261e); }

/* Unread is weight, not colour — a shop floor screen is read at an angle in bad light. */
.notification.is-unread .cell-title { font-weight: 700; }
.notification.is-read .cell-title { font-weight: 400; }

/* A resolved alert stays visible and recedes. It is history, and "was I warned about this?" is a
   question somebody asks after the second time — hiding it would answer that question wrongly. */
.notification.is-resolved { opacity: .55; }

.notification-body { flex: 1 1 auto; min-inline-size: 0; }
.notification-actions { display: flex; gap: .75rem; flex: 0 0 auto; align-items: center; }

.checkbox { display: inline-flex; align-items: center; gap: .35rem; white-space: nowrap; }

/* ---------------------------------------------------------------- CRM (CRM-1)

   Logical properties throughout (padding-inline-start, border-inline-start), so the same
   rules lay out correctly in Arabic without a mirrored stylesheet — i18n-rtl.md: layouts are
   direction-agnostic, never hardcoded left/right. */
.plain-list { list-style: none; margin: 0; padding: 0; }
.plain-list > li {
    padding-block: .6rem;
    border-block-end: 1px solid var(--border);
}
.plain-list > li:last-child { border-block-end: 0; }

.detail-list { margin: 0; display: grid; gap: .6rem; }
.detail-list > div {
    display: grid;
    grid-template-columns: minmax(8rem, 12rem) 1fr;
    gap: .75rem;
    align-items: baseline;
}
.detail-list dt { color: var(--muted); font-size: .85rem; }
.detail-list dd { margin: 0; }

@media (max-width: 40rem) {
    /* The owner persona works from a phone half the time (doc 01 §7): the label/value pair
       stacks rather than squeezing a value into a third of a small screen. */
    .detail-list > div { grid-template-columns: 1fr; gap: .15rem; }
}

/* ---------------------------------------------------- Promotions (PRM-1 / PRM-2)

   The scope and day pickers are chip rows: a checkbox that reads as a toggle, wrapping to as
   many lines as the choices need. Logical properties so Arabic lays out without a mirrored
   stylesheet. */
.chip-row { display: flex; flex-wrap: wrap; gap: .4rem; }
.chip {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .3rem .7rem;
    border: 1px solid var(--border);
    border-radius: 999px;
    cursor: pointer;
    font-size: .85rem;
    background: var(--surface, #fff);
}
.chip input { margin: 0; }
.chip-on { border-color: var(--accent); background: var(--accent-soft, #f6efe4); }
.field-wide { grid-column: 1 / -1; }
.input-narrow { inline-size: 5rem; text-align: end; }

/* ---------------------------------------------------------------- Guide (/guide)

   The in-app getting-started guide. Long-form reading rather than a list screen, so it gets a
   measure cap and generous line height — but it reuses .card, .page-head, .alert and .plain-list
   like every other screen.

   Logical properties only (padding-inline, border-inline-start, margin-block): the guide is read
   in Arabic by the launch market, and a mirrored stylesheet is not a thing this app has. */

.guide-body { max-inline-size: 46rem; }
.guide-body p { line-height: 1.65; margin-block: 0.5rem; }
.guide-crumb { margin-block: 0 1rem; font-size: 0.85rem; }

/* The contents list on /guide. Numbered by CSS counter rather than by hand so the numbers
   cannot drift out of step with GuideChapters. */
.guide-toc { list-style: none; margin: 0; padding: 0; counter-reset: guide-chapter; }
.guide-toc > li {
    counter-increment: guide-chapter;
    display: grid;
    grid-template-columns: 2rem 1fr;
    gap: 0.2rem 0.75rem;
    padding-block: 0.7rem;
    border-block-end: 1px solid var(--divider);
}
.guide-toc > li:last-child { border-block-end: 0; }
.guide-toc > li::before {
    content: counter(guide-chapter);
    color: var(--muted);
    font-variant-numeric: tabular-nums;
    text-align: end;
    font-size: 0.85rem;
    padding-block-start: 0.1rem;
}
.guide-toc .cell-sub { grid-column: 2; }

/* A step inside a chapter: a numbered thing to go and do. */
.guide-steps { list-style: none; margin: 0; padding: 0; counter-reset: guide-step; }
.guide-steps > li {
    counter-increment: guide-step;
    position: relative;
    padding-inline-start: 2.1rem;
    padding-block: 0.55rem;
}
.guide-steps > li::before {
    content: counter(guide-step);
    position: absolute;
    inset-inline-start: 0;
    inset-block-start: 0.5rem;
    inline-size: 1.5rem;
    block-size: 1.5rem;
    border-radius: 999px;
    background: var(--accent-soft, #f6efe4);
    color: var(--ink);
    font-size: 0.78rem;
    font-weight: 700;
    display: grid;
    place-items: center;
}
.guide-steps h3 { font-size: 0.95rem; margin-block-end: 0.15rem; }
.guide-steps p { margin-block: 0.15rem; }

/* The trap callout. Deliberately louder than .alert-warn's neighbours: these are the things a
   tester cannot undo once they have hit them. */
.guide-trap {
    border-inline-start: 4px solid var(--danger);
    padding-inline-start: 0.9rem;
    margin-block: 0.9rem;
}
.guide-trap h3 { font-size: 0.92rem; color: var(--danger); margin-block-end: 0.2rem; }

/* Credentials, ports and shell commands. Reuses .mono for the face and adds the isolation an
   Arabic paragraph needs: without it a bidi run reorders "http://localhost:5220" on screen and a
   tester types a URL that was never written. Pair it with dir="ltr" on the element. */
.guide-mono {
    background: var(--divider);
    border-radius: 4px;
    padding: 0.1rem 0.35rem;
    unicode-bidi: isolate;
}

.guide-pager {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: space-between;
    margin-block-start: 1.6rem;
    padding-block-start: 1rem;
    border-block-start: 1px solid var(--divider);
    max-inline-size: 46rem;
}
.guide-pager-next { margin-inline-start: auto; text-align: end; }