/* Elbow First components.css (build/15 section 4): every PAGE-TEMPLATE
   component 5a to 5h plus header, footer, cards, buttons. Class prefix ef-.
   All copy strings render from content/site.json; this file is style only. */

/* ---------- header (3.3): sticky-but-quiet ---------- */
.ef-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--ef-surface);
  border-bottom: var(--ef-border-w) solid var(--ef-border);
}
/* When the lane nav wraps tall on narrow viewports, a sticky header would
   obscure focused elements (WCAG 2.4.11, build/15 3.3): let it scroll away. */
@media (max-width: 48rem) {
  .ef-header { position: static; }
}
.ef-header__inner {
  display: flex; align-items: center; gap: var(--ef-space-5);
  padding-block: var(--ef-space-3);
}
.ef-header__wordmark {
  font-family: var(--ef-font-display); font-weight: var(--ef-weight-bold);
  font-size: var(--ef-text-lg); color: var(--ef-ink); text-decoration: none;
}
.ef-header__nav { display: flex; flex-wrap: wrap; gap: var(--ef-space-4); margin-inline-start: auto; }
.ef-header__nav a { color: var(--ef-ink-soft); text-decoration: none; font-size: var(--ef-text-sm); }
.ef-header__nav a:hover, .ef-header__nav a[aria-current="page"] { color: var(--ef-accent); }

/* ---------- 4.1 tier badge / chip (component 5a) ---------- */
.ef-tier {
  display: inline-flex; align-items: center; gap: var(--ef-space-2);
  padding: 0.15rem var(--ef-space-3);
  font: var(--ef-weight-medium) var(--ef-text-sm)/1 var(--ef-font-sans);
  border-radius: var(--ef-radius-sm);
  border-inline-start: var(--ef-border-w-strong) solid;
}
.ef-tier__icon { flex: none; }
.ef-tier--scouted      { background: var(--ef-tier-scouted-bg);     color: var(--ef-tier-scouted);     border-color: var(--ef-tier-scouted); }
.ef-tier--researched   { background: var(--ef-tier-researched-bg);  color: var(--ef-tier-researched);  border-color: var(--ef-tier-researched); }
.ef-tier--field_tested { background: var(--ef-tier-fieldtested-bg); color: var(--ef-tier-fieldtested); border-color: var(--ef-tier-fieldtested); }
.ef-tier--proven       { background: var(--ef-tier-proven-bg);      color: var(--ef-tier-proven);      border-color: var(--ef-tier-proven); }

/* ---------- 4.2 provenance line (component 5b) ---------- */
.ef-provenance {
  display: flex; flex-wrap: wrap; gap: var(--ef-space-2) var(--ef-space-3);
  list-style: none; padding: 0; margin: var(--ef-space-2) 0 0;
  font-size: var(--ef-text-sm); color: var(--ef-ink-faint);
}
.ef-provenance li { display: inline-flex; align-items: center; gap: var(--ef-space-2); }
/* ASCII arrow (build/16 B.5 note: keep the arrow copy-safe); CSS content is
   skipped by screen readers, which hear a clean ordered list. */
.ef-provenance li + li::before {
  content: "->"; color: var(--ef-border-strong); margin-inline-end: var(--ef-space-2);
  font-family: var(--ef-font-mono);
}
.ef-provenance time { font-variant-numeric: tabular-nums; }
.ef-provenance__who { color: var(--ef-ink-soft); font-weight: var(--ef-weight-medium); }

