/* Lightning Bolts · Components v1
   Requires tokens.css. All element resets stay inside .lb-site.
   Use native headings, links, buttons and form controls with these classes. */

:where(.lb-site),
:where(.lb-site) *,
:where(.lb-site) *::before,
:where(.lb-site) *::after {
  box-sizing: border-box;
}

body.lb-site { margin: 0; }

:where(.lb-site) {
  background: var(--lb-color-background);
  color: var(--lb-color-text);
  font-family: var(--lb-font-body);
  font-size: var(--lb-text-base);
  font-weight: 400;
  line-height: var(--lb-leading-body);
  -webkit-text-size-adjust: 100%;
  text-rendering: optimizeLegibility;
  overflow-wrap: break-word;
}

:where(.lb-site) :where(h1, h2, h3, h4, h5, h6, p, ul, ol, dl, figure) {
  margin-block: 0;
}

:where(.lb-site) :where(figure, dd) { margin-inline: 0; }
:where(.lb-site) :where(img, svg, video) { max-width: 100%; }
:where(.lb-site) :where(img, video) { display: block; height: auto; }
:where(.lb-site) :where(button, input, select, textarea) { font: inherit; }
:where(.lb-site) :where(button, select) { cursor: pointer; }
:where(.lb-site) :where(button) { color: inherit; }
:where(.lb-site) :where(a) {
  color: var(--lb-theme-accent);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}
:where(.lb-site) :where(a:hover) { text-decoration-thickness: 2px; }
:where(.lb-site) :where([hidden]) { display: none !important; }
:where(.lb-site) :where([id]) { scroll-margin-top: 6rem; }
:where(.lb-site) :where(:focus-visible) {
  outline: 3px solid var(--lb-focus-outer);
  outline-offset: 3px;
  box-shadow: 0 0 0 3px var(--lb-focus-inner);
}
:where(.lb-site) ::selection {
  color: var(--lb-color-ink);
  background: var(--lb-color-yellow);
}

/* One major heading per section; use plain sans for cards and instructions. */
:where(.lb-site) :where(h1, h2),
.lb-heading {
  font-family: var(--lb-font-heading);
  font-weight: var(--lb-heading-weight);
  line-height: var(--lb-leading-heading);
  letter-spacing: var(--lb-heading-tracking);
  text-wrap: balance;
}
:where(.lb-site) h1,
.lb-heading--hero { font-size: var(--lb-type-h1); }
:where(.lb-site) h2,
.lb-heading--section { font-size: var(--lb-type-h2); }
:where(.lb-site) :where(h3, h4, h5, h6),
:where(.lb-site) :where(h3, h4, h5, h6).lb-heading {
  font-family: var(--lb-font-body);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.015em;
  text-wrap: balance;
}
:where(.lb-site) h3 { font-size: var(--lb-type-h3); }
:where(.lb-site) :where(h4, h5, h6) { font-size: var(--lb-text-base); }
.lb-lead {
  max-width: var(--lb-measure);
  font-size: clamp(1.125rem, 1.8vw, 1.25rem);
  line-height: 1.65;
}
.lb-meta {
  color: var(--lb-color-muted);
  font-size: var(--lb-text-sm);
  line-height: 1.5;
}

/* Layout primitives. */
.lb-wrap {
  width: min(var(--lb-wrap), calc(100% - var(--lb-gutter) * 2));
  margin-inline: auto;
}
.lb-section { padding-block: var(--lb-section-space); }
.lb-stack > * + * { margin-block-start: var(--lb-stack-gap); }
.lb-grid-2,
.lb-grid-3 {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--lb-grid-gap);
}
.lb-grid-2 > *,
.lb-grid-3 > * { min-width: 0; }
.lb-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--lb-space-3);
}

/* Reuse the supplied bolt artwork. Keep the wordmark legible and compact. */
.lb-brand {
  display: inline-flex;
  align-items: center;
  gap: var(--lb-space-3);
  max-width: 100%;
  min-height: var(--lb-control-height);
  color: var(--lb-color-navy);
  font-family: var(--lb-font-display);
  font-size: 1.75rem;
  font-weight: 400;
  line-height: 1.1;
  text-decoration: none;
}
.lb-brand img,
.lb-brand > svg { width: 2.75rem; height: 2.75rem; flex: 0 0 auto; object-fit: contain; }
.lb-brand > span { min-width: 0; }
.lb-brand strong { display: block; font-weight: 400; }
.lb-brand small {
  display: block;
  margin-top: var(--lb-space-1);
  font-family: var(--lb-font-body);
  font-size: var(--lb-text-xs);
  font-weight: 600;
  line-height: 1.4;
}

