/* ── CALENDAR — SHELL + TIME GRID ──────────────────────
   A rail (mini-month + what's on the calendar) beside the grid, with the
   period chrome above it. Tokens only; the grid reads in both themes.

   The hour height lives in JS (CAL_HOUR_PX) because event tops are computed
   from it — a value duplicated here would drift and put 3pm items at 2:40. */

#view-calendar .cal-shell {
  display: flex;
  align-items: stretch;
  height: 100%;
  min-height: 0;
}

/* ── Left rail ── */
#view-calendar .cal-rail {
  width: 232px;
  flex-shrink: 0;
  border-right: 1px solid var(--b1);
  padding: var(--s-5) var(--s-4);
  overflow-y: auto;
}
#view-calendar .cal-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

/* Mini month */
#view-calendar .cal-mm { margin-bottom: var(--s-6); }
#view-calendar .mm-head {
  font: var(--fw-semi) var(--fs-13)/1 var(--ff-sans);
  color: var(--tx);
  margin-bottom: var(--s-3);
}
#view-calendar .mm-dow,
#view-calendar .mm-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}
#view-calendar .mm-dow span {
  text-align: center;
  font: var(--fw-medium) var(--fs-10)/1 var(--ff-sans);
  color: var(--t3);
  padding-bottom: 4px;
}
#view-calendar .mm-cell {
  aspect-ratio: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: var(--r-1);
  background: none;
  font: var(--fw-regular) var(--fs-11)/1 var(--ff-mono);
  font-variant-numeric: tabular-nums;
  color: var(--t2);
  cursor: pointer;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
#view-calendar .mm-cell:hover { background: var(--bg3); color: var(--tx); }
#view-calendar .mm-pad { cursor: default; }
/* The days the main grid is currently showing — the rail's job is to say
   where you are, not just let you jump. */
#view-calendar .mm-cell.in-view { background: var(--bg3); color: var(--tx); }
#view-calendar .mm-cell.is-today { background: var(--accent); color: var(--accent-ink); font-weight: var(--fw-semi); }

/* Sources */
#view-calendar .cal-legend-hd {
  font: var(--fw-semi) var(--fs-11)/1 var(--ff-sans);
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--t3);
  margin-bottom: var(--s-3);
}
#view-calendar .cal-src {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 0;
  font: var(--fw-medium) var(--fs-12)/1.3 var(--ff-sans);
  color: var(--t2);
}
#view-calendar .cal-src-n {
  margin-left: auto;
  font-family: var(--ff-mono);
  font-variant-numeric: tabular-nums;
  color: var(--t3);
}
#view-calendar .cal-swatch { width: 9px; height: 9px; border-radius: 3px; flex-shrink: 0; }
#view-calendar .cal-swatch.kind-todo  { background: var(--t2); }
#view-calendar .cal-swatch.kind-video { background: var(--accent); }
#view-calendar .cal-src-hint {
  margin: var(--s-3) 0 0;
  font: var(--fw-regular) var(--fs-11)/1.5 var(--ff-sans);
  color: var(--t3);
}

/* ── Period chrome ── */
#view-calendar .cal-bar {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  padding: var(--s-4) var(--s-5);
  border-bottom: 1px solid var(--b1);
  flex-shrink: 0;
}
#view-calendar .cal-bar-l { flex: 1; min-width: 0; }
#view-calendar .cal-period {
  margin: 0;
  font: var(--fw-bold) var(--fs-20)/1.2 var(--ff-sans);
  letter-spacing: -0.015em;
  color: var(--tx);
}
#view-calendar .cal-bar-r { display: flex; align-items: center; gap: var(--s-2); flex-shrink: 0; }

#view-calendar .cal-views {
  display: inline-flex;
  padding: 2px;
  background: var(--bg3);
  border-radius: var(--r-2);
}
#view-calendar .cal-vbtn {
  padding: 5px 11px;
  border: 0;
  border-radius: var(--r-1);
  background: none;
  color: var(--t2);
  font: var(--fw-medium) var(--fs-12)/1 var(--ff-sans);
  cursor: pointer;
  transition: background var(--t-base) var(--ease), color var(--t-base) var(--ease);
}
#view-calendar .cal-vbtn:hover { color: var(--tx); }
#view-calendar .cal-vbtn.on { background: var(--bg2); color: var(--tx); box-shadow: var(--shadow-sm); }

