.split-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 12px;
  align-items: stretch;
  flex: 1;
  min-height: 0;
}

/* v05s — Hugo: the "dark rectangle behind the 3 right-side panels" was
   actually the COMPOUND of each card's `.glass` drop shadows. Every
   `.glass` card carries three outer shadows, the largest being
   `0 24px 56px color-mix(in srgb, var(--shade) 34%, transparent)` — a 56px-blur, 34% alpha dark
   halo. The shots panel uses the same rule but is one big card, so the
   halo just sits at its own edges. The right column has three smaller
   cards stacked with 12px gaps, so each card's halo overlaps the next
   card's halo, painting a continuous dark frame around (and through
   the gaps of) the trio. Re-declaring the shadow ONLY on right-column
   glass cards drops the two big dark shadows and keeps just the subtle
   bevel + a small 2px ambient — cards still feel "glass", but the
   stacked-shadow halo (the rectangle Hugo was seeing) is gone. Other
   panels (shots, topbar, footer) keep the original full-strength
   shadows because they're not vertically stacked. */
.right-column .glass {
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--hi) 65%, transparent),
    inset 1px 0 0 color-mix(in srgb, var(--hi-2) 35%, transparent),
    inset 0 -1px 0 color-mix(in srgb, var(--shadow-ink-2) 8%, transparent),
    inset -1px 0 0 color-mix(in srgb, var(--shadow-ink-2) 5%, transparent),
    0 2px 6px color-mix(in srgb, var(--shadow-ink) 10%, transparent);
}

/* v07q — Right-column layout REAL fix.
   ────────────────────────────────────────────────────────────────────
   The earlier `1fr` / `minmax(0, 1fr)` grid attempts had no effect
   because `styles/sortable.css` loads AFTER this file and was silently
   overriding everything with `.sortable-zone-right { display: flex;
   flex-direction: column; gap: 16px; }` (same 1-class specificity,
   later cascade wins). We now use the compound selector
   `.right-column.sortable-zone-right` (specificity 0,2,0) so this rule
   beats sortable.css regardless of load order.
   ────────────────────────────────────────────────────────────────────
   Each row track is `minmax(0, 1fr)` — plain `1fr` defaults to
   `minmax(auto, 1fr)`, which lets the track grow to natural content
   height (which is what kept the cards busting out before). The
   `minmax(0, …)` form forces an exact 1/3 split regardless of content,
   so when the project dropdown opens and shrinks the column, all three
   cards shrink by the same percentage and the 12px gaps stay visible.
   ────────────────────────────────────────────────────────────────────
   We also nuke the legacy `.pipeline-card { min-height: 360px }` rule
   (further down in this file) — when the shot-breakdown card sits in
   the right column, it must be allowed to shrink. Internal scroll
   containers (`.time-slots--scrollable`, `.milestones-list`,
   `.pipe-spark`) keep their own max-heights so they scroll instead of
   pushing the card. */
.right-column.sortable-zone-right {
  display: grid;
  grid-template-rows: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: 12px;
  min-height: 0;
  overflow: hidden;
}
.right-column.sortable-zone-right > .sortable-panel {
  display: flex;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
  overflow: hidden;
}
.right-column.sortable-zone-right > .sortable-panel > .glass {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}
/* Kill the legacy `min-height: 360px` on .pipeline-card when it lives
   inside the right column. The card is now governed by the grid row. */
.right-column.sortable-zone-right .pipeline-card {
  min-height: 0;
}

.rc-card { padding: 14px 18px; }

.rc-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.rc-title {
  font-size: var(--fs-11);
  letter-spacing: var(--track-14);
  font-weight: var(--fw-semi);
  color: var(--ink-muted);
  text-transform: uppercase;
}
.rc-nav { display: flex; gap: 4px; }
.rc-iconbtn {
  width: 24px; height: 24px;
  border-radius: var(--r-sm);
  background: color-mix(in srgb, var(--mix-light) 40%, transparent);
  border: 1px solid var(--card-border);
  color: var(--ink);
  display: grid; place-items: center;
  cursor: pointer;
}
.rc-iconbtn:hover { background: color-mix(in srgb, var(--mix-light) 60%, transparent); }

