/* ── LINE ICONS ──
   Shared stroke-drawing icon: inherits colour from its parent so any chrome can be
   tinted with a section colour. Used in the sidebar foot, home empty state, card
   placeholders — anywhere we're moving off emoji toward simple colourable icons. */
.lic{stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}

/* ── INLINE MENTION (formatted link) ── */
.mention{display:inline;box-decoration-break:clone;-webkit-box-decoration-break:clone;padding:1px 7px 2px 6px;border-radius:var(--r-sm);background:var(--sur);border:1px solid var(--bd);font-family:var(--fm);font-size:.82em;line-height:1.95;text-decoration:none;white-space:normal;cursor:pointer;transition:border-color var(--t-fast),background var(--t-fast)}
.mention:hover{border-color:var(--mu);background:var(--sur2)}
.mention img.mention-fav{width:14px;height:14px;border-radius:var(--r-xs);object-fit:cover;vertical-align:-3px;margin-right:5px}
.mention .mention-site{color:var(--mu);margin-right:5px}
.mention .mention-title{color:var(--tx)}
td .mention{font-size:11px}
.link-pop{position:fixed;z-index:650;background:var(--sur);border:1px solid var(--bd2);border-radius:var(--r-lg);box-shadow:var(--elev-2);padding:8px;display:none;gap:6px;width:300px}
.link-pop.open{display:flex}
.link-pop input{flex:1;background:var(--bg);border:1px solid var(--bd);border-radius:var(--r-sm);color:var(--tx);font-family:var(--fm);font-size:12px;padding:7px 9px;outline:none}
.link-pop input:focus{border-color:var(--ac)}
.link-pop button{background:var(--ac);color:#1a0810;border:none;border-radius:var(--r-sm);padding:7px 14px;font-family:var(--fm);font-size:12px;cursor:pointer}
/* ── #4 CALENDAR DRAG ── */
.cal-ev[draggable=true]{cursor:grab}
.cal-ev[draggable=true]:active{cursor:grabbing}
.cal-cell.cal-drop{background:var(--acs);outline:2px dashed var(--ac);outline-offset:-2px}
/* ── #3 TOAST + SHAKE ── */
.toast-wrap{position:fixed;top:18px;left:50%;transform:translateX(-50%);z-index:1200;display:flex;flex-direction:column;gap:8px;align-items:center;pointer-events:none}
.toast{background:var(--sur);border:1px solid var(--bd2);border-left:3px solid var(--ac);border-radius:var(--r-lg);padding:10px 16px;font-size:12px;color:var(--tx);box-shadow:var(--elev-2);font-family:var(--fm);animation:toastIn var(--t-slow) ease;max-width:80vw}
@keyframes toastIn{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}
.toast.out{animation:toastOut .25s ease forwards}
@keyframes toastOut{to{opacity:0;transform:translateY(-10px)}}
.toast{display:flex;align-items:center;gap:9px}
.toast-spin{width:13px;height:13px;flex:0 0 13px;border:2px solid var(--bd2);border-top-color:var(--ac);border-radius:50%;animation:toastSpin .7s linear infinite}
.toast-tick{flex:0 0 13px;color:#3fbf6b;font-weight:700}
.toast.is-err{border-left-color:#e2585c}.toast.is-err .toast-tick{color:#e2585c}
/* Sticky toast with an action button (service-worker "update ready" prompt).
   toast-wrap is pointer-events:none, so the sticky variant re-enables it. */
.toast-sticky{pointer-events:auto}
.toast-act{background:var(--ac);color:#fff;border:none;border-radius:var(--r-md);padding:4px 11px;font-size:11px;font-weight:600;font-family:var(--fm);cursor:pointer}
.toast-act:hover{filter:brightness(1.08)}
.toast-act.ghost{background:transparent;color:var(--mu)}
.toast-act.ghost:hover{filter:none;color:var(--tx)}
@keyframes toastSpin{to{transform:rotate(360deg)}}
.tip{position:fixed;z-index:3000;background:var(--sur);border:1px solid var(--bd2);color:var(--tx);font-size:11px;font-family:var(--fm);padding:5px 9px;border-radius:var(--r-md);box-shadow:var(--elev-1);pointer-events:none;opacity:0;transition:opacity .13s ease;max-width:240px;line-height:1.4;display:none;white-space:normal}
.tip.show{opacity:1}
@keyframes shakeX{0%,100%{transform:translateX(0)}15%{transform:translateX(-7px)}30%{transform:translateX(6px)}45%{transform:translateX(-5px)}60%{transform:translateX(4px)}75%{transform:translateX(-2px)}}
.shake-bad{animation:shakeX var(--t-fast) ease;opacity:.55!important}
/* ── #8 NAV: back/forward + breadcrumbs ── */
.tp-left{display:flex;align-items:center;gap:6px;min-width:0}
.nav-btn{background:none;border:1px solid var(--bd);border-radius:var(--r-sm);color:var(--mu);cursor:pointer;width:26px;height:26px;display:flex;align-items:center;justify-content:center;font-size:16px;line-height:1;transition:border-color var(--t-fast),color var(--t-fast),background var(--t-fast);flex-shrink:0}
.nav-btn:hover:not(:disabled){border-color:var(--mu);color:var(--tx);background:var(--sur)}
.nav-btn:disabled{opacity:.32;cursor:default}
/* Sidebar toggle reads as "active" while the sidebar is collapsed. */
#sb-toggle.collapsed{color:var(--ac);border-color:color-mix(in srgb,var(--ac) 40%,var(--bd))}
.breadcrumbs{display:flex;align-items:center;gap:6px;font-family:var(--fs);font-size:17px;font-weight:var(--dw);letter-spacing:.04em;min-width:0;overflow:hidden;white-space:nowrap}
.bc-sep{color:var(--mu);font-size:13px;opacity:.6;flex-shrink:0}
.bc-link{color:var(--mu);cursor:pointer;transition:color var(--t-fast);flex-shrink:0}
.bc-link:hover{color:var(--tx)}
.bc-cur{color:var(--tx);overflow:hidden;text-overflow:ellipsis}

/* ── Motion polish (item 5) ──
   Consistent, gentler easing across interactive surfaces + a subtle view fade.
   Wrapped in prefers-reduced-motion so it never fights accessibility settings. */
@media (prefers-reduced-motion: no-preference){
  :root{ --ease-out:cubic-bezier(.22,.61,.36,1); }
  .dc,.home-card,.rec-card,.card{
    transition:border-color var(--t-slow) var(--ease-out), transform var(--t-slow) var(--ease-out), box-shadow var(--t-slow) var(--ease-out);
  }
  .dc:hover,.home-card:hover,.rec-card:hover{
    transform:translateY(-2px); box-shadow:0 12px 26px -16px rgba(0,0,0,.55);
  }
  .doc-row{ transition:background .16s var(--ease-out), border-color .16s var(--ease-out); }
  .prop-tag,.chip,.cm-it,.dpp-it{ transition:background var(--t-med) var(--ease-out), color var(--t-med) var(--ease-out), border-color var(--t-med) var(--ease-out); }
  .view:not(.hidden){ animation:view-fade .24s var(--ease-out); }
  @keyframes view-fade{ from{opacity:0; transform:translateY(5px)} to{opacity:1; transform:none} }
}

/* ── TEMPLATE GALLERY (pre-built workspaces) ── */
.tpl-modal{position:fixed;inset:0;z-index:1200;display:none}
.tpl-modal.open{display:block}
.tpl-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.5);backdrop-filter:blur(2px)}
.tpl-panel{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:min(720px,92vw);max-height:84vh;
  overflow-y:auto;background:var(--sur);border:1px solid var(--bd2);border-radius:var(--r-2xl);
  box-shadow:var(--elev-3);padding:22px 22px 24px;animation:tplPop var(--t-med) ease}
@keyframes tplPop{from{opacity:0;transform:translate(-50%,-48%) scale(.98)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}
.tpl-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:18px}
.tpl-h1{font-family:var(--fs);font-size:22px;color:var(--tx);margin-bottom:4px}
.tpl-sub{font-size:12px;color:var(--mu);max-width:48ch;line-height:1.5}
.tpl-close{background:none;border:1px solid var(--bd);color:var(--mu);border-radius:var(--r-lg);width:32px;height:32px;
  cursor:pointer;flex-shrink:0;font-size:14px;transition:color var(--t-fast),border-color var(--t-fast)}
.tpl-close:hover{color:var(--tx);border-color:var(--mu)}
.tpl-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.tpl-card{display:flex;align-items:flex-start;gap:13px;text-align:left;padding:15px;border:1px solid var(--bd2);
  border-radius:var(--r-xl);background:var(--bg);cursor:pointer;font-family:var(--fm);transition:border-color var(--t-fast),background var(--t-fast),transform var(--t-fast)}
.tpl-card:hover{border-color:var(--ac);background:var(--sur2);transform:translateY(-1px)}
.tpl-card:active{transform:translateY(0)}
.tpl-card-ico{font-size:26px;line-height:1;flex-shrink:0;width:40px;height:40px;display:flex;align-items:center;justify-content:center;
  border-radius:var(--r-lg);background:var(--sur2)}
.tpl-card-title{font-size:14px;color:var(--tx);font-weight:500;margin-bottom:3px}
.tpl-card-desc{font-size:11.5px;color:var(--mu);line-height:1.5}
.tpl-card-blank .tpl-card-ico{font-size:22px;color:var(--mu)}
@media(max-width:560px){.tpl-grid{grid-template-columns:1fr}}

/* ── FIRST-RUN ONBOARDING ── */
.onb{position:fixed;inset:0;z-index:1400;display:none}
.onb.open{display:block}
.onb-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.55);backdrop-filter:blur(4px)}
.onb-card{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:min(500px,92vw);
  background:var(--sur);border:1px solid var(--bd2);border-radius:var(--r-2xl);
  box-shadow:var(--elev-3);padding:34px 34px 26px;animation:onbIn .28s cubic-bezier(.2,.8,.3,1)}
