:root {
  /* Colours (Mint Ward) */
  --sn-blue: #005EB8;
  --sn-teal: #1FB6A6;
  --sn-teal-deep: #0E7C74;
  --sn-bg: #F7F4EF;
  --sn-card: #FFFFFF;
  --sn-ink: #1F2A37;
  --sn-border: #E6EEF5;

  --sn-coral: #FF6B6B;
  --sn-amber: #FFB020;
  --sn-danger: #E24A4A;
  --sn-success: #2FBF71;
  --sn-info-tint: #D7F3F0;

  /* Typography stacks */
  --font-heading: "Source Sans 3", "Noto Sans", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --font-body: "Inter", "Noto Sans", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
}

html, body { height: 100%; }

body {
  margin: 0;
  background: var(--sn-bg);
  color: var(--sn-ink);
  font-family: var(--font-body);
  font-weight: 400;
}

/* Headings */
.sn-h1, .sn-h2, h1, h2, h3 {
  font-family: var(--font-heading);
  letter-spacing: 0.2px;
}

.sn-h1 {
  font-size: 1.65rem;
  line-height: 1.1;
  margin: 0;
  font-weight: 700;
}

.sn-h2 {
  font-size: 1.15rem;
  line-height: 1.2;
  margin: 0;
  font-weight: 700;
}

.sn-tagline {
  margin: 0;
  font-size: 0.98rem;
  color: rgba(31, 42, 55, 0.72);
  font-family: var(--font-body);
  font-weight: 500;
}

/* Brand mark */
.sn-mark {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: rgba(31, 182, 166, 0.14);
  border: 1px solid rgba(14, 124, 116, 0.18);
}

/* Cards */
.sn-card {
  background: var(--sn-card);
  border: 1px solid var(--sn-border);
  border-radius: 18px;
  box-shadow: 0 10px 30px rgba(14, 124, 116, 0.06);
}

/* Chips */
.sn-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.32rem 0.6rem;
  border-radius: 999px;
  background: rgba(215, 243, 240, 0.55);
  border: 1px solid rgba(14, 124, 116, 0.14);
  color: rgba(14, 124, 116, 0.95);
  font-size: 0.85rem;
  font-weight: 600;
  font-family: var(--font-body);
}

/* Buttons */
.btn {
  border-radius: 14px;
  font-family: var(--font-body);
  font-weight: 600;
  line-height: 1.1; /* hardening */
}

.btn-sn-primary, .btn-sn-secondary {
  background: var(--sn-card);
  color: var(--sn-blue);
  border: 1px solid rgba(0, 94, 184, 0.22);
  box-shadow: 0 10px 22px rgba(255, 107, 107, 0.22);
}

.btn-sn-primary:hover, .btn-sn-secondary:hover {
  color: #fff;
  background: var(--sn-coral);
  filter: brightness(0.98);
}

.btn-sn-ghost {
  background: transparent;
  color: var(--sn-ink);
  border: 1px solid rgba(31, 42, 55, 0.14);
}

.btn-sn-ghost:hover { filter: brightness(0.99); }

/* Inputs */
.form-control, .form-select, textarea {
  border-radius: 14px !important;
  border: 1px solid rgba(31, 42, 55, 0.14);
  font-family: var(--font-body);
}

.form-control:focus, .form-select:focus, textarea:focus {
  border-color: rgba(31, 182, 166, 0.55);
  box-shadow: 0 0 0 .25rem rgba(31, 182, 166, 0.18);
}

/* Toast wrap */
.sn-toast-wrap {
  position: fixed;
  top: 14px;
  right: 14px;
  z-index: 9999;
  width: min(360px, calc(100vw - 28px));
}

/* Reduce motion mode */
.reduce-motion * {
  animation: none !important;
  transition: none !important;
}

/* Ward Map (PNG + hotspots) */
.wardmap-wrap {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid var(--sn-border);
  background: rgba(215, 243, 240, 0.25);
}

.wardmap-overlay {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  pointer-events: none; /* allow clicks to fall through except buttons */
  z-index: 2;
}

.wardmap-cell {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 14px;
  pointer-events: none;
}

