/* Aviation numbers — reference pages and their calculators.
   Roles only. Loaded after gocargo-tokens.css and aeroinis-design-system.css.

   Every page here is the same shape: dark band with the title, then a white body
   holding one calculator card and the explanation beneath it. The calculator comes
   first because the visitor arrived with a box or a route in mind, not a question. */

.gcg-lede { max-width: var(--gc-measure); margin: var(--gc-space-4) 0 0; color: var(--gc-text-on-dark-muted); }
.gcg-body { padding-block: var(--gc-space-12) var(--gc-space-16); }

/* ------------------------------------------------------------------ hub grid */

.gcg-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
  gap: var(--gc-space-5);
  margin-top: var(--gc-space-8);
}
/* Seven cards in one undifferentiated grid is a list to be got through. Three
   named groups of two or three is a shape the eye can hold, and it tells the
   visitor which group their question is in before they read a single card. */
.gcg-grouph {
  margin: var(--gc-space-12) 0 0;
  padding-bottom: var(--gc-space-3);
  border-bottom: 1px solid var(--gc-line);
  font-family: var(--gc-font-label);
  font-weight: var(--gc-weight-label);
  font-size: var(--gc-t-label);
  letter-spacing: var(--gc-tracking-label);
  text-transform: uppercase;
  color: var(--gc-text-muted);
}
.gcg-grouph:first-of-type { margin-top: var(--gc-space-8); }
.gcg-grouph + .gcg-grid { margin-top: var(--gc-space-5); }

.gcg-card {
  display: flex;
  flex-direction: column;
  gap: var(--gc-space-2);
  padding: var(--gc-space-6);
  border: 1px solid var(--gc-line);
  border-radius: var(--gc-radius);
  background: var(--gc-bg-surface);
  color: var(--gc-text);
  text-decoration: none;
  transition: border-color var(--gc-dur) var(--gc-ease), box-shadow var(--gc-dur) var(--gc-ease);
}
a.gcg-card:hover { border-color: var(--gc-line-strong); box-shadow: var(--gc-shadow-sm); }
.gcg-card h2, .gcg-card h3 { margin: 0; color: var(--gc-text-strong); }
.gcg-card p { margin: 0; color: var(--gc-text-muted); font-family: var(--gc-font-ui); font-size: var(--gc-t-body-sm); }
.gcg-tag {
  align-self: flex-start;
  margin-top: var(--gc-space-2);
  padding: var(--gc-space-1) var(--gc-space-3);
  border-radius: var(--gc-radius-pill);
  background: var(--gc-bg-sunken);
  color: var(--gc-text-muted);
  font-family: var(--gc-font-label);
  font-size: var(--gc-t-label);
  letter-spacing: var(--gc-tracking-label);
  text-transform: uppercase;
}
.gcg-tag--live { background: var(--gc-bg-accent-soft); color: var(--gc-text); }

/* ---------------------------------------------------------------- calculator */

.gcg-tool {
  padding: var(--gc-space-8);
  border: 1px solid var(--gc-line);
  border-radius: var(--gc-radius-lg);
  background: var(--gc-bg-data);
}
.gcg-tool h2 { margin: 0 0 var(--gc-space-6); color: var(--gc-text-strong); }

.gcg-fields { display: flex; flex-wrap: wrap; gap: var(--gc-space-4); align-items: end; }
.gcg-f { display: flex; flex-direction: column; gap: var(--gc-space-2); flex: 1 1 120px; min-width: 0; }
.gcg-f--wide { flex: 1 1 240px; }
.gcg-f--xs { flex: 0 1 96px; }
.gcg-f > span {
  font-family: var(--gc-font-label);
  font-weight: var(--gc-weight-label);
  font-size: var(--gc-t-label);
  letter-spacing: var(--gc-tracking-label);
  text-transform: uppercase;
  color: var(--gc-text-muted);
}
.gcg-f input, .gcg-f select {
  width: 100%;
  height: var(--gc-field-height);
  padding-inline: var(--gc-space-4);
  border: 1px solid var(--gc-line);
  border-radius: var(--gc-radius-sm);
  background: var(--gc-bg-surface);
  color: var(--gc-text);
  font-family: var(--gc-font-ui);
  font-size: 1rem;
}
.gcg-f input:focus, .gcg-f select:focus { border-color: var(--gc-line-focus); }
.gcg-hint { margin: var(--gc-space-3) 0 0; color: var(--gc-text-muted); font-family: var(--gc-font-ui); font-size: var(--gc-t-caption); }

/* ------ the answer ------ */

