@keyframes riseIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes riseInY { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
@keyframes popIn { from { transform: scale(0.6); opacity: 0.4; } to { transform: scale(1); opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; animation-delay: 0s !important; }
}

:root {
  --page-w: 480px;
  --page-h: 760px;
  --title-h: 40px;
  --dot-color: #c9c2b4;
  --paper: #fdfaf3;
  --ink: #2b2b2b;

  /* --- Book Nook sibling palette --- */
  --bg: #f7efe6;
  --surface: #fffaf5;
  --surface-alt: #f1e5dd;
  --text: #665a78;
  --border: #ead8cf;
  --gold: #c18d5b;
  --gold-light: #d8ad72;
  --teal: #6fae98;
  --teal-light: #a9d8c7;
  --rose: #a8798d;
  --rose-light: #d9a3a9;
  --lavender: #d6c8e5;
  --glass: rgba(255,250,245,0.85);
  --r-lg: 18px;
  --r-sm: 12px;
  --shadow-lg: 0 24px 70px rgba(102,90,120,0.14);
  --shadow-sm: 0 8px 22px rgba(102,90,120,0.12);
  --font-heading: 'Cormorant Garamond', 'Playfair Display', Georgia, serif;
  --font-body: 'Lora', Georgia, serif;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--text);
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  padding: 16px;
  gap: 16px;
}

#appMain { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 16px; min-width: 0; }

/* --- Side toolbar: a narrow icon rail plus a sliding tool drawer next to
   it, instead of a top bar that wraps into many rows on narrow screens. --- */
#toolbar {
  position: sticky; top: 16px;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 8px;
  flex-shrink: 0;
}
#modeRail {
  display: flex; flex-direction: column; align-items: stretch; gap: 10px;
  background: var(--glass); padding: 10px 6px; border-radius: 999px;
  border: 1px solid var(--border); box-shadow: var(--shadow-sm);
  width: 56px;
}
.rail-sep { height: 1px; background: var(--border); margin: 0 4px; }
#modeRail .modes, #modeRail .history, #modeRail .zoom { display: flex; flex-direction: column; gap: 6px; }
#modeRail button {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  width: 44px; height: 44px; padding: 0; border: 1px solid transparent; border-radius: 14px;
  background: transparent; color: var(--text); cursor: pointer; font-size: 18px;
  transition: background 0.15s, transform 0.15s;
}
#modeRail button span { font-size: 8.5px; font-weight: 600; letter-spacing: 0.02em; }
#modeRail button:hover { background: var(--surface-alt); }
#modeRail button:active { transform: scale(0.92); }
#modeRail button.active { background: var(--rose); color: #fff; }
#modeRail .zoom button { font-size: 14px; height: 36px; }
#zoomReset { font-size: 10.5px !important; }

#toolFlyout {
  display: flex; flex-direction: column; gap: 8px;
  background: var(--glass); border: 1px solid var(--border); border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm); padding: 12px; width: 230px;
  transition: width 0.25s ease, padding 0.25s ease, opacity 0.2s ease, margin 0.25s ease;
  max-height: var(--page-h); overflow-x: hidden; overflow-y: auto;
}
body[data-mode="pan"] #toolFlyout, body[data-view="month"] #toolFlyout,
body[data-view="notebooks"] #toolFlyout, body[data-view="cover"] #toolFlyout,
body[data-view="toc"] #toolFlyout {
  width: 0; padding: 0; border: none; opacity: 0; margin-left: -8px;
}
.tb-group { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; max-width: 100%; }
.drawtool-row { display: flex; flex-wrap: wrap; gap: 6px; width: 100%; }
.drawtool-row .drawtool-btn { flex: 0 0 auto; width: 44px; padding: 8px 0; }
#toolbar button, #toolbar select {
  padding: 7px 12px; border: 1px solid var(--border); border-radius: 999px;
  background: var(--surface); color: var(--text); cursor: pointer;
  font: inherit; font-size: 13.5px; transition: background 0.15s, border-color 0.15s, transform 0.15s;
}
#toolbar button:hover { border-color: var(--gold-light); background: #fff; }
#toolbar button:active { transform: scale(0.97); }
#toolbar button.active { background: var(--rose); color: #fff; border-color: var(--rose); }
#toolbar input[type=color] { width: 32px; height: 32px; border: none; border-radius: 999px; cursor: pointer; }
#toolbar input[type=range] { width: 80px; accent-color: var(--rose); }

