/* Buying section styles. Selectors stay inside this section root. */
:where([data-section="buying"]) .vcaps{position:absolute;left:50%;bottom:clamp(84px,10vh,124px);transform:translateX(-50%);z-index:3;pointer-events:none;text-align:center;max-width:min(1040px,86vw);opacity:0;transition:opacity .6s ease;display:grid;gap:clamp(5px,1vh,9px)}
:where([data-section="buying"]) .vcaps p{margin:0;font-size:clamp(1.05rem,1.6vw,1.5rem);font-weight:500;letter-spacing:-.015em;color:var(--muted2);transition:color .55s ease,opacity .55s ease,transform .55s cubic-bezier(.2,.7,.2,1);opacity:0;transform:translateY(9px);max-width:none}
/* a line that has been read recedes to a background grey but stays in place; the current line is bright */
:where([data-section="buying"]) .vcaps p.is-past{opacity:.5;transform:none}
:where([data-section="buying"]) .vcaps p.is-on{color:var(--text);opacity:1;transform:none}
@media (max-width:900px){
:where([data-section="buying"]) .vcaps p{font-size:.85rem}
}

/* The left side behaves like one calm instrument: one live reading during the scan, then the verdict. */
:where([data-section="buying"]) .agent{position:absolute;left:clamp(18px,3.2vw,52px);top:50%;transform:translateY(-50%);z-index:3;width:min(360px,27vw);display:grid;align-content:start;gap:12px;opacity:0;transition:opacity .35s var(--ease-drive);pointer-events:none}
html:not(.js) :where([data-section="buying"]) .agent{display:none}

