/* Ring Size Converter — restrained Ralph Jacobs identity, self-contained. */
:root {
  --rj-ivory: #f6f3ec;
  --rj-paper: #fffdf8;
  --rj-ink: #22271f;
  --rj-muted: #5c6157;
  --rj-green: #1f3d2f;
  --rj-green-soft: #2c5340;
  --rj-russet: #8a4b32;
  --rj-line: #d9d3c6;
  --rj-focus: #1f3d2f;
  --rj-radius: 8px;
  --rj-space: 1rem;
  --rj-font: ui-serif, Georgia, "Times New Roman", serif;
  --rj-sans: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--rj-ivory);
  color: var(--rj-ink);
  font-family: var(--rj-sans);
  line-height: 1.5;
}
.rs {
  max-width: 44rem;
  margin: 0 auto;
  padding: clamp(1rem, 2vw, 2rem);
}
.rs__title { font-family: var(--rj-font); font-size: clamp(1.6rem, 4vw, 2.2rem); margin: 0 0 .25rem; color: var(--rj-green); }
.rs__standfirst { margin: 0 0 .5rem; font-size: 1.05rem; }
.rs__caution { margin: .25rem 0 1.25rem; color: var(--rj-russet); font-weight: 600; }
.rs__h2 { font-family: var(--rj-font); font-size: 1.2rem; color: var(--rj-green); margin: 1.5rem 0 .5rem; }
.rs__muted { color: var(--rj-muted); font-size: .9rem; }
.rs__hint { color: var(--rj-muted); font-size: .85rem; margin: .35rem 0 0; }

/* Mode toggle — selection shown by fill + border + weight, never colour alone. */
.rs__modes { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.25rem; }
.rs__mode {
  flex: 1 1 12rem;
  padding: .7rem 1rem;
  font: inherit;
  background: var(--rj-paper);
  border: 2px solid var(--rj-line);
  border-radius: var(--rj-radius);
  cursor: pointer;
  color: var(--rj-ink);
}
.rs__mode[aria-pressed="true"] {
  background: var(--rj-green);
  border-color: var(--rj-green);
  color: #fff;
  font-weight: 700;
}

.rs__panel { background: var(--rj-paper); border: 1px solid var(--rj-line); border-radius: var(--rj-radius); padding: var(--rj-space); }
.rs__field { margin-bottom: 1rem; }
.rs__label { display: block; font-weight: 600; margin-bottom: .35rem; }
.rs__control {
  width: 100%;
  padding: .6rem .7rem;
  font: inherit;
  color: var(--rj-ink);
  background: #fff;
  border: 1px solid var(--rj-line);
  border-radius: var(--rj-radius);
}
.rs__fieldset { border: 1px solid var(--rj-line); border-radius: var(--rj-radius); padding: .75rem; margin: 0 0 1rem; }
.rs__radios { display: flex; flex-wrap: wrap; gap: 1rem; }
.rs__radios--stack { flex-direction: column; gap: .5rem; }
.rs__radio { display: flex; gap: .5rem; align-items: baseline; }
.rs__actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .5rem; }
.rs__btn { padding: .65rem 1.1rem; font: inherit; border-radius: var(--rj-radius); cursor: pointer; border: 2px solid transparent; }
.rs__btn--primary { background: var(--rj-green); color: #fff; border-color: var(--rj-green); font-weight: 700; }
.rs__btn--secondary { background: transparent; color: var(--rj-green); border-color: var(--rj-line); }
.rs__btn:disabled { opacity: .5; cursor: not-allowed; }

/* Result */
.rs__result { margin-top: 1.25rem; }
.rs__prompt { background: var(--rj-paper); border: 1px dashed var(--rj-line); border-radius: var(--rj-radius); padding: 1rem; color: var(--rj-muted); }
.rs__card { background: var(--rj-paper); border: 1px solid var(--rj-line); border-left: 4px solid var(--rj-green); border-radius: var(--rj-radius); padding: 1rem 1.15rem; }
.rs__answer { font-family: var(--rj-font); font-size: 1.5rem; color: var(--rj-green); margin: 0 0 .5rem; }
.rs__facts { margin: .25rem 0; padding: 0; list-style: none; }
.rs__facts li { padding: .15rem 0; border-bottom: 1px solid var(--rj-line); }
.rs__facts li:last-child { border-bottom: 0; }
.rs__tag { display: inline-block; font-size: .75rem; color: var(--rj-muted); text-transform: uppercase; letter-spacing: .04em; }
.rs__error { background: #fbeee9; border: 1px solid var(--rj-russet); border-radius: var(--rj-radius); padding: .8rem 1rem; color: #7a3a25; }

/* Nearby + chart tables */
.rs__tablewrap { overflow-x: auto; }
.rs__table { border-collapse: collapse; width: 100%; font-size: .92rem; }
.rs__table th, .rs__table td { text-align: left; padding: .4rem .6rem; border-bottom: 1px solid var(--rj-line); white-space: nowrap; }
.rs__table thead th { color: var(--rj-green); }
.rs__row-current td { font-weight: 700; }
.rs__row-current th[scope="row"]::before, .rs__row-current td:first-child::before { content: "◆ "; color: var(--rj-green); }

details { margin-top: 1.25rem; background: var(--rj-paper); border: 1px solid var(--rj-line); border-radius: var(--rj-radius); padding: .5rem .9rem; }
summary { cursor: pointer; font-weight: 600; color: var(--rj-green); padding: .35rem 0; }
.rs__list { margin: .25rem 0; padding-left: 1.2rem; }
.rs__list li { margin: .3rem 0; }
.rs__foot { margin-top: 1.5rem; border-top: 1px solid var(--rj-line); padding-top: .75rem; }

/* Visible focus for keyboard users (never removed). */
:focus-visible { outline: 3px solid var(--rj-focus); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }
@media (prefers-color-scheme: dark) {
  :root {
    --rj-ivory: #17190f; --rj-paper: #20231a; --rj-ink: #eceadd; --rj-muted: #a9ad9d;
    --rj-green: #8fd0ad; --rj-green-soft: #7bbf9b; --rj-russet: #e0a184; --rj-line: #3a3d31; --rj-focus: #8fd0ad;
  }
  .rs__mode[aria-pressed="true"], .rs__btn--primary { color: #12140c; }
}
/* Forced-colors: rely on system colours, keep borders. */
@media (forced-colors: active) {
  .rs__mode, .rs__btn, .rs__control, .rs__card, .rs__panel { border: 1px solid ButtonText; }
}