/* Content calendar view. Owned by the Content calendar agent.

   ProAgriMedia CI, floating-panel shape language. Every value resolves to a
   --pa-* token; there is no per-client re-skin any more, so a raw value here is
   simply a wrong value.

   Status vocabulary on this screen, and nowhere does it bend:
     navy   = approved / settled / chrome (today marker, selected segment)
     yellow = awaiting the client, and nothing else
     red    = changes requested, overdue, and the one action button
   The month cells are soft tinted surfaces on a white floating panel rather
   than a ruled spreadsheet: no 1px grid lines anywhere in the month.

   Layout note: the month grid is a real 7-column grid down to 700px. Below that
   a 7-column month stops being readable, so the grid is swapped for the list
   (the toggle stays, with a note explaining the swap). Between 700px and the
   grid's natural minimum the grid scrolls inside .pa-cal-gridscroll - the page
   body never scrolls sideways. */

.pa-cal {
  display: block;

  /* Secondary text that does NOT sit on white. --pa-text-muted is tuned for
     --pa-surface and drops to about 4.2:1 on the canvas and on the status
     tints, which is under the 4.5:1 this product holds itself to. This is the
     same grey pulled from the CI black instead, and it clears 4.5:1 on the
     canvas, on --pa-surface-3 and on all three status fills. */
  --pa-cal-muted-ink: color-mix(in srgb, var(--pa-black) 72%, var(--pa-surface));

  /* "Changes requested" TEXT sitting on the red tint. ProAgri red on its own
     tint is about 3.3:1 - fine for a dot or an icon, not for 12px words. The
     mark stays --pa-red; only the wording darkens. */
  --pa-cal-danger-ink: color-mix(in srgb, var(--pa-red) 70%, var(--pa-black));
}

.pa-cal-body {
  display: flex;
  flex-direction: column;
  gap: var(--pa-space-5);
}

.pa-cal-center {
  display: flex;
  justify-content: center;
  margin-top: var(--pa-space-4);
}

.pa-cal-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ── Summary panel ──────────────────────────────────────────────────────────
   The largest surface on the screen, so it takes the largest corner and floats
   on the canvas with depth from shadow rather than an outline. */
.pa-cal-head {
  display: flex;
  flex-direction: column;
  gap: var(--pa-space-5);
  padding: var(--pa-space-6);
  background: var(--pa-surface);
  border-radius: var(--pa-radius-xl);
  box-shadow: var(--pa-shadow);
}

.pa-cal-head-top {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--pa-space-4);
}

.pa-cal-head-titles {
  min-width: 0;
}

/* The month is chrome, not an alarm: navy tint, never the brand red. */
.pa-cal-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--pa-space-2);
  margin: 0 0 var(--pa-space-3);
  padding: var(--pa-space-1) var(--pa-space-3);
  color: var(--pa-brand-accent);
  background: var(--pa-accent-soft);
  border-radius: var(--pa-radius-pill);
  font-size: var(--pa-text-xs);
  font-weight: 700;
  letter-spacing: var(--pa-track-eyebrow);
  text-transform: uppercase;
}

/* The one biggest title on the page: Poppins Bold, per base.css. No weight is
   set here on purpose - overriding it is how the old serif left headings limp. */
.pa-cal-title {
  margin: 0;
  font-family: var(--pa-brand-font-display);
  font-size: var(--pa-text-xl);
  line-height: 1.15;
  letter-spacing: var(--pa-track-tight);
  color: var(--pa-text);
}

.pa-cal-note {
  margin: var(--pa-space-3) 0 0;
  max-width: var(--pa-reading-max);
  font-size: var(--pa-text-base);
  line-height: 1.6;
  color: var(--pa-text-muted);
}

.pa-cal-hint {
  margin: 0;
  font-size: var(--pa-text-sm);
  line-height: 1.55;
  color: var(--pa-text-muted);
}

/* Calendar picker (only rendered when the client has more than one) */
.pa-cal-picker-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  max-width: 100%;
}

.pa-cal-picker-wrap .pa-icon {
  position: absolute;
  right: var(--pa-space-4);
  pointer-events: none;
  color: var(--pa-text-muted);
}

.pa-cal-picker {
  appearance: none;
  -webkit-appearance: none;
  min-height: 44px;
  max-width: 100%;
  padding: 0 var(--pa-space-7) 0 var(--pa-space-4);
  font: inherit;
  font-size: var(--pa-text-sm);
  font-weight: 600;
  color: var(--pa-text);
  background: var(--pa-surface-3);
  border: 0;
  border-radius: var(--pa-radius-pill);
  cursor: pointer;
  transition: background var(--pa-dur) var(--pa-ease), box-shadow var(--pa-dur) var(--pa-ease);
}

