/* /konkur/1405/ — the rank estimator.
 *
 * Built on the site's own system from /styles.css, which this page loads first:
 * Vazirmatn, --ink/--muted/--action, the --t-* type scale and the --lift-*
 * elevation. Two floors hold everywhere: 12px text and 44px touch targets.
 * White text sits on --action (#b9480a, 5.26:1), never on the brand orange
 * (#ed6d1c is 3.09:1 with white); the brand orange is for marks and fills.
 * The two large numerals take --orange-deep, 3.59:1 at worst on their tints
 * (large text needs 3:1); test/konkur-contrast.test.mjs measures every pair.
 * Input edges are #9a8676, 3.47:1 on white, so a field is visible as a field
 * (WCAG 1.4.11). Persian text never gets letter-spacing.
 */

:root {
  /* Names the header rules below still use. */
  --primary: #ff7a00;
  --primary-hover: #d95a00;
  --bg-cream: #fff4e6;
  --surface: #ffffff;
  --border: #eddccc;
  --text-dark: #2c2523;
  --text-muted: #6b5e59;

  --k-sand: #fbf5ef;
  --k-sand-2: #f4e9de;
  --k-line: rgba(31, 41, 55 , .12);
  --k-field: #9a8676;
  --k-field-hover: #7d6a5c;
  --k-ring: rgba(184, 74, 0 , .22);
  --k-ok-bg: #e7f3ec;
  --k-ok: #1f6b45;
  --k-warn-bg: #fdf1dc;
  --k-warn: #8a4b00;
  --k-none-bg: #f1ebe5;
  --k-none: #5b4d46;
  --k-error: #a3261c;
  --k-error-bg: #fdf0ee;
  /* The rank strip and the answer's warnings, named once. */
  --k-track: #e3d2c1;
  --k-tick: #b7a391;
  --k-edge: #7d6a5c;
  --k-zone-near: #fbf5ef;
  --k-zone-far: #f1e4d6;
  --k-band: rgba(255, 122, 0, .22);
  --k-band-edge: var(--orange-deep);
  --k-dot-edge: #5b4d46;
  --k-programme: #8e9d80;
  --k-programme-edge: #46553f;
  --k-callout-rule: rgba(138, 75, 0, .28);
  --k-radius: 20px;
  --k-radius-sm: 12px;
}

