/* Custom utilities — Tailwind via CDN covers the rest. */

/* Scrollbar tweak for dark theme */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: #0f1115; }
::-webkit-scrollbar-thumb { background: #2a2f42; border-radius: 6px; }
::-webkit-scrollbar-thumb:hover { background: #3a3f52; }

/* Log line types — used by SSE generate stream */
.log-line { padding: 2px 12px; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 12px; line-height: 1.55; white-space: pre-wrap; word-break: break-word; }
.log-stage { color: #7dd3fc; font-weight: 600; }
.log-info  { color: #cbd5e1; }
.log-warn  { color: #fbbf24; }
.log-error { color: #f87171; }
.log-success { color: #34d399; font-weight: 600; }

/* Card hover for sites grid */
.site-card { transition: transform .15s, box-shadow .15s, border-color .15s; }
.site-card:hover { transform: translateY(-2px); border-color: rgba(125,211,252,0.5); box-shadow: 0 12px 24px -8px rgba(0,0,0,0.4); }

/* Mode badge palette */
.badge-mode { display:inline-block; padding:2px 8px; border-radius:6px; font-size:10px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; }
.badge-mode-classic   { background: rgba(125,211,252,0.15); color: #7dd3fc; }
.badge-mode-zine      { background: rgba(251,191,36,0.15);  color: #fbbf24; }
.badge-mode-manifesto { background: rgba(248,113,113,0.15); color: #f87171; }
.badge-mode-feature   { background: rgba(167,139,250,0.18); color: #a78bfa; }
.badge-mode-catalog   { background: rgba(52,211,153,0.15);  color: #34d399; }
.badge-mode-almanac   { background: rgba(244,114,182,0.15); color: #f472b6; }
.badge-mode-notes     { background: rgba(125,211,252,0.15); color: #7dd3fc; }
.badge-mode-formulary { background: rgba(251,146,60,0.15);  color: #fb923c; }
.badge-mode-chaos     { background: rgba(244,114,182,0.18); color: #f472b6; }
.badge-mode-pricing   { background: rgba(56,189,248,0.15);  color: #38bdf8; }
.badge-mode-issue     { background: rgba(167,139,250,0.18); color: #a78bfa; }
.badge-mode-now       { background: rgba(110,231,183,0.15); color: #6ee7b7; }

/* Order/batch status badges */
.badge-st { display:inline-block; padding:2px 8px; border-radius:6px; font-size:10px; font-weight:600; letter-spacing:.05em; text-transform:uppercase; min-width:64px; text-align:center; }
.badge-st-queued      { background: rgba(82,90,115,0.25);  color: #94a3b8; }
.badge-st-running     { background: rgba(251,191,36,0.18); color: #fbbf24; animation: pulse-dot 1.4s infinite; }
.badge-st-done        { background: rgba(52,211,153,0.16); color: #34d399; }
.badge-st-failed      { background: rgba(248,113,113,0.18);color: #f87171; }
.badge-st-interrupted { background: rgba(148,163,184,0.14);color: #cbd5e1; }
.badge-st-partial     { background: rgba(251,191,36,0.16); color: #fbbf24; }

/* SSE pulse */
@keyframes pulse-dot { 0%,100% { opacity:1; } 50% { opacity: .35; } }
.pulse-dot { animation: pulse-dot 1.4s infinite; }

/* Live dot when generation running */
#liveDot.running { background: #e3c14a; animation: pulse-dot 1s infinite; }

/* ─────────────────────────────────────────────────────────────
   "Stitched Monster" theme — overrides (later rules win)
   graphite-green lab · monster-skin green · bruise purple ·
   dashed seams + corner rivets on panels
   ───────────────────────────────────────────────────────────── */
:root {
  --stitch: rgba(150,210,170,0.40);   /* dashed seam */
  --bolt:   #9fb0a4;                   /* steel-green rivet */
}

/* scrollbar → graphite-green */
::-webkit-scrollbar-track { background: #0b0f0d; }
::-webkit-scrollbar-thumb { background: #324036; }
::-webkit-scrollbar-thumb:hover { background: #41544749; }

/* recolor the accent-tied log/badges to the monster palette */
.log-stage   { color: #79c298; }
.log-warn    { color: #e3c14a; }
.log-error   { color: #f0807a; }
.log-success { color: #57c98a; }

.site-card:hover { border-color: rgba(121,194,152,0.55) !important;
                   box-shadow: 0 12px 24px -8px rgba(0,0,0,0.5); }

.badge-mode-classic { background: rgba(121,194,152,0.16); color:#79c298; }
.badge-mode-notes   { background: rgba(121,194,152,0.16); color:#79c298; }
.badge-mode-feature, .badge-mode-issue { background: rgba(160,124,197,0.18); color:#a07cc5; }
.badge-st-running   { background: rgba(227,193,74,0.18);  color:#e3c14a; }
.badge-st-done      { background: rgba(87,201,138,0.16);  color:#57c98a; }
.badge-st-failed    { background: rgba(240,128,122,0.18); color:#f0807a; }

/* Stitched panels: corner rivets (::before, always on top) + a
   dashed inner seam (::after). Targets the card/panel utility combo
   so no template edits are needed. Inputs (rounded-md) are untouched. */
.border.rounded-xl, .border.rounded-lg { position: relative; }
.border.rounded-xl::before, .border.rounded-lg::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  border-radius: inherit;
  background:
    radial-gradient(circle at 9px 9px,                       var(--bolt) 0 2px, transparent 2.6px),
    radial-gradient(circle at calc(100% - 9px) 9px,          var(--bolt) 0 2px, transparent 2.6px),
    radial-gradient(circle at 9px calc(100% - 9px),          var(--bolt) 0 2px, transparent 2.6px),
    radial-gradient(circle at calc(100% - 9px) calc(100% - 9px), var(--bolt) 0 2px, transparent 2.6px);
  background-repeat: no-repeat;
}
.border.rounded-xl::after, .border.rounded-lg::after {
  content: ""; position: absolute; inset: 5px; pointer-events: none;
  border: 1.5px dashed var(--stitch); border-radius: 7px;
}

/* Header: full-width dashed bottom seam + a rivet at each end */
.hdr-stitch::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 3px; height: 0;
  border-bottom: 1.5px dashed var(--stitch); pointer-events: none;
}
.hdr-stitch::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(circle at 26px calc(100% - 6px),          var(--bolt) 0 2px, transparent 2.6px),
    radial-gradient(circle at calc(100% - 26px) calc(100% - 6px), var(--bolt) 0 2px, transparent 2.6px);
  background-repeat: no-repeat;
}

/* Footer: dashed top seam + a rivet at each end (mirrors the header) */
.ftr-stitch::after {
  content: ""; position: absolute; left: 0; right: 0; top: 3px; height: 0;
  border-top: 1.5px dashed var(--stitch); pointer-events: none;
}
.ftr-stitch::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(circle at 26px 6px,          var(--bolt) 0 2px, transparent 2.6px),
    radial-gradient(circle at calc(100% - 26px) 6px, var(--bolt) 0 2px, transparent 2.6px);
  background-repeat: no-repeat;
}