/* Shared public controls: real targets and immediate feedback, without click overlays. */
:is(.site-header,.content-header,.reading-footer,.reading-breadcrumb,.article-contents,.community-help,#main,.site-footer) :is(a[href],button,summary){
  touch-action:manipulation;
  -webkit-tap-highlight-color:#f3ede224;
}

/* Structural navigation gets a whole row; links inside prose keep their text-sized box. */
.content-page .article-contents ol a{
  display:flex;
  align-items:center;
  min-height:44px;
  padding:8px 6px;
  margin-inline:-6px;
  border-radius:8px;
  line-height:1.45;
}
.content-page .reading-footer nav a,.content-page .reading-breadcrumb a{
  display:inline-flex;
  align-items:center;
  min-height:44px;
  min-width:44px;
  padding-block:6px;
}
.content-page .community-help summary{
  min-height:44px;
  padding:8px 6px;
  margin-inline:-6px;
  border-radius:8px;
  line-height:1.5;
}

/* Header geometry stays fixed while its ink and surface acknowledge the pointer. */
:is(.site-header,.content-header) nav>a,
:is(.site-header .menu-toggle,.content-header .reading-menu),
.content-page :is(.article-contents ol a,.reading-footer nav a,.reading-breadcrumb a,.community-help summary),
#main :is(.reading-link,.text-link,.hero-explore,.expand-guide),
#main :is(.social-filters button,[role="tab"]),
.site-footer .footer-contact{
  transition:color 140ms ease-out,background-color 140ms ease-out,text-decoration-color 140ms ease-out,box-shadow 140ms ease-out;
}
:is(.site-header,.content-header) nav>a:active,
:is(.site-header .menu-toggle,.content-header .reading-menu):active{
  background-color:#f3ede218;
}
.content-page :is(.reading-footer nav a,.reading-breadcrumb a,.community-help summary):active,
#main :is(.reading-link,.text-link,.hero-explore,.expand-guide):active{
  background-color:#f3ede216;
}
.content-page .article-contents ol a:active{background-color:#211e1c16}
#main :is(.social-filters button,[role="tab"]):not(:disabled):active{
  background-color:#f3ede218;
}

