/* The top bar (design pass, 22 Oct 2026; the owner's pick "A", board quit DP-D1): the header's keys and the lobby deck under it
   (runtime/quit/contract-bar.js). Every plate is generated art in runtime/quit/deck-art, laid as a 9-slice
   border-image, so a key or bay keeps its rivets and lip at any width; every word on it is live text in the site's two
   faces. The deck's height is --q-ca-room, which the hero, the arcade cabinets and the first-paint reservations
   (frames.css, loading.css, measured.css) subtract, so each layout below sets it and fits inside it exactly.
   Layouts: three bays on one row from 1240 px; one riveted panel with two rows below that (the full address down to
   768 px, its short form on phones). */
:root:has(body>.q-ca:not([hidden])){--q-ca-room:84px}
@media(max-width:1239px){:root:has(body>.q-ca:not([hidden])){--q-ca-room:100px}}
@media(max-width:767px){:root:has(body>.q-ca:not([hidden])){--q-ca-room:98px}}

/* ---------------------------------------------------------------- the header keys */
/* The keys' min-widths are the plates' drawn widths (APPLY TO QUIT 195, SOUND OFF 147, BUY $QUIT on phones 118, 105 and
   91), measured when the keys were set in Silkscreen: the keys keep them, so no key changes size while its face loads.
   Since the owner order of 25 Oct 2026 (the pixel face only for really big primary headings) the words are in the readable
   display face, a size up from the pixel setting and with lighter tracking, still inside those widths. APPLY and SOUND
   start their icon at the left padding, so the chair and the speaker stay put while the words settle. */
