/* ============================================================
   YESTERDAY REDESIGN — dark design layer (loaded after styles.css)
   Scoped under body.yd so it cleanly overrides the old look while
   app.js keeps working against the same IDs / data-view buttons.
   Slice 1: global palette + font, top/bottom nav + sidebar, today view.
   ============================================================ */

body.yd {
  /* native controls (date pickers, selects, any future checkbox/range) pick
     up the warm accent instead of OS blue */
  accent-color: #d9b191;
  /* repaint the whole variable system in the Yesterday palette */
  --bg: #000415;           /* deep ink-navy */
  --paper: #000415;
  --paper-rgb: 0, 4, 21;
  --paper-deep: #211d1b;
  --paper-top: #2f2a26;
  --card: #2f2a26;
  --ink: #ffffff;          /* dark mode → white text */
  --ink-soft: rgba(255,255,255,0.55);
  --ink-faint: rgba(255,255,255,0.38);
  --line: rgba(255,255,255,0.16);
  --accent: #ffffff;
  --accent-rgb: 255, 255, 255;
  --accent-soft: rgba(255,255,255,0.14);
  --sans: -apple-system, "SF Pro Display", system-ui, "Segoe UI", sans-serif;
  /* the journal voice is SF Pro now (not a serif). Rock Salt is the accent,
     the printed book keeps a real serif (restored below). */
  --serif: -apple-system, "SF Pro Display", system-ui, "Segoe UI", sans-serif;
  --tan: #ffffff;          /* primary text / links / avatar */
  --tan-bright: #ffffff;
  --yd-accent: #0002FF;    /* brand accent (dark default) — user-customisable in Settings */
  --tan-accent: var(--yd-accent);   /* legacy accent now follows the brand accent (blue in dark) */
  --write: #ffffff;        /* the writing */
  --glass-from: rgba(0,3,22,0); --glass-via: rgba(0,5,36,0.2); --glass-to: rgba(0,3,22,0);
  --blue: #0002FF;         /* the superimposed logo blue */

  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
}
body.yd { background-image: none; }
body.yd::before { display: none; } /* drop the paper grain */

/* 8px white frame around the whole canvas — square outer corners (filled to the
   screen edge) with a softly rounded inner opening */
body.yd::after {
  content: ""; position: fixed; inset: 8px; z-index: 10000;
  border-radius: 18px; pointer-events: none;
  box-shadow: 0 0 0 9999px #fff;   /* fills everything outside the rounded opening, incl. the square corners */
}

/* warm text selection — a small delight for a writing app */
body.yd ::selection { background: rgba(217, 177, 145, 0.30); }
body.yd.light ::selection { background: rgba(122, 95, 63, 0.22); }

/* search highlight was white text on a white (accent) highlight = invisible;
   the dark fix is gated on [data-theme="dark"], which the yd design isn't */
body.yd mark.search-hl { background: var(--yd-accent); color: #fff; }

/* library bulk-select floating bar was a light frosted glass (dark variant
   gated on [data-theme="dark"]) — give it dark glass that fits the navy bg */
body.yd .lib-float-bar {
  background: rgba(16, 14, 26, 0.72);
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5), 0 2px 8px rgba(0, 0, 0, 0.32);
}

/* hide the old chrome — the new nav replaces it */
body.yd #themeToggle,
body.yd #designBtn,
body.yd #designPanel { display: none !important; }

/* ---------- reusable icon sizing ---------- */
body.yd .yd-ico svg, body.yd .yd-mark svg { display: block; width: 100%; height: 100%; }
body.yd .yd-mark { color: var(--tan); }

/* ============================================================
   TOP NAV  (rebuilt #nav)
   ============================================================ */
body.yd #nav {
  position: fixed; top: 0; left: 0; right: 0;
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; padding: 24px 24px 0;
  background: none; border: none; border-radius: 0;
  box-shadow: none; backdrop-filter: none; opacity: 1;
  transform: none; width: auto; z-index: 50;
}
body.yd .yd-zone { flex: 1 1 0; min-width: 0; display: flex; align-items: center; gap: 24px; }
body.yd .yd-zone.right { justify-content: flex-end; }
body.yd .yd-zone.center { flex: 0 0 auto; flex-direction: column; gap: 2px; }
body.yd #ydBottom .yd-zone.center {
  position: absolute; left: 50%; transform: translateX(-50%);
  pointer-events: none; white-space: nowrap;
}
body.yd #ydBottom .yd-autosave { gap: 10px; }
body.yd #ydBottom .yd-autosave .yd-mark { display: none; }

body.yd .nav-link {
  background: none; border: none; padding: 0; margin: 0;
  font-family: var(--sans); font-size: 12px; font-weight: 500;
  letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--tan); cursor: pointer; white-space: nowrap;
  transition: color 0.2s ease;
}
body.yd .nav-link:hover { background: none; color: var(--tan-accent); }
body.yd .nav-link.is-active { background: none; color: var(--tan); }
/* active top-nav item: same size + position as the rest — the glow halo +
   glowing bar (see "active nav item" block below) do the marking */
body.yd #nav .nav-link.is-active {
  background: none; color: var(--tan-bright);
  padding: 0; border-radius: 0; text-decoration: none;
}
body.yd .nav-link.yd-pill,
body.yd .nav-link.is-active.yd-pill {
  background: var(--tan); color: var(--bg);
  padding: 8px 12px; border-radius: 1000px;
}
body.yd .nav-link.yd-pill:hover { background: var(--tan-bright); color: var(--bg); }

/* non-navigating labels (MENU, SETTINGS) — look like links, do nothing yet */
body.yd .yd-static {
  background: none; border: none; padding: 0; margin: 0;
  font-family: var(--sans); font-size: 12px; font-weight: 500;
  letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--tan); cursor: pointer; white-space: nowrap;
  display: inline-flex; align-items: center; gap: 4px;
  transition: color 0.2s ease;
}
body.yd .yd-static:hover { color: var(--tan-accent); }

body.yd .yd-menu { display: inline-flex; align-items: center; gap: 9px; cursor: pointer; }
body.yd .yd-ico { width: 32px; height: 32px; color: var(--tan); flex-shrink: 0; }

/* ---- animated hamburger → X ---- */
body.yd .yd-menu-bars {
  position: relative; width: 22px; height: 14px; flex-shrink: 0;
  display: inline-block;
}
body.yd .yd-menu-bars span {
  position: absolute; left: 0; height: 1.5px; width: 100%;
  background: var(--tan); border-radius: 2px;
  transition: transform 0.42s cubic-bezier(0.62,0,0.20,1),
              width 0.42s cubic-bezier(0.62,0,0.20,1),
              opacity 0.25s ease;
  transform-origin: center;
}
body.yd .yd-menu-bars span:nth-child(1) { top: 0; width: 70%; }
body.yd .yd-menu-bars span:nth-child(2) { top: 50%; transform: translateY(-50%); }
body.yd .yd-menu-bars span:nth-child(3) { bottom: 0; width: 70%; left: auto; right: 0; }
/* hover — bars reach full width and the cluster breathes */
body.yd .yd-menu:hover .yd-menu-bars span:nth-child(1),
body.yd .yd-menu:hover .yd-menu-bars span:nth-child(3) { width: 100%; }
/* open state — morph to an X */
body.yd.yd-menu-open .yd-menu-bars span:nth-child(1) {
  width: 100%; top: 50%; transform: translateY(-50%) rotate(45deg);
}
body.yd.yd-menu-open .yd-menu-bars span:nth-child(2) { opacity: 0; transform: translateY(-50%) scaleX(0.2); }
body.yd.yd-menu-open .yd-menu-bars span:nth-child(3) {
  width: 100%; bottom: 50%; right: 0; transform: translateY(50%) rotate(-45deg);
}
body.yd .yd-wordmark { font-size: 14px; font-weight: 500; letter-spacing: 0.04em; color: var(--tan); }
body.yd #nav .yd-mark { width: 32px; height: 24.66px; }

/* ============================================================
   FULL-SCREEN MENU OVERLAY
   ============================================================ */
body.yd .yd-menu-overlay {
  position: fixed; inset: 0; z-index: 40;
  display: flex; flex-direction: column; justify-content: center;
  padding: 100px 24px 80px;
  background: rgba(0,4,21,0.86);
  -webkit-backdrop-filter: blur(22px) saturate(1.2);
  backdrop-filter: blur(22px) saturate(1.2);
  opacity: 0; visibility: hidden;
  transition: opacity 0.5s cubic-bezier(0.4,0,0.2,1), visibility 0s linear 0.5s;
}
body.yd.yd-menu-open .yd-menu-overlay {
  opacity: 1; visibility: visible;
  transition: opacity 0.55s cubic-bezier(0.2,0.7,0.2,1), visibility 0s;
}
/* when open, the other nav clusters fade back so MENU/X leads */
body.yd.yd-menu-open #nav .yd-zone.center,
body.yd.yd-menu-open #nav .yd-zone.right,
body.yd.yd-menu-open #nav .yd-zone.left .nav-link,
body.yd.yd-menu-open #ydBottom { opacity: 0; pointer-events: none; transition: opacity 0.3s ease; }
body.yd #ydBottom, body.yd #nav .yd-zone.left .nav-link { transition: opacity 0.3s ease; }

body.yd .yd-menu-list {
  max-width: 760px; margin: 0 auto; width: 100%;
  display: flex; flex-direction: column;
}
/* floating image preview — follows the cursor, fades in on link hover */
body.yd .yd-menu-preview {
  position: fixed; left: 0; top: 0; z-index: 42; pointer-events: none;
  width: clamp(210px, 24vw, 340px); aspect-ratio: 4 / 5;
  object-fit: cover; border-radius: 0;
  border: none; box-shadow: none;
  /* hidden: clipped to a sliver at the top, lifted + slightly zoomed */
  opacity: 0;
  clip-path: inset(0 0 100% 0);
  transform: translate(-50%, calc(-50% + 16px)) scale(1.05);
  transition: opacity 0.3s ease,
              clip-path 0.6s cubic-bezier(0.16, 0.84, 0.3, 1),
              transform 0.6s cubic-bezier(0.16, 0.84, 0.3, 1);
  will-change: left, top, transform, opacity, clip-path;
}
/* shown: the image scans open top→bottom while it settles down to rest */
body.yd .yd-menu-preview.is-on {
  opacity: 1;
  clip-path: inset(0 0 0% 0);
  transform: translate(-50%, -50%) scale(1);
}
/* no hover on touch — hide it there */
@media (hover: none) { body.yd .yd-menu-preview { display: none; } }
body.yd .yd-menu-link {
  position: relative; display: flex; align-items: baseline; gap: 20px;
  background: none; border: none; cursor: pointer; text-align: left;
  padding: 7px 0; color: var(--ink);
  /* staggered entrance */
  opacity: 0; transform: translateY(26px); filter: blur(6px);
  transition: opacity 0.6s ease, transform 0.7s cubic-bezier(0.16,0.84,0.3,1),
              filter 0.6s ease, color 0.25s ease;
}
body.yd.yd-menu-open .yd-menu-link {
  opacity: 1; transform: none; filter: blur(0);
  transition-delay: var(--md, 0ms);
}
body.yd .yd-menu-num {
  font-family: var(--sans); font-size: 13px; font-weight: 500;
  letter-spacing: 0.08em; color: var(--ink); opacity: 0.4;
  flex-shrink: 0; width: 28px; transition: opacity 0.25s ease, transform 0.35s ease;
}
body.yd .yd-menu-label {
  font-family: var(--serif); font-size: clamp(34px, 5.5vw, 58px);
  font-weight: 400; line-height: 1.05; letter-spacing: -0.02em;
  color: var(--ink); transition: color 0.25s ease, transform 0.4s cubic-bezier(0.2,0.8,0.2,1);
}
body.yd .yd-menu-link::after {
  content: ""; position: absolute; left: 48px; right: 0; bottom: 8px; height: 1px;
  background: var(--tan-accent); transform: scaleX(0); transform-origin: left;
  opacity: 0.4; transition: transform 0.4s cubic-bezier(0.2,0.8,0.2,1);
}
body.yd .yd-menu-link:hover .yd-menu-label { color: var(--tan-accent); transform: translateX(10px); }
body.yd .yd-menu-link:hover .yd-menu-num { opacity: 1; transform: translateY(-4px); }
body.yd .yd-menu-link:hover::after { transform: scaleX(1); }
/* the currently-open section is marked warm */
body.yd .yd-menu-link.is-current .yd-menu-label { color: var(--tan-accent); }
body.yd .yd-menu-link.is-current .yd-menu-num { opacity: 1; }

body.yd .yd-menu-foot {
  max-width: 760px; margin: 36px auto 0; width: 100%;
  display: flex; align-items: center; gap: 14px;
  opacity: 0; transition: opacity 0.6s ease 0.45s;
}
body.yd.yd-menu-open .yd-menu-foot { opacity: 1; }
body.yd .yd-menu-foot .yd-mark { width: 26px; height: 20px; color: var(--tan-accent); }
body.yd .yd-menu-foot-text {
  font-family: var(--sans); font-size: 13px; color: var(--ink-faint);
  letter-spacing: 0.02em;
}

/* light paper theme — swap the navy scrim for warm paper */
body.yd.light .yd-menu-overlay { background: rgba(207,202,198,0.88); }

@media (prefers-reduced-motion: reduce) {
  body.yd .yd-menu-link, body.yd .yd-menu-foot { transition: opacity 0.2s ease; transform: none; filter: none; }
}

/* take the save whisper out of the flex flow so it doesn't add a phantom
   gap between LOG OUT and the avatar — the avatar sits 24px like every item */
body.yd .save-whisper {
  position: absolute; top: 54px; right: 40px;
  opacity: 0; font-size: 12px; font-style: italic; color: var(--ink-faint);
  pointer-events: none;
}
body.yd .save-whisper.show { opacity: 1; }
body.yd .save-whisper.show { opacity: 1; }
body.yd #userButton { display: inline-flex; align-items: center; margin: 0; padding: 0; }
/* fallback Google-account avatar (Clerk swaps in the real one when signed in) */
body.yd .yd-avatar {
  width: 44px; height: 44px; border-radius: 1000px;
  background: var(--tan); color: var(--bg);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 500; letter-spacing: 0.02em;
  cursor: pointer; flex-shrink: 0;
  transition: box-shadow 0.2s ease, background 0.2s ease;
}
/* white avatar can't brighten in dark mode — feedback is a warm ring */
body.yd .yd-avatar:hover { background: var(--tan-bright); box-shadow: 0 0 0 3px rgba(217,177,145,0.35); }

/* ============================================================
   BOTTOM NAV
   ============================================================ */
body.yd #ydBottom {
  position: fixed; left: 0; right: 0; bottom: 0;
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; padding: 0 24px 24px; z-index: 50;
}
body.yd #ydBottom .yd-zone .nav-link.is-active { text-decoration: none; color: var(--tan-bright); }

/* ============================================================
   VIEW SHELL — give every view room under the fixed navs
   ============================================================ */
body.yd .view {
  padding: 120px 24px 120px;
  min-height: 100vh;
}
/* drop the legacy .column's own top padding — top spacing is the 80px above */
body.yd .view .column { padding-top: 0; }
body.yd .view .column,
body.yd .view .paper {
  margin: 0 auto;
}

/* ============================================================
   TODAY VIEW
   ============================================================ */
body.yd #view-today {
  display: none;
  position: relative;
  padding: 120px 24px 120px;   /* same top spacing as the other views */
}
body.yd #view-today.is-visible { display: block; }

/* left sidebar — fixed to the viewport so it stays put while content scrolls */
body.yd #ydSide {
  position: fixed; left: 40px; top: 120px; z-index: 40;
  display: flex; flex-direction: column; align-items: flex-start; gap: 16px;
  flex-shrink: 0;
}
body.yd .side-link {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 14px; font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--tan); cursor: pointer; white-space: nowrap; background: none; border: none;
  transition: color 0.2s ease;
}
body.yd .side-link:hover { color: var(--tan-bright); }
body.yd .side-ico { width: 16px; height: 16px; color: var(--tan); order: -1; visibility: hidden; flex-shrink: 0; }
body.yd .side-link.is-active .side-ico { visibility: visible; }
body.yd .side-ico svg { display: block; width: 100%; height: 100%; }

/* the editor paper → flat dark column */
/* ---- today: a calm, journal-like writing page ---- */
/* match the Yesterdays .column box exactly — same top, left, width */
body.yd #view-today .paper {
  background: none; box-shadow: none; border: none;
  margin: 0 auto; max-width: 760px; width: 100%;
  padding: 0 28px 140px;
  display: block;                 /* rhythm via margins, not a uniform gap */
}
body.yd #view-today .editor-head {
  display: flex; align-items: center; gap: 8px; margin: 0 0 6px;
}
/* the logo sits to the left of "Write the today" */
body.yd #view-today .editor-head { display: flex; align-items: center; gap: 8px; }
body.yd #view-today .editor-head .yd-mark { display: block; width: 30px; height: 23px; flex-shrink: 0; color: var(--yd-accent); }
/* "Write the today" matches the "Yesterdays" page headline 1:1 */
body.yd #view-today .editor-head span {
  font-size: 28px; font-weight: 500; letter-spacing: -0.01em; color: var(--tan);
}

