/*
 * Tyler palette, sampled from tylertech.com and the logo artwork.
 * --brand-primary, --brand-accent and --brand-header are overridden per site from "Site:Colors" via /css/brand.css.
 */
:root {
  --brand-primary: #1078c0;   /* Tyler Blue: nav, buttons, links, footer */
  --brand-accent: #2f9fc0;    /* Teal: accents and large text only (3.1:1 on white) */
  --brand-header: #00508a;    /* Deep Blue: header and gradient start */
  --brand-cyan: #3fb9c7;      /* Gradient end, from the banner artwork */
  --mark-blue: #40528f;       /* Logo mark */
  --mark-green: #8f9b49;      /* Logo mark */

  --text: #3c3f46;
  --muted: #5f6672;
  --border: #d8dee6;
  --surface: #f3f6f9;
  --font: "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: "Cascadia Code", Consolas, "SFMono-Regular", Menlo, monospace;
}

* { box-sizing: border-box; }

html, body { margin: 0; }

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  font-family: var(--font);
  color: var(--text);
  background: #fff;
  line-height: 1.6;
}

.container {
  width: 100%;
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

:focus-visible { outline: 3px solid var(--brand-accent); outline-offset: 2px; }

.skip-link {
  position: absolute;
  left: -999px;
  top: 0.5rem;
  z-index: 10;
  padding: 0.5rem 1rem;
  background: #fff;
  color: var(--brand-primary);
  border-radius: 4px;
}
.skip-link:focus { left: 0.5rem; }

/* Header */
.site-header {
  background: linear-gradient(90deg, var(--brand-header) 0%, var(--brand-primary) 100%);
  color: #fff;
  position: relative;
}

.site-header::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--brand-accent), var(--brand-cyan));
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  padding-top: 1rem;
  padding-bottom: calc(1rem + 4px);
}

.brand {
  display: flex;
  align-items: center;
  gap: 1rem;
  color: #fff;
  text-decoration: none;
}

.brand-logo { height: 40px; width: auto; display: block; }

.brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
  padding-left: 1rem;
  border-left: 1px solid rgba(255, 255, 255, 0.35);
}
.brand .product { font-weight: 600; font-size: 1.05rem; }
.brand .tagline { font-size: 0.8rem; opacity: 0.85; }
.brand .tagline:empty { display: none; }

.site-nav { display: flex; gap: 0.25rem; flex-wrap: wrap; }

.site-nav a {
  color: #fff;
  text-decoration: none;
  padding: 0.4rem 0.9rem;
  border-radius: 999px;
  font-size: 0.95rem;
}

.site-nav a:hover { background: rgba(255, 255, 255, 0.12); }
.site-nav a.active { background: rgba(255, 255, 255, 0.2); font-weight: 600; }

/* Main */
main { flex: 1; }
.content { padding-top: 2.5rem; padding-bottom: 3rem; }

/* Buttons, styled after the pill buttons on tylertech.com */
.button {
  display: inline-block;
  padding: 0.6rem 1.5rem;
  border: 2px solid var(--brand-primary);
  border-radius: 999px;
  background: var(--brand-primary);
  color: #fff;
  font-weight: 600;
  text-decoration: none;
  transition: background-color 0.15s, color 0.15s;
}
.button:hover { background: var(--brand-header); border-color: var(--brand-header); }

