/* ============================================================================
   WhatWeWant.com — design system
   Hand-written, standalone. No Bootstrap, no CSS framework, no build step.
   Fonts: Instrument Serif (display) + DM Sans (body/UI), loaded in _Layout.
   ========================================================================== */

/* ---------------------------------------------------------------- tokens -- */

:root {
    --ww-ink: #0f1729;
    --ww-paper: #fafaf8;
    --ww-surface-1: #f3f2ee;
    --ww-surface-2: #eae8e3;
    --ww-border: #d6d3cc;
    --ww-border-strong: #b0ada6;

    --ww-text: #1b2838;
    --ww-text-secondary: #5a6170;
    --ww-text-muted: #8892a0;

    --ww-accent: #0d8f6a;
    --ww-accent-dark: #07694e;
    --ww-accent-bg: rgba(13, 143, 106, 0.10);
    --ww-accent-text: #07694e;

    --ww-caution: #c67030;
    --ww-caution-bg: rgba(198, 112, 48, 0.08);
    --ww-caution-text: #9a5a20;

    --ww-danger: #b83c3c;
    --ww-danger-bg: rgba(184, 60, 60, 0.08);

    --ww-serif: 'Instrument Serif', Georgia, 'Times New Roman', serif;
    --ww-sans: 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

/* ------------------------------------------------------------------ base -- */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
}

body.ww-body {
    margin: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    font-family: var(--ww-sans);
    font-size: 17px;
    line-height: 1.55;
    color: var(--ww-text);
    background: var(--ww-paper);
    -webkit-font-smoothing: antialiased;
}

body.ww-body > main {
    flex: 1 0 auto;
}

h1, h2, h3, h4 {
    font-family: var(--ww-serif);
    font-weight: 400;
    letter-spacing: -0.015em;
    line-height: 1.2;
    margin: 0 0 12px;
    color: var(--ww-text);
}

h1 { font-size: 2.5rem; }
h2 { font-size: 1.9375rem; }
h3 { font-size: 1.375rem; }

p {
    margin: 0 0 16px;
}

a {
    color: var(--ww-accent-text);
    text-decoration: none;
    transition: all 0.15s ease;
}

a:hover {
    color: var(--ww-accent-dark);
    text-decoration: underline;
}

strong {
    font-weight: 600;
}

code {
    font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace;
    font-size: 0.875em;
    background: var(--ww-surface-2);
    border-radius: 4px;
    padding: 1px 5px;
}

img {
    max-width: 100%;
}

/* ---------------------------------------------------------------- layout -- */

.ww-container {
    max-width: 960px;
    margin: 0 auto;
    padding: 0 32px;
}

/* Inner-page top padding (the landing hero supplies its own). */
.ww-page {
    padding: 40px 32px 64px;
}

.ww-page__head {
    margin-bottom: 28px;
}

.ww-page__head h1,
.ww-page__head h2 {
    margin-bottom: 6px;
}

.ww-lede {
    font-size: 17px;
    color: var(--ww-text-secondary);
    max-width: 620px;
}

.ww-muted {
    color: var(--ww-text-muted);
}

.ww-section {
    padding: 56px 32px;
}

.ww-section--tint {
    background: var(--ww-surface-1);
    border-top: 1px solid var(--ww-border);
    border-bottom: 1px solid var(--ww-border);
}

.ww-section__head {
    text-align: center;
    max-width: 560px;
    margin: 0 auto 36px;
}

.ww-section__head h2 {
    font-size: 2.125rem;
    margin-bottom: 8px;
}

.ww-section__head p {
    font-size: 16px;
    color: var(--ww-text-secondary);
    margin: 0;
}

/* ------------------------------------------------------------------ logo -- */

.ww-logo {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
}

.ww-logo:hover {
    text-decoration: none;
}

.ww-logo__icon {
    width: 30px;
    height: 30px;
    display: block;
}

.ww-logo__text {
    font-family: var(--ww-serif);
    font-size: 23px;
    letter-spacing: -0.02em;
    color: var(--ww-text);
    line-height: 1;
}

.ww-logo__text em {
    font-style: normal;
    color: var(--ww-accent);
}

.ww-logo--on-dark .ww-logo__text {
    color: #fff;
}

.ww-logo--lg .ww-logo__icon {
    width: 44px;
    height: 44px;
}

.ww-logo--lg .ww-logo__text {
    font-size: 33px;
}

/* ------------------------------------------------------------------- nav -- */

.ww-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    padding: 16px 32px;
    max-width: 960px;
    margin: 0 auto;
    min-height: 64px;
    border-bottom: 1px solid var(--ww-border);
}

.ww-nav__links {
    display: flex;
    align-items: center;
    gap: 24px;
    /* Lets the row shrink below its content width so a long account email
       truncates instead of pushing the nav past the viewport. */
    min-width: 0;
}

.ww-nav__links a {
    font-size: 15px;
    font-weight: 500;
    color: var(--ww-text-secondary);
    text-decoration: none;
}

.ww-nav__links a:hover {
    color: var(--ww-text);
    text-decoration: none;
}

/* Who's signed in. Deliberately quieter than the nav links next to it — it's a
   status readout, not a destination. Truncates rather than wrapping so a long
   address can't push the nav wider than the viewport. */
