/* portal-calendar.css — owned by P6 (month calendar + archive + view
 * toolbar). Ported declaration by declaration from the legacy event portal
 * (products/zasah internal/ui/home_pro.go renderViewToolbar /
 * renderCalendarDesktop / renderCalendarMobile /
 * renderCalendarSelectedEventCard, and the archive header row), with their
 * Tailwind utilities resolved against the compiled prod stylesheet
 * (tools/twdict.py resolve): rounded-md/lg/xl/2xl are the radius token -2/
 * +0/+4/+8, font-black compiles to 700, text-text-high/text-text-low are
 * no-ops on prod. Legacy colour vars map to the shared --portal-* tokens per
 * PLAN.md §3 so the brick stays reusable on a light theme; the overlays prod
 * hard-codes on its own black surfaces (bg-black/30, bg-black/40) stay
 * literal, as they are a self-contained pair. */

/* View area: prod's #events-root - the heading, the toolbar and whichever
 * content the toolbar selects, swapped together by the toolbar's htmx links
 * (compose_lists.go eventViewArea). Prod spaces them
 * `flex flex-col gap-4 md:gap-6` with `mb-10` under the toolbar. */
[data-portal-variant="portal_view_area"] { display: flex; flex-direction: column; gap: 1rem; }
[data-portal-variant="portal_view_area"] > [data-portal-node="content_list"],
[data-portal-variant="portal_view_area"] > [data-portal-node="calendar"] { margin-top: 1.5rem; }
@media (min-width: 768px) {
  [data-portal-variant="portal_view_area"] { gap: 1.5rem; }
  [data-portal-variant="portal_view_area"] > [data-portal-node="content_list"],
  [data-portal-variant="portal_view_area"] > [data-portal-node="calendar"] { margin-top: 1rem; }
}

/* View toolbar (#events-toolbar-row + #events-view-selector): ONE pill that
 * holds the two view tabs and, in calendar view, the month switcher. The row
 * clips the pill instead of wrapping it, exactly as prod's
 * `w-full overflow-hidden` does. */
.portal-view-toolbar { display: block; width: 100%; overflow: hidden; }
.portal-view-toolbar-pill {
  display: inline-flex; width: max-content; min-width: max-content; align-items: center;
  flex-wrap: nowrap; white-space: nowrap; background: var(--portal-surface);
  border: 1px solid var(--portal-border); border-radius: calc(var(--portal-radius) + 4px); padding: .25rem;
}
.portal-view-toolbar-tab {
  flex-shrink: 0; display: flex; align-items: center; padding: 0 1rem; height: 2.5rem;
  border-radius: var(--portal-radius); color: var(--portal-text);
  font-weight: 700; font-size: .75rem; line-height: 1rem; letter-spacing: .1em; text-transform: uppercase;
}
.portal-view-toolbar-tab.is-active { background: var(--portal-accent); color: var(--portal-accent-ink); }
.portal-view-toolbar-tab:hover:not(.is-active) { color: var(--portal-accent); }
.portal-view-toolbar-months { display: flex; align-items: center; flex: 0 0 auto; white-space: nowrap; }
/* Chevrons: prod paints them `text-text-low`, a class that was never compiled
 * into the prod stylesheet (RULES.md #4), so on prod they simply inherit the
 * page text colour - a muted token here read 0.34 alpha against prod's 0.9
 * (style-diff hs-p6-archive-year-link, 2026-09-20). */
.portal-view-toolbar-nav {
  display: flex; align-items: center; justify-content: center; height: 2.5rem; width: 2.5rem;
  border-radius: var(--portal-radius); color: inherit;
  transition: all .15s cubic-bezier(.4, 0, .2, 1);
}
.portal-view-toolbar-nav:hover { background: var(--portal-surface-alt); color: var(--portal-accent); }
.portal-view-toolbar-month {
  display: flex; align-items: center; justify-content: center; width: 11rem; height: 2.5rem;
  padding: 0 .5rem; border-radius: var(--portal-radius); white-space: nowrap;
  font-size: .75rem; line-height: 1rem; font-weight: 700; letter-spacing: .12em;
  color: var(--portal-accent); font-variant-numeric: tabular-nums;
}
.portal-view-toolbar-month-short { display: none; }
@media (max-width: 767.98px) {
  .portal-view-toolbar-month { width: 6rem; font-size: 11px; }
  .portal-view-toolbar-month-full { display: none; }
  .portal-view-toolbar-month-short { display: inline; }
}

/* Month grid (#calendar-desktop): the day grid beside the selected-day
 * panel. Prod widens the Saturday column to 2fr and always draws six week
 * rows, so the box keeps one height whatever month is shown.
 * The height is prod's own viewport formula; --portal-header-offset is the
 * measured header height + 12 that js/portal-frame.js publishes (prod's
 * --header-anchor-offset); the 120px in the formula is the static value
 * prod itself ships until its own script has measured. */
