/* ============================================================
   CRI-ONE readable calculators  (Chris, 2026-09-26)
   "remove the colors on the calculators entirely", "round edges are bad",
   "an accessible form css or magento's own css would help".
   Black, white and grey only. Square. 16px dark text. 44px controls.
   Linked LAST in each calculator page (after the page's own <style>),
   scoped to :is(#maincontent, .category-description) so the shared header and footer are untouched.
   The !important flags are deliberate: they beat each page's old colours,
   including inline style="" attributes.
   ============================================================ */

:is(#maincontent, .category-description) {
    font-family: system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Helvetica,sans-serif;
    font-size: 16px;
    line-height: 1.6;
    color: #222;
    font-variant-emoji: text;           /* lock / card glyphs render as plain text, not colour emoji */
}

/* --- square, flat, no colour anywhere in the content (low specificity: later rules refine) --- */
:where(#maincontent, .category-description) * {
    border-radius: 0 !important;
    box-shadow: none !important;
    text-shadow: none !important;
    color: #222 !important;
    border-color: #8c8c8c !important;
    outline-color: #111 !important;
}
:where(#maincontent, .category-description) *:not(canvas):not(svg):not(svg *):not(img):not(video):not(input):not(select):not(textarea):not(button) {
    background-color: transparent !important;
    background-image: none !important;
}

