/* Shared workspace foundation, drawn from the accepted Planning screens.
   Keep this after module styles so My List and Calendar share one authority. */
#my-list-panel,
#calendar-panel {
  width: 100%;
  min-width: 0;
  max-width: none;
  padding: clamp(12px, 1.5vw, 18px);
  gap: 18px;
  border: 1px solid var(--line, #d8d6ce);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 5px 18px rgb(15 43 70 / 6%);
}
#my-list-panel .v47-screen-head,
#calendar-panel .v47-screen-head {
  align-items: flex-start;
  gap: 16px;
  min-height: 0;
  padding: 8px 2px 4px;
  border: 0;
}
#my-list-panel .v47-screen-head > div:first-child,
#calendar-panel .v47-screen-head > div:first-child { min-width: 0; }
#my-list-panel .v47-screen-head .eyebrow,
#calendar-panel .v47-screen-head .eyebrow {
  margin: 0 0 8px;
  color: var(--olive, #556b2f);
  font: 750 .9rem/1.5 system-ui, sans-serif;
  letter-spacing: .08em;
}
#my-list-panel .v47-screen-head h2,
#calendar-panel .v47-screen-head h2 {
  margin: 0;
  color: var(--navy, #0f2b46);
  font: 800 1.5rem/1.25 system-ui, sans-serif;
  letter-spacing: normal;
}
#my-list-panel .v47-screen-head h2 + p,
#calendar-panel .v47-screen-head h2 + p {
  margin: 10px 0 0;
  max-width: none;
  font-size: .9rem;
  line-height: 1.5;
}
#my-list-panel .my-list-page-actions .resource-link,
#calendar-panel .v47-screen-head .resource-link {
  flex-shrink: 0;
  min-height: 40px;
  padding: 9px 13px;
  border: 1px solid var(--navy, #0f2b46);
  border-radius: 7px;
  font-size: .85rem;
  line-height: 1.4;
}
#my-list-panel :is(button, a, select, input, summary):focus-visible,
#calendar-panel :is(button, a, select, input, summary):focus-visible {
  outline: 3px solid var(--navy, #0f2b46);
  outline-offset: 3px;
}

