/* Atoms and molecules: button, input, status pill, expandable, inline definition,
   "what this means" line, banner / error patterns. All values come from system.css tokens. */


/* ============================================================
   1 · Button — AD-24 (Editorial flat / Option 01-A)
   Verbatim visual rules from AtomComparison_Button_Input_Chip.html (.btn + .btn-1).
   States wired to real CSS pseudo-classes (:hover / :active / :focus-visible / :disabled)
   rather than the comparison's demo .is-active / .is-disabled classes.
   ============================================================ */

.btn {
  font-family: 'Outfit', system-ui, sans-serif;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  padding: 9px 18px;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  transition: background 120ms, border-color 120ms, color 120ms, box-shadow 120ms;
}

/* Keyboard focus ring — 0.25 alpha because the button has no rest-state border to
   carry the focus signal; the ring carries it on its own. */
.btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(182, 73, 44, 0.25);
}

/* Primary */
.btn-primary { background: var(--accent); color: var(--ink-on-dark); }
.btn-primary:hover { background: var(--accent-hover); }
.btn-primary:active { background: var(--accent-active); }
.btn-primary:disabled { background: var(--accent-disabled); cursor: not-allowed; }

/* Secondary */
.btn-secondary { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn-secondary:hover { background: var(--ink); color: var(--ink-on-dark); }
.btn-secondary:active { background: var(--ink); color: var(--ink-on-dark); }
.btn-secondary:disabled { background: transparent; color: var(--ink-disabled); border-color: var(--ink-disabled); cursor: not-allowed; }

/* Ghost */
.btn-ghost { background: transparent; color: var(--ink); }
.btn-ghost:hover { background: var(--rule-soft); }
.btn-ghost:active { background: var(--rule-soft); }
.btn-ghost:disabled { background: transparent; color: var(--ink-disabled); cursor: not-allowed; }


/* ============================================================
   2 · Input — AD-25 (Bordered box / Option 02-A)
   Verbatim visual rules from AtomComparison_Button_Input_Chip.html (.input + .input-1).
   ============================================================ */

/* Input focus ring uses lower alpha (0.15) than button (0.25) because the border-colour
   change carries the focus signal — the ring is supplementary. Buttons have no border
   so the ring carries the full signal. */
.input {
  font-family: 'Outfit', system-ui, sans-serif;
  font-size: 15px;
  color: var(--ink);
  width: 100%;
  max-width: 480px;
  background: var(--input-bg);
  border: 1px solid var(--input-border);
  border-radius: var(--radius-md);
  padding: 10px 14px;
  transition: border-color 120ms, box-shadow 120ms, background 120ms;
}
.input::placeholder { color: var(--ink-placeholder); }
.input:hover { border-color: var(--input-border-hover); }
.input:focus { border-color: var(--input-border-focus); outline: none; box-shadow: 0 0 0 3px rgba(182, 73, 44, 0.15); }
.input.is-error { border-color: var(--input-border-error); }
.input.is-error:focus { box-shadow: 0 0 0 3px rgba(122, 45, 45, 0.15); }
.input:disabled { background: var(--rule-soft); color: var(--ink-disabled); cursor: not-allowed; }

.input-error-msg {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  color: var(--status-nogo);
  font-size: 14px;
  line-height: 1.5;
  margin-top: var(--space-2);
}

/* Input icon group — wraps an .input + an absolutely-positioned Phosphor icon.
   Use .input-group--leading-icon for a left-side icon (search panel magnifying glass),
   .input-group--trailing-icon for a right-side icon. */
.input-group {
  position: relative;
  display: inline-block;
  width: 100%;
  max-width: 480px;
}
.input-group .input { width: 100%; max-width: none; }
.input-group-icon {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 18px;
  color: var(--ink-3);
  pointer-events: none;
  line-height: 1;
}
.input-group--leading-icon .input { padding-left: 40px; }
.input-group--leading-icon .input-group-icon--leading { left: var(--space-3); }
.input-group--trailing-icon .input { padding-right: 40px; }
.input-group--trailing-icon .input-group-icon--trailing { right: var(--space-3); }


/* ============================================================
   3 · Status pill — Phase 2 §1
   Three variants: tinted outline (proceed/wary/nogo), unknown (dashed), tag (dark).
   Tints derived via color-mix() — see AD-27.
   ============================================================ */

.pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 4px 10px;
  font-family: 'Outfit', system-ui, sans-serif;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.4;
  white-space: nowrap;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  background: transparent;
}

