/* docs (2026-08-26) — the Notes-style long-form editor + the You-tab Docs
   rack. Rides app.css tokens throughout; nothing here redefines the palette.
   Painted entirely by docs.js into the static #docPage skeleton. */

/* ---------- the Docs face on the Calendar tab ---------- */
#docsPane{margin-top:4px}
/* month nav + event-add + sync menu belong to the other faces */
#view-cal.docsface #calPrev,#view-cal.docsface #calToday,#view-cal.docsface #calNext,
#view-cal.docsface #calAdd,#view-cal.docsface #calsBtn{display:none}

/* ---------- rack rows ---------- */
.dcrow{display:flex;align-items:flex-start;gap:11px;width:100%;text-align:left;background:var(--card);
  border:1px solid var(--border-card);border-radius:var(--r-card);padding:12px 14px;margin-bottom:8px;
  font-family:inherit;color:var(--ink);cursor:pointer}
.dcrow:active{transform:scale(.99)}
.dcrow .dcico{font-size:17px;line-height:1.35}
.dcrow .dcmain{flex:1;min-width:0}
.dcrow b{display:block;font-size:var(--t-body);font-weight:700}
.dcrow .dcsnip{font-size:var(--t-label);color:var(--ink2);line-height:1.45;margin-top:2px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.dcrow .dcmeta{display:flex;align-items:center;gap:7px;font-size:var(--t-micro);color:var(--ink3);margin-top:5px;flex-wrap:wrap}
.dcrow .dcwhen{font-size:var(--t-micro);color:var(--ink3);white-space:nowrap;padding-top:2px}
.dcbadge{display:inline-block;font-size:10px;font-weight:700;background:var(--moss-100);color:var(--moss-700);
  border-radius:var(--r-pill);padding:2px 8px}
.dcdot{display:inline-block;width:8px;height:8px;border-radius:99px;background:var(--moss-500);flex:none}
.dcnewrow{display:block;width:100%;border:1px dashed var(--moss-300);background:none;border-radius:var(--r-card);
  padding:11px;font:700 var(--t-sub) var(--font-ui);color:var(--moss-700);cursor:pointer;margin-bottom:8px}

/* ---------- editor ---------- */
#docPage .pgbody{padding-top:0}
/* the share chip carries TEXT — it must escape .wknav.pgnav's 32px circle
   (that rule pinned width:32px + border-radius:50%, so "🔒 Just you" wrapped
   under the lock and spilled over the title — Charlie's 08-26 screenshot) */
#docPage .wknav.pgnav button.dcsharechip{width:auto;height:32px;border-radius:var(--r-pill);
  display:inline-flex;align-items:center;gap:6px;padding:0 12px;white-space:nowrap;
  font:700 var(--t-label) var(--font-ui);color:var(--ink2)}
.dctitle{font-family:var(--font-display);font-weight:400;font-size:26px;line-height:1.15;
  padding:8px 0 2px;outline:none;caret-color:var(--accent)}
.dctitle:empty::before{content:"Untitled";color:var(--ink3)}
.dcmetaline{font-size:var(--t-micro);color:var(--ink3);margin:2px 0 12px}
/* 16px floor: Safari zooms a focused editable under 16px — the same rule
   that gave the app --t-field (the zoom-in lurch read as "janky sizing") */
.dced{outline:none;font-size:var(--t-field);line-height:1.65;caret-color:var(--accent);min-height:40vh;padding-bottom:18px}
.dced p,.dced div{margin:0 0 12px}
.dced h2{font-family:var(--font-display);font-weight:400;font-size:19px;margin:20px 0 6px}
.dced h3{font-family:var(--font-display);font-weight:400;font-size:16px;margin:16px 0 4px}
.dced ul{padding-left:20px;margin:0 0 12px}
.dced li{margin-bottom:5px}
.dced blockquote{border-left:3px solid var(--moss-300);color:var(--ink2);padding:2px 0 2px 12px;margin:0 0 12px;font-style:italic}
.dced code{font-family:ui-monospace,Menlo,monospace;font-size:.9em;background:var(--moss-50);border-radius:5px;padding:1px 5px}
.dced ul.dctodo{list-style:none;padding-left:2px}
.dced ul.dctodo li{display:flex;gap:9px;align-items:flex-start}
.dcck{width:17px;height:17px;flex:none;margin-top:3px;border:1.6px solid var(--moss-500);border-radius:5px;cursor:pointer}
.dcck[data-on="1"]{background:var(--moss-700);border-color:var(--moss-700);position:relative}
.dcck[data-on="1"]::after{content:"";position:absolute;left:4px;top:1px;width:5px;height:9px;
  border:solid var(--paper-2);border-width:0 2px 2px 0;transform:rotate(42deg)}
.dced li:has(.dcck[data-on="1"]){color:var(--ink3);text-decoration:line-through;text-decoration-color:var(--moss-300)}
/* a Kip pass, highlighted until Keep (one-shot class — never re-fires) */
.kipnew{background:linear-gradient(transparent 8%, var(--moss-100) 8%, var(--moss-100) 94%, transparent 94%);
  transition:background 1.2s ease}
.kipnew.settle{background:transparent}

