/* ============================================================
   calendar.css — the pull-down journal calendar
   Warmer, softer world than the rest of the site: rose · gold ·
   lavender. A place to write your days into.
   ============================================================ */

/* Pull-tab hanging from the top — the "pull down" affordance */
.cal-pull {
  position: fixed;
  top: 0; left: 50%;
  transform: translateX(-50%);
  z-index: 820;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 1.3rem 0.5rem;
  border: 1px solid var(--hairline-2);
  border-top: none;
  border-radius: 0 0 var(--r-md) var(--r-md);
  background: var(--glass-2);
  backdrop-filter: blur(var(--blur));
  color: var(--text-muted);
  font-size: var(--text-xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform var(--dur) var(--ease-out-expo),
              color var(--dur-fast) ease, box-shadow var(--dur) ease, border-color var(--dur-fast) ease;
}
.cal-pull:hover {
  transform: translate(-50%, 5px);
  color: var(--text);
  border-color: color-mix(in oklch, var(--rose), transparent 40%);
  box-shadow: 0 10px 34px -14px oklch(74% 0.18 8 / 0.6);
}
.cal-pull__chev { font-size: 0.95rem; line-height: 1; color: var(--rose); }
@media (max-width: 560px) { .cal-pull { display: none; } } /* nav link only on mobile */

/* Overlay + pull-down sheet */
.cal { position: fixed; inset: 0; z-index: 960; pointer-events: none; }
.cal.is-open { pointer-events: auto; }
.cal__sheet {
  position: absolute; inset: 0;
  transform: translateY(-100%);
  transition: transform 0.62s var(--ease-out-expo);
  overflow-y: auto;
  outline: none;
  background:
    radial-gradient(85% 55% at 12% 0%, oklch(42% 0.12 18 / 0.5), transparent 60%),
    radial-gradient(80% 55% at 92% 4%, oklch(46% 0.13 300 / 0.46), transparent 60%),
    radial-gradient(110% 70% at 50% 112%, oklch(52% 0.12 72 / 0.36), transparent 66%),
    linear-gradient(180deg, oklch(15% 0.03 322) 0%, oklch(11% 0.02 300) 100%);
}
.cal.is-open .cal__sheet { transform: translateY(0); }
@media (prefers-reduced-motion: reduce) { .cal__sheet { transition: none; } }

/* Grip / close handle */
.cal__grip { position: sticky; top: 0; z-index: 3; display: flex; justify-content: center; padding: 0.7rem 0 0.4rem;
  background: linear-gradient(180deg, oklch(13% 0.03 320 / 0.9), transparent); }
.cal__close {
  display: inline-flex; flex-direction: column; align-items: center; gap: 5px;
  background: none; border: none; cursor: pointer;
  color: var(--text-faint); font-size: var(--text-xs); letter-spacing: 0.16em; text-transform: uppercase;
}
.cal__handle { width: 48px; height: 5px; border-radius: 3px; background: oklch(82% 0.07 24 / 0.5);
  transition: background var(--dur-fast) ease, width var(--dur-fast) ease; }
.cal__close:hover .cal__handle { background: var(--rose); width: 64px; }
.cal__close:hover { color: var(--text-muted); }

.cal__inner { width: min(100% - 2 * var(--gutter), 1120px); margin-inline: auto; padding: 0.5rem 0 4rem; }

.cal__top { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 1rem; margin: 0.5rem 0 2rem; }
.cal__top .eyebrow { display: block; margin-bottom: 0.7rem; color: var(--rose); }
.cal__month { display: flex; align-items: center; gap: 1rem; font-size: var(--text-2xl); }
#cal-month-label { font-family: var(--font-display); min-width: 6ch; }
.cal__nav {
  width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid var(--hairline-2); background: var(--glass);
  color: var(--text-muted); font-size: 1.3rem; line-height: 1; cursor: pointer;
  transition: color var(--dur-fast) ease, border-color var(--dur-fast) ease, transform var(--dur-fast) var(--ease-spring);
}
.cal__nav:hover { color: var(--text); border-color: var(--rose); transform: scale(1.08); }
.cal__todaybtn {
  align-self: center; margin-left: 0.4rem;
  padding: 0.4rem 0.9rem; border-radius: var(--r-pill);
  border: 1px solid var(--hairline-2); background: var(--glass);
  color: var(--text-muted); font-size: var(--text-xs); letter-spacing: 0.06em; cursor: pointer;
  transition: color var(--dur-fast) ease, border-color var(--dur-fast) ease;
}
.cal__todaybtn:hover { color: var(--text); border-color: var(--gold-deep); }
.cal__count { color: var(--gold-soft); font-family: var(--font-display); font-style: italic; font-size: var(--text-lg); }

.cal__body { display: grid; gap: 2rem; grid-template-columns: 1fr; }
@media (min-width: 900px) { .cal__body { grid-template-columns: 1.35fr 1fr; align-items: start; } }

.cal__dow { display: grid; grid-template-columns: repeat(7, 1fr); gap: 0.5rem; margin-bottom: 0.6rem; }
.cal__dow span { text-align: center; font-size: var(--text-xs); letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-faint); }
.cal__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 0.5rem; }
.cal__cell {
  aspect-ratio: 1; position: relative;
  border-radius: var(--r-md);
  border: 1px solid var(--hairline);
  background: oklch(100% 0 0 / 0.03);
  color: var(--text-muted);
  cursor: pointer; font: inherit;
  display: flex; align-items: flex-start; justify-content: flex-start;
  padding: 0.4rem 0.55rem;
  transition: transform var(--dur-fast) var(--ease-spring), border-color var(--dur-fast) ease,
              background var(--dur-fast) ease, box-shadow var(--dur-fast) ease;
}
.cal__cell:hover { transform: translateY(-2px); border-color: color-mix(in oklch, var(--rose), transparent 30%); }
.cal__cell--pad { border: none; background: none; cursor: default; }
.cal__num { font-family: var(--font-display); font-size: var(--text-base); }
.cal__cell.is-today { border-color: var(--gold); box-shadow: inset 0 0 0 1px var(--gold), 0 0 26px -10px var(--gold); color: var(--text); }
.cal__cell.is-sel {
  background: linear-gradient(160deg, oklch(62% 0.16 14 / 0.3), oklch(52% 0.14 300 / 0.24));
  border-color: var(--rose); color: var(--text);
}
.cal__cell.has-entry .cal__num { color: var(--text); }
.cal__dot { position: absolute; bottom: 8px; right: 8px; width: 6px; height: 6px; border-radius: 50%;
  background: var(--gold); box-shadow: 0 0 8px var(--gold); }