.ww-nav__account {
    font-size: 13px;
    font-weight: 400;
    color: var(--ww-text-muted);
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

/* The signed-in admin nav carries one item more than the row was sized for, and .ww-nav is
   capped at 960px — so without this the flex row shrinks every link below its own text width
   and each one wraps to a second line (measured: nav 64px -> 79.5px, links 23.25px -> 46.5px).
   Holding the links at their natural width makes the account email absorb the squeeze instead,
   which is what it is already built to do: it has min-width: 0 and truncates with an ellipsis.
   Scoped to the modifier so the nav every public page renders is untouched. */
.ww-nav__links--admin > a {
    flex: none;
}

/* Dark variant, used inside the landing hero. */
.ww-nav--dark {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.ww-nav--dark .ww-nav__links a {
    color: rgba(255, 255, 255, 0.6);
}

.ww-nav--dark .ww-nav__links a:hover {
    color: #fff;
}

.ww-nav--dark .ww-nav__account {
    color: rgba(255, 255, 255, 0.45);
}

/* ------------------------------------------------------------------ hero -- */

.ww-hero {
    background: var(--ww-ink);
    color: #fff;
}

.ww-hero__inner {
    padding: 56px 32px 48px;
    text-align: center;
    max-width: 960px;
    margin: 0 auto;
}

.ww-hero h1 {
    font-size: 2.875rem;
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: #fff;
    margin: 0 0 16px;
}

.ww-hero__sub {
    font-size: 1.125rem;
    color: rgba(255, 255, 255, 0.6);
    max-width: 540px;
    margin: 0 auto 32px;
}

.ww-hero__search {
    display: flex;
    justify-content: center;
    max-width: 560px;
    margin: 0 auto;
}

.ww-hero__search input {
    flex: 1 1 auto;
    min-width: 0;
    font-family: var(--ww-sans);
    font-size: 16px;
    padding: 14px 20px;
    border: none;
    border-radius: 10px 0 0 10px;
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    transition: all 0.15s ease;
}

.ww-hero__search input::placeholder {
    color: rgba(255, 255, 255, 0.3);
}

.ww-hero__search input:focus {
    outline: none;
    background: rgba(255, 255, 255, 0.14);
}

.ww-hero__search button {
    flex: 0 0 auto;
    font-family: var(--ww-sans);
    font-size: 16px;
    font-weight: 500;
    padding: 14px 28px;
    border: none;
    border-radius: 0 10px 10px 0;
    background: var(--ww-accent);
    color: #fff;
    cursor: pointer;
    transition: all 0.15s ease;
}

.ww-hero__search button:hover {
    background: var(--ww-accent-dark);
}

.ww-hero__note {
    font-size: 0.8125rem;
    color: rgba(255, 255, 255, 0.35);
    margin: 12px 0 0;
}

/* ------------------------------------------------------------ value prop -- */

.ww-values {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    max-width: 960px;
    margin: 0 auto;
}

.ww-value {
    text-align: left;
}

.ww-value__icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    margin-bottom: 14px;
}

.ww-value__icon--accent {
    background: var(--ww-accent-bg);
    color: var(--ww-accent-text);
    font-weight: 600;
}

.ww-value__icon--caution {
    background: var(--ww-caution-bg);
    color: var(--ww-caution-text);
}

.ww-value__icon--slate {
    background: rgba(27, 40, 56, 0.07);
    color: var(--ww-text-secondary);
}

.ww-value h3 {
    font-family: var(--ww-sans);
    font-size: 21px;
    font-weight: 600;
    letter-spacing: -0.01em;
    margin: 0 0 8px;
}

.ww-value p {
    font-size: 15px;
    line-height: 1.65;
    color: var(--ww-text-secondary);
    margin: 0;
}

/* --------------------------------------------------------- how it works -- */

.ww-how-steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
    max-width: 960px;
    margin: 0 auto;
}

.ww-step__num {
    font-family: var(--ww-serif);
    font-size: 33px;
    line-height: 1;
    color: var(--ww-accent);
    margin-bottom: 10px;
}

.ww-step h3 {
    font-family: var(--ww-sans);
    font-size: 19px;
    font-weight: 600;
    margin: 0 0 8px;
}

.ww-step p {
    font-size: 15px;
    line-height: 1.65;
    color: var(--ww-text-secondary);
    margin: 0;
}

/* ---------------------------------------------------------- verdict card -- */

.ww-verdict-card {
    background: #fff;
    border: 1px solid var(--ww-border);
    border-radius: 12px;
    padding: 24px 28px;
    max-width: 620px;
    margin: 0 auto;
    box-shadow: 0 1px 2px rgba(15, 23, 41, 0.04);
}

.ww-verdict-card__head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 4px;
}

.ww-verdict-card__title {
    font-size: 18px;
    font-weight: 600;
    margin: 0;
}

.ww-verdict-card__verdict {
    font-size: 15px;
    line-height: 1.65;
    color: var(--ww-text-secondary);
    margin: 0;
    padding-top: 16px;
    border-top: 1px solid var(--ww-border);
}

/* ------------------------------------------------------------- truth bar -- */
/* The signature element: 90-day range with a "current" dot and a target line.
   Marker positions come from inline --ww-pos custom properties (data-driven,
   so they can't live in the stylesheet). */

.ww-truth-bar-labels {
    display: flex;
    justify-content: space-between;
    font-size: 12.5px;
    color: var(--ww-text-muted);
}

.ww-truth-bar {
    position: relative;
    height: 8px;
    background: var(--ww-surface-2);
    border-radius: 4px;
    margin: 8px 0 44px;
}

.ww-truth-bar__current {
    position: absolute;
    top: 50%;
    left: var(--ww-pos, 50%);
    width: 16px;
    height: 16px;
    margin: -8px 0 0 -8px;
    border-radius: 50%;
    background: var(--ww-accent);
    border: 3px solid var(--ww-paper);
    box-shadow: 0 0 0 1px var(--ww-accent);
}

.ww-truth-bar__target {
    position: absolute;
    top: -5px;
    bottom: -5px;
    left: var(--ww-pos, 50%);
    width: 0;
    border-left: 2px dashed var(--ww-caution);
}

.ww-truth-bar__note {
    position: absolute;
    left: var(--ww-pos, 50%);
    transform: translateX(-50%);
    font-size: 11.5px;
    font-weight: 600;
    white-space: nowrap;
    /* Tight line box: these two notes are stacked 18px apart and would collide at the
       inherited body line-height. */
    line-height: 1.25;
}

/* Centered text overflows the card when its marker sits near either edge (e.g. target
   price == 90d low). Anchor to the near edge instead of centering past that point. */
.ww-truth-bar__note--start {
    transform: translateX(0);
}

.ww-truth-bar__note--end {
    transform: translateX(-100%);
}

.ww-truth-bar__note--current {
    top: 15px;
    color: var(--ww-accent-text);
}

.ww-truth-bar__note--target {
    top: 33px;
    color: var(--ww-caution-text);
}

/* When the now/target markers are far enough apart that their text won't collide, keep
   the target note on the same line as "now" instead of always dropping it a row down. */
.ww-truth-bar__note--target-level {
    top: 15px;
}

/* Compact variant used in dashboard rows. Bottom margin still has to clear the
   absolutely-positioned now/target notes below the bar (top: 15px/33px, unchanged
   from the full-size variant), not just the 6px bar itself. */
.ww-truth-bar--mini {
    height: 6px;
    margin: 10px 0 48px;
}

.ww-truth-bar--mini .ww-truth-bar__current {
    width: 12px;
    height: 12px;
    margin: -6px 0 0 -6px;
    border-width: 2px;
}

