/*
 * Shared compact month component styling.
 *
 * Every mount uses these classes unchanged: `.compact-month-grid` (desktop
 * and print), `.compact-month-agenda` (narrow viewports), and the shared
 * `.compact-month-occ*` occurrence treatment. Kind, lifecycle, and temporal
 * state are always carried by text and markup first; colour is additive.
 *
 * Two density rules live here. Inside the grid an occurrence title is painted
 * within the line budget the renderer declares on the component
 * (`--compact-month-title-lines`), so one long notice cannot decide how tall a
 * week is; the text itself is never removed, so the clip is visual only and
 * assistive technology still reads the whole title. The narrow agenda, the day
 * agenda panel, the event preview and print all show the same title in full,
 * so the clipped reading never exists anywhere it would be the only one.
 */

.compact-month {
  font: 14px/1.45 var(--font-interface, ui-sans-serif, system-ui, sans-serif);
  color: var(--ink, #12181f);
}

/* ---------- desktop/print grid ---------- */

.compact-month-grid {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

.compact-month-grid caption {
  caption-side: top;
  text-align: left;
  font-weight: 600;
  font-size: 15px;
  padding: 0 0 8px;
}

.compact-month-grid th {
  border: 1px solid var(--rule, #dde1e7);
  padding: 4px 6px;
  background: var(--paper-2, #eceef2);
  text-align: left;
  font-size: 12px;
  color: var(--muted, #5b6470);
}

.compact-month-day {
  border: 1px solid var(--rule, #dde1e7);
  vertical-align: top;
  padding: 4px;
  min-height: 4.5em;
}

.compact-month-day-outside {
  background: var(--paper, #f5f6f8);
  color: var(--muted, #5b6470);
}

.compact-month-day-today {
  outline: 2px solid var(--color-action, #1a44e0);
  outline-offset: -2px;
}

.compact-month-date {
  display: block;
  font-size: 12px;
  font-weight: 600;
  margin-bottom: 2px;
}

.compact-month-occurrences,
.compact-month-overflow-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.compact-month-occ {
  border-left: 3px solid var(--rule-strong, #7a828f);
  padding-left: 4px;
}

/* Kind, supplied clock time and lifecycle are separate flex items, so they
   sit outside the clipped title: what a cell had to clip is never one of the
   facts a reader scans for. */
.compact-month-occ-link {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: baseline;
  text-decoration: none;
  color: inherit;
  min-width: 0;
}

.compact-month-occ-link:hover .compact-month-occ-title,
.compact-month-occ-link:focus .compact-month-occ-title,
.compact-month-occ-inspect:hover .compact-month-occ-title,
.compact-month-occ-inspect:focus .compact-month-occ-title {
  text-decoration: underline;
}

/* Kind is always spelled out in text; colour on the left rule is additive. */
.compact-month-occ-kind {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--muted, #5b6470);
}

.compact-month-occ-event { border-left-color: var(--color-brand, #1b3a8f); }
.compact-month-occ-deadline { border-left-color: var(--color-danger, #c01829); }
.compact-month-occ-window_open,
.compact-month-occ-window_close { border-left-color: var(--color-caution, #8a5a00); }
.compact-month-occ-milestone { border-left-color: var(--color-success, #1a6b34); }

.compact-month-occ-time {
  font-size: 11px;
  color: var(--muted, #5b6470);
}

.compact-month-occ-title {
  font-size: 12px;
  /* A single unbroken publisher token (a long PIN, a URL-like reference) must
     wrap rather than push the table wider than its column. */
  overflow-wrap: anywhere;
  min-width: 0;
}

/* The visual line budget, applied only inside the month grid — the overview.
   The narrow agenda below, the day agenda panel, the event preview and print
   all render the same title in full. The text stays in the document either
   way: this clips painting, never content, so the accessible name of the link
   remains the complete published title. */
.compact-month-grid .compact-month-occ-title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: var(--compact-month-title-lines, 2);
  line-clamp: var(--compact-month-title-lines, 2);
  overflow: hidden;
}

/* Past occurrences are muted by weight and a dedicated colour token — never
   opacity, which would drag the already-muted foreground below the 4.5:1
   contrast floor against the page background. */
.compact-month-occ-past .compact-month-occ-title,
.compact-month-occ-past .compact-month-occ-kind,
.compact-month-occ-past .compact-month-occ-time {
  color: var(--muted, #5b6470);
  font-weight: 400;
}

/* Upcoming deadlines and window boundaries stay visually prominent. */
.compact-month-occ-future.compact-month-occ-deadline .compact-month-occ-title,
.compact-month-occ-future.compact-month-occ-window_open .compact-month-occ-title,
.compact-month-occ-future.compact-month-occ-window_close .compact-month-occ-title,
.compact-month-occ-current .compact-month-occ-title {
  font-weight: 700;
}

.compact-month-occ-flag {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  padding: 1px 4px;
  border-radius: 2px;
  border: 1px solid currentColor;
}

.compact-month-occ-flag-cancelled {
  color: var(--color-danger, #c01829);
}
.compact-month-occ-lifecycle-cancelled .compact-month-occ-title {
  text-decoration: line-through;
}

.compact-month-occ-flag-rescheduled {
  color: var(--color-caution, #8a5a00);
}

.compact-month-occ-source {
  font-size: 10px;
  color: var(--muted, #5b6470);
}

/* ---------- on-demand event preview (primary inspect) ---------- */

/* Progressive enhancement CSS swap: until the binder marks a container ready,
   only the static title link is offered. After ready, that link is hidden and
   the title-sized inspect button plus a separately named full-record link are
   revealed. Failed enhancement leaves the static title link reachable. */
.compact-month-occ-preview,
.compact-month-occ-full-record {
  display: none;
}

[data-calendar-event-preview-ready] .compact-month-occ-link {
  display: none;
}

[data-calendar-event-preview-ready] .compact-month-occ-preview {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: baseline;
  width: 100%;
  margin: 0;
  padding: 0;
  font: inherit;
  color: inherit;
  text-align: left;
  background: transparent;
  border: 0;
  border-radius: 0;
  cursor: pointer;
  min-width: 0;
  /* Comfortable target without inventing a second visual hierarchy. */
  min-height: 24px;
}

[data-calendar-event-preview-ready] .compact-month-occ-full-record {
  display: inline-block;
  margin-top: 2px;
  font-size: 10px;
  font-weight: 600;
  color: var(--color-action, #1a44e0);
  /* Keep the named destination distinct from the title-sized inspect control. */
  text-decoration: underline;
}

[data-calendar-event-preview-ready] .compact-month-occ-preview:hover {
  background: var(--paper-2, #eceef2);
}

.calendar-event-preview-dialog {
  max-width: 34rem;
  width: calc(100vw - 32px);
  padding: 0;
  border: 1px solid var(--rule-strong, #7a828f);
  border-radius: 4px;
  background: var(--paper-0, #fff);
  color: var(--ink, #12181f);
}

.calendar-event-preview-dialog::backdrop {
  background: rgb(18 24 31 / 45%);
}

.calendar-event-preview-inner {
  padding: 16px;
  font: 14px/1.5 var(--font-interface, ui-sans-serif, system-ui, sans-serif);
}

.calendar-event-preview-close {
  float: right;
  margin: -4px -4px 0 8px;
  padding: 4px 10px;
  font: inherit;
  font-size: 13px;
  color: inherit;
  background: transparent;
  border: 1px solid var(--rule-strong, #7a828f);
  border-radius: 2px;
  cursor: pointer;
  min-height: 32px;
}

.calendar-event-preview-kicker {
  margin: 0;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--muted, #5b6470);
}

.calendar-event-preview-title {
  margin: 4px 0 8px;
  font-size: 18px;
  line-height: 1.25;
  /* A long procurement title wraps rather than pushing the dialog wide. */
  overflow-wrap: anywhere;
}

.calendar-event-preview-notice {
  margin: 0 0 8px;
  font-weight: 600;
  color: var(--color-danger, #c01829);
}

.calendar-event-preview-facts {
  margin: 0;
  display: grid;
  grid-template-columns: minmax(0, max-content) minmax(0, 1fr);
  gap: 2px 12px;
}

.calendar-event-preview-row {
  display: contents;
}

.calendar-event-preview-facts dt {
  font-weight: 600;
  color: var(--muted, #5b6470);
}

.calendar-event-preview-facts dd {
  margin: 0;
  overflow-wrap: anywhere;
}

.calendar-event-preview-detail,
.calendar-event-preview-detail-status {
  margin: 10px 0 0;
}

.calendar-event-preview-detail-status {
  color: var(--muted, #5b6470);
  font-size: 13px;
}

.calendar-event-preview-actions {
  margin: 14px 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: baseline;
}

.calendar-event-preview-open {
  font-weight: 600;
}

.calendar-event-preview-source {
  font-size: 13px;
  color: var(--muted, #5b6470);
}

/* Both controls in the panel's action row are real destinations a reader is
   asked to choose between, so both are laid out as targets rather than as run
   of text. The row itself already separates them; this gives each one a box a
   pointer can land on without hitting its neighbour. */
.calendar-event-preview-open,
.calendar-event-preview-source {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  min-height: 24px;
  padding: 2px 0;
}

.compact-month-overflow {
  margin-top: 2px;
}
.compact-month-overflow > summary {
  font-size: 11px;
  color: var(--color-action, #1a44e0);
  cursor: pointer;
}

/* ---------- crowded-day agenda (PX-02) ---------- */

/* The two readings of a crowded day are mutually exclusive. Until a binding
   marks the container ready, the native disclosure is the reading on offer,
   because it is the one that works without scripting. Once the agenda
   behaviour is listening, the disclosure stands down and the trigger — which
   opens the complete day beside the month instead of expanding the row —
   takes its place. */
.compact-month-day-more {
  display: none;
}

[data-calendar-day-agenda-ready] .compact-month-overflow {
  display: none;
}

[data-calendar-day-agenda-ready] .compact-month-day-more {
  display: inline-block;
  margin-top: 2px;
  padding: 2px 8px;
  font: inherit;
  font-size: 11px;
  font-weight: 600;
  color: var(--color-action, #1a44e0);
  background: transparent;
  border: 1px solid currentColor;
  border-radius: 2px;
  cursor: pointer;
  /* Real text on a real target, never a bare glyph. */
  min-height: 24px;
}

[data-calendar-day-agenda-ready] .compact-month-day-more:hover {
  background: var(--paper-2, #eceef2);
}

.calendar-day-agenda-dialog {
  max-width: 40rem;
  width: min(40rem, calc(100vw - 24px));
  max-height: calc(100vh - 24px);
  padding: 0;
  border: 1px solid var(--rule-strong, #7a828f);
  border-radius: 4px;
  background: var(--paper-0, #fff);
  color: var(--ink, #12181f);
}

.calendar-day-agenda-dialog::backdrop {
  background: rgb(18 24 31 / 45%);
}

.calendar-day-agenda-inner {
  padding: 16px;
  font: 14px/1.5 var(--font-interface, ui-sans-serif, system-ui, sans-serif);
}

.calendar-day-agenda-close {
  float: right;
  margin: -4px -4px 0 8px;
  padding: 4px 10px;
  font: inherit;
  font-size: 13px;
  color: inherit;
  background: transparent;
  border: 1px solid var(--rule-strong, #7a828f);
  border-radius: 2px;
  cursor: pointer;
  min-height: 32px;
}

.calendar-day-agenda-kicker {
  margin: 0;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--muted, #5b6470);
}

.calendar-day-agenda-title {
  margin: 4px 0 2px;
  font-size: 18px;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.calendar-day-agenda-count {
  margin: 0 0 10px;
  font-size: 13px;
  color: var(--muted, #5b6470);
}

.calendar-day-agenda-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.calendar-day-agenda-item {
  border-left: 3px solid var(--rule-strong, #7a828f);
  padding-left: 10px;
  min-width: 0;
}

.calendar-day-agenda-item-event { border-left-color: var(--color-brand, #1b3a8f); }
.calendar-day-agenda-item-deadline { border-left-color: var(--color-danger, #c01829); }
.calendar-day-agenda-item-window_open,
.calendar-day-agenda-item-window_close { border-left-color: var(--color-caution, #8a5a00); }
.calendar-day-agenda-item-milestone { border-left-color: var(--color-success, #1a6b34); }

.calendar-day-agenda-item-meta {
  margin: 0 0 2px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: baseline;
  font-size: 11px;
  color: var(--muted, #5b6470);
}

.calendar-day-agenda-item-kind {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.calendar-day-agenda-item-flag {
  font-weight: 700;
  text-transform: uppercase;
  padding: 1px 4px;
  border-radius: 2px;
  border: 1px solid currentColor;
}

.calendar-day-agenda-item-flag-cancelled { color: var(--color-danger, #c01829); }
.calendar-day-agenda-item-flag-rescheduled { color: var(--color-caution, #8a5a00); }

/* Cancellation is stated in its own sentence before the link, so a reader
   never has to infer it from the styling of the title. */
.calendar-day-agenda-item-notice {
  margin: 0 0 2px;
  font-weight: 600;
  color: var(--color-danger, #c01829);
}

/* The unabridged title. Nothing clips it here — this panel exists to be the
   place the whole title is readable. */
.calendar-day-agenda-item-link {
  display: block;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.35;
  overflow-wrap: anywhere;
  /* A comfortable target for a finger as well as a pointer. */
  min-height: 24px;
}

.calendar-day-agenda-item-lifecycle-cancelled .calendar-day-agenda-item-link {
  text-decoration-line: underline line-through;
}

.calendar-day-agenda-item-where {
  margin: 2px 0 0;
  font-size: 13px;
  color: var(--muted, #5b6470);
  overflow-wrap: anywhere;
}

.compact-month-full-list {
  margin-top: 8px;
  font-size: 13px;
}

/* ---------- narrow viewports: agenda list replaces the grid ---------- */

.compact-month-agenda {
  display: none;
  list-style: none;
  margin: 0;
  padding: 0;
}

.compact-month-agenda-empty {
  display: none;
}

@media (max-width: 640px) {
  .compact-month-grid {
    display: none;
  }
  .compact-month-agenda,
  .compact-month-agenda-empty {
    display: block;
  }
  .compact-month-agenda-day {
    border-bottom: 1px solid var(--rule, #dde1e7);
    padding: 8px 0;
  }
  .compact-month-agenda-day .compact-month-date {
    font-size: 13px;
  }

  /* A finger needs a real target. The title-sized inspect control already
     fills the row; give it a full 44px minimum on the narrow agenda, and keep
     the named full-record link equally reachable beside it. */
  [data-calendar-event-preview-ready] .compact-month-occ-preview {
    min-height: 44px;
    padding: 4px 0;
  }

  [data-calendar-event-preview-ready] .compact-month-occ-full-record {
    min-height: 44px;
    padding: 8px 0;
    font-size: 12px;
  }

  /* The same finger reaches the panel the trigger opens. Its Close control and
     both of its destinations therefore take the full 44px target too, so
     inspecting an event on a phone never ends at a control too small to hit or
     too close to the one beside it. */
  .calendar-event-preview-close {
    min-height: 44px;
    min-width: 44px;
    padding: 8px 14px;
  }
  .calendar-event-preview-actions {
    gap: 8px 16px;
    align-items: stretch;
  }
  .calendar-event-preview-open,
  .calendar-event-preview-source {
    min-height: 44px;
    padding: 8px 0;
  }

  /* The agenda trigger is a primary control on a narrow viewport — it is how a
     reader reaches a crowded day at all — so it gets a full-width row and a
     real 44px target rather than a chip wedged beside the last event. */
  [data-calendar-day-agenda-ready] .compact-month-day-more {
    display: block;
    width: 100%;
    min-height: 44px;
    margin-top: 8px;
    padding: 8px 12px;
    font-size: 13px;
    text-align: left;
  }

  /* At this width the panel is the page: full-bleed, and its own scroller, so
     a high-density day scrolls inside the agenda instead of the document. */
  .calendar-day-agenda-dialog {
    width: calc(100vw - 16px);
    max-width: none;
    max-height: calc(100vh - 16px);
  }

  .calendar-day-agenda-list {
    overflow-y: auto;
  }

  /* Every event in the agenda is a touch target in its own right. */
  .calendar-day-agenda-item-link {
    min-height: 44px;
    padding: 4px 0;
  }

  .calendar-day-agenda-close {
    min-height: 44px;
    min-width: 44px;
  }
}

/* ---------- print: never fracture, always fully disclosed ---------- */

@media print {
  .compact-month-grid {
    display: table !important;
  }
  .compact-month-agenda,
  .compact-month-agenda-empty {
    display: none !important;
  }
  .compact-month-day,
  .compact-month-grid tr {
    break-inside: avoid;
  }
  /* A closed native <details> can stay excluded from Chromium's print
     layout even under a `display` override, so the reliable mechanism is
     the `bindCompactMonthPrintDisclosure` companion binder setting the real
     `open` attribute before printing. This CSS is defense in depth only,
     for engines where the override above does take effect. */
  .compact-month-overflow > *:not(summary) {
    display: block !important;
  }

  /* A printed month is read without any control at all, so the disclosure
     comes back even on an enhanced page and the agenda trigger — which can
     only open a panel that will never be on the paper — goes away. */
  [data-calendar-day-agenda-ready] .compact-month-overflow {
    display: block !important;
  }
  .compact-month-day-more,
  [data-calendar-day-agenda-ready] .compact-month-day-more,
  .calendar-day-agenda-dialog {
    display: none !important;
  }

  /* Nothing on paper is one control away from its full reading, so the line
     budget is lifted and every title prints complete. */
  .compact-month-grid .compact-month-occ-title {
    display: block !important;
    -webkit-line-clamp: none !important;
    line-clamp: none !important;
    overflow: visible !important;
  }
}

/* ---------- keyboard/focus ---------- */

.compact-month-occ-link:focus-visible,
.compact-month-occ-full-record:focus-visible,
.compact-month-occ-source:focus-visible,
.compact-month-occ-preview:focus-visible,
.compact-month-day-more:focus-visible,
.compact-month-full-list a:focus-visible,
.compact-month-overflow > summary:focus-visible,
.calendar-event-preview-dialog a:focus-visible,
.calendar-event-preview-close:focus-visible,
.calendar-day-agenda-dialog a:focus-visible,
.calendar-day-agenda-close:focus-visible {
  outline: 2px solid var(--color-action, #1a44e0);
  outline-offset: 2px;
}

/* A calendar container that survives its invoking event keeps focus visible
   when the preview hands focus back to it. */
.compact-month:focus-visible {
  outline: 2px solid var(--color-action, #1a44e0);
  outline-offset: 2px;
}

@media print {
  /* Paper keeps the static title destination and drops interactive inspect
     chrome; a printed month owes every title without requiring a control. */
  .compact-month-occ-preview,
  .compact-month-occ-full-record,
  .calendar-event-preview-dialog {
    display: none !important;
  }

  [data-calendar-event-preview-ready] .compact-month-occ-link {
    display: flex !important;
  }
}