.gcg-out { margin-top: var(--gc-space-6); }
.gcg-headline {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--gc-space-3);
  padding: var(--gc-space-5) var(--gc-space-6);
  border-radius: var(--gc-radius);
  background: var(--gc-bg-surface);
  border: 1px solid var(--gc-line-strong);
}
.gcg-headline b {
  font-family: var(--gc-font-ui);
  font-weight: var(--gc-weight-bold);
  font-size: var(--gc-t-h3);
  color: var(--gc-text-strong);
}
.gcg-headline span { font-family: var(--gc-font-ui); color: var(--gc-text-muted); font-size: var(--gc-t-body-sm); }

.gcg-rows { margin: var(--gc-space-4) 0 0; padding: 0; list-style: none; }
.gcg-rows li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--gc-space-4);
  padding: var(--gc-space-3) 0;
  border-bottom: 1px solid var(--gc-line);
  font-family: var(--gc-font-ui);
  font-size: var(--gc-t-body-sm);
  color: var(--gc-text);
}
.gcg-rows li b { font-weight: var(--gc-weight-bold); color: var(--gc-text-strong); }
.gcg-rows li em { font-style: normal; color: var(--gc-text-muted); }

.gcg-flag {
  display: flex;
  align-items: flex-start;
  gap: var(--gc-space-3);
  margin-top: var(--gc-space-4);
  padding: var(--gc-space-4) var(--gc-space-5);
  border: 1px solid var(--gc-line);
  border-radius: var(--gc-radius);
  background: var(--gc-bg-signal-soft);
  font-family: var(--gc-font-ui);
  font-size: var(--gc-t-body-sm);
  color: var(--gc-text);
}
/* Status is never colour alone — the flag carries its icon. */
.gcg-flag svg {
  flex: 0 0 auto;
  width: var(--gc-space-5);
  height: var(--gc-space-5);
  margin-top: 2px;
  fill: none;
  stroke: var(--gc-warn);
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* -------------------------------------------------------------- spelled-out
   The answer is the same reference on two channels: the word you say, and the
   Morse underneath it. Both are shown per character and again as one line, so the
   result can be read aloud or tapped out without re-deriving it. */

.gcg-morseline {
  margin: var(--gc-space-4) 0 0;
  padding: var(--gc-space-4) var(--gc-space-5);
  border-radius: var(--gc-radius-sm);
  background: var(--gc-bg-inverse);
  color: var(--gc-text-on-inverse);
  /* Dots and dashes are thin marks. At body size on a dark ground they read as
     texture rather than as data, so this line runs larger, in gold, with the
     characters spaced far enough apart to be counted. */
  font-family: var(--gc-font-mono);
  font-size: 1.25rem;
  line-height: 1.8;
  letter-spacing: .18em;
  color: var(--gc-text-gold-on-dark);
  overflow-x: auto;
  white-space: nowrap;
}

.gcg-saidlist {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gc-space-2);
  margin: var(--gc-space-4) 0 0;
  padding: 0;
  list-style: none;
}
.gcg-said {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 72px;
  padding: var(--gc-space-3);
  border: 1px solid var(--gc-line);
  border-radius: var(--gc-radius-sm);
  background: var(--gc-bg-surface);
  text-align: center;
}
.gcg-said b {
  font-family: var(--gc-font-display);
  font-weight: var(--gc-weight-display);
  font-size: var(--gc-t-h4);
  line-height: 1;
  color: var(--gc-text-gold);
}
.gcg-said span { font-family: var(--gc-font-ui); font-size: var(--gc-t-body-sm); font-weight: var(--gc-weight-bold); color: var(--gc-text-strong); }
.gcg-said em { font-style: normal; font-family: var(--gc-font-mono); font-size: .9375rem; line-height: 1.6; letter-spacing: .12em; color: var(--gc-text-gold); }
.gcg-said--x b { color: var(--gc-bad); }
.gcg-said--x span { color: var(--gc-text-muted); font-weight: var(--gc-weight-body); }

/* ------------------------------------------------------- reference card grid
   A 26-row table is unreadable on a phone and impossible to scan on a desktop.
   The reference data stays live HTML — never a picture of a table — but it is laid
   out as cards, which is the shape that survives both widths. */

.gcg-alpha {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(150px, 100%), 1fr));
  gap: var(--gc-space-3);
  margin: var(--gc-space-6) 0 0;
  padding: 0;
  list-style: none;
}
.gcg-alpha li {
  display: grid;
  grid-template-columns: 2.25rem 1fr;
  grid-template-rows: auto auto auto;
  align-items: baseline;
  column-gap: var(--gc-space-3);
  padding: var(--gc-space-4);
  border: 1px solid var(--gc-line);
  border-radius: var(--gc-radius-sm);
  background: var(--gc-bg-surface);
}
.gcg-alpha b {
  grid-row: 1 / span 3;
  align-self: center;
  font-family: var(--gc-font-display);
  font-weight: var(--gc-weight-display);
  font-size: var(--gc-t-h2);
  line-height: 1;
  color: var(--gc-text-gold);
}
.gcg-alpha span {
  font-family: var(--gc-font-ui);
  font-weight: var(--gc-weight-bold);
  font-size: 1rem;
  line-height: 1.4;
  color: var(--gc-text-strong);
}
.gcg-alpha em {
  font-style: normal;
  font-family: var(--gc-font-ui);
  font-size: var(--gc-t-caption);
  line-height: 1.5;
  color: var(--gc-text-muted);
}
/* Morse gets its own line and its own colour — it is a second reference, not a
   footnote to the pronunciation. */