/* date — quiet subtitle under the headline */
body.yd #view-today .day-date {
  display: block; text-align: left; white-space: nowrap;
  font-family: var(--sans); font-size: 13.5px; font-style: italic;
  letter-spacing: 0.01em; text-transform: none;
  color: var(--ink-soft); opacity: 0.85; margin: 0 0 36px;
}

/* the day's title + the writing — SF Pro per Figma (title 24/32 medium,
   body 16/24 regular). Rock Salt stays the secondary/accent voice. */
body.yd #view-today .day-title {
  display: block; width: 100%;
  background: none; border: none; outline: none; padding: 0;
  font-family: var(--sans); font-weight: 500; font-size: 24px; line-height: 32px;
  color: var(--write); margin: 0 0 16px;
}
body.yd #view-today .day-title::placeholder { color: var(--ink-soft); opacity: 0.5; font-style: italic; }

body.yd #view-today .editor,
body.yd #view-today .hl-backdrop {
  width: 100%; background: none; border: none; outline: none; padding: 0;
  font-family: var(--sans); font-weight: 400; font-size: 16px; line-height: 24px;
  letter-spacing: 0;
  color: var(--write); opacity: 1;
}
body.yd #view-today .editor { resize: none; min-height: 84px; }
body.yd #view-today .editor::placeholder { color: var(--ink-soft); opacity: 0.55; font-style: italic; }

/* "add personal touch" divider */
body.yd .yd-divider { display: flex; align-items: center; gap: 10px; width: 100%; }
body.yd .yd-divider::before, body.yd .yd-divider::after {
  content: ""; flex: 1 1 0; height: 1px; background: var(--line);
}
body.yd .yd-divider span {
  font-size: 10px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-soft);
}

body.yd #view-today .feeling { display: flex; flex-direction: column; gap: 18px; margin: 36px 0 0; border-top: none; padding-top: 0; }
/* mood chips — pick one if you want, click again to clear */
body.yd .mood-tabs { display: flex; flex-wrap: wrap; gap: 6px; }
body.yd .mood-tab, body.yd .mood-add {
  background: none; border: 1px solid var(--line); border-radius: 999px;
  padding: 3px 11px; cursor: pointer;
  font-family: var(--sans); font-size: 12px; font-weight: 500; color: var(--ink-soft);
  transition: color 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}
body.yd .mood-tab:hover, body.yd .mood-add:hover { color: var(--yd-accent); border-color: var(--yd-accent); }
body.yd .mood-tab.is-on {
  background: var(--yd-accent); border-color: var(--yd-accent); color: #fff;
}
/* the add-a-mood chip */
body.yd .mood-add {
  border-style: dashed; padding: 3px 10px; line-height: 1; font-size: 14px;
}
/* inline input shown while adding a custom mood */
body.yd .mood-add-input {
  border: 1px solid var(--tan-accent); border-radius: 999px;
  padding: 3px 11px; font-family: var(--sans); font-size: 12px; font-weight: 500;
  color: var(--ink); background: none; outline: none; width: 90px;
}
body.yd .feeling-input, body.yd .tags-input {
  width: 100%; background: none; border: none; outline: none; padding: 0;
  font-family: var(--sans); font-style: italic; font-weight: 300;
  font-size: 14px; line-height: 22px; color: var(--write);
}
body.yd .feeling-input::placeholder, body.yd .tags-input::placeholder { color: var(--ink-soft); opacity: 0.55; }

/* spacing for the photo + word-count row */
body.yd #view-today #photoStrip:not(:empty) { margin: 22px 0 0; }
body.yd #view-today .photo-add { margin: 18px 0 0; }
body.yd #view-today .entry-meta { margin: 14px 0 0; text-align: right; }
body.yd #view-today .yd-divider { margin: 40px 0 0; }

/* photos + add-photo keep working, just recoloured */
body.yd .photo-add {
  background: none; border: none; color: var(--tan); font-family: var(--sans);
  font-size: 14px; font-weight: 500; cursor: pointer; padding: 0; opacity: 1;
}
body.yd .photo-add:hover { color: var(--tan-accent); }
body.yd .entry-meta { color: var(--ink-faint); }

/* photos seated on the dark bg: hairline edge + a real drop shadow + warm × */
body.yd .photo-strip img {
  border-radius: 0; border: none; box-shadow: none;
}
body.yd .photo-strip .photo-remove {
  background: rgba(0,4,21,0.6); transition: opacity 0.2s ease, background 0.2s ease, color 0.2s ease;
}
body.yd .photo-strip .photo-remove:hover { background: rgba(0,4,21,0.85); color: var(--tan-accent); }

/* drop-to-upload overlay: was a cream wash — make it belong to the dark world */
body.yd .drop-hint {
  background: rgba(0,4,21,0.82); color: var(--tan-accent);
  font-family: var(--serif); font-style: italic;
}
body.yd .word-count { color: var(--ink-faint); font-size: 12px; }

/* ============================================================
   OTHER VIEWS — dark baseline until each gets its own slice
   ============================================================ */
body.yd .view-title { font-family: var(--sans); font-weight: 500; color: var(--tan); }
body.yd .view-sub { color: var(--ink-soft); font-family: var(--sans); }
body.yd .ghost-btn {
  background: none; border: 1px solid var(--line); color: var(--tan);
  font-family: var(--sans); border-radius: 999px;
  transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}
/* warm hover for ghost buttons — but leave .danger (delete) its own red hover */
body.yd .ghost-btn:not(.danger):hover { border-color: var(--tan-accent); color: var(--tan-accent); background: rgba(217,177,145,0.05); }

/* ============================================================
   SLICE 2–6: shared component styling so every view is cohesive
   (days, people, tree, notes, library, book) in the dark design
   ============================================================ */

body.yd .view .column { max-width: 760px; }
body.yd .view .column.column--wide { max-width: 1100px; }
body.yd .view-title { font-size: 28px; letter-spacing: -0.01em; margin: 0 0 6px; }
body.yd .view-sub { font-size: 14px; margin: 0 0 24px; }
/* empty states — a calm invitation in the journal's voice, not a placeholder */
body.yd .empty-note,
body.yd .notes-empty {
  color: var(--ink-soft); font-family: var(--serif); font-style: italic;
  font-size: 17px; line-height: 1.6; letter-spacing: 0.01em;
  text-align: center; padding: 60px 24px; margin: 4px 0 0;
}
body.yd .day-picker-empty {
  color: var(--ink-soft); font-family: var(--serif); font-style: italic;
  text-align: center; padding: 18px 14px; list-style: none;
}
body.yd .field-label { color: var(--tan); font-family: var(--sans); font-size: 13px; letter-spacing: 0.02em; }
body.yd .field-hint { color: var(--ink-soft); font-family: var(--sans); font-size: 13px; }

/* inputs & textareas */
body.yd input[type="text"], body.yd input[type="search"], body.yd input[type="number"],
body.yd input[type="date"], body.yd textarea,
body.yd .day-search, body.yd .style-ref-input, body.yd .voice-profile-textarea {
  background: rgba(255,255,255,0.03); border: 1px solid var(--line);
  color: var(--ink); font-family: var(--sans); border-radius: 10px;
  caret-color: var(--tan); transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}
/* hover (before :focus so the warm focus state still wins when both apply) */
body.yd .day-search:hover, body.yd input[type="text"]:hover, body.yd input[type="search"]:hover,
body.yd input[type="date"]:hover, body.yd .style-ref-input:hover {
  border-color: rgba(255,255,255,0.30); background: rgba(255,255,255,0.045);
}
body.yd .day-search:focus, body.yd input:focus, body.yd textarea:focus { border-color: var(--tan-accent); outline: none; }
/* soft warm focus ring — only the bordered fields, never the borderless
   today writing inputs (they have no type attr / are the .editor textarea) */
body.yd input[type="text"]:focus, body.yd input[type="search"]:focus,
body.yd input[type="number"]:focus, body.yd input[type="date"]:focus,
body.yd .day-search:focus, body.yd .style-ref-input:focus,
body.yd .voice-profile-textarea:focus {
  box-shadow: 0 0 0 3px rgba(217, 177, 145, 0.16);
}
body.yd ::placeholder { color: var(--ink-faint); }
/* the native date-picker icon is dark by default — invisible on a dark input */
body.yd input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(0.7); opacity: 0.6; cursor: pointer;
}
body.yd input[type="date"]::-webkit-calendar-picker-indicator:hover { opacity: 1; }
/* the today editor inputs stay borderless (set earlier) */
body.yd .day-title, body.yd .editor, body.yd .feeling-input, body.yd .tags-input {
  background: none; border: none; border-radius: 0;
}

/* segmented toggles (book setup, modes) */
body.yd .segmented { background: rgba(255,255,255,0.03); border: 1px solid var(--line); border-radius: 999px; }
body.yd .seg { color: var(--ink-soft); font-family: var(--sans); background: none; border: none; transition: color 0.18s ease, background 0.18s ease; }
/* inactive options warm on hover (active stays the white "selected" pill) */
body.yd .seg:not(.is-on):hover { color: var(--tan-accent); }
body.yd .seg.is-on { background: var(--tan); color: var(--bg); border-radius: 999px; }
body.yd .seg-hint { opacity: 0.6; }

/* primary button */
body.yd .primary-btn {
  background: var(--tan); color: var(--bg); border: none; border-radius: 999px;
  font-family: var(--sans); font-weight: 500;
  transition: box-shadow 0.2s ease, background 0.2s ease;
}
/* the white pill can't brighten further in dark mode, so feedback is a soft
   warm glow lift instead (skip disabled buttons) */
body.yd .primary-btn:not(:disabled):hover { background: var(--tan-bright); box-shadow: 0 8px 24px rgba(217,177,145,0.28); }

/* ---- yesterdays · search field ---- */
body.yd .day-search-wrap { position: relative; margin: 0 0 12px; }
body.yd .day-search-ico {
  position: absolute; left: 16px; top: 50%; transform: translateY(-50%);
  width: 17px; height: 17px; color: var(--ink-faint); pointer-events: none;
  transition: color 0.2s ease;
}
body.yd #view-days .day-search {
  width: 100%; background: rgba(127,127,127,0.07); border: 1px solid transparent;
  border-radius: 12px; padding: 12px 16px 12px 44px;
  font-family: var(--sans); font-style: normal; font-size: 14px; color: var(--ink);
  box-shadow: none; transition: background 0.2s ease, border-color 0.2s ease;
}
body.yd #view-days .day-search:hover { background: rgba(127,127,127,0.10); border-color: transparent; }
body.yd #view-days .day-search:focus {
  background: rgba(127,127,127,0.05); border-color: var(--yd-accent); box-shadow: none; outline: none;
}
body.yd .day-search-wrap:focus-within .day-search-ico { color: var(--yd-accent); }
body.yd #view-days .day-search::placeholder { color: var(--ink-faint); font-style: normal; }

/* ---- yesterdays · write a day in the past ---- */
body.yd .day-add-row {
  display: flex; align-items: center; gap: 12px;
  background: rgba(127,127,127,0.05); border: 1px dashed var(--line);
  border-radius: 12px; padding: 13px 16px; color: var(--ink-soft); cursor: pointer;
  transition: border-color 0.22s ease, background 0.22s ease, color 0.22s ease;
}
body.yd .day-add-row:hover {
  border-color: var(--yd-accent); color: var(--ink); background: rgba(127,127,127,0.08);
}
body.yd .day-add-plus {
  width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0;
  background: var(--yd-accent); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 17px; line-height: 1; transition: transform 0.22s ease;
}
body.yd .day-add-row:hover .day-add-plus { transform: rotate(90deg); }
body.yd .day-add-text { font-family: var(--sans); font-size: 13.5px; font-weight: 500; }

/* ---- yesterdays · day rows ---- */
/* ---- Days / Weeks / Months toggle ---- */
body.yd .days-modes { display: inline-flex; gap: 4px; margin: 4px 0 18px; background: rgba(127,127,127,0.08); border-radius: 999px; padding: 4px; }
body.yd .days-mode {
  background: none; border: none; cursor: pointer; border-radius: 999px; padding: 7px 16px;
  font-family: var(--sans); font-size: 13px; font-weight: 600; color: var(--ink-soft);
  transition: color 0.2s ease, background 0.2s ease;
}
body.yd .days-mode:hover { color: var(--ink); }
body.yd .days-mode.is-on { background: var(--yd-accent); color: #fff; }

/* mode visibility: grid (days) vs 3D stack (weeks / months) */
body.yd .days-stack { display: none; }
body.yd .yd-days-side[data-mode="weeks"] #daysList,
body.yd .yd-days-side[data-mode="months"] #daysList,
body.yd .yd-days-side[data-mode="weeks"] .day-search-wrap,
body.yd .yd-days-side[data-mode="months"] .day-search-wrap { display: none; }
body.yd .yd-days-side[data-mode="weeks"] .days-stack,
body.yd .yd-days-side[data-mode="months"] .days-stack { display: block; }

/* ---- the 3D card stack ---- */
body.yd .days-stack { position: relative; height: min(58vh, 500px); margin-top: 8px; perspective: 1300px; }
body.yd .days-stack-deck { position: absolute; inset: 0; transform-style: preserve-3d; will-change: transform; }
body.yd .days-stack-hint {
  position: absolute; left: 0; right: 0; bottom: -2px; text-align: center;
  font-family: var(--sans); font-size: 11px; letter-spacing: 0.04em; color: var(--ink-faint); margin: 0;
}
/* the active period label — subtle text on the canvas */
body.yd .days-period {
  position: absolute; top: 0; left: 0; right: 0; text-align: center; z-index: 4;
  font-family: var(--sans); font-size: 13px; font-weight: 600; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--ink-faint);
}
/* the previous / next period as a smaller stack on each side */
body.yd .days-mini {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 4;
  background: none; border: none; cursor: pointer; padding: 8px;
  opacity: 0.6; transition: opacity 0.25s ease, transform 0.3s ease;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  font-family: var(--sans);
}
body.yd .days-mini--prev { left: 2px; }
body.yd .days-mini--next { right: 2px; }
body.yd .days-mini[hidden] { display: none; }
body.yd .days-mini--prev:hover { opacity: 1; transform: translateY(-50%) translateX(-4px); }
body.yd .days-mini--next:hover { opacity: 1; transform: translateY(-50%) translateX(4px); }
body.yd .mini-arrow { font-size: 30px; line-height: 1; color: var(--ink-soft); font-weight: 300; }
body.yd .mini-go { font-size: 13px; font-weight: 600; color: var(--ink-soft); text-align: center; max-width: 84px; line-height: 1.3; }
body.yd .stack-card {
  position: absolute; left: 50%; top: 50%; width: 384px; height: 246px; margin: -123px 0 0 -192px;
  border-radius: 24px; overflow: hidden; cursor: grab; backface-visibility: hidden;
  border: 1px solid rgba(255,255,255,0.28);
  -webkit-backdrop-filter: blur(22px) saturate(165%); backdrop-filter: blur(22px) saturate(165%);
  box-shadow: 0 26px 60px rgba(0,0,0,0.28), inset 0 1px 1px rgba(255,255,255,0.5), inset 0 -26px 50px rgba(0,0,0,0.07);
  transition: transform 0.6s cubic-bezier(0.22,0.9,0.24,1), opacity 0.45s ease, box-shadow 0.4s ease;
  display: flex; flex-direction: column; justify-content: space-between; padding: 22px;
  will-change: transform;
}
body.yd .stack-card:active { cursor: grabbing; }
/* liquid-glass tints — empty days are gray, written days are white,
   days with a photo use the image (sc-haspic, below) */
