/* FARfetched design tokens and shared components.
   Copied from design/farfetched-frontend-handoff/static/tokens.css.
   Light theme only (the dark variant was dropped).
   Web fonts are not loaded yet: the font stacks use system faces only. */

:root {
  --bg: #F6F7F8; --surface: #FFFFFF; --ink: #14171A; --muted: #555B62;
  --line: #D3D7DC; --soft: #EDEFF1;
  --confirmed: #0A58A8; --computed: #9A4A00;
  --entry-sc: #5B3BA0; --entry-elos: #0B6A62; --entry-ex: #7B1F4E;
  --missing: #A3262A; --on-missing: #FFFFFF;
  --del-bg: #FBE9E9; --del-ink: #8C1D21; --ins-bg: #E6F2EA; --ins-ink: #0B5A2E;
  --era-1: #EAF2FB; --on-era-1: #14171A; --era-2: #C9DDF3; --on-era-2: #14171A;
  --era-3: #9CC1E8; --on-era-3: #14171A; --era-4: #5E97D4; --on-era-4: #0B1218;
  --era-5: #2F6DB5; --on-era-5: #FFFFFF; --part25: #E4E6E9; --on-part25: #14171A;
  --focus: #1E6B55;
  /* Site chrome: forest green with a rust accent, deliberately unlike the
     FAA's navy, blue and gold. Not used for meaning (see the semantic
     tokens above). */
  --brand: #16352B; --brand-2: #24584A; --brand-3: #1B4639; --on-brand: #FFFFFF;
  --on-brand-muted: #CFE1DA; --accent: #B4532A; --brand-soft: #E5EFEA;
  --link: #1E6B55;
}

body { margin: 0; background: var(--bg); color: var(--ink);
  font: 14px/1.45 system-ui, sans-serif; }
.mono, code, .cite { font-family: ui-monospace, monospace; }
.muted { color: var(--muted); }
a { color: var(--link); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

.card { background: var(--surface); border: 1px solid var(--line); border-radius: 6px; }
.label { font: 500 11px/1 ui-monospace, monospace; color: var(--muted);
  text-transform: uppercase; letter-spacing: .05em; }
.btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px;
  border: 1px solid var(--ink); border-radius: 4px; background: var(--surface);
  color: var(--ink); font: 500 13px/1 system-ui, sans-serif; text-decoration: none; cursor: pointer; }
.btn[aria-pressed="true"] { background: var(--ink); color: var(--bg); }
.group-header { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 44px;
  padding: 10px 16px; background: var(--soft); border: 0; border-bottom: 1px solid var(--line);
  color: var(--ink); font: inherit; text-align: left; cursor: pointer; }

/* Badges: outline + glyph + word. Never colour alone. */
.badge { display: inline-flex; align-items: center; gap: 4px; padding: 3px 6px;
  border: 1px solid currentColor; border-radius: 3px; white-space: nowrap;
  font: 500 11px/1 ui-monospace, monospace; color: var(--muted); }
.badge.confirmed { color: var(--confirmed); border-width: 2px; }
.badge.computed  { color: var(--computed); border-style: dashed; }
.badge.sc   { color: var(--entry-sc); }
.badge.elos { color: var(--entry-elos); }
.badge.ex   { color: var(--entry-ex); }
.badge.missing { background: var(--missing); border-color: var(--missing); color: var(--on-missing); }

/* Matrix cells */
.cell { display: flex; flex-direction: column; gap: 2px; padding: 6px 8px; border-radius: 3px;
  min-height: 34px; font: 500 13px/1.2 ui-monospace, monospace; }
.cell small { font: 400 11px/1.2 ui-monospace, monospace; opacity: .85; }
.era-1 { background: var(--era-1); color: var(--on-era-1); }
.era-2 { background: var(--era-2); color: var(--on-era-2); }
.era-3 { background: var(--era-3); color: var(--on-era-3); }
.era-4 { background: var(--era-4); color: var(--on-era-4); }
.era-5 { background: var(--era-5); color: var(--on-era-5); }
.part-25 { background: var(--part25); color: var(--on-part25); }
.cell.computed  { border: 1px dashed var(--computed); color: var(--computed); background: transparent; }
.cell.confirmed { border: 2px solid var(--confirmed); background: var(--part25); color: var(--ink); }
.cell.none { border: 1px solid var(--line); color: var(--muted); }
.cell.missing { background: var(--missing); color: var(--on-missing); }

/* Lineage connectors */
.link-line { position: relative; display: flex; align-items: center; min-height: 56px; }
.link-line::before { content: ""; position: absolute; left: 0; right: 0; top: 50%;
  border-top: 2px solid var(--line); }
.link-line.confirmed::before { border-top: 3px solid var(--confirmed); }
.link-line.computed::before  { border-top: 2px dashed var(--computed); }

/* Regulation text and diffs */
.prose { font: 16px/1.7 Georgia, serif; max-width: 62ch; }
del.removed { background: var(--del-bg); color: var(--del-ink); text-decoration: line-through; }
ins.added   { background: var(--ins-bg); color: var(--ins-ink); text-decoration: underline; }

/* Tables */
table { border-collapse: collapse; width: 100%; }
th { font: 500 11px/1.2 ui-monospace, monospace; text-transform: uppercase; letter-spacing: .04em;
  color: var(--muted); text-align: left; padding: 8px 12px; border-bottom: 1px solid var(--line); }
td { padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
.sticky-col { position: sticky; left: 0; background: var(--surface); z-index: 1; }