/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  min-height: 44px; padding: var(--sp-3) var(--sp-5);
  border-radius: var(--r-md); border: 1px solid transparent;
  font-size: var(--fs-sm); font-weight: 600; white-space: nowrap;
  transition: background var(--t-base), border-color var(--t-base), color var(--t-base), transform var(--t-fast);
}
.btn:active { transform: translateY(1px); }
.btn--primary { background: var(--color-gold-primary); color: var(--color-text-inverse); box-shadow: var(--sh-1); }
.btn--primary:hover { background: var(--color-gold-highlight); }
.btn--secondary { border-color: var(--color-border-strong); color: var(--color-text-primary); background: var(--color-panel-primary); }
.btn--secondary:hover { border-color: var(--service-accent); color: var(--service-accent); }
.btn--ghost { color: var(--color-text-secondary); }
.btn--ghost:hover { color: var(--color-gold-primary); }
.btn--accent { background: var(--service-accent); color: #fff; }
.btn--accent:hover { filter: brightness(1.12); }
.btn--danger { border: 1px solid rgba(255,98,88,.4); color: var(--color-danger); }
/* R49: emitted by <x-sa-action variant="warn"> and never defined — a "warn" action rendered
   as an ordinary secondary button, which is the opposite of what the variant is for. */
.btn--warn { border-color: var(--color-warning); color: var(--color-warning); background: var(--color-warning-wash); }
.btn--warn:hover { background: var(--color-warning); color: var(--color-text-inverse); }
.btn--danger:hover { background: var(--color-danger-wash); }
.btn--sm { min-height: 34px; padding: var(--sp-2) var(--sp-3); font-size: var(--fs-xs); }
.btn--lg { min-height: 52px; padding: var(--sp-4) var(--sp-8); font-size: var(--fs-body); }
.btn--block { width: 100%; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .45; pointer-events: none; }
.btn-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: var(--r-md);
  border: 1px solid var(--color-border); color: var(--color-text-secondary);
  transition: color var(--t-base), border-color var(--t-base);
}
.btn-icon:hover { color: var(--color-gold-primary); border-color: var(--color-gold-edge); }
.link-arrow { display: inline-flex; align-items: center; gap: var(--sp-2); color: var(--service-accent); font-size: var(--fs-sm); font-weight: 600; }
.link-arrow svg { transition: transform var(--t-base); }
.link-arrow:hover svg { transform: translateX(3px); }

/* ---------- Cards & panels ---------- */
.card {
  position: relative;
  background: var(--color-panel-primary);
  border: 1px solid var(--color-border);
  border-radius: var(--r-lg);
  padding: var(--sp-5);
}
.card--raised { background: var(--color-panel-secondary); }
.card--gold { border-color: var(--color-gold-edge); }
.card--interactive { transition: border-color var(--t-base), transform var(--t-base), box-shadow var(--t-base); }
.card--interactive:hover { border-color: var(--color-gold-edge); transform: translateY(-3px); box-shadow: var(--sh-2); }
.panel { position: relative; background: var(--color-panel-primary); border: 1px solid var(--color-border); border-radius: var(--r-lg); overflow: hidden; }
.panel--gold { border-color: var(--color-gold-edge); }
/* R49: pages/dashboard/index used .panel--accent, which never existed. Kept as an alias
   rather than renamed in the template, because the word reads better on a highlights panel
   and the same name is likely to be reached for again. */
.panel--accent { border-color: var(--color-gold-edge); }
.panel__head {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-5); border-bottom: 1px solid var(--color-border);
}
.panel__title { font-size: 1rem; font-weight: 700; letter-spacing: .01em; }
.panel__body { padding: var(--sp-5); }
.panel__body--flush { padding: 0; }
.panel__foot { padding: var(--sp-3) var(--sp-5); border-top: 1px solid var(--color-border); font-size: var(--fs-sm); }