/* Schedule */
.sched-month {
  font-size: var(--fs-11);
  letter-spacing: var(--track-16);
  color: var(--ink-muted);
  font-weight: var(--fw-semi);
  margin-bottom: 8px;
}
.week-strip {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 4px;
  margin-bottom: 12px;
}
.week-cell {
  text-align: center;
  padding: 6px 4px 8px;
  border-radius: var(--r-sm);
  border: 1px solid transparent;
}
.wc-dow {
  font-size: var(--fs-9-5);
  letter-spacing: var(--track-14);
  font-weight: var(--fw-semi);
  color: var(--ink-muted);
}
.wc-num {
  font-family: var(--font-display);
  font-size: var(--fs-20);
  letter-spacing: var(--track-005);
  margin-top: 2px;
  color: var(--ink);
}
.week-cell {
  background: none;
  cursor: pointer;
  transition: background var(--dur-0) ease, border-color var(--dur-0) ease;
}
.week-cell:hover { background: color-mix(in srgb, var(--mix-light) 50%, transparent); }
.week-cell.today {
  background: var(--sidebar-bg);
  box-shadow: inset 0 1px 0 rgba(0,0,0,0.25);
}
.week-cell.today .wc-dow { color: color-mix(in srgb, var(--white) 70%, transparent); }
.week-cell.today .wc-num { color: color-mix(in srgb, var(--foil) 33%, var(--mix-light)); }
.week-cell.selected:not(.today) {
  background: color-mix(in srgb, var(--leaf) 18%, transparent);
  border-color: color-mix(in srgb, var(--leaf) 55%, transparent);
}
.week-cell.today.selected {
  outline: 1.5px solid var(--leaf);
  outline-offset: 1px;
}

