/* =====================================================================
   /earnings/vs-apps/ - hosting next to the gig apps.
   Builds on earnings.css (hero, glass cards, fields, FAQ, CTA) and
   gig-charts.css (the charts). Theme tokens only, except the receipts:
   they are paper objects, so they pin their own paper and ink on every
   theme (a surface that ignores the theme pins every colour it paints).
   ===================================================================== */

.vs-sr {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap;
}

.vs-crumbs {
    font: 700 0.72rem 'Courier Prime', 'Courier New', monospace;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 1.25rem;
}
.vs-crumbs a { color: var(--link-color, var(--color-accent)); }

.vs-hero { margin-bottom: 1.5rem; }

/* ---------- app picker + segmented controls ---------- */
.vs-picker {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 1.5rem;
}
.vs-chip, .vs-seg-btn {
    font: 600 0.92rem 'Rubik', system-ui, sans-serif;
    color: var(--text);
    background: var(--surface-2);
    border: 1px solid var(--border-strong);
    border-radius: 999px;
    padding: 0.55rem 1rem;
    min-height: 44px;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
}
.vs-chip:hover, .vs-seg-btn:hover { border-color: var(--color-accent); }
.vs-chip:focus-visible, .vs-seg-btn:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}
.vs-chip.is-on, .vs-seg-btn.is-on {
    background: var(--color-accent);
    border-color: var(--color-accent);
    color: var(--btn-accent-text, #1b120a);
}

.vs-cost-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.6rem 1rem;
    margin: 1rem 0 0.5rem;
}
.vs-cost-label {
    font: 700 0.72rem 'Courier Prime', 'Courier New', monospace;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-muted);
}
.vs-seg {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    padding: 0.3rem;
    border-radius: 999px;
    background: var(--surface);
    border: 1px solid var(--border);
}
.vs-seg-btn { border-color: transparent; background: transparent; padding: 0.45rem 0.9rem; }
.vs-seg-sm { margin-bottom: 1rem; }
.vs-cost-note {
    text-align: center;
    max-width: 44rem;
    margin: 0 auto 1.5rem;
    font-size: 0.9rem;
    color: var(--text-dim);
}

/* ---------- receipts ---------- */
.vs-receipts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.5rem;
    align-items: start;
    max-width: 880px;
    margin: 0 auto;
}
@media (max-width: 760px) { .vs-receipts { grid-template-columns: 1fr; } }

