/* assets/rarnti.css */
.nr-rarnti {
  --rar-bg: var(--wp--preset--color--base, #fff);
  --rar-surface: color-mix(in oklab, var(--rar-bg), black 6%);
  --rar-text: var(--wp--preset--color--contrast, inherit);
  --rar-muted: color-mix(in oklab, var(--rar-text), transparent 55%);
  --rar-primary: var(--wp--preset--color--primary, #0a66c2);
  --rar-border: color-mix(in oklab, var(--rar-text), transparent 80%);
  color: var(--rar-text);
}

.nr-rarnti__title { margin: 0 0 .5rem 0; font-weight: 600; }
.nr-rarnti__intro { margin: 0 0 1rem 0; color: var(--rar-muted); }

.nr-rarnti__grid { display: grid; grid-template-columns: 1fr; gap: 1rem; }
@media (min-width: 768px){ .nr-rarnti__grid { grid-template-columns: 1fr 1fr; } }

.nr-rarnti__card { background: var(--rar-surface); border: 1px solid var(--rar-border); border-radius: 8px; padding: 1rem; }
.nr-rarnti__card-title { margin: 0 0 .6rem 0; font-weight: 600; }

.nr-rarnti__label { display: block; margin: .6rem 0; font-size: .95em; }
.nr-rarnti__label small { display: block; color: var(--rar-muted); margin-top: .25rem; }

.nr-rarnti__input { width: 100%; padding: .55rem .7rem; border: 1px solid var(--rar-border); border-radius: 6px; background: var(--rar-bg); color: inherit; font: inherit; box-sizing: border-box; }

.nr-rarnti__split { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }

.nr-rarnti__actions { display: flex; gap: .6rem; margin-top: .6rem; flex-wrap: wrap; }

.nr-rarnti__btn { appearance: none; border: 1px solid var(--rar-primary); background: var(--rar-primary); color: #fff; padding: .5rem .9rem; border-radius: 6px; cursor: pointer; font: inherit; }
.nr-rarnti__btn--alt { background: transparent; color: var(--rar-primary); }
.nr-rarnti__btn--ghost { background: transparent; color: inherit; border-color: var(--rar-border); }

.nr-rarnti__result-row { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: .6rem; margin: .5rem 0; }
.nr-rarnti__result { display: inline-flex; align-items: center; gap: .5rem; }
.nr-rarnti__output { display: inline-block; min-width: 6ch; padding: .45rem .6rem; border: 1px dashed var(--rar-border); border-radius: 6px; background: var(--rar-bg); }

.nr-rarnti__details { margin-top: .6rem; color: var(--rar-muted); }

.nr-rarnti__error { color: #b00020; min-height: 1.25em; margin-top: .4rem; }

.nr-rarnti * { box-sizing: border-box; }