/* Field Notes West tokens (site/index.html): paper, ink, blood red, Archivo + Inter */
  :root {
    --ground:#F1F1F1; --panel:#FFFFFF; --ink:#0E0E0E; --muted:#5B544C;
    --accent:#8A1414; --select:#F2DCDC;
    --font-display:'Archivo',sans-serif; --font-body:'Inter',sans-serif;
    --font-mono:'Inter',sans-serif; --font-data:'Roboto Mono',monospace;
    --row:76px; --label-w:260px;
  }
  * { box-sizing:border-box; }
  body { margin:0; background:var(--ground); color:var(--ink); font:14px/1.45 var(--font-body); position:relative; isolation:isolate; }
  body::before { content:""; position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:.22; mix-blend-mode:multiply;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .6 0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E"); }
  header { display:flex; align-items:end; gap:16px; padding:16px; flex-wrap:wrap; }
  h1 { font:900 clamp(32px,6vw,56px)/1 var(--font-display); letter-spacing:-.02em; text-transform:uppercase; margin:0; }
  .label { font:400 11px var(--font-mono); text-transform:uppercase; letter-spacing:.02em; color:var(--muted); }
  .btn { font:600 11px/1 var(--font-mono); text-transform:uppercase; background:var(--panel); color:var(--ink);
    border:2px solid var(--ink); border-radius:16px; box-shadow:3px 3px 0 var(--ink); padding:6px 11px; cursor:pointer; }
  .btn:active { transform:translate(3px,3px); box-shadow:none; }
  .wrap { display:grid; grid-template-columns:var(--label-w) 1fr 340px; margin:0 16px 16px; border:2px solid var(--ink);
    border-radius:8px; background:var(--panel); overflow:hidden; }
  .lanes { position:relative; border-right:2px solid var(--ink); }
  .row-name { position:absolute; left:0; right:0; height:var(--row); display:flex; flex-direction:column; justify-content:center;
    gap:3px; padding:0 14px; cursor:pointer; }
  .row-name.first { border-top:2px solid var(--ink); }
  .row-name.sub { border-top:1px dashed #0002; }
  .row-name:hover, .row-name.on { background:var(--select); }
  .row-title { font:800 24px/1 var(--font-display); letter-spacing:-.01em; text-transform:uppercase; }
  .row-key { font:600 12px var(--font-data); }
  .row-blurb { font:12px/1.3 var(--font-body); color:#3a3a37; }
  .row-title.sm { font-size:18px; line-height:1.05; }
  .row-tier { font:500 12px var(--font-mono); text-transform:uppercase; color:var(--muted); }
  .year { font:12px var(--font-mono); fill:var(--muted); }
  .filters { display:flex; flex-wrap:wrap; gap:8px 18px; align-items:center; margin:0 16px 10px; padding:8px 12px;
    background:var(--panel); border:2px solid var(--ink); border-radius:8px; }
  .filters .group { display:flex; align-items:center; gap:4px; }
  .filters .group .label { margin-right:4px; }
  .seg { font:500 12px var(--font-data); background:transparent; color:var(--ink); border:2px solid var(--ink); border-radius:5px; padding:3px 8px; cursor:pointer; }
  .seg:hover { background:#0000000d; }
  .seg.on { background:var(--select); }
  .pick { font:500 12px var(--font-data); color:var(--ink); background:var(--panel); border:2px solid var(--ink); border-radius:5px; padding:3px 6px; }
  .count { font:600 12px var(--font-data); margin-right:8px; }
  .tabs { display:flex; gap:6px; margin:0 16px 12px; }
  .tab { font:800 16px/1 var(--font-display); text-transform:uppercase; background:var(--panel); color:var(--ink); border:2px solid var(--ink);
    border-radius:8px; padding:8px 16px; cursor:pointer; }
  .tab:hover { background:#fff; }
  .tab.on { background:var(--ink); color:#fff; }
  .btn.primary { background:var(--accent); color:#fff; }
  .btn[disabled] { opacity:.45; cursor:not-allowed; }
  .cmp-btn { margin:0 0 10px; width:100%; padding:9px 11px; font-size:12px; }
  .tray { position:sticky; bottom:12px; z-index:5; display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin:0 16px 16px;
    padding:10px 14px; background:var(--panel); border:2px solid var(--ink); border-radius:8px; box-shadow:3px 3px 0 var(--ink); }
  .tray[hidden], [hidden] { display:none !important; }
  .tray .chip { display:inline-flex; align-items:center; gap:4px; font-size:12px; }
  .x { all:unset; cursor:pointer; font:600 12px var(--font-data); padding:0 3px; }
  .x:hover { color:var(--accent); }
  #compareView { margin:0 16px 16px; display:flex; flex-direction:column; gap:10px; }
  #compareView[hidden] { display:none; }
  .panel-s { background:var(--panel); border:2px solid var(--ink); border-radius:8px; padding:12px 14px; }
  .cmp-empty h2 { font:900 34px/1 var(--font-display); text-transform:uppercase; margin:0 0 8px; }
  .cmp-head { display:flex; flex-wrap:wrap; align-items:center; gap:14px; }
  .adder { display:flex; align-items:center; gap:8px; }
  .toggle { font:500 13px var(--font-data); display:flex; align-items:center; gap:6px; cursor:pointer; }
  .toggle input { accent-color:var(--accent); width:16px; height:16px; }
  .cmp-row { display:flex; align-items:flex-end; gap:28px; flex-wrap:wrap; padding:14px 4px 4px; }
  .cmp-photo { margin:0; display:flex; flex-direction:column; align-items:center; gap:8px; }
  .cmp-photo img { display:block; height:auto; }
  .cmp-photo figcaption { font:400 22px/1 var(--font-display); text-transform:uppercase; display:flex; flex-direction:column; align-items:center; gap:3px; }
  .cmp-photo figcaption span { font:12px var(--font-data); text-transform:none; color:var(--muted); }
  .nophoto { aspect-ratio:4/3; border:2px dashed #0003; border-radius:8px; display:grid; place-items:center; font:12px var(--font-data); color:var(--muted); }
  .rel { margin:6px 0 0; padding-left:18px; font:14px/1.5 var(--font-body); }
  .cmp-table-wrap { overflow-x:auto; }
  .cmp { border-collapse:collapse; width:100%; font:13px/1.4 var(--font-data); }
  .cmp th, .cmp td { text-align:left; vertical-align:top; padding:7px 10px; border-bottom:1px dashed #0002; }
  .cmp thead th { border-bottom:2px solid var(--ink); }
  .cmp tbody th { width:150px; color:var(--muted); font-weight:500; }
  .cmp tr.diff td { background:#8A141414; }
  .cmp tr.same td { color:var(--muted); }
  .cmp-name { display:block; font:400 24px/1 var(--font-display); text-transform:uppercase; }
  .cmp-code { display:block; font:11px var(--font-mono); color:var(--muted); margin:3px 0; }
  .best { display:inline-block; margin-left:6px; font:600 10px/1.6 var(--font-mono); text-transform:uppercase; background:var(--ink); color:var(--select);
    border-radius:4px; padding:0 5px; }
  .empty { font:600 16px var(--font-data); fill:var(--ink); }
  .tagtext { font:600 12px var(--font-data); stroke:none !important; }
  .block { cursor:pointer; }
  .block:hover rect { fill:var(--select); }
  .howto { margin:0; padding-left:20px; font:14px/1.5 var(--font-body); }
  .howto li { margin-bottom:6px; }
  .lede { font:14px/1.45 var(--font-body); margin:0 0 10px; }
  .swatch.inline { display:inline-block; margin-right:6px; vertical-align:middle; }
  .scroll { overflow-x:auto; }
  svg { display:block; }
  .node { cursor:pointer; }
  .node text { font:500 13px var(--font-data); fill:var(--ink); paint-order:stroke; stroke:var(--panel); stroke-width:4px; stroke-linejoin:round; }
  .node:hover .card { stroke-width:4; }
  .dim { opacity:.12; }
  .info { padding:12px; border-left:2px solid var(--ink); }
  .info h2 { font:400 28px/1 var(--font-display); text-transform:uppercase; margin:4px 0 10px; }
  .info table { border-collapse:collapse; width:100%; font:13px var(--font-data); }
  .info td { padding:3px 0; border-bottom:1px dashed #0002; vertical-align:top; }
  .info td:first-child { color:var(--muted); width:104px; }
  .chip { display:inline-block; font:11px/1.6 var(--font-mono); background:var(--select); border:2px solid var(--ink);
    border-radius:5px; padding:0 5px; margin:0 3px 3px 0; cursor:pointer; }
  .viewer { background:#fff; border:2px solid var(--ink); border-radius:8px; padding:10px; margin-bottom:6px; }
  .viewer img { display:block; width:100%; height:170px; object-fit:contain; cursor:zoom-in; }
  dialog#big { outline:none; border:2px solid var(--ink); border-radius:8px; background:#fff; padding:16px; max-width:92vw; cursor:zoom-out; }
  dialog#big::backdrop { background:#171717cc; }
  dialog#big img { display:block; max-width:88vw; max-height:84vh; }
  .size { display:flex; align-items:center; gap:6px; }
  .size input { accent-color:var(--accent); width:140px; }
  .thumbs { display:flex; gap:6px; margin-bottom:10px; }
  .thumb { flex:1; background:#fff; border:2px solid var(--ink); border-radius:5px; padding:3px; cursor:pointer;
    font:10px var(--font-mono); text-transform:uppercase; }
  .thumb img { display:block; width:100%; height:34px; object-fit:contain; }
  .thumb.on { background:var(--select); }
  .info a { color:var(--ink); }
  .note { color:var(--muted); font-size:12px; }
  .legend { display:flex; flex-wrap:wrap; gap:6px; margin:0 16px 10px; align-items:center; }
  .sensor { display:flex; align-items:center; gap:6px; font:500 12px var(--font-data); background:var(--panel); border:2px solid var(--ink);
    border-radius:5px; padding:3px 8px 3px 4px; cursor:pointer; }
  .sensor:hover, .sensor.on { background:var(--select); }
  .swatch { width:22px; height:8px; border-radius:4px; outline:2px solid var(--ink); flex:none; }
  .swatch.box { width:20px; height:14px; background:#fff; outline:none; border:4px solid; border-radius:4px; box-sizing:border-box; }
  @media (max-width:800px) { .wrap { grid-template-columns:120px 1fr; } .info { grid-column:1/-1; border-left:0; border-top:2px solid var(--ink); } }

  /* Field Notes West site bar */
  .fnw-bar { display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap; padding:16px; border-bottom:1px solid #0E0E0E22; background:#fff; }
  .fnw-bar a { color:var(--ink); text-decoration:none; }
  .fnw-bar .brand { font:600 .82rem var(--font-body); letter-spacing:.24em; text-transform:uppercase; }
  .fnw-bar nav { display:flex; gap:clamp(12px,2.5vw,30px); }
  .fnw-bar nav a { font:500 .72rem var(--font-body); letter-spacing:.16em; text-transform:uppercase; color:var(--muted); }
  .fnw-bar nav a:hover, .fnw-bar nav a[aria-current] { color:var(--ink); }
  .fnw-bar nav a[aria-current] { border-bottom:1px solid var(--accent); }
  .spec-row { flex-basis:100%; display:flex; flex-wrap:wrap; gap:8px 18px; align-items:center; padding-top:8px; border-top:1px dashed #0002; }
  .info tr.sec td { padding-top:12px; font:600 11px var(--font-mono); text-transform:uppercase; color:var(--ink); border-bottom:2px solid var(--ink); }
  .brands { display:flex; gap:4px; margin:0 16px 8px; }
  .brand { font:600 11px var(--font-mono); text-transform:uppercase; color:var(--ink); text-decoration:none; padding:4px 8px; border:2px solid transparent; border-radius:5px; }
  .brand:hover { border-color:var(--ink); }
  .brand.on { background:var(--select); border-color:var(--ink); }

  /* phone: filter groups and the sensor picker stay inside the screen */
  .filters .group { flex-wrap:wrap; max-width:100%; min-width:0; }
  .pick { max-width:100%; min-width:0; }