/*
 * Shared fixes for the Setups template (squeeze, fib, vwap, macd).
 * Found by tools/audit.js 2026-10-10. Ratios before / after.
 */

/* 320px screens / 400% zoom (1.4.10): the "anatomy" tag rows ran off the edge */
@media (max-width: 400px) {
    .anatomy { padding: 20px 14px !important; }
    .atag { white-space: normal !important; }
    .feat-row > *, .feat-copy, .anatomy, .an-row { min-width: 0 !important; }
    /* Editorial grid with a product screenshot (squeeze) */
    .ed-grid { grid-template-columns: minmax(0, 1fr) !important; }
    .ed-grid > *, .ed-shot, .sq-stage, .sq-frame { min-width: 0 !important; max-width: 100% !important; }
    /* Ruler strip (vwap): let it wrap instead of pushing the page wide */
    .vw-ruler .fr-in { flex-wrap: wrap !important; }
    .vw-ruler { overflow-x: clip; }
}

/* Footer text at 38 to 45% white on the dark footer: 3.1 to 3.9 > 6:1+ */
html.ks-a11y-colors .ft-col-head,
html.ks-a11y-colors .ft-bottom,
html.ks-a11y-colors .ft-bottom span,
html.ks-a11y-colors .ft-bottom a,
html.ks-a11y-colors .ft-disclaimer p,
html.ks-a11y-colors footer .ft-disclaimer,
html.ks-a11y-colors footer p {
    color: rgba(228, 232, 235, 0.74) !important;
}

/* Small greys in the product mockups: 2.3 to 3.9 > 5.9:1 */
html.ks-a11y-colors .fb-url,
html.ks-a11y-colors .fr-cap,
html.ks-a11y-colors .fr-t span {
    color: #5b6670 !important;
}

/* ---------- docs, learn and symbol pages (sitemap crawl 2026-10-10) ---------- */
/* Light grey #9aa3ae (2.6:1) on nav categories, breadcrumbs, meta, prev/next */
html.ks-a11y-colors .nav-cat,
html.ks-a11y-colors .crumb,
html.ks-a11y-colors .meta,
html.ks-a11y-colors .pl,
html.ks-a11y-colors .rel > h4,
html.ks-a11y-colors .sym-note { color: #5f6b75 !important; }
/* Mockup labels drawn with inline greys / greens */
html.ks-a11y-colors [style*="#76828d" i] { color: #5b6670 !important; }
html.ks-a11y-colors [style*="#128a4e" i] { color: #0f7a44 !important; }
/* Supported-symbol chips: let text wrap instead of clipping under wider spacing (1.4.12) */
.sym { overflow: visible !important; white-space: normal !important; height: auto !important; }

/* Docs table-of-contents heading; mockup labels drawn with var(--ink3) */
html.ks-a11y-colors .toc > h4 { color: #5f6b75 !important; }
html.ks-a11y-colors,
html.ks-a11y-colors .sqlp,
html.ks-a11y-colors .sqfp { --ink3: #5b6670 !important; }