/* ────────────────────────────────────────────────────────────────
   Personix — review.css  ·  v2 (Stage 2 redesign)

   Drop-in replacement for wwwroot/css/review.css.
   Preserves the existing class vocabulary so the Razor markup keeps
   working; adds new modifiers (--hero, --gift, --info-flat), the
   group-break component, eyebrow labels, the ribbon motif, the
   revised phase rings, and the paper-inset writing surface.

   Self-hosted IM Fell English declared below. Drop the woff2 files
   into wwwroot/fonts/im-fell-english/ (see README.txt there). If
   the font is missing the page degrades gracefully to Palatino.
   ──────────────────────────────────────────────────────────────── */


/* ── self-hosted display face ─────────────────────────────────── */
@font-face {
    font-family: "IM Fell English";
    src: url("/fonts/im-fell-english/IMFellEnglish-Regular.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "IM Fell English";
    src: url("/fonts/im-fell-english/IMFellEnglish-Italic.woff2") format("woff2");
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}


/* ── page surface (unchanged token, kept for back-compat) ─────── */
::deep body[b-qpcwhbx7gc],
.review-page-bg[b-qpcwhbx7gc] { background-color: #f6e7c5; }


/* ── design tokens (scoped to .review) ────────────────────────── */
.review {
    /* color */
    --paper:           #f6e7c5;  /* canvas */
    --paper-inset:     #efdcb4;  /* darker writing surface (new) */
    --paper-shade:     #e9d6a8;  /* slightly darker still, for stamps */
    --ink:             #2b211b;
    --ink-soft:        #5b4d44;
    --ink-faded:       #6e5e54;
    --ink-ghost:       #a89887;
    --rule:            #b8a890;
    --rule-quiet:      #d6c4a3;  /* faint hairlines (new) */
    --accent-warm:     #c56a3a;  /* primary action */
    --accent-warm-d:   #b56a1d;
    --accent-blue:     #3f6b7a;
    --accent-blue-d:   #2e5260;
    --accent-clay:     #b64a3a;
    --accent-sienna:   #9a6b3e;  /* donations · replaces success green */
    --accent-sienna-d: #6e4b27;

    /* type */
    --font-serif:  "Palatino", "Palatino Linotype", "Book Antiqua", Georgia, serif;
    --font-title:  "IM Fell English", "Palatino", "Palatino Linotype", Georgia, serif;
    --font-sans:   -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif;
    --font-mono:   ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

    /* reading column */
    width: min(820px, 92%);
    max-width: min(820px, 92%);
    margin: 0 auto;
    padding: 24px 0 64px;
    color: var(--ink);
    font-family: var(--font-serif);
    font-size: 17px;
    line-height: 1.6;
}


/* ── language switcher ────────────────────────────────────────── */
.review__lang {
    background: transparent;
    box-shadow: none;
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    font-family: var(--font-sans);
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.04em;
}

.review__lang--top {
    display: flex;
    justify-content: flex-end;
    margin: 0 0 14px;
    padding: 4px 2px 8px;
    border-bottom: 1px solid rgba(43, 33, 27, 0.12);
    font-size: 0.78rem;
    letter-spacing: 0.06em;
}

.review__lang-link {
    color: var(--ink-faded);
    text-decoration: none;
    padding: 0.1rem 0.45rem;
    border-radius: 3px;
    transition: color .12s ease, background-color .12s ease;
}
.review__lang-link:hover {
    color: var(--ink);
    background-color: rgba(197, 106, 58, 0.1);
}
.review__lang-link--active {
    color: var(--ink);
    background-color: rgba(43, 33, 27, 0.1);
}
.review__lang-sep {
    color: var(--rule);
    user-select: none;
}


/* ── cover ────────────────────────────────────────────────────── */
.review__cover {
    margin: 0 0 14px;
    text-align: center;
}
.review__lang--top + .review__cover { margin-top: 4px; }

.review__cover img {
    width: 100%;
    height: auto;
    display: block;
}

.review__cover-caption {
    margin: 12px 0 0;
    font-family: var(--font-serif);
    font-style: italic;
    color: var(--ink-soft);
    font-size: 0.95rem;
    line-height: 1.45;
}


/* ── group break (NEW)
   A typographic rest between narrative beats: § + label flanked by
   short rules. Rendered as one component <GroupBreak Label="…" />. */
.review__group-break {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin: 48px 0 24px;
    color: var(--ink-faded);
    font-family: var(--font-sans);
    font-size: 0.68rem;
    letter-spacing: 0.28em;
    text-transform: uppercase;
}

.review__group-break-rule {
    flex: 0 1 110px;
    height: 1px;
    background: var(--rule-quiet);
}

.review__group-break-label {
    white-space: nowrap;
}

.review__group-break-glyph {
    font-family: var(--font-title);
    font-style: italic;
    font-size: 1.05rem;
    letter-spacing: 0;
    text-transform: none;
    margin-right: 4px;
    vertical-align: -0.08em;
    color: var(--ink-soft);
}

@media (max-width: 520px) {
    .review__group-break {
        margin: 32px 0 16px;
        font-size: 0.62rem;
        letter-spacing: 0.22em;
    }
    .review__group-break-rule { flex-basis: 56px; }
}


/* ── callout · base ───────────────────────────────────────────── */
.review__callout {
    margin: 0 0 1.75rem;
    padding: 22px 24px 24px;
    border-radius: 4px;
    border: 1px solid;
    background-color: var(--callout-bg);
    display: flow-root;  /* contain floated mugshot */
}

.review__callout--accent {
    --callout-bg: rgba(199, 144, 58, 0.07);
    --callout-color: var(--accent-warm-d);
    border-color: rgba(199, 144, 58, 0.32);
}

.review__callout--info {
    --callout-bg: rgba(63, 107, 122, 0.05);
    --callout-color: var(--accent-blue);
    border-color: rgba(63, 107, 122, 0.28);
}

/* GIFT replaces the old SUCCESS — sienna, not green */
.review__callout--gift {
    --callout-bg: rgba(154, 107, 62, 0.06);
    --callout-color: var(--accent-sienna);
    border-color: rgba(154, 107, 62, 0.34);
}

.review__callout--warning {
    --callout-bg: rgba(182, 74, 58, 0.05);
    --callout-color: var(--accent-clay);
    border-color: rgba(182, 74, 58, 0.30);
}

.review__callout--neutral {
    --callout-bg: rgba(108, 92, 76, 0.05);
    --callout-color: #6c5c4c;
    border-color: rgba(108, 92, 76, 0.26);
}

/* HERO modifier — for the pamphlet primary download */
.review__callout--hero {
    padding: 30px 30px 30px;
    border-left-width: 3px;
}

/* INFO-FLAT modifier — used for the Whitepaper.
   Strips the box; just a hairline rule on top. Reads as "and there's
   also this," not as a co-equal action. */
.review__callout--info-flat {
    --callout-bg: transparent;
    border: none;
    border-top: 1px solid var(--rule-quiet);
    border-radius: 0;
    margin-top: -0.4rem;
    padding: 18px 0 12px;
}


/* ── callout · head (eyebrow + title + ribbon motif) ─────────── */
.review__callout-head {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    padding-bottom: 10px;
    margin-bottom: 14px;
    border-bottom: 1px solid rgba(43, 33, 27, 0.10);
}

.review__callout--info-flat .review__callout-head {
    border-bottom: none;
    margin-bottom: 6px;
    padding-bottom: 0;
}

.review__callout-eyebrow {
    margin: 0;
    font-family: var(--font-sans);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--callout-color);
    opacity: 0.95;
}

.review__callout-head h2,
.review__callout-title {
    margin: 0;
    font-family: var(--font-title);
    font-weight: 400;
    font-size: 1.6rem;
    line-height: 1.1;
    color: var(--ink);
    letter-spacing: 0.005em;
}

.review__callout--hero .review__callout-head h2,
.review__callout--hero .review__callout-title {
    font-size: 1.9rem;
}

.review__callout--info-flat .review__callout-head h2,
.review__callout--info-flat .review__callout-title {
    font-size: 1.2rem;
    color: var(--accent-blue-d);
}

.review__callout-note {
    margin: 0 0 0.85rem;
    color: var(--ink-soft);
    font-size: 0.96rem;
    line-height: 1.55;
}

.review__callout--hero .review__callout-note {
    color: var(--ink);
    font-size: 1rem;
    font-style: italic;
}


/* ── ribbon motif (the typographic motif, used everywhere) ─────
   Two horizontal rules of unequal length sitting under a title.
   Echoes the cover's PERSONIX double-underline. CSS-only. */
.review__ribbon {
    display: block;
    width: 100%;
    height: 7px;
    margin: 6px 0 2px;
    position: relative;
}
.review__ribbon::before,
.review__ribbon::after {
    content: "";
    position: absolute;
    left: 0;
    background: var(--callout-color, var(--ink));
}
.review__ribbon::before {
    top: 0;
    width: 100%;
    height: 1.5px;
    opacity: 0.7;
}
.review__ribbon::after {
    top: 4px;
    width: 38%;
    height: 1px;
    opacity: 0.55;
}

.review__ribbon--quiet { height: 5px; }
.review__ribbon--quiet::before { height: 1px; opacity: 0.5; }
.review__ribbon--quiet::after { top: 3px; width: 30%; height: 1px; opacity: 0.4; }


/* ── download buttons ─────────────────────────────────────────── */
.review__btn-row {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin: 0.9rem 0 0.2rem;
}

.review__btn-row--hero {
    gap: 14px;
    margin-top: 1.1rem;
}

.review__btn {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 14px 22px;
    border-radius: 3px;
    text-decoration: none;
    font-family: var(--font-sans);
    font-weight: 700;
    font-size: 1.05rem;
    line-height: 1.2;
    letter-spacing: 0.01em;
    transition: transform .12s ease, box-shadow .12s ease,
                background-color .12s ease, color .12s ease;
    border: 1.5px solid transparent;
    /* border-box: tlačítka s `width: 100%` v mobile media query (řádek 443)
       musí počítat padding + border DOVNITŘ své šířky, jinak přečnívají
       parent .review__callout (který má 18px horizontální padding na mobile).
       Bez tohoto resetu = 100% parent + 44px padding + 3px border → ~47px
       přesah vpravo na úzkém viewportu. */
    box-sizing: border-box;
}

.review__btn:hover { transform: translateY(-1px); }

.review__btn--primary {
    background-color: var(--accent-warm);
    color: var(--paper);
    box-shadow: 2px 2px 0 rgba(43, 33, 27, 0.28);
}
.review__btn--primary:hover {
    background-color: #d9804b;
    color: var(--paper);
    box-shadow: 3px 4px 0 rgba(43, 33, 27, 0.32);
}

.review__btn--secondary {
    background-color: transparent;
    color: var(--accent-warm);
    border-color: var(--accent-warm);
}
.review__btn--secondary:hover {
    background-color: rgba(199, 144, 58, 0.1);
    color: var(--accent-warm-d);
}

.review__btn--info {
    background-color: rgba(63, 107, 122, 0.08);
    color: var(--accent-blue);
    border-color: rgba(63, 107, 122, 0.5);
}
.review__btn--info:hover {
    background-color: rgba(63, 107, 122, 0.16);
    color: var(--accent-blue-d);
}

.review__btn--disabled {
    background-color: rgba(168, 152, 135, 0.1);
    color: var(--ink-ghost);
    border-color: rgba(168, 152, 135, 0.4);
    border-style: dashed;
    cursor: not-allowed;
    font-style: italic;
    font-weight: 500;
}
.review__btn--disabled:hover { transform: none; }

.review__btn--compact {
    padding: 9px 14px;
    font-size: 0.9rem;
    font-weight: 600;
}

.review__btn-icon {
    font-size: 1.15em;
    font-weight: 800;
    opacity: 0.9;
}
.review__btn-label { font-weight: inherit; }
.review__btn-meta {
    font-size: 0.78em;
    font-weight: 500;
    opacity: 0.78;
}

@media (max-width: 520px) {
    .review__btn { width: 100%; justify-content: center; }
    .review__btn-row { flex-direction: column; }
}


/* ── donate grid ──────────────────────────────────────────────── */
.review__donate-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
    margin: 0 0 1.25rem;
}

