/* =====================================================
study.css
PURPOSE: All visual styles for the Study Mode screen.
WHAT BELONGS HERE:
- Study screen layout and full-height fill
- Card flip container and 3D transform styles
- Progress bar and counter styles
- Confidence button styles for study mode
- Navigation arrow button styles
- Edit and shuffle button styles in the header
WHAT DOES NOT BELONG HERE:
- App-wide colors → styles/theme.css
- Animations → styles/animations.css
- Bottom nav bar → styles/bottom-nav.css
COLOR USAGE:
All colors reference variables defined in
styles/theme.css. To change any color in study
mode, edit theme.css ONLY.
Do NOT hardcode (hardcode = write a fixed value
directly instead of using a variable) colors here.
ACRONYMS (ACR = Acronym) USED IN THIS FILE:
- CSS = Cascading Style Sheets, controls visuals
- HTML = HyperText Markup Language, page structure
- JS = JavaScript, makes the app interactive
- 3D = Three Dimensional, width/height/depth
- px = Pixels, a unit of screen measurement
- rem = Root Em, a scalable font size unit
- vh = Viewport Height, 1vh = 1% of screen height
- % = Percentage, relative to the parent element
- ID = Identifier, a unique label for an element
- z = Z-axis, the depth layer in 3D space
- flex = A CSS layout system for arranging items
===================================================== */
/* ── SCREEN CONTAINER PADDING OVERRIDE ───────────────────
Placed FIRST so it is easy to find.
Removes the 16px padding that main.css adds to
#screen-container so study mode manages its own
internal spacing without extra gaps.
:has() = a CSS selector that targets a parent element
based on what it contains. This says: "if
#screen-container contains #study-mode-screen,
set its padding to 0."
⚠️ ASSUMPTION: Browser supports :has() — works in
Chrome 105+, Safari 15.4+, Edge 105+, Firefox 121+. */
#screen-container:has(#study-mode-screen) {
padding: 0;
padding-top: calc(var(--app-header-height) + var(--safe-area-top));
/* #app-header is position: fixed and overlays on top
of #screen-container's full-height box — without this,
study mode's OWN .study-header (Back/title/Shuffle/
Edit) would render starting at the very top, hidden
behind the app-wide "RemSym" header instead of below
it. Left/right/bottom stay 0 — study mode manages the
rest of its own spacing (including bottom-nav
clearance) internally. */
overflow-y: hidden;
/* overflow-y: hidden = prevents #screen-container
from scrolling when study mode is active.
Study mode manages its own layout entirely. */
}
/* The "Deck Complete" results state (renderSessionComplete
Screen() in study-mode.js) is exempt from the overflow:
hidden above — its content (confetti/title/subtitle/5
confidence circles/2 buttons) can be taller than the
available space on shorter viewports, and unlike the flip-
card screen, there's no interaction reason to force an
exact fit. Letting it scroll instead means the bottom
button never silently ends up clipped behind the fixed
bottom nav bar.
Selector deliberately includes BOTH #study-mode-screen and
.study-mode-screen--complete together (not just the class
alone) — :has(#study-mode-screen) above counts as two ID-
level selectors (#screen-container + #study-mode-screen),
so a class-only override here would lose the specificity
fight and never actually apply. Matching the id AND class
together keeps this rule's specificity strictly higher. */
#screen-container:has(#study-mode-screen.study-mode-screen--complete) {
overflow-y: auto;
}
/* ── SCREEN WRAPPER ───────────────────────────────────────
Fills the full height of #screen-container and stacks
all sections vertically using flex.
KEY FIXES FROM PREVIOUS VERSION:
1. overflow: hidden REMOVED — this was clipping
(clipping = cutting off and hiding) the nav buttons
2. height: 100% stays — fills parent container
3. All child rows use flex-shrink: 0 so they never
collapse, and the card area uses flex: 1 with a
capped max-height so it fills space without
pushing the nav row off screen. */
#study-mode-screen {
display: flex;
flex-direction: column;
height: 100%;
/* 100% = fill the exact height of #screen-container.
NOT 100vh (vh = Viewport Height) because that would
make it try to be as tall as the whole browser
window regardless of the header and nav bar. */
background: var(--color-background);
/* --color-background = #0a0e2a dark blue */
color: var(--color-text-primary);
/* --color-text-primary = #ffffff white */
box-sizing: border-box;
/* box-sizing: border-box = padding included inside
the element's total width/height, not on top */
/* ⚠️ overflow: hidden has been REMOVED.
It was hiding the nav buttons by clipping
anything that extended beyond the screen height.
The layout now fits without needing to clip. */
}
/* Overrides animations.css's shared "#screen-container > *"
entrance animation with an opacity-only version for JUST
this screen — same fix, same reasoning as scheduler.css's
identical override (see its own longer comment): the shared
transform-based animation creates a new containing block for
any position:fixed descendant while it's running, and the
empty-deck state's .study-empty__fab (below) is exactly
that. Two IDs (not a bare "#study-mode-screen" selector) to
reliably out-specificity the shared rule regardless of the
two files' order in index.html. */
#screen-container > #study-mode-screen {
animation: fadeIn 0.2s cubic-bezier(0.25, 0.1, 0.25, 1);
}
/* ── HEADER ───────────────────────────────────────────────
Top bar with Back button, deck title, Edit and
Shuffle buttons.
flex-shrink: 0 = never shrinks, always full height. */
.study-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0.7rem 1.25rem;
/* Reduced from 0.85rem to save vertical space */
border-bottom: var(--border-width)
solid
var(--color-border);
/* --color-border = #ff69b4 pink */
background: var(--color-background);
flex-shrink: 0;
/* flex-shrink: 0 = header never compresses */
}
.study-header__title {
font-size: var(--font-size-headline);
font-weight: 600;
color: var(--color-text-primary);
/* Plain label color, not the tint — a heading,
not an interactive element. */
margin: 0;
text-align: center;
flex: 1;
/* flex: 1 = stretches to fill space between buttons */
}
/* Groups Edit and Shuffle icon buttons on the right */
.study-header__actions {
display: flex;
align-items: center;
gap: 0.5rem;
}
/* Edit and Shuffle — secondary header actions get
iOS's "tinted" treatment (neutral fill, accent-
colored icon) rather than a solid fill.
Scoped to .study-header__actions specifically —
.btn--shuffle is also used by Deck View's shuffle
button (styled in main.css instead), and without this
scope this rule was unintentionally overriding that
one too, since study.css loads after main.css. */
.btn--edit-card,
.study-header__actions .btn--shuffle {
background: var(--ios-tertiarySystemFill);
border: none;
border-radius: var(--border-radius);
padding: 0.4rem 0.55rem;
font-size: 1rem;
cursor: pointer;
color: var(--color-accent-amber);
transition: background 0.2s ease,
color 0.2s ease;
}
.btn--edit-card:hover,
.study-header__actions .btn--shuffle:hover {
background: var(--ios-secondarySystemFill);
color: var(--color-accent-amber);
}
/* ── PROGRESS ROW ─────────────────────────────────────────
Progress bar LEFT, "Card X of Y" counter RIGHT,
both on the same horizontal row.
flex-shrink: 0 = never collapses. */
.study-progress-row {
display: flex;
align-items: center;
gap: 1rem;
padding: 0.5rem 1.25rem;
/* Reduced from 0.65rem to save vertical space */
flex-shrink: 0;
}
/* The grey track behind the amber progress fill */
.study-progress-bar-wrap {
flex: 1;
height: 8px;
/* Reduced from 10px to save a small amount of space */
background: var(--ios-systemGray5);
/* neutral gray track — iOS progress bars don't tint
the unfilled track with the accent color */
border-radius: 99px;
/* 99px = fully rounded pill shape */
overflow: hidden;
/* overflow: hidden = clips amber bar to pill shape */
}
/* Amber filled portion — width set by JS (JavaScript)
via updateProgress() in study-mode.js */
.study-progress-bar {
height: 100%;
width: 0%;
background: var(--color-accent-amber);
/* --color-accent-amber = #ffaa00 amber */
border-radius: 99px;
transition: width 0.4s ease;
}
/* "Card 3 of 12" counter */
.study-progress-counter {
font-size: 0.8rem;
color: var(--color-text-secondary);
/* --color-text-secondary = #cccccc light grey */
white-space: nowrap;
/* nowrap = text never wraps to a second line */
min-width: 85px;
text-align: right;
}
/* ── CARD FLIP CONTAINER ──────────────────────────────────
The outer wrapper providing 3D perspective.
(perspective = CSS property creating illusion of
depth. 1000px = natural subtle depth effect.)
flex: 1 = fills all available vertical space
between the rows above and below.
max-height caps it so it cannot push the nav
buttons off screen on any device. */
.study-card-flip-container {
perspective: 1000px;
margin: 0.5rem 1.25rem;
/* Reduced from 0.75rem to save vertical space */
cursor: pointer;
flex: 1;
/* flex: 1 = card area grows to fill available space */
display: flex;
flex-direction: column;
min-height: 0;
/* min-height: 0 = CRITICAL — allows flex child to
shrink below its natural content size. Without
this, flex: 1 causes overflow on small screens. */
max-height: 42vh;
/* max-height: 42vh = card never taller than 42% of
visible screen height. This is the key value that
ensures the nav buttons always remain visible.
vh = Viewport Height, 1vh = 1% of screen height.
⚠️ ASSUMPTION: 42vh leaves enough room for the
header (~7vh), progress row (~5vh), confidence
row (~7vh), and nav row (~7vh) = ~26vh total for
other rows, leaving comfortable breathing room. */
}
/* The element that physically rotates in 3D space.
transform-style: preserve-3d = keeps child elements
in true 3D space. Critical for the flip animation. */
.study-card-flip-inner {
position: relative;
width: 100%;
flex: 1;
/* flex: 1 = fills the full height of the container */
min-height: 130px;
/* min-height: 130px = card never smaller than this
even on the smallest phone screens */
transform-style: preserve-3d;
transform: rotateY(0deg);
/* 0deg = Question face visible at start */
}
/* Both card faces share these styles.
backface-visibility: hidden = hides the face
pointing away from the user during the flip. */
.study-card-face {
position: absolute;
/* absolute = both faces stack on top of each other */
top: 0;
left: 0;
width: 100%;
height: 100%;
backface-visibility: hidden;
border-radius: var(--border-radius-card);
border: none;
background: var(--color-card-bg);
box-shadow: var(--shadow-elevation-1);
overflow: hidden;
}
/* "Always White Flashcards" Appearance setting (Profile →
theme-manager.js's applyWhiteCards()) — forces just this
card face to stay light even in dark mode. Overriding the
TOKENS (not every individual color property one by one)
means every descendant that already reads --color-card-bg/
--color-card-text/--color-text-* (the study text, the
flip hint, anything added here later) automatically picks
up the light values too, without needing its own override
rule. Values are the exact light-mode definitions of
--ios-secondarySystemGroupedBackground/label/secondaryLabel/
tertiaryLabel from theme.css — not new colors, just this
card pinned to what light mode already looks like. */
:root[data-white-cards="true"] .study-card-face {
background: #FFFFFF;
--color-card-bg: #FFFFFF;
--color-card-text: #000000;
--color-text-primary: #000000;
--color-text-secondary: rgba(60, 60, 67, 0.60);
--color-text-muted: rgba(60, 60, 67, 0.30);
}
/* Question face — starts at 0deg, facing the user */
.study-card-face--question {
transform: rotateY(0deg);
}
/* Answer face — starts at 180deg, hidden behind
the question face until the card is flipped */
.study-card-face--answer {
transform: rotateY(180deg);
}
/* Canvas inside each card face.
position: relative = allows symbols to be placed
at exact absolute (absolute = exact X/Y coordinate)
positions on top of the text. */
.study-card-canvas {
position: relative;
width: 100%;
height: 100%;
padding: 1rem;
/* Reduced from 1.25rem to give more room for text */
box-sizing: border-box;
}
/* Wraps the text + symbol layer and scrolls internally
when there's too much text to fit — .study-flip-hint
stays a sibling of this (not inside it) specifically
so it stays pinned in view while this scrolls.
position: relative so .study-symbol-layer's absolute
children position against THIS box (and therefore
scroll along with the text), not the outer canvas. */
.study-card-scroll {
position: relative;
height: 100%;
overflow-y: auto;
overflow-x: hidden;
}
/* Card text — starts at the top of the card and is
horizontally centered. */
.study-card__text {
font-size: 1rem;
/* Reduced from 1.05rem to fit more text on screen */
line-height: 1.5;
color: var(--color-text-primary);
white-space: pre-wrap;
/* pre-wrap = preserves line breaks from the editor */
text-align: center;
}
/* Symbol layer — overlaid on top of card text */
.study-symbol-layer {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
/* pointer-events: none = symbols are display only,
cannot be clicked or moved in study mode */
}
/* "Tap to reveal answer ↓" hint */
.study-flip-hint {
position: absolute;
bottom: 0.75rem;
left: 0;
right: 0;
text-align: center;
font-size: 0.75rem;
color: var(--color-text-muted);
font-style: italic;
}
/* ── SWIPE-AWAY ANIMATION ─────────────────────────────────
Triggered by the Prev/Next buttons (not by dragging) —
once the current card has a confidence score, it flies
off screen in a direction based on that score before
the next/previous card is revealed:
1-2 = not confident yet → swipe LEFT
3 = middling → swipe UP
4-5 = confident → swipe RIGHT
Transition timing is applied inline by JS
(study-mode.js) only for the swipe-out itself, and
skipped when the position resets for the next card —
see swipeStudyCardAway() / resetSwipeTransform(). */
.study-swipe-left {
transform: translateX(-130%) rotate(-14deg);
opacity: 0;
}
.study-swipe-right {
transform: translateX(130%) rotate(14deg);
opacity: 0;
}
.study-swipe-up {
transform: translateY(-130%) rotate(3deg);
opacity: 0;
}
/* ── CONFIDENCE ROW ───────────────────────────────────────
flex-shrink: 0 = never collapses. Hidden (via the
--hidden modifier below) until the card is flipped to
the Answer side — rating your confidence only makes
sense once you've seen the answer. Faded rather than
display:none so the layout below it doesn't jump when
it appears. */
.study-confidence-row {
display: flex;
align-items: center;
gap: 0.6rem;
padding: 0.5rem 1.25rem;
/* Reduced from 0.65rem to save vertical space */
flex-shrink: 0;
flex-wrap: wrap;
/* flex-wrap: wrap = buttons wrap on tiny screens */
transition: opacity 0.25s ease;
}
.study-confidence-row--hidden {
opacity: 0;
pointer-events: none;
}
.study-confidence-row__label {
font-size: 0.8rem;
color: var(--color-text-secondary);
white-space: nowrap;
}
.study-confidence-row__buttons {
display: flex;
gap: 0.4rem;
}
/* Confidence buttons 1-5 — neutral outlined circles by
default (not solid-filled) so five of them together
don't read as five equally-weighted primary buttons. */
.study-confidence-row .confidence-btn {
width: 2.2rem;
/* Reduced from 2.4rem to save horizontal space */
height: 2.2rem;
border-radius: 50%;
/* 50% = perfect circle shape */
border: var(--border-width) solid var(--color-border);
background: var(--color-card-bg);
color: var(--color-text-primary);
font-size: 0.85rem;
font-weight: 700;
cursor: pointer;
transition: background 0.2s ease,
color 0.2s ease,
transform 0.1s ease;
}
.study-confidence-row .confidence-btn:hover {
background: var(--ios-tertiarySystemFill);
transform: scale(1.1);
}
/* Active — highlights the saved score */
.study-confidence-row .confidence-btn--active {
background: var(--color-accent-amber);
color: var(--color-button-text);
border-color: var(--color-accent-amber);
}
/* ── NAVIGATION ROW ───────────────────────────────────────
Previous ◀ and Next ▶ buttons.
flex-shrink: 0 = NEVER collapses or disappears.
This is the row that was being hidden — the fix is
removing overflow: hidden from #study-mode-screen
and capping the card height with max-height on
.study-card-flip-container above. */
.study-nav-row {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0.5rem 1.25rem 0.75rem;
/* padding-bottom: 0.75rem = breathing room above
the bottom nav bar */
flex-shrink: 0;
/* flex-shrink: 0 = CRITICAL — this row must never
be compressed or hidden by the flex layout */
}
.btn--nav {
background: var(--color-button-bg);
border: none;
border-radius: var(--border-radius);
padding: 0.55rem 1.1rem;
/* Slightly reduced from 0.6rem / 1.25rem */
font-size: 0.95rem;
color: var(--color-button-text);
cursor: pointer;
transition: background 0.2s ease,
color 0.2s ease,
transform 0.1s ease;
}
.btn--nav:hover {
background: var(--color-button-hover);
color: var(--color-button-text);
transform: translateY(-2px);
/* translateY(-2px) = button lifts 2px on hover */
}
.btn--nav:active {
transform: translateY(0px);
}
/* ── EMPTY DECK MESSAGE ───────────────────────────────────
Shown when a deck has no cards yet. */
.study-empty {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
flex: 1;
gap: 1.5rem;
color: var(--color-text-secondary);
font-size: 1.1rem;
text-align: center;
padding: 2rem;
}
/* "+" button prompting the user to add the deck's first
card — floats above the message at a fixed screen
position, same pattern (and exact placement) as Home's
"+" FAB (styles/home.css .home-fab) and Deck View's
(styles/deck.css .deck-view-fab), rather than sitting
inline in the centered message column. */
.study-empty__fab {
position: fixed;
left: 50%;
bottom: calc(var(--bottom-nav-height) + var(--safe-area-bottom) + 16px);
transform: translateX(-50%);
width: 64px;
height: 64px;
display: flex;
align-items: center;
justify-content: center;
border: none;
border-radius: 50%;
background-color: var(--color-button-bg);
color: var(--color-button-text);
box-shadow: var(--shadow-elevation-2);
cursor: pointer;
z-index: 150;
/* Between the header (100) and bottom nav (200) — same
layer the other FABs use. */
transition: background-color 0.15s ease,
transform 0.15s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.study-empty__fab:hover {
background-color: var(--color-button-hover);
}
.study-empty__fab:active {
transform: translateX(-50%) scale(0.92);
}
/* ── SESSION COMPLETE SCREEN ──────────────────────────────
Shown instead of looping back to card 1 once the user
hits Next on the last card of a session — see
renderSessionCompleteScreen() in study-mode.js. Lives
inside the same #study-mode-screen wrapper (see that
function's markup comment), so no container-level rules
are needed here — just this content's own layout. */
.study-complete {
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
flex: 1;
min-height: 0;
/* min-height: 0 = without this, a flex item defaults to a
content-based minimum height and refuses to shrink below
it — the same fix #screen-container itself already needs
(see main.css) for flex: 1 to actually work. */
gap: 10px;
padding: 2rem 1.5rem;
/* #screen-container's own padding-bottom is zeroed out
for the whole Study Mode screen (see the :has() override
at the top of this file — study mode reserves bottom-nav
clearance itself instead), unlike every other screen
which gets that clearance automatically. Without this,
the buttons' margin-top: auto push landed them flush
against the literal bottom of the viewport, underneath
the fixed bottom nav bar instead of above it. */
padding-bottom: calc(var(--bottom-nav-height) + var(--safe-area-bottom) + 16px);
text-align: center;
box-sizing: border-box;
}
.study-complete__emoji {
font-size: 56px;
line-height: 1;
margin-bottom: 6px;
}
.study-complete__title {
font-size: var(--font-size-title2);
font-weight: 700;
color: var(--color-text-primary);
}
.study-complete__subtitle {
font-size: var(--font-size-body);
color: var(--color-text-secondary);
max-width: 280px;
line-height: 1.5;
margin-bottom: 8px;
}
.study-complete-scores__label {
font-size: var(--font-size-footnote);
font-weight: 600;
color: var(--color-text-secondary);
text-transform: uppercase;
letter-spacing: 0.03em;
margin-top: 8px;
}
/* The 5-level confidence readout — same color language as
the interactive .study-confidence-btn circles elsewhere
in Study Mode (deck.css), just larger and non-interactive
(a plain , not a