.cal__cellmood { position: absolute; bottom: 4px; right: 7px; font-size: 0.9rem; color: var(--rose); }

/* Writing panel */
.cal__editor {
  border: 1px solid var(--hairline-2);
  border-radius: var(--r-lg);
  background: linear-gradient(165deg, oklch(32% 0.07 18 / 0.34), oklch(16% 0.03 300 / 0.46));
  backdrop-filter: blur(var(--blur));
  padding: 1.6rem;
  position: sticky; top: 3.4rem;
  box-shadow: var(--shadow-card);
}
.cal__date { font-family: var(--font-display); font-size: var(--text-xl); }
.cal__prompt { font-family: var(--font-display); font-style: italic; color: var(--gold-soft); margin: 0.4rem 0 1.2rem; }
.cal__moods { display: flex; flex-wrap: wrap; gap: 0.55rem; margin-bottom: 1.2rem; }
.cal__mood {
  width: 46px; height: 46px; border-radius: 50%;
  border: 1px solid var(--hairline-2); background: var(--glass);
  font-size: 1.2rem; cursor: pointer; color: var(--text-muted);
  display: grid; place-items: center;
  transition: transform var(--dur-fast) var(--ease-spring), border-color var(--dur-fast) ease,
              color var(--dur-fast) ease, background var(--dur-fast) ease, box-shadow var(--dur-fast) ease;
}
.cal__mood:hover { transform: translateY(-3px) scale(1.08); border-color: var(--rose); color: var(--rose); }
.cal__mood.is-active {
  background: linear-gradient(160deg, var(--rose), var(--gold));
  color: var(--text-ink); border-color: transparent;
  box-shadow: 0 0 22px -6px var(--rose);
}
.cal__text {
  width: 100%; min-height: 240px; resize: vertical;
  border-radius: var(--r-md); border: 1px solid var(--hairline-2);
  background: oklch(10% 0.02 320 / 0.5); color: var(--text);
  padding: 1.1rem 1.2rem;
  font-family: var(--font-display); font-size: var(--text-lg); line-height: 1.65;
}
.cal__text:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-color: var(--gold); }
.cal__text::placeholder { color: var(--text-faint); font-style: italic; }
.cal__save { margin-top: 0.8rem; height: 1.3em; color: var(--aqua); font-size: var(--text-sm); font-style: italic; }