/* ============================================================================
   Simpler Grants — shared foundation ("Cream & Terracotta")
   Linked FIRST by every page (before app-nav.css and the page's own sheet).
   This is the single home of the design tokens and the house components —
   page sheets must not redeclare anything in here; they extend it with
   page-prefixed classes and (rarely) size overrides on the shared classes.
   ============================================================================ */

:root {
    --dsk-bg: #f5eee1;
    --dsk-rim: rgba(140, 84, 48, 0.05);
    --dsk-rim-line: rgba(140, 84, 48, 0.12);
    --dsk-panel: #fdf9f0;
    --dsk-line: rgba(84, 56, 34, 0.12);
    --dsk-line-strong: rgba(84, 56, 34, 0.24);
    --dsk-ink: #38271a;
    --dsk-ink-soft: #7b6350;
    --dsk-ink-faint: #a08a75;
    --dsk-terra: #bc5233;
    --dsk-terra-deep: #9d4127;
    /* Light-on-terracotta text (buttons, active pills) — the one color that must
       stay in step with --dsk-terra when contrast is tuned. */
    --dsk-terra-ink: #fdf6ec;
    --dsk-ease: cubic-bezier(0.32, 0.72, 0, 1);
    --dsk-serif: "Newsreader", ui-serif, Georgia, serif;
    --dsk-mono: "Spline Sans Mono", ui-monospace, SFMono-Regular, monospace;
}

*, *::before, *::after { box-sizing: border-box; }

/* Panels toggled to display:flex/grid by page sheets would beat the UA's
   [hidden] rule — restate it with authority once, for every page. */
[hidden] { display: none !important; }

:focus-visible {
    outline: 2px solid var(--dsk-terra);
    outline-offset: 2px;
    border-radius: 3px;
}

/* ---- Entrance motion (referenced by page sheets behind their own
        prefers-reduced-motion guards) ---- */

@keyframes site-rise {
    from { opacity: 0; transform: translateY(14px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ---- House buttons ----
   .site-btn         quiet outline pill (list-row actions: Save, Details, …)
   .site-btn--solid  terracotta pill (primary submits and CTAs) — standalone,
                     not a modifier of .site-btn.
   Single-class selectors on purpose: page anchor resets are :where()-wrapped
   (zero specificity), so these win on <a> elements without prefix hacks. */

.site-btn {
    font-family: var(--dsk-mono);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    background: transparent;
    border: 1px solid var(--dsk-line-strong);
    border-radius: 999px;
    padding: 6px 13px;
    cursor: pointer;
    color: var(--dsk-ink-soft);
    text-decoration: none;
    transition: border-color 0.3s var(--dsk-ease), color 0.3s var(--dsk-ease);
}

.site-btn:hover { border-color: var(--dsk-terra); color: var(--dsk-terra); }

.site-btn--solid {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: var(--dsk-terra);
    color: var(--dsk-terra-ink);
    font-family: var(--dsk-mono);
    font-weight: 600;
    font-size: 13px;
    padding: 12px 24px;
    border: none;
    border-radius: 999px;
    cursor: pointer;
    white-space: nowrap;
    text-decoration: none;
    transition: transform 0.4s var(--dsk-ease), box-shadow 0.4s var(--dsk-ease), background 0.4s var(--dsk-ease);
}

.site-btn--solid:hover {
    background: var(--dsk-terra-deep);
    color: var(--dsk-terra-ink);
    transform: translateY(-1px);
    box-shadow: 0 12px 30px -14px rgba(188, 82, 51, 0.55);
}

.site-btn--solid:active { transform: scale(0.98); }

/* ---- Empty state (the "no results yet" panel every list surface shows) ---- */

.site-empty {
    max-width: 480px;
    margin: 48px auto;
    text-align: center;
    background: var(--dsk-rim);
    border: 1px solid var(--dsk-rim-line);
    border-radius: 20px;
    padding: 52px 40px;
}

.site-empty__glyph {
    display: inline-block;
    width: 34px;
    height: 34px;
    border: 1.5px solid var(--dsk-terra);
    margin-bottom: 18px;
}

.site-empty__glyph--circle { border-radius: 50%; }
.site-empty__glyph--diamond { transform: rotate(45deg); }

.site-empty__eyebrow {
    margin: 0 0 10px;
    font-family: var(--dsk-mono);
    font-size: 10px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--dsk-ink-faint);
}

.site-empty__title {
    margin: 0 0 12px;
    font-size: 26px;
    font-weight: 600;
    letter-spacing: -0.01em;
}

.site-empty__body {
    margin: 0 0 28px;
    color: var(--dsk-ink-soft);
    font-size: 15px;
}