/* ------------------------------------------------------------ stats row -- */

.ww-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 28px;
    margin-bottom: 20px;
}

.ww-stat__label {
    display: block;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ww-text-muted);
    margin-bottom: 2px;
}

.ww-stat__value {
    font-size: 21px;
    font-weight: 600;
    letter-spacing: -0.01em;
}

.ww-stat__value--accent {
    color: var(--ww-accent);
}

/* --------------------------------------------------------------- badges -- */

.ww-badge {
    font-size: 12.5px;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 20px;
    display: inline-block;
    white-space: nowrap;
    line-height: 1.5;
}

.ww-badge--genuine,
.ww-badge--watching {
    background: var(--ww-accent-bg);
    color: var(--ww-accent-text);
}

.ww-badge--close {
    background: var(--ww-caution-bg);
    color: var(--ww-caution-text);
}

.ww-badge--neutral {
    background: var(--ww-surface-2);
    color: var(--ww-text-secondary);
}

.ww-badge--danger {
    background: var(--ww-danger-bg);
    color: var(--ww-danger);
}

/* -------------------------------------------------------------- buttons -- */

.ww-btn {
    font-family: var(--ww-sans);
    font-size: 15.5px;
    font-weight: 500;
    line-height: 1.4;
    padding: 10px 24px;
    border-radius: 8px;
    cursor: pointer;
    border: none;
    transition: all 0.15s ease;
    text-decoration: none;
    display: inline-block;
    text-align: center;
    /* Never wrap: a two-line button breaks the height match with the input it sits
       beside in .ww-field-group (visible at narrow widths). */
    white-space: nowrap;
}

.ww-btn:hover {
    text-decoration: none;
}

.ww-btn--primary {
    background: var(--ww-accent);
    color: #fff;
}

.ww-btn--primary:hover {
    background: var(--ww-accent-dark);
    color: #fff;
}

.ww-btn--secondary {
    background: transparent;
    color: var(--ww-text-secondary);
    border: 1px solid var(--ww-border);
}

.ww-btn--secondary:hover {
    border-color: var(--ww-border-strong);
    color: var(--ww-text);
}

.ww-btn--sm {
    font-size: 14px;
    padding: 7px 14px;
}

.ww-btn--block {
    display: block;
    width: 100%;
}

.ww-btn:focus-visible,
.ww-input:focus-visible,
a:focus-visible {
    outline: 2px solid var(--ww-accent);
    outline-offset: 2px;
}

/* ---------------------------------------------------------------- forms -- */

.ww-input {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid var(--ww-border);
    border-radius: 10px;
    font-size: 16px;
    font-family: var(--ww-sans);
    background: var(--ww-paper);
    color: var(--ww-text);
    transition: border-color 0.15s ease;
}

.ww-input:focus {
    outline: none;
    border-color: var(--ww-accent);
}

.ww-input::placeholder {
    color: var(--ww-text-muted);
}

.ww-label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ww-text-muted);
    margin-bottom: 6px;
}

/* Input with a leading "$" affix and an optional trailing button. */
.ww-field-group {
    display: flex;
    align-items: stretch;
    gap: 6px;
}

.ww-field-group .ww-input {
    flex: 1 1 auto;
    min-width: 0;
}

/* stretch, so the input matches the height of the button beside it. */
.ww-affix {
    display: flex;
    align-items: stretch;
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
}

.ww-affix__symbol {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 15px;
    color: var(--ww-text-muted);
    pointer-events: none;
}

.ww-affix .ww-input {
    padding-left: 26px;
}

.ww-radios {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 12px;
}

.ww-radio {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    color: var(--ww-text-secondary);
    cursor: pointer;
}

.ww-radio input[type="radio"] {
    accent-color: var(--ww-accent);
    margin: 0;
    width: 15px;
    height: 15px;
    flex: 0 0 auto;
}

.ww-field-error {
    display: block;
    font-size: 13.5px;
    color: var(--ww-danger);
    margin-top: 6px;
}

/* --------------------------------------------------------------- notices -- */

.ww-notice {
    border: 1px solid var(--ww-border);
    border-radius: 12px;
    padding: 14px 18px;
    font-size: 16px;
    background: var(--ww-surface-1);
    color: var(--ww-text-secondary);
}

.ww-notice p:last-child {
    margin-bottom: 0;
}

.ww-notice--success {
    background: var(--ww-accent-bg);
    border-color: rgba(13, 143, 106, 0.35);
    color: var(--ww-text);
}

.ww-notice--caution {
    background: var(--ww-caution-bg);
    border-color: rgba(198, 112, 48, 0.3);
    color: var(--ww-text);
}

.ww-notice--danger {
    background: var(--ww-danger-bg);
    border-color: rgba(184, 60, 60, 0.3);
    color: var(--ww-text);
}

.ww-notice--sm {
    font-size: 14px;
    padding: 9px 12px;
    border-radius: 10px;
}

.ww-notice__title {
    font-family: var(--ww-sans);
    font-size: 17px;
    font-weight: 600;
    margin: 0 0 6px;
}

/* ------------------------------------------------------------ candidates -- */

.ww-candidates {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 16px;
}

.ww-candidate {
    background: var(--ww-paper);
    border: 1px solid var(--ww-border);
    border-radius: 12px;
    padding: 16px 20px;
    margin-bottom: 12px;
    transition: border-color 0.15s ease;
    display: flex;
    flex-direction: column;
}

.ww-candidate:hover {
    border-color: var(--ww-border-strong);
}

.ww-candidate--selected {
    border-color: var(--ww-accent);
    border-width: 2px;
}

.ww-candidate__media {
    text-align: center;
    margin-bottom: 12px;
}

.ww-candidate__media img {
    max-height: 120px;
    width: auto;
}

.ww-candidate__head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 14px;
}

.ww-candidate__title {
    font-size: 16px;
    font-weight: 600;
    line-height: 1.4;
    margin: 0 0 4px;
}

.ww-candidate__meta {
    font-size: 12.5px;
    color: var(--ww-text-muted);
    margin: 0;
}

.ww-candidate__price {
    flex: 0 0 auto;
    text-align: right;
    font-size: 17px;
    font-weight: 600;
    white-space: nowrap;
}