/* the terminal shows only the variable being read now; the counter preserves the full scan */
:where([data-section="buying"]) .term{--scan-progress:0%;border:1px solid rgba(213,223,237,.16);border-radius:10px;background:rgba(17,21,28,.92);box-shadow:0 14px 38px rgba(0,0,0,.16);overflow:hidden;pointer-events:auto;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
:where([data-section="buying"]) .term__head{display:flex;align-items:center;gap:9px;padding:12px 14px 7px;font-size:.68rem;color:#b7bcc7;white-space:nowrap}
:where([data-section="buying"]) .term__head i{width:7px;height:7px;border-radius:50%;background:var(--accent);flex:0 0 auto}
:where([data-section="buying"]) .term__head b{margin-left:auto;font-weight:500;color:var(--muted)}
:where([data-section="buying"]) .term.is-done .term__head i{opacity:.4}
:where([data-section="buying"]) .term__feed{height:54px;transition:height .55s cubic-bezier(.2,.7,.2,1),padding .55s;overflow:hidden;padding:4px 14px 8px;display:flex;align-items:center}
:where([data-section="buying"]) .term__feed div{display:none;width:100%;justify-content:space-between;gap:12px;font-size:.74rem;line-height:1.35;color:var(--text2);white-space:nowrap;overflow:hidden;animation:buying-termln .22s ease}
:where([data-section="buying"]) .term__feed div:last-child{display:flex}
:where([data-section="buying"]) .term__feed span{overflow:hidden;text-overflow:ellipsis}
:where([data-section="buying"]) .term__feed b{font-weight:600}
:where([data-section="buying"]) .term__feed .g{color:var(--accent)}
:where([data-section="buying"]) .term__feed .r{color:var(--bad)}
@keyframes buying-termln{from{opacity:0;transform:translateY(4px)}to{opacity:1}}
:where([data-section="buying"]) .term__foot{display:flex;justify-content:space-between;gap:10px;padding:5px 14px 10px;font-size:.68rem;color:var(--muted);white-space:nowrap}
:where([data-section="buying"]) .term__foot #termstate{color:var(--accent)}
:where([data-section="buying"]) .term__progress{height:2px;background:rgba(255,255,255,.07)}
:where([data-section="buying"]) .term__progress i{display:block;width:var(--scan-progress);height:100%;background:var(--accent);transition:width .12s linear}
/* once the value is resolved the feed folds away: the terminal becomes a two-line receipt and the
   verdict card carries the result on its own */
:where([data-section="buying"]) .term.is-done .term__feed{height:0;padding-top:0;padding-bottom:0}
:where([data-section="buying"]) .term.is-done .term__foot{border-top:0}
:where([data-section="buying"]) .term.is-done .term__progress{opacity:.35}

/* the verdict: its own card, the two numbers first, the difference as a flag, the extra reading last */
:where([data-section="buying"]) .verdict{position:relative;overflow:hidden;border-radius:12px;padding:18px 20px 16px;background:rgba(17,21,28,.97);border:1px solid rgba(63,214,143,.42);box-shadow:0 22px 60px rgba(0,0,0,.36),inset 0 1px rgba(255,255,255,.05);opacity:0;transform:translateY(16px) scale(.97);transition:opacity .45s ease,transform .55s cubic-bezier(.2,.7,.2,1);pointer-events:none}
:where([data-section="buying"]) .verdict::before{content:"";position:absolute;left:0;top:0;right:0;height:3px;background:var(--accent)}
:where([data-section="buying"]) .verdict.is-on{opacity:1;transform:none;pointer-events:auto}
:where([data-section="buying"]) .verdict__head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:-1px 0 18px;padding-bottom:11px;border-bottom:1px solid rgba(255,255,255,.1)}
:where([data-section="buying"]) .verdict__head strong{font-size:1rem;font-weight:650;letter-spacing:-.015em;color:var(--text)}
:where([data-section="buying"]) .verdict__head span{font:500 .62rem/1.2 ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--accent);white-space:nowrap}
:where([data-section="buying"]) .verdict__pair{display:grid;grid-template-columns:1fr auto;align-items:end;gap:18px}
:where([data-section="buying"]) .verdict__eyebrow{display:block;font-size:.66rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
:where([data-section="buying"]) .verdict__value{display:block;margin-top:5px;font-size:clamp(2rem,2.7vw,2.7rem);font-weight:700;letter-spacing:-.03em;line-height:1;color:var(--accent);font-variant-numeric:tabular-nums}
:where([data-section="buying"]) .verdict__ask{text-align:right;padding-bottom:3px}
:where([data-section="buying"]) .verdict__ask strong{display:block;margin-top:5px;font-size:1.35rem;font-weight:600;letter-spacing:-.02em;line-height:1;color:var(--text2);font-variant-numeric:tabular-nums}
:where([data-section="buying"]) .verdict__over{display:inline-flex;align-items:center;gap:8px;margin:14px 0 0;padding:5px 11px 5px 9px;border-radius:999px;background:rgba(255,99,99,.13);border:1px solid rgba(255,99,99,.28);color:var(--bad);font-size:.76rem;font-weight:600;letter-spacing:-.005em;white-space:nowrap}
:where([data-section="buying"]) .verdict__over i{width:6px;height:6px;border-radius:50%;background:currentColor;flex:0 0 auto}
:where([data-section="buying"]) .verdict__section-title{margin:17px 0 0;font:600 .65rem/1.2 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
:where([data-section="buying"]) .verdict__rows{margin:7px 0 0;padding-top:8px;border-top:1px solid rgba(255,255,255,.1)}
:where([data-section="buying"]) .verdict__rows>div{display:flex;justify-content:space-between;align-items:baseline;gap:12px;font-size:.84rem;line-height:1.95}
:where([data-section="buying"]) .verdict__rows dt{color:var(--muted)}
:where([data-section="buying"]) .verdict__rows dd{margin:0;color:var(--text);font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}

/* the column hangs from a fixed line under the three-line module title, so the terminal stays put
   while it folds and the verdict card opens beneath it (nothing recentres or jumps) */
@media(min-height:601px){
:where([data-section="buying"]) .agent{top:clamp(196px,24vh,236px);transform:none}
}
@media(max-height:680px) and (min-width:621px){
/* short screens: the captions sit higher, so the column narrows to stay clear of the longest line */
:where([data-section="buying"]) .agent{width:min(340px,26vw)}
:where([data-section="buying"]) .verdict{padding:14px 16px 12px}
:where([data-section="buying"]) .verdict__value{font-size:1.9rem}
:where([data-section="buying"]) .verdict__rows>div{line-height:1.6}
}
@media(max-width:900px){
:where([data-section="buying"]) .agent{width:300px;max-width:calc(100vw - 32px);top:auto;bottom:105px;left:16px;transform:none;gap:8px}
/* bottom-anchored on small screens, so the closed card must not hold its space above the terminal */
:where([data-section="buying"]) .verdict:not(.is-on){display:none}
:where([data-section="buying"]) .vcaps{bottom:auto;top:125px}
:where([data-section="buying"]) .vcaps p{font-size:.86rem}
}
@media(max-width:620px){
:where([data-section="buying"]) .vcaps{bottom:auto;top:168px;max-width:none;left:16px;right:16px;transform:none;gap:4px;text-align:left}
:where([data-section="buying"]) .vcaps p{font-size:.74rem}
:where([data-section="buying"]) .term__head{font-size:.61rem}
:where([data-section="buying"]) .term__feed div{font-size:.64rem}
:where([data-section="buying"]) .verdict{padding:14px 16px 12px}
:where([data-section="buying"]) .verdict__value{font-size:1.7rem}
:where([data-section="buying"]) .verdict__ask strong{font-size:1.1rem}
}
@media(prefers-reduced-motion:reduce){
:where([data-section="buying"]) .agent,:where([data-section="buying"]) .term__feed,:where([data-section="buying"]) .term__feed div,:where([data-section="buying"]) .verdict{transition:none;animation:none}
}