/* The rank panel at the top of a card's OVERVIEW (office-rank.js; the Partner Compensation Plan v2, owner approval of
   comp O for a computer and comp OM for a phone, 2 Nov 2026). Every plate is the office's own riveted panel (.qo-panel,
   deck-art/bay.webp); the bar sits in the same bezel. A computer reads three columns: the badge, the next rank with the
   tiles under it, and the next badge over EARNED THIS MONTH. A phone reads one: the badge row, the next rank, two by two
   tiles (EARNED joins them) and the next badge. The badges are pixel art, drawn without smoothing. */
.qo-standing{--qo-standing-cream:var(--o-ink);--qo-standing-fig:"QUIT Figures","QUIT Figures Fallback",monospace;display:grid;grid-template-columns:minmax(0,25fr) minmax(0,50fr) minmax(0,25fr);gap:12px;align-items:stretch}
.qo-standing img{display:block;image-rendering:pixelated}
.qo-standing .qo-panel{padding:16px 18px}
.qo-standing h2{margin:0;text-shadow:none}

/* the badge of the title, YOUR BADGE and THIS MONTH */
.qo-standing-you{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(14px,2vw,26px);text-align:center}
.qo-standing-badge{width:min(100%,264px);height:auto;aspect-ratio:1;margin-top:4px}
.qo-standing-names{display:flex;flex-direction:column;gap:8px;margin:0;font:700 clamp(18px,1.6vw,23px)/1.1 var(--o-display);letter-spacing:.04em;overflow-wrap:normal}
.qo-standing-title{color:var(--qo-standing-cream);font-weight:inherit}
.qo-standing-paid{color:var(--o-green);font-weight:inherit}

