/* RF SIM split styles: settings and TAK prompt panels. */

/* ── Appearance tab ──────────────────────────────────────────────────── */
.appearance-section-title {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 10px;
}

.theme-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(182px, 1fr));
  gap: 12px;
}

.theme-card {
  --theme-preview-bg: #17191d;
  --theme-preview-topbar: #111317;
  --theme-preview-sidebar: #1a1d21;
  --theme-preview-border: #343941;
  --theme-preview-line: #8fb7ff;
  --theme-preview-line-strong: #34d399;
  --theme-preview-dot: #8fb7ff;
  --theme-swatch-1: #8fb7ff;
  --theme-swatch-2: #34d399;
  --theme-swatch-3: #f7b955;
  --theme-swatch-4: #f87171;
  position: relative;
  display: grid;
  grid-template-rows: auto minmax(48px, auto) auto;
  min-height: 154px;
  border-radius: 8px;
  border: 1px solid color-mix(in srgb, var(--border) 82%, transparent);
  overflow: hidden;
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--control-bg) 78%, var(--surface-tint) 22%), var(--bg-card-alt));
  padding: 0;
  text-align: left;
  color: var(--text);
}

.theme-card:hover {
  border-color: color-mix(in srgb, var(--border-strong) 82%, var(--accent) 18%);
  transform: translateY(-1px);
}

.theme-card.is-active {
  border-color: var(--accent);
  box-shadow:
    0 0 0 2px rgba(var(--accent-rgb), 0.24),
    0 12px 28px rgba(0, 0, 0, 0.22);
}

.theme-card-preview {
  display: grid;
  grid-template-rows: 24px 1fr;
  min-height: 82px;
  pointer-events: none;
  background: var(--theme-preview-bg);
  border-bottom: 1px solid color-mix(in srgb, var(--theme-preview-border) 75%, transparent);
}

.theme-card-topbar {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 0 8px;
  background: var(--theme-preview-topbar);
}

.theme-card-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--theme-preview-dot);
}

.theme-card-dot:nth-child(2) {
  opacity: 0.48;
}

.theme-card-dot:nth-child(3) {
  opacity: 0.28;
}

.theme-card-body {
  display: grid;
  grid-template-columns: 31% 1fr;
  min-height: 58px;
}

.theme-card-sidebar {
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--theme-preview-sidebar) 88%, #000 12%), var(--theme-preview-sidebar));
  border-right: 1px solid;
  border-color: var(--theme-preview-border);
}

.theme-card-content {
  padding: 10px 11px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  background:
    radial-gradient(circle at 85% 22%, color-mix(in srgb, var(--theme-preview-line) 18%, transparent), transparent 30%),
    var(--theme-preview-bg);
}

.theme-card-line {
  height: 4px;
  border-radius: 2px;
  background: var(--theme-preview-line);
  opacity: 0.62;
}

.theme-card-line.short {
  width: 58%;
}

.theme-card-line.accent {
  width: 78%;
  background: var(--theme-preview-line-strong);
  opacity: 0.72;
}

.theme-card-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 10px 4px;
}

.theme-card-label span:first-child {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.theme-card-label strong {
  color: var(--text);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  line-height: 1.1;
}

.theme-card-label small {
  color: var(--muted);
  font-size: 0.7rem;
  line-height: 1.2;
}

.theme-card-swatches {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px 10px;
}

.theme-card-swatches span {
  width: 18px;
  height: 5px;
  border-radius: 999px;
  background: var(--theme-swatch-1);
}

.theme-card-swatches span:nth-child(2) {
  background: var(--theme-swatch-2);
}

.theme-card-swatches span:nth-child(3) {
  background: var(--theme-swatch-3);
}

.theme-card-swatches span:nth-child(4) {
  background: var(--theme-swatch-4);
}

.theme-card-check {
  color: var(--accent);
  font-size: 0.86rem;
  opacity: 0;
  transition: opacity 0.15s;
}

.theme-card.is-active .theme-card-check {
  opacity: 1;
}

.theme-card[data-theme-value="default"] {
  --theme-preview-bg: #090909;
  --theme-preview-topbar: #050505;
  --theme-preview-sidebar: #111111;
  --theme-preview-border: #4a4a4a;
  --theme-preview-line: #ededed;
  --theme-preview-line-strong: #a8a8a8;
  --theme-preview-dot: #ededed;
  --theme-swatch-1: #f1f1f1;
  --theme-swatch-2: #a3a3a3;
  --theme-swatch-3: #595959;
  --theme-swatch-4: #181818;
}

.theme-card[data-theme-value="cobalt"] {
  --theme-preview-bg: #080b10;
  --theme-preview-topbar: #090e16;
  --theme-preview-sidebar: #111722;
  --theme-preview-border: #3b4859;
  --theme-preview-line: #78a8ff;
  --theme-preview-line-strong: #38bdf8;
  --theme-preview-dot: #78a8ff;
  --theme-swatch-1: #78a8ff;
  --theme-swatch-2: #38bdf8;
  --theme-swatch-3: #34d399;
  --theme-swatch-4: #2c5fa7;
}

.theme-card[data-theme-value="light"] {
  --theme-preview-bg: #edf2f8;
  --theme-preview-topbar: #dfe7f2;
  --theme-preview-sidebar: #eef3f9;
  --theme-preview-border: #b8c4d2;
  --theme-preview-line: #2e5ea8;
  --theme-preview-line-strong: #047857;
  --theme-preview-dot: #2e5ea8;
  --theme-swatch-1: #2e5ea8;
  --theme-swatch-2: #047857;
  --theme-swatch-3: #b45309;
  --theme-swatch-4: #b91c1c;
}

.theme-card[data-theme-value="graphite"] {
  --theme-preview-bg: #1e1e1e;
  --theme-preview-topbar: #3c3c3c;
  --theme-preview-sidebar: #252526;
  --theme-preview-border: #454545;
  --theme-preview-line: #569cd6;
  --theme-preview-line-strong: #4ec9b0;
  --theme-preview-dot: #569cd6;
  --theme-swatch-1: #569cd6;
  --theme-swatch-2: #4ec9b0;
  --theme-swatch-3: #dcdcaa;
  --theme-swatch-4: #f44747;
}

.theme-card[data-theme-value="signal-trace"] {
  --theme-preview-bg: #08080c;
  --theme-preview-topbar: #09090d;
  --theme-preview-sidebar: #101016;
  --theme-preview-border: #543451;
  --theme-preview-line: #e55b96;
  --theme-preview-line-strong: #f47b2d;
  --theme-preview-dot: #e55b96;
  --theme-swatch-1: #e55b96;
  --theme-swatch-2: #7c2c7e;
  --theme-swatch-3: #f47b2d;
  --theme-swatch-4: #ff7b88;
}

.theme-card[data-theme-value="hc-dark"] {
  --theme-preview-bg: #000000;
  --theme-preview-topbar: #000000;
  --theme-preview-sidebar: #0a0a0a;
  --theme-preview-border: #ffffff;
  --theme-preview-line: #ffffff;
  --theme-preview-line-strong: #00ff88;
  --theme-preview-dot: #ffffff;
  --theme-swatch-1: #ffffff;
  --theme-swatch-2: #00ff88;
  --theme-swatch-3: #ffee00;
  --theme-swatch-4: #ff4444;
}

.appearance-settings-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 20px;
  align-items: start;
}

/* Match the General tab's boxed slider control so the same setting doesn't
   render two different ways across tabs. */
.appearance-settings-grid .settings-half-row {
  box-sizing: border-box;
  min-width: 0;
  min-height: 50px;
  padding: 8px 10px;
  border: 1px solid var(--control-border);
  background: var(--control-bg);
}

.appearance-settings-grid .settings-top-field select {
  min-height: 36px;
  padding: 7px 10px;
}

.appearance-workspace-section {
  display: grid;
  gap: 12px;
  margin-top: 18px;
  padding: 14px;
  border: 1px solid var(--border);
  background: var(--bg-card-alt);
}

.appearance-card-spacing-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
  color: var(--muted);
  font-size: 0.82rem;
}

.appearance-card-spacing-row .settings-slider-row {
  margin-top: 2px;
}

@media (max-width: 560px) {
  .appearance-settings-grid { grid-template-columns: 1fr; }
  .theme-grid { grid-template-columns: repeat(2, 1fr); }
}

.settings-tab-panel[data-settings-panel="modes"] {
  overflow: auto;
  padding: 14px;
  box-sizing: border-box;
  background: var(--bg);
}

.settings-tab-panel[data-settings-panel="views"] {
  overflow: auto;
  padding: 10px;
  box-sizing: border-box;
  background: var(--bg);
}

.satellite-settings-section {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
  max-width: none;
  box-sizing: border-box;
}

#settingsPanelViews .settings-views-satellite-section {
  margin-top: 0;
  padding: 8px;
  border: 1px solid var(--border);
  background: var(--bg-card-alt);
}

.satellite-settings-layout {
  display: grid;
  grid-template-columns: minmax(420px, 1.08fr) minmax(360px, 0.92fr);
  gap: 8px;
  align-items: start;
}

