/* =============================================================================
   charity.css — the Charity desk's own sheet (labs 561)

   ONE SHEET, BOTH EDITIONS. Everything here is a var() that assets/css/site.css
   defines and assets/css/dark.css redefines — except the two --cy-* tokens
   below, the chart's two series colours, answered twice (once for each
   edition) in the only two blocks of this file that hold a literal.

   THE CHART'S COLOURS. Two series at most (revenue and expenses; or the first
   and the second organisation). Measured with the data-viz validator on both
   grounds: paper #2a78d6 / #eb6834 (colour-blind separation 24.7, normal 33.6,
   both over 3:1 on white); dark #3987e5 / #d95926 (26.8 / 31.8, both over 3:1
   on #0C1116). The hue is never the only way to tell: the first series is
   drawn with round marks and the second with square ones, the keys above the
   chart say each in words, the readout under it names every figure, and the
   table holds them all.

   Class names are all prefixed cy-. Phones first: under 1000px the year table
   is a stack of cards with every cell labelled, and nothing scrolls sideways.
   ========================================================================== */

:root {
    --cy-s1: #2a78d6;
    --cy-s2: #eb6834;
}
html[data-dark] {
    --cy-s1: #3987e5;
    --cy-s2: #d95926;
}

/* ------------------------------------------------------------ the fact line */
.cy-fact {
    margin: 1.6rem 0 0; font-size: .92rem; line-height: 1.55; color: var(--ink-77);
    padding-left: .9rem; border-left: 2px solid var(--accent);
    font-variant-numeric: tabular-nums; min-height: 3.1em;
}
.cy-try { margin: .9rem 0 0; font-size: .86rem; color: var(--ink-55); line-height: 2; }
.cy-try a { display: inline-block; padding: .55rem .1rem; margin-right: .7rem; min-height: 44px; color: var(--ink); text-underline-offset: .2em; }

