/* ============================================================
   css/base.css — the ground floor: colour variables, reset, element defaults, the
   [hidden] safety net, buttons, page titles, empty states.

   The look: AO3-inspired — cream background, deep red, clean and readable.
   Light mode only: every colour is set explicitly (see :root), so a
   browser's dark mode can't recolour the site.

   Load order (header.php → stylesheets.php): base → layout → components
   → pages → responsive. This file is 1 of 5; later files win ties.

   CONTENTS
      1. COLOUR VARIABLES, RESET, ELEMENT DEFAULTS
      2. CARD BOX — .card
      3. BUTTONS
      4. PAGE TITLE
      5. EMPTY-STATE LINE
      6. BUTTON VARIANTS — chip, secondary
      7. BUTTON VARIANTS — outline, small
      8. INLINE NOTE BESIDE A HEADING — .title-note
      9. PAGE SUBTITLE
     10. SMALL EMPTY-STATE LINE
     11. DANGER BUTTON
     12. THE [hidden] SAFETY NET
     13. BACK LINKS
     14. LINK-STYLE BUTTON — .link-button
     15. PAGE TITLE FOLLOWED BY THE ME / EVERYONE TOGGLE
   ============================================================ */

/* ============================================================
   COLOUR VARIABLES, RESET, ELEMENT DEFAULTS
   ============================================================ */

/* --- Colour palette as variables (change once, applies everywhere) ---
   Every colour on the site is one of these. No hex or rgba() appears
   outside this block: to add a colour, add a variable here first. */
:root {
  /* the palette */
  --red:          #990000;   /* main AO3 red — header, titles, buttons */
  --red-dark:     #7a0000;   /* hover on red, dark red text */
  --red-tint:     #fbeaea;   /* pale red fill — errors, warnings, pile chips */
  --pink:         #ffaaaa;   /* light accent on the red header */
  --page:         #f5f0eb;   /* page background (cream) */
  --surface:      #ffffff;   /* cards, inputs, text on red */
  --surface-warm: #f5ece4;   /* chip fill — vibes, tag cloud, chip buttons */
  --hover:        #ede7e1;   /* hover on anything clickable — the page cream, two steps
                                darker. Deliberately NOT a new hue: the border and the red
                                accent already carry meaning, so hover only has to say
                                "this reacts". */
  --border:       #d4c8be;   /* borders, dividers */
  --ink:          #222222;   /* primary text */
  --ink-soft:     #555555;   /* labels, quieter text */
  --grey:         #666666;   /* secondary text — #888 was ~3.5:1 on cream, under the 4.5:1 readable threshold */
  --blue:         #5998d6;   /* default link colour, info panel accent */
  --success:      #2a7a2a;   /* "it worked" text */
  --success-line: #a8ccb4;   /* "it worked" borders */
  --success-tint: #e8f4ec;   /* "it worked" background */
  --warning:      #6b4e00;   /* warning / "hope" text */
  --warning-line: #d4a017;   /* warning borders */
  --warning-tint: #fdf4e2;   /* warning background */

  /* shadows and see-through layers */
  --shadow-sm:    rgba(0,0,0,0.06);       /* resting cards */
  --shadow-md:    rgba(0,0,0,0.12);       /* hovered cards, dropdowns */
  --shadow-lg:    rgba(0,0,0,0.2);        /* popups, modals */
  --overlay:      rgba(0,0,0,0.5);        /* dimmed page behind a modal */
  --lightbox:     rgba(20,12,10,0.88);    /* near-black behind a full-size image */
  --red-glow:     rgba(153,0,0,0.18);     /* shadow under an open pile */
  --success-glow: rgba(42,122,42,0.15);   /* ring around a just-wrangled tag row */
  --white-a18:    rgba(255,255,255,0.18); /* divider lines on the red phone menu */
  --white-a60:    rgba(255,255,255,0.6);  /* hint text on the lightbox */
  --white-a75:    rgba(255,255,255,0.75); /* count inside a hovered red chip */
  --white-a85:    rgba(255,255,255,0.85); /* count inside a selected red chip */
  --white-a92:    rgba(255,255,255,0.92); /* download button over an image */

  /* reading status — these carry meaning; keep them distinct */
  --status-untouched: #e5cfa0;
  --status-reading:   #f0a519;
  --status-finished:  #d97818;
  --status-dropped:   #6e5f48;
  --status-want:      #3a9fd6;
  --status-favorite:  #a83267;

  /* flag icons (corner badges on cards). Favorite and "later" reuse
     --status-favorite and --status-want. */
  --flag-reread:      #6a3da8;
  --flag-downloaded:  #6b7280;
  --flag-mystery:     #16b89a;

  /* other sites' own colours, for the music links */
  --brand-spotify:    #1db954;
  --brand-youtube:    #ff0000;

  /* type scale — every font-size on the site is one of these. Six steps;
     no px font size appears outside this block (except the iOS input guard
     in responsive.css). Phones redefine --fs-title in responsive.css. */
  --fs-xs:    10px;   /* badges, chip meta */
  --fs-sm:    12px;   /* labels, hints, meta lines */
  --fs-ui:    14px;   /* secondary text, links, small buttons, chips */
  --fs-body:  16px;   /* reading text, inputs, buttons */
  --fs-lead:  18px;   /* card titles, modal headings, numbers, names */
  --fs-title: 28px;   /* page and auth titles, the fic title, star rating, hero numbers */

  /* the logo is a brand mark, like the brand colours: its own fixed size,
     NOT a step on the ladder. Phones redefine it in responsive.css. */
  --fs-logo:  24px;

  /* phone scale-down: everything inside the 900px block (type, padding,
     buttons, icons) is drawn at this size via `zoom` on body. Every size in
     this file is hardcoded px, so a root font-size couldn't do it. Tune here. */
  --mobile-scale: 0.88;
}