/* Price + "Buy on Amazon" pill on one centred row at the top of the right-hand column, with the
   freshness timestamp keeping its own line beneath (see .ww-candidate__price .ww-price-asof,
   unchanged). Layout only — the pill reuses the shared .ww-status-pill* rules untouched.
   justify-content is explicit because a flex container ignores the column's text-align. */
.ww-candidate__price-line {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 10px;
}

.ww-candidate__stats {
    margin-bottom: 14px;
}

.ww-candidate__form {
    margin-top: auto;
}

.ww-candidate__actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ww-candidate__coach:not(:empty) {
    margin: 10px 0;
}

/* ------------------------------------------------------------- coaching -- */

.ww-coaching {
    border: 1px solid var(--ww-border);
    border-left: 3px solid var(--ww-text-muted);
    border-radius: 8px;
    background: var(--ww-surface-1);
    padding: 10px 12px;
    font-size: 14px;
    line-height: 1.5;
}

.ww-coaching--solid {
    border-left-color: var(--ww-accent);
    background: var(--ww-accent-bg);
}

.ww-coaching--caution {
    border-left-color: var(--ww-caution);
    background: var(--ww-caution-bg);
}

.ww-coaching__message {
    color: var(--ww-text);
    margin-bottom: 4px;
}

.ww-coaching__numbers {
    font-size: 12.5px;
    color: var(--ww-text-muted);
}

.ww-coaching__band {
    font-size: 13px;
    color: var(--ww-text-secondary);
    margin-top: 4px;
}

/* ------------------------------------------------------- check ("/Check") -- */
/* The free "Is this deal real?" checker. Reuses .ww-hero, .ww-verdict-card,
   .ww-truth-bar, .ww-stats, .ww-notice--* and .ww-btn--*; only the verdict box,
   the big price link, and the good-buy zone overlay are new. */

/* Slightly tighter than the landing hero — this page is a tool, not a pitch. */
.ww-hero--check .ww-hero__inner {
    padding: 44px 32px 40px;
}

/* Price + "Buy on Amazon" pill on one centred row. Layout only — the pill itself reuses the
   shared .ww-status-pill* rules untouched. The row carries the 16px bottom margin the price <p>
   used to own, so the freshness line beneath it lands in exactly the same place as before
   (see .ww-check-price-line + .ww-price-asof). Wraps rather than overflows on a narrow phone. */
.ww-check-price-line {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin: 0 0 16px;
}

.ww-check-price {
    font-size: 20px;
    font-weight: 700;
    margin: 0;
}

.ww-check-price a {
    color: var(--ww-accent);
}

.ww-verdict {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    border: 1px solid var(--ww-border);
    border-radius: 12px;
    padding: 14px 18px;
    margin-bottom: 20px;
}

.ww-verdict__icon {
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    font-weight: 700;
    line-height: 1;
}

.ww-verdict__title {
    font-size: 17px;
    font-weight: 600;
    color: var(--ww-text);
    margin: 0 0 4px;
}

.ww-verdict__text {
    font-size: 15px;
    line-height: 1.55;
    color: var(--ww-text-secondary);
    margin: 0;
}

.ww-verdict--good {
    background: var(--ww-accent-bg);
    border-color: rgba(13, 143, 106, 0.35);
}

.ww-verdict--good .ww-verdict__icon {
    background: var(--ww-accent);
    color: #fff;
}

.ww-verdict--bad {
    background: var(--ww-danger-bg);
    border-color: rgba(184, 60, 60, 0.3);
}

.ww-verdict--bad .ww-verdict__icon {
    background: var(--ww-danger);
    color: #fff;
}

/* No 90-day history to judge on — say so plainly rather than picking a side. */
.ww-verdict--neutral {
    background: #f3f4f6;
    border-color: var(--ww-border);
}

.ww-verdict--neutral .ww-verdict__icon {
    background: #6b7280;
    color: #fff;
}

.ww-check-nodata {
    margin-bottom: 20px;
}

/* The good-buy band drawn onto the truth bar: 90d low up to low x NearLowFactor. */
.ww-truth-bar__zone {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: var(--ww-zone-end, 0%);
    background: var(--ww-accent);
    opacity: 0.3;
    border-radius: 4px 0 0 4px;
}

/* Above the good-buy band: the marker and its note go coral, not accent green.
   These must stay after .ww-truth-bar__current / __note--current to win. */
.ww-truth-bar__current--bad {
    background: var(--ww-danger);
    box-shadow: 0 0 0 1px var(--ww-danger);
}

.ww-truth-bar__note--bad {
    color: var(--ww-danger);
}

.ww-check-legend {
    font-size: 13px;
    color: var(--ww-text-muted);
    margin: 0 0 20px;
}

.ww-check-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    padding-top: 20px;
    border-top: 1px solid var(--ww-border);
}

/* ----------------------------------------------------- price history chart -- */
/* Chart.js needs a positioned, explicitly-sized parent to be responsive against
   (maintainAspectRatio is off). No border or background — the chart sits inside
   whichever card already has them. */

.ww-price-chart {
    position: relative;
    width: 100%;
    height: 200px;
    margin-top: 0.75rem;
}

/* Chart.js writes the canvas size inline from the wrapper's measurements. If it ever
   measures stale (a resize it didn't observe), an oversized canvas must not be allowed
   to push the page sideways — a squashed chart beats a horizontally scrolling card. */
.ww-price-chart canvas {
    max-width: 100%;
}

/* Slightly taller on desktop for readability */
@media (min-width: 768px) {
    .ww-price-chart {
        height: 260px;
    }
}

/* Only visible once the chart is actually zoomed (toggled from ww-price-chart.js). */
.ww-price-chart__reset {
    position: absolute;
    top: 0;
    right: 0;
    padding: 2px 6px;
    border: 0;
    border-radius: 4px;
    background: rgba(250, 250, 248, 0.85);
    font-family: inherit;
    font-size: 11.5px;
    color: var(--ww-text-muted);
    cursor: pointer;
}

.ww-price-chart__reset:hover {
    color: var(--ww-text);
}

/* ------------------------------------------------------------ want rows -- */

.ww-want-row {
    background: var(--ww-paper);
    border: 1px solid var(--ww-border);
    border-radius: 12px;
    padding: 16px 20px;
    margin-bottom: 12px;
    transition: border-color 0.15s ease;
}

.ww-want-row:hover {
    border-color: var(--ww-border-strong);
}

.ww-want-row__title {
    font-size: 15px;
    font-weight: 500;
    color: var(--ww-text);
    line-height: 1.4;
    margin: 0 0 8px;
}