/* ---------- Badges, chips, dots ---------- */
.badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px; border-radius: var(--r-sm);
  font-size: var(--fs-xs); font-weight: 600; line-height: 1.5;
  border: 1px solid transparent;
}
.badge--success { background: var(--color-success-wash); color: var(--color-success); border-color: rgba(66,199,122,.35); }
.badge--warning { background: var(--color-warning-wash); color: var(--color-warning); border-color: rgba(233,162,59,.35); }
.badge--danger  { background: var(--color-danger-wash);  color: var(--color-danger);  border-color: rgba(255,98,88,.35); }
.badge--info    { background: var(--color-information-wash); color: var(--color-information); border-color: rgba(59,130,246,.35); }
.badge--gold    { background: var(--color-gold-wash); color: var(--color-gold-primary); border-color: var(--color-gold-edge); }
.badge--neutral { background: rgba(255,255,255,.05); color: var(--color-text-secondary); border-color: var(--color-border-strong); }
.badge--buy  { background: transparent; color: var(--color-gold-primary); border-color: var(--color-gold-edge); letter-spacing: .06em; }
.badge--sell { background: transparent; color: var(--color-gold-primary); border-color: var(--color-gold-edge); letter-spacing: .06em; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--color-success); display: inline-block; }
.dot--live { background: var(--color-success); box-shadow: 0 0 0 0 rgba(66,199,122,.6); animation: pulse 2.2s infinite; }
@keyframes pulse { 70% { box-shadow: 0 0 0 8px rgba(66,199,122,0); } 100% { box-shadow: 0 0 0 0 rgba(66,199,122,0); } }
.chip {
  display: inline-flex; align-items: center; min-height: 38px; padding: var(--sp-2) var(--sp-4);
  border: 1px solid var(--color-border-strong); border-radius: var(--r-md);
  font-size: var(--fs-sm); color: var(--color-text-secondary);
  transition: all var(--t-base);
}
.chip:hover { color: var(--color-text-primary); border-color: var(--color-gold-edge); }
.chip.is-active { background: var(--color-gold-primary); color: var(--color-text-inverse); border-color: var(--color-gold-primary); font-weight: 600; }

/* ---------- Stat strip / KPI ---------- */
.stat-strip {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  background: var(--color-panel-primary); border: 1px solid var(--color-border);
  border-radius: var(--r-lg); overflow: hidden;
}
.stat {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-5); border-inline-end: 1px solid var(--color-border);
}
.stat:last-child { border-inline-end: 0; }
.stat__icon { color: var(--color-gold-primary); flex: none; }
.stat__value { font-size: 1.375rem; font-weight: 700; font-family: var(--font-display); }
.stat__label { font-size: var(--fs-xs); color: var(--color-text-muted); }
.kpi { background: var(--color-panel-primary); border: 1px solid var(--color-border); border-radius: var(--r-lg); padding: var(--sp-5); }
.kpi__value { font-family: var(--font-display); font-size: 1.75rem; font-weight: 700; letter-spacing: -.02em; }
.kpi__label { font-size: var(--fs-sm); color: var(--color-text-secondary); margin-top: 2px; }
.kpi__delta { font-size: var(--fs-xs); margin-top: var(--sp-2); }
/* R49: <x-stat-card :tone> has always emitted these and none of them existed, so the prop
   was silently inert. A tile is still a tile; the tone colours its left edge and its figure. */
.kpi--success { border-inline-start: 2px solid var(--color-success); }
.kpi--warning { border-inline-start: 2px solid var(--color-warning); }
.kpi--danger  { border-inline-start: 2px solid var(--color-danger); }
.kpi--gold    { border-inline-start: 2px solid var(--color-gold-primary); }
.kpi--success .kpi__value { color: var(--color-success); }
.kpi--warning .kpi__value { color: var(--color-warning); }
.kpi--danger  .kpi__value { color: var(--color-danger); }
.kpi--gold    .kpi__value { color: var(--color-gold-primary); }

