/* Calendar-view styles. Layered on top of shared.css.
   Faithful port of purina-post-calendar.html, minus:
     - "Edit colors" UI (admin-only, lives in admin panel)
     - "Download HTML" button
     - "Copy data as code" / "Reset to defaults" toolbar buttons */

/* ── HEADER OVERRIDES — title-block + project dates ────── */
.header-center .project-dates {
  font-size: 10px; font-weight: 500; letter-spacing: 2.5px;
  color: rgba(232,224,208,.45); text-transform: uppercase; margin-top: 5px;
}

/* ── LEGEND STRIP ──────────────────────────────────────── */
.legend-strip {
  background: #cfc8bd;
  padding: 10px 0;
  border-bottom: 1px solid rgba(26,46,61,.08);
}
/* Centered column that lines up with .main-content's max-width. The
   beige strip background stays full-viewport, but the legend chips
   themselves track the calendar column directly below them. */
.legend-strip-inner {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 20px;
  display: flex; align-items: center; gap: 16px;
}
.legend-inline {
  flex: 1; display: flex; align-items: center; justify-content: space-between; gap: 18px;
}
.legend-main {
  display: grid; grid-template-columns: repeat(5, max-content);
  gap: 8px 24px; align-items: center;
}
.legend-important {
  /* Key Milestones — 2-column grid so the four common entries
     (Feedback Due / Client Review / Picture Lock / Review Link)
     read as a tidy 2×2 block instead of a tall vertical column. */
  display: grid;
  grid-template-columns: max-content max-content;
  gap: 5px 18px;
  border-left: 1px solid rgba(26,46,61,.2);
  padding-left: 18px;
  align-items: center;
}
.legend-imp-header {
  font-size: 7px; font-weight: 800; letter-spacing: 2.5px;
  text-transform: uppercase; color: rgba(26,46,61,.5);
  margin-bottom: 1px;
  grid-column: 1 / -1;        /* header spans both milestone columns */
}
.legend-strip-label {
  font-size: 7px; font-weight: 800; letter-spacing: 2.5px;
  text-transform: uppercase; color: rgba(26,46,61,.4);
  flex-shrink: 0; padding-right: 14px;
  border-right: 1px solid rgba(26,46,61,.2);
}
.legend-item   { display: flex; align-items: center; gap: 6px; }
.legend-swatch { width: 20px; height: 10px; border-radius: 2px; flex-shrink: 0; }
.legend-label  {
  font-size: 9.5px; font-weight: 500; letter-spacing: .2px;
  color: rgba(26,46,61,.62);
}

/* Calendar editor sizing. The calendar should print to letter
   landscape (11" × 8.5"), so on screen we constrain .main-content
   to roughly 11" of width (1050px ≈ 11" @ 96dpi) and center it in
   the viewport. The full-width navy bars (header / legend / footer)
   stay viewport-wide for visual chrome, but their inner content
   slots into the same 1050px column so everything lines up
   vertically with the grid below.
   Padding override drops the shared.css default (28/28/48) on the
   calendar page only; calendar.css is only loaded here so the
   scope is implicit. */
.main-content {
  width: 100%;
  max-width: 1240px;
  margin-left: auto;
  margin-right: auto;
  padding: 14px 20px 24px;
}
/* Tight horizontal padding on the full-width chrome bars (header /
   footer). The legend strip uses its own .legend-strip-inner
   wrapper for centered content alignment, so its outer padding is
   handled separately. */
.page-header  { padding: 14px 20px; }
.page-footer  { padding: 12px 20px; }

/* ── CALENDAR GRID ─────────────────────────────────────── */
.calendar-section {
  margin-bottom: 32px; border-radius: 5px; overflow: hidden;
  box-shadow: 0 1px 4px rgba(0,0,0,.1), 0 4px 16px rgba(0,0,0,.06);
  position: relative;
}
.month-header {
  background: var(--beige); color: var(--navy); padding: 10px 18px;
  font-size: 11px; font-weight: 700; letter-spacing: 3.5px; text-transform: uppercase;
}
.calendar-grid {
  display: grid; grid-template-columns: .33fr 1fr 1fr 1fr 1fr 1fr .33fr;
  background: var(--border); gap: 1px;
}
/* Each week is its own row container — gives the print engine a stable
   per-week page-break boundary (whole rows never split mid-page). Uses
   CSS subgrid for columns so cells inherit the parent's 7-col template
   and span bars can place themselves with grid-column N / span M
   relative to the same column tracks. The week-row itself spans all
   7 outer columns as a single row. */
