/* ===========================================================================
   THE TERMINAL
   A light terminal, which is the whole point: inverting the universal black
   console into a crisp white instrument keeps the palette rule intact and is
   itself the differentiator.

   This is a real component, not a picture of one. It parses input, keeps
   history, completes on tab and reads its answers from the database. Every
   answer it gives is also reachable through ordinary navigation, so it is an
   enhancement and never the only path to anything.
   =========================================================================== */

.term {
  border: 1px solid var(--rule-strong);
  border-radius: var(--r);
  background: var(--paper-raised);
  box-shadow: var(--shadow-3);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  font-family: var(--font-mono);
  font-size: 0.83rem;
  line-height: 1.65;
  container-type: inline-size;
}

.term__bar {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.55rem 0.85rem;
  border-bottom: 1px solid var(--rule);
  background: var(--paper);
}

.term__dots {
  display: flex;
  gap: 5px;
}

.term__dots i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 1px solid var(--rule-strong);
  display: block;
}

.term__path {
  color: var(--ink-faint);
  font-size: var(--t-micro);
  letter-spacing: -0.01em;
}

.term__path b {
  color: var(--ink-soft);
  font-weight: 400;
}

.term__skip {
  margin-left: auto;
  background: transparent;
  border: 1px solid var(--rule);
  border-radius: var(--r);
  color: var(--ink-soft);
  font-family: inherit;
  font-size: var(--t-micro);
  padding: 0.2rem 0.55rem;
  cursor: pointer;
  transition: color var(--d-fast) var(--e-transition),
    border-color var(--d-fast) var(--e-transition);
}

.term__skip:hover {
  color: var(--blue);
  border-color: var(--blue);
}

.term__screen {
  padding: 0.9rem 1rem 0.75rem;
  /* Tall enough to hold a boot sequence and a couple of command outputs
     without the panel reading as mostly empty at rest. */
  min-height: 232px;
  max-height: 46vh;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--rule-strong) transparent;
}

.term__screen::-webkit-scrollbar {
  width: 6px;
}

.term__screen::-webkit-scrollbar-thumb {
  background: var(--rule-strong);
  border-radius: 3px;
}

.term__line {
  display: flex;
  gap: 0.5rem;
  white-space: pre-wrap;
  word-break: break-word;
}

.term__line + .term__line {
  margin-top: 1px;
}

.term__prompt {
  color: var(--green);
  flex: none;
  user-select: none;
}

.term__cmd {
  color: var(--ink);
}

.term__cmd b {
  color: var(--blue);
  font-weight: 400;
}

.term__out {
  color: var(--ink-soft);
}

.term__out--dim {
  color: var(--ink-faint);
}

.term__out--ok {
  color: var(--green);
}

.term__out--err {
  color: var(--red);
}

.term__out--key {
  color: var(--blue);
}

.term__spacer {
  height: 0.6rem;
}

/* Syntax colouring for cat skills.json */
.tok-key { color: var(--blue); }
.tok-str { color: var(--green); }
.tok-punc { color: var(--ink-faint); }

.term__link {
  color: var(--blue);
  text-decoration: underline;
  text-decoration-color: var(--blue-line);
}

.term__row {
  display: grid;
  /* 15ch fits the longest project slug. minmax(0,...) on the value column
     stops a long description from pushing the label into it. */
  grid-template-columns: 15ch minmax(0, 1fr);
  gap: 0.75rem;
}

@container (max-width: 420px) {
  .term__row { grid-template-columns: 1fr; gap: 0; }
}

.term__row dt {
  color: var(--ink-faint);
  /* Slugs have no natural break opportunity, so allow one anywhere rather
     than letting the label collide with the value. */
  overflow-wrap: anywhere;
}

.term__row dd {
  margin: 0;
  color: var(--ink-soft);
}

/* Input line */
.term__entry {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  border-top: 1px solid var(--rule);
  padding: 0.65rem 1rem;
  background: var(--paper);
}

.term__entry[hidden] {
  display: none;
}

