/* Calendar tab: a straight list of gigs by month — poster, when, title, where */
.calv { max-width: 720px; margin: 0 auto; padding: 8px 0 32px; }
.calv__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; padding: 12px 16px 4px; }
.calv__title { margin: 0; font-size: 22px; line-height: 28px; font-weight: 700; }
.calv__chips { display: flex; gap: 8px; }
.calv__hint { flex: 1 1 100%; margin: 0; font-size: 13px; line-height: 18px; color: var(--color-ink-muted); }
.calv__hint a { color: var(--color-ink); font-weight: 700; text-decoration: none; }
.calv__month { margin-top: 8px; }
.calv__mlabel { margin: 0; padding: 14px 16px 8px; font-size: 13px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; color: var(--color-ink-muted); }
.calv__list { display: flex; flex-direction: column; background: var(--color-surface); }

.gig { position: relative; display: flex; align-items: center; gap: 14px; padding: 12px 16px; border-top: var(--hairline) solid var(--color-line); }
.calv__list .gig:first-child { border-top: 0; }
.gig.is-past { opacity: .6; }
.gig__poster { position: relative; flex: none; width: 84px; height: 84px; padding: 0; border-radius: 12px; overflow: hidden; background: var(--color-field); color: var(--color-ink-muted); display: grid; place-items: center; }
.gig__poster img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gig__poster > svg { width: 26px; height: 26px; }
.gig__day { position: absolute; left: 6px; top: 6px; min-width: 34px; padding: 3px 4px 2px; border-radius: 8px; background: var(--color-surface); color: var(--color-ink); text-align: center; line-height: 1; box-shadow: 0 1px 3px rgba(0, 0, 0, .18); }
.gig__day b { display: block; font-size: 15px; }
.gig__day small { display: block; margin-top: 2px; font-size: 9.5px; font-weight: 700; text-transform: uppercase; color: var(--color-ink-2); }
.gig__txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.gig__when { margin: 0; font-size: 13px; font-weight: 700; color: var(--color-ink-2); }
.gig__title { margin: 0; font-size: 16px; line-height: 21px; font-weight: 700; }
.gig__title button { padding: 0; font: inherit; color: inherit; text-align: left; overflow-wrap: anywhere; }
.gig__where { display: flex; align-items: center; margin: 0; font-size: 14px; color: var(--color-ink-2); }
.gig__where svg { width: 14px; height: 14px; margin-right: 4px; flex: none; color: var(--color-ink-muted); }
.gig__where > span { min-width: 0; }
.gig__where button { padding: 0; font: inherit; color: inherit; }
.gig__why { margin: 0; font-size: 12px; color: var(--color-ink-muted); }
.gig__rsvp, .gig__tag { flex: none; align-self: center; }

.calv__past { margin-top: 16px; }
.calv__past summary { list-style: none; cursor: pointer; padding: 14px 16px 8px; font-size: 13px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; color: var(--color-ink-muted); }
.calv__past summary::-webkit-details-marker { display: none; }
.calv__past summary small { font-weight: 400; margin-left: 4px; }
.calv__empty { padding: 48px 24px; }
.calv__cta { display: inline-flex; width: auto; margin-top: 16px; padding: 0 24px; }

/* Phones: the RSVP drops under the text so titles keep their width */
@media (max-width: 479px) {
  .gig { flex-wrap: wrap; align-items: flex-start; }
  .gig__poster { width: 76px; height: 76px; }
  .gig__txt { flex-basis: calc(100% - 90px); }
  .gig__rsvp, .gig__tag { margin-left: 90px; }
}
@media (min-width: 640px) {
  .calv__list { border-radius: 16px; box-shadow: 0 0 0 var(--hairline) var(--color-line); overflow: hidden; }
  .calv__month, .calv__past { padding: 0 16px; }
  .calv__mlabel, .calv__past summary { padding-left: 0; }
  .gig__poster { width: 104px; height: 104px; }
  .gig__title { font-size: 17px; }
}
@media (hover: hover) and (pointer: fine) {
  .gig:hover { background: var(--color-hover); }
  .gig__title button:hover, .gig__where button:hover { text-decoration: underline; }
}

/* ---------- List | Month (phones choose, desktop shows both) ---------- */
.calv__head { position: relative; }
.calv__title { flex: 1; }
.cal-mode { display: inline-grid; grid-auto-flow: column; padding: 3px; border-radius: 12px; background: var(--color-field); }
.cal-mode button { width: 40px; height: 34px; display: grid; place-items: center; border-radius: 9px; color: var(--color-ink-muted); transition: background-color .15s ease, color .15s ease; }
.cal-mode button svg { width: 18px; height: 18px; }
.cal-mode button[aria-checked="true"] { background: var(--color-surface); color: var(--color-ink); box-shadow: 0 1px 3px rgba(17, 17, 28, 0.1), 0 0 0 var(--hairline) var(--color-line); }