.time-slots {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.time-slot {
  display: grid;
  /* v07zz282 — minmax(0,1fr): without the 0-floor, a long meeting title's
     min-content width blows the track out and the text paints over the
     time column when the card is narrow (scale audit finding). */
  grid-template-columns: 56px minmax(0, 1fr);
  gap: 12px;
  align-items: baseline;
  padding-top: 8px;
  border-top: 1px solid color-mix(in srgb, var(--card-border) 35%, transparent);
}
.time-slot:first-child { border-top: none; padding-top: 0; }
.ts-time {
  font-family: var(--font-display);
  font-size: var(--fs-16);
  letter-spacing: var(--track-005);
  color: var(--ink);
}
.ts-body { min-width: 0; }
.ts-title {
  font-size: var(--fs-13);
  font-weight: var(--fw-med);
  color: var(--ink);
  display: inline-flex; align-items: center; gap: 6px;
  overflow-wrap: anywhere;
}
.ts-dot { width: 6px; height: 6px; border-radius: 50%; }
.ts-sub {
  font-size: var(--fs-11-5);
  color: var(--ink-muted);
  margin-top: 2px;
}

/* Pipeline health — info unique to this panel */
.pipe-health {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid color-mix(in srgb, var(--card-border) 40%, transparent);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.pipe-health-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: var(--fs-11-5);
  font-feature-settings: var(--tnum);
}
.pipe-health-label { color: var(--ink-muted); letter-spacing: var(--track-02); }
.pipe-health-value { color: var(--ink); font-weight: var(--fw-med); }
.pipe-health-value strong { font-family: var(--font-display); font-size: var(--fs-14); letter-spacing: var(--track-005); font-weight: var(--fw-med); }
.pipe-health-faint { color: var(--ink-muted); font-weight: 400; }
.pipe-health-warn { color: var(--danger); font-weight: var(--fw-semi); }
.pipe-health-row--burn { margin-top: 4px; }
.pipe-burn-track {
  height: 5px;
  border-radius: var(--r-round);
  background: color-mix(in srgb, var(--ink-muted) 18%, transparent);
  overflow: hidden;
  margin-top: 4px;
}
.pipe-burn-fill {
  height: 100%;
  border-radius: var(--r-round);
  background: linear-gradient(90deg, var(--leaf-bright) 0%, color-mix(in srgb, var(--gold-3) 70%, var(--mix-light)) 70%, var(--gold-16) 100%);
  box-shadow: 0 0 8px color-mix(in srgb, color-mix(in srgb, var(--gold-3) 91%, var(--mix-light)) 30%, transparent);
}

.pipe-total { font-size: var(--fs-11); color: var(--ink-muted); font-feature-settings: var(--tnum); }
.pipe-total strong { color: var(--ink); font-weight: var(--fw-semi); font-size: var(--fs-12-5); }

/* Lock pipeline panel height so it doesn't jiggle on focus changes */
/* Pipeline card stretches to fill remaining right-column space. */
.pipeline-card {
  min-height: 360px;
  display: flex;
  flex-direction: column;
  flex: 1;
  align-self: stretch;
}

/* ─── MILESTONES card — stretches to fill remaining right-column space ── */
.milestones-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.right-column .milestones-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
}
.milestones-count {
  font-size: var(--fs-10-5);
  font-weight: var(--fw-semi);
  color: var(--ink-muted);
  letter-spacing: var(--track-04);
  text-transform: lowercase;
}
.milestones-section { display: flex; flex-direction: column; gap: 8px; }
.milestones-section-head {
  font-family: var(--font-body);
  font-size: var(--fs-9);
  letter-spacing: 0.20em;
  font-weight: var(--fw-bold);
  color: var(--ink-muted);
  text-transform: uppercase;
  padding: 0 4px 4px;
  border-bottom: 1px dashed color-mix(in srgb, var(--tan-deep) 25%, transparent);
}
/* t06d — milestones list scrolls internally when there are many entries.
   Each section (THIS WEEK / COMING UP) has its own .milestones-list
   container; the cap keeps the overall card from pushing the rest of
   the right column off-screen. */
