/* A fixed world, named standings and readable project context. */
.rq-homepage{--panel:var(--rq-glass);--panel-ink:var(--rq-ink);--edge:12px;--ticker:68px;--rq-floor:40px;min-height:0}
.rq-homepage .rq-stage-header{height:56px;min-height:56px;padding:0 18px;gap:24px}
.rq-homepage .rq-stage-brand{font-size:18px;gap:8px}.rq-homepage .rq-stage-brand img{width:26px;height:26px}
.rq-homepage .rq-stage-nav{font-size:13px;gap:20px}.rq-homepage .rq-stage-nav a:not(.mobile-owner-nav),.rq-homepage .rq-stage-brand{display:inline-flex;align-items:center;min-height:40px}.rq-homepage .rq-stage-nav a{min-width:40px;justify-content:center;padding-inline:3px}
@media(max-width:850px){.rq-homepage .rq-stage-nav a.mobile-owner-nav{display:inline-flex;align-items:center;min-height:40px}}.rq-homepage .rq-stage-actions{font-size:12px;gap:14px}
.rq-homepage .rq-stage-join{font-size:13px;padding:10px 14px}.rq-homepage .header-pot strong{font-size:14px}.rq-homepage .header-pot span{font-size:12px}
/* Home says two things in its own voice: who leads RQ Rank, and that the order is earned. Both lines were
   already written in the page and switched off. They sit on a plate, so the words have a background that
   can be measured instead of whatever the canvas happens to paint behind them. */
/* The old composition put a gradient scrim behind this block so text could sit over the world
   (home-world.css:67, 275x200, above 1200px). It painted nothing while .world-copy was
   display:contents, and the moment this became a real box it came back as a flat slab in the
   middle of the scene, 160px below the plate it was drawn for. The plate carries its own
   background now, so the scrim goes. */
.rq-homepage .world-copy::before{display:none}
.rq-homepage .world-copy{display:block;position:fixed;z-index:12;inset:70px auto auto 12px;width:max-content;max-width:min(420px,calc(100vw - 420px));padding:8px 11px 9px;border-radius:6px;background:var(--panel);color:var(--panel-ink);text-shadow:none;pointer-events:none}
/* The one sentence the product owns about itself, which until now existed only in the page's meta
   description and inside a dialog nobody opens. It sits above the leader as a kicker, not a slogan. */
.rq-homepage .world-premise{display:block;margin:0 0 3px;font:500 13px/19px Geist,sans-serif;color:var(--rq-ink-2);max-width:32ch}
.rq-homepage .world-lede{display:block;margin:0;font:650 26px/32px Geist,sans-serif;letter-spacing:-.015em;color:var(--rq-ink);white-space:normal;max-width:none}
@media(min-width:1200px){.rq-homepage .world-lede{font:650 31px/37px Geist,sans-serif}.rq-homepage .world-premise{font:500 14px/20px Geist,sans-serif}}
.rq-homepage .queue-purpose{display:block;margin:2px 0 0;font:12px/17px Geist,sans-serif;color:var(--rq-ink-2);max-width:none}
/* The way in, beside the page's own voice rather than fifth in a row of legal links: the explainer
   stopped opening itself, and a 12px grey footer link is not a replacement for it. */
/* The world has a rope at the front and screens over it and no words anywhere near them. Two links, not
   a paragraph: the objects are named in the product's own language and go where they are explained. */
.rq-homepage .world-objects{color:var(--rq-ink-2)}
/* The card rendered a category into the markup and CSS gave it no size, so a real project's identity
   was carried and then thrown away. Wide screens have the room for it. */
/* The scrollable world region inherited the page's 3px focus ring, which drew a box round the whole
   hero: the plate, the note, the board and the world at once. It rings itself, inside its own edge. */
.rq-homepage #queue-interaction:focus-visible{outline:2px solid var(--rq-yellow);outline-offset:-6px;border-radius:10px}
.rq-homepage .world-explain+.world-explain{margin-left:16px}
.rq-homepage .world-explain{display:inline-flex;align-items:center;min-height:40px;margin:0;font:600 12px/1.45 Geist,sans-serif;color:var(--rq-yellow-text);pointer-events:auto;text-decoration:none;white-space:nowrap}
.rq-homepage .world-explain:hover{text-decoration:underline;text-underline-offset:3px}
.rq-homepage .world-eyebrow:not([hidden]){position:static;inset:auto;margin:0 0 3px;padding:0;font-size:12px;transform:none;max-width:none}
.rq-homepage .queue-interaction{inset:56px 0 calc(68px + var(--rq-floor));touch-action:none;cursor:grab}.rq-homepage .queue-interaction:active{cursor:grabbing}
.rq-homepage .world-camera{position:fixed;inset:70px 12px auto auto;width:68px;max-width:none;padding:0;border:0;background:none;box-shadow:none;display:block;transform:none;z-index:25}
.rq-homepage .world-settings{display:block;position:relative}.rq-homepage .world-settings>summary{display:flex;align-items:center;justify-content:center;min-height:40px;font:600 13px Geist,sans-serif;background:var(--panel);color:var(--panel-ink);border:1px solid var(--rq-line-strong);border-radius:5px;cursor:pointer}.rq-homepage .world-settings>summary:after{content:'⌄';margin-left:6px}
.rq-homepage .world-settings-options{display:grid;position:absolute;inset:46px 0 auto auto;width:186px;gap:6px;padding:8px;max-height:calc(100dvh - 160px);overflow:auto;background:var(--panel);border:1px solid var(--rq-line-strong);border-radius:6px}
.rq-homepage .world-settings-options label{display:none}.rq-homepage .world-settings-options select{width:100%;font-size:14px;min-height:40px}.rq-homepage .world-settings-options button,.rq-homepage .world-settings-options .world-event{position:static;width:100%;min-height:40px;max-width:none;margin:0;padding:8px;font:12px/1.3 Geist,sans-serif;white-space:normal}.rq-homepage .queue-return[hidden]{display:none}
/* The compact state still contains names and a labelled score, never logos alone. */
/* The left column, top to bottom: the voice, the state of the world, the board. Side by side, the plate
   and the board were two dark panels of the same weight 24px apart, and read as one object. */
.rq-homepage .rich-list-zone,.rq-homepage .rich-list-zone.is-expanded{position:fixed;inset:312px auto auto 12px;width:274px;height:auto;overflow:hidden;padding:0;border-radius:6px;background:var(--panel)}
/* Expand has to make the object bigger. It used to add two selects and a footer inside the same box,
   so pressing it dropped the list from seven rows to five: a control that contracts what it opens.
   Expanded, the panel takes the column from under the header down to the strip. */
/* A 274px panel gives a project line about thirteen characters. Wider screens have the room. */
@media(min-width:1440px){.rq-homepage .rich-list-zone{width:330px}}
@media(min-width:1800px){.rq-homepage .rich-list-zone{width:380px}}
@media(min-width:851px){.rq-homepage .rich-list-zone.is-expanded{inset:300px auto auto 12px;width:340px}
 /* The expanded panel starts below the heading and the note rather than on top of them. Hiding them
    was worse than the ghosting it fixed: in Simulation it took the "none of it is real" disclosure off
    the screen while fabricated projects were on it. */}
/* The list runs past its own bottom edge with no scrollbar. The fade says there is more. */
/* The fade said "there is more below" whether or not there was. It faded the last row of a list with
   nothing to scroll, and went on fading it once scrolled to the end, so the final row was never shown
   whole. It is drawn only while something is actually below the fold. */
.rq-homepage #rich-list.has-more{-webkit-mask-image:linear-gradient(#000 calc(100% - 18px),transparent);mask-image:linear-gradient(#000 calc(100% - 18px),transparent)}
.rq-homepage .rank-object{display:flex;flex-direction:column;max-height:inherit;min-height:0;padding:8px;background:none;border:0;border-radius:0;backdrop-filter:none;overflow:hidden}
.rq-homepage .rank-object-top{display:flex;position:static;gap:6px;min-height:40px;height:auto;padding:0 2px 6px;background:none;align-items:center}
.rq-homepage .rank-object-title{font:650 13px/19px Geist,sans-serif;margin:0}.rq-homepage .rank-object-top p{display:block;font:12px/17px Geist,sans-serif;margin:0;color:var(--rq-ink-2)}
.rq-homepage #rank-toggle{position:static;display:block;min-width:48px;min-height:40px;padding:5px;margin-left:auto;border:0;background:none;color:var(--rq-gold);font:12px/1.45 Geist,sans-serif}
.rq-homepage .rank-paging{display:none}
/* What the two numbers are made of was behind Expand. The foot carries it at every width; its first
   link stays out because the header already routes to the full board, and two adjacent links to the
   same place is the fault this round removed from the strip. The column legend stays out too: this
   object's rows are not the full board's columns, and a header that does not line up is worse than
   the subtitle that already names both numbers. */
.rq-homepage .rank-explanation{display:none}
@media(min-width:851px){.rq-homepage .rank-object .rank-object-foot{display:flex;flex:none;gap:0 12px;padding:2px 2px 0;font-size:12px}.rq-homepage .rank-object .rank-object-foot a:last-child{display:inline-flex;align-items:center;min-height:40px;color:var(--rq-gold)}.rq-homepage .rank-object .rank-object-foot a:first-child{display:none}}
/* A score with no time on it is a number the reader cannot weigh, and a board with no way out of it is
   a dead end. The header is two rows: the object and its control, then how fresh it is and where the
   rest of it lives. The column legend stays out; this object's rows are not the full board's columns. */
