/* ============================================================================
   calendar.css — self-contained stylesheet for the <calendar> module
   ----------------------------------------------------------------------------
   The calendar markup is a unique, self-descriptive tag family (Bootstrap-style
   one-prefix naming): <calendar> root, every part = calendar-<what-it-is>.

     calendar
     ├─ calendar-header                 weekday bar (Sun–Sat)
     │  └─ calendar-weekday ×7 > -frame > -inner > -slot > -cell
     │       └─ calendar-weekday-label-wrap > calendar-weekday-label
     └─ calendar-body                   6-week grid
        └─ calendar-week ×6 > -frame > -inner > -days
             └─ calendar-day ×7
                ├─ calendar-day-number-wrap  > calendar-day-number
                ├─ calendar-day-events-wrap  > calendar-day-events
                └─ calendar-day-balance      > calendar-day-balance-amount  (JS)

   PORTABILITY CONTRACT — this file styles the calendar-* TAGS directly, so the
   markup + this file render correctly WITHOUT the host site's utility CSS.
   Every token is referenced as var(--token, fallback): inside this repo the
   site.css ladder/palette wins; on a foreign page the literal fallbacks apply.
   Size ladder (site convention): --size-N = 1,2,4,8,16,32,64,128,256,512.
   Units (site convention): pt for font sizes, px for all other geometry.

   In-repo load order: AFTER site.css. All values below are the NET result of
   the attribute stack each element carries (grid/gap/fill/border-dotted/…),
   so double-application with site.css is visually a no-op.
   ========================================================================== */