.cmo { padding: 4px 16px 8px; }
.cmo__head { display: flex; align-items: center; gap: 4px; padding: 8px 0 10px; }
.cmo__title { flex: 1; margin: 0; font-size: 18px; line-height: 24px; font-weight: 700; text-transform: capitalize; }
.cmo__nav { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; color: var(--color-ink); }
.cmo__nav svg { width: 20px; height: 20px; }
.cmo__today { height: 32px; padding: 0 12px; margin-right: 4px; border-radius: 99px; font-size: 13px; font-weight: 600; color: var(--color-ink-2); box-shadow: inset 0 0 0 var(--hairline) var(--color-line-strong); }
.cmo__grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); row-gap: 2px; padding: 8px 6px 10px; border-radius: 16px; background: var(--color-surface); box-shadow: 0 0 0 var(--hairline) var(--color-line); touch-action: pan-y; }
.cmo__grid.is-in-r { animation: cmo-r .26s cubic-bezier(.2, .8, .2, 1); }
.cmo__grid.is-in-l { animation: cmo-l .26s cubic-bezier(.2, .8, .2, 1); }
@keyframes cmo-r { from { opacity: 0; transform: translateX(28px); } to { opacity: 1; transform: none; } }
@keyframes cmo-l { from { opacity: 0; transform: translateX(-28px); } to { opacity: 1; transform: none; } }
.cmo__wd { padding: 4px 0 6px; text-align: center; font-size: 12px; font-weight: 600; color: var(--color-ink-muted); text-transform: uppercase; }
.cmo__d { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 3px; height: 48px; padding-top: 4px; border-radius: 12px; color: var(--color-ink); -webkit-tap-highlight-color: transparent; }
.cmo__d span { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; font-size: 15px; font-variant-numeric: tabular-nums; transition: background-color .15s ease, color .15s ease; }
.cmo__d b { display: flex; gap: 3px; height: 5px; }
.cmo__d b i { width: 5px; height: 5px; border-radius: 50%; background: var(--color-ink-muted); }
.cmo__d b i.is-on { background: var(--color-accent); }
.cmo__d b i.is-off { background: transparent; box-shadow: inset 0 0 0 1px var(--color-ink-muted); }
.cmo__d.is-past span { color: var(--color-ink-muted); }
.cmo__d.has-gigs span { font-weight: 700; }
.cmo__d.is-today span { color: var(--color-accent-text); box-shadow: inset 0 0 0 1.5px var(--color-accent); }
.cmo__d.is-picked span { background: var(--color-ink); color: var(--color-bg); box-shadow: none; }
@media (hover: hover) and (pointer: fine) { .cmo__d:not(.is-picked):hover span { background: var(--color-hover); } .cmo__nav:hover, .cmo__today:hover { background: var(--color-hover); } }
.cmo__day { padding-top: 14px; }
.cmo__dlabel { margin: 0; padding: 0 0 8px; font-size: 13px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; color: var(--color-ink-muted); }
.cmo__none { margin: 0; padding: 18px 16px; border-radius: 16px; background: var(--color-surface); box-shadow: 0 0 0 var(--hairline) var(--color-line); font-size: 14px; color: var(--color-ink-muted); text-align: center; }
.calv.is-month .cmo__day .calv__list { border-radius: 16px; box-shadow: 0 0 0 var(--hairline) var(--color-line); overflow: hidden; }
@media (prefers-reduced-motion: reduce) { .cmo__grid { animation: none !important; } }

