/*
 * KiANIT - ring constructor (/konstruktor). Loaded only on that page.
 * All rules namespaced under .rk so nothing leaks into the rest of the site.
 * Tokens reused from main.css (--gold, --cream, --serif, --sans, ...).
 */

.rk {
  background: var(--cream);
  padding: 56px 0 80px;
}

.rk-wrap {
  display: grid;
  /* Full-bleed on desktop (Milush, 2026-07-22): no container cap - the panel
     keeps a workable width, every extra pixel goes to the 3D preview. */
  max-width: none;
  /* Panel min 41% at 1440 keeps the step capsule (~508px) from scrolling;
     the 560px cap stops sliders stretching on wide monitors. */
  grid-template-columns: clamp(430px, 41%, 560px) minmax(0, 1fr);
  gap: 56px;
  align-items: start;
}

/* ─── Panel ───────────────────────────────────────────────── */

.rk-head { margin-bottom: 28px; }

.rk-eyebrow {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 12px;
}

.rk-title {
  font-family: var(--serif);
  font-size: clamp(28px, 4vw, 42px);
  color: var(--charcoal);
  margin-bottom: 10px;
}

.rk-sub {
  font-family: var(--sans);
  font-size: 15px;
  color: var(--muted);
  line-height: 1.55;
  max-width: 44ch;
}

/* ─── Step tabs (Fischer-style guided flow) ──────────────── */

/* One capsule, a sliding highlight behind the active tab (JS measures it:
   tab widths change with locale, the visible set changes with mode). */
.rk-tabs {
  width: max-content;
  max-width: 100%;
  margin-bottom: 26px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 999px;
}
/* The scroll lives on an inner layer so the capsule border and padding stay
   put; when tabs overflow, JS flags the cut side(s) and the labels fade out
   instead of clipping against the border (Milush). */
.rk-tabs-scroll {
  position: relative;
  display: flex;
  gap: 2px;
  overflow-x: auto;
  scrollbar-width: none;
  border-radius: 999px;
}
.rk-tabs-scroll::-webkit-scrollbar { display: none; }
.rk-tabs-scroll.is-cut-r {
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 32px), transparent);
  mask-image: linear-gradient(90deg, #000 calc(100% - 32px), transparent);
}
.rk-tabs-scroll.is-cut-l {
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 32px);
  mask-image: linear-gradient(90deg, transparent, #000 32px);
}
.rk-tabs-scroll.is-cut-l.is-cut-r {
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 32px, #000 calc(100% - 32px), transparent);
  mask-image: linear-gradient(90deg, transparent, #000 32px, #000 calc(100% - 32px), transparent);
}

/* Full-height fill up to the capsule border, not an inset pill (Milush) -
   matches the ring-tab selected segment. */
.rk-tabs-thumb {
  position: absolute;
  top: 0;
  bottom: 0;
  left: -999px; /* off-canvas until JS places it - a 0-width bordered dot otherwise */
  width: 0;
  z-index: 0;
  background: var(--gold-pale);
  border: 1px solid var(--gold);
  border-radius: 999px;
  pointer-events: none;
  transition: left 0.35s cubic-bezier(0.4, 0, 0.2, 1), width 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.rk-tabs-thumb.no-anim { transition: none; }

.rk-tab {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  padding: 10px 16px 10px 10px; /* +4px vertical absorbs the dropped capsule padding - same 44px overall */
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--muted);
  background: none;
  border: none;
  white-space: nowrap;
  cursor: pointer;
  transition: color 0.2s;
}
.rk-tab:hover { color: var(--charcoal); }
.rk-tab.is-active {
  color: var(--charcoal);
  font-weight: 600;
}
/* Passed steps stay emphasised (Milush). Charcoal, not just weight: Jost 600
   in muted grey reads as regular - the active tab looks bold only because
   it's dark. */
.rk-tab.is-done {
  color: var(--charcoal);
  font-weight: 600;
}

.rk-tab-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1px solid var(--border);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
  background: var(--white);
  transition: border-color 0.2s, background 0.2s, color 0.2s;
}
.rk-tab.is-active .rk-tab-num {
  border-color: var(--gold);
  background: var(--gold);
  color: var(--white);
}
.rk-tab.is-done .rk-tab-num {
  border-color: var(--gold);
  background: var(--gold-pale);
  color: var(--gold-dk);
}

