/* ============================================================
   SCREEN: HOME  (#screen-home)
   The books-first, resume-focused landing — the "continue reading" home.
   Everything here is an ELEVATION of the already-styled elements that were
   reparented into #screen-home: the enrapt wordmark (.screen-head), and
   #librarySection's recently-read list (.library of .lib-card items).
   Anti-store-wall: warm, personal, calm hierarchy, tactile resume cards.
   Mobile-first (390px). Every rule is scoped under #screen-home.
   Tokens only — no new palette, no new fonts; red reserved for errors.
   ============================================================ */

/* ---- Screen rhythm: a touch more breathing room than the shell default,
        so the home reads as calm and unhurried rather than a dense list. ---- */
#screen-home > .screen-inner {
  gap: 20px;
}

/* ---- The enrapt wordmark header — give the brand presence and a soft
        atmospheric glow so the landing feels like an entrance, not a toolbar.
        The .logotype keeps its solid-white face (set in foundation.css); we
        only scale + space it and add a calm sub-line beneath. ---- */
#screen-home .screen-head {
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 8px 2px 4px;
  position: relative;
}
/* Running-version stamp, top-right of Home. Debug/staleness aid: it's the
   version baked into the loaded bundle, so a stale device shows an old number.
   Deliberately quiet (muted, tabular) so it never competes with the wordmark. */
#screen-home .app-version {
  position: absolute;
  top: 6px;
  right: 2px;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  color: var(--muted);
  opacity: 0.6;
  /* Selectable AND tap-to-copy (compose.js): the badge exists so the running
     version can be reported; an uncopyable badge defeated its own purpose. */
  pointer-events: auto;
  user-select: text;
  cursor: pointer;
}
#screen-home .app-version:hover { opacity: 1; }
#screen-home .screen-head h2.logotype {
  /* Override the inline 30px to give the brand more confidence at the top. */
  font-size: 34px !important;
  line-height: 1.04;
  letter-spacing: 0;
  /* A whisper of accent glow behind the wordmark — premium, not loud. */
  text-shadow: 0 0 38px rgba(235, 165, 61, 0.18);
}
/* ============================================================
   TODAY STRIP  (.home-today)
   A slim, quiet, single line — NOT a card. A small amber dot, a muted
   "Today" label, a tabular amber number, then a soft "words" unit.
   Calm at every value: "0 words" is a gentle prompt, never a red warning.
   Structure (home.js):
     .home-today > .home-today-dot + .home-today-label + .home-today-value
                 + .home-today-unit
   ============================================================ */
#screen-home .home-today {
  display: flex;
  align-items: baseline;
  gap: 7px;
  margin: -2px 2px 2px;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
/* The dot: a small candle-lit bead with a soft amber halo. Aligned to the
   text baseline-ish via a nudge so it reads as a tidy bullet, not a button. */
#screen-home .home-today-dot {
  flex: 0 0 auto;
  align-self: center;
  width: 7px;
  height: 7px;
  border-radius: var(--radius-pill);
  background: var(--accent-2);
  box-shadow: 0 0 0 3px var(--accent-2-soft);
}
#screen-home .home-today-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--faint);
}
#screen-home .home-today-value {
  font-size: 14px;
  font-weight: 750;
  letter-spacing: 0.01em;
  color: var(--accent-2-strong);
}
#screen-home .home-today-unit {
  font-size: 12px;
  font-weight: 500;
  color: var(--muted);
}

/* ============================================================
   CONTINUE-READING HERO  (#home-hero)
   The star of the screen. One tappable surface (role=button) that reads as
   a single premium card with a clear title hierarchy, author, a confident
   amber progress fill, and a real Resume action. Composes .ds-card
   .ds-card-hero .ds-tappable (which already give it elevation, the glass
   top-line, lift-on-hover, press-down, and a focus ring) — we add only the
   screen-specific layout + literary type + the inline CTA treatment.
   Structure (home.js):
     #home-hero > .home-hero-top(.ds-eyebrow + .ds-chip)
                + .home-hero-title + .home-hero-author?
                + .home-hero-track.ds-track > .fill
                + .home-hero-foot(.home-hero-meta + .home-hero-cta.ds-btn-primary)
   ============================================================ */
#screen-home .home-hero {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 20px 18px 18px;
  /* A faint gold glow in the top corner so the hero has atmosphere/depth (per
     DESIGN.md) rather than reading as a flat panel. Layered over --grad-card. */
  background:
    radial-gradient(130% 95% at 0% 0%, color-mix(in srgb, var(--accent-2) 13%, transparent), transparent 58%),
    var(--grad-card);
}
/* Top row: the "Continue reading" eyebrow on the left, format chip on the
   right. They sit on one baseline so the card opens with a calm header. */
