/* Idea Orchard layer on top of notion.css: calm flat surfaces, 8px corners, one accent. */
:root{--leaf:8px;--glow:color-mix(in srgb,var(--indigo) 14%,transparent);--lift:0 6px 22px -10px color-mix(in srgb,var(--ink) 35%,transparent)}
.plancard,.yourplan,.pic-box,.set,.meter{border-radius:var(--leaf)}
.plancard{border:1px solid var(--rule);background:var(--paper);box-shadow:none}
.plancard.mine{border-color:var(--indigo);box-shadow:0 0 0 2px var(--glow)}
.pc-price{font:700 1.35rem var(--sans);color:var(--indigo)}
.pic-box{border:1px dashed var(--indigo);background:linear-gradient(160deg,var(--glow),transparent 60%);padding:1rem;margin:1.2rem 0}
.pic-thumb{display:block;max-width:100%;max-height:240px;border-radius:var(--leaf);margin:.8rem 0;object-fit:cover}
.pic-out{margin-top:.8rem}.pic-text{white-space:pre-wrap;background:var(--sheet);border:1px solid var(--rule);border-radius:var(--leaf);padding:.8rem 1rem}
@media (max-width:899px){
  .bb.active{color:var(--indigo)}
  .work{padding-bottom:calc(5.4rem + env(safe-area-inset-bottom,0px))}
}
/* Welcome shown once in the installed app */
.intro{position:fixed;inset:0;z-index:100;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.4rem;padding:calc(1.5rem + env(safe-area-inset-top,0px)) 1.5rem calc(1.5rem + env(safe-area-inset-bottom,0px));background:radial-gradient(120% 70% at 50% 0,var(--glow),transparent 70%),var(--paper);font-family:var(--sans);animation:intro-in .35s ease both}
.intro.out{opacity:0;transition:opacity .2s}
.intro-skip{position:absolute;top:calc(1rem + env(safe-area-inset-top,0px));right:1rem;min-height:44px;padding:0 1rem;background:none;border:0;color:var(--soft);font:600 .95rem var(--sans)}
.intro-card{max-width:22rem;text-align:center}
.intro-art{display:grid;place-items:center;width:128px;height:128px;margin:0 auto 1.4rem;border-radius:var(--leaf);background:var(--sheet);color:var(--indigo);border:1px solid var(--rule);box-shadow:0 0 0 10px var(--glow)}
.intro h2{margin:0 0 .5rem;font:600 1.9rem var(--serif)}.intro p{margin:0;color:var(--soft);line-height:1.55}
.intro-dots{display:flex;gap:.4rem}.intro-dots i{width:8px;height:8px;border-radius:8px;background:var(--rule);transition:width .2s,background .2s}.intro-dots i.on{width:26px;background:var(--indigo)}
.intro-next{min-width:12rem;justify-content:center;border-radius:26px}
@keyframes intro-in{from{opacity:0;transform:translateY(12px)}}
@media (prefers-reduced-motion:reduce){.intro,.plancard{animation:none;transition:none}}

/* Checkboxes and switches keep their own size. The touch rule that makes inputs 44px tall must not stretch them. */
input[type=checkbox]:not(.ios-switch),input[type=radio]{min-width:0;min-height:0;width:1.3rem;height:1.3rem;padding:0}
.ios-switch{min-width:0;min-height:0;width:51px;height:31px}
.set-check,.ai-tone{min-height:44px}
.row .ai-tone{min-height:0}

