/* Docnest shelf, drawn from the app's SwiftUI views (Shelf/ShelfEdgeHandle, ShelfTimelineList, ShelfTimelineRow, ShelfSelection,
   CompactCaptureView, ShelfDocumentPage, DocumentInlineChangesView, ReviewSummaryCardBody) in the light and the dark
   appearance: every color is light-dark(light, dark) and follows the page's color-scheme (site.css, the header switch).
   Light values are DocnestStyle's light inks (chroma × inkTint 0.6). Sizes are macOS points. The film and the shelf to
   try share these rules; only placement differs. */
.dn{--bg:light-dark(#f7f8fb,#171b23);--surface:light-dark(#fbfcfe,#20252f);--raised:light-dark(#eff1f4,#2b323e);
  --accent:light-dark(#295dce,#9dbfff);--brand:#3670e7;--text:light-dark(#212934,#f3f5f8);--sec:light-dark(#636d7b,#bcc5d2);
  --border:light-dark(#dce0e6,#414b5b);--sel:light-dark(#eaeff6,#2f3745);--primary:light-dark(#285ecc,#a2c1ff);
  --ptext:light-dark(#fbfcfe,#14213b);--orange:light-dark(#ff9500,#ff9f0a);
  --glass:light-dark(rgba(247,248,251,.97),rgba(27,31,40,.95));--edge:light-dark(rgba(33,41,52,.12),rgba(255,255,255,.13));
  /* shared by the shelf, the library and the conversations: rules inside a panel, quiet hovers, panel shadows, the macOS
     menu, document text and the change colors */
  --hair:light-dark(rgba(33,41,52,.1),rgba(65,75,91,.55));--hover:light-dark(rgba(33,41,52,.06),rgba(255,255,255,.08));
  --lift:0 30px 80px light-dark(rgba(23,27,35,.16),rgba(0,0,0,.5)),0 8px 24px light-dark(rgba(23,27,35,.08),rgba(0,0,0,.3));
  --menu:light-dark(rgba(245,247,250,.97),rgba(37,38,42,.97));--menu-text:light-dark(#212934,#f3f5f8);
  --menu-edge:0 0 0 .5px light-dark(rgba(33,41,52,.14),rgba(255,255,255,.16)) inset,0 16px 40px light-dark(rgba(23,27,35,.2),rgba(0,0,0,.45));
  --menu-rule:light-dark(rgba(33,41,52,.1),rgba(255,255,255,.12));--talk:light-dark(#7c5cff,#a48cff);
  --body:light-dark(#303640,#e2e6ec);--add:light-dark(#1f883d,#4fc26b);--del:light-dark(#cf222e,#ff7b72);
  --strike:light-dark(rgba(207,34,46,.6),rgba(255,123,114,.7));--plus:light-dark(#299e57,#2fb362);--minus:light-dark(#d94538,#e5584b);
  --quiet:light-dark(rgba(99,109,123,.08),rgba(188,197,210,.08));--accent-soft:light-dark(rgba(41,93,206,.1),rgba(157,191,255,.13));
  --pill:linear-gradient(light-dark(#3a6fd8,#c0d5ff),light-dark(#285ecc,#a2c1ff));
  --window:0 0 0 .5px light-dark(rgba(23,27,35,.22),rgba(0,0,0,.8)),inset 0 .5px 0 light-dark(rgba(255,255,255,.6),rgba(255,255,255,.12)),
    0 30px 80px light-dark(rgba(23,27,35,.2),rgba(4,7,12,.6)),0 10px 26px light-dark(rgba(23,27,35,.1),rgba(4,7,12,.35));
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Helvetica Neue","Segoe UI",Roboto,Arial,sans-serif;color:var(--text);
  -webkit-font-smoothing:antialiased;line-height:1.3;text-align:left}
.dn *{box-sizing:border-box}
:where(.dn) button{all:unset;box-sizing:border-box;cursor:pointer}
.dn button:focus-visible{outline:2px solid var(--accent);outline-offset:1px;border-radius:8px}
.ic{display:block;flex:none}

/* collapsed: a 4×40 line at the screen edge, dim until something waits; then a blue core with a soft glow */
.dn-line{position:absolute;width:4px;height:40px;border-radius:2px;background:rgba(158,158,158,.5)}
.dn-line>i{position:absolute;inset:0;border-radius:2px;opacity:0;background:linear-gradient(#2a6bff,#4c82ff,#2a6bff);
  box-shadow:0 0 4px rgba(42,107,255,.95),0 0 12px rgba(42,107,255,.6),0 0 18px rgba(42,107,255,.35)}
.dn-line>i::after{content:"";position:absolute;left:1.1px;top:1.5px;width:1.75px;height:37px;border-radius:1px;background:linear-gradient(#6f9bff,#f4f6fb,#6f9bff);opacity:.85}
.dn-line.on>i{opacity:1}
.dn-talk{position:absolute;width:4px;height:9px;border-radius:2px;background:var(--talk);box-shadow:0 0 5px rgba(164,140,255,.6);opacity:0}
.dn-capdot{position:absolute;left:19px;bottom:5px;width:6px;height:6px;border-radius:50%;background:var(--talk);opacity:0}
.dn-glow{position:absolute;width:80px;height:120px;border-radius:50%;background:radial-gradient(closest-side,rgba(42,107,255,.6),rgba(42,107,255,0));opacity:0;pointer-events:none}

/* pointer on the line: a 44×92 capsule with up to two AI icons over the count, and the dwell ring */
.dn-capsule{position:absolute;width:44px;height:92px;border-radius:22px;background:var(--glass);box-shadow:inset 0 0 0 1px var(--edge),0 3px 18px light-dark(rgba(23,27,35,.18),rgba(0,0,0,.45));
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;transform-origin:100% 50%}
.dn-capsule>b{font:700 18px/1 ui-rounded,"SF Pro Rounded",-apple-system,BlinkMacSystemFont,sans-serif;font-variant-numeric:tabular-nums}
.dn-cap-icons{display:flex;flex-direction:column;align-items:center}
.dn-cap-icons>span{display:grid;place-items:center;width:24px;height:24px;border-radius:7.6px;background:var(--surface)}
.dn-cap-icons>span+span{margin-top:-6px}
.dn-cap-icons>span:first-child{position:relative;z-index:1}
.dn-cap-icons svg{display:block}
.dn-capsule.zero>b{color:var(--sec)}
.dn-ring{position:absolute;left:-3px;top:-3px;width:50px;height:98px;overflow:visible;pointer-events:none}
.dn-ring path{fill:none;stroke:var(--brand);stroke-width:2.5;stroke-dasharray:0 2;stroke-linecap:round}

/* agent icon with a file-type badge at the bottom right (DocumentAgentBadgeIcon: badge max(11, 55%), plate radius 26%) */
.dn-agent{position:relative;display:block;flex:none;width:var(--s);height:var(--s)}
.dn-agent>svg{display:block}
.dn-agent>img{display:block;border-radius:5.2px}
.dn-badge{position:absolute;right:-2.42px;bottom:-2.42px;width:11px;height:11px;border-radius:2.86px;background:var(--bg);box-shadow:0 0 0 1px var(--surface);display:grid;place-items:center}
.dn-badge>svg{width:8.8px;height:8.8px}

/* arrival pill 270×44 */
.dn-pill{position:absolute;width:270px;height:44px;border-radius:22px;overflow:hidden}
.dn-pill-bg{position:absolute;inset:0;border-radius:22px;background:var(--bg);box-shadow:inset 0 0 0 .5px var(--edge)}
.dn-count{position:absolute;left:22px;right:22px;bottom:3px;height:3px;border-radius:2px;background:light-dark(rgba(41,93,206,.6),rgba(157,191,255,.75));transform-origin:0 50%}
.dn-pill-row{position:absolute;inset:0;display:flex;align-items:center;gap:8px;padding:0 14px;opacity:0}
.dn-pill-row b{font-size:12px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dn-pill-row em{font-style:normal;font-size:12px;font-weight:600;color:var(--accent);white-space:nowrap}
.dn-pill-row small{margin-left:auto;font-size:11px;color:var(--sec);font-variant-numeric:tabular-nums;white-space:nowrap}
.dn-pill-row .dn-agent{transform-origin:50% 50%}

/* small buttons (DocnestButtonStyle .small): secondary, primary and quiet */
.dn-btn{display:inline-flex;align-items:center;gap:5px;height:26px;padding:0 11px;border-radius:10px;background:var(--raised);color:var(--text);font-size:12px;font-weight:500;white-space:nowrap}
.dn-btn svg{display:block}
.dn-btn.primary,.dn-btn.on{background:var(--primary);color:var(--ptext);font-weight:600}
.dn-qbtn{display:inline-flex;align-items:center;gap:5px;height:26px;padding:0 10px;border-radius:10px;color:var(--text);font-size:12px;font-weight:500;white-space:nowrap}
.dn .dn-qbtn:hover{background:var(--raised)}

/* expanded: a 400×640 glass panel */
.dn-panel{position:absolute;width:400px;height:640px}
.dn-shell{position:absolute;inset:0;border-radius:22px;background:var(--glass);box-shadow:inset 0 0 0 .5px var(--edge),var(--lift)}
.dn-content{position:absolute;inset:0;display:flex;flex-direction:column;border-radius:22px;overflow:hidden}
.dn-head{flex:none;display:flex;align-items:center;gap:5px;padding:18px 7px 10px 12px}
.dn-seg{flex:none;display:inline-flex;gap:1px;padding:3px;border-radius:11px;background:light-dark(#e5e8ee,#252a33)}
.dn-seg-b{display:inline-flex;align-items:center;padding:4px 6px;border-radius:8px;font-size:12px;font-weight:700;letter-spacing:-.01em;color:var(--sec);white-space:nowrap}
.dn-seg-b.documents.on{background:light-dark(#fbfcfe,#3e4451);color:var(--text);box-shadow:0 .5px 1.5px rgba(0,0,0,.08),inset 0 0 0 .5px light-dark(var(--border),transparent)}
.dn-seg-b.conversations.on{background:light-dark(#ece6ff,#3a2f6b);color:light-dark(#4a32b8,#ece5ff);box-shadow:inset 0 0 0 1px light-dark(#dcd4fb,#3b3270)}
.dn-seg-dot{width:6px;height:6px;margin-left:4px;border-radius:50%;background:var(--talk)}
.dn-title{margin:0;font:600 20px/1.2 "Avenir Next",Avenir,-apple-system,BlinkMacSystemFont,sans-serif;letter-spacing:-.01em;white-space:nowrap}
.dn-chip{flex:none;display:inline-flex;align-items:center;gap:3px;padding:4px 7px;border-radius:999px;background:light-dark(rgba(41,93,206,.1),rgba(157,191,255,.12));color:var(--accent);font-size:11px;font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
.dn-chip svg{width:8px;height:8px}
.dn-sp{flex:1}
.dn-tools{margin-left:auto;flex:none;display:flex;gap:1px;padding:3px;border-radius:999px;background:light-dark(rgba(33,41,52,.035),rgba(255,255,255,.045));box-shadow:inset 0 0 0 .5px light-dark(rgba(33,41,52,.1),rgba(255,255,255,.1))}
.dn-tool{width:23px;height:28px;display:grid;place-items:center;border-radius:999px;color:var(--text)}
.dn .dn-tool:hover,.dn .dn-tool[aria-expanded="true"]{background:var(--hover)}
/* a new AI tool: one line under the header (CaptureSuggestionView) */
.dn-suggest{flex:none;display:flex;align-items:center;gap:8px;margin:0 14px 4px;padding:6px 0;font-size:12px;line-height:1.35;color:var(--text)}
.dn-suggest>.ic{color:var(--sec)}
.dn-suggest-t{flex:1;min-width:0;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.dn-suggest .dn-btn{background:var(--hover)}
/* the list fades out under the header and above the bottom (DocnestScrollEdgeFade: 20 pt, smoothstep, content inset 20) */
.dn-list{position:relative;flex:1;overflow:hidden auto;padding:20px 8px 52px;scrollbar-width:none;
  -webkit-mask-image:linear-gradient(transparent,rgba(0,0,0,.16) 5px,rgba(0,0,0,.5) 10px,rgba(0,0,0,.84) 15px,#000 20px,#000 calc(100% - 20px),rgba(0,0,0,.84) calc(100% - 15px),rgba(0,0,0,.5) calc(100% - 10px),rgba(0,0,0,.16) calc(100% - 5px),transparent);
  mask-image:linear-gradient(transparent,rgba(0,0,0,.16) 5px,rgba(0,0,0,.5) 10px,rgba(0,0,0,.84) 15px,#000 20px,#000 calc(100% - 20px),rgba(0,0,0,.84) calc(100% - 15px),rgba(0,0,0,.5) calc(100% - 10px),rgba(0,0,0,.16) calc(100% - 5px),transparent)}
.dn-list::-webkit-scrollbar{display:none}
.dn-sec{position:relative;display:flex;align-items:center;justify-content:space-between;height:26px;padding:10px 10px 2px;font-size:10px;font-weight:700;color:var(--sec);letter-spacing:.01em}
.dn-sec:first-child{height:18px;padding-top:2px}
.dn-sec .dn-all{font-size:10px;font-weight:600;color:var(--accent);opacity:0;padding:0 2px}
.dn-sec:hover .dn-all,.dn-sec:focus-within .dn-all{opacity:1}
.dn-row{position:relative;height:34px;margin-bottom:2px;border-radius:10px;overflow:hidden}
/* swipe underlay: brand blue with ★ Save to the right, graphite with Skip (안 봐도 됨) to the left */
.dn-reveal{position:absolute;inset:0;border-radius:10px;opacity:0}
.dn-reveal.star{background:var(--brand)}
.dn-reveal.ignore{background:light-dark(#6e737d,#4e5461)}   /* ShelfTimelineRow.graphite */
.dn-reveal-label{position:absolute;top:0;bottom:0;display:flex;align-items:center;gap:5px;font-size:11px;font-weight:600;color:#fff;opacity:0}
.dn-reveal-label.star{left:14px;transform-origin:0 50%}
.dn-reveal-label.ignore{right:14px;transform-origin:100% 50%}
.dn-row-in{position:relative;height:34px;display:flex;align-items:center;border-radius:10px}
.dn-row-fill{position:absolute;inset:0;border-radius:10px;background:light-dark(rgba(33,41,52,.05),rgba(32,37,47,.85));opacity:0}
.dn-row.hover .dn-row-fill{opacity:1}
.dn-row.dragging .dn-row-fill{opacity:1;background:var(--surface);box-shadow:0 1.5px 5px light-dark(rgba(0,0,0,.16),rgba(0,0,0,.4))}
.dn-row.dragging .dn-acts{opacity:0!important}
.dn-row.dragging .dn-time,.dn-row.dragging .dn-slot>*{opacity:1!important}
.dn-row.hl .dn-row-fill{opacity:1;background:var(--sel)}
.dn-row.sel .dn-row-fill{opacity:1;background:rgba(54,112,231,.12)}
.dn-row.sel.hover .dn-row-fill{background:rgba(54,112,231,.18)}
.dn-open{position:relative;flex:1;min-width:0;height:34px;display:flex;align-items:center;gap:10px;padding:0 0 0 10px}
.dn .dn-open:focus-visible{outline-offset:-2px;border-radius:10px}
.dn-row-t{flex:1;min-width:0;font-size:13px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dn-row.unread .dn-row-t{font-weight:600}
.dn-time{flex:none;min-width:14px;font-size:11px;color:var(--sec);font-variant-numeric:tabular-nums;white-space:nowrap;text-align:right}
.dn-slot{position:relative;flex:none;width:18px;height:18px;margin:0 10px 0 8px;display:grid;place-items:center}
.dn-row.starred .dn-slot{width:42px;margin:0 -2px 0 0}
.dn-tagslot{flex:none;display:flex}
.dn-tag{display:inline-flex;align-items:center;gap:3px;padding:1.5px 6px;border-radius:999px;font-size:10px;font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
.dn-tag.new{color:light-dark(#3670e7,#4f86f0);background:rgba(54,112,231,.14)}
.dn-tag.mod{color:var(--orange);background:rgba(255,159,10,.14)}
.dn-tag em{font-style:normal}
.dn-tag .p{color:var(--plus)}
.dn-tag .m{color:var(--minus)}
.dn-dot{width:7px;height:7px;border-radius:50%;background:var(--brand)}
.dn-dot.mod{background:var(--orange)}
.dn-star-on{color:var(--accent)}
.dn-check{color:var(--brand)}
.dn-acts{position:absolute;right:10px;top:8px;display:flex;gap:4px;opacity:0}
.dn-act{width:18px;height:18px;display:grid;place-items:center;color:var(--sec);border-radius:5px}
.dn-act.starred{color:var(--accent)}
.dn .dn-act:hover{color:var(--text)}
.dn-row.hover:not(.sel) .dn-acts,.dn-row.hl .dn-acts{opacity:1}
.dn-row.hover:not(.sel) .dn-time,.dn-row.hl .dn-time,.dn-row.hover:not(.sel) .dn-slot>*,.dn-row.hl .dn-slot>*{opacity:0}

/* undo pill under the list (4 s in the app) and the multi-select bar */
.dn-undo{position:absolute;left:50%;bottom:12px;display:inline-flex;align-items:center;gap:6px;padding:7px 14px;border-radius:999px;background:var(--glass);
  box-shadow:inset 0 0 0 .5px var(--edge),0 8px 22px light-dark(rgba(23,27,35,.14),rgba(0,0,0,.4));color:var(--accent);font-size:12px;font-weight:600;white-space:nowrap;opacity:0;transform:translateX(-50%)}
.dn-selbar{position:absolute;left:50%;bottom:12px;display:flex;align-items:center;gap:6px;padding:5px 8px;border-radius:999px;background:light-dark(rgba(239,241,244,.96),rgba(43,50,62,.94));
  box-shadow:inset 0 0 0 .5px var(--edge),0 8px 22px light-dark(rgba(23,27,35,.14),rgba(0,0,0,.4));white-space:nowrap;transform:translateX(-50%)}
.dn-seln{padding:0 6px;font-size:12px;font-weight:600;font-variant-numeric:tabular-nums}
.dn-selsep{width:1px;height:14px;background:var(--border)}

/* the document page grows out of its row: 680 wide, same 640 height */
.dn-page{position:absolute;width:680px;height:640px}
.dn-page-shell{position:absolute;inset:0;border-radius:22px;background:var(--bg);box-shadow:inset 0 0 0 .5px var(--edge),var(--lift);transform-origin:0 0}
.dn-page-in{position:absolute;inset:0;display:flex;flex-direction:column;border-radius:22px;overflow:hidden}
.dn-page-head{flex:none;display:flex;align-items:center;gap:10px;padding:12px 14px 12px 10px}
.dn-back{flex:none;width:30px;height:30px;display:grid;place-items:center;border-radius:8px;color:var(--text)}
.dn-page-tt{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.dn-page-tt b{font-size:17px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dn-meta{font-size:11px;color:var(--sec);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-variant-numeric:tabular-nums}
.dn-made{display:inline-flex;align-items:center;gap:4px;padding:5px 9px;border-radius:999px;background:light-dark(#f4f1ff,#221d3a);box-shadow:inset 0 0 0 1px light-dark(#dcd4fb,#3b3270);
  color:light-dark(#4a3ab0,#c6b8ff);font-size:11px;font-weight:600;white-space:nowrap}
.dn-made .ic:last-child{width:9px;height:9px}
.dn-icon-btn{width:30px;height:26px;display:grid;place-items:center;border-radius:10px;background:var(--raised);color:var(--text)}
.dn-close-btn{width:30px;height:30px;display:grid;place-items:center;border-radius:9px;color:var(--text)}
.dn-rule{flex:none;height:1px;background:var(--hair)}
.dn-body{position:relative;flex:1;min-height:0;overflow:hidden auto;padding:26px 30px 30px 34px;scrollbar-width:thin}
.dn-doc{position:relative}
.dn-ln{position:absolute;left:0;right:0;top:0}
.dn-ln>.hlb{position:absolute;inset:0 -14px 0 -22px;border-radius:6px;opacity:0}
.dn-ln.add>.hlb{background:rgba(46,160,67,.2)}
.dn-ln.del>.hlb{background:rgba(248,81,73,.18)}
.dn-ln>.mk{position:absolute;left:-18px;top:0;width:12px;font:600 14px/26px var(--ui);opacity:0;text-align:center}
.dn-ln.add>.mk{color:var(--add)}
.dn-ln.del>.mk{color:var(--del)}
.dn-ln.del .b-li span,.dn-ln.del .b-p,.dn-ln.del .b-code{text-decoration:line-through;text-decoration-color:var(--strike)}
.dn-ln>:not(.hlb):not(.mk){position:relative}
.b-h1{margin:0;padding:0 0 14px;font-size:26px;line-height:1.25;font-weight:700;letter-spacing:-.015em}
.b-h2{margin:0;padding:10px 0 8px;font-size:18px;line-height:1.3;font-weight:700}
.b-p{margin:0;padding:0 0 6px;font-size:15px;line-height:1.6;color:var(--body)}
.b-gap{height:12px}
.b-li{display:flex;align-items:center;gap:11px;min-height:30px;font-size:15px;line-height:1.5;color:var(--body)}
.b-li>i{flex:none;font-style:normal}
.b-task>i{width:15px;height:15px;border-radius:4px;border:1.5px solid light-dark(#9ea5b2,#677386)}
.b-task.done>i{background:var(--accent);border-color:var(--accent);box-shadow:inset 0 0 0 2.5px var(--bg)}
.b-bullet>i{width:5px;height:5px;margin:0 5px;border-radius:50%;background:light-dark(#838996,#96a1b2)}
.b-num>i{width:16px;color:light-dark(#838996,#96a1b2);text-align:right}
.b-quote{margin:4px 0;padding:10px 14px;border-left:3px solid var(--accent);border-radius:3px 8px 8px 3px;background:light-dark(rgba(41,93,206,.06),rgba(157,191,255,.08));font-size:14.5px;line-height:1.5;color:var(--body)}
.b-code{min-height:22px;padding:0 12px;font:13px/22px var(--term);color:var(--body);white-space:pre-wrap;background:light-dark(#eef0f5,#151a23)}

/* changes inside the document (DocumentInlineChangesView): green band and +, red band, − and strike, the Previous pill */
.dn-chbar{flex:none;display:flex;align-items:center;gap:8px;padding:5px 14px;font-size:11px;color:var(--sec)}
.dn-chcap{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dn-chn{font-weight:500;font-variant-numeric:tabular-nums}
.dn-chnav{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 10px;border-radius:10px;font-size:12px;font-weight:500;color:var(--text)}
.dn-chnav.off,.dn .dn-chnav:disabled{opacity:.45;cursor:default}
.dn .dn-chnav:not(:disabled):hover{background:var(--raised)}
.dn-inline{padding-left:4px}
.dn-ib{position:relative}
.dn-ib>.dn-band,.dn-ib>.dn-flash{position:absolute;inset:0 -14px 0 -22px;border-radius:6px;pointer-events:none}
.dn-ib.add>.dn-band,.dn-ib.mod>.dn-band{background:rgba(46,160,67,.2)}
.dn-ib.del>.dn-band,.dn-ib.was>.dn-band{background:rgba(248,81,73,.18)}
.dn-ib>.dn-flash{opacity:0;box-shadow:0 0 0 2px rgba(76,139,245,.7)}
.dn-ib>.dn-sign{position:absolute;left:-18px;top:0;width:12px;font:600 14px/30px var(--ui);font-style:normal;text-align:center}
.dn-ib.add>.dn-sign,.dn-ib.mod>.dn-sign{color:var(--add)}
.dn-ib.del>.dn-sign,.dn-ib.was>.dn-sign{color:var(--del)}
.dn-ib>:not(.dn-band):not(.dn-sign):not(.dn-flash){position:relative}
.dn-ib.del .b-li span,.dn-ib.was .b-li span,.dn-ib.del .b-p,.dn-ib.was .b-p,.dn-ib.del .b-code{text-decoration:line-through;text-decoration-color:var(--strike)}
.dn-ib .dn-w{border-radius:3px;text-decoration:none;padding:0 1px}
.dn-ib ins.dn-w{background:rgba(46,160,67,.38)}
.dn-ib del.dn-w{background:rgba(248,81,73,.32)}
.dn-tog{display:inline-block;margin-left:.5em;padding:0 .55em;border-radius:999px;box-shadow:inset 0 0 0 1px currentColor;color:var(--del);font:600 .7em/1.7 var(--ui);opacity:.8;vertical-align:.12em}
.dn button.dn-tog[aria-pressed="true"]{opacity:1;background:rgba(248,81,73,.18)}

/* revision scrubber: a glass capsule floating under the body */
.dn-scrub{flex:none;margin:10px 14px;display:flex;align-items:center;gap:12px;padding:7px 16px 7px 8px;border-radius:999px;background:light-dark(rgba(239,241,244,.92),rgba(43,50,62,.82));box-shadow:inset 0 0 0 .5px var(--edge)}
.dn-play{flex:none;width:34px;height:26px;display:grid;place-items:center;border-radius:9px;background:var(--raised);color:var(--text)}
.dn-play>span{grid-area:1/1}
.dn-play .pa{opacity:0}
.dn-track{position:relative;flex:1;height:24px;touch-action:none}
.dn-track-base,.dn-track-fill{position:absolute;left:8px;right:8px;top:10.5px;height:3px;border-radius:2px;background:var(--border)}
.dn-track-fill{background:var(--accent);transform-origin:0 50%}
.dn-tick{position:absolute;top:8px;width:8px;height:8px;margin-left:-4px;border-radius:50%;background:var(--bg);box-shadow:inset 0 0 0 1.5px var(--border)}
.dn-tick.on{background:var(--accent);box-shadow:none}
.dn-knob{position:absolute;left:0;top:4px;width:16px;height:16px;margin-left:-8px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 2px rgba(255,255,255,.9),0 1px 3px rgba(0,0,0,.35)}
.dn-pos{flex:none;font-size:11px;font-weight:500;color:var(--sec);font-variant-numeric:tabular-nums;white-space:nowrap}

/* review in the shelf: one row of chips, then the compact card (ReviewSummaryCardBody), then Skip / To read */
.rv-view{position:absolute;inset:0;display:flex;flex-direction:column;gap:10px;padding:2px 12px 12px}
.rv-bar{display:flex;align-items:center;gap:4px}
.rv-back{display:inline-flex;align-items:center;gap:3px;height:28px;padding:0 8px 0 4px;margin-right:2px;border-radius:9px;font-size:12px;font-weight:500;color:var(--text)}
.rv-chip{display:inline-flex;align-items:center;height:24px;padding:0 9px;border-radius:999px;font-size:11px;font-weight:600;color:var(--sec);background:var(--quiet);font-variant-numeric:tabular-nums}
.rv-chip.new.on{color:light-dark(#3670e7,#6d98f2);background:rgba(54,112,231,.16)}
.rv-chip.modified.on{color:var(--orange);background:rgba(255,159,10,.16)}
.rv-icon{width:28px;height:28px;display:grid;place-items:center;border-radius:9px;color:var(--text)}
.rv-bar .rv-spacer{flex:1}
.dn .rv-bar button:hover{background:var(--hover)}
.rv-stack{position:relative;flex:1;min-height:0;margin-bottom:12px}
.rv-back-card{position:absolute;inset:0;border-radius:22px;background:var(--raised);transform-origin:50% 100%}
.rv-card{position:absolute;inset:0;display:flex;flex-direction:column;gap:7px;padding:14px;border-radius:22px;background:var(--raised);
  box-shadow:0 10px 20px rgba(0,0,0,.07)}
.rv-top{display:flex;align-items:center;gap:7px;min-height:24px;font-size:11px;color:var(--sec)}
.rv-by{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rv-pill{flex:none;padding:3px 7px;border-radius:6px;font-size:10px;font-weight:700;color:light-dark(#3670e7,#6d98f2);background:rgba(54,112,231,.14)}
.rv-pill.mod{color:var(--orange);background:rgba(255,159,10,.14)}
.rv-ib{width:26px;height:26px;display:grid;place-items:center;color:var(--sec)}
.rv-title{margin:0;display:flex;align-items:flex-start;gap:8px;min-height:30px;font-size:16px;font-weight:600;line-height:1.3;color:var(--text)}
.rv-title>span{flex:1;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.rv-title>i{margin-top:3px;color:var(--sec)}
.rv-meta{font-size:11px;color:var(--sec);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rv-body{display:flex;flex-direction:column;gap:9px}
.rv-stat{display:flex;align-items:center;gap:5px;font-size:11px;font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
.rv-stat .p{color:var(--plus)}
.rv-stat .m{color:var(--minus)}
.rv-stat .s{color:var(--sec);overflow:hidden;text-overflow:ellipsis}
.rv-lines{display:flex;flex-direction:column;gap:4px}
.rv-line{padding:4px 8px;border-radius:7px;font:11.5px/1.45 var(--term);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rv-line.added{background:rgba(41,158,87,.11);color:light-dark(#23874a,#3fbf6c)}
.rv-line.deleted{background:rgba(217,69,56,.11);color:light-dark(#c63b2f,#ec6a5d);text-decoration:line-through;text-decoration-color:light-dark(rgba(198,59,47,.6),rgba(236,106,93,.7))}
.rv-ai{display:flex;flex-direction:column;gap:4px}
.rv-ai-l{display:inline-flex;align-items:center;gap:5px;font-size:10px;font-weight:600;color:var(--accent)}
.rv-sum{margin:0;font-size:12px;line-height:1.6;color:light-dark(rgba(33,41,52,.86),rgba(243,245,248,.86));display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.rv-sum.two{-webkit-line-clamp:2}
.rv-chips{display:flex;flex-wrap:wrap;gap:5px}
.rv-chips span{max-width:160px;padding:3px 8px;border-radius:999px;font-size:11px;color:var(--sec);background:var(--quiet);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rv-full{margin-top:auto;align-self:flex-start;display:inline-flex;align-items:center;gap:3px;min-height:28px;font-size:12px;font-weight:600;color:var(--accent)}
.rv-full svg{width:9px;height:9px}
.rv-btns{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.rv-btns>*{min-height:46px;border-radius:13px;display:flex;align-items:center;justify-content:center;gap:9px;font-size:14px;font-weight:600;
  background:var(--raised);color:var(--sec)}
.rv-btns .rv-read{color:var(--accent);background:var(--accent-soft)}
.rv-foot{display:flex;justify-content:flex-end;min-height:20px}
.rv-foot button{font-size:12px;font-weight:500;color:var(--accent);display:inline-flex;align-items:center;gap:5px}
.rv-empty{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;text-align:center;color:var(--accent)}
.rv-empty b{font:600 22px/1.2 "Avenir Next",Avenir,-apple-system,sans-serif;color:var(--text)}

/* a macOS help tag (tooltip) */
.dn-tip{position:absolute;padding:4px 8px;border-radius:5px;background:light-dark(#f0f2f6,#2c2e32);
  box-shadow:inset 0 0 0 .5px light-dark(rgba(33,41,52,.16),rgba(255,255,255,.2)),0 4px 12px light-dark(rgba(23,27,35,.16),rgba(0,0,0,.35));
  font-size:11.5px;line-height:1.35;color:var(--menu-text);white-space:pre;pointer-events:none}

/* capture suggestions (ShelfSuggestions, option B): a slim bar under the list; open, a scrim covers the panel and a drawer rises */
.dn-sugbar{flex:none;display:flex;align-items:center;gap:7px;height:34px;padding:0 18px;border-top:1px solid var(--hair);font-size:12px;color:var(--text);white-space:nowrap}
.dn-sugbar>.ic:first-child{color:var(--accent)}
.dn-sugbar b{font-weight:600}
.dn-sugbar>.ic:last-child{color:var(--sec)}
.dn-sugdot{width:7px;height:7px;border-radius:50%;background:var(--brand)}
.dn-scrim{position:absolute;inset:0;z-index:6;border-radius:22px;background:light-dark(rgba(23,27,35,.16),rgba(0,0,0,.3))}
.dn-drawer{position:absolute;left:0;right:0;bottom:0;z-index:7;display:flex;flex-direction:column;gap:10px;max-height:460px;padding:6px 14px 14px;
  border-radius:20px 20px 0 0;background:var(--surface);box-shadow:0 -3px 14px rgba(0,0,0,.18)}
.dn-grab{align-self:center;width:36px;height:4px;border-radius:2px;background:var(--border)}
.dn-drawer-t{display:flex;align-items:center;gap:7px;font-size:13px;color:var(--text)}
.dn-drawer-t>.ic:first-child{color:var(--accent)}
.dn-drawer-t>.ic:last-child{color:var(--sec)}
.dn-drawer-t b{font-weight:700}
.dn-drawer-n{margin:0;font-size:11px;line-height:1.45;color:var(--sec)}
.dn-sugcard{display:flex;flex-direction:column;gap:6px;padding:12px;border-radius:13px;background:light-dark(#eff1f4,rgba(43,50,62,.55))}
.dn-sugt{display:flex;align-items:center;gap:7px;font-size:13px}
.dn-sugt .ic{color:var(--accent)}
.dn-sugt b{font-weight:600}
.dn-sugcard p{margin:0;font-size:12px;line-height:1.45;color:var(--sec)}
.dn-sugcard small{font-size:11px;color:var(--sec);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dn-sugbtns{display:flex;align-items:center;gap:6px;padding-top:2px}
.dn-sugbtns .dn-qbtn{font-weight:600}