body.yd .stack-card.sc-empty { background: linear-gradient(150deg, rgba(150,148,143,0.42), rgba(118,116,111,0.34)); color: var(--ink); }
body.yd .stack-card.sc-white { background: linear-gradient(150deg, rgba(255,255,255,0.74), rgba(244,241,236,0.58)); color: #161616; }
/* a soft moving specular highlight — the "liquid" sheen */
body.yd .stack-card::after {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; border-radius: inherit;
  background: linear-gradient(125deg, rgba(255,255,255,0.45) 0%, rgba(255,255,255,0) 38%, rgba(255,255,255,0) 100%);
  background-size: 200% 200%; opacity: 0.7; mix-blend-mode: soft-light;
}
body.yd .stack-card.is-front::after { animation: sc-sheen 5.5s ease-in-out infinite; }
@keyframes sc-sheen { 0%,100% { background-position: 0% 0%; } 50% { background-position: 100% 100%; } }
body.yd .sc-date, body.yd .sc-big, body.yd .sc-foot { position: relative; z-index: 1; }
body.yd .sc-date {
  font-family: var(--sans); font-size: 11px; font-weight: 700; letter-spacing: 0.10em;
  text-transform: uppercase; opacity: 0.85;
}
body.yd .sc-big { font-family: var(--sans); font-weight: 700; font-size: 84px; line-height: 0.9; letter-spacing: -0.04em; }
body.yd .stack-card.sc-flying { pointer-events: none; }
/* subtle "tap" each card gets as the thrown card sweeps over it to the back.
   uses the independent translate/scale props so it composes with the fan transform */
@keyframes sc-tap {
  0%   { translate: 0 0; scale: 1; }
  45%  { translate: 0 5px; scale: 0.985; }
  100% { translate: 0 0; scale: 1; }
}
body.yd .sc-foot { font-family: var(--sans); font-size: 13px; font-weight: 500; opacity: 0.82;
  align-self: center; max-width: 90%; text-align: center;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
body.yd .stack-card.is-front { box-shadow: 0 36px 86px rgba(0,0,0,0.34), inset 0 1px 1px rgba(255,255,255,0.55); }

/* filled-day cards get a pulsing dot field that reveals when they come front */
body.yd .sc-fx {
  position: absolute; inset: 0; z-index: 0; pointer-events: none; color: inherit;
  background-image: radial-gradient(currentColor 1.4px, transparent 1.7px);
  background-size: 17px 17px;
  -webkit-mask: radial-gradient(circle at 50% 62%, #000 0%, transparent 72%);
  mask: radial-gradient(circle at 50% 62%, #000 0%, transparent 72%);
  opacity: 0; transform: scale(0.65);
}
body.yd .stack-card.is-front .sc-fx {
  opacity: 0.32;
  transition: opacity 0.6s ease 0.15s, transform 0.9s cubic-bezier(0.2,0.8,0.2,1) 0.05s;
  transform: scale(1);
  animation: sc-dots 3.4s ease-in-out 0.9s infinite;
}
@keyframes sc-dots { 0%,100% { opacity: 0.16; } 50% { opacity: 0.34; } }

/* a day with a photo uses it as the card background */
body.yd .sc-photo {
  position: absolute; inset: 0; z-index: 0; background-size: cover; background-position: center;
}
body.yd .sc-photo::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.12) 0%, rgba(0,0,0,0) 38%, rgba(0,0,0,0.62) 100%);
}
body.yd .stack-card.sc-haspic { color: #fff; }
body.yd .stack-card.sc-haspic .sc-date,
body.yd .stack-card.sc-haspic .sc-foot { opacity: 0.95; text-shadow: 0 1px 8px rgba(0,0,0,0.45); }
body.yd .stack-card.sc-haspic .sc-big { text-shadow: 0 2px 16px rgba(0,0,0,0.4); }
/* mini side-stack card with a photo */
body.yd .mini-card.mini-haspic { background-size: cover; background-position: center; }
/* the date + number animate in as a card reaches the front */
body.yd .stack-card.is-front .sc-date { animation: sc-date-in 0.55s ease both; }
@keyframes sc-date-in { from { opacity: 0; transform: translateX(-12px); } to { opacity: 0.85; transform: none; } }

/* the big day number animates differently depending on the day's state */
body.yd .sc-big { transform-origin: center bottom; }

/* WRITTEN days (white card / photo): the number flips in like a flip-clock,
   with a snappy overshoot — feels alive */
body.yd .stack-card.sc-white.is-front .sc-big,
body.yd .stack-card.sc-haspic.is-front .sc-big {
  animation: sc-num-flip 0.62s cubic-bezier(0.2,0.9,0.25,1.05) both;
}
@keyframes sc-num-flip {
  0%   { opacity: 0; transform: perspective(520px) rotateX(-88deg) translateY(26px); }
  55%  { opacity: 1; transform: perspective(520px) rotateX(10deg) translateY(0); }
  78%  { transform: perspective(520px) rotateX(-5deg); }
  100% { transform: perspective(520px) rotateX(0deg); }
}

/* EMPTY days: the number is hollow (outlined) and ghosts in softly + drifts —
   feels quiet / nothing-there-yet */
body.yd .stack-card.sc-empty .sc-big {
  color: transparent; -webkit-text-stroke: 2px var(--ink); opacity: 0.4;
}
body.yd .stack-card.sc-empty.is-front .sc-big {
  animation: sc-num-ghost 0.8s ease both, sc-num-float 4.5s ease-in-out 0.8s infinite;
}
@keyframes sc-num-ghost {
  0%   { opacity: 0; filter: blur(9px); transform: translateY(12px) scale(1.06); letter-spacing: 0.12em; }
  100% { opacity: 0.4; filter: blur(0); transform: none; letter-spacing: -0.04em; }
}
@keyframes sc-num-float {
  0%,100% { transform: translateY(0); opacity: 0.4; }
  50%     { transform: translateY(-5px); opacity: 0.58; }
}
@media (prefers-reduced-motion: reduce) {
  body.yd .stack-card.is-front .sc-big { animation: none; }
}
@media (prefers-reduced-motion: reduce) {
  body.yd .stack-card::after, body.yd .stack-card.is-front .sc-fx { animation: none; }
}

/* calm card tints — a subtle tone of the page bg; selected is a darker tone */
body.yd { --day-card: rgba(255,255,255,0.05); --day-card-hover: rgba(255,255,255,0.08); --day-card-active: rgba(255,255,255,0.12); }
body.yd.light { --day-card: rgba(255,255,255,0.45); --day-card-hover: rgba(255,255,255,0.62); --day-card-active: rgba(96,86,74,0.16); }

body.yd .days-list {
  border-top: none; margin-top: 12px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-content: start;
}
body.yd .days-list li { list-style: none; display: flex; }
body.yd .day-row {
  position: relative; width: 100%; height: 100%;
  color: var(--ink); font-family: var(--sans); text-align: left; cursor: pointer;
  background: var(--day-card); border: 1.5px solid transparent; border-radius: 18px;
  padding: 20px 20px 18px;
  display: flex; flex-direction: column;
  transition: background 0.24s ease, border-color 0.24s ease, transform 0.24s ease, box-shadow 0.24s ease;
}
body.yd .day-row:hover { background: var(--day-card-hover); transform: translateY(-3px); box-shadow: 0 12px 30px rgba(0,0,0,0.10); }
body.yd .d-date {
  display: block; color: var(--ink-faint); font-size: 11px; font-weight: 600;
  letter-spacing: 0.10em; text-transform: uppercase; margin-bottom: 8px;
  transition: color 0.2s ease;
}
body.yd .d-title {
  display: block; font-family: var(--serif); font-size: 19px; font-weight: 500;
  color: var(--write); line-height: 1.28; margin-bottom: 6px;
  transition: color 0.2s ease;
}
body.yd .d-preview {
  font-family: var(--serif); font-style: italic;
  font-size: 13.5px; color: var(--ink-soft); line-height: 1.5; margin: 0 0 14px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
body.yd .d-meta { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; margin-top: auto; }
body.yd .d-words { color: var(--ink-faint); font-size: 11.5px; }
body.yd .d-tag {
  background: rgba(127,127,127,0.14); border: none; color: var(--ink-soft);
  border-radius: 999px; font-size: 10px; font-weight: 600;
  letter-spacing: 0.05em; text-transform: uppercase; padding: 3px 9px;
  transition: background 0.2s ease, color 0.2s ease;
}
/* keep card content above the moving glow */
body.yd .day-row > * { position: relative; z-index: 1; }
/* the selected card — a darker tone with a cool radial accent glow drifting behind it */
body.yd .day-row.is-active {
  background: var(--day-card-active); border-color: transparent; transform: none;
  box-shadow: 0 14px 36px rgba(0,0,0,0.14);
  overflow: hidden;
}
body.yd .day-row.is-active::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; border-radius: inherit;
  background: radial-gradient(circle at 50% 50%, var(--yd-accent) 0%, color-mix(in srgb, var(--yd-accent) 45%, transparent) 30%, transparent 62%);
  background-size: 220% 220%; opacity: 0.5;
  animation: yd-card-glow 7s ease-in-out infinite;
}
body.yd .day-row.is-active .d-date { color: var(--ink); }

/* ---- "All" mode: month-grouped flat cards (weeks-style, no stacking) ---- */
body.yd .all-month {
  grid-column: 1 / -1; font-family: var(--sans); font-size: 12px; font-weight: 700;
  letter-spacing: 0.10em; text-transform: uppercase; color: var(--ink-faint); margin: 20px 2px 2px;
}
body.yd .all-month:first-of-type { margin-top: 6px; }
body.yd .all-card {
  position: relative; width: 100%; min-height: 152px; border-radius: 20px; overflow: hidden;
  padding: 18px 20px; text-align: left; cursor: pointer; color: #161616;
  background: linear-gradient(150deg, rgba(255,255,255,0.74), rgba(244,241,236,0.5));
  border: 1.5px solid transparent; box-shadow: 0 6px 18px rgba(0,0,0,0.06);
  display: flex; flex-direction: column; justify-content: space-between;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
body.yd .all-card:hover { transform: translateY(-3px); box-shadow: 0 14px 32px rgba(0,0,0,0.10); }
body.yd .all-card.is-active { border-color: var(--yd-accent); box-shadow: 0 14px 32px rgba(0,0,0,0.12); }
body.yd .all-card .sc-big { font-size: 56px; margin: 2px 0; }
/* the all-card is white in BOTH modes, so its text must stay dark (theme vars
   like --ink/--ink-faint go light in dark mode → invisible on white) */
body.yd .all-card .sc-date { color: rgba(22,22,22,0.5); }
body.yd .all-card .sc-date, body.yd .all-card .sc-big, body.yd .all-card-foot { position: relative; z-index: 1; }
body.yd .all-title {
  font-family: var(--sans); font-size: 14px; font-weight: 500; line-height: 1.3; color: var(--ink);
  display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden;
}
body.yd .all-card .all-title { color: #161616; }
body.yd .all-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
body.yd .all-tag {
  background: rgba(127,127,127,0.14); color: var(--ink-soft); border-radius: 999px;
  font-size: 10px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; padding: 3px 9px;
}
body.yd .all-card .all-tag { background: rgba(22,22,22,0.08); color: rgba(22,22,22,0.62); }
/* photo days: the image fills the card (sc-photo child) with white text */
body.yd .all-card.sc-haspic { color: #fff; }
body.yd .all-card.sc-haspic .all-title { color: #fff; text-shadow: 0 1px 8px rgba(0,0,0,0.5); }
body.yd .all-card.sc-haspic .sc-date { color: #fff; text-shadow: 0 1px 8px rgba(0,0,0,0.45); }
body.yd .all-card.sc-haspic .sc-big { text-shadow: 0 2px 16px rgba(0,0,0,0.4); }
body.yd .all-card.sc-haspic .all-tag { background: rgba(255,255,255,0.24); color: #fff; }
/* the "+" add bar, full width at the top */
body.yd .all-add {
  grid-column: 1 / -1; flex-direction: row; align-items: center; justify-content: center; gap: 12px;
  min-height: 58px; background: transparent; border: 1.5px dashed var(--line); box-shadow: none;
}
body.yd .all-add:hover { border-color: var(--yd-accent); background: rgba(127,127,127,0.05); transform: none; }
body.yd .all-add-icon {
  width: 30px; height: 30px; border-radius: 50%; background: var(--yd-accent); color: #fff;
  font-size: 19px; line-height: 1; display: flex; align-items: center; justify-content: center; transition: transform 0.2s ease;
}
body.yd .all-add:hover .all-add-icon { transform: rotate(90deg); }
body.yd .all-add-label { font-family: var(--sans); font-size: 13px; font-weight: 500; color: var(--ink-soft); }

/* the always-first "+" CTA card */
body.yd .past-day-date--hidden { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
body.yd .day-row--add {
  align-items: center; justify-content: center; text-align: center; gap: 12px;
  background: transparent; border: 1.5px dashed var(--line); min-height: 150px;
}
body.yd .day-row--add:hover {
  background: var(--day-card); border-color: var(--yd-accent); transform: translateY(-3px);
  box-shadow: 0 12px 30px rgba(0,0,0,0.08);
}
body.yd .day-add-icon {
  width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0;
  background: var(--yd-accent); color: #fff; font-size: 26px; font-weight: 400; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  transition: transform 0.22s ease;
}
body.yd .day-row--add:hover .day-add-icon { transform: scale(1.08) rotate(90deg); }
body.yd .day-add-label {
  font-family: var(--sans); font-size: 13px; font-weight: 500; color: var(--ink-soft);
}
@keyframes yd-card-glow {
  0%   { background-position: 12% 22%; }
  50%  { background-position: 88% 74%; }
  100% { background-position: 12% 22%; }
}
@media (prefers-reduced-motion: reduce) {
  body.yd .day-row.is-active::before { animation: none; background-position: 30% 30%; }
}

/* ============================================================
   YESTERDAYS · master-detail (cards left, reading on the right)
   ============================================================ */
body.yd #view-days .yd-days-stage {
  position: relative; z-index: 2;
  display: flex; flex-direction: column;
  min-height: calc(100vh - 280px);
}
body.yd #view-days .yd-days-row {
  display: flex; align-items: stretch; gap: 40px; width: 100%; flex: 1 1 auto;
}
body.yd #view-days .yd-days-side { flex: 1 1 0; min-width: 0; }
body.yd #view-days .yd-days-divider { flex: 0 0 8px; align-self: stretch; background: transparent; }
/* the reading detail stays in view while you scroll the card list */
body.yd #view-days .yd-days-main {
  flex: 1 1 0; min-width: 0; position: sticky; top: 120px; align-self: flex-start;
}
body.yd #view-days .view-title { font-size: 28px; margin: 0 0 4px; }
body.yd #view-days .view-sub { margin: 0 0 24px; }

/* the detail panel */
body.yd .dd-head { display: flex; align-items: baseline; justify-content: space-between; gap: 18px; }
body.yd .dd-title {
  font-family: var(--serif); font-size: 28px; font-weight: 500; line-height: 1.15;
  color: var(--write); margin: 0; min-width: 0;
}
body.yd .dd-date {
  font-family: var(--sans); font-size: 11px; font-weight: 500; letter-spacing: 0.10em;
  text-transform: uppercase; color: var(--yd-accent); white-space: nowrap; flex-shrink: 0;
}
body.yd .dd-body {
  font-family: var(--serif); font-size: 18px; line-height: 1.7; color: var(--write);
  white-space: pre-wrap; margin: 26px 0 0; word-wrap: break-word;
}
body.yd .dd-body em { color: var(--ink-faint); font-style: italic; }
body.yd .dd-photos { display: flex; flex-direction: column; gap: 14px; margin: 24px 0 0; }
body.yd .dd-photos img { display: block; width: 100%; max-width: 520px; height: auto; border-radius: 0; }
body.yd .dd-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 26px 0 0; }
body.yd .dd-tag {
  background: rgba(127,127,127,0.12); color: var(--yd-accent);
  border-radius: 999px; font-size: 11px; font-weight: 500;
  letter-spacing: 0.05em; padding: 3px 11px;
}
body.yd .dd-words { color: var(--ink-faint); font-size: 12px; }
body.yd .dd-edit {
  display: inline-flex; align-items: center; gap: 8px; margin: 30px 0 0;
  background: none; border: 1px solid var(--line); border-radius: 999px;
  padding: 9px 18px; cursor: pointer; color: var(--ink);
  font-family: var(--sans); font-size: 13px; font-weight: 500;
  transition: border-color 0.2s ease, color 0.2s ease;
}
body.yd .dd-edit:hover { border-color: var(--yd-accent); color: var(--yd-accent); }
body.yd .dd-empty { font-family: var(--serif); font-style: italic; color: var(--ink-faint); font-size: 16px; }

/* the reading detail staggers in when a card is selected */
body.yd #daysDetail > * { opacity: 0; transform: translateY(16px); }
body.yd #daysDetail.is-in > * {
  opacity: 1; transform: none;
  transition: opacity 0.5s ease, transform 0.62s cubic-bezier(0.16,0.84,0.3,1);
}
body.yd #daysDetail.is-in > *:nth-child(1) { transition-delay: 0.02s; }
body.yd #daysDetail.is-in > *:nth-child(2) { transition-delay: 0.10s; }
body.yd #daysDetail.is-in > *:nth-child(3) { transition-delay: 0.18s; }
body.yd #daysDetail.is-in > *:nth-child(4) { transition-delay: 0.26s; }
body.yd #daysDetail.is-in > *:nth-child(5) { transition-delay: 0.34s; }
@media (prefers-reduced-motion: reduce) {
  body.yd #daysDetail > * { opacity: 1; transform: none; }
}

/* fade at the bottom of the card list when it overflows */
body.yd .yd-days-fade {
  position: fixed; left: 0; bottom: 0; width: 50%; height: 130px;
  z-index: 10; pointer-events: none;
  background: linear-gradient(to top, var(--bg) 18%, transparent);
  opacity: 0; transition: opacity 0.3s ease;
}
body.yd .yd-days-fade.is-on { opacity: 1; }

/* create-book assembler sheet */
body.yd .assembler-book-row { transition: background 0.2s ease; }
body.yd .assembler-book-row:hover { background: rgba(217,177,145,0.06); }
body.yd .assembler-book-row.is-picked { background: rgba(217,177,145,0.10); }
/* picked checkbox: warm fill with a dark tick (was a white tick on white = invisible) */
body.yd .assembler-book-row.is-picked .assembler-check { border-color: var(--tan-accent); background: var(--tan-accent); }
body.yd .assembler-book-row.is-picked .assembler-check::after { border-color: var(--bg); }
/* book titles in the serif like the library */
body.yd .assembler-book-title { font-family: var(--serif); font-weight: 400; color: var(--write); }

/* day-picker rows (book range "pick days") — same invisible-tick fix: the
   base dark fix is gated on [data-theme="dark"], which the yd design isn't */
body.yd .pick-row:hover { background: rgba(217,177,145,0.06); }
body.yd .pick-row.is-picked { background: rgba(217,177,145,0.10); }
body.yd .pick-row.is-picked .pick-check { border-color: var(--tan-accent); background: var(--tan-accent); }
body.yd .pick-row.is-picked .pick-check::after { border-color: var(--bg); }

/* ---- people · calm tinted cards, like Yesterdays ---- */
body.yd #view-people .view-title { font-size: 28px; margin: 0 0 4px; }
body.yd #view-people .view-sub { margin: 0 0 22px; }
/* search field styled like the Yesterdays one */
body.yd #view-people .day-search {
  width: 100%; background: rgba(127,127,127,0.07); border: 1px solid transparent; border-radius: 12px;
  padding: 12px 16px; font-family: var(--sans); font-style: normal; font-size: 14px; color: var(--ink);
  margin: 0 0 18px; transition: background 0.2s ease, border-color 0.2s ease;
}
body.yd #view-people .day-search:hover { background: rgba(127,127,127,0.10); }
body.yd #view-people .day-search:focus { background: rgba(127,127,127,0.05); border-color: var(--yd-accent); outline: none; }

body.yd .people-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 22px; }
body.yd .person-card {
  background: var(--day-card); border: 1.5px solid transparent; border-radius: 18px;
  padding: 20px; gap: 16px; box-shadow: none; align-items: flex-start;
  color: var(--ink); font-family: var(--sans);
  transition: background 0.22s ease, border-color 0.22s ease, transform 0.22s ease, box-shadow 0.22s ease;
}
body.yd .person-card:hover {
  border-color: transparent; background: var(--day-card-hover);
  transform: translateY(-3px); box-shadow: 0 12px 30px rgba(0,0,0,0.10);
}
body.yd .person-card.is-me { border-color: var(--yd-accent); background: var(--day-card-active); }
body.yd .person-card .p-avatar {
  width: 52px; height: 52px; margin-bottom: 0; border: 1px solid var(--line);
  background-color: rgba(127,127,127,0.16);
}
body.yd .person-card-left { width: 52px; gap: 8px; }
body.yd .p-you {
  color: var(--yd-accent); font-size: 10px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
}
body.yd .p-name { font-family: var(--sans); font-weight: 600; font-size: 18px; color: var(--ink); margin: 0 0 2px; }
body.yd .p-rel { color: var(--yd-accent); font-style: normal; font-size: 13px; font-weight: 500; margin-bottom: 8px; }
body.yd .p-meta { color: var(--ink-soft); font-size: 12px; }
body.yd .p-desc {
  color: var(--ink-soft); font-size: 13px; line-height: 1.5; margin-top: 6px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
body.yd .p-aka { color: var(--ink-faint); font-size: 11px; margin-top: 6px; }
body.yd .p-status {
  display: inline-block; margin-top: 8px; background: rgba(127,127,127,0.14); color: var(--ink-soft);
  border-radius: 999px; font-size: 10px; font-weight: 600; letter-spacing: 0.04em; padding: 3px 9px;
}
body.yd .drag-handle { color: var(--ink-faint); cursor: grab; font-size: 14px; opacity: 0.5; transition: opacity 0.2s ease; }
body.yd .person-card:hover .drag-handle { opacity: 1; }
/* "+ add a person" as a dashed add-card spanning the row */
body.yd #addPerson.ghost-btn {
  display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%;
  background: transparent; border: 1.5px dashed var(--line); border-radius: 14px; padding: 16px;
  font-family: var(--sans); font-size: 13.5px; font-weight: 500; color: var(--ink-soft); cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}
body.yd #addPerson.ghost-btn:hover { border-color: var(--yd-accent); color: var(--ink); background: rgba(127,127,127,0.05); }

/* ---- library · calm tinted book cards in a grid, like Yesterdays ---- */
body.yd #view-library .view-title { font-size: 28px; margin: 0 0 4px; }
body.yd #view-library .view-sub { margin: 0 0 22px; }

/* book cards as a 2-col grid */
body.yd .library-list { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: start; }
body.yd .library-card {
  background: var(--day-card); border: 1.5px solid transparent; border-radius: 18px;
  padding: 20px; color: var(--ink); font-family: var(--sans); box-shadow: none;
  display: flex; flex-direction: column; align-items: flex-start; gap: 0;
  transition: background 0.22s ease, border-color 0.22s ease, transform 0.22s ease, box-shadow 0.22s ease;
}
body.yd .library-card:hover {
  border-color: transparent; background: var(--day-card-hover);
  transform: translateY(-3px); box-shadow: 0 12px 30px rgba(0,0,0,0.10);
}
body.yd .library-card.is-archived { opacity: 0.6; }
body.yd .library-card-info { width: 100%; }
body.yd .library-card-title {
  font-family: var(--sans); font-weight: 600; font-size: 17px; color: var(--ink);
  white-space: normal; line-height: 1.3;
}
body.yd .library-card-range { color: var(--yd-accent); font-size: 13px; font-weight: 500; margin-top: 6px; font-style: normal; }
body.yd .library-card-meta {
  color: var(--ink-faint); font-size: 11px; font-style: normal; margin-top: 6px;
  letter-spacing: 0.02em;
}
/* actions: quiet ghost buttons revealed on hover */
body.yd .library-card-actions { width: 100%; justify-content: flex-end; margin-top: 14px; gap: 6px; }
body.yd .library-card-actions .ghost-btn {
  background: none; border: none; color: var(--ink-faint); font-family: var(--sans);
  font-size: 12px; cursor: pointer; padding: 4px 10px; border-radius: 999px;
  opacity: 0; transition: opacity 0.2s ease, color 0.2s ease, background 0.2s ease;
}
body.yd .library-card:hover .ghost-btn { opacity: 1; }
body.yd .library-card-actions .ghost-btn:hover { color: var(--ink); background: rgba(127,127,127,0.12); }
body.yd .library-card-actions .ghost-btn.danger:hover { color: #e0533d; background: rgba(224,83,61,0.10); }

/* filters as a pill toggle, like the notes sort */
body.yd .library-filters {
  display: inline-flex; gap: 2px; background: rgba(127,127,127,0.10);
  border-radius: 999px; padding: 4px; margin-bottom: 22px;
}
body.yd .library-filters .seg {
  background: none; border: none; border-radius: 999px; padding: 6px 16px;
  font-family: var(--sans); font-size: 12px; font-weight: 600; color: var(--ink-soft);
  cursor: pointer; transition: background 0.2s ease, color 0.2s ease;
}
body.yd .library-filters .seg.is-on { background: var(--yd-accent); color: #fff; }
body.yd #libraryEmpty { color: var(--ink-faint); font-style: normal; }

/* ---- notes · calm tinted card grid + soft composer, like Yesterdays ---- */
body.yd #view-notes .view-title { font-size: 28px; margin: 0 0 4px; }
body.yd #view-notes .view-sub { margin: 0 0 22px; }

/* composer as one quiet tinted card */
body.yd .note-composer {
  background: var(--day-card); border: 1.5px solid transparent; border-radius: 18px;
  padding: 18px 20px; margin: 0 0 22px;
  transition: background 0.22s ease, border-color 0.22s ease;
}
body.yd .note-composer:focus-within { border-color: var(--yd-accent); background: var(--day-card-hover); }
body.yd .note-headline-input,
body.yd .note-body-input,
body.yd .note-tags-input {
  background: none; border: none; box-shadow: none; width: 100%; color: var(--ink);
  font-family: var(--sans); padding: 0;
}
body.yd .note-headline-input { font-size: 17px; font-weight: 600; margin-bottom: 6px; }
body.yd .note-body-input { font-size: 14px; line-height: 1.6; resize: none; }
body.yd .note-headline-input::placeholder,
body.yd .note-body-input::placeholder,
body.yd .note-tags-input::placeholder { color: var(--ink-faint); }
body.yd .note-composer-bar {
  display: flex; align-items: center; gap: 12px; margin-top: 12px;
  padding-top: 12px; border-top: 1px solid var(--line);
}
body.yd .note-tags-input { flex: 1; font-size: 13px; }
body.yd #saveNoteBtn.primary-btn {
  background: var(--yd-accent); color: #fff; border: none; border-radius: 999px;
  padding: 9px 18px; font-family: var(--sans); font-weight: 600; font-size: 13px;
  cursor: pointer; box-shadow: none; transition: opacity 0.2s ease, transform 0.2s ease;
}
body.yd #saveNoteBtn.primary-btn:hover { opacity: 0.9; transform: translateY(-1px); box-shadow: none; }

/* toolbar: sort as a pill toggle + tag chips */
body.yd .notes-toolbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap; margin: 0 0 18px;
}
body.yd .notes-sort-row { display: flex; align-items: center; gap: 10px; }
body.yd #view-notes .field-label { color: var(--ink-faint); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; }
body.yd #view-notes .segmented {
  background: rgba(127,127,127,0.10); border: none; border-radius: 999px;
  padding: 4px; display: inline-flex; gap: 2px;
}
body.yd #view-notes .seg {
  background: none; border: none; border-radius: 999px; padding: 6px 14px;
  font-family: var(--sans); font-size: 12px; font-weight: 600; color: var(--ink-soft);
  cursor: pointer; transition: background 0.2s ease, color 0.2s ease;
}
body.yd #view-notes .seg.is-on { background: var(--yd-accent); color: #fff; }
body.yd .notes-tag-filter { display: flex; flex-wrap: wrap; gap: 6px; }

