:root {
  --brand-red: #E4342F;
  --brand-red-dark: #B32821;
  --brand-teal: #12A594;
  --brand-teal-dark: #0B7A6E;
  --brand-blue: #2E6DA4;
  --brand-yellow: #F5B60D;

  --brand-bg: #F7F6F2;
  --brand-surface: #FFFFFF;
  --brand-text: #24211D;
  --brand-muted: #6B6659;
  --brand-border: #E4E0D6;

  --brand-font: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

/* Force one consistent typeface platform-wide, overriding each legacy
   page's own font-family declarations (Segoe UI/Tahoma/etc). Loaded via
   Google Fonts in every page's <head>, before the page's own <style>. */
html, body, * {
  font-family: var(--brand-font) !important;
}
* { box-sizing: border-box !important; }
html, body { max-width: 100%; overflow-x: hidden; }
img, svg, canvas { max-width: 100%; }

.ph {
  vertical-align: -2px;
}

/* ---- Shared top navigation bar injected into every tool page ---- */
.maharat-topbar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  background: var(--brand-surface);
  border-bottom: 3px solid var(--brand-red);
  flex-wrap: nowrap;
}
.maharat-topbar a.maharat-home-link {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--brand-text);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.9rem;
  white-space: nowrap;
}
.maharat-topbar a.maharat-home-link i.ph {
  font-size: 1.15rem;
  color: var(--brand-teal);
}
.maharat-topbar a.maharat-home-link:hover {
  color: var(--brand-teal-dark);
}
.maharat-topbar .maharat-spacer {
  flex: 1;
  min-width: 8px;
}
.maharat-topbar .maharat-tool-label {
  color: var(--brand-muted);
  font-size: 0.78rem;
  text-align: right;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 55vw;
}

/* Headings that pair an icon with text (h1/h2 across the legacy pages)
   should never let the glyph collide with wrapped text on narrow screens. */
h1, h2, h3 {
  display: flex;
  align-items: center;
  gap: 0.4em;
  flex-wrap: wrap;
  text-wrap: balance;
}

@media (max-width: 640px) {
  .maharat-topbar {
    padding: 8px 12px;
  }
  .maharat-topbar a.maharat-home-link {
    font-size: 0.82rem;
  }
  .maharat-topbar .maharat-tool-label {
    font-size: 0.7rem;
    max-width: 40vw;
  }
  h1 { font-size: clamp(1.1rem, 5vw, 1.4rem) !important; }
  h2 { font-size: clamp(0.95rem, 4.2vw, 1.15rem) !important; }
  h3 { font-size: clamp(0.85rem, 3.8vw, 1rem) !important; }
  body { font-size: 0.82rem !important; }

  /* Reclaim wasted horizontal space: the legacy templates were built
     desktop-first with a padded body, fixed max-width containers, and
     card shadows/radius meant for a floating desktop card. On phones
     that just eats width as dead green gutter — go edge-to-edge. */
  html, body {
    padding: 0 !important;
    margin: 0 !important;
    max-width: 100% !important;
  }
  .container, main, [class*="container"], [class*="wrapper"] {
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }
  .header, [class*="header"], .section, [class*="section"],
  [class*="card"], [class*="box"], [class*="panel"],
  .content, [class*="content"], .body, [class*="body-"],
  footer, [class*="footer"], [class*="empty"], [class*="no-results"],
  [class*="results"], [class*="summary"], [class*="report"] {
    padding: 8px !important;
    margin: 0 0 8px !important;
    border-radius: 4px !important;
    box-shadow: none !important;
  }
  p, label, span, li, td, th { font-size: 0.8rem !important; }
  input, textarea, select, button {
    font-size: 0.85rem !important;
    padding: 6px !important;
  }

  /* Any multi-column CSS grid collapses to one column on phones
     (e.g. the Antecedent/Behavior/Consequence 3-column grid). */
  *:not(.maharat-topbar):not(.maharat-topbar *) {
    grid-template-columns: 1fr !important;
  }

  /* Flex rows (tab bars, side-by-side fields) wrap onto multiple lines
     at each item's own natural size instead of overflowing. Deliberately
     NOT paired with min-width:0 — that let items shrink infinitely
     instead of wrapping, squeezing e.g. a 10-tab bar into unreadable
     39px slivers on one line rather than wrapping to readable rows. */
  *:not(.maharat-topbar):not(.maharat-topbar *) {
    flex-wrap: wrap !important;
  }

  /* Long tab labels (e.g. "DSQSCS 2.0 Framework") set to white-space:
     nowrap visually bleed into the next tab instead of wrapping onto a
     second line within their own box. Let them wrap. */
  button:not(.maharat-topbar *), a:not(.maharat-topbar *) {
    white-space: normal !important;
  }
}