.portal-calendar {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(280px, .9fr);
  height: calc(100vh - var(--portal-header-offset, 120px) - 190px);
  border: 1px solid var(--portal-border); border-radius: calc(var(--portal-radius) + 8px);
  background: var(--portal-surface); overflow: hidden;
}
.portal-calendar-main { display: flex; flex-direction: column; min-height: 0; min-width: 0; border-right: 1px solid var(--portal-border); }
.portal-calendar-weekdays,
.portal-calendar-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)) minmax(0, 2fr) minmax(0, 1fr); }
.portal-calendar-weekdays { border-bottom: 1px solid var(--portal-border); font-size: 10px; line-height: 15px; font-weight: 700; letter-spacing: .08em; }
.portal-calendar-weekday { padding: .625rem .75rem; border-right: 1px solid var(--portal-border); white-space: nowrap; text-align: start; }
.portal-calendar-weekday:last-child { border-right: 0; }
.portal-calendar-grid { flex: 1; min-height: 0; grid-template-rows: repeat(6, minmax(0, 1fr)); }
.portal-calendar-day {
  position: relative; display: flex; flex-direction: column; gap: .25rem; min-height: 0;
  padding: .5rem .75rem; overflow: hidden;
  /* Prod puts `border-r border-b border-border` on EVERY day cell, the
   * Sunday column and the sixth row included
   * (prod-html/calendar/desk_..._view_calendar.html), so the grid keeps its
   * closing lines; only the weekday header drops the last border-r. */
  border-right: 1px solid var(--portal-border); border-bottom: 1px solid var(--portal-border);
  transition: background-color .15s ease;
}
.portal-calendar-day:hover { background: rgba(0, 0, 0, .3); }
.portal-calendar-day.is-outside { opacity: .35; }
.portal-calendar-day.is-weekend { background: color-mix(in oklab, var(--portal-surface-alt) 40%, transparent); }
.portal-calendar-day.is-selected { background: color-mix(in oklab, var(--portal-accent) 10%, transparent); }
.portal-calendar-day.is-today { box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--portal-accent) 60%, transparent); }
.portal-calendar-day-head { display: flex; align-items: flex-start; gap: .5rem; }
.portal-calendar-number { font-size: .875rem; line-height: 1.25rem; font-weight: 700; }
.portal-calendar-day.is-today .portal-calendar-number,
.portal-calendar-cell.is-today .portal-calendar-number { color: var(--portal-accent); }
.portal-calendar-more {
  margin-left: auto; flex-shrink: 0; border-radius: calc(var(--portal-radius) - 2px);
  border: 1px solid var(--portal-accent); background: var(--portal-accent);
  padding: .125rem .375rem; font-size: 9px; font-weight: 700; line-height: 1; color: var(--portal-accent-ink);
}
.portal-calendar-day-events { display: flex; flex-direction: column; gap: .125rem; flex: 1; min-height: 0; padding-top: .125rem; overflow: hidden; }
.portal-calendar-event {
  display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  border-radius: calc(var(--portal-radius) - 2px); border: 1px solid var(--portal-accent);
  background: var(--portal-accent); padding: .25rem .5rem; font-size: 10px; font-weight: 700;
  line-height: 1.25; color: var(--portal-accent-ink); text-transform: none;
}

/* Selected-day panel: prod's aside beside the grid, and the block under the
 * compact pad - the same card at two sizes. */
.portal-calendar-aside { display: flex; flex-direction: column; min-height: 0; padding: 1rem; }
@media (min-width: 1024px) { .portal-calendar-aside { padding: 1.25rem; } }
.portal-calendar-selected-heading { flex-shrink: 0; margin: 0 0 1rem; font-size: 1.125rem; line-height: 1.25; font-weight: 700; color: var(--portal-text); text-transform: none; }
.portal-calendar-selected {
  display: flex; flex-direction: column; gap: .75rem; flex: 1; min-height: 0;
  padding-right: .25rem; overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable;
}
.portal-calendar-card { border-radius: 18px; border: 1px solid var(--portal-border); background: rgba(0, 0, 0, .4); padding: 1rem; transition: border-color .15s ease; }
.portal-calendar-card:hover { border-color: color-mix(in oklab, var(--portal-accent) 40%, transparent); }
.portal-calendar-card-title { margin: 0; font-size: .875rem; line-height: 1.25; font-weight: 700; text-transform: uppercase; color: var(--portal-text); }
.portal-calendar-card-meta { display: flex; flex-direction: column; gap: .375rem; margin-top: .75rem; font-size: 11px; font-weight: 700; color: var(--portal-muted); }
/* Prod's meta rows are `flex items-center gap-1.5` with a 14px accent icon
 * ahead of the date and the place (`h-3.5 w-3.5 text-highlight flex-none`);
 * only the place truncates, the date is drawn whole. */
