@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,500;0,600;0,700;1,500&display=swap');
/* ==========================================================================
   ALICE — paper theme (Sept 2026 rebrand)
   The cabinet-of-curiosities look: cream "paper" ground, ink text, and the
   four colours of the paper shapes (blue, yellow, pink, paper) plus two
   quieter companions (sage, lilac) so six node types stay distinct.

   How it works: every page keeps its original :root block (the dark neon
   look). This file overrides those same variables whenever the page is NOT
   in dark mode, so dark stays exactly as it was. alice-theme.js sets
   data-theme="paper" | "dark" on <html>.

   SEASONS: the brand heading face. Until the licensed font files are added,
   Cormorant Garamond stands in. When you have them, drop the .woff2 files in
   /fonts and uncomment the @font-face below — nothing else needs changing.
   ========================================================================== */

/*
@font-face {
  font-family: 'Seasons';
  src: url('fonts/Seasons-Regular.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}
*/

:root {
  /* The six brand colours, available in both themes for artwork and shapes */
  --alice-paper: #DDD1BD;
  --alice-blue: #59799E;
  --alice-yellow: #EEAF29;
  --alice-pink: #F0948F;
  --alice-sage: #7E9A6B;
  --alice-lilac: #9582B0;
  --font-wordmark: 'Seasons', 'Cormorant Garamond', 'Cormorant', Georgia, serif;
  --focus-ring: rgba(255, 227, 71, 0.2);
  --root-glow: rgba(255, 227, 71, 0.28);
}

:root:not([data-theme="dark"]) {
  color-scheme: light;

  /* Ground and ink */
  --bg: #E6DBC6;
  --bg-card: #F3ECDF;
  --text: #2A241D;
  --text-muted: #6E6353;
  --node: #FBF7EF;
  --node-border: #CDBFA5;
  --node-border-hover: #A8987A;
  --lead: #7A6D5B;

  /* Node types */
  --root: #E8A620;          /* The White Rabbit / start: yellow */
  --root-ink: #8E6310;      /* yellow is too pale for small text on paper */
  --root-glow: rgba(238, 175, 41, 0.30);
  --root-dark: #2A1F05;
  --why: #E0837C;           /* I learnt that: pink */
  --link: #4F6F94;          /* I found: blue (a shade deeper, so links read) */
  --question: #8A77AA;      /* I wondered: lilac */
  --later: #A86F32;         /* worth coming back to: tea */
  --custom: #5F918C;        /* own words: dusty teal */
  --auto: #9C917F;          /* auto-captured trail: pencil grey */

  /* Fact-check verdicts */
  --confirmed: #6F8F5A;  --confirmed-dark: #FBF7EF;
  --busted: #C8615B;     --busted-dark: #FBF7EF;
  --complicated: #EEAF29; --complicated-dark: #3A2905;

  /* Buttons and highlights */
  --accent: #EEAF29;
  --accent-dark: #2A1F05;
  --accent-ink: #8E6310;   /* yellow as text needs to be deeper on paper */
  --focus-ring: rgba(89, 121, 158, 0.28);
  --start: #59799E;
  --start-dark: #FBF7EF;
  --spark: #8A77AA;
  --spark-border: #CDBFA5;
  /* Text on coloured buttons */
  --on-link: #FBF7EF;
  --on-question: #FBF7EF;
  --on-spark: #FBF7EF;
  --on-busted: #FBF7EF;
  --confirmed-ring: rgba(111, 143, 90, 0.18);

  /* Folder / shelf colours (the extension's older names) */
  --folder-meadow: #7E9A6B;
  --folder-jade: #5F918C;
  --folder-turquoise: #6E9CB8;
  --folder-sky: #59799E;
  --folder-indigo: #9582B0;
  --folder-violet: #F0948F;

  /* Type: headings in Seasons (Cormorant for now), labels keep Space Mono */
  --font-display: var(--font-wordmark);
}

/* ---------- Paper ground ---------- */
/* On <html>, so it covers the whole window however short the page is */
:root:not([data-theme="dark"]) {
  background-color: var(--bg);
  background-image: url('assets/paper.jpg');
  background-size: 900px auto;
  background-repeat: repeat;
  background-attachment: fixed;
}
:root:not([data-theme="dark"]) body { background: transparent; }

/* Headings use the wordmark face */
:root:not([data-theme="dark"]) h1,
:root:not([data-theme="dark"]) h2 {
  font-family: var(--font-wordmark);
  font-weight: 600;
  letter-spacing: 0.01em;
}
/* "A Little Interest, Curiously Explored" wherever it appears */
:root:not([data-theme="dark"]) .alice-wordmark { font-family: var(--font-wordmark); }

/* Shadows are softer and warmer on paper than on black */
:root:not([data-theme="dark"]) .map-card {
  box-shadow: 0 1px 1px rgba(60, 45, 20, 0.10), 0 4px 12px rgba(60, 45, 20, 0.12);
}
:root:not([data-theme="dark"]) .map-card.mc-active {
  box-shadow: 0 2px 6px rgba(60, 45, 20, 0.16), 0 10px 26px rgba(60, 45, 20, 0.18);
}
/* The baked grain was tuned for black; on paper the scan already has grain */
:root:not([data-theme="dark"]) .map-wrap::before { opacity: 0.35; mix-blend-mode: multiply; }

