/* =====================================================
   home.css
   PURPOSE: Styles for the Home screen ONLY.
   This includes the deck list and deck cards.

   SCOPE: Everything inside #home-screen
   DO NOT put styles for other screens in this file.
   ===================================================== */

#home-screen {
  display:        flex;
  flex-direction: column;
  gap:            16px;
}

/* Overrides animations.css's shared "#screen-container > *"
   entrance animation (transform-based translateX + fade) with
   an opacity-only version for JUST this screen, reusing the
   existing fadeIn keyframe — same fix, same reasoning as
   scheduler.css's identical override (see its own longer
   comment): that shared transform creates a new containing
   block for any position:fixed descendant while it's running,
   and .home-fab is exactly that, so it would otherwise render
   in the wrong spot for ~200ms on every visit to Home before
   snapping to its real position. Two IDs (not a bare
   "#home-screen" selector) to reliably out-specificity the
   shared rule regardless of the two files' <link> order in
   index.html. */
#screen-container > #home-screen {
  animation: fadeIn 0.2s cubic-bezier(0.25, 0.1, 0.25, 1);
}

/* --- Upcoming Session card ─────────────────────────────
   Shown above "My Decks" ONLY when a study session is
   scheduled (js/screens/home.js renderScheduleCardHTML()).
   Blue gradient card with soft decorative circles,
   matching the style of the reference design's card —
   content-wise it shows the scheduled deck + time rather
   than a daily-progress stat, since that's what the
   Study Scheduler feature actually tracks. */
.schedule-card {
  position:      relative;
  overflow:      hidden;
  padding:       14px 16px;
  border-radius: var(--radius-lg);
  /* The whole card is a tap target now — expands/collapses the
     queue column (see attachScheduleCardEvents() in home.js) —
     not just the "Start Studying" button or the old "+N more"
     row, so the pointer cursor applies everywhere on it too. */
  cursor:        pointer;
  /* systemGreen → systemMint — matches the app's accent color
     (theme.css rebranded from blue to green) and the same
     green+mint pairing already used for this app's confetti
     bursts (study-mode.js/card-editor.js/game-modes.js) —
     tokens, not hardcoded hex, so this stays in sync with the
     theme automatically. */
  background:    linear-gradient(135deg,
                   var(--ios-systemGreen),
                   color-mix(in srgb, var(--ios-systemGreen) 70%, var(--ios-systemMint) 30%));
  color:         #fff;
  display:       flex;
  flex-direction: column;
  gap:           4px;
  box-shadow:    var(--shadow-elevation-2);
}

/* Soft decorative circles, purely visual */
.schedule-card::before,
.schedule-card::after {
  content:          '';
  position:         absolute;
  border-radius:    50%;
  background-color: rgba(255, 255, 255, 0.08);
  pointer-events:   none;
}

.schedule-card::before {
  width:  140px;
  height: 140px;
  top:    -50px;
  right:  -40px;
}

.schedule-card::after {
  width:  90px;
  height: 90px;
  bottom: -30px;
  right:  60px;
}

/* Row holding the primary session's info + Start Studying
   button on the left and (when there's more than one
   session scheduled) the queue preview on the right.
   align-items: stretch (the default, stated explicitly
   here) makes BOTH columns match the row's height — i.e.
   whichever column is naturally taller (usually the queue
   list once there are a few sessions). Combined with
   justify-content: space-between on .schedule-card__main
   below, that's what pushes the button down to the
   bottom of the row instead of leaving empty space under
   it when the queue column is taller. */
.schedule-card__header {
  display:         flex;
  align-items:     stretch;
  justify-content: space-between;
  gap:             12px;
}

.schedule-card__main {
  display:         flex;
  flex-direction:  column;
  justify-content: space-between;
  align-items:     flex-start;
  gap:             10px;
  min-width:       0;
}

.schedule-card__main-text {
  display:        flex;
  flex-direction: column;
  gap:            3px;
  min-width:      0;
}

.schedule-card__label {
  font-size:      var(--font-size-caption);
  font-weight:    700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color:          rgba(255, 255, 255, 0.75);
}

