.calendar-card { background:white; border:1px solid #dfe5ea; border-radius:12px; overflow:hidden; box-shadow:var(--shadow); }
.calendar-meta { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; padding:13px 14px; border-bottom:1px solid var(--line); }
.month-title { display:flex; gap:10px; align-items:center; }
.month-title strong { display:block; font-size:16px; letter-spacing:-.3px; text-transform:capitalize; }
.month-title small { display:block; color:#8996a5; font-size:11px; }
.filter-pills { display:flex; border:1px solid #dbe2e8; padding:3px; background:#f7f8fa; border-radius:9px; gap:2px; }
.filter-pill { border:0; border-radius:6px; background:none; padding:7px 11px; color:#718093; font-size:11px; font-weight:750; }
.filter-pill.active { background:white; box-shadow:0 1px 4px rgba(22,33,45,.11); color:#a4222b; }
.calendar-scroll { overflow:auto; max-height:min(70vh,810px); overscroll-behavior:contain; position:relative; scrollbar-width:thin; background:#fff; }
.planning-table { border-collapse:separate; border-spacing:0; table-layout:fixed; font-size:11px; width:max-content; min-width:100%; }
.planning-table th,.planning-table td { border-right:1px solid #dde3e9; border-bottom:1px solid #e3e8ed; padding:0; vertical-align:top; }
.planning-table .date-col { width:83px; min-width:83px; max-width:83px; position:sticky; left:0; z-index:3; background:#fff; }
.planning-table thead th { position:sticky; z-index:5; text-align:center; }
.planning-table thead .team-heading { top:0; height:33px; padding:8px 5px; font-weight:800; font-size:11px; border-bottom:1px solid #d1dce6; border-right:2px solid #fff; white-space:nowrap; }
.planning-table thead .person-heading { top:33px; height:35px; min-width:150px; padding:8px 4px; font-weight:800; font-size:11px; border-bottom:2px solid #8c98a5; white-space:nowrap; }
.planning-table thead .corner-heading { top:0; left:0; z-index:9; background:#fafafa; border-right:2px solid #cad4dd; border-bottom:2px solid #8c98a5; text-align:left; padding:12px; color:#607081; }
.planning-table .day-label { display:flex; min-height:69px; height:100%; align-items:center; justify-content:center; flex-direction:column; padding:5px 3px; color:#526172; }
.day-number { font-size:17px; font-weight:750; line-height:1.15; }
.day-week { font-size:10px; text-transform:uppercase; margin-top:3px; }
.day-cell { width:150px; min-width:150px; max-width:150px; height:69px; background:white; }
.day-cell.weekend,.date-col.weekend { background:#f0f1f3; }
.day-cell.today,.date-col.today { background:#fffdf2; }
.day-cell.monday,.date-col.monday { border-top:2px solid #a9b8c7; }
.day-cell .cell-btn { border:0; padding:6px 6px; background:transparent; display:flex; align-items:stretch; flex-direction:column; gap:3px; color:inherit; text-align:left; width:100%; min-height:69px; }
.day-cell .cell-btn:hover { background:rgba(30,107,165,.06); box-shadow:inset 0 0 0 2px #aad0f4; }
.day-cell .cell-btn:focus-visible { outline:-webkit-focus-ring-color auto 2px; outline-offset:-2px; }
.day-cell.selected .cell-btn { background:#eef6ff; box-shadow:inset 0 0 0 2px #4286c3; }
.event-pill { display:block; min-width:0; width:100%; max-width:100%; border-radius:4px; padding:3px 5px; overflow:hidden; text-overflow:ellipsis; word-break:break-word; font-size:10px; line-height:1.2; font-weight:650; color:var(--event-ink); background:var(--event-bg); -webkit-line-clamp:2; display:-webkit-box; -webkit-box-orient:vertical; }
.event-pill.private { outline:1px dashed #9370ae; }
.cell-empty { color:#c9d1da; font-size:15px; text-align:center; padding-top:10px; opacity:0; }
.cell-btn:hover .cell-empty { opacity:1; }
.table-footer { padding:10px 14px; display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px; align-items:center; color:#8290a0; font-size:11px; border-top:1px solid var(--line); }
.count-row td { height:28px; background:#f3f4f6; padding:5px; text-align:center; font-weight:700; color:#5c687a; }
.count-row .date-col { background:#e8ecf0; z-index:3; font-size:10px; text-align:left; padding:5px 7px; }
.legend { display:flex; flex-wrap:wrap; gap:7px 12px; align-items:center; }
.legend-item { display:inline-flex; align-items:center; gap:6px; font-size:11px; color:#69798a; }
.legend-swatch { height:10px; width:10px; border-radius:3px; background:var(--event-bg); border:1px solid rgba(0,0,0,.07); }
.drawer-backdrop { position:fixed; inset:0; z-index:29; background:rgba(12,22,40,.27); }
.details-drawer { position:fixed; top:0; right:0; bottom:0; z-index:30; width:min(430px,100vw); background:#fff; box-shadow:-18px 0 50px rgba(19,33,52,.19); overflow:auto; padding:22px; animation:drawer-slide .15s ease-out; }
@keyframes drawer-slide { from { transform:translateX(15px); opacity:.8; } to { transform:translateX(0); opacity:1; } }
.drawer-heading { display:flex; align-items:start; justify-content:space-between; gap:10px; margin-bottom:20px; }
.drawer-heading h2 { font-size:20px; margin:2px 0 4px; }
.drawer-group { margin-bottom:21px; }
.drawer-section-title { font-size:10px; text-transform:uppercase; letter-spacing:1.2px; color:#8491a1; margin-bottom:10px; font-weight:800; }
.drawer-item { border:1px solid #e3e8ef; border-left:3px solid var(--event-ink); border-radius:8px; padding:12px; margin-bottom:10px; }
.drawer-item .event-pill { display:inline-block; width:auto; max-width:100%; margin-bottom:7px; }
.drawer-item .origin { font-size:10px; color:#8a95a3; }
.manual-edit { background:#fafcfd; border:1px solid #e3e8ed; border-radius:9px; padding:12px; margin:10px 0; }
.manual-edit h3 { margin-bottom:11px; font-size:12px; display:flex; align-items:center; justify-content:space-between; }
.manual-fields { display:grid; grid-template-columns:1fr 100px; gap:10px; }
.manual-edit .full { grid-column:1/-1; }
.drawer-note { border:1px dashed #d7c5e7; background:#faf7fe; border-radius:8px; padding:12px; margin-bottom:10px; }
.drawer-note .form-label { color:#7a5198; }
.panel-footer { position:sticky; bottom:0; background:#fff; border-top:1px solid var(--line); padding:12px 0 0; margin-top:15px; }
.drawer-empty { border:1px dashed #dce4ed; border-radius:8px; padding:15px; color:#94a0ad; font-size:12px; }
@media (max-width:620px) { .calendar-scroll { max-height:65vh; } .planning-table .day-cell { min-width:132px; max-width:132px; } .planning-table thead .person-heading { min-width:132px; } .page-heading .badge { align-self:start; } }


/* v0.2: priority marker in the date column (past / today / future) */
.planning-table .date-col.past { background:#dadde2; color:#3d4650; }
.planning-table .date-col.past .day-label { color:#505964; }
.planning-table .date-col.today { background:#21252b; color:#fff; border-bottom:1px solid #21252b; }
.planning-table .date-col.today .day-label,
.planning-table .date-col.today .day-number,
.planning-table .date-col.today .day-week { color:#fff; }
.planning-table .date-col.today .day-number { font-weight:900; }
.planning-table .date-col.today .day-week { font-weight:750; }
.planning-table .day-cell .cell-btn { height:100%; }
.day-cell .event-pill.private { display:block; -webkit-line-clamp:unset; max-height:none; overflow:visible; white-space:pre-wrap; overflow-wrap:anywhere; border:1px dashed #a17ebf; }
.cell-private-note {
  display:block; width:100%; padding:6px 7px; border:1px solid #d6c1e6;
  border-left:3px solid #9466ac; border-radius:5px; background:#f3eafb;
  color:#5c367b; white-space:pre-wrap; overflow-wrap:anywhere; line-height:1.35;
}
.cell-private-note strong { display:block; font-size:9px; margin-bottom:3px; letter-spacing:.35px; font-weight:850; }
.cell-private-note span { display:block; font-size:10px; font-weight:650; }
.auto-source-panel {
  padding:13px; border:1px solid #c4dcf0; border-left:4px solid #548fbf;
  border-radius:10px; background:#f0f7fd;
}
.auto-source-heading { display:flex; justify-content:space-between; align-items:flex-start; gap:9px; margin-bottom:12px; }
.auto-source-kicker { font-size:11px; letter-spacing:.6px; font-weight:850; color:#2e6a9c; }
.auto-source-heading p { margin:4px 0 0; font-size:11px; color:#5f8098; }
.auto-source-tag { font-size:9px; font-weight:850; color:#346b93; background:#fff; border:1px solid #cce0f0; padding:4px 6px; border-radius:5px; white-space:nowrap; }
.auto-source-panel .drawer-item { background:#fff; border-color:#d7e7f4; border-left:3px solid #6192bd; }
.auto-source-panel .drawer-empty { border-color:#c7daec; background:#fff; }
.quick-editor { background:#fff; border:2px solid #d6e7f1; border-radius:10px; padding:13px; margin-bottom:12px; box-shadow:0 3px 15px rgba(36,84,129,.05); }
.quick-editor-title { font-size:12px; font-weight:850; color:#2c658f; margin-bottom:10px; }
.quick-editor .quick-input { min-height:44px; font-size:13px; border-color:#a9c9e2; }
.quick-editor .quick-input:focus { outline:2px solid #b7dcf5; }
.quick-options { display:grid; grid-template-columns:1fr 1fr; gap:9px; margin:12px 0; }
.quick-options .select { font-size:11px; padding:7px 9px; }
@media (max-width:430px) { .quick-options { grid-template-columns:1fr; } }


/* V0.3 - zoom proportional to spreadsheet-style cell size */
.calendar-scroll { --calendar-zoom:1; }
.planning-table .date-col {
  width:calc(83px * var(--calendar-zoom)); min-width:calc(83px * var(--calendar-zoom)); max-width:calc(83px * var(--calendar-zoom));
}
.planning-table thead .team-heading {
  height:calc(33px * var(--calendar-zoom));
  padding:calc(8px * var(--calendar-zoom)) 5px;
  font-size:clamp(9px, calc(11px * var(--calendar-zoom)), 16px);
}
.planning-table thead .person-heading {
  top:calc(33px * var(--calendar-zoom));
  height:calc(35px * var(--calendar-zoom));
  min-width:calc(150px * var(--calendar-zoom));
  width:calc(150px * var(--calendar-zoom));
  max-width:calc(150px * var(--calendar-zoom));
  padding:calc(8px * var(--calendar-zoom)) 4px;
  font-size:clamp(9px, calc(11px * var(--calendar-zoom)), 16px);
}
.planning-table .day-cell {
  width:calc(150px * var(--calendar-zoom));
  min-width:calc(150px * var(--calendar-zoom));
  max-width:calc(150px * var(--calendar-zoom));
  height:calc(69px * var(--calendar-zoom));
}
.planning-table .day-label {
  min-height:calc(69px * var(--calendar-zoom));
  padding:calc(5px * var(--calendar-zoom)) 3px;
}
.planning-table .day-number { font-size:clamp(11px, calc(17px * var(--calendar-zoom)), 23px); }
.planning-table .day-week { font-size:clamp(8px, calc(10px * var(--calendar-zoom)), 14px); }
.planning-table .day-cell .cell-btn {
  min-height:calc(69px * var(--calendar-zoom));
  padding:calc(6px * var(--calendar-zoom));
  gap:calc(3px * var(--calendar-zoom));
}
.event-pill {
  font-family:var(--type-family, inherit);
  font-weight:var(--type-weight,650);
  font-style:var(--type-italic,normal);
  text-decoration:var(--type-underline,none);
  font-size:clamp(8px,calc(var(--type-size,10px) * var(--calendar-zoom,1)),18px);
}
.calendar-scroll .event-pill { padding:calc(3px * var(--calendar-zoom)) calc(5px * var(--calendar-zoom)); }
/* Stronger line, but only at an actual boundary between teams. */
.planning-table thead .team-heading.team-boundary,
.planning-table thead .person-heading.team-end,
.planning-table tbody .day-cell.team-end,
.planning-table tbody .count-row .team-end {
  border-right:3px solid #93a1b1;
}
/* A private note looks like a quiet annotation rather than an assignment. */
.calendar-scroll .cell-private-note {
  display:inline-flex;
  align-items:baseline;
  gap:4px;
  width:100%;
  padding:0 2px;
  margin:1px 0;
  background:transparent;
  border:0;
  color:#57616c;
  line-height:1.3;
  text-align:left;
  white-space:pre-wrap;
  overflow-wrap:anywhere;
}
.cell-private-note .note-lock {
  flex:0 0 auto;
  color:#656d76;
  filter:grayscale(1);
  font-size:clamp(9px,calc(11px * var(--calendar-zoom,1)),15px);
  line-height:1.2;
}
.cell-private-note .note-copy {
  display:inline;
  color:#535b65;
  font-family:var(--type-family, inherit);
  font-weight:var(--type-weight,400);
  font-style:var(--type-italic,italic);
  text-decoration:var(--type-underline,none);
  font-size:clamp(8px,calc(var(--type-size,10px) * var(--calendar-zoom,1)),18px);
  line-height:1.3;
}
.quick-note-editor {
  border-top:1px solid #e3e8ee;
  border-bottom:1px solid #e3e8ee;
  padding:12px 0;
  margin:12px 0;
}
.quick-note-editor .form-label { color:#52606e; }
.quick-note-input { border-color:#c9d0d8; background:#fbfcfd; min-height:42px; margin-bottom:6px; }
.quick-note-input:focus { outline:2px solid #dae3ed; }
@media (max-width:620px) {
  .planning-table .day-cell { width:calc(132px * var(--calendar-zoom)); min-width:calc(132px * var(--calendar-zoom)); max-width:calc(132px * var(--calendar-zoom)); }
  .planning-table thead .person-heading { width:calc(132px * var(--calendar-zoom)); min-width:calc(132px * var(--calendar-zoom)); max-width:calc(132px * var(--calendar-zoom)); }
}


/* V0.4: stronger horizontal team separator and configurable header typography */
.planning-table thead .team-heading {
  border-bottom:3px solid #728398;
  box-shadow:inset 0 -1px 0 rgba(27,44,61,.18);
  font-family:var(--type-family,inherit);
  font-size:clamp(9px,calc(var(--type-size,11px) * var(--calendar-zoom)),22px);
  font-weight:var(--type-weight,800);
  font-style:var(--type-italic,normal);
  text-decoration:var(--type-underline,none);
  text-align:var(--type-align,center);
}
.planning-table thead .person-heading {
  border-top:2px solid #728398;
  font-family:var(--type-family,inherit);
  font-size:clamp(9px,calc(var(--type-size,11px) * var(--calendar-zoom)),22px);
  font-weight:var(--type-weight,800);
  font-style:var(--type-italic,normal);
  text-decoration:var(--type-underline,none);
  text-align:var(--type-align,center);
}
.planning-table .archived-person-tag {
  color:#4c5460;
  font-size:9px;
  font-weight:800;
  margin-left:4px;
  background:rgba(255,255,255,.7);
  border-radius:4px;
  padding:1px 3px;
}
.event-pill { text-align:var(--type-align,left); }
.calendar-scroll .cell-private-note {
  justify-content:var(--note-justify,flex-start);
}
.archived-toggle {
  display:inline-flex; align-items:center; gap:5px;
  white-space:nowrap; font-weight:700; font-size:11px; color:#536377;
  padding:7px 9px; border:1px solid #dce3eb; border-radius:7px;
}
.archived-toggle input { margin:0; width:13px; height:13px; accent-color:#235a89; }