/* ACCOUNTS: one card per network (office-accounts.js), built to the approved comp accounts-v5 (owner order, 25 Oct 2026).
   Type through the office tokens only: --o-display for names, labels, readouts and keys, --o-pixel for the panel title,
   --o-body for handles and sentences. No text under 16 px, no label under 14 px. Frames are the deck art.
   Every readout is sized to the box it sits in (container units), and a figure or state word also by its length (--n,
   from office-accounts.js): .62em is wider than any glyph of the display face (Jersey 20 as the site sizes it, at most
   .61em) and of IBM Plex Mono 600 (.6em, the face before it), so the word never runs over its frame, at any width. */
/* The office breaks words anywhere (.qo); here words stay whole and only handles, links, errors and the note may break. */
/* Columns follow the width the screen has, not the window: three cards to a row from 1000 px (cards of 325 px or more),
   two from 680 px, one below, so no card is too narrow for its readouts at any window width. */
.qo-accounts{display:grid;gap:12px;overflow-wrap:normal;container:qo-accounts/inline-size}
.qo-acct-cards{display:grid;grid-template-columns:minmax(0,1fr);gap:12px}
@container qo-accounts (min-width:680px){.qo-acct-cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@container qo-accounts (min-width:1000px){.qo-acct-cards{grid-template-columns:repeat(3,minmax(0,1fr))}}
/* Every card spans the same eight rows of the card grid and lays its own rows on them (subgrid): name, USERNAME, STATE,
   PUBLISHED and FAILED, NEXT POST, last post, what needs the creator, key. A row is as tall as its tallest card, so a
   long handle, RECONNECT REQUIRED on two lines, a date on another day or an error box in one card moves the rows of
   every card in that row together, and the plates, readouts and keys stay level. The card is not a size container (a
   container cannot be a subgrid); each row is, so its type is still sized to the card's width. */
.qo-acct{display:grid;grid-row:span 8;grid-template-rows:subgrid;row-gap:0;min-width:0;padding:8px 12px 10px}
.qo-acct>*{min-width:0}
.qo .qo-acct>h2{display:flex;align-items:center;gap:14px;margin:0 0 14px;font:700 28px/1.05 var(--o-display);color:var(--o-orange);container-type:inline-size}
.qo-acct>h2 .q-pmark{flex:none;width:clamp(35px,17cqi,57.5px);height:clamp(35px,17cqi,57.5px)}
.qo-acct>h2>span{min-width:0;font-size:clamp(28px,13.6cqi,46px)}
.qo-acct dl,.qo-acct dd{margin:0}
.qo-acct dt{font:700 clamp(18px,6.9cqi,22px)/1.1 var(--o-display);color:var(--o-green)}
.qo-acct-row,.qo-acct-next,.qo-acct-more{container-type:inline-size}
.qo-acct-row>div{display:flex;align-items:baseline;gap:14px;min-width:0}
.qo-acct-row>div>dt{flex:none}
.qo-acct-row>div>dd{flex:1;min-width:0}
.qo-acct .qo-acct-state{display:grid;margin-top:10px}
/* STATE: the plate fills its row, so every plate in a row of cards is as tall as the tallest, its word in the middle. */
.qo-acct-state>div{align-items:stretch}
.qo-acct-state dt{align-self:center}
.qo-acct .qo-acct-handle{font:400 clamp(18px,7.6cqi,25px)/1.3 var(--o-body);color:#dcf7e8;overflow-wrap:break-word}
/* The plate is its own container: the state word is sized to the plate, so CONNECTED stays on one line inside it in
   either display face (Jersey 20, or Plex 600 before it) at every width. */
.qo-acct .qo-acct-plate{display:flex;align-items:center;gap:10px;min-height:60px;padding:2px 8px;border:10px solid transparent;border-image:url(/runtime/quit/deck-art/bay.webp) 44 50 fill/10px stretch;font:700 24px/1.05 var(--o-display);color:var(--lamp);container-type:inline-size}
/* The word takes the comp's size where it fits (13.9cqi holds CONNECTED), sized by its longest word beside the lamp (44 px
   with its gap). A state of two words (RECONNECT REQUIRED) is set at up to 24 px and takes two lines where one does not
   fit, a word to a line, so it reads at the size of the readouts' labels rather than at the floor. A face wider than
   these (the test pages' Silkscreen) is clipped at the plate's edge, so a word never widens the page. */
.qo-acct-plate>span:last-child{--n:9;--cap:34px;min-width:0;overflow-x:clip;font-size:max(16px,min(var(--cap),13.9cqi,calc((100cqi - 44px) / (var(--n) * .62))))}
.qo-acct-plate>span[data-words]{--cap:24px;line-height:1}
.qo-acct-note>div{display:flex;align-items:baseline;justify-content:space-between;flex-wrap:wrap;gap:4px 14px}
.qo-acct .qo-acct-note dd{flex:none;font:700 20px/1.1 var(--o-display);color:#e4f6ea}
/* The lamps: lit green while posting or connected, amber paused, red when the account needs the creator; unlit grey on a
   network that is not connected. */
.qo [data-lamp="on"]{--lamp:#00ed80}
.qo [data-lamp="wait"]{--lamp:#ffc928}
.qo [data-lamp="bad"]{--lamp:#ff4036}
.qo [data-lamp="off"]{--lamp:#b8c2bb}
.qo-lamp{flex:none;display:block;width:34px;height:34px;border-radius:50%;background:radial-gradient(circle at 36% 32%,#f4fff8 0 8%,var(--lamp) 36%,color-mix(in srgb,var(--lamp) 50%,#000) 100%);box-shadow:0 0 0 3px #06100a,0 0 0 5px #46564b,0 0 18px 3px color-mix(in srgb,var(--lamp) 60%,transparent)}
.qo-lamp[data-lamp="off"]{background:radial-gradient(circle at 36% 32%,#8b948e 0 7%,#3a413d 40%,#111513 100%);box-shadow:0 0 0 3px #06100a,0 0 0 5px #46564b}
.qo-acct .qo-acct-counts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:10px}
/* PUBLISHED and FAILED: each box is its own container. The label is sized to the box (PUBLISHED is 5.4em wide), the
   figure to the box and its length, up to the comp's 50 px, on one line of the same height in every box, so the readouts
   stay level along a row whatever the counts. */
.qo-acct .qo-acct-counts{--fig:50px}
.qo-acct-counts>div{min-width:0;padding:2px 10px;border:10px solid transparent;border-image:url(/runtime/quit/deck-art/bay.webp) 44 50 fill/10px stretch;container-type:inline-size}
.qo-acct .qo-acct-counts dt{font-size:clamp(16px,17cqi,21px);line-height:1.05;white-space:nowrap}
.qo-acct .qo-acct-counts dd{--n:2;margin-top:2px;font-weight:700;font-family:var(--o-display);font-size:max(16px,min(var(--fig),calc(100cqi / (var(--n) * .62))));line-height:var(--fig);white-space:nowrap;color:var(--o-green)}
.qo-acct .qo-acct-counts>div+div dd{color:#e4f6ea}
/* A failure count above 0: the box outlined and the number in red. */
.qo-acct-counts>[data-failed]{outline:3px solid #ff4036;outline-offset:-5px;box-shadow:0 0 16px #ff403666,inset 0 0 20px #ff403638}
.qo-acct .qo-acct-counts>[data-failed] dd{color:#ff4036;text-shadow:0 0 12px #ff403688}
.qo-acct-more>*{margin-top:12px}
.qo-acct .qo-acct-error{padding:10px 12px;border:3px solid #ff4036;background:#250705;color:#ffc4be;font-size:18px;line-height:1.4;overflow-wrap:anywhere}
.qo-acct .qo-acct-next{margin-top:14px;padding-top:12px;border-top:3px solid #2c5a40}
.qo-acct-next>div{display:flex;align-items:baseline;justify-content:space-between;gap:16px}
.qo-acct-next,.qo-acct-last,.qo-acct-more{align-self:start}
.qo-acct-next dt{flex:none}
/* NEXT POST and TODAY 10:07 share one line in any card from 280 px: both sized to the card. A date on another day is
   sized by its length (--qa-len, the face averages under .47 em a character) to keep one line beside NEXT POST down to
   18 px; past that it breaks between the date and the time. */
.qo-acct .qo-acct-next dd{min-width:0;font:700 clamp(18px,min(7.8cqi,calc((100cqi - 124px) / (var(--qa-len,11) * .47))),28px)/1.15 var(--o-display);color:#e4f6ea;text-align:right}
.qo-acct .qo-acct-last{min-height:28px;margin-top:8px;font-size:20px;line-height:1.4;overflow-wrap:anywhere}
.qo-acct-last a{color:var(--o-green);text-decoration:underline;text-underline-offset:4px}
.qo-acct-last a:hover,.qo-acct-last a:focus-visible{text-decoration:underline;text-underline-offset:4px}
.qo-acct .qo-nowrap{white-space:nowrap}
.qo-acct-key{align-self:end;padding-top:12px}
.qo-acct-key .qo-key{display:flex;width:100%;min-height:58px;padding:9px 16px 13px;font-size:28px}
.qo-accounts>.qo-panel>.qo-empty{font-size:20px}

/* WHERE DO YOU POST?: one riveted tile per network not connected, three in a row at 1440 (as many as fit at 360 px or
   more). Each tile at the comp's size where it has the room (a third of the 1440 screen, 352 px inside the frame): the
   unlit lamp as large as the cards' lamps, the network mark, the name and the key, all scaled down with a narrower tile;
   the key or plate at the right end. */
.qo-where{padding:4px 6px 8px;container:qo-where/inline-size}
.qo .qo-where>h2{margin:0 0 10px;font-size:46px;line-height:1}
/* At most three tiles to a row (each at least a third), two from 730 px, one below. */
.qo-where-tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(max(min(100%,360px),calc((100% - 20px) / 3)),1fr));gap:10px}
.qo-where-tile{display:flex;align-items:center;gap:8px;min-width:0;min-height:84px;padding:4px 8px 4px 10px;border:10px solid transparent;border-image:url(/runtime/quit/deck-art/bay.webp) 44 50 fill/10px stretch;container-type:inline-size}
.qo-where-tile .qo-lamp{width:min(34px,9.6cqi);height:min(34px,9.6cqi);margin-right:4px}
.qo-where-tile .q-pmark{flex:none;width:min(46px,13cqi);height:min(46px,13cqi)}
.qo-where-name{flex:1 1 auto;min-width:0;margin-right:8px;font:700 max(16px,min(24px,6.8cqi))/1.1 var(--o-display);color:#e4f6ea}
.qo-where-tile .qo-key{flex:none;min-height:58px;padding:8px 12px 12px;font-size:max(16px,min(22px,6.25cqi))}
/* A face wider than the site's (the test measures IBM Plex Mono 600 too) may set X OR OTHER on two lines inside its tile;
   a name of one word keeps one line in any face. */
.qo-where-self{flex:none;padding:9px 10px;border:2px solid #3d4b42;background:#0a110d;box-shadow:inset 0 2px 5px #000;font:700 clamp(16px,4.7cqi,20px)/1.1 var(--o-display);color:#aeb8b1;white-space:nowrap}
.qo .qo-where-note{overflow-wrap:anywhere;margin-top:10px;padding-right:4px;text-align:right;font-size:20px;line-height:1.4;color:#d3f5e5}
/* The X line sits under the X OR OTHER tile, always the last one: it ends under the tile where the tile ends its row (the
   comp), and starts under it where the tile opens a row or sits in the middle of one. data-tiles is the tile count. */
@container qo-where (min-width:730px) and (max-width:1099.98px){
 .qo-where:is([data-tiles="1"],[data-tiles="3"],[data-tiles="5"]) .qo-where-note{text-align:left;padding-left:4px}
}
@container qo-where (min-width:1100px){
 .qo-where:is([data-tiles="1"],[data-tiles="4"]) .qo-where-note{text-align:left;padding-left:4px}
 .qo-where:is([data-tiles="2"],[data-tiles="5"]) .qo-where-note{text-align:left;padding-left:calc((100% - 20px) / 3 + 14px)}
}
/* A network the creator self-posts on but the studio can connect: its live SELF POST state under the name, CONNECT beside. */
.qo-where-name .qo-where-state{display:block;width:fit-content;margin-top:6px;padding:5px 8px;font-size:16px}

/* Phone: the cards stack full width and the tiles become rows. */
@media(max-width:760px){
 .qo-accounts{gap:8px}
 .qo-acct-cards{grid-template-columns:minmax(0,1fr);gap:8px}
 .qo-acct{padding:10px 10px 12px}
 .qo .qo-acct>h2{margin-bottom:14px}
 .qo-acct>h2>span{font-size:clamp(28px,11.5cqi,38px)}
 .qo-acct>h2 .q-pmark{width:clamp(35px,14.4cqi,47.5px);height:clamp(35px,14.4cqi,47.5px)}
 .qo-acct dt{font-size:clamp(18px,6.9cqi,19px)}
 .qo-acct .qo-acct-plate{min-height:56px}
 .qo-lamp{width:30px;height:30px}
 .qo-acct .qo-acct-counts{--fig:42px}
 .qo-acct .qo-acct-counts dt{font-size:clamp(16px,17cqi,18px)}
 .qo-acct .qo-acct-next dd{font-size:clamp(18px,min(7.8cqi,calc((100cqi - 116px) / (var(--qa-len,11) * .47))),24px)}
 .qo-acct .qo-acct-last{font-size:17px}
 .qo-acct .qo-acct-last:empty{min-height:0;margin-top:0}
 .qo-accounts>.qo-panel>.qo-empty{font-size:17px}
 .qo-acct .qo-acct-error{font-size:16px}
 .qo-acct-key .qo-key{min-height:56px;font-size:25px}
 .qo-where{padding:8px 8px 12px}
 .qo .qo-where>h2{font-size:30px;margin-bottom:10px}
 .qo-where-tiles{grid-template-columns:minmax(0,1fr);gap:8px}
 .qo-where-tile{min-height:72px;gap:7px;padding:4px 6px 4px 4px}
 .qo-where-tile .qo-lamp{width:24px;height:24px;margin-right:0}
 .qo-where-tile .q-pmark{width:clamp(28px,10cqi,38px);height:clamp(28px,10cqi,38px)}
 .qo-where-tile .qo-key{min-height:50px;padding:7px 12px 11px;font-size:clamp(16px,5.6cqi,21px)}
 .qo-where-name{margin-right:14px;font-size:clamp(16px,5.4cqi,22px)}
 .qo-where-self{padding:9px 8px}
 .qo .qo-where-note{margin-top:12px;text-align:left;font-size:17px}
}
/* The smallest phones: the tile spacing tightens so X OR OTHER keeps one line. */
@media(max-width:375px){
 .qo-where-tile{gap:6px;padding-left:2px}
 .qo-where-tile .qo-lamp{width:22px;height:22px}
 .qo-where-tile .q-pmark{width:26px;height:26px}
 .qo-where-name{margin-right:8px}
 .qo-where-tile>.qo-where-self{padding:9px 6px}
}