.wardmap-cta {
  pointer-events: auto; /* buttons clickable */
  min-width: 180px;
  max-width: 80%;
  box-shadow: 0 10px 24px rgba(31, 42, 55, 0.18);
}

.wardmap-cta-top { margin-bottom: 10px; }

.wardmap-img {
  display: block;
  width: 100%;
  height: auto;
  transition: transform 180ms ease, filter 180ms ease;
  transform: translateZ(0);
  position: relative;
  z-index: 1;
}

/* Desktop vs Mobile map switching */
.wardmap-desktop { display: block; }
.wardmap-mobile  { display: none; }

/* Mobile stacked room cards */
.room-card {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid var(--sn-border);
  background: rgba(215, 243, 240, 0.25);
  margin-bottom: 12px;
}

.room-card-img {
  display: block;
  width: 100%;
  height: auto;
}

/* Button overlay bottom-centre */
.room-card-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 12px;
  pointer-events: none;
}

.room-card-overlay .wardmap-cta {
  pointer-events: auto;
  min-width: 180px;
  max-width: 85%;
  box-shadow: 0 10px 24px rgba(31, 42, 55, 0.18);
}

/* Logo */
.sn-logo-wrap {
  display: flex;
  align-items: center;
}
.sn-logo {
  display: block;
  width: 240px; /* adjust if you want smaller/larger */
  height: auto;
}

/* Hover / focus lift */
@media (hover: hover) {
  .room-card {
    transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
  }

  .room-card:hover {
    transform: translateY(-3px);
    border-color: rgba(31, 182, 166, 0.35);
    box-shadow: 0 18px 40px rgba(14, 124, 116, 0.14);
  }

  .room-card:hover .room-card-img {
    filter: saturate(1.03) contrast(1.02);
    transition: filter 180ms ease;
  }

  .wardmap-cta {
    transition: transform 160ms ease, box-shadow 160ms ease, filter 160ms ease;
  }

  .wardmap-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 34px rgba(31, 42, 55, 0.22);
    filter: saturate(1.02) contrast(1.02);
  }

  .wardmap-wrap:hover .wardmap-img {
    transform: scale(1.01);
    filter: saturate(1.06) contrast(1.03);
  }

  .wardmap-wrap .wardmap-cta:hover {
    box-shadow: 0 16px 34px rgba(31, 42, 55, 0.22);
    transform: translateY(-2px);
  }

  .wardmap-wrap:focus-within .wardmap-img {
    transform: scale(1.01);
    filter: saturate(1.06) contrast(1.03);
  }
}

/* Keyboard focus */
.room-card:focus-within,
.wardmap-wrap:focus-within {
  outline: 3px solid rgba(31, 182, 166, 0.28);
  outline-offset: 3px;
  border-radius: 18px;
}

@media (max-width: 767px) {
  .wardmap-desktop { display: none; }
  .wardmap-mobile  { display: block; }
}

@media (max-width: 576px) {
  .wardmap-cell { padding: 10px; }
  .wardmap-cta {
    min-width: 140px;
    font-size: 0.9rem;
    border-radius: 14px;
  }
}

@media (max-width: 480px) {
  .sn-logo { width: 190px; }
}

/* -------------------------------------------------
   Draft list layout helpers (expected by ui.js)
-------------------------------------------------- */
.sn-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.sn-list-item {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--sn-border);
  background: rgba(255, 255, 255, 0.92);
  border-radius: 16px;
}

.sn-list-main { min-width: 0; }