/* --- Slim date bar (replaces the old flat "nav" row) --- */
#dateBar {
  display: flex; align-items: center; gap: 8px; flex-wrap: nowrap;
  background: var(--glass); padding: 8px 12px; border-radius: 999px;
  border: 1px solid var(--border); box-shadow: var(--shadow-sm);
  width: min(100%, 480px); position: relative;
}
#dateLabel { font-family: var(--font-heading); font-size: 14px; font-weight: 600; padding: 4px 6px; flex: 1; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#dateBarMore {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 30;
  display: grid; grid-template-columns: 1fr 1fr; gap: 5px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-sm);
  box-shadow: var(--shadow-lg); padding: 8px; width: min(240px, 84vw);
  max-height: 70vh; overflow-y: auto;
  animation: riseInY 0.18s ease;
}
#dateBarMore[hidden] { display: none; }
#dateBarMore #pageTagsDisplay, #dateBarMore #syncStatus { grid-column: 1 / -1; text-align: center; }
body:not([data-view="cover"]) #decorateCoverBtn { display: none; }
body[data-view="cover"] #backToCoverBtn { display: none; }
#syncStatus { font-size: 12px; color: var(--gold); }
#dateBar button {
  padding: 7px 12px; border: 1px solid var(--border); border-radius: 999px;
  background: var(--surface); color: var(--text); cursor: pointer;
  font: inherit; font-size: 13.5px; transition: background 0.15s, border-color 0.15s, transform 0.15s;
}
#dateBarMore button {
  padding: 7px 6px; border: 1px solid var(--border); border-radius: 999px;
  background: var(--surface); color: var(--text); cursor: pointer;
  font: inherit; font-size: 11.5px; transition: background 0.15s, border-color 0.15s, transform 0.15s;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#dateBar button:hover, #dateBarMore button:hover { border-color: var(--gold-light); background: #fff; }
#dateBar button:active, #dateBarMore button:active { transform: scale(0.92); }

.only-draw, .only-text, .only-stickers, .only-select, .only-layout { display: none; flex-direction: column; align-items: stretch; }
body[data-mode="draw"] .only-draw { display: flex; animation: riseInY 0.2s ease; }
body[data-mode="text"] .only-text { display: flex; animation: riseInY 0.2s ease; }
body[data-mode="stickers"] .only-stickers { display: flex; animation: riseInY 0.2s ease; }
body[data-mode="select"] .only-select { display: flex; animation: riseInY 0.2s ease; }
body[data-mode="layout"] .only-layout { display: flex; animation: riseInY 0.2s ease; }
body[data-view="notebooks"] #dateBar, body[data-view="cover"] #dateBar { display: none; }
body[data-view="month"] #modeRail .modes, body[data-view="notebooks"] #modeRail .modes,
body[data-view="cover"] #modeRail .modes, body[data-view="toc"] #modeRail .modes { display: none; }

.drawtool-btn.active[data-tool="erase"] { background: #d9534f; border-color: #d9534f; }
.drawtool-btn.active[data-tool="highlighter"] { background: #f0c94a; border-color: #f0c94a; }

.crossout-btn { text-decoration: line-through; text-decoration-thickness: 2px; }
.tape-picker { display: flex; gap: 5px; flex-wrap: wrap; }
.tape-swatch {
  width: 34px; height: 20px; border-radius: 4px; border: 1px solid var(--border);
  background-size: cover; cursor: pointer; padding: 0; transition: transform 0.15s;
}
.tape-swatch:hover { transform: translateY(-2px); }
.design-swatch { width: 34px; height: 34px; border-radius: 8px; }
.recolor-row {
  display: flex; gap: 5px; flex-wrap: wrap; align-items: center;
  width: 100%; padding-bottom: 8px; margin-bottom: 8px; border-bottom: 1px dashed var(--border);
}
.recolor-row input[type=color] { width: 30px; height: 30px; border: none; border-radius: 8px; padding: 0; cursor: pointer; }
#undoBtn:disabled, #redoBtn:disabled, #deleteSelectedBtn:disabled { opacity: 0.35; cursor: default; }
.hourgrid-toggle { display: flex; align-items: center; gap: 4px; font-size: 13px; padding: 0 6px; }

/* --- Mobile/tablet: rail moves to a fixed bottom bar, flyout becomes a
   horizontally-scrollable strip that slides up above it. --- */
@media (max-width: 760px) {
  body { flex-direction: column; align-items: stretch; padding: 12px; padding-bottom: 96px; }
  #appMain { align-items: center; }
  #toolbar {
    position: fixed; left: 0; right: 0; bottom: 0; top: auto; z-index: 40;
    flex-direction: column-reverse; gap: 0; width: 100%;
  }
  #modeRail {
    flex-direction: row; align-items: center; justify-content: flex-start;
    width: 100%; border-radius: 0; gap: 4px; padding: 6px 8px;
    border-left: none; border-right: none; border-bottom: none;
    overflow-x: auto; -webkit-overflow-scrolling: touch; touch-action: pan-x;
  }
  #modeRail .modes, #modeRail .history, #modeRail .zoom { flex-direction: row; flex-shrink: 0; }
  .rail-sep { width: 1px; height: 26px; margin: 0 2px; flex-shrink: 0; }
  #modeRail button { width: 34px; height: 34px; flex-shrink: 0; }
  #modeRail button span { display: none; }
  #modeRail .zoom button { height: 30px; }
  #toolFlyout {
    flex-direction: row; flex-wrap: nowrap; overflow-x: auto; width: auto;
    border-radius: 0; border-left: none; border-right: none; border-bottom: none;
    max-width: none; -webkit-overflow-scrolling: touch; touch-action: pan-x;
  }
  body[data-mode="pan"] #toolFlyout, body[data-view="month"] #toolFlyout,
  body[data-view="notebooks"] #toolFlyout, body[data-view="cover"] #toolFlyout,
  body[data-view="toc"] #toolFlyout {
    width: auto; height: 0; padding: 0; opacity: 0; margin: 0;
  }
  /* Desktop sets align-items:stretch so buttons fill the width of a
     vertical (column) toolbar. On mobile the direction flips to a
     horizontal row, but without re-setting align-items too, "stretch" now
     means full HEIGHT — every plain button (Clear ink, Clear page, Delete
     selected, ...) blew up into a tall pill spanning the whole flyout,
     while only the drawtool icon grid stayed normal size (it lays itself
     out internally, so the outer stretch didn't reach its buttons). */
  .only-draw, .only-text, .only-stickers, .only-select, .only-layout {
    flex-direction: row; flex-wrap: nowrap; align-items: center;
  }
  /* Without flex-shrink:0, a cramped row squeezes every child to fit
     instead of scrolling — that's what compressed the 9-icon drawtool-row
     down to a narrow column that then wrapped into a tall 2x5 grid. The
     flyout already scrolls horizontally (#toolFlyout, above), so let
     things keep their natural size and overflow sideways instead. */
  .only-draw > *, .only-text > *, .only-stickers > *, .only-select > *, .only-layout > * {
    flex-shrink: 0;
  }
  .drawtool-row { width: auto; flex-wrap: nowrap; }
  #dateBar { width: 100%; }
}