#view-calendar .cal-today {
  padding: 6px 12px;
  background: var(--bg2);
  border: 1px solid var(--b1);
  border-radius: var(--r-2);
  color: var(--t2);
  font: var(--fw-medium) var(--fs-12)/1 var(--ff-sans);
  cursor: pointer;
}
#view-calendar .cal-today:hover { border-color: var(--b3); color: var(--tx); }

#view-calendar .cal-step { display: inline-flex; gap: 2px; }
#view-calendar .cal-step button {
  width: 28px; height: 28px;
  display: inline-flex; align-items: center; justify-content: center;
  background: none; border: 0; border-radius: var(--r-2);
  color: var(--t2); cursor: pointer;
}
#view-calendar .cal-step button:hover { background: var(--bg3); color: var(--tx); }
#view-calendar .cal-step svg { width: 15px; height: 15px; }

/* Primary action is ink, per branddesign.md §3. */
#view-calendar .cal-add {
  padding: 6px 13px;
  background: var(--fill, var(--tx));
  border: 1px solid var(--fill, var(--tx));
  border-radius: var(--r-2);
  color: var(--fill-ink);
  font: var(--fw-semi) var(--fs-12)/1 var(--ff-sans);
  cursor: pointer;
}
#view-calendar .cal-add:hover { background: var(--t2); border-color: var(--t2); }

/* ── The grid ── */
#view-calendar .cal-grid-host { flex: 1; min-height: 0; display: flex; }
#view-calendar .cg { flex: 1; display: flex; flex-direction: column; min-height: 0; }

#view-calendar .cg-head { display: flex; border-bottom: 1px solid var(--b1); flex-shrink: 0; }
/* The gutter width is shared by the header, the all-day band and the body so
   the three stay in column. */
#view-calendar .cg-gutter-head,
#view-calendar .cg-ad-label,
#view-calendar .cg-gutter { width: 58px; flex-shrink: 0; }

#view-calendar .cg-head-cols,
#view-calendar .cg-ad-cols,
#view-calendar .cg-cols {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(var(--cg-days), minmax(0, 1fr));
}
#view-calendar .cg-head-col {
  padding: 9px 0 10px;
  text-align: center;
  border-left: 1px solid var(--b1);
}
#view-calendar .cg-head-dow {
  display: block;
  font: var(--fw-medium) var(--fs-11)/1 var(--ff-sans);
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--t3);
}
#view-calendar .cg-head-num {
  display: block;
  margin-top: 5px;
  font: var(--fw-semi) var(--fs-18)/1 var(--ff-sans);
  font-variant-numeric: tabular-nums;
  color: var(--t2);
}
#view-calendar .cg-head-col.is-today .cg-head-dow { color: var(--accent); }
#view-calendar .cg-head-col.is-today .cg-head-num { color: var(--accent); }

/* All-day band — where untimed todos live, which is most of them. */
#view-calendar .cg-allday {
  display: flex;
  border-bottom: 1px solid var(--b1);
  flex-shrink: 0;
  max-height: 92px;
  overflow-y: auto;
}
#view-calendar .cg-ad-label {
  padding: 7px 8px 0 0;
  text-align: right;
  font: var(--fw-regular) var(--fs-10)/1 var(--ff-sans);
  color: var(--t3);
}
#view-calendar .cg-ad-col {
  min-height: 30px;
  padding: 4px;
  border-left: 1px solid var(--b1);
  cursor: pointer;
}
#view-calendar .cg-chip {
  display: block;
  margin-bottom: 3px;
  padding: 3px 7px;
  border-radius: var(--r-1);
  background: var(--bg3);
  border-left: 2px solid var(--t3);
  font: var(--fw-medium) var(--fs-11)/1.35 var(--ff-sans);
  color: var(--t2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
}
#view-calendar .cg-chip:hover { background: var(--bg4); color: var(--tx); }
#view-calendar .cg-chip.kind-video { border-left-color: var(--accent); color: var(--tx); }
#view-calendar .cg-chip.is-done { opacity: .5; text-decoration: line-through; }

