/* Color Contrast Checker.

   Laid out as a tool, not an article: a two column workbench (controls left,
   results right), with the preview and the palette matrix as full width panels
   underneath, and the reference material demoted to a narrow column at the
   bottom. Panels are white on the cream page for an app feel; the brand look
   stays in the chrome around it.

   Every class is cc- prefixed because the page loads the full Tailwind and
   daisyUI bundle: bare names like .btn, .input, .badge or .table belong to
   daisyUI and defining them here would restyle its components. Where a real
   daisyUI component fits (btn, input, textarea, checkbox) the markup uses it
   directly and this file only tunes it through the component's own variables.

   Verdict and matrix band colors were chosen numerically, not by eye. Each
   text-on-tint pair clears WCAG AA on its own fill, measured with the same
   formula the tool implements: pass 5.71:1, AAA band 7.40:1, AA band 5.88:1,
   large-only band 6.48:1, fail band 6.18:1. A contrast checker whose own UI
   failed contrast would be a joke at its own expense. */

:root {
    --cc-panel: #ffffff;
    --cc-surface: #fffcf7;
    --cc-line: #e8ddd0;
    --cc-line-strong: #a36942;
    --cc-muted: #6b6259;
    --cc-ink: var(--color-cocoa);

    --cc-pass-bg: #e4f3e2;
    --cc-pass-text: #1a6b2f;
    --cc-pass-line: #a9d3a5;
    --cc-fail-bg: #fceceb;
    --cc-fail-text: #a13025;
    --cc-fail-line: #e7b7b1;

    --cc-band-aaa-bg: #d7eed3;
    --cc-band-aaa-text: #14532d;
    --cc-band-aa-bg: #e9f6e3;
    --cc-band-aa-text: #1a6b2f;
    --cc-band-aal-bg: #fdf3cf;
    --cc-band-aal-text: #6d5400;
    --cc-band-fail-bg: #fceceb;
    --cc-band-fail-text: #a13025;

    --cc-mono: ui-monospace, 'SF Mono', 'JetBrains Mono', Menlo, Consolas, monospace;

    /* The preview colors. JS drives these; the defaults match the JS state so
       the page is correct even before the script runs. */
    --pv-text: #3d2b1f;
    --pv-bg: #fef5ec;
    --pv-link: #7a4e31;
}

.cc-wrap {
    width: 100%;
    max-width: 72rem;
    margin: 0 auto;
    padding: 2rem 1.25rem 4.5rem;
}

/* ---- Centred intro ---- */
.cc-intro { margin-bottom: 2.25rem; text-align: center; }
.cc-title {
    font-size: 1.95rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: var(--cc-ink);
    margin: 0 0 0.5rem;
}
.cc-lede {
    color: var(--cc-muted);
    font-size: 0.95rem;
    line-height: 1.6;
    max-width: 62ch;
    margin: 0 auto;
}

/* ---- The workbench grid ---- */
.cc-app {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    align-items: start;
}
@media (min-width: 1024px) {
    .cc-app { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
}

.cc-panel {
    background: var(--cc-panel);
    border: 1px solid var(--cc-line);
    border-radius: 18px;
    padding: 1.5rem 1.6rem 1.7rem;
    box-shadow: 0 1px 2px rgb(61 43 31 / 0.04), 0 14px 34px -24px rgb(61 43 31 / 0.18);
}
.cc-panel-full { margin-top: 1.5rem; }
.cc-panel-title {
    font-size: 1.15rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: var(--cc-ink);
    margin: 0 0 1.4rem;
}
.cc-h3 {
    font-size: 0.98rem;
    font-weight: 700;
    color: var(--cc-ink);
    margin: 0 0 0.4rem;
}
.cc-note {
    font-size: 0.88rem;
    color: var(--cc-muted);
    line-height: 1.55;
    margin: 0 0 0.9rem;
    max-width: 70ch;
}
.cc-prose {
    font-size: 1rem;
    color: #44403c;
    line-height: 1.7;
    margin: 0 0 1.1rem;
    max-width: 65ch;
}
.cc-mono { font-family: var(--cc-mono); font-variant-numeric: tabular-nums; }

/* ---- Controls panel ---- */
.cc-field { margin-bottom: 1rem; }
.cc-field label {
    display: block;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--cc-ink);
    margin-bottom: 0.35rem;
}
.cc-label-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.35rem;
}
.cc-label-row label { margin-bottom: 0; }
.cc-field-row { display: flex; align-items: center; gap: 0.5rem; }
.cc-hex {
    width: 10.5rem;
    min-width: 0;
    font-family: var(--cc-mono);
    background: var(--cc-surface);
    border-color: var(--cc-line-strong);
    color: var(--cc-ink);
}
.cc-hex[aria-invalid='true'] { border-color: var(--cc-fail-text); }
/* Visually hidden until it has an error to report; still referenced by each
   field's aria-describedby so the format guidance always reaches a screen
   reader. Three identical "A 6 digit hex like" lines were visual noise. */
