/* ============ PYRA EDITOR — shared full-screen validate/tweak overlay ============
   Page-agnostic: reads only CSS vars common to both index.css and studio.css
   (--bg, --line, --line2, --text, --muted, --gold, --serif, --sans, --mono,
   --ease), with a fallback panel color per page (--panel / --surface) so the
   overlay auto-themes without a second stylesheet. See CLAUDE.md. */

#pyraEditor{position:fixed;inset:0;z-index:9500;background:var(--bg);display:flex;flex-direction:column;opacity:0;visibility:hidden;transition:opacity .25s var(--ease,ease)}
#pyraEditor.open{opacity:1;visibility:visible}
#pyraEditor .ped-top{display:flex;align-items:center;gap:12px;padding:calc(12px + env(safe-area-inset-top)) 20px 12px;border-bottom:1px solid var(--line);flex-wrap:wrap}
#pyraEditor .ped-back{font-family:var(--mono);font-size:11px;color:var(--muted);border:1px solid var(--line);border-radius:8px;padding:7px 12px;background:none;cursor:pointer}
#pyraEditor .ped-back:hover{color:var(--text);border-color:var(--line2)}
#pyraEditor .ped-id{display:flex;align-items:center;gap:9px;font-size:14px;font-weight:600}
#pyraEditor .ped-id .dot{width:10px;height:10px;border-radius:50%;flex-shrink:0}
#pyraEditor .ped-status{font-family:var(--mono);font-size:10px;color:var(--muted)}
#pyraEditor .ped-prov{margin-left:auto;font-family:var(--mono);font-size:10px;border-radius:20px;padding:4px 10px;letter-spacing:.4px;white-space:nowrap}
#pyraEditor .ped-prov.v{color:#4ade80;border:1px solid rgba(74,222,128,.4);background:rgba(74,222,128,.07)}
#pyraEditor .ped-prov.p{color:#fbbf24;border:1px solid rgba(251,191,36,.4);background:rgba(251,191,36,.07)}
#pyraEditor .ped-main{flex:1;display:grid;grid-template-columns:1.05fr 1fr;min-height:0;overflow:hidden}
/* Stacking the two panes is only half the job. The rows still stretch to
   split the container's fixed height, and .ped-preview/.ped-side keep the
   overflow:auto they need side-by-side — so at 390px this produced a 331px
   window onto 1336px of preview above a 340px window onto 1658px of fields,
   two nested scroll traps, while .ped-main's own overflow:auto never had
   anything to scroll. align-content:start lets the rows take their natural
   height and hands the single scroll back to .ped-main. */
