/*
    Platform screens the design system does not cover.

    site.css is now the whole design system - tokens, layout, cards, forms, prose, modals and the
    long-form doc pages. Everything in THIS file is a screen the static design never had: the
    signed-in account page, the submit-a-story result and draft-recovery panels, and the
    server-side validation output MVC emits. All of it is built from the same :root tokens so it
    reads as one site.

    Depends on site.css for :root and the reset, and must be loaded after it.
*/

/* ------------------------------------------------------------------ account page */

.account-grid {
    display: grid;
    gap: 20px;
    grid-template-columns: 1fr;
    margin-top: 28px;
}

@media (min-width: 860px) {
    .account-grid { grid-template-columns: 1.15fr .85fr; align-items: start; }
}

.account-sub {
    margin-top: 6px;
    font-size: 15px;
    color: var(--ink-3);
}

.account-facts {
    display: grid;
    gap: 2px;
    margin: 0;
}

.account-facts div {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 10px;
    padding: 12px 0;
    border-bottom: 1px solid var(--line);
}

.account-facts div:last-child { border-bottom: 0; }

.account-facts dt {
    min-width: 150px;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 12.5px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--ink-3);
}

.account-facts dd {
    margin: 0;
    font-size: 15.5px;
    color: var(--ink);
}

.membership-list {
    display: grid;
    gap: 10px;
    margin-top: 6px;
}

.membership-list li {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 14px 16px;
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    background: var(--surface);
}

.membership-name {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 15px;
}