/* the note cards themselves */
body.yd .notes-list { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: start; }
body.yd .note-card {
  background: var(--day-card); border: 1.5px solid transparent; border-radius: 18px;
  padding: 18px 20px; color: var(--ink); font-family: var(--sans); box-shadow: none;
  transition: background 0.22s ease, border-color 0.22s ease, transform 0.22s ease, box-shadow 0.22s ease;
}
body.yd .note-card:hover {
  border-color: transparent; background: var(--day-card-hover);
  transform: translateY(-3px); box-shadow: 0 12px 30px rgba(0,0,0,0.10);
}
body.yd .note-card-headline { font-family: var(--sans); font-weight: 600; font-size: 16px; color: var(--ink); }
body.yd .note-card-date {
  color: var(--ink-faint); font-size: 10px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
}
body.yd .note-card-body { font-family: var(--sans); color: var(--ink-soft); font-size: 13.5px; line-height: 1.55; margin-top: 10px; }
body.yd .note-card-meta { color: var(--ink-faint); }
body.yd .note-card-actions { gap: 4px; }
body.yd .note-action {
  background: none; border: none; color: var(--ink-faint); font-family: var(--sans);
  font-size: 12px; cursor: pointer; padding: 2px 6px; border-radius: 6px;
  opacity: 0; transition: opacity 0.2s ease, color 0.2s ease, background 0.2s ease;
}
body.yd .note-card:hover .note-action { opacity: 1; }
body.yd .note-action:hover { color: var(--ink); background: rgba(127,127,127,0.12); }
body.yd .note-action.danger-text:hover { color: #e0533d; }
body.yd .note-action.drag-handle { cursor: grab; }
body.yd .note-tag {
  display: inline-block; background: rgba(127,127,127,0.14); border: none; color: var(--ink-soft);
  border-radius: 999px; font-size: 10px; font-weight: 600; letter-spacing: 0.04em; padding: 3px 9px;
}
body.yd .notes-tag-filter .note-tag { cursor: pointer; transition: background 0.2s ease, color 0.2s ease; }
body.yd .notes-tag-filter .note-tag.is-on { background: var(--yd-accent); color: #fff; }

/* book reader */
body.yd .reader-bar { border-bottom: 1px solid var(--line); }
body.yd .book-body { font-family: var(--serif); color: var(--ink); }
body.yd .chapter-bar { background: var(--card); border: 1px solid var(--line); border-radius: 12px; }

/* ============================================================
   SPREAD / BOOK PREVIEW — a "dark book": dark pages with light type.
   These mirror the proven [data-theme="dark"] .spread-* values, which
   weren't applying because the yd design uses body.yd, not data-theme.
   Without this the book pages render white type on light paper text
   colours = invisible. Chrome (header/footer) is already dark via --paper.
   ============================================================ */
body.yd .spread-canvas {
  background: radial-gradient(circle at 50% 50%, #111009 0%, #0e0d0b 100%);
}
body.yd .spread-page { background: #27231e; }
body.yd .spread-running-rule { background: #3a342c; }
body.yd .spread-running-head,
body.yd .spread-chap-label,
body.yd .spread-inline-chap-label,
body.yd .spread-title-sub { color: #6b6055; }
body.yd .spread-title-text { color: #ece4d8; }
body.yd .spread-cover-inner { background: linear-gradient(160deg, #2a2218 0%, #1e1a14 100%); }
body.yd .spread-cover-title { color: #d4c4a8; }
body.yd .spread-page-text { color: #c8bfb0; }
body.yd .spread-page-num { border-top-color: #3a342c; color: #6b6055; }
/* the printed book keeps a real serif (the app flipped --serif to SF Pro) —
   a book is a printed artifact and reads better set in a serif */
body.yd .spread-page-text,
body.yd .spread-title-text,
body.yd .spread-title-sub,
body.yd .spread-cover-title,
body.yd .spread-cover-sub,
body.yd .spread-chap-label,
body.yd .spread-chap-title,
body.yd .spread-running-head,
body.yd .spread-inline-chap-label,
body.yd .spread-inline-chap-title,
body.yd .spread-page-num,
body.yd .book-body {
  font-family: "Newsreader", Georgia, "Times New Roman", serif;
}
/* spread footer controls — warm hover (active stays the white pill) */
body.yd .spread-zoom-btn:hover { border-color: var(--tan-accent); color: var(--tan-accent); }
body.yd .spread-spacing-btn:not(.is-on):hover { border-color: var(--tan-accent); color: var(--tan-accent); }
body.yd .spread-add-type:hover { background: rgba(217,177,145,0.08); color: var(--tan-accent); border-color: var(--tan-accent); }

/* modals / overlays */
body.yd .modal, body.yd .modal-card, body.yd .person-modal, body.yd .sheet, body.yd [class*="modal"] {
  background: var(--card); color: var(--ink); border-color: var(--line);
}
body.yd .modal-overlay, body.yd [class*="overlay"] { background: rgba(0,0,0,0.55); }

/* connection chips in the person editor */
body.yd .conn-tag {
  border-color: var(--line); transition: border-color 0.2s ease;
}
body.yd .conn-tag:hover { border-color: var(--tan-accent); }
body.yd .conn-name { color: var(--ink); }
body.yd .conn-label { color: var(--tan-accent); }
body.yd .conn-remove { color: var(--ink-faint); transition: color 0.2s ease; }
body.yd .conn-remove:hover { color: var(--tan-accent); }

/* ── custom connection picker ─────────────────────────────────────────────── */
body.yd .yd-pick {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  min-width: 180px;
}

body.yd .yd-pick-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 12px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 8px;
  color: var(--ink-soft, rgba(255,255,255,0.55));
  font-family: var(--serif);
  font-size: 14px;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
  text-align: left;
  width: 100%;
}

body.yd .yd-pick-btn:hover {
  background: rgba(255,255,255,0.07);
  border-color: rgba(255,255,255,0.18);
}

body.yd .yd-pick-btn[aria-expanded="true"] {
  background: rgba(255,255,255,0.07);
  border-color: rgba(255,255,255,0.22);
  border-radius: 8px 8px 0 0;
}

body.yd .yd-pick-label {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: inherit;
}

/* when a real value is selected, brighten the label */
body.yd .yd-pick[data-value]:not([data-value=""]) .yd-pick-label {
  color: var(--write, #fff);
}

body.yd .yd-pick-chevron {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  color: rgba(255,255,255,0.35);
  transition: transform 0.18s ease;
}

body.yd .yd-pick-btn[aria-expanded="true"] .yd-pick-chevron {
  transform: rotate(180deg);
}

body.yd .yd-pick-list {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 120;
  list-style: none;
  margin: 0;
  padding: 4px 0;
  background: #1c1814;
  border: 1px solid rgba(255,255,255,0.12);
  border-top: none;
  border-radius: 0 0 8px 8px;
  box-shadow: 0 12px 32px rgba(0,0,0,0.45);
  max-height: 220px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.12) transparent;
}

body.yd .yd-pick-item {
  padding: 9px 12px;
  font-family: var(--serif);
  font-size: 14px;
  color: rgba(255,255,255,0.75);
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease;
}

body.yd .yd-pick-item:hover {
  background: rgba(255,255,255,0.07);
  color: #fff;
}

/* connect (network stub) */
body.yd .stub-block {
  background: var(--card); border: 1px solid var(--line); border-radius: 14px;
  transition: border-color 0.2s ease;
}
body.yd .stub-block:hover { border-color: var(--tan-accent); }
body.yd .stub-block h3 {
  font-family: var(--serif); font-weight: 400; color: var(--write);
}
body.yd .stub-block p { color: var(--ink-soft); }
body.yd .stub-note { color: var(--tan-accent); opacity: 0.7; font-style: italic; }

/* ---- tree · mode tabs ---- */
body.yd .tree-mode-tabs {
  display: flex; gap: 6px; margin-bottom: 24px;
}
body.yd .tree-tab {
  font-family: var(--sans); font-size: 12px; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase;
  padding: 7px 16px; border-radius: 999px;
  border: 1.5px solid var(--line);
  color: var(--ink-soft); background: transparent;
  cursor: pointer; transition: border-color .18s, color .18s, background .18s;
}
body.yd .tree-tab:hover { border-color: var(--yd-accent); color: var(--ink); }
body.yd .tree-tab.is-active {
  border-color: var(--yd-accent); color: var(--ink);
  background: color-mix(in srgb, var(--yd-accent) 10%, transparent);
}

/* ---- family tree connector lines ---- */
body.yd .ft-line {
  stroke: var(--line); stroke-width: 1.5px; fill: none;
}
body.yd .ft-partner {
  stroke: var(--yd-accent); stroke-width: 1.5px; opacity: .6;
}
body.yd .ft-sibling {
  stroke: var(--ink-faint); stroke-width: 1px; stroke-dasharray: 4 3;
}
body.yd .ft-other {
  stroke: var(--line); stroke-width: 1px; stroke-dasharray: 2 4; opacity: .5;
}

/* ---- tree · soaring glass cards ---- */
@keyframes yd-float {
  0%,100% { transform: translate3d(0,    0,   0) rotate(0deg); }
  25%      { transform: translate3d( 1px, -7px, 0) rotate( 0.3deg); }
  50%      { transform: translate3d(-1px,-11px, 0) rotate(-0.2deg); }
  75%      { transform: translate3d( 2px, -6px, 0) rotate( 0.15deg); }
}

/* ---- tree: full-viewport infinite-canvas layout ---- */

/* Tree view fills the whole screen — no normal page scroll */
body.yd #view-tree {
  padding: 0;
  min-height: 0;
}
body.yd #view-tree.is-visible {
  height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Column loses its max-width and becomes a full-height flex container */
body.yd #view-tree .column--wide {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: none;
  height: 100%;
  padding: 0;
  margin: 0;
  overflow: hidden;
}

/* Header row (title + subtitle + tabs): fixed above the canvas, never scrolls */
body.yd #view-tree .view-title {
  font-size: 28px;
  margin: 0;
  padding: 64px 36px 2px;   /* 64px clears the fixed top nav */
  flex-shrink: 0;
}
body.yd #view-tree .view-sub {
  margin: 0;
  padding: 2px 36px 0;
  flex-shrink: 0;
}
body.yd #view-tree .tree-mode-tabs {
  padding: 10px 36px 10px;
  flex-shrink: 0;
}

/* Canvas: grows to fill remaining viewport, scrolls in ALL directions */
body.yd .tree-canvas {
  flex: 1;
  min-height: 0;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  position: relative;
  cursor: default;
}
body.yd .tree-canvas::-webkit-scrollbar { width: 4px; height: 4px; }
body.yd .tree-canvas::-webkit-scrollbar-thumb { background: rgba(100,130,255,0.25); border-radius: 2px; }

/* base glass card */
body.yd .tree-node {
  background: rgba(6, 10, 42, 0.52);
  backdrop-filter: blur(18px) saturate(1.6);
  -webkit-backdrop-filter: blur(18px) saturate(1.6);
  border: 1px solid rgba(90, 130, 255, 0.14);
  border-radius: 18px;
  padding: 12px 12px 11px; gap: 7px;
  box-shadow:
    0 4px 18px rgba(0, 5, 40, 0.45),
    0 1px 0 rgba(255,255,255,0.05) inset;
  z-index: 2;
  animation: yd-float var(--float-dur, 7s) ease-in-out infinite;
  animation-delay: var(--float-delay, 0s);
  will-change: transform;
  transition:
    background 0.3s ease,
    border-color 0.3s ease,
    box-shadow 0.3s ease,
    translate 0.3s ease;
}

/* hovered card — lift + vivid cool glass */
body.yd .tree-node:hover {
  animation-play-state: paused;
  translate: 0 -12px;
  background: linear-gradient(140deg,
    rgba(20, 60, 200, 0.82) 0%,
    rgba(80, 20, 180, 0.72) 100%);
  border-color: rgba(140, 180, 255, 0.80);
  box-shadow:
    0 28px 64px rgba(0, 10, 80, 0.75),
    0 0 0 1.5px rgba(160, 200, 255, 0.40),
    0 0 48px rgba(80, 120, 255, 0.35),
    0 0 80px rgba(100, 60, 255, 0.18),
    0 1px 0 rgba(255,255,255,0.18) inset;
  z-index: 10;
}

/* peer nodes — cards connected to the hovered one */
body.yd .tree-node.is-peer {
  animation-play-state: paused;
  translate: 0 -7px;
  background: linear-gradient(140deg,
    rgba(10, 35, 110, 0.76) 0%,
    rgba(45, 12, 100, 0.64) 100%);
  border-color: rgba(120, 165, 255, 0.55);
  box-shadow:
    0 18px 44px rgba(0, 8, 60, 0.65),
    0 0 0 1px rgba(140, 180, 255, 0.28),
    0 0 28px rgba(60, 100, 240, 0.22),
    0 1px 0 rgba(255,255,255,0.11) inset;
  z-index: 6;
}

body.yd .tree-avatar {
  width: 50px; height: 50px;
  border: 1.5px solid rgba(120, 150, 255, 0.2);
  background-color: rgba(60, 80, 180, 0.14);
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
body.yd .tree-node:hover .tree-avatar,
body.yd .tree-node.is-peer .tree-avatar {
  border-color: rgba(140, 180, 255, 0.5);
  box-shadow: 0 0 0 3px rgba(80, 120, 255, 0.14);
}
body.yd .tree-avatar.no-photo::before { font-family: var(--sans); font-weight: 600; color: rgba(200,210,255,0.5); }
body.yd .tree-label {
  font-family: var(--sans); font-weight: 600; font-size: 12.5px; color: var(--ink); max-width: 86px;
}
body.yd .tree-rel {
  color: rgba(140,175,255,0.85); font-style: normal; font-size: 10.5px;
  max-width: 86px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
body.yd .tree-status { color: var(--ink-faint); }

/* "me" / focused — accent glass */
body.yd .tree-node.is-me,
body.yd .tree-node.is-focused {
  background: linear-gradient(140deg,
    rgba(0, 2, 255, 0.22) 0%,
    rgba(0, 10, 80, 0.60) 100%);
  border-color: rgba(0, 2, 255, 0.55);
  box-shadow:
    0 8px 32px rgba(0, 2, 120, 0.5),
    0 0 0 1px rgba(60, 80, 255, 0.25),
    0 0 40px rgba(0, 2, 255, 0.12),
    0 1px 0 rgba(255,255,255,0.10) inset;
}
body.yd .tree-node.is-focused .tree-avatar {
  border-color: rgba(0, 2, 255, 0.7);
  box-shadow: 0 0 0 5px rgba(0, 2, 255, 0.14);
}

/* edges light up cool blue on hover */
body.yd .tree-edge--real { stroke: rgba(80, 120, 255, 0.25); stroke-width: 1.5px; }
body.yd .tree-edge--real.is-active {
  stroke: rgba(120, 170, 255, 0.75);
  stroke-width: 2px;
  filter: drop-shadow(0 0 4px rgba(80, 130, 255, 0.5));
}

/* back button → soft tinted pill */
body.yd .tree-back-btn {
  background: var(--day-card); border: 1.5px solid transparent; border-radius: 999px;
  color: var(--ink-soft); font-family: var(--sans); font-weight: 600; font-size: 12.5px; padding: 8px 14px;
  transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}
body.yd .tree-back-btn:hover { border-color: var(--yd-accent); color: var(--ink); background: var(--day-card-hover); }

/* ---- tree · light mode overrides ---- */
body.yd.light .tree-node {
  background: rgba(255, 255, 255, 0.58);
  border-color: rgba(80, 110, 200, 0.18);
  box-shadow:
    0 4px 18px rgba(60, 80, 140, 0.12),
    0 1px 0 rgba(255,255,255,0.9) inset;
}
body.yd.light .tree-node:hover {
  background: linear-gradient(140deg,
    rgba(180, 205, 255, 0.82) 0%,
    rgba(200, 175, 255, 0.68) 100%);
  border-color: rgba(100, 130, 240, 0.70);
  box-shadow:
    0 28px 64px rgba(60, 80, 180, 0.22),
    0 0 0 1.5px rgba(120, 150, 255, 0.45),
    0 0 48px rgba(100, 130, 255, 0.20),
    0 1px 0 rgba(255,255,255,0.9) inset;
}
body.yd.light .tree-node.is-peer {
  background: linear-gradient(140deg,
    rgba(210, 225, 255, 0.76) 0%,
    rgba(220, 210, 255, 0.62) 100%);
  border-color: rgba(110, 140, 230, 0.45);
  box-shadow:
    0 18px 44px rgba(60, 80, 160, 0.16),
    0 0 0 1px rgba(130, 160, 255, 0.30),
    0 1px 0 rgba(255,255,255,0.8) inset;
}
body.yd.light .tree-node.is-me,
body.yd.light .tree-node.is-focused {
  background: linear-gradient(140deg,
    rgba(140, 170, 255, 0.55) 0%,
    rgba(100, 130, 240, 0.42) 100%);
  border-color: rgba(80, 110, 240, 0.65);
  box-shadow:
    0 8px 32px rgba(60, 90, 200, 0.25),
    0 0 0 1px rgba(100, 130, 255, 0.35),
    0 1px 0 rgba(255,255,255,0.9) inset;
}
body.yd.light .tree-avatar {
  border-color: rgba(80, 110, 200, 0.22);
  background-color: rgba(120, 150, 220, 0.12);
}
body.yd.light .tree-node:hover .tree-avatar,
body.yd.light .tree-node.is-peer .tree-avatar {
  border-color: rgba(80, 110, 220, 0.55);
  box-shadow: 0 0 0 3px rgba(100, 130, 220, 0.18);
}
body.yd.light .tree-rel { color: rgba(60, 90, 180, 0.80); }
body.yd.light .tree-edge--real { stroke: rgba(80, 110, 200, 0.22); }
body.yd.light .tree-edge--real.is-active {
  stroke: rgba(80, 110, 240, 0.70);
  filter: drop-shadow(0 0 4px rgba(80, 120, 220, 0.40));
}

/* selection rewrite popover */
body.yd .sel-popover {
  background: var(--card); border: 1px solid var(--line); color: var(--ink);
  border-radius: 12px; box-shadow: 0 22px 60px rgba(0,0,0,0.5);
}
body.yd .sel-instruction { background: rgba(255,255,255,0.04); }
/* voice chips — warm on hover instead of a hard white fill */
body.yd .sel-voice-chip { transition: border-color 0.18s ease, color 0.18s ease, background 0.18s ease; }
body.yd .sel-voice-chip:hover {
  background: rgba(217,177,145,0.06); color: var(--tan-accent); border-color: var(--tan-accent);
}
/* the white "→" rewrite button — warm glow lift (can't brighten in dark) */
body.yd .sel-rewrite-btn { transition: box-shadow 0.2s ease, opacity 0.2s ease; }
body.yd .sel-rewrite-btn:hover { opacity: 1; box-shadow: 0 6px 20px rgba(217,177,145,0.3); }
/* "AI's take" — warm border + text on hover */
body.yd .sel-ai-btn:hover { border-color: var(--tan-accent); color: var(--tan-accent); }

/* "make a new book" entry in the library — accent pill */
body.yd .yd-make-book {
  display: inline-flex; align-items: center; gap: 6px; margin: 0 0 18px;
  padding: 10px 18px; border-radius: 999px;
  background: var(--yd-accent); color: #fff; border: none;
  text-transform: none; letter-spacing: 0; font-family: var(--sans); font-size: 14px; font-weight: 600;
  cursor: pointer; transition: opacity 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
body.yd .yd-make-book:hover { background: var(--yd-accent); color: #fff; opacity: 0.92; transform: translateY(-1px); box-shadow: none; }

/* "Create Book" assembler entry — a quiet tinted CTA card */
body.yd .create-book-row { margin-bottom: 22px; }
body.yd .create-book-btn {
  background: var(--day-card); border: 1.5px solid transparent; border-radius: 18px;
  padding: 18px 20px; transition: background 0.22s ease, border-color 0.22s ease, transform 0.22s ease, box-shadow 0.22s ease;
}
body.yd .create-book-btn:hover {
  border-color: var(--yd-accent); background: var(--day-card-hover);
  transform: translateY(-2px); box-shadow: 0 12px 30px rgba(0,0,0,0.10);
}
body.yd .create-book-icon { color: var(--yd-accent); }
body.yd .create-book-text strong { font-family: var(--sans); font-weight: 600; color: var(--ink); }
body.yd .create-book-text span { font-family: var(--sans); font-style: normal; color: var(--ink-soft); }
body.yd .create-book-arrow { color: var(--ink-faint); }
body.yd .create-book-btn:hover .create-book-arrow { color: var(--yd-accent); }

/* assembler panel as a tinted card */
body.yd .assembler-panel {
  background: var(--day-card); border: 1.5px solid transparent; border-radius: 18px; padding: 22px;
}
body.yd #view-library .assembler-actions .primary-btn {
  background: var(--yd-accent); color: #fff; border: none; border-radius: 999px; font-weight: 600;
}
body.yd #view-library #pageSizeSeg, body.yd #view-library .segmented {
  background: rgba(127,127,127,0.10); border: none; border-radius: 999px; padding: 4px; display: inline-flex; gap: 2px;
}
body.yd #view-library #pageSizeSeg .seg, body.yd #view-library .segmented .seg {
  background: none; border: none; border-radius: 999px; padding: 6px 14px; font-size: 12px; font-weight: 600; color: var(--ink-soft); cursor: pointer;
}
body.yd #view-library #pageSizeSeg .seg.is-on, body.yd #view-library .segmented .seg.is-on { background: var(--yd-accent); color: #fff; }

/* ============================================================
   PUBLISH · "Make a book" setup — each field a calm tinted card,
   options as accent pill-chips, generate as an accent pill.
   ============================================================ */
body.yd #bookSetup .view-title { font-size: 28px; margin: 0 0 4px; }
body.yd #bookSetup .view-sub { margin: 0 0 22px; }

/* each setup field becomes a quiet tinted card */
body.yd #view-book .field {
  background: var(--day-card); border: 1.5px solid transparent; border-radius: 18px;
  padding: 18px 20px; margin: 0 0 14px;
}
body.yd #view-book .field-label {
  display: block; color: var(--ink-faint); font-family: var(--sans);
  font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  margin: 0 0 12px;
}
body.yd #view-book .field-hint { color: var(--ink-soft); font-family: var(--sans); font-size: 12.5px; margin: 10px 0 0; }

/* segmented controls → wrapping accent pill-chips */
body.yd #view-book .segmented {
  display: flex; flex-wrap: wrap; gap: 8px;
  background: none; border: none; padding: 0; border-radius: 0;
}
body.yd #view-book .seg {
  background: rgba(127,127,127,0.08); border: 1.5px solid transparent; border-radius: 999px;
  padding: 8px 14px; font-family: var(--sans); font-size: 12.5px; font-weight: 600;
  color: var(--ink-soft); cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
body.yd #view-book .seg:not(.is-on):hover { background: rgba(127,127,127,0.14); color: var(--ink); }
body.yd #view-book .seg.is-on { background: var(--yd-accent); color: #fff; border-color: transparent; }
body.yd #view-book .seg-hint { opacity: 0.65; font-weight: 500; margin-left: 5px; }

/* the voice chips row sits with the same chip language */
body.yd #view-book .voice-chips-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
body.yd #view-book .ghost-btn.small {
  background: transparent; border: 1.5px dashed var(--line); border-radius: 999px;
  padding: 7px 13px; font-family: var(--sans); font-size: 12px; font-weight: 600; color: var(--ink-soft);
  cursor: pointer; transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}
body.yd #view-book .ghost-btn.small:hover { border-color: var(--yd-accent); color: var(--ink); }
body.yd #view-book .ghost-btn.small.danger { color: #e0584f; }

/* inputs + textareas → soft tinted fills */
body.yd #view-book .style-ref-input,
body.yd #view-book .voice-profile-textarea,
body.yd #view-book input[type="date"],
body.yd #view-book input[type="number"] {
  background: rgba(127,127,127,0.06); border: 1.5px solid transparent; border-radius: 12px;
  color: var(--ink); font-family: var(--sans); font-size: 14px; padding: 10px 14px;
  transition: border-color 0.2s ease, background 0.2s ease;
}
body.yd #view-book .style-ref-input:focus,
body.yd #view-book .voice-profile-textarea:focus,
body.yd #view-book input[type="date"]:focus,
body.yd #view-book input[type="number"]:focus { border-color: var(--yd-accent); outline: none; }

/* preview / example boxes → quiet sub-surfaces */
body.yd #view-book .tone-preview-box {
  background: rgba(127,127,127,0.06); border: 1.5px solid transparent; border-radius: 14px;
  padding: 14px 16px; margin-top: 12px;
}
body.yd #view-book .tone-preview-meta { color: var(--ink-faint); font-size: 11px; letter-spacing: 0.04em; }
body.yd #view-book .tone-preview-text { color: var(--ink-soft); font-family: var(--serif); line-height: 1.6; }
body.yd #view-book .tone-preview-row,
body.yd #view-book .voice-actions-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 12px; }

/* day-picker inside the range card */
body.yd #view-book .day-picker { margin-top: 14px; }
body.yd #view-book .day-picker-list {
  background: rgba(127,127,127,0.05); border-radius: 12px; padding: 6px;
}
body.yd #view-book .day-picker-head { color: var(--ink-soft); font-size: 12px; }
body.yd #view-book .day-picker-count { color: var(--ink); font-weight: 600; }