/* ---------- Tabs & accordion ---------- */
.tabs { display: flex; gap: var(--sp-2); flex-wrap: wrap; background: var(--color-panel-primary); border: 1px solid var(--color-border); border-radius: var(--r-md); padding: var(--sp-2); }
.tab {
  min-height: 38px; padding: var(--sp-2) var(--sp-4); border-radius: var(--r-sm);
  font-size: var(--fs-sm); color: var(--color-text-secondary); transition: all var(--t-base);
}
.tab:hover { color: var(--color-text-primary); }
.tab[aria-selected="true"] { background: var(--color-gold-primary); color: var(--color-text-inverse); font-weight: 600; }
.tabpanel[hidden] { display: none; }
.accordion__item { border: 1px solid var(--color-border); border-radius: var(--r-md); margin-bottom: var(--sp-3); overflow: hidden; background: var(--color-panel-primary); }
.accordion__item.is-open { border-color: var(--color-gold-edge); }
.accordion__btn { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: var(--sp-4); padding: var(--sp-4) var(--sp-5); text-align: start; font-weight: 600; font-size: var(--fs-body); }
.accordion__sign { color: var(--color-gold-primary); font-size: 1.25rem; line-height: 1; flex: none; }
.accordion__panel { padding: 0 var(--sp-5) var(--sp-5); color: var(--color-text-secondary); font-size: var(--fs-sm); }
.accordion__panel[hidden] { display: none; }

/* ---------- Progress, trackers, timeline ---------- */
.progress { height: 10px; border-radius: var(--r-pill); background: var(--color-panel-secondary); overflow: hidden; }
.progress__bar { height: 100%; border-radius: var(--r-pill); background: linear-gradient(90deg, var(--color-gold-deep), var(--color-gold-highlight)); transition: width var(--t-slow); }
.progress--thin { height: 6px; }
.progress--success .progress__bar { background: var(--color-success); }
.tracker { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-2); position: relative; }
.tracker__step { flex: 1; text-align: center; position: relative; min-width: 0; }
/* Scoped to the HORIZONTAL tracker, and that scoping is the fix rather than the style.
   The vertical connector below is written as :not(:last-child), so on the LAST step it did
   not apply and this rule did instead — drawing a 1px line inset-inline-start:-50% of a
   460px column, i.e. 230px out of the tracker's own panel and straight through the text of
   the panel beside it. On the pending page that line crossed the word "Unverified" and read
   as a strikethrough on the member's own account status. */
.tracker:not(.tracker--vertical) .tracker__step::before { content: ""; position: absolute; top: 21px; inset-inline-start: -50%; width: 100%; height: 1px; background: var(--color-border-strong); }
.tracker:not(.tracker--vertical) .tracker__step:first-child::before { display: none; }
.tracker__dot {
  position: relative; z-index: 1; width: 42px; height: 42px; margin: 0 auto var(--sp-2);
  display: grid; place-items: center; border-radius: 50%;
  border: 1px solid var(--color-border-strong); background: var(--color-panel-primary);
  color: var(--color-text-secondary); font-weight: 700; font-family: var(--font-mono);
}
.tracker__step.is-complete .tracker__dot { border-color: var(--color-success); color: var(--color-success); }
.tracker__step.is-current .tracker__dot { border-color: var(--color-gold-primary); color: var(--color-gold-primary); box-shadow: 0 0 0 4px var(--color-gold-wash); }
.tracker__step.is-missing .tracker__dot { border-color: var(--color-danger); color: var(--color-danger); }
.tracker__name { font-size: var(--fs-sm); font-weight: 600; }
.tracker__state { font-size: var(--fs-xs); color: var(--color-text-muted); }
.timeline { position: relative; padding-inline-start: var(--sp-5); }
.timeline__item { position: relative; padding-bottom: var(--sp-4); }
.timeline__item::before { content: ""; position: absolute; inset-inline-start: -13px; top: 7px; width: 9px; height: 9px; border-radius: 50%; background: var(--color-gold-primary); }
.timeline__item::after { content: ""; position: absolute; inset-inline-start: -9px; top: 18px; bottom: 0; width: 1px; background: var(--color-border); }
.timeline__item:last-child::after { display: none; }
.timeline__date { font-size: var(--fs-xs); color: var(--color-gold-primary); font-family: var(--font-mono); }

