/* The Bench: three columns on a laptop (ticket, computer, method), stacked
   on a phone. Paper panels on the circuit-board wall. */
.sim { max-width: 1320px; }
.sim-head { display: flex; justify-content: space-between; align-items: end; gap: 1rem; flex-wrap: wrap; padding: 1.2rem 0 1rem; }
.h1-xs { font-size: clamp(2rem, 5vw, 3rem); margin: .2rem 0 0; }
.sim-top { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.tickets { display: inline-flex; border: 3px solid var(--ink); box-shadow: 4px 4px 0 var(--ink); }
.tickets button { font: inherit; font-family: var(--display); text-transform: uppercase; font-size: .85rem; padding: .5rem .75rem .4rem; border: 0; background: var(--cream); color: var(--ink); cursor: pointer; }
.tickets button + button { border-left: 2px solid var(--ink); }
.tickets button.on { background: var(--hit); }
.clock { font-family: var(--mono); font-size: 1.4rem; background: var(--ink); color: var(--hit); padding: .25rem .6rem; border: 2px solid var(--hit); }
.clock small { font-size: .7rem; color: var(--cream); }
.mini { font: inherit; font-family: var(--mono); font-size: .78rem; background: var(--cream); color: var(--ink); border: 2px solid var(--ink); padding: .3rem .55rem; cursor: pointer; }
.mini:disabled { opacity: .4; cursor: default; }
.mini[aria-pressed="true"] { background: var(--hit); }
.tool { font: inherit; font-size: .9rem; font-weight: 700; background: var(--cream); color: var(--ink); border: 2px solid var(--ink); box-shadow: 3px 3px 0 var(--ink); padding: .45rem .75rem; cursor: pointer; }
.tool:hover { background: var(--hit); }
.tool.costly { background: #fff6f0; border-color: var(--copper); box-shadow: 3px 3px 0 var(--copper); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

.sim-grid { display: grid; grid-template-columns: minmax(250px, 1fr) minmax(0, 2.1fr) minmax(250px, 1fr); gap: 1rem; align-items: start; }
.panel { color-scheme: light; background: var(--paper); color: var(--ink); border: 3px solid var(--ink); box-shadow: 5px 5px 0 var(--ink); padding: .9rem 1rem; min-width: 0; }
.panel h3 { font-family: var(--display); font-weight: normal; text-transform: uppercase; font-size: 1.05rem; margin: 1rem 0 .5rem; border-bottom: 2px solid var(--ink); }
.panel .tag { color: var(--copper); }
.ticket-card h2 { font-family: var(--display); font-weight: normal; text-transform: uppercase; font-size: 1.3rem; line-height: 1.05; margin: .2rem 0; }
.ticket-card .who { margin: 0; font-size: .85rem; color: var(--muted); }
.ticket-card .says { margin: .5rem 0 0; font-size: 1.1rem; font-weight: 700; background: #fff; border-left: 5px solid var(--hit); padding: .5rem .7rem; }
.questions { list-style: none; padding: 0; margin: 0; display: grid; gap: .35rem; }
.q { font: inherit; font-size: .88rem; text-align: left; width: 100%; background: #fff; color: var(--ink); border: 1.5px solid var(--ink); padding: .4rem .55rem; cursor: pointer; }
.q:hover { background: var(--hit); }
.q.asked { background: transparent; border-style: dashed; cursor: default; color: var(--muted); }
.questions .a { margin: .2rem 0 .3rem .6rem; font-size: .88rem; font-style: italic; }
#theory { font: inherit; font-size: .88rem; width: 100%; padding: .4rem; border: 1.5px solid var(--ink); background: #fff; margin-bottom: .5rem; }
.theories { padding-left: 0; list-style: none; margin: .6rem 0 0; font-size: .88rem; }
.theories li { background: #fff; border-left: 4px solid var(--copper); padding: .3rem .5rem; margin-top: .3rem; }

/* the computer */
.views { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .8rem; }
.views button { font: inherit; font-family: var(--display); text-transform: uppercase; font-size: .9rem; background: var(--cream); color: var(--ink); border: 2px solid var(--ink); padding: .4rem .8rem .3rem; cursor: pointer; }
.views button[aria-pressed="true"] { background: var(--ink); color: var(--hit); }
.views .strap { margin-left: auto; }
.views .strap[aria-pressed="true"] { background: var(--wall); color: var(--hit); }
.stage { min-height: 380px; }
.row { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-top: .8rem; }
.status { font-family: var(--mono); font-size: .8rem; color: var(--muted); }
.help { font-size: .82rem; color: var(--muted); margin: .6rem 0 0; }

.desk { display: flex; align-items: flex-end; justify-content: center; gap: 1.4rem; flex-wrap: wrap; background: linear-gradient(transparent 85%, #b8a988 85%); padding: .5rem; }
.monitor { background: var(--ink); padding: 10px 10px 0; border-radius: 6px 6px 2px 2px; width: min(100%, 400px); }
.screen { position: relative; aspect-ratio: 16 / 10; background: #050806; overflow: hidden; display: flex; align-items: center; justify-content: center; color: var(--cream); font-family: var(--mono); font-size: .8rem; }
.screen.dark { background: #000; }
.nosignal { border: 1px solid #555; background: #111; padding: .5rem .9rem; text-align: center; color: #bbb; }
.nosignal small { display: block; font-size: .7rem; color: #888; }
.screen.post { flex-direction: column; gap: .8rem; }
.post-logo { font-family: var(--display); font-size: 1.8rem; letter-spacing: .1em; color: var(--hit); }
.f2 { font: inherit; background: none; color: var(--cream); border: 1px dashed var(--cream); padding: .25rem .6rem; cursor: pointer; }
.f2:hover { background: var(--cream); color: var(--ink); }
.post-bar { width: 50%; height: 4px; background: #333; }
.post-bar i { display: block; height: 100%; width: 0; background: var(--hit); animation: post 3.6s linear forwards; }
@keyframes post { to { width: 100%; } }
.screen.text { flex-direction: column; gap: .8rem; padding: 1rem; text-align: left; align-items: flex-start; justify-content: flex-start; }
.screen.desk-os { background: radial-gradient(circle at 30% 30%, #2e6a48, #10301e); align-items: flex-start; justify-content: flex-start; padding: .8rem; }
.icon { font: inherit; display: grid; justify-items: center; gap: .2rem; background: none; border: 1px solid transparent; color: #fff; cursor: pointer; padding: .3rem; }
.icon:hover { border-color: rgba(255,255,255,.5); }
.globe { font-size: 1.8rem; line-height: 1; color: var(--hit); }
.taskbar { position: absolute; left: 0; right: 0; bottom: 0; height: 26px; background: rgba(0,0,0,.65); display: flex; justify-content: flex-end; align-items: center; padding: 0 .5rem; }
.netico { font: inherit; font-size: .7rem; background: none; border: 0; color: #cfe; cursor: pointer; }
.netico.down { color: #f99; }
.browser { position: absolute; inset: 8% 8% 32px; background: #fff; color: var(--ink); display: flex; flex-direction: column; box-shadow: 0 6px 20px rgba(0,0,0,.5); }
.b-bar { display: flex; justify-content: space-between; align-items: center; background: #ddd; padding: .2rem .5rem; font-size: .7rem; }
.x { font: inherit; background: none; border: 0; cursor: pointer; font-size: 1rem; line-height: 1; }
.b-ok, .b-err { flex: 1; display: grid; place-content: center; text-align: center; gap: .3rem; }
.b-ok b { font-family: var(--display); font-size: 1.4rem; color: var(--wall); }
.b-err b { font-size: 1.1rem; }
.bios { position: absolute; inset: 0; background: #1d2b6b; color: #e8e8f0; padding: .6rem .8rem; display: flex; flex-direction: column; gap: .3rem; }
.bios-h { margin: 0; font-weight: 700; color: #fff; border-bottom: 1px solid #8090d0; }
.bios-sub { margin: 0; font-size: .7rem; color: #b8c0f0; }
.bootlist { list-style: none; padding: 0; margin: .2rem 0; display: grid; gap: .25rem; }
.bootdev { display: flex; align-items: center; gap: .4rem; background: #2c3d8a; padding: .2rem .4rem; }
.bootdev.off { opacity: .6; }
.bootdev.dragging { outline: 2px dashed var(--hit); }
.bootdev label { flex: 1; cursor: pointer; }
.grip { cursor: grab; touch-action: none; padding: 0 .2rem; color: #b8c0f0; }
.bootdev .mini { padding: 0 .35rem; font-size: .65rem; }
.bios .save { align-self: flex-start; margin-top: auto; }
.mon-bar { display: flex; justify-content: flex-end; align-items: center; gap: .4rem; padding: .35rem 0; }
.mon-bar .mini { font-size: .68rem; padding: .15rem .4rem; background: #333; color: #ddd; border-color: #555; }
.led { width: 8px; height: 8px; border-radius: 50%; background: #333; display: inline-block; }
.led.on { background: #4f4; box-shadow: 0 0 6px #4f4; }
.led.amber { background: #fb3; box-shadow: 0 0 6px #fb3; }
.tower { position: relative; width: 120px; height: 230px; background: linear-gradient(90deg, #2a2a2a, #3a3a3a); border: 3px solid var(--ink); border-radius: 4px; display: grid; justify-items: center; align-content: start; gap: .6rem; padding-top: 1rem; }
.tower.open { background: repeating-linear-gradient(45deg, #2a2a2a, #2a2a2a 8px, #343434 8px, #343434 16px); }
.tower-name { font-family: var(--mono); font-size: .7rem; color: #999; }
.power { font-size: 1.6rem; width: 52px; height: 52px; border-radius: 50%; border: 3px solid var(--hit); background: #111; color: var(--hit); cursor: pointer; }
.power:hover { background: var(--hit); color: var(--ink); }
.fans { font-family: var(--mono); font-size: .65rem; color: #9c9; animation: hum 1s steps(2) infinite; }
@keyframes hum { 50% { opacity: .5; } }

/* the back */
.rear { display: grid; grid-template-columns: .8fr 1.4fr 1.2fr; gap: .6rem; background: #2a2a2a; border: 3px solid var(--ink); padding: .6rem; }
.zone { background: #3a3a3a; border: 1.5px solid #555; padding: .4rem; display: grid; gap: .4rem; align-content: start; }
.zone-gpu { background: #333a44; }
.zone-name { font-family: var(--mono); font-size: .68rem; color: #ccc; text-transform: uppercase; letter-spacing: .08em; }
.port { position: relative; display: flex; flex-direction: column; gap: .2rem; background: #222; border: 1.5px solid #666; padding: .35rem; min-height: 64px; cursor: pointer; }
.port.droppable, .tray.droppable { outline: 3px solid var(--hit); }
.port:focus-visible { outline: 3px solid var(--hit); }
.hole { width: 34px; height: 12px; background: #000; border: 2px solid #888; }
.t-eth .hole { width: 22px; height: 18px; }
.t-power .hole { width: 30px; height: 20px; border-radius: 3px; }
.t-dp .hole { clip-path: polygon(0 0, 100% 0, 100% 100%, 15% 100%, 0 70%); }
.plabel { font-family: var(--mono); font-size: .65rem; color: #ddd; }
.tray { margin-top: .8rem; background: #fff; border: 2px dashed var(--ink); padding: .5rem; min-height: 64px; display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.tray .zone-name { color: var(--muted); width: 100%; }
.plug { font: inherit; display: grid; text-align: left; background: var(--hit); color: var(--ink); border: 2px solid var(--ink); padding: .25rem .45rem; cursor: grab; touch-action: none; font-size: .78rem; line-height: 1.15; }
.plug small { font-size: .65rem; }
.plug.seated { background: var(--cream); }
.plug.picked { outline: 3px solid var(--copper); }
.plug.lifting { opacity: .35; }
.plug.ghost { position: fixed; z-index: 50; pointer-events: none; transform: translate(-50%, -50%) rotate(-3deg); box-shadow: 4px 4px 0 var(--ink); }
.c-net { background: #8fc8ff; }
.c-power.seated, .c-power { }
.c-video { background: #f0b0a0; }
.c-kbd { background: #c8e6a0; }
.plug.seated { filter: saturate(.6); }

/* the inside */
.inside { display: grid; gap: .6rem; }
.mobo { display: grid; grid-template-columns: 1fr 1.3fr; grid-template-areas: "cpu slots" "gpu gpu" "ssd psu"; gap: .6rem; background: #1a4a2e; border: 3px solid var(--ink); padding: .8rem; color: var(--cream); font-family: var(--mono); font-size: .8rem; }
.mobo small { display: block; font-size: .65rem; opacity: .8; }
.cpu { grid-area: cpu; background: #555; border: 2px solid #999; display: grid; place-content: center; text-align: center; min-height: 110px; }
.slots { grid-area: slots; display: grid; grid-template-columns: repeat(4, 1fr); gap: .35rem; }
.slot { position: relative; background: #0d2818; border: 1.5px solid #6a8; min-height: 110px; display: flex; flex-direction: column; align-items: center; padding-top: .2rem; }
.slot-n { font-size: .6rem; }
.stick { font: inherit; font-size: .65rem; writing-mode: vertical-rl; flex: 1; width: 70%; margin: .2rem 0; background: var(--wall); color: var(--hit); border: 2px solid var(--hit); cursor: pointer; }
.stick.loose { transform: rotate(8deg) translateY(-8px); border-color: var(--copper); color: #fff; background: #5a2d1a; }
.gpu-card { grid-area: gpu; background: #222; border: 2px solid #777; padding: .5rem; }
.ssd { grid-area: ssd; background: #333; border: 2px solid #888; padding: .5rem; }
.psu-box { grid-area: psu; background: #111; border: 2px dashed var(--copper); padding: .5rem; color: #f9c; }

/* the method + log */
.method { list-style: none; padding: 0; margin: 0; display: grid; gap: .45rem; }
.method li { display: grid; grid-template-columns: 1.8rem minmax(0, 1fr); gap: .5rem; font-size: .85rem; }
.method .n { display: grid; place-content: center; width: 1.6rem; height: 1.6rem; border: 2px solid var(--ink); border-radius: 50%; font-family: var(--mono); font-size: .75rem; }
.method li.done .n { background: var(--wall); color: var(--hit); border-color: var(--wall); }
.method b { display: block; }
.method small { display: block; color: var(--muted); }
.method em { display: block; color: var(--copper); font-style: normal; font-weight: 700; }
.safety-count { font-family: var(--mono); font-size: .8rem; margin: .8rem 0 0; color: var(--wall); }
.safety-count.bad { color: var(--copper); font-weight: 700; }
.log { list-style: none; padding: 0; margin: 0; max-height: 360px; overflow: auto; font-size: .82rem; display: grid; gap: .3rem; }
.log li { background: #fff; padding: .3rem .45rem; border-left: 4px solid #ccc; }
.log time { font-family: var(--mono); font-size: .72rem; color: var(--muted); }
.log .k-ask { border-left-color: var(--hit); }
.log .k-theory { border-left-color: var(--copper); }
.log .k-obs { border-left-color: #6a8fd0; }
.log .k-good { border-left-color: var(--wall); }
.log .k-bad, .log .k-warn { border-left-color: #c03; }
.log .k-hint { border-left-color: var(--hit); font-style: italic; }
.drawer { margin-top: 1rem; border-top: 2px dashed var(--ink); padding-top: .6rem; }
.drawer summary { cursor: pointer; font-family: var(--display); text-transform: uppercase; }

.notes { margin-top: 1rem; }
.notes h3 { margin-top: 0; }
.notes textarea { font: inherit; width: 100%; border: 2px solid var(--ink); padding: .6rem; background: #fff; }
.notes-msg { color: var(--copper); font-weight: 700; min-height: 1.2em; margin: .3rem 0; }
.notes .btn:disabled { opacity: .5; cursor: not-allowed; }

.summary { color-scheme: light; max-width: 640px; width: calc(100% - 32px); border: 3px solid var(--ink); box-shadow: 8px 8px 0 var(--ink); background: var(--paper); color: var(--ink); padding: 1.2rem 1.4rem; }
.summary::backdrop { background: rgba(0,0,0,.6); }
.summary h2 { font-family: var(--display); font-weight: normal; text-transform: uppercase; margin: 0 0 .5rem; }
.summary .big { font-weight: 700; font-size: 1.05rem; }
.sum-steps { list-style: none; padding: 0; }
.sum-steps li { padding: .2rem 0; }
.sum-steps li.no { color: var(--copper); }
.sum-steps em { display: block; font-size: .85rem; margin-left: 1.3rem; }
.sum-bad { color: var(--copper); font-weight: 700; }
.copytext { width: 100%; font-family: var(--mono); font-size: .78rem; border: 2px solid var(--ink); padding: .5rem; }

@media (max-width: 1000px) {
  .sim-grid { grid-template-columns: 1fr 1fr; }
  .sim-center { grid-column: 1 / -1; grid-row: 1; }
}
@media (max-width: 640px) {
  .sim-grid { grid-template-columns: 1fr; }
  .rear { grid-template-columns: 1fr; }
  .views .strap { margin-left: 0; }
}