.schedule-card__deck {
  font-size:     var(--font-size-title3);
  font-weight:   700;
  color:         #fff;
  overflow:      hidden;
  text-overflow: ellipsis;
  white-space:   nowrap;
}

.schedule-card__time {
  display:     flex;
  align-items: center;
  gap:         6px;
  font-size:   var(--font-size-footnote);
  color:       rgba(255, 255, 255, 0.9);
}

/* --- Compact "what's next" queue column (top-right) ────
   Shows the queued sessions directly — no tap needed —
   unless there are more than SCHEDULE_QUEUE_PREVIEW_LIMIT
   (home.js), in which case it caps there and adds a
   "+N more" row. Only rendered when there IS a queue (2+
   sessions scheduled). Narrower and smaller than the
   primary session's own text since it shares the header
   row with it. */
.schedule-queue {
  display:         flex;
  flex-direction:  column;
  flex-shrink:     0;
  width:           128px;
  position:        relative;
  z-index:         1;
  /* Sits above the decorative ::before/::after circles,
     which would otherwise visually compete with it in
     the same top-right corner. */
}

.schedule-queue__list {
  display:        flex;
  flex-direction: column;
  width:          100%;
}

.schedule-queue__row {
  display: flex;
  gap:     8px;
}

/* Holds the node + the line down to the next row.
   Stretches to match .schedule-queue__info's height (its
   sibling) automatically since flex items default to
   align-items: stretch — that's what lets the line's
   flex: 1 fill exactly the right amount of space with no
   pixel math. */
.schedule-queue__node-col {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  width:          12px;
  flex-shrink:    0;
}

.schedule-queue__node {
  width:            6px;
  height:           6px;
  border-radius:    50%;
  background-color: #fff;
  flex-shrink:      0;
  margin-top:       5px;
  /* Optically aligns the node with the deck name's
     first line of text next to it. */
}

.schedule-queue__line {
  width:            1.5px;
  flex:             1;
  min-height:       10px;
  margin:           2px 0;
  background-color: rgba(255, 255, 255, 0.35);
}

.schedule-queue__info {
  flex:           1;
  min-width:      0;
  display:        flex;
  flex-direction: column;
  padding-bottom: 8px;
  /* Row spacing lives here (not as a gap on
     .schedule-queue__list) so .schedule-queue__line above
     can rely on stretching to fill "this row's full
     height" via flex, rather than needing to know about
     spacing that lives outside the row. */
}

.schedule-queue__deck {
  font-size:     var(--font-size-caption);
  font-weight:   600;
  color:         #fff;
  overflow:      hidden;
  text-overflow: ellipsis;
  white-space:   nowrap;
}

.schedule-queue__time {
  font-size: 10px;
  color:     rgba(255, 255, 255, 0.75);
}

