/* Meeting calendar — .lc-cal grid organism
 *
 * Extracted from components.css in PR5 U1 (issue #549). Consumer:
 * MeetingCalendarComponent lands in PR5 U2 (issue forthcoming).
 *
 * Extends the v2 DS base modifier set (the brainstorm shipped --avail,
 * --booked, --past) with additional state modifiers (--booked-other,
 * --proposed, --proposed-other, --picked, --weekend) so the renamed
 * MeetingCalendarComponent can preserve the existing UX-state granularity
 * from WeekCalendarComponent. The colored states (--proposed,
 * --proposed-other, --picked, --booked-other) share a Google-Calendar-style
 * event-block anatomy: amber = awaiting selection, green = confirmed.
 * Plan: docs/plans/2026-05-17-001-feat-v2-design-system-pr5-directory-show-calendar-plan.md
 * Brainstorm: docs/brainstorms/2026-05-07-v2-design-system-redesign.md
 *
 * Multi-half-hour blocks render as a start cell plus per-band continuation
 * cells (--event-cont), fused via --event-joined (transparent bottom
 * border). The .lc-cal__cell--span-N utilities below are legacy — the
 * meeting calendar no longer emits them (each band is its own subgrid
 * row wrapper, so grid-row spans cannot cross it).
 *
 * Row wrappers use CSS subgrid (not display: contents) so role="row"
 * remains a real layout participant.
 *
 * Pico-cascade discipline:
 *   .lc-cal__cell renders on <button type="submit"> elements, and Pico
 *   (vendor/pico.sand.css) loads AFTER this file in Propshaft's lex sort.
 *   Same-specificity declarations therefore LOSE to Pico's
 *   `button, [type=submit] { padding, border, border-radius,
 *                            background-color, font-size, line-height,
 *                            margin-bottom }` rules. Every cell rule is
 *   qualified with a `.lc-cal` ancestor (specificity 0,2,0+) so it wins.
 *   Pinned by test/integration/meeting_calendar_pico_override_test.rb.
 */

/* ─── calendar cell ─── */
.lc-cal {
  display: grid;
  grid-template-columns: 64px repeat(7, 1fr);
  border: 1px solid var(--color-rule);
  border-radius: var(--r-3);
  overflow: hidden;
  background: var(--color-paper);
}
.lc-cal .lc-cal__hour, .lc-cal .lc-cal__day {
  padding: var(--sp-1) var(--sp-2);
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  color: var(--color-ink-muted);
  border-right: 1px solid var(--color-rule);
  border-bottom: 1px solid var(--color-rule);
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}
.lc-cal .lc-cal__hour {
  /* min-height, not height: explicit height blocks `align-self: stretch`,
   * which would leave the top-left corner rowheader visibly shorter than
   * the .lc-cal__day cells in the header row (those auto-size to ~36px). */
  min-height: 28px;
  /* line-height: 1 is load-bearing. Pico applies responsive root font-size
   * (`--pico-font-size` at `:where(:root)`) that bumps `1rem` to 20px at
   * viewport >=1280px. At that breakpoint `var(--fs-12)` renders at 15px,
   * and the default inherited line-height of 1.5 makes the cell's content
   * 22.5px tall — combined with padding 10px and 1px border, the cell
   * grows to 33.5px and overshoots its 28px min-height floor. The body
   * .lc-cal__cell is fixed at 28px, so the body row becomes 33.5px tall
   * with the cell sitting at the top and a visible gap below. Pinning
   * line-height to 1 keeps content at 15px (font-size) and the box at 26px,
   * which the 28px floor rounds up to — matching the body cell exactly. */
  line-height: 1;
}
.lc-cal .lc-cal__day {
  padding: var(--sp-2);
  color: var(--color-ink);
  font-weight: var(--fw-medium);
  background: var(--color-surface);
}
.lc-cal .lc-cal__hour--half {
  color: color-mix(in srgb, var(--color-ink-muted) 55%, transparent);
  font-size: 10px;
}

/* Base cell: must reset every Pico button default this rule does not
 * explicitly set, or those defaults paint over our visual contract.
 * See the file header for the Pico-cascade rationale. */
.lc-cal .lc-cal__cell {
  appearance: none;
  -webkit-appearance: none;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  font-family: inherit;
  font-size: var(--fs-12);
  font-weight: inherit;
  line-height: 1;
  color: inherit;
  text-align: center;
  text-decoration: none;
  height: 28px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-paper);
  border-right: 1px solid var(--color-rule);
  border-bottom: 1px solid color-mix(in srgb, var(--color-rule) 45%, transparent);
  cursor: pointer;
  position: relative;
}

/* Form wrappers: the <form> sits between the row grid and the button
 * cell. Reset margin so the form does not introduce vertical gaps. */
.lc-cal form {
  margin: 0;
  padding: 0;
  display: contents;
}