/* ---------- Checklist, kv, avatar, switch ---------- */
.checklist__item { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) 0; border-bottom: 1px solid var(--color-border); }
.checklist__item:last-child { border-bottom: 0; }
.checklist__box { width: 18px; height: 18px; border-radius: 4px; border: 1px solid var(--color-border-strong); flex: none; display: grid; place-items: center; }
.checklist__item.is-done .checklist__box { border-color: var(--color-success); color: var(--color-success); }
.checklist__item.is-missing .checklist__box { border-color: var(--color-danger); }
.kv { display: grid; grid-template-columns: minmax(120px, 40%) 1fr; gap: var(--sp-1) var(--sp-4); font-size: var(--fs-sm); }
.kv dt { color: var(--color-text-muted); padding: var(--sp-2) 0; border-bottom: 1px solid var(--color-border); }
.kv dd { font-weight: 600; padding: var(--sp-2) 0; border-bottom: 1px solid var(--color-border); text-align: end; }
.kv > :nth-last-child(-n+2) { border-bottom: 0; }
.avatar {
  width: 34px; height: 34px; flex: none; border-radius: 50%; display: grid; place-items: center;
  font-size: var(--fs-xs); font-weight: 700; letter-spacing: .04em;
  border: 1px solid currentColor; background: rgba(255,255,255,.04);
}
.switch { position: relative; width: 42px; height: 24px; border-radius: var(--r-pill); background: var(--color-panel-secondary); border: 1px solid var(--color-border-strong); transition: background var(--t-base); flex: none; }
.switch::after { content: ""; position: absolute; top: 2px; inset-inline-start: 2px; width: 18px; height: 18px; border-radius: 50%; background: var(--color-text-muted); transition: transform var(--t-base), background var(--t-base); }
.switch[aria-checked="true"] { background: var(--color-success); border-color: var(--color-success); }
.switch[aria-checked="true"]::after { transform: translateX(18px); background: #fff; }

/* ---------- Notices, empty, skeleton ---------- */
.notice {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4); border-radius: var(--r-md);
  border: 1px solid var(--color-gold-edge); background: var(--color-gold-wash);
  font-size: var(--fs-sm); color: var(--color-text-secondary);
}
/* R49: both were used in pages/auth/login and layouts/super-admin and neither existed, so an
   error notice and a success notice both rendered gold — the one colour that means neither. */
.notice--error   { border-color: var(--color-danger);  background: var(--color-danger-wash); }
.notice--error   .warn { color: var(--color-danger); }
.notice--success { border-color: var(--color-success); background: var(--color-success-wash); }
.notice--warning { border-color: var(--color-warning); background: var(--color-warning-wash); }
.notice--info    { border-color: var(--color-information); background: var(--color-information-wash); }
/* A statement of absence, not an alert. Gold would read as "look at this"; the point of the
   market-data notice is that there is deliberately nothing to look at. Column rather than row,
   because it carries a heading and a sentence rather than one line. */
.notice--muted   { border-color: var(--color-border); background: transparent; display: block; }