.schedule-queue__more {
  /* A plain <span> now, not a <button> — the whole card is one
     tap target (see attachScheduleCardEvents() in home.js), so
     this is just a label reflecting that state, not its own
     control. display: block since a span is inline by default
     and this still needs the full row width to left-align
     against. */
  display:     block;
  padding:     2px 0 2px 20px;
  /* 20px = the node-col width (12px) + its row gap (8px),
     so this lines up under the deck names above it rather
     than under their circles, visually continuing the list
     as its own final "row" instead of floating separately. */
  font-size:   var(--font-size-caption);
  font-weight: 700;
  color:       rgba(255, 255, 255, 0.85);
  cursor:      pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.schedule-queue__more:hover {
  color: #fff;
}

/* --- Missed session state ──────────────────────────────
   Applied when a scheduled session's time has already
   passed but it's still not marked complete — see
   isSessionMissed() in home.js. Deliberately NOT hidden:
   schedule-manager.js's own comment on getUpcomingSessions()
   explains why (no real push notifications yet, so a
   reminder that vanished the moment its time passed could go
   completely unseen) — this just makes clear WHY it's still
   here instead of reading as a stuck/broken card. A ring
   around the whole card for the primary session, plus a
   solid warm pill around the time text (both primary and
   queue rows) rather than only a text-color change, so it
   doesn't rely on color alone against the green gradient. */
.schedule-card--missed {
  box-shadow: var(--shadow-elevation-2), 0 0 0 2px var(--ios-systemOrange);
}

.schedule-card__time--missed,
.schedule-queue__time--missed {
  color:         #fff;
  font-weight:   700;
  background:    color-mix(in srgb, var(--ios-systemOrange) 55%, transparent);
  border-radius: 999px;
  width:         fit-content;
}

.schedule-card__time--missed {
  padding: 2px 8px;
}

.schedule-queue__time--missed {
  padding: 1px 6px;
}

.schedule-queue__row--missed .schedule-queue__node {
  background-color: var(--ios-systemOrange);
}

.schedule-card__btn {
  display:          inline-flex;
  align-items:      center;
  justify-content:  center;
  gap:              8px;
  align-self:       flex-start;
  /* align-self: flex-start = don't stretch to the full
     width of .schedule-card__main (its parent), even
     though that column itself stretches to match the
     queue's height — width and height stretching are
     independent per axis. */
  padding:          10px 20px;
  border:           none;
  border-radius:    999px;
  background-color: rgba(255, 255, 255, 0.22);
  color:            #fff;
  font-size:        var(--font-size-body);
  font-weight:      600;
  font-family:      var(--font-primary);
  cursor:           pointer;
  transition:        background-color 0.15s ease, transform 0.1s ease;
}

.schedule-card__btn:hover {
  background-color: rgba(255, 255, 255, 0.32);
}

.schedule-card__btn:active {
  transform: scale(0.96);
}

/* --- Floating "+" button ────────────────────────────────
   Hovers above the deck list at a fixed screen position
   (position: fixed, so it stays put while the list scrolls
   underneath/behind it) instead of living in the bottom
   nav bar. Solid/opaque on purpose — unlike the header and
   nav bars, this floats directly on top of scrolling
   content and needs to read clearly against it, not blur
   translucently like they do.
   Only ever rendered on Home — see attachHomeFab() in
   home.js. */
.home-fab {
  position:         fixed;
  left:             50%;
  bottom:           calc(var(--bottom-nav-height) + var(--safe-area-bottom) + 16px);
  transform:        translateX(-50%) scale(1);
  width:            64px;
  /* 64px = 56px + 15% */
  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) — it
     visually sits between those two bars (with clearance
     from both), so this just keeps it in that same
     conceptual layer. */
  transition:        transform   0.45s cubic-bezier(0.4, 0, 0.2, 1),
                     box-shadow  0.3s ease,
                     background-color 0.15s ease;
  /* Slower and eased smoothly in both directions (no
     bounce/overshoot) instead of the quicker springy
     curve this started with — covers both the scroll-
     triggered shrink/grow and the hover/press states,
     since they all animate through this one transition. */
}

.home-fab:hover {
  background-color: var(--color-button-hover);
}

.home-fab:active {
  transform: translateX(-50%) scale(0.92);
}

/* Applied while actively scrolling down (see home.js) —
   shrinks the button so it takes up less room while
   browsing a long deck list, growing back the instant the
   user scrolls back up. */
.home-fab--shrunk {
  transform:  translateX(-50%) scale(0.7);
  box-shadow: var(--shadow-elevation-1);
}

/* --- Deck List Container ---
   The scrollable list of deck cards */
#deck-list {
  display:        flex;
  flex-direction: column;
  gap:            12px;
}

/* Stand-in for a card mid-drag (see attachDeckReorderEvents()
   in home.js) — reserves the gap the real card would
   otherwise leave behind once it switches to position: fixed
   to float under the pointer. Sized to match via inline
   style (its height is set in JS to the dragged card's own
   height), so the rest of the list doesn't jump. */
.deck-card-placeholder {
  border-radius:    var(--border-radius-card);
  background-color: var(--tint-accent-soft);
  border:           2px dashed var(--color-accent-amber);
  box-sizing:       border-box;
}

/* --- "My Decks" section header row --- */
.section-header {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
}

