/* CONTENT: STUDIO REELS IN YOUR ROTATION and MADE FOR YOU (office-content.js), built to the approved o3 comp with the
   owner's note on it (S22, 25 Oct 2026: Tiffani full height, not clipped). Sizes are the comp's at 1440 (cap heights:
   panel titles 29, column titles 16.4, status chips 11, card keys 13 CSS px); each rule below overrides the office.css
   rule of the same name. Faces only through the tokens: titles in the pixel role, column titles, chips and keys in the
   display role, card titles in the body face.
   MADE FOR YOU: where o3 crops landscape thumbnails, every picture here is whole, at its own aspect, centred in a box of
   one fixed height (166 CSS px on a computer, the rotation posters' height, 300 on a phone), so a 9:16 reel shows its
   full frame; the caption sits in o3's riveted inset under it, and a reel with no picture yet keeps its empty frame. The picture carries
   the frame itself, so no dark band shows beside a narrow picture. From 1151 px the rotation shows ten whole 9:16
   posters across (about 93x165 at 1440, the comp's poster height), so at 1440x900 the whole MADE FOR YOU lane, APPROVE
   and ASK FOR CHANGES included, sits on the first screen as o3 draws it. The panel titles, column titles, chips and card
   keys hold one line in any face (the one-line fits in office-referrals.js). */
.qo-content h2{font-size:clamp(30px,3.2vw,47px);line-height:1;margin:0 0 8px}
.qo .qo-content .qo-network-select select{min-height:44px;font:700 18px/1.2 var(--o-display);color:var(--o-green)}
.qo-chip{min-height:26px;padding:5px 6px 4px;font-size:16px;line-height:1.1}
.qo-chip a{text-decoration:none}
.qo-columns{gap:8px}
.qo-column{min-height:0;padding:4px 8px 8px}
.qo-column h3{margin:0 0 8px;font-size:23.5px;line-height:1.1}
.qo-custom{margin-bottom:10px;padding:6px}
.qo-custom-media{display:flex;align-items:center;justify-content:safe center;gap:6px;height:166px}
.qo-custom-photos{border:1px solid #304739;background:#020a05}
.qo-custom .qo-custom-media>img,.qo-custom .qo-custom-media>video,.qo-custom .qo-custom-photo>img{flex:none;width:auto;height:auto;max-width:100%;max-height:100%;aspect-ratio:auto;object-fit:contain;background:none}
.qo-custom .qo-custom-media>img,.qo-custom .qo-custom-media>video{box-sizing:border-box;border:1px solid #304739;background:#020a05}
.qo-custom .qo-custom-media>video{height:100%;aspect-ratio:9/16}
.qo-custom-photos{justify-content:flex-start;gap:0;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:thin}
.qo-custom-photo{display:flex;flex:0 0 100%;align-items:center;justify-content:center;height:100%;scroll-snap-align:center}
/* A strip of two or more photos: square page dots in the chip colours under the plate, the one in view lit. */
.qo-photo-dots{display:flex;justify-content:center;gap:8px;padding:7px 0 1px}
.qo-photo-dots>i{width:10px;height:10px;border:1px solid #4f7a5c;background:#0b1f14;cursor:pointer}
.qo-photo-dots>i[data-on]{border-color:var(--o-green);background:var(--o-green)}
/* the caption in the riveted inset o3 draws under each picture */
.qo-custom h4{margin:6px 0 0;padding:3px 6px;border:6px solid transparent;border-image:url(/runtime/quit/deck-art/bay.webp) 44 50 fill/6px stretch;font-size:14px;font-weight:400;line-height:1.35}
/* no picture yet: the empty 9:16 frame at the picture's height */
.qo-custom-empty>span{display:block;height:100%;aspect-ratio:9/16;box-sizing:border-box;border:1px solid #304739;background:#020a05 url('/runtime/quit/exit-lab-art/crt.webp') center/86% auto no-repeat;image-rendering:pixelated}
.qo-custom .qo-key{min-height:36px;margin-top:6px;padding:6px 8px 8px;font-size:18px}
@media(min-width:1151px){.qo-content .qo-reels{grid-auto-columns:calc((100% - 90px)/10)}}
.qo-custom summary.qo-key{border:2px solid #b9c9be;border-image:none;background:#020a05;color:#e6f2ea}
.qo-custom p a{color:var(--o-green)}
@media(max-width:760px){
 .qo-content h2{--qo-fit-min:22px;font-size:28px}
 .qo .qo-content .qo-network-select select{font-size:16px}
 .qo-chip{font-size:15px}
 .qo-column h3{font-size:20px}
 .qo-custom-media{height:300px}
 .qo-custom .qo-key{min-height:44px;font-size:18px}
}