/* Installed app feel: no bounce, no highlight flash, no text selection on controls, no callouts */
:root[data-display=standalone]{overscroll-behavior:none}
:root[data-display=standalone] body{overscroll-behavior:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
:root[data-display=standalone] :where(button,a,label,summary,.nb,.clip,.prow,.bb,.chip,.btn,.side a){-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
:root[data-display=standalone] :where(input,textarea,[contenteditable],.cell,.pic-text){-webkit-user-select:text;user-select:text}
:root[data-display=standalone] img{-webkit-user-drag:none}
.sync-wrap{display:none!important}

/* Top bar: bigger name, smaller profile button, and everything on the right sits at the edge */
.topbar{gap:.6rem}
.top-spacer{flex:1 1 auto;min-width:0}
.brand{font:700 1.3rem/1.1 var(--sans);letter-spacing:-.01em;white-space:nowrap;padding:0 .3rem;gap:.55rem}
.brand svg{width:28px;height:28px;flex:none}
.topbar .icon-btn{flex:none}
@media (max-width:23.5rem){.brand{font-size:1.15rem}.brand svg{width:24px;height:24px}}

/* Clean top bar: frosted, hairline, round matching buttons. Profile button = gradient ring, tinted disc, live dot. */
.topbar{background:var(--paper);border-bottom:1px solid var(--rule);box-shadow:none}
.topbar a.icon-btn.top-only{width:36px;height:36px;min-width:0;min-height:0;border-radius:8px;background:transparent;color:var(--soft)}
.topbar a.icon-btn.top-only:active{transform:scale(.92)}
.acct-btn{position:relative;width:36px!important;height:36px!important;min-width:0!important;min-height:0!important;padding:0!important;margin-left:.15rem;overflow:visible!important;border:1px solid var(--rule)!important;border-radius:50%;background:var(--paper)!important;box-shadow:none!important}
.acct-btn:hover{background:var(--hover)!important}
.acct-btn .avatar-ico{width:100%!important;height:100%!important;box-sizing:border-box;border-radius:50%;display:grid;place-items:center;background:color-mix(in srgb,var(--av,var(--indigo)) 16%,var(--paper));color:var(--av,var(--indigo));font-weight:700}
.acct-btn .avatar-ico svg{width:55%;height:55%}
.acct-btn.signed::after{content:"";position:absolute;right:-1px;bottom:-1px;width:10px;height:10px;border-radius:50%;background:#3FBF7F;border:2px solid var(--paper)}

/* Home: calm, like a Notion page. A quiet summary line, five clear things to start, then plain lists. */
.home-meta{display:flex;flex-wrap:wrap;gap:.4rem 1rem;align-items:center;margin:-.4rem 0 1.2rem;color:var(--soft);font:.9rem var(--sans)}
.home-plan{color:var(--soft)!important;text-decoration:none;border:1px solid var(--rule);border-radius:6px;padding:.1rem .55rem}.home-plan:hover{background:var(--hover)}.home-plan small{font-size:inherit}
.qa-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(10.5rem,1fr));gap:.6rem;margin:0 0 1.4rem}
.qa{display:flex;align-items:center;gap:.7rem;padding:.7rem .8rem;border:1px solid var(--rule);border-radius:8px;background:var(--paper);color:var(--ink);text-decoration:none;text-align:left;font:inherit;cursor:pointer;min-height:56px}
.qa:hover{background:var(--hover)}
.qa-i{display:grid;place-items:center;flex:none;width:34px;height:34px;border-radius:8px;background:var(--tint);color:var(--indigo)}
.qa-t{display:flex;flex-direction:column;min-width:0}.qa-t strong{font:600 .95rem var(--sans)}.qa-t small{color:var(--soft);font:.78rem/1.3 var(--sans)}
.home .resume{display:flex;flex-direction:column;gap:.1rem;margin:.3rem 0 0}.home .resume span{font-size:.85rem}
.home section{margin-top:1.6rem}.home section h2{font:600 1rem var(--sans);color:var(--soft);margin:0 0 .5rem}

/* Cookie banner */
.ck{position:fixed;z-index:90;left:.8rem;right:.8rem;bottom:calc(.8rem + env(safe-area-inset-bottom,0px));max-width:34rem;margin:0 auto;padding:1rem 1.1rem;border:1px solid var(--rule);border-radius:var(--leaf);background:var(--paper);color:var(--ink);box-shadow:0 8px 28px -10px rgba(15,15,15,.35);font-family:var(--sans);animation:intro-in .3s ease both}
.ck.out{opacity:0;transition:opacity .2s}
.ck h2{margin:0 0 .35rem;font:600 1.05rem var(--sans)}.ck p{margin:0 0 .8rem;color:var(--soft);font-size:.9rem;line-height:1.5}.ck a{color:var(--indigo)}
.ck-actions{display:flex;flex-wrap:wrap;gap:.5rem}.ck-actions .btn{flex:1 1 auto;justify-content:center}
.ck-row{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:.6rem 0;border-top:1px solid var(--rule)}.ck-row p{margin:.15rem 0 0;font-size:.85rem}.ck-t{font-weight:600}
.ck-more{margin:.7rem 0 0!important}
@media (max-width:899px){.ck{bottom:calc(5.2rem + env(safe-area-inset-bottom,0px))}}

/* Settings: a title and plain explanation on the left, the control on the right */
.settings-page .set{max-width:38rem;margin:1.6rem 0;gap:.7rem}
.set-head{display:flex;align-items:center;gap:.75rem}.set-head h2{font:600 1.1rem var(--sans);margin:0}.set-lede{margin:.1rem 0 0;color:var(--soft);font:.88rem var(--sans)}
.set-ico{display:grid;place-items:center;flex:none;width:36px;height:36px;border-radius:8px;background:var(--tint);color:var(--indigo)}
.set-card{border:1px solid var(--rule);border-radius:var(--leaf);background:var(--paper);padding:.2rem 1rem;display:flex;flex-direction:column}
.set-card>*{border-bottom:1px solid var(--rule)}.set-card>*:last-child{border-bottom:0}
.srow{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.8rem 0;font-family:var(--sans)}
.srow.col{flex-direction:column;align-items:flex-start;gap:.4rem}
.srow-t{display:flex;flex-direction:column;gap:.15rem;min-width:0;flex:1}.srow-t strong{font-weight:600;font-size:.97rem}.srow-t small{color:var(--soft);font-size:.83rem;line-height:1.4}
.srow-c{flex:none;max-width:48%}.srow-c select{max-width:100%}.srow-c input[type=range]{width:9rem}
.set-card>.clip-actions{padding:.8rem 0}.set-card>.set-note,.set-card>.follow,.set-card>.pub-links,.set-card>details,.set-card>.msg{padding:.7rem 0}
.set-note{margin:0;color:var(--soft);font:.87rem/1.5 var(--sans)}
.hub{display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));gap:.6rem;max-width:38rem;margin:1rem 0}
.hub-tile{display:flex;align-items:center;gap:.8rem;padding:.7rem .9rem;border:1px solid var(--rule);border-radius:var(--leaf);background:var(--paper);text-decoration:none;color:var(--ink);font-family:var(--sans)}
.hub-tile:hover{background:var(--hover)}.hub-tile strong{display:block}.hub-tile small{color:var(--soft)}
.set-more summary{cursor:pointer;font:600 .95rem var(--sans);min-height:44px;display:flex;align-items:center}
.set.danger .set-card{border-color:color-mix(in srgb,var(--margin) 45%,var(--rule))}.set.danger .set-ico{background:color-mix(in srgb,var(--margin) 14%,var(--paper));color:var(--margin)}
@media (max-width:30rem){.srow{flex-wrap:wrap}.srow-c{max-width:100%}.srow-c select{min-width:10rem}}
@media (max-width:40rem){
  .qa-grid{grid-template-columns:1fr 1fr;gap:.5rem}
  .qa{flex-direction:column;align-items:flex-start;gap:.5rem;padding:.7rem .75rem;min-height:0}
  .qa-t small{font-size:.76rem}
  .qa-grid .qa:last-child{grid-column:1/-1;flex-direction:row;align-items:center}
}
.topbar a.icon-btn.top-only svg{width:20px;height:20px}

