/* System spaces (v0.8.3): Done and Trash. Each has its own physical atmosphere; both stay readable. */
.sysSpaces{ margin-top:10px; padding-top:8px; border-top:1px solid var(--line); }
.sysSpaces h3{ margin:0 0 4px; font-size:0.72rem; letter-spacing:0.08em; text-transform:uppercase; color:var(--ink-soft); }
.sysRow{ all:unset; box-sizing:border-box; width:100%; display:flex; align-items:center; gap:10px; padding:8px 6px; border-radius:8px; cursor:pointer; font:600 0.88rem 'Sora',sans-serif; color:var(--ink); }
.sysRow:hover, .sysRow:focus-visible{ background:var(--accent-soft); }
.sysRow:focus-visible{ outline:2px solid var(--focus); outline-offset:1px; }
.sysIco{ display:inline-flex; width:22px; height:22px; color:var(--accent-strong); } .sysIco svg{ width:22px; height:22px; }
.sysName{ flex:1; } .sysCount{ font-weight:600; font-size:0.78rem; color:var(--ink-soft); }
.sysCount::before{ content:"\00b7\00a0"; }

.spBackdrop{ position:fixed; inset:0; z-index:10045; display:flex; padding:max(10px, env(safe-area-inset-top)) 10px max(10px, env(safe-area-inset-bottom)); background:rgba(30,24,10,0.55); }
.spSheet{ position:relative; flex:1; display:flex; flex-direction:column; min-width:0; border-radius:16px; overflow:hidden; box-shadow:0 20px 60px rgba(0,0,0,0.4); outline:none; color:var(--sp-ink); background:var(--sp-bg); }
/* Done: a warm, bright desk with soft dots and a ribbon of tape */
.sp-done{ --sp-bg:#fff6dc; --sp-ink:#3b3320; --sp-soft:#6d6342; --sp-line:#ecd9a0; --sp-chip:#fffdf3; --sp-accent:#2f7d46; }
.sp-done .spSheet{ background-image:radial-gradient(circle, rgba(47,125,70,0.13) 1.4px, transparent 1.6px), linear-gradient(180deg, #fff9e6, #fff1c9); background-size:26px 26px, auto; }
.sp-done .spHead{ border-bottom:2px dashed rgba(47,125,70,0.35); }
.sp-done .spHead::after{ content:""; position:absolute; top:-8px; right:60px; width:90px; height:22px; background:rgba(255,226,120,0.8); transform:rotate(3deg); border:1px solid rgba(120,100,40,0.2); }
/* Trash: a rougher, greyer, crumpled place (muted, never unreadable) */
.sp-trash{ --sp-bg:#cfc9bf; --sp-ink:#2b2823; --sp-soft:#4f4a41; --sp-line:#a9a296; --sp-chip:#e6e1d6; --sp-accent:#8a3b2a; }
.sp-trash .spSheet{ background-image:repeating-linear-gradient(115deg, rgba(0,0,0,0.045) 0 2px, transparent 2px 9px), repeating-linear-gradient(35deg, rgba(255,255,255,0.14) 0 3px, transparent 3px 13px), linear-gradient(180deg, #d6d0c5, #bdb6a9); }
.sp-trash .spHead{ border-bottom:2px solid rgba(0,0,0,0.22); }
body.dark .sp-done{ --sp-bg:#2a2518; --sp-ink:#f1e8cf; --sp-soft:#c7bb97; --sp-line:#5a4f2b; --sp-chip:#332d1d; --sp-accent:#7fd196; }
body.dark .sp-done .spSheet{ background-image:radial-gradient(circle, rgba(127,209,150,0.12) 1.4px, transparent 1.6px), linear-gradient(180deg, #2d281a, #231f14); background-size:26px 26px, auto; }
body.dark .sp-trash{ --sp-bg:#262421; --sp-ink:#ece6da; --sp-soft:#b7b0a1; --sp-line:#4a463f; --sp-chip:#302d29; --sp-accent:#ff9a85; }
body.dark .sp-trash .spSheet{ background-image:repeating-linear-gradient(115deg, rgba(255,255,255,0.03) 0 2px, transparent 2px 9px), linear-gradient(180deg, #2b2926, #1f1d1a); }

.spHead{ position:relative; display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding:12px 16px; }
.spTitle{ display:flex; align-items:center; gap:8px; margin:0; font:700 1.2rem 'Sora',sans-serif; color:var(--sp-ink); }
.spIco{ display:inline-flex; color:var(--sp-accent); } .spCount{ font-weight:600; font-size:0.9rem; color:var(--sp-soft); }
.spSearch{ flex:1 1 160px; min-width:120px; max-width:280px; padding:8px 12px; border-radius:999px; border:1.5px solid var(--sp-line); background:var(--sp-chip); color:var(--sp-ink); font:0.9rem 'Sora',sans-serif; }
.spSearch:focus-visible{ outline:2px solid var(--focus); outline-offset:1px; }
.spFilters{ display:flex; gap:4px; flex-wrap:wrap; }
.spFilter{ min-height:36px; padding:4px 12px; border-radius:999px; border:1px solid var(--sp-line); background:transparent; color:var(--sp-ink); font:600 0.8rem 'Sora',sans-serif; cursor:pointer; }
.spFilter[aria-pressed="true"]{ background:var(--sp-ink); color:var(--sp-bg); border-color:var(--sp-ink); }
.spFilter:focus-visible, .spBtn:focus-visible, .spClose:focus-visible{ outline:2px solid var(--focus); outline-offset:2px; }
.spBulk{ display:flex; gap:6px; flex-wrap:wrap; margin-inline-start:auto; }
.spClose{ width:40px; height:40px; border-radius:50%; border:1px solid var(--sp-line); background:var(--sp-chip); color:var(--sp-ink); display:flex; align-items:center; justify-content:center; cursor:pointer; flex:none; }
.spClose svg{ width:18px; height:18px; }
.spBtn{ min-height:36px; padding:4px 12px; border-radius:9px; border:1px solid var(--sp-line); background:var(--sp-chip); color:var(--sp-ink); font:600 0.8rem 'Sora',sans-serif; cursor:pointer; }
.spBtn:hover{ border-color:var(--sp-accent); }
.spBtn.primary{ background:var(--btn-fill); border-color:var(--btn-fill); color:var(--btn-fg); } .spBtn.primary:hover{ background:var(--btn-fill-hover); border-color:var(--btn-fill-hover); }
.spBtn.danger{ color:var(--destructive); border-color:color-mix(in srgb, var(--destructive) 55%, transparent); } .spBtn.danger:hover{ background:var(--destructive-soft); }
.spCanvas{ flex:1; overflow:auto; display:flex; flex-wrap:wrap; align-content:flex-start; gap:28px 22px; padding:26px 22px 40px; }
.spNote{ margin:0; padding:0 22px 16px; text-align:center; color:var(--sp-soft); font-size:0.9rem; }
.spCard{ position:relative; width:min(270px, 100%); transform:rotate(var(--spr, 0deg)); }
.spPaper{ pointer-events:none; } .spStatic{ pointer-events:none; }
.sp-trash .spPaper{ filter:saturate(0.75) brightness(0.96); }
.spTick{ position:absolute; top:-10px; left:-8px; z-index:3; width:22px; height:22px; accent-color:var(--sp-accent); cursor:pointer; }
.spStamp{ position:absolute; top:8px; right:-10px; z-index:2; padding:2px 8px; border:2px solid var(--sp-accent); border-radius:5px; color:var(--sp-accent); background:color-mix(in srgb, var(--sp-chip) 78%, transparent); font:800 0.66rem 'Sora',sans-serif; letter-spacing:0.1em; transform:rotate(8deg); pointer-events:none; opacity:0.92; }
.spActs{ display:flex; gap:6px; flex-wrap:wrap; justify-content:center; margin-top:10px; }
.spFallback{ padding:14px; background:var(--sp-chip); border-radius:6px; overflow-wrap:anywhere; }
@media (max-width:600px){ .spBackdrop{ padding:0; } .spSheet{ border-radius:0; } .spHead{ padding:10px; gap:6px; } .spCanvas{ gap:22px 12px; padding:20px 12px 40px; justify-content:center; } .spBtn, .spFilter{ min-height:44px; } .spTick{ width:28px; height:28px; } }
@media (prefers-reduced-motion: reduce){ .spCard{ transition:none; } }

/* the completion moment */
.doneBit{ position:fixed; z-index:10030; width:8px; height:11px; border-radius:1px; pointer-events:none; transform:translate(-50%,-50%); animation:doneBit .46s cubic-bezier(.2,.8,.4,1) forwards; }
@keyframes doneBit{ 0%{ opacity:1; transform:translate(-50%,-50%) rotate(0deg) scale(.6); } 100%{ opacity:0; transform:translate(calc(-50% + var(--dx)), calc(-50% + var(--dy) + 26px)) rotate(var(--dr)) scale(1); } }
.doneStampFx{ position:fixed; z-index:10031; pointer-events:none; padding:2px 14px; border:3px solid #2f7d46; border-radius:6px; color:#2f7d46; font:800 1.5rem 'Sora',sans-serif; letter-spacing:0.14em; background:rgba(255,253,243,0.65); transform:translate(-50%,-50%) rotate(-8deg); animation:doneStamp .46s ease-out forwards; }
@keyframes doneStamp{ 0%{ opacity:0; transform:translate(-50%,-50%) rotate(-8deg) scale(1.8); } 35%{ opacity:1; transform:translate(-50%,-50%) rotate(-8deg) scale(1); } 100%{ opacity:0; transform:translate(-50%,-50%) rotate(-8deg) scale(0.95); } }
@media (prefers-reduced-motion: reduce){ .doneBit, .doneStampFx{ display:none; } }
html[data-a11y-motion="reduce"] .doneBit, html[data-a11y-motion="reduce"] .doneStampFx{ display:none; }

/* ---- reactions: nothing on an object until it has one; a small button only while it is selected ---- */
.reactChips{ position:absolute; left:6px; bottom:-15px; z-index:6; display:flex; gap:4px; flex-wrap:wrap; max-width:calc(100% - 12px); }
.reactChip{ display:inline-flex; align-items:center; gap:3px; min-height:26px; padding:1px 8px; border-radius:999px; border:1px solid var(--line); background:var(--panel); color:var(--ink); font:600 0.74rem 'Sora',sans-serif; cursor:pointer; box-shadow:0 1px 3px var(--shadow); }
.reactChip.mine{ border-color:var(--accent); background:var(--accent-soft); }
.reactChip:hover{ border-color:var(--accent); } .reactChip:focus-visible{ outline:2px solid var(--focus); outline-offset:2px; }
.reactAdd{ position:absolute; right:12px; bottom:-15px; z-index:6; min-height:26px; padding:0 9px; border-radius:999px; border:1px solid var(--line); background:var(--panel); color:var(--ink-soft); font:600 0.76rem 'Sora',sans-serif; cursor:pointer; box-shadow:0 1px 3px var(--shadow); }
.reactAdd:hover, .reactAdd:focus-visible{ color:var(--ink); border-color:var(--accent); } .reactAdd:focus-visible{ outline:2px solid var(--focus); outline-offset:2px; }
.floatPop.reactPop{ display:flex; gap:4px; padding:6px; }
.reactPick{ width:44px; height:44px; border-radius:10px; border:1px solid transparent; background:transparent; font-size:1.35rem; cursor:pointer; }
.reactPick:hover, .reactPick:focus-visible{ background:var(--accent-soft); border-color:var(--accent); } .reactPick.on{ background:var(--accent-soft); }
body.multi-sel .reactAdd, body.read-only .reactAdd{ display:none; }
@media (pointer:coarse){ .reactAdd, .reactChip{ min-height:34px; } }

/* ---- search: result count, next / previous, scope ---- */
.searchWrap input{ padding-right:12px; }
.searchWrap:has(.searchNav:not([hidden])) input{ padding-right:210px; }
.searchNav{ position:absolute; right:6px; top:50%; transform:translateY(-50%); display:flex; align-items:center; gap:2px; font:600 0.74rem 'Sora',sans-serif; color:var(--ink-soft); }
.searchNav[hidden]{ display:none; }
.searchCount{ padding:0 6px; white-space:nowrap; }
.searchStep{ width:28px; height:28px; border-radius:50%; border:0; background:transparent; color:var(--ink); font:700 0.95rem 'Sora',sans-serif; cursor:pointer; }
.searchStep:hover, .searchStep:focus-visible{ background:var(--accent-soft); } .searchStep:focus-visible{ outline:2px solid var(--focus); outline-offset:1px; }
.searchScope{ border:1px solid var(--line); border-radius:999px; background:var(--panel); color:var(--ink); font:600 0.72rem 'Sora',sans-serif; padding:3px 6px; }
@media (max-width:600px){ .searchStep{ width:36px; height:36px; } .searchNav{ right:2px; } body.searchOpen .searchWrap:has(.searchNav:not([hidden])) input{ padding-right:196px; } }
.searchFocus{ animation:searchPulse 1.4s ease-out 1; }
@keyframes searchPulse{ 0%{ box-shadow:0 0 0 0 rgba(224,160,0,0.9); } 40%{ box-shadow:0 0 0 14px rgba(224,160,0,0.35); } 100%{ box-shadow:0 0 0 0 rgba(224,160,0,0); } }
@media (prefers-reduced-motion: reduce){ .searchFocus{ animation:none; outline:3px solid #e0a000; outline-offset:4px; } }

/* ---- newspaper and clipping scraps (v0.8.3): plain text only; no remote fonts (all self-hosted) ---- */
.po-newspaper{ --np-paper:#efe9d8; --np-ink:#26231c; --np-rule:#26231c; --np-head:'Frank Ruhl Libre','David Libre',serif; --np-body:'Frank Ruhl Libre','David Libre',Georgia,serif; --np-mast:'Frank Ruhl Libre',serif; }
.po-newspaper .poSheet{ background:var(--np-paper); color:var(--np-ink); padding:10px 14px 14px; border-radius:1px; box-shadow:0 1px 2px rgba(60,45,10,0.3), 0 8px 18px rgba(60,45,10,0.14); background-image:linear-gradient(180deg, rgba(255,255,255,0.35), rgba(0,0,0,0.04)); }
.po-newspaper .npMast{ font:900 0.74rem var(--np-mast); letter-spacing:0.16em; text-align:center; text-transform:uppercase; padding-bottom:3px; }
.po-newspaper .poRule{ height:0; border-top:3px double var(--np-rule); margin:2px 0 6px; } .po-newspaper .poRule.thin{ border-top:1px solid var(--np-rule); margin:6px 0; }
.po-newspaper .npHead{ font:900 1.5rem/1.08 var(--np-head); margin:4px 0 3px; overflow-wrap:anywhere; }
.po-newspaper .npSub{ font:italic 600 0.82rem/1.25 var(--np-body); opacity:0.85; }
.po-newspaper .npBody{ font:0.8rem/1.38 var(--np-body); column-width:118px; column-gap:12px; column-rule:1px solid rgba(38,35,28,0.25); text-align:justify; hyphens:auto; overflow-wrap:anywhere; min-height:3em; }
.po-newspaper .npBody:not(:empty)::first-letter{ font-weight:900; font-size:1.5em; line-height:1; }
.po-newspaper.v-tabloid{ --np-paper:#f6efe2; --np-head:'Suez One','Frank Ruhl Libre',serif; } .po-newspaper.v-tabloid .npMast{ background:#b3261e; color:#fff; padding:3px 6px; letter-spacing:0.1em; } .po-newspaper.v-tabloid .npHead{ font-weight:400; font-size:1.7rem; }
.po-newspaper.v-gazette{ --np-paper:#f1e7cf; --np-head:'Bellefair','Frank Ruhl Libre',serif; } .po-newspaper.v-gazette .npHead{ font-weight:400; font-size:1.7rem; text-align:center; } .po-newspaper.v-gazette .npSub{ text-align:center; }
.po-newspaper.v-evening{ --np-paper:#f3dfd3; --np-head:'David Libre','Frank Ruhl Libre',serif; --np-rule:#5a2f22; } .po-newspaper.v-evening .npMast{ color:#7a2e1c; }
.po-newspaper.v-telegraph{ --np-paper:#ece4cb; --np-head:'Special Elite','Courier Prime',monospace; --np-body:'Special Elite','Courier Prime',monospace; } .po-newspaper.v-telegraph .npHead{ font-weight:400; font-size:1.25rem; text-transform:uppercase; } .po-newspaper.v-telegraph .npBody{ font-size:0.74rem; text-align:start; }
.po-newspaper.v-courier{ --np-paper:#f5f1e6; --np-head:'Courier Prime','Cutive Mono',monospace; --np-body:'Courier Prime','Cutive Mono',monospace; } .po-newspaper.v-courier .npHead{ font-weight:700; font-size:1.3rem; } .po-newspaper.v-courier .npBody{ font-size:0.74rem; text-align:start; column-width:140px; }
.po-newspaper.v-herald{ --np-paper:#e9e6dc; --np-head:'Frank Ruhl Libre',serif; } .po-newspaper.v-herald .npHead{ font-style:italic; font-weight:700; } .po-newspaper.v-herald .poRule{ border-top-style:solid; border-top-width:2px; }
.po-newspaper.v-modern{ --np-paper:#f7f6f1; --np-head:'Heebo','Sora',sans-serif; --np-body:'Heebo','Sora',sans-serif; --np-mast:'Sora',sans-serif; } .po-newspaper.v-modern .npHead{ font-weight:800; letter-spacing:-0.01em; } .po-newspaper.v-modern .npBody{ text-align:start; font-size:0.78rem; } .po-newspaper.v-modern .poRule{ border-top:2px solid var(--np-rule); }
.po-newspaper [dir="rtl"], .po-newspaper .poF:lang(he){ text-align:start; }
body.dark .po-newspaper{ filter:brightness(0.9); }
.po-newspaper .poF.empty::before, .po-newspaper .poF:empty::before{ opacity:0.45; }

.po-clipping .poSheet{ position:relative; padding:14px 16px 12px 20px; background:#f1e6c4; color:#2b271c; clip-path:polygon(0 3%, 4% 0, 10% 2%, 18% 0, 27% 2%, 36% 0, 47% 2%, 58% 0, 68% 2%, 79% 0, 90% 2%, 100% 0, 99% 22%, 100% 44%, 98% 66%, 100% 88%, 99% 100%, 90% 98%, 80% 100%, 70% 98%, 58% 100%, 46% 98%, 36% 100%, 24% 98%, 12% 100%, 4% 98%, 0 100%, 1% 74%, 0 52%, 2% 30%); filter:drop-shadow(0 1px 1px rgba(60,45,10,0.45)) drop-shadow(0 4px 6px rgba(60,45,10,0.22)); }
.po-clipping.v-newspaper .poSheet{ background:#ece6d3; font-family:'Frank Ruhl Libre','David Libre',serif; } .po-clipping.v-book .poSheet{ background:#f4ead2; font-family:'Bellefair','Frank Ruhl Libre',serif; background-image:repeating-linear-gradient(180deg, transparent 0 21px, rgba(120,90,40,0.12) 21px 22px); }
.po-clipping .clQuoteMark{ position:absolute; left:6px; top:-4px; font:900 3rem/1 'Frank Ruhl Libre',serif; color:rgba(160,100,40,0.45); pointer-events:none; }
.po-clipping .clQuote{ font:0.95rem/1.45 'Frank Ruhl Libre','David Libre',Georgia,serif; padding-top:10px; overflow-wrap:anywhere; white-space:pre-wrap; min-height:3em; }
.po-clipping .clFoot{ margin-top:10px; padding-top:8px; border-top:1px dashed rgba(60,45,10,0.35); }
.po-clipping .clSrc{ display:flex; align-items:center; gap:8px; }
.po-clipping .clMark{ flex:none; width:24px; height:24px; border-radius:50%; color:#fff; font:700 0.78rem/24px 'Sora',sans-serif; text-align:center; }
.po-clipping .clMeta{ min-width:0; display:flex; flex-direction:column; }
.po-clipping .clTitle{ font:600 0.76rem/1.25 'Sora',sans-serif; overflow-wrap:anywhere; }
.po-clipping .clDomain{ font:0.7rem 'Sora',sans-serif; color:#6b5d3a; text-decoration:underline; text-underline-offset:2px; overflow-wrap:anywhere; cursor:pointer; } .po-clipping .clDomain.none{ text-decoration:none; opacity:0.6; cursor:default; }
.po-clipping .clDomain:focus-visible{ outline:2px solid var(--focus); outline-offset:2px; }
body.dark .po-clipping .poSheet{ filter:drop-shadow(0 2px 3px rgba(0,0,0,0.6)) brightness(0.88); }
@media print{ body:not(.printing) .po-clipping .poSheet{ clip-path:none; } }

/* ---- shopping list: the Comment tab is placed from the PAPER's own edge (js: placeShopTab), never from the node box that also holds the cart ---- */
.shopObj > .cmtTab{ z-index:0; left:22px; bottom:auto; transform:rotate(-1deg); border-radius:0 0 7px 7px; }

/* ---- pile browser, phase 2: tools, reorder, fan ---- */
.pbTools{ display:flex; gap:6px; flex-wrap:wrap; justify-content:center; }
.pbTool{ min-height:40px; padding:6px 12px; border-radius:10px; border:1px solid var(--field-line); background:var(--field); color:var(--ink); font:600 0.8rem 'Sora',sans-serif; cursor:pointer; }
.pbTool:hover:not(:disabled){ border-color:var(--accent); background:var(--accent-soft); } .pbTool:disabled{ opacity:0.45; cursor:default; } .pbTool[hidden]{ display:none; }
.pbTool:focus-visible{ outline:2px solid var(--focus); outline-offset:2px; }
.pbTool[aria-pressed="true"]{ background:var(--ink); color:var(--paper); }
.pbCard:has(.pbStage.fan){ width:min(900px, 100%); }
.pbStage.fan{ max-height:min(70vh, 560px); overflow:hidden; justify-content:center; align-items:center; min-height:300px; }
.pbFan{ position:relative; width:100%; height:300px; }
.pbFanCard{ position:absolute; left:50%; top:50%; width:150px; transform-origin:50% 120%; transform:translate(calc(-50% + var(--fo) * 62px), -50%) rotate(calc(var(--fo) * 6deg)) scale(0.62); cursor:pointer; transition:transform .22s ease; z-index:calc(20 - var(--fo)); }
.pbFanCard.current{ transform:translate(-50%, -54%) scale(0.9); z-index:40; box-shadow:0 8px 24px rgba(0,0,0,0.3); }
.pbFanCard .pbPaper{ pointer-events:none; }
@media (prefers-reduced-motion: reduce){ .pbFanCard{ transition:none; } }

/* ---- account photo: pencil on the picture, camera preview ---- */
.asPicEdit{ position:absolute; right:-2px; bottom:-2px; z-index:3; width:30px; height:30px; border-radius:50%; border:2px solid var(--panel); background:var(--accent-strong); color:var(--on-accent); display:flex; align-items:center; justify-content:center; cursor:pointer; box-shadow:0 1px 4px var(--shadow); opacity:0.95; }
.asPicEdit:hover, .asPicEdit:focus-visible{ background:var(--btn-fill-hover); opacity:1; } .asPicEdit:focus-visible{ outline:2px solid var(--focus); outline-offset:2px; }
@media (hover:hover){ .avCrownWrap .asPicEdit{ opacity:0; } .avCrownWrap:hover .asPicEdit, .avCrownWrap:focus-within .asPicEdit{ opacity:1; } }
.camWrap{ text-align:center; } .camVideo{ width:100%; max-height:46vh; border-radius:12px; background:#111; object-fit:cover; transform:scaleX(-1); }

/* ---- links and media: pointer cursor on links; "remove the image" does not look like "delete the note" ---- */
.note .text a[href], .note .caption a[href], .po-clipping a, .linkCard{ cursor:pointer; }
.linkCard .fav .clMark{ width:28px; height:28px; border-radius:50%; color:#fff; font:700 0.9rem/28px 'Sora',sans-serif; text-align:center; }
.noteImgWrap .rmImg{ top:auto; right:auto; left:6px; bottom:6px; width:auto; min-width:24px; height:24px; padding:0 6px; border-radius:7px; background:rgba(30,26,18,0.72); gap:5px; }
.noteImgWrap .rmImg svg{ width:14px; height:14px; }
.noteImgWrap .rmImg::after{ content:"Remove image"; display:none; font:600 0.68rem 'Sora',sans-serif; white-space:nowrap; }
.noteImgWrap .rmImg:hover::after, .noteImgWrap .rmImg:focus-visible::after{ display:inline; }
.noteImgWrap .rmImg:hover, .noteImgWrap .rmImg:focus-visible{ background:#6a4a10; outline:none; }
.noteImgWrap .rmImg:focus-visible{ box-shadow:0 0 0 2px #fff, 0 0 0 4px var(--focus); }

/* ---- video: Stick-It controls appear on interaction, over the bottom edge of the frame ---- */
.embedObj .embCtl{ position:absolute; right:6px; top:6px; z-index:3; display:flex; gap:4px; opacity:0; transition:opacity .15s ease; }
.embedObj:hover .embCtl, .embedObj:focus-within .embCtl, .embedObj.selected .embCtl{ opacity:1; }
.embedObj .embCtl button{ min-height:26px; padding:0 9px; border-radius:7px; border:0; background:rgba(20,16,10,0.72); color:#fff; font:600 0.68rem 'Sora',sans-serif; cursor:pointer; }
.embedObj .embCtl button:hover, .embedObj .embCtl button:focus-visible{ background:#6a4a10; } .embedObj .embCtl button:focus-visible{ outline:2px solid #fff; outline-offset:1px; }
@media (hover:none){ .embedObj .embCtl{ opacity:1; } }

/* ======================================================================================================================
   v0.8.3.1 Finish the Edges
   ====================================================================================================================== */
/* ---- Done and Trash: quiet background motifs (decoration only: no pointer events, no animation, 2-4% ink) ---- */
.spDeco{ position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:0; }
.spDeco svg{ position:absolute; width:var(--w, 70px); height:var(--w, 70px); left:var(--x); top:var(--y); transform:rotate(var(--r, 0deg)); color:var(--sp-ink); opacity:calc(var(--o, 0.04) * 1.35); }
.sp-done .spDeco svg{ color:var(--sp-accent); }
.spSheet > .spHead, .spSheet > .spCanvas, .spSheet > .spNote{ position:relative; z-index:1; }
.sp-done .spSheet{ background-image:radial-gradient(ellipse at 18% 12%, rgba(255,255,255,0.55), transparent 55%), radial-gradient(circle, rgba(47,125,70,0.11) 1.4px, transparent 1.6px), linear-gradient(180deg, #fffae8, #fff0c4); background-size:auto, 26px 26px, auto; }
body.dark .sp-done .spSheet{ background-image:radial-gradient(ellipse at 18% 12%, rgba(255,235,170,0.07), transparent 55%), radial-gradient(circle, rgba(127,209,150,0.12) 1.4px, transparent 1.6px), linear-gradient(180deg, #2f2a1a, #242015); background-size:auto, 26px 26px, auto; }
body.dark .sp-done .spDeco svg{ opacity:var(--od, 0.07); } body.dark .sp-trash .spDeco svg{ opacity:var(--od, 0.07); }
@media print{ .spDeco{ display:none; } }

/* ---- clippings: the source line ---- */
.po-clipping .clMark{ position:relative; overflow:hidden; display:inline-block; }
.po-clipping .clMark .clIcon{ position:absolute; inset:2px; width:20px; height:20px; border-radius:50%; background:#fff; object-fit:contain; }
.po-clipping .clMark.known{ box-shadow:0 0 0 1.5px rgba(255,255,255,0.65), 0 0 0 2.5px rgba(60,45,10,0.18); }
.po-clipping button.clDomain.none{ all:unset; box-sizing:border-box; cursor:pointer; font:0.7rem 'Sora',sans-serif; color:#6b5d3a; opacity:0.85; text-decoration:underline dotted; text-underline-offset:3px; padding:2px 4px; margin:-2px -4px; border-radius:5px; }
.po-clipping button.clDomain.none:hover, .po-clipping button.clDomain.none:focus-visible{ opacity:1; background:rgba(160,100,40,0.14); color:#4a3a14; text-decoration:underline solid; }
.po-clipping button.clDomain.none:focus-visible{ outline:2px solid var(--focus); outline-offset:1px; }
.po-clipping button.clDomain.none:active{ background:rgba(160,100,40,0.26); }
body.dark .po-clipping button.clDomain.none{ color:#d9c892; } body.dark .po-clipping button.clDomain.none:hover{ background:rgba(255,220,140,0.16); color:#f2e6c0; }
@media (pointer:coarse){ .po-clipping button.clDomain.none{ min-height:36px; display:inline-flex; align-items:center; padding:4px 8px; margin:-4px -8px; } }

/* ---- rows (settings, system, links): one hover / focus / pressed model: a warm tint, no underline, the arrow leans in ---- */
.asAction.ccLink, .sysRow{ border-radius:10px; transition:background-color .12s ease; }
.asAction.ccLink:hover, .asAction.ccLink:focus-visible, .sysRow:hover, .sysRow:focus-visible{ background-color:color-mix(in srgb, var(--accent-soft) 70%, transparent); }
.asAction.ccLink:hover .lbl, .asAction.ccLink:focus-visible .lbl{ text-decoration:none; }
.asAction.ccLink:hover .go, .asAction.ccLink:focus-visible .go{ color:var(--ink); transform:translateX(2px); }
html[dir="rtl"] .asAction.ccLink:hover .go, [dir="rtl"] .asAction.ccLink:hover .go{ transform:translateX(-2px); }
.asAction.ccLink .go{ transition:transform .12s ease, color .12s ease; }
.asAction.ccLink:focus-visible, .sysRow:focus-visible{ outline:2px solid var(--focus); outline-offset:-2px; }
.asAction.ccLink:active, .sysRow:active{ background-color:color-mix(in srgb, var(--accent-soft) 100%, var(--accent) 12%); }
body.dark .asAction.ccLink:hover, body.dark .asAction.ccLink:focus-visible, body.dark .sysRow:hover, body.dark .sysRow:focus-visible{ background-color:rgba(255,180,84,0.12); }
body.dark .asAction.ccLink:active, body.dark .sysRow:active{ background-color:rgba(255,180,84,0.2); }
@media (hover:none){ .asAction.ccLink:hover{ background-color:transparent; } .asAction.ccLink:active{ background-color:color-mix(in srgb, var(--accent-soft) 100%, var(--accent) 12%); } }
@media (prefers-reduced-motion: reduce){ .asAction.ccLink, .asAction.ccLink .go, .sysRow{ transition:none; } .asAction.ccLink:hover .go{ transform:none; } }
/* v0.8.3.2: a stronger Done moment (a ring, more confetti; all within 700 ms) */
.doneRingFx{ position:fixed; z-index:10029; width:30px; height:30px; margin:-15px 0 0 -15px; border-radius:50%; border:3px solid #7fcf8f; pointer-events:none; animation:doneRing .62s ease-out forwards; }
@keyframes doneRing{ 0%{ opacity:.9; transform:scale(.3); } 100%{ opacity:0; transform:scale(4.2); } }
@media (prefers-reduced-motion: reduce){ .doneRingFx{ display:none; } }
html[data-a11y-motion="reduce"] .doneRingFx{ display:none; }
/* paste chooser */
.pasteAsDlg .pasteSnip{ max-height:5.6em; overflow:hidden; padding:8px 10px; border-radius:8px; background:color-mix(in srgb, var(--paper, #fff8c4) 70%, transparent); border:1px solid rgba(0,0,0,0.12); font-size:0.85rem; line-height:1.4; overflow-wrap:anywhere; white-space:pre-wrap; }
.pasteAsDlg .pasteRem{ display:flex; align-items:center; gap:8px; margin-top:12px; min-height:36px; font-size:0.88rem; cursor:pointer; }
/* v0.8.3.2: reactions: the quick six, and "+" for a broader set */
.reactPop{ max-width:min(320px, calc(100vw - 24px)); }
.reactQuick{ display:flex; flex-wrap:wrap; gap:2px; }
.reactPlus{ font:600 1.3rem 'Sora',sans-serif; color:var(--ink-soft); border-color:var(--line); }
.reactMore{ margin-top:6px; padding-top:6px; border-top:1px solid var(--line); max-height:min(260px, 40vh); overflow:auto; overscroll-behavior:contain; }
.reactGroup{ font:700 0.68rem 'Sora',sans-serif; color:var(--ink-soft); text-transform:uppercase; letter-spacing:0.06em; margin:4px 4px 2px; }
.reactGrid{ display:flex; flex-wrap:wrap; gap:2px; }
.reactChip, .reactPick{ font-family:'Apple Color Emoji','Segoe UI Emoji','Noto Color Emoji',sans-serif; }
.reactPlus{ font-family:'Sora',sans-serif; }
.floatPop.reactPop{ flex-direction:column; gap:0; }
/* v0.8.3.2: zones as containers: count, minimize / restore, who belongs */
.zoneCount{ flex:none; font:600 0.7rem 'Sora',sans-serif; color:#33301f; opacity:0.7; padding:0 4px; white-space:nowrap; margin-inline-start:auto; }
.zoneCount:empty{ display:none; }
.zoneBar{ min-height:32px; }
.zoneMin{ pointer-events:auto; flex:none; width:28px; height:28px; border:0; border-radius:6px; background:transparent; color:#33301f; display:flex; align-items:center; justify-content:center; cursor:pointer; opacity:0.55; font-size:1.1rem; line-height:1; }
.zoneMin svg{ width:16px; height:16px; }
.zone:hover .zoneMin, .zone.selected .zoneMin, .zoneMin:focus-visible{ opacity:1; }
.zoneMin:focus-visible, .zoneMore:focus-visible{ outline:2px solid var(--focus, #8f5710); outline-offset:1px; }
@media (pointer:coarse){ .zoneMin, .zoneMore{ width:40px; height:40px; opacity:1; } .zoneBar{ min-height:44px; } }
.zone.zoneMinimized{ height:auto !important; min-height:0; }
.zone.zoneMinimized .zoneHandle{ display:none; }
.zone.zoneMinimized .zoneBar{ border-bottom:0; border-radius:4px; }
.zone.zoneMinimized .zoneTitle{ font-weight:700; }
.zone.zoneOwns{ box-shadow:0 0 0 2px color-mix(in srgb, var(--accent, #8a4f0d) 70%, transparent); }
.note.zoneMember, .paperObj.zoneMember, .zoneMember{ outline:2px dashed color-mix(in srgb, var(--accent, #8a4f0d) 65%, transparent); outline-offset:3px; }
/* v0.8.3.2: an optional picture on a Newspaper. Black & white / halftone are print treatments only; the image itself is never changed. */
.npFig{ position:relative; margin:6px 0 4px; overflow:hidden; background:#e9e4d3; border:1px solid rgba(0,0,0,0.25); }
.npFig img{ display:block; width:100%; height:100%; object-fit:cover; pointer-events:none; user-select:none; }
.npFig.bw img{ filter:grayscale(1) contrast(1.18) brightness(1.03); }
.npFig.ht::after{ content:""; position:absolute; inset:0; pointer-events:none; background:radial-gradient(circle at 50% 50%, #000 0 34%, transparent 38%) 0 0 / 3px 3px; mix-blend-mode:multiply; opacity:0.38; }
.npFig.ht img{ filter:grayscale(1) contrast(1.5) brightness(1.12); }
.npFig.ht.color img{ filter:contrast(1.25) brightness(1.08) saturate(0.9); }
.npFig.pending{ min-height:60px; background:repeating-linear-gradient(45deg, #e9e4d3 0 8px, #dfd9c4 8px 16px); }
/* v0.8.3.2: piles feel like paper: paper-tab controls, a kind tab on top, a row of index tabs along the bottom */
.pileObj .pileNav{ width:26px; height:52px; border-radius:2px 10px 10px 2px; background:#f4ecd6; color:#4a3a00; box-shadow:1px 1px 3px rgba(60,45,10,0.35); border:1px solid rgba(60,45,10,0.2); font-size:22px; }
.pileObj .pilePrev{ left:-22px; border-radius:10px 2px 2px 10px; } .pileObj .pileNext{ right:-22px; }
.pileObj .pileNav:hover, .pileObj .pileNav:focus-visible{ background:#ffe58a; color:#33301f; }
body.dark .pileObj .pileNav{ background:#4a4228; color:#f2eadb; border-color:rgba(255,255,255,0.15); } body.dark .pileObj .pileNav:hover{ background:#6a5c30; }
.pileObj .pileKind{ position:absolute; left:14px; top:-15px; z-index:1; padding:2px 10px 3px; border-radius:6px 6px 0 0; background:#f4ecd6; color:#4a3a00; font:700 0.64rem 'Sora',sans-serif; letter-spacing:0.05em; text-transform:uppercase; box-shadow:0 -1px 2px rgba(60,45,10,0.2); pointer-events:none; }
body.dark .pileObj .pileKind{ background:#4a4228; color:#f2eadb; }
.pileObj .pileTabs{ position:absolute; left:10px; right:46px; bottom:-17px; z-index:1; display:flex; gap:3px; justify-content:flex-start; opacity:0; transition:opacity .12s ease; }
.pileObj:hover .pileTabs, .pileObj.selected .pileTabs, .pileObj:focus-within .pileTabs{ opacity:1; }
.pileObj .pileTab{ min-width:22px; height:18px; padding:0 4px; border:1px solid rgba(60,45,10,0.25); border-top:0; border-radius:0 0 6px 6px; background:var(--tab, #f4ecd6); color:#4a3a00; font:600 0.62rem 'Sora',sans-serif; cursor:pointer; box-shadow:0 1px 2px rgba(60,45,10,0.25); }
.pileObj .pileTab.on{ height:24px; background:#ffe58a; font-weight:800; }
.pileObj .pileTab:focus-visible{ outline:2px solid var(--focus, #8f5710); outline-offset:1px; }
@media (hover:none){ .pileObj .pileTabs{ display:none; } }              /* touch: a tap opens the pile and shows one paper at a time */
body.multi-sel .pileObj .pileTabs, .pileObj.static .pileTabs{ display:none; }

/* ===== v0.8.3.3 Sand the Edges ===== */
/* [hidden] must win over component display rules: a guest was seeing the header Sign out button because .gearBtn's display overrode it */
#quickSignOut[hidden], .gearBtn[hidden]{ display:none !important; }
/* --- zones (v0.8.3.3) --- */
/* the zone paper stays at the back (it has no z-index, so it is not a stacking context); only its title rail rises above the objects on it */
.zone{ z-index:auto; }
.zone .zoneBar{ position:relative; z-index:9999; }
.zone.new{ z-index:0; }
.zoneBar{ gap:8px; }
.zoneTitle{ flex:0 1 auto; max-width:calc(100% - 150px); font-size:1.15rem; line-height:1.2; font-weight:400; letter-spacing:0.01em; cursor:default; align-self:center; }
.zoneTitle.editable{ cursor:text; }
.zoneTitle:empty::before{ font-weight:400; }
.zoneBar::after{ content:""; flex:1 1 0; order:1; }                 /* the rest of the rail is the drag handle */
.zoneTitle{ order:0; } .zoneCount{ order:2; } .zoneMin{ order:3; } .zoneMore{ order:4; }
.zoneCount{ margin-inline-start:0; padding:2px 9px; border:1px solid rgba(0,0,0,0.18); border-radius:999px; background:rgba(255,255,255,0.55); color:#33301f; font:500 0.74rem 'Sora',sans-serif; opacity:1; cursor:pointer; pointer-events:auto; min-height:26px; display:inline-flex; align-items:center; gap:4px; }
.zoneCount b{ font-weight:800; font-size:0.9rem; }
.zoneCount:hover, .zoneCount:focus-visible{ background:#fff; border-color:var(--accent, #8a4f0d); }
.zoneCount:focus-visible{ outline:2px solid var(--focus, #8f5710); outline-offset:1px; }
.zone.mat-felt .zoneCount{ color:#33301f; }
@media (pointer:coarse){ .zoneCount{ min-height:40px; padding:4px 14px; } }
/* a whisper of life: while the pointer is on a zone its edge lifts a hair and the paper "breathes" once. Static with reduced motion and on touch. */
@media (hover:hover) and (prefers-reduced-motion: no-preference){
  .zone:not(.zoneMinimized):hover{ box-shadow:0 2px 6px rgba(60,45,10,0.18); animation:zoneBreath 2.8s ease-in-out infinite; }
  @keyframes zoneBreath{ 0%,100%{ box-shadow:0 1px 3px rgba(60,45,10,0.14); } 50%{ box-shadow:0 3px 9px rgba(60,45,10,0.22); } }
}
html[data-a11y-motion="reduce"] .zone:hover{ animation:none !important; }
/* the zone menu */
.zoneMenuPop{ min-width:210px; }
.menuToggle{ display:flex !important; align-items:center; justify-content:space-between; gap:14px; white-space:nowrap; width:100%; }
.menuToggle .mtLabel{ flex:1; text-align:start; white-space:nowrap; }
.mtSwitch{ flex:none; position:relative; width:34px; height:20px; border-radius:999px; background:rgba(0,0,0,0.22); transition:background .15s ease; }
.mtSwitch::after{ content:""; position:absolute; top:2px; left:2px; width:16px; height:16px; border-radius:50%; background:#fff; box-shadow:0 1px 2px rgba(0,0,0,0.35); transition:transform .15s ease; }
.mtSwitch.on{ background:var(--accent-strong, #8a4f0d); } .mtSwitch.on::after{ transform:translateX(14px); }
[dir="rtl"] .mtSwitch::after{ left:auto; right:2px; } [dir="rtl"] .mtSwitch.on::after{ transform:translateX(-14px); }
@media (prefers-reduced-motion: reduce){ .mtSwitch, .mtSwitch::after{ transition:none; } }
.zoneMatSw{ flex:none; margin-inline-start:auto; width:34px; height:18px; border-radius:4px; border:1px solid rgba(0,0,0,0.25); display:inline-block; background:color-mix(in srgb, var(--zone, #fff3a8) 55%, #fff); }
.zoneMatSw.mat-kraft{ background:#c8a373; } .zoneMatSw.mat-cardboard{ background:repeating-linear-gradient(90deg, rgba(0,0,0,0.08) 0 2px, transparent 2px 5px), #b98f5f; }
.zoneMatSw.mat-grid{ background:linear-gradient(rgba(60,90,160,0.3) 1px, transparent 1px) 0 0/6px 6px, linear-gradient(90deg, rgba(60,90,160,0.3) 1px, transparent 1px) 0 0/6px 6px, #f4f7ff; }
.zoneMatSw.mat-felt{ background:color-mix(in srgb, var(--zone, #fff3a8) 70%, #234 30%); }
.menuSubBody .menuItem{ display:flex; align-items:center; gap:8px; }

/* --- reactions as paper tabs (v0.8.3.3) ---
   They hang from the bottom edge of the paper like the Comment tab does, but on the RIGHT, so the two never share a corner:
   [Comment] at the left, [chips][react] at the right. Nothing is drawn on an object that has no reactions and is not selected. */
.reactChips{ left:auto; right:50px; bottom:-17px; z-index:5; gap:3px; flex-wrap:nowrap; justify-content:flex-end; max-width:calc(100% - 120px); }
.reactChip{ min-height:19px; height:19px; padding:0 7px 1px; border-radius:0 0 7px 7px; border:1px solid color-mix(in srgb, var(--line) 80%, #000 15%); border-top:0; background:linear-gradient(#fffdf0, #f6efd2); color:#4a3a00; font:700 0.7rem 'Sora',sans-serif; box-shadow:0 1px 2px rgba(60,45,10,0.28); gap:3px; font-family:'Apple Color Emoji','Segoe UI Emoji','Noto Color Emoji','Sora',sans-serif; }
.reactChip .reactN{ font-family:'Sora',sans-serif; font-size:0.64rem; }
.reactChip.mine{ background:linear-gradient(#ffeaa0, #ffdd6c); border-color:#b88a1a; }
.reactChip:hover{ height:23px; }
.reactAdd{ right:14px; bottom:-17px; z-index:5; min-height:19px; height:19px; width:34px; padding:0; display:inline-flex; align-items:center; justify-content:center; border-radius:0 0 7px 7px; border:1px solid color-mix(in srgb, var(--line) 80%, #000 15%); border-top:0; background:linear-gradient(#fffdf0, #f6efd2); color:#6b5a1f; box-shadow:0 1px 2px rgba(60,45,10,0.28); }
.reactAdd:hover, .reactAdd:focus-visible{ height:24px; color:#33301f; background:linear-gradient(#fff6c2, #ffe98a); }
.reactAdd svg{ display:block; }
body.dark .reactChip, body.dark .reactAdd{ background:linear-gradient(#4f4730, #453e2a); color:#f2eadb; border-color:rgba(242,234,219,0.35); }
body.dark .reactChip.mine{ background:linear-gradient(#7a6320, #5f4d18); }
@media (pointer:coarse){ .reactAdd{ min-height:30px; height:30px; width:48px; } .reactChip{ min-height:30px; height:30px; padding:0 10px; } .reactChips{ bottom:-28px; } .reactAdd{ bottom:-28px; } }
/* the picker: a paper slip, not a toolbar */
.floatPop.reactPop{ display:flex; flex-direction:column; gap:6px; padding:10px; background:#fffdf4; border:1px solid rgba(60,45,10,0.22); border-radius:6px 14px 14px 14px; box-shadow:0 8px 22px rgba(60,45,10,0.3), 0 1px 2px rgba(60,45,10,0.2); position:relative; }
.floatPop.reactPop::before{ content:""; position:absolute; top:-8px; left:18px; width:46px; height:14px; background:rgba(255,226,120,0.85); transform:rotate(-2deg); box-shadow:0 1px 2px rgba(60,45,10,0.25); }
body.dark .floatPop.reactPop{ background:#2b2638; border-color:rgba(255,255,255,0.18); }
.reactPop .reactQuick{ display:flex; flex-wrap:wrap; align-items:center; gap:6px; }
.reactPick{ width:44px; height:44px; border-radius:50%; font-size:1.4rem; line-height:1; display:inline-flex; align-items:center; justify-content:center; padding:0; border:1px solid transparent; font-family:'Apple Color Emoji','Segoe UI Emoji','Noto Color Emoji',sans-serif; }
.reactMoreBtn{ min-height:44px; padding:0 14px; border-radius:999px; border:1.5px dashed rgba(60,45,10,0.35); background:transparent; color:#4a3a00; font:700 0.78rem 'Sora',sans-serif; cursor:pointer; }
body.dark .reactMoreBtn{ color:#f2eadb; border-color:rgba(255,255,255,0.35); }
.reactMoreBtn:hover, .reactMoreBtn.on{ background:rgba(255,226,120,0.45); }
.reactMoreBtn:focus-visible{ outline:2px solid var(--focus, #8f5710); outline-offset:2px; }
.reactPop .reactMore{ margin-top:2px; padding-top:8px; border-top:1px dashed rgba(60,45,10,0.28); display:flex; flex-direction:column; gap:6px; }
.reactPop .reactMore[hidden]{ display:none; }
.reactSearch{ width:100%; box-sizing:border-box; min-height:40px; padding:6px 12px; border-radius:999px; border:1.5px solid rgba(60,45,10,0.25); background:#fff; color:#33301f; font:0.88rem 'Sora',sans-serif; }
body.dark .reactSearch{ background:#1c1829; color:#ede9f7; border-color:rgba(255,255,255,0.25); }
.reactGroups{ max-height:min(240px, 36vh); overflow:auto; overscroll-behavior:contain; }
.reactNone{ padding:10px 4px; font-size:0.85rem; opacity:0.7; }
.reactPop{ max-width:min(330px, calc(100vw - 20px)); }
/* the submenu items must not wrap ("Grid paper") */
.menuSubBody .menuItem{ white-space:nowrap; }
/* --- collaboration e-mail pills: even padding, centred text, a clear gap, tappable X --- */
.pillField{ gap:6px 6px; padding:7px 8px; align-items:center; align-content:flex-start; }
.pillField .pill{ display:inline-flex; align-items:center; gap:2px; height:30px; padding:0 4px 0 12px; border-radius:999px; line-height:1; font-size:0.84rem; box-sizing:border-box; background:#f3e8c0; border:1px solid rgba(60,45,10,0.2); color:#33301f; }
body.dark .pillField .pill{ background:#4a4228; color:#f2eadb; border-color:rgba(255,255,255,0.2); }
.pillField .pill > span{ line-height:1; padding-bottom:1px; max-width:min(240px, 60vw); }
.pillField .pillX{ width:26px; height:26px; margin:0; padding:0; display:inline-flex; align-items:center; justify-content:center; font-size:1.05rem; line-height:1; border-radius:50%; }
@media (pointer:coarse){ .pillField .pill{ height:36px; } .pillField .pillX{ width:34px; height:34px; } }
.collabDlg .pillField input.pillIn{ flex:1 1 150px; min-height:30px; padding:0 4px; margin:0; line-height:30px; box-sizing:border-box; }
.collabDlg .pillField input.pillIn::placeholder{ line-height:30px; }
.collabDlg{ max-height:min(70vh, 560px); overflow:auto; }

/* --- Add video (v0.8.3.3) --- */
.addVideoDlg .vidOpts{ display:flex; flex-direction:column; gap:8px; }
.addVideoDlg .vidOpt{ display:flex; align-items:center; gap:12px; width:100%; min-height:56px; padding:10px 14px; border:1px solid var(--line, #e4dbb9); border-radius:12px; background:var(--panel, #fffdf4); color:var(--ink, #33301f); text-align:start; cursor:pointer; font-family:inherit; }
.addVideoDlg .vidOpt:hover{ border-color:var(--accent, #8a4f0d); background:color-mix(in srgb, var(--panel, #fffdf4) 85%, var(--accent-soft, #ffe58a)); }
.addVideoDlg .vidOpt:active{ transform:translateY(1px); }
.addVideoDlg .vidOpt:focus-visible{ outline:2px solid var(--focus, #8f5710); outline-offset:2px; }
.addVideoDlg .vIc{ flex:none; width:28px; height:28px; display:inline-flex; align-items:center; justify-content:center; } .addVideoDlg .vIc svg{ width:24px; height:24px; }
.addVideoDlg .vTx{ display:flex; flex-direction:column; gap:2px; min-width:0; } .addVideoDlg .vTx b{ font-size:0.95rem; } .addVideoDlg .vTx small{ font-size:0.78rem; opacity:0.75; line-height:1.3; }
.addVideoDlg .vidLink{ display:flex; flex-direction:column; gap:8px; } .addVideoDlg .vidLink[hidden], .addVideoDlg .vidOpts[hidden]{ display:none; }
.addVideoDlg .vidLink .asIn{ width:100%; box-sizing:border-box; }
.addVideoDlg .vidLinkRow{ display:flex; gap:8px; justify-content:flex-end; }
.cleanZones{ margin-top:6px; font-size:0.82rem; opacity:0.85; }
.cleanInside{ display:flex; align-items:center; gap:8px; min-height:40px; margin-top:6px; font-size:0.9rem; cursor:pointer; }

/* --- the Done / Trash dock (v0.8.3.3): small, one corner, hidden when both are empty --- */
.spaceDock{ position:fixed; left:14px; bottom:calc(var(--done-bottom, 30px) + env(safe-area-inset-bottom, 0px)); z-index:9990; display:flex; gap:6px; }
.spaceDock[hidden]{ display:none; }
.spaceDock .dockBtn{ position:static; display:inline-flex; align-items:center; gap:6px; min-height:32px; padding:4px 11px 4px 9px; border-radius:999px; border:1px solid var(--line); background:var(--panel); color:var(--ink); cursor:pointer; box-shadow:0 1px 4px var(--shadow); font:700 0.78rem 'Sora',sans-serif; --done-bottom:0px; }
.spaceDock .dockBtn[hidden]{ display:none; }
.spaceDock .dockBtn svg{ flex:none; } .spaceDock .donePile{ color:#2f7d46; } body.dark .spaceDock .donePile{ color:#7fcf8f; }
.spaceDock .dockBtn:hover{ border-color:var(--accent); transform:translateY(-1px); } .spaceDock .dockBtn:focus-visible{ outline:2px solid var(--focus); outline-offset:2px; }
@media (max-width:919px){ .spaceDock{ --done-bottom:46px; } } @media (max-width:600px){ .spaceDock{ --done-bottom:44px; } }
@media (pointer:coarse){ .spaceDock .dockBtn{ min-height:44px; padding:6px 14px; } }
/* --- "+ New board": with your boards, a slip appears to name it --- */
.addBoardRow{ display:block; padding:0; margin-top:8px; background:transparent; border:0; border-radius:0; }
.addBoardRow .newBoardOpen{ all:unset; box-sizing:border-box; width:100%; display:flex; align-items:center; min-height:40px; padding:0 12px; border-radius:10px; border:1.5px dashed var(--line); color:var(--ink-soft); font:600 0.86rem 'Sora',sans-serif; cursor:pointer; background:transparent; }
.addBoardRow .newBoardOpen:hover{ background:var(--accent-soft); color:var(--ink); border-color:var(--accent); } .addBoardRow .newBoardOpen:focus-visible{ outline:2px solid var(--focus); outline-offset:2px; }
.addBoardRow .newBoardOpen[hidden], .addBoardRow .newBoardSlip[hidden]{ display:none; }
.addBoardRow .newBoardSlip{ display:flex; align-items:center; gap:6px; padding:5px 5px 5px 12px; border-radius:10px; background:#fff8c4; border:1px solid rgba(60,45,10,0.2); box-shadow:0 2px 6px rgba(60,45,10,0.15); }
body.dark .addBoardRow .newBoardSlip{ background:#4a4228; }
.addBoardRow .newBoardSlip input{ flex:1; min-width:0; border:0; outline:0; background:transparent; font:0.88rem 'Sora',sans-serif; color:inherit; padding:6px 0; }
.addBoardRow .newBoardSlip button{ all:unset; box-sizing:border-box; width:auto; height:auto; min-height:32px; padding:0 14px; border-radius:8px; background:var(--btn-fill, #9a5d12); color:var(--btn-fg, #fff); font:700 0.8rem 'Sora',sans-serif; cursor:pointer; display:inline-flex; align-items:center; }
.addBoardRow .newBoardSlip button:focus-visible{ outline:2px solid var(--focus); outline-offset:2px; }
.sysSpaces{ margin-top:12px; }

/* ===== Newspaper styles, each readable at a glance (v0.8.3.3): not just another font ===== */
.po-newspaper .npMast::after{ display:block; font:600 0.52rem 'Sora',sans-serif; letter-spacing:0.12em; text-transform:uppercase; opacity:0.7; margin-top:2px; }
/* Broadsheet: the classic. Big spaced masthead between double rules, two tight columns, cream paper */
.po-newspaper.v-broadsheet .npMast{ font-size:0.95rem; letter-spacing:0.24em; border-top:3px double var(--np-rule); border-bottom:1px solid var(--np-rule); padding:4px 0; }
.po-newspaper.v-broadsheet .npMast::after{ content:"Vol. I \00b7 Late Edition"; }
/* Tabloid: a red banner, a shouting headline, one wide column, a yellow kicker */
.po-newspaper.v-tabloid .npMast{ margin:0 -14px 6px; padding:6px 10px; font-size:0.95rem; text-align:start; }
.po-newspaper.v-tabloid .npMast::after{ content:"EXCLUSIVE \00b7 SEE PAGE 3"; opacity:0.85; }
.po-newspaper.v-tabloid .npHead{ font-size:2rem; line-height:1; text-transform:uppercase; letter-spacing:-0.01em; }
.po-newspaper.v-tabloid .npSub{ display:inline-block; background:#ffe14d; padding:0 6px; font-style:normal; font-weight:800; opacity:1; }
.po-newspaper.v-tabloid .npBody{ column-count:1; column-width:auto; column-rule:0; text-align:start; font-weight:500; }
.po-newspaper.v-tabloid .poRule{ border-top:4px solid #b3261e; }
/* Gazette: centred, old paper that has yellowed at the edges, an ornament in the rule */
.po-newspaper.v-gazette .poSheet{ box-shadow:inset 0 0 38px rgba(150,110,40,0.35), 0 1px 2px rgba(60,45,10,0.3), 0 8px 18px rgba(60,45,10,0.14); }
.po-newspaper.v-gazette .npMast{ font-size:1.25rem; text-transform:none; letter-spacing:0.02em; font-weight:400; }
.po-newspaper.v-gazette .npMast::after{ content:"\2766  \00b7  est. on the board  \00b7  \2766"; letter-spacing:0.06em; }
.po-newspaper.v-gazette .poRule{ border-top:1px solid var(--np-rule); border-bottom:1px solid var(--np-rule); height:3px; }
.po-newspaper.v-gazette .npBody{ column-count:1; column-width:auto; column-rule:0; text-align:center; font-style:italic; }
/* Evening: rust ink on pink stock, a "FINAL" strip, left-aligned italic headline */
.po-newspaper.v-evening .npMast{ text-align:end; font-size:0.8rem; background:linear-gradient(90deg, transparent, rgba(122,46,28,0.16)); padding:2px 6px; }
.po-newspaper.v-evening .npMast::after{ content:"\2605  FINAL  \2605"; color:#7a2e1c; font-weight:800; }
.po-newspaper.v-evening .npHead{ font-style:italic; text-align:start; border-left:4px solid #7a2e1c; padding-left:8px; }
.po-newspaper.v-evening .npBody{ column-width:100px; }
/* Telegraph: a typed strip: dotted rules, capitals, a grey-green tint */
.po-newspaper.v-telegraph .poSheet{ background-image:repeating-linear-gradient(180deg, transparent 0 17px, rgba(60,70,50,0.12) 17px 18px); background-color:#e4e6d4; }
.po-newspaper.v-telegraph .npMast{ text-align:start; border-bottom:2px dotted var(--np-rule); font-weight:400; }
.po-newspaper.v-telegraph .npMast::after{ content:"RECEIVED \00b7 STOP \00b7 URGENT"; }
.po-newspaper.v-telegraph .poRule, .po-newspaper.v-telegraph .poRule.thin{ border-top:2px dotted var(--np-rule); }
.po-newspaper.v-telegraph .npBody{ column-count:1; column-width:auto; column-rule:0; text-transform:uppercase; letter-spacing:0.04em; }
/* Courier: a typed memo: left-aligned, an underlined masthead, one narrow column, plain white stock */
.po-newspaper.v-courier .poSheet{ background-color:#fbfaf5; border-left:6px solid #2d5a8c; }
.po-newspaper.v-courier .npMast{ text-align:start; text-transform:none; letter-spacing:0; font-size:0.78rem; text-decoration:underline; text-underline-offset:3px; }
.po-newspaper.v-courier .npMast::after{ content:"Internal \00b7 not for circulation"; text-decoration:none; }
.po-newspaper.v-courier .npBody{ column-count:1; column-width:auto; column-rule:0; }
.po-newspaper.v-courier .poRule{ border-top:1px dashed var(--np-rule); }
/* Herald: a framed front page: italic masthead, a hairline frame, a ruled subtitle */
.po-newspaper.v-herald .poSheet{ outline:1px solid #3a372c; outline-offset:-6px; padding:14px 18px 16px; }
.po-newspaper.v-herald .npMast{ text-transform:none; font-style:italic; font-weight:700; font-size:1.2rem; letter-spacing:0.01em; }
.po-newspaper.v-herald .npMast::after{ content:"Established upon this very board"; font-style:normal; }
.po-newspaper.v-herald .npSub{ border-top:1px solid; border-bottom:1px solid; padding:2px 0; text-align:center; }
.po-newspaper.v-herald .npBody{ column-count:2; }
/* Modern: sans, a thick colour bar, a big headline, wide air, no column rules */
.po-newspaper.v-modern .poSheet{ border-top:10px solid #2d6cdf; padding-top:8px; } .po-newspaper.v-modern .npMast{ text-align:start; font-size:0.66rem; letter-spacing:0.3em; color:#2d6cdf; }
.po-newspaper.v-modern .npMast::after{ content:"Today's brief"; letter-spacing:0.08em; }
.po-newspaper.v-modern .npHead{ font-size:1.9rem; line-height:1.02; letter-spacing:-0.03em; }
.po-newspaper.v-modern .npBody{ column-width:auto; column-count:1; column-rule:0; line-height:1.55; }
.po-newspaper.v-modern .poRule{ border-top:0; margin:4px 0; }
/* the Style menu: a tiny front page for each look */
.npSw{ flex:none; margin-inline-start:auto; display:inline-flex; flex-direction:column; gap:2px; width:34px; height:24px; padding:3px; box-sizing:border-box; background:var(--np-paper); border:1px solid rgba(0,0,0,0.3); border-radius:2px; }
.npSw i{ display:block; height:3px; background:var(--np-ink); opacity:0.75; } .npSw i:nth-child(1){ height:4px; opacity:1; } .npSw i:nth-child(3){ width:70%; height:2px; opacity:0.5; }
.npSw.v-tabloid i:nth-child(1){ background:#b3261e; } .npSw.v-modern{ border-top:4px solid #2d6cdf; } .npSw.v-courier{ border-left:4px solid #2d5a8c; } .npSw.v-gazette i{ margin-inline:auto; width:80%; } .npSw.v-telegraph i{ background:repeating-linear-gradient(90deg, var(--np-ink) 0 2px, transparent 2px 4px); } .npSw.v-evening i:nth-child(1){ background:#7a2e1c; width:60%; margin-inline-start:auto; }
.npSw.v-herald{ outline:1px solid #3a372c; outline-offset:-2px; }

/* ===== Piles, one control system (v0.8.3.3) =====
   Reserved places, so nothing can share a corner:
     top-left  the kind tab   |  top-right  the index tabs (the paper showing is raised) and the "..." button
     left/right edges  previous / next tabs (hover or selected only)   |  top-left under the kind tab  Browse
     bottom-left  Comment     |  bottom-right  reactions     |  the count lives INSIDE the paper (bottom-right corner), never hanging off it */
.pileObj .pileTabs{ top:-15px; bottom:auto; left:auto; right:42px; justify-content:flex-end; z-index:2; }
.pileObj .pileTab{ height:16px; border:1px solid rgba(60,45,10,0.25); border-bottom:0; border-radius:6px 6px 0 0; box-shadow:0 -1px 2px rgba(60,45,10,0.22); }
.pileObj .pileTab.on{ height:21px; margin-top:-5px; }
.pileObj .pileKind{ top:-15px; left:12px; }
.pileObj .pileOpen{ position:absolute; left:12px; bottom:auto; top:6px; z-index:3; min-height:22px; padding:0 9px; border:0; border-radius:999px; background:rgba(51,48,31,0.78); color:#fffdf5; font:700 0.64rem 'Sora',sans-serif; cursor:pointer; opacity:0; transition:opacity .12s ease; }
.pileObj:hover .pileOpen, .pileObj.selected .pileOpen, .pileObj:focus-within .pileOpen{ opacity:1; }
.pileObj .pileOpen:hover, .pileObj .pileOpen:focus-visible{ background:#33301f; }
@media (hover:none){ .pileObj .pileOpen{ display:none; } }
body.multi-sel .pileObj .pileOpen, .pileObj.static .pileOpen, body.read-only .pileObj .pileOpen{ display:none; }
.pileObj .pileCount{ right:8px; bottom:8px; min-width:0; height:20px; padding:0 8px; border-radius:10px; font-size:0.68rem; line-height:20px; z-index:3; pointer-events:none; box-shadow:none; }
.pileObj .pMore{ top:-12px; right:6px; z-index:3; }
.pileObj .pileTop.live{ padding:0; background:transparent !important; box-shadow:none; min-height:0; overflow:visible; }
.pileObj .pileMember{ position:relative; display:block; }
.pileObj .pileMember .pbPaper{ box-shadow:0 2px 5px rgba(60,45,10,0.3); }
.pileObj .pileText[hidden]{ display:none; }
/* edit-in-place: the paper being edited is drawn over its pile as itself */
.pileFocused{ box-shadow:0 0 0 3px var(--accent, #8a4f0d), 0 10px 24px rgba(60,45,10,0.35) !important; }

/* ===== SettingsRow: ONE interaction system for every row in Settings (v0.8.3.3) =====
   Rows that open something (.asAction), rows that hold a control (.asItem, .setRow) and the board panel's system rows (.sysRow) all share:
   normal = clean paper; hover = a warm tint and a hair of lift; focus-visible = a clear ring; pressed = a slightly stronger press; selected = a left tab;
   disabled = quieter, no hover; destructive = danger colour. Same height, same padding, no underlines, in light, dark and right-to-left. */
.asCard .asAction, .asCard .asItem, .setSec .setRow, .asDanger{ --row-pad:12px; }
.asCard .asAction, .asCard .asItem{ min-height:52px; padding:var(--row-pad) 12px; margin-inline:-12px; width:calc(100% + 24px); border-radius:10px; text-decoration:none; color:inherit; transition:background-color .12s ease, box-shadow .12s ease, transform .08s ease; }
.asCard .asItem{ cursor:default; }
.asCard a.asAction{ text-decoration:none; }
.asCard .asAction:not(:disabled):not([aria-disabled="true"]):hover{ background-color:color-mix(in srgb, var(--accent-soft) 70%, transparent); box-shadow:0 1px 0 rgba(60,45,10,0.08); }
.asCard .asItem:hover{ background-color:color-mix(in srgb, var(--accent-soft) 35%, transparent); }
.asCard .asAction:focus-visible, .asCard .asItem:focus-within{ outline:2px solid var(--focus); outline-offset:-2px; }
.asCard .asItem:focus-within:not(:has(:focus-visible)){ outline:0; }
.asCard .asAction:not(:disabled):active{ background-color:color-mix(in srgb, var(--accent-soft) 100%, var(--accent) 14%); transform:translateY(1px); }
.asCard .asAction.on, .asCard .asAction[aria-current="true"], .asCard .asAction[aria-pressed="true"]{ box-shadow:inset 3px 0 0 var(--accent); background-color:color-mix(in srgb, var(--accent-soft) 55%, transparent); }
[dir="rtl"] .asCard .asAction.on, [dir="rtl"] .asCard .asAction[aria-pressed="true"]{ box-shadow:inset -3px 0 0 var(--accent); }
.asCard .asAction:disabled, .asCard .asAction[aria-disabled="true"], .asCard .asItem.off{ opacity:0.55; cursor:default; }
.asCard .asAction.danger, .asCard .asAction.danger .t, .asCard .asAction.danger .lbl{ color:var(--danger, #b3261e); }
.asCard .asAction.danger:not(:disabled):hover{ background-color:color-mix(in srgb, var(--danger, #b3261e) 10%, transparent); }
.asCard .asAction .lbl{ text-decoration:none; }
body.dark .asCard .asAction:not(:disabled):hover{ background-color:rgba(255,180,84,0.12); } body.dark .asCard .asItem:hover{ background-color:rgba(255,180,84,0.06); }
body.dark .asCard .asAction:not(:disabled):active{ background-color:rgba(255,180,84,0.2); }
@media (prefers-reduced-motion: reduce){ .asCard .asAction, .asCard .asItem{ transition:none; } .asCard .asAction:active{ transform:none; } }
html[data-a11y-motion="reduce"] .asCard .asAction{ transition:none; }
@media (pointer:coarse){ .asCard .asAction, .asCard .asItem{ min-height:56px; } }
/* SettingsRow separators: a hairline inset from the rounded hover shape, so the corners stay clean */
.asCard .asAction, .asCard .asItem{ border-top:0; background-image:linear-gradient(color-mix(in srgb, var(--line) 75%, transparent), color-mix(in srgb, var(--line) 75%, transparent)); background-size:calc(100% - 24px) 1px; background-position:center top; background-repeat:no-repeat; }
.asCard > h4 + .asAction, .asCard > h4 + .asItem, .asCard > h5 + .asItem, .asCard .ccLegalList > .asAction:first-child, .wnBody > :first-child{ background-image:none; }
.asCard .asAction:not(:disabled):hover, .asCard .asItem:hover{ background-size:0 0; }
.sharePrintRow{ display:flex; gap:8px; flex-wrap:wrap; justify-content:center; margin:10px 0 0; }

/* ===== Pile browser as a leaf-through (v0.8.3.3): a paper on a desk, edge tabs, a handwritten page marker, ONE control slip ===== */
.pbCard{ position:relative; width:min(460px, 100%); gap:6px; padding:10px 10px 12px; background:var(--desk, #efe7cd); border-radius:14px; overflow:hidden; }
body.dark .pbCard{ background:var(--panel); }
.pbBar{ justify-content:center; }
.pbIndex{ font:1.35rem 'Patrick Hand','Alef',sans-serif; font-weight:400; min-width:0; padding:0 14px; color:var(--ink); transform:rotate(-1.5deg); border-bottom:2px solid color-mix(in srgb, var(--accent, #8a4f0d) 55%, transparent); }
.pbDesk{ position:relative; display:flex; align-items:stretch; }
.pbDesk .pbStage{ flex:1 1 auto; min-width:0; margin-inline:20px; padding:14px 6px 16px; max-height:min(58vh, 500px); }
.pbStage .pbPaper{ box-shadow:0 2px 3px rgba(60,45,10,0.25), 0 10px 22px rgba(60,45,10,0.22); }
.pbStage:not(.fan) .pbPaper{ position:relative; }
/* previous / next: tabs on the paper's side edges */
.pbNav.pbPrev, .pbNav.pbNext{ position:absolute; top:50%; transform:translateY(-50%); z-index:2; width:26px; height:76px; padding:0; border:1px solid rgba(60,45,10,0.25); background:linear-gradient(#fffdf0, #f0e6c0); color:#4a3a00; font:700 22px/1 'Sora',sans-serif; box-shadow:1px 2px 4px rgba(60,45,10,0.3); }
.pbNav.pbPrev{ left:0; border-radius:12px 3px 3px 12px; border-right:0; } .pbNav.pbNext{ right:0; border-radius:3px 12px 12px 3px; border-left:0; }
.pbNav.pbPrev:hover, .pbNav.pbNext:hover{ background:linear-gradient(#fff6c2, #ffe58a); } .pbNav:disabled{ opacity:0.35; cursor:default; }
body.dark .pbNav.pbPrev, body.dark .pbNav.pbNext{ background:linear-gradient(#4f4730, #453e2a); color:#f2eadb; }
/* the control slip */
.pbSlip{ display:flex; flex-direction:column; gap:6px; padding:8px; border-radius:6px 12px 12px 6px; background:#fffdf4; border:1px solid rgba(60,45,10,0.2); box-shadow:0 2px 6px rgba(60,45,10,0.18); position:relative; }
body.dark .pbSlip{ background:#2b2638; border-color:rgba(255,255,255,0.15); }
.pbSlip::before{ content:""; position:absolute; top:-8px; left:50%; width:50px; height:13px; margin-left:-25px; background:rgba(255,226,120,0.85); transform:rotate(-2deg); box-shadow:0 1px 2px rgba(60,45,10,0.25); }
.pbSlip .pbTools{ display:flex; flex-wrap:wrap; gap:6px; justify-content:center; }
.pbSlip .pbFoot{ display:flex; flex-wrap:wrap; gap:6px; justify-content:center; }
.pbSlip .pbTool, .pbSlip .pbTake, .pbSlip .pbBack{ min-height:40px; padding:6px 12px; border-radius:999px; font-size:0.82rem; }
@media (max-width:480px){
  .pbBackdrop{ padding:0; align-items:stretch; } .pbCard{ width:100%; max-height:100%; border-radius:0; overflow:auto; }
  .pbDesk .pbStage{ margin-inline:16px; max-height:52vh; }
  .pbNav.pbPrev, .pbNav.pbNext{ width:22px; height:64px; }
  .pbSlip .pbTool, .pbSlip .pbTake, .pbSlip .pbBack{ min-height:44px; }
  .pbSlip .pbFoot > *{ flex:1 1 auto; }
}
@media (prefers-reduced-motion: reduce){ .pbNav, .pbStage *{ transition:none !important; } }


/* ===== Owner QA pass (v0.8.3.3) ===== */
/* pile index tabs: numbers never clip */
.pileObj .pileTabs{ top:-17px; }
.pileObj .pileTab{ box-sizing:border-box; height:20px; min-width:24px; padding:3px 5px 0; display:inline-flex; align-items:flex-start; justify-content:center; font:700 0.7rem/1 'Sora',sans-serif; overflow:visible; }
.pileObj .pileTab.on{ height:25px; margin-top:-5px; padding-top:5px; }
.pileObj .pileKind{ top:-17px; height:19px; box-sizing:border-box; padding:4px 10px 0; line-height:1; }
/* Browse: a small paper tab on the pile's left edge, with a pages icon (not a dark pill) */
.pileObj .pileOpen{ left:-15px; top:26px; width:26px; height:38px; min-height:0; padding:0; border-radius:9px 0 0 9px; background:linear-gradient(#fffdf0, #f1e7c4); color:#4a3a00; border:1px solid rgba(60,45,10,0.28); border-right:0; box-shadow:-1px 2px 4px rgba(60,45,10,0.3); display:flex; align-items:center; justify-content:center; }
.pileObj .pileOpen::after{ content:""; position:absolute; right:0; bottom:0; width:9px; height:9px; background:linear-gradient(135deg, transparent 50%, rgba(60,45,10,0.18) 50%); }
.pileObj .pileOpen:hover, .pileObj .pileOpen:focus-visible{ background:linear-gradient(#fff6c2, #ffe58a); color:#33301f; }
body.dark .pileObj .pileOpen{ background:linear-gradient(#4f4730, #453e2a); color:#f2eadb; border-color:rgba(242,234,219,0.35); }
@media (hover:none){ .pileObj .pileOpen{ display:flex; opacity:1; } }
/* browser icon controls */
.pbSlip .pbTool.ico{ width:44px; min-height:44px; padding:0; display:inline-flex; align-items:center; justify-content:center; border-radius:50%; }
.pbSlip .pbTool.ico svg{ width:20px; height:20px; }
.pbSlip .pbTool[aria-pressed="true"]{ background:var(--accent-soft); border-color:var(--accent); }
.pbSlip .pbFoot{ flex-wrap:nowrap; }
.pbSlip .pbFoot .pbBack{ margin-inline-start:auto; flex:0 1 auto; }
.pbSlip{ flex-direction:row; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:6px 10px; padding:6px 10px; }
.pbSlip .pbTools, .pbSlip .pbFoot{ display:flex; gap:6px; }
@media (max-width:480px){ .pbSlip{ justify-content:center; } .pbSlip .pbFoot .pbBack{ flex:1 1 auto; } }
/* Fan: papers spread over a desk; the controls stay small */
.pbCard.isFan{ background:linear-gradient(#e9dfc2, #d9cda8); }
body.dark .pbCard.isFan{ background:linear-gradient(#262033, #1a1626); }
.pbCard:has(.pbStage.fan){ width:min(760px, 100%); padding-bottom:10px; }
.pbStage.fan{ min-height:0; height:min(46vh, 330px); max-height:none; margin-inline:0; padding:0; }
.pbFan{ height:100%; }
.pbFanCard{ width:170px; transform:translate(calc(-50% + var(--fo) * 74px), -48%) rotate(calc(var(--fo) * 5deg)) scale(0.8); transform-origin:50% 130%; filter:drop-shadow(0 4px 6px rgba(60,45,10,0.35)); }
.pbFanCard:hover{ transform:translate(calc(-50% + var(--fo) * 74px), -56%) rotate(calc(var(--fo) * 5deg)) scale(0.86); z-index:35; }
.pbFanCard.current{ transform:translate(-50%, -56%) scale(1); }
@media (max-width:480px){ .pbCard:has(.pbStage.fan){ width:100%; } .pbStage.fan{ height:38vh; } .pbFanCard{ width:130px; transform:translate(calc(-50% + var(--fo) * 44px), -48%) rotate(calc(var(--fo) * 6deg)) scale(0.8); } .pbFanCard:hover{ transform:translate(calc(-50% + var(--fo) * 44px), -52%) rotate(calc(var(--fo) * 6deg)) scale(0.84); } .pbFanCard.current{ transform:translate(-50%, -54%) scale(1); } }
/* Zone heading: a ledger strip on the paper edge */
.zone .zoneBar{ margin:-2px -2px 0; padding:3px 8px 3px 12px; min-height:34px; background:linear-gradient(color-mix(in srgb, var(--zone, #fff3a8) 55%, #fffdf4), color-mix(in srgb, var(--zone, #fff3a8) 78%, #ece3c6)); border-bottom:2px solid color-mix(in srgb, var(--zone, #fff3a8) 35%, #5a4a1c 65%); border-radius:6px 6px 0 0; box-shadow:0 2px 3px rgba(60,45,10,0.2); }
.zone .zoneTitle{ color:#2a2619; text-shadow:0 1px 0 rgba(255,255,255,0.55); font-size:1.25rem; }
.zone.mat-felt .zoneBar{ background:linear-gradient(color-mix(in srgb, var(--zone, #fff3a8) 60%, #234), color-mix(in srgb, var(--zone, #fff3a8) 45%, #123)); border-bottom-color:rgba(0,0,0,0.45); }
.zone.mat-felt .zoneTitle{ color:#f8f3e4; text-shadow:0 1px 2px rgba(0,0,0,0.5); }
body.dark .zone:not(.mat-felt) .zoneBar{ background:linear-gradient(color-mix(in srgb, var(--zone, #fff3a8) 40%, #2b2638), color-mix(in srgb, var(--zone, #fff3a8) 28%, #1c1829)); border-bottom-color:rgba(255,255,255,0.28); }
body.dark .zone:not(.mat-felt) .zoneTitle{ color:#f4eedf; text-shadow:0 1px 2px rgba(0,0,0,0.6); }
body.dark .zone:not(.mat-felt) .zoneCount, body.dark .zone:not(.mat-felt) .zoneMin, body.dark .zone:not(.mat-felt) .zoneMore{ color:#f4eedf; }
.zone .zoneTitle.editable[contenteditable="true"]{ background:rgba(255,255,255,0.85); color:#2a2619; }
/* Newspaper picture size / fit */
.npFig{ margin-inline:auto; } .npFig.sz-small{ width:40%; } .npFig.sz-medium{ width:62%; } .npFig.sz-large{ width:82%; } .npFig.sz-full{ width:100%; }
.npFig.contain img{ object-fit:contain; background:#e9e4d3; }
/* compact Share window */
.shareCompact{ display:flex; flex-direction:column; gap:10px; }
.shareCompact .shareTop{ display:flex; gap:12px; align-items:center; }
.shareCompact .sharePreview{ flex:0 0 auto; max-width:190px; max-height:120px; overflow:hidden; }
.shareCompact .shareStat{ display:flex; flex-direction:column; gap:3px; font-size:0.84rem; line-height:1.35; min-width:0; } .shareCompact .shareStat strong{ font-size:0.95rem; }
.shareCompact .shareActs{ display:flex; flex-wrap:wrap; gap:8px; }
.shareCompact .shareActs .pillBtn{ flex:1 1 auto; min-height:40px; }
.shareCompact .shareMore{ border:1px solid var(--line); border-radius:10px; padding:2px 12px; background:color-mix(in srgb, var(--panel) 92%, var(--line)); }
.shareCompact .shareMore summary{ cursor:pointer; min-height:40px; display:flex; align-items:center; font-weight:600; font-size:0.88rem; }
.shareCompact .shareMore .shareMsg{ max-height:7em; overflow:auto; font-size:0.84rem; margin:4px 0 8px; }
.shareCompact .shareMore .shareFine, .shareCompact .shareMore .shareFine.big{ font-size:0.8rem; line-height:1.45; margin:0 0 10px; }
.shareCompact .shareOff{ align-self:center; margin:2px 0 0 !important; width:auto !important; font-size:0.84rem; color:var(--danger); }
@media (max-width:480px){ .shareCompact .shareTop{ flex-direction:column; align-items:flex-start; } .shareCompact .shareActs .pillBtn{ flex:1 1 45%; } }
.pbDesk .pbNav{ z-index:60; }
.pbFanCard.current{ outline:2px solid var(--accent, #8a4f0d); outline-offset:2px; border-radius:2px; }

/* ===== Final QA cleanup (v0.8.3.3) ===== */
/* Zone cursors: grab on the rail, grabbing while dragging, a text cursor only while the title is being edited; a pinned zone is not draggable */
.zoneBar{ cursor:grab; } .zone.dragging .zoneBar, .zoneBar:active{ cursor:grabbing; }
.zone .zoneTitle, .zone .zoneTitle.editable{ cursor:inherit; }
.zone .zoneTitle[contenteditable="true"]{ cursor:text; }
.zone.pinned .zoneBar, .zone.pinned.dragging .zoneBar, .zone.pinned .zoneBar:active{ cursor:default; }
.zone .zoneCount, .zone .zoneMin, .zone .zoneMore{ cursor:pointer; }
/* Pile tabs: a fixed-height rail glued to the pile's top edge, one fixed slot per tab. Tabs sit inside their slot, so nothing is clipped, whatever the rotation. */
.pileObj .pileTabs, .pileObj .pileKind{ top:auto; bottom:calc(100% - 1px); }
.pileObj .pileTabs{ right:44px; left:auto; height:26px; max-width:none; overflow:visible; display:flex; align-items:flex-end; justify-content:flex-end; gap:2px; z-index:2; }
.pileObj .pileTab{ flex:0 0 26px; width:26px; min-width:0; height:20px; margin:0; padding:0; box-sizing:border-box; display:flex; align-items:center; justify-content:center; font:700 0.72rem/1 'Sora',sans-serif; border-radius:6px 6px 0 0; }
.pileObj .pileTab.on{ height:26px; margin:0; padding:0; font-size:0.8rem; background:#ffe58a; }
body.dark .pileObj .pileTab.on{ background:#8a6d1c; color:#fff; }
.pileObj .pileKind{ left:12px; height:20px; padding:0 10px; display:flex; align-items:center; line-height:1; box-sizing:border-box; }
/* Shared links window */
.lkNote{ margin:0 0 10px; font-size:0.86rem; line-height:1.45; } .lkEmpty{ padding:22px 8px; text-align:center; font-size:0.92rem; opacity:0.8; }
.lkList{ display:flex; flex-direction:column; gap:8px; max-height:min(56vh, 460px); overflow:auto; padding:2px 4px 4px 2px; overscroll-behavior:contain; }
.lkCard{ display:flex; align-items:center; gap:12px; padding:10px 12px; border-radius:6px 12px 12px 6px; background:#fffdf4; border:1px solid rgba(60,45,10,0.2); box-shadow:0 1px 3px rgba(60,45,10,0.18); position:relative; }
.lkCard::before{ content:""; position:absolute; top:-5px; left:18px; width:36px; height:10px; background:rgba(255,226,120,0.8); transform:rotate(-2deg); }
body.dark .lkCard{ background:#2b2638; border-color:rgba(255,255,255,0.15); }
.lkIcon{ flex:none; width:34px; height:34px; border-radius:50%; background:var(--accent-soft, #ffe58a); display:flex; align-items:center; justify-content:center; } .lkIcon svg{ width:18px; height:18px; }
.lkBody{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:5px; }
.lkHead{ display:flex; flex-wrap:wrap; align-items:baseline; gap:2px 8px; } .lkHead strong{ font-size:0.95rem; } .lkBoard{ font-size:0.82rem; opacity:0.75; overflow-wrap:anywhere; }
.lkMeta{ display:flex; flex-wrap:wrap; gap:4px; } .lkChip{ font-size:0.72rem; padding:1px 8px; border-radius:999px; border:1px solid var(--line, #e4dbb9); background:rgba(0,0,0,0.04); white-space:nowrap; } .lkChip.perm{ border-color:var(--accent, #8a4f0d); }
.lkOff{ flex:none; min-height:40px; }
@media (max-width:480px){ .lkCard{ flex-wrap:wrap; } .lkOff{ margin-inline-start:46px; } }
/* Shortcuts: the name keeps a readable width; the binding wraps under it when there is no room (no word-per-line collapse) */
.kbdRow{ flex-wrap:wrap; gap:4px 12px; }
.kbdRow .kbdDesc{ flex:1 1 14rem; min-width:min(14rem, 100%); overflow-wrap:normal; word-break:normal; hyphens:none; }
.kbdRow .kbdKeys{ flex:0 1 auto; width:auto; max-width:100%; }
.kbdRebRow .kbdRebCtl{ flex:0 1 auto; max-width:100%; justify-content:flex-start; }
.kbdGroups{ grid-template-columns:repeat(auto-fill, minmax(min(100%, 22rem), 1fr)); }
@media (max-width:560px){ .kbdRow .kbdDesc{ flex-basis:100%; } .kbdRebRow .kbdRebCtl{ margin-inline-start:0; } }
/* Pile browser: compact. The paper is the focus, the card fits it, the actions sit in three labelled groups on one slip */
.pbCard{ width:min(420px, 100%); gap:4px; padding:8px 8px 10px; }
.pbCard:has(.pbStage.fan){ width:min(720px, 100%); }
.pbBar{ min-height:0; } .pbIndex{ font-size:1.2rem; padding:0 10px; }
.pbDesk .pbStage{ min-height:0; max-height:min(52vh, 440px); padding:8px 4px 10px; margin-inline:18px; }
.pbStage.fan{ height:min(40vh, 280px); }
.pbSlip{ gap:6px; padding:5px 8px; justify-content:space-between; }
.pbSlip .pbGroup{ display:flex; align-items:center; gap:4px; }
.pbSlip .pbGroup + .pbGroup{ padding-inline-start:8px; border-inline-start:1px solid rgba(60,45,10,0.2); }
body.dark .pbSlip .pbGroup + .pbGroup{ border-inline-start-color:rgba(255,255,255,0.18); }
.pbSlip .pbFoot{ margin-inline-start:auto; flex:0 0 auto; } .pbSlip .pbFoot .pbBack{ margin:0; flex:0 0 auto; min-height:44px; padding:0 16px; }
@media (max-width:480px){ .pbCard{ border-radius:0; } .pbSlip{ justify-content:center; } .pbSlip .pbFoot{ flex:1 1 100%; margin:0; } .pbSlip .pbFoot .pbBack{ width:100%; } .pbSlip .pbGroup + .pbGroup{ padding-inline-start:6px; } }

/* Shopping list (v0.8.3.4): friendlier Hebrew, and a quantity you can actually read */
.shopObj .shTitle:lang(he), .shopObj .shTitle[dir="rtl"]{ font-weight:600; letter-spacing:0; }
.shopObj .shLine{ font-size:1.18rem; }
.shopObj .shMeta{ align-items:baseline; }
.shopObj .shQty{ font:700 1.05rem/1.15 'Courier Prime','Courier New',monospace; color:var(--sInk); letter-spacing:0; }
.shopObj .shF{ font-size:0.78rem; }
.shopObj .shF input{ font-size:1rem; }

/* Shopping list: dividers and subtext (v0.8.3.5) */
.shopObj .shRow.shDiv{ align-items:center; gap:8px; min-height:30px; margin:6px 0 2px; }
.shopObj .shDivText{ flex:0 1 auto; max-width:70%; font-weight:700; font-size:1.02rem; letter-spacing:0.02em; color:var(--sInk); min-width:5ch; }
.shopObj .shDivText:empty::before{ content:attr(data-ph); opacity:0.4; font-weight:500; }
.shopObj .shDivRule{ flex:1 1 20px; height:0; border-top:2px dashed var(--sLine); align-self:center; opacity:0.9; }
.shopObj .shRow.shDiv .shDel{ opacity:0; } .shopObj .shRow.shDiv:hover .shDel, .shopObj .shRow.shDiv:focus-within .shDel, .shopObj.selected .shRow.shDiv .shDel{ opacity:1; }
@media (hover:none){ .shopObj .shRow.shDiv .shDel{ opacity:0.7; } }
/* subtext: a readable line under the item, not a tiny "note:" annotation */
.shopObj .shNote{ font:italic 500 0.82rem/1.3 'Sora','Alef',sans-serif; color:var(--sSoft); }
.shopObj .shNote::before{ content:none; }

/* Shopping quantities (v0.8.3.7): a bold number and a smaller unit, isolated so Hebrew / Arabic units sit correctly next to the digits */
.shopObj .shQty{ display:inline-flex; align-items:baseline; gap:4px; padding:0 7px; border-radius:999px; background:rgba(60,50,20,0.07); font-family:'Sora','Heebo','Alef',sans-serif; line-height:1.5; }
.shopObj .shQty .qx{ font-size:0.8rem; opacity:0.7; }
.shopObj .shQty .qn{ font:800 1.05rem/1.3 'Sora',sans-serif; color:var(--sInk); unicode-bidi:isolate; }
.shopObj .shQty .qu{ font:600 0.84rem/1.3 'Sora','Heebo','Alef',sans-serif; color:var(--sSoft); unicode-bidi:isolate; }
.shopObj .shMeta{ gap:6px; align-items:center; }
.shopObj .shQtyEd{ display:inline-flex; align-items:center; gap:4px; }
.shopObj .shQtyEd .qnIn{ width:4.5ch; text-align:center; font-weight:700; }
.shopObj .shQtyEd .quIn{ width:9ch; }
.shopObj .shQtyEd input{ font-size:1rem; border:0; border-bottom:1px dotted var(--sLine); background:transparent; color:var(--sInk); padding:1px 2px; outline:none; }
.shopObj .shQtyEd input:focus-visible{ border-bottom:1px solid var(--accent, #c9871f); background:rgba(255,224,130,0.3); }
/* the row buttons must never be squeezed by a long item (they were shrinking to ~5px in right-to-left rows) */
.shopObj .shMore, .shopObj .shDel{ flex:none; min-width:26px; min-height:26px; display:inline-flex; align-items:center; justify-content:center; font-size:1rem; }
.shopObj .shQtyClear{ flex:none; width:26px; height:26px; border:0; border-radius:50%; background:transparent; color:var(--sSoft); font:600 1rem 'Sora',sans-serif; cursor:pointer; padding:0; }
.shopObj .shQtyClear:hover{ background:rgba(0,0,0,0.08); color:var(--sWarn); }
.shopObj .shQtyClear:focus-visible{ outline:2px solid var(--accent, #c9871f); }
@media (hover:none){ .shopObj .shMore, .shopObj .shDel{ min-width:36px; min-height:36px; } }
/* the "Copied" flash inside the compact Share window: a small tick beside the words, never a giant one */
.shareCompact .copyBtn .ok{ display:inline-flex; align-items:center; gap:6px; white-space:nowrap; }
.shareCompact .copyBtn .ok svg{ width:15px; height:15px; flex:none; }
/* Any button that flashes "Copied!" (flashCopied) shows a small tick beside the words, wherever it is: a tick can never be bigger than the label */
button .ok{ display:inline-flex; align-items:center; gap:6px; white-space:nowrap; }
button .ok svg{ width:15px; height:15px; flex:none; }
button.copyBtn{ position:relative; overflow:hidden; }

/* ===== v0.8.3.4 "Lock it down" ===== */
/* invite dialog: nothing may push the modal wider than the screen, however long the link is */
.modalCard, .acctCard{ max-width:min(100%, calc(100vw - 24px)); box-sizing:border-box; }
.collabDlg{ overflow-x:hidden; min-width:0; }
.collabDlg > *, .collabDlg .inviteRow > *{ min-width:0; max-width:100%; }
.collabDlg .inviteRow{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:6px 8px; align-items:center; }
.collabDlg .inviteRow > .asHint{ grid-column:1 / -1; }
.collabDlg .inviteRow input.asIn{ width:100%; min-width:0; box-sizing:border-box; font:0.76rem/1.3 ui-monospace,Consolas,"SFMono-Regular",monospace; text-overflow:ellipsis; overflow:hidden; white-space:nowrap; }
.collabDlg .inviteRow .copyBtn{ flex:none; white-space:nowrap; }
@media (max-width:420px){ .collabDlg .inviteRow{ grid-template-columns:minmax(0,1fr); } .collabDlg .inviteRow .copyBtn{ justify-self:start; } }
.joinDlg{ display:flex; flex-direction:column; gap:6px; min-width:0; }
.joinDlg input{ width:100%; min-width:0; box-sizing:border-box; text-overflow:ellipsis; }

/* "Links you made": one slip per link */
.invList{ display:flex; flex-direction:column; gap:10px; margin-top:6px; }
.invEmpty{ display:flex; flex-direction:column; gap:3px; padding:14px 14px; border:1.5px dashed var(--line); border-radius:12px; background:color-mix(in srgb, var(--accent-soft) 30%, transparent); font-size:0.84rem; color:var(--ink); }
.invEmpty span{ font-size:0.78rem; color:var(--ink-soft); }
.invCard{ position:relative; display:flex; flex-direction:column; gap:6px; padding:11px 13px 11px; border-radius:6px 12px 10px 12px; background:var(--panel); border:1px solid var(--line); box-shadow:0 1px 0 rgba(0,0,0,0.04), 0 3px 9px rgba(60,40,10,0.08); }
.invCard::before{ content:""; position:absolute; top:-6px; left:18px; width:44px; height:12px; border-radius:2px; background:color-mix(in srgb, var(--accent) 22%, #fff 40%); opacity:0.7; transform:rotate(-2deg); }
.invCard.off{ opacity:0.62; background:color-mix(in srgb, var(--panel) 80%, var(--line)); }
.invHead{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
.invRole{ font-weight:700; font-size:0.9rem; color:var(--ink); }
.invState{ font-size:0.7rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase; padding:2px 8px; border-radius:999px; }
.invState.on{ background:color-mix(in srgb, #3a9a5b 18%, transparent); color:#2c7a46; }
.invState.off{ background:color-mix(in srgb, var(--ink-soft) 18%, transparent); color:var(--ink-soft); }
body.dark .invState.on{ color:#7bd69a; }
.invWho{ font-size:0.82rem; color:var(--ink); overflow-wrap:anywhere; }
.invMeta{ font-size:0.74rem; color:var(--ink-soft); }
.invPeople{ display:flex; flex-wrap:wrap; gap:5px; margin-top:2px; }
.invChip{ font-size:0.74rem; padding:2px 9px; border-radius:999px; background:var(--accent-soft); color:var(--ink); border:1px solid color-mix(in srgb, var(--accent) 35%, transparent); max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.invChip.guest{ background:color-mix(in srgb, #ffd85a 35%, transparent); }
.invChip.gone{ text-decoration:line-through; opacity:0.55; }
.invActs{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-top:4px; }

/* the owner turned access off: the board is gone from the screen at once */
body.accessLost #board, body.accessLost .topbar .presenceBar{ visibility:hidden; pointer-events:none; }

/* age screen: month + year as slips, Sign out and Continue on one row */
.ageSel{ position:relative; margin-top:5px; }
.ageSel::after{ content:""; position:absolute; right:13px; top:50%; width:7px; height:7px; margin-top:-6px; border-right:1.8px solid var(--ink-soft); border-bottom:1.8px solid var(--ink-soft); transform:rotate(45deg); pointer-events:none; }
.ageRow select{ appearance:none; -webkit-appearance:none; margin-top:0; padding:11px 32px 11px 12px; border-radius:10px; border:1.5px solid var(--line); background:var(--panel); color:var(--ink); box-shadow:0 1px 0 rgba(0,0,0,0.04); cursor:pointer; }
.ageRow select:hover{ border-color:var(--accent); }
.ageRow select:focus-visible{ outline:2px solid var(--focus, var(--accent)); outline-offset:2px; }
.ageRow select option{ background:var(--panel); color:var(--ink); }
.ageRow{ flex-wrap:nowrap; }
.modalActions.ageActs{ flex-wrap:nowrap; justify-content:space-between; }
.modalActions.ageActs .pillBtn{ flex:0 1 auto; }
.modalActions.ageActs .pillBtn.primary{ margin-inline-start:auto; }

/* settings > Input: label column + control column, stacked on narrow screens (no word-breaking tricks) */
.asItem.asItemField{ display:grid; grid-template-columns:minmax(0,1fr) minmax(150px,max-content); align-items:center; column-gap:16px; row-gap:8px; }
.asItem.asItemField .lbl{ flex:none; min-width:0; overflow-wrap:normal; }
.asItem.asItemField .asSel{ max-width:none; width:100%; justify-self:end; }
.asItem.asItemField .asSelect{ width:100%; min-width:0; }
@media (max-width:480px){ .asItem.asItemField{ grid-template-columns:minmax(0,1fr); } .asItem.asItemField .asSel{ justify-self:stretch; } }

/* errors: compact, readable, dismissible, and clear of the phone's safe areas and the board */
.toast.errToast{ border-radius:14px; padding:9px 10px 9px 14px; text-align:left; justify-content:space-between; align-items:center; gap:10px; max-width:min(440px, calc(100vw - 24px)); bottom:calc(56px + env(safe-area-inset-bottom, 0px)); border-left:5px solid #e0a43a; }
.toast.errToast.sev-info{ border-left-color:#4a90c8; }
.toast.errToast.sev-warn{ border-left-color:#e0a43a; }
.toast.errToast.sev-error{ border-left-color:#d9534f; }
.toast.errToast .etBody{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.toast.errToast .etMsg{ font-size:0.82rem; line-height:1.3; overflow-wrap:anywhere; }
.toast.errToast .etCode{ font-size:0.66rem; letter-spacing:.05em; opacity:0.65; font-variant-numeric:tabular-nums; }
.toast.errToast .etClose{ flex:none; width:28px; height:28px; border:0; border-radius:50%; background:transparent; color:inherit; font-size:1.1rem; line-height:1; cursor:pointer; opacity:0.75; }
.toast.errToast .etClose:hover{ opacity:1; background:rgba(255,255,255,0.14); }
@media (max-width:600px){
  .toast{ max-width:calc(100vw - 20px); font-size:0.8rem; padding:8px 12px; border-radius:16px; bottom:calc(60px + env(safe-area-inset-bottom, 0px)); line-height:1.3; }
}

/* ===== v0.8.3.4 (final pass) ===== */
/* Zone: its tack, resize handle and bar sit above the papers inside it; the zone itself does not */
.zone > .pinTack, .zone > .pinBadge{ z-index:10000; }
.zone > .zoneHandle{ z-index:9999; }

/* board cards: the full text of a cut-off name / subtitle, as a small paper label that never moves the layout */
.truncTip{ position:fixed; z-index:10020; max-width:min(300px, calc(100vw - 16px)); padding:7px 11px 8px; border-radius:4px 9px 6px 9px; background:#fff8e1; color:#2a2619; border:1px solid rgba(110,80,20,0.28); box-shadow:0 5px 14px rgba(50,35,10,0.22); font-size:0.8rem; line-height:1.35; pointer-events:none; overflow-wrap:anywhere; }
.truncTip .tt + .tt{ margin-top:3px; }
.truncTip .tt.name{ font-weight:700; }
.truncTip .tt.sub, .truncTip .tt.meta{ font-size:0.74rem; opacity:0.85; }
body.dark .truncTip{ background:#3a3226; color:#f4eedf; border-color:rgba(255,200,120,0.25); }
.boardRow:focus-visible{ outline:2px solid var(--focus, var(--accent)); outline-offset:-2px; }

/* the choice list: a button that opens a paper menu */
.idlsSel{ position:relative; display:block; width:100%; min-width:0; }
.idlsNative{ position:absolute !important; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); border:0; opacity:0; pointer-events:none; }
.asSel.idlsHost::after{ display:none; }
.idlsSelBtn{ display:flex; align-items:center; justify-content:space-between; gap:10px; width:100%; min-height:38px; padding:7px 12px; border-radius:10px; border:1.5px solid var(--line); background:var(--panel); color:var(--ink); font:inherit; font-size:0.88rem; text-align:start; cursor:pointer; box-shadow:0 1px 0 rgba(0,0,0,0.04); }
.idlsSelBtn:hover{ border-color:var(--accent); background:color-mix(in srgb, var(--accent-soft) 40%, var(--panel)); }
.idlsSelBtn:focus-visible{ outline:2px solid var(--focus, var(--accent)); outline-offset:2px; }
.idlsSelBtn[aria-expanded="true"]{ border-color:var(--accent); }
.idlsSelVal{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.idlsSelChev{ flex:none; width:7px; height:7px; border-inline-end:1.8px solid var(--ink-soft); border-bottom:1.8px solid var(--ink-soft); transform:rotate(45deg) translateY(-2px); }
.idlsSelList{ position:fixed; z-index:var(--z-menu, 10095); margin:0; padding:5px; list-style:none; overflow-y:auto; border-radius:6px 12px 8px 12px; background:var(--panel, #fffdf4); color:var(--ink, #2a2619); border:1px solid var(--line); box-shadow:0 10px 26px rgba(50,35,10,0.28); outline:0; }
.idlsSelOpt{ display:flex; align-items:center; gap:8px; padding:9px 12px; border-radius:8px; font-size:0.88rem; cursor:pointer; text-align:start; }
.idlsSelOpt::before{ content:""; flex:none; width:7px; height:7px; border-radius:50%; background:transparent; }
.idlsSelOpt[aria-selected="true"]{ font-weight:700; }
.idlsSelOpt[aria-selected="true"]::before{ background:var(--accent); }
.idlsSelOpt.active{ background:var(--accent-soft); }
@media (pointer:coarse){ .idlsSelOpt{ padding:12px 14px; } .idlsSelBtn{ min-height:44px; } }
@media (prefers-reduced-motion:no-preference){ .idlsSelList{ animation:idlsIn .12s ease-out; } @keyframes idlsIn{ from{ opacity:0; transform:translateY(-3px); } to{ opacity:1; transform:none; } } }

/* ===== v0.8.3.4 collaboration management ===== */
/* Stick-It scroll surface: a thin ink track and a paper-coloured thumb. Applied only where the class is set (the Collaborate and Sharing & access windows); native behaviour is untouched. */
/* Chromium and Safari draw the rounded thumb from the ::-webkit-scrollbar pieces. They must NOT also be given scrollbar-width / scrollbar-color: in current Chromium those standard
   properties win and switch the pseudo-element styling off (which is why the bar looked native). Firefox has no ::-webkit-scrollbar, so it gets the standard properties instead. */
.idlsScroll::-webkit-scrollbar{ width:12px; height:12px; }
.idlsScroll::-webkit-scrollbar-track{ background:color-mix(in srgb, var(--line) 45%, transparent); border-radius:999px; margin:8px 0; }
.idlsScroll::-webkit-scrollbar-thumb{ background:color-mix(in srgb, var(--ink) 45%, var(--panel)); border:3px solid transparent; background-clip:content-box; border-radius:999px; min-height:40px; }
.idlsScroll::-webkit-scrollbar-thumb:hover{ background:color-mix(in srgb, var(--ink) 65%, var(--panel)); background-clip:content-box; }
.idlsScroll::-webkit-scrollbar-thumb:active{ background:var(--accent); background-clip:content-box; }
body.dark .idlsScroll::-webkit-scrollbar-thumb{ background:color-mix(in srgb, var(--ink) 60%, var(--panel)); background-clip:content-box; }
@supports not selector(::-webkit-scrollbar){
  .idlsScroll{ scrollbar-width:thin; scrollbar-color:color-mix(in srgb, var(--ink) 45%, var(--panel)) color-mix(in srgb, var(--line) 45%, transparent); }
}
.collabDlg.idlsScroll, .accDlg.idlsScroll{ padding-inline-end:6px; }
.accDlg{ max-height:min(72vh, 620px); overflow-y:auto; overflow-x:hidden; }

/* section hierarchy */
.accH{ margin:0; font-family:var(--hand, inherit); font-size:1.12rem; font-weight:700; letter-spacing:.01em; color:var(--ink); }
.accH.first{ margin-bottom:6px; }
.accH.accBoardTitle{ font-size:1.02rem; margin:14px 0 2px; padding-bottom:4px; border-bottom:1.5px solid var(--line); }
.accRule{ border:0; height:0; margin:18px 0 6px; border-top:2px dashed color-mix(in srgb, var(--line) 85%, var(--ink) 15%); }
.accSec{ margin-top:16px; }
.accSecHead{ display:flex; flex-direction:column; gap:1px; margin-bottom:8px; }
.accSub{ margin:0; font-size:0.76rem; color:var(--ink-soft); }
.accNone{ font-size:0.8rem; color:var(--ink-soft); padding:4px 0; }
.accList{ display:flex; flex-direction:column; gap:6px; }
.accRow{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; padding:6px 10px; border-radius:10px; background:color-mix(in srgb, var(--accent-soft) 28%, transparent); border:1px solid color-mix(in srgb, var(--line) 70%, transparent); }
.accRole{ margin-inline-start:auto; font-size:0.74rem; font-weight:700; letter-spacing:.03em; color:var(--ink-soft); text-transform:uppercase; }
.accSrc, .accEdit{ font-size:0.72rem; color:var(--ink-soft); }
.accDot{ flex:none; width:9px; height:9px; border-radius:50%; background:#3a9a5b; box-shadow:0 0 0 3px color-mix(in srgb, #3a9a5b 22%, transparent); }
.accDot.on{ background:#3a9a5b; }
.accRow .accDot:not(.on){ }

/* identity chips: avatar + name (+ a plain Guest tag) */
.idChip{ display:inline-flex; align-items:center; gap:6px; min-width:0; max-width:100%; padding:2px 10px 2px 3px; border-radius:999px; background:var(--panel); border:1px solid color-mix(in srgb, var(--line) 80%, transparent); font-size:0.8rem; color:var(--ink); }
.idAv{ flex:none; width:22px; height:22px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; font-size:0.72rem; font-weight:700; color:#2a2619; background:hsl(var(--h, 40) 70% 82%); border:1px solid hsl(var(--h, 40) 45% 55% / 0.55); }
body.dark .idAv{ color:#1c1829; }
.idName{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:600; }
.idTag{ flex:none; font-size:0.62rem; letter-spacing:.06em; text-transform:uppercase; padding:1px 6px; border-radius:999px; background:color-mix(in srgb, #ffd85a 40%, transparent); color:var(--ink); }
.idSub{ flex:none; font-size:0.7rem; color:var(--ink-soft); font-style:italic; }
.idChip.gone{ opacity:0.7; }
.idChip.gone .idName{ text-decoration:line-through; text-decoration-thickness:1px; }

/* invitation slips, re-spaced */
.invList{ gap:14px; }
.invCard{ gap:8px; padding:14px 16px 13px; }
.invHead{ align-items:baseline; }
.invRole{ font-size:1rem; }
.invWho{ font-size:0.84rem; color:var(--ink); }
.invMeta{ font-size:0.76rem; color:var(--ink-soft); line-height:1.5; }
.invKept{ font-style:italic; }
.invPeopleH{ margin-top:4px; font-size:0.66rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--ink-soft); }
.invPeople{ gap:6px; }
.invActs{ margin-top:6px; padding-top:10px; border-top:1px dashed color-mix(in srgb, var(--line) 80%, transparent); justify-content:space-between; }
.invCard.off{ opacity:0.78; }
.invCard.off .invRole, .invCard.off .invWho{ color:var(--ink-soft); }
.invState.off{ letter-spacing:.07em; }

/* Sharing & access: summary line + two tabs */
.accSummary{ font-size:0.8rem; color:var(--ink-soft); margin:0 0 10px; }
.accTabs{ display:flex; gap:4px; margin-bottom:12px; border-bottom:1.5px solid var(--line); }
.accTabBtn{ display:inline-flex; align-items:center; gap:7px; padding:8px 14px; margin-bottom:-1.5px; border:0; border-bottom:3px solid transparent; background:transparent; color:var(--ink-soft); font:inherit; font-size:0.88rem; font-weight:600; cursor:pointer; border-radius:8px 8px 0 0; }
.accTabBtn:hover{ color:var(--ink); background:color-mix(in srgb, var(--accent-soft) 40%, transparent); }
.accTabBtn.on{ color:var(--ink); border-bottom-color:var(--accent); }
.accTabBtn:focus-visible{ outline:2px solid var(--focus, var(--accent)); outline-offset:-2px; }
.accCount{ min-width:20px; text-align:center; padding:0 6px; border-radius:999px; font-size:0.72rem; font-weight:700; background:var(--accent-soft); color:var(--ink); }
.accTab[hidden]{ display:none; }

/* ===== v0.8.3.4 presence, editing leases, guest identity ===== */
/* header: everyone connected, as small overlapping coloured circles (me with a ring, guests with a dashed one) */
button.presAv{ cursor:pointer; padding:0; width:26px; height:26px; margin-left:-7px; background:hsl(var(--h, 200) 62% 80%); color:#2a2619; border:2px solid var(--panel); font:700 0.74rem 'Sora',sans-serif; box-shadow:0 1px 2px rgba(0,0,0,0.25), 0 0 0 1.5px hsl(var(--h, 200) 50% 45% / .7); }
body.dark button.presAv{ color:#1c1829; }
button.presAv:first-child{ margin-left:0; }
button.presAv.self{ box-shadow:0 1px 2px rgba(0,0,0,0.25), 0 0 0 2.5px var(--accent); }
button.presAv.guest{ box-shadow:0 1px 2px rgba(0,0,0,0.25), 0 0 0 1.5px var(--panel), 0 0 0 3px hsl(var(--h, 200) 50% 45% / .8); border-style:dashed; }
button.presAv.editing{ animation:presEdit 1.6s ease-in-out infinite; }
button.presAv:hover{ transform:translateY(-1px); z-index:2; }
button.presAv:focus-visible{ outline:2px solid var(--focus, var(--accent)); outline-offset:2px; z-index:3; }
button.presMore{ background:var(--accent-soft); color:var(--ink); }
.presAv.sm{ width:18px; height:18px; margin-left:-4px; font-size:0.6rem; background:hsl(var(--h, 200) 62% 80%); color:#2a2619; }
@keyframes presEdit{ 0%,100%{ transform:none; } 50%{ transform:translateY(-1.5px); } }
html[data-a11y-motion="reduce"] button.presAv.editing{ animation:none; }
@media (prefers-reduced-motion: reduce){ button.presAv.editing{ animation:none; } }
@media (max-width:520px){ button.presAv{ width:24px; height:24px; } .presenceBar{ margin-left:4px; } }
.presPop{ padding:10px 12px; max-width:min(300px, calc(100vw - 24px)); display:flex; flex-direction:column; gap:6px; }
.presPop .accRow{ background:transparent; }

/* board list: who is in a board right now, quiet */
.bRowPres{ display:flex; align-items:center; gap:3px; margin-top:2px; font-size:0.7rem; color:var(--ink-soft); }
.bRowPres[hidden]{ display:none; }
.bRowPresN{ margin-inline-start:6px; font-weight:600; }

/* a node someone else is editing right now: drawn by a board-level overlay (js/collab.js syncPeerLayer), above every paper, in THEIR colour */
.peerEditing{ outline:none; }
.peerLayer{ position:absolute; left:0; top:0; width:0; height:0; overflow:visible; z-index:var(--z-peer, 9990); pointer-events:none; }
.peerGlow{ position:absolute; box-sizing:border-box; border-radius:10px; pointer-events:none; border:3px solid hsl(var(--ph, 200) 72% 48%); box-shadow:0 0 0 4px hsl(var(--ph, 200) 85% 60% / .28), 0 0 22px 4px hsl(var(--ph, 200) 85% 55% / .55); animation:peerPulse 1.8s ease-in-out infinite; }
@keyframes peerPulse{ 0%,100%{ box-shadow:0 0 0 4px hsl(var(--ph, 200) 85% 60% / .28), 0 0 18px 3px hsl(var(--ph, 200) 85% 55% / .45); } 50%{ box-shadow:0 0 0 6px hsl(var(--ph, 200) 85% 60% / .34), 0 0 28px 6px hsl(var(--ph, 200) 85% 55% / .65); } }
html[data-a11y-motion="reduce"] .peerGlow{ animation:none; }
@media (prefers-reduced-motion: reduce){ .peerGlow{ animation:none; } }
.peerTab{ position:absolute; left:10px; top:-17px; display:inline-flex; align-items:center; gap:0; max-width:min(240px, 70vw); height:28px; padding:0 4px 0 3px; border-radius:999px; border:2px solid hsl(var(--ph, 200) 72% 48%); background:var(--panel, #fffdf4); color:var(--ink, #2a2619); font:700 0.74rem 'Sora',sans-serif; cursor:pointer; pointer-events:auto; box-shadow:0 2px 6px rgba(0,0,0,0.28); overflow:hidden; }
.peerTabAv{ flex:none; width:20px; height:20px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; background:hsl(var(--ph, 200) 70% 78%); color:#2a2619; font-size:0.7rem; }
.peerTab.inside{ top:10px; left:10px; }
.peerTabText{ max-width:0; opacity:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; transition:max-width .18s ease, opacity .18s ease, margin .18s ease; }
.peerTab:hover .peerTabText, .peerTab:focus-visible .peerTabText, .peerTab.open .peerTabText{ max-width:220px; opacity:1; margin:0 8px 0 6px; }
.peerTab:focus-visible{ outline:2px solid var(--focus, var(--accent)); outline-offset:2px; }
@media (pointer:coarse){ .peerTab{ height:32px; } .peerTabAv{ width:24px; height:24px; } }
.accWarn{ color:#8a5a00; background:color-mix(in srgb, #ffd85a 25%, transparent); padding:6px 9px; border-radius:8px; font-size:0.76rem; line-height:1.35; }
.accBuild{ font-size:0.68rem; color:var(--ink-soft); margin:2px 0 10px; letter-spacing:.03em; }

/* guest name slip: a small anchored paper, dismissible, never a toast */
.namePop{ position:fixed; z-index:var(--z-modal, 10070); width:min(300px, calc(100vw - 16px)); box-sizing:border-box; padding:14px 14px 12px; border-radius:6px 14px 10px 14px; background:var(--panel, #fffdf4); color:var(--ink); border:1px solid var(--line); box-shadow:0 12px 30px rgba(50,35,10,0.32); display:flex; flex-direction:column; gap:6px; }
.namePop::before{ content:""; position:absolute; top:-7px; left:22px; width:42px; height:12px; border-radius:2px; background:color-mix(in srgb, var(--accent) 22%, #fff 40%); opacity:.75; transform:rotate(-2deg); }
.namePop .npX{ position:absolute; top:6px; right:6px; width:30px; height:30px; border:0; border-radius:50%; background:transparent; color:var(--ink-soft); font-size:1.2rem; line-height:1; cursor:pointer; }
.namePop .npX:hover{ background:var(--accent-soft); color:var(--ink); }
.namePop .npTitle{ font-size:1rem; font-weight:700; padding-right:26px; }
.namePop .npHelp{ margin:0; font-size:0.76rem; color:var(--ink-soft); line-height:1.35; }
.namePop .npLbl{ font-size:0.74rem; font-weight:700; color:var(--ink-soft); margin-top:4px; }
.namePop .npActs{ display:flex; justify-content:flex-end; gap:8px; margin-top:6px; }
.namePop button:focus-visible, .namePop input:focus-visible{ outline:2px solid var(--focus, var(--accent)); outline-offset:2px; }
/* the Collaborate window is a scroll container: its parts keep their own height (a flex column would otherwise squash the new invite link row into the sections below it) */
.collabDlg > *{ flex:none; }
.collabOut{ display:block; }
.collabDlg .collabOut:empty{ display:none; }

/* phones: the left cluster (logo, save state, who is here) must fit the room the buttons leave it; anything wider ran underneath the search and account buttons */
@media (max-width:520px){
  .brand{ min-width:0; gap:4px; }
  .brand #syncPill{ font-size:0; padding:2px 5px; gap:0; margin-left:2px; min-width:0; }
  .brand .chev{ display:none; }
  /* who is here moves out of the crowded top bar into a small pill just under it (still tappable, never under a button) */
  .presenceBar{ position:fixed; top:calc(56px + env(safe-area-inset-top, 0px) + 6px); left:calc(10px + env(safe-area-inset-left, 0px)); margin:0; padding:2px 6px 2px 8px; border-radius:999px; background:color-mix(in srgb, var(--panel) 90%, transparent); border:1px solid var(--line); box-shadow:0 1px 5px rgba(0,0,0,0.2); z-index:calc(var(--z-peer, 9990) + 1); }
  button.presAv{ width:24px; height:24px; margin-left:-7px; }
  .presPop{ max-width:calc(100vw - 16px); }
}