/* ---------- 4.3 at-a-glance strip ---------- */
.ef-glance {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: var(--ef-space-1); margin: var(--ef-space-5) 0;
  border: var(--ef-border-w) solid var(--ef-border); border-radius: var(--ef-radius);
  background: var(--ef-surface); overflow: hidden;
}
.ef-glance__item { padding: var(--ef-space-4); border-inline-start: var(--ef-border-w) solid var(--ef-border); }
.ef-glance__item:first-child { border-inline-start: 0; }
.ef-glance dt {
  font-size: var(--ef-text-xs); text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--ef-ink-faint); margin-bottom: var(--ef-space-1);
}
.ef-glance dd { margin: 0; font-weight: var(--ef-weight-medium); font-variant-numeric: tabular-nums; }
.ef-glance__item--dogfood dd { color: var(--ef-success); }
.ef-glance__item--safety dd  { color: var(--ef-caution); }
.ef-glance__item--safety-ymyl dd { color: var(--ef-danger); }

/* ---------- 4.4 local-AI handoff box (component 5c, the pillar) ---------- */
.ef-handoff {
  border: var(--ef-border-w) solid var(--ef-slate);
  border-radius: var(--ef-radius); background: var(--ef-slate-weak);
  padding: var(--ef-space-5); margin: var(--ef-space-6) 0;
}
.ef-handoff__head { display: flex; align-items: center; justify-content: space-between; gap: var(--ef-space-3); }
.ef-handoff__title {
  display: inline-flex; align-items: center; gap: var(--ef-space-2);
  margin: 0; font-size: var(--ef-text-lg); color: var(--ef-slate);
}
.ef-handoff__archetype {
  font-size: var(--ef-text-xs); text-transform: uppercase; letter-spacing: 0.04em;
  padding: 0.1rem var(--ef-space-2); border-radius: var(--ef-radius-sm);
  background: var(--ef-slate); color: var(--ef-surface);
}
.ef-handoff__intro { font-size: var(--ef-text-sm); color: var(--ef-ink-soft); margin: var(--ef-space-2) 0 0; }
.ef-handoff__prompt { position: relative; margin: var(--ef-space-4) 0; }
.ef-handoff__prompt pre {
  background: var(--ef-surface-sunk); border: var(--ef-border-w) solid var(--ef-border);
  border-radius: var(--ef-radius-sm); padding: var(--ef-space-4);
  padding-inline-end: 5.5rem; overflow-x: auto; white-space: pre-wrap;
  font-size: 0.9rem;
}
.ef-copy {
  position: absolute; top: var(--ef-space-3); inset-inline-end: var(--ef-space-3);
  display: inline-flex; align-items: center; gap: var(--ef-space-1);
  padding: var(--ef-space-2) var(--ef-space-3); font-size: var(--ef-text-sm);
  background: var(--ef-surface); color: var(--ef-ink);
  border: var(--ef-border-w) solid var(--ef-border-strong);
  border-radius: var(--ef-radius-sm); cursor: pointer;
}
.ef-copy:hover { background: var(--ef-accent-weak); border-color: var(--ef-accent); }
.ef-handoff__tool  { margin: var(--ef-space-3) 0 0; }
.ef-handoff__note  { margin: var(--ef-space-2) 0 0; font-size: var(--ef-text-sm); color: var(--ef-ink-soft); }