/* Nothing may make a page wider than the screen: let content shrink, and let long chip rows scroll sideways inside themselves. */
.work,.work>*,.settings-page,.home{min-width:0;max-width:100%}
.settings-page .chips{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding-bottom:.2rem}.settings-page .chips::-webkit-scrollbar{display:none}
.settings-page .chip{flex:none}
.topbar .icon-btn svg{width:20px!important;height:20px!important}

/* Touch screens: every control has at least a 44px target, even when it looks smaller. */
@media (pointer:coarse){
  .chip,.btn,.home-plan,.follow-btn,.pub-links a{min-height:44px;display:inline-flex;align-items:center}
  .topbar a.icon-btn.top-only,.acct-btn{position:relative}
  .topbar a.icon-btn.top-only::after,.acct-btn::after{content:"";position:absolute;inset:-4px}
  .acct-btn.signed::after{inset:auto;right:-1px;bottom:-1px}
  .home-plan{padding:0 .75rem}
}
.qc-field small{font-size:.8rem}
@media (pointer:coarse){
  .work input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]),.work select{min-height:44px}
  .work ul>li>a:not([class]),.crumb,.work a.back,.work a[href="/app/notebooks"]:not([class]){display:inline-flex;align-items:center;min-height:44px}
  .work summary{min-height:44px;display:flex;align-items:center}
  .work summary[aria-label]{min-width:44px;justify-content:center}
}

/* Small phones in portrait: the + in the tab bar already adds a note, so the top button would only wrap onto two lines */
.topbar .btn{white-space:nowrap}
@media (max-width:40rem){.topbar .btn.top-only{display:none}}

