/* Outline: a dark, borderless page laid out like the Write desk, nothing but text. Each scene's title is upright, its details line
   appearing under it on hover, the short summary a smaller italic (it can run long), then the long synopsis. Flags and span bars sit
   in the left margin, notes and checklists in the right; whole parts fold to one line a scene. */
#view-outline{overflow:auto;padding:84px 0 30vh;box-sizing:border-box;background:radial-gradient(60% 45% at 50% 0%,rgba(var(--glow),.06),transparent 70%);-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 74px);mask-image:linear-gradient(to bottom,transparent 0,#000 74px);scrollbar-width:thin;scrollbar-color:var(--faint) transparent}
.ol-doc{position:relative;width:var(--ol-w,var(--desk-w));margin-left:var(--ol-l,var(--desk-l));padding:30px 0 60px;box-sizing:border-box;transition:margin-left .4s cubic-bezier(.2,.8,.2,1),width .4s cubic-bezier(.2,.8,.2,1)}
[data-oid]{position:relative;scroll-margin-top:96px}
[data-oid].flash>.ol-stitle,[data-oid].flash>.ol-eyebrow{animation:olFlash 1.8s ease}
@keyframes olFlash{0%,35%{color:var(--accent)}}
.ol-f{outline:none;white-space:pre-wrap;overflow-wrap:break-word;border-radius:6px;margin-inline:-6px;padding-inline:6px;cursor:text;transition:color .2s}
/* the scene being edited is marked by a line in the margin and slightly brighter words, never a lighter background */
.ol-scene::before{content:"";position:absolute;left:-16px;top:6px;bottom:4px;width:2px;border-radius:2px;background:var(--accent);opacity:0;transition:opacity .2s}
.ol-scene:focus-within::before{opacity:.8}
.ol-scene:focus-within .ol-short{color:color-mix(in srgb,var(--accent) 40%,#fff)}
.ol-scene:focus-within .ol-long{color:rgba(var(--text-rgb),.9)}
/* head */
.ol-head h1{margin:8px 0 0;font-weight:500;font-size:44px;line-height:1.05}
.ol-eyebrow{margin:0;display:flex;align-items:center;gap:8px;font-size:10.5px;letter-spacing:.32em;text-transform:uppercase;color:var(--accent)}
.ol-eyebrow span{letter-spacing:.12em;color:var(--mute)}
/* parts and chapters */
.ol-part{padding-top:56px}
.ol-pfold{padding:0;color:var(--accent)}
.ol-pfold svg{width:12px;height:12px;margin-left:-20px;opacity:.5;transition:transform .2s ease}
.ol-part.folded>.ol-pfold svg{transform:rotate(-90deg)}
.ol-ptitle{margin-top:8px;font-weight:500;font-size:40px;line-height:1.1}
.ol-pshort{margin-top:8px;font-family:var(--f-display);font-style:italic;font-size:19px;line-height:1.5;color:var(--dim)}
.ol-notes{margin-top:10px;font-family:var(--f-ui);font-size:13.5px;line-height:1.65;color:var(--mute)}
.ol-notes:not(:empty)::before{content:"Notes";display:block;margin-bottom:2px;font-size:9.5px;letter-spacing:.22em;text-transform:uppercase;color:rgba(var(--text-rgb),.32)}
/* a chapter opens with a small break in the theme's own shape (a leaf, a shell, a snowflake), its number, then its title */
.ol-chapter{margin-top:72px}
.ol-break{display:flex;align-items:center;justify-content:center;gap:12px;margin:0 0 30px;color:color-mix(in srgb,var(--accent) 75%,transparent)}
.ol-break i{width:72px;height:1px;background:linear-gradient(90deg,transparent,currentColor)}
.ol-break i:last-child{transform:scaleX(-1)}
.ol-break svg{opacity:.85}
.ol-ceyebrow{justify-content:flex-start}
.ol-ctitle{margin-top:8px;font-family:var(--f-theme);font-size-adjust:.4;font-weight:500;font-size:34px;line-height:1.12}
.ol-cshort{margin-top:8px;font-family:var(--f-prose);font-style:italic;font-size:16.5px;line-height:1.6;color:var(--dim)}
/* scenes */
.ol-scene{margin-top:40px}
/* a scene: its title upright, the short summary in italics in the accent's tint, the long summary as body text set in from a rule */
.ol-stitle{font-family:var(--f-title);font-weight:500;font-size:22px;line-height:1.25;color:var(--text)}
.ol-short{margin-top:6px;font-family:var(--f-prose);font-style:italic;font-size:16.5px;line-height:1.6;color:color-mix(in srgb,var(--accent) 60%,var(--text))}
.ol-long{margin-top:10px;font-family:var(--f-prose);font-size:15.5px;line-height:1.8;color:rgba(var(--text-rgb),.76)}
/* a scene's top line, as on its card: stickers, who and where, the word count; what adds things comes in on hover (outline.js moves .hot)
   or while it's being edited, always holding its place, so nothing moves. Its foot is the writing phase */
.ol-top{display:flex;align-items:center;gap:14px;height:26px;margin-bottom:6px;min-width:0}
.ol-top .c-sep{margin:0 -2px}
.ol-mi{flex:0 1 auto;min-width:0;display:inline-flex;align-items:center;gap:6px;height:24px;padding:0;font-size:12.5px;color:rgba(var(--text-rgb),.66);white-space:nowrap;overflow:hidden}
.ol-mi span{overflow:hidden;text-overflow:ellipsis}
.ol-mi span+.who-dot{margin-left:8px}
.ol-mi .stk-d{font-size:12px}
.ol-mi .stk-d+.stk-d{margin-left:8px}
.ol-mi>svg{flex:none;width:13px;height:13px;opacity:.75}
.ol-mi .who-dot{width:18px;height:18px;font-size:8.5px;box-shadow:none}
.ol-mi .who-dot.place{width:15px;height:15px;border-radius:4px}
.ol-mi:hover,.ol-mi:focus-visible{color:var(--text)}
.ol-mi.empty{color:rgba(var(--text-rgb),.38);opacity:0;visibility:hidden;transition:opacity .2s ease,visibility 0s linear .2s}
.ol-mi.empty:hover{color:var(--text)}
.ol-top .grow{flex:1 0 0;margin-left:-14px}
.ol-tools{display:flex;align-items:center;gap:14px;opacity:0;visibility:hidden;transition:opacity .2s ease,visibility 0s linear .2s}
.ol-scene.hot .ol-tools,.ol-scene:focus-within .ol-tools,.ol-scene.hot .ol-mi.empty,.ol-scene:focus-within .ol-mi.empty{opacity:1;visibility:visible;transition:opacity .2s ease}
.ol-tools .ol-mi.empty{opacity:1;visibility:inherit}
.ol-top .c-wc{flex:none;margin-left:0;font-size:14px}
.ol-top .vswitch{flex:none;padding:2px;border-radius:9px}
.ol-top .vswitch button{width:26px;height:22px;border-radius:7px}
.ol-top .vswitch svg{width:14px;height:14px}
.ol-foot{display:flex;align-items:center;height:26px;margin-top:8px}
.ol-foot .stage-steps{margin-left:-6px;font-size:10px}
/* a chapter's own switch, beside its number when the heading is hovered */
.ol-ceyebrow .vswitch{margin-left:auto;padding:2px;border-radius:9px;opacity:0;transition:opacity .2s}
.ol-ceyebrow .vswitch button{width:26px;height:22px;border-radius:7px}
.ol-ceyebrow .vswitch svg{width:14px;height:14px}
.ol-chapter:has(>.ol-ceyebrow:hover,>.ol-ctitle:hover,>.ol-ceyebrow:focus-within,>.ol-ctitle:focus) .ol-ceyebrow .vswitch{opacity:1}
/* a folded part: one quiet line per scene */
.ol-part.folded>:not(.ol-pfold):not(.ol-ptitle):not(.ol-chapter):not(.ol-scene){display:none}
.ol-part.folded .ol-chapter>:not(.ol-scene){display:none}
.ol-part.folded .ol-scene{margin-top:12px}
.ol-part.folded .ol-scene>:not(.ol-stitle):not(.ol-short){display:none}
.ol-part.folded .ol-short{display:inline}
.ol-part.folded .ol-stitle{display:inline;font-size:18px}
.ol-part.folded .ol-scene::before{display:none}
.ol-part.folded .ol-short{margin-left:12px;font-size:16px;opacity:.7}
.ol-scene.hot{z-index:3}
/* flags and span bars in the left margin, pointing in at the text: a mirror of the board's */
.ol-scene .mks{left:auto;right:calc(100% + 58px);top:6px}
.ol-scene .mk-flags{left:auto;right:calc(var(--lanes) * 7px);align-items:flex-end}
.ol-scene .mk-anch{left:auto;right:calc(var(--lanes) * 7px)}
.ol-scene .mk-anch .mk{left:auto;right:0}
.ol-scene .mk{max-width:150px;font-size:12px;border-radius:5px 0 0 5px;padding:3px 8px 3px 9px}
.ol-scene .mk-anch .mk{transition:top .2s ease}
.ol-scene.mk-hot::before{opacity:.8;background:var(--text)}
/* a scene can go anywhere: a line with a + appears in the gap above each scene on hover */
.ol-ins{position:absolute;left:0;right:0;top:-31px;height:22px;display:flex;align-items:center;gap:8px;opacity:0;transition:opacity .15s;color:var(--accent)}
.ol-ins::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,color-mix(in srgb,var(--accent) 55%,transparent),transparent)}
.ol-ins i{flex:none;width:20px;height:20px;margin-left:-28px;display:grid;place-items:center;border-radius:50%;border:1px solid color-mix(in srgb,var(--accent) 55%,transparent);background:var(--bg)}
.ol-ins svg{width:11px;height:11px}
.ol-ins:hover,.ol-ins:focus-visible{opacity:1}
.mk-add{width:26px;height:22px;display:grid;place-items:center;border-radius:5px 0 0 5px;border:1px dashed var(--faint);border-right:0;color:var(--mute);pointer-events:auto;opacity:0;transition:opacity .2s}
.ol-scene.hot .mk-add,.mk-add:focus-visible{opacity:1}
.mk-add:hover{color:var(--text);border-color:var(--mute)}
.mk-add svg{width:12px;height:12px}
.ol-doc>.mk-layer .mk-rail{pointer-events:auto;cursor:default}
.ol-doc>.mk-layer .mk-rail::before{content:"";position:absolute;inset:0 -5px}
/* notes and checklists: cards in the right margin, a little askew like the mockup's, level with their line. The tab on top is
   the handle to drag them by */
