/* ==========================================================================
   Factbox — Library.  Loads AFTER css/app.css and adds only what is new.

   The shelf itself is app.css's: .card, .plate, .grid, .meta, .readbar,
   .resume, .lock, .sechead, .tabs, .is-done / .is-reading are all reused
   unchanged, so a cover looks identical here and on Home. Everything below
   exists because the Library has something Home does not — a stats line, a
   real empty state, a remove control, and a storage-is-dead notice.

   THERE ARE NO COLOUR LITERALS IN THIS FILE, and there must not be. Every
   colour is an app.css token with no fallback. The fifteen
   `var(--token,#old-hex)` fallbacks this file used to carry were written when
   the site was night, and the repaint to paper left every one of them holding
   a near-white or a near-black — so the "safety net" was the only thing that
   could paint this page wrong, and it would have done it silently the first
   time app.css was slow. A missing token is an unstyled line, which is
   visible; a stale fallback is a legible line in the wrong colour, which is
   not. The reader's night values reach these same tokens through
   css/reader-rail.css, and never through a fallback either.
   ========================================================================== */

/* --------------------------------------------------------------------------
   The stats line. Three numbers the site can actually derive, and one line of
   small print saying where the minutes come from — a number a reader cannot
   check is a number they are right to distrust.
   -------------------------------------------------------------------------- */
.statline{
  margin:16px 2px 2px;
  font-size:var(--fs-note); line-height:1.5; font-weight:var(--w-label);
  color:var(--dim);
  font-variant-numeric:tabular-nums;
}
.statline b{
  color:var(--parchment); font-weight:var(--w-head);
}
.statline small{
  display:block; margin-top:6px; max-width:46ch;
  font-size:var(--fs-fine); font-weight:var(--w-body); line-height:1.45;
  color:var(--dimmer);
}

/* --------------------------------------------------------------------------
   The membership line, directly under the stats: "MEMBER · ALL 51 STORIES
   UNLOCKED".

   Small capitals, so it reads as a status stamp rather than as another
   sentence competing with the standfirst two lines above it. --ls-caps is the
   site's tracking for anything set this way and --fs-micro is the size it was
   measured at; a label this tight at body size closes up and stops being
   readable.

   --accent-ink, NOT --coral. This is type. --coral is 2.2:1 on cream and the
   note at the top of app.css calls it a fill, never a colour you write in;
   --accent-ink is that same blue taken down until it clears, and it measures
   5.24:1 on --ground. It is also what .mark and .resume .t span already use,
   so the three accented runs on this page are one colour rather than three.

   tabular-nums for the same reason .statline has it: the count above it and
   the count in this line are the same number set two ways, and lining figures
   keep them from disagreeing optically.
   -------------------------------------------------------------------------- */
.libmember{
  margin:8px 2px 0;
  font-size:var(--fs-micro); font-weight:var(--w-label);
  letter-spacing:var(--ls-caps); text-transform:uppercase;
  color:var(--accent-ink);
  font-variant-numeric:tabular-nums;
}

/* --------------------------------------------------------------------------
   Empty state. A first-time reader has no library, and a blank page reads as
   a broken one — so this says what the shelf is for and hands them the two
   doors out: everything, or the free stories.
   -------------------------------------------------------------------------- */
.empty{
  margin:26px 0 4px; padding:22px 18px;
  border-radius:18px;
  background:var(--raise);
  box-shadow:inset 0 0 0 1px var(--hair);
}
.empty h2{
  margin:0 0 9px; font-size:var(--fs-h3); font-weight:var(--w-head);
  letter-spacing:var(--ls-head); color:var(--parchment);
}
/* There is no `.empty p` rule any more, and that is deliberate. The empty
   state's subtitle was removed — the heading has already said the only thing
   there is to say, and the sentence that sat here explained where reading is
   stored to somebody who had not read anything yet. js/library.js writes no
   paragraph into .empty, so a rule for one is a rule for nothing. */
.emptygo{
  display:flex; flex-direction:column; align-items:center; gap:2px;
  margin-top:18px;
}
/* .go is a <button> everywhere else on the site; here it is a link, so it
   needs the two properties a button gets for free. */
.emptygo .go{ text-decoration:none; text-align:center; font-weight:var(--w-strong); }
.emptygo .ghost{ text-decoration:none; }

/* --------------------------------------------------------------------------
   A saved cover carries a remove control. It cannot sit inside the <a> — a
   button nested in a link is invalid markup and unreliable to tap on iOS — so
   the cell stacks the cover and the control.

   The control is quiet on purpose: undoing a save should be findable, never
   the loudest thing in a grid of covers.
   -------------------------------------------------------------------------- */
.savecell{ display:flex; flex-direction:column; gap:8px; }
.savecell .card{ flex:1 1 auto; }
.unsave{
  align-self:start;
  min-height:var(--tap,44px); padding:0 12px;
  border:0; border-radius:var(--pill,999px);
  background:transparent;
  color:var(--dimmer);
  font-family:var(--ui,system-ui,-apple-system,sans-serif);
  font-size:var(--fs-meta); font-weight:var(--w-strong); cursor:pointer;
  transition:color .16s ease, background-color .16s ease;
}
.unsave:hover,.unsave:active{
  color:var(--parchment);
  background:var(--tint);
}

/* --------------------------------------------------------------------------
   Storage refused everything. The library will be empty on every visit, and
   the reader deserves to know that before they save something into a void.
   -------------------------------------------------------------------------- */
.libnote{
  margin:26px 0 0; padding:14px 16px;
  border-radius:14px;
  background:var(--accent-wash);
  box-shadow:inset 0 0 0 1px var(--accent-edge);
  color:var(--dim);
  font-size:var(--fs-note); line-height:1.5;
}
/* The heading was --butter, which is a FILL colour in both grounds: amber on
   night, light blue on paper, and 1.5:1 as type on a card either way. --teal-ink
   is the second accent taken down to something you may write in — 4.7:1 on the
   page, 5.0:1 on this notice's own wash — so the notice still reads as its own
   kind of message rather than as another blue link. */
.libnote b{
  display:block; margin-bottom:4px;
  color:var(--teal-ink); font-weight:var(--w-head);
}

/* The one thing that shows when the season itself could not be fetched. It is
   copy, not a blank page — that distinction is the whole point. */
.libfail{
  margin:30px 0 0; font-size:var(--fs-sub); line-height:var(--lh-body);
  color:var(--dim);
}

/* The save button (FBS.button) is styled inline in js/saves.js so no
   stylesheet can break it. It only needs room to breathe wherever it lands. */
.fbs-save{ margin:0; }

@media (prefers-reduced-motion:reduce){
  .unsave{ transition:none; }
}