/* ==========================================================================
   Swiss Gold House - bangle-size.css
   Only loaded by bangle-size.html (en / si / ta), after css/ring-size.css,
   whose .rs-* classes (tool, calculator, method cards, chart, print sheet)
   the page reuses. Driven by js/bangle-size.js. Uses the design tokens from
   css/styles.css; adds none of its own.
   ========================================================================== */

/* Step 2 stage: a bangle is wider than most phone screens, so use the full
   width there; the circle is clipped at the sides and lined up top and bottom. */
.bs-phone-note { margin-top: 0.6rem; }
@media (max-width: 599px) {
  .bs-stage { margin-inline: calc(-1 * var(--gutter)); border-inline: 0; }
}

/* Result: size + inches */
.rs-sizes.bs-sizes { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 26rem; }
.bs-flag {
  max-width: 46rem; margin-top: 0.9rem;
  padding: 0.7rem 0.9rem;
  border-left: 3px solid var(--gold);
  background: var(--paper-warm);
  color: var(--ink-2); font-size: 1rem; line-height: 1.6;
}

/* ---- Bangle size circles (#circles) ------------------------------------
   One drawing of eight circles inside each other, 80 mm across. On screen it
   is 80 x var(--bs-mm) wide: js/bangle-size.js sets --bs-mm to this screen's
   pixels per mm, so it is real size once the screen is set up (shrunk to fit
   on screens narrower than that). Without JavaScript it uses the browser's
   1mm. Printed, it is always 80 mm. */
.bs-circles { --bs-mm: 1mm; display: grid; gap: 1.2rem 2rem; margin-top: clamp(1.4rem, 3vw, 2rem); }
.bs-svg { display: block; width: min(100%, calc(80 * var(--bs-mm))); height: auto; aspect-ratio: 1; justify-self: center; }
@media (min-width: 760px) {
  /* The drawing's column grows to 80 mm when there is room, and shrinks when there isn't. */
  .bs-circles { grid-template-columns: minmax(0, calc(80 * var(--bs-mm))) minmax(12rem, 18rem); align-items: center; justify-content: start; }
  .bs-svg { width: 100%; }
}
.bs-cross { fill: none; stroke: var(--ink-2); stroke-width: 0.25; }
.bs-ring circle { fill: none; stroke: var(--ink-2); stroke-width: 0.25; }
.bs-ring text {
  font-family: var(--font-body); font-size: 2.8px; font-weight: 700;
  fill: var(--ink); text-anchor: middle; dominant-baseline: central;
  paint-order: stroke; stroke: #FFFFFF; stroke-width: 1px; stroke-linejoin: round;
}
.bs-ring.is-match circle { stroke: var(--gold-ink); stroke-width: 0.7; }
.bs-ring.is-match text { fill: var(--gold-ink); }

/* Key beside the drawing: size, inside diameter, inches */
.bs-key { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.3rem 0.6rem; margin: 0; padding: 0; list-style: none; }
@media (min-width: 760px) { .bs-key { grid-template-columns: 1fr; } }
.bs-key li {
  display: flex; align-items: baseline; gap: 0.6rem;
  padding: 0.35rem 0.6rem;
  border: 1px solid transparent;
  font-size: 0.95rem; line-height: 1.4; color: var(--ink-2);
  white-space: nowrap;
}
.bs-key b { min-width: 2.4rem; font-size: 1.05rem; color: var(--ink); }
.bs-key li.is-match { background: var(--champagne); border-color: var(--gold-ink); color: var(--ink); }

@media print {
  .bs-circles { --bs-mm: 1mm !important; grid-template-columns: 80mm auto; align-items: center; gap: 0 8mm; margin-top: 5mm; }
  .bs-svg { width: 80mm; justify-self: start; }
  .bs-cross, .bs-ring circle, .bs-ring.is-match circle { stroke: #000; stroke-width: 0.25; }
  .bs-ring text, .bs-ring.is-match text { fill: #000; }
  .bs-key { grid-template-columns: 1fr; gap: 1mm; }
  .bs-key li { padding: 0; border: 0 !important; background: none !important; font-size: 9pt; color: #000; }
  .bs-key b { min-width: 9mm; font-size: 10pt; }
}