.review__donate-channel {
    display: flex;
    gap: 0.85rem;
    align-items: flex-start;
}

.review__donate-qr {
    width: 96px;
    height: 96px;
    flex-shrink: 0;
    border: 1px solid rgba(43, 33, 27, 0.15);
    border-radius: 3px;
    background: var(--paper-inset);   /* no more pure white */
    padding: 4px;
    box-sizing: content-box;
}

.review__donate-meta {
    flex: 1;
    min-width: 0;
}

.review__donate-label {
    margin: 0 0 0.3rem;
    font-family: var(--font-sans);
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--ink);
}

.review__donate-row {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
}

.review__donate-addr {
    flex: 1;
    min-width: 0;
    font-family: var(--font-mono);
    font-size: 0.7rem;
    color: var(--ink-soft);
    background: var(--paper-inset);
    padding: 3px 6px;
    border-radius: 2px;
    word-break: break-all;
    line-height: 1.4;
    user-select: all;
}

.review__donate-channel--bank {
    grid-column: 1 / -1;
    border-top: 1px dashed rgba(43, 33, 27, 0.18);
    padding-top: 1.1rem;
    margin-top: 0.25rem;
}

.review__donate-note {
    margin: 0.15rem 0 0;
    font-size: 0.85rem;
    line-height: 1.5;
    color: var(--ink-soft);
}

