/* YOUR DESIGN (office-design.js): the EX-EMPLOYEES builder and the holder lock in the office's riveted panels. The
   picture sits in a riveted steel frame with its state under it and its keys under that, as the office's NFT comp (b5)
   draws it; the trait drawers are steel tabs and their options framed tiles beside it. The words are the collection's
   live copy. Faces only through the office tokens (the display face for keys, labels and figures, the pixel face for
   the panel titles, the body face for lines). */
.qo-design{display:grid;gap:12px}
.qo-design>.qo-empty{padding:18px 0}
.qo-design-build>h2,.qo-design-lock>h2{color:var(--o-orange);font-size:clamp(30px,3.3vw,56px)}
.qo-design-body{display:grid;grid-template-columns:minmax(300px,400px) minmax(0,1fr);gap:22px;align-items:start}

/* The picture: a riveted steel frame around a black screen, the pixels kept square. */
.qo-design-easel{display:grid;gap:12px;margin:0;min-width:0}
.qo-design-frame{position:relative;isolation:isolate;border:14px solid transparent;border-image:url(/runtime/quit/deck-art/bay.webp) 44 50 fill/18px 20px stretch}
.qo-design-frame::after{content:"";position:absolute;z-index:-1;inset:-14px;border:0 solid transparent;border-image:url(/runtime/quit/deck-art/bay.webp) 44 50/18px 20px stretch;filter:var(--o-darken,none);pointer-events:none}
.qo-design-frame canvas{display:block;width:100%;height:auto;aspect-ratio:1;image-rendering:pixelated;image-rendering:crisp-edges;background:#000;border-radius:3px;box-shadow:0 0 0 2px #000}
.qo-design-caption{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 12px}
.qo-design-plate{font:700 18px/1.25 var(--o-display);letter-spacing:.02em;color:#8fb3a1}
.qo-design-easel[data-locked="true"] .qo-design-plate{font-size:clamp(34px,3vw,48px);line-height:1;color:var(--o-green)}
.qo-design-tier{flex:none;padding:5px 8px 4px;border:2px solid currentColor;font:700 15px/1 var(--o-display);letter-spacing:.06em}
.qo-design-tier[data-tier="STAFF"]{color:var(--o-green)}
.qo-design-tier[data-tier="SENIOR"]{color:#7fd8ff}
.qo-design-tier[data-tier="MANAGEMENT"]{color:var(--o-ink)}
.qo-design-tier[data-tier="EXECUTIVE"]{color:#e8b74a}
.qo-design-tier[data-tier="LEGENDARY"]{color:var(--o-orange)}
.qo .qo-design-count{font-size:14px;color:var(--o-dim)}
.qo-design-keys{display:grid;gap:8px}
.qo-design-keys>.qo-key{width:100%;min-height:54px;font-size:18px}
.qo-design-status{color:var(--o-green);font-size:15px;line-height:1.35}
.qo-design-status:empty{display:none}
.qo-design-status[data-tone="warn"]{color:#ff8a3d}

/* The drawers: one steel tab per trait, the open one lit orange. */
.qo-design-picker{min-width:0}
.qo-design-tabs{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px}
.qo-design-tab{min-height:40px;padding:6px 10px 5px;border:2px solid #3e5041;border-radius:2px;background:#03100a;color:#9aaa9f;font:700 16px/1 var(--o-display);letter-spacing:.04em}
.qo-design-tab[aria-selected="true"]{border-color:var(--o-orange);background:#0c0702;color:var(--o-orange)}
/* The options: each tile is the design a click would make, its name and how often it appears under it. */
.qo-design-options{display:grid;grid-template-columns:repeat(auto-fill,minmax(108px,1fr));gap:8px}
.qo-design-option{position:relative;display:grid;gap:4px;align-content:start;min-width:0;padding:5px 5px 7px;border:2px solid #284d38;border-radius:3px;background:#020c07;color:var(--o-ink);text-align:center}
.qo-design-option canvas{display:block;width:100%;height:auto;aspect-ratio:1;image-rendering:pixelated;image-rendering:crisp-edges;background:#000}
.qo-design-option-name{font:700 14px/1.15 var(--o-display);letter-spacing:.03em;color:var(--o-green);overflow-wrap:anywhere}
.qo-design-option-pct{font-size:12px;line-height:1.2;color:var(--o-dim)}
.qo-design-option[aria-pressed="true"]{border-color:var(--o-orange);box-shadow:0 0 0 2px #ff650040}
.qo-design-option[aria-pressed="true"] .qo-design-option-name{color:var(--o-orange)}
.qo-design-option[aria-disabled="true"]{cursor:not-allowed}
.qo-design-option[aria-disabled="true"]>:not(.qo-design-clash){opacity:.4}
.qo-design-clash{position:absolute;left:10%;right:10%;top:30%;padding:4px 2px 3px;border:2px solid var(--o-red);background:#140303;color:var(--o-red);font:700 12px/1 var(--o-display);letter-spacing:.04em;transform:rotate(-8deg)}

/* HOLDER WHITELIST: the three steps and the keys on the left, the locked design and THE WINDOW on the right. */
.qo-design-lock{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);column-gap:28px;align-items:start}
.qo-design-lock>h2,.qo-design-line{grid-column:1/-1}
.qo .qo-design-line{margin:-6px 0 18px;color:var(--o-green);font:700 18px/1.3 var(--o-display);letter-spacing:.02em}
.qo-design-lock-main,.qo-design-lock-side{min-width:0}
.qo-design-steps{display:grid;gap:10px}
.qo-design-steps>li{display:grid;grid-template-columns:44px minmax(0,1fr);column-gap:12px;align-items:start;padding:12px 14px;border:2px solid #284d38;border-radius:4px;background:#020c07}
.qo-design-step-n{grid-row:1/3;font:700 44px/.9 var(--o-display);color:var(--o-orange)}
.qo-design-steps h3{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;font-size:20px;line-height:1.15}
.qo-design-done{display:none;padding:3px 7px 2px;border:2px solid currentColor;font-size:13px;letter-spacing:.06em}
.qo-design-steps>li[data-done="true"]{border-color:var(--o-green)}
.qo-design-steps>li[data-done="true"] .qo-design-step-n{color:var(--o-green)}
.qo-design-steps>li[data-done="true"] .qo-design-done{display:inline-block}
.qo .qo-design-steps p{margin-top:4px;font-size:15px;line-height:1.4}
.qo-design-lock-keys{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
.qo-design-lock-keys:empty,.qo-design-lock-keys:not(:has(>:not([hidden]))){display:none}
.qo-design-lock-keys>.qo-key{flex:1 1 220px;min-height:56px;font-size:18px}
.qo-design-lock-status{margin-top:12px}
.qo-design-lock-main>[data-open-wallet-slot]{margin-top:10px}
.qo-design-badge{display:grid;grid-template-columns:112px minmax(0,1fr);gap:14px;align-items:center;margin:0 0 12px;padding:10px;border:2px solid var(--o-green);border-radius:4px;background:#021309}
.qo-design-badge canvas{display:block;width:112px;height:112px;image-rendering:pixelated;image-rendering:crisp-edges;background:#000}
.qo-design-badge figcaption{font:700 22px/1.2 var(--o-display);color:var(--o-green);text-wrap:balance}
.qo-design-window{padding:12px 14px;border:2px solid #2a4033;border-radius:4px}
.qo-design-window h3{margin-bottom:6px}
.qo .qo-design-window p{padding:7px 0 6px;border-top:1px solid #22362b;font-size:15px;line-height:1.35}
.qo .qo-design-window .qo-design-warn{color:#ff8a3d}
.qo .qo-design-rule{margin-top:12px;color:#b7baab;font-size:14px;line-height:1.45}

@media(min-width:761px) and (max-width:1150px){
 .qo-design-body{grid-template-columns:minmax(240px,300px) minmax(0,1fr);gap:16px}
 .qo-design-lock{grid-template-columns:minmax(0,1fr)}
 .qo-design-lock-side{margin-top:14px}
}
/* A tablet's workspace is too narrow for the drawers beside the picture: the picture leads, the drawers run under it. */
@media(min-width:761px) and (max-width:1000px){
 .qo-design-body{grid-template-columns:minmax(0,1fr)}
 .qo-design-easel{width:100%;max-width:420px}
}
@media(max-width:760px){
 .qo-design{gap:8px}
 .qo-design-build>h2,.qo-design-lock>h2{font-size:27px}
 .qo-design-body{grid-template-columns:minmax(0,1fr);gap:16px}
 .qo-design-frame{border-width:11px;border-image-width:14px 16px}
 .qo-design-frame::after{inset:-11px;border-image-width:14px 16px}
 .qo-design-easel[data-locked="true"] .qo-design-plate{font-size:34px}
 .qo-design-keys>.qo-key{min-height:50px;font-size:16px}
 .qo-design-tabs{gap:5px}
 .qo-design-tab{min-height:36px;padding:5px 8px 4px;font-size:13px}
 .qo-design-options{grid-template-columns:repeat(auto-fill,minmax(74px,1fr));gap:6px}
 .qo-design-option{padding:4px 4px 6px}
 .qo-design-option-name{font-size:12px}
 .qo-design-option-pct{font-size:11px}
 .qo-design-clash{font-size:11px}
 .qo-design-lock{grid-template-columns:minmax(0,1fr)}
 .qo .qo-design-line{margin:-4px 0 14px;font-size:16px}
 .qo-design-steps>li{grid-template-columns:32px minmax(0,1fr);column-gap:10px;padding:10px}
 .qo-design-step-n{font-size:34px}
 .qo-design-steps h3{font-size:17px}
 .qo-design-lock-keys>.qo-key{flex-basis:100%;min-height:52px;font-size:16px}
 .qo-design-lock-side{margin-top:14px}
 .qo-design-badge{grid-template-columns:88px minmax(0,1fr)}
 .qo-design-badge canvas{width:88px;height:88px}
 .qo-design-badge figcaption{font-size:18px}
}