/* BMD - numbers calculator (/ar/diagnostic/numbers/).
   Loads after diagnostic.css and reuses its hero (dx-vsl), video (dx-video)
   and footer. Tokens only, no new colors. Works on both sides of the site A/B
   test: bmd.css tokens on the original side, brand.css re-tunes the same
   tokens (radius, fonts) on the new side. Mobile first. Arabic only, so a
   few rules use physical sides on purpose (the amount box). */

/* The original side's sticky header is 64px and sets no scroll padding, so
   the results heading would land under it. The new side has its own. */
html[data-ab="original"] { scroll-padding-top: 80px; }

.nc-hero { padding-bottom: clamp(20px, 3vw, 32px); }
.nc-hero .dx-vsl__head .h-display { max-width: 18ch; }
.nc-video { max-width: 860px; margin-inline: auto; }

.nc-body { padding-bottom: var(--section-y); min-height: 60vh; }
.nc-form,
.nc-busy,
.nc-results { max-width: 760px; margin-inline: auto; }

/* ------------------------------------------------------------ Questions */
.nc-qs { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.nc-q {
  background: var(--bone-raised);
  border: 1px solid var(--bone-edge);
  border-radius: var(--radius-md);
  padding: clamp(18px, 3.2vw, 26px);
  transition: border-color var(--dur-fast) var(--ease-out);
}
.nc-q.is-invalid { border-color: var(--critical); }
.nc-q fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.nc-q legend { padding: 0; float: left; width: 100%; }
.nc-q legend + * { clear: both; }
.nc-q__head { display: flex; gap: 12px; align-items: baseline; }
.nc-q__num {
  flex: none;
  min-width: 22px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--ochre-ink);
  direction: ltr;
}
.nc-q__title {
  font-size: 17px;
  font-weight: 700;
  line-height: 1.6;
  color: var(--navy-900);
}
.nc-q__hint,
.nc-q__error { margin: 4px 0 0; padding-inline-start: 34px; font-size: 14px; line-height: 1.65; }
.nc-q__hint { color: var(--steel); }
.nc-q__error { color: var(--critical); }
.nc-q__answer { margin-top: 14px; padding-inline-start: 34px; }

/* Number + unit, with "ما أعرف" beside it (under it on narrow phones). */
.nc-num { display: flex; flex-wrap: wrap; gap: 10px; align-items: stretch; }
.nc-amount { position: relative; flex: 1 1 190px; min-width: 0; display: flex; }
.nc-amount .bmd-input {
  font-size: 18px;
  min-height: 48px;
  text-align: right;
  font-variant-numeric: lining-nums tabular-nums;
  letter-spacing: 0.01em;
}
.nc-amount--unit .bmd-input { padding-left: 52px; }
.nc-amount__unit {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 14px;
  color: var(--steel);
  pointer-events: none;
}
.nc-q.is-unknown .bmd-input { background: var(--bone-sunken); border-color: var(--bone-edge); color: var(--steel-400); }
.nc-q.is-unknown .nc-amount__unit { color: var(--steel-400); }

/* Choice chips: band answers and the "ما أعرف" toggle share one look.
   "ما أعرف" is always dashed until picked. */
.nc-opts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.nc-opts .nc-chip,
.nc-opts .nc-chip span { width: 100%; }
.nc-opts .nc-chip span { white-space: normal; text-align: center; padding-inline: 10px; }
@media (min-width: 560px) {
  .nc-opts { display: flex; flex-wrap: wrap; }
  .nc-opts .nc-chip,
  .nc-opts .nc-chip span { width: auto; }
  .nc-opts .nc-chip span { white-space: nowrap; padding-inline: 16px; }
}
.nc-chip { position: relative; display: inline-flex; }
.nc-chip input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.nc-chip span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 10px 16px;
  border: 1.5px solid var(--navy-200);
  border-radius: var(--radius-sm);
  background: var(--bone-raised);
  color: var(--navy-800);
  font-size: 15px;
  line-height: 1.4;
  white-space: nowrap;
  transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.nc-chip--idk span { border-style: dashed; color: var(--steel); }
.nc-chip input:hover + span { border-color: var(--navy-400); }
.nc-chip input:focus-visible + span { box-shadow: var(--ring); }
.nc-chip input:checked + span { background: var(--navy-900); border-color: var(--navy-900); border-style: solid; color: var(--bone); }

/* ------------------------------------------------------------ Button + disclosure */
.nc-go { margin-top: 22px; display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; }
/* Both sides: brand.css sets buttons to 14px on the new side; the one action here reads bigger. */
.nc-form .nc-go .bmd-btn { width: 100%; max-width: 360px; min-height: 52px; font-size: 17px; font-weight: 700; }
.nc-note { margin: 0; font-size: 14px; line-height: 1.65; color: var(--steel); max-width: 52ch; }

