@layer components{.pocket-tooltip{z-index:var(--z-popover);border:1.5px solid var(--p-ink);background:var(--p-sheet);max-width:min(260px,100vw - 16px);color:var(--p-ink);box-shadow:0 3px 0 var(--p-ink);overflow-wrap:anywhere;border-radius:10px;padding:6px 10px;font:600 13px/1.35 Figtree,sans-serif;position:fixed}.pocket-tabs{border-bottom:2px solid var(--p-ink);scrollbar-width:none;gap:4px;margin-bottom:20px;display:flex;overflow-x:auto}.pocket-tab{min-height:44px;color:var(--ps-muted);cursor:pointer;background:0 0;border:2px solid #0000;border-bottom:0;border-radius:12px 12px 0 0;flex-shrink:0;align-items:center;padding:10px 16px;font:700 14px/1.2 Bricolage Grotesque,sans-serif;text-decoration:none;transition:background-color .15s,color .15s;display:inline-flex}.pocket-tab:hover:not([data-selected],[aria-current=page]){color:var(--p-ink);background:var(--pf-display)}.pocket-tab:is([data-selected],[aria-current=page]){border-color:var(--p-ink);background:var(--p-yellow);color:var(--p-ink)}.pocket-tab svg{flex-shrink:0}.pocket-tab[role=tab]:focus-visible:not([data-focus]){box-shadow:none;outline:none}.pocket-tab-panel{min-width:0}.pocket-tab-count{background:var(--p-cobalt);min-width:17px;height:17px;color:var(--p-shell);border-radius:5px;place-items:center;padding:0 4px;font:750 10.5px/1 Figtree,sans-serif;display:inline-grid}.pocket-tab-group[data-variant=panel]{flex-direction:column;flex:1;min-width:0;min-height:0;display:flex;container-type:inline-size}.pocket-tabs-rail{border-bottom:1.5px solid var(--ps-line);flex:none}.pocket-pane-tabs{gap:2px;margin-bottom:-1.5px;padding:0 8px;display:flex;overflow:auto hidden}.pocket-tab-group[data-variant=panel] .pocket-tab{white-space:nowrap;background:0 0;border:0;border-bottom:3px solid #0000;border-radius:0;flex:1 1 0;justify-content:center;height:36px;min-height:0;padding:0;font-size:12.5px;line-height:1}.pocket-tab-label{align-items:center;gap:5px;margin-inline:-.5px;display:inline-flex}.pocket-tab-group[data-variant=panel] .pocket-tab:hover{color:var(--p-ink);background:0 0}.pocket-tab-group[data-variant=panel] .pocket-tab[data-selected]{border-bottom-color:var(--p-ink);background:0 0}.pocket-tab-group[data-variant=panel]>.pocket-tab-panels{flex-direction:column;flex:1;min-height:0;display:flex}.pocket-tab-group[data-variant=panel] .pocket-tab-panel{overscroll-behavior:contain;flex:1;min-height:0;padding:12px}@container (width<=280px){.pocket-tab-group[data-variant=panel] .pocket-tab svg{display:none}}@media (pointer:coarse){.pocket-tab-group[data-variant=panel] .pocket-tab{height:44px}}.pocket-segments{border:2px solid var(--p-ink);background:var(--pf-display);max-width:100%;box-shadow:inset 0 2px 0 color-mix(in srgb, var(--p-ink) 10%, transparent);border-radius:14px;gap:3px;padding:3px;display:inline-flex}.pocket-segment{min-height:38px;color:var(--p-ink);white-space:nowrap;cursor:pointer;border-radius:10px;justify-content:center;align-items:center;gap:6px;padding:6px 14px;font:650 13px/1.2 Bricolage Grotesque,sans-serif;transition:background-color .15s;display:inline-flex}.pocket-segment[data-checked]{background:var(--p-cobalt);color:#fff;box-shadow:0 2px 0 var(--p-ink)}.pocket-segment[data-disabled]{opacity:.5;cursor:not-allowed}.pocket-segment[aria-current]{cursor:default}.pocket-segments:not([data-variant=cobalt]){box-shadow:none;border-radius:12px;gap:2px}.pocket-segments:is([data-variant=line],[data-variant=swatch]){border-width:1.5px;border-color:var(--ps-line)}.pocket-segments[data-variant=stage]{background:var(--p-cobalt-deep)}.pocket-segments[data-fill]{display:flex}.pocket-segments:not([data-variant=cobalt])>.pocket-segment{border:1.5px solid #0000;border-radius:9px;min-height:30px;padding:0 12px;font:700 12.5px/1 Bricolage Grotesque,sans-serif}.pocket-segments[data-variant=yellow]>.pocket-segment{min-height:32px;padding:0 14px;font-size:13px}.pocket-segments[data-variant=line]>.pocket-segment{min-height:26px;padding:0 10px;font-size:12px}.pocket-segments[data-variant=stage]>.pocket-segment{min-height:28px;color:var(--p-shell);padding:0 10px;font-size:12px}.pocket-segments[data-fill]>.pocket-segment{flex:auto;min-width:0;padding:0 8px}.pocket-segments[data-variant=swatch]{--swatch-tile:40px;flex-wrap:wrap;gap:4px}.pocket-segments[data-variant=swatch]>.pocket-segment{width:var(--swatch-tile);height:var(--swatch-tile);flex:none;min-height:0;padding:0}.pocket-segments:not([data-variant=cobalt])>.pocket-segment:not([data-checked],[data-disabled]):hover{background:color-mix(in srgb, var(--p-ink) 8%, transparent)}.pocket-segments[data-variant=stage]>.pocket-segment:not([data-checked],[data-disabled]):hover{background:color-mix(in srgb, var(--p-shell) 14%, transparent)}.pocket-segments:not([data-variant=cobalt])>.pocket-segment[data-checked]{border-color:var(--p-ink);background:var(--p-sheet);color:var(--p-ink);box-shadow:0 2px 0 var(--p-ink)}.pocket-segments:is([data-variant=yellow],[data-variant=stage])>.pocket-segment[data-checked]{background:var(--p-yellow)}@media (width<=1180px){.pocket-segments[data-variant=yellow]:not([data-fill])>.pocket-segment{padding:0 10px}}@media (pointer:coarse){.pocket-segments[data-variant]>.pocket-segment{min-height:44px}.pocket-segments[data-variant=swatch]{--swatch-tile:44px}}@media (prefers-reduced-motion:reduce){.pocket-tab,.pocket-segment{transition:none}}}
