/* ==========================================================================
   whoami: the dossier terminal, set in the site's shared system.
   Tokens, nav, footer and page type come from /assets/site/site.css and
   pages.css. This file only styles the terminal and the classes that
   src/render.js and src/main.js write into it.
   ========================================================================== */

.wa-head-block { padding-bottom: clamp(28px, 5vh, 56px); }
.wa-title { margin-top: 18px; font-weight: 850; font-stretch: 118%; letter-spacing: -0.05em; line-height: .92; font-size: clamp(2.6rem, 7.4vw, 7.6rem); max-width: 14ch; }
.wa-skip-hint { margin-top: 16px; font-family: var(--mono); font-size: 12px; color: var(--ink-2); }

.wa-shell { padding-bottom: clamp(80px, 12vh, 140px); }
.wa-term { background: var(--screen); color: #C7CAD3; }
.wa-term-bar { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 14px 20px; border-bottom: 1px solid rgba(255,255,255,.08); font-family: var(--mono); font-size: 12px; color: #8A8E9B; }
.wa-term-url b { color: #FF7A45; font-weight: 500; }
.wa-body { padding: clamp(18px, 2.6vw, 32px); font-family: var(--mono); font-size: 13.5px; line-height: 1.85; min-height: 60svh; }
@media (max-width: 600px) { .wa-body { font-size: 12.5px; } }

.wa-line { white-space: pre-wrap; word-break: break-word; }
.wa-fade { animation: waFade .3s ease forwards; }
@keyframes waFade { from { opacity: 0; } }
.wa-boot { color: #F2F2EE; }
.wa-comment, .wa-dim, .wa-beat-label, .wa-dots { color: #8A8E9B; }
.wa-blank { line-height: .9; }
.wa-rule { height: 1px; background: rgba(255,255,255,.08); margin: 16px 0; }
.wa-beat-label::after { content: ' '; }
.wa-value { color: #3ED97E; }
.wa-miss { color: #8A8E9B; font-style: italic; }
.wa-head { color: #F2F2EE; font-weight: 500; letter-spacing: .14em; font-size: 11px; text-transform: uppercase; margin-bottom: 6px; }
.wa-kv { display: grid; grid-template-columns: 170px 1fr; gap: 0 16px; }
.wa-key { color: #7FB2FF; }
.wa-val { color: #C7CAD3; }
@media (max-width: 560px) { .wa-kv { grid-template-columns: 1fr; } }

/* the verdict is the moment: display type, the site's one accent */
.wa-verdict { margin: 12px 0 4px; }
.wa-verdict-device { font-family: var(--sans); font-weight: 850; font-stretch: 115%; letter-spacing: -0.04em; font-size: clamp(28px, 5vw, 56px); line-height: 1; color: #FF5B1F; word-break: break-word; }
.wa-verdict-humbled .wa-verdict-device { color: #FF9BD2; }
.wa-conf { margin: 10px 0 12px; }
.wa-conf-label { color: #8A8E9B; }
.wa-conf-label::after { content: '  '; white-space: pre; }
.wa-conf-value { color: #FF7A45; }
.wa-brag { color: #F2F2EE; }
.wa-humbled { color: #C7CAD3; }
.wa-egg { color: #A09F97; }

.wa-chip-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 16px; }
.wa-chip { font-family: var(--mono); font-size: 12px; color: #0D0E0C; background: #FF5B1F; border-radius: 999px; padding: 8px 15px; text-decoration: none; word-break: break-all; transition: transform .2s var(--ease); }
.wa-chip:hover { transform: translateY(-1px); }
.wa-copy { font-family: var(--mono); font-size: 11.5px; color: #C7CAD3; border-radius: 999px; padding: 7px 14px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.18); transition: background-color .2s, color .2s; }
.wa-copy:hover { background: rgba(255,255,255,.1); color: #fff; }

.wa-cursor { display: inline-block; width: 8px; height: 15px; background: #FF5B1F; vertical-align: text-bottom; animation: waBlink 1s steps(2, start) infinite; }
@keyframes waBlink { to { visibility: hidden; } }
.wa-cursor-idle { opacity: .45; }

.wa-raw { margin-top: 20px; font-family: var(--mono); font-size: 12px; line-height: 1.65; color: #C7CAD3; background: var(--screen); padding: 16px 18px; overflow-x: auto; white-space: pre; }
.wa-raw .jk { color: #7FB2FF; } .wa-raw .js { color: #3ED97E; } .wa-raw .jn { color: #FF7A45; }
.wa-raw .jb { color: #FF9BD2; } .wa-raw .jz { color: #8A8E9B; }

@media (prefers-reduced-motion: reduce) {
  .wa-cursor, .wa-fade { animation: none; }
  .wa-skip-hint { display: none; }
}