.review__donate-note a {
    color: var(--accent-warm);
    text-decoration: underline;
    text-decoration-thickness: 0.06em;
    text-underline-offset: 0.18em;
}

@media (max-width: 640px) {
    .review__donate-grid { grid-template-columns: 1fr; gap: 1.4rem; }
    .review__donate-qr { width: 112px; height: 112px; }
    .review__donate-channel {
        flex-direction: row;
        align-items: flex-start;
    }
}


/* ── project phases ───────────────────────────────────────────── */
.review__phases-figure {
    margin: 14px 0 1.6rem;
    padding: 0;
}

.review__phases-figure img {
    display: block;
    width: 100%;
    height: auto;
    border: 1px solid var(--rule-quiet);
    border-radius: 3px;
}

.review__phases-figure figcaption {
    margin: 0.5rem 0 0;
    font-size: 0.82rem;
    color: var(--ink-faded);
    text-align: center;
    font-style: italic;
}

.review__phases {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
}

.review__phase {
    position: relative;
    padding: 0 0 0 3.6rem;
    min-height: 2.6rem;
}

/* connecting hairline between phase rings */
.review__phase::before {
    content: "";
    position: absolute;
    left: 1.4rem;
    top: 2.6rem;
    bottom: -1.2rem;
    width: 1px;
    background-color: rgba(63, 107, 122, 0.25);
}
.review__phase:last-child::before { display: none; }

