/* ============================================================
   WYCSA Archive — brand foundation
   Scouts palette + Nunito Sans (self-hosted, OFL) + primitives
   ============================================================ */

@font-face {
    font-family: 'Nunito Sans';
    font-style: normal;
    font-weight: 300 900;
    font-display: swap;
    src: url('/fonts/nunito-sans-var-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Nunito Sans';
    font-style: normal;
    font-weight: 300 900;
    font-display: swap;
    src: url('/fonts/nunito-sans-var-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
    /* Core brand */
    --purple: #7413DC;
    --purple-600: #6511C4;
    --purple-700: #560DA6;
    --purple-050: #F4EDFC;
    --purple-100: #E9DCFA;
    --purple-200: #D9C4F4;

    /* Scouts secondary palette (official) */
    --teal: #088486;
    --forest: #205B41;
    --green: #25B755;
    --blue: #006DDF;
    --navy: #003982;
    --red: #ED3F23;
    --err-text: #C42B12; /* red dark enough for text (≈5.1:1); --red stays for icons/fills */
    --yellow: #FFE627;
    --pink: #FFB4E5;
    --orange: #FF912A;

    /* Neutrals — warm, faint purple bias (never pure black, per brand) */
    --ink: #221A2E;
    --ink-2: #4C4459;
    --ink-3: #6B6377; /* darkened for AA on tinted grounds (≈5.2:1 on white) */
    --paper: #FFFFFF;
    --bg: #FBFAFD;
    --bg-2: #F5F2FA;
    --line: #ECE6F3;
    --line-2: #DED5EC;

    /* Status (kept distinct from the accent) */
    --ok: #1E7F45;
    --ok-wash: #E7F4EC;
    --warn: #9A6212;
    --warn-wash: #FBF1DE;
    --warn-line: #E8CFA2;
    --info-wash: #E8EEFB;

    /* Elevation & shape */
    --sh-1: 0 1px 2px rgba(33,26,43,.05), 0 1px 3px rgba(33,26,43,.05);
    --sh-2: 0 4px 14px rgba(33,26,43,.07), 0 14px 34px rgba(33,26,43,.07);
    --sh-3: 0 8px 24px rgba(33,26,43,.10), 0 24px 60px rgba(33,26,43,.12);
    --ring: 0 0 0 3px rgba(116,19,220,.24);
    --r-sm: 8px; --r: 12px; --r-lg: 16px; --r-xl: 22px; --pill: 999px;

    --font: 'Nunito Sans', system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --measure: 66ch;
}

/* Per-category accents (Scouts secondary palette, darkened for legible text) */
.cat-teal   { --c: #0A7C7E; --cw: #E3F1F1; }
.cat-orange { --c: #9A4E0A; --cw: #FBEEE1; }
.cat-forest { --c: #205B41; --cw: #E5EFE9; }
.cat-blue   { --c: #0060C4; --cw: #E3EEFB; }
.cat-pink   { --c: #A63A77; --cw: #FAE8F2; }
.cat-purple { --c: #7413DC; --cw: #F3ECFC; }

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
    margin: 0;
    font-family: var(--font);
    font-weight: 400;
    color: var(--ink);
    background: var(--bg);
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 { font-weight: 800; line-height: 1.14; letter-spacing: -0.015em; margin: 0; text-wrap: balance; }
h1 { font-weight: 900; }
a { color: var(--purple-700); text-underline-offset: 2px; }

/* Icons */
.ic { display: inline-block; vertical-align: middle; flex: none; }

/* Buttons */
.btn {
    font-family: var(--font); font-weight: 700; font-size: 1rem;
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 12px 20px; border-radius: var(--pill); border: 1.5px solid transparent;
    cursor: pointer; text-decoration: none; line-height: 1.1; transition: background .14s ease, box-shadow .14s ease, border-color .14s ease;
}
.btn-primary { background: var(--purple); color: #fff; box-shadow: 0 2px 10px rgba(116,19,220,.28); }
.btn-primary:hover { background: var(--purple-600); }
.btn-primary:active { background: var(--purple-700); }
.btn-ghost { background: var(--paper); color: var(--purple-700); border-color: var(--line-2); }
.btn-ghost:hover { border-color: var(--purple-200); background: var(--purple-050); }
.btn-lg { padding: 15px 26px; font-size: 1.05rem; }
.btn-block { display: flex; width: 100%; }

/* Accessible focus */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
    outline: none; box-shadow: var(--ring); border-radius: var(--r-sm);
}

@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

/* Accessibility */
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--purple); color: #fff; padding: 10px 18px; border-radius: 0 0 var(--r) var(--r); font-weight: 700; text-decoration: none; transition: top .15s ease; }
.skip-link:focus { top: 0; }
[x-cloak] { display: none !important; }

/* ============================================================
   Feedback vocabulary — spinners, disabled states, progress
   Shared by the PWA and the public site so every action can
   acknowledge itself. (UX-2 / UX-3)
   ============================================================ */

@keyframes wy-spin { to { transform: rotate(360deg); } }

/* Inline spinner — inherits the current text colour, sizes to the font. */
.spin {
    display: inline-block; width: 1em; height: 1em; flex: none;
    border: 2px solid currentColor; border-right-color: transparent;
    border-radius: 50%; vertical-align: -0.15em;
    animation: wy-spin .6s linear infinite;
}

/* A disabled button must LOOK disabled (previously it was pixel-identical). */
.btn:disabled, .btn[disabled] { opacity: .55; cursor: progress; box-shadow: none; }
.btn:disabled:hover, .btn[disabled]:hover { background: var(--purple); }
.btn-ghost:disabled:hover, .btn-ghost[disabled]:hover { background: var(--paper); border-color: var(--line-2); }

/* Global top-of-page progress bar — driven by the Livewire commit hook in the
   shells, so EVERY server round-trip gets baseline feedback for free. */
#wy-bar {
    position: fixed; inset: 0 0 auto 0; height: 3px; z-index: 9999;
    pointer-events: none; opacity: 0; transition: opacity .25s ease; overflow: hidden;
}
#wy-bar.go { opacity: 1; }
#wy-bar::before {
    content: ""; position: absolute; top: 0; height: 100%; width: 40%; left: -40%;
    background: linear-gradient(90deg, transparent, var(--purple) 40%, var(--purple-600));
    border-radius: 0 3px 3px 0;
}
#wy-bar.go::before { animation: wy-slide 1.05s ease-in-out infinite; }
@keyframes wy-slide { 0% { left: -40%; } 100% { left: 100%; } }

/* Upload progress bar (real percentage from Livewire's upload events). */
.up-progress { display: flex; align-items: center; gap: 10px; margin-top: 12px; font-weight: 700; color: var(--purple-700); font-size: .95rem; }
.up-track { flex: 1; height: 8px; background: var(--purple-050); border-radius: var(--pill); overflow: hidden; }
.up-track > span { display: block; height: 100%; background: var(--purple); border-radius: var(--pill); transition: width .18s ease; }
.up-pct { font-variant-numeric: tabular-nums; min-width: 3.2em; text-align: right; }

/* Search "working…" spinner + dim-the-results-while-fetching. */
.search-busy { display: inline-flex; align-items: center; color: var(--purple-700); }
.is-busy { opacity: .5; transition: opacity .15s ease; }

/* Reduced motion: keep the feedback, drop the movement. */
@media (prefers-reduced-motion: reduce) {
    #wy-bar.go::before { left: 0; width: 100%; animation: none; }
    .spin { animation: none; border-right-color: currentColor; opacity: .6; }
}

/* Transient error toast (Livewire commit failure) */
#wy-toast { position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%) translateY(20px); z-index: 10000;
  background: var(--ink); color: #fff; padding: 12px 18px; border-radius: var(--r); box-shadow: var(--sh-3);
  font-weight: 600; font-size: .92rem; max-width: 90vw; text-align: center; opacity: 0; pointer-events: none;
  transition: opacity .2s ease, transform .2s ease; }
#wy-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
@media (prefers-reduced-motion: reduce) { #wy-toast { transition: opacity .2s ease; } }