#screen-home .home-hero-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
#screen-home .home-hero-top .ds-chip {
  flex: 0 0 auto;
  padding: 3px 9px;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
}
/* The book TITLE — literary serif, the largest thing on the home screen.
   Clamps to two lines so long titles stay tidy without truncating mid-word. */
#screen-home .home-hero-title {
  font-family: "Literata", Georgia, "Times New Roman", serif;
  font-size: 29px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.022em;
  color: var(--text);
  margin-top: 4px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
#screen-home .home-hero-author {
  margin-top: -6px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* The progress track: a touch taller than the global 10px so the amber fill
   reads as the confident "you're here" anchor of the card. */
#screen-home .home-hero-track {
  height: 8px;
  margin-top: 2px;
}
/* Foot: progress/meta on the left, the Resume CTA on the right — one row,
   bottom-aligned, so the eye lands on the action. */
#screen-home .home-hero-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: 2px;
}
#screen-home .home-hero-meta {
  flex: 1;
  min-width: 0;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--faint);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* The Resume CTA. It reuses .ds-btn-primary's amber fill + on-accent text,
   but is an inline pill — NOT the full-width button. We override width and
   tighten the padding so it sits as the card's one clear action. Because the
   WHOLE card is the tap target, the CTA shares the card's press: it stays
   visually a button but doesn't fight the surface as a nested control. */
#screen-home .home-hero-cta {
  flex: 0 0 auto;
  width: auto;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 10px 16px;
  border-radius: var(--radius-pill);
  font-size: 13.5px;
  font-weight: 700;
  /* Slightly softer shadow than a standalone primary so it nests calmly
     inside the already-elevated hero rather than floating off it. */
  box-shadow: 0 5px 16px rgba(235, 165, 61, 0.28);
}
#screen-home .home-hero-cta-icon {
  display: inline-flex;
  align-items: center;
  transition: transform var(--spring);
}
#screen-home .home-hero-cta-icon svg {
  width: 16px;
  height: 16px;
}
/* The card is the button: on hover/focus of the whole surface, brighten the
   fill and nudge the chevron — the action animates WITH the card, reinforcing
   "one tappable surface, one primary action". */
#screen-home .home-hero:hover .home-hero-cta,
#screen-home .home-hero:focus-visible .home-hero-cta {
  filter: brightness(1.06);
  box-shadow: 0 7px 22px rgba(235, 165, 61, 0.40);
}
#screen-home .home-hero:hover .home-hero-cta-icon {
  transform: translateX(2px);
}
/* On press, the CTA settles flush with the yielding card (no double-press). */
#screen-home .home-hero:active .home-hero-cta {
  box-shadow: 0 4px 12px rgba(235, 165, 61, 0.26);
}

/* ============================================================
   EMPTY STATE  (#home-empty)
   .ds-empty does the heavy lifting in components.css (icon tile, centred
   column, type). Here we only guarantee it breathes correctly on the home
   screen and the CTA sits as a calm, auto-width pill.
   ============================================================ */
#screen-home .ds-empty {
  margin-top: 6px;
  padding-block: var(--s7) var(--s6, 32px);
}
#screen-home .ds-empty .ds-empty-title {
  font-size: 18px;
}
#screen-home .home-empty-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-pill);
}

/* ---- The recently-read region ---- */
#screen-home #librarySection {
  display: block;
}

/* The "Recently read (click to resume):" label, rendered as a .hint.
   Promote it from body copy into a calm section eyebrow. */
#screen-home #librarySection > .hint {
  margin: 0 2px 14px !important;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.11em;
  color: var(--faint);
}

/* ---- The list: a little more air between cards than the global 8px. ---- */
#screen-home .library {
  gap: 11px;
}

/* ============================================================
   RESUME CARDS  (.lib-card)
   Polished, tappable, layered cards — clear title/author, calm progress.
   Structure (from render/library.js):
     .lib-card > .type-badge + .info(.title[.lib-cloud], .author?, .sub) + .remove
   ============================================================ */
#screen-home .lib-card {
  position: relative;
  align-items: center;
  gap: 13px;
  padding: 15px 15px 15px 16px;
  border-radius: var(--radius);
  border: 1px solid var(--border-soft);
  /* Layered surface: a subtle top-lit gradient reads as a physical card. */
  background:
    linear-gradient(180deg, var(--panel-2), var(--panel));
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  /* Springy, tactile feel matching the shell's --spring motion. */
  transition:
    transform var(--spring),
    border-color var(--tap),
    box-shadow var(--spring),
    background var(--tap);
  -webkit-tap-highlight-color: transparent;
}