.section-header .section-title {
  margin-bottom: 0;
  /* .section-title's own margin-bottom (main.css) is
     meant for a standalone heading — here it's a flex
     item next to the search button, and #home-screen's
     own gap already spaces this row from the next one,
     so the extra margin would just misalign it against
     the button vertically. */
}

/* Search icon next to "My Decks" — toggles .deck-search
   below open/closed. See attachDeckSearchEvents() in
   home.js. */
.deck-search-toggle {
  display:          flex;
  align-items:      center;
  justify-content:  center;
  flex-shrink:      0;
  width:            32px;
  height:           32px;
  border:           none;
  border-radius:    50%;
  background-color: var(--ios-tertiarySystemFill);
  color:            var(--color-accent-amber);
  cursor:           pointer;
  transition:        background-color 0.15s ease, transform 0.1s ease;
}

.deck-search-toggle:hover {
  background-color: var(--ios-secondarySystemFill);
}

.deck-search-toggle:active {
  transform: scale(0.92);
}

/* --- Deck search field ─────────────────────────────────
   Same pill pattern as the symbol palette's search bar
   (styles/palette.css) — icon, input, and a clear button
   all in one rounded field, for visual consistency.    */
.deck-search {
  display:          flex;
  align-items:      center;
  gap:              6px;
  padding:          7px 10px;
  background-color: var(--ios-tertiarySystemFill);
  border-radius:    999px;
}

.deck-search__icon {
  display:     flex;
  flex-shrink: 0;
  color:       var(--color-text-secondary);
}

.deck-search__input {
  flex:        1;
  min-width:   0;
  background:  transparent;
  border:      none;
  color:       var(--color-text-primary);
  font-size:   var(--font-size-footnote);
  font-family: var(--font-primary);
  outline:     none;
}

.deck-search__input::placeholder {
  color: var(--color-text-secondary);
}

.deck-search__clear {
  display:          flex;
  align-items:      center;
  justify-content:  center;
  flex-shrink:      0;
  width:            18px;
  height:           18px;
  padding:          0;
  border:           none;
  border-radius:    50%;
  background-color: var(--ios-systemGray3);
  color:            #fff;
  cursor:           pointer;
}

/* =====================================================
   DECK CARD
   The whole card is one big tap target that plays the
   deck (opens Study Mode) — see home.js attachDeckEvents().
   The only other interactive part is .deck-card__chevron,
   which opens Deck View instead.

   Each card gets a vivid two-stop gradient (assigned by
   list position via one of the .deck-card--* modifier
   classes below) instead of the neutral card background
   used everywhere else in the app — a deliberate one-off
   exception, so white text/icons are hardcoded here
   rather than pulled from the label color tokens.
   ===================================================== */

.deck-card {
  position:         relative;
  display:          flex;
  align-items:      center;
  gap:              14px;
  padding:          16px;
  border:           none;
  border-radius:    var(--border-radius-card);
  color:            #fff;
  cursor:           pointer;
  overflow:         hidden;
  box-shadow:        var(--shadow-elevation-1);
  transition:        box-shadow 0.2s ease,
                     transform  0.15s cubic-bezier(0.34, 1.56, 0.64, 1);
  -webkit-tap-highlight-color: transparent;
}

.deck-card:hover {
  box-shadow: var(--shadow-elevation-2);
  transform:  translateY(-2px);
}

.deck-card:active {
  transform: scale(0.98);
}

.deck-card:focus-visible {
  outline:        2px solid rgba(255, 255, 255, 0.9);
  outline-offset: 2px;
}

/* Actively being dragged (see attachDeckReorderEvents() in
   home.js) — lifted shadow reads as "picked up." The scale
   bump + position tracking themselves are set directly by JS
   via "transform: translate() scale()" every pointermove
   (with transition explicitly off — see startDeckDrag()'s own
   comment for why), not declared here, so there's nothing to
   conflict with that per-frame inline value. touch-action:
   none stops the browser's own scroll/zoom gestures from
   fighting with the drag once it's picked up. */
.deck-card--dragging {
  box-shadow:   var(--shadow-elevation-2);
  touch-action: none;
  cursor:       grabbing;
}