body {
  margin: 0;
  background: var(--bg-cream);
  color: var(--ink);
  line-height: 1.75;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.container {
  max-width: 1140px;
  margin: 0 auto;
  padding: 24px 16px 64px;
}

/* ── Header ── */

.top-nav {
  background-color: #ffffff;
  border-bottom: 1px solid var(--border);
  padding: 12px 16px;
}

.nav-container {
  max-width: 1140px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.brand-link {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--action);
  font-weight: 750;
  font-size: 1.2rem;
}

/* The site's mark, as /guide/ and /about/ draw it. */
.brand-logo {
  flex: none;
  width: .8rem;
  height: .8rem;
  border-radius: 70% 30% 65% 35%;
  background: var(--orange);
  transform: rotate(45deg);
}

.nav-menu {
  display: flex;
  gap: 20px;
}

.nav-menu a {
  text-decoration: none;
  color: var(--text-muted);
  font-size: 0.95rem;
  transition: color 0.2s ease;
}

.nav-menu a:hover,
.nav-menu a.active {
  color: var(--action);
  font-weight: 700;
}

.nav-cta {
  background: var(--action);
  color: #fff;
  text-decoration: none;
  padding: 6px 16px;
  border-radius: 20px;
  font-size: 0.9rem;
  font-weight: 700;
}

.nav-cta:hover { background: var(--action-hover); }

.brand-link, .nav-menu a, .nav-cta {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

.brand-link:focus-visible,
.nav-menu a:focus-visible,
.nav-cta:focus-visible {
  outline: 3px solid var(--action);
  outline-offset: 3px;
  border-radius: 10px;
}

/* The header needs about 640px on one line, and at 320-390px it used to widen
   the whole page to 420px. Below 42.5rem the menu takes its own row under the
   brand and the button, as tiles that all stay in sight. Tab order is still
   the markup's: brand, links, button. */
@media (max-width: 42.5rem) {
  .nav-container {
    flex-wrap: wrap;
    row-gap: 8px;
  }

  .nav-menu {
    order: 1;
    flex: 1 0 100%;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
  }

  .nav-menu a {
    justify-content: center;
    padding: 4px 8px;
    border: 1px solid var(--border);
    border-radius: 10px;
    text-align: center;
  }

  .nav-menu a.active {
    border-color: var(--primary);
  }
}

@media (max-width: 36rem) {
  .nav-menu {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* The compact header still keeps the same touch targets. */
@media (max-width: 42.5rem), (pointer: coarse) {
  .nav-menu a,
  .nav-cta {
    display: inline-flex;
    align-items: center;
  }

  .nav-cta {
    border-radius: 999px;
  }
}

/* ── Hero ── */

.hero-section {
  text-align: center;
  padding: 28px 0 8px;
}

.badge {
  display: inline-flex;
  align-items: center;
  margin: 0 0 14px;
  padding: 4px 14px;
  border-radius: 999px;
  background: #fbeee4;
  color: var(--action);
  font-size: var(--t-sm);
  font-weight: 650;
}

h1 {
  margin: 0 0 12px;
  color: var(--ink);
  font-size: var(--t-2xl);
  font-weight: 750;
  line-height: 1.45;
}

.subtitle {
  max-width: 40rem;
  margin: 0 auto;
  color: var(--muted);
  font-size: clamp(.98rem, 2.2vw, 1.06rem);
  line-height: 2;
}

.subtitle strong,
.hero-facts strong {
  color: var(--ink);
  font-weight: 650;
}

/* Where the number comes from, said before the form rather than after it:
   three short lines, each with a mark that is a shape, not a word. */
.hero-facts {
  display: grid;
  gap: 6px;
  max-width: 34rem;
  margin: 14px auto 0;
  padding: 0;
  list-style: none;
  color: var(--muted);
  font-size: var(--t-sm);
  line-height: 1.85;
  text-align: start;
}

.hero-facts li {
  position: relative;
  padding-inline-start: 18px;
}

.hero-facts li::before {
  content: "";
  position: absolute;
  inset-inline-start: 2px;
  top: .72em;
  width: 7px;
  height: 7px;
  border-radius: 70% 30% 65% 35%;
  background: var(--orange);
  transform: rotate(45deg);
}

/* The illustration is decoration (alt=""), so a phone, where the form has to
   come first, does not spend a screen on it: below 861px it is display:none
   and, being lazy, never fetched. The empty result card carries it there. */
.hero-art { display: none; }

@media (min-width: 861px) {
  .hero-section {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 248px;
    align-items: center;
    gap: 32px;
    max-width: 960px;
    margin: 0 auto;
    padding: 24px 0 8px;
    text-align: start;
  }

  .hero-section .subtitle,
  .hero-facts { margin-inline: 0; }

  .hero-art {
    display: block;
    width: 248px;
    height: auto;
    border-radius: 28px;
    mix-blend-mode: multiply;
  }
}

/* ── Tabs: one segmented control ── */

.tab-controls {
  display: flex;
  width: fit-content;
  max-width: 100%;
  margin: 24px auto;
  padding: 4px;
  gap: 4px;
  border-radius: 999px;
  background: var(--k-sand-2);
}

.tab-btn {
  min-height: 44px;
  padding: 8px 22px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--k-none);
  font: inherit;
  font-size: var(--t-md);
  font-weight: 650;
  line-height: 1.5;
  cursor: pointer;
  touch-action: manipulation;
  transition: background-color .2s ease, color .2s ease, box-shadow .2s ease;
}

.tab-btn:hover { color: var(--ink); }

.tab-btn.active {
  background: #ffffff;
  color: var(--action);
  box-shadow: 0 1px 2px rgba(31, 41, 55 , .08), 0 3px 10px -4px rgba(31, 41, 55 , .2);
}

.tab-btn:focus-visible {
  outline: 3px solid var(--action);
  outline-offset: 2px;
}

@media (max-width: 26rem) {
  .tab-controls { width: 100%; }
  .tab-btn {
    flex: 1 1 0;
    padding-inline: 10px;
    font-size: var(--t-sm);
  }
}

/* ── Cards ── */

.card {
  background: var(--surface);
  border: 1px solid var(--k-line);
  border-radius: var(--k-radius);
  padding: clamp(20px, 4vw, 28px);
  box-shadow: var(--lift-1);
}

.card h2 {
  margin: 0 0 6px;
  color: var(--ink);
  font-size: clamp(1.2rem, 2.6vw, 1.45rem);
  font-weight: 750;
  line-height: 1.5;
}

.form-desc,
.sec-desc {
  margin: 0 0 20px;
  color: var(--muted);
  font-size: var(--t-md);
  line-height: 1.9;
}

.estimator-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: 20px;
  align-items: start;
}

@media (min-width: 861px) {
  .result-card {
    position: sticky;
    top: 16px;
  }
}

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

/* ── The form ── */

.form-section {
  min-width: 0;
  margin: 0 0 22px;
  padding: 0;
  border: 0;
}

.form-section legend {
  margin: 0 0 12px;
  padding: 0;
  color: var(--muted);
  font-size: var(--t-sm);
  font-weight: 650;
}

.form-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

@media (max-width: 520px) {
  .form-row {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
  }
}

.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.field label {
  color: var(--ink);
  font-size: var(--t-md);
  font-weight: 650;
}

.field input,
.field select {
  width: 100%;
  min-height: 48px;
  padding: 10px 14px;
  border: 1px solid var(--k-field);
  border-radius: var(--k-radius-sm);
  background-color: #ffffff;
  color: var(--ink);
  font: inherit;
  font-size: 1rem;
  font-variant-numeric: tabular-nums;
  transition: border-color .15s ease, box-shadow .15s ease;
}

/* The landing's own placeholder grey (styles.css .ask__input): 5.02:1 on
   white, where #85766b was 4.37:1. */
.field input::placeholder {
  color: #786d67;
  opacity: 1;
}

.field select {
  appearance: none;
  -webkit-appearance: none;
  padding-inline-end: 42px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236a5e57' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: left 14px center;
  background-size: 16px;
  cursor: pointer;
}

.field input:hover,
.field select:hover { border-color: var(--k-field-hover); }

.field input:focus-visible,
.field select:focus-visible {
  outline: none;
  border-color: var(--action);
  box-shadow: 0 0 0 4px var(--k-ring);
}

.field [aria-invalid="true"] { border-color: var(--k-error); }
.field [aria-invalid="true"]:focus-visible { box-shadow: 0 0 0 4px rgba(163, 38, 28, .18); }

.field-hint {
  margin: 0;
  color: var(--muted);
  font-size: .8rem;
  line-height: 1.75;
}

.field-error {
  margin: 0;
  color: var(--k-error);
  font-size: var(--t-sm);
  font-weight: 550;
  line-height: 1.75;
}

.weights-note {
  margin: -4px 0 14px;
  padding: 10px 14px;
  border-radius: var(--k-radius-sm);
  background: var(--k-sand);
  color: var(--k-none);
  font-size: var(--t-sm);
  line-height: 1.9;
}

.form-more {
  margin: 0 0 22px;
  border: 1px solid var(--k-line);
  border-radius: var(--k-radius-sm);
  background: var(--k-sand);
}

.form-more summary,
.why-box > summary,
.compare-box > summary {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 10px 16px;
  color: var(--ink);
  font-size: var(--t-md);
  font-weight: 650;
  list-style: none;
  cursor: pointer;
  touch-action: manipulation;
}

.form-more summary::-webkit-details-marker,
.why-box > summary::-webkit-details-marker,
.compare-box > summary::-webkit-details-marker { display: none; }

.form-more summary::after,
.why-box > summary::after,
.compare-box > summary::after {
  content: "";
  flex: none;
  width: 16px;
  height: 16px;
  margin-inline-start: auto;
  background: var(--muted);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform .2s ease;
}

.form-more[open] summary::after,
.why-box[open] > summary::after,
.compare-box[open] > summary::after { transform: rotate(180deg); }

.form-more summary:focus-visible,
.why-box > summary:focus-visible,
.compare-box > summary:focus-visible {
  outline: 3px solid var(--action);
  outline-offset: 2px;
  border-radius: var(--k-radius-sm);
}

.form-more .form-row { padding: 4px 16px 16px; }

.form-error {
  margin: 0 0 14px;
  padding: 12px 14px;
  border-radius: var(--k-radius-sm);
  background: var(--k-error-bg);
  color: var(--k-error);
  font-size: var(--t-sm);
  font-weight: 550;
  line-height: 1.85;
}

.submit-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  min-height: 52px;
  border: 0;
  border-radius: 14px;
  background: var(--action);
  color: #ffffff;
  font: inherit;
  font-size: 1.02rem;
  font-weight: 700;
  cursor: pointer;
  touch-action: manipulation;
  box-shadow: 0 1px 2px rgba(31, 41, 55 , .12), 0 10px 20px -12px rgba(184, 74, 0 , .7);
  transition: background-color .2s ease, transform .15s ease;
}

.submit-btn:hover { background: var(--action-hover); }
.submit-btn:active { transform: scale(.985); }

.submit-btn:focus-visible {
  outline: 3px solid var(--action);
  outline-offset: 3px;
}

.submit-btn[aria-busy="true"] { cursor: progress; }

.btn-spinner {
  display: none;
  width: 18px;
  height: 18px;
  border: 2px solid rgba(255, 255, 255, .45);
  border-top-color: #ffffff;
  border-radius: 50%;
}

.submit-btn[aria-busy="true"] .btn-spinner {
  display: inline-block;
  animation: k-spin .8s linear infinite;
}

@keyframes k-spin { to { transform: rotate(360deg); } }

.form-footnote {
  margin: 12px 0 0;
  color: var(--muted);
  font-size: .8rem;
  line-height: 1.75;
  text-align: center;
}

/* ── The result ── */

.placeholder-state {
  display: grid;
  justify-items: center;
  gap: 8px;
  padding: clamp(28px, 6vw, 56px) 12px;
  color: var(--muted);
  text-align: center;
}

.empty-icon {
  width: 48px;
  height: 48px;
  margin-bottom: 4px;
  fill: none;
  stroke: var(--orange);
  stroke-width: 3;
  stroke-linecap: round;
}

/* One drawing per screen: the hero holds it from 861px up, this card below. */
.empty-art {
  width: min(176px, 52vw);
  height: auto;
  margin-bottom: 2px;
  border-radius: 24px;
}

@media (max-width: 860px) {
  .empty-icon { display: none; }
}

@media (min-width: 861px) {
  .empty-art { display: none; }
}

.placeholder-state h3 {
  margin: 0;
  color: var(--ink);
  font-size: var(--t-lg);
  font-weight: 700;
}

.placeholder-state p {
  max-width: 26rem;
  margin: 0;
  font-size: var(--t-md);
  line-height: 1.9;
}

.result-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 12px;
  margin-bottom: 16px;
}