.sn-list-title {
  font-weight: 800;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.sn-list-meta {
  margin-top: 4px;
  font-size: 0.9rem;
}

.sn-list-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

/* -------------------------------------------------
   New schema UI primitives (KEEP)
-------------------------------------------------- */
.sn-section {
  padding: 14px;
  border-radius: 18px;
  border: 1px solid var(--sn-border);
  background: rgba(255, 255, 255, 0.9);
}

.sn-section + .sn-section { margin-top: 12px; }

.sn-section-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.sn-section-title .sn-h2 { margin: 0; }

.sn-muted { color: rgba(31, 42, 55, 0.7); }

.sn-pill-group {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.sn-pill {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(31, 42, 55, 0.14);
  background: rgba(215, 243, 240, 0.38);
  color: rgba(31, 42, 55, 0.92);
  cursor: pointer;
  user-select: none;
  transition: transform 120ms ease, filter 120ms ease, box-shadow 120ms ease, border-color 120ms ease;
}

.sn-pill:hover {
  filter: saturate(1.03);
  border-color: rgba(31, 182, 166, 0.35);
}

.sn-pill input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.sn-pill .sn-pill-dot {
  width: 12px;
  height: 12px;
  border-radius: 999px;
  border: 2px solid rgba(14, 124, 116, 0.45);
  background: transparent;
  flex: 0 0 auto;
}

.sn-pill input:checked + .sn-pill-dot {
  background: rgba(14, 124, 116, 0.85);
  border-color: rgba(14, 124, 116, 0.85);
}

.sn-pill .sn-pill-text {
  font-weight: 600;
  font-size: 0.92rem;
}

.sn-pill input:checked ~ .sn-pill-text {
  color: rgba(14, 124, 116, 0.98);
}

.sn-pill--danger { background: rgba(226, 74, 74, 0.10); }
.sn-pill--amber  { background: rgba(255, 176, 32, 0.12); }
.sn-pill--ok     { background: rgba(47, 191, 113, 0.10); }

.sn-must-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(31, 42, 55, 0.14);
  background: rgba(215, 243, 240, 0.55);
  font-weight: 700;
  font-size: 0.92rem;
}

.sn-must-badge[data-risk="low"]  { background: rgba(47, 191, 113, 0.12); }
.sn-must-badge[data-risk="med"]  { background: rgba(255, 176, 32, 0.16); }
.sn-must-badge[data-risk="high"] { background: rgba(226, 74, 74, 0.12); }

.sn-infobox {
  border-radius: 16px;
  border: 1px solid rgba(14, 124, 116, 0.18);
  background: rgba(215, 243, 240, 0.45);
  padding: 12px;
}

.sn-infobox p {
  margin: 0;
  color: rgba(31, 42, 55, 0.85);
}

.sn-preview {
  border-radius: 18px;
  border: 1px solid var(--sn-border);
  background: rgba(255, 255, 255, 0.92);
  padding: 12px;
}

.sn-preview pre,
.sn-preview .sn-preview-text {
  margin: 0;
  white-space: pre-wrap;
  word-break: break-word;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 0.93rem;
  line-height: 1.35;
  color: rgba(31, 42, 55, 0.92);
}

@media (min-width: 992px) {
  .sn-sticky {
    position: sticky;
    top: 14px;
  }
}

.sn-help {
  font-size: 0.88rem;
  color: rgba(31, 42, 55, 0.70);
}

.sn-divider {
  height: 1px;
  background: rgba(31, 42, 55, 0.10);
  border: 0;
  margin: 12px 0;
}

/* HARDENING PATCHES */
.wardmap-overlay { pointer-events: none; }
.wardmap-overlay .wardmap-cta { pointer-events: auto; }

/* -------------------------------------------------
   Mobile burger menu for header actions
-------------------------------------------------- */

.sn-header-actions {
  position: relative; /* anchors dropdown */
}

.sn-burger {
  display: none;
}

/* desktop: panel inline */
.sn-navpanel {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
}

/* mobile: collapse panel into dropdown */
@media (max-width: 767px) {
  .sn-burger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .sn-navpanel {
    display: none;
    position: absolute;
    right: 0;
    top: 100%;
    margin-top: 10px;
    background: var(--sn-card);
    border: 1px solid var(--sn-border);
    border-radius: 16px;
    padding: 10px;
    box-shadow: 0 16px 40px rgba(31, 42, 55, 0.18);
    min-width: 240px;
    z-index: 2000;

    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }

  .sn-navpanel .btn {
    width: 100%;
    justify-content: center;
  }

  /* open state */
  body.sn-menu-open .sn-navpanel {
    display: flex;
  }
}

/* ==========================================================
   Core Field Groups (collapsible accordion within sectionCard)
========================================================== */
.sn-core-group {
  border: 1px solid var(--sn-border);
  border-radius: 12px;
  overflow: hidden;
}

.sn-core-group-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  background: rgba(247, 244, 239, 0.7);
  border: none;
  padding: 11px 14px;
  cursor: pointer;
  text-align: left;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--sn-ink);
  transition: background 0.15s;
}

