/* ============================================================
   Glyph Specimen — card-catalog styling for a type/icon gallery
   Palette: paper, ink, pine (accent), amber (highlight)
   ============================================================ */

:root {
  --paper: #faf9f5;
  --surface: #ffffff;
  --ink: #1c1b19;
  --ink-soft: #6b675e;
  --line: #ddd9ce;
  --pine: #2f5d50;
  --pine-dark: #23453b;
  --amber: #d9a441;
  --radius: 3px;
}


html { scroll-behavior: smooth; }



a { color: inherit; }

.wrap {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 24px 10px;
}

/* ---------- Header / hero ---------- */



.eyebrow {
  
 font-family:soraneu; font-size:12px; letter-spacing:0.14em;
  text-transform:uppercase; color:var(--ink-soft);
  display:inline-flex; align-items:center; gap:8px; margin-bottom:14px;
}

.hero h1 {
  
  font-weight: 400;
  font-size: clamp(34px, 5vw, 52px);
  margin: 0 0 10px;
  letter-spacing: -0.01em;
}

.hero p.sub {
  max-width: 100%;
  color: var(--ink-soft);
  font-size: 16px;
  margin: 0 0 15px; 
  text-align:center;
}

/* Card-catalog styled search slot */
.search-box {
  display: flex;
  align-items: center;
  gap: 12px;
  position:relative; flex:1; min-width:150px; max-width:1220px;
}

.search-box svg {
  position:absolute; left:14px; top:50%; transform:translateY(-50%);
  width:14px; height:14px; color:var(--ink-soft);
}

.search-box input {
  width:100%; font-family:soraneu; font-size:13px; color:#FFF;
  background:#000; border:0px solid var(--line); border-radius:999px;
   outline:none;
}

.search-box .count {
 font-family:soraneu;
  font-size: 12px;
  color: var(--ink-soft);
  padding: 4px 12px;
  border-left: 1px solid var(--line);
  white-space: nowrap;
}

/* ---------- Category tabs ---------- */

.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  margin: 26px 0 8px;
  font-family:soraneu;
  font-size: 12.5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.tabs button {
  font-family:soraneu; font-size:11.5px; letter-spacing:0.02em; text-transform:uppercase;
  background:#333; border:1px solid #000; color:#FFF;
  padding:8px 14px; border-radius:999px; cursor:pointer; transition:all .15s ease;
}

.tabs button:hover { color: #ccc; }

.tabs button.active {
  background:#000; color:#FFF; border-color:#CCC;
}

/* ---------- Grid & specimen cards ---------- */

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
  gap: 16px;
  margin-top: 20px;
}

.card {
  position: relative;
  background: #000;
  border: 1px solid #444;
  border-radius: 10px;
  padding: 18px 14px 14px;
  text-align: center;
  transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}

.card:hover,
.card:focus-within {
   background: #333;
	border-color: #667eea;
	box-shadow: 0 4px 12px rgba(102, 126, 234, 0.2);
	transform: translateY(-2px);
}

/* punch-hole detail, referencing library index cards */
.card::before {
  content: "";
  position: absolute;
  top: 9px;
  left: 9px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--paper);
}

.card .glyph {
  width: 34px;
  height: 34px;
  margin: 6px auto 12px;
  color: #FFF;
}

.card .glyph svg { width: 100%; height: 100%; }

.card .plate {
 font-family:soraneu;
  font-size: 10.5px;
  color: var(--ink-soft);
  letter-spacing: 0.03em;
}

.card .glyph-name {
  font-size: 13.5px;
  font-weight: 600;
  margin: 3px 0 10px;
  color:#666;
}

.card .actions {
  display: flex;
  gap: 4px;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity .15s ease, transform .15s ease;
}

.card:hover .actions,
.card:focus-within .actions {
  opacity: 1;
  transform: translateY(0);
}

.card .actions button,
.card .actions a {
  flex: 1;
  min-width: 0;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
  border-radius: var(--radius);
  padding: 6px 2px;
  cursor: pointer;
  
  font-size: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  font-family: inherit;
  text-decoration: none;
  white-space: nowrap;
}

.card .actions button svg,
.card .actions a svg {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
}

.card .actions button:hover,
.card .actions a:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4);
}

.card .actions button.copied {
  background: var(--amber);
  border-color: var(--amber);
  color: #241a05;
}

/* ---------- Empty state ---------- */

.empty {
  display: none;
  padding: 60px 20px;
  text-align: center;
  color: var(--ink-soft);
  font-family:soraneu;
  font-size: 16px;
}

.empty.show { display: block; }

/* ---------- Toast ---------- */

.toast {
  position: fixed;
            bottom: 20px;
            right: 20px;
            background: #28a745;
            color: white;
            padding: 15px 20px;
            border-radius: 6px;
            box-shadow: 0 4px 12px rgba(0,0,0,0.2);
            z-index: 9999;
            animation: slideUp 0.3s;
}

.toast.show {
  opacity: 1;
  transform: translate(-50%, 0);
}



@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}

@media (max-width: 520px) {
  .hero { padding-top: 36px; }
  .grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
}