.button-outline { background: transparent; color: var(--brand-primary); }
.button-outline:hover { background: var(--brand-primary); color: #fff; }

/* Footer */
.site-footer {
  background: var(--brand-primary);
  color: #fff;
  font-size: 0.875rem;
  padding: 1.25rem 0;
}

.footer-inner { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; }
.footer-mark { height: 28px; width: 28px; }
.site-footer a { color: #fff; }
.footer-links { margin-left: auto; display: flex; gap: 1.25rem; flex-wrap: wrap; }
.footer-version { font: 0.8rem var(--mono); opacity: 0.85; }

/* Environment badge (footer). Light pills with dark ink stay readable on the blue footer; the dot repeats the color. */
.env-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.1rem 0.6rem;
  border-radius: 999px;
  border: 1px solid transparent;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1.5;
}
.env-badge::before {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: currentColor;
}
.env-badge-development { background: #e3f4e8; color: #14532d; border-color: #86c79a; } /* Green: safe to experiment */
.env-badge-test        { background: #efe8fb; color: #4c1d95; border-color: #b9a3e6; } /* Purple: shared test data */
.env-badge-staging     { background: #fff1d1; color: #6b3e00; border-color: #f2a900; } /* Amber: production-like */
.env-badge-production  { background: #fde7e7; color: #8a1414; border-color: #e58c8c; } /* Red: live data */
.env-badge-other       { background: rgba(255, 255, 255, 0.18); color: #fff; border-color: rgba(255, 255, 255, 0.45); }

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

/* Rendered markdown */
.markdown-body h1,
.markdown-body h2,
.markdown-body h3 { color: var(--text); line-height: 1.25; margin-top: 1.75em; }

.markdown-body h1 { margin-top: 0; font-size: 2.1rem; font-weight: 400; }
.markdown-body h1::after {
  content: "";
  display: block;
  width: 64px;
  height: 4px;
  margin-top: 0.5rem;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--brand-primary), var(--brand-accent));
}
.markdown-body h2 { font-size: 1.5rem; border-bottom: 1px solid var(--border); padding-bottom: 0.3em; }
.markdown-body h3 { color: var(--brand-header); }

.markdown-body a { color: var(--brand-primary); }
.markdown-body a:hover { color: var(--brand-header); }

.markdown-body code {
  font-family: var(--mono);
  font-size: 0.9em;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 0.1em 0.35em;
}

.markdown-body pre {
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 4px solid var(--brand-primary);
  border-radius: 6px;
  padding: 1rem;
  overflow-x: auto;
}

.markdown-body pre code { background: none; border: 0; padding: 0; }

.markdown-body blockquote {
  margin: 1em 0;
  padding: 0.5em 1em;
  border-left: 4px solid var(--brand-accent);
  color: var(--muted);
  background: var(--surface);
}

.markdown-body .table-wrap { margin: 1em 0; overflow-x: auto; } /* Scrolls only when a table can't fit, e.g. on phones */
.markdown-body table { border-collapse: collapse; }
.markdown-body th,
.markdown-body td { border: 1px solid var(--border); padding: 0.45rem 0.8rem; text-align: left; vertical-align: top; }
.markdown-body th { background: var(--brand-primary); color: #fff; border-color: var(--brand-primary); }
.markdown-body tr:nth-child(even) td { background: var(--surface); }

.markdown-body img { max-width: 100%; }

/* Error pages: full-width hero in the style of the tylertech.com banner */
.error-hero {
  position: relative;
  overflow: hidden;
  color: #fff;
  background:
    radial-gradient(circle at 78% 30%, rgba(255, 255, 255, 0.12) 0 22%, transparent 22.2%),
    radial-gradient(circle at 98% 105%, rgba(255, 255, 255, 0.14) 0 18%, transparent 18.2%),
    linear-gradient(100deg, var(--brand-header) 0%, var(--brand-primary) 45%, var(--brand-accent) 75%, var(--brand-cyan) 100%);
}

.error-inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  min-height: 360px;
  padding-top: 3rem;
  padding-bottom: 3rem;
}

.error-text { max-width: 560px; position: relative; z-index: 1; }

.error-code {
  margin: 0;
  font-size: clamp(4rem, 12vw, 7.5rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
}

.error-hero h1 { margin: 0.5rem 0 0.75rem; font-size: 2rem; font-weight: 400; }
.error-message { margin: 0 0 1.75rem; font-size: 1.1rem; opacity: 0.95; }

.error-actions { display: flex; gap: 0.75rem; flex-wrap: wrap; }
.error-hero .button { background: #fff; border-color: #fff; color: var(--brand-header); }
.error-hero .button:hover { background: transparent; color: #fff; }
.error-hero .button-outline { background: transparent; color: #fff; }
.error-hero .button-outline:hover { background: #fff; color: var(--brand-header); }

.error-watermark { width: 260px; height: 260px; opacity: 0.9; flex-shrink: 0; }

.error-details { padding-top: 1.5rem; padding-bottom: 3rem; color: var(--muted); font-size: 0.9rem; }
.error-details p { margin: 0 0 0.35rem; }
.error-details code {
  display: inline-block;
  max-width: 100%;
  font-family: var(--mono);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 0.2em 0.5em;
  word-break: break-all;
}

/* Status banners: demo-mode reminder and the administrator elevated-access warning */
:root {
  --elevated: #f2a900;        /* Amber: outside the brand palette on purpose, so elevated access stands out */
  --elevated-ink: #2b1d00;    /* 11:1 on --elevated */
}

.status-banner { font-size: 0.875rem; }
.banner-inner { display: flex; align-items: center; gap: 0.6rem; padding-top: 0.45rem; padding-bottom: 0.45rem; flex-wrap: wrap; }
.banner-tag {
  padding: 0.05rem 0.55rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.status-banner-demo { background: var(--text); color: #fff; }
.status-banner-demo .banner-tag { background: rgba(255, 255, 255, 0.18); }

.status-banner-elevated {
  background: repeating-linear-gradient(-45deg, var(--elevated) 0 18px, #f5b730 18px 36px);
  color: var(--elevated-ink);
  border-bottom: 2px solid #b37d00;
}
.status-banner-elevated .banner-tag { margin-left: auto; background: var(--elevated-ink); color: var(--elevated); }

body.elevated .site-header::after { background: var(--elevated); }

.icon { flex-shrink: 0; vertical-align: -0.15em; }

/* Signed-in user */
.header-end { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }

.user-chip {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.25rem 0.4rem 0.25rem 0.25rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  font-size: 0.9rem;
}
.user-chip-admin { box-shadow: 0 0 0 2px var(--elevated); }
.user-chip form { margin: 0; }

.avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: #fff;
  color: var(--brand-header);
  font-size: 0.8rem;
  font-weight: 700;
}

.role-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.05rem 0.55rem;
  border-radius: 999px;
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  font-size: 0.75rem;
  font-weight: 600;
}
.role-badge-admin { background: var(--elevated); color: var(--elevated-ink); border-color: #b37d00; }

.link-button {
  background: none;
  border: 0;
  padding: 0.25rem 0.5rem;
  color: inherit;
  font: inherit;
  text-decoration: underline;
  cursor: pointer;
}

.button-on-dark { background: transparent; border-color: #fff; color: #fff; padding: 0.35rem 1.1rem; }
.button-on-dark:hover { background: #fff; border-color: #fff; color: var(--brand-header); }

/* Demo sign-in */
.persona-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1.25rem; padding-bottom: 3rem; }

.persona-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.4rem;
  padding: 1.25rem;
  border: 1px solid var(--border);
  border-top: 4px solid var(--brand-primary);
  border-radius: 8px;
  background: #fff;
}
.persona-card-admin { border-top-color: var(--elevated); }
.persona-card .avatar { width: 3rem; height: 3rem; font-size: 1rem; background: var(--brand-primary); color: #fff; }
.persona-card-admin .avatar { background: var(--elevated); color: var(--elevated-ink); }
.persona-name { font-weight: 600; font-size: 1.1rem; }
.persona-email { color: var(--muted); font-size: 0.875rem; }
.persona-roles { display: flex; gap: 0.35rem; flex-wrap: wrap; margin-bottom: 0.5rem; }

/* Copy button on code blocks (added by /js/site.js) */
.markdown-body .code-block { position: relative; }
.copy-button {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  padding: 0.2rem 0.65rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: #fff;
  color: var(--brand-primary);
  font: 600 0.75rem var(--font);
  cursor: pointer;
  opacity: 0.85;
}
.copy-button:hover, .copy-button:focus-visible { opacity: 1; border-color: var(--brand-primary); }
.copy-button.copied { background: var(--brand-primary); border-color: var(--brand-primary); color: #fff; }
.markdown-body .code-block pre { padding-right: 5rem; }

@media (max-width: 720px) {
  .brand-text { display: none; }
  .error-watermark { position: absolute; right: -60px; bottom: -40px; width: 220px; height: 220px; opacity: 0.18; }
}

@media (prefers-reduced-motion: reduce) {
  .button { transition: none; }
}

/* Docs: sidebar layout */
.container.docs-layout { max-width: 1440px; } /* Wider than other pages: the sidebar takes 250px */
.docs-layout {
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr);
  gap: 2.5rem;
  padding-top: 2rem;
  padding-bottom: 3rem;
  align-items: start;
}
.docs-sidebar {
  position: sticky;
  top: 1rem;
  max-height: calc(100vh - 2rem);
  overflow-y: auto;
  font-size: 0.9rem;
}
.docs-nav ul { list-style: none; margin: 0; padding: 0; }
.docs-nav a {
  display: block;
  padding: 0.3rem 0.65rem;
  border-left: 3px solid transparent;
  color: var(--text);
  text-decoration: none;
}
.docs-nav a:hover { color: var(--brand-primary); background: var(--surface); }
.docs-nav a.active { border-left-color: var(--brand-accent); color: var(--brand-primary); font-weight: 600; }
.docs-nav-home { margin: 0.75rem 0 0.35rem; color: var(--muted) !important; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.04em; }
.docs-toc { margin: 0.15rem 0 0.4rem 0.9rem !important; border-left: 1px solid var(--border); }
.docs-toc a { padding: 0.2rem 0.65rem; border-left: 0; color: var(--muted); }
.docs-toc-3 a { padding-left: 1.4rem; font-size: 0.85rem; }

.docs-body { min-width: 0; }
.docs-body table { width: 100%; }
.docs-body td:first-child { min-width: 12rem; } /* Keeps names from wrapping at every segment when the description is long */
/* Reference tables (first column is just a setting name): reserve a third of the width so most names fit on one line. */
.docs-body table:has(td:first-child > code:only-child) td:first-child { width: 33%; }
.docs-body p > code, .docs-body li > code { overflow-wrap: anywhere; } /* Fallback for long names with no <wbr> points */
.docs-body :target { scroll-margin-top: 1rem; animation: docs-target 1.6s ease-out; }
@keyframes docs-target { from { background: #fff1d1; } to { background: transparent; } }

.docs-pager { display: flex; gap: 1rem; margin-top: 3rem; padding-top: 1.25rem; border-top: 1px solid var(--border); }
.docs-pager a {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 0.75rem 1rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  text-decoration: none;
  font-weight: 600;
}
.docs-pager a:hover { border-color: var(--brand-primary); }
.docs-pager span { color: var(--muted); font-size: 0.8rem; font-weight: 400; }
.docs-pager-next { text-align: right; margin-left: auto; }

/* Docs: home page */
.docs-home h1 { margin-bottom: 0.25rem; font-weight: 400; }
.docs-lead { color: var(--muted); margin-top: 0; }
.docs-cards {
  list-style: none;
  padding: 0;
  margin: 2rem 0 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1rem;
}
.docs-card {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  height: 100%;
  padding: 1.1rem 1.25rem;
  border: 1px solid var(--border);
  border-top: 3px solid var(--brand-accent);
  border-radius: 8px;
  color: var(--text);
  text-decoration: none;
}
.docs-card:hover, .docs-card:focus-visible { border-color: var(--brand-primary); box-shadow: 0 4px 14px rgba(0, 80, 138, 0.12); }
.docs-card-title { color: var(--brand-primary); font-weight: 600; font-size: 1.1rem; }
.docs-card-summary { color: var(--muted); font-size: 0.9rem; }

/* Docs: search */
.docs-search { position: relative; }
.docs-search[hidden] { display: none; }
.docs-search input {
  width: 100%;
  padding: 0.5rem 2.2rem 0.5rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  font: inherit;
  color: var(--text);
  background: #fff;
}
.docs-search input:focus { outline: 2px solid var(--brand-accent); outline-offset: 1px; border-color: var(--brand-accent); }
.docs-search-key {
  position: absolute;
  right: 0.6rem;
  top: 0.55rem;
  padding: 0 0.4rem;
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--muted);
  font: 0.75rem var(--mono);
  pointer-events: none;
}
.docs-search input:focus ~ .docs-search-key { display: none; }
.docs-search-hero { max-width: 640px; margin-top: 1.5rem; font-size: 1.05rem; }
.docs-search-hero input { padding: 0.75rem 2.5rem 0.75rem 1rem; }
.docs-search-hero .docs-search-key { top: 0.85rem; }

.docs-results {
  position: absolute;
  z-index: 10;
  left: 0;
  top: calc(100% + 4px);
  width: max(100%, 420px);
  max-height: 70vh;
  overflow-y: auto;
  margin: 0;
  padding: 0.3rem;
  list-style: none;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}
.docs-results a { display: block; padding: 0.5rem 0.65rem; border-radius: 6px; color: var(--text); text-decoration: none; }
.docs-results [aria-selected="true"] a, .docs-results a:hover { background: var(--surface); outline: 1px solid var(--brand-accent); }
.docs-result-path { display: block; color: var(--brand-primary); font-weight: 600; font-size: 0.9rem; }
.docs-result-snippet { display: block; color: var(--muted); font-size: 0.82rem; line-height: 1.45; }
.docs-results mark { background: #fff1d1; color: inherit; border-radius: 2px; }
.docs-results-empty { padding: 0.6rem 0.65rem; color: var(--muted); font-size: 0.9rem; }

/* Docs: filter box above long tables */
.table-filter { display: flex; align-items: center; gap: 0.75rem; margin: 1rem 0 -0.5rem; }
.table-filter + .table-wrap { margin-top: 1rem; }
.table-filter input {
  flex: 0 1 320px;
  padding: 0.4rem 0.65rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  font: inherit;
  font-size: 0.9rem;
}
.table-filter input:focus { outline: 2px solid var(--brand-accent); outline-offset: 1px; }
.table-filter-count { color: var(--muted); font-size: 0.85rem; }
.markdown-body table.table-filtered tr td { background: transparent; }
.markdown-body table.table-filtered tr.row-alt td { background: var(--surface); }

@media (max-width: 900px) {
  .docs-layout { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
  .docs-sidebar { position: static; max-height: none; }
  .docs-results { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .docs-body :target { animation: none; }
}

/* Cookie banner: stays at the bottom of the screen until the visitor chooses. Not modal, so the page stays usable.
   Sticky rather than fixed: at the end of the page it sits below the footer instead of covering it, at any banner height. */
.cookie-banner {
  position: sticky;
  z-index: 50;
  bottom: 0;
  background: #fff;
  border-top: 4px solid var(--brand-accent);
  box-shadow: 0 -6px 24px rgba(0, 0, 0, 0.15);
}
.cookie-banner-inner { display: flex; align-items: center; gap: 1.5rem; padding-top: 1rem; padding-bottom: 1rem; flex-wrap: wrap; }
.cookie-banner-text { flex: 1 1 420px; }
.cookie-banner h2 { margin: 0 0 0.25rem; font-size: 1.05rem; color: var(--text); }
.cookie-banner p { margin: 0; color: var(--muted); font-size: 0.92rem; }
.cookie-banner-actions { display: flex; gap: 0.6rem; flex-wrap: wrap; }

/* Cookie preferences page */
.cookie-status { padding: 0.6rem 0.9rem; background: var(--surface); border-left: 3px solid var(--brand-accent); }
.cookie-preferences { max-width: 820px; }
.cookie-category { margin: 0 0 1rem; padding: 1rem 1.25rem; border: 1px solid var(--border); border-radius: 8px; }
.cookie-category-head { display: flex; align-items: center; gap: 0.75rem; }
.cookie-category-head label { font-weight: 600; font-size: 1.05rem; flex: 1; }
.cookie-category p { margin: 0.4rem 0; color: var(--muted); }
.cookie-category details { margin-top: 0.4rem; font-size: 0.9rem; }
.cookie-category summary { cursor: pointer; color: var(--brand-primary); }
.cookie-category table { margin-top: 0.5rem; width: 100%; border-collapse: collapse; }
.cookie-category th, .cookie-category td { border: 1px solid var(--border); padding: 0.35rem 0.6rem; text-align: left; vertical-align: top; }
.cookie-category th { background: var(--surface); }
.cookie-none { font-style: italic; }
.cookie-toggle-state { color: var(--muted); font-size: 0.85rem; }
.cookie-actions { display: flex; gap: 0.6rem; flex-wrap: wrap; margin-top: 1.25rem; }

/* Toggle switch built from a checkbox, so it works without JavaScript and keeps native keyboard and screen-reader support. */
.cookie-toggle {
  appearance: none;
  width: 2.6rem;
  height: 1.45rem;
  margin: 0;
  border-radius: 999px;
  background: #b9c2cd;
  position: relative;
  cursor: pointer;
  transition: background 0.15s;
}
.cookie-toggle::after {
  content: "";
  position: absolute;
  top: 0.18rem;
  left: 0.2rem;
  width: 1.1rem;
  height: 1.1rem;
  border-radius: 50%;
  background: #fff;
  transition: transform 0.15s;
}
.cookie-toggle:checked { background: var(--brand-primary); }
.cookie-toggle:checked::after { transform: translateX(1.12rem); }
.cookie-toggle:disabled { cursor: not-allowed; opacity: 0.6; }
.cookie-toggle:focus-visible { outline: 2px solid var(--brand-accent); outline-offset: 2px; }

@media (max-width: 720px) {
  .cookie-banner-actions .button { flex: 1 1 auto; text-align: center; }
}
@media (prefers-reduced-motion: reduce) {
  .cookie-toggle, .cookie-toggle::after { transition: none; }
}

/* Home splash: incident response landing page at "/" (Site/HomePage.cs) */
:root {
  --ir-night: #04182b;        /* Hero background, darker than the header so it reads as its own band */
  --ir-alert: #c8102e;        /* Incident red: report button and urgent strip (5.9:1 with white) */
  --ir-alert-dark: #9e0c24;
  --ir-signal: #3fe0a0;       /* Radar blips and the live dot */
}

.ir-hero {
  position: relative;
  overflow: hidden;
  color: #fff;
  background:
    radial-gradient(ellipse at 80% 40%, rgba(63, 185, 199, 0.22), transparent 55%),
    radial-gradient(ellipse at 10% 100%, rgba(16, 120, 192, 0.35), transparent 60%),
    var(--ir-night);
}

/* Faint grid, like a situation-room display */
.ir-hero-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  background-size: 40px 40px;
  mask-image: linear-gradient(180deg, #000 30%, transparent 100%);
}

.ir-hero-inner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  align-items: center;
  gap: 3rem;
  padding-top: 5rem;
  padding-bottom: 5rem;
}

.ir-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0 0 1.25rem;
  padding: 0.3rem 0.9rem;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.ir-live-dot {
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  background: var(--ir-signal);
  box-shadow: 0 0 0 0 rgba(63, 224, 160, 0.6);
  animation: ir-pulse 2s ease-out infinite;
}

.ir-hero h1 {
  margin: 0 0 1.25rem;
  font-size: clamp(2.4rem, 5.5vw, 4rem);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.02em;
}

.ir-highlight {
  background: linear-gradient(90deg, var(--brand-cyan), var(--ir-signal));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.ir-lead { max-width: 36rem; margin: 0 0 2rem; font-size: 1.15rem; color: rgba(255, 255, 255, 0.82); }

.ir-actions { display: flex; gap: 0.9rem; flex-wrap: wrap; }
.ir-actions .button { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.75rem 1.6rem; }
.ir-actions .icon { width: 18px; height: 18px; }

.button-alert { background: var(--ir-alert); border-color: var(--ir-alert); box-shadow: 0 6px 20px rgba(200, 16, 46, 0.35); }
.button-alert:hover { background: var(--ir-alert-dark); border-color: var(--ir-alert-dark); }

.button-ghost { background: transparent; border-color: rgba(255, 255, 255, 0.6); color: #fff; }
.button-ghost:hover { background: #fff; border-color: #fff; color: var(--ir-night); }

/* Radar */
.ir-radar { justify-self: center; width: 100%; max-width: 340px; }
.ir-radar svg { display: block; width: 100%; height: auto; overflow: visible; }
.radar-ring { fill: none; stroke: rgba(63, 185, 199, 0.35); stroke-width: 1; }
.radar-axis { stroke: rgba(63, 185, 199, 0.2); stroke-width: 1; }
.radar-sweep { transform-origin: 100px 100px; animation: ir-sweep 4s linear infinite; }
.radar-sweep path { fill: rgba(63, 224, 160, 0.16); }
.radar-core { fill: var(--brand-cyan); }
.radar-blip { fill: var(--ir-signal); opacity: 0; animation: ir-blip 4s ease-out infinite; }
.radar-blip-1 { animation-delay: 0.45s; }
.radar-blip-2 { animation-delay: 2.6s; }
.radar-blip-3 { animation-delay: 1.5s; fill: #ff6b7f; }
/* site.js places and times the blips itself; these delays are the fallback without it. */
.radar-random .radar-blip { animation: none; }

@keyframes ir-sweep { to { transform: rotate(360deg); } }
@keyframes ir-blip { 0% { opacity: 1; } 70% { opacity: 0.15; } 100% { opacity: 0; } }
@keyframes ir-pulse { 70% { box-shadow: 0 0 0 0.6rem rgba(63, 224, 160, 0); } 100% { box-shadow: 0 0 0 0 rgba(63, 224, 160, 0); } }

/* Urgent guidance strip */
.ir-urgent { background: #fdecef; border-bottom: 1px solid #f4c3cc; color: #5c0716; }
.ir-urgent-inner { display: flex; align-items: flex-start; gap: 0.9rem; padding-top: 1rem; padding-bottom: 1rem; }
.ir-urgent-icon { color: var(--ir-alert); padding-top: 0.15rem; }
.ir-urgent p { margin: 0; }

/* Lifecycle */
.ir-phases { padding-top: 4rem; padding-bottom: 4rem; }
.ir-section-eyebrow { margin: 0; color: var(--brand-primary); font-size: 0.8rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
.ir-phases h2 { margin: 0.25rem 0 2rem; font-size: 1.9rem; font-weight: 600; color: var(--text); }

.phase-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.phase {
  position: relative;
  padding: 1.5rem 1.25rem 1.25rem;
  border: 1px solid var(--border);
  border-top: 3px solid var(--brand-accent);
  border-radius: 10px;
  background: #fff;
  transition: transform 0.15s, box-shadow 0.15s;
}
.phase:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(0, 80, 138, 0.12); }
.phase:nth-child(3), .phase:nth-child(4) { border-top-color: var(--ir-alert); }
.phase:nth-child(5), .phase:nth-child(6) { border-top-color: var(--mark-green); }

.phase-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 10px;
  background: var(--surface);
  color: var(--brand-primary);
}
.phase-number { position: absolute; top: 1.1rem; right: 1.25rem; font: 600 0.85rem var(--mono); color: var(--muted); }
.phase h3 { margin: 0.9rem 0 0.35rem; font-size: 1.1rem; }
.phase p { margin: 0; color: var(--muted); font-size: 0.92rem; }

/* Principles */
.ir-principles { background: var(--surface); border-top: 1px solid var(--border); padding: 3.5rem 0; }
.principle-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 2rem; }
.principle-icon { color: var(--brand-primary); }
.principle h3 { margin: 0.5rem 0 0.35rem; font-size: 1.1rem; }
.principle p { margin: 0; color: var(--muted); }

@media (max-width: 820px) {
  .ir-hero-inner { grid-template-columns: 1fr; gap: 2rem; padding-top: 3.5rem; padding-bottom: 3.5rem; }
  .ir-radar { max-width: 220px; order: -1; }
  .phase-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 540px) {
  .phase-list { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .ir-live-dot, .radar-sweep, .radar-blip { animation: none; }
  .radar-blip { opacity: 0.8; }
  .phase { transition: none; }
  .phase:hover { transform: none; }
}