/* Coaching booking — Warm Elegant (maps existing class names) */

.coaching-page {
  --bg-local: var(--bg, #FDFBF7);
  --surface: var(--s1, #fff);
  --surface-2: var(--s2, #F5F2EC);
  --text: var(--text-1, #1A1A2E);
  --muted: var(--text-2, #5C5C72);
  --line: var(--border, rgba(26, 26, 46, 0.08));
  --accent: var(--brand-secondary, #1AB894);
  --danger: #C44;
  min-height: 100dvh;
  margin: 0;
  font-family: var(--font-body);
  color: var(--text);
  background: var(--ambient-radial), var(--ambient-radial-teal), var(--bg-local);
}

.coaching-page * { box-sizing: border-box; }

.coaching-page .wrap { max-width: 980px; margin: 0 auto; padding: 20px 16px 48px; }
.coaching-page .header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.coaching-page .title { margin: 0; font-family: var(--font-display); font-size: clamp(22px, 4vw, 28px); font-weight: 600; letter-spacing: var(--tracking-tight); line-height: 1.2; }
.coaching-page .sub { margin: 4px 0 0; color: var(--muted); font-size: 13px; }

.coaching-page .btn {
  border: 1px solid var(--line); background: var(--surface); color: var(--text);
  border-radius: var(--r-md, 12px); padding: 10px 14px; font-size: 13px; font-weight: 600;
  cursor: pointer; text-decoration: none; display: inline-flex; align-items: center;
  transition: border-color var(--ease-ui), background var(--ease-ui);
}
.coaching-page .btn:hover { border-color: color-mix(in srgb, var(--accent) 35%, transparent); }
.coaching-page .btn-primary { background: var(--brand-secondary); color: #fff; border: none; box-shadow: var(--shadow-teal); }
.coaching-page .btn-danger { border-color: rgba(196, 68, 68, 0.35); color: var(--danger); background: rgba(196, 68, 68, 0.06); }

.coaching-page .grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 14px; }
.coaching-page .card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg, 16px); padding: 14px; box-shadow: var(--shadow-sm); }
.coaching-page .card h2 { margin: 0 0 10px; font-size: 11px; letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--muted); font-weight: 600; }

.coaching-page .item-list { display: flex; flex-direction: column; gap: 8px; max-height: 280px; overflow: auto; padding-right: 2px; }
.coaching-page .item {
  border: 1px solid var(--line); border-radius: var(--r-md, 12px); padding: 10px 12px;
  background: var(--bg-local); cursor: pointer; text-align: left; width: 100%; font: inherit; color: inherit;
  transition: border-color var(--ease-ui), background var(--ease-ui);
}
.coaching-page .item.active { border-color: color-mix(in srgb, var(--accent) 50%, transparent); background: var(--brand-secondary-dim); }
.coaching-page .item .kicker { margin: 0 0 4px; color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; }
.coaching-page .item .headline { margin: 0; font-size: 14px; font-weight: 700; line-height: 1.35; }
.coaching-page .item .meta { margin: 6px 0 0; font-size: 12px; color: var(--muted); }

.coaching-page .controls { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.coaching-page .consent { display: flex; align-items: center; gap: 8px; margin-top: 12px; font-size: 12px; color: var(--muted); }
.coaching-page .status { margin-top: 10px; min-height: 18px; font-size: 12px; color: var(--muted); }
.coaching-page .status.error { color: var(--danger); }
.coaching-page .status.ok { color: var(--accent); }

.coaching-page .summary {
  white-space: pre-wrap; font-size: 12px; line-height: 1.55; color: var(--text);
  background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-sm, 10px);
  padding: 10px; max-height: 180px; overflow: auto;
}

.coaching-page .pill {
  display: inline-flex; align-items: center; padding: 4px 10px; border-radius: var(--r-pill, 999px);
  font-size: 11px; border: 1px solid var(--line); color: var(--muted); margin-right: 6px; margin-bottom: 6px; background: var(--bg-local);
}

.coaching-page .booking-list { display: flex; flex-direction: column; gap: 8px; max-height: 220px; overflow: auto; }
.coaching-page .booking {
  border: 1px solid var(--line); border-radius: var(--r-sm, 10px); padding: 10px; font-size: 12px;
  cursor: pointer; background: var(--bg-local); width: 100%; text-align: left; font: inherit; color: inherit;
}
.coaching-page .booking.active { border-color: color-mix(in srgb, var(--accent) 50%, transparent); background: var(--brand-secondary-dim); }
.coaching-page .muted { color: var(--muted); }

@media (max-width: 920px) { .coaching-page .grid { grid-template-columns: 1fr; } }