/* =====================================================================
   Moonwell Health · telehealth clinic on Vigil
   The booking steps, day and time picker, device check, fee calculator,
   the next-appointment card and the waiting room. Everything else is
   Vigil's own kit. Prefix: mw-.
   ===================================================================== */

/* ---------- "not by telehealth" ---------- */
.mw-not { display: grid; grid-template-columns: auto 1fr; gap: 16px; margin-top: 28px; padding: 22px 24px; border-radius: var(--r-l); background: color-mix(in srgb, var(--alert) 7%, var(--card)); border: 1px solid color-mix(in srgb, var(--alert) 22%, var(--line)); }
.mw-not-ic { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; background: color-mix(in srgb, var(--alert) 14%, transparent); color: var(--alert); }
.mw-not-ic svg { width: 22px; height: 22px; }
.mw-not ul { display: grid; gap: 6px; margin-top: 10px; color: var(--ink-2); }
.mw-not li { position: relative; padding-left: 18px; }
.mw-not li::before { content: ""; position: absolute; left: 2px; top: 0.7em; width: 6px; height: 6px; border-radius: 50%; background: var(--alert); }

/* ---------- fee calculator ---------- */
.mw-calc { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.9fr); gap: 0; border-radius: var(--r-l); background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow-card); overflow: hidden; }
.mw-calc-q { display: grid; gap: 22px; padding: clamp(22px, 3vw, 34px); }
.mw-calc-a { display: grid; align-content: center; gap: 10px; padding: clamp(22px, 3vw, 34px); background: var(--night); color: var(--night-ink); }
.mw-calc-a .time { font-size: 13px; color: var(--night-muted); }
.mw-calc-a b { font: 600 clamp(48px, 6vw, 72px)/1 var(--display); letter-spacing: -0.04em; color: var(--moon-2); text-shadow: 0 0 30px color-mix(in srgb, var(--moon) 40%, transparent); }
html:not(.calm) .mw-calc-a b.swap { animation: mw-bump 0.5s var(--ease); }
@keyframes mw-bump { 40% { transform: translateY(-5px); opacity: 0.5; } }
.mw-calc-a p { color: #c4ccdd; font-size: 15.5px; }
@media (max-width: 860px) { .mw-calc { grid-template-columns: 1fr; } }

/* ---------- booking ---------- */
.mw-book-sec { padding-top: clamp(32px, 4vw, 56px); }
.mw-book { max-width: 820px; margin-inline: auto; }
.mw-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-bottom: 20px; }
.mw-steps li { display: grid; gap: 8px; font: 500 13px/1.2 var(--mono); color: var(--muted); }
.mw-steps li::before { content: ""; height: 4px; border-radius: 4px; background: var(--line); transition: background var(--d) var(--ease); }
.mw-steps li.done, .mw-steps li[aria-current="step"] { color: var(--ink); }
.mw-steps li.done::before { background: var(--ink); }
.mw-steps li[aria-current="step"]::before { background: var(--lamp); box-shadow: 0 0 10px color-mix(in srgb, var(--glow) 70%, transparent); }
html:not(.calm) .mw-panel.arrive { animation: mw-panel 0.5s var(--ease); }
@keyframes mw-panel { from { opacity: 0; transform: translateX(var(--from, 24px)); } }
.mw-h:focus { outline: none; }
.mw-nav { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 18px; border-top: 1px solid var(--line); }
.mw-need { font-weight: 700; color: var(--alert); }
.mw-days { display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 6px; scrollbar-width: none; }
.mw-days::-webkit-scrollbar { display: none; }
.mw-days button { flex: none; display: grid; justify-items: center; gap: 2px; min-width: 74px; padding: 10px 12px; border-radius: var(--r-m); border: 1.5px solid var(--line); background: var(--card); font: 500 12.5px/1.2 var(--mono); color: var(--muted); cursor: pointer; transition: border-color var(--d-fast), background var(--d-fast); }
.mw-days button b { font: 600 22px/1.1 var(--display); color: var(--ink); }
.mw-days button:hover { border-color: color-mix(in srgb, var(--ink) 35%, var(--line)); }
.mw-days button[aria-pressed="true"] { background: var(--night); border-color: var(--night); color: var(--night-muted); }
.mw-days button[aria-pressed="true"] b { color: var(--moon-2); }
.mw-slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 8px; min-height: 92px; }
.mw-slots .mw-part { grid-column: 1 / -1; margin-top: 8px; font: 500 13px/1.2 var(--mono); color: var(--muted); }
.mw-slots .mw-part:first-child { margin-top: 0; }
.mw-slots button { padding: 11px 8px; border-radius: var(--r-s); border: 1.5px solid var(--line); background: var(--card); font: 500 15px/1 var(--mono); font-variant-numeric: tabular-nums; color: var(--ink); cursor: pointer; transition: border-color var(--d-fast), background var(--d-fast), transform var(--d-fast) var(--ease); }
.mw-slots button:hover:not(:disabled) { border-color: var(--lamp); transform: translateY(-1px); }
.mw-slots button.next { border-color: color-mix(in srgb, var(--lamp) 60%, var(--line)); }
.mw-slots button[aria-pressed="true"] { background: var(--lamp); border-color: var(--lamp); color: var(--on-lamp); box-shadow: 0 6px 18px -8px var(--glow); }
.mw-slots button:disabled { opacity: 0.35; text-decoration: line-through; cursor: not-allowed; }
.mw-slots .mw-empty { grid-column: 1 / -1; align-self: center; color: var(--muted); }
html:not(.calm) .mw-slots button { animation: mw-in 0.4s var(--ease) both; animation-delay: calc(var(--i, 0) * 18ms); }
@keyframes mw-in { from { opacity: 0; transform: translateY(6px); } }