.satellite-settings-primary,
.satellite-settings-options {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.satellite-settings-options {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.satellite-settings-section .settings-check-row {
  box-sizing: border-box;
  min-height: 38px;
  padding: 5px 7px;
  border: 1px solid var(--control-border);
  background: var(--control-bg);
}

.satellite-settings-section .settings-check-row > span {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.satellite-settings-section .settings-check-row b {
  color: var(--text);
  font-size: 0.82rem;
}

.satellite-settings-section .settings-check-row small {
  color: var(--text-muted);
  font-size: 0.68rem;
  line-height: 1.25;
}

.satellite-layer-heading {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

.satellite-source-badge {
  display: inline-flex;
  align-items: center;
  min-height: 18px;
  padding: 1px 6px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg-soft);
  color: var(--text-secondary);
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  line-height: 1;
}

.satellite-source-badge[data-source-kind="mixed"] {
  border-color: color-mix(in srgb, var(--accent-info) 60%, var(--border));
  color: var(--accent-info);
}

.satellite-source-badge[data-source-kind="synthetic"] {
  border-color: color-mix(in srgb, var(--accent-warning) 66%, var(--border));
  color: var(--accent-warning);
}

.satellite-mode-clock {
  display: grid;
  gap: 4px;
  padding: 6px 8px;
  border: 1px solid var(--border);
  background: var(--bg-card-alt);
}

.satellite-mode-clock > strong {
  color: var(--text);
  font-size: 0.78rem;
}

.satellite-mode-clock dl {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 4px;
  margin: 0;
}

.satellite-mode-clock dl > div {
  display: grid;
  gap: 1px;
  padding: 4px 5px;
  border-left: 2px solid color-mix(in srgb, var(--accent) 58%, var(--border));
  background: var(--control-bg);
}

.satellite-mode-clock dt {
  color: var(--text);
  font-size: 0.68rem;
  font-weight: 800;
  text-transform: uppercase;
}

.satellite-mode-clock dd,
.satellite-mode-clock small {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.68rem;
  line-height: 1.25;
}

.satellite-master-toggle {
  border-color: color-mix(in srgb, var(--accent) 58%, var(--control-border)) !important;
}

.satellite-constellation-fieldset {
  display: grid;
  gap: 4px;
  margin: 0;
  padding: 6px;
  min-width: 0;
  border: 1px solid var(--border);
  background: var(--bg-card-alt);
}

.satellite-constellation-fieldset legend {
  padding: 0 5px;
  color: var(--text-secondary);
  font-size: 0.74rem;
  font-weight: 700;
}

.satellite-settings-options .settings-top-field,
.satellite-elevation-control {
  display: grid;
  gap: 4px;
  padding: 6px 8px;
  border: 1px solid var(--control-border);
  background: var(--control-bg);
  color: var(--text-secondary);
  font-size: 0.78rem;
}

.satellite-settings-options .settings-top-field select {
  min-height: 32px;
}

.satellite-elevation-control .settings-slider-row {
  margin: 0;
}

.satellite-settings-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  grid-column: 1 / -1;
}

.satellite-catalog-summary {
  grid-column: 1 / -1;
  min-height: 32px;
  padding: 6px 8px;
  border: 1px solid var(--border);
  background: var(--bg-soft);
  color: var(--text-secondary);
  font-size: 0.74rem;
  line-height: 1.3;
}

.satellite-catalog-summary[data-state="loading"] {
  border-color: color-mix(in srgb, var(--accent-info) 55%, var(--border));
}

.satellite-catalog-summary[data-state="error"] {
  border-color: color-mix(in srgb, var(--accent-warning) 70%, var(--border));
  color: var(--accent-warning);
}

.satellite-catalog-summary[data-state="stale"] {
  border-color: color-mix(in srgb, var(--accent-warning) 58%, var(--border));
  color: var(--accent-warning);
}

.satellite-settings-note {
  margin: 0;
  padding: 6px 8px 0;
  border-top: 1px solid var(--border);
  color: var(--text-muted);
  font-size: 0.68rem;
  line-height: 1.3;
}

@media (max-width: 940px) {
  .settings-views-top-row {
    grid-template-columns: 1fr;
  }

  .satellite-settings-layout {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 520px) {
  .satellite-settings-options {
    grid-template-columns: 1fr;
  }

  .satellite-settings-actions,
  .satellite-catalog-summary {
    grid-column: auto;
  }

  .satellite-mode-clock dl {
    grid-template-columns: 1fr;
  }
}

.settings-views-top-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
  align-items: stretch;
}

#settingsPanelViews > .settings-views-section {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 6px;
  width: 100%;
  min-height: 100%;
  padding: 0;
  box-sizing: border-box;
}

.settings-views-top-row > .settings-view-card {
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  gap: 5px;
  padding: 8px;
}

.settings-views-top-row .settings-view-card-copy {
  gap: 2px;
}

.settings-views-top-row .settings-view-card-copy strong {
  font-size: 0.82rem;
}

.settings-views-top-row .settings-view-card-copy p {
  font-size: 0.7rem;
  line-height: 1.25;
}

.settings-views-top-row > .settings-view-card .settings-view-toggle {
  width: 100%;
  min-width: 0;
  padding: 5px 7px;
}

.settings-analysis-views-section {
  display: grid;
  grid-template-columns: minmax(145px, 0.22fr) minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  margin-top: 0;
  padding: 8px;
  border: 1px solid var(--border);
  background: var(--bg-card-alt);
}

.settings-analysis-view-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 4px;
}

@media (max-width: 1000px) {
  .settings-analysis-views-section {
    grid-template-columns: 1fr;
  }

  .settings-analysis-view-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.settings-analysis-view-grid .settings-analysis-view-toggle {
  min-width: 0;
  width: 100%;
  min-height: 25px;
  padding: 3px 6px;
}

.settings-modes-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
}

.settings-modes-top-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.settings-mode-card {
  grid-column: span 3;
  grid-template-columns: minmax(0, 1fr) minmax(220px, auto);
}

.settings-phase-time-card {
  grid-column: span 1;
  grid-template-columns: minmax(0, 1fr);
  align-items: stretch;
  gap: 12px;
}

.settings-phase-time-card .settings-view-toggle {
  min-width: 0;
  width: 100%;
}

.settings-modes-purpose {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.settings-modes-purpose > div {
  display: grid;
  gap: 6px;
  padding: 12px;
  border: 1px solid var(--border);
  background: var(--bg-card-alt);
}

@media (max-width: 960px) {
  .settings-modes-top-grid,
  .settings-modes-purpose {
    grid-template-columns: 1fr;
  }

  .settings-mode-card,
  .settings-phase-time-card {
    grid-column: auto;
  }
}

.settings-modes-purpose strong {
  color: var(--text);
  font-size: 0.82rem;
  letter-spacing: 0.08em;
}

.settings-modes-purpose p {
  margin: 0;
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.45;
}

.settings-view-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
  padding: 16px;
  border: 1px solid var(--border);
  background: var(--bg-card-alt);
  transition: border-color 120ms ease, background 120ms ease, box-shadow 120ms ease;
}

.settings-view-card.is-selected {
  border-color: var(--border);
  background: var(--bg-card-alt);
  box-shadow: none;
}

.settings-view-card-copy {
  display: grid;
  gap: 7px;
  min-width: 0;
}

.settings-view-card-copy strong {
  color: var(--text);
  font-size: 1rem;
}

.settings-view-card-copy p {
  margin: 0;
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.45;
}

.settings-view-toggle {
  position: relative;
  min-width: 230px;
  justify-content: flex-start;
  padding: 8px 10px;
  border: 1px solid var(--control-border);
  background: var(--control-bg);
  transition: border-color 120ms ease, background 120ms ease, box-shadow 120ms ease;
}

.settings-view-toggle input[type="checkbox"] {
  width: 16px;
  height: 16px;
  margin: 0;
  flex: 0 0 16px;
}

.settings-view-toggle-label {
  color: var(--text);
  font-size: 0.82rem;
  flex: 1 1 auto;
}

.settings-view-toggle:hover,
.settings-view-toggle:focus-within {
  border-color: var(--control-border-hover);
  background: var(--control-bg-hover);
  box-shadow: none;
}

.settings-view-toggle.is-selected {
  border-color: var(--control-border);
  background: var(--control-bg);
  box-shadow: none;
}

.settings-debug-section {
  gap: 14px;
}

.settings-debug-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: 12px;
}

.settings-debug-card {
  min-height: 178px;
}

.settings-debug-card .settings-debug-toggle {
  align-self: end;
  min-height: 38px;
}

.settings-debug-card .settings-view-card-copy p {
  min-height: 48px;
}

.settings-modal-section {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-self: stretch;
  width: 100%;
  box-sizing: border-box;
  min-height: 0;
  padding: 14px;
  border: 1px solid var(--border);
  background: var(--bg-soft);
}

.settings-docs-panel.settings-modal-section {
  align-self: stretch;
  flex: 1 1 auto;
}

.embedded-settings-panel {
  position: static;
  width: 100%;
  min-width: 0;
  max-width: none;
  display: flex;
  z-index: auto;
  pointer-events: auto;
  overflow: visible;
  padding: 14px;
  background: var(--bg-soft);
  border: 1px solid var(--border);
  box-shadow: none;
}

.embedded-settings-panel.imagery-menu,
.embedded-settings-panel.terrain-menu,
.embedded-settings-panel.weather-menu {
  width: 100%;
  min-width: 0;
}

#settingsPanelTerrain {
  min-height: 0;
}

#settingsPanelTerrain.is-active {
  overflow: hidden;
}

#settingsPanelTerrain .terrain-settings-panel {
  flex: 1 1 auto;
  min-height: 0;
}

.settings-modal-section + .settings-modal-section {
  background: var(--bg-card-alt);
}

.settings-docs-panel {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  padding: 0 !important;
  border: none !important;
  background: none !important;
  gap: 0 !important;
}

