/* Shared case study components: the options comparison (.cmp), data tables (.dt), status
   markers (.cmp-s), choices and callouts. Each page sets its own colors on the panel:
   --cmp-ground, --cmp-accent, --cmp-on-accent, --cmp-yes, --cmp-no, --cmp-part.
   One file, so a fix lands on every page that uses them. */
/* Comparison of options against the goals. A matrix from 992px up; below that each
   goal is a card listing the four options, so nothing scrolls sideways. */
.cmp-wrap { border: 1px solid var(--bs-border-color); border-radius: 20px; padding: clamp(1.25rem, 3.2vw, 2.5rem); background: var(--cmp-ground); }
.cmp-intro { max-width: 46rem; margin-bottom: clamp(1.25rem, 2.6vw, 2rem); }
.cmp-intro p { color: var(--bs-body-color); text-wrap: pretty; }
.cmp { width: 100%; border-collapse: separate; border-spacing: 0; table-layout: fixed; }
.cmp th, .cmp td { white-space: normal; padding: 1.05rem 1rem; vertical-align: top; text-align: left; border-top: 1px solid var(--bs-border-color); }
.cmp thead th, .cmp thead td { border-top: 0; padding-top: .9rem; padding-bottom: .9rem; vertical-align: bottom; font-size: .8rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--bs-secondary-color); line-height: 1.35; text-wrap: balance; }
.cmp tbody th { width: 21%; font-size: 1rem; font-weight: 600; line-height: 1.4; color: var(--bs-heading-color); text-wrap: pretty; }
.cmp .is-chosen { background: color-mix(in oklab, var(--cmp-accent) 10%, transparent); }
.cmp thead .is-chosen { border-radius: 14px 14px 0 0; color: var(--bs-heading-color); }
.cmp tbody tr:last-child .is-chosen { border-radius: 0 0 14px 14px; }
.cmp tbody .is-chosen { border-top-color: color-mix(in oklab, var(--cmp-accent) 22%, transparent); }
.cmp-badge { display: table; margin-bottom: .45rem; padding: .2rem .55rem; border-radius: 999px; background: var(--cmp-accent); color: var(--cmp-on-accent); font-size: .68rem; letter-spacing: .08em; }
.cmp-s { display: inline-flex; align-items: center; gap: .4rem; font-weight: 700; font-size: .95rem; line-height: 1.3; }
.cmp-s svg { width: 1.1em; height: 1.1em; flex: none; }
.cmp-s.is-yes { color: var(--cmp-yes); }
.cmp-s.is-no { color: var(--cmp-no); }
.cmp-s.is-part { color: var(--cmp-part); }
.cmp-note { display: block; margin-top: .35rem; font-size: .95rem; line-height: 1.5; color: var(--bs-secondary-color); text-wrap: pretty; }
.cmp .is-chosen .cmp-note { color: var(--bs-body-color); }
@media (max-width: 991.98px) {
    .cmp, .cmp tbody, .cmp tr, .cmp tbody th, .cmp td { display: block; width: auto; }
    .cmp thead { display: block; position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
    .cmp tbody tr { margin-top: 1rem; padding: .35rem 0 .5rem; border: 1px solid var(--bs-border-color); border-radius: 16px; background: var(--bs-body-bg); }
    .cmp tbody tr:first-child { margin-top: 0; }
    .cmp tbody th { border-top: 0; padding: 1rem 1.1rem .6rem; font-size: 1.05rem; }
    .cmp td { display: grid; grid-template-columns: minmax(8rem, 36%) 1fr; column-gap: 1rem; padding: .8rem 1.1rem; }
    .cmp td::before { content: attr(data-label); grid-row: 1 / span 2; font-size: .9rem; font-weight: 600; line-height: 1.35; color: var(--bs-secondary-color); padding-top: .05rem; }
    .cmp .cmp-s, .cmp .cmp-note { grid-column: 2; }
    .cmp .cmp-note { margin-top: .2rem; }
    .cmp td.is-chosen, .cmp tbody tr:last-child td.is-chosen { margin: .35rem .5rem 0; padding-left: .6rem; padding-right: .6rem; border-top: 0; border-radius: 12px; }
    .cmp td.is-chosen::before { color: var(--bs-heading-color); }
}
@media (max-width: 459.98px) {
    .cmp td { grid-template-columns: 1fr; row-gap: .3rem; }
    .cmp td::before { grid-row: auto; }
    .cmp .cmp-s, .cmp .cmp-note { grid-column: 1; }
}
/* Data tables (the October bills, the success measures). A table from 992px up; below
   that each row is a card with its labels, so nothing scrolls sideways. Shares the
   comparison's panel and status colors. */
.dt { width: 100%; border-collapse: separate; border-spacing: 0; table-layout: fixed; }
.dt th, .dt td { overflow-wrap: break-word; white-space: normal; padding: 1rem .9rem; vertical-align: top; text-align: left; border-top: 1px solid var(--bs-border-color); text-wrap: pretty; line-height: 1.5; }
.dt thead th { border-top: 0; padding-top: 0; padding-bottom: .85rem; vertical-align: bottom; font-size: .8rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--bs-secondary-color); white-space: nowrap; }
.dt tbody th { font-weight: 600; color: var(--bs-heading-color); }
.dt .num { text-align: right; white-space: nowrap; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-variant-numeric: tabular-nums; font-size: .95rem; color: var(--bs-heading-color); }
.dt thead th.num { font-family: inherit; font-size: .8rem; color: var(--bs-secondary-color); }
.dt td.is-quiet { color: var(--bs-secondary-color); }
.dt-measures tbody th { width: 26%; }
.dt-measures .dt-target { width: 9rem; font-weight: 700; font-size: 1.05rem; color: var(--cmp-accent); }
.dt tr.dt-group th { border-top: 0; padding: 1.6rem .9rem .5rem; font-size: .8rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--cmp-accent); }
.dt tbody:first-of-type tr.dt-group th { padding-top: .4rem; }
.cmp-s.is-paid { color: var(--cmp-yes); }
.cmp-s.is-wait { color: var(--cmp-accent); }
.cmp-s.is-ask { color: var(--cmp-part); }
@media (max-width: 991.98px) {
    .dt, .dt tbody, .dt tr, .dt tbody th, .dt td { display: block; width: auto !important; }
    .dt thead { display: block; position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
    .dt tbody tr { margin-top: .9rem; padding: .3rem 0 .45rem; border: 1px solid var(--bs-border-color); border-radius: 16px; background: var(--bs-body-bg); }
    .dt tbody:first-of-type tr:first-child { margin-top: 0; }
    .dt tbody th { border-top: 0; padding: .95rem 1.1rem .5rem; font-size: 1.05rem; }
    .dt td { display: block; padding: .7rem 1.1rem; text-align: left; }
    .dt td::before { content: attr(data-label); display: block; margin-bottom: .2rem; font-family: var(--bs-body-font-family); font-size: .9rem; font-weight: 600; color: var(--bs-secondary-color); line-height: 1.4; }
    .dt td.num { white-space: normal; text-align: left; }
    .dt tr.dt-group { margin: 1.6rem 0 0; padding: 0; border: 0; background: none; }
    .dt tbody:first-of-type tr.dt-group { margin-top: 0; }
    .dt tr.dt-group th { padding: 0 .2rem .1rem; }
    .dt tr.dt-group + tr { margin-top: .6rem; }
}
@media (max-width: 459.98px) {
    .dt td { grid-template-columns: 1fr; row-gap: .25rem; }
    .dt td::before { grid-row: auto; }
    .dt td > * { grid-column: 1; }
}

/* Choices: a short set of options a person can take, each a verb with its line. Two
   across, then one across on a phone. */
.choices { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
.choices li { display: grid; grid-template-columns: auto 1fr; column-gap: .8rem; align-items: start; align-content: start; padding: 1rem 1.1rem; border: 1px solid var(--bs-border-color); border-radius: 14px; background: var(--cmp-ground, transparent); }
.choices .ic { grid-row: span 2; width: 2.1rem; height: 2.1rem; border-radius: 10px; display: grid; place-items: center; color: var(--cmp-accent); background: color-mix(in oklab, var(--cmp-accent) 12%, transparent); }
.choices .ic svg { width: 1.15rem; height: 1.15rem; }
.choices b { display: block; font-size: 1.02rem; color: var(--bs-heading-color); line-height: 1.35; }
.choices span.d { display: block; margin-top: .15rem; font-size: .95rem; line-height: 1.5; color: var(--bs-secondary-color); text-wrap: pretty; }
@media (max-width: 575.98px) { .choices { grid-template-columns: 1fr; } }

/* Callout: one question or claim the section turns on, set apart in the panel. */
.callout { border-left: 3px solid var(--cmp-accent); padding: .2rem 0 .2rem 1.1rem; margin: 1rem 0 0; font-size: clamp(1.15rem, 1.6vw, 1.35rem); line-height: 1.45; font-weight: 600; color: var(--bs-heading-color); text-wrap: pretty; }

/* Defaults for pages that set no panel colors of their own. :where() keeps them at zero
   specificity, so a page's own --cmp-* values always win. */
:where(.cmp-wrap, .dt) { --cmp-ground: color-mix(in oklab, currentColor 3%, transparent); --cmp-accent: var(--bs-link-color, #0d7d68); --cmp-on-accent: #ffffff; --cmp-yes: #11765c; --cmp-no: #b42335; --cmp-part: #8a5e10; }
:where([data-bs-theme="dark"] .cmp-wrap, [data-bs-theme="dark"] .dt) { --cmp-on-accent: #04141a; --cmp-yes: #5fd3ad; --cmp-no: #ff8f9b; --cmp-part: #f2c062; }
/* Wolf-Rayet does not load Bootstrap, so its panels map the colors these components read
   onto the system's own tokens. */
:where(.wr-cmp) { --bs-border-color: var(--sys-color-border); --bs-secondary-color: var(--sys-color-text-secondary); --bs-heading-color: var(--sys-color-text-primary); --bs-body-color: var(--sys-color-text-primary); --bs-body-bg: var(--sys-color-surface); --cmp-accent: var(--sys-color-accent-text); --cmp-ground: var(--sys-color-surface); }

/* Label and value lists: a data table with no column headers. */
.dt-kv tbody th { width: 30%; }
.dt-kv tbody tr:first-child th, .dt-kv tbody tr:first-child td { border-top: 0; }
@media (max-width: 991.98px) {
    .dt td:not([data-label]) { display: block; }
    .dt td:not([data-label])::before { content: none; }
}

/* Rules: a short numbered set of principles. Five across on a wide screen, a numbered
   list below that, so a row never ends with one card alone. */
.rules { list-style: none; counter-reset: r; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .75rem; }
.rules li { counter-increment: r; padding: 1rem 1.1rem; border: 1px solid var(--bs-border-color); border-radius: 14px; background: var(--cmp-ground); font-weight: 600; font-size: 1.02rem; line-height: 1.35; color: var(--bs-heading-color); text-wrap: balance; }
.rules li::before { content: counter(r, decimal-leading-zero); display: block; margin-bottom: .45rem; font-family: var(--bs-font-monospace); font-size: .8rem; font-weight: 700; color: var(--cmp-accent); }
@media (max-width: 991.98px) {
    .rules { grid-template-columns: 1fr; gap: .5rem; }
    .rules li { display: grid; grid-template-columns: 2.4rem 1fr; align-items: baseline; padding: .8rem 1rem; }
    .rules li::before { margin: 0; }
}