/* =====================================================================
   Calder Health · telehealth clinic on Candour
   The booking sections, the day and time picker, the summary, the
   "what happens next" list and the "won't do" list. Everything else is
   Candour's own kit. Prefix: cl-.
   ===================================================================== */

.sections.cl-stack { grid-template-columns: 1fr; }
.sections.cl-stack li + li { border-left: 0; border-top: 1px solid var(--line); }

/* ---------- what we won't do ---------- */
.cl-wont { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 32px; border-top: 2px solid var(--ink); }
.cl-wont p { display: flex; gap: 14px; align-items: flex-start; padding: 18px 0; border-bottom: 1px solid var(--line); font: 600 18px/1.35 var(--display); }
.cl-wont svg { flex: none; width: 22px; height: 22px; margin-top: 1px; padding: 3px; border-radius: 50%; background: var(--claret-soft); color: var(--claret); }
@media (max-width: 760px) { .cl-wont { grid-template-columns: 1fr; } }

/* ---------- booking ---------- */
.cl-book-sec { padding-top: clamp(32px, 4vw, 56px); }
.cl-book { max-width: 820px; margin-inline: auto; }
.cl-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: 18px; border: 1.5px solid var(--ink); border-radius: var(--r-s); overflow: hidden; background: var(--card); counter-reset: s; }
.cl-steps li { counter-increment: s; display: flex; gap: 8px; align-items: center; padding: 10px 12px; font: 500 13px/1.2 var(--mono); color: var(--muted); }
.cl-steps li + li { border-left: 1px solid var(--line); }
.cl-steps li::before { content: counter(s, upper-alpha); display: grid; place-items: center; flex: none; width: 20px; height: 20px; border-radius: 3px; border: 1.5px solid currentColor; font-weight: 600; }
.cl-steps li.done { color: var(--ink); }
.cl-steps li.done::before { content: "✓"; background: var(--ink); border-color: var(--ink); color: var(--paper); }
.cl-steps li[aria-current="step"] { color: var(--ink); background: var(--claret-soft); }
.cl-steps li[aria-current="step"]::before { background: var(--claret); border-color: var(--claret); color: var(--on-claret); }
html:not(.calm) .cl-panel.arrive { animation: cl-in 0.5s var(--ease); }
@keyframes cl-in { from { opacity: 0; transform: translateY(10px); } }
.cl-h:focus { outline: none; }
.cl-nav { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 18px; border-top: 1px solid var(--rule); }
.cl-need { font-weight: 600; color: var(--alert); }
.cl-note { padding: 14px 16px; border-radius: var(--r-s); background: var(--pen-soft); color: var(--ink-2); }
.cl-days { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 6px; scrollbar-width: none; }
.cl-days::-webkit-scrollbar { display: none; }
.cl-days button { flex: none; display: grid; justify-items: center; gap: 2px; min-width: 70px; padding: 10px; border-radius: var(--r-s); border: 1.5px solid var(--line); background: var(--card); font: 500 12px/1.2 var(--mono); text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); cursor: pointer; }
.cl-days button b { font: 700 22px/1.1 var(--display); color: var(--ink); text-transform: none; letter-spacing: -0.02em; }
.cl-days button:hover { border-color: var(--ink-2); }
.cl-days button[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: color-mix(in srgb, var(--paper) 70%, transparent); }
.cl-days button[aria-pressed="true"] b { color: var(--paper); }
.cl-slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 8px; min-height: 52px; }
.cl-slots button { padding: 11px 8px; border-radius: var(--r-s); border: 1.5px solid var(--line); border-bottom-color: var(--ink); background: var(--card); font: 500 15px/1 var(--mono); color: var(--ink); cursor: pointer; transition: border-color var(--d-fast), background var(--d-fast); }
.cl-slots button:hover:not(:disabled) { border-color: var(--claret); }
.cl-slots button[aria-pressed="true"] { background: var(--claret); border-color: var(--claret); color: var(--on-claret); }
.cl-slots button:disabled { opacity: 0.35; text-decoration: line-through; cursor: not-allowed; }
.cl-slots .cl-empty { grid-column: 1 / -1; color: var(--muted); }
.cl-summary { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; border-top: 2px solid var(--ink); }
.cl-summary > div { padding: 12px 0; border-bottom: 1px solid var(--rule); }
.cl-summary > div:nth-child(odd) { padding-right: 16px; }
.cl-summary dt { font: 500 12px/1.2 var(--mono); letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); }
.cl-summary dd { margin: 4px 0 0; font: 600 17px/1.3 var(--display); }
.cl-summary .cl-fee dd { font-size: 24px; color: var(--claret); }
.cl-done { display: grid; gap: 18px; justify-items: start; padding: clamp(24px, 4vw, 44px); border-radius: var(--r-m); background: var(--card); box-shadow: var(--shadow-paper); }
.cl-next { width: 100%; border-top: 2px solid var(--ink); }
.cl-next li { display: grid; grid-template-columns: 170px 1fr; gap: 4px 20px; padding: 14px 0; border-bottom: 1px solid var(--rule); }
.cl-next b { font: 500 14px/1.4 var(--mono); color: var(--pen); }
@media (max-width: 640px) {
  .cl-steps li { font-size: 11px; padding: 8px; }
  .cl-steps li span { display: none; }
  .cl-summary { grid-template-columns: 1fr; }
  .cl-next li { grid-template-columns: 1fr; }
  .cl-nav .btn { padding-inline: 16px; }
}