/* catscan terminal — phosphor green on black, with verdict accents */

:root {
  --bg:        #06090b;
  --bg-panel:  #0a0f12;
  --fg:        #b9ffd8;
  --fg-dim:    #4e7d68;
  --fg-mute:   #35594a;
  --green:     #00ff9c;
  --lime:      #7cff4f;
  --yellow:    #ffd23f;
  --orange:    #ff9036;
  --red:       #ff4d5e;
  --cyan:      #4fd8ff;
  --line:      #16241d;
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", "Consolas",
          "DejaVu Sans Mono", "Liberation Mono", monospace;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--mono);
  font-size: 14px;
  line-height: 1.45;
  overflow: hidden;
}

/* ---------- shell ---------- */

#crt {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  background:
    radial-gradient(ellipse at 50% 40%, #0b1418 0%, var(--bg) 70%);
}

#scanlines {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 5;
  background: repeating-linear-gradient(
    to bottom,
    rgba(0, 255, 156, 0.035) 0px,
    rgba(0, 255, 156, 0.035) 1px,
    transparent 1px,
    transparent 3px
  );
}

#topbar, #botbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-bottom: 1px solid var(--line);
  background: var(--bg-panel);
  font-size: 12px;
  flex: 0 0 auto;
  white-space: nowrap;
  overflow: hidden;
}

#botbar {
  border-bottom: none;
  border-top: 1px solid var(--line);
}

.brand {
  color: var(--green);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-shadow: 0 0 12px rgba(0, 255, 156, 0.5);
}

.sep    { color: var(--fg-mute); }
.muted  { color: var(--fg-dim); }
.spacer { flex: 1 1 auto; }
.key {
  color: var(--cyan);
  border: 1px solid var(--line);
  border-radius: 3px;
  padding: 1px 5px;
}
.warnfoot { color: var(--fg-mute); }

/* the feed starts by itself, so the way to stop it stays visible */
.stopnote { color: var(--yellow); }
#feed-hint.running .key { color: var(--yellow); border-color: var(--yellow); }
#feed-status .on  { color: var(--lime); }
#feed-status .off { color: var(--fg-mute); }

/* ---------- screen ---------- */

#screen {
  flex: 1 1 auto;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 14px 16px 4px;
  scrollbar-width: thin;
  scrollbar-color: var(--line) transparent;
}
#screen::-webkit-scrollbar { width: 10px; }
#screen::-webkit-scrollbar-thumb {
  background: var(--line);
  border-radius: 5px;
}

#output { white-space: pre-wrap; word-break: break-word; }

.line { min-height: 1.45em; }
.blank { height: 0.7em; }

#promptline {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 2px 0 14px;
}

.prompt {
  color: var(--green);
  flex: 0 0 auto;
  user-select: none;
}

#input {
  flex: 1 1 auto;
  background: transparent;
  border: none;
  outline: none;
  color: var(--fg);
  font: inherit;
  caret-color: transparent;
  padding: 0;
  min-width: 0;
}

#caret {
  color: var(--green);
  animation: blink 1.1s steps(1) infinite;
  margin-left: -6px;
  user-select: none;
}
@keyframes blink { 0%, 50% { opacity: 1 } 50.01%, 100% { opacity: 0 } }

/* ---------- text colors ---------- */

.c-green  { color: var(--green); }
.c-lime   { color: var(--lime); }
.c-yellow { color: var(--yellow); }
.c-orange { color: var(--orange); }
.c-red    { color: var(--red); }
.c-cyan   { color: var(--cyan); }
.c-dim    { color: var(--fg-dim); }
.c-mute   { color: var(--fg-mute); }
.bold     { font-weight: 700; }

.echo .prompt-echo { color: var(--green); }
.echo .cmd-echo    { color: var(--fg); }

/* ---------- cat art ---------- */

.cat {
  display: inline-block;
  white-space: pre;
  line-height: 1.2;
  margin: 4px 0;
  text-shadow: 0 0 14px currentColor;
  filter: saturate(1.2);
}

.verdict-badge {
  display: inline-block;
  padding: 1px 8px;
  border: 1px solid currentColor;
  border-radius: 3px;
  font-weight: 700;
  letter-spacing: 0.12em;
}

/* score meter */
.meter {
  display: inline-block;
  letter-spacing: -1px;
}

/* ---------- feed rows ---------- */

.feedrow {
  display: block;
  animation: slidein 220ms ease-out;
}
@keyframes slidein {
  from { opacity: 0; transform: translateX(-6px); }
  to   { opacity: 1; transform: none; }
}

/* ---------- responsive ---------- */

@media (max-width: 620px) {
  html, body { font-size: 12px; }
  #topbar .muted:first-of-type { display: none; }
  .warnfoot { display: none; }
}

/* respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  #caret { animation: none; }
  .feedrow { animation: none; }
}