/* Index of Marks — canonical public UI system.
   Owns line tokens, shared control mechanics/geometry, focus/tooltips and
   floating-surface geometry. Component files
   own content layout only. */

:root {
  --iom-line-faint: color-mix(in srgb, var(--fg) 7%, transparent);
  --iom-line: color-mix(in srgb, var(--fg) 14%, transparent);
  --iom-line-strong: color-mix(in srgb, var(--fg) 26%, transparent);
  --iom-control-size: 40px;
  --iom-control-radius: 9px;
  --iom-popover-width: 300px;
  --iom-popover-radius: 12px;
  --iom-popover-head-height: 48px;
  --iom-popover-shadow: 0 18px 46px color-mix(in srgb, var(--fg) 14%, transparent);
  --iom-tooltip-bg: #111111;
  --iom-tooltip-fg: #ffffff;
}

/* Structural framing is intentionally quieter than controls. */
.site-header,
.detail-header,
.collection-status,
.collection-toolbar,
.symbol-grid,
.symbol-card,
.symbol-info,
.symbol-stage,
.site-footer,
.site-footer-masthead {
  border-color: var(--iom-line) !important;
}

/* One control geometry across collection and detail. */
.icon-button,
.detail-neighbor {
  width: var(--iom-control-size);
  height: var(--iom-control-size);
  min-width: var(--iom-control-size);
  min-height: var(--iom-control-size);
  border: 1px solid var(--iom-line-strong);
  border-radius: var(--iom-control-radius);
  background: var(--bg);
}

.search-input {
  height: var(--iom-control-size);
  min-height: var(--iom-control-size);
  border: 1px solid var(--iom-line-strong);
  border-radius: var(--iom-control-radius);
  background: var(--bg);
  transition: width .26s var(--ease), border-color 140ms ease, box-shadow 160ms ease;
}

/* Open controls use the same figure/ground inversion in Index and Mark detail.
   Invert itself is a direct pressed action, not an open control, so aria-pressed
   intentionally does not participate in this active-surface rule. */
.icon-button:hover,
.icon-button.is-active,
.icon-button[aria-expanded="true"] {
  background: var(--fg);
  color: var(--bg);
}

.detail-neighbor {
  display: grid;
  place-items: center;
  color: var(--fg);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  pointer-events: auto;
  transition: transform .22s var(--ease), background-color .22s var(--ease), color .22s var(--ease);
}
.detail-neighbor svg { width: 16px; height: 16px; }
.detail-neighbor:hover,
.detail-neighbor:focus-visible {
  background: var(--fg);
  color: var(--bg);
}

.icon-button {
  position: relative;
  display: grid;
  place-items: center;
  padding: 0;
  cursor: pointer;
  transition: background-color 140ms ease, color 140ms ease, border-color 140ms ease,
    box-shadow 160ms ease, transform 140ms cubic-bezier(.2,.8,.2,1);
}
.icon-button svg {
  width: 20px;
  height: 20px;
  overflow: visible;
}
.icon-button .invert-symbol,
.icon-button .color-menu-symbol,
.icon-button .slideshow-button-symbol {
  width: 20px;
  height: 20px;
}
.icon-button > svg,
.icon-button > span {
  transform-origin: 50% 50%;
  transition: transform 160ms cubic-bezier(.2,.8,.2,1), opacity 140ms ease;
}
.icon-button:active,
.detail-neighbor:active { transform: scale(.97); }

.search-input:focus-visible {
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--fg) 16%, transparent);
}

.icon-button:focus-visible,
.search-input:focus-visible,
.detail-neighbor:focus-visible,
.palette-hex-input:focus-visible,
.palette-family select:focus-visible,
.palette-buttons button:focus-visible,
.iom-play-menu button:focus-visible,
.iom-shortcuts-close:focus-visible {
  outline: 2px solid var(--fg) !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 2px var(--bg);
}

/* Canonical toolbar tooltip: mechanics and high-contrast skin live together so
   active palettes cannot leak unreadable colors into labels. */