/* Scrolling body */
#view-calendar .cg-body { flex: 1; display: flex; overflow-y: auto; min-height: 0; position: relative; }
#view-calendar .cg-gutter { position: relative; }
#view-calendar .cg-hour {
  position: relative;
  border-top: 1px solid transparent;   /* keeps the gutter aligned with .cg-slot */
}
#view-calendar .cg-hour span {
  position: absolute;
  top: -7px; right: 8px;
  font: var(--fw-regular) var(--fs-10)/1 var(--ff-mono);
  font-variant-numeric: tabular-nums;
  color: var(--t3);
}
#view-calendar .cg-cols { position: relative; }
#view-calendar .cg-col { position: relative; border-left: 1px solid var(--b1); }
#view-calendar .cg-col.is-today { background: var(--accent-bg); }
#view-calendar .cg-slot { border-top: 1px solid var(--b1); cursor: pointer; }
#view-calendar .cg-slot:hover { background: var(--bg3); }

/* Events */
#view-calendar .cg-ev {
  position: absolute;
  padding: 3px 6px;
  border-radius: var(--r-2);
  background: var(--bg3);
  border-left: 3px solid var(--t2);
  overflow: hidden;
  cursor: pointer;
  transition: box-shadow var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
#view-calendar .cg-ev:hover { background: var(--bg4); box-shadow: var(--shadow-sm); z-index: 3; }
#view-calendar .cg-ev.kind-video { border-left-color: var(--accent); }
#view-calendar .cg-ev.is-done { opacity: .55; }
#view-calendar .cg-ev-time {
  display: block;
  font: var(--fw-medium) var(--fs-10)/1.2 var(--ff-mono);
  font-variant-numeric: tabular-nums;
  color: var(--t3);
}
#view-calendar .cg-ev-title {
  display: block;
  font: var(--fw-medium) var(--fs-12)/1.3 var(--ff-sans);
  color: var(--tx);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#view-calendar .cg-ev.is-done .cg-ev-title { text-decoration: line-through; }

/* Now-line. Hidden outright when today is off screen — see calPositionNow. */
#view-calendar .cg-now {
  position: absolute;
  height: 0;
  border-top: 2px solid var(--accent);
  pointer-events: none;
  z-index: 4;
}
#view-calendar .cg-now-dot {
  position: absolute;
  left: -4px; top: -5px;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--accent);
}

@media (max-width: 900px) {
  #view-calendar .cal-rail { display: none; }
  #view-calendar .cal-period { font-size: var(--fs-16); }
  #view-calendar .cal-bar { flex-wrap: wrap; gap: var(--s-2); }
}

/* ── Dragging ──────────────────────────────────────────
   Three gestures share the grid, so each needs its own affordance: a grip on
   the bottom edge for resize, grab/grabbing cursors for move, and a ghost
   block while a new span is being drawn. */

/* An event is draggable, so say so before the drag starts. */
#view-calendar .cg-ev { cursor: grab; user-select: none; touch-action: none; }
#view-calendar .cg-ev.is-dragging {
  cursor: grabbing;
  opacity: .9;
  box-shadow: var(--shadow-lg);
  z-index: 6;
  transition: none;                 /* follow the pointer exactly, no easing lag */
}

/* Resize grip — todos only; a publish is a moment, not a span, so a video
   never renders one. Invisible until the pointer is on the block, because a
   permanent handle on every event is visual noise. */
#view-calendar .cg-ev-grip {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 7px;
  cursor: ns-resize;
  opacity: 0;
  transition: opacity var(--t-fast) var(--ease);
}
#view-calendar .cg-ev-grip::after {
  content: '';
  position: absolute;
  left: 50%; bottom: 2px;
  transform: translateX(-50%);
  width: 22px; height: 2px;
  border-radius: var(--r-pill);
  background: var(--t3);
}
#view-calendar .cg-ev:hover .cg-ev-grip { opacity: 1; }