/* the new phase ring — thin border, serif numeral, no heavy fill */
.review__phase-num {
    position: absolute;
    left: 0;
    top: 0;
    width: 2.4rem;
    height: 2.4rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(63, 107, 122, 0.06);
    color: var(--accent-blue-d);
    border: 1px solid rgba(63, 107, 122, 0.45);
    border-radius: 50%;
    font-family: var(--font-title);
    font-weight: 400;
    font-size: 1.3rem;
    line-height: 1;
    padding-bottom: 0.1em;     /* optical centring of serif numerals */
}

.review__phase-titles {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.review__phase-title {
    margin: 0;
    font-family: var(--font-title);
    font-weight: 400;
    font-size: 1.15rem;
    line-height: 1.2;
    color: var(--ink);
    letter-spacing: 0.005em;
}

.review__phase-status {
    font-family: var(--font-sans);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink-faded);
}

.review__phase--ongoing .review__phase-num {
    border-style: dashed;
    background-color: rgba(63, 107, 122, 0.10);
}

.review__phase--open .review__phase-num {
    background-color: rgba(182, 74, 58, 0.08);
    color: var(--accent-clay);
    border-color: rgba(182, 74, 58, 0.5);
    border-style: dashed;
}

.review__phase--open .review__phase-status {
    color: var(--accent-clay);
    font-style: italic;
}

.review__phase-body {
    margin: 0.4rem 0 0;
    font-size: 0.95rem;
    line-height: 1.55;
    color: var(--ink);
}

