/* Stacked Intelligence HQ · Paper Desk look (approved Oct 28).
   Brand: Manrope only; navy, layer blue, light blue on white; slate for secondary text.
   Red, amber and green appear only as status, always with words beside them. */
:root{
  --font:Manrope,Arial,sans-serif;
  --navy:#14243B; --blue:#5B93D6; --light:#BCD5F1; --white:#FFFFFF; --slate:#4A5568;
  --mist:#F3F7FC; --edge:#DCE7F4; --desk:#EEF3F9;
  --red:#B23A3A; --amber:#9A5A00; --green:#1D7A52; --dotred:#C9433F;
  --back:#BCD5F1; --front:#D3E3F6; --fedge:#9CBDE4; --fink:#14243B;
  --rback:#F0C6C2; --rfront:#F6D9D6; --redge:#D99A94; --rink:#8E2B2B;
  color-scheme:light;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--desk);color:var(--navy);font-family:var(--font);font-size:14px;line-height:1.45;font-variant-numeric:tabular-nums;-webkit-text-size-adjust:100%}
body.larger{font-size:16px}
button,input,select,textarea{font:inherit;color:inherit}
h1,h2,h3,h4,h5{margin:0;letter-spacing:-.01em;text-wrap:balance}
p{margin:0}
a{color:var(--navy);text-underline-offset:3px;text-decoration-color:var(--blue)}
:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
[hidden]{display:none!important}

.boot{grid-column:1 / -1;min-height:60vh;display:grid;place-items:center;align-content:center;gap:12px;color:var(--slate)}

/* ======================= layout ======================= */
.hq{min-height:100vh;padding:24px max(24px,env(safe-area-inset-right,0px)) 24px max(24px,env(safe-area-inset-left,0px));display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:0 20px;align-items:start;position:relative}
.main{min-width:0;container-type:inline-size}

