/* ============================================================================
   Symbol & Emoji Copy-Paste Hub — tool layer over base.css
   base.css supplies reset, type, forms, buttons, chips, badges, panels,
   tables, header, footer, focus rings. This file adds the accent and only
   what is unique to this tool: the search bar and the copy-tile grid.

   Accent — indigo-violet, measured against base.css surfaces (WCAG relative
   luminance):
     dark  #7a78e2  5.1:1 on --bg   4.7:1 on --surface   5.2:1 on --bg-sunk
     light #0a0896  13.5:1 on --bg   14.1:1 on --surface   12.4:1 on --bg-sunk
   Both clear the 4.5:1 text floor on all three surfaces in both themes.
   ========================================================================= */
:root { --accent: #7a78e2; --accent-dim: rgba(122, 120, 226, 0.14); }
@media (prefers-color-scheme: light) {
  :root { --accent: #0a0896; --accent-dim: rgba(10, 8, 150, 0.10); }
}

.brand svg .mark-bg { fill: var(--accent); }
.brand svg .mark-fg { fill: var(--on-accent); }

/* base has no visually-hidden helper; the copy live-region needs one */
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ============================================================================
   Search bar
   ========================================================================= */

.symbol-search { margin-bottom: 1.25rem; }
.symbol-search .field { max-width: 28rem; }
.symbol-search input[type="search"] { background: var(--surface); }

.search-count {
  margin: 0.5rem 0 0;
  font-size: 0.8125rem;
  color: var(--text-dim);
}

.search-empty {
  padding: 1.5rem;
  text-align: center;
  color: var(--text-dim);
  background: var(--bg-sunk);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

/* ============================================================================
   Category jump chips
   ========================================================================= */

.cat-jump { margin-bottom: 1.75rem; }
.cat-jump .chips { row-gap: 0.5rem; }

/* ============================================================================
   Category sections + tile grid
   The glyph is the whole point, so it stays large and the name/codepoint is
   reserved space that is present but invisible until hover/focus — nothing
   shifts, nothing overlaps a neighbour, nothing can push the page wider.
   ========================================================================= */

.symbol-sections .symbol-section { margin-bottom: 2.25rem; }
.symbol-section h2 { margin-top: 0; margin-bottom: 0.85rem; }
.symbol-section:first-child h2 { margin-top: 0; }

.tile-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(4.25rem, 1fr));
  gap: 0.5rem;
}

.tile {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.2rem;
  min-height: 5.75rem;
  padding: 0.5rem 0.35rem 0.45rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  color: var(--text);
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  overflow: hidden;
  transition: border-color 0.12s ease, background-color 0.12s ease;
}
.tile:hover, .tile:focus-visible { border-color: var(--accent); background: var(--accent-dim); }

.tile-glyph {
  font-size: 1.75rem;
  line-height: 1.15;
  font-feature-settings: normal; /* emoji must not inherit tabular-num features */
}
.tile-wide .tile-glyph {
  font-family: var(--mono);
  font-size: 0.8125rem;
  line-height: 1.3;
  white-space: nowrap;
}
.tile-wide { grid-column: span 2; }

.tile-cap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.05rem;
  width: 100%;
  opacity: 0;
  transition: opacity 0.12s ease;
}
.tile:hover .tile-cap, .tile:focus-visible .tile-cap { opacity: 1; }

.tile-cap-name {
  max-width: 100%;
  font-size: 0.5625rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--text-faint);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tile-cap-cp {
  font-family: var(--mono);
  font-size: 0.5rem;
  color: var(--text-faint);
}

.tile-copied {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  font-family: var(--mono);
  font-size: 0.6875rem;
  font-weight: 700;
  color: var(--ok);
  background: var(--ok-bg);
  border-radius: inherit;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.12s ease;
}
.tile.is-copied { border-color: var(--ok); }
.tile.is-copied .tile-copied { opacity: 1; }
.tile.is-copied .tile-glyph, .tile.is-copied .tile-cap { opacity: 0; }

.tile.is-copy-failed { border-color: var(--err); }
.tile.is-copy-failed .tile-copied {
  content: none;
  opacity: 1;
  color: var(--err);
  background: var(--err-bg);
}
.tile.is-copy-failed .tile-glyph, .tile.is-copy-failed .tile-cap { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  .tile, .tile-cap, .tile-copied { transition: none; }
}

/* ============================================================================
   Article furniture shared with the reference-content sections
   ========================================================================= */

.section { max-width: 74ch; }
.section table { max-width: none; }

.callout {
  background: var(--bg-sunk);
  border: 1px solid var(--line);
  border-left: 2px solid var(--accent);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 1rem 1.1rem;
  margin: 0 0 1.2em;
  font-size: 0.9375rem;
  color: var(--text-dim);
}
.callout p:last-child { margin-bottom: 0; }
.callout strong { color: var(--text); }

.pagelinks {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr));
  gap: 0.75rem;
  margin-top: 1.25rem;
}
.pagelinks a {
  display: block;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0.95rem 1.15rem;
  text-decoration: none;
}
.pagelinks a:hover { border-color: var(--accent); }
.pagelinks strong { display: block; color: var(--accent); margin-bottom: 0.15rem; }
.pagelinks span { display: block; color: var(--text-dim); font-size: 0.875rem; }

.tag-glyph {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.6em;
  padding: 0.05em 0.25em;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 4px;
  font-size: 1.05em;
}