/* Rianerurkar soft UI. Every value comes from tokens.css. */
body { margin: 0; background: var(--surface); color: var(--text); font-family: var(--font-sans); font-size: 16px; line-height: 26px; -webkit-font-smoothing: antialiased; }
.rn-stage { padding: var(--space-5); display: flex; flex-wrap: wrap; gap: var(--space-5); align-items: center; }
.rn-stage--col { flex-direction: column; align-items: stretch; max-width: 420px; }
.rn-grain { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .24 0 0 0 0 .15 0 0 0 0 .11 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.rn-eyebrow { margin: 0; font-family: var(--font-label); font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--text-muted); }
.rn-focusable:focus-visible, .rn-btn:focus-visible, .rn-seg__opt:focus-visible, .rn-tabs__tab:focus-visible, .rn-switch__track:focus-visible { outline: 2px solid transparent; box-shadow: var(--focus-ring); }

/* Button */
.rn-btn { font: inherit; font-family: var(--font-sans); font-weight: 600; font-size: 15px; line-height: 20px; height: 44px; padding: 0 var(--space-5); border-radius: var(--radius-full); border: 1px solid var(--edge); background: var(--surface); color: var(--text); box-shadow: var(--shadow-raised-sm); cursor: pointer; transition: box-shadow .18s ease, transform .18s ease; }
.rn-btn:hover { box-shadow: var(--shadow-raised-md); }
.rn-btn:active { box-shadow: var(--shadow-inset); transform: translateY(1px); }
.rn-btn--primary { background: var(--action); border-color: var(--action); color: var(--on-action); }
.rn-btn--quiet { background: transparent; border-color: transparent; box-shadow: none; text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; padding: 0 var(--space-3); }
.rn-btn--quiet:hover { box-shadow: none; text-decoration-thickness: 2px; }
.rn-btn--quiet:active { box-shadow: none; }
.rn-btn--sm { height: 36px; font-size: 14px; padding: 0 var(--space-4); }
.rn-btn:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; }

/* Card */
.rn-card { background: var(--surface); color: var(--text); border-radius: var(--radius-lg); padding: var(--space-5); box-shadow: var(--shadow-raised-md); max-width: 360px; box-sizing: border-box; }
.rn-card--inset { background: var(--surface-sunken); box-shadow: var(--shadow-inset); }
.rn-card--blush { background: var(--panel); color: var(--text-on-panel); }
.rn-card--blush .rn-eyebrow { color: var(--text-on-panel); }
.rn-card__title { margin: var(--space-2) 0 var(--space-2); font-family: var(--font-serif); font-weight: 400; font-size: 26px; line-height: 32px; }
.rn-card__body { font-size: 14px; line-height: 22px; }
.rn-card__body > :first-child { margin-top: 0; } .rn-card__body > :last-child { margin-bottom: 0; }

/* Segmented control */
.rn-seg { display: inline-flex; gap: var(--space-1); padding: var(--space-1); border-radius: var(--radius-full); background: var(--surface-sunken); box-shadow: var(--shadow-inset); border: 1px solid var(--edge); }
.rn-seg__opt { font: inherit; font-family: var(--font-sans); font-size: 14px; font-weight: 500; height: 36px; padding: 0 var(--space-4); border-radius: var(--radius-full); border: 1px solid transparent; background: transparent; color: var(--text-muted); cursor: pointer; transition: box-shadow .18s ease, background .18s ease; }
.rn-seg__opt[aria-checked="true"] { background: var(--accent); color: var(--on-accent); font-weight: 700; border-color: var(--edge); box-shadow: var(--shadow-raised-sm); }

