/* ============================================
   Remain Silent PWA — Styles
   McGuire Law Branding
   ============================================ */

/* --- CSS Custom Properties --- */
:root {
  --color-light-gray: #f1f1f1;
  --color-navy: #002868;
  --color-white: #ffffff;
  --color-red: #bf0a30;
  --color-black: #000000;
  --color-gold: #e7c70d;

  --color-bg: var(--color-white);
  --color-bg-alt: var(--color-light-gray);
  --color-text: #1a1a1a;
  --color-text-secondary: #555555;
  --color-text-inverse: var(--color-white);
  --color-heading: var(--color-navy);
  --color-link: var(--color-navy);
  --color-border: #ddd;

  --font-primary: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;

  /* Nudged up about 6% across the scale. The whole ladder moves together so
     the relationships between heading and body stay as they were. */
  --text-xs: 0.8rem;
  --text-sm: 0.9375rem;
  --text-base: 1.0625rem;
  --text-lg: 1.1875rem;
  --text-xl: 1.3125rem;
  --text-2xl: 1.5625rem;
  --text-3xl: 1.9375rem;
  --text-4xl: 2.375rem;

  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;

  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-full: 50%;

  --shadow-sm: 0 1px 3px rgba(0,0,0,0.1);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.1);
  --shadow-lg: 0 8px 24px rgba(0,0,0,0.15);

  --header-height: 56px;
  --sidebar-width: 280px;

  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

/* --- Reset --- */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

[hidden] {
  display: none !important;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-primary);
  font-size: var(--text-base);
  line-height: 1.6;
  color: var(--color-text);
  background: var(--color-bg);
  min-height: 100vh;
  padding-top: var(--header-height);
  overflow-x: hidden;
}

a {
  color: var(--color-link);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

img {
  max-width: 100%;
  height: auto;
}

button {
  font-family: inherit;
  font-size: inherit;
  cursor: pointer;
  border: none;
  background: none;
  color: inherit;
}

ul, ol {
  padding-left: var(--space-xl);
}

/* --- Header --- */
.app-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: var(--color-navy);
  color: var(--color-white);
  box-shadow: var(--shadow-md);
  padding-top: var(--safe-top);
}

.header-inner {
  display: flex;
  align-items: center;
  height: var(--header-height);
  padding: 0 var(--space-sm);
  gap: var(--space-sm);
}

.menu-toggle,
.search-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-md);
  color: var(--color-white);
  transition: background 0.15s;
}

.menu-toggle:hover,
.search-toggle:hover {
  background: rgba(255,255,255,0.15);
}

.header-title {
  flex: 1;
  text-align: center;
}

.header-title-text {
  font-size: var(--text-lg);
  font-weight: 700;
  letter-spacing: 0.5px;
}

/* --- Search Bar --- */
.search-bar {
  padding: 0 var(--space-md) var(--space-md);
  background: var(--color-navy);
}

.search-input-wrapper {
  display: flex;
  align-items: center;
  background: var(--color-white);
  border-radius: var(--radius-md);
  padding: 0 var(--space-md);
  gap: var(--space-sm);
}

.search-input-wrapper .search-icon {
  color: var(--color-text-secondary);
  flex-shrink: 0;
}

.search-input-wrapper input {
  flex: 1;
  border: none;
  outline: none;
  font-size: var(--text-base);
  padding: 10px 0;
  background: transparent;
  color: var(--color-text);
}

.search-input-wrapper input::placeholder {
  color: #999;
}

.search-clear {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-full);
  color: var(--color-text-secondary);
}

.search-clear:hover {
  background: var(--color-light-gray);
}

.search-results {
  margin-top: var(--space-sm);
  background: var(--color-white);
  border-radius: var(--radius-md);
  max-height: 60vh;
  overflow-y: auto;
  box-shadow: var(--shadow-lg);
}

.search-results:empty {
  display: none;
}

.search-result-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-md);
  padding: var(--space-md);
  color: var(--color-text);
  border-bottom: 1px solid var(--color-border);
  transition: background 0.15s;
}

.search-result-item:last-child {
  border-bottom: none;
}

.search-result-item:hover {
  background: var(--color-light-gray);
  text-decoration: none;
}

.search-result-icon {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-bg-alt);
  border-radius: var(--radius-sm);
  flex-shrink: 0;
  color: var(--color-navy);
}

.search-result-icon svg {
  width: 20px;
  height: 20px;
}

.search-result-text {
  flex: 1;
  min-width: 0;
}