.cc-field .cc-hint {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
.cc-hint { font-size: 0.76rem; color: var(--cc-muted); margin: 0.3rem 0 0; }
/* The invalid state speaks in words. The valid and invalid border colors only
   measure 1.57:1 against each other, which is precisely the color-only
   signalling this page tells its visitors not to rely on. */
.cc-hint-error { color: var(--cc-fail-text); font-weight: 600; }
.cc-field .cc-hint.cc-hint-error {
    position: static;
    width: auto;
    height: auto;
    margin: 0.35rem 0 0;
    overflow: visible;
    clip: auto;
    white-space: normal;
}

/* The native color input, sized as a proper 44px touch target with a visible
   boundary, since a pale swatch otherwise disappears against the panel. */
#cc-text-pick, #cc-bg-pick, #cc-link-pick {
    width: 44px;
    height: 44px;
    padding: 3px;
    border: 1px solid var(--cc-line-strong);
    border-radius: 10px;
    background: var(--cc-panel);
    cursor: pointer;
    flex-shrink: 0;
}
#cc-text-pick::-webkit-color-swatch-wrapper, #cc-bg-pick::-webkit-color-swatch-wrapper, #cc-link-pick::-webkit-color-swatch-wrapper { padding: 0; }
#cc-text-pick::-webkit-color-swatch, #cc-bg-pick::-webkit-color-swatch, #cc-link-pick::-webkit-color-swatch { border: none; border-radius: 7px; }
#cc-text-pick::-moz-color-swatch, #cc-bg-pick::-moz-color-swatch, #cc-link-pick::-moz-color-swatch { border: none; border-radius: 7px; }
#cc-text-pick:focus-visible, #cc-bg-pick:focus-visible, #cc-link-pick:focus-visible,
.cc-hex:focus-visible {
    outline: 2px solid var(--color-espresso);
    outline-offset: 2px;
}

.cc-eye, .cc-swap {
    appearance: none;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    min-height: 44px;
    min-width: 44px;
    justify-content: center;
    padding: 0.35rem 0.6rem;
    font: inherit;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--cc-ink);
    background: var(--cc-panel);
    border: 1px solid var(--cc-line-strong);
    border-radius: 10px;
    cursor: pointer;
}
@media (hover: hover) {
    .cc-eye:hover, .cc-swap:hover { background: #f6ece2; color: var(--color-espresso); }
    .cc-preset:hover { border-color: var(--color-espresso); color: var(--color-espresso); background: var(--cc-panel); }
}
.cc-eye:focus-visible, .cc-swap:focus-visible, .cc-preset:focus-visible {
    outline: 2px solid var(--color-espresso);
    outline-offset: 2px;
}

.cc-presets {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-top: 1.35rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--cc-line);
}
.cc-presets-label {
    display: block;
    width: 100%;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--cc-ink);
    margin-bottom: 0.1rem;
}
.cc-preset {
    appearance: none;
    font: inherit;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--cc-ink);
    background: var(--cc-panel);
    border: 1px solid var(--cc-line-strong);
    border-radius: 9999px;
    padding: 0.4rem 0.85rem;
    min-height: 44px;
    cursor: pointer;
}

.cc-underline {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.9rem;
    font-size: 0.88rem;
    color: var(--cc-ink);
    cursor: pointer;
}

.cc-share {
    margin-top: 1.35rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--cc-line);
}
.cc-share-label {
    display: block;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--cc-ink);
    margin-bottom: 0.35rem;
}
.cc-share-row { display: flex; gap: 0.5rem; }
.cc-share-url {
    flex: 1;
    min-width: 0;
    font-family: var(--cc-mono);
    font-size: 0.78rem;
    background: var(--cc-surface);
    border-color: var(--cc-line-strong);
    color: var(--cc-ink);
}
.cc-share-url:focus-visible {
    outline: 2px solid var(--color-espresso);
    outline-offset: 2px;
}
.cc-btn-solid {
    --btn-color: var(--color-cocoa);
    --btn-fg: #fff;
    /* daisyUI's btn-sm is 32px and its default 40px; every other control on
       this page is a 44px target, so these two join them. */
    min-height: 44px;
}