.pa-cal-picker:hover { box-shadow: var(--pa-shadow-sm); }

.pa-cal-picker:focus-visible {
  outline: 2px solid var(--pa-brand-accent);
  outline-offset: 2px;
}

/* ── Progress ───────────────────────────────────────────────────────────────
   Approved is navy. There is no green in this CI and none gets invented, and a
   progress bar that fills red would read as damage rather than done. */
.pa-cal-progress-wrap {
  display: flex;
  flex-direction: column;
  gap: var(--pa-space-3);
}

.pa-cal-progress-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--pa-space-3);
}

.pa-cal-progress-label {
  font-size: var(--pa-text-xs);
  font-weight: 700;
  letter-spacing: var(--pa-track-eyebrow);
  text-transform: uppercase;
  color: var(--pa-text-muted);
}

.pa-cal-progress-value {
  font-family: var(--pa-brand-font-display);
  font-size: var(--pa-text-md);
  font-weight: 600;
  letter-spacing: var(--pa-track-heading);
  color: var(--pa-brand-accent);
}

.pa-cal-progress {
  position: relative;
  height: 10px;
  width: 100%;
  background: var(--pa-surface-3);
  border-radius: var(--pa-radius-pill);
  overflow: hidden;
}

/* A plain rectangle scaled on the X axis: the track's overflow:hidden clips it
   back into the pill shape, so scaleX has no radius of its own to distort and
   the animation stays on the compositor instead of triggering layout.
   JS sets the real scaleX; 0 is the no-script floor. */
.pa-cal-progress-fill {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--pa-brand-accent);
  transform-origin: left center;
  transform: scaleX(0);
  transition: transform var(--pa-dur-slow) var(--pa-ease);
}

/* ── Stat tiles ─────────────────────────────────────────────────────────────
   Three soft cells, always all three, so the row does not reflow every time a
   post is approved. A zero count goes quiet rather than disappearing, and the
   accent stays a small saturated dot instead of a large coloured fill. */
.pa-cal-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--pa-space-3);
}

.pa-cal-stat {
  display: flex;
  align-items: center;
  gap: var(--pa-space-3);
  padding: var(--pa-space-3) var(--pa-space-4);
  background: var(--pa-surface-3);
  border-radius: var(--pa-radius);
  transition: background var(--pa-dur) var(--pa-ease);
}

.pa-cal-stat-approved { background: color-mix(in srgb, var(--pa-navy) 13%, var(--pa-surface)); }
.pa-cal-stat-pending { background: color-mix(in srgb, var(--pa-yellow) 24%, var(--pa-surface)); }
.pa-cal-stat-changes { background: color-mix(in srgb, var(--pa-red) 12%, var(--pa-surface)); }

.pa-cal-stat.is-zero { background: var(--pa-surface-3); }
.pa-cal-stat.is-zero .pa-cal-dot { background: var(--pa-border-strong); color: var(--pa-surface); }
.pa-cal-stat.is-zero .pa-cal-stat-n { color: var(--pa-text-faint); }

.pa-cal-stat-body {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.pa-cal-stat-n {
  font-family: var(--pa-brand-font-display);
  font-size: var(--pa-text-lg);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: var(--pa-track-heading);
  color: var(--pa-text);
}

.pa-cal-stat-label {
  font-size: var(--pa-text-xs);
  font-weight: 600;
  color: var(--pa-cal-muted-ink);
}

/* ── Toolbar + segmented control ────────────────────────────────────────── */
.pa-cal-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--pa-space-3);
}

.pa-cal-count {
  font-size: var(--pa-text-sm);
  font-weight: 600;
  color: var(--pa-cal-muted-ink);
}

/* A proper pill segmented control: one track, two segments, the selected one
   lifted on a solid navy fill. Navy and not red - a chosen layout is a settled
   state, not an action, and red on this screen belongs to "something is wrong". */
.pa-cal-toggle {
  display: inline-flex;
  gap: var(--pa-space-1);
  padding: var(--pa-space-1);
  background: var(--pa-surface);
  border-radius: var(--pa-radius-pill);
  box-shadow: var(--pa-shadow-sm);
}

