/* Index of Marks — interaction content and motion.
   Shared control and popover geometry lives in ui-system.css. */

.icon-button.is-shortcut-flash {
  animation: iom-shortcut-control 220ms cubic-bezier(.2,.8,.2,1);
}
.icon-button.is-shortcut-flash > svg,
.icon-button.is-shortcut-flash > span {
  animation: iom-shortcut-glyph 220ms cubic-bezier(.2,.8,.2,1);
}
@keyframes iom-shortcut-control {
  0% { transform: scale(1); }
  45% { transform: scale(.95); background: color-mix(in srgb, var(--fg) 9%, transparent); }
  100% { transform: scale(1); }
}
@keyframes iom-shortcut-glyph {
  0% { transform: scale(1); }
  45% { transform: scale(1.05); }
  100% { transform: scale(1); }
}

html[data-focus-mode="true"] .site-header,
html[data-focus-mode="true"] .site-footer,
html[data-focus-mode="true"] [data-hover-name] {
  opacity:0 !important;
  pointer-events:none !important;
}
html[data-focus-mode="true"] .site-header { transform:translate3d(0,-8px,0); }
html[data-focus-mode="true"] .site-footer { transform:translate3d(0,8px,0); }
.site-header,
.site-footer,
[data-hover-name] {
  transition:opacity 180ms ease, transform 220ms cubic-bezier(.2,.8,.2,1);
}

.symbol-card.is-keyboard-target .symbol-link {
  outline:1px solid currentColor;
  outline-offset:-1px;
}
.iom-mode-status { display:none !important; }

/* Shortcuts uses the same 300px shell as Color and Play, presented modally only
   because it is opened from the keyboard rather than from an anchored button. */
.iom-shortcuts-overlay[hidden],
.iom-play-menu[hidden] { display:none !important; }
.iom-shortcuts-overlay {
  position:fixed;
  inset:0;
  z-index:5000;
  display:grid;
  place-items:center;
  padding:20px;
  background:color-mix(in srgb, var(--bg) 72%, transparent);
  -webkit-backdrop-filter:blur(16px) saturate(1.04);
  backdrop-filter:blur(16px) saturate(1.04);
  opacity:0;
  transition:opacity 150ms ease;
}
.iom-shortcuts-overlay.is-open { opacity:1; }
.iom-shortcuts-panel {
  max-height:min(620px, calc(100svh - 40px));
  max-height:min(620px, calc(100dvh - 40px));
  overflow:auto;
  outline:0;
  transform:translateY(6px) scale(.985);
  transition:transform 170ms cubic-bezier(.2,.8,.2,1);
}
.iom-shortcuts-overlay.is-open .iom-shortcuts-panel { transform:translateY(0) scale(1); }
.iom-shortcuts-close {
  font:inherit;
  font-size:22px;
  line-height:1;
}
.iom-shortcuts-list { padding:6px 0; }
.iom-shortcut-row {
  min-height:39px;
  display:grid;
  grid-template-columns:68px minmax(0,1fr);
  align-items:center;
  gap:12px;
  padding:0 12px;
  border-bottom:1px solid var(--iom-line-faint);
  font-size:11px;
}
.iom-shortcut-row:last-child { border-bottom:0; }
.iom-shortcut-row kbd,
.iom-play-menu kbd {
  font:inherit;
  font-size:10px;
  font-variant-numeric:tabular-nums;
  opacity:.62;
}
.iom-shortcut-row kbd { font-weight:600; opacity:1; }

/* Play content. The shell, header and close geometry are canonical. */
.iom-play-menu {
  position:fixed;
  z-index:4200;
  padding:0;
  opacity:0;
  transform:translateY(-7px) scale(.975);
  transform-origin:top right;
  transition:opacity 140ms ease, transform 180ms cubic-bezier(.16,1,.3,1);
}
.iom-play-menu.is-open {
  opacity:1;
  transform:translateY(0) scale(1);
}
.iom-play-modes { padding:4px; }
.iom-play-menu .iom-play-modes > button {
  width:100%;
  min-height:42px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:0 9px;
  border:0;
  border-radius:8px;
  background:transparent;
  color:var(--fg);
  font:inherit;
  font-size:11px;
  text-align:left;
  cursor:pointer;
  transition:background-color 130ms ease, transform 130ms ease;
}
.iom-play-menu .iom-play-modes > button[aria-current="true"] {
  background:color-mix(in srgb, var(--fg) 9%, transparent);
  font-weight:600;
}
.iom-play-menu .iom-play-modes > button:active { transform:scale(.985); }
.iom-play-menu kbd { min-width:20px; text-align:right; }

.iom-play-density {
  margin:0;
  padding:9px 8px 8px;
  border-top:1px solid var(--iom-line);
}
.iom-play-density-label {
  display:block;
  padding:0 2px 7px;
  font-size:10px;
  font-weight:600;
  line-height:1;
  opacity:.68;
}
.iom-play-density-options {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:5px;
}
.iom-play-density-options button {
  width:100%;
  min-height:34px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0 5px;
  border:1px solid var(--iom-line-strong);
  border-radius:8px;
  background:transparent;
  color:var(--fg);
  font:inherit;
  font-size:10px;
  cursor:pointer;
}
.iom-play-density-options button.is-active {
  border-color:var(--fg);
  background:var(--fg);
  color:var(--bg);
}

@media (hover:hover) and (pointer:fine) {
  .iom-play-menu .iom-play-modes > button:hover,
  .iom-play-menu .iom-play-density-options button:not(.is-active):hover {
    background:color-mix(in srgb, var(--fg) 8%, transparent);
  }
  .iom-play-density-options button.is-active:hover {
    background:var(--fg);
    color:var(--bg);
  }
}

.iom-slideshow-context {
  position:fixed;
  left:50%;
  bottom:max(18px, env(safe-area-inset-bottom));
  z-index:4;
  max-width:calc(100vw - 40px);
  padding:7px 10px;
  background:color-mix(in srgb, var(--bg) 72%, transparent);
  -webkit-backdrop-filter:blur(12px);
  backdrop-filter:blur(12px);
  color:var(--fg);
  font-size:10px;
  line-height:1.2;
  letter-spacing:.005em;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  pointer-events:none;
  opacity:0;
  transform:translate3d(-50%,5px,0);
  transition:opacity 160ms ease, transform 190ms cubic-bezier(.2,.8,.2,1);
}
.iom-slideshow-context.is-visible {
  opacity:1;
  transform:translate3d(-50%,0,0);
}

@media (max-width:760px) {
  .iom-shortcuts-overlay { padding:10px; }
  .iom-shortcuts-panel {
    max-height:calc(100svh - 24px);
    max-height:calc(100dvh - 24px);
  }
  .iom-shortcut-row { grid-template-columns:58px minmax(0,1fr); min-height:40px; padding-inline:11px; }
  .iom-play-menu .iom-play-modes > button { min-height:44px; font-size:12px; }
  .iom-play-density-options button { min-height:42px; font-size:11px; }
  .iom-slideshow-context { bottom:max(14px, env(safe-area-inset-bottom)); max-width:calc(100vw - 24px); }
}

@media (prefers-reduced-motion:reduce) {
  .icon-button.is-shortcut-flash,
  .icon-button.is-shortcut-flash > svg,
  .icon-button.is-shortcut-flash > span,
  .iom-shortcuts-overlay,
  .iom-shortcuts-panel,
  .iom-play-menu,
  .iom-slideshow-context,
  .site-header,
  .site-footer,
  [data-hover-name] {
    animation:none !important;
    transition:none !important;
  }
}