/* Shared styling for the guides, About and Contact pages.
   Deliberately plain, text-first and dependency-free: these pages exist to be
   read and to be crawled, so no framework, no webfont, no JS. Mirrors the
   privacy page's palette so the whole site reads as one thing. */

:root { color-scheme: light dark; }

* { box-sizing: border-box; }

body {
  font: 17px/1.7 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  color: #1c2733;
  margin: 0;
  background: #f6f8fb;
}

.site-header {
  border-bottom: 1px solid rgba(120, 135, 155, 0.22);
  background: #fff;
}
.site-header .inner,
main,
.site-footer .inner {
  max-width: 760px;
  margin: 0 auto;
  padding: 0 24px;
}
.site-header .inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px;
  padding-top: 16px;
  padding-bottom: 16px;
}
.site-header .brand {
  font-weight: 700;
  font-size: 17px;
  color: #1c2733;
  text-decoration: none;
  margin-right: auto;
}
.site-header nav a {
  color: #33404f;
  text-decoration: none;
  font-size: 15px;
}
.site-header nav a + a { margin-left: 16px; }
.site-header nav a:hover { text-decoration: underline; }

main { padding: 44px 24px 72px; }

h1 { font-size: 32px; line-height: 1.25; margin: 0 0 10px; }
h2 { font-size: 22px; margin: 38px 0 10px; }
h3 { font-size: 18px; margin: 26px 0 6px; }
p, li { color: #33404f; }
a { color: #2563eb; }

.lede { font-size: 19px; color: #4a5766; margin: 0 0 8px; }
.updated { color: #6b7787; font-size: 14px; margin: 0 0 30px; }

code, .raw {
  font: 15px/1.55 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  background: rgba(120, 135, 155, 0.14);
  border-radius: 5px;
  padding: 1px 5px;
}
.raw {
  display: block;
  padding: 14px 16px;
  margin: 16px 0;
  overflow-x: auto;
  white-space: pre-wrap;
  word-break: break-word;
}

table { border-collapse: collapse; width: 100%; margin: 18px 0; font-size: 16px; }
th, td { text-align: left; padding: 9px 10px; border-bottom: 1px solid rgba(120, 135, 155, 0.24); vertical-align: top; }
th { font-weight: 600; }

.note {
  border-left: 3px solid #2563eb;
  background: rgba(37, 99, 235, 0.07);
  padding: 12px 16px;
  margin: 22px 0;
  border-radius: 0 6px 6px 0;
}
.note.warn { border-left-color: #c2410c; background: rgba(194, 65, 12, 0.08); }

.cat { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 14px; font-weight: 600; color: #fff; }
.cat.vfr  { background: #17803d; }
.cat.mvfr { background: #1d4ed8; }
.cat.ifr  { background: #b91c1c; }
.cat.lifr { background: #86198f; }

.card-list { list-style: none; padding: 0; margin: 26px 0 0; }
.card-list li { border-top: 1px solid rgba(120, 135, 155, 0.24); padding: 16px 0; }
.card-list a { font-size: 18px; font-weight: 600; text-decoration: none; }
.card-list a:hover { text-decoration: underline; }
.card-list p { margin: 4px 0 0; color: #5a6675; font-size: 16px; }

.site-footer {
  border-top: 1px solid rgba(120, 135, 155, 0.22);
  background: #fff;
  font-size: 15px;
}
.site-footer .inner { padding-top: 22px; padding-bottom: 40px; }
.site-footer a { color: #33404f; }
.site-footer .disclaimer { color: #6b7787; font-size: 14px; margin-top: 12px; }

@media (prefers-color-scheme: dark) {
  body { background: #0d1420; color: #e6edf6; }
  .site-header, .site-footer { background: #111a28; border-color: rgba(120, 135, 155, 0.2); }
  .site-header .brand { color: #f2f6fb; }
  .site-header nav a { color: #c3cedb; }
  h1, h2, h3 { color: #f2f6fb; }
  p, li { color: #c3cedb; }
  .lede { color: #aab7c6; }
  .updated, .card-list p, .site-footer .disclaimer { color: #8b98a8; }
  code, .raw { background: rgba(160, 175, 195, 0.16); }
  .note { background: rgba(59, 130, 246, 0.14); }
  .note.warn { background: rgba(234, 88, 12, 0.16); }
  .site-footer a { color: #c3cedb; }
}

/* ---- Calculators ------------------------------------------------------- */
.calc-form {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 14px; margin: 26px 0 22px;
}
.calc-field { display: flex; flex-direction: column; gap: 5px; }
.calc-label { font-size: 14px; color: #5a6675; }
.calc-field input, .calc-field select {
  font: inherit; font-size: 17px; padding: 9px 11px; border-radius: 8px;
  border: 1px solid rgba(120,135,155,0.4); background: #fff; color: inherit; width: 100%;
}
.calc-field input:focus, .calc-field select:focus { outline: 2px solid #2563eb; outline-offset: 1px; }

.calc-results { margin: 0 0 8px; }
.calc-row { display: flex; align-items: baseline; gap: 12px; padding: 9px 0;
  border-bottom: 1px solid rgba(120,135,155,0.22); }
.calc-row dt { color: #5a6675; font-size: 15px; margin: 0; }
.calc-row dd { margin: 0 0 0 auto; font-weight: 600; font-size: 17px; text-align: right; }
.calc-row.primary { border-bottom: 2px solid #2563eb; padding: 13px 0; }
.calc-row.primary dt { color: inherit; font-weight: 600; font-size: 17px; }
.calc-row.primary dd { font-size: 24px; color: #2563eb; }

@media (prefers-color-scheme: dark) {
  .calc-label, .calc-row dt { color: #9aa8b8; }
  .calc-field input, .calc-field select { background: #16202f; border-color: rgba(140,158,180,0.35); }
  .calc-row.primary dd { color: #93b4fd; }
}

/* ---- Live data panels + tappable reports -------------------------------- */
.rank { list-style: none; padding: 0; margin: 14px 0 0; }
.rank > li { border-top: 1px solid rgba(120,135,155,0.24); padding: 14px 0; }
.rank .top { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.rank .id { font-weight: 700; font-size: 17px; }
.rank .val { margin-left: auto; font-weight: 700; font-size: 17px; white-space: nowrap; }
.rank .where { color: #6b7787; font-size: 15px; }
.report { font: 14px/2.1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  background: rgba(120,135,155,0.14); border-radius: 6px; padding: 10px 12px; margin: 9px 0 0; }
.tk { border: 0; font: inherit; background: transparent; color: inherit; padding: 1px 3px;
  border-radius: 4px; cursor: pointer; }
.tk[data-known="1"] { border-bottom: 2px dotted rgba(37,99,235,.75); }
.tk[data-known="1"]:hover, .tk[aria-expanded="true"] { background: #2563eb; color: #fff; }
.tk[data-known="0"] { cursor: default; opacity: .75; }
.decode { margin: 8px 0 0; padding: 10px 12px; border-left: 3px solid #2563eb;
  background: rgba(37,99,235,0.08); border-radius: 0 6px 6px 0; font-size: 15px; line-height: 1.55; }
.decode .grp { font-weight: 700; font-family: ui-monospace, Menlo, monospace; }
.muted { color: #6b7787; font-size: 14px; }
@media (prefers-color-scheme: dark) {
  .rank .where, .muted { color: #8b98a8; }
  .report { background: rgba(160,175,195,0.16); }
  .decode { background: rgba(59,130,246,0.16); }
}

/* ---- EFB callout -------------------------------------------------------- */
.efb-callout { border: 1px solid rgba(37,99,235,0.35); background: rgba(37,99,235,0.06);
  border-radius: 10px; padding: 18px 20px; margin: 34px 0 8px; }
.efb-callout h2 { margin: 0 0 6px; font-size: 19px; }
.efb-callout p { margin: 0 0 12px; }
.efb-callout-btn { display: inline-block; background: #2563eb; color: #fff !important;
  text-decoration: none; font-weight: 600; padding: 9px 18px; border-radius: 8px; }
.efb-callout-btn:hover { background: #1d4ed8; }
@media (prefers-color-scheme: dark) {
  .efb-callout { background: rgba(59,130,246,0.12); border-color: rgba(96,142,246,0.4); }
}

/* ---- Dashboard stat tiles (shared, was inline on the extremes page) ----- */
.stat-row { display: flex; flex-wrap: wrap; gap: 10px; margin: 22px 0 8px; }
.stat { flex: 1 1 96px; text-align: center; padding: 10px 8px; border-radius: 8px; background: rgba(120,135,155,0.12); }
.stat .n { display: block; font-size: 22px; font-weight: 700; line-height: 1.2; }
.stat .l { font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: #6b7787; }
@media (prefers-color-scheme: dark) {
  .stat { background: rgba(160,175,195,0.14); }
  .stat .l { color: #8b98a8; }
}