.pa-cal-tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--pa-space-2);
  min-height: 44px;
  min-width: 44px;
  padding: 0 var(--pa-space-5);
  font: inherit;
  font-size: var(--pa-text-sm);
  font-weight: 600;
  color: var(--pa-text-muted);
  background: transparent;
  border: 0;
  border-radius: var(--pa-radius-pill);
  cursor: pointer;
  transition: background var(--pa-dur) var(--pa-ease), color var(--pa-dur) var(--pa-ease);
}

.pa-cal-tab:hover {
  color: var(--pa-text);
  background: var(--pa-surface-3);
}

.pa-cal-tab.is-on,
.pa-cal-tab.is-on:hover {
  color: var(--pa-brand-accent-contrast);
  background: var(--pa-brand-accent);
}

.pa-cal-tab:focus-visible {
  outline: 2px solid var(--pa-brand-accent);
  outline-offset: 2px;
}

/* ── Month grid ─────────────────────────────────────────────────────────────
   One floating panel holding soft cells. No cell borders: the month reads as a
   set of tiles, not a table. */
.pa-cal-monthwrap {
  display: flex;
  flex-direction: column;
  gap: var(--pa-space-4);
  padding: var(--pa-space-5);
  background: var(--pa-surface);
  border-radius: var(--pa-radius-xl);
  box-shadow: var(--pa-shadow);
}

/* The page body never scrolls sideways: the grid scrolls inside this. */
.pa-cal-gridscroll {
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: var(--pa-space-2);
  -webkit-overflow-scrolling: touch;
}

/* Wide enough that a cell can hold a chip with a readable time and a 20px
   status dot side by side. Below this the grid scrolls inside .pa-cal-gridscroll
   rather than squeezing the time down to "09:". */
.pa-cal-gridinner {
  min-width: 760px;
}

.pa-cal-weekdays {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: var(--pa-space-2);
  margin-bottom: var(--pa-space-3);
}

.pa-cal-weekday {
  padding: 0 var(--pa-space-3);
  font-size: var(--pa-text-xs);
  font-weight: 700;
  letter-spacing: var(--pa-track-eyebrow);
  text-transform: uppercase;
  color: var(--pa-text-faint);
}

.pa-cal-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: var(--pa-space-2);
}

.pa-cal-cell {
  display: flex;
  flex-direction: column;
  gap: var(--pa-space-2);
  min-height: 124px;
  padding: var(--pa-space-3) var(--pa-space-2) var(--pa-space-2);
  background: color-mix(in srgb, var(--pa-navy) 4%, var(--pa-surface));
  border: 0;
  border-radius: var(--pa-radius);
}

/* Days outside the month are context, not content: no tile at all. */
.pa-cal-cell.is-out {
  background: transparent;
}

/* Today is a navy ring on the tile, not a red one. Nothing on this screen is
   red unless it is an action or a problem, and today is neither. */
.pa-cal-cell.is-today {
  background: color-mix(in srgb, var(--pa-navy) 7%, var(--pa-surface));
  box-shadow: inset 0 0 0 2px var(--pa-brand-accent);
}

.pa-cal-daynum {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--pa-space-2);
  padding: 0 var(--pa-space-1);
}

.pa-cal-daynum-n {
  font-family: var(--pa-brand-font-display);
  font-size: var(--pa-text-sm);
  font-weight: 600;
  letter-spacing: var(--pa-track-heading);
  color: var(--pa-text);
}

.pa-cal-cell.is-out .pa-cal-daynum-n { color: var(--pa-text-faint); font-weight: 500; }

.pa-cal-today {
  padding: 2px var(--pa-space-2);
  font-size: var(--pa-text-xs);
  font-weight: 700;
  color: var(--pa-brand-accent-contrast);
  background: var(--pa-brand-accent);
  border-radius: var(--pa-radius-pill);
}

.pa-cal-chips {
  display: flex;
  flex-direction: column;
  gap: var(--pa-space-1);
}

/* Chips are opaque tints derived from the CI colours, so they lift off the grey
   cell instead of dissolving into it. No border: the fill and the dot carry it. */
.pa-cal-chip {
  display: flex;
  flex-direction: column;
  gap: 2px;
  align-items: stretch;
  min-height: 44px;
  width: 100%;
  padding: var(--pa-space-2);
  font: inherit;
  text-align: left;
  color: var(--pa-text);
  background: var(--pa-surface);
  border: 0;
  border-radius: var(--pa-radius-sm);
  cursor: pointer;
  transition: box-shadow var(--pa-dur) var(--pa-ease), transform var(--pa-dur-fast) var(--pa-ease);
}

