/* ==========================================================================
   legacy.css — primitives for the interactive buyer tools.
   Loaded only on pages that embed a tool. Restyles the original tool markup
   (nrv-* classes) to sit comfortably inside the magazine design.
   ========================================================================== */

:root {
	--nrv-charcoal: #14171c;
	--nrv-graphite: #1f2530;
	--nrv-slate: #3d4552;
	--nrv-red: #c2361b;
	--nrv-amber: #d98a00;
	--nrv-white: #f9fafb;
	--nrv-charcoal-2: #0f1216;
	--nrv-bg: #ffffff;
	--nrv-bg-soft: #f7f5f0;
	--nrv-card: #ffffff;
	--nrv-text: #14171c;
	--nrv-text-2: #5b6470;
	--nrv-font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
	--nrv-font-head: 'Source Serif 4', Georgia, serif;
	--nrv-radius: 8px;
	--nrv-radius-lg: 10px;
	--nrv-radius-sm: 6px;
	--nrv-shadow-sm: 0 1px 2px rgba(20, 23, 28, 0.06);
	--nrv-shadow: 0 1px 2px rgba(20, 23, 28, 0.06), 0 8px 22px rgba(20, 23, 28, 0.07);
	--nrv-shadow-lg: 0 1px 2px rgba(20, 23, 28, 0.06), 0 10px 28px rgba(20, 23, 28, 0.08);
	--nrv-glow: 0 0 0 2px #14171c;
	--nrv-gradient-warn: linear-gradient(135deg, #14171c, #343a44);
	--nrv-gradient-warm: linear-gradient(135deg, #343a44, #14171c);
	--nrv-gradient-bg: linear-gradient(180deg, #14171c 0%, #1f2530 100%);
	--nrv-container: 1240px;
	--nrv-step-1: 0.9rem;
	--nrv-step-2: 1rem;
	--nrv-step-3: clamp(1.2rem, 1.1rem + 0.6vw, 1.4rem);
	--nrv-step-4: clamp(1.6rem, 1.3rem + 1.4vw, 2.2rem);
	--nrv-step-5: clamp(2rem, 1.6rem + 2vw, 3rem);
	--nrv-step-6: clamp(2.4rem, 1.9rem + 2.6vw, 3.6rem);
}

.nrv-container { max-width: var(--nrv-container); margin: 0 auto; padding: 0 18px; }
@media (min-width: 768px) { .nrv-container { padding: 0 28px; } }

/* Sections */
.nrv-section, .nrv-tool { padding: 40px 0; position: relative; }
.nrv-tool, .nrv-archetypes, .nrv-db { background: #fff !important; border-top: 1px solid #e3dfd6; }
.nrv-section__header { text-align: left; max-width: 760px; margin: 0 0 26px; }
.nrv-section__eyebrow { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 8px; padding: 0; background: none; border-radius: 0; color: var(--nrv-red); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; }
.nrv-section__eyebrow::before { content: ''; width: 14px; height: 3px; background: currentColor; }
.nrv-section__title { margin: 0 0 8px; font-size: var(--nrv-step-4); }
.nrv-section__sub { margin: 0; color: #343a44; font-size: 1.02rem; }

/* Buttons */
.nrv-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 10px 18px; border: 1.5px solid transparent; border-radius: 6px; font-family: var(--nrv-font-body); font-size: 0.95rem; font-weight: 600; line-height: 1.2; text-decoration: none; text-align: center; cursor: pointer; transition: background-color 0.15s ease, border-color 0.15s ease; }
.nrv-btn--primary { background: #14171c; color: #fff !important; border-color: #14171c; box-shadow: none; }
.nrv-btn--primary:hover { background: #2a303a; transform: none; box-shadow: none; }
.nrv-btn--primary[rel~='sponsored'] { background: #ffd24d; border-color: #e0b125; color: #14171c !important; }
.nrv-btn--primary[rel~='sponsored']:hover { background: #f5c22b; }
.nrv-btn--ghost { background: #fff; color: #14171c !important; border-color: #cfc9bd; }
.nrv-btn--ghost:hover { border-color: #14171c; background: #f7f5f0; }
.nrv-btn--lg { padding: 12px 22px; font-size: 1rem; }
.nrv-btn--sm { min-height: 40px; padding: 8px 12px; font-size: 0.875rem; }
.nrv-btn--block { width: 100%; }

/* Pills, chips, stats */
.nrv-pill { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; background: #efebe3; color: #343a44; font-size: 0.75rem; font-weight: 600; }
.nrv-pill--alt { background: #f8e9e4; color: #a12c15; }
.nrv-pill--amber { background: #fdf4e1; color: #8a5300; }
.nrv-pill--white { background: rgba(255, 255, 255, 0.16); color: #fff; }
.nrv-chip { padding: 10px 16px; border-radius: 999px; background: #fff; border: 1px solid #cfc9bd; color: #14171c; font-weight: 500; cursor: pointer; }
.nrv-chip:hover { border-color: #14171c; }
.nrv-chip.is-active { background: #14171c; color: #fff; border-color: #14171c; }
.nrv-stat { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; border-radius: 8px; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.12); }
.nrv-stat__value { font-family: var(--nrv-font-head); font-weight: 700; font-size: 1.4rem; }
.nrv-stat__label { font-size: 0.75rem; opacity: 0.85; text-transform: uppercase; letter-spacing: 0.06em; }
.nrv-stat--red .nrv-stat__value { color: #ff8a70; }
.nrv-stat--amber .nrv-stat__value { color: #ffc65c; }
.nrv-stat--white .nrv-stat__value { color: inherit; }

/* Fields */
.nrv-field { display: flex; flex-direction: column; gap: 6px; font-size: 0.92rem; font-weight: 600; color: #14171c; }
.nrv-field > span { font-weight: 600; }
.nrv-field input[type='number'], .nrv-field input[type='text'], .nrv-field input[type='email'], .nrv-field input[type='month'], .nrv-field select { width: 100%; min-height: 44px; margin-top: 6px; padding: 10px 12px; border: 1.5px solid #cfc9bd; border-radius: 6px; background: #fff; font: inherit; font-weight: 400; }
.nrv-field input[type='range'] { width: 100%; accent-color: #14171c; }
.nrv-field output { font-family: var(--nrv-font-head); font-weight: 700; color: var(--nrv-red); }

/* Buyer profiles ("archetypes") */
.nrv-archetype-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.nrv-archetype { position: relative; text-align: left; background: #fff; border: 1px solid #e3dfd6; border-radius: 8px; padding: 20px; cursor: pointer; font: inherit; color: #14171c; }
.nrv-archetype:hover { border-color: #14171c; }
.nrv-archetype[aria-pressed='true'] { border-color: #14171c; box-shadow: 0 0 0 2px #14171c; background: #f7f5f0; }
.nrv-archetype__icon { display: block; margin-bottom: 8px; font-size: 1.8rem; }
.nrv-archetype__name { margin: 0 0 8px; font-size: 1.15rem; }
.nrv-archetype__desc { margin: 0 0 12px; font-size: 0.9rem; line-height: 1.5; color: #343a44; }
.nrv-archetype__specs { list-style: none; margin: 0; padding: 0; font-size: 0.82rem; color: #5b6470; }
.nrv-archetype__specs li { margin-bottom: 4px; }
.nrv-archetype__cta { display: inline-block; margin-top: 10px; font-size: 0.85rem; font-weight: 600; text-decoration: underline; }
.nrv-archetype__continue { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 24px; padding: 14px 18px; background: #f7f5f0; border: 1px solid #e3dfd6; border-radius: 8px; }

/* Review index cards */
.nrv-db__name a { text-decoration: none; }
.nrv-db__name a:hover { text-decoration: underline; }
.nrv-db__card p { margin: 0; font-size: 0.92rem; color: #343a44; }
.nrv-db__empty { padding: 26px; border: 1px dashed #cfc9bd; border-radius: 8px; background: #f7f5f0; text-align: center; color: #343a44; }

/* A page that holds a single tool already shows its name as the page title */
.nr-page--onetool .nrv-section__title, .nr-page--onetool .nrv-section__eyebrow { display: none; }
.nr-page--onetool .nrv-section__sub { font-size: 1.1rem; }
.nr-page--onetool .nrv-tool, .nr-page--onetool .nrv-section { border-top: 0; padding-top: 28px; }

/* Keep the tool page from scrolling sideways on small screens */
.nr-has-tool .nr-page__tool { overflow-x: clip; }
.nr-has-tool .nr-page__tool > p, .nr-has-tool .nr-page__tool > h2, .nr-has-tool .nr-page__tool > h3 { max-width: 1240px; margin-left: auto; margin-right: auto; padding-left: 18px; padding-right: 18px; }
@media (min-width: 768px) {
	.nr-has-tool .nr-page__tool > p, .nr-has-tool .nr-page__tool > h2, .nr-has-tool .nr-page__tool > h3 { padding-left: 28px; padding-right: 28px; }
}
.nr-has-tool .nr-page__tool > h3 { margin-top: 34px; margin-bottom: 0; font-size: 1.1rem; font-family: 'Inter', system-ui, sans-serif; color: #5b6470; }

/* Small phones: stop wide tool rows from forcing the page sideways */
.nrv-tool *, .nrv-section * { min-width: 0; }
@media (max-width: 480px) {
	.nrv-prioritizer__row { grid-template-columns: minmax(0, 1fr) 40px; }
	.nrv-prioritizer__row input[type='range'] { grid-column: 1 / -1; grid-row: 2; }
	.nrv-quiz__shell, .nrv-calc__shell, .nrv-tracker__shell, .nrv-prioritizer__sliders, .nrv-viz__controls, .nrv-utility__form { padding: 18px; }
	.nrv-viz__bar, .nrv-hero__meter-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) auto; }
}