/* Base components. Import after fonts.css and tokens.css. Class names use the rd- prefix. */
.rd-body{background:var(--rd-bg);color:var(--rd-ink);font-family:var(--rd-font-sans);font-size:var(--rd-text-body);line-height:1.6;-webkit-font-smoothing:antialiased}
.rd-body *{box-sizing:border-box}
.rd-serif{font-family:var(--rd-font-serif);font-weight:400;letter-spacing:-0.015em}
.rd-serif em,.rd-accent-word{font-style:italic;color:var(--rd-accent)}   /* one italic word per headline carries the light */
.rd-mono{font-family:var(--rd-font-mono)}
.rd-eyebrow{font:500 12.5px var(--rd-font-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--rd-muted)}
.rd-wrap{max-width:var(--rd-container);margin:0 auto;padding:0 var(--rd-gutter)}
@media (max-width:820px){.rd-wrap{padding:0 var(--rd-gutter-s)}}

.rd-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;white-space:nowrap;min-height:50px;padding:0 24px;border-radius:var(--rd-radius-pill);font:600 16px var(--rd-font-sans);text-decoration:none;cursor:pointer;border:1.5px solid transparent}
.rd-btn-primary{background:var(--rd-cta);color:var(--rd-cta-ink)}
.rd-btn-primary:hover{filter:brightness(1.08)}
.rd-btn-ghost{background:transparent;color:var(--rd-ink);border-color:var(--rd-line)}
.rd-btn-ghost:hover{border-color:var(--rd-ink)}
.rd-btn-lg{min-height:58px;padding:0 34px;font-size:18px}
:where(a,button,input,summary,select,textarea):focus-visible{outline:var(--rd-focus);outline-offset:3px}

.rd-card{background:var(--rd-surface);border:1px solid var(--rd-line);border-radius:var(--rd-radius-card)}

.rd-badge{display:inline-flex;align-items:center;gap:6px;padding:3px 11px;border-radius:var(--rd-radius-pill);font:600 13px var(--rd-font-sans);white-space:nowrap}
.rd-badge--valid{background:var(--rd-valid-bg);color:var(--rd-valid)}
.rd-badge--fixed{background:var(--rd-fixed-bg);color:var(--rd-fixed)}
.rd-badge--amb{background:var(--rd-amb-bg);color:var(--rd-amb)}
.rd-badge--bad{background:var(--rd-bad-bg);color:var(--rd-bad)}

.rd-field label{display:block;font:500 13px var(--rd-font-sans);color:var(--rd-muted);margin-bottom:6px}
.rd-field input{width:100%;min-height:50px;padding:0 14px;border-radius:var(--rd-radius-field);border:1.5px solid var(--rd-line);background:var(--rd-bg-2);color:var(--rd-ink);font:500 16px var(--rd-font-sans)}

/* Country plate. status: live (lit) or planned (dashed, dark). Use the ISO 3166-1 alpha-2 code. */
.rd-plate{display:inline-flex;align-items:center;justify-content:center;min-width:44px;padding:6px 12px;border:1.5px solid var(--rd-accent);border-radius:var(--rd-radius-plate);background:color-mix(in srgb,var(--rd-glow) 45%,transparent);font:500 20px var(--rd-font-mono);color:var(--rd-ink)}
.rd-plate--planned{border:1.5px dashed var(--rd-line);background:transparent;color:var(--rd-faint)}
.rd-plate--sm{font-size:14px;padding:4px 9px}
.rd-plate--selected{background:var(--rd-surface-2)}

/* --- Added in the repo (not in the handoff): helpers the apps share --- */
.rd-lockup,.rd-symbol{color:var(--rd-ink);display:block}
.rd-icon-btn{display:inline-flex;align-items:center;justify-content:center;width:var(--rd-tap);height:var(--rd-tap);border-radius:var(--rd-radius-pill);border:1.5px solid var(--rd-line);background:transparent;color:var(--rd-ink);cursor:pointer}
.rd-icon-btn:hover{border-color:var(--rd-ink)}
.rd-icon-btn{padding:0}
.rd-icon-btn svg{display:block}
/* Both wrappers flex, so the sun (dark) centres like the moon (light) instead of sitting on the text baseline. */
:root .rd-only-dark{display:inline-flex}
:root .rd-only-light{display:none}
:root[data-theme="light"] .rd-only-light{display:inline-flex}
:root[data-theme="light"] .rd-only-dark{display:none}
.rd-skip{position:absolute;left:-9999px;top:8px;z-index:100;background:var(--rd-cta);color:var(--rd-cta-ink);padding:10px 16px;border-radius:var(--rd-radius-pill);font-weight:600}
.rd-skip:focus{left:8px}
.rd-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}