/* Menu sizing only — separate from the 760px breakpoint above (which
   reflows the whole toolbar for phones specifically) so tablets also get
   a slimmer "..." menu without triggering the phone-only toolbar layout. */
@media (max-width: 900px) {
  /* The "..." overflow menu was a fixed-width 2-column grid of pill buttons
     at desktop size on every screen — on a phone/tablet that's both too
     wide (crowds the edge) and too tall (up to 70vh of buttons). Drop to a
     single column of compact, fixed-height rows so nothing wraps or
     visually overlaps, and cap it well short of the viewport. */
  #dateBarMore {
    grid-template-columns: 1fr; width: min(190px, 60vw);
    max-height: 55vh; gap: 3px; padding: 6px;
  }
  #dateBarMore button {
    border-radius: var(--r-sm); text-align: left; padding: 8px 10px; font-size: 12.5px;
  }
  #dateBarMore #pageTagsDisplay, #dateBarMore #syncStatus { grid-column: 1; }

  /* Same crowding on the cover's tool tabs (Stickers/Tape/Design/Draw/Text)
     and its own options menu — shrink to fit rather than wrap into a messy
     multi-row stack. */
  .cover-tool-tabs { gap: 4px; }
  .cover-tool-tab { padding: 6px 8px; font-size: 12px; }
  #coverMenu { min-width: 140px; }
  #coverMenu button { padding: 6px 8px; font-size: 12.5px; }
}

/* --- Font picker (custom, so previews can render in-font) --- */
.font-picker { position: relative; }
.font-picker-btn { min-width: 140px; text-align: left; }
.font-picker-menu {
  position: absolute; top: 100%; left: 0; z-index: 20;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-sm);
  box-shadow: var(--shadow-lg);
  max-height: 260px; overflow-y: auto; width: 220px; padding: 6px;
}
.font-option {
  display: block; width: 100%; text-align: left; border: none; background: none;
  padding: 6px 8px; border-radius: 8px; font-size: 16px; cursor: pointer; color: var(--text);
}
.font-option:hover { background: var(--surface-alt); }

/* --- Responsive scaling: the page/cover are fixed-size (480x760) coordinate
   spaces that ink/stickers/layout math all depend on, so on narrow screens
   we scale the whole box down visually via JS-computed transform rather than
   rewriting everything to fluid units. Each stage reserves exactly the
   scaled footprint so it never overflows or leaves a layout gap. --- */
.responsive-stage { display: none; position: relative; margin: 0 auto; }
.responsive-stage > * { position: absolute; top: 0; left: 0; transform-origin: top left; }
body[data-view="day"] #pageStage { display: block; animation: riseIn 0.3s ease; }
body[data-view="cover"] #coverStage { display: block; animation: riseIn 0.35s ease; }

/* --- Viewport (zoom/pan) --- */
#pageViewport {
  width: var(--page-w);
  height: var(--page-h);
  overflow: hidden;
  touch-action: none;
  position: relative;
}
body[data-mode="pan"] #pageViewport { cursor: grab; }
#pageViewport #page {
  transform-origin: 0 0;
  box-shadow: var(--shadow-lg);
}

/* --- Daily page --- */
#page {
  position: relative;
  width: var(--page-w);
  height: var(--page-h);
  background-color: var(--paper);
  background-image: radial-gradient(var(--dot-color) 1px, transparent 1.2px);
  background-size: 16px 16px;
  box-shadow: var(--shadow-lg);
  border-radius: 6px;
  overflow: hidden;
  touch-action: none;
}
body[data-view="month"] #page, body[data-view="notebooks"] #page, body[data-view="cover"] #page { display: none; }

/* --- PDF-backed notebook pages: swap dot-grid/hour-grid for the scanned page --- */
#pdfBackground { position: absolute; inset: 0; z-index: 0; background-size: contain; background-repeat: no-repeat; background-position: top center; display: none; }
body[data-notebook-kind="pdf"] #page { background-image: none; }
body[data-notebook-kind="pdf"] #pdfBackground { display: block; }
body[data-notebook-kind="pdf"] #hourGrid, body[data-notebook-kind="notes"] #hourGrid,
body[data-notebook-kind="pdf"] #todayBtn, body[data-notebook-kind="notes"] #todayBtn,
body[data-notebook-kind="pdf"] .hourLine, body[data-notebook-kind="notes"] .hourLine { display: none; }
body[data-notes-section="true"] #hourGrid, body[data-notes-section="true"] .hourLine,
body[data-notes-section="true"] #todayBtn, body[data-notes-section="true"] .hourgrid-toggle { display: none; }

