/* Calendar-first desktop workspace; a compact tools stack on smaller screens. */
#tdc-v03 .calendar-workspace,
#tdc-v03 .calendar-workspace.collapsed {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 330px;
  align-items: start;
}

#tdc-v03 .calendar-main {
  padding: 29px 28px 32px;
  min-width: 0;
}

#tdc-v03 .calendar-main .toolbar {
  margin: 0 0 13px;
  padding: 0;
  border: 0;
  gap: 14px;
}

#tdc-v03 .calendar-main .toolbar h2 {
  max-width: 100%;
  font-size: 25px;
}

#tdc-v03 .calendar-main .views {
  margin-left: auto;
}

#tdc-v03 .calendar-main .views button {
  padding: 6px 9px;
}

#tdc-v03 .calendar-main .chips:not(:empty) { margin: 0 0 18px; }
#tdc-v03 .calendar-main .period-control { margin: 15px 0 8px; }
#tdc-v03 .calendar-main .resultbar { margin: 15px 0 16px; }

#tdc-v03 .calendar-rail,
#tdc-v03 .calendar-workspace.collapsed .calendar-rail {
  display: block;
  padding: 28px 20px;
  min-width: 0;
  align-self: stretch;
  border-left: 1px solid var(--line);
  border-bottom: 0;
  background: light-dark(#f3f5ef, #182633);
}

#tdc-v03 .calendar-rail .public-ask,
#tdc-v03 .calendar-workspace.collapsed .calendar-rail .public-ask {
  display: block;
  padding: 17px 15px;
  margin: 0 0 17px;
  border-radius: 12px;
}

#tdc-v03 .calendar-rail .ask-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 9px;
  margin-bottom: 14px;
}

#tdc-v03 .calendar-rail .ask-heading { flex: 1 1 176px; gap: 9px; }
#tdc-v03 .calendar-rail .ask-head h2 { font-size: 15px; }
#tdc-v03 .calendar-rail .ask-symbol { width: 29px; height: 29px; font-size: 18px; }
#tdc-v03 .calendar-rail .ask-intro { font-size: 11px; line-height: 1.5; margin-top: 3px; }
#tdc-v03 .calendar-rail .ask-head .plain { font-size: 10px; min-height: 28px; }
#tdc-v03 .calendar-rail .ask-form { gap: 4px; padding: 5px; }
#tdc-v03 .calendar-rail .ask-form input { font-size: 12px; padding: 8px 5px; min-width: 0; }
#tdc-v03 .calendar-rail .ask-form button.primary { min-width: 41px; padding: 8px 10px; }
#tdc-v03 .calendar-rail .ask-send-word { display: none; }
#tdc-v03 .calendar-rail .prompts { gap: 7px; }
#tdc-v03 .calendar-rail .prompt-label { flex-basis: 100%; }
#tdc-v03 .calendar-rail .prompts button { font-size: 10px; padding: 5px 8px; }
#tdc-v03 .calendar-rail .conversation { max-height: 450px; margin-top: 15px; }
#tdc-v03 .calendar-rail .bubble { font-size: 12px; padding: 12px; }
#tdc-v03 .calendar-rail .ask-grounding { font-size: 9px; line-height: 1.6; }

#tdc-v03 .calendar-filter-panel {
  overflow: hidden;
  margin: 0;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  box-shadow: 0 2px 7px #10223503;
}

#tdc-v03 .calendar-filter-panel > summary {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  min-height: 54px;
  align-items: center;
  padding: 14px 36px 14px 15px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  list-style: none;
}

#tdc-v03 .calendar-filter-panel > summary::-webkit-details-marker { display: none; }
#tdc-v03 .calendar-filter-panel > summary::after {
  content: "";
  position: absolute;
  right: 17px;
  top: 23px;
  width: 6px;
  height: 6px;
  border-right: 1.5px solid var(--sub);
  border-bottom: 1.5px solid var(--sub);
  transform: rotate(45deg);
}

#tdc-v03 .calendar-filter-panel[open] > summary::after { transform: rotate(225deg); top: 26px; }
#tdc-v03 .filter-summary-hint { display: block; width: 100%; font-size: 10px; font-weight: 400; color: var(--sub); }
#tdc-v03 .calendar-filter-panel .filters { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; margin: 0; padding: 2px 15px 17px; }
#tdc-v03 .calendar-filter-panel .filters label { grid-column: auto; grid-row: auto; letter-spacing: .025em; }
#tdc-v03 .calendar-filter-panel .filters label > span { margin: 0 0 6px 1px; font-size: 10px; }
#tdc-v03 .calendar-filter-panel .filters input,
#tdc-v03 .calendar-filter-panel .filters select { min-height: 43px; font-size: 12px; }