.ww-want-row__cancelled .ww-want-row__title {
    color: var(--ww-text-secondary);
}

.ww-want-row__price-line {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 4px 14px;
    margin-bottom: 8px;
}

.ww-want-row__price {
    font-size: 20px;
    font-weight: 500;
    color: var(--ww-text);
}

.ww-want-row__buy-link {
    font-size: 15px;
    color: var(--ww-accent);
    white-space: nowrap;
}

.ww-want-row__buy-link:hover {
    color: var(--ww-accent-dark);
}

.ww-want-row__meta {
    font-size: 13px;
    color: var(--ww-text-muted);
    margin: 0 0 12px;
}

.ww-want-row__meta strong {
    font-weight: 500;
    color: var(--ww-text);
}

/* --------------------------------------------------- wants dashboard -- */
/* The active My Wants list as a responsive card grid. Column count is decided by the
   browser from available width (no JS, no breakpoints); minmax(230px, 1fr) keeps a long
   title from pushing a column past the container. */

.ww-wants-head {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 4px 16px;
}

.ww-wants-head h2 {
    margin: 0;
}

/* margin-left:auto keeps the count right-aligned whether it sits on the heading's
   baseline or wraps to its own line on a narrow screen. */
.ww-wants-head__count {
    margin: 0 0 0 auto;
    font-size: 14px;
    white-space: nowrap;
}

.ww-wants-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 14px;
    margin-bottom: 8px;
}

.ww-wants-card {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--ww-paper);
    border: 1px solid var(--ww-border);
    border-radius: 12px;
    padding: 16px 18px;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

/* Lift on hover and keyboard focus (focus-within, since the focusable element is the trigger
   button inside the card) — visible against all three state colours, so buy/close get their own
   darker border rather than reusing the neutral --ww-border-strong. Box-shadow alone (no
   transform) is the reduced-motion-safe part of the lift; the translateY below is gated behind
   prefers-reduced-motion so nothing moves when that's set. */
.ww-wants-card:hover,
.ww-wants-card:focus-within {
    border-color: var(--ww-border-strong);
    box-shadow: 0 6px 16px rgba(15, 23, 41, 0.12);
}

.ww-wants-card--buy:hover,
.ww-wants-card--buy:focus-within {
    border-color: var(--ww-accent-dark);
}

.ww-wants-card--close:hover,
.ww-wants-card--close:focus-within {
    border-color: var(--ww-caution-text);
}

@media (prefers-reduced-motion: no-preference) {
    .ww-wants-card {
        transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
    }

    .ww-wants-card:hover,
    .ww-wants-card:focus-within {
        transform: translateY(-2px);
    }
}

/* Persistent "this opens something" cue in the top-right corner — a cue, not a control:
   pointer-events:none means it can never steal the click, and it's not a second focusable
   element. Visible at rest (not hover-only) because touch has no hover. Muted by default,
   strengthens on card hover/focus alongside the border/shadow lift above. */
.ww-wants-card__expand-icon {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 13px;
    height: 13px;
    color: var(--ww-text-muted);
    opacity: 0.5;
    pointer-events: none;
    transition: opacity 0.15s ease, color 0.15s ease;
}

.ww-wants-card:hover .ww-wants-card__expand-icon,
.ww-wants-card:focus-within .ww-wants-card__expand-icon {
    opacity: 1;
    color: var(--ww-text-secondary);
}

/* State tints — a card is green only when the classifier (via VerdictCopyBuilder) agrees
   the engine would alert on this price; amber is "getting close". */
.ww-wants-card--buy {
    background: var(--ww-accent-bg);
    border-color: var(--ww-accent);
}

.ww-wants-card--close {
    background: var(--ww-caution-bg);
    border-color: var(--ww-caution);
}

/* Status pill: colour + icon + label, so state never rests on colour alone. Solid fill on
   the buy/close states so the pill still reads against the tinted card behind it. Carries the
   state word alone — the delta phrase is a separate element beside it (.ww-wants-card__delta /
   .ww-modal__delta), never appended into the pill's own text. Padding is symmetric (3px top and
   bottom) so its box centres cleanly against the price/delta text next to it despite uppercase
   glyphs sitting optically high in their line box. */
.ww-status-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    padding: 3px 9px;
    border-radius: 20px;
    line-height: 1.5;
    white-space: nowrap;
}

.ww-status-pill__icon {
    width: 12px;
    height: 12px;
    flex-shrink: 0;
}

/* Buy now's pill carries its own affordance label ("Buy on Amazon"), not the uppercase state
   word the other two pills use — sentence case reads as a link/button, not a status badge. */
.ww-status-pill--buy {
    background: var(--ww-accent);
    color: #fff;
    text-transform: none;
    letter-spacing: normal;
}

.ww-status-pill--close {
    background: var(--ww-caution);
    color: #fff;
}

.ww-status-pill--watching {
    background: var(--ww-surface-2);
    color: var(--ww-text-secondary);
}

/* Buy now's pill doubles as an affiliate link (card: a <span> with a click handler in
   ww-wants-modal.js; modal: a real <a>) — this modifier is only ever applied alongside
   .ww-status-pill--buy, so it inherits that background/colour untouched. Pointer cursor plus a
   same-hue darken on hover (identical formula to .ww-btn--primary:hover) reads as "clickable",
   not as a different component. The modal's pill is a real <a>, so this also has to beat the
   page's global `a:hover` rule (colour + underline) — needs the extra specificity below. */
.ww-status-pill--link {
    cursor: pointer;
}

.ww-status-pill--link:hover {
    background: var(--ww-accent-dark);
}

a.ww-status-pill--link:hover {
    color: #fff;
    text-decoration: none;
}