.milestones-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 280px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--card-border) 35%, transparent) transparent;
  padding-right: 4px;
}
.milestones-list::-webkit-scrollbar { width: 6px; }
.milestones-list::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--card-border) 30%, transparent); border-radius: 3px; }
.milestones-empty {
  font-size: var(--fs-12);
  color: var(--ink-muted);
  font-style: italic;
  padding: 12px 0;
  text-align: center;
}
.milestone-row {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 10px;
  align-items: flex-start;
  padding: 10px 8px;
  border-radius: var(--r-panel);
  background: color-mix(in srgb, var(--cream-2) 55%, transparent);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--cream) 65%, transparent),
    0 1px 2px color-mix(in srgb, var(--shadow-ink) 4%, transparent);
  transition: background var(--dur-2) ease, transform var(--dur-2) ease;
}
.milestone-row:hover {
  background: color-mix(in srgb, color-mix(in srgb, var(--hi) 65%, var(--mix-light)) 85%, transparent);
  transform: translateY(-1px);
}
.milestone-date {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  padding: 6px 4px;
  border-radius: var(--r-sm);
  background: linear-gradient(180deg, color-mix(in srgb, var(--cream-6) 55%, transparent), color-mix(in srgb, color-mix(in srgb, var(--card-border) 83%, var(--mix-light)) 45%, transparent));
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--cream) 65%, transparent),
    inset 0 -1px 0 color-mix(in srgb, var(--shadow-ink-2) 6%, transparent);
}
.milestone-date-text {
  font-family: var(--font-display);
  font-size: var(--fs-13);
  letter-spacing: var(--track-02);
  color: var(--ink);
  line-height: 1;
  text-transform: uppercase;
}
.milestone-date-rel {
  font-size: var(--fs-8-5);
  font-weight: var(--fw-semi);
  letter-spacing: var(--track-06);
  color: var(--ink-muted);
  text-transform: uppercase;
  margin-top: 3px;
}
.milestone-body {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.milestone-type {
  font-size: var(--fs-8-5);
  font-weight: var(--fw-bold);
  letter-spacing: var(--track-10);
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: var(--r-round);
  width: fit-content;
}
.milestone-label {
  font-size: var(--fs-12);
  font-weight: var(--fw-med);
  color: var(--ink);
  line-height: 1.3;
  margin-top: 1px;
}
.milestone-lead {
  font-size: var(--fs-10-5);
  color: var(--ink-muted);
  font-style: italic;
}
.pipeline-card .pipe-row { min-height: 130px; align-items: center; justify-content: center; }
.pipeline-card .pipe-donut-num { text-align: center; }
.pipeline-card .pipe-donut-cap {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100px;
}
.pipe-health { flex: 1; }
.pipe-stages { display: flex; flex-direction: column; gap: 10px; padding: 4px 0 6px; }
.pipe-stage { display: flex; flex-direction: column; gap: 4px; }
.pipe-stage-head {
  display: grid;
  grid-template-columns: 8px 1fr auto auto;
  gap: 8px;
  align-items: center;
  font-size: var(--fs-11-5);
  font-feature-settings: var(--tnum);
}
.pipe-stage-dot { width: 8px; height: 8px; border-radius: 50%; }
.pipe-stage-label { color: var(--ink); font-weight: var(--fw-med); }
.pipe-stage-count { color: var(--ink); font-weight: var(--fw-med); min-width: 28px; text-align: right; }
.pipe-stage-pct { color: var(--ink-muted); min-width: 36px; text-align: right; }
.pipe-stage-track {
  height: 6px;
  border-radius: var(--r-round);
  background: color-mix(in srgb, var(--ink-muted) 15%, transparent);
  overflow: hidden;
  box-shadow: inset 0 1px 1px color-mix(in srgb, var(--shadow-ink) 10%, transparent);
}
.pipe-stage-fill {
  height: 100%;
  border-radius: var(--r-round);
  transition: width var(--dur-4) ease;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.35) inset;
}

.pipe-velocity {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid color-mix(in srgb, var(--card-border) 35%, transparent);
}
.pipe-vel-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: var(--fs-10);
  letter-spacing: var(--track-14);
  font-weight: var(--fw-semi);
  text-transform: uppercase;
  color: var(--ink-muted);
}
.pipe-vel-stat { letter-spacing: var(--track-04); text-transform: none; font-weight: var(--fw-med); }
.pipe-vel-leaf { color: var(--olive-3); font-weight: var(--fw-bold); }
.pipe-spark {
  width: 100%;
  height: 56px;
  margin-top: 6px;
  display: block;
}
.pipe-vel-axis {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  font-size: var(--fs-9);
  letter-spacing: var(--track-10);
  color: var(--ink-soft);
  text-align: center;
  margin-top: 2px;
}