#tdc-v03 .calendar-main .day { padding: 6px; min-height: 115px; }
#tdc-v03 .calendar-main .day button { padding: 5px 4px; font-size: 10px; overflow-wrap: anywhere; }
#tdc-v03 .calendar-main .event { padding: 19px; gap: 17px; grid-template-columns: 53px minmax(0, 1fr) 86px; }
#tdc-v03 .calendar-main .event img.flyer-image,
#tdc-v03 .calendar-main .event .flyer-placeholder { width: 86px; }
#tdc-v03 .calendar-main .event h3 { font-size: 22px; }
#tdc-v03 .calendar-main .expanded-grid { grid-template-columns: minmax(0, 1fr) 155px; gap: 22px; }
#tdc-v03 .calendar-main .expanded-grid:has(.enlarged) { grid-template-columns: 1fr; }

@media (max-width: 1100px) and (min-width: 901px) {
  #tdc-v03 .calendar-workspace,
  #tdc-v03 .calendar-workspace.collapsed { grid-template-columns: minmax(0, 1fr) 310px; }
  #tdc-v03 .calendar-main { padding: 25px 22px; }
  #tdc-v03 .calendar-rail,
  #tdc-v03 .calendar-workspace.collapsed .calendar-rail { padding: 25px 16px; }
  #tdc-v03 .calendar-main .toolbar { align-items: flex-start; flex-direction: column; gap: 13px; }
  #tdc-v03 .calendar-main .views { margin-left: 0; }
  #tdc-v03 .calendar-main .event { grid-template-columns: 43px minmax(0, 1fr); gap: 14px; }
  #tdc-v03 .calendar-main .event > .flyer-button,
  #tdc-v03 .calendar-main .event > .flyer-placeholder { display: none; }
  #tdc-v03 .calendar-main .expanded-grid { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
  #tdc-v03 .calendar-workspace,
  #tdc-v03 .calendar-workspace.collapsed {
    display: flex;
    flex-direction: column;
  }
  #tdc-v03 .calendar-rail,
  #tdc-v03 .calendar-workspace.collapsed .calendar-rail {
    order: 1;
    width: 100%;
    padding: 20px;
    border-left: 0;
    border-bottom: 1px solid var(--line);
    background: light-dark(#f3f5ef, #182633);
  }
  #tdc-v03 .calendar-main {
    order: 2;
    width: 100%;
    padding: 23px 20px 28px;
  }
  #tdc-v03 .calendar-rail .public-ask,
  #tdc-v03 .calendar-workspace.collapsed .calendar-rail .public-ask {
    padding: 14px;
    margin-bottom: 12px;
  }
  #tdc-v03 .calendar-rail .ask-head { align-items: center; flex-wrap: nowrap; margin-bottom: 11px; }
  #tdc-v03 .calendar-rail .ask-heading { flex: 1 1 0; }
  #tdc-v03 .calendar-rail .ask-head h2 { font-size: 15px; }
  #tdc-v03 .calendar-rail .ask-intro { display: none; }
  #tdc-v03 .calendar-rail .ask-head .plain { min-height: 32px; font-size: 11px; }
  #tdc-v03 .calendar-rail .ask-form input { font-size: 16px; min-height: 40px; padding: 8px; }
  #tdc-v03 .calendar-rail .ask-form button.primary { min-height: 40px; }
  #tdc-v03 .calendar-rail .prompts button { min-height: 36px; font-size: 11px; }
  #tdc-v03 .calendar-rail .ask-grounding { font-size: 10px; }
  #tdc-v03 .calendar-filter-panel > summary { padding: 12px 37px 12px 15px; min-height: 45px; }
  #tdc-v03 .calendar-filter-panel > summary::after { top: 18px; }
  #tdc-v03 .calendar-filter-panel[open] > summary::after { top: 21px; }
  #tdc-v03 .filter-summary-hint { width: auto; margin-left: auto; font-size: 10px; }
  #tdc-v03 .calendar-filter-panel .filters { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 13px 11px; padding-top: 5px; }
  #tdc-v03 .calendar-filter-panel .filter-search,
  #tdc-v03 .calendar-filter-panel .filter-body { grid-column: 1 / -1; }
  #tdc-v03 .calendar-filter-panel .filters label > span { font-size: 10px; }
  #tdc-v03 .calendar-filter-panel .filters input,
  #tdc-v03 .calendar-filter-panel .filters select { font-size: 16px; min-height: 44px; }
  #tdc-v03 .calendar-main .toolbar { align-items: flex-start; flex-direction: column; margin: 0 0 12px; padding: 0; gap: 13px; }
  #tdc-v03 .calendar-main .views { width: 100%; justify-content: space-between; margin: 0; }
  #tdc-v03 .calendar-main .views button { flex: 1; min-height: 39px; padding: 7px 8px; font-size: 12px; }
  #tdc-v03 .calendar-main .period-control { margin: 15px 0 8px; }
  #tdc-v03 .calendar-main .day { min-height: 88px; padding: 4px; }
  #tdc-v03 .calendar-main .day button { font-size: 10px; min-height: 44px; padding: 4px 3px; }
  #tdc-v03 .calendar-main .event { grid-template-columns: 43px minmax(0, 1fr) 66px; gap: 12px; padding: 15px 12px; }
  #tdc-v03 .calendar-main .event img.flyer-image,
  #tdc-v03 .calendar-main .event .flyer-placeholder { width: 66px; }
  #tdc-v03 .calendar-main .event h3 { font-size: 20px; }
  #tdc-v03 .calendar-main .expanded-grid { grid-template-columns: 1fr; }
}