/* Hover lifts, never recolours: the fill is carrying state. */
.pa-cal-chip:hover {
  box-shadow: var(--pa-shadow);
  transform: translateY(-2px);
}

.pa-cal-chip:focus-visible {
  outline: 2px solid var(--pa-brand-accent);
  outline-offset: 2px;
}

.pa-cal-chip-pending { background: color-mix(in srgb, var(--pa-yellow) 32%, var(--pa-surface)); }
.pa-cal-chip-approved { background: color-mix(in srgb, var(--pa-navy) 13%, var(--pa-surface)); }
.pa-cal-chip-changes { background: color-mix(in srgb, var(--pa-red) 11%, var(--pa-surface)); }

.pa-cal-chip-top {
  display: flex;
  align-items: center;
  gap: var(--pa-space-2);
}

.pa-cal-chip-time {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--pa-text-xs);
  font-weight: 700;
  color: var(--pa-text);
}

.pa-cal-chip-sub {
  display: flex;
  align-items: center;
  gap: var(--pa-space-1);
  min-width: 0;
  font-size: var(--pa-text-xs);
  color: var(--pa-cal-muted-ink);
}

.pa-cal-chip-sub .pa-icon { flex: 0 0 auto; }

.pa-cal-chip-sub-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pa-cal-chip-note { color: var(--pa-cal-danger-ink); font-weight: 600; }

/* Status dot: colour AND a glyph, never colour alone.
   The glyph colour is picked per status for contrast against that status fill -
   ProAgri yellow is too light to carry a white glyph at 3:1, so it takes ink. */
.pa-cal-dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  border-radius: var(--pa-radius-pill);
}

.pa-cal-dot-pending { background: var(--pa-yellow); color: var(--pa-black); }
.pa-cal-dot-approved { background: var(--pa-success); color: var(--pa-on-dark); }
.pa-cal-dot-changes { background: var(--pa-danger); color: var(--pa-on-dark); }

.pa-cal-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pa-space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.pa-cal-legend-item {
  display: inline-flex;
  align-items: center;
  gap: var(--pa-space-2);
  padding: var(--pa-space-1) var(--pa-space-3) var(--pa-space-1) var(--pa-space-1);
  background: var(--pa-surface-3);
  border-radius: var(--pa-radius-pill);
  font-size: var(--pa-text-xs);
  font-weight: 600;
  color: var(--pa-cal-muted-ink);
}

.pa-cal-legend-item .pa-cal-dot { width: 18px; height: 18px; }

/* ── List ───────────────────────────────────────────────────────────────── */
.pa-cal-list {
  display: flex;
  flex-direction: column;
  gap: var(--pa-space-4);
}

.pa-cal-weekgroup {
  display: flex;
  flex-direction: column;
  gap: var(--pa-space-3);
  /* The strip below is the only horizontally scrolling thing on this screen, so
     the group it lives in must never be allowed to push the page wider than the
     viewport. Same guard .pa-nav uses in shell.css. */
  min-width: 0;
}

.pa-cal-week {
  display: flex;
  align-items: center;
  gap: var(--pa-space-3);
}

/* ── The week strip ─────────────────────────────────────────────────────────
   A week is read ACROSS. Wide enough, auto-fill lays as many cards as the width
   takes and no more; there is no breakpoint to keep in sync with a card width
   because the card states its own minimum and the grid does the arithmetic.
   Under 560px the grid becomes a scrolling strip instead of collapsing to one
   card per row, so a week still reads as a week - and the scroll is INSIDE this
   element, never on the body. */
.pa-cal-week-posts {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--pa-space-3);
  min-width: 0;
}

.pa-cal-week-cell { min-width: 0; display: flex; }

.pa-cal-week-title {
  margin: 0;
  flex: 0 0 auto;
  font-family: var(--pa-brand-font-display);
  font-size: var(--pa-text-xs);
  font-weight: 700;
  letter-spacing: var(--pa-track-eyebrow);
  text-transform: uppercase;
  color: var(--pa-brand-accent);
}

.pa-cal-week-rule {
  flex: 1 1 auto;
  height: 1px;
  background: var(--pa-border);
}

/* ── The compact list card ────────────────────────────────────────────────
   One control doing one job: show enough of a post to decide, then open it.
   There is deliberately no Approve here - approving something you have only
   seen as a 200px thumbnail is the one thing this screen must not make easy.
   Status is a glyph dot PLUS words; colour is never the only signal. */
