/* ============================================================
   Week of AI — the announcement graphic studio, a section of the event page
   Loads after css/styles.css and css/event.css and reuses their tokens, header,
   footer, buttons, .lnk, .sec-h and .hint. ONLY studio styles belong here: this
   sheet is now pulled onto every event page, so a bare page-level selector here
   would restyle the page around it. .wrap{max-width:1180px} did exactly that,
   overriding css/event.css's 1120px and widening the whole column by 60px.
   ============================================================ */

/* The studio is the last thing on the event page and sits directly under the ticket, which ends
   in a bordered action block: without a gap of its own it reads as part of that block rather than
   as its own section. .sec only gives a bottom margin, so the space has to come from here. */
#graphic{margin-top:44px;padding-top:30px;border-top:1px solid var(--line)}

/* ---------- two columns: preview left, controls right ---------- */
.sh-grid{display:grid;grid-template-columns:minmax(0,1fr) 372px;gap:26px 44px;align-items:start}
.sh-pv-col{min-width:0}
.sh-ctl-col{min-width:0}
.sh-pv-col .sec-h,.sh-ctl-col .sec-h{margin-bottom:10px}
.sh-ctl-col .sec-h+.sh-seg{margin-top:0}

/* ---------- segmented controls ---------- */
.sh-seg{display:flex;gap:2px;flex-wrap:wrap;margin:0 0 12px}
.sh-seg button{font:inherit;font-size:12px;background:transparent;color:var(--mute);border:1px solid var(--line);padding:6px 9px;cursor:pointer;border-radius:2px;white-space:nowrap;
  transition:color .12s,border-color .12s,background .12s}
.sh-seg button::before{content:"[ "}
.sh-seg button::after{content:" ]"}
.sh-seg button:hover{color:var(--acc);border-color:var(--acc)}
.sh-seg button:focus-visible{outline:2px solid var(--acc);outline-offset:1px}
.sh-seg button[aria-pressed="true"]{color:#0b0d10;background:var(--acc);border-color:var(--acc);font-weight:700}
.sh-seg button[aria-pressed="true"]::before,.sh-seg button[aria-pressed="true"]::after{color:rgba(11,13,16,.55)}
.sh-seg.wide button{flex:1 1 0;min-width:120px;text-align:center}

/* ---------- the preview frame ---------- */
.sh-frame{position:relative;border:1px solid var(--line);background:#000;line-height:0;
  box-shadow:0 24px 60px rgba(0,0,0,.45),0 0 0 1px #000}
.sh-frame canvas{display:block;width:100%;height:auto;max-width:100%}
.sh-frame.is-story{max-width:420px;margin:0}

.sh-hint{margin:10px 0 0;color:var(--mute);font-size:12px;line-height:1.6}
.sh-note{margin:6px 0 0;color:var(--dim);font-size:11px;line-height:1.6}
.sh-note::before{content:"# ";color:var(--dim)}
.sh-status{margin:8px 0 0;color:var(--acc);font-size:11px;min-height:16px;line-height:1.5}
.sh-status:empty{min-height:0}

.sh-dl{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.sh-linkrow{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:16px;padding-top:12px;border-top:1px solid var(--line)}
.sh-linkrow code{font:inherit;font-size:12px;color:var(--acc2);overflow-wrap:anywhere;min-width:0}

/* ---------- fields ---------- */
.sh-f{margin:0 0 14px}
.sh-lab{display:flex;align-items:baseline;gap:8px;color:var(--acc);font-size:12px;font-weight:700;margin-bottom:5px}
.sh-lab .sh-opt{color:var(--dim);font-weight:400}
.sh-cnt{margin-left:auto;color:var(--dim);font-weight:400;font-size:11px;white-space:nowrap}
.sh-cnt.is-on{color:var(--mute)}
.sh-ctl{display:block;width:100%;font:inherit;font-size:13px;background:var(--bg);border:1px solid var(--line2);color:var(--bright);padding:7px 9px;border-radius:2px}
.sh-ctl::placeholder{color:var(--dim)}
.sh-ctl:focus{outline:0;border-color:var(--acc);box-shadow:0 0 0 2px var(--accdim)}
.sh-fhint{color:var(--dim);font-size:11px;margin-top:5px;line-height:1.5}

/* ---------- toggles: the checkbox pattern from the column popover ---------- */
.sh-toggles{list-style:none;margin:0 0 16px;padding:0;border:1px solid var(--line);background:var(--panel)}
.sh-row{display:flex;align-items:center;gap:8px;padding:7px 10px;border-bottom:1px solid var(--line)}
.sh-row:last-child{border-bottom:0}
.sh-row:hover{background:var(--panel2)}
.sh-row input[type="checkbox"]{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.sh-row label{display:flex;align-items:center;gap:8px;flex:none;cursor:pointer;color:var(--ink);font-size:12px;white-space:nowrap}
.sh-row .cb{color:var(--mute);flex:none}
.sh-row .cb::before{content:"[ ]"}
.sh-row input:checked + label .cb{color:var(--acc);font-weight:700}
.sh-row input:checked + label .cb::before{content:"[x]"}
.sh-row input:focus-visible + label .cb{outline:2px solid var(--acc);outline-offset:1px}
.sh-row input:not(:checked) + label{color:var(--mute)}
.sh-rowhint{margin-left:auto;padding-left:14px;color:var(--dim);font-size:11px;text-align:right;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}

.sh-foot{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding-top:12px;border-top:1px solid var(--line)}
.sh-foot .lnk{border-bottom:0}

/* the column is taller than a laptop viewport, and a sticky one that overflows can never
   be scrolled to its download row: only stick when there is room for the whole of it */
@media (min-width:961px) and (min-height:1040px){
  .sh-pv-col{position:sticky;top:20px}
}

/* ---------- responsive: stack, preview first, never overflow ---------- */
@media (max-width:960px){
  .sh-grid{grid-template-columns:minmax(0,1fr);gap:26px}
  .sh-frame.is-story{max-width:340px}
}
@media (max-width:640px){
  .sh-seg button{flex:1 1 auto;text-align:center}
  .sh-seg.wide button{min-width:0}
  .sh-dl .btn{flex:1 1 auto;text-align:center}
  .sh-rowhint{display:none}
  .sh-frame.is-story{max-width:300px}
}