.ww-wants-card__title {
    /* This is a <p>, not an h1-h4, so it already gets the sans face by inheritance from body —
       confirmed, not assumed; no font-family override needed here. */
    font-size: 14.5px;
    font-weight: 500;
    color: var(--ww-text);
    line-height: 1.35;
    margin: 0 0 10px;
    /* Reserves room for .ww-wants-card__expand-icon in the top-right corner so a long two-line
       title never runs under it. */
    padding-right: 20px;
    /* Clamp to two lines at a fixed height so every card's price/bar/button line up. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.7em;
}

/* Pill, price, and delta all sit on this one row. align-items: center (not baseline) — with the
   status pill's now-symmetric padding this centres the pill against the price and delta text
   regardless of which is tallest (checked against both "$9.99" and "$1,299.00"). */
.ww-wants-card__price-line {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 8px;
    margin-bottom: 10px;
}

.ww-wants-card__price {
    font-size: 22px;
    font-weight: 600;
    color: var(--ww-text);
}

.ww-wants-card__price--none {
    font-size: 15px;
    font-weight: 500;
    color: var(--ww-text-muted);
}

.ww-wants-card__delta {
    font-size: 12.5px;
    color: var(--ww-text-secondary);
}

.ww-wants-card__meta {
    font-size: 12.5px;
    color: var(--ww-text-muted);
    margin: 0 0 10px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ww-wants-card__meta:empty {
    display: none;
}

/* Card sparkline: full width of the column (the 120px preview width is for the collapsed
   toggle on other layouts). Stroke colour follows the card state — the JS emits a fixed
   stroke attribute, and a CSS `stroke` property overrides it. */
.ww-card-sparkline {
    margin-top: 4px;
    margin-bottom: 4px;
}

.ww-card-sparkline .ww-sparkline-preview {
    width: 100%;
    height: auto;
}

.ww-card-sparkline .ww-sparkline-preview svg {
    width: 100%;
    height: auto;
}

.ww-card-sparkline .ww-sparkline-preview svg polyline {
    stroke: var(--ww-text-muted);
}

.ww-wants-card--buy .ww-sparkline-preview svg polyline {
    stroke: var(--ww-accent);
}

.ww-wants-card--close .ww-sparkline-preview svg polyline {
    stroke: var(--ww-caution);
}

/* The card body (status pill through truth bar) is a real <button> so it's keyboard-reachable
   for free — all: unset drops button chrome while keeping inherited text styling, then the
   properties actually needed are re-declared after it. */
.ww-wants-card__trigger {
    all: unset;
    display: block;
    width: 100%;
    box-sizing: border-box;
    text-align: left;
    cursor: pointer;
}

.ww-wants-card__trigger:focus-visible {
    outline: 2px solid var(--ww-accent);
    outline-offset: 3px;
    border-radius: 8px;
}

.ww-card-sparkline {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* Small clickable-card affordance — no second full-width button, just a label. */
.ww-card-sparkline__hint {
    font-size: 11px;
    color: var(--ww-text-muted);
}

/* Footer pinned to the card bottom (margin-top:auto) so buttons align across a row. */
.ww-wants-card__footer {
    margin-top: auto;
    padding-top: 12px;
}

.ww-wants-card__footer form {
    margin: 0;
}

.ww-wants-card__stop {
    text-align: center;
    margin-top: 8px;
}

.ww-wants-card__stop-btn {
    background: none;
    border: none;
    padding: 4px;
    cursor: pointer;
    font-family: var(--ww-sans);
    font-size: 12.5px;
    color: var(--ww-text-muted);
    transition: color 0.15s ease;
}

.ww-wants-card__stop-btn:hover {
    color: var(--ww-text-secondary);
    text-decoration: underline;
}

/* -------------------------------------------------------- stopped wants -- */
/* Cancelled wants, shown behind the "Show stopped wants" toggle (reusing the chart-collapse
   interaction below). Deliberately secondary to active rows: muted surface, lighter ink. */

.ww-stopped-wants {
    margin-top: 32px;
}

.ww-stopped-wants .ww-chart-panel {
    margin-top: 12px;
}

.ww-want-row--stopped {
    background: var(--ww-surface-1);
    border-color: var(--ww-border);
}

.ww-want-row--stopped:hover {
    border-color: var(--ww-border);
}

.ww-want-row--stopped .ww-want-row__title {
    color: var(--ww-text-secondary);
    font-weight: 400;
}

.ww-want-row__price--stopped {
    font-size: 16px;
    color: var(--ww-text-secondary);
}

.ww-want-row__price-note {
    font-size: 12px;
    color: var(--ww-text-muted);
}

/* Stopped-row action buttons: "View on Amazon" (affiliate) beside "Start watching again". */
.ww-stopped-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.ww-stopped-actions form {
    margin: 0;
}

/* ------------------------------------------------------- chart collapse -- */
/* My Wants only: the full interactive chart (.ww-price-chart above, shared with Check/
   Intake) sits collapsed behind this compact toggle row so a dashboard of several wants
   doesn't turn into a wall of charts. The sparkline is a plain inline SVG, not Chart.js. */

.ww-chart-collapse {
    margin-top: 0.75rem;
}

.ww-chart-toggle {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    background: none;
    border: none;
    padding: 0.25rem 0;
    cursor: pointer;
    font-family: var(--ww-sans);
    font-size: 13px;
    color: var(--ww-text-muted);
    transition: color 0.15s ease;
}

.ww-chart-toggle:hover {
    color: var(--ww-text-secondary);
}

.ww-sparkline-preview {
    display: inline-flex;
    flex-shrink: 0;
    width: 120px;
    height: 32px;
}

.ww-sparkline-preview svg {
    display: block;
}

.ww-chart-caret {
    transition: transform 0.2s ease;
    font-size: 18px;
    line-height: 1;
}

.ww-chart-toggle[aria-expanded="true"] .ww-chart-caret {
    transform: rotate(180deg);
}

.ww-chart-panel[hidden] {
    display: none;
}

/* ------------------------------------------------------- want price-history modal -- */
/* One modal shared by every card (see _WantCard.cshtml's data-ww-want-modal trigger and
   ww-wants-modal.js) — populated from the clicked card's data- attributes on open, not one
   instance per card. Reuses .ww-price-chart / .ww-stats / .ww-status-pill / .ww-btn as-is. */

.ww-modal {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.ww-modal[hidden] {
    display: none;
}

.ww-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 41, 0.55);
}

.ww-modal__dialog {
    position: relative;
    width: 100%;
    max-width: 560px;
    max-height: 90vh;
    overflow-y: auto;
    background: var(--ww-paper);
    border-radius: 14px;
    padding: 24px;
    box-shadow: 0 20px 60px rgba(15, 23, 41, 0.3);
}

.ww-modal__dialog:focus-visible {
    outline: none;
}

.ww-modal__header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 16px;
}

.ww-modal__title {
    /* The h1-h4 rule reserves the serif display face for page-level headings; a 20-word Amazon
       product title needs the body sans face instead — the serif face is unreadable at this length. */
    font-family: var(--ww-sans);
    font-size: 15px;
    font-weight: 500;
    color: var(--ww-text);
    margin: 0;
    line-height: 1.4;
}

.ww-modal__close {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    border-radius: 8px;
    font-size: 22px;
    line-height: 1;
    color: var(--ww-text-muted);
    cursor: pointer;
}

.ww-modal__close:hover {
    background: var(--ww-surface-1);
    color: var(--ww-text);
}

.ww-modal__close:focus-visible {
    outline: 2px solid var(--ww-accent);
    outline-offset: 1px;
}

.ww-modal__price-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 4px;
}