/* legacy rules below — keep but unused */
.pipe-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 4px 0;
}
.pipe-donut-wrap {
  position: relative;
  width: 124px; height: 124px;
  flex: 0 0 124px;
}
.pipe-legend { flex: 1; min-width: 0; }
/* No inner darken disk — pipeline donut is intentionally flat. */
.pipe-donut-wrap > svg { position: relative; z-index: 2; }
.pipe-donut-center {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center;
  z-index: 3;
  pointer-events: none;
}
.pipe-donut-num {
  font-family: var(--font-display);
  font-size: var(--fs-28);
  letter-spacing: var(--track-005);
  color: var(--ink);
  line-height: 1;
  text-align: center;
}
.pipe-donut-cap {
  font-size: var(--fs-9);
  letter-spacing: var(--track-18);
  color: var(--ink-muted);
  font-weight: var(--fw-semi);
  margin-top: 4px;
  text-align: center;
}
.pipe-legend {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.pipe-row-item {
  display: grid;
  grid-template-columns: 10px 1fr 28px 36px;
  gap: 6px;
  align-items: center;
  font-size: var(--fs-11-5);
  color: var(--ink);
  font-feature-settings: var(--tnum);
}
.pipe-dot { width: 8px; height: 8px; border-radius: 50%; }
.pipe-label { color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.pipe-count { color: var(--ink); font-weight: var(--fw-med); text-align: right; }
.pipe-pct { color: var(--ink-muted); text-align: right; font-size: var(--fs-11); padding-right: 4px; }
.pipe-foot {
  margin-top: 10px;
  padding-top: 10px;
  font-size: var(--fs-10-5);
  color: var(--ink-muted);
  border-top: 1px solid color-mix(in srgb, var(--card-border) 40%, transparent);
  letter-spacing: var(--track-02);
}

/* ─── Pipeline overview interactivity ────────────────────────────────── */
.pipe-row-item {
  background: none;
  border: none;
  font-family: var(--font-body);
  cursor: pointer;
  padding: 4px 6px;
  margin: 0 -6px;
  border-radius: var(--r-xs);
  text-align: left;
  transition: background var(--dur-0) ease, opacity var(--dur-1) ease;
}
.pipe-row-item:hover { background: color-mix(in srgb, var(--sidebar-bg) 5%, transparent); }
.pipe-row-item.is-active {
  background: color-mix(in srgb, var(--leaf) 16%, transparent);
  outline: 1px solid color-mix(in srgb, var(--leaf) 45%, transparent);
}
.pipe-row-item.is-dimmed { opacity: 0.42; }
/* compact spacing to fit 6 stages comfortably */
.pipeline-card .pipe-row-item { padding: 3px 6px; margin: 0 -6px; }
.pipeline-card .pipe-legend { gap: 3px; }

.pipeline-card .rc-head { min-height: 26px; }
.pipe-clear {
  background: color-mix(in srgb, var(--leaf) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--leaf) 45%, transparent);
  color: var(--olive-3);
  font-size: var(--fs-10-5);
  font-weight: var(--fw-semi);
  letter-spacing: var(--track-04);
  padding: 3px 8px;
  border-radius: var(--r-pill);
  cursor: pointer;
  position: absolute;
  right: 18px;
  top: 14px;
}
.pipe-clear:hover { background: color-mix(in srgb, var(--leaf) 24%, transparent); }

/* ─── Schedule day groups (scrollable) ───────────────────────────────── */
.time-slots--scrollable {
  flex: 1;
  min-height: 0;
  max-height: 360px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--card-border) 40%, transparent) transparent;
  padding-right: 2px;
}
.time-slots--scrollable::-webkit-scrollbar { width: 6px; }
.time-slots--scrollable::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--card-border) 35%, transparent); border-radius: 3px; }

.sched-day {
  scroll-margin-top: 2px;
  padding: 4px 0 8px;
  border-top: 1px solid color-mix(in srgb, var(--card-border) 45%, transparent);
}
.sched-day:first-child { border-top: none; padding-top: 0; }
/* Day header — elegant rounded pill that spans the full width of the time
   slots beneath it. No negative margin, no left crop. */
