/* ACBB layer system
 *
 * Two colors carry one distinction across the whole book:
 *   teal    = concepts        (slow-moving; what is true)
 *   magenta = implementations (fast-moving; what to run today)
 *
 * Both come from the rtemis palette (`acbb_colors` in _setup.R), by name.
 * Implementations were orange until 2026-08. Orange collided with the warning
 * color Bootstrap gives callouts, and under `callout-appearance: simple` a
 * warning renders as an orange left rail -- the same shape and nearly the same
 * hue as an implementation section rail, on pages that are not about
 * implementations. Magenta is unclaimed, so the collision cannot recur.
 * They are declared ONCE here and referenced everywhere else. If a third teal
 * shows up in this book, it is a bug.
 *
 * Color never carries the distinction alone: every use is paired with a text
 * label or an icon, so the system survives colorblind readers and print.
 *
 * Three tiers, in increasing specificity:
 *   1. chapter  — .acbb-eyebrow above the title, plus a sidebar dot
 *   2. section  — ::: {.concept} / ::: {.implementation}, a left accent rail
 *   3. item     — .acbb-tool-card, a full card, which is card-sized content
 */

:root {
    /* The rtemis palette, by upstream name. Source of truth is
     * rtemis.core/R/01_rtemis_color_system.R, mirrored into `acbb_colors` in
     * _setup.R. Only the entries this book actually spends are listed, so
     * grepping --rt- answers "which palette entries does ACBB use". Nothing
     * below this block should carry a raw hex from the palette. */
    --rt-teal: #6CA3A0;
    --rt-magenta: #BE2E5F;
    --rt-green: #0F6A66;
    --rt-light-orange: #FDB808;
    --rt-red: #EA384A;
    --rt-blue: #466D96;

    /* Palette entries, as-is, for rails and borders */
    --acbb-concept: var(--rt-teal);
    --acbb-impl: var(--rt-magenta);

    /* Text-weight variants. Measured against the surfaces they actually sit
     * on -- the 18% tint used by badges and chips, not plain white, which is
     * the more demanding case. #40736F reaches 4.6:1 on its tint and #AB2955
     * reaches 5.0:1; the raw palette colors reach 2.8:1 and 4.2:1, both short
     * of the 4.5:1 body-text threshold. */
    --acbb-concept-ink: #40736F;
    --acbb-impl-ink: #AB2955;

    /* Fill tints. Kept very low: a rail plus a whisper of color reads as
     * structure, a saturated block reads as a warning. */
    --acbb-concept-wash: color-mix(in srgb, var(--acbb-concept) 7%, transparent);
    --acbb-impl-wash: color-mix(in srgb, var(--acbb-impl) 7%, transparent);

    --acbb-rail: 3px;
}

/* On #181818 the teal clears contrast on its own but the magenta does not
 * (3.2:1), so both inks are lightened: 6.6:1 and 5.1:1 on their tints. */
.quarto-dark {
    --acbb-concept-ink: #8FBFBC;
    --acbb-impl-ink: #D47797;
    --acbb-concept-wash: color-mix(in srgb, var(--acbb-concept) 10%, transparent);
    --acbb-impl-wash: color-mix(in srgb, var(--acbb-impl) 10%, transparent);
}

/* ---------------------------------------------------------------- tier 1 */
/* Chapter badge, emitted by layer_header() in _setup.R, just under the title.
 *
 * The layer modifiers are `is-concept` / `is-implementation`. They must NOT be
 * `concept` / `implementation`: those are the section-rail selectors in tier 2,
 * and reusing them here gave the badge a left rail, padding and a background
 * wash, which made a one-word label read as a pull quote. */

.acbb-eyebrow {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin: 0 0 1.4rem;
}

/* Semi-transparent fill plus a thin solid border in the same hue. The border
 * is what makes the shape read at this size -- a tint alone on a white page is
 * too faint to look deliberate, and too heavy if you darken it enough to see.
 *
 * line-height is set explicitly: at `1` the cap height of the uppercase label
 * filled the whole line box and the pill looked cropped top and bottom. */
