/* TERS-483 ARCHIVE — query terminal */

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  background: #0a0a0a;
  color: #d8d8d8;
  font-family: 'SF Mono', 'Courier New', ui-monospace, monospace;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.archive-only {
  width: 100%;
  max-width: 640px;
  text-align: center;
}

h1 {
  font-size: clamp(28px, 6vw, 42px);
  letter-spacing: 0.06em;
  margin: 0 0 8px;
  font-weight: 700;
}

.archive-sub {
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #777;
  margin: 0 0 36px;
}

.archive-form {
  display: flex;
  border: 1px solid #444;
  background: #111;
}

.archive-form input {
  flex: 1;
  background: transparent;
  border: none;
  color: #d8d8d8;
  font-family: inherit;
  font-size: 15px;
  padding: 14px 16px;
}
.archive-form input:focus { outline: none; background: #161616; }
.archive-form input::placeholder { color: #555; }

.archive-form button {
  background: #d8d8d8;
  color: #0a0a0a;
  border: none;
  padding: 0 22px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
}
.archive-form button:hover { background: #fff; }

.archive-status {
  margin: 14px 0 0;
  min-height: 18px;
  font-size: 12.5px;
}
.archive-status.idle { color: #666; }
.archive-status.hit { color: #4fd6c8; }
.archive-status.miss { color: #e05b52; }

.archive-note {
  margin: 26px 0 0;
  color: #555;
  font-size: 12px;
}

.archive-log {
  margin: 26px 0 0;
  text-align: left;
  font-size: 11.5px;
  border-top: 1px dashed #2a2a2a;
  padding-top: 12px;
}
.log-line {
  display: flex;
  gap: 12px;
  padding: 3px 0;
  color: #666;
}
.log-line .log-q {
  flex: 1;
  color: #999;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.log-line.hit .log-result { color: #4fd6c8; }
.log-line.miss .log-result { color: #e05b52; }

.revealed {
  margin-top: 26px;
  text-align: left;
  font-size: 12px;
}
.revealed:not(:empty) {
  border-top: 1px dashed #2a2a2a;
  padding-top: 12px;
}
.revealed .frag {
  color: #999;
  padding: 4px 0;
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition: none !important; }
}