.pa-cal-mini {
  display: flex;
  flex-direction: column;
  gap: var(--pa-space-3);
  width: 100%;
  min-width: 0;
  min-height: 44px;
  padding: var(--pa-space-3);
  font: inherit;
  text-align: left;
  color: var(--pa-text);
  background: var(--pa-surface);
  border: 0;
  border-radius: var(--pa-radius-lg);
  box-shadow: var(--pa-shadow-sm);
  cursor: pointer;
  transition: box-shadow var(--pa-dur) var(--pa-ease), transform var(--pa-dur) var(--pa-ease);
}

.pa-cal-mini:hover {
  box-shadow: var(--pa-shadow);
  transform: translateY(-2px);
}

.pa-cal-mini:focus-visible {
  outline: 2px solid var(--pa-brand-accent);
  outline-offset: 2px;
}

.pa-cal-mini-thumb {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--pa-surface-3);
  border-radius: var(--pa-radius);
}

.pa-cal-mini-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pa-cal-mini-noimg {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--pa-space-2);
  padding: var(--pa-space-3);
  text-align: center;
  color: var(--pa-cal-muted-ink);
}

.pa-cal-mini-noimg .pa-icon { color: var(--pa-text-faint); }

.pa-cal-mini-noimg-text {
  font-size: var(--pa-text-xs);
  line-height: 1.4;
}

.pa-cal-mini-body {
  display: flex;
  flex-direction: column;
  gap: var(--pa-space-1);
  min-width: 0;
}

.pa-cal-mini-when {
  display: flex;
  align-items: center;
  gap: var(--pa-space-2);
  min-width: 0;
  font-size: var(--pa-text-sm);
  font-weight: 700;
  color: var(--pa-text);
}

.pa-cal-mini-when .pa-icon { flex: 0 0 auto; color: var(--pa-brand-accent); }

.pa-cal-mini-when > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pa-cal-mini-kind {
  display: flex;
  align-items: center;
  gap: var(--pa-space-2);
  min-width: 0;
  font-size: var(--pa-text-xs);
  color: var(--pa-cal-muted-ink);
}

.pa-cal-mini-kind .pa-icon { flex: 0 0 auto; color: var(--pa-brand-accent); }

.pa-cal-mini-kind > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pa-cal-mini-status {
  display: flex;
  align-items: center;
  gap: var(--pa-space-2);
  margin-top: var(--pa-space-1);
  font-size: var(--pa-text-xs);
  font-weight: 600;
}

.pa-cal-mini-status .pa-cal-dot { flex: 0 0 auto; }

/* Yellow is the dot, never the words: ProAgri yellow on white is nowhere near
   4.5:1, so "Awaiting you" is set in the calendar's own dark grey and the
   colour lives in the mark beside it. */
.pa-cal-mini-pending .pa-cal-mini-status-text { color: var(--pa-cal-muted-ink); }
.pa-cal-mini-approved .pa-cal-mini-status-text { color: var(--pa-brand-accent); }
.pa-cal-mini-changes .pa-cal-mini-status-text { color: var(--pa-cal-danger-ink); }

/* What the client asked for last round, clamped. The full note is in the modal
   and in the card's accessible name; this is the reminder, not the record. */
.pa-cal-mini-note {
  margin-top: var(--pa-space-1);
  padding: var(--pa-space-2) var(--pa-space-3);
  font-size: var(--pa-text-xs);
  line-height: 1.5;
  color: var(--pa-text);
  background: color-mix(in srgb, var(--pa-red) 9%, var(--pa-surface));
  border-radius: var(--pa-radius-sm);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ── Kept for the fallback detail below, which still draws these ─────────── */
.pa-cal-card-noimg { color: var(--pa-text-faint); }

.pa-cal-card-platform {
  display: inline-flex;
  align-items: center;
  gap: var(--pa-space-2);
  font-size: var(--pa-text-sm);
  font-weight: 700;
  color: var(--pa-text);
}

.pa-cal-card-when,
.pa-cal-card-pillar {
  display: flex;
  align-items: center;
  gap: var(--pa-space-2);
  margin: 0;
  font-size: var(--pa-text-sm);
  color: var(--pa-text-muted);
}

/* ── Fallback detail (inside the modal) ─────────────────────────────────── */
.pa-cal-modal {
  display: flex;
  flex-direction: column;
  gap: var(--pa-space-4);
}

/* Sticky so prev/next stays in reach while a tall post frame scrolls under it.
   The negative side margins make it full-bleed inside the modal's own padding. */
.pa-cal-modal-head {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--pa-space-3);
  margin: 0 calc(var(--pa-space-5) * -1);
  padding: var(--pa-space-2) var(--pa-space-5) var(--pa-space-3);
  background: var(--pa-surface);
  border-bottom: 1px solid var(--pa-border);
}

