/* ═══════════════════════════════════════════════════════════
   jn@solutions — terminal interface
   Same palette and second typeface as the main site, so this reads
   as the same brand rather than a novelty page.
   Zero third-party JavaScript. Self-contained.
   ═══════════════════════════════════════════════════════════ */

:root{
  --ink:#0B0B0D;
  --panel:#101014;
  --paper:#E9E7E2;
  --accent:#FF5C1A;
  --green:#7FD98A;
  --dim:#6E6E77;
  --hair:#212127;
  --sel:rgba(255,92,26,.28);
  --pad:clamp(.9rem,2.4vw,2rem);
}

/* light mode is a printed blueprint, not an inverted terminal */
:root[data-theme="light"]{
  --ink:#EFEDE7;
  --panel:#F7F5F0;
  --paper:#16161A;
  --accent:#C4410F;
  --green:#2F6B39;
  --dim:#7A776E;
  --hair:#D6D2C7;
  --sel:rgba(196,65,15,.22);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
html,body{height:100%}

body{
  margin:0;
  background:var(--ink);
  color:var(--paper);
  font-family:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:clamp(.8125rem,.55vw + .68rem,.9375rem);
  line-height:1.65;
  overflow:hidden;
}

::selection{background:var(--sel)}

:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

.skip{position:absolute;left:1rem;top:-4rem;z-index:100;background:var(--accent);
  color:var(--ink);padding:.5rem .9rem;font-weight:700;transition:top .2s}
.skip:focus{top:1rem}

kbd{font:inherit;font-size:.92em;border:1px solid var(--hair);border-radius:3px;
  padding:0 .3em;color:var(--paper)}

/* ── window ───────────────────────────────────────────────── */
.term{
  height:100dvh;
  display:grid;
  grid-template-rows:auto 1fr auto auto;
  background:var(--panel);
  /* faint technical grid — the only decoration on the page */
  background-image:
    linear-gradient(to right,rgba(128,128,140,.045) 1px,transparent 1px),
    linear-gradient(to bottom,rgba(128,128,140,.045) 1px,transparent 1px);
  background-size:28px 28px;
}

.term__bar{
  display:flex;align-items:center;gap:1rem;
  padding:.6rem var(--pad);
  border-bottom:1px solid var(--hair);
  background:color-mix(in srgb,var(--ink) 55%,transparent);
}
.term__dots{display:flex;gap:.42rem}
.term__dots i{width:10px;height:10px;border-radius:50%;background:var(--hair);display:block}
.term__dots i:first-child{background:var(--accent)}
.term__title{margin:0;color:var(--dim);font-size:.78em;letter-spacing:.02em;
  flex:1;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.term__actions a{color:var(--dim);text-decoration:none;font-size:.78em;
  letter-spacing:.06em;border-bottom:1px solid transparent;transition:color .2s,border-color .2s}
.term__actions a:hover{color:var(--accent);border-bottom-color:var(--accent)}



/* ── view dock ────────────────────────────────────────────────
   One control, one place, on every view. Bottom-right so it never
   competes with the nav, and fixed so it is reachable from anywhere.
   Press V to cycle. */
.viewdock{
  position:fixed;right:var(--pad);bottom:1.25rem;z-index:60;
  display:flex;align-items:stretch;
  background:color-mix(in srgb,var(--ink) 88%,transparent);
  backdrop-filter:blur(14px);
  border:1px solid var(--hair);
  font-family:"JetBrains Mono",ui-monospace,monospace;
  font-size:.6875rem;letter-spacing:.09em;text-transform:uppercase;
  box-shadow:0 6px 28px rgba(0,0,0,.35);
}
.viewdock__label{
  display:flex;align-items:center;padding:.42rem .7rem;
  color:var(--muted,var(--dim));border-right:1px solid var(--hair);
}
.viewdock__label b{color:var(--paper);font-weight:400;margin-left:.4rem}
.viewdock a{
  display:flex;align-items:center;padding:.42rem .75rem;
  color:var(--muted,var(--dim));border-right:1px solid var(--hair);
  text-decoration:none;white-space:nowrap;
  transition:color .35s cubic-bezier(.76,0,.24,1),background .35s cubic-bezier(.76,0,.24,1);
}
.viewdock a span{margin-left:.42em}   /* flex items collapse the source space */
.viewdock a:last-child{border-right:0}
.viewdock a:hover{color:var(--paper)}
.viewdock a[aria-current="page"]{background:var(--accent);color:var(--ink)}
.viewdock kbd{display:flex;align-items:center;padding:0 .6rem;opacity:.55;
  border:0;border-left:1px solid var(--hair);border-radius:0;font-size:.9em}


@media (max-width:760px){
  .viewdock{right:.75rem;bottom:.75rem;font-size:.625rem}
  .viewdock__label,.viewdock kbd{display:none}
  .viewdock a{padding:.4rem .6rem}
}
@media (prefers-reduced-motion:reduce){ .viewdock a{transition:none} }

/* ── screen ───────────────────────────────────────────────── */
.term__screen{
  overflow-y:auto;overflow-x:hidden;
  padding:1.4rem var(--pad) .6rem;
  scrollbar-width:thin;scrollbar-color:var(--hair) transparent;
}
.term__screen::-webkit-scrollbar{width:10px}
.term__screen::-webkit-scrollbar-thumb{background:var(--hair)}

.term__out{white-space:pre-wrap;word-break:break-word}
.term__out > *{margin:0}

/* output vocabulary */
.o-cmd{color:var(--paper)}
.o-dim{color:var(--dim)}
.o-acc{color:var(--accent)}
.o-ok{color:var(--green)}
.o-err{color:var(--accent);font-weight:700}
.o-h{color:var(--paper);font-weight:700;letter-spacing:.02em}
.o-block{margin:.5rem 0 1.1rem}
.o-rule{color:var(--hair);user-select:none}
.o-link{color:var(--paper);border-bottom:1px solid var(--hair);cursor:pointer;
  background:none;border-left:0;border-right:0;border-top:0;font:inherit;padding:0}
.o-link:hover{color:var(--accent);border-bottom-color:var(--accent)}
.o-key{color:var(--dim)}
.o-bar{color:var(--accent)}

.o-echo{display:flex;gap:.55rem;margin-top:1.1rem;flex-wrap:wrap}
.o-echo .p{color:var(--dim)}
.o-echo .p b{color:var(--accent);font-weight:400}

/* ── prompt ───────────────────────────────────────────────── */
.term__form{display:flex;align-items:baseline;gap:.55rem;margin-top:1rem;
  padding-bottom:.4rem}
.term__prompt{white-space:nowrap;user-select:none;cursor:text}
.p-user{color:var(--accent)}
.p-at,.p-sep,.p-sig{color:var(--dim)}
.p-host{color:var(--paper)}
.p-path{color:var(--green)}
.p-sig{margin-left:.35rem}

.term__input{
  flex:1;min-width:0;
  background:none;border:0;outline:0;padding:0;
  font:inherit;color:var(--paper);
  caret-color:var(--accent);
}
.term__input::placeholder{color:var(--dim)}

/* busy state during the boot sequence */
.term.is-busy .term__form{opacity:.35;pointer-events:none}

/* ── status bar ───────────────────────────────────────────── */
.term__status{
  display:flex;align-items:center;gap:.7rem;flex-wrap:wrap;
  padding:.5rem var(--pad);
  border-top:1px solid var(--hair);
  background:color-mix(in srgb,var(--ink) 55%,transparent);
  color:var(--dim);font-size:.74em;letter-spacing:.03em;
}
.term__status b{color:var(--paper);font-weight:500}
.term__status .sep{color:var(--hair)}
.term__status .grow{flex:1}
@media (max-width:760px){ .term__status span:nth-child(n+6):not(.grow):not(#stClock){display:none} }

/* ── touch keys ───────────────────────────────────────────── */
.term__keys{display:none;gap:.4rem;padding:.5rem var(--pad) .75rem;
  border-top:1px solid var(--hair);overflow-x:auto;
  scrollbar-width:none;-ms-overflow-style:none}
.term__keys::-webkit-scrollbar{display:none}
.term__keys button{
  flex:0 0 auto;font:inherit;font-size:.8em;
  background:none;color:var(--paper);
  border:1px solid var(--hair);border-radius:999px;
  padding:.4rem .95rem;cursor:pointer;
}
.term__keys button:active{background:var(--accent);color:var(--ink);border-color:var(--accent)}
@media (hover:none),(max-width:760px){ .term__keys{display:flex} }

/* ── noscript ─────────────────────────────────────────────── */
.noscript{position:fixed;inset:0;display:grid;place-content:center;gap:1rem;
  background:var(--ink);padding:2rem;text-align:center;z-index:200}
.noscript a{color:var(--accent)}

/* ── motion ───────────────────────────────────────────────────
   There is none. The caret is the input's own (caret-color), the boot
   sequence is timed in JS and skipped under reduced motion, and nothing
   else moves. Nothing to disable. */

/* ── dock placement inside the terminal ───────────────────────
   Appended last on purpose: the shared rules above include a
   (max-width:760px) block, so these have to come after it to win. */
.viewdock{bottom:4.25rem}                       /* clears the status bar */
@media (max-width:760px){ .viewdock{bottom:7.75rem} }   /* clears the touch-key strip too */