.mw-check { display: grid; border-radius: var(--r-m); border: 1px solid var(--line); overflow: hidden; }
.mw-row { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 6px 12px; padding: 14px 18px; font-weight: 500; }
.mw-row + .mw-row { border-top: 1px solid var(--line); }
.mw-row em { font: 500 13.5px/1.2 var(--mono); font-style: normal; color: var(--muted); }
.mw-dot { width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--line); }
.mw-row.busy .mw-dot { border-color: var(--lamp); border-top-color: transparent; animation: mw-spin 0.8s linear infinite; }
.mw-row.ok .mw-dot { border-color: var(--live); background: var(--live); }
.mw-row.ok em { color: var(--live); }
@keyframes mw-spin { to { transform: rotate(360deg); } }
.mw-meter { grid-column: 2 / -1; display: flex; gap: 3px; align-items: flex-end; height: 16px; }
.mw-meter i { flex: 1; height: 18%; border-radius: 2px; background: var(--line); transition: height 0.12s linear; }
.mw-row.ok .mw-meter i, .mw-row.busy .mw-meter i { background: var(--lamp); }
.mw-summary:empty { display: none; }
.mw-summary { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 24px; padding: 18px 20px; border-radius: var(--r-m); background: var(--well); }
.mw-summary span { display: block; font: 500 12.5px/1.2 var(--mono); color: var(--muted); }
.mw-summary b { display: block; margin-top: 3px; font: 600 17px/1.3 var(--display); }
.mw-summary .mw-fee b { font-size: 24px; color: var(--lamp); }