.icon-button[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  z-index: 120;
  width: max-content;
  max-width: min(260px, calc(100vw - 28px));
  padding: 6px 9px;
  border: 1px solid var(--iom-tooltip-bg);
  border-radius: 7px;
  background: var(--iom-tooltip-bg);
  color: var(--iom-tooltip-fg);
  box-shadow: 0 4px 14px rgb(0 0 0 / 18%);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: -.01em;
  line-height: 1;
  opacity: 0;
  pointer-events: none;
  white-space: nowrap;
  transform: translate(-50%, -4px);
  transition: opacity 120ms var(--ease), transform 180ms var(--ease);
}
.icon-button[data-theme-toggle][data-tooltip]::after { content: "Invert colors"; }
.icon-button[data-tooltip-align="end"]::after {
  right: -1px;
  left: auto;
  transform: translateY(-4px);
}
.icon-button[data-tooltip]:focus-visible::after {
  opacity: 1;
  transform: translate(-50%, 0);
}
.icon-button[data-tooltip-align="end"]:focus-visible::after { transform: translateY(0); }
.icon-button[data-tooltip][aria-expanded="true"]::after { display: none; }

@media (hover: hover) and (pointer: fine) {
  .icon-button[data-tooltip]:hover::after {
    opacity: 1;
    transform: translate(-50%, 0);
  }
  .icon-button[data-tooltip-align="end"]:hover::after { transform: translateY(0); }
  html:not([data-lines-hidden="true"]) .icon-button:hover:not(.is-active):not([aria-expanded="true"]) {
    background: color-mix(in srgb, var(--fg) 8%, transparent);
    color: var(--fg);
  }
  .icon-button:hover > svg,
  .icon-button:hover > span { transform: scale(1.05); }
}

/* Canonical floating surface. Color, Play and Shortcuts share exactly the same
   shell; component CSS only defines their internal content. */
.palette-popover,
.iom-play-menu,
.iom-shortcuts-panel {
  width: min(var(--iom-popover-width), calc(100vw - 28px));
  box-sizing: border-box;
  overflow: hidden;
  border: 1px solid var(--iom-line-strong) !important;
  border-radius: var(--iom-popover-radius);
  background: color-mix(in srgb, var(--bg) 86%, transparent) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.04);
  backdrop-filter: blur(18px) saturate(1.04);
  color: var(--fg);
  box-shadow: var(--iom-popover-shadow);
}

.palette-popover-head,
.iom-play-menu-head,
.iom-shortcuts-panel header {
  box-sizing: border-box;
  min-height: var(--iom-popover-head-height);
  height: var(--iom-popover-head-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 8px 9px 8px 12px;
  border-bottom: 1px solid var(--iom-line);
}

.palette-title,
.iom-play-title,
.iom-shortcuts-panel header strong {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: 0;
}

.palette-close,
.iom-play-close,
.iom-shortcuts-close {
  width: 32px !important;
  height: 32px !important;
  min-width: 32px;
  min-height: 32px !important;
  display: grid !important;
  place-items: center;
  flex: none;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 8px !important;
  background: transparent !important;
  color: var(--fg) !important;
  cursor: pointer;
  transition: background-color 140ms ease, transform 140ms cubic-bezier(.2,.8,.2,1);
}
.palette-close svg,
.iom-play-close svg { width: 15px; height: 15px; fill: currentColor; }

@media (hover: hover) and (pointer: fine) {
  .palette-close:hover,
  .iom-play-close:hover,
  .iom-shortcuts-close:hover {
    background: color-mix(in srgb, var(--fg) 8%, transparent) !important;
  }
}

.palette-popover,
.palette-popover[hidden] {
  display: block !important;
  transform-origin: top right;
  transition: opacity 160ms ease, transform 190ms cubic-bezier(.16,1,.3,1),
    visibility 0s linear 0s, box-shadow 190ms ease;
}
.palette-popover:not([hidden]) {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}
.palette-popover[hidden] {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-8px) scale(.975);
  box-shadow: 0 8px 18px color-mix(in srgb, var(--fg) 5%, transparent);
  transition-delay: 0s, 0s, 190ms, 0s;
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .palette-popover,
  .iom-play-menu,
  .iom-shortcuts-panel { background: var(--bg) !important; }
}

/* Swap is redundant with the dedicated Invert action. */
.palette-swap { display: none !important; }

@media (max-width: 760px) {
  /* On phones, anchored menus read as screen-width sheets with a quiet 10px gutter. */
  .palette-popover,
  .iom-play-menu,
  .iom-shortcuts-panel { width: calc(100vw - 20px); }
  .palette-popover,
  .palette-popover[hidden] { transform-origin: top center; }
}

@media (prefers-reduced-motion: reduce) {
  .icon-button,
  .icon-button > svg,
  .icon-button > span,
  .search-input,
  .palette-close,
  .iom-play-close,
  .iom-shortcuts-close,
  .palette-popover,
  .palette-popover[hidden],
  .palette-buttons button,
  .palette-family,
  .palette-family select {
    transition-duration: .01ms !important;
  }
}