.settings-docs-shell {
  display: grid;
  grid-template-columns: 266px minmax(0, 1fr);
  gap: 10px;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  align-items: stretch;
}

.settings-docs-nav {
  display: flex;
  flex-direction: column;
  gap: 0;
  min-height: 0;
  overflow-y: auto;
  padding: 8px 6px;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--bg-elevated) 88%, var(--bg-base) 12%);
  overscroll-behavior: contain;
}

.settings-docs-toc,
.settings-docs-toc-children {
  list-style: none;
  margin: 0;
  padding: 0;
}

.settings-docs-toc {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.settings-docs-toc-item {
  margin: 0;
}

.settings-docs-toc-children {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 1px 0 5px 11px;
  border-left: 1px solid rgba(148, 163, 184, 0.14);
  margin-left: 9px;
}

.settings-docs-toc-link {
  display: block;
  min-width: 0;
  border-radius: 4px;
  text-decoration: none;
  color: var(--muted);
  line-height: 1.28;
  transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}

.settings-docs-toc-link--h2 {
  padding: 5px 8px;
  color: var(--text);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-left: 2px solid transparent;
}

.settings-docs-toc-link--h3 {
  padding: 4px 7px;
  font-size: 0.76rem;
  font-weight: 600;
}

.settings-docs-toc-link:hover {
  background: rgba(148, 163, 184, 0.08);
  color: var(--text);
}

.settings-docs-toc-link.is-active {
  background: color-mix(in srgb, var(--docs-nav-accent) 22%, transparent);
  border-radius: 0;
  box-shadow: none;
  color: var(--docs-nav-accent-text);
}

.settings-docs-toc-link[aria-current="location"] {
  outline: none;
}

.settings-docs-toc-link--h2.is-active {
  border-left-color: transparent;
}

/* The neutral default highlight needs a fully opaque surface for black type. */
body:not(.theme-cobalt):not(.theme-light):not(.theme-graphite):not(.theme-signal-trace):not(.theme-hc-dark) .settings-docs-toc-link.is-active {
  background: var(--docs-nav-accent);
}

.settings-docs-content {
  --docs-accent-blue: #4fc1ff;
  --docs-accent-purple: #c586c0;
  --docs-accent-gold: #dcdcaa;
  --docs-accent-green: #6a9955;
  --docs-accent-orange: #ce9178;
  min-height: 0;
  height: 100%;
  overflow-y: auto;
  padding: 18px 24px;
  border: 1px solid var(--border);
  background:
    linear-gradient(180deg, var(--surface-tint), var(--surface-tint-soft)),
    var(--bg-elevated);
  color: var(--text);
  scroll-behavior: smooth;
}

.settings-docs-content h1,
.settings-docs-content h2,
.settings-docs-content h3,
.settings-docs-content h4 {
  color: var(--text);
  margin: 22px 0 10px;
  scroll-margin-top: 16px;
}

.settings-docs-content h1 {
  margin-bottom: 16px;
  font-size: clamp(1.65rem, 2vw, 2.1rem);
  line-height: 1.05;
  letter-spacing: 0.01em;
}

.settings-docs-brand {
  color: #ffffff;
  font-family: Orbitron, var(--app-font-family);
  font-weight: 800;
  letter-spacing: 0.08em;
}

.settings-docs-content h2 {
  margin-top: 32px;
  padding-top: 18px;
  border-top: 1px solid color-mix(in srgb, var(--docs-accent-blue) 30%, var(--border));
  color: var(--docs-accent-blue);
  font-size: 1.1rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.settings-docs-content h3 {
  margin-top: 22px;
  color: var(--docs-accent-gold);
  font-size: 0.98rem;
}

.settings-docs-content h4 {
  color: var(--docs-accent-purple);
  font-size: 0.9rem;
}

.settings-docs-content h1:first-child,
.settings-docs-content h2:first-child,
.settings-docs-content h3:first-child,
.settings-docs-content h4:first-child {
  margin-top: 0;
}

.settings-docs-content p,
.settings-docs-content li {
  color: var(--text);
  font-size: 0.88rem;
  line-height: 1.62;
}

.settings-docs-content strong {
  color: var(--docs-accent-gold);
  font-weight: 750;
}

.settings-docs-content em {
  color: var(--docs-accent-purple);
}

.settings-docs-content a {
  color: var(--docs-accent-blue);
  text-decoration-color: color-mix(in srgb, var(--docs-accent-blue) 55%, transparent);
  text-underline-offset: 2px;
}

.settings-docs-content a:hover {
  text-decoration-color: currentColor;
}

.settings-docs-content ul > li::marker {
  color: var(--docs-accent-blue);
  font-weight: 700;
}

.settings-docs-content ol > li::marker {
  color: #ffffff;
  font-weight: 700;
}

.settings-docs-content ul,
.settings-docs-content ol {
  padding-left: 20px;
  margin: 8px 0 14px;
}

.settings-docs-content hr {
  border: none;
  border-top: 1px solid var(--border);
  margin: 18px 0;
}

.settings-docs-content code {
  background: var(--code-bg);
  border: 1px solid var(--code-border);
  border-radius: 4px;
  padding: 1px 5px;
  color: var(--docs-accent-orange);
  font-size: 0.86em;
}

.settings-docs-content pre {
  overflow-x: auto;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--code-block-bg);
}

.settings-docs-content table {
  width: 100%;
  border-collapse: collapse;
  margin: 12px 0 18px;
}

.settings-docs-content th,
.settings-docs-content td {
  border: 1px solid var(--border);
  padding: 8px 10px;
  text-align: left;
  font-size: 0.8rem;
}

.settings-docs-content th {
  color: var(--docs-accent-blue);
  background: color-mix(in srgb, var(--docs-accent-blue) 8%, var(--bg-hover-soft));
}

.settings-docs-content blockquote {
  margin: 14px 0 18px;
  padding: 10px 13px;
  border: 1px solid color-mix(in srgb, var(--docs-accent-green) 42%, var(--border));
  border-left: 3px solid var(--docs-accent-green);
  background: color-mix(in srgb, var(--docs-accent-green) 9%, transparent);
  color: var(--text);
}

body.theme-light .settings-docs-content {
  --docs-accent-blue: #0066b8;
  --docs-accent-purple: #8b2bb9;
  --docs-accent-gold: #795e26;
  --docs-accent-green: #38761d;
  --docs-accent-orange: #a31515;
}

.settings-docs-content blockquote p,
.settings-docs-content blockquote {
  font-size: 0.88rem;
  line-height: 1.55;
}

.settings-modal-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 12px;
  align-items: start;
}

.settings-modal-grid label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  color: var(--muted);
  font-size: 0.76rem;
}

.settings-modal-grid input,
.settings-modal-grid select,
.settings-saved-key-row button {
  font: inherit;
}

.settings-modal-grid input:not([type="checkbox"]),
.settings-modal-grid select {
  width: 100%;
  box-sizing: border-box;
  background: var(--control-bg);
  border: 1px solid var(--control-border);
  color: var(--control-text);
  padding: 5px 8px;
  font-size: 0.82rem;
}

.settings-modal-grid label:not(.settings-span-2):not(.settings-check-row) input:not([type="checkbox"]),
.settings-modal-grid label:not(.settings-span-2):not(.settings-check-row) select {
  max-width: 160px;
}

.settings-general-grid {
  grid-template-columns: repeat(10, minmax(0, 1fr));
  gap: 16px 16px;
}

.settings-modal-grid.settings-general-grid label {
  gap: 5px;
  font-size: 0.8rem;
}

.settings-modal-grid.settings-general-grid > label:not(.settings-span-2):not(.settings-check-row) {
  min-width: 0;
}

.settings-general-grid .settings-top-field {
  grid-column: span 2;
}

.settings-modal-grid.settings-general-grid > label:not(.settings-span-2):not(.settings-check-row) input:not([type="checkbox"]),
.settings-modal-grid.settings-general-grid > label:not(.settings-span-2):not(.settings-check-row) select {
  max-width: none;
  min-width: 0;
  min-height: 36px;
  padding: 7px 10px;
}

.settings-general-grid .settings-span-2 {
  grid-column: 1 / -1;
}

.settings-general-grid .settings-primary-toggles,
.settings-general-grid .settings-utility-row {
  grid-column: 1 / -1;
  display: grid;
  min-width: 0;
  gap: 16px;
}

.settings-general-grid .settings-primary-toggles {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.settings-general-grid .settings-utility-row {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
}

.settings-general-grid .settings-primary-toggles .settings-check-row,
.settings-general-grid .settings-utility-row .settings-check-row {
  grid-column: auto;
}

.settings-general-grid .settings-half-row {
  align-self: stretch;
  min-width: 0;
  width: 100%;
  box-sizing: border-box;
  justify-content: start;
  min-height: 50px;
  padding: 8px 10px;
  border: 1px solid var(--control-border);
  background: var(--control-bg);
}

.settings-general-grid .settings-gridlines-pair {
  align-self: stretch;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(172px, 0.92fr);
  gap: 10px;
  min-width: 0;
  height: 100%;
  align-items: stretch;
}

.settings-general-grid .settings-gridlines-pair .settings-check-row {
  grid-column: auto;
  min-width: 0;
  min-height: 50px;
  height: 100%;
}

.settings-general-grid .settings-gridlines-color-row {
  display: grid;
  grid-template-columns: minmax(max-content, 92px) minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  min-width: 0;
  min-height: 50px;
  height: 100%;
  padding: 8px 10px;
  border: 1px solid var(--control-border);
  background: var(--control-bg);
  color: var(--text);
}

.settings-general-grid .settings-gridlines-color-row > span {
  color: var(--text);
  font-size: 0.84rem;
  white-space: nowrap;
}

.settings-general-grid .settings-gridlines-color-row .color-picker-wrap {
  display: grid;
  width: 100%;
  min-width: 0;
  align-items: center;
  gap: 0;
  margin: 0;
}

.settings-general-grid .settings-gridlines-color-row input[type="color"] {
  width: 100%;
  min-width: 0;
  max-width: none;
  min-height: 26px;
  height: 26px;
  padding: 2px;
}

.settings-general-grid .settings-half-row .color-picker-wrap {
  align-items: center;
  margin-top: 5px;
}

.settings-general-grid .settings-half-row .color-picker-wrap input[type="color"] {
  min-height: 30px;
}

.settings-modal-grid .settings-check-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  min-height: 36px;
  padding: 7px 10px;
  border: 1px solid var(--control-border);
  background: var(--control-bg);
  color: var(--control-text);
  cursor: pointer;
}