.sched-day-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: var(--fs-10);
  letter-spacing: var(--track-18);
  font-weight: var(--fw-bold);
  color: var(--ink-muted);
  text-transform: uppercase;
  padding: 9px 16px;
  margin: 0 0 10px;
  width: 100%;
  box-sizing: border-box;
  position: sticky;
  top: 0;
  background: linear-gradient(180deg, color-mix(in srgb, color-mix(in srgb, var(--gold-11) 28%, var(--mix-light)) 95%, transparent), color-mix(in srgb, color-mix(in srgb, var(--paper-2) 96%, var(--mix-dark)) 92%, transparent));
  backdrop-filter: blur(var(--blur-scrim));
  border-radius: var(--r-round);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--cream) 65%, transparent),
    inset 0 -1px 0 color-mix(in srgb, var(--shadow-ink-2) 6%, transparent),
    0 1px 2px color-mix(in srgb, var(--shadow-ink) 6%, transparent);
  z-index: 2;
}
.sched-day-tag {
  font-size: var(--fs-9);
  letter-spacing: var(--track-14);
  background: var(--sidebar-bg);
  color: color-mix(in srgb, var(--foil) 33%, var(--mix-light));
  padding: 2px 8px;
  border-radius: var(--r-pill);
}
.sched-day.is-selected .sched-day-head {
  color: var(--ink);
  background: linear-gradient(180deg, color-mix(in srgb, color-mix(in srgb, var(--gold-2) 26%, var(--mix-light)) 98%, transparent), color-mix(in srgb, color-mix(in srgb, var(--gold-8) 31%, var(--mix-light)) 95%, transparent));
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--cream) 85%, transparent),
    inset 0 -1px 0 color-mix(in srgb, var(--shadow-ink-2) 10%, transparent),
    0 0 0 1.5px color-mix(in srgb, var(--nav-active) 55%, transparent),
    0 4px 10px color-mix(in srgb, var(--shadow-ink) 10%, transparent);
}
.sched-day.is-selected {
  position: relative;
}
.sched-day.is-selected::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, color-mix(in srgb, var(--leaf) 6%, transparent), transparent 40%);
  border-radius: var(--r-xs);
  pointer-events: none;
  z-index: 0;
}
.sched-day.is-selected > * { position: relative; z-index: 1; }
.sched-day .time-slot { padding-top: 6px; }
.sched-day .time-slot:first-of-type { border-top: none; padding-top: 0; }

/* v01y — Calendar connection states inside the right-column ScheduleCard. */
.cal-connect-callout {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 10px;
  margin: 4px 0 8px;
  background: color-mix(in srgb, var(--nav-active) 18%, transparent);
  border: 1px solid color-mix(in srgb, var(--nav-active) 45%, transparent);
  border-radius: var(--r-sm);
  font-size: var(--fs-11-5);
  color: var(--ink-on-dark);
}
.cal-connect-btn {
  background: color-mix(in srgb, var(--leaf) 85%, transparent);
  border: 1px solid color-mix(in srgb, var(--olive-2) 85%, transparent);
  color: var(--ink-cream);
  padding: 4px 10px;
  border-radius: var(--r-round);
  font: inherit;
  font-weight: var(--fw-semi);
  font-size: var(--fs-10-5);
  letter-spacing: var(--track-04);
  cursor: pointer;
  white-space: nowrap;
}
.cal-connect-btn:hover { filter: brightness(1.06); }
.cal-status-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 4px 10px;
  margin: 2px 0 8px;
  font-size: var(--fs-11);
  color: var(--ink-muted);
}
.cal-status-text { font-style: italic; }
.cal-sync-btn {
  background: color-mix(in srgb, var(--cream) 55%, transparent);
  border: 1px solid var(--card-border);
  color: var(--ink);
  padding: 3px 10px;
  border-radius: var(--r-round);
  font: inherit;
  font-weight: var(--fw-semi);
  font-size: var(--fs-10-5);
  cursor: pointer;
}
.cal-sync-btn:hover:not(:disabled) { background: color-mix(in srgb, var(--cream) 85%, transparent); }
.cal-sync-btn:disabled { opacity: 0.55; cursor: not-allowed; }

/* v03d — month label + week nav share one row (CALENDAR header dropped). */
.sched-month-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
}
.sched-month-row .sched-month { margin: 0; }

/* v03d — Connect Google Calendar in-panel popup. Sits inside the
   .schedule-card glass tile, doesn't take over the page. */
