/* CricZone theme. One accent (pitch green) on flat, neutral dark surfaces:
   no gradients, glows or glass. Tailwind (CDN) handles layout and maps the
   `accent` colour scale (see partials/tailwind.html); this file owns the
   palette and the reusable components. */

:root {
    --bg: #0c0e12;
    --surface: #13161b;
    --surface-2: #181c22;
    --raised: #1e232a;
    --border: #252a32;
    --border-strong: #323843;
    --text: #e6e8eb;
    --muted: #9ba3ae;
    --faint: #6b7380;

    --accent: #12b76a;          /* pitch green */
    --accent-hover: #32d583;
    --accent-ink: #04140c;      /* text on accent */
    --accent-soft: rgba(18, 183, 106, .12);
    --accent-line: rgba(18, 183, 106, .45);

    --danger: #f04438;
    --warn: #f79009;

    --radius: 14px;
    --radius-sm: 10px;
    --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
    color-scheme: dark;
}

html { scroll-behavior: smooth; }

body.cz {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-body);
    -webkit-font-smoothing: antialiased;
    min-height: 100vh;
    overflow-x: clip;
}

/* Kept as a hook in the markup; the page background is plain now. */
.cz-backdrop { display: none; }

.font-display { font-family: var(--font-body); font-weight: 700; letter-spacing: -0.025em; }
.text-muted { color: var(--muted); }
.text-faint { color: var(--faint); }
.text-gradient { color: var(--accent); }