.review__phase-infinity {
    display: inline-block;
    margin-left: 0.3em;
    padding: 0 0.45em;
    border: 1px dashed rgba(63, 107, 122, 0.5);
    border-radius: 999px;
    font-size: 0.72rem;
    line-height: 1.35;
    color: var(--accent-blue);
    background-color: rgba(63, 107, 122, 0.08);
    letter-spacing: 0;
    text-transform: none;
    vertical-align: 0.05em;
}

.review__phase-wink {
    display: inline-block;
    font-size: 1.15em;
    transform: translateY(0.05em);
    margin-left: 0.05em;
}

@media (max-width: 520px) {
    .review__phase { padding-left: 2.8rem; }
    .review__phase-num {
        width: 2rem; height: 2rem;
        font-size: 1.05rem;
    }
    .review__phase::before { left: 1rem; top: 2.2rem; }
}


/* ── mugshot (canon — kept verbatim) ──────────────────────────── */
.review__mugshot {
    float: right;
    width: 220px;
    max-width: 45%;
    margin: 0.2rem 0 0.5rem 1.1rem;
    padding: 0;
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 3px 3px 0 rgba(43, 33, 27, 0.2);
}
.review__mugshot img {
    display: block;
    width: 100%;
    height: auto;
    border: 1.5px solid var(--ink);
    border-radius: 4px;
}

@media (max-width: 520px) {
    .review__mugshot {
        float: none;
        width: 100%;
        max-width: 240px;
        margin: 0 auto 0.85rem;
    }
}


/* ── money-disclosure body ────────────────────────────────────── */
.review__callout--warning p {
    margin: 0 0 0.7rem;
}
.review__callout--warning p:last-child {
    margin-bottom: 0;
}

.review__legit-fraud {
    margin: 0;
    padding-top: 0.7rem;
    border-top: 1px dashed rgba(43, 33, 27, 0.18);
    color: var(--ink);
}


/* ── tax & receipts · collapsible legal panels ───────────────── */
.review__legal-details {
    margin: 0 0 0.7rem;
    padding: 0.6rem 0.9rem;
    background-color: var(--paper-inset);
    border: 1px solid var(--rule-quiet);
    border-radius: 3px;
}

.review__legal-details[open] {
    background-color: rgba(108, 92, 76, 0.08);
    border-color: rgba(108, 92, 76, 0.32);
}

.review__legal-details summary {
    cursor: pointer;
    font-family: var(--font-sans);
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--ink);
    list-style: none;
    padding-right: 1.4rem;
    position: relative;
}
.review__legal-details summary::-webkit-details-marker { display: none; }
.review__legal-details summary::after {
    content: "▸";
    position: absolute;
    right: 0;
    top: 0;
    color: var(--ink-faded);
    font-size: 0.85rem;
    transition: transform .15s ease;
}
.review__legal-details[open] summary::after {
    transform: rotate(90deg);
}

.review__legal-body {
    margin: 0.7rem 0 0.1rem;
    padding-top: 0.55rem;
    border-top: 1px dashed rgba(43, 33, 27, 0.15);
    font-size: 0.92rem;
    line-height: 1.55;
    color: var(--ink);
}
.review__legal-body p { margin: 0 0 0.6rem; }
.review__legal-body p:last-child { margin-bottom: 0; }
.review__legal-body a {
    color: var(--accent-warm);
    text-decoration: underline;
    text-decoration-thickness: 0.06em;
    text-underline-offset: 0.18em;
}


/* ── campaigns · empty state collapses to one line ───────────── */
.review__campaigns-empty {
    margin: 0;
    padding: 0.4rem 0 0.2rem;
    color: var(--ink-faded);
    font-style: italic;
    font-size: 0.95rem;
    text-align: center;
}
.review__campaigns-empty p { margin: 0; }


/* ── contact ──────────────────────────────────────────────────── */
.review__contact {
    margin-top: 2.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(43, 33, 27, 0.18);
}

.review__contact h2 {
    margin: 0 0 0.7rem;
    font-family: var(--font-sans);
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.22em;
    color: var(--ink-faded);
}

.review__contact ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.review__contact li {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.25rem 0;
}

.review__contact-key {
    font-family: var(--font-sans);
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--ink-ghost);
    min-width: 4.5rem;
}