.search-result-title {
  display: block;
  font-weight: 600;
  font-size: var(--text-sm);
  color: var(--color-navy);
}

.search-result-snippet {
  display: block;
  font-size: var(--text-xs);
  color: var(--color-text-secondary);
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.search-result-snippet mark,
.search-result-title mark {
  background: var(--color-gold);
  color: var(--color-black);
  padding: 0 2px;
  border-radius: 2px;
}

.search-no-results {
  padding: var(--space-lg);
  text-align: center;
  color: var(--color-text-secondary);
  font-size: var(--text-sm);
}

/* --- Sidebar --- */
.sidebar-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: 199;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s, visibility 0.3s;
}

.sidebar-overlay.active {
  opacity: 1;
  visibility: visible;
}

.sidebar {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: var(--sidebar-width);
  background: var(--color-white);
  z-index: 200;
  transform: translateX(-100%);
  transition: transform 0.3s ease;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-lg);
}

.sidebar.open {
  transform: translateX(0);
}

.sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-lg) var(--space-md);
  background: var(--color-navy);
  color: var(--color-white);
}

.sidebar-brand {
  font-size: var(--text-xl);
  font-weight: 700;
  letter-spacing: 0.5px;
}

.sidebar-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  color: var(--color-white);
}

.sidebar-close:hover {
  background: rgba(255,255,255,0.15);
}

.sidebar-nav-list {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-sm) 0;
}

.sidebar-item {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-md) var(--space-lg);
  color: var(--color-text);
  font-size: var(--text-sm);
  transition: background 0.15s;
  border-left: 3px solid transparent;
}

.sidebar-item:hover {
  background: var(--color-light-gray);
  text-decoration: none;
}

.sidebar-item.active {
  background: rgba(0,40,104,0.08);
  color: var(--color-navy);
  font-weight: 600;
  border-left-color: var(--color-navy);
}

.sidebar-item-icon {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-navy);
  flex-shrink: 0;
}

.sidebar-item-icon svg {
  width: 18px;
  height: 18px;
}

.sidebar-item-text {
  flex: 1;
}

.sidebar-footer {
  padding: var(--space-lg);
  border-top: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.sidebar-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  padding: var(--space-md);
  background: var(--color-red);
  color: var(--color-white);
  border-radius: var(--radius-md);
  font-weight: 600;
  font-size: var(--text-sm);
  transition: background 0.15s;
}

.sidebar-cta:hover {
  background: #a00928;
  text-decoration: none;
}

.sidebar-link {
  text-align: center;
  font-size: var(--text-sm);
  color: var(--color-navy);
}

/* --- Main Content --- */
.main-content {
  min-height: calc(100vh - var(--header-height));
}

.view {
  animation: fadeIn 0.2s ease;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* --- Hero Banner --- */
.hero-banner {
  background: var(--color-navy);
  color: var(--color-white);
  padding: var(--space-2xl) var(--space-lg);
  text-align: center;
}

.hero-logo {
  display: block;
  margin: 0 auto var(--space-lg);
  max-width: 200px;
  height: auto;
}

/* Was "REMAIN SILENT" at 4xl, uppercase, weight 800. It now carries the
   Law Enforcement line instead, which is a sentence rather than a slogan and
   is set accordingly: smaller, sentence case, and no slogan letter-spacing. */
.hero-title {
  font-size: var(--text-xl);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0;
  text-transform: none;
  margin-bottom: var(--space-md);
  opacity: 0.95;
}

.hero-subtitle {
  font-size: 1.5rem;
  font-weight: 500;
  opacity: 0.95;
  margin-bottom: var(--space-sm);
}

.hero-subtitle-box {
  display: inline-block;
  background: var(--color-red);
  color: var(--color-white);
  padding: 0.35em 0.8em;
  font-weight: 700;
  letter-spacing: 1px;
}

/* --- Flag Banner (Hero) --- */
.flag-banner-link {
  display: block;
  text-decoration: none;
  margin-top: var(--space-xl);
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

.flag-banner-link:hover {
  text-decoration: none;
}

.flag-banner-img {
  width: 100%;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.flag-banner-link:hover .flag-banner-img {
  transform: scale(1.02);
  box-shadow: 0 4px 16px rgba(0,0,0,0.4);
}

.flag-banner-label {
  text-align: center;
  color: rgba(255,255,255,0.8);
  font-size: var(--text-xs);
  margin-top: var(--space-sm);
  text-decoration: underline;
}

/* --- Featured Section Card --- */
.featured-section {
  padding: var(--space-lg);
}

.featured-card {
  background: #e7c70d;
  border: 2px solid #e7c70d;
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
  box-shadow: var(--shadow-md);
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s;
  display: block;
  color: var(--color-text);
  text-align: center;
}

.featured-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
  text-decoration: none;
  color: var(--color-text);
}

.featured-card-badge {
  display: inline-block;
  background: var(--color-red);
  color: var(--color-white);
  font-size: var(--text-xs);
  font-weight: 700;
}

.featured-card-cta {
  font-size: calc(var(--text-xs) * 2);
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 4px 10px;
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-md);
  text-align: center;
  min-width: 180px;
}

.featured-card-title {
  font-size: var(--text-2xl);
  font-weight: 700;
  color: var(--color-navy);
  margin-bottom: var(--space-sm);
  text-align: center;
}

.featured-card-desc {
  font-size: var(--text-base);
  color: var(--color-text-secondary);
  line-height: 1.5;
  text-align: center;
}

/* --- Emergency Banner --- */
.emergency-banner {
  padding: 0 var(--space-lg) var(--space-lg);
}

.emergency-link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  padding: var(--space-md) var(--space-lg);
  background: var(--color-red);
  color: var(--color-white);
  border-radius: var(--radius-md);
  font-weight: 600;
  font-size: var(--text-sm);
  transition: background 0.15s;
  text-align: center;
}

