/* EPHIX prompt library (served at /Tracker/) — brand system over brand.css tokens */

[hidden] { display: none !important; }

.site-header { padding-bottom: 24px; }

.prompt-search { max-width: 900px; margin: 30px auto 0; text-align: left; position: relative; z-index: 1; }
.prompt-search label {
  display: block;
  font: 600 .68rem var(--font-ui);
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 8px;
}
.prompt-search input {
  width: 100%;
  padding: 14px 18px;
  background: var(--panel);
  border: 1px solid var(--line); border-left: 3px solid var(--accent);
  color: var(--text);
  font: 400 1.05rem/1.4 var(--font-body);
}
.prompt-search input::placeholder { color: var(--faint); }
.prompt-search input:focus { outline: none; border-color: var(--accent-bright); }
#promptCount { color: var(--muted); margin-top: 12px; font: 600 .8rem var(--font-ui); letter-spacing: .12em; text-transform: uppercase; }



/* motion pass */
.mega-title::after { transform-origin: left center; animation: ebSlashDraw .5s var(--ease-out) .2s both; }
.prompt-entry.was-opened .prompt-content { animation: ebChamferIn var(--t-med) var(--ease-out) both; }

/* prompt entries: chamfered print cards */
.prompt-entry {
  position: relative;
  background: var(--panel);
  border: 1px solid var(--line);
  clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 0 100%);
  margin-bottom: 12px;
  overflow: hidden;
  transition: border-color .18s ease;
}
.prompt-entry::before {
  content: '';
  position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: transparent;
  transition: background .18s ease;
}
.prompt-entry:hover, .prompt-entry[open] { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
.prompt-entry:hover::before, .prompt-entry[open]::before { background: var(--accent); }
.prompt-entry summary {
  cursor: pointer;
  padding: 18px 20px;
  display: flex; align-items: center; gap: 14px;
  list-style: none;
}
.prompt-entry summary::-webkit-details-marker { display: none; }
.prompt-entry summary::before {
  content: '›';
  color: var(--accent);
  font: 600 1.4rem var(--font-display);
  transition: transform .2s ease;
}
.prompt-entry[open] summary::before { transform: rotate(90deg); }
.prompt-name { flex: 1; font: 600 .95rem var(--font-display); letter-spacing: .06em; line-height: 1.5; text-transform: uppercase; }

.prompt-content { padding: 0 22px 22px; }
.prompt-content pre {
  white-space: pre-wrap; overflow-wrap: anywhere;
  font: 400 .88rem/1.7 var(--font-mono);
  color: var(--muted);
  background: var(--t-deep, rgba(0, 0, 0, .35));
  border: 1px solid var(--line);
  padding: 14px;
  margin-top: 16px;
  max-height: 340px; overflow-y: auto;
}
html[data-theme="paper"] .prompt-content pre { color: var(--ephix-paper); }
.prompt-content button {
  border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  color: var(--accent-bright);
  padding: 9px 16px; cursor: pointer;
  font: 700 .74rem var(--font-ui); letter-spacing: .16em; text-transform: uppercase;
  clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 50%, calc(100% - 8px) 100%, 0 100%);
  transition: background .15s ease, color .15s ease;
}
.prompt-content button:hover { background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--text); }
.copy-status { color: var(--muted); margin-left: 12px; font: 500 .8rem var(--font-body); }

#app { padding-bottom: 80px; position: relative; z-index: 5; }
#searchButton { font-size: 1.8rem; }

@media (max-width: 600px) {
  .prompt-entry summary { padding: 15px; gap: 9px; flex-wrap: wrap; }
  .prompt-name { font-size: .8rem; }
  .difficulty-tag { font-size: .65rem; }
  .prompt-content { padding: 0 16px 18px; }
}