/* A phone held sideways has very little height. Shrink the bars and stop the page switcher covering the note. */
@media (max-height:520px) and (orientation:landscape){
  :root{--tb:46px}
  .topbar{min-height:46px;padding-top:.1rem;padding-bottom:.1rem}
  .bottom-bar{height:calc(2.7rem + env(safe-area-inset-bottom,0px))}
  .bb:not(.bb-cap) span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .bb svg{width:22px;height:22px}
  .bb-cap .dot{transform:scale(.8)}
  .work{padding-top:.8rem;padding-bottom:calc(3.6rem + env(safe-area-inset-bottom,0px))}
  .work h1,.nbtitle{font-size:1.5rem;margin:.2rem 0}
  .pagenav{position:static;padding:.4rem 0}
  .etool{top:47px}
  .fab{bottom:3.2rem}
  .toasts{bottom:3.4rem}
  .ck{bottom:3.4rem;max-width:26rem;padding:.7rem .9rem}
  .intro{overflow-y:auto;justify-content:flex-start;gap:.8rem}.intro-art{width:72px;height:72px;margin-bottom:.6rem;box-shadow:0 0 0 6px var(--glow)}.intro h2{font-size:1.4rem}
}

/* Tablets in portrait: keep reading lines a comfortable length, like a Notion page */
@media (min-width:40rem) and (max-width:59.99rem){.nbview,.home{max-width:46rem;margin-inline:auto}}
.topbar .icon-btn svg{width:24px!important;height:24px!important}

/* Page title: the general 16px rule for form fields on touch screens was shrinking it. Keep it a real title. */
@media (pointer:coarse){textarea.sheet-title{font-size:clamp(1.7rem,7.5vw,2.2rem)!important}}
.sheet-meta{margin:.1rem 0 .8rem;color:var(--soft);font:.8rem var(--sans)}
/* The add-block button is a quiet outlined circle so it is not mistaken for the main + in the tab bar */
.fab>summary{width:40px;height:40px;min-height:0;min-width:0;border-radius:50%;background:var(--paper);color:var(--ink);border:1px solid var(--rule);box-shadow:0 2px 8px -2px rgba(15,15,15,.25)}
.nbview>.row .btn,.nbview .btn.ghost{min-height:40px;padding:.2rem .85rem;font-size:.9rem}
/* Six start cards on Home sit evenly in two columns on a phone */
@media (max-width:40rem){.qa-grid .qa:last-child{grid-column:auto;flex-direction:column;align-items:flex-start}}
.pic-box .clip-actions{display:flex;flex-wrap:wrap;gap:.5rem}.pic-box .clip-actions .btn{flex:1 1 9rem;justify-content:center}
.pic-thumb{max-height:200px}.qc-err a{color:inherit;font-weight:600}
.btn.danger{background:#B83A34;border-color:#B83A34;color:#fff}

/* Email and letters */
.write{max-width:40rem}.write-details{margin:.8rem 0;border:1px solid var(--rule);border-radius:var(--r);padding:0 .9rem;background:var(--sheet)}
.write-details summary{min-height:44px;display:flex;align-items:center;font:500 .95rem var(--sans)}.write-details[open] summary{border-bottom:1px solid var(--rule);margin-bottom:.5rem}
.write-details .ai-form{margin:.6rem 0 .9rem}.write .ai-form{max-width:none}
.row-check{display:flex;align-items:center;gap:.55rem;min-height:44px;font:.9rem var(--sans);color:var(--ink)}.row-check input{flex:none}
.write-out{display:grid;gap:.7rem;margin:1.4rem 0}.write-out h2{margin:0}.write-out textarea{min-height:15rem;line-height:1.55}
.write-revise{display:flex;flex-wrap:wrap;gap:.5rem}.write-note{margin:0;font:.85rem var(--sans);color:var(--soft)}
.write [hidden]{display:none!important}
.revchart .bar-alt{fill:var(--margin);opacity:.85}.legend{display:flex;flex-wrap:wrap;gap:.9rem;font:.85rem var(--sans);color:var(--soft);margin:.2rem 0 .6rem}.legend i{display:inline-block;width:.8rem;height:.8rem;border-radius:2px;margin-right:.35rem;vertical-align:-1px}

/* Search button in the top bar: a normal, easy-to-tap size */
.topbar a.icon-btn.top-only{width:44px;height:44px;min-width:44px;min-height:44px;color:var(--ink);border:1px solid var(--rule)}
.topbar a.icon-btn.top-only svg{width:24px!important;height:24px!important}