/* ============================================================================
   Call-center (CALLCENTER-CT-V1) — isolated design foundation.

   This stylesheet is self-contained on purpose. Call-center is served from its
   own subdomain and is not a route of the main site's SPA, so it imports
   nothing from the root: no styles.css, no dept-styles.css, no recist.css.

   The token values below are copied LITERALLY from the canonical registry in
   docs/DESIGN_SYSTEM.md section 10.1 (colours), section 11 (typography) and
   section 12.1 (radius, focus), which are verified against styles.css. Copying
   values rather than importing the file is the accepted trade-off recorded in
   docs/callcenter/ARCHITECTURE.md section 6: isolation is worth the duplication,
   and parity is proven programmatically instead of by shared runtime code.

   Deliberately NOT copied:
     --color-canvas-tone   desktop outer-canvas token of the main site
                           (DESIGN_SYSTEM sections 10.1 and 21). It has no
                           meaning here and is forbidden for Call-center.
     --container-*         layout tokens; Call-center sizes its own shell with
                           ordinary CSS values.
     --space-*             they do not exist globally and are not invented here
                           (DESIGN_SYSTEM section 12.2).

   Namespace: every application class is .cc-*. The .ctmri-* namespace of the
   main site is never reused, so no false impression of a shared QA contract
   can arise (DESIGN_SYSTEM section 17.1).
   ========================================================================== */

/* ---------------------------------------------------------------------------
   1. Tokens — Light (default)
   -------------------------------------------------------------------------- */

