/* ═══════════════════════════════════════════════════════════════════════
   Vedic Horā वैदिक होरा — human astrologers (/consult and everything under it).

   Five surfaces share this sheet because they share one vocabulary: the
   roster, one astrologer, the application, the astrologer's console, and the
   call room. Optical-glass material and the tokens already in styles.css —
   no new colour system, no new type scale, no external font, no image file.
   The identity mark on a card without a photograph is the person's own
   initial, drawn in type, because script-src is 'self' + nonce and there is
   no avatar service to call.

   The rules this sheet is written to keep:

     • Availability is colour + SHAPE + WORD, never colour alone. The measured
       deutan ΔE between --good and --bad is 0.8, so the breathing disc, the
       half-ring and the hollow ring carry the state, and the word beside them
       carries it again.
     • Every interactive target is at least 44×44 CSS px — the filter chips,
       the time-slot buttons and the little × on a credential included.
     • Wide content scrolls inside its own box. The page never scrolls
       sideways at 390 px: the weekly-hours strip and the booking grid each
       scroll within themselves.
     • Nothing here animates for a reader who has asked it not to.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Shared small type ─────────────────────────────────────────────────*/
.cs-fine {
  font-size: .8rem; line-height: 1.62; color: var(--ink-soft); margin: 6px 0 0;
}
.cs-msg { min-height: 1.3em; margin: 10px 0 0; font-size: .86rem; color: var(--ink-soft); }
.cs-msg.warn { color: var(--bad); font-weight: 600; }
.cs-msg.good { color: var(--good); font-weight: 600; }

.cs-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 14px; }
.cs-actions.centred { justify-content: center; }

/* The two disclosures — outbound here, inbound on /astrologers. Discreet,
   never absent, always at full contrast against its ground. */
.cs-disclose {
  margin: 14px 0 0; font-size: .84rem; line-height: 1.6; color: var(--ink-soft);
  max-width: 74ch;
}
.cs-disclose a { color: var(--accent); text-decoration: none; font-weight: 600; white-space: nowrap; }
.cs-disclose a:hover { text-decoration: underline; }

.cs-honesty {
  margin: 30px 0 0; padding-top: 16px;
  border-top: 1px solid rgba(120,150,200,.22);
  font-size: .8rem; line-height: 1.66; color: var(--ink-soft); max-width: 76ch;
}

/* The price, stated once, in the only place a price would otherwise go. */
.cs-free {
  display: inline-flex; align-items: center; gap: 10px;
  margin: 4px 0 0; font-size: .92rem; color: var(--ink-soft);
}
.cs-free-mark {
  font-weight: 700; font-size: 1rem; letter-spacing: .02em;
  color: color-mix(in srgb, var(--good) 66%, var(--ink));
  padding: 4px 11px; border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--good) 34%, transparent);
  background: rgba(255,255,255,.5);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9);
}

/* ── Filters ───────────────────────────────────────────────────────────
   Rendered hidden and unhidden by the script, so a reader without
   JavaScript is never shown a control that would do nothing. */