/* Soft decorative circle in the corner, matching the
   subtle texture on the reference design's cards. */
.deck-card::after {
  content:          '';
  position:         absolute;
  top:              -24px;
  right:            -24px;
  width:            110px;
  height:           110px;
  border-radius:    50%;
  background-color: rgba(255, 255, 255, 0.08);
  pointer-events:   none;
}

/* --- Color variants ─────────────────────────────────────
   Two-stop gradients built from theme.css's iOS system
   colors (not hardcoded hex) so they stay in sync if the
   palette ever changes. Assigned by list position in
   home.js — stable across re-renders, varied enough to
   read as "random" the way the reference design does.  */
.deck-card--orange {
  background: linear-gradient(135deg,
    var(--ios-systemOrange),
    color-mix(in srgb, var(--ios-systemOrange) 80%, black 20%));
}
.deck-card--green {
  background: linear-gradient(135deg,
    var(--ios-systemGreen),
    color-mix(in srgb, var(--ios-systemGreen) 80%, black 20%));
}
.deck-card--blue {
  background: linear-gradient(135deg,
    var(--ios-systemBlue),
    color-mix(in srgb, var(--ios-systemBlue) 80%, black 20%));
}
.deck-card--purple {
  background: linear-gradient(135deg,
    var(--ios-systemPurple),
    color-mix(in srgb, var(--ios-systemPurple) 80%, black 20%));
}
.deck-card--red {
  background: linear-gradient(135deg,
    var(--ios-systemRed),
    color-mix(in srgb, var(--ios-systemRed) 80%, black 20%));
}
.deck-card--teal {
  background: linear-gradient(135deg,
    var(--ios-systemTeal),
    color-mix(in srgb, var(--ios-systemTeal) 80%, black 20%));
}
.deck-card--indigo {
  background: linear-gradient(135deg,
    var(--ios-systemIndigo),
    color-mix(in srgb, var(--ios-systemIndigo) 80%, black 20%));
}
.deck-card--mint {
  background: linear-gradient(135deg,
    var(--ios-systemMint),
    color-mix(in srgb, var(--ios-systemMint) 80%, black 20%));
}

/* --- Icon avatar (left) --- */
.deck-card__icon {
  display:          flex;
  align-items:      center;
  justify-content:  center;
  width:            48px;
  height:           48px;
  flex-shrink:      0;
  border-radius:    50%;
  background-color: rgba(255, 255, 255, 0.22);
  font-size:        24px;
  line-height:      1;
}

/* --- Progress ring (wraps the icon) ─────────────────────
   Shows how far into the deck the user's last study
   session got — e.g. reaching card 7 of 10 = a 70% ring.
   Set by home.js via the inline custom property
   --progress (a plain 0-100 number, no unit).

   Built from two layers:
     1. This wrapper (56px) — glows/breathes via
        filter: drop-shadow(), which traces the ALREADY-
        MASKED donut shape below rather than a plain box,
        so the glow reads as coming from the ring itself.
     2. Its ::before (also 56px, positioned behind the
        48px icon) — a conic-gradient pie for the percent,
        with the middle masked out via mask/radial-gradient
        to leave only a thin ring visible around the icon.
        A pie-to-ring "mask cutout" is used instead of a
        solid-color inner circle because the card's own
        background is a gradient, not a flat color, so
        there's no single color that would blend in.    */
.deck-card__icon-ring {
  position:        relative;
  width:           56px;
  height:          56px;
  flex-shrink:     0;
  display:         flex;
  align-items:     center;
  justify-content: center;
  animation:       deck-ring-breathe 2.4s ease-in-out infinite;
}