/* ---------- App header (index, sparks, share...) ---------- */
:root:not([data-theme="dark"]) .strap.alice-wordmark { font-size: 17px; font-style: italic; color: var(--text); }
header .alice-theme-toggle { margin-left: auto; align-self: center; }
header .wordmark { white-space: nowrap; }

/* ---------- Hero banner (the collage) ---------- */
.alice-hero-wrap { display: none; }
:root:not([data-theme="dark"]) .alice-hero-wrap {
  display: block;
  position: relative;
  margin: 0 0 16px;
}
.alice-hero {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 12px;
  box-shadow: 0 2px 10px rgba(60, 45, 20, 0.18);
}
.alice-hero-wrap .alice-shape { z-index: 1; }
/* The banner already says "A Little Interest, Curiously Explored" */
:root:not([data-theme="dark"]) .alice-hero-wrap ~ .strap { display: none; }

/* ---------- Theme toggle button ---------- */
.alice-theme-toggle {
  background: var(--node);
  border: 1px solid var(--node-border);
  color: var(--text);
  border-radius: 7px;
  padding: 4px 9px;
  cursor: pointer;
  font-size: 11px;
  font-family: inherit;
  white-space: nowrap;
  flex-shrink: 0;
}
.alice-theme-toggle:hover { border-color: var(--node-border-hover); }

/* ---------- Map artwork: the clock on the start node ---------- */
.root-clock,
.mc-teacup { display: none; pointer-events: none; user-select: none; }

:root:not([data-theme="dark"]) .root-clock {
  display: block;
  position: absolute;
  left: 50%;
  bottom: 100%;
  width: 150px;
  height: auto;
  margin-bottom: -8px;           /* the clock's foot just sits on the card's top edge */
  transform: translateX(-50%);
  z-index: 3;
  filter: drop-shadow(0 3px 5px rgba(60, 45, 20, 0.22));
}
/* Room above the start node for the clock */
:root:not([data-theme="dark"]) .map-wrap.has-root-clock { padding-top: 230px; }
/* The glow would sit behind the clock; paper doesn't need it */
:root:not([data-theme="dark"]) .map-card.root-card::after { opacity: 0.55; }

/* ---------- Map artwork: the teacup on anything worth coming back to ---------- */
:root:not([data-theme="dark"]) .mc-teacup {
  display: block;
  position: absolute;
  top: -78px;
  right: -36px;
  width: 124px;
  transform: rotate(8deg);
  z-index: 3;
  filter: drop-shadow(0 2px 4px rgba(60, 45, 20, 0.20));
}
.mc-teacup-img { display: block; width: 100%; height: auto; }
/* A bigger paper tag laid exactly over the little one in the photograph,
   so "worth coming back to" can actually be read. Live text, so it stays
   crisp and uses the heading face (Seasons, when it arrives). */
.mc-teacup-tag {
  position: absolute;
  left: 19%;
  top: 67%;
  width: 74%;
  white-space: nowrap;
  transform: translate(-50%, -50%) rotate(-21deg);
  padding: 13px 3px 8px;
  background:
    radial-gradient(circle at 50% 7px, transparent 2px, rgba(0,0,0,0.12) 2.5px, transparent 3.2px),
    linear-gradient(170deg, #FBFAF6 0%, #F1EEE7 100%);
  clip-path: polygon(9% 0, 91% 0, 100% 9%, 100% 91%, 91% 100%, 9% 100%, 0 91%, 0 9%);
  font-family: var(--font-wordmark, 'Cormorant Garamond', Georgia, serif);
  font-weight: 600;
  font-size: 9.5px;
  line-height: 1.12;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: center;
  color: #2A241D;
}
/* Push the card's words below the cup so it never sits on the text */
:root:not([data-theme="dark"]) .map-card.has-teacup .map-card-content { padding-top: 66px; }
:root:not([data-theme="dark"]) .map-card.has-teacup .node-icon { top: 62px; }
/* On paper the teacup art says it, so the pill becomes a quiet text link */
:root:not([data-theme="dark"]) .mc-comeback {
  border-color: transparent;
  padding-left: 0;
  color: var(--later);
}

/* ---------- Shapes, dotted sparingly ---------- */
.alice-shape {
  position: absolute;
  pointer-events: none;
  user-select: none;
  z-index: 0;
  opacity: 0.9;
}
:root[data-theme="dark"] .alice-shape { display: none; }

/* ---------- Print: plain paper, keep the artwork ---------- */
@media print {
  :root:not([data-theme="dark"]) body { background: #fff; }
}

/* ---------- Click a node to centre it (both themes) ---------- */
.map-card.mc-centred { animation: alice-centred 1.2s ease-out; }
@keyframes alice-centred {
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 70%, transparent); }
  35%  { box-shadow: 0 0 0 7px color-mix(in srgb, var(--accent) 35%, transparent); }
  100% { box-shadow: 0 0 0 12px transparent; }
}
@media (prefers-reduced-motion: reduce) { .map-card.mc-centred { animation: none; } }