.ww-modal__price {
    font-size: 28px;
    font-weight: 600;
    color: var(--ww-text);
}

.ww-modal__chart-wrap {
    margin: 8px 0 4px;
}

.ww-modal__no-history {
    font-size: 14px;
    padding: 24px 0;
    text-align: center;
}

.ww-modal__no-history[hidden] {
    display: none;
}

.ww-modal__stats {
    margin: 16px 0;
}

.ww-modal__stats[hidden] {
    display: none;
}

.ww-modal__verdict {
    font-size: 14px;
    margin: 0 0 20px;
}

.ww-modal__verdict[hidden] {
    display: none;
}

.ww-modal__actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ww-modal__stop-form {
    text-align: center;
    margin: 0;
}

@media (max-width: 640px) {
    .ww-modal {
        padding: 12px;
    }

    .ww-modal__dialog {
        max-width: 100%;
        padding: 18px;
    }
}

/* ------------------------------------------------------------ empty state -- */

.ww-empty {
    border: 1px dashed var(--ww-border-strong);
    border-radius: 12px;
    padding: 40px 24px;
    text-align: center;
    background: var(--ww-surface-1);
}

.ww-empty h3 {
    font-size: 1.375rem;
    margin-bottom: 6px;
}

.ww-empty p {
    font-size: 16px;
    color: var(--ww-text-secondary);
    margin: 0 0 20px;
}

/* ------------------------------------------------------------------ CTA -- */

.ww-cta {
    background: var(--ww-ink);
    color: #fff;
    text-align: center;
    padding: 56px 32px;
}

.ww-cta__eyebrow {
    font-size: 13.5px;
    letter-spacing: 0.04em;
    color: rgba(255, 255, 255, 0.45);
    margin: 0 0 10px;
}

.ww-cta h2 {
    font-size: 2.3125rem;
    color: #fff;
    margin: 0 0 24px;
}

/* ------------------------------------------------------------ login card -- */

.ww-auth {
    display: flex;
    justify-content: center;
    padding: 64px 24px 80px;
}

.ww-login-card {
    background: #fff;
    border: 1px solid var(--ww-border);
    border-radius: 12px;
    padding: 32px;
    width: 100%;
    max-width: 400px;
    box-shadow: 0 1px 3px rgba(15, 23, 41, 0.05);
}

.ww-login-card__brand {
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
}

.ww-login-card h1 {
    font-size: 1.9375rem;
    text-align: center;
    margin-bottom: 6px;
}

.ww-login-card__sub {
    font-size: 15px;
    color: var(--ww-text-secondary);
    text-align: center;
    margin-bottom: 24px;
}

.ww-login-card__field {
    margin-bottom: 16px;
}

.ww-login-card__foot {
    font-size: 13.5px;
    color: var(--ww-text-muted);
    text-align: center;
    margin: 18px 0 0;
}

/* --------------------------------------------------------------- footer -- */

.ww-footer {
    border-top: 1px solid var(--ww-border);
    padding: 28px 32px;
    text-align: center;
    font-size: 13.5px;
    color: var(--ww-text-muted);
}

.ww-footer p {
    margin: 0 0 4px;
}

.ww-footer p:last-child {
    margin-bottom: 0;
}

.ww-footer a {
    color: var(--ww-text-muted);
}

.ww-footer a:hover {
    color: var(--ww-text-secondary);
}

/* -------------------------------------------------------------- spinner -- */
/* htmx toggles .htmx-request on the indicator; keep it out of flow otherwise. */

.htmx-indicator {
    opacity: 0;
    transition: opacity 0.15s ease;
    font-size: 14px;
    color: var(--ww-text-muted);
}

.htmx-request .htmx-indicator,
.htmx-request.htmx-indicator {
    opacity: 1;
}

/* -------------------------------------------------------------- utility -- */

.ww-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;
}

.ww-stack > * + * {
    margin-top: 12px;
}

.ww-mt-24 { margin-top: 24px; }
.ww-mt-32 { margin-top: 32px; }

/* ----------------------------------------------------------- responsive -- */

@media (max-width: 768px) {
    .ww-container,
    .ww-nav {
        padding-left: 16px;
        padding-right: 16px;
    }

    .ww-page {
        padding: 24px 16px 48px;
    }

    .ww-section {
        padding: 40px 20px;
    }

    .ww-hero__inner {
        padding: 40px 20px;
    }

    .ww-hero h1 {
        font-size: 2rem;
    }

    .ww-logo__text {
        font-size: 21px;
    }

    .ww-logo__icon {
        width: 26px;
        height: 26px;
    }

    .ww-nav__links a {
        font-size: 14px;
    }

    .ww-nav__links {
        gap: 16px;
        flex-wrap: wrap;
        justify-content: flex-end;
        max-width: 100%;
    }

    /* The nav stacks at this width, so the account line takes a row of its own
       rather than squeezing the links — still truncating, never overflowing. */
    .ww-nav {
        flex-wrap: wrap;
    }

    /* Own row, below the links rather than between them — order:1 moves it last
       visually so "Sign out" isn't orphaned onto a third line, while the DOM keeps
       the desktop reading order (email, then Sign out). */
    .ww-nav__account {
        font-size: 12px;
        order: 1;
        flex: 1 0 100%;
        max-width: 100%;
        text-align: right;
    }

    .ww-values,
    .ww-how-steps,
    .ww-candidates {
        grid-template-columns: 1fr;
    }

    .ww-how-steps {
        gap: 24px;
    }

    .ww-verdict-card {
        padding: 20px;
    }

    .ww-stats {
        gap: 20px;
    }

    .ww-cta {
        padding: 40px 20px;
    }

    .ww-cta h2 {
        font-size: 1.875rem;
    }

    .ww-candidate__head {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .ww-candidate__price {
        text-align: left;
    }

    /* The head stacks here, so the column reads left-aligned — the price row follows it. */
    .ww-candidate__price-line {
        justify-content: flex-start;
    }

    /* Full-width, stacked CTAs — "Watch it — we'll email you when it's real" doesn't
       fit beside "Buy on Amazon" on a phone. */
    .ww-check-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .ww-check-actions .ww-btn {
        text-align: center;
        white-space: normal;
    }
}

@media (max-width: 420px) {
    .ww-hero__search {
        flex-direction: column;
        gap: 8px;
    }

    .ww-hero__search input,
    .ww-hero__search button {
        border-radius: 10px;
    }
}

/* ---------------------------------------------------------------------------
   Admin surfaces (/Admin/Dashboard, /Admin/Users)

   Every selector below is either a new .ww-admin-* class or a descendant of one,
   so no rule a public page depends on is modified or overridden. These pages
   are operator tools: denser type, smaller gaps, and a card grid instead of the
   full-width sections the public pages use.
   --------------------------------------------------------------------------- */

.ww-admin-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 6px 20px;
    margin-bottom: 18px;
}

