/* Calendar Grid component (2026-08-03) -- [lpos_calendar]. Token-driven glass HUD, matches the
   .lpos-c-subpanel / .lpos-c-icon-btn / archive-card language. Self-contained: the icon-button
   and title styles are scoped under .lpos-c-calendar so this component renders correctly
   whether or not it happens to sit inside a .lpos-cell ancestor. NO-SCROLLBAR LAW: the whole
   thing is a flex/grid column that fills its panel and never grows past it -- overflow:hidden,
   fr-sized rows, no scroll under any panel size. */

.lpos-c-calendar {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  box-sizing: border-box;
  gap: var(--lpos-space-sm, 8px);
  overflow: hidden;
  font-family: var(--lpos-font-ui, 'Inter', ui-sans-serif, system-ui, sans-serif);
}

/* ---- head row: month title + prev/next nav cluster ---- */
.lpos-c-calendar__head {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--lpos-gap, 12px);
  min-height: var(--lpos-titlebar-h, 64px);
}
.lpos-c-calendar__title {
  flex: 1 1 auto;
  min-width: 0;
}
.lpos-c-calendar__title h2 {
  margin: 0;
  font: 700 var(--lpos-title-size-secondary, 1.1rem)/1.2 var(--lpos-font-display, 'Space Grotesk', ui-sans-serif, system-ui, sans-serif);
  color: var(--lpos-ink, #EAF2FB);
  letter-spacing: var(--lpos-tracking-heading, -0.01em);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* BARE icon-button group (2026-08-10): dropped the subpanel/cluster wrapper classes; the row
   layout and gap they supplied move here. */
.lpos-c-calendar__nav {
  flex: 0 0 auto;
  align-self: center;
  display: flex;
  align-items: center;
  gap: var(--lpos-gap, 12px);
}

/* ---- honest-empty disclosure: demo_events() is illustrative sample data -- same "Sample" chip
   language as StatTile's .lpos-c-stat-tile__sample, cloned here (no shared class across
   components); cleared automatically once a real lpos_calendar_events filter is registered. ---- */
.lpos-c-calendar__sample {
  flex: 0 0 auto;
  align-self: center;
  font: 600 var(--lpos-text-2xs, 12px)/1 var(--lpos-font-ui, 'Inter', ui-sans-serif, system-ui, sans-serif);
  letter-spacing: var(--lpos-tracking-label, 0.08em);
  text-transform: uppercase;
  color: var(--lpos-muted, #A8B2C7);
  padding: var(--lpos-space-xs, 4px) var(--lpos-space-sm, 8px);
  border-radius: var(--lpos-radius-sm, 4px);
  background: var(--lpos-glass-2, rgba(255,255,255,0.055));
  border: var(--lpos-border-width, 1px) solid var(--lpos-glass-rule, rgba(255,255,255,0.10));
}

/* ---- icon buttons: ONE recipe for chat/form/kanban/calendar now lives in the COMPONENT ICON
   BUTTON block at the end of console-tokens.css (2026-08-10, JD: "make all four match"). This
   sheet's local copy is deleted -- the four had drifted into four different buttons. ---- */

/* ---- weekday header row: 7 equal columns, muted eyebrow-style labels ---- */
.lpos-c-calendar__weekdays {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: var(--lpos-space-xs, 4px);
}
.lpos-c-calendar__weekdays span {
  text-align: center;
  font: 600 var(--lpos-text-2xs, 12px)/1 var(--lpos-font-ui, 'Inter', ui-sans-serif, system-ui, sans-serif);
  letter-spacing: var(--lpos-tracking-label, 0.08em);
  text-transform: uppercase;
  color: var(--lpos-muted, #A8B2C7);
  padding: var(--lpos-space-xs, 4px) 0;
}

/* ---- day grid: fixed 6x7 frame, fr-sized so it always fits the panel, never scrolls ---- */
.lpos-c-calendar__grid {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: var(--lpos-space-xs, 4px);
  overflow: hidden;
}
.lpos-c-calendar__week {
  flex: 1 1 0;
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: var(--lpos-space-xs, 4px);
}

/* ---- day cell ---- */
/* CHIP-IN-PANEL EXCEPTION (documented 2026-08-10, JD's law pass -- the same exception media.php
   has carried since 2026-08-04, written down here for the Component sheets that lacked it).
   The one-panel law bans a PANEL inside a panel. It does not ban a CHIP inside a panel: a small
   round or pill-shaped marker that carries its own background/border to read as a distinct token
   ON a surface -- avatars, timeline nodes, status pills, calendar day cells, sample badges, stat
   icons. These are Assets with a shape, not panels: they never take the panel radius, never take
   the panel blur, and never contain other content. A law audit will flag them as "bare chrome
   inside chrome"; that is expected and correct. If one of these ever grows the panel radius plus
   backdrop-filter, it has stopped being a chip and the law applies again. */
.lpos-c-calendar__day {
  min-width: 0;
  min-height: 0;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: var(--lpos-space-xs, 4px);
  border-radius: var(--lpos-radius-sm, 4px);
  background: var(--lpos-glass-1, rgba(255,255,255,0.035));
  border: var(--lpos-border-width, 1px) solid transparent;
  overflow: hidden;
}
.lpos-c-calendar__day--out {
  background: transparent;
}
.lpos-c-calendar__day--out .lpos-c-calendar__daynum {
  color: var(--lpos-ink-disabled, #6C7A93);
}
.lpos-c-calendar__day--today {
  border-color: var(--lpos-accent, #00D4FF);
  background: var(--lpos-accent-soft, color-mix(in srgb, var(--lpos-accent) 10%, transparent));
}
.lpos-c-calendar__day--today .lpos-c-calendar__daynum {
  color: var(--lpos-accent, #00D4FF);
}
.lpos-c-calendar__daynum {
  flex: 0 0 auto;
  font: 700 var(--lpos-text-sm, 14px)/1 var(--lpos-font-ui, 'Inter', ui-sans-serif, system-ui, sans-serif);
  color: var(--lpos-ink, #EAF2FB);
}

/* ---- event dots ---- */
.lpos-c-calendar__dots {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  align-items: flex-end;
  gap: var(--lpos-space-xs, 4px);
  margin-top: auto;
  flex-wrap: wrap;
}
.lpos-c-calendar__dot {
  flex: 0 0 auto;
  width: var(--lpos-space-xs, 4px);
  height: var(--lpos-space-xs, 4px);
  border-radius: var(--lpos-radius-lg, 16px);
  background: var(--lpos-accent, #00D4FF);
}
.lpos-c-calendar__day--out .lpos-c-calendar__dot {
  background: var(--lpos-ink-disabled, #6C7A93);
}
.lpos-c-calendar__more {
  flex: 0 0 auto;
  font: 600 var(--lpos-text-2xs, 12px)/1 var(--lpos-font-ui, 'Inter', ui-sans-serif, system-ui, sans-serif);
  color: var(--lpos-accent, #00D4FF);
}

/* ---- narrow panels: tighten text one notch so 7 columns keep breathing room ---- */
@media (max-width: 420px) {
  .lpos-c-calendar__daynum {
    font-size: var(--lpos-text-2xs, 12px);
  }
  .lpos-c-calendar__weekdays span {
    font-size: calc(var(--lpos-text-2xs, 12px) * 0.85);
  }
}