. While typing, a transparent textarea lies
over it with the SAME font, size, padding and wrapping, so the caret
and the selection sit on the coloured letters underneath -- change one
of these four on one of them and the caret drifts off its letter. */
.an-code{position:absolute;border:1px solid transparent;
border-radius:var(--tk-rad,8px);font-family:var(--mono);line-height:1.45;}
.deck.editing .an-code{cursor:move;}
.an-code.an-editing{cursor:text;}
.an-code-pre,.an-code-ta{display:block;margin:0;padding:.6em .8em;
font:inherit;line-height:inherit;letter-spacing:0;white-space:pre-wrap;
overflow-wrap:anywhere;tab-size:4;-moz-tab-size:4;border:0;
border-radius:inherit;box-sizing:border-box;
text-rendering:auto;font-variant-ligatures:none;font-kerning:none;}
.an-code-pre{background:none;color:inherit;}
.an-code-pre code{font:inherit;background:none;color:inherit;padding:0;}
.an-code-ta{position:absolute;inset:0;width:100%;height:100%;resize:none;
overflow:hidden;background:transparent;color:transparent;outline:none;
cursor:text;z-index:1;}
.an-code-ta::selection{background:var(--cb-sel);color:transparent;}
/* the textarea's words are transparent, so its hint takes the box's ink */
.an-code-ta::placeholder{color:var(--cb-ink);opacity:.5;font-style:italic;}
.an-code-ph{opacity:.5;font-style:italic;}
.an-code.an-editing .an-code-ph{display:none;}
/* the source in a frame of its own: the editor's textarea lies over it
and not over the output under it (T732) */
.an-code-src{position:relative;border-radius:inherit;}
/* "Python around the outer edge when clicked on": a slim label on the
top edge -- the language and Run -- just outside the selection
outline, only while the box is selected or being typed in. The
colours, the size and the box are the Code tab's since T732. */
.an-code-tab{position:absolute;left:-3px;bottom:calc(100% + 5px);
display:none;align-items:center;gap:5px;padding:1px 2px 1px 6px;
background:var(--chrome-1,#0e1926);color:var(--chrome-ink,#cdd9e3);
border:1px solid var(--cyan);border-radius:6px;
font:600 11px/1.2 var(--sans);white-space:nowrap;z-index:5;
cursor:default;box-shadow:0 1px 5px #0004;}
.an-code.sel .an-code-tab,.an-code.an-editing .an-code-tab{display:flex;}
/* T736: Edit in Present -- in the show the box takes the pointer (the
layer does not) and wears its label all the time */
.an-code.an-code-live{pointer-events:auto;cursor:text;}
.an-code.an-code-live .an-code-tab{display:flex;}
/* the label holds the top edge, so the rotate grip goes under the box: on
top, centred, it sat on the label of any narrow box (2026-10-31) */
.an-code .an-rotate{top:auto;bottom:-30px;}
.an-code .an-rotate::after{top:auto;bottom:100%;}
.an-code-ic{display:inline-flex;color:var(--cyan);}
.an-code-ic svg{width:13px;height:13px;}
/* T728: Run (Stop while running), a word and an icon, after the language */
.an-code-run{display:inline-flex;align-items:center;gap:3px;
padding:1px 6px 1px 4px;font:inherit;color:inherit;cursor:pointer;
background:color-mix(in srgb,var(--cyan) 14%,transparent);
border:1px solid color-mix(in srgb,var(--cyan) 55%,transparent);
border-radius:4px;}
.an-code-run:hover,.an-code-run:focus-visible{outline:none;
background:color-mix(in srgb,var(--cyan) 30%,transparent);}
.an-code-run.busy,#cb-run.busy{border-color:#e8a33d;
background:color-mix(in srgb,#e8a33d 18%,transparent);}
.an-code-run svg{width:11px;height:11px;}
/* T748: RUN, DOWN THE BOX'S SIDE -- outside its left edge, level with its
first line, the word under the icon; always there in the editor, not
only while selected. On the right when the box is against the page's
left edge. Chrome-sized, so it does not grow with the code's type. */
.an-code-run.an-code-side{position:absolute;right:calc(100% + 6px);top:0;
flex-direction:column;justify-content:center;gap:2px;width:38px;
padding:5px 0 4px;font:600 10.5px/1.1 var(--sans);
background:var(--chrome-1,#0e1926);color:var(--chrome-ink,#cdd9e3);
border:1px solid color-mix(in srgb,var(--cyan) 70%,transparent);
border-radius:6px;box-shadow:0 1px 4px #0004;z-index:5;}
.an-code-run.an-code-side:hover,.an-code-run.an-code-side:focus-visible{
background:color-mix(in srgb,var(--cyan) 26%,var(--chrome-1,#0e1926));}
.an-code-run.an-code-side svg{width:14px;height:14px;color:var(--cyan);}
.an-code-run.an-code-side.busy svg{color:var(--warning);}
.an-code-run.an-code-side.an-code-side-r{right:auto;left:calc(100% + 6px);}
/* T732: WHAT IT PRINTED, INSIDE THE BOX, as a notebook draws a cell's
output: under the source, a rule between, in the box's own colours
and font a step smaller; an error in the error colour. It is part of
the slide (it is kept with the deck), so it prints and shows. */
.an-code-out{border-top:1px solid var(--cb-edge);
border-radius:0 0 var(--tk-rad,8px) var(--tk-rad,8px);cursor:auto;}
.an-code-out-tx{margin:0;padding:.45em .8em .6em;font:inherit;
font-size:.9em;line-height:1.4;color:inherit;background:none;
white-space:pre-wrap;overflow-wrap:anywhere;tab-size:4;user-select:text;}
.an-code-out.bad .an-code-out-tx{color:var(--cb-err);}
/* T735: a plot the run drew, as wide as the box at most, its own shape */
.an-code-fig{display:block;max-width:calc(100% - 1.6em);height:auto;
margin:.45em .8em .6em;border-radius:3px;}
.an-code-out-tx+.an-code-fig{margin-top:0;}
.an-code-out.busy .an-code-out-tx,.an-code-out.empty .an-code-out-tx{
opacity:.6;font-style:italic;}
/* ---- T732: the Code tab's own controls: a caption over each field, and
the deck's colours as swatches ---- */
/* one ribbon row each, the caption before the control: a caption over
it made each field two rows, and the group taller than the ribbon */
.cb-field{display:inline-flex;align-items:center;gap:6px;margin:0 4px;}
.cb-field[hidden]{display:none;}
.cb-cap{font:600 11px/1.2 var(--sans);opacity:.85;min-width:5.6em;}
.cb-field select{max-width:13em;}
.cb-sws{display:inline-flex;gap:3px;align-items:center;}
.cb-sw{width:18px;height:18px;padding:0;border-radius:4px;cursor:pointer;
border:1px solid #ffffff40;background:transparent;}
.cb-sw[aria-pressed="true"]{outline:2px solid var(--cyan);outline-offset:1px;}
.cb-sw-own{background-image:linear-gradient(135deg,transparent 46%,
#ffffff70 46%,#ffffff70 54%,transparent 54%);}
.cb-sw-none{background:repeating-linear-gradient(45deg,transparent 0 3px,
#ff6b5780 3px 4px);}
#cb-bdwrap select{margin-left:2px;}
/* T738: a box of HTML. The frame is laid out at the box's size on a
720-tall page and scaled to the slide (53d-html-box.js), so it is
positioned and scaled from its top-left corner. Transparent, so the
slide shows through wherever the HTML paints nothing: an iframe whose
colour scheme differs from its page's paints an opaque backdrop, so
it asks for the same scheme its page has (none). */
.an-html{position:absolute;}
.deck.editing .an-html{cursor:move;}
.an-html.an-editing{cursor:text;}
.an-htmlframe{position:absolute;left:0;top:0;border:0;display:block;
transform-origin:0 0;background:transparent;color-scheme:normal;}
/* The editor picks the box up by its face. Everywhere else -- the show,
the scrolling page, a standalone export -- a click goes through a box
to the next build unless its scripts run, when the box takes it (T546's
rule: what takes a click while presenting is named). Even then its
FRAME takes no pointer until the box is woken by a press on it
(hbKeyGuard): a frame given the pointer can be given the keyboard. The
scrolling page and an export have no .deck round them, so this is not
scoped to one (found in review: a box there took no click at all). */
.an-htmlframe{pointer-events:none;}
.an-html.an-html-live{pointer-events:auto;cursor:pointer;}
.an-html.an-html-live.an-awake .an-htmlframe{pointer-events:auto;}
.deck.editing .an-htmlframe{pointer-events:none;}
/* a box whose scripts or internet loading arrived from somewhere else
and are held here: said on its face, in the editor only, with the
button that allows them */
.an-html-held{position:absolute;left:4px;right:4px;bottom:4px;z-index:3;
display:none;flex-wrap:wrap;align-items:center;gap:4px 8px;
padding:5px 8px;border-radius:5px;background:var(--chrome-1,#0e1926);
color:var(--chrome-ink,#cdd9e3);border:1.5px solid var(--amber,#e0a84b);
font:600 11px/1.3 var(--sans);cursor:default;box-shadow:0 2px 8px #0005;}
.deck.editing .an-html-held{display:flex;}
.an-html.an-editing .an-html-held{display:none;}
.an-html-held button{display:inline-flex;align-items:center;gap:4px;
font:inherit;color:inherit;background:color-mix(in srgb,var(--cyan) 22%,
transparent);border:1px solid var(--cyan);border-radius:4px;
padding:3px 7px;cursor:pointer;text-align:left;}
.an-html-held button svg{width:12px;height:12px;flex:none;}
.an-html-held button:hover,.an-html-held button:focus-visible{
background:color-mix(in srgb,var(--cyan) 38%,transparent);outline:none;}
.an-html-ph{position:absolute;inset:0;display:none;align-items:center;
justify-content:center;text-align:center;padding:6px;
font:12px/1.3 var(--sans);color:var(--tk-ink,#cdd9e3);opacity:.65;
border:1px dashed currentColor;border-radius:4px;}
.deck.editing .an-html.an-html-empty .an-html-ph{display:flex;}
.an-html.an-editing .an-htmlframe,.an-html.an-editing .an-html-ph{
visibility:hidden;}
/* its source, typed: the code box's textarea over a coloured ,
in a box that keeps its size, so the source scrolls in it. The two
keep the same gutter for a scroll bar, or they would wrap at two
widths and the caret would drift off its letter. */
.an-html-src{position:absolute;inset:0;z-index:2;overflow:hidden;
border:1px solid transparent;border-radius:4px;font-family:var(--mono);
line-height:1.45;cursor:text;}
.an-html-pre,.an-html-ta{position:absolute;inset:0;width:100%;
height:100%;margin:0;padding:.6em .8em;font:inherit;
line-height:inherit;letter-spacing:0;white-space:pre-wrap;
overflow-wrap:anywhere;tab-size:4;-moz-tab-size:4;border:0;
box-sizing:border-box;text-rendering:auto;font-variant-ligatures:none;
font-kerning:none;scrollbar-gutter:stable;}
.an-html-pre{overflow:hidden;background:none;color:inherit;}
.an-html-pre code{font:inherit;background:none;color:inherit;padding:0;}
.an-html-ta{resize:none;overflow:auto;background:transparent;
color:transparent;outline:none;z-index:1;}
.an-html-ta::selection{background:var(--cb-sel);color:transparent;}
.an-html-ta::placeholder{color:var(--cb-ink);opacity:.5;font-style:italic;}
/* a long source is coloured when typing pauses: until then the
textarea shows its own words and the coloured copy waits */
.an-html-src.an-src-raw .an-html-ta{color:var(--cb-ink);}
.an-html-src.an-src-raw .an-html-pre{visibility:hidden;}
/* its tab is the code box's, shown the same way */
.an-html.sel .an-code-tab,.an-html.an-editing .an-code-tab{display:flex;}
/* by the slide's right edge the tab lines up with the box's right edge
(hbTabFit), a code box's as an HTML box's */
.an-tab-end>.an-code-tab{left:auto;right:-3px;}
.an-html .an-rotate{top:auto;bottom:-30px;}
.an-html .an-rotate::after{top:auto;bottom:100%;}
/* the code box's label is slim since T732 (its gap 5px, for an icon, a
name and Run); an HTML box's tab holds three controls with their own
padding, so it keeps the tight gap it was reviewed at */
.an-html-tab{gap:1px;}
.an-html-name{margin-right:6px;}
.an-html-tab button,.an-html-opt{display:inline-flex;align-items:center;
gap:4px;font:inherit;color:inherit;background:transparent;border:0;
border-radius:4px;padding:3px 6px;cursor:pointer;}
.an-html-tab button svg{width:13px;height:13px;}
.an-html-tab button:hover,.an-html-tab button:focus-visible,
.an-html-opt:hover,.an-html-opt:focus-within{
background:color-mix(in srgb,var(--cyan) 18%,transparent);outline:none;}
.an-html-opt input{margin:0;accent-color:var(--cyan);cursor:pointer;}
.an-html-tab button+.an-html-opt,.an-html-opt+.an-html-opt{margin-left:2px;}
.mini-it.is-html img{object-fit:fill;}
/* CONTAIN by default: cover let any non-proportional resize silently
clip the picture (2026-08-19, diagnosed+verified in-browser: a 2:1
stripe resized to 0.4:1 showed ~21% of its width). A crop must still
FILL first or the mask would only bite letterbox — same rationale as
the cell rule below. */
.an-image.an-cropped .an-imgel{object-fit:cover;}
/* T387: a window onto the picture -- the img is scaled and offset so
the window fills the box, and the box clips the rest */
/* T587: the window clips in a wrapper, not the item, so the item's own
handles (which stand outside its box) are never cut off */
.an-imgwin{position:absolute;inset:0;overflow:hidden;border-radius:inherit;}
.an-image.an-win .an-imgel{position:absolute;object-fit:fill;max-width:none;}
/* T587: while trimming, the part being cut away is still there, faint,
so you can see what you are giving up -- as PowerPoint shows it */
.an-crop-ghost{position:absolute;inset:0;width:100%;height:100%;
object-fit:cover;opacity:.28;pointer-events:none;}
.zc-box{position:absolute;border:1.5px dashed var(--cyan);
background:color-mix(in srgb,var(--cyan) 14%,transparent);
pointer-events:none;}
.an-imgel{width:100%;height:100%;object-fit:contain;display:block;
pointer-events:none;border-radius:2px;}
.deck.editing .an-image{cursor:move;}
.deck.editing .an-image.sel{outline:2px solid var(--cyan);outline-offset:1px;}
/* T321: a clip. Black behind a letterboxed film, the deck's surface
behind a sound-only one; while editing the element takes no clicks so
the box drags and selects like a picture. */
.an-video{position:absolute;background:#000;border-radius:2px;
overflow:hidden;}
.an-video.an-audio{background:#16273a;}
.an-mediael{width:100%;height:100%;display:block;object-fit:contain;}
.an-audio .an-mediael{height:auto;position:absolute;left:0;right:0;
bottom:0;width:100%;}
.deck.editing .an-mediael{pointer-events:none;}
.an-mediachip{position:absolute;left:6px;top:6px;font-size:11px;
line-height:1.4;background:#000a;color:#fff;padding:2px 7px;
border-radius:3px;pointer-events:none;max-width:calc(100% - 12px);
overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.deck.editing .an-video{cursor:move;}
.deck.editing .an-video.sel{outline:2px solid var(--cyan);outline-offset:1px;}
.md-preview{width:100%;max-height:160px;background:#000;border-radius:4px;
display:block;margin:4px 0 8px;}
.md-preview.md-audio{max-height:40px;}
.mediapane .md-check,.chartpane .md-check{display:flex;align-items:center;
gap:8px;
text-transform:none;letter-spacing:0;}
.mediapane .md-btns{gap:6px;flex-wrap:wrap;}
.mediapane .md-info{opacity:.75;font-size:11px;}
.mediapane .empty > *:not(#md-name){display:none;}
/* T322: the Chart pane. Rows wrap; a series row is a colour well, its
name, and the switches; the pressed switch wears the accent. */
.chartpane .cp-row{flex-wrap:wrap;gap:4px;align-items:center;}
.chartpane .cp-series{padding:4px 0;border-top:1px solid #ffffff12;}
.chartpane .cp-col{width:26px;height:22px;padding:0;flex:none;
border:1px solid #ffffff26;border-radius:4px;background:none;
cursor:pointer;}
.chartpane .cp-name,.chartpane .cp-text{flex:1 1 90px;min-width:70px;}
.chartpane .cp-btn{font-size:11px;padding:2px 7px;}
.chartpane .cp-btn.on{background:color-mix(in srgb,var(--accent) 22%,
transparent);border-color:color-mix(in srgb,var(--accent) 55%,
transparent);color:var(--chrome-ink);}
.chartpane .cp-tags{font-size:10px;opacity:.7;flex:1 0 100%;}
/* T324: a structured table. The group row reads as a heading above the
heading; the footer is ruled off from the body it sums; a numeric
column gets figures of one width so its digits stack. */
.an-tbl-grouprow th{font-weight:600;opacity:.9;
border-bottom:1px solid color-mix(in srgb,currentColor 24%,transparent);}
.an-tbl-grouprow th.an-tbl-gapgroup{border-bottom:0;}
.an-tbl-calc td{font-weight:600;
border-top:2px solid color-mix(in srgb,currentColor 40%,transparent);}
.an-tbl td.an-tbl-num{font-variant-numeric:tabular-nums;}
.tablepane .tp-row{flex-wrap:wrap;gap:4px;align-items:center;}
.tablepane .tp-cols{gap:3px;}
.tablepane .tp-btn{font-size:11px;padding:2px 7px;}
.tablepane .tp-btn.on{background:color-mix(in srgb,var(--accent) 22%,
transparent);border-color:color-mix(in srgb,var(--accent) 55%,
transparent);color:var(--chrome-ink);}
.tablepane .tp-in{flex:0 1 84px;min-width:56px;}
.tablepane .tp-in.tp-wide{flex:1 1 140px;}
.tablepane .tp-col{width:26px;height:22px;padding:0;flex:none;
border:1px solid #ffffff26;border-radius:4px;background:none;
cursor:pointer;}
/* T325: the citations pane. One entry a row, its number first so the
list reads as the bibliography it will become. */
.citepane .ct-row{flex-wrap:wrap;gap:4px;align-items:baseline;}
.citepane .ct-entry{padding:5px 0;border-top:1px solid #ffffff12;}
.citepane .ct-num{flex:none;font-family:var(--mono);font-size:11px;
opacity:.8;min-width:26px;}
.citepane .ct-ref{flex:1 1 100%;font-size:11px;line-height:1.45;}
.citepane .ct-btn{font-size:11px;padding:2px 7px;}
.citepane .ct-btn.on{background:color-mix(in srgb,var(--accent) 22%,
transparent);border-color:color-mix(in srgb,var(--accent) 55%,
transparent);color:var(--chrome-ink);}
.citepane .ct-hint,.citepane .ct-warn{text-transform:none;
letter-spacing:0;font-size:11px;line-height:1.45;}
.citepane .ct-warn{color:var(--coral,#ff6b57);opacity:.95;}
/* the footnote strip a slide's citations land in */
.slide-citefoot{position:absolute;left:4%;right:4%;bottom:1.2%;
font-size:0.9em;opacity:.7;line-height:1.35;pointer-events:none;
text-align:left;}
.tablepane .tp-hint{opacity:.75;font-size:11px;text-transform:none;
letter-spacing:0;line-height:1.4;}
.chartpane .cp-hint{opacity:.75;font-size:11px;text-transform:none;
letter-spacing:0;line-height:1.4;}
/* multi-selection / group: a dashed outline, no per-item resize handles */
/* the rubber band. Percent geometry like everything else on the layer,
so it is right at any zoom and on any page size (2026-08-20). */
.an-marquee{position:absolute;pointer-events:none;z-index:40;
border:1px solid var(--cyan);
background:color-mix(in srgb,var(--accent) 12%,transparent);}
/* the group you have stepped INTO: outlined as a whole, so it is obvious
that clicks are landing on its members and not on the group */
.deck.editing .an-item.an-ingrp{outline:1px dashed
color-mix(in srgb,var(--accent) 55%,transparent);outline-offset:3px;}
.deck.editing .an-item.grpsel{outline:1.5px dashed var(--cyan);
outline-offset:1px;}
/* T487: a whole group selected wears ONE solid frame round the union
of its members (paintSel draws it); the members' own dashes go */
.deck.editing .an-item.grpsel.an-grouped{outline:none;}
.deck.editing .an-grpframe{position:absolute;pointer-events:none;
outline:2px solid var(--cyan);outline-offset:3px;border-radius:3px;
z-index:5;}
.deck.editing .an-item.grpsel .an-resize,
.deck.editing .an-item.grpsel .an-handle,
.deck.editing .an-item.grpsel .an-cellbtn,
.deck.editing .an-item.grpsel .cellparts{display:none!important;}
/* build animations: staged items hide until revealed, then animate in */
.an-prebuild{opacity:0!important;pointer-events:none!important;}
/* TWO RULES, BOTH LEARNED FROM BUGS THESE KEYFRAMES USED TO HAVE (T156).
1. NEVER THE `transform` SHORTHAND. applyCommon writes a rotated item's
rotate() into style.transform, and the shorthand REPLACED it for the
animation's duration -- an object would un-rotate, animate, and snap
back. The render path papered over it by silently swapping a rotated
Rise or Zoom for a Fade (JVC-03): the model said rise, the ribbon
said rise, the pane chip said rise, and a fade played. The
individual `translate` and `scale` properties are applied BEFORE
`transform` in the computed value, so they COMPOSE with that
rotate() instead of replacing it, and the substitution is deleted.
2. NEVER END AT A LITERAL OPACITY. `to{opacity:1}` fought a.op, which
applyCommon also writes inline: a 40%-opacity object animated up to
FULL and then snapped back to 40% at the end of every build. An
omitted `to` keyframe means "the value this element already has", so
the fade now lands exactly where the author put it. Same reason the
transform keyframes have no `to`. */
@keyframes anIn-fade{from{opacity:0}}
@keyframes anIn-rise{from{opacity:0;translate:0 22px}}
@keyframes anIn-zoom{from{opacity:0;scale:.85}}
.an-anim-fade{animation:anIn-fade .45s ease;}
.an-anim-rise{animation:anIn-rise .5s cubic-bezier(.2,.7,.2,1);}
.an-anim-zoom{animation:anIn-zoom .45s ease;}
/* T385: three more, by the same two rules. Fly in comes from the left;
Page turn is a squash from the left edge, which reads as a page
swinging open without a perspective on the layer (a perspective
there would change the stacking of every item on it); Typewriter is
done in JS (typeInto) and only borrows a caret from here. */
@keyframes anIn-slide{from{opacity:0;translate:-60px 0}}
@keyframes anIn-turn{from{opacity:.2;scale:.05 1}}
.an-anim-slide{animation:anIn-slide .5s cubic-bezier(.2,.7,.2,1);}
.an-anim-turn{animation:anIn-turn .55s cubic-bezier(.2,.7,.2,1);
transform-origin:left center;}
.an-typing .an-tx::after{content:"\258D";opacity:.8;
animation:an-caret .7s steps(1) infinite;}
@keyframes an-caret{50%{opacity:0}}
/* T385: HIGHLIGHT, DON'T HIDE. The lit piece takes the accent and a
little size from its left edge; the pieces still to come sit quiet.
Left origin so a bullet grows away from its dot, not over it. */
/* T493: the colour and the size are the box's own (--hl-col and
--hl-scale, set by the reveal pass from anim.hlcol / anim.hlsize);
the accent and 4% are what a box that says nothing gets */
.an-part.an-hl{color:var(--hl-col,var(--sl-accent,#39a9c0));
scale:var(--hl-scale,1.04);
transform-origin:left center;transition:scale .25s ease,color .25s ease;}
/* T578: inline-block ONLY for an inline run, which needs it to take a
scale at all. A promoted piece IS the each, drawn the same in the editor, the show, the strip and every export (parasDraw in 20-notes-and-tables.js). paraDecorate puts each one where it goes -- a margin for its level, so the box indent (.an-tx's padding, --an-ind) composes with it -- and gives one with a marker its kind and number (list-style-type and counter-set: the browser's own dots and counters, so a bullet is the shape every list here has always had). The marker is the paragraph's ::marker, OUTSIDE it, in the margin: 1.7em at the first level, the gutter T195 settled on. A margin and not a padding, because an outside marker sits outside the box it marks -- and because each paragraph carries its own, each column of a two-column box has its gutter (the show's single list had one, for the first column). */ .an-p{margin:0;} .an-p[data-list]{display:list-item;margin-top:.18em;margin-bottom:.18em;} /* T571: a marker's own colour and size (the words keep theirs) */ .an-p::marker{color:var(--an-lc,currentColor); font-size:calc(var(--an-ls,1) * 1em);} /* a closing bracket is the one shape the built-in list styles cannot say: a counter style of its own, so 1) 2) 3) counts on paragraph by paragraph as 1. 2. 3. does (a ::marker's counter() only showed the number a paragraph carried, so every paragraph had to carry one) */ @counter-style jv-paren{system:extends decimal;suffix:") ";} /* a line break INSIDE a paragraph (Shift+Enter) is only a line break -- the gap between paragraphs is theirs (.an-tx br, below, is a Markdown box's) */ .an-tx .an-p br{display:inline;margin-top:0;} /* columns break between paragraphs, and a margin at a break is cut off: the first column's first paragraph would start .18em below the next column's */ .an-cols>.an-p:first-child{margin-top:0;} /* T231: the slide column picks slides, so it gets the same two buttons the table has, and says how many are picked. */ .dg-picks{display:flex;align-items:center;gap:6px;flex-wrap:wrap; margin:8px 0 4px;} .dg-pickn{font-family:var(--sans);font-size:11px;color:var(--chrome-ink-2);} /* ---- T230: THE BOARD SHOWS THE REAL BOXES ----------------------------- The dragged rectangle is the default this style stamps -- thicker, amber, and glowing. Behind it, every box that actually wears the style, and on request everything else, one colour per kind. */ .dg-real{position:absolute;border:1px solid rgba(240,168,72,.55); border-radius:3px;background:rgba(240,168,72,.07);pointer-events:none; overflow:hidden;} /* T279: a box that WEARS this style and no longer keeps to it. Two channels, not one -- double-weight border and a corner badge -- so it survives a colour-blind reader and the light theme. (T367 removed the amber-dashed prototype it also had to differ from.) */ .dg-real.dg-off{border-width:2px;border-style:solid; border-color:rgba(240,168,72,.95); background:color-mix(in srgb,#f0a848 16%,transparent);} .dg-real.dg-off::after{content:"!";position:absolute;top:-1px;right:2px; font:700 9px var(--sans);color:var(--warning);line-height:1;} .dg-offnote{margin-top:6px;font-family:var(--mono);font-size:10px; letter-spacing:.06em;color:var(--warning);} .dg-offnote[hidden]{display:none!important;} .dg-other{position:absolute;border:1px dashed currentColor; border-radius:3px;opacity:.55;pointer-events:none; border-color:#8aa0b0;overflow:hidden;} .dg-key{display:flex;align-items:center;gap:10px;flex-wrap:wrap; margin:0 0 12px;font-family:var(--sans);font-size:11.5px; color:var(--chrome-ink-2);} .dg-keyck{display:inline-flex;align-items:center;gap:6px;cursor:pointer;} .dg-keyit{display:inline-flex;align-items:center;gap:5px;} .dg-keyit::before{content:"";width:11px;height:11px;border-radius:3px; border:1px dashed var(--dg-kc,#8aa0b0);} /* WHERE THEY ARE, GROUPED (2026-09-07). One row per place, its count, and the slides in it as chips you can press. */ .dg-place{flex:1 0 100%;display:flex;flex-wrap:wrap;align-items:baseline; gap:4px 8px;padding:4px 0;border-top:1px solid #ffffff12;} /* T367: the group you picked, and the rows it owns */ .dg-place.on{border-color:var(--cyan); background:color-mix(in srgb,var(--accent) 10%,transparent);} .dg-placehead.on{color:var(--cyan);} .dgt-c.dgt-inplace{background:color-mix(in srgb,var(--accent) 12%,transparent);} .dg-placehead{font-size:11px;opacity:.85;flex:0 0 auto;} .dg-placeslides{display:flex;align-items:center;flex-wrap:wrap;gap:3px;} .dg-placeslides-label{margin-right:3px;color:var(--chrome-ink-3);} .dg-slidechip{font-family:var(--mono);font-size:10px;line-height:1; padding:2px 5px;border-radius:4px;cursor:pointer;color:var(--chrome-ink-2); background:none;border:1px solid var(--border-strong,#ffffff26);} .dg-slidechip:hover{border-color:color-mix(in srgb,var(--accent) 55%, transparent);background:color-mix(in srgb,var(--accent) 14%, transparent);color:var(--chrome-ink);} /* the board's own bubble: what is under the pointer, and a way there */ .dg-bub{position:absolute;z-index:30;min-width:120px;max-width:230px; display:flex;flex-direction:column;gap:2px;padding:4px; background:var(--chrome-2,#16273a);border:1px solid #ffffff2e; border-radius:7px;box-shadow:0 10px 26px #0009;} /* display:flex was beating the hidden attribute, so an EMPTY bubble sat over the key's checkbox from the moment the board was drawn (the "Show everything else" label had a box through it, 2026-09-12) */ .dg-bub[hidden]{display:none!important;} .dg-bubline{text-align:left;font-family:var(--sans);font-size:11px; line-height:1.25;padding:3px 6px;border-radius:4px;cursor:pointer; color:var(--chrome-ink);background:none;border:1px solid transparent;} .dg-bubline:hover{background:color-mix(in srgb,var(--accent) 18%, transparent);border-color:color-mix(in srgb,var(--accent) 45%, transparent);color:var(--chrome-ink);} .dg-bubmore{font-size:10px;opacity:.7;padding:0 6px 2px;} .dg-keyit.dg-keymine::before{border:2px solid var(--amber,#f0a848); background:rgba(240,168,72,.18);} /* the table's boxes were as wide as their column; a percentage never needs five digits */ .dgt-n{max-width:74px;} .dgt-tx{width:100%;min-width:0;height:24px;padding:0 6px; box-sizing:border-box;font-family:var(--sans);font-size:12px; color:#e8f1f8;background:#ffffff0d;border:1px solid #ffffff22; border-radius:5px;} .dgt-tx:focus{border-color:var(--cyan);outline:none;} .dgt-lab{overflow:hidden;text-overflow:ellipsis;white-space:nowrap; color:var(--chrome-ink-2);} body.light .dgt-tx{background:var(--input-bg);border-color:var(--border-strong); color:var(--ink);} body.light .dg-grp{background:var(--surface-hover); border-color:var(--line);} /* ---- T229: THE OBJECT'S HISTORY IS A TABLE ---------------------------- Four columns -- when, what changed, what it looked like, and the way back -- because a stack of cards made every state look like an event rather than a row you compare against its neighbours. A big object's preview is a button: a 38px schematic of a table says nothing. */ .oh-head,.oh-row{display:grid; grid-template-columns:96px minmax(0,1fr) 76px 78px; align-items:center;gap:9px;padding:6px 12px;} .oh-head{font-family:var(--sans);font-size:11px;font-weight:600; color:var(--chrome-ink-2);border-bottom:1px solid #ffffff1c;position:sticky;top:0; background:var(--chrome-2,#16273a);z-index:1;} .oh-row{border-left:3px solid transparent;border-bottom:1px solid #ffffff10;} .oh-row.oh-open{grid-template-rows:auto auto;} .oh-c{min-width:0;} .oh-when{font-family:var(--sans);font-size:11.5px;color:var(--chrome-ink-2);} .oh-look{display:flex;align-items:center;} .oh-act{display:flex;justify-content:flex-end;} .oh-prev{font-size:11px;padding:3px 8px;} .oh-big{grid-column:1/-1;width:100%;max-height:none;height:150px; margin-top:6px;} .img-ov .oh-head,.img-ov .oh-row{grid-template-columns:130px minmax(0,1fr) 96px 96px;} .img-ov .oh-list{display:block;} body.light .oh-head{background:var(--chrome-2);} /* ---- T228: THUMBNAILS MEANS THUMBNAILS --------------------------------- The strip's Thumbnails view still printed every slide's title beside the picture, which is what "Thumbnails and headings" is for (2026-09-03, user: "I don't know why the thumbnails only view for a slide has the title still"). */ #film-list[data-fv="thumb"] .film-t{display:none;} /* ...and the current slide keeps its name, because that row is the inline editor and the name is its heading */ #film-list[data-fv="thumb"] .film-row.current .film-t{display:block;} /* ---- T227: KINDS OF BULLET, KINDS OF NUMBERING ---------------------- A text box's markers are its paragraphs' (T623, above). These are the levels of a list in a MARKDOWN box, which notesHtml draws as ul/ol. */ .an-tx.an-md li{margin:.18em 0;white-space:pre-wrap;} /* (descendants, not children) */ .an-tx.an-md ul ul, .an-tx.an-md ol ul{list-style:circle;margin:0;padding-left:1.5em;} .an-tx.an-md ul ul ul, .an-tx.an-md ol ul ul{list-style:square;} .an-tx.an-md ol ol, .an-tx.an-md ul ol{list-style:lower-alpha;margin:0; padding-left:1.25em;} .an-tx.an-md ol ol ol, .an-tx.an-md ul ol ol{list-style:lower-roman;} /* text reads as draggable, and only turns into a text cursor once you are actually typing in it */ .deck.editing .an-text,.deck.editing .an-title{cursor:move;} .deck.editing .an-item.an-editing{cursor:auto;} .deck.editing .an-item.an-editing .an-tx{cursor:text;} .an-handle{cursor:move;color:var(--chrome-ink-2);font-size:.65em;flex:none; user-select:none;margin-top:.3em;} .an-handle:hover{color:#fff;} .an-arrow-line{fill:none;} .an-arrow-line.sel{filter:drop-shadow(0 0 5px color-mix(in srgb,var(--accent) 80%,transparent));} .an-arrow-hit{stroke:transparent;stroke-width:16;fill:none;} .deck.editing .an-arrow-hit{cursor:move;} /* z-index 6, above the arrows' svg (5): while editing an arrow's grab path is up there (T585), and one attached at an edge would otherwise sit on that edge's handle */ /* the grips are the EDITOR's, so their ring and face are the app scheme's chrome, read on the stage -- inside a .slide the chrome palette is pinned to the page's (T626), and a Light-scheme grip lost its white ring on a navy slide */ .deck-stage{--grip-ring:var(--chrome-0,#0b141d);--grip-face:var(--chrome-1,#0e1926);} /* ...and their colour, on a dark page under a light scheme: the light schemes' accents are dark (they are inks on paper), so the selection outline and the grips went #0e6174 on navy, 2.6:1. The same accent's soft tone reads there (6.6:1). And the mirror: a dark scheme's accent is pale, so on a white slide the outline was #58c4db, 2.0:1 (1.5:1 in High contrast dark); its deep tone reads there. Editing only, and the one slide on the stage: the show draws no marks. */ body.light .deck.editing .deck-stage .slide:not(.page-light){ --accent:var(--accent-soft);} body:not(.light) .deck.editing .deck-stage .slide.page-light{ --accent:var(--accent-deep);} .an-resize{position:absolute;width:15px; height:15px;border-radius:4px;background:var(--cyan); border:2px solid var(--grip-ring,#0b141d);display:none;z-index:6;} .an-rs-se{right:-7px;bottom:-7px;cursor:nwse-resize;} .an-rs-nw{left:-7px;top:-7px;cursor:nwse-resize;} .an-rs-ne{right:-7px;top:-7px;cursor:nesw-resize;} .an-rs-sw{left:-7px;bottom:-7px;cursor:nesw-resize;} /* THE FOUR SIDES (T65). Drawn as BARS rather than squares so which axis a handle owns is readable without hovering for the cursor -- and so they cannot be mistaken for the corner grips at a glance. These rules must stay AFTER .an-resize, whose 15px square they override. */ .an-rs-n,.an-rs-s{left:50%;margin-left:-11px;width:22px;height:9px; cursor:ns-resize;} .an-rs-e,.an-rs-w{top:50%;margin-top:-11px;width:9px;height:22px; cursor:ew-resize;} .an-rs-n{top:-4px;} .an-rs-s{bottom:-4px;} .an-rs-w{left:-4px;} .an-rs-e{right:-4px;} .an-item.sel .an-resize{display:block;} /* T584: a small selected thing (paintSel, under 48px) keeps its middle for moving: no side bars, and the corners stand clear of it */ .an-item.sel.an-small .an-rs-n,.an-item.sel.an-small .an-rs-s, .an-item.sel.an-small .an-rs-e,.an-item.sel.an-small .an-rs-w{display:none;} .an-item.an-small .an-rs-se{right:-16px;bottom:-16px;} .an-item.an-small .an-rs-nw{left:-16px;top:-16px;} .an-item.an-small .an-rs-ne{right:-16px;top:-16px;} .an-item.an-small .an-rs-sw{left:-16px;bottom:-16px;} /* free-rotation grip above the item (drag; Shift snaps to 15 deg) */ .an-rotate{position:absolute;top:-30px;left:50%;margin-left:-8px; width:16px;height:16px;border-radius:50%;background:var(--grip-face,#0e1926); border:2px solid var(--cyan);cursor:grab;display:none;z-index:6;} .an-rotate::after{content:"";position:absolute;left:50%;top:100%; width:2px;height:11px;background:var(--cyan);margin-left:-1px;} .an-item.sel .an-rotate{display:block;} /* T697: a corner's rotate zone, outside its resize grip, the cursor a turning arrow */ .an-rotz{position:absolute;width:18px;height:18px;display:none;z-index:5; cursor:url("data:image/svg+xml;utf8,") 11 11,alias;} .an-item.sel .an-rotz{display:block;} .an-rotz-nw{left:-24px;top:-24px;} .an-rotz-ne{right:-24px;top:-24px;} .an-rotz-se{right:-24px;bottom:-24px;} .an-rotz-sw{left:-24px;bottom:-24px;} .an-item.an-small .an-rotz-nw{left:-34px;top:-34px;} .an-item.an-small .an-rotz-ne{right:-34px;top:-34px;} .an-item.an-small .an-rotz-se{right:-34px;bottom:-34px;} .an-item.an-small .an-rotz-sw{left:-34px;bottom:-34px;} .annot-layer.an-fitting .an-rotz, .deck.editing .an-item.grpsel .an-rotz{display:none!important;} /* T717: two rows of three tiles wide enough for "Rotate right 90°" on a line, and the angle row across all three columns under them */ #fmt-rot-menu{width:300px;} .rot-deg{grid-column:1/-1;display:flex;align-items:center;gap:8px; padding:7px 4px 3px 6px; margin-top:3px;border-top:1px solid var(--chrome-line,#ffffff1a); font-size:12.5px;color:var(--chrome-ink);white-space:nowrap;} .rot-deg-l{display:flex;align-items:center;gap:6px;} .rot-deg-0{margin-left:auto;gap:5px;} .rot-deg-n{width:64px;font:inherit;font-size:12.5px;padding:2px 4px 2px 6px; border:1px solid var(--chrome-line);border-radius:5px; background:var(--chrome-1,#0f1b26);color:var(--chrome-ink);} /* T-review 2026-10-08: never measured as part of a box (fitTexts) */ .annot-layer.an-fitting .an-resize, .annot-layer.an-fitting .an-rotate{display:none!important;} .deck.editing .an-item.grpsel .an-rotate{display:none!important;} .an-endpt{position:absolute;width:15px;height:15px; margin:-7.5px 0 0 -7.5px;border-radius:50%;background:var(--cyan); border:2px solid var(--grip-ring,#0b141d);display:none;z-index:6; pointer-events:none;} .deck.editing .an-endpt.sel{display:block;pointer-events:auto; cursor:grab;} /* movable title / subtitle on title slides */ .an-title{color:var(--tk-heading,#f0f6fa);} /* T480: a text box wearing a heading style reads the same token */ .an-text.an-head{color:var(--tk-heading,#f0f6fa);} .page-light .an-text.an-head{color:var(--tk-heading,#16222c);} /* default lives HERE so .page-light can win; T455 lets the deck's Heading text colour override it when one has been chosen */ .an-title{position:absolute;transform:translate(-50%,-50%); max-width:88%;text-align:center;display:flex;gap:.4em; align-items:flex-start;justify-content:center; font-family:var(--tk-sfont,var(--sans));line-height:1.2;} /* T626: a title slide's title wears the Title style's face, and its subtitle the Subtitle's (--tk-tfont / --tk-sfont, slideContext) */ .an-title.t-main{font-family:var(--tk-tfont,var(--sans));} /* A TITLE'S DESIGNED WEIGHT, and no more than that. This rule sits on the inner span, so it beat the weight the renderer writes on the .an- title div — Bold changed the model and nothing on screen, and a title looked bold whatever you did (2026-08-29, user: "text always seems to revert to bold"). 600 is still what a title looks like when nobody has said otherwise; --ttl-w is set only once you have touched Bold. */ .an-title.t-main .an-tx{font-weight:var(--ttl-w,600); letter-spacing:-.018em;} .slide-titlefree .ttl-eyebrow{position:absolute;top:7%;left:0;right:0; text-align:center;font-family:var(--mono);font-size:11px; letter-spacing:.24em;text-transform:uppercase;color:var(--sl-accent);} /* notebook-cell frames */ /* T456: a notebook frame is a BOX, and "Box background" is the deck colour for one -- it governed the text box and not this, which is the most box-shaped thing on a slide. Same bargain as T455: the chrome colour stays the default, --tk-surface answers when one is chosen. */ /* T465: the frame's edge, like the text box's, is "Lines and edges" once that is chosen; the accent tint stays its default */ .an-cell{position:absolute; background:var(--tk-surface,var(--chrome-1,#0e1926)); border:1.5px solid var(--tk-line,color-mix(in srgb,var(--sl-accent,var(--accent)) 36%,transparent));border-radius:var(--tk-rad,10px);overflow:hidden; display:flex;flex-direction:column;} /* edit mode: an UNSELECTED frame is just its content — transparent (so it never blocks what's behind), no border, no title header. The border, title, Replace and part-picker all return only when the frame is SELECTED, so you can read the slide as it will present. */ .deck.editing .an-cell{cursor:move;background:none;border-color:transparent;} .deck.editing .an-cell.sel{border-color:var(--cyan);background:color-mix(in srgb,var(--chrome-0,#0b141d) 53%,transparent);} /* light pages: the placeholder/selected frame washes must flip too — these outrank the dark rules above by the extra .page-light class (2026-08-05: white posters showed navy placeholder boxes) */ .deck.editing .page-light .an-cell.sel{background:#ffffffd0;} .deck.editing .page-light .an-cell.empty{background:#00000008; border-color:#00000030;} /* an EMPTY frame keeps its dashed dark placeholder box (a card goes here) */ .deck.editing .an-cell.empty{background:color-mix(in srgb,var(--chrome-1,#0e1926) 60%,transparent);border-color:color-mix(in srgb,var(--accent) 36%,transparent);} /* the title header is an OVERLAY (out of flow) shown only when selected, so selecting a frame never reflows/shrinks the figure underneath it */ .deck.editing .an-cell .an-cellhead, .pane.filled .an-cellhead{position:absolute;top:0;left:0;right:0;z-index:2; display:none;padding:7px 30px 10px 12px; background:linear-gradient(color-mix(in srgb,var(--chrome-0,#0b141d) 88%,transparent),color-mix(in srgb,var(--chrome-0,#0b141d) 0%,transparent));} .deck.editing .an-cell.sel .an-cellhead, .pane.filled.active .an-cellhead{display:flex;} .deck:not(.editing) .an-cell.empty{display:none;} /* clean playback: a frame is just its content — no header title, no badge, no frame border (the editor/builder keep them for orientation) */ .vpage .an-cell{border:none;background:none;} .vpage .an-cellhead{display:none;} /* playback: a framed cell is just its content (no dark card box / cyan border), so a shape-crop reads as the shape even on slides without a code trace */ .deck:not(.editing) .deck-stage .an-cell{border:none;background:none;} .deck:not(.editing) .deck-stage .an-cellhead{display:none;} .an-cellhead{flex:none;display:flex;align-items:center;gap:8px; padding:8px 30px 0 12px;min-width:0;} .an-cellhead-t{font-size:13px;font-weight:600;color:#dbe7ef; overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1; min-width:0;} .an-cellcap{flex:none;font-family:var(--serif);font-size:12.5px; color:var(--chrome-ink);padding:0 12px 9px;margin:0;overflow:hidden; display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;} .an-cell .cardbody{flex:1;min-height:0;display:flex; flex-direction:column;padding:8px;} /* the .cb-fig figure-part wrapper must pass the flex height through in slide frames, else .figframe's flex:1 fit-to-frame sizing is inert and plots clip */ .an-cell .cb-fig,.spane .cb-fig,.slide-fig .cb-fig{flex:1;min-height:0; display:flex;flex-direction:column;} .an-cell .figframe{flex:1;min-height:0;display:flex; align-items:center;justify-content:center;overflow:hidden; border:none;padding:6px;} /* a frame wider/taller than its figure shows TRANSPARENT space around the plot, not a white box (the plot keeps its own background) */ .an-cell .figframe,.spane .figframe{background:none;} .an-cell .figframe+.figframe{border-top:1px solid #ffffff10;} .an-cell .figpager{flex:1;min-height:0;display:flex; flex-direction:column;} .an-cell .figpager .figpage{display:none;} .an-cell .figpager .figpage.current{flex:1;min-height:0;display:flex; flex-direction:column;} .an-cell .fp-btn{background:transparent;border-color:#ffffff22; color:#cdd9e3;} .an-cell .fp-count{color:var(--chrome-ink-2);} .an-cell .cardbody.mdclamp,.spane .cardbody.mdclamp{max-height:none;} .an-cell .cardbody.mdclamp::after, .spane .cardbody.mdclamp::after{display:none;} .spane .figpager{flex:1;min-height:0;display:flex; flex-direction:column;} .spane .figpager .figpage.current{flex:1;min-height:0;display:flex; flex-direction:column;} .an-cell .figframe img{max-width:100%;max-height:100%;width:auto; height:auto;object-fit:contain;margin:0;} /* a FIGURE frame is just the plot: no inner padding, and after render the frame snaps to the image's aspect ratio (snapFigAspect) — so the selection outline and resize handle sit exactly on the plot, with no letterbox gap and no title header (the tooltip + Locate in notebook carry its name) */ .an-cell.an-figonly{border-radius:4px;} .an-cell.an-figonly .cardbody{padding:0;} .an-cell.an-figonly .figframe{padding:0;} /* the frame already matches the plot's aspect, so filling it (up- OR down-scaling) keeps the plot edge-to-edge under the outline */ .an-cell.an-figonly .figframe img{width:100%;height:100%; max-width:none;max-height:none;object-fit:contain;} .an-cell .note{flex:1;min-height:0;overflow:auto; background:var(--nb-bg,var(--output-paper)); color:var(--nb-tx,var(--output-ink-2));border-radius:6px;padding:10px 14px; font-size:13px;} /* Auto-generated decks are for presenting prose, not inspecting notebook cards. At the 1280x720 reference 28px is 21pt: the same Body default as a new text box. Remove the notebook-card paper, padding and scroll frame so a markdown cell reads as slide copy; its measured box is chosen by autoDeckBuild at this line height. Selection chrome still wins in edit. */ .an-cell.an-auto-note{background:transparent;border-color:transparent;} .an-auto-note .cardbody{padding:0;} .an-auto-note .note{overflow:hidden;background:transparent;color:#fff; border-radius:0;padding:0 4px;font-size:28px;line-height:1.35;} .an-auto-note .note *{color:inherit;} /* a recoloured markdown card carries its text colour to every child (headings, lists, bold) so the whole note reads in the chosen colour */ .an-cell[style*="--nb-tx"] .note, .an-cell[style*="--nb-tx"] .note *{color:var(--nb-tx);} /* T626 review: A NOTE ON A SLIDE IS THE SLIDE'S, NEVER THE READER'S. app.css keeps body:not(.light) .note (0,2,1) for custom views, and it outranked every note rule here: under the Dark app scheme a note frame was the reader's #c4d0da on its white paper (1.5:1), and a markdown cell placed as slide copy ignored Body text. A frame's words are its paper's ink (#1b2733 on a light page, as before); slide copy is the deck's Body text, on either page. A table in a note takes its rules from its words, for the same reason (the reader's dark rule made them white on the white frame). */ .slide :is(.an-cell,.slide-fig,.spane) .note,.mini-diagram .an-cell .note{ color:var(--nb-tx,var(--output-ink-2));} .page-light .an-cell .note{color:var(--nb-tx,#1b2733);} .slide .an-auto-note .note,.mini-diagram .an-auto-note .note{ color:var(--nb-tx,var(--tk-ink,#fff));} .page-light .an-auto-note .note{color:var(--nb-tx,var(--tk-ink,#1b2733));} /* ...and a caption in it is the note's words (body:not(.light) .note .caption, 0,3,1, gave it the reader's ink as well) */ .slide :is(.an-cell,.slide-fig,.spane) .note .caption, .mini-diagram .an-cell .note .caption{color:inherit;} .slide :is(.an-cell,.slide-fig,.spane) .note :is(th,td), .mini-diagram .an-cell .note :is(th,td){ border-color:color-mix(in srgb,currentColor 22%,transparent);} .slide :is(.an-cell,.slide-fig,.spane) .note th, .mini-diagram .an-cell .note th{ background:color-mix(in srgb,currentColor 6%,transparent);} .an-cell .jv-xr,.an-cell pre.result,.an-cell pre.stream{ overflow:auto;min-height:0;} .an-cell.empty{align-items:center;justify-content:center; border-style:dashed;background:color-mix(in srgb,var(--chrome-1,#0e1926) 60%,transparent);} .an-cellpick{background:none;border:none;color:#7fb6c6; font-family:var(--mono);font-size:11px;letter-spacing:.05em; cursor:pointer;padding:14px;text-align:center;line-height:1.5;} .an-cellpick:hover{color:#fff;} .an-cellbtn{position:absolute;top:5px;right:5px;z-index:3;display:none; background:color-mix(in srgb,var(--chrome-1,#0e1926) 93%,transparent);border:1px solid color-mix(in srgb,var(--accent) 40%,transparent);border-radius:6px; color:#7fd0e0;font-family:var(--sans);font-size:11px;padding:4px 9px; cursor:pointer;} /* Replace shows only for the SELECTED frame (not on hover) — declutter */ .deck.editing .an-cell.sel .an-cellbtn{display:block;} .an-cellbtn:hover{color:#fff;border-color:var(--cyan);} /* which part of a cell a frame shows: code / figure / output */ .an-cellpart{font-family:var(--mono);font-size:9px;letter-spacing:.08em; text-transform:uppercase;color:#7fb6c6;background:color-mix(in srgb,var(--accent) 13%,transparent); border-radius:4px;padding:1px 6px;flex:none;} /* the code/figure/output picker sits along the BOTTOM of the frame so it never covers the title header or the part badge at the top */ .cellparts{position:absolute;bottom:5px;left:5px;right:5px;z-index:5; display:none;gap:3px;flex-wrap:wrap;justify-content:center;} /* the part-picker shows only for the SELECTED frame (not on hover) */ .deck.editing .an-cell.sel .cellparts, .pane.filled.active .cellparts{display:flex;} .cellpartbtn{font-family:var(--sans);font-size:11px;letter-spacing:0; background:color-mix(in srgb,var(--chrome-1,#0e1926) 93%,transparent);border:1px solid #ffffff2b;border-radius:5px; color:var(--chrome-ink);padding:3px 7px;cursor:pointer;line-height:1;} .cellpartbtn.on{background:var(--cyan-deep);border-color:var(--cyan-deep); color:var(--on-accent-deep,#fff);} .cellpartbtn:hover{border-color:var(--cyan);color:var(--chrome-ink);} .cellpartbtn.split{color:var(--chrome-ink-2);} /* the same part-picker, hosted in the top ribbon's Object group */ .rbn-partslot{display:inline-flex;align-items:center;} .rbn-partslot[hidden]{display:none;} #fmt-parts .cellparts{position:static;display:inline-flex;gap:6px; flex-wrap:nowrap;bottom:auto;left:auto;right:auto;z-index:auto;} /* in the ribbon the figure/code/output/split pills dress like every other ribbon button — same face, same size */ #fmt-parts .cellpartbtn{font-family:var(--sans);font-size:12px; letter-spacing:normal;background:var(--rbn-btn,#ffffff0a); border:1px solid var(--rbn-btn-bd,#ffffff22); border-radius:6px;color:var(--chrome-ink,#cdd9e3);padding:0 9px; height:var(--rbn-btn-h,26px);line-height:normal; display:inline-flex;align-items:center;gap:5px;} #fmt-parts .cellpartbtn .bic{width:14px;height:14px;vertical-align:0;} #fmt-parts .cellpartbtn:hover{border-color:var(--cyan);color:var(--chrome-ink);} #fmt-parts .cellpartbtn.on{background:var(--cyan-deep); border-color:var(--cyan-deep);color:var(--on-accent-deep,#fff);} /* the Layouts dropdown: the whole template catalog, off the panel and into a ribbon menu */ /* T212: the Change layout gallery is the one tile, wrapped, no scrollbar */ .sh-menu.lay-menu{display:block;width:580px;max-height:none; overflow:visible;padding:8px;} .lay-menu .lay-picker{margin:0;display:flex;flex-wrap:wrap;gap:6px; max-height:none;overflow:visible;} .lay-menu .lay-picker .dbtn.lay{flex:0 0 var(--rbn-tile-w); width:var(--rbn-tile-w);height:var(--rbn-tile-h); padding:3px 3px;align-items:center;} .lay-menu .lay-picker .layico2{width:calc(var(--rbn-tile-w) - 22px);} /* catalog section headings (Slide layouts / Poster layouts) */ .lay-sec{grid-column:1/-1;font-family:var(--mono);font-size:9px; letter-spacing:.14em;text-transform:uppercase;color:var(--chrome-ink-3); padding:7px 2px 1px;} .lay-sec:first-child{padding-top:1px;} /* picking a card for a cell frame */ .pickbar{position:fixed;top:var(--chrome-h);left:var(--presrail-w); right:0;z-index:99;background:var(--cyan-deep); color:var(--on-accent-deep,#fff); padding:9px 16px;font-size:13px;display:flex;gap:12px; align-items:center;box-shadow:0 6px 24px #00000055;} .pickbar[hidden]{display:none;} .pickbar .dbtn{border-color:#ffffff55;color:var(--on-accent-deep);} body.picking .card{cursor:copy;} body.picking .card:hover{outline:2px solid #fff;outline-offset:2px;} /* the armed-match bar is a SIBLING of .deck, like the pickbar and every other overlay here — and .deck is fixed at z-index 100, so this has to be fixed and above it or it renders underneath the editor it is describing. It covers the thin top bar for the duration, which is honest: you are standing in a mode. */ .matchbar{position:fixed;top:0;left:0;right:0;z-index:150;} .matchbar .dc-menu{max-height:min(64vh,460px);overflow-y:auto; min-width:230px;right:0;left:auto;} .mp-head{display:flex;gap:5px;padding:2px 4px 6px;} .mp-b{padding:2px 8px;font-size:10.5px;} .mp-menu .find-ck{padding:2px 5px;border-radius:5px;color:var(--chrome-ink);} .mp-menu .find-ck:hover{background:#ffffff0d;} /* while a match is armed the canvas is a PICKER: say so with the cursor, and light up whatever is under the pointer so it is obvious what the next click will take */ .deck.matching .annot-layer{cursor:copy;} .deck.matching .an-item:hover{outline:2px solid var(--cyan); outline-offset:2px;} .ms-box{width:min(560px,94vw);} /* the three spacing presets are a segmented run in the ribbon (T219): a three-column grid had put the caption in a column of its own and wrapped Airy under it */ /* ---------- arrangements ---------- Each row shows what it would arrange TO, drawn by the same miniDiagram the film strip uses, so the preview cannot drift from the canvas. */ .ar-box{width:min(880px,95vw);} /* the one thing you can do with an empty library sits under it, as a button the width of the column (T219) */ .ar-savebtn{display:flex;align-items:center;justify-content:center;gap:7px; margin-top:6px;} .ar-lib,.ar-sug{overflow-y:auto;max-height:52vh;padding-right:3px;} .ar-row{display:flex;align-items:center;gap:8px;padding:5px 4px; border-radius:7px;} .ar-row:hover{background:#ffffff0d;} .ar-th{flex:none;width:92px;} .ar-th .mini-diagram{width:92px;height:52px;min-height:0;} .ar-mid{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;} .ar-name{background:none;border:1px solid transparent;color:#dce6ee; font-size:12px;font-family:var(--sans);border-radius:5px;padding:2px 5px; outline:none;width:100%;box-sizing:border-box;} .ar-name:hover{border-color:#ffffff1f;} .ar-name:focus{border-color:var(--cyan);background:var(--chrome-0,#0b141d);} .ar-sub{font-family:var(--sans);font-size:11px;color:var(--chrome-ink-2); padding-left:6px;} .ar-row:hover .fp-ctr{display:flex;} .ar-srow{display:flex;align-items:center;gap:6px;padding:3px 4px; border-radius:5px;} .ar-srow:hover{background:#ffffff0d;} .ar-st{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis; white-space:nowrap;} .ar-ssel{flex:none;max-width:46%;font-size:11px;padding:2px 4px; border-radius:5px;background:var(--chrome-1,#0e1926); border:1px solid #ffffff26;color:#dce6ee;font-family:var(--sans);} body.light .ar-name{color:var(--ink);} body.light .ar-name:focus{background:var(--input-bg);} body.light .ar-ssel{background:var(--input-bg); border-color:var(--border-strong); color:var(--ink);} body.light .ar-row:hover,body.light .ar-srow:hover{ background:var(--surface-hover);} /* ---------- style sets ---------- A gallery, not a menu: every card is SET IN the type it offers, because a look is chosen by looking (2026-08-22). */ .ss-box{width:min(880px,95vw);} /* T317: a ready-made look reads as an offer, not a thing you already have -- dotted edge, and the note where the point size would be */ .jv-preset{border-style:dashed;opacity:.92;} .jv-preset:hover{opacity:1;} /* T315: the two bands of the gallery, and a theme card's palette */ .ss-band{font-family:var(--sans);font-size:11px;letter-spacing:.06em; text-transform:uppercase;color:var(--chrome-ink-3);margin:10px 0 4px;} /* T595: the colour band's own switch, under its label */ .ss-bgck{margin:0 0 7px;width:max-content;gap:6px;cursor:pointer; font-size:12px;} .ss-chips{display:flex;gap:4px;padding:6px;border-radius:6px;margin:6px 0;} .ss-chip{flex:1 1 0;height:14px;border-radius:3px; border:1px solid #00000033;} .ss-tspec{padding:6px 8px;border-radius:6px;font-family:var(--sans); font-size:12px;line-height:1.5;} .ss-grid{display:grid;gap:9px;overflow-y:auto;max-height:62vh; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); padding:1px;} .ss-card{position:relative;text-align:left;display:flex; flex-direction:column;gap:7px;padding:11px 12px 10px;cursor:pointer; background:var(--chrome-0,#0b141d);border:1px solid #ffffff1f; border-radius:9px;color:#dce6ee;font-family:var(--sans);} .ss-card:hover{border-color:var(--cyan); background:color-mix(in srgb,var(--accent) 8%,var(--chrome-0,#0b141d));} .ss-name{font-family:var(--mono);font-size:10px;letter-spacing:.14em; text-transform:uppercase;color:var(--accent);display:flex; align-items:center;gap:6px;} .ss-mine{font-size:10px;letter-spacing:.06em;padding:1px 6px; border-radius:8px;background:#ffffff14;color:var(--chrome-ink-2);} /* T470: the card just saved, lit for a moment */ .ss-card.ss-new{border-color:var(--accent,var(--cyan)); box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 45%,transparent); transition:box-shadow .5s,border-color .5s;} .ss-spec{display:flex;flex-direction:column;gap:3px;min-height:82px; overflow:hidden;} .ss-line{line-height:1.2;overflow:hidden;text-overflow:ellipsis; white-space:nowrap;} .ss-note{font-size:10.5px;line-height:1.4;color:var(--chrome-ink-2);} .ss-del{position:absolute;top:6px;right:7px;font-size:10px;color:var(--chrome-ink-2); padding:2px 4px;border-radius:4px;} .ss-del:hover{background:var(--surface-active);color:var(--chrome-ink);} body.light .ss-card{background:var(--chrome-1,#f4f7fa); border-color:var(--line);color:var(--ink);} body.light .ss-note{color:var(--ink-3);} body.light .mp-menu .find-ck{color:var(--ink);} body.light .mp-menu .find-ck:hover{background:var(--surface-hover);} /* pane editor: the current slide as clickable regions */ /* the current slide's interactive editor — the single big view in the merged slides list (fills the width; drag the panel edge to resize) */ .pane-editor{aspect-ratio:var(--page-ar,16/9);display:grid;gap:6px; background:var(--chrome-0,#0b141d); border:1px solid #ffffff22;border-radius:8px;padding:6px; margin:0;width:100%;overflow:hidden;} .pane-editor.full{grid-template-columns:1fr;grid-template-rows:1fr;} .pane-editor.halves{grid-template-columns:1fr 1fr;grid-template-rows:1fr;} .pane-editor.quarters{grid-template-columns:1fr 1fr; grid-template-rows:1fr 1fr;} .pane{position:relative;background:var(--chrome-4,#12202e);border:1px dashed #ffffff26; border-radius:6px;cursor:pointer;display:flex;align-items:center; justify-content:center;padding:6px 18px 6px 8px;overflow:hidden; transition:border-color .15s,background .15s;} /* a filled frame shows the ACTUAL slide content (an .an-cell fills it), so the builder preview is exactly what will be presented */ .pane.filled{padding:0;background:none;border:none;overflow:visible;} .pane.filled .an-cell{position:absolute;inset:0;width:auto;height:auto; cursor:pointer;pointer-events:none;} .pane.active{outline:2px solid var(--cyan);outline-offset:1px;} .pane.empty.active{border-color:var(--cyan);border-style:solid; background:color-mix(in srgb,var(--accent) 9%,transparent);box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 30%,transparent) inset;} .pane.empty.active .pane-t{color:var(--cyan);} .pane-t{font-size:10.5px;line-height:1.35;color:var(--chrome-ink);text-align:center; overflow:hidden;display:-webkit-box;-webkit-line-clamp:3; -webkit-box-orient:vertical;} .pane.empty .pane-t{color:var(--chrome-ink-3);font-family:var(--mono);font-size:9.5px; letter-spacing:.1em;text-transform:uppercase;} .pane-x{position:absolute;top:3px;right:3px;z-index:4;background:color-mix(in srgb,var(--chrome-1,#0e1926) 80%,transparent); border:1px solid #ffffff22;border-radius:5px;color:var(--chrome-ink); cursor:pointer;font-size:11px;padding:2px 6px;line-height:1;} .pane-x:hover{color:var(--chrome-ink);border-color:var(--cyan);} /* filmstrip: mini slide thumbnails */ .film-list{flex:1;overflow-y:auto;min-height:60px;margin:0 -4px; padding:0 4px;} .film-row{display:flex;align-items:center;gap:4px;border-radius:7px; margin-bottom:3px;cursor:grab;} .film-row.current{background:color-mix(in srgb,var(--accent) 11%,transparent);outline:1px solid color-mix(in srgb,var(--accent) 33%,transparent); align-items:flex-start;} .film-row.dragging{opacity:.45;} .film-row.drop-above{box-shadow:0 -2px 0 var(--cyan);} .film-row.drop-below{box-shadow:0 2px 0 var(--cyan);} .film-label{flex:1;display:flex;align-items:center;gap:9px;background:none; border:none;color:var(--chrome-ink);font-size:11.5px;padding:5px 6px;cursor:pointer; text-align:left;min-width:0;font-family:var(--sans);} .film-label .film-t{overflow:hidden;text-overflow:ellipsis; white-space:nowrap;} /* T228: a slide number you can read. It was 9.5px in the mono face (2026-09-03, user: "the slide numbers are way too small"). */ .film-label .film-n{font-family:var(--mono);font-size:12.5px; color:var(--chrome-ink-2);width:22px;flex:none;text-align:right;} /* Optional and omitted are words in the strip, not secret state in a context menu. Only the thumbnail/title dim: controls and the current inline editor stay fully usable (T50). */ .film-marks{display:flex;align-items:center;gap:3px;margin-left:auto; flex:none;} .film-mark{font-family:var(--mono);font-size:7.5px;letter-spacing:.04em; line-height:1;padding:2px 4px;border:1px solid currentColor; border-radius:8px;white-space:nowrap;} .film-row.opt .film-mark.opt{color:var(--warning);} .film-mark.cut{color:var(--chrome-ink-2);} /* ▸N — this slide has N builds. Deliberately the SAME amber as .an-buildno: the strip mark and the on-slide bubbles are one fact shown at two zoom levels, and the colour is the only thing tying them together once the bubbles are gated behind the pane (T76). */ .film-mark.anim{color:var(--amber);} .film-row.cut:not(.current) .mini-diagram, .film-row.cut:not(.current) .film-t, .film-row.cut:not(.current) .film-n{opacity:.42;} .film-row.cut{background-image:linear-gradient(90deg,#71879a 0 2px, transparent 2px);} /* T549: FLIPPED CONTENT. The item's box, handles and grip never flip; what is drawn inside does -- the picture (or the window onto it), the shape, a notebook figure's picture, a book's page, a clip. A text box's words are never mirrored (nor are they given the flag). */ .an-item{--an-sx:1;--an-sy:1;} .an-item.an-flh{--an-sx:-1;} .an-item.an-flv{--an-sy:-1;} .an-item.an-flh>.an-imgel,.an-item.an-flv>.an-imgel, .an-item.an-flh>.an-imgwin,.an-item.an-flv>.an-imgwin, .an-item.an-flh>.an-shape-svg,.an-item.an-flv>.an-shape-svg, .an-item.an-flh .cardbody img,.an-item.an-flv .cardbody img, .an-item.an-flh.an-flip img,.an-item.an-flv.an-flip img, .an-item.an-flh video,.an-item.an-flv video{ transform:scale(var(--an-sx),var(--an-sy));} /* T550: the Corrections window's rows are short; keep them on a line */ .pic-panel .opt-row{flex-wrap:nowrap;} /* T565: an accessibility finding, and its fix beside it */ .a11y-row{display:flex;flex-direction:column;align-items:stretch;gap:6px;} .a11y-go{all:unset;cursor:pointer;display:flex;flex-direction:column; gap:2px;} .a11y-fix{align-self:flex-start;height:24px;font-size:12px;} /* T575: a finger on the editing canvas edits it rather than scrolling or zooming the page; presenting, only a sideways swipe is the show's */ .deck.editing .annot-layer{touch-action:none;} .deck:not(.editing) .deck-stage{touch-action:pan-y pinch-zoom;} /* T573: the Shapes window's search, in its header */ .strip-all-h{display:flex;align-items:center;gap:8px;} .strip-find{flex:1;min-width:0;max-width:260px;margin-left:auto; font:inherit;font-size:12px;text-transform:none;letter-spacing:0; padding:4px 8px;border-radius:6px;border:1px solid var(--line); background:var(--chrome-1,#0f1b26);color:var(--chrome-ink,#d7e3ec);} .strip-find-none{padding:6px 10px;font-size:12px; color:var(--chrome-ink-2,#93a8ba);} /* T553: the Duration box beside the transitions */ .trans-dur{flex:none;width:52px;align-self:stretch;font:inherit; font-size:12px;padding:0 2px 0 6px;border:0;border-left:1px solid var(--line);border-radius:0;background:transparent; color:var(--chrome-ink,#d7e3ec);} .trans-dur:disabled{opacity:.45;} /* T672: THE COMBINE TAB'S SETTINGS (#pz-dlg) -- a choice a line, a sentence under it saying what it does, in sections */ .aa-box.pz-box{width:min(600px,94vw);} /* T682: sections under a heading and a rule, not boxes whose legend cut through their border (the owner: "comes out weirdly spaced") */ .pz-body{overflow:auto;display:flex;flex-direction:column;gap:0; padding:0 2px 4px;} .pz-set{margin:0;padding:12px 0 14px;border:0; border-top:1px solid var(--chrome-line,#ffffff1a); display:flex;flex-direction:column;gap:8px;min-width:0;} .pz-set:first-child{border-top:0;padding-top:4px;} .pz-set[hidden]{display:none;} .pz-set>legend{float:left;width:100%;padding:0;margin:0 0 2px; font-size:12px;font-weight:600;color:var(--chrome-ink-2,#93a8ba);} .pz-set>legend+*{clear:both;} .pz-opt{display:flex;gap:9px;align-items:flex-start;cursor:pointer; font-size:13px;line-height:1.4;color:var(--chrome-ink);} .pz-opt>input{flex:none;margin:2px 0 0;width:15px;height:15px; accent-color:var(--cyan);cursor:pointer;} .pz-opt b{font-weight:600;} .pz-opt:has(>input:disabled){cursor:default;opacity:.55;} .pz-why{display:block;margin:0;font-size:12px;line-height:1.45; color:var(--chrome-ink-2,#93a8ba);} .pz-why[hidden]{display:none;} /* Close only big ones' two limits, under it and in line with its words */ .pz-lims{display:flex;align-items:center;flex-wrap:wrap;gap:5px; margin:-2px 0 0 24px;font-size:12px;color:var(--chrome-ink-2,#93a8ba);} .pz-num{flex:none;width:56px;font:inherit;font-size:12px; padding:2px 4px 2px 6px;border:1px solid var(--chrome-line); border-radius:5px;background:var(--chrome-1,#0f1b26); color:var(--chrome-ink,#d7e3ec);} .pz-num:disabled{opacity:.45;} .pz-acts{display:flex;flex-wrap:wrap;gap:6px;} .pz-acts[hidden]{display:none;} /* T715: SPLIT (#spl-dlg) -- the Combine dialog's sections; what it will make, a line each: the name, then where its slides are and its size */ .aa-box.spl-box{width:min(460px,94vw);} .spl-box .pz-sel{align-self:flex-start;max-width:100%;} .spl-list{margin:0;padding:0 0 0 22px;max-height:220px;overflow:auto; display:flex;flex-direction:column;gap:3px;font-size:13px; color:var(--chrome-ink);} .spl-list:empty{display:none;} .spl-list b{font-weight:600;} .spl-meta{margin-left:8px;font-size:12px;color:var(--chrome-ink-2,#93a8ba);} .cell-unit{flex:none;padding:0 7px 0 1px;font-size:11px; color:var(--chrome-ink-2,#93a8ba);} /* T548: the Shadow menu's rows show their shadow on a small card */ .shd-sw{display:inline-block;width:18px;height:14px;border-radius:2px; background:var(--chrome-ink-2,#9fb0c0);margin:2px 4px 6px 0;flex:none;} /* T554: a hidden slide, as PowerPoint draws one -- its number struck through, the picture dimmed (by .cut, since the show skips it), and the current slide dimmed too, so hiding the slide you are on shows */ .film-row.hid .film-n{text-decoration:line-through;} .film-row.hid.current .mini-diagram{opacity:.55;} .film-mark.hid{color:var(--chrome-ink-2);} /* the selected slide expands: number on top, big editor, title below */ .film-row.current .film-label{flex-direction:column;align-items:stretch; gap:6px;cursor:default;} .film-row.current .film-n{align-self:flex-start;text-align:left; color:var(--cyan);} .film-row.current .film-marks{align-self:flex-start;margin-left:0;} .film-view{width:100%;min-width:0;} .film-view .pane-editor{width:100%;margin:0;} /* --mini-h is read back in JS (MINI_H in deck.js) to size thumbnail type and stroke: both are page percentages and have to become real pixels somewhere. Change one, change the other. */ .mini-diagram{--mini-h:66px;width:116px;height:var(--mini-h);flex:none; display:grid;gap:2px; background:var(--page-bg,var(--chrome-0,#0b141d));border:1px solid #ffffff22;border-radius:4px; padding:2px;overflow:hidden;} .mini-diagram.full{grid-template-columns:1fr;} .mini-diagram.halves{grid-template-columns:1fr 1fr;} .mini-diagram.quarters{grid-template-columns:1fr 1fr; grid-template-rows:1fr 1fr;} .mini-pane{position:relative;overflow:hidden;border-radius:2px; background:#1b2c3e;display:flex;align-items:center; justify-content:center;} .mini-pane img{width:100%;height:100%;object-fit:contain;display:block; background:#fff;} .mini-pane.is-note{background:#eef2f6 repeating-linear-gradient(180deg, #eef2f6 0,#eef2f6 4px,#b9c8d4 4px,#b9c8d4 5px); background-clip:padding-box;border:2px solid #eef2f6;} .mini-pane.is-code{font-family:var(--mono);font-size:8.5px; color:#6f8ba3;background:#101d2a;} .mini-pane.is-fig{background:#2a4761;} .mini-pane.empty{background:var(--tk-surface,var(--chrome-4));} .page-light .mini-pane.empty,.page-light .mini-pane.is-title{ background:var(--tk-surface,#0000000d);} /* pane editor: faint live preview behind the title */ .pane-img{position:absolute;inset:0;width:100%;height:100%; object-fit:cover;opacity:.4;} .pane.filled .pane-t{position:relative;z-index:1;color:#eef4f8; text-shadow:0 1px 3px #000c,0 0 8px #0008;} .film-ctr{display:none;gap:1px;padding-right:5px;flex:none;} .film-row:hover .film-ctr,.film-row.current .film-ctr{display:flex;} .film-mini{background:none;border:none;color:var(--chrome-ink-2);cursor:pointer; font-size:11px;padding:2px 4px;border-radius:4px;} .film-mini:hover{background:#ffffff14;color:#fff;} .addslide{margin-top:8px;} /* Add slide takes the room; Section is the narrower, rarer verb beside it. One row, so the strip loses no height to gaining a second button. */ .film-adds{display:flex;gap:4px;margin-top:8px;} .film-adds .addslide{flex:1;margin-top:0;} .film-adds .addsec{flex:none;} /* both labels on one line at the column's resting 200px. Letting them wrap inside the button is the same sin as an ellipsis: the words are all still there but the control stops reading as one thing. */ .film-adds .dbtn{white-space:nowrap;padding:5px 7px;font-size:11px;} /* ---- section dividers in the strip ----------------------------------- A divider reads as a LABEL over the slides beneath it rather than as another row in the list: no thumbnail, no number, and a rule under it so the eye can see where one run stops and the next starts. */ .film-sec{display:flex;align-items:center;gap:5px;cursor:grab; padding:6px 4px 4px;margin:6px 0 3px;border-radius:6px; border-bottom:1px solid color-mix(in srgb,var(--accent) 30%,transparent);} .film-sec:first-child{margin-top:0;} /* T699: where the next presentation begins, with no heading to say so */ .film-pzline{display:flex;align-items:center;gap:6px;margin:8px 2px 5px; font:600 10.5px var(--sans);color:var(--chrome-ink-2); pointer-events:none;} .film-pzline::before,.film-pzline::after{content:"";height:2px; border-radius:1px;background:var(--pzl,var(--accent));} .film-pzline::before{flex:none;width:10px;} .film-pzline::after{flex:1;min-width:12px;} .film-pzline-t{flex:0 1 auto;min-width:0;overflow:hidden; text-overflow:ellipsis;white-space:nowrap;} .film-sec.dragging{opacity:.45;} .film-sec.drop-above{box-shadow:0 -2px 0 var(--cyan);} .film-sec.drop-below{box-shadow:0 2px 0 var(--cyan);} .film-sec-fold{background:none;border:none;color:var(--chrome-ink-2);cursor:pointer; font-size:10px;padding:1px 3px;border-radius:4px;flex:none;line-height:1;} .film-sec-fold:hover{background:var(--surface-active);color:var(--chrome-ink);} /* T316: the section's colour, on its divider */ .film-sec-dot{flex:none;width:10px;height:10px;border-radius:50%; border:1px solid #ffffff55;padding:0;cursor:pointer;} .film-sec-dot:hover{transform:scale(1.25);} .sw.sw-sec{outline:1px dashed #ffffff66;outline-offset:1px;} /* T681: a section's name as you typed it, in the sans -- as a part's heading (below) and the sheet tabs already show it; it was spaced capitals, so "Introduction" read INTRODUCTION over its slides */ .film-sec-t{flex:1;min-width:0;font-family:var(--sans);font-size:11.5px; font-weight:600;letter-spacing:0;color:var(--accent); overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} .film-sec-n{flex:none;font-family:var(--mono);font-size:9px;color:var(--chrome-ink-3);} .film-sec:hover .film-ctr{display:flex;} /* T601: a divider that is a PART says so -- a tinted rule, and the word "part" as the door to the Parts view */ /* T653: ...and is a heading of its own, not a section's label: a band of its colour down the left, a tinted box, the presentation's mark, its name in the sentence's case over where it lives */ /* T675: the colour and the name, the whole line its own; under it, what it is in two quiet words, and the count (owner: "a bit crowded, and a bit confusing what some of the things like refresh are") */ .film-sec.linked{display:grid;position:relative; grid-template-columns:16px 12px minmax(0,1fr) auto; grid-template-areas:"fold dot name name" ". . kind n"; align-items:center;column-gap:4px;row-gap:1px; padding:6px 5px 6px 4px;margin:8px 0 4px; border:1px solid color-mix(in srgb,var(--part-c,var(--accent)) 40%,transparent); border-left:3px solid var(--part-c,var(--accent)); background:color-mix(in srgb,var(--part-c,var(--accent)) 12%,transparent);} .film-sec.linked .film-sec-fold{grid-area:fold;} .film-sec.linked .film-sec-t{grid-area:name;} .film-sec.linked .film-sec-n{grid-area:n;justify-self:end;} .film-sec.linked .film-sec-dot{grid-area:dot;justify-self:center;} .film-sec.linked .film-part-kind{grid-area:kind;} /* T660: a heading is a door to its run -- it lights as a row does */ .film-sec:hover{background:var(--surface-hover);} .film-sec.linked:hover{ background:color-mix(in srgb,var(--part-c,var(--accent)) 20%,transparent);} /* its rename / remove sit over the top right on hover, never taking a column the name needs */ .film-sec.linked .film-ctr{position:absolute;top:3px;right:3px; padding:1px;border-radius:5px;background:var(--chrome-1,#0e1926);} .film-sec.linked .film-sec-t{font-family:var(--sans);font-size:11.5px; font-weight:600;letter-spacing:0;text-transform:none; color:var(--chrome-ink);} .film-part-kind{min-width:0;font:10.5px var(--sans); color:var(--chrome-ink-3);overflow:hidden;text-overflow:ellipsis; white-space:nowrap;} /* T669: the talk's own slides head themselves in a talk of parts -- the same block, in the chrome's ink rather than a section's colour; it is not a section, so it does not drag */ .film-sec.film-talk{--part-c:var(--chrome-ink-3);cursor:pointer; grid-template-columns:16px minmax(0,1fr) auto; grid-template-areas:"fold name name" ". kind n";} /* the rule the strip folds parts by, in the Parts view (57-parts.js) */ .pf-rule{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px; margin:8px 16px 0;font-size:12px;color:var(--chrome-ink-2);} .pf-rule-sel,.pf-rule-n{font:inherit;font-size:12px;padding:3px 6px; border-radius:6px;border:1px solid var(--border-strong); background:var(--input-bg);color:var(--chrome-ink);} .pf-rule-n{width:64px;} .pf-rule-lim[hidden]{display:none;} body.light .pf-rule{color:var(--ink-2);} /* ---- T654: THE SHEET TABS, along the foot of the slide --------------- A workbook's sheets: a thin bar under the page, its tabs hanging from the bar's top edge, the one on screen lifted, a part wearing its colour and the link mark. Only while editing a deck (a poster has none), and folded away with the ribbon. Auto-hide lays the bar over the page's foot, slid down until it is pointed at (.sheets-peek). */ .deck{--sht-h:30px;} .deck-sheets{display:none;} .deck.editing .deck-sheets:not([hidden]){display:flex;} .deck-sheets{position:relative;flex:none;align-items:stretch;gap:6px; height:var(--sht-h);padding:0 8px 0 6px;border-top:1px solid #ffffff1c; background:var(--chrome-1,#0e1926);} .sht-tabs{display:flex;align-items:stretch;gap:2px;min-width:0; overflow-x:auto;overflow-y:hidden;scrollbar-width:none;} .sht-tabs::-webkit-scrollbar{display:none;} /* T659: a tab keeps its whole name, as a workbook's sheet does. Squeezed to fit, twelve sections read "Topic 2:...", "Topic 3:..." -- the part that tells them apart was the part cut off. Past the bar's end they are counted, and listed, by "N more". */ .sht-tab{flex:none;display:inline-flex;align-items:center; gap:5px;max-width:220px;padding:0 12px;margin-top:-1px; border:1px solid transparent;border-top:none;border-radius:0 0 7px 7px; background:none;color:var(--chrome-ink-2);font:inherit; font-family:var(--sans);font-size:12px;white-space:nowrap; cursor:pointer;box-shadow:inset 0 -2px 0 transparent;} .sht-tab:hover{background:var(--surface-hover);color:var(--chrome-ink);} .sht-tab.on{background:var(--chrome-0,#0b141d);color:var(--chrome-ink); font-weight:600;border-color:#ffffff1c; box-shadow:inset 0 -2px 0 var(--sht-c,var(--accent));} .sht-tab.part{box-shadow:inset 0 -2px 0 var(--sht-c,var(--accent));} .sht-tab.part.on{box-shadow:inset 0 -3px 0 var(--sht-c,var(--accent));} /* the row clips: a ring outside the tab would be cut off */ .sht-tab:focus-visible{outline:2px solid var(--focus);outline-offset:-2px;} .sht-nm{min-width:0;overflow:hidden;text-overflow:ellipsis;} .sht-ic{flex:none;display:inline-flex;color:var(--sht-c,var(--accent));} .sht-ic .bic{width:12px;height:12px;} .sht-dot{flex:none;width:7px;height:7px;border-radius:50%; background:var(--sht-c);} .deck-sheets .sht-btn{align-self:center;flex:none;display:inline-flex; align-items:center;gap:4px;padding:3px 8px;font-size:11.5px; white-space:nowrap;} .deck-sheets .sht-btn[hidden]{display:none;} .deck-sheets .sht-btn .bic{width:12px;height:12px;} /* a drag: the tab picked up dims, a line shows where it will land */ .sht-tab.sht-dragging{opacity:.5;} body.sht-drag-on,body.sht-drag-on *{cursor:grabbing!important; user-select:none!important;} .sht-mark{position:absolute;top:4px;bottom:4px;width:2px;z-index:2; background:var(--accent);border-radius:1px;pointer-events:none;} .sht-mark[hidden]{display:none;} /* every tab, listed: its mark, its name, its slides */ .sht-more-menu .vw-opt{display:flex;align-items:center;gap:6px;} .sht-more-menu .sht-ic{color:var(--sht-c,var(--accent));} .sht-more-nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis; white-space:nowrap;} .sht-more-n{flex:none;font:10px var(--mono);color:var(--chrome-ink-3);} .sht-more-menu .vw-opt.on{font-weight:600; box-shadow:inset 3px 0 0 var(--sht-c,var(--accent));} body.light .deck-sheets{border-top-color:#0000001f;} body.light .sht-tab.on{border-color:#0000001f;} /* a pane docked on the right stops above the bar */ .deck.editing.sheets-on:not(.sheets-auto) .selpane{ bottom:calc(var(--sht-h) + 8px);} /* T699: hiding the ribbon (Ctrl+F1) leaves the bottom tabs where they are -- the presentations are no tool (the owner, 2026-10-30) */ .sht-hot{display:none;} .deck.editing.sheets-auto.sheets-on .sht-hot{display:block;position:absolute; left:0;right:0;bottom:0;height:10px;z-index:69;} .deck.editing.sheets-auto .deck-sheets{position:absolute;left:0;right:0; bottom:0;z-index:70;transform:translateY(100%); transition:transform .16s ease;box-shadow:0 -6px 18px #00000055;} .deck.editing.sheets-auto.sheets-peek .deck-sheets{transform:none;} /* its settings, and its menus: rows down, as the strip's menu has them (.sh-menu is a grid of swatches by default) */ .sht-menu{display:block;width:250px;min-width:0;max-width:min(340px,92vw); max-height:72vh;overflow-y:auto;overflow-x:hidden;} .sht-menu .hd-lab{margin-top:6px;} .sht-menu .hd-lab:first-child{margin-top:0;} .sht-menu .vw-opt{width:100%;text-align:left;} .sht-check{display:flex;align-items:flex-start;gap:6px;padding:4px 10px 8px; font-size:12px;line-height:1.4;color:var(--chrome-ink-2);cursor:pointer;} body.light .sht-check{color:var(--ink-2);} /* T655: the keys' switch, under the fold rule in the Parts view; T665: its words short, the rest behind the "?" after them */ .pk-keys{display:flex;align-items:center;padding:4px 10px 8px;} .pk-keys>.sht-check{padding:0;} .deck-parts .pk-keys{margin:6px 16px 0;padding:0;max-width:760px;} /* ---- T656: A BINDER IN THE STRIP AND ON THE TABS ---------------------- Each presentation of the binder is a heading of its own -- the binder's mark, its name over where it is from, its count -- the one on screen lit over its own slides, the others above and below it, an open one with its slides as the library's pictures. */ .bnd-block{margin:8px 0 4px;} .bnd-head{display:grid;grid-template-columns:16px 15px minmax(0,1fr) auto; grid-template-areas:"fold ic name n" ". . from from";align-items:center; column-gap:4px;row-gap:2px;padding:6px 5px 6px 4px;cursor:pointer; border:1px solid #ffffff22;border-left:3px solid var(--chrome-ink-3); border-radius:6px;background:#ffffff08;color:var(--chrome-ink-2);} .bnd-head:hover{background:var(--surface-hover);color:var(--chrome-ink);} .bnd-head.on{cursor:default;border-left-color:var(--accent); background:color-mix(in srgb,var(--accent) 12%,transparent); color:var(--chrome-ink);} .bnd-fold{grid-area:fold;background:none;border:none;color:inherit; font-size:10px;padding:1px 3px;border-radius:4px;cursor:pointer;} .bnd-fold:disabled{cursor:default;opacity:.7;} .bnd-ic{grid-area:ic;display:inline-flex;} .bnd-ic .bic{width:13px;height:13px;} .bnd-t{grid-area:name;min-width:0;overflow:hidden;text-overflow:ellipsis; white-space:nowrap;font-family:var(--sans);font-size:11.5px; font-weight:600;} .bnd-n{grid-area:n;justify-self:end;font-family:var(--mono);font-size:9px; color:var(--chrome-ink-3);} .bnd-from{grid-area:from;min-width:0;overflow:hidden;text-overflow:ellipsis; white-space:nowrap;font-family:var(--mono);font-size:9px; color:var(--chrome-ink-3);} .bnd-pv{margin:4px 0 0 2px;} .bnd-pv .pv-head{display:none;} .bnd-pv .pv-list{display:flex;flex-direction:column;gap:6px;} /* T661: another presentation's slides read as the strip's own rows -- the number beside the picture, no heading under it (they read as a different list, captioned) */ .bnd-pv .pv-slide{margin:0;cursor:pointer;opacity:.85;flex-direction:row-reverse; justify-content:flex-end;align-items:flex-start;gap:6px;} .bnd-pv .pv-slide figcaption{flex:none;width:18px;font-size:0; text-align:right;padding-top:3px;} .bnd-pv .pv-slide figcaption b{font:10px var(--mono);color:var(--chrome-ink-3);} .bnd-pv .pv-slide:hover{opacity:1;} .bnd-pv .pv-slide:hover .mini-diagram{outline:1px solid var(--accent); outline-offset:1px;} /* ---- T661: THE PICKER -- your presentations to tick, by folder, with their slides beside the list, and both ways in at the foot ---------- */ .bnd-pick .bp-body{flex:1;min-height:0;display:grid; grid-template-columns:minmax(260px,380px) 1fr;gap:16px;padding:12px 16px 0;} .bp-col{display:flex;flex-direction:column;min-height:0;gap:8px;} .bp-find{font:13px var(--sans);padding:6px 10px;border-radius:7px; border:1px solid var(--border-strong);background:var(--input-bg); color:var(--chrome-ink);} .bp-list{flex:1;min-height:0;overflow:auto;display:flex;flex-direction:column; gap:3px;padding:2px;} .bp-dir{display:flex;align-items:center;gap:6px;margin:8px 0 2px 2px; font:600 11px var(--sans);color:var(--chrome-ink-2);} .bp-dir .bic{width:13px;height:13px;} .bp-dir[hidden],.bp-row[hidden],.bp-none[hidden]{display:none;} .bp-row{display:flex;align-items:center;gap:8px;padding:6px 9px; border:1px solid #ffffff1a;border-radius:7px;background:#ffffff06; color:var(--chrome-ink);cursor:pointer;} .bp-row:hover{background:#ffffff10;border-color:#ffffff33;} .bp-row:focus-visible{outline:2px solid var(--focus);outline-offset:-1px;} .bp-row[aria-selected="true"]{border-color:var(--accent); background:color-mix(in srgb,var(--accent) 14%,transparent);} /* the tick box: a box, and a tick when chosen */ .bp-box{flex:none;width:15px;height:15px;border-radius:4px; border:1.5px solid var(--chrome-ink-3);position:relative;} .bp-row[aria-selected="true"] .bp-box{background:var(--accent); border-color:var(--accent);} .bp-row[aria-selected="true"] .bp-box::after{content:"";position:absolute; left:4px;top:1px;width:4px;height:8px;border:solid var(--on-accent,#06121b); border-width:0 2px 2px 0;transform:rotate(45deg);} .bp-ic{flex:none;display:inline-flex;color:var(--chrome-ink-2);} .bp-ic .bic{width:14px;height:14px;} .bp-tx{min-width:0;display:flex;flex-direction:column;gap:1px;} .bp-nm{font:600 12.5px var(--sans);overflow:hidden;text-overflow:ellipsis; white-space:nowrap;} .bp-sub{font:11px var(--sans);color:var(--chrome-ink-2);overflow:hidden; text-overflow:ellipsis;white-space:nowrap;} .bp-none{margin:6px 2px;font:12px var(--sans);color:var(--chrome-ink-2);} .bp-pv{min-width:0;min-height:0;overflow:auto;padding-bottom:12px;} .bp-foot{display:flex;align-items:center;gap:8px;padding:10px 16px; border-top:1px solid #ffffff1a;} .bp-count{font:12px var(--sans);color:var(--chrome-ink-2);} @media (max-width:720px){ .bnd-pick .bp-body{grid-template-columns:1fr;} .bp-pv{display:none;} } body.light .bp-row{background:var(--chrome-1);border-color:var(--chrome-line); color:var(--ink);} body.light .bp-row:hover{border-color:#0000003a;} body.light .bp-row[aria-selected="true"]{border-color:var(--accent); background:color-mix(in srgb,var(--accent) 12%,var(--chrome-1));} body.light .bp-foot,body.light .bnd-pick .ovw-head{border-color:var(--chrome-line);} /* a binder's own preview: its presentations, one picture each */ .pv-binder .pv-mem figcaption b{font:600 11px var(--sans);} .sht-tab.member .sht-ic{color:var(--accent);} .sht-tab.missing{opacity:.5;text-decoration:line-through;} body.light .bnd-head{background:#00000006;border-color:#00000022;} /* slides inside a section step in, so the run is visible without having to read the divider each time */ .film-row.in-sec{margin-left:7px;} /* T318: a version sits under its main, one step further in and dimmed; the one you are editing is full strength. The main's pill is the fold toggle, drawn as a mark so it is never over the thumbnail. */ .film-row.alt{margin-left:18px;opacity:.72;} .film-row.alt.current{opacity:1;} .film-row.alt .film-n{color:var(--chrome-ink-3);} .film-mark.alt-pill{cursor:pointer;background:none;border:1px solid var(--chrome-line);color:var(--chrome-ink-2);font:inherit;padding:0 5px;} .film-mark.alt-pill:hover{color:var(--chrome-ink);} .film-mark.alt{color:var(--accent);} /* The current slide remains in a collapsed section so its live thumbnail can refresh. It is a real, readable row -- dimming it made the current slide look disabled and its controls needlessly hard to hit. */ .film-row.peek{opacity:1;box-shadow:inset 3px 0 0 var(--accent);} /* T399: ONE readable column, like the canvas menu below it. The strip's menu inherited .sh-menu's three-column icon grid, so "New version of this slide" and "Move matching objects" wrapped word by word into tiles beside their headings (2026-09-13, user: "the right click options on a slide look cursed"). */ .film-menu{display:block;width:300px;min-width:0; max-width:min(340px,92vw);max-height:72vh; overflow-y:auto;overflow-x:hidden;} .film-menu .hd-lab{margin-top:6px;} .film-menu>.hd-lab:first-child{margin-top:0;} .film-menu .vw-opt{width:100%;text-align:left;} .film-menu .vw-opt.on{background:color-mix(in srgb,var(--accent) 22%, transparent);color:#fff;} .film-menu .vw-opt.on::after{content:"on";margin-left:auto; font-family:var(--mono);font-size:9px;opacity:.75;} body.light .film-menu .vw-opt.on{color:var(--ink);} /* the canvas right-click menu: the film strip's menu is the other context menu in the app, so it gets the same width and the same left-aligned rows. The one addition is a dead row -- "Nothing copied yet" -- which has to read as unavailable rather than broken. */ /* five sections deep with a rich selection, so it scrolls rather than running off the bottom of the window */ /* T137 / JVUX-01: .sh-menu's 3-column 210px grid is for icon galleries; on a WORD menu it wrapped 31 labels character by character into thin columns with both scrollbars. One readable column, and the long tail folds behind "More" (cmFold). */ .canvas-menu{display:block;width:308px;min-width:0; max-width:min(340px,92vw);max-height:72vh; overflow-y:auto;overflow-x:hidden;} .canvas-menu .hd-lab{margin-top:6px;} /* [hidden] must actually hide: a bare display rule on the class would beat the attribute's UA default, which is exactly how the fold shipped open in its first screenshot */ .cm-more[hidden]{display:none;} .cm-moret{width:100%;text-align:left;margin-top:6px; border-top:1px solid #ffffff1a;border-radius:0;padding-top:8px;} .canvas-menu .vw-opt{width:100%;text-align:left;} .canvas-menu .vw-opt[disabled]{opacity:.45;pointer-events:none;} /* A BUTTON YOU HAVE PUT AWAY. display:none, not [hidden]: showFmt owns the attribute and turns controls on and off by kind, so a customiser writing the same one would fight it on every click. This composes with it instead — and costs the fit ladder nothing, because display:none takes no width. */ #edit-tools .rbn-hid{display:none!important;} .rbn-cust{max-height:74vh;} .rbn-cust .rbn-crow{gap:3px;} .rbn-cust .rbn-move{font-size:11px;line-height:1;padding:2px 6px; flex:none;} /* which lock the selection is in now. Same treatment the View menu's toggles use, so "on" reads the same way everywhere. */ .canvas-menu .vw-opt.on{background:color-mix(in srgb,var(--accent) 22%, transparent);color:#fff;} .canvas-menu .vw-opt.on::after{content:"on";margin-left:auto; font-family:var(--mono);font-size:9px;opacity:.75;} body.light .canvas-menu .vw-opt.on{color:var(--ink);} /* ---- the strip's own resize handle ------------------------------------ position:fixed, not absolute: .deck-create scrolls, and an absolutely positioned child would scroll away from the edge it is supposed to be sitting on. The shared rail remains live in the editor, so the handle begins after its width rather than at the window's left edge. */ .film-resize{display:none;position:fixed;top:0;bottom:0;width:6px; z-index:130;cursor:col-resize; left:calc(var(--deck-left,var(--presrail-w)) + clamp(150px,var(--film-w,min(var(--dc-w),200px)), var(--film-max,46vw)) - 3px);} .deck.editing .film-resize{display:block;} .deck.editing.strip-off .film-resize, .deck.editing.poster-page .film-resize{display:none;} /* the handle sits at the column's rendered edge, so it goes where the column goes: gone while it is parked, back while it is peeking */ .deck.editing.film-auto .film-resize{display:none;} .deck.editing.film-auto.film-peek .film-resize{display:block;} .film-resize:hover,.film-resize.on{ background:color-mix(in srgb,var(--accent) 40%,transparent);} /* A GRIP YOU CAN SEE. The handle was six transparent pixels that only appeared once the pointer was already on them, so a feature asked for by name (2026-08-22, "the thumbnail part should be dragable to make bigger or smaller") could only be found by accident. Two pixels of hairline at mid height is the affordance every panel splitter uses, and it costs the column no width. */ .film-resize::before{content:"";position:absolute;left:2px;top:50%; width:2px;height:26px;margin-top:-13px;border-radius:1px; background:#ffffff2e;} .film-resize:hover::before,.film-resize.on::before{background:#fff;} /* ...and the handle stops at the COLUMN. top:0/bottom:0 is what keeps it glued to the edge while .deck-create scrolls, but it also laid a 6px dead stripe up through the top bar and the tab row -- at the resting 200px that is a slice of the save readout, at another rung a slice of a button, and it moves with every drag. Those two rows outrank it in their own bands. 131 clears the handle's 130 and stays under .vfull (135) and .matchbar (150), so nothing that used to paint over the bar stops doing so. */ .deck-qat,.deck-top,.rbn-tabs{position:relative;z-index:131;} /* ...and the top bar OUTRANKS the tab strip (T397). Its menus float at z-index 240 -- inside its own stacking context, which at an equal 131 lost to the later tab strip, so the first row of the Help menu sat under Auto-hide and Ribbon layouts. Still under .vfull (135). */ .deck-qat{z-index:132;} @media(max-width:860px){.film-resize{display:none!important;}} /* ---- how the slides are listed --------------------------------------- The chooser is one line and carries no second copy of anything. It is stamped on the LIST rather than on the body or the deck, because filmToPane MOVES #film-list into the Versions pane and a body class would then be styling a list that is somewhere else. */ .film-head{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:6px;} /* never narrower than its own word (T619): the readout beside it is what wraps, never "Thumbnails ▾" into three lines */ .film-head .dc-menuwrap{flex:1 0 auto;} .film-view-btn{width:100%;text-align:left;font-size:11px;padding:4px 8px; white-space:nowrap;} /* headings mode: no picture at all, so the row is one line of text and forty slides fit on a laptop screen */ #film-list[data-fv="head"] .film-t{white-space:normal; text-overflow:clip;overflow:visible;} #film-list[data-fv="head"] .film-row.current .film-label{ flex-direction:row;align-items:center;} #film-list[data-fv="head"] .film-label{padding:3px 6px;} /* the outline steps in by heading level, so a deck with sections and headings reads as a real table of contents */ #film-list[data-fv="head"] .film-row[data-lvl="1"] .film-t{ padding-left:9px;} #film-list[data-fv="head"] .film-row[data-lvl="2"] .film-t{ padding-left:18px;} #film-list[data-fv="head"] .film-row[data-lvl="3"] .film-t{ padding-left:27px;} /* both: the caption sits UNDER the thumbnail and is allowed to wrap, because the point of asking for both is being able to read it */ #film-list[data-fv="both"] .film-label{flex-wrap:wrap;} #film-list[data-fv="both"] .film-t{white-space:normal; text-overflow:clip;overflow:visible;flex-basis:100%; line-height:1.35;} /* the thumbnail follows the column: it is a scale model of the slide, so it has the slide's shape and grows with the room it is given */ /* WIDTH:100% IS ONLY TRUE OF THE ROW THAT STACKS (T153). The CURRENT row's .film-label turns column, so there the thumbnail really does own the full width. Every OTHER row is a horizontal flex line -- number, thumbnail, title -- where 100% is a promise the row cannot keep: at flex:none the thumbnail took the whole line, pushed the title to zero width and the row's own controls to zero, overflowed the row by the number's width, and .film-list (overflow-y:auto, so the x axis computes to auto as well) grew a horizontal scrollbar inside a vertical list. Measured at a 200px column: row 171px, content 189px, title 0px. Sharing rows shrink to fit instead. */ .film-list .film-row.current .mini-diagram{width:100%;height:auto; aspect-ratio:116/66;min-height:var(--mini-h);} .film-list .film-row:not(.current) .mini-diagram{flex:1 1 auto; min-width:0;width:auto;height:auto;aspect-ratio:116/66; min-height:var(--mini-h);} /* ...and the list never scrolls sideways: it is a vertical list, and a horizontal scrollbar in it is always a fitting bug, never a feature */ .film-list{overflow-x:hidden;} /* the sans, as every other control (T679: one type for the chrome) -- the reader's toast already was; the mono made a sentence read as code (2026-10-30 review) */ .deck-toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%); background:var(--chrome-2,#16273a);border:1px solid var(--cyan);color:var(--chrome-ink); font-size:12.5px;font-family:var(--sans);padding:9px 16px;border-radius:8px; z-index:120;box-shadow:0 8px 30px #00000066;max-width:80vw;} /* T607 lifted the editor's toasts to 58px, above the status and zoom row they sat on; T619 took that row off the canvas, so they keep the ordinary 24px and only their width is the editor's own */ .deck.editing .deck-toast{max-width:min(80vw,760px);} /* the light themes' toast is their own white chrome, so its words are their chrome ink -- the dark theme's pale words were all but invisible on it (T614: its Undo and Update replies live here) */ body.light .deck-toast{color:var(--chrome-ink);} /* T686: live share. The pill sits in the title row beside the save readout; the File row wears its "prototype" tag */ .live-pill{font-size:12px;padding:2px 10px;border-radius:999px; white-space:nowrap;flex:none;} .live-pill::before{content:"";display:inline-block;width:7px;height:7px; border-radius:50%;background:#3fb950;margin-right:6px;vertical-align:1px;} .live-pill.live-off::before{background:#d29922;} /* T698: the live panel -- People, Links, Changes, Chat. Docked at the right under the title row, above the stage (the z ladder: past the column's 120) */ .live-panel{position:fixed;right:12px;top:76px;width:340px;z-index:140; max-height:calc(100vh - 100px);display:flex;flex-direction:column; background:var(--chrome-2,#16273a);color:var(--chrome-ink); border:1px solid color-mix(in srgb,var(--chrome-ink) 22%,transparent); border-radius:10px;box-shadow:0 16px 48px #0008;font-size:12.5px;} .live-panel[hidden]{display:none;} .live-head{display:flex;align-items:center;gap:6px;padding:8px 10px 4px;} .live-title{font-weight:600;font-size:13px;} .live-tabs{display:flex;gap:4px;padding:4px 10px 8px;flex-wrap:nowrap;} .live-tabs .dbtn.on{outline:2px solid var(--cyan);} .live-body{overflow:auto;padding:0 10px 10px;display:flex; flex-direction:column;gap:8px;} .live-row{display:flex;align-items:center;gap:6px;flex-wrap:wrap;} .live-row .ask-in{flex:1;min-width:0;} .live-note{opacity:.8;line-height:1.4;} .live-who{font-weight:600;} .live-link,.live-log,.live-msg{border-radius:8px;padding:8px; background:color-mix(in srgb,var(--chrome-ink) 7%,transparent); display:flex;flex-direction:column;gap:6px;} .live-msg.mine{background:color-mix(in srgb,var(--cyan) 14%,transparent);} .live-what{text-align:left;} .live-chat{display:flex;flex-direction:column;gap:6px;max-height:46vh; overflow:auto;} .live-check{cursor:pointer;} /* the link this admin came in by (2026-10-30 review) */ .live-mine{font-size:11px;font-weight:600;padding:1px 6px; border-radius:999px;border:1px solid currentColor;opacity:.85;} /* T698: copies off -- no Download, no Export, while the live deck is on screen for someone who is not an admin */ .deck.live-nocopy #mi-dl,.deck.live-nocopy #mi-pdf, .deck.live-nocopy #mi-pptx,.deck.live-nocopy #mi-html, .deck.live-nocopy #mi-review,.deck.live-nocopy #mi-bdl, .deck.live-nocopy #mi-tocol,.deck.live-nocopy #mi-unlinked{display:none;} /* T696: the initials of whoever else is on a slide, on its thumbnail */ .film-row.live-on{position:relative;} .live-here{position:absolute;top:4px;right:6px;z-index:2;font-size:10px; font-weight:600;line-height:1;padding:3px 5px;border-radius:999px; background:#3fb950;color:#04140a;pointer-events:auto; box-shadow:0 1px 3px #0006;} .live-proto{font-size:10px;text-transform:uppercase;letter-spacing:.04em; border:1px solid currentColor;border-radius:4px;padding:0 4px; margin-left:6px;opacity:.75;} /* ...and the editor's questions: their title kept the dark theme's near-white over the light box, 1.07:1 (T614's Update and Make as collection ask through it; so does every askText) */ body.light .eq-t,body.light .aa-head .eq-t, body.light .eq-head .eq-t{color:var(--chrome-ink);} @media (max-width:860px){ .deck-stage{padding:16px 52px 4px;} .deck-drawer{padding:12px 20px 18px;} .slide-grid.halves,.slide-grid.quarters{grid-template-columns:1fr; grid-template-rows:none;grid-auto-rows:1fr;} } @media (prefers-reduced-motion:reduce){.slide{animation:none;}} /* drag-to-trim: four accent edge handles; the live clip is the preview */ .an-crop-h{position:absolute;background:var(--accent);border:1px solid #00000055;border-radius:4px;z-index:8;} .an-crop-t,.an-crop-b{left:50%;margin-left:-16px;width:32px;height:9px; cursor:ns-resize;} .an-crop-l,.an-crop-r{top:50%;margin-top:-16px;width:9px;height:32px; cursor:ew-resize;} .ci-trim{display:block;width:100%;text-align:left;background:none; border:1px solid color-mix(in srgb,var(--accent) 45%,transparent); color:var(--accent);border-radius:7px;padding:7px 10px;cursor:pointer; font-family:var(--sans);font-size:12px;margin-bottom:6px;} .ci-trim:hover{background:color-mix(in srgb,var(--accent) 14%,transparent);} /* a table in a thumbnail: the words are a smudge at 116px but the SHAPE of a table is unmistakable, which is what a thumbnail is for */ .mini-tbl{width:100%;height:100%;border-collapse:collapse; table-layout:fixed;line-height:1.05;} /* T626: its rules are the slide's (--tbl-line, from tableLine, as the canvas sets it) and its words the thumbnail's own ink -- the literal #dbe6ee it wore here drew every table in the default whatever the theme said */ .mini-tbl td,.mini-tbl th{border:.5px solid var(--tbl-line,currentColor); padding:0 .2em; overflow:hidden;white-space:nowrap;text-align:left;font-weight:inherit;} .mini-tbl th{font-weight:700; background:color-mix(in srgb,currentColor 18%,transparent);} .mini-tbl.nogrid td,.mini-tbl.nogrid th{border-color:transparent;} /* ---- repeated page furniture --------------------------------------- Sized in PERCENT OF PAGE HEIGHT, like text items are, so a watermark reads the same on a 16:9 slide and on an A0 poster (2026-08-20). */ .slide-wmark{position:absolute;left:50%;top:50%;z-index:0; pointer-events:none;user-select:none;white-space:nowrap; font-weight:800;letter-spacing:.06em;text-transform:uppercase; line-height:1;color:currentColor;} .slide-head,.slide-foot{position:absolute;left:4%;right:4%; pointer-events:none;color:var(--tk-quiet,var(--chrome-ink-2)); line-height:1.2;} .slide-head{top:2.4%;} .slide-foot{bottom:2.4%;} .page-light .slide-head,.page-light .slide-foot{ color:var(--tk-quiet,#5b6b78);} /* the number sits at the corner, so a footer spanning the page must not run underneath it */ .slide-foot{padding-right:3.5%;} /* T699: the name of the presentation the slide is in, in a corner */ .slide-pzlabel{position:absolute;z-index:4;max-width:44%;overflow:hidden; text-overflow:ellipsis;white-space:nowrap;line-height:1.2; pointer-events:none;color:var(--tk-quiet,var(--chrome-ink-2));} .page-light .slide-pzlabel{color:var(--tk-quiet,#5b6b78);} .slide-pzlabel.at-bl,.slide-pzlabel.at-tl{left:4%;} .slide-pzlabel.at-br,.slide-pzlabel.at-tr{right:4%;text-align:right;} .slide-pzlabel.at-bl,.slide-pzlabel.at-br{bottom:2.4%;} .slide-pzlabel.at-tl,.slide-pzlabel.at-tr{top:2.4%;} /* the page number has the bottom-right corner: the name stands left of it */ .slide-pzlabel.at-br{right:9%;} /* ---- the Styles menu: each row is a SPECIMEN of the style it names, so you pick by looking rather than by reading a number (2026-08-20) */ /* T293: it SCROLLS now. The list was seven rows and a fixed height was fine; with a family under each heading it can pass the viewport, and floatMenu clamps a menu's top edge without ever scrolling it -- so the bottom rows were lost with no scrollbar and no error. */ .sh-menu.style-tx-menu{display:block;width:380px;padding:5px; max-height:min(68vh,520px);overflow-y:auto;} /* a variation sits under the type it varies, and says so by sitting in */ .style-tx-menu .jv-styleopt.jv-stylevar{padding-left:20px;position:relative;} .style-tx-menu .jv-styleopt.jv-stylevar::before{content:"";position:absolute; left:9px;top:50%;width:5px;height:1px;background:var(--chrome-ink-3);} .jv-styleopt{display:flex!important;align-items:baseline; justify-content:space-between;gap:10px;width:100%;text-align:left;} .jv-stylename{line-height:1.15;overflow:hidden;text-overflow:ellipsis; white-space:nowrap;} .jv-stylesz{font-family:var(--mono);font-size:9.5px;color:var(--chrome-ink-2); flex:none;} .style-tx-menu .vw-opt[disabled]{opacity:.4;pointer-events:none;} /* ---- SPOTLIGHT: one item, blown up mid-talk ------------------------- A FLIP, not a fade: the clone starts exactly over the original and is transformed to the centre, so it grows out of where it was and the original never moves (2026-08-20). */ .jv-spot-wrap{position:fixed;inset:0;z-index:400; background:#000000;opacity:0;transition:opacity .2s ease; cursor:zoom-out;} .jv-spot-wrap.on{opacity:.93;} .jv-spot-inner{position:fixed;transform-origin:50% 50%; transition:transform .26s cubic-bezier(.22,.8,.3,1); will-change:transform;} /* the clone paints above the backdrop, which is the whole point */ .jv-spot-wrap .jv-spot-inner{z-index:1;} .jv-spot-x{position:fixed;top:16px;right:18px;z-index:2; background:#ffffff14;border-color:#ffffff3d;color:#eaf2f8;} .jv-spot-x:hover{background:#ffffff26;border-color:var(--cyan);} /* while a spotlight is up, the deck underneath must not react to anything - the click that closes it is the only one that counts */ body.jv-spot .deck-stage{pointer-events:none;} /* an item you can blow up says so on hover, and only while presenting */ .deck:not(.editing) .an-item{transition:filter .12s;} /* ---- the FILL panel: pick by looking, not by reading ----------------- Every chip is drawn with the shape's own colours, so the preview is the answer rather than an illustration of one (2026-08-20). */ .sh-menu.fill-panel{display:block;width:268px;padding:6px 7px 8px;} .fill-row{display:flex;flex-wrap:wrap;gap:5px;margin:3px 0 7px;} .fill-chip{padding:0;background:none;border:1px solid transparent; border-radius:5px;cursor:pointer;line-height:0;display:block;} .fill-chip:hover{border-color:var(--cyan);} .fill-chip.on{border-color:var(--cyan); box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 45%,transparent);} .fill-chip svg{display:block;border-radius:4px;} .fill-dot{width:20px;height:20px;border-radius:5px;display:block; border:1px solid #ffffff33;} /* the custom-colour dot is the spectrum, so it reads as "anything else" */ .fill-custom{background:conic-gradient(#e5484d,#f0a848,#46a892,#39a9c0, #6b9bff,#a586e8,#e5484d);} /* rename a layer in place, like the group folders above it */ .sp-rename{flex:1;min-width:0;font-family:var(--sans);font-size:11.5px; background:var(--chrome-0,#0b141d);color:var(--chrome-ink); border:1px solid var(--cyan);border-radius:5px;padding:1px 5px; outline:none;} /* the "match another slide" picker: one row per other slide, numbered */ .sh-menu.match-menu{position:fixed;z-index:220;display:block; width:236px;padding:5px;max-height:60vh;overflow-y:auto;} .match-menu .vw-opt{width:100%;text-align:left;} /* T381: the Update menu is a LIST, not .sh-menu's three-column grid. Its rows are phrases ("The whole presentation", "Load locked versions"), and in a 210px grid each wrapped into a four-line cell (2026-09-12, user: "the options in the button look poor"). One per row, full width, left aligned -- the rule the lock trio has always needed, now on the menu they live in. Both class names, because .sh-menu's grid comes later in this file. */ .sh-menu.upd-menu{display:block;width:250px;padding:5px;} .upd-menu .dbtn{display:flex;width:100%;text-align:left; white-space:normal;margin-top:3px;} .upd-menu .dbtn[disabled]{opacity:.45;} /* the folded View group's menu. A row stands in for a toggle button, so it has to show the toggle's state — otherwise folding the group would lose the one thing a visible toggle was chosen for (2026-08-22). */ /* T679: a LIST, one row per control. It was laid out by .sh-menu's three-column grid, so the rows were squeezed into 60px cells, their "on" spilled out of them and the headings took a cell each. */ .sh-menu.vw-more-menu{display:flex;flex-direction:column;gap:3px; width:auto;min-width:200px;max-height:calc(100vh - 140px);overflow-y:auto;} .vw-more-menu .vw-opt{width:100%;text-align:left;} /* T681: Overlay options -- three short lists, a row a choice */ .sh-menu.opt-panel.ovl-panel{min-width:250px;} .ovl-opt{display:flex;align-items:center;gap:7px;padding:4px 2px; font:12.5px var(--sans);color:var(--chrome-ink);cursor:pointer; white-space:nowrap;} .ovl-opt>input{margin:0;flex:none;accent-color:var(--accent);} .ovl-kinds{display:grid;grid-template-columns:auto auto;column-gap:14px; justify-content:start;} .ovl-num,.ovl-sec{flex:none;font:inherit;font-size:12px; padding:2px 4px 2px 6px;border:1px solid var(--chrome-line); border-radius:5px;background:var(--chrome-1,#0f1b26); color:var(--chrome-ink,#d7e3ec);} .ovl-num{width:52px;} .ovl-sec{max-width:190px;} .vw-more-menu .vw-opt.on{background:color-mix(in srgb,var(--accent) 22%, transparent);border-color:var(--accent);color:#fff;} .vw-more-menu .vw-opt.on::after{content:"On";margin-left:auto; font:600 10.5px var(--sans);opacity:.85;} body.light .vw-more-menu .vw-opt.on{color:var(--ink);} /* ---- the equation editor ------------------------------------------- Type on the left, see it set on the right. The palette is the half that was missing: "insert equation" used to drop $$ E = mc^2 $$ and leave you to remember every command yourself (2026-08-20). */ .eq-dlg{position:fixed;inset:0;z-index:260;display:flex; align-items:center;justify-content:center;background:var(--overlay);} .eq-dlg[hidden]{display:none!important;} .eq-box{width:min(820px,94vw);max-height:88vh;display:flex; flex-direction:column;gap:8px;padding:12px 13px 11px; background:var(--chrome-2);border:1px solid var(--chrome-line); border-radius:12px;box-shadow:0 24px 70px var(--shadow); font-family:var(--sans);} .eq-head{display:flex;align-items:center;gap:8px;} /* T219: a dialog's title is a title; a column's heading is a heading */ .eq-t{font-family:var(--sans);font-size:12.5px;font-weight:600;letter-spacing:0; text-transform:none;color:var(--chrome-ink);} .aa-head .eq-t,.eq-head .eq-t{font-size:15px;color:var(--chrome-ink);} .aa-box .dbtn,.eq-box .dbtn{font-family:var(--sans);font-size:12.5px;} .eq-main{display:flex;gap:10px;min-height:0;flex:1;} .eq-left{flex:1.15;min-width:0;display:flex;flex-direction:column;gap:7px;} .eq-right{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px;} .eq-src{height:92px;resize:vertical;font-family:var(--mono); font-size:12.5px;line-height:1.5;background:var(--chrome-0,#0b141d); color:#eaf2f8;border:1px solid #ffffff26;border-radius:7px; padding:7px 9px;outline:none;} .eq-src:focus{border-color:var(--cyan);} .eq-pal{flex:1;min-height:0;overflow-y:auto;padding-right:2px;} .eq-palh{font-family:var(--mono);font-size:9.5px;letter-spacing:.12em; text-transform:uppercase;color:var(--chrome-ink-2);margin:7px 0 3px;} .eq-palrow{display:flex;flex-wrap:wrap;gap:3px;} /* BIG ENOUGH TO READ THE GLYPH. These keys are set in maths precisely so you can find sigma by looking for a sigma -- at 11px in a 24px box a sigma and a summation sign are the same smudge (2026-08-29, user: "the text options in the insert text have boxes too small and can't see symbols"). */ .eq-key{font-family:var(--mono);font-size:12.5px;padding:4px 8px; min-width:34px;background:var(--btn-bg,#ffffff0a); border:1px solid var(--btn-border,#ffffff22);border-radius:5px; color:var(--btn-ink,#cdd9e3);cursor:pointer;} .eq-key:hover{border-color:var(--cyan);color:var(--chrome-ink);} .eq-plab{font-family:var(--mono);font-size:9.5px;letter-spacing:.12em; text-transform:uppercase;color:var(--chrome-ink-2);} .eq-prev{flex:1;min-height:120px;overflow:auto;display:flex; align-items:center;justify-content:center;text-align:center; background:var(--chrome-0,#0b141d);border:1px solid #ffffff1f; border-radius:7px;padding:10px;color:#eaf2f8;font-size:17px;} .eq-warn{font-size:11px;line-height:1.4; color:color-mix(in srgb,#cf9a4e 40%,var(--chrome-ink));background:#cf9a4e1f;border:1px solid #cf9a4e4d;border-radius:6px; padding:6px 8px;} .eq-foot{display:flex;align-items:center;gap:8px;} body.light .eq-box{background:var(--chrome-2); border-color:var(--chrome-line);} /* ---- the Apply dialog ------------------------------------------------- Same shell as the equation editor, two columns wide instead of one. */ .aa-dlg{position:fixed;inset:0;z-index:260;display:flex; align-items:center;justify-content:center;background:var(--overlay);} .aa-dlg[hidden]{display:none!important;} /* T640: the question is asked from the page body while the editor is hidden (askHost), out of reach of `.deck [hidden]` -- so a question with no `what` showed an empty .aa-what box (display:flex beats the browser's own [hidden]) from the reader and the library */ .ask-dlg [hidden]{display:none!important;} /* T470: the Style sets picker opened from the Style system sits over that screen (z-index 400), not under it */ .aa-dlg.over-design{z-index:410;} /* T475: the editor's own question sits over every other dialog and menu (the apply dialog, the masters panel, the library) */ .aa-dlg.ask-dlg{z-index:300;} .aa-dlg.ask-dlg.over-design{z-index:420;} .ask-box{width:min(440px,94vw);} .ask-lab{font-family:var(--sans);font-size:12.5px;color:var(--chrome-ink-2);} .ask-in{width:100%;box-sizing:border-box;font:13.5px var(--sans); padding:7px 9px;border-radius:7px;color:var(--chrome-ink); background:var(--chrome-0,#0b141d);border:1px solid var(--chrome-line);} .ask-in:focus{outline:none;border-color:var(--accent,var(--cyan));} .ask-area{resize:vertical;min-height:84px;font:12.5px var(--mono); line-height:1.45;} /* T488: the small form -- label column, field column, a note under a row spanning both */ .ask-rows{display:grid;grid-template-columns:auto minmax(0,1fr); gap:8px 12px;align-items:center;} .ask-rows[hidden]{display:none;} /* a row shown only for some answers (askRowsBuild's `when`): its cell is a flex box, which [hidden] alone does not hide */ .ask-rows>[hidden]{display:none;} .ask-row-lab{font-family:var(--sans);font-size:12.5px; color:var(--chrome-ink-2);white-space:nowrap;} .ask-row-cell{display:flex;align-items:center;gap:8px;min-width:0;} .ask-rows .ask-in{flex:1 1 auto;} .ask-rows .ask-num{flex:0 0 84px;width:84px;} .ask-rows .ask-sel{flex:0 0 auto;width:auto;min-width:120px;padding:5px 8px; max-width:100%;} .ask-rows .ask-range{flex:1 1 auto;min-width:0;accent-color:var(--cyan);} .ask-rows .ask-check{width:16px;height:16px;accent-color:var(--cyan); margin:0;} .ask-rows .ask-color{width:40px;height:26px;padding:0;border:1px solid var(--chrome-line);border-radius:6px;background:none;cursor:pointer;} .ask-rows .ask-clear{font-size:11px;padding:4px 8px;} .ask-rows .ask-clear[aria-pressed="true"]{border-color:var(--cyan); color:var(--chrome-ink);} .ask-rows .ask-color:has(+.ask-clear[aria-pressed="true"]){opacity:.35;} .ask-unit{font-family:var(--sans);font-size:11.5px;color:var(--chrome-ink-3); white-space:nowrap;} .ask-row-note{grid-column:1/-1;font-family:var(--sans);font-size:11.5px; color:var(--chrome-ink-3);line-height:1.45;margin-top:-4px;} .ask-dlg.ask-form .ask-box{width:min(520px,94vw);} /* T527: a yes/no or a notice keeps the paragraph breaks and bullets of what it is asking about ("this will not come across: • …") */ .ask-dlg.ask-yes .aa-what{white-space:pre-line;} /* the question's own width: `.aa-box` (760px, declared later at the same weight) had been winning over `.ask-box` since T475, so a one-line name field sat in a box the width of the Apply dialog (T527) */ .aa-box.ask-box{width:min(460px,94vw);} .ask-dlg.ask-form .aa-box.ask-box{width:min(520px,94vw);} /* ...and a verb that destroys is red, filled, so "Delete presentation" never wears the same cyan as "Save and close" */ .ask-dlg .dbtn.primary.dbtn-warn{background:var(--danger); border-color:var(--danger);color:var(--on-accent); box-shadow:0 0 0 1px color-mix(in srgb,var(--danger) 40%,transparent), 0 2px 12px color-mix(in srgb,var(--danger) 35%,transparent);} .ask-dlg .dbtn.primary.dbtn-warn:hover{ background:color-mix(in srgb,var(--danger) 86%,black);color:var(--on-accent);} .aa-box{width:min(760px,94vw);max-height:88vh;display:flex; flex-direction:column;gap:9px;padding:12px 13px 11px; background:var(--chrome-2);border:1px solid var(--chrome-line); border-radius:12px;box-shadow:0 24px 70px var(--shadow); font-family:var(--sans);} .aa-head{display:flex;align-items:center;gap:8px;} /* positioned, so the type menu (.sh-menu, absolute) opens under the chip and not 5px below the bottom of the window (2026-10-08 review) */ .aa-what{position:relative;font-size:13px;color:var(--chrome-ink);line-height:1.5; background:var(--chrome-0,#0b141d);border:1px solid #ffffff1a; border-radius:8px;padding:8px 10px;display:flex;align-items:center; gap:7px;flex-wrap:wrap;} /* the type chip borrows the treatment a pressed option already has, so a highlight the app has never used before does not have to be invented */ .aa-chip{font-family:var(--mono);font-size:11px;letter-spacing:.05em; padding:2px 8px;border-radius:11px; background:color-mix(in srgb,var(--accent) 14%,transparent); border:1px solid color-mix(in srgb,var(--accent) 55%,transparent); color:var(--accent);} .aa-chipbtn{cursor:pointer;font-family:var(--mono);} .aa-chipbtn:hover{border-color:var(--accent); background:color-mix(in srgb,var(--accent) 32%,transparent);} .aa-typemenu{min-width:250px;} .aa-n{margin-left:auto;font-family:var(--mono);font-size:11px; color:var(--chrome-ink-2);} .aa-main{display:flex;gap:11px;min-height:0;flex:1;} .aa-col{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px;} .aa-colh{display:flex;align-items:center;gap:6px;padding-bottom:5px; border-bottom:1px solid #ffffff14;} .aa-b{padding:3px 9px;font-size:11.5px;} .aa-props{max-height:52vh;overflow-y:auto;padding-right:3px;} .aa-scope{max-height:52vh;overflow-y:auto;padding-right:3px;} .aa-props .find-ck,.aa-scope .find-ck{padding:2px 3px;border-radius:5px;} .aa-props .find-ck:hover,.aa-scope .find-ck:hover{background:#ffffff0d;} /* a row that does not fit the selected item is GREYED and explained, not hidden: a list that reshuffles itself when you click a different object is a list you have to re-read every time */ .aa-props .find-ck.aa-no{opacity:.42;} .aa-props .find-ck.aa-no input{cursor:not-allowed;} .aa-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:0 9px;} .aa-sech{display:flex;align-items:center;gap:5px;margin:5px 0 2px; font-family:var(--mono);font-size:9.5px;letter-spacing:.13em; text-transform:uppercase;color:var(--accent);} .aa-slide-n{font-family:var(--mono);font-size:9.5px;color:var(--chrome-ink-3); width:16px;flex:none;text-align:right;} .aa-slide-t{overflow:hidden;text-overflow:ellipsis;white-space:nowrap; min-width:0;} .aa-foot{display:flex;align-items:center;gap:8px;} /* T558: a dialog's verbs keep their words on one line; the note beside them is what wraps ("Keep ink" broke into "Keep / ink" under a three-line note at 1366px) */ .aa-foot>.dbtn{flex:none;white-space:nowrap;} .aa-tie{display:inline-flex;align-items:center;gap:6px; font-family:var(--sans);font-size:11.5px;color:var(--chrome-ink-2); cursor:pointer;white-space:nowrap;} .aa-tie[hidden]{display:none!important;} .aa-tie input{margin:0;cursor:pointer;} .aa-tie:hover{color:var(--chrome-ink);} .aa-count{font-family:var(--sans);font-size:12px;color:var(--chrome-ink-2);} /* the matching items on the slide behind, outlined while you hover the headline — a pure class toggle over nodes that are already rendered */ .an-typematch{outline:2px dashed var(--accent)!important; outline-offset:2px;} body.light .aa-box{background:var(--chrome-2); border-color:var(--chrome-line);} /* T625: a dialog's title in the light theme is the theme's ink -- it was the dark theme's near-white on a light box, in every dialog */ body.light .aa-head .eq-t,body.light .eq-head .eq-t{color:var(--chrome-ink);} body.light .aa-what{background:var(--chrome-1,#f4f7fa); border-color:var(--line);color:var(--ink);} body.light .aa-props .find-ck:hover, body.light .aa-scope .find-ck:hover{background:var(--surface-hover);} body.light .eq-src,body.light .eq-prev{background:var(--paper-2); color:var(--ink);border-color:var(--line);} /* a typeset key needs room for a fraction without growing the whole row */ .eq-key-tex{font-size:15.5px;padding:4px 8px;min-height:32px; display:inline-flex;align-items:center;justify-content:center;} .eq-key-tex mjx-container{margin:0!important;} /* ---- the style manager: a specimen per style, sized by its own rule --- */ /* seven rows fitted; seven plus a dozen types of your own plus an open editor will not, and floatMenu clamps a menu's top edge without ever scrolling it (2026-08-22) */ .sh-menu.style-mgr{display:block;width:292px;padding:6px; max-height:min(70vh,520px);overflow-y:auto;} .stm-arrow{font-size:9px;padding:1px 5px;} /* the arrow's expander: one at a time, inline, indented under its row so it reads as belonging to it rather than as another style */ .stm-edit{margin:2px 3px 7px 10px;padding:7px 8px;border-radius:7px; background:var(--chrome-0,#0b141d);border:1px solid #ffffff14; display:flex;flex-direction:column;gap:6px;} .stm-erow{display:flex;gap:4px;flex-wrap:wrap;} .stm-tg{flex:none;padding:2px 8px;font-size:11px;line-height:1.4;} .stm-tg[aria-pressed="true"]{border-color:var(--cyan);color:var(--chrome-ink); background:color-mix(in srgb,var(--accent) 22%,transparent);} .stm-ren{width:100%;box-sizing:border-box;font-size:11.5px; padding:4px 7px;border-radius:6px;background:var(--chrome-1,#0e1926); border:1px solid #ffffff26;color:#eaf2f8;outline:none; font-family:var(--sans);} .stm-ren:focus{border-color:var(--cyan);} .style-mgr .stm-edit .vw-opt{margin-top:0;} body.light .stm-edit{background:var(--chrome-1,#f4f7fa); border-color:var(--line);} body.light .stm-ren{background:var(--input-bg); border-color:var(--border-strong);color:var(--ink);} .stm-row{display:flex;align-items:center;gap:6px;padding:2px 3px;} .stm-empty{padding:7px 4px;color:var(--chrome-ink-2);font-size:11.5px; line-height:1.4;} .stm-spec{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis; white-space:nowrap;line-height:1.15;} .stm-sz{font-family:var(--mono);font-size:9.5px;color:var(--chrome-ink-2);flex:none;} .stm-b{flex:none;padding:1px 7px;font-size:11px;line-height:1.4;} .style-mgr .vw-opt{width:100%;margin-top:5px;} /* ---- notes & timing pane -------------------------------------------- */ .notespane .selpane-list{display:flex;flex-direction:column;gap:5px; padding:9px 10px;} .np-lab{font-family:var(--sans);font-size:11px;font-weight:600; letter-spacing:0;color:var(--chrome-ink-2);margin-top:4px;} .np-notes{min-height:150px;resize:vertical;font-family:var(--sans); font-size:12.5px;line-height:1.5;background:var(--chrome-0,#0b141d); color:#eaf2f8;border:1px solid #ffffff26;border-radius:7px; padding:7px 8px;outline:none;} .np-notes:focus{border-color:var(--cyan);} .np-row{display:flex;align-items:center;gap:6px;} .np-goal{width:74px;font-family:var(--mono);font-size:12px; background:var(--chrome-0,#0b141d);color:#eaf2f8; border:1px solid #ffffff26;border-radius:6px;padding:4px 6px; outline:none;} .np-goal:focus{border-color:var(--cyan);} .np-unit{font-family:var(--mono);font-size:10.5px;color:var(--chrome-ink-2);} .np-clear{padding:2px 7px;font-size:10px;} .np-tot{font-family:var(--mono);font-size:10.5px;line-height:1.45; color:var(--chrome-ink-2);background:#ffffff0a;border-radius:6px;padding:6px 8px;} .np-tot:empty{display:none;} /* over your slot is the one thing here worth alarming about */ .np-tot.over{color:color-mix(in srgb,#cf9a4e 40%,var(--chrome-ink)); background:#cf9a4e1f;} body.light .np-notes,body.light .np-goal{background:var(--paper-2); color:var(--ink);border-color:var(--line);} /* the Present split button */ .qat-playgrp{display:inline-flex;align-items:stretch;flex:none;} .qat-playgrp #dc-playmore{padding:4px 7px;} /* T544: Change case -- five worded rows, each written in the case it makes, and the key that steps through them */ .sh-menu.case-menu{display:flex;flex-direction:column;width:224px; padding:6px;gap:3px;} .case-menu .case-key{font-size:11px;line-height:1.35; color:var(--chrome-ink-2);padding:6px 4px 2px;} /* line + paragraph spacing */ .sh-menu.lh-menu{display:block;width:186px;padding:5px;} .lh-menu .vw-opt{width:100%;text-align:left;} #hm-upd-menu .vw-opt{width:100%;text-align:left;} /* paragraph spacing is the gap BETWEEN paragraphs, so it lands on every paragraph but the first -- a bullet or a plain line alike (T623: it reached only a whole-box list in the show, never the editor's, a list in a box with other lines, or lines typed with Enter). Between two bullets it replaces their .18em; next to one it is never less. */ .an-p+.an-p{margin-top:var(--an-pspace,0px);} /* the space after a paragraph (a.paft): padding, so it adds to the next one's space before as PowerPoint's does, where margins would merge */ .an-p{padding-bottom:var(--an-paft,0px);} .an-p[data-list]+.an-p[data-list]{margin-top:var(--an-pspace,.18em);} .an-p+.an-p[data-list]{margin-top:max(.18em,var(--an-pspace,0px));} .an-tx br{content:"";display:block;margin-top:var(--an-pspace,0);} /* ---- the notes pane's three tabs + the scratchpad -------------------- */ /* T470: ONE TAB GRAMMAR PER PANE SHELL. These were 9.5px mono text with a class for "on" while the Animation pane's tabs, in the same shell, were 11.5px sans with role=tab (2026-09-15 review). They wear .anim-tab now; five of them in a 272px pane means the words are set a step smaller than Animation's two. */ .np-tabs .anim-tab{font-size:10.5px;padding:6px 3px 5px;letter-spacing:0;} /* T607: the five words came to 278px in a 270px row, so Rehearsals ran into the pane's edge; the row's own gutters are what gives */ .anim-tabs.np-tabs{padding:0 4px;gap:0;} .np-tall{min-height:230px;} .np-padbar{display:flex;gap:5px;} .np-padb{padding:3px 9px;font-size:10.5px;} .np-padlist{display:flex;flex-direction:column;gap:6px;margin-top:6px;} .np-fold{border:1px solid #ffffff1f;border-radius:8px;padding:5px; display:flex;flex-direction:column;gap:5px; background:color-mix(in srgb,var(--accent) 5%,transparent);} .np-fhead,.np-nhead{display:flex;align-items:center;gap:4px;} .np-ftitle,.np-ntitle{flex:1;min-width:0;font-family:var(--sans); background:none;border:1px solid transparent;border-radius:5px; color:#eaf2f8;padding:2px 5px;outline:none;} .np-ftitle{font-weight:600;font-size:11.5px;} .np-ntitle{font-size:11.5px;} .np-ftitle:hover,.np-ntitle:hover,.np-ftitle:focus,.np-ntitle:focus{ border-color:#ffffff2b;} .np-nfold{font-family:var(--mono);font-size:9.5px;max-width:84px; background:var(--chrome-0,#0b141d);color:#bcccd8; border:1px solid #ffffff26;border-radius:5px;padding:1px 3px;} .np-nx{padding:0 6px;font-size:11px;opacity:.55;} .np-nx:hover{opacity:1;} .np-note{border:1px solid #ffffff14;border-radius:7px;padding:4px; display:flex;flex-direction:column;gap:3px;} .np-nbody{min-height:52px;resize:vertical;font-family:var(--sans); font-size:11.5px;line-height:1.45;background:var(--chrome-0,#0b141d); color:#dbe6ee;border:1px solid #ffffff1f;border-radius:6px; padding:4px 6px;outline:none;} .np-nbody:focus{border-color:var(--cyan);} body.light .np-nbody,body.light .np-nfold{background:var(--paper-2); color:var(--ink);border-color:var(--line);} body.light .np-ftitle,body.light .np-ntitle{color:var(--ink);} /* a named FOLDER in the Layers pane. Not a group: filing only, so it gets a neutral outline rather than a group's colour bar (2026-08-20). */ .sp-fold2{border-left:3px solid #ffffff33;} .sp-fico{flex:none;opacity:.65;font-size:11px;} .sp-row.sp-infold{padding-left:16px;border-left:3px solid #ffffff1f;} /* a dragged CORNER on a line, and the faint handle that makes one */ .an-endpt.an-mid{background:var(--accent);border-color:#fff; width:11px;height:11px;margin:-5.5px 0 0 -5.5px;} .an-endpt.an-addpt{width:9px;height:9px;margin:-4.5px 0 0 -4.5px; background:transparent;border:1.5px dashed color-mix(in srgb,var(--accent) 70%,transparent);opacity:.5;} .an-endpt.an-addpt:hover{opacity:1;background:var(--accent); border-style:solid;} /* ---- icon sizing where JS-built editor chrome swapped an emoji or a raw glyph for a .bic svg (2026-08-23). Same rule as app.css: only the tight little buttons are clamped below the 14px default. ---- */ .sp-act .bic,.sp-fico .bic{width:12px;height:12px;vertical-align:-2px;} .vo-eye .bic,.vo-full .bic{width:12px;height:12px;vertical-align:-2px;} .vo-xall .bic{width:11px;height:11px;vertical-align:-2px;} .film-mini .bic{width:10px;height:10px;vertical-align:-1px;} .pane-x .bic,.ss-del .bic{width:10px;height:10px;vertical-align:-1px;} .an-lockchip .bic{width:10px;height:10px;vertical-align:-2px;} .an-verwait .bic{width:12px;height:12px;vertical-align:-2px;} .pickbar .bic{width:13px;height:13px;vertical-align:-2px;} .dc-mi .bic{width:12px;height:12px;vertical-align:-2px;} .cellpartbtn .bic{width:10px;height:10px;vertical-align:-1px;} /* T66: while a slide match is armed every thumbnail is a target, and says so the way the canvas says it during an object match. The strip is the picker now, so it has to look like one. */ .deck.slide-matching #film-list .film-row{cursor:copy;} .deck.slide-matching #film-list .film-row .film-label{ outline:2px dashed var(--accent,#2f6f9f);outline-offset:-2px; border-radius:4px;} .deck.slide-matching #film-list .film-row:hover .film-label{ outline-style:solid;background:rgba(47,111,159,.10);} .deck.slide-matching #film-list .film-ctr{opacity:.35;} /* T74: a markdown box on a slide. Everything is in em of the BOX's own type size, the rule a.lh, a.pspace and a.ind already follow, so a markdown box means the same thing on a 16:9 slide and an A0 poster. */ .an-md{display:block;text-align:inherit;} .an-md>:first-child{margin-top:0;} .an-md>:last-child{margin-bottom:0;} .an-md h3,.an-md h4,.an-md h5{ margin:.5em 0 .25em;line-height:1.15;font-weight:700;} .an-md h3{font-size:1.45em;} .an-md h4{font-size:1.2em;} .an-md h5{font-size:1.05em;} .an-md p{margin:.35em 0;} .an-md ul,.an-md ol{margin:.35em 0;padding-left:1.3em;} .an-md li{margin:.12em 0;} .an-md blockquote{margin:.4em 0;padding-left:.7em; border-left:.16em solid currentColor;opacity:.82;} .an-md code{font-family:var(--mono,ui-monospace,Consolas,monospace); font-size:.9em;padding:0 .2em;border-radius:.2em; background:rgba(127,127,127,.18);} /* T467: a fenced block is a block */ .an-md pre{margin:.4em 0;padding:.4em .55em;border-radius:.3em; background:rgba(127,127,127,.18);white-space:pre-wrap; overflow-wrap:anywhere;font-size:.9em;line-height:1.3;} .an-md pre code{padding:0;background:none;font-size:1em;} .an-md h6{margin:.5em 0 .25em;line-height:1.15;font-weight:700;font-size:1em;} .an-md hr{border:0;border-top:.08em solid currentColor;opacity:.4; margin:.5em 0;} .an-md a{color:inherit;text-decoration:underline;} /* T546: linked words wear their box's colour, underlined, as a Markdown box's links do; a pointer only where a click follows them */ .an-tx a{color:inherit;text-decoration:underline;} .deck:not(.editing) .an-tx a{cursor:pointer;} /* the editor's cheat sheet, under the source box */ .md-help{font-size:11px;line-height:1.7;color:var(--chrome-ink-3);padding:8px 2px 0;} .md-help b{font-weight:600;color:var(--chrome-ink-2);} /* the preview is a block of the slide text as it will read, left to right and top to bottom. It wears .eq-prev for the panel's look, whose flex row centred every block side by side: the heading, a sentence and a list came out as three narrow centred columns (T737 review) */ .md-prev{overflow:auto;display:block;text-align:left;} /* T88: the talk panel. Present mode only -- .deck is neither .creating nor .editing then, the same test .deck-count already uses one line up from here. Never printed: it is chrome, and chrome does not export. */ .talkbtn{position:absolute;right:18px;bottom:38px;z-index:8; opacity:.35;transition:opacity .15s ease;} .talkbtn:hover,.talkbtn[aria-expanded="true"]{opacity:1;} .deck.creating .talkbtn,.deck.editing .talkbtn, .deck.creating .talkpane,.deck.editing .talkpane{display:none;} /* T624: as wide as its widest row (the Ink row's three tools), never narrower than it was -- at 266px fixed, Eraser ran out of the pane */ .talkpane{position:absolute;right:18px;bottom:74px;z-index:9; width:max-content;min-width:266px;max-width:calc(100% - 58px); background:var(--chrome-2,#16273a);border:1px solid #ffffff26; border-radius:10px;padding:10px;box-shadow:0 18px 44px #000a; display:flex;flex-direction:column;gap:8px;} .talkpane[hidden]{display:none;} .tk-h{display:flex;align-items:center;justify-content:space-between; font-family:var(--mono);font-size:9px;letter-spacing:.18em; text-transform:uppercase;color:var(--cyan-deep);} .tk-row{display:flex;align-items:center;gap:8px; justify-content:space-between;} .tk-lab{font-size:11px;color:var(--chrome-ink-2);flex:none;} .tk-grp{display:flex;align-items:center;gap:3px;} .tk-b{display:flex;align-items:center;gap:6px;font-size:11px;} .tk-b[aria-pressed="true"]{background:var(--amber);color:var(--on-accent); border-color:transparent;} /* T624: the state IS the button's word now (the row's label names the thing), so it reads as one */ .tk-state{font:inherit;letter-spacing:normal;text-transform:none;} /* the heading's "?" sits beside "This talk", not mid-row */ .tk-h>button.jv-q{margin-right:auto;} /* T660: a talk's parts -- shown only where it has them */ .tk-row[hidden]{display:none;} .tk-sel{min-width:0;max-width:220px;font:12px var(--sans); padding:4px 6px;border-radius:6px;border:1px solid var(--border-strong); background:var(--input-bg);color:var(--chrome-ink);} @media print{.talkbtn,.talkpane{display:none !important;}} /* ---- T391: THE ANIMATION STORY ----------------------------------------- A strip between the ribbon and the stage. Each stop is a real render of the slide at that stop, scaled with zoom; the one the stage is showing is lit. An object off the stage at this stop is display:none, not opacity 0, so nothing invisible can be picked up by mistake. */ /* T580: the head is a COLUMN at the left and the cards take the rest, so the strip is one card tall and nothing in its head can end up under a pane docked over the right of the stage */ .story-strip{flex:none;border-bottom:1px solid var(--chrome-line); background:var(--chrome-1);padding:6px 12px 6px;display:flex;gap:10px; align-items:flex-start;} .story-head{flex:none;width:92px;display:flex;flex-direction:column; align-items:flex-start;gap:5px;padding-top:2px;} .story-lab{font:600 10px/1.25 var(--mono);letter-spacing:.1em; text-transform:uppercase;color:var(--chrome-ink-2);} .story-n{font:11px var(--sans);color:var(--chrome-ink-2);} .story-x{height:24px;padding:0 8px;font-size:11px;} .story-row{flex:1;min-width:0;display:flex;gap:8px;overflow-x:auto; padding-bottom:4px;scrollbar-width:thin;} .story-stop{flex:none;display:flex;flex-direction:column;gap:3px; padding:4px;border:1px solid var(--chrome-line);border-radius:7px; background:#ffffff06;cursor:pointer;color:var(--chrome-ink); text-align:left;width:calc(128px + 8px);} /* the Whole slide card is not a moment of the show; dashed says so */ .story-stop.story-whole{border-style:dashed;} /* T580: cards drag; the landing side, or the whole card for "onto" */ .story-stop[draggable="true"]{cursor:grab;} .story-stop.dragging{opacity:.5;} .story-stop.drop-before{box-shadow:-3px 0 0 0 var(--cyan);} .story-stop.drop-after{box-shadow:3px 0 0 0 var(--cyan);} .story-stop.drop-with{box-shadow:inset 0 0 0 2px var(--cyan);} .story-stop:hover{border-color:color-mix(in srgb,var(--accent) 55%,transparent);} .story-stop.on{border-color:var(--cyan); background:color-mix(in srgb,var(--accent) 14%,transparent);} .story-pic{position:relative;overflow:hidden;border-radius:4px; background:#0b141d;} .story-pic .story-slide{position:absolute;left:0;top:0;pointer-events:none;} .story-cap{display:flex;flex-direction:column;gap:1px; font:10.5px/1.25 var(--sans);color:var(--chrome-ink-2); overflow:hidden;} .story-cap b{color:var(--chrome-ink);font-weight:600;} .story-cap span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} .story-paint{position:fixed;left:-99999px;top:0;width:1280px;z-index:-1;} .an-item.an-storyout,.an-arrow-line.an-storyout{display:none!important;} /* the stage says it is showing a stop, so an empty-looking slide is read as "at this click" and not as "my things are gone" */ .deck.storying .deck-stage{box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--accent) 45%,transparent);} /* ---- T389: THE SCROLLING VERSION --------------------------------------- An overlay over the editor; the pages inside are buildPrintRoot's, given back their static flow and scaled with `zoom` to the width. An armed object keeps its entrance's from-state through its delay (fill-mode backwards), so a slide's things arrive a beat apart instead of all popping in before their turn. */ .deck-scroll{position:fixed;inset:0;z-index:400;display:flex; flex-direction:column;background:#20262c;} .deck-scroll-bar{display:flex;align-items:center;gap:12px;padding:8px 14px; background:var(--chrome-1);border-bottom:1px solid var(--chrome-line); color:var(--chrome-ink);flex:none;} .deck-scroll-t{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis; white-space:nowrap;font:600 13px var(--sans);} .deck-scroll-n{font:11px var(--mono);color:var(--chrome-ink-2);} .deck-scroll-body{flex:1 1 auto;overflow-y:auto;padding:24px 0;} .deck-scroll .scroll-root{position:static;left:auto;top:auto;width:auto; z-index:auto;} .deck-scroll .print-page{margin:0 auto 24px;box-shadow:0 8px 40px #0008;} /* T620: between the slides. Spaced is T389's cards; the other three run the pages edge to edge, as one long page, and differ in the line at each join. The line is a zero-height element between two pages with its stroke drawn across the join, above both (z-index), in a see-through grey: lighter than a dark slide, darker than a white one, so "faint" is faint on either. */ .deck-scroll:not([data-sep="gap"]) .print-page{margin:0 auto;box-shadow:none;} .deck-scroll .scroll-sep{display:none;position:relative;z-index:1;height:0; margin:0 auto;} .deck-scroll[data-sep="faint"] .scroll-sep, .deck-scroll[data-sep="strong"] .scroll-sep{display:block;} .deck-scroll .scroll-sep::after{content:"";position:absolute;left:0;right:0;} .deck-scroll[data-sep="faint"] .scroll-sep::after{top:0;height:1px; background:#8a939c80;} .deck-scroll[data-sep="strong"] .scroll-sep::after{top:-1px;height:2px; background:#7a838cf2;} /* the choice, in the bar: a label and four worded buttons, each with a small picture of its join */ .deck-scroll-bar{flex-wrap:wrap;row-gap:6px;} .deck-scroll-sep{display:inline-flex;align-items:center;gap:3px;flex:none;} .deck-scroll-seplab{font:11px var(--sans);color:var(--chrome-ink-2); margin-right:4px;white-space:nowrap;} .deck-scroll-sepb{display:inline-flex;align-items:center;gap:6px; font-size:12px;padding:3px 9px;white-space:nowrap;} .deck-scroll-sepb[aria-pressed="true"]{border-color:var(--cyan); color:var(--chrome-ink);background:color-mix(in srgb,var(--cyan) 18%,transparent);} .deck-scroll-sw{width:12px;height:14px;flex:none;border-radius:2px; background:#d6dce1;} .deck-scroll-sepb[data-sep="faint"] .deck-scroll-sw{ background:linear-gradient(#d6dce1 0 6px,#8a939c 6px 7px,#d6dce1 7px);} .deck-scroll-sepb[data-sep="strong"] .deck-scroll-sw{ background:linear-gradient(#d6dce1 0 6px,#4d555c 6px 8px,#d6dce1 8px);} .deck-scroll-sepb[data-sep="gap"] .deck-scroll-sw{ background:linear-gradient(#d6dce1 0 5px,transparent 5px 9px,#d6dce1 9px);} @media (max-width:760px){.deck-scroll-seplab{display:none;}} /* ---- T622: THE SCROLL VIEW ---------------------------------------------- The editor's stage as a column: the live page (always its first child, see 54b-scroll-view.js) and a picture of every other slide, put in deck order by `order`. The stage scrolls; its gutter is kept so the page measured before the pictures arrive is the page that fits after. `safe center`: a page zoomed wider than the stage starts at its left edge instead of being cut off there. */ .deck.editing .deck-stage.sv{flex-direction:column;justify-content:flex-start; align-items:safe center;overflow:auto;scrollbar-gutter:stable;} .deck-stage.sv>.slide,.deck-stage.sv>.sv-pic{flex:none;} /* the pages meet edge to edge: no frame of their own, no entrance (the swap from a picture to the live page must not be seen) */ .deck.editing .deck-stage.sv>.slide{border:none;border-radius:0; animation:none;} .deck.editing .deck-stage.sv:not([data-sep="gap"])>.slide{box-shadow:none;} /* each page lit for itself (applyPageBg): the class sits ON the live page, where `.page-light .slide` cannot see it, so its two rules that key on the page or the deck are said again for it */ .deck-stage.sv>.slide.page-light{color:var(--tk-ink,#1b2733);} .deck.editing .deck-stage.sv>.slide.page-light .an-cell.sel{ background:#ffffffd0;} .deck.editing .deck-stage.sv>.slide.page-light .an-cell.empty{ background:#00000008;border-color:#00000030;} /* above the pictures, so a handle or a box hanging off the page's edge is drawn over the next slide rather than under it */ .deck-stage.sv>.sv-live{position:relative;z-index:2;} .deck-stage.sv>.sv-pic{position:relative;overflow:hidden;margin:0 auto; background:var(--page-bg,#0b141d);cursor:pointer;} .deck-stage.sv>.sv-pic:hover{outline:2px solid color-mix(in srgb,var(--cyan) 45%,transparent);outline-offset:-2px;} .deck-stage.sv>.sv-pic>.print-page{position:absolute;left:0;top:0; pointer-events:none;} .deck-stage.sv .sv-pic .slide{border:none;border-radius:0;box-shadow:none; margin:0;width:auto;max-height:none;aspect-ratio:auto;animation:none;} /* Spaced: cards a gap apart, each with the editor's own shadow */ .deck-stage.sv[data-sep="gap"]>.slide, .deck-stage.sv[data-sep="gap"]>.sv-pic{margin-bottom:22px;} .deck-stage.sv[data-sep="gap"]>.sv-pic{box-shadow:0 14px 60px #00000066;} /* the lines, as the scrolling page draws them (T620): zero height, stroked across the join, above both pages */ .deck-stage.sv>.sv-sep{display:none;flex:none;position:relative;z-index:3; height:0;margin:0 auto;pointer-events:none;} .deck-stage.sv[data-sep="faint"]>.sv-sep, .deck-stage.sv[data-sep="strong"]>.sv-sep{display:block;} .deck-stage.sv>.sv-sep::after{content:"";position:absolute;left:0;right:0;} .deck-stage.sv[data-sep="faint"]>.sv-sep::after{top:0;height:1px; background:#8a939c80;} .deck-stage.sv[data-sep="strong"]>.sv-sep::after{top:-1px;height:2px; background:#7a838cf2;} /* T699: where the next presentation begins, whatever the lines are: a band of its own, the presentations a gap apart, with the next one's name over its line */ .deck-stage.sv>.sv-sep.pz{display:flex;align-items:flex-end;height:34px; padding-bottom:6px;box-sizing:border-box;} .deck-stage.sv>.sv-sep.pz::after{top:auto;bottom:0;height:3px; border-radius:2px;background:var(--pzl,var(--accent));} .deck-stage.sv>.sv-sep.pz::before{content:attr(data-name); font:600 12px var(--sans);color:var(--chrome-ink-2); white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;} .deck-stage.sv[data-dir="across"]>.sv-sep.pz{width:34px;height:auto; align-items:center;justify-content:flex-end;padding:0 6px 0 0; writing-mode:vertical-rl;} .deck-stage.sv[data-dir="across"]>.sv-sep.pz::after{left:auto;right:0; top:0;bottom:0;width:3px;height:auto;} /* ---- T678: ACROSS -------------------------------------------------------- The column laid on its side (54b-scroll-view.js): the pages in a row, each as tall as the view, the row centred while it fits. Every margin that spaced the column down spaces the row along -- the live page's inline margin:auto included, which in a row would push its neighbours to the ends of the view. The line between two pages stands up between them. Under the thumbnails (54c) the stage keeps no scrollbar of its own: they are the row's. Without them, a scrollbar always there, so the page measured before the pictures arrive is the page that fits after -- the column's stable gutter, turned. */ .deck.editing .deck-stage.sv[data-dir="across"]{flex-direction:row; justify-content:safe center;overflow:auto;scrollbar-gutter:auto;} .deck.editing .deck-stage.sv[data-dir="across"]:not([data-bar]){ scrollbar-width:none;} .deck.editing .deck-stage.sv[data-dir="across"][data-bar]{overflow-x:scroll;} .deck.editing .deck-stage.sv[data-dir="across"]>.slide{margin:auto 0!important;} .deck-stage.sv[data-dir="across"]>.sv-pic{margin:auto 0;} .deck.editing .deck-stage.sv[data-dir="across"][data-sep="gap"]>.slide{ margin:auto 22px auto 0!important;} .deck-stage.sv[data-dir="across"][data-sep="gap"]>.sv-pic{ margin:auto 22px auto 0;} .deck-stage.sv[data-dir="across"]>.sv-sep{width:0;margin:auto 0;} .deck-stage.sv[data-dir="across"]>.sv-sep::after{top:0;bottom:0;right:auto;} .deck-stage.sv[data-dir="across"][data-sep="faint"]>.sv-sep::after{ left:0;width:1px;height:auto;} .deck-stage.sv[data-dir="across"][data-sep="strong"]>.sv-sep::after{ top:0;left:-1px;width:2px;height:auto;} /* the scrolling page, across: a row of pages as tall as the window */ .deck-scroll[data-dir="across"] .deck-scroll-body{display:flex; overflow-x:auto;overflow-y:hidden;padding:24px;} .deck-scroll[data-dir="across"] .scroll-root{display:flex;align-items:center; width:max-content;margin:auto;} .deck-scroll[data-dir="across"].svr-on .deck-scroll-body{scrollbar-width:none;} .deck-scroll[data-dir="across"] .print-page{flex:none;margin:0 24px 0 0;} .deck-scroll[data-dir="across"]:not([data-sep="gap"]) .print-page{margin:0;} .deck-scroll[data-dir="across"] .scroll-sep{flex:none;width:0;margin:0;} .deck-scroll[data-dir="across"] .scroll-sep::after{top:0;bottom:0;right:auto;} .deck-scroll[data-dir="across"][data-sep="faint"] .scroll-sep::after{ left:0;width:1px;height:auto;} .deck-scroll[data-dir="across"][data-sep="strong"] .scroll-sep::after{ top:0;left:-1px;width:2px;height:auto;} .deck-scroll-railb[hidden]{display:none;} .deck-scroll-sepb .bic{width:12px;height:12px;} /* ---- T678: THE THUMBNAILS ALONG THE BOTTOM (54c-thumb-rail.js) ----------- A bar the sheet tabs' height and look (T654), a row of small slides in it and its pin at the end. Kept, it is in the layout, under the page and above the tabs; otherwise it waits below the view, faded out, and comes up over the page's foot when the strip under it is pointed at, as the auto-hidden tabs come up over it. Kept, a docked pane stops above it, as it stops above the tabs; either way it stops short of the side toolbar. */ .deck,.deck-scroll{--svr-h:76px;--svr-th-h:54px;--svr-right:0px;} .deck.rbn-side{--svr-right:var(--rbn-side-w);} .deck.editing.svr-on.svr-kept .selpane{bottom:calc(var(--svr-h) + 8px);} .deck.editing.svr-on.svr-kept.sheets-on:not(.sheets-auto) .selpane{ bottom:calc(var(--svr-h) + var(--sht-h) + 8px);} .sv-rail{display:flex;align-items:center;gap:6px;height:var(--svr-h); box-sizing:border-box;padding:0 8px 0 6px;border-top:1px solid #ffffff1c; background:var(--chrome-1,#0e1926);color:var(--chrome-ink);} .sv-rail[hidden],.sv-rail-hot[hidden]{display:none;} .svr-list{flex:1;min-width:0;height:100%;display:flex;align-items:center; gap:6px;padding:0 2px;position:relative;overflow-x:auto;overflow-y:hidden; scrollbar-width:thin;} .svr-th{flex:none;position:relative;padding:0;line-height:0;cursor:pointer; border:2px solid transparent;border-radius:6px;background:none;} .svr-th .svr-mini{width:var(--svr-th-w,96px);height:var(--svr-th-h); border-radius:3px;overflow:hidden;pointer-events:none;} .svr-th:hover{border-color:color-mix(in srgb,var(--cyan) 45%,transparent);} .svr-th.on{border-color:var(--accent);} .svr-th.hid .svr-mini{opacity:.45;} .svr-th:focus-visible{outline:2px solid var(--focus);outline-offset:1px;} .svr-n{position:absolute;left:4px;bottom:4px;padding:2px 4px;border-radius:3px; font:600 9.5px/1 var(--mono);background:#000000a6;color:#fff; pointer-events:none;} .svr-run{flex:none;align-self:stretch;display:flex;align-items:center; max-width:130px;margin-left:6px;padding:0 6px 0 8px; border-left:3px solid var(--run-c,var(--chrome-ink-3)); font:11px var(--sans);color:var(--chrome-ink-2);white-space:nowrap; overflow:hidden;text-overflow:ellipsis;} .svr-run:first-child{margin-left:0;} .svr-pin{flex:none;display:inline-flex;align-items:center;gap:4px; padding:3px 8px;font-size:11.5px;white-space:nowrap;} .svr-pin .bic{width:12px;height:12px;} .svr-pin[aria-pressed="true"]{border-color:var(--cyan); background:color-mix(in srgb,var(--cyan) 18%,transparent);} body.light .sv-rail{border-top-color:#0000001f;} /* kept: in the layout (the page is fitted to what is left above it) */ .sv-rail.kept{position:relative;flex:none;} .deck-stagewrap>.sv-rail.kept{margin-right:var(--svr-right);} /* waiting: over the foot of the view, faded and let through */ .sv-rail.auto{position:absolute;left:0;bottom:0;z-index:66; opacity:0;visibility:hidden;transform:translateY(10px);pointer-events:none; box-shadow:0 -6px 18px #00000055; transition:opacity .16s ease,transform .16s ease,bottom .16s ease, visibility 0s linear .16s;} .deck-stagewrap>.sv-rail.auto{right:var(--svr-right);} .deck-scroll>.sv-rail.auto{right:0;z-index:3;} .sv-rail.auto.peek{opacity:1;visibility:visible;transform:none; pointer-events:auto; transition:opacity .16s ease,transform .16s ease,bottom .16s ease, visibility 0s;} .sv-rail-hot{position:absolute;left:0;right:0;bottom:0;height:10px;z-index:65;} .deck-scroll>.sv-rail-hot{z-index:2;} /* above the sheet tabs while they are in the layout; with them hidden as well, the one bottom edge is theirs and raises both (shtPeek) */ .deck.editing.sheets-on:not(.sheets-auto) .deck-stagewrap>.sv-rail.auto, .deck.editing.sheets-on:not(.sheets-auto) .deck-stagewrap>.sv-rail-hot{ bottom:var(--sht-h);} .deck.editing.sheets-auto.sheets-peek .deck-stagewrap>.sv-rail.auto{ bottom:var(--sht-h);} .deck.editing.sheets-auto.sheets-on .deck-stagewrap>.sv-rail-hot{ display:none;} @media (prefers-reduced-motion:reduce){ .sv-rail.auto,.sv-rail.auto.peek{transition:none;}} /* belt and braces: a deferred re-render (text fitting runs a tick later) can put the editor's ring back on a page after buildPrintRoot has stripped it, so no page ever draws one */ .print-page .sel{outline:none!important;} .an-scrollin{animation-fill-mode:backwards!important;} /* ---- T386: THE TALK'S TOOLS -------------------------------------------- All three sit above the deck (z 100) and the spotlight (400) but under the drawer's library dialog; none of them take the pointer, so a click still lands on the slide and advances. */ .jv-laserdot{position:fixed;z-index:420;width:16px;height:16px; margin:-8px 0 0 -8px;border-radius:50%;pointer-events:none; background:#ff3b30;box-shadow:0 0 6px 2px #ff3b30aa,0 0 22px 8px #ff3b3055;} body.jv-laser .deck-stage{cursor:none;} /* T465: the lens ELEMENT is .jv-lensbox; .jv-lens is the BODY flag (talkSync toggles it, the rule below reads it). They were one name, so the body itself was position:fixed and pointer-events:none while the magnifier was up -- every click in the show died, including the Magnifier and Close buttons that would have ended it (2026-09-15 review). tests/test_talk_tools.py now refuses a body flag that is also a bare element selector. */ .jv-lensbox{position:fixed;z-index:420;border-radius:50%;overflow:hidden; pointer-events:none;border:3px solid #ffffffcc; box-shadow:0 0 0 1px #0008,0 18px 48px #000a;background:#000;} .jv-lens-in{position:absolute;inset:0;} body.jv-lens .deck-stage{cursor:crosshair;} .jv-black{position:fixed;inset:0;z-index:430;background:#000;cursor:pointer;} .tk-grp .tk-b{flex:1 1 auto;} /* T64: the free-crop lasso. An overlay over the annot layer, so the canvas mousedown handler -- gatekeeper for selection, marquee, resize, rotate, group entry and eight tools -- never learns about it. */ .crop-lasso{position:absolute;inset:0;z-index:40;cursor:crosshair; background:#0006;touch-action:none;} .cl-ink{position:absolute;inset:0;width:100%;height:100%; pointer-events:none;overflow:visible;} .cl-poly{fill:#ffffff1f;stroke:var(--amber,#f0a848);stroke-width:.5; vector-effect:non-scaling-stroke;stroke-dasharray:3 2;} .cl-hint{position:absolute;left:50%;top:8px;transform:translateX(-50%); background:var(--chrome-2,#16273a);color:var(--chrome-ink);font-size:11px; padding:4px 9px;border-radius:6px;white-space:nowrap; pointer-events:none;box-shadow:0 6px 18px #0008;} /* T90: the history rail is a tree now. Depth is an indent and a rule rather than a drawn graph -- twenty snapshots four deep is a list with steps in it, and a canvas would be a second way of drawing what the rail already draws. */ /* ---- T237: THE GRAPH REPLACED THE INDENT --------------------------- T90 drew the shape of the tree by indenting each row by its depth and heading each run with its branch name, because "the shape reads without drawing a graph". It does not, past two branches (2026-09-04, user: "like how you can see the git history thing where you can just see the little lines with the dots for versions and then can see branches as different colours from that. I really like that design"). Each row now carries an SVG gutter: one lane per branch, in its own colour, with the dot on the lane the version belongs to and an elbow where a branch leaves its parent. */ .dh-r{display:grid; grid-template-columns:var(--dh-gutter,18px) minmax(0,1fr) 26px; align-items:stretch;gap:0;} .dh-gutter{display:block;line-height:0;} .dh-gsvg{display:block;} .dh-ren{padding:0;width:22px;align-self:center;justify-self:center; opacity:0;font-size:11px;} .dh-r:hover .dh-ren,.dh-ren:focus-visible{opacity:1;} .dh-ren svg{width:11px;height:11px;} .dh-brlab{display:flex;align-items:center;gap:6px; font-family:var(--mono);font-size:8.5px;letter-spacing:.18em; text-transform:uppercase;color:var(--cyan-deep);padding:10px 8px 4px;} .dh-brlab svg{width:11px;height:11px;} .dh-snap{border-left:3px solid var(--dh-lane,transparent); border-left:2px solid transparent;} .dh-snap.head{border-left-color:var(--amber,#f0a848);} .dh-snap.head .dh-when{color:var(--warning,#f0a848);} /* T465: per-scheme */ .dh-snap.forked .dh-why{color:var(--cyan);} .dh-onbr{display:inline-flex;align-items:center;gap:5px;margin-left:10px; font-family:var(--mono);font-size:10px;color:var(--cyan); border:1px solid #ffffff26;border-radius:999px;padding:2px 9px;} .dh-onbr svg{width:11px;height:11px;} .dh-branch{margin-left:8px;} /* T87: the design surface. Deliberately the history overlay's shape -- full screen, a rail of things on the left, one of them open on the right -- because it is the same kind of screen and a second layout for it would be a second idea about what a full-screen view is. */ .deck-design{position:fixed;inset:0;z-index:400;display:flex; flex-direction:column;background:var(--chrome-0,#0b141d); font-family:var(--sans);} .dg-main{display:flex;flex:1 1 auto;min-height:0;} /* T443: the count table in the rail -- T490: the loose bands only, after the style rows; a style's own count and its odd wearers sit on its row */ .dg-counts{margin-top:8px;padding-top:6px; border-top:1px solid var(--chrome-line);} .dg-cnt.dg-rownote{margin:-3px 7px 4px;padding:2px 3px 3px;cursor:default; flex-wrap:nowrap;border-top:1px solid #ffffff12;border-radius:0;} .dg-cnt.dg-rownote:hover{background:none;} .dg-cnt.dg-rownote .dg-cnt-note,.dg-cnt.dg-rownote .dg-cnt-fix{ margin-left:0;} .dg-cnt.dg-rownote .dg-cnt-note{flex:1 1 auto;} .dg-cnt.dg-rownote .dg-cnt-fix{flex:none;width:auto;padding:2px 8px;} .dg-cnt{display:flex;flex-wrap:wrap;align-items:center;gap:4px 6px; padding:4px 6px;border-radius:6px;font:12px var(--sans); color:var(--chrome-ink);cursor:pointer;} .dg-cnt:hover{background:#ffffff0c;} .dg-cnt-n{font:600 13px var(--mono);min-width:22px;text-align:right; color:var(--cyan);} .dg-cnt-l{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis; white-space:nowrap;} .dg-cnt-odd .dg-cnt-l{color:var(--amber);} .dg-cnt-note{flex:1 0 calc(100% - 28px);margin-left:28px;min-width:0; font-size:11px;color:var(--amber);} .dg-cnt-loose .dg-cnt-l{color:var(--chrome-ink-2);} /* the fix on its own line under the words, so neither is squeezed */ .dg-cnt .dg-cnt-fix{font-size:10.5px;padding:2px 6px; flex:1 0 calc(100% - 28px);min-width:0;box-sizing:border-box; margin-left:28px;width:auto;justify-content:center;} /* T444: the deck colours panel's preview */ .tok-preview{margin:4px 0 8px;} .tok-pv-page{border-radius:6px;padding:8px 10px;font:12px var(--sans); border:1px solid var(--chrome-line);} .tok-pv-h{font-weight:700;font-size:14px;margin-bottom:2px;} .tok-pv-box{margin-top:6px;padding:4px 8px;border-radius:5px; border:1px solid;font-size:11px;} .dg-rail{width:216px;flex:none;overflow-y:auto;padding:8px; border-right:1px solid #ffffff14;display:flex;flex-direction:column; gap:3px;} .dg-body{flex:1 1 auto;min-width:0;overflow-y:auto;padding:16px 22px 40px;} .dg-row{display:flex;align-items:baseline;justify-content:space-between; gap:8px;text-align:left;background:transparent;border:1px solid transparent;border-radius:7px;padding:7px 9px;color:inherit; cursor:pointer;width:100%;} .dg-row:hover{background:#ffffff0d;} .dg-row.on{background:#ffffff14;border-color:#ffffff2b;} .dg-name{line-height:1.15;min-width:0;overflow:hidden; text-overflow:ellipsis;white-space:nowrap;font-size:15px;font-weight:500; font-style:normal;font-family:var(--sans);} /* T295: a variation sits under the type it varies, and its colour rides on a chip -- the NAME is deliberately left uncoloured, because a style whose ink is the page's would vanish against this chrome. */ .dg-row.dg-rowvar{padding-left:22px;position:relative;} .dg-row.dg-rowvar::before{content:"";position:absolute;left:10px;top:50%; width:6px;height:1px;background:var(--chrome-ink-3);} .dg-swatch{flex:none;width:11px;height:11px;border-radius:3px; border:1px solid #ffffff33;margin-left:6px;} body.light .dg-swatch{border-color:#00000026;} .dg-count{font-family:var(--sans);font-size:11.5px;color:var(--chrome-ink-2); flex:none;} /* T230: a heading, in words. It was 10px spaced capitals -- the very thing the ribbon gave up in T219 -- with three other type sizes stacked under it (2026-09-03, user: "all the text is a bit confusing here. There is text of heaps of different sizes and different width everywhere"). */ /* T465: the screen's ink is the theme's (three headings, the slide chips and the scope select were dark-only literals, invisible or an island in Light -- 2026-09-15 review) */ .dg-h{font-family:var(--sans);font-size:15px;font-weight:600; letter-spacing:0;text-transform:none;color:var(--chrome-ink);margin:26px 0 5px;} .dg-h:first-child{margin-top:0;} .dg-sub{margin:0 0 10px;font-size:12.5px;line-height:1.55;color:var(--chrome-ink); max-width:62ch;} .dg-spec{padding:12px 14px;border:1px solid #ffffff1a;border-radius:8px; /* the ACTUAL page colour, not chrome: a dark style meant for a light slide was unreadable in its own preview (JVUX-10) */ background:var(--page-bg,#ffffff08);line-height:1.3;overflow:hidden; text-overflow:ellipsis;white-space:nowrap;} /* T519: one job at a time. The old screen showed the style editor, placement board, instance table and slide navigator simultaneously. */ .dg-navrow{display:flex;align-items:flex-start;gap:8px;margin:8px 0 16px; border-bottom:1px solid var(--chrome-line,#ffffff1f);} .dg-tabs{display:flex;flex:1 1 auto;gap:4px;margin:0;padding-bottom:10px; overflow-x:auto;} .dg-tab{min-width:128px;justify-content:center;white-space:nowrap;} .dg-tab[aria-selected="true"]{background:var(--accent-deep,var(--cyan-deep)); border-color:var(--accent-deep,var(--cyan-deep)); color:var(--on-accent-deep,#fff);} .dg-sheet-toggle{flex:none;margin-left:auto;white-space:nowrap;} .dg-viewhead{display:flex;align-items:center;justify-content:space-between; gap:12px;margin-bottom:8px;} .dg-viewhead .dg-h{margin:0;} /* T519: a property sheet, not differently sized islands. Two regular columns keep labels and controls aligned; Colours needs the whole row. */ .dg-ctrls{display:grid;grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 18px;margin-top:12px;padding:4px 12px; border:1px solid #ffffff1c;border-radius:8px;background:#ffffff04;} .dg-grp{display:flex;align-items:center;gap:4px;min-width:0;padding:8px 0; border:0;border-bottom:1px solid #ffffff14;background:none;} .dg-grp[data-group="colours"],.dg-grp[data-group="reset"]{ grid-column:1/-1;} .dg-grp[data-group="reset"]{justify-content:flex-end;border-bottom:0;} .dg-grplab{font-family:var(--sans);font-size:11px;color:var(--chrome-ink-2); width:72px;flex:none;margin-right:3px;white-space:nowrap;} .dg-grplab:empty{display:none;} .dg-b{min-width:30px;} .dg-size{font-family:var(--mono);font-size:11px;color:var(--chrome-ink); min-width:112px;text-align:center;white-space:nowrap;} .dg-family-name{margin:7px 8px 1px;color:var(--muted);font-size:10px; font-weight:700;letter-spacing:.08em;text-transform:uppercase;} .jv-style-family{display:block;border:1px solid #ffffff14; border-radius:7px;margin:4px 0;background:#ffffff04;} .jv-style-family-head{display:flex;align-items:stretch;gap:5px;padding:5px;} .jv-style-family-head>.jv-styleopt{flex:1 1 auto;width:auto;min-width:0; margin:0;} .jv-style-expand{flex:none;width:58px;display:flex;flex-direction:column; align-items:center;justify-content:center;gap:2px;padding:3px; font:10px/1.1 var(--sans);color:var(--chrome-ink-2);} .jv-style-expand .bic{width:14px;height:14px;} .jv-style-expand.on{background:var(--accent-deep,var(--cyan-deep)); border-color:var(--accent-deep,var(--cyan-deep)); color:var(--on-accent-deep,#fff);} .jv-style-family-children{border-top:1px solid #ffffff14;padding:5px;} .jv-style-family-children[hidden]{display:none!important;} .jv-style-family-children>.jv-styleopt{margin:0 0 4px;width:100%;} .jv-style-family-children>.jv-styleopt:last-child{margin-bottom:0;} .dg-col{width:30px;height:26px;padding:0;border:1px solid #ffffff26; border-radius:6px;background:transparent;cursor:pointer;} /* the board: a slide, and a rectangle you drag on it */ /* T368: the looks a type comes in, on the type's own page */ .dg-looks{display:flex;flex-wrap:wrap;align-items:center;gap:6px; margin:2px 0 10px;} .dg-lookslab{font-family:var(--mono);font-size:9.5px;letter-spacing:.12em; text-transform:uppercase;color:var(--chrome-ink-3,#8ea2b3); padding-right:4px;} .dg-look{font-size:12.5px;padding:3px 10px;border-radius:7px;} .dg-look.on{border-color:var(--cyan);} .dg-lookmore{position:relative;} .dg-lookmore>summary{list-style:none;cursor:pointer;border-style:dashed;} .dg-lookmore>summary::-webkit-details-marker{display:none;} .dg-lookoffers{position:absolute;z-index:5;top:calc(100% + 5px);left:0; display:flex;gap:6px;padding:7px;background:var(--chrome-1,#13202c); border:1px solid var(--chrome-line,#ffffff26);border-radius:8px; box-shadow:0 10px 28px #0008;white-space:nowrap;} .dg-slotpick{font-family:var(--sans);font-size:12px; background:var(--btn-bg,#ffffff0e);color:var(--chrome-ink); border:1px solid var(--chrome-line,#ffffff26);border-radius:6px; padding:3px 6px;} /* Look and Position now share the same calm single-column canvas; the tabs say which question it answers, so duplicate all-caps column labels are gone. */ .dg-top{display:block;width:100%;max-width:980px;margin-top:2px;} .dg-typecol .dg-ctrls{margin-top:12px;} .dg-typecol .dg-spec{white-space:normal;line-height:1.2;} .dg-boardwrap{position:relative;} /* the board is a slide: the page's own colour, and a size container so the words on it are set in percent of ITS height (cqh), the same currency a style's size is written in */ .dg-board{position:relative;width:100%;container-type:size; background:var(--page-bg,#ffffff0a);border:1px solid #ffffff2b; border-radius:6px;margin:0 0 8px;overflow:hidden;} .dg-realtx{display:block;width:100%;line-height:1.15;overflow:hidden; padding:.5cqh .6cqw;box-sizing:border-box;pointer-events:none; word-break:break-word;} .dg-realtx.dg-realempty{opacity:.45;font-style:italic;} .dg-other .dg-realtx{opacity:.4;} .dg-put{margin-bottom:6px;} /* the contact sheet */ /* the contact sheet, a column down the right-hand side */ .dg-sheetcol{width:250px;flex:none;overflow-y:auto; padding:14px 12px 40px;border-left:1px solid #ffffff14; background:#ffffff04;} .dg-sheetcol[hidden]{display:none!important;} .dg-sheetcol .dg-h{font-size:13.5px;margin:0 0 4px;} .dg-sheetcol .dg-sub{font-size:11.5px;margin-bottom:8px;max-width:none;} .dg-sheetcol .dg-putrow{flex-wrap:wrap;} .dg-sheetcol .dg-scope{max-width:100%;} .dg-sheet{display:grid;gap:10px;margin-top:10px; grid-template-columns:1fr;} /* ABOVE THE EDITOR IT IS DESCRIBING (T170). .pickbar's own z-index is 99, which is right for the notebook card picker -- that bar appears when the deck is NOT covering the screen. .deck is fixed at 100, so a sequencing bar left at 99 rendered underneath the very editor it was talking about: the DOM reported it visible, at the right size, in the right place, and the screen showed nothing. .matchbar solved this at 150 for exactly the same reason; this joins it rather than inventing a third number. */ /* T180: setting the order happens IN THE RIBBON, as a group of the Animation tab that appears while the mode is armed. It was a bar fixed across the top of the window (z-index 150, over the ribbon it stood in for); the tint and the rule on its left are what say "mode" now that it is a group like any other. */ .seq-cell{display:flex;flex-direction:column;justify-content:center; font-size:10px;line-height:1.3;white-space:nowrap;color:#c9d6e2; padding:0 4px;} .seq-cell b{color:#fff;} body.light .seq-cell{color:var(--ink-2);} body.light .seq-cell b{color:var(--ink);} /* the modifier hints are the first words to go when the row is tight -- they explain, the tooltips repeat them, and nothing acts on them; the count stays */ .deck.erc-tight .seq-cell:not(.fmt-path) span+span{display:none;} /* T171: the effect gallery. Cards are .sh-opt, which is already icon-over-word, so this only lays them out and gives the popover its heading, its scroller and its footer. The strip shows five and a half cards on purpose: a card CUT at the edge is the scroll affordance, taken from the film strip rather than from PowerPoint's spinners. */ .anim-gal{display:block;width:392px;max-width:92vw;padding:8px;} .anim-galh{font-family:var(--mono);font-size:9px;letter-spacing:.09em; text-transform:uppercase;color:var(--chrome-ink-2);padding:0 2px 6px;} .anim-galrow{display:flex;gap:6px;overflow-x:auto;overflow-y:hidden; scroll-snap-type:x mandatory;padding-bottom:4px;} .anim-galrow .anim-card{flex:0 0 66px;scroll-snap-align:start; display:flex;flex-direction:column;align-items:center;gap:5px; padding:9px 4px;text-align:center;font-size:10.5px;line-height:1.15;} .anim-galrow .anim-card .bic{width:20px;height:20px;} .anim-galrow .anim-card.on{background:var(--cyan-deep); color:var(--on-accent-deep,#fff); border-color:var(--cyan-deep);} /* the SCOPE, said before you click: picking with nothing selected is a large edit and it must never be a silent one */ .anim-galfoot{margin-top:7px;padding-top:7px;border-top:1px solid #ffffff14; font-size:11px;color:var(--chrome-ink-2);} /* T170: the bar's own furniture. The NAME first, so the mode is a thing you can remember afterwards rather than a sentence you were reading at the time; then the running state; then the chooser. */ .seq-fx{display:inline-flex;align-items:center;gap:4px;flex-wrap:nowrap;} .seq-fxb{padding:2px 7px;font-size:10.5px;display:inline-flex; align-items:center;gap:5px;white-space:nowrap;} .seq-fxb.on{background:var(--cyan-deep);color:var(--on-accent-deep,#fff); border-color:var(--cyan-deep);} /* a key looks like a key, on the button and not only in the tooltip: a mode whose shortcuts are invisible has no shortcuts */ .seq-fxb kbd{font-family:var(--mono);font-size:9px;line-height:1; padding:1px 3px;border:1px solid currentColor;border-radius:3px; opacity:.75;} .seq-fxb.on kbd{opacity:1;} /* T168: sequencing by pointing. The bar is .pickbar, so it inherits the one picking-mode look; only the armed SLIDE needs saying. Every object advertises that it is clickable, and the selection chrome goes away because a resize handle is a claim about a click this mode does not make. */ .deck.seqing .annot-layer{cursor:cell;} .deck.seqing .an-item{outline:1px dashed color-mix(in srgb, var(--cyan) 55%,transparent);outline-offset:2px;} .deck.seqing .an-item:hover{outline:2px solid var(--cyan);} .deck.seqing .an-resize,.deck.seqing .an-rotate, .deck.seqing .an-handle,.deck.seqing .an-endpt{display:none!important;} .deck.seqing .an-buildno{display:flex;} /* T142: the Review centre's category rows */ .rv-cat{padding:8px 2px;border-bottom:1px solid #ffffff12;} .rv-cat:last-child{border-bottom:none;} .rv-cat-h{display:flex;align-items:center;gap:8px;} .rv-cat-nm{flex:1;font-size:11.5px;color:var(--chrome-ink);} .rv-cat-n{font-family:var(--mono);font-size:9.5px;color:var(--success); border:1px solid color-mix(in srgb,var(--success) 27%,transparent);border-radius:8px;padding:1px 7px;} .rv-cat-n.has{color:var(--amber,#f0a848); border-color:#f0a84855;} .rv-cat-scope{font-family:var(--sans);font-size:11px; letter-spacing:0;color:var(--chrome-ink-2);margin:2px 0 6px;} .rv-cat-scope::first-letter{text-transform:uppercase;} .rv-cat-open{display:block;width:100%;text-align:left;font-size:11px; padding:4px 7px;} /* T143: autosave is a SETTING with a countdown, not a second primary action beside Save — pressed stops painting it accent (JVUX-07) */ .deck-qat .qat-auto[aria-pressed="true"]{background:none; border-color:#ffffff2e;color:var(--chrome-ink,#c9d6e2);} /* T143: the File menu's named sections, and its dangerous tail */ /* T679: the scheme's own danger ink. --warn was never defined, so the red was a fallback that body.light .dc-mi / .dc-mhead outranked: in Light, Discard changes and Delete presentation were plain grey rows */ .dc-mhead-warn,body.light .dc-mhead-warn{color:var(--danger,#ff6b57);} .dc-mi-warn,body.light .dc-mi-warn{color:var(--danger,#ff6b57);} .dc-mi-warn:hover{background:color-mix(in srgb,var(--danger,#ff6b57) 14%, transparent);} /* T139: the tab wrapper is semantic only */ .rbn-tabset{display:contents;} /* T144: the empty notebook column's worded door */ /* T115: masters — the inherited layer, inert behind everything */ .slide-mast{position:absolute;inset:0;pointer-events:none;z-index:0;} /* T215: a PANEL -- block layout (the .sh-menu grid had spread its note over three columns), wide enough to read, on the overlay stack */ .sh-menu.mast-panel{display:block;position:fixed;left:auto;right:16px;top:110px; z-index:420;width:320px;max-height:70vh;overflow-y:auto; padding:10px 12px 14px;} .mast-panel .rd-note{font-size:12px;line-height:1.5;} .mast-panel .rd-state{font-size:11px;margin:6px 0;} .mast-name{font-family:var(--mono);font-size:10px;letter-spacing:.1em; text-transform:uppercase;color:var(--cyan);margin:10px 0 4px;} .mast-row{display:block;width:100%;text-align:left;font-family:var(--sans); font-size:12.5px; padding:4px 7px;margin:2px 0;} .mast-new{display:block;width:100%;text-align:left;margin-top:10px;} /* T478: the master's choices as swatches and pressed runs */ .mast-lab{font-family:var(--sans);font-size:11px;color:var(--chrome-ink-2); margin:8px 0 3px;} .mast-chips{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:4px;} .mast-chips .bg-chip{width:22px;height:22px;border-radius:5px;padding:0; border:1px solid #ffffff2a;} .mast-chips .bg-chip[aria-pressed="true"],.mast-chips .bg-auto[aria-pressed="true"]{ outline:2px solid var(--accent,var(--cyan));outline-offset:1px;} .mast-chips .bg-auto{font-size:11px;padding:2px 8px;} .mast-run{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:4px;} .mast-opt{font-size:12px;padding:3px 8px;} /* T117: charts — the SVG fills its box; the dialog is the numbers */ /* POSITIONED, like every other kind (T164). Charts shipped in T117 without a `position`, and every other annotation declares its own (.an-table, .an-image, .an-flip...). Two consequences, both bad and both invisible in a screenshot of a slide with one chart on it: the inline left/top drawChart writes were INERT, so a chart always rendered at the slide's top-left however you placed it; and an unpositioned element stacks below the arrow hit-layer -- an absolute