.portal-calendar-card-meta-row { display: flex; align-items: center; gap: .375rem; min-width: 0; }
.portal-calendar-card-meta-icon { height: .875rem; width: .875rem; flex: none; color: var(--portal-accent); }
.portal-calendar-card-meta-place { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.portal-calendar-empty { margin: 0; color: var(--portal-muted); font-weight: 500; }

/* Compact month pad (#calendar-mobile): prod's own narrow-screen subtree, a
 * 7-column pad of day buttons with the selected day listed under it. */
.portal-calendar-compact { display: none; margin-top: 1rem; padding: .75rem; border: 1px solid var(--portal-border); border-radius: calc(var(--portal-radius) + 8px); background: var(--portal-surface); }
.portal-calendar-compact .portal-calendar-weekdays { grid-template-columns: repeat(7, minmax(0, 1fr)); margin-bottom: .5rem; letter-spacing: .05em; line-height: 1.5; }
/* The compact weekday keeps prod's own wrapping (`white-space: normal`) and
   drops only the divider's WIDTH, so its zero-width edge still reports the
   solid style prod's preflight gives every element (style-diff hs-p6m-weekday,
   2026-09-20). */
.portal-calendar-compact .portal-calendar-weekday { padding: .375rem 0; border-right-width: 0; text-align: center; white-space: normal; }
.portal-calendar-cells { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: .25rem; }
.portal-calendar-cell {
  position: relative; display: flex; align-items: center; justify-content: center; box-sizing: border-box;
  height: 2.75rem; border-radius: calc(var(--portal-radius) - 2px);
  border: 1px solid color-mix(in oklab, var(--portal-border) 80%, transparent); color: var(--portal-text);
}
.portal-calendar-cell.is-outside { opacity: .35; }
.portal-calendar-cell.is-today { color: var(--portal-accent); border-color: color-mix(in oklab, var(--portal-accent) 50%, transparent); }
.portal-calendar-cell.is-selected { background: var(--portal-accent); color: var(--portal-accent-ink); border-color: var(--portal-accent); }
.portal-calendar-cell.is-selected .portal-calendar-number { color: var(--portal-accent-ink); }
.portal-calendar-dot { position: absolute; bottom: .25rem; right: .25rem; height: .375rem; width: .375rem; border-radius: 50%; background: var(--portal-accent); }
.portal-calendar-cell.is-selected .portal-calendar-dot { background: var(--portal-accent-ink); }
.portal-calendar-selected-day { margin-top: 1.25rem; border-top: 1px solid var(--portal-border); padding-top: 1rem; }
.portal-calendar-selected-day .portal-calendar-selected-heading { margin: 0; font-size: .875rem; }
.portal-calendar-selected-day .portal-calendar-selected { margin-top: .75rem; overflow: visible; padding-right: 0; }
.portal-calendar-selected-day .portal-calendar-card { border-radius: 16px; }

@media (max-width: 767.98px) {
  .portal-calendar { display: none; }
  .portal-calendar-compact { display: block; }
}

/* Archive year switcher (#archive-year-switcher): the year being listed
 * between a chevron either side, pinned to the right of the archive's
 * header row (compose_headers.go archiveYearBrick). */
.portal-archive-pager-row { display: flex; justify-content: flex-end; }
.portal-archive-pager { display: inline-flex; align-items: center; background: var(--portal-surface); border: 1px solid var(--portal-border); border-radius: calc(var(--portal-radius) + 4px); padding: .25rem; }
.portal-archive-pager-year {
  display: flex; align-items: center; justify-content: center; padding: 0 1rem; height: 2.5rem; min-width: 110px;
  border-radius: var(--portal-radius); font-size: .75rem; line-height: 1rem; font-weight: 700;
  letter-spacing: .1em; color: var(--portal-accent);
}
.portal-archive-pager-nav {
  display: flex; align-items: center; justify-content: center; height: 2.5rem; width: 2.5rem;
  border-radius: var(--portal-radius); color: inherit;
  transition: all .15s cubic-bezier(.4, 0, .2, 1);
}
.portal-archive-pager-nav:hover { background: var(--portal-surface-alt); color: var(--portal-accent); }
/* An arrow into a year with nothing ended stays in place, muted (owner
   decision 2026-09-20): no link, quarter opacity, no hover. */
.portal-archive-pager-nav[aria-disabled="true"] { opacity: .3; cursor: default; }
.portal-archive-pager-nav[aria-disabled="true"]:hover { background: transparent; color: inherit; }

/* Archive header row: prod's `flex flex-col md:flex-row md:items-end
 * justify-between gap-6 md:gap-8 mb-16 border-b border-border pb-12`
 * (event-inventory.md §1.3) - heading and year switcher on one row. */
[data-portal-variant="portal_archive_header_row"] { display: flex; flex-direction: column; gap: 1.5rem; margin-bottom: 4rem; padding-bottom: 3rem; border-bottom: 1px solid var(--portal-border); }
@media (min-width: 768px) {
  [data-portal-variant="portal_archive_header_row"] { flex-direction: row; align-items: flex-end; justify-content: space-between; gap: 2rem; }
}