.demo-note { font-size: var(--fs-xs); color: var(--color-warning); letter-spacing: .02em; }
.empty { text-align: center; padding: var(--sp-12) var(--sp-6); color: var(--color-text-muted); }
.empty__title { font-weight: 600; color: var(--color-text-secondary); margin-bottom: var(--sp-2); }
.skeleton { background: linear-gradient(90deg, var(--color-panel-secondary) 25%, #1a2838 50%, var(--color-panel-secondary) 75%); background-size: 200% 100%; animation: shimmer 1.4s infinite; border-radius: var(--r-sm); }
@keyframes shimmer { to { background-position: -200% 0; } }

/* ---------- Modal & toast ---------- */
.modal-backdrop { position: fixed; inset: 0; background: rgba(2,6,12,.75); backdrop-filter: blur(3px); z-index: 100; display: grid; place-items: center; padding: var(--gutter); }
.modal { width: min(560px, 100%); background: var(--color-panel-primary); border: 1px solid var(--color-border-strong); border-radius: var(--r-lg); box-shadow: var(--sh-3); max-height: 85vh; overflow: auto; }
.modal__head { display: flex; align-items: center; justify-content: space-between; padding: var(--sp-5); border-bottom: 1px solid var(--color-border); }
.modal__body { padding: var(--sp-5); }
.modal__foot { display: flex; justify-content: flex-end; gap: var(--sp-3); padding: var(--sp-4) var(--sp-5); border-top: 1px solid var(--color-border); }
.toast-stack { position: fixed; inset-inline-end: var(--sp-5); bottom: var(--sp-5); z-index: 300; display: flex; flex-direction: column; gap: var(--sp-2); max-width: min(380px, calc(100vw - 32px)); }
.toast {
  display: flex; align-items: flex-start; gap: var(--sp-3);
  padding: var(--sp-4); border-radius: var(--r-md); box-shadow: var(--sh-3);
  background: var(--color-panel-secondary); border: 1px solid var(--color-border-strong);
  font-size: var(--fs-sm); animation: toast-in var(--t-base);
}
.toast--success { border-inline-start: 3px solid var(--color-success); }
.toast--error { border-inline-start: 3px solid var(--color-danger); }
.toast--info { border-inline-start: 3px solid var(--color-information); }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } }

/* ---------- Back to top ---------- */
.to-top {
  position: fixed; inset-inline-end: var(--sp-5); bottom: var(--sp-5); z-index: 60;
  width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
  background: var(--color-panel-secondary); border: 1px solid var(--color-gold-edge);
  color: var(--color-gold-primary); opacity: 0; pointer-events: none; transition: opacity var(--t-base);
}
.to-top.is-visible { opacity: 1; pointer-events: auto; }


/* ── Icon-and-label grids ────────────────────────────────────────────────
   Used by "Who Can Use…" on the service pages and anywhere an icon sits above a caption.

   text-align: center alone is not enough. The icon is an inline SVG, so it sits on the
   text baseline and shifts by a pixel or two depending on the glyphs beside it; and where
   one label wraps to two lines and its neighbours do not, the icons end up on different
   vertical positions across the row.

   A flex column with a fixed icon box fixes both: the icon is centred in a box of known
   height, and the labels start at the same offset whatever their length. */
.icon-stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--sp-3);
}

.icon-stack__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  flex-shrink: 0;
}

.icon-stack__icon svg { display: block; }

/* Labels sit on a shared baseline even when one of them wraps. */
.icon-stack__label {
  min-height: 2.6em;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  line-height: 1.35;
}


/* ── Numbered step boxes ─────────────────────────────────────────────────
   "How It Works" and every other sequence on the site.

   Previously each box carried its own inline width/height/font-size, which is how the
   boxes drifted out of alignment: an inline style edited on one card and not the others
   leaves a sequence where the numbers sit at different sizes and offsets, and the reader
   loses the thread of the sequence.

   The number is a flex item, so under RTL it moves to the right of the title without any
   extra rule — which is where an Arabic reader starts. The digits themselves stay in
   Latin script: Arabic-Indic numerals are correct in prose but a step counter is closer
   to a label, and the platform uses Latin digits for references and quantities throughout.
   Mixing the two within one page reads as an inconsistency rather than a courtesy. */
.step-head {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-bottom: var(--sp-4);
}

.step-head__number {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--color-gold-wash);
  border: 1px solid var(--color-gold-primary);
  color: var(--color-gold-primary);
  font-family: var(--font-mono);
  font-size: .9rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  /* The counter is a number in any language. */
  direction: ltr;
}

/* Smaller variant for dense lists — FAQ, contact steps — where a 38px circle would
   dominate a short line of text. Same shape, same colour, one size down. */
.step-head__number--sm {
  width: 34px;
  height: 34px;
  font-size: .8rem;
}

.step-head__title {
  font-size: var(--fs-h3);
  font-weight: 600;
  margin: 0;
  line-height: 1.3;
}

/* The connector line between steps has to run the other way in RTL, or the sequence
   appears to flow backwards from the reader's starting edge. */
.process__line { inset-inline-start: 19px; }