:root {
  /* Typography — DESIGN_SYSTEM section 11 */
  --font-sans: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  --text-size: clamp(15px, 0.3vw + 14px, 17px);
  --text-leading: 1.6;

  /* Light palette — DESIGN_SYSTEM section 10.1 */
  --color-bg: #ffffff;
  --color-surface: #f6f8fb;
  --color-text: #0b1220;
  --color-muted: #4b5563;
  --color-border: #d7dde7;
  --color-accent: #0b5f66;
  --color-accent-2: #2563eb;
  --color-error: #b91c1c;
  --shadow: 0 10px 30px color-mix(in srgb, #000 10%, transparent);

  /* Declared for literal parity with the canonical registry. Call-center has no
     NSZU badge, so these currently have no usage here — the same situation as
     --radius-xl on the main site, and not a defect. */
  --nszu-text-primary: #1e3876;
  --nszu-text-secondary: #172a58;

  /* Focus — DESIGN_SYSTEM section 12.1 */
  --focus-ring: 3px solid var(--color-accent);

  /* Radius scale — DESIGN_SYSTEM section 12.1 */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-full: 999px;
}

/* ---------------------------------------------------------------------------
   2. Tokens — Dark
   -------------------------------------------------------------------------- */

[data-theme='dark'] {
  --color-bg: #0b1220;
  --color-surface: #0f1a2b;
  --color-text: #e7eefc;
  --color-muted: #b3c0da;
  --color-border: #22304a;
  --color-accent: #36c2c7;
  --color-accent-2: #7aa7ff;
  --color-error: #ff6b6b;
  --shadow: 0 12px 36px color-mix(in srgb, #000 35%, transparent);
  --nszu-text-primary: #e8edf5;
  --nszu-text-secondary: #cad5ea;
}

/* ---------------------------------------------------------------------------
   3. Accessibility compatibility hooks

   Call-center has no accessibility toolbar of its own — that was not approved,
   and CC-03 does not invent one. What it does provide is the CSS side of the
   canonical hooks, so a future control surface, a QA run, or a manually set
   attribute behaves here exactly as it does on the main site.

   Values are the canonical ones from a11y-toolbar.js.
   -------------------------------------------------------------------------- */

html.a11y-font--large  { --text-size: clamp(17px, 0.3vw + 16px, 19px); }
html.a11y-font--xlarge { --text-size: clamp(19px, 0.3vw + 18px, 22px); }

/* ---------------------------------------------------------------------------
   4. Base
   -------------------------------------------------------------------------- */

html {
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: var(--text-size);
  line-height: var(--text-leading);
  text-rendering: optimizeLegibility;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  padding: 0;
  background: var(--color-bg);
  color: var(--color-text);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* No overflow-x: clip here. The main site carries it as protection against
   full-bleed elements, but it also hides horizontal overflow from the eye and
   forces QA to measure document.scrollWidth (DESIGN_SYSTEM section 13.4).
   A fresh scope has nothing to hide, so overflow stays visible and honest. */

*,
*::before,
*::after {
  box-sizing: border-box;
}

/* The UA stylesheet's [hidden] rule is user-agent origin, so any author display
   declaration beats it regardless of specificity — that is how a hidden legend
   and a hidden reauth link stayed painted. Assert the invariant once, in author
   origin, with the weight that makes it unconditional. */
[hidden] {
  display: none !important;
}

/* ---------------------------------------------------------------------------
   5. Skip link
   -------------------------------------------------------------------------- */

.cc-skip-link {
  position: fixed;
  top: 0.75rem;
  left: 0.75rem;
  transform: translateY(calc(-100% - 1rem));
  z-index: 100;
  max-width: calc(100vw - 1.5rem);
  padding: 0.5rem 0.75rem;
  background: var(--color-accent);
  color: var(--color-bg);
  border-radius: var(--radius-md);
  font-weight: 600;
  font-size: 0.875rem;
  line-height: 1.2;
  text-decoration: none;
  outline: 3px solid transparent;
  transition: transform 0.15s ease;
}

.cc-skip-link:focus {
  transform: translateY(0);
  outline-color: var(--color-accent-2);
}

/* ---------------------------------------------------------------------------
   6. Shell
   -------------------------------------------------------------------------- */

.cc-shell__inner {
  width: 100%;
  max-width: 760px;
  margin: 0 auto;
  padding-left: clamp(14px, 2vw, 28px);
  padding-right: clamp(14px, 2vw, 28px);
}

.cc-header {
  background: color-mix(in srgb, var(--color-surface) 70%, var(--color-bg));
  border-bottom: 1px solid var(--color-border);
}

.cc-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 12px;
  padding-bottom: 12px;
}

.cc-brand {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.cc-brand__product {
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--color-text);
}

.cc-brand__org {
  font-size: 0.75rem;
  line-height: 1.35;
  color: var(--color-muted);
  overflow-wrap: break-word;
}

/* ---------------------------------------------------------------------------
   7. Theme toggle

   A native <button>: keyboard activation, ARIA state and right-click behaviour
   all come for free. It carries no application logic of any kind.
   -------------------------------------------------------------------------- */

.cc-theme-toggle {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: max(2.75rem, 44px);
  height: max(2.75rem, 44px);
  padding: 0;
  background: var(--color-bg);
  color: var(--color-text);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

.cc-theme-toggle:hover {
  background: var(--color-surface);
  border-color: color-mix(in srgb, var(--color-border) 70%, var(--color-accent));
}

.cc-theme-toggle:focus-visible {
  outline: var(--focus-ring);
  outline-offset: 2px;
}

.cc-theme-toggle__ic {
  width: 20px;
  height: 20px;
  display: block;
}

/* Light shows the moon (switch to dark); dark shows the sun. */
.cc-theme-toggle__ic--sun { display: none; }
html[data-theme='dark'] .cc-theme-toggle__ic--sun { display: block; }
html[data-theme='dark'] .cc-theme-toggle__ic--moon { display: none; }

/* ---------------------------------------------------------------------------
   8. Main + status card
   -------------------------------------------------------------------------- */

.cc-main {
  flex: 1 1 auto;
  padding-top: clamp(20px, 3vw, 36px);
  padding-bottom: clamp(28px, 4vw, 48px);
  outline: none; /* focus is programmatic via tabindex="-1" */
}

.cc-status-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: clamp(18px, 4vw, 28px);
}

.cc-status-card__title {
  margin: 0 0 0.5rem;
  font-size: clamp(1.25rem, 1rem + 1.2vw, 1.6rem);
  line-height: 1.25;
  color: var(--color-text);
  overflow-wrap: break-word;
}

.cc-status-card__text {
  margin: 0;
  color: var(--color-muted);
  overflow-wrap: break-word;
}

/* ---------------------------------------------------------------------------
   9. High contrast — system mechanism

   Independent of the manual hook below and testable on its own.
   Values are the canonical ones from styles.css.
   -------------------------------------------------------------------------- */

@media (prefers-contrast: more) {
  :root {
    --color-bg:            #ffffff;
    --color-surface:       #f0f0f0;
    --color-text:          #000000;
    --color-muted:         #1a1a1a;
    --color-border:        #000000;
    --color-accent:        #00008B;
    --color-accent-2:      #0000cc;
    --color-error:         #cc0000;
    --nszu-text-primary:   #000000;
    --nszu-text-secondary: #1a1a1a;
  }

  [data-theme='dark'] {
    --color-bg:            #000000;
    --color-surface:       #111111;
    --color-text:          #ffffff;
    --color-muted:         #cccccc;
    --color-border:        #ffffff;
    --color-accent:        #ffff00;
    --color-accent-2:      #00ffff;
    --color-error:         #ff8080;
    --nszu-text-primary:   #ffffff;
    --nszu-text-secondary: #cccccc;
  }

  /* Text on an accent-filled surface: --color-bg is the correct pairing in both
     variants (white on dark blue, black on yellow). */
  .cc-skip-link { color: var(--color-bg); }

  .cc-header { background: var(--color-bg); }

  .cc-theme-toggle,
  .cc-status-card {
    border-width: 2px;
  }
}

/* ---------------------------------------------------------------------------
   10. High contrast — manual hook

   Set by attribute, exactly as a11y-toolbar.js does on the main site. There is
   no toolbar here yet, so the attribute is set by QA or by a future control.
   -------------------------------------------------------------------------- */

html[data-a11y-contrast="high"] {
  --color-bg:      #ffffff !important;
  --color-surface: #f0f0f0 !important;
  --color-text:    #000000 !important;
  --color-muted:   #1a1a1a !important;
  --color-border:  #000000 !important;
  --color-accent:  #00008B !important;
  --color-accent-2:#0000cc !important;
  --color-error:   #cc0000 !important;
  --nszu-text-primary:   #000000 !important;
  --nszu-text-secondary: #1a1a1a !important;
}

html[data-a11y-contrast="high"][data-theme="dark"] {
  --color-bg:      #000000 !important;
  --color-surface: #111111 !important;
  --color-text:    #ffffff !important;
  --color-muted:   #cccccc !important;
  --color-border:  #ffffff !important;
  --color-accent:  #ffff00 !important;
  --color-accent-2:#00ffff !important;
  --color-error:   #ff8080 !important;
  --nszu-text-primary:   #ffffff !important;
  --nszu-text-secondary: #cccccc !important;
}

html[data-a11y-contrast="high"] .cc-skip-link { color: var(--color-bg); }
html[data-a11y-contrast="high"] .cc-header { background: var(--color-bg); }

html[data-a11y-contrast="high"] .cc-theme-toggle,
html[data-a11y-contrast="high"] .cc-status-card {
  border-width: 2px;
}

/* ---------------------------------------------------------------------------
   11. Reduced motion

   Both mechanisms, independently. The shell has only decorative transitions,
   so disabling them costs nothing and removes them entirely.
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

html[data-a11y-motion="reduced"] *,
html[data-a11y-motion="reduced"] *::before,
html[data-a11y-motion="reduced"] *::after {
  animation-duration: 0.01ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.01ms !important;
  scroll-behavior: auto !important;
}

/* ---------------------------------------------------------------------------
   12. Application components (CC-04)

   Every class below is .cc-*. No new colour token is introduced: the five
   screens are built entirely from the tokens declared in sections 1 and 2, so
   both themes and both high-contrast mechanisms keep working without a single
   addition to the palette.

   Two rules run through all of it:

     - state is never carried by colour alone. Calendar states, validation
       errors and the selected slot each pair their colour with a glyph, a
       border treatment or words;
     - long content wraps. Patient names, examination descriptions and doctor
       fields are free text of unknown length, so anything that can receive them
       carries overflow-wrap: break-word.
   -------------------------------------------------------------------------- */

.cc-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* --- Header aside: [TEST] marker + theme toggle -------------------------- */

.cc-header__aside {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Logout is a real <form method="post"> because auth/logout.php requires POST
   and a CSRF token; a link would be answered 405. The container needs nothing
   but to sit in the header flow without adding margin of its own. */
.cc-logout {
  flex: 0 0 auto;
  margin: 0;
}

/* Neutral by design. This is an environment marker that must be impossible to
   miss on all five screens, not an error — canonical semantics give --color-error
   to failures, so it is not borrowed here. */
.cc-env-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.5rem;
  border: 2px solid var(--color-accent-2);
  border-radius: var(--radius-sm);
  background: var(--color-bg);
  color: var(--color-accent-2);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  white-space: nowrap;
}

/* --- Screens -------------------------------------------------------------- */

.cc-screen {
  display: block;
}

.cc-screen[hidden] {
  display: none;
}

.cc-screen__title {
  margin: 0 0 0.5rem;
  font-size: clamp(1.25rem, 1rem + 1.2vw, 1.6rem);
  line-height: 1.25;
  color: var(--color-text);
  overflow-wrap: break-word;
  outline: none; /* focus is programmatic via tabindex="-1" */
}

.cc-screen__lead {
  margin: 0 0 1rem;
  color: var(--color-muted);
  overflow-wrap: break-word;
}

.cc-hint {
  margin: 1rem 0 0;
  font-size: 0.875rem;
  color: var(--color-muted);
  overflow-wrap: break-word;
}

.cc-notice {
  margin: 0 0 1rem;
  padding: 0.625rem 0.75rem;
  border: 1px solid var(--color-border);
  border-left-width: 4px;
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-text);
  font-size: 0.875rem;
  overflow-wrap: break-word;
}

/* The single live region of each screen (role="status"). Plain text by default;
   when it carries a problem, callcenter.js adds the existing .cc-notice surface
   rather than introducing an error-specific class.

   🔴 It is never display:none — a live region removed from the box tree can
   stop being announced when it comes back. An empty one simply drops its
   trailing margin. */
.cc-status-line {
  margin: 0 0 1rem;
  color: var(--color-muted);
  overflow-wrap: break-word;
}

.cc-status-line:empty {
  margin-bottom: 0;
}

.cc-selected {
  margin: 0 0 1rem;
  padding: 0.625rem 0.75rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  overflow-wrap: break-word;
}

.cc-selected__label {
  color: var(--color-muted);
  font-size: 0.875rem;
}

.cc-selected__value {
  font-weight: 600;
  color: var(--color-text);
}

/* --- Buttons -------------------------------------------------------------- */

.cc-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 1rem;
}