@media(max-width:860px){#pyraEditor .ped-main{grid-template-columns:1fr;overflow:auto;align-content:start}}
#pyraEditor .ped-preview{overflow:auto;padding:26px;display:flex;flex-direction:column;align-items:center;gap:14px;border-right:1px solid var(--line);background:rgba(0,0,0,.15)}
@media(max-width:860px){#pyraEditor .ped-preview{border-right:none;border-bottom:1px solid var(--line)}}
#pyraEditor .ped-frame{width:100%;max-width:440px}
#pyraEditor .ped-side{overflow:auto;padding:22px 20px 40px}
/* Must sit AFTER both base rules: same specificity, so source order decides.
   Placed next to .ped-main's stacking rule above it silently lost to the
   overflow:auto below and the panes stayed two nested scroll traps. */
@media(max-width:860px){#pyraEditor .ped-preview,#pyraEditor .ped-side{overflow:visible}}
#pyraEditor .ped-trace{font-family:var(--mono);font-size:10px;color:var(--muted);border:1px dashed var(--line);border-radius:9px;padding:8px 10px;margin-bottom:16px;line-height:1.5}
#pyraEditor .ped-trace b{color:#4ade80}
#pyraEditor .ped-lockban{border:1px solid rgba(74,222,128,.4);background:rgba(74,222,128,.06);color:#bdf0cf;border-radius:10px;padding:10px 12px;font-size:12px;margin-bottom:14px}
#pyraEditor .ped-fld{margin-bottom:14px}
#pyraEditor .ped-fl{display:flex;justify-content:space-between;font-family:var(--mono);font-size:10px;color:var(--muted);margin-bottom:5px}
#pyraEditor .ped-fc.over{color:#fbbf24}
#pyraEditor .ped-fld textarea{width:100%;background:rgba(255,255,255,.03);border:1px solid var(--line);border-radius:10px;color:var(--text);font:13px/1.5 var(--sans);padding:10px 11px;resize:vertical}
#pyraEditor .ped-fld textarea:focus{outline:none;border-color:var(--gold)}
#pyraEditor .ped-fld textarea:disabled{opacity:.55}
#pyraEditor .ped-fbar{height:3px;background:rgba(255,255,255,.08);border-radius:3px;margin-top:5px;overflow:hidden}
#pyraEditor .ped-fbar i{display:block;height:100%;background:#4ade80;transition:.2s}
#pyraEditor .ped-fbar i.over{background:#fbbf24}
#pyraEditor .ped-foot{display:flex;align-items:center;gap:12px;padding:11px 20px calc(11px + env(safe-area-inset-bottom));border-top:1px solid var(--line);flex-wrap:wrap}
#pyraEditor .ped-warn{flex:1;font-family:var(--mono);font-size:10.5px;color:#fbbf24;line-height:1.4;min-width:200px}
#pyraEditor .ped-acts{display:flex;gap:8px;margin-left:auto}
#pyraEditor .ped-btn{font:600 12.5px var(--sans);border-radius:9px;padding:9px 14px;border:1px solid var(--line);color:var(--muted);background:none;cursor:pointer}
#pyraEditor .ped-btn:hover{color:var(--text);border-color:var(--line2)}
#pyraEditor .ped-btn.primary{background:var(--gold);color:#1a0c04;border-color:transparent;font-weight:700}
#pyraEditor .ped-btn.primary:hover{filter:brightness(1.08)}
#pyraEditor .ped-btn:disabled{opacity:.45;cursor:default}
#pyraEditor .ped-done{position:relative}
#pyraEditor .ped-menu{position:absolute;bottom:calc(100% + 8px);right:0;min-width:250px;background:#101014;border:1px solid var(--line2);border-radius:12px;padding:8px;box-shadow:0 18px 50px rgba(0,0,0,.6);z-index:5}
#pyraEditor .ped-menu-h{font:600 9.5px var(--mono);letter-spacing:.22em;color:var(--dim);padding:8px 10px 6px}
#pyraEditor .ped-menu button{display:flex;width:100%;text-align:left;background:none;border:none;color:var(--text);font:500 13px var(--sans);padding:10px;border-radius:8px;cursor:pointer}
#pyraEditor .ped-menu button:hover:not(:disabled){background:rgba(232,184,75,.08)}
#pyraEditor .ped-menu button:disabled{opacity:.45;cursor:default}

/* validated badge on board cards, added by the host page's card renderer */
.ped-valid-badge{font-family:var(--mono);font-size:9px;color:#4ade80;border:1px solid rgba(74,222,128,.35);border-radius:20px;padding:2px 7px;margin-left:6px}
.ped-valid-badge.partial{color:#fbbf24;border-color:rgba(251,191,36,.4)}

/* cinelecture canvas video player (PR 2) */
#pyraEditor .ped-vp{position:relative;background:#000;border-radius:14px;overflow:hidden;border:1px solid var(--line)}
#pyraEditor .ped-vp.vert{width:280px;aspect-ratio:9/16}
#pyraEditor .ped-vp.wide{width:100%;max-width:520px;aspect-ratio:16/9}
#pyraEditor .ped-vp canvas{position:absolute;inset:0;width:100%;height:100%}
#pyraEditor .ped-vp-cap{position:absolute;left:12px;right:12px;bottom:13%;z-index:3;text-align:center;font-family:var(--mono);font-size:11.5px;line-height:1.35;color:#fff;text-shadow:0 1px 4px #000;background:rgba(0,0,0,.35);border-radius:8px;padding:6px 8px}
#pyraEditor .ped-vp-chrome{position:absolute;left:0;right:0;bottom:0;z-index:4;display:flex;align-items:center;gap:9px;padding:8px 10px;background:linear-gradient(transparent,rgba(0,0,0,.75))}
#pyraEditor .ped-vp-chrome button{width:26px;height:26px;border-radius:50%;background:rgba(255,255,255,.15);color:#fff;font-size:10px;border:none;cursor:pointer;flex-shrink:0}
/* touch-action:none is required for the pointer-drag in editor.js — without it
   the browser claims the gesture as a page pan and the scrub never starts. */
#pyraEditor .ped-vp-bar{flex:1;height:4px;background:rgba(255,255,255,.2);border-radius:3px;cursor:pointer;position:relative;touch-action:none}
/* A 4px-tall control is 1/11th of the minimum target. This grows the HIT area
   to 44px without changing a pixel of the visual. */
#pyraEditor .ped-vp-bar::before{content:'';position:absolute;left:0;right:0;top:-20px;bottom:-20px}
#pyraEditor .ped-vp-fill{position:absolute;inset:0 auto 0 0;width:0;background:var(--gold);border-radius:3px}
#pyraEditor .ped-vp-time{font-family:var(--mono);font-size:10px;color:rgba(255,255,255,.85)}
#pyraEditor .ped-sline{display:flex;gap:10px;padding:9px 10px;border:1px solid var(--line);border-radius:10px;margin-bottom:8px;background:rgba(255,255,255,.02);cursor:pointer;transition:.15s}
#pyraEditor .ped-sline.on{border-color:var(--gold);background:rgba(232,184,75,.07)}
#pyraEditor .ped-sline .st{font-family:var(--mono);font-size:9.5px;color:var(--gold);min-width:46px;padding-top:3px}
#pyraEditor .ped-sline textarea{width:100%;background:none;border:none;color:var(--text);font-size:12.5px;line-height:1.45;resize:none;padding:2px 0}
#pyraEditor .ped-sline textarea:focus{outline:none}
#pyraEditor .vo-ico{color:var(--gold);margin-right:2px}

/* (pointer:coarse) OR a narrow viewport.
   The OR matters twice over: a resized desktop browser still reports
   pointer:fine and maxTouchPoints:0, so a coarse-only query is untestable in
   any headless harness — and below 720px the layout is already the mobile
   layout, so larger targets there are consistent rather than a regression. */

/* BEFORE YOU PUBLISH — the obligations no generated field covers. Amber, not
   the green of provenance and not the red of a gate failure: this is work
   still to do, not something wrong. Rendered only when there is something to
   say (editor.js publishHtml), so an empty section never trains people to
   skip it. */
#pyraEditor .ped-pub{margin-top:20px;border:1px solid rgba(232,168,124,.22);background:rgba(232,168,124,.05);border-radius:11px;padding:12px 13px}
#pyraEditor .ped-pub-h{font-family:var(--mono);font-size:9px;letter-spacing:.16em;color:#E8A87C;margin-bottom:9px}
#pyraEditor .ped-pub-list{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:8px}
#pyraEditor .ped-pub-list li{font-size:11.5px;line-height:1.5;color:var(--muted);padding-left:14px;position:relative;overflow-wrap:anywhere}
#pyraEditor .ped-pub-list li::before{content:'▸';position:absolute;left:0;color:#E8A87C}
#pyraEditor .ped-pub-list b{color:var(--text);font-weight:500}
/* li.CLASS, not bare .CLASS: the base marker rule above is
   `.ped-pub-list li::before` — one class plus one element — which outranks a
   lone class selector, so every row rendered the same ▸ until these matched
   its specificity. Caught in the browser; a rule that exists is not a rule
   that applies. */
#pyraEditor .ped-pub-list li.ped-pub-req::before{content:'✎'}
#pyraEditor .ped-pub-list li.ped-pub-live::before{content:'!'}
#pyraEditor .ped-pub-list li.ped-pub-media::before{content:'▣'}
#pyraEditor .ped-pub-list li.ped-pub-note{color:var(--faint)}
#pyraEditor .ped-pub-list li.ped-pub-note::before{content:'⇢'}
#pyraEditor .ped-pub-spec{color:var(--faint)}

@media (pointer:coarse),(max-width:720px){
  /* Under 16px, focusing these zooms the viewport on iOS. */
  #pyraEditor .ped-fld textarea,#pyraEditor .ped-sline textarea{font-size:16px}
}

@media (pointer:coarse),(max-width:720px){
  #pyraEditor .ped-vp-chrome button{width:44px;height:44px}
  #pyraEditor .ped-back,#pyraEditor .ped-btn{min-height:44px}
}

/* The cinelecture VO opt-out — a compact pill in the engine trace row. Small
   sibling of .ped-btn, sized for an inline row rather than the action bar. */
#pyraEditor .ped-vo-toggle{font:600 11px var(--mono,monospace);letter-spacing:.04em;border-radius:7px;padding:5px 9px;border:1px solid var(--line);color:var(--muted);background:none;cursor:pointer}
#pyraEditor .ped-vo-toggle:hover{color:var(--text);border-color:var(--line2)}