/* Dialogs and panels of each feature (later rules override earlier ones: keep this file last). */

/* Reuse slides dialog */
.reuse-src{margin:0 0 8px;opacity:.7;font-size:12px;word-break:break-all}
.reuse-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:10px;max-height:55vh;overflow:auto;padding:2px}
.reuse-item{position:relative;padding:0;border:2px solid var(--line2);border-radius:6px;background:none;cursor:pointer;overflow:hidden}
.reuse-item .thumb-canvas{width:160px;max-width:100%}
.reuse-item.on{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-bg)}
.reuse-num{position:absolute;left:4px;bottom:3px;font-size:11px;background:#0009;color:#fff;border-radius:3px;padding:0 4px}
/* Accessibility checker */
.a11y-list{display:flex;flex-direction:column;gap:4px;max-height:60vh;overflow:auto}
.a11y-item{display:flex;align-items:center;gap:8px;text-align:left;background:none;border:1px solid var(--line2);border-radius:6px;padding:6px 8px;cursor:pointer;color:inherit}
.a11y-item:hover{background:var(--accent-bg)}
.a11y-item .a11y-s{opacity:.65;font-size:12px;white-space:nowrap}
.a11y-ok{display:flex;align-items:center;gap:6px}
.a11y-ok .ms{color:#3a9d5d}
.a11y-item .a11y-fix{margin-inline-start:auto;padding:4px 10px;flex:none}
.a11y-h{margin:14px 0 4px;font-size:12px;text-transform:uppercase;letter-spacing:.4px;color:var(--txt2)}
.row button.eyedrop{padding:2px;min-width:0;margin-left:-4px}
.row button.eyedrop .ms{font-size:16px}
/* Theme colours & fonts */
.pal-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.pal-grid button,.fp-list button{display:flex;flex-direction:column;gap:3px;align-items:stretch;background:none;border:1px solid var(--line2);border-radius:6px;padding:4px;cursor:pointer;font-size:11px;color:var(--txt2)}
.pal-grid button:hover,.fp-list button:hover{background:var(--accent-bg)}
.pal-grid button.on,.fp-list button.on{border-color:var(--accent)}
.pal-sw{display:flex;align-items:center;gap:2px;height:30px;padding:0 5px;border-radius:4px;font-weight:700;font-size:13px}
.pal-sw i{flex:1;height:14px;border-radius:2px}
.pal-sw i:first-of-type{margin-left:4px}
.fp-list{display:flex;flex-direction:column;gap:4px;min-width:220px}
.fp-list button{text-align:left;color:var(--txt)}
.fp-list b{font-size:17px}.fp-list span{font-size:13px}.fp-list small{color:var(--txt2)}
@keyframes rvInOut{0%{opacity:0}30%,70%{opacity:1}100%{opacity:0}}
@keyframes rvPath{to{translate:var(--dx,0) var(--dy,0)}}
/* Motion path guide on the selected object */
.motion-path{position:absolute;pointer-events:none;z-index:6;overflow:visible}
body.anim-painting #stage,body.anim-painting #stage .block{cursor:copy}
/* Draw tab */
.ink-blk{width:100%;height:100%}
.ink-live{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:50;overflow:visible}
#stage.drawing,#stage.drawing .block{cursor:crosshair}
#stage.drawing.eraser,#stage.drawing.eraser .block{cursor:cell}
/* Table styles gallery */
.ts-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:10px}
.ts-grid button{display:flex;flex-direction:column;gap:4px;background:none;border:1px solid var(--line2);border-radius:6px;padding:6px;cursor:pointer;font-size:11px;color:var(--txt2)}
.ts-grid button:hover{background:var(--accent-bg)}
.ts-sample{background:#2a2e35;padding:5px;border-radius:4px}
.ts-opts{display:grid;grid-template-columns:1fr 1fr;gap:6px;font-size:13px}
.ts-opts label{display:flex;align-items:center;gap:6px}
#rehearse-clock{position:fixed;top:12px;left:14px;z-index:10000;padding:6px 12px;border-radius:8px;background:#000b;color:#fff;font:600 16px/1.2 system-ui,sans-serif;font-variant-numeric:tabular-nums}
/* Smart spacing marks (equal gaps) */
.guide.spacing{background:none}
.guide.spacing.x{height:0;border-top:1px solid #ff3b8b;right:auto;bottom:auto}
.guide.spacing.y{width:0;border-left:1px solid #ff3b8b;right:auto;bottom:auto}
.guide.spacing::before,.guide.spacing::after{content:"";position:absolute;background:#ff3b8b}
.guide.spacing.x::before,.guide.spacing.x::after{top:-5px;width:1px;height:9px}
.guide.spacing.x::before{left:0}.guide.spacing.x::after{right:0}
.guide.spacing.y::before,.guide.spacing.y::after{left:-5px;height:1px;width:9px}
.guide.spacing.y::before{top:0}.guide.spacing.y::after{bottom:0}
/* Reading order */
.ro-list{margin:0;padding-left:22px;display:flex;flex-direction:column;gap:3px;max-height:55vh;overflow:auto}
.ro-item{display:flex;align-items:center;gap:4px}
.ro-item .ro-name{flex:1;text-align:left;background:none;border:1px solid var(--line2);border-radius:6px;padding:5px 8px;cursor:pointer;color:inherit;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ro-item.on .ro-name{border-color:var(--accent);background:var(--accent-bg)}
.ro-item [data-d]{width:28px;height:28px;border:1px solid var(--line2);border-radius:6px;background:none;cursor:pointer}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
#stage:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
/* Right-to-left interface: the slide keeps left-to-right geometry. */
[dir=rtl] #canvas-wrap,[dir=rtl] #stage-sizer{direction:ltr}
[dir=rtl] .modal .modal-close{right:auto;left:10px}
/* Camera (Cameo) and recording */
.camera-blk{width:100%;height:100%;background:#223;color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;overflow:hidden;font-size:14px}
.camera-blk .ms{font-size:48px;opacity:.8}
#rec-bar{position:fixed;left:50%;bottom:18px;transform:translateX(-50%);z-index:10001;display:flex;align-items:center;gap:10px;
  padding:8px 12px;border-radius:24px;background:#1b1d22;color:#fff;box-shadow:0 4px 18px #0006;font:14px system-ui,sans-serif}
#rec-bar .rec-dot{width:10px;height:10px;border-radius:50%;background:#e53935;animation:recBlink 1s infinite}
#rec-bar .rec-time{font-variant-numeric:tabular-nums;opacity:.85}
#rec-bar button{border:0;border-radius:16px;padding:5px 12px;cursor:pointer;background:#e53935;color:#fff;font-weight:600}
#rec-bar .rec-cancel{background:#fff2;padding:5px 9px}
@keyframes recBlink{50%{opacity:.3}}
/* Slide master & placeholders */
.master-layer{position:absolute;inset:0;pointer-events:none;z-index:0;overflow:hidden}
#stage.editing-master{box-shadow:0 0 0 3px #e0873b}
#master-banner{display:flex;align-items:center;gap:10px;margin:0 0 8px;padding:6px 12px;border-radius:8px;background:#fff4e5;color:#7a4a12;font-size:13px}
#master-banner[hidden]{display:none}
#master-banner{flex-wrap:wrap}
#master-banner button,#master-banner select{border:1px solid #e0873b;background:#fff;color:#7a4a12;border-radius:6px;padding:4px 10px;cursor:pointer;font:inherit}
#master-banner .mb-text{flex:1 1 220px}
#master-banner button:disabled,#master-banner select:disabled{opacity:.45;cursor:default}
.layout-thumb.indent .layout-name::before{content:'└ ';opacity:.6}
.layout-grid .layout-master{grid-column:1/-1;font-size:11px;color:var(--txt2);text-transform:uppercase;margin-top:6px}
.layout-thumb .layout-name{font-size:11px;color:var(--txt2);padding:3px 2px 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.block .rich[data-ph]:empty::before{content:attr(data-ph);opacity:.45;font-style:italic;pointer-events:none}
.block:not(.selected):has(.rich[data-ph]:empty){outline:1px dashed #8a8a8a88}
/* Template gallery */
.gal-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px;max-height:65vh;overflow:auto;padding:2px}
.gal-item{display:flex;flex-direction:column;gap:6px;padding:0 0 6px;border:1px solid var(--line2);border-radius:8px;background:none;cursor:pointer;overflow:hidden;color:var(--txt);font-size:13px}
.gal-item .thumb-canvas{width:180px;max-width:100%;align-self:center;margin-top:6px}
.gal-item:hover{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-bg)}
#gallery-modal .modal{max-height:90vh;overflow:auto}
#gallery-modal .gal-grid{max-height:none}
#gallery-modal h4{margin:14px 0 8px;font-size:13px;color:var(--txt2);text-transform:uppercase;letter-spacing:.4px}
.gal-examples .gal-item span{display:flex;flex-direction:column;gap:2px;padding:0 8px;text-align:start}
.gal-examples .gal-item small{color:var(--txt2);font-size:11px;line-height:1.3}
/* Add-ins & macros */
.pl-list{list-style:none;margin:6px 0;padding:0;display:flex;flex-direction:column;gap:4px}
.pl-list li{display:flex;align-items:center;gap:8px}
.pl-list code{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px}
.pl-list button{border:1px solid var(--line2);background:none;border-radius:6px;cursor:pointer}
.pl-add{display:flex;gap:6px}.pl-add input{flex:1;border:1px solid var(--line2);border-radius:6px;padding:6px 8px}
.mc-out{margin:8px 0 0;font-size:12px;white-space:pre-wrap;color:var(--txt2)}
/* AI */
#ai-busy{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);z-index:10002;display:flex;align-items:center;gap:8px;
  padding:8px 14px;border-radius:20px;background:#1b1d22;color:#fff;box-shadow:0 4px 18px #0006;font:14px system-ui,sans-serif}
#ai-busy .ms{animation:recBlink 1.2s infinite}
.titlebar .donate{display:inline-flex;align-items:center;gap:4px;margin-inline-end:10px;padding:3px 10px;border-radius:14px;
  border:1px solid #e0587a;color:#c0305a;text-decoration:none;font-size:13px}
.titlebar .donate:hover{background:#fdecf1}
.titlebar .premium{display:inline-flex;align-items:center;gap:4px;margin-inline-end:8px;padding:3px 10px;border-radius:14px;text-decoration:none;font-size:13px;font-weight:600;color:#fff;background:linear-gradient(90deg,#6d5dfc,#3f6497);white-space:nowrap}
.titlebar .premium:hover{filter:brightness(1.1)}
.titlebar .premium .ms{font-size:17px}
/* Version history */
.vs-list{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-direction:column;gap:4px;max-height:55vh;overflow:auto}
.vs-item{display:flex;align-items:center;gap:6px;border:1px solid var(--line2);border-radius:8px;padding:6px 8px}
.vs-item.named{border-color:var(--accent)}
.vs-meta{flex:1;display:flex;flex-direction:column;min-width:0}
.vs-meta span{font-size:12px;color:var(--txt2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vs-item button{border:1px solid var(--line2);background:none;border-radius:6px;padding:4px 8px;cursor:pointer;color:inherit}
/* Comments */
#comments-panel,#review-panel{width:280px;flex-shrink:0;background:var(--panel);border-inline-start:1px solid var(--line2);overflow:auto;padding:10px 12px;display:flex;flex-direction:column;gap:8px}
.cm-head{display:flex;align-items:center;justify-content:space-between}
.cm-head button,.cm-actions button{border:1px solid var(--line2);background:none;border-radius:6px;cursor:pointer;padding:3px 8px;color:inherit;font-size:12px}
.cm-new{display:flex;flex-direction:column;gap:6px}.cm-new textarea{border:1px solid var(--line2);border-radius:6px;padding:6px;font:inherit;resize:vertical}
.cm-toggle{font-size:12px;color:var(--txt2);display:flex;gap:6px;align-items:center}
.cm-item{border:1px solid var(--line2);border-radius:8px;padding:8px;background:var(--panel);display:flex;flex-direction:column;gap:4px}
.cm-item.on{border-color:var(--accent)}.cm-item.resolved{opacity:.6}
.cm-meta{font-size:11px;color:var(--txt2)}.cm-text{font-size:13px;white-space:pre-wrap;overflow-wrap:anywhere}
.cm-reply{margin-inline-start:10px;padding-inline-start:8px;border-inline-start:2px solid var(--line2)}
.cm-actions{display:flex;gap:4px;justify-content:flex-end}.cm-at{color:var(--accent);font-weight:600}
.thumb-cm{position:absolute;bottom:3px;right:4px;z-index:2;background:#e0873b;color:#fff;border-radius:9px;font-size:10px;padding:0 5px;line-height:16px}
.block .cm-badge{position:absolute;top:-10px;left:-10px;z-index:9;width:20px;height:20px;border-radius:50% 50% 50% 0;background:#e0873b;color:#fff;font-size:11px;display:grid;place-items:center;pointer-events:none}
/* Mark as final */
#morph-hint{display:flex;align-items:center;gap:10px;margin:0 0 8px;padding:6px 12px;border-radius:8px;background:color-mix(in srgb,var(--accent) 12%,var(--panel));color:var(--txt);font-size:13px}
#morph-hint[hidden]{display:none}#morph-hint button{border:1px solid var(--line2);background:var(--panel);border-radius:6px;padding:3px 10px;cursor:pointer;font:inherit}#morph-hint button[data-mh=on]{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}
#final-banner{display:flex;align-items:center;gap:10px;margin:0 0 8px;padding:6px 12px;border-radius:8px;background:#e8f3ec;color:#1f5e3a;font-size:13px}
#final-banner[hidden]{display:none}
#final-banner button{margin-inline-start:auto;border:1px solid #3a9d5d;background:#fff;color:#1f5e3a;border-radius:6px;padding:4px 10px;cursor:pointer}
#final-banner.flash{animation:finalFlash .6s 2}
@keyframes finalFlash{50%{background:#ffe0a6}}
/* Phones: later rules for panels added after the main mobile block. */
@media (max-width:860px){
  .titlebar{flex-wrap:nowrap;overflow:hidden}
  .titlebar .doc-name{min-width:60px;flex:1 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .titlebar .grow{flex:0 0 0}
  .titlebar .donate{padding:3px 7px;margin-inline-end:4px}
  .titlebar .donate span{display:none}             /* heart only */
  .titlebar .premium span{display:none}
  .titlebar .premium{padding:3px 6px;margin-inline-end:4px}
}
@media (max-width:600px){
  .titlebar .premium{display:none}                 /* no room on a phone held upright */
}
@media (max-width:860px){
  .lang-select{max-width:92px;flex-shrink:0}
  .qat [data-action="save"]{display:none}       /* also in File; frees room on phones */
  #comments-panel,#review-panel{width:auto;max-height:45vh;border-inline-start:none;border-top:1px solid var(--line2)}
  #final-banner,#master-banner{font-size:12px;flex-wrap:wrap}
  .gal-grid,.ts-grid{grid-template-columns:repeat(2,1fr)}
  .pal-grid{grid-template-columns:repeat(2,1fr)}
}
/* AI assistant & create dialog */
#assistant-panel{width:320px;flex-shrink:0;background:var(--panel);border-inline-start:1px solid var(--line2);padding:10px 12px;display:flex;flex-direction:column;gap:8px;min-height:0}
.as-log{flex:1;overflow:auto;display:flex;flex-direction:column;gap:6px;min-height:80px}
.as-msg{padding:7px 10px;border-radius:10px;font-size:13px;white-space:pre-wrap;max-width:92%}
.as-msg.me{align-self:flex-end;background:var(--accent);color:var(--on-accent)}
.as-msg.ai{align-self:flex-start;background:var(--panel);border:1px solid var(--line2)}
.as-hints{display:flex;flex-wrap:wrap;gap:4px}
.as-hint{border:1px solid var(--line2);background:var(--panel);border-radius:12px;padding:3px 9px;font-size:11px;cursor:pointer;color:var(--txt2)}
.ad-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
@media (max-width:860px){ #assistant-panel{width:auto;max-height:50vh;border-inline-start:none;border-top:1px solid var(--line2)} .ad-grid{grid-template-columns:1fr} }
/* Online images & icons */
.sk-bar{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.sk-bar input[type=search]{flex:1;min-width:180px;border:1px solid var(--line2);border-radius:6px;padding:7px 9px}
.sk-item{position:relative;border:1px solid var(--line2);border-radius:6px;background:var(--bg);padding:0;cursor:pointer;overflow:hidden;aspect-ratio:4/3}
.sk-item img{width:100%;height:100%;object-fit:cover;display:block}
.sk-item span{position:absolute;left:4px;bottom:4px;font-size:10px;background:#000a;color:#fff;border-radius:3px;padding:0 4px;white-space:nowrap;max-width:calc(100% - 8px);overflow:hidden;text-overflow:ellipsis;box-sizing:border-box}
.sk-item:hover{outline:2px solid var(--accent)}
/* Selection handles keep their on-screen size at any zoom (--hz = 1 / zoom),
   so they stay grabbable with a finger when the slide is shown small. */
.handle-size{transform:scale(var(--hz,1))}
.handle-rot{top:calc(-30px * var(--hz,1));transform:translateX(-50%) scale(var(--hz,1))}
.handle-rot::before{height:calc(14px * var(--hz,1) / var(--hz,1))}
.handle-del{top:calc(-30px * var(--hz,1));right:calc(-30px * var(--hz,1));transform:scale(var(--hz,1))}
.block .cm-badge{transform:scale(var(--hz,1));transform-origin:top left}
@media (pointer:coarse){
  .handle-size{width:22px;height:22px}
  .handle-size.nw{left:-12px;top:-12px}.handle-size.ne{right:-12px;top:-12px}
  .handle-size.sw{left:-12px;bottom:-12px}.handle-size.se{right:-12px;bottom:-12px}
  .handle-del{width:30px;height:30px;top:calc(-38px * var(--hz,1));right:calc(-38px * var(--hz,1))}
  .handle-rot{width:24px;height:24px;top:calc(-40px * var(--hz,1))}
}
.sc-table th{text-align:start;padding:10px 0 4px;font-size:12px;color:var(--accent);text-transform:uppercase;letter-spacing:.4px}

/* Objects may stick out of the slide (like PowerPoint): they stay visible and
   grabbable, and what lies outside the slide is dimmed by this mask. */
#stage::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:40;border-radius:inherit;
  box-shadow:0 0 0 1px var(--line2),0 0 0 100vmax color-mix(in srgb,var(--canvas-bg) 62%,transparent)}
#stage{isolation:isolate}
#ruler-corner,#ruler-h,#ruler-v{position:relative;z-index:60}   /* above the mask */
/* Code editor dialog */
.cd-top{display:flex;flex-wrap:wrap;gap:6px 16px;align-items:flex-end}
.cd-code{font:13px/1.4 ui-monospace,Menlo,Consolas,monospace;width:100%;border:1px solid var(--line2);border-radius:6px;padding:6px}
.cd-steps-head{display:flex;gap:10px;align-items:baseline;margin-top:8px}
.cd-grid-wrap{max-height:36vh;overflow:auto;border:1px solid var(--line2);border-radius:6px}
.cd-grid{border-collapse:collapse;font:12px/1.3 ui-monospace,Menlo,Consolas,monospace;width:100%}
.cd-grid th{position:sticky;top:0;background:var(--panel);padding:3px 6px;font-weight:600}
.cd-grid td{padding:1px 4px;text-align:center}.cd-grid td.cd-src{text-align:start;white-space:pre;width:100%}
.cd-grid td.cd-n{color:var(--txt2);text-align:end}
.cd-grid tr.hl td.cd-src{background:#ffe08a66}
/* Vertical stacks (reveal.js vertical slides) in the navigator */
.thumb.is-vertical{margin-inline-start:22px;overflow:visible}
.thumb.is-vertical::before{content:"↳";position:absolute;left:-20px;top:40%;font-size:16px;color:var(--txt2)}
@media (max-width:860px){ .thumb.is-vertical{margin-inline-start:0;margin-top:14px} .thumb.is-vertical::before{left:4px;top:-16px;content:"↓"} }
/* Advanced backgrounds in the editor */
.bg-media{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden;border-radius:inherit}
.bg-media video,.bg-media iframe{width:100%;height:100%;object-fit:cover;border:0;display:block}
.bgf{border:1px solid var(--line2);border-radius:8px;margin:0 0 8px;padding:6px 10px}.bgf legend{font-size:12px;color:var(--txt2);padding:0 4px}
.bg-row{display:flex;gap:8px;align-items:center;font-size:12px;color:var(--txt2)}
@keyframes rvSemi{from{opacity:1}to{opacity:.5}}
@keyframes rvInSemi{0%{opacity:0}30%,70%{opacity:1}100%{opacity:.5}}
.set-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}.set-grid fieldset:last-child{grid-column:1/-1}@media (max-width:860px){.set-grid{grid-template-columns:1fr}}
/* Master text styles */
.ts2-wrap{overflow-x:auto}
.ts2{border-collapse:collapse;font-size:13px}
.ts2 th,.ts2 td{padding:4px 6px;text-align:start;white-space:nowrap;border-bottom:1px solid var(--line)}
.ts2 input[type=number]{width:62px}
.ts2 input[type=color]{width:34px;height:26px;padding:0;vertical-align:middle}
.ts2 .ts2-auto{font-size:11px;color:var(--txt2);margin-inline-start:4px}
.ts2 .mini2.on{background:var(--accent-bg);border-color:var(--accent)}
/* Share dialog */
.modal.share fieldset{border:1px solid var(--line);border-radius:8px;margin:10px 0;padding:6px 12px 10px}
.modal.share legend{font-size:12px;color:var(--txt2);padding:0 4px}
.modal.share .sh-pw input,.modal.share .sh-srv input{width:100%;box-sizing:border-box;margin:4px 0}
.sh-row{display:flex;gap:6px;align-items:flex-start;margin:4px 0}
.sh-row input,.sh-row textarea{flex:1;min-width:0;font-family:ui-monospace,monospace;font-size:12px}
.sh-item{display:flex;gap:6px;align-items:center;flex-wrap:wrap;font-size:13px;padding:4px 0;border-top:1px solid var(--line)}
.sh-item span{flex:1;min-width:160px}
/* Appearance dialog */
.ap-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:10px}
.ap-card{display:flex;flex-direction:column;align-items:center;gap:4px;padding:10px 4px;border:1px solid var(--line2);border-radius:10px;background:var(--panel);color:var(--txt);cursor:pointer}
.ap-card.on{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-bg)}
.ap-sw{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.ap-sw button{width:24px;height:24px;border-radius:50%;border:1px solid var(--line2);cursor:pointer;padding:0}
.titlebar .ap-btn{border:0;background:none;color:var(--txt2);cursor:pointer;padding:4px;border-radius:6px}
.titlebar .ap-btn:hover{background:var(--line)}
@media (max-width:860px){.ap-cards{grid-template-columns:repeat(2,1fr)}}
/* Playback dialog (videos and GIFs) */
.mp-view{height:240px;border-radius:8px;overflow:hidden;background:repeating-conic-gradient(#ccc 0 25%,#fff 0 50%) 0 0/16px 16px}
.mp-view.picking{cursor:crosshair;outline:2px solid var(--accent)}
.mp-bar{display:flex;align-items:center;gap:8px;margin:6px 0 10px}.mp-bar .mp-time{flex:1}.mp-now{font-variant-numeric:tabular-nums;font-size:12px;min-width:48px}
.mp-seg{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-bottom:6px;font-size:12px}.mp-seg input{width:64px}.mp-seg .mini2{padding:4px 6px}
.mp-keyopts{display:flex;flex-wrap:wrap;gap:8px;align-items:center}.mp-keyopts[hidden]{display:none}
.block .media-player canvas{pointer-events:none}
/* Speaker coach */
#coach-live{position:fixed;left:14px;bottom:14px;z-index:10000;padding:8px 12px;border-radius:10px;background:#000c;color:#fff;font:14px/1.3 system-ui,sans-serif;max-width:min(420px,80vw)}
#coach-live b{font-size:20px;font-variant-numeric:tabular-nums}
#coach-live .coach-hint{margin-top:4px;color:#ffd166;font-weight:600}#coach-live .coach-heard{margin-top:4px;opacity:.7;font-size:12px}
.coach-sum{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:6px 0 10px}
.coach-sum>div{background:var(--ribbon);border-radius:10px;padding:8px;text-align:center}.coach-sum b{display:block;font-size:22px;font-variant-numeric:tabular-nums}.coach-sum span{font-size:11px;color:var(--txt2)}
.coach-good,.coach-good b{color:#1a7f37}.coach-fast,.coach-fast b,.coach-slow,.coach-slow b{color:#b35900}
.coach-chip{display:inline-block;background:var(--ribbon);border:1px solid var(--line2);border-radius:999px;padding:2px 8px;margin:2px;font-size:12px}
.coach-tbl{width:100%;border-collapse:collapse;font-size:12px;margin-bottom:12px}.coach-tbl td,.coach-tbl th{padding:3px 6px;border-bottom:1px solid var(--line2);text-align:start}
/* Equation editor with MathLive's keyboard: never wider than the screen, and
   the dialog in the space above the keyboard (scrolling if it doesn't fit). */
#math-modal{box-sizing:border-box;overflow:hidden auto}
/* Inside the dialog MathLive's keyboard was a cell of its centring grid and got
   squeezed: its top (the 123 · ∞≠∈ · abc · αβγ tabs) was cut off and clicks
   there fell on the backdrop. It covers the screen as it does in <body>. */
#math-modal .ML__keyboard{position:fixed;inset:0;height:auto;max-width:100vw}
#math-modal.mt-kbd-open{align-items:start}
#math-modal.mt-kbd-open .mt-modal{margin-top:8px;max-height:calc(100vh - var(--mt-kbd, 0px) - 16px);overflow:auto}
#math-modal .mt-modal math-field{max-width:100%;box-sizing:border-box}
/* MathLive shifts the keys 5px down inside a backdrop of their same height:
   the bottom row went off a phone's screen. */
#math-modal .ML__keyboard .MLK__plate{top:0}
/* Co-editing: people in the title bar, their selections, chat */
.collab-bar{display:flex;align-items:center;gap:4px;margin-inline-end:8px}.collab-bar[hidden]{display:none}
.collab-peers{display:flex}.cb-av{width:26px;height:26px;border-radius:50%;border:2px solid var(--panel);color:#fff;font:600 11px/22px system-ui,sans-serif;text-align:center;padding:0;cursor:pointer;margin-inline-start:-6px;display:inline-block}
.collab-role{font-size:11px;color:var(--txt2);margin-inline-end:6px}
.collab-chat-btn{position:relative}.collab-unread{position:absolute;top:-4px;right:-4px;background:#e03131;color:#fff;border-radius:999px;font-size:10px;min-width:16px;height:16px;line-height:16px;text-align:center}
.collab-sel{position:absolute;pointer-events:none;outline:2px solid var(--c);outline-offset:3px;z-index:40}
.collab-sel::after{content:attr(data-name);position:absolute;left:-3px;top:-24px;background:var(--c);color:#fff;font:600 11px/1 system-ui,sans-serif;padding:3px 6px;border-radius:4px 4px 4px 0;white-space:nowrap}
.cb-people{display:flex;flex-direction:column;gap:6px;margin-bottom:12px}.cb-person{display:flex;align-items:center;gap:8px}.cb-person .cb-av{margin:0;cursor:default}.cb-person>span:nth-child(2){flex:1}
#collab-chat{position:fixed;right:16px;bottom:16px;width:min(320px,calc(100vw - 32px));height:min(420px,70vh);background:var(--panel);border:1px solid var(--line2);border-radius:12px;box-shadow:0 12px 40px #0003;display:none;flex-direction:column;z-index:2500}
#collab-chat.open{display:flex}.cc-head{display:flex;justify-content:space-between;align-items:center;padding:8px 12px;border-bottom:1px solid var(--line2)}
.cc-msgs{flex:1;overflow:auto;padding:8px 12px;display:flex;flex-direction:column;gap:8px;font-size:13px}.cc-msg.mine{align-self:flex-end;text-align:end}
.cc-name{font-weight:600;font-size:12px}.cc-time{font-size:10px;color:var(--txt2);margin-inline-start:6px}
.cc-form{display:flex;gap:6px;padding:8px;border-top:1px solid var(--line2)}.cc-in{flex:1;min-width:0;border:1px solid var(--line2);border-radius:6px;padding:6px 8px}
/* Digital signatures */
.sg-item{display:flex;gap:10px;align-items:flex-start;padding:8px;border-radius:8px;background:var(--ribbon);margin-bottom:6px;font-size:13px}
.sg-item>.ms{font-size:22px}.sg-valid>.ms,.sg-valid .sg-st{color:#1a7f37}.sg-modified>.ms,.sg-modified .sg-st{color:#b35900}.sg-invalid>.ms,.sg-invalid .sg-st{color:#c92a2a}
.sg-item code,.sg-fp{font-size:11px;word-break:break-all}
/* Google account, Drive status, "My presentations" */
.account-btn{display:flex;align-items:center;gap:4px;background:none;border:1px solid var(--line2);border-radius:999px;padding:3px 10px 3px 4px;cursor:pointer;color:var(--txt);font:inherit;font-size:12px;margin-inline-end:6px}
.account-btn.signed{padding:2px;border-color:transparent}.account-btn img,.account-menu img{width:28px;height:28px;border-radius:50%;display:block}
.acc-init{width:28px;height:28px;border-radius:50%;background:var(--accent);color:var(--on-accent);display:grid;place-items:center;font-weight:600}
.drive-status{background:none;border:none;cursor:pointer;color:var(--txt2);padding:2px 6px}.drive-status[hidden]{display:none}
.drive-status[data-state=saved]{color:#2f9e44}.drive-status[data-state=offline],.drive-status[data-state=error],.drive-status[data-state=conflict]{color:#e8590c}
.account-menu,.popup-menu{position:fixed;z-index:3200;background:var(--panel);border:1px solid var(--line2);border-radius:12px;box-shadow:0 12px 40px #0003;padding:8px;min-width:240px}
.account-menu .am-who{display:flex;gap:10px;align-items:center;padding:6px 8px 10px;border-bottom:1px solid var(--line2);margin-bottom:6px;font-size:12px;color:var(--txt2)}.account-menu .am-who b{color:var(--txt);font-size:14px}
.account-menu button,.popup-menu button{display:flex;gap:8px;align-items:center;width:100%;background:none;border:none;padding:8px;border-radius:8px;cursor:pointer;color:var(--txt);font:inherit;font-size:13px;text-align:start}.account-menu button:hover,.popup-menu button:hover{background:var(--ribbon)}
#drive-conflict{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0 0 8px;padding:6px 12px;border-radius:8px;background:#fff3e0;color:#7a3d00;font-size:13px}#drive-conflict[hidden]{display:none}
#drive-conflict button{border:1px solid #e8590c;background:#fff;color:#7a3d00;border-radius:6px;padding:4px 10px;cursor:pointer}
.home-screen{place-items:stretch}.home{background:var(--panel);margin:min(4vh,32px) auto;width:min(1080px,calc(100vw - 32px));max-height:calc(100vh - 2*min(4vh,32px));overflow:auto;border-radius:14px;padding:20px 24px;position:relative;box-sizing:border-box}
.home h2{margin:0 0 14px;color:var(--accent)}.home h3{font-size:14px;color:var(--txt2);margin:22px 0 10px}
.home-new{display:flex;gap:14px;flex-wrap:wrap}.home-new button{background:none;border:none;cursor:pointer;display:flex;flex-direction:column;gap:6px;align-items:center;font:inherit;font-size:13px;color:var(--txt)}
.hn-thumb{width:150px;aspect-ratio:16/9;border:1px solid var(--line2);border-radius:8px;display:grid;place-items:center;background:var(--ribbon)}.hn-thumb .ms{font-size:34px;color:var(--accent)}
.home-new button:hover .hn-thumb,.home-file:hover .hf-thumb{border-color:var(--accent)}
.home-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:16px}
.home-file{position:relative;cursor:pointer;display:flex;flex-direction:column;gap:4px;border-radius:10px;padding:6px}.home-file.current .hf-thumb{outline:2px solid var(--accent)}
.hf-thumb{aspect-ratio:16/9;border:1px solid var(--line2);border-radius:8px;overflow:hidden;display:grid;place-items:center;background:var(--ribbon)}.hf-thumb img{width:100%;height:100%;object-fit:cover}.hf-thumb .ms{font-size:36px;color:var(--txt2)}
.hf-name{font-size:13px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.hf-date{font-size:11px;color:var(--txt2)}
.hf-del{position:absolute;top:10px;right:10px;opacity:0;background:var(--panel);border-radius:6px}.home-file:hover .hf-del,.home-file:focus-within .hf-del{opacity:1}
.home-signin{grid-column:1/-1;text-align:center;padding:20px;color:var(--txt2)}.home-signin p{max-width:560px;margin:0 auto 14px}
@media (max-width:760px){.account-btn span{display:none}.account-btn{padding:3px}}
.call-steps{font-size:13px;padding-inline-start:20px}.call-steps li{margin:4px 0}
/* Recursos (GIF, stickers, 3D) and Movimiento 3D */
.sk-item.busy{opacity:.5;cursor:progress}
.modal.m3d{max-height:92vh;overflow:auto}.m3d-view{position:sticky;top:-22px;z-index:1}
.m3d-walk label.off{opacity:.45}
.m3d-view{overflow:hidden;height:260px;border-radius:10px;background:radial-gradient(circle at 50% 40%,#f4f6fa,#cfd5e0);margin-bottom:10px}
/* Canvas view (canvas mode, like Prezi) */
#canvas-view{position:absolute;inset:0;z-index:60;overflow:hidden;cursor:grab;touch-action:none}
#canvas-view:active{cursor:grabbing}
.cv-world{position:absolute;left:0;top:0;transform-origin:0 0}
.cv-frame{position:absolute;left:0;top:0;transform-origin:0 0;overflow:hidden;cursor:move;box-shadow:0 0 0 2px #ffffff26}
.cv-frame.active{box-shadow:0 0 0 3px var(--accent)}
.cv-num{position:absolute;left:14px;top:10px;font:700 64px/1 system-ui,sans-serif;color:#fff;background:#0009;border-radius:14px;padding:6px 18px;pointer-events:none}
.cv-over{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.cv-path{fill:none;stroke:#ffffff80;stroke-width:2;stroke-dasharray:6 6}
.cv-sel{fill:none;stroke:var(--accent);stroke-width:2}
.cv-h{fill:#fff;stroke:var(--accent);stroke-width:2;pointer-events:all;cursor:pointer}
.cv-bar{position:absolute;left:12px;top:12px;display:flex;gap:6px;flex-wrap:wrap;z-index:2}
.cv-bar .mini2{display:flex;align-items:center;gap:4px}
.cv-bg{display:flex;align-items:center;gap:4px;background:var(--ribbon);border:1px solid var(--line2);border-radius:8px;padding:4px 8px;cursor:pointer}
.cv-bg input{width:28px;height:22px;border:none;padding:0;background:none}
.cv-help{position:absolute;left:12px;bottom:6px;margin:0;font-size:12px;color:#fffc;text-shadow:0 1px 2px #000;pointer-events:none}
.cv-pic{position:absolute;pointer-events:none;user-select:none}
#canvas-view.cv-moving{cursor:move}#canvas-view.cv-moving .cv-frame{pointer-events:none}
.cv-bar .mini2.on{background:var(--accent-bg);border-color:var(--accent)}
/* Resources side panel (like Canva's Elements): docked left or right, stays open */
#elements-panel{width:340px;flex-shrink:0;background:var(--panel);border-inline-end:1px solid var(--line2);padding:10px 12px;display:flex;flex-direction:column;gap:8px;min-height:0}
#elements-panel.right{border-inline-end:none;border-inline-start:1px solid var(--line2)}
#elements-panel .cm-head span{display:flex;gap:4px;align-items:center}
#elements-panel .cm-head b{display:flex;gap:6px;align-items:center}
.el-tabs{display:grid;grid-template-columns:repeat(6,1fr);gap:2px}
.el-tabs button{display:flex;flex-direction:column;align-items:center;gap:2px;background:none;border:1px solid transparent;border-radius:8px;padding:5px 1px;cursor:pointer;font:inherit;font-size:10.5px;color:var(--txt2);line-height:1.15;text-align:center}
.el-tabs button .ms{font-size:22px}
.el-tabs button:hover{background:var(--bg)}
.el-tabs button[aria-selected=true]{color:var(--accent);border-color:var(--accent);background:var(--bg);font-weight:600}
#elements-panel .sk-bar{flex-wrap:nowrap}#elements-panel .sk-bar input[type=search]{min-width:0}
.el-opts{display:flex;gap:10px;flex-wrap:wrap;align-items:center;font-size:12px}.el-opts:not(:has(> :not([hidden]))){display:none}
.el-opts [hidden]{display:none}
#elements-panel .el-help{margin:0;font-size:11px}
.el-grid{flex:1;min-height:120px;overflow:auto;display:grid;grid-template-columns:repeat(2,1fr);grid-auto-rows:112px;gap:6px;align-content:start}
.el-grid.small{grid-template-columns:repeat(4,1fr);grid-auto-rows:68px}
.el-grid.dark .sk-item{background:#2b3038;border-color:#2b3038}
.el-noimg{display:grid;place-items:center;width:100%;height:100%;color:var(--txt2);font-size:24px}
.el-grid .host-help{grid-column:1/-1;grid-row:span 2}
.el-grid:has(.el-ideas){display:block}
.el-ideas{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.el-ideas button{border-radius:14px;padding:4px 12px}.el-grid .sk-item{aspect-ratio:auto;height:100%}
.el-grid .sk-item{cursor:grab}.el-grid.small .sk-item{aspect-ratio:1;padding:6px}.el-grid.small .sk-item img{object-fit:contain}
.el-foot{display:flex;gap:6px;align-items:center;justify-content:space-between;font-size:11px;color:var(--txt2)}
#stage.el-drop{outline:3px dashed var(--accent);outline-offset:4px}
@media (max-width:860px){ #elements-panel{width:auto;max-height:52vh;border-inline:none;border-top:1px solid var(--line2);order:3;gap:6px;padding:8px 10px}
  /* (On a phone: the kinds in one row that scrolls, and no tip in the foot: more room for results.) */
  .el-tabs{display:flex;overflow-x:auto;scrollbar-width:none}.el-tabs button{flex:0 0 68px}
  .el-tip{display:none}.el-foot{justify-content:flex-end}.el-foot .sk-more:not([hidden]){padding:3px 10px}
  .el-grid.justify .sk-item{height:88px} }
/* Motion paths: drawing one by hand, and its points to drag */
.path-draw{position:absolute;inset:0;z-index:40;cursor:crosshair;touch-action:none;background:#e0873b0d}
.pd-svg{position:absolute;left:0;top:0;overflow:visible;pointer-events:none}
.pd-line{fill:none;stroke:#e0873b;stroke-width:calc(4px * var(--hz,1));stroke-linecap:round;stroke-linejoin:round}
.pd-start{fill:#e0873b;opacity:.8}
.pd-hint{position:absolute;left:50%;top:10px;transform:translateX(-50%) scale(var(--hz,1));transform-origin:50% 0;background:#1f2328e6;color:#fff;border-radius:18px;padding:6px 14px;font:13px system-ui,sans-serif;white-space:nowrap;display:flex;gap:6px;align-items:center;pointer-events:none}
.mp-h{position:absolute;z-index:8;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;background:#fff;border:3px solid #e0873b;box-sizing:border-box;cursor:move;transform:scale(var(--hz,1));touch-action:none}
.mp-h.end{background:#e0873b}
.mp-h.mid{width:12px;height:12px;margin:-6px 0 0 -6px;border-width:2px;opacity:.55;cursor:copy}
.mp-h.mid::after{content:'+';position:absolute;inset:-3px 0 0;text-align:center;font:bold 10px/12px system-ui;color:#e0873b}
.mp-h:hover{opacity:1;box-shadow:0 0 0 3px #e0873b55}
.an-grid .an-wide{grid-column:1/-1;margin:0}
/* Automatic skeleton */
.modal.rig{max-height:94vh;overflow:auto}
.rig-bar{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:8px 0}
.rig-bar .seg{display:flex;border:1px solid var(--line2);border-radius:8px;overflow:hidden}
.rig-bar .seg button{border:0;background:none;padding:6px 10px;cursor:pointer;font:inherit;font-size:13px;display:flex;gap:4px;align-items:center;color:var(--txt2)}
.rig-bar .seg button[aria-pressed=true]{background:var(--accent);color:var(--on-accent)}
.rig-main{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.rig-edit{position:relative;background:#e9edf3;border-radius:10px}
.rig-cv{width:100%;height:auto;display:block;touch-action:none}
.rig-hint{position:absolute;left:8px;top:8px;background:#1f2328cc;color:#fff;border-radius:12px;padding:2px 10px;font-size:12px;pointer-events:none}
.rig-prev{display:flex;flex-direction:column;gap:8px}
.rig-mv{width:100%;flex:1;min-height:320px;border-radius:10px;background:radial-gradient(circle at 50% 40%,#f4f6fa,#cfd5e0)}
.rig-clips{display:flex;gap:4px;flex-wrap:wrap}.rig-clips [aria-pressed=true]{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}
@media (max-width:760px){.rig-main{grid-template-columns:1fr}}
.anim-add{width:330px;padding:8px;max-height:80vh;overflow:auto}.anim-add .host-help{margin:0 4px 6px;font-size:12px}
.aa-sec{margin:4px 0}.aa-sec>b{display:block;font-size:11px;color:var(--txt2);margin:4px 6px}
.aa-items{display:grid;grid-template-columns:1fr 1fr;gap:2px}.anim-add .aa-items button{display:flex;gap:6px;align-items:center;font-size:13px;padding:5px 8px;text-align:start}
.an-step{font-weight:400;font-size:11px;color:var(--txt2);background:var(--bg);border-radius:8px;padding:1px 6px;margin-inline-start:4px}.an-grid .an-chk{flex-direction:row;align-items:center;gap:4px}
.gal-blank .thumb-canvas{display:grid;place-items:center;background:var(--bg);border:2px dashed var(--line2)}.gal-blank .thumb-canvas .ms{font-size:44px;color:var(--accent)}
#canvas-wrap.file-drop{outline:3px dashed var(--accent);outline-offset:-10px;background:color-mix(in srgb,var(--accent) 8%,transparent)}
/* Picture search filters; the checkerboard shows which previews are see-through. */
.el-filters{display:grid;grid-template-columns:1fr 1fr;gap:6px 8px;font-size:12px;align-items:center}
.el-filters[hidden]{display:none}
.el-filters select{font-size:12px;min-width:0;width:100%}
.el-filters .fr-chk{grid-column:1/-1;margin:0}
.el-grid.checker .sk-item img{background:repeating-conic-gradient(#d9dce1 0 25%,#fff 0 50%) 0 0/14px 14px}
/* Pictures and GIFs in rows, each with its own proportions (as in Canva), not cropped to a tile. */
.el-grid.justify{display:flex;flex-wrap:wrap;gap:6px;align-content:flex-start}
.el-grid.justify::after{content:"";flex-grow:1e4}
.el-grid.justify .sk-item{height:104px;flex:var(--ar,1.33) 1 calc(var(--ar,1.33) * 92px);min-width:60px;max-width:100%}
.el-grid.justify > :not(.sk-item){flex-basis:100%}
.el-sub{margin:14px 0 2px;font-size:12px;color:var(--txt2);font-weight:600}
.el-loading{opacity:.8}
.el-ftoggle{position:relative;display:grid;place-items:center;padding:5px 7px}
.el-ftoggle[aria-expanded="true"]{background:var(--accent-bg);border-color:var(--accent);color:var(--accent)}
.el-fcount{position:absolute;top:-6px;right:-6px;min-width:16px;height:16px;border-radius:8px;background:var(--accent);color:var(--on-accent);font-size:10px;line-height:16px;text-align:center;padding:0 3px}
/* Sounds in the resources panel: a row each, with a button to listen first. */
.el-grid .sk-sound{grid-column:1/-1;aspect-ratio:auto;height:auto;min-height:54px;display:grid;grid-template-columns:auto 1fr;gap:0 8px;align-items:center;text-align:start;padding:8px 10px;cursor:pointer}
.el-grid .sk-sound b{font-size:12px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.el-grid .sk-sound span{position:static;grid-column:2;background:none;color:var(--txt2);padding:0}
.el-grid .sk-sound .sk-listen{grid-row:span 2;font-size:22px;width:34px;height:34px;display:grid;place-items:center;border-radius:50%;background:var(--accent);color:var(--on-accent)}
.el-akind[hidden]{display:none}
.el-grid:has(.sk-sound){grid-auto-rows:auto}
/* Brand kit dialog */
.bk-list{display:flex;flex-direction:column;gap:8px;margin:8px 0}
.bk-kit{display:grid;grid-template-columns:1fr auto;gap:2px 10px;align-items:center;border:1px solid var(--line2);border-radius:10px;padding:10px}
.bk-kit .bk-sw{grid-column:1/-1;display:flex;gap:4px;align-items:center}.bk-kit .bk-sw i{width:22px;height:22px;border-radius:50%;border:1px solid #0002}
.bk-kit .bk-sw img{height:26px;max-width:80px;object-fit:contain;margin-inline-start:6px}
.bk-kit small{grid-column:1;color:var(--txt2)}.bk-kit .bk-acts{grid-row:2/span 2;grid-column:2;display:flex;gap:4px}
.bk-cols{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;font-size:11px;color:var(--txt2);margin:6px 0}.bk-cols label{display:flex;flex-direction:column;gap:2px}
.bk-cols input{width:100%;height:30px}
.bk-logos{display:flex;gap:8px;flex-wrap:wrap;margin:6px 0}.bk-logos span{position:relative}.bk-logos img{height:40px;max-width:120px;object-fit:contain;border:1px solid var(--line2);border-radius:6px;padding:2px}
.bk-logos button{position:absolute;top:-6px;right:-6px;border:0;border-radius:50%;width:18px;height:18px;font-size:10px;cursor:pointer}
/* Resize dialog: each size with a little outline of its shape. */
.rs-list{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin:8px 0}
.rs-opt{display:flex;align-items:center;gap:8px;border:1px solid var(--line2);border-radius:8px;padding:8px;cursor:pointer;font-size:13px}
.rs-opt:has(input:checked){border-color:var(--accent);background:var(--accent-bg)}.rs-opt input{position:absolute;opacity:0;pointer-events:none}
.rs-shape{display:block;border:2px solid var(--accent);border-radius:3px;flex:0 0 auto}.rs-opt span{display:flex;flex-direction:column}.rs-opt small{color:var(--txt2)}
/* Dictation: what is being heard, and a button to stop. */
#dictate-bar{position:fixed;left:50%;bottom:18px;transform:translateX(-50%);z-index:10000;display:flex;align-items:center;gap:10px;padding:8px 10px 8px 14px;border-radius:999px;background:var(--panel);color:inherit;box-shadow:0 4px 18px #0004;border:1px solid var(--accent);max-width:min(560px,92vw);font-size:14px}
#dictate-bar .ms{color:var(--danger);animation:rvPulse 1.2s ease-in-out infinite}
#dictate-bar .dt-heard{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;opacity:.8}
@keyframes rvPulse{50%{opacity:.35}}
@media (prefers-reduced-motion:reduce){#dictate-bar .ms{animation:none}}
[data-action="dictate"].on{background:var(--accent-bg);color:var(--danger)}
/* Tasks in comments: who it is for and by when (late ones in red). */
.cm-view{border:1px solid var(--line2);border-radius:6px;padding:4px;background:var(--panel);color:inherit;font:inherit;font-size:12px}
.cm-task-in{display:flex;gap:6px}.cm-task-in input{min-width:0;flex:1;border:1px solid var(--line2);border-radius:6px;padding:4px 6px;font:inherit;font-size:12px;background:var(--panel);color:inherit}
.cm-task-in input[type=date]{flex:0 0 auto}
.cm-task{display:flex;gap:6px;align-items:center;font-size:12px;padding:3px 8px;border-radius:6px;background:var(--accent-bg);align-self:flex-start}
.cm-task .ms{font-size:16px}.cm-task.late{background:color-mix(in srgb,var(--danger) 16%,transparent);color:var(--danger)}
.cm-sys .cm-text{font-style:italic;color:var(--txt2)}
.cm-actions{flex-wrap:wrap}
[data-action="comments"] .tk-count{position:absolute;top:2px;right:2px;min-width:15px;height:15px;padding:0 3px;border-radius:8px;background:var(--danger);color:#fff;font-size:10px;line-height:15px;text-align:center;pointer-events:none}
[data-action="comments"]{position:relative}
/* Dropbox / OneDrive dialog. */
.oc-steps{padding-inline-start:20px;font-size:13px;display:flex;flex-direction:column;gap:4px}
.oc-redirect{width:100%;box-sizing:border-box;font:12px ui-monospace,monospace;padding:6px;border:1px solid var(--line2);border-radius:6px;background:var(--bg);color:inherit}
.oc-note.bad{color:var(--danger)}
.oc-files{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:6px;max-height:50vh;overflow:auto}
.oc-files li{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:6px 8px;border:1px solid var(--line2);border-radius:8px}
.oc-files li span{display:flex;flex-direction:column;min-width:0}.oc-files small{color:var(--txt2)}
/* Selection pane: the slide's objects, front first. */
#selection-panel{width:250px;flex-shrink:0;background:var(--panel);border-inline-start:1px solid var(--line2);overflow:auto;padding:10px 12px;display:flex;flex-direction:column;gap:8px}
.sp-tools{display:flex;gap:4px;flex-wrap:wrap}.sp-tools button{border:1px solid var(--line2);background:none;border-radius:6px;cursor:pointer;padding:3px 7px;color:inherit;font-size:12px;display:flex;align-items:center}
.sp-tools .ms{font-size:16px}
.sp-rows{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.sp-row{display:flex;align-items:center;gap:6px;padding:4px 6px;border-radius:6px;cursor:pointer;font-size:13px;border:1px solid transparent}
.sp-row:hover{background:var(--bg)}.sp-row.on{background:var(--accent-bg);border-color:var(--accent)}
.sp-row.off .sp-name,.sp-row.off .sp-kind{opacity:.45}
.sp-row[data-drop=above]{box-shadow:0 -2px 0 var(--accent)}.sp-row[data-drop=below]{box-shadow:0 2px 0 var(--accent)}
.sp-kind{font-size:17px;color:var(--txt2)}.sp-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sp-row button{border:none;background:none;color:inherit;cursor:pointer;padding:2px;opacity:.55;display:flex}.sp-row button:hover,.sp-row button.on{opacity:1}
.sp-row button .ms{font-size:17px}.sp-rename{flex:1;min-width:0;font:inherit;padding:2px 4px}
/* Hidden objects: not on the slide; while selected in the pane, a faint outline of where they are. */
.block.is-hidden{display:none}
.block.is-hidden.selected{display:block;opacity:.3;outline:1px dashed var(--accent)}
@media (max-width:760px){#selection-panel{width:auto;max-height:45vh;border-inline-start:none;border-top:1px solid var(--line2)}}
/* How to add a PDF. */
.pdf-modes{display:flex;flex-direction:column;gap:8px}
.pdf-mode{display:flex;gap:12px;align-items:center;text-align:start;padding:10px 12px;border:1px solid var(--line2);border-radius:10px;background:var(--panel);color:inherit;cursor:pointer;font:inherit}
.pdf-mode:hover,.pdf-mode:focus-visible{border-color:var(--accent);background:var(--accent-bg)}
.pdf-mode .ms{font-size:28px;color:var(--accent)}.pdf-mode span{display:flex;flex-direction:column;gap:2px}.pdf-mode small{color:var(--txt2)}
.crop-ratios{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:6px}.crop-ratios .on{background:var(--accent-bg);border-color:var(--accent)}
/* Choosing a PDF's page and zoom. */
.pz-nav{display:flex;gap:6px;align-items:center;margin-bottom:8px}.pz-n{min-width:60px;text-align:center}
.pz-stage{position:relative;max-height:62vh;max-width:100%;margin:0 auto;background:#fff;cursor:crosshair;touch-action:none;box-shadow:0 1px 6px #0003}
.pz-img{width:100%;height:100%;display:block;pointer-events:none}
.pz-rect{position:absolute;border:2px solid var(--accent);background:color-mix(in srgb,var(--accent) 18%,transparent);box-shadow:0 0 0 9999px #0005;pointer-events:none}
.pz-stage{overflow:hidden}
/* Insert ▸ Diagram: the layouts, drawn small. */
.dg-pop{display:grid;grid-template-columns:repeat(3,160px);gap:6px;margin-bottom:6px}
.dg-pop button{display:flex;flex-direction:column;align-items:center;gap:4px;padding:6px;border:1px solid var(--line2);border-radius:8px;background:var(--panel);color:inherit;cursor:pointer;font-size:12px}
.dg-pop button:hover{border-color:var(--accent);background:var(--accent-bg)}
.dg-thumb{display:block;width:150px;height:85px;overflow:hidden;position:relative;background:#1b1f26;border-radius:4px}
.dg-thumb>.rv-diagram{width:600px!important;height:340px!important;transform:scale(.25);transform-origin:0 0}
@media (max-width:600px){.dg-pop{grid-template-columns:repeat(2,160px)}}
/* Revela account: the credits in the title bar, and "My account". */
.titlebar .plan-btn{display:inline-flex;align-items:center;gap:4px;margin-inline-end:8px;padding:3px 10px;border-radius:14px;border:1px solid var(--line2);background:var(--panel);color:inherit;font:600 13px system-ui,sans-serif;cursor:pointer;white-space:nowrap}
.titlebar .plan-btn .ms{font-size:17px;color:#6d5dfc}.titlebar .plan-btn.in{border-color:#6d5dfc}
.titlebar .plan-btn[hidden]{display:none}
#account-modal .acc-who{font-weight:600}
#account-modal .acc-plan{display:flex;gap:8px;align-items:center;margin:6px 0}
#account-modal .acc-badge{padding:2px 10px;border-radius:12px;background:var(--bg);font-weight:700;font-size:13px}
#account-modal .acc-badge.pro{background:linear-gradient(90deg,#6d5dfc,#3f6497);color:#fff}
#account-modal .acc-credits{font-size:15px;margin:8px 0}#account-modal .acc-credits b{font-size:34px}
#account-modal .acc-credits small{display:block;font-size:12px;color:var(--txt2);margin-top:2px}
#account-modal .acc-features{list-style:none;padding:0;margin:6px 0 12px;font-size:14px}
#account-modal .acc-buy{display:flex;gap:6px;flex-wrap:wrap}
#account-modal .acc-code{margin:10px 0;padding:10px;border-radius:8px;background:var(--bg);font-size:14px}
#account-modal .acc-code b{display:block;font:700 28px ui-monospace,monospace;letter-spacing:6px;margin-top:6px}
@media (max-width:600px){.titlebar .plan-btn span{display:none}}

/* Revela's cloud (official edition and desktop app only) */
body:not([data-edition="cloud"]):not([data-edition="desktop"]) .accounts-only{display:none}
.modal.cloud h4{margin:14px 0 4px;font-size:12px;text-transform:uppercase;letter-spacing:.4px;color:var(--txt2)}
.modal.cloud fieldset{border:1px solid var(--line);border-radius:8px;margin:10px 0;padding:6px 12px 10px}
.modal.cloud legend{font-size:12px;color:var(--txt2);padding:0 4px}
.modal.cloud .cl-linkrole{width:100%;padding:7px;margin:4px 0}
.modal.cloud .sh-row select{padding:6px}.modal.cloud .cl-email{flex:1;min-width:0;padding:7px}
.modal.cloud .cl-here{font-size:12px;color:var(--go)}
.cl-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:8px 0 14px}
.cl-kpis div{background:var(--ribbon);border:1px solid var(--line);border-radius:8px;padding:8px;text-align:center}
.cl-kpis b{display:block;font-size:18px;color:var(--txt)}.cl-kpis small{color:var(--txt2);font-size:11px}
.cl-bars{display:flex;flex-direction:column;gap:4px}
.cl-bar{display:grid;grid-template-columns:28px 1fr 110px;align-items:center;gap:6px;font-size:12px;color:var(--txt2)}
.cl-bar i{display:block;height:12px;border-radius:3px;background:var(--accent);min-width:2px}
.cloud-status[data-status="offline"],.cloud-status[data-status="forbidden"],.cloud-status[data-status="too-large"],.cloud-status[data-status="gone"]{color:var(--danger)}
@media (max-width:600px){.cl-kpis{grid-template-columns:repeat(2,1fr)}}
.sh-cloud{display:flex;gap:12px;align-items:center;justify-content:space-between;background:var(--accent-bg);border-radius:8px;padding:10px 12px;margin:6px 0 10px}
.sh-cloud small{color:var(--txt2)}.sh-cloud .fr-do{display:flex;align-items:center;gap:4px;white-space:nowrap}
.modal.share h4{margin:10px 0 2px;font-size:12px;text-transform:uppercase;letter-spacing:.4px;color:var(--txt2)}
#canvas-wrap .block.rv-changed{outline:2px dashed #e8590c;outline-offset:3px}
#review-panel .rv-all{justify-content:flex-start}
.pl-stage{position:relative;margin-top:8px;cursor:crosshair}.pl-stage img{width:100%;display:block;border-radius:6px}
.pl-marks b{position:absolute;transform:translate(-50%,-50%);min-width:22px;height:22px;border-radius:11px;background:var(--accent);color:var(--on-accent);display:grid;place-items:center;font-size:12px;pointer-events:none}
.pl-img-btn{display:inline-block}
.cr-wrap{max-height:55vh;overflow:auto;margin:6px 0 12px;border:1px solid var(--line);border-radius:8px}
.cr-table{border-collapse:collapse;width:100%;font-size:13px}.cr-table th,.cr-table td{padding:5px 8px;border-bottom:1px solid var(--line);text-align:center}
.cr-table th:first-child,.cr-table td:first-child{text-align:start}.cr-table thead th{position:sticky;top:0;background:var(--ribbon)}
.gal-ai .gal-ai-in{display:grid;place-items:center;background:var(--accent-bg);aspect-ratio:var(--ar);border:1px dashed var(--accent)}.gal-ai .gal-ai-in .ms{font-size:34px;color:var(--accent)}
.tm-sw{display:inline-block;width:14px;height:14px;border-radius:3px;margin-inline-start:4px;vertical-align:middle;border:1px solid var(--line2)}
#team-modal .sh-item small{color:var(--txt2)}
#call-panel{position:fixed;right:16px;bottom:44px;z-index:2500;width:min(340px,calc(100vw - 32px));background:var(--panel);border:1px solid var(--line2);border-radius:12px;box-shadow:0 10px 40px #0005;padding:8px;display:flex;flex-direction:column;gap:6px}
.call-head{display:flex;justify-content:space-between;align-items:center;font-size:13px}.call-head b{display:flex;align-items:center;gap:4px}.call-n{color:var(--txt2)}
.call-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:4px;max-height:50vh;overflow:auto}
.call-tile{position:relative;margin:0;background:#000;border-radius:8px;overflow:hidden;aspect-ratio:4/3}.call-tile video{width:100%;height:100%;object-fit:cover;display:block}
.call-tile figcaption{position:absolute;left:4px;bottom:4px;font-size:11px;color:#fff;background:#0008;border-radius:6px;padding:0 6px}
.call-bar{display:flex;justify-content:center;gap:8px}.call-bar button{width:40px;height:40px;border-radius:20px;border:1px solid var(--line2);background:var(--ribbon);color:var(--txt);cursor:pointer;display:grid;place-items:center}
.call-bar button:not(.on):not(.call-end){background:var(--danger);color:#fff}.call-bar .call-end{background:#d93025;color:#fff;border:0}
.gal-bar{display:flex;flex-direction:column;gap:8px;margin:4px 0 10px;position:sticky;top:-22px;z-index:2;background:var(--panel);padding:6px 0}
.gal-bar .gal-q{width:100%;padding:8px 10px;font-size:14px}
.gal-cats{display:flex;flex-wrap:wrap;gap:6px}
.gal-cat{border:1px solid var(--line2);background:var(--ribbon);color:var(--txt);border-radius:16px;padding:4px 12px;font:inherit;font-size:12px;cursor:pointer}
.gal-cat small{color:var(--txt2);margin-inline-start:2px}.gal-cat.on{background:var(--accent-bg);border-color:var(--accent);color:var(--accent)}
.gal-item[hidden]{display:none}.gal-wait{display:grid;place-items:center;height:100%;color:var(--txt2);font-size:28px;opacity:.5}