/* Desktop: the list and the month side by side; the toggle isn't needed */
@media (min-width: 1024px) {
  .cal-mode { display: none; }
  .calv.is-split { max-width: var(--page-w); padding: 28px var(--page-pad) 48px; }
  /* nothing booked: the hero carries the page, the month sits under it */
  .calv.is-split.is-empty .calv__body { display: block; }
  .calv.is-split.is-empty .calv__side { position: static; max-width: 420px; margin: 8px auto 0; }
  .calv.is-split.is-empty .calv__empty { padding-top: clamp(16px, 6vh, 72px); }
  .calv.is-split .calv__head { padding: 8px 0 4px; }
  .calv.is-split .calv__body { display: grid; grid-template-columns: 380px minmax(0, 1fr); gap: 32px; align-items: start; }
  .calv.is-split .calv__month, .calv.is-split .calv__past { padding: 0; }
  .calv__side { position: sticky; top: 16px; }
  .calv__side .cmo { padding: 0; }
  .calv__side .cmo__head { padding-top: 14px; }
  .calv__side .gig__poster { width: 64px; height: 64px; }
  .calv__side .gig__day { display: none; }
  .calv__side .gig { gap: 12px; padding: 10px 12px; }
  .calv__side .gig__title { font-size: 15px; line-height: 20px; }
}
.gig__tix { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; height: 30px; padding: 0 12px; border-radius: 999px; background: var(--color-field); color: var(--color-ink); font-size: 13px; font-weight: 700; text-decoration: none; }
.gig__tix svg { width: 14px; height: 14px; }
.gig__tag--draft { color: var(--color-ink-muted); }

/* ---------- Can't make it (away.js): marks in the month, who can't on a day, the bar, sheets ---------- */
.cmo__d.aw-pending span, .cmo__d.aw-block span { position: relative; }
.cmo__d.aw-block span { color: var(--color-danger); background: color-mix(in srgb, var(--color-danger) 10%, transparent); }
.cmo__d.aw-pending span { box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--color-warn) 70%, transparent); }
.cmo__d.aw-free span { text-decoration: underline dotted var(--color-ink-muted); text-underline-offset: 3px; }
.cmo__d.is-picked.aw-block span, .cmo__d.is-picked.aw-pending span { color: var(--color-bg); background: var(--color-ink); box-shadow: none; }
.aw-legend { display: flex; align-items: center; gap: 8px; margin: 8px 2px 0; font-size: 12px; color: var(--color-ink-muted); }
.aw-legend i { width: 14px; height: 14px; border-radius: 50%; background: color-mix(in srgb, var(--color-danger) 14%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-danger) 40%, transparent); }

.calv__head .calv__hint { order: 3; flex: 1 1 100%; }
.calv__head .cal-mode { order: 1; }
.aw-bar { order: 2; flex: 1 1 auto; justify-content: flex-end; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 4px; }
.aw-bar__cant { height: 36px; padding: 0 14px; gap: 8px; font-size: 14px; }
.aw-bar__cant svg { width: 16px; height: 16px; }
.aw-bar__wait { height: 32px; padding: 0 12px; border-radius: 99px; background: color-mix(in srgb, var(--color-warn) 14%, transparent); color: var(--color-warn); font-size: 13px; font-weight: 700; }
.aw-bar__hist { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 10px; border-radius: 99px; color: var(--color-ink-2); font-size: 13px; }
.aw-bar__hist svg { width: 14px; height: 14px; }
@media (hover: hover) { .aw-bar__hist:hover { background: var(--color-hover); } }