.ol-pins{position:absolute;left:calc(100% + 40px);top:0;width:210px}
.ol-pin{position:absolute;left:0;width:100%;transition:top .2s ease}
.ol-pin:focus-within{z-index:2}
.ol-pin.flash{animation:pinFlash 1.6s ease}
@keyframes pinFlash{0%,40%{box-shadow:0 0 0 3px var(--accent),0 12px 24px rgba(0,0,0,.4);border-radius:5px}}
.ol-pin.ol-lift{transition:none;transform:scale(1.02);z-index:5;box-shadow:0 18px 34px rgba(0,0,0,.5)}
/* notes for the whole scene: a pile under a small heading, folded to its first card (the rest edging out behind) past two */
.ol-pile{position:absolute;left:0;width:100%;transition:top .2s ease}
.ol-pile .ol-pin{position:relative;margin-bottom:10px}
.ol-pile-h{display:flex;align-items:center;gap:8px;margin:0 0 7px;font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:rgba(var(--text-rgb),.4)}
.ol-pile-h span{flex:1}
.ol-pile-h button{padding:2px 7px;border-radius:6px;font-size:10.5px;letter-spacing:.04em;text-transform:none;color:var(--accent)}
.ol-pile-h button:hover{background:rgba(var(--text-rgb),.08)}
.ol-pile:not(.open) .ol-pin{box-shadow:6px 6px 0 -1px color-mix(in srgb,#a3ab9b 70%,#000),12px 12px 0 -2px color-mix(in srgb,#a3ab9b 55%,#000);border-radius:4px;margin-bottom:14px}
/* glued words: a quiet thread from the end of their line out to the card; the words themselves light up only while the card is
   hovered or being edited */
.ol-glue{position:absolute;left:0;top:0;width:0;height:0;pointer-events:none}
.ol-ul{position:absolute;box-sizing:border-box;border-bottom:1.5px solid transparent;border-radius:2px;transition:background .15s,border-color .15s}
.ol-ul.on{background:color-mix(in srgb,var(--nc) 26%,transparent);border-bottom-color:var(--nc)}
.ol-glue svg{position:absolute;left:0;top:0;overflow:visible}
.ol-glue path{fill:none;stroke:var(--nc);stroke-width:1;stroke-dasharray:2 3;opacity:.45;transition:opacity .15s}
.ol-glue circle{fill:var(--nc);opacity:.6}
.ol-glue path.on{opacity:1;stroke-dasharray:none;stroke-width:1.3}
.ol-glue circle.on{opacity:1}
/* the pin on a card glues it to selected words. It only shows while some are selected: a round accent tack on the card's top
   corner, apart from the card's own buttons */
.ol-glue-b{position:absolute;z-index:3;top:-10px;right:-10px;width:26px;height:26px;display:none;place-items:center;border-radius:50%;background:var(--accent);color:var(--bg);box-shadow:0 0 0 3px var(--bg),0 6px 14px rgba(0,0,0,.45);animation:popIn .18s ease both}
.ol-glue-b svg{width:14px;height:14px}
.ol-glue-b:hover{filter:brightness(1.12)}
body.ol-sel .ol-glue-b{display:grid}
.ol-selbar{position:fixed;z-index:60;display:flex;gap:2px;padding:3px;border-radius:10px;background:rgba(var(--shade-rgb),.92);border:1px solid var(--hair);box-shadow:0 10px 24px rgba(0,0,0,.4);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.ol-selbar button{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 10px;border-radius:7px;font-size:12px;color:var(--dim)}
.ol-selbar button:hover{background:rgba(var(--text-rgb),.1);color:var(--text)}
.ol-selbar svg{width:13px;height:13px}
.ol-pin .mini-note{box-shadow:0 2px 0 rgba(0,0,0,.15),0 12px 24px rgba(0,0,0,.4)}
.ol-pin .mini-note textarea{min-height:56px;overflow:hidden}
.ol-plist{box-sizing:border-box;padding:10px 12px 8px;border-radius:5px;background:#b6b4ac;box-shadow:0 2px 0 rgba(0,0,0,.15),0 12px 24px rgba(0,0,0,.4)}
.ol-plist:hover .lp-acts,.ol-plist:focus-within .lp-acts{opacity:1}
.ol-plist .ls-head{padding-right:54px}
.ol-plist .ls-title{font-size:16px}
.ol-plist .ls-item{min-height:26px}
.ol-plist .ls-in{font-size:12.5px}
.ol-grip{position:absolute;z-index:2;left:50%;top:-6px;width:38px;height:12px;margin-left:-19px;border-radius:3px;background:rgba(var(--text-rgb),.22);backdrop-filter:blur(4px);cursor:grab;touch-action:none;opacity:0;transition:opacity .15s}
.ol-pin:hover .ol-grip,.ol-pin.ol-lift .ol-grip{opacity:1}
@media (hover:none){.ol-grip{opacity:.7}}
/* no room in the margins: the scene's flags, then its notes, follow its text in rows, and span bars are left out */
.ol-narrow .ol-scene .mks{position:static;width:auto;margin-top:12px;display:flex;flex-wrap:wrap;gap:4px}
.ol-narrow .ol-scene .mk-flags,.ol-narrow .ol-scene .mk-anch{position:static;width:auto;flex-direction:row;flex-wrap:wrap}
.ol-narrow .ol-scene .mk-anch .mk{position:static}
.ol-narrow .ol-scene .mk{border-radius:5px}
.ol-narrow .ol-scene .mk-add{border:1px dashed var(--faint);border-radius:5px}
.ol-narrow .ol-scene .mks:not(:has(.mk)){display:none}
.ol-narrow .ol-pins{position:static;width:auto;margin-top:14px;display:flex;flex-wrap:wrap;gap:12px}
.ol-narrow .ol-pin,.ol-narrow .ol-pile{position:relative;width:210px}
.ol-narrow .ol-grip{display:none}
/* adding, the end, the empty state */
.ol-add{display:inline-flex;align-items:center;gap:6px;margin-top:26px;height:28px;padding:0 12px;border-radius:999px;font-size:12px;letter-spacing:.03em;color:var(--mute);border:1px dashed var(--faint);opacity:.7}
.ol-add:hover{color:var(--text);border-color:var(--mute);opacity:1}
.ol-add svg{width:12px;height:12px}
.ol-part.folded>.ol-add,.ol-part.folded .ol-chapter>.ol-add{display:none}
.ol-end{margin-top:48px}
.ol-empty{padding:30px 0 10px}
.ol-empty h2{margin:0 0 10px;font-family:var(--f-display);font-weight:500;font-size:34px}
.ol-empty p{margin:0 0 22px;color:var(--dim);font-size:14px}
.ol-empty .row{display:flex;gap:10px;flex-wrap:wrap}
/* narrow screens: no margin for the + */
@media (max-width:900px){.ol-ins i{margin-left:0}}
@media (max-width:640px){.ol-head h1{font-size:34px}.ol-ptitle{font-size:30px}.ol-stitle{font-size:22px}}