/* The desk: one front elevation in a 1068 x 530 SVG (app/pages/desk.py). desk.js only says which entry the
   readout shows (class "on") and where the visor goes; the motion lives here and plays once. */
.desk{--ink:#15161a;--amber:#c98a3f;--out:cubic-bezier(.25,1,.5,1)}

/* Layout: the drawing pans sideways on narrow screens; the readout sits under the desk on wide ones. Wide screens
   fit the whole drawing in the viewport height (1068 / 530), so the readout shows next to what it describes. */
.desk-fig{position:relative;max-width:max(860px,calc((100svh - 24px)*2.015));margin:0 auto;container-type:inline-size}
.desk-pan{overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none}
.desk-pan::-webkit-scrollbar{display:none}
.desk-svg{display:block;width:100%;min-width:860px;height:auto;overflow:visible}

/* Drawing */
.desk-svg text{font-family:var(--font-mono);white-space:pre}
.desk-svg .s{stroke:var(--ink);stroke-width:1.1;stroke-linejoin:round}
.desk-svg .wood{fill:#e7dccd}
.desk-svg .metal{fill:#dddcd8}
.desk-svg .scr{fill:var(--ink)}
.desk-svg .cable{fill:none;stroke:#2b2c31;stroke-width:2;stroke-linecap:round}
.desk-svg .yeti{fill:#2a2b30}
.desk-svg .bt{font:600 8.4px var(--font-sans);letter-spacing:.01em}
.desk-svg .note text{font:500 8.6px var(--font-sans);fill:#3b3320}
.desk-svg .note{filter:drop-shadow(0 1.5px 1px #15161a29)}
.desk-svg .wt{font-size:6.6px;fill:#e6e6e273}
.desk-svg .tab{fill:transparent;stroke:#ffffff12}
.desk-svg .tab.act{fill:#ffffff0d}
.desk-svg .tt{font-size:7.4px;fill:#e6e6e2b3}
.desk-svg .code text{font-size:8px;fill:#e6e6e2d9}
.desk-svg .code .gut{fill:#e6e6e24d}
.desk-svg .code .kw,.desk-svg .code .pr{fill:var(--amber)}
.desk-svg .code .num{fill:#9cc4a9}
.desk-svg .code .com,.desk-svg .code .dim{fill:#e6e6e266}
.desk-svg .mb{font-size:6px;font-weight:600;fill:#e6e6e2cc}
.desk-svg .kp{font-size:7.4px;fill:var(--amber);letter-spacing:.06em}
.desk-svg .caret{fill:#e6e6e2}

/* Pointing: the visor (corners and a name) follows the pointer from thing to thing and holds over the gaps; words on
   screen turn amber, dock icons grow and books slide out of the stack. */
.desk-svg .it{cursor:pointer;pointer-events:auto}
.desk-svg .wake{pointer-events:none}  /* a screen belongs to its device; the tools on it stay links */
.desk.js .desk-svg .it{outline:none}  /* the visor marks focus */
.desk-svg .pad{fill:transparent}
.desk-svg .tok{text-decoration:underline;text-decoration-color:#e6e6e24d;text-underline-offset:2px}
.desk-svg .it:is(:hover,.on,:focus-visible) .tok{fill:var(--amber);text-decoration-color:currentColor}
.desk-svg .sp{transition:transform .35s var(--out)}
.desk-svg .it:is(:hover,.on,:focus-visible) .sp{transform:translateX(-10px)}
.desk-svg .dk{transition:transform .25s var(--out);transform-box:fill-box;transform-origin:50% 100%}
.desk-svg .it:is(:hover,.on,:focus-visible) .dk{transform:scale(1.12)}
.desk-svg .det{opacity:0;pointer-events:none;transition:opacity .25s}
.desk-svg .det.on{opacity:1}
.desk-svg .dc{fill:none;stroke:var(--amber);stroke-width:1.8;stroke-linecap:square}
.desk-svg .dt{stroke:none}
.desk-svg .dt rect{fill:var(--amber)}
.desk-svg .dt text{font-size:7.6px;font-weight:600;letter-spacing:.04em;fill:var(--ink)}

/* Waking up, once: the screens light, the dock rises, the terminal types its commands one after the other. */
@keyframes desk-wake{from{opacity:0}}
@keyframes desk-rise{from{opacity:0;transform:translateY(5px)}}
@keyframes desk-type{from{clip-path:inset(-2px 100% -2px 0)}to{clip-path:inset(-2px 0 -2px 0)}}
@keyframes desk-blink{50%{opacity:0}}
@keyframes desk-led{0%,100%{opacity:1}8%,12%,30%{opacity:.15}10%,32%{opacity:1}}
.desk-svg .wake{animation:desk-wake .9s var(--out) backwards}
.desk-svg .wake.mac{animation-delay:.25s}
.desk-svg .wake.mon{animation-delay:.6s}
.desk-svg .dk{animation:desk-rise .5s var(--out) backwards;animation-delay:calc(.9s + var(--i)*70ms)}
.desk-svg .ty{animation:desk-type calc(var(--n,8)*28ms) steps(var(--n,8),end) backwards;animation-delay:calc(1.6s + var(--i)*.75s)}
.desk-svg .caret{animation:desk-blink 1.1s steps(1) infinite}
.desk-svg .caret.ty{animation:desk-wake 0s backwards calc(1.6s + var(--i)*.75s),desk-blink 1.1s steps(1) calc(1.6s + var(--i)*.75s) infinite}
.desk-svg .led{animation:desk-led 3.7s linear infinite}

/* The readout: with JS, the entry for what is pointed at, and nothing before; without JS, every entry. It reads as
   a caption on the drawing, ink on paper under a hairline, so the drawing stays the thing to look at. */
.ro-plate{display:grid;gap:12px;margin-top:20px}
.ro{display:grid;grid-template-columns:36px minmax(0,1fr);gap:2px 14px;align-items:start;padding:12px 2px 0;border-top:1px solid #15161a1f;background:#f1f1ef;color:var(--ink)}
.ro-thumb{grid-row:span 2;display:flex;align-items:center;justify-content:center;width:36px;height:36px;border:1px solid #15161a1a;color:#4b4d52}
.ro-thumb:has(img[height="84"]){height:54px;border:0}
.ro-thumb img{width:100%;height:100%;object-fit:contain}
.ro-thumb svg{width:18px;height:18px}
.ro-thumb span{font:600 9px var(--font-mono);letter-spacing:.04em}  /* a tool with no mark shows its name */
.ro-where{font:500 9.5px/1.4 var(--font-mono);letter-spacing:.12em;text-transform:uppercase;color:#a15c1e}
.ro-name{margin-top:2px;font-size:15px;line-height:1.35;font-weight:400;text-wrap:balance}
.ro-sub{margin-left:8px;font:500 9.5px var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:#6a6c72}
.ro-text{margin-top:2px;max-width:62ch;font-size:13px;line-height:1.5;color:#4b4d52;text-wrap:pretty}
.ro-meta{margin-top:4px;font:500 9.5px/1.4 var(--font-mono);letter-spacing:.06em;color:#6a6c72}
.ro-link{grid-column:2;justify-self:start;margin-top:4px;font:500 10.5px var(--font-mono);letter-spacing:.06em;color:#4b4d52;border-bottom:1px solid #15161a33;padding-bottom:1px}
.ro-link:hover{color:#a15c1e;border-color:currentColor}
.ro-link:focus-visible{outline:2px solid #a15c1e;outline-offset:3px}
@media(min-width:640px){.ro{grid-template-columns:36px minmax(0,1fr) auto}.ro-link{grid-column:3;grid-row:1;margin-top:0}}
@keyframes desk-show{from{opacity:0}}
.desk.js .ro{grid-area:1/1}
.desk.js .ro:not(.on){visibility:hidden}
.desk.js .ro.on{animation:desk-show .18s ease-out}
/* Entries share one cell, so the plate keeps the tallest one's room and the page never moves; on the desk it sits
   under the desk. */
#stack.js .ro-plate{position:relative;z-index:1;margin-top:-96px}
@container (min-width:860px){
  .desk.js .ro-plate{width:min(600px,60%);margin:20px auto 0}
  #stack.js .ro-plate{margin-top:calc(-12.2cqw + 8px)}
}

/* The cloud (desk.py _cloud): a terminal in the monitor's colours, typing its session once it is in view. */
.cloud-svg .code text{font-size:13px}
.cloud-svg .wt{font-size:11px}
.cloud-svg .ty{animation-duration:calc(var(--n)*60ms);animation-delay:var(--t)}
.cloud-svg .out{animation:desk-wake .01s var(--t) backwards}
.cloud-svg .caret{animation:desk-wake .01s var(--t) backwards,desk-blink 1.1s steps(1) var(--t) infinite}
#cloud.js .cloud-svg *{animation-play-state:paused}
#cloud.run .cloud-svg *{animation-play-state:running}
@media(prefers-reduced-motion:reduce){.desk-svg *{animation-delay:0s!important}}