/* Living Rows: the drawn, scripted app windows in the home page feature rows (js/living-rows.js).
   Built from the lab in .scratch/2026-10-17-02f23cfa-main/rows-lab (work/port.cjs). */
/* Living Rows: shared pieces for the feature-row scenes (engine.js). The drawn-app base
   (.lp-frame, .lp-stage, .ic, .lp-caret, .lp-web ...) comes from css/living-page.css. */

/* The frame's aspect ratio and the stage size are set from data-w/data-h by the engine. */
.lr-frame{box-shadow:0 30px 58px -32px rgba(61,46,28,.45);}

/* Instant (reduced motion / Still): no transitions or keyframe animations anywhere in the window. */
.lr-instant,.lr-instant *{transition:none !important;animation:none !important;}

/* The orange Story Web layer is above the window content and below the pointer. */
.lr-web{z-index:25;}
.lr-web path.soft{stroke-width:1.2;opacity:.75;}
.lr-web path.thick{stroke-width:2.4;}
/* for a full-window scene (1024 wide), which shows at about half size on the page: reads like "thick" does in the larger-scale scenes */
.lr-web path.heavy{stroke-width:4.4;}

/* Mouse pointer */
.lr-ptr{position:absolute;left:0;top:0;z-index:30;width:20px;height:24px;pointer-events:none;opacity:0;
  transition-property:transform,opacity;transition-timing-function:cubic-bezier(.45,.05,.25,1),ease;transition-duration:650ms,.3s;}
.lr-ptr.on{opacity:1;}
.lr-ptr svg{position:absolute;left:-2px;top:-1.5px;width:20px;height:24px;overflow:visible;transition:transform .12s ease;transform-origin:2px 2px;
  filter:drop-shadow(0 2px 2px rgba(41,36,30,.28));}