.gcg-alpha i {
  font-style: normal;
  font-family: var(--gc-font-mono);
  font-size: 1rem;
  line-height: 1.6;
  letter-spacing: .16em;
  color: var(--gc-text-gold);
}
.gcg-alpha--digits b, .gcg-alpha--digits i { color: var(--gc-text-link); }

/* The registry cards carry a prefix and a country and nothing else, so they drop
   to two rows and pack tighter than the alphabet grid. */
.gcg-alpha--reg { grid-template-columns: repeat(auto-fill, minmax(min(190px, 100%), 1fr)); }
.gcg-alpha--reg li { grid-template-rows: auto; align-items: center; }
.gcg-alpha--reg b { grid-row: 1; font-size: var(--gc-t-h4); }
.gcg-alpha--reg span { font-weight: var(--gc-weight-body); font-size: var(--gc-t-body-sm); }

/* A one-line introduction to a block of reference data. It is not an article, so
   it does not carry the article's spacing. */
.gcg-refhead { max-width: var(--gc-measure); margin-top: var(--gc-space-10); }
.gcg-refhead h2 { margin: 0 0 var(--gc-space-2); color: var(--gc-text-strong); }
.gcg-refhead p {
  margin: 0;
  font-family: var(--gc-font-ui);
  font-size: var(--gc-t-body-sm);
  line-height: 1.55;
  color: var(--gc-text-muted);
}

/* ------------------------------------------------------------------- poster */

.gcg-poster { margin: var(--gc-space-10) 0 0; }
.gcg-poster:first-child { margin-top: 0; }
.gcg-poster img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--gc-line);
  border-radius: var(--gc-radius);
}
.gcg-poster figcaption {
  margin-top: var(--gc-space-3);
  font-family: var(--gc-font-ui);
  font-size: var(--gc-t-caption);
  color: var(--gc-text-muted);
}
.gcg-poster figcaption a { color: var(--gc-text-link); }

/* ---------------------------------------------------------------- key facts
   The first version of these pages answered the visitor's question in the fourth
   paragraph of the third section. Most of them never got there. The facts strip
   sits directly under the calculator and carries the two or three figures the page
   exists to deliver — the rest of the page is now available to whoever wants it,
   rather than compulsory for everyone. */

.gcg-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
  gap: var(--gc-space-4);
  margin: var(--gc-space-8) 0 0;
  padding: 0;
  list-style: none;
}
.gcg-fact {
  padding: var(--gc-space-5) var(--gc-space-6);
  border: 1px solid var(--gc-line);
  border-radius: var(--gc-radius);
  background: var(--gc-bg-raised);
}
.gcg-fact b {
  display: block;
  font-family: var(--gc-font-display);
  font-weight: var(--gc-weight-display);
  font-size: var(--gc-t-h3);
  line-height: 1.3;
  color: var(--gc-text-strong);
}
.gcg-fact span {
  display: block;
  margin-top: var(--gc-space-2);
  font-family: var(--gc-font-ui);
  font-size: var(--gc-t-body-sm);
  line-height: 1.55;
  color: var(--gc-text-muted);
}

/* ---------------------------------------------------------------- accordion
   Each explanation is a <details>, so the page opens at roughly one screen and
   the reader chooses what to expand. Native disclosure, not scripted: it works
   with the keyboard, it prints open, and the headings stay real headings inside
   the summary so the document outline is unchanged. The first section is open,
   because a page that opens entirely closed reads as empty. */

.gcg-acc { margin-top: var(--gc-space-10); border-top: 1px solid var(--gc-line); }
.gcg-sec { border-bottom: 1px solid var(--gc-line); }
.gcg-sec > summary {
  display: flex;
  align-items: baseline;
  gap: var(--gc-space-4);
  padding: var(--gc-space-5) 0;
  cursor: pointer;
  list-style: none;
}
.gcg-sec > summary::-webkit-details-marker { display: none; }
.gcg-sec > summary h2 { margin: 0; color: var(--gc-text-strong); }
.gcg-sec > summary::after {
  content: '+';
  margin-inline-start: auto;
  font-family: var(--gc-font-mono);
  font-size: var(--gc-t-h4);
  line-height: 1;
  color: var(--gc-text-muted);
}
.gcg-sec[open] > summary::after { content: '\2212'; }
.gcg-sec > summary:hover h2 { color: var(--gc-text-link); }
.gcg-sec > summary:focus-visible { outline: 2px solid var(--gc-line-focus); outline-offset: 3px; }
.gcg-secbody { max-width: var(--gc-measure); padding-bottom: var(--gc-space-6); }
/* Charts and posters are the exception: they are the width of the page, not the
   width of a line of text. */