/* left settings menu */
.side{position:sticky;top:24px;width:240px;max-height:calc(100vh - 48px);overflow:auto;background:#fff;border:1px solid var(--light);border-radius:16px;padding:16px 12px;display:flex;flex-direction:column;gap:8px;transition:width .2s cubic-bezier(.23,1,.32,1)}
.side .top{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:0 4px 8px}
.side .logo-h{display:block;width:172px;height:auto}
.side .logo-i{display:none;width:32px;height:32px}
.side .fold-btn{width:32px;height:32px;border-radius:10px;border:1px solid var(--light);background:#fff;display:grid;place-items:center;cursor:pointer;flex:none;padding:0}
.side .fold-btn svg{width:16px;height:16px}
.side .menu-btn{display:none}
.side .me{display:flex;gap:12px;align-items:center;padding:12px 8px;border-top:1px solid var(--edge);border-bottom:1px solid var(--edge)}
.side .av{width:36px;height:36px;border-radius:10px;background:var(--navy);display:grid;place-items:center;flex:none}
.side .av img{width:26px;height:26px}
.side .me b{display:block;font-size:14px;font-weight:700}
.side .me small{display:block;font-size:12px;color:var(--slate)}
.side .lbl{font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--slate);padding:8px 8px 0}
.side nav{display:grid;gap:2px}
.side .item{display:flex;align-items:center;gap:12px;width:100%;text-align:left;background:none;border:0;border-radius:10px;padding:8px;min-height:40px;cursor:pointer;font-size:14px;font-weight:600;color:var(--navy);position:relative}
.side .item:hover{background:var(--mist)}
.side .item.on{background:#E3EEFA}
.side .item svg{width:20px;height:20px;flex:none}
.side .item .dot{margin-left:auto;width:8px;height:8px;border-radius:50%;background:var(--dotred);flex:none}
.side .foot{margin-top:8px;padding:12px 8px 0;border-top:1px solid var(--edge);font-size:12px;color:var(--slate);display:grid;gap:4px;overflow-wrap:anywhere}
.side .foot b{color:var(--navy);font-weight:600}
.side.closed{width:68px;padding:16px 10px}
.side.closed .logo-h,.side.closed .me div,.side.closed .lbl,.side.closed .item span,.side.closed .foot{display:none}
.side.closed .logo-i{display:block}
.side.closed .top{flex-direction:column;padding:0 0 8px}
.side.closed .me{justify-content:center;padding:12px 0}
.side.closed .item{justify-content:center;padding:8px 0}
.side.closed .item .dot{position:absolute;top:6px;right:8px;margin:0}

/* sample-data banner */
.banner{display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap;background:#fff;border:1px dashed var(--fedge);border-radius:12px;padding:10px 16px;margin-bottom:16px;font-size:13px;color:var(--slate)}
.banner b{color:var(--navy)}

/* top folder tabs. The row scrolls sideways, which clips what hangs below it, so it keeps
   1px of room: the open tab covers the page's top line and joins it like a real folder tab */
.tabs{position:relative;z-index:1;display:flex;gap:4px;align-items:flex-end;padding:0 0 1px 12px;margin-bottom:-1px;overflow-x:auto;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tab{position:relative;flex:0 1 auto;min-width:44px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:8px 14px;font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--navy);background:var(--edge);border:1px solid var(--light);border-bottom:0;border-radius:10px 10px 0 0;cursor:pointer;text-decoration:none}
.tab.on{background:#fff;padding-top:10px;margin-bottom:-1px;z-index:1}
@container (max-width:800px){.tab{padding:8px 9px;font-size:11px;letter-spacing:.02em}}
.tab .dot{position:absolute;top:5px;right:4px;width:7px;height:7px;border-radius:50%;background:var(--dotred)}
.sheetwrap{background:#fff;border:1px solid var(--light);border-radius:12px 16px 16px 16px;padding:16px 24px 24px;min-height:calc(100vh - 140px);display:grid;gap:16px;align-content:start}
.fhead{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.label{display:inline-flex;gap:12px;align-items:baseline;font-size:12px;letter-spacing:.1em;text-transform:uppercase;font-weight:800;border:1px solid var(--navy);padding:6px 12px;border-radius:8px}
.label span{letter-spacing:0;text-transform:none;font-weight:500;color:var(--slate);font-size:13px}
.crumb{display:flex;gap:4px 8px;align-items:center;font-size:14px;color:var(--slate);flex-wrap:wrap;flex:1;min-width:0}
.crumb b{color:var(--navy)}
.crumb a{color:var(--navy);cursor:pointer;text-decoration:underline;text-underline-offset:3px;font-weight:600}
.hint{font-size:13px;color:var(--slate)}
.empty{font-size:14px;color:var(--slate);padding:24px;border:1px dashed var(--light);border-radius:12px;text-align:center}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:40px;padding:0 16px;border-radius:10px;border:1px solid var(--light);background:#fff;color:var(--navy);font-weight:600;font-size:14px;cursor:pointer;white-space:nowrap;text-decoration:none}
.btn:hover{border-color:var(--blue)}
.btn.primary{background:var(--navy);border-color:var(--navy);color:#fff;min-height:44px}
.btn.small{min-height:32px;padding:0 12px;font-size:13px}
.btn.danger{color:var(--red)}
.btn[disabled]{opacity:.55;cursor:not-allowed}
.btns{display:flex;gap:8px;flex-wrap:wrap}
.lnk{background:none;border:0;padding:0;font-weight:600;font-size:13px;color:var(--navy);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--blue);cursor:pointer;white-space:nowrap}
.lnk:hover{text-decoration-thickness:2px}
.rowacts{display:flex;gap:12px;justify-content:flex-end;flex-wrap:wrap}

/* inner folders: a real folder holding papers */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(232px,1fr));gap:24px}
.fold{display:flex;flex-direction:column;align-items:stretch;width:100%;text-align:left;background:none;border:0;padding:0;cursor:pointer;--b:var(--back);--f:var(--front);--e:var(--fedge);--i:var(--fink)}
.fold.red{--b:var(--rback);--f:var(--rfront);--e:var(--redge);--i:var(--rink)}
.fold .tabrow{display:flex;align-items:flex-end;min-height:32px;padding-left:12px}
.fold .ftab{position:relative;z-index:3;margin-bottom:-1px;display:inline-flex;gap:8px;align-items:center;padding:7px 14px 8px;background:var(--b);border:1px solid var(--e);border-bottom:0;border-radius:10px 10px 0 0;font-weight:700;font-size:14px;color:var(--i);white-space:nowrap;max-width:calc(100% - 24px);overflow:hidden;text-overflow:ellipsis}
.fold .cnt{font-style:normal;font-size:12px;font-weight:700;opacity:.75}
.fold .why{display:inline-flex;gap:6px;align-items:center;font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--rink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fold .why:before{content:"";width:7px;height:7px;border-radius:50%;background:var(--dotred);flex:none}
.fold .pocket{position:relative;flex:1;display:flex;flex-direction:column;background:var(--b);border:1px solid var(--e);border-radius:12px 14px 14px 14px;padding:16px 16px 24px;min-height:164px}
.fold .paper{position:relative;z-index:1;flex:1;display:block;background:#fff;border:1px solid #E2E9F2;border-radius:6px;padding:10px 12px 22px;box-shadow:0 1px 2px rgba(20,36,59,.08);transform:rotate(-.6deg);transition:transform .22s cubic-bezier(.23,1,.32,1);font-size:13px;color:var(--slate)}
.fold .paper.under{position:absolute;z-index:0;top:10px;left:28px;right:12px;bottom:28px;padding:0;transform:rotate(2.4deg);background:#F7FAFE;box-shadow:none}
.fold .paper .l{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:3px 0;border-top:1px dotted #D3DDE9}
.fold .paper .l:first-child{border-top:0}
.fold .paper .more{font-size:12px}
.fold .paper.sticky{background:#FFF3B0;border-color:#EBD77A;color:#3A3420;font-weight:600;transform:rotate(1.2deg)}
.fold .paper.sticky .l{border-top:0;white-space:normal}
.fold .front{position:absolute;z-index:2;left:-1px;right:-1px;bottom:-1px;height:42px;background:var(--f);border:1px solid var(--e);border-radius:0 0 14px 14px;box-shadow:0 -3px 8px rgba(20,36,59,.08);display:flex;align-items:center;justify-content:space-between;gap:8px;padding:0 16px;font-size:12px;font-weight:700;color:var(--i)}
.fold .front .open{opacity:0;transition:opacity .15s;flex:none}
.fold .front .left{display:inline-flex;gap:12px;align-items:center;min-width:0}
.fold:hover .paper:not(.under){transform:translateY(-6px) rotate(-.6deg)}
.fold:hover .paper.sticky{transform:translateY(-6px) rotate(1.2deg)}
.fold:hover .front .open,.fold:focus-visible .front .open{opacity:1}
body.compact .grid{grid-template-columns:repeat(auto-fill,minmax(196px,1fr));gap:16px}
body.compact .fold .pocket{min-height:120px}
body.plain .fold .paper,body.plain .fold .paper.sticky,body.plain .fold:hover .paper:not(.under){transform:none}
body.plain .fold .paper.sticky{background:#fff;border-color:#E2E9F2;color:var(--slate);font-weight:500}
body.plain .clip{display:none}
body.plain .stamp{transform:none}

/* pages inside an open folder */
.pages{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px;align-items:start}
.page{position:relative;background:#fff;border:1px solid var(--light);border-radius:12px;padding:16px;display:grid;gap:12px;align-content:start;box-shadow:0 1px 2px rgba(20,36,59,.06);min-width:0}
.page.wide{grid-column:1 / -1}
.pages.settings{grid-template-columns:repeat(auto-fill,minmax(400px,1fr))}
.page.hasclip header{padding-right:28px}
.page header{display:flex;justify-content:space-between;gap:8px 12px;align-items:baseline;flex-wrap:wrap}
.page h5{font-size:16px;font-weight:700;letter-spacing:0;overflow-wrap:anywhere}
.page .when{font-size:12px;color:var(--slate)}
.page p{font-size:14px;color:var(--slate);white-space:pre-line;overflow-wrap:anywhere}
.page.done h5{color:var(--slate);text-decoration:line-through;text-decoration-color:var(--light)}
.lines{display:grid}
.ln{display:flex;align-items:baseline;gap:8px;padding:4px 0;font-size:13px}
.ln > span{overflow-wrap:anywhere}
.ln .dots{flex:1;border-bottom:1px dotted #B9C8DA;transform:translateY(-4px);min-width:16px}
.ln b{font-weight:600;color:var(--navy);text-align:right;max-width:66%;overflow-wrap:anywhere}
.ln b.red{color:var(--red)}.ln b.amber{color:var(--amber)}.ln b.green{color:var(--green)}
.files{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:13px;align-items:center}
.files svg{width:16px;height:16px;flex:none;color:var(--slate)}
.files span,.files a{color:var(--navy);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--blue);overflow-wrap:anywhere}
.stamp{display:inline-block;border:1.5px solid currentColor;padding:1px 8px;font-size:11px;letter-spacing:.08em;text-transform:uppercase;font-weight:800;transform:rotate(-2deg);border-radius:4px;white-space:nowrap}
.stamp.red{color:var(--red)}.stamp.green{color:var(--green)}.stamp.amber{color:var(--amber)}.stamp.grey{color:var(--slate)}
.stamp.sample{color:var(--blue);border-style:dashed}
table.inv{width:100%;border-collapse:collapse;font-size:13px}
table.inv th{text-align:left;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--slate);font-weight:800;padding:4px 8px 4px 0;border-bottom:1px solid var(--navy)}
table.inv td{padding:6px 8px 6px 0;border-bottom:1px dotted #B9C8DA;color:var(--slate);vertical-align:top}
table.inv td.n,table.inv th.n{text-align:right}
table.inv td.n{color:var(--navy);font-weight:600}
table.inv tr.tot td{border-top:1px solid var(--navy);border-bottom:3px double var(--navy);color:var(--navy);font-weight:700}
table.inv td:nth-child(2),table.inv td:nth-child(4){white-space:nowrap}
.score{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:8px}
.score div{border:1px solid var(--light);border-radius:10px;padding:8px 12px;background:var(--mist)}
.score small{display:block;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--slate);font-weight:800}
.score b{font-size:22px;font-weight:700}
.steps{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:4px}
.steps span{display:flex;align-items:center;justify-content:center;text-align:center;font-size:10.5px;letter-spacing:.03em;text-transform:uppercase;font-weight:800;color:var(--slate);padding:6px 4px;border:1px solid var(--light);border-radius:6px;line-height:1.15}
.steps span.done{background:#E3EEFA;color:var(--navy)}
.steps span.now{background:var(--navy);color:#fff;border-color:var(--navy)}
.clip{position:absolute;top:-7px;right:16px;width:14px;height:30px;border:2px solid #8FA3BA;border-radius:7px;border-top-color:transparent;transform:rotate(12deg)}
.clip:after{content:"";position:absolute;left:2px;top:4px;width:6px;height:18px;border:2px solid #8FA3BA;border-radius:4px;border-bottom:0}
.timer{font-weight:700;color:var(--navy)}

/* settings panels */
.set{display:grid;gap:4px}
.srow{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 16px;align-items:center;padding:10px 0;border-top:1px solid var(--edge)}
.srow:first-child{border-top:0}
.srow .t{font-size:14px;font-weight:600;color:var(--navy)}
.srow .d{font-size:13px;color:var(--slate);grid-column:1;overflow-wrap:anywhere}
.srow .v{font-size:14px;color:var(--navy);text-align:right;overflow-wrap:anywhere}
.srow .v.red{color:var(--red);font-weight:700}
.srow .v.green{color:var(--green);font-weight:700}
.srow .v.muted{color:var(--slate)}
.srow .ctl{grid-column:2;grid-row:1 / span 2;display:flex;gap:8px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
.sw{position:relative;width:44px;height:26px;border-radius:13px;border:0;background:#C8D3E0;cursor:pointer;flex:none;padding:0}
.sw:after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(20,36,59,.25);transition:transform .18s cubic-bezier(.23,1,.32,1)}
.sw[aria-checked="true"]{background:var(--navy)}
.sw[aria-checked="true"]:after{transform:translateX(18px)}
.sw[disabled]{opacity:.55;cursor:not-allowed}
.seg{display:inline-flex;border:1px solid var(--light);border-radius:10px;overflow:hidden}
.seg button{border:0;background:#fff;padding:6px 12px;font-size:13px;font-weight:600;cursor:pointer;color:var(--navy);min-height:32px}
.seg button+button{border-left:1px solid var(--light)}
.seg button.on{background:#E3EEFA}
.lock{font-size:12px;font-weight:700;color:var(--slate);border:1px solid var(--edge);border-radius:6px;padding:2px 8px}
.notice{border:1px solid var(--redge);background:#FBEDEC;color:var(--rink);border-radius:10px;padding:10px 12px;font-size:13px}
.notice.ok{border-color:#A8D5BF;background:#EEF8F3;color:var(--green)}

/* writing guide (voice.md) */
.doccols{display:grid;grid-template-columns:minmax(0,1fr) 264px;gap:24px;align-items:start}
@container (max-width:760px){.doccols{grid-template-columns:minmax(0,1fr)}}
.doctools{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.paperdoc{background:#fff;border:1px solid var(--light);border-radius:12px;padding:24px 28px;max-height:560px;overflow:auto;box-shadow:5px 5px 0 -1px #fff,5px 5px 0 0 var(--light)}
.paperdoc h3{font-size:20px;font-weight:700;margin:0 0 8px}
.paperdoc h4{font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--slate);margin:16px 0 8px;padding-top:16px;border-top:1px solid var(--edge)}
.paperdoc p{font-size:14px;color:var(--slate);margin:0 0 8px}
.paperdoc ul{margin:0;padding-left:20px;display:grid;gap:4px}
.paperdoc li{font-size:14px;color:var(--navy)}
.paperdoc li::marker{color:var(--blue)}
.mdraw{margin:0;font-family:var(--font);font-size:13px;line-height:1.65;color:var(--navy);white-space:pre-wrap;overflow-wrap:anywhere;background:#F7FAFE;border:1px solid var(--light);border-radius:12px;padding:20px 24px;max-height:560px;overflow:auto}
.mdraw .mk{color:var(--slate);font-weight:800}
.mdedit{display:block;width:100%;min-height:520px;font-family:var(--font);font-size:13px;line-height:1.65;color:var(--navy);border:1px solid var(--blue);border-radius:12px;padding:20px 24px;resize:vertical;margin-bottom:12px;background:#fff}
.docside{display:grid;gap:16px;font-size:13px;color:var(--slate)}
.docside b{display:block;color:var(--navy);font-size:14px;margin-bottom:2px}
.docside ul{margin:4px 0 0;padding-left:18px;display:grid;gap:2px}
.docside .never{border:1px solid var(--redge);background:#FBEDEC;border-radius:10px;padding:12px}
.docside .never b{color:var(--rink)}
.docnote{font-size:12px;color:var(--slate);margin-top:12px}
.versions{display:grid;gap:4px;margin-top:12px}
.versions button{display:flex;justify-content:space-between;gap:12px;text-align:left;border:1px solid var(--edge);border-radius:8px;background:#fff;padding:8px 12px;cursor:pointer;font-size:13px}
.versions button.on{border-color:var(--blue);background:#F7FAFE}

/* Claude box */
.claude{position:sticky;top:64px;width:316px;background:#fff;border:1px solid var(--light);border-radius:16px;box-shadow:0 2px 4px rgba(20,36,59,.06),0 16px 40px rgba(20,36,59,.12);display:grid;grid-template-rows:auto minmax(0,1fr) auto;overflow:hidden;margin-top:40px;align-self:start}
.claude .chead{display:flex;align-items:center;gap:12px;padding:12px 12px 12px 16px;border-bottom:1px solid var(--edge)}
.claude .mk{width:28px;height:28px;border-radius:8px;background:var(--navy);display:grid;place-items:center;flex:none}
.claude .mk img{width:20px;height:20px}
.claude .chead b{font-size:14px;font-weight:700;display:block}
.claude .chead small{display:block;font-size:12px;color:var(--slate)}
.claude .chead .min{margin-left:auto}
.claude .msgs{display:grid;gap:12px;padding:16px;max-height:min(420px,calc(100vh - 260px));overflow:auto;align-content:start;background:#FAFCFE}
.msg{font-size:14px;line-height:1.45;max-width:92%;overflow-wrap:anywhere}
.msg.me{justify-self:end;background:var(--navy);color:#fff;padding:8px 12px;border-radius:12px 12px 2px 12px}
.msg.ai{color:var(--slate)}
.msg.ai b{color:var(--navy)}
.claude .cin{display:flex;gap:8px;padding:12px;border-top:1px solid var(--edge)}
.claude .cin input{flex:1;font-size:14px;border:1px solid var(--light);border-radius:10px;padding:8px 12px;background:#fff;min-width:0;min-height:40px}
.claude .cin input::placeholder{color:#6B7786}
.claude .cin .send{min-height:40px;padding:0 14px;border-radius:10px;border:0;background:var(--navy);color:#fff;font-weight:600;cursor:pointer}
.claude.mini{position:fixed;right:max(24px,env(safe-area-inset-right,0px));bottom:max(24px,env(safe-area-inset-bottom,0px));top:auto;margin:0;width:auto;grid-template-rows:auto;border-radius:14px;cursor:pointer;z-index:20}
.claude.mini .msgs,.claude.mini .cin,.claude.mini .chead small,.claude.mini .min{display:none}
.claude.mini .chead{border-bottom:0;padding:10px 16px 10px 10px}
.claude .open-lbl{display:none;font-size:12px;color:var(--slate);margin-left:4px;font-weight:600}
.claude.mini .open-lbl{display:inline}
.hq.claude-mini .sheetwrap{padding-bottom:88px}

/* dialogs and forms */
dialog{border:1px solid var(--light);border-radius:16px;padding:0;width:min(560px,calc(100vw - 32px));max-height:calc(100vh - 48px);color:var(--navy);box-shadow:0 24px 64px rgba(20,36,59,.24)}
dialog::backdrop{background:rgba(20,36,59,.35)}
dialog form{display:grid;grid-template-rows:auto minmax(0,1fr) auto;max-height:calc(100vh - 50px)}
dialog .dh{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:16px 20px;border-bottom:1px solid var(--edge)}
dialog .dh h2{font-size:18px;font-weight:700}
dialog .db{padding:16px 20px;display:grid;gap:12px;overflow:auto}
dialog .df{display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap;padding:12px 20px;border-top:1px solid var(--edge)}
dialog .df .btns{margin-left:auto}
.field{display:grid;gap:4px}
.field > span{font-size:13px;font-weight:700}
.field small{font-size:12px;color:var(--slate)}
.field input,.field select,.field textarea{width:100%;border:1px solid var(--light);border-radius:10px;padding:8px 12px;min-height:40px;background:#fff;font-size:14px}
.field textarea{min-height:88px;resize:vertical;line-height:1.5}
.field input:focus,.field select:focus,.field textarea:focus{outline:2px solid var(--blue);outline-offset:0;border-color:var(--blue)}
.field.check{grid-template-columns:auto minmax(0,1fr);align-items:center;gap:10px}
.field.check input{width:20px;height:20px;min-height:0}
.fieldrow{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px}
.dmsg{font-size:14px;color:var(--slate)}

#toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%) translateY(16px);background:var(--navy);color:#fff;border-radius:10px;padding:10px 16px;font-size:14px;font-weight:600;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;z-index:50;max-width:calc(100vw - 32px)}
#toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
#toast.err{background:var(--red)}

/* ======================= phone ======================= */
@media (max-width:900px){
  .hq{display:block;padding:12px max(12px,env(safe-area-inset-right,0px)) 96px max(12px,env(safe-area-inset-left,0px))}
  .side,.side.closed{position:relative;top:0;width:auto;max-height:none;margin-bottom:12px;padding:10px 12px}
  .side .top,.side.closed .top{flex-direction:row;padding:0}
  .side .logo-h,.side.closed .logo-h{display:block;width:150px}
  .side .logo-i,.side.closed .logo-i,.side .fold-btn{display:none}
  .side .menu-btn{display:inline-flex;position:relative}
  .side .menu-btn .dot{position:absolute;top:4px;right:4px;width:8px;height:8px;border-radius:50%;background:var(--dotred)}
  .side .me,.side .lbl,.side nav,.side .foot{display:none}
  .side.drawer .me,.side.drawer nav,.side.drawer .foot{display:flex}
  .side.drawer nav{display:grid}
  .side.drawer .me{margin-top:8px;justify-content:flex-start;padding:12px 8px}
  .side.drawer .item span,.side.drawer .me div{display:revert}
  .side.drawer .foot{display:grid}
  .side.drawer .item{justify-content:flex-start;padding:8px}
  .side.drawer .item .dot{position:static;margin-left:auto}
  .sheetwrap{padding:12px 12px 16px;border-radius:10px 12px 12px 12px;min-height:60vh}
  .tabs{padding-left:10px}
  .tab{flex:none}
  .fold.red .front .left > span:first-child{display:none}
  .pages.settings{grid-template-columns:minmax(0,1fr)}
  .grid{grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:16px 12px}
  .fold .pocket{min-height:132px;padding:12px 12px 20px}
  .fold .front{padding:0 12px}
  .fold .front .open{display:none}
  .pages{grid-template-columns:minmax(0,1fr)}
  .fhead .btns .btn:not(.primary){display:none}
  .claude,.claude.mini{position:fixed;right:max(12px,env(safe-area-inset-right,0px));bottom:max(12px,env(safe-area-inset-bottom,0px));top:auto;margin:0;z-index:20}
  .claude:not(.mini){left:max(12px,env(safe-area-inset-left,0px));width:auto;max-height:70vh}
  .claude:not(.mini) .msgs{max-height:calc(70vh - 140px)}
  .steps{grid-auto-flow:row;grid-template-columns:repeat(3,minmax(0,1fr))}
  .srow{grid-template-columns:minmax(0,1fr)}
  .srow .ctl{grid-column:1;grid-row:auto;justify-content:flex-start}
  .srow .v{text-align:left}
  .paperdoc,.mdraw{padding:16px}
}
@media (max-width:420px){.grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
@media (prefers-reduced-motion:reduce){.fold .paper,.side,.sw:after,#toast{transition:none}.fold:hover .paper:not(.under),.fold:hover .paper.sticky{transform:none}}

/* ======================= sticky notes ======================= */
:root{--note-yellow:#FFF0A3;--note-pink:#FFDCE3;--note-blue:#CFE2FA;--note-green:#DAF1DC;--note-ink:#14243B;--note-band:rgba(20,36,59,.05)}
.c-yellow{--paper:var(--note-yellow)}
.c-pink{--paper:var(--note-pink)}
.c-blue{--paper:var(--note-blue)}
.c-green{--paper:var(--note-green)}

/* a small note on a card: about the size of the navy logo square */
.page.stk-room{padding-bottom:60px}
.stk{position:absolute;right:14px;bottom:10px;height:44px;pointer-events:none}
.stk .stk-mini{position:absolute;bottom:0}
.stk:not(.pile) .stk-mini:hover{z-index:20!important}
.stk-mini{--dx:0px;--dy:0px;--tilt:0deg;position:relative;flex:none;width:40px;height:40px;border:0;padding:0;margin:0;border-radius:2px 2px 7px 2px;background:var(--paper);box-shadow:0 1px 1px rgba(20,36,59,.12),0 3px 7px rgba(20,36,59,.14);transform:translate(var(--dx),var(--dy)) rotate(var(--tilt));transition:transform .18s cubic-bezier(.23,1,.32,1),box-shadow .18s;cursor:pointer;pointer-events:auto;overflow:hidden;touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.stk-mini::before{content:"";position:absolute;inset:0 0 auto;height:7px;background:var(--note-band)}
.stk-mini:hover{transform:translate(var(--dx),var(--dy)) rotate(var(--tilt)) scale(1.14);box-shadow:0 2px 2px rgba(20,36,59,.12),0 8px 16px rgba(20,36,59,.18);z-index:2}
.stk-mini .ink{position:absolute;inset:9px 5px 4px;font-size:4.3px;line-height:5.5px;font-weight:700;color:rgba(20,36,59,.72);text-align:left;overflow:hidden;overflow-wrap:anywhere;pointer-events:none}
/* a pile lifts as one when you point at it; a click spreads it out */
.stk.pile:hover .stk-mini,.stk.pile .stk-mini:hover{transform:translate(var(--dx),calc(var(--dy) - 3px)) rotate(var(--tilt));box-shadow:0 2px 2px rgba(20,36,59,.12),0 6px 12px rgba(20,36,59,.16)}
.stk-count{position:absolute;left:-9px;top:-6px;z-index:30;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--navy);color:#fff;font-size:11px;font-weight:700;line-height:18px;text-align:center;box-shadow:0 0 0 2px #fff;pointer-events:auto;cursor:pointer;transition:transform .18s cubic-bezier(.23,1,.32,1)}
.stk.pile:hover .stk-count{transform:translateY(-3px)}

/* the pad floats on every page, above the folded Claude box */
body{--stk-lift:0px}
body.stk-lift{--stk-lift:64px}
.stk-pad{position:fixed;right:max(24px,env(safe-area-inset-right,0px));bottom:calc(max(24px,env(safe-area-inset-bottom,0px)) + var(--stk-lift));width:56px;height:56px;border-radius:14px;border:1px solid var(--light);background:#fff;box-shadow:0 2px 4px rgba(20,36,59,.06),0 16px 40px rgba(20,36,59,.12);display:grid;place-items:center;cursor:pointer;z-index:25;padding:0;transition:transform .15s,box-shadow .15s}
.stk-pad:hover{border-color:var(--fedge)}
.stk-pad .pad{position:relative;width:30px;height:30px}
.stk-pad .pad i{position:absolute;inset:0;border-radius:2px 2px 6px 2px;background:var(--note-yellow);box-shadow:0 1px 2px rgba(20,36,59,.18)}
.stk-pad .pad i:nth-child(1){transform:translate(3px,3px) rotate(6deg);background:#F2DE7E}
.stk-pad .pad i:nth-child(2){transform:translate(1px,1px) rotate(-4deg);background:#F8E88F}
.stk-pad .pad i:nth-child(3)::before{content:"";position:absolute;inset:0 0 auto;height:6px;background:var(--note-band)}
.stk-pad .pad b{position:absolute;right:-7px;bottom:-7px;width:18px;height:18px;border-radius:50%;background:var(--navy);color:#fff;display:grid;place-items:center;font-size:14px;line-height:1;font-weight:700}
.stk-pad-lbl{position:fixed;right:calc(max(24px,env(safe-area-inset-right,0px)) + 66px);bottom:calc(max(24px,env(safe-area-inset-bottom,0px)) + var(--stk-lift) + 16px);background:var(--navy);color:#fff;font-size:12px;font-weight:600;padding:4px 8px;border-radius:6px;white-space:nowrap;opacity:0;transform:translateX(4px);transition:opacity .15s,transform .15s;pointer-events:none;z-index:25}
.stk-pad:hover + .stk-pad-lbl,.stk-pad:focus-visible + .stk-pad-lbl{opacity:1;transform:none}
.stk-loose{position:fixed;right:calc(max(24px,env(safe-area-inset-right,0px)) + 8px);bottom:calc(max(24px,env(safe-area-inset-bottom,0px)) + var(--stk-lift) + 48px);display:flex;flex-direction:row-reverse;gap:2px;z-index:24}

/* a pile spread out: each note a little bigger, side by side */
.stk-scrim{position:fixed;inset:0;background:rgba(20,36,59,.18);opacity:0;transition:opacity .32s ease;z-index:60}
.stk-scrim.on{opacity:1}
.stk-scrim.lite{background:rgba(20,36,59,.08);z-index:58}
.stk-spread{--mid:96px;position:fixed;left:0;top:0;z-index:59;padding:10px 14px 16px;border:1px solid transparent;border-radius:16px;background:rgba(255,255,255,0);transition:background .22s,border-color .22s,box-shadow .22s}
.stk-spread.in{background:#fff;border-color:var(--light);box-shadow:0 2px 4px rgba(20,36,59,.06),0 18px 44px rgba(20,36,59,.14)}
.stk-spread-head{display:flex;align-items:center;gap:8px;min-height:32px;margin-bottom:10px;transition:opacity .15s}
.stk-spread-head b{font-size:14px;font-weight:700;white-space:nowrap}
.stk-spread-head span{min-width:0;font-size:12px;font-weight:600;color:var(--slate);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.stk-spread-head .stk-x{margin-left:auto}
.stk-spread.closing .stk-spread-head{opacity:0}
.stk-spread-grid{display:grid;grid-template-columns:repeat(var(--cols),var(--mid));gap:14px}
.stk-mid{--tilt:0deg;position:relative;width:var(--mid);height:var(--mid);border:0;padding:0;margin:0;border-radius:2px 2px 10px 2px;background:var(--paper);box-shadow:0 1px 2px rgba(20,36,59,.12),0 6px 14px rgba(20,36,59,.16);transform:rotate(var(--tilt));transition:transform .18s cubic-bezier(.23,1,.32,1),box-shadow .18s;cursor:pointer;overflow:hidden;touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.stk-mid::before{content:"";position:absolute;inset:0 0 auto;height:14px;background:var(--note-band)}
.stk-mid:hover{transform:translateY(-3px) rotate(var(--tilt)) scale(1.05);box-shadow:0 2px 3px rgba(20,36,59,.12),0 12px 22px rgba(20,36,59,.2)}
.stk-mid .ink{position:absolute;inset:19px 9px auto;max-height:70px;font-size:11px;line-height:14px;font-weight:700;color:rgba(20,36,59,.8);text-align:left;overflow:hidden;overflow-wrap:anywhere;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:5;pointer-events:none}

/* the full-size note */
.stk-stage{position:fixed;inset:0;display:grid;place-items:center;padding:16px max(16px,env(safe-area-inset-right,0px)) 16px max(16px,env(safe-area-inset-left,0px));z-index:61;pointer-events:none}
.stk-big{pointer-events:auto;position:relative;width:min(360px,calc(100vw - 32px));min-height:min(360px,calc(100vw - 32px));background:var(--paper);color:var(--note-ink);border-radius:3px 3px 16px 3px;box-shadow:0 2px 4px rgba(20,36,59,.10),0 28px 56px rgba(20,36,59,.24);padding:14px 18px 16px;display:grid;grid-template-rows:auto minmax(0,1fr) auto auto;gap:12px;transform-origin:center;transition:transform .42s cubic-bezier(.2,.85,.25,1.04)}
.stk-big::before{content:"";position:absolute;inset:0 0 auto;height:34px;background:var(--note-band);border-radius:3px 3px 0 0;pointer-events:none}
.stk-big.closing{transition:transform .34s cubic-bezier(.5,0,.75,0),opacity .34s}
.stk-big.peel{transition:transform .38s cubic-bezier(.5,0,.75,0),opacity .38s;opacity:0}
.stk-top{position:relative;display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:24px}
.stk-where{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:rgba(20,36,59,.62);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.stk-x{flex:none;width:32px;height:32px;margin:-4px -8px -4px 0;border:0;border-radius:8px;background:transparent;color:var(--note-ink);font-size:22px;line-height:1;cursor:pointer;display:grid;place-items:center}
.stk-x:hover{background:rgba(20,36,59,.07)}
.stk-big textarea{width:100%;min-height:180px;border:0;background:transparent;resize:none;font:600 20px/1.45 var(--font);color:var(--note-ink);padding:2px 0;outline:none}
.stk-big textarea::placeholder{color:rgba(20,36,59,.42)}
.stk-colors{display:flex;gap:8px;align-items:center}
.stk-colors span{font-size:12px;font-weight:600;color:rgba(20,36,59,.62);margin-right:4px}
.stk-sw{width:26px;height:26px;border-radius:50%;border:1px solid rgba(20,36,59,.22);background:var(--paper);cursor:pointer;padding:0}
.stk-sw[aria-checked="true"]{box-shadow:0 0 0 2px #fff,0 0 0 4px var(--navy)}
.stk-acts{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.stk-acts .spacer{flex:1}
.stk-acts .btn{background:rgba(255,255,255,.75)}
.stk-acts .btn.primary{background:var(--navy)}
.stk-hint{flex:1;min-width:0;font-size:12px;font-weight:600;color:rgba(20,36,59,.62)}

/* "tap a card" to stick a new note */
.stk-chip{position:fixed;left:50%;top:max(16px,env(safe-area-inset-top,0px));transform:translateX(-50%);display:flex;align-items:center;gap:12px;background:#fff;border:1px solid var(--light);border-radius:14px;box-shadow:0 2px 4px rgba(20,36,59,.06),0 16px 40px rgba(20,36,59,.14);padding:8px 8px 8px 10px;z-index:62;max-width:calc(100vw - 24px)}
.stk-chip b{font-size:14px;font-weight:700}
.stk-chip small{display:block;font-size:12px;color:var(--slate)}
.stk-chip .stk-mini{cursor:default}
.stk-chip .stk-mini:hover{transform:translate(var(--dx),var(--dy)) rotate(var(--tilt))}
body.stk-picking article.page[data-card]{cursor:copy;outline:2px dashed var(--light);outline-offset:4px;transition:outline-color .15s,background .15s}
body.stk-picking article.page[data-card]:hover{outline-color:var(--blue);background:#FAFCFE}
body.stk-picking article.page[data-card] *{pointer-events:none}
body.stk-picking .stk-pad,body.stk-picking .stk-loose{opacity:.4;pointer-events:none}

/* hold and drag: cards light up, and a tab or folder you hold the note over opens */
.stk-ghost{position:fixed;margin:0;z-index:65;pointer-events:none;transform:rotate(-2deg) scale(1.18)!important;box-shadow:0 4px 6px rgba(20,36,59,.14),0 18px 32px rgba(20,36,59,.24)!important;transition:none!important}
body.stk-dragging,body.stk-dragging *{cursor:grabbing!important;-webkit-user-select:none;user-select:none}
body.stk-dragging article.page[data-card]{outline:2px dashed var(--light);outline-offset:4px}
body.stk-dragging article.page.stk-over{outline-color:var(--blue);background:#FAFCFE}
body.stk-dragging article.page.stk-over.stk-full{outline-color:var(--red);background:#FDF6F5}
.stk-pad.stk-over{border-color:var(--blue);box-shadow:0 0 0 3px #E3EEFA,0 16px 40px rgba(20,36,59,.12);transform:scale(1.08)}
body.stk-dragging .tab.stk-over{background:#E3EEFA}
body.stk-dragging .fold{position:relative}
body.stk-dragging .fold.stk-over .pocket{outline:2px solid var(--blue);outline-offset:2px}
body.stk-dragging .crumb a.stk-over,body.stk-dragging .fhead > a.btn.stk-over{background:#E3EEFA;border-radius:6px}
body.stk-dragging .tab.stk-over::after,body.stk-dragging .fold.stk-over::after,body.stk-dragging .crumb a.stk-over::after,body.stk-dragging .fhead > a.btn.stk-over::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--blue);transform-origin:left;transform:scaleX(0);animation:stk-spring .55s linear forwards}
body.stk-dragging .fold.stk-over::after{left:12px;right:12px;bottom:-8px;border-radius:2px}
body.stk-dragging .crumb a.stk-over,body.stk-dragging .fhead > a.btn.stk-over{position:relative}
@keyframes stk-spring{to{transform:scaleX(1)}}

#toast{z-index:70}

@media (max-width:900px){
  body.stk-lift{--stk-lift:60px}
  .hq{padding-bottom:180px}
  .stk-pad{right:max(12px,env(safe-area-inset-right,0px));bottom:calc(max(12px,env(safe-area-inset-bottom,0px)) + var(--stk-lift))}
  .stk-pad-lbl{display:none}
  .stk-loose{right:calc(max(12px,env(safe-area-inset-right,0px)) + 34px);bottom:calc(max(12px,env(safe-area-inset-bottom,0px)) + var(--stk-lift) + 38px)}
  .stk-loose .stk-mini{width:32px;height:32px}
  .stk-loose .stk-mini .ink{inset:7px 4px 3px;font-size:3.4px;line-height:4.4px}
  body:not(.stk-lift) .stk-pad,body:not(.stk-lift) .stk-loose{display:none}
  .stk-chip{width:calc(100vw - 24px)}
  .stk-chip .txt{min-width:0;flex:1}
  .stk-spread{--mid:min(84px,calc((100vw - 24px - 28px - 30px) / 4));padding:8px 12px 14px}
  .stk-spread-grid{gap:10px}
  .stk-mid .ink{inset:17px 7px auto;max-height:50px;font-size:10px;line-height:12.5px;-webkit-line-clamp:4}
}
@media (prefers-reduced-motion:reduce){
  .stk-mini,.stk-mid,.stk-count,.stk-spread,.stk-spread-head,.stk-big,.stk-big.closing,.stk-big.peel,.stk-scrim,.stk-pad,.stk-pad-lbl{transition:none!important}
  body.stk-dragging .stk-over::after{animation-duration:.01s}
}