/* Gumshoe terminal UI. Builds on the shared tokens in /assets/app.css (--bg, --border, --text, --mono ...).
   No inline styles anywhere: every visual state is a class here. Themes only swap a few accent tokens. */
.gs-page { --gs-accent: var(--brand); --gs-glow: rgba(59,130,246,.18); --gs-term-bg: var(--bg-input); --gs-hero: none; }
.gs-theme-noir { --gs-accent: #d4b36a; --gs-glow: rgba(212,179,106,.16); --gs-term-bg: #0d0f14; --gs-hero: url("/media/noir_menu.jpg"); }
.gs-theme-cyberpunk { --gs-accent: #22d3ee; --gs-glow: rgba(236,72,153,.18); --gs-term-bg: #0a0816; --gs-hero: url("/media/neon_menu.jpg"); }
.gs-theme-fantasy { --gs-accent: #a3e635; --gs-glow: rgba(163,230,53,.14); --gs-term-bg: #0e120c; --gs-hero: url("/media/padfoot_menu.jpg"); }

.gs-head { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 16px; margin: 4px 0 12px; }
.gs-head h1 { margin: 0; font-size: 1.5rem; }
.gs-head p { margin: 0; }
.gs-head .spacer { flex: 1; }

.gs-term { border: 1px solid var(--border-strong); border-radius: var(--radius); background: var(--gs-term-bg); box-shadow: var(--shadow), 0 0 0 1px var(--gs-glow) inset; overflow: hidden; }
.gs-bar { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; padding: 8px 12px; border-bottom: 1px solid var(--border); background: var(--bg-elev); font-family: var(--mono); font-size: .85rem; color: var(--text-muted); }
.gs-bar .gs-title { color: var(--gs-accent); font-weight: 700; letter-spacing: .04em; }
.gs-bar .spacer { flex: 1; }
.gs-save-state { color: var(--text-dim); }
.gs-save-state.gs-saved { color: var(--ok); }
.gs-save-state.gs-save-err { color: var(--warn); }

.gs-log { height: 58vh; min-height: 320px; max-height: 720px; overflow-y: auto; padding: 14px 16px; font-family: var(--mono); font-size: .95rem; line-height: 1.5; color: var(--text); white-space: pre-wrap; word-wrap: break-word; scroll-behavior: smooth; }
.gs-log:focus { outline: 2px solid var(--gs-accent); outline-offset: -2px; }
.gs-line { margin: 0; min-height: 1.5em; }
.gs-echo { color: var(--gs-accent); margin-top: .6em; }
.gs-h { color: var(--gs-accent); font-weight: 700; }
.gs-dim { color: var(--text-dim); }
.gs-info { color: var(--info); }
.gs-ok { color: var(--ok); }
.gs-warn { color: var(--warn); }
.gs-fail { color: var(--danger); }
.gs-clue { color: #fde68a; }
.gs-quest { color: #c4b5fd; }
.gs-npc { color: #93c5fd; }
.gs-read { color: #e5d3b3; border-left: 2px solid var(--border-strong); padding-left: 10px; }
.gs-exits { color: var(--text-muted); }
.gs-map { color: var(--text); }
.gs-sys { color: var(--text-dim); font-style: italic; }
.gs-links { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0; white-space: normal; }

.gs-form { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--border); background: var(--bg-elev); }
.gs-prompt { font-family: var(--mono); color: var(--gs-accent); font-weight: 700; }
.gs-form input { flex: 1; min-width: 0; font-family: var(--mono); font-size: 1rem; background: var(--gs-term-bg); color: var(--text); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); padding: 8px 10px; }
.gs-form input:focus { outline: none; border-color: var(--gs-accent); box-shadow: 0 0 0 3px var(--gs-glow); }
.gs-quick { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 12px 12px; background: var(--bg-elev); }
.gs-quick .btn, .gs-links .btn { font-family: var(--mono); }
.gs-quick .gs-sep { flex: 1; }

.gs-help { margin-top: 12px; }
.gs-help summary { cursor: pointer; color: var(--text-muted); }
.gs-help ul { margin: 8px 0 0; padding-left: 20px; color: var(--text-muted); }

/* index page */
.gs-cards { margin-top: 12px; }
.gs-card { display: flex; flex-direction: column; padding: 0; overflow: hidden; }
.gs-card .gs-card-art { height: 150px; background-color: var(--bg-elev); background-image: var(--gs-hero); background-size: cover; background-position: center; border-bottom: 1px solid var(--border); }
.gs-card .gs-card-body { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.gs-card h2 { margin: 0; font-size: 1.15rem; color: var(--gs-accent); }
.gs-card p { margin: 0; }
.gs-card .gs-continue { font-family: var(--mono); font-size: .85rem; color: var(--ok); }
.gs-card .gs-card-actions { margin-top: auto; display: flex; gap: 8px; flex-wrap: wrap; }

@media (max-width: 640px) {
  .gs-log { height: 52vh; min-height: 260px; font-size: .9rem; padding: 10px; }
  .gs-quick .gs-sep { display: none; }
}
@media (prefers-reduced-motion: reduce) { .gs-log { scroll-behavior: auto; } }