/* generate → full-width accent pill */
body.yd #generateBtn.primary-btn {
  width: 100%; background: var(--yd-accent); color: #fff; border: none; border-radius: 999px;
  padding: 14px; font-family: var(--sans); font-size: 15px; font-weight: 600; margin-top: 6px;
  cursor: pointer; transition: opacity 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
body.yd #generateBtn.primary-btn:not(:disabled):hover { background: var(--yd-accent); opacity: 0.92; transform: translateY(-1px); box-shadow: none; }
body.yd #view-book .book-status { color: var(--ink-soft); font-family: var(--sans); font-size: 13px; margin-top: 12px; }

/* login gate (Clerk) sits on the dark bg already; center it */
body.yd .auth-gate { background: var(--bg); }

/* ---------- entry intro (lines rise, curtain lifts off) ---------- */
.yd-intro {
  position: fixed; inset: 0; z-index: 100000;
  background: #292522;            /* covers everything; lifts off to reveal */
  overflow: hidden;
  will-change: transform;
}
.yd-intro-col { position: absolute; top: 0; bottom: 0; will-change: transform; }
.yd-intro-bar {
  position: absolute; top: 0; bottom: 0;
  background: #a89374;            /* warm lines */
  transform: scaleY(0);
  transform-origin: bottom center;
  will-change: transform;
}

