/* The team calendar (/t/<slug>/calendar) and the events part of /me. The booth's world: plum ground, cream ink,
   Archivo caps for labels, flat rows separated by tone; cyan only for "On now" (The Two Signals Rule). Each item's
   type is an icon and a word (Raid train / Stream / IRL), never colour alone. */

.cal{max-width:1240px}
.cal-back{margin:0 0 10px;font-size:.92rem}
.cal-back a{color:var(--cream-2);text-decoration:none}
.cal-back a:hover{color:var(--cream)}
.cal-back span{display:inline-block;transition:transform .2s var(--ease-out-3)}
.cal-back a:hover span{transform:translateX(-3px)}

.cal-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:16px 32px}
.cal-title{flex:1 1 34rem;min-width:0}
.cal-title .lede{margin:0}
.cal-feed{display:grid;gap:6px;justify-items:start;max-width:26rem}
.cal-feed .note{margin:0}
.cal-live{margin:18px 0 0;color:var(--cream-2)}
.cal-live b{color:var(--cream)}

.cal-bar{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin:26px 0 6px}
.cal-zone{margin:0 0 0 auto}

/* ---- markers ---- */
.cal-kind{display:inline-flex;align-items:center;gap:6px;font:800 .64rem var(--display);font-stretch:125%;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;color:var(--cream-2)}
.cal-kind svg,.cal-chip svg{width:14px;height:14px;flex:none;fill:currentColor}
.k-raid .cal-kind,.cal-chip.k-raid svg{color:var(--peach)}
.k-stream .cal-kind,.cal-chip.k-stream svg{color:var(--cream-2)}
.k-irl .cal-kind,.cal-chip.k-irl svg{color:var(--pink)}
.k-break .cal-kind,.cal-chip.k-break svg{color:var(--cream-3)}

/* ---- agenda ---- */
.cal-day{margin-top:28px}
.cal-dayh{display:flex;align-items:baseline;gap:10px;margin:0 0 10px;font:inherit}
.cal-dayh .label{font-size:.78rem;color:var(--cream)}
.cal-dayd{color:var(--cream-3);font-size:.92rem}
.cal-day.is-today .cal-dayh .label{color:var(--cream)}

