/* Loouie · Review (designer side). Built on mockkit tokens: ink #191716, warm stone paper, white cards,
   Young Serif headings, Satoshi UI, the P1 Palo Alto Studio palette for note colours, hand-drawn line on icons and markup. */
:root .page.rv{
 --ink:#191716;--ink3:#685F5A;--paper:#F4F1EA;--latte:#F4F1EA;
 --crimson:#D95B38;--rose:#D98A7C;--pear:#4D8B6E;--sienna:#E8B948;--arctic:#5E7CE2;--blue:#5E7CE2;
 --rose-s:#F0D0CB;--arctic-s:#E2E7FA;--pear-s:#DFEAE5;--sienna-s:#FAF0D7;
 --ease-morph:cubic-bezier(.22,1,.36,1);
 --ease-spring:cubic-bezier(.16,1,.3,1);
 --dur-morph:430ms;
}

.page.rv{
 --pw:180px;--nw:324px;
 --rail-w:46px;--pill-h:48px;--pw-pill:172px;--nw-pill:148px;
 --pw-col:var(--pw);--nw-col:var(--nw);
 display:block;position:relative;overflow:hidden;padding:0;user-select:none;
}
.page.rv.p-closed{--pw-col:var(--rail-w)}
.page.rv.n-closed{--nw-col:var(--rail-w)}
.page.rv.resizing,.page.rv.resizing *{cursor:col-resize!important;transition-duration:0ms!important}
.page.rv.resizing iframe{pointer-events:none}
.page.rv.kb *,.page.rv.kb{transition-duration:0ms!important;animation-duration:0ms!important}
.rv .i{flex:none}
.drawn .rv svg.i{filter:url(#drawIcon)}

/* focus ring discipline */
.rv-dock button:focus-visible,.rv-pages button:focus-visible,.rv-seg button:focus-visible,.rv-exp:focus-visible,.rv-tabs button:focus-visible,.nt:focus-visible,.rv .vis:focus-visible,.rv .st:focus-visible,.rv .ib:focus-within,.rv .send:focus-visible,.mk-pin:focus-visible,.mk-badge:focus-visible,.mk-sticky:focus-visible,.rv-split:focus-visible,.rv-toggle-btn:focus-visible,.rv-col-sw:focus-visible,.rv-col-custom:focus-within,.rv-pal-btn:focus-visible,.rv-pal-opt:focus-visible,.nt-sw:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.rv-dock.invert button:focus-visible,.rv-dock.invert .rv-col-custom:focus-within,.page.rv.full .rv-bar.invert button:focus-visible,.page.rv.full .rv-bar.invert a:focus-visible{outline-color:var(--latte)}

/* drag resize handles on the inner edge of Pages and Notes */
.rv-split{position:absolute;top:14px;bottom:14px;width:14px;display:grid;place-items:center;cursor:col-resize;z-index:25;touch-action:none;border-radius:999px;transition:opacity 200ms ease}
.rv-split.pages{right:-15px}
.rv-split.notes{left:-15px}
.page.rv.full .rv-split.pages{right:-10px}
.page.rv.full .rv-split.notes{left:-10px}
.rv-pages.collapsed .rv-split,.rv-notes.collapsed .rv-split{opacity:0;pointer-events:none}
.rv-split i{width:4px;height:42px;border-radius:999px;background:rgba(27,23,22,.14);transition:background-color 150ms ease,transform 160ms var(--ease-out)}
@media (hover:hover) and (pointer:fine){.rv-split:hover i{background:var(--ink);transform:scaleY(1.32)}}
.rv-split.dragging i,.rv-split:focus-visible i{background:var(--ink);transform:scale(1.25,1.5)}

/* ---------- unified morphing panels (Pages & Notes) ---------- */
.rv-pages,.rv-notes{
 position:absolute;top:20px;height:calc(100% - 42px);z-index:20;
 background:rgba(255,255,255,.98);border-radius:var(--r-lg);
 box-shadow:0 4px 18px rgba(27,23,22,.05),0 0 0 1px rgba(27,23,22,.05);
 backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
 transition:
  top var(--dur-morph) var(--ease-morph),
  left var(--dur-morph) var(--ease-morph),
  right var(--dur-morph) var(--ease-morph),
  width var(--dur-morph) var(--ease-morph),
  height var(--dur-morph) var(--ease-morph),
  border-radius var(--dur-morph) var(--ease-morph),
  background-color 240ms ease,
  box-shadow var(--dur-morph) var(--ease-morph),
  opacity 280ms var(--ease-out),
  transform var(--dur-morph) var(--ease-morph);
}
.rv-pages{left:22px;width:var(--pw);transform-origin:top left}
.rv-notes{right:22px;width:var(--nw);transform-origin:top right}
.rv-pages.collapsed,.rv-notes.collapsed{cursor:pointer}

/* Split-view collapsed rail state: anchored to exact same top & outer edge, narrows smoothly to 46px */
.page.rv:not(.full) .rv-pages.collapsed{width:var(--rail-w);border-radius:23px}
.page.rv:not(.full) .rv-notes.collapsed{width:var(--rail-w);border-radius:23px}

/* Full-page mode: both open panel AND collapsed pill share the exact same top:22px corner anchor */
.page.rv.full .rv-pages{
 top:22px;left:24px;width:var(--pw);height:calc(100% - 46px);border-radius:var(--r-lg);
 background:rgba(255,255,255,.96);
 box-shadow:0 20px 48px rgba(27,23,22,.22),0 0 0 1px rgba(27,23,22,.09);
}
.page.rv.full .rv-notes{
 top:22px;right:24px;width:var(--nw);height:calc(100% - 46px);border-radius:var(--r-lg);
 background:rgba(255,255,255,.96);
 box-shadow:0 20px 48px rgba(27,23,22,.22),0 0 0 1px rgba(27,23,22,.09);
}
.page.rv.full .rv-pages.collapsed{
 width:var(--pw-pill);height:var(--pill-h);border-radius:24px;
 box-shadow:0 10px 28px rgba(27,23,22,.16),0 0 0 1px rgba(27,23,22,.08);
}
.page.rv.full .rv-notes.collapsed{
 width:var(--nw-pill);height:var(--pill-h);border-radius:24px;
 box-shadow:0 10px 28px rgba(27,23,22,.16),0 0 0 1px rgba(27,23,22,.08);
}
@media (hover:hover) and (pointer:fine){
 .rv-pages.collapsed:hover,.rv-notes.collapsed:hover{background:#fff}
 .rv-pages.collapsed:hover .rv-toggle-btn,.rv-notes.collapsed:hover .rv-toggle-btn{background:var(--ink);color:var(--latte)}
}

/* Browse mode smoothly tucks Notes away to the right */
.page.rv.browse .rv-notes{opacity:0;transform:translateX(26px) scale(.96);pointer-events:none}

/* Inner clipping envelope so expanding/contracting content grows directly out of the collapsed shell */
.rv-panel-clip{position:relative;width:100%;height:100%;overflow:hidden;border-radius:inherit}

/* Persistent Toggle Button: shared across Open Panel, Full-Page Pill, and Split-View Rail!
   Because 9px + 28px + 9px = 46px (rail width), top:10px; right:9px lands dead-center in the 46px rail,
   at the right end of the 48px-tall Full-Page pill, and at the top-right corner of the Open panel! */
.rv-toggle-btn{
 position:absolute;top:10px;right:9px;z-index:8;
 width:28px;height:28px;border-radius:50%;border:0;
 background:var(--paper);color:var(--ink2);
 display:grid;place-items:center;cursor:pointer;
 transition:background-color 150ms ease,color 150ms ease,transform 160ms var(--ease-out);
}
.rv-toggle-btn:active{transform:scale(.92)}
@media (hover:hover) and (pointer:fine){.rv-toggle-btn:hover{background:var(--ink);color:var(--latte)}}
.rv-toggle-btn svg{transition:transform var(--dur-morph) var(--ease-morph)}
.rv-pages.collapsed .rv-toggle-btn svg{transform:rotate(180deg)}
.rv-notes.collapsed .rv-toggle-btn svg{transform:rotate(-180deg)}

/* Expanded inner layers keep fixed open width & height so contents never squish mid-morph */
.rv-p-exp,.rv-n-exp{
 position:absolute;top:0;height:802px;
 display:flex;flex-direction:column;min-height:0;
 opacity:1;transform:scale(1) translate3d(0,0,0);filter:blur(0px);
 transition:
  opacity 280ms var(--ease-out),
  transform var(--dur-morph) var(--ease-morph),
  filter 240ms ease;
}
.page.rv.full .rv-p-exp,.page.rv.full .rv-n-exp{height:798px}
.rv-p-exp{left:0;width:var(--pw);padding:12px 14px 16px;transform-origin:top left}
.rv-n-exp{right:0;width:var(--nw);padding:12px 14px 14px;transform-origin:top right}

/* When collapsed in Split View (horizontal rail morph) */
.page.rv:not(.full) .rv-pages.collapsed .rv-p-exp{
 opacity:0;transform:translateX(-12px) scale(.97);filter:blur(3px);pointer-events:none;
 transition:opacity 170ms ease,transform 340ms var(--ease-morph),filter 170ms ease;
}
.page.rv:not(.full) .rv-notes.collapsed .rv-n-exp{
 opacity:0;transform:translateX(12px) scale(.97);filter:blur(3px);pointer-events:none;
 transition:opacity 170ms ease,transform 340ms var(--ease-morph),filter 170ms ease;
}

/* When collapsed in Full-Page View (top corner pill morph):
   Keep the top header visible longer while the body folds up into the 48px pill */
.page.rv.full .rv-pages.collapsed .rv-p-exp{
 opacity:0;transform:translateY(-4px) scale(.95);filter:blur(3px);pointer-events:none;
 transition:opacity 170ms ease,transform 360ms var(--ease-morph),filter 170ms ease;
}
.page.rv.full .rv-notes.collapsed .rv-n-exp{
 opacity:0;transform:translateY(-4px) scale(.95);filter:blur(3px);pointer-events:none;
 transition:opacity 170ms ease,transform 360ms var(--ease-morph),filter 170ms ease;
}

/* Collapsed Pill header face (Full-Page mode): aligned to exact same top/left title baseline as open header */
.rv-col-pill{
 position:absolute;top:0;left:0;right:0;height:var(--pill-h);
 padding:0 44px 0 14px;display:flex;align-items:center;gap:7px;
 color:var(--ink);white-space:nowrap;
 opacity:0;pointer-events:none;transform:translateY(0) scale(1);filter:blur(2px);
 transition:opacity 200ms ease,transform 340ms var(--ease-morph),filter 200ms ease;
}
.rv-col-pill .pill-title{font:400 18px/1 "Young Serif",serif;color:var(--ink)}
.rv-notes .rv-col-pill .pill-title span{background:linear-gradient(transparent 58%,#F5DF99 58%,#F5DF99 92%,transparent 92%);padding:0 3px;border-radius:3px}
.rv-col-pill .pill-sub{font:600 12px/1 Satoshi;color:var(--ink2);background:var(--paper);padding:4px 8px;border-radius:999px}
.rv-col-pill .ct-inline{background:var(--ink);color:var(--latte);border-radius:999px;padding:0 6px;font:600 11px/19px Satoshi;min-width:19px;text-align:center;font-variant-numeric:tabular-nums}

.page.rv.full .rv-pages.collapsed .rv-col-pill,
.page.rv.full .rv-notes.collapsed .rv-col-pill{
 opacity:1;pointer-events:auto;filter:blur(0px);
}

/* Collapsed Rail face (Split View): sits directly below the persistent 28x28 top toggle button */
.rv-col-rail{
 position:absolute;top:46px;bottom:0;width:var(--rail-w);
 padding:6px 0 14px;display:flex;flex-direction:column;align-items:center;gap:12px;
 color:var(--ink);
 opacity:0;pointer-events:none;transform:translateY(6px);filter:blur(2px);
 transition:opacity 200ms ease,transform 320ms var(--ease-morph),filter 200ms ease;
}
.rv-pages .rv-col-rail{left:0}
.rv-notes .rv-col-rail{right:0}
.page.rv:not(.full) .rv-pages.collapsed .rv-col-rail,
.page.rv:not(.full) .rv-notes.collapsed .rv-col-rail{
 opacity:1;pointer-events:auto;transform:translateY(0);filter:blur(0px);
}
.rv-rt-lbl{writing-mode:vertical-rl;transform:rotate(180deg);font:600 12.5px/1 Satoshi;letter-spacing:.02em;color:var(--ink2);white-space:nowrap}
.rv-rt-ct{margin-top:auto;min-width:22px;height:22px;border-radius:999px;background:var(--ink);color:var(--latte);font:600 11px/22px Satoshi;text-align:center;padding:0 6px;font-variant-numeric:tabular-nums}

/* pages inner content */
.rv-ph{padding:0 34px 12px 2px;min-height:40px}
.rv-ph h2{font:400 21px/1.15 "Young Serif",serif}
.rv-ph span{display:block;font-size:12px;color:var(--ink3);margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rv-pages ol{list-style:none;overflow:auto;display:flex;flex-direction:column;gap:10px;padding:2px;margin:0 -2px;scrollbar-width:thin;flex:1;min-height:0}
.rv-pages li{transition:transform 380ms var(--ease-morph),opacity 260ms ease}
.rv-pages.collapsed li{transform:translateY(-10px) scale(.96);opacity:0}
.rv-pages:not(.collapsed) li:nth-child(1){transition-delay:20ms}
.rv-pages:not(.collapsed) li:nth-child(2){transition-delay:45ms}
.rv-pages:not(.collapsed) li:nth-child(3){transition-delay:70ms}
.rv-pages:not(.collapsed) li:nth-child(4){transition-delay:95ms}
.rv-pages:not(.collapsed) li:nth-child(5){transition-delay:120ms}
.rv-pages li button{width:100%;border:0;background:none;padding:7px;border-radius:14px;text-align:left;cursor:pointer;position:relative;transition:background-color 140ms ease,transform 140ms var(--ease-out)}
.rv-pages li button:active{transform:scale(.98)}
.rv-pages li button.on{background:#FBF0D1}
@media (hover:hover) and (pointer:fine){.rv-pages li button:not(.on):hover{background:#F8F5EE}}
.rv-pages .th{display:block;position:relative;height:74px;border-radius:10px;background-size:100% auto;background-position:center 0%;background-color:#eee;box-shadow:inset 0 0 0 1px rgba(27,23,22,.08);overflow:hidden;}
.rv-pages .th-bar{position:absolute;top:5px;bottom:5px;right:4px;width:2.5px;border-radius:999px;background:rgba(25,23,22,.14);opacity:0;transition:opacity 140ms ease}
.rv-pages .th-bar u{position:absolute;left:0;right:0;top:var(--p-pct,0%);height:28%;border-radius:999px;background:var(--ink);transform:translateY(calc(var(--p-pct,0%) * -0.28))}
@media (hover:hover) and (pointer:fine){.rv-pages li button:hover .th-bar{opacity:1}}
.rv-pages .nm{display:flex;gap:7px;align-items:baseline;margin-top:7px;font:500 13px/1.2 Satoshi;color:var(--ink)}
.rv-pages .nm i{font-style:normal;color:var(--ink3);font-size:11.5px;font-variant-numeric:tabular-nums}
.rv-pages .ct{position:absolute;top:13px;right:13px;min-width:20px;height:20px;border-radius:999px;background:var(--ink);color:var(--latte);font:600 11px/20px Satoshi;text-align:center;padding:0 5px}

/* Floating hover scrub preview thumbnail card next to Pages panel */
.rv-scrub-pop{
 position:absolute;left:calc(100% + 12px);top:0;z-index:36;
 width:232px;padding:10px 10px 9px;
 background:rgba(255,253,248,.98);
 backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
 border-radius:14px;
 box-shadow:0 16px 38px rgba(25,23,22,.22),0 0 0 1.5px var(--ink);
 transform-origin:left center;
 translate:0 var(--scrub-y,14px);
 scale:.96;opacity:0;pointer-events:none;
 transition:
  translate 190ms var(--ease-morph),
  scale 160ms var(--ease-out),
  opacity 150ms ease;
}
.rv-scrub-pop.on{scale:1;opacity:1}
.rv-scrub-pop[data-instant]{transition:translate 170ms var(--ease-morph),scale 110ms var(--ease-out),opacity 110ms ease}
.rv-pages.collapsed .rv-scrub-pop,.page.rv.resizing .rv-scrub-pop{opacity:0!important;scale:.95!important;pointer-events:none!important}
.rv-sp-hd{display:flex;align-items:center;justify-content:space-between;gap:6px;margin-bottom:7px}
.rv-sp-title{font:400 15px/1.1 "Young Serif",serif;color:var(--ink);display:inline-flex;align-items:baseline;gap:5px}
.rv-sp-title i{font:600 10.5px/1 Satoshi,sans-serif;color:var(--ink3);font-style:normal;font-variant-numeric:tabular-nums}
.rv-sp-badge{font:600 10.5px/1 Satoshi;padding:3px 7px;border-radius:999px;background:var(--paper);color:var(--ink2);border:1px solid rgba(25,23,22,.12);white-space:nowrap}
.rv-sp-vp{position:relative;height:146px;border-radius:9px;overflow:hidden;background:#EAE5DA;box-shadow:inset 0 0 0 1px rgba(25,23,22,.12)}
.rv-sp-shot{position:absolute;inset:0;background-size:100% auto;background-position:center 0%;background-repeat:no-repeat}
.rv-sp-shot.mobile{left:22%;right:22%;border-radius:6px;box-shadow:0 4px 14px rgba(25,23,22,.16)}
.rv-sp-pins{position:absolute;inset:0;pointer-events:none}
.rv-sp-pin{position:absolute;width:11px;height:11px;margin:-5.5px 0 0 -5.5px;border-radius:50%;background:var(--c);border:1.5px solid var(--ink);box-shadow:0 1px 3px rgba(25,23,22,.28)}
.rv-sp-track{position:absolute;top:7px;bottom:7px;right:5px;width:3px;border-radius:999px;background:rgba(25,23,22,.16)}
.rv-sp-thumb{position:absolute;left:0;right:0;top:0;height:26%;border-radius:999px;background:var(--ink);box-shadow:0 0 0 1px rgba(255,253,248,.7)}
.rv-sp-ft{display:flex;align-items:center;justify-content:space-between;gap:6px;margin-top:7px;font:500 11px/1 Satoshi;color:var(--ink3)}
.rv-sp-path{font-weight:600;color:var(--ink2)}

/* ---------- stage (continuous animated geometry between Split & Full-Page) ---------- */
.rv-stage{
 position:absolute;
 top:20px;bottom:22px;
 left:calc(22px + var(--pw-col) + 18px);
 right:calc(22px + var(--nw-col) + 18px);
 z-index:10;
 transition:
  top var(--dur-morph) var(--ease-morph),
  bottom var(--dur-morph) var(--ease-morph),
  left var(--dur-morph) var(--ease-morph),
  right var(--dur-morph) var(--ease-morph);
}
.page.rv.browse .rv-stage{right:22px}
.page.rv.full .rv-stage{top:12px;bottom:14px;left:14px;right:14px}

.rv-bar{
 position:absolute;top:0;left:50%;translate:-50% 0;width:100%;max-width:100%;
 z-index:22;display:flex;align-items:center;gap:10px;
 padding:0;border-radius:999px;
 background:rgba(244,241,234,0);
 box-shadow:0 10px 28px rgba(27,23,22,0),0 0 0 1px rgba(27,23,22,0);
 transition:
  top var(--dur-morph) var(--ease-morph),
  width var(--dur-morph) var(--ease-morph),
  max-width var(--dur-morph) var(--ease-morph),
  padding var(--dur-morph) var(--ease-morph),
  background-color 240ms ease,
  box-shadow 240ms ease;
}
.page.rv.full .rv-bar{
 top:10px;width:628px;max-width:calc(100% - 360px);
 padding:4px 6px;
 background:rgba(244,241,234,.95);
 backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
 box-shadow:0 10px 28px rgba(27,23,22,.16),0 0 0 1px rgba(27,23,22,.08);
}

.rv-seg{display:flex;background:#fff;border-radius:999px;padding:3px;transition:background-color 240ms ease}
.rv-seg button{border:0;background:none;border-radius:999px;padding:7px 14px;font:500 13px/1 Satoshi;color:var(--ink2);cursor:pointer;display:grid;place-items:center;transition:background-color 160ms ease,color 160ms ease,transform 140ms var(--ease-out)}
.rv-seg button:active,.rv-exp:active{transform:scale(.97)}
.rv-seg.dev button{padding:6px 10px}
.rv-seg button.on{background:var(--ink);color:var(--latte)}
@media (hover:hover) and (pointer:fine){.rv-seg button:not(.on):hover{color:var(--ink)}}
.rv-url{flex:1;min-width:0;display:flex;align-items:center;gap:8px;background:#fff;border-radius:999px;padding:8px 14px;font:500 13px/1 Satoshi;color:var(--ink2);transition:background-color 240ms ease,color 240ms ease}
.rv-url span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ink);transition:color 240ms ease}
.rv-url .rv-meta{font-style:normal;font-size:12px;color:var(--ink3);margin-left:auto;white-space:nowrap;transition:color 240ms ease}
.rv-url a{display:grid;place-items:center;color:var(--ink2);border-radius:6px;flex:none;transition:color 180ms ease}
@media (hover:hover) and (pointer:fine){.rv-url a:hover{color:var(--ink)}}
.rv-exp{border:0;background:#fff;color:var(--ink);border-radius:999px;padding:9px 14px;font:500 13px/1 Satoshi;display:inline-flex;align-items:center;gap:7px;cursor:pointer;white-space:nowrap;transition:background-color 180ms ease,color 180ms ease,transform 140ms var(--ease-out)}
.rv-exp.on{background:var(--ink);color:var(--latte)}
@media (hover:hover) and (pointer:fine){.rv-exp:not(.on):hover{background:#EDE9DF}}

/* Automatic Contrast Inversion for Top-Center Page & Device Pill (.rv-bar) in Full-Page Mode */
.page.rv.full .rv-bar.invert{
 background:rgba(25,23,22,.94);
 box-shadow:0 14px 36px rgba(25,23,22,.28),0 0 0 1px rgba(244,241,234,.14);
}
.page.rv.full .rv-bar.invert .rv-seg{background:rgba(244,241,234,.1)}
.page.rv.full .rv-bar.invert .rv-seg button{color:#DFD8CA}
.page.rv.full .rv-bar.invert .rv-seg button.on{background:var(--latte);color:var(--ink)}
@media (hover:hover) and (pointer:fine){
 .page.rv.full .rv-bar.invert .rv-seg button:not(.on):hover{background:rgba(244,241,234,.12);color:var(--latte)}
}
.page.rv.full .rv-bar.invert .rv-url{background:rgba(244,241,234,.1);color:#D5CEC0}
.page.rv.full .rv-bar.invert .rv-url span{color:var(--latte)}
.page.rv.full .rv-bar.invert .rv-url .rv-meta{color:#B8AFA0}
.page.rv.full .rv-bar.invert .rv-url a{color:#D5CEC0}
@media (hover:hover) and (pointer:fine){
 .page.rv.full .rv-bar.invert .rv-url a:hover{color:var(--latte)}
}
.page.rv.full .rv-bar.invert .rv-exp{background:var(--latte);color:var(--ink)}
@media (hover:hover) and (pointer:fine){
 .page.rv.full .rv-bar.invert .rv-exp:hover{background:#FFF;color:var(--ink)}
}

.rv-view{
 position:absolute;top:52px;left:0;right:0;bottom:0;
 background:#fff;border-radius:var(--r-lg);overflow:hidden;
 box-shadow:inset 0 0 0 1px rgba(27,23,22,.06);
 transition:top var(--dur-morph) var(--ease-morph),border-radius var(--dur-morph) var(--ease-morph),background-color 240ms ease;
}
.page.rv.full .rv-view{top:0;border-radius:18px}
.rv-view.mobile{background:#EAE5DA}
.rv-scroll{position:absolute;inset:0;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;padding-bottom:76px}
.rv-doc{position:relative;margin:0 auto;overflow:hidden}
.rv-view.mobile .rv-doc{margin:24px auto;border-radius:22px;overflow:hidden;box-shadow:0 8px 30px rgba(27,23,22,.12)}
.rv-doc img{display:block;width:100%;height:auto;user-select:none}
.rv-mk{position:absolute;left:0;top:0;transform-origin:0 0;scale:var(--s);width:calc(100% / var(--s));height:calc(100% / var(--s));cursor:crosshair;touch-action:none}
.rv-view.comment .rv-mk{cursor:crosshair}
.rv-frame{height:100%;margin:0 auto;overflow:hidden;position:relative}
.rv-frame iframe{border:0;display:block;transform-origin:0 0;scale:var(--s);background:#fff}
.rv-view.mobile .rv-frame{border-radius:22px;margin:20px auto 0;height:calc(100% - 40px)}

/* ---------- review tools floating dock (with automatic background contrast inversion & color picker) ---------- */
.rv-dock{
 position:absolute;left:50%;bottom:16px;translate:-50% 0;z-index:15;
 display:flex;align-items:center;gap:2px;
 background:rgba(255,255,255,.95);
 backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
 padding:5px 7px;border-radius:999px;
 box-shadow:0 12px 32px rgba(27,23,22,.18),0 0 0 1px rgba(27,23,22,.08);
 max-width:calc(100% - 14px);
 overflow:visible;
 transition:background-color 240ms ease,box-shadow 240ms ease;
}
.rv-tsep{width:1px;height:20px;background:rgba(27,23,22,.12);margin:0 2px;flex:none;transition:background-color 240ms ease}
.rv-dock button[data-tool]{
 border:0;background:none;border-radius:999px;padding:6px 7px 6px 8px;
 display:inline-flex;align-items:center;gap:4px;
 color:var(--ink2);font:500 12px/1 Satoshi;cursor:pointer;white-space:nowrap;
 transition:background-color 180ms ease,color 180ms ease,transform 140ms var(--ease-out);
}
.rv-dock button[data-tool]:active{transform:scale(.96)}
.rv-dock button[data-tool] kbd{
 font:600 10px/1 Satoshi,system-ui,sans-serif;
 padding:2.5px 4px;border-radius:4px;
 background:rgba(27,23,22,.07);color:var(--ink3);margin-left:0;
 transition:background-color 180ms ease,color 180ms ease;
}
.rv-dock button[data-tool].on{background:var(--ink);color:var(--latte)}
.rv-dock button[data-tool].on kbd{background:rgba(244,241,234,.18);color:var(--latte)}
@media (hover:hover) and (pointer:fine){
 .rv-dock button[data-tool]:not(.on):hover{background:var(--paper);color:var(--ink)}
 .rv-dock button[data-tool]:not(.on):hover kbd{background:rgba(27,23,22,.11);color:var(--ink)}
}

/* Swatch & palette controls inside .rv-dock */
.rv-cols{display:inline-flex;align-items:center;gap:4px;padding:0 2px;position:relative}
.rv-col-sw{
 width:17px;height:17px;border-radius:50%;padding:0;
 border:1.5px solid var(--ink);background:var(--sw);
 cursor:pointer;position:relative;flex:none;
 box-shadow:0 1px 3px rgba(25,23,22,.16);
 transition:transform 140ms var(--ease-out),box-shadow 140ms ease;
}
@media (hover:hover) and (pointer:fine){.rv-col-sw:hover{transform:scale(1.14)}}
.rv-col-sw:active{transform:scale(.93)}
.rv-col-sw.on{
 transform:scale(1.12);
 box-shadow:0 0 0 1.8px #FFFDF8,0 0 0 3.4px var(--ink);
}
.rv-col-custom{
 width:17px;height:17px;border-radius:50%;
 border:1.5px solid var(--ink);
 background:conic-gradient(#D95B38,#E8B948,#4D8B6E,#5E7CE2,#D98A7C,#D95B38);
 display:inline-grid;place-items:center;cursor:pointer;position:relative;flex:none;
 box-shadow:0 1px 3px rgba(25,23,22,.16);
 transition:transform 140ms var(--ease-out),box-shadow 140ms ease;
}
@media (hover:hover) and (pointer:fine){.rv-col-custom:hover{transform:scale(1.14)}}
.rv-col-custom.on{box-shadow:0 0 0 1.8px #FFFDF8,0 0 0 3.4px var(--ink)}
.rv-col-custom input{position:absolute;inset:0;opacity:0;width:100%;height:100%;cursor:pointer;border:0;padding:0}
.rv-col-custom i{width:7px;height:7px;border-radius:50%;background:var(--sw,#FFFDF8);box-shadow:0 0 0 1.1px var(--ink);pointer-events:none}

.rv-pal-wrap{position:relative;display:inline-flex;align-items:center}
.rv-pal-btn{
 border:0;background:var(--paper);color:var(--ink);
 border-radius:999px;padding:5px 7px 5px 6px;
 font:600 11px/1 Satoshi;cursor:pointer;
 display:inline-flex;align-items:center;gap:4px;white-space:nowrap;
 transition:background-color 160ms ease,color 160ms ease,transform 140ms var(--ease-out);
}
.rv-pal-btn:active{transform:scale(.96)}
.rv-pal-btn .pal-dots{display:inline-flex;align-items:center}
.rv-pal-btn .pal-dots i{width:9px;height:9px;border-radius:50%;border:1px solid rgba(25,23,22,.35);display:inline-block}
.rv-pal-btn .pal-dots i+i{margin-left:-3px}
.rv-pal-btn.on{background:var(--ink);color:var(--latte)}
@media (hover:hover) and (pointer:fine){.rv-pal-btn:not(.on):hover{background:#EAE4D7}}

.rv-pal-pop{
 position:absolute;bottom:calc(100% + 12px);right:0;z-index:30;
 width:228px;padding:8px;
 background:rgba(255,253,248,.98);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
 border-radius:16px;box-shadow:0 16px 38px rgba(25,23,22,.24),0 0 0 1.5px var(--ink);
 display:flex;flex-direction:column;gap:4px;
 opacity:0;scale:.95;translate:0 6px;pointer-events:none;transform-origin:bottom right;
 transition:opacity 150ms ease,scale 160ms var(--ease-out),translate 160ms var(--ease-out);
}
.rv-pal-pop.on{opacity:1;scale:1;translate:0 0;pointer-events:auto}
.rv-pal-opt{
 border:0;background:none;border-radius:11px;padding:7px 9px;
 display:flex;align-items:center;justify-content:space-between;gap:8px;
 font:600 12px/1.2 Satoshi;color:var(--ink);cursor:pointer;text-align:left;
 transition:background-color 140ms ease;
}
@media (hover:hover) and (pointer:fine){.rv-pal-opt:hover{background:var(--paper)}}
.rv-pal-opt.on{background:#FBF0D1}
.rv-pal-opt .po-lbl{display:flex;flex-direction:column;gap:2px}
.rv-pal-opt .po-lbl small{font:500 10.5px/1 Satoshi;color:var(--ink3)}
.rv-pal-opt .po-sw{display:inline-flex;gap:3px}
.rv-pal-opt .po-sw i{width:11px;height:11px;border-radius:50%;border:1px solid rgba(25,23,22,.3)}

/* Inverted dock state: automatically engaged when sitting over a white/light page surface */
.rv-dock.invert{
 background:rgba(25,23,22,.94);
 box-shadow:0 14px 36px rgba(25,23,22,.28),0 0 0 1px rgba(244,241,234,.14);
}
.rv-dock.invert .rv-tsep{background:rgba(244,241,234,.16)}
.rv-dock.invert button[data-tool]{color:#E5DFD3}
.rv-dock.invert button[data-tool] kbd{background:rgba(244,241,234,.12);color:#C9C1B4}
.rv-dock.invert button[data-tool].on{background:var(--latte);color:var(--ink)}
.rv-dock.invert button[data-tool].on kbd{background:rgba(25,23,22,.13);color:var(--ink)}
@media (hover:hover) and (pointer:fine){
 .rv-dock.invert button[data-tool]:not(.on):hover{background:rgba(244,241,234,.12);color:var(--latte)}
 .rv-dock.invert button[data-tool]:not(.on):hover kbd{background:rgba(244,241,234,.2);color:var(--latte)}
}
.rv-dock.invert .rv-col-sw,.rv-dock.invert .rv-col-custom{border-color:rgba(244,241,234,.75)}
.rv-dock.invert .rv-col-sw.on,.rv-dock.invert .rv-col-custom.on{box-shadow:0 0 0 2px #191716,0 0 0 3.8px var(--latte)}
.rv-dock.invert .rv-pal-btn{background:rgba(244,241,234,.12);color:var(--latte)}
.rv-dock.invert .rv-pal-btn.on{background:var(--latte);color:var(--ink)}
@media (hover:hover) and (pointer:fine){
 .rv-dock.invert .rv-pal-btn:not(.on):hover{background:rgba(244,241,234,.2)}
}

/* ---------- Markup System (Pin: M1 · Sticky: M5 · Arrow: M1 · Box: M1 · Highlight: M3) ----------
   All unified with understated 2px architectural stroke weight, non-scaling strokes, Satoshi body font, and 22px ink-bordered number badges. */
.mk-svg{position:absolute;inset:0;overflow:visible;pointer-events:none}
.mk-svg [data-id]{pointer-events:all;cursor:pointer}
.mk-box,.mk-hl,.mk-ar{transition:opacity 160ms ease}
.done.mk-box,.done.mk-hl,.done.mk-ar{opacity:.32}
.draft{opacity:.82}

/* Pin (M1 Teardrop, refined to M6 understated proportion & 1.8px ink rim) */
.mk-pin{
 position:absolute;width:28px;height:28px;margin:-14px 0 0 -14px;
 border-radius:50% 50% 50% 4px;
 background:var(--c);border:1.8px solid var(--ink);
 font:700 11.5px/24.4px Satoshi,sans-serif;text-align:center;
 scale:calc(1 / var(--s));transform-origin:center;cursor:pointer;
 box-shadow:0 0 0 1.5px rgba(255,253,248,.85),0 4px 10px rgba(25,23,22,.22);
 transition:translate 150ms var(--ease-out),box-shadow 150ms ease,background-color 150ms ease;
}
.mk-pin.draft{background:var(--c,var(--ink));color:var(--fg,var(--latte));font-size:15px;animation:pinIn 220ms var(--ease-out)}
.mk-pin.on{box-shadow:0 0 0 2px #FFFDF8,0 0 0 4px var(--ink),0 6px 14px rgba(25,23,22,.28)}
.mk-pin.done{opacity:.42}
@keyframes pinIn{from{translate:0 -8px;opacity:0}to{translate:0;opacity:1}}

/* Shared 22px circular number badge for Arrow (M1), Box (M1), and Highlight (M3) */
.mk-badge{
 position:absolute;width:22px;height:22px;margin:-11px 0 0 -11px;
 border-radius:50%;background:var(--c);border:1.8px solid var(--ink);
 font:700 11px/18.4px Satoshi,sans-serif;text-align:center;
 scale:calc(1 / var(--s));transform-origin:center;cursor:pointer;
 box-shadow:0 0 0 1.5px rgba(255,253,248,.82),0 3px 8px rgba(25,23,22,.2);
 transition:transform 150ms var(--ease-out),box-shadow 150ms ease,background-color 150ms ease;
}
.mk-badge.on{box-shadow:0 0 0 2px #FFFDF8,0 0 0 4px var(--ink),0 5px 12px rgba(25,23,22,.26)}
.mk-badge.done{opacity:.42}

/* Sticky Note (M5 Speech Callout harmonized with M6: #FFFDF8 paper card, 10px 10px 10px 3px callout radius, inset 3.5px left color spine, inline 20px badge) */
.mk-sticky{
 position:absolute;width:174px;padding:11px 13px 11px;
 background:#FFFDF8;border-radius:10px 10px 10px 3px;border:1.5px solid var(--ink);
 font:500 12.5px/1.4 Satoshi,sans-serif;color:var(--ink);
 box-shadow:inset 3.5px 0 0 var(--c),0 8px 20px rgba(25,23,22,.14),0 0 0 1.5px rgba(255,253,248,.7);
 transform-origin:0 0;scale:calc(1 / var(--s));cursor:pointer;
 transition:box-shadow 150ms ease;
}
.mk-sticky .mk-n{
 display:inline-grid;place-items:center;
 width:20px;height:20px;border-radius:50%;
 background:var(--c);border:1.8px solid var(--ink);
 font:700 10.5px/1 Satoshi,sans-serif;
 margin-right:6px;vertical-align:text-bottom;
}
.mk-sticky.on{box-shadow:inset 4px 0 0 var(--c),0 0 0 2px #FFFDF8,0 0 0 4px var(--ink),0 12px 24px rgba(25,23,22,.2)}
.mk-sticky.done{opacity:.48}

/* notes column inner elements (right-padded in header for the shared persistent .rv-toggle-btn) */
.rv-nh{display:flex;align-items:center;justify-content:space-between;gap:8px;padding-right:34px;min-height:32px}
.rv-nh-act{display:flex;align-items:center;gap:6px}
.rv-nh h2{font:400 24px/1.1 "Young Serif",serif;position:relative;isolation:isolate}
.rv-nh h2 span{padding:0}
.rv-tabs{display:flex;gap:5px;margin-top:14px;flex-wrap:nowrap}
.rv-tabs button{border:0;background:var(--paper);border-radius:999px;padding:6px 9px 6px 11px;font:500 12px/1 Satoshi;color:var(--ink2);display:flex;align-items:center;gap:5px;cursor:pointer;white-space:nowrap;transition:background-color 140ms ease,color 140ms ease}
.rv-tabs button b{font:600 11px/18px Satoshi;min-width:18px;height:18px;border-radius:999px;background:#fff;text-align:center;padding:0 5px}
.rv-tabs button.on{background:var(--ink);color:var(--latte)}
.rv-tabs button.on b{background:var(--latte);color:var(--ink)}
@media (hover:hover) and (pointer:fine){.rv-tabs button:not(.on):hover{background:#EAE4D7;color:var(--ink)}}

.rv-list{flex:1;min-height:0;overflow:auto;margin:14px -6px 0;padding:2px 6px;display:flex;flex-direction:column;gap:12px;scrollbar-width:thin}
.nt{border-radius:18px;background:#FAF8F4;padding:13px 14px 12px;cursor:pointer;transition:background-color 140ms ease,transform 380ms var(--ease-morph),opacity 260ms ease}
.rv-notes.collapsed .nt{transform:translateY(-10px) scale(.96);opacity:0}
.rv-notes:not(.collapsed) .nt:nth-child(1){transition-delay:20ms}
.rv-notes:not(.collapsed) .nt:nth-child(2){transition-delay:45ms}
.rv-notes:not(.collapsed) .nt:nth-child(3){transition-delay:70ms}
.rv-notes:not(.collapsed) .nt:nth-child(4){transition-delay:95ms}
.nt.on{background:#FCF3DA}
@media (hover:hover) and (pointer:fine){.nt:not(.on):hover{background:#F4F0E6}}
.nt header{display:flex;align-items:center;gap:8px;min-width:0}
.nb{width:24px;height:24px;border-radius:50%;background:var(--c);border:1.5px solid var(--ink);display:grid;place-items:center;font:700 11.5px/1 Satoshi;flex:none;transition:background-color 150ms ease}
.nt .who{font:600 13.5px Satoshi;color:var(--ink)}
.nt .ago{font-size:12px;color:var(--ink3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nt.on .ago{display:none}
.nt-cols{display:none;align-items:center;gap:4px;margin-left:auto;margin-right:2px}
.nt.on .nt-cols{display:inline-flex}
.nt-sw{width:15px;height:15px;border-radius:50%;padding:0;border:1.4px solid var(--ink);background:var(--sw);cursor:pointer;transition:transform 140ms var(--ease-out),box-shadow 140ms ease}
@media (hover:hover) and (pointer:fine){.nt-sw:hover{transform:scale(1.16)}}
.nt-sw.on{box-shadow:0 0 0 1.5px #FFFDF8,0 0 0 3px var(--ink)}
.st{margin-left:auto;border:0;border-radius:999px;padding:5px 10px;font:600 11.5px/1 Satoshi;cursor:pointer;display:flex;align-items:center;gap:4px;flex:none}
.nt.on .st{margin-left:4px}
.st.open{background:#E5EAFC;color:#2E4596}
.st.resolved{background:#DFECE5;color:#265940}
.nt-b{display:flex;gap:12px;margin-top:9px;align-items:flex-start}
.nt-b p{flex:1;font-size:13px;line-height:1.48;color:var(--ink2);user-select:text}
.nt-th,.nt-att{flex:none;width:60px;height:46px;border-radius:9px;background-color:#eee;background-repeat:no-repeat;object-fit:cover;box-shadow:inset 0 0 0 1px rgba(27,23,22,.08)}
.nt footer{display:flex;align-items:center;gap:8px;margin-top:10px}
.tk{display:flex;align-items:center;gap:7px;font:500 12.5px Satoshi;flex:1;min-width:0;cursor:pointer;color:var(--ink)}
.tk input{width:15px;height:15px;accent-color:var(--ink);flex:none}
.tk span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tk input:checked+span{text-decoration:line-through;color:var(--ink3)}
.rv .vis{border:0;background:none;border-radius:999px;padding:4px 8px;display:flex;align-items:center;gap:4px;font:500 11.5px/1 Satoshi;color:var(--ink2);cursor:pointer;flex:none}
.rv .vis.team{background:#F8E6DF;color:#8E361E}
.rv .vis.shared{background:#ECEFFA;color:#2E4596}
.nt.done .nt-b p{color:var(--ink3)}
.empty{font-size:13px;color:var(--ink3);padding:24px 12px;text-align:center}

/* composer */
.rv-comp{margin-top:12px;background:var(--paper);border-radius:18px;padding:11px 12px 9px;transition:box-shadow 160ms ease}
.rv-comp.armed{box-shadow:0 0 0 2px var(--ink)}
.rv-ctx{font:500 12px Satoshi;color:var(--ink3);margin:0 2px 6px}
.rv-in{display:flex;gap:8px;align-items:flex-start}
.rv-in .av{width:26px;height:26px;border-radius:50%;background:var(--ink);color:var(--latte);display:grid;place-items:center;font:600 12px Satoshi;flex:none}
.rv-in textarea{flex:1;border:0;background:none;resize:none;font:400 13.5px/1.45 Satoshi;color:var(--ink);outline:none;padding-top:3px;user-select:text}
.rv-in textarea::placeholder{color:var(--ink3)}
.rv-ca{display:flex;align-items:center;gap:6px;margin-top:6px}
.rv .ib{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;color:var(--ink2);cursor:pointer;border:0;background:none}
@media (hover:hover) and (pointer:fine){.rv .ib:hover{background:#fff;color:var(--ink)}}
.rv-ca .lnk{margin-left:auto;border:0;background:none;cursor:pointer;color:var(--ink2)}
.rv .send{margin-left:auto;width:34px;height:34px;border-radius:50%;border:0;background:var(--ink);color:var(--latte);display:grid;place-items:center;cursor:pointer;transition:transform 140ms var(--ease-out),background-color 140ms ease}
.rv .send:active{transform:scale(.95)}
.rv-ca .lnk+.send{margin-left:6px}
.rv-att{position:relative;display:inline-block;margin:0 0 6px 34px}
.rv-att img{width:64px;height:48px;object-fit:cover;border-radius:8px;display:block}
.rv-att button{position:absolute;top:-6px;right:-6px;width:20px;height:20px;border-radius:50%;border:0;background:var(--ink);color:var(--latte);display:grid;place-items:center;cursor:pointer}

@media (prefers-reduced-motion:reduce){
 .mk-pin.draft{animation:none}
 .rv-pages,.rv-notes,.rv-stage,.rv-bar,.rv-view,.rv-p-exp,.rv-n-exp,.rv-col-pill,.rv-col-rail,.rv-pages li,.nt,.rv-toggle-btn svg{
  transition-duration:120ms!important;
  transition-delay:0ms!important;
 }
}

/* reply threads: Bernel and her client talking on a note */
.nt-thr{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-direction:column;gap:8px}
.nt-thr li{display:grid;grid-template-columns:22px 1fr;gap:8px;align-items:start}
.nt-thr .av{width:22px;height:22px;border-radius:50%;background:var(--c);color:var(--ink);display:grid;place-items:center;font:700 11px/1 Satoshi}
.nt-thr b{font:600 12.5px Satoshi;color:var(--ink);margin-right:6px}
.nt-thr span{font:500 11.5px Satoshi;color:var(--ink3)}
.nt-thr p{margin:2px 0 0;font:400 13px/1.45 Satoshi;color:var(--ink2);user-select:text}
.nt-rp{display:flex;align-items:center;gap:6px;margin-top:10px;background:#fff;border-radius:999px;padding:4px 4px 4px 12px;box-shadow:inset 0 0 0 1.5px rgba(25,23,22,.14);transition:box-shadow 140ms ease}
.nt-rp:focus-within{box-shadow:inset 0 0 0 1.5px var(--ink)}
.nt-rp input{flex:1;min-width:0;border:0;background:none;font:400 13px Satoshi;color:var(--ink);outline:none}
.nt-rp button{width:28px;height:28px;border-radius:50%;border:0;background:var(--ink);color:#fff;display:grid;place-items:center;cursor:pointer;transition:transform 140ms var(--ease-out)}
.nt-rp button:active{transform:scale(.94)}
.nt-rp button:focus-visible{outline:2px solid var(--ink);outline-offset:2px}

/* One colour control: a single button in the dock opens the swatches (replaces the strewn dots and the palette switch) */
.rv-pal-btn{gap:7px;padding:6px 9px 6px 7px;font:600 12px/1 Satoshi}
.rv-pal-btn .cb-dot{width:14px;height:14px;border-radius:50%;box-shadow:0 0 0 1.5px currentColor;display:inline-block}
.rv-pal-btn svg{transition:transform 160ms var(--ease-out)}
.rv-pal-btn[aria-expanded="true"] svg{transform:rotate(180deg)}
.rv-pal-pop{width:auto;padding:12px 14px;gap:10px;color:var(--ink)}
.rv-pal-pop .cp-h{font:600 12px/1 Satoshi;color:var(--ink2);margin:0}
.rv-pal-pop .rv-cols{gap:10px;padding:0}
.rv-pal-pop .rv-col-sw,.rv-pal-pop .rv-col-custom{width:24px;height:24px}
.rv-dock.invert .rv-pal-pop .rv-col-sw,.rv-dock.invert .rv-pal-pop .rv-col-custom{border-color:var(--ink)}
.rv-dock.invert .rv-pal-pop .rv-col-sw.on,.rv-dock.invert .rv-pal-pop .rv-col-custom.on{box-shadow:0 0 0 2px #FFFDF8,0 0 0 3.6px var(--ink)}

/* Notes stay calm: the note number keeps its markup colour (it links the card to its mark on the page); everything else is ink and neutral tint */
.nt.on{background:#fff;box-shadow:inset 0 0 0 1.5px var(--ink)}
@media (hover:hover) and (pointer:fine){.nt:not(.on):hover{background:#F2EEE6}}
.nt.on .ago{display:inline}
.st.open{background:#EFEAE0;color:var(--ink)}
.st.resolved{background:transparent;color:var(--ink3)}
.rv .vis.shared,.rv .vis.team{background:#EFEAE0;color:var(--ink2)}
.nt.on .st{margin-left:auto}

/* Colour = who is talking: a two-colour key replaces the colour picker */
.rv-key{display:inline-flex;align-items:center;gap:6px;padding:0 8px 0 4px;font:600 12px/1 Satoshi;color:inherit;white-space:nowrap}
.rv-key i{width:12px;height:12px;border-radius:50%;box-shadow:0 0 0 1.5px currentColor;display:inline-block}
.rv-key i+i,.rv-key i:nth-of-type(2){margin-left:8px}
.nt-thr .av{background:var(--c);color:#191716}
.nt-del{margin-left:auto;width:28px;height:28px;border-radius:50%;border:0;background:transparent;color:var(--ink2);display:grid;place-items:center;cursor:pointer;transition:background-color 140ms ease,color 140ms ease}
@media (hover:hover) and (pointer:fine){.nt-del:hover{background:#EFEAE0;color:var(--ink)}}
.nt-del:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.nt.on .nt-del+.st{margin-left:4px}
.rv-undo{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 0 10px;padding:10px 14px;border-radius:14px;background:var(--ink);color:var(--latte);font:500 13px Satoshi}
.rv-undo .lnk{color:var(--latte);font-weight:600;background:none;border:0;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.rv-dock.invert .rv-key{color:var(--latte)}

/* × on the selected mark: sits just above-right of its number, same counter-scale as the badge */
.mk-x{position:absolute;width:18px;height:18px;margin:-26px 0 0 6px;border-radius:50%;border:0;background:var(--ink);color:#FFFDF8;display:grid;place-items:center;cursor:pointer;z-index:6;
 scale:calc(1 / var(--s));transform-origin:-8px 30px;box-shadow:0 0 0 2px #FFFDF8,0 3px 8px rgba(25,23,22,.25);transition:transform 140ms var(--ease-out),background-color 140ms ease;animation:pinIn 180ms var(--ease-out)}
@media (hover:hover) and (pointer:fine){.mk-x:hover{background:#3a3533}}
.mk-x:active{transform:scale(.92)}
.mk-x:focus-visible{outline:2px solid var(--ink);outline-offset:2px}

/* ===== Quieter pass + editing (impeccable quieter/polish) ===== */
/* header: Send shrinks to its icon when the panel is narrow, never wraps */
.rv-n-exp{container-type:inline-size}
.rv-nh .btn2{white-space:nowrap}
@container (max-width:280px){.rv-nh .btn2.p span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}.rv-nh .btn2.p{padding:8px 10px}}
.rv-nh .btn2.sent{background:transparent;color:var(--ink2);box-shadow:inset 0 0 0 1.5px rgba(25,23,22,.14)}
.rv-send{margin-top:12px;padding:12px 14px;border-radius:16px;background:var(--paper);display:flex;flex-direction:column;gap:10px;font:500 13px/1.45 Satoshi;color:var(--ink)}
.rv-send div{display:flex;align-items:center;gap:12px}
.rv-send .lnk{border:0;background:none;font:500 13px Satoshi;color:var(--ink);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
/* tabs: three, quiet counts, fit any panel width */
.rv-tabs{gap:4px;background:var(--paper);border-radius:999px;padding:3px;width:max-content;max-width:100%}
.rv-tabs button{background:transparent;padding:6px 11px;gap:6px}
.rv-tabs button b{background:none;min-width:0;padding:0;height:auto;font:600 12px/1 Satoshi;color:inherit;opacity:.6}
.rv-tabs button.on b{background:none;color:inherit;opacity:.75}
/* undo: a calm line, spaced from the tabs */
.rv-undo{margin:12px 0 0;padding:9px 12px 9px 14px;background:var(--paper);color:var(--ink);font-size:12.5px}
.rv-undo .lnk{color:var(--ink)}
.rv-undo+.rv-list{margin-top:10px}
/* note cards: status as a quiet action, visibility only when it differs */
.st{background:transparent!important;color:var(--ink2)!important;padding:5px 8px;gap:5px;opacity:0;transition:opacity 140ms ease,background-color 140ms ease}
.st span{font:600 11.5px/1 Satoshi}
.nt:hover .st,.nt.on .st,.nt:focus-within .st,.st.resolved{opacity:1}
@media (hover:hover) and (pointer:fine){.st.open:hover{background:#EFEAE0!important;color:var(--ink)!important}}
.st.resolved{color:var(--ink3)!important}
.nt footer:has(.quiet){margin-top:8px}
.rv .vis.quiet{background:none;padding:0;color:var(--ink3);font:500 11.5px Satoshi;display:inline-flex;align-items:center;gap:4px}
.nt{padding:12px 14px}
/* dock: shortcuts live in tooltips, not chips */
.rv-dock button[data-tool] kbd{display:none}
/* editing handles on your own marks */
.mk-h{position:absolute;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;background:#FFFDF8;box-shadow:0 0 0 1.6px var(--ink),0 2px 5px rgba(25,23,22,.25);scale:calc(1 / var(--s));z-index:5;touch-action:none}
.mk-h.head,.mk-h.anchor{cursor:move}.mk-h.nw{cursor:nwse-resize}.mk-h.se{cursor:nwse-resize}
.mk-pin[data-id],.mk-sticky[data-id],.mk-badge[data-id]{touch-action:none}
.page.rv.mk-dragging,.page.rv.mk-dragging *{cursor:grabbing!important;user-select:none}
.page.rv.mk-dragging .mk-x{opacity:0}
@container (max-width:280px){.st span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}.st{padding:5px}}

/* ===== Round 3: rounds, status, assignee, context, pause, step-through ===== */
.rv-tabrow{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:14px}
.rv-tabrow .rv-tabs{margin-top:0}
.rv-nav{display:flex;align-items:center;gap:2px;font:600 12px/1 Satoshi;color:var(--ink2);white-space:nowrap}
.rv-nav span{min-width:44px;text-align:center;font-variant-numeric:tabular-nums}
.rv-nav button{width:26px;height:26px;border:0;border-radius:50%;background:none;color:var(--ink);display:grid;place-items:center;cursor:pointer;transition:background-color 140ms ease}
@media (hover:hover) and (pointer:fine){.rv-nav button:hover{background:var(--paper)}}
.rv-nav button:focus-visible{outline:2px solid var(--ink);outline-offset:1px}
@container (max-width:280px){.rv-nav span{min-width:0;font-size:11px}}
.rv-more-w{position:relative}
.rv-more{width:34px;height:34px;border:0;border-radius:50%;background:var(--paper);color:var(--ink);display:grid;place-items:center;cursor:pointer;transition:background-color 140ms ease}
@media (hover:hover) and (pointer:fine){.rv-more:hover{background:#EAE4D7}}
.rv-more:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.rv-menu{position:absolute;right:0;top:calc(100% + 8px);z-index:40;width:270px;padding:6px;background:#fff;border-radius:16px;box-shadow:0 2px 6px rgba(25,23,22,.08),0 16px 36px rgba(25,23,22,.16);display:flex;flex-direction:column;gap:2px}
.rv-menu button{border:0;background:none;text-align:left;padding:10px 12px;border-radius:12px;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:12px;color:var(--ink)}
.rv-menu button:hover,.rv-menu button:focus-visible{background:var(--paper);outline:none}
.rv-menu b{display:block;font:600 13px/1.3 Satoshi}.rv-menu small{display:block;font:500 12px/1.35 Satoshi;color:var(--ink2);margin-top:2px}
.rv-menu .sw{flex:none;width:32px;height:20px;border-radius:999px;background:rgba(25,23,22,.16);position:relative;transition:background-color 160ms ease}
.rv-menu .sw::after{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:#fff;transition:transform 180ms var(--ease-out)}
.rv-menu .sw.on{background:var(--ink)}.rv-menu .sw.on::after{transform:translateX(12px)}
.rv-paused{display:flex;align-items:center;gap:8px;margin-top:12px;padding:9px 12px;border-radius:14px;background:var(--paper);font:500 12.5px Satoshi;color:var(--ink)}
.rv-paused span{flex:1}
.rv-paused .lnk{border:0;background:none;font:600 12.5px Satoshi;color:var(--ink);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.nt-stw{font:600 11px Satoshi;color:var(--ink2);white-space:nowrap}
.nt-meta{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px}
.nt-meta label{display:flex;flex-direction:column;gap:4px;font:500 11.5px Satoshi;color:var(--ink2);min-width:0}
.nt-meta select{appearance:none;-webkit-appearance:none;border:0;border-radius:10px;background:var(--paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23191716' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 9px center;padding:7px 26px 7px 10px;font:500 12.5px Satoshi;color:var(--ink);cursor:pointer;min-width:0;text-overflow:ellipsis}
.nt-meta select:focus-visible{outline:2px solid var(--ink);outline-offset:1px}
.nt-ctx{grid-column:1/-1;display:flex;align-items:center;gap:6px;margin:2px 0 0;font:500 11.5px Satoshi;color:var(--ink3)}
.rv-round-w{position:relative;margin-left:auto}
.rv-round{border:0;background:none;padding:4px 6px;border-radius:8px;font:500 12px Satoshi;color:var(--ink3);display:inline-flex;align-items:center;gap:4px;cursor:pointer;white-space:nowrap;transition:background-color 140ms ease,color 140ms ease}
@media (hover:hover) and (pointer:fine){.rv-round:hover{background:var(--paper);color:var(--ink)}}
.rv-round:focus-visible{outline:2px solid var(--ink);outline-offset:1px}
.rv-rmenu{position:absolute;right:0;top:calc(100% + 6px);z-index:40;min-width:180px;padding:6px;background:#fff;border-radius:14px;box-shadow:0 2px 6px rgba(25,23,22,.08),0 16px 36px rgba(25,23,22,.16);display:flex;flex-direction:column}
.rv-rmenu button{border:0;background:none;text-align:left;padding:8px 10px;border-radius:10px;font:600 13px Satoshi;color:var(--ink);cursor:pointer;display:flex;justify-content:space-between;gap:12px}
.rv-rmenu button small{font:500 12px Satoshi;color:var(--ink2)}
.rv-rmenu button:hover,.rv-rmenu button[aria-checked="true"]{background:var(--paper)}
.rv-pz{font-style:normal;font:600 11.5px Satoshi;color:var(--ink);background:var(--paper);border-radius:999px;padding:3px 8px;margin-left:6px;white-space:nowrap}
.rv-urlm{display:contents}
.rv-url .rv-round-w,.rv-url .rv-urlm{overflow:visible}