/* ---------- light / dark toggle ---------- */
body.yd .yd-theme-toggle {
  background: none; border: none; padding: 0; margin: 0; cursor: pointer;
  color: var(--tan); display: inline-flex; align-items: center;
  transition: color 0.2s ease;
}
body.yd .yd-theme-toggle:hover { color: var(--tan-bright); }
body.yd .yd-ico-sm { display: inline-flex; align-items: center; }
body.yd .yd-ico-sm svg { display: block; width: 18px; height: 18px; }
body.yd .yd-ico-sm img { display: block; height: 18px; width: auto; }

/* ---------- LIGHT theme for the Yesterday design ---------- */
body.yd.light {
  /* Figma light mode (25:2919): warm grey paper + near-black text */
  --bg: #CFCAC6;
  --paper: #CFCAC6;
  --paper-rgb: 207, 202, 198;
  --paper-deep: #e7ddd3;
  --paper-top: #f3ece4;
  --card: #f3ece4;
  --ink: #121212;          /* light mode → near-black text */
  --ink-soft: rgba(18,18,18,0.55);
  --ink-faint: rgba(18,18,18,0.4);
  --line: rgba(18,18,18,0.18);
  --tan: #121212;          /* primary text / links / avatar */
  --tan-bright: #000000;
  --yd-accent: #FF8400;    /* brand accent (light default) — user-customisable */
  --tan-accent: var(--yd-accent);   /* legacy accent now follows the brand accent (orange in light) */
  --accent: #121212;
  --write: #121212;        /* the writing on light paper */
  --glass-from: rgba(255,255,255,0); --glass-via: rgba(255,255,255,0.22); --glass-to: rgba(255,255,255,0);
  --blue: rgba(111,93,68,0.18);   /* tonal logo tint on light */
}
/* near-black writing on the light paper (matches Figma #121212) */
body.yd.light .editor { color: #121212; }
body.yd.light .feeling-input, body.yd.light .tags-input { color: #121212; }
/* placeholders / prompt text: keep them dark on light paper for legible contrast */
body.yd.light #view-today .day-title::placeholder,
body.yd.light #view-today .editor::placeholder,
body.yd.light #view-today .feeling-input::placeholder,
body.yd.light #view-today .tags-input::placeholder { color: #121212; opacity: 0.72; }
body.yd.light .yd-divider span { color: #121212; }
body.yd.light .yd-divider::before, body.yd.light .yd-divider::after { background: rgba(18,18,18,0.22); }
/* avatar: dark circle with white initials (Figma) */
body.yd.light .yd-avatar { color: #fff; }
body.yd.light input, body.yd.light textarea, body.yd.light .day-search, body.yd.light .style-ref-input, body.yd.light .segmented {
  background: rgba(60,53,43,0.04);
}
/* the today editor inputs stay borderless/transparent in light too */
body.yd.light .day-title, body.yd.light .editor,
body.yd.light .feeling-input, body.yd.light .tags-input {
  background: none;
}

/* ============================================================
   TODAY · glass-box redesign (deep navy / blue logo / melty TODAYS)
   ============================================================ */
body.yd #view-today.is-visible {
  display: block;
  position: relative;
  overflow: hidden;                       /* the big logo bleeds off the edges */
}

/* giant superimposed logo — electric blue, bleeding off the left */
body.yd .yd-bigmark {
  position: absolute; z-index: 0; pointer-events: none;
  left: -10vw; top: 44%; transform: translateY(-50%) rotate(90deg);
  width: 106vh; height: 106vh; color: var(--blue); opacity: 0.1;
}
body.yd .yd-bigmark svg { display: block; width: 100%; height: 100%; }

/* glowing blue sphere at the logo's midpoint (Figma Ellipse 5).
   anchored by its centre (translate -50%) so the bright core stays on-screen
   at any width — the raw Figma offset put the core off the left edge. */
body.yd .yd-bluesphere {
  position: absolute; z-index: 1; pointer-events: none;
  width: 867px; height: 867px;
  left: 24%; top: 44%;        /* sit on the back logo's midpoint */
  transform: translate(-50%, -50%);
  background: radial-gradient(50% 50% at 50% 50%, #0F25CB 0%, rgba(15,27,117,0) 100%);
  mix-blend-mode: color-dodge;
}

/* soft dark glow behind the box (matches the Figma centre ellipse) */
body.yd .yd-glow {
  position: absolute; z-index: 0; pointer-events: none;
  left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 130vh; height: 130vh; border-radius: 50%;
  background: radial-gradient(circle, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0) 70%);
}

/* the liquid-glass box holding the writing */
body.yd #view-today .paper {
  position: relative; z-index: 2;
  margin: 0 auto; max-width: 722px; width: 100%;
  padding: 40px;
  min-height: 0;          /* hug the content (base .paper forces 100vh) */
  display: block;
  /* DARK mode — Figma Frame 12: dark translucent glass, 16px radius. the blue
     sphere behind glows through the translucency. */
  background: rgba(4, 8, 23, 0.4);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 16px;
  box-shadow: 0 0 50px rgba(0,0,0,0.25);
  /* liquid glass: heavy frost + saturation + a gentle refraction wobble */
  -webkit-backdrop-filter: blur(16px) saturate(1.6) url(#yd-liquid);
  backdrop-filter: blur(16px) saturate(1.6) url(#yd-liquid);
}
/* a soft specular sheen sweeping across the glass */
body.yd #view-today .paper::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: -1;
  border-radius: inherit;
  background: linear-gradient(125deg,
    rgba(255,255,255,0.12) 0%, rgba(255,255,255,0) 30%,
    rgba(255,255,255,0) 70%, rgba(255,255,255,0.07) 100%);
}
/* LIGHT mode — the light frosted gradient, 24px radius (Figma light Frame 12) */
body.yd.light #view-today .paper {
  background: linear-gradient(180deg, rgba(245,245,247,0) 0%, #F5F5F7 50%, rgba(245,245,247,0) 100%);
  border-color: rgba(255,255,255,0.45);
  border-radius: 24px;
}

/* the writing inside the glass — handwritten label (blue in dark mode) */
body.yd #view-today .editor-head span {
  font-family: "Rock Salt", var(--serif); font-weight: 400;
  font-size: 15px; letter-spacing: 0; color: #fff;
}
/* light mode keeps the label text dark; the mark follows the brand accent */
body.yd.light #view-today .editor-head span:not(.yd-mark) { color: var(--write); }
body.yd #view-today .day-title { color: var(--write); }
body.yd #view-today .editor,
body.yd #view-today .hl-backdrop { color: var(--write); }
body.yd #view-today .day-date { color: var(--write); opacity: 0.55; }
body.yd #view-today .feeling-input,
body.yd #view-today .tags-input { color: var(--write); }

/* ---- active nav item: the melty mark behind the label (activebackgroundnav.svg)
   recoloured per mode via a mask: beige in dark, blue in light ---- */
body.yd #nav .nav-link, body.yd #ydBottom .nav-link { position: relative; }
body.yd #nav .nav-link.is-active::before,
body.yd #ydBottom .nav-link.is-active::before {
  content: "";
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 64px; height: 76px;
  -webkit-mask: url("activebackgroundnav.svg") center / contain no-repeat;
  mask: url("activebackgroundnav.svg") center / contain no-repeat;
  background-color: var(--yd-accent);    /* follows the brand accent */
  pointer-events: none; z-index: -1;
  animation: yd-glow-breathe 3.4s ease-in-out infinite;
}
/* the header mark follows the brand accent in both modes */
@keyframes yd-glow-breathe {
  0%, 100% { opacity: 0.8; }
  50% { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  body.yd .nav-link.is-active::before { animation: none; }
}

/* ---- autosave line flanked by the sun marks (below the glass box) ---- */
body.yd .yd-autosave {
  display: flex; align-items: center; gap: 20px;
}
body.yd .yd-autosave .yd-mark { width: 32px; height: 24.66px; color: var(--tan); flex-shrink: 0; opacity: 0.8; }
body.yd .yd-autosave-text {
  flex: 1 1 0; text-align: center; font-family: var(--sans);
  font-size: 14px; font-weight: 300; color: var(--ink); opacity: 0.85;
}

/* ---- vertical caption on the right edge ---- */
body.yd .yd-lastsaved {
  position: absolute; right: 24px; top: 50%;
  transform: translateY(-50%) rotate(90deg); transform-origin: center;
  font-family: var(--sans); font-size: 10px; font-weight: 500; letter-spacing: 0.1em;
  color: var(--ink); opacity: 0.6; white-space: nowrap; pointer-events: none; z-index: 2;
}

/* ---- today glass box: title+date row, sun dividers, actions ---- */
body.yd #view-today .day-head {
  display: flex; align-items: flex-end; gap: 24px; width: 100%; margin: 40px 0 0;
}
/* breathing room between the headline/date row and the writing */
/* breathing room between the headline/date row and the writing — the margin
   lives on the tidy-wrap (the highlight backdrop is absolute inside it, so a
   margin on the textarea alone leaves the painted text 48px too high) */
body.yd #view-today .tidy-wrap:has(> .editor) { margin: 48px 0 0; }
body.yd #view-today .editor:not(.tidy-wrap .editor) { margin: 48px 0 0; }
/* login lives in the bottom-left now — keep the avatar proportionate down there */
body.yd #ydBottom .yd-avatar { width: 32px; height: 32px; font-size: 12px; }
body.yd #view-today .day-title { margin: 0; flex: 1 1 0; min-width: 0; }
body.yd #view-today .day-date {
  display: block; flex: 0 0 auto; margin: 0; text-align: right; white-space: nowrap;
  font-style: normal; text-transform: uppercase; font-size: 12px; letter-spacing: 0.04em;
  color: var(--write); opacity: 0.5;
}

/* sun-mark dividers: line — logo — line (2px lines) */
body.yd #view-today .yd-divider { gap: 12px; margin: 36px 0 0; }
body.yd #view-today .yd-divider::before,
body.yd #view-today .yd-divider::after { height: 2px; background: var(--write); opacity: 0.28; }
body.yd #view-today .yd-divider .yd-mark { width: 30px; height: 23px; flex-shrink: 0; color: var(--write); }

/* actions row */
body.yd .yd-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin: 36px 0 0; }
body.yd .yd-action {
  display: flex; flex-direction: row; justify-content: flex-end; align-items: center; gap: 24px;
  background: #fff; border: none; border-radius: 0; padding: 4px 8px; margin: 0; cursor: pointer;
  font-family: var(--sans); font-size: 14px; font-weight: 500; color: #000;
  transition: background 0.2s ease, color 0.2s ease;
}
body.yd .yd-action:hover { background: #ececec; color: #000; }
body.yd .yd-action .yd-plus { width: 16px; height: 16px; display: inline-flex; flex-shrink: 0; color: #000; }
body.yd .yd-action .yd-plus svg { display: block; width: 100%; height: 100%; }

/* ============================================================
   SCROLL REVEAL — day rows + cards fade and rise as they enter.
   Hidden state lives behind no-preference so reduced-motion users
   never see a blank list (reveal.js also bails for them).
   ============================================================ */
@media (prefers-reduced-motion: no-preference) {
  body.yd .yd-reveal { opacity: 0; transform: translateY(16px); }
  body.yd .yd-reveal.is-in {
    opacity: 1; transform: none;
    transition: opacity 0.55s ease, transform 0.55s cubic-bezier(0.16, 0.84, 0.30, 1);
    transition-delay: var(--rd, 0s);
  }
}

/* ============================================================
   RESPONSIVE — the nav is built wide; give it room below desktop
   ============================================================ */
/* tighten the nav before things get cramped */
@media (max-width: 1240px) {
  body.yd #nav { gap: 16px; padding: 24px 24px 0; }
  body.yd .yd-zone { gap: 16px; }
  body.yd #ydBottom { gap: 16px; padding: 0 24px 24px; }
}
/* the centered wordmark would collide with the link clusters — retire it,
   the left "MENU" + section words still anchor the bar */
@media (max-width: 1080px) {
  body.yd #nav .yd-zone.center { display: none; }
  body.yd #nav { justify-content: space-between; }
}
/* phones: the 8-item bar can't fit — collapse to a minimal bar (☰ menu +
   theme toggle) and let the full-screen menu carry navigation */
@media (max-width: 720px) {
  body.yd #nav {
    flex-wrap: nowrap; gap: 0; padding: 16px 18px 0; justify-content: space-between;
    overflow: visible;
  }
  body.yd #nav .yd-zone.left,
  body.yd #nav .yd-zone.right { flex: 0 0 auto; gap: 0; align-items: center; }
  /* the inline section links live in the ☰ menu on phones */
  body.yd #nav .nav-link { display: none; }
  body.yd #nav .yd-menu { font-size: 13px; }

  /* bottom bar: one calm row, smaller, kept clear of content */
  body.yd #ydBottom {
    flex-wrap: wrap; gap: 10px 14px; padding: 14px 18px;
    justify-content: space-between;
  }
  body.yd #ydBottom .yd-zone { gap: 12px; align-items: center; }
  body.yd #ydBottom .yd-static,
  body.yd #ydBottom .nav-link { font-size: 11px; }
  body.yd #ydBottom .save-whisper { display: none; }

  body.yd #view-today .paper { max-width: none; padding: 28px 20px; }

  /* the title is an input — sharing the row with the date squeezes it and the
     text clips. stack them so the title gets the full width */
  body.yd #view-today .day-head { flex-direction: column; align-items: flex-start; gap: 6px; }
  body.yd #view-today .day-date { text-align: left; }
}

/* phones: the 2-col card grids overflow — collapse to a single column */
@media (max-width: 700px) {
  body.yd .people-grid,
  body.yd .notes-list,
  body.yd .library-list { grid-template-columns: 1fr; }
  /* let cards shrink with the column instead of forcing the track wider */
  body.yd .person-card,
  body.yd .note-card,
  body.yd .library-card { min-width: 0; }

}

/* the full relationship ring can be wider than the screen below desktop — let
   it pan horizontally (renderFullTree widens the canvas + centres on "me").
   overflow-y stays hidden so the column doesn't trap vertical scroll (the page
   scrolls vertically instead) */