.review__contact a {
    color: var(--accent-warm);
    text-decoration: underline;
    text-decoration-thickness: 0.07em;
    text-underline-offset: 0.18em;
}
.review__contact a:hover { color: #d9804b; }

.review__privacy {
    margin: 1.2rem 0 0;
    padding-top: 1rem;
    border-top: 1px dotted rgba(43, 33, 27, 0.18);
    font-family: var(--font-sans);
    font-size: 0.78rem;
    line-height: 1.55;
    color: var(--ink-faded);
}


/* ── small-screen sweep ───────────────────────────────────────── */
@media (max-width: 600px) {
    .review {
        font-size: 16px;
        padding: 18px 0 48px;
    }
    .review__callout { padding: 18px 18px 20px; }
    .review__callout--hero { padding: 22px 20px 22px; }
    .review__callout-head h2,
    .review__callout-title { font-size: 1.35rem; }
    .review__callout--hero .review__callout-head h2,
    .review__callout--hero .review__callout-title { font-size: 1.6rem; }
}


/* ── nested callout (TaxAndReceipts inside Donations) ──────────
   When a .review__callout sits inside another .review__callout it
   reads as a subordinate sub-block: no box, a dashed hairline rule
   above, and a small uppercase sans header instead of the IM Fell
   title. The parent callout's eyebrow already establishes the
   register, so the ribbon and eyebrow inside are suppressed.

   The selectors deliberately repeat .review__callout twice — the
   first occurrence matches the parent, the second matches the
   nested child, and only descendants of the nested child are then
   restyled. Otherwise (with a single .review__callout descendant
   selector) the rules would also match every TOP-LEVEL callout's
   own title/eyebrow/ribbon, since those are descendants of their
   own .review__callout.

   If you ever want to promote a nested callout back to top-level,
   nothing in the markup needs to change — these rules only apply
   when one callout is descended from another. */
.review__callout .review__callout {
    margin: 1.75rem 0 0;
    padding: 1.1rem 0 0;
    background: none;
    border: none;
    border-top: 1px dashed var(--rule);
    border-radius: 0;
}

.review__callout .review__callout .review__callout-head {
    margin-bottom: 0.5rem;
    padding-bottom: 0;
    border-bottom: none;
}

.review__callout .review__callout .review__callout-title,
.review__callout .review__callout .review__callout-head h2 {
    font-family: var(--font-sans);
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--ink-soft);
    line-height: 1.3;
}

.review__callout .review__callout .review__callout-note {
    font-size: 0.9rem;
    color: var(--ink-soft);
    margin: 0 0 0.75rem;
}

/* Hide the ribbon and eyebrow inside nested callouts even if the
   markup still emits them — makes the nested form robust to future
   component changes. */
.review__callout .review__callout .review__ribbon,
.review__callout .review__callout .review__callout-eyebrow {
    display: none;
}


/* ── canary badge ──────────────────────────────────────────────
   Full warrant-canary callout, rendered inside DonationsCallout
   above the TaxAndReceipts sub-block. Mirrors the .review__callout
   visual language (paper-card with hairline border) but uses a
   muted indigo to distinguish it from the gift / info callouts.

   States:
     .canary-badge--alive  → neutral border, regular text.
     .canary-badge--grace  → amber-orange border + warning footer.

   Dead state is handled by Razor (component returns no markup), so
   there's no .canary-badge--dead rule. */
.canary-badge {
    --canary-bg:    rgba(63, 107, 122, 0.045);
    --canary-edge:  rgba(63, 107, 122, 0.28);
    --canary-color: var(--accent-blue);
    margin: 1.25rem 0 0;
    padding: 18px 22px 16px;
    background: var(--canary-bg);
    border: 1px solid var(--canary-edge);
    border-left: 3px solid var(--canary-color);
    border-radius: 6px;
    font-family: var(--font-serif, Georgia, serif);
    color: var(--ink-soft);
}

.canary-badge--grace {
    --canary-bg:    rgba(199, 144, 58, 0.08);
    --canary-edge:  rgba(199, 144, 58, 0.45);
    --canary-color: var(--accent-warm-d, #b6612c);
}

.canary-badge__head {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-bottom: 0.6rem;
}

.canary-badge__title {
    font-family: var(--font-sans);
    font-size: 0.82rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--canary-color);
    line-height: 1.2;
    margin: 0;
}