.acbb-layer {
    display: inline-flex;
    align-items: center;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    line-height: 1.5;
    padding: 0.14rem 0.62rem;
    border: 1px solid;
    border-radius: 999px;
    white-space: nowrap;
}

.acbb-layer.is-concept {
    color: var(--acbb-concept-ink);
    background: color-mix(in srgb, var(--acbb-concept) 12%, transparent);
    border-color: color-mix(in srgb, var(--acbb-concept) 42%, transparent);
}

.acbb-layer.is-implementation {
    color: var(--acbb-impl-ink);
    background: color-mix(in srgb, var(--acbb-impl) 12%, transparent);
    border-color: color-mix(in srgb, var(--acbb-impl) 42%, transparent);
}

/* The review stamp rides beside the badge rather than at the far margin: a
 * compact badge with a date flung to the right reads as a header bar again. */
.acbb-eyebrow .acbb-reviewed {
    font-size: 0.75rem;
    color: var(--bs-secondary-color, #888);
}

/* ---------------------------------------------------------------- tier 2 */
/* Section rails. Deliberately NOT a full box: a border around several hundred
 * words fights readability and collapses to a screen-edge line on mobile. */

.concept,
.implementation {
    border-left: var(--acbb-rail) solid;
    padding: 0.1rem 0 0.1rem 1rem;
    margin: 1.25rem 0;
}

.concept {
    border-left-color: var(--acbb-concept);
    background: var(--acbb-concept-wash);
}

.implementation {
    border-left-color: var(--acbb-impl);
    background: var(--acbb-impl-wash);
}

.concept > :last-child,
.implementation > :last-child { margin-bottom: 0; }

/* ---------------------------------------------------------------- tier 3 */
/* Tool cards. Here a full border IS right — this is card-sized content.
 * Shadow and radius follow .note-rt in rtemis.css so the two read as one system. */

.acbb-tool-card {
    border: 1px solid color-mix(in srgb, var(--acbb-impl) 35%, transparent);
    border-radius: .33rem;
    padding: 1rem 1.1rem;
    margin: 1rem 0;
    background: var(--bs-body-bg);
    box-shadow: 0 2px 8px color-mix(in srgb, var(--bs-body-color) 8%, transparent);
    transition: box-shadow 0.3s ease;
}

.acbb-tool-card:hover {
    box-shadow: 0 4px 12px color-mix(in srgb, var(--bs-body-color) 16%, transparent);
}

.acbb-tool-head {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.4rem;
}

.acbb-tool-name {
    font-size: 1.1rem;
    font-weight: 700;
    font-family: "Fira Code", monospace;
}

.acbb-tool-name a { color: var(--bs-body-color); }
.acbb-tool-name a:hover { color: var(--acbb-impl-ink); }

.acbb-tool-rationale { margin: 0.4rem 0 0.6rem; }

/* The rationale and the table's "why" cell are parsed as markdown so their
 * citations resolve (see md_block() in _setup.R), which wraps them in a <p>.
 * Strip its margins so the block measures exactly as it did as raw text. */
.acbb-tool-rationale > p,
.acbb-tool-table td > p { margin: 0; }

.acbb-tool-caveat {
    font-size: 0.85rem;
    color: var(--bs-secondary-color, #888);
    border-top: 1px solid var(--bs-border-color, #ddd);
    padding-top: 0.5rem;
    margin-top: 0.6rem;
}

.acbb-tool-caveat::before {
    content: "Caveat — ";
    font-weight: 600;
    color: var(--acbb-impl-ink);
}

.acbb-tool-meta {
    font-size: 0.8rem;
    color: var(--bs-secondary-color, #888);
    display: flex;
    flex-wrap: wrap;
    gap: 0.9rem;
    margin-top: 0.5rem;
}

/* Verdict and status badges. Always carry their own text — the color is a
 * second channel, never the only one. */

.acbb-badge {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    padding: 0.15rem 0.45rem;
    border-radius: 0.2rem;
    white-space: nowrap;
}

.acbb-badge.verdict-recommended {
    color: var(--acbb-impl-ink);
    background: color-mix(in srgb, var(--acbb-impl) 16%, transparent);
}

.acbb-badge.verdict-viable,
.acbb-badge.verdict-legacy,
.acbb-badge.verdict-avoid {
    color: var(--bs-secondary-color, #777);
    background: color-mix(in srgb, var(--bs-body-color) 8%, transparent);
}

.acbb-badge.verdict-avoid { text-decoration: line-through; }

.acbb-status { font-variant: small-caps; white-space: nowrap; }
.acbb-status.status-active::before,
.acbb-status.status-maintained::before,
.acbb-status.status-dormant::before,
.acbb-status.status-superseded::before,
.acbb-status.status-deprecated::before {
    content: "";
    display: inline-block;
    width: 0.45rem;
    height: 0.45rem;
    border-radius: 50%;
    margin-right: 0.3rem;
}

/* Status hues run healthy -> steady -> caution -> stop. Two constraints beyond
 * that: none may be a layer color (the `maintained` dot was the concept teal
 * until 2026-08, which is exactly the collision rule 3 forbids), and each must
 * stay far enough from the others to survive a 7px dot. Green sits dE 24 from
 * the concept teal, which clears it -- and every dot is printed beside its own
 * word, so the color reinforces the label rather than carrying it. */
.acbb-status.status-active::before { background: var(--rt-green); }
.acbb-status.status-maintained::before { background: var(--rt-blue); }
.acbb-status.status-dormant::before { background: var(--rt-light-orange); }
.acbb-status.status-superseded::before,
.acbb-status.status-deprecated::before { background: var(--rt-red); }

/* Language chips. The densest element on the page: cross-language coverage is
 * the book's distinguishing claim, so it has to be readable in one pass.
 * A dimmed chip is a finding, not an omission — it says "not available here". */

.acbb-langs {
    display: inline-flex;
    gap: 0.25rem;
    flex-wrap: wrap;
}

.acbb-chip {
    font-family: "Fira Code", monospace;
    font-size: 0.7rem;
    line-height: 1;
    padding: 0.22rem 0.36rem;
    border-radius: 0.2rem;
    border: 1px solid transparent;
}

.acbb-chip.native {
    color: var(--bs-body-bg);
    background: var(--bs-body-color);
}

.acbb-chip.bound {
    color: var(--acbb-impl-ink);
    background: color-mix(in srgb, var(--acbb-impl) 14%, transparent);
    border-color: color-mix(in srgb, var(--acbb-impl) 35%, transparent);
}

/* Long-tail table. Everything the cards did not cover, one line each. */

.acbb-tool-table {
    width: 100%;
    /* Without a floor the "why" column collapses to one word per line on a
     * phone and the rows grow absurdly tall, which is a worse failure than a
     * sideways scroll. The floor makes .acbb-scroll below actually do its job. */
    min-width: 34rem;
    font-size: 0.85rem;
    border-collapse: collapse;
    margin: 1rem 0;
}

.acbb-tool-table th {
    text-align: left;
    font-size: 0.7rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--bs-secondary-color, #888);
    border-bottom: 2px solid var(--acbb-impl);
    padding: 0.4rem 0.5rem;
}

.acbb-tool-table td {
    padding: 0.55rem 0.5rem;
    border-bottom: 1px solid var(--bs-border-color, #e5e5e5);
    vertical-align: top;
}

.acbb-tool-table td:first-child { font-family: "Fira Code", monospace; white-space: nowrap; }
.acbb-tool-table tr:hover td { background: var(--acbb-impl-wash); }

/* A wide table must scroll inside its own box, never the page body. */
.acbb-scroll { overflow-x: auto; }

@media (max-width: 600px) {
    .acbb-tool-table { font-size: 0.8rem; }
    .acbb-tool-meta { gap: 0.5rem; }
}