/* every full-hour boundary (after a half-hour cell) gets the strong rule —
 * except inside a fused multi-half-hour block, where --event-joined keeps
 * the bottom border transparent (its rule lives in the block-fusion
 * section below; the :not() here is what lets that (0,2,0) rule win
 * against these higher-specificity sibling chains). */
.lc-cal > .lc-cal__hour--half ~ .lc-cal__cell:nth-child(-n + 0) { /* placeholder */ }
.lc-cal .lc-cal__hour--half + .lc-cal__cell:not(.lc-cal__cell--event-joined),
.lc-cal .lc-cal__hour--half + .lc-cal__cell + .lc-cal__cell:not(.lc-cal__cell--event-joined),
.lc-cal .lc-cal__hour--half + .lc-cal__cell + .lc-cal__cell + .lc-cal__cell:not(.lc-cal__cell--event-joined),
.lc-cal .lc-cal__hour--half + .lc-cal__cell + .lc-cal__cell + .lc-cal__cell + .lc-cal__cell:not(.lc-cal__cell--event-joined),
.lc-cal .lc-cal__hour--half + .lc-cal__cell + .lc-cal__cell + .lc-cal__cell + .lc-cal__cell + .lc-cal__cell:not(.lc-cal__cell--event-joined) {
  border-bottom-color: var(--color-rule);
}
.lc-cal .lc-cal__cell:hover { background-color: var(--color-surface); }
.lc-cal .lc-cal__cell--avail {
  background-color: color-mix(in srgb, var(--color-primary) 8%, var(--color-paper));
  border-color: color-mix(in srgb, var(--color-primary) 25%, var(--color-rule));
}
.lc-cal .lc-cal__cell--booked {
  background-color: var(--color-primary);
  color: var(--color-ink-onfill);
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  display: flex; align-items: center; justify-content: center;
}
.lc-cal .lc-cal__cell--past {
  background: repeating-linear-gradient(45deg, var(--color-surface), var(--color-surface) 4px, transparent 4px, transparent 8px);
  cursor: not-allowed;
}

/* — Event-block state modifiers (Google-Calendar-style blocks) — */
/* Four colored states share one anatomy: tinted background in the
 * state's soft color, a 3px solid left accent bar in the state's strong
 * color, left-aligned ink text, small inner padding. Semantics:
 *   awaiting  (--proposed, --proposed-other)  -> amber  (--color-warn*)
 *   confirmed (--picked,   --booked-other)    -> green  (--color-success*)
 * Own-meeting vs other-meeting cells need no extra visual
 * differentiation — the event-block label text differentiates.
 * Cell heights stay governed by the base rule and the span-N grid rows;
 * overflow: hidden clips the event block instead of growing the cell.
 * The legacy --avail/--booked states below are untouched (another
 * calendar consumes them). */

.lc-cal .lc-cal__cell--proposed,
.lc-cal .lc-cal__cell--proposed-other,
.lc-cal .lc-cal__cell--picked,
.lc-cal .lc-cal__cell--booked-other {
  align-items: flex-start;
  justify-content: flex-start;
  text-align: left;
  padding: 2px 4px;
  overflow: hidden;
  color: var(--color-ink);
}

.lc-cal .lc-cal__cell--proposed,
.lc-cal .lc-cal__cell--proposed-other {
  background-color: var(--color-warn-soft);
  border-left: 3px solid var(--color-warn);
}

.lc-cal .lc-cal__cell--picked,
.lc-cal .lc-cal__cell--booked-other {
  background-color: var(--color-success-soft);
  border-left: 3px solid var(--color-success);
}

/* Pick-mode proposed BUTTONS keep the hover affordance. */
.lc-cal .lc-cal__cell--proposed:hover {
  background-color: color-mix(in srgb, var(--color-warn) 24%, var(--color-paper));
}

/* All four colored states render as inert divs in most modes (withdrawal
 * lives in the side panel): cursor stays default and hover stays flat so
 * none of them look clickable. */
.lc-cal div.lc-cal__cell--proposed,
.lc-cal div.lc-cal__cell--proposed-other,
.lc-cal div.lc-cal__cell--picked,
.lc-cal div.lc-cal__cell--booked-other {
  cursor: default;
}

.lc-cal div.lc-cal__cell--proposed:hover,
.lc-cal div.lc-cal__cell--proposed-other:hover {
  background-color: var(--color-warn-soft);
}

.lc-cal div.lc-cal__cell--picked:hover,
.lc-cal div.lc-cal__cell--booked-other:hover {
  background-color: var(--color-success-soft);
}

/* — Block fusion (continuation cells) — */
/* A multi-half-hour block is a start cell followed by --event-cont cells,
 * one per covered band. Continuation cells carry the same state class, so
 * tinted background + 3px left accent come from the state rules above; the
 * event-block text renders only on the start cell. --event-joined sits on
 * every block cell that has another cell of the same block directly below
 * and kills the hairline between them. The full-hour boundary rules above
 * exclude --event-joined via :not(), so this (0,2,0) rule is not repainted
 * by their stronger sibling-chain selectors. */