/* ------------------------------------------------------------ Calculating */
.nc-busy {
  padding: clamp(40px, 8vw, 64px) 20px;
  text-align: center;
  background: var(--bone-raised);
  border: 1px solid var(--bone-edge);
  border-radius: var(--radius-md);
}
.nc-busy p { margin: 0; font-size: 18px; font-weight: 700; color: var(--navy-900); }
.nc-busy__line { max-width: 220px; height: 2px; margin: 18px auto 0; background: var(--bone-edge); overflow: hidden; }
.nc-busy__line span { display: block; width: 0; height: 100%; background: var(--navy-900); }
.nc-busy.is-running .nc-busy__line span { animation: nc-fill 1.2s var(--ease-out) forwards; }
@keyframes nc-fill { to { width: 100%; } }

/* ------------------------------------------------------------ Results */
.nc-results {
  background: var(--bone-raised);
  border: 1px solid var(--bone-edge);
  border-top: 2px solid var(--navy-900);
  border-radius: var(--radius-md);
  padding: clamp(22px, 4vw, 36px);
}
.nc-results .h-section { margin: 0; }
.nc-known { margin: 8px 0 0; font-size: 16px; color: var(--steel); }

.nc-metrics { list-style: none; margin: 22px 0 0; padding: 0; border-top: 1px solid var(--bone-edge); }
.nc-metric {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 6px 20px;
  padding-block: 18px;
  border-bottom: 1px solid var(--bone-edge);
}
.nc-metric__label { margin: 0; font-size: 16px; font-weight: 700; line-height: 1.6; color: var(--navy-900); }
.nc-metric__sub { display: block; font-size: 13px; font-weight: 400; color: var(--steel); }
.nc-metric__value {
  margin: 0;
  font-family: var(--font-serif);
  font-size: clamp(26px, 6.4vw, 32px);
  font-weight: 500;
  line-height: 1.25;
  color: var(--navy-900);
  font-variant-numeric: lining-nums tabular-nums;
  white-space: nowrap;
}
[dir="rtl"] .nc-metric__value { font-family: var(--font-serif), var(--font-arabic); letter-spacing: 0; }
.nc-metric__value.is-worse { color: var(--ochre-ink); }
.nc-metric__value.is-unknown { font-family: inherit; font-size: 20px; font-weight: 700; color: var(--steel); }
.nc-metric__notes { display: flex; flex-direction: column; gap: 2px; }
.nc-metric__notes p { margin: 0; font-size: 13px; line-height: 1.65; color: var(--steel); }
.nc-metric__notes [data-nc-missing] { color: var(--navy-700); }

@media (min-width: 560px) {
  .nc-metric { grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; }
  .nc-metric__value { grid-column: 2; grid-row: 1; text-align: left; }
  .nc-metric__notes { grid-column: 1 / -1; }
}

.nc-read,
.nc-gap { margin: 22px 0 0; padding: 14px 16px; font-size: 16px; line-height: 1.75; color: var(--navy-900); background: var(--bone-sunken); border-inline-start: 2px solid var(--navy-900); }
.nc-gap + .nc-read,
.nc-read + .nc-gap { margin-top: 10px; }
.nc-always { margin: 18px 0 0; font-size: 15px; line-height: 1.75; color: var(--steel); }

.nc-cta { margin-top: 26px; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.nc-cta p { margin: 0; font-size: 16px; color: var(--navy-900); font-weight: 700; }
.nc-results .nc-cta .bmd-btn { width: 100%; max-width: 360px; min-height: 50px; font-size: 16px; }
.nc-edit {
  margin-top: 18px;
  font: inherit;
  font-size: 15px;
  background: none;
  border: 0;
  padding: 6px 0;
  color: var(--steel);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 0.25em;
}
.nc-edit:hover { color: var(--navy-900); }

@media (max-width: 420px) {
  .nc-q__hint,
  .nc-q__error,
  .nc-q__answer { padding-inline-start: 0; }
  .nc-num .nc-chip,
  .nc-num .nc-chip span { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .nc-busy.is-running .nc-busy__line span { animation: none; width: 100%; }
}

/* Riyal sign. Thmanyah draws «ر.س» as the new riyal sign through a ligature.
   Declared here (not only in brand.css) so the original A/B side shows it too. */
@font-face { font-family: 'BMD Riyal'; src: url('/assets/fonts/ThmanyahSans-Medium.woff2') format('woff2'); font-weight: 400 700; font-style: normal; font-display: swap; }
.nc-sar { font-family: 'BMD Riyal', var(--font-arabic), sans-serif; }