/**
 * Shared suite chrome for Avionics tools — matches Aircraft / Performance daylight tokens.
 * Load after each tool's local stylesheet. Does not change tool workflows.
 */
:root {
  color-scheme: light;
  --bg: #f4f6f8;
  --panel: #ffffff;
  --chrome: #e8ecf1;
  --ink: #1c2128;
  --text: #1c2128;
  --text-secondary: #424a53;
  --muted: #656d76;
  --line: #d0d7de;
  --border: #d0d7de;
  --border-strong: #afb8c1;
  --input-bg: #ffffff;
  --input-text: #1c2128;
  --link: #0969da;
  --accent: #0b7a3e;
  --accent-soft: rgba(11, 122, 62, 0.12);
  --accent-to: #0369a1;
  --accent-to-soft: rgba(3, 105, 161, 0.12);
  --accent-2: #0369a1;
  --navy: #1c2128;
  --blue: #0969da;
  --blue-soft: rgba(9, 105, 218, 0.12);
  --green: #0b7a3e;
  --green-soft: #dafbe1;
  --amber: #7d4e00;
  --amber-soft: #fff8c5;
  --red: #b42318;
  --red-soft: #ffebe9;
  --ok: #1a7f37;
  --ok-bg: #dafbe1;
  --ok-fg: #1a7f37;
  --warn: #7d4e00;
  --warn-bg: #fff8c5;
  --danger: #cf222e;
  --shadow: 0 1px 2px rgba(31, 35, 40, 0.08);
  --font: "Segoe UI", sans-serif;
  --mono: ui-monospace, "Cascadia Mono", Consolas, monospace;
  --gauge-bg: #eaeef2;
}

html, body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--ink);
}

/* Standalone suite nav → same light chrome as Aircraft tab bar */
.suite-nav {
  background: var(--chrome) !important;
  border-bottom: 1px solid var(--border) !important;
  font-family: var(--font) !important;
}
.suite-nav a {
  color: var(--link) !important;
  border: 1px solid transparent !important;
}
.suite-nav a:hover {
  color: var(--accent-to) !important;
  background: var(--accent-to-soft) !important;
}
.suite-nav a.current {
  color: var(--text) !important;
  background: var(--panel) !important;
  border-color: var(--border) !important;
}
.suite-nav .suite-label {
  color: var(--muted) !important;
}
.suite-nav .suite-sep {
  background: var(--border) !important;
}

/* SW badge → Aircraft style (not pill/dark) */
.sw-version {
  font-family: var(--mono) !important;
  font-size: 0.62rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  color: var(--ok-fg) !important;
  background: var(--ok-bg) !important;
  border: 1px solid var(--accent) !important;
  border-radius: 4px !important;
  padding: 2px 8px !important;
}

/* ——— GTN: light tool header (was navy banner) ——— */
header {
  background: var(--panel) !important;
  color: var(--text) !important;
  border-bottom: 1px solid var(--border);
  padding: 12px 16px 10px !important;
}
header h1 {
  font-size: 1.15rem !important;
  color: var(--text) !important;
  margin: 0 0 6px !important;
}
header .lead {
  color: var(--muted) !important;
  font-size: 0.72rem !important;
  max-width: 52rem;
}
header h2, header h3 { color: var(--text); }

nav.tabs {
  margin-top: 12px !important;
  gap: 6px !important;
  padding-bottom: 2px;
  border-bottom: 1px solid var(--border);
}

.tab-button {
  border: 1px solid transparent !important;
  background: transparent !important;
  color: var(--muted) !important;
  border-radius: 0 !important;
  border-bottom: 2px solid transparent !important;
  margin-bottom: -1px !important;
  padding: 8px 12px !important;
  font-size: 0.72rem !important;
  font-weight: 700 !important;
}
.tab-button:hover {
  color: var(--text) !important;
  background: var(--accent-to-soft) !important;
}
.tab-button.active {
  background: transparent !important;
  color: var(--text) !important;
  border-bottom-color: var(--accent) !important;
}

.header-sd {
  border: 1px solid var(--border) !important;
  border-radius: 8px !important;
  background: var(--surface-2, #eaeef2) !important;
  margin-top: 10px !important;
  padding: 8px 10px !important;
}
.header-sd .status,
.status {
  background: var(--accent-to-soft) !important;
  color: var(--accent-to) !important;
  border-radius: 6px !important;
  font-size: 0.72rem !important;
}

main {
  padding: 14px 16px 22px !important;
}

.card {
  border: 1px solid var(--border) !important;
  border-radius: 8px !important;
  box-shadow: var(--shadow) !important;
  background: var(--panel) !important;
}

.pill {
  border-radius: 4px !important;
  background: var(--accent-to-soft) !important;
  color: var(--accent-to) !important;
  font-size: 0.62rem !important;
}

input, textarea, select {
  border: 1px solid var(--border) !important;
  border-radius: 6px !important;
  background: var(--input-bg) !important;
  color: var(--input-text) !important;
  font-size: 0.78rem !important;
}

button {
  border-radius: 6px !important;
  font-size: 0.68rem !important;
  font-weight: 700 !important;
  background: var(--accent-to) !important;
}
button.secondary {
  background: var(--chrome) !important;
  color: var(--text) !important;
  border: 1px solid var(--border) !important;
}
button.ghost {
  background: var(--accent-to-soft) !important;
  color: var(--accent-to) !important;
}
button.danger { background: var(--danger) !important; }

.import-row {
  border: 1px solid var(--border) !important;
  border-radius: 8px !important;
  background: var(--chrome) !important;
}

table th, table td {
  border-color: var(--border) !important;
}

/* ——— GI 275: flat daylight shell ——— */
.app {
  background: var(--bg);
}
aside {
  background: var(--panel) !important;
  border-right: 1px solid var(--border) !important;
  font-family: var(--font);
}
aside h1 {
  font-size: 1.05rem !important;
  font-weight: 700 !important;
  color: var(--text) !important;
}
aside .lead {
  color: var(--muted) !important;
  font-size: 0.72rem !important;
}

label.file-btn,
aside button,
.app button {
  font-family: var(--font) !important;
  font-size: 0.68rem !important;
  border-radius: 6px !important;
  border: 1px solid var(--border) !important;
  background: var(--panel) !important;
  color: var(--text) !important;
}
label.file-btn,
button.primary {
  background: var(--accent-to) !important;
  color: #fff !important;
  border-color: var(--accent-to) !important;
}
button.accent {
  background: var(--accent) !important;
  color: #fff !important;
  border-color: var(--accent) !important;
}

.library,
.peaks-panel {
  border-color: var(--border) !important;
  background: var(--panel) !important;
  border-radius: 8px !important;
  box-shadow: var(--shadow);
}
.lib-item:hover { background: var(--chrome) !important; }
.lib-item.active {
  background: var(--accent-to-soft) !important;
  box-shadow: inset 3px 0 0 var(--accent-to) !important;
}
.library-label,
.peaks-panel h3 {
  color: var(--muted) !important;
  font-size: 0.62rem !important;
}
.import-status,
.lib-item .meta,
.library-count {
  color: var(--muted) !important;
  font-family: var(--mono) !important;
}
.lib-item .name { font-family: var(--mono) !important; }

/* Embed: hide redundant chrome under suite tabs */
html.embed-mode header {
  padding: 10px 14px 8px !important;
}
html.embed-mode header h1 .sw-version {
  /* suite hub already shows SW; keep compact */
  font-size: 0.55rem !important;
}
html.embed-mode aside {
  max-height: none;
}