/* ===== COLLABORATION ===== */

/* Hero */
.collab-hero { position: relative; overflow: hidden; padding-block: clamp(3rem, 7vw, 6rem) clamp(2.5rem, 6vw, 5rem); }
.collab-hero__inner { position: relative; z-index: 2; max-width: 920px; }
.collab-hero__title { font-size: clamp(2.8rem, 9vw, 6.5rem); text-transform: uppercase; line-height: .9; margin: 1rem 0 1.2rem; }
.paths { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-top: 2.4rem; }
.path {
  text-align: left; padding: 1.6rem; border-radius: var(--r-lg); border: 1px solid var(--line);
  background: linear-gradient(180deg, var(--surface), var(--bg-2)); transition: transform .35s var(--ease), border-color .35s;
  display: flex; flex-direction: column;
}
.path:hover { transform: translateY(-6px); border-color: var(--flame-2); }
.path__ico { font-size: 1.8rem; }
.path h3 { font-family: var(--display); font-weight: 700; font-size: 1.2rem; margin: .8rem 0 .4rem; }
.path p { color: var(--muted); font-size: .9rem; flex: 1; }
.path__go { margin-top: 1rem; font-weight: 600; font-size: .88rem; color: var(--flame-2); }
@media (max-width: 780px) { .paths { grid-template-columns: 1fr; } }

/* Wizard */
.wiz { max-width: 900px; margin-inline: auto; border: 1px solid var(--line-strong); border-radius: var(--r-xl); background: var(--bg-2); overflow: hidden; box-shadow: var(--sh-2); }
.wiz__steps { display: flex; border-bottom: 1px solid var(--line); background: #140f18; }
.wiz__steps li { flex: 1; display: flex; align-items: center; justify-content: center; gap: .5rem; padding: 1rem .5rem; font-family: var(--mono); font-size: .74rem; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); position: relative; }
.wiz__steps li span { width: 24px; height: 24px; border-radius: 50%; border: 1px solid var(--line-strong); display: grid; place-items: center; font-size: .72rem; transition: .3s; }
.wiz__steps li.is-active { color: var(--text); }
.wiz__steps li.is-active span { background: var(--grad-flame); color: #1b0f08; border-color: transparent; }
.wiz__steps li.is-done span { background: var(--text); color: var(--ink); border-color: var(--text); }
.wiz__steps li.is-done span::before { content: "✓"; }
@media (max-width: 640px) { .wiz__steps li { flex-direction: column; font-size: .6rem; gap: .3rem; } }

.wiz__body { padding: clamp(1.4rem, 4vw, 2.6rem); min-height: 340px; }
.wiz__panel { display: none; animation: panelIn .4s var(--ease); }
.wiz__panel.is-active { display: block; }
@keyframes panelIn { from { opacity: 0; transform: translateY(12px); } }
.wiz__h { font-family: var(--display); font-weight: 700; font-size: clamp(1.4rem, 3.4vw, 2rem); margin-bottom: 1.4rem; }

/* format cards */
.fmt-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.fmt { text-align: center; padding: 1.6rem 1rem; border-radius: var(--r-lg); border: 1.5px solid var(--line-strong); background: var(--surface); transition: .25s var(--ease); display: flex; flex-direction: column; gap: .3rem; }
.fmt span { font-size: 1.8rem; } .fmt b { font-family: var(--display); font-weight: 700; font-size: 1rem; margin-top: .3rem; } .fmt small { color: var(--muted); font-size: .8rem; }
.fmt:hover { border-color: var(--flame-2); transform: translateY(-4px); }
.fmt.is-active { border-color: var(--flame-2); background: rgba(255,176,32,.08); box-shadow: 0 0 0 3px rgba(255,176,32,.15); }
@media (max-width: 640px) { .fmt-grid { grid-template-columns: 1fr; } }

/* form */
.wiz__form { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }
.field--full { grid-column: 1 / -1; }
@media (max-width: 560px) { .wiz__form { grid-template-columns: 1fr; } }

/* date */
.date-wrap { display: grid; grid-template-columns: 1.3fr 1fr; gap: 1.6rem; }
.cal { border: 1px solid var(--line); border-radius: var(--r-lg); padding: 1.2rem; background: var(--surface); }
.cal__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; }
.cal__head strong { font-family: var(--display); font-weight: 700; }
.cal__nav { width: 36px; height: 36px; border-radius: 10px; border: 1px solid var(--line-strong); color: var(--text); font-size: 1.2rem; }
.cal__nav:hover:not(:disabled) { background: var(--surface-2); border-color: var(--flame-2); }
.cal__nav:disabled { opacity: .3; cursor: not-allowed; }
.cal__dow { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; margin-bottom: 6px; }
.cal__dow span { text-align: center; font-family: var(--mono); font-size: .68rem; color: var(--faint); }
.cal__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.cal__cell { aspect-ratio: 1; border-radius: 10px; display: grid; place-items: center; font-size: .9rem; position: relative; border: 1px solid transparent; }
.cal__cell.free { background: rgba(255,255,255,.03); border-color: var(--line-strong); color: var(--text); cursor: pointer; transition: .2s; }
.cal__cell.free:hover { border-color: var(--flame-2); background: rgba(255,176,32,.08); }
.cal__cell.busy { color: var(--faint); text-decoration: line-through; cursor: not-allowed; }
.cal__cell.busy::after { content: ""; position: absolute; bottom: 5px; width: 5px; height: 5px; border-radius: 50%; background: var(--pink); }
.cal__cell.off { color: var(--faint); opacity: .45; cursor: not-allowed; }
.cal__cell.empty { visibility: hidden; }
.cal__cell.is-selected { background: var(--grad-flame); color: #1b0f08; border-color: transparent; font-weight: 700; }
.cal__legend { display: flex; gap: 1rem; flex-wrap: wrap; margin-top: 1rem; font-family: var(--mono); font-size: .68rem; color: var(--muted); }
.dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 4px; }
.dot--free { background: var(--flame-2); } .dot--busy { background: var(--pink); } .dot--off { background: var(--faint); }

