:root { --ring: var(--ink); --ring-w: 3px; --ring-offset: 2px; --notch: 2px; }
:is(.field, .site-header, .site-footer, .jump-dialog, .bella-panel, dialog.zoom, .signup, .post-head, .post-next,
  .post-aside, .topic-head, .topic-start, .topic-bridge, .cs-moment, .story--lead, .tec-quote, .h-follow, .pub-mast,
  .ent-hero, .ind-hero, main.sys, .lf-sec--dark, .follow-panel, .psy-test, .hub-doors, .site-banner, .wc) { --ring: var(--number); }
:is(.paper, .sheet, .li-wrap, .cc-screen, .offclock-yard, .well-initials, .chain-link, .h-sys-compound, .bella-tip) { --ring: var(--ink); }
:is(.li-wrap, .spot-strip, .rp-table-wrap, .syl-frame, .jump-list) { --ring-offset: calc(var(--ring-w) * -1 - 2px); }
.wc-mark { --ring-offset: -1px; }
.syl { --ring: var(--syl-ribbon-ink, #155f8c); }
:is(.syl-dex, .syl-frame) { --ring: var(--syl-pink, #f4a3c4); }

:focus-visible {
  outline: var(--ring-w) solid var(--ring);
  outline-offset: var(--ring-offset);
}
.bella-launch:focus-visible { outline-color: var(--ink); box-shadow: 0 0 0 7px var(--bone); }
.to-top:focus-visible { outline-color: var(--ink); box-shadow: 0 0 0 7px var(--bone), 0 6px 18px rgba(0, 0, 0, .35); }

:where(button, summary, [role="tab"], a.cap, a.h-post, a.pf-site, a.pf-story, a.hub-route, a.pboard-tile, a.topic-link,
  a.story-topic, a.li-card, a.fan-site, a.cv-contact-li, a.cv-bella-btn, a.co-more, a.pv-more, a.psy-more,
  .post-topics a, .askp-topics a, .sysp-jump a, .cs-pillar a, .cs-links a, .cs-next-list a,
  .topic-all a, .nf-evo a, .well-evo-line a, .hub-doors a, .ind-tiles a, .ent-tiles a, .rcpt-row a, .board-piece,
  .sys-tile, .sys-keep-item a, .site-banner-cta, .footer-li, .to-top, .bella-launch, .header-bella):active:not(:disabled, [aria-disabled="true"], .btn, .pad-btn, .nav-resume, .nav-li-btn, .resume-piece, .social-piece) {
  translate: 0 var(--notch);
}
@media (prefers-reduced-motion: no-preference) {
  :where(button, summary, [role="tab"], a.cap, a.h-post, a.pf-site, a.pf-story, a.hub-route, a.pboard-tile, a.topic-link,
    a.story-topic, a.li-card, a.fan-site, a.cv-contact-li, a.cv-bella-btn, .post-topics a, .askp-topics a, .sysp-jump a,
    .cs-pillar a, .cs-links a, .cs-next h2 a, nav[class*="-switch"] a, .topic-all a, .nf-evo a, .hub-doors a, .ind-tiles a, .ent-tiles a,
    .rcpt-row a, .board-piece, .sys-tile, .sys-keep-item a, .site-banner-cta, .footer-li, .bella-launch) {
    transition-property: translate, transform, background-color, color, box-shadow;
    transition-duration: var(--m-tap);
    transition-timing-function: var(--ease-out);
  }
  :where(button, summary, [role="tab"], a):active { transition-duration: 0ms; }
}

:where([role="tab"][aria-selected="true"], button[aria-pressed="true"]):not(:disabled) { translate: 0 var(--notch); }
@media (prefers-reduced-motion: no-preference) {
  :is([role="tab"][aria-selected="true"], [aria-pressed="true"], details[open] > summary):focus:not(:focus-visible) {
    animation: piece-lock var(--m-flash) steps(2, end);
  }
  @keyframes piece-lock { 0% { opacity: .55; } 100% { opacity: 1; } }
}

@media (hover: hover) {
  :where(a.h-post, a.topic-link, a.story-topic, a.pboard-tile, a.hub-route, a.receipt-open, a.heatmap-img, a.cs-phone,
    a.pf-story--down, a.co-more, a.pv-more, a.psy-more, .topic-start-link):hover { outline: 2px solid var(--ring); outline-offset: 0; }
  :where(nav[class$="-crumb"] a, .sys-keep-item a, .sys-band-more a, a.footer-name, .site-banner-more):hover {
    background: color-mix(in srgb, currentColor 14%, transparent); border-radius: var(--radius);
  }
  .site-banner-cta:hover { filter: brightness(1.08); }
}

:is(button, input, select, textarea):disabled, [aria-disabled="true"] { cursor: not-allowed; }
:is(button, input, select, textarea):disabled { opacity: .55; }
[aria-busy="true"], [aria-busy="true"] *, [aria-busy="true"] :disabled { cursor: progress; }

nav[class$="-crumb"] a { min-width: 44px; justify-content: center; }
:is(button, summary, [role="tab"], .btn, .pad-btn) { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }