/* Equipment directory (equipment.html, plan notes 64 and 64b; v2 2026-10-24). Uses the site.css tokens; nothing here overrides site.css classes globally.
   Order: tools (search, selects, category row), cards, details, tray, compare drawer, states. Phone first. */
.lib-equipment{--lib-accent:#0b6e8a;--lib-soft:rgba(11,110,138,.10);--lib-tint:#e3f3f7}

/* ---------- tools ---------- */
.eq-tools{padding-top:0;margin-top:var(--s-5)}
.eq-row{display:grid;gap:var(--s-3)}
.eq-sels{display:flex;gap:var(--s-2);overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;margin:0 calc(-1 * var(--gutter));padding:2px var(--gutter) 4px}
.eq-sels::-webkit-scrollbar{display:none}
.eq-sels-fit{margin-top:var(--s-2)}
.eq-search{margin:0}
.eq-sel{flex:none;position:relative;display:block}
.eq-sel select{max-width:220px;min-height:40px;padding:0 32px 0 var(--s-4);border:0;border-radius:var(--r-pill);background:var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 4.5l3 3 3-3' fill='none' stroke='%235d6675' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 12px center/12px;box-shadow:var(--ring-2);font:500 14px var(--font);color:var(--text-2);text-overflow:ellipsis;-webkit-appearance:none;appearance:none;cursor:pointer}
.eq-sel select:hover{box-shadow:0 0 0 1px rgba(16,24,40,.28)}
.eq-sel select.is-on{background-color:var(--lib-tint);box-shadow:0 0 0 1.5px var(--lib-accent);color:var(--text);font-weight:600}
.eq-sel select:focus-visible{outline:2px solid var(--lib-accent);outline-offset:2px}
.eq-cats-wrap{position:relative;margin-top:var(--s-2)}
.eq-chips{display:flex;gap:var(--s-2);margin:0 calc(-1 * var(--gutter));padding:2px var(--gutter) 6px;overflow-x:auto;overscroll-behavior-x:contain;scroll-behavior:smooth;scrollbar-width:none;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 12px,#000 calc(100% - 28px),transparent);mask-image:linear-gradient(90deg,transparent 0,#000 12px,#000 calc(100% - 28px),transparent)}
.eq-scroll{display:none}
.eq-chips::-webkit-scrollbar{display:none}
.eq-chips .chip{flex:none;min-height:36px;padding:0 var(--s-3);font-size:14px;gap:6px;white-space:nowrap}
.eq-chips .chip .n{font-size:12px;color:var(--text-3);font-variant-numeric:tabular-nums}
.eq-chips .chip[aria-pressed="true"]{background:var(--lib-accent);color:#fff;box-shadow:none}
.eq-chips .chip[aria-pressed="true"] .n{color:rgba(255,255,255,.85)}
.eq-chips .chip:disabled{opacity:.45;cursor:default}
.eq-chips .eq-chip-new{color:var(--lib-accent);font-weight:600;box-shadow:0 0 0 1px rgba(11,110,138,.35)}
.eq-chips .eq-chip-new::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.eq-bar{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-2) var(--s-4);margin-top:var(--s-3);min-height:40px}
.eq-bar .hint{flex:1 1 auto;font-size:var(--t-small);color:var(--text-2)}
.eq-bar .hint.is-warn{color:var(--gold);font-weight:600}
.eq-reset{min-height:40px;padding:0 var(--s-2);border:0;background:none;color:var(--lib-accent);font:600 14px var(--font);cursor:pointer;text-decoration:underline;text-underline-offset:2px}
.eq-reset[hidden]{display:none}
@media (min-width:760px){
  .eq-tools{margin-top:var(--s-6)}
  .eq-row{grid-template-columns:minmax(0,1fr) auto;align-items:center}
  .eq-sels{flex-wrap:wrap;overflow:visible;margin:0;padding:0}
  .eq-sel select{max-width:200px}
  .eq-cats-wrap{margin-top:var(--s-3)}
  .eq-chips{margin:0;padding:2px 2px 4px;-webkit-mask-image:none;mask-image:none}
  .eq-cats-wrap.can-l .eq-chips{-webkit-mask-image:linear-gradient(90deg,transparent 0,transparent 36px,#000 72px);mask-image:linear-gradient(90deg,transparent 0,transparent 36px,#000 72px)}
  .eq-cats-wrap.can-r .eq-chips{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 72px),transparent calc(100% - 36px));mask-image:linear-gradient(90deg,#000 calc(100% - 72px),transparent calc(100% - 36px))}
  .eq-cats-wrap.can-l.can-r .eq-chips{-webkit-mask-image:linear-gradient(90deg,transparent 0,transparent 36px,#000 72px,#000 calc(100% - 72px),transparent calc(100% - 36px));mask-image:linear-gradient(90deg,transparent 0,transparent 36px,#000 72px,#000 calc(100% - 72px),transparent calc(100% - 36px))}
  .eq-scroll{position:absolute;top:2px;z-index:2;display:grid;place-items:center;width:36px;height:36px;border:0;border-radius:50%;background:var(--surface);box-shadow:var(--ring-2),var(--shadow-1);color:var(--text-2);cursor:pointer}
  .eq-scroll[hidden]{display:none}
  .eq-scroll:hover{color:var(--text);background:var(--surface-2)}
  .eq-scroll svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
  .eq-scroll-l{left:0}.eq-scroll-r{right:0}
}

/* ---------- cards ---------- */
.eq-res{margin-top:var(--s-4)}
.eq-grid{display:grid;gap:var(--s-3);grid-template-columns:minmax(0,1fr);align-items:start}
@media (min-width:760px){.eq-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-4)}}
@media (min-width:1060px){.eq-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.eq-card{display:flex;flex-direction:column;gap:var(--s-2);min-width:0;padding:var(--s-4) var(--s-4) var(--s-2);border-radius:var(--r-l);background:var(--surface);box-shadow:var(--ring),var(--shadow-1);transition:box-shadow var(--dur-2) var(--ease)}
@media (min-width:760px){.eq-card{padding:var(--s-5) var(--s-4) var(--s-2)}}
.eq-card:hover{box-shadow:var(--ring-2),var(--shadow-2)}
.eq-card.is-picked{box-shadow:0 0 0 2px var(--lib-accent),var(--shadow-1)}
.eq-head{min-width:0}
.eq-cat{margin:0;font-size:var(--t-caption);font-weight:600;letter-spacing:.02em;color:var(--lib-accent);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.eq-card h3{margin:4px 0 0;font-size:var(--t-head);font-weight:650;line-height:1.3;letter-spacing:-.01em;overflow-wrap:anywhere}
.eq-new{display:inline-block;margin-left:4px;padding:1px 8px;border-radius:var(--r-pill);background:var(--lib-tint);color:var(--lib-accent);font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;vertical-align:2px}
.eq-vendor{margin:2px 0 0;font-size:var(--t-foot);color:var(--text-3)}
.eq-key{margin:0;font-size:14px;line-height:1.45;color:var(--text-2);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}
.eq-acts{display:flex;flex-wrap:wrap;gap:6px;padding-top:var(--s-1)}
.eq-act{display:inline-flex;align-items:center;gap:5px;min-height:36px;padding:0 11px 0 10px;border:0;border-radius:var(--r-pill);background:var(--surface);box-shadow:var(--ring-2);color:var(--text);font:600 13px var(--font);white-space:nowrap;cursor:pointer;transition:background var(--dur-1),box-shadow var(--dur-1)}
.eq-act:hover{background:var(--surface-2)}
.eq-act svg{width:15px;height:15px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.eq-act.eq-dl{background:var(--lib-accent);color:#fff;box-shadow:none}
.eq-act.eq-dl:hover{filter:brightness(.92);background:var(--lib-accent)}
.eq-act.eq-dl small{padding:0 4px;border-radius:4px;background:rgba(255,255,255,.2);font-size:10px;font-weight:700;letter-spacing:.03em}
.eq-top{position:relative}
.eq-top .eq-cat{padding-right:96px}
.eq-cmpbtn{position:absolute;top:-6px;right:-6px;display:inline-flex;align-items:center;gap:4px;min-height:32px;padding:0 10px 0 8px;border:0;border-radius:var(--r-pill);background:none;box-shadow:inset 0 0 0 1px var(--line-2);color:var(--text-2);font:600 12.5px var(--font);cursor:pointer}
.eq-cmpbtn svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.eq-cmpbtn:hover{background:var(--surface-2);color:var(--text)}
.eq-cmpbtn[aria-pressed="true"]{background:var(--lib-tint);color:var(--lib-accent);box-shadow:inset 0 0 0 1.5px var(--lib-accent)}
@media (max-width:759px){.eq-cmpbtn{min-height:36px;top:-8px}}
@media (max-width:759px){.eq-act{min-height:40px}}

/* ---------- details ---------- */
.eq-det{margin:var(--s-1) calc(-1 * var(--s-2)) 0;border-top:1px solid var(--line)}
.eq-det summary{display:flex;align-items:center;justify-content:space-between;min-height:40px;padding:0 var(--s-2);border-radius:var(--r-s);font-size:var(--t-foot);font-weight:600;color:var(--text-2);cursor:pointer;list-style:none}
.eq-det summary::-webkit-details-marker{display:none}
.eq-det summary::after{content:"";width:7px;height:7px;margin-right:4px;border-right:2px solid var(--text-3);border-bottom:2px solid var(--text-3);transform:rotate(45deg) translateY(-2px);transition:transform var(--dur-1)}
.eq-det[open] summary::after{transform:rotate(225deg) translateY(-2px)}
.eq-det summary:hover{color:var(--text)}
.eq-det-in{display:grid;gap:var(--s-2);padding:var(--s-1) var(--s-2) var(--s-3)}
.eq-model,.eq-sizes,.eq-rel,.eq-doc{margin:0;font-size:14px;line-height:1.45;color:var(--text);overflow-wrap:anywhere}
.eq-model span,.eq-sizes span,.eq-rel span,.eq-doc span{color:var(--text-3)}
.eq-rel a,.eq-doc a,.eq-tip a{color:var(--lib-accent);text-decoration:underline;text-underline-offset:2px;overflow-wrap:anywhere}
.eq-dl-spec{display:grid;grid-template-columns:minmax(96px,38%) 1fr;gap:4px var(--s-3);margin:0;padding:var(--s-2) 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);font-size:13.5px;line-height:1.4}
.eq-dl-spec dt{color:var(--text-3)}
.eq-dl-spec dd{margin:0;color:var(--text);overflow-wrap:anywhere}
.eq-specs{margin:0;padding:0;list-style:none;display:grid;gap:4px;font-size:14px;line-height:1.45;color:var(--text-2)}
.eq-specs li{position:relative;padding-left:14px;overflow-wrap:anywhere}
.eq-specs li::before{content:"";position:absolute;left:2px;top:.62em;width:5px;height:5px;border-radius:50%;background:var(--lib-accent);opacity:.7}
.eq-note{margin:0;font-size:13px;line-height:1.45;color:var(--text-3)}
.eq-unv{margin:0;padding:6px 10px;border-radius:var(--r-s);background:var(--amber-soft);color:var(--gold);font-size:13px;line-height:1.4;font-weight:600}
.eq-procs{display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0;list-style:none}
.eq-procs button{min-height:28px;padding:0 10px;border:0;border-radius:var(--r-pill);background:var(--surface-2);color:var(--text-2);font:500 12.5px var(--font);cursor:pointer}
.eq-procs button:hover{background:var(--lib-tint);color:var(--lib-accent)}
.eq-cost{display:flex;align-items:flex-start;gap:6px;margin:0;font-size:14px;color:var(--text)}
.eq-cost.ask{color:var(--text-2)}
.eq-i{flex:none;display:inline-grid;place-items:center;width:22px;height:22px;margin-top:-1px;border:0;border-radius:50%;background:var(--surface-2);box-shadow:var(--ring);color:var(--text-2);font:600 13px/1 Georgia,serif;font-style:italic;cursor:pointer}
.eq-i:hover,.eq-i[aria-expanded="true"]{background:var(--lib-soft);color:var(--lib-accent)}
.eq-tip{margin:0;padding:var(--s-3);border-radius:var(--r-m);background:var(--surface-2);font-size:13px;line-height:1.5;color:var(--text-2)}
.eq-tip[hidden]{display:none}

/* ---------- states ---------- */
.eq-skel{height:168px;border-radius:var(--r-l);background:linear-gradient(100deg,rgba(255,255,255,.75) 30%,var(--surface-2) 50%,rgba(255,255,255,.75) 70%) 0 0/300% 100%;box-shadow:inset 0 0 0 1px var(--line);animation:shimmer 1.4s linear infinite}
.eq-more-wrap{display:flex;justify-content:center;margin-top:var(--s-5)}
.eq-more-wrap .btn[hidden]{display:none}
.eq-about a{color:var(--lib-accent);font-weight:600;text-decoration:underline;text-underline-offset:2px}
@media (prefers-reduced-motion:reduce){.eq-skel{animation:none}}

/* ---------- compare tray ---------- */
.eq-tray{position:fixed;left:0;right:0;bottom:0;z-index:40;padding:var(--s-2) var(--gutter) calc(var(--s-2) + env(safe-area-inset-bottom));background:rgba(255,255,255,.95);-webkit-backdrop-filter:saturate(1.4) blur(12px);backdrop-filter:saturate(1.4) blur(12px);box-shadow:0 -1px 0 var(--line),0 -6px 20px rgba(16,24,40,.08)}
.eq-tray[hidden]{display:none}
.eq-tray-in{display:flex;align-items:center;gap:var(--s-2);max-width:var(--max);margin:0 auto}
.eq-tray-list{flex:1;min-width:0;display:flex;gap:6px;margin:0;padding:0;list-style:none;overflow-x:auto;scrollbar-width:none}
.eq-tray-list::-webkit-scrollbar{display:none}
.eq-tray-list li{flex:none;display:inline-flex;align-items:center;gap:2px;max-width:200px;min-height:36px;padding:0 2px 0 12px;border-radius:var(--r-pill);background:var(--lib-tint);font-size:13px;font-weight:600;color:var(--text)}
.eq-tray-name{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.eq-tray-x{display:grid;place-items:center;flex:none;width:32px;height:32px;border:0;border-radius:50%;background:none;color:var(--text-2);cursor:pointer}
.eq-tray-x:hover{background:rgba(16,24,40,.06)}
.eq-tray-x svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round}
.eq-tray-n{flex:none;font-size:var(--t-foot);color:var(--text-3);font-variant-numeric:tabular-nums}
.eq-tray .btn{flex:none;min-height:40px;padding:0 var(--s-4);font-size:14px}
.eq-tray .btn:disabled{background:var(--surface-2);color:var(--text-3);box-shadow:var(--ring);cursor:default}
@media (max-width:559px){.eq-tray-list li{max-width:120px}.eq-tray-n{display:none}#eq-tray-clear{display:none}}
body.eq-has-tray .foot-bar{padding-bottom:72px}
body.eq-has-tray .ask-fab{bottom:calc(76px + env(safe-area-inset-bottom))}
@media (min-width:760px){body.eq-has-tray .ask-panel{bottom:calc(144px + env(safe-area-inset-bottom))}}
body.eq-drawer-open .ask-fab{display:none}

/* ---------- compare drawer ---------- */
.eq-drawer{position:fixed;inset:0;z-index:80;display:flex;align-items:flex-end;justify-content:center;background:rgba(16,24,40,.38)}
.eq-drawer[hidden]{display:none}
.eq-drawer-in{display:flex;flex-direction:column;width:100%;max-width:1080px;max-height:92vh;max-height:92dvh;padding:var(--s-3) var(--gutter) calc(var(--s-4) + env(safe-area-inset-bottom));border-radius:var(--r-xl) var(--r-xl) 0 0;background:var(--surface);box-shadow:var(--shadow-3)}
@media (min-width:760px){.eq-drawer{align-items:center;padding:var(--s-6)}.eq-drawer-in{max-height:88vh;border-radius:var(--r-xl);padding:var(--s-5) var(--s-6)}}
.eq-drawer-h{display:flex;align-items:center;justify-content:space-between;gap:var(--s-2);flex-wrap:wrap}
.eq-drawer-h h2{margin:0;font-size:var(--t-title3)}
.eq-drawer-acts{display:flex;align-items:center;gap:6px}
.eq-drawer-acts .btn{min-height:36px;padding:0 var(--s-3);font-size:13px}
.eq-x{position:static}
.eq-swipe{display:none;margin:0 0 6px;font-size:var(--t-caption);color:var(--text-3)}
.eq-drawer.is-wide .eq-swipe{display:block}
@media (min-width:760px){.eq-drawer.is-wide .eq-swipe{display:none}}
.eq-copied{min-height:18px;margin:2px 0 6px;font-size:var(--t-foot);color:var(--lib-accent)}
.eq-cmp-wrap{flex:1;min-height:0;overflow:auto;overscroll-behavior:contain;margin:0 calc(-1 * var(--gutter));padding:0 var(--gutter)}
@media (min-width:760px){.eq-cmp-wrap{margin:0;padding:0}}
.eq-cmp{width:100%;min-width:calc(92px + var(--n,3) * 148px);border-collapse:separate;border-spacing:0;table-layout:fixed;font-size:13.5px;line-height:1.45}
.eq-cmp col:first-child,.eq-cmp th[scope=row],.eq-cmp .eq-corner{width:92px}
@media (min-width:760px){.eq-cmp th[scope=row],.eq-cmp .eq-corner{width:150px}}
.eq-cmp th,.eq-cmp td{padding:var(--s-2) var(--s-3) var(--s-2) 0;vertical-align:top;text-align:left;overflow-wrap:anywhere;border-bottom:1px solid var(--line)}
.eq-cmp thead th{position:sticky;top:0;z-index:1;background:var(--surface);padding-bottom:var(--s-3);border-bottom:1px solid var(--line-2)}
.eq-cmp thead .eq-corner{position:sticky;top:0;left:0;z-index:2;background:var(--surface);border-bottom:1px solid var(--line-2)}
.eq-cmp th[scope=row]{position:sticky;left:0;z-index:1;background:var(--surface);font-size:var(--t-caption);font-weight:600;letter-spacing:.02em;color:var(--text-3);padding-right:var(--s-3)}
.eq-cmp-cat{display:block;font-size:var(--t-caption);font-weight:600;color:var(--lib-accent)}
.eq-cmp-name{display:block;margin-top:2px;font-size:var(--t-small);font-weight:650;line-height:1.3;color:var(--text)}
.eq-cmp tr.eq-spec td{background:linear-gradient(var(--lib-tint),var(--lib-tint)) 0 0/100% 100% no-repeat;background:rgba(227,243,247,.45)}
.eq-cmp td ul{margin:0;padding-left:14px}
.eq-cmp td a{color:var(--lib-accent);font-weight:600;text-decoration:underline;text-underline-offset:2px}
.eq-none{color:var(--text-3)}