/* ───────────────────────── theme tokens ───────────────────────── */
:root {
  --app-bg: radial-gradient(ellipse at top, #f4ecda 0%, #e6dcc4 60%, #d9cdb0 100%);
  --app-fg: #2b241c;

  --paper: #fdfaf2;
  --paper-lines: rgba(60,60,60,0.06);
  --ink: #2a2a2a;
  --ink-soft: #888;

  --wood-grad: linear-gradient(180deg, #c9a576 0%, #a47a4d 50%, #8b6238 100%);
  --wood-grain: repeating-linear-gradient(
    90deg,
    rgba(0,0,0,0.04) 0 2px,
    transparent 2px 14px,
    rgba(255,255,255,0.05) 14px 16px,
    transparent 16px 30px,
    rgba(0,0,0,0.06) 30px 32px
  );

  --ring-grad: radial-gradient(circle at 35% 35%, #fafafa, #9a9a9a 60%, #4a4a4a);

  --arrow-bg: rgba(255,255,255,0.55);
  --arrow-fg: #4a3a2a;
  --arrow-bg-hover: rgba(255,255,255,0.95);

  --add-bg: #c9a96e;
  --add-fg: #2b241c;
}

.dark {
  --app-bg: radial-gradient(ellipse at top, #4a3a2a 0%, #2b241c 60%, #1a140e 100%);
  --app-fg: #eee;

  --paper: #1f1d18;
  --paper-lines: rgba(255,255,255,0.05);
  --ink: #ece7d8;
  --ink-soft: #888;

  --wood-grad: linear-gradient(180deg, #6a4d2f 0%, #4a3520 50%, #2d1f10 100%);
  --wood-grain: repeating-linear-gradient(
    90deg,
    rgba(0,0,0,0.18) 0 2px,
    transparent 2px 14px,
    rgba(255,255,255,0.04) 14px 16px,
    transparent 16px 30px,
    rgba(0,0,0,0.2) 30px 32px
  );

  --ring-grad: radial-gradient(circle at 35% 35%, #d6d6d6, #6a6a6a 60%, #2c2c2c);

  --arrow-bg: rgba(255,255,255,0.08);
  --arrow-fg: #d9bd84;
  --arrow-bg-hover: rgba(255,255,255,0.18);

  --add-bg: #d9bd84;
  --add-fg: #1a140e;
}

.bg-app { background: var(--app-bg); }
.text-app { color: var(--app-fg); }

/* ───────────────────────── calendar rig ───────────────────────── */
.calendar-rig {
  position: relative;
  width: min(92vw, 1000px);
  height: min(72vh, 540px);
}

.panels {
  display: flex;
  width: 100%;
  height: 100%;
  gap: 0;
  padding-top: 22px;          /* room for the spiral binding */
  filter: drop-shadow(0 30px 40px rgba(0,0,0,0.35));
}

.panel {
  position: relative;
  height: 100%;
  border-radius: 4px;
  overflow: hidden;
}

.paper-panel {
  flex: 0 0 75%;
  background: var(--paper);
  background-image: repeating-linear-gradient(transparent 0 34px, var(--paper-lines) 34px 35px);
  box-shadow: inset -2px 0 6px rgba(0,0,0,0.15);
  position: relative;
}

/* paper-stack thickness — multiple slim layers visible at the binding */
.paper-panel::before {
  content: '';
  position: absolute;
  top: -4px; left: 6px; right: 6px;
  height: 6px;
  background: repeating-linear-gradient(
    to bottom,
    #f0e8d0 0 1px,
    #ddd3b8 1px 2px
  );
  border-radius: 3px 3px 0 0;
  box-shadow: 0 1px 2px rgba(0,0,0,0.2);
  z-index: 40;
}
.dark .paper-panel::before {
  background: repeating-linear-gradient(
    to bottom,
    #2a261d 0 1px,
    #161310 1px 2px
  );
}

.wood-panel {
  flex: 1;
  background: var(--wood-grad);
  position: relative;
  box-shadow: inset 2px 0 6px rgba(0,0,0,0.25);
}
.wood-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--wood-grain);
  pointer-events: none;
  opacity: 0.8;
}

.wood-area {
  position: absolute;
  inset: 10px 8px 8px 8px;
  z-index: 1;
}

/* tent base shadow */
.tent-shadow {
  position: absolute;
  left: 4%;
  right: 4%;
  bottom: -22px;
  height: 28px;
  background: radial-gradient(ellipse at center, rgba(0,0,0,0.4) 0%, transparent 70%);
  filter: blur(3px);
  z-index: -1;
}

/* ───────────────────────── realistic spiral binding ───────────────────────── */
.binding-row {
  position: absolute;
  top: -14px;
  left: 4px;
  right: 4px;
  height: 42px;
  pointer-events: none;
  z-index: 60;
}
.binding-row svg { display: block; width: 100%; height: 100%; overflow: visible; }

/* ───────────────────────── flip page (two-faced realistic) ───────────────────────── */
.page-stack {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  perspective: 2200px;
}

.page {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transform-origin: top center;
  transform: rotateX(0deg);
  transition: transform 0.95s cubic-bezier(.45, .05, .25, 1);
  will-change: transform;
}
.page.flipped-up { transform: rotateX(-180deg); }

.page-face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  background: var(--paper);
  background-image: repeating-linear-gradient(transparent 0 34px, var(--paper-lines) 34px 35px);
  overflow: hidden;
  border-radius: 0 0 4px 4px;
  color: var(--ink);
}

.page-face.back {
  transform: rotateX(180deg);
  background-image:
    repeating-linear-gradient(transparent 0 34px, var(--paper-lines) 34px 35px),
    radial-gradient(ellipse 80% 60% at center top, rgba(0,0,0,0.08), transparent 70%);
}
.dark .page-face.back {
  background-image:
    repeating-linear-gradient(transparent 0 34px, var(--paper-lines) 34px 35px),
    radial-gradient(ellipse 80% 60% at center top, rgba(255,255,255,0.04), transparent 70%);
}

/* shading that intensifies through mid-flip */
.page-face::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(to bottom, transparent 30%, rgba(0,0,0,0.55) 100%);
  opacity: 0;
  transition: opacity 0.45s ease-in-out;
}
.page.flipping .page-face::after { opacity: 1; }

/* bottom-edge curl glow on the flipping page */
.page-face::before {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 24px;
  background: linear-gradient(to top, rgba(0,0,0,0.18), transparent);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s;
}
.page.flipping .page-face::before { opacity: 1; }

.page.flipping { z-index: 10; }

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 14px 22px 8px;
  border-bottom: 2px dashed rgba(127,127,127,0.25);
}

.day-name {
  font-family: Georgia, serif;
  font-weight: 800;
  font-size: 40px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.day-meta {
  font-size: 12px;
  letter-spacing: 0.08em;
  color: #9a9a9a;
  font-weight: 400;
}
.day-meta .today-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #d2691e;
  margin-right: 6px;
  vertical-align: middle;
}

.notes-area {
  position: relative;
  width: 100%;
  height: calc(100% - 80px);
}

.add-control {
  background: var(--add-bg);
  color: var(--add-fg);
  font-size: 26px;
  font-weight: 700;
  margin-bottom: 6px;
}
.add-control:hover { background: var(--add-bg); transform: scale(1.08); }

/* ───────────────────────── nav controls ───────────────────────── */
.controls {
  position: fixed;
  left: 18px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: 100;
}

.arrow-btn {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: none;
  background: var(--arrow-bg);
  color: var(--arrow-fg);
  font-size: 20px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(8px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.25);
  transition: background .15s, transform .12s;
  user-select: none;
}
.arrow-btn:hover  { background: var(--arrow-bg-hover); }
.arrow-btn:active { transform: scale(0.92); }

/* ───────────────────────── sticky notes ───────────────────────── */
/* IMPORTANT: position via translate() rather than top/left, because the page
   lives inside a `transform-style: preserve-3d` ancestor, and `top` updates
   inside a 3D context don't always trigger a visible reflow (Safari bug). */
.sticky {
  position: absolute;
  top: 0;
  left: 0;
  width: 170px;
  min-height: 150px;
  background: var(--note-bg, #fff59d);
  box-shadow:
    0 4px 10px rgba(0,0,0,0.28),
    inset 0 -10px 20px rgba(0,0,0,0.04);
  font-family: 'Comic Sans MS', 'Marker Felt', cursive;
  color: #222;
  /* transform is written directly by JS via setPos(); leaving the default
     keeps the initial paint identity until JS hydrates the position. */
  transition: box-shadow .15s;
  z-index: 2;
  display: flex;
  flex-direction: column;
  will-change: transform;
}
.sticky:hover { box-shadow: 0 10px 20px rgba(0,0,0,0.35); }
.sticky.dragging {
  z-index: 1000 !important;
  cursor: grabbing;
  transition: none;
  /* IMPORTANT: no scale() here — it would shift the dropped position because
     transform-origin is the center. Lift feedback comes from box-shadow only. */
  box-shadow: 0 18px 34px rgba(0,0,0,0.5);
}

.sticky-handle {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 5px 8px;
  cursor: grab;
  user-select: none;
  /* stop the browser hijacking the pointer for scroll/zoom while dragging */
  touch-action: none;
  background: linear-gradient(180deg, rgba(0,0,0,0.06), transparent);
  flex-shrink: 0;
}
.sticky.dragging .sticky-handle { cursor: grabbing; }

.sticky-grip {
  font-size: 11px;
  letter-spacing: 1px;
  color: rgba(0,0,0,0.35);
  font-family: monospace;
  user-select: none;
  pointer-events: none;
}

.delete-btn {
  background: transparent;
  border: none;
  color: rgba(0,0,0,0.55);
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  padding: 0 4px;
}
.delete-btn:hover { color: #c00; }

.sticky-text {
  flex: 1;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  outline: none;
  font-family: inherit;
  font-size: 15px;
  line-height: 1.35;
  color: inherit;
  padding: 6px 12px 14px;
  cursor: text;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
  min-height: 0;
}
.sticky-text:empty::before {
  content: attr(data-placeholder);
  color: rgba(0,0,0,0.45);
  font-style: italic;
  pointer-events: none;
}

/* every-day notes on wood get a tiny pinned indicator */
.sticky.everyday::before {
  content: '★';
  position: absolute;
  top: -8px;
  left: -8px;
  width: 18px;
  height: 18px;
  background: #b8862b;
  color: white;
  border-radius: 50%;
  font-size: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 4px rgba(0,0,0,0.3);
  z-index: 5;
}

/* highlight panel when dragging over it */
.panel.drop-target { outline: 3px dashed rgba(255,255,255,0.5); outline-offset: -6px; }
.paper-panel.drop-target { outline-color: rgba(178,141,80,0.6); }

/* drag-layer: stickies live here for the duration of a drag */
.drag-layer {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
}
.drag-layer .sticky { pointer-events: auto; }

/* ───────────────────────── toast ───────────────────────── */
.toast {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 14px 10px 16px;
  background: rgba(30, 25, 18, 0.95);
  color: #f5ecd6;
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.4);
  font-size: 13px;
  position: relative;
  overflow: hidden;
  transform: translateY(20px);
  opacity: 0;
  transition: transform .25s ease-out, opacity .25s ease-out;
  min-width: 220px;
}
.toast.show { transform: translateY(0); opacity: 1; }

.dark .toast {
  background: rgba(245, 236, 214, 0.95);
  color: #1e1912;
}

.toast-action {
  background: transparent;
  color: #d9bd84;
  border: none;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 12px;
  letter-spacing: 0.08em;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 6px;
}
.toast-action:hover { background: rgba(255,255,255,0.08); }
.dark .toast-action { color: #6e5b46; }
.dark .toast-action:hover { background: rgba(0,0,0,0.08); }

.toast-progress {
  position: absolute;
  bottom: 0; left: 0;
  height: 2px;
  width: 100%;
  background: #d9bd84;
  transform-origin: left;
  animation: toast-bar 5s linear forwards;
}
.dark .toast-progress { background: #6e5b46; }

@keyframes toast-bar {
  from { transform: scaleX(1); }
  to   { transform: scaleX(0); }
}

/* ───────────────────────── responsive ───────────────────────── */
@media (max-width: 720px) {
  .calendar-rig { width: 96vw; height: 78vh; }
  .day-name { font-size: 28px; }
  .sticky { width: 140px; min-height: 130px; }
  .paper-panel { flex-basis: 58%; }
  .controls { left: 6px; }
  .arrow-btn { width: 38px; height: 38px; font-size: 16px; }
}