/* ---------- 4.5 disclosure + BOM best-price table (component 5d) ---------- */
.ef-disclosure {
  font-size: var(--ef-text-sm); color: var(--ef-ink-soft);
  background: var(--ef-surface-sunk);
  border-inline-start: var(--ef-border-w-strong) solid var(--ef-border-strong);
  padding: var(--ef-space-3) var(--ef-space-4);
  border-radius: var(--ef-radius-sm); margin-bottom: var(--ef-space-3);
  max-width: none;
}
.ef-bom__table { width: 100%; border-collapse: collapse; font-size: var(--ef-text-sm); }
.ef-bom__table th, .ef-bom__table td {
  text-align: start; padding: var(--ef-space-3) var(--ef-space-4);
  border-bottom: var(--ef-border-w) solid var(--ef-border); vertical-align: top;
}
.ef-bom__table thead th {
  font-size: var(--ef-text-xs); text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--ef-ink-faint);
  border-bottom: var(--ef-border-w-strong) solid var(--ef-border-strong);
}
.ef-bom__table tbody tr:nth-child(even) { background: var(--ef-surface-sunk); }
.ef-bom__buys { display: flex; flex-direction: column; gap: var(--ef-space-1); }
.ef-buy { font-variant-numeric: tabular-nums; }
.ef-buy::after { content: " ↗"; color: var(--ef-ink-faint); } /* external-link affordance */
.ef-bestpick {
  display: inline-flex; align-items: center; gap: var(--ef-space-1);
  color: var(--ef-success); font-weight: var(--ef-weight-medium);
}
.ef-price-stale { font-size: var(--ef-text-xs); color: var(--ef-ink-faint); }
@media (max-width: 40rem) {
  /* restack, never a horizontally-scrolling table */
  .ef-bom__table, .ef-bom__table thead, .ef-bom__table tbody, .ef-bom__table tr,
  .ef-bom__table th, .ef-bom__table td { display: block; }
  .ef-bom__table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .ef-bom__table tbody tr {
    border: var(--ef-border-w) solid var(--ef-border);
    border-radius: var(--ef-radius); margin-bottom: var(--ef-space-4);
    padding: var(--ef-space-2);
  }
  .ef-bom__table td { border-bottom: 0; }
  .ef-bom__table td::before {
    content: attr(data-label); display: block;
    font-size: var(--ef-text-xs); text-transform: uppercase; color: var(--ef-ink-faint);
  }
}

/* ---------- 4.6 before/after widget (component 5e) ---------- */
.ef-ba__frame {
  position: relative; border-radius: var(--ef-radius-lg);
  border: var(--ef-border-w) solid var(--ef-border-strong);
  overflow: hidden; background: var(--ef-surface-sunk);
}
.ef-ba__img { display: block; width: 100%; height: auto; }
/* JS-on slider mode */
[data-ba].is-interactive .ef-ba__img--after { position: absolute; inset: 0; clip-path: inset(0 50% 0 0); }
[data-ba].is-interactive .ef-ba__handle {
  position: absolute; inset-block: 0; inset-inline-start: 50%;
  width: 2px; background: var(--ef-surface);
  box-shadow: 0 0 0 1px var(--ef-ink); cursor: ew-resize;
}
/* JS-off fallback: a simple labeled two-up */
[data-ba]:not(.is-interactive) .ef-ba__frame { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; }
[data-ba]:not(.is-interactive) .ef-ba__handle { display: none; }
.ef-ba__caption { font-size: var(--ef-text-sm); color: var(--ef-ink-faint); margin-top: var(--ef-space-2); }
.ef-ba__try summary { cursor: pointer; color: var(--ef-accent); font-size: var(--ef-text-sm); margin-top: var(--ef-space-3); }

/* ---------- 4.7 danger / YMYL callouts (component 5g) ---------- */
.ef-danger {
  border-radius: var(--ef-radius); padding: var(--ef-space-4);
  margin: var(--ef-space-4) 0; border-inline-start: 4px solid;
}
.ef-danger p { max-width: none; margin: 0; }
.ef-danger--caution { background: var(--ef-caution-bg); border-color: var(--ef-caution); }
.ef-danger--caution strong { color: var(--ef-caution); }
.ef-danger--ymyl {
  background: var(--ef-danger-bg); border-color: var(--ef-danger);
  border-inline-start-width: 6px; box-shadow: var(--ef-shadow);
}
.ef-danger--ymyl strong { color: var(--ef-danger); }
.ef-danger--ymyl a { font-weight: var(--ef-weight-medium); text-decoration: underline; }
.ef-danger strong::before { content: "⚠ "; }

