/* Folio, a board seen in the browser: the Mac app's palette and cards (Theme.swift, CardLayer.swift). */
:root{
  --desk:#F4F3F0; --paper:#FFFFFF; --ink:#1B1B1D; --pencil:#7E7E84; --crease:rgba(27,27,29,.075);
  --dot:rgba(27,27,29,.11); --link:#7E7E84; --cobalt:#2742F5; --cobalt-soft:rgba(39,66,245,.14);
  --chrome:rgba(251,250,248,.86); --chrome-edge:rgba(27,27,29,.09); --hover:rgba(27,27,29,.055); --face:#E9E8E4;
  --shadow-a:rgba(42,36,24,.08); --shadow-b:rgba(42,36,24,.07); --col:#EDECE8; --head:rgba(0,0,0,.025); --fold:rgba(0,0,0,.05);
  --mini:#FFFFFF; --mini-edge:rgba(27,27,29,.2); --mini-line:rgba(27,27,29,.34); --mini-note:#F7E7A0; --mini-fold:#E2CC6E; --mini-band:rgba(27,27,29,.1);
  --t-yellow:#FBF1C7; --t-green:#DDF1DF; --t-blue:#DCE7FB; --t-violet:#E8E0FA; --t-pink:#F9E0E8; --t-grey:#EDEDEA;
  --sans:"Instrument Sans",-apple-system,"SF Pro Text","Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,"SF Mono",Menlo,monospace;
  color-scheme:light dark;
}
@media (prefers-color-scheme:dark){
  :root{
    --desk:#111113; --paper:#1F1F22; --ink:#F1F1EE; --pencil:#8C8C92; --crease:rgba(255,255,255,.09);
    --dot:rgba(255,255,255,.075); --link:#8C8C92; --cobalt:#5B73FF; --cobalt-soft:rgba(91,115,255,.22);
    --chrome:rgba(27,27,30,.86); --chrome-edge:rgba(255,255,255,.08); --hover:rgba(255,255,255,.06); --face:#3A3A3F;
    --shadow-a:rgba(0,0,0,.5); --shadow-b:rgba(0,0,0,.42); --col:#26262A; --head:rgba(255,255,255,.04); --fold:rgba(255,255,255,.06);
    --mini:#34343A; --mini-edge:rgba(255,255,255,.2); --mini-line:rgba(255,255,255,.42); --mini-note:#6B5A22; --mini-fold:#8C7730; --mini-band:rgba(255,255,255,.14);
    --t-yellow:#3D3520; --t-green:#223527; --t-blue:#1F2A40; --t-violet:#2C2540; --t-pink:#3D2430; --t-grey:#2E2E31;
  }
}
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{background:var(--desk);color:var(--ink);font-family:var(--sans);-webkit-font-smoothing:antialiased;overflow:hidden;
  overscroll-behavior:none;-webkit-text-size-adjust:100%}
button{font:inherit;color:inherit}
a{color:var(--cobalt)}
:focus-visible{outline:2px solid var(--cobalt);outline-offset:2px;border-radius:8px}

/* ── top bar ── */
.bar{position:fixed;z-index:10;top:12px;left:12px;right:12px;height:48px;display:flex;align-items:center;gap:6px;
  padding:0 8px 0 14px;background:var(--chrome);border:1px solid var(--chrome-edge);border-radius:14px;
  -webkit-backdrop-filter:saturate(1.4) blur(18px);backdrop-filter:saturate(1.4) blur(18px);
  box-shadow:0 1px 2px var(--shadow-a),0 10px 30px var(--shadow-b)}
.mark{display:flex;padding:4px 2px}
.mark img{width:26px;height:26px}
.crumbs{display:flex;align-items:center;min-width:0;flex:1;font-size:16px;white-space:nowrap;overflow:hidden}
.crumbs button{border:0;background:none;padding:6px 8px;border-radius:8px;cursor:pointer;color:var(--pencil);
  overflow:hidden;text-overflow:ellipsis;min-width:0;flex-shrink:1;max-width:240px}
.crumbs button:hover{background:var(--hover);color:var(--ink)}
.crumbs button:last-child{color:var(--ink);font-weight:550;flex-shrink:0;max-width:none;cursor:default;background:none}
.crumbs .sep{color:var(--pencil);opacity:.6;padding:0 1px;flex-shrink:0}
.end{display:flex;align-items:center;gap:10px;flex-shrink:0}
.people{display:flex}
.people span{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font-size:12px;font-weight:600;
  color:var(--ink);background:var(--face);margin-left:-6px;border:2px solid var(--paper);letter-spacing:.02em}