.settings-general-grid .settings-check-row span:last-child {
  font-size: 0.84rem;
}

.settings-modal-grid .settings-check-row input[type="checkbox"] {
  width: 16px;
  height: 16px;
  margin: 0;
  flex: 0 0 auto;
}

.settings-modal-grid .settings-xbox-row input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}

.settings-slider-row {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  margin-top: 6px;
}

.settings-slider-row input[type="range"] {
  flex: 1;
  accent-color: var(--accent);
  height: 4px;
  cursor: pointer;
}

.settings-slider-value {
  color: var(--muted);
  font-size: 0.78rem;
  min-width: 72px;
  text-align: right;
  flex-shrink: 0;
}

.settings-slider-labels {
  display: flex;
  justify-content: space-between;
  color: var(--muted);
  font-size: 0.7rem;
  margin-top: 2px;
}

.terrain-sampling-control {
  display: block;
  padding: 10px 12px;
  border: 1px solid var(--control-border);
  background: var(--control-bg);
}

.terrain-sampling-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  color: var(--control-text);
}

.terrain-sampling-heading > span:first-child {
  font-weight: 700;
}

.terrain-sampling-value {
  min-width: 164px;
  color: var(--text);
}

.terrain-sampling-slider-row {
  margin-top: 10px;
}

.terrain-sampling-labels {
  margin-top: 5px;
}

.settings-xbox {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border: 1px solid var(--control-border);
  background: var(--control-bg);
  color: var(--control-text);
  font-size: 0.72rem;
  font-weight: 800;
  line-height: 1;
  flex-shrink: 0;
  pointer-events: none;
}

.settings-x-check-row {
  position: relative;
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  padding: 5px 8px;
  border: 1px solid var(--control-border);
  background: var(--control-bg);
  color: var(--control-text);
  cursor: pointer;
  user-select: none;
}

.settings-x-check-row input[type="checkbox"] {
  position: absolute;
  left: 8px;
  top: 50%;
  z-index: 1;
  opacity: 0 !important;
  width: 16px;
  height: 16px;
  margin: 0;
  transform: translateY(-50%);
  cursor: pointer;
  pointer-events: auto;
}

.settings-x-check-row input[type="checkbox"]:checked + .settings-xbox::before {
  content: "X";
}

.settings-x-check-row input[type="checkbox"]:focus-visible + .settings-xbox {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.settings-x-check-row.is-disabled {
  cursor: default;
  opacity: 0.55;
}

.settings-x-check-row span:not(.settings-xbox) {
  color: var(--text);
  font-size: 0.82rem;
}

.weather-auto-fetch-row {
  min-height: 36px;
  padding: 7px 10px;
}

.settings-modal-grid .settings-check-row span {
  color: var(--text);
  font-size: 0.82rem;
}

.settings-span-2 {
  grid-column: span 2;
}

.settings-saved-key-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
}

.settings-inline-help {
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 600;
}

.ai-deterministic-fallback-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}

.ai-agent-profiles-section {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 8px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}

.ai-agent-profiles-header {
  align-items: baseline;
  gap: 10px;
}

.ai-agent-profiles-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  max-height: 120px;
  overflow-y: auto;
  padding: 4px 2px;
}

.ai-agent-profile-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 4px 2px 6px;
  border: 1px solid var(--border);
  background: var(--control-bg);
  white-space: nowrap;
  transition: opacity 0.15s;
}

.ai-agent-profile-chip.is-disabled {
  color: var(--text-muted);
}

.ai-agent-profile-chip-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 24px;
  margin: 0;
  cursor: pointer;
  line-height: 1;
}

.ai-agent-profile-chip-toggle.is-always-on {
  cursor: default;
  opacity: 0.55;
}

.ai-agent-profile-chip-toggle input[type="checkbox"] {
  width: 16px;
  height: 16px;
  margin: 0;
  flex-shrink: 0;
}

.ai-agent-profile-chip-name {
  color: var(--text);
  font-size: 0.76rem;
  line-height: 1.2;
}

.ai-agent-profile-info-btn {
  min-width: 24px;
  min-height: 24px;
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
  color: var(--muted);
  font-size: 0.75rem;
  line-height: 1;
  opacity: 0.7;
  flex-shrink: 0;
}

.ai-agent-profile-info-btn:hover {
  opacity: 1;
  color: var(--text);
}

.ai-agent-profile-tooltip-popup {
  position: fixed;
  z-index: 9999;
  max-width: 260px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  background: var(--panel, #1a1a2e);
  box-shadow: 0 4px 16px rgba(0,0,0,0.5);
  pointer-events: auto;
}

.ai-agent-profile-tooltip-description {
  color: var(--text);
  font-size: 0.78rem;
  line-height: 1.5;
  margin-bottom: 7px;
}

.ai-agent-profile-tooltip-triggers {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.ai-agent-profile-trigger {
  padding: 3px 7px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.04);
  color: var(--muted);
  font-size: 0.7rem;
  line-height: 1.2;
}

.ai-agent-profile-trigger-note {
  color: var(--muted);
  font-size: 0.72rem;
  line-height: 1.4;
}

.settings-modal-actions {
  margin-top: 0;
}

.ai-key-actions {
  margin-top: 2px;
  align-items: center;
}

.ai-settings-grid-4col {
  --ai-settings-action-width: 112px;
  grid-template-columns: repeat(2, minmax(260px, 1fr));
  margin-top: 0;
}

.ai-settings-span-4 {
  grid-column: 1 / -1;
}

#settingsPanelAi .settings-modal-section {
  overflow-x: hidden;
}

#settingsPanelAi .ai-genai-mil-warning {
  box-sizing: border-box;
  max-width: 100%;
  min-width: 0;
}

#settingsPanelAi .ai-genai-mil-warning-header > div:first-child {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.ai-genai-mil-extension-status {
  color: var(--text-muted);
  font-size: 0.68rem;
  line-height: 1.35;
}

.ai-genai-mil-extension-status[data-status="connected"] { color: var(--accent-success); }
.ai-genai-mil-extension-status[data-status="missing"] { color: var(--accent-warning); }

#settingsPanelAi .ai-genai-mil-warning-actions {
  align-items: center;
  margin: 8px 0 10px;
}

#settingsPanelAi .ai-genai-mil-warning-actions .primary-button,
#settingsPanelAi .ai-genai-mil-warning-actions .ghost-button {
  box-sizing: border-box;
  justify-content: center;
  min-width: 148px;
  text-decoration: none;
}

#settingsPanelAi .ai-genai-mil-steps {
  display: grid;
  gap: 6px 24px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  padding-left: 20px;
}

#settingsPanelAi .ai-genai-mil-steps li {
  min-width: 0;
  padding-right: 8px;
}

#settingsPanelAi .ai-genai-mil-security-note {
  border-top: 1px solid var(--border);
  color: var(--text-secondary);
  margin: 10px 0 0;
  padding-top: 8px;
}

.ai-settings-grid-4col .ai-settings-api-key-col,
.ai-settings-grid-4col .ai-settings-model-col {
  min-width: 0;
}

.ai-settings-grid-4col .ai-settings-api-key-col input,
.ai-settings-grid-4col .ai-settings-model-col select {
  max-width: none;
  min-width: 0;
}

.ai-settings-grid-4col .ai-model-key-row {
  grid-template-columns: minmax(216px, 1fr) var(--ai-settings-action-width);
}

.ai-model-hint {
  display: block;
  margin-top: 4px;
  font-weight: 500;
  text-transform: none;
  letter-spacing: normal;
}

.ai-model-hint.hidden {
  display: none;
}

.ai-settings-grid-4col .ai-saved-key-row {
  grid-template-columns: minmax(0, 1fr) var(--ai-settings-action-width);
}

.ai-settings-grid-4col #deleteAiProviderBtn,
.ai-settings-grid-4col #aiRefreshModelsBtn {
  width: var(--ai-settings-action-width);
  min-width: var(--ai-settings-action-width);
}

/* Every field in the 4-col AI grid fills its column; without this the generic
   160px settings-grid cap shrinks Saved Keys, Key Label, and Provider while
   their columns stay wide, leaving ragged gaps between fields. */
.settings-modal-grid.ai-settings-grid-4col label:not(.settings-span-2):not(.settings-check-row) input:not([type="checkbox"]),
.settings-modal-grid.ai-settings-grid-4col label:not(.settings-span-2):not(.settings-check-row) select {
  max-width: none;
  min-width: 0;
  min-height: 34px;
}