.result-header h3 {
  margin: 0;
  color: var(--ink);
  font-size: var(--t-lg);
  font-weight: 700;
  line-height: 1.6;
}

.result-header h3:focus-visible {
  outline: 3px solid var(--action);
  outline-offset: 4px;
  border-radius: 6px;
}

.result-badge {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 2px 12px;
  border-radius: 999px;
  background: var(--k-none-bg);
  color: var(--k-none);
  font-size: .8rem;
  font-weight: 650;
}

.result-badge[data-tone="ok"] { background: var(--k-ok-bg); color: var(--k-ok); }
.result-badge[data-tone="warn"] { background: var(--k-warn-bg); color: var(--k-warn); }

.estimate-box {
  margin-bottom: 14px;
  padding: 20px;
  border: 1px solid #f2dcc8;
  border-radius: 16px;
  background: linear-gradient(180deg, #fff7f0, #fdf1e6);
  text-align: center;
}

.estimate-label {
  margin: 0 0 2px;
  color: var(--muted);
  font-size: var(--t-sm);
}

.estimate-value {
  margin: 0;
  color: var(--orange-deep);
  font-size: clamp(2rem, 7vw, 2.6rem);
  font-weight: 750;
  line-height: 1.35;
  font-variant-numeric: tabular-nums;
}

.interval-box {
  margin-bottom: 14px;
  padding: 16px;
  border-radius: 16px;
  background: var(--k-sand);
}

.interval-label {
  margin: 0;
  color: var(--k-none);
  font-size: var(--t-sm);
  font-weight: 650;
}

.interval-range {
  margin: 2px 0 12px;
  color: var(--ink);
  font-size: clamp(1.15rem, 3.6vw, 1.35rem);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* ── The rank strip ──
   One log axis with the smaller rank at the right, where the line starts.
   Every mark differs by shape as well as colour (band, diamond, circle,
   square), the numbers are in the text beside it, and the SVG is sized in
   percent, so it is as wide as its box at 320px and never wider. */
.rank-strip {
  margin: 0 0 10px;
  min-width: 0;
}

.rank-strip:empty { display: none; }

.strip-ends {
  display: flex;
  justify-content: space-between;
  margin: 0;
  color: var(--muted);
  font-size: .8rem;
  line-height: 1.6;
}

.strip-svg {
  display: block;
  width: 100%;
  overflow: visible;
}

.strip-track { fill: var(--k-track); }
.strip-tick { stroke: var(--k-tick); stroke-width: 1; }
.strip-edge { stroke: var(--k-edge); stroke-width: 1.2; stroke-dasharray: 3 3; }
.strip-zone--ahead,
.strip-zone--behind { fill: var(--k-zone-near); }
.strip-zone--inside,
.strip-zone--far { fill: var(--k-zone-far); }

.strip-band {
  fill: var(--k-band);
  stroke: var(--k-band-edge);
  stroke-width: 1.5;
}

.strip-estimate {
  fill: var(--action);
  stroke: var(--surface);
  stroke-width: 2.5;
}

.strip-estimate-line {
  stroke: var(--action);
  stroke-width: 2;
}

.strip-dot {
  fill: var(--surface);
  stroke: var(--k-dot-edge);
  stroke-width: 2;
}

.strip-square {
  fill: var(--k-programme);
  stroke: var(--k-programme-edge);
  stroke-width: 1.5;
}

.strip-axis {
  position: relative;
  height: 1.7em;
  margin: 2px 0 0;
  color: var(--k-none);
  font-size: .8rem;
  font-variant-numeric: tabular-nums;
}

.strip-axis-label {
  position: absolute;
  top: 0;
  white-space: nowrap;
  transform: translateX(50%);
}

.strip-axis-label[data-end="start"] { right: 0; transform: none; }
.strip-axis-label[data-end="end"] { left: 0; transform: none; }

.strip-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  margin: 6px 0 0;
  padding: 0;
  list-style: none;
  color: var(--k-none);
  font-size: .8rem;
}

.strip-legend li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.legend-glyph {
  flex: none;
  overflow: visible;
}

@media (prefers-reduced-motion: no-preference) {
  .strip-svg { animation: k-fade .35s ease-out; }
}

@keyframes k-fade { from { opacity: 0; } }

.interval-note {
  margin: 0;
  color: var(--muted);
  font-size: .8rem;
  line-height: 1.8;
}

.callout-note {
  margin: 0 0 14px;
  padding: 12px 14px;
  border-inline-start: 3px solid #e3a24f;
  border-radius: var(--k-radius-sm);
  background: #fdf6ea;
  color: #5a3d12;
  font-size: var(--t-sm);
  line-height: 1.9;
}

.callout-note p { margin: 0; }

.callout-note p + p {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed var(--k-callout-rule);
}

.basis-line {
  margin: 0 0 12px;
  color: var(--muted);
  font-size: .8rem;
  line-height: 1.85;
}

/* ── «چرا این عدد؟» and «مقایسه با یک رشته‌محل»: two native disclosures ── */

.why-box,
.compare-box {
  margin: 0 0 16px;
  border: 1px solid var(--k-line);
  border-radius: var(--k-radius-sm);
  background: var(--k-sand);
}

.why-list {
  display: grid;
  gap: 4px;
  margin: 0;
  padding: 0 16px 14px;
}

.why-list dt {
  margin-top: 6px;
  color: var(--ink);
  font-size: var(--t-sm);
  font-weight: 700;
}

.why-list dd {
  margin: 0;
  color: var(--k-none);
  font-size: var(--t-sm);
  line-height: 1.9;
}

.compare-box { margin-top: 18px; }

.compare-body { padding: 0 16px 16px; }

.compare-body > .sec-desc { margin-bottom: 14px; }

.compare-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

/* The action inside the comparison card is the system's dark button
   (public/ds/components.css, .ds-btn--dark); the form only places it. */
.compare-form > button { grid-column: 1 / -1; }
.compare-form > button[aria-busy="true"] { cursor: progress; }

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

.compare-status {
  margin: 10px 0 0;
  color: var(--muted);
  font-size: var(--t-sm);
  line-height: 1.85;
}

.compare-status:empty { display: none; }

.compare-result {
  margin-top: 14px;
  padding: 14px;
  border-radius: var(--k-radius-sm);
  background: var(--surface);
}

.compare-name {
  margin: 0 0 4px;
  color: var(--ink);
  font-size: var(--t-md);
  font-weight: 700;
  line-height: 1.7;
}

.compare-counted,
.compare-message {
  margin: 0 0 10px;
  color: var(--k-none);
  font-size: var(--t-sm);
  line-height: 1.9;
}

.compare-summary {
  margin: 4px 0 8px;
  color: var(--ink);
  font-size: var(--t-md);
  font-weight: 650;
  line-height: 1.9;
}

.compare-positions {
  display: grid;
  gap: 6px;
  margin: 0 0 10px;
  padding: 0;
  list-style: none;
}

.compare-positions li {
  padding: 8px 12px;
  border-inline-start: 3px solid var(--k-tick);
  border-radius: 8px;
  background: var(--k-sand);
  color: var(--ink);
  font-size: var(--t-sm);
  line-height: 1.8;
}

.compare-bands {
  margin: 0 0 10px;
  font-size: var(--t-sm);
}

.compare-bands summary {
  display: flex;
  align-items: center;
  min-height: 44px;
  color: var(--ink);
  font-weight: 650;
  cursor: pointer;
}

.compare-bands summary:focus-visible {
  outline: 3px solid var(--action);
  outline-offset: 2px;
  border-radius: 6px;
}

.compare-bands ul {
  margin: 0;
  padding-inline-start: 18px;
  color: var(--k-none);
  line-height: 1.9;
}

.compare-note {
  margin: 0;
  padding-top: 10px;
  border-top: 1px solid var(--k-line);
  color: var(--ink);
  font-size: var(--t-sm);
  font-weight: 600;
  line-height: 1.85;
}

.similar-candidates-section h4 {
  margin: 0 0 4px;
  color: var(--ink);
  font-size: var(--t-md);
  font-weight: 700;
}

.similar-candidates-section .sec-desc {
  margin-bottom: 12px;
  font-size: var(--t-sm);
}

.candidates-list {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.candidate {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 12px;
  padding: 12px 14px;
  border-radius: var(--k-radius-sm);
  background: var(--k-sand);
}

.cand-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
}

.cand-rank {
  color: var(--ink);
  font-size: var(--t-md);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* The konkur a card is from. None of them is 1405 yet, so the year is the
   first thing beside the rank (docs/konkur-1405-scoring-rules.md §۴). One
   label: it never breaks between the word and its year. */
.cand-year {
  color: var(--muted);
  font-size: .8rem;
  font-weight: 600;
  white-space: nowrap;
}

/* Facts in their own chips, so no « · » ever sits beside a Persian digit
   (docs/VOICE.md §۵). */
.cand-scores {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.cand-scores li {
  padding: 2px 10px;
  border-radius: 999px;
  background: #ffffff;
  color: var(--k-none);
  font-size: .8rem;
  font-variant-numeric: tabular-nums;
}

.result-disclaimer {
  margin: 18px 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--k-line);
  color: var(--muted);
  font-size: .8rem;
  line-height: 1.8;
}

/* ── Coverage ── */

.stats-overview {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr));
  gap: 12px;
}