/* Compact by design: this heading replaced a dark hero band that pushed the first
   real number below the fold. */
.ww-admin-head h1 {
    font-size: 1.75rem;
    margin: 0;
}

.ww-admin-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    font-size: 14px;
}

.ww-admin-nav a {
    color: var(--ww-text-secondary);
}

.ww-admin-nav a:hover {
    color: var(--ww-accent-dark);
}

.ww-admin-nav__current {
    color: var(--ww-text);
    font-weight: 600;
}

.ww-admin-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 14px;
    align-items: start;
}

.ww-admin-card {
    border: 1px solid var(--ww-border);
    border-radius: 12px;
    background: var(--ww-surface-1);
    padding: 14px 16px;
}

.ww-admin-card__title {
    font-family: var(--ww-sans);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--ww-text-secondary);
    margin: 0 0 10px;
}

/* The shared stats row, tightened for a card. Scoped, so /Check and /Wants keep
   the roomier original spacing. */
.ww-admin-card .ww-stats {
    gap: 10px 22px;
    margin: 0;
}

.ww-admin-card .ww-stats + .ww-stats {
    margin-top: 12px;
}

.ww-admin-card .ww-stat__value {
    font-size: 19px;
}

.ww-admin-card .ww-notice {
    margin-bottom: 12px;
}

/* Explanatory notes (the click-attribution caveat, the pre-CreatedAt row count).
   Shrunk, never dropped — they're what keeps the numbers above them honest. */
.ww-admin-note {
    font-size: 12.5px;
    line-height: 1.45;
    color: var(--ww-text-muted);
    margin: 10px 0 0;
}

.ww-admin-note--lead {
    margin: 0 0 10px;
}

/* Two columns' worth of stats live in the Keepa and clicks cards; give them the
   room only once the grid is genuinely wide. `span 2` in a one-column grid would
   invent a second column, so it is gated behind the breakpoint rather than
   overridden below it. */
@media (min-width: 800px) {
    .ww-admin-card--wide {
        grid-column: span 2;
    }
}

/* ------------------------------------------------------------ admin table -- */

.ww-admin-tablewrap {
    overflow-x: auto;
    border: 1px solid var(--ww-border);
    border-radius: 12px;
    background: var(--ww-paper);
}

.ww-admin-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.ww-admin-table th,
.ww-admin-table td {
    padding: 9px 12px;
    text-align: left;
    vertical-align: middle;
    white-space: nowrap;
    border-bottom: 1px solid var(--ww-border);
}

.ww-admin-table thead th {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ww-text-muted);
    background: var(--ww-surface-1);
}

.ww-admin-table tbody tr:last-child td {
    border-bottom: none;
}

.ww-admin-table__num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.ww-admin-table__email {
    white-space: normal;
    word-break: break-word;
    min-width: 190px;
}

.ww-admin-table__self {
    font-size: 11px;
    color: var(--ww-text-muted);
    margin-left: 6px;
}

.ww-admin-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.ww-admin-actions form {
    margin: 0;
}

/* ---------------------------------------------------------------------------
   Price freshness note ("Price as of ...")

   Keepa's Buy Box crawl runs ~8-9h behind Amazon and no API we can reach closes
   that gap, so no surface may imply a live quote. Every displayed price carries
   this note. Deliberately quiet — it reads as precision, not as an apology, and
   must never compete with the verdict sitting above it.

   All selectors below are new classes or sibling combinators against them; no
   existing rule is modified.
   --------------------------------------------------------------------------- */

.ww-price-asof {
    font-size: 12px;
    line-height: 1.45;
    color: var(--ww-text-muted);
    margin: 0 0 14px;
}

/* The note belongs to the price above it, so it hugs that price instead of
   floating in the middle of the gap that price's own bottom margin leaves.
   The price now sits inside .ww-check-price-line (which inherited its bottom margin), so the
   pull-up hangs off the row — same -12px, same resulting 4px gap, timestamp unmoved. */
.ww-check-price-line + .ww-price-asof {
    margin-top: -12px;
}

.ww-wants-card__price-line + .ww-price-asof {
    margin: -4px 0 10px;
}

.ww-want-row__price-line + .ww-price-asof {
    margin: -2px 0 10px;
}

/* Nested under the price in the right column now (not a sibling of the head row),
   so it needs its own margin reset — no bottom margin (nothing follows it in that
   column) and a small top gap off the price above. */
.ww-candidate__price .ww-price-asof {
    margin: 4px 0 0;
}

.ww-coaching .ww-price-asof {
    margin: 8px 0 0;
}

.ww-modal__price-asof {
    margin: 0 0 12px;
}

/* ---------------------------------------------------------------------------
   /how-it-works

   The page is built from the landing page's existing sections (.ww-hero,
   .ww-section, .ww-how-steps, .ww-values, .ww-notice, .ww-cta). Only its prose
   sections had nothing to reuse: those need a readable measure under a centred
   .ww-section__head, and .ww-section itself is full-bleed while .ww-lede is
   left-anchored rather than centred. Both selectors below are new page-scoped
   classes — no existing rule is modified.
   --------------------------------------------------------------------------- */

.ww-hiw-prose {
    max-width: 640px;
    margin: 0 auto;
    font-size: 16px;
    color: var(--ww-text-secondary);
}

.ww-hiw-prose p:last-child {
    margin-bottom: 0;
}

.ww-hiw-list {
    margin: 0;
    padding-left: 22px;
}

.ww-hiw-list li + li {
    margin-top: 12px;
}