/* =====================================================
scheduler.css
PURPOSE: Styles for the Study Scheduler screen ONLY.
This includes the schedule-a-session form and the
upcoming-sessions list.
SCOPE: Everything inside #scheduler-screen
DO NOT put styles for other screens in this file.
===================================================== */
#scheduler-screen {
display: flex;
flex-direction: column;
gap: var(--space-5);
/* Overrides animations.css's shared "#screen-container > *"
entrance animation (transform-based translateX + fade) with
an opacity-only version for JUST this screen. Reason: that
shared transform creates a new containing block for any
position:fixed descendant while it's running — and
.scheduler-form is exactly that (see its own comment in
this file). For the ~200ms the entrance animation plays,
the fixed form was rendering relative to THIS element's own
box instead of the real viewport, then visibly snapping
~190px down to its correct position the instant the
animation ended — the "jumps from where it used to be"
bug. Reuses the existing fadeIn keyframe (animations.css)
rather than a new one — same duration/easing as the shared
animation, just without the transform component that
causes the problem. "#screen-container > #scheduler-screen"
(two IDs) rather than a bare "#scheduler-screen" selector is
needed to reliably out-specificity the shared rule
regardless of the two files' order in index.html —
tied specificity would otherwise fall back to source order,
and animations.css loads AFTER this file. */
}
#screen-container > #scheduler-screen {
animation: fadeIn 0.2s cubic-bezier(0.25, 0.1, 0.25, 1);
}
/* --- Schedule-a-session form ────────────────────────────
Floats fixed at the bottom of the screen, ~10px above the
bottom nav bar — same "docked action panel" treatment as
.quiz-deck-select__start (game-modes.css), including the
same left:50%/translateX centering and bottom offset built
from --bottom-nav-height + --safe-area-bottom rather than a
guessed flat number, so it stays correctly clear of the nav
bar on notched devices too. Not width-capped the way that
single BUTTON is (max-width:400px there) — this is a whole
multi-field card, so it keeps the same calc(100% - 32px)
width (matching #screen-container's own 16px side padding)
as everything else on this screen, rather than looking
narrower once it's pulled out of the normal flow.
Since this removes the form from #scheduler-screen's normal
document flow, #scheduler-form-spacer (scheduler.js) reserves
matching space in the SCROLLABLE content so the Upcoming
Sessions list's last row doesn't end up hidden behind it —
sized by actually measuring the form's real rendered height
(ResizeObserver in scheduler.js) rather than a flat guess,
the same lesson .quiz-deck-select-content-spacer's own
comment (game-modes.css) already learned the hard way: a
guessed height silently drifts out of sync with the real
element and starts swallowing taps on whatever's behind it. */
.scheduler-form {
position: fixed;
left: 50%;
transform: translateX(-50%);
bottom: calc(var(--bottom-nav-height) + var(--safe-area-bottom) + 10px);
width: calc(100% - 32px);
z-index: 150;
display: flex;
flex-direction: column;
gap: var(--space-4);
padding: var(--space-4);
background-color: var(--color-card-bg);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-elevation-2);
}
/* Label sits IN FRONT of its own control on one line —
"Deck [dropdown]", "Date [date picker]", "Time [time
picker]" — rather than stacked above it. Each field is its
own full-width row (Date and Time each get their own row
rather than sharing one side by side): a shared row was
tried once before in this file and specifically caused
native date/time inputs to overlap on narrow phone screens
(see the old min-width:0 comment this replaced) — adding
inline labels on TOP of a side-by-side split would only
make that worse, not better, so each field keeping the
FULL row width is the safer choice given this app's mobile-
first sizing. Three single-line rows instead of three
stacked label-then-control pairs is what actually makes the
form shorter overall. */
.scheduler-form__row {
display: flex;
align-items: center;
gap: 12px;
}
.scheduler-form__label {
flex-shrink: 0;
width: 50px;
/* Fixed (not content-sized) so "Deck"/"Date"/"Time" all
line up and every row's control starts at the same x
position regardless of which word is shortest. */
font-size: var(--font-size-footnote);
color: var(--color-text-secondary);
font-weight: 600;
}
.scheduler-form__select,
.scheduler-form__input {
flex: 1;
min-width: 0;
/* min-width: 0 — without this, a flex item defaults to a
content-based minimum width; native date/time inputs have
their own intrinsic min-width that could otherwise refuse
to shrink below on a narrow phone screen. */
min-height: 44px;
/* min-height fixes a mobile-only quirk: an EMPTY
type="time" input (it starts blank — unlike the date
input, which defaults to today's date) has no shadow-
DOM content to size itself against once appearance is
stripped below, so it renders squashed down to just
the padding until tapped/focused, then visibly grows.
A fixed min-height keeps it full-size from the start,
whether or not it has a value yet. */
padding: 10px 12px;
background-color: var(--ios-tertiarySystemFill);
border: none;
border-radius: var(--border-radius);
color: var(--color-text-primary);
font-size: var(--font-size-body);
font-family: var(--font-primary);
text-align: center;
box-sizing: border-box;
/* Mobile browsers draw their own native background/box
behind date and time inputs by default — border: none
and background-color above don't fully replace it, so
the OS's own control chrome was showing through as an
offset "ghost" box behind our styled one. This removes
that native chrome entirely so only our box renders. */
appearance: none;
-webkit-appearance: none;
}
/* The Deck