.emergency-link:hover {
  background: #a00928;
  text-decoration: none;
}

/* --- TOC Grid --- */
.toc-grid {
  padding: 0 var(--space-lg) var(--space-lg);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
}

.toc-card {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-lg);
  background: var(--color-white);
  border-radius: var(--radius-md);
  border-left: 4px solid var(--color-navy);
  box-shadow: var(--shadow-sm);
  color: var(--color-text);
  transition: transform 0.15s, box-shadow 0.15s, background 0.15s;
  cursor: pointer;
}

.toc-card:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
  background: var(--color-light-gray);
  text-decoration: none;
  color: var(--color-text);
}

.toc-card:active {
  transform: scale(0.99);
}

.toc-card-icon {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,40,104,0.08);
  border-radius: var(--radius-md);
  color: var(--color-navy);
  flex-shrink: 0;
}

.toc-card-icon svg {
  width: 22px;
  height: 22px;
}

.toc-card-text {
  flex: 1;
  min-width: 0;
}

.toc-card-number {
  display: block;
  font-size: var(--text-xs);
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 2px;
}

.toc-card-title {
  display: block;
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--color-navy);
}

.toc-card-subtitle {
  display: block;
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  margin-top: 2px;
}

.toc-card-arrow {
  width: 20px;
  height: 20px;
  color: var(--color-text-secondary);
  flex-shrink: 0;
}

/* --- Section View --- */
.section-header {
  background: var(--color-navy);
  color: var(--color-white);
  padding: var(--space-lg) var(--space-lg) var(--space-xl);
}

/* Sits below the navy header now, on white, so it reads as navy. The icon is
   sized explicitly: these inline SVGs carry no width or height of their own,
   and unsized they collapsed to nothing on iOS while Android fell back to the
   default 300x150 and drew an enormous arrow. Every other icon in the app is
   sized by its container; this one had no container. */
.section-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 var(--space-lg);
  padding: 10px 18px 10px 13px;
  border: 2px solid var(--color-red);
  border-radius: 999px;
  color: var(--color-navy);
  font-size: var(--text-sm);
  font-weight: 700;
  line-height: 1;
  background: var(--color-gold);
  transition: filter 0.15s;
}

.section-back:hover {
  filter: brightness(0.94);
  text-decoration: none;
  color: var(--color-navy);
}

.section-back-icon,
.section-back-icon svg {
  display: block;
  width: 17px;
  height: 17px;
  flex: none;
}

.section-back-icon svg { stroke-width: 2.5; }

.section-number {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 1px;
  opacity: 0.7;
  margin-bottom: var(--space-xs);
  text-align: center;
}

.section-title {
  font-size: var(--text-2xl);
  font-weight: 700;
  text-align: center;
}

.section-subtitle {
  font-size: var(--text-base);
  opacity: 0.85;
  margin-top: var(--space-xs);
  text-align: center;
}

/* --- Section Body Content --- */
.section-body {
  padding: var(--space-xl) var(--space-lg);
  max-width: 800px;
  margin: 0 auto;
}