/* ─── Step sections ──────────────────────────────────────── */

.rk-step {
  display: flex;
  flex-direction: column;
  gap: 22px;
}
/* display:flex above would beat the UA rule for [hidden] - restore it. */
.rk-step[hidden] { display: none; }

/* ─── Step navigation (back / next) ──────────────────────── */

/* Equal 1fr side tracks put the reset icon on the TRUE centre line of the
   row - flex + margin:auto centred it only in the leftover space, so the
   wider Wstecz pushed it off-centre (Milush, 2026-07-22). */
/* Compact centred cluster (Milush: no mouse travel to the edges), the reset
   underneath spans EXACTLY the cluster width: the nav shrink-wraps to the
   three buttons, the reset stretches to that width without contributing its
   own (padding is dropped so its text never inflates the tracks). */
.rk-nav {
  display: grid;
  grid-template-columns: auto auto auto;
  align-items: center;
  gap: 12px;
  width: max-content;
  margin-top: 20px;
  margin-left: auto;
  margin-right: auto;
}
/* Edge steps DISABLE their arrow instead of hiding it (Milush: the blank
   slot next to Cofnij looked broken) - dimmed like the catalog arrows. */
.rk-nav-arrow:disabled {
  opacity: 0.35;
  cursor: default;
  pointer-events: none;
}
.rk-nav-reset {
  grid-column: 1 / -1;
  width: 100%;
  min-width: 0;
  padding-left: 0;
  padding-right: 0;
}

/* Arrow squares instead of Wstecz/Dalej words - exact mirror of the catalog
   .reviews-nav-btn (Milush). */
.rk-nav-arrow {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--white);
  border: 1px solid var(--border);
  color: var(--charcoal);
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s, color 0.2s;
}
.rk-nav-arrow:hover {
  border-color: var(--gold);
  background: var(--gold);
  color: var(--white);
}
.rk-nav-arrow svg { width: 16px; height: 16px; max-width: none; }

/* Undo: the only centre control, smaller than the arrows - square, bold and
   dark while there is history to step back through, dimmed when empty. */
.rk-nav-undo {
  justify-self: center;
  padding: 9px 16px;
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--charcoal);
  background: var(--white);
  border: 1px solid var(--border);
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s;
}
.rk-nav-undo:hover { border-color: var(--gold); }
/* No opacity wash (it read as a rendering bug next to the arrows) - empty
   history looks like an inactive tab instead: quiet grey text, normal frame. */
.rk-nav-undo:disabled {
  color: var(--muted);
  font-weight: 500;
  cursor: default;
  pointer-events: none;
}

/* ─── Summary step: price estimate ───────────────────────
   No spec table here (the live spec panel beside the viewers carries the
   parameters) - just the estimate, mirroring the catalog product-price look
   (price-lbl / p-old / p-new / p-save in main.css), scaled down a notch. */

.rk-est {
  margin: 2px 0 6px;
}
.rk-price-lbl {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--charcoal); /* bold + dark - weight alone doesn't read in muted (Milush) */
  margin-bottom: 10px;
}

/* Receipt card: a line per ring (weight + discounted price), pair total in
   the catalog price style below the divider. */
.rk-rcpt {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 16px 20px;
}
.rk-rcpt-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding: 6px 0;
  font-family: var(--sans);
  font-size: 14px;
  color: var(--charcoal);
}
.rk-rcpt-w {
  color: var(--muted);
  font-size: 12px;
  margin-left: 6px;
}
.rk-rcpt-amt {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.rk-rcpt-total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 12px;
  border-top: 1px solid var(--border);
  margin-top: 8px;
  padding-top: 14px;
}
/* Lead of the total line: the scope word (Para / Męska / Damska) plus, in
   solo mode, the weight of that single ring - the per-ring rows are gone
   then, so the weight would otherwise vanish with them. */