/* Tabs */
.rn-tabs__list { display: inline-flex; gap: var(--space-1); padding: var(--space-1); border-radius: var(--radius-md); background: var(--surface-sunken); box-shadow: var(--shadow-inset); border: 1px solid var(--edge); }
.rn-tabs__tab { font: inherit; font-family: var(--font-sans); font-size: 14px; font-weight: 500; height: 36px; padding: 0 var(--space-4); border-radius: var(--radius-sm); border: 1px solid transparent; background: transparent; color: var(--text-muted); cursor: pointer; }
.rn-tabs__tab[aria-selected="true"] { background: var(--surface); color: var(--text); font-weight: 700; border-color: var(--edge); box-shadow: var(--shadow-raised-sm); }
.rn-tabs__panel { padding: var(--space-4) var(--space-1) 0; font-size: 14px; line-height: 22px; color: var(--text); }

/* Switch */
.rn-switch { display: inline-flex; align-items: center; gap: var(--space-3); font-size: 15px; color: var(--text); }
.rn-switch__track { position: relative; width: 56px; height: 32px; flex: none; padding: 0; border-radius: var(--radius-full); border: 1px solid var(--edge); background: var(--surface-sunken); box-shadow: var(--shadow-inset); cursor: pointer; transition: background .2s ease; }
.rn-switch__thumb { position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: var(--radius-full); background: var(--surface); border: 1px solid var(--edge); box-sizing: border-box; box-shadow: var(--shadow-raised-sm); transition: transform .2s ease; }
.rn-switch__track[aria-checked="true"] { background: var(--action); border-color: var(--action); box-shadow: none; }
.rn-switch__track[aria-checked="true"] .rn-switch__thumb { transform: translateX(24px); background: var(--on-action); border-color: var(--on-action); }

/* Slider */
.rn-slider { display: grid; gap: var(--space-2); min-width: 260px; }
.rn-slider__head { display: flex; justify-content: space-between; align-items: baseline; font-size: 14px; }
.rn-slider__head output { font-family: var(--font-label); font-size: 12px; font-weight: 600; letter-spacing: .12em; color: var(--text-muted); }
.rn-slider input { -webkit-appearance: none; appearance: none; width: 100%; height: 12px; margin: 8px 0; border-radius: var(--radius-full); border: 1px solid var(--edge); box-shadow: var(--shadow-inset); background: linear-gradient(to right, var(--action) 0 var(--rn-fill, 50%), var(--surface-sunken) var(--rn-fill, 50%) 100%); cursor: pointer; }
.rn-slider input::-webkit-slider-thumb { -webkit-appearance: none; width: 26px; height: 26px; border-radius: 50%; background: var(--surface); border: 1px solid var(--edge); box-shadow: var(--shadow-raised-sm); }
.rn-slider input::-moz-range-thumb { width: 26px; height: 26px; border-radius: 50%; background: var(--surface); border: 1px solid var(--edge); box-shadow: var(--shadow-raised-sm); }
.rn-slider input:focus-visible { outline: 2px solid transparent; }
.rn-slider input:focus-visible::-webkit-slider-thumb { box-shadow: var(--focus-ring); }
.rn-slider input:focus-visible::-moz-range-thumb { box-shadow: var(--focus-ring); }

/* Evidence label */
.rn-ev { display: inline-flex; align-items: center; gap: var(--space-2); height: 26px; padding: 0 var(--space-3); border-radius: var(--radius-full); font-family: var(--font-label); font-size: 11px; line-height: 14px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; white-space: nowrap; }
.rn-ev__mark { width: 8px; height: 8px; border-radius: 50%; box-sizing: border-box; flex: none; }
.rn-ev--proven { background: var(--action); color: var(--on-action); border: 1px solid var(--action); }
.rn-ev--proven .rn-ev__mark { background: var(--on-action); }
.rn-ev--assumption { background: transparent; color: var(--text-muted); border: 1px dashed var(--edge); }
.rn-ev--assumption .rn-ev__mark { border: 1.5px solid var(--text-muted); }

@media (prefers-reduced-motion: reduce) { .rn-btn, .rn-seg__opt, .rn-switch__track, .rn-switch__thumb { transition: none; } }