/* ---------- review banner ---------- */
.dcbanner{flex:none;display:flex;align-items:center;gap:8px;margin:0 14px 8px;background:var(--moss-900);
  color:var(--on-deep);border-radius:14px;padding:10px 13px;font-size:var(--t-label)}
.dcbanner b{font-weight:800}
.dcbanner .sp{flex:1}
.dcbanner button{font:800 var(--t-label) var(--font-ui);color:var(--moss-900);background:var(--moss-100);
  border:0;border-radius:var(--r-pill);padding:5px 11px;cursor:pointer}
.dcbanner button.ghost{background:transparent;color:var(--moss-100);border:1px solid rgba(241,238,221,.5)}

/* ---------- format bar (typing mode — pinned to the keyboard) ----------
   Apple's shape: a floating pill sitting right above the text input. It lives
   at BODY level (inside the transformed .page, fixed positioning anchors to
   the page and the math broke on-device), fixed at top:0 and translated to
   the visual-viewport bottom by docs.js on every viewport resize/scroll —
   that survives the WKWebView's keyboard behavior (window resize AND window
   scroll at once). While the caret is in the doc (body.dc-typing) this pill
   is the only chrome; the Ask-Kip dock waits for the keyboard to close. */
.dcfmtbar{display:none;position:fixed;left:10px;right:10px;top:0;z-index:80;
  transform:translateY(150dvh); /* parked below the screen until placed */
  gap:2px;padding:5px 6px;border:1px solid var(--border-card);border-radius:20px;
  background:var(--paper-3);box-shadow:0 6px 24px rgba(44,54,39,.16);
  transition:transform .16s ease-out}
body.dc-typing .dcfmtbar:not(.hidden){display:flex}
body.dc-typing #docPage .dcdock,body.dc-typing #docPage .dcbanner{display:none}
.dcfmtbar button{flex:1;font:700 20px var(--font-ui);color:var(--ink);height:46px;
  border:0;background:none;border-radius:15px;cursor:pointer;display:grid;place-items:center}
.dcfmtbar button svg{display:block}
.dcfmtbar button:active{background:var(--moss-100)}
/* lit = the caret is inside that formatting right now */
.dcfmtbar button.on{background:var(--moss-100);color:var(--moss-700)}
.dcfmtbar .dcserif{font-family:var(--font-display);font-weight:400;font-size:22px}

/* ---------- Ask-Kip dock (resting state) ---------- */
.dcdock{flex:none;border-top:1px solid var(--border-card);background:var(--chrome);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  padding:8px 12px calc(var(--sab) + 8px)}
/* the exchange renders in Kip's own chat language — same .msg/.bub/.typing
   classes as the Kip tab, just capped and slightly smaller */
.dcthread{max-height:38dvh;overflow-y:auto;padding:2px 2px 0}
.dcthread:empty{display:none}
.dcthread .msg{margin-bottom:8px}
.dcthread .msg .bub{font-size:var(--t-sub);padding:9px 13px}
/* client-authored state lines — muted and unbubbled, never dressed as Kip */
.dcsys{font-size:var(--t-label);color:var(--ink3);padding:2px 4px 8px}
.dcchips{display:flex;gap:6px;margin-bottom:8px;flex-wrap:wrap}
.dcchips button{font:700 var(--t-label) var(--font-ui);color:var(--moss-700);background:var(--card);
  border:1px solid var(--border-card);border-radius:var(--r-pill);padding:8px 14px;cursor:pointer}
.dcask{display:flex;align-items:center;gap:8px;background:var(--card);border:1px solid var(--border-card);
  border-radius:var(--r-pill);padding:5px 5px 5px 14px}
.dcask .orb{width:22px;height:22px;flex:none}
.dcask input{flex:1;border:0;background:none;outline:none;font:inherit;font-size:var(--t-field);color:var(--ink);min-width:0}
.dcask button{border:0;background:var(--moss-900);color:var(--on-deep);font:800 16px var(--font-ui);
  width:36px;height:36px;border-radius:99px;cursor:pointer;flex:none;display:grid;place-items:center}
.dcask button:disabled{opacity:.4}

/* ---------- share sheet ---------- */
.dcsheetveil{position:absolute;inset:0;background:rgba(44,54,39,.32);display:flex;align-items:flex-end;z-index:5}
.dcsheet{width:100%;background:var(--card);border-radius:22px 22px 0 0;padding:18px 18px calc(var(--sab) + 22px)}
.dcsheet h4{font-family:var(--font-display);font-weight:400;font-size:18px;margin:0 0 4px}
.dcsheet .dcfine{font-size:var(--t-label);color:var(--ink3);line-height:1.5;margin:0 0 14px}
.dcopt{display:flex;align-items:center;gap:11px;width:100%;text-align:left;border:1px solid var(--border-card);
  background:var(--bg1);border-radius:14px;padding:12px 14px;margin-bottom:8px;font-family:inherit;color:var(--ink);cursor:pointer}
.dcopt .dcradio{width:18px;height:18px;flex:none;border:2px solid var(--moss-500);border-radius:99px;box-sizing:border-box}
.dcopt.sel .dcradio{border-width:6px;border-color:var(--moss-700)}
.dcopt b{display:block;font-size:var(--t-sub)}
.dcopt small{font-size:var(--t-micro);color:var(--ink3);line-height:1.4;display:block}