.rk-rcpt-lead {
  display: flex;
  align-items: baseline;
}
.rk-rcpt-pair {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--charcoal);
}
/* Lock open on the summary step = one ring is priced, not the pair: the two
   per-ring rows collapse and the total line carries that ring alone
   (constructor.js toggles .is-solo). */
.rk.is-solo .rk-rcpt-row { display: none; }
.rk.is-solo .rk-rcpt-total {
  border-top: none;
  margin-top: 0;
  padding-top: 0;
}
.rk-price-row {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 12px;
}
.rk-p-old {
  font-family: var(--sans);
  font-size: 18px;
  color: var(--muted);
  text-decoration: line-through;
  text-decoration-color: var(--muted);
}
.rk-p-new {
  font-family: var(--serif);
  font-size: 28px;
  font-weight: 500;
  color: var(--charcoal);
  line-height: 1.1;
}
.rk-p-save {
  display: inline-block;
  background: var(--red);
  color: var(--white);
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1px;
  padding: 5px 9px;
  border-radius: 2px;
  line-height: 1;
}
@media (max-width: 480px) {
  .rk-p-new { font-size: 24px; }
}

.rk-fields {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.rk-field { display: block; }

.rk-label {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--charcoal);
  margin-bottom: 10px;
}

.rk-val {
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--gold-dk);
}

/* Selects + text input */
.rk-select,
.rk-text {
  width: 100%;
  padding: 13px 16px;
  font-family: var(--sans);
  font-size: 15px;
  color: var(--charcoal);
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 2px;
  transition: border-color 0.2s;
  appearance: none;
}
.rk-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23B08D57' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  padding-right: 40px;
  cursor: pointer;
}
.rk-select:focus,
.rk-text:focus {
  outline: none;
  border-color: var(--gold);
}

/* Color + profile pills */
.rk-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.rk-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  font-family: var(--sans);
  font-size: 13px;
  color: var(--muted);
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 999px;
  transition: border-color 0.2s, background 0.2s, color 0.2s;
}
.rk-pill:hover { border-color: var(--gold-lt); }
.rk-pill.is-active {
  border-color: var(--gold);
  background: var(--gold-pale);
  color: var(--charcoal);
  font-weight: 600;
}

/* Colour picker - catalog-style: colour circle with the label below (no pill). */
.rk-colors {
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
}
.rk-color {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
}
.rk-swatch {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 2px solid transparent;
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.15);
  transition: border-color 0.2s;
}
.rk-color:hover .rk-swatch { border-color: var(--gold-lt); }
.rk-color.is-active .rk-swatch { border-color: var(--charcoal); }
/* Swatche zgrane z renderem 3D (COLOR_RGB w api.py) wg wzorników klienta 2026-07-23:
   Białe, Zielone (realnie zielone, nie żółte), Różowe, Czerwone (ciepłe złoto). */
