/* Screener workspace: the visual system for /screener (js/screener-workspace.js turns its 24 stacked tools into one tool at a time).
   Loaded after css/screener.css, which still styles what is INSIDE each tool; this file owns the page shell and overrides the per-section
   chrome that made the page loud: nine different gradient backgrounds with floating orbs, four different heading styles, pill eyebrows and
   a different card style per tool. One calm canvas now, one header pattern, one card surface, one set of controls.

   Principles (what a designer at Apple would do with this page):
   - Hierarchy before decoration: a large title, a quiet strip of facts, then the work. No gradients competing with the numbers.
   - One thing on screen at a time: two levels of navigation (group, then tool) instead of a 42,000-pixel scroll.
   - Content on the canvas, controls on glass: the sticky bars blur what scrolls under them; tools are not boxed in another box.
   - Type does the work: tight tracking on titles, tabular figures on numbers, a secondary grey for everything that explains.
   - Motion is short and meaningful (a tool eases in), and off for people who ask for less.
   - Same rules at every width: thumb-sized targets, one column on a phone, nothing scrolls sideways except what is meant to. */

body:has(.ws-page){
  --ws-text: #F5F5F7;
  --ws-text-2: rgba(245,245,247,0.70);
  --ws-text-3: rgba(245,245,247,0.62);
  --ws-line: rgba(255,255,255,0.10);
  --ws-surface: rgba(255,255,255,0.05);
  --ws-surface-2: rgba(255,255,255,0.09);
  --ws-accent: #8B7FFF;
  --ws-radius: 20px;
  --ws-ease: cubic-bezier(.2,.8,.2,1);
  --ws-ui: 'Instrument Sans', -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', system-ui, sans-serif;
}

