/* =====================================================================
   Game Day — Calendar (month) view. Figma: gameday - calendar - month 1056:36471
   Components: Sports Label 1168:31665, Event pill (Event Card Simplified 704:8144), Date cell 1133:60106,
   Day header 1163:31339, See More events 1056:43503, Calendar toolbar 1067:37659, day popover (See More modal).
   ===================================================================== */
/* Sports Label: 22px high, sport colour, 10/14 text; light text on dark sports */
.sports-label{display:inline-flex;align-items:center;justify-content:center;flex:none;box-sizing:border-box;height:22px;min-width:46px;padding:var(--space-2) var(--space-8);border:1px solid var(--border-default);border-radius:var(--radius-sm);
  background:var(--sport-multi);color:var(--sport-multi-text);font:var(--text-xxs);white-space:nowrap;text-transform:uppercase}
.sports-label[data-sport=soccer]{background:var(--sport-soccer);color:var(--sport-soccer-text)}
.sports-label[data-sport=basketball]{background:var(--sport-basketball);color:var(--sport-basketball-text)}
.sports-label[data-sport=hockey]{background:var(--sport-hockey);color:var(--sport-hockey-text)}
.sports-label[data-sport=softball]{background:var(--sport-softball);color:var(--sport-softball-text)}
.sports-label[data-sport=volleyball]{background:var(--sport-volleyball);color:var(--sport-volleyball-text)}
.sports-label[data-sport=tennis]{background:var(--sport-tennis);color:var(--sport-tennis-text)}
.sports-label[data-sport=golf]{background:var(--sport-golf);color:var(--sport-golf-text)}
.sports-label[data-sport=cycling]{background:var(--sport-cycling);color:var(--sport-cycling-text)}
.sports-label[data-sport=gymnastics]{background:var(--sport-gymnastics);color:var(--sport-gymnastics-text)}
.sports-label[data-sport=business]{background:var(--sport-business);color:var(--sport-business-text)}
.sports-label[data-sport=pwhl]{background:var(--sport-pwhl);color:var(--sport-pwhl-text)}
.sports-label[data-sport=wnba]{background:var(--sport-wnba);color:var(--sport-wnba-text)}
.sports-label[data-sport=nwsl]{background:var(--sport-nwsl);color:var(--sport-nwsl-text)}
.sports-label[data-sport=ncaa]{background:var(--sport-ncaa);color:var(--sport-ncaa-text)}
.sports-label[data-sport=ausl]{background:var(--sport-ausl);color:var(--sport-ausl-text)}

/* Event pill: 30px, card fill, subtle border, radius md, 4px padding, 12px gap between label and details */
.cal-pill{display:flex;align-items:center;gap:var(--space-12);box-sizing:border-box;width:100%;min-width:0;height:30px;padding:var(--space-4);border:1px solid var(--border-subtle);border-radius:var(--radius-md);background:var(--card-bg-default);
  color:var(--text-primary);font:var(--text-xs);text-align:left;cursor:pointer;overflow:hidden;transition:background-color .2s}
.cal-pill:hover,.cal-pill.is-hover{background:var(--card-bg-hover)}
.cal-pill:active,.cal-pill.is-pressed{background:var(--card-bg-hover)}
.cal-pill:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}
.cal-pill__details{display:flex;align-items:center;gap:var(--space-12);min-width:0;flex:1}
.cal-pill__title{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cal-pill__time,.cal-pill__city{display:none;white-space:nowrap;flex:none}
.cal-pill--wide .cal-pill__title{flex:none;max-width:60%}
.cal-pill--wide .cal-pill__time,.cal-pill--wide .cal-pill__city{display:inline}
.cal-pill--wide .cal-pill__details{overflow:hidden}
.cal-pill__cont{flex:none;width:12px;height:12px;fill:none;stroke:var(--text-secondary);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.cal-pill.is-past{opacity:.55}

/* Toolbar */
.cal-toolbar{display:flex;align-items:center;justify-content:space-between;gap:var(--space-16);padding-bottom:var(--space-16);flex-wrap:wrap}
.cal-toolbar__nav{display:flex;align-items:center;gap:var(--space-8);flex-wrap:wrap}
.cal-toolbar__types{display:flex;align-items:center;gap:var(--space-16);flex-wrap:wrap}
.cal-toolbar__types .select{width:200px}   /* Event type select, Figma 1067:37692: 200 wide, 44 tall, no visible label */
.cal-toolbar__types .select__label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.cal-toolbar__types .select__menu{top:52px;right:0;left:auto;min-width:220px}
.cal-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-8);height:40px;box-sizing:border-box;padding:var(--space-8) var(--space-16);border:1px solid var(--neutral-300);border-radius:var(--radius-md);background:var(--surface-default);color:var(--text-primary);
  font:var(--text-xs);cursor:pointer;box-shadow:var(--shadow-button-default);transition:background-color .2s,border-color .2s,box-shadow .2s}
.cal-btn--icon{width:40px;padding:var(--space-8)}
.cal-btn:hover{background:var(--button-nav-secondary-bg-hover);border-color:var(--border-default);box-shadow:var(--shadow-button-hover)}
.cal-btn:active{background:var(--button-nav-secondary-bg-pressed);border-color:var(--border-strong);box-shadow:var(--shadow-button-pressed)}
.cal-btn:focus-visible{outline:none;box-shadow:var(--shadow-button-focus)}
.cal-toolbar__nav .toggle-group{margin-left:var(--space-8)}