.section-body h3 {
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--color-heading);
  margin: var(--space-xl) 0 var(--space-md);
  padding-bottom: var(--space-xs);
  border-bottom: 2px solid var(--color-gold);
}

.section-body h3:first-child {
  margin-top: 0;
}

.section-body h4 {
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--color-heading);
  margin: var(--space-lg) 0 var(--space-sm);
}

.section-body p {
  margin-bottom: var(--space-md);
  line-height: 1.7;
}

.section-body ul,
.section-body ol {
  margin-bottom: var(--space-md);
}

.section-body li {
  margin-bottom: var(--space-sm);
  line-height: 1.6;
}

.section-body strong {
  color: var(--color-navy);
}

.section-body blockquote {
  background: var(--color-light-gray);
  border-left: 4px solid var(--color-navy);
  padding: var(--space-md) var(--space-lg);
  margin: var(--space-md) 0;
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  font-style: italic;
}

/* --- Callout Boxes --- */
.callout {
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  margin: var(--space-lg) 0;
  border-left: 4px solid;
}

.callout h4 {
  margin-top: 0;
  margin-bottom: var(--space-sm);
}

.callout p:last-child {
  margin-bottom: 0;
}

.callout-critical {
  background: #fef2f2;
  border-color: var(--color-red);
}

.callout-critical h4 {
  color: var(--color-red);
}

.callout-info {
  background: #eff6ff;
  border-color: var(--color-navy);
}

.callout-info h4 {
  color: var(--color-navy);
}

.callout-tip {
  background: #fefce8;
  border-color: var(--color-gold);
}

.callout-tip h4 {
  color: #92750c;
}

.callout-warning {
  background: #fff7ed;
  border-color: #f59e0b;
}

.callout-warning h4 {
  color: #b45309;
}

/* --- SILENT Method Grid --- */
.method-grid {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  margin: var(--space-lg) 0;
}

.method-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-md);
  padding: var(--space-md);
  background: var(--color-white);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--color-border);
}

.method-letter {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  background: var(--color-navy);
  color: var(--color-white);
  font-size: var(--text-2xl);
  font-weight: 800;
  border-radius: var(--radius-sm);
  flex-shrink: 0;
}

.method-item-content strong {
  display: block;
  font-size: var(--text-base);
  color: var(--color-navy);
  margin-bottom: 2px;
}

.method-item-content p {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  margin-bottom: 0;
}

/* --- Key Phrases --- */
.key-phrases {
  list-style: none;
  padding: 0;
  margin: var(--space-lg) 0;
}

.key-phrases li {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-md);
  background: rgba(0,40,104,0.05);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-sm);
  font-weight: 600;
  color: var(--color-navy);
  font-size: var(--text-base);
  border: 1px solid rgba(0,40,104,0.12);
}

.key-phrases li::before {
  content: none;
}

.phrase-play {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  min-width: 36px;
  border: none;
  border-radius: 50%;
  background: var(--color-red);
  color: var(--color-white);
  font-size: var(--text-base);
  cursor: pointer;
  transition: background 0.2s, transform 0.15s;
}

.phrase-play:hover {
  background: #9a0828;
  transform: scale(1.1);
}

.phrase-play:active {
  transform: scale(0.95);
}

.phrase-play.playing {
  background: var(--color-navy);
}

/* --- Definition List (Glossary) --- */
.glossary-list dt {
  font-weight: 700;
  color: var(--color-navy);
  margin-top: var(--space-lg);
  font-size: var(--text-base);
  padding-bottom: var(--space-xs);
}

.glossary-list dt:first-child {
  margin-top: 0;
}

.glossary-list dd {
  margin-left: 0;
  margin-bottom: var(--space-md);
  padding-left: var(--space-lg);
  color: var(--color-text);
  line-height: 1.6;
  border-left: 2px solid var(--color-light-gray);
}

.glossary-letter {
  font-size: var(--text-2xl);
  font-weight: 800;
  color: var(--color-red);
  margin-top: var(--space-xl);
  margin-bottom: var(--space-sm);
  padding-bottom: var(--space-xs);
  border-bottom: 2px solid var(--color-red);
}

/* --- Info Table --- */
.info-table {
  width: 100%;
  border-collapse: collapse;
  margin: var(--space-md) 0;
  font-size: var(--text-sm);
}

.info-table th,
.info-table td {
  padding: 10px 14px;
  text-align: left;
  border: 1px solid var(--color-border);
}

.info-table thead th {
  background: var(--color-navy);
  color: #fff;
  font-weight: 600;
}