.aw-day { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.aw-day__h { margin: 0; font-size: 13px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; color: var(--color-ink-muted); }
.aw-day__add { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; height: 40px; padding: 0 14px; border-radius: 12px; box-shadow: inset 0 0 0 var(--hairline) var(--color-line-strong); color: var(--color-ink); font-size: 14px; font-weight: 600; }
.aw-day__add svg { width: 16px; height: 16px; }
.aw-list { display: flex; flex-direction: column; border-radius: 16px; background: var(--color-surface); box-shadow: 0 0 0 var(--hairline) var(--color-line); overflow: hidden; }
.aw-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; padding: 12px 14px; }
.aw-row + .aw-row { border-top: var(--hairline) solid var(--color-line); }
.aw-av { flex: none; width: 36px; height: 36px; font-size: 13px; }
.aw-row__txt { flex: 1 1 160px; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.aw-row__txt b { font-size: 15px; }
.aw-row__txt small { font-size: 13px; color: var(--color-ink-muted); }
.aw-st { align-self: flex-start; margin-top: 4px; padding: 2px 8px; border-radius: 99px; font-size: 12px; font-weight: 700; }
.aw-st--pending { background: color-mix(in srgb, var(--color-warn) 14%, transparent); color: var(--color-warn); }
.aw-st--block { background: color-mix(in srgb, var(--color-danger) 12%, transparent); color: var(--color-danger); }
.aw-st--free { background: var(--color-field); color: var(--color-ink-2); }
.aw-row__acts { display: flex; flex-wrap: wrap; gap: 6px; margin-left: 48px; }
.aw-act { height: 34px; padding: 0 12px; font-size: 13px; }
.aw-act--quiet { background: none; color: var(--color-ink-muted); }

.aw-sheet .dsheet__body { display: flex; flex-direction: column; gap: 10px; padding-bottom: 20px; }
.aw-dates { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.aw-f { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 700; color: var(--color-ink-muted); }
.aw-f input, .aw-other { width: 100%; min-width: 0; height: 46px; padding: 0 12px; border: 0; border-radius: 12px; background: var(--color-field); color: var(--color-ink); font: inherit; font-size: 16px; }
.aw-label { margin: 6px 0 0; font-size: 13px; font-weight: 700; color: var(--color-ink-muted); }
.aw-reasons { flex-wrap: wrap; }
.aw-note { display: flex; gap: 8px; align-items: flex-start; margin: 4px 0 0; font-size: 12.5px; line-height: 17px; color: var(--color-ink-muted); }
.aw-note svg { flex: none; width: 14px; height: 14px; margin-top: 1px; }
.aw-foot { grid-template-columns: 1fr; }
.aw-save { height: 48px; }
.aw-empty { margin: 8px 0; color: var(--color-ink-muted); font-size: 14px; list-style: none; }
.aw-logs { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; }
.aw-log { display: flex; gap: 10px; align-items: flex-start; padding: 10px 2px; border-top: var(--hairline) solid var(--color-line); }
.aw-log:first-child { border-top: 0; }
.aw-log .aw-av { width: 30px; height: 30px; font-size: 11px; }
.aw-log > span { display: flex; flex-direction: column; gap: 2px; min-width: 0; font-size: 14px; line-height: 19px; }
.aw-log small { font-size: 12px; color: var(--color-ink-muted); }
.aw-more { align-self: center; margin-top: 8px; }
.aw-more[hidden] { display: none; }
@media (min-width: 640px) { .fsheet.aw-sheet { align-items: center; } }
@media (min-width: 1024px) { .calv__head .calv__title { order: 0; } .aw-bar { order: 4; flex: 1 1 100%; justify-content: flex-start; } }
/* Phones (under Offers | Calendar): tip and List/Month stay on one row; "I can't" gets its own row below */
@media (max-width: 1023px) {
  .ob-seg ~ .calv .calv__head:has(.aw-bar) { flex-wrap: wrap; }
  .ob-seg ~ .calv .calv__head:has(.aw-bar) .page-tip { flex: 1 1 0; min-width: 0; }
  .ob-seg ~ .calv .calv__head .aw-bar { order: 5; flex: 1 1 100%; justify-content: flex-start; margin: 0 0 4px; }
}
@media (max-width: 479px) { .aw-bar__hist span { display: none; } .aw-bar__hist { width: 36px; justify-content: center; padding: 0; } .aw-bar__hist svg { width: 18px; height: 18px; } }

/* Phones: title and the list/month switch on one line, the filters on their own line under it (22 Oct) */
@media (max-width: 1023px) {
  .calv__head .calv__chips { order: 2; flex: 1 1 100%; overflow-x: auto; scrollbar-width: none; margin: 2px -16px 0; padding: 0 16px; }
  .calv__head .calv__chips::-webkit-scrollbar { display: none; }
  .calv__head .calv__chips .chip { flex: none; }
}
/* a filter that leaves nothing: a quiet card in the list, not the page hero */
.calv__empty--filter { padding: 40px 24px; border-radius: 16px; background: var(--color-surface); box-shadow: 0 0 0 var(--hairline) var(--color-line); margin: 8px 16px 0; }
@media (min-width: 1024px) { .calv__empty--filter { margin: 8px 0 0; } }

/* ---------- Fan planner: Moj plan | Prijedlozi, chips, the circle (25–500 km) ---------- */
.calv-seg { order: 2; flex: 1 1 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; border-radius: 22px; background: var(--color-field); }
.calv-seg button { height: 38px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; border-radius: 18px; font: inherit; font-size: 14px; font-weight: 600; color: var(--color-ink-2); }
.calv-seg button small { font-size: 12px; font-weight: 500; color: var(--color-ink-muted); }
.calv-seg button[aria-selected="true"] { background: var(--color-surface); color: var(--color-ink); box-shadow: 0 1px 3px rgba(0, 0, 0, .08), 0 0 0 var(--hairline) var(--color-line); }
.calv-seg button[aria-selected="true"] small { color: var(--color-ink-2); }
@media (hover: hover) { .calv-seg button:not([aria-selected="true"]):hover { color: var(--color-ink); } }
.calv__head .calv__chips { order: 3; flex: 1 1 100%; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.calv__chips .chip small.chip__n { margin-left: 6px; }

.calv-rad { order: 3; flex: 1 1 100%; display: flex; flex-direction: column; gap: 2px; padding: 4px 2px 0; }
.calv-rad__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 14px; }
.calv-rad__lab { display: inline-flex; align-items: center; gap: 6px; min-width: 0; color: var(--color-ink-2); }
.calv-rad__lab svg { width: 14px; height: 14px; flex: none; color: var(--color-ink-muted); }
.calv-rad__lab span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.calv-rad__row b { flex: none; font-size: 15px; }
.calv-rad__ticks { display: flex; justify-content: space-between; font-size: 11px; color: var(--color-ink-muted); }
.calv-rad__none { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; margin: 0; font-size: 14px; color: var(--color-ink-2); }
.calv-rad__none svg { width: 14px; height: 14px; color: var(--color-ink-muted); }
.calv-rad__none a { font-weight: 700; color: var(--color-ink); text-decoration: none; }
.calv-rad input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 28px; margin: 0; background: transparent; cursor: pointer; }
.calv-rad input[type="range"]::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: linear-gradient(90deg, var(--color-accent) var(--p), var(--color-field) var(--p)); }
.calv-rad input[type="range"]::-moz-range-track { height: 4px; border-radius: 2px; background: var(--color-field); }
.calv-rad input[type="range"]::-moz-range-progress { height: 4px; border-radius: 2px; background: var(--color-accent); }
.calv-rad input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 26px; height: 26px; margin-top: -11px; border-radius: 50%; background: var(--color-accent); box-shadow: 0 0 0 4px var(--color-bg), 0 2px 8px rgba(0, 0, 0, .18); }
.calv-rad input[type="range"]::-moz-range-thumb { width: 26px; height: 26px; border: 0; border-radius: 50%; background: var(--color-accent); box-shadow: 0 0 0 4px var(--color-bg), 0 2px 8px rgba(0, 0, 0, .18); }