.tak-profile-row {
  grid-template-columns: minmax(0, 1fr) auto;
}

/* The TAK tab uses two stacked feature cards instead of flush content, so the
   outer section is a transparent container — the inner cards supply the frames
   (avoids the triple-nested-border look). */
.tak-settings-section {
  gap: 14px;
  padding: 0;
  border: 0;
  background: transparent;
}

.tak-settings-section .menu-title-row {
  margin-bottom: 2px;
}

.tak-settings-section #takMemberSection {
  display: grid;
  gap: 14px;
  width: min(100%, 1520px);
}

.tak-settings-panel {
  width: 100%;
  max-width: 1520px;
  box-sizing: border-box;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-soft);
}

/* The server-config panel carries its own padding; the triggered card splits
   into a padded header + body, so it manages padding internally. */
.tak-settings-panel:not(.tak-triggered-card) {
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.integrations-settings-section {
  flex: 0 0 auto;
  gap: 14px;
  padding: 0;
  border: 0;
  background: transparent;
  width: 100%;
  max-width: none;
  min-height: auto;
}

.settings-tab-panel[data-settings-panel="integrations"] {
  overflow-y: auto;
  overflow-x: hidden;
  padding: 14px;
  box-sizing: border-box;
  background: var(--bg);
  scrollbar-gutter: stable;
}

.settings-tab-panel[data-settings-panel="integrations"].is-active {
  align-items: flex-start;
}

.integrations-settings-section > .menu-title-row {
  width: 100%;
}

.settings-x-check-row:has(input[type="checkbox"]:disabled) {
  cursor: default;
  opacity: 0.58;
}

.tak-settings-grid {
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 7px 10px;
  align-items: stretch;
}

.tak-settings-grid .tak-settings-wide,
.tak-settings-grid .settings-check-row,
.tak-settings-grid .tak-cert-grid,
.tak-settings-grid .tak-project-shell {
  grid-column: 1 / -1;
}

/* Username and password share one balanced row when authentication is on. */
.tak-settings-grid #takUsernameRow {
  grid-column: 1 / span 6;
}

.tak-settings-grid #takPasswordRow {
  grid-column: 7 / -1;
}

.tak-settings-grid .tak-settings-saved {
  grid-column: 1 / span 7;
}

.tak-settings-grid .tak-settings-description {
  grid-column: 8 / -1;
}

.tak-settings-grid .tak-settings-host {
  grid-column: 1 / span 4;
}

.tak-settings-grid .tak-settings-tls {
  grid-column: 5 / span 4;
}

.tak-settings-grid .tak-settings-tls-note {
  grid-column: 9 / -1;
  align-self: center;
  min-width: 0;
  padding-top: 14px;
  color: var(--muted);
  line-height: 1.25;
}

.tak-settings-grid .tak-settings-port {
  grid-column: 1 / span 2;
}

.tak-settings-grid .tak-settings-protocol {
  grid-column: 3 / span 2;
}

.tak-settings-grid .tak-radio-helper {
  grid-column: 5 / -1;
  align-self: end;
  min-width: 0;
  padding: 0 0 7px;
  color: var(--muted);
  font-size: 0.74rem;
  line-height: 1.15;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tak-settings-grid .tak-enroll-row {
  grid-column: 5 / span 4;
  align-self: end;
}

.tak-settings-grid .tak-auth-row {
  grid-column: 9 / -1;
  align-self: end;
}

.tak-settings-grid .tak-default-stream-row {
  grid-column: 1 / span 6;
}

.tak-settings-grid .tak-expected-offset-row {
  grid-column: 7 / -1;
}

/* Beat the generic 160px settings-grid input cap so every TAK field fills its
   grid cell instead of leaving a pinched input with dead space beside it. */
.settings-modal-grid.tak-settings-grid label:not(.settings-span-2):not(.settings-check-row) input:not([type="checkbox"]),
.settings-modal-grid.tak-settings-grid label:not(.settings-span-2):not(.settings-check-row) select {
  max-width: none;
  min-width: 0;
  width: 100%;
}

.tak-settings-grid .settings-check-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  padding: 6px 10px;
  border-radius: 6px;
  box-sizing: border-box;
  min-width: 0;
}

.tak-settings-grid .settings-check-row span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tak-inline-actions {
  display: flex;
  gap: 6px;
  flex-wrap: nowrap;
}

.tak-profile-row {
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 6px;
}

.tak-profile-row .ghost-button.small {
  min-width: 0;
  padding-inline: 12px;
}

.tak-enroll-row,
.tak-auth-row,
.tak-default-stream-row,
.tak-expected-offset-row {
  justify-content: flex-start;
  white-space: nowrap;
}

.tak-cert-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.tak-cert-card,
.tak-project-shell {
  display: grid;
  gap: 6px 8px;
  padding: 9px 12px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg-input);
  box-sizing: border-box;
}

.operation-execution-offset-line,
.operation-execution-planned-origin-dot {
  filter: drop-shadow(0 0 2px rgba(15, 23, 42, 0.72));
}

.tak-cert-card {
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
}

.tak-cert-card strong,
.tak-project-header strong {
  color: var(--text);
  font-size: 0.82rem;
}

.tak-cert-card strong {
  grid-column: 1 / -1;
  margin-bottom: -1px;
}

.tak-file-upload {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 24px;
  width: fit-content;
  cursor: pointer;
  padding: 0 8px;
  font-size: 0.76rem;
}

/* Beat .settings-modal-grid label's column direction so the password label and
   input sit inline instead of stacking centered inside the cert card. */
.tak-cert-password-row,
.settings-modal-grid label.tak-cert-password-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 0.78rem;
}

.tak-cert-password-row span {
  color: var(--muted);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  flex-shrink: 0;
}

.tak-cert-password-row input {
  flex: 1;
  min-width: 0;
  max-width: 240px;
}

.tak-cert-card .tak-file-upload {
  grid-column: 1;
}

.tak-cert-card .tak-cert-summary {
  grid-column: 2;
  min-width: 0;
}

.tak-cert-card button {
  grid-column: 3;
  justify-self: end;
  font-size: 0.76rem;
  padding: 3px 8px;
  min-height: 24px;
}

.tak-cert-card .tak-cert-password-row {
  grid-column: 1 / -1;
}

.tak-cert-summary,
.tak-project-hint,
.tak-project-empty {
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.35;
}

.tak-project-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 12px;
}

.tak-project-checklist {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 8px;
  max-height: 248px;
  overflow-y: auto;
  align-items: start;
}

label.tak-project-item {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  align-content: start;
  align-items: center;
  gap: 8px;
  min-height: 56px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--bg-soft);
  cursor: pointer;
}

.tak-project-item input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.tak-project-checkmark {
  width: 18px;
  height: 18px;
  border: 1px solid var(--control-border);
  background: var(--control-bg);
  color: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
  transition: border-color 120ms ease, background 120ms ease, color 120ms ease, box-shadow 120ms ease;
}

.tak-project-item:hover .tak-project-checkmark,
.tak-project-item:focus-within .tak-project-checkmark {
  border-color: rgba(96, 165, 250, 0.52);
  box-shadow: 0 0 0 1px rgba(59, 130, 246, 0.18);
}

.tak-project-item input[type="checkbox"]:checked + .tak-project-checkmark {
  border-color: rgba(125, 211, 252, 0.68);
  background: var(--control-selected-bg);
  color: var(--control-selected-text);
}

.tak-project-copy {
  display: grid;
  gap: 4px;
  align-content: start;
  min-width: 0;
}

.tak-project-copy-title {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.tak-project-copy-title strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tak-project-copy strong {
  color: var(--text);
  font-size: 0.86rem;
}

.tak-project-active-indicator {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  border: 1px solid color-mix(in srgb, var(--accent-success) 72%, var(--border));
  background: color-mix(in srgb, var(--accent-success) 16%, var(--bg-soft));
  color: var(--accent-success);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1;
}

.tak-project-copy span {
  color: var(--muted);
  font-size: 0.76rem;
  line-height: 1.3;
}

/* Networking: transport and local project collaboration */
.networking-settings-section {
  display: grid;
  grid-template-rows: auto auto minmax(250px, 1fr) minmax(294px, 1fr);
  gap: 16px;
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
}

.networking-title-row,
.networking-section-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.networking-intro {
  margin: -6px 0 0;
  max-width: 980px;
  line-height: 1.45;
}

.networking-runtime-badge {
  border: 1px solid var(--border);
  padding: 3px 7px;
  color: var(--text-muted);
  background: var(--bg-soft);
  font-size: 0.72rem;
}

.networking-runtime-badge.is-ready {
  border-color: color-mix(in srgb, var(--accent-success) 58%, var(--border));
  color: var(--accent-success);
}

.tak-radio-helper {
  display: none;
}

.tak-settings-read-only {
  position: relative;
}

.tak-settings-read-only::after {
  content: "Sign in to edit TAK server settings.";
  position: absolute;
  inset: 0 0 auto auto;
  padding: 4px 8px;
  border: 1px solid var(--border);
  background: var(--bg-elevated);
  color: var(--text-muted);
  font-size: 0.7rem;
  pointer-events: none;
}

.network-radio-transport-panel {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto auto;
  gap: 0;
  min-height: 0;
  border: 1px solid var(--border);
  background: var(--bg-soft);
}

.network-radio-transport-panel .networking-section-heading {
  display: flex;
  align-items: start;
  min-height: 58px;
  padding: 12px 16px;
}

.network-radio-transport-panel .networking-section-heading .fine-print {
  display: block;
}

.network-radio-transport-grid {
  grid-template-columns: minmax(320px, 1.7fr) minmax(140px, 0.6fr) minmax(200px, 0.9fr);
  align-content: start;
  gap: 16px;
  padding: 16px;
}

.network-radio-transport-grid > label[hidden] {
  display: none !important;
}

.network-radio-transport-panel .settings-modal-actions {
  margin: 0;
  padding: 12px 16px;
  border-top: 1px solid var(--border);
}

.network-radio-transport-panel .weather-summary {
  margin: 0 16px 16px;
}

.networking-lan-panel {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  min-height: 0;
  gap: 0;
  border: 1px solid var(--border);
  background: var(--bg-soft);
}

.networking-section-heading {
  min-height: 44px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--border);
}