.term__input {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: 0;
  outline: none;
  color: var(--ink);
  font-family: inherit;
  font-size: inherit;
  padding: 0;
  caret-color: var(--green);
}

.term__input::placeholder {
  color: var(--ink-faint);
}

.term__caret {
  width: 7px;
  height: 1.05em;
  background: var(--green-signal);
  flex: none;
  animation: caret-blink 1.15s steps(1) infinite;
}

.term__caret--inline {
  display: inline-block;
  vertical-align: -2px;
  margin-left: 2px;
}

@keyframes caret-blink {
  0%, 45% { opacity: 1; }
  50%, 100% { opacity: 0; }
}

.term__hintbar {
  padding: 0.45rem 1rem 0.6rem;
  border-top: 1px solid var(--rule);
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
  background: var(--paper);
}

.term__chip {
  background: transparent;
  border: 1px solid var(--rule);
  border-radius: var(--r);
  color: var(--ink-soft);
  font-family: inherit;
  font-size: var(--t-micro);
  padding: 0.18rem 0.5rem;
  cursor: pointer;
  transition: color var(--d-fast) var(--e-transition),
    border-color var(--d-fast) var(--e-transition),
    transform var(--d-fast) var(--e-spring);
}

.term__chip:hover {
  color: var(--blue);
  border-color: var(--blue);
  transform: translateY(-1px);
}

/* Under reduced motion the caret stops blinking and the boot sequence is
   printed in full immediately rather than typed. */
@media (prefers-reduced-motion: reduce) {
  .term__caret,
  .term__caret--inline {
    animation: none;
    opacity: 1;
  }
}

@media (max-width: 560px) {
  /* On a phone the terminal keeps its full command set but starts shorter,
     so it never pushes the hero headline off the first screen. */
  .term { font-size: 0.78rem; }
  .term__screen { min-height: 210px; max-height: 38vh; }
  .term__hintbar { padding-bottom: 0.5rem; }
}

/* ------------------------------------------------------- contact console */
/* The contact form borrows the terminal's grammar without pretending to be
   one: these are ordinary labelled inputs with server side validation. */

.cform {
  border: 1px solid var(--rule-strong);
  border-radius: var(--r);
  background: var(--paper-raised);
  overflow: hidden;
  box-shadow: var(--shadow-2);
}

.cform__body {
  padding: clamp(1.25rem, 2.5vw, 2rem);
  display: grid;
  gap: 1.15rem;
}

.field {
  display: grid;
  gap: 0.4rem;
}

.field__label {
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  color: var(--ink-soft);
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.field__label::before {
  content: "$";
  color: var(--green);
}

.field__control {
  display: flex;
  align-items: center;
  border: 1px solid var(--rule-strong);
  border-radius: var(--r);
  background: var(--paper);
  transition: border-color var(--d-fast) var(--e-transition),
    box-shadow var(--d-fast) var(--e-transition);
}

.field__control:focus-within {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px var(--blue-wash);
}

.field input,
.field textarea {
  width: 100%;
  border: 0;
  background: transparent;
  outline: none;
  padding: 0.75rem 0.85rem;
  font-family: var(--font-mono);
  font-size: 0.88rem;
  color: var(--ink);
  resize: vertical;
}

/* Placeholder contrast is a real accessibility requirement, not a styling
   afterthought. ink-faint clears AA against the paper ground. */
.field input::placeholder,
.field textarea::placeholder {
  color: var(--ink-faint);
}

.field__help {
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  color: var(--ink-faint);
}

.field__error {
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  color: var(--red);
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.field--invalid .field__control {
  border-color: var(--red);
  background: var(--red-wash);
}

/* Honeypot. Hidden from people, reachable by bots. */
.hp-field,
.field--hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.cform__foot {
  border-top: 1px solid var(--rule);
  padding: 0.9rem clamp(1.25rem, 2.5vw, 2rem);
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  background: var(--paper);
}

.cform__status {
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  color: var(--ink-faint);
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.cform__status--ok { color: var(--green); }
.cform__status--err { color: var(--red); }

.btn[aria-busy="true"] {
  opacity: 0.7;
  pointer-events: none;
}