.gcg-secbody--wide { max-width: none; }
.gcg-secbody > :last-child { margin-bottom: 0; }

/* ---------------------------------------------------------- limits and next
   The limits never collapse. They are the reason a desk can send one of these
   pages to a customer without an argument three weeks later, and a disclosure
   nobody opens is a disclosure nobody read. */

.gcg-note {
  max-width: var(--gc-measure);
  margin-top: var(--gc-space-10);
  padding: var(--gc-space-6);
  border: 1px solid var(--gc-line);
  border-inline-start: 3px solid var(--gc-action);
  border-radius: var(--gc-radius);
  background: var(--gc-bg-raised);
}
.gcg-note h2 { margin: 0 0 var(--gc-space-4); color: var(--gc-text-strong); }

.gcg-next {
  display: inline-flex;
  align-items: baseline;
  gap: var(--gc-space-2);
  margin-top: var(--gc-space-8);
  font-family: var(--gc-font-ui);
  font-weight: var(--gc-weight-bold);
  font-size: var(--gc-t-body);
  color: var(--gc-text-link);
  text-decoration: none;
}
.gcg-next:hover { color: var(--gc-text-link-hover); text-decoration: underline; }

/* --------------------------------------------------------------- body copy */

/* Body copy reads the same whether it sits in an open section, in the limits
   callout, or in a page that still runs as one article. */
:is(.gcg-secbody, .gcg-note) :is(p, li) { font-family: var(--gc-font-ui); font-size: var(--gc-t-body); line-height: 1.62; color: var(--gc-text); }
:is(.gcg-secbody, .gcg-note) p { margin: 0 0 var(--gc-space-4); }
:is(.gcg-secbody, .gcg-note) ul { margin: 0 0 var(--gc-space-4); padding-inline-start: var(--gc-space-5); }
:is(.gcg-secbody, .gcg-note) li { margin-bottom: var(--gc-space-2); }
:is(.gcg-secbody, .gcg-note) a { color: var(--gc-text-link); }
:is(.gcg-secbody, .gcg-note) a:hover { color: var(--gc-text-link-hover); }

.gcg-def {
  margin: var(--gc-space-6) 0;
  padding: var(--gc-space-5) var(--gc-space-6);
  border-inline-start: 3px solid var(--gc-action);
  background: var(--gc-bg-raised);
  font-family: var(--gc-font-ui);
  color: var(--gc-text);
}
.gcg-def b { color: var(--gc-text-strong); }

.gcg-table { width: 100%; margin: var(--gc-space-4) 0; border-collapse: collapse; font-family: var(--gc-font-ui); font-size: var(--gc-t-body-sm); }
.gcg-table th, .gcg-table td { padding: var(--gc-space-3) var(--gc-space-4); text-align: start; border-bottom: 1px solid var(--gc-line-data); color: var(--gc-text); }
.gcg-table th {
  font-family: var(--gc-font-label);
  font-weight: var(--gc-weight-label);
  font-size: var(--gc-t-label);
  letter-spacing: var(--gc-tracking-label);
  text-transform: uppercase;
  color: var(--gc-text-muted);
}
.gcg-table td:last-child, .gcg-table th:last-child { text-align: end; }

.gcg-src { max-width: var(--gc-measure); margin-top: var(--gc-space-10); color: var(--gc-text-muted); font-family: var(--gc-font-ui); font-size: var(--gc-t-caption); }
.gcg-src a { color: var(--gc-text-link); }

@media (max-width: 599px) {
  .gcg-tool { padding: var(--gc-space-5); }
  .gcg-f, .gcg-f--wide { flex: 1 1 100%; }
  .gcg-f--xs { flex: 1 1 calc(33.333% - var(--gc-space-4)); }
}

@media (prefers-reduced-motion: reduce) {
  .gcg-card { transition-duration: 0ms; }
}

/* touch-type:start — generated by tools/touch-type.mjs, do not edit by hand */
/* iOS zooms the page when a focused control's text is under 16px and does not
   zoom back. max(16px, 1em) raises only what is below the floor: a control
   designed larger keeps its size, and nothing has to be listed by name — which
   matters, because the worst offenders inherit their size rather than being
   given one. Checkboxes and radios are left alone; they have no text. */
@media (pointer: coarse) {
  input:not([type="checkbox"]):not([type="radio"]),
  select,
  textarea { font-size: max(16px, 1em) !important; }
}
/* touch-type:end */