/* The header's ground is the wordmark plate's own (rgb 6 12 11, measured), so the plate sits in it without a box. */
html[data-skin] .c-header[data-quit-navigation]{gap:10px;padding-inline:max(20px,calc((100% - 1440px) / 2 + 12px));background-color:#060c0b}
html[data-skin] .c-header[data-quit-navigation]>:is(.c-header__apply,.c-header__buy,.c-sound){
 box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;gap:8px;height:44px;min-height:44px;margin:0;
 padding:2px 16px 11px;border:0 solid transparent;border-radius:0;background:none;box-shadow:none;text-shadow:none;
 font:700 14px/1 var(--t-font-display);letter-spacing:.04em;text-decoration:none;white-space:nowrap;
 -webkit-text-stroke:0;filter:none;transform:none;transition:transform .12s ease-out,filter .12s linear}
html[data-skin] .c-header[data-quit-navigation]>.c-header__apply{order:0;min-width:195px;justify-content:flex-start;
 border-image:url(/runtime/quit/deck-art/key-green.webp) 22 24 34 fill/8px 9px 12px stretch;color:#03200f}
html[data-skin] .c-header[data-quit-navigation]>.c-header__apply::before{content:"";flex:none;width:15px;height:22px;
 background:url(/runtime/quit/deck-art/chair.webp) center/contain no-repeat}
html[data-skin] .c-header[data-quit-navigation]>.c-header__buy{order:3;min-width:156px;font-size:16px;
 border-image:url(/runtime/quit/deck-art/key-orange.webp) 22 24 34 fill/8px 9px 12px stretch;color:#1d0800}
html[data-skin] .c-header[data-quit-navigation]>.c-sound{order:2;min-width:147px;justify-content:flex-start;padding:6px 14px 8px 12px;font-size:13px;color:var(--t-green,#25dc71);
 border-image:url(/runtime/quit/deck-art/key-dark.webp) 40 46 50 fill/9px 10px 11px stretch}
html[data-skin] .c-header[data-quit-navigation]>.c-sound::before{content:"";flex:none;width:18px;height:16px;background:currentColor;
 -webkit-mask:var(--q-speaker-off) center/contain no-repeat;mask:var(--q-speaker-off) center/contain no-repeat}
html[data-skin] .c-header[data-quit-navigation]>.c-sound[aria-pressed="true"]::before{-webkit-mask-image:var(--q-speaker-on);mask-image:var(--q-speaker-on)}
/* The MENU plate is 8 by 3 (elevator-art/menu): its box keeps that shape, so it is never letterboxed. */
html[data-skin] .c-header[data-quit-navigation] .q-elevator-call{flex:0 0 117px;width:117px;min-width:117px;height:44px}
@media(hover:hover){
 html[data-skin] .c-header[data-quit-navigation]>:is(.c-header__apply,.c-header__buy,.c-sound):hover:not([aria-disabled="true"]){transform:translateY(-1px);filter:brightness(1.1)}
}
/* The press states carry the hover rule's :not() so they outrank it and come after it: a held key sits down, unlit. */
html[data-skin] .c-header[data-quit-navigation]>:is(.c-header__apply,.c-header__buy,.c-sound):active:not([aria-disabled="true"]){transform:translateY(2px);box-shadow:none;filter:none}
html[data-skin] .c-header[data-quit-navigation]>.c-header__apply:active:not([aria-disabled="true"]){border-image-source:url(/runtime/quit/deck-art/key-green-down.webp)}
html[data-skin] .c-header[data-quit-navigation]>.c-header__buy:active:not([aria-disabled="true"]){border-image-source:url(/runtime/quit/deck-art/key-orange-down.webp)}
html[data-skin] .c-header[data-quit-navigation]>:is(.c-header__apply,.c-header__buy,.c-sound):focus-visible{outline:3px solid var(--t-focus,#fff0ad);outline-offset:2px}
/* The flight's FX key (runtime/quit/frame-controls.js mounts it once the show runs, and hides it itself where the row has
   no room): one of the dark keys, seated by the wordmark, so the keys on the right do not move when it arrives. Its
   order and size come inline from that module, hence !important on the order. */
html[data-skin] .c-header[data-quit-navigation]:has(>.q-flight-fx) .c-header__brand{margin-right:0}
html[data-skin] .c-header[data-quit-navigation]>.q-flight-fx{order:0!important;box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;
 margin:0 auto 0 4px;padding:6px 14px 8px;border:0 solid transparent;border-radius:0;background:none;box-shadow:none;text-shadow:none;
 border-image:url(/runtime/quit/deck-art/key-dark.webp) 40 46 50 fill/9px 10px 11px stretch;color:var(--t-green,#25dc71);
 font:700 13px/1 var(--t-font-display);letter-spacing:.04em;transform:none}
html[data-skin] .c-header[data-quit-navigation]>.q-flight-fx[aria-pressed="false"]{color:#f4e7cb99}
html[data-skin] .c-header[data-quit-navigation]>.q-flight-fx:focus-visible{outline:3px solid var(--t-focus,#fff0ad);outline-offset:2px}
/* Below 900 px the row has no room for FX (the wordmark, APPLY, MENU, SOUND and BUY fill it; with FX the keys measured
   832 px against 768, and on phones BUY shrank to a 27 px sliver instead of passing the edge, so the module's own fit
   check never fired). There SOUND alone switches the sound. */
@media(max-width:899px){
 html[data-skin] .c-header[data-quit-navigation]>.q-flight-fx{display:none!important}
 html[data-skin] .c-header[data-quit-navigation]:has(>.q-flight-fx) .c-header__brand{margin-right:auto}
}
/* The wordmark is a link home: a 44 px tall target at every width. */
html[data-skin] .c-header[data-quit-navigation]>.c-header__brand{display:flex;align-items:center;min-height:44px}
/* Below 1100 px SOUND is a square speaker key, so the header's five keys fit a 768 px tablet. */
@media(max-width:1099px){
 html[data-skin] .c-header[data-quit-navigation]>.c-sound{flex:0 0 44px;width:44px;min-width:44px;justify-content:center;padding:0 0 4px;font-size:0;overflow:hidden}
 html[data-skin] .c-header[data-quit-navigation]>.c-sound::before{position:static;width:22px;height:19px;margin:0}
}
/* Phones: one row that always fits. APPLY TO QUIT moves into the deck (APPLY AT HR), SOUND is a square speaker key
   (its accessible name stays "Sound"), and the wordmark, MENU and BUY share what is left. */
@media(max-width:767px){
 html[data-skin] .c-header[data-quit-navigation]{gap:6px;padding-inline:10px}
 html[data-skin] .c-header[data-quit-navigation] .c-header__brand img{width:96px;height:auto;max-width:none}
 html[data-skin] .c-header[data-quit-navigation]>.c-header__apply{display:none}
 html[data-skin] .c-header[data-quit-navigation] .q-elevator-call{flex:0 0 96px;width:96px;min-width:96px;height:36px}
 html[data-skin] .c-header[data-quit-navigation]>.c-sound{flex:0 0 42px;width:42px;min-width:42px;height:42px;min-height:42px;padding:0 0 4px;overflow:hidden;font-size:0;
  border-image-width:8px 9px 10px}
 html[data-skin] .c-header[data-quit-navigation]>.c-sound::before{position:static;width:22px;height:19px;margin:0}
 html[data-skin] .c-header[data-quit-navigation]>.c-header__buy{flex:0 1 auto;min-width:118px;height:42px;min-height:42px;padding:2px 12px 11px;font-size:14px;letter-spacing:.03em}
}
@media(max-width:389px){
 html[data-skin] .c-header[data-quit-navigation]{gap:5px;padding-inline:8px}
 html[data-skin] .c-header[data-quit-navigation] .c-header__brand img{width:88px}
 html[data-skin] .c-header[data-quit-navigation] .q-elevator-call{flex-basis:80px;width:80px;min-width:80px;height:30px}
 html[data-skin] .c-header[data-quit-navigation]>.c-header__buy{min-width:105px;padding-inline:9px;font-size:13px}
}
@media(max-width:339px){
 html[data-skin] .c-header[data-quit-navigation]{gap:4px;padding-inline:6px}
 html[data-skin] .c-header[data-quit-navigation] .c-header__brand img{width:72px}
 html[data-skin] .c-header[data-quit-navigation] .q-elevator-call{flex-basis:72px;width:72px;min-width:72px;height:27px}
 html[data-skin] .c-header[data-quit-navigation]>.c-sound{flex-basis:38px;width:38px;min-width:38px}
 html[data-skin] .c-header[data-quit-navigation]>.c-header__buy{min-width:91px;padding-inline:7px;font-size:12px;letter-spacing:0}
}

/* ---------------------------------------------------------------- the lobby deck: three bays */
.q-ca{box-sizing:border-box;display:flex;align-items:stretch;gap:8px;height:var(--q-ca-room,84px);margin:0;
 padding:6px max(12px,calc((100% - 1440px) / 2 + 12px)) 7px;background:var(--t-black,#030805);border-bottom:3px solid var(--t-metal,#333a32);
 color:var(--t-ink,#f4e7cb);font:400 18px/1 var(--t-font-body);overflow:hidden}
/* Only under the site's fixed header (a page whose header sits in flow gets no gap). */
.c-header[data-quit-navigation]+.q-ca{margin-top:var(--t-header-desktop,70px)}
.q-ca[hidden]{display:none}
/* The deck takes the header's room, so the page's main does not add it again. The deck's module script sits between
   the two, hence the general sibling. */
.q-ca:not([hidden])~.frame-main{padding-top:0}
.q-ca p{margin:0}
.q-ca__bay{box-sizing:border-box;position:relative;display:grid;align-items:center;min-width:0;padding:9px 18px;
 border:0 solid transparent;border-image:url(/runtime/quit/deck-art/bay.webp) 44 50 fill/15px 17px stretch}
.q-ca__bay--hire{flex:1 1 0;grid-template:"tag apply" auto "hire apply" auto/minmax(0,1fr) auto;gap:5px 14px;align-content:center}
.q-ca__bay--ca{flex:0 1 auto;grid-template:"live label copy" auto "lcd lcd copy" auto/auto minmax(0,1fr) auto;gap:5px 12px;align-content:center}
.q-ca__bay--links{flex:0 0 auto;display:flex;gap:10px;padding-inline:16px}

/* the news crawl (BREAKING NEWS, owner order of 23 Oct 2026; the hiring line until then): a red LED tag over one line of
   orange dot-matrix text moving through a dark recess at every width, in the site's orange (the theme token; the
   owner's standing rule of 22 Oct: accents match the site's orange, never a separate gold). The line is written twice so
   the crawl never gaps. One pass takes 0.16 s a character (--q-ca-chars, from contract-bar.js): about 50 px a second,
   46 on phones, where the window is narrow. The tag's min-widths are its measured widths in the display face (108 and
   98 px), so the line keeps its length when the face arrives. Owner order, 25 Oct 2026: the crawl, the address and the
   tabs are in the readable display face, sized to the widths the pixel lettering had. Since 26 Oct 2026 the display face
   is Jersey 20 (the approved designs' face) and the address keeps IBM Plex Mono 600 (QUIT Text, body.css), in which every
   character of it reads apart. */
.q-ca__tag{grid-area:tag;justify-self:start;padding:5px 10px 5px;border:0 solid transparent;
 border-image:url(/runtime/quit/deck-art/tag-red.webp) 20 22 24 fill/6px 7px 7px stretch;
 color:#fff4ea;font:700 12px/1 var(--t-font-display);letter-spacing:.05em;white-space:nowrap;text-shadow:0 1px 0 #5a0b0b}
.q-ca__hire{grid-area:hire;display:flex;align-items:center;align-self:stretch;min-width:0;height:24px;padding:0 10px;overflow:hidden;
 border-radius:3px;background:#050906;box-shadow:inset 0 2px 3px #000,inset 0 -1px 0 #ffffff14;
 color:var(--t-orange,#ff610b);font:600 13px/1 var(--t-font-display);letter-spacing:.02em;white-space:nowrap;text-shadow:0 0 6px #ff610b66}
.q-ca__hire-text{display:inline-block;flex:none;animation:q-ca-crawl calc(var(--q-ca-chars,72) * .16s) linear infinite}
.q-ca__item{margin-right:3em}
.q-ca__bay--hire{gap:4px 14px}
@keyframes q-ca-crawl{to{transform:translateX(-100%)}}

/* the deck's keys: APPLY AT HR (green), COPY (orange) */
.q-ca .q-ca__apply,.q-ca .q-ca__copy{box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;height:42px;min-height:42px;
 margin:0;padding:2px 16px 11px;border:0 solid transparent;border-radius:0;background:none;box-shadow:none;text-shadow:none;
 font:700 13px/1 var(--t-font-display);letter-spacing:.04em;text-decoration:none;white-space:nowrap;-webkit-text-stroke:0;
 transform:none;transition:transform .12s ease-out,filter .12s linear}
.q-ca .q-ca__apply{grid-area:apply;border-image:url(/runtime/quit/deck-art/key-green.webp) 22 24 34 fill/8px 9px 12px stretch;color:#03200f}
.q-ca .q-ca__copy{grid-area:copy;align-self:end;min-width:100px;font-size:15px;
 border-image:url(/runtime/quit/deck-art/key-orange.webp) 22 24 34 fill/8px 9px 12px stretch;color:#1d0800}
.q-ca .q-ca__copy[data-state="copied"]{border-image-source:url(/runtime/quit/deck-art/key-green.webp);color:#03200f}
/* The keys are .c-btn, and the shared button's hover and press (components.css and arcade.css, up to (0,5,0)) add an ink
   drop shadow, 3px 7px on hover: under a plate it showed as a black slab over the bay's bezel. The deck's states outrank them. */
@media(hover:hover){
 html[data-skin] .q-ca .c-btn:is(.q-ca__apply,.q-ca__copy):hover{transform:translateY(-1px);filter:brightness(1.12)}
}
html[data-skin] .q-ca .c-btn:is(.q-ca__apply,.q-ca__copy):is(:hover,:active){box-shadow:none;animation:none}
html[data-skin] .q-ca .c-btn.q-ca__apply:active{border-image-source:url(/runtime/quit/deck-art/key-green-down.webp);transform:translateY(2px);filter:none}
html[data-skin] .q-ca .c-btn.q-ca__copy:active{border-image-source:url(/runtime/quit/deck-art/key-orange-down.webp);transform:translateY(2px);filter:none}

/* the readout: LIVE, the label, and the address on green phosphor glass */
.q-ca__live{grid-area:live;min-width:51px;display:inline-flex;align-items:center;gap:6px;color:var(--t-green,#25dc71);font:700 12px/1 var(--t-font-display);letter-spacing:.05em;white-space:nowrap}
.q-ca__live::before{content:"";width:8px;height:8px;border-radius:50%;background:currentColor;box-shadow:0 0 6px currentColor;animation:q-ca-blink 1.2s steps(1,end) infinite}
@keyframes q-ca-blink{50%{opacity:.25}}
.q-ca__label{grid-area:label;padding-left:12px;border-left:2px solid #25dc7166;color:#f4e7cbcc;font:700 12px/1 var(--t-font-display);letter-spacing:.05em;white-space:nowrap}
.q-ca__lcd{grid-area:lcd;box-sizing:border-box;display:flex;align-items:center;min-width:0;height:36px;padding:2px 16px 0;cursor:copy;
 border:0 solid transparent;border-image:url(/runtime/quit/deck-art/lcd.webp) 44 56 fill/12px 14px stretch}
.q-ca__mint{display:block;min-width:0;color:#c8ffd9;font:600 15px/1 "QUIT Text",var(--t-font-display);letter-spacing:.01em;white-space:nowrap;
 text-shadow:0 0 8px #25dc7180;-webkit-user-select:text;user-select:text}
.q-ca__short{display:none;color:#c8ffd9;font:600 15px/1 "QUIT Text",var(--t-font-display);white-space:nowrap;text-shadow:0 0 8px #25dc7180}

/* the tabs: engraved gunmetal plates */
.q-ca__tab{box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;height:40px;padding:1px 18px 0;
 border:0 solid transparent;border-image:url(/runtime/quit/deck-art/tab.webp) 40 60 fill/10px 15px stretch;
 color:var(--t-ink,#f4e7cb);font:600 15px/1 var(--t-font-display);letter-spacing:.04em;text-decoration:none;white-space:nowrap;
 text-shadow:0 1px 0 #000;transition:transform .12s ease-out,filter .12s linear,color .12s linear}
@media(hover:hover){
 .q-ca__tab:hover{transform:translateY(-1px);filter:brightness(1.12);color:#fff}
}
.q-ca__tab:active{transform:translateY(1px)}
.q-ca :focus-visible{outline:3px solid var(--t-focus,#fff0ad);outline-offset:2px}
/* The tabs hold the wider of their two settings, the display face (Jersey 20) and its fitted stand-in (a 0.6 em monospace
   at 84%, the same width on every platform), so the readout beside them stays put when the face arrives: PUMP.FUN 106.2
   and 101.5 px, TRADING BOT 125.2 and 126 px at 15 px (measured in Chromium, 26 Oct 2026); so does the BREAKING NEWS tag,
   110.2 and 106.7 px. */
@media(min-width:1240px){.q-ca__pump{min-width:107px}.q-ca__bot{min-width:127px}.q-ca__tag{min-width:111px}}

/* ---------------------------------------------------------------- one panel, two rows (below 1240 px) */
/* The bays open up (display:contents) and their parts sit in one riveted panel: the readout, COPY and PUMP.FUN on the
   first row; the crawl, APPLY AT HR and TRADING BOT on the second. LIVE rides inside the readout, and the BREAKING NEWS
   tag rides in the crawl at the head of every item. Each tag adds about 17 characters' worth to a pass, so the crawl
   keeps the same speed. */
@media(max-width:1239px){
 .q-ca{display:grid;grid-template:"lcd copy pump" 40px "hire apply bot" 34px/minmax(0,1fr) auto auto;align-content:center;gap:6px 10px;
  padding:7px max(16px,calc((100% - 1440px) / 2 + 16px)) 8px;border:0 solid transparent;border-image:url(/runtime/quit/deck-art/bay.webp) 44 50 fill/14px 16px stretch}
 .q-ca__bay{display:contents}
 .q-ca__label,.q-ca__tag{display:none}
 .q-ca .q-ca__live{grid-area:lcd;align-self:center;justify-self:start;z-index:1;margin-left:20px;padding-right:10px;border-right:2px solid #25dc7166}
 .q-ca__lcd{height:40px;padding:2px 14px 0 94px}
 .q-ca__mint{font-size:clamp(12px,1.55vw,15px)}
 .q-ca .q-ca__copy{align-self:center;height:40px;min-height:40px}
 .q-ca__pump{grid-area:pump}
 .q-ca__bot{grid-area:bot}
 .q-ca__tab{min-width:118px;height:34px;font-size:13px}
 .q-ca__tab.q-ca__pump{height:40px}
 .q-ca__hire{height:34px;font-size:13px}
 .q-ca__hire-text{animation-duration:calc((var(--q-ca-chars,72) + var(--q-ca-items,1) * 15) * .16s)}
 .q-ca__item{margin-right:1.2em}
 .q-ca__item::before{content:"BREAKING NEWS";display:inline-block;box-sizing:border-box;min-width:108px;margin-right:.8em;padding:4px 8px 4px;border:0 solid transparent;
  border-image:url(/runtime/quit/deck-art/tag-red.webp) 20 22 24 fill/4px 5px 5px stretch;color:#fff4ea;font:700 11px/1 var(--t-font-display);
  letter-spacing:.04em;vertical-align:1px;text-shadow:0 1px 0 #5a0b0b}
 .q-ca .q-ca__apply{height:34px;min-height:34px;padding:1px 14px 9px;font-size:12px;border-image-width:7px 8px 10px}
}

/* ---------------------------------------------------------------- phones (below 768 px) */
/* The phone comp: the short address and COPY on the first row, COPY over TRADING BOT; PUMP.FUN goes (BUY $QUIT in the
   header opens the coin page). A tap on the readout copies too. */
@media(max-width:767px){
 .c-header[data-quit-navigation]+.q-ca{margin-top:var(--t-header-phone,62px)}
 .q-ca{grid-template:"lcd lcd copy" 42px "hire apply bot" 32px/minmax(0,1fr) auto auto;gap:6px 6px;padding:6px 10px 7px;border-image-width:12px 13px}
 .q-ca__pump{display:none}
 .q-ca .q-ca__live{font-size:11px;gap:5px;padding-right:9px}
 .q-ca__lcd{height:42px;padding:2px 10px 0 84px}
 .q-ca__mint{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
 .q-ca__short{display:block;font-size:clamp(12px,3.6vw,15px)}
 .q-ca[data-ca-selected] .q-ca__mint{position:static;width:auto;height:auto;overflow-x:auto;overflow-y:hidden;clip-path:none;font-size:clamp(11px,3.2vw,14px);line-height:1.3;user-select:all;-webkit-user-select:all}
 .q-ca[data-ca-selected] .q-ca__short{display:none}
 .q-ca .q-ca__copy{height:42px;min-height:42px;min-width:0;padding-inline:14px;font-size:14px}
 .q-ca__hire{height:32px;padding:0 6px;font-size:12px}
 .q-ca__item::before{min-width:98px;padding:4px 7px 3px;font-size:10px;margin-right:.7em;vertical-align:1px}
 .q-ca .q-ca__apply{min-width:111px;height:32px;min-height:32px;padding:1px 10px 9px;font-size:11px;letter-spacing:.03em}
 .q-ca__tab{min-width:0;height:32px;padding:1px 10px 0;font-size:12px;letter-spacing:.02em;border-image-width:8px 12px}
 /* TRADING BOT sets the column COPY shares: 88.7 px in the display face, 89.2 in its stand-in */
 .q-ca__bot{min-width:90px}
}
/* the narrowest phones */
@media(max-width:359px){
 .q-ca{column-gap:5px;padding-inline:8px}
 .q-ca .q-ca__live{margin-left:16px;padding-right:7px}
 .q-ca__lcd{padding-left:74px}
 .q-ca .q-ca__apply{min-width:95px;padding-inline:8px;font-size:10px;letter-spacing:0}
 .q-ca__tab{padding-inline:8px;font-size:11px}
}
/* The bot's jump links, the deck's TRADING BOT tab among them, show only while the bot is live: the bot lane sets
   html[data-bot-status] from /api/bot/health (live, paper, off, unknown), and absent counts as off, so a link never
   points at the floor while it is hidden; a mounted floor in preview (html[data-bot-floor="open"], ?bot=preview) counts
   as open. Without the tab the deck closes up: APPLY AT HR takes its place. */
html:not([data-bot-status="live"]):not([data-bot-floor="open"]) [data-bot-jump]{display:none}
@media(max-width:1239px){html:not([data-bot-status="live"]):not([data-bot-floor="open"]) .q-ca{grid-template-areas:"lcd copy pump" "hire hire apply"}}
@media(max-width:767px){html:not([data-bot-status="live"]):not([data-bot-floor="open"]) .q-ca{grid-template-areas:"lcd lcd copy" "hire hire apply"}}
/* One APPLY at every width (owner, 22 Oct 2026: two apply buttons in the top bar read as a mistake). Where the header has
   its APPLY TO QUIT key (768 px and up) the deck leaves out APPLY AT HR and the hiring line takes its room; on phones the
   deck's key stays the only one. Both go to /apply. */
@media(min-width:768px){
 .q-ca .q-ca__apply{display:none}
 .q-ca__bay--hire{grid-template:"tag" auto "hire" auto/minmax(0,1fr)}
}
@media(min-width:768px) and (max-width:1239px){
 html .q-ca{grid-template-areas:"lcd copy pump" "hire hire bot"}
 html:not([data-bot-status="live"]):not([data-bot-floor="open"]) .q-ca{grid-template-areas:"lcd copy pump" "hire hire hire"}
}
/* The deck's readouts (the address on the LCD glass, the orange crawl, the engraved tabs) are set in the readable display
   face above (owner order, 25 Oct 2026), at the sizes that keep the widths the pixel lettering had on its plates. Its
   stand-in while it loads (the face is preloaded) is the browser's monospace, of about the same advance, so the deck's
   boxes hold. */
@media(prefers-reduced-motion:reduce){
 .q-ca__live::before{animation:none}
 .q-ca__hire-text{animation:none;overflow:hidden;text-overflow:ellipsis;max-width:100%}
 .q-ca__hire-text[aria-hidden]{display:none}
}
/* ---------------------------------------------------------------- the phone top, comp B
   The owner's pick of 31 Oct 2026 (mobile/menu-comps/comp-b2-1.png and comp-b2-2.png): one row of $QUIT, the speaker,
   BUY $QUIT and MENU, and under it the contract strip alone (LIVE, the address, COPY), every key 44 px or more. The
   language and account keys live in MENU's sheet on a phone (runtime/quit/menu-phone.js), APPLY AT HR and TRADING BOT
   are floors there, and BREAKING NEWS runs under LIVE BUYS on the home page (contract-bar.js newsBelowLiveBuys) and as
   the strip's second row on the other pages. These win over the two-row rules for the language and account keys here
   and in account.css (the selectors carry the class twice and two attributes more). All of it holds on the pages whose
   MENU mounts from a script in the head: menu-boot.js on the site's pages, trailer-entry.js on /trailer and
   how-to-buy-page.js on /how-to-buy. A page without such a MENU keeps its keys where a phone can reach them. A game
   page's full-screen cabinet keeps its own one-row deck (the rule after this block). */
@media(max-width:767px){
 :root:has(script:is([src="/runtime/quit/menu-boot.js"],[src="/runtime/quit/trailer-entry.js"],[src="/runtime/quit/how-to-buy-page.js"])):not(:has(.q-cabinet-full)):has(body>.q-ca:not([hidden])){--q-ca-room:94px}
 :root:is([data-page="/"],[data-page="/show"]):has(script:is([src="/runtime/quit/menu-boot.js"],[src="/runtime/quit/trailer-entry.js"],[src="/runtime/quit/how-to-buy-page.js"])):not(:has(.q-cabinet-full)):has(body>.q-ca:not([hidden])){--q-ca-room:56px}
 html[data-skin][data-theme]:has(script:is([src="/runtime/quit/menu-boot.js"],[src="/runtime/quit/trailer-entry.js"],[src="/runtime/quit/how-to-buy-page.js"])) .c-header.c-header[data-quit-navigation][class]{height:62px;align-items:center;padding-top:0;gap:5px}
 html[data-skin][data-theme]:has(script:is([src="/runtime/quit/menu-boot.js"],[src="/runtime/quit/trailer-entry.js"],[src="/runtime/quit/how-to-buy-page.js"])) .c-header.c-header[data-quit-navigation][class] .qa-header{display:none}
 html[data-skin][data-theme]:has(script:is([src="/runtime/quit/menu-boot.js"],[src="/runtime/quit/trailer-entry.js"],[src="/runtime/quit/how-to-buy-page.js"])) .c-header.c-header[data-quit-navigation][class]+.q-ca{margin-top:62px}
 html[data-skin][data-theme]:has(script:is([src="/runtime/quit/menu-boot.js"],[src="/runtime/quit/trailer-entry.js"],[src="/runtime/quit/how-to-buy-page.js"])) .c-header.c-header[data-quit-navigation][class]~.frame-main{--c-header-height:62px;--t-header-phone:62px}
 html[data-skin][data-theme]:has(script:is([src="/runtime/quit/menu-boot.js"],[src="/runtime/quit/trailer-entry.js"],[src="/runtime/quit/how-to-buy-page.js"])) .c-header.c-header[data-quit-navigation][class] .c-header__brand{order:0;margin-right:auto}
 html[data-skin][data-theme]:has(script:is([src="/runtime/quit/menu-boot.js"],[src="/runtime/quit/trailer-entry.js"],[src="/runtime/quit/how-to-buy-page.js"])) .c-header.c-header[data-quit-navigation][class]>.c-sound{order:1;flex-basis:44px;width:44px;min-width:44px;height:44px;min-height:44px}
 html[data-skin][data-theme]:has(script:is([src="/runtime/quit/menu-boot.js"],[src="/runtime/quit/trailer-entry.js"],[src="/runtime/quit/how-to-buy-page.js"])) .c-header.c-header[data-quit-navigation][class]>.c-header__buy{order:2;height:44px;min-height:44px}
 html[data-skin][data-theme]:has(script:is([src="/runtime/quit/menu-boot.js"],[src="/runtime/quit/trailer-entry.js"],[src="/runtime/quit/how-to-buy-page.js"])) .c-header.c-header[data-quit-navigation][class] .q-elevator-call{order:3;height:44px}
 /* the strip: LIVE, the address and COPY on one row; BREAKING NEWS under it where the page keeps it */
 :root:has(script:is([src="/runtime/quit/menu-boot.js"],[src="/runtime/quit/trailer-entry.js"],[src="/runtime/quit/how-to-buy-page.js"])):not(:has(.q-cabinet-full)) .q-ca{grid-template:"lcd lcd copy" 44px "hire hire hire" 32px/minmax(0,1fr) auto auto}
 html:has(script:is([src="/runtime/quit/menu-boot.js"],[src="/runtime/quit/trailer-entry.js"],[src="/runtime/quit/how-to-buy-page.js"])):not(:has(.q-cabinet-full)):not([data-bot-status="live"]):not([data-bot-floor="open"]) .q-ca{grid-template-areas:"lcd lcd copy" "hire hire hire"}
 :root:has(script:is([src="/runtime/quit/menu-boot.js"],[src="/runtime/quit/trailer-entry.js"],[src="/runtime/quit/how-to-buy-page.js"])):not(:has(.q-cabinet-full)) .q-ca .q-ca__lcd{height:44px}
 :root:has(script:is([src="/runtime/quit/menu-boot.js"],[src="/runtime/quit/trailer-entry.js"],[src="/runtime/quit/how-to-buy-page.js"])):not(:has(.q-cabinet-full)) .q-ca .q-ca__copy{height:44px;min-height:44px}
 :root:has(script:is([src="/runtime/quit/menu-boot.js"],[src="/runtime/quit/trailer-entry.js"],[src="/runtime/quit/how-to-buy-page.js"])):not(:has(.q-cabinet-full)) .q-ca :is(.q-ca__apply,.q-ca__bot){display:none}
 :root:has(script:is([src="/runtime/quit/menu-boot.js"],[src="/runtime/quit/trailer-entry.js"],[src="/runtime/quit/how-to-buy-page.js"])):not(:has(.q-cabinet-full)) .q-ca .q-ca__hire{grid-area:hire}
 :root:is([data-page="/"],[data-page="/show"]):has(script:is([src="/runtime/quit/menu-boot.js"],[src="/runtime/quit/trailer-entry.js"],[src="/runtime/quit/how-to-buy-page.js"])):not(:has(.q-cabinet-full)) .q-ca{grid-template:"lcd lcd copy" 44px/minmax(0,1fr) auto auto}
 :root:is([data-page="/"],[data-page="/show"]):has(script:is([src="/runtime/quit/menu-boot.js"],[src="/runtime/quit/trailer-entry.js"],[src="/runtime/quit/how-to-buy-page.js"])):not(:has(.q-cabinet-full)) .q-ca .q-ca__hire{display:none}
 /* (since 1 Nov 2026 the show is on /show and the home page's slim strip has no crawl: both keep the one-row strip) */
 /* under LIVE BUYS on the show's page: the crawl's own band, its room kept under the game floor until it arrives */
 :root:is([data-page="/"],[data-page="/show"]):has(script:is([src="/runtime/quit/menu-boot.js"],[src="/runtime/quit/trailer-entry.js"],[src="/runtime/quit/how-to-buy-page.js"])):has(body>.q-ca:not([hidden])) [data-floor-section="game"]>[data-quit-frame-host]:not(:has(+[data-quit-ca-news])){margin-bottom:40px}
 [data-quit-ca-news="below"]{box-sizing:border-box;display:flex;align-items:center;height:40px;margin:0;padding:4px 8px;
  border:0 solid transparent;border-image:url(/runtime/quit/deck-art/bay.webp) 44 50 fill/8px 10px stretch}
 [data-quit-ca-news="below"]>.q-ca__apply{display:none}
 /* the comp's fixed BREAKING NEWS tag at the band's left (the deck's own tag), so the items run without their own */
 [data-quit-ca-news="below"]>.q-ca__tag{display:inline-flex;align-items:center;flex:none;box-sizing:border-box;height:24px;margin:0 8px 0 0;padding:4px 8px 3px;
  border:0 solid transparent;border-image:url(/runtime/quit/deck-art/tag-red.webp) 20 22 24 fill/4px 5px 5px stretch;color:#fff4ea;
  font:700 11px/1 var(--t-font-display);letter-spacing:.04em;text-shadow:0 1px 0 #5a0b0b;white-space:nowrap}
 [data-quit-ca-news="below"] .q-ca__item::before{content:none}
 [data-quit-ca-news="below"]>.q-ca__hire{flex:1;min-width:0;height:32px}
}
@media(max-width:389px){
 html[data-skin][data-theme]:has(script:is([src="/runtime/quit/menu-boot.js"],[src="/runtime/quit/trailer-entry.js"],[src="/runtime/quit/how-to-buy-page.js"])) .c-header.c-header[data-quit-navigation][class]{gap:4px}
}
@media(max-width:339px){
 html[data-skin][data-theme]:has(script:is([src="/runtime/quit/menu-boot.js"],[src="/runtime/quit/trailer-entry.js"],[src="/runtime/quit/how-to-buy-page.js"])) .c-header.c-header[data-quit-navigation][class]{gap:3px}
}
/* Game pages on phones (a full-screen cabinet, .q-cabinet-full, in main): the deck keeps only its readout and COPY on
   one row, so the game keeps the screen and the contract address stays in the first fold. Last in the file, so it wins
   over the layouts above. */
@media(max-width:767px){
 :root:has(body>.q-ca:not([hidden])):has(.q-cabinet-full){--q-ca-room:56px}
 body:has(.q-cabinet-full)>.q-ca{grid-template:"lcd copy" 42px/minmax(0,1fr) auto;padding-block:4px 7px}
 body:has(.q-cabinet-full)>.q-ca :is(.q-ca__tag,.q-ca__hire,.q-ca__apply,.q-ca__bot){display:none}
}

/* ---------------------------------------------------------------- the language key and its offer */
/* The owner's approval of 30 Oct 2026 ("As drawn, with the globe"; i18n-site/comps): the language key sits in the SIGN
   IN slot, just before SIGN IN (render.mjs renderMenuHeader), so it follows that key wherever the header puts it: on the
   row after SOUND on a desktop, on the second row beside SIGN IN on a phone. A dark key like SOUND's, with a pixel globe
   drawn like SOUND's speaker and the language's code (EN, RU). runtime/quit/lang-switch.js opens its list and the offer. */
.qa-header{gap:10px;align-items:center}
.qa-header [hidden]{display:none!important}
.q-lang{display:inline-flex;flex:none}
.q-lang__key{--q-globe:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 13 13' shape-rendering='crispEdges'%3E%3Cpath d='M5 0h3v1h-3zM3 1h2v1h-2zM6 1h1v1h-1zM8 1h2v1h-2zM2 2h1v1h-1zM5 2h1v1h-1zM7 2h1v1h-1zM10 2h1v1h-1zM1 3h1v1h-1zM5 3h1v1h-1zM7 3h1v1h-1zM11 3h1v1h-1zM1 4h11v1h-11zM0 5h1v1h-1zM5 5h1v1h-1zM7 5h1v1h-1zM12 5h1v1h-1zM0 6h13v1h-13zM0 7h1v1h-1zM5 7h1v1h-1zM7 7h1v1h-1zM12 7h1v1h-1zM1 8h11v1h-11zM1 9h1v1h-1zM5 9h1v1h-1zM7 9h1v1h-1zM11 9h1v1h-1zM2 10h1v1h-1zM5 10h1v1h-1zM7 10h1v1h-1zM10 10h1v1h-1zM3 11h2v1h-2zM6 11h1v1h-1zM8 11h2v1h-2zM5 12h3v1h-3z'/%3E%3C/svg%3E");
 box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-width:84px;height:44px;margin:0;
 padding:6px 14px 8px 12px;border:0 solid transparent;border-image:url(/runtime/quit/deck-art/key-dark.webp) 40 46 50 fill/9px 10px 11px stretch;
 background:none;box-shadow:none;color:var(--t-green,#25dc71);font:700 13px/1 var(--t-font-display);letter-spacing:.04em;white-space:nowrap;
 cursor:pointer;transition:transform .12s ease-out,filter .12s linear}
.q-lang__key::before{content:"";flex:none;width:15px;height:15px;background:currentColor;
 -webkit-mask:var(--q-globe) center/contain no-repeat;mask:var(--q-globe) center/contain no-repeat}
@media(hover:hover){.q-lang__key:hover{transform:translateY(-1px);filter:brightness(1.1)}}
.q-lang__key:active{transform:translateY(2px);filter:none}
.q-lang__key:focus-visible{outline:3px solid var(--t-focus,#fff0ad);outline-offset:2px}
/* The list: a dropdown under the key on a desktop (lang-switch.js places it), in the deck's riveted frame. */
.q-lang-menu{position:fixed;inset:auto;margin:0;width:220px;max-width:calc(100vw - 16px);box-sizing:border-box;padding:14px 12px;overflow:visible;
 border:0 solid transparent;border-image:url(/runtime/quit/deck-art/bay.webp) 44 50 fill/15px 17px stretch;background:none;color:#f4e7cb}
.q-lang-menu[open]{display:grid;gap:8px}
.q-lang-menu::backdrop{background:transparent}
.q-lang-menu__item,.q-lang-menu__close{box-sizing:border-box;display:flex;align-items:center;justify-content:flex-start;width:100%;height:44px;margin:0;
 padding:6px 16px 8px;border:0 solid transparent;border-image:url(/runtime/quit/deck-art/key-dark.webp) 40 46 50 fill/9px 10px 11px stretch;
 background:none;color:#f4e7cb;font:700 16px/1 var(--t-font-display);letter-spacing:.04em;cursor:pointer}
.q-lang-menu__item[aria-current="true"]{border-image:url(/runtime/quit/deck-art/key-orange.webp) 22 24 34 fill/8px 9px 12px stretch;color:#1d0800}
/* The keys that only close (CLOSE, НЕТ, СПАСИБО) are plain steel in the comps: the dark key without its green. */
.q-lang-menu__close{filter:grayscale(1)}
.q-lang-menu__item:focus-visible,.q-lang-menu__close:focus-visible{outline:3px solid var(--t-focus,#fff0ad);outline-offset:2px}
.q-lang-menu__title,.q-lang-menu__close{display:none}
/* The one-time offer: hung under the language key on a desktop (lang-switch.js places it), on the bottom edge of a phone,
   over the page (it moves nothing), in the same frame, its line in the body face. */
.q-lang-offer{position:fixed;z-index:1001;top:78px;right:max(12px,calc((100% - 1440px) / 2 + 12px));width:360px;box-sizing:border-box;padding:16px 16px 14px;
 border:0 solid transparent;border-image:url(/runtime/quit/deck-art/bay.webp) 44 50 fill/15px 17px stretch;color:#f4e7cb;
 font:15px/1.45 "IBM Plex Mono",var(--t-font-body,monospace)}
.q-lang-offer__line{margin:0 0 12px}
.q-lang-offer__keys{display:flex;gap:10px}
.q-lang-offer__keys>button{flex:1 1 0;box-sizing:border-box;height:44px;margin:0;padding:6px 10px 9px;border:0 solid transparent;background:none;
 font:700 14px/1 var(--t-font-display);letter-spacing:.04em;white-space:nowrap;cursor:pointer}
/* The border shorthand above resets border-image, so the two frames need the more specific selector. */
.q-lang-offer__keys>.q-lang-offer__yes{border-image:url(/runtime/quit/deck-art/key-orange.webp) 22 24 34 fill/8px 9px 12px stretch;color:#1d0800}
.q-lang-offer__keys>.q-lang-offer__no{border-image:url(/runtime/quit/deck-art/key-dark.webp) 40 46 50 fill/9px 10px 11px stretch;color:#f4e7cb;filter:grayscale(1)}
.q-lang-offer__keys>button:focus-visible{outline:3px solid var(--t-focus,#fff0ad);outline-offset:2px}
/* Phones and narrow tablets, where SIGN IN has the second row: a square key with the code only, a sheet from the bottom
   with its title and CLOSE, and the offer on the bottom edge. */
@media(max-width:1000px){
 .q-lang__key{min-width:48px;padding:6px 10px 8px}
 .q-lang__key::before{display:none}
 .q-lang-menu{inset:auto 8px 8px;width:auto;max-width:none;padding:18px 16px 16px}
 .q-lang-menu[open]{gap:12px}
 .q-lang-menu__title{display:block;margin:0 0 2px;text-align:center;font:700 16px/1 var(--t-font-display);letter-spacing:.06em;color:#f4e7cb}
 .q-lang-menu__item{justify-content:center;height:52px;font-size:20px}
 .q-lang-menu__close{display:flex;justify-content:center;height:48px;color:#f4e7cbcc}
 .q-lang-offer{top:auto;right:8px;bottom:8px;left:8px;width:auto}
}
/* Signed in, the account key carries a face and the rank title (VICE PRESIDENT the longest), and with the language key
   beside it the one-row header pushed BUY $QUIT past the right edge at 601 to 767 px and 1000 to 1179 px
   (tests/go/account-header-fit.test.mjs). There the two keys take the second row under BUY, as account.css already has
   them on phones and at 768 to 999 px, and the header and what sits under it move down together. Signed out, the row
   holds them. */
@media(min-width:601px) and (max-width:767px){
 html[data-skin] .c-header[data-quit-navigation]:has(.qa-header:not([hidden]) .qa-face){height:108px;align-items:flex-start;padding-top:10px}
 .c-header:has(.qa-header:not([hidden]) .qa-face)+.q-ca{margin-top:108px}
 .c-header:has(.qa-header:not([hidden]) .qa-face)~.frame-main{--c-header-height:108px;--t-header-phone:108px}
 .c-header .qa-header:has(.qa-face){position:absolute;top:58px;right:8px}
}
@media(min-width:1000px) and (max-width:1179px){
 html[data-skin] .c-header[data-quit-navigation]:has(.qa-header:not([hidden]) .qa-face){--c-header-height:120px;height:120px;align-items:flex-start;padding-top:10px}
 .c-header:has(.qa-header:not([hidden]) .qa-face)+.q-ca{margin-top:120px}
 .c-header:has(.qa-header:not([hidden]) .qa-face)~.frame-main{--c-header-height:120px;--t-header-desktop:120px}
 .c-header .qa-header:has(.qa-face){position:absolute;top:66px;right:20px}
}
/* The header's second row is there from the first paint wherever the language key sits on it, on phones and at 768 to
   999 px: the key is in the built page, so the room is kept before account.js shows the slot, and nothing under the
   header moves down when it does (account.css keys the same heights to the slot being shown). */
@media(max-width:600px){
 html[data-skin] .c-header[data-quit-navigation]:has([data-lang-key]){height:108px;align-items:flex-start;padding-top:10px}
 .c-header:has([data-lang-key])+.q-ca{margin-top:108px}
 .c-header:has([data-lang-key])~.frame-main{--c-header-height:108px;--t-header-phone:108px}
}
@media(min-width:768px) and (max-width:999px){
 html[data-skin] .c-header[data-quit-navigation]:has([data-lang-key]){--c-header-height:120px;height:120px;align-items:flex-start;padding-top:10px}
 .c-header:has([data-lang-key])+.q-ca{margin-top:120px}
 .c-header:has([data-lang-key])~.frame-main{--c-header-height:120px;--t-header-desktop:120px}
}