/* A slim accent spine on the leading edge — the resume "you were here" cue.
   Dim at rest, it brightens and fills on hover/focus, giving each card a
   confident but calm use of the blue accent. */
#screen-home .lib-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  border-radius: 3px;
  background: linear-gradient(180deg, var(--accent-2-strong), var(--accent-2));
  opacity: 0;
  transform: translateX(-3px);
  transition: opacity var(--tap), transform var(--spring);
}

/* Hover (desktop / fine pointer): lift, deepen the shadow, light the spine. */
#screen-home .lib-card:hover {
  background: linear-gradient(180deg, var(--elevate), var(--panel-2));
  border-color: var(--border);
  box-shadow: var(--shadow-panel);
  transform: translateY(-2px);
}
#screen-home .lib-card:hover::before,
#screen-home .lib-card:focus-visible::before {
  opacity: 1;
  transform: translateX(0);
}

/* Tactile press — the card yields under the finger. */
#screen-home .lib-card:active {
  transform: translateY(0) scale(0.992);
  box-shadow: var(--shadow-sm);
  transition: transform 90ms ease, box-shadow 90ms ease;
}

/* Focus ring (keyboard) — on-brand soft accent halo. */
#screen-home .lib-card:focus-visible {
  outline: none;
  border-color: var(--accent-2);
  box-shadow: 0 0 0 3px var(--accent-2-soft), var(--shadow-sm);
}

/* ---- Type badge: a quiet pill that picks up the accent on card hover. ---- */
#screen-home .lib-card .type-badge {
  align-self: center;
  margin-top: 0;
  padding: 3px 8px;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--faint);
  background: var(--panel);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-pill);
  transition: color var(--tap), background var(--tap), border-color var(--tap);
}
#screen-home .lib-card:hover .type-badge,
#screen-home .lib-card:focus-visible .type-badge {
  color: var(--accent-2-strong);
  background: var(--accent-2-soft);
  border-color: transparent;
}

/* ---- Text block ---- */
#screen-home .lib-card .info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
#screen-home .lib-card .info .title {
  font-size: 15.5px;
  font-weight: 650;
  line-height: 1.25;
  letter-spacing: -0.005em;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 7px;
  /* Keep single-line truncation behaviour from panels.css. */
  white-space: nowrap;
}
#screen-home .lib-card .info .author {
  margin-top: 0;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--muted);
}
/* The progress + meta line. Clear, tabular, calm — the resume anchor. */
#screen-home .lib-card .info .sub {
  margin-top: 4px;
  font-size: 12px;
  font-weight: 500;
  color: var(--faint);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
}

/* The cloud-availability mark sits inline in the title — calm, muted (one
   shared treatment with .cat-cloud / .lib-cloud everywhere). */
#screen-home .lib-card .info .title .lib-cloud {
  display: inline-flex;
  flex: 0 0 auto;
  color: var(--muted);
  opacity: 0.85;
}
#screen-home .lib-card .info .title .lib-cloud svg {
  width: 14px;
  height: 14px;
}

/* ---- Remove button: stays quiet and out of the way; never competes with
        the resume action. Round hit target preserved; red only on its own
        hover (genuine destructive intent). ---- */
#screen-home .lib-card .remove {
  align-self: center;
  color: var(--faint);
  border-radius: var(--radius-pill);
  opacity: 0.7;
  transition: background var(--tap), color var(--tap), opacity var(--tap);
}
#screen-home .lib-card:hover .remove,
#screen-home .lib-card:focus-within .remove {
  opacity: 1;
  color: var(--muted);
}
#screen-home .lib-card .remove:hover {
  background: var(--danger-soft);
  color: var(--accent);
  opacity: 1;
}
#screen-home .lib-card .remove:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--accent-2-soft);
}

/* ---- "Show all / Show fewer" toggle: a calm, full-width ghost pill. ---- */
#screen-home .library-show-all {
  margin-top: 12px;
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 11px 16px;
  font-size: 13px;
  font-weight: 600;
  background: var(--panel);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  color: var(--muted);
  box-shadow: none;
  transition: background var(--tap), color var(--tap), border-color var(--tap), transform var(--tap);
}
#screen-home .library-show-all:hover {
  background: var(--panel-2);
  color: var(--text);
  border-color: var(--border);
  filter: none;
}
#screen-home .library-show-all:active { transform: translateY(1px); }
#screen-home .library-show-all svg { width: 15px; height: 15px; }

/* ---- Staggered spring-in: cards settle in one after another when the home
        mounts, so the landing feels alive without being busy. Honours the
        global prefers-reduced-motion reset in foundation.css. ---- */