/* --- Reset + base --- */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: 'Georgia', 'Times New Roman', serif;
  font-size: var(--fs-body);
  background: var(--page);
  color: var(--ink);
  line-height: 1.5;
  min-height: 100vh;
}

a {
  color: var(--blue);
  text-decoration: none;
}

a:hover { text-decoration: underline; }

/* ============================================================
   CARD BOX — .card
   ============================================================ */

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-top: 3px solid var(--red);
  border-radius: 4px;
  padding: 12px 14px;
  box-shadow: 0 1px 3px var(--shadow-sm);
}

.card.status-reading  { border-top-color: var(--status-reading); }

.card.status-finished { border-top-color: var(--status-finished); }

.card.status-want     { border-top-color: var(--status-want); }

.card.status-dropped  { border-top-color: var(--status-dropped); }

/* ============================================================
   BUTTONS
   ============================================================ */

.button {
  display: inline-block;
  background: var(--red);
  color: var(--surface);
  border: none;
  border-radius: 4px;
  padding: 8px 18px;
  font-family: inherit;
  font-size: var(--fs-body);
  font-weight: bold;
  cursor: pointer;
}

.button:hover { background: var(--red-dark); text-decoration: none; }

/* ============================================================
   PAGE TITLE
   ============================================================ */

.page-title {
  font-size: var(--fs-title);
  color: var(--ink);
  margin-bottom: 16px;
}

/* a page title with its "how does it work?" button beside it */
.page-title-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}

.page-title-row .page-title { margin-bottom: 0; }

/* ============================================================
   EMPTY-STATE LINE
   ============================================================ */

.empty-state {
  font-size: var(--fs-body);
  color: var(--grey);
  font-style: italic;
  padding: 16px 0;
}

/* ============================================================
   BUTTON VARIANTS — chip, secondary
   ============================================================ */

/* a quiet button for small inline actions (+1 reread). Solid red is reserved
   for genuine primary actions like "edit entry". */
.button-chip {
  background: var(--surface-warm);
  border: 1px solid var(--border);
  color: var(--red-dark);
  font-size: var(--fs-ui);
  padding: 4px 10px;
  box-shadow: none;
}

.button-chip:hover {
  background: var(--red);
  border-color: var(--red);
  color: var(--surface);
}

.button-secondary {
  background: var(--page);
  color: var(--ink);
  border: 1px solid var(--border);
}

.button-secondary:hover { background: var(--hover); }

/* ============================================================
   BUTTON VARIANTS — outline, small
   ============================================================ */

/* secondary action — outline instead of solid, so the primary one stands out
   rather than two solid reds competing */
.button-outline {
  background: var(--surface);
  color: var(--red);
  border: 1px solid var(--red);
}

.button-outline:hover {
  background: var(--red);
  color: var(--surface);
}

.button-sm {
  font-size: var(--fs-ui);
  padding: 8px 16px;
}

/* ============================================================
   INLINE NOTE BESIDE A HEADING — .title-note
   ============================================================ */

/* small note next to the stalk title */
.title-note {
  font-weight: normal;
  font-size: var(--fs-sm);
  color: var(--grey);
  text-transform: none;
  letter-spacing: 0;
}

/* ============================================================
   PAGE SUBTITLE
   ============================================================ */

.page-subtitle { color: var(--grey); margin: -8px 0 24px; font-size: var(--fs-body); }

/* ============================================================
   SMALL EMPTY-STATE LINE
   ============================================================ */

.empty-state-small { font-size: var(--fs-ui); color: var(--grey); font-style: italic; margin: 0; }

/* ============================================================
   DANGER BUTTON
   ============================================================ */

.button-danger {
  border: 1px solid var(--pink);
  background: var(--red); color: var(--surface); border-color: var(--red);
}

.button-danger:hover { background: var(--red-dark); border-color: var(--red-dark); }

/* ============================================================
   THE [hidden] SAFETY NET
   ============================================================ */

/* Global safety net for the [hidden] HTML attribute.
   Specified `display: flex/grid/etc` overrides browser defaults so
   elements with [hidden] stay visible. !important on a single
   attribute selector keeps things sane without spreading specificity. */
[hidden] { display: none !important; }

/* ============================================================
   BACK LINKS
   ============================================================ */

.back-links {
  margin-top: 20px;
  font-size: var(--fs-ui);
  color: var(--grey);
}

/* ONE .back-link rule on purpose: hover darkens, no underline. A second
   copy elsewhere would quietly win by being later. */
.back-link {
  font-size: var(--fs-ui);
  color: var(--red);
  text-decoration: none;
}

.back-link:hover { text-decoration: underline; }

/* ============================================================
   LINK-STYLE BUTTON — .link-button
   ============================================================ */

/* link-button: text button that looks like a link */
.link-button {
  background: none;
  border: none;
  color: var(--red);
  cursor: pointer;
  text-decoration: underline;
  font-size: var(--fs-ui);
  padding: 0;
  font-family: inherit;
}

.link-button:hover { color: var(--red-dark); }

/* ============================================================
   PAGE TITLE FOLLOWED BY THE ME / EVERYONE TOGGLE
   ============================================================ */

.page-title + .mode-toggle { margin-top: 10px; }