/* Yellow is the single primary action. Secondary actions are navy. */
.lb-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--lb-space-3);
  min-height: var(--lb-control-height);
  max-width: 100%;
  padding: 0.65rem 1.25rem;
  border: 1px solid transparent;
  border-radius: var(--lb-radius-sm);
  background: var(--lb-color-yellow);
  color: var(--lb-color-ink);
  font-family: var(--lb-font-body);
  font-size: var(--lb-text-sm);
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--lb-duration-fast) var(--lb-ease),
    border-color var(--lb-duration-fast) var(--lb-ease),
    transform var(--lb-duration-fast) var(--lb-ease);
}
.lb-button:hover:not(:disabled):not([aria-disabled="true"]) { background: #efc627; text-decoration: none; }
.lb-button:active:not(:disabled):not([aria-disabled="true"]) { transform: translateY(1px); }
.lb-button--secondary {
  background: var(--lb-color-navy);
  color: var(--lb-color-paper);
}
.lb-button--secondary:hover:not(:disabled):not([aria-disabled="true"]) { background: #23475e; }
.lb-button--ghost {
  border-color: currentColor;
  background: transparent;
  color: inherit;
}
.lb-button--ghost:hover:not(:disabled):not([aria-disabled="true"]) {
  background: rgb(82 103 115 / 9%);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}
.lb-button:disabled,
.lb-button[aria-disabled="true"] {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
}

.lb-card {
  min-width: 0;
  padding: var(--lb-space-6);
  border: var(--lb-border);
  border-radius: var(--lb-radius-card);
  background: var(--lb-color-paper);
  color: var(--lb-color-ink);
}
.lb-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--lb-space-6);
}
.lb-facts > div { min-width: 0; padding-top: var(--lb-space-3); border-top: var(--lb-border); }
.lb-facts dt { margin-bottom: var(--lb-space-1); color: var(--lb-color-muted); font-size: var(--lb-text-sm); }
.lb-facts dd { margin: 0; font-size: var(--lb-text-base); font-weight: 600; line-height: 1.5; }
.lb-facts dd small { display: block; margin-top: var(--lb-space-1); font-size: var(--lb-text-sm); font-weight: 400; }

/* The companion script supplies roving focus and keyboard interaction. */
.lb-tabs {
  display: flex;
  gap: var(--lb-space-1);
  padding: var(--lb-space-2);
  overflow-x: auto;
  border: var(--lb-border);
  border-radius: var(--lb-radius-card);
  background: var(--lb-color-paper);
}
.lb-tabs [role="tab"] {
  flex: 1 0 auto;
  min-width: 5rem;
  min-height: var(--lb-control-height);
  padding: var(--lb-space-3) var(--lb-space-4);
  border: 0;
  border-bottom: 3px solid transparent;
  border-radius: var(--lb-radius-sm);
  background: transparent;
  color: var(--lb-color-ink);
  font-family: var(--lb-font-body);
  font-size: var(--lb-text-sm);
  font-weight: 600;
  line-height: 1.4;
  transition: background-color var(--lb-duration-fast) var(--lb-ease);
}
.lb-tabs [role="tab"]:hover:not(:disabled):not([aria-selected="true"]) { background: var(--lb-theme-soft); }
.lb-tabs [role="tab"][aria-selected="true"] {
  border-bottom-color: var(--lb-color-yellow);
  background: var(--lb-color-navy);
  color: var(--lb-color-paper);
}
.lb-tabs [role="tab"]:focus-visible { outline-offset: -5px; box-shadow: inset 0 0 0 2px var(--lb-focus-inner); }
.lb-tabs [role="tab"]:disabled { opacity: 0.55; cursor: not-allowed; }

