/* ============================================================================= amazonSalePricing.css — Amazon Sale Pricing (.asp-*) VISUAL LANGUAGE: the teal-blue Family A shared with Evri Claims (.ec-), Evri Claim Generator (.ecg-), Message Templates (.mt-), Support Cases (.sc-) and Listing Photos (.alp-) — soft cards, teal->blue gradient, 1.5px borders, 10-16px radii, #0588b6 primary. The tokens below are the prototype's own :root block, value for value, renamed with an --asp- prefix. WHY THE TOKENS ARE PREFIXED AND SCOPED. The prototype declares --p, --line, --ink and friends on :root, which in this app would leak into every other screen and quietly restyle modules that use the same short names. They are scoped to .asp-page here instead, so this file cannot affect a pixel outside its own tab. ── S3 CORRECTIONS, AND WHAT EACH ONE WAS ─────────────────────────────────── A1 THE MODULE IS CAPPED AND CENTRED at 1240px. Without it the screen stretches to the monitor width and the table columns drift apart from each other. The prototype's own comment on .wrap says "this is not decoration — build it", and S2 did not. A2 THREE CONTROLS, THREE SHAPES. S2 built the account switcher and the row filters as the same rounded pill, under a third pill bar, so three different jobs wore one shape: account switcher -> .asp-aseg underline tabs (was a segmented control; see the note on .asp-aseg for why it changed) row filters -> .asp-tabs underline tabs, PLAIN count, no bubble view switcher -> deleted (a one-item switcher switches nothing) The old .asp-chip / .asp-chips / .asp-nav rules are gone with it. A5 ONE TOOLBAR ROW, and the freshness moved into the footer. S2 stacked five full-width bands before the first row of data. .asp-tb carries the controls on one line; .asp-foot carries the counts, both freshness facts and the pager. The old .asp-fresh and .asp-pager rules are gone. A6 No Channel column — see the note in amazonSalePricing.js. ── THREE TRAPS THIS FILE IS STILL BUILT AROUND ───────────────────────────── 1. THE GLOBAL INPUT MINIMUM. public/css/style.css line 1 sets min-width:170px on `input, select, textarea` UNSCOPED, and it beats any max-width. Every input here declares min-width:0 explicitly, or the search box overflows its toolbar. 2. THE MOBILE TABLE REWRITE. Four global rules rewrite any table under 1180px. This screen uses the DUAL-RENDER mechanism instead of fighting them (responsive.css:1267-1287): the desktop table carries .rk-deskonly and a hand-built .rk-cardlist twin renders the same fields as cards. .rk-deskonly is also one of the two classes mobileEnhance.js's cardifier checks for, so the table is exempt from the sweep AND hidden on mobile. NOTE .rk-ownmobile is a DIFFERENT opt-out, for a screen that keeps its own table on mobile. This screen does not; do not mix the two. 3. DARK MODE LIVES IN THIS FILE, per the newer house pattern (VCE, Store Builder) rather than in the shared dark.css. ============================================================================= */ .asp-page{ --asp-p:#0588b6; --asp-pd:#03658e; --asp-pl:#e6f4fa; --asp-pl2:#cfe9f4; --asp-card:#fff; --asp-line:#d7e4ec; --asp-ink:#17303d; --asp-mut:#6b8291; --asp-ok:#1f9d55; --asp-okl:#e5f6ec; --asp-warn:#b6791a; --asp-warnl:#fff4e0; --asp-bad:#c9403f; --asp-badl:#fdeceb; --asp-grey:#eef2f5; --asp-greyt:#5c6b78; --asp-r:16px; --asp-rs:10px; color:var(--asp-ink); /* A1 — capped and centred. Scoped to this module's own root: no other screen is touched, and the container this sits inside keeps whatever width it had. */ max-width:1240px; margin:0 auto; width:100%; } /* ---- page header: eyebrow -> h2 -> sub -> right-aligned primary ----------- */ .asp-hd{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin:4px 0 14px;flex-wrap:wrap} .asp-eyebrow{font-size:11px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;color:var(--asp-p)} .asp-page h2.asp-title{font-size:23px;margin:2px 0;font-weight:800;letter-spacing:-.2px;color:var(--asp-ink)} .asp-sub{color:var(--asp-mut);font-size:13px} .asp-hd .asp-acts{display:flex;gap:8px;align-items:center;flex-wrap:wrap} /* ══════════════════════════ RESET THE APP'S BUTTON STYLING ══════════════════ * MEASURED, NOT ASSUMED. Four global rules reach every