.info-table tbody tr:nth-child(even) {
  background: var(--color-light-gray);
}

/* --- QA pairs (Q&A format) --- */
.qa-item {
  margin-bottom: var(--space-xl);
}

.qa-question {
  font-weight: 700;
  color: var(--color-navy);
  font-size: var(--text-lg);
  margin-bottom: var(--space-sm);
  padding-left: var(--space-md);
  border-left: 3px solid var(--color-red);
}

.qa-answer {
  padding-left: var(--space-md);
}

.qa-answer p {
  margin-bottom: var(--space-sm);
}

/* --- Wallet Cards --- */
.wallet-card {
  background: var(--color-white);
  border: 2px solid var(--color-navy);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  margin-bottom: var(--space-lg);
}

.wallet-card-title {
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--color-navy);
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: var(--space-md);
  padding-bottom: var(--space-sm);
  border-bottom: 2px solid var(--color-gold);
}

.wallet-card ul {
  list-style: none;
  padding: 0;
}

.wallet-card li {
  padding: var(--space-sm) 0;
  border-bottom: 1px solid var(--color-light-gray);
  font-size: var(--text-sm);
}

.wallet-card li:last-child {
  border-bottom: none;
}

.btn-print {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-md) var(--space-xl);
  background: var(--color-navy);
  color: var(--color-white);
  border: none;
  border-radius: var(--radius-md);
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
}

.btn-print:hover {
  background: #001d4a;
}

/* --- Section Navigation (Prev/Next) --- */
.section-nav {
  padding: var(--space-sm) var(--space-lg);
  border-top: 1px solid var(--color-border);
}

.section-nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 800px;
  margin: 0 auto;
}

.nav-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 0;
  color: var(--color-navy);
  font-weight: 500;
  font-size: 12px;
  background: none;
  border: none;
  transition: opacity 0.15s;
}

.nav-btn:hover {
  opacity: 0.6;
  text-decoration: none;
}

.nav-btn-label {
  display: none;
}

.nav-btn-title {
  display: inline;
}

.nav-home {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 0;
  color: var(--color-text-secondary);
  font-weight: 500;
  font-size: 12px;
}

/* --- FAB --- */
.fab {
  position: fixed;
  bottom: calc(var(--space-xl) + var(--safe-bottom));
  right: var(--space-lg);
  width: 80px;
  height: 80px;
  padding: 0;
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.5px;
  line-height: 1.2;
  text-align: center;
  background: #bf0a30;
  color: #ffffff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 12px rgba(231,199,13,0.6), 0 0 24px rgba(231,199,13,0.4), 0 0 40px rgba(231,199,13,0.2);
  transition: transform 0.2s, box-shadow 0.2s;
  z-index: 50;
  animation: golden-pulse 2s ease-in-out infinite;
}

@keyframes golden-pulse {
  0%, 100% { box-shadow: 0 0 12px rgba(231,199,13,0.6), 0 0 24px rgba(231,199,13,0.4), 0 0 40px rgba(231,199,13,0.2); }
  50% { box-shadow: 0 0 18px rgba(231,199,13,0.8), 0 0 36px rgba(231,199,13,0.5), 0 0 56px rgba(231,199,13,0.3); }
}

.fab:hover {
  transform: scale(1.08);
  box-shadow: 0 0 20px rgba(231,199,13,0.8), 0 0 40px rgba(231,199,13,0.5), 0 0 60px rgba(231,199,13,0.3);
  text-decoration: none;
}

.fab:active {
  transform: scale(0.95);
}

/* --- Install Prompt --- */
.install-prompt {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--color-white);
  padding: var(--space-lg);
  box-shadow: 0 -4px 16px rgba(0,0,0,0.1);
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding-bottom: calc(var(--space-lg) + var(--safe-bottom));
}

.install-prompt p {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-text);
}

.install-actions {
  display: flex;
  gap: var(--space-sm);
  flex-shrink: 0;
}

/* --- Buttons --- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-sm) var(--space-lg);
  border-radius: var(--radius-md);
  font-weight: 600;
  font-size: var(--text-sm);
  transition: background 0.15s;
  cursor: pointer;
  border: none;
}

.btn-primary {
  background: var(--color-navy);
  color: var(--color-white);
}

.btn-primary:hover {
  background: #001d4a;
}

.btn-ghost {
  background: transparent;
  color: var(--color-text-secondary);
}

.btn-ghost:hover {
  background: var(--color-light-gray);
}

/* --- Disclaimer --- */
.disclaimer {
  padding: var(--space-lg);
  margin: var(--space-lg);
  background: var(--color-light-gray);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  line-height: 1.6;
}