.cs-filters {
  display: flex; flex-direction: column; gap: 10px;
  margin: 0 0 24px; padding: 16px 18px;
  border: 1px solid rgba(120,150,200,.24); border-radius: 18px;
  background: rgba(255,255,255,.38);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.85), var(--elev-1);
}
.cs-frow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.cs-flabel {
  font-size: .7rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-faint); margin-right: 4px; min-width: 84px;
}
.cs-chip {
  min-height: 44px; padding: 9px 15px;
  border-radius: 999px; border: 1px solid rgba(120,150,200,.34);
  background: rgba(255,255,255,.55); color: var(--ink-soft);
  font: inherit; font-size: .84rem; cursor: pointer;
  transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.cs-chip:hover { background: rgba(255,255,255,.8); color: var(--ink); }
.cs-chip.current {
  background: color-mix(in srgb, var(--accent) 14%, rgba(255,255,255,.75));
  border-color: color-mix(in srgb, var(--accent) 46%, transparent);
  color: color-mix(in srgb, var(--accent) 72%, var(--ink)); font-weight: 600;
}
.cs-only {
  display: inline-flex; align-items: center; gap: 9px;
  min-height: 44px; padding: 0 6px; cursor: pointer; font-size: .88rem;
}
.cs-only input { width: 18px; height: 18px; accent-color: var(--accent); }
.cs-n {
  display: inline-block; min-width: 22px; padding: 1px 7px; margin-left: 4px;
  border-radius: 999px; font-size: .74rem; font-weight: 700; text-align: center;
  color: color-mix(in srgb, var(--good) 62%, var(--ink));
  background: color-mix(in srgb, var(--good) 14%, rgba(255,255,255,.7));
}
.cs-empty-filter { margin: 0 0 20px; color: var(--ink-soft); }

/* ── The grid ──────────────────────────────────────────────────────────*/
.cs-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px;
}

.cs-card { display: flex; flex-direction: column; gap: 12px; padding: 22px; margin: 0; }
.cs-card-head { display: flex; gap: 14px; align-items: flex-start; }
.cs-card-id { min-width: 0; flex: 1; }
.cs-name { margin: 0; font-size: 1.06rem; line-height: 1.3; }
.cs-name a { color: var(--ink); text-decoration: none; }
.cs-name a:hover { text-decoration: underline; }
.cs-headline {
  margin: 3px 0 0; font-size: .86rem; line-height: 1.5; color: var(--ink-soft);
}

/* The face: a photograph the astrologer uploaded, or their own initial. */
.cs-face {
  flex: none; width: 56px; height: 56px; border-radius: 50%;
  display: grid; place-items: center; overflow: hidden;
  font-size: 1.4rem; font-weight: 600; color: var(--ink-soft);
  background: linear-gradient(160deg, rgba(255,255,255,.9), rgba(224,234,246,.9));
  border: 1px solid rgba(120,150,200,.3);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.95), var(--elev-1);
}
.cs-face img { width: 100%; height: 100%; object-fit: cover; }
.cs-face.lg { width: 92px; height: 92px; font-size: 2.2rem; }
.cs-face.xl { width: 128px; height: 128px; font-size: 3rem; }

/* ── Availability ──────────────────────────────────────────────────────
   Three states, three shapes, three words. The colours are a bonus. */
.cs-badges { display: flex; flex-wrap: wrap; gap: 8px; margin: 9px 0 0; }
.cs-avail {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 12px; border-radius: 999px; white-space: nowrap;
  font-size: .7rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  border: 1px solid rgba(120,150,200,.42);
  background: rgba(255,255,255,.46);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9);
}
.cs-avail-glyph { width: 9px; height: 9px; flex: none; border-radius: 50%; }

/* Live: a filled disc that breathes and throws a ring outward. This is the
   one thing on the page a reader recognises before they read anything. */
.cs-avail.on { color: color-mix(in srgb, var(--good) 62%, var(--ink)); }
.cs-avail.on .cs-avail-glyph {
  position: relative; background: currentColor; animation: cs-breathe 2.4s ease-in-out infinite;
}
.cs-avail.on .cs-avail-glyph::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: currentColor; animation: cs-ring 2.4s cubic-bezier(.2,.7,.3,1) infinite;
}
/* Busy: a half-filled disc. Someone is there, and already speaking. */
.cs-avail.busy { color: color-mix(in srgb, var(--gold) 74%, var(--ink)); }
.cs-avail.busy .cs-avail-glyph {
  background: linear-gradient(90deg, currentColor 50%, transparent 50%);
  border: 1.5px solid currentColor;
}
/* Away: a hollow ring. Nobody home, and it does not pretend otherwise. */
.cs-avail.off { color: var(--ink-faint); }
.cs-avail.off .cs-avail-glyph { border: 1.5px solid currentColor; background: none; }