.cal-connect-popup {
  margin: 8px 0 10px;
  padding: 12px 12px 10px;
  background: color-mix(in srgb, var(--cream-2) 96%, transparent);
  border: 1px solid color-mix(in srgb, var(--card-border) 55%, transparent);
  border-radius: var(--r-panel);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--cream) 85%, transparent),
    0 4px 14px color-mix(in srgb, var(--shadow-ink) 18%, transparent);
}
.cal-connect-popup-title {
  font-family: var(--font-display);
  font-size: var(--fs-17);
  color: var(--ink);
  letter-spacing: var(--track-01);
  margin-bottom: 4px;
}
.cal-connect-popup-body {
  font-size: var(--fs-12);
  color: var(--ink-muted);
  line-height: 1.4;
  margin-bottom: 10px;
}
.cal-connect-popup-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}
.cal-connect-cancel,
.cal-connect-go {
  font: inherit;
  font-size: var(--fs-11);
  font-weight: var(--fw-bold);
  letter-spacing: var(--track-04);
  padding: 5px 12px;
  border-radius: var(--r-round);
  cursor: pointer;
}
.cal-connect-cancel {
  background: color-mix(in srgb, var(--cream) 55%, transparent);
  border: 1px solid var(--card-border);
  color: var(--ink);
}
.cal-connect-cancel:hover { background: color-mix(in srgb, var(--cream) 85%, transparent); }
.cal-connect-go {
  background: linear-gradient(180deg, var(--olive-6) 0%, var(--olive-4) 100%);
  border: 1px solid color-mix(in srgb, var(--surface-forest-6) 85%, transparent);
  color: var(--ink-cream);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--cream) 40%, transparent), 0 2px 6px color-mix(in srgb, var(--surface-forest) 25%, transparent);
}
.cal-connect-go:hover { filter: brightness(1.06); }

/* Hugo update — calendar-connect modal reuses the shared
   `.modal-backdrop` class (same one ShotDetailModal uses), so the
   backdrop blur + darkening match every other default popup in the
   app. The `.cal-connect-modal-backdrop` selector remains only as
   a stable hook for any future calendar-specific tweaks. */
.cal-connect-modal-backdrop {
  /* Inherit everything from .modal-backdrop; no overrides needed. */
}
.cal-connect-modal {
  position: relative;
  max-width: 440px;
  width: 100%;
  padding: 22px 22px 18px;
  background: color-mix(in srgb, var(--cream-2) 97%, transparent);
  border: 1px solid color-mix(in srgb, var(--card-border) 55%, transparent);
  border-radius: var(--r-card);
  box-shadow:
    0 12px 40px color-mix(in srgb, var(--shade-15) 45%, transparent),
    inset 0 1px 0 color-mix(in srgb, var(--cream) 85%, transparent);
}
.cal-connect-error {
  margin: 8px 0 12px;
  padding: 10px 12px;
  border: 1px solid var(--danger-border);
  background: color-mix(in srgb, var(--danger) 10%, transparent);
  color: var(--danger);
  border-radius: var(--r-sm);
  font-size: var(--fs-12-5);
  line-height: 1.4;
}

/* v04g — inline OAuth panel additions. */
.cal-connect-popup { position: relative; }
.cal-connect-x {
  position: absolute;
  top: 6px;
  right: 8px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: transparent;
  border: none;
  color: var(--ink-muted);
  font-size: var(--fs-18);
  line-height: 1;
  cursor: pointer;
}
.cal-connect-x:hover { background: color-mix(in srgb, var(--black) 6%, transparent); color: var(--ink); }
.cal-connect-primary {
  display: block;
  width: 100%;
  text-align: center;
  text-decoration: none;
  margin: 8px 0 4px;
  padding: 8px 12px;
}
.cal-connect-footnote {
  font-size: var(--fs-10-5);
  color: var(--ink-muted);
  text-align: center;
}