@keyframes onbIn{from{opacity:0;transform:translate(-50%,-46%) scale(.97)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}
.onb-eyebrow{font-family:var(--fm);font-size:10px;letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--ac);margin-bottom:12px}
.onb-h{font-family:var(--fs);font-weight:var(--hw1);font-size:28px;line-height:1.2;color:var(--tx);margin-bottom:10px;letter-spacing:.01em}
.onb-p{font-family:var(--fm);font-size:13px;line-height:1.6;color:var(--mu);margin-bottom:18px}
.onb-q{font-family:var(--fm);font-size:12px;color:var(--tx);margin:20px 0 12px;opacity:.85}
/* colour swatches */
.onb-swatches{display:flex;flex-wrap:wrap;gap:12px;margin:22px 0 6px}
.onb-sw{width:42px;height:42px;border-radius:50%;border:none;cursor:pointer;background:var(--sw);padding:0;
  box-shadow:0 0 0 0 var(--sw);transition:transform var(--t-fast),box-shadow var(--t-fast)}
.onb-sw:hover{transform:scale(1.1)}
.onb-sw.on{transform:scale(1.12);box-shadow:0 0 0 2px var(--sur),0 0 0 4px var(--sw)}
.onb-react{min-height:20px;margin-top:14px;font-family:var(--fs);font-style:italic;font-size:16px;color:var(--tx);opacity:0;transform:translateY(4px);transition:opacity .25s,transform .25s}
.onb-react.show{opacity:1;transform:none}
/* intent choices */
.onb-choices{display:flex;flex-direction:column;gap:9px}
.onb-choice{display:flex;align-items:center;gap:13px;text-align:left;width:100%;padding:14px 15px;cursor:pointer;
  background:var(--sur2);border:1px solid var(--bd2);border-radius:var(--r-lg);transition:border-color var(--t-fast),background var(--t-fast),transform var(--t-fast)}