/* --- Resource Links --- */
.resource-group {
  margin-bottom: var(--space-xl);
}

.resource-group-title {
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--color-navy);
  margin-bottom: var(--space-md);
}

.resource-link {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-md);
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-sm);
  color: var(--color-text);
  transition: background 0.15s;
}

.resource-link:hover {
  background: var(--color-light-gray);
  text-decoration: none;
}

.resource-link-name {
  font-weight: 600;
  color: var(--color-navy);
  font-size: var(--text-sm);
}

.resource-link-detail {
  font-size: var(--text-xs);
  color: var(--color-text-secondary);
}

/* --- Responsive --- */
@media (min-width: 480px) {
  /* Grows a little on a wider screen, but nothing like the 4xl this carried
     when it read REMAIN SILENT. */
  .hero-title {
    font-size: var(--text-2xl);
  }
  .toc-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 768px) {
  :root {
    --sidebar-width: 300px;
  }

  .sidebar {
    transform: translateX(0);
    box-shadow: none;
    border-right: 1px solid var(--color-border);
  }

  .sidebar-overlay {
    display: none;
  }

  .menu-toggle {
    display: none;
  }

  .sidebar-close {
    display: none;
  }

  body {
    padding-left: var(--sidebar-width);
  }

  .app-header {
    left: var(--sidebar-width);
  }

  .fab {
    right: var(--space-xl);
  }

  .nav-btn {
    font-size: 13px;
  }

  .nav-home {
    flex: 0;
  }
}

@media (min-width: 1024px) {
  .toc-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .hero-title {
    font-size: var(--text-2xl);
  }

  .section-body {
    padding: var(--space-2xl);
  }
}

/* --- Accessibility --- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }

  html {
    scroll-behavior: auto;
  }
}

*:focus-visible {
  outline: 3px solid var(--color-gold);
  outline-offset: 2px;
}

/* Screen-reader only */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* --- Background on alt sections in body --- */
.section-body .bg-alt {
  background: var(--color-light-gray);
  padding: var(--space-lg);
  border-radius: var(--radius-md);
  margin: var(--space-lg) 0;
}

/* --- Foreword --- */
.foreword {
  max-width: 720px;
  margin: var(--space-xl) auto;
  padding: var(--space-lg) var(--space-xl);
  background: var(--color-white);
  border-left: 4px solid var(--color-navy);
  border-radius: var(--radius-md);
  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
  color: var(--color-text);
  font-size: var(--text-base);
  line-height: 1.7;
}

.foreword p {
  margin-bottom: var(--space-md);
}

.foreword-title {
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--color-navy);
  margin-bottom: var(--space-md);
}

.foreword-sign {
  margin-top: var(--space-lg);
  font-size: var(--text-sm);
  line-height: 1.8;
}

.foreword-sign a {
  color: var(--color-navy);
  text-decoration: none;
  font-weight: 600;
}

.foreword-sign a:hover {
  text-decoration: underline;
}

/* ---- INSTALL BANNER ----
   Shown only when the browser confirms the app is installable. */
.install-banner {
    background: #002868;
    color: #ffffff;
    border-bottom: 3px solid #e7c70d;
    position: sticky;
    top: 0;
    z-index: 2000;
}
.install-banner[hidden] { display: none; }
.install-banner-inner {
    display: flex;
    align-items: center;
    gap: 12px;
    max-width: 900px;
    margin: 0 auto;
    padding: 10px 12px;
}
.install-banner-icon { border-radius: 9px; flex: none; }
.install-banner-text { flex: 1 1 auto; min-width: 0; line-height: 1.3; }
.install-banner-text strong { display: block; font-size: 1em; }
.install-banner-text span { display: block; font-size: .82em; color: rgba(255,255,255,0.85); }
.install-banner-btn {
    flex: none;
    background: #bf0a30;
    color: #ffffff;
    border: none;
    border-radius: 8px;
    padding: 11px 20px;
    font-size: 1em;
    font-weight: 700;
    cursor: pointer;
}
.install-banner-btn:active { transform: translateY(1px); }
.install-banner-x {
    flex: none;
    background: transparent;
    border: none;
    color: rgba(255,255,255,0.75);
    font-size: 1.6em;
    line-height: 1;
    padding: 0 4px;
    cursor: pointer;
}
@media (max-width: 380px) {
    .install-banner-text span { display: none; }
    .install-banner-btn { padding: 10px 15px; }
}