/* ---- Results panel ---- */
.cc-hero {
    background: #ffffff;
    border: 1px solid var(--cc-line);
    border-radius: 12px;
    text-align: center;
    padding: 1.6rem 1rem 1.3rem;
}
.cc-hero-num {
    margin: 0;
    font-family: var(--cc-mono);
    font-variant-numeric: tabular-nums;
    font-size: clamp(2.4rem, 6vw, 3.4rem);
    font-weight: 700;
    line-height: 1;
    color: var(--cc-ink);
}
.cc-hero-sub { margin: 0.4rem 0 0; font-size: 0.85rem; color: var(--cc-muted); }

.cc-cards {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
    padding: 0;
    margin: 1rem 0 0;
}
@media (min-width: 480px) { .cc-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .cc-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1280px) { .cc-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
/* The whole card wears the verdict: green fill on pass, red on fail, no
   accent bar. Text on the tints was measured when the tints were chosen:
   5.71:1 on the pass fill, 6.18:1 on the fail fill. */
.cc-card {
    border-radius: 12px;
    padding: 1rem 0.7rem 0.9rem;
    text-align: center;
    background: var(--cc-pass-bg);
    border: 1px solid var(--cc-pass-line);
    color: var(--cc-pass-text);
}
.cc-card[data-state='fail'] {
    background: var(--cc-fail-bg);
    border-color: var(--cc-fail-line);
    color: var(--cc-fail-text);
}
.cc-card-level { display: block; font-weight: 800; font-size: 1rem; letter-spacing: 0.04em; }
.cc-card-kind { display: block; font-size: 0.78rem; margin-top: 0.1rem; }
.cc-card-verdict { display: block; font-weight: 800; font-size: 1.05rem; margin-top: 0.35rem; }
.cc-card-req { display: block; font-size: 0.74rem; margin-top: 0.2rem; opacity: 0.9; }

.cc-links { margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--cc-line); }
.cc-linkstats { margin: 0; }
.cc-linkstat {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.3rem 1rem;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--cc-line);
}
.cc-linkstat:last-of-type { border-bottom: 0; }
.cc-linkstat dt { font-size: 0.9rem; color: var(--cc-ink); font-weight: 600; }
.cc-linkstat dd { margin: 0; display: flex; align-items: center; gap: 0.5rem; }
.cc-linkstat .cc-mono { font-weight: 700; color: var(--cc-ink); }
.cc-badge {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 700;
    border-radius: 9999px;
    padding: 0.2rem 0.6rem;
    background: var(--cc-pass-bg);
    border: 1px solid var(--cc-pass-line);
    color: var(--cc-pass-text);
}
.cc-badge[data-state='fail'] {
    background: var(--cc-fail-bg);
    border-color: var(--cc-fail-line);
    color: var(--cc-fail-text);
}

.cc-fixes { margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--cc-line); }
.cc-fix-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.cc-fix {
    appearance: none;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font: inherit;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--cc-ink);
    background: var(--cc-panel);
    border: 1px solid var(--cc-line-strong);
    border-radius: 9999px;
    padding: 0.4rem 0.85rem 0.4rem 0.45rem;
    min-height: 44px;
    cursor: pointer;
}
@media (hover: hover) {
    .cc-fix:hover { border-color: var(--color-espresso); color: var(--color-espresso); background: var(--cc-panel); }
}
.cc-fix:focus-visible { outline: 2px solid var(--color-espresso); outline-offset: 2px; }
.cc-fix-swatch {
    width: 26px;
    height: 26px;
    border-radius: 9999px;
    border: 1px solid var(--cc-line-strong);
    flex-shrink: 0;
}
.cc-fix .cc-mono { font-weight: 700; }

/* ---- Vision simulation control ---- */
.cc-cvd {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    border: 0;
    padding: 0;
    margin: 0 0 0.75rem;
}
.cc-cvd-legend {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--cc-ink);
    padding: 0;
    margin-right: 0.35rem;
}
.cc-cvd-opt span {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0.4rem 0.85rem;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--cc-ink);
    background: var(--cc-panel);
    border: 1px solid var(--cc-line-strong);
    border-radius: 9999px;
    cursor: pointer;
}
.cc-cvd-opt input:checked + span {
    background: var(--cc-ink);
    border-color: var(--cc-ink);
    color: #fff;
}
.cc-cvd-opt input:focus-visible + span {
    outline: 2px solid var(--color-espresso);
    outline-offset: 2px;
}
@media (hover: hover) {
    .cc-cvd-opt input:not(:checked) + span:hover { border-color: var(--color-espresso); color: var(--color-espresso); background: var(--cc-panel); }
}

/* The filters apply to the samples only, never the size labels, so the page's
   own chrome stays readable while the user's colors are being simulated. */