.networking-mode-tabs {
  display: flex;
  border-bottom: 1px solid var(--border);
}

.networking-mode-tab {
  min-width: 120px;
  min-height: 36px;
  padding: 7px 16px;
  border: 0;
  border-right: 1px solid var(--border);
  border-radius: 0;
  background: var(--bg);
  color: var(--text-muted);
  font: inherit;
  cursor: pointer;
}

.networking-mode-tab:hover {
  color: var(--text);
  background: var(--control-hover-bg);
}

.networking-mode-tab.is-active {
  color: var(--control-selected-text);
  background: var(--control-selected-bg);
  box-shadow: inset 0 -2px 0 var(--accent);
}

.networking-mode-tab:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: -2px;
}

.networking-mode-panel {
  display: none;
  flex-direction: column;
  gap: 16px;
  min-height: 0;
  padding: 16px;
}

.networking-mode-panel.is-active {
  display: flex;
}

.networking-form-grid {
  display: grid;
  grid-template-columns: minmax(260px, 1.7fr) minmax(150px, 0.7fr) minmax(200px, 0.9fr);
  gap: 16px;
  align-items: end;
}

.networking-lan-panel .networking-form-grid {
  grid-template-columns: minmax(320px, 1.7fr) minmax(140px, 0.6fr) minmax(200px, 0.9fr);
}

.networking-form-grid > label {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.networking-form-grid .settings-check-row {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  min-height: 32px;
  padding-top: 4px;
}

.lan-address-list {
  min-height: 28px;
  align-self: start;
  padding: 8px 10px;
  border: 1px solid var(--border);
  background: var(--bg-input);
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

.lan-address-list code {
  display: inline-block;
  margin-right: 12px;
  color: var(--text);
}

#lanHostStatus,
#lanMemberStatus {
  margin-top: auto;
}

@media (max-width: 1100px) {
  .networking-settings-section {
    grid-template-rows: auto auto auto auto;
  }

  .networking-form-grid,
  .networking-lan-panel .networking-form-grid,
  .network-radio-transport-grid {
    grid-template-columns: minmax(0, 1fr) minmax(120px, 0.5fr);
  }
}

@media (max-width: 700px) {
  .network-radio-transport-grid,
  .networking-form-grid,
  .networking-lan-panel .networking-form-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .networking-mode-tab {
    flex: 1 1 0;
    min-width: 0;
  }
}

/* TAK triggered prompting enable toggle */
.tak-triggered-toggle-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
}
.tak-triggered-toggle-input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
/* pill-style slide toggle */
.tak-triggered-toggle-box {
  display: inline-flex;
  align-items: center;
  width: 32px;
  height: 18px;
  flex-shrink: 0;
  border: 1.5px solid var(--border);
  border-radius: 100px;
  background: rgba(8, 13, 24, 0.5);
  position: relative;
  transition: background 160ms ease, border-color 160ms ease;
}
.tak-triggered-toggle-box::after {
  content: "";
  position: absolute;
  left: 2px;
  top: 50%;
  transform: translateY(-50%);
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--text-muted);
  transition: left 160ms ease, background 160ms ease;
}
.tak-triggered-toggle-input:checked ~ .tak-triggered-toggle-box {
  border-color: var(--accent);
  background: rgba(var(--accent-rgb), 0.18);
}
.tak-triggered-toggle-input:checked ~ .tak-triggered-toggle-box::after {
  left: calc(100% - 13px);
  background: var(--accent);
}
.tak-triggered-toggle-desc {
  font-size: 0.74rem;
  color: var(--text-muted);
  white-space: nowrap;
}
.tak-triggered-toggle-input:checked ~ .tak-triggered-toggle-desc {
  color: var(--accent);
}

/* TAK Triggered Prompting */
.tak-triggered-card {
  box-sizing: border-box;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-soft);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.tak-triggered-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 14px;
  border-bottom: 1px solid var(--border);
  background: rgba(8, 13, 24, 0.3);
}
.tak-triggered-section {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 14px;
  transition: opacity 160ms ease;
}
.tak-triggered-section.tak-triggered-disabled {
  opacity: 0.42;
  pointer-events: none;
}
.tak-triggered-description {
  font-size: 0.79rem;
  color: var(--text-muted);
  line-height: 1.5;
  margin: 0;
  max-width: 112ch;
}
/* Two labeled boxes of equal width that stretch to the same height, so the
   prefix editor and the option checklist read as balanced, aligned panels. */
.tak-triggered-layout {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) minmax(320px, 1fr);
  gap: 16px;
  align-items: stretch;
}
.tak-triggered-col {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.tak-triggered-col > .tak-trigger-input-row,
.tak-triggered-col > .tak-triggered-options {
  flex: 1 1 auto;
}
.tak-triggered-field-label {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 0.8rem;
  color: var(--text-muted);
  font-weight: 500;
}
.tak-triggered-options {
  display: grid;
  gap: 8px;
  align-content: center;
  min-width: 0;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: rgba(8, 13, 24, 0.45);
}
.tak-trigger-input-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: rgba(8, 13, 24, 0.45);
}
.tak-trigger-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  min-height: 24px;
}
.tak-trigger-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 7px 2px 9px;
  background: rgba(59, 130, 246, 0.15);
  border: 1px solid rgba(96, 165, 250, 0.35);
  border-radius: 100px;
  font-size: 0.76rem;
  font-family: monospace;
  color: var(--accent);
}
.tak-trigger-chip-text {
  letter-spacing: 0.03em;
}
.tak-trigger-chip-remove {
  background: none;
  border: none;
  padding: 0 2px;
  cursor: pointer;
  color: var(--text-muted);
  font-size: 0.68rem;
  line-height: 1;
  opacity: 0.7;
}
.tak-trigger-chip-remove:hover {
  opacity: 1;
  color: var(--accent-danger);
}
.tak-trigger-add-row {
  display: flex;
  gap: 6px;
  align-items: center;
}
.tak-trigger-add-row input {
  flex: 1;
  font-family: monospace;
  font-size: 0.82rem;
}
.tak-triggered-section .settings-check-row {
  font-size: 0.82rem;
  gap: 8px;
  width: 100%;
}
.tak-triggered-status-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: rgba(8, 13, 24, 0.45);
  flex-wrap: wrap;
}
.tak-triggered-status-label {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.tak-triggered-status-text {
  font-size: 0.82rem;
  color: var(--text-muted);
}
.tak-triggered-status-text[data-level="ok"] { color: #4ade80; }
.tak-triggered-status-text[data-level="error"] { color: var(--accent-danger); }
.tak-triggered-counters {
  display: flex;
  gap: 24px;
}
.tak-triggered-counter {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  min-width: 48px;
}
.tak-triggered-count {
  font-size: 1.35rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--text);
  line-height: 1;
}
.tak-triggered-count-label {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}

body.settings-modal-open {
  overflow: hidden;
}

@media (max-width: 960px) {
  .tak-triggered-layout {
    grid-template-columns: 1fr;
  }

  .simulation-modal-body {
    grid-template-columns: 1fr;
    overflow-y: auto;
  }

  .simulation-modal-config {
    border-right: 0;
    border-bottom: 1px solid var(--border);
  }

  .settings-modal-body {
    overflow: hidden;
  }

  .settings-modal-section + .settings-modal-section {
    border-top: 1px solid var(--border);
  }

  .settings-tab-panel {
    padding: 10px;
  }

  .settings-modal-grid {
    grid-template-columns: 1fr;
  }

  .ai-settings-grid-4col,
  #settingsPanelAi .ai-genai-mil-steps {
    grid-template-columns: minmax(0, 1fr);
  }

  .ai-settings-span-4 {
    grid-column: 1;
  }

  .ai-settings-grid-4col .ai-model-key-row,
  .ai-settings-grid-4col .ai-saved-key-row {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .settings-views-top-row,
  .settings-analysis-view-grid {
    grid-template-columns: 1fr;
  }

  .settings-general-grid {
    grid-template-columns: 1fr;
  }

  .settings-span-2 {
    grid-column: span 1;
  }

  .settings-general-grid .settings-check-row,
  .settings-general-grid .settings-top-field,
  .settings-general-grid .settings-gridlines-pair,
  .settings-general-grid .settings-half-row,
  .settings-general-grid .settings-span-2 {
    grid-column: span 1;
  }

  .settings-general-grid .settings-gridlines-pair {
    grid-template-columns: 1fr;
  }

  .settings-general-grid .settings-gridlines-color-row {
    grid-template-columns: 1fr;
  }

  .settings-saved-key-row {
    grid-template-columns: 1fr;
  }

  .ai-agent-profiles-list {
    max-height: 100px;
  }

  .tak-cert-grid {
    grid-template-columns: 1fr;
  }

  /* Explicit 12-column placements would spill out of the collapsed
     single-column grid. */
  .tak-settings-grid > * {
    grid-column: 1 / -1 !important;
  }

  .settings-docs-shell {
    grid-template-columns: 1fr;
  }

  .settings-docs-nav {
    max-height: 260px;
  }
}

.tak-cert-password-modal {
  width: min(680px, calc(100vw - 32px));
}

.tak-cert-password-body {
  display: block;
  padding: 18px;
}

.local-imagery-settings {
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid var(--border);
  background: var(--bg-card-alt);
}

.local-imagery-settings-title {
  font-weight: 700;
}

.local-imagery-folder-row {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto auto auto auto;
  gap: 8px;
  align-items: end;
}

.local-imagery-folder-field {
  min-width: 0;
}

.local-imagery-source-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr));
  gap: 4px;
  align-content: start;
  overflow: visible;
}