#pageTitle {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: var(--title-h);
  z-index: 5;
  display: flex;
  align-items: center;
  padding: 0 96px 0 10px;
  font-family: var(--font-heading);
  font-size: 19px;
  font-weight: 600;
  color: var(--text);
  outline: none;
  border-bottom: 1px solid rgba(0,0,0,0.12);
  background: rgba(255,255,255,0.5);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#pageDateBadge {
  position: absolute;
  top: 0; right: 0;
  height: var(--title-h);
  z-index: 6;
  display: flex;
  align-items: center;
  padding: 0 10px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--gold);
  pointer-events: none;
  white-space: nowrap;
}
#pageTitle:empty::before { content: attr(data-placeholder); color: #aaa; font-weight: 400; }

#hourGrid {
  position: absolute;
  top: var(--title-h); left: 0;
  width: 64px;
  height: calc(100% - var(--title-h));
  border-right: 1px solid rgba(0,0,0,0.15);
  background: rgba(255,255,255,0.35);
  z-index: 1;
  pointer-events: none;
  user-select: none;
}
.hourRow { position: absolute; left: 0; width: 100%; height: 40px; font-size: 10px; color: #555; padding: 2px 4px; border-top: 1px dashed rgba(0,0,0,0.12); }
.hourLine { position: absolute; left: 64px; right: 0; height: 0; border-top: 1px dashed rgba(0,0,0,0.12); z-index: 1; pointer-events: none; }

#layoutLayer, #inkLayer, #textLayer, #stickerLayer {
  position: absolute;
  top: var(--title-h); left: 0;
  width: 100%;
  height: calc(100% - var(--title-h));
  pointer-events: none;
}
#layoutLayer { z-index: 1; }
#inkLayer { z-index: 2; }
#textLayer { z-index: 3; }
#stickerLayer { z-index: 4; }
body[data-mode="draw"] #inkLayer,
body[data-mode="select"] #inkLayer { pointer-events: auto; }
body[data-mode="text"] #textLayer { pointer-events: auto; }
body[data-mode="stickers"] #stickerLayer { pointer-events: auto; }
body[data-mode="layout"] #layoutLayer { pointer-events: auto; }

/* --- Text boxes --- */
/* #textLayer itself stays pointer-events:none outside text mode so empty
   space is click-through for drawing, but an existing box must still be
   deletable/movable no matter which tool is active, so it opts itself
   back in explicitly. */