.cc-cvd-prot .cc-sample { filter: url('#cc-flt-prot'); }
.cc-cvd-deuter .cc-sample { filter: url('#cc-flt-deuter'); }
.cc-cvd-trit .cc-sample { filter: url('#cc-flt-trit'); }

/* ---- Preview panel ---- */
/* Labels live on the panel background, samples on the chosen background, so a
   poorly chosen preview color can never swallow its own caption. */
.cc-preview-grid {
    display: grid;
    grid-template-columns: 1fr;
    border: 1px solid var(--cc-line-strong);
    border-radius: 12px;
    overflow: hidden;
}
.cc-size-label {
    margin: 0;
    padding: 0.55rem 1rem 0.15rem;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--cc-muted);
    background: var(--cc-panel);
}
.cc-size-label span {
    display: block;
    font-weight: 500;
    text-transform: none;
    letter-spacing: normal;
    padding-bottom: 0.35rem;
}
.cc-sample {
    background: var(--pv-bg);
    padding: 1rem 1.2rem;
}
.cc-sample p { margin: 0; color: var(--pv-text); overflow-wrap: break-word; }
.cc-s-h1 { font-size: 32px; font-weight: 700; line-height: 1.2; }
.cc-s-h2 { font-size: 24px; font-weight: 700; line-height: 1.25; }
.cc-s-large { font-size: 24px; font-weight: 400; line-height: 1.3; }
.cc-s-bold { font-size: 18.66px; font-weight: 700; line-height: 1.35; }
.cc-s-body { font-size: 16px; font-weight: 400; line-height: 1.6; }
.cc-s-small { font-size: 12px; font-weight: 400; line-height: 1.5; }
.cc-pv-link { color: var(--pv-link); text-decoration: underline; text-underline-offset: 2px; }
.cc-preview-grid.cc-no-underline .cc-pv-link { text-decoration: none; }

@media (min-width: 640px) {
    .cc-preview-grid { grid-template-columns: 11rem 1fr; }
    .cc-size-label {
        padding: 0.8rem 1rem;
        border-bottom: 1px solid var(--cc-line);
    }
    .cc-size-label span { padding-bottom: 0; margin-top: 0.15rem; }
    .cc-sample { border-bottom: 1px solid var(--cc-line); }
    .cc-size-label:nth-last-of-type(1), .cc-preview-grid > .cc-sample:last-child { border-bottom: 0; }
}

/* ---- Matrix panel ---- */
.cc-matrix-input { margin-bottom: 1rem; }
.cc-matrix-label {
    display: block;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--cc-ink);
    margin-bottom: 0.35rem;
}
.cc-matrix-row { display: flex; flex-direction: column; gap: 0.75rem; align-items: flex-start; }
.cc-palette {
    width: 100%;
    max-width: 20rem;
    font-family: var(--cc-mono);
    font-size: 0.88rem;
    background: var(--cc-surface);
    border-color: var(--cc-line-strong);
    color: var(--cc-ink);
}
.cc-palette:focus-visible { outline: 2px solid var(--color-espresso); outline-offset: 2px; }

/* A wide matrix scrolls inside its own container instead of pushing the page
   sideways, same rule as the prose tables. */