/* ---------------- hero ---------------- */
.ws-hero{
  position:relative; padding: clamp(40px, 7vw, 92px) 0 clamp(22px, 3.5vw, 36px);
  background: radial-gradient(70% 110% at 50% -30%, rgba(139,127,255,0.22), transparent 70%);
}
.ws-hero .blob{ display:none; }
.ws-kicker{ margin:0 0 14px; font:700 13px/1 var(--ws-ui, sans-serif); letter-spacing:.16em; text-transform:uppercase; color:var(--ws-accent, #8B7FFF); }
.ws-hero h1{
  margin:0; max-width:19ch; font-family: var(--ws-ui, sans-serif); font-weight:700; letter-spacing:-0.038em; line-height:1.03;
  font-size: clamp(36px, 6vw, 68px); color: var(--ws-text, #F5F5F7); text-wrap: balance;
}
.ws-lede{ margin:18px 0 0; max-width:60ch; font-size: clamp(16px, 1.7vw, 20px); line-height:1.5; color: var(--ws-text-2, rgba(245,245,247,.7)); text-wrap: pretty; }
.ws-lede strong{ color: var(--ws-text, #F5F5F7); font-weight:600; }

.ws-stats{ display:flex; flex-wrap:wrap; gap: 6px clamp(24px, 5vw, 56px); margin: clamp(22px, 3vw, 32px) 0 0; }
.ws-stats[hidden]{ display:none; }
.ws-stat{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.ws-stat b{ font: 700 clamp(26px, 3.4vw, 38px)/1.05 var(--ws-ui, sans-serif); letter-spacing:-0.03em; color: var(--ws-text, #F5F5F7); font-variant-numeric: tabular-nums; }
.ws-stat span{ font-size:13px; color: var(--ws-text-3, rgba(245,245,247,.48)); }

/* the 8 filters: one quiet scrolling row of chips, not a wall of boxes */
.ws-criteria{
  display:flex; flex-wrap:nowrap; gap:8px; margin: clamp(20px, 2.6vw, 28px) -24px 0; padding: 4px 24px 8px;
  overflow-x:auto; scroll-snap-type:x proximity; -webkit-overflow-scrolling:touch;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 24px, #000 calc(100% - 40px), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 24px, #000 calc(100% - 40px), transparent 100%);
}
.ws-criteria::-webkit-scrollbar{ height:4px; }
.ws-criteria::-webkit-scrollbar-track{ background:transparent; }
.ws-criteria::-webkit-scrollbar-thumb{ background: var(--ws-line, rgba(255,255,255,.1)); border-radius:999px; }
.ws-criteria .fs-item{
  flex:none; scroll-snap-align:start; display:inline-flex; align-items:baseline; gap:8px; padding:8px 14px; border-radius:999px;
  background: var(--ws-surface, rgba(255,255,255,.05)); border:1px solid var(--ws-line, rgba(255,255,255,.1)); box-shadow:none;
}
.ws-criteria .fs-lbl{ font:500 12.5px/1 var(--ws-ui, sans-serif); letter-spacing:0; text-transform:none; color: var(--ws-text-3, rgba(245,245,247,.48)); }
.ws-criteria .fs-val{ font:700 13.5px/1 var(--ws-ui, sans-serif); color: var(--ws-text, #F5F5F7); font-variant-numeric: tabular-nums; }

/* ---------------- group bar (level 1): the page's sticky section bar, always visible here ---------------- */
body:has(.ws-page) .subnav{
  max-height:none; opacity:1; overflow:visible; top:78px;
  background: rgba(18,18,32,0.72);
  -webkit-backdrop-filter: saturate(180%) blur(22px); backdrop-filter: saturate(180%) blur(22px);
  border-bottom:1px solid var(--ws-line);
}
body:has(.ws-page) .subnav-inner{ gap:14px; min-height:56px; }
body:has(.ws-page) .subnav-wrap{ gap:4px; height:56px; scroll-snap-type:x proximity; -webkit-overflow-scrolling:touch; }
body:has(.ws-page) .subnav a{
  flex:none; display:inline-flex; align-items:center; height:38px; padding:0 16px; border-radius:999px; scroll-snap-align:start;
  font:600 14.5px/1 var(--ws-ui); letter-spacing:-0.005em; color: var(--ws-text-2); transition: background .2s var(--ws-ease), color .2s var(--ws-ease);
}
body:has(.ws-page) .subnav a:hover{ color: var(--ws-text); background: var(--ws-surface); }
body:has(.ws-page) .subnav a[aria-current="true"]{ background:#F5F5F7; color:#11161A; }
body:has(.ws-page) .subnav a:focus-visible{ outline:2px solid var(--ws-accent); outline-offset:2px; }

/* ---------------- tool bar (level 2): a segmented control ---------------- */
.ws-toolbar{ padding: clamp(18px, 2.4vw, 28px) 0 4px; }
.ws-toolbar:has(.ws-tools[hidden]){ display:none; }
.ws-tools{
  display:inline-flex; max-width:100%; gap:2px; padding:4px; border-radius:15px; overflow-x:auto; -webkit-overflow-scrolling:touch;
  background: rgba(255,255,255,0.07); border:1px solid var(--ws-line);
}
.ws-tools::-webkit-scrollbar{ height:4px; }
.ws-tools::-webkit-scrollbar-track{ background:transparent; }
.ws-tools::-webkit-scrollbar-thumb{ background: var(--ws-line); border-radius:999px; }
.ws-tool{
  flex:none; appearance:none; border:0; background:transparent; cursor:pointer; white-space:nowrap;
  min-height:42px; padding:0 18px; border-radius:11px; font:600 14.5px/1 var(--ws-ui); letter-spacing:-0.005em; color: var(--ws-text-2);
  transition: background .22s var(--ws-ease), color .22s var(--ws-ease), box-shadow .22s var(--ws-ease);
}
.ws-tool:hover{ color: var(--ws-text); }
.ws-tool[aria-selected="true"]{ background: rgba(255,255,255,0.16); color:#fff; box-shadow: 0 1px 0 rgba(255,255,255,0.10) inset, 0 2px 10px rgba(0,0,0,0.28); }
.ws-tool:focus-visible{ outline:2px solid var(--ws-accent); outline-offset:2px; }

/* ---------------- the tools: one canvas, one header pattern ---------------- */
.ws-main{ padding-top: clamp(14px, 2vw, 22px); }
.ws-main > section{
  position:relative; overflow:visible; margin:0; padding: clamp(18px, 2.4vw, 28px) 0 clamp(48px, 6vw, 80px);
  background:none !important; border:0; color: var(--ws-text);
}
.ws-main > section[hidden]{ display:none !important; }
.ws-main > section:not([hidden]){ animation: ws-in .42s var(--ws-ease) both; }
@keyframes ws-in{ from{ opacity:0; transform: translateY(10px); } to{ opacity:1; transform:none; } }
/* the floating orbs and blobs of the old per-tool backgrounds */
.ws-main > section :is([class$="-orb"], [class*="-orb-"], .blob){ display:none !important; }

.ws-main > section :is(.section-head, .floor-head, .dcf-head, .ta-head){ max-width:780px; margin:0 0 clamp(22px, 3vw, 34px); padding:0; }
.ws-main > section :is(.eyebrow, .tool-eyebrow){
  display:block; width:auto; padding:0; margin:0; background:none !important; border:0; border-radius:0;
  font:700 12px/1.2 var(--ws-ui); letter-spacing:.13em; text-transform:uppercase; color: var(--ws-text-3) !important;
}
.ws-main > section :is(.eyebrow, .tool-eyebrow) .dot{ display:none; }
.ws-main > section :is(.section-head, .floor-head, .dcf-head, .ta-head) h2{
  margin:10px 0 12px; font-family: var(--ws-ui); font-weight:700; letter-spacing:-0.034em; line-height:1.06;
  font-size: clamp(30px, 4vw, 46px); color: var(--ws-text); text-wrap: balance;
}
.ws-main > section :is(.section-head, .floor-head, .dcf-head, .ta-head) h2 br{ display:none; }
.ws-main > section :is(.section-head, .floor-head, .dcf-head, .ta-head) p{
  margin:0; max-width:66ch; font-size: clamp(15.5px, 1.4vw, 18px); line-height:1.55; color: var(--ws-text-2); text-wrap: pretty;
}
.ws-main > section :is(.section-head, .floor-head, .dcf-head, .ta-head) p a{ color: var(--ws-text); text-decoration: underline; text-decoration-color: rgba(255,255,255,.5); text-underline-offset:2px; }

/* the small-print under a tool */
.ws-main > section :is(.floor-footnote, .shortlist-footnote, .why-now-footnote, .sb-footnote, .dcf-footnote, .ta-footnote, .list-legend){
  max-width:68ch; font-size:12.5px; line-height:1.6; color: var(--ws-text-3);
}
.ws-main > section .wrap{ position:relative; z-index:1; }

/* ---------------- controls: one family ---------------- */
.ws-main :is(input[type="search"], input[type="text"], input[type="number"], select){
  min-height:42px; border-radius:12px; border:1px solid var(--ws-line); background: var(--ws-surface); color: var(--ws-text);
  font-family: var(--ws-ui); font-size:14.5px; transition: border-color .18s var(--ws-ease), background .18s var(--ws-ease), box-shadow .18s var(--ws-ease);
}
.ws-main :is(input[type="search"], input[type="text"], input[type="number"], select):focus-visible{
  outline:none; border-color: var(--ws-accent); background: var(--ws-surface-2); box-shadow: 0 0 0 4px rgba(139,127,255,0.22);
}
.ws-main :is(.mos-controls, .universe-controls){ border-bottom-color: var(--ws-line); }
.ws-main :is(.azn-sort-btn, .floor-more, .pill-btn.ghost){
  min-height:42px; border-radius:999px; border:1px solid var(--ws-line); background: var(--ws-surface); color: var(--ws-text);
  font-family: var(--ws-ui); font-weight:600; transition: background .18s var(--ws-ease), border-color .18s var(--ws-ease);
}
.ws-main :is(.azn-sort-btn, .floor-more, .pill-btn.ghost):hover{ background: var(--ws-surface-2); border-color: rgba(255,255,255,0.22); }
.ws-main :is(button, a, input, select, summary):focus-visible{ outline:2px solid var(--ws-accent); outline-offset:2px; }

/* ---------------- ranked lists: quiet rows ---------------- */
.ws-main :is(.mos-list, .floor-list, .insider-list, .dividend-list, .earnings-list){ border-top:1px solid var(--ws-line); }
/* under a controls bar the bar's own bottom line is the divider: a second line 8px below it (with the "N banks are left out" note squeezed between the two) read as a mistake */
.ws-main .mos-controls ~ :is(.mos-list, .floor-list, .insider-list, .dividend-list, .earnings-list){ border-top:0; }
.ws-main .mos-excluded-note{ margin:14px 0 6px; }
.ws-main :is(.mos-row, .floor-row){
  padding:18px 10px; border-bottom:1px solid rgba(255,255,255,0.07); border-radius:14px; transition: background .18s var(--ws-ease);
}
.ws-main :is(.mos-row, .floor-row):hover{ background: var(--ws-surface); }
.ws-main .floor-rank{ font:600 15px/1 var(--ws-ui); color: var(--ws-text-3); -webkit-text-stroke:0; font-variant-numeric: tabular-nums; }
.ws-main .floor-ticker{ font:700 16px/1.2 var(--ws-ui); letter-spacing:-0.01em; color: var(--ws-text); }
.ws-main .floor-company{ font-size:13px; color: var(--ws-text-3); }
.ws-main .floor-pct-val{ font-family: var(--ws-ui); font-weight:700; font-size: 24px; letter-spacing:-0.03em; font-variant-numeric: tabular-nums; }
.ws-main .floor-pct-lbl{ font-size:11px; letter-spacing:.04em; color: var(--ws-text-3); }

/* ---------------- tables: a surface with a sticky header ---------------- */
.ws-main .table-scroll{ border:1px solid var(--ws-line); border-radius: var(--ws-radius); background: var(--ws-surface); }
.ws-main .screener-table thead th{
  position:sticky; top:0; font:700 11.5px/1.2 var(--ws-ui); letter-spacing:.06em; text-transform:uppercase; color: var(--ws-text-3);
  background: rgba(28,28,46,0.92); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-bottom:1px solid var(--ws-line);
}
.ws-main .screener-table td{ border-bottom:1px solid rgba(255,255,255,0.06); font-variant-numeric: tabular-nums; }
.ws-main .screener-table tbody tr:hover td{ background: var(--ws-surface); }

/* ---------------- cards inside the tools share one surface ---------------- */
.ws-main :is(.shortlist-grid > *, .why-now-col, .gav-layout > *, .dcf-layout > *, .ta-layout > *,
             .dca-metrics-card, .dca-chart-card, .irr-metrics-card, .irr-chart-card, .compare-result, .wl-card, .pe-funnel, .pe-trend){
  border-radius: var(--ws-radius);
}

/* ---------------- inside the tools: one typeface, one surface ----------------
   The tools were written one at a time, each with its own serif numerals and boxed cards. Same sans everywhere here,
   figures set tabular so columns line up, and every card the same quiet glass surface. */
.ws-main.ws-main *:not(code):not(pre){ font-family: var(--ws-ui); }
.ws-main :is(td, th, [class*="-val"], [class*="-stat"], [class*="price"], [class*="pct"], [class*="margin"]){ font-variant-numeric: tabular-nums; }

/* the ad placeholder: a slim line, not a hole in the page */
.ws-main .ad-slot, .ws-main .ad-slot--banner{
  flex-direction:row; flex-wrap:wrap; gap:4px 12px; min-height:0; max-width:none; margin:0 0 clamp(20px, 3vw, 30px); padding:10px 16px;
  border:0; border-radius:12px; background: var(--ws-surface);
}

/* the one-line status above a list */
.ws-main :is(.shortlist-meta, .why-now-meta){
  display:inline-flex; margin:0 0 24px; padding:9px 16px; border-radius:999px;
  background: var(--ws-surface); border:1px solid var(--ws-line); color: var(--ws-text-2); font-size:13.5px; line-height:1.4;
}

/* checkboxes: a rounded square that fills when on (the browser's white box was the loudest thing in every table) */
.ws-main input[type="checkbox"]{
  -webkit-appearance:none; appearance:none; flex:none; width:24px; height:24px; margin:0; vertical-align:middle; cursor:pointer;
  border-radius:8px; border:1.5px solid rgba(255,255,255,0.32); background-color: transparent; background-repeat:no-repeat; background-position:center; background-size:15px;
  transition: background-color .16s var(--ws-ease), border-color .16s var(--ws-ease);
}
.ws-main input[type="checkbox"]:hover{ border-color: rgba(255,255,255,0.6); }
.ws-main input[type="checkbox"]:checked{
  background-color: var(--ws-accent); border-color: var(--ws-accent);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M3 7.5l2.6 2.6L11 4.4' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* Today's shortlist */
.ws-main .shortlist-grid{ gap:16px; }
.ws-main .shortlist-card{
  gap:12px; padding:22px 24px 24px; border-radius:24px; background: var(--ws-surface); border:1px solid var(--ws-line); box-shadow:none;
  transition: background .2s var(--ws-ease), border-color .2s var(--ws-ease), transform .2s var(--ws-ease);
}
.ws-main .shortlist-card:hover, .ws-main .shortlist-card:focus-visible{ transform: translateY(-2px); background: var(--ws-surface-2); border-color: rgba(255,255,255,0.22); box-shadow:none; }
.ws-main .shortlist-card:focus-visible{ outline:2px solid var(--ws-accent); outline-offset:2px; }
.ws-main .shortlist-rank{
  position:static; width:auto; height:auto; border-radius:0; background:none; box-shadow:none; justify-content:flex-start;
  color: var(--ws-text-3); font-size:12px; font-weight:700; letter-spacing:.12em;
}
.ws-main .shortlist-head{ margin-top:-2px; }
.ws-main .shortlist-head .portfolio-select-checkbox{ margin-left:auto; }
.ws-main .shortlist-head .cell-ticker{ font-size:22px; font-weight:700; letter-spacing:-0.02em; }
.ws-main .shortlist-company{ margin-top:-8px; font-size:13px; color: var(--ws-text-3); }
.ws-main .shortlist-margin{ margin-top:4px; font-size: clamp(36px, 4vw, 46px); font-weight:700; letter-spacing:-0.035em; line-height:1; }
.ws-main .shortlist-margin span{ font-size:11.5px; letter-spacing:.08em; }
.ws-main .shortlist-price{ font-size:14px; }
.ws-main .shortlist-badge{ font-size:11.5px; padding:5px 11px; }

/* what changed */
.ws-main .why-now-grid{ gap:16px; }
.ws-main .why-now-col{ padding:22px; background: var(--ws-surface); border:1px solid var(--ws-line); box-shadow:none; }
.ws-main .why-now-col h3{ font-size:17px; font-weight:700; letter-spacing:-0.015em; }
.ws-main .why-now-col-sub{ font-size:13px; color: var(--ws-text-3); }
.ws-main .why-now-row{ border-top-color: rgba(255,255,255,0.07); }
.ws-main .why-now-row:hover, .ws-main .why-now-row:focus-visible{ background: var(--ws-surface-2); }
.ws-main .why-now-row-name{ color: var(--ws-text-3); }

/* passes everything: the funnel */
.ws-main .pe-funnel-step{ padding:8px 14px; border-radius:999px; background: var(--ws-surface); border:1px solid var(--ws-line); color: var(--ws-text-2); font-size:13.5px; }
.ws-main .pe-funnel-step b{ color: var(--ws-text); font-weight:700; }
.ws-main .pe-funnel-step--final{ background: rgba(245,197,66,0.12); border-color: rgba(245,197,66,0.4); color:#F5C542; }
.ws-main .pe-funnel-step--final b{ color:#F5C542; }
.ws-main .pe-trend{ background: var(--ws-surface); border:1px solid var(--ws-line); }

/* tables: the highlighted "conviction" rows get a quiet accent tint instead of the old brown */
.ws-main .screener-table tbody tr.conviction-row{ background:transparent; }
.ws-main .screener-table tbody tr.conviction-row td{ background: rgba(139,127,255,0.08); }
.ws-main .screener-table tbody tr.conviction-row:hover td{ background: rgba(139,127,255,0.14); }
.ws-main .screener-table .cell-ticker{ font-weight:700; letter-spacing:-0.01em; }

/* result panels of the calculators and charts: one neutral glass panel instead of a different tinted gradient each */
.ws-main :is(.dcf-result, .drc-band, .ta-result, .compare-result, .dca-chart-card, .irr-chart-card, .dca-metrics-card, .irr-metrics-card, .gav-result){
  background: var(--ws-surface); border:1px solid var(--ws-line); box-shadow:none;
}

/* ---------------- previous / next, and related pages ---------------- */
/* the pager is a .wrap (24px side padding), so its divider is drawn inside that padding: a border on the nav itself ran 24px past the cards on both sides */
.ws-pager{ margin-top: clamp(40px, 5vw, 64px); }
.ws-pager::before{ content:""; display:block; height:1px; margin-bottom:28px; background: var(--ws-line); }
/* two compact buttons pushed to the two edges, each with a round arrow on its outer side (a full-width half each left the text stranded at the far ends) */
.ws-pager-row{ display:flex; justify-content:space-between; gap:12px; }
.ws-pg{
  appearance:none; display:flex; align-items:center; gap:14px; flex:0 1 380px; min-width:0; min-height:76px; padding:14px 18px; border-radius:18px; cursor:pointer; text-align:left;
  background: var(--ws-surface); border:1px solid var(--ws-line); color: var(--ws-text); font-family: var(--ws-ui);
  transition: background .2s var(--ws-ease), transform .2s var(--ws-ease), border-color .2s var(--ws-ease);
}
.ws-pg:hover{ background: var(--ws-surface-2); border-color: rgba(255,255,255,0.22); transform: translateY(-1px); }
.ws-pg-text{ display:flex; flex-direction:column; gap:3px; min-width:0; }
.ws-pg small{ font-size:11.5px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color: var(--ws-text-3); }
.ws-pg b{ font-size:17px; font-weight:650; letter-spacing:-0.015em; overflow-wrap:anywhere; }
.ws-pg--next{ margin-left:auto; text-align:right; }
.ws-pg-arrow{
  flex:none; display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px; border-radius:50%;
  border:1px solid var(--ws-line); color: var(--ws-text-2); transition: background .2s var(--ws-ease), border-color .2s var(--ws-ease), color .2s var(--ws-ease);
}
.ws-pg:hover .ws-pg-arrow, .ws-pg:focus-visible .ws-pg-arrow{ background: var(--ws-accent); border-color: var(--ws-accent); color:#fff; }
.ws-related{ display:flex; flex-wrap:wrap; align-items:center; gap:6px 10px; margin:20px 0 0; font-size:14px; color: var(--ws-text-3); }
.ws-related span{ font-weight:600; text-transform:uppercase; letter-spacing:.08em; font-size:11.5px; margin-right:4px; }
.ws-related a{ display:inline-flex; align-items:center; min-height:34px; padding:0 14px; border-radius:999px; background: var(--ws-surface); border:1px solid var(--ws-line); color: var(--ws-text-2); font-weight:600; transition: background .18s var(--ws-ease), color .18s var(--ws-ease); }
.ws-related a:hover{ background: var(--ws-surface-2); color: var(--ws-text); }

/* ---------------- phones and small tablets ---------------- */
@media (max-width: 720px){
  .ws-hero{ padding-top:32px; }
  .ws-criteria{ margin-left:-20px; margin-right:-20px; padding-left:20px; padding-right:20px; }
  .ws-stats{ display:grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap:12px; }
  /* css/style.css hides the section bar on a phone; here it is the first level of navigation, so it stays */
  body:has(.ws-page) .subnav{ display:block; top:70px; }
  body:has(.ws-page) .subnav-inner{ min-height:52px; gap:8px; }
  body:has(.ws-page) .subnav-wrap{ height:52px; }
  body:has(.ws-page) .subnav a{ height:40px; padding:0 15px; }
  body:has(.ws-page) .subnav-search{ display:none; }
  .ws-tools{ display:flex; width:100%; }
  /* a finger scrolls these rows; the track under them read as a stray line, so the thumb is hidden and the edge fades instead */
  .ws-tools::-webkit-scrollbar-thumb, .ws-criteria::-webkit-scrollbar-thumb, body:has(.ws-page) .subnav-wrap::-webkit-scrollbar-thumb{ background:transparent; }
  body:has(.ws-page) .subnav-wrap{ -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); }
  .ws-tool{ min-height:44px; }
  .ws-main > section :is(.section-head, .floor-head, .dcf-head, .ta-head) h2{ font-size: clamp(28px, 8.4vw, 36px); }
  .ws-pager-row{ flex-direction:column; }
  .ws-pg, .ws-pg--next{ flex:1 1 auto; width:100%; margin-left:0; min-height:68px; text-align:left; }
  .ws-pg--next{ justify-content:space-between; }
  .ws-related a{ min-height:40px; }

  /* thumb-sized targets: the tools were drawn for a mouse (chips 31-34px, text buttons 15px tall, stars 28px, 5px-high sliders) */
  .ws-main :is(.vt-tab-btn, .peg-chip, .backtest-toggle-btn, .ta-range-pill, .us-filter-btn, .uq-filter-btn, .gav-add-btn, .gav-lot-remove, .compare-add-btn){ min-height:44px; }
  .ws-main .dcf-reset-btn{ min-height:44px; padding:0 12px; display:inline-flex; align-items:center; }
  .ws-main summary{ padding-block:12px; }
  .ws-main .watch-star{ padding:14px; margin:-14px -14px -14px -6px; }
  .ws-main .dcf-knob input[type="range"]{ box-sizing:content-box; padding:20px 0; background-clip:content-box; }
}

@media (prefers-reduced-motion: reduce){
  .ws-main > section:not([hidden]){ animation:none; }
  .ws-tool, .ws-pg, .ws-related a, body:has(.ws-page) .subnav a{ transition:none; }
  .ws-pg:hover{ transform:none; }
}

/* Firefox only: the thin scrollbar properties live here, behind a test that only Firefox fails (see css/style.css) */
@supports not selector(::-webkit-scrollbar){
  .ws-criteria, .ws-tools{ scrollbar-width: thin; scrollbar-color: var(--ws-line, rgba(255,255,255,.1)) transparent; }
}