/* Touch targets are max(2.75rem, 44px): the root size is 15px below ~333px of
   viewport width, where 2.75rem alone is only 41.25px. */
.cc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: max(2.75rem, 44px);
  padding: 0.5rem 1rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg);
  color: var(--color-text);
  font: inherit;
  font-weight: 600;
  line-height: 1.3;
  text-align: center;
  /* Some of these controls are <a> elements, because they NAVIGATE rather than
     act (DESIGN_SYSTEM section 15.3). They must not arrive underlined. */
  text-decoration: none;
  cursor: pointer;
  overflow-wrap: break-word;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

.cc-btn:focus-visible {
  outline: var(--focus-ring);
  outline-offset: 2px;
}

.cc-btn[disabled],
.cc-btn[aria-disabled="true"] {
  cursor: default;
  opacity: 0.7;
}

.cc-btn--primary {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-bg);
}

.cc-btn--primary:hover:not([disabled]):not([aria-disabled="true"]) {
  background: color-mix(in srgb, var(--color-accent) 85%, var(--color-text));
}

.cc-btn--ghost:hover:not([disabled]) {
  background: var(--color-surface);
}

/* Compact variant for the header. It trims PADDING only — .cc-btn keeps its
   min-height, so the 44px touch target is unchanged. */
.cc-btn--sm {
  padding: 0.375rem 0.625rem;
  font-size: 0.8125rem;
}