/* --------------------------------------------------------------- the search */
.cy-stat { margin: 0; font-size: .74rem; color: var(--ink-55); font-variant-numeric: tabular-nums; text-align: right; }
.cy-form { display: grid; grid-template-columns: minmax(0, 1fr); gap: .8rem; align-items: end; }
.cy-form > div { min-width: 0; }
.cy-form .field { width: 100%; min-height: 44px; }
.cy-form select.field { appearance: auto; }
.cy-form .btn { min-height: 44px; width: 100%; justify-content: center; }
@media (min-width: 620px) {
    .cy-form { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .cy-form__q { grid-column: 1 / -1; }
}
@media (min-width: 1000px) {
    .cy-form { grid-template-columns: minmax(0, 2.2fr) repeat(3, minmax(0, 1fr)) auto; }
    .cy-form__q { grid-column: auto; }
    .cy-form .btn { width: auto; }
}
@media (min-width: 620px) and (max-width: 999px) { .cy-form__go { grid-column: 1 / -1; } }
.cy-cap { margin: 0; font-size: .86rem; line-height: 1.55; color: var(--ink-77); min-height: 2.7em; overflow-wrap: anywhere; }
.cy-cap--alert { color: var(--ink); font-weight: 500; }
.cy-cap--alert::before { content: '! '; color: var(--accent); font-weight: 700; }

.cy-note { border: 1px solid var(--line); border-left: 3px solid var(--ink-55); border-radius: 10px; background: var(--paper); padding: .85rem 1rem; }
.cy-note--alert { border-left-color: var(--accent); }
.cy-note p { margin: 0 0 .4rem; font-size: .9rem; line-height: 1.55; color: var(--ink-77); overflow-wrap: anywhere; }
.cy-note p:last-child { margin-bottom: 0; }
.cy-note b { color: var(--ink); }
.cy-wait, .cy-none { margin: 0; font-size: .9rem; color: var(--ink-55); padding: 1.2rem 0; }

.cy-res { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line-soft); }
.cy-res__row { display: flex; align-items: center; gap: .6rem; border-bottom: 1px solid var(--line-soft); min-width: 0; }
.cy-res__open { flex: 1 1 auto; min-width: 0; display: grid; gap: .1rem; padding: .7rem .2rem; min-height: 44px; color: inherit; text-decoration: none; }
.cy-res__open b { color: var(--ink); font-weight: 600; font-size: .98rem; overflow-wrap: anywhere; text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: .2em; }
.cy-res__open:hover b { text-decoration-color: var(--accent); }
.cy-res__open:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.cy-res__sub { font-size: .8rem; color: var(--ink-55); overflow-wrap: anywhere; }
.cy-res__meta { font-size: .8rem; color: var(--ink-77); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.cy-res__cmp { flex: 0 0 auto; min-height: 44px; }
.cy-more { display: flex; justify-content: center; }
.cy-more .btn { min-height: 44px; }

.cy-kept { margin: 0; font-size: .82rem; color: var(--ink-55); line-height: 1.5; display: flex; flex-wrap: wrap; align-items: center; gap: .1rem .8rem; }
.cy-kept__h { color: var(--ink-55); }
.cy-kept__a { color: var(--ink); padding: .75rem 0; text-underline-offset: .2em; overflow-wrap: anywhere; }
.cy-kept__x { -webkit-appearance: none; appearance: none; background: none; border: 0; padding: .75rem 0; font: inherit; color: var(--ink-55); text-decoration: underline; text-underline-offset: .2em; cursor: pointer; min-height: 44px; }
.cy-kept__x:hover { color: var(--ink); }

/* -------------------------------------------------------- the organisation */
.cy-view { display: grid; gap: 1.15rem; min-width: 0; }
.cy-view > * { min-width: 0; }
.cy-cards { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; }
@media (min-width: 900px) { .cy-cards--two { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.cy-card { border: 1px solid var(--line); border-radius: 12px; background: var(--paper); padding: 1.05rem 1.15rem 1.1rem; min-width: 0; }
.cy-card__tag { margin: 0 0 .35rem; font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-55); }
.cy-card__name { margin: 0; font-size: clamp(1.2rem, 2.6vw, 1.55rem); line-height: 1.2; letter-spacing: -.02em; color: var(--ink); overflow-wrap: anywhere; }
.cy-card__where { margin: .3rem 0 .8rem; font-size: .92rem; color: var(--ink-77); font-variant-numeric: tabular-nums; }
.cy-facts { margin: 0; display: grid; gap: .5rem; }
.cy-facts > div { display: grid; grid-template-columns: minmax(0, 1fr); gap: .05rem; }
@media (min-width: 620px) { .cy-facts > div { grid-template-columns: 11.5rem minmax(0, 1fr); gap: .8rem; } }
.cy-facts dt { font-size: .76rem; color: var(--ink-55); padding-top: .12rem; }
.cy-facts dd { margin: 0; font-size: .9rem; line-height: 1.5; color: var(--ink); overflow-wrap: anywhere; }
.cy-card__bmf { margin: .85rem 0 0; padding-top: .75rem; border-top: 1px solid var(--line-soft); font-size: .86rem; line-height: 1.55; color: var(--ink-77); font-variant-numeric: tabular-nums; }
.cy-card__bmf b { color: var(--ink); font-weight: 600; }
.cy-card__links { margin: .7rem 0 0; font-size: .86rem; line-height: 1.9; }
.cy-card__links a, .cy-credit a, .cy-tab a { text-underline-offset: .2em; text-decoration-color: var(--line); }
.cy-card__links a { display: inline-flex; align-items: center; min-height: 44px; }
.cy-card__links a:hover, .cy-credit a:hover, .cy-tab a:hover { text-decoration-color: var(--accent); }
.cy-cav { margin: 0; padding: .8rem 1rem .8rem 2rem; border: 1px solid var(--line); border-radius: 10px; background: var(--paper); }
.cy-cav li { font-size: .88rem; line-height: 1.55; color: var(--ink-77); margin: 0 0 .3rem; overflow-wrap: anywhere; }
.cy-cav li:last-child { margin-bottom: 0; }

.cy-acts { display: flex; flex-wrap: wrap; gap: .7rem; align-items: end; }
.cy-acts .btn { min-height: 44px; }
.cy-vs { display: flex; flex-wrap: wrap; gap: .5rem; align-items: end; margin: 0; }
.cy-vs .lbl { flex: 1 0 100%; margin: 0; }
.cy-vs .field { width: 9.5rem; min-height: 44px; }
.cy-acts .hint { flex: 1 0 100%; margin: 0; overflow-wrap: anywhere; }

/* ---------------------------------------------------------------- the chart */
.cy-fig { margin: 0; border: 1px solid var(--line); border-radius: 12px; background: var(--paper); padding: 1rem 1rem .9rem; min-width: 0; }
.cy-fig__cap { font-size: .84rem; color: var(--ink-55); margin: 0 0 .7rem; }
.cy-seg .seg__b { min-height: 44px; }
.cy-legend { display: flex; flex-wrap: wrap; gap: .3rem 1.2rem; margin: .8rem 0 .2rem; min-height: 1.5rem; }
.cy-key { display: inline-flex; align-items: center; gap: .45rem; font-size: .84rem; color: var(--ink); overflow-wrap: anywhere; }
.cy-key__m { flex: 0 0 auto; width: 11px; height: 11px; display: inline-block; }
th .cy-key__m { margin-right: .4rem; }
.cy-key__m.cy-s1 { background: var(--cy-s1); border-radius: 50%; }
.cy-key__m.cy-s2 { background: var(--cy-s2); border-radius: 1px; }
.cy-plot { min-height: 250px; touch-action: pan-y; cursor: crosshair; border-radius: 6px; }
@media (min-width: 620px) { .cy-plot { min-height: 320px; } }
.cy-plot:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.cy-svg { display: block; width: 100%; height: auto; overflow: visible; }
.cy-grid { stroke: var(--line-soft); stroke-width: 1; }
.cy-zero { stroke: var(--ink-55); stroke-width: 1; }
.cy-gap { stroke: var(--ink-55); stroke-width: 1.5; stroke-dasharray: 2 3; }
.cy-cross { stroke: var(--ink-55); stroke-width: 1; stroke-dasharray: 3 3; }
.cy-tick { fill: var(--ink-55); font-size: 11px; font-variant-numeric: tabular-nums; font-family: inherit; }
.cy-line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.cy-line.cy-s1 { stroke: var(--cy-s1); }
.cy-line.cy-s2 { stroke: var(--cy-s2); }
.cy-mark { stroke: var(--paper); stroke-width: 2; }
.cy-mark.cy-s1 { fill: var(--cy-s1); }
.cy-mark.cy-s2 { fill: var(--cy-s2); }
.cy-mark.is-on { stroke: var(--ink); }
.cy-readout { margin: .5rem 0 0; font-size: .88rem; line-height: 1.55; color: var(--ink); font-variant-numeric: tabular-nums; min-height: 4.2em; overflow-wrap: anywhere; }
@media (min-width: 900px) { .cy-readout { min-height: 2.8em; } }

/* --------------------------------------------------------------- the tables */
.cy-h3 { margin: .5rem 0 -.3rem; font-size: 1.05rem; font-weight: 600; color: var(--ink); overflow-wrap: anywhere; }
.cy-scroll { min-width: 0; overflow-x: auto; border-radius: 6px; }
.cy-scroll:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.cy-tab { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.cy-tab caption { caption-side: top; text-align: left; font-size: .8rem; color: var(--ink-55); padding: 0 0 .5rem; }
.cy-tab th, .cy-tab td { padding: .55rem .5rem; border-bottom: 1px solid var(--line-soft); vertical-align: top; text-align: left; font-size: .84rem; line-height: 1.4; }
.cy-tab thead th { font-size: .7rem; font-weight: 600; color: var(--ink-55); letter-spacing: .02em; border-bottom: 1px solid var(--line); vertical-align: bottom; }
.cy-tab thead th.cy-num { white-space: normal; }
.cy-tab tbody th { font-weight: 400; color: var(--ink-77); min-width: 12.5rem; }
.cy-tab tbody th b { display: block; font-size: .98rem; font-weight: 600; color: var(--ink); }
.cy-row__meta { display: block; font-size: .76rem; color: var(--ink-55); font-weight: 400; }
.cy-nb { white-space: nowrap; }
.cy-row--none th b, .cy-row--bare th b { color: var(--ink-77); }
.cy-num { text-align: right !important; color: var(--ink); white-space: nowrap; }
.cy-nil { color: var(--ink-55) !important; white-space: normal; font-size: .78rem !important; }
td.cy-nil[colspan] { text-align: left !important; }
.cy-tab--cmp { table-layout: fixed; }
.cy-tab--cmp th:first-child { width: 4.2rem; min-width: 0; }
.cy-tab--cmp th, .cy-tab--cmp td { overflow-wrap: anywhere; }
.cy-amt { display: block; white-space: nowrap; }
.cy-tab--cmp .cy-num { white-space: normal; }
.cy-tab--cmp thead th { font-size: .78rem; color: var(--ink); }

@media (max-width: 999px) {
    /* the year table as a stack of cards: every cell says what it is */
    .cy-scroll { overflow-x: visible; }
    .cy-scroll .cy-tab, .cy-scroll .cy-tab tbody, .cy-scroll .cy-tab tr, .cy-scroll .cy-tab th, .cy-scroll .cy-tab td { display: block; }
    .cy-scroll .cy-tab thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
    .cy-scroll .cy-tab caption { display: block; }
    .cy-scroll .cy-tab tr { border: 1px solid var(--line); border-radius: 10px; padding: .6rem .8rem; margin: 0 0 .6rem; background: var(--paper); }
    .cy-scroll .cy-tab th, .cy-scroll .cy-tab td { border: 0; padding: .22rem 0; min-width: 0; }
    .cy-scroll .cy-tab td.cy-num { display: flex; justify-content: space-between; gap: 1rem; text-align: right !important; white-space: normal; }
    .cy-scroll .cy-tab td.cy-num::before { content: attr(data-l); color: var(--ink-55); font-size: .78rem; text-align: left; flex: 0 1 auto; }
    .cy-scroll .cy-tab td[colspan] { display: block; }
    .cy-scroll .cy-tab tbody th { padding-bottom: .4rem; margin-bottom: .2rem; border-bottom: 1px solid var(--line-soft); }
    .cy-row__meta a { display: inline-flex; align-items: center; min-height: 44px; }
}

.cy-credit { margin: 0; font-size: .82rem; line-height: 1.6; color: var(--ink-55); overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.cy-credit--res { margin-top: .9rem; }

/* ---------------------------------------------------------------- the notes */
.cy-read { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.1rem; margin-top: 1.6rem; }
@media (min-width: 900px) { .cy-read { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.cy-src { border: 1px solid var(--line); border-radius: 12px; background: var(--paper); padding: 1.05rem 1.15rem 1.15rem; min-width: 0; }
.cy-src h3 { margin: 0 0 .5rem; font-size: 1.02rem; font-weight: 600; color: var(--ink); line-height: 1.3; }
.cy-src p, .cy-src li { font-size: .9rem; line-height: 1.6; color: var(--ink-77); overflow-wrap: anywhere; }
.cy-src p { margin: 0 0 .6rem; }
.cy-src ul { margin: 0 0 .6rem; padding-left: 1.1rem; }
.cy-src p:last-child, .cy-src ul:last-child { margin-bottom: 0; }
.cy-src code { font-size: .84em; overflow-wrap: anywhere; }
.cy-src a { text-decoration-color: var(--line); text-underline-offset: .2em; }
.cy-src a:hover { text-decoration-color: var(--accent); }
.cy-src__credit { font-size: .84rem !important; color: var(--ink-55) !important; }

/* The edition switch is a <button>: nothing above styles a bare button, so the pill keeps its own rules. */