/*
 * MindPalace styles — a thin layer over Bootstrap 5.3 (loaded from CDN in the
 * quizzes layout). Design language: modern Swiss / International Typographic
 * Style with a late-70s accent — grotesque type (Helvetica Neue, native on
 * iOS/macOS, no webfont download), warm paper ground, near-black ink, one red
 * accent, square corners, rules instead of boxes and shadows.
 *


 */

:root {
    --sw-ink: #141414;        /* near-black */
    --sw-paper: #f4f3ee;      /* warm paper */
    --sw-surface: #ffffff;
    --sw-red: #d0342c;        /* the one accent */
    --sw-red-dark: #b02a23;
    --sw-gray: #6e6d68;
    --sw-line: #d8d6cd;       /* hairlines */
}

body {
    background-color: var(--sw-paper);
    color: var(--sw-ink);
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

h1, h2, h3 {
    font-weight: 700;
    letter-spacing: -0.015em;
}

a { color: var(--sw-red); }

/* Square everything — no rounded corners in this design language */
.btn, .alert, .badge, .form-control, .form-check-input {
    border-radius: 0;
}

/* ---- Masthead: bold wordmark over a heavy rule ---- */
.masthead {
    border-bottom: 5px solid var(--sw-ink);
}

.masthead .brand {
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--sw-ink);
    text-decoration: none;
}

.masthead .brand:hover {
    color: var(--sw-red);
}

.masthead .tagline {
    color: var(--sw-gray);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.09em;
}

/* ---- Bootstrap accent overrides ----
 * Semantic mapping: primary actions are ink, the "go" action is the red
 * accent, outlines are ink hairlines. */
.btn-primary {
    --bs-btn-bg: var(--sw-ink);
    --bs-btn-border-color: var(--sw-ink);
    --bs-btn-hover-bg: #000;
    --bs-btn-hover-border-color: #000;
    --bs-btn-active-bg: #000;
    --bs-btn-active-border-color: #000;
}

.btn-outline-primary {
    --bs-btn-color: var(--sw-ink);
    --bs-btn-border-color: var(--sw-ink);
    --bs-btn-hover-bg: var(--sw-ink);
    --bs-btn-hover-border-color: var(--sw-ink);
    --bs-btn-active-bg: #000;
    --bs-btn-active-border-color: #000;
}

.btn-success {
    --bs-btn-bg: var(--sw-red);
    --bs-btn-border-color: var(--sw-red);
    --bs-btn-hover-bg: var(--sw-red-dark);
    --bs-btn-hover-border-color: var(--sw-red-dark);
    --bs-btn-active-bg: var(--sw-red-dark);
    --bs-btn-active-border-color: var(--sw-red-dark);
}

.form-check-input:checked {
    background-color: var(--sw-ink);
    border-color: var(--sw-ink);
}

/* Flat ink chapter badge (quiz reveal); !important needed to beat
 * Bootstrap's own !important on .text-bg-secondary */
.badge.text-bg-secondary {
    background-color: var(--sw-ink) !important;
    color: var(--sw-paper) !important;
}

/* ---- Quiz screen: a panel defined by a rule, not a shadow ---- */
.quiz-card {
    max-width: 640px;
    background-color: var(--sw-surface);
    border-top: 6px solid var(--sw-ink);
    padding: 1.5rem;
}

.quiz-heading {
    /* Scales smoothly between phone and desktop */
    font-size: clamp(1.5rem, 5vw, 2.25rem);
    line-height: 1.25;
    font-weight: 700;
}

/* The highlighted "you are here" row in the context reveal */
.context-current {
    background-color: var(--sw-ink);
    color: var(--sw-paper);
}

/* Comfortable tap targets on touch devices */
.btn-lg {
    min-height: 3rem;
}

/* Keyboard shortcut hints: subtle, and hidden where there's no keyboard */
.kbd-hint {
    opacity: 0.55;
    font-size: 0.8em;
}

@media (pointer: coarse) {
    .kbd-hint { display: none; }
}

/* ---- Review table (recall drill) ----
 * Bootstrap 5.3 paints each td's background via --bs-table-bg, so states are
 * styled on the cells, not the rows. Three states: visited (plain), active
 * (white with a red edge marker), fogged (solid near-black). Fogged rows are
 * a featureless band: no text ghost and no interior cell borders, because
 * either would betray where the chapter breaks fall — too much of an assist
 * for a memory drill. */
.table {
    --bs-border-color: var(--sw-line);
}

.table-row td {
    transition: background-color 0.35s ease, color 0.35s ease;
}

/* Chapter markers read as red accents, not tinted cells */
.table .table-primary {
    --bs-table-bg: transparent;
    color: var(--sw-red);
    font-weight: 700;
}

.table-row.title-row td {
    font-weight: 700;
    background-color: var(--sw-ink);
    color: var(--sw-paper);
}

.table-row.active-row td {
    background-color: var(--sw-surface);
    box-shadow: none;
}

.table-row.active-row td:first-child {
    box-shadow: inset 6px 0 0 var(--sw-red); /* red edge marker on the cursor row */
}

.table-row.title-row.active-row td {
    background-color: var(--sw-ink); /* title keeps its banner look while active */
    color: var(--sw-paper);
}

.table-row.fogged td {
    background-color: var(--sw-ink); /* the fog of darkness */
    border-color: var(--sw-ink);     /* melt cell borders into the fog */
    color: transparent;
    text-shadow: none;
    box-shadow: none;   /* suppress Bootstrap's inset accent (e.g. .table-primary) */
    user-select: none;  /* no cheating by selecting the hidden text */
    -webkit-user-select: none;
}

/* Fixed thumb-reach control bar for the drill (iOS homescreen app has no
 * keyboard); env() keeps it above the iPhone home indicator. */
.drill-controls {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 0.75rem 0 calc(0.75rem + env(safe-area-inset-bottom));
    background-color: rgba(244, 243, 238, 0.96);
    border-top: 2px solid var(--sw-ink);
    z-index: 10;
}

/* Keep the last table rows scrollable above the fixed bar */
.drill-content {
    padding-bottom: 7rem;
}