/* ── Module tokens (resolve to site tokens when present) ─────────────────── */
calendar {
  --_cal-gray:     var(--color-gray-2, #cccccc);          /* cell bg + other-month */
  --_cal-primary:  var(--color-primary, #000000);         /* border/text color */
  --_cal-accent:   var(--accent-color, #000000);          /* hover/selected */
  --_cal-font:     var(--font-family-default, 'Specter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);
  --_cal-monetary: var(--font-family-monetary, 'Gear', 'SF Mono', 'Monaco', 'Consolas', monospace);
}
@media (prefers-color-scheme: dark) {
  calendar {
    --_cal-gray:    var(--color-gray-2, #2a2a2a);
    --_cal-primary: var(--color-primary, #ffffff);
    --_cal-accent:  var(--accent-color, #ffffff);
  }
}
:root[data-theme="dark"] calendar {
  --_cal-gray:    var(--color-gray-2, #2a2a2a);
  --_cal-primary: var(--color-primary, #ffffff);
  --_cal-accent:  var(--accent-color, #ffffff);
}
:root[data-theme="light"] calendar {
  --_cal-gray:    var(--color-gray-2, #cccccc);
  --_cal-primary: var(--color-primary, #000000);
  --_cal-accent:  var(--accent-color, #000000);
}

/* ── Root ────────────────────────────────────────────────────────────────── */
calendar {
  display: grid;
  gap: calc(var(--size-5, 16) * 1px);
  align-content: baseline;
  width: calc(var(--size-10, 512) * 1px);
  box-sizing: border-box;
  font-family: var(--_cal-font);
  font-size: calc(var(--size-4, 8) * 1pt);
  color: var(--_cal-primary);
}
calendar *,
calendar *::before,
calendar *::after {
  box-sizing: border-box;
}

/* ── Regions ─────────────────────────────────────────────────────────────── */
calendar-header {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: calc(var(--size-3, 4) * 1px);
  width: stretch;
}
calendar-body {
  display: grid;
  gap: calc(var(--size-3, 4) * 1px);
  width: stretch;
}

/* ── Weekday header cells ────────────────────────────────────────────────── */
calendar-weekday {
  display: grid;
  gap: calc(var(--size-3, 4) * 1px);
}
calendar-weekday-frame {
  display: grid;
  gap: calc(var(--size-5, 16) * 1px);
}
calendar-weekday-inner {
  display: flex;
  flex-direction: column;
  gap: calc(var(--size-5, 16) * 1px);
  width: 100%;
  height: 100%;
  flex: 0 1 auto;
  min-width: 0;
}
calendar-weekday-slot {
  display: flex;
  gap: calc(var(--size-3, 4) * 1px);
}
/* Net of [skeleton grid space-between center bare]: a bare centered cell —
   [bare] strips the bg/border/padding, [center] wins the alignment. */
calendar-weekday-cell {
  display: grid;
  place-items: center;
  text-align: center;
  margin: auto;
}
calendar-weekday-label-wrap {
  display: block;
  width: stretch;
  white-space: nowrap;
}
calendar-weekday-label {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  white-space: nowrap;
}

/* ── Week rows ───────────────────────────────────────────────────────────── */
calendar-week {
  display: grid;
  gap: calc(var(--size-3, 4) * 1px);
}
calendar-week-frame {
  display: grid;
  gap: calc(var(--size-5, 16) * 1px);
}
calendar-week-inner {
  display: flex;
  flex-direction: column;
  gap: calc(var(--size-5, 16) * 1px);
  width: 100%;
  height: 100%;
  flex: 0 1 auto;
  min-width: 0;
}
calendar-week-days {
  display: flex;
  gap: calc(var(--size-3, 4) * 1px);
}

/* ── Day cells ───────────────────────────────────────────────────────────── */
calendar-day {
  position: relative;                      /* hosts the absolute balance editor */
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: calc(var(--size-3, 4) * 1px);
  width: 100%;
  height: 100%;
  flex: 0 1 auto;
  min-width: 0;
  min-height: calc(var(--size-6, 32) * 1px);
  align-items: center;
  align-content: center;
  border-width: calc(var(--size-1, 1) * 1px);
  border-style: var(--border-style-default, dotted);
  border-color: var(--_cal-primary);
  border-radius: calc(var(--size-4, 8) * 1px);
  padding: calc(var(--size-4, 8) * 1px);
  background: var(--_cal-gray);
  transition: var(--transition-skeleton-fade, background calc(var(--size-9, 256) * 1ms) ease-in);
  cursor: pointer;
}
calendar-day * {
  cursor: pointer;
}
calendar-day:hover {
  background: var(--_cal-accent);
}
calendar-day[data-state~="today"] {
  border-style: var(--border-style-strong, solid);
}
calendar-day[data-state~="selected"] {
  background: var(--_cal-accent);
  border-style: var(--border-style-strong, solid);
}
calendar-day[data-state~="other-month"] {
  pointer-events: none;
  cursor: default;
  background: var(--_cal-gray);
  opacity: calc(var(--size-2, 2) * 0.1);
}
calendar[data-state~="calendar-dragging"],
calendar[data-state~="calendar-dragging"] calendar-day {
  user-select: none;
  cursor: crosshair;
}

/* ── Day-cell leaves ─────────────────────────────────────────────────────── */
calendar-day-number-wrap,
calendar-day-events-wrap {
  display: block;
  width: stretch;
  white-space: nowrap;
}
calendar-day-number,
calendar-day-events {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  white-space: nowrap;
}

/* Balance band — created at runtime by the engine; carries the monetary
   marker set ([monetary]/[data-monetary]/[monetary-balance]). */
calendar-day-balance,
calendar-day-balance * {
  font-family: var(--_cal-monetary);
  font-feature-settings: 'zero' 1, 'tnum' 1;
  font-variant-numeric: slashed-zero tabular-nums;
  letter-spacing: var(--tracking-2, 0.16pt);
}
calendar-day-balance-amount {
  display: flex;
  justify-content: center;
  align-items: center;
  white-space: nowrap;
}
/* Negative day balances read RED (user decision 2026-07-20). The engine stamps
   data-balance-type=positive|negative|zero on the band; only negative colors. */
calendar-day-balance[data-balance-type="negative"],
calendar-day-balance[data-balance-type="negative"] * {
  color: var(--color-red, rgb(255, 0, 0));
}

/* Inline day-balance editor (double-click a past day) — same middle band as
   the read-only balance display. */
calendar-day [data-id="day-balance-input"] {
  position: absolute;
  left: calc(var(--size-2, 2) * 1px);
  right: calc(var(--size-2, 2) * 1px);
  top: 32%;
  bottom: 30%;
  width: auto;
  min-width: 0;
  z-index: var(--z-4, 1);
  text-align: center;
  background: transparent;
  border: none;
  outline: none;
  box-shadow: none;
  font-family: var(--_cal-monetary);
  font-size: calc(var(--size-4, 8) * 1pt);
  font-weight: var(--weight-2, 500);
  user-select: text;
  -webkit-user-select: text;
}

/* ── Staged-reveal parity (host lifecycle opt-in) ────────────────────────────
   The site hides text until <body> is stamped [loaded]/[visible], then fades it
   in. site.css drives that per-TAG for native text elements; the calendar's
   leaves are custom tags, so their reveal lives here. Every hide rule is
   guarded by body[data-loading-overlay] — a foreign page without the site's
   loading lifecycle never matches, so the calendar text is simply visible. */
calendar-weekday-label,
calendar-day-number,
calendar-day-events {
  transition: opacity calc(var(--size-9, 256) * 1ms) ease-in 0ms;
}
/* Monetary values fade in AFTER the text — same stamp, delayed transition. */
calendar-day-balance-amount {
  transition: opacity calc(var(--size-9, 256) * 1ms) ease-in calc(var(--size-9, 256) * 1ms);
}
body[data-loading-overlay]:not([loaded]) calendar-weekday-label,
body[data-loading-overlay]:not([loaded]) calendar-day-number,
body[data-loading-overlay]:not([loaded]) calendar-day-events,
body[data-loading-overlay]:not([loaded]) calendar-day-balance-amount,
body[data-loading-overlay]:not([visible]) calendar-weekday-label,
body[data-loading-overlay]:not([visible]) calendar-day-number,
body[data-loading-overlay]:not([visible]) calendar-day-events,
body[data-loading-overlay]:not([visible]) calendar-day-balance-amount {
  opacity: calc(var(--size-1, 1) * 0);
}
body[data-loading-overlay][visible] calendar-weekday-label,
body[data-loading-overlay][visible] calendar-day-number,
body[data-loading-overlay][visible] calendar-day-events,
body[data-loading-overlay][visible] calendar-day-balance-amount {
  opacity: calc(var(--size-10, 512) * 0.1);
}

/* ── Month-swipe carousel (attributes stamped by the engine) ─────────────── */
calendar[carousel-clip] {
  position: relative;
  overflow: hidden;
}
calendar[carousel-animating] calendar-body,
calendar[carousel-animating] [carousel-clone] {
  transition: transform calc(var(--size-9, 256) * 1ms) ease, opacity calc(var(--size-9, 256) * 1ms) ease;
  will-change: transform, opacity;
}
calendar [carousel-clone] {
  position: absolute;
  margin: 0;
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  calendar[carousel-animating] calendar-body,
  calendar[carousel-animating] [carousel-clone] {
    transition: none;
  }
}

/* ── Responsive (standalone breakpoint mirror of the site's device rules) ──
   1023px, not 1024: the site stamps device="large-tablet" (no reorder) at
   width >= 1024, so this block must only fire strictly below that boundary. */
@media (max-width: 1023px) {
  calendar {
    order: -1;
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }
}

/* ── Print parity ─────────────────────────────────────────────────────────────
   Pre-rename the calendar PRINTED (the old container{display:none} print rule
   always lost to [grid] on specificity) with the generic-tag print treatment —
   mirror it: container zeros, section 16px white box, content zeros +
   break-avoid, group-control break-avoid. */
@media print {
  calendar {
    margin: 0 !important;
    padding: 0 !important;
    max-width: none !important;
    gap: 0 !important;
  }
  calendar-header,
  calendar-body {
    margin: calc(var(--size-5, 16) * 1px) !important;
    margin-left: calc(var(--size-5, 16) * 1px) !important;
    margin-right: calc(var(--size-5, 16) * 1px) !important;
    padding: calc(var(--size-5, 16) * 1px) !important;
    min-height: auto !important;
    max-width: none !important;
    gap: 0 !important;
    background: var(--color-white, #ffffff) !important;
  }
  calendar-weekday,
  calendar-week {
    margin: 0 !important;
    padding: 0 !important;
    max-width: none !important;
    gap: 0 !important;
    page-break-inside: avoid;
  }
  calendar-weekday-frame,
  calendar-week-frame {
    break-inside: avoid;
  }
}