.chip-admin {
    display: inline-flex;
    align-items: center;
    padding: 4px 11px;
    border-radius: var(--r-full);
    background: var(--amber-100);
    color: var(--amber-600);
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 11.5px;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.account-signout {
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid var(--line);
}

/* ------------------------------------------------------- form results & recovery */

.form-result {
    text-align: center;
    padding: 26px 24px;
    border-radius: var(--r-lg);
    background: var(--teal-50);
    border: 1px solid var(--teal-100);
}

.form-result-icon {
    display: grid;
    place-items: center;
    width: 62px;
    height: 62px;
    margin: 0 auto 14px;
    border-radius: 20px;
    background: #fff;
    box-shadow: var(--shadow-sm);
    font-size: 30px;
    line-height: 1;
}

.form-result h2 {
    margin: 0 0 10px;
    font-size: 23px;
    font-weight: 900;
    color: var(--ink);
}

.form-result p {
    max-width: 540px;
    margin: 0 auto 14px;
    font-size: 15.5px;
    line-height: 1.65;
    color: var(--ink-2);
}

.form-result a {
    color: var(--teal-700);
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.form-result-warn {
    background: linear-gradient(135deg, #FFF7ED, #FFFBEB);
    border-color: #FED7AA;
}

.form-result-warn h2 { color: #9A3412; }
.form-result-warn a { color: #C2410C; }

/* Their words, kept on screen, so a failed send never costs someone their writing. */
.form-recover {
    margin-top: 20px;
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    background: var(--surface);
    overflow: hidden;
    text-align: left;
}

.form-recover summary {
    list-style: none;
    cursor: pointer;
    padding: 14px 18px;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 14px;
    color: var(--ink-2);
}

.form-recover summary::-webkit-details-marker { display: none; }

.form-recover-title {
    padding: 0 18px;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 17px;
    color: var(--ink);
}

.form-recover-body {
    padding: 10px 18px 18px;
    font-size: 14.5px;
    line-height: 1.7;
    color: var(--ink-2);
    white-space: pre-wrap;
}

.form-note {
    margin-top: 14px;
    font-size: 14px;
    color: var(--ink-3);
}

.form-note-ok {
    color: var(--teal-700);
    font-weight: 600;
}

.stub-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-top: 18px;
}

/* ------------------------------------------------------------------- doc extras */

.doc-address {
    display: block;
    margin: 14px 0;
    padding: 18px 20px;
    border-radius: var(--r-md);
    background: var(--surface-2);
    border: 1px solid var(--line);
    font-style: normal;
    font-size: 15px;
    line-height: 1.75;
    color: var(--ink-2);
}

.contact-highlight {
    display: inline-block;
    padding: 10px 16px;
    border-radius: var(--r-md);
    background: var(--teal-50);
    border: 1px solid var(--teal-100);
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 15.5px;
    color: var(--teal-800);
}

.contact-highlight a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* Donate opens on the giving panel rather than on prose. */
.donate-hero { margin-bottom: 8px; }

/* --------------------------------------------------------- server-side validation */

.validation,
.field-validation-error {
    display: block;
    margin-top: 8px;
    font-size: 13.5px;
    font-weight: 600;
    color: #B91C1C;
}

/* On the dark newsletter panel the same message has to read against teal. */
.newsletter .validation { color: #FECACA; }

input.input-validation-error,
textarea.input-validation-error,
select.input-validation-error {
    border-color: #DC2626 !important;
    box-shadow: 0 0 0 4px rgba(220, 38, 38, .12) !important;
}

/* MVC always emits the summary element; it only becomes a panel once it holds errors. */
.validation-summary-valid { display: none; }

.form-errors.validation-summary-errors,
.auth-errors.validation-summary-errors {
    display: block;
    padding: 14px 16px;
    border-radius: 12px;
    background: #FEF2F2;
    border: 1px solid #FECACA;
    color: #B91C1C;
    font-size: 14px;
}

.form-errors.validation-summary-errors ul,
.auth-errors.validation-summary-errors ul {
    display: grid;
    gap: 4px;
}

.form-errors.validation-summary-errors li,
.auth-errors.validation-summary-errors li { list-style: none; }

/* ---------------------------------------------------------------------------
   Financials

   The two blocks the design system had no shape for: a spending breakdown, and
   a shelf of downloadable filings. Both render only when the client has
   supplied the data (see FinancialsOptions), so on a fresh deployment neither
   of these rules matches anything.
   --------------------------------------------------------------------------- */

.fin-split {
    margin: 28px 0 8px;
    padding: 24px;
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    background: var(--surface);
    box-shadow: var(--shadow-sm);
}

.fin-split-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 20px;
}

.fin-split-head h3 { font-size: 20px; font-weight: 900; }

.fin-year {
    font-size: 13px;
    font-weight: 700;
    color: var(--ink-3);
    padding: 4px 10px;
    border-radius: var(--r-full);
    background: var(--surface-2);
}

.fin-rows { display: grid; gap: 18px; list-style: none; }

.fin-row-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px;
}

.fin-label { font-weight: 700; color: var(--ink); }

.fin-pct {
    font-variant-numeric: tabular-nums;
    font-weight: 900;
    color: var(--teal-600);
}

.fin-track {
    height: 10px;
    border-radius: var(--r-full);
    background: var(--surface-2);
    overflow: hidden;
}

/* The width is the datum, so it is set inline from the configured share. The first row is the
   programme share on every breakdown that matters, hence the brand teal leading the scale. */
.fin-fill {
    height: 100%;
    border-radius: var(--r-full);
    background: linear-gradient(90deg, var(--teal-500), var(--teal-600));
}

.fin-row:nth-child(2) .fin-fill { background: linear-gradient(90deg, #60A5FA, var(--blue)); }
.fin-row:nth-child(2) .fin-pct { color: var(--blue); }
.fin-row:nth-child(3) .fin-fill { background: linear-gradient(90deg, var(--amber-400), var(--amber-600)); }
.fin-row:nth-child(3) .fin-pct { color: var(--amber-600); }
.fin-row:nth-child(n+4) .fin-fill { background: linear-gradient(90deg, #A78BFA, var(--purple)); }
.fin-row:nth-child(n+4) .fin-pct { color: var(--purple); }

.fin-note { margin-top: 8px; font-size: 14px; color: var(--ink-3); }

.fin-docs {
    display: grid;
    gap: 12px;
    margin: 20px 0 8px;
}

.fin-doc {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 18px;
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    background: var(--surface);
    box-shadow: var(--shadow-xs);
    color: inherit;
    text-decoration: none;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.fin-doc:hover,
.fin-doc:focus-visible {
    transform: translateY(-2px);
    border-color: var(--teal-200);
    box-shadow: var(--shadow-md);
}

.fin-doc-icon {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: var(--r-sm);
    background: var(--teal-50);
    color: var(--teal-600);
    font-size: 20px;
}

.fin-doc-text { display: grid; gap: 2px; min-width: 0; }

.fin-doc-year {
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--ink-3);
}

.fin-doc-text strong { font-weight: 800; }

.fin-doc-desc { font-size: 14px; color: var(--ink-3); }

.fin-doc-go { flex: 0 0 auto; margin-left: auto; color: var(--ink-3); }

.fin-doc:hover .fin-doc-go,
.fin-doc:focus-visible .fin-doc-go { color: var(--teal-600); }

@media (prefers-reduced-motion: reduce) {
    .fin-doc { transition: none; }
    .fin-doc:hover,
    .fin-doc:focus-visible { transform: none; }
}

/* --------------------------------------------------------------------------
   Who's Who, Thanks and Fundraiser - the legacy "How To Help" pages
   -------------------------------------------------------------------------- */

.team-grid { display: grid; gap: 20px; margin-bottom: 40px; }

.team-card {
    display: grid;
    gap: 20px;
    padding: 22px;
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    background: var(--surface);
    box-shadow: var(--shadow-xs);
}

@media (min-width: 640px) {
    .team-card { grid-template-columns: 160px 1fr; align-items: start; }
}

/* The legacy portraits are different sizes and shapes; a fixed square crop keeps the cards even. */
.team-card img {
    width: 160px;
    height: 160px;
    object-fit: cover;
    border-radius: var(--r-md);
    background: var(--surface-2);
}

.team-card h2 { font-size: 21px; font-weight: 900; color: var(--ink); }

.team-role {
    margin: 2px 0 10px;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--purple);
}

.team-card p:not(.team-role) { font-size: 15.5px; line-height: 1.7; color: var(--ink-2); }

.opening-list,
.supporter-grid {
    display: grid;
    gap: 10px;
    margin: 18px 0 8px;
    list-style: none;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}

.opening-list li,
.supporter-grid li {
    padding: 12px 16px;
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    background: var(--surface);
    font-weight: 700;
    color: var(--ink);
}

.supporter-grid a { color: var(--teal-700); text-decoration: none; }
.supporter-grid a:hover { text-decoration: underline; }

.event-flyer {
    display: block;
    width: 100%;
    max-width: 640px;
    height: auto;
    margin: 0 auto;
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-md);
}

/* ------------------------------------------------------------------ guest articles */

/* The Parenting with Kris articles each open with a stock photograph whose licence asks for a
   credit, so the picture and its caption travel together. */
.article-figure { margin: 0 0 28px; }

.article-figure img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 440px;
    object-fit: cover;
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-md);
}

.article-figure figcaption {
    margin-top: 8px;
    font-size: 13px;
    color: var(--ink-3);
}

/* A real table rather than the screenshot of one the legacy page used. Scrolls sideways on its
   own at phone width so the page itself never does. */
.doc-table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-md); }

.doc-table { width: 100%; min-width: 560px; border-collapse: collapse; font-size: 14.5px; line-height: 1.5; }

.doc-table th,
.doc-table td { padding: 12px 14px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }

.doc-table thead th { background: var(--surface-2); color: var(--ink); font-weight: 800; }
.doc-table tbody th { color: var(--ink); font-weight: 700; }
.doc-table tbody tr:last-child > * { border-bottom: 0; }

/* "Read other articles by Kris" - the series list at the foot of every article. */
.article-series { margin-top: 36px; }
.article-series h2 { font-size: 22px; margin-top: 0; }

.article-series ul { list-style: none; display: grid; gap: 8px; margin-top: 14px; }

.article-series a {
    display: block;
    padding: 12px 16px;
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    background: var(--surface);
    text-decoration: none;
}

.article-series a:hover { border-color: var(--teal-200); box-shadow: var(--shadow-xs); }
.article-series [aria-current] { font-weight: 700; color: var(--ink-3); padding: 12px 16px; display: block; }

/* ------------------------------------------------------------------ article page (Articles/Read) */

/* The picture at its own shape, centred: an article's picture may be a photograph or a logo, and
   the 16:9 crop the page used to have cut the middle out of a logo. */
.article-lead-figure { margin: 32px 0; }

.article-lead-figure img {
    width: auto;
    max-width: 100%;
    max-height: 440px;
    margin-inline: auto;
    object-fit: contain;
}

.article-lead-figure figcaption { text-align: center; }
.article-lead-figure figcaption p { margin: 0; }
.article-figure figcaption a { color: inherit; text-decoration: underline; }

/* The body is rendered from the admin panel's formatting codes into the same elements the static
   documents use, so .prose styles it; this only matches the article page's larger type. */
.article-prose { font-size: 17.5px; line-height: 1.8; }

.author-card p + p { margin-top: 8px; }
.author-card a { color: var(--teal-700); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

.article-disclaimer {
    margin-top: 36px;
    padding: 18px 20px;
    border-radius: var(--r-md);
    background: var(--surface-2);
    font-size: 14px;
    color: var(--ink-3);
    line-height: 1.6;
}

.article-disclaimer a { color: var(--teal-700); font-weight: 600; text-decoration: underline; }