/* --- Calendar legend ------------------------------------------------------ */

.cc-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin: 0 0 1rem;
  padding: 0;
  list-style: none;
}

.cc-legend__item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8125rem;
  color: var(--color-muted);
}

.cc-legend__marker {
  font-size: 0.875rem;
  line-height: 1;
}

.cc-legend__marker--free { color: var(--color-accent); }
.cc-legend__marker--full { color: var(--color-error); }
.cc-legend__marker--off  { color: var(--color-muted); }

/* --- Calendar grid --------------------------------------------------------

   Seven equal columns down to 320px. minmax(0, 1fr) rather than 1fr so a cell
   can shrink below its content and the document never scrolls sideways. */

.cc-calendar {
  margin-top: 0.5rem;
}

.cc-weekdays,
.cc-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 4px;
}

.cc-weekdays {
  margin-bottom: 6px;
}

.cc-weekdays span {
  text-align: center;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-muted);
}

.cc-month + .cc-month {
  margin-top: 1.25rem;
}

.cc-month__caption {
  margin: 0 0 0.5rem;
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--color-text);
}

.cc-day {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  min-height: max(2.75rem, 44px);
  padding: 2px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-bg);
  color: var(--color-text);
  font: inherit;
  line-height: 1.1;
}

.cc-day__num {
  font-size: 0.8125rem;
  font-weight: 600;
}