/* Interested (bookmark) + Going, side by side */
.gig__acts { flex: none; align-self: center; display: flex; align-items: center; gap: 6px; }
.gig__int { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; color: var(--color-ink-2); background: var(--color-field); }
.gig__int svg { width: 16px; height: 16px; }
.gig__int.is-on { color: var(--color-accent-text); background: color-mix(in srgb, var(--color-accent) 16%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-accent) 45%, transparent); }
@media (hover: hover) { .gig__int:not(.is-on):hover { color: var(--color-ink); background: var(--color-hover); } }
@media (max-width: 479px) { .gig__acts { margin-left: 90px; } }
.calv__empty .em-acts { justify-content: center; }
.gig__acts .gig__rsvp { margin-left: 0; }

/* ---------- Calendar on the web (owner 24 Oct): the same frame as Tasks, Crew and Gig Match ----------
   Month on the left, the gigs on the right behind one glowing line; no boxes — the month is a quiet grid, gigs are rows. */
@media (min-width: 1024px) {
  .calv.is-split .calv__body { gap: 0; }
  .calv.is-split .calv__side { padding-right: 28px; }
  .calv.is-split .calv__side .cmo__grid { box-shadow: none; background: none; padding: 4px 0 8px; }
  .calv.is-split .calv__side .cmo__none { box-shadow: none; background: none; padding: 10px 0; text-align: left; }
  .calv.is-split .calv__side .calv__list, .calv.is-split.is-month .cmo__day .calv__list { box-shadow: none; border-radius: 0; background: none; }
  .calv.is-split .calv__body > :not(.calv__side) { position: relative; min-height: calc(100dvh - 160px); padding-left: 32px; }
  .calv.is-split .calv__body > :not(.calv__side)::before { content: ''; position: absolute; left: 0; top: 0; bottom: 28px; width: 1px; pointer-events: none;
    background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--color-accent) 70%, transparent) 22%, color-mix(in srgb, var(--color-accent) 70%, transparent) 78%, transparent);
    box-shadow: 0 0 12px 0.5px color-mix(in srgb, var(--color-accent) 45%, transparent); opacity: .75; }
  .calv.is-split .calv__body > :not(.calv__side) .calv__list { box-shadow: none; border-radius: 0; background: none; }
  .calv.is-split .calv__body > :not(.calv__side) .gig { padding: 14px 0; }
  .calv.is-split .calv__body > :not(.calv__side) .gig:first-child { border-top: 0; }
  /* nothing booked yet: same split — month left, the next step right */
  .calv.is-split.is-empty .calv__body { display: grid; }
  .calv.is-split.is-empty .calv__side { position: sticky; max-width: none; margin: 0; }
}