/* ScriptKitty DEF CON Badge — base styles, hover states, responsive fallbacks.
   Layout + type live inline in index.html (recreated 1:1 from the design reference). */

body { margin: 0; background: #faf9f5; }
a { color: #00834c; text-decoration: none; }
a:hover { color: #d6008f; }
::selection { background: #3dffa0; color: #14181b; }
@keyframes blinkc { 0%,49% { opacity: 1; } 50%,100% { opacity: 0; } }

.nav-link { color: #14181b; }
.nav-link:hover { color: #00a35f; }

.btn-dark {
  display: inline-block;
  font-family: 'IBM Plex Mono', monospace;
  font-weight: 600;
  background: #14181b;
  color: #3dffa0;
  white-space: nowrap;
}
.btn-dark:hover { background: #232a26; color: #3dffa0; }

.btn-outline {
  display: inline-block;
  font-family: 'IBM Plex Mono', monospace;
  font-weight: 600;
  color: #14181b;
  border: 2px solid #14181b;
  white-space: nowrap;
}
.btn-outline:hover { border-color: #00a35f; color: #00a35f; }

.btn-ghost {
  font-family: 'IBM Plex Mono', monospace;
  font-weight: 600;
  color: #3c443f;
  border: 2px solid #d5cfc0;
  white-space: nowrap;
}
.btn-ghost:hover { border-color: #14181b; color: #14181b; }

button[disabled] { opacity: 0.55; cursor: default; }
button[disabled]:hover { background: #14181b; }
.btn-outline[disabled]:hover { background: transparent; border-color: #14181b; color: #14181b; }

.ser-send:hover { background: rgba(61,255,160,0.08); }

.chip {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 13px;
  background: #efece3;
  padding: 2px 6px;
  border-radius: 5px;
  color: #14181b;
}
.chip-band { background: #e6e2d6; }
.chip-sm { font-size: 12px; padding: 1px 5px; border-radius: 4px; }

.spec-k {
  font-family: 'IBM Plex Mono', monospace;
  color: #00a35f;
  font-weight: 600;
  font-size: 12.5px;
}

.link-dim { color: #98a09a; }
.link-dim:hover { color: #d6008f; }
.link-lit { color: #3dffa0; font-weight: 600; }
.link-lit:hover { color: #ff4fd8; }
.link-static { color: #3dffa0; }
.link-static:hover { color: #3dffa0; }

/* catalog rows (built by app.js) */
.cat-row {
  display: grid;
  grid-template-columns: 64px 250px 1fr 130px;
  gap: 24px;
  padding: 26px 4px;
  border-bottom: 1px solid #d5cfc0;
  align-items: start;
}

/* build-picker rows */
.build-row {
  display: flex;
  gap: 12px;
  padding: 11px 16px;
  border: 2px solid #e2ddd0;
  border-radius: 10px;
  cursor: pointer;
  align-items: baseline;
  flex-wrap: wrap;
  background: #fff;
}
.build-row.sel { border-color: #00a35f; }

/* responsive: the reference is a fixed desktop layout; collapse the grids on small screens */
@media (max-width: 920px) {
  .grid-hero, .grid-2col { grid-template-columns: 1fr !important; }
  .grid-3col { grid-template-columns: 1fr !important; }
  .cat-row { grid-template-columns: 64px 1fr; grid-auto-flow: dense; }
  .cat-row .cat-desc { grid-column: 1 / -1; }
  .cat-row .cat-links { grid-column: 1 / -1; flex-direction: row !important; align-items: flex-start !important; }
  .grid-dl { grid-template-columns: 1fr !important; }
  .grid-dl a, .grid-dl span:last-child { justify-self: start !important; }
  h1 { font-size: 44px !important; }
  h2 { font-size: 34px !important; }
}