:root {
  /* Platform shell only. These values render fail-closed/unconfigured states and are not a hotel-branding fallback. */
  --shell-text: #172227;
  --shell-muted: #667278;
  --shell-background: #f5f3ef;
  --shell-surface: #ffffff;
  --shell-border: #e2ddd5;
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--shell-text);
  background: var(--shell-background);
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--shell-background); color: var(--shell-text); }
a { color: inherit; }
button, input, select { font: inherit; }
[hidden] { display: none !important; }
html:not([data-brand-ready="true"]) [data-requires-config] { display: none !important; }

html[data-brand-ready="true"] {
  font-family: var(--brand-font-body);
  color: var(--brand-text-primary);
  background: var(--brand-surface-canvas);
}
html[data-brand-ready="true"] body { background: var(--brand-surface-canvas); color: var(--brand-text-primary); }

.app-shell { width: min(100%, 760px); margin: 0 auto; min-height: 100vh; background: var(--shell-background); padding-bottom: 92px; }
html[data-brand-ready="true"] .app-shell { background: var(--brand-surface-canvas); }
.hero { padding: 24px 20px 28px; background: var(--shell-text); color: white; border-radius: 0 0 28px 28px; }
html[data-brand-ready="true"] .hero { background: var(--brand-action-primary-bg); color: var(--brand-action-primary-text); border-radius: 0 0 var(--brand-radius-card) var(--brand-radius-card); font-family: var(--brand-font-display, var(--brand-font-body)); }
.hero__top { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.hero__brand { display: flex; align-items: center; gap: 12px; min-width: 0; }
.hero__logo { width: 48px; height: 48px; border-radius: var(--brand-radius-control, 14px); object-fit: contain; background: rgba(255,255,255,.9); }
.hero__name { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lang-select { border: 0; border-radius: 999px; padding: 8px 10px; background: rgba(255,255,255,.96); color: var(--shell-text); }
html[data-brand-ready="true"] .lang-select { color: var(--brand-text-primary); }
.hero h1 { margin: 38px 0 8px; font-size: clamp(2rem, 8vw, 3.2rem); line-height: 1; }
.hero__media-wrap { margin: 0 0 18px; overflow: hidden; border-radius: var(--brand-radius-card, 16px); background: var(--brand-surface-raised, #fff); }
.hero__media { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; object-position: center; }

.hero p { margin: 0; max-width: 38rem; opacity: .9; }
.main { padding: 20px; }
.notice { background: var(--shell-surface); border: 1px solid var(--shell-border); border-radius: 18px; padding: 20px; margin-bottom: 20px; }
.notice h2 { margin: 0 0 8px; }
.notice p { margin: 0; color: var(--shell-muted); }
html[data-brand-ready="true"] .panel,
html[data-brand-ready="true"] .module-card,
html[data-brand-ready="true"] .info-card,
html[data-brand-ready="true"] .request-card {
  background: var(--brand-surface-raised);
  border: 1px solid var(--brand-border-subtle);
  border-radius: var(--brand-radius-card);
  box-shadow: var(--brand-shadow-card, none);
}
.section-head { margin: 22px 0 12px; }
.section-head h2 { margin: 0 0 4px; font-size: 1.25rem; font-family: var(--brand-font-display, inherit); }
.section-head p { margin: 0; color: var(--brand-text-muted, var(--shell-muted)); }
.grid { display: grid; gap: 12px; }
.info-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.info-card { display: flex; flex-direction: column; gap: 5px; padding: 16px; text-decoration: none; }
.info-card__label, .info-card small { color: var(--brand-text-muted, var(--shell-muted)); }
.info-card strong { font-size: 1.02rem; }
.module-card { padding: 18px; }
.module-card__title { margin: 0 0 6px; text-transform: capitalize; }
.module-card__description { color: var(--brand-text-muted, var(--shell-muted)); margin: 0 0 14px; }
.button { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 10px 16px; border-radius: var(--brand-radius-control, 14px); text-decoration: none; border: 0; cursor: pointer; }
html[data-brand-ready="true"] .button--primary { background: var(--brand-action-primary-bg); color: var(--brand-action-primary-text); }
.panel { padding: 18px; }
.empty { color: var(--brand-text-muted, var(--shell-muted)); margin: 0; }
.request-list { display: grid; gap: 10px; }
.request-card { padding: 15px; }
.request-card__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.request-card p { margin: 10px 0 0; color: var(--brand-text-muted, var(--shell-muted)); }
/* Protected semantic status treatment remains platform-owned. Exact final palette is intentionally deferred. */
.status { font-size: .78rem; border-radius: 999px; padding: 5px 9px; background: #edf0f1; color: #273238; white-space: nowrap; }
.assistant-form { display: flex; gap: 8px; }
.assistant-form input { flex: 1; min-width: 0; border: 1px solid var(--brand-border-subtle, var(--shell-border)); border-radius: var(--brand-radius-control, 14px); padding: 12px 14px; background: var(--brand-surface-raised, white); color: var(--brand-text-primary, var(--shell-text)); }
.assistant-output { margin-top: 14px; min-height: 54px; color: var(--brand-text-muted, var(--shell-muted)); white-space: pre-wrap; }
.bottom-nav { position: fixed; z-index: 20; left: 50%; transform: translateX(-50%); bottom: max(10px, env(safe-area-inset-bottom)); width: min(calc(100% - 20px), 720px); display: grid; grid-template-columns: repeat(5, 1fr); gap: 5px; padding: 7px; border: 1px solid var(--brand-border-subtle, var(--shell-border)); border-radius: 20px; background: rgba(255,255,255,.96); box-shadow: 0 12px 34px rgba(23,34,39,.18); backdrop-filter: blur(12px); }
.bottom-nav a { position: relative; text-decoration: none; text-align: center; padding: 9px 5px; border-radius: var(--brand-radius-control, 14px); font-size: .76rem; color: var(--brand-text-muted, var(--shell-muted)); }
html[data-brand-ready="true"] .bottom-nav a[aria-current="page"] { background: var(--brand-action-primary-bg); color: var(--brand-action-primary-text); }
.request-count { position: absolute; top: 2px; right: 5px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; background: var(--brand-decorative-accent, #6b7280); color: white; font-size: .68rem; }
.privacy-note { color: var(--brand-text-muted, var(--shell-muted)); font-size: .82rem; margin-top: 18px; }
@media (max-width: 520px) { .info-grid { grid-template-columns: 1fr; } .bottom-nav a { font-size: .68rem; } }

/* Step 32.5 — bounded service discovery/presentation. */
.quick-services-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.quick-services-grid .module-card { display: flex; flex-direction: column; min-height: 150px; }
.quick-services-grid .module-card .button { margin-top: auto; }
.service-groups { display: grid; gap: 24px; }
.service-group { min-width: 0; }
.service-group__title { margin: 0 0 10px; font-size: 1rem; color: var(--brand-text-muted, var(--shell-muted)); font-family: var(--brand-font-display, inherit); }
.service-group__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 520px) {
  .quick-services-grid, .service-group__grid { grid-template-columns: 1fr; }
  .quick-services-grid .module-card { min-height: auto; }
}

/* Step 39 — generic provider-neutral restaurant availability route. */
.availability-form { display: grid; gap: 14px; }
.availability-form label { display: grid; gap: 6px; color: var(--brand-text-muted, var(--shell-muted)); }
.availability-form input, .availability-form select { width: 100%; min-width: 0; border: 1px solid var(--brand-border-subtle, var(--shell-border)); border-radius: var(--brand-radius-control, 14px); padding: 12px 14px; background: var(--brand-surface-raised, white); color: var(--brand-text-primary, var(--shell-text)); }
.availability-output { margin-top: 16px; min-height: 24px; color: var(--brand-text-muted, var(--shell-muted)); }
.availability-slots { display: grid; grid-template-columns: repeat(auto-fit, minmax(82px, 1fr)); gap: 8px; margin-top: 10px; }
.availability-slot { min-height: 42px; padding: 8px 10px; border: 1px solid var(--brand-border-subtle, var(--shell-border)); border-radius: var(--brand-radius-control, 12px); background: var(--brand-surface-raised, white); color: var(--brand-text-primary, var(--shell-text)); text-align: center; }

/* Step42 generic guest regression fixes. */
.info-card__copy { margin-top: 8px; align-self: flex-start; }
.button--secondary { background: transparent; color: var(--brand-action-link, var(--shell-text)); border: 1px solid var(--brand-border-subtle, var(--shell-border)); }
.service-request-form { display: grid; gap: 14px; }
.service-request-form label { display: grid; gap: 6px; font-weight: 600; }
.service-request-form input, .service-request-form textarea { width: 100%; border: 1px solid var(--brand-border-subtle, var(--shell-border)); border-radius: var(--brand-radius-control, 10px); padding: 11px 12px; background: var(--brand-surface-raised, white); color: var(--brand-text-primary, var(--shell-text)); font: inherit; }
.service-request-form textarea { resize: vertical; }
.service-request-output { margin-top: 12px; min-height: 24px; color: var(--brand-text-muted, var(--shell-muted)); }

@media (max-width: 520px) { .hero__media { aspect-ratio: 4 / 3; } }

.service-room-help { font-weight: 400; color: var(--brand-text-muted, var(--shell-muted)); line-height: 1.45; }

/* Step42 generic reservation + assistant action parity. */
.restaurant-reservation-form { margin-top: 18px; display: grid; gap: 12px; }
.restaurant-reservation-form[hidden] { display: none !important; }
.restaurant-reservation-form label { display: grid; gap: 6px; font-weight: 700; }
.restaurant-reservation-form input,
.restaurant-reservation-form select,
.restaurant-reservation-form textarea { width: 100%; min-height: 44px; padding: 10px 12px; border: 1px solid var(--brand-border-subtle, var(--shell-border)); border-radius: var(--brand-radius-control, 8px); background: var(--brand-surface-raised, #fff); color: var(--brand-text-primary, var(--shell-text)); }
.assistant-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.assistant-actions:empty { display: none; }
.assistant-actions .button { text-decoration: none; }


/* Step42 Prompt E — generic practical knowledge/link/status projections. */
.info-card__status { font-weight: 700; color: var(--brand-action-link, var(--shell-text)); }
.knowledge-grid, .external-links-grid { grid-template-columns: 1fr; }
.knowledge-card { padding: 16px; background: var(--brand-surface-raised, #fff); border: 1px solid var(--brand-border-subtle, var(--shell-border)); border-radius: var(--brand-radius-card, 12px); }
.knowledge-card h3 { margin: 0 0 7px; font-size: 1rem; }
.knowledge-card p { margin: 0; color: var(--brand-text-muted, var(--shell-muted)); line-height: 1.5; white-space: pre-wrap; }
#practical-support-section, #external-links-section, #guest-knowledge-section { margin-top: 22px; }


/* Step44A2 — generic Branding Engine layout-recipe consumers.
   Recipe identifiers are allowlisted in brand-engine.js; these selectors never
   encode hotel identity or hotel-specific asset URLs. */
html[data-brand-context="guest"][data-brand-card-recipe="soft_cards"] .panel,
html[data-brand-context="guest"][data-brand-card-recipe="soft_cards"] .module-card,
html[data-brand-context="guest"][data-brand-card-recipe="soft_cards"] .info-card,
html[data-brand-context="guest"][data-brand-card-recipe="soft_cards"] .request-card,
html[data-brand-context="guest"][data-brand-card-recipe="soft_cards"] .knowledge-card {
  border-radius: var(--brand-radius-card);
  background: var(--brand-surface-raised);
  border-color: var(--brand-border-subtle);
  box-shadow: var(--brand-shadow-card, none);
}

html[data-brand-context="guest"][data-brand-section-recipe="stacked"] .main {
  display: grid;
  gap: 0;
}
html[data-brand-context="guest"][data-brand-section-recipe="stacked"] .section-head {
  margin-top: 22px;
}
html[data-brand-context="guest"][data-brand-section-recipe="airy"] .main {
  padding-block: 26px;
}
html[data-brand-context="guest"][data-brand-section-recipe="airy"] .section-head {
  margin: 32px 0 16px;
}
html[data-brand-context="guest"][data-brand-section-recipe="airy"] .grid {
  gap: 16px;
}

html[data-brand-context="guest"][data-brand-hero-recipe="editorial_image"] .hero__media-wrap {
  border: 1px solid var(--brand-border-subtle);
}
html[data-brand-context="guest"][data-brand-media-strategy="image_led"] .hero__media {
  aspect-ratio: 4 / 3;
}
html[data-brand-context="guest"][data-brand-media-strategy="text_led"] .hero__media {
  aspect-ratio: 16 / 9;
}

@media (min-width: 700px) {
  html[data-brand-context="guest"] .app-shell { width: min(100%, 1040px); }
  html[data-brand-context="guest"][data-brand-hero-recipe="editorial_image"] .hero {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(280px, .9fr);
    grid-template-areas:
      "top media"
      "title media"
      "copy media";
    column-gap: 30px;
    align-items: center;
    padding: 30px;
  }
  html[data-brand-context="guest"][data-brand-hero-recipe="editorial_image"] .hero__top { grid-area: top; align-self: start; }
  html[data-brand-context="guest"][data-brand-hero-recipe="editorial_image"] .hero h1 { grid-area: title; margin: 52px 0 10px; }
  html[data-brand-context="guest"][data-brand-hero-recipe="editorial_image"] .hero > p { grid-area: copy; align-self: start; }
  html[data-brand-context="guest"][data-brand-hero-recipe="editorial_image"] .hero__media-wrap {
    grid-area: media;
    margin: 0;
    width: 100%;
    align-self: stretch;
  }
  html[data-brand-context="guest"][data-brand-hero-recipe="editorial_image"] .hero__media { height: 100%; min-height: 300px; aspect-ratio: auto; }
  html[data-brand-context="guest"][data-brand-hero-recipe="editorial_image"][data-brand-media-strategy="image_led"] .hero {
    grid-template-columns: minmax(280px, .8fr) minmax(0, 1.2fr);
  }
  html[data-brand-context="guest"][data-brand-hero-recipe="editorial_image"][data-brand-media-strategy="image_led"] .hero__media { min-height: 360px; }
}