.stat-item {
  padding: 16px;
  border-radius: 16px;
  background: var(--k-sand);
  text-align: center;
}

.stat-num {
  color: var(--orange-deep);
  font-size: clamp(1.4rem, 4vw, 1.8rem);
  font-weight: 750;
  line-height: 1.4;
  font-variant-numeric: tabular-nums;
}

.stat-title {
  color: var(--muted);
  font-size: var(--t-sm);
}

.coverage-status {
  margin: 14px 0 0;
  color: var(--muted);
  font-size: var(--t-sm);
  line-height: 1.85;
}

.coverage-status:empty { display: none; }

.coverage-years {
  margin: 14px 0 0;
  color: var(--ink);
  font-size: var(--t-sm);
  line-height: 1.85;
}

.coverage-years:empty { display: none; }

/* ── Footer ── */

.footer {
  margin-top: 48px;
  border-top: 1px solid var(--border);
  padding: 24px 16px;
  text-align: center;
  color: var(--muted);
  font-size: 0.85rem;
}

.footer p { margin: 0 0 6px; }

@media (prefers-reduced-motion: reduce) {
  .tab-btn,
  .field input,
  .field select,
  .form-more summary::after,
  .why-box > summary::after,
  .compare-box > summary::after,
  .submit-btn,
  .nav-menu a {
    transition: none;
  }

  .submit-btn:active { transform: none; }
  .submit-btn[aria-busy="true"] .btn-spinner { animation: none; }
}

/* ── Tool-Rank «بعدش چی؟» ────────────────────────────────────────────────────
 * یک در، بعد از یک عدد. بی‌عدد پنهان می‌ماند. */
.next-step {
  display: grid;
  gap: .5rem;
  margin-block-start: 1rem;
  padding: 1rem;
  border: 1px solid var(--border);
  border-radius: var(--k-radius-sm);
  background: var(--k-sand);
}
.next-step h4 { margin: 0; color: var(--text-dark); font-size: .95rem; }
.next-step__go {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-inline: 1rem;
  border-radius: 999px;
  background: var(--primary);
  color: #1f2937;
  font-size: .88rem;
  font-weight: 700;
  text-decoration: none;
}
.next-step__note { margin: 0; color: var(--text-muted); font-size: .8rem; line-height: 1.9; }