/* Month grid */
.cal-month{border-top:1px solid var(--border-default);border-left:1px solid var(--border-default)}
.cal-month__head{display:grid;grid-template-columns:repeat(7,minmax(0,1fr))}
.cal-head{box-sizing:border-box;padding:var(--space-4) var(--space-8);border-right:1px solid var(--border-default);border-bottom:1px solid var(--border-default);background:var(--surface-background);color:var(--text-secondary);font:var(--text-sm);text-align:center}
.cal-week{position:relative;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));grid-template-rows:32px repeat(3,30px) 24px 1fr;row-gap:var(--space-4);min-height:204px;padding:var(--space-4) 0}
.cal-cell{grid-row:1 / -1;box-sizing:border-box;margin:calc(-1 * var(--space-4)) 0;border-right:1px solid var(--border-default);border-bottom:1px solid var(--border-default);background:var(--card-bg-hover);transition:background-color .2s}
.cal-cell:hover{background:var(--card-bg-default)}
.cal-cell.is-outside{background:var(--surface-background)}
.cal-cell.is-outside:hover{background:var(--surface-background)}
.cal-cell__num{position:relative;z-index:1;grid-row:1;align-self:center;padding-left:14px;font:var(--text-base);color:var(--text-primary);pointer-events:none}
.cal-cell__num.is-outside{color:var(--text-secondary);opacity:.6}
.cal-pill-slot{position:relative;z-index:1;min-width:0;margin:0 var(--space-8)}
.cal-pill-slot--span{margin-right:var(--space-8)}
.cal-more{position:relative;z-index:1;grid-row:5;display:flex;align-items:center;box-sizing:border-box;height:24px;margin:0 var(--space-8);padding:3.5px var(--space-8) 3.5px var(--space-4);border:1px solid transparent;border-radius:6px;background:transparent;color:var(--text-primary);font:var(--text-xs);text-align:left;cursor:pointer;transition:background-color .2s,border-color .2s}
.cal-more:hover{background:var(--surface-elevated)}
.cal-more:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}
.cal-more[aria-expanded=true]{background:var(--surface-elevated);border-color:var(--border-default)}
.cal-month__empty{padding:var(--space-24);text-align:center;color:var(--text-secondary);font:var(--text-sm)}

/* Day popover (See More modal): 432 wide, 20px padding, 8px gap */
.cal-day-pop{position:fixed;z-index:100;width:432px;max-width:calc(100vw - 32px);box-sizing:border-box;padding:var(--space-20);display:flex;flex-direction:column;gap:var(--space-8);background:var(--surface-default);border:1px solid var(--border-default);border-radius:var(--radius-md);box-shadow:var(--shadow-card-soft);
  opacity:0;transform:translateY(-6px);transition:opacity .18s,transform .22s var(--ease-out,ease)}
.cal-day-pop[hidden]{display:none}
.cal-day-pop.is-open{opacity:1;transform:none}
.cal-day-pop__title{margin:0 0 var(--space-4);font:var(--text-lg);color:var(--text-primary)}
.cal-day-pop__list{display:flex;flex-direction:column;gap:var(--space-8);max-height:min(60vh,420px);overflow:auto}

/* Month / calendar view container (all widths since Prompt 18: phones get the compact month and the 3-day week, calendar.css) */
.cal-view[hidden]{display:none}
.calendar[data-view="calendar"] [data-list-only]{display:none}

/* Week view (Figma 1059:48835): one tall row, lanes grow with the events, no "+ N more" */
.cal-week--tall{min-height:709px;row-gap:var(--space-4)}
.cal-week--tall .cal-cell{margin:calc(-1 * var(--space-4)) 0}

/* Design-system specimens (static, in flow) */
.cal-cell.is-hover{background:var(--card-bg-default)}
.cal-day-pop.cal-day-pop--static{position:static;opacity:1;transform:none;display:flex}
.cal-pop.cal-pop--static{position:static;opacity:1;transform:none;display:flex}
.ds-panel{width:560px;max-width:100%}
.ds-panel .event-modal{height:auto;transform:none;overflow:visible;border:1px solid var(--border-default)}

/* Tablet month / week (Prompt 28; Figma 2086:67785 Calendar Month 2134:50103, week 2086:68714): each day stacks its own pills, the
   league badge above a title on up to 2 lines (no time or city), 8 apart; month cells are 228 tall with 2 pills then "+ N more",
   week shows up to 6. 228 = not a Figma token yet (cell height in the frame). */
.cal-week--stack{grid-template-rows:40px 1fr;min-height:228px;row-gap:0}
.cal-week--stack.cal-week--tall{min-height:709px}
.cal-week--stack .cal-cell__num{align-self:end}
.cal-stack{position:relative;z-index:1;grid-row:2;display:flex;flex-direction:column;gap:var(--space-8);min-width:0;padding:var(--space-8) var(--space-8) var(--space-12)}
.cal-stack .cal-pill{flex-direction:column;align-items:flex-start;gap:var(--space-8);height:auto;padding:var(--space-8)}
.cal-stack .cal-pill__details{flex:none;width:100%}
.cal-stack .cal-pill__title{white-space:normal;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden;text-align:left}
.cal-stack .cal-pill__time,.cal-stack .cal-pill__city{display:none}
.cal-stack .cal-more{grid-row:auto;margin:0;align-self:flex-start}