.local-imagery-source-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 34px;
  padding: 5px 8px;
  border: 1px solid var(--border);
  background: var(--bg);
}

.local-imagery-source-details {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.local-imagery-source-details span {
  color: var(--text-muted);
  font-size: 0.75rem;
}

.local-imagery-empty {
  color: var(--text-muted);
  font-size: 0.8rem;
}

@media (max-width: 900px) {
  .local-imagery-folder-row {
    grid-template-columns: 1fr 1fr;
  }

  .local-imagery-folder-field {
    grid-column: 1 / -1;
  }
}

/* Settings > General > About.
   Reference detail, not a control surface: a quiet two-column grid rather than
   the browser's default <dl>, which stacked every label above an indented
   value and gave build metadata more visual weight than the settings above
   it. Values that get compared character by character (commit hash, version)
   are monospaced so they are readable when quoted into a bug report. */
.settings-about-grid {
  display: grid;
  grid-template-columns: minmax(72px, max-content) 1fr;
  gap: 4px 16px;
  margin: 0;
  align-items: baseline;
  font-size: 0.8rem;
  line-height: 1.5;
}

.settings-about-grid dt {
  margin: 0;
  color: var(--muted);
  font-weight: 500;
  white-space: nowrap;
}

.settings-about-grid dd {
  margin: 0;
  min-width: 0;
  color: var(--text);
  overflow-wrap: anywhere;
}

.settings-about-grid dd[id="aboutVersionValue"],
.settings-about-grid dd[id="aboutBuildValue"] {
  font-family: Consolas, "Cascadia Mono", "Courier New", monospace;
  font-size: 0.78rem;
}

.settings-about-notice {
  margin: 4px 0 0;
  padding: 7px 10px;
  border: 1px solid rgba(var(--accent-warning-rgb, 234, 179, 8), 0.35);
  border-radius: 6px;
  background: rgba(var(--accent-warning-rgb, 234, 179, 8), 0.08);
  color: var(--text);
  font-size: 0.78rem;
  line-height: 1.45;
}

.settings-about-notice[hidden] {
  display: none;
}

/* Unified Settings control treatment and dense layout cleanup. */
.settings-modal :where(button, input:not([type="checkbox"]):not([type="radio"]), select, textarea),
.settings-modal :where(.settings-modal-section, .embedded-settings-panel, .settings-view-card, .local-imagery-settings, .local-imagery-source-row, .network-radio-transport-panel, .networking-lan-panel, .lan-address-list, .weather-summary) {
  border-radius: 5px;
}

.settings-modal :where(button, input:not([type="checkbox"]):not([type="radio"]), select, textarea):focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

.settings-modal :where(input:not([type="checkbox"]):not([type="radio"]), select, textarea) {
  min-height: 34px;
  border-color: var(--control-border);
  background: var(--bg-input);
  color: var(--text);
  font-family: var(--app-font-family);
  font-size: 0.8rem;
}

.settings-tab-button {
  margin: 4px 2px 0;
  border: 1px solid transparent;
  border-bottom: 2px solid transparent;
  border-radius: 5px 5px 0 0;
}

.settings-tab-button.is-active {
  border-color: var(--border);
  border-bottom-color: var(--accent);
}

.settings-tab-panel.is-active {
  padding-bottom: 24px;
}

.settings-tab-panel[data-settings-panel="imagery"] .settings-modal-section,
.settings-tab-panel[data-settings-panel="imagery"] .settings-modal-grid,
.local-imagery-settings {
  height: auto;
  min-height: max-content;
  overflow: visible;
}

.terrain-source-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  align-items: stretch;
}

.terrain-source-row > label,
.terrain-folder-link {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  margin: 0;
  padding: 9px;
  border: 1px solid var(--border);
  border-radius: 5px;
  background: var(--bg-card-alt);
}

.terrain-source-row input[type="file"] {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.settings-modal input[type="file"]::file-selector-button,
.settings-modal input[type="file"]::-webkit-file-upload-button {
  min-height: 26px;
  margin: 0 8px 0 0;
  padding: 3px 9px;
  border: 1px solid var(--control-border);
  border-radius: 5px;
  background: var(--control-bg);
  color: var(--control-text);
  font-family: var(--app-font-family);
  font-size: 0.76rem;
  font-weight: 600;
  cursor: pointer;
}

.settings-modal input[type="file"]:hover::file-selector-button,
.settings-modal input[type="file"]:hover::-webkit-file-upload-button {
  border-color: var(--control-border-hover);
  background: var(--control-bg-hover);
}

.terrain-source-label {
  color: var(--text-secondary);
  font-size: 0.76rem;
}

.terrain-folder-link-actions {
  flex-wrap: wrap;
}

.terrain-folder-status {
  margin-top: auto;
  min-height: 18px;
}

#settingsPanelTerrain.is-active {
  overflow-y: auto;
}

#settingsPanelTerrain .terrain-settings-panel {
  flex: 0 0 auto;
  overflow: visible;
}

#settingsPanelTerrain .terrain-empty-state {
  display: grid;
  gap: 3px;
  align-self: start;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 5px;
  background: var(--bg-card-alt);
  color: var(--text);
}

#settingsPanelTerrain .terrain-empty-state strong {
  font-size: 0.8rem;
}

#settingsPanelTerrain .terrain-empty-state span {
  color: var(--text-muted);
  font-size: 0.75rem;
  line-height: 1.35;
}

.networking-settings-section {
  grid-template-rows: auto auto auto auto;
  gap: 10px;
  overflow: visible;
}

.network-radio-transport-panel,
.networking-lan-panel {
  min-height: auto;
  overflow: visible;
}

.network-radio-transport-panel .networking-section-heading,
.networking-section-heading {
  min-height: 0;
  padding: 9px 12px;
}

.network-radio-transport-grid,
.networking-mode-panel,
.networking-form-grid {
  gap: 8px 12px;
}

.network-radio-transport-grid,
.networking-mode-panel {
  padding: 12px;
}

.network-radio-transport-grid,
.networking-lan-panel .networking-form-grid {
  grid-template-columns: minmax(260px, 2fr) minmax(96px, 0.7fr) minmax(170px, 1fr);
}

.networking-form-grid > label {
  gap: 5px;
}

.networking-form-grid .settings-check-row {
  min-height: 28px;
  padding-top: 2px;
}

.network-radio-transport-panel .settings-modal-actions,
.networking-mode-panel .settings-modal-actions {
  align-self: flex-start;
  width: auto;
  margin: 0;
  padding: 0;
  border: 0;
}

.network-radio-transport-panel .settings-modal-actions {
  margin: 0 12px 10px;
}

.network-radio-transport-panel .weather-summary {
  margin: 0 12px 12px;
}

.networking-mode-tab {
  min-width: 82px;
  min-height: 30px;
  margin: 0;
  padding: 4px 12px;
  border: 1px solid transparent;
  border-radius: 4px;
  font-size: 0.76rem;
  font-weight: 700;
}

.settings-debug-grid {
  grid-template-columns: 1fr;
  gap: 8px;
}

.settings-debug-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(190px, 240px);
  align-items: center;
  gap: 16px;
  min-height: 0;
  padding: 12px;
}

.settings-debug-card .settings-view-card-copy {
  display: grid;
  grid-template-columns: 82px 190px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
}

.settings-debug-card .settings-view-card-copy p,
.settings-debug-card .settings-debug-toggle {
  min-height: 0;
  margin: 0;
}

@media (max-width: 900px) {
  .terrain-source-row { grid-template-columns: 1fr; }
  .settings-debug-card,
  .settings-debug-card .settings-view-card-copy { grid-template-columns: 1fr; }
}

.settings-about-disclosure {
  margin-top: 10px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  background: var(--bg-card-alt);
  color: var(--text-secondary);
  font-size: 0.78rem;
  line-height: 1.45;
}

.settings-about-disclosure strong,
.settings-about-disclosure summary {
  color: var(--text);
  font-weight: 700;
}

.settings-about-disclosure summary { cursor: pointer; }
.settings-about-disclosure p { margin: 5px 0 0; }
.settings-about-disclosure--warning { border-color: rgba(var(--accent-warning-rgb, 234, 179, 8), 0.45); }

/* General: keep the marker-size control compact beside the gridline controls
   so the About section can begin immediately below this utility row. */
.settings-general-grid .settings-marker-size-row {
  display: grid;
  grid-template-columns: minmax(108px, 0.55fr) minmax(120px, 1.25fr) 44px;
  column-gap: 10px;
  row-gap: 2px;
  align-items: center;
  min-height: 50px;
}