@media (max-width: 1024px) {
  body.yd #view-tree .column--wide {
    overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  body.yd #view-tree .column--wide::-webkit-scrollbar { display: none; }
}

/* ============================================================
   TODAY — V2 layout (Figma 22:2451 dark / 25:2919 light):
   no glass card, the writing sits in a centred column with
   "Write the today" on the left, and the big blue logo bleeds
   off the bottom-left corner.
   ============================================================ */
body.yd #view-today.is-visible { overflow: visible; }

/* big blue logo — solid vivid blue in BOTH modes (var(--blue) goes tan in
   light), bottom-left corner, smaller, superimposed */
body.yd .yd-bigmark {
  position: fixed; z-index: 0; pointer-events: none;
  left: -3vw; bottom: -9vw; top: auto;
  width: min(560px, 40vw); height: min(560px, 40vw);
  color: #0002FF; opacity: 1;
  transform: rotate(135deg);
}
body.yd.light .yd-bigmark { color: #FF8400; }   /* orange superimposed logo on light */
/* the static logo is replaced by the gravity playground (gravity.js) */
body.yd .yd-bigmark { display: none; }

/* gravity playground — shapes that fall + get shoved by the cursor, left of the divider */
body.yd .yd-gravity { position: fixed; inset: 0; z-index: 0; pointer-events: none; }
body.yd .yd-grav-shape {
  position: absolute; top: 0; left: 0; color: var(--yd-accent);
  will-change: transform; pointer-events: none;
}
body.yd .yd-grav-shape svg { display: block; width: 100%; height: 100%; }

/* the stage fills the space between the fixed navs: content top, autosave bottom */
body.yd #view-today .yd-today-stage {
  position: relative; z-index: 2;
  display: flex; flex-direction: column; justify-content: space-between;
  min-height: calc(100vh - 280px);
}

/* two columns split by a centre divider:
   left = header + action buttons · right = the writing */
body.yd #view-today .yd-today-row {
  display: flex; align-items: stretch; gap: 40px; width: 100%; margin: 0;
  flex: 1 1 auto;   /* grow to fill the stage so the divider runs full height */
}
/* left column — stays put (sticky) while the right writing scrolls */
body.yd #view-today .yd-today-side {
  flex: 1 1 0; min-width: 0;
  display: flex; flex-direction: column; gap: 44px;
  position: sticky; top: 120px; align-self: flex-start;
}
/* the actions become a stack of white CTAs on the left */
body.yd #view-today .yd-today-side .yd-actions {
  flex-direction: column; align-items: flex-start; gap: 10px; margin: 0;
}
/* the centre divider line — orange, full height */
body.yd #view-today .yd-today-divider {
  flex: 0 0 8px; align-self: stretch; background: transparent;
  position: relative;
}
/* the visible stroke runs the full height of the screen (100vh), centred.
   it's a root-level child of #view-today so it sits ABOVE the top/bottom
   fade gradients (z10) rather than being trapped in the stage's stacking context */
