/* ── Shared calendar classes ────────────────────────────────────── */
@media (max-width: 640px) {
  .cal-cell { min-height: 0; padding: 3px 3px; }
  .cal-duty  { font-size: 8px; line-height: 1.4; }
  .cal-dow   { font-size: 8px; }
}
.cal-month-label { text-align: center; font-family: var(--mono); font-size: 12px; font-weight: 700; color: var(--text); padding: 2px 0 10px; letter-spacing: 1px; }
.cal-dow-row { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; margin-bottom: 2px; }
.cal-dow { text-align: center; font-family: var(--mono); font-size: 9px; color: var(--text-dim); letter-spacing: 1px; padding: 3px 0; }
.cal-dow-sun { color: var(--danger); }
.cal-dow-sat { color: var(--accent); }
.cal-month-wrapper { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.cal-dow-row { flex-shrink: 0; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; flex: 1; min-height: 0; grid-auto-rows: calc((100% - 10px) / 6); }

/* ── Base cell — redesign: subtle color wash (no border) ─────── */
.cal-cell {
  border-radius: 11px;
  min-height: 0;
  overflow: hidden;
  padding: 5px 5px 4px;
  display: flex;
  flex-direction: column;
  gap: 1px;
  background: var(--surface);
  cursor: pointer;
  transition: opacity .15s;
}
.cal-cell:active { opacity: .65; }
.cal-cell-empty {
  background: transparent;
  pointer-events: none;
}

/* ── Day number circle ────────────────────────────────────────── */
.cal-day-num {
  font-family: var(--mono); font-size: 11px; font-weight: 700;
  color: var(--text-dim); line-height: 1;
  width: 22px; height: 22px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.cal-day-num.cal-sun { color: var(--danger); }
.cal-day-num.cal-sat { color: var(--accent); }

.cal-duty { font-family: var(--mono); font-size: 9px; line-height: 1.5; color: var(--text); flex: 1; word-break: break-all; border-radius: 2px; padding: 1px 0; min-height: 0; white-space: pre-line; user-select: none; }
.cal-duty:empty::before { content: attr(data-placeholder); color: rgba(142,142,147,.18); pointer-events: none; }

/* ── Duty type cell — subtle color wash ──────────────────────── */
.cal-cell-short    { background: var(--duty-short-bg); }
.cal-cell-overnight{ background: var(--duty-overnight-bg); }
.cal-cell-long     { background: var(--duty-long-bg); }
.cal-cell-sep      { background: var(--duty-sep-bg); }
.cal-cell-scs-group{ background: var(--duty-scs-bg); }
.cal-cell-ground   { background: var(--duty-ground-bg); }

.cal-cell-short    .cal-duty { color: var(--duty-short-text); }
.cal-cell-overnight .cal-duty { color: var(--duty-overnight-text); }
.cal-cell-long     .cal-duty { color: var(--duty-long-text); }
.cal-cell-sep      .cal-duty { color: var(--duty-sep-text); }
.cal-cell-scs-group .cal-duty { color: var(--purple); }
.cal-cell-ground   .cal-duty { color: var(--duty-ground-text); }

/* ── Calendar cells: iOS theme ───────────────────────────────── */
.m-cal-scroll .cal-month-label { color: var(--text); }
.m-cal-scroll .cal-dow         { color: var(--text-dim); font-size: 8px; }
.m-cal-scroll .cal-dow-sun     { color: var(--danger); }
.m-cal-scroll .cal-dow-sat     { color: var(--accent); }
.m-cal-scroll .cal-cell {
  background: var(--surface);
  border-radius: 11px; min-height: 0; padding: 3px 4px;
}
.m-cal-scroll .cal-cell-empty  { background: transparent; }
.m-cal-scroll .cal-day-num         { color: var(--text-dim); font-size: 7px; width: 16px; height: 16px; }
.m-cal-scroll .cal-day-num.cal-sun { color: var(--text-dim); }
.m-cal-scroll .cal-day-num.cal-sat { color: var(--text-dim); }
.m-cal-scroll .cal-duty { color: var(--text); font-size: 8px; line-height: 1.3; user-select: none; }
.m-cal-scroll .cal-duty:empty::before { color: rgba(142,142,147,.18); }
.m-cal-scroll .cal-time-range { display: none; }
.m-cal-scroll .cal-cell { cursor: pointer; }
.m-cal-scroll .cal-cell.cal-selected { background: rgba(88,86,214,.18) !important; outline: 2px solid rgba(88,86,214,.45); outline-offset: -2px; }

/* ── Duty type — subtle color wash (iOS overrides) ───────────── */
.m-cal-scroll .cal-cell-short     { background: var(--duty-short-bg); }
.m-cal-scroll .cal-cell-overnight { background: var(--duty-overnight-bg); }
.m-cal-scroll .cal-cell-long      { background: var(--duty-long-bg); }
.m-cal-scroll .cal-cell-sep       { background: var(--duty-sep-bg); }
.m-cal-scroll .cal-cell-scs-group { background: var(--duty-scs-bg); }
.m-cal-scroll .cal-cell-ground    { background: var(--duty-ground-bg); }

.m-cal-scroll .cal-cell-short    .cal-duty { color: var(--duty-short-text); }
.m-cal-scroll .cal-cell-overnight .cal-duty { color: var(--duty-overnight-text); }
.m-cal-scroll .cal-cell-long     .cal-duty { color: var(--duty-long-text); }
.m-cal-scroll .cal-cell-sep      .cal-duty { color: var(--duty-sep-text); }
.m-cal-scroll .cal-cell-scs-group .cal-duty { color: var(--purple); }
.m-cal-scroll .cal-cell-ground    .cal-duty { color: var(--duty-ground-text); }

/* ── Text wrapping in calendar cells ────────────────────────── */
.cal-duty { white-space: pre-line; word-break: break-word; }