.cc-matrix-scroll { overflow-x: auto; margin-top: 1.25rem; }
.cc-matrix-scroll:focus-visible { outline: 2px solid var(--color-espresso); outline-offset: 2px; }
.cc-matrix-table {
    border-collapse: separate;
    border-spacing: 0;
    font-size: 0.85rem;
    border: 1px solid var(--cc-line);
    border-radius: 12px;
    overflow: hidden;
    background: #ffffff;
}
.cc-matrix-table th {
    font-family: var(--cc-mono);
    font-weight: 600;
    color: var(--cc-ink);
    padding: 0.6rem 0.75rem;
    text-align: left;
    white-space: nowrap;
    background: var(--cc-surface);
    border-bottom: 1px solid var(--cc-line);
    border-right: 1px solid var(--cc-line);
}
.cc-matrix-table th:last-child { border-right: 0; }
.cc-matrix-table tbody tr:last-child th { border-bottom: 0; }
/* Row headers stay put while the grid scrolls sideways on a phone. */
.cc-matrix-table tbody th,
.cc-matrix-table thead th:first-child {
    position: sticky;
    left: 0;
    z-index: 1;
}
.cc-matrix-table td {
    padding: 0;
    border-bottom: 1px solid var(--cc-line);
    border-right: 1px solid var(--cc-line);
}
.cc-matrix-table td:last-child { border-right: 0; }
.cc-matrix-table tbody tr:last-child td { border-bottom: 0; }
.cc-swatch {
    display: inline-block;
    width: 14px;
    height: 14px;
    border-radius: 4px;
    border: 1px solid var(--cc-line-strong);
    vertical-align: -2px;
    margin-right: 0.4rem;
}
.cc-cell {
    appearance: none;
    font: inherit;
    font-family: var(--cc-mono);
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    display: block;
    width: 100%;
    min-width: 4.6rem;
    min-height: 48px;
    padding: 0.55rem 0.5rem;
    border-radius: 0;
    border: 0;
    cursor: pointer;
    text-align: center;
}
.cc-cell.cc-band-aaa { background: var(--cc-band-aaa-bg); color: var(--cc-band-aaa-text); }
.cc-cell.cc-band-aa { background: var(--cc-band-aa-bg); color: var(--cc-band-aa-text); }
.cc-cell.cc-band-aal { background: var(--cc-band-aal-bg); color: var(--cc-band-aal-text); }
.cc-cell.cc-band-fail { background: var(--cc-band-fail-bg); color: var(--cc-band-fail-text); }
@media (hover: hover) {
    .cc-cell:hover { box-shadow: inset 0 0 0 2px var(--cc-ink); }
}
.cc-cell:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--color-espresso); }
.cc-cell-same {
    display: block;
    text-align: center;
    color: var(--cc-muted);
    background: #fbfaf8;
    padding: 0.55rem 0.5rem;
    min-height: 48px;
}

.cc-legend {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.5rem;
    margin: 1.25rem 0 0;
    padding: 0;
    font-size: 0.8rem;
    color: var(--cc-muted);
}
.cc-legend li { display: flex; align-items: center; gap: 0.45rem; }
.cc-dot {
    width: 14px;
    height: 14px;
    border-radius: 4px;
    border: 1px solid var(--cc-line-strong);
    display: inline-block;
}
.cc-dot.cc-band-aaa { background: var(--cc-band-aaa-bg); }
.cc-dot.cc-band-aa { background: var(--cc-band-aa-bg); }
.cc-dot.cc-band-aal { background: var(--cc-band-aal-bg); }
.cc-dot.cc-band-fail { background: var(--cc-band-fail-bg); }

/* ---- The learn column ---- */
.cc-learn { max-width: 46rem; margin: 4.5rem auto 0; }
.cc-step {
    margin-top: 3.25rem;
    padding-top: 2.5rem;
    border-top: 1px solid var(--cc-line);
}
.cc-learn > .cc-step:first-child { margin-top: 0; }
/* Real headings. The old 0.78rem uppercase labels sat visually BELOW the body
   text they were meant to head, which read upside down. */
.cc-step-label {
    font-size: 1.35rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: var(--cc-ink);
    margin: 0 0 1.1rem;
}
.cc-learn .cc-h3 { margin: 1.9rem 0 0.45rem; font-size: 1.08rem; }

.cc-table-scroll { overflow-x: auto; }
.cc-table {
    border-collapse: separate;
    border-spacing: 0;
    width: 100%;
    border: 1px solid var(--cc-line);
    border-radius: 12px;
    overflow: hidden;
    font-size: 0.92rem;
    background: var(--cc-panel);
}
.cc-table thead th {
    background: #f6ece2;
    color: var(--cc-ink);
    font-weight: 700;
    text-align: left;
    padding: 0.65rem 0.9rem;
}
.cc-table tbody th {
    font-weight: 500;
    text-align: left;
    color: #44403c;
}
.cc-table tbody th, .cc-table td {
    padding: 0.6rem 0.9rem;
    border-top: 1px solid var(--cc-line);
    vertical-align: top;
}
.cc-table td { font-family: var(--cc-mono); font-weight: 600; color: var(--cc-ink); white-space: nowrap; }

.cc-formula {
    background: #f5f5f4;
    border: 1px solid #e7e5e4;
    border-radius: 0.5em;
    padding: 0.9rem 1.1rem;
    margin: 0 0 1rem;
    overflow-x: auto;
}
.cc-formula code {
    font-family: var(--cc-mono);
    font-size: 0.92rem;
    color: #292524;
}

.cc-foot {
    margin-top: 4rem;
    font-size: 0.85rem;
    color: var(--cc-muted);
    text-align: center;
}
.cc-foot a { color: var(--color-caramel); text-decoration: underline; text-underline-offset: 2px; }
@media (hover: hover) { .cc-foot a:hover { color: var(--color-espresso); } }

@media (prefers-reduced-motion: no-preference) {
    .cc-sample, .cc-sample p, .cc-card, .cc-badge { transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease; }
}