.cc-day__marker {
  font-size: 0.6875rem;
  line-height: 1;
}

/* Padding cells that keep months aligned under the single weekday header. */
.cc-day--offset {
  border-color: transparent;
  background: transparent;
}

/* Free — the only interactive state, and the only one that is a button. */
.cc-day--free {
  border-color: var(--color-accent);
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.cc-day--free .cc-day__marker { color: var(--color-accent); }

.cc-day--free:hover {
  background: color-mix(in srgb, var(--color-accent) 12%, var(--color-bg));
}

.cc-day--free:focus-visible {
  outline: var(--focus-ring);
  outline-offset: 2px;
}

/* Scheduled but taken. A dashed border separates it from "not conducted"
   without relying on either colour or the glyph alone. */
.cc-day--full {
  border-style: dashed;
  border-color: var(--color-error);
  color: var(--color-muted);
}

.cc-day--full .cc-day__marker { color: var(--color-error); }

/* CT not conducted: no border emphasis at all, filled surface, muted text. */
.cc-day--off {
  border-color: var(--color-border);
  background: var(--color-surface);
  color: var(--color-muted);
}

.cc-day--today {
  box-shadow: inset 0 0 0 2px var(--color-accent-2);
}

.cc-day--selected {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-bg);
}

.cc-day--selected .cc-day__marker { color: var(--color-bg); }

.cc-day--selected:hover {
  background: color-mix(in srgb, var(--color-accent) 85%, var(--color-text));
}

/* --- Time selection ------------------------------------------------------- */

.cc-time-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(5.5rem, 1fr));
  gap: 8px;
}