/* ── Vertical signup tracker ─────────────────────────────────────────────
   The horizontal tracker fitted five one-word labels and nothing else. Once each stage
   carries a line explaining what it involves and how long it takes, the layout has to run
   down the page — and that explanation is the point: a member who knows verification takes
   two to five days waits, while one who expected it instantly assumes something is broken. */
.tracker--vertical {
  display: flex;
  flex-direction: column;
  gap: 0;
  list-style: none;
  padding: 0;
  margin: 0;
}

.tracker--vertical .tracker__step {
  display: grid;
  grid-template-columns: 30px 1fr;
  gap: var(--sp-3);
  padding-bottom: var(--sp-5);
  position: relative;
}

/* The connector runs between dots, on the reader's starting edge in either direction. */
.tracker--vertical .tracker__step:not(:last-child)::before {
  content: "";
  position: absolute;
  inset-inline-start: 14px;
  top: 26px;
  bottom: 4px;
  width: 1px;
  background: var(--color-border-subtle);
}

.tracker--vertical .tracker__dot {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 12px;
  background: var(--color-panel-primary);
  border: 1px solid var(--color-border-strong);
  color: var(--color-text-secondary);
  position: relative;
  z-index: 1;
  direction: ltr;
}

.tracker--vertical .is-current .tracker__dot {
  background: var(--color-gold-wash);
  border-color: var(--color-gold-primary);
  color: var(--color-gold-primary);
  font-weight: 600;
}

.tracker--vertical .is-done .tracker__dot {
  background: var(--color-gold-primary);
  border-color: var(--color-gold-primary);
  color: var(--color-background-deep);
}

.tracker--vertical .tracker__name { font-weight: 600; line-height: 1.4; }
.tracker--vertical .tracker__note { margin-top: 2px; line-height: 1.5; }
.tracker--vertical .is-current .tracker__name { color: var(--color-gold-primary); }

/* --------------------------------------------------------------------------
   Flow track — where a shipment has reached.
   Logical properties throughout so the track runs right-to-left in Arabic
   without a mirrored copy in rtl.css. Wraps rather than scrolls: eleven states
   on a phone is four rows, and a row of eleven dots the user has to scroll is
   worse than four rows they can read.
   -------------------------------------------------------------------------- */
.flow-track { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); list-style: none; margin: 0; padding: 0; }
.flow-track__step { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-xs); color: var(--color-text-muted); }
.flow-track__dot { width: 9px; height: 9px; flex: 0 0 9px; border-radius: 50%; border: 1px solid var(--color-border); background: transparent; }
.flow-track__step.is-done { color: var(--color-text-secondary); }
.flow-track__step.is-done .flow-track__dot { background: var(--color-gold-primary); border-color: var(--color-gold-primary); }
.flow-track__step.is-current { color: var(--color-gold-primary); font-weight: 600; }
.flow-track__step.is-current .flow-track__dot { box-shadow: 0 0 0 3px rgba(201, 162, 39, 0.25); }

/* The note-and-actions row under a quotation.
   The rule between the figures and their own actions is removed rather than the one below,
   so the horizontal lines separate QUOTATIONS from each other instead of cutting each one in
   half — otherwise "Ask / Award" reads as belonging to the quotation underneath it. */
.table tr:has(+ .quote-row-foot) > td { border-bottom: 0; }
.quote-row-foot > td { padding-top: 0; }

/* --------------------------------------------------------------------------
   Opportunity row — one request a supplier may quote on.

   A list rather than a table: three of the five fields are optional, and a table
   of mostly-empty cells reads worse than a stack of short lines. Logical
   properties and a wrap at narrow widths, so the action drops under the body on a
   phone rather than squeezing the title to two characters.
   -------------------------------------------------------------------------- */