.lc-cal .lc-cal__cell--event-joined {
  border-bottom-color: transparent;
}

/* Inner event block: two single-line ellipsis rows (meeting title +
 * directory meta). In a 28px single cell only the title line fits — the
 * meta line clips via the cell's overflow: hidden; span-2+ cells show
 * both lines. */
.lc-cal .lc-cal__event {
  display: block;
  width: 100%;
  min-width: 0;
  font-size: 10px;
  line-height: 1.2;
  overflow: hidden;
}

.lc-cal .lc-cal__event-title,
.lc-cal .lc-cal__event-meta {
  display: block;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.lc-cal .lc-cal__event-meta {
  color: var(--color-ink-muted);
}

.lc-cal .lc-cal__cell--weekend {
  background-color: var(--color-surface);
}

/* — Multi-slot span utilities (PR5 U1) — */
/* Bounded N = HALF_HOURS.size = 24. Component (U2) clamps via
 * min(slot.half_hour_count, MAX_SPAN, HALF_HOURS.last - start_hh + 1). */

.lc-cal .lc-cal__cell--span-2  { grid-row: span 2; }
.lc-cal .lc-cal__cell--span-3  { grid-row: span 3; }
.lc-cal .lc-cal__cell--span-4  { grid-row: span 4; }
.lc-cal .lc-cal__cell--span-5  { grid-row: span 5; }
.lc-cal .lc-cal__cell--span-6  { grid-row: span 6; }
.lc-cal .lc-cal__cell--span-7  { grid-row: span 7; }
.lc-cal .lc-cal__cell--span-8  { grid-row: span 8; }
.lc-cal .lc-cal__cell--span-9  { grid-row: span 9; }
.lc-cal .lc-cal__cell--span-10 { grid-row: span 10; }
.lc-cal .lc-cal__cell--span-11 { grid-row: span 11; }
.lc-cal .lc-cal__cell--span-12 { grid-row: span 12; }
.lc-cal .lc-cal__cell--span-13 { grid-row: span 13; }
.lc-cal .lc-cal__cell--span-14 { grid-row: span 14; }
.lc-cal .lc-cal__cell--span-15 { grid-row: span 15; }
.lc-cal .lc-cal__cell--span-16 { grid-row: span 16; }
.lc-cal .lc-cal__cell--span-17 { grid-row: span 17; }
.lc-cal .lc-cal__cell--span-18 { grid-row: span 18; }
.lc-cal .lc-cal__cell--span-19 { grid-row: span 19; }
.lc-cal .lc-cal__cell--span-20 { grid-row: span 20; }
.lc-cal .lc-cal__cell--span-21 { grid-row: span 21; }
.lc-cal .lc-cal__cell--span-22 { grid-row: span 22; }
.lc-cal .lc-cal__cell--span-23 { grid-row: span 23; }
.lc-cal .lc-cal__cell--span-24 { grid-row: span 24; }

/* — Batch-selection cell states (batch slot selection U3) — */
/* Compound .lc-cal ancestor keeps (0,2,0)+ specificity so these beat
 * Pico's [type=button] paint (see file header). aria-selected is set by
 * the slot-selection Stimulus controller; CSS keys off the class only. */

.lc-cal .lc-cal__cell--batched {
  background-color: color-mix(in srgb, var(--color-primary) 28%, var(--color-paper));
  border-color: var(--color-primary);
  box-shadow: inset 0 0 0 1px var(--color-primary);
}

.lc-cal .lc-cal__cell--preview {
  background-color: color-mix(in srgb, var(--color-primary) 14%, var(--color-paper));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-primary) 50%, transparent);
}

.lc-cal .lc-cal__cell--clamp-boundary {
  box-shadow: inset 0 -2px 0 0 var(--color-danger);
}

/* — Batch-selection page layout (batch slot selection U3) — */
/* Frame area (the calendar grid) + recap panel column. Below 768px the
 * panel stacks BELOW the grid (frame is first in DOM order). */

.lc-cal-layout {
  display: flex;
  gap: var(--sp-4);
  align-items: flex-start;
}

.lc-cal-layout > turbo-frame {
  flex: 1 1 0;
  min-width: 0;
}

.lc-cal-layout .lc-cal-layout__panel {
  flex: 0 0 18rem;
}

@media (max-width: 767px) {
  .lc-cal-layout {
    flex-direction: column;
    align-items: stretch;
  }

  .lc-cal-layout .lc-cal-layout__panel {
    flex: 0 0 auto;
  }
}

/* — Subgrid row wrappers (PR5 U1) — */
/* Keeps role="row" as a real layout participant (no display: contents
 * AT-tree-removal ambiguity). */

.lc-cal [role="row"] {
  display: grid;
  grid-template-columns: subgrid;
  grid-column: 1 / -1;
}

.lc-meeting-chrome {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
}

.lc-meeting-chrome form {
  margin: 0;
}