.cc-time {
  min-height: max(2.75rem, 44px);
  padding: 0.5rem;
  border: 1px solid var(--color-accent);
  border-radius: var(--radius-md);
  background: var(--color-bg);
  color: var(--color-text);
  font: inherit;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.cc-time:hover {
  background: color-mix(in srgb, var(--color-accent) 12%, var(--color-bg));
}

.cc-time:focus-visible {
  outline: var(--focus-ring);
  outline-offset: 2px;
}

/* The selected time. Three independent signals carry it — a heavier border, a
   heavier weight and, from callcenter.js, aria-current plus words in the live
   region — so the state is never conveyed by colour alone. */
.cc-time--selected {
  border-width: 2px;
  background: color-mix(in srgb, var(--color-accent) 18%, var(--color-bg));
  font-weight: 700;
}

/* --- Destructive choice (dirty-back confirmation) --------------------------
   Restored from CC-04 together with the form it serves. A destructive choice is
   named by its label first; the colour only seconds it. */

.cc-btn--danger {
  border-color: var(--color-error);
  color: var(--color-error);
}

.cc-btn--danger:hover:not([disabled]):not([aria-disabled="true"]) {
  background: color-mix(in srgb, var(--color-error) 12%, var(--color-bg));
}

/* --- Booking form (CC-14; the CC-04 pattern, restored) ---------------------

   🔴 Reused, not re-invented: the field, label, hint and error rules below are
   the ones CC-04 proved with axe in Light and Dark. No new token is introduced. */

.cc-form {
  margin: 0;
}

.cc-form__legend {
  margin: 0 0 1rem;
  font-size: 0.8125rem;
  color: var(--color-muted);
}

.cc-field + .cc-field {
  margin-top: 1rem;
}

.cc-field__label {
  display: block;
  margin-bottom: 0.25rem;
  font-weight: 600;
  color: var(--color-text);
  overflow-wrap: break-word;
}

.cc-req { color: var(--color-error); }

.cc-opt {
  font-weight: 400;
  color: var(--color-muted);
}

.cc-field__input {
  display: block;
  width: 100%;
  min-height: max(2.75rem, 44px);
  padding: 0.5rem 0.625rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg);
  color: var(--color-text);
  font-family: inherit;
  /* Anything below 16px makes iOS zoom the viewport on focus. */
  font-size: max(1rem, 16px);
  line-height: 1.3;
  /* The native date control draws its own chrome; tell it which theme it is in
     so its icon and picker stay legible in Dark. Scoped to the inputs only. */
  color-scheme: light;
}

html[data-theme='dark'] .cc-field__input { color-scheme: dark; }

.cc-field__input:focus-visible {
  outline: var(--focus-ring);
  outline-offset: 1px;
}

/* While a booking request is pending the fields are read-only; say so without
   relying on colour alone (the button text and the live region carry it too). */
.cc-field__input[readonly] {
  background: var(--color-surface);
}

/* Invalid state is carried by three independent signals: the message text, the
   heavier border, and only then the colour. */
.cc-field__input--invalid {
  border-color: var(--color-error);
  border-width: 2px;
}

.cc-field__hint,
.cc-field__error {
  margin: 0.25rem 0 0;
  font-size: 0.8125rem;
  overflow-wrap: break-word;
}

.cc-field__hint { color: var(--color-muted); }

.cc-field__error {
  color: var(--color-error);
  font-weight: 600;
}

.cc-field__error[hidden] { display: none; }

.cc-form .cc-status-line {
  margin-top: 1.25rem;
}

.cc-form__actions {
  margin-top: 1.25rem;
}

/* --- Dirty-back confirmation ---------------------------------------------
   An in-page region, not a dialog: the form screen may not be replaced by a
   modal, and a plain region needs no focus trap in order to be correct. */

.cc-confirm {
  margin-top: 1.25rem;
  padding: clamp(12px, 3vw, 18px);
  border: 2px solid var(--color-error);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
}

.cc-confirm[hidden] { display: none; }

.cc-confirm__title {
  margin: 0 0 0.375rem;
  font-size: 1.0625rem;
  line-height: 1.3;
  color: var(--color-text);
  overflow-wrap: break-word;
  outline: none; /* focus is programmatic via tabindex="-1" */
}

.cc-confirm__text {
  margin: 0;
  color: var(--color-muted);
  overflow-wrap: break-word;
}

/* --- Unconfirmed-booking warning (CC-14) ---------------------------------
   Persistent across screens until reload. There is no warning token in the
   palette and none is invented: the error colour marks the edge, the title and
   the words carry the meaning. */