.deck-card__icon-ring::before {
  content:        '';
  position:       absolute;
  inset:          0;
  border-radius:  50%;
  background: conic-gradient(
    #fff calc(var(--progress) * 1%),
    rgba(255, 255, 255, 0.28) 0
  );
  -webkit-mask: radial-gradient(circle, transparent 24px, #000 25px);
  mask:         radial-gradient(circle, transparent 24px, #000 25px);
}

@keyframes deck-ring-breathe {
  0%, 100% {
    filter:  drop-shadow(0 0 2px rgba(255, 255, 255, 0.45));
    opacity: 0.85;
  }
  50% {
    filter:  drop-shadow(0 0 9px rgba(255, 255, 255, 0.95));
    opacity: 1;
  }
}

/* --- Title + count (middle) --- */
.deck-card__body {
  flex:           1;
  min-width:      0;
  /* min-width: 0 = allows the title below to truncate
     with an ellipsis instead of overflowing the card */
  display:        flex;
  flex-direction: column;
  gap:            2px;
}

.deck-card__title {
  font-size:     var(--font-size-headline);
  font-weight:   700;
  color:         #fff;
  white-space:   nowrap;
  overflow:      hidden;
  text-overflow: ellipsis;
}

.deck-card__count {
  font-size: var(--font-size-footnote);
  color:     rgba(255, 255, 255, 0.8);
}

/* --- Confidence dots (no text — just the 5 colors) ────
   One dot (the rounded average score) is shown at full,
   solid strength; the other four stay muted but SOLID —
   lightened toward white rather than made translucent,
   so they stay clearly visible against any card color
   instead of blending into busy gradient backgrounds. */
.deck-card__confidence {
  display:          flex;
  align-items:      center;
  gap:              5px;
  flex-shrink:      0;
  padding:          6px 9px;
  border-radius:    999px;
  background-color: rgba(255, 255, 255, 0.22);
}

.deck-card__confidence-dot {
  width:             8px;
  height:            8px;
  border-radius:     50%;
  /* Muted by default: a solid, opaque, lightened mix of
     the dot's own confidence color — not a transparent
     version of it. --dot-color is set per level below. */
  background-color:  color-mix(in srgb, var(--dot-color) 55%, white 45%);
  transition:         background-color 0.2s ease,
                      transform        0.2s ease,
                      box-shadow       0.2s ease;
}

.deck-card__confidence-dot--1 { --dot-color: var(--color-confidence-1); }
.deck-card__confidence-dot--2 { --dot-color: var(--color-confidence-2); }
.deck-card__confidence-dot--3 { --dot-color: var(--color-confidence-3); }
.deck-card__confidence-dot--4 { --dot-color: var(--color-confidence-4); }
.deck-card__confidence-dot--5 { --dot-color: var(--color-confidence-5); }

.deck-card__confidence-dot.is-active {
  background-color: var(--dot-color);
  /* Full, undiluted confidence color, plus a thin white
     ring and a slight scale-up so it clearly reads as
     "the selected one" against the other four. */
  box-shadow: 0 0 0 1.5px rgba(255, 255, 255, 0.85);
  transform:  scale(1.3);
  /* Soft breathing glow tinted to match the active dot's
     own color — same 2.4s rhythm as the deck progress
     ring below, for a consistent feel. filter is used
     (not box-shadow) so it layers on top of the static
     white ring above instead of fighting with it. */
  animation:  confidence-dot-breathe 2.4s ease-in-out infinite;
}

@keyframes confidence-dot-breathe {
  0%, 100% {
    filter: drop-shadow(0 0 1px var(--dot-color));
  }
  50% {
    filter: drop-shadow(0 0 4px var(--dot-color));
  }
}

/* --- Chevron (right) — opens Deck View ─────────────────
   Bare icon button, no background by default, matching
   the reference design's plain "›" affordance. Shuffle,
   organize, and edit all live inside Deck View now.    */
.deck-card__chevron {
  display:          flex;
  align-items:      center;
  justify-content:  center;
  flex-shrink:      0;
  width:            30px;
  height:           30px;
  border:           none;
  border-radius:    50%;
  background-color: transparent;
  color:            rgba(255, 255, 255, 0.75);
  cursor:           pointer;
  transition:        background-color 0.15s ease, color 0.15s ease;
}

.deck-card__chevron:hover {
  background-color: rgba(255, 255, 255, 0.16);
  color:             #fff;
}

.deck-card__chevron:active {
  background-color: rgba(255, 255, 255, 0.28);
}