.week-row {
  display: grid;
  grid-template-columns: subgrid;
  grid-column: 1 / -1;
  gap: 1px;
}
.dow-header {
  background: var(--navy); color: rgba(232,224,208,.7); text-align: center;
  padding: 7px 4px; font-size: 9px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase;
}
.dow-header.weekend { background: #152534; color: rgba(232,224,208,.4); }

.day-cell {
  background: var(--white); min-height: 108px; position: relative;
  transition: background .12s; overflow: hidden; display: flex; flex-direction: column;
}
.day-cell.weekend    { background: #faf8f4; }
.day-cell.empty      { background: #f5f2ec; }
.day-cell.next-month         { background: #f2f5f9; }
.day-cell.next-month.weekend { background: #eef1f6; }
/* Month-change call-out: a thicker navy left edge on the first cell
   of a new month plus a stronger navy pill next to the date number.
   The prior 3px beige edge + ghost-gray pill were easy to miss in
   a calendar's worth of activity bars. */
.day-cell.month-start {
  border-left: 5px solid var(--navy);
}
.month-pill {
  display: inline-block;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--beige);
  background: var(--navy);
  padding: 2px 6px;
  border-radius: 2.5px;
  margin-left: 6px;
  vertical-align: middle;
  line-height: 1.4;
}
.day-cell:not(.empty):hover { background: #f7f9fb; }
.day-cell.weekend:not(.empty):hover { background: #f2f0ea; }

/* Editor-only: show + button on hover */
body.editor-mode .day-cell:not(.empty):hover .cell-add-btn { opacity: 1; }

.shoot-banner {
  width: 100%; padding: 4px 9px; color: #fff;
  font-size: 9.5px; font-weight: 700; letter-spacing: .8px;
  text-transform: uppercase; flex-shrink: 0;
}
.shoot-banner:hover { filter: brightness(1.12); }

.cell-inner { padding: 5px 6px 5px; flex: 1; display: flex; flex-direction: column; }
.date-number {
  font-size: 12px; font-weight: 700; color: var(--navy);
  line-height: 1; margin-bottom: 5px;
}
.day-cell.weekend .date-number { color: rgba(26,46,61,.42); }

/* Today indicator — the day-cell containing today's date gets a
   small navy "pill" around its date number so the eye snaps to it.
   Doesn't affect adjacent month-pill rendering (that's a sibling
   span inside .date-number). */
.day-cell.is-today .date-num-text {
  background: var(--navy);
  color: var(--beige);
  padding: 1px 7px;
  border-radius: 999px;
  margin-left: -3px;
}

/* Past-date dimming — events ending before today get a quieter
   treatment so the eye is drawn to current/upcoming work. The cell
   background stays neutral; only the activity bars fade. Span bars
   that ended in the past add .is-past directly on the bar element. */
.day-cell.is-past .activity-bar { opacity: .55; }
.span-bar.is-past               { opacity: .55; }
/* Free placement: each .activity-bar absolutely positions itself at
   top: --slot * --span-lane-h. --slot-count (set on the cell) sizes
   the container so empty slots between bars stay visible — drag a
   bar to slot 3 and slot 1/2 remain empty rather than auto-stacking. */
.activities {
  position: relative;
  flex: 1;
  min-height: calc(var(--slot-count, 0) * var(--span-lane-h));
}

.activity-bar {
  border-radius: 2.5px; padding: 3px 6px; font-size: 10px; font-weight: 500;
  color: #fff; line-height: 1.35;
  /* Single-line clamp with ellipsis. Without this, long labels wrap
     to two lines and the rendered bar exceeds --span-lane-h (23px),
     so consecutive slots visually collide. Truncated labels stay
     fully visible in the edit modal — and on hover via the title
     attribute set in renderBar. */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: filter .1s; user-select: none;
  position: absolute;
  top: calc(var(--slot, 0) * var(--span-lane-h));
  left: 0; right: 0;
}
.activity-bar:hover { filter: brightness(1.1); }
.activity-bar.dark-text { color: #1a2e3d; }

/* Span bar: ONE continuous bar across N day cells, rendered as a
   direct grid child of .calendar-grid. grid-column:span and grid-row
   are set inline. align-self pins to the top of its row.
   --span-top    = vertical offset to clear the cell's date-number
                   area (matches where single-day bars start, so a
                   1-day event and a 2-day event align horizontally).
   --span-lane-h = vertical stride between stacked overlapping spans,
                   sized to match single-day bar height + the
                   .activities gap, so single-day bars below the
                   spans line up cleanly.
   --span-lane   = which lane this segment occupies, set inline by
                   the lane allocator in renderCalendar(). */
:root {
  --span-top: 22px;
  --span-lane-h: 23px;
}
.span-bar {
  align-self: start;
  margin: calc(var(--span-top) + var(--span-lane, 0) * var(--span-lane-h)) 4px 0 4px;
  padding: 3px 7px;
  border-radius: 2.5px;
  font-size: 10px; font-weight: 500;
  color: #fff; line-height: 1.35;
  position: relative;
  z-index: 2;
  user-select: none;
  cursor: pointer;
  display: flex; align-items: center;
  transition: filter .1s;
  /* Don't clip the resize handles at the bar's edges — they sit at
     left:-2px and right:-2px so they should overflow outward. The
     inner .span-bar-label handles its own ellipsis. */
  overflow: visible;
}
.span-bar:hover { filter: brightness(1.1); }
.span-bar.dark-text { color: #1a2e3d; }
.span-bar-label {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  pointer-events: none;
}

/* Half-start / half-end clip via clip-path. --span-cells is the
   number of day cells the bar covers (set inline); each cell takes
   1/N of the bar's width, so 50% / N is half a cell. */
.span-bar.is-start-half {
  clip-path: inset(0 0 0 calc(50% / var(--span-cells, 1)));
}
.span-bar.is-end-half {
  clip-path: inset(0 calc(50% / var(--span-cells, 1)) 0 0);
}
.span-bar.is-start-half.is-end-half {
  clip-path: inset(0 calc(50% / var(--span-cells, 1)) 0 calc(50% / var(--span-cells, 1)));
}

/* Cells covered by a span reserve top space so single-day bars
   appear BELOW the spans. --span-lanes is the number of lanes
   actually occupying this cell (set inline by the renderer); reserve
   one lane-stride per occupied lane so single-day bars start just
   below the last span. */
.day-cell.has-span .activities {
  margin-top: calc(var(--span-lanes, 0) * var(--span-lane-h));
}

/* Resize handles on event bars (single-day) and span bars (multi-day).
   resize-handle-end is the right edge (extend duration). resize-handle-start
   is the left edge (move start back, with optional half-day snap). */
.resize-handle {
  position: absolute; top: 0; bottom: 0;
  width: 8px;
  cursor: ew-resize;
  opacity: 0;
  background: rgba(255,255,255,.35);
  z-index: 3;
}
/* Span bars set overflow:visible, so handles can stick out a bit for
   easier grabbing. Cells (and therefore .activity-bar inside them)
   set overflow:hidden, so the handle has to live INSIDE the bar.

   For half-start/half-end bars, the visible region only covers part
   of the grid area (clipped via clip-path). The handle has to land
   inside the visible region — so we offset it inward by 50%/N where
   N is the number of grid cells the bar covers. */
.span-bar > .resize-handle-end                   { right: -3px; border-radius: 0 2.5px 2.5px 0; }
.span-bar > .resize-handle-start                 { left:  -3px; border-radius: 2.5px 0 0 2.5px; }
.span-bar.is-end-half   > .resize-handle-end     { right: calc(50% / var(--span-cells, 1) - 3px); }
.span-bar.is-start-half > .resize-handle-start   { left:  calc(50% / var(--span-cells, 1) - 3px); }
.activity-bar > .resize-handle-end   { right: 0; border-radius: 0 2.5px 2.5px 0; }
.activity-bar > .resize-handle-start { left:  0; border-radius: 2.5px 0 0 2.5px; }
body.editor-mode .activity-bar:hover .resize-handle,
body.editor-mode .span-bar:hover     .resize-handle,
body.is-resizing-event .resize-handle { opacity: 1; }
body.is-resizing-event,
body.is-resizing-event * { cursor: ew-resize !important; user-select: none; }
/* Continuous resize tracking lets the bar's rendered width exceed its
   day-cell during the drag. Without this override, .day-cell's
   overflow:hidden clips the bar at the cell boundary and the cursor
   tracking is invisible past the first cell. .activities and
   .calendar-grid don't clip by default. */
body.is-resizing-event .day-cell { overflow: visible; }

/* Editor-only: cursor + drag affordances */
body.editor-mode .activity-bar,
body.editor-mode .shoot-banner { cursor: pointer; }
body.editor-mode .activity-bar[draggable="true"],
body.editor-mode .shoot-banner[draggable="true"] { cursor: grab; }

.cell-add-btn {
  position: absolute; bottom: 5px; right: 5px; width: 18px; height: 18px;
  border-radius: 50%; background: var(--navy); color: white; border: none;
  font-size: 14px; line-height: 1; display: flex; align-items: center;
  justify-content: center; cursor: pointer; opacity: 0;
  transition: opacity .15s, transform .1s; font-weight: 300; padding-bottom: 1px;
  box-shadow: 0 1px 4px rgba(0,0,0,.25);
}
.cell-add-btn:hover { transform: scale(1.15); }
body:not(.editor-mode) .cell-add-btn { display: none; }

/* ── DRAG & DROP ───────────────────────────────────────── */
.is-dragging { opacity: .25 !important; pointer-events: none !important; }
.day-cell.drop-active:not(.empty) {
  background: #eaf0f6 !important;
  outline: 2px dashed rgba(26,46,61,.28); outline-offset: -3px;
}
.activity-bar.drop-above,
.span-bar.drop-above     { box-shadow:  0 -2.5px 0 0 var(--navy); }
.activity-bar.drop-below,
.span-bar.drop-below     { box-shadow:  0  2.5px 0 0 var(--navy); }

.day-cell.paste-target:not(.empty) {
  outline: 2px dashed rgba(26,46,61,.32); outline-offset: -3px;
  background: rgba(26,46,61,.04) !important;
}
.day-cell.drop-copy:not(.empty) {
  background: #eaf5ed !important;
  outline: 2px dashed rgba(29,106,57,.38); outline-offset: -3px;
}
.activity-bar.selected, .shoot-banner.selected, .span-bar.selected {
  box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px var(--navy) !important;
}

/* ── NOTES TEXTAREA INSIDE EVENT MODAL ─────────────────── */
.notes-input {
  resize: vertical; min-height: 56px; line-height: 1.45;
  font-family: var(--font);
}

/* ── NOTES INDICATOR + HOVER TOOLTIP ───────────────────── */
/* Notes icon — three horizontal lines suggesting a note, masked
   so it picks up currentColor (white on dark bars, navy on light). */
.activity-bar.has-notes,
.shoot-banner.has-notes,
.span-bar.has-notes { position: relative; padding-right: 1.9em; }
.activity-bar.has-notes::after,
.shoot-banner.has-notes::after,
.span-bar.has-notes::after {
  content: "";
  position: absolute; right: .5em; top: 50%; transform: translateY(-50%);
  width: 1.35em; height: 1.35em;
  background: currentColor; opacity: .92;
  -webkit-mask: var(--notes-icon) center/contain no-repeat;
          mask: var(--notes-icon) center/contain no-repeat;
}
:root {
  --notes-icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><rect x='2' y='3' width='12' height='2' rx='1'/><rect x='2' y='7' width='12' height='2' rx='1'/><rect x='2' y='11' width='8.5' height='2' rx='1'/></svg>");
}
.notes-tooltip {
  position: fixed; left: 0; top: 0; z-index: 10000;
  background: #f5f5f5; color: var(--navy);
  padding: 9px 13px; border-radius: 4px;
  border: 1px solid rgba(26,46,61,.14);
  font-size: 12.5px; line-height: 1.45; max-width: 300px;
  white-space: pre-wrap;
  box-shadow: 0 4px 16px rgba(0,0,0,.18);
  pointer-events: none; opacity: 0; transition: opacity .15s;
}
.notes-tooltip.show { opacity: 1; }
@media print { .notes-tooltip { display: none !important; } }

/* ── BOTTOM TOOLBAR (editor hint strip) ────────────────── */
.bottom-toolbar {
  background: rgba(26,46,61,.04); border-top: 1px solid rgba(26,46,61,.08);
  padding: 8px 20px; display: flex; align-items: center;
  justify-content: space-between; gap: 16px;
  font-size: 10.5px; color: rgba(26,46,61,.5);
}
.toolbar-hint strong { color: rgba(26,46,61,.7); }
body:not(.editor-mode) .bottom-toolbar { display: none; }

/* ── DELIVERABLES ──────────────────────────────────────── */
.deliverables-section {
  border-radius: 5px; overflow: hidden;
  box-shadow: 0 1px 4px rgba(0,0,0,.08), 0 4px 16px rgba(0,0,0,.05);
}
.deliverables-header {
  background: var(--navy); color: var(--beige); padding: 10px 18px;
  font-size: 10px; font-weight: 700; letter-spacing: 3.5px; text-transform: uppercase;
  display: flex; align-items: center; justify-content: space-between;
}
.dv-due-dates {
  display: flex; align-items: center; gap: 6px;
  font-size: 9px; font-weight: 500; letter-spacing: 1px;
  color: rgba(232,224,208,.55); text-transform: uppercase;
}
.dv-due-item { display: flex; align-items: center; gap: 5px; }
.dv-due-dot  { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.dv-due-sep  { color: rgba(232,224,208,.25); font-size: 10px; }
.deliverables-grid {
  background: var(--white); display: grid;
}
.dv-col { display: flex; flex-direction: column; border-right: 1px solid rgba(26,46,61,.08); }
.dv-col:last-child { border-right: none; }
.dv-col-hd {
  padding: 7px 14px; font-size: 10px; font-weight: 700;
  letter-spacing: 1.5px; text-transform: uppercase; color: #fff;
  outline: none;
  display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
}
.dv-col-hd-name { flex: 0 1 auto; outline: none; }
.dv-col-hd-name:focus { outline: 2px solid rgba(255,255,255,.45); outline-offset: 2px; border-radius: 2px; }
/* Per-column count — right-aligned, smaller, dimmer than the
   column name. Quick-read tally of checked ratios across the
   column's deliverable groups. */
.dv-col-count {
  font-size: 11px; font-weight: 700; letter-spacing: .2px;
  text-transform: none;
  opacity: .65;
  flex-shrink: 0;
}
/* Section-header total — small chip right after the editable
   "Deliverables" title. Same beige tone as the rest of the header
   text but lighter weight so the title still leads. */
.dv-header-title { display: inline-flex; align-items: baseline; gap: 10px; }
.dv-header-count {
  font-size: 9px; font-weight: 500; letter-spacing: 1.4px;
  color: rgba(232,224,208,.55);
}
body.editor-mode .dv-col-hd[contenteditable] { cursor: text; }
.dv-col-hd:focus { outline: 2px solid rgba(255,255,255,.45); outline-offset: -2px; border-radius: 2px; }
.deliverables-header[contenteditable] { outline: none; }
body.editor-mode .deliverables-header [contenteditable] { cursor: text; }
.deliverables-header [contenteditable]:focus { outline: 2px solid rgba(232,224,208,.35); outline-offset: -2px; border-radius: 2px; }
.dv-col-body { padding: 12px 14px; flex: 1; display: flex; flex-direction: column; gap: 9px; }
.dv-name   { font-size: 10.5px; font-weight: 600; color: var(--navy); line-height: 1.3; }
.dv-ratios { font-size: 9.5px; color: rgba(26,46,61,.5); margin-top: 2px; letter-spacing: .2px; }
.dv-note   {
  font-size: 9px; font-style: italic; color: rgba(26,46,61,.5);
  line-height: 1.5; margin-top: 4px; padding-top: 9px;
  border-top: 1px solid rgba(26,46,61,.08);
}

/* ── EVENT MODAL (add/edit) — movable + resizable ──────── */
#event-modal {
  width: 420px;
  max-width: 95vw;
  min-width: 360px;
  min-height: 380px;
  max-height: 92vh;
  resize: both;
  overflow: hidden; /* resize handle requires non-default overflow */
}
#event-modal .modal-body { padding: 20px 18px 4px; }
.field-group { margin-bottom: 16px; }
.type-picker {
  display: grid; grid-template-columns: repeat(3,1fr); gap: 5px;
  max-height: 240px; overflow-y: auto;
}
.type-picker .type-group-label {
  grid-column: 1 / -1;
  font-size: 8.5px; font-weight: 700; letter-spacing: 1.5px;
  text-transform: uppercase; color: rgba(26,46,61,.45);
  margin-top: 6px; padding-top: 6px;
  border-top: 1px solid rgba(26,46,61,.08);
}
.type-picker .type-group-label:first-child {
  margin-top: 0; padding-top: 0; border-top: none;
}
.type-btn {
  display: flex; align-items: center; gap: 6px; padding: 6px 7px;
  border: 2px solid transparent; border-radius: 4px; cursor: pointer;
  font-family: var(--font); font-size: 9.5px; font-weight: 600;
  color: var(--navy); background: #f4f2ee; transition: all .1s;
  text-align: left; line-height: 1.3;
}
.type-btn:hover { background: #ede9e1; border-color: rgba(26,46,61,.2); }
.type-btn.selected { border-color: var(--navy); background: #eae6de; }
.type-swatch { width: 10px; height: 10px; border-radius: 2px; flex-shrink: 0; }

.btn-dup {
  background: none; border: 1.5px solid rgba(125,60,152,.35); color: #7d3c98;
  padding: 7px 14px; border-radius: 3px; font-family: var(--font);
  font-size: 10px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase;
  cursor: pointer; transition: all .12s;
}
.btn-dup:hover { background: rgba(125,60,152,.07); border-color: rgba(125,60,152,.6); }

/* ── Right-side action cluster in bottom toolbar ───────── */
.bottom-toolbar-actions {
  display: flex; align-items: center; gap: 10px; flex-shrink: 0;
}

/* ── Deliverables editor modal — wider than other modals ── */
#dv-edit-modal {
  width: 720px; max-width: 95vw;
  max-height: 92vh;
}

/* ── "Clear all events" button (bottom toolbar) ────────── */
.btn-clear-events {
  background: none;
  border: 1px solid rgba(169,50,38,.3);
  border-radius: 3px;
  padding: 5px 11px;
  font-family: var(--font);
  font-size: 9.5px; font-weight: 600;
  letter-spacing: .5px;
  color: #a93226;
  cursor: pointer;
  transition: all .12s;
  white-space: nowrap;
}
.btn-clear-events:hover {
  background: rgba(169,50,38,.07);
  border-color: rgba(169,50,38,.55);
}
.btn-clear-events:active { transform: scale(.97); }

/* ── × DELETE BUTTON ON TYPE-BTN (editor mode, hover-reveal) ── */
.type-btn { position: relative; }
.type-btn-del {
  position: absolute; top: 3px; right: 3px;
  width: 14px; height: 14px;
  border: none; border-radius: 50%;
  background: rgba(169,50,38,.12);
  color: #a93226;
  font-size: 9px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; padding: 0;
  opacity: 0; transition: opacity .12s, background .12s, transform .1s;
}
body.editor-mode .type-btn:hover .type-btn-del { opacity: 1; }
.type-btn-del:hover { background: rgba(169,50,38,.25); }
.type-btn-del:active { transform: scale(.92); }

/* ── "+ Activity" BUTTON INSIDE EVENT MODAL TYPE-PICKER ── */
.type-btn-add {
  border: 2px dashed rgba(26,46,61,.25) !important;
  background: transparent !important;
  color: rgba(26,46,61,.55) !important;
  justify-content: center;
  font-weight: 700;
}
.type-btn-add:hover {
  border-color: rgba(26,46,61,.55) !important;
  background: rgba(26,46,61,.04) !important;
  color: var(--navy) !important;
}

/* ── HEADER TITLE — contenteditable affordance (editor only) ── */
body.editor-mode #hdr-client[contenteditable="true"],
body.editor-mode #hdr-project[contenteditable="true"] {
  cursor: text;
  border-radius: 2px;
  transition: background .12s;
  padding: 0 3px;
  margin: 0 -3px;
}
body.editor-mode #hdr-client[contenteditable="true"]:hover,
body.editor-mode #hdr-project[contenteditable="true"]:hover {
  background: rgba(232,224,208,.10);
}
#hdr-client[contenteditable="true"]:focus,
#hdr-project[contenteditable="true"]:focus {
  outline: 2px solid rgba(232,224,208,.4);
  outline-offset: 2px;
  background: rgba(232,224,208,.12);
}

/* ── EDITOR-MODE AFFORDANCES ──────────────────────────── */
body.editor-mode .legend-swatch[data-type-key],
body.editor-mode .type-swatch[data-type-key] {
  cursor: pointer;
  transition: transform .12s, box-shadow .12s;
}
body.editor-mode .legend-swatch[data-type-key]:hover,
body.editor-mode .type-swatch[data-type-key]:hover {
  transform: scale(1.15);
  box-shadow: 0 0 0 2px rgba(26,46,61,.18);
}
body.editor-mode .project-dates {
  cursor: pointer;
  transition: color .12s;
}
body.editor-mode .project-dates:hover {
  color: rgba(232,224,208,.85);
}
body.editor-mode .project-dates::after {
  content: " ✎";
  font-size: 10px;
  opacity: 0;
  transition: opacity .15s;
}
body.editor-mode .project-dates:hover::after { opacity: .6; }

/* ── VIEW FILTER MENU ──────────────────────────────────── */
.view-menu-wrap { position: relative; }

#btn-view.is-filtered {
  background: var(--navy); color: var(--beige);
}
#btn-view.is-filtered:hover { background: #122030; }

.view-menu {
  position: absolute; top: calc(100% + 6px); right: 0;
  min-width: 240px; max-width: 320px;
  background: #fff; color: var(--navy);
  border: 1px solid rgba(26,46,61,.15); border-radius: 4px;
  box-shadow: 0 8px 24px rgba(0,0,0,.18);
  padding: 6px; z-index: 1500;
  font-family: var(--font);
}
.view-menu-row {
  display: flex; align-items: center; gap: 9px;
  padding: 8px 10px; border-radius: 3px; cursor: pointer;
  font-size: 12px; color: var(--navy);
  transition: background .1s;
}
.view-menu-row:hover { background: rgba(26,46,61,.05); }
.view-menu-row input[type="radio"] {
  margin: 0; accent-color: var(--navy); cursor: pointer;
}
.view-menu-row span { line-height: 1.3; }

.view-custom-host {
  border-top: 1px solid rgba(26,46,61,.1);
  margin-top: 4px; padding: 8px 10px 4px;
  max-height: 260px; overflow-y: auto;
}
.view-custom-section {
  font-size: 9px; font-weight: 700; letter-spacing: 1.5px;
  text-transform: uppercase; color: rgba(26,46,61,.5);
  padding: 6px 0 4px; margin-top: 4px;
}
.view-custom-section:first-child { margin-top: 0; }
.view-custom-row {
  display: flex; align-items: center; gap: 8px;
  padding: 4px 4px; border-radius: 3px; cursor: pointer;
  font-size: 11.5px; color: var(--navy);
}
.view-custom-row:hover { background: rgba(26,46,61,.04); }
.view-custom-row input[type="checkbox"] {
  margin: 0; accent-color: var(--navy); cursor: pointer;
}
.view-custom-swatch {
  width: 11px; height: 11px; border-radius: 2px; flex-shrink: 0;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.12);
}

/* ── ADMIN PASSWORD MODAL (hidden gesture: dbl-click logo) ── */
#admin-pwd-modal  { width: 340px; max-width: 92vw; }
#dates-modal     { width: 420px; max-width: 92vw; }
#add-type-modal  { width: 380px; max-width: 92vw; }
#confirm-modal   { width: 380px; max-width: 92vw; }

/* Destructive-action variant of the modal save button */
.btn-confirm-danger {
  background: #a93226 !important;
  color: #fff !important;
}
.btn-confirm-danger:hover { background: #922b21 !important; }

/* Empty placeholder on desktop; populated by JS on portrait phones */
.mobile-actions-slot { display: none; }

/* ── TABLET + LANDSCAPE PHONES — let things wrap instead of overflow ── */
@media (max-width: 1024px) {
  .header-center h1 {
    white-space: normal;
    line-height: 1.3;
  }
  .legend-strip {
    flex-wrap: wrap;
    gap: 10px 14px;
  }
  .header-right {
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
  }
  .bottom-toolbar {
    flex-wrap: wrap;
    gap: 10px;
  }
  .deliverables-grid {
    /* fit columns to viewport instead of N equal columns */
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
  }
  .deliverables-header {
    flex-wrap: wrap;
    gap: 8px;
  }
  .dv-due-dates { flex-wrap: wrap; }
}

/* ── BELOW 768 — header gets compact ──────────────────── */
@media (max-width: 768px) {
  .page-header {
    padding: 14px 18px;
    gap: 12px;
  }
  .header-center h1 { font-size: 15px; }
  .main-content { padding: 18px 14px 28px; }
}

/* ── MOBILE — portrait phones (small, reference-focused) ── */
@media (max-width: 600px) and (orientation: portrait) {
  /* Header: small centered logo, centered title, no inline buttons here.
     The action buttons (Share / Save PDF / Edit) get relocated by JS into
     #mobile-actions-slot below the deliverables. */
  .page-header {
    grid-template-columns: 1fr;
    gap: 6px;
    padding: 12px 14px;
    text-align: center;
    justify-items: center;
  }
  .logo { justify-content: center; }
  .logo svg.logo-full { height: 26px !important; }
  .header-center h1 {
    font-size: 14px;
    white-space: normal;
    line-height: 1.3;
  }
  .header-center .project-dates {
    font-size: 8.5px;
    letter-spacing: 2px;
    margin-top: 4px;
  }

  /* Action buttons relocated into the slot below deliverables.
     Navy background keeps the ghost-light Edit/Lock buttons readable
     and creates a visual "footer-actions" zone that mirrors the header. */
  .mobile-actions-slot {
    display: block;
    margin: 16px -10px 0;     /* extend beyond .main-content's padding */
    padding: 14px 16px;
    background: var(--navy);
  }
  .mobile-actions-slot .header-right {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
  }

  /* Legend on mobile: "LEGEND" label centered above; activity
     items + key milestones flow into auto-fit columns so each item
     gets as little vertical space as possible while still reading
     cleanly. The previous 2-column rule wasted vertical space on
     small viewports where 3 columns easily fit. */
  .legend-strip {
    flex-direction: column;
    align-items: stretch;
    padding: 10px 14px 12px;
    gap: 8px;
  }
  .legend-strip-label {
    border-right: none;
    padding: 0 0 4px;
    text-align: center;
  }
  .legend-inline {
    flex-direction: column;
    gap: 10px;
  }
  .legend-main {
    display: grid;
    /* As many columns as fit at 110px each — typically 3 on a phone,
       4 on a wider tablet portrait. Items wrap into rows as needed. */
    grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
    gap: 5px 10px;
  }
  .legend-important {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
    gap: 5px 10px;
    border-left: none;
    border-top: 1px solid rgba(26,46,61,.12);
    padding: 8px 0 0;
    margin: 0;
  }
  /* "Key Milestones" eyebrow header spans the full width above the
     milestone swatches so the section reads as labeled. */
  .legend-important > .legend-imp-header {
    grid-column: 1 / -1;
    margin: 0 0 2px;
    text-align: left;
  }

  /* Calendar cells — smaller but still legible */
  .day-cell    { min-height: 70px; }
  .cell-inner  { padding: 4px 4px 4px; }
  .date-number { font-size: 10px; margin-bottom: 3px; }
  .activity-bar { font-size: 7px; padding: 1.5px 3px; line-height: 1.3; }
  .shoot-banner { font-size: 7px; padding: 2px 4px; }
  /* Span-bar offsets shrink to match the tighter cell metrics. */
  :root { --span-top: 17px; --span-lane-h: 13px; }
  .span-bar { font-size: 7px; padding: 1.5px 4px; }
  .dow-header   { font-size: 7.5px; padding: 5px 2px; }
  .month-header { font-size: 9px; padding: 8px 14px; letter-spacing: 2.5px; }

  /* Deliverables stacked vertically, full width */
  .deliverables-grid { grid-template-columns: 1fr !important; }
  .deliverables-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    padding: 10px 14px;
  }
  .dv-due-dates { flex-wrap: wrap; }

  /* Bottom toolbar — hide the keyboard-shortcut hint (irrelevant on touch) */
  .toolbar-hint { display: none; }
  .bottom-toolbar {
    padding: 10px 14px;
    justify-content: center;
  }
  .bottom-toolbar-actions {
    width: 100%;
    justify-content: center;
    flex-wrap: wrap;
  }

  /* Footer — single column, drop the project name to save space */
  .page-footer {
    flex-direction: column;
    gap: 4px;
    padding: 10px 14px;
    text-align: center;
  }
  .footer-text { font-size: 8.5px; letter-spacing: 1px; }
  .footer-center { font-size: 8.5px; letter-spacing: .8px; }
  #footer-project { display: none; }

  .main-content { padding: 14px 10px 0; }
}

/* ── EXTRA-NARROW SAFETY NET ─────────────────────────────
   For very narrow viewports (<420px), let the calendar grid
   horizontally scroll inside its wrapper rather than crushing
   day cells below readability. Sets a minimum width on the
   grid so each day still has room for a date number + activity
   bar, and lets the parent scroll if the viewport is below that. */
@media (max-width: 420px) {
  .main-content { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .calendar-grid { min-width: 380px; }
  .day-cell { min-height: 64px; }
  .activity-bar { font-size: 6.5px; }
  .header-center h1 { font-size: 13px; }
}

/* ── PRINT ─────────────────────────────────────────────── */
@media print {
  /* Letter landscape (11" × 8.5"). Tight margins so the calendar grid
     fills as much of the page as the printer allows — most browsers
     enforce a ~0.15in minimum. */
  @page { size: letter landscape; margin: .15in .2in; }

  dialog, dialog::backdrop { display: none !important; }
  #toast                   { display: none !important; }
  .btn-primary, .cell-add-btn, .no-print, .bottom-toolbar { display: none !important; }

  html { font-size: 12px; }
  /* Force letter-landscape geometry regardless of the source viewport
     so PDFs saved from a phone come out the same 11×8.5 layout as
     a desktop "Save as PDF". Without this, iOS Safari uses the layout
     viewport (~390px) as the print width and produces a phone-shaped
     PDF instead of a paginated landscape one. */
  html, body {
    width: 11in !important;
    min-width: 11in !important;
    margin: 0 !important;
  }
  body {
    background: #fff !important;
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
    zoom: 0.9;
  }

  .main-content { padding: 10px 0 0 !important; max-width: none !important; }
  /* Calendar section can split between pages — we no longer force the
     whole section onto a single page, because that produced a blank
     page 1 (the section "didn't fit" alongside the header so the
     browser punted everything to page 2). Each .week-row inside is
     the unit kept together, so splits land cleanly at week boundaries. */
  .calendar-section {
    margin-bottom: 14px;
    box-shadow: none;
    break-inside: auto;
    border: 1px solid rgba(26,46,61,.13);
    border-radius: 5px;
  }
  .calendar-section.new-page { break-before: page; page-break-before: always; }
  /* Per-week pagination — never split a week's day cells across pages. */
  .week-row {
    break-inside: avoid;
    page-break-inside: avoid;
  }
  .deliverables-section { box-shadow: none; margin-top: 14px; break-before: avoid; border: 1px solid rgba(26,46,61,.13); border-radius: 5px; }

  .page-header {
    padding: 12px 28px !important;
    background: #fff !important;
    border-bottom: 1px solid rgba(26,46,61,.15) !important;
  }
  .logo svg.logo-full { height: 36px !important; }
  .ap         { fill: var(--navy) !important; }
  .header-center h1 { font-size: 15px !important; color: var(--navy) !important; }
  .project-dates    { color: rgba(26,46,61,.45) !important; }
  .deliverables-header {
    background: #fff !important; color: var(--navy) !important;
    border-bottom: 1px solid rgba(26,46,61,.15) !important;
  }
  .dv-due-dates { color: rgba(26,46,61,.5) !important; }
  .dv-due-sep   { color: rgba(26,46,61,.2) !important; }

  .legend-strip { background: #f4f1ec !important; padding: 7px 28px !important; }
  .legend-main  { grid-template-columns: repeat(5, max-content) !important; }

  .day-cell     { min-height: 82px  !important; overflow: visible; }
  .cell-inner   { padding: 4px 6px 18px !important; }
  .month-header { padding: 8px 16px !important; font-size: 9px   !important; }
  .dow-header   { padding: 6px 4px  !important; font-size: 8px   !important; }
  .date-number  { font-size: 10px   !important; margin-bottom: 2px !important; }

  .activity-bar { font-size: 8.5px !important; padding: 2px 5px !important; margin-bottom: 2px !important; }
  .shoot-banner { font-size: 8.5px !important; padding: 2px 6px !important; }
  /* Span-bar offsets — tracks the smaller print date-number area
     (4px padding + 10px date + 2px margin = 16px). */
  :root { --span-top: 16px !important; --span-lane-h: 16px !important; }
  .span-bar { font-size: 8.5px !important; padding: 2px 6px !important; }

  .page-footer {
    background: #f4f1ec !important; margin-top: 10px !important;
    border-top: 2px solid rgba(26,46,61,.18) !important;
    padding: 10px 24px !important;
  }
  .footer-text   { color: rgba(26,46,61,.4) !important; }
  .footer-center { color: rgba(26,46,61,.3) !important; }

  * { box-shadow: none !important; outline: none !important; }
}

/* ── Calendar header action buttons ──────────────────────────────
   Match the admin suite's button language: text-only, .btn-ghost-light
   styling against the navy header (View / Edit Setup / Share /
   Preview PDF) with .btn-save-light as the primary "Save PDF" action.
   Drops the unicode glyphs that were sprinkled into the old buttons —
   they rendered inconsistently across systems and didn't match the
   suite's clean text-first chrome elsewhere. */
.cal-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.cal-action-btn {
  white-space: nowrap;
}
.cal-action-caret {
  display: inline-block;
  margin-left: 2px;
  font-size: 10px;
  opacity: .8;
  transform: translateY(-1px);
}

/* ── Edit Legend (editor only) ───────────────────────────────────
   Trailing button on the legend strip. Subtle outline; only shown
   when the page is in editor mode. */
.legend-edit-btn {
  appearance: none;
  background: transparent;
  border: 1px solid rgba(26,46,61,.2);
  color: var(--navy);
  font-family: var(--font);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  padding: 5px 10px;
  border-radius: 3px;
  cursor: pointer;
  margin-left: auto;
  white-space: nowrap;
  transition: background .12s, border-color .12s;
}
.legend-edit-btn:hover {
  background: rgba(26,46,61,.06);
  border-color: rgba(26,46,61,.4);
}

/* Legend editor modal — list of activity types with inline edits. */
.legend-edit-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 12px;
  max-height: 360px;
  overflow-y: auto;
}
.legend-edit-row {
  display: grid;
  /* drag-handle · swatch · label · milestone · delete */
  grid-template-columns: 16px 32px minmax(0, 1fr) 36px 28px;
  gap: 8px;
  align-items: center;
  padding: 6px 8px;
  background: rgba(26,46,61,.025);
  border: 1px solid rgba(26,46,61,.06);
  border-radius: 4px;
  transition: box-shadow .08s, opacity .08s;
}
/* Drag-handle: the ⋮⋮ glyph that signals "grab here". The whole
   row is draggable, but the handle anchors the affordance visually. */
.legend-edit-drag {
  color: rgba(26,46,61,.35);
  font-size: 14px;
  line-height: 1;
  letter-spacing: -2px;
  cursor: grab;
  user-select: none;
  text-align: center;
}
.legend-edit-row:active .legend-edit-drag { cursor: grabbing; }
/* .is-dragging globally sets opacity:.25 + pointer-events:none (line
   ~326). That handles the visual dim AND prevents the dragged row
   from intercepting its own dragover events — no need to redefine
   here. */
.legend-edit-row.drop-above    { box-shadow: 0 -2px 0 0 var(--navy); }
.legend-edit-row.drop-below    { box-shadow: 0  2px 0 0 var(--navy); }
.legend-edit-swatch {
  position: relative;
  width: 28px; height: 24px;
  border-radius: 3px;
  border: 1px solid rgba(0,0,0,.1);
  cursor: pointer;
  display: block;
}
.legend-edit-swatch input[type="color"] {
  position: absolute; inset: 0;
  opacity: 0; width: 100%; height: 100%; cursor: pointer;
  border: none; padding: 0;
}
.legend-edit-label { font-size: 13px; padding: 6px 8px; }
.legend-edit-milestone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 14px;
  color: rgba(26,46,61,.5);
  position: relative;
}
.legend-edit-milestone input { position: absolute; opacity: 0; }
.legend-edit-milestone input:checked + span { color: #d4a73a; }
.legend-edit-del {
  appearance: none;
  width: 26px; height: 26px;
  border: 1px solid rgba(26,46,61,.15);
  border-radius: 3px;
  background: #fff;
  color: rgba(26,46,61,.6);
  cursor: pointer;
  font-size: 12px;
}
.legend-edit-del:hover {
  background: rgba(192,57,43,.08);
  border-color: rgba(192,57,43,.6);
  color: #c0392b;
}
.legend-edit-add {
  display: block;
  margin: 14px 0 0 0;
  width: 100%;
  text-align: center;
}
.legend-edit-empty {
  padding: 18px 12px;
  text-align: center;
  border: 1px dashed rgba(26,46,61,.14);
  border-radius: 4px;
}

/* ── Embedded mode (?embed=1) ───────────────────────────────────
   Renders inside the AE's project-detail iframe. Hides every action
   button so the header chrome stays compact at iframe widths, and
   prevents the buttons from causing horizontal scroll. The footer is
   also dropped — the parent page already has its own footer. */
body.is-embed .page-header .header-right { display: none; }
body.is-embed .page-footer { display: none; }
body.is-embed { overflow-x: hidden; }
body.is-embed .page-header {
  padding: 12px 18px;
}
body.is-embed .header-center h1 { font-size: 15px; }
body.is-embed .header-center .project-dates { font-size: 11px; }