.pa-cal-modal-nav,
.pa-cal-modal-headright {
  display: inline-flex;
  align-items: center;
  gap: var(--pa-space-2);
}

.pa-cal-modal-nav {
  padding: var(--pa-space-1);
  background: var(--pa-surface-3);
  border-radius: var(--pa-radius-pill);
}

.pa-cal-modal-count {
  min-width: 92px;
  text-align: center;
  font-size: var(--pa-text-sm);
  font-weight: 700;
  color: var(--pa-text);
}

/* ── The opened post has to FIT ─────────────────────────────────────────────
   .pa-modal-panel (components.css, not ours) already caps itself at 90dvh and
   scrolls. Everything below exists so that on a normal laptop it never has to.

   Two moves, and neither one crops the creative. First: every media ratio in
   post.css is an aspect-ratio box, which means the creative's HEIGHT is decided
   by its width. So capping the mock's width against the viewport height scales
   the whole replica down in proportion - no max-height fighting an aspect-ratio,
   no object-fit cropping a headline in half. Second: above 900px the frame
   splits in two, the replica on the left and the portal's question on the
   right, which is what turns one tall column into two short ones. */
/* The height the creative is allowed to take. Tuned against the panel's own
   90dvh cap so that a 1440x900 laptop - the common case - needs no scroll at
   all, with a floor so a short window shrinks the replica to something you can
   still judge rather than to a stamp. */
.pa-cal-modal .pa-post { --pa-cal-media-h: max(260px, 36dvh); }

.pa-cal-modal .pa-post-mock {
  max-width: min(100%, var(--pa-cal-media-h));
  margin-inline: auto;
}

/* 4:5 stands taller than it is wide, so the same height allowance buys less
   width. 9:16 is handled on the phone frame below, which carries its own stage. */
.pa-cal-modal .pa-post:has(.pa-post-media.is-r45) .pa-post-mock {
  max-width: min(100%, calc(var(--pa-cal-media-h) * 4 / 5));
}

.pa-cal-modal .pa-post:has(.pa-post-media.is-r916) .pa-post-mock { max-width: 100%; }

.pa-cal-modal .pa-post-phone {
  width: min(276px, 100%, calc(var(--pa-cal-media-h) * 9 / 16));
}

.pa-cal-modal .pa-post-story { padding: var(--pa-space-4); }

/* A short laptop (768px to 880px tall) has less to spend than the
   1440x900 the cap above is tuned to, and all of it has to come out of the same
   column. So the creative gives up proportionally more and the modal's own
   chrome tightens with it, rather than the client being handed a scrollbar. */
@media (max-height: 880px) {
  .pa-cal-modal .pa-post { --pa-cal-media-h: max(200px, 30dvh); }
  .pa-cal-modal { gap: var(--pa-space-3); }
  .pa-cal-modal-head { padding-top: var(--pa-space-1); padding-bottom: var(--pa-space-2); }
}

@media (min-width: 900px) {
  /* The frame caps itself at 560px for a single column, which is right on the
     Posts screen and wrong here: two columns need the whole panel. */
  .pa-cal-modal .pa-post {
    max-width: 100%;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: auto auto 1fr;
  }

  .pa-cal-modal .pa-post-strip { grid-area: 1 / 1 / 2 / 3; }
  .pa-cal-modal .pa-post-mock { grid-area: 2 / 1 / 3 / 2; }
  .pa-cal-modal .pa-post-docs { grid-area: 3 / 1 / 4 / 2; }

  /* With no documents under it the replica is the only thing in its column, and
     the review beside it is usually taller - which left a band of bare card
     below the story's grey stage where the stage should have carried on. So the
     mock takes the whole column and centres its skin in it. */
  .pa-cal-modal .pa-post:not(:has(.pa-post-docs)) .pa-post-mock { grid-row: 2 / 4; }

  .pa-cal-modal .pa-post-mock { display: flex; flex-direction: column; }

  .pa-cal-modal .pa-post-story {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* The tray keeps its recessed surface; side by side, the seam that separated
     it from the replica is vertical instead of horizontal. */
  .pa-cal-modal .pa-post-review {
    grid-area: 2 / 2 / 4 / 3;
    min-width: 0;
    border-top: 0;
    border-left: 1px solid var(--pa-border);
  }
}

.pa-cal-detail-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--pa-space-5);
}

