/* ============================================================
   AI Concierge — Coming Soon panel.

   A NEW stylesheet rather than an addition to main.css or
   contact.css, deliberately: those hold the header, footer and
   floating-widget work owned elsewhere, and a new feature has no
   business editing them.

   Inherits the site's tokens rather than restating colour, so a
   brand change reaches this surface too. Every token carries a
   literal fallback, because an undefined custom property renders
   as nothing at all — an invisible panel rather than an unstyled
   one, on any page that does not define the full token set.

   Nothing here is `position: fixed`. The concierge is not a
   floating action button; the production rule is exactly one and
   the WhatsApp float holds it. See assets/js/concierge.js.
   ============================================================ */

.mrai {
  /* Secondary text, derived from the panel's OWN ink rather than borrowed.
     Two things went wrong before this and both are worth naming:

       · The page's `--muted` token is authored against the site's dark page
         background. This panel paints on `--surface`, which is near-white, so
         inheriting it put light grey on near-white at 2.48:1 against a WCAG AA
         requirement of 4.5:1.

       · Replacing it with a `prefers-color-scheme: dark` override was no better.
         The site themes through tokens, not through the OS preference, so a
         browser reporting "dark" still got the near-white surface — and the
         dark muted value on it measured 2.47:1.

     The OS preference was never the right signal. Muted text is simply the
     panel's own ink at reduced strength, which is contrast-correct on any
     surface that the ink is correct on, in either theme, with no media query.
     The flat value below is the fallback for browsers without `color-mix`. */
  --mrai-muted: #5c5750;

  display: block;
  max-width: 46rem;
  margin-inline: auto;
  padding: clamp(1.5rem, 4vw, 2.75rem);
  border: 1px solid var(--line, #e5e0d8);
  border-radius: 16px;
  background: var(--surface, #fff);
  color: var(--ink, #1f2937);
  text-align: center;
}

/* ── HEAD ─────────────────────────────────────────────────── */

.mrai__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1.25rem;
}

.mrai__icon {
  display: block;
  color: var(--accent, #5b4b3a);
}

/* The "coming soon" marker. A quiet label rather than a shouting
   badge — the panel is an explanation, not a promotion. */
.mrai__badge {
  margin: 0;
  padding: 0.3rem 0.85rem;
  border: 1px solid var(--line, #e5e0d8);
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mrai-muted);
  background: rgba(91, 75, 58, 0.06);
}

.mrai__title {
  margin: 0;
  font-size: clamp(1.4rem, 3.5vw, 2rem);
  line-height: 1.2;
}

/* ── COPY ─────────────────────────────────────────────────── */

.mrai__lede {
  margin: 0 0 0.85rem;
  font-size: clamp(1rem, 2.2vw, 1.1rem);
  font-weight: 600;
  line-height: 1.55;
}

.mrai__body {
  margin: 0 0 0.85rem;
  color: var(--mrai-muted);
  line-height: 1.65;
}

/* ── DEPARTMENTS ──────────────────────────────────────────── */

.mrai__depts {
  margin: 1.75rem 0 0;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line, #e5e0d8);
  text-align: left;
}

.mrai__depts-title {
  margin: 0 0 1rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mrai-muted);
  text-align: center;
}

/* Auto-fit rather than a fixed column count, so the list reflows
   from one column on a phone to two or three on a wide screen
   without a breakpoint per layout. The department list is
   configuration-driven and may grow; a hand-tuned grid would need
   editing every time it does. */
.mrai__list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: 0.85rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.mrai__dept {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding: 0.85rem 1rem;
  border: 1px solid var(--line, #e5e0d8);
  border-radius: 10px;
  background: rgba(91, 75, 58, 0.035);
}

.mrai__dept-name {
  font-weight: 600;
  font-size: 0.95rem;
}

.mrai__dept-blurb {
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--mrai-muted);
}

/* ── FOOTER LINE ──────────────────────────────────────────── */

.mrai__meanwhile {
  margin: 1.75rem 0 0;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line, #e5e0d8);
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--mrai-muted);
}

.mrai__link {
  color: var(--accent, #5b4b3a);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.mrai__link:focus-visible {
  outline: 3px solid var(--accent, #5b4b3a);
  outline-offset: 2px;
  border-radius: 3px;
}

/* ── NARROW SCREENS ───────────────────────────────────────── */

@media (max-width: 30rem) {
  .mrai { border-radius: 12px; }
  .mrai__depts { text-align: center; }
  .mrai__dept { text-align: left; }
}

/* ── DARK MODE ────────────────────────────────────────────── */

/* Matches how the rest of the site handles dark: a media query
   over token fallbacks. Where the page already defines the tokens
   these rules are inert, which is the intended behaviour — the
   design system wins wherever it is present. */
/* Where `color-mix` is available, muted text follows the ink automatically —
   one declaration that is correct in both themes and on any surface the design
   system hands this panel. */
@supports (color: color-mix(in srgb, red 50%, transparent)) {
  .mrai { --mrai-muted: color-mix(in srgb, var(--ink, #1f2937) 74%, transparent); }
}

/* The panel takes its background, ink and rules from the design system's
   tokens, so it is already dark in the dark theme and light in the light one.
   There is deliberately no `prefers-color-scheme` override here: this site
   themes through tokens, and a media query second-guessing them is how the
   contrast failure above happened. The tints below are alpha over whatever
   surface is in play, so they darken or lighten with it. */

/* ── REDUCED MOTION ───────────────────────────────────────── */

/* Nothing here animates today. The rule is declared so that if a
   future activation adds a typing indicator or a panel
   transition, the preference is already respected rather than
   remembered later. */
@media (prefers-reduced-motion: reduce) {
  .mrai *,
  .mrai *::before,
  .mrai *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}