.lr-ptr path{fill:#29241E;stroke:#FFF7E6;stroke-width:1.4;stroke-linejoin:round;}
.lr-ptr.down svg{transform:scale(.86);}
.lr-ptr i{position:absolute;left:-14px;top:-14px;width:28px;height:28px;border-radius:50%;border:2px solid #CD6E2C;opacity:0;transform:scale(.3);}
.lr-ptr.ring i{animation:lrRing .55s ease-out;}
@keyframes lrRing{0%{opacity:.9;transform:scale(.3);}100%{opacity:0;transform:scale(1.25);}}

/* The row's figcaption title fades when a scene renames it (s.caption). */
[data-lr-cap]{transition:opacity .4s ease;}


/* ==================================================================== switch */
/* One-Click Switch scene. AUTHORED UNPREFIXED here; work/switch/build-css.mjs prefixes every selector with [data-scene="switch"] and writes scenes/switch.css.
   A drawn 1024x680 Penpoint window (default Parchment theme): Manuscript Mode with the Minipen closed, Worldbuilding Mode on a character page,
   and the real mode transition between them. Measured from app-ref2/switch (captures + dumps). Reuses the hero's .pa-* / .po-* / .ic classes. */

/* ---- the two modes live in one stack; only one is visible ---- */
[data-scene="switch"] .sw-mode{position:absolute;left:0;top:0;width:1024px;height:680px;display:flex;flex-direction:column;background:#FFF7E6;visibility:hidden;z-index:0;}
[data-scene="switch"] .sw-mode.on{visibility:visible;}
[data-scene="switch"] .sw-wb{display:block;}

/* ---- WebView2 overlay scrollbars: 10px track, 6px rounded thumb, small arrows ---- */
[data-scene="switch"] .sw-sb{position:absolute;right:0;bottom:0;width:10px;background:#FFF7E6;z-index:3;}
[data-scene="switch"] .sw-sb .ar{position:absolute;left:2px;width:0;height:0;border-left:3px solid transparent;border-right:3px solid transparent;}
[data-scene="switch"] .sw-sb .ar.up{top:4px;border-bottom:4px solid #948D82;}
[data-scene="switch"] .sw-sb .ar.dn{bottom:4px;border-top:4px solid #948D82;}
[data-scene="switch"] .sw-sb .th{position:absolute;left:2px;width:6px;border-radius:3px;background:#948D82;transition:top 1.1s cubic-bezier(.4,0,.2,1);}

/* ======================= Manuscript Mode ======================= */
[data-scene="switch"] .sw-ms .pa-top{height:47.5px;}
[data-scene="switch"] .sw-ms .pa-ib--w + .pa-ib--w{margin-left:-4px;}
[data-scene="switch"] .sw-ms .pa-tb{padding-left:0;}
[data-scene="switch"] .sw-ms .pa-tb .zoom{padding:0 8px 0 6px;}
[data-scene="switch"] .sw-ms .pa-tb .zoom span{width:45px;}
[data-scene="switch"] .sw-ms .pa-chh{padding-bottom:15px;}
[data-scene="switch"] .sw-ms .pa-back{transition:background-color .15s ease-out;}
[data-scene="switch"] .sw-ms .pa-back.hov{background:#EBDCC8;}
[data-scene="switch"] .sw-ms .pa-outline{width:290px;position:relative;}
[data-scene="switch"] .sw-ms .po-tree{padding-right:10px;}
[data-scene="switch"] .sw-ms .po-ch--on .cv{color:#FEF9F0;}
[data-scene="switch"] .sw-ms .pa-handle{width:5px;}
[data-scene="switch"] .sw-ed{position:relative;flex:1;min-height:0;display:flex;flex-direction:column;padding-right:10px;}
[data-scene="switch"] .sw-ms .pa-page{flex:1;min-height:0;}
[data-scene="switch"] .sw-ms .pa-scroll{padding-top:48px;}
[data-scene="switch"] .sw-live{min-height:18.4px;}

/* Saved button (top bar in both modes). Sized to its word, not the app's fixed 139.8 px slot, so "+" and "Saved" sit
   next to the icons on the right and the searchbar gets the room (Joel 2026-10-17). */
[data-scene="switch"] .sw-saved{display:flex;align-items:center;gap:8px;height:32px;padding:0 4px 0 8px;font-weight:500;flex:none;}
[data-scene="switch"] .sw-saved .ck{width:20px;display:flex;justify-content:center;flex:none;}
[data-scene="switch"] .sw-saved .sv{position:relative;display:block;height:16.6px;line-height:16.56px;}

/* the words just written */
[data-scene="switch"] .sw-ms .lp-ins{transition:background-color 1.6s ease;}

/* ======================= Worldbuilding Mode ======================= */
/* header */
[data-scene="switch"] .sw-hd{position:absolute;left:60px;top:0;right:0;height:60px;background:#FFF7E6;border-bottom:1px solid #F1E8D9;display:flex;align-items:center;padding:0 24px;z-index:6;}
[data-scene="switch"] .sw-hl{display:flex;gap:4px;flex:none;}
[data-scene="switch"] .sw-ab{width:32px;height:32px;display:flex;align-items:center;justify-content:center;color:#3D2E1C;}
[data-scene="switch"] .sw-ab.sw-off{opacity:.5;}
[data-scene="switch"] .sw-vr24{width:1px;height:24px;background:#E6DCCD;margin-left:12px;flex:none;}
[data-scene="switch"] .sw-ttl{margin:0 0 0 12px;flex:none;font-size:28.8px;font-weight:600;letter-spacing:-.72px;line-height:36px;color:#29241E;white-space:nowrap;}
[data-scene="switch"] .sw-srch{flex:1;min-width:0;margin-left:16px;position:relative;height:40px;background:#F8F0E1;border:1px solid #3D2E1C;}
[data-scene="switch"] .sw-srch .mg{position:absolute;left:11px;top:9px;color:rgba(61,46,28,.4);}
/* the full "Glorious Searchbar" placeholder; the app's expand-to-fullscreen icon is left out */
[data-scene="switch"] .sw-srch .ph{position:absolute;left:43px;right:12px;top:9px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:14.4px;line-height:20.57px;color:#7D5D35;}
[data-scene="switch"] .sw-hr2{display:flex;align-items:center;gap:8px;margin-left:16px;flex:none;font-size:14.4px;}
[data-scene="switch"] .sw-trio{display:flex;}

/* left nav rail: 60px, hover-expands to 200px */
[data-scene="switch"] .sw-nav{position:absolute;left:0;top:0;bottom:0;width:60px;background:#FFF7E6;border-right:1px solid #F2E8D9;overflow:hidden;z-index:40;transition:width .25s cubic-bezier(0,0,.2,1);}
[data-scene="switch"] .sw-nav.x{width:200px;}
[data-scene="switch"] .sw-logo{position:absolute;left:22px;top:14.8px;height:15.4px;width:15.4px;color:#B8884A;transition:left .25s cubic-bezier(0,0,.2,1);}
[data-scene="switch"] .sw-logo .ic{width:15.4px;height:15.4px;}
[data-scene="switch"] .sw-nav.x .sw-logo{left:16px;}
[data-scene="switch"] .sw-logo .wm{position:absolute;left:20.2px;top:-7.7px;font-family:Georgia,'Times New Roman',serif;font-weight:700;font-size:22.4px;line-height:30.8px;letter-spacing:-.56px;color:#29241E;white-space:nowrap;opacity:0;transition:opacity .25s ease;}
[data-scene="switch"] .sw-nav.x .sw-logo .wm{opacity:1;}
[data-scene="switch"] .sw-pin{position:absolute;right:6px;top:6px;width:24px;height:24px;display:flex;align-items:center;justify-content:center;color:#29241E;opacity:0;transition:opacity .25s ease;}
[data-scene="switch"] .sw-nav.x .sw-pin{opacity:1;}
[data-scene="switch"] .sw-hr{position:absolute;left:16px;width:34px;height:1px;background:rgba(41,36,30,.34);transition:width .25s cubic-bezier(0,0,.2,1);}
[data-scene="switch"] .sw-nav.x .sw-hr{width:168px;}
[data-scene="switch"] .sw-ni{position:absolute;left:0;right:0;height:30.2px;display:flex;align-items:center;color:#29241E;font-weight:500;transition:background-color .2s ease;}
[data-scene="switch"] .sw-ni .ic{position:absolute;left:21.8px;top:7.4px;width:15.4px;height:15.4px;transition:left .25s cubic-bezier(0,0,.2,1);}
[data-scene="switch"] .sw-ni .ic.arc{width:21.8px;height:21.8px;left:18.6px;top:4.2px;transform:rotate(45deg);}
[data-scene="switch"] .sw-nav.x .sw-ni .ic{left:23.4px;}
[data-scene="switch"] .sw-nav.x .sw-ni .ic.arc{left:20.2px;}
[data-scene="switch"] .sw-ni span{position:absolute;left:48px;font-size:14.4px;line-height:21.6px;white-space:nowrap;opacity:0;transform:translateX(-8px);transition:opacity .25s ease,transform .25s ease;}
[data-scene="switch"] .sw-nav.x .sw-ni span{opacity:1;transform:none;}
[data-scene="switch"] .sw-ni.on{background:#29241E;color:#FEF9F0;font-weight:700;}
[data-scene="switch"] .sw-ni.hov{background:#EBDCC8;}
[data-scene="switch"] .sw-ni u{position:absolute;left:12px;right:12px;bottom:3px;height:1px;background:#FEF9F0;}

/* characters list */
[data-scene="switch"] .sw-list{position:absolute;left:60px;top:60px;width:452px;bottom:0;background:#FFF7E6;overflow:hidden;}
[data-scene="switch"] .sw-lt{position:absolute;left:24px;top:24px;width:404px;height:32px;display:flex;justify-content:flex-end;align-items:center;gap:4px;}
[data-scene="switch"] .sw-sort{height:28px;display:flex;align-items:center;gap:8px;padding:0 8px;font-size:11.2px;letter-spacing:.28px;color:#7D5D35;}
[data-scene="switch"] .sw-sort .ic{margin-right:4px;}
[data-scene="switch"] .sw-gear{width:32px;height:32px;display:flex;align-items:center;justify-content:center;color:#3D2E1C;}
[data-scene="switch"] .sw-add{position:absolute;left:24px;top:68px;width:404px;height:32.6px;border:2px dashed #E6DCCD;display:flex;align-items:center;justify-content:center;gap:8px;color:#7D5D35;font-size:14.4px;line-height:16.56px;}
[data-scene="switch"] .sw-rows{position:absolute;left:24px;top:116.6px;width:394px;display:flex;flex-direction:column;gap:10px;}
[data-scene="switch"] .sw-row{display:flex;align-items:center;gap:12px;padding:8px 12px;border:1px solid transparent;background:#FFF7E6;color:#3D2E1C;}
[data-scene="switch"] .sw-row .fr{position:relative;width:56px;height:56px;flex:none;border:2px solid #E0CEB2;background:#FDEACC;}
[data-scene="switch"] .sw-row .fr::before{content:"";position:absolute;top:1px;left:1px;right:1px;bottom:1px;border:1px solid #EEDBBE;}
[data-scene="switch"] .sw-row .fr img{position:absolute;top:2px;left:2px;width:48px;height:48px;object-fit:cover;display:block;}
[data-scene="switch"] .sw-row .tx{flex:1;min-width:0;}
[data-scene="switch"] .sw-row .nm{font-size:17.6px;line-height:20.24px;}
[data-scene="switch"] .sw-row .a{font-size:14.4px;line-height:16.56px;font-style:italic;color:#7D5D35;margin-bottom:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
[data-scene="switch"] .sw-row .nm:last-child{margin-bottom:0;}
[data-scene="switch"] .sw-row .nm + .im{margin-top:4px;}
[data-scene="switch"] .sw-row .im{font-size:16px;line-height:18.4px;color:#7D5D35;}
[data-scene="switch"] .sw-row.on{background:#29241E;color:#FEF9F0;}
[data-scene="switch"] .sw-row.on .a{color:rgba(254,249,240,.6);}
[data-scene="switch"] .sw-row.on .im{color:rgba(254,249,240,.7);}
[data-scene="switch"] .sw-row .dot{width:8px;height:8px;border-radius:50%;background:#FEF9F0;flex:none;display:none;}
[data-scene="switch"] .sw-row.on .dot{display:block;}

/* divider: dead center of the window, so the two halves read 50/50 (the app's list-toggle handle is left out) */
[data-scene="switch"] .sw-div{z-index:5;position:absolute;left:512px;top:60px;bottom:0;width:1px;background:#FAF2E2;}

/* detail pane: the character page */
[data-scene="switch"] .sw-detail{position:absolute;left:513px;top:60px;right:0;bottom:0;overflow:hidden;background:#FFF7E6;}
/* The clip keeps scrolled text out of the pane's top edge, where a scaled-down window blends a pixel row past the sticky title. */
[data-scene="switch"] .sw-dscroll{position:absolute;left:0;top:0;right:0;bottom:0;overflow:hidden;clip-path:inset(4px 0 0 0);}
[data-scene="switch"] .sw-card{position:absolute;left:24px;top:61px;width:461px;border:1px solid rgba(230,220,205,.5);background:#F8F0E1;padding:24px 24px 0;transition:transform 1.1s cubic-bezier(.4,0,.2,1);}
[data-scene="switch"] .sw-dh{display:flex;gap:20px;margin:12px 12px 28px;}
[data-scene="switch"] .sw-por{position:relative;width:128px;height:128px;flex:none;border:2px solid #E0CEB2;background:#FDEACC;}
[data-scene="switch"] .sw-por::before{content:"";position:absolute;top:1px;left:1px;right:1px;bottom:1px;border:1px solid #EEDBBE;}
[data-scene="switch"] .sw-por img{position:absolute;top:2px;left:2px;width:120px;height:120px;object-fit:cover;display:block;}
[data-scene="switch"] .sw-dn{flex:1;min-width:0;}
[data-scene="switch"] .sw-dn h1{margin:0 0 4px;font-size:38.4px;font-weight:600;letter-spacing:-1.92px;line-height:48px;color:#3D2E1C;}
[data-scene="switch"] .sw-dn .ak{margin:-2px 0 4px;padding-left:24px;font-size:17.6px;font-style:italic;line-height:20.24px;color:#7D5D35;}
[data-scene="switch"] .sw-dn .im{font-size:19.2px;font-weight:600;letter-spacing:-.48px;line-height:26.4px;color:#7D5D35;}
[data-scene="switch"] .sw-dn .im b{font-weight:600;color:#3D2E1C;}
[data-scene="switch"] .sw-blk{margin-bottom:16px;}
[data-scene="switch"] .sw-bh{display:flex;align-items:center;gap:8px;padding:8px 8px 4px;margin-bottom:8px;border-bottom:1px solid rgba(61,46,28,.15);font-size:22.4px;font-weight:600;letter-spacing:-.56px;line-height:30.8px;color:#3D2E1C;}
[data-scene="switch"] .sw-bh .cv{transform:rotate(90deg);}
[data-scene="switch"] .sw-bt{padding:0 12px 12px 32px;font-size:16px;line-height:18.4px;color:#29241E;}
[data-scene="switch"] .sw-bt p{margin:0 0 8px;}
[data-scene="switch"] .sw-bt .mn{font-weight:600;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:2px;}
[data-scene="switch"] .sw-more{height:900px;}
[data-scene="switch"] .sw-sticky{position:absolute;left:24px;top:0;width:461px;height:45px;padding:0 24px;display:flex;align-items:center;justify-content:space-between;background:#FFF7E6;box-shadow:0 0 0 rgba(61,46,28,0);transition:box-shadow .3s ease;z-index:2;}
[data-scene="switch"] .sw-sticky.on{box-shadow:0 3px 6px -2px rgba(61,46,28,.26);}
[data-scene="switch"] .sw-sticky .t{font-size:22.4px;font-weight:600;letter-spacing:-.56px;line-height:30.8px;color:#7D5D35;opacity:0;transition:opacity .3s ease;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
[data-scene="switch"] .sw-sticky.on .t{opacity:1;}
[data-scene="switch"] .sw-sticky .ed{display:flex;align-items:center;gap:6px;height:32.6px;padding:0 12px;font-size:14.4px;color:#3D2E1C;flex:none;}

/* ======================= the real mode transition ======================= */
/* ModeTransition.tsx + global.css: wipe-in 1100ms, hold 650ms, wipe-out 1100ms (the app's repeat timings, x2). */
[data-scene="switch"] .sw-tr{position:absolute;left:0;top:0;width:1024px;height:680px;overflow:hidden;z-index:20;pointer-events:none;}
[data-scene="switch"] .sw-tr[data-phase="idle"]{visibility:hidden;}
[data-scene="switch"] .sw-tr-wipe{position:absolute;left:0;top:0;right:0;bottom:0;background:#F7EFDE;display:flex;align-items:center;justify-content:center;will-change:clip-path;}
[data-scene="switch"] .sw-tr[data-phase="wipe-in"] .sw-tr-wipe{animation:swWipeIn 1100ms cubic-bezier(.4,0,.2,1) forwards;}
[data-scene="switch"] .sw-tr[data-phase="hold"] .sw-tr-wipe{clip-path:polygon(0% 0%,130% 0%,115% 100%,-15% 100%);}
[data-scene="switch"] .sw-tr[data-phase="wipe-out"] .sw-tr-wipe{animation:swWipeOut 1100ms cubic-bezier(.25,0,.4,1) forwards;}
@keyframes swWipeIn{0%{clip-path:polygon(-130% 0%,0% 0%,-15% 100%,-145% 100%);}100%{clip-path:polygon(0% 0%,130% 0%,115% 100%,-15% 100%);}}
@keyframes swWipeOut{0%{clip-path:polygon(0% 0%,130% 0%,115% 100%,-15% 100%);}100%{clip-path:polygon(130% 0%,260% 0%,245% 100%,115% 100%);}}
[data-scene="switch"] .sw-tr-border{position:absolute;left:0;top:0;right:0;bottom:0;padding:34px 51.2px;opacity:0;}
[data-scene="switch"] .sw-tr-border div{width:100%;height:100%;border:1px solid #29241E;opacity:.8;}
[data-scene="switch"] .sw-tr-quill{position:absolute;left:0;top:0;right:0;bottom:0;display:flex;align-items:center;justify-content:center;opacity:0;color:#29241E;z-index:3;transform:translateY(-7px);}
[data-scene="switch"] .sw-tr[data-dir="to-worldbuilding"] .sw-tr-quill{transform:translateY(5px);}
[data-scene="switch"] .sw-tr-quill svg{width:112px;height:160px;overflow:visible;}
[data-scene="switch"] .sw-tr-text{position:relative;z-index:10;text-align:center;opacity:0;transform:translateY(6px);}
[data-scene="switch"] .sw-tr-text h1{margin:0;font-family:Georgia,'Times New Roman',serif;font-weight:700;font-size:38.4px;line-height:1.25;letter-spacing:-.05em;color:#3D2E1C;}
[data-scene="switch"] .sw-tr-zoom{display:block;margin-top:8px;}
[data-scene="switch"] .sw-tr-zoom p{margin:8px 0 0;font-size:17.6px;line-height:1.15;color:#7D5D35;opacity:0;}
[data-scene="switch"] .sw-tr:not([data-phase="idle"]) .sw-tr-border{animation:swFade .4s ease-out forwards;}
[data-scene="switch"] .sw-tr:not([data-phase="idle"]) .sw-tr-quill{animation:swFade .4s cubic-bezier(.25,.1,.25,1) .1s forwards;}
[data-scene="switch"] .sw-tr:not([data-phase="idle"]) .sw-tr-text{animation:swBrand .4s cubic-bezier(.25,.1,.25,1) .15s forwards;}
[data-scene="switch"] .sw-tr:not([data-phase="idle"]) .sw-tr-zoom{animation:swZoom 2850ms linear forwards;}
[data-scene="switch"] .sw-tr:not([data-phase="idle"]) .sw-tr-zoom p{animation:swFade .4s cubic-bezier(.25,.1,.25,1) .25s forwards;}
@keyframes swFade{0%{opacity:0;}100%{opacity:1;}}
@keyframes swBrand{0%{opacity:0;transform:translateY(6px);}100%{opacity:1;transform:translateY(0);}}
@keyframes swZoom{0%{transform:scale(.95);}100%{transform:scale(1.1);}}

/* ==================================================================== search */
/* Living Rows: "search" scene (the Searchbar row). The Glorious Searchbar popup on its own, filling the frame.
   Drawn about 1.15x the app's own sizes so it reads on the page (the frame shows at about 490 px); colors, weights,
   marks, badges and row anatomy are the app's (Parchment theme, measured in app-ref2/search). Prefix: sr-. */

[data-scene="search"] .sr-pop{position:absolute;left:0;top:0;width:560px;height:440px;overflow:hidden;background:#FFF7E6;color:#3D2E1C;}

/* ---- the input row ---- */
[data-scene="search"] .sr-in{position:absolute;left:14px;right:14px;top:0;height:58px;border-bottom:1px solid rgba(61,46,28,.55);}
[data-scene="search"] .sr-is{position:absolute;left:8px;top:19px;width:20px;height:20px;color:#3D2E1C;opacity:.5;}
[data-scene="search"] .sr-q{position:absolute;left:40px;top:0;height:58px;display:flex;align-items:center;font-size:19px;line-height:28px;color:#3D2E1C;white-space:pre;}
[data-scene="search"] .sr-caret{flex:none;width:1.2px;height:22px;margin:0;vertical-align:baseline;}
[data-scene="search"] .sr-ph{position:absolute;left:40px;top:0;height:58px;display:flex;align-items:center;font-size:19px;line-height:28px;color:#7D5D35;pointer-events:none;}
[data-scene="search"] .sr-pop.has .sr-ph{opacity:0;}

/* ---- the results ---- */
[data-scene="search"] .sr-list{position:absolute;left:14px;right:22px;top:59px;bottom:0;overflow:hidden;}
[data-scene="search"] .sr-g{padding:4px;}
[data-scene="search"] .sr-gh{padding:8px 8px 4px;font-size:12.8px;line-height:17px;font-weight:500;color:#7D5D35;}
[data-scene="search"] .sr-sep{display:block;height:1px;margin:4px -4px;background:rgba(61,46,28,.15);}

[data-scene="search"] .sr-r{display:flex;align-items:flex-start;gap:12px;padding:9px 8px;font-size:16.5px;line-height:22px;}
[data-scene="search"] .sr-ri{flex:none;width:32px;height:32px;display:flex;align-items:center;justify-content:center;color:rgba(61,46,28,.62);}
[data-scene="search"] .sr-ri img{display:block;width:32px;height:32px;border-radius:4px;object-fit:cover;}
[data-scene="search"] .sr-ri .ic{width:22px;height:22px;}
[data-scene="search"] .sr-rt{flex:1;min-width:0;}
/* one line per title (the app wraps; at this size a long alias would push the rows below out of view) */
[data-scene="search"] .sr-rn{font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
[data-scene="search"] .sr-ra{font-style:italic;font-weight:400;opacity:.5;}
[data-scene="search"] .sr-rs{margin-top:3px;font-size:12.8px;line-height:17px;color:rgba(61,46,28,.62);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
[data-scene="search"] .sr-rsn{margin-top:3px;font-size:12.8px;line-height:17.5px;color:rgba(61,46,28,.62);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
[data-scene="search"] .sr-rb{flex:none;padding:4px 9px;font-size:12.8px;line-height:17px;font-weight:500;color:#A77433;background:rgba(196,160,86,.18);border:1px solid rgba(167,116,51,.45);}
[data-scene="search"] .sr-r mark{background:rgba(196,160,86,.18);color:#A77433;padding:1px 3px;font-weight:600;}

/* suggestions (one letter typed): the first is pre-selected, as in the app */
[data-scene="search"] .sr-s{display:flex;align-items:center;gap:12px;padding:8px;font-size:16.5px;line-height:22px;font-weight:500;}
[data-scene="search"] .sr-s .ic{width:18px;height:18px;color:#7D5D35;}
[data-scene="search"] .sr-s.sel{background:#3D362E;color:#FEF9F0;}
[data-scene="search"] .sr-s.sel .ic{color:rgba(254,249,240,.8);}

/* ---- the list's thin scrollbar (only while the list overflows) ---- */
[data-scene="search"] .sr-sb{position:absolute;right:6px;top:64px;bottom:6px;width:10px;opacity:0;}
[data-scene="search"] .sr-pop.scrolls .sr-sb{opacity:1;}
[data-scene="search"] .sr-sb i{position:absolute;left:2px;width:0;height:0;border-left:3px solid transparent;border-right:3px solid transparent;}
[data-scene="search"] .sr-sb .up{top:0;border-bottom:4px solid #948D82;}
[data-scene="search"] .sr-sb .dn{bottom:0;border-top:4px solid #948D82;}
[data-scene="search"] .sr-sb b{position:absolute;left:2px;top:9px;width:6px;border-radius:3px;background:#948D82;}

/* ==================================================================== web */
/* Relationship Map row ("Living Web"): a drawn copy of Penpoint's Relationships page (Parchment, 1024x680).
   Numbers come from the app captures (app-ref2/web, app-ref2/switch) and RelationshipMap.tsx.
   The map itself is DOM + SVG here (the app draws it on a canvas); cards keep a fixed screen size. */

/* Inter is what the app's canvas draws card text in (bundled via @fontsource in global.css). Only 400/500/600 latin are used. */
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url(../images/living-rows/web-inter-400.woff2) format('woff2');}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url(../images/living-rows/web-inter-500.woff2) format('woff2');}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url(../images/living-rows/web-inter-600.woff2) format('woff2');}

[data-scene="web"] .wb-a{position:absolute;}
[data-scene="web"] .wb-ni{width:15.4px;height:15.4px;color:#29241E;}
[data-scene="web"] .wb-ni.wb-logo{color:#B8884A;}

/* ---- nav rail (collapsed, 60px) ---- */
[data-scene="web"] .wb-rail{left:0;top:0;width:60px;height:680px;background:#FFF7E6;border-right:1px solid #F1E7D8;}
[data-scene="web"] .wb-rule{left:16px;width:34px;height:1px;background:#29241E;opacity:.4;}
[data-scene="web"] .wb-act{left:0;width:59px;height:30.2px;background:#29241E;}
[data-scene="web"] .wb-actline{left:12px;width:42px;height:1px;background:#FEF9F0;}
[data-scene="web"] .wb-ni.wb-actic{color:#FEF9F0;}

/* No header bar (Joel 2026-10-17: not needed here); the filter toolbar and the map move up into its 60 px, and the map
   gets the extra height. */

/* ---- filter toolbar card ---- */
[data-scene="web"] .wb-tool{left:84px;top:24px;width:916px;height:83.2px;background:#FFF7E6;border:1px solid #F1E7D8;}
[data-scene="web"] .wb-tl{top:55.3px;font-size:14.4px;line-height:20.57px;color:#7D5D35;white-space:nowrap;}
[data-scene="web"] .wb-btn{top:48.7px;height:33.9px;display:flex;align-items:center;padding:0 12px;font-size:14.4px;line-height:16.56px;color:#3D2E1C;background:#FFF7E6;border:1px solid #EFE4D2;white-space:nowrap;}

/* ---- the map card ---- */
[data-scene="web"] .wb-mapcard{left:84px;top:123.2px;width:916px;height:521.3px;border:1px solid #F1E7D8;}
[data-scene="web"] .wb-map{left:84.7px;top:123.9px;width:914.67px;height:520px;overflow:hidden;background:#FFF7E6;}
[data-scene="web"] .wb-bub,[data-scene="web"] .wb-lk,[data-scene="web"] .wb-lks{position:absolute;left:0;top:0;width:914.67px;height:520px;overflow:visible;pointer-events:none;}
[data-scene="web"] .wb-bub{z-index:1;}
[data-scene="web"] .wb-lk{z-index:2;}
[data-scene="web"] .wb-lks{z-index:4;}
[data-scene="web"] .wb-lk path,[data-scene="web"] .wb-lks path{fill:none;stroke-linecap:butt;}
[data-scene="web"] .wb-lk path[d^="M0"],[data-scene="web"] .wb-lks path[d^="M0"]{stroke:none;}
[data-scene="web"] .wb-eg,[data-scene="web"] .wb-es{transition:opacity .45s ease;}
[data-scene="web"] .wb-es{opacity:0;}
[data-scene="web"] .wb-bub g{transition:opacity .6s ease;}
[data-scene="web"] .wb-lk{opacity:0;transition:opacity .6s ease;}
[data-scene="web"] .wb-lk.on{opacity:1;}
/* the layer that slides left (one CSS transition) when Holmes is picked; before that it is shifted to center the map */
[data-scene="web"] .wb-world{position:absolute;left:0;top:0;width:914.67px;height:520px;transform:translate(var(--wx,0),var(--wy,0));transition:transform 1.3s cubic-bezier(.65,0,.35,1);}
[data-scene="web"] .wb-world.sel{transform:none;}

/* a character card: name box (primary) + importance box (muted, 75% wide); the shadow is two flat rects, -4,+4 graph px */
[data-scene="web"] .wb-card{position:absolute;left:0;top:0;z-index:3;transform-origin:50% 50%;font-family:Inter,'Source Serif 4',sans-serif;font-variation-settings:normal;font-optical-sizing:auto;cursor:default;
  transition:opacity .4s ease,transform .55s cubic-bezier(.34,1.35,.64,1);
  --nb:#29241E;--nt:#FEF9F0;--at:rgba(254,249,240,.7);--sb:#EBDCC8;--st:#7D5D35;--sa:.2;}
/* before it appears: the pop-in grows it from 80% with a slight overshoot */
[data-scene="web"] .wb-card.pre{opacity:0;transform:scale(.8);}
[data-scene="web"] .wb-card.cn{z-index:6;}
[data-scene="web"] .wb-nm{position:absolute;left:0;top:0;width:100%;padding:12px;text-align:center;background:var(--nb);color:var(--nt);transition:background-color .4s ease,color .4s ease;
  box-shadow:calc(var(--sh) * -1) var(--sh) 0 0 rgba(0,0,0,var(--sa));}
[data-scene="web"] .wb-nm.na b{margin-top:-1.4px;margin-bottom:1.4px;}
[data-scene="web"] .wb-nm em{transition:color .4s ease;}
[data-scene="web"] .wb-sc{transition:background-color .4s ease,color .4s ease;}
[data-scene="web"] .wb-nm b{display:block;font-size:14px;line-height:16.8px;font-weight:600;white-space:nowrap;}
[data-scene="web"] .wb-nm b.two{white-space:normal;}
[data-scene="web"] .wb-nm em{display:block;margin-top:4px;font-size:11px;line-height:11px;font-style:italic;font-weight:400;white-space:nowrap;color:var(--at);}
[data-scene="web"] .wb-sc{position:absolute;left:12.5%;width:75%;height:22px;background:var(--sb);color:var(--st);text-align:center;font-size:10px;line-height:22px;font-weight:500;
  box-shadow:calc(var(--sh) * -1) var(--sh) 0 0 rgba(0,0,0,var(--sa));}

/* relationship label pills (only the selected character's links carry them) */
[data-scene="web"] .wb-pill{position:absolute;left:0;top:0;z-index:5;height:24px;padding:0 5px;border:1px solid #E6DCCD;background:#FFF7E6;
  font-family:Inter,sans-serif;font-size:12px;line-height:22px;font-weight:400;color:#3D2E1C;white-space:nowrap;display:none;opacity:0;transition:opacity .5s ease;will-change:transform;}

/* details panel (DOM overlay at the top-right of the canvas) */
[data-scene="web"] .wb-panel{position:absolute;right:16px;top:16px;width:384px;max-height:428px;overflow:hidden;z-index:10;background:#FDEACC;border:1px solid #EEE1CD;
  box-shadow:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -4px rgba(0,0,0,.1);transform:translateX(120%);opacity:0;
  transition:transform 1500ms cubic-bezier(.645,.045,.355,1),opacity 1500ms cubic-bezier(.645,.045,.355,1);}
[data-scene="web"] .wb-panel.on{transform:translateX(0);opacity:1;}
[data-scene="web"] .wb-ph{display:flex;align-items:center;justify-content:space-between;padding:16px;border-bottom:1px solid #EEE1CD;}
[data-scene="web"] .wb-ph h3{margin:0;font-size:22.4px;line-height:30.8px;font-weight:600;letter-spacing:-.56px;color:#3D2E1C;}
[data-scene="web"] .wb-ph p{margin:0;font-size:14.4px;line-height:16.56px;color:#7D5D35;}
[data-scene="web"] .wb-ph p.al{font-style:italic;padding-left:16px;}
[data-scene="web"] .wb-px{width:32px;height:32px;display:flex;align-items:center;justify-content:center;color:#3D2E1C;flex:none;}
[data-scene="web"] .wb-pb{padding:16px;}
[data-scene="web"] .wb-pb h4{margin:0 0 12px;font-size:19.2px;line-height:26.4px;font-weight:600;letter-spacing:-.48px;color:#3D2E1C;}
[data-scene="web"] .wb-row{display:flex;align-items:center;gap:8px;padding:8px;margin-top:6px;font-size:14.4px;line-height:16.56px;background:#F8E6CB;color:#29241E;transition:background-color .15s ease;}
[data-scene="web"] .wb-row:first-of-type{margin-top:0;}
[data-scene="web"] .wb-row .nm{font-weight:500;text-align:left;}
[data-scene="web"] .wb-row .nm i{display:block;font-size:11.2px;line-height:14.93px;font-style:italic;font-weight:400;color:#7D5D35;transition:color .15s ease;}
[data-scene="web"] .wb-row .ic{color:#29241E;transition:color .15s ease;}
[data-scene="web"] .wb-row .lb{font-size:11.2px;line-height:14.93px;color:#7D5D35;transition:color .15s ease;}
[data-scene="web"] .wb-row .nm{transition:color .15s ease;}
[data-scene="web"] .wb-row.hv{background:#29241E;}
[data-scene="web"] .wb-row.hv .nm,[data-scene="web"] .wb-row.hv .ic,[data-scene="web"] .wb-row.hv .lb{color:#FEF9F0;}
[data-scene="web"] .wb-row.hv .nm i{color:rgba(254,249,240,.7);}

/* orange Story Web: engine draws it; keep it above the panel */
[data-scene="web"] .lr-web{z-index:40;}

/* ==================================================================== import */
/* "Name Finder" (Import & Scan row): Manuscript Mode behind the real Manuscript Scanner dialog.
   Geometry measured from app-ref2/import (1024x680 captures): 00-manuscript-outline.png, 05/06 (menu + scanning),
   07 (results) and their *.styles.json dumps. The hero's .pa-* / .po-* chrome comes from css/living-page.css. */

/* ---------- page chrome adjustments for a 1024 window (outline 280 + scrollbar 10, page scrollbar 12, rail 34) ---------- */
[data-scene="import"] .pa-top{position:relative;}
[data-scene="import"] .im-tr{position:absolute;left:0;top:0;width:100%;height:100%;font-size:14.4px;}
[data-scene="import"] .im-tr > *{position:absolute;top:0;height:100%;display:flex;align-items:center;margin:0;}
[data-scene="import"] .im-tr .im-new{top:16.5px;height:13.5px;width:32px;justify-content:center;background:#8B4C2F;color:#FEF9F0;font-size:8.6px;font-weight:700;letter-spacing:.06em;line-height:13px;}
[data-scene="import"] .im-tr .pa-vr{top:14px;height:20px;}
[data-scene="import"] .im-tr .pa-saved{gap:10.5px;padding:0;min-width:0;}
[data-scene="import"] .im-tr .pa-clock{padding:0;}
[data-scene="import"] .pa-tb{padding-left:0;}
[data-scene="import"] .pa-tb .im-dv1{margin-left:9px;}
[data-scene="import"] .pa-tb .im-dv2{margin-left:7px;}
[data-scene="import"] .pa-tb .im-dv0{background:transparent;}

[data-scene="import"] .im-outline{width:290px;position:relative;overflow:hidden;}
[data-scene="import"] .im-outline .po-tree{width:280px;overflow:hidden;height:calc(100% - 36px);}
[data-scene="import"] .po-ch--on .cv,[data-scene="import"] .po-ch--on .ic{color:#FEF9F0;}
[data-scene="import"] .im-sbo,[data-scene="import"] .im-sbp{position:absolute;background:#FFF7E6;}
[data-scene="import"] .im-sbo{left:280px;top:36px;bottom:0;width:10px;}
[data-scene="import"] .im-sbp{right:0;top:0;bottom:32px;width:12px;z-index:4;}
[data-scene="import"] .po-head{padding-bottom:3px;}
[data-scene="import"] .po-head div{margin-top:-1px;}
[data-scene="import"] .po-tree{padding-top:3px;}
[data-scene="import"] .po-ch{min-height:28.57px;}
[data-scene="import"] .po-sc{height:28.57px;}
[data-scene="import"] .po-ch .sub{line-height:14.93px;}
[data-scene="import"] .po-in{margin-left:20px;}
[data-scene="import"] .po-ch .cv{width:14px;}
[data-scene="import"] .po-sc{margin-left:26px;}
[data-scene="import"] .po-fold .sp + .ic{margin-right:2px;}
[data-scene="import"] .pa-foot{padding-right:18px;}
[data-scene="import"] .im-sbo i,[data-scene="import"] .im-sbp i,[data-scene="import"] .im-sbr i,[data-scene="import"] .im-sbh i{position:absolute;display:block;}
[data-scene="import"] .im-sbo .th{left:2px;width:6px;top:12px;height:485px;background:#948D82;}
[data-scene="import"] .im-sbo .u,[data-scene="import"] .im-sbp .u{left:2px;top:3px;border-left:3px solid transparent;border-right:3px solid transparent;border-bottom:5px solid #948D82;}
[data-scene="import"] .im-sbo .d,[data-scene="import"] .im-sbp .d{left:2px;bottom:3px;border-left:3px solid transparent;border-right:3px solid transparent;border-top:5px solid #948D82;}
[data-scene="import"] .im-sbp .th{left:3px;width:6px;top:12px;height:82px;background:#948D82;}
[data-scene="import"] .im-sbp .d{bottom:2px;}

[data-scene="import"] .pa-canvas{position:relative;}
[data-scene="import"] .pa-tb{margin-right:12px;}
[data-scene="import"] .im-page{margin-right:12px;}
[data-scene="import"] .pa-flow{color:#7D5D35;}
[data-scene="import"] .pa-chh .s{color:#7D5D35;font-size:17.6px;line-height:28.8px;}
[data-scene="import"] .im-sq{text-decoration:underline wavy #D14B4B;text-decoration-thickness:1px;text-underline-offset:2px;}
[data-scene="import"] .im-chip{position:absolute;right:12px;top:8px;z-index:3;height:26px;display:flex;align-items:center;gap:7px;padding:0 10px 0 8px;background:#FDEACC;border:1px solid #F4E4CC;box-shadow:-7px 7px 0 0 rgba(0,0,0,.2);font-size:14.4px;color:#7D5D35;}
[data-scene="import"] .im-chip .ic:first-child{color:#3D2E1C;}

/* ---------- right-click menu on the book title (ChapterContextMenu.css) ---------- */
[data-scene="import"] .im-menu{position:absolute;left:74px;top:101px;z-index:12;width:max-content;padding:4px 0;background:#FFF7E6;border:1px solid #E6DCCD;box-shadow:-4px 4px 0 0 rgba(0,0,0,.1);opacity:0;pointer-events:none;transition:opacity .15s ease;}
[data-scene="import"] .im-menu.on{opacity:1;}
[data-scene="import"] .im-mi{display:flex;align-items:center;gap:8px;padding:6px 12px;font-size:14px;line-height:21px;color:#3D2E1C;transition:background-color .15s ease;}
[data-scene="import"] .im-mi.hov{background:#EBDCC8;}

/* ---------- the dialog (shadcn Dialog: bg-black/80 backdrop, square, 1px border) ---------- */
[data-scene="import"] .im-dim{position:absolute;inset:0;z-index:10;background:rgba(0,0,0,.8);opacity:0;pointer-events:none;transition:opacity .2s ease;}
[data-scene="import"] .im-dim.on{opacity:1;}
/* 425 wide, not the app's 768 (Joel 2026-10-17): the counts sit near the names instead of across a wide gap */
[data-scene="import"] .im-dlg{position:absolute;z-index:11;left:299.5px;width:425px;display:flex;flex-direction:column;padding:12px;background:#FFF7E6;border:1px solid #6D604E;color:#3D2E1C;overflow:hidden;opacity:0;pointer-events:none;transition:opacity .2s ease;}
[data-scene="import"] .im-dlg.on{opacity:1;}
[data-scene="import"] .im-dlg--scan{top:183.3px;height:313.3px;}
/* results: shorter than the app's (which nearly fills a 680 window) so it sits in the frame with room above and below */
[data-scene="import"] .im-dlg--res{top:46.8px;height:586.4px;}
[data-scene="import"] .im-dh{flex:none;height:37px;}
[data-scene="import"] .im-dh h2{margin:0;display:flex;align-items:center;gap:8px;font-size:22.4px;line-height:30.8px;font-weight:600;letter-spacing:-.56px;color:#3D2E1C;}
[data-scene="import"] .im-x{position:absolute;right:16px;top:16px;width:16px;height:16px;color:#3D2E1C;opacity:.7;}

/* scanning step */
[data-scene="import"] .im-scn{margin-top:8px;padding:48px 0;text-align:center;}
[data-scene="import"] .im-scn .ic.im-spin{display:block;width:48px;height:48px;margin:0 auto 16px;color:#29241E;}
[data-scene="import"] .im-dlg--scan.on .ic.im-spin{animation:imSpin 1s linear infinite;} /* spins only while the scanning step shows */
@keyframes imSpin{to{transform:rotate(360deg);}}
[data-scene="import"] .im-scn h3{margin:0 0 8px;font-size:19.2px;line-height:26.4px;font-weight:600;letter-spacing:-.48px;}
[data-scene="import"] .im-scn p{text-wrap:balance;margin:0 0 24px;font-size:14.4px;line-height:16.56px;color:#7D5D35;}
[data-scene="import"] .im-bar{width:300px;height:8px;margin:0 auto;background:#D4CDBE;border-radius:999px;overflow:hidden;}
[data-scene="import"] .im-bar i{display:block;width:0;height:100%;background:#29241E;border-radius:999px;}

/* results step */
[data-scene="import"] .im-sub{margin:8px 0 0;font-size:14.4px;line-height:16.56px;color:#7D5D35;}
[data-scene="import"] .im-sub strong{font-weight:700;color:#3D2E1C;}
[data-scene="import"] .im-body{flex:none;height:385px;margin-top:8px;overflow:hidden;position:relative;}
[data-scene="import"] .im-inner{width:390px;}
[data-scene="import"] .im-sec + .im-sec{margin-top:4px;}
[data-scene="import"] .im-sh{display:flex;align-items:center;justify-content:space-between;padding:8px 0;}
[data-scene="import"] .im-st{display:flex;align-items:center;gap:8px;color:#3D2E1C;}
[data-scene="import"] .im-st .im-si{color:#29241E;}
[data-scene="import"] .im-sti{font-size:19.2px;line-height:26.4px;font-weight:600;letter-spacing:-.48px;}
[data-scene="import"] .im-sl{font-size:11.2px;line-height:12.88px;letter-spacing:.28px;color:#29241E;}
[data-scene="import"] .im-list{display:flex;flex-direction:column;gap:2px;}
[data-scene="import"] .im-row{display:flex;align-items:center;gap:12px;padding:8px 12px;}
[data-scene="import"] .im-row > .ic{color:#7D5D35;}
[data-scene="import"] .im-cb{flex:none;width:16px;height:16px;display:flex;align-items:center;justify-content:center;border:1px solid #6E685F;box-shadow:0 1px 3px 0 rgba(0,0,0,.1),0 1px 2px -1px rgba(0,0,0,.1);color:#FEF9F0;}
[data-scene="import"] .im-cb.on{background:#29241E;border-color:#29241E;}
[data-scene="import"] .im-cb .ic{stroke-width:2.2;}
[data-scene="import"] .im-nmb{flex:1;min-width:0;}
[data-scene="import"] .im-n{display:block;font-size:14.4px;line-height:16.56px;color:#3D2E1C;}
[data-scene="import"] .im-aka{display:block;font-size:11.2px;line-height:12.88px;letter-spacing:.28px;color:#7D5D35;}
[data-scene="import"] .im-ct{flex:none;text-align:right;font-size:11.2px;line-height:12.88px;letter-spacing:.28px;color:#7D5D35;}
[data-scene="import"] .im-ib{flex:none;width:24px;height:24px;display:flex;align-items:center;justify-content:center;color:#7D5D35;}
[data-scene="import"] .im-note{margin:0;padding:0 12px 4px;font-size:14.4px;line-height:16.56px;color:#7D5D35;}
[data-scene="import"] .im-note b{font-weight:600;color:#3D2E1C;}
[data-scene="import"] .im-sel{position:relative;flex:none;width:107px;height:22px;padding:2px 32px 2px 6px;background:#EBDCC8;font-size:14.4px;line-height:16.56px;color:#3D2E1C;}
[data-scene="import"] .im-sel .ic{position:absolute;right:8px;top:5px;color:#7D5D35;}
[data-scene="import"] .im-nmb--in{display:flex;align-items:center;gap:4px;}
[data-scene="import"] .im-pen{color:rgba(125,93,53,.5);}
[data-scene="import"] .im-inp{flex:1;min-width:0;padding:2px 4px;font-size:14.4px;line-height:16.56px;border-bottom:1px dotted #E3D6C0;}
[data-scene="import"] .im-qa{display:flex;align-items:center;gap:8px;width:143px;padding:4px 12px;font-size:14.4px;line-height:16.56px;color:#29241E;}
[data-scene="import"] .im-ft{flex:none;margin-top:15.5px;padding-top:12px;border-top:1px solid #EADFCB;}
[data-scene="import"] .im-ft p{margin:0;font-size:14.4px;line-height:16.56px;color:#7D5D35;}
[data-scene="import"] .im-btns{display:flex;justify-content:flex-end;gap:8px;margin-top:12px;}
[data-scene="import"] .im-b{display:flex;align-items:center;height:40px;padding:10px 16px;font-size:16px;line-height:18.4px;background:#29241E;color:#FEF9F0;}
[data-scene="import"] .im-b--o{background:transparent;color:#3D2E1C;border:1px solid #F0E3CC;}

/* the found entries cascade down the list one after another (the app's cascade fade: opacity + rise, per-row delay set in import.js) */
[data-scene="import"] .im-cas .im-sh,[data-scene="import"] .im-cas .im-row{opacity:0;transform:translateY(10px);}
[data-scene="import"] .im-cas-go .im-sh,[data-scene="import"] .im-cas-go .im-row{opacity:1;transform:none;transition:opacity .45s cubic-bezier(.2,0,0,1),transform .45s cubic-bezier(.2,0,0,1);}

/* the app's (stock) vertical scrollbar as the captures show it (no horizontal one: Joel 2026-10-17) */
[data-scene="import"] .im-sbr{position:absolute;right:0;top:81.2px;width:5px;height:385px;}
[data-scene="import"] .im-sbr .th{right:0;width:5px;top:12px;height:89px;background:#948D82;}
[data-scene="import"] .im-sbr .u{right:0;top:3px;border-left:3px solid transparent;border-right:3px solid transparent;border-bottom:4px solid #948D82;}
[data-scene="import"] .im-sbr .d{right:0;bottom:3px;border-left:3px solid transparent;border-right:3px solid transparent;border-top:4px solid #948D82;}
/* ==================================================================== series */
/* "Shelf Grows" (Series row): the Book Library, Convert to Series, then the Series shelf filling up.
   Geometry from app-ref2/series (1024x680 captures) and global.css (.book-grid / .book-card / .book-card-ghost).
   The stage is 1700 wide so the app's >=1400px grid (repeat(auto-fit, minmax(280px, 350px)), gap 32, padding 64 96) gives 4 columns. */
[data-scene="series"] .se-off{display:none !important;}
[data-scene="series"] .se-wait{visibility:hidden;}
[data-scene="series"] .se-app{position:absolute;left:0;top:0;width:100%;height:100%;display:flex;flex-direction:column;background:#FFF7E6;}

/* ---------- Your Books header ---------- */
[data-scene="series"] .se-top{flex:none;height:72.7px;border-bottom:.67px solid #3D2E1C;padding:12px 24px;display:flex;align-items:center;justify-content:space-between;}
[data-scene="series"] .se-tl{display:flex;align-items:center;gap:12px;}
[data-scene="series"] .se-lib{width:28px;height:28px;color:#29241E;}
[data-scene="series"] h1,[data-scene="series"] h2,[data-scene="series"] h3,[data-scene="series"] p,[data-scene="series"] ul{margin:0;padding:0;}
[data-scene="series"] .se-tl h1{font-size:38.4px;line-height:48px;font-weight:600;letter-spacing:-1.92px;color:#3D2E1C;font-variation-settings:normal;font-optical-sizing:auto;}
[data-scene="series"] .se-tr{display:flex;align-items:center;gap:12px;}
[data-scene="series"] .se-sort{font-size:14.4px;line-height:20.6px;color:#7D5D35;margin-right:-4px;}
[data-scene="series"] .se-sel{width:133.3px;height:29.9px;border:.67px solid #3D2E1C;padding:4px 10px 4px 12px;font-size:14.4px;line-height:20.6px;display:flex;align-items:center;justify-content:space-between;color:#3D2E1C;}
[data-scene="series"] .se-sel .ic{color:#7D5D35;width:16px;height:16px;}
[data-scene="series"] .se-ib{width:36px;height:36px;display:flex;align-items:center;justify-content:center;color:#3D2E1C;position:relative;}
[data-scene="series"] .se-ib-h32{height:32px;}
[data-scene="series"] .se-bell{color:#29241E;}

/* ---------- the second bar on the series shelf ---------- */
[data-scene="series"] .se-bar{flex:none;border-bottom:.67px solid #3D2E1C;padding:12px 24px;display:flex;align-items:center;justify-content:space-between;gap:16px;
  animation:seFadeFast .4s cubic-bezier(.4,0,.2,1) both;}
@keyframes seFadeFast{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:none;}}
[data-scene="series"] .se-back{display:flex;align-items:center;gap:4px;padding:8px 12px;font-size:14.4px;line-height:16.56px;color:#3D2E1C;}
[data-scene="series"] .se-bar h2{flex:1;text-align:center;font-size:28.8px;line-height:36px;font-weight:600;letter-spacing:-.72px;color:#29241E;font-variation-settings:normal;font-optical-sizing:auto;}

/* ---------- the grid and the cards ---------- */
[data-scene="series"] .se-scroll{flex:1;position:relative;overflow:hidden;min-height:0;background:#FFF7E6;}
[data-scene="series"] .se-grid{position:relative;display:grid;gap:32px;padding:64px 96px;justify-content:center;grid-template-columns:repeat(auto-fit,minmax(280px,350px));}
/* the shelf: the final row's four slots from the start, so each Book lands in place */
[data-scene="series"] .se-grid4{grid-template-columns:repeat(4,350px);}
[data-scene="series"] .se-card{aspect-ratio:3/4;max-width:350px;min-height:340px;position:relative;overflow:hidden;
  box-shadow:0 0 0 0 rgba(0,0,0,.2),inset 0 1px 0 rgba(255,255,255,.1);
  transition:transform .3s cubic-bezier(.4,0,.2,1),box-shadow .4s cubic-bezier(.4,0,.2,1);}
/* the real hover pose (also pinned while the card's menu is open) */
[data-scene="series"] .se-card.hov{transform:scale(1.015) translateY(-4px);box-shadow:7px 7px 0 0 rgba(0,0,0,.25),inset 0 1px 0 rgba(255,255,255,.2);}
[data-scene="series"] .se-baked{background-size:100% 100%;background-repeat:no-repeat;}
[data-scene="series"] .se-img{position:absolute;inset:0;background-size:cover;background-position:center;}
[data-scene="series"] .se-shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.22) 0%,rgba(0,0,0,.08) 10%,transparent 30%),linear-gradient(rgba(0,0,0,.08) 0%,rgba(0,0,0,.15) 100%);}
[data-scene="series"] .se-cover::after{content:'';position:absolute;inset:0;pointer-events:none;z-index:2;
  background-image:linear-gradient(90deg,rgba(0,0,0,.6) 0%,rgba(0,0,0,.35) 3%,transparent 8%),
    linear-gradient(90deg,transparent 3%,rgba(0,0,0,.4) 4%,rgba(0,0,0,.2) 5.5%,transparent 8%),
    linear-gradient(135deg,rgba(255,255,255,.04) 0%,transparent 35%,rgba(0,0,0,.12) 100%),
    linear-gradient(270deg,rgba(255,255,255,.08) 0%,transparent 4%);}
[data-scene="series"] .se-kb{position:absolute;top:8px;right:8px;width:32px;height:32px;z-index:5;}
[data-scene="series"] .se-kbb{width:32px;height:32px;display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.7);transition:background-color .2s,color .2s;}
[data-scene="series"] .se-kbb.hov{background:rgba(255,255,255,.15);color:#fff;}
[data-scene="series"] .se-kbb .ic{width:16px;height:16px;}

[data-scene="series"] .se-fade{animation:seFade .6s cubic-bezier(.4,0,.2,1) both;}
@keyframes seFade{from{opacity:0;}to{opacity:1;}}

[data-scene="series"] .se-ghost{aspect-ratio:3/4;max-width:350px;min-height:340px;border:2px dashed #E6DCCD;background:linear-gradient(135deg,rgba(235,220,200,.1) 0%,transparent 100%);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;position:relative;font-size:14.4px;line-height:20.6px;color:#7D5D35;}
[data-scene="series"] .se-ghost .se-plus{width:32px;height:32px;margin-bottom:8px;color:#7D5D35;}

/* ---------- the card's menu, drawn 2.5x the app's size (abstracted so it reads on a small figure) ---------- */
[data-scene="series"] .se-lib-card{overflow:visible;z-index:3;} /* the big menu spills past the card */
[data-scene="series"] .se-menu{display:none;position:absolute;right:0;top:36px;min-width:240px;background:#FFF7E6;padding:4px;z-index:10;
  transform:scale(2.5);transform-origin:top right;border:.4px solid #E6DCCD;
  box-shadow:0 10px 15px -3px rgba(0,0,0,.18),0 4px 6px -4px rgba(0,0,0,.14);}
[data-scene="series"] .se-menu.on{display:block;}
[data-scene="series"] .se-mi{display:flex;align-items:center;gap:8px;padding:8px 12px;font-size:16px;line-height:24px;color:#3D2E1C;white-space:nowrap;text-align:left;}
[data-scene="series"] .se-mi .ic{width:16px;height:16px;flex:none;}
[data-scene="series"] .se-mi.hov{background:#3D362E;color:#FEF9F0;}
[data-scene="series"] .se-mi.se-del{color:#B91C1C;}
[data-scene="series"] .se-hr{height:1px;background:#E6DCCD;margin:4px 0;}

/* ---------- Convert to Series (a Radix dialog: no animation, it just is there) ---------- */
[data-scene="series"] .se-dim{display:none;position:absolute;inset:0;background:rgba(0,0,0,.8);z-index:27;}
[data-scene="series"] .se-dim.on{display:block;}
/* drawn 2.2x the app's size and trimmed to the name field (abstracted so it reads on a small figure) */
[data-scene="series"] .se-dlg{display:none;position:absolute;left:50%;top:50%;width:480px;transform:translate(-50%,-50%) scale(2.2);z-index:28;background:#FFF7E6;border:.67px solid #3D2E1C;padding:12px;
  box-shadow:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -4px rgba(0,0,0,.1);flex-direction:column;gap:8px;}
[data-scene="series"] .se-dlg.on{display:flex;}
[data-scene="series"] .se-dh{display:flex;flex-direction:column;gap:8px;}
[data-scene="series"] .se-dh h3{font-size:19.2px;line-height:26.4px;font-weight:600;letter-spacing:-.48px;color:#3D2E1C;margin:0 0 6px;font-variation-settings:normal;font-optical-sizing:auto;}
[data-scene="series"] .se-dh p{font-size:16px;line-height:18.4px;color:#7D5D35;}
[data-scene="series"] .se-form{padding:16px 0;display:flex;flex-direction:column;gap:16px;}
[data-scene="series"] .se-fg{display:flex;flex-direction:column;gap:4px;}
[data-scene="series"] .se-fl{display:flex;align-items:center;justify-content:space-between;}
[data-scene="series"] .se-fl label{font-size:14.4px;line-height:16.56px;color:#7D5D35;}
[data-scene="series"] .se-fl small{font-size:11.2px;line-height:14.9px;}
[data-scene="series"] .se-cn{font-size:11.2px;line-height:14.9px;color:#7D5D35;}
[data-scene="series"] .se-in{position:relative;height:44px;padding:0 12px;border:.67px solid #E6DCCD;background:#FFF7E6;display:flex;align-items:center;font-size:16px;line-height:18.4px;color:#3D2E1C;white-space:nowrap;transition:border-color .1s,box-shadow .1s;}
[data-scene="series"] .se-in.foc{border-color:#29241E;box-shadow:0 0 0 2px rgba(41,36,30,.2);}
[data-scene="series"] .se-in .lp-caret{height:18px;vertical-align:baseline;margin-right:-1px;}
[data-scene="series"] .se-ph{position:absolute;left:12px;color:#B8A892;}
[data-scene="series"] .se-df{display:flex;justify-content:flex-end;gap:12px;margin-top:-8px;} /* the footer sits inside the form, no grid gap above it */
[data-scene="series"] .se-bt{height:40px;padding:10px 16px;display:flex;align-items:center;justify-content:center;font-size:16px;line-height:18.4px;transition:opacity .15s;}
[data-scene="series"] .se-cancel{border:.67px solid #E6DCCD;color:#3D2E1C;margin-right:8px;}
[data-scene="series"] .se-go{min-width:140px;background:#29241E;color:#FEF9F0;}
[data-scene="series"] .se-go.dis{opacity:.5;}
[data-scene="series"] .se-dlg.busy .se-cancel{opacity:.5;}
[data-scene="series"] .se-dlg.busy .se-go{opacity:.5;}
[data-scene="series"] .se-x{position:absolute;right:16px;top:16px;width:16px;height:16px;opacity:.7;color:#3D2E1C;}


/* ---------- the orange Story Web thread under row 1 ---------- */
[data-scene="series"] .se-thr{position:absolute;z-index:6;height:6px;margin-top:-3px;background:#CD6E2C;border-radius:3px;pointer-events:none;
  transition:left .5s cubic-bezier(.4,0,.2,1),width .5s cubic-bezier(.4,0,.2,1);}
[data-scene="series"] .se-dot{position:absolute;z-index:7;width:18px;height:18px;margin:-9px 0 0 -9px;border-radius:50%;background:#CD6E2C;pointer-events:none;
  transition:left .5s cubic-bezier(.4,0,.2,1),opacity .3s ease,transform .3s ease;}
[data-scene="series"] .se-dot.pre{opacity:0;transform:scale(.3);}

/* ---------- the shared world under the shelf (Story Web abstraction): one trunk from the Books' thread down to a
   branch bar, which splits to what every Book shares ---------- */
[data-scene="series"] .se-br,[data-scene="series"] .se-trunk{position:absolute;z-index:5;width:6px;margin-left:-3px;background:#CD6E2C;border-radius:3px;pointer-events:none;
  transform:scaleY(0);transform-origin:top;transition:transform .3s cubic-bezier(.4,0,.2,1);}
[data-scene="series"] .se-bus{position:absolute;z-index:5;height:6px;margin-top:-3px;background:#CD6E2C;border-radius:3px;pointer-events:none;
  transform:scaleX(0);transform-origin:center;transition:transform .4s cubic-bezier(.4,0,.2,1);}
[data-scene="series"] .se-br.on,[data-scene="series"] .se-trunk.on,[data-scene="series"] .se-bus.on{transform:none;}
[data-scene="series"] .se-chip{position:absolute;z-index:6;width:250px;height:128px;margin-left:-125px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;
  background:#FEF9F0;border:1.5px solid #E6DCCD;box-shadow:7px 7px 0 0 rgba(0,0,0,.08);
  opacity:0;transform:translateY(14px);transition:opacity .45s cubic-bezier(.2,0,0,1),transform .45s cubic-bezier(.2,0,0,1);}
[data-scene="series"] .se-chip.on{opacity:1;transform:none;}
[data-scene="series"] .se-chip .ic{width:46px;height:46px;stroke-width:1.8;color:#29241E;}
[data-scene="series"] .se-chip .ic.rot{transform:rotate(45deg);}
[data-scene="series"] .se-chip span{font-size:34px;line-height:40px;font-weight:600;letter-spacing:-.5px;color:#3D2E1C;white-space:nowrap;}
[data-scene="series"] .se-shared{position:absolute;left:0;right:0;z-index:6;text-align:center;font-family:'IBM Plex Mono',ui-monospace,Consolas,monospace;font-size:30px;line-height:36px;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;color:#CD6E2C;opacity:0;transition:opacity .6s ease;}
[data-scene="series"] .se-shared.on{opacity:1;}
/* the pointer, drawn 1.66x so it reads the same size on screen as in the 1024-wide scenes */
[data-scene="series"] .lr-ptr{width:33px;height:40px;}
[data-scene="series"] .lr-ptr svg{left:-3.3px;top:-2.5px;width:33px;height:40px;transform-origin:3.3px 3.3px;}
[data-scene="series"] .lr-ptr i{left:-23px;top:-23px;width:46px;height:46px;border-width:3px;}
/* ring heavy = the Living Web's 4.4 at 1024, scaled 1.66x */
[data-scene="series"] .lr-web path.heavy{stroke-width:7.2;}

/* ==================================================================== backups */
/* Living Rows scene "backups". Selectors here are written bare; work/backups/prefix.cjs writes
   scenes/backups.css with every selector scoped to [data-scene="backups"]. Prefix: bk-.
   The Manuscript screen reuses the hero's .pa-* / .po-* classes (css/living-page.css). */

/* ---- the two screens ---- */
[data-scene="backups"] .bk-ms,
[data-scene="backups"] .bk-st{position:absolute;left:0;top:0;width:1024px;height:680px;background:#FFF7E6;overflow:hidden;}
[data-scene="backups"] .bk-ms{display:flex;flex-direction:column;opacity:1;visibility:visible;transition:opacity .5s ease,visibility 0s;}
[data-scene="backups"] .bk-st{opacity:0;visibility:hidden;transition:opacity .5s ease,visibility 0s .5s;}
/* state classes live on the screens themselves (the engine rebuilds them from the markup on every play) */
[data-scene="backups"] .bk-ms.bk-out{opacity:0;visibility:hidden;transition:opacity .5s ease,visibility 0s .5s;}
[data-scene="backups"] .bk-st.bk-in{opacity:1;visibility:visible;transition:opacity .5s ease,visibility 0s;}

/* ---- Manuscript Mode at 1024 wide (the app's outline is wider here than in the 1280 hero) ---- */
[data-scene="backups"] .pa-outline{position:relative;width:290px;}
[data-scene="backups"] .bk-ms .pa-handle--l::after{margin-left:auto;}
/* toolbar spacing as measured on the 1024 capture (the 1280 hero is a little looser) */
[data-scene="backups"] .pa-tb{padding-left:6px;}
[data-scene="backups"] .pa-tb .zoom{padding:0 11px 0 0;}
[data-scene="backups"] .pa-tbr{padding-right:22px;}
[data-scene="backups"] .bk-sb{position:absolute;right:0;top:0;bottom:0;width:8px;pointer-events:none;}
[data-scene="backups"] .bk-sb i{position:absolute;right:1px;width:6px;border-radius:3px;background:#968D80;}
[data-scene="backups"] .bk-sb::before,
[data-scene="backups"] .bk-sb::after{content:"";position:absolute;right:1px;border-left:3px solid transparent;border-right:3px solid transparent;}
[data-scene="backups"] .bk-sb::before{top:3px;border-bottom:4px solid #968D80;}
[data-scene="backups"] .bk-sb::after{bottom:3px;border-top:4px solid #968D80;}
[data-scene="backups"] .bk-sb--o{right:1px;}
[data-scene="backups"] .bk-sb--p{right:1px;}
[data-scene="backups"] .bk-sb--s{right:0;top:0;width:12px;}
[data-scene="backups"] .bk-sb--s i{right:2px;transition:transform 1.1s cubic-bezier(.4,0,.2,1);}

/* ---- the Saved chip (SaveIndicatorDropdown): 20px glyph slot + a word slot sized by an invisible "Saving..." ---- */
[data-scene="backups"] .bk-chip{display:flex;align-items:center;gap:8px;height:32px;padding:0 4px 0 12px;font-size:14.4px;font-weight:500;line-height:16.56px;color:#3D2E1C;}
[data-scene="backups"] .bk-chip-i{width:20px;height:16px;flex:none;display:inline-flex;align-items:center;justify-content:center;}
[data-scene="backups"] .bk-chip-i.in{animation:bkIcIn .2s ease-out;}
[data-scene="backups"] .bk-chip-w{display:inline-grid;text-align:left;}
[data-scene="backups"] .bk-chip-s{grid-area:1/1;visibility:hidden;}
[data-scene="backups"] .bk-chip-t{grid-area:1/1;white-space:nowrap;}
@keyframes bkIcIn{from{opacity:0;}to{opacity:1;}}

/* ---- the orange Wi-Fi mark (a drawn-over abstraction) ---- */
[data-scene="backups"] .lp-web path.bk-wf{stroke-width:4.4;}
[data-scene="backups"] .lp-web path.bk-wf-strike{stroke-width:4.4;}
[data-scene="backups"] .lp-web .bk-tag text{font-family:'IBM Plex Mono',ui-monospace,Consolas,monospace;font-size:13px;font-weight:600;letter-spacing:.1em;fill:#CD6E2C;stroke:none;}
[data-scene="backups"] .lp-web .bk-copy{filter:drop-shadow(0 2px 2px rgba(61,46,28,.25));}
[data-scene="backups"] .lp-web .bk-copy rect,
[data-scene="backups"] .lp-web .bk-copy path{transition:none;}

/* ---- Settings > Storage & Backups ---- */
[data-scene="backups"] .bk-rail{position:absolute;left:0;top:0;bottom:0;width:60px;background:#FFF7E6;border-right:1px solid #E6DCCD;}
[data-scene="backups"] .bk-rb{position:absolute;left:0;width:59px;height:30px;display:flex;align-items:center;justify-content:center;color:#29241E;}
[data-scene="backups"] .bk-rb .ic{width:15.4px;height:15.4px;}
[data-scene="backups"] .bk-rb--logo{color:#B8884A;}
[data-scene="backups"] .bk-rb--on{background:#29241E;color:#FEF9F0;}
[data-scene="backups"] .bk-rb--on i{position:absolute;left:12px;right:12px;bottom:4px;height:2px;background:#FEF9F0;}
[data-scene="backups"] .bk-hr{position:absolute;left:16px;width:28px;height:1px;background:rgba(41,36,30,.4);}

[data-scene="backups"] .bk-sh{position:absolute;left:60px;top:0;right:0;height:60px;border-bottom:1px solid #E6DCCD;background:#FFF7E6;}
[data-scene="backups"] .bk-sh-b{position:absolute;top:14px;width:32px;height:32px;display:flex;align-items:center;justify-content:center;color:#29241E;}
[data-scene="backups"] .bk-sh-b--w{width:36px;}
[data-scene="backups"] .bk-sh-b--dim{color:#7D5D35;opacity:.5;}
[data-scene="backups"] .bk-sh-vr{position:absolute;top:18px;width:1px;height:24px;background:#E6DCCD;}
[data-scene="backups"] .bk-sh-clock{position:absolute;right:36px;top:14px;height:32px;display:flex;align-items:center;gap:8px;font-size:14.4px;font-weight:500;color:#3D2E1C;}

[data-scene="backups"] .bk-sp{position:absolute;left:60px;top:60px;right:0;bottom:0;overflow:hidden;background:#FFF7E6;}
[data-scene="backups"] .bk-sc{position:absolute;left:48px;top:93px;width:858px;transition:transform 1.1s cubic-bezier(.4,0,.2,1);}
[data-scene="backups"] .bk-sticky{position:absolute;left:0;top:0;right:12px;height:80px;background:#FFF7E6;border-bottom:1px solid rgba(230,220,205,.45);}
[data-scene="backups"] .bk-back{position:absolute;left:48px;top:20px;width:40px;height:40px;display:flex;align-items:center;justify-content:center;color:#29241E;}
[data-scene="backups"] .bk-back .ic{width:24px;height:24px;}
[data-scene="backups"] .bk-sticky h1{position:absolute;left:104px;top:8px;margin:0;font-family:inherit;font-size:28.8px;line-height:36px;font-weight:600;letter-spacing:-.72px;color:#3D2E1C;white-space:nowrap;}
[data-scene="backups"] .bk-sticky p{position:absolute;left:104px;top:45.6px;margin:0;font-size:16px;line-height:18.4px;color:#7D5D35;white-space:nowrap;}

/* cascade fade-in (the app's cards cascade in when the page opens) */
[data-scene="backups"] [data-fade]{transition:opacity .4s cubic-bezier(.2,0,0,1),transform .4s cubic-bezier(.2,0,0,1);}
[data-scene="backups"] .bk-hide{opacity:0;transform:translateY(8px);}

[data-scene="backups"] .bk-banner{display:flex;align-items:center;gap:16px;padding:16px;margin-bottom:24px;border:1px solid rgba(41,36,30,.4);background:rgba(41,36,30,.05);}
[data-scene="backups"] .bk-banner-l{display:flex;align-items:flex-start;gap:12px;flex:1;min-width:0;}
[data-scene="backups"] .bk-banner-t{width:40px;height:40px;flex:none;display:flex;align-items:center;justify-content:center;background:rgba(41,36,30,.1);border:1px solid rgba(41,36,30,.3);color:#29241E;}
[data-scene="backups"] .bk-banner-t .ic{width:20px;height:20px;stroke-width:1.75;}
[data-scene="backups"] .bk-banner h4{margin:0;font-size:14.4px;line-height:16.56px;font-weight:500;color:#3D2E1C;}
[data-scene="backups"] .bk-banner p{margin:0;font-size:14.4px;line-height:16.56px;color:#7D5D35;}

[data-scene="backups"] .bk-grid{display:grid;grid-template-columns:417px 417px;gap:24px;align-items:start;}
[data-scene="backups"] .bk-card{background:#FFF7E6;border:1px solid #E6DCCD;}
[data-scene="backups"] .bk-ch{padding:24px;}
[data-scene="backups"] .bk-ct{display:flex;align-items:center;gap:8px;margin-bottom:8px;font-size:16px;line-height:18.4px;color:#3D2E1C;}
[data-scene="backups"] .bk-i20{width:20px;height:20px;}
[data-scene="backups"] .bk-cd{font-size:14.4px;line-height:16.56px;color:#7D5D35;}
[data-scene="backups"] .bk-cc{padding:0 24px 24px;display:flex;flex-direction:column;gap:24px;}
[data-scene="backups"] .bk-cc--sec{gap:16px;}
[data-scene="backups"] .bk-pn{padding:16px;border:1px solid rgba(230,220,205,.5);}
[data-scene="backups"] .bk-pn--row{display:flex;align-items:center;gap:16px;background:rgba(235,220,200,.5);}
[data-scene="backups"] .bk-pn--soft{background:rgba(235,220,200,.3);}
[data-scene="backups"] .bk-pn--stats{background:rgba(235,220,200,.5);}
[data-scene="backups"] .bk-pt{flex:1;min-width:0;}
[data-scene="backups"] .bk-pt h4{margin:0 0 4px;font-size:14.4px;line-height:16.56px;font-weight:400;color:#3D2E1C;}
[data-scene="backups"] .bk-pt p{margin:0;font-size:14.4px;line-height:16.56px;color:#7D5D35;}

[data-scene="backups"] .bk-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;flex:none;white-space:nowrap;padding:10px 16px;font-size:16px;line-height:18.4px;font-weight:400;}
[data-scene="backups"] .bk-btn--sm{padding:8px 12px;font-size:14.4px;line-height:16.56px;}
[data-scene="backups"] .bk-btn--dark{background:#29241E;color:#FEF9F0;}
[data-scene="backups"] .bk-btn--out{border:1px solid #E6DCCD;color:#3D2E1C;background:transparent;}
[data-scene="backups"] .bk-btn--full{width:100%;}
[data-scene="backups"] .bk-w24{width:96px;}

[data-scene="backups"] .bk-gr{display:grid;grid-template-columns:auto auto auto;column-gap:8px;row-gap:12px;align-items:center;justify-content:start;}
[data-scene="backups"] .bk-lb{font-size:14.4px;line-height:16.56px;color:#7D5D35;}
[data-scene="backups"] .bk-num{position:relative;display:block;width:64px;height:29.9px;padding:6px 24px 6px 8px;border:1px solid #E6DCCD;background:#FFF7E6;font-size:14.4px;line-height:16.56px;color:#3D2E1C;}
[data-scene="backups"] .bk-num i{position:absolute;right:3px;top:0;width:14px;display:flex;flex-direction:column;color:#7D5D35;}
[data-scene="backups"] .bk-num i .ic{width:14px;height:14px;stroke-width:1.6;}
[data-scene="backups"] .bk-note{margin:8px 0 0;font-size:14.4px;line-height:16.56px;font-style:italic;color:#7D5D35;}

[data-scene="backups"] .bk-sl{margin-bottom:16px;text-align:center;font-size:14.4px;line-height:16.56px;color:#7D5D35;}
[data-scene="backups"] .bk-sl b,
[data-scene="backups"] .bk-all b{font-weight:500;color:#3D2E1C;}
[data-scene="backups"] .bk-g3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;text-align:center;}
[data-scene="backups"] .bk-sv{font-size:16px;line-height:18.4px;color:#3D2E1C;}
[data-scene="backups"] .bk-sk{font-size:14.4px;line-height:16.56px;color:#7D5D35;}
[data-scene="backups"] .bk-all{margin-top:12px;padding-top:12px;border-top:1px solid rgba(230,220,205,.5);text-align:center;font-size:14.4px;line-height:16.56px;color:#7D5D35;}
[data-scene="backups"] .bk-all--sec{margin-top:0;padding-top:4px;border-top:0;}

[data-scene="backups"] .bk-loc{display:flex;flex-direction:column;gap:8px;}
[data-scene="backups"] .bk-path{padding:8px 12px;background:rgba(235,220,200,.5);font-size:16px;line-height:18.4px;color:#3D2E1C;word-break:break-all;}
[data-scene="backups"] .bk-flash b,
[data-scene="backups"] .bk-flash span{background:rgba(205,110,44,.25);animation:bkFlash 1.8s ease-out forwards;}
@keyframes bkFlash{0%{background-color:rgba(205,110,44,.28);}100%{background-color:rgba(205,110,44,0);}}