.pill-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}

/* Tinted outline — text + border in status colour, low-alpha bg via color-mix. */
.pill-proceed {
  color: var(--status-proceed);
  border-color: var(--status-proceed);
  background: color-mix(in srgb, var(--status-proceed) 12%, transparent);
}
.pill-wary {
  color: var(--status-wary);
  border-color: var(--status-wary);
  background: color-mix(in srgb, var(--status-wary) 12%, transparent);
}
.pill-nogo {
  color: var(--status-nogo);
  border-color: var(--status-nogo);
  background: color-mix(in srgb, var(--status-nogo) 12%, transparent);
}

/* Unknown — dashed neutral border, ink-3 dot prefix, NO italic. */
.pill-unknown {
  color: var(--ink-2);
  border: 1px dashed var(--rule);
  background: transparent;
}
.pill-unknown .pill-dot { background: var(--ink-3); }

/* Hard categorical tag — dark charcoal fill, cream text. For "Class D / G airspace". */
.pill-tag {
  background: var(--surface-dark);
  color: var(--ink-on-dark);
  border-color: var(--surface-dark);
}


/* ============================================================
   4 · Expandable — Phase 2 §1
   Native <details>/<summary>. Caret rotates 90° on [open]. Reveal: grid-template-rows
   0fr → 1fr trick + opacity transition.

   Why grid-template-rows, not opacity-on-body alone:
   The browser UA stylesheet applies `display: none` to non-summary children when
   <details> isn't [open]. CSS transitions can't fire across display:none → block,
   so opacity alone never animates. Setting `display: grid` on .expandable-body
   overrides the UA rule (selector specificity 0,2,0 > UA 0,1,2), keeping the
   element always in flow. Then grid-template-rows transitions from 0fr (clipped)
   to 1fr (natural content height) over 200ms, with opacity in parallel.
   ============================================================ */

.expandable {
  border-bottom: 1px solid var(--rule-soft);
}
.expandable > summary {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  cursor: pointer;
  list-style: none;
  font-family: 'Outfit', system-ui, sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
}
.expandable > summary::-webkit-details-marker { display: none; }
.expandable > summary::marker { content: ''; }
.expandable > summary:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(182, 73, 44, 0.25);
  border-radius: var(--radius-sm);
}

.expandable-caret {
  transition: transform 120ms ease;
  font-size: 14px;
  color: var(--ink-2);
  flex-shrink: 0;
}
.expandable[open] > summary .expandable-caret {
  transform: rotate(90deg);
}

.expandable-meta {
  margin-left: auto;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--ink-2);
}

.expandable > .expandable-body {
  display: grid;
  grid-template-rows: 0fr;
  overflow: hidden;
  opacity: 0;
  transition: grid-template-rows 200ms ease-out, opacity 200ms ease-out;
}
.expandable[open] > .expandable-body {
  grid-template-rows: 1fr;
  opacity: 1;
}
.expandable-body-inner {
  min-height: 0; /* let grid clip cleanly to 0 when collapsed */
  padding: 0 0 var(--space-4) calc(14px + var(--space-3));
}


/* ============================================================
   5 · Inline [?] expandable definition — Phase 2 §1 Variant A
   Small Phosphor [?] glyph next to a term. Click reveals definition inline below.
   Uses the same grid-template-rows reveal as .expandable (see §4 for rationale).
   ============================================================ */