/* ---------------------------------------------------------------- nav */
.cz-nav {
    position: sticky;
    top: 0;
    z-index: 40;
    background: rgba(12, 14, 18, .92);
    border-bottom: 1px solid var(--border);
}
@supports (backdrop-filter: blur(1px)) {
    .cz-nav { background: rgba(12, 14, 18, .8); backdrop-filter: blur(10px); }
}
.cz-wordmark { font-weight: 700; font-size: 1.15rem; letter-spacing: -0.02em; color: #fff; }
.cz-wordmark span { color: var(--accent); }
.cz-navlink { color: var(--muted); font-size: 0.875rem; font-weight: 500; transition: color .15s; }
.cz-navlink:hover { color: #fff; }

.cz-tab { padding: .45rem .8rem; border-radius: 8px; font-size: .875rem; font-weight: 600; color: var(--muted); transition: color .15s, background .15s; }
.cz-tab:hover { color: #fff; background: var(--surface-2); }
.cz-tab[aria-current="page"] { color: #fff; background: var(--raised); }
#userChip[aria-current="page"] { border-color: var(--accent-line); }

/* -------------------------------------------------------------- cards */
.cz-card {
    position: relative;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}
.cz-card-hover { transition: border-color .15s, background .15s; }
.cz-card-hover:hover { border-color: var(--border-strong); background: var(--surface-2); }
/* Emphasis: the one card on a page that matters. */
.cz-card-glow { border-color: var(--accent-line); }

.cz-inset {
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
}

/* ------------------------------------------------------------ buttons */
.cz-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    border-radius: var(--radius-sm);
    font-weight: 600;
    font-size: .9rem;
    padding: .65rem 1.15rem;
    border: 1px solid transparent;
    transition: background .15s, border-color .15s, color .15s, opacity .15s;
    white-space: nowrap;
    cursor: pointer;
}
.cz-btn:focus-visible { outline: 2px solid var(--accent-hover); outline-offset: 2px; }
.cz-btn:disabled { opacity: .45; cursor: not-allowed; }
.cz-btn-primary { color: var(--accent-ink); background: var(--accent); }
.cz-btn-primary:hover:not(:disabled) { background: var(--accent-hover); }
.cz-btn-ghost { color: var(--text); background: var(--surface-2); border-color: var(--border-strong); }
.cz-btn-ghost:hover:not(:disabled) { background: var(--raised); border-color: #3c4350; }
.cz-btn-lg { padding: .85rem 1.4rem; font-size: .975rem; }
.cz-btn-sm { padding: .4rem .75rem; font-size: .8rem; border-radius: 8px; }

/* Small actions (task cards). */
.cz-action { display: inline-flex; align-items: center; gap: .35rem; padding: .4rem .75rem; border-radius: 8px;
    font-size: .8rem; font-weight: 600; border: 1px solid var(--border-strong); background: var(--surface-2);
    color: var(--text); transition: background .15s, border-color .15s; }
.cz-action:hover { background: var(--raised); }
.cz-action-green { color: var(--accent-ink); background: var(--accent); border-color: var(--accent); }
.cz-action-green:hover { background: var(--accent-hover); }
.cz-action-red { color: #fda29b; }
.cz-action-amber { color: #fec84b; }
.cz-action-blue { color: var(--text); }

/* ------------------------------------------------------------- inputs */
.cz-label { display: block; font-size: .8rem; font-weight: 600; color: var(--muted); margin-bottom: .45rem; }
.cz-input {
    width: 100%;
    background: var(--bg);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    color: #fff;
    padding: .7rem .9rem;
    font-size: .925rem;
    transition: border-color .15s, box-shadow .15s;
}
.cz-input::placeholder { color: var(--faint); }
.cz-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.cz-input-icon { position: relative; }
.cz-input-icon > svg { position: absolute; left: .9rem; top: .85rem; width: 1.1rem; height: 1.1rem; color: var(--faint); pointer-events: none; }
.cz-input-icon > .cz-input { padding-left: 2.6rem; }

/* Toggle: <label class="cz-switch"><input type="checkbox"><span></span></label> */
.cz-switch { position: relative; display: inline-flex; width: 42px; height: 24px; flex-shrink: 0; cursor: pointer; }
.cz-switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.cz-switch span { position: absolute; inset: 0; border-radius: 999px; background: var(--border-strong); transition: background .2s; }
.cz-switch span::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%;
    background: #fff; transition: transform .2s; }
.cz-switch input:checked + span { background: var(--accent); }
.cz-switch input:checked + span::after { transform: translateX(18px); }
.cz-switch input:focus-visible + span { outline: 2px solid var(--accent-hover); outline-offset: 2px; }

/* ------------------------------------------------------- chips, badges */
.cz-pill {
    display: inline-flex; align-items: center; gap: .5rem;
    padding: .3rem .75rem; border-radius: 999px;
    font-size: .78rem; font-weight: 500; color: var(--muted);
    background: var(--surface); border: 1px solid var(--border-strong);
}
.cz-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }

/* Event types: neutral for fours, accent for sixes, and the two colours
   that carry meaning in cricket graphics: red wickets, amber milestones. */
.cz-chip { display: inline-flex; align-items: center; justify-content: center; min-width: 3.4rem; padding: .2rem .5rem;
    border-radius: 6px; font-size: .68rem; font-weight: 700; letter-spacing: .06em; border: 1px solid transparent; }
.cz-chip-four { color: var(--text); background: var(--raised); border-color: var(--border-strong); }
.cz-chip-six { color: var(--accent-ink); background: var(--accent); }
.cz-chip-wicket { color: #fda29b; background: rgba(240, 68, 56, .12); border-color: rgba(240, 68, 56, .3); }
.cz-chip-milestone { color: #fec84b; background: rgba(247, 144, 9, .12); border-color: rgba(247, 144, 9, .3); }

.cz-status { display: inline-flex; align-items: center; gap: .4rem; padding: .22rem .6rem; border-radius: 999px;
    font-size: .74rem; font-weight: 600; white-space: nowrap; border: 1px solid var(--border-strong); background: var(--surface-2); }
.cz-status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.cz-status-done { color: var(--accent-hover); }
.cz-status-failed { color: #fda29b; }
.cz-status-active { color: var(--text); }
.cz-status-active::before { background: var(--accent); animation: cz-pulse 1.4s ease-in-out infinite; }
.cz-status-idle { color: var(--muted); }
@keyframes cz-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }

/* Step number */
.cz-step {
    display: inline-flex; align-items: center; justify-content: center;
    width: 1.6rem; height: 1.6rem; border-radius: 6px;
    font-size: .78rem; font-weight: 700; color: var(--accent-ink); background: var(--accent);
    flex-shrink: 0;
}

/* Progress bar */
.cz-progress { height: 6px; border-radius: 999px; background: var(--raised); overflow: hidden; }
.cz-progress > div { height: 100%; border-radius: inherit; background: var(--accent); transition: width .5s; }
.cz-progress-indeterminate > div { width: 35% !important; animation: cz-slide 1.3s ease-in-out infinite; }
@keyframes cz-slide { 0% { transform: translateX(-100%); } 100% { transform: translateX(300%); } }

/* Scrollbar for inner lists */
.cz-scroll { scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }
.cz-scroll::-webkit-scrollbar { width: 6px; height: 6px; }
.cz-scroll::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 999px; }

/* FAQ */
.cz-faq summary { list-style: none; cursor: pointer; }
.cz-faq summary::-webkit-details-marker { display: none; }
.cz-faq summary .cz-plus { transition: transform .2s; }
.cz-faq[open] summary .cz-plus { transform: rotate(45deg); }

/* Toast */
.cz-toast { pointer-events: auto; padding: .75rem 1rem; border-radius: var(--radius-sm); font-size: .875rem; color: var(--text);
    background: var(--raised); border: 1px solid var(--border-strong); box-shadow: 0 12px 32px -12px rgba(0, 0, 0, .7);
    animation: cz-rise .2s ease both; }
.cz-toast-ok { border-left: 3px solid var(--accent); }
.cz-toast-err { border-left: 3px solid var(--danger); }

/* Big choice cards (Lab: player / team / match) */
.cz-choice { text-align: left; transition: border-color .15s, background .15s; }
.cz-choice:hover { border-color: var(--border-strong); background: var(--surface-2); }
.cz-choice[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); }

/* Line icon tile, used where emoji used to be */
.cz-icon { display: inline-flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; border-radius: 10px;
    background: var(--surface-2); border: 1px solid var(--border-strong); color: var(--accent); flex-shrink: 0; }
.cz-icon svg { width: 1.25rem; height: 1.25rem; }

/* Gentle entrance, opt-in; off for reduced motion. */
.cz-rise { animation: cz-rise .5s ease both; }
.cz-rise-2 { animation-delay: .05s; }
.cz-rise-3 { animation-delay: .1s; }
@keyframes cz-rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
    .cz-rise, .cz-status-active::before, .cz-progress-indeterminate > div, .cz-toast { animation: none; }
}