/* --- headings --- */
:is(#maincontent, .category-description) h1, :is(#maincontent, .category-description) h2, :is(#maincontent, .category-description) h3, :is(#maincontent, .category-description) h4 {
    color: #111 !important;
    font-weight: 700 !important;
    line-height: 1.25 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
}
:is(#maincontent, .category-description) h1 { font-size: 32px !important; margin: 0 0 12px !important; }
:is(#maincontent, .category-description) h2 { font-size: 24px !important; margin: 32px 0 12px !important; padding-bottom: 6px !important; border-bottom: 1px solid #d1d1d1 !important; }
:is(#maincontent, .category-description) h3 { font-size: 19px !important; margin: 20px 0 8px !important; }
:is(#maincontent, .category-description) h4 { font-size: 16px !important; }

/* --- body text: nothing under 14px --- */
:is(#maincontent, .category-description) :is(p, li, td, th, label, dd, dt, figcaption, span, code, a, div.help, div.notice, div.howto) {
    font-size: max(14px, 1em) !important;
}
:is(#maincontent, .category-description) small { font-size: 14px !important; color: #444 !important; }
:is(#maincontent, .category-description) :is(p, li, dd) { line-height: 1.6 !important; }
:is(#maincontent, .category-description) i, :is(#maincontent, .category-description) em, :is(#maincontent, .category-description) .notice { font-style: normal !important; }
:is(#maincontent, .category-description) :is(.sub, .lede) { color: #333 !important; }
:is(#maincontent, .category-description) .lede { border-left: 4px solid #111 !important; padding-left: 12px !important; }
:is(#maincontent, .category-description) :is(.help, .muted, .dim) { color: #555 !important; }

/* --- links: black and underlined --- */
:is(#maincontent, .category-description) a { color: #111 !important; text-decoration: underline !important; text-underline-offset: 2px; text-decoration-thickness: 1px; }

/* --- code: dark on light grey --- */
:is(#maincontent, .category-description) :is(code, kbd, samp, pre) {
    background-color: #f2f2f2 !important;
    color: #222 !important;
    border: 1px solid #d9d9d9 !important;
    padding: 1px 6px !important;
    font-family: Consolas, "Courier New", monospace !important;
    font-size: 14.5px !important;
    overflow-wrap: anywhere;
}
:is(#maincontent, .category-description) pre { padding: 10px 12px !important; overflow-x: auto; }

/* --- forms: Luma-like, accessible --- */
:is(#maincontent, .category-description) label, :is(#maincontent, .category-description) .field-label { font-weight: 700 !important; color: #222 !important; }
:is(#maincontent, .category-description) :is(input:not([type=checkbox]):not([type=radio]):not([type=hidden]):not([type=submit]):not([type=button]), select, textarea) {
    background-color: #fff !important;
    background-image: none !important;
    color: #111 !important;
    border: 1px solid #767676 !important;
    min-height: 44px !important;
    padding: 0 12px !important;
    font-size: 16px !important;
    box-sizing: border-box;
    max-width: 100%;
}
:is(#maincontent, .category-description) select { appearance: menulist !important; }
:is(#maincontent, .category-description) textarea { min-height: 96px !important; padding: 10px 12px !important; }
:is(#maincontent, .category-description) :is(input[type=checkbox], input[type=radio]) { width: 20px; height: 20px; accent-color: #111; }
:is(#maincontent, .category-description) :is(input, select, textarea, button, a, summary):focus-visible,
:is(#maincontent, .category-description) :is(input, select, textarea):focus {
    outline: 3px solid #111 !important;
    outline-offset: 2px !important;
    box-shadow: none !important;
}

/* --- buttons: the readable black button --- */
:is(#maincontent, .category-description) :is(button, input[type=submit], input[type=button], .go, .buy, .cta-button, a.action.primary, .dl a, a.button) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background-color: #111 !important;
    color: #fff !important;
    border: 1px solid #111 !important;
    min-height: 44px !important;
    padding: 10px 20px !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    text-decoration: none !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    cursor: pointer;
}
:is(#maincontent, .category-description) :is(button, input[type=submit], input[type=button], .go, .buy, .cta-button, a.action.primary, .dl a, a.button) * { color: #fff !important; }
:is(#maincontent, .category-description) :is(button, input[type=submit], .go, .buy, .cta-button, a.action.primary, .dl a, a.button):hover { background-color: #333 !important; }
:is(#maincontent, .category-description) :is(button, .go):disabled { background-color: #bdbdbd !important; border-color: #bdbdbd !important; color: #222 !important; cursor: not-allowed; }

/* locked downloads: plain grey chips */
:is(#maincontent, .category-description) .dl { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 !important; }
:is(#maincontent, .category-description) .dl > span {
    display: inline-flex !important;
    align-items: center;
    gap: 8px !important;
    background-color: #f5f5f5 !important;
    color: #333 !important;
    border: 1px solid #bdbdbd !important;
    padding: 10px 16px !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    cursor: not-allowed;
}
:is(#maincontent, .category-description) .dl > span small { color: #555 !important; font-weight: 400 !important; }

/* --- panels and notices: one calm grey style --- */
:is(#maincontent, .category-description) :is(.howto, .notice, .nda, .pricing, .ok, .warn, .err, .message, .relation, .unlockbar, .frost, .sku-selector, .cta-section, .qbeam-what, .verify, .lock, .locked) {
    background-color: #f5f5f5 !important;
    color: #222 !important;
    border: 1px solid #d1d1d1 !important;
    border-left: 4px solid #111 !important;
    padding: 12px 16px !important;
    margin-top: 16px;
}
:is(#maincontent, .category-description) :is(.howto, .notice, .nda, .pricing, .ok, .warn, .err, .message, .relation, .unlockbar, .frost, .sku-selector, .cta-section, .qbeam-what, .verify, .lock, .locked) * { color: #222 !important; }
:is(#maincontent, .category-description) :is(.howto, .notice, .message) b, :is(#maincontent, .category-description) :is(.howto, .notice, .message) strong { color: #111 !important; }
:is(#maincontent, .category-description) :is(.card, .spec) {
    background-color: #fff !important;
    border: 1px solid #d1d1d1 !important;
    padding: 12px 16px !important;
}
:is(#maincontent, .category-description) .spec { background-color: #f5f5f5 !important; }
:is(#maincontent, .category-description) .spec-label { color: #444 !important; font-size: 14px !important; }
:is(#maincontent, .category-description) :is(.rate, .price, .total) { color: #111 !important; font-weight: 700 !important; }

/* tag chips (Math: LIGHT / ABNORMAL / UNIQUE / COMMONS) */
:is(#maincontent, .category-description) .tag {
    display: inline-block;
    background-color: #fff !important;
    color: #111 !important;
    border: 1px solid #767676 !important;
    padding: 1px 8px !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    letter-spacing: .03em !important;
    vertical-align: middle;
}

/* --- tables: Luma data-table feel --- */
:is(#maincontent, .category-description) table:not(.io) :is(th, td) { padding: 10px 12px !important; border-bottom: 1px solid #d1d1d1 !important; text-align: left; vertical-align: top; }
:is(#maincontent, .category-description) table:not(.io) th { background-color: #f5f5f5 !important; color: #111 !important; font-weight: 700 !important; border-bottom: 2px solid #111 !important; }
:is(#maincontent, .category-description) table.io { background-color: #f5f5f5 !important; border-left: 4px solid #111 !important; }
:is(#maincontent, .category-description) table.io :is(td, th) { padding: 8px 12px !important; border-bottom: 1px solid #d9d9d9 !important; vertical-align: middle; }

/* --- leftovers found by the audit --- */
:is(#maincontent, .category-description) :is(b, strong, div.compliance, .tagline, .disclaimer) { font-size: max(14px, 1em) !important; }
:is(#maincontent, .category-description) .tagline { color: #333 !important; }
:is(#maincontent, .category-description) :is(.pricing-card, .total-price) { border-color: #8c8c8c !important; border-top: 2px solid #111 !important; background-color: #fff !important; }
:is(#maincontent, .category-description) .total-price { font-size: 22px !important; color: #111 !important; }

/* --- phones --- */
@media (max-width: 767px) {
    :is(#maincontent, .category-description) :is(button, .go, .buy, .cta-button, a.action.primary) { width: 100%; }
    :is(#maincontent, .category-description) .dl { flex-direction: column; }
    :is(#maincontent, .category-description) .dl a, :is(#maincontent, .category-description) .dl > span { width: 100%; box-sizing: border-box; }
    :is(#maincontent, .category-description) h1 { font-size: 26px !important; }
    :is(#maincontent, .category-description) h2 { font-size: 21px !important; }
    :is(#maincontent, .category-description) table { display: block; overflow-x: auto; }

    /* Calculators-page tile fits inside the 375px grid cell instead of growing
       to its intrinsic content width. Flex items default to min-width:auto —
       force min-width:0 so the tile shrinks; wrap long words + code identifiers
       so they never push the tile wider than the viewport. */
    .crione-cal-grid { max-width: 100% !important; overflow: hidden; padding-left: 12px !important; padding-right: 12px !important; }
    .crione-cal { width: 100% !important; min-width: 0 !important; max-width: 100% !important; overflow-wrap: break-word; word-break: break-word; box-sizing: border-box; }
    .crione-cal * { min-width: 0; max-width: 100%; overflow-wrap: break-word; word-break: break-word; }
    .crione-cal code, .crione-cal pre, .crione-cal kbd, .crione-cal samp { white-space: pre-wrap; word-break: break-all; overflow-wrap: anywhere; }
    .crione-cal-what, .crione-cal-outcomes p, .crione-cal-outcomes li, .crione-cal-outcomes ul { max-width: 100% !important; }
    .crione-cal-hero { max-width: 100% !important; padding-left: 12px !important; padding-right: 12px !important; box-sizing: border-box; }
    .crione-cal-hero h1 { font-size: 28px !important; line-height: 1.1 !important; }
    .crione-cal-hero p.lede { max-width: 100% !important; overflow-wrap: break-word; word-break: break-word; }
}


/* Calculators page: the small letter-spaced kicker labels above each card title */
.crione-cal-kicker { font-size: 14px !important; letter-spacing: .03em !important; text-transform: none !important; font-weight: 700 !important; color: #333 !important; }

/* Calculators page: each card is one big link. Underline only the card name, not every line inside it. */
a.crione-cal:hover .crione-cal-name, a.crione-cal:focus-visible .crione-cal-name { background-color: #111 !important; color: #fff !important; }

/* (stronger versions: these must out-rank the general link rule, which carries an id selector) */
:is(#maincontent, .category-description) a.crione-cal,
:is(#maincontent, .category-description) a.crione-cal * { text-decoration: none !important; }
:is(#maincontent, .category-description) a.crione-cal .crione-cal-name { text-decoration: underline !important; text-underline-offset: 3px; text-decoration-thickness: 2px; }
:is(#maincontent, .category-description) a.crione-cal:hover .crione-cal-name,
:is(#maincontent, .category-description) a.crione-cal:focus-visible .crione-cal-name { background-color: #111 !important; color: #fff !important; text-decoration: none !important; }