/* =====================================================================
   Zero Shame Game -- site stylesheet
   Design grounded in the game's own core object: the black card (prompt)
   and white card (answer). The dashboard's greeting is styled like an
   actual black card from the game; stat tiles are styled like small
   white cards. Everything else stays quiet and out of the way.

   Accessibility non-negotiables baked in throughout:
   - All type sized in rem, so browser/OS text-size settings apply.
   - Color contrast checked to meet at least WCAG AA on every pairing.
   - A strong, visible focus outline on every interactive element.
   - No information ever conveyed by color alone.
   - Motion is minimal and fully disabled under prefers-reduced-motion.
   ===================================================================== */

:root {
    --ink: #17151c;         /* near-black, warm undertone -- "black card" fill */
    --paper: #faf6ef;       /* warm off-white -- page background, "white card" fill */
    --paper-dim: #f0ebe0;   /* slightly deeper paper, for subtle section separation */
    --ink-soft: #3a3540;    /* body text -- softer than pure black, still high contrast */
    --shame-pink: #b02249;  /* primary actions, links -- 6.15:1 on paper, verified AA */
    --gold: #7a5b00;        /* wins / gold star accent -- 5.86:1 on paper, verified AA */
    --plum: #6b4e71;        /* secondary borders, quiet accents */
    --border: #ddd4c4;      /* hairline borders on paper */
}

* {
    box-sizing: border-box;
}

html {
    font-size: 100%; /* respects the browser/OS text-size setting */
}

body {
    margin: 0;
    padding: 0;
    background: var(--paper);
    color: var(--ink-soft);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-size: 1.0625rem;
    line-height: 1.6;
}

.page {
    max-width: 42rem;
    margin: 0 auto;
    padding: 1.5rem 1.25rem 4rem;
}

h1, h2, h3 {
    font-family: "Space Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    color: var(--ink);
    line-height: 1.25;
}

h1 {
    font-size: 1.75rem;
    margin: 0 0 1rem;
}

h2 {
    font-size: 1.25rem;
    margin: 2rem 0 0.75rem;
    padding-bottom: 0.25rem;
    border-bottom: 2px solid var(--border);
}

h3 {
    font-size: 1.0625rem;
    margin: 1.25rem 0 0.5rem;
}

a {
    color: var(--shame-pink);
    text-decoration: underline;
}

a:hover {
    text-decoration: none;
}

/* Strong, visible focus indicator on every interactive element -- never removed. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 3px solid var(--gold);
    outline-offset: 2px;
}

button, .btn {
    font: inherit;
    font-weight: 600;
    background: var(--shame-pink);
    color: var(--paper);
    border: none;
    border-radius: 0.4rem;
    padding: 0.65rem 1.1rem;
    cursor: pointer;
}

button:hover, .btn:hover {
    background: #8f1c3a;
}

input, select, textarea {
    font: inherit;
    padding: 0.5rem;
    border: 1px solid var(--border);
    border-radius: 0.3rem;
    background: #fff;
    color: var(--ink-soft);
}

label {
    font-weight: 600;
}

ul, ol {
    padding-left: 1.4rem;
}

li {
    margin-bottom: 0.4rem;
}

hr {
    border: none;
    border-top: 1px solid var(--border);
    margin: 1.5rem 0;
}

table {
    width: 100%;
    border-collapse: collapse;
    margin: 1rem 0;
}

th, td {
    text-align: left;
    padding: 0.5rem 0.6rem;
    border-bottom: 1px solid var(--border);
}

th {
    font-family: "Space Grotesk", sans-serif;
    color: var(--ink);
}

/* ---------------------------------------------------------------------
   Signature element: the dashboard greeting, styled like an actual
   black card from the game -- dark fill, rounded corners, a small
   corner index like a real playing card.
   --------------------------------------------------------------------- */
.black-card-banner {
    background: var(--ink);
    color: var(--paper);
    border-radius: 0.9rem;
    padding: 1.75rem 1.5rem;
    margin-bottom: 1.75rem;
    position: relative;
}

.black-card-banner .corner-index {
    position: absolute;
    top: 0.85rem;
    left: 1rem;
    font-family: "Space Grotesk", sans-serif;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--gold);
    text-transform: uppercase;
}

.black-card-banner h1 {
    color: var(--paper);
    margin-top: 1.25rem;
}

.black-card-banner p {
    margin: 0;
    color: var(--paper-dim);
}

/* ---------------------------------------------------------------------
   Stat tiles: small "white card" style blocks for the dashboard's
   stat row. Each tile pairs a plain-language label with its value --
   never color alone.
   --------------------------------------------------------------------- */
.stat-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin: 1rem 0 1.5rem;
    list-style: none;
    padding: 0;
}

.stat-tile {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 0.6rem;
    padding: 0.85rem 1rem;
    min-width: 8rem;
    flex: 1 1 8rem;
}

.stat-tile .stat-value {
    display: block;
    font-family: "Space Grotesk", sans-serif;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--ink);
}

.stat-tile .stat-value.gold { color: var(--gold); }

.stat-tile .stat-label {
    display: block;
    font-size: 0.85rem;
    color: var(--ink-soft);
}

/* ---------------------------------------------------------------------
   Simple menu list styling for the dashboard's main navigation.
   --------------------------------------------------------------------- */
.menu-list {
    list-style: none;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
    gap: 0.6rem;
}

.menu-list a {
    display: block;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 0.5rem;
    padding: 0.75rem 0.9rem;
    text-decoration: none;
    color: var(--ink);
    font-weight: 600;
}

.menu-list a:hover {
    border-color: var(--shame-pink);
}

.notice {
    background: var(--paper-dim);
    border-left: 4px solid var(--plum);
    padding: 0.75rem 1rem;
    margin: 1rem 0;
}

.error-box {
    background: #fbeaea;
    border-left: 4px solid var(--shame-pink);
    padding: 0.75rem 1rem;
    margin: 1rem 0;
}

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

/* Blank markers in prompt text: a screen reader announces the text
   ", blank, " normally (giving a natural pause on each side), while a
   sighted person just sees an underlined gap -- the text itself is
   transparent, not visually hidden, so it stays in the accessibility
   tree instead of being skipped. */
/* Genuinely visually hidden but still reachable by screen readers --
   NOT display:none (which hides from screen readers too). This class
   is referenced across several pages for live-region announcements
   that have a separate, already-visible plain-text equivalent right
   next to them; without this rule actually existing, that "hidden"
   text was rendering as ordinary, visible, duplicated text right on
   the page. */
.sr-only-not-really-just-quiet {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Genuinely hidden from sighted view, but still fully present for a
   screen reader -- unlike display:none (which hides it from screen
   readers too), this keeps the element in the accessibility tree.
   This class name was already used across several pages for exactly
   this purpose, but was never actually defined here, so all of that
   content was rendering as plain visible text instead of being
   hidden -- most noticeably as duplicated-looking text next to a
   live status update it was meant to announce silently. */
.sr-only-not-really-just-quiet {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.fitb-blank {
    color: transparent;
    /* Deliberately NOT currentColor here -- that would inherit the
       transparent text color above and make the underline invisible
       too, leaving sighted users looking at an unexplained gap with
       no indication a blank was ever there. This needs its own real,
       visible color instead. */
    border-bottom: 2px solid var(--plum);
    padding: 0 1.5em;
    user-select: none;
}