/* ============================================================
   styles/ftabs.css (FINAL-144)
   THE canonical folder-tab component. Extracted verbatim from
   app/index.html so the app and public pages (pricing) share ONE
   implementation - the folder-tab law. Do not fork per page; new
   strips supply different CSS variable values only:
     --ftab-i (inactive fill)  --card-border  --ftab-bw  --ftab-bd
     --muted --ink --body --ease-out --card --card-2 --card-shadow
   The app's ftabRestyle() SVG junction trace is an app-side
   enhancement; the base two-piece folder shape below is complete
   without it.
   ============================================================ */.ftabs{--ftr:13px;--ftrr:6px;--ftsk:24deg;display:flex;align-items:flex-end;flex-wrap:wrap;padding:0 8px 6px 4px;position:relative;z-index:2;margin-bottom:-1px}.ftab{--tb:var(--ftab-i);position:relative;z-index:0;isolation:isolate;border:none;background:transparent;color:var(--muted);font-family:var(--body);font-size:13.5px;font-weight:500;padding:12px 42px 14px 20px;white-space:nowrap;cursor:pointer;transition:color .2s ease,transform .25s var(--ease-out)}.ftab + .ftab{margin-left:-20px}.ftab:hover{color:var(--ink)}.ftab.active{color:var(--ink);font-weight:700}.ftab{background-repeat:no-repeat;background-position:0 0;background-size:100% 100%}.ftab::before{content:"";position:absolute;inset:0 22px 0 0;z-index:-1;background:var(--tb);border:var(--ftab-bw,1px) solid var(--card-border);border-right:none;border-bottom:none;border-radius:var(--ftr) 0 0 0;transition:background .22s var(--ease-out)}.ftab::after{content:"";position:absolute;top:0;bottom:0;right:0;width:46px;z-index:-1;background:var(--tb);border:var(--ftab-bw,1px) solid var(--card-border);border-left:none;border-bottom:none;border-top-right-radius:var(--ftrr);transform:skewX(var(--ftsk));transform-origin:bottom right;transition:background .22s var(--ease-out)}/* ---- transition effects (admin-selected, default none). tilt3d transforms
     are applied per-tab by ftabRestyle because direction depends on the tab's
     side relative to the active one; the rest are pure CSS on .fx-run, a class
     ftabRestyle re-triggers only when the active tab actually changes. ---- */@keyframes ftabPop{0%{transform:scale(0.94)}55%{transform:scale(1.04)}100%{transform:scale(1)}}@keyframes ftabFade{from{opacity:0.3}to{opacity:1}}@keyframes ftabSlide{from{transform:translateX(-10px);opacity:0.55}to{transform:none;opacity:1}}html[data-tab-effect="lift"] .ftab.active{transform:translateY(-3px)}html[data-tab-effect="pop"] .ftab.active.fx-run{animation:ftabPop .32s var(--ease-out)}html[data-tab-effect="fade"] .ftab.active.fx-run{animation:ftabFade .3s ease}html[data-tab-effect="slide"] .ftab.active.fx-run{animation:ftabSlide .28s var(--ease-out)}@media (prefers-reduced-motion: reduce){.ftab,.ftab.active.fx-run{animation:none !important;transform:none !important}}/* ---- shape variants (admin-selected per pane, default folder). Variants
     turn the folder pseudos off and draw plain bordered shapes instead; the
     seamless-junction SVG trace only applies to the folder shape. Fills keep
     the opaque per-theme --ftab tokens (FINAL-94 lesson). ---- */.fstyle-pill,.fstyle-square,.fstyle-segment{margin-bottom:0;padding:0 4px 10px}.fstyle-pill .ftab::before,.fstyle-pill .ftab::after,.fstyle-square .ftab::before,.fstyle-square .ftab::after,.fstyle-segment .ftab::before,.fstyle-segment .ftab::after{display:none}.fstyle-pill .ftab,.fstyle-square .ftab,.fstyle-segment .ftab{background-color:var(--tb);background-image:none !important;margin-left:0}.fstyle-pill{gap:8px}.fstyle-pill .ftab{padding:9px 18px 10px;border-radius:999px;border:var(--ftab-bw,1px) solid var(--card-border)}.fstyle-pill .ftab.active{border-color:var(--ftab-bd)}.fstyle-square{gap:6px}.fstyle-square .ftab{padding:10px 18px 11px;border-radius:0;border:var(--ftab-bw,1px) solid var(--card-border)}.fstyle-square .ftab.active{border-color:var(--ftab-bd)}.fstyle-segment{display:inline-flex;gap:3px;padding:4px;background:var(--card-2);border:var(--ftab-bw,1px) solid var(--card-border);border-radius:13px}.fstyle-segment .ftab{padding:8px 16px 9px;border-radius:9px;border:var(--ftab-bw,1px) solid transparent}.fstyle-segment .ftab.active{border-color:var(--ftab-bd);box-shadow:0 1px 2px rgba(30,42,80,0.10)}/* a non-folder strip no longer merges into its panel; give the panel its
     corner back and a small gap (toggled by applyTabSettings) */.ftab-panel.panel-detached{border-top-left-radius:18px;margin-top:4px}.wrun-body.panel-detached{border-top-left-radius:16px;margin-top:4px}#actFilters.fstyle-pill,#actFilters.fstyle-square,#actFilters.fstyle-segment{border-bottom:none;padding-bottom:6px}.ftab .scoop{display:none}.ftab-panel{background:var(--card);border:1px solid var(--card-border);border-top-left-radius:0;border-radius:18px;padding:16px;position:relative;z-index:5;box-shadow:var(--card-shadow)}