.pa-cal-detail-media {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: var(--pa-surface-3);
  border: 0;
  border-radius: var(--pa-radius-lg);
}

.pa-cal-detail-media img {
  width: 100%;
  height: auto;
  display: block;
}

.pa-cal-detail-side {
  display: flex;
  flex-direction: column;
  gap: var(--pa-space-3);
  min-width: 0;
}

.pa-cal-detail-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--pa-space-2);
}

.pa-cal-detail-h {
  margin: 0 0 var(--pa-space-2);
  font-family: var(--pa-brand-font-display);
  font-size: var(--pa-text-xs);
  font-weight: 700;
  letter-spacing: var(--pa-track-eyebrow);
  text-transform: uppercase;
  color: var(--pa-text-muted);
}

.pa-cal-detail-text {
  margin: 0;
  font-size: var(--pa-text-base);
  line-height: 1.6;
  white-space: pre-wrap;
  color: var(--pa-text);
}

.pa-cal-detail-caption,
.pa-cal-detail-history,
.pa-cal-detail-cr {
  padding: var(--pa-space-4);
  background: var(--pa-surface-3);
  border: 0;
  border-radius: var(--pa-radius);
}

.pa-cal-history {
  display: flex;
  flex-direction: column;
  gap: var(--pa-space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Tinted card + a danger-toned dot on the round label, rather than a bar down
   one edge. Same signal, and it sits inside the row instead of beside it. */
.pa-cal-history-row {
  padding: var(--pa-space-3);
  background: color-mix(in srgb, var(--pa-red) 9%, var(--pa-surface));
  border: 0;
  border-radius: var(--pa-radius-sm);
}

.pa-cal-history-round {
  display: inline-flex;
  align-items: center;
  gap: var(--pa-space-2);
  font-size: var(--pa-text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--pa-track-eyebrow);
  color: var(--pa-cal-danger-ink);
}

/* The 20px dot is right for a chip, too heavy beside 12px label text. */
.pa-cal-dot-sm {
  width: 14px;
  height: 14px;
}

.pa-cal-history-note {
  margin: var(--pa-space-1) 0;
  font-size: var(--pa-text-sm);
  white-space: pre-wrap;
  color: var(--pa-text);
}

.pa-cal-history-at {
  font-size: var(--pa-text-xs);
  color: var(--pa-text-faint);
}

.pa-cal-textarea {
  width: 100%;
  min-height: 88px;
  padding: var(--pa-space-3) var(--pa-space-4);
  font: inherit;
  font-size: var(--pa-text-base);
  color: var(--pa-text);
  background: var(--pa-surface);
  border: 1px solid var(--pa-border);
  border-radius: var(--pa-radius-sm);
  resize: vertical;
  transition: border-color var(--pa-dur) var(--pa-ease), box-shadow var(--pa-dur) var(--pa-ease);
}

.pa-cal-textarea:focus-visible {
  outline: none;
  border-color: var(--pa-brand-accent);
  box-shadow: 0 0 0 3px var(--pa-accent-ring);
}

.pa-cal-detail-cr-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--pa-space-3);
  margin-top: var(--pa-space-3);
}

.pa-cal-rounds {
  font-size: var(--pa-text-sm);
  color: var(--pa-text-muted);
}

/* Out of rounds is a problem, not a "waiting on you": red, not yellow. */
.pa-cal-rounds-out {
  display: flex;
  align-items: flex-start;
  gap: var(--pa-space-3);
  margin: 0;
  padding: var(--pa-space-4);
  font-size: var(--pa-text-sm);
  line-height: 1.55;
  color: var(--pa-text);
  background: color-mix(in srgb, var(--pa-red) 9%, var(--pa-surface));
  border: 0;
  border-radius: var(--pa-radius);
}

.pa-cal-rounds-out .pa-icon { flex: 0 0 auto; margin-top: 2px; color: var(--pa-danger); }

.pa-cal-detail-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pa-space-2);
}

/* ── Floating "still to review" bar ─────────────────────────────────────────
   A pill that floats above the canvas, not a full-bleed band welded to the
   viewport. Sticky rather than fixed so it stays in flow and can never cover the
   last card. Navy is the surface (chrome), yellow is the attention mark, and the
   single red button is the only action. */
