/* ============================================================================
   accordion.css — self-contained stylesheet for the <accordion> sidebar module
   ----------------------------------------------------------------------------
   Self-descriptive accordion-* tag family (Bootstrap-style one-prefix naming):

     accordion                                   root (sidebar)
     ├─ accordion-month-nav                      Previous / Next month
     │  └─ accordion-pane > accordion-month-nav-frame > -inner > -buttons
     │       └─ accordion-nav-button ×2
     ├─ accordion-today                          Go-to-today
     │  └─ accordion-pane > accordion-today-frame > -inner > -buttons
     │       └─ accordion-nav-button
     └─ accordion-categories                     the five category accordions
        └─ accordion-pane ×5
             ├─ accordion-summary > -inner > -actions
             │    ├─ accordion-category-button   (Income / Expenses / …)
             │    └─ accordion-empty-note        ("No transactions found")
             └─ accordion-details > accordion-details-inner   (rows injected by JS)
     leaves: accordion-label-wrap > accordion-label

   PORTABILITY CONTRACT — same as calendar.css: every rule keys on the
   accordion-* TAGS, every token resolves as var(--site-token, fallback), so
   markup + this file render correctly without the host site's utility CSS.
   In-repo load order: AFTER site.css; values are the NET result of the
   attribute stack each element carries, so double-application is a no-op.
   ========================================================================== */

/* ── Module tokens ───────────────────────────────────────────────────────── */
accordion {
  --_acc-gray:    var(--color-gray-2, #cccccc);
  --_acc-primary: var(--color-primary, #000000);
  --_acc-accent:  var(--accent-color, #000000);
  --_acc-font:    var(--font-family-default, 'Specter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);
}
@media (prefers-color-scheme: dark) {
  accordion {
    --_acc-gray:    var(--color-gray-2, #2a2a2a);
    --_acc-primary: var(--color-primary, #ffffff);
    --_acc-accent:  var(--accent-color, #ffffff);
  }
}
:root[data-theme="dark"] accordion {
  --_acc-gray:    var(--color-gray-2, #2a2a2a);
  --_acc-primary: var(--color-primary, #ffffff);
  --_acc-accent:  var(--accent-color, #ffffff);
}
:root[data-theme="light"] accordion {
  --_acc-gray:    var(--color-gray-2, #cccccc);
  --_acc-primary: var(--color-primary, #000000);
  --_acc-accent:  var(--accent-color, #000000);
}

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

/* ── Regions ─────────────────────────────────────────────────────────────── */
accordion-month-nav,
accordion-today,
accordion-categories {
  display: grid;
  gap: calc(var(--size-3, 4) * 1px);
  width: stretch;
}
accordion-pane {
  display: grid;
  gap: calc(var(--size-3, 4) * 1px);
}

/* ── Structural frames / inners / button rows ────────────────────────────── */
accordion-month-nav-frame,
accordion-today-frame,
accordion-summary,
accordion-details {
  display: grid;
  gap: calc(var(--size-5, 16) * 1px);
}
accordion-month-nav-inner,
accordion-today-inner,
accordion-summary-inner,
accordion-details-inner {
  display: flex;
  flex-direction: column;
  gap: calc(var(--size-5, 16) * 1px);
  width: 100%;
  height: 100%;
  flex: 0 1 auto;
  min-width: 0;
}
accordion-month-nav-buttons,
accordion-today-buttons,
accordion-summary-actions {
  display: flex;
  gap: calc(var(--size-3, 4) * 1px);
}
/* The runtime transaction host (calendar.js _ensureCategoryHost) is stamped
   with [gap] (4px), not [space] (16px) — mirror that distinction standalone. */
accordion-details-inner[gap] {
  gap: calc(var(--size-3, 4) * 1px);
}
/* The summary row anchors its absolutely-positioned empty-note overlay. */
accordion-summary-actions {
  position: relative;
}

/* ── Buttons (nav / category) ────────────────────────────────────────────── */
accordion-nav-button,
accordion-category-button,
accordion-empty-note {
  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(--_acc-primary);
  border-radius: calc(var(--size-4, 8) * 1px);
  padding: calc(var(--size-4, 8) * 1px);
  background: var(--_acc-gray);
  transition: var(--transition-skeleton-fade, background calc(var(--size-9, 256) * 1ms) ease-in);
  cursor: pointer;
}
accordion-nav-button *,
accordion-category-button * {
  cursor: pointer;
}
accordion-nav-button:hover,
accordion-category-button:hover {
  background: var(--_acc-accent);
}
accordion-nav-button[data-state~="selected"],
accordion-category-button[data-state~="selected"] {
  background: var(--_acc-accent);
  border-style: var(--border-style-strong, solid);
}
/* goto-today carries data-state="click today" — solid border like the site's
   attr-only [data-state~="today"] rule. */
accordion-nav-button[data-state~="today"] {
  border-style: var(--border-style-strong, solid);
}

/* "No transactions found" — non-interactive overlay pinned over the summary.
   Hidden until the engine flashes it with data-state~="notify". */
accordion-empty-note {
  position: absolute;
  pointer-events: none;
  cursor: default;
  z-index: var(--z-5, 9999);
  opacity: calc(var(--size-1, 1) * 0);
}
accordion-empty-note[data-state~="notify"] {
  opacity: calc(var(--size-10, 512) * 0.1);
}

/* ── Details (collapsed by default; rows injected by the engine) ─────────── */
accordion-details[hidden],
accordion-details[data-state="closed"] {
  display: none;
  pointer-events: none;
}

/* ── Leaves ──────────────────────────────────────────────────────────────── */
accordion-label-wrap {
  display: block;
  width: stretch;
  white-space: nowrap;
}
accordion-label {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  white-space: nowrap;
}

/* ── Staged-reveal parity (host lifecycle opt-in) ────────────────────────────
   Guarded by body[data-loading-overlay] — a foreign page without the site's
   loading lifecycle never matches, so the labels are simply visible. */
accordion-label {
  transition: opacity calc(var(--size-9, 256) * 1ms) ease-in 0ms;
}
body[data-loading-overlay]:not([loaded]) accordion-label,
body[data-loading-overlay]:not([visible]) accordion-label {
  opacity: calc(var(--size-1, 1) * 0);
}
body[data-loading-overlay][visible] accordion-label {
  opacity: calc(var(--size-10, 512) * 0.1);
}

/* ── Responsive (standalone mirror of the site's device rules; 1023px — the
   site stamps device="large-tablet" (no reflow) at width >= 1024) ─────────── */
@media (max-width: 1023px) {
  accordion {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }
}

/* ── Print parity ─────────────────────────────────────────────────────────────
   Pre-rename the sidebar 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 {
  accordion {
    margin: 0 !important;
    padding: 0 !important;
    max-width: none !important;
    gap: 0 !important;
  }
  accordion-month-nav,
  accordion-today,
  accordion-categories {
    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;
  }
  accordion-pane {
    margin: 0 !important;
    padding: 0 !important;
    max-width: none !important;
    gap: 0 !important;
    page-break-inside: avoid;
  }
  accordion-month-nav-frame,
  accordion-today-frame,
  accordion-summary,
  accordion-details {
    break-inside: avoid;
  }
}