.mw-done { position: relative; isolation: isolate; overflow: hidden; display: grid; gap: 18px; justify-items: start; padding: clamp(26px, 4vw, 48px); border-radius: var(--r-l); background: var(--night); color: var(--night-ink); box-shadow: var(--shadow-lift), inset 0 0 0 1px var(--night-line); }
.mw-done::before { content: ""; position: absolute; z-index: -1; right: -15%; top: -45%; width: 70%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--moon) 35%, transparent), transparent 65%); }
.mw-done .h2 { color: var(--night-ink); }
.mw-done .h2 em { color: var(--moon-2); }
.mw-done .tag { color: var(--night-muted); }
.mw-done p { color: #c4ccdd; }
.mw-done .btn-lamp { background: var(--moon); color: var(--on-moon); }
.mw-done .btn-line { border-color: rgba(238, 242, 250, 0.35); color: var(--night-ink); }
.mw-appt { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px 24px; width: 100%; padding: 18px 0; border-block: 1px solid var(--night-line); }
.mw-appt dt { font: 500 12.5px/1.2 var(--mono); color: var(--night-muted); }
.mw-appt dd { margin: 4px 0 0; font: 600 18px/1.3 var(--display); }
.mw-fine { font: 500 12.5px/1.4 var(--mono); }
.mw-done :focus-visible { outline-color: #a9adff; }

/* ---------- my appointments ---------- */
.mw-appts { padding-top: clamp(32px, 4vw, 56px); }
.mw-next { position: relative; isolation: isolate; overflow: hidden; display: grid; gap: 18px; justify-items: start; padding: clamp(24px, 4vw, 44px); border-radius: var(--r-l); background: var(--night); color: var(--night-ink); box-shadow: var(--shadow-lift), inset 0 0 0 1px var(--night-line); }
.mw-next::before { content: ""; position: absolute; z-index: -1; right: -10%; top: -50%; width: 60%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--moon) 28%, transparent), transparent 65%); transition: opacity var(--d-slow); opacity: 0.5; }
.mw-next.ready::before { opacity: 1; }
.mw-next-top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.mw-status { padding: 5px 12px; border-radius: var(--r-pill); border: 1px solid var(--night-line); font: 500 12.5px/1.2 var(--mono); color: var(--night-muted); }
.mw-next.ready .mw-status { border-color: #4fd6a0; color: #4fd6a0; }
.mw-who { font: 500 14px/1.3 var(--mono); color: var(--night-muted); }
.mw-count .time { display: block; font-size: 13px; color: var(--night-muted); }
.mw-count b { display: block; margin-top: 4px; font: 600 clamp(56px, 8vw, 104px)/1 var(--display); letter-spacing: -0.045em; font-variant-numeric: tabular-nums; }
.mw-next.ready .mw-count b { color: var(--moon-2); text-shadow: 0 0 40px color-mix(in srgb, var(--moon) 45%, transparent); }
.mw-join-note { color: #c4ccdd; }
.mw-next .btn-lamp { background: var(--moon); color: var(--on-moon); }
.mw-next .mw-line { border-color: rgba(238, 242, 250, 0.3); color: var(--night-ink); }
.mw-next .mw-line:hover { border-color: var(--night-ink); background: rgba(255, 255, 255, 0.06); }
html:not(.calm) .mw-next.ready [data-join]:not(:disabled) { animation: mw-glow 2.4s var(--soft) infinite; }
@keyframes mw-glow { 50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--moon) 18%, transparent), 0 0 34px color-mix(in srgb, var(--moon) 55%, transparent); } }
.mw-resched { display: grid; gap: 10px; width: 100%; padding-top: 16px; border-top: 1px solid var(--night-line); }
.mw-resched .time { color: var(--night-muted); font-size: 13px; }
.mw-rs { display: flex; flex-wrap: wrap; gap: 8px; }
.mw-rs button { padding: 10px 14px; border-radius: var(--r-pill); border: 1px solid var(--night-line); background: rgba(255, 255, 255, 0.04); color: var(--night-ink); font: 500 14px/1 var(--mono); cursor: pointer; }
.mw-rs button:hover { border-color: var(--moon); }
.mw-msg { width: 100%; padding: 14px 16px; border-radius: var(--r-m); background: rgba(255, 255, 255, 0.06); color: #dfe5f1; }
.mw-msg a { color: var(--moon-2); }
.mw-msg .actions { margin-top: 10px; }
.mw-skip { margin-top: 4px; border-color: var(--night-line); background: transparent; color: var(--night-muted); }
.mw-skip .sw { background: rgba(255, 255, 255, 0.1); box-shadow: none; }
.mw-next :focus-visible { outline-color: #a9adff; }
.mw-next .btn:disabled { opacity: 0.35; }
.mw-chip { display: inline-block; margin: 2px 0; padding: 3px 10px; border-radius: var(--r-pill); background: var(--screen-soft); color: var(--screen); font: 500 12.5px/1.4 var(--mono); }

/* ---------- the waiting room and call (dialog) ---------- */
.mw-room { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: 16px; background: rgba(6, 10, 20, 0.78); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
html:not(.calm) .mw-room { animation: mw-fade 0.3s var(--ease); }
@keyframes mw-fade { from { opacity: 0; } }
.mw-room-in { display: grid; gap: 14px; width: min(920px, 100%); max-height: calc(100vh - 32px); }
.mw-room .call { aspect-ratio: 16 / 9; }
html:not(.calm) .mw-room .call { animation: mw-pop 0.45s var(--ease); }
@keyframes mw-pop { from { transform: scale(0.95); opacity: 0; } }
.mw-room .call.waiting .av { animation: mw-breathe 2.6s var(--soft) infinite; }
html.calm .mw-room .call.waiting .av { animation: none; }
@keyframes mw-breathe { 50% { box-shadow: 0 0 0 14px rgba(255, 255, 255, 0.05), 0 0 0 28px rgba(255, 255, 255, 0.03); } }
.mw-room .queue { background: var(--night-2); border-color: var(--night-line); color: var(--night-ink); box-shadow: none; }
.mw-room .queue .seat { background: var(--night); border-color: var(--night-line); color: var(--night-muted); }
.mw-room .queue .seat.you { background: var(--moon); color: var(--on-moon); }
.mw-room .queue-read span { color: var(--night-muted); }
.mw-room .queue-line::before { border-color: var(--night-line); }
.mw-room .queue-door { background: rgba(169, 173, 255, 0.14); color: #a9adff; }
.mw-room .call-who p { max-width: 36ch; font-size: 14.5px; color: #c4ccdd; }
.mw-room :focus-visible { outline-color: #a9adff; }

/* ---------- responsive ---------- */
@media (max-width: 640px) {
  .mw-steps li { font-size: 11.5px; }
  .mw-summary, .mw-appt { grid-template-columns: minmax(0, 1fr); }
  .mw-appt { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mw-nav .btn { padding-inline: 18px; }
  .mw-next .actions .btn { flex: 1 1 auto; }
  .mw-room .call { aspect-ratio: 3 / 4; }
  .mw-room .call-self { width: 32%; }
}