.opportunity {
  display: flex; align-items: center; gap: var(--sp-4); flex-wrap: wrap;
  padding: var(--sp-4) var(--sp-5);
  border-bottom: 1px solid var(--color-border);
}
.opportunity:last-child { border-bottom: 0; }
.opportunity:hover { background: rgba(255,255,255,.02); }
.opportunity__body { flex: 1 1 260px; min-width: 0; }
.opportunity__title { font-weight: 600; font-size: var(--fs-sm); color: var(--color-text-primary); margin: 0; }
.opportunity__meta { font-size: var(--fs-xs); color: var(--color-text-muted); font-family: var(--font-mono); margin-top: 2px; }
.opportunity__action { flex: none; margin-inline-start: auto; }

/* A command meant to be copied. Scrolls inside itself rather than widening the page — a long
   --reason on a narrow screen would otherwise push the whole card sideways. */
.code-block {
  font-family: var(--font-mono);
  background: var(--color-background-secondary);
  border: 1px solid var(--color-border);
  border-radius: var(--r-sm);
  padding: var(--sp-3);
  overflow-x: auto;
  white-space: pre;
  color: var(--color-text-secondary);
}

/* The icon badge on a Deal Support category card. A tile rather than a bare glyph, so a card
   with a long name and a card with a short one still line up along their top edge. */
.card__icon {
  width: 40px; height: 40px; flex: none;
  display: grid; place-items: center;
  border-radius: var(--r-md);
  border: 1px solid var(--color-gold-edge);
  background: var(--color-gold-wash);
  color: var(--color-gold-primary);
}

/* A wrapping field of service chips. Flex rather than a grid: the names vary from two
   characters to forty and equal columns would leave most of the row empty. */
.chip-grid { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.chip--link {
  text-decoration: none; color: var(--color-text-secondary);
  border: 1px solid var(--color-border); border-radius: var(--r-pill);
  padding: var(--sp-2) var(--sp-4); font-size: var(--fs-sm);
  transition: border-color var(--t-fast), color var(--t-fast);
}
.chip--link:hover { border-color: var(--color-gold-edge); color: var(--color-gold-primary); }

/* One group of service tick-boxes: the group's own claim, then its services indented under it.
   The indent is the whole point — it shows that ticking the group covers what is beneath. */
.tick-group { padding: var(--sp-3) 0; border-bottom: 1px solid var(--color-border); }
.tick-group:last-child { border-bottom: 0; }
.tick-group__items {
  display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-5);
  padding-inline-start: var(--sp-6); margin-top: var(--sp-2);
}

/* A row in the report list, and one figure in a report's sidebar. */
.report-row {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-5); border-bottom: 1px solid var(--color-border);
  text-decoration: none; color: inherit; flex-wrap: wrap;
}
.report-row:last-child { border-bottom: 0; }
.report-row:hover { background: rgba(255,255,255,.02); }
.report-row__body { flex: 1 1 280px; min-width: 0; }

.indicator { padding: var(--sp-3) 0; border-bottom: 1px solid var(--color-border); }
.indicator:last-child { border-bottom: 0; }

/* Report prose. Measure-limited: a market note set the full width of a desktop panel is a
   wall nobody finishes. */
.prose { max-width: 68ch; line-height: 1.75; color: var(--color-text-secondary); }

/*
 * Disclosure — a native <details> used where a table row carries actions that need room.
 *
 * R57. The catalogue taxonomy screen first laid rename, move, merge and disable out side by
 * side in every row; at any real width the fields left their cells and sat on top of the
 * buttons beneath them. Collapsed by default, the same tree reads as a tree, and one open row
 * gets the whole column.
 */
.disclosure { border: 1px solid var(--color-border); border-radius: var(--radius-sm); }
.disclosure__summary {
  cursor: pointer;
  padding: var(--sp-2) var(--sp-3);
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--service-accent);
  list-style: none;
}
.disclosure__summary::-webkit-details-marker { display: none; }
.disclosure__summary::after { content: ' ▸'; }
.disclosure[open] > .disclosure__summary::after { content: ' ▾'; }
.disclosure[open] > .disclosure__summary { border-bottom: 1px solid var(--color-border); }
/* min-width, not width: the cell is inside .table-scroll, so the forms get room to breathe
   and the table scrolls rather than the page. */
.disclosure__body { padding: var(--sp-3); min-width: 320px; }