/* The span being drawn. Dashed so it reads as provisional rather than as an
   event that already exists. */
#view-calendar .cg-ghost {
  background: var(--accent-bg-2);
  border: 1px dashed var(--accent);
  border-left-width: 1px;
  pointer-events: none;
  z-index: 5;
}
#view-calendar .cg-ghost .cg-ev-time { color: var(--accent); font-weight: var(--fw-semi); }

/* While any drag is live, the slots must not fight for the pointer. */
#view-calendar .cg-cols:has(.cg-ev.is-dragging) .cg-slot,
#view-calendar .cg-cols:has(.cg-ghost) .cg-slot { cursor: inherit; }

@media (prefers-reduced-motion: reduce) {
  #view-calendar .cg-ev-grip { transition: none; }
}

/* ── Channel upload slots ──────────────────────────────
   A thin band above the all-day row. Deliberately quieter than an event: a
   slot is an intention, not something scheduled, and it must not compete with
   the work actually on the grid. */
#view-calendar .cg-cadence {
  display: flex;
  border-bottom: 1px solid var(--b1);
  background: var(--bg);
  flex-shrink: 0;
}
#view-calendar .cg-cad-label {
  width: 58px;
  flex-shrink: 0;
  padding: 6px 8px 0 0;
  text-align: right;
  font: var(--fw-regular) var(--fs-10)/1 var(--ff-sans);
  color: var(--t3);
}
#view-calendar .cg-cad-cols {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(var(--cg-days), minmax(0, 1fr));
}
#view-calendar .cg-cad-col {
  min-height: 26px;
  padding: 4px;
  border-left: 1px solid var(--b1);
  display: flex;
  flex-direction: column;
  gap: 3px;
}
#view-calendar .cg-cad {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 2px 6px;
  border-radius: var(--r-pill);
  border: 1px dashed var(--b3);
  font: var(--fw-medium) var(--fs-10)/1.4 var(--ff-sans);
  color: var(--t2);
  min-width: 0;
}
#view-calendar .cg-cad-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#view-calendar .cg-cad-time {
  margin-left: auto;
  flex-shrink: 0;
  font-family: var(--ff-mono);
  font-variant-numeric: tabular-nums;
  color: var(--t3);
}
#view-calendar .cg-cad-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--t3);
}

/* Filled: something is scheduled for this channel that day. Solid border, so
   "handled" reads at a glance and the dashed ones are what stand out. */
#view-calendar .cg-cad.kind-ok {
  border-style: solid;
  border-color: var(--b2);
  color: var(--t3);
}
#view-calendar .cg-cad.kind-ok .cg-cad-dot { background: var(--success); }

/* An upcoming upload day with nothing against it — the state worth noticing,
   which is why it keeps full contrast. */
#view-calendar .cg-cad.kind-open { color: var(--tx); }
#view-calendar .cg-cad.kind-open .cg-cad-dot { background: var(--accent); }

/* Already passed and never filled. Stated, not shouted: it is history, and
   nothing can be done about it from here. */
#view-calendar .cg-cad.kind-missed {
  border-color: var(--b2);
  color: var(--t3);
}
#view-calendar .cg-cad.kind-missed .cg-cad-dot { background: var(--t4); }

/* ── Channel settings: upload days picker ── */
.chd-cad-days { display: flex; flex-wrap: wrap; gap: 5px; }
.chd-cad-day {
  padding: 6px 10px;
  border: 1px solid var(--b2);
  border-radius: var(--r-2);
  background: var(--bg2);
  color: var(--t2);
  font: var(--fw-medium) var(--fs-12)/1 var(--ff-sans);
  cursor: pointer;
  transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease),
              color var(--t-fast) var(--ease);
}
.chd-cad-day:hover { border-color: var(--b3); color: var(--tx); }
/* Selected days are ink, matching the app's primary-action treatment rather
   than inventing a second "on" colour. */
.chd-cad-day.on {
  background: var(--fill, var(--tx));
  border-color: var(--fill, var(--tx));
  color: var(--fill-ink);
}