/* The office chrome: the masthead, the rail and the workspace around every screen. */
/* The approved design5 shell (owner, 25 to 26 Oct 2026: comps r1, r2, r3 and b1 at 1440 px; c1 and o4 on a 390 px
   phone): a steel masthead, a riveted rail of steel keys, and panels built as a riveted steel frame around a recessed
   near-black screen. Frames, plates and rivets are the site's own deck art (deck-art/bay.webp, key-orange.webp,
   key-green.webp) laid as 9-slice border-images. Each steel frame is painted twice: the element's own border-image, and
   over it the same art on a pseudo-element darkened to the comps' green-black steel (about #121a14) with its rivets left
   bright; the screen is the other pseudo-element. The coloured keys carry bay.webp's own four rivets, cut out of it with
   a mask. Every size is set for the cap heights the comps draw in the site's display and pixel faces.
   Loads after office.css and before the screen stylesheets, so a screen's own rules still win over these. A screen
   that lays its own plate on a panel turns these off with .its-panel::before,.its-panel::after{content:none}. */

/* Body ink: the comps' cool mint white; screens: the comps' near-black glass; steel: the comps' frame colour. */
.qo{--o-ink:#d3f5e5;--o-screen:#001009;--o-steel:#111a14;--o-rim:#22362b;--o-grey:#b2b2ae;--o-darken:contrast(1.3) brightness(.82)}

/* Headings: the base size for any panel title a screen does not size itself (cap height about 35 px at 1440), flat
   like the comps, without the old offset shadow. */
.qo h1,.qo h2{text-shadow:none}
.qo :where(h2){font-size:clamp(32px,3.9vw,56px)}

/* Keys: a riveted steel plate (bay.webp) around a recessed screen, green label; orange and green keys keep their plates
   and get bay.webp's four rivets on top. */
.qo-key{position:relative;isolation:isolate;border-image:url(/runtime/quit/deck-art/bay.webp) 44 50 fill/13.2px 15px stretch}
.qo-key::before{content:"";position:absolute;z-index:-1;inset:7px 10px;border-radius:6px;background:var(--o-screen);box-shadow:inset 0 0 0 1px #17432d,inset 0 2px 5px #000;pointer-events:none}
.qo-key::after{content:"";position:absolute;z-index:-2;inset:0;border:0 solid transparent;border-image:url(/runtime/quit/deck-art/bay.webp) 44 50/13.2px 15px stretch;filter:var(--o-darken);pointer-events:none}
.qo-key--orange,.qo-rail [aria-current="page"]{border-image:url(/runtime/quit/deck-art/key-orange.webp) 22 24 34 fill/10px 12px 13px stretch}
.qo-key--green{border-image:url(/runtime/quit/deck-art/key-green.webp) 22 24 34 fill/10px 12px 13px stretch}
.qo-key--orange::before,.qo-key--green::before,.qo-rail [aria-current="page"]::before{content:none}
.qo-key--orange::after,.qo-key--green::after,.qo-rail [aria-current="page"]::after{
 --qo-rv:radial-gradient(circle,#000 2.9px,#0000 3.5px) no-repeat;
 z-index:auto;inset:3px 4px 5px;border-width:13.2px 15px;filter:none;
 -webkit-mask:var(--qo-rv) 3.5px 3.5px/8px 8px,var(--qo-rv) calc(100% - 3.5px) 3.5px/8px 8px,var(--qo-rv) 3.5px calc(100% - 3.5px)/8px 8px,var(--qo-rv) calc(100% - 3.5px) calc(100% - 3.5px)/8px 8px;
 mask:var(--qo-rv) 3.5px 3.5px/8px 8px,var(--qo-rv) calc(100% - 3.5px) 3.5px/8px 8px,var(--qo-rv) 3.5px calc(100% - 3.5px)/8px 8px,var(--qo-rv) calc(100% - 3.5px) calc(100% - 3.5px)/8px 8px}

/* Fields in the desk: an inset screen with a thin steel rim, as the comps draw the link boxes. */
.qo [data-desk] :is(input:not([type="checkbox"]),textarea,select){border:2px solid #2f4538;border-image:none;border-radius:4px;background:#000a05;box-shadow:inset 0 2px 6px #000}

/* Panels: bay.webp's frame painted 22/25 px wide (its rivets at full size) over an 11/14 px layout border, and the
   screen over the padding box with rounded corners, a steel rim and the #001009 interior. */
.qo-panel{--qo-bw:11px 14px;--qo-bo:-11px -14px;--qo-bi:22px 25px;position:relative;isolation:isolate;border-width:var(--qo-bw);border-image:url(/runtime/quit/deck-art/bay.webp) 44 50 fill/var(--qo-bi) stretch}
.qo-panel::before{content:"";position:absolute;z-index:-2;inset:var(--qo-bo);border:0 solid transparent;border-image:url(/runtime/quit/deck-art/bay.webp) 44 50/var(--qo-bi) stretch;filter:var(--o-darken);pointer-events:none}
.qo-panel::after{content:"";position:absolute;z-index:-1;inset:0;border-radius:12px;background:var(--o-screen);box-shadow:inset 0 0 0 2px var(--o-rim),inset 0 0 0 3px #000,inset 0 5px 12px #000;pointer-events:none}

@media(min-width:761px){
 /* The masthead: a steel strip with two rivets at each end, the wordmark, QUIT FACTORY and the profile. The picture
    overlaps the strip's steel edges, as in the comps, so the strip keeps its 66 px. */
 .qo-masthead{--qo-bw:11px 25px;--qo-bo:-11px -25px;min-height:66px;gap:0;padding:0 12px 0 2px}
 .qo-masthead::after{border-radius:8px}
 .qo-logo{font-size:55px;line-height:.8;letter-spacing:.04em}
 .qo-masthead p{margin-left:40px;padding-left:0;border-left:0;font-size:23.5px;line-height:1;color:var(--o-grey)}
 .qo .qo-office-profile{gap:0}
 .qo .qo-office-profile>.qa-key{height:46px;min-height:46px;min-width:0;gap:14px;padding:0 6px 0 0;border-image:none;background:none;font-size:24px;line-height:1;text-transform:uppercase;color:var(--o-grey)}
 .qo .qo-office-profile .qa-face{width:42px;height:42px;box-shadow:0 0 0 2px #0b1510}
 /* The wordmark and the name never break; a long handle (Instagram allows 30 characters) gives way first and ends in
    an ellipsis, so the strip keeps one line and its 66 px at every width. */
 .qo-logo,.qo-masthead p{flex:none;white-space:nowrap;overflow-wrap:normal}
 .qo .qo-office-profile{flex:0 1 auto;min-width:0;padding-left:16px}
 .qo .qo-office-profile>.qa-key{max-width:100%}
 .qo .qo-office-profile .qa-face{flex:none}
 .qo .qo-office-profile .qa-key-handle{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

 /* The rail: a steel plate of keys about 155 by 56 px, labels at a cap height of about 17 px; HOW IT WORKS a size
    smaller, as the comps draw it. The handle lives in the masthead. A creator's twelve keys and the rail's frame end
    above the fold of a 900 px screen. */
 .qo{padding-bottom:24px}
 .qo-rail{gap:6px;padding:12px 0}
 .qo-rail::after{border-radius:4px;background:var(--o-steel);box-shadow:none}
 .qo-rail .qo-key{min-height:56px;padding:4px 10px 6px;font-size:24px;line-height:1}
 .qo-rail [data-view="how-it-works"]{font-size:21px}
 .qo-rail .qo-handle{display:none}
 /* A holder's rail has half the keys: the comps' full pitch, 60 px keys 14 px apart. */
 .qo-rail:not(:has([data-view="earnings"]:not([hidden]))){gap:14px;padding:16px 0}
 .qo-rail:not(:has([data-view="earnings"]:not([hidden]))) .qo-key{min-height:60px}
 /* PERKS (comp b3) draws THE LADDER and BONUSES at one size: BONUSES takes the ladder's own size, not the base. */
 .qo-holder-perks-page .qo-panel>h2{font-size:clamp(30px,3.3vw,56px)}
}
/* Between a phone and a full desktop the rail column is 155 px wide: labels a size down, never split inside a word. */
.qo-rail .qo-key{overflow-wrap:normal}
@media(min-width:761px) and (max-width:1150px){.qo-rail .qo-key{padding-inline:8px;font-size:20px}.qo-rail [data-view="how-it-works"]{font-size:17px}.qo .qo-office-profile>.qa-key{font-size:20px}}

/* HOW IT WORKS (comp r2), with the HOW YOU EARN steps of comps desktop-v3 and phone-v3 (owner approval, 26 Oct 2026,
   about 12:00 UTC): riveted step bays, each holding its orange figure, its pixel icon on a riveted dark tile and its
   words; the questions in a framed table. The icons (art/how-*.webp, 192 px, cut from the approved sheet icons-v2 on
   its pixel grid) are drawn at 96 CSS px on a desktop and 64 on a phone: one image pixel to one screen pixel on a 2x
   desktop screen and a 3x phone. */
.qo-earn-steps>li{position:relative;isolation:isolate;display:grid;grid-template-columns:auto auto minmax(0,1fr);grid-template-areas:"num icon text";column-gap:16px;align-items:start;border:7px solid transparent;border-image:url(/runtime/quit/deck-art/bay.webp) 44 50 fill/13.2px 15px stretch;padding:10px 6px 12px 12px}
.qo-earn-steps>li::before{content:"";position:absolute;z-index:-1;inset:0 3px;border-radius:6px;background:var(--o-screen);box-shadow:inset 0 0 0 1px #1d3327,inset 0 2px 6px #000;pointer-events:none}
.qo-earn-steps>li::after{content:"";position:absolute;z-index:-2;inset:-7px;border:0 solid transparent;border-image:url(/runtime/quit/deck-art/bay.webp) 44 50/13.2px 15px stretch;filter:var(--o-darken);pointer-events:none}
.qo-earn-steps strong{grid-area:num;display:block;font-size:73px;line-height:.8}
.qo-earn-icon{grid-area:icon;display:grid;place-items:center;box-sizing:border-box;width:84px;height:84px;border:7px solid transparent;border-image:url(/runtime/quit/deck-art/bay.webp) 44 50 fill/8.8px 10px stretch}
.qo-earn-icon img{display:block;width:64px;height:64px;image-rendering:pixelated}
.qo-earn-steps p{grid-area:text}
.qo-questions{border:2px solid #2a4033;border-radius:4px}
.qo-questions>div{padding:9px 16px;border-bottom:2px solid #22362b}
.qo-questions>div:last-child{border-bottom:0}
.qo-questions dt{font-size:26px;line-height:1.15}
.qo-questions dd{border-left:2px solid #2a4033;line-height:1.3}
@media(min-width:761px){
 .qo-how-earn>h2{font-size:clamp(40px,5.35vw,77px);line-height:.9;margin-bottom:10px}
 .qo-how>.qo-panel+.qo-panel>h2{font-size:clamp(36px,4.6vw,66px);line-height:.9;margin-bottom:16px}
 /* Two bays a row from 1300 px, as the comp draws them at 1440; narrower, one bay a row, so the words keep their size and
    their lines. Each bay: the figure, the icon at 96 px on a 118 px tile (the comp's size, the step's biggest thing),
    then the words beside a thin rule, level with the figure. */
 .qo-earn-steps{grid-template-columns:minmax(0,1fr);gap:10px 14px;min-height:0}
 .qo-earn-steps>li{min-height:0;column-gap:14px;padding:8px 10px 8px 12px}
 .qo-earn-steps strong{min-width:.6em;padding-top:5px;font-size:68px}
 .qo-earn-icon{width:118px;height:118px}
 .qo-earn-icon img{width:96px;height:96px}
 .qo-earn-steps p{align-self:stretch;margin:0;padding:0 0 0 16px;border-left:2px solid #1d3327;font-size:20px;line-height:1.45}
}
/* Two bays a row; the HOW YOU EARN panel's foot and the question rows' padding give back the height the larger bays
   take, so the page still ends inside a 1440x900 screen. The questions keep their type. */
@media(min-width:1300px){.qo-earn-steps{grid-template-columns:repeat(2,minmax(0,1fr))}.qo-how-earn{padding-bottom:10px}.qo-questions>div{padding-block:5px}}

@media(max-width:760px){
 .qo{padding-top:4px}
 .qo :where(h2){font-size:27px}
 .qo-panel{--qo-bw:8px 11px;--qo-bo:-8px -11px;--qo-bi:17.6px 20px}
 .qo-panel::after{border-radius:9px;box-shadow:inset 0 0 0 2px var(--o-rim),inset 0 0 0 3px #000,inset 0 4px 10px #000}
 /* MONEY IN, LIVE has no box of its own on a phone (office.css: .qo-live{display:contents}), so it gets no frame or
    screen either: without a box they would hang off the page edge. A screen that gives it a box again turns them on. */
 .qo-live::before,.qo-live::after{content:none}

 /* The phone masthead (comp c1): the wordmark and the profile straight on the page, no plate; the picture in a
    riveted steel square, the rank beside it in green. */
 .qo-masthead{min-height:36px;gap:10px;margin-bottom:5px;padding:0 10px 0 7px;border:0;border-image:none;background:none}
 .qo-masthead::before,.qo-masthead::after{content:none}
 .qo-logo{font-size:30px;letter-spacing:.04em}
 .qo .qo-office-profile>.qa-key{height:40px;min-height:40px;gap:12px;padding:0 4px 0 0;border-image:none;background:none;font-size:17px;letter-spacing:.06em;color:var(--o-green)}
 .qo .qo-office-profile .qa-face{width:38px;height:38px;border-radius:0;border:6px solid transparent;border-image:url(/runtime/quit/deck-art/bay.webp) 44 50 fill/6.2px 7px stretch;background:#101b18 padding-box}
 .qo .qo-office-profile .qa-face img{border-radius:2px}

 /* The phone rail (comps c1 and o4): one riveted strip of small tabs (labels at the comps' cap of about 7.5 px, five
    tabs across), the current one outlined in orange. */
 /* No snapping: the strip scrolls freely, so the current tab, scrolled into view by office.js, stays whole. */
 /* A scroller carries its own pseudo-elements along with its tabs, so the strip's darkened frame and its screen are
    drawn by the layout behind it, where they stay put while the tabs scroll. The strip is 52 px tall (a 28 px tab, its
    padding and its frame); where the browser can anchor to it, the frame follows its real height. The tabs scroll
    inside the screen, clear of the frame's rivets. */
 .qo-rail{--qo-bw:9px 17px;z-index:1;gap:4px;padding:3px 0;margin-bottom:8px;border-image:none;background:none;scroll-snap-type:none;anchor-name:--qo-strip}
 .qo-rail::before,.qo-rail::after{content:none}
 .qo-layout{position:relative;isolation:isolate}
 .qo-layout::before,.qo-layout::after{content:"";position:absolute;z-index:0;top:0;left:0;right:0;height:52px;pointer-events:none}
 .qo-layout::before{border:0 solid transparent;border-image:url(/runtime/quit/deck-art/bay.webp) 44 50/17.6px 20px stretch;filter:var(--o-darken)}
 .qo-layout::after{top:9px;left:11px;right:11px;height:34px;border-radius:3px;background:#010a05;box-shadow:inset 0 0 0 1px #1a2a20}
 @supports (anchor-name:--qo-strip){
  .qo-layout::before{height:auto;bottom:anchor(--qo-strip bottom)}
  .qo-layout::after{height:auto;bottom:calc(anchor(--qo-strip bottom) + 9px)}
 }
 .qo-rail .qo-key{min-width:0;min-height:28px;padding:3px 7px;border:2px solid #3e5041;border-image:none;border-radius:1px;background:#03100a;color:#868a84;font-size:11px;line-height:1;letter-spacing:.08em}
 .qo-rail .qo-key::before,.qo-rail .qo-key::after{content:none}
 .qo-rail [aria-current="page"]{border-color:#ff6a00;background:#0c0702;color:#ff6a00;text-shadow:0 0 6px #ff650059}

 /* A phone (comp phone-v3): the icon tile on the left, the figure and the words beside it. */
 .qo-earn-steps>li{grid-template-columns:84px minmax(0,1fr);grid-template-areas:"icon num" "icon text";column-gap:14px;row-gap:8px;padding:10px 12px 12px 10px}
 .qo-earn-steps strong{font-size:44px}
 .qo-earn-steps p{font-size:17px;line-height:1.5}
 .qo-questions>div{padding:12px}
 .qo-questions dt{font-size:20px}
 .qo-questions dd{border-left:0}
}

/* An account with no picture, or a picture the browser cannot load (the page only loads its own images), keeps the
   account mark (the 12 by 12 pixel figure of the header's SIGN IN key) on the picture's plate; office.js empties the
   face when its picture fails. The comps draw the profile as the picture and the name, with no key around them. */
.qo .qo-office-profile .qa-face:empty::before{content:"";width:24px;height:24px;background:var(--o-green);-webkit-mask:var(--qa-mark) center/contain no-repeat;mask:var(--qa-mark) center/contain no-repeat}
@media(max-width:760px){.qo .qo-office-profile .qa-face:empty::before{width:12px;height:12px}}
/* Signed in with no creator card yet (QUIT FACTORY step 1, comp qf-setup-v6): MY OFFICE beside an empty metal ring, no
   figure. From step 2 the ring holds the creator's picture, or the account mark when there is none. */
.qo .qo-office-profile>.qa-key[data-acct-name="none"] .qa-face:empty::before{content:none}
.qo .qo-office-profile>.qa-key[data-acct-name="none"] .qa-face:empty{background:#06110c;box-shadow:inset 0 0 0 3px #7e8a82,inset 0 0 0 5px #1c2a23,0 0 0 2px #0b1510}

/* The office fills the screen (the owner, 26 Oct 2026: "the my office page should be the full width and height of the
   screen with no footer"; the shell leaves the footer out, tools/quit-site/utility-chrome.mjs): no width cap, and the page
   is a column at least the window's height, so the office, its rail and its workspace run to the bottom edge, under the
   phone header too. */
html[data-page="/office"] body{display:flex;flex-direction:column;min-height:100vh;min-height:100dvh}
html[data-page="/office"] body>main{flex:1 0 auto;display:flex;flex-direction:column}
html[data-page="/office"] .qo{flex:1 0 auto;max-width:none;display:flex;flex-direction:column;padding-bottom:12px}
html[data-page="/office"] .qo>.qo-layout{flex:1 0 auto}