.people span.anon{color:var(--pencil)}
.people span:first-child{margin-left:0}
.live{display:flex;align-items:center;gap:7px;font-size:14px;color:var(--pencil);padding:0 8px 0 4px}
.live i{width:7px;height:7px;border-radius:50%;background:var(--pencil);opacity:.6}
.live.on i{background:#2EB15B;opacity:1;box-shadow:0 0 0 3px rgba(46,177,91,.16);animation:breathe 2.4s ease-in-out infinite}
.live.off i{background:#E2A13B;opacity:1}
@keyframes breathe{50%{box-shadow:0 0 0 5px rgba(46,177,91,.06)}}

/* ── the board ── */
.desk{position:fixed;inset:0;touch-action:none;cursor:grab;
  background-image:radial-gradient(circle,var(--dot) 1.1px,transparent 1.4px);background-size:24px 24px}
.desk.panning{cursor:grabbing}
.world{position:absolute;left:0;top:0;transform-origin:0 0;will-change:transform}
.cards{position:absolute;left:0;top:0}
.ink{position:absolute;left:0;top:0;width:1px;height:1px;pointer-events:none}
.ink .lbl{font:500 12px var(--sans);fill:var(--pencil)}
.ink .lblbg{fill:var(--desk)}

.card{position:absolute;border-radius:12px;background:var(--paper);overflow:visible;
  box-shadow:0 0 0 .5px var(--crease),0 1px 1.2px var(--shadow-a),0 4px 14px var(--shadow-b)}
.card > .in{border-radius:12px;overflow:hidden;position:relative}
.card.bare{background:none;box-shadow:none}
.card.bare > .in{overflow:visible}
.card.clickable{cursor:pointer}
.card.yellow{background:var(--t-yellow)}.card.green{background:var(--t-green)}.card.blue{background:var(--t-blue)}
.card.violet{background:var(--t-violet)}.card.pink{background:var(--t-pink)}.card.grey{background:var(--t-grey)}
.card .cink{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;border-radius:12px;overflow:hidden}

.note{padding:18px;font-size:13px;line-height:1.45;color:var(--pencil);overflow-wrap:anywhere}
.note .ti{font-size:15px;font-weight:600;color:var(--ink);line-height:1.35}
.note .ti + .ln{margin-top:4px}
.ln{min-height:1.45em;margin-bottom:3px}
.ln.h1{font-size:17px;font-weight:600;color:var(--ink)}
.ln.h2{font-size:14px;font-weight:600;color:var(--ink)}
.ln.li{display:flex;gap:0}.ln.li > b{flex:0 0 14px;font-weight:400}
.ln strong{font-weight:600;color:var(--ink)}
.ln mark{background:rgba(255,214,10,.42);color:inherit;border-radius:2px;padding:0 1px}
.ln code{font-family:var(--mono);font-size:.92em;background:var(--hover);border-radius:4px;padding:0 3px}
.ln u{text-underline-offset:2px}
.ln a{text-underline-offset:2px}
.empty-note{height:74px}

.todo{padding:18px}
.todo .ti{font-size:14px;font-weight:600;line-height:1.35;margin-bottom:10px;overflow-wrap:anywhere}
.todo .it{display:flex;gap:10px;align-items:flex-start;font-size:13px;line-height:1.4;min-height:19px;margin-bottom:8px;overflow-wrap:anywhere}
.todo .it:last-child{margin-bottom:0}
.todo .bx{flex:0 0 15px;height:15px;margin-top:2px;border-radius:4.5px;border:1.5px solid var(--pencil);display:grid;place-items:center}
.todo .it.done .bx{background:var(--cobalt);border:0}
.todo .it.done .tx > span{color:var(--pencil);text-decoration:line-through}
/* #581 a to-do item's person and date (view.js itemChips, todo.js) */
.todo .it .tx{flex:1;min-width:0}
.todo .chips{display:flex;flex-wrap:wrap;gap:5px;margin:5px 0 1px}
.todo .chip{height:20px;padding:0 8px;border-radius:10px;background:var(--hover);color:var(--pencil);font-size:11px;font-weight:600;line-height:20px;
  max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.todo .chip.late{background:rgba(229,72,77,.14);color:#D4383D}
body.editing .todo .chips{cursor:pointer}
.todo .itset{flex:none;display:grid;place-items:center;width:22px;height:19px;margin-right:-6px;padding:0;border:0;border-radius:6px;background:none;
  color:var(--pencil);cursor:pointer;opacity:0;transition:opacity .15s}
.todo .it:hover .itset,.card.sel .itset,.todo .itset:focus-visible{opacity:1}
.todo .itset:hover{background:var(--hover);color:var(--ink)}
@media (hover:none){.todo .itset{opacity:1}}
@media (prefers-color-scheme:dark){.todo .chip.late{color:#FF8A8E}}
.itembox,.iconbox,.stripebox,.mentionbox{position:fixed;background:var(--paper);border:1px solid var(--chrome-edge);border-radius:14px;
  box-shadow:0 1px 2px var(--shadow-a),0 16px 40px var(--shadow-b);animation:pop .2s cubic-bezier(.2,.9,.3,1.2)}
@keyframes pop{from{opacity:0;transform:scale(.95)}}
.itembox{z-index:13;width:256px;padding:6px;transform-origin:0 0}
.itembox[hidden],.mentionbox[hidden]{display:none}
.itembox .who{max-height:170px;overflow:auto;padding-bottom:5px;margin-bottom:5px;border-bottom:1px solid var(--crease)}
.itembox .who button,.mentionbox button{display:flex;align-items:center;gap:9px;width:100%;border:0;background:none;padding:6px 8px;border-radius:8px;
  cursor:pointer;font:500 14.5px var(--sans);color:var(--ink);text-align:left}
.itembox .who button:hover,.mentionbox button:hover,.mentionbox button.on{background:var(--hover)}
.itembox .who .nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.itembox .who b{flex:none;width:14px;color:var(--cobalt)}
.itembox .face,.mentionbox .face{width:24px;height:24px;font-size:10.5px}
.itembox .who p{margin:6px 8px;font-size:14px;color:var(--pencil)}
.itembox .month{display:flex;align-items:center;gap:2px;padding:2px 2px 4px 9px}
.itembox .month b{flex:1;font-size:14.5px;font-weight:600}
.itembox .month b::first-letter{text-transform:uppercase}
.itembox .month button{border:0;background:none;width:30px;height:30px;border-radius:8px;cursor:pointer;font-size:19px;line-height:1;color:var(--pencil)}
.itembox .month button:hover,.itembox .days button:hover,.itembox .foot button:hover{background:var(--hover);color:var(--ink)}
.itembox .days{display:grid;grid-template-columns:repeat(7,1fr);gap:1px;padding:0 3px}
.itembox .days em{font-style:normal;font-size:11px;font-weight:600;color:var(--pencil);text-align:center;padding:4px 0 5px;text-transform:uppercase}
.itembox .days button{border:0;background:none;aspect-ratio:1;border-radius:50%;padding:0;cursor:pointer;font:500 13px var(--sans);color:var(--ink);font-variant-numeric:tabular-nums}
.itembox .days button.today{color:var(--cobalt);font-weight:700}
.itembox .days button.on,.itembox .days button.on:hover{background:var(--cobalt);color:#fff}
.itembox .foot{display:flex;justify-content:space-between;padding:5px 2px 1px}
.itembox .foot button{border:0;background:none;padding:6px 8px;border-radius:8px;cursor:pointer;font:500 13.5px var(--sans);color:var(--pencil)}

.swatch{padding:8px 8px 12px}
.swatch .chip{height:96px;border-radius:6px}
.swatch .nm{font-size:12px;font-weight:500;margin:8px 4px 0}
.swatch .hx{font:11px var(--mono);color:var(--pencil);margin:2px 4px 0}

.boardc{padding:18px 12px 16px;text-align:center}
.boardc .tile{width:64px;height:64px;margin:0 auto 12px}
.boardc .tile img{display:block;width:100%;height:100%}
.boardc .nm{font-size:13px;font-weight:500;overflow-wrap:anywhere}
.boardc .sub{font-size:11px;color:var(--pencil);margin-top:2px}
/* #581 a board card inside a column is a compact row: thumbnail, name, how many cards (view.js layoutColumns, showPeek) */
.boardc .cnt:empty{display:none}
.boardc .tile .cov{border-radius:9px;object-fit:cover}
.boardc .tile:has(.cov),.card.asrow .boardc .tile{padding:0;background:none;box-shadow:none}
.card.asrow .boardc{display:flex;align-items:center;gap:11px;padding:8px 12px 8px 8px;text-align:left}
.card.asrow .boardc .tile{flex:none;width:40px;height:40px;margin:0}
.card.asrow .boardc .tx{min-width:0}
.card.asrow .boardc .nm{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.pic{display:block;width:100%;position:relative;overflow:hidden;background:var(--crease)}
.pic img,.pic video{position:absolute;display:block;max-width:none;user-select:none;-webkit-user-drag:none}
.card.bare .pic{background:none}
.cap{padding:11px 12px 12px;font-size:13px;line-height:1.4;overflow-wrap:anywhere}
.play{position:absolute;left:50%;top:50%;width:46px;height:46px;margin:-23px 0 0 -23px;border-radius:50%;background:rgba(0,0,0,.45);
  display:grid;place-items:center;pointer-events:none}
.play svg{width:16px;height:16px;margin-left:3px}
.placeholder{position:absolute;inset:0;display:grid;place-items:center;text-align:center;font-size:12px;color:var(--pencil);padding:12px}

.link .meta{padding:14px}
.link .tt{font-size:13px;font-weight:500;line-height:1.35;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}
.link .st{font-size:11px;color:var(--pencil);margin-top:3px}
.link iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

.file,.audio{padding:14px;display:flex;gap:12px;align-items:center;min-height:68px}
.file .ic{flex:0 0 40px;height:40px;border-radius:9px;background:var(--desk);display:grid;place-items:center;color:var(--pencil);font:600 10px var(--sans);text-transform:uppercase}
.file .nm,.audio .nm{font-size:13px;font-weight:500;overflow-wrap:anywhere}
.file .sz{font-size:11px;color:var(--pencil);margin-top:2px}
.audio{flex-direction:column;align-items:stretch;gap:8px}
.audio audio{width:100%;height:34px}

.column{padding:14px}
.column .hd{display:flex;justify-content:space-between;font-size:13.5px;font-weight:600;gap:8px}
.column .hd span:last-child{font-size:12px;font-weight:500;color:var(--pencil)}
/* #581 the stripe at the left of a column's title: its colorHex, or pencil grey */
.column .hd{position:relative;padding-left:11px}
.column .hd .stripe{position:absolute;left:0;top:1px;bottom:1px;width:3px;border-radius:2px;background:var(--pencil);opacity:.45}
.column .hd .stripe + span{flex:1;min-width:0;overflow-wrap:anywhere}
.column .hint{text-align:center;font-size:12.5px;color:var(--pencil);font-weight:500;margin-top:34px}
.card.columnc{background:var(--col);box-shadow:0 0 0 .5px var(--crease)}

.table{display:grid;font-size:13px}
.table .c{padding:8px 10px;border-right:.5px solid var(--crease);border-bottom:.5px solid var(--crease);overflow-wrap:anywhere;min-height:32px;line-height:1.35}
.table .c.last{border-right:0}
.table .c.lastrow{border-bottom:0}
.table .c.h{font-weight:600;background:var(--head)}
.table .c.n{text-align:right;font-variant-numeric:tabular-nums}
.table .c.f{color:var(--cobalt);font-weight:600}

.doc{padding:18px;position:relative}
.doc .row{display:flex;gap:10px;align-items:flex-start}
.doc .row svg{flex:0 0 20px;margin-top:0}
.doc .tt{font-size:15px;font-weight:600;line-height:1.35;overflow-wrap:anywhere}
.doc .pv{margin-top:10px;font-size:13px;line-height:1.45;color:var(--pencil);max-height:8.8em;overflow:hidden}
.doc .wc{font-size:11.5px;font-weight:500;color:var(--pencil);margin-top:8px}
.doc .fold{position:absolute;right:0;top:0;width:18px;height:18px;background:linear-gradient(225deg,var(--desk) 50%,var(--fold) 50%)}
/* #581 a document's cover and icon on its card */
.doc .em{flex:0 0 20px;font-size:17px;line-height:20px;text-align:center}
.card.covered .doc{padding:0 0 16px}
.card.covered .doc > :not(.dcov){margin-left:18px;margin-right:18px}
.doc .dcov{margin-bottom:14px}
.doc .dcov img{inset:0;width:100%;height:100%;object-fit:cover}
/* #581 a document open beside the board (document.js): the panel, and the board's chrome making room for it */
.docpanel{position:fixed;z-index:15;top:0;right:0;bottom:0;background:var(--paper);border-left:1px solid var(--chrome-edge);box-shadow:-14px 0 40px -22px var(--shadow-b)}
.docpanel[hidden]{display:none}
.docpanel.in{animation:dock-in .42s cubic-bezier(.16,1,.3,1)}
@keyframes dock-in{from{transform:translateX(48px);opacity:0}}
body.docked .desk{right:var(--docked)}
body.docked .bar,body.docked .panel,body.docked .sharebox,body.docked .acct{right:calc(var(--docked) + 12px)}
body.docked .dock,body.docked .penbar,body.docked .toast{left:calc((100vw - var(--docked)) / 2)}
.bar,.zoom{transition:right .42s cubic-bezier(.16,1,.3,1)}
.dock{transition:left .42s cubic-bezier(.16,1,.3,1)}
body.resizing{cursor:col-resize;user-select:none;-webkit-user-select:none}
body.resizing .bar,body.resizing .zoom,body.resizing .dock{transition:none}
.docpanel .grip{position:absolute;z-index:3;left:-5px;top:0;bottom:0;width:10px;cursor:col-resize}
.docpanel .grip::after{content:"";position:absolute;left:4px;top:0;bottom:0;width:2px;background:var(--cobalt);opacity:0;transition:opacity .15s}
.docpanel .grip:hover::after,body.resizing .docpanel .grip::after{opacity:1}
.docpanel .x{position:absolute;z-index:2;top:12px;right:14px;width:36px;height:36px;border:0;border-radius:50%;background:var(--chrome);color:var(--ink);
  font-size:23px;line-height:1;cursor:pointer;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:0 0 0 1px var(--chrome-edge)}
.docpanel .x:hover{background:var(--paper)}
.docpanel .sheet{height:100%;overflow:auto;overscroll-behavior:contain}
.docpanel .cover{height:236px;background:var(--crease)}
.docpanel .cover[hidden]{display:none}
.docpanel .cover img{display:block;width:100%;height:100%;object-fit:cover}
.docpanel .col{max-width:700px;margin:0 auto;padding:68px 48px 90px}
.docpanel .col.covered{padding-top:0}
.docpanel .top{display:flex;align-items:flex-end;gap:12px;margin-bottom:18px}
.docpanel .col.covered .top{margin-top:-36px;position:relative}
.docpanel .dicon{flex:none;display:grid;place-items:center;width:72px;height:72px;padding:0;border:0;border-radius:18px;background:var(--paper);
  box-shadow:0 0 0 .5px var(--crease),0 1px 2px var(--shadow-a),0 8px 20px var(--shadow-b);transition:transform .25s cubic-bezier(.3,1.4,.4,1)}
.docpanel button.dicon{cursor:pointer}
.docpanel button.dicon:hover{transform:scale(1.05)}
.docpanel .dicon .em{font-size:40px;line-height:1}
.docpanel .dicon svg{width:30px;height:30px}
.docpanel .acts{display:flex;gap:2px;padding-bottom:2px}
.docpanel .acts button{border:0;background:none;padding:7px 10px;border-radius:8px;font:500 15px var(--sans);color:var(--pencil);cursor:pointer}
.docpanel .acts button:hover{background:var(--hover);color:var(--ink)}
.docpanel .acts button[hidden]{display:none}
.docpanel .dtitle{display:block;width:100%;margin:0;padding:0;border:0;outline:0;resize:none;overflow:hidden;background:none;color:var(--ink);
  font:600 34px/1.2 var(--sans);letter-spacing:-.015em;overflow-wrap:anywhere}
.docpanel .dread,.docpanel .dtext{margin-top:18px;font:400 18px/1.6 var(--sans);color:var(--ink);overflow-wrap:anywhere}
.docpanel .dtext{display:block;width:100%;min-height:42vh;padding:0;border:0;outline:0;resize:none;overflow:hidden;background:none}
.docpanel .dtext[hidden],.docpanel .dread[hidden]{display:none}
.docpanel ::placeholder{color:var(--pencil);opacity:.7}
body.editing .docpanel .dread{cursor:text;min-height:42vh}
.docpanel .dread .ln{margin-bottom:6px;min-height:1.6em}
.docpanel .dread .ln.h1{font-size:26px;line-height:1.3;margin-top:16px}
.docpanel .dread .ln.h2{font-size:21px;line-height:1.35;margin-top:12px}
.docpanel .dread .ln.li > b{flex:0 0 24px}
.docpanel .dwords{margin:30px 0 0;font-size:14.5px;font-weight:500;color:var(--pencil)}
.iconbox{z-index:16;width:316px;padding:8px;transform-origin:0 0}
.iconbox .grid{display:grid;grid-template-columns:repeat(8,1fr);gap:2px}
.iconbox .grid button{aspect-ratio:1;padding:0;border:0;border-radius:9px;background:none;font-size:22px;line-height:1;cursor:pointer}
.iconbox button:hover{background:var(--hover)}
.iconbox .grid button.on{background:var(--cobalt-soft)}
.iconbox .none{display:block;width:100%;margin-top:6px;padding:9px;border:0;border-radius:9px;background:none;font:500 14.5px var(--sans);color:var(--pencil);cursor:pointer}
@media (max-width:759px){
  .docpanel{border-left:0}
  .docpanel .grip{display:none}
  .docpanel .col{padding:64px 22px 70px}
  .docpanel .dtitle{font-size:28px}
}
@media (prefers-reduced-motion:reduce){.docpanel.in,.itembox,.iconbox,.stripebox,.mentionbox,.cbadge.forme,.dropstack i{animation:none}.bar,.zoom,.dock{transition:none}}

.pic.sk{background:none}
.pic .hint{position:absolute;inset:0;display:grid;place-items:center;font-size:12.5px;font-weight:500;color:var(--pencil)}

.labels{display:flex;flex-wrap:wrap;gap:6px;padding:0 12px 12px}
.labels span{display:inline-flex;align-items:center;gap:6px;height:20px;padding:0 10px 0 8px;border-radius:10px;font-size:11px;font-weight:600}
.labels i{width:6px;height:6px;border-radius:50%}
.labels.over{position:absolute;left:0;right:0;bottom:0;padding:0 12px 10px}
.labels.over span{background:rgba(0,0,0,.5)!important;color:#fff}

/* ── zoom ── */
.zoom{position:fixed;z-index:10;right:12px;bottom:calc(12px + env(safe-area-inset-bottom));display:flex;align-items:center;
  background:var(--chrome);border:1px solid var(--chrome-edge);border-radius:12px;padding:3px;
  -webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);box-shadow:0 1px 2px var(--shadow-a),0 8px 24px var(--shadow-b)}
.zoom button{border:0;background:none;height:34px;min-width:34px;border-radius:9px;cursor:pointer;font-size:18px;line-height:1;color:var(--ink)}
.zoom button:hover{background:var(--hover)}
.zoom .pct{font-size:13px;font-weight:500;min-width:54px;font-variant-numeric:tabular-nums;color:var(--pencil)}

/* ── states and toasts ── */
.state{position:fixed;inset:0;z-index:20;background:var(--desk);display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:24px}
.state[hidden]{display:none}
.state .logo{width:60px;height:60px;margin-bottom:26px}
.state .t{font-size:20px;font-weight:550;margin:0}
.state .s{font-size:16px;color:var(--pencil);margin:8px 0 0;max-width:26em;line-height:1.5}
.state.loading .logo{animation:pulse 1.4s ease-in-out infinite}
@keyframes pulse{50%{opacity:.35}}
.toast{position:fixed;z-index:30;left:50%;bottom:calc(24px + env(safe-area-inset-bottom));transform:translate(-50%,20px);opacity:0;pointer-events:none;
  background:var(--ink);color:var(--paper);font-size:15px;padding:10px 18px;border-radius:99px;transition:opacity .25s,transform .35s cubic-bezier(.3,1.4,.4,1)}
.toast.show{opacity:1;transform:translate(-50%,0)}

@media (max-width:600px){
  .bar{top:calc(8px + env(safe-area-inset-top));left:8px;right:8px}
  .crumbs{font-size:16px}
  .crumbs button:not(:last-child){max-width:90px}
  .live span{display:none}
  .people span:nth-child(n+4){display:none}
}
@media (prefers-reduced-motion:reduce){.live.on i,.state.loading .logo{animation:none}}

/* ── editing (edit.js) ── */
body.editing .desk{cursor:default}
body.editing .card{cursor:default}
body.editing .card.clickable{cursor:default}
.desk.dragging,.desk.dragging *{cursor:grabbing!important}
.card.sel{box-shadow:0 0 0 2px var(--cobalt),0 1px 2px var(--shadow-a),0 10px 28px var(--shadow-b)}
.card.elsewhere,.card.inhand{box-shadow:0 0 0 2px #2EB15B,0 1px 2px var(--shadow-a)}
.card.typing{visibility:hidden}
.desk.dropping{box-shadow:inset 0 0 0 3px var(--cobalt-soft)}
/* #581 several files dragged over the board: a stack with their number follows the pointer (drop.js) */
.dropstack{position:fixed;z-index:40;left:0;top:0;width:44px;height:56px;pointer-events:none}
.dropstack[hidden]{display:none}
.dropstack i{position:absolute;inset:0;border-radius:7px;background:var(--paper);color:var(--pencil);transform:translateX(var(--x,0)) rotate(var(--r,0deg));
  box-shadow:0 0 0 .5px var(--crease),0 1px 2px var(--shadow-a),0 6px 16px var(--shadow-b);animation:fan .34s cubic-bezier(.3,1.4,.4,1) both}
.dropstack i:nth-last-of-type(2){--r:-9deg;--x:-9px}
.dropstack i:nth-last-of-type(3){--r:8deg;--x:9px}
@keyframes fan{from{transform:none}}
.dropstack svg{display:block;width:100%;height:100%}
.dropstack b{position:absolute;top:-9px;right:-12px;min-width:22px;height:22px;padding:0 6px;border-radius:11px;background:var(--cobalt);color:#fff;
  font:600 12px/22px var(--sans);text-align:center;box-shadow:0 0 0 2px var(--desk)}
.editor{position:absolute;z-index:5;resize:none;overflow:hidden;margin:0;border:0;outline:none;border-radius:12px;
  background:var(--paper);color:var(--ink);font:400 14px/1.45 var(--sans);padding:12px 14px;
  box-shadow:0 0 0 2px var(--cobalt),0 10px 30px var(--shadow-b)}
.editor::first-line{font-weight:600}
.editor.k-link,.editor.k-image,.editor.k-video,.editor.cell{font-weight:400}
.editor.k-link::first-line,.editor.k-image::first-line,.editor.k-video::first-line,.editor.cell::first-line,.editor.k-board::first-line{font-weight:400}
.editor.cell{padding:8px 10px;font-size:13px;line-height:1.35;box-shadow:inset 0 0 0 2px var(--cobalt)}
.editor.cell.h,.editor.cell.h::first-line{font-weight:600}
.editor.k-board{text-align:center}
.dock{position:fixed;z-index:10;left:50%;transform:translateX(-50%);bottom:calc(12px + env(safe-area-inset-bottom));display:flex;padding:6px;
  background:var(--chrome);border:1px solid var(--chrome-edge);border-radius:17px;
  -webkit-backdrop-filter:saturate(1.4) blur(18px);backdrop-filter:saturate(1.4) blur(18px);box-shadow:0 1px 2px var(--shadow-a),0 10px 30px var(--shadow-b)}
.dock .hold,.dock .make{display:flex;gap:2px;position:relative}
.dock .make{margin-left:7px;padding-left:7px;border-left:1px solid var(--chrome-edge)}
.dock button{position:relative;border:0;background:none;width:44px;height:44px;border-radius:11px;cursor:pointer;color:var(--ink);display:grid;place-items:center;touch-action:none}
.dock .hold svg{width:21px;height:21px}
/* the tool in your hand sits on an ink plate, which slides to the next one */
.dock .plate{position:absolute;left:0;top:0;width:44px;height:44px;border-radius:11px;background:var(--ink);transition:transform .18s cubic-bezier(.23,1,.32,1)}
.dock .hold:has(button:nth-of-type(2).on) .plate{transform:translateX(46px)}
.dock .hold:has(button:nth-of-type(3).on) .plate{transform:translateX(92px)}
.dock .hold:has(button:nth-of-type(4).on) .plate{transform:translateX(138px)}
.dock .hold button.on{background:none;color:var(--paper)}
/* the things you can make, as the small cards they put on the board */
.mini{width:32px;height:32px;display:block;filter:drop-shadow(0 1px 1.2px var(--shadow-a));transition:transform .16s cubic-bezier(.23,1,.32,1)}
.mini.logo{display:grid;place-items:center}
.mini.logo img{width:24px;height:24px;border-radius:7px;display:block}
.mini .card{fill:var(--mini);stroke:var(--mini-edge)}
.mini .well{fill:var(--col);stroke:var(--mini-edge)}
.mini .tint{fill:var(--mini-note);stroke:var(--mini-edge)}
.mini .fold{fill:var(--mini-fold)}
.mini .ink{stroke:var(--ink);stroke-width:1.5}
.mini .soft,.mini .rule{stroke:var(--mini-line);stroke-width:1.3}
.mini .rule{stroke-width:1}
.mini .box{stroke:var(--mini-line);stroke-width:1.2}
.mini .accent,.mini .stripe{fill:var(--cobalt);stroke:var(--cobalt)}
.mini .stripe{stroke-width:2}
.mini .tick{stroke:#fff;stroke-width:1.2}
.mini .band{fill:var(--mini-band)}
.mini .cover{fill:#E3A56B}
.mini .chip{fill:var(--cobalt)}
.mini .site{fill:var(--t-pink);stroke:var(--mini-edge)}
.mini .sky{fill:#2B7A99;stroke:var(--mini-edge)}
.mini .sun{fill:#FFD76A}
.mini .hill{fill:#17323D}
@media (hover:hover){
  .dock .hold button:not(.on):hover{background:var(--hover)}
  .dock .make button:hover .mini{transform:translateY(-3px) scale(1.07)}
}
.dock .make button:active .mini{transform:scale(.95)}
.dockghost{position:fixed;left:0;top:0;z-index:40;pointer-events:none;opacity:.92;transition:none;filter:drop-shadow(0 6px 10px var(--shadow-b))}
.docktip{position:fixed;z-index:30;display:flex;align-items:center;gap:8px;padding:6px 8px 6px 10px;border-radius:9px;background:var(--ink);color:var(--paper);
  font:500 13px var(--sans);white-space:nowrap;pointer-events:none}
.docktip[hidden]{display:none}
.docktip kbd{font:600 11px var(--sans);min-width:18px;text-align:center;padding:2px 5px;border-radius:5px;background:color-mix(in srgb,var(--paper) 18%,transparent)}
@media (prefers-reduced-motion:reduce){.dock .plate,.mini{transition:none}}
.share{border:0;background:var(--cobalt);color:#fff;font-size:14px;font-weight:550;height:32px;padding:0 14px;border-radius:9px;cursor:pointer}
.sharebox{position:fixed;z-index:12;top:68px;right:12px;width:min(340px,calc(100vw - 24px));padding:6px;background:var(--paper);
  border:1px solid var(--chrome-edge);border-radius:14px;box-shadow:0 1px 2px var(--shadow-a),0 16px 40px var(--shadow-b)}
.sharebox button{display:block;width:100%;text-align:left;border:0;background:none;padding:11px 12px;border-radius:9px;cursor:pointer}
.sharebox button:hover{background:var(--hover)}
.sharebox b{display:block;font-size:15px;font-weight:550}
.sharebox span{display:block;font-size:13.5px;color:var(--pencil);margin-top:2px;line-height:1.4}
.crumbs .renamable{cursor:text!important}
.crumbs .renamable:hover{background:var(--hover)!important}
.rename{font:550 16px var(--sans);color:var(--ink);background:var(--paper);border:0;outline:2px solid var(--cobalt);border-radius:8px;padding:5px 8px;min-width:0;width:16em;max-width:60vw}

/* ── your folios (/f) ── */
body.listing{overflow:auto}
.home{position:relative;max-width:1080px;margin:0 auto;padding:110px 24px 60px}
.home h1,.start h1{font-size:30px;font-weight:550;letter-spacing:-.01em;margin:0}
.home .head p,.start p{color:var(--pencil);font-size:17px;margin:8px 0 0;line-height:1.5;max-width:30em}
.home .wait,.home .hint{color:var(--pencil);font-size:17px}
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px;margin-top:34px}
.tile{display:flex;flex-direction:column;gap:6px;padding:22px 20px;border-radius:14px;background:var(--paper);color:var(--ink);text-decoration:none;
  border:0;text-align:left;cursor:pointer;font:inherit;box-shadow:0 1px 2px var(--shadow-a),0 8px 24px var(--shadow-b);transition:transform .3s cubic-bezier(.3,1.4,.4,1)}
.tile:hover{transform:translateY(-2px)}
.tile .fm img{display:block;width:38px;height:38px}
.tile .nm{font-size:17px;font-weight:550;margin-top:10px}
.tile .who{font-size:14px;color:var(--pencil)}
.tile.new{background:none;box-shadow:inset 0 0 0 1.5px var(--chrome-edge)}
.tile .plus{font-size:30px;line-height:24px;color:var(--cobalt);font-weight:300}
.home .acts{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}
.handoff{margin-top:18px;max-width:36em;padding:18px 20px;border-radius:14px;background:var(--paper)}
.handoff p{margin:0 0 12px!important;font-size:16px!important;color:var(--ink)!important}
.handoff .row{display:flex;gap:10px}
.handoff input{flex:1;min-width:0;font:500 15px var(--sans);padding:10px 14px;border-radius:10px;border:0;background:var(--desk);color:var(--ink)}
.start .hint{font-size:15px;margin-top:26px}
.start a.pill{text-decoration:none;display:inline-flex;align-items:center}
.start{max-width:30em;margin:0 auto;padding-top:22vh}
.start form{display:flex;gap:10px;margin-top:28px;flex-wrap:wrap}
.start input{flex:1;min-width:12em;font:500 17px var(--sans);padding:12px 16px;border-radius:12px;border:0;background:var(--paper);color:var(--ink);
  box-shadow:inset 0 0 0 1px var(--chrome-edge)}
.start input:focus{outline:2px solid var(--cobalt)}
.start input.code{font-size:24px;font-weight:600;letter-spacing:.16em;font-variant-numeric:tabular-nums;padding:9px 16px}
.start input.code::placeholder{color:var(--pencil);opacity:.45}
.start p b{color:var(--ink);font-weight:600}
.start .hint .textb{font-size:15px}
.pill{border:0;border-radius:99px;padding:12px 22px;font-size:16px;font-weight:550;cursor:pointer}
.pill{background:var(--paper);color:var(--ink);font-family:var(--sans);box-shadow:inset 0 0 0 1px var(--chrome-edge)}
.pill.dark{background:var(--ink);color:var(--desk);box-shadow:none}
@media (max-width:600px){.dock{left:12px;transform:none}.home{padding-top:90px}}
body.editing .toast{bottom:calc(72px + env(safe-area-inset-bottom))}
/* tools.js: the dock's tools, the pen bar, the bar over what's selected, labels, arrows */
.selbar .gap,.penbar .gap{width:1px;align-self:stretch;margin:6px 4px;background:var(--chrome-edge)}
body[data-tool="draw"] .desk,body[data-tool="arrow"] .desk{cursor:crosshair}
body[data-tool="erase"] .desk{cursor:cell}
body[data-tool="draw"] .desk,body[data-tool="erase"] .desk,body[data-tool="arrow"] .desk,body.pulling .desk{user-select:none;-webkit-user-select:none}
body[data-tool="draw"] .card,body[data-tool="erase"] .card,body[data-tool="arrow"] .card{cursor:inherit}
.penbar,.selbar{position:fixed;z-index:11;display:flex;align-items:center;gap:2px;padding:4px;background:var(--chrome);border:1px solid var(--chrome-edge);border-radius:12px;
  -webkit-backdrop-filter:saturate(1.4) blur(18px);backdrop-filter:saturate(1.4) blur(18px);box-shadow:0 1px 2px var(--shadow-a),0 10px 30px var(--shadow-b)}
.penbar{left:50%;transform:translateX(-50%);bottom:calc(70px + env(safe-area-inset-bottom))}
.penbar[hidden],.selbar[hidden]{display:none}
.penbar button,.selbar button{border:0;background:none;height:32px;min-width:32px;border-radius:8px;cursor:pointer;color:var(--ink);display:grid;place-items:center;font:500 14px var(--sans)}
.penbar button:hover,.selbar button:hover{background:var(--hover)}
.penbar button.on,.selbar button.on{background:var(--cobalt-soft);color:var(--cobalt)}
.sw i{width:16px;height:16px;border-radius:50%;display:block;box-shadow:inset 0 0 0 1px var(--chrome-edge)}
.pw i{width:16px;border-radius:9px;display:block}
.selbar .w{padding:0 10px;white-space:nowrap}
.labelsbox{position:fixed;z-index:12;width:240px;padding:6px;background:var(--paper);border:1px solid var(--chrome-edge);border-radius:12px;box-shadow:0 1px 2px var(--shadow-a),0 16px 40px var(--shadow-b)}
.labelsbox button{display:flex;align-items:center;gap:9px;width:100%;border:0;background:none;padding:8px 10px;border-radius:8px;cursor:pointer;color:var(--ink);font:500 14px var(--sans);text-align:left}
.labelsbox button:hover{background:var(--hover)}
.labelsbox button i{width:10px;height:10px;border-radius:50%;flex:none}
.labelsbox button span{flex:1}
.labelsbox button b{color:var(--cobalt)}
.labelsbox input{width:100%;box-sizing:border-box;margin-top:4px;font:500 14px var(--sans);padding:8px 10px;border-radius:8px;border:0;background:var(--desk);color:var(--ink)}
/* #581 the colour of a column's stripe, from the selected column's bar (tools.js stripeBox) */
.sw.stripe i{width:4px;height:18px;border-radius:2px;box-shadow:none}
.stripebox{z-index:12;display:flex;gap:2px;padding:4px;border-radius:12px;transform-origin:0 0}
.stripebox button{display:grid;place-items:center;height:32px;min-width:32px;border:0;border-radius:8px;background:none;cursor:pointer}
.stripebox button:hover{background:var(--hover)}
.stripebox button.on{background:var(--cobalt-soft)}
.adot{position:absolute;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;background:var(--cobalt);box-shadow:0 0 0 3px var(--paper);cursor:crosshair;z-index:5}
.card.target{box-shadow:0 0 0 2px var(--cobalt),0 1px 2px var(--shadow-a),0 10px 28px var(--shadow-b)}
.arrowlabel{position:absolute;transform:translate(-50%,-50%);font:500 12.5px var(--sans);padding:5px 9px;border-radius:8px;border:0;outline:2px solid var(--cobalt);background:var(--paper);color:var(--ink);width:160px;z-index:6}
@media (max-width:600px){.selbar{max-width:calc(100vw - 16px);overflow-x:auto}.selbar button{flex:none}.penbar{left:12px;transform:none}}
/* comments.js: bubbles on cards, the comments and history panels */
.cbadge{position:absolute;top:-9px;right:-9px;min-width:22px;height:22px;padding:0 6px;border-radius:11px;border:0;background:var(--cobalt);color:#fff;
  font:600 12px var(--sans);cursor:pointer;box-shadow:0 0 0 2px var(--desk);z-index:3}
.cbadge.add{opacity:0;background:var(--paper);color:var(--cobalt);box-shadow:0 0 0 1px var(--chrome-edge),0 2px 6px var(--shadow-b);transition:opacity .15s}
.card:hover .cbadge.add{opacity:1}
/* #581 mentions (mentions.js): @Name in cobalt, the list under the @, and the bubble of a card that mentions you */
.mention{color:var(--cobalt);font-weight:600}
.cm.forme{background:var(--cobalt-soft)}
.cbadge.forme{box-shadow:0 0 0 2px var(--desk),0 0 0 5px var(--cobalt-soft);animation:noticed .9s cubic-bezier(.3,1.4,.4,1)}
.cbadge.forme::before{content:"@";margin-right:1px}
@keyframes noticed{40%{transform:scale(1.25)}}
.mentionbox{z-index:14;padding:5px;border-radius:12px;animation:none}
.hist svg{display:none}
@media (max-width:600px){.hist span{display:none}.hist svg{display:block}.hist{padding:0 7px!important}}
.hist{display:inline-flex;align-items:center;border:0;background:var(--hover);color:var(--ink);font:550 14px var(--sans);height:32px;padding:0 12px;border-radius:9px;cursor:pointer}
.panel{position:fixed;z-index:12;top:68px;right:12px;bottom:12px;width:min(360px,calc(100vw - 24px));display:flex;flex-direction:column;background:var(--paper);
  border:1px solid var(--chrome-edge);border-radius:14px;box-shadow:0 1px 2px var(--shadow-a),0 16px 40px var(--shadow-b);overflow:hidden}
.panel header{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;padding:16px 18px 12px;border-bottom:1px solid var(--crease);position:relative}
.panel header b{font-size:17px;font-weight:600}
.panel header span{font-size:14px;color:var(--pencil);flex-basis:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding-right:30px}
.panel .x{position:absolute;top:10px;right:10px;border:0;background:none;font-size:24px;line-height:1;width:34px;height:34px;border-radius:8px;cursor:pointer;color:var(--pencil)}
.panel .x:hover{background:var(--hover)}
.panel .list{flex:1;overflow:auto;padding:8px 10px}
.panel .none{color:var(--pencil);font-size:15px;padding:10px 8px;line-height:1.5}
.cm{padding:10px 8px;border-radius:10px}
.cm .who{display:flex;gap:8px;align-items:baseline;font-size:14px}
.cm .who span{color:var(--pencil);font-size:13px}
.cm p{margin:4px 0 0;font-size:15px;line-height:1.45;white-space:pre-wrap;overflow-wrap:anywhere}
.cm.done{opacity:.55}
.cm .acts{display:flex;gap:4px;margin-top:6px}
.cm .acts button,.ver button{border:0;background:var(--hover);color:var(--ink);font:500 13px var(--sans);padding:5px 10px;border-radius:7px;cursor:pointer}
.panel form{display:flex;flex-direction:column;gap:8px;padding:12px;border-top:1px solid var(--crease)}
.panel textarea{font:400 15px/1.4 var(--sans);padding:10px 12px;border-radius:10px;border:0;background:var(--desk);color:var(--ink);resize:none}
.panel textarea:focus{outline:2px solid var(--cobalt)}
.panel form .pill{align-self:flex-end;padding:9px 18px;font-size:15px}
.ver{display:flex;align-items:center;gap:10px;padding:10px 8px;border-radius:10px}
.ver div{flex:1;display:flex;flex-direction:column;gap:2px}
.ver b{font-size:15px;font-weight:550}
.ver span{font-size:13.5px;color:var(--pencil)}
@media (max-width:600px){.dock{max-width:calc(100vw - 24px);overflow-x:auto;scrollbar-width:none}.dock button{flex:none}}
.handoff .pin{margin:14px 0 0!important}.handoff .pin b{font-size:26px;letter-spacing:.08em;margin-left:8px;font-variant-numeric:tabular-nums}
/* signing in (/f), passkeys */
.start .or{display:flex;align-items:center;gap:14px;margin:34px 0 14px;color:var(--pencil);font-size:15px}
.start .or::before,.start .or::after{content:"";flex:1;height:1px;background:var(--chrome-edge)}
.pill.wide{width:100%}
.start .acts{display:flex;gap:10px;flex-wrap:wrap;margin-top:28px}
.keep{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:22px;max-width:40em;padding:16px 18px;border-radius:14px;background:var(--cobalt-soft)}
.keep div{flex:1;min-width:16em;display:flex;flex-direction:column;gap:3px}
.keep b{font-size:16px;font-weight:600}
.keep span{font-size:15px;color:var(--ink);opacity:.75;line-height:1.45}
/* access.js: who sees a board */
.sharebox hr{border:0;height:1px;background:var(--crease);margin:6px 8px}
.boardc .priv{display:inline-flex;align-items:center;gap:4px;margin-top:4px}
.panel .opt{display:flex;gap:12px;align-items:flex-start;padding:12px 8px;border-radius:10px;cursor:pointer}
.panel .opt:hover{background:var(--hover)}
.panel .opt input{margin:3px 0 0;accent-color:var(--cobalt);width:17px;height:17px;flex:none}
.panel .opt b{display:block;font-size:15px;font-weight:550}
.panel .opt i{display:block;font-style:normal;font-size:13.5px;color:var(--pencil);margin-top:2px;line-height:1.4}
.panel .whos{margin:4px 0 0 37px;border-top:1px solid var(--crease);padding-top:6px}
.panel .whos[hidden]{display:none}
.panel .who{display:flex;align-items:center;gap:10px;padding:9px 6px;border-radius:9px;cursor:pointer;font-size:15px}
.panel .who:hover{background:var(--hover)}
.panel .who input{accent-color:var(--cobalt);width:16px;height:16px;margin:0}
.panel .who .nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.panel .who .rl{font-size:13px;color:var(--pencil)}
#access{bottom:auto;max-height:calc(100vh - 80px)}
/* phones: the title gives way, the zoom buttons go (pinch instead), panels become sheets from the bottom */
@media (max-width:600px){
  .crumbs button:last-child{flex-shrink:1;min-width:0;overflow:hidden;text-overflow:ellipsis}
  .end{gap:6px}
  .hist,.share{height:30px;padding:0 10px;font-size:13px}
  body.editing .zoom{display:none}
  .panel,#access{top:auto;left:8px;right:8px;bottom:calc(8px + env(safe-area-inset-bottom));width:auto;max-height:72vh}
  .sharebox{top:62px;right:8px;width:calc(100vw - 16px)}
  .start{padding-top:12vh}
  .start form .pill{flex:1}
}
/* i18n.js langSwitch: English · Español */
.langs{margin-top:44px;font-size:14px;color:var(--pencil)}
.langs button{border:0;background:none;padding:2px 2px;font:inherit;color:var(--pencil);cursor:pointer;text-decoration:underline;text-underline-offset:3px;text-decoration-color:transparent}
.langs button:hover{color:var(--ink)}
.langs button[aria-current]{color:var(--ink);font-weight:550;cursor:default}

/* ── signing in (edit.js showEntry): one question, then one way in ── */
.entry{position:relative}
.entry h1{text-wrap:balance}
.entry.in>*{animation:step .42s cubic-bezier(.16,1,.3,1) both}
.entry.in>:nth-child(2){animation-delay:.03s}.entry.in>:nth-child(n+3){animation-delay:.06s}
@keyframes step{from{opacity:0;transform:translateY(10px)}}
.entry .for{color:var(--ink);font-size:17px;margin-top:10px}
.entry .for b{font-weight:600}
.backb{display:grid;place-items:center;width:36px;height:36px;margin:0 0 14px -8px;border:0;border-radius:50%;background:none;color:var(--pencil);cursor:pointer}
.backb:hover{background:var(--hover);color:var(--ink)}
.backb .ic{width:22px;height:22px}
.entry .more{font-size:16px;color:var(--ink);margin-top:18px;padding:14px 16px;border-radius:12px;background:var(--cobalt-soft);max-width:none}
.textb{border:0;background:none;padding:0;font:inherit;color:var(--pencil);cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.textb:hover{color:var(--ink)}
.start a.pill.dark{color:var(--desk)}
.pill:disabled{opacity:.5;cursor:default}

/* ── your account (edit.js accountPanel) ── */
.me{display:flex;align-items:center;gap:10px;height:36px;margin-left:auto;padding:0 4px 0 12px;border:0;border-radius:99px;background:none;cursor:pointer;
  font:550 15px var(--sans);color:var(--ink);flex-shrink:0;max-width:50%}
.me:hover,.me[aria-expanded=true]{background:var(--hover)}
.me .nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.face{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;flex:none;font-size:12px;font-weight:600;color:var(--ink);background:var(--face);letter-spacing:.02em}
.acct{position:fixed;z-index:20;top:68px;right:12px;width:400px;max-width:calc(100vw - 24px);max-height:calc(100vh - 80px);overflow:auto;padding:6px 18px 8px;
  background:var(--paper);border:1px solid var(--chrome-edge);border-radius:16px;box-shadow:0 2px 6px var(--shadow-a),0 24px 60px -12px var(--shadow-b);
  opacity:0;transform:translateY(-6px) scale(.98);transform-origin:top right;transition:opacity .2s,transform .28s cubic-bezier(.16,1,.3,1)}
.acct.in{opacity:1;transform:none}
.acct header{display:flex;align-items:center;gap:14px;padding:14px 0 16px}
.acct header .face{width:48px;height:48px;font-size:18px}
.acct label{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.acct label span{font-size:13.5px;color:var(--pencil);padding-left:10px}
.acct label input{width:100%;font:580 19px var(--sans);color:var(--ink);background:none;border:0;border-radius:9px;padding:5px 10px;margin:0}
.acct label input:hover{background:var(--hover)}
.acct label input:focus{outline:2px solid var(--cobalt);background:none}
.arow{display:flex;align-items:center;flex-wrap:wrap;gap:8px 14px;padding:13px 0;border-top:1px solid var(--crease)}
.arow>div{flex:1 1 11em;min-width:0;display:flex;flex-direction:column;gap:2px}
.arow b{font-size:16px;font-weight:550}
.arow span{font-size:14.5px;color:var(--pencil);line-height:1.4}
.pill.small{padding:8px 15px;font-size:14.5px;flex:none;transition:background .15s,color .15s}
.pill.small:hover{background:var(--hover)}
.pill.small.dark:hover{background:var(--ink);opacity:.88}
.pill.sure{background:#D93A3F;color:#fff;box-shadow:none}
.pill.sure:hover{background:#C22F34}
.acct .handoff{margin:0 0 14px;padding:16px;background:var(--desk);max-width:none}
.acct .handoff input{background:var(--paper)}
.acct .handoff a.pill{text-decoration:none}
@media (max-width:600px){
  .me .nm{display:none}.me{padding:0 4px}
  .acct{top:auto;left:8px;right:8px;bottom:calc(8px + env(safe-area-inset-bottom));width:auto;max-width:none;max-height:80vh;transform:translateY(16px);transform-origin:bottom}
}
@media (prefers-reduced-motion:reduce){.entry.in>*{animation:none}.acct{transition:none}}
.arow .langs{margin:0;font-size:15px;flex:none}


/* ═════════ request #581, browser: the bar's Export · Present · Share, other people's pointers, the minimap, presenting ═════════ */
/* the bar's right end (view.html #boardActs; edit.js adds Share to it) */
.boardacts{display:flex;align-items:center;gap:2px}
.act{display:grid;place-items:center;border:0;background:none;height:32px;padding:0 10px;border-radius:9px;cursor:pointer;color:var(--ink);font:550 14px var(--sans)}
.act:hover{background:var(--hover)}
.act svg{display:none;width:20px;height:20px}
.boardacts .share{margin-left:6px}
/* pointers.js: Folio's arrow in ink and the person's name, the same for everyone */
.pointers{position:absolute;left:0;top:0;z-index:7;pointer-events:none}
.pointer{position:absolute;left:0;top:0;transition:transform .12s ease-out;will-change:transform}
.pointer .pt{transform:scale(var(--inv,1));transform-origin:0 0;animation:pointer-in .22s cubic-bezier(.3,1.4,.4,1)}
@keyframes pointer-in{from{opacity:0;transform:scale(calc(var(--inv,1)*.6))}}
.pointer svg{display:block;width:18px;height:20px;overflow:visible;filter:drop-shadow(0 1px 2px var(--shadow-b))}
.pointer path{fill:var(--ink);stroke:var(--paper);stroke-width:1.4;stroke-linejoin:round}
.pointer b{position:absolute;left:13px;top:17px;max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:550 12.5px/1 var(--sans);
  padding:5px 9px;border-radius:99px;background:var(--paper);color:var(--ink);box-shadow:0 0 0 .5px var(--chrome-edge),0 2px 8px var(--shadow-b)}
@media (prefers-color-scheme:dark){.pointer b{background:var(--ink);color:var(--paper)}}
/* minimap.js: bottom left, with the zoom buttons under it */
.zoom{right:auto;left:12px}
.minimap{position:fixed;z-index:10;left:12px;bottom:calc(62px + env(safe-area-inset-bottom));width:184px;height:124px;border-radius:12px;overflow:hidden;
  background:var(--paper);box-shadow:0 0 0 1px var(--chrome-edge),0 1px 2px var(--shadow-a),0 8px 24px var(--shadow-b);cursor:pointer;touch-action:none;
  opacity:0;transform:translateY(8px) scale(.96);transform-origin:0 100%;pointer-events:none;transition:opacity .18s,transform .32s cubic-bezier(.3,1.4,.4,1)}
.minimap.on{opacity:1;transform:none;pointer-events:auto}
.minimap canvas{display:block;width:100%;height:100%}
body.listing .minimap{display:none}
/* present.js: only the board */
.stage{position:fixed;inset:0;z-index:40;cursor:default}
.stage .leave{position:absolute;top:16px;right:16px;width:40px;height:40px;display:grid;place-items:center;border:0;border-radius:50%;cursor:pointer;
  background:var(--chrome);color:var(--ink);box-shadow:0 0 0 .5px var(--chrome-edge),0 8px 24px var(--shadow-b);opacity:0;transition:opacity .25s}
.stage .leave svg{width:20px;height:20px}
.stage.awake .leave,.stage .leave:focus-visible{opacity:1}
@media (hover:none){.stage .leave{opacity:.75}}
body.presenting :is(.bar,.dock,.zoom,.minimap,.selbar,.penbar,.panel,.sharebox,.labelsbox,.menu,.cbadge,.adot,.pointers){display:none!important}
@media (max-width:600px){
  .minimap{display:none}
  .act{width:30px;padding:0}
  .act span{display:none}
  .act svg{display:block}
  .boardacts .share{margin-left:4px}
}
@media (prefers-reduced-motion:reduce){.pointer,.minimap{transition:none}.pointer .pt{animation:none}}