/* the next rank: the title, the bar in its bezel, the figure, its words and the days left */
.qo-standing-mid,.qo-standing-side{display:flex;flex-direction:column;gap:12px;min-width:0}
.qo-standing-next{display:flex;flex-direction:column;justify-content:center;gap:clamp(14px,1.8vw,24px);flex:1 1 auto;padding:22px 24px}
.qo .qo-standing-head{font:700 clamp(40px,4.4vw,66px)/1 var(--o-pixel);color:var(--o-orange);letter-spacing:.02em;overflow-wrap:normal}
.qo-standing-bar{position:relative;height:clamp(46px,4.4vw,62px);border:0 solid transparent;border-image:url(/runtime/quit/deck-art/bay.webp) 44 50 fill/13.2px 15px stretch}
.qo-standing-bar::before{content:"";position:absolute;inset:9px 12px;border:2px solid #1f4a33;border-radius:3px;background:#010a05;box-shadow:inset 0 2px 6px #000}
.qo-standing-fill{position:absolute;top:13px;bottom:13px;left:16px;width:calc((100% - 32px) * var(--qo-standing-p) / 100);border-radius:1px;background:var(--o-green);box-shadow:inset 0 -3px 0 rgba(0,0,0,.18),0 0 8px rgba(0,237,128,.35)}
.qo-standing-figures{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 16px;margin:0}
.qo-standing-count{--qo-standing-fit-min:28px;flex:0 1 auto;min-width:0;font:700 clamp(40px,4.4vw,66px)/1 var(--o-display-large);color:var(--o-green)}
.qo-standing-of{font:400 18px/1.3 var(--o-body);color:var(--qo-standing-cream)}
.qo-standing-days{margin-left:auto;font:700 clamp(24px,2.4vw,36px)/1 var(--o-display);letter-spacing:.03em;color:var(--o-orange);white-space:nowrap}

/* the tiles: a title and one figure each, as wide as their row allows */
.qo-standing-tiles{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:12px}
.qo-standing .qo-standing-tile{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;min-width:0;min-height:128px;padding:12px 8px;container-type:inline-size;text-align:center;text-decoration:none;color:inherit}
/* a label breaks between its words, never inside one: a single long word (LEADERBOARD) takes a smaller size in a narrow tile */
.qo-standing-label{font:700 min(clamp(15px,1.5vw,21px),11.5cqi)/1.15 var(--o-display);letter-spacing:.04em;color:var(--qo-standing-cream);overflow-wrap:normal}
.qo-standing-fig{--qo-standing-fit-min:18px;align-self:stretch;font:700 clamp(28px,3vw,46px)/1 var(--o-display-large);color:var(--o-green)}
a.qo-standing-tile:focus-visible{outline:3px solid #fff0ad;outline-offset:3px}
@media(hover:hover){a.qo-standing-tile:hover .qo-standing-label{color:var(--o-orange)}}
.qo-standing .qo-standing-earned-tile{display:none}

/* the next special badge and EARNED THIS MONTH */
.qo-standing-goal{display:flex;flex-direction:column;align-items:center;gap:12px;flex:1 1 auto;text-align:center}
.qo .qo-standing-goal-head,.qo .qo-standing-earned-head{align-self:flex-start;font:700 clamp(24px,2.1vw,32px)/1 var(--o-pixel);color:var(--o-orange);text-align:left;overflow-wrap:normal}
.qo-standing-goal-badge{width:min(100%,176px);height:auto;aspect-ratio:1}
.qo-standing-goal-line{margin:0;font:700 16px/1.3 var(--o-display);letter-spacing:.05em;color:var(--qo-standing-cream);overflow-wrap:normal}
.qo-standing-earned{display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center}
.qo-standing-earned-fig{--qo-standing-fit-min:24px;align-self:stretch;margin:0;font:700 clamp(36px,3.4vw,54px)/1 var(--o-display-large);color:var(--o-green)}
.qo-standing-earned-line{margin:0;font:400 15px/1.35 var(--o-body);color:var(--qo-standing-cream);text-align:left}

/* Every figure is its own element (office-rank.js figs) in the site's figures face, QUIT Figures, as creator-network.css
   sets its figures: Jersey 20 on every page. On a Cyrillic page the display faces draw Latin and digits in Handjet (one
   face a line, i18n-dom.js), whose zero reads as an 8. The words around a figure keep their element's face. */
.qo-standing .qo-standing-num{font-family:var(--qo-standing-fig)}

/* Between a phone and a full computer: the badge beside the next rank, the next badge and EARNED in a row under them. */
@media(min-width:761px) and (max-width:1150px){
 .qo-standing{grid-template-columns:minmax(0,1fr) minmax(0,2.2fr)}
 .qo-standing-side{grid-column:1/-1;flex-direction:row}
 .qo-standing-side>*{flex:1 1 0}
}

/* A phone (comp OM): one column; EARNED is a tile beside the others. */
@media(max-width:760px){
 .qo-standing{display:flex;flex-direction:column;gap:10px}
 .qo-standing .qo-panel{padding:12px 14px}
 .qo-standing-you{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;justify-items:start;gap:14px;text-align:left}
 .qo-standing-badge{width:clamp(92px,30vw,124px);margin:0}
 .qo-standing-names{gap:10px;font-size:clamp(16px,4.9vw,21px)}
 .qo-standing-next{gap:12px;padding:14px 16px 16px}
 .qo .qo-standing-head{font-size:clamp(26px,8.4vw,34px)}
 .qo-standing-bar{height:44px}
 .qo-standing-bar::before{inset:8px 11px}
 .qo-standing-fill{top:12px;bottom:12px;left:15px;width:calc((100% - 30px) * var(--qo-standing-p) / 100)}
 .qo-standing-figures{flex-direction:column;align-items:center;gap:6px;text-align:center}
 .qo-standing-count{--qo-standing-fit-min:24px;align-self:stretch;font-size:clamp(40px,13.4vw,54px)}
 .qo-standing-of{font-size:16px}
 .qo-standing-days{margin:0;font-size:clamp(22px,7vw,28px)}
 .qo-standing-tiles{grid-auto-flow:row;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
 .qo-standing .qo-standing-tile{gap:6px;min-height:92px;padding:10px 8px}
 .qo-standing-tile:last-child:nth-child(odd){grid-column:1/-1}
 .qo-standing-label{font-size:min(clamp(13px,4.2vw,17px),11.5cqi)}
 .qo-standing-fig{font-size:clamp(24px,8vw,32px)}
 .qo-standing .qo-standing-earned-tile{display:flex}
 .qo-standing-earned{display:none}
 .qo-standing-side:not(:has(.qo-standing-goal)){display:none}
 .qo-standing-goal-badge{width:clamp(140px,50vw,190px)}
 .qo-standing-goal-line{font-size:clamp(14px,4.4vw,17px)}
}