/* Calendar view: month grid, agenda, add and edit form, subscribe card.
   Tokens only, so it follows the day and night themes with everything else. */

#calendarRoot [hidden]{display:none!important}
#calendarRoot .sub{color:var(--mute);font-size:13px;line-height:1.55}

.cal-wrap{display:grid;grid-template-columns:1fr 340px;gap:14px;align-items:start}
.cal-wrap>.cal-agenda,.cal-wrap>.cal-feed{grid-column:1/-1}
@media(max-width:900px){.cal-wrap{grid-template-columns:1fr}}

/* ------------------------------------------------------------- month grid */
.cal-head{display:flex;align-items:center;gap:8px;margin-bottom:12px;flex-wrap:wrap}
.cal-head b{font:800 16px/1 var(--mono);letter-spacing:-.4px;min-width:150px}
.cal-head .btn{padding:8px 13px;font-size:13px}
.cal-dow{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px;margin-bottom:6px}
.cal-dow span{text-align:center;font:800 9.5px/1 var(--mono);letter-spacing:1.2px;text-transform:uppercase;color:var(--mute)}
/* minmax(0,1fr) and min-width:0, not plain 1fr: a grid track and a grid item both
   refuse to go below their content, so one long event title widened its column and
   pushed the week out past the card, which clips it. */
.cal-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px}
.cal-cell{
  min-height:94px;min-width:0;padding:6px;border:1px solid var(--line);border-radius:10px;
  background:var(--panel2);display:flex;flex-direction:column;gap:4px;cursor:pointer;transition:.14s;
}
.cal-cell:hover{border-color:var(--hot)}
.cal-cell.out{opacity:.4}
.cal-cell.sel{border-color:var(--cool);box-shadow:inset 0 0 0 1px var(--cool)}
.cal-cell .d{
  width:23px;height:23px;flex:none;border-radius:7px;display:grid;place-items:center;
  font:800 11px/1 var(--mono);color:var(--mute);
}
.cal-cell.today{border-color:var(--hot);box-shadow:0 0 0 1px var(--hot),0 10px 26px rgba(255,90,31,.16)}
.cal-cell.today .d{background:var(--hot);color:#fff}
.cal-ev{
  display:block;width:100%;min-width:0;text-align:left;padding:3px 6px;border-radius:7px;
  background:var(--panel);border:1px solid var(--line);border-left:3px solid var(--mute);
  font:700 10.5px/1.3 var(--mono);color:var(--ink);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:.14s;
}
.cal-ev:hover{border-color:var(--hot);transform:translateX(2px)}
.cal-ev .t{color:var(--mute);font-weight:800}
.cal-ev.k-practice{border-left-color:var(--hot)}
.cal-ev.k-game{border-left-color:var(--grape)}
.cal-ev.k-workout{border-left-color:var(--good)}
.cal-ev.k-appointment{border-left-color:var(--cool)}
.cal-ev.k-other{border-left-color:var(--dim)}
.cal-cell .more{font:700 9.5px/1 var(--mono);color:var(--dim);padding-left:4px}

/* the day the player tapped, under the grid */
.cal-dayof{margin-top:14px}
.cal-dayhead{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;padding-bottom:6px;border-bottom:1px solid var(--line)}
.cal-dayhead b{font:800 14px/1.2 var(--mono)}

/* ----------------------------------------------------------------- agenda */
.cal-day{margin:14px 0 2px;font:800 10px/1 var(--mono);letter-spacing:1.4px;text-transform:uppercase;color:var(--hot)}
.cal-day:first-child{margin-top:0}
.cal-row{display:grid;grid-template-columns:92px 1fr auto;gap:12px;align-items:start;padding:11px 0;border-bottom:1px solid var(--line)}
.cal-row:last-child{border-bottom:0}
.cal-when b{display:block;font:800 14px/1.2 var(--mono);color:var(--ink)}
.cal-when small{display:block;font:700 10px/1 var(--mono);color:var(--dim);margin-top:4px}
/* A title is capped at 120 characters, but 120 characters with no space in them
   still ran the row off the card, so the text is allowed to break anywhere. */
.cal-what{min-width:0}
.cal-what b{display:block;font-size:14.5px;font-weight:800;color:var(--ink);overflow-wrap:anywhere}
.cal-tags{display:flex;gap:7px;align-items:center;flex-wrap:wrap;margin-top:6px}
.cal-place{min-width:0;font:700 11.5px/1 var(--mono);color:var(--mute);overflow-wrap:anywhere}
.cal-note{font-size:13px;line-height:1.5;color:var(--mute);margin-top:6px;white-space:pre-wrap;overflow-wrap:anywhere}
.cal-ops{display:flex;gap:6px;flex-wrap:wrap}
.cal-ops .btn{padding:7px 12px;font-size:12.5px}
.pill.grape{background:rgba(157,107,255,.14);color:var(--grape);border:1px solid rgba(157,107,255,.32)}
.pill.mute{background:var(--panel2);color:var(--mute);border:1px solid var(--line)}
.pill.voice{background:rgba(46,168,255,.12);color:var(--cool);border:1px dashed rgba(46,168,255,.45)}

/* ------------------------------------------------------------------- form */
.cal-form label{display:grid;gap:5px;margin-bottom:11px;font:800 9.5px/1 var(--mono);letter-spacing:1.2px;text-transform:uppercase;color:var(--mute)}
.cal-form input,.cal-form select,.cal-form textarea{
  width:100%;min-width:0;padding:10px 12px;border-radius:10px;
  border:1px solid var(--line);background:var(--panel2);color:var(--ink);
  font:600 14px/1.4 var(--sans);
}
.cal-form textarea{resize:vertical}
.cal-two{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.cal-actions{display:flex;gap:8px;margin-top:4px}
.cal-actions .btn.wide{flex:1;width:auto}
.cal-hint{margin-top:11px}

/* ------------------------------------------------------------------- feed */
.cal-feed-row{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0 10px}
.cal-feed input{
  flex:1;min-width:220px;padding:10px 12px;border-radius:10px;
  border:1px solid var(--line);background:var(--panel2);color:var(--mute);
  font:600 12.5px/1.3 var(--mono);
}
.cal-help{display:grid;gap:8px;margin-top:14px;padding-top:14px;border-top:1px solid var(--line)}
.cal-help div{font-size:13px;line-height:1.5;color:var(--mute)}
.cal-help b{display:inline-block;min-width:130px;color:var(--ink);font-weight:800}

@media(max-width:700px){
  .cal-cell{min-height:60px;padding:4px;gap:3px}
  .cal-cell .d{width:20px;height:20px;font-size:10px}
  .cal-ev{font-size:9.5px;padding:2px 4px}
  .cal-ev .t{display:none}
  .cal-row{grid-template-columns:72px 1fr;gap:10px}
  .cal-ops{grid-column:1/-1}
  .cal-help b{display:block;min-width:0}
}