.cc-alert {
  margin: 0 0 1.25rem;
  padding: 0.75rem 0.875rem;
  border: 2px solid var(--color-error);
  border-left-width: 6px;
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-text);
  overflow-wrap: break-word;
}

.cc-alert[hidden] { display: none; }

.cc-alert__title {
  margin: 0 0 0.25rem;
  font-weight: 700;
}

.cc-alert__text {
  margin: 0;
  font-size: 0.9375rem;
}

.cc-alert__list {
  margin: 0.5rem 0 0;
  padding-left: 1.25rem;
  font-weight: 600;
}

.cc-steps {
  margin: 0 0 1rem;
  padding-left: 1.5rem;
  color: var(--color-text);
  overflow-wrap: break-word;
}

.cc-steps li + li { margin-top: 0.375rem; }

/* --- Booking details (success and not-confirmed) ---------------------------

   Created by callcenter.js and physically REMOVED from the document when the
   retention window closes. Never merely hidden — there is deliberately no
   display / visibility / opacity rule anywhere that could be mistaken for the
   cleanup. */

.cc-details {
  margin: 0 0 1rem;
  padding: clamp(12px, 3vw, 18px);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
}

.cc-details__list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.125rem 1rem;
  margin: 0;
}

.cc-details__term {
  font-size: 0.8125rem;
  color: var(--color-muted);
  overflow-wrap: break-word;
}

.cc-details__value {
  margin: 0 0 0.625rem;
  font-weight: 600;
  color: var(--color-text);
  overflow-wrap: break-word;
}

.cc-details__value:last-child { margin-bottom: 0; }

@media (min-width: 560px) {
  .cc-details__list {
    grid-template-columns: minmax(0, 14rem) minmax(0, 1fr);
    align-items: baseline;
  }

  .cc-details__term { grid-column: 1; }

  .cc-details__value {
    grid-column: 2;
    margin-bottom: 0.375rem;
  }
}

/* Functional timing, not decoration: no animation here, so neither reduced-motion
   mechanism has anything to disable and the countdown keeps working under both. */
.cc-countdown {
  margin: 0;
  font-size: 0.875rem;
  color: var(--color-muted);
  font-variant-numeric: tabular-nums;
}

/* --- High contrast — application components ------------------------------

   Both mechanisms get the same treatment, kept in step deliberately. No new
   token is introduced: the palettes above already swap, and what is added here
   is weight and fill, which colour-blind and low-vision users read as reliably
   as hue. */

@media (prefers-contrast: more) {
  .cc-btn,
  .cc-day,
  .cc-time,
  .cc-notice,
  .cc-selected,
  .cc-env-badge {
    border-width: 2px;
  }

  .cc-btn--primary,
  .cc-day--selected {
    color: var(--color-bg);
  }

  .cc-day--full { border-style: dashed; }

  /* Still heavier than the 2px every other bordered control gets here, so the
     selected time stays distinguishable when the palette collapses to two
     colours and the tint disappears. */
  .cc-time--selected { border-width: 3px; }

  .cc-field__input,
  .cc-details,
  .cc-confirm,
  .cc-alert { border-width: 3px; }
}

html[data-a11y-contrast="high"] .cc-btn,
html[data-a11y-contrast="high"] .cc-day,
html[data-a11y-contrast="high"] .cc-time,
html[data-a11y-contrast="high"] .cc-notice,
html[data-a11y-contrast="high"] .cc-selected,
html[data-a11y-contrast="high"] .cc-env-badge {
  border-width: 2px;
}

html[data-a11y-contrast="high"] .cc-btn--primary,
html[data-a11y-contrast="high"] .cc-day--selected {
  color: var(--color-bg);
}

html[data-a11y-contrast="high"] .cc-day--full { border-style: dashed; }

html[data-a11y-contrast="high"] .cc-time--selected { border-width: 3px; }

html[data-a11y-contrast="high"] .cc-field__input,
html[data-a11y-contrast="high"] .cc-details,
html[data-a11y-contrast="high"] .cc-confirm,
html[data-a11y-contrast="high"] .cc-alert { border-width: 3px; }