/* OPEX tool cards r2 (opex-toolcards-r2): premium card deck, sticky filter bar, motion. Replaces r1 assets and the raw catalog list. */
:root{--o2-fg:#12161b;--o2-mut:#5b6470;--o2-card:rgba(255,255,255,.72);--o2-card2:rgba(255,255,255,.92);--o2-ln:rgba(18,22,27,.09);--o2-ln2:rgba(14,124,102,.35);--o2-acc:#0e7c66;--o2-acc2:#11a383;--o2-gen:#6d4fe6;--o2-chip:rgba(14,124,102,.09);--o2-gchip:rgba(109,79,230,.10);--o2-sh:0 1px 2px rgba(16,24,40,.05),0 6px 20px -8px rgba(16,24,40,.14);--o2-shh:0 2px 4px rgba(16,24,40,.06),0 18px 40px -14px rgba(14,124,102,.35);--o2-bar:rgba(250,251,252,.78);--o2-top:84px;--o2-safe:calc(96px + env(safe-area-inset-bottom));--o2-ease:cubic-bezier(.2,.8,.2,1)}
html[data-theme=dark],.dark{--o2-fg:#eaeef2;--o2-mut:#98a2ad;--o2-card:rgba(28,32,39,.62);--o2-card2:rgba(36,41,50,.86);--o2-ln:rgba(255,255,255,.08);--o2-ln2:rgba(63,211,174,.45);--o2-acc:#3fd3ae;--o2-acc2:#6ee7c8;--o2-gen:#a996ff;--o2-chip:rgba(63,211,174,.12);--o2-gchip:rgba(169,150,255,.14);--o2-sh:0 1px 2px rgba(0,0,0,.3),0 8px 24px -10px rgba(0,0,0,.6);--o2-shh:0 2px 6px rgba(0,0,0,.35),0 20px 44px -16px rgba(63,211,174,.35);--o2-bar:rgba(16,19,24,.78)}
#main-content,.oe-body main{padding-bottom:var(--o2-safe)}
/* the old raw list is replaced once the deck renders (html.oe2-on); r1 leftovers hidden */
html.oe2-on #calculators,html.oe2-on #generators,html.oe2-on #oe-all-tools,html.oe2-on .catalog-hero .catalog-search,html.oe2-on #discipline-filters,html.oe2-on #catalog-status,html.oe2-on #catalog-empty,.tc-tools,.tc-empty,#tw-fab,.tw-fab{display:none!important}
/* deck */
.oe2-deck{margin:8px auto 0;max-width:1180px;padding:0 16px}
.oe2-deck *,.oe2-bar *{box-sizing:border-box}
.oe2-bar{position:sticky;top:var(--o2-top);z-index:20;margin:10px 0 18px;padding:10px;border:1px solid var(--o2-ln);border-radius:20px;background:var(--o2-bar);backdrop-filter:blur(20px) saturate(1.4);-webkit-backdrop-filter:blur(20px) saturate(1.4);box-shadow:var(--o2-sh);transition:box-shadow .3s var(--o2-ease),border-color .3s}
.oe2-bar.oe2-stuck{box-shadow:0 10px 30px -12px rgba(16,24,40,.28);border-color:var(--o2-ln2)}
.oe2-row{display:flex;gap:8px;align-items:center}
.oe2-find{flex:1;min-width:0;display:flex;align-items:center;gap:8px;height:44px;padding:0 14px;border-radius:14px;border:1px solid var(--o2-ln);background:var(--o2-card2);color:var(--o2-mut);cursor:text;transition:border-color .2s,box-shadow .2s}
.oe2-find:focus-within{border-color:var(--o2-acc);box-shadow:0 0 0 4px var(--o2-chip)}
.oe2-find svg{flex:none;width:18px;height:18px}
.oe2-find input{flex:1;min-width:0;height:100%;border:0!important;background:none!important;box-shadow:none!important;color:var(--o2-fg);font:inherit;font-size:16px;padding:0;outline:none}
.oe2-find kbd{font:600 11px/1 ui-monospace,monospace;padding:4px 6px;border-radius:6px;border:1px solid var(--o2-ln);color:var(--o2-mut)}
.oe2-n{flex:none;font-size:12px;font-weight:600;color:var(--o2-mut);font-variant-numeric:tabular-nums;padding:0 4px;white-space:nowrap}
.oe2-chips{display:flex;gap:6px;margin-top:10px;overflow-x:auto;scrollbar-width:none;-webkit-mask:linear-gradient(90deg,#000 92%,transparent);mask:linear-gradient(90deg,#000 92%,transparent);padding-bottom:2px}
[dir=rtl] .oe2-chips{-webkit-mask:linear-gradient(270deg,#000 92%,transparent);mask:linear-gradient(270deg,#000 92%,transparent)}
.oe2-chips::-webkit-scrollbar{display:none}
.oe2-chip{flex:none;height:34px;padding:0 14px;border-radius:999px;border:1px solid var(--o2-ln);background:transparent;color:var(--o2-fg);font:600 13px/1 inherit;font-family:inherit;cursor:pointer;white-space:nowrap;transition:background .25s var(--o2-ease),color .25s,border-color .25s,transform .15s var(--o2-ease)}
.oe2-chip:hover{border-color:var(--o2-ln2)}
.oe2-chip:active{transform:scale(.95)}
.oe2-chip[aria-pressed=true]{background:var(--o2-acc);border-color:var(--o2-acc);color:#fff}
html[data-theme=dark] .oe2-chip[aria-pressed=true]{color:#06231c}
.oe2-sep{flex:none;width:1px;margin:6px 2px;background:var(--o2-ln)}
.oe2-draft{margin:6px 2px 0;font-size:11px;color:var(--o2-mut)}
.oe2-grid,html.oe2-on .c-grid,html.oe2-on .oe-ggrid,html.oe2-on .catalog-grid{display:grid!important;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px}
/* card */
.oe2-card,html.oe2-on .c-card,html.oe2-on .oe-gcard,.catalog-grid .catalog-card{position:relative;display:flex!important;flex-direction:column;gap:8px;min-width:0;padding:16px 16px 14px;border-radius:18px;border:1px solid var(--o2-ln);background:var(--o2-card);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:var(--o2-sh);color:var(--o2-fg)!important;text-decoration:none!important;overflow:hidden;transition:transform .35s var(--o2-ease),box-shadow .35s var(--o2-ease),border-color .35s,opacity .3s var(--o2-ease);will-change:transform}
.oe2-card *,html.oe2-on .c-card *,html.oe2-on .oe-gcard *,.catalog-grid .catalog-card *{text-decoration:none!important}
.oe2-card::before,.catalog-grid .catalog-card::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:radial-gradient(120% 80% at 0 0,var(--o2-chip),transparent 55%);opacity:0;transition:opacity .35s}
[dir=rtl] .oe2-card::before{background:radial-gradient(120% 80% at 100% 0,var(--o2-chip),transparent 55%)}
@media (hover:hover){.oe2-card:hover,html.oe2-on .c-card:hover,html.oe2-on .oe-gcard:hover,.catalog-grid .catalog-card:hover{transform:translateY(-4px) scale(1.015);box-shadow:var(--o2-shh);border-color:var(--o2-ln2)}.oe2-card:hover::before,.catalog-grid .catalog-card:hover::before{opacity:1}.oe2-card:hover .oe2-go{transform:translateX(3px);opacity:1}[dir=rtl] .oe2-card:hover .oe2-go{transform:translateX(-3px) scaleX(-1)}}
.oe2-card:active,html.oe2-on .c-card:active,html.oe2-on .oe-gcard:active,.catalog-grid .catalog-card:active{transform:translateY(-1px) scale(.98);transition-duration:.12s}
.oe2-card:focus-visible,.catalog-grid .catalog-card:focus-visible{outline:2px solid var(--o2-acc);outline-offset:3px}
.oe2-top{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.oe2-k,.oe2-f{display:inline-flex;align-items:center;height:22px;padding:0 9px;border-radius:999px;font-size:11px;font-weight:700;letter-spacing:.02em;background:var(--o2-chip);color:var(--o2-acc);white-space:nowrap}
.oe2-k[data-k=gen]{background:var(--o2-gchip);color:var(--o2-gen)}
.oe2-f{background:transparent;border:1px solid var(--o2-ln);color:var(--o2-mut);font-weight:600;max-width:100%;overflow:hidden;text-overflow:ellipsis}
.oe2-card h3,.catalog-grid .catalog-card h3{margin:0!important;font-size:16px!important;line-height:1.3!important;font-weight:700;letter-spacing:-.01em;color:var(--o2-fg)}
.oe2-card p,.catalog-grid .catalog-card p{margin:0!important;font-size:13.5px!important;line-height:1.5!important;color:var(--o2-mut)!important;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.oe2-go{position:absolute;top:16px;inset-inline-end:14px;width:18px;height:18px;color:var(--o2-acc);opacity:.55;transition:transform .3s var(--o2-ease),opacity .3s}
[dir=rtl] .oe2-go{transform:scaleX(-1)}
.oe2-card h3{padding-inline-end:22px}
.oe2-card mark{background:var(--o2-chip);color:inherit;border-radius:4px;padding:0 2px}
.catalog-grid .catalog-card .catalog-icon{width:34px;height:34px;display:grid;place-items:center;border-radius:10px;background:var(--o2-chip);color:var(--o2-acc)}
.catalog-grid .catalog-card .card-action{margin-top:auto;font-size:13px;font-weight:600;color:var(--o2-acc)}
.oe2-empty{padding:40px 16px;text-align:center;color:var(--o2-mut)}
/* motion: entrance + filter */
.oe2-pre{opacity:0;transform:translateY(14px) scale(.98)}
.oe2-show{animation:oe2-rise .55s var(--o2-ease) both;animation-delay:calc(var(--d,0)*38ms)}
@keyframes oe2-rise{from{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:none}}
.oe2-out{opacity:0!important;transform:scale(.94)!important;transition:opacity .18s ease,transform .18s ease!important}
.oe2-hide{display:none!important}
@media (max-width:600px){.oe2-deck{padding:0 12px}.oe2-grid,html.oe2-on .c-grid,html.oe2-on .oe-ggrid,html.oe2-on .catalog-grid{grid-template-columns:1fr;gap:10px}.oe2-card,.catalog-grid .catalog-card{padding:14px 14px 12px;border-radius:16px}.oe2-bar{padding:8px;border-radius:18px}.oe2-find kbd{display:none}.oe2-card h3{font-size:15.5px!important}}
@media (prefers-reduced-motion:reduce){.oe2-pre{opacity:1;transform:none}.oe2-show{animation:none}.oe2-card,.oe2-chip,.oe2-bar,.oe2-go,html.oe2-on .c-card,html.oe2-on .oe-gcard,.catalog-grid .catalog-card{transition:none!important}.oe2-card:hover,.oe2-card:active,html.oe2-on .c-card:hover,html.oe2-on .oe-gcard:hover,.catalog-grid .catalog-card:hover{transform:none!important}.oe2-out{transition:none!important}}