.vs-receipt {
    --paper: #fbf6ea;
    --ink: #2b2013;
    --ink-soft: #6a5a42;
    --rule: rgba(43, 32, 19, 0.28);
    position: relative;
    background: var(--paper);
    color: var(--ink);
    font-family: 'Courier Prime', 'Courier New', monospace;
    padding: 1.6rem 1.4rem 1.8rem;
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.22);
    transform: rotate(-0.6deg);
    /* torn top and bottom edges */
    -webkit-mask: radial-gradient(circle at 8px 0, transparent 6px, #000 6.5px) top / 16px 51% repeat-x,
                  radial-gradient(circle at 8px 100%, transparent 6px, #000 6.5px) bottom / 16px 51% repeat-x;
            mask: radial-gradient(circle at 8px 0, transparent 6px, #000 6.5px) top / 16px 51% repeat-x,
                  radial-gradient(circle at 8px 100%, transparent 6px, #000 6.5px) bottom / 16px 51% repeat-x;
}
.vs-receipt-host { transform: rotate(0.6deg); }
.vs-receipt-head {
    font-weight: 700;
    letter-spacing: 0.14em;
    text-align: center;
    padding-bottom: 0.8rem;
    margin-bottom: 0.8rem;
    border-bottom: 1px dashed var(--rule);
}
.vs-receipt-host .vs-receipt-head::before {
    content: "";
    display: block;
    width: 2.6rem;
    height: 0.35rem;
    margin: 0 auto 0.6rem;
    border-radius: 999px;
    background: #7c4a06; /* the receipt's own amber ink, not the theme accent */
}
.vs-lines { margin: 0; }
.vs-lines > div {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.32rem 0;
    font-size: 0.92rem;
}
.vs-lines dt { color: var(--ink); }
.vs-lines dd { margin: 0; white-space: nowrap; font-variant-numeric: tabular-nums; }
.vs-lines .vs-minus dd { color: #9e3119; }
.vs-total, .vs-hourly {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    font-variant-numeric: tabular-nums;
}
.vs-total {
    margin-top: 0.7rem;
    padding-top: 0.7rem;
    border-top: 1px dashed var(--rule);
    font-weight: 700;
}
.vs-hourly {
    align-items: baseline;
    margin-top: 0.5rem;
    padding: 0.6rem 0.2rem 0;
    border-top: 3px double var(--rule);
}
.vs-hourly strong {
    font-family: 'Rubik', system-ui, sans-serif;
    font-size: clamp(1.8rem, 5vw, 2.4rem);
    font-weight: 700;
    letter-spacing: -0.02em;
}
.vs-receipt-host .vs-hourly strong { color: #7c4a06; }
.vs-receipt-foot {
    margin-top: 0.8rem;
    font-family: 'Rubik', system-ui, sans-serif;
    font-size: 0.78rem;
    line-height: 1.45;
    color: var(--ink-soft);
}
.vs-receipt-foot:empty { display: none; }
.vs-receipt .vs-ref {
    color: var(--ink-soft);
    border-color: var(--rule);
    background: transparent;
}

/* Reference chips, used in receipts, captions and prose. */
.vs-ref {
    display: inline-block;
    min-width: 1.35em;
    padding: 0 0.3em;
    margin: 0 0.05em;
    border: 1px solid var(--border-strong);
    border-radius: 999px;
    font: 700 0.68em/1.5 'Courier Prime', 'Courier New', monospace;
    text-align: center;
    vertical-align: 0.15em;
    color: var(--text-dim);
    text-decoration: none;
}
.vs-ref:hover, .vs-ref:focus-visible {
    background: var(--color-accent);
    border-color: var(--color-accent);
    color: var(--btn-accent-text, #1b120a);
    text-decoration: none;
}
sup .vs-ref { vertical-align: 0; }
sup { line-height: 0; }

.vs-verdict {
    max-width: 44rem;
    margin: 2rem auto 0.4rem;
    text-align: center;
    font-size: clamp(1.15rem, 2.6vw, 1.45rem);
    font-weight: 600;
    color: var(--text);
}
.vs-fine {
    max-width: 44rem;
    margin: 0.4rem auto 0;
    text-align: center;
    font-size: 0.82rem;
    color: var(--text-muted);
}

/* ---------- sections ---------- */
.vs-section { margin-top: clamp(3.5rem, 8vw, 5.5rem); }
.vs-receipts-section { margin-top: 0.5rem; }
.vs-lede {
    max-width: 44rem;
    margin: 0.8rem auto 0;
    color: var(--text-dim);
    line-height: 1.6;
}
.vs-section .section-head { text-align: center; margin-bottom: 1.5rem; }
.vs-stage { margin-top: 1.2rem; }
.vs-cap {
    margin-top: 0.75rem;
    font-size: 0.82rem;
    line-height: 1.5;
    color: var(--text-muted);
}
.vs-field-chart { min-height: 380px; }
#chart-night { min-height: 80px; }
.vs-wf-title {
    margin-top: 1rem;
    font: 700 0.72rem 'Courier Prime', 'Courier New', monospace;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text);
}

/* ---------- odometer ---------- */
.vs-odo-card { max-width: 880px; margin: 0 auto; }
.vs-odo-field { max-width: 30rem; margin: 0 auto 1.5rem; }
.vs-odo-hint { margin-top: 0.4rem; font-size: 0.82rem; color: var(--text-muted); }
.vs-odos {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem;
}
@media (max-width: 640px) { .vs-odos { grid-template-columns: 1fr; } }
.vs-odo { text-align: center; }
.vs-odo-label {
    font: 700 0.72rem 'Courier Prime', 'Courier New', monospace;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 0.6rem;
}
.vs-odo-dial {
    display: inline-flex;
    gap: 3px;
    padding: 6px;
    border-radius: 10px;
    background: #17110a;
    box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.6), 0 1px 0 rgba(255, 255, 255, 0.08);
}
.vs-odo-digit {
    position: relative;
    display: inline-block;
    width: clamp(1.6rem, 6vw, 2.2rem);
    height: clamp(2.3rem, 8.5vw, 3rem);
    overflow: hidden;
    border-radius: 4px;
    background: linear-gradient(#2a2016, #0e0a05 50%, #2a2016);
    color: #f6eddd;
    font: 700 clamp(1.4rem, 5.5vw, 1.9rem)/1 'Courier Prime', 'Courier New', monospace;
    text-align: center;
}
.vs-odo-digit.vs-odo-static { line-height: clamp(2.3rem, 8.5vw, 3rem); }
.vs-odo-host .vs-odo-digit { color: #f2c46d; } /* amber LED: the dial is dark on every theme */
.vs-odo-strip {
    position: absolute;
    left: 0; right: 0; top: 0;
    display: flex;
    flex-direction: column;
    transition: transform 0.6s cubic-bezier(0.34, 1.2, 0.64, 1);
}
.vs-odo-strip { height: 1000%; }
.vs-odo-strip > span { flex: none; height: 10%; display: flex; align-items: center; justify-content: center; }
.vs-odo-cost { margin-top: 0.6rem; font-weight: 600; color: var(--text); }
.vs-odo-foot { margin-top: 1.4rem; font-size: 0.85rem; line-height: 1.55; color: var(--text-dim); text-align: center; }

/* ---------- the tool ---------- */
.vs-tool {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 1.5rem;
    align-items: start;
}
@media (max-width: 860px) { .vs-tool { grid-template-columns: 1fr; } }
.vs-tool-form, .vs-tool-result { padding: clamp(1.1rem, 3vw, 1.75rem); }
.vs-tool-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
    margin-bottom: 1rem;
}
@media (max-width: 420px) { .vs-tool-grid { grid-template-columns: 1fr 1fr; } }
.vs-tool-eyebrow { margin-top: 0.5rem; }
.vs-num { display: flex; flex-direction: column; gap: 0.35rem; font-size: 0.85rem; color: var(--text-dim); min-width: 0; }
.vs-num-wide { margin-bottom: 1rem; }
.vs-num input {
    width: 100%;
    min-width: 0;
    min-height: 44px;
    font: 600 1rem 'Rubik', system-ui, sans-serif;
    font-variant-numeric: tabular-nums;
    color: var(--text);
    background: var(--surface-2);
    border: 1px solid var(--border-strong);
    border-radius: 10px;
    padding: 0.5rem 0.6rem;
}
.vs-num-box { position: relative; display: block; }
.vs-num-box > span { position: absolute; left: 0.6rem; top: 50%; transform: translateY(-50%); color: var(--text-muted); }
.vs-num-box input { padding-left: 1.4rem; }
.vs-num input:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 1px; }

.vs-tool-nets {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin: 0.4rem 0 0.6rem;
}
.vs-tool-nets > div { display: flex; flex-direction: column; gap: 0.15rem; }
.vs-tool-net-label {
    font: 700 0.7rem 'Courier Prime', 'Courier New', monospace;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-muted);
}
.vs-tool-nets strong { font-size: clamp(1.7rem, 4.5vw, 2.3rem); font-weight: 700; color: var(--text); }
.vs-tool-nets .is-host strong { color: var(--color-accent); }
.vs-tool-verdict { font-weight: 600; margin-bottom: 1rem; color: var(--text); }
.vs-tool-result .gc-chart { margin-top: 0.5rem; }
.vs-tool-result .gc-table-toggle { display: block; }

/* ---------- scorecard ---------- */
.vs-wins {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.5rem;
}
@media (max-width: 760px) { .vs-wins { grid-template-columns: 1fr; } }
.vs-win-col {
    padding: clamp(1.1rem, 3vw, 1.75rem);
    border-radius: var(--radius);
    background: var(--surface);
    border: 1px solid var(--border);
}
.vs-win-host { border-color: rgba(var(--accent-rgb, 240, 163, 47), 0.45); }
.vs-win-title { font-size: 1.15rem; font-weight: 700; margin-bottom: 0.9rem; color: var(--text); }
.vs-win-list { list-style: none; display: grid; gap: 0.85rem; }
.vs-win-list li { line-height: 1.55; color: var(--text-dim); padding-left: 1.1rem; position: relative; }
.vs-win-list li::before {
    content: "";
    position: absolute;
    left: 0; top: 0.6em;
    width: 0.45rem; height: 0.45rem;
    border-radius: 999px;
    background: rgba(var(--gray-rgb, 160, 141, 113), 0.8);
}
.vs-win-host .vs-win-list li::before { background: var(--color-accent); }
.vs-win-list strong { color: var(--text); }

/* ---------- pay floors ---------- */
.vs-floors {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
}
@media (max-width: 760px) { .vs-floors { grid-template-columns: 1fr; } }
.vs-floor {
    padding: 1.25rem;
    border-radius: var(--radius);
    background: var(--surface);
    border: 1px solid var(--border);
}
.vs-floor-num { font-size: 2rem; font-weight: 700; color: var(--text); letter-spacing: -0.02em; }
.vs-floor-what { margin-top: 0.4rem; font-size: 0.9rem; line-height: 1.55; color: var(--text-dim); }

/* ---------- sources ---------- */
.vs-src-list {
    max-width: 52rem;
    margin: 0 auto;
    padding-left: 2.2rem;
    display: grid;
    gap: 0.55rem;
    font-size: 0.88rem;
    line-height: 1.5;
    color: var(--text-dim);
}
.vs-src-list li { scroll-margin-top: calc(var(--banner-h, 32px) + 5rem); overflow-wrap: anywhere; }
.vs-src-list li:target { background: rgba(var(--accent-rgb, 240, 163, 47), 0.14); border-radius: 6px; }
.vs-src-pub { font-weight: 600; color: var(--text); }
.vs-src-date { color: var(--text-muted); }
.vs-sources .vs-fine { margin-top: 1.5rem; text-align: left; max-width: 52rem; }

@media (prefers-reduced-motion: reduce) {
    .vs-odo-strip, .vs-chip, .vs-seg-btn { transition: none; }
    .vs-receipt, .vs-receipt-host { transform: none; }
}
@media print {
    .vs-picker, .vs-cost-row, .gc-table-toggle, .vs-tool-form { display: none !important; }
    .vs-receipt { box-shadow: none; transform: none; -webkit-mask: none; mask: none; border: 1px solid #999; }
}