/* emoji page consistency pass: same components as every other tool */
#page-emojipack .ep-drop{border:3px dashed color-mix(in srgb,var(--text),transparent 80%);background:rgba(0,0,0,.1);padding:2.8rem 1rem}
#page-emojipack .ep-drop:hover,#page-emojipack .ep-drop.over{border-color:var(--accent);background:color-mix(in srgb,var(--accent),transparent 94%)}
#page-emojipack .ep-drop-icon{font-size:2.6rem;margin-bottom:.45rem}
#page-emojipack :is(.ep-btn,.ep-mini-copy,.ep-draw-close,.ep-draw-tool,.ep-draw-size-btn){background:linear-gradient(180deg,color-mix(in srgb,var(--btn2-bg),#fff 8%),var(--btn2-bg));color:#fff;border:3px solid;border-top-color:var(--btn2-hi);border-left-color:var(--btn2-hi);border-bottom-color:var(--btn2-lo);border-right-color:var(--btn2-lo);border-radius:3px;text-shadow:1px 1px 0 rgba(0,0,0,.7);transition:all .15s ease}
#page-emojipack :is(.ep-btn,.ep-mini-copy,.ep-draw-close,.ep-draw-tool,.ep-draw-size-btn):hover{filter:brightness(1.12);background:linear-gradient(180deg,color-mix(in srgb,var(--btn2-bg),#fff 8%),var(--btn2-bg))}
#page-emojipack .ep-draw-size-btn{border-width:2px}
#page-emojipack :is(.ep-draw-tool.active,.ep-draw-size-btn.active){border-color:var(--accent);background:color-mix(in srgb,var(--accent),transparent 82%);color:#fff;text-shadow:1px 1px 0 rgba(0,0,0,.7);font-weight:400;box-shadow:none}
#page-emojipack .ep-btn.danger{color:#fca5a5}
#page-emojipack .ep-btn.danger:hover{background:#dc2626;color:#fff}
#page-emojipack .ep-btn.primary{background:linear-gradient(180deg,color-mix(in srgb,var(--accent),#fff 14%),color-mix(in srgb,var(--accent),#000 24%));color:#fff;border-top-color:color-mix(in srgb,var(--accent),#fff 45%);border-left-color:color-mix(in srgb,var(--accent),#fff 45%);border-bottom-color:color-mix(in srgb,var(--accent),#000 45%);border-right-color:color-mix(in srgb,var(--accent),#000 45%)}
#page-emojipack .ep-mini-copy.copied{background:#22c55e;color:#0a1a0a;border-color:#000}
#page-emojipack .ep-draw-modal{background:var(--panel)}
#page-emojipack .ep-counts .ep-stat{background:rgba(0,0,0,.25);border:2px solid var(--panel-border);border-radius:3px}

/* ════════════════════════════════════════════════════════
   VANILLA GLYPH LIBRARY v3 — flat always-open sections
   (cape-builder styling). Rendered by tool-emoji.js glBuild()
   into #glGroups; #glCard gets .gls-mode so these rules apply.
   Scoped to #page-colorcode so nothing leaks to the emoji page.
   ════════════════════════════════════════════════════════ */
#page-colorcode #glGroups{display:flex;flex-direction:column;gap:.6rem}
/* Section box: chunky pixel border + tinted panel, like .cb-skin-section.
   content-visibility keeps offscreen sections from painting on scroll. */
#page-colorcode .gls-section{background:rgba(0,0,0,.15);border:2px solid var(--input-brd);padding:.55rem;content-visibility:auto;contain-intrinsic-size:auto 120px}
#page-colorcode .gls-section[hidden]{display:none}
/* Header row: icon + bold pixel label + count badge */
#page-colorcode .gls-head{display:flex;align-items:center;gap:.5rem;margin-bottom:.5rem;padding-bottom:.45rem;border-bottom:2px solid color-mix(in srgb,var(--input-brd),transparent 30%);scroll-margin-top:.6rem}
#page-colorcode .gls-head-ic{width:26px;height:26px;image-rendering:pixelated;image-rendering:crisp-edges;flex-shrink:0;background:rgba(0,0,0,.3);border:1px solid var(--input-brd);padding:2px;box-sizing:border-box}
#page-colorcode .gls-head-label{font-family:var(--mc);font-size:.6rem;color:var(--text);text-shadow:1px 1px 0 #000;letter-spacing:.05em;flex:1;min-width:0}
#page-colorcode .gls-head-badge{font-family:var(--mc);font-size:.5rem;color:var(--accent);background:color-mix(in srgb,var(--accent),transparent 86%);border:1px solid color-mix(in srgb,var(--accent),transparent 55%);padding:.15rem .4rem;text-shadow:1px 1px 0 #000;flex-shrink:0}
/* Dense icon grid (Cooper 7/22): bare cells — no box/border/name label.
   Each cell = pixelated icon + one tiny "what you type" line (hex codepoint).
   ~44-48px tap targets, tight gap, many per row → much shorter list. */
#page-colorcode .gls-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(46px,1fr));gap:.2rem}
#page-colorcode .gls-card{position:relative;display:flex;flex-direction:column;align-items:center;gap:2px;padding:4px 2px 3px;background:none;border:2px solid transparent;cursor:pointer;text-align:center;font-family:var(--mc);transition:border-color .12s,background .12s;-webkit-appearance:none;appearance:none;border-radius:0}
#page-colorcode .gls-card.gls-hide{display:none}
#page-colorcode .gls-card:hover,#page-colorcode .gls-card:focus-visible{border-color:var(--accent);background:color-mix(in srgb,var(--accent),transparent 88%);outline:none}
#page-colorcode .gls-card:active{background:color-mix(in srgb,var(--accent),transparent 80%)}
#page-colorcode .gls-card-img{width:32px;height:32px;image-rendering:pixelated;image-rendering:crisp-edges;flex-shrink:0}
/* Tiny typeable-code line under the icon */
#page-colorcode .gls-card-code{font-family:var(--mc);font-size:.4rem;line-height:1;color:var(--text-mut);letter-spacing:.02em;text-shadow:1px 1px 0 #000}
#page-colorcode .gls-card:hover .gls-card-code,#page-colorcode .gls-card:focus-visible .gls-card-code{color:var(--accent)}
/* Copy feedback: green outline + checkmark badge over the icon — no name
   label needed, no layout shift */
#page-colorcode .gls-card.copied{border-color:#22c55e;background:rgba(34,197,94,.16)}
#page-colorcode .gls-card.copied .gls-card-code{color:#86efac}
#page-colorcode .gls-card.copied::after{content:'✓';position:absolute;top:-2px;right:-2px;font-family:var(--mc);font-size:.5rem;line-height:1;color:#0a1a0a;background:#22c55e;padding:1px 3px;pointer-events:none}
#page-colorcode .gls-card.copyfail{border-color:#dc2626;background:rgba(220,38,38,.16)}
#page-colorcode .gls-card.copyfail::after{content:'✕';position:absolute;top:-2px;right:-2px;font-family:var(--mc);font-size:.5rem;line-height:1;color:#fff;background:#dc2626;padding:1px 3px;pointer-events:none}
@media(max-width:600px){
  #page-colorcode .gls-grid{grid-template-columns:repeat(auto-fill,minmax(44px,1fr));gap:.15rem}
  #page-colorcode .gls-head-ic{width:22px;height:22px}
}