/* X POSTS (owner approval, 27 Oct 2026: comp x-office-v2, a 390 px phone): the title plate or, once a reel is approved,
   the status plate with its green lamp; then one riveted plate per reel, the 9:16 poster on the left as the hero with
   its play mark, the exact post in the body face, the Paid partnership tag and the green APPROVE key. An approved reel's
   plate is framed orange, with the orange IN ROTATION plate and its ticked box, and Remove under it. Plates, keys and
   rivets are the office's own (office-chrome.css); on a desktop the reels sit two to a row with larger posters. */
.qo-x{display:grid;gap:12px}
.qo-x-head{padding:14px 18px 16px}
.qo-x-head>h2{margin:0 0 10px;font-size:clamp(40px,4.4vw,64px);line-height:1;white-space:nowrap;overflow-wrap:normal}
.qo .qo-x-line{font:400 18px/1.45 var(--o-body);color:var(--o-ink)}
.qo-x-head--on{padding-block:12px 14px}
.qo .qo-x-on{display:flex;align-items:center;gap:22px;margin:0 0 10px;color:var(--o-green);font:700 clamp(36px,3.6vw,54px)/1 var(--o-display);letter-spacing:.02em;text-shadow:0 0 10px #00ed8040}
.qo-x-light{flex:none;width:30px;height:30px;border-radius:50%;background:radial-gradient(circle at 38% 34%,#e9fff3 0 10%,var(--o-green) 42%,#007a42 100%);box-shadow:0 0 0 3px #04100a,0 0 18px 5px #00ed8066}
.qo-x-reels{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.qo-x-reel{display:grid;grid-template-columns:150px minmax(0,1fr);column-gap:18px;align-items:stretch;padding:8px 16px 8px 8px}
.qo-x-reel[data-x-state="in"]::after{box-shadow:inset 0 0 0 3px var(--o-orange),inset 0 0 0 4px #000,inset 0 0 14px #ff650033,0 0 10px #ff650055}
.qo-x-poster{position:relative;display:block;align-self:start;width:100%;aspect-ratio:9/16;margin:0;padding:0;border:2px solid #24382c;border-radius:3px;background:#020a05;overflow:hidden}
.qo-x-poster img,.qo-x-video{display:block;width:100%;height:100%;object-fit:cover}
.qo-x-video{align-self:start;aspect-ratio:9/16;border:2px solid #24382c;border-radius:3px;background:#020a05}
.qo-x-play{position:absolute;left:50%;top:50%;width:40px;height:40px;margin:-20px 0 0 -20px;border:3px solid #fff;border-radius:50%;background:#000a;box-shadow:0 0 8px #000c}
.qo-x-play::before{content:"";position:absolute;left:13px;top:9px;border:solid transparent;border-width:8px 0 8px 13px;border-left-color:#fff}
.qo-x-poster:hover .qo-x-play{background:#000d}
.qo-x-post{display:flex;flex-direction:column;min-width:0;padding-block:4px 2px}
.qo .qo-x-text{white-space:pre-line;overflow-wrap:break-word;font:400 18px/1.55 var(--o-body);color:#e3e9e4}
.qo-x-foot{display:flex;align-items:flex-end;justify-content:space-between;gap:10px 12px;flex-wrap:wrap;margin-top:auto;padding-top:14px}
.qo-x-tag{flex:none;padding:5px 8px;border:2px solid #5a685e;border-radius:4px;background:#020a05;font:400 13px/1.2 var(--o-body);color:#c2cbc4;white-space:nowrap}
.qo .qo-x-approve{flex:none;min-width:150px;min-height:56px;padding:6px 20px 10px;font-size:26px;letter-spacing:.03em}
.qo-x-in{flex:none;display:flex;flex-direction:column;align-items:center;gap:8px;margin-left:auto}
.qo .qo-x-plate{display:flex;align-items:center;gap:10px;min-height:52px;padding:6px 14px;border:3px solid var(--o-orange);border-radius:3px;background:#0d0702;box-shadow:inset 0 0 12px #ff650026,0 0 8px #ff650040;color:var(--o-orange);font:700 22px/1 var(--o-display);letter-spacing:.03em;white-space:nowrap}
.qo-x-box{position:relative;flex:none;width:24px;height:24px;border-radius:2px;background:var(--o-orange)}
.qo-x-box::before{content:"";position:absolute;left:5px;top:5px;width:12px;height:6px;border-left:3px solid #170b00;border-bottom:3px solid #170b00;transform:rotate(-45deg)}
.qo .qo-x-remove{padding:2px 4px;border:0;background:none;color:#d6ddd8;font:400 15px/1.3 var(--o-body);text-decoration:underline;text-underline-offset:4px}
.qo .qo-x-remove:disabled{cursor:wait}
@media(min-width:761px) and (max-width:1150px){.qo-x-reels{grid-template-columns:minmax(0,1fr)}}
@media(max-width:760px){
 /* the phone, measured on the comp at 390 px: the post at about 13 px in 24 to 25 characters a line, the tag and the key
    on one row under it, the title line and the status line each on one line */
 .qo-x{gap:8px}
 .qo-x-head{padding:10px 8px 12px}
 .qo-x-head>h2{margin-bottom:8px;font-size:clamp(30px,11.9vw,50px)}
 .qo .qo-x-line{font-size:clamp(12px,3.45vw,15px);line-height:1.45}
 .qo-x-head--on{padding:10px 6px 12px}
 .qo .qo-x-on{justify-content:center;gap:clamp(20px,9vw,40px);margin-bottom:8px;font-size:clamp(26px,7.6vw,34px)}
 .qo .qo-x-head--on .qo-x-line{font-size:clamp(11px,3.1vw,13.5px);text-align:center}
 .qo-x-light{width:24px;height:24px}
 .qo-x-reels{grid-template-columns:minmax(0,1fr);gap:8px}
 .qo-x-reel{grid-template-columns:clamp(100px,28.7vw,124px) minmax(0,1fr);column-gap:12px;padding:4px 8px 4px 4px}
 .qo-x-play{width:28px;height:28px;margin:-14px 0 0 -14px;border-width:2.5px}
 .qo-x-play::before{left:9px;top:5.5px;border-width:6px 0 6px 9.5px}
 .qo .qo-x-text{font-size:clamp(12px,3.42vw,14.5px);line-height:1.45}
 .qo-x-foot{gap:6px 4px;padding-top:8px}
 .qo-x-tag{padding:3px 4px;border-width:1.5px;border-radius:3px;font-size:clamp(8.5px,2.32vw,10.5px)}
 .qo .qo-x-approve{min-width:0;min-height:40px;padding:4px clamp(14px,4.6vw,20px) 7px;font-size:clamp(16px,4.6vw,20px)}
 .qo .qo-x-plate{min-height:36px;gap:6px;padding:3px 7px;border-width:2.5px;font-size:clamp(12px,3.4vw,14.5px)}
 .qo-x-box{width:16px;height:16px}
 .qo-x-box::before{left:3px;top:3.5px;width:9px;height:4.5px;border-width:0 0 2.5px 2.5px}
 .qo-x-in{gap:4px}
 .qo .qo-x-remove{font-size:clamp(11px,3.1vw,13px)}
}
/* YOUR COUNTRY (owner order, 27 Oct 2026): a slim plate under the title, its label in the office's green display face
   and the office's inset field; the gated line in the office's red. */
.qo-x-country{display:flex;align-items:center;flex-wrap:wrap;gap:8px 18px;padding:12px 18px}
.qo .qo-x-country label{margin:0;font:700 22px/1 var(--o-display);letter-spacing:.03em;color:var(--o-green)}
.qo .qo-x-country select{flex:1 1 280px;width:auto;max-width:460px;padding:10px 14px;font:400 18px/1.3 var(--o-body);color:var(--o-ink)}
.qo .qo-x-gated{flex-basis:100%;font:400 16px/1.4 var(--o-body);color:var(--o-red)}
@media(max-width:760px){
 .qo-x-country{gap:8px;padding:10px 8px}
 .qo .qo-x-country label{font-size:clamp(16px,4.6vw,19px)}
 .qo .qo-x-country select{flex-basis:100%;max-width:none;padding:9px 10px;font-size:16px}
 .qo .qo-x-gated{font-size:clamp(13px,3.7vw,15px)}
}