@media (max-width: 360px) {
  #tdc-v03 .calendar-rail,
  #tdc-v03 .calendar-workspace.collapsed .calendar-rail { padding: 16px 13px; }
  #tdc-v03 .calendar-main { padding: 21px 13px 25px; }
  #tdc-v03 .calendar-rail .public-ask,
  #tdc-v03 .calendar-workspace.collapsed .calendar-rail .public-ask { padding: 12px; }
  #tdc-v03 .calendar-rail .ask-heading { gap: 7px; }
  #tdc-v03 .calendar-rail .ask-head h2 { font-size: 14px; }
  #tdc-v03 .calendar-rail .ask-symbol { width: 25px; height: 25px; font-size: 16px; }
  #tdc-v03 .calendar-rail .ask-head .plain { font-size: 10px; }
  #tdc-v03 .calendar-main .toolbar h2 { font-size: 23px; }
  #tdc-v03 .calendar-main .views button { font-size: 11px; padding: 7px 6px; }
  #tdc-v03 .calendar-main .resultbar { flex-wrap: wrap; gap: 5px; }
  #tdc-v03 .calendar-main .day { padding: 3px; }
  #tdc-v03 .calendar-main .day button { font-size: 9px; padding: 4px 2px; }
  #tdc-v03 .calendar-main .event { grid-template-columns: 38px minmax(0, 1fr); gap: 11px; }
  #tdc-v03 .calendar-main .event > .flyer-button,
  #tdc-v03 .calendar-main .event > .flyer-placeholder { display: none; }
}

/* Keep the accepted identity and tools prominent while reaching events sooner
   on phones. The desktop workspace and the user's chosen view stay intact. */
@media (max-width: 600px) {
  #tdc-v03 #fraternal-calendar-selected-brand .tdc-beacon-header {
    padding: 12px 18px 15px;
    gap: 8px 13px;
  }
  #tdc-v03 #fraternal-calendar-selected-brand .tdc-brand-home { width: 44px; }
  #tdc-v03 #fraternal-calendar-selected-brand .tdc-beacon-shield {
    width: 44px;
    height: 44px;
    flex-basis: 44px;
  }
  #tdc-v03 #fraternal-calendar-selected-brand .tdc-beacon-copy { gap: 4px; }
  #tdc-v03 .calendar-rail,
  #tdc-v03 .calendar-workspace.collapsed .calendar-rail { padding: 14px 16px; }
  #tdc-v03 .calendar-main { padding: 19px 16px 25px; }
  #tdc-v03 .calendar-rail .public-ask,
  #tdc-v03 .calendar-workspace.collapsed .calendar-rail .public-ask {
    padding: 10px 12px;
    margin-bottom: 10px;
  }
  #tdc-v03 .calendar-rail .ask-head { margin-bottom: 6px; }
  #tdc-v03 .calendar-rail .ask-head .plain,
  #tdc-v03 .calendar-rail .ask-form input,
  #tdc-v03 .calendar-rail .ask-form button.primary,
  #tdc-v03 .calendar-rail .prompts button,
  #tdc-v03 .calendar-main .views button,
  #tdc-v03 .calendar-main .chips button,
  #tdc-v03 .calendar-main .empty button,
  #tdc-v03 .calendar-main .return-calendar,
  #tdc-v03 .calendar-main .expanded-event > .row.between > button,
  #tdc-v03 .calendar-rail .ask-sources button,
  #tdc-v03 .calendar-rail .ask-context button { min-height: 44px; }
  #tdc-v03 .calendar-rail .ask-form button.primary,
  #tdc-v03 .calendar-rail .ask-context button { min-width: 44px; }
  #tdc-v03 .calendar-rail .ask-context button { width: 44px; }
  #tdc-v03 .calendar-main .agenda-row h3 button {
    min-height: 44px;
    width: 100%;
    text-align: left;
  }
  #tdc-v03 .calendar-main .agenda-row { padding: 16px 0; }
  #tdc-v03 button,
  #tdc-v03 summary,
  #tdc-v03 .site-navigation a { touch-action: manipulation; }
}