/* Small press travel belongs to large actions, never to headers, tabs or artwork. */
#main :is(.button,.cafe-action,.reading-button),.staff-dialog .cafe-action{
  transition:color 140ms ease-out,background-color 140ms ease-out,box-shadow 140ms ease-out,transform 140ms ease-out,translate 120ms ease-out;
}
#main :is(.button,.cafe-action,.reading-button):hover,.staff-dialog .cafe-action:hover{
  transform:none;
  translate:0 0;
}
#main :is(.button,.cafe-action,.reading-button):not(:disabled):not([aria-disabled="true"]):active,
.staff-dialog .cafe-action:not(:disabled):not([aria-disabled="true"]):active{
  transform:none;
  translate:0 1px;
  box-shadow:inset 0 1px 3px #0003;
}
.content-page .youtube-play svg{transition:background-color 140ms ease-out,translate 120ms ease-out}
.content-page .youtube-play:not(:disabled):active svg{translate:0 1px;background-color:#413234}

/* Mouse hover complements the persistent selected and keyboard focus states. */
@media(hover:hover) and (pointer:fine){
  :is(.site-header,.content-header) nav>a:hover,
  :is(.site-header .menu-toggle,.content-header .reading-menu):hover{
    background-color:#f3ede20a;
  }
  :is(.site-header,.content-header) nav>a:not([aria-current]):hover{color:#f3ede2}
  .content-page :is(.reading-footer nav a,.reading-breadcrumb a,.community-help summary):hover,
  #main :is(.reading-link,.text-link,.hero-explore,.expand-guide):hover{
    background-color:#f3ede20a;
    text-decoration:underline;
    text-underline-offset:5px;
  }
  .content-page .article-contents ol a:hover{background-color:#211e1c0c;text-decoration:underline;text-underline-offset:5px}
  #main :is(.social-filters button,[role="tab"]):not(:disabled):hover{color:var(--annotation,var(--reading-rose,#d9a5a7))}
  #main :is(.button,.cafe-action,.reading-button):not(:disabled):not([aria-disabled="true"]):hover,
  .staff-dialog .cafe-action:not(:disabled):not([aria-disabled="true"]):hover{
    translate:0 -1px;
  }
  /* Press feedback takes precedence over hover, including a held mouse button. */
  :is(.site-header,.content-header) nav>a:active,
  :is(.site-header .menu-toggle,.content-header .reading-menu):active,
  .content-page :is(.reading-footer nav a,.reading-breadcrumb a,.community-help summary):active,
  #main :is(.reading-link,.text-link,.hero-explore,.expand-guide):active{background-color:#f3ede218}
  .content-page .article-contents ol a:active{background-color:#211e1c16}
  #main :is(.button,.cafe-action,.reading-button):not(:disabled):not([aria-disabled="true"]):active,
  .staff-dialog .cafe-action:not(:disabled):not([aria-disabled="true"]):active{translate:0 1px}
}

/* Reading position is ink on the existing paper, with no weight or spacing change. */
.content-page .article-contents ol a[aria-current="location"]{
  background-color:#211e1c12;
  color:#211e1c;
  text-decoration:underline;
  text-decoration-color:#211e1c;
  text-underline-offset:5px;
}

:is(.site-header,.content-header) :is(a,button):focus-visible,
.content-page :is(.reading-footer nav a,.reading-breadcrumb a,.community-help summary):focus-visible,
#main :is(.button,.cafe-action,.reading-button,.reading-link,.text-link,.hero-explore,.expand-guide,.social-filters button,[role="tab"]):focus-visible,
.staff-dialog .cafe-action:focus-visible{
  outline:2px solid var(--annotation,var(--reading-rose,#d9a5a7));
  outline-offset:4px;
}
.content-page .article-contents ol a:focus-visible{outline:2px solid #211e1c;outline-offset:2px}

html.motion-paused #main :is(.button,.cafe-action,.reading-button),
html.motion-paused .staff-dialog .cafe-action,
html.motion-paused .content-page .youtube-play svg{
  translate:none!important;
  transform:none!important;
}
html.motion-paused :is(.site-header,.content-header) :is(a,button),
html.motion-paused .content-page :is(.article-contents ol a,.reading-footer nav a,.reading-breadcrumb a,.community-help summary),
html.motion-paused #main :is(.button,.cafe-action,.reading-button,.reading-link,.text-link,.hero-explore,.expand-guide,.social-filters button,[role="tab"]),
html.motion-paused .staff-dialog .cafe-action,
html.motion-paused .content-page .youtube-play svg{transition:none!important}
@media(prefers-reduced-motion:reduce){
  :is(.site-header,.content-header) :is(a,button),
  .content-page :is(.article-contents ol a,.reading-footer nav a,.reading-breadcrumb a,.community-help summary),
  #main :is(.button,.cafe-action,.reading-button,.reading-link,.text-link,.hero-explore,.expand-guide,.social-filters button,[role="tab"]),
  .staff-dialog .cafe-action,.content-page .youtube-play svg{transition:none!important}
  #main :is(.button,.cafe-action,.reading-button),.staff-dialog .cafe-action,.content-page .youtube-play svg{translate:none!important;transform:none!important}
}
@media(forced-colors:active){
  :is(.site-header,.content-header) :is(a,button):focus-visible,
  .content-page :is(.article-contents ol a,.reading-footer nav a,.reading-breadcrumb a,.community-help summary):focus-visible,
  #main :is(.button,.cafe-action,.reading-button,.reading-link,.text-link,.hero-explore,.expand-guide,.social-filters button,[role="tab"]):focus-visible,
  .staff-dialog .cafe-action:focus-visible{outline-color:Highlight}
  :is(.site-header,.content-header) :is(nav>a,button):active,
  .content-page :is(.article-contents ol a,.reading-footer nav a,.reading-breadcrumb a,.community-help summary):active,
  #main :is(.social-filters button,[role="tab"]):not(:disabled):active{background:Highlight;color:HighlightText}
  #main :is(.button,.cafe-action,.reading-button):not(:disabled):active,
  .staff-dialog .cafe-action:not(:disabled):active{outline:2px solid Highlight;box-shadow:none}
  .content-page .article-contents ol a[aria-current="location"]{background:Canvas;color:LinkText;text-decoration:underline;text-decoration-color:LinkText}
}