@keyframes cs-breathe { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }
@keyframes cs-ring {
  0%   { opacity: .5; transform: scale(1); }
  70%  { opacity: 0;  transform: scale(2.7); }
  100% { opacity: 0;  transform: scale(2.7); }
}

/* Verified means one thing here: a person opened the uploaded certificate
   and read it. It is understated on purpose — it is a fact, not a badge. */
.cs-verified {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 11px; border-radius: 999px; white-space: nowrap;
  font-size: .7rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: color-mix(in srgb, var(--accent) 70%, var(--ink));
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  background: rgba(255,255,255,.46);
}

.cs-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
.cs-tag {
  padding: 4px 10px; border-radius: 8px; font-size: .76rem; color: var(--ink-soft);
  background: rgba(255,255,255,.5); border: 1px solid rgba(120,150,200,.24);
}

.cs-meta {
  display: flex; flex-direction: column; gap: 4px; margin: 0;
  font-size: .82rem; line-height: 1.5; color: var(--ink-soft);
}
.cs-meta-i b { color: var(--ink); font-weight: 600; }
.cs-years { font-weight: 600; color: var(--ink); }
.cs-note {
  margin: 0; padding: 9px 12px; border-radius: 12px;
  font-size: .84rem; line-height: 1.55; color: var(--ink-soft);
  background: rgba(255,255,255,.44); border-left: 3px solid rgba(120,150,200,.4);
}

.cs-card-foot {
  display: flex; flex-wrap: wrap; gap: 9px; align-items: center;
  margin-top: auto; padding-top: 14px;
  border-top: 1px solid rgba(120,150,200,.2);
}
.cs-go {
  margin-left: auto; font-size: .82rem; font-weight: 600; color: var(--accent);
  text-decoration: none; white-space: nowrap;
}
.cs-go:hover { text-decoration: underline; }
.cs-arrow { transition: transform .18s ease; display: inline-block; }
.cs-go:hover .cs-arrow { transform: translateX(3px); }

/* The one rule that keeps a card honest: a call button exists in the markup
   whenever this astrologer takes calls at all, and is only reachable while
   the presence poll says they are actually there. The script flips the
   attribute; the stylesheet decides what that means. */
.cs-card[data-live="0"] [data-ring],
.cs-card[data-video="0"] [data-ring="video"],
.cs-profile[data-live="0"] .cs-hero [data-ring],
.cs-profile[data-video="0"] .cs-hero [data-ring="video"] { display: none; }

/* ── Empty states ──────────────────────────────────────────────────────*/
.cs-empty, .cs-status { text-align: left; padding: 30px; }
.cs-empty { text-align: center; }
.cs-empty h2 { margin: 0 0 10px; }
.cs-empty p { margin: 0 auto; max-width: 56ch; color: var(--ink-soft); }
.cs-status.warn { border-left: 3px solid var(--bad); }

/* ── How it works ──────────────────────────────────────────────────────*/
.cs-steps {
  list-style: none; counter-reset: cs-step; padding: 0; margin: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 22px;
}
.cs-steps li { counter-increment: cs-step; position: relative; padding-left: 46px; }
.cs-steps li::before {
  content: counter(cs-step);
  position: absolute; left: 0; top: 0; width: 32px; height: 32px;
  display: grid; place-items: center; border-radius: 50%;
  font-size: .86rem; font-weight: 700; color: var(--ink-soft);
  background: rgba(255,255,255,.6); border: 1px solid rgba(120,150,200,.32);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.95);
}
.cs-steps h3 { margin: 4px 0 6px; font-size: 1rem; }
.cs-steps p { margin: 0; font-size: .88rem; line-height: 1.6; color: var(--ink-soft); }