.pa-cal-bar {
  position: sticky;
  bottom: var(--pa-space-5);
  z-index: 3;
  display: flex;
  align-items: center;
  gap: var(--pa-space-3);
  width: fit-content;
  max-width: 100%;
  margin: var(--pa-space-3) auto 0;
  padding: var(--pa-space-2) var(--pa-space-2) var(--pa-space-2) var(--pa-space-3);
  color: var(--pa-on-dark);
  background: var(--pa-brand-accent);
  border: 0;
  border-radius: var(--pa-radius-pill);
  box-shadow: var(--pa-shadow-lg);
}

.pa-cal-bar-dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  flex: 0 0 auto;
  color: var(--pa-black);
  background: var(--pa-yellow);
  border-radius: var(--pa-radius-pill);
}

.pa-cal-bar-text {
  flex: 0 1 auto;
  min-width: 0;
  margin: 0;
  font-size: var(--pa-text-sm);
  font-weight: 600;
  line-height: 1.35;
  color: var(--pa-on-dark);
  text-wrap: balance;
}

.pa-cal.has-bar .pa-cal-body { padding-bottom: var(--pa-space-2); }

/* ── Responsive ─────────────────────────────────────────────────────────── */
/* Above 700px the month grid is the month grid and the narrow fallbacks are
   hidden; below it the grid is swapped for the list. */
.pa-cal-narrow-only,
.pa-cal-narrow-note { display: none; }

@media (max-width: 700px) {
  .pa-cal-monthwrap { display: none; }

  .pa-cal-narrow-only { display: flex; }

  .pa-cal-narrow-note {
    display: flex;
    align-items: flex-start;
    gap: var(--pa-space-3);
    margin: 0;
    padding: var(--pa-space-3) var(--pa-space-4);
    font-size: var(--pa-text-sm);
    line-height: 1.5;
    color: var(--pa-text-muted);
    background: var(--pa-accent-soft);
    border: 0;
    border-radius: var(--pa-radius);
  }

  .pa-cal-narrow-note .pa-icon { flex: 0 0 auto; margin-top: 2px; color: var(--pa-brand-accent); }

  .pa-cal-head {
    gap: var(--pa-space-4);
    padding: var(--pa-space-5);
    border-radius: var(--pa-radius-lg);
  }

  .pa-cal-head-top { gap: var(--pa-space-3); }

  .pa-cal-picker-wrap { width: 100%; }
  .pa-cal-picker { width: 100%; }

  .pa-cal-stats { grid-template-columns: 1fr; gap: var(--pa-space-2); }

  .pa-cal-toolbar { align-items: stretch; }

  .pa-cal-toggle { flex: 1 1 auto; }

  .pa-cal-tab { flex: 1 1 0; padding: 0 var(--pa-space-3); }

  .pa-cal-bar {
    bottom: var(--pa-space-3);
    width: 100%;
    gap: var(--pa-space-2);
  }

  .pa-cal-bar-text { flex: 1 1 auto; }

  /* The modal panel drops to space-4 padding below 700px - match it. */
  .pa-cal-modal-head {
    margin: 0 calc(var(--pa-space-4) * -1);
    padding: var(--pa-space-2) var(--pa-space-4) var(--pa-space-3);
  }
}

/* Under 560px there is not room for two cards across, and stacking them would
   turn a week back into the vertical wall this layout replaced. So the grid
   becomes a snapping strip: the week still reads across, the next card peeks in
   from the right to say there is more, and the scroll is contained INSIDE this
   element. The page body never scrolls sideways at any width. */
@media (max-width: 560px) {
  .pa-cal-week-posts {
    display: flex;
    gap: var(--pa-space-3);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    padding-bottom: var(--pa-space-2);
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  .pa-cal-week-posts::-webkit-scrollbar { display: none; }

  .pa-cal-week-cell {
    flex: 0 0 min(74%, 240px);
    scroll-snap-align: start;
  }
}

@media (min-width: 768px) {
  .pa-cal-title { font-size: var(--pa-text-2xl); line-height: 1.12; }
}

@media (min-width: 880px) {
  .pa-cal-detail-grid {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    align-items: start;
  }

  .pa-cal-detail-media { position: sticky; top: 0; }
}

@media (min-width: 1024px) {
  .pa-cal-cell { min-height: 140px; }
  .pa-cal-monthwrap { padding: var(--pa-space-6); }
}