details.def {
  display: inline;
}
details.def > summary {
  display: inline;
  list-style: none;
  cursor: pointer;
  margin-left: var(--space-1);
  vertical-align: baseline;
}
details.def > summary::-webkit-details-marker { display: none; }
details.def > summary::marker { content: ''; }

.def-glyph {
  font-size: 14px;
  color: var(--ink-3);
  vertical-align: -2px;
  transition: color 120ms;
}
details.def > summary:hover .def-glyph,
details.def[open] > summary .def-glyph { color: var(--ink); }
details.def > summary:focus-visible {
  outline: none;
}
details.def > summary:focus-visible .def-glyph {
  color: var(--ink);
  box-shadow: 0 0 0 3px rgba(182, 73, 44, 0.25);
  border-radius: var(--radius-sm);
}

details.def > .def-body {
  display: grid;
  grid-template-rows: 0fr;
  overflow: hidden;
  opacity: 0;
  margin-top: var(--space-2);
  margin-bottom: var(--space-3);
  transition: grid-template-rows 200ms ease-out, opacity 200ms ease-out;
}
details.def[open] > .def-body {
  grid-template-rows: 1fr;
  opacity: 1;
}
.def-body-inner {
  min-height: 0;
  padding-left: var(--space-3);
  border-left: 2px solid var(--rule-soft);
  font-family: 'Outfit', system-ui, sans-serif;
  font-size: 13px;
  color: var(--ink-2);
  line-height: 1.55;
}


/* ============================================================
   6 · "What this means" line — Phase 2 §1 Variant A
   Italic Cormorant + 2 px accent rule on the left. No caps label — italic does the
   register-shift work.
   ============================================================ */

.what-this-means {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-size: 17px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--ink);
  border-left: 2px solid var(--accent);
  padding-left: var(--space-4);
  margin: var(--space-4) 0;
}


/* ============================================================
   7 · Banner / error patterns — Phase 2 §3
   Three distinct patterns that coexist:
     a · .banner-page         — page-level warning banner (partial-issue on a section)
     b · .row-degraded        — inline degraded row inside an otherwise-loaded section
     c · .card-section-error  — whole-section error card (section failed entirely)
   ============================================================ */

/* a · Page-level warning banner */
.banner-page {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--info-bg);
  border: 1px solid var(--info-border);
  border-radius: var(--radius-md);
  color: var(--info-text);
  font-family: 'Outfit', system-ui, sans-serif;
  font-size: 13px;
  line-height: 1.5;
  margin-bottom: var(--space-4);
}
.banner-page-icon {
  font-size: 18px;
  color: var(--ink-2);
  flex-shrink: 0;
}
.banner-page-body { flex: 1; }
.banner-page-action { margin-left: auto; flex-shrink: 0; }

/* b · Inline degraded row */
.row-degraded {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  border-top: 1px dashed var(--rule);
  border-bottom: 1px dashed var(--rule);
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-size: 15px;
  color: var(--ink-2);
  line-height: 1.5;
}
.row-degraded-message { flex: 1; }
.row-degraded-action {
  font-family: 'Outfit', system-ui, sans-serif;
  font-style: normal;
  font-size: 13px;
  font-weight: 500;
  color: var(--accent);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  text-decoration: underline;
}
.row-degraded-action:hover { color: var(--accent-hover); }
.row-degraded-action:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(182, 73, 44, 0.25);
  border-radius: var(--radius-sm);
}

/* c · Whole-section error card */
.card-section-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-3);
  padding: var(--space-8) var(--space-6);
  background: var(--surface-info);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
}
.card-section-error-icon {
  font-size: 32px;
  color: var(--ink-3);
}
.card-section-error-message {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-size: 17px;
  color: var(--ink-2);
  max-width: 380px;
  line-height: 1.5;
  margin: 0;
}
.card-section-error-action { margin-top: var(--space-2); }