/* The walkthrough (guide/): the wall's chassis (home/chassis.css) with three screens. Left, the steps, as the keypad's
   glass; middle, the step, where the work is done (a working page "in a TV", home/embed.css, or the step's own
   panel); right, back and next. On a desktop it fits the window; on a phone the screens stack. */

.gd .journeys { grid-column: 4; grid-row: 2; justify-self: end; display: flex; gap: calc(var(--u) * .5); }
.jkey { font-size: calc(var(--u) * .66); padding: calc(var(--u) * .55) calc(var(--u) * 1); letter-spacing: .16em; color: var(--lilac); }
.jkey[aria-selected="true"] { color: var(--red); text-shadow: 0 1px 0 rgba(0, 0, 0, .8), 0 0 calc(var(--u) * .3) rgba(236, 48, 19, .55); }

.gwall { display: grid; grid-template-columns: calc(var(--u) * 18) minmax(0, 1fr) calc(var(--u) * 16); gap: calc(var(--u) * 1.1); min-height: 0; }
.gwall > .tv > .bezel { height: 100%; }
.tv { min-width: 0; min-height: 0; display: flex; flex-direction: column; }
.tv > .bezel { flex: 1; }

/* the steps */
.glass.pad {
  display: flex; flex-direction: column; gap: calc(var(--u) * .8);
  padding: calc(var(--u) * 1.3) calc(var(--u) * 1.1);
  background: radial-gradient(90% 70% at 50% 35%, #1d1230, #0a0612 75%);
}
.glass.pad > :not(.fx) { position: relative; z-index: 1; }
.glass.pad .fx { opacity: .55; }
.glabel { margin: 0; font: 600 calc(var(--u) * .62)/1 var(--mono); letter-spacing: .3em; text-transform: uppercase; color: rgba(205, 184, 255, .55); text-align: center; }
.steplist { list-style: none; margin: 0; padding: 0; display: grid; gap: calc(var(--u) * .35); overflow-y: auto; min-height: 0; flex: 1; align-content: start; }
.steplist button {
  width: 100%; display: grid; grid-template-columns: 2.1em 1fr auto; align-items: center; gap: .6em; text-align: left;
  padding: calc(var(--u) * .55) calc(var(--u) * .6); border: 0; border-radius: 6px; background: none; cursor: pointer;
  font: 400 calc(var(--u) * .74)/1.3 var(--mono); color: rgba(221, 218, 255, .62);
}
.steplist button b { font: 800 calc(var(--u) * .8)/1 var(--label); color: rgba(205, 184, 255, .45); }
.steplist button i { font-style: normal; color: var(--ok); font-size: .9em; }
.steplist button:hover, .steplist button:focus-visible { outline: none; color: var(--moon); background: rgba(205, 184, 255, .06); }
.steplist [aria-current="step"] button { color: var(--moon); background: rgba(236, 48, 19, .08); box-shadow: inset 0 0 0 1px rgba(236, 48, 19, .35); }
.steplist [aria-current="step"] button b { color: var(--red); text-shadow: 0 0 calc(var(--u) * .3) rgba(236, 48, 19, .6); }
.progress { align-self: center; font-size: calc(var(--u) * 1.05); }

/* the step */
.gscreen .glass { background: radial-gradient(90% 70% at 50% 25%, #1d1230, #0a0612 78%); }
.gs { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; gap: calc(var(--u) * .8); padding: calc(var(--u) * 1.4) calc(var(--u) * 1.6) calc(var(--u) * 1.2); }
.gs-head { display: flex; align-items: center; gap: calc(var(--u) * 1); flex-wrap: wrap; }
.gs-num { font-size: calc(var(--u) * 1.15); }
.gs-title { margin: 0; flex: 1; min-width: 0; font: 800 calc(var(--u) * 1.5)/1.15 var(--label); letter-spacing: .02em; color: var(--red); text-shadow: 0 0 calc(var(--u) * .5) rgba(236, 48, 19, .6); }
.gs-who { display: flex; gap: .4em; flex-wrap: wrap; }
.gs-who span { font: 800 calc(var(--u) * .56)/1 var(--label); letter-spacing: .18em; text-transform: uppercase; padding: .5em .7em; border-radius: 3px; border: 1px solid rgba(205, 184, 255, .3); color: rgba(205, 184, 255, .75); }
.gs-who span.wallet { border-color: rgba(236, 48, 19, .5); color: #ffb3a6; }
.gs-text { max-width: 60em; font: 400 calc(var(--u) * .82)/1.6 var(--mono); color: rgba(221, 218, 255, .84); }
.gs-text p { margin: 0 0 .5em; }
.gs-text b { color: var(--moon); font-weight: 600; }
.gs-work { overflow-y: auto; min-height: 0; font: 400 calc(var(--u) * .8)/1.55 var(--mono); color: rgba(221, 218, 255, .84); scrollbar-width: thin; scrollbar-color: rgba(205, 184, 255, .3) transparent; }
.gs-work:empty { display: none; }
.gs-frames { flex: 1; min-height: 0; position: relative; border-radius: calc(var(--u) * .7); overflow: hidden; box-shadow: inset 0 0 0 1px rgba(205, 184, 255, .12); }
.gs-frames iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; background: #0a0612; }
.gs-frames iframe[hidden] { display: none; }
.gs-work:not(:empty) + .gs-frames:not([hidden]) { flex: 1; }
.gs:has(> .gs-frames[hidden]) > .gs-work { flex: 1; }

/* step panels: cards, checks, code to copy */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, calc(var(--u) * 22)), 1fr)); gap: calc(var(--u) * .9); }
.card { padding: calc(var(--u) * 1) calc(var(--u) * 1.1); border-radius: calc(var(--u) * .7); background: rgba(10, 6, 18, .6); box-shadow: inset 0 0 0 1px rgba(205, 184, 255, .12); }
.card h3 { margin: 0 0 .45em; font: 800 calc(var(--u) * .78)/1.2 var(--label); letter-spacing: .14em; text-transform: uppercase; color: var(--moon); }
.card p { margin: 0 0 .5em; }
.card .links { display: flex; flex-wrap: wrap; gap: .4em 1em; }
.card .links a, .gs-work a { color: var(--lilac); text-decoration: none; border-bottom: 1px dotted rgba(205, 184, 255, .35); }
.card .links a:hover, .gs-work a:hover { color: var(--moon); border-bottom-color: var(--red); }
.check { display: flex; align-items: center; gap: .6em; margin-top: .6em; cursor: pointer; color: var(--moon); }
.check input { accent-color: #EC3013; width: 1.05em; height: 1.05em; }
.reqs { margin: .2em 0 0; padding-left: 1.2em; }
.reqs li { margin: .2em 0; }
.reqs li::marker { color: var(--red); }
.code { position: relative; margin: .45em 0 .8em; }
.code pre {
  margin: 0; padding: calc(var(--u) * .8) calc(var(--u) * 1) calc(var(--u) * .8); padding-right: calc(var(--u) * 6);
  border-radius: calc(var(--u) * .5); background: #07040c; box-shadow: inset 0 0 0 1px rgba(205, 184, 255, .14);
  font: 400 calc(var(--u) * .7)/1.55 var(--mono); color: #ffd9d2; white-space: pre-wrap; word-break: break-all;
}
.code .copybtn { position: absolute; top: calc(var(--u) * .45); right: calc(var(--u) * .45); font-size: calc(var(--u) * .56); padding: calc(var(--u) * .45) calc(var(--u) * .7); }
.lanes { display: flex; gap: calc(var(--u) * .5); margin-bottom: calc(var(--u) * .8); }
.lanes .key { font-size: calc(var(--u) * .66); padding: calc(var(--u) * .55) calc(var(--u) * 1); color: var(--lilac); }
.lanes .key[aria-pressed="true"] { color: var(--red); }
.pick { display: flex; align-items: center; gap: calc(var(--u) * 1.4); flex-wrap: wrap; }
.pick .lcd { display: flex; align-items: center; gap: .15em; font-size: calc(var(--u) * 2); padding: calc(var(--u) * .4) calc(var(--u) * .8); }
.pick .lcd input { width: 5ch; border: 0; outline: none; background: transparent; font: inherit; color: inherit; letter-spacing: .1em; text-shadow: inherit; caret-color: var(--red); }
.pick .lcd input::placeholder { color: rgba(236, 48, 19, .28); }
.pick img { width: calc(var(--u) * 9); height: calc(var(--u) * 9); border-radius: calc(var(--u) * .6); image-rendering: pixelated; box-shadow: 0 0 0 1px rgba(205, 184, 255, .2), 0 0 calc(var(--u) * 1.4) rgba(176, 38, 255, .25); background: #07040c; }
.pairrow { display: flex; gap: calc(var(--u) * .6); align-items: stretch; flex-wrap: wrap; }
.pairrow input {
  flex: 1 1 22em; min-width: 0; outline: none; background: none; color: var(--red); caret-color: var(--red);
  font: 800 calc(var(--u) * .78)/1.3 var(--label); padding: calc(var(--u) * .6) calc(var(--u) * .8);
  border-style: solid; border-width: 0; border-color: transparent;
  border-image: url(../home/art/lcd.webp) 46 fill / calc(var(--u) * .3847) / calc(var(--u) * .1672) stretch;
}
.pairrow input::placeholder { color: rgba(236, 48, 19, .35); }
.pairrow .key { font-size: calc(var(--u) * .7); padding: calc(var(--u) * .6) calc(var(--u) * 1.2); }
.hint { margin: .4em 0 0; font-size: .92em; color: rgba(205, 184, 255, .6); }
.hint.err { color: #ff7a63; }

/* the channel change between steps */
.clip { position: absolute; inset: 0; z-index: 5; width: 100%; height: 100%; object-fit: cover; background: #07040c; opacity: 0; pointer-events: none; }
.clip.on { opacity: 1; }

/* back and next */
.gnav .glass.pad { justify-content: center; align-items: center; text-align: center; gap: calc(var(--u) * 1); }
.gnext { width: 100%; padding: calc(var(--u) * 1.1) 0; font-size: calc(var(--u) * .95); letter-spacing: .24em; color: var(--red); text-shadow: 0 1px 0 rgba(0, 0, 0, .8), 0 0 calc(var(--u) * .3) rgba(236, 48, 19, .55); }
.gnext.ready { animation: ready 1.6s ease-in-out infinite; }
@keyframes ready { 50% { filter: brightness(1.3) drop-shadow(0 0 calc(var(--u) * .6) rgba(236, 48, 19, .7)); } }
.gback { width: 100%; padding: calc(var(--u) * .7) 0; font-size: calc(var(--u) * .7); color: var(--lilac); }
.gdone { margin: 0; min-height: 1.4em; font: 800 calc(var(--u) * .66)/1.3 var(--label); letter-spacing: .2em; text-transform: uppercase; color: var(--ok); }
.gopen { font: 400 calc(var(--u) * .62)/1.4 var(--mono); color: rgba(205, 184, 255, .62); text-decoration: none; border-bottom: 1px dotted rgba(205, 184, 255, .3); }
.gopen:hover { color: var(--moon); border-bottom-color: var(--red); }
.gnote { margin: 0; font: 400 calc(var(--u) * .58)/1.5 var(--mono); color: rgba(205, 184, 255, .45); }

.foot { height: var(--foot); display: flex; align-items: center; justify-content: center; gap: 1.2em; font: 500 10px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: #6b5d95; }
.foot a { color: #c48bff; text-decoration: none; }
.foot a:hover { color: #ddd9ff; }

/* a desktop: everything in one window */
@media (min-width: 900px) and (min-height: 620px) {
  .gd .rack { height: calc(100vh - var(--foot)); grid-template-rows: auto minmax(0, 1fr); }
}

/* tablets and phones: one screen under another */
@media (max-width: 899px), (max-height: 619px) {
  :root { --u: clamp(9px, 1.6vw + .2vh, 14px); }
  .rack { padding: 14px; gap: 12px; }
  .hud { grid-template-columns: auto minmax(0, 1fr); }
  .clock { display: none; }
  .gd .journeys { grid-column: 1 / -1; grid-row: 3; justify-self: start; margin-top: 8px; }
  .jkey { font-size: 11px; padding: 9px 14px; }
  .gwall { grid-template-columns: 1fr; gap: 12px; }
  .steplist { grid-auto-flow: column; grid-auto-columns: max-content; overflow-x: auto; overflow-y: hidden; }
  .steplist button { grid-template-columns: auto auto auto; font-size: 12px; }
  .gscreen .glass { height: auto; min-height: 78vh; }
  .gs { position: relative; min-height: 78vh; }
  .gs-frames { min-height: 60vh; }
  .gs-text, .gs-work { font-size: 13px; }
  .gs-title { font-size: 20px; }
  .gnav .glass.pad { flex-direction: row; flex-wrap: wrap; }
  .gnext, .gback { width: auto; flex: 1 1 40%; font-size: 12px; }
  .gnote, .glabel, .gopen, .gdone { font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) { .gnext.ready { animation: none; } }

/* the footer's links on a phone: the footer grows */
.foot a { white-space: nowrap; }
@media (max-width: 899px) {
  .foot { height: auto; min-height: var(--foot); padding: 12px 16px; flex-wrap: wrap; row-gap: 8px; line-height: 1.6; text-align: center; }
}