@keyframes home-card-rise {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
#screen-home.active .lib-card {
  animation: home-card-rise var(--spring) both;
}
#screen-home.active .lib-card:nth-child(1) { animation-delay: 20ms; }
#screen-home.active .lib-card:nth-child(2) { animation-delay: 60ms; }
#screen-home.active .lib-card:nth-child(3) { animation-delay: 100ms; }
#screen-home.active .lib-card:nth-child(4) { animation-delay: 140ms; }
#screen-home.active .lib-card:nth-child(5) { animation-delay: 180ms; }
#screen-home.active .lib-card:nth-child(n+6) { animation-delay: 220ms; }

/* The legacy recently-read text list is replaced by the cover GRID below; keep it
   hidden on Home regardless of renderLibrary() re-showing it on its ticks. */
#screen-home #librarySection { display: none !important; }

/* ============================================================
   CATALOGUE REDESIGN — generated covers, a horizontal hero, a cover GRID.
   Most sources have no cover art, so each book is a deterministic gradient +
   typeset title (a designed spine). The screen reads as a catalogue of covers,
   not a list of text rows. (cv-* classes are emitted by js/screens/home.js.)
   ============================================================ */

/* ---- A generated cover: rich gradient, glass top edge, progress hairline. ---- */
.cv-art {
  position: relative;
  aspect-ratio: 3 / 4;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45), inset 0 0 0 1px rgba(255, 255, 255, 0.05);
}
.cv-art::before { /* a soft top-left sheen so the cover reads as a physical object */
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(120% 80% at 0% 0%, rgba(255, 255, 255, 0.14), transparent 55%);
  pointer-events: none;
}
.cv-badge {
  position: absolute; top: 8px; left: 8px; z-index: 2;
  padding: 2px 7px; border-radius: var(--radius-pill);
  background: rgba(0, 0, 0, 0.34); backdrop-filter: blur(4px);
  color: rgba(255, 255, 255, 0.86);
  font-size: 8.5px; font-weight: 700; letter-spacing: 0.1em;
}
.cv-scrim {
  position: absolute; inset: 40% 0 0; z-index: 1;
  background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.62));
}
.cv-text { position: absolute; left: 11px; right: 11px; bottom: 12px; z-index: 2; }
.cv-title {
  font-family: "Literata", Georgia, serif;
  font-size: 14.5px; font-weight: 600; line-height: 1.18; color: #fff;
  letter-spacing: -0.005em;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.5);
}
.cv-author {
  margin-top: 3px; font-size: 11px; font-weight: 500;
  color: rgba(255, 255, 255, 0.66);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cv-bar { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; height: 3px; background: rgba(0, 0, 0, 0.35); }
.cv-bar > span { display: block; height: 100%; background: linear-gradient(90deg, var(--progress-dim), var(--progress-light)); }

/* ---- HERO — horizontal: a tall cover on the left, the resume action on the right. ---- */
#screen-home .home-hero {
  flex-direction: row;
  align-items: stretch;
  gap: 16px;
  padding: 16px;
}
#screen-home .home-hero-cover { flex: 0 0 96px; }
#screen-home .home-hero-cover .cv-art { width: 96px; }
#screen-home .home-hero-body {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; justify-content: center; gap: 7px;
}
#screen-home .home-hero-title {
  font-size: 22px; font-weight: 700; line-height: 1.14; margin-top: 0;
  -webkit-line-clamp: 3;
}
#screen-home .home-hero-author { margin-top: -2px; }
/* On a phone the foot stacks: the full meta (min-left · % · words left · time)
   gets its own line and wraps instead of being truncated by the Resume button. */
#screen-home .home-hero-foot {
  margin-top: 6px;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
}
#screen-home .home-hero-meta {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  line-height: 1.45;
}
#screen-home .home-hero-cta { align-self: flex-start; }

/* ---- The catalogue GRID of recently-read covers. ---- */
#screen-home .home-grid-label { display: block; margin: 22px 2px 12px; }
#screen-home .home-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
#screen-home .cv-card {
  display: block; padding: 0; border: none; background: none; cursor: pointer;
  border-radius: 12px;
  transition: transform var(--spring);
  -webkit-tap-highlight-color: transparent;
}
#screen-home .cv-card:hover { transform: translateY(-3px); }
#screen-home .cv-card:active { transform: translateY(0) scale(0.985); }
#screen-home .cv-card:focus-visible { outline: none; box-shadow: var(--focus-ring); }

@media (min-width: 600px) {
  #screen-home .home-grid { grid-template-columns: repeat(4, 1fr); }
  #screen-home .home-hero-cover { flex-basis: 108px; }
  #screen-home .home-hero-cover .cv-art { width: 108px; }
}

#screen-home .home-list { display: flex; flex-direction: column; gap: 9px; }