/* ── The ringing dialog ────────────────────────────────────────────────*/
.cs-modal {
  position: fixed; inset: 0; z-index: 90;
  display: grid; place-items: center; padding: 20px;
  background: rgba(24,36,56,.34);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.cs-modal[hidden] { display: none; }
.cs-modal-card {
  width: min(420px, 100%); margin: 0; padding: 34px 30px; text-align: center;
  animation: cs-rise .22s cubic-bezier(.2,.8,.3,1);
}
@keyframes cs-rise { from { opacity: 0; transform: translateY(10px) scale(.98); } }

/* A ring that looks like a ring: concentric waves leaving a still centre. */
.cs-ring-pulse {
  display: block; width: 56px; height: 56px; margin: 0 auto 18px;
  border-radius: 50%; position: relative;
  background: color-mix(in srgb, var(--accent) 22%, rgba(255,255,255,.8));
  border: 1px solid color-mix(in srgb, var(--accent) 34%, transparent);
}
.cs-ring-pulse::before, .cs-ring-pulse::after {
  content: ""; position: absolute; inset: -2px; border-radius: 50%;
  border: 2px solid color-mix(in srgb, var(--accent) 40%, transparent);
  animation: cs-wave 1.9s cubic-bezier(.2,.7,.3,1) infinite;
}
.cs-ring-pulse::after { animation-delay: .65s; }
@keyframes cs-wave {
  0%   { opacity: .7; transform: scale(1); }
  80%  { opacity: 0;  transform: scale(2.2); }
  100% { opacity: 0;  transform: scale(2.2); }
}
.cs-ring-state { margin: 0; font-size: 1.06rem; font-weight: 600; }
.cs-ring-who { margin: 6px 0 0; font-size: 1.3rem; font-weight: 600; }
.cs-ring-sub { margin: 8px 0 0; color: var(--ink-soft); font-size: .9rem; }
.cs-ring-count {
  margin: 12px 0 0; font-variant-numeric: tabular-nums;
  font-size: 1.5rem; font-weight: 300; color: var(--ink-faint); min-height: 1.4em;
}
.cs-ring-actions { display: flex; justify-content: center; margin-top: 8px; }

/* ── One astrologer ────────────────────────────────────────────────────*/
.cs-hero { display: flex; gap: 24px; align-items: flex-start; padding: 28px; }
.cs-hero-body { min-width: 0; flex: 1; }
.cs-hero h1 { margin: 0; font-size: clamp(1.6rem, 3.6vw, 2.2rem); line-height: 1.18; }
.cs-hero .lede { margin: 8px 0 0; font-size: 1rem; color: var(--ink-soft); }

.cs-two {
  display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 34px;
}
.cs-col h2 { font-size: 1.1rem; margin: 26px 0 10px; }
.cs-col h2:first-child { margin-top: 0; }
.cs-bio p { margin: 0 0 12px; line-height: 1.7; }
.cs-quals-list { margin: 0; padding-left: 20px; line-height: 1.7; }
.cs-quals-list b { font-weight: 600; }

.cs-summary { margin: 0; }
.cs-summary > div {
  display: flex; justify-content: space-between; gap: 16px;
  padding: 9px 0; border-bottom: 1px solid rgba(120,150,200,.18);
}
.cs-summary dt { font-size: .8rem; color: var(--ink-faint); flex: none; }
.cs-summary dd { margin: 0; text-align: right; font-size: .88rem; }
.cs-side {
  padding: 20px; border-radius: 18px; align-self: start;
  background: rgba(255,255,255,.36); border: 1px solid rgba(120,150,200,.22);
}

/* ── Booking ───────────────────────────────────────────────────────────
   Rendered server-side in the astrologer's zone, relabelled into the
   reader's. It scrolls inside itself so the page never does. */
.cs-days {
  display: flex; gap: 14px; overflow-x: auto; padding: 4px 2px 14px;
  scroll-snap-type: x proximity;
}
.cs-day-col { flex: none; width: 132px; scroll-snap-align: start; }
.cs-day-col h3 {
  margin: 0 0 8px; font-size: .82rem; font-weight: 700;
  letter-spacing: .05em; text-transform: uppercase; color: var(--ink-soft);
}
.cs-slots { display: flex; flex-direction: column; gap: 7px; }
.cs-slot {
  min-height: 44px; padding: 10px 8px; width: 100%;
  border-radius: 12px; border: 1px solid rgba(120,150,200,.32);
  background: rgba(255,255,255,.6); color: var(--ink);
  font: inherit; font-size: .9rem; font-variant-numeric: tabular-nums; cursor: pointer;
  transition: background .16s ease, border-color .16s ease, transform .1s ease;
}
.cs-slot:hover { background: rgba(255,255,255,.92); }
.cs-slot:active { transform: scale(.97); }
.cs-slot.current {
  background: color-mix(in srgb, var(--accent) 16%, rgba(255,255,255,.8));
  border-color: color-mix(in srgb, var(--accent) 52%, transparent);
  font-weight: 600;
}
.cs-slot[disabled] { opacity: .35; cursor: default; text-decoration: line-through; }
.cs-book-form { margin: 6px 0 0; padding: 22px; }
.cs-book-chosen { margin: 0 0 14px; font-size: 1.02rem; font-weight: 600; }

/* ── Forms, shared by the application and the console ──────────────────*/
.cs-form { padding: 26px; margin: 0 0 22px; }
.cs-form h2 { margin: 26px 0 14px; font-size: 1.05rem; }
.cs-form h2:first-child { margin-top: 0; }
.cs-form h3 { margin: 22px 0 10px; font-size: .94rem; }
.cs-fields {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px;
}
.cs-field { display: flex; flex-direction: column; gap: 5px; }
.cs-field.wide { margin-top: 14px; }
.cs-field > span { font-size: .8rem; font-weight: 600; color: var(--ink-soft); }
.cs-field input, .cs-field select, .cs-field textarea,
.cs-qual input {
  min-height: 44px; padding: 10px 12px;
  border-radius: 12px; border: 1px solid rgba(120,150,200,.34);
  background: rgba(255,255,255,.7); color: var(--ink);
  font: inherit; font-size: .92rem; width: 100%;
}
.cs-field textarea { min-height: 108px; resize: vertical; line-height: 1.6; }
.cs-field input:focus, .cs-field select:focus, .cs-field textarea:focus,
.cs-qual input:focus {
  outline: 2px solid var(--accent); outline-offset: 1px; background: #fff;
}

.cs-checks { display: flex; flex-wrap: wrap; gap: 8px; }
.cs-check {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 8px 14px; cursor: pointer;
  border-radius: 999px; border: 1px solid rgba(120,150,200,.3);
  background: rgba(255,255,255,.5); font-size: .86rem;
  transition: background .16s ease, border-color .16s ease;
}
.cs-check:hover { background: rgba(255,255,255,.85); }
.cs-check input { width: 17px; height: 17px; accent-color: var(--accent); flex: none; }
.cs-check:has(input:checked) {
  border-color: color-mix(in srgb, var(--accent) 46%, transparent);
  background: color-mix(in srgb, var(--accent) 11%, rgba(255,255,255,.8));
  font-weight: 600;
}

.cs-quals { display: flex; flex-direction: column; gap: 10px; }
.cs-qual { display: grid; grid-template-columns: 2fr 2fr 1fr; gap: 8px; }

/* Credentials, the only thing on this platform that earns the word verified */
.cs-docs { list-style: none; margin: 12px 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.cs-docs li {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px; border-radius: 12px;
  background: rgba(255,255,255,.5); border: 1px solid rgba(120,150,200,.24);
}
.cs-docs a { color: var(--ink); font-size: .9rem; text-decoration: none; flex: 1; min-width: 0; }
.cs-docs a:hover { text-decoration: underline; }
.cs-docs-empty { margin: 12px 0; font-size: .86rem; color: var(--ink-faint); }
.cs-file { display: inline-block; position: relative; }
.cs-file input {
  position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; cursor: pointer;
}
.cs-x {
  flex: none; width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid transparent; background: none; color: var(--ink-faint);
  font-size: 1.3rem; line-height: 1; cursor: pointer;
}
.cs-x:hover { color: var(--bad); border-color: color-mix(in srgb, var(--bad) 34%, transparent); }

/* ── The console ───────────────────────────────────────────────────────*/
/* The switch. Deliberately the largest control on the page: it is the whole
   of "make me available or inactive", and an astrologer must be able to find
   it in one second from a phone, mid-day, between clients. */
.cs-live {
  display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: 26px; padding: 26px; margin: 0;
}
.cs-live-modes { display: flex; flex-wrap: wrap; gap: 10px; align-content: start; }
.cs-live-modes .cs-field { width: 100%; margin-top: 6px; }
.cs-live > .cs-msg { grid-column: 1 / -1; }

.cs-switch { display: flex; align-items: center; gap: 14px; cursor: pointer; }
.cs-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.cs-switch-track {
  flex: none; width: 68px; height: 38px; border-radius: 999px; position: relative;
  background: rgba(160,175,196,.4); border: 1px solid rgba(120,150,200,.36);
  box-shadow: inset 0 2px 5px rgba(40,60,95,.16);
  transition: background .22s ease, border-color .22s ease;
}
.cs-switch-knob {
  position: absolute; top: 3px; left: 3px; width: 30px; height: 30px; border-radius: 50%;
  background: linear-gradient(160deg, #fff, #eef3f9);
  box-shadow: var(--elev-2), inset 0 1px 0 rgba(255,255,255,.95);
  transition: transform .22s cubic-bezier(.2,.8,.3,1);
}
.cs-switch input:checked + .cs-switch-track {
  background: color-mix(in srgb, var(--good) 58%, rgba(255,255,255,.5));
  border-color: color-mix(in srgb, var(--good) 50%, transparent);
}
.cs-switch input:checked + .cs-switch-track .cs-switch-knob { transform: translateX(30px); }
.cs-switch input:focus-visible + .cs-switch-track { outline: 2px solid var(--accent); outline-offset: 3px; }
.cs-switch-label { font-size: 1.08rem; font-weight: 600; }

/* Ringing now */
.cs-rings { display: flex; flex-direction: column; gap: 12px; }
.cs-rings:empty { display: none; }
.cs-ring-row {
  margin: 0; padding: 18px 20px;
  border-left: 3px solid color-mix(in srgb, var(--good) 62%, transparent);
  animation: cs-rise .2s cubic-bezier(.2,.8,.3,1);
}
.cs-ring-row .cs-ring-who {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0; font-size: 1.05rem;
}
.cs-ring-row .cs-ring-q { margin: 8px 0 0; color: var(--ink-soft); font-size: .9rem; line-height: 1.6; }
.cs-ring-row [data-left] { font-variant-numeric: tabular-nums; }

/* Appointments */
.cs-appts { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.cs-appt { margin: 0; padding: 18px 20px; display: grid; gap: 8px; }
.cs-appt-when { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; }
.cs-appt-when time { font-size: 1.02rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.cs-appt-who { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.cs-appt-note { margin: 0; font-size: .88rem; color: var(--ink-soft); line-height: 1.6; }
.cs-state {
  padding: 3px 10px; border-radius: 999px;
  font-size: .68rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  border: 1px solid rgba(120,150,200,.36); background: rgba(255,255,255,.5);
  color: var(--ink-soft);
}
.cs-state-confirmed {
  color: color-mix(in srgb, var(--good) 64%, var(--ink));
  border-color: color-mix(in srgb, var(--good) 34%, transparent);
}
.cs-state-requested {
  color: color-mix(in srgb, var(--gold) 76%, var(--ink));
  border-color: color-mix(in srgb, var(--gold) 34%, transparent);
}

/* Weekly hours — seven columns that become a scroller before they crush */
.cs-hours {
  display: grid; grid-template-columns: repeat(7, minmax(148px, 1fr)); gap: 12px;
  overflow-x: auto; padding: 4px 2px 14px;
}
.cs-day {
  padding: 14px; border-radius: 16px;
  background: rgba(255,255,255,.4); border: 1px solid rgba(120,150,200,.22);
}
.cs-day h3 {
  margin: 0 0 10px; font-size: .74rem; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft);
}
.cs-wins { display: flex; flex-direction: column; gap: 8px; }
.cs-win { display: flex; align-items: center; gap: 4px; }
.cs-win input {
  min-height: 40px; padding: 6px 8px; min-width: 0; flex: 1;
  border-radius: 10px; border: 1px solid rgba(120,150,200,.32);
  background: rgba(255,255,255,.75); font: inherit; font-size: .84rem;
}
.cs-win .cs-x { width: 34px; height: 40px; font-size: 1.1rem; }
.cs-add {
  margin-top: 10px; min-height: 44px; width: 100%; padding: 8px;
  border-radius: 10px; border: 1px dashed rgba(120,150,200,.44);
  background: none; color: var(--ink-soft); font: inherit; font-size: .82rem; cursor: pointer;
}
.cs-add:hover { background: rgba(255,255,255,.5); color: var(--ink); }

/* What actually happened — counted, never claimed */
.cs-log { list-style: none; margin: 0; padding: 0; }
.cs-log li {
  display: flex; flex-wrap: wrap; gap: 14px; align-items: baseline;
  padding: 10px 0; border-bottom: 1px solid rgba(120,150,200,.18); font-size: .88rem;
}
.cs-log time { font-variant-numeric: tabular-nums; color: var(--ink-soft); min-width: 15ch; }

/* ── The call room ─────────────────────────────────────────────────────
   No site chrome: a call is the only thing on this page. It fills the
   viewport and the controls stay within thumb's reach at the bottom. */
.cs-stage { min-height: 100dvh; display: flex; }
.cs-call {
  flex: 1; display: flex; flex-direction: column; gap: 14px;
  padding: 18px clamp(14px, 4vw, 34px) 24px;
  max-width: 1100px; margin: 0 auto; width: 100%;
}
.cs-call-head { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
.cs-call-back { color: var(--ink-soft); text-decoration: none; font-size: .88rem; }
.cs-call-back:hover { color: var(--ink); }
.cs-call-who { margin: 0; flex: 1; min-width: 0; }
.cs-call-who b { font-size: 1.05rem; }
.cs-call-who .cs-fine { display: inline; margin-left: 10px; }
.cs-call-clock {
  margin: 0; font-variant-numeric: tabular-nums; font-size: 1.1rem;
  font-weight: 300; color: var(--ink-soft);
}

.cs-stage-media {
  position: relative; flex: 1; min-height: 320px; border-radius: var(--radius);
  overflow: hidden; background: #0f1620;
  border: 1px solid rgba(120,150,200,.3); box-shadow: var(--elev-3);
}
.cs-remote { position: absolute; inset: 0; display: grid; place-items: center; }
.cs-remote video { width: 100%; height: 100%; object-fit: cover; background: #0f1620; }
.cs-remote video[hidden] { display: none; }
/* The still portrait, shown whenever there is no moving picture — which is
   every voice call, and any video call with the camera off. Silence should
   look deliberate, not broken. */
.cs-remote-still {
  position: absolute; inset: 0; display: grid; place-content: center; justify-items: center;
  gap: 14px; background: radial-gradient(70% 60% at 50% 40%, #1d2836, #0f1620);
}
.cs-remote-still .cs-face {
  background: linear-gradient(160deg, rgba(255,255,255,.16), rgba(255,255,255,.05));
  color: rgba(255,255,255,.85); border-color: rgba(255,255,255,.22); box-shadow: none;
}
.cs-remote-still .cs-fine { color: rgba(255,255,255,.66); margin: 0; }
.cs-local {
  position: absolute; right: 16px; bottom: 16px; width: clamp(104px, 22vw, 190px);
  aspect-ratio: 3 / 4; object-fit: cover; border-radius: 14px; z-index: 2;
  background: #0f1620; border: 1px solid rgba(255,255,255,.28); box-shadow: var(--elev-2);
  transform: scaleX(-1);  /* a mirror, because that is what a face expects */
}
.cs-local[hidden] { display: none; }
.cs-call-msg { margin: 0; min-height: 1.3em; font-size: .88rem; color: var(--ink-soft); text-align: center; }
.cs-call-msg.warn { color: var(--bad); font-weight: 600; }

.cs-call-bar { display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; }
.cs-cbtn {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  min-width: 84px; min-height: 64px; padding: 12px 16px;
  border-radius: 18px; border: 1px solid rgba(120,150,200,.34);
  background: rgba(255,255,255,.6); color: var(--ink); font: inherit; cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), var(--elev-1);
  transition: background .16s ease, transform .1s ease;
}
.cs-cbtn:hover { background: rgba(255,255,255,.9); }
.cs-cbtn:active { transform: scale(.96); }
.cs-cbtn-ico svg { width: 24px; height: 24px; display: block; }
.cs-cbtn-label { font-size: .74rem; font-weight: 600; letter-spacing: .02em; }
/* Muted or camera-off: the slash is drawn by the state, not by a second icon */
.cs-cbtn.off { color: var(--ink-faint); background: rgba(240,244,249,.7); }
.cs-cbtn.off .cs-cbtn-ico { position: relative; }
.cs-cbtn.off .cs-cbtn-ico::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 30px; height: 2px;
  background: var(--bad); transform: translate(-50%, -50%) rotate(-45deg); border-radius: 2px;
}
.cs-cbtn.end {
  color: #fff; border-color: color-mix(in srgb, var(--bad) 60%, transparent);
  background: linear-gradient(160deg,
    color-mix(in srgb, var(--bad) 88%, #fff),
    color-mix(in srgb, var(--bad) 100%, #000));
}
.cs-cbtn.end:hover { background: color-mix(in srgb, var(--bad) 92%, #000); }
.cs-cbtn.end svg { transform: rotate(135deg); }
.cs-call-fine { margin: 0; text-align: center; font-size: .78rem; color: var(--ink-faint); }
.cs-call[data-ended] .cs-call-bar { opacity: .4; pointer-events: none; }

/* ── Narrow ────────────────────────────────────────────────────────────*/
@media (max-width: 900px) {
  .cs-two { grid-template-columns: 1fr; gap: 26px; }
  .cs-live { grid-template-columns: 1fr; gap: 20px; }
}
@media (max-width: 620px) {
  .cs-grid { grid-template-columns: 1fr; }
  .cs-hero { flex-direction: column; gap: 16px; }
  .cs-qual { grid-template-columns: 1fr; }
  .cs-flabel { min-width: 100%; }
  .cs-card-foot { flex-direction: column; align-items: stretch; }
  .cs-card-foot .glass-btn { width: 100%; justify-content: center; }
  .cs-go { margin: 6px 0 0; text-align: center; }
  .cs-call-bar { gap: 10px; }
  .cs-cbtn { min-width: 72px; padding: 10px 12px; }
}

/* ── Motion ────────────────────────────────────────────────────────────
   The breathing dot and the ringing waves are the only motion here, and
   both say something a word already says. A reader who has asked for
   stillness loses no information by getting it. */
@media (prefers-reduced-motion: reduce) {
  .cs-avail.on .cs-avail-glyph,
  .cs-avail.on .cs-avail-glyph::after,
  .cs-ring-pulse::before, .cs-ring-pulse::after,
  .cs-modal-card, .cs-ring-row { animation: none; }
  .cs-avail.on .cs-avail-glyph::after { display: none; }
  .cs-switch-knob, .cs-slot, .cs-chip, .cs-cbtn, .cs-arrow { transition: none; }
}