@media(min-width:851px){
 .rq-homepage .rank-object-top{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;row-gap:1px}
 .rq-homepage .rank-object-top>div{grid-area:1/1}
 .rq-homepage #rank-toggle{grid-area:1/2;margin:0}
 .rq-homepage #rank-updated{display:inline-flex;align-items:center;grid-area:2/1;font:12px/17px Geist,sans-serif;color:var(--rq-ink-2)}
 .rq-homepage .rank-full-link{display:inline-flex;align-items:center;justify-self:end;grid-area:2/2;min-height:40px;padding:0 2px;font:600 12px/17px Geist,sans-serif;color:var(--rq-gold)}
}
@media(max-width:850px){.rq-homepage .rank-full-link{display:none}
 .rq-homepage #rank-updated{display:block;padding:0 4px;font:12px/17px Geist,sans-serif;color:var(--rq-ink-2)}}
.rq-homepage .rich-list-zone:not(.is-expanded) .rank-move{display:none}
.rq-homepage .world-rank-filters,.rq-homepage #rank-metric-note,.rq-homepage .rank-object-foot{display:none}
.rq-homepage #rich-list,.rq-homepage .rich-list-zone:not(.is-expanded) #rich-list{display:flex;flex-direction:column;gap:3px;min-height:0;overflow:auto;scrollbar-width:thin}
.rq-homepage #rich-list .rich-row{display:grid!important;flex-shrink:0;grid-template-columns:20px 28px 34px minmax(0,1fr) 40px;grid-template-rows:20px 16px;min-height:46px;height:46px;padding:5px 3px;gap:0 5px;border-radius:4px;background:var(--rq-panel);color:var(--rq-ink)}
.rq-homepage .rich-rank{grid-area:1/1/3/2;font:650 13px/32px Geist,sans-serif}.rq-homepage .rank-avatar{display:block;grid-area:1/2/3/3;width:28px;height:34px;align-self:center}.rq-homepage .rank-avatar svg{width:100%;height:100%;display:block}
/* A tile with a fixed light background needs a letter colour to match it. The letter used to inherit
   the page's ink, which on the dark scheme is light: a light letter on a near-white tile measured
   1.1:1, which is no letter at all. Colour belongs with the background that decides it. */
.rq-homepage .rank-logo{grid-area:1/3/3/4;width:34px;height:34px;border-radius:4px}
.rq-homepage .rich-project{position:static;grid-area:1/4/3/5;width:auto;height:auto;overflow:hidden;clip-path:none;align-self:center}.rq-homepage .rich-project strong{font:600 12px/16px Geist,sans-serif;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* The row's second line is what makes it a project rather than a name and a number. The grid already
   reserves it (16px), so showing it costs no height. Category, country and RQ number stay out: they
   belong to the full board, where there are columns for them. */
.rq-homepage .rich-project small{display:block;font:12px/15px Geist,sans-serif;color:var(--rq-ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rq-homepage .rank-context,.rq-homepage .rich-leader-label{display:none}
.rq-homepage .rich-score{grid-area:1/5;font:650 13px/18px Geist,sans-serif}.rq-homepage .rich-move{grid-area:2/5;font:12px/14px Geist,sans-serif}.rq-homepage .rich-gathering{grid-area:1/5/3/6;font-size:12px;overflow-wrap:anywhere}
.rq-homepage .score-sample{display:none}.rq-homepage .rank-samples-note{font:12px/14px Geist,sans-serif;margin:5px 0}
/* Its own block, with a rule above it, so the score column descends inside each object instead of
   stepping back up at the join. */
.rq-homepage .rank-sample-block{display:flex;flex-direction:column;gap:3px;margin:6px 0 0;padding:6px 4px 4px;border-top:1px solid var(--rq-line-strong);border-radius:0 0 5px 5px;background:color-mix(in srgb,var(--rq-ink) 5%,transparent)}
.rq-homepage .rank-sample-block .rank-samples-note{margin:0 0 2px;color:var(--rq-ink-2);letter-spacing:.04em;text-transform:uppercase}.rq-homepage .rank-samples-short{display:none}.rq-homepage .rank-samples-long{display:inline}
.rq-homepage .rich-list-zone.is-expanded .world-rank-filters{display:grid;grid-template-columns:1fr 1fr;gap:5px;margin:4px 0}.rq-homepage .world-rank-filters select{min-height:36px;font-size:12px}.rq-homepage .rich-list-zone.is-expanded #rank-metric-note{display:block;font-size:12px;margin:3px 0 6px}.rq-homepage #rank-metric-note[hidden]{display:none}.rq-homepage .rich-list-zone.is-expanded .rank-object-foot{display:flex;flex-shrink:0;font-size:12px;padding:7px 0 0;gap:8px}
.rq-homepage .rank-unavailable{padding:8px;font-size:12px}.rq-homepage .rank-unavailable h3{font-size:14px}.rq-homepage .rank-unavailable p{font-size:12px}
.rq-homepage #rank-refresh-note{margin:3px 0;padding:3px;font:12px/15px Geist,sans-serif;color:var(--rq-gold)}.rq-homepage #rank-refresh-note[hidden]{display:none}.rq-homepage .rank-refresh-short{display:none}
/* Description owns the full width beneath the identity row. */
.rq-homepage .queue-preview,.rq-homepage .queue-preview.is-detail-open{position:fixed;inset:auto 12px calc(80px + var(--rq-floor)) auto;width:390px;height:auto;min-height:152px;padding:12px;border-radius:6px;background:var(--panel);visibility:visible;backdrop-filter:none}
.rq-homepage #selected-peek{display:none}.rq-homepage #selected-project,.rq-homepage .is-detail-open #selected-project{display:block;width:100%;height:auto;padding:0;margin:0;border:0}
.rq-homepage .selected-identity{display:grid;grid-template-columns:44px minmax(0,1fr) auto;grid-template-rows:auto auto auto;gap:8px;align-items:center;min-height:128px}
.rq-homepage .selected-identity>.selected-logo{grid-area:1/1;width:44px;height:44px;border-radius:5px}
/* The name is one line. Breaking anywhere turned FIELDWORK into FIELDWO/RK in a 390px card: a project's
   own name is the last thing on the page that should be cut mid-word. */
.rq-homepage .selected-copy{display:contents}.rq-homepage .selected-copy h2{grid-area:1/2/2/4;font:650 17px/21px Geist,sans-serif;margin:0;padding-right:88px;overflow-wrap:normal;word-break:normal;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.rq-homepage .selected-copy h2 .project-link{display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* A clamp ends a cut line with an ellipsis; a scrolling box with a fixed height ends it mid-word and
   says nothing. The line the card is given is already trimmed at a word by shortLine, so the clamp is
   only for the widths where four lines still do not fit. */
.rq-homepage .selected-description{grid-area:2/1/3/4;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:4;font:13px/18px Geist,sans-serif;color:var(--rq-ink-2);margin:0;max-height:none;overflow:hidden}
.rq-homepage .selected-category{display:none}.rq-homepage .selected-rank,.rq-homepage .selected-paid{display:flex;flex-direction:row;align-items:baseline;gap:4px;white-space:nowrap}.rq-homepage .selected-rank{grid-area:3/1/4/3}.rq-homepage .selected-paid{grid-area:3/3;justify-self:end}
.rq-homepage .selected-rank span,.rq-homepage .selected-paid span{font:12px/16px Geist,sans-serif}.rq-homepage .selected-rank strong,.rq-homepage .selected-paid strong{font:650 13px/16px Geist,sans-serif}.rq-homepage .selected-paid small{display:none}
.rq-homepage .project-link{position:static;grid-area:4/1/5/4;width:auto;min-height:32px;padding:6px 0;margin:0;font:12px/20px Geist,sans-serif;text-align:left;border:0;background:none;color:var(--rq-gold)}
.rq-homepage .queue-controls{position:absolute;inset:12px 8px auto auto;width:88px;height:44px}.rq-homepage .queue-navigation{gap:0}.rq-homepage .queue-navigation button{width:44px;height:44px;min-width:44px;padding:12px;border:0;border-radius:4px}
/* Three buttons sitting on the title row left a nine-letter project name seventy pixels to render in,
   so the card cut the one thing on it that matters most. Close keeps the corner; the arrows drop to the
   foot, and the title takes the width back. */
@media(min-width:851px){
 .rq-homepage .queue-controls{position:absolute;inset:auto auto 10px 10px;display:flex;align-items:center;width:auto;height:44px}
 .rq-homepage .queue-navigation{display:flex;align-items:center;gap:0}
 .rq-homepage #queue-count{display:inline-block;margin-left:6px;font:12px/1.4 Geist,sans-serif;color:var(--rq-ink-2);white-space:nowrap}
 .rq-homepage .queue-count-label{display:inline}
 /* Out of the arrow cluster it also leaves that cluster's button and icon styling behind, and an icon
    with no stroke is a black sliver on a dark card. */
 .rq-homepage #selected-close{position:absolute;inset:10px 8px auto auto;display:grid;place-items:center;width:40px;height:40px;min-width:40px;padding:10px;border:0;border-radius:6px;background:none;color:var(--rq-ink)}
 .rq-homepage #selected-close:hover{background:color-mix(in srgb,var(--rq-ink) 12%,transparent)}
 .rq-homepage #selected-close svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round}
 .rq-homepage .selected-copy h2{padding-right:52px}
 .rq-homepage .project-link{grid-area:4/2/5/4;justify-self:end;width:auto;min-width:0}
}
/* The position count sits between the arrows it belongs to at every width; hiding it left two chevrons
   with nothing between them and no way to tell where you are in the line. */
@media(max-width:850px){.rq-homepage .queue-navigation #queue-count{display:inline-block;margin:0 4px;font:12px/1.4 Geist,sans-serif;color:var(--rq-ink-2);white-space:nowrap}}
.rq-homepage .selected-sample{position:absolute;inset:-16px auto auto 8px;background:var(--panel);color:var(--rq-ink-2);font:12px/16px Geist,sans-serif;padding:0 5px;border:0;border-radius:3px}
.rq-homepage .selected-identity.is-status{display:block}.rq-homepage .is-status .selected-copy{display:block}.rq-homepage .is-status .selected-copy h2{padding-right:88px}.rq-homepage .is-status .selected-description{margin-top:8px}.rq-homepage .selected-provenance,.rq-homepage .selected-portrait{display:none}
.selection-tracer{position:fixed;inset:0;z-index:5;pointer-events:none}.selection-tracer[hidden]{display:none}.selection-tracer svg{width:100%;height:100%;overflow:visible}.tracer-line{stroke:var(--rq-ink);stroke-opacity:.5;stroke-width:1;vector-effect:non-scaling-stroke}.tracer-end{fill:var(--rq-yellow);stroke:#14202b;stroke-width:1.5}
/* Queue items identify what the project does, with genuine provenance. */
.rq-homepage .queue-strip{position:fixed;inset:auto 0 var(--rq-floor);height:68px;min-height:68px;display:grid;grid-template-columns:78px minmax(0,1fr) 36px;gap:8px;padding:5px 10px;background:var(--rq-bg);border:0}.rq-homepage .queue-strip-head{display:contents}.rq-homepage .queue-strip-head h2,.rq-homepage #queue-data-status,.rq-homepage .queue-explore-desktop{display:none}.rq-homepage .queue-explore-mobile{display:inline}.rq-homepage .queue-strip-head a{grid-area:1/1;display:flex;align-items:center;font-size:12px;line-height:1.35;margin:0;min-height:44px;color:var(--rq-yellow-text)}
/* The way out of the strip is fixed at its head. The card at the end of the track carried it, and at
   1440 the track is 1812px wide, so the only route out sat 240px off the right edge. The fade says the
   track keeps going. */
.rq-homepage .queue-ticker-viewport{-webkit-mask-image:linear-gradient(90deg,transparent,#000 22px,#000 calc(100% - 22px),transparent);mask-image:linear-gradient(90deg,transparent,#000 22px,#000 calc(100% - 22px),transparent)}
.rq-homepage .ticker-motion{position:static;grid-area:1/3;min-height:44px;height:54px;width:36px;font-size:0;padding:0;border:0}.rq-homepage .ticker-motion:before{content:'Ⅱ';font-size:16px}.rq-homepage .ticker-motion[aria-pressed=true]:before{content:'▶';font-size:12px}.rq-homepage .queue-ticker-viewport{grid-area:1/2;height:58px}.rq-homepage .queue-ticker-track{gap:6px}
.rq-homepage .queue-ticker-card{height:58px;width:230px;flex-basis:230px;padding:5px;gap:8px;border-radius:4px}.rq-homepage .ticker-character{display:none}.rq-homepage .queue-ticker-card .selected-logo{width:36px;height:36px;flex-basis:36px;object-fit:contain}.rq-homepage .ticker-copy strong{font-size:12px;line-height:15px}.rq-homepage .ticker-copy small{font-size:12px;line-height:14px;margin:0}.rq-homepage .ticker-description{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font:12px/15px Geist,sans-serif;color:var(--rq-ink-2)}
.rq-homepage #world-notification{top:172px;right:12px;width:280px;padding:12px;font-size:12px}
/* The alert's own dismiss is a control like any other: 44px, at every width, not 32 on a desktop. */
.rq-homepage #world-notification .notification-dismiss{width:44px;height:44px;display:grid;place-items:center;font-size:23px}.rq-homepage #world-notification strong{font-size:14px}.rq-homepage #world-notification p{font-size:13px}
@media(max-width:850px){
 .rq-homepage .rq-stage-header{position:relative;height:88px;min-height:88px;padding:0 10px;display:grid;grid-template-columns:1fr auto;grid-template-rows:48px 40px;gap:0}
 .rq-homepage .rq-stage-brand{grid-area:1/1;font-size:16px;gap:7px}.rq-homepage .rq-stage-brand img{width:24px;height:24px}.rq-homepage .rq-stage-brand span{display:inline}
 .rq-homepage .rq-stage-actions{grid-area:1/2;margin:0}.rq-homepage .rq-stage-join{min-height:44px;padding:10px 14px;font-size:13px}
 .rq-homepage .rq-stage-nav{display:flex;grid-area:2/1/3/3;position:static;height:40px;width:100%;padding:0;gap:0;justify-content:space-between;background:none;font-size:12px}.rq-homepage .rq-stage-nav a{display:flex;align-items:center;min-height:40px;padding:0 3px;font-size:12px;white-space:nowrap}
 .rq-homepage .queue-world{position:relative;inset:auto;height:calc(100dvh - 156px - env(safe-area-inset-bottom));min-height:0}
 .rq-homepage .world-camera{position:absolute;inset:8px 8px auto auto;width:60px}.rq-homepage .world-settings-options select{font-size:16px}.rq-homepage .world-settings-options button{min-height:44px}
 .rq-homepage .world-eyebrow:not([hidden]){inset:auto auto 176px 8px;max-width:150px;font-size:12px;line-height:15px;white-space:normal;background:var(--rq-glass);border:1px solid var(--rq-gold);color:var(--rq-gold);padding:4px 7px;z-index:6}
 .rq-homepage .queue-interaction{inset:0;touch-action:none}
 .rq-homepage .rich-list-zone,.rq-homepage .rich-list-zone.is-expanded{position:absolute;inset:8px auto auto 8px;width:220px;max-width:calc(100% - 84px)}
 .rq-homepage .rank-object{padding:5px;max-height:inherit}.rq-homepage .rank-object-top{min-height:36px;padding-bottom:3px}.rq-homepage #rank-toggle{min-height:36px}
 .rq-homepage .rich-list-zone:not(.is-expanded) #rich-list{max-height:49px;overflow:hidden}.rq-homepage .rich-list-zone:not(.is-expanded) .rank-samples-note{display:none}
 .rq-homepage .rich-list-zone.is-expanded{width:260px;max-width:calc(100% - 84px)}
 .rq-homepage .queue-preview,.rq-homepage .queue-preview.is-detail-open{position:absolute;inset:auto 8px 8px;width:auto;min-height:0;padding:10px}
 .rq-homepage .selected-identity{min-height:0;gap:6px;grid-template-columns:40px minmax(0,1fr) auto}.rq-homepage .selected-identity>.selected-logo{width:40px;height:40px}.rq-homepage .selected-copy h2{font-size:15px;line-height:19px}.rq-homepage .selected-description{font-size:13px;line-height:17px;max-height:34px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
 .rq-homepage .queue-controls{top:8px}.rq-homepage .project-link{grid-area:4/1/5/4;min-height:28px;padding:2px 0}
 .rq-homepage .queue-strip{position:relative;inset:auto;height:calc(68px + env(safe-area-inset-bottom));min-height:68px;padding:5px 6px calc(5px + env(safe-area-inset-bottom));grid-template-columns:44px minmax(0,1fr) 28px;gap:4px}.rq-homepage .ticker-motion{width:28px}.rq-homepage .queue-ticker-card{width:206px;flex-basis:206px}
 .rq-homepage #world-notification{position:absolute;inset:56px 8px auto auto;width:260px;max-width:calc(100% - 16px);max-height:34dvh}.rq-homepage.has-rank-expanded .queue-preview{visibility:visible}
}
@media(max-width:850px) and (max-height:650px){
 /* 96px is the header on its own, so the list computed to nothing and the board showed a title and a
    freshness stamp with no rows at all. The zone keeps enough for the header and three rows, and the
    list stays the scroller. */.rq-homepage .rich-list-zone:not(.is-expanded) #rich-list{max-height:none;min-height:46px}
 .rq-homepage .selected-description{max-height:51px}.rq-homepage .selected-identity{gap:4px}.rq-homepage .selected-identity>.selected-logo{width:34px;height:34px}.rq-homepage .queue-preview{padding:8px}
}
@media(max-width:850px) and (min-width:550px) and (max-height:500px){
 .rq-homepage .queue-preview,.rq-homepage .queue-preview.is-detail-open{left:auto;width:280px;bottom:8px}.rq-homepage .rich-list-zone{width:190px}.rq-homepage .queue-world{height:calc(100dvh - 156px)}
}
/* Resolve inherited layout rules at the same specificity as their source. */
.rq-homepage .world-settings:not([open]) .world-settings-options{display:none}
.rq-homepage #rich-list .rich-row.is-live:first-child{grid-template-columns:20px 28px 34px minmax(0,1fr) 40px;grid-template-rows:20px 16px;padding:5px 3px;min-height:46px;height:46px}
.rq-homepage .selected-copy h2 .project-link{display:inline;position:static;width:auto;min-height:0;margin:0;padding:0;border:0;background:none;color:var(--rq-ink)!important;font:inherit;text-align:left;white-space:normal;line-height:inherit}
.rq-homepage .selected-copy h2 .project-link span{display:inline;color:var(--rq-gold);font-size:13px}
.rq-homepage .selected-description{max-width:none}
.rq-homepage .selected-sample{display:block}
/* The sample mark rides the description line. On a line of its own it was a third line in a row built
   for two, and every name sat on the row above it. */
.rq-homepage .rich-list-zone:not(.is-expanded) .rich-row.is-sample .rich-project small:before{content:'Sample · ';color:var(--rq-ink-3)}
.rq-homepage .rank-unavailable{min-height:0}
@media(max-width:850px){
 .rq-homepage .selected-description{max-height:34px}
 .rq-homepage .selected-sample{position:static;font-size:12px;line-height:14px;margin:0 0 4px;padding:0;background:none}
 .rq-homepage .selected-identity{grid-template-rows:auto auto auto;gap:5px}
}
@media(max-width:850px) and (max-height:650px){
 .rq-homepage .selected-description{max-height:68px}
 .rq-homepage .rich-list-zone.is-expanded{width:220px}
 /* These were switched off here, which with no expanded state on a phone meant the metric and the
    category could not be reached at all below 851. A cramped control a viewer can get to beats a tidy
    one they cannot: the object scrolls on a screen this short rather than dropping its own filters. */
 .rq-homepage .rich-list-zone.is-expanded .rank-object{overflow:auto;-webkit-overflow-scrolling:touch}
 .rq-homepage .rich-list-zone.is-expanded .rank-object-foot{padding:3px 0;font-size:12px}.rq-homepage .rich-list-zone.is-expanded .rank-object-foot a:last-child{display:none}
 .rq-homepage .rich-list-zone.is-expanded .rank-samples-note{font-size:12px;line-height:13px;padding-top:3px;margin:3px 0}
}
.rq-homepage .rank-object-top p,.rq-homepage .rank-samples-note,.rq-homepage .rich-list-zone.is-expanded #rank-metric-note,.rq-homepage #rank-refresh-note{font-size:12px;line-height:17px}
.rq-homepage #rich-list{flex:1 1 auto;min-height:0}.rq-homepage .rank-object-top{flex-shrink:0}

/* Momentum reads on every row, not only the ivory leader row; the sparse retry is the accent, not the ink. */
.rq-homepage #rich-list .rich-row:not(:first-child) .rich-move.is-up{color:var(--rq-up)}.rq-homepage #rich-list .rich-row:not(:first-child) .rich-move.is-down{color:var(--rq-down)}
.rq-homepage .selected-identity.is-status .project-link,.rq-homepage .is-status .selected-copy .project-link{display:inline-flex;align-items:center;min-height:40px;color:var(--rq-gold)!important;font-weight:600;text-decoration:underline;text-underline-offset:3px}
.rq-homepage .ticker-motion:before{content:'';display:block;width:4px;height:14px;margin:auto;border-left:4px solid var(--rq-ink-2);border-right:4px solid var(--rq-ink-2);box-sizing:content-box}
.rq-homepage .ticker-motion[aria-pressed=true]:before{width:0;height:0;border-left:11px solid var(--rq-ink-2);border-right:0;border-top:7px solid transparent;border-bottom:7px solid transparent}

/* General queue strip: RQ number, name and the whole message on every card. */
.rq-homepage{--ticker:98px}
.rq-homepage .queue-strip{height:98px;min-height:98px}
.rq-homepage .ticker-motion{height:auto}
.rq-homepage .queue-ticker-viewport{height:88px}
.rq-homepage .queue-ticker-card{height:88px;width:256px;flex-basis:256px;padding:7px 9px;gap:9px;border-radius:6px;align-items:flex-start}
.rq-homepage .queue-ticker-card .selected-logo{margin-top:1px}
.rq-homepage .ticker-copy{min-width:0;display:block}
.rq-homepage .ticker-copy strong{display:block;font-size:13px;line-height:19px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rq-homepage .ticker-copy small{display:block;font-size:11px;line-height:16px;margin:0}
.rq-homepage .ticker-description{white-space:normal;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;text-overflow:clip;font:11px/14px Geist,sans-serif;margin-top:2px}
@media(max-width:850px){
 .rq-homepage .queue-strip{height:calc(98px + env(safe-area-inset-bottom));min-height:98px}
 .rq-homepage .queue-preview{height:auto}
 .rq-homepage .selected-description{max-height:51px;-webkit-line-clamp:3}
 .rq-homepage .queue-world{height:calc(100dvh - 186px - env(safe-area-inset-bottom))}
}
/* Wider screens: the same strip with two message lines, and the selected card grows with its description. */
@media(min-width:851px){
 .rq-homepage{--ticker:120px}
 .rq-homepage .queue-strip{height:120px;min-height:120px}
 .rq-homepage .queue-preview{bottom:140px;height:auto;min-height:94px}
 .rq-homepage .queue-ticker-viewport{height:84px}
 .rq-homepage .queue-ticker-card{height:84px;width:320px;flex-basis:320px;padding:8px 10px;gap:10px}
 .rq-homepage .ticker-copy strong{font-size:14px;line-height:17px}
 .rq-homepage .ticker-copy small{font-size:12px;line-height:17px}
 .rq-homepage .ticker-description{-webkit-line-clamp:2;font:12px/16px Geist,sans-serif;margin-top:3px}
 .rq-homepage .queue-interaction{inset:56px 0 120px}
}
/* One recentre control in place of the View menu. */
.rq-homepage .world-camera{position:absolute;inset:8px 8px auto auto;width:auto;z-index:25}
/* The caller: one quiet line at the foot of the world, on a feathered dark blur with no edge, one genuine thing at a time. */
.rq-homepage .world-caller{position:absolute;left:12px;right:12px;bottom:10px;z-index:24;display:flex;justify-content:center;margin:0;padding:0;border:0;background:none;color:#fff6e8;font:500 13px/1.42 Geist,sans-serif;text-align:center;cursor:pointer;opacity:0;transform:translateY(6px);transition:opacity .35s ease,transform .45s cubic-bezier(.2,.9,.25,1)}
.rq-homepage .world-caller.on{opacity:1;transform:none}
.rq-homepage .world-caller[hidden]{display:none}
.rq-homepage .world-caller .caller-text{position:relative;isolation:isolate;display:inline-block;max-width:min(560px,100%);padding:7px 14px;text-shadow:0 1px 2px #08131b99}
.rq-homepage .world-caller .caller-text::before{content:'';position:absolute;inset:-6px -22px;z-index:-1;border-radius:22px;background:#0b1620a8;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);-webkit-mask-image:linear-gradient(90deg,transparent,#000 22px,#000 calc(100% - 22px),transparent),linear-gradient(transparent,#000 8px,#000 calc(100% - 8px),transparent);-webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,transparent,#000 22px,#000 calc(100% - 22px),transparent),linear-gradient(transparent,#000 8px,#000 calc(100% - 8px),transparent);mask-composite:intersect}
.rq-homepage .world-caller b{font-weight:700;color:var(--rq-yellow)}
@media(max-width:850px){.rq-homepage[data-queue-selected]:not([data-queue-selected="-1"]) .world-caller{display:none}}
@media(min-width:851px){.rq-homepage .world-caller{position:fixed;left:50%;right:auto;bottom:calc(82px + var(--rq-floor));width:min(640px,calc(100% - 360px));transform:translate(-50%,6px)}.rq-homepage .world-caller.on{transform:translate(-50%,0)}}
/* Nothing selected: the world is the whole page until a project is tapped or chosen from the list. */
/* The card's own empty state was authored and never shown: with nothing selected the whole panel went
   display:none, taking the position count, the prev/next pair, the hint and every sign that the world
   is interactive with it. Nothing is selected by showing it; the page opens on the overview as before,
   and now says so. */
.rq-homepage .queue-preview.is-unselected{display:block}
.rq-homepage .queue-preview.is-unselected #selected-project{display:block}
/* Nothing is selected, so there is nothing to close. */
.rq-homepage .queue-preview.is-unselected #selected-close{display:none}
/* Below 851 the close button was sized only inside the desktop block, so it sat in the tab order at
   0x0: a keyboard user could focus a control that was not there. */
@media(max-width:850px){.rq-homepage #selected-close{display:grid;place-items:center;width:40px;height:40px;min-width:40px;padding:9px;border:0;border-radius:6px;background:none;color:var(--rq-ink)}
 .rq-homepage #selected-close svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round}}
.rq-homepage .world-recentre{display:grid;place-items:center;width:40px;height:40px;padding:0;border:1px solid var(--rq-line-strong);border-radius:50%;background:var(--panel);color:var(--panel-ink);cursor:pointer}
.rq-homepage .world-recentre svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
/* The way back out of a close-up was an unlabelled crosshair. The label is always the button's name;
   it becomes visible at the moment it is the thing to do, when a project is selected and the queue,
   the rope and the boards are all out of frame. */
.rq-homepage .world-recentre .recentre-label{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.rq-homepage[data-queue-selected]:not([data-queue-selected="-1"]) #world-recentre{display:inline-flex;align-items:center;gap:7px;width:auto;height:40px;padding:0 13px 0 10px;border-radius:20px}
.rq-homepage[data-queue-selected]:not([data-queue-selected="-1"]) #world-recentre .recentre-label{position:static;width:auto;height:auto;margin:0;overflow:visible;clip-path:none;font:600 12px/1 Geist,sans-serif}
/* Both camera controls were icon-only circles, and the recentre label appeared only once a project was
   selected. In live a single genuine project selects itself on load, so the label showed there and not in
   simulation, which reads as the richer mode stripping its own labels. The camera is the way into the one
   thing this page is for, so from 851px up both controls carry their name at all times. A phone keeps the
   circles, because that is where the width genuinely is not there, and the name stays in the accessible
   name either way. */
@media(min-width:851px){
 .rq-homepage #world-recentre,.rq-homepage #world-flyover{display:inline-flex;align-items:center;gap:7px;width:auto;height:40px;padding:0 13px 0 10px;border-radius:20px}
 .rq-homepage #world-recentre .recentre-label,.rq-homepage #world-flyover .recentre-label{position:static;width:auto;height:auto;margin:0;overflow:visible;clip-path:none;font:600 12px/1 Geist,sans-serif;white-space:nowrap}
}
.rq-homepage .world-camera:has(.world-flyover:not([hidden])){display:flex;flex-direction:column;gap:6px;width:auto}.rq-homepage .world-flyover[aria-pressed=true]{background:var(--rq-yellow,#ffe736);color:#10171d;border-color:#10171d}
/* General strip: logo, name and RQ number. It runs on its own, with no heading or controls. */
.rq-homepage{--ticker:64px}
.rq-homepage .queue-strip{height:64px;min-height:64px;display:flex;align-items:center;gap:8px;padding:6px 8px}
.rq-homepage .queue-strip-head{display:contents}
/* The route out sits beside the track rather than on top of it: pinned over the scroller it printed a
   link across a project card, which is the one thing the strip exists to show. */
.rq-homepage .queue-strip-head a{position:static;order:2;flex:none;grid-area:auto;width:auto;min-width:44px;padding:0 4px;white-space:nowrap}
.rq-homepage .queue-ticker-viewport{order:1;flex:1 1 auto;min-width:0;margin:0}
.rq-homepage .queue-ticker-viewport{height:52px}
.rq-homepage .queue-ticker-track{gap:6px}
.rq-homepage .queue-ticker-card{height:52px;width:auto;flex-basis:auto;min-width:190px;max-width:210px;padding:5px 12px 5px 6px;gap:8px;align-items:center;border-radius:6px}
.rq-homepage .queue-ticker-card .selected-logo{width:38px;height:38px;flex-basis:38px;margin:0}
.rq-homepage .ticker-copy{display:flex;flex-direction:column;justify-content:center;min-width:0}
.rq-homepage .ticker-copy strong{font-size:13px;line-height:19px;max-width:150px}
.rq-homepage .ticker-copy small{font-size:11px;line-height:16px;margin:0}
.rq-homepage .ticker-description,.rq-homepage .ticker-character{display:none}
/* Selected card: close it to a slim row, tap the row or a character to reopen. */
.rq-homepage .queue-controls{width:auto}
.rq-homepage .selected-close{margin-left:6px}
.rq-homepage .queue-preview.is-detail-open #selected-peek{display:none}
.rq-homepage .queue-preview:not(.is-detail-open){padding:0;height:auto;min-height:0}
.rq-homepage .queue-preview:not(.is-detail-open) #selected-project,.rq-homepage .queue-preview:not(.is-detail-open) .queue-controls{display:none}
.rq-homepage .queue-preview:not(.is-detail-open) #selected-peek{display:flex;align-items:center;gap:10px;width:100%;min-height:52px;padding:6px 12px 6px 8px;border:0;border-radius:inherit;background:none;color:inherit;text-align:left;font:inherit;cursor:pointer}
.rq-homepage #selected-peek .selected-logo{width:36px;height:36px;flex:0 0 36px;border-radius:5px}
.rq-homepage #selected-peek>span{display:flex;flex-direction:column;min-width:0}
.rq-homepage #selected-peek strong{font:650 14px/17px Geist,sans-serif;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rq-homepage #selected-peek small{font:12px/14px Geist,sans-serif;color:var(--rq-ink-2)}
.rq-homepage #selected-peek .peek-chevron{margin-left:auto;font-size:18px;line-height:1;color:var(--rq-ink-2)}
@media(max-width:850px){
 .rq-homepage .queue-strip{height:64px;min-height:64px;padding-bottom:6px}
 .rq-homepage .queue-world{height:calc(100dvh - 152px - env(safe-area-inset-bottom))}
 /* RQ Rank: a narrow chip with the leader; expand for the list, filters and momentum. */
 .rq-homepage .rich-list-zone:not(.is-expanded){width:auto;max-width:min(210px,calc(100% - 84px))}
 .rq-homepage .rich-list-zone:not(.is-expanded) .rank-object{padding:6px 8px}
 .rq-homepage .rich-list-zone:not(.is-expanded) .rank-object-top{min-height:0;padding:0 0 4px;gap:8px}
 .rq-homepage .rich-list-zone:not(.is-expanded) .rank-object-top p{display:block;font:500 12px/17px Geist,sans-serif;color:var(--rq-ink-2);margin:2px 0 0}
 .rq-homepage .rich-list-zone:not(.is-expanded) #rank-toggle{min-height:28px;min-width:0;padding:2px 2px 2px 8px}
 .rq-homepage .rich-list-zone:not(.is-expanded) #rich-list{max-height:44px}
 .rq-homepage .rich-list-zone:not(.is-expanded) .rich-row{min-height:44px;padding:3px 6px;grid-template-columns:22px 30px minmax(0,1fr) auto;grid-template-rows:auto;row-gap:0;column-gap:6px}
 .rq-homepage .rich-list-zone:not(.is-expanded) .rank-logo{grid-area:1/2;width:30px;height:30px}
 .rq-homepage .rich-list-zone:not(.is-expanded) .rich-project{grid-area:1/3}
 .rq-homepage .rich-list-zone:not(.is-expanded) .rich-score{grid-area:1/4}
 .rq-homepage .rich-list-zone:not(.is-expanded) .rich-row.is-sample .rich-project:after{display:none}
 .rq-homepage .rich-list-zone:not(.is-expanded) #rich-list .rich-rank{grid-area:1/1/3/2}
 .rq-homepage .rich-list-zone:not(.is-expanded) #rich-list .rank-logo{grid-area:1/2/3/3}
 .rq-homepage .rich-list-zone:not(.is-expanded) #rich-list .rich-project{grid-area:1/3/3/4}
 .rq-homepage .rich-list-zone:not(.is-expanded) #rich-list .rich-score{grid-area:1/4;text-align:right}
 .rq-homepage .rich-list-zone:not(.is-expanded) #rich-list .rich-move{display:block;grid-area:2/4;text-align:right;font:12px/15px Geist,sans-serif;white-space:nowrap}
 .rq-homepage .rich-list-zone.is-expanded{width:290px;max-width:calc(100% - 84px)}
}
@media(min-width:851px){
 .rq-homepage .queue-strip{height:72px;min-height:72px;padding:10px 24px}
 .rq-homepage .queue-preview{bottom:calc(92px + var(--rq-floor))}
 .rq-homepage .queue-ticker-viewport{height:52px}
 .rq-homepage .queue-ticker-card{height:52px}
 .rq-homepage .queue-interaction{inset:56px 0 calc(72px + var(--rq-floor))}
}
/* Below the mode switch, not beside it: when a selection turns Recentre into a labelled pill it grows
   leftwards, and on the same row that put it across the word Simulation. */
@media(min-width:851px){.rq-homepage .world-camera{position:fixed;inset:128px 24px auto auto}}
/* Selected card: the character, its logo, the permanent ticket number, then the message and standing. */
.rq-homepage .selected-identity{grid-template-columns:36px 44px minmax(0,1fr);grid-template-rows:auto auto auto auto;gap:4px 8px;min-height:0}
.rq-homepage .selected-identity>.selected-figure{grid-area:1/1/3/2;display:block;width:36px;height:46px;align-self:center}
.rq-homepage .selected-figure svg{width:100%;height:100%;display:block}
.rq-homepage .selected-identity>.selected-logo{grid-area:1/2/3/3;align-self:center}
.rq-homepage .selected-copy h2{grid-area:1/3/2/4;padding-right:136px;align-self:end}
.rq-homepage .selected-ticket{grid-area:2/3/3/4;justify-self:start;margin:0;padding:1px 6px;border:1px solid var(--rq-line-strong);border-radius:4px;font:600 11px/16px Geist,sans-serif;letter-spacing:.02em;color:var(--rq-ink);font-variant-numeric:tabular-nums}
.rq-homepage .selected-description{grid-area:3/1/4/4;margin-top:4px}
.rq-homepage .selected-rank{grid-area:4/1/5/3}.rq-homepage .selected-paid{grid-area:4/3}
@media(min-width:851px){
 .rq-homepage .selected-identity{grid-template-columns:40px 48px minmax(0,1fr);grid-template-rows:auto auto auto auto;gap:2px 12px;align-items:center}
 .rq-homepage .selected-identity>.selected-figure{grid-area:1/1/3/2;width:40px;height:52px}
 .rq-homepage .selected-identity>.selected-logo{grid-area:1/2/3/3;width:48px;height:48px}
 .rq-homepage .selected-copy{display:contents}
 .rq-homepage .selected-copy h2{grid-area:1/3/2/4;padding-right:150px;align-self:end;font-size:20px}
 .rq-homepage .selected-ticket{grid-area:2/3/3/4;align-self:start}
 .rq-homepage .selected-description{grid-area:3/1/4/4;display:block;margin-top:8px}
 .rq-homepage .selected-rank{grid-area:4/1/5/3;margin-top:6px}.rq-homepage .selected-paid{grid-area:4/3;justify-self:end;margin-top:6px}
 .rq-homepage .project-link{grid-column:3}
}
/* The category used to be given grid-area 3/1/4/4, which is the description's own cell, so on every
   selection at the widths the product is designed for it printed the category straight through the
   project's sentence. It gets a row of its own and the standing row moves down to make room. It also
   starts at 851 rather than 1200: a card that names a project without saying what it does is a name. */
@media(min-width:851px){
 .rq-homepage .selected-identity{grid-template-rows:auto auto auto auto auto}
 .rq-homepage .selected-identity .selected-category{display:block;grid-area:4/1/5/4;margin:1px 0 0;font:12px/17px Geist,sans-serif;color:var(--rq-ink-3);letter-spacing:.02em}
 .rq-homepage .selected-identity .selected-category:empty{display:none}
 .rq-homepage .selected-rank{grid-area:5/1/6/3;margin-top:4px}
 .rq-homepage .selected-paid{grid-area:5/3;justify-self:end;margin-top:4px}
}
@media(max-width:850px){
 /* RQ Rank chip: heading with its unit, one aligned leader row. */
 .rq-homepage .rich-list-zone:not(.is-expanded) .rank-object-top>div{display:flex;align-items:baseline;gap:6px;min-width:0}
 .rq-homepage .rich-list-zone:not(.is-expanded) .rank-object-top p{display:block;font:500 12px/17px Geist,sans-serif;color:var(--rq-ink-2);margin:2px 0 0}
 .rq-homepage .rich-list-zone:not(.is-expanded) #rich-list .rich-row{grid-template-columns:20px 30px minmax(0,1fr) auto;grid-template-rows:auto;align-items:center;height:auto;min-height:40px;padding:4px 6px;gap:0 7px}
 .rq-homepage .rich-list-zone:not(.is-expanded) .rich-rank{grid-area:1/1;font:650 13px/1.45 Geist,sans-serif;align-self:center}
 .rq-homepage .rich-list-zone:not(.is-expanded) .rank-logo{grid-area:1/2;width:30px;height:30px;align-self:center}
 .rq-homepage .rich-list-zone:not(.is-expanded) .rich-project{grid-area:1/3;align-self:center}
 .rq-homepage .rich-list-zone:not(.is-expanded) .rich-score{grid-area:1/4;align-self:center;display:flex;flex-direction:column;align-items:flex-end;gap:1px;font:650 14px/16px Geist,sans-serif}
 .rq-homepage .rich-list-zone:not(.is-expanded) .rich-score:before{content:'RQ score';font:500 10px/11px Geist,sans-serif;letter-spacing:.02em;color:var(--rq-ink-2)}
 .rq-homepage .rich-list-zone:not(.is-expanded) .rich-row{min-height:42px}
 .rq-homepage .rich-list-zone:not(.is-expanded) #rich-list{max-height:40px}
}
@media(max-width:850px){.rq-homepage .rich-list-zone:not(.is-expanded) .rich-score:before{color:currentColor;opacity:.7}}
/* Phone header carries the live figure on a third row: The Pot. */
@media(max-width:850px){
 .rq-homepage .rq-stage-header{height:128px;min-height:128px;grid-template-columns:1fr auto auto;grid-template-rows:48px 40px 40px;column-gap:10px}
 .rq-homepage .rq-stage-brand{grid-area:1/1}
 .rq-homepage .rq-stage-nav{grid-area:2/1/3/4}
 .rq-homepage .rq-stage-actions{display:contents}
 .rq-homepage .rq-stage-actions>a:not(.rq-stage-join){display:flex}
 /* My Account already stands in the nav row on phones (.mobile-owner-nav). The header action would auto-place into the Pot band, where it is painted over and still clickable. */
 .rq-homepage .rq-stage-actions>a[href="/my-account/"]{display:none}
 .rq-homepage .rq-stage-actions>.theme-toggle{grid-area:1/2;align-self:center}
 .rq-homepage .rq-stage-join{grid-area:1/3;align-self:center}
 .rq-homepage .header-pot{flex-direction:row;align-items:baseline;gap:6px;font-size:12px;color:var(--rq-ink-2);text-decoration:none}
 .rq-homepage .header-pot{grid-area:3/1;align-self:center;min-height:0;max-height:100%}/* The Pot is a 40px control and its row was 24 to 32px, so its box bled into the nav row and overlapped the RQ Rank link by 96x4 to 96x9px in fifteen states: a tap in that band went to whichever link was on top rather than the one aimed at. The row is 40px now, so the control keeps its size inside its own row instead of borrowing the one above. The header's height is measured and published, so the stack below follows on its own. */
 .rq-homepage .header-pot strong{font-size:13px;color:var(--rq-ink)}
 .rq-homepage .queue-world{height:calc(100dvh - 178px - env(safe-area-inset-bottom))}
}
@media(max-width:850px) and (max-height:700px){
 .rq-homepage .rq-stage-header{height:110px;min-height:110px;grid-template-rows:40px 30px 40px}
 .rq-homepage .queue-world{height:calc(100dvh - 160px - env(safe-area-inset-bottom))}
}
/* Desktop density: the selected card, the RQ Rank panel rows and the General strip each take less of the world. */
@media(min-width:851px){
 .rq-homepage{--ticker:60px}
 .rq-homepage .queue-strip{height:60px;min-height:60px;padding:6px 24px}
 .rq-homepage .queue-ticker-viewport,.rq-homepage .queue-ticker-card{height:46px}
 .rq-homepage .queue-ticker-card{padding:4px 10px 4px 5px;gap:7px;min-width:196px;max-width:200px}
 .rq-homepage .queue-ticker-card .selected-logo{width:32px;height:32px;flex-basis:32px}
 .rq-homepage .ticker-copy strong{font-size:12px;line-height:17px}
 .rq-homepage .ticker-copy small{font-size:11px;line-height:16px}
 .rq-homepage .queue-interaction{inset:56px 0 calc(60px + var(--rq-floor))}
 .rq-homepage .queue-preview,.rq-homepage .queue-preview.is-detail-open{width:330px;bottom:calc(72px + var(--rq-floor));padding:10px 12px;min-height:0}
 /* The arrows get a band of their own at the foot; without the reserved padding they printed over the
    RQ Rank line they were moved below. */
 .rq-homepage .queue-controls{inset:auto auto 10px 10px;height:44px}
 .rq-homepage .queue-preview,.rq-homepage .queue-preview.is-detail-open{padding-bottom:58px}
 .rq-homepage .selected-identity{grid-template-columns:32px 40px minmax(0,1fr);gap:2px 10px}
 .rq-homepage .selected-identity>.selected-figure{width:32px;height:42px}
 .rq-homepage .selected-identity>.selected-logo{width:40px;height:40px}
 .rq-homepage .selected-copy h2{font-size:16px;line-height:20px;padding-right:52px}
 .rq-homepage .selected-ticket{font-size:10px;line-height:14px;padding:0 5px}
 .rq-homepage .selected-description{font-size:12px;line-height:16px;max-height:none;-webkit-line-clamp:3;margin-top:6px}
 .rq-homepage .selected-rank,.rq-homepage .selected-paid{margin-top:4px}
 .rq-homepage .selected-rank span,.rq-homepage .selected-paid span{font-size:11px;line-height:14px}
 .rq-homepage .selected-rank strong,.rq-homepage .selected-paid strong{font-size:12px;line-height:14px}
 .rq-homepage .queue-preview:not(.is-detail-open) #selected-peek{min-height:44px;padding:4px 10px 4px 6px}
 .rq-homepage #rich-list .rich-row,.rq-homepage #rich-list .rich-row.is-live:first-child{grid-template-columns:18px 24px 28px minmax(0,1fr) 40px;grid-template-rows:18px 16px;min-height:40px;height:40px;padding:3px}
 .rq-homepage .rank-logo{width:28px;height:28px}.rq-homepage .rank-avatar{width:24px;height:28px}
 .rq-homepage .rich-rank{font-size:12px;line-height:28px}
 .rq-homepage .rich-project strong{font-size:12px;line-height:17px}
 .rq-homepage .rich-list-zone:not(.is-expanded) .rich-row.is-sample .rich-project:after{font-size:11px;line-height:13px}
 .rq-homepage .rich-score{font-size:12px;line-height:17px}
 .rq-homepage .rich-move{font-size:11px;line-height:16px}
}
/* The premise, one line over the far end of the world. Under the header on desktop; under the RQ Rank panel on phones. */
/* Exits to the full lists: the card's Ticket line links to the Queue with the count, and the strip ends with a card for every ticket. */
.rq-homepage a.selected-paid{color:inherit;text-decoration:none}
.rq-homepage a.selected-paid:hover strong,.rq-homepage a.selected-paid:focus-visible strong{text-decoration:underline;text-underline-offset:3px}
.rq-homepage .selected-paid .selected-all{font:500 12px/14px Geist,sans-serif;font-style:normal;color:var(--rq-yellow-text);margin-left:4px;white-space:nowrap}
.rq-homepage .queue-ticker-card.is-more{justify-content:center;border-style:dashed}
.rq-homepage .queue-ticker-card.is-more .ticker-copy strong{color:var(--rq-yellow-text)}
/* Live or Simulation. Simulation adds the labelled samples so the queue can be seen full; the note stays on screen the whole time. */
.rq-homepage .world-mode{position:fixed;inset:72px 76px auto auto;z-index:25;display:inline-flex;padding:3px;border:1px solid var(--rq-line-strong);border-radius:999px;background:var(--panel);color:var(--panel-ink)}
.rq-homepage .world-mode button{border:0;border-radius:999px;padding:6px 12px;min-height:40px;font:600 12px/1.45 Geist,sans-serif;color:inherit;background:none;cursor:pointer;opacity:.7}
.rq-homepage .world-mode button[aria-pressed=true]{background:var(--rq-yellow);color:var(--rq-on-yellow);opacity:1}
.rq-homepage .simulation-note{position:absolute;z-index:20;top:126px;left:300px;right:230px;margin:0;display:flex;align-items:flex-start;justify-content:flex-start;gap:2px;text-align:left;pointer-events:none}
.rq-homepage .simulation-note span{display:inline-block;max-width:100%;padding:4px 10px;border-radius:6px;background:color-mix(in srgb,var(--rq-bg) 72%,transparent);font:500 12px/1.45 Geist,sans-serif;color:var(--rq-ink);text-shadow:0 1px 6px #0006}
.rq-homepage .simulation-note[hidden]{display:none}
.rq-homepage .simulation-note>span{flex:0 1 auto;min-width:0}
.rq-homepage .simulation-note span::before{content:'';display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--rq-yellow);margin-right:6px;vertical-align:1px}
/* The note is a caption, so it does not take the pointer; its dismiss does, at a full target. */
.rq-homepage .note-dismiss{pointer-events:auto;flex:none;display:inline-grid;place-items:center;width:40px;height:40px;margin:0 0 0 2px;padding:0;border:0;border-radius:8px;background:none;color:var(--rq-ink-2);font:400 18px/1 Geist,sans-serif;vertical-align:middle}
.rq-homepage .note-dismiss[hidden]{display:none}
.rq-homepage .note-dismiss:hover{color:var(--rq-ink)}
/* The x sat in its own box a clear 12px from the note's pill, so it read as an unrelated floating button
   rather than as the note's own control. The pill's background runs behind both halves and they butt
   together with matching corners, so it is one object with a control on its end. The note's measured
   height feeds --rq-note-h through the ResizeObserver, so the stack below it follows on its own. */
.rq-homepage .simulation-note{gap:0}
.rq-homepage .simulation-note>span{border-radius:6px 0 0 6px;min-height:40px;display:inline-flex;align-items:center}
.rq-homepage .note-dismiss{width:40px;min-height:40px;height:auto;align-self:stretch;margin:0;border-radius:0 6px 6px 0;background:color-mix(in srgb,var(--rq-bg) 72%,transparent)}
/* Phones: the voice takes the top of the world across its full width, so the world's own controls move
   to the foot, above the selected card. They used to sit in the top right, over the copy. */
@media(max-width:850px){.rq-homepage .world-mode{position:absolute;inset:auto 8px calc(var(--card-h,0px) + 8px) auto;z-index:18}.rq-homepage .world-camera{position:absolute;inset:auto 8px calc(var(--card-h,0px) + 62px) auto;z-index:18}.rq-homepage .simulation-note{top:170px;left:12px;right:12px}.rq-homepage .simulation-note span{font-size:12px}}
/* First visit: three things to know, once. */
#first-visit{width:min(520px,calc(100vw - 32px));max-height:calc(100dvh - 48px);overflow:auto;margin:auto;padding:22px 22px 18px;border:1px solid var(--rq-line-strong);border-radius:14px;background:var(--rq-panel);color:var(--rq-ink);box-shadow:none}
#first-visit::backdrop{background:#08131bad;backdrop-filter:blur(6px)}
#first-visit h2{font:650 20px/1.2 Geist,sans-serif;margin:0 0 12px}
#first-visit ol{margin:0;padding-left:22px;display:grid;gap:10px;font:14px/1.5 Geist,sans-serif;color:var(--rq-ink-2)}
#first-visit ol strong{color:var(--rq-ink)}
/* At 13px this line ran past eighty characters in a 520px dialog. It is the same size as the rest now. */
#first-visit .first-visit-pot{margin:14px 0 0;padding-top:12px;border-top:1px solid var(--rq-line);font:14px/1.5 Geist,sans-serif;color:var(--rq-ink-2)}
#first-visit .first-visit-actions{display:flex;align-items:center;gap:16px;margin-top:16px}
#first-visit .first-visit-premise{margin:2px 0 12px;font:500 14px/1.5 Geist,sans-serif;color:var(--rq-ink-2)}
#first-visit .first-visit-actions .btn{min-height:38px;padding:8px 16px;font-size:14px;background:var(--rq-yellow);color:var(--rq-on-yellow);border-color:var(--rq-yellow)}
#first-visit .first-visit-actions a{font-size:13px;color:var(--rq-yellow-text)}
/* Alerts: the open action may be a link, and every alert can be muted for good. */
.rq-homepage #world-notification a.notification-open,.rq-homepage #world-notification button.notification-open{display:inline-flex;align-items:center;min-height:40px;font:600 13px/1.45 Geist,sans-serif;color:var(--rq-yellow-text);text-decoration:none}
.rq-homepage #world-notification .notification-mute{display:inline-flex;align-items:center;min-height:40px;margin-left:12px;border:0;background:none;padding:0 2px;font:500 12px/1.45 Geist,sans-serif;color:var(--rq-ink-3);cursor:pointer;text-decoration:underline;text-underline-offset:3px}
/* Phone composition, 16 September. RQ Rank is a rail of logo dots down the left edge, full height above the selected card; expanding it opens a bottom sheet with names, scores and movement. The Live/Simulation toggle sits beside the recentre button; the premise and note sit under them. The Pot row is its own band. */
@media(max-width:850px){
 .rq-homepage .rq-stage-header{height:128px;min-height:128px;grid-template-rows:48px 40px 40px}
 .rq-homepage .rq-stage-header::after{content:'';position:absolute;left:0;right:0;bottom:0;height:32px;background:color-mix(in srgb,var(--rq-yellow) 18%,var(--rq-bg));border-top:1px solid var(--rq-line);pointer-events:none}
 .rq-homepage .header-pot{position:relative;z-index:1;justify-self:start;border-right:0;padding-right:0;margin-right:0;color:var(--rq-ink);font-size:12px}
 .rq-homepage .header-pot strong{font-size:14px;font-weight:700;color:var(--rq-ink)}
 .rq-homepage .header-pot strong{color:var(--rq-yellow-text)}
 .rq-homepage .header-pot span{color:var(--rq-ink);opacity:.85}
 .rq-homepage .queue-world{height:calc(100dvh - 184px - var(--rq-floor) - env(safe-area-inset-bottom))}
 .rq-homepage .world-mode{position:absolute;inset:auto 8px calc(var(--card-h,0px) + 8px) auto;padding:2px}
 /* The phone had its own floor of 28px for the one control that changes what the whole page shows. */
 .rq-homepage .world-mode button{min-height:40px;padding:5px 12px}
 .rq-homepage .simulation-note{top:122px;left:60px;right:8px;text-align:left}
 .rq-homepage .simulation-note span{line-height:1.45;padding:4px 8px}
 .rq-homepage #world-notification{position:fixed;inset:calc(var(--rq-head-h,120px) + 132px) 8px auto 8px;width:auto;max-width:none;max-height:none;background:var(--rq-panel);z-index:32}
 .rq-homepage .notification-dismiss{width:44px;height:44px;top:2px;right:2px}
 /* RQ Rank on phones: one list column down the left, full height above the selected card. Rank, logo, name, score, and a faint score bar behind each row. No expand; every row is a link and the foot goes to the full board. */
 /* A stack, not a pile: the voice, then the state of the world, then the board, then the selected card
    at the foot. The board used to start at the top and grow downwards, so with a full queue it ran
    straight through the headline underneath it. Its top is fixed and its list scrolls instead. */
 /* The panel stays where it reads in the document, so it is placed against the viewport under the
    header rather than inside the world it used to be moved into at runtime. */
 .rq-homepage .rich-list-zone:not(.is-expanded),.rq-homepage .rich-list-zone.is-expanded{position:fixed;inset:calc(var(--rq-head-h,120px) + 216px) auto auto 8px;width:var(--rq-plate-w);max-width:calc(100vw - 32px);height:auto;overflow:hidden;display:flex!important;flex-direction:column;background:var(--panel);border-radius:8px;z-index:16}
 /* The !important answers immersive-home.css:37, which pins display:block!important on this zone. As a
    block it could not give its list a scroller, so the object ran 533px inside a 388px box with
    overflow:hidden and two ranked projects were simply unreachable on a phone. */
 .rq-homepage .rich-list-zone:not(.is-expanded) .rank-object{height:auto;flex:0 1 auto;min-height:0}
 .rq-homepage .rich-list-zone:not(.is-expanded) .rank-object{display:flex;flex-direction:column;max-height:100%;min-height:0;padding:6px 5px 4px;gap:0}
 .rq-homepage .rich-list-zone:not(.is-expanded) .rank-object-top{display:flex;align-items:center;justify-content:space-between;min-height:0;height:auto;padding:0 3px 5px;gap:6px;position:static;background:none;flex:none}
 .rq-homepage .rich-list-zone:not(.is-expanded) .rank-object-top>div{display:block;min-width:0}
 .rq-homepage .rich-list-zone:not(.is-expanded) .rank-object-title{font:700 12px/1.45 Geist,sans-serif;letter-spacing:.02em}
 .rq-homepage .rich-list-zone:not(.is-expanded) .rank-object-top p{display:block;font:500 12px/17px Geist,sans-serif;color:var(--rq-ink-2);margin:2px 0 0}
 .rq-homepage .rich-list-zone:not(.is-expanded) .rank-full-link{display:none}
 .rq-homepage .rich-list-zone:not(.is-expanded) #rank-toggle{display:grid;place-items:center;min-height:40px;min-width:40px;width:40px;padding:0;margin:0;font-size:0;color:var(--rq-gold);border:1px solid var(--rq-line);border-radius:6px;background:none}
 .rq-homepage .rich-list-zone:not(.is-expanded) #rank-toggle::after{content:'‹';font:700 18px/1 Geist,sans-serif}
 .rq-homepage .rich-list-zone.is-mini #rank-toggle::after{content:'›'}
 .rq-homepage .rich-list-zone:not(.is-expanded) .world-rank-filters,.rq-homepage .rich-list-zone:not(.is-expanded) #rank-metric-note,.rq-homepage .rich-list-zone:not(.is-expanded) .rank-explanation,.rq-homepage .rich-list-zone:not(.is-expanded) .rank-paging,.rq-homepage .rich-list-zone:not(.is-expanded) #rank-refresh-note{display:none}
 .rq-homepage .rich-list-zone:not(.is-expanded) #rich-list{display:flex;flex-direction:column;gap:3px;flex:1 1 auto;min-height:0;max-height:none;overflow:auto;scrollbar-width:none;padding:0}
 /* Expanded, the zone kept overflow:hidden from the rule that positions it, so it silently cut 368 of its
    674 pixels of content at 390px: the SAMPLE STANDINGS heading was sliced mid-word and not one sample row
    followed it. Nothing said there was more, because a clip is not a scrollbar. The zone scrolls when it is
    open, so everything in it can be reached whatever the height works out to, and the scrollbar is the cue. */
 .rq-homepage .rich-list-zone.is-expanded{overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;scrollbar-width:thin}
 .rq-homepage .rich-list-zone:not(.is-expanded) #rich-list::-webkit-scrollbar{display:none}
 .rq-homepage .rich-list-zone:not(.is-expanded) #rich-list .rich-row{display:grid!important;position:relative;isolation:isolate;overflow:hidden;flex:none;grid-template-columns:16px 22px minmax(0,1fr) auto;grid-template-rows:auto auto;align-items:center;gap:0 4px;min-height:40px;height:auto;padding:4px 4px;border-radius:7px;background:var(--rq-panel);color:var(--rq-ink)}
 .rq-homepage .rich-list-zone:not(.is-expanded) #rich-list .rich-row::before{content:'';position:absolute;inset:0 auto 0 0;z-index:-1;width:100%;transform:scaleX(var(--t,0));transform-origin:left center;background:var(--rq-yellow);opacity:.22;border-radius:7px}
 .rq-homepage .rich-list-zone:not(.is-expanded) #rich-list .rich-row.is-live:first-child{box-shadow:inset 0 0 0 1.5px var(--rq-yellow)}
 .rq-homepage .rich-list-zone:not(.is-expanded) #rich-list .rich-row.is-live:first-child::before{opacity:.3}
 .rq-homepage .rich-list-zone:not(.is-expanded) .rich-rank{grid-area:auto;position:static;font:700 12px/1.45 Geist,sans-serif;color:inherit;opacity:.75;align-self:center;text-align:left;background:none;padding:0;min-width:0;height:auto;border-radius:0}
 .rq-homepage .rich-list-zone:not(.is-expanded) .rank-avatar{display:none}
 .rq-homepage .rich-list-zone:not(.is-expanded) .rank-logo{grid-area:auto;width:22px;height:22px;border-radius:5px;overflow:hidden}
 .rq-homepage .rich-list-zone:not(.is-expanded) .rich-project{display:block;position:static;grid-area:auto;min-width:0;overflow:hidden}
 .rq-homepage .rich-list-zone:not(.is-expanded) .rich-project strong{display:block;font:600 12px/15px Geist,sans-serif;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
 .rq-homepage .rich-list-zone:not(.is-expanded) .rich-project small,.rq-homepage .rich-list-zone:not(.is-expanded) .rank-context,.rq-homepage .rich-list-zone:not(.is-expanded) .rich-leader-label,.rq-homepage .rich-list-zone:not(.is-expanded) .rich-gathering,.rq-homepage .rich-list-zone:not(.is-expanded) .score-sample,.rq-homepage .rich-list-zone:not(.is-expanded) .rich-row.is-sample .rich-project:after{display:none}
 .rq-homepage .rich-list-zone:not(.is-expanded) .rich-score{display:block;grid-area:auto;font:700 12px/15px Geist,sans-serif;color:inherit;text-align:right;white-space:nowrap}
 .rq-homepage .rich-list-zone:not(.is-expanded) .rich-score:before{display:none}
 .rq-homepage .rich-list-zone:not(.is-expanded) .rich-row.is-sample{border-left:2px dashed var(--rq-line-strong)}
 .rq-homepage .rich-list-zone:not(.is-expanded) .rank-samples-note{display:block;flex:none;font:600 12px/14px Geist,sans-serif;letter-spacing:.03em;text-transform:uppercase;color:var(--rq-ink-2);margin:4px 0 2px;padding:0 3px}
 .rq-homepage .rich-list-zone:not(.is-expanded) .rank-samples-long{display:none}.rq-homepage .rich-list-zone:not(.is-expanded) .rank-samples-short{display:inline}
 .rq-homepage .rich-list-zone:not(.is-expanded) .rank-unavailable{display:block;font:12px/15px Geist,sans-serif;padding:4px}
 .rq-homepage .rich-list-zone:not(.is-expanded) .rank-unavailable h3{font-size:12px;margin:0 0 4px}.rq-homepage .rich-list-zone:not(.is-expanded) .rank-unavailable p{display:none}.rq-homepage .rich-list-zone:not(.is-expanded) .rank-unavailable a{font-size:12px}
 .rq-homepage .rich-list-zone:not(.is-expanded) .rank-object-foot{display:flex;flex:none;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:0 10px;padding:4px 3px 0;margin:0;border-top:1px solid var(--rq-line);font-size:12px}
 .rq-homepage .rich-list-zone:not(.is-expanded) .rank-object-foot a{display:flex;align-items:center;min-height:40px;font-size:12px;white-space:nowrap;margin:0;width:auto}
 .rq-homepage .rich-list-zone:not(.is-expanded) .rank-object-foot a:last-child{display:flex}
 /* The chip is the leader, named, with a labelled score. Its foot belongs to the expanded panel:
    two more links under one row took a third of the world's height on a phone. */
 /* With a card open the phone's board has about two hundred pixels left, so its subtitle and foot step
    aside and the rows keep the room. Closing the card brings them back. */
 .rq-homepage[data-queue-selected]:not([data-queue-selected="-1"]) .rich-list-zone:not(.is-expanded) .rank-object-foot,
 .rq-homepage[data-queue-selected]:not([data-queue-selected="-1"]) .rich-list-zone:not(.is-expanded) .rank-object-top p{display:none}
 /* The foot is the object's only way out on a phone, so it stays: the full board and the rules. */
 .rq-homepage .rich-list-zone:not(.is-expanded) .rank-object-foot{display:flex;flex-wrap:wrap;flex:none;gap:0 12px;padding:2px 4px 0;font-size:12px}
 .rq-homepage .rich-list-zone:not(.is-expanded) .rank-object-foot a{display:inline-flex;align-items:center;min-height:40px;color:var(--rq-gold)}
 /* Logo-only state: rank and logo, nothing else, so the world is clear. */
 .rq-homepage .rich-list-zone.is-mini:not(.is-expanded){width:58px}
 .rq-homepage .rich-list-zone.is-mini:not(.is-expanded) .rank-object{padding:5px 4px 4px}
 .rq-homepage .rich-list-zone.is-mini:not(.is-expanded) .rank-object-top{justify-content:center;padding:0 0 4px}
 .rq-homepage .rich-list-zone.is-mini:not(.is-expanded) .rank-object-top>div,.rq-homepage .rich-list-zone.is-mini:not(.is-expanded) .rich-project,.rq-homepage .rich-list-zone.is-mini:not(.is-expanded) .rich-score,.rq-homepage .rich-list-zone.is-mini:not(.is-expanded) .rank-object-foot,.rq-homepage .rich-list-zone.is-mini:not(.is-expanded) .rank-samples-note{display:none}
 .rq-homepage .rich-list-zone.is-mini:not(.is-expanded) #rich-list .rich-row{grid-template-columns:18px 24px;gap:0 3px;padding:4px 3px;min-height:40px}
 .rq-homepage .rich-list-zone.is-mini:not(.is-expanded) #rich-list .rich-row::before{display:none}
 .rq-homepage .rich-list-zone.is-mini:not(.is-expanded) .rank-logo{width:24px;height:24px}
 .rq-homepage .rich-list-zone.is-mini:not(.is-expanded) .rich-row.is-sample{border-left-width:2px}
 .rq-homepage.has-rank-mini .simulation-note{left:78px}
 /* The premise stays on desktop; on phones the first-visit dialog carries it and the world keeps its room. */
 /* Below the plate now, so it has the full width rather than the column beside the chip. */
 .rq-homepage .simulation-note{top:110px;left:8px;right:8px;text-align:left}
 .rq-homepage .simulation-note span{font-size:12px;line-height:1.45;padding:4px 8px}
 /* Below the header, the RQ Rank chip, the camera buttons and the earned line: an alert covers none of them. */
 .rq-homepage #world-notification{inset:calc(var(--rq-head-h,120px) + 184px) 8px auto 8px}
}
@media(max-width:850px) and (max-height:700px){
 /* The Join button is 44px tall and this row was 40, so centring it put the page's primary action 2px
    above the top of the viewport and shaved it at 844x390 and 390x640. Same fault as the Pot link one
    row down: a control taller than the row it was given. Row one fits the control, and the third row
    matches the 40px the Pot needs, so the header measures 114px and publishes that. */
 .rq-homepage .rq-stage-header{height:114px;min-height:114px;grid-template-rows:44px 30px 40px}
 .rq-homepage .queue-world{height:calc(100dvh - 166px - var(--rq-floor) - env(safe-area-inset-bottom))}
 .rq-homepage #world-notification{top:calc(var(--rq-head-h,102px) + 180px)}
}

.rq-homepage .rq-stage-actions .hd-traffic{font-size:12px;margin-right:4px}
@media(max-width:850px){.rq-homepage .rq-stage-actions .hd-traffic{display:none}}

/* Home's floor carries CAIBI on X as a link, so the floating mark would be the same destination twice,
   and it landed on top of that link. One of them goes, and the one in the row is the readable one. */

.rq-homepage .rich-score .rank-move{font-size:12px;margin-left:4px}
/* A sample row paints a dark surface in dark mode and a white one in light, while inheriting the
   light palette's ink tokens in both, so the flat-move glyph measured 2.19:1 on the dark row while
   clearing comfortably on the live row's yellow. One colour cannot serve both backgrounds, so the
   dark default takes the dark palette's muted ink and light puts --muted back. Dark is the site
   default here, which is why the override reads this way round. */
.rq-homepage .rich-row.is-sample .rank-move{color:var(--rq-ink-3,#b9c2ca)}
@media (prefers-color-scheme:light){:root:not([data-theme="dark"]) .rq-homepage .rich-row.is-sample .rank-move{color:var(--muted)}}
:root[data-theme="light"] .rq-homepage .rich-row.is-sample .rank-move{color:var(--muted)}
/* The leader plate is a theme-fixed cream (--rq-leader-bg), so the ink standing on it is fixed too.
   Every cell that sets its own colour has to be named here, because --rq-ink and --rq-ink-2 flip to
   near-white in dark and the plate does not follow them. This was three separate rules, two of them
   inside @media(min-width:851px), and each width-gated cell came back as a dark-mode contrast failure
   in turn: the rank, name and score at 1.20:1, then the description at 1.26:1 once the expanded board
   started showing it on phones. A colour that answers to the surface cannot be taught by width. */
.rq-homepage #rich-list .rich-row.is-live:first-child,.rq-homepage #rich-list .rich-row.is-live:first-child .rich-project strong,.rq-homepage #rich-list .rich-row.is-live:first-child .rich-project small,.rq-homepage #rich-list .rich-row.is-live:first-child .rich-rank,.rq-homepage #rich-list .rich-row.is-live:first-child .rich-score,.rq-homepage #rich-list .rich-row.is-live:first-child .rank-context,.rq-homepage #rich-list .rich-row.is-live:first-child .rich-move{color:var(--rq-on-yellow)!important}
/* Tablets: the premise cannot sit on one line beside the rank panel and the mode control, so it steps aside and the simulation note takes its place. */
/* The narrowest phones: the mode toggle takes the right edge, the camera column drops under it and the note under that, so nothing sits over the rank panel's fold button. */
@media(max-width:380px){.rq-homepage .world-mode{inset:auto 8px calc(var(--card-h,0px) + 8px) auto}.rq-homepage .world-camera{inset:auto 8px calc(var(--card-h,0px) + 62px) auto}}
/* Wide screens: the simulation note sits under the mode toggle at the right, clear of the headline board and the caller. */
/* Under the plate, in the reading column: on the right it sat across the board lettering. */
@media(min-width:851px){.rq-homepage .simulation-note{top:246px;left:12px;right:auto;width:min(420px,32vw);text-align:left}}

/* Below 340px the stage nav's five links need 326px of content with the gap already at zero, so the
   page scrolled sideways by 17px at 320. Shrinking the labels would put them under the 11px floor and
   dropping one would hide a primary destination, so the nav becomes its own scroller: every link stays
   reachable and the page stops moving. This has to live in the last sheet that touches this nav,
   because mobile.css sets `overflow:visible` on it as a shorthand and loads after immersive-home.css. */
@media(max-width:340px){
  .rq-homepage .rq-stage-nav{overflow-x:auto;overflow-y:hidden;justify-content:flex-start;gap:10px;scrollbar-width:none;-ms-overflow-style:none}
  .rq-homepage .rq-stage-nav::-webkit-scrollbar{display:none}
}

/* The tile carries the character now, so the row's own copy of it goes: one character per project.
   Top level on purpose: this lived inside a max-width block, so it hid the duplicate on a phone and
   left it on every wider screen. */
.rq-homepage .rank-avatar,.rq-homepage .ticker-character{display:none}

/* The floor. Home starts a $5 payment, so Terms, Refunds, Privacy and Contact are on the page itself,
   not only inside the dialog. One row along the bottom, under the strip, with its height reserved out
   of the world above (--rq-floor) so nothing is covered. It also carries the first-visit line. */
.rq-homepage .rq-home-footer{display:flex;position:fixed;z-index:27;inset:auto 0 0;height:calc(var(--rq-floor) + env(safe-area-inset-bottom));min-height:0;align-items:center;gap:0 10px;margin:0;padding:0 6px env(safe-area-inset-bottom);background:var(--rq-bg);border-top:1px solid var(--rq-line);color:var(--rq-ink-2);font:12px/17px Geist,sans-serif}
.rq-homepage .rq-home-footer>span{display:none}
.rq-homepage .rq-home-footer nav{display:flex;flex-wrap:nowrap;align-items:center;gap:0 10px;width:100%;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none}
.rq-homepage .rq-home-footer nav::-webkit-scrollbar{display:none}
.rq-homepage .rq-home-footer a{display:inline-flex;align-items:center;justify-content:center;min-width:40px;min-height:var(--rq-floor);padding:0 4px;white-space:nowrap;line-height:1.45;color:var(--rq-ink-2)}
@media(max-width:850px){
 /* The header nav already carries these three; the floor keeps the legal links and the first-visit line. */
 .rq-homepage .rq-home-footer .mobile-owner-link,.rq-homepage .rq-home-footer a[href="/how-it-works/"],.rq-homepage .rq-home-footer a[href="/updates/"]{display:none}
 /* The named leader is the largest thing on a phone too, as it is on a desktop: the chip lists it,
    the plate says it. The premise above and the earned line below stay small. */
 /* The plate leads the document now, so it is no longer inside the world and is placed against the
    viewport under the header the header itself measures. */
 .rq-homepage .world-copy{position:fixed;inset:calc(var(--rq-head-h,120px) + 8px) auto auto 8px;width:max-content;max-width:calc(100% - 16px);padding:3px 8px 4px;display:flex;flex-wrap:wrap;align-items:center;gap:0 12px}
 .rq-homepage .world-lede{display:block;flex:1 0 100%;margin:1px 0 0;font:650 20px/28px Geist,sans-serif;max-width:22ch}
 .rq-homepage .world-premise{flex:1 0 100%;font:500 12px/17px Geist,sans-serif;max-width:none;margin:0}
 .rq-homepage .queue-purpose{flex:1 0 100%;margin:1px 0 0;font:12px/17px Geist,sans-serif}
 .rq-homepage .simulation-note{top:168px}
}
@media(max-width:480px){
 /* The floor must read without being scrolled: the legal links come first, the extras go. */
 .rq-homepage .rq-home-footer a[href^="https://x.com"]{display:none}
}
@media(max-width:360px){
 .rq-homepage .rq-home-footer a[data-explain-open]{display:none}
}
/* Between a phone and a desktop the RQ Rank object shows its names and scores rather than a strip of
   logos, so it is taller, and the plate and everything under it start below it. */
@media(max-width:700px){
 /* The score column carries its own "RQ score" label on a phone, so the subtitle is saying it twice
    and wrapping to two lines to do it. */
 .rq-homepage .rich-list-zone:not(.is-expanded) .rank-object-top p{display:block;font:12px/17px Geist,sans-serif}
}
@media(min-width:701px) and (max-width:850px){
 .rq-homepage .world-copy{inset:calc(var(--rq-head-h,120px) + 8px) auto auto 8px}
 .rq-homepage .simulation-note{top:128px}
 .rq-homepage #world-notification{inset:calc(var(--rq-head-h,120px) + 240px) 8px auto 8px}
}
@media(min-width:851px){
 .rq-homepage{--rq-floor:40px}
 .rq-homepage .rq-home-footer{gap:0 16px;padding:0 20px}
 .rq-homepage .rq-home-footer>span{display:inline}
 .rq-homepage .rq-home-footer nav{width:auto;margin-left:auto;gap:0 16px}
}

/* Short screens: the stack reserved 296px above and below the board, which on a 640-tall phone left it
   78px, and the header alone is more than that. The voice compresses, the board starts higher, and in
   landscape the board steps aside for the world rather than showing a title with no rows under it. */
@media(max-width:900px) and (max-height:700px){
 .rq-homepage .world-explain{display:none}.rq-homepage .world-premise{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
 .rq-homepage .rich-list-zone:not(.is-expanded),.rq-homepage .rich-list-zone.is-expanded{inset:calc(var(--rq-head-h,104px) + 84px) auto auto 8px}
}
@media(max-height:460px){
 /* The plate used to go entirely, which took the headline, "Earned, never bought" and both help
    links with it: the help disappeared exactly where the interface is hardest to read. It keeps the
    headline and the earned line, and gives its height back by dropping to one line. */
 .rq-homepage .world-copy{inset:calc(var(--rq-head-h,104px) + 4px) auto auto 8px;padding:2px 8px 3px}
 .rq-homepage .world-lede{font:650 16px/22px Geist,sans-serif;max-width:26ch}
 .rq-homepage .queue-purpose{font:12px/17px Geist,sans-serif}
 .rq-homepage .rich-list-zone:not(.is-expanded),.rq-homepage .rich-list-zone.is-expanded{inset:calc(var(--rq-head-h,104px) + 52px) auto auto 8px}
}

/* The one line that says the projects are invented is placed on every short screen rather than dropped
   from it. It sits under the header, clear of the plate, and compresses instead of disappearing. */
@media(max-height:500px){
 .rq-homepage .simulation-note{top:auto;bottom:calc(var(--rq-floor,40px) + var(--card-h,0px) + 6px);left:8px;right:8px;width:auto}
 .rq-homepage .simulation-note span{font:500 12px/1.45 Geist,sans-serif;padding:3px 8px}
}

/* The RQ Rank panel's height was decided in fourteen places across three stylesheets and overlapping
   width-and-height queries, and most of those rules named both states in one selector, so the expanded
   panel inherited the collapsed panel's cap while opening it ADDED the two selects, the metric note and
   the footer inside that same box. The list had no choice but to shrink: pressing Expand took it from
   six rows to three. No number fixed that, because there were fourteen numbers and nobody had
   enumerated the combinations you could land on.
   Each breakpoint now sets two tokens and one rule reads them. max() is what carries the guarantee: a
   control that opens something cannot make it smaller, whatever the tokens say. */
.rq-homepage{--rank-h:calc(100dvh - 418px - var(--rq-floor));--rank-h-open:calc(100dvh - 300px - var(--rq-floor))}
@media(min-width:851px) and (max-height:820px){.rq-homepage{--rank-h:calc(100dvh - 302px - var(--rq-floor));--rank-h-open:calc(100dvh - 242px - var(--rq-floor))}}
/* 98px was the panel's own header and nothing else, so the list inside it measured zero rows: the
   collapsed cap has to leave room for the leader's row, not just the title and the toggle. */
@media(max-width:850px){.rq-homepage{--rank-h:min(196px,calc(100dvh - var(--rq-head-h,104px) - 108px));--rank-h-open:min(56dvh,calc(100dvh - var(--rq-head-h,104px) - 120px - var(--rq-floor)))}}
@media(max-width:850px) and (max-height:650px){.rq-homepage{--rank-h:min(150px,calc(100dvh - var(--rq-head-h,104px) - 96px));--rank-h-open:min(50dvh,calc(100dvh - var(--rq-head-h,104px) - 104px - var(--rq-floor)))}}
@media(max-height:460px){.rq-homepage{--rank-h:96px;--rank-h-open:calc(100dvh - var(--rq-head-h,104px) - 96px)}}
.rq-homepage .rich-list-zone,.rq-homepage .rich-list-zone:not(.is-expanded){max-height:var(--rank-h)}
.rq-homepage .rich-list-zone.is-expanded{max-height:max(var(--rank-h),var(--rank-h-open))}

/* Collapsed, on a phone, the panel was 196px of which the list got 28: the title, the subtitle, the
   updated line and the route out took 168px to introduce a row they left no room for. The chip keeps
   its name and its control and gives the rest to the project, which is what anyone opened it for. */
@media(max-width:850px){
 .rq-homepage .rich-list-zone:not(.is-expanded) .rank-object-top p,
 .rq-homepage .rich-list-zone:not(.is-expanded) #rank-updated,
 .rq-homepage .rich-list-zone:not(.is-expanded) .rank-full-link{display:none}
 .rq-homepage .rich-list-zone:not(.is-expanded) #rich-list{max-height:none;flex:1 1 auto;min-height:47px;overflow:auto}
}

/* The world's only instruction was written on every render into an element CSS never painted. It sits
   under the copy plate, out of the way of the boards and the rope, and never takes a click. */
.rq-homepage #queue-help{display:block;position:fixed;z-index:12;left:12px;top:auto;bottom:calc(var(--rq-floor,40px) + var(--ticker,64px) + 10px);margin:0;max-width:min(260px,44vw);padding:3px 8px;border-radius:5px;background:color-mix(in srgb,var(--rq-bg) 70%,transparent);font:12px/1.45 Geist,sans-serif;color:var(--rq-ink-2);pointer-events:none}
@media(max-width:850px){.rq-homepage #queue-help{display:none}}

/* A rank row was a name and two numbers. The category, the country and the permanent ticket number are
   written into .rank-context on every render, and "#1 overall" into .rich-leader-label; both were
   switched off at every width, then switched back on above 851 only. So the open board carried a row's
   full identity at 1440 and dropped it at 390, where that same object is a full-width overlay with
   more room across than the column has at 1440. The tell was a rule further down this file: the ≤850
   expanded block already writes nowrap and ellipsis for .rank-context, and could never fire. What
   decides these two cells is the disclosure the viewer opened, not the width of their phone, so that
   is what they key on. Collapsed is a name, a line and a score everywhere; Expand adds the identity
   line and the badge everywhere. */
.rq-homepage .rich-list-zone.is-expanded .rank-context{display:block;font:12px/1.45 Geist,sans-serif;color:var(--rq-ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rq-homepage .rich-list-zone.is-expanded .rich-leader-label{display:block;font:650 12px/1.4 Geist,sans-serif;text-transform:uppercase;letter-spacing:.03em;color:var(--rq-leader-accent,#7a5d00);margin:0 0 1px}

/* The hero plate and the disclosure were hidden on a short phone by a card-state rule in the shared
   sheet, and the card is opened at load, so neither was ever seen: a landscape phone in Simulation
   showed invented scores with no headline and nothing saying they were invented. The card is the thing
   that gives way on a screen that short, not the page's own voice. */
@media(max-width:850px) and (max-height:650px){
 .rq-homepage:has(.queue-preview.is-detail-open) .world-copy,.rq-homepage.has-rank-expanded .world-copy{visibility:visible}
}
@media(max-height:500px){
 /* These were hidden because the card had a fixed 104px and the text did not fit. The card is a flex
    column now whose #selected-project scrolls, so the room is no longer the constraint and hiding them
    only means that tapping a character on a landscape phone returns a name, a 5px avatar and nothing
    else: 258x18 of content in a 280x90 slab. What the card is for is the description, the category and
    the way out to the project, so they stay and the card scrolls to them. */
 .rq-homepage .queue-preview.is-detail-open .selected-description{display:block;max-height:none}
 .rq-homepage .queue-preview.is-detail-open .selected-category{display:inline-flex}
 /* Below the header rather than merely above the card: with a tall card the "above the card" position
    computed to twelve pixels from the top, which is underneath the header. */
 .rq-homepage .simulation-note{top:calc(var(--rq-head-h,104px) + 44px);bottom:auto;left:8px;right:8px;z-index:31}
 .rq-homepage .world-copy{inset:calc(var(--rq-head-h,104px) + 2px) auto auto 8px}
}

/* Moving the category to its own row pushed the standing and the ticket onto one row together, and
   both carry nowrap text, so on a landscape phone they overflowed their cells into each other and the
   card read "RQ Rank #Ticket RQ 000001". Neither may spill past its own cell. */
.rq-homepage .selected-rank,.rq-homepage .selected-paid{min-width:0;overflow:hidden}
.rq-homepage .selected-rank>*,.rq-homepage .selected-paid>*{min-width:0;overflow:hidden;text-overflow:ellipsis}

/* The project's name is the card's link, and on a landscape phone it ran 78 per cent underneath the
   prev/next controls, so the one thing the card is about could not be clicked: a hit test at the centre
   of the name returned the navigation. One token sets the controls' width and the room the heading keeps
   clear of them, so the two cannot drift apart again. */
@media(max-width:850px){
 .rq-homepage{--rq-nav-w:104px}
 .rq-homepage .queue-controls{width:var(--rq-nav-w)}
 .rq-homepage .selected-copy h2,.rq-homepage .is-status .selected-copy h2{padding-right:calc(var(--rq-nav-w) + 14px)}
}

/* immersive-home.css switches off every p inside .queue-controls, and #queue-help is one. The rule
   added for it set position and colour and never set display, so an ID selector won every contest
   except the only one that mattered and the line still never rendered. Declared here.
   The standing and the ticket shared a row below 851 and .selected-rank spans two columns whose tracks
   are narrower than its box, so it reached into the third and printed "RQ Rank #Ticket RQ 000001".
   overflow:hidden cannot shrink a box wider than its track; separate rows can. */
@media(max-width:850px){
 .rq-homepage .selected-identity{grid-template-rows:auto auto auto auto auto}
 .rq-homepage .selected-rank{grid-area:4/1/5/4;justify-self:start}
 .rq-homepage .selected-paid{grid-area:5/1/6/4;justify-self:start;margin-top:1px}
}

/* Showing the filters on a short screen let them squeeze the list they sit above: expanded at 844x390
   the list went from 47 pixels to 5, so the control still contracted what it opened, one state further
   in than before. The list keeps a floor and the object scrolls past it. */
@media(max-height:650px){
 .rq-homepage .rich-list-zone.is-expanded #rich-list{min-height:88px}
}

/* Adding the category, country and ticket line to a rank row gave it a third line inside a box fixed at
   46 pixels, and the row does not clip, so each row's last line printed across the next row's name:
   "RELAY" struck through "SaaS / productivity · Denmark". Rows size to their content and keep their ink
   to themselves. This is the cost of the line being added without the box being told. */
@media(min-width:851px){
 /* The leader's row carries its own, more specific rule, so the auto-height fix reached every row except
    the one that matters: 40 pixels of box around 70 pixels of content, which clipped "#1 overall" away
    entirely and halved the description. The real project was the most truncated thing on its own board. */
 .rq-homepage #rich-list .rich-row,.rq-homepage #rich-list .rich-row.is-live:first-child{grid-template-rows:auto auto auto;height:auto;min-height:46px;overflow:hidden}
}

/* The strip's cards ran under "All tickets ↗", 73 pixels of project name beneath live text. The link
   gets its own track and sits on its own ground, so a name can pass behind it and still be a name. */
/* The heading carried class="sr-only", and home-world.css pins that class with position:absolute
   !important, which beats any specificity a later sheet can bring. So the name went visible, was taken
   out of the flow, and printed on top of "All tickets" instead of above it. Fighting an !important with
   another one is how a sheet becomes unreadable; the class comes off the element instead and the
   heading carries its own visibility, hidden below 851px where the strip has no width to spare. */
.rq-homepage #queue-strip-title{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* The strip carries General Admission, the thing being sold, and its only heading was .sr-only, so the
   row was visually nameless: the one cue was "All tickets". The ranking board next to it says RQ RANK on
   its face, and this object earns the same treatment. The head becomes a real cell in column one holding
   the name over the way out, instead of a link floating over the track with an opaque background that
   hard-clipped whichever card it landed on. Below 851px the strip is a 64px scroller with no spare width,
   so the name stays for screen readers only there and the link keeps its place beside the track. */
@media(min-width:851px){
 .rq-homepage .queue-strip{grid-template-columns:160px minmax(0,1fr) auto}
 .rq-homepage .queue-strip-head{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:1px;grid-area:1/1;min-width:0}
 .rq-homepage #queue-strip-title{position:static;display:block;width:auto;height:auto;overflow:visible;clip:auto;margin:0;font:650 11px/1.2 Geist,sans-serif;letter-spacing:.05em;text-transform:uppercase;color:var(--rq-ink-3);white-space:nowrap}
 .rq-homepage .queue-strip-head a{position:static;z-index:auto;padding:0;background:none;min-height:0;grid-area:auto}
}

/* Below 851 the disclosure was 40 by 40 with font-size:0 and a '‹' pointing left at a vertical fold:
   the accessible name said Expand and nothing on screen did. It says what it does. */
@media(max-width:850px){
 .rq-homepage .rich-list-zone:not(.is-expanded) #rank-toggle{width:auto;min-width:64px;padding:0 10px;font:650 12px/1.4 Geist,sans-serif}
 .rq-homepage .rich-list-zone:not(.is-expanded) #rank-toggle::after{content:none}
}

/* The note's dismiss floated as a bare × on the world, detached from the plate it belongs to. It carries
   the plate's own ground so the two read as one object. */
.rq-homepage .note-dismiss{background:color-mix(in srgb,var(--rq-bg) 72%,transparent);border-radius:6px}

/* Three things wanted the same top-left corner on a phone: the hero plate, the disclosure and the RQ Rank
   panel. At 390x640 with a project selected the panel printed across the disclosure, slicing "None of it
   is real" mid-sentence and cutting "SAMPLES" and "80.0" in half. They stack in the order a reader needs
   them: what this place is, then whether any of it is real, then the board. Measured heights, not guesses:
   the plate is two lines at 12/17 and 16/22, the note one line at 12/1.45 plus its padding. */
@media(max-width:850px){
 .rq-homepage .world-copy{inset:calc(var(--rq-head-h,104px) + 4px) auto auto 8px}
 /* position:fixed, so this offset and the board's below it are measured from the same origin. The note
    was absolute inside the stage while the board is fixed to the viewport, so every offset written here
    was arithmetic across two coordinate systems and the overlap stayed at exactly 8600 square pixels
    whatever number went in. Two things cannot be stacked by adding numbers in different origins. */
 .rq-homepage .simulation-note{position:fixed;top:calc(var(--rq-head-h,104px) + var(--rq-plate-h,56px) + 8px);bottom:auto;left:8px;right:8px;width:auto;z-index:22}
 /* That sentence wraps to about four lines at this width, so an offset guessed at one line put the board
    across it by 8600 square pixels. One token says where the stack's third item starts, and the board's
    height is derived from the same token, so the two cannot disagree again. */
 .rq-homepage{--rq-stack-top:calc(var(--rq-head-h,104px) + var(--rq-plate-h,56px) + var(--rq-note-h,44px) + 16px)}
 /* The strip is a band the board may not enter either, and it was missing from the sum.
    bottom:auto matters as much as top here: an earlier sheet gives the expanded panel a bottom of 116px,
    and a top plus a bottom define the height outright, so max-height never got a say and the panel's foot
    landed 30 pixels inside the card. */
 .rq-homepage .rich-list-zone:not(.is-expanded),.rq-homepage .rich-list-zone.is-expanded{top:var(--rq-stack-top);bottom:auto}
 /* The room between the stack and the strip, written once. Both panel heights come from it, so they
    cannot disagree: closed takes a little over half, open takes all of it. A 148px floor used to sit on
    the open height so that Expand was never a no-op, and on a 640px screen that floor reached 31px into
    the card. A floor was the wrong instrument. Expanding reveals the metric controls and lets the list
    scroll, which is a real change at any height, so the open panel does not need a constant to justify
    itself and must never claim room the card is standing in. */
 /* The open height used the same room figure as the closed one, which subtracts the card and the strip.
    With a project selected that leaves about three pixels, so Expand deleted the ranking on a phone:
    the rows were in the DOM and the box was 190x3. Open, this panel is a deliberate overlay above both
    (z-index 28) with its own Close, so it does not owe them room; it owes the header. Closed, it still
    sits in the stack and keeps the full subtraction. */
 .rq-homepage{--rank-room:max(0px,calc(100dvh - var(--rq-stack-top) - var(--rq-floor,40px) - var(--ticker,64px) - var(--card-h,0px) - 16px));--rank-h:min(112px,var(--rank-room));--rank-h-open:max(180px,calc(100dvh - var(--rq-stack-top) - var(--rq-floor,40px) - 10px))}
}
@media(max-height:460px){
 .rq-homepage .simulation-note{top:calc(var(--rq-head-h,104px) + var(--rq-plate-h,40px) + 6px)}
 .rq-homepage{--rq-stack-top:calc(var(--rq-head-h,104px) + var(--rq-plate-h,40px) + var(--rq-note-h,36px) + 10px)}
 /* Once the stack, the strip, the card and the floor have taken their share of a 390 pixel-tall screen,
    the room left for the board is nine pixels: a sliver of one row, which reads as a rendering fault.
    A landscape phone shows the board's name and its control, and the list arrives on Expand. */
 .rq-homepage .rich-list-zone:not(.is-expanded){max-height:none;height:auto}
 /* Hiding the list here left the board's name and its two footer links with nothing between them, under
    a headline announcing who leads: an empty frame reads as a fault, and display:none took the ranking
    out of the accessibility tree as well, so it was absent rather than abbreviated. One whole row fits
    in the 93px this panel has, and one row is a ranking. */
 .rq-homepage .rich-list-zone:not(.is-expanded) .rank-samples-note{display:none}
 .rq-homepage .rich-list-zone:not(.is-expanded) #rich-list{display:flex;max-height:46px;overflow:hidden}
 .rq-homepage .rich-list-zone:not(.is-expanded) .rank-object-top{padding-bottom:0;border-bottom:0}
}

/* "Back to the queue" was clipped by the header band at 844x390: the camera stack sits below the header
   rather than inside it, on the same measured height everything else uses. */
@media(max-height:460px){
 .rq-homepage .world-camera{inset:auto 8px calc(var(--rq-floor,40px) + var(--card-h,0px) + 8px) auto}
}

/* At 844x390 the card held 159 pixels of content in a 102 pixel plate with overflow visible, so the
   ticket line was sliced by the plate's edge and printed half onto the strip, and the close button sat
   56 pixels outside the card altogether. The plate takes the height its content needs, capped so it
   cannot eat the stage, and scrolls inside that rather than spilling out of it. */
@media(max-height:500px){
 /* 390 pixels of viewport, and the header, card, strip and floor were claiming 356 of them: 34 pixels
    left for the world and every control in it, which is why the camera stack resolved to a top of 38 and
    sat under the header whatever it was anchored to. The card takes a share that leaves a band to work in. */
 /* This selector carried two max-heights in this same media query, and the one that won subtracted a
    further 96px on a 102px header fallback that is really 114. The card came out 76px tall around a
    child that needs 88, so the description was present and clipped to a six pixel slot. One rule now.
    On a 390px-tall screen a card with a close control, prev/next and a line of description needs about
    180px, which is most of the screen: at this height the selected project is a sheet, not a strip. It
    runs from under the header to just above the floor, over the ticker, and closing it gives the room
    back. The strip is the one thing it covers, and a project you have opened outranks it. */
 /* Both states, one declaration: the closed card was governed elsewhere and sat high enough that its own
    controls (the outbound link, prev and next) crossed into the header, where a tap reached My Account
    behind them. Clamped from the header's measured height, the card can never start above it. */
 /* The card is absolutely positioned inside .queue-world, so a bottom offset here was measured from the
    world's edge, not the viewport's, and a top of -86px pulled it up into the header: its own outbound
    link and prev/next sat behind the header band, where a tap reached My Account. Pinned to the viewport
    with top:auto, the height comes from the floor offset and the cap, both read off measured tokens, so
    the card starts at 120 on a 390px-tall screen and the header ends at 114.
    ...and then stopped one object short. --rq-floor is the legal row, 40px, and the ticket strip is the
    64px above it, so this cleared the footer and landed the card and its close button squarely on the
    strip: the whole 54px peek row inside it, and the close button on top of the strip's own Pause. Both
    edges of this column are objects with published heights, so both are named. */
 .rq-homepage .queue-preview,.rq-homepage .queue-preview.is-detail-open{position:fixed;top:auto;bottom:calc(var(--rq-floor,40px) + var(--ticker,64px) + 6px);max-height:min(240px,calc(100dvh - var(--rq-head-h,114px) - var(--rq-floor,40px) - var(--ticker,64px) - 18px));overflow:hidden}
 /* max-height:100% did not constrain it: the child still ran 32 pixels past the plate, clipped rather
    than reachable, which hides the ticket line instead of printing it outside. A flex column with a
    scrolling child fits by construction, and everything stays gettable. */
 .rq-homepage .queue-preview.is-detail-open{display:flex;flex-direction:column}
 /* min-height:0 let this collapse to six pixels against 178 of content, so the description was present
    and unreadable. The scroll region keeps a floor of its own; the card is auto height and capped
    above, so it grows to hold it and scrolls only past that. */
 .rq-homepage .queue-preview.is-detail-open #selected-project{flex:1 1 auto;min-height:88px;max-height:none;overflow:auto}
}

/* The flyover button was painted inside the opaque header band at 844x390 and a click on "Tour today's
   VIPs and the Featured screens" landed on the account link behind it. The camera stack is anchored to
   the floor on every short screen, not only the narrow ones. */
@media(max-height:500px){
 /* And it lies along the band rather than across it: a two-button column is 86 pixels tall on a screen
    that has 76 to give. One row, 40 pixels. */
 /* This is anchored off the card, and the card became a 224px sheet on a landscape phone, so the camera
    rose with it into the header band: a tap where "Back to the queue" is drawn hit the Join link behind
    it and opened the $5 checkout. A mis-tap into a paid flow is worse than a dead control. The bottom is
    clamped so the top of this stack can never pass under the header, whatever the card does. */
 /* Both of these were anchored bottom-right with their own arithmetic, so at 844x390 they landed on each
    other: the camera pills covered the Simulation button completely and every tap meant for the control
    that says whether this is real hit a camera button instead. One figure places both, and the toggle
    sits a control's height above the camera rather than on it. */
 .rq-homepage{--rq-cam-bottom:min(calc(var(--rq-floor,40px) + var(--ticker,64px) + var(--card-h,0px) + 10px),calc(100dvh - var(--rq-head-h,114px) - 52px))}
 /* Beside the camera, not above it: the camera already sits at the lowest point that clears the header,
    so stacking the toggle on top of it put the toggle inside the header and the tap went to the header
    instead. The camera's width is measured and published, because it changes with its labels. */
 .rq-homepage .world-mode{position:fixed;inset:auto calc(16px + var(--rq-cam-w,180px)) var(--rq-cam-bottom) auto;top:auto;z-index:25}
 .rq-homepage .world-camera{position:fixed;inset:auto 8px var(--rq-cam-bottom) auto;top:auto;width:auto;z-index:26}
 .rq-homepage .world-camera,.rq-homepage .world-camera:has(.world-flyover:not([hidden])){flex-direction:row;align-items:center;gap:6px}
}

/* Three stacked plates down the left had three right edges at 1920, 346.4 / 392.0 / 432.0, an 85.6px
   ragged spread, and a fourth appeared when the board expanded. One token, one edge.
   The token used to start at 851px, and below that the plate was a flat 200px. The phone rule runs to
   850px, so an 834px tablet was given a phone's plate: every project name truncated to four characters
   ("FIEL", "REL", "NOR"), every description to three, the category filter to "All categori", while 626px
   of viewport sat unused beside it. The token now covers every width, so there is no band that inherits a
   width meant for a narrower screen. 601-850px scales with the viewport and stops at 330px; a phone keeps
   the 200px the rest of its stack is tuned to. */
.rq-homepage{--rq-plate-w:200px}
@media(min-width:601px){.rq-homepage{--rq-plate-w:min(330px,38vw)}}
@media(min-width:851px){.rq-homepage{--rq-plate-w:274px}}
@media(min-width:1440px){.rq-homepage{--rq-plate-w:330px}}
@media(min-width:1800px){.rq-homepage{--rq-plate-w:380px}}
@media(min-width:851px){
 .rq-homepage .world-copy,.rq-homepage .simulation-note,.rq-homepage .rich-list-zone,.rq-homepage .rich-list-zone.is-expanded{width:var(--rq-plate-w);max-width:var(--rq-plate-w)}
 .rq-homepage .simulation-note>span{width:100%}
}

/* The permanent RQ number, the category and the country were switched off on every touch viewport, so a
   phone row was a name, a score and a move. The number is what makes the row a ticket, so the line prints
   below 851 too, with the number leading it. */
@media(max-width:850px){
 .rq-homepage #rich-list .rank-context{display:block;font:11.5px/1.45 Geist,sans-serif;color:var(--rq-ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
 .rq-homepage #rich-list .rich-row,.rq-homepage #rich-list .rich-row.is-live:first-child{height:auto;min-height:44px;grid-template-rows:auto auto auto}
}

/* Drag and pinch is the only way into the world, and the line that says so was switched off on exactly the
   devices where it is the only way in. It prints on touch, at the foot of the world, out of the stack. */
@media(max-width:850px){
 .rq-homepage #queue-help{display:block;left:8px;right:8px;max-width:none;top:auto;bottom:calc(max(var(--rq-mode-above,0px),calc(var(--rq-floor,40px) + var(--ticker,64px) + var(--card-h,0px))) + 10px);font:12px/1.45 Geist,sans-serif;text-align:center}
}

/* Expanded, the board is a deliberate overlay: on a 390 pixel-tall screen it was being sized as though it
   still had to clear the card and the strip, which left it 96 pixels against 555 of list and made Expand
   move nothing at all. Open, it takes the room between the header and the floor. */
@media(max-height:500px){
 /* This took its height from the header and its top from the stack, two figures 78 pixels apart at
    844x390, so the open panel finished 18 pixels below the fold and the last rows could not be reached.
    Same token as the top, so the foot lands where the arithmetic says it does. */
 .rq-homepage{--rank-h-open:max(120px,calc(100dvh - var(--rq-stack-top) - var(--rq-floor,40px) - 10px))}
 .rq-homepage .rich-list-zone.is-expanded{z-index:29}
}

/* Pixel-true contrast against the painted backdrop, not a CSS ancestor walk: on the cream-yellow #1 row
   (#F2E1A2) the movement figure measured 4.03:1 and the context line 4.26:1, both short of 4.5. The row is
   the brightest block on the page by design, so the ink on it darkens rather than the row dimming. The
   letter avatars measured 2.90 and 2.99 against 3.0 for large text, which is the same near-miss on a
   different backdrop, so their ink darkens too. */
.rq-homepage #rich-list .rich-row:first-child:not(.is-empty):not(.is-gathering) .rich-move.is-up{color:#0d5540}
.rq-homepage #rich-list .rich-row:first-child:not(.is-empty):not(.is-gathering) .rank-context{color:#3f4a55}
/* 11px is under the 12px floor the detector holds, and the ticket line under every strip card sat there in
   all sixteen measured states. */
.rq-homepage .queue-ticker-card small{font-size:12px}

/* The detector holds a 12px floor and three elements still painted under it: the movement figure at 11px,
   the row's context line at 11.5px, and the selected card's two chip labels at 11px. All three carry
   information a visitor is meant to read, so they come up to the floor rather than staying decorative. */
.rq-homepage .rich-move,.rq-homepage #rich-list .rich-move{font-size:12px;line-height:16px}
.rq-homepage #rich-list .rank-context{font-size:12px}
.rq-homepage .selected-rank span,.rq-homepage .selected-paid span{font-size:12px}
/* Expanded, the zone scrolls below 851px but kept overflow:hidden above it, so simulation at 1440 clipped
   140px of list with no way to reach it. One rule for both, since the defect is the same. */
.rq-homepage .rich-list-zone.is-expanded{overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;scrollbar-width:thin}

/* The outbound project link is the click the whole product exists to drive, and it measured 38x18,
   49x19 and 51.8x20 across viewports: under the 40px floor every other control on this page holds.
   The ticket line beside it was 191x14. Both are links a thumb has to find. */
.rq-homepage .project-link{display:inline-flex;align-items:center;min-height:40px;padding-block:0}
.rq-homepage .selected-paid{display:inline-flex;align-items:center;min-height:40px}

/* The outbound link sits inline inside the project's heading by design ("CAIBI" with its arrow), so it
   cannot become a block without changing what the card is. It measured 49x19, well under the 40px floor
   the rest of the page holds, and it is the click the product exists to drive. The text stays exactly
   where it is; an overlay extends the target to 44px tall without touching the flow. */
.rq-homepage .selected-copy h2 .project-link{position:relative}
.rq-homepage .selected-copy h2 .project-link::after{content:'';position:absolute;left:0;right:0;top:50%;height:44px;transform:translateY(-50%)}

/* With the sheet open on a 390px-tall screen the band between the header and the sheet is six pixels:
   there is no room for the camera controls, the mode toggle and the drag hint, and crowding them in is
   what put them inside the header. While a project is open they go; the sheet carries its own close and
   prev/next, so nothing is unreachable, and closing it brings them straight back. */
@media(max-height:500px){
 .rq-homepage[data-queue-selected]:not([data-queue-selected="-1"]) .world-camera,
 .rq-homepage[data-queue-selected]:not([data-queue-selected="-1"]) .world-mode,
 .rq-homepage[data-queue-selected]:not([data-queue-selected="-1"]) #queue-help{display:none}
}

/* The Pot is hidden between 851 and 1190px by immersive-home.css:68, so a phone shows the number and a
   laptop does not. It is a public-trust figure and the arithmetic behind it is deliberately public, so it
   should not have a hole in the middle of the range. It comes back at laptop widths, compact. */
@media(max-width:1190px) and (min-width:851px){
 .rq-homepage .header-pot{display:flex;flex-direction:row;align-items:baseline;gap:5px;font-size:11px}
 .rq-homepage .header-pot strong{font-size:13px}
}

/* The ticker's scroller was not clipping: at 390 its viewport ends at 301 and the FIELDWORK card ran to
   382, straight through "All tickets", so two pieces of text printed over each other. Cards also crossed
   the link at 834 and 844x390. The scroller clips on both axes and the last card fades out before the
   link's edge, so the row ends rather than collides. An opaque background on the link would hide the
   collision by cutting whichever card it landed on, which is the fault this replaced. */
@media(max-width:850px){
 .rq-homepage .queue-ticker-viewport{overflow-x:auto;overflow-y:hidden;-webkit-mask-image:linear-gradient(to right,#000 calc(100% - 26px),transparent);mask-image:linear-gradient(to right,#000 calc(100% - 26px),transparent)}
}

/* The collapsed board cut its last row horizontally through the glyphs, at every populated width, with no
   scrollbar and no "more below": a row sliced through its own letterforms reads as a rendering fault, not
   as a list that continues. The list is capped to a whole number of rows instead, so the boundary always
   falls between them. Rows are 44px with a 3px gap below 851, so two rows are 91. */
@media(max-width:850px){
 .rq-homepage .rich-list-zone:not(.is-expanded) #rich-list{max-height:91px;overflow:hidden}
}
@media(min-width:851px){
 .rq-homepage .rich-list-zone:not(.is-expanded) #rich-list{max-height:calc((var(--rank-row) + 3px) * 4);overflow:hidden}
}

/* rq.css gives every select a chevron; immersive-home.css then sets `background` as a shorthand on the
   rank filters, which wipes the image. So the board's two controls render as plain boxes with no cue that
   they open, while the purchase dialog's selects 600px away draw chevrons correctly. Same control, two
   appearances, one page. The chevron is drawn in the panel's line colour rather than the dialog's ink,
   because this pair sits on a dark plate. */
.rq-homepage .world-rank-filters select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23AAB6C2' stroke-width='1.8'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 9px center;padding-right:28px}

/* The strip's name was switched on at 851px, so an 834px tablet with 834px of width and one card in the
   row showed a nameless strip whose only cue was "All tickets". The ranking board beside it says RQ RANK
   on its face and this object earns the same treatment wherever there is room for it. Between 700 and
   850 the strip is a flex row rather than a grid, so the head becomes a flex item carrying the name over
   the way out. Below 700 the width genuinely runs out and the name stays for screen readers. */
@media(min-width:700px) and (max-width:850px){
 .rq-homepage .queue-strip-head{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:1px;order:2;flex:none;min-width:0}
 .rq-homepage #queue-strip-title{position:static;display:block;width:auto;height:auto;overflow:visible;clip:auto;margin:0;font:650 11px/1.2 Geist,sans-serif;letter-spacing:.05em;text-transform:uppercase;color:var(--rq-ink-3);white-space:nowrap}
 .rq-homepage .queue-strip-head a{order:0;padding:0;min-height:0}
}

/* The snap above needs the row's real height or it caps the list at a figure no row ends on, which is how
   1920 still sliced one. home-world.css sets .rich-row min-height 49, and 58 from 1600px up; the token is
   declared beside those two figures so the cap and the row cannot disagree. */
.rq-homepage{--rank-row:49px}
@media(min-width:1600px){.rq-homepage{--rank-row:58px}}

/* An open place is not a project and should not compete with one: no logo, no number, a quieter card.
   The one that is genuinely next carries the sentence; the rest carry two words. */
.rq-homepage .queue-ticker-card.is-open{background:transparent;border-style:dashed;box-shadow:none}
.rq-homepage .queue-ticker-card.is-open .ticker-copy strong{font-weight:500;color:var(--rq-ink-3)}
.rq-homepage .queue-ticker-card.is-next{border-style:solid}

/* Two controls in the same group followed two rules: the recentre kept its "Back to the queue" label at
   every width while the tour was a labelled pill at 1920 and an unlabelled 40px circle below it, which is
   the one a first-time visitor is least likely to press and the only route to the rope and the boards.
   Both carry their name from 700px up, where there is room for it. */
@media(min-width:700px){
 .rq-homepage #world-flyover{display:inline-flex;align-items:center;gap:7px;width:auto;height:40px;padding:0 13px 0 10px;border-radius:20px}
 .rq-homepage #world-flyover .recentre-label{position:static;width:auto;height:auto;margin:0;overflow:visible;clip-path:none;clip:auto;font:600 12px/1 Geist,sans-serif;white-space:nowrap}
}

/* ── One position per object ───────────────────────────────────────────────────
   A cross-viewport sweep of every named control (scratchpad harness: anchor corner,
   visible label, box height at 1920/1440/834/390/844x390) turned up the same class of
   defect four times over, which is why closing single instances never moved consistency:
   the close X sat top-right of the card at desktop and bottom-left below 851; the strip's
   own name led the row at 851 and up, followed the cards at 700 to 850, and was screen
   reader only below that; the drag instruction was present at every width except landscape
   phone; the tour carried its name down to 700 and went bare icon below it. Each of those
   is one object taught twice. They are settled here in one place, per object, rather than
   wherever a reviewer happened to notice one. */

@media(max-width:850px){
 /* The card's close is the same control at every width, so it keeps the same corner. */
 .rq-homepage #selected-close{position:absolute;inset:8px 8px auto auto;z-index:3}
 .rq-homepage .queue-preview.is-detail-open .selected-copy,
 .rq-homepage .queue-preview.is-detail-open .selected-identity{padding-right:46px}

 /* General Admission leads its strip here too, above the way out, as it does above 851.
    The head takes 94px of a 390px row, which is what "All tickets" alone was taking. */
 .rq-homepage .queue-strip-head{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:2px;order:0;flex:0 0 auto;max-width:100px;min-width:0;grid-area:auto}
 .rq-homepage .queue-strip-head h2{display:block}
 .rq-homepage #queue-strip-title{position:static;width:auto;height:auto;overflow:visible;clip:auto;clip-path:none;margin:0;font:650 11px/1.15 Geist,sans-serif;letter-spacing:.02em;text-transform:uppercase;color:var(--rq-ink-3);white-space:normal}
 .rq-homepage .queue-strip-head a{position:static;order:1;grid-area:auto;flex:none;width:auto;min-width:0;padding:0;white-space:nowrap;font-size:11px;display:inline-flex;align-items:center;min-height:26px}

 /* The Pot's row is 40px in every header variant below 851, so the link stops collapsing
    to a 20px box that no thumb can find. */
 .rq-homepage .header-pot{min-height:32px}
}

/* A 16px link is not a target. The strip's way out gets a real box at every width. */
@media(min-width:851px){
 .rq-homepage .queue-strip-head a{display:inline-flex;align-items:center;min-height:26px}
}

/* Landscape phone was the one viewport told nothing about dragging the world. The world is
   the same instrument there, so it carries the same instruction, left of the card. */
@media(max-width:850px) and (max-height:500px){
 .rq-homepage #queue-help,
 .rq-homepage[data-queue-selected]:not([data-queue-selected="-1"]) #queue-help{display:block;position:fixed;left:8px;right:auto;top:auto;bottom:calc(var(--rq-floor,40px) + var(--ticker,64px) + 6px);max-width:min(260px,52vw);margin:0;z-index:12}
}

/* The tour keeps its name below 700 as well: it was the only control whose label depended
   on how wide the phone was. */
@media(max-width:699px){
 .rq-homepage #world-flyover{display:inline-flex;align-items:center;gap:6px;width:auto;height:40px;padding:0 12px 0 9px;border-radius:20px}
 .rq-homepage #world-flyover .recentre-label{position:static;width:auto;height:auto;margin:0;padding:0;overflow:visible;clip-path:none;clip:auto;font:600 11px/1 Geist,sans-serif;white-space:nowrap}
}

/* The tour's full name is 30 characters and a phone's camera stack is 157px wide, so the
   short form shows there. It is a leading substring of the accessible name, which keeps
   the spoken label and the printed one the same control. */
/* ...and at the same width as the control standing next to it. These two share one row, so what has
   to fit is the pair, not either one: shortening at 699 while recentre shortened at 850 left 834 and
   the landscape phone showing "Back" beside all 230px of "Tour today's VIPs and Featured", the same
   row teaching two different rules about its own labels. The group decides. */
.rq-homepage #world-flyover .flyover-short{display:none}
@media(max-width:850px){
 .rq-homepage #world-flyover .flyover-label{display:none}
 .rq-homepage #world-flyover .flyover-short{position:static;display:inline;width:auto;height:auto;margin:0;padding:0;overflow:visible;clip-path:none;clip:auto;font:600 11px/1 Geist,sans-serif;white-space:nowrap}
}

/* The name in the card is an inline link inside a heading, sized by the line-height of the
   heading around it, which is the case WCAG 2.5.8 exempts; the same destination also has a
   standalone 40px control beside it. Padding the inline box out to 35px was measured and
   changed nothing a tap could reach, so it is not carried. */

/* The restored pause button is the strip's third child and belongs after the track it controls.
   The strip is a flex row at every width, so this is one ordering rule, not one per breakpoint. */
.rq-homepage .ticker-motion{order:2;flex:none}

/* The pause control inherited font-size:0 from the strip's base rule, so at every width it
   printed its word as a speck beside the bars. It carries its name like every other control
   here: the word costs about 34px and the track still clears a full card at 390. */
.rq-homepage .ticker-motion{display:inline-flex;align-items:center;justify-content:center;gap:6px;width:auto;min-width:0;font:600 11px/1 Geist,sans-serif;white-space:nowrap}
.rq-homepage .ticker-motion:before{flex:none;margin:0}
@media(min-width:851px){
 .rq-homepage .ticker-motion{min-height:32px;height:auto;padding:0 12px;gap:7px;font-size:12px;border:1px solid var(--rq-line-strong);border-radius:6px;background:none;color:var(--rq-ink-2)}
}
@media(max-width:850px){
 .rq-homepage .ticker-motion{height:44px;min-height:44px;padding:0 7px;border:0;background:none;color:var(--rq-ink-2)}
}

/* The strip fades at both edges above 851 and only on the right below it, so the same scroller
   hard-clipped its first card on a phone and softened it on a desktop. One treatment. */
@media(max-width:850px){
 .rq-homepage .queue-ticker-viewport{-webkit-mask-image:linear-gradient(90deg,transparent,#000 14px,#000 calc(100% - 22px),transparent);mask-image:linear-gradient(90deg,transparent,#000 14px,#000 calc(100% - 22px),transparent)}
}

/* Yellow said two different things on the same object. Above 851 a yellow fill means "this is
   #1"; below it every row carried a yellow bar scaled to its score, so the amount of yellow meant
   a number there and an identity here, and #1 was marked with a ring instead. The score is already
   printed at the end of the row, so the bar was not carrying anything the row did not say, and a
   proportional bar on every row is the dashboard treatment this board is meant not to be. The bar
   goes and the leader takes the same fill it has above 851. */
@media(max-width:850px){
 .rq-homepage .rich-list-zone:not(.is-expanded) #rich-list .rich-row::before{content:none}
 .rq-homepage .rich-list-zone:not(.is-expanded) #rich-list .rich-row.is-live:first-child{background:#f2e1a2;color:var(--rq-on-yellow);box-shadow:none}
}

/* The pause control landed between the strip's name and its cards above 851 and after the cards
   below it: the same control on either side of the thing it controls, depending on the window. The
   first attempt at this set grid-column, which did nothing, because the strip is flex at 1440 and
   not grid. The consistency harness caught that the fix had not taken. */
@media(min-width:851px){
 .rq-homepage .queue-ticker-viewport{order:1;flex:1 1 auto;min-width:0}
}

/* ── What the detector pass measured ─────────────────────────────────────────
   The page's largest line is set in Anton, whose glyph box is 37px at a 25px
   font size while the line box was 27.5px, so below 851 the overflow:hidden that
   keeps a long project name on one line was shaving the ascenders and descenders
   off the heading. The line box holds the face it is set in. */
@media(max-width:850px){
 .rq-homepage #hero-title{line-height:1.5}
}

/* The ranking panel is a flex column and the list had no flex basis, so it grew to its content
   while it was being measured and pushed the panel's own footer out through the clip: "All
   rankings" and "How ranking works" were 40px links with 11px inside the panel at 834 and 390, and
   a click at either centre landed on the 3D world behind them. The list is the part that gives. */
.rq-homepage #rich-list{flex:1 1 auto;min-height:0}
.rq-homepage .rank-object-foot{flex:none}

/* The pager ran 5px past the right edge of the window at 834, 390 and 844x390, with nothing to
   scroll to reveal it, and its count sat under the close control. The two belong in one row at the
   card's top right, the pager inside the close rather than beneath it. */
@media(max-width:850px){
 .rq-homepage .queue-controls{position:absolute;inset:8px 54px auto auto;left:auto;bottom:auto;width:auto;max-width:calc(100% - 74px);display:flex;align-items:center;gap:4px;height:40px}
}

/* Below 851 the strip leaves fixed positioning and sits in the flow, while the legal row stays
   fixed to the bottom of the window, so the last 8px of the strip ran underneath it at 390 and 12px
   at 844x390. A bottom margin on the last box in the flow moves nothing; the strip is lifted by the
   measured shortfall instead, so it clears whatever the floor turns out to be. */
@media(max-width:850px){
 .rq-homepage .queue-strip{top:calc(-1 * var(--rq-strip-lift,0px))}
}

/* The collapsed ranking chip is 112px tall and its footer is 83px of wrapped links, so "All
   rankings" and "How ranking works" had 14px inside the panel and 69px below its clip: a click at
   either centre landed on the 3D world behind them. Two links that cannot be clicked are worse than
   two links that are not there. The chip carries the ranking and the way to open it; the footer
   belongs to the open panel, where it fits, and "View all" is in the header at every width. */
@media(max-width:850px){
 .rq-homepage .rich-list-zone:not(.is-expanded) .rank-object-foot{display:none}
}

/* ── Landscape phone: stop the panels printing through each other ────────────
   At 844x390 the header, the live-state note, the strip and the floor take 258
   of 390 pixels between them, leaving 132 for the world, its copy, the ranking
   board and the project card. That is the composition problem, and this is not a
   redesign of it: it is the panels no longer sharing pixels.

   The drag instruction goes here. Adding it to this viewport earlier in the day
   was wrong: there is no free space at 844x390 and it landed inside the ranking
   board, printing a sentence through the board's own rows. The world region's
   accessible name still carries the instruction, and not printing it beats
   printing it twice on top of something else. */
@media(max-width:850px) and (max-height:500px){
 .rq-homepage #queue-help,
 .rq-homepage[data-queue-selected]:not([data-queue-selected="-1"]) #queue-help{display:none}

 /* The note ran the full width underneath the card's column. It stops short of it. */
 .rq-homepage #simulation-note{max-width:calc(100% - 300px)}

 /* The copy plate sat under the mode toggle beside it. The plate gives way rather than the toggle
    moving, because moving the toggle put it on the camera row and the card. The width it gives way
    to is measured from the two controls it has to clear, not picked: a fixed 400px was right until
    the recentre control got its label and widened the camera by 79px. */
 .rq-homepage .world-copy{max-width:min(calc(100vw - var(--rq-cam-w,180px) - var(--rq-mode-w,139px) - 40px),calc(100vw - 300px))}

 /* Three further changes were tried here and measured, and all three made it worse, so none are
    carried. Giving the card and the board a bottom clearance moved them up instead of shortening
    them: the card landed 48px inside the header, which is how a tap on "Back to the queue" opened
    the $5 checkout earlier in this work. The board is absolutely positioned inside .queue-world, so
    a viewport-relative clearance resolves against the wrong box and did nothing at all. Pinning the
    mode toggle to the right edge moved it onto the camera row and the card. What is left at this
    viewport, the board over the strip and the card over the strip, is the composition problem named
    above rather than a rule in the wrong place, and it needs the right-hand column the critique
    asked for rather than another offset. It is recorded, not quietly patched. */
}

/* The drag instruction ran the full width of the window below 851 and its right end passed under
   the camera controls, so the sentence read "...Tap a projec". It stops short of the camera column,
   using the same measured width the mode toggle already clears. */
@media(max-width:850px){
 .rq-homepage #queue-help{right:calc(16px + var(--rq-cam-w,180px))}
}

/* Open, the ranking board started 12px higher than it sits closed and took 6px out of the bottom of
   the live-state note. It opens downward from where it already is. */
@media(min-width:851px){
 /* Expand means the board takes the screen and shows the ranking. It used to mean the same 330px column
    grew 60px, which the two filter selects and the refresh line ate, so the control returned 2 whole rows
    where the collapsed state showed 3: a disclosure that discloses less. On a phone this object is already
    a bounded overlay and it shows 6 of 8 rows, so the fix is to stop having two answers. Bounded top and
    bottom like its phone self, and wide enough that a project's one line of reason is readable instead of
    clipped to a fifth of itself: --rq-board-overlay is the flag snapRankList reads to know its room is its
    own box rather than the distance to whatever it must not cover. */
 .rq-homepage .rich-list-zone.is-expanded{--rq-board-overlay:1;left:12px;right:auto;width:min(880px,calc(100vw - 24px));max-width:none;top:calc(var(--rq-head-h,56px) + 12px);bottom:calc(var(--rq-floor,40px) + var(--ticker,60px) + 12px);height:auto;max-height:none;z-index:29;overflow:hidden}
}

/* At 844x390 the note cleared the card's column but still ran under the mode toggle beside it. */
@media(max-width:850px) and (max-height:500px){
 .rq-homepage #simulation-note{max-width:min(calc(100vw - var(--rq-cam-w,180px) - var(--rq-mode-w,139px) - 40px),calc(100vw - 300px))}
}

/* The ranking board showed one row and never said how many there were, so a viewer could not tell
   whether it was holding back seven or nothing at all. The count is the one line that answers it, so
   it shows at every width, including the ones where the subtitle and the freshness stamp do not. */
.rq-homepage #rank-count{display:block;margin:1px 0 0;font:600 11px/15px Geist,sans-serif;color:var(--rq-ink-2);white-space:normal;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
@media(max-width:850px){
 .rq-homepage .rich-list-zone:not(.is-expanded) #rank-count{font-size:11px;line-height:14px}
}

/* An open place is a drawn gap in the numbering, not a separate offer. In a cold start there are
   eight of them and each was its own tab stop announcing the same sentence, so a keyboard met the
   same words nine times in a row on the way past the strip. They stay clickable and stay in the
   count; the one that carries the next number keeps its place in the order, and the rest step out
   of it, because the destination they share is already the first thing in the header. */
.rq-homepage .queue-ticker-card.is-open:not(.is-next):focus-visible{outline:3px solid var(--rq-focus,#ffe736);outline-offset:2px}

/* The strip's first card is the one genuine ticket in a cold start, and the scroller's left fade
   was eating its logo tile whenever the ticker rested at the start. The track begins clear of the
   fade instead of under it. */
@media(max-width:850px){
 .rq-homepage .queue-ticker-track{padding-left:10px}
}

/* The leader row's plate is theme-fixed: --rq-leader-bg is declared once, on the dark root, and
   never redefined for light, so the cream never changes. --rq-gold does change, to #ffe495 in dark,
   and the "#1 overall" badge was painting that on the cream at 1.04:1: invisible in dark, 4.74:1 in
   light, from one token pairing. Ink that sits on a fixed surface is declared beside it and fixed
   with it. */

/* The drag caption describes the world, and it was parked in the ranking board's own column at the
   foot of the frame. The board measures itself against whatever sits below it, so the caption was
   capping the board at 188px over 563px of rows while a 1086 by 196px band of empty floor sat beside
   it. It moves under the world it describes, clear of the board's column and of the card's. */
@media(min-width:851px){
 .rq-homepage #queue-help{left:50%;right:auto;transform:translateX(-50%);text-align:center}
}

/* Expanded at landscape the board had 120px for a header, two filters and a list, so the list was
   laid out below the panel's own bottom edge and all eight rows reported zero height: pressing
   Expand showed two selects and no ranking at all. Open, it is an overlay with a z-index of 29 and
   an opaque back, so it takes the height it needs and scrolls. */
@media(max-width:850px) and (max-height:500px){
 /* The structural fault under every remaining overlap at this viewport, and the one the critique kept
    naming while three rounds of offsets went past it. A landscape phone is 844 across and 390 tall: the
    scarce axis is height and there were 227px of unused width sitting between the left column and the
    card. The copy plate and the live-state note were still 321px wide, so one sentence wrapped to three
    lines and the pair took 115px of a 276px band, which left the board 45px for a 50px heading and put
    it 3px inside the strip. Wide and short instead of narrow and tall costs nothing and gives the column
    back its room. The board is then bounded by both objects it sits between, the stack above and the
    strip below, so it cannot cross either whatever it holds. */
 /* ...and then the column was still a column. Measured at 844x390 the band between the header and the
    strip is 172px and the stack spent 170 of it: plate 53, note 46, the board's heading 61, and the
    board held no rows at all because there was nowhere to put one. There is no vertical room to find.
    There is horizontal room: the plate and the board were both 480 wide, the card starts at 556, and
    the only gap in 844 pixels was the 8 between them. So the ranking stands beside the page's voice
    rather than under it, and takes the whole band from the header to the strip for itself. Collapsed
    rows at this width are a rank, a logo, a name and a score, with the description switched off, so a
    210px column carries one comfortably; the open board is still the full-width overlay. */
 .rq-homepage{--rq-plate-w:min(320px,calc(100vw - 524px))}
 /* The column's width was 210px against a 304px reserve, both of them numbers I chose rather than
    measured, and it ran 11px into the Live/Simulation toggle at 535. The toggle sits right:170px, which
    is the camera group's 154 plus two 8px gaps, and both widths are published as tokens, so the column
    can clear it by arithmetic. A number chosen to clear a control has to be derived from that control or
    it is only correct until the control changes, which is the rule that took all afternoon to learn. */
 .rq-homepage .rich-list-zone:not(.is-expanded){left:calc(var(--rq-plate-w) + 16px);right:auto;width:min(210px,calc(100vw - var(--rq-cam-w,154px) - var(--rq-mode-w,139px) - var(--rq-plate-w) - 48px));top:calc(var(--rq-head-h,114px) + 4px);bottom:calc(var(--rq-floor,40px) + var(--ticker,64px) + 2px);max-height:none}
 .rq-homepage .rich-list-zone:not(.is-expanded) #rich-list{display:flex;max-height:none}
 .rq-homepage .rich-list-zone.is-expanded{--rq-board-overlay:1;top:calc(var(--rq-head-h,114px) + 6px);bottom:calc(var(--rq-floor,40px) + 8px);max-height:none;height:auto;overflow:hidden}
 /* The open board here is 222px tall and its own furniture was taking 134 of that, so Expand showed one
    row against the two the collapsed column shows: the same inversion as 1440, one viewport later. A
    board spends its height on the ranking first. The two filters and the footer links are refinements
    for the widths that have room for them, which is the same call this sheet already makes about the
    description on a collapsed phone row. */
 .rq-homepage .rich-list-zone.is-expanded .world-rank-filters,
 .rq-homepage .rich-list-zone.is-expanded .rank-object-foot{display:none}
 /* ...and the same test applied to the rows themselves. With the description and the identity line on,
    a row here is about 70px and 164px of list is one whole row and part of a second. Three ranked
    projects beat one with a paragraph on a screen 390px tall, so at this viewport Expand adds ranking
    rather than per-row detail, which is what a disclosure on a small screen is for. */
 .rq-homepage .rich-list-zone.is-expanded .rich-project small,
 .rq-homepage .rich-list-zone.is-expanded .rank-context{display:none}
 /* The card is capped at 154px here, between a header ending at 114 and the strip at 286, and
    .selected-identity wanted 178. It overflowed, its grid collapsed, and row 4 (the outbound link, the
    one click that sends a visitor to the project) was squashed up to the top of the card underneath the
    absolutely positioned prev/next controls: measured 0 hits in 9. My own height cap from earlier today
    caused it, so the content answers the cap rather than overflowing it. One line of description here,
    and the panel shrinks instead of spilling. */
 /* ...and the real cause, which the clamp alone did not reach: .selected-identity measured 171px inside a
    154px card, a.selected-paid ran to 308 against a card ending at 280, .selected-copy collapsed entirely
    and the outbound link became a 38px stub at the top of the card underneath the prev/next controls. The
    card cannot hold its content in 154px. It does not have to: this sheet's own record already accepts an
    opened card covering the strip at this viewport, because 390px of height cannot hold a header, an
    opened card and the strip. So it clears the floor rather than the strip when it is open, which is 216px,
    and showDetails() marks what it covers inert the way the open board does. Closed, it is still the peek
    row above the strip. */
 /* Two earlier attempts here were wrong and are recorded rather than hidden. Letting the card reach into
    the strip's band did not work and cannot: the card sits in a nested stacking context whose own level is
    below the strip's 20, so raising the card to 24 changed nothing and the strip's ticker cards and Pause
    button still answered every probe aimed at the card's own controls. A child's z-index cannot lift it out
    of a context that is already underneath.
    So the card stays above the strip, which leaves 154px, and 154px cannot hold a heading, a description,
    a rank line, a paid line and a row of controls. The rank and the paid figures go, because they are on
    screen already in the ranking column immediately beside this card. What is left is the project, its
    reason, the way out to it, and the means to move along the queue. */
 .rq-homepage .queue-preview.is-detail-open .selected-rank,
 .rq-homepage .queue-preview.is-detail-open .selected-paid{display:none}
 /* ...and the actual cause, after two wrong ones. a.project-link is display:inline INSIDE the h2, so it
    is the project's name in the heading, and its own grid-area of 4/1/5/4 has never applied to anything:
    .selected-copy is display:contents, which promotes the h2 to a grid item but not the link inside it.
    The heading holds row 1, column 3, x 663 to 781. .queue-controls floats absolutely at 653 to 781. A
    navigation strip was parked on top of a heading that contains a link, so the link measured 0 probes of
    9 at every card height I tried, and resizing the card moved both of them together. Controls belong in
    a row of the card, not over its content. */
 .rq-homepage .queue-preview.is-detail-open #selected-project{flex:1 1 auto;min-height:0;overflow:auto}
 .rq-homepage .queue-preview.is-detail-open .queue-controls{position:static;inset:auto;flex:none;align-self:flex-end;margin:2px 0 0}
 .rq-homepage .queue-preview.is-detail-open .selected-identity{row-gap:2px}
 /* Collapsed, the same band is the other half of the same fault. --rank-room already resolves to 0px
    here: head, plate and note take 239 of a 390-tall screen, the strip and the footer take the last
    104, and the arithmetic in this sheet says there is no room for a list. The board drew one anyway,
    97px of it, starting 50px inside the strip, where the one genuine earned #1 row measured zero hits
    in five probes because the strip paints over it. A row nobody can reach is not information. So the
    board keeps its heading, its count and its Expand control, and the list arrives when the viewer
    asks for it, on the overlay that now has the whole screen to put it on. The queue behind it is
    already in RQ Rank order, which is what the list would have said. */
 .rq-homepage .rich-list-zone:not(.is-expanded) .rank-object-foot{display:none}
 .rq-homepage .rich-list-zone:not(.is-expanded) .rank-object{padding:5px 6px}
 .rq-homepage .rich-list-zone:not(.is-expanded) .rank-object-top{padding-bottom:0;border-bottom:0}
}

/* The count line clamps to two lines, and at 390 expanded the fact it exists to carry, the
   freshness, was the third. It gets the line. */
.rq-homepage .rich-list-zone.is-expanded #rank-count{-webkit-line-clamp:3}

/* Open, the ranking board stayed a 200px chip on a 390px screen: the project column got 42px for a
   name, a description and a context line, so a row read "CAIBI / We bu… / RQ 0…" and the board that
   is meant to be worth appearing on looked broken. Opening it is a disclosure the viewer asked for,
   and the card already steps aside for it below 851, so it takes the width it needs. */
@media(max-width:850px){
 /* Its top was a hard-coded 312px, the one offset in this file that is not arithmetic on measured
    heights, which left the open board 145px of list over 586px of rows: one row of eight. Opening it
    is a disclosure the viewer asked for and it is an opaque overlay, so it starts under the header
    and takes the room down to the strip. */
 .rq-homepage .rich-list-zone.is-expanded{width:calc(100vw - 16px);max-width:calc(100vw - 16px);left:8px;right:8px;top:calc(var(--rq-head-h,114px) + 8px);z-index:29}
 .rq-homepage .rich-list-zone.is-expanded .rich-row{grid-template-columns:22px 26px minmax(0,1fr) auto}
 .rq-homepage .rich-list-zone.is-expanded .rich-project{min-width:0}
 .rq-homepage .rich-list-zone.is-expanded .rich-project strong,
 .rq-homepage .rich-list-zone.is-expanded .rich-project small,
 .rq-homepage .rich-list-zone.is-expanded .rank-context{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
}

/* An open board covers the copy plate, the live-state note and the world's controls on purpose: it
   is a disclosure the viewer asked for and Collapse or Escape puts it away. At 94% opacity the text
   underneath ghosted through it, which turns a deliberate overlay into a rendering fault. Open, it
   is opaque, so what it covers is covered rather than half-shown. */
.rq-homepage .rich-list-zone.is-expanded{background:var(--rq-panel)}
.rq-homepage .rich-list-zone.is-expanded .rank-object{background:var(--rq-panel)}

/* ── Giving the world back some room on a phone ──────────────────────────────
   The interface covered 53.8% of the world at 390, and the review counted six
   panels stacked over it. Two of those are answered here without inventing a
   word of copy.

   The premise line is explanatory prose, and the brief is explicit that Home is
   not an explainer page and that real projects should do most of the
   communication. It is already off below 900 by 700. Below 520 it costs 36px of
   a world the interface already owns half of, so it goes there too. The page
   keeps its own two lines, the leader and the earned-order line, at every width. */
@media(max-width:520px){
 /* The premise is the page's h1, so where it is off it leaves the screen, not the document. */
 .rq-homepage .world-premise{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
}

/* The world's two camera buttons stacked into an 86px column where a 40px row
   does the same job. They sit side by side below 851, as they already do on a
   short screen. */
@media(max-width:850px){
 .rq-homepage .world-camera,
 .rq-homepage .world-camera:has(.world-flyover:not([hidden])){flex-direction:row;align-items:center;gap:6px;width:auto}
}

/* The way back out of a camera you have dragged into a wall was a bare 40px crosshair below 851,
   sitting beside a tour button carrying its full name. The tour already solved this: the short form
   is a leading substring of the spoken name, so the printed and spoken labels stay the same control.
   Measured at 390 the camera row becomes about 146px and the drag caption keeps 220, which is still
   the two lines it already wrapped to. */
.rq-homepage #world-recentre .recentre-short{display:none}
@media(max-width:850px){
 .rq-homepage #world-recentre .recentre-label:not(.recentre-short){display:none}
 .rq-homepage #world-recentre .recentre-short{position:static;display:inline;width:auto;height:auto;margin:0;padding:0;overflow:visible;clip-path:none;clip:auto;font:600 11px/1 Geist,sans-serif;white-space:nowrap}
 .rq-homepage #world-recentre{display:inline-flex;align-items:center;gap:6px;width:auto;min-width:0;padding:0 10px 0 8px;border-radius:20px}
}

/* ── One object at the top of a phone, not two ───────────────────────────────
   The copy plate and the live-state note were two separately-positioned boxes
   with their own backgrounds, four pixels apart, saying two halves of the same
   thing: what this is, and whether what you are looking at is real. Below 851
   they become one panel, the note flush under the plate as its own caption line,
   sharing a surface and a pair of edges. The note's top comes from the plate's
   measured height rather than a guess, because the plate is one line at 390 and
   two at 834. Nothing is removed: the sentence, its dismiss control and the
   plate's own two lines all stay. */
@media(max-width:850px){
 .rq-homepage .world-copy{border-radius:6px 6px 0 0;width:auto;max-width:calc(100% - 16px)}
 .rq-homepage .simulation-note{top:var(--rq-plate-bottom,245px);left:8px;right:8px;text-align:left}
 .rq-homepage .simulation-note{display:flex;align-items:stretch}
 .rq-homepage .simulation-note span{flex:1 1 auto;display:block;min-width:0;max-width:none;padding:5px 10px 7px;border-radius:0 0 0 6px;background:var(--panel);color:var(--panel-ink);text-shadow:none;font:500 12px/1.4 Geist,sans-serif}
 /* The dismiss control had its own background and its own rounded edge, drawn for a note that used
    to stand alone. Inside one panel it read as a second box hanging off the side, so it shares the
    panel's surface and closes its corner. */
 .rq-homepage .note-dismiss{align-self:stretch;width:40px;min-height:0;height:auto;margin:0;border-radius:0 0 6px 0;background:var(--panel);color:var(--panel-ink)}
}

/* Below 851 the board's subtitle, "Score out of 100 · 7-day move", is hidden for room, which leaves
   59.7 and +4 on screen with no key to what they are. The unit goes on the number instead of in a
   line of its own, where it costs nothing and cannot be hidden separately from the thing it
   explains. The screen-reader text already said it; now the screen does too. */
@media(max-width:850px){
 .rq-homepage #rich-list .rich-row .rich-score::after{content:'/100';margin-left:1px;font-size:.72em;font-weight:600;opacity:.72}
}

/* The board carried two links to /rq-rank/ inside one 330px object: "View all" in its header and
   "All rankings" in its footer, so the footer's was switched off. At every width, which took the
   count from two to none on a phone: the header's is display:none at 850 and under, so the board
   object had no route at all to the ranking it is a window onto, while at 1440 it had one. A
   duplicate is only a duplicate where the other one is on the page. */
@media(min-width:851px){
 .rq-homepage .rank-object-foot a[href="/rq-rank/"]{display:none}
}

/* Touch convention is a 44px target. The Pot and the strip's way out were 32 and 26 high on a phone,
   which clears the 24px minimum and misses the convention on the one device where it matters most. */
/* Gating this on (pointer:coarse) left any touch device that reports a fine pointer with the 32px
   box, which is the case the rule exists for. Below 851 the target is 44px whatever the pointer
   says it is. */
@media(max-width:850px){
 .rq-homepage .header-pot{min-height:44px}
 .rq-homepage .queue-strip-head a{min-height:44px}
}

/* --rq-plate-w is declared from 601px up, and the rule that applies it lives inside the 851px block,
   so between 601 and 850 the ranking board took the token from its own rule while the plate and the
   note above it did not. The plate then shrink-to-fits the premise, a 22-word sentence with no
   max-width, and becomes an 818px slab at 834 that is about 39% filled: the page's own voice as a
   letterbox bar across the top of the scene, covering 18.3% of the world. The column has one width.
   This is the same fault the sheet already fixed for the board and never carried up to the two
   objects above it. */
@media(min-width:601px) and (max-width:850px){
 .rq-homepage .world-copy{width:var(--rq-plate-w);max-width:var(--rq-plate-w)}
 .rq-homepage .simulation-note{right:auto;width:var(--rq-plate-w);max-width:var(--rq-plate-w)}
 .rq-homepage .world-premise{max-width:none}
}

/* Open on a phone the board started under the header and took the "None of it is real" sentence off
   the screen while fabricated projects were on it, so it was pushed down to start below the note.
   That answered the honesty rule and broke the object: pinned to the note's lower edge with its own
   height left to its content, the board ran 113px off the bottom of a 390px-tall landscape screen and
   opened to 120px of list against 570px of rows, one row of eight. The premise was wrong. The note
   guards fabricated projects that are on screen, and an opaque board bounded top and bottom covers
   the world while it is open, so none are. Both edges are fixed here, so the board is the same shape
   whatever it holds, it always covers what it is measured against, and inertUnder() takes the Tab
   stops of everything underneath it. Collapse or Escape brings the note and the world straight back. */
@media(max-width:850px){
 .rq-homepage .rich-list-zone.is-expanded{--rq-board-overlay:1;top:calc(var(--rq-head-h,114px) + 8px);bottom:calc(var(--rq-floor,40px) + 8px);height:auto;max-height:none}
}

/* A real ticket's card carries the project's mark, so its text begins 45px from the card's left edge; the
   unissued places carried no mark and began at 6px, which gave the strip a ragged internal left edge down
   its whole length. The place reserves the same box. It is empty and dashed, which is the language this
   card already uses for a number nobody has taken, and it invents no brand for a project that does not
   exist yet. */
.rq-homepage .queue-ticker-card .selected-logo.is-unissued{display:block;flex:0 0 auto;border:1px dashed var(--rq-line-strong);border-radius:4px;background:none}

/* The caller and the drag caption share the foot of the world, and the caller is the wider of the two.
   While it is speaking it owns that line. */
body.rq-homepage[data-caller="on"] #queue-help{display:none}

/* The strip's own failure line, in the track where the cards would be, matching what the board and the
   card already do rather than inventing a third treatment. */
.rq-homepage .ticker-unavailable{margin:0;padding:0 4px;align-self:center;font:12px/1.45 Geist,sans-serif;color:var(--rq-ink-2)}
.rq-homepage .ticker-unavailable a{color:var(--rq-gold);white-space:nowrap}

/* The panels stood down. The set is exactly the one inertUnder() already knows as "drawn on the world":
   the copy plate, the live-state note, the ranking board, the project card and the drag caption. The
   header, the ticket strip and the footer are the page around the world rather than panels on it, so they
   stay. The control itself lives in the camera group and stays put, because a viewer who has hidden
   everything needs the way back in the same place they found the way out. */
body.rq-homepage.has-bare-world .world-copy,
body.rq-homepage.has-bare-world #simulation-note,
body.rq-homepage.has-bare-world .rich-list-zone,
body.rq-homepage.has-bare-world .queue-preview,
body.rq-homepage.has-bare-world #queue-help{display:none!important}
.rq-homepage #world-bare[aria-pressed="true"]{background:var(--rq-yellow);color:var(--rq-on-yellow,#10171d);border-color:var(--rq-yellow)}

/* Home's dialogs follow the page's theme, like every other surface on the site.
   `dialog{background:var(--paper)}` in rq.css resolves against the legacy alias set, which is a coherent
   light palette literally named paper. Interior pages, the owner console, the forms and the stats page are
   already correct, because `.rq-interior` in site-finish.css remaps that whole alias set onto the
   theme-aware --rq-* tokens. Home is not an interior page and never got the remap, so in dark mode its
   four dialogs painted as white sheets on a dark page: readable, since the ink inside is the matching dark
   ink, but the one surface on the site that ignored the theme, and the purchase dialog is not the place to
   make a visitor doubt where they are. The remap is scoped to the dialogs rather than declared on the
   page, so nothing outside them changes, and it mirrors the interior list value for value instead of
   inventing a second dark palette. Owner asked for consistency, 30 September 2026.
   One edge, not both: rq.css lifts the sheet with a 60px shadow, which on a dark page does nothing a
   viewer can see, and pairing it with the border this needs is the hairline-plus-diffuse-shadow signature
   the detector rejects. It found that the moment I added the border, which is the detector doing its job.
   The sheet is defined by its edge and the dimmed backdrop behind it. */
.rq-homepage dialog{
 --frame:var(--rq-bg);--fog:var(--rq-panel-2);--card:var(--rq-panel);--paper:var(--rq-panel);--paper-2:var(--rq-panel-2);
 --ink:var(--rq-ink);--ink-2:var(--rq-ink-2);--ink-3:var(--rq-ink-3);--muted:var(--rq-ink-3);--faint:var(--rq-ink-3);
 --line:var(--rq-line);--hairline:var(--rq-line);--hairline-strong:var(--rq-line-strong);--paper-line:var(--rq-line);
 --sky:var(--rq-panel-2);--sky-tint:var(--rq-panel-2);--sky-line:var(--rq-line);--sky-white:var(--rq-panel);--sky-deep:var(--rq-line-strong);
 --accent:var(--rq-yellow);--accent-deep:var(--rq-yellow);--orange:var(--rq-yellow);--orange-deep:var(--rq-yellow);
 --orange-text:var(--rq-yellow-text);--orange-ink:var(--rq-on-yellow);--orange-tint:var(--rq-panel-2);
 --green:var(--rq-up);--green-ink:var(--rq-up);--red:var(--rq-down);--track:var(--rq-track);
 background:var(--rq-panel);color:var(--rq-ink);border:1px solid var(--rq-line-strong);box-shadow:none
}

/* The controls painted on that surface have to follow it. rq.css sets `input,select,textarea{background:#fff}`
   as a literal, so remapping the dialog's ink alone left every field white with cream text on it: measured
   1.09:1, which is a checkout form a buyer cannot read what they typed into. The text-node sweep missed it
   because an empty field has no text node to measure, and the fields are empty until somebody types. Same
   fault class as the leader row: the surface was taught the theme and the things drawn on it were not.
   background-color, not the background shorthand: the shorthand resets background-repeat and position and
   tiles the select's chevron across the whole control, which is the exact mistake this file already
   documents forty lines above, on the rank filters. Writing it a second time is how a known fault class
   comes back, and the screenshot is what caught it, because no contrast number can see a tiled chevron. */
.rq-homepage dialog input,.rq-homepage dialog select,.rq-homepage dialog textarea{background-color:var(--rq-panel-2);color:var(--rq-ink);border-color:var(--rq-line-strong)}
.rq-homepage dialog option{background:var(--rq-panel);color:var(--rq-ink)}
.rq-homepage dialog input::placeholder,.rq-homepage dialog textarea::placeholder{color:var(--rq-ink-3)}
/* The chevron is a data URI with a fixed stroke, so it cannot follow a token. Dark keeps the line colour
   the rank filters already use on a dark plate; a light scheme puts rq.css's ink chevron back. */
:root:not([data-theme="light"]) .rq-homepage dialog select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23AAB6C2' stroke-width='1.8'/%3E%3C/svg%3E")}
@media (prefers-color-scheme:light){:root:not([data-theme="dark"]) .rq-homepage dialog select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%230E1F2E' stroke-width='1.8'/%3E%3C/svg%3E")}}

/* 3 October 2026, owner: "the left side is a mess", "the text in the main container is far too basic
   and too much", "you only have room for 2/3 items in the list". Above 851 the left side is now one
   column read top to bottom: the copy plate, the Simulation note under it when it shows, and the ranking
   filling everything from there to the General Admission strip.
   Every edge is measured (--rq-plate-bottom and --rq-note-bottom, published by home-experience.js), not
   a constant: the note sat at a fixed 246px and the board at a fixed 312px while the plate ended at 274,
   so the note slid under the plate and the board kept three rows of a screen with room for ten.
   The plate carries the premise as the page's headline and the one line that says how the queue is
   ordered. The leader line goes on wide screens because the board's first row, directly under it, says
   the same thing with the logo and the score. The plates are opaque: at 94 per cent the world's own
   lettering showed through the headline. */
@media(min-width:851px){
 .rq-homepage{--rq-left-w:300px}
 .rq-homepage .world-copy{width:var(--rq-left-w);max-width:var(--rq-left-w);box-sizing:border-box;padding:12px 12px 4px 14px;background:var(--rq-panel)}
 .rq-homepage .world-copy .world-premise{display:block;max-width:none;margin:0 0 6px;font:650 19px/25px Geist,sans-serif;letter-spacing:-.012em;color:var(--rq-ink);text-wrap:balance}
 .rq-homepage .world-copy .world-lede{display:none}
 .rq-homepage .world-copy .queue-purpose{margin:0;font:500 12px/17px Geist,sans-serif;color:var(--rq-ink-2)}
 .rq-homepage .world-copy .world-explain{min-height:36px;margin:0 9px 0 0}
 .rq-homepage .world-copy .world-explain+.world-explain{margin:0}
 .rq-homepage .simulation-note{position:fixed;top:calc(var(--rq-plate-bottom,180px) + 6px);left:12px;right:auto;width:var(--rq-left-w);max-width:var(--rq-left-w)}
 .rq-homepage .simulation-note{display:flex;align-items:stretch;gap:0}
 .rq-homepage .simulation-note>span,.rq-homepage .simulation-note span{flex:1 1 auto;display:block;min-height:0;max-width:none;padding:6px 4px 6px 10px;border-radius:6px 0 0 6px;background:var(--rq-panel);color:var(--rq-ink-2);text-shadow:none;font:500 12px/17px Geist,sans-serif}
 .rq-homepage .simulation-note>span:last-child{border-radius:6px}
 .rq-homepage .note-dismiss{align-self:stretch;width:36px;min-height:0;height:auto;margin:0;border-radius:0 6px 6px 0;background:var(--rq-panel);color:var(--rq-ink-2)}
 .rq-homepage .rich-list-zone:not(.is-expanded){top:calc(max(var(--rq-plate-bottom,180px),var(--rq-note-bottom,0px)) + 8px);bottom:calc(var(--rq-floor,40px) + var(--ticker,68px) + 8px);left:12px;width:var(--rq-left-w);max-width:var(--rq-left-w);height:auto;background:var(--rq-panel)}
 /* immersive-home.css holds the zone at display:block !important, so the board fills it by height. */
 .rq-homepage .rich-list-zone:not(.is-expanded) .rank-object{box-sizing:border-box;height:100%;max-height:none;min-height:0}
 .rq-homepage .rich-list-zone:not(.is-expanded) .rank-object-top{display:grid;grid-template-columns:auto minmax(0,1fr) auto;column-gap:8px;row-gap:0;align-items:center;padding:0 3px 6px}
 .rq-homepage .rich-list-zone:not(.is-expanded) .rank-object-top>div{display:contents}
 .rq-homepage .rich-list-zone:not(.is-expanded) .rank-object-title{grid-area:1/1}
 .rq-homepage .rich-list-zone:not(.is-expanded) #rank-count{grid-area:1/2;margin:0;font:500 12px/17px Geist,sans-serif;color:var(--rq-ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
 .rq-homepage .rich-list-zone:not(.is-expanded) #rank-toggle{grid-area:1/3}
 .rq-homepage .rich-list-zone:not(.is-expanded) #rank-object-subtitle{grid-area:2/1/3/4;margin:0}
 .rq-homepage .rich-list-zone:not(.is-expanded) #rank-toggle{min-height:32px}
 .rq-homepage .rich-list-zone:not(.is-expanded) #rank-updated{grid-area:3/1/4/3;display:block;font:12px/17px Geist,sans-serif;color:var(--rq-ink-3)}
 .rq-homepage .rich-list-zone:not(.is-expanded) .rank-full-link{display:inline-flex;grid-area:3/3;min-height:24px;justify-self:end;font:600 12px/17px Geist,sans-serif;color:var(--rq-gold)}
 /* The samples' heading in sentence case fits one line of the column instead of two. */
 .rq-homepage .rich-list-zone:not(.is-expanded) .rank-samples-note{font:600 12px/16px Geist,sans-serif;letter-spacing:0;text-transform:none}
 /* An earlier rule capped the closed list at four rows. The board's height now comes from the screen,
    and snapRankList trims what it holds to whole rows. */
 .rq-homepage .rich-list-zone:not(.is-expanded) #rich-list{flex:1 1 auto;max-height:none;min-height:0;overflow:hidden}
 .rq-homepage .rich-list-zone:not(.is-expanded) .rank-object-foot{margin-top:auto}
}
/* A board with only a few rows hugs them. Stretched to the strip in a sparse Live state, one ranked
   project sat on top of 250px of empty white; the world shows below a short board instead. */
@media(min-width:851px){
 .rq-homepage .rich-list-zone:not(.is-expanded):not(:has(.rank-sample-block)):not(:has(.rich-row:nth-child(4))){bottom:auto}
 .rq-homepage .rich-list-zone:not(.is-expanded):not(:has(.rank-sample-block)):not(:has(.rich-row:nth-child(4))) .rank-object{height:auto}
}
@media(min-width:851px) and (max-width:1439px){
 .rq-homepage .world-copy .world-premise{font:650 17px/22px Geist,sans-serif}
 .rq-homepage .world-copy .world-explain{min-height:28px}
}
@media(min-width:1440px){.rq-homepage{--rq-left-w:330px}.rq-homepage .world-copy .world-premise{font:650 21px/27px Geist,sans-serif}}
@media(min-width:1800px){.rq-homepage{--rq-left-w:380px}.rq-homepage .world-copy .world-premise{font:650 24px/30px Geist,sans-serif}}

/* 4 October 2026: "only room for 2/3 items" held below 851 as well, where the board showed one row because the
   two-row cap above also had to hold the samples' heading. On a screen tall enough to spare it, the board shows
   up to three projects; short and landscape screens keep the world. snapRankList still trims to whole rows. */
@media(max-width:850px) and (min-height:700px){
 .rq-homepage{--rank-h:min(236px,var(--rank-room,236px))}
 .rq-homepage .rich-list-zone:not(.is-expanded) #rich-list{max-height:176px}
}
/* The two plate links space themselves on the right, so when the second wraps it starts at the edge
   instead of 16px in. */
.rq-homepage .world-copy .world-explain{margin:0 12px 0 0}.rq-homepage .world-copy .world-explain+.world-explain{margin:0}
/* At 1024 the floor's one sentence broke after "permanent", leaving "Ticket." alone on a second line. */
/* The header carries My Account above 851, so the floor does not repeat it; that is the room the sentence needs. */
@media(min-width:851px){.rq-homepage .rq-home-footer>span{white-space:nowrap}.rq-homepage .rq-home-footer .mobile-owner-link{display:none}}

/* 4 October 2026, owner on the copy plate: "the actual wording and the visuals dont work for me ... not in this
   area anyway". Above 851 the plate leaves the screen. The premise stays the page's h1 for screen readers and
   search, its two links go (the floor carries Three things to know, the Tour button carries Today's VIPs and
   Featured), and the column starts with the Simulation note or the board. The plate's measured bottom is now
   its 1px box at the top of the column, so the note and the board start there. */
@media(min-width:851px){
 .rq-homepage .world-copy{position:fixed;top:64px;left:12px;width:1px;max-width:1px;height:1px;padding:0;margin:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0;background:none;box-shadow:none}
 .rq-homepage .world-copy .world-explain{display:none}
}
/* Same day, owner: "phones should certainly lose the panel as it takes more space". Below 851 the plate keeps
   its place in the stack but closes to a 1px box, so every offset measured from it (--rq-plate-h,
   --rq-plate-bottom) puts the note and the board straight under the header instead of under nothing. The
   explainer stays reachable: Three things to know on the floor, How it works in the nav. */
@media(max-width:850px){
 .rq-homepage .world-copy{height:1px;min-height:0;max-height:1px;padding:0;margin:0;overflow:hidden;clip-path:inset(50%);border:0;background:none;box-shadow:none}
 .rq-homepage .world-copy .world-explain{display:none}
}
/* Landscape phones: with the plate gone the board no longer has to stand beside it in a 130px sliver. It takes
   the left column under the note, as on every other width. */
@media(max-width:850px) and (max-height:460px){
 .rq-homepage .rich-list-zone:not(.is-expanded){inset:calc(max(var(--rq-plate-bottom,120px),var(--rq-note-bottom,0px)) + 6px) auto calc(var(--rq-floor,40px) + var(--ticker,64px) + 6px) 8px;height:auto;max-height:none;width:320px;max-width:calc(100% - 16px)}
 .rq-homepage .rich-list-zone:not(.is-expanded) .rank-object{height:100%;box-sizing:border-box}
 .rq-homepage .rich-list-zone:not(.is-expanded) #rich-list{max-height:none;flex:1 1 auto;min-height:0;overflow:hidden}
}
/* The board's height above 851 is the column, top to strip. The older --rank-h cap still applied on top of
   that and stopped it 260px short on a 974px screen, so the eighth project never had room. */
@media(min-width:851px){
 .rq-homepage .rich-list-zone:not(.is-expanded){bottom:auto;height:auto;max-height:calc(100dvh - max(var(--rq-plate-bottom,180px),var(--rq-note-bottom,0px)) - var(--rq-floor,40px) - var(--ticker,68px) - 16px)}
 .rq-homepage .rich-list-zone:not(.is-expanded) .rank-object{height:auto;max-height:inherit}
 /* The board fits its rows now, so the footer sits under the last row rather than at the strip. */
 .rq-homepage .rich-list-zone:not(.is-expanded) .rank-object-foot{margin-top:0}
}

/* The row's details are separate pieces so a narrow board can drop one whole. */
.rank-context>span+span::before{content:' · '}

/* 6 October 2026, owner on the phone board: "both collapsed and expanded are messy. Important information is
   shoehorned in. Other details are cut badly and alignment is poor throughout." Measured at 390: the open
   rows still reserved the hidden portrait's 28px column, so the rank sat a gap away from its logo; the score
   column was a fixed 40px, so "/100" was clipped at the edge; "#1 overall" was wedged above the leader's
   name; the details line cut "United Kingdom" mid-word; and the age printed twice, once in the count line
   and again as "Updated 3 minutes ago" beside the Collapse button. The closed board ended its ticket line on
   "· ...". This block sets both states outright below 851 instead of patching the rules above.
   Open: rank, logo, then name, a two-line description and the ticket and category; score over move on the
   right, sized to its content. Closed: rank, logo, name over ticket, score over move. Country and category
   drop before anything is cut. The leader row's highlight already says #1. */
@media(max-width:850px){
 body.rq-homepage .rich-list-zone #rich-list.rich-list .rich-leader-label{display:none}
 body.rq-homepage .rich-list-zone #rich-list.rich-list .rich-row{grid-template-columns:22px 34px minmax(0,1fr) max-content;grid-template-rows:auto auto;align-items:center;height:auto;min-height:0;padding:10px 8px;gap:0 10px}
 body.rq-homepage .rich-list-zone #rich-list.rich-list .rich-rank{grid-area:1/1/3/2;align-self:center;font:650 13px/18px Geist,sans-serif;font-variant-numeric:tabular-nums}
 body.rq-homepage .rich-list-zone #rich-list.rich-list .rank-avatar{display:none}
 body.rq-homepage .rich-list-zone #rich-list.rich-list .rank-logo{grid-area:1/2/3/3;align-self:center;width:34px;height:34px}
 body.rq-homepage .rich-list-zone #rich-list.rich-list .rich-project{grid-area:1/3/3/4;align-self:center;display:flex;flex-direction:column;gap:2px;min-width:0}
 body.rq-homepage .rich-list-zone #rich-list.rich-list .rich-project strong{display:block;font:650 14px/18px Geist,sans-serif;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
 body.rq-homepage .rich-list-zone #rich-list.rich-list .rich-project small{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;white-space:normal;overflow:hidden;font:400 12.5px/17px Geist,sans-serif}
 body.rq-homepage .rich-list-zone #rich-list.rich-list .rank-context{display:block;font:400 12px/16px Geist,sans-serif;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
 body.rq-homepage .rich-list-zone #rich-list.rich-list .rank-context .ctx-country{display:none}
 body.rq-homepage .rich-list-zone #rich-list.rich-list .rich-score{grid-area:1/4/2/5;align-self:end;justify-self:end;text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
 body.rq-homepage .rich-list-zone #rich-list.rich-list .rich-move{grid-area:2/4/3/5;align-self:start;justify-self:end;text-align:right;white-space:nowrap}
 body.rq-homepage .rich-list-zone.is-expanded .rank-object-top{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:12px;height:auto;min-height:0;padding:0 4px 8px}
 body.rq-homepage .rich-list-zone.is-expanded .rank-object-top>div{display:block;grid-area:1/1;min-width:0}
 body.rq-homepage .rich-list-zone.is-expanded #rank-toggle{grid-area:1/2;justify-self:end}
 body.rq-homepage .rich-list-zone.is-expanded #rank-updated,body.rq-homepage .rich-list-zone.is-expanded .rank-full-link{display:none}
 body.rq-homepage .rich-list-zone.is-expanded #rank-count{display:block;margin:2px 0 0;white-space:normal}
 /* Closed */
 body.rq-homepage .rich-list-zone:not(.is-expanded) #rich-list.rich-list .rich-row{grid-template-columns:18px 24px minmax(0,1fr) max-content;min-height:40px;padding:4px 6px;gap:0 7px}
 body.rq-homepage .rich-list-zone:not(.is-expanded) #rich-list.rich-list .rich-rank{font-size:12px}
 body.rq-homepage .rich-list-zone:not(.is-expanded) #rich-list.rich-list .rank-logo{width:24px;height:24px}
 body.rq-homepage .rich-list-zone:not(.is-expanded) #rich-list.rich-list .rich-project{gap:0}
 body.rq-homepage .rich-list-zone:not(.is-expanded) #rich-list.rich-list .rich-project strong{font-size:13px;line-height:17px}
 body.rq-homepage .rich-list-zone:not(.is-expanded) #rich-list.rich-list .rich-project small,
 body.rq-homepage .rich-list-zone:not(.is-expanded) #rich-list.rich-list .rank-context .ctx-category{display:none}
 body.rq-homepage .rich-list-zone:not(.is-expanded) #rich-list.rich-list .rank-context{font-size:11.5px;line-height:15px}
 body.rq-homepage .rich-list-zone:not(.is-expanded) #rich-list.rich-list .rich-score{font-size:13px}
 /* Closed, the name and ticket get the width; the open board and the RQ Rank page carry the /100. */
 body.rq-homepage .rich-list-zone:not(.is-expanded) #rich-list.rich-list .rich-row .rich-score::after{content:none}
 body.rq-homepage .rich-list-zone:not(.is-expanded) .rank-object-top{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:8px;row-gap:0;padding:0 3px 6px}
 body.rq-homepage .rich-list-zone:not(.is-expanded) .rank-object-top>div{display:block;grid-area:1/1;min-width:0}
 body.rq-homepage .rich-list-zone:not(.is-expanded) #rank-toggle{grid-area:1/2;justify-self:end}
 body.rq-homepage .rich-list-zone:not(.is-expanded) #rank-count{display:block;margin:1px 0 0;white-space:normal;overflow:visible}
 /* The closed board shows whole rows and the Expand button says there are more, so the fade that greyed out
    the last row's ticket number goes. */
 body.rq-homepage .rich-list-zone:not(.is-expanded) #rich-list.rich-list.has-more{-webkit-mask-image:none;mask-image:none}
 body.rq-homepage .rich-list-zone:not(.is-expanded) #rank-object-subtitle,body.rq-homepage .rich-list-zone:not(.is-expanded) #rank-updated,body.rq-homepage .rich-list-zone:not(.is-expanded) .rank-full-link{display:none}
 /* The Pot's tinted strip is the header's last row, 40px, with the figure centred in it. It was a fixed 32px
    drawn at the bottom of a header that had since changed height, so the figure straddled its top edge and
    an empty band sat under it. */
 body.rq-homepage .rq-stage-header::after{height:40px}
 body.rq-homepage .header-pot{align-self:end;display:flex;align-items:center;height:40px;min-height:0}
}
/* The fold (6 October 2026): a third state, rank and logo only, in a 60px column. The header keeps
   only the fold button; Expand returns once the list is unfolded. 13 October 2026, owner: the page opens
   folded at every width so the world lands prominent, so the fold is no longer a phone-only state. */
.rank-fold{display:none}
 body.rq-homepage .rank-fold{display:inline-grid;place-items:center;width:36px;height:36px;margin:0;padding:0;border:1px solid var(--rq-line-strong,var(--rq-line));border-radius:8px;background:none;color:var(--rq-ink);font:600 20px/1 Geist,sans-serif;cursor:pointer}
 body.rq-homepage .rank-fold[hidden]{display:none}
 body.rq-homepage .rich-list-zone .rank-object-top{grid-template-columns:minmax(0,1fr) auto auto!important;column-gap:6px}
 body.rq-homepage .rich-list-zone .rank-object-top #rank-fold{grid-area:1/3}
 body.rq-homepage .rich-list-zone.is-mini:not(.is-expanded){width:60px!important;max-width:60px!important}
 body.rq-homepage .rich-list-zone.is-mini:not(.is-expanded) .rank-object-top{grid-template-columns:1fr!important;justify-items:center;padding:0 0 6px}
 body.rq-homepage .rich-list-zone.is-mini:not(.is-expanded) .rank-object-top>div,body.rq-homepage .rich-list-zone.is-mini:not(.is-expanded) #rank-toggle{display:none}
 body.rq-homepage .rich-list-zone.is-mini:not(.is-expanded) .rank-object-top #rank-fold{grid-area:1/1}
 /* Folded, the column still says what it is: the title stands on its side under the chevron. */
 body.rq-homepage .rich-list-zone.is-mini:not(.is-expanded) .rank-object-top{grid-template-rows:auto auto}
 body.rq-homepage .rich-list-zone.is-mini:not(.is-expanded) .rank-object-top::after{content:'RQ RANK';grid-area:2/1;justify-self:center;margin:6px 0 2px;writing-mode:vertical-rl;transform:rotate(180deg);font:650 10px/1 Geist,sans-serif;letter-spacing:.08em;color:var(--rq-ink-2)}
 body.rq-homepage .rich-list-zone.is-mini:not(.is-expanded) #rich-list.rich-list .rich-row{grid-template-columns:16px 26px;justify-content:center;gap:0 4px;padding:4px 2px}
 body.rq-homepage .rich-list-zone.is-mini:not(.is-expanded) #rich-list.rich-list .rich-project,body.rq-homepage .rich-list-zone.is-mini:not(.is-expanded) #rich-list.rich-list .rich-score,body.rq-homepage .rich-list-zone.is-mini:not(.is-expanded) #rich-list.rich-list .rich-move,body.rq-homepage .rich-list-zone.is-mini:not(.is-expanded) .rank-samples-note,body.rq-homepage .rich-list-zone.is-mini:not(.is-expanded) .rank-object-foot{display:none}
 body.rq-homepage .rich-list-zone.is-mini:not(.is-expanded) #rich-list.rich-list .rank-logo{width:26px;height:26px}
 body.rq-homepage.has-rank-mini .simulation-note{left:80px}
 /* Above 851 the header lays the title, the count, Expand and the fold on one line: four columns, so Expand
    and the fold do not share the third (measured at 1440 both at x 272). */
 @media(min-width:851px){
  body.rq-homepage .rich-list-zone:not(.is-mini) .rank-object-top{grid-template-columns:minmax(0,1fr) auto auto auto!important}
  body.rq-homepage .rich-list-zone:not(.is-mini) .rank-object-top #rank-count{grid-area:1/2}
  body.rq-homepage .rich-list-zone:not(.is-mini) .rank-object-top #rank-toggle{grid-area:1/3}
  body.rq-homepage .rich-list-zone:not(.is-mini) .rank-object-top #rank-fold{grid-area:1/4}
 }
 /* Above 851 the rows carry an avatar column and a second line; folded, they are rank and logo on one line,
    and the header's evidence line, View all link, filters, notes and footer stay out of the 60px column. */
 body.rq-homepage .rich-list-zone.is-mini:not(.is-expanded) #rich-list.rich-list .rich-row{grid-template-columns:16px 26px!important;grid-template-rows:auto!important;height:auto!important;min-height:40px}
 /* Above 851 the logo lives in the row's third column and the rank spans two rows; folded, there are two columns and one row. */
 body.rq-homepage .rich-list-zone.is-mini:not(.is-expanded) #rich-list.rich-list .rich-rank{grid-area:1/1/2/2!important;line-height:26px}
 body.rq-homepage .rich-list-zone.is-mini:not(.is-expanded) #rich-list.rich-list .rank-logo{grid-area:1/2/2/3!important}
 body.rq-homepage .rich-list-zone.is-mini:not(.is-expanded) #rich-list.rich-list .rank-avatar,body.rq-homepage .rich-list-zone.is-mini:not(.is-expanded) #rank-updated,body.rq-homepage .rich-list-zone.is-mini:not(.is-expanded) .rank-full-link,body.rq-homepage .rich-list-zone.is-mini:not(.is-expanded) .world-rank-filters,body.rq-homepage .rich-list-zone.is-mini:not(.is-expanded) #rank-metric-note,body.rq-homepage .rich-list-zone.is-mini:not(.is-expanded) #rank-refresh-note,body.rq-homepage .rich-list-zone.is-mini:not(.is-expanded) .rank-paging,body.rq-homepage .rich-list-zone.is-mini:not(.is-expanded) .rank-explanation{display:none!important}

/* 13 October 2026, owner: the world lands prominent, not behind the page's overlays. With no project chosen
   the Pick a project card is not shown at any width (phones already did this); choosing a project shows it. */
body.rq-homepage[data-queue-selected="-1"] .queue-preview,body.rq-homepage:not([data-queue-selected]) .queue-preview{visibility:hidden;pointer-events:none}
/* Tall phones: five whole rows closed, not four. */
@media(max-width:850px) and (min-height:700px){
 body.rq-homepage{--rank-h:min(296px,var(--rank-room,296px))}
 body.rq-homepage .rich-list-zone:not(.is-expanded) #rich-list.rich-list{max-height:240px}
}
/* The paused line carries a Load it button, and the world's drag layer sits over the help line. Only the
   button takes taps, so dragging the world is unchanged everywhere else. */
.rq-homepage #queue-help{z-index:26}.rq-homepage #queue-help #world-retry{pointer-events:auto;position:relative;z-index:27;min-height:32px;padding:0 4px;font:inherit;font-weight:650;color:var(--rq-gold,#7a5d00);background:none;border:0;text-decoration:underline;cursor:pointer}

/* 6 October 2026, critique of Home on phones (17/40): the bottom stack collided. "GENERAL ADMISSION" rode 6px
   up onto the "Pick a project" sheet because the strip was lifted 8px and its heading box held 44px of
   content in 17px; the sheet sat on the page saying nothing until a project was chosen; the camera row,
   switch, sheet, strip and footer touched with no gap; the footer's first link was clipped at the left
   because its links shrank below their text. Below 851 the stack is set here, on one 8px rhythm. */
body.rq-homepage.has-picked[data-world-ready="true"] #queue-help{display:none}
/* Chosen a project: the card is the information, the hint steps aside at every width. */
body.rq-homepage[data-queue-selected]:not([data-queue-selected="-1"]) #queue-help{display:none}
/* The hint is markup inside the card, which is hidden until a choice; the hint is its own fixed object and stays visible. */
.rq-homepage #queue-help{visibility:visible;max-width:min(420px,calc(100% - 24px));white-space:nowrap;padding:7px 12px;border:1px solid var(--rq-line-strong,var(--rq-line));background:var(--rq-panel,var(--rq-bg));color:var(--rq-ink);font-size:13px;box-shadow:0 4px 14px rgba(0,0,0,.12)}
/* Phones: the bottom carries the folded column, Tour and Back and the switch; the hint stands at the top right of the world, where nothing else does. */
@media(max-width:850px){body.rq-homepage #queue-help,body.rq-homepage[data-queue-selected="-1"] #queue-help{top:calc(var(--rq-head-h,128px) + 8px);bottom:auto;left:auto;right:8px;transform:none;white-space:normal;max-width:min(260px,calc(100% - 92px));text-align:left}}
@media(max-width:850px){
 body.rq-homepage .queue-strip-head{align-self:center;height:auto;max-width:none;flex:0 0 92px;width:92px;overflow:visible}
 body.rq-homepage #queue-strip-title{font:650 11px/1.2 Geist,sans-serif;letter-spacing:.02em;white-space:normal}
 body.rq-homepage .rq-home-footer nav{justify-content:flex-start;padding:0 10px}
 body.rq-homepage .rq-home-footer nav a{flex:none;white-space:nowrap}
 body.rq-homepage .queue-strip-head a{min-height:24px;display:inline-flex;align-items:center}
 /* With no project chosen the sheet is not shown, so the camera row and the switch close the gap above the strip. */
 body.rq-homepage[data-queue-selected="-1"] .world-camera,body.rq-homepage[data-queue-selected="-1"] .world-mode{transform:translateY(46px)}
 /* The board's header: title, Expand and the fold on one line; the count under them, full width. */
 body.rq-homepage .rich-list-zone:not(.is-mini) .rank-object-top>div{display:contents!important}
 body.rq-homepage .rich-list-zone:not(.is-mini) .rank-object-title{grid-area:1/1;align-self:center}
 body.rq-homepage .rich-list-zone:not(.is-mini) #rank-count{grid-area:2/1/3/4!important;margin:4px 0 0!important}
 body.rq-homepage .rich-list-zone:not(.is-mini) #rank-object-subtitle{display:none}
 body.rq-homepage .rank-sample-block{padding-left:0;padding-right:0}
 body.rq-homepage[data-queue-selected="-1"] .queue-preview,body.rq-homepage:not([data-queue-selected]) .queue-preview{visibility:hidden;pointer-events:none}
}

/* 6 October 2026, owner on the phone Home: "I asked for the list to go full height and show as many as
   possible ... Everything is too big. Can only read two at a time ... The view has to allow seeing as many
   items as possible." Below 851 the closed board now runs from under the note to 8px above the ticket
   strip, with no row cap, and its rows are one compact step smaller; snapRankList still trims to whole
   rows. The ticket strip's cards are compact too, so three or more show at once, and the next place reads
   as what it is: the next ticket, at $5. */
@media(max-width:850px){
 body.rq-homepage{--rank-h:none}
 /* Full height when there is a list to fill it; a board with one project ends after its row. */
 body.rq-homepage .rich-list-zone:not(.is-expanded){height:auto!important;bottom:auto!important;max-height:calc(100dvh - max(var(--rq-plate-bottom,180px),var(--rq-note-bottom,0px)) - 16px - var(--rq-floor,40px) - var(--ticker,64px))!important}
 body.rq-homepage .rich-list-zone:not(.is-expanded) .rank-object{height:auto!important;max-height:inherit!important;display:flex;flex-direction:column;box-sizing:border-box}
 body.rq-homepage .rich-list-zone:not(.is-expanded) #rich-list.rich-list{max-height:none!important;flex:1 1 auto;min-height:0}
 body.rq-homepage .rich-list-zone:not(.is-expanded) #rich-list.rich-list .rich-row{min-height:34px;padding:2px 6px;gap:0 7px}
 body.rq-homepage .rich-list-zone:not(.is-expanded) #rich-list.rich-list .rich-project strong{font-size:12.5px;line-height:15px}
 body.rq-homepage .rich-list-zone:not(.is-expanded) #rich-list.rich-list .rank-context{font-size:11px;line-height:13px}
 body.rq-homepage .rich-list-zone:not(.is-expanded) #rich-list.rich-list .rich-score{font-size:12.5px;line-height:15px}
 body.rq-homepage .rich-list-zone:not(.is-expanded) #rich-list.rich-list .rich-move{font-size:11px;line-height:13px}
 body.rq-homepage .rich-list-zone:not(.is-expanded) #rich-list.rich-list .rank-logo{width:22px;height:22px}
 body.rq-homepage .rich-list-zone:not(.is-expanded) .rank-samples-note{margin:4px 0 2px;padding:4px 6px 0}
 body.rq-homepage .queue-ticker-card{min-width:132px!important;max-width:160px!important;height:44px!important;padding:3px 8px 3px 4px!important;gap:6px!important}
 body.rq-homepage .queue-ticker-card .logo{width:34px!important;height:34px!important;flex:none}
 body.rq-homepage .queue-ticker-card strong{font-size:12.5px!important;line-height:15px!important}
 body.rq-homepage .queue-ticker-card small{font-size:11px!important;line-height:13px!important}
}
@media(max-width:850px){
 /* The camera row clears the board's 208px edge: Tour, Back and Hide in 166px. */
 body.rq-homepage .world-camera{gap:4px!important}
 body.rq-homepage .world-camera .world-recentre{height:36px!important;min-height:36px!important;padding:0 9px!important;gap:5px!important;font-size:12px!important}
 body.rq-homepage .world-camera .world-recentre svg{width:15px!important;height:15px!important}
 /* Narrower tickets and a slim Pause, so the strip shows more than one and a half cards. */
 body.rq-homepage .queue-strip-head{flex-basis:82px!important;width:82px!important}
 body.rq-homepage .queue-ticker-card{min-width:112px!important;max-width:138px!important;gap:5px!important}
 body.rq-homepage .queue-ticker-card .logo{width:30px!important;height:30px!important}
 body.rq-homepage .queue-strip .ticker-motion{padding:0 6px!important;font-size:11px!important;min-width:0!important}
}
/* 6 October 2026, owner: "The bottom ticker is unacceptable only showing 2. Height isn't the issue. Text size
   should be reduced if needed." Below 851 the strip is two rows: a slim head row (General Admission, All
   tickets, Pause) and the tickets under it at the full width, as tiles: logo over name over number, 74px
   wide, so five show on a 390 screen. */
@media(max-width:850px){
 body.rq-homepage{--ticker:96px}
 body.rq-homepage .queue-strip{display:grid!important;grid-template-columns:minmax(0,1fr) auto!important;grid-template-rows:24px auto!important;align-items:center;column-gap:8px;row-gap:2px;height:auto!important;min-height:0!important;padding:4px 8px 6px!important}
 body.rq-homepage .queue-strip-head{grid-area:1/1!important;display:flex!important;flex-direction:row!important;align-items:baseline!important;gap:10px!important;width:auto!important;flex-basis:auto!important;max-width:none!important;height:auto!important}
 body.rq-homepage #queue-strip-title{white-space:nowrap!important}
 body.rq-homepage .queue-strip-head a{min-height:24px}
 body.rq-homepage .queue-strip .ticker-motion{grid-area:1/2!important;height:24px!important;min-height:24px!important;align-self:center}
 body.rq-homepage .queue-strip{width:100%!important;max-width:100vw!important;box-sizing:border-box;overflow:hidden}
 body.rq-homepage .queue-ticker-viewport{grid-area:2/1/3/3!important;height:auto!important;min-width:0;width:100%;overflow-x:auto;overflow-y:hidden}
 body.rq-homepage .queue-ticker-card{flex-direction:column!important;justify-content:center!important;align-items:center!important;text-align:center;min-width:74px!important;max-width:74px!important;width:74px!important;height:64px!important;padding:4px 3px!important;gap:3px!important}
 body.rq-homepage .queue-ticker-card .logo{width:28px!important;height:28px!important}
 /* A tile has room for the number, not "· Sample" after it: a sample tile is marked by its dashed edge instead,
    the same mark the board uses, under the Simulation note that already says what the samples are. */
 body.rq-homepage .queue-ticker-card .ticker-sample{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
 body.rq-homepage .queue-ticker-card.is-sample{border-style:dashed!important}
 /* The strip is taller, so the camera row and the switch drop less when no project is chosen. */
 body.rq-homepage[data-queue-selected="-1"] .world-camera,body.rq-homepage[data-queue-selected="-1"] .world-mode{transform:translateY(10px)!important}
 body.rq-homepage .queue-ticker-card .ticker-copy{display:flex;flex-direction:column;align-items:center;min-width:0;max-width:100%}
 body.rq-homepage .queue-ticker-card strong{font-size:11px!important;line-height:13px!important;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
 body.rq-homepage .queue-ticker-card small{font-size:11px!important;line-height:13px!important;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
}
/* The ticket card a resting pointer or keyboard focus shows above a strip ticket. */
.ticket-tip{position:fixed;z-index:60;width:min(280px,calc(100vw - 16px));box-sizing:border-box;padding:10px 12px;border:1px solid var(--rq-line);border-radius:10px;background:var(--rq-panel);color:var(--rq-ink);box-shadow:0 10px 30px rgba(0,0,0,.28);pointer-events:none;font:13px/1.4 Geist,sans-serif}
.ticket-tip[hidden]{display:none}
.ticket-tip-head{display:flex;align-items:center;gap:10px}
.ticket-tip-head .ticket-tip-logo{width:36px;height:36px;flex:none}
.ticket-tip-head strong{display:block;font:650 14px/1.25 Geist,sans-serif}
.ticket-tip-head small{display:block;font:12px/1.3 Geist,sans-serif;color:var(--rq-ink-2)}
.ticket-tip p{margin:8px 0 0;color:var(--rq-ink);display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}
.ticket-tip dl{margin:6px 0 0}.ticket-tip dd{margin:0;font:12px/1.4 Geist,sans-serif;color:var(--rq-ink-2)}
/* The strip's one-way loop: a short fade covers the return to the first ticket. */
.rq-homepage .queue-ticker-viewport{transition:opacity .35s ease}.rq-homepage .queue-ticker-viewport.is-wrapping{opacity:0}