/* ============================================
   PASS IT ON
   The one part of the app that needs the network. It is built to say so
   plainly when there is none, rather than failing silently in someone's hand.
   ============================================ */

.refer {
  max-width: 720px;
  margin: var(--space-xl) auto;
  padding: var(--space-lg) var(--space-xl);
  background: var(--color-white);
  border-left: 4px solid var(--color-gold);
  border-radius: var(--radius-md);
  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
  color: var(--color-text);
}

.refer-title {
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--color-navy);
  margin-bottom: var(--space-sm);
}

.refer-lead {
  font-size: var(--text-base);
  line-height: 1.7;
  margin-bottom: var(--space-lg);
}

.refer-form { display: block; }

.refer-label {
  display: block;
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--color-navy);
  margin-bottom: 6px;
}

.refer-input {
  display: block;
  width: 100%;
  font-family: var(--font-primary);
  font-size: 16px; /* below 16px iOS zooms the whole app on focus */
  padding: 14px;
  margin-bottom: var(--space-md);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-white);
  color: var(--color-text);
}

.refer-input:focus {
  outline: none;
  border-color: var(--color-navy);
}

.refer-check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: var(--text-sm);
  line-height: 1.55;
  margin-bottom: var(--space-md);
  cursor: pointer;
}

.refer-check input {
  flex: none;
  width: 20px;
  height: 20px;
  margin-top: 1px;
  accent-color: var(--color-navy);
}

.refer-btn {
  display: block;
  width: 100%;
  font-family: var(--font-primary);
  font-size: var(--text-base);
  font-weight: 700;
  padding: 15px;
  border: 0;
  border-radius: var(--radius-md);
  background: var(--color-red);
  color: var(--color-white);
  cursor: pointer;
}

.refer-btn:disabled { opacity: .6; cursor: default; }

.refer-fine {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  line-height: 1.5;
  margin: var(--space-md) 0 0;
}

.refer-msg {
  margin: var(--space-md) 0 0;
  font-size: var(--text-base);
  line-height: 1.5;
  min-height: 1.5em;
}

.refer-msg.ok  { color: #1a7f4b; font-weight: 700; }
.refer-msg.err { color: var(--color-red); }

.refer-hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden;
}

/* ============================================
   RECORD
   The two buttons hand off to the phone's own camera or recorder. They are
   sized to be hit without looking, because the moment someone needs this is
   not a moment for aiming at a small target.
   ============================================ */

.rec-actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
  margin: 0 0 var(--space-lg);
}

.rec-btn {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  width: 100%;
  padding: 18px 20px;
  border: 0;
  border-radius: var(--radius-md);
  background: var(--color-red);
  color: var(--color-white);
  font-family: var(--font-primary);
  text-align: left;
  cursor: pointer;
}

.rec-btn-video { background: var(--color-navy); }

.rec-btn-icon { flex: none; width: 34px; height: 34px; }
.rec-btn-icon svg { width: 34px; height: 34px; display: block; }

.rec-btn-text { display: flex; flex-direction: column; min-width: 0; }

/* `.section-body strong` sets navy at (0,2,0), which wins against a plain
   `.rec-btn-text strong` and paints the label navy — invisible on the navy
   button and barely legible on the red one. Two classes plus the element
   clears it. */
.rec-btn .rec-btn-text strong {
  color: var(--color-white);
  font-size: 1.18rem;
  line-height: 1.25;
}
.rec-btn-sub {
  font-size: var(--text-sm);
  opacity: .88;
  line-height: 1.4;
  margin-top: 2px;
}

.rec-note {
  font-size: var(--text-sm);
  line-height: 1.5;
  color: var(--color-text-secondary);
  margin: 0 0 var(--space-lg);
  min-height: 1.4em;
}
.rec-note.warn { color: var(--color-red); font-weight: 700; }
.rec-note.ok   { color: #1a7f4b; font-weight: 700; }


/* One button, so it stays full width at every size. It is the thing someone is
   reaching for in a hurry; there is no reason to make it smaller on a wider
   screen. */

/* Live recording stage. Only visible while the camera is running. */


/* Someone filming an encounter does not need a flashing dot competing for
   their attention, and it is exactly the kind of motion that causes trouble
   for people who ask the OS to stop it. */


/* The featured card leads two places now, so it is a container of two rows
   rather than one large link. */

.featured-card {
  cursor: default;
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  padding: var(--space-lg) var(--space-xl);
  text-align: left;
}

.featured-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-md);
}