body.yd .yd-divider-stroke {
  position: fixed; top: 8px; bottom: 8px; left: 50%; transform: translateX(-50%);
  width: 8px; background: #fff; z-index: 11; pointer-events: none;
}
/* concave fillets — round the page corners where the stroke meets the frame */
body.yd .yd-fil { position: absolute; width: 18px; height: 18px; pointer-events: none; }
body.yd .yd-fil-tl { left: -18px; top: 0;    background: radial-gradient(circle at bottom left,  transparent 18px, #fff 18.5px); }
body.yd .yd-fil-tr { left: 8px;   top: 0;    background: radial-gradient(circle at bottom right, transparent 18px, #fff 18.5px); }
body.yd .yd-fil-bl { left: -18px; bottom: 0; background: radial-gradient(circle at top left,     transparent 18px, #fff 18.5px); }
body.yd .yd-fil-br { left: 8px;   bottom: 0; background: radial-gradient(circle at top right,    transparent 18px, #fff 18.5px); }
/* on today the top/bottom fades only cover the right (scrolling) half —
   the left panel is fixed, so it shouldn't fade */
body.yd:has(#view-today.is-visible) .lib-reader-fade-top,
body.yd:has(#view-today.is-visible) .lib-reader-fade-bottom { left: 50%; }
/* on Yesterdays the detail (right) is sticky too — fade only the right half */
body.yd:has(#view-days.is-visible) .lib-reader-fade-top,
body.yd:has(#view-days.is-visible) .lib-reader-fade-bottom { left: 50%; }
/* AI badge sitting on the divider line — circle matches the divider colour,
   icon is white */
body.yd #view-today .yd-divider-ai {
  position: fixed; top: 150px; left: 50%; transform: translateX(-50%);
  width: 40px; height: 40px; border-radius: 50%; border: none; padding: 0; cursor: pointer;
  background: var(--bg); color: var(--ink); z-index: 12; pointer-events: auto;
  display: flex; align-items: center; justify-content: center;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
body.yd #view-today .yd-divider-ai:hover {
  transform: translateX(-50%) scale(1.1);
  box-shadow: 0 4px 18px rgba(0,0,0,0.18);
}
body.yd #view-today .yd-divider-ai.is-working { animation: yd-ai-pulse 1.4s ease-in-out infinite; }
body.yd #view-today .yd-divider-ai svg { display: block; width: 22px; height: 22px; }
@keyframes yd-ai-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.55; } }
/* the AI lives on the divider now — hide the editor's own tidy star */
body.yd #view-today .yd-today-main .tidy-star { display: none !important; }
/* the tidy menu, relocated to open right beside the badge on the line */
body.yd .tidy-menu--divider {
  position: fixed; top: 146px; left: calc(50% + 30px); right: auto; bottom: auto;
  margin: 0; z-index: 12;
}
/* the badge is hidden in the stacked layout (no vertical line there) */
@media (max-width: 1120px) { body.yd #view-today .yd-divider-ai { display: none; } }
/* the writing sits on the right of the divider */
/* main column stays an equal half (keeps the divider centred); the writing
   inside is capped + left-aligned so it sits right next to the divider */
body.yd #view-today .yd-today-main { flex: 1 1 0; min-width: 0; display: block; }
/* right content fills its full column so the date, word count and pills
   align to the same right edge as the right-side nav */

/* writing-column rhythm — 40px between blocks (no card, no divider) */
body.yd #view-today .yd-today-main .day-head { margin: 0; }
body.yd #view-today .yd-today-main .tidy-wrap:has(> .editor),
body.yd #view-today .yd-today-main .editor:not(.tidy-wrap .editor) { margin: 40px 0 0; }
body.yd #view-today .yd-today-main .feeling { margin: 40px 0 0; }
body.yd #view-today .yd-today-main .yd-actions { margin: 40px 0 0; }

/* type: 28px title, 24px body */
body.yd #view-today .day-title { font-size: 28px; line-height: 32px; }
body.yd #view-today .editor,
body.yd #view-today .hl-backdrop { font-size: 24px; line-height: 1.35; }

/* autosave — pinned 24px above the bottom nav (its visual top is 60px up),
   centred text flanked by the sun marks at the edges */


/* TODAY V2 — narrow screens: stack the actions above the writing, drop the
   vertical divider for a horizontal one */
@media (max-width: 1120px) {
  body.yd #view-today .yd-today-row { flex-direction: column; align-items: stretch; gap: 28px; }
  /* stacked layout: the side sits ON TOP of the writing, so it must NOT stay
     sticky (otherwise it pins at top:120px and overlaps the scrolling text) */
  body.yd #view-today .yd-today-side { flex: none; gap: 28px; position: static; top: auto; }
  body.yd #view-today .yd-today-side .yd-actions { flex-direction: row; flex-wrap: wrap; gap: 16px; }
  body.yd #view-today .yd-today-divider { flex: none; height: 8px; align-self: stretch; background: #fff; border-radius: 4px; }
  body.yd .yd-divider-stroke { display: none; }
  body.yd #view-today .yd-today-main { flex: none; width: 100%; max-width: 680px; }
  /* Yesterdays stacks too: cards on top, the reading detail below */
  body.yd #view-days .yd-days-row { flex-direction: column; align-items: stretch; gap: 28px; }
  body.yd #view-days .yd-days-side,
  body.yd #view-days .yd-days-main { flex: none; width: 100%; position: static; }
  body.yd #view-days .yd-days-divider { flex: none; height: 8px; align-self: stretch; background: #fff; border-radius: 4px; }
}

/* ---- page-wipe transition (nav clicks): one warm line expands + lifts ---- */
.yd-pagewipe {
  position: fixed; inset: 0; z-index: 9000;
  background: #a89374;
  transform: translateX(0);
  pointer-events: none;
  will-change: transform;
  /* thin leading-edge line */
  box-shadow: -2px 0 0 0 #a89374, 2px 0 12px 0 rgba(168,147,116,0.35);
}
/* ---- staggered content entrance after the wipe (blur + lift + scale) ---- */
.yd-anim-in { opacity: 0; transform: translateY(22px) scale(0.985); filter: blur(7px); will-change: opacity, transform, filter; }
.yd-anim-in--go {
  opacity: 1; transform: none; filter: blur(0);
  transition:
    opacity 0.58s cubic-bezier(0.22, 0.68, 0.18, 1) var(--yd-d, 0ms),
    transform 0.74s cubic-bezier(0.16, 0.84, 0.30, 1) var(--yd-d, 0ms),
    filter 0.58s ease var(--yd-d, 0ms);
}
@media (prefers-reduced-motion: reduce) {
  .yd-anim-in, .yd-anim-in--go { opacity: 1 !important; transform: none !important; filter: none !important; transition: none !important; }
}

/* ============================================================
   RIGHT-SIDE TRAY · settings / help / about
   ============================================================ */
body.yd .yd-tray { position: fixed; inset: 0; z-index: 100001; visibility: hidden; }
body.yd .yd-tray.is-open { visibility: visible; }
body.yd .yd-tray-scrim {
  position: absolute; inset: 0; background: rgba(0,4,21,0.55);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  opacity: 0; transition: opacity 0.4s ease;
}
body.yd.light .yd-tray-scrim { background: rgba(120,110,100,0.4); }
body.yd .yd-tray.is-open .yd-tray-scrim { opacity: 1; }
body.yd .yd-tray-panel {
  position: absolute; top: 0; right: 0; height: 100%; width: min(440px, 92vw);
  background: var(--bg); border-left: 1px solid var(--line);
  display: flex; flex-direction: column;
  transform: translateX(100%); transition: transform 0.44s cubic-bezier(0.62,0,0.30,1);
  box-shadow: -24px 0 60px rgba(0,0,0,0.35);
}
body.yd .yd-tray.is-open .yd-tray-panel { transform: translateX(0); }
body.yd .yd-tray-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 28px 28px 18px; flex-shrink: 0;
}
body.yd .yd-tray-title { font-family: var(--sans); font-size: 22px; font-weight: 500; margin: 0; color: var(--ink); }
body.yd .yd-tray-close {
  background: none; border: none; color: var(--ink-soft); font-size: 26px; line-height: 1;
  cursor: pointer; padding: 0 4px; transition: color 0.2s ease;
}
body.yd .yd-tray-close:hover { color: var(--ink); }
body.yd .yd-tray-body { padding: 8px 28px 36px; overflow-y: auto; flex: 1 1 auto; }

/* sections inside the tray — each one a calm tinted card, like Yesterdays */
body.yd .yd-set-section {
  margin: 0 0 14px; background: var(--day-card); border: 1.5px solid transparent;
  border-radius: 18px; padding: 18px 20px; transition: background 0.22s ease;
}
body.yd .yd-set-label {
  font-family: var(--sans); font-size: 11px; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--ink-faint); margin: 0 0 14px;
}
body.yd .yd-set-sub { font-family: var(--sans); font-size: 13.5px; color: var(--ink-soft); line-height: 1.55; margin: 0 0 16px; }

/* segmented (theme) — filled-track pill toggle like the notes sort */
body.yd .yd-seg {
  display: inline-flex; gap: 2px; border: none; overflow: visible;
  background: rgba(127,127,127,0.12); border-radius: 999px; padding: 4px;
}
body.yd .yd-seg button {
  background: none; border: none; cursor: pointer; padding: 7px 18px; border-radius: 999px;
  font-family: var(--sans); font-size: 12px; font-weight: 600; color: var(--ink-soft);
  transition: background 0.2s ease, color 0.2s ease;
}
body.yd .yd-seg button.is-on { background: var(--yd-accent); color: #fff; }

/* accent swatches */
body.yd .yd-swatches { display: flex; flex-wrap: wrap; gap: 12px; }
body.yd .yd-swatch {
  width: 34px; height: 34px; border-radius: 50%; cursor: pointer; border: none; padding: 0;
  position: relative; transition: transform 0.18s ease;
  box-shadow: inset 0 0 0 1px rgba(127,127,127,0.25);
}
body.yd .yd-swatch:hover { transform: scale(1.12); }
body.yd .yd-swatch.is-on::after {
  content: ""; position: absolute; inset: -5px; border-radius: 50%;
  border: 2px solid var(--yd-accent);
}

/* typography options — a 2-col grid of small tinted tiles */
body.yd .yd-fonts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
body.yd .yd-font {
  text-align: left; background: rgba(127,127,127,0.06); border: 1.5px solid transparent; border-radius: 12px;
  padding: 12px 14px; cursor: pointer; color: var(--ink); font-size: 16px;
  transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease;
}
body.yd .yd-font:hover { background: rgba(127,127,127,0.12); transform: translateY(-2px); }
body.yd .yd-font.is-on { border-color: var(--yd-accent); background: rgba(127,127,127,0.10); }
body.yd .yd-font small { display: block; font-family: var(--sans); font-size: 11px; color: var(--ink-faint); margin-top: 2px; letter-spacing: 0.04em; }

/* tray buttons */
body.yd .yd-set-btn {
  width: 100%; text-align: left; background: rgba(127,127,127,0.06); border: 1.5px solid transparent;
  border-radius: 12px; padding: 13px 16px; cursor: pointer; color: var(--ink);
  font-family: var(--sans); font-size: 14px; font-weight: 600;
  transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}
body.yd .yd-set-btn:hover { background: rgba(127,127,127,0.12); }
body.yd .yd-set-btn--danger { color: #e0584f; }
body.yd .yd-set-btn--danger:hover { background: rgba(224,88,79,0.10); }

/* ---- HELP tutorial — calm tinted stage card, like Yesterdays ---- */
body.yd .yd-tut { display: flex; flex-direction: column; gap: 0; }
body.yd .yd-tut-stage {
  height: 210px; border-radius: 18px; border: 1.5px solid transparent;
  background: var(--day-card); position: relative; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
body.yd .yd-tut-art { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; }
body.yd .yd-tut-art.is-on { display: flex; }
/* the words sit in their own quiet card under the stage */
body.yd .yd-tut-text {
  margin: 12px 0 0; background: var(--day-card); border: 1.5px solid transparent;
  border-radius: 18px; padding: 18px 20px;
}
body.yd .yd-tut-step-title { font-family: var(--sans); font-size: 19px; font-weight: 600; color: var(--ink); margin: 0 0 8px; }
body.yd .yd-tut-step-body { font-family: var(--sans); font-size: 14px; line-height: 1.6; color: var(--ink-soft); margin: 0; }
body.yd .yd-tut-nav { display: flex; align-items: center; justify-content: space-between; margin-top: 26px; }
body.yd .yd-tut-dots { display: flex; gap: 8px; }
body.yd .yd-tut-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--line); transition: background 0.25s ease, transform 0.25s ease; }
body.yd .yd-tut-dot.is-on { background: var(--yd-accent); transform: scale(1.3); }
body.yd .yd-tut-btn {
  background: var(--yd-accent); color: #fff; border: none; border-radius: 999px;
  padding: 9px 20px; cursor: pointer; font-family: var(--sans); font-size: 13px; font-weight: 600;
  transition: opacity 0.2s ease;
}
body.yd .yd-tut-btn:hover { opacity: 0.88; }
body.yd .yd-tut-btn--ghost { background: none; color: var(--ink-soft); }
body.yd .yd-tut-btn--ghost:disabled { opacity: 0.3; cursor: default; }

/* tutorial art motion (runs only while its step is active) */
body.yd .yd-tut-line { height: 6px; border-radius: 3px; background: var(--yd-accent); opacity: 0.85; margin: 7px 0; transform-origin: left; }
body.yd .yd-tut-art.is-on .yd-tut-line { animation: yd-tut-write 2.4s ease-in-out infinite; }
body.yd .yd-tut-art.is-on .yd-tut-line:nth-child(2) { animation-delay: 0.25s; }
body.yd .yd-tut-art.is-on .yd-tut-line:nth-child(3) { animation-delay: 0.5s; }
@keyframes yd-tut-write { 0% { transform: scaleX(0); } 45% { transform: scaleX(1); } 80% { transform: scaleX(1); } 100% { transform: scaleX(0); } }
body.yd .yd-tut-node { fill: var(--yd-accent); }
body.yd .yd-tut-art.is-on .yd-tut-node { animation: yd-tut-pop 2.6s ease-in-out infinite; transform-origin: center; transform-box: fill-box; }
body.yd .yd-tut-art.is-on .yd-tut-node:nth-child(2) { animation-delay: 0.3s; }
body.yd .yd-tut-art.is-on .yd-tut-node:nth-child(3) { animation-delay: 0.6s; }
@keyframes yd-tut-pop { 0%,100% { transform: scale(0.6); opacity: 0.4; } 50% { transform: scale(1); opacity: 1; } }
body.yd .yd-tut-edge { stroke: var(--yd-accent); stroke-width: 2; opacity: 0.5; stroke-dasharray: 60; }
body.yd .yd-tut-art.is-on .yd-tut-edge { animation: yd-tut-draw 2.6s ease-in-out infinite; }
@keyframes yd-tut-draw { 0% { stroke-dashoffset: 60; } 50% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 0; } }
body.yd .yd-tut-page {
  width: 54px; height: 70px; border-radius: 4px; background: var(--yd-accent); position: absolute;
  box-shadow: 0 4px 14px rgba(0,0,0,0.25);
}
body.yd .yd-tut-art.is-on .yd-tut-page { animation: yd-tut-stack 2.8s ease-in-out infinite; }
body.yd .yd-tut-art.is-on .yd-tut-page:nth-child(2) { animation-delay: 0.35s; }
body.yd .yd-tut-art.is-on .yd-tut-page:nth-child(3) { animation-delay: 0.7s; }
@keyframes yd-tut-stack {
  0% { transform: translate(40px, 30px) rotate(12deg); opacity: 0; }
  45% { transform: translate(0,0) rotate(-4deg); opacity: 1; }
  100% { transform: translate(0,0) rotate(-4deg); opacity: 1; }
}

/* about — the brand story in one calm tinted card, like Yesterdays */
body.yd .yd-about {
  background: var(--day-card); border: 1.5px solid transparent; border-radius: 18px;
  padding: 26px 24px 22px;
}
body.yd .yd-about p { font-family: var(--sans); font-size: 14.5px; line-height: 1.7; color: var(--ink-soft); margin: 0 0 16px; }
body.yd .yd-about p:first-of-type { font-size: 17px; line-height: 1.55; color: var(--ink); }
body.yd .yd-about p:first-of-type b { font-weight: 600; }
body.yd .yd-about p:last-child {
  margin: 18px 0 0; padding-top: 16px; border-top: 1px solid var(--line);
  font-size: 12px; letter-spacing: 0.02em;
}
/* the sun mark in a soft accent-tinted disc */
body.yd .yd-about .yd-about-mark {
  width: 64px; height: 64px; border-radius: 50%; margin: 0 0 18px;
  display: flex; align-items: center; justify-content: center;
  color: var(--yd-accent); background: color-mix(in srgb, var(--yd-accent) 14%, transparent);
}
body.yd .yd-about .yd-about-mark svg { width: 34px; height: 27px; }

/* ============================================================
   PAGE TURN · right-edge grab handle + the peeling page
   ============================================================ */
body.yd .yd-peel-zone {
  position: fixed; top: 0; right: 0; width: 22px; height: 100%;
  z-index: 10002; cursor: grab;
}
body.yd .yd-peel-zone:active { cursor: grabbing; }
/* a soft, organic bulge of the white border that eases toward the cursor */
body.yd .yd-peel-grip {
  position: fixed; right: 0; width: 8px; height: 104px;
  background: #fff; z-index: 10003;
  /* asymmetric radii → a soft droplet pulling out of the edge */
  border-radius: 80px 0 0 80px / 60px 0 0 60px;
  pointer-events: none; opacity: 0; transform: translateX(10px);
  box-shadow: -8px 0 28px rgba(0,0,0,0.16);
  transition: opacity 0.4s ease,
              transform 0.6s cubic-bezier(0.22,1,0.36,1),
              width 0.55s cubic-bezier(0.22,1,0.36,1),
              background 0.3s ease;
}
body.yd .yd-peel-grip.is-on { opacity: 1; transform: translateX(0); width: 24px; }
body.yd .yd-peel-grip.is-grab { width: 34px; }
body.yd .yd-peel-grip.is-pull { width: 46px; background: var(--yd-accent); }
/* the page that peels in from the right as you drag — white */
body.yd .yd-peel-page {
  position: fixed; top: 0; right: 0; height: 100%; width: 0;
  background: #fff; border-radius: 22px 0 0 22px;
  z-index: 9000; pointer-events: none; overflow: hidden;
  box-shadow: -24px 0 56px rgba(0,0,0,0.24);
}
body.yd .yd-peel-label {
  position: absolute; left: 30px; top: 50%; transform: translateY(-50%);
  font-family: var(--sans); font-size: 14px; font-weight: 600; color: #111;
  white-space: nowrap; opacity: 0; transition: opacity 0.2s ease;
}
@media (prefers-reduced-motion: reduce) {
  body.yd .yd-peel-grip { transition: opacity 0.2s ease; }
}

/* ============================================================
   HOME / LANDING (Figma: Home Light Mode)
   full-screen, no scroll — one page per section, collage animates in
   ============================================================ */
body.yd #view-home.view {
  position: fixed; inset: 0; display: none; flex-direction: column;
  padding: 40px; background: var(--bg); z-index: 30;   /* equal margin top / sides / bottom */
  min-height: 0; overflow: hidden;
}
body.yd #view-home.is-visible { display: flex; }
/* the home brings its own nav — hide the app chrome + edge fades while it shows */
body.yd:has(#view-home.is-visible) #nav,
body.yd:has(#view-home.is-visible) #ydBottom,
body.yd:has(#view-home.is-visible) .lib-reader-fade-top,
body.yd:has(#view-home.is-visible) .lib-reader-fade-bottom { display: none !important; }

/* ---- top marketing nav ---- */
body.yd .home-nav { display: flex; align-items: center; justify-content: space-between; flex: 0 0 auto; }
body.yd .home-nav-left { display: flex; align-items: center; gap: 26px; }
body.yd .home-nav-right { display: flex; align-items: center; gap: 24px; }
body.yd .home-logo { width: 28px; height: 22px; color: var(--yd-accent); display: inline-flex; }
body.yd .home-logo svg { width: 100%; height: 100%; display: block; }
body.yd .home-tab, body.yd .home-static {
  background: none; border: none; padding: 0; cursor: pointer;
  font-family: var(--sans); font-size: 12px; font-weight: 600; letter-spacing: 0.09em;
  text-transform: uppercase; color: var(--ink); opacity: 0.7; transition: opacity 0.2s ease, color 0.2s ease;
}
body.yd .home-tab:hover, body.yd .home-static:hover { opacity: 1; }
body.yd .home-tab.is-on { opacity: 1; color: var(--yd-accent); }
body.yd .home-login { color: var(--ink); }
body.yd .home-theme { background: none; border: none; padding: 0; cursor: pointer; display: inline-flex; }
body.yd .home-theme img { height: 18px; width: auto; display: block; }

/* ---- body: section list (left) + collage (right) ---- */
body.yd .home-body { position: relative; flex: 1 1 auto; min-height: 0; margin-top: 38px; }

/* the big section list, top-left */
body.yd .home-sections { position: absolute; left: 0; top: 4px; width: 48%; z-index: 3; display: flex; flex-direction: column; }
body.yd .home-section {
  background: none; border: none; padding: 0; text-align: left; cursor: pointer;
  font-family: var(--sans); font-weight: 500;
  font-size: clamp(20px, 1.95vw, 30px); line-height: 1.78;
  color: var(--ink); opacity: 0.26; transition: opacity 0.28s ease, color 0.28s ease;
  width: fit-content;
}
body.yd .home-section:hover { opacity: 0.6; }
body.yd .home-section.is-on { opacity: 1; }

/* the right content layer (fills the body; section list sits on top, left) */
body.yd .home-right { position: absolute; inset: 0; z-index: 2; }

/* --- STORY: copy + date (top-right) + collage --- */
body.yd .home-copy { position: absolute; right: 0; top: 0; width: 47%; z-index: 3; }
body.yd .home-text {
  font-family: var(--sans); font-size: 24px; line-height: 26px; font-weight: 400; color: var(--ink);
  margin: 0; max-width: 812px;
}
body.yd .home-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
body.yd .home-chip {
  font-family: var(--sans); font-size: 12px; font-weight: 500; color: var(--ink);
  background: rgba(127,127,127,0.12); border-radius: 999px; padding: 5px 13px;
}
body.yd .home-date {
  display: block; margin-top: 20px; font-family: var(--sans); font-size: 11px; font-weight: 600;
  letter-spacing: 0.10em; text-transform: uppercase; color: var(--yd-accent);
}
body.yd .home-collage { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
body.yd .home-photo { position: absolute; margin: 0; overflow: hidden; border-radius: 4px; background: rgba(127,127,127,0.1); }
body.yd .home-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
body.yd .home-photo--main { left: 33%; top: 15%; width: 45%; height: 84%; z-index: 1; }
body.yd .home-photo--a    { left: 71%; top: 56%; width: 16%; height: 36%; z-index: 2; }
body.yd .home-photo--b    { left: 82.5%; top: 42%; width: 16%; height: 36%; z-index: 3; box-shadow: -14px 0 34px rgba(0,0,0,0.18); }
/* entrance — the three photos pop in one by one */
body.yd .home-photo { opacity: 0; transform: translateY(26px) scale(0.8); filter: blur(6px); }
body.yd .home-right.is-in .home-photo {
  opacity: 1; transform: none; filter: blur(0);
  transition: opacity 0.3s ease, transform 0.4s cubic-bezier(0.34,1.56,0.64,1), filter 0.3s ease;
}
body.yd .home-right.is-in .home-photo--a { transition-delay: 0.12s; }
body.yd .home-right.is-in .home-photo--b { transition-delay: 0.24s; }
body.yd .home-chips, body.yd .home-date { opacity: 0; transform: translateY(10px); }
body.yd .home-right.is-in .home-chips, body.yd .home-right.is-in .home-date {
  opacity: 1; transform: none; transition: opacity 0.4s ease 0.1s, transform 0.4s ease 0.1s;
}

/* --- PRICING: real product cards --- */
body.yd .home-pricing { position: absolute; right: 0; top: 0; width: 66%; z-index: 3; }
body.yd .home-pricing-intro { max-width: 640px; margin: 0 0 28px; }
body.yd .home-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; align-items: start; }
body.yd .home-card {
  position: relative; background: rgba(127,127,127,0.06); border: 1px solid var(--line);
  border-radius: 16px; padding: 22px 20px; display: flex; flex-direction: column;
  opacity: 0; transform: translateY(22px);
}
body.yd .home-right.is-in .home-card { opacity: 1; transform: none; transition: opacity 0.4s ease, transform 0.5s cubic-bezier(0.2,0.8,0.2,1); }
body.yd .home-right.is-in .home-card:nth-child(2) { transition-delay: 0.08s; }
body.yd .home-right.is-in .home-card:nth-child(3) { transition-delay: 0.16s; }
body.yd .home-card.is-featured { background: color-mix(in srgb, var(--yd-accent) 8%, transparent); border-color: var(--yd-accent); }
body.yd .home-card-flag {
  position: absolute; top: -10px; left: 20px; background: var(--yd-accent); color: #fff;
  font-family: var(--sans); font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  padding: 3px 10px; border-radius: 999px;
}
body.yd .home-card-name { font-family: var(--sans); font-size: 14px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink); }
body.yd .home-card-price { font-family: var(--sans); font-size: 34px; font-weight: 600; color: var(--ink); margin: 8px 0 18px; line-height: 1; }
body.yd .home-card-price span { font-size: 13px; font-weight: 400; color: var(--ink-soft); margin-left: 6px; letter-spacing: 0; }
body.yd .home-card-feats { list-style: none; margin: 0 0 20px; padding: 0; display: flex; flex-direction: column; gap: 9px; flex: 1 1 auto; }
body.yd .home-card-feats li { font-family: var(--sans); font-size: 13px; line-height: 1.35; color: var(--ink-soft); padding-left: 18px; position: relative; }
body.yd .home-card-feats li::before { content: ""; position: absolute; left: 0; top: 7px; width: 7px; height: 7px; border-radius: 50%; background: var(--yd-accent); opacity: 0.6; }
body.yd .home-card-cta {
  background: none; border: 1px solid var(--ink); border-radius: 999px; padding: 10px 0; cursor: pointer;
  font-family: var(--sans); font-size: 13px; font-weight: 600; color: var(--ink);
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
body.yd .home-card-cta:hover { background: var(--ink); color: var(--bg); }
body.yd .home-card.is-featured .home-card-cta { background: var(--yd-accent); border-color: var(--yd-accent); color: #fff; }
body.yd .home-card.is-featured .home-card-cta:hover { opacity: 0.9; }

/* --- CTA: try it out --- */
body.yd .home-cta { position: absolute; right: 0; top: 8%; width: 50%; z-index: 3; }
body.yd .home-cta-head { font-family: var(--sans); font-size: clamp(40px, 4.4vw, 68px); font-weight: 600; letter-spacing: -0.02em; color: var(--ink); margin: 0; line-height: 1.02; }
body.yd .home-cta-text { font-family: var(--sans); font-size: 20px; line-height: 1.4; color: var(--ink); opacity: 0.8; margin: 22px 0 30px; max-width: 560px; }
body.yd .home-cta-btn {
  background: var(--yd-accent); border: none; border-radius: 999px; padding: 15px 30px; cursor: pointer;
  font-family: var(--sans); font-size: 15px; font-weight: 600; color: #fff;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
body.yd .home-cta-btn:hover { transform: translateY(-2px); box-shadow: 0 10px 30px color-mix(in srgb, var(--yd-accent) 30%, transparent); }
body.yd .home-cta { opacity: 0; transform: translateY(20px); }
body.yd .home-right.is-in .home-cta { opacity: 1; transform: none; transition: opacity 0.5s ease, transform 0.6s cubic-bezier(0.2,0.8,0.2,1); }

/* ---- bottom line ---- */
body.yd .home-foot {
  flex: 0 0 auto; display: flex; align-items: center; gap: 24px; justify-content: center;
  position: relative;
}
body.yd .home-foot .yd-mark { width: 28px; height: 22px; color: var(--ink); flex-shrink: 0; }
body.yd .home-foot .yd-mark svg { width: 100%; height: 100%; display: block; }
body.yd .home-foot-text {
  flex: 1 1 0; text-align: center; font-family: var(--sans); font-size: 13px; color: var(--ink); opacity: 0.85;
}

/* ---- big orange sunburst, bottom-left (1:1 with Figma: x72 y524 w767 h591
       inside the 1728×1117 frame → 4.17vw / 44.4vw, anchored to the bottom) ---- */
body.yd .home-sun {
  position: fixed; left: 4.17vw; bottom: 0; width: 44.4vw; height: auto;
  color: var(--yd-accent); z-index: 5; pointer-events: none;
}
body.yd .home-sun svg { width: 100%; height: auto; display: block; }
/* on the story sections the sunburst sits ON TOP of the collage; on pricing /
   try-it it drops behind so the cards + CTA stay readable */
body.yd #view-home:has(.kind-pricing) .home-sun,
body.yd #view-home:has(.kind-cta) .home-sun { z-index: 1; }

/* narrow screens: list above, content below */
@media (max-width: 1080px) {
  /* the home is a fixed, overflow-hidden box — let it scroll and let the body
     grow to its content so tall sections aren't clipped */
  body.yd #view-home.view { overflow-y: auto; -webkit-overflow-scrolling: touch; }
  body.yd .home-body { margin-top: 24px; flex: 0 0 auto; min-height: auto; }
  body.yd .home-right { position: static; }
  body.yd .home-sections { position: static; width: 100%; }
  body.yd .home-copy, body.yd .home-pricing, body.yd .home-cta { position: static; width: 100%; margin-top: 22px; }
  body.yd .home-collage { display: none; }
  body.yd .home-cards { grid-template-columns: 1fr 1fr; }
  body.yd .home-nav-left .home-tab { display: none; }
  /* content sits above the sunburst; the foot clears the cards */
  body.yd .home-body { position: relative; z-index: 1; }
  body.yd .home-foot { position: relative; z-index: 1; margin-top: 30px; }
  /* tame the sunburst into a faint bottom-corner watermark behind the content
     (it was a fixed full-size hero that overlapped the stacked cards) */
  body.yd .home-sun { position: fixed; bottom: 0; left: 4.17vw; width: 38vw; z-index: 0; opacity: 0.35; }
  body.yd #view-home:has(.kind-pricing) .home-sun,
  body.yd #view-home:has(.kind-cta) .home-sun { z-index: 0; }
}
/* phones: a single column of pricing cards + a touch more breathing room */
@media (max-width: 700px) {
  body.yd #view-home.view { padding: 24px; }
  body.yd .home-cards { grid-template-columns: 1fr; }
  body.yd .home-sun { width: 44vw; }
}
/* before login the app views are hidden — but the home landing must show */
body.yd.auth-gated #view-home.is-visible { display: flex !important; }