.slots { border: 1px solid var(--line); border-radius: var(--r-lg); padding: 1.4rem; background: var(--surface); }
.slots__label { font-family: var(--mono); font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--faint); margin-bottom: .4rem; }
.slots__date { font-family: var(--display); font-weight: 700; font-size: 1.1rem; margin-bottom: 1.4rem; color: var(--flame-2); }
.slots__list { display: flex; flex-direction: column; gap: .6rem; }
.slot { text-align: left; padding: .9rem 1rem; border-radius: var(--r-sm); border: 1px solid var(--line-strong); background: rgba(255,255,255,.02); display: flex; align-items: center; gap: .6rem; transition: .2s; font-weight: 600; }
.slot small { color: var(--faint); font-weight: 400; margin-left: auto; font-family: var(--mono); }
.slot:hover { border-color: var(--flame-2); }
.slot.is-active { background: var(--text); color: var(--ink); border-color: var(--text); }
.slot.is-active small { color: #6b5b63; }
@media (max-width: 720px) { .date-wrap { grid-template-columns: 1fr; } }

/* review */
.review { display: grid; gap: .8rem; }
.review__row { display: flex; justify-content: space-between; gap: 1rem; padding: .9rem 1.1rem; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface); }
.review__row span { color: var(--muted); font-family: var(--mono); font-size: .74rem; letter-spacing: .08em; text-transform: uppercase; }
.review__row b { text-align: right; font-weight: 600; }
.review__check { display: flex; gap: .6rem; align-items: flex-start; margin-top: 1.2rem; color: var(--muted); font-size: .88rem; }
.review__check input { margin-top: .2rem; accent-color: var(--flame-1); width: 18px; height: 18px; }

/* done */
.wiz__done { text-align: center; }
.done__mark { width: 90px; height: 90px; border-radius: 50%; background: var(--grad-heat); display: grid; place-items: center; margin: 0 auto 1.4rem; }
.done__mark .wave { height: 40px; } .done__mark .wave i { background: rgba(27,15,8,.85); width: 5px; }
.wiz__done p { color: var(--muted); max-width: 44ch; margin: 0 auto .6rem; }
.done__ref { font-family: var(--mono); }
.done__ref b { color: var(--flame-2); }
.done__actions { display: flex; gap: .8rem; justify-content: center; margin-top: 1.6rem; flex-wrap: wrap; }

/* wiz nav */
.wiz__nav { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.2rem clamp(1.4rem, 4vw, 2.6rem); border-top: 1px solid var(--line); background: #140f18; }
.wiz__err { color: var(--pink); font-size: .85rem; font-family: var(--mono); text-align: center; flex: 1; }
.wiz__nav.hide-back #wizBack { visibility: hidden; }

/* expect */
.expect__head { margin-bottom: 2.6rem; }
.expect__steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.2rem; counter-reset: step; }
.expect__steps li { padding: 1.4rem; border-radius: var(--r-lg); background: #fff; border: 1px solid rgba(25,16,22,.08); }
.expect__n { font-family: var(--mono); font-weight: 700; color: var(--flame-1); font-size: .95rem; }
.expect__steps h3 { font-family: var(--display); font-weight: 700; color: var(--ink); font-size: 1.15rem; margin: .6rem 0 .4rem; }
.expect__steps p { color: #5b4d55; font-size: .9rem; }
@media (max-width: 780px) { .expect__steps { grid-template-columns: 1fr 1fr; } }
@media (max-width: 460px) { .expect__steps { grid-template-columns: 1fr; } }

/* faq */
.faq__inner { display: grid; grid-template-columns: .8fr 1.2fr; gap: 3rem; align-items: start; }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__item summary { list-style: none; cursor: pointer; padding: 1.2rem 0; font-family: var(--display); font-weight: 600; font-size: 1.1rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__plus { position: relative; width: 18px; height: 18px; flex: none; }
.faq__plus::before, .faq__plus::after { content: ""; position: absolute; background: var(--flame-2); border-radius: 2px; transition: transform .3s var(--ease); }
.faq__plus::before { top: 8px; left: 0; width: 18px; height: 2px; }
.faq__plus::after { top: 0; left: 8px; width: 2px; height: 18px; }
.faq__item[open] .faq__plus::after { transform: rotate(90deg); opacity: 0; }
.faq__item p { color: var(--muted); font-size: .95rem; padding: 0 0 1.3rem; max-width: 60ch; }
@media (max-width: 780px) { .faq__inner { grid-template-columns: 1fr; gap: 1.5rem; } }