.featured-row + .featured-row {
  border-top: 2px solid rgba(0, 40, 104, .18);
  padding-top: var(--space-md);
}

.featured-line {
  font-size: var(--text-xl);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: .01em;
  color: var(--color-navy);
}

.featured-btn {
  flex: 0 0 auto;
  background: var(--color-navy);
  color: var(--color-white);
  font-size: var(--text-sm);
  font-weight: 800;
  letter-spacing: .05em;
  padding: 12px 20px;
  border-radius: var(--radius-md);
  white-space: nowrap;
}

.featured-btn:hover {
  background: #001d4d;
  text-decoration: none;
  color: var(--color-white);
}

/* The rows stack and centre at every width now, so there is nothing left for a
   narrow-screen rule to rescue. */

/* The header is fixed, so anything scrolled to by #contents needs to clear it
   rather than sit underneath. Declarative, so scrollIntoView honours it without
   the caller doing arithmetic against a scroll container whose identity is not
   obvious in this app. */
#tocGrid {
  scroll-margin-top: calc(var(--header-height) + var(--safe-top) + 12px);
}



/* Steps for opening the Camera app. Shown on iPhone, where no scheme exists to
   open it programmatically, and on Android only if the intent is refused. */
.rec-steps {
  border: 1px solid var(--color-border);
  border-left: 5px solid var(--color-gold);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  padding: var(--space-md) var(--space-lg);
  margin: 0 0 var(--space-lg);
  background: var(--color-white);
}
.rec-steps[hidden] { display: none; }

.rec-steps h4 {
  font-size: var(--text-lg);
  color: var(--color-navy);
  margin: 0 0 var(--space-sm);
}

.rec-steps ol { margin: 0; padding-left: var(--space-lg); }
.rec-steps li { margin-bottom: var(--space-sm); line-height: 1.6; }
.rec-steps li:last-child { margin-bottom: 0; }

/* What comes back from the capture input. Only used where the camera hands the
   recording to this page rather than saving it itself. */
.rec-result {
  border: 2px solid var(--color-gold);
  border-radius: var(--radius-md);
  padding: var(--space-md) var(--space-lg);
  margin: 0 0 var(--space-lg);
  background: var(--color-white);
}
.rec-result[hidden] { display: none; }

.rec-saved-head { margin: 0 0 var(--space-md); font-size: var(--text-base); }

.rec-playback {
  display: block;
  width: 100%;
  max-height: 46vh;
  margin: 0 0 var(--space-md);
  border-radius: var(--radius-md);
  background: #000;
}

.rec-saved-actions { display: flex; }

/* An anchor, not a button: where there is no share sheet it downloads, and a
   real tap on a real link is the only kind of download Android reliably
   allows. */
.rec-save {
  display: block;
  width: 100%;
  text-align: center;
  text-decoration: none;
  font-family: var(--font-primary);
  font-size: var(--text-base);
  font-weight: 700;
  padding: 15px 18px;
  border-radius: var(--radius-md);
  background: var(--color-navy);
  color: var(--color-white);
}

.rec-save:hover { text-decoration: none; color: var(--color-white); }

/* The camera, running inside the app. It covers everything because a person
   holding a phone at a traffic stop should be looking at one thing, and
   because leaving the app is what loses the recording on iPhone. */
.rec-live {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.rec-live-view {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #000;
}

.rec-live-bar {
  position: absolute;
  top: calc(env(safe-area-inset-top, 0px) + var(--space-md));
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.65);
  color: #fff;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: var(--text-base);
}

.rec-live-dot {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #e5342b;
  animation: recLivePulse 1.4s ease-in-out infinite;
}

@keyframes recLivePulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.25; }
}

@media (prefers-reduced-motion: reduce) {
  .rec-live-dot { animation: none; }
}

/* Big, low, and the only control on screen: it has to be findable without
   looking for it. */
.rec-live-stop {
  position: absolute;
  left: 50%;
  bottom: calc(env(safe-area-inset-bottom, 0px) + var(--space-xl));
  transform: translateX(-50%);
  min-width: 220px;
  padding: var(--space-md) var(--space-xl);
  border: 3px solid #fff;
  border-radius: 999px;
  background: #e5342b;
  color: #fff;
  font-family: inherit;
  font-size: var(--text-lg);
  font-weight: 800;
  letter-spacing: 0.02em;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.rec-live-stop:active { background: #c22a22; }