.canary-badge__eyebrow {
    font-size: 0.74rem;
    color: var(--ink-soft);
    opacity: 0.65;
    margin: 0;
    font-style: italic;
}

.canary-badge__statement {
    font-size: 0.92rem;
    line-height: 1.55;
    margin: 0 0 0.5rem;
}

.canary-badge__claims {
    margin: 0 0 0.75rem;
    padding-left: 1.2rem;
    font-size: 0.88rem;
    line-height: 1.5;
}

.canary-badge__claims li + li {
    margin-top: 0.35rem;
}

.canary-badge__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 0.75rem;
    align-items: baseline;
    padding-top: 0.65rem;
    border-top: 1px solid var(--rule-quiet);
    font-size: 0.78rem;
    font-family: var(--font-sans);
    color: var(--ink-soft);
}

.canary-badge__label {
    font-weight: 600;
}

.canary-badge__meta time {
    font-variant-numeric: tabular-nums;
}

.canary-badge__warning {
    flex-basis: 100%;
    margin-top: 0.4rem;
    padding: 0.5rem 0.7rem;
    background: rgba(199, 144, 58, 0.14);
    border-left: 2px solid var(--accent-warm-d, #b6612c);
    border-radius: 3px;
    font-weight: 600;
    color: var(--accent-warm-d, #b6612c);
}

/* ── canary compact (footer line) ──────────────────────────────
   Drop-in replacement for the old static PFootnote.Canary <p>.
   Inherits .footnote .text styling from app.css; we only add the
   grace-state inline warning span. */
.canary-compact--grace .canary-compact__warning {
    color: var(--accent-warm-d, #b6612c);
    font-weight: 600;
}


/* ── whitepaper · publication note ────────────────────────────────
   Sits under the PDF/EPUB row in the (info-toned) whitepaper callout.
   The <summary> is a concrete always-visible sentence (what/when/where);
   the disclosure arrow expands the DOI link, licence and timestamp. */
.review__pub {
    /* Reset the heavy global `details` treatment (app.css) — this is a quiet
       inline disclosure, not a boxed panel. */
    margin: 0.9rem 0 0;
    padding: 0.75rem 0 0;
    border: 0;
    border-top: 1px dashed rgba(63, 107, 122, 0.28);
    border-radius: 0;
    background: none;
    box-shadow: none;
    width: auto;
    max-width: none;
}

.review__pub-summary {
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.55em;
    list-style: none;
    font-family: var(--font-sans);
    font-size: 0.82rem;
    line-height: 1.5;
    color: var(--ink-soft);
}
.review__pub-summary::-webkit-details-marker { display: none; }
.review__pub-summary:hover { color: var(--ink); }
.review__pub-summary:hover .review__pub-arrow { color: var(--accent-blue-d); }

/* Disclosure arrow — deliberately visible: solid accent triangle that
   rotates down when the panel opens. */
.review__pub-arrow {
    flex: 0 0 auto;
    color: var(--accent-blue);
    font-size: 1.05em;
    line-height: 1;
    transition: transform .15s ease;
}
.review__pub[open] .review__pub-arrow {
    transform: rotate(90deg);
}

.review__pub-headline {
    flex: 1 1 auto;
}

.review__pub-meta {
    margin: 0.6rem 0 0;
    padding: 0 0 0 1.6em;
    list-style: none;
    font-family: var(--font-sans);
    font-size: 0.78rem;
    line-height: 1.5;
    color: var(--ink-soft);
}
.review__pub-meta li {
    margin: 0 0 0.35rem;
    position: relative;
}
.review__pub-meta li::before {
    content: "·";
    position: absolute;
    left: -0.9rem;
    color: var(--ink-faded);
}
.review__pub-meta li:last-child { margin-bottom: 0; }

.review__pub-doi {
    color: var(--accent-blue-d);
    text-decoration: none;
    border-bottom: 1px solid rgba(63, 107, 122, 0.4);
    padding-bottom: 1px;
}
.review__pub-doi:hover {
    color: var(--accent-blue);
    border-bottom-color: var(--accent-blue);
}