.onb-choice:hover{border-color:var(--ac);transform:translateY(-1px)}
.onb-choice:active{transform:translateY(0)}
.onb-choice-ico{font-size:22px;line-height:1;flex-shrink:0;width:34px;text-align:center}
.onb-choice-tx{display:flex;flex-direction:column;gap:2px;min-width:0}
.onb-choice-tx b{font-family:var(--fm);font-size:13px;font-weight:500;color:var(--tx)}
.onb-choice-tx small{font-family:var(--fm);font-size:11px;color:var(--mu)}
/* actions */
.onb-actions{display:flex;align-items:center;justify-content:space-between;margin-top:24px}
.onb-skip{background:none;border:none;color:var(--mu);font-family:var(--fm);font-size:12px;cursor:pointer;padding:6px 4px;transition:color var(--t-fast)}
.onb-skip:hover{color:var(--tx)}
.onb-next{background:var(--ac);border:none;color:#fff;font-family:var(--fm);font-size:12px;font-weight:500;cursor:pointer;padding:9px 18px;border-radius:var(--r-md);transition:filter var(--t-fast)}
.onb-next:hover{filter:brightness(1.08)}
/* discoverability step — mini "where to click" mockups */
.onb-discover{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:20px 0 4px}
.onb-tip{display:flex;flex-direction:column;gap:9px}
.onb-mock{width:100%;height:auto;border:1px solid var(--bd);border-radius:var(--r-md);background:var(--bg);display:block}
.onb-tip small{font-family:var(--fm);font-size:11px;line-height:1.5;color:var(--mu)}
.onb-tip small b{color:var(--tx);font-weight:500}
.onb-tip kbd{font-family:var(--fm);font-size:10.5px;background:var(--sur2);border:1px solid var(--bd2);border-radius:var(--r-xs);padding:0 4px}
@media(max-width:520px){.onb-discover{grid-template-columns:1fr}}
/* closing celebratory step */
.onb-done{text-align:center;padding:8px 4px}
.onb-done-ico{font-size:40px;margin-bottom:14px;animation:onbPop .5s cubic-bezier(.2,1.4,.4,1)}
@keyframes onbPop{from{opacity:0;transform:scale(.5)}to{opacity:1;transform:scale(1)}}
.onb-done .onb-h{font-size:24px}

/* ── LINK HOVER PREVIEW ── */
.link-hover{position:fixed;z-index:1200;display:none;width:300px;max-width:88vw;background:var(--sur);border:1px solid var(--bd2);border-radius:var(--r-lg);box-shadow:0 16px 44px rgba(0,0,0,.55);overflow:hidden;font-family:var(--fm);animation:lhIn .12s ease}
@keyframes lhIn{from{opacity:0;transform:translateY(-3px)}to{opacity:1;transform:none}}
.link-hover .lh-cover{height:128px;background-size:cover;background-position:center;background-color:var(--sur2);border-bottom:1px solid var(--bd)}
.link-hover .lh-cover img{width:100%;height:100%;object-fit:cover;display:block}
.link-hover .lh-body{padding:11px 13px 12px}
.link-hover .lh-kicker{display:flex;align-items:center;gap:6px;font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--mu);margin-bottom:5px}
.link-hover .lh-fav{width:14px;height:14px;border-radius:3px;flex-shrink:0}
.link-hover .lh-title{font-size:14px;font-weight:600;color:var(--tx);line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.link-hover .lh-desc{margin-top:6px;font-size:11.5px;line-height:1.5;color:var(--mu);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.link-hover .lh-desc.lh-muted{opacity:.55;font-style:italic}
.link-hover .lh-url{margin-top:7px;font-size:10.5px;color:var(--mu);opacity:.7;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.link-hover .lh-chips{display:flex;flex-wrap:wrap;gap:4px;margin-top:8px}
.link-hover .lh-chip{font-size:10px;padding:2px 8px;border-radius:var(--r-pill)}