/* ==========================================================================
   TERMINAL — Build with it (Design Completion Campaign, 2026-09-29).
   The session still running: each question a command and its output, in
   one column on the tube. The face is the reader's system monospace, as in
   the room; one phosphor hue and its dims from the grammar's tokens. Rank is
   rendition (brightness, underline, reverse). Every class is gtm- or scoped
   to .gm--terminal. No radius, no shadow.
   ========================================================================== */
.gm--terminal {
  --gm-tag-inverse: var(--gm-color-ground);
  background: var(--gm-color-ground); color: var(--gm-color-phosphor);
  font: 400 15px/1.6 var(--gm-font);
  max-width: 72rem; border: 1px solid #16321F;
}
.gm--terminal .gm__head { grid-template-columns: minmax(0, 1fr); }
.gm--terminal .gm__title { grid-row: auto; font: 400 1.6rem/1.2 var(--gm-font); color: var(--gm-color-bright); transform: scaleX(2); transform-origin: 0 0; width: 50%; white-space: nowrap; }
.gm--terminal .gm__title::before { content: "## "; color: var(--gm-color-dim); }
.gm--terminal .gm__lede { font-size: 15px; max-width: 80ch; }
.gm--terminal .gm__key, .gm--terminal .gm__get { font-size: 14px; opacity: 1; color: var(--gm-color-mid); max-width: 80ch; }
.gm--terminal .gm__get a { color: var(--gm-color-phosphor); }
.gm--terminal .gm-t { font-weight: 400; font-size: 13px; }
.gm--terminal .gm-t[data-g="record"] { color: var(--gm-color-bright); }
.gm--terminal .gm-t[data-g="translation"] { color: var(--gm-color-phosphor); }
.gm--terminal .gm-t[data-g="not_recorded"] { color: var(--gm-color-dim); }
.gm--terminal .gm-more summary { color: var(--gm-color-phosphor); font-weight: 400; }
.gm--terminal .gm-ls li { border-top-color: #16321F; }
.gm--terminal .gm-f__note { color: var(--gm-color-mid); opacity: 1; font-size: 14px; }
.gm--terminal :focus-visible { outline: 2px solid var(--gm-color-phosphor); outline-offset: 3px; }

.gtm-sess { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.8rem; max-width: 80ch; }
.gtm-sess > * { min-width: 0; }
.gtm-cmd { margin: 0 0 0.3rem; color: var(--gm-color-bright); }
.gtm-ps { color: var(--gm-color-dim); margin-right: 1ch; }
.gtm-f .gm-f__head { margin-bottom: 0.5rem; }
.gtm-f .gm-f__n { font-weight: 400; color: var(--gm-color-dim); }
.gtm-f .gm-f__n::before { content: "["; } .gtm-f .gm-f__n::after { content: "]"; }
.gtm-f .gm-f__name { font: 400 15px/1.6 var(--gm-font); color: var(--gm-color-ground); background: var(--gm-color-phosphor); padding: 0 1ch; text-transform: uppercase; }
.gtm-o { margin: 0; }
.gtm-d { color: var(--gm-color-dim); }
.gtm-k { display: inline-block; min-width: 10ch; color: var(--gm-color-mid); }

.gtm-sws { margin: 0 0 0.6rem; padding: 0; list-style: none; }
.gtm-sws li { display: flex; flex-wrap: wrap; align-items: center; gap: 0 1ch; }
.gtm-sws i { display: inline-block; width: 2ch; height: 1em; box-shadow: inset 0 0 0 1px #16321F; }
.gtm-alts { display: flex; flex-wrap: wrap; gap: 0 3ch; margin: 0; }

.gtm-dw { display: inline-block; transform: scaleX(2); transform-origin: 0 0; margin-bottom: 0.4rem; color: var(--gm-color-bright); }
.gtm-b { font-weight: 400; color: var(--gm-color-bright); }
.gtm-rv { background: var(--gm-color-phosphor); color: var(--gm-color-ground); padding: 0 0.5ch; }
@keyframes gtm-blink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: no-preference) {
  .gtm-bl { animation: gtm-blink 1s steps(1) 4; }
  .gtm-cur { animation: gtm-blink 1s steps(1) infinite; }
}
.gtm-cur { display: inline-block; width: 1ch; height: 1.1em; vertical-align: -0.2em; background: var(--gm-color-phosphor); }

.gtm-ruler { color: var(--gm-color-dim); overflow: hidden; white-space: nowrap; }
.gtm-tab { display: grid; grid-template-columns: 10ch 6ch 6ch; white-space: pre; }
.gtm-box { font: inherit; line-height: 1.25; color: var(--gm-color-mid); overflow-x: auto; }

.gtm-nav { display: flex; flex-wrap: wrap; gap: 0 2ch; }
.gtm-nav a { display: inline-flex; align-items: center; min-height: 44px; color: var(--gm-color-phosphor); text-decoration: none; }
.gtm-nav a:hover { text-decoration: underline; }
.gtm-nav a[aria-current] { background: var(--gm-color-phosphor); color: var(--gm-color-ground); padding: 0 1ch; min-height: 0; align-self: center; }
.gtm-ui { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2ch; margin-top: 0.8rem; align-items: start; }
.gtm-card { display: block; padding: 0 1ch 0.6rem; border: 1px solid var(--gm-color-mid); color: var(--gm-color-phosphor); text-decoration: none; }
.gtm-card .gtm-o { display: block; }
.gtm-card__t { display: inline-block; margin: -0.8em 0 0.3rem; padding: 0 1ch; background: var(--gm-color-ground); color: var(--gm-color-bright); }
.gtm-card:hover .gtm-card__t { background: var(--gm-color-phosphor); color: var(--gm-color-ground); }
.gtm-form { display: grid; gap: 0.3rem; }
.gtm-line { display: flex; align-items: center; margin: 0; min-height: 44px; border-bottom: 1px solid transparent; }
.gtm-line:focus-within { border-bottom-color: var(--gm-color-mid); }
.gtm-form input { flex: 1; min-width: 0; height: 44px; border: 0; background: transparent; color: var(--gm-color-phosphor); caret-color: var(--gm-color-phosphor); caret-shape: block; font: inherit; outline: none; }
.gtm-btn { justify-self: start; min-height: 44px; padding: 0 1ch; border: 0; border-radius: 0; background: var(--gm-color-phosphor); color: var(--gm-color-ground); cursor: pointer; }
.gtm-btn:hover { text-decoration: underline; }
.gtm-btn:active { background: transparent; color: var(--gm-color-phosphor); }

@media (max-width: 40rem) {
  .gtm-ui { grid-template-columns: minmax(0, 1fr); }
  .gm--terminal .gm__title { font-size: 1.5rem; transform: none; width: auto; white-space: normal; }
  .gm--terminal { overflow-wrap: anywhere; }
  .gtm-box { font-size: 13px; }
}