/* Calendar-specific presentation. Date ranges, event markup and actions stay intact. */
#calendar-panel {
  --olive: #556b2f;
  --line: #d8d6ce;
  --muted: #63717d;
  container-type: inline-size;
  container-name: basecamp-calendar;
  align-content: start;
}
#calendar-panel .calendar-page-layout {
  min-width: 0;
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
}
#calendar-panel .calendar-main-column { min-width: 0; gap: 12px; }
#calendar-panel .calendar-toolbar {
  gap: 10px 14px;
  padding: 11px 12px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: #f7f8f3;
  box-shadow: none;
}
#calendar-panel .calendar-month-navigation { gap: 6px; }
#calendar-panel .calendar-filters { gap: 8px; }
#calendar-panel .calendar-toolbar .filter-button,
#calendar-panel .calendar-toolbar .filter,
#calendar-panel .calendar-toolbar .calendar-troop-toggle {
  min-height: 40px;
  height: auto;
  padding: 8px 11px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #fff;
  color: var(--navy);
  font: 700 .8rem/1.4 system-ui, sans-serif;
}
#calendar-panel .calendar-toolbar .filter-button[aria-pressed="true"],
#calendar-panel .calendar-toolbar .calendar-troop-toggle[aria-pressed="true"] {
  border-color: var(--navy);
  background: var(--navy);
  color: #fff;
}
#calendar-panel #calendar-month-label { font: 800 1rem/1.35 system-ui, sans-serif; }
#calendar-panel #calendar-prev,
#calendar-panel #calendar-next { min-width: 36px; font-size: 1.15rem; line-height: 1; }
#calendar-panel .calendar-month-legend {
  gap: 7px 14px;
  font-size: .72rem;
  line-height: 1.4;
}
#calendar-panel #calendar-events.calendar-month-grid {
  min-width: 0;
  border-color: var(--line);
  border-radius: 10px;
  box-shadow: none;
}
#calendar-panel .calendar-weekdays { border-color: var(--line); background: #f7f8f3; }
#calendar-panel .calendar-weekday { padding: 9px 5px; color: var(--navy); font-size: .7rem; }
#calendar-panel .calendar-month-day { min-height: 112px; border-color: var(--line); }
#calendar-panel .calendar-month-number { color: var(--navy); }
#calendar-panel .is-outside-month .calendar-month-number { color: #7b858d; }
#calendar-panel .calendar-coming-up-card {
  position: static;
  order: 0;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #f7f8f3;
  box-shadow: none;
}
#calendar-panel .calendar-coming-up-card .section-head { margin: 0 0 12px; }
#calendar-panel .calendar-coming-up-card .eyebrow { margin: 0 0 4px; font-size: .75rem; }
#calendar-panel .calendar-coming-up-card h3 { font: 800 1rem/1.35 system-ui, sans-serif; }
#calendar-panel .calendar-coming-up-card p.muted { margin: 8px 0 0; font-size: .8rem; line-height: 1.5; }
#calendar-panel .calendar-coming-up { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; }
#calendar-panel .calendar-coming-up-item {
  --event-accent: #173a59;
  --event-tint: #eef3f6;
  min-width: 0;
  padding: 12px 14px;
  gap: 6px;
  border: 1px solid var(--line);
  border-top: 4px solid var(--event-accent);
  border-radius: 10px;
  background: linear-gradient(180deg, var(--event-tint), #fff 120px);
  box-shadow: none;
}
#calendar-panel .calendar-coming-up-item.calendar-source-troop {
  --event-accent: #173a59;
  --event-tint: #eef3f6;
  border-left-color: var(--line);
}
#calendar-panel .calendar-coming-up-item.calendar-source-adventure {
  --event-accent: #526b27;
  --event-tint: #f1f5e9;
  border-left-color: var(--line);
}
#calendar-panel .calendar-coming-up-item.calendar-source-council {
  --event-accent: #947016;
  --event-tint: #fbf4df;
  border-left-color: var(--line);
}
#calendar-panel .calendar-coming-up-item.calendar-source-community {
  --event-accent: #67547e;
  --event-tint: #f3eff7;
  border-left-color: var(--line);
}
#calendar-panel .calendar-coming-up-item.calendar-source-troop,
#calendar-panel .calendar-coming-up-item.calendar-source-adventure,
#calendar-panel .calendar-coming-up-item.calendar-source-council,
#calendar-panel .calendar-coming-up-item.calendar-source-community {
  background: linear-gradient(180deg, var(--event-tint), #fff 120px);
}
#calendar-panel .calendar-coming-up-item > strong { font: 800 .95rem/1.35 system-ui, sans-serif; }
#calendar-panel .calendar-coming-up-meta { font-size: .78rem; line-height: 1.45; }
#calendar-panel .calendar-coming-up-source { font-size: .7rem; line-height: 1.4; }
#calendar-panel .calendar-upcoming-list { gap: 9px; }
#calendar-panel .calendar-upcoming-list .calendar-coming-up-item { padding: 14px 16px; gap: 6px; }
#calendar-panel .calendar-upcoming-list .calendar-coming-up-item > strong { font-size: 1rem; }
#calendar-panel .calendar-upcoming-list .calendar-coming-up-meta { font-size: .82rem; }
#calendar-panel #calendar-loading { padding: 14px; border-radius: 9px; background: #f7f8f3; box-shadow: none; }
@container basecamp-calendar (min-width: 1160px) {
  #calendar-panel .calendar-page-layout { grid-template-columns: minmax(0, 1fr) 280px; }
  #calendar-panel .calendar-coming-up-card { position: sticky; top: 0; }
  #calendar-panel .calendar-coming-up { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 900px) {
  #calendar-panel .calendar-coming-up { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  #calendar-panel .calendar-filters { width: 100%; }
  #calendar-panel .calendar-toolbar .filter-button,
  #calendar-panel .calendar-toolbar .filter,
  #calendar-panel .calendar-toolbar .calendar-troop-toggle { min-height: 44px; }
  #calendar-panel .calendar-coming-up-card { display: none; }
}
@media (max-width: 640px) {
  #my-list-panel,
  #calendar-panel { padding: 12px; gap: 16px; }
  #my-list-panel .v47-screen-head,
  #calendar-panel .v47-screen-head { gap: 14px; }
  #my-list-panel .v47-screen-head h2,
  #calendar-panel .v47-screen-head h2 { font-size: 1.3rem; }
  #my-list-panel .my-list-page-actions .resource-link,
  #calendar-panel .v47-screen-head .resource-link { min-height: 44px; }
  #calendar-panel .calendar-toolbar { padding: 10px; }
}