/* Terminal mode ("Fun" button). Loaded by index.html after home.css, so it can use the same tokens. */
html.term-open { overflow: hidden; }

.term {
  position: fixed; inset: 0; z-index: 200;
  display: flex; flex-direction: column;
  background: #0c0b09; color: var(--sand);
  font: 400 clamp(.82rem, 1.1vw + .3rem, 1rem)/1.6 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
}
.term[hidden] { display: none; }
/* faint scanlines, purely decorative */
.term::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 5;
  background: repeating-linear-gradient(0deg, rgba(0, 0, 0, .16) 0 1px, transparent 1px 3px);
  opacity: .35;
}

.term-bar {
  flex: none; display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  padding: .65rem var(--gutter); border-bottom: 1px solid var(--line); font-size: .78rem; color: var(--sand-dim);
}
.term-title { flex: 1; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.term-exit {
  background: none; border: 1px solid var(--line); border-radius: .5rem; color: var(--sand);
  font: inherit; font-size: .78rem; padding: .3rem .7rem; cursor: pointer; transition: background .2s, color .2s;
}
.term-exit:hover { background: var(--sand); color: var(--ink); }

.term-body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 1.1rem var(--gutter) 2rem; }
.term-inner { max-width: none; margin: 0; text-align: left; }
.t-line { white-space: pre-wrap; overflow-wrap: anywhere; min-height: 1.6em; }
.t-gap { height: .6rem; }
.t-banner { margin: .25rem 0 .75rem; line-height: 1.12; letter-spacing: 0; color: var(--sand); white-space: pre; overflow-x: auto; font-weight: 700; }

.t-user { color: var(--accent); font-weight: 700; }
.t-sep { color: var(--sand-dim); }
.t-path { color: var(--sand); }
.t-cmd { color: #f1ead8; }
.t-dim { color: var(--sand-dim); }
.t-err { color: var(--accent); }
.t-head { color: #f1ead8; font-weight: 700; }
.t-key { color: var(--accent); }
.t-ind { padding-left: 2.2ch; }
.t-dir { color: #f1ead8; font-weight: 700; }

.t-link {
  background: none; border: 0; padding: 0; font: inherit; color: var(--sand);
  text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: .2em; cursor: pointer; text-align: left;
}
.t-link:hover { color: var(--accent); }
.t-grid { display: grid; grid-template-columns: max-content 1fr; gap: .1rem 2rem; }
.t-item { margin-bottom: .55rem; }

.term-form { display: flex; align-items: baseline; gap: .6ch; flex-wrap: nowrap; }
.t-prompt { white-space: nowrap; flex: none; }
.term-input {
  flex: 1; min-width: 6ch; background: transparent; border: 0; outline: 0; padding: 0;
  font: inherit; color: #f1ead8; caret-color: var(--accent);
}

.term-chips {
  flex: none; display: flex; gap: .5rem; flex-wrap: wrap; align-items: center;
  padding: .6rem var(--gutter) .8rem; border-top: 1px solid var(--line); font-size: .78rem; color: var(--sand-dim);
}
.term-chips button {
  font: inherit; font-size: .78rem; color: var(--sand); background: transparent;
  border: 1px solid var(--line); border-radius: 99px; padding: .25rem .8rem; cursor: pointer; transition: background .2s, color .2s;
}
.term-chips button:hover { background: var(--sand); color: var(--ink); }

@media (max-width: 640px) {
  .term-title { display: none; }
  .t-grid { grid-template-columns: 1fr; gap: 0 0; }
  .t-grid > :nth-child(even) { padding-left: 2.2ch; margin-bottom: .45rem; color: var(--sand-dim); }
}
@media (prefers-reduced-motion: reduce) { .term::after { display: none; } }