.settings-general-grid .settings-marker-size-row > span {
  grid-row: 1 / span 2;
  color: var(--text);
  font-size: 0.84rem;
  font-weight: 650;
}

.settings-general-grid .settings-marker-size-row .settings-slider-row {
  display: contents;
  margin-top: 0;
}

.settings-general-grid .settings-marker-size-row input[type="range"] {
  grid-column: 2;
  grid-row: 1;
  min-width: 0;
  min-height: 18px;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.settings-general-grid .settings-marker-size-row .settings-slider-value {
  grid-column: 3;
  grid-row: 1;
  min-width: 44px;
  text-align: right;
}

.settings-general-grid .settings-marker-size-row .settings-slider-labels {
  grid-column: 2;
  box-sizing: border-box;
  padding-right: 0;
  margin-top: 0;
}

/* About: metadata and product status have different scanning jobs. Keep the
   deployment facts together on the left, and the attribution/use notices in
   one compact stack on the right. */
.settings-about-layout {
  display: grid;
  grid-template-columns: minmax(260px, 0.72fr) minmax(0, 1.28fr);
  gap: 12px;
  align-items: stretch;
}

.settings-about-build-column,
.settings-about-status-column {
  min-width: 0;
}

.settings-about-build-column {
  padding: 9px 10px;
  border: 1px solid var(--border);
  background: var(--bg-card-alt);
}

.settings-about-status-column {
  display: grid;
  gap: 7px;
}

.settings-about-kicker {
  display: block;
  margin-bottom: 6px;
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.settings-about-layout .settings-about-grid {
  gap: 2px 12px;
  font-size: 0.76rem;
  line-height: 1.35;
}

.settings-about-layout .settings-about-grid dd[id="aboutVersionValue"],
.settings-about-layout .settings-about-grid dd[id="aboutBuildValue"] {
  font-size: 0.73rem;
}

.settings-about-layout .settings-about-disclosure {
  margin: 0;
  padding: 7px 9px;
  font-size: 0.74rem;
  line-height: 1.35;
}

.settings-about-layout .settings-about-disclosure p {
  margin-top: 3px;
}

.settings-about-layout .settings-about-notice {
  margin-top: 7px;
}

@media (max-width: 960px) {
  .settings-general-grid .settings-primary-toggles,
  .settings-general-grid .settings-utility-row {
    grid-template-columns: 1fr;
  }

  .settings-general-grid .settings-marker-size-row {
    grid-template-columns: 1fr;
    row-gap: 5px;
  }

  .settings-general-grid .settings-marker-size-row .settings-slider-row {
    display: flex;
  }

  .settings-general-grid .settings-marker-size-row .settings-slider-labels {
    padding-right: 54px;
  }

  .settings-general-grid .settings-marker-size-row > span,
  .settings-general-grid .settings-marker-size-row .settings-slider-row,
  .settings-general-grid .settings-marker-size-row .settings-slider-labels {
    grid-column: 1;
    grid-row: auto;
  }

  .settings-about-layout {
    grid-template-columns: 1fr;
  }
}

/* TAK input source: the two choices read as one compact, theme-matched
   control while each option remains a full rounded-rectangle button. */
.tak-connection-mode-switch {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  width: min(100%, 272px);
  gap: 2px;
  padding: 2px;
  margin-bottom: 6px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg-soft);
}

.settings-modal .tak-connection-mode-option {
  min-height: 26px;
  padding: 2px 10px;
  border: 1px solid transparent;
  border-radius: 4px;
  background: transparent;
  color: var(--muted);
  box-shadow: none;
  font-size: 0.76rem;
}

.settings-modal .tak-connection-mode-option:hover {
  color: var(--text);
  border-color: var(--border-strong);
}

.settings-modal .tak-connection-mode-option.is-active {
  color: var(--text);
  border-color: var(--border-strong);
  background: color-mix(in srgb, var(--text) 13%, var(--bg-card));
  box-shadow: none;
}

.tak-local-mode-section {
  width: min(100%, 1520px);
}

.tak-local-panel {
  display: grid;
  gap: 14px;
  padding: 18px;
}

.tak-local-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.tak-local-heading > div {
  display: grid;
  gap: 4px;
}

.tak-local-heading span {
  color: var(--muted);
  line-height: 1.45;
}

.tak-local-runtime-badge {
  flex: 0 0 auto;
  padding: 4px 8px;
  border: 1px solid var(--border-strong);
  border-radius: 5px;
  color: var(--muted);
  background: var(--bg-card-alt);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.tak-local-runtime-badge.is-listening {
  color: var(--success);
  border-color: color-mix(in srgb, var(--success) 55%, var(--border));
  background: color-mix(in srgb, var(--success) 10%, var(--bg-card));
}

.tak-local-runtime-badge.is-error {
  color: var(--danger);
  border-color: color-mix(in srgb, var(--danger) 55%, var(--border));
}

.tak-local-config-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(150px, 220px);
  gap: 12px;
}

.tak-local-config-grid label {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.settings-modal .tak-local-config-grid input {
  width: 100%;
  min-height: 38px;
  border-radius: 7px;
}

.tak-local-config-grid input[readonly] {
  color: var(--muted);
  background: var(--bg-card-alt);
}

.tak-local-output-card {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 6px 16px;
  padding: 13px 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-card-alt);
}

.tak-local-output-card strong {
  min-width: 0;
  color: var(--text);
  font-family: var(--font-mono);
  overflow-wrap: anywhere;
}

.tak-local-output-card p {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--muted);
  line-height: 1.45;
}

.tak-local-actions {
  margin: 0;
}

@media (max-width: 720px) {
  .tak-local-config-grid,
  .tak-local-output-card {
    grid-template-columns: 1fr;
  }

  .tak-local-output-card p {
    grid-column: auto;
  }
}

/* Settings-wide shape contract.
   Every tab shares the same rounded-rectangle vocabulary so newly added
   controls do not fall back to square browser/default component edges. Keep
   true indicators (theme dots, range thumbs, and toggle-slider knobs) round. */
.settings-modal {
  --settings-card-radius: 8px;
  --settings-control-radius: 6px;
  border-radius: 12px;
  overflow: hidden;
}

.settings-modal .settings-tab-bar {
  align-items: center;
  gap: 4px;
  padding: 5px 14px;
}

.settings-modal .settings-tab-button {
  min-height: 36px;
  margin: 0;
  padding: 8px 14px;
  border: 1px solid transparent;
  border-radius: var(--settings-control-radius);
}

.settings-modal .settings-tab-button:hover {
  border-color: var(--control-border);
}

.settings-modal .settings-tab-button.is-active {
  border-color: var(--border-strong);
  border-bottom-color: var(--accent);
}

.settings-modal :where(
  button,
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
  select,
  textarea
) {
  border-radius: var(--settings-control-radius);
}

.settings-modal :where(
  .settings-modal-section,
  .embedded-settings-panel,
  .settings-view-card,
  .settings-modes-purpose > div,
  .settings-top-field,
  .settings-check-row,
  .settings-x-check-row,
  .settings-half-row,
  .settings-gridlines-pair,
  .settings-gridlines-color-row,
  .settings-analysis-views-section,
  .appearance-workspace-section,
  .settings-about-build-column,
  .settings-about-disclosure,
  .local-imagery-settings,
  .local-imagery-source-row,
  .terrain-source-row > label,
  .terrain-folder-link,
  .terrain-sampling-control,
  .terrain-summary,
  .list-shell,
  .satellite-mode-clock,
  .satellite-mode-clock dl > div,
  .satellite-constellation-fieldset,
  .satellite-elevation-control,
  .satellite-settings-options .settings-top-field,
  .satellite-catalog-summary,
  .weather-summary,
  .ai-agent-profiles-section,
  .ai-genai-mil-platform,
  .ai-genai-mil-security-note,
  .ai-genai-mil-warning,
  .tak-settings-panel,
  .tak-cert-card,
  .tak-project-shell,
  .tak-project-checklist,
  .tak-triggered-options,
  .tak-trigger-input-row,
  .tak-triggered-status-row,
  .tak-local-output-card,
  .network-radio-transport-panel,
  .networking-lan-panel,
  .networking-mode-panel,
  .lan-address-list,
  .settings-debug-card,
  .settings-docs-nav,
  .settings-docs-content
) {
  border-radius: var(--settings-card-radius);
}

.settings-modal :where(
  .networking-runtime-badge,
  .satellite-source-badge,
  .ai-genai-mil-warning-badge,
  .tak-trigger-chip
) {
  border-radius: 5px;
}

.settings-modal .networking-mode-tabs {
  align-items: center;
  align-self: start;
  width: max-content;
  gap: 2px;
  margin: 8px 12px 0;
  padding: 2px;
  border: 1px solid var(--border);
  border-radius: var(--settings-control-radius);
  background: var(--bg-input);
}

.settings-modal .networking-mode-tab {
  min-width: 82px;
  min-height: 30px;
  margin: 0;
  border: 1px solid transparent;
  border-radius: var(--settings-control-radius);
}

.settings-modal .networking-mode-tab:hover,
.settings-modal .networking-mode-tab.is-active {
  border-color: var(--control-border);
}

.settings-modal .settings-docs-toc-link.is-active {
  border-radius: var(--settings-control-radius);
}

.settings-modal fieldset {
  border-radius: var(--settings-card-radius);
}

@media (max-width: 960px) {
  .settings-modal .settings-tab-bar {
    padding-inline: 8px;
  }

  .settings-modal .settings-tab-button {
    padding-inline: 10px;
  }
}