/* Fundraising pages (/fundraising and the free fundraising tools).
 *
 * Loaded only under /fundraising and /tools (head.php). Almost everything on these pages is styles.css
 * (page-hero, section, feature-card, cta-band, callout, faq-list). This file adds only what has no
 * equivalent there: the example sheet, the brand note, and the two small tools' own controls.
 */

.fundraising-brand-note { font-size: 0.82rem; color: var(--gray-600, #475569); margin: 10px 0 0; }

/* The example $1 to $31 sheet: plain HTML, no image, no script. */
.fr-sheet { margin: 28px auto; max-width: 720px; }
.fr-sheet__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 8px; }
.fr-sheet__sq {
    display: flex; align-items: center; justify-content: center; min-height: 52px; border: 2px solid #cbd5e1;
    border-radius: 10px; background: #ffffff; color: #0F2642; font-weight: 700;
}
.fr-sheet__sq.is-taken { background: #fef3c7; border-color: #f59e0b; color: #92400e; text-decoration: line-through; }
.fr-sheet__sq.is-done { background: #0F2642; border-color: #0F2642; color: #ffffff; }
/* Laid out like a calendar: seven columns under the weekdays, the 1st under its weekday, empty squares before it. */
.fr-sheet--calendar { max-width: 560px; }
.fr-sheet__grid--calendar { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.fr-sheet__grid--calendar .fr-sheet__sq { min-height: 62px; }
.fr-sheet__dow { text-align: center; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #64748b; padding-bottom: 2px; }
@media (max-width: 520px) {
    .fr-sheet__grid--calendar { gap: 4px; }
    .fr-sheet__grid--calendar .fr-sheet__sq { min-height: 44px; border-radius: 8px; font-size: 0.82rem; }
    .fr-sheet__dow { font-size: 0.66rem; letter-spacing: 0.02em; }
}
.fr-sheet figcaption { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 12px; font-size: 0.85rem; color: #475569; }
/* The tap-a-square demo and the squares setup demo on /fundraising/choose-a-square-fundraiser. Squares there are the
   same .fr-sheet__sq as the example sheets; a tappable one is a button, so it loses the button look first. */
.fr-demo__sq { font: inherit; cursor: pointer; }
.fr-demo__sq:hover { border-color: #70af43; }
.fr-demo__sq:focus-visible { outline: 3px solid #70af43; outline-offset: 2px; }
.fr-sheet__sq.is-held { background: #fffbeb; border: 2px dashed #f59e0b; color: #92400e; }
.fr-demo__sq.is-selected { box-shadow: 0 0 0 3px rgba(112, 175, 67, 0.55); }
.fr-demo__layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 340px); gap: 28px; align-items: start; margin-top: 8px; }
@media (max-width: 860px) { .fr-demo__layout { grid-template-columns: minmax(0, 1fr); } }
.fr-demo__hint { margin: 18px 0 6px; font-weight: 600; color: #0F2642; min-height: 1.5em; }
.fr-demo__grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (min-width: 521px) { .fr-demo__grid { grid-template-columns: repeat(10, minmax(0, 1fr)); } }
.fr-demo__legend { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 12px; font-size: 0.85rem; color: #475569; }
.fr-demo__bar { display: flex; height: 12px; margin-top: 16px; border-radius: 999px; background: #e2e8f0; overflow: hidden; }
.fr-demo__bar-done { background: #0F2642; transition: width 0.25s ease; }
.fr-demo__bar-wait { background: #f59e0b; transition: width 0.25s ease; }
.fr-demo__totals { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 14px 0 0; }
@media (max-width: 520px) { .fr-demo__totals { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.fr-demo__totals dt { color: #64748b; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.04em; }
.fr-demo__totals dd { margin: 2px 0 0; font-family: "Barlow Condensed", "Arial Narrow", sans-serif; font-size: 1.5rem; color: #0F2642; }
.fr-demo__totals dd span { font: inherit; }
.fr-demo__reset { margin-top: 10px; }
.fr-demo__panel { background: #ffffff; border: 1px solid #e2e8f0; border-radius: 12px; padding: 18px 20px; }
.fr-demo__panel h3 { margin: 0 0 10px; font-size: 1.2rem; color: #0F2642; }
.fr-demo__notice { margin: 0 0 12px; padding: 10px 12px; border-radius: 8px; background: #f4faed; border: 1px solid #cfe8b4; color: #1e293b; font-size: 0.92rem; }
.fr-demo__notice.is-refused { background: #fffbeb; border-color: #fcd34d; color: #78350f; }
.fr-demo__notice[hidden] { display: none; }
.fr-demo__who { margin: 0 0 10px; }
.fr-demo__who strong { display: block; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.04em; color: #64748b; }
.fr-demo__who p { margin: 2px 0 0; font-size: 0.95rem; color: #1e293b; }
.fr-demo__actions { display: grid; gap: 8px; margin-top: 14px; }
.fr-demo__action { justify-content: center; text-align: center; }

/* The squares setup demo. A numbered square shows its number small above its amount. */
.fr-sheet--builder { max-width: none; margin: 16px 0 0; }
.fr-sheet--builder .fr-sheet__grid { grid-template-columns: repeat(auto-fill, minmax(62px, 1fr)); gap: 6px; }
.fr-sheet--builder .fr-sheet__grid--calendar { grid-template-columns: repeat(7, minmax(0, 1fr)); }
.fr-sheet__sq--n { flex-direction: column; min-height: 56px; line-height: 1.15; }
.fr-sheet__n { font-size: 0.68rem; font-weight: 600; color: #64748b; }
.fr-sheet__sq--n .fr-sheet__amt { font-size: 1rem; }
.fr-preview { margin: 4px 0 0; font-size: 0.9rem; color: #475569; }
.fr-preview.is-problem { color: #78350f; background: #fffbeb; border: 1px solid #fcd34d; border-radius: 8px; padding: 8px 10px; }

.fr-key { display: inline-block; width: 13px; height: 13px; border-radius: 4px; border: 2px solid #cbd5e1; background: #ffffff; vertical-align: -2px; margin-right: 4px; }
.fr-key--held { background: #fffbeb; border: 2px dashed #f59e0b; }
.fr-key--taken { background: #fef3c7; border-color: #f59e0b; }
.fr-key--done { background: #0F2642; border-color: #0F2642; }

.fr-steps { counter-reset: fr-step; list-style: none; padding: 0; margin: 20px 0; display: grid; gap: 14px; }
.fr-steps li { counter-increment: fr-step; position: relative; padding: 0 0 0 52px; min-height: 40px; }
.fr-steps li::before {
    content: counter(fr-step); position: absolute; left: 0; top: 0; width: 36px; height: 36px; border-radius: 50%;
    background: #70af43; color: #ffffff; font-weight: 800; display: flex; align-items: center; justify-content: center;
}
.fr-steps strong { display: block; color: #0F2642; }

/* A list of bold lead-ins in prose. styles.css's .prose-list is the plain list; these two lines only keep the
   line length readable and leave room for the paragraph that follows it. (The pages used .bullet-list, the
   icon-and-text row, which split every lead-in into a column of its own.) */
.prose-list { max-width: 760px; }
.prose-list + p { max-width: 760px; margin-top: 22px; }
.prose-list strong { color: #0F2642; }

/* Whatever follows a green callout box gets room above it. styles.css gives .callout a margin on top only, so a paragraph
   straight after it touched the box (the "That is a trade..." paragraph under "Where the money goes" on /fundraising/
   how-it-works, and "This is not legal advice" on the no-payment-processor page). The pages where the box ends the
   section are not touched: nothing follows it. */
.callout + * { margin-top: 24px; }

/* A call-to-action button is written as <p class="lede"><a class="btn ...">. After a list or the steps it already has
   room (they carry their own margin), but straight after a paragraph it touched the text: "Set up a squares sheet" under
   "The fundraising calculator works out the total..." on /fundraising/choose-a-square-fundraiser, 0px apart. */
p + p.lede { margin-top: 24px; }
/* ...and a paragraph straight after a lede paragraph ("Online, a square belongs to whoever picks it first" under the paper-sheet intro) gets a little too. */
p.lede + p, .fr-privacy-line + p { margin-top: 14px; }

.fr-compare { width: 100%; border-collapse: collapse; margin: 20px 0; font-size: 0.95rem; }
.fr-compare th, .fr-compare td { text-align: left; padding: 10px 12px; border-bottom: 1px solid #e2e8f0; vertical-align: top; }
.fr-compare th { color: #475569; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.04em; }

/* The two browser tools: a form on one side, a result on the other. */
.fr-tool { display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: 28px; align-items: start; margin: 24px 0; }
@media (max-width: 860px) { .fr-tool { grid-template-columns: minmax(0, 1fr); } }
.fr-tool__panel { background: #ffffff; border: 1px solid #e2e8f0; border-radius: 12px; padding: 20px; }
.fr-tool__panel h2 { font-size: 1.15rem; margin: 0 0 12px; }
.fr-field { display: block; margin: 0 0 14px; }
.fr-field > span { display: block; font-weight: 600; font-size: 0.9rem; margin-bottom: 4px; color: #1e293b; }
.fr-field em { font-weight: 400; font-style: normal; color: #64748b; }
.fr-field input[type="text"], .fr-field input[type="number"], .fr-field select, .fr-field textarea {
    width: 100%; padding: 10px 12px; border: 1px solid #cbd5e1; border-radius: 8px; font: inherit; background: #ffffff; box-sizing: border-box;
}
.fr-result { background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 12px; padding: 20px; }
.fr-result dl { margin: 0; display: grid; gap: 14px; }
.fr-result dt { color: #64748b; font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.04em; }
.fr-result dd { margin: 2px 0 0; font-family: "Barlow Condensed", "Arial Narrow", sans-serif; font-size: 2.1rem; color: #0F2642; line-height: 1.1; }
.fr-result dd small { font-family: Inter, sans-serif; font-size: 0.9rem; color: #475569; font-weight: 400; }

.fr-poster { max-width: 100%; height: auto; border: 1px solid #e2e8f0; border-radius: 10px; background: #ffffff; }
.fr-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }

/* The first button on every fundraising page, in the hero, so nobody has to scroll to the closing band to find it. Centered like the
   hero's words, and flush left beside the scene from 1040px, where the hero is left-aligned. On a phone it is the full width. */
.page-hero__cta { margin-top: 28px; display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }
.page-hero__cta .btn { white-space: nowrap; }
@media (min-width: 1040px) { .page-hero--play .page-hero__cta { justify-content: flex-start; } }
@media (max-width: 640px) { .page-hero__cta .btn { flex: 1 1 100%; white-space: normal; } }
.fr-privacy-line { color: #475569; font-size: 0.9rem; margin: 10px 0 0; }

/* The one-page sheet maker's longer panel: small headings between groups, two fields to a row, radio choices. */
.fr-tool__panel h3 { font-size: 0.95rem; margin: 20px 0 8px; color: #0F2642; }
.fr-tool__panel h3 em { font-weight: 400; font-style: normal; color: #64748b; }
.fr-row2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
/* Two boxes side by side line up at the box, not at the label: when one label wraps to two lines ("Each is worth, in
   dollars" beside "How many (up to 10)") the labels keep their tops and the boxes share one bottom edge. */
.fr-row2 > .fr-field { display: flex; flex-direction: column; justify-content: space-between; }
.fr-radios { display: grid; gap: 8px; margin: 0 0 6px; }
.fr-radios label { display: block; padding: 10px 12px; border: 1px solid #cbd5e1; border-radius: 8px; cursor: pointer; line-height: 1.35; }
.fr-radios label:has(input:checked) { border-color: #70af43; background: #f4faed; }
.fr-radios em { display: block; font-style: normal; font-size: 0.85rem; color: #64748b; margin-left: 24px; }
.fr-check { display: flex; gap: 8px; align-items: center; margin: 0 0 8px; font-weight: 600; font-size: 0.92rem; }
.fr-tool [hidden] { display: none !important; }
/* "How many of each": a line is an amount, how many squares have it, and what that adds up to. Same as the app's form. */
.fr-mixhead, .fr-mixrow { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 8ch; gap: 0 12px; align-items: center; margin: 0 0 8px; }
.fr-mixhead { font-weight: 600; font-size: 0.9rem; color: #1e293b; margin-bottom: 4px; }
.fr-mixrow input[type="text"], .fr-mixrow input[type="number"] { width: 100%; padding: 11px 12px; border: 1px solid #cbd5e1; border-radius: 8px; font: inherit; background: #ffffff; }
.fr-mixhead span:last-child, .fr-mixrow__sub { text-align: right; }
.fr-mixrow__sub { font-weight: 600; color: #0F2642; font-size: 0.92rem; }
.fr-mix #sb-mix-add { margin: 4px 0 8px; }
.fr-field input[type="file"] { max-width: 100%; }

/* The calculator: tabs over three panels, example chips, the what-if row, the sheet's squares, the share bar and the
   "ready to run it" call to action. A panel is .fr-tool, whose display:grid would otherwise beat the hidden attribute. */
.fr-tool[hidden] { display: none; }
.fr-tabs { display: flex; flex-wrap: wrap; gap: 4px; border-bottom: 2px solid #e2e8f0; }
.fr-tab {
    appearance: none; background: none; border: 0; border-bottom: 4px solid transparent; margin-bottom: -2px;
    padding: 12px 18px; font: inherit; font-weight: 700; color: #475569; cursor: pointer;
}
.fr-tab:hover { color: #0F2642; }
@media (max-width: 520px) { .fr-tabs { gap: 0; } .fr-tab { flex: 1 1 0; text-align: center; padding: 10px 6px; font-size: 0.88rem; line-height: 1.25; } }
.fr-tab.is-active { color: #0F2642; border-bottom-color: #70af43; }
.fr-tab:focus-visible, .fr-chip:focus-visible { outline: 3px solid #70af43; outline-offset: 2px; border-radius: 6px; }

.fr-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 14px; }
.fr-chips__label { flex-basis: 100%; font-weight: 600; font-size: 0.9rem; color: #1e293b; }
.fr-chip {
    appearance: none; border: 1px solid #cbd5e1; background: #ffffff; color: #0F2642; border-radius: 999px;
    padding: 6px 12px; font: inherit; font-size: 0.85rem; cursor: pointer;
}
.fr-chip:hover { border-color: #70af43; background: #f4faed; }
.fr-field input[type="range"] { width: 100%; accent-color: #70af43; }

.fr-result__sub { font-size: 0.95rem; margin: 22px 0 8px; color: #0F2642; }
.fr-scenarios { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.fr-scenarios div { background: #ffffff; border: 1px solid #e2e8f0; border-radius: 8px; padding: 8px 10px; }
.fr-scenarios span { display: block; font-size: 0.78rem; color: #64748b; }
.fr-scenarios strong { font-family: "Barlow Condensed", "Arial Narrow", sans-serif; font-size: 1.35rem; color: #0F2642; font-weight: 700; }
@media (max-width: 480px) { .fr-scenarios { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.fr-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(58px, 1fr)); gap: 4px; margin-top: 18px; }
.fr-grid__sq {
    background: #ffffff; border: 1px solid #cbd5e1; border-radius: 6px; padding: 6px 2px; text-align: center;
    font-size: 0.78rem; font-weight: 600; color: #0F2642; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.fr-grid__caption { margin: 8px 0 0; font-size: 0.85rem; color: #475569; }
.fr-note { margin: 14px 0 0; padding: 10px 12px; border-radius: 8px; background: #fffbeb; border: 1px solid #fcd34d; color: #78350f; font-size: 0.9rem; }
.fr-note[hidden] { display: none; }

.fr-ways { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.fr-ways th, .fr-ways td { text-align: left; padding: 8px 10px; border-bottom: 1px solid #e2e8f0; vertical-align: top; }
.fr-ways thead th { color: #475569; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.04em; }
.fr-ways tbody th { font-weight: 600; color: #1e293b; }

.fr-sharebar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 8px 0 0; }
.fr-sharebar[hidden] { display: none; }
.fr-sharebar__label { font-weight: 700; color: #0F2642; margin-right: 4px; }
.fr-sharebar [hidden] { display: none; }
.fr-sharebar__status { font-size: 0.85rem; color: #4a7d28; }

.fr-ready {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px;
    margin: 28px 0 0; padding: 24px 28px; background: #0F2642; color: #ffffff; border-radius: 14px;
}
.fr-ready h2 { color: #9ed16b; margin: 0 0 6px; font-size: 1.6rem; }
.fr-ready p { margin: 0; color: #e2e8f0; max-width: 640px; }

/* Printing the thermometer poster or the fundraiser sheet: only the picture of it prints. */
#th-print-area, #fs-print-area { display: none; }
@media print {
    body * { visibility: hidden; }
    #th-print-area, #th-print-area *, #fs-print-area, #fs-print-area * { visibility: visible; }
    #th-print-area, #fs-print-area { display: block; position: absolute; left: 0; top: 0; width: 100%; }
    .fr-print-img { display: block; width: 100%; height: auto; }
}