.lb-note {
  padding: var(--lb-space-4) var(--lb-space-5);
  border-inline-start: 3px solid var(--lb-theme-accent);
  border-radius: 0 var(--lb-radius-sm) var(--lb-radius-sm) 0;
  background: var(--lb-theme-soft);
  color: var(--lb-color-ink);
  font-size: var(--lb-text-sm);
  line-height: 1.6;
}
.lb-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--lb-space-2);
  padding: 0.25rem 0.65rem;
  border-radius: var(--lb-radius-pill);
  background: var(--lb-theme-soft);
  color: var(--lb-theme-accent);
  font-size: var(--lb-text-xs);
  font-weight: 700;
  line-height: 1.5;
}

/* Keep controls at 16px to prevent mobile browser zoom. */
.lb-field { display: block; min-width: 0; font-weight: 600; }
.lb-field > label,
.lb-field > legend { display: block; margin-bottom: var(--lb-space-2); font-size: var(--lb-text-base); }
.lb-field :where(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), select, textarea) {
  display: block;
  width: 100%;
  min-width: 0;
  min-height: var(--lb-control-height);
  margin-top: var(--lb-space-2);
  padding: 0.7rem 0.8rem;
  border: 1px solid var(--lb-color-muted);
  border-radius: var(--lb-radius-sm);
  background: var(--lb-color-paper);
  color: var(--lb-color-ink);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
}
.lb-field textarea { min-height: 8rem; resize: vertical; }
.lb-field :where(input, textarea)::placeholder { color: var(--lb-color-muted); opacity: 1; }
.lb-field :where(input, select, textarea):disabled { background: var(--lb-color-cream); color: var(--lb-color-muted); cursor: not-allowed; }
.lb-field :where(input, select, textarea)[aria-invalid="true"] { border-width: 2px; border-color: var(--lb-color-ink); }
.lb-field .lb-meta { display: block; margin-top: var(--lb-space-2); font-weight: 400; }
.lb-check {
  display: flex;
  align-items: flex-start;
  gap: var(--lb-space-3);
  min-height: var(--lb-control-height);
  padding-block: var(--lb-space-3);
  font-size: var(--lb-text-base);
  line-height: 1.5;
  cursor: pointer;
}
.lb-check input[type="checkbox"],
.lb-check input[type="radio"] {
  flex: 0 0 auto;
  width: 1.375rem;
  height: 1.375rem;
  margin: 0.1rem 0 0;
  accent-color: var(--lb-color-navy);
  cursor: pointer;
}
.lb-check input:disabled { cursor: not-allowed; }
.lb-check:has(input:disabled) { color: var(--lb-color-muted); cursor: not-allowed; }
.lb-check:has(input:checked) { color: var(--lb-color-muted); }

@media (min-width: 40rem) {
  .lb-grid-2,
  .lb-grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 60rem) {
  .lb-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lb-facts { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 26.24rem) {
  .lb-facts { grid-template-columns: minmax(0, 1fr); gap: var(--lb-space-5); }
  .lb-card { padding: var(--lb-space-5); }
  .lb-brand { font-size: 1.5rem; }
}

@media (prefers-reduced-motion: reduce) {
  :where(.lb-site) *,
  :where(.lb-site) *::before,
  :where(.lb-site) *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0ms !important;
    scroll-behavior: auto !important;
  }
  .lb-button:active:not(:disabled):not([aria-disabled="true"]) { transform: none; }
}

@media print {
  :where(.lb-site) { background: white; color: black; font-size: 11pt; }
  .lb-wrap { width: 100%; }
  .lb-section { padding-block: 1.5rem; }
  :where(.lb-site) h1, .lb-heading--hero { font-size: 36pt; }
  :where(.lb-site) h2, .lb-heading--section { font-size: 24pt; }
  :where(.lb-site) :where(h1, h2, h3) { break-after: avoid; }
  .lb-card,
  .lb-note,
  .lb-facts > div { break-inside: avoid; box-shadow: none; }
  .lb-tabs { display: none; }
  :where(.lb-site) [role="tabpanel"][hidden] { display: block !important; }
  :where(.lb-site) [role="tabpanel"] { margin-block: 1rem; }
  .lb-button { border: 1px solid currentColor; background: white; color: black; }
  :where(.lb-site) :where(a) { color: black; }
}