/* ---------- 4.8 standard banner + footer (component 5f) ---------- */
.ef-banner {
  background: var(--ef-info-bg); border: var(--ef-border-w) solid var(--ef-slate-weak);
  border-inline-start: var(--ef-border-w-strong) solid var(--ef-info);
  border-radius: var(--ef-radius); padding: var(--ef-space-4);
  margin: var(--ef-space-5) 0; font-size: var(--ef-text-sm); color: var(--ef-ink-soft);
}
.ef-footer {
  background: var(--ef-surface-sunk); border-top: var(--ef-border-w) solid var(--ef-border);
  padding: var(--ef-space-8) 0; font-size: var(--ef-text-sm); color: var(--ef-ink-soft);
  margin-top: var(--ef-space-12);
}
.ef-footer a { color: var(--ef-accent); }
.ef-footer__legal { display: flex; flex-wrap: wrap; gap: var(--ef-space-4); margin-top: var(--ef-space-4); }

/* ---------- 4.9 lane hub cards + lab strip ---------- */
.ef-lanecard {
  display: flex; flex-direction: column; background: var(--ef-surface);
  border: var(--ef-border-w) solid var(--ef-border); border-radius: var(--ef-radius);
  overflow: hidden; text-decoration: none; color: inherit;
  transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s;
}
.ef-lanecard:hover { border-color: var(--ef-accent); transform: translateY(-2px); box-shadow: var(--ef-shadow); }
.ef-lanecard__media img { width: 100%; aspect-ratio: 8 / 5; object-fit: cover; background: var(--ef-surface-sunk); }
.ef-lanecard__body { padding: var(--ef-space-4); display: flex; flex-direction: column; gap: var(--ef-space-2); }
.ef-lanecard__title { margin: 0; font-size: var(--ef-text-lg); }
.ef-lanecard__blurb { margin: 0; color: var(--ef-ink-soft); font-size: var(--ef-text-sm); }
.ef-lanecard__meta  { color: var(--ef-ink-faint); font-size: var(--ef-text-xs); font-variant-numeric: tabular-nums; }
.ef-labstrip {
  background: var(--ef-surface-sunk);
  border: 1px dashed var(--ef-border-strong);
  border-radius: var(--ef-radius); padding: var(--ef-space-5);
}
.ef-labstrip a { color: var(--ef-ink-soft); } /* rel="nofollow" per PAGE-TEMPLATE 4 */
.ef-labstrip__sub { font-size: var(--ef-text-sm); color: var(--ef-ink-faint); margin-top: var(--ef-space-1); }

/* ---------- 4.10 links, buttons, inputs ---------- */
a { color: var(--ef-accent); text-underline-offset: 0.15em; text-decoration-thickness: 1px; }
a:hover { color: var(--ef-accent-hover); }
.ef-btn {
  display: inline-flex; align-items: center; gap: var(--ef-space-2);
  padding: var(--ef-space-3) var(--ef-space-5); border-radius: var(--ef-radius);
  font: var(--ef-weight-medium) var(--ef-text-base)/1 var(--ef-font-sans);
  cursor: pointer; background: var(--ef-accent); color: var(--ef-on-accent);
  border: var(--ef-border-w) solid transparent; text-decoration: none;
}
.ef-btn:hover { background: var(--ef-accent-hover); color: var(--ef-on-accent); }
.ef-btn--ghost { background: transparent; color: var(--ef-accent); border-color: var(--ef-border-strong); }
.ef-btn--ghost:hover { background: var(--ef-accent-weak); }
input, select, textarea {
  font: inherit; padding: var(--ef-space-3); border-radius: var(--ef-radius-sm);
  border: var(--ef-border-w) solid var(--ef-border-strong);
  background: var(--ef-surface); color: var(--ef-ink);
}

/* ---------- theme toggle ---------- */
.ef-theme-toggle {
  background: transparent; border: var(--ef-border-w) solid var(--ef-border-strong);
  border-radius: var(--ef-radius-sm); padding: var(--ef-space-2) var(--ef-space-3);
  cursor: pointer; color: var(--ef-ink-soft); font-size: var(--ef-text-sm);
}
.ef-theme-toggle:hover { border-color: var(--ef-accent); color: var(--ef-accent); }