.textbox { position: absolute; min-width: 60px; min-height: 24px; pointer-events: auto; }
.textbox.selected { outline: 2px dashed #3178dc; outline-offset: 3px; }
.textbox.pop-in { animation: popIn 0.25s cubic-bezier(0.34, 1.56, 0.64, 1); }
.textbox-handle, .textbox-del { opacity: 0; transition: opacity 0.15s; }
.textbox:hover .textbox-handle, .textbox:hover .textbox-del { opacity: 1; }
body[data-mode="text"] .textbox-handle, body[data-mode="text"] .textbox-del { opacity: 1; }
.textbox-handle {
  position: absolute; top: -18px; left: 0;
  font-size: 12px; color: #888; cursor: grab;
  background: rgba(255,255,255,0.85); padding: 0 4px; border-radius: 3px;
  user-select: none;
}
.textbox-del {
  position: absolute; top: -18px; right: 0;
  width: 16px; height: 16px; font-size: 12px; line-height: 14px;
  border: none; border-radius: 50%; background: #d9534f; color: #fff; cursor: pointer; padding: 0;
}
.textbox-content { position: relative; outline: none; min-width: 40px; min-height: 1.2em; white-space: pre-wrap; word-break: break-word; }
.textbox.has-bullet .textbox-content { padding-left: 16px; }
.textbox.has-bullet .textbox-content::before { content: "•"; position: absolute; left: 0; }
.textbox.has-checkbox .textbox-content { padding-left: 22px; }
.textbox-check {
  position: absolute; left: -2px; top: 1px; width: 18px; height: 18px;
  border: none; background: transparent; cursor: pointer; font-size: 15px;
  line-height: 18px; padding: 0; color: var(--rose, #c9506b);
}
.textbox-check[hidden] { display: none; }
@keyframes checkPop { 0% { transform: scale(1); } 45% { transform: scale(1.5) rotate(-8deg); } 100% { transform: scale(1) rotate(0); } }
.textbox-check.pop { animation: checkPop 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); }
.textbox-content.crossed-out { text-decoration: line-through; text-decoration-thickness: 2px; opacity: 0.6; }
.textbox-content.checked-off {
  text-decoration: line-through; text-decoration-thickness: 2px;
  opacity: 0.55; transition: opacity 0.25s ease;
}
.check-sparkle {
  position: absolute; left: 8px; top: 9px; width: 4px; height: 4px; border-radius: 50%;
  background: #f0c94a; pointer-events: none;
  animation: sparkleBurst 0.5s ease-out forwards;
}
@keyframes sparkleBurst {
  0% { transform: translate(0, 0) scale(1); opacity: 1; }
  100% { transform: translate(var(--dx), var(--dy)) scale(0); opacity: 0; }
}

/* --- Generic press feedback across toolbar controls (each already
   transitions transform for its hover state; this just adds the :active
   scale-down using that same transition) --- */
.tb-group button:active, #openNotebookBtn:active, #decorateCoverBtn:active, .tape-swatch:active { transform: scale(0.92); }
.page-tab:active { transform: translateX(-6px) scale(0.92); }

/* --- Stickers --- */
.sticker { position: absolute; user-select: none; touch-action: none; }
/* Same reasoning as .textbox: a placed page sticker must stay
   deletable/movable no matter which drawing tool is active. Cover
   stickers are deliberately excluded — they should only be touchable
   while the cover's decorate mode is on. */
#stickerLayer .sticker { pointer-events: auto; }
.sticker.fade-in { animation: riseIn 0.25s ease; }
.sticker-body { width: 100%; height: 100%; cursor: grab; }
.sticker-emoji { display: flex; align-items: center; justify-content: center; filter: drop-shadow(0 1px 2px rgba(0,0,0,0.3)); }
/* fill, not contain — width/height resize independently now (see
   stickers.js), so a skinnier box should actually stretch the artwork
   into that shape instead of letterboxing a shrunken, still-square copy
   of it inside a mostly-empty box. */
.sticker-image { display: block; object-fit: fill; -webkit-user-drag: none; }
.sticker-del, .sticker-resize, .sticker-rotate { opacity: 0; transition: opacity 0.15s; }
.sticker:hover .sticker-del, .sticker:hover .sticker-resize, .sticker:hover .sticker-rotate { opacity: 1; }
/* Scoped to #stickerLayer specifically — .sticker-del/-resize/-rotate are
   the same classes the cover's stickers use, and an unscoped
   body[data-mode="stickers"] selector matched those too, since data-mode
   is a page-only concept that doesn't get cleared when you leave for the
   cover view. That left cover stickers' handles stuck visible outside
   Decorate mode whenever "Stickers" had been the last page tool used. */
body[data-mode="stickers"] #stickerLayer .sticker-del,
body[data-mode="stickers"] #stickerLayer .sticker-resize,
body[data-mode="stickers"] #stickerLayer .sticker-rotate,
body[data-cover-decorate="true"] .sticker-del, body[data-cover-decorate="true"] .sticker-resize, body[data-cover-decorate="true"] .sticker-rotate { opacity: 1; }
/* Delete sits alone at top-left. Every other edge/corner is a resize handle
   (top-left is deliberately left clear) so the two never overlap and stay
   separately clickable — see feedback: a resize handle used to sit exactly
   on top of the delete button and made it unclickable. */
.sticker-del {
  position: absolute; top: -8px; left: -8px;
  width: 18px; height: 18px; border-radius: 50%; border: none;
  background: #d9534f; color: #fff; font-size: 12px; line-height: 16px; cursor: pointer; padding: 0;
  z-index: 2;
}
.sticker-resize { position: absolute; width: 14px; height: 14px; background: #333; border-radius: 50%; border: 2px solid #fff; }
.sticker-resize-n  { top: -7px; left: 50%; transform: translateX(-50%); cursor: ns-resize; }
.sticker-resize-ne { top: -7px; right: -7px; cursor: nesw-resize; }
.sticker-resize-e  { top: 50%; right: -7px; transform: translateY(-50%); cursor: ew-resize; }
.sticker-resize-se { bottom: -7px; right: -7px; cursor: nwse-resize; }
.sticker-resize-s  { bottom: -7px; left: 50%; transform: translateX(-50%); cursor: ns-resize; }
.sticker-resize-sw { bottom: -7px; left: -7px; cursor: nesw-resize; }
.sticker-resize-w  { top: 50%; left: -7px; transform: translateY(-50%); cursor: ew-resize; }
.sticker-rotate { position: absolute; top: -30px; left: 50%; transform: translateX(-50%); width: 10px; height: 10px; background: #06c; border-radius: 50%; cursor: grab; }
.sticker.selected { outline: 2px dashed #3178dc; outline-offset: 3px; }

/* --- Month tabs: 12 physical-planner-style index tabs sitting outward off
   the page's right edge (like a real Hobonichi/GoodNotes divider), so they
   never overlap the page title/date badge. Lives outside #page/#pageViewport
   (both overflow:hidden) as a sibling in #pageStage so it isn't clipped, and
   gets the same responsive scale applied in JS as the page itself. --- */
#pageTabsRail {
  position: absolute; top: 52px; left: auto; right: -34px; z-index: 6;
  display: flex; flex-direction: column; align-items: flex-end; gap: 4px;
  transform-origin: top left;
}
.page-tab {
  border: none; border-radius: 0 999px 999px 0;
  font: inherit; font-size: 11px; font-weight: 700; color: #fff; cursor: pointer;
  text-transform: uppercase; letter-spacing: 0.03em;
  box-shadow: 2px 2px 6px rgba(0,0,0,0.16);
  transition: transform 0.18s ease, padding-left 0.18s ease, box-shadow 0.18s ease;
}
.month-tab { width: 40px; height: 26px; padding: 0; text-align: center; }
.month-tab:hover { transform: translateX(6px); padding-left: 6px; }
.month-tab.is-current-month { box-shadow: 2px 2px 6px rgba(0,0,0,0.16), inset 0 0 0 2px rgba(255,255,255,0.85); }
.month-tab.active { transform: translateX(10px); box-shadow: 3px 3px 10px rgba(0,0,0,0.28); }
.notes-tab {
  width: 40px; height: 30px; padding: 0; text-align: center; font-size: 8.5px;
  background: var(--lavender, #8a7fd1); color: #fff; margin-bottom: 4px;
}
.notes-tab:hover, .notes-tab.active { transform: translateX(6px); }
.notes-tab.active { box-shadow: 3px 3px 10px rgba(0,0,0,0.28); }

/* --- Month view --- */
#monthView { display: none; width: min(100%, var(--page-w)); }
body[data-view="month"] #monthView { display: block; animation: riseInY 0.3s ease; }
#monthHeader { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; gap: 6px; }
#monthHeader h2 { font-family: var(--font-heading); font-size: 20px; font-weight: 600; margin: 0; flex: 1; text-align: center; }
#monthHeader button { padding: 7px 12px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); color: var(--text); cursor: pointer; font: inherit; }
#monthGrid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 10px; box-shadow: var(--shadow-sm); }
.month-dow { font-size: 11px; text-align: center; color: var(--gold); text-transform: uppercase; letter-spacing: 0.06em; padding: 4px 0; }
.month-cell { aspect-ratio: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; position: relative; border-radius: var(--r-sm); cursor: pointer; font-size: 13px; color: var(--text); gap: 1px; overflow: hidden; }
.month-cell:hover { background: var(--surface-alt); }
.month-cell.empty { cursor: default; }
.month-cell.today { border: 2px solid var(--rose); }
.month-cell .dot { position: absolute; bottom: 4px; width: 5px; height: 5px; border-radius: 50%; background: var(--rose); }
.month-cell-note { font-size: 8px; color: var(--gold); max-width: 90%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.month-cell-quickadd {
  position: absolute; top: 1px; right: 1px; width: 16px; height: 16px; padding: 0;
  border: none; border-radius: 50%; background: rgba(255,255,255,0.8); color: var(--gold);
  font-size: 9px; line-height: 16px; cursor: pointer; opacity: 0; transition: opacity 0.15s;
}
.month-cell:hover .month-cell-quickadd { opacity: 1; }

/* --- Table of contents / search / tags --- */
#pageTagsDisplay { font-size: 12px; color: var(--gold); max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#tocView { display: none; width: min(100%, 640px); }
body[data-view="toc"] #tocView { display: block; animation: riseInY 0.3s ease; }
body[data-view="toc"] .modes, body[data-view="toc"] .only-draw, body[data-view="toc"] .only-text,
body[data-view="toc"] .only-stickers, body[data-view="toc"] .only-select, body[data-view="toc"] .only-layout,
body[data-view="toc"] .history, body[data-view="toc"] .zoom, body[data-view="toc"] .nav { display: none; }
body[data-view="toc"] #pageStage, body[data-view="toc"] #coverStage { display: none; }
#tocHeader { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
#tocHeader h2 { font-family: var(--font-heading); margin: 0; font-size: 24px; font-weight: 600; }
#tocHeader button { padding: 7px 12px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); color: var(--text); cursor: pointer; font: inherit; }
#tocTagFilters { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.toc-tag-chip {
  padding: 5px 12px; border-radius: 999px; border: 1px solid var(--border);
  background: var(--surface); color: var(--gold); font-size: 12.5px; cursor: pointer;
}
.toc-tag-chip.active { background: var(--rose); color: #fff; border-color: var(--rose); }
#tocSearchInput {
  width: 100%; padding: 9px 14px; border: 1px solid var(--border); border-radius: 999px;
  background: var(--surface); color: var(--text); font: inherit; margin-bottom: 12px;
}
#tocList { display: flex; flex-direction: column; gap: 8px; }
.toc-entry {
  display: flex; flex-direction: column; gap: 4px; text-align: left;
  padding: 12px 16px; border-radius: var(--r-sm); border: 1px solid var(--border);
  background: var(--surface); cursor: pointer; transition: background 0.15s, transform 0.15s;
  opacity: 0; animation: riseInY 0.3s ease both;
}
.toc-entry:nth-child(1) { animation-delay: 0.02s; } .toc-entry:nth-child(2) { animation-delay: 0.05s; }
.toc-entry:nth-child(3) { animation-delay: 0.08s; } .toc-entry:nth-child(4) { animation-delay: 0.11s; }
.toc-entry:nth-child(5) { animation-delay: 0.14s; } .toc-entry:nth-child(6) { animation-delay: 0.17s; }
.toc-entry:nth-child(n+7) { animation-delay: 0.2s; }
.toc-entry:hover { background: #fff; transform: translateX(2px); }
.toc-entry .toc-entry-title { font-family: var(--font-heading); font-weight: 600; font-size: 16px; }
.toc-entry .toc-entry-snippet { font-size: 13px; color: var(--text); opacity: 0.75; }
.toc-entry .toc-entry-tags { display: flex; gap: 4px; flex-wrap: wrap; }
.toc-entry .toc-entry-tags span { font-size: 11px; padding: 2px 8px; border-radius: 999px; background: var(--surface-alt); color: var(--gold); }
#tocEmpty { color: var(--text); opacity: 0.6; text-align: center; padding: 30px 0; }

/* --- Notebooks view --- */
#notebooksView { display: none; width: min(100%, 640px); }
body[data-view="notebooks"] #notebooksView { display: block; animation: riseInY 0.3s ease; }
#notebooksHeader { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
#notebooksHeader h2 { font-family: var(--font-heading); margin: 0; font-size: 24px; font-weight: 600; }
#notebooksHeader button { padding: 7px 12px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); color: var(--text); cursor: pointer; font: inherit; }
#notebooksGrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 14px; margin-bottom: 16px; }
.notebook-card {
  aspect-ratio: 3/4; border-radius: var(--r-lg); display: flex; align-items: flex-end;
  padding: 10px; color: #fff; font-weight: 600; font-family: var(--font-heading); font-size: 16px; cursor: pointer;
  box-shadow: var(--shadow-sm); border: none; text-align: left;
  position: relative; background-size: cover; background-position: center;
  overflow: hidden; transition: transform 0.2s, box-shadow 0.2s;
  opacity: 0; animation: riseInY 0.35s ease both;
}
.notebook-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.notebook-card:nth-child(1) { animation-delay: 0.02s; } .notebook-card:nth-child(2) { animation-delay: 0.06s; }
.notebook-card:nth-child(3) { animation-delay: 0.1s; } .notebook-card:nth-child(4) { animation-delay: 0.14s; }
.notebook-card:nth-child(5) { animation-delay: 0.18s; } .notebook-card:nth-child(6) { animation-delay: 0.22s; }
.notebook-card:nth-child(n+7) { animation-delay: 0.26s; }
.notebook-card .card-icon { position: absolute; top: 8px; left: 8px; font-size: 22px; filter: drop-shadow(0 1px 2px rgba(0,0,0,0.4)); }
.notebook-card .card-name { text-shadow: 0 1px 3px rgba(0,0,0,0.5); }
.notebook-card .card-edit {
  position: absolute; top: 6px; right: 6px; width: 24px; height: 24px;
  border-radius: 50%; border: none; background: rgba(0,0,0,0.35); color: #fff;
  cursor: pointer; font-size: 12px; line-height: 24px; padding: 0;
}
#newNotebookForm { display: flex; gap: 8px; align-items: center; background: var(--surface); border: 1px solid var(--border); padding: 12px; border-radius: var(--r-lg); box-shadow: var(--shadow-sm); flex-wrap: wrap; }
#newNotebookForm input[type=text] { flex: 1; min-width: 140px; padding: 7px 12px; border: 1px solid var(--border); border-radius: 999px; font: inherit; background: #fff; color: var(--text); }
#newNotebookForm input[type=color] { width: 32px; height: 32px; border: none; border-radius: 999px; }
#newNotebookForm select, #newNotebookForm button { padding: 7px 12px; border: 1px solid var(--border); border-radius: 999px; background: #fff; color: var(--text); cursor: pointer; font: inherit; }
.cover-image-upload { padding: 7px 12px; border: 1px solid var(--border); border-radius: 999px; background: #fff; color: var(--text); cursor: pointer; font-size: 14px; }

#appLinks { display: flex; gap: 10px; margin-top: 14px; flex-wrap: wrap; }
#appLinks a {
  padding: 8px 14px; border-radius: 999px; border: 1px solid var(--border);
  background: var(--surface); color: var(--gold); text-decoration: none;
  font-size: 13.5px; transition: background 0.15s, transform 0.15s;
}
#appLinks a:hover { background: #fff; transform: translateY(-1px); }

/* --- Cover view --- */
#coverView { width: var(--page-w); height: var(--page-h); display: flex; align-items: center; justify-content: center; }
#coverCard {
  width: 100%; height: 100%; border-radius: var(--r-lg); background: var(--cover-color, #c9506b);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 24px;
  box-shadow: var(--shadow-lg); color: #fff; text-align: center; padding: 24px;
  position: relative; overflow: hidden;
}
#coverImage { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
/* Explicit top/left/width/height rather than the "inset: 0" shorthand —
   #coverInkLayer is an <svg> with no width/height/viewBox of its own, and
   an unsized SVG is a replaced element that doesn't reliably stretch to
   fill its containing block via inset alone (some browsers fall back to
   its ~300x150 intrinsic default box). Explicit width/height is exactly
   what the page's own #inkLayer already uses, and it works there. */
#coverInkLayer, #coverTextLayer, #coverStickerLayer {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none;
}
#coverInkLayer { z-index: 1; }
#coverTextLayer { z-index: 2; }
#coverStickerLayer { z-index: 3; }
body[data-cover-decorate="true"][data-cover-tool="stickers"] #coverStickerLayer,
body[data-cover-decorate="true"][data-cover-tool="tape"] #coverStickerLayer,
body[data-cover-decorate="true"][data-cover-tool="design"] #coverStickerLayer { pointer-events: auto; }
body[data-cover-decorate="true"][data-cover-tool="draw"] #coverInkLayer { pointer-events: auto; }
body[data-cover-decorate="true"][data-cover-tool="text"] #coverTextLayer { pointer-events: auto; cursor: text; }
#coverIcon { font-size: 64px; z-index: 4; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.4)); }
#coverIcon:empty { display: none; }
#coverTitle, .cover-actions { z-index: 4; }
#coverTitle { text-shadow: 0 1px 4px rgba(0,0,0,0.4); }
#coverTitle { font-family: var(--font-heading); font-size: 34px; font-weight: 600; margin: 0; cursor: text; outline: none; }
.cover-actions { display: flex; gap: 10px; }
/* The icon/title/actions row sat on top of the ink/text/sticker layers and
   ate clicks meant for them — you could only draw in the gap above/below
   that middle band. None of the three need to be interactive while a
   decorate tool is active, so let clicks fall through to the layers below. */
body[data-cover-decorate="true"] #coverIcon,
body[data-cover-decorate="true"] #coverTitle,
body[data-cover-decorate="true"] .cover-actions { pointer-events: none; }
#openNotebookBtn {
  padding: 11px 24px; border-radius: 999px; border: 2px solid #fff; background: transparent;
  color: #fff; cursor: pointer; font: inherit; font-size: 15px; transition: background 0.2s, transform 0.2s;
}
#openNotebookBtn:hover { background: rgba(255,255,255,0.18); transform: translateY(-1px); }
body[data-cover-decorate="true"] #openNotebookBtn { display: none; }
/* Cover options menu — a small "⋯" tucked in the corner rather than a big
   button sitting on top of the cover art (feedback: the old placement felt
   like it was "on top of the cover"). */
#coverMenuBtn {
  top: 10px !important; left: auto !important; right: 10px !important; z-index: 5;
  width: 34px; height: 34px; border-radius: 50%; border: none;
  background: rgba(0,0,0,0.25); color: #fff; font-size: 18px; line-height: 1; cursor: pointer;
}
#coverMenuBtn:hover { background: rgba(0,0,0,0.4); }
#coverMenu {
  top: 50px !important; left: auto !important; right: 10px !important; z-index: 5;
  display: flex; flex-direction: column; gap: 4px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-sm);
  box-shadow: var(--shadow-lg); padding: 8px; min-width: 170px;
}
#coverMenu[hidden] { display: none; }
#coverMenu button {
  padding: 7px 10px; border: none; border-radius: var(--r-sm); background: transparent;
  color: var(--text); cursor: pointer; font: inherit; font-size: 13.5px; text-align: left;
}
#coverMenu button:hover { background: var(--surface-alt); }
#coverDecorateBar[hidden] { display: none; }
#coverDecorateBar {
  top: auto !important; left: 50% !important; bottom: 12px;
  transform: translateX(-50%);
  display: flex; flex-direction: column; gap: 8px; align-items: stretch;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg);
  padding: 10px 14px; box-shadow: var(--shadow-lg);
  width: min(320px, 90vw); max-height: 45vh; overflow-y: auto;
}
#coverDecorateBar .tb-group { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; align-items: center; }
#coverDecorateBar select { padding: 6px 10px; border: 1px solid var(--border); border-radius: 999px; background: #fff; color: var(--text); font: inherit; }
#coverDecorateBar button { padding: 6px 14px; border: 1px solid var(--border); border-radius: 999px; background: #fff; color: var(--text); cursor: pointer; font: inherit; }
#coverDecorateBar .tape-picker { justify-content: center; }
#coverDecorateBar input[type=color] { width: 32px; height: 32px; border: none; border-radius: 999px; padding: 0; cursor: pointer; }
#coverDecorateBar input[type=range] { accent-color: var(--rose); }
.cover-tool-tabs { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; }
.cover-tool-tab {
  padding: 6px 12px; border: 1px solid var(--border); border-radius: 999px;
  background: #fff; color: var(--text); cursor: pointer; font: inherit; font-size: 13px;
}
.cover-tool-tab.active { background: var(--rose); color: #fff; border-color: var(--rose); }
.cover-tool-panel[hidden] { display: none; }
.cover-tool-hint { font-size: 12.5px; color: var(--text); opacity: 0.7; }

/* Design (112 items) and Stamps (119 items) used to sit flat inside the
   page's Stickers panel, so opening either one made #toolFlyout grow tall
   enough to spill past the planner page itself. Split into their own
   sub-tabs, each with its own capped, independently scrollable picker —
   only one is ever on-screen at a time and it can never grow past
   scrollable-picker's max-height. */
.sticker-subtabs { display: flex; gap: 5px; flex-wrap: wrap; width: 100%; margin-bottom: 4px; }
.sticker-subtab {
  padding: 5px 10px; border: 1px solid var(--border); border-radius: 999px;
  background: #fff; color: var(--text); cursor: pointer; font: inherit; font-size: 12.5px;
}
.sticker-subtab.active { background: var(--rose); color: #fff; border-color: var(--rose); }
.sticker-subpanel { display: flex; flex-direction: column; align-items: stretch; gap: 6px; width: 100%; }
.sticker-subpanel[hidden] { display: none; }
.scrollable-picker { max-height: 240px; overflow-y: auto; align-content: flex-start; }

/* --- Page-turn animation --- */
.page-flip-stage { position: fixed; z-index: 9999; pointer-events: none; }
.page-flip {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  transform-style: preserve-3d;
  transition-property: transform;
  transition-timing-function: ease-in-out;
  transform: rotateY(0deg);
}
.page-flip-face {
  /* No box-shadow/border-radius here: both render as glitchy artifacts
     (a stray triangular highlight near the pivot corner) on an element
     with backface-visibility:hidden inside a 3D rotation in Chromium. */
  position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  backface-visibility: hidden;
  overflow: hidden;
}
.page-flip-back { transform: rotateY(180deg); }