.rk-swatch--white { background: linear-gradient(135deg, #e8e8e8, #c0c0c0); }
.rk-swatch--green { background: linear-gradient(135deg, #d8dd93, #aeb85e); }
.rk-swatch--pink  { background: linear-gradient(135deg, #e9a892, #c9806a); }
.rk-swatch--red   { background: linear-gradient(135deg, #ecc987, #cf9a4e); }
.rk-color-name {
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 0.02em;
  color: var(--muted);
  transition: color 0.2s;
}
.rk-color.is-active .rk-color-name { color: var(--charcoal); font-weight: 600; }

/* Colour picker locks when platinum (950) is chosen: hide gold tones, keep the
   white/silver swatch (paintColors() forces it active), block interaction. */
.rk-colors.is-platinum { pointer-events: none; }
.rk-colors.is-platinum .rk-color:not([data-rk-value="White"]) { display: none; }

/* ─── Łączony kolor metalu (2026-07-25) ───────────────────
   2-3 podłużne pasy wzdłuż szerokości szynki. Wzornik wyżej to pas nr 1;
   proporcja i pasy 2-3 dochodzą dopiero po włączeniu (klasy .is-combo /
   .is-tri wiesza paintColors()). Platyna kasuje cały blok - platynowa
   obrączka nie ma odcieni do łączenia. */
.rk-combo-modes { margin-bottom: 16px; }
.rk-field--color:not(.is-combo) .rk-lbl-combo,
.rk-field--color.is-combo .rk-lbl-mono { display: none; }
.rk-field--color:not(.is-combo) .rk-combo-only { display: none; }
.rk-field--color:not(.is-tri) .rk-combo-3 { display: none; }
.rk-field--color.is-platinum .rk-combo-modes,
.rk-field--color.is-platinum .rk-combo-only { display: none; }
.rk-combo-only {
  display: grid;
  gap: 20px;
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}

/* Proporcja: sam napis "2:1" nie mówi nic, pasek w tej proporcji - mówi
   wszystko. Segmenty barwi JS wybranymi odcieniami (.rk-swatch--*). */
.rk-ratios {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
.rk-ratio {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  padding: 10px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 4px;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
}
.rk-ratio:hover { border-color: var(--gold-lt); }
.rk-ratio.is-active {
  border-color: var(--gold);
  background: var(--gold-pale);
}
.rk-ratio-bar {
  display: flex;
  height: 16px;
  border-radius: 2px;
  overflow: hidden;
  box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.15);
}
.rk-ratio-seg { flex-basis: 0; }
.rk-ratio-name {
  font-family: var(--sans);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  text-align: center;
  color: var(--muted);
  transition: color 0.2s;
}
.rk-ratio.is-active .rk-ratio-name { color: var(--charcoal); font-weight: 600; }

@media (max-width: 480px) {
  .rk-ratios { grid-template-columns: repeat(2, 1fr); }
}

/* ─── Rowek (2026-07-25) ──────────────────────────────────
   Pozycje czytają się jak sama szynka: od jednej krawędzi (1) przez środek
   (4) do drugiej (7). Pigułki, nie suwak - pozycję, której ta szynka nie
   uniesie, da się wygasić tak samo jak pigułkę kamienia (.rk-pill.is-off). */
.rk-field--groove:not(.is-on) .rk-groove-only { display: none; }
.rk-groove-only { margin-top: 16px; }
.rk-groove-pos {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
}
.rk-groove-pos .rk-pill--num {
  min-width: 0;
  padding: 9px 0;
}

/* ─── Kamienie (krok 5, tylko tryb klasyczny) ──────────────────────
   Krok pokazuje wyłącznie pola, których wymaga wybrana oprawa - klasy
   is-none / is-sol / is-pave ustawia paintStoneStep() w constructor.js,
   więc suwak liczby kamieni nie wisi przy solitaire i odwrotnie. */
.rk-step--stone .rk-stone-only { display: none; }
.rk-step--stone.is-sol .rk-stone-only--sol,
.rk-step--stone.is-sol .rk-stone-only--any,
.rk-step--stone.is-pave .rk-stone-only--pave,
.rk-step--stone.is-pave .rk-stone-only--any { display: block; }

/* Wybór, którego ta obrączka nie uniesie (limity z /api/v1/stones/limits):
   zostaje na widoku, ale wyraźnie wygaszony - klik blokuje też JS. */
.rk-pill.is-off,
.rk-color.is-off {
  opacity: 0.35;
  cursor: not-allowed;
  pointer-events: none;
}

/* Podpis pod polem: czemu pavé jest wyłączone, skąd średnica, jak wyceniamy. */
.rk-note {
  margin-top: 8px;
  font-family: var(--sans);
  font-size: 12px;
  line-height: 1.45;
  color: var(--muted);
}

/* Kamienie - te same kółka co kolor metalu, inne wypełnienie. */
.rk-swatch--diamond  { background: linear-gradient(135deg, #ffffff, #d3dee6); }
.rk-swatch--ruby     { background: linear-gradient(135deg, #d05a63, #8e1d2c); }
.rk-swatch--sapphire { background: linear-gradient(135deg, #4d7cc7, #1c3a76); }

/* Klasa handlowa kamienia wg wzornika klienta (2026-07-24): 3 kolumny,
   nazwa + barwa/czystość pod nią, Cyrkonia bez oznaczenia. Aktywna karta na
   pełnym złocie - jedyny mocny akcent tego kroku, reszta trzyma język
   pozostałych kroków (pigułki, wzorniki, suwaki). */
.rk-quality {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.rk-qual {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: 62px;
  padding: 10px 8px;
  background: var(--white);
  border: 1px solid var(--gold-lt);
  border-radius: 999px;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
}
.rk-qual:hover { border-color: var(--gold); }
.rk-qual-name {
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 600;
  color: var(--charcoal);
  transition: color 0.2s;
}
.rk-qual-grade {
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--muted);
  transition: color 0.2s;
}
.rk-qual.is-active {
  background: linear-gradient(135deg, var(--gold-lt), var(--gold));
  border-color: var(--gold);
}
.rk-qual.is-active .rk-qual-name,
.rk-qual.is-active .rk-qual-grade { color: var(--white); }

@media (max-width: 560px) {
  .rk-quality { grid-template-columns: repeat(2, 1fr); }
}

/* Metal fineness (próba) - grouped pills, catalog-style (Złoto | Platyna) */
.rk-proba {
  display: flex;
  flex-wrap: wrap;
  gap: 18px 22px;
  align-items: flex-start;
}
.rk-proba-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.rk-proba-sublbl {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--charcoal); /* same rank as the KOLOR label - muted read as disabled (Milush) */
}
.rk-proba-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.rk-pill--num {
  min-width: 52px;
  justify-content: center;
  font-variant-numeric: tabular-nums;
}

/* Profile picker grid */
.rk-profiles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.rk-profile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 12px 6px 10px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 4px;
  transition: border-color 0.2s, background 0.2s;
}
.rk-profile:hover { border-color: var(--gold-lt); }
.rk-profile.is-active {
  border-color: var(--gold);
  background: var(--gold-pale);
}
/* Рисунки сечений от Ромы: фон вырезан, шинка внизу растворяется, поэтому
   картинка ложится и на белую кнопку, и на бежевую активную. */
.rk-profile-img {
  width: 92px;
  height: auto;
  display: block;
}
.rk-profile-name {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.02em;
  color: var(--muted);
  text-align: center;
  line-height: 1.2;
}
.rk-profile.is-active .rk-profile-name { color: var(--charcoal); font-weight: 600; }

/* Classic / Premium ring-type toggle (renders only while premium is enabled
   server-side). Sits above the step tabs. */
.rk-modes {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}
/* Slim text segment, not a pill bar (declutter variant A): the mode is a
   rare, usually one-time choice, so it must not compete with the ring tabs
   and step tabs below. Active = charcoal semibold + gold underline. */
.rk-mode {
  padding: 2px 0;
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s;
}
.rk-mode:hover { color: var(--charcoal); }
.rk-mode.is-active {
  color: var(--charcoal);
  font-weight: 600;
  border-bottom-color: var(--gold);
}
.rk-modes-sep {
  font-family: var(--sans);
  font-size: 12px;
  color: var(--border);
  user-select: none;
}

/* Ring pair tabs + lock: the active tab is the ring being edited; the closed
   lock syncs design keys across the pair. Sits between the mode toggle and
   the step tabs. */
.rk-rings {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
}
.rk-ring-tab {
  flex: 1 1 0;
  padding: 9px 14px;
  font-family: var(--sans);
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--muted);
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 999px;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s, color 0.2s;
}
.rk-ring-tab:hover { border-color: var(--gold-lt); }
.rk-ring-tab.is-active {
  border-color: var(--gold);
  background: var(--gold-pale);
  color: var(--charcoal);
  font-weight: 600;
}
/* Closed lock = both models are edited at once: BOTH tabs take the full
   selected look, bold included (Milush, 2026-07-21). */
.rk-ring-tab.is-paired {
  border-color: var(--gold);
  background: var(--gold-pale);
  color: var(--charcoal);
  font-weight: 600;
}
.rk-lock {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--white);
  color: var(--muted);
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s, color 0.2s;
}
.rk-lock:hover { border-color: var(--gold-lt); }
.rk-lock.is-locked {
  border-color: var(--gold);
  background: var(--gold-pale);
  color: var(--gold-dk);
}
.rk-lock-svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.rk-lock .rk-lock-svg--open { display: none; }
.rk-lock:not(.is-locked) .rk-lock-svg--closed { display: none; }
.rk-lock:not(.is-locked) .rk-lock-svg--open { display: block; }
/* On steps with nothing to sync (engraving, summary, premium dimensions) the
   lock shows open and dimmed - it has no effect there. */
.rk-lock.is-disabled {
  opacity: 0.4;
  cursor: default;
}
.rk-lock.is-disabled:hover { border-color: var(--border); }

/* Krok 1: pattern designs - name-only pills (render previews dropped per
   Milush, 2026-07-21; buttons reuse .rk-pill). */
.rk-designs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* Premium mode: the design fixes the cross-section, height and metal colour -
   those controls and spec rows disappear (size + próba + engraving stay, and
   inner-Ø + width now come back real from the design meta); JS renumbers the
   tabs. Classic hides the design spec row instead. .rk-tab is
   display:inline-flex, so the hidden attribute needs an explicit override. */
.rk-tab[hidden] { display: none; }
.rk:not(.is-premium) .rk-spec div:has([data-rk-spec="design"]) { display: none; }
.rk.is-premium .rk-field--dims,
.rk.is-premium .rk-field--color { display: none; }
.rk.is-premium .rk-spec div:has([data-rk-spec="profile"]),
.rk.is-premium .rk-spec div:has([data-rk-spec="height"]) { display: none; }
/* Cell-count parity: premium shows 5 grid cells before the spanning engraving
   row (3-col spec) - span the metal cell so the divider background can't show
   through an empty slot. */
.rk.is-premium .rk-spec div:has([data-rk-spec="metal"]) { grid-column: 2 / -1; }
/* Groove + stones rows: hidden until a ring actually carries one
   (constructor.js puts .has-groove / .has-stone on the root), and never in
   premium - the pattern designs take neither. When they do show they span the
   full width, so the 6 classic cells stay a clean 3x2 and no empty slot leaks
   the divider colour. */
.rk:not(.has-groove) .rk-spec div:has([data-rk-spec="groove"]),
.rk.is-premium .rk-spec div:has([data-rk-spec="groove"]) { display: none; }
.rk.has-groove .rk-spec div:has([data-rk-spec="groove"]) { grid-column: 1 / -1; }
.rk:not(.has-stone) .rk-spec div:has([data-rk-spec="stone"]),
.rk.is-premium .rk-spec div:has([data-rk-spec="stone"]) { display: none; }
.rk.has-stone .rk-spec div:has([data-rk-spec="stone"]) { grid-column: 1 / -1; }
/* Estimate is classic-only arithmetic: premium has no parametric geometry to
   price yet, so weight / struck base price / badge hide and the big slot
   carries the individual-quote stub (set by constructor.js). */
.rk.is-premium .rk-rcpt-row,
.rk.is-premium .rk-rcpt-pair,
.rk.is-premium .rk-rcpt-w,
.rk.is-premium .rk-p-old,
.rk.is-premium .rk-p-save { display: none; }
.rk.is-premium .rk-rcpt-total { border-top: none; margin-top: 0; padding-top: 0; }
.rk.is-premium .rk-p-new { font-size: 24px; }

/* Engraving font stub - each pill previews its own typeface (inline style). */
.rk-fonts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.rk-pill--font {
  font-size: 15px;
  padding: 10px 18px;
}

/* Slider row: -/+ steppers flank the range for one-step precision. */
.rk-slider-row {
  display: flex;
  align-items: center;
  gap: 12px;
}
.rk-slider-row .rk-slider { flex: 1; }
.rk-stepbtn {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--white);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1;
  color: var(--gold-dk);
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
  /* Press-and-hold repeats the step, so a long press must not raise the mobile
     text-selection / callout UI or wait on the 300ms tap delay. */
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
.rk-stepbtn:hover {
  border-color: var(--gold);
  background: var(--gold-pale);
}

/* Range sliders (native, gold-styled) */
.rk-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 3px;
  border-radius: 3px;
  background: var(--gold-soft);
  cursor: pointer;
}
.rk-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--gold);
  border: 3px solid var(--white);
  box-shadow: 0 1px 4px rgba(110, 80, 40, 0.35);
}
.rk-slider::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--gold);
  border: 3px solid var(--white);
  box-shadow: 0 1px 4px rgba(110, 80, 40, 0.35);
}
.rk-slider:focus { outline: none; }
.rk-slider:focus::-webkit-slider-thumb { box-shadow: 0 0 0 4px var(--gold-pale); }
.rk-slider:focus::-moz-range-thumb { box-shadow: 0 0 0 4px var(--gold-pale); }

.rk-cta {
  width: 100%;
  margin-top: 0;
}
/* Tighter summary cluster (Milush): pull the CTA / share / nav together. */
.rk-step[data-rk-step="6"] { gap: 12px; }

/* Share the exact configuration: quiet secondary action under the CTA - a link,
   not a second heavy button competing with "leave request". */
.rk-share {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  margin-top: 0;
  padding: 8px;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--muted);
  background: none;
  border: none;
  cursor: pointer;
  transition: color 0.2s;
}
.rk-share:hover { color: var(--gold-dk); }
.rk-share.is-done { color: var(--gold-dk); } /* copied confirmation */
.rk-share-ico { width: 15px; height: 15px; max-width: none; flex: 0 0 15px; }

/* Size-system picker + help links (size step). The picker sits top-right on the
   size label row, above the slider (Milush); the help links sit under all three
   sliders. */
.rk-size-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}
/* In the head the label groups tight-left with its value; the base .rk-label
   stretches value to the far right, which we don't want here. */
.rk-label--flush {
  flex: 0 1 auto;
  justify-content: flex-start;
  gap: 8px;
  margin-bottom: 0;
}
/* Compact inline select (the base .rk-select is a full-width block). */
.rk-sizesys {
  width: auto;
  min-width: 118px;
  margin-left: auto;
  padding: 9px 34px 9px 12px;
  font-size: 13px;
  background-position: right 12px center;
}
.rk-size-help {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 14px;
  margin: 4px 0 0;
  font-family: var(--sans);
  font-size: 12px;
}
.rk-size-help-q { color: var(--muted); }
.rk-size-help a {
  color: var(--gold-dk);
  font-weight: 600; /* bolder than the muted question intro (Milush) */
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
  transition: color 0.2s;
}
.rk-size-help a:hover { color: var(--gold); }

/* ─── Stage (3D + spec) ───────────────────────────────────── */

.rk-stage {
  position: sticky;
  top: calc(var(--nav-h) + 24px);
  /* Drop the render to roughly the mode-toggle line instead of gluing it to
     the page header (Milush, 2026-07-21). Sticky top above still applies once
     the page scrolls. */
  margin-top: 148px;
}

/* The pair: two viewer boxes side by side, the active ring's box outlined. */
.rk-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.rk-viewer-box {
  position: relative;
  aspect-ratio: 1 / 1;
  background:
    radial-gradient(circle at 50% 40%, #FFFFFF 0%, var(--cream) 55%, var(--cream-2) 100%);
  border: 1px solid var(--border);
  border-radius: 4px;
  overflow: hidden;
  transition: border-color 0.2s;
}
.rk-viewer-box.is-active { border-color: var(--gold); }

.rk-viewer-tag {
  position: absolute;
  top: 10px;
  left: 12px;
  z-index: 1;
  pointer-events: none;
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.rk-viewer-box.is-active .rk-viewer-tag {
  color: var(--gold-dk);
  font-weight: 600;
}

.rk-viewer {
  width: 100%;
  height: 100%;
  --poster-color: transparent;
}

/* Transparent pick layer over the NOT-selected box (lock open only): a click
   selects that ring without ever reaching the 3D widget's camera. */
.rk-pick {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
}
.rk-pick[hidden] { display: none; }

.rk-loader,
.rk-oops {
  position: absolute;
  inset: 0;
  z-index: 3; /* above the .rk-pick layer */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  background: rgba(250, 248, 245, 0.72);
  backdrop-filter: blur(2px);
}
.rk-loader[hidden],
.rk-oops[hidden] { display: none; }

.rk-loader-txt,
.rk-oops {
  font-family: var(--sans);
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold-dk);
}
.rk-oops {
  color: var(--red);
  padding: 0 24px;
  text-align: center;
  text-transform: none;
  letter-spacing: 0.02em;
  font-size: 14px;
}

.rk-spin {
  width: 34px;
  height: 34px;
  border: 3px solid var(--gold-soft);
  border-top-color: var(--gold);
  border-radius: 50%;
  animation: rk-spin 0.8s linear infinite;
}
@keyframes rk-spin { to { transform: rotate(360deg); } }

.rk-spec {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  margin: 18px 0 0;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: 4px;
  overflow: hidden;
}
.rk-spec > div {
  background: var(--white);
  padding: 12px 14px;
}
.rk-spec dt {
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 4px;
}
.rk-spec dd {
  margin: 0;
  font-family: var(--serif);
  font-size: 17px;
  color: var(--charcoal);
}

/* The live price card that used to sit under the spec is gone (Milush,
   2026-07-23) - it repeated the summary receipt. Price lives on the summary
   step only. */

/* ─── Responsive ──────────────────────────────────────────── */

@media (max-width: 980px) {
  /* Flex column, not a 1-col grid: a sticky grid item is confined to its own
     auto-sized row (zero travel), a sticky flex item can travel the whole
     container - required for the pinned viewer below. stretch overrides the
     base rule's align-items:start, which would shrink items to content width. */
  .rk-wrap {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 28px;
  }
  /* Dissolve the panel so its children join the column flex: the page header
     can then be ordered ABOVE the viewer (order -2 beats the stage's -1)
     instead of landing under the ring with the rest of the panel. */
  .rk-panel { display: contents; }
  .rk-head {
    order: -2;
    margin-bottom: 0; /* the wrap gap takes over */
  }
  /* display:contents makes the wrap gap (28px) stack with the panel's own
     margins - collapse them into one tight control group (Milush, 2026-07-21:
     mode toggle / ring tabs / step tabs read as one unit, ~10px apart). */
  .rk-modes { margin-bottom: -18px; } /* net 10px to the ring tabs */
  .rk-rings { margin-bottom: -18px; } /* net 10px to the step tabs */
  .rk-tabs { margin-bottom: -10px; }  /* net 18px - snug but breathing */
  .rk-nav { margin-top: 0; }          /* net 28px */
  /* 3D first and sticky: the ring stays in view while the step options scroll
     under it (Fischer keeps the model always visible - so do we). z-index stays
     below the fixed site header. */
  .rk-stage {
    order: -1;
    position: sticky;
    top: var(--nav-h);
    z-index: 5;
    background: var(--cream);
    padding-bottom: 10px;
    margin-top: 0; /* the desktop "lower the render" offset does not apply */
  }
  /* Two boxes share the width, so a lower height keeps them ring-shaped. */
  .rk-viewer-box { aspect-ratio: auto; height: 30vh; }
  .rk-pair { gap: 8px; }
  /* The stage spec grid would bloat the sticky block - the step-5 summary
     carries the same data on phones. */
  .rk-spec { display: none; }
  /* Anchor for the after-step-change scroll: clear the sticky viewer, or the
     step heading tucks under the sticky block. */
  .rk-tabs { scroll-margin-top: calc(var(--nav-h) + 30vh + 36px); }
}

@media (max-width: 600px) {
  .rk { padding: 32px 0 56px; }
  .rk-profiles { grid-template-columns: repeat(2, 1fr); }
  .rk-spec { grid-template-columns: repeat(2, 1fr); }
  /* 44px arrows + the compact undo fit one row at 360px as-is. */
}