.cal-items{list-style:none;margin:0;padding:0}
.cal-agenda .cal-items{background:var(--plum-2);border:1px solid var(--plum-3);border-radius:var(--r-2)}
.cal-item{display:grid;grid-template-columns:7rem 7.5rem minmax(0,15rem) minmax(0,1fr);align-items:center;gap:6px 16px;padding:12px 16px;min-width:0}
.cal-item+.cal-item{border-top:1px solid color-mix(in oklab,var(--plum-4) 60%,transparent)}
/* start over end: a 12-hour clock ("10:00 PM") and a later day ("Tue 27 Oct") both fit */
.cal-time{display:grid;gap:1px;font-weight:650;color:var(--cream);white-space:nowrap}
.cal-to{color:var(--cream-3);font-weight:400;font-size:.84rem}
.cal-to time{margin-left:3px}
.cal-who{display:flex;align-items:center;gap:10px;min-width:0;text-decoration:none}
.cal-who .av{width:32px;height:32px;font-size:.66rem;flex:none}
/* live right now: the rings avatars wear elsewhere (a plum gap, then cyan) */
.cal .av.is-live{box-shadow:0 0 0 2px var(--plum-2),0 0 0 4px var(--cyan)}
.cal-who .badge{flex:none}
.cal-name{font-weight:650;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cal-who:hover .cal-name{text-decoration:underline;text-decoration-color:var(--pink);text-underline-offset:.2em}
.cal-what{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 10px;min-width:0;color:var(--cream-2);font-size:.94rem}
.cal-what a,.cal-what>span:not(.badge):not(.cal-place):not(.cal-notes){overflow-wrap:anywhere}
.cal-place{color:var(--cream-3);font-size:.88rem}
.cal-notes{flex-basis:100%;color:var(--cream-3);font-size:.86rem;white-space:pre-line}
/* a scheduled stream's standing */
.cal-trust{flex-basis:100%;color:var(--cream-3);font-size:.82rem}
.cal-trust.is-new{font-style:italic}
.cal-from{margin:20px 0 0}
.cal-about p{margin:.4rem 0}

.cal-empty{margin-top:32px;padding:clamp(20px,3vw,32px);background:var(--plum-2);border:1px solid var(--plum-3);border-radius:var(--r-3);max-width:60ch}
.cal-empty p{color:var(--cream-2);margin:.6rem 0 0}
.cal-about{margin-top:40px;max-width:72ch}

/* ---- month ---- */
.cal-month{margin-top:18px}
.cal-month-bar{display:flex;align-items:center;gap:10px 14px;margin-bottom:14px;flex-wrap:wrap}
.cal-month-bar h2{min-width:11ch}
.cal-step{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:var(--r-2);border:1px solid var(--plum-4);background:var(--plum-2);text-decoration:none;color:var(--cream-2)}
.cal-step:hover{border-color:var(--pink);color:var(--cream)}
.cal-step.is-off{opacity:.35;pointer-events:none}
.cal-today{font-size:.9rem;color:var(--cream-2)}
.cal-month-bar h2{order:-1}
.cal-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px}
.cal-wd{font:800 .64rem var(--display);font-stretch:125%;letter-spacing:.08em;text-transform:uppercase;color:var(--cream-3);padding:0 8px 2px}
.cal-cell{min-height:118px;min-width:0;background:var(--plum-2);border:1px solid var(--plum-3);border-radius:var(--r-1);padding:7px 8px 8px}
.cal-cell.is-out{background:color-mix(in oklab,var(--plum-2) 45%,var(--plum-1));border-color:color-mix(in oklab,var(--plum-3) 60%,transparent)}
.cal-cell.is-out .cal-dnum,.cal-cell.is-past .cal-dnum{color:var(--cream-3)}
.cal-cell.is-today{border-color:var(--cream-3)}
.cal-date{display:flex;align-items:baseline;gap:8px;margin:0 0 6px;font:inherit}
.cal-dnum{font:800 .95rem var(--display);font-stretch:125%;color:var(--cream)}
.cal-dfull{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.cal-todaytag{font:800 .6rem var(--display);font-stretch:125%;letter-spacing:.08em;text-transform:uppercase;color:var(--plum-0);background:var(--cream);padding:1px 5px;border-radius:3px}
.cal-cell .cal-items{display:grid;grid-template-columns:minmax(0,1fr);gap:3px} /* lines never widen the cell */
.cal-chip a{display:flex;align-items:center;gap:5px;min-width:0;padding:3px 4px;margin:0 -3px;border-radius:5px;text-decoration:none;font-size:.8rem;line-height:1.25;color:var(--cream-2)}
.cal-chip a:hover{background:var(--plum-3);color:var(--cream)}
.cal-chip time{flex:none;color:var(--cream-3);font-size:.74rem}
.cal-chip svg{width:12px;height:12px}
.cal-chip .cal-name{font-weight:600;min-width:0;flex:0 1 auto} /* the name gives way: the count and the live dot stay in the cell */
.cal-chip-title{display:none}
.cal-chip.is-now a{box-shadow:inset 0 0 0 1px color-mix(in oklab,var(--cyan) 55%,transparent)}
/* a train several of the team's DJs are on: one line, the count after the train's name */
.cal-count{flex:none;color:var(--cream-3);font-size:.74rem}
/* time, train icon, "5 DJs on" on the first row; the train's name under them, aligned with the icon */
.cal-chip.is-train a{flex-wrap:wrap;row-gap:1px}
.cal-chip.is-train .cal-count{color:var(--cream-2);font-size:.76rem}
.cal-chip.is-train .cal-name{flex:1 1 100%;font-weight:600;color:var(--cream)}
/* a stream on a schedule we can't vouch for yet: quieter */
.cal-chip.is-new .cal-name{font-weight:500;color:var(--cream-3)}
/* live right now: a small LED after the name (the word is for screen readers and the agenda's badge) */
.cal-dot{flex:none;width:7px;height:7px;border-radius:50%;background:var(--cyan);box-shadow:0 0 0 2px color-mix(in oklab,var(--cyan) 22%,transparent)}
.cal-more a{display:inline-block;padding:2px 4px;margin:1px -3px 0;border-radius:5px;font-size:.76rem;font-weight:600;color:var(--cream-2);text-decoration:none}
.cal-more a:hover{background:var(--plum-3);color:var(--cream)}
/* the past days of this week stay, quieter */
.cal-cell.is-past{background:color-mix(in oklab,var(--plum-2) 55%,var(--plum-1))}
.cal-cell.is-past .cal-chip a,.cal-cell.is-past .cal-more a{color:var(--cream-3)}
.cal-cell.is-past .cal-chip .cal-name{font-weight:500}

@media (max-width:900px){
  .cal-item{grid-template-columns:7.5rem minmax(0,1fr);grid-template-areas:"time kind" "who who" "what what";align-items:start;gap:8px 12px}
  .cal-time{grid-area:time}.cal-kind{grid-area:kind;justify-self:start;margin-top:3px}.cal-who{grid-area:who}.cal-what{grid-area:what}
}
/* phones: the month is a list of the days that have something */
@media (max-width:760px){
  .cal-zone{margin:0;flex-basis:100%}
  .cal-grid{grid-template-columns:minmax(0,1fr);gap:8px}
  .cal-wd,.cal-cell.is-out,.cal-cell.is-empty:not(.is-today){display:none}
  .cal-cell{min-height:0;padding:10px 12px}
  .cal-dnum{display:none}
  .cal-dfull{position:static!important;width:auto;height:auto;overflow:visible;clip:auto;font:800 .74rem var(--display);font-stretch:125%;letter-spacing:.08em;text-transform:uppercase;color:var(--cream)}
  .cal-chip a{font-size:.9rem;padding:5px 4px}
  .cal-chip a{flex-wrap:wrap;align-items:baseline}
  .cal-chip time{font-size:.84rem;min-width:4.6rem}
  .cal-chip svg{align-self:center}
  .cal-chip.is-train .cal-name{padding-left:calc(4.6rem + 22px)} /* under the names in the other rows */
  .cal-chip-title{display:block;flex-basis:100%;padding-left:calc(4.6rem + 22px);color:var(--cream-3);font-size:.84rem;overflow-wrap:anywhere}
  .cal-types{width:100%;overflow-x:auto}
}
@media (prefers-reduced-motion:reduce){.cal-back span{transition:none}}

/* ---- /me: the DJ's events ---- */
.me-events{margin-top:56px;padding-top:32px;border-top:1px solid color-mix(in oklab,var(--plum-5) 45%,transparent)}
.me-events>.help{margin-top:.5rem;max-width:62ch}
.me-event-list{list-style:none;margin:18px 0 0;padding:0;background:var(--plum-2);border:1px solid var(--plum-3);border-radius:var(--r-2)}
.me-event{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 20px;padding:12px 16px}
.me-event+.me-event{border-top:1px solid color-mix(in oklab,var(--plum-4) 60%,transparent)}
.me-event.is-editing{background:var(--plum-3)}
.me-event-main{display:grid;gap:2px;min-width:0}
.me-event-title{font-weight:650;overflow-wrap:anywhere}
.me-event-when{color:var(--cream-2);font-size:.9rem}
.me-event-place{color:var(--cream-3);font-size:.88rem}
.me-event-acts{display:flex;align-items:center;gap:16px;font-size:.92rem}
.me-event-acts form{margin:0}
.me-event-acts .link-btn{color:var(--cream-2)}
.event-form{display:grid;gap:16px;margin-top:22px;padding:clamp(16px,2vw,22px);background:var(--plum-2);border:1px solid var(--plum-3);border-radius:var(--r-3)}
.event-form .label{font-size:.78rem}
.event-form .field-row{grid-template-columns:repeat(3,minmax(0,1fr))}
.event-form .field-row>:first-child{grid-column:auto}
.event-form input,.event-form select{min-width:0;width:100%}
.event-form input[type=datetime-local]{color-scheme:dark}
@media (max-width:640px){
  .event-form .field-row.event-times{grid-template-columns:minmax(0,1fr)}
  .event-form .field-row:not(.event-times){grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .event-form .field-row:not(.event-times)>:first-child{grid-column:1/-1}
}

/* ---- agenda: one week at a time ---- */
.cal-week-bar{margin-top:22px}
.cal-week-bar h2{order:-1;display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px}
.cal-wrange{font:400 1rem var(--ui);text-transform:none;letter-spacing:0;color:var(--cream-3)}
.cal-all{margin-left:auto;font-size:.9rem;color:var(--cream-2)}
.cal-dayn{margin:0 0 0 auto;font-size:.82rem}
/* a long day: the rest behind "Show N more" (a <details>, so it works without JS) */
.cal-rest{margin-top:6px}
.cal-rest summary{display:inline-flex;align-items:center;gap:6px;cursor:pointer;list-style:none;padding:6px 14px;border:1px solid var(--plum-5);border-radius:999px;font-size:.86rem;color:var(--cream-2);transition:border-color .2s,color .2s}
.cal-rest summary::-webkit-details-marker{display:none}
.cal-rest summary:hover{border-color:var(--pink);color:var(--cream)}
.cal-rest[open] summary{margin-bottom:6px}
.cal-rest .cal-rest-less,.cal-rest[open] .cal-rest-more{display:none}
.cal-rest[open] .cal-rest-less{display:inline}
.cal-next{margin-top:24px}
/* phones: the heading has its line, the arrows and links share the next */
@media (max-width:640px){
  .cal-week-bar h2{flex-basis:100%}
  .cal-all{margin-left:auto}
}
/* two raid train slots of one DJ at once: said in words, in coral (a conflict, like a form error) */
.cal-trust.is-clash{color:var(--red)}