.sn-core-group-toggle:hover,
.sn-core-group-toggle:focus-visible {
  background: rgba(31, 182, 166, 0.08);
  outline: none;
}

.sn-core-group-icon {
  font-size: 1rem;
  flex-shrink: 0;
}

.sn-core-group-title {
  flex: 1;
}

.sn-core-group-chevron {
  font-size: 1.1rem;
  color: var(--sn-teal-deep);
  transition: transform 0.2s;
  display: inline-block;
  line-height: 1;
}

/* Rotate chevron when open — Bootstrap adds aria-expanded="true" */
.sn-core-group-toggle[aria-expanded="true"] .sn-core-group-chevron {
  transform: rotate(90deg);
}

.sn-core-group-body {
  padding: 12px 14px 4px;
  background: #fff;
}

@media (prefers-reduced-motion: reduce) {
  .sn-core-group-chevron { transition: none; }
}

/* ==========================================================
   Clinical Guidance Cards
========================================================== */
.sn-guidance-card {
  border-radius: 14px;
  border-left: 4px solid transparent;
  padding: 14px 16px;
  margin-bottom: 12px;
  font-size: 0.94rem;
}

/* Info — teal/blue */
.sn-guidance-info {
  background: rgba(215, 243, 240, 0.55);
  border-left-color: var(--sn-teal);
}

/* Consider — amber */
.sn-guidance-consider {
  background: rgba(255, 176, 32, 0.10);
  border-left-color: var(--sn-amber);
}

/* Act now — red, pulsing border */
.sn-guidance-act-now {
  background: rgba(226, 74, 74, 0.08);
  border-left-color: var(--sn-danger);
  animation: sn-pulse-border 1.8s ease-in-out infinite;
}

@keyframes sn-pulse-border {
  0%, 100% { border-left-color: var(--sn-danger); }
  50%       { border-left-color: rgba(226, 74, 74, 0.3); }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .sn-guidance-act-now { animation: none; }
}

.sn-guidance-header {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}

.sn-guidance-badge {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  white-space: nowrap;
  padding-top: 2px;
}

.sn-guidance-headline {
  font-weight: 600;
  color: var(--sn-ink);
  line-height: 1.3;
}

.sn-guidance-body {
  color: rgba(31, 42, 55, 0.88);
  line-height: 1.55;
  margin-bottom: 8px;
}

.sn-guidance-urgency-note {
  background: rgba(226, 74, 74, 0.10);
  border-left: 3px solid var(--sn-danger);
  border-radius: 0 8px 8px 0;
  padding: 7px 12px;
  font-size: 0.88rem;
  color: var(--sn-ink);
  margin-bottom: 10px;
  line-height: 1.45;
}

.sn-guidance-actions-label {
  font-size: 0.85rem;
  font-weight: 600;
  color: rgba(31, 42, 55, 0.70);
  margin-bottom: 6px;
}

.sn-guidance-actions {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-bottom: 10px;
}

.sn-guidance-action {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 0.92rem;
  cursor: pointer;
  line-height: 1.4;
}

.sn-guidance-action input[type="checkbox"] {
  margin-top: 3px;
  flex-shrink: 0;
  accent-color: var(--sn-teal-deep);
  width: 16px;
  height: 16px;
}

.sn-guidance-sources {
  font-size: 0.80rem;
  color: rgba(31, 42, 55, 0.60);
  margin-bottom: 10px;
  line-height: 1.5;
}

.sn-guidance-source-link {
  color: var(--sn-teal-deep);
  text-decoration: none;
}
.sn-guidance-source-link:hover {
  text-decoration: underline;
}

.sn-guidance-footer {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 4px;
}