/* The Book Builder - The AI Corner Store
   Same palette and type as the store front page, on purpose. */
:root{
  --paper:#FAF6EE; --ink:#211B14; --clay:#B5432A; --pine:#2F6B4F;
  --mustard:#D9A419; --soft:#8A7E6E; --card:#FFFDF7; --line:#d8cfbf;
  --cover:#B5432A;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{background:var(--paper);color:var(--ink);font:17px/1.6 Inter,system-ui,sans-serif}
a{color:var(--clay);font-weight:700}

.screen{display:none}
.screen.show{display:block}
.pad{max-width:720px;margin:0 auto;padding:34px 20px 70px}
.pad.center{text-align:center;padding-top:110px}

.logo{font:900 20px/1 Fraunces,serif;letter-spacing:-.02em;margin-bottom:26px}
.logo span{color:var(--clay)}
.stamp{display:inline-block;font-weight:800;font-size:12px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--pine);border:2px solid var(--pine);padding:7px 14px;border-radius:999px;
  transform:rotate(-1.5deg);margin-bottom:18px}
h1.big{font:900 clamp(30px,5.4vw,46px)/1.08 Fraunces,serif;letter-spacing:-.02em;margin-bottom:14px}
h1.big em{font-style:normal;color:var(--clay)}
.lede{font-size:17.5px;color:#4a4136;max-width:56ch;margin-bottom:26px}
.lede.small{font-size:15.5px;margin-top:-8px}
.fine{font-size:13.5px;color:var(--soft);margin-top:16px}
.err{color:var(--clay);font-weight:700;font-size:15px;margin-top:12px}

.lab{display:block;font-weight:800;font-size:14px;letter-spacing:.02em;margin-bottom:8px}
.field{width:100%;background:var(--card);border:2px solid var(--ink);border-radius:12px;
  padding:15px 16px;font:17px/1.5 Inter,system-ui,sans-serif;color:var(--ink)}
.field:focus{outline:3px solid var(--mustard);outline-offset:2px}
.field.mono{font-family:ui-monospace,Menlo,Consolas,monospace;letter-spacing:.06em;text-transform:uppercase}
textarea.field{min-height:170px;resize:vertical}

.btn{display:inline-block;background:var(--ink);color:var(--paper);border:2px solid var(--ink);
  border-radius:11px;font:800 15.5px/1 Inter,sans-serif;padding:14px 20px;cursor:pointer;
  text-decoration:none;transition:.15s}
.btn:hover{background:var(--clay);border-color:var(--clay)}
.btn.ghost{background:transparent;color:var(--ink)}
.btn.ghost:hover{background:var(--ink);color:var(--paper)}
.big-btn{width:100%;padding:17px;font-size:17px;margin-top:16px}
.row{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin-top:6px}
.row .big-btn{width:auto;flex:1 1 240px;margin-top:10px}
.row .ghost{margin-top:10px}
.link-btn{background:none;border:0;color:var(--soft);font:700 14px Inter,sans-serif;cursor:pointer;padding:6px 2px}
.link-btn:hover{color:var(--clay)}

/* pick a book type */
.picks{display:grid;gap:16px}
.pick{background:var(--card);border:2px solid var(--ink);border-radius:14px;padding:22px;
  text-align:left;cursor:pointer;box-shadow:5px 5px 0 rgba(33,27,20,.12);transition:.15s;font:inherit;color:inherit}
.pick:hover{transform:translate(-2px,-2px);box-shadow:8px 8px 0 rgba(33,27,20,.16)}
.pick b{display:block;font:700 21px/1.2 Fraunces,serif;margin-bottom:6px}
.pick .who{font-size:12px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:var(--clay);margin-bottom:8px}
.pick p{font-size:15px;color:#4a4136}
.pick .eg{font-size:13.5px;color:var(--soft);margin-top:9px;font-style:italic}
.resume{border:2px dashed var(--soft);border-radius:14px;padding:22px;margin-top:26px}
.resume p{font-size:15px;color:#4a4136;margin:6px 0 14px}
.resume .btn{margin-right:10px;margin-top:6px}

/* interview */
.topbar{position:sticky;top:0;background:var(--paper);border-bottom:2px solid var(--ink);
  display:flex;align-items:center;gap:14px;padding:12px 20px;z-index:5}
.progress{flex:1;height:10px;background:#e7dfd0;border:2px solid var(--ink);border-radius:999px;overflow:hidden}
#bar{height:100%;width:0;background:var(--pine);transition:width .25s}
.count{font-size:13px;font-weight:700;color:var(--soft);white-space:nowrap}
.qkick{font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--clay);margin-bottom:10px}
.qtitle{font:700 clamp(24px,4.4vw,32px)/1.2 Fraunces,serif;margin-bottom:10px}
.qhelp{font-size:15.5px;color:#4a4136;margin-bottom:8px;max-width:58ch}
.qeg{font-size:14.5px;color:var(--soft);border-left:3px solid var(--line);padding-left:12px;margin-bottom:18px;max-width:58ch}

/* repeating list questions */
.item{background:var(--card);border:2px solid var(--ink);border-radius:14px;padding:18px;margin-bottom:14px;position:relative}
.item .num{font:800 12px Inter,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--pine);margin-bottom:10px;display:block}
.item .sub{display:block;font-weight:700;font-size:13.5px;margin:12px 0 6px}
.item .kill{position:absolute;top:12px;right:12px;background:none;border:0;color:var(--soft);
  font:700 13px Inter,sans-serif;cursor:pointer}
.item .kill:hover{color:var(--clay)}
.addbtn{width:100%;background:transparent;border:2px dashed var(--soft);border-radius:12px;
  padding:14px;font:800 15px Inter,sans-serif;color:var(--ink);cursor:pointer}
.addbtn:hover{border-color:var(--clay);color:var(--clay)}
.addbtn[disabled]{opacity:.4;cursor:default}

/* title suggestions */
.sugs{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 4px}
.sug{background:var(--card);border:2px solid var(--line);border-radius:999px;padding:9px 14px;
  font:600 14px Inter,sans-serif;cursor:pointer;text-align:left}
.sug:hover{border-color:var(--clay);color:var(--clay)}

/* building */
.spinner{width:46px;height:46px;margin:0 auto 22px;border:5px solid #e7dfd0;border-top-color:var(--clay);
  border-radius:50%;animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.spinner{animation:none}}

/* the finished book */
.toolbar{position:sticky;top:0;background:var(--ink);color:var(--paper);z-index:6;
  display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;padding:12px 18px}
.toolbar b{font:700 17px Fraunces,serif}
.tb-left{display:flex;flex-direction:column;min-width:0}
.toolbar b{overflow-wrap:anywhere}
/* the stats line has to wrap or a long book title pushes the page sideways on a phone */
.toolbar .count{color:#b8b0a2;white-space:normal}
.tb-right{display:flex;flex-wrap:wrap;gap:8px}
.toolbar .btn{background:var(--paper);color:var(--ink);border-color:var(--paper);padding:11px 14px;font-size:14px}
.toolbar .btn.locked{opacity:.72}
.toolbar .btn:hover{background:var(--mustard);border-color:var(--mustard)}
.toolbar .btn.ghost{background:transparent;color:var(--paper);border-color:#6b6153}
.toolbar .btn.ghost:hover{background:var(--paper);color:var(--ink)}
.toolbar .btn.on{background:var(--mustard);border-color:var(--mustard);color:var(--ink)}
.helpstrip{background:#fff6da;border-bottom:2px solid var(--ink);padding:11px 18px;font-size:14.5px}
.covers{display:flex;align-items:center;gap:9px;justify-content:center;padding:16px 18px 0;font-size:13.5px;font-weight:700;color:var(--soft)}
.swatch{width:26px;height:26px;border-radius:50%;border:2px solid var(--ink);cursor:pointer}
.swatch.on{outline:3px solid var(--mustard);outline-offset:2px}
.afterbox{border:2px dashed var(--soft);border-radius:14px;padding:22px;margin-top:10px}
.afterbox b{font:700 18px Fraunces,serif}
.afterbox p{font-size:15px;color:#4a4136;margin-top:8px}

/* the printed pages */
.paper{max-width:800px;margin:22px auto 40px;padding:0 16px}
.page{background:#fff;border:1px solid var(--line);box-shadow:0 3px 16px rgba(33,27,20,.10);
  padding:62px 66px;margin-bottom:26px;min-height:300px}
.page h2{font:700 30px/1.18 Fraunces,serif;margin-bottom:18px}
.page h3{font:700 20px/1.3 Fraunces,serif;margin:26px 0 8px}
.page p{font-size:17px;line-height:1.72;margin-bottom:15px;color:#2b241c}
.page .kick{font-size:12px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--clay);margin-bottom:8px}
.page ol,.page ul{margin:0 0 16px 22px}
.page li{margin-bottom:9px;font-size:17px;line-height:1.65}
.page .qa{margin-bottom:18px}
.page .qa .q{font-weight:800;margin-bottom:4px}
.page blockquote{border-left:4px solid var(--mustard);padding-left:16px;margin:0 0 16px;font-style:italic;color:#4a4136}

/* cover page */
.page.cover{background:var(--cover);color:#fff;text-align:center;padding:96px 60px;display:flex;
  flex-direction:column;justify-content:center;min-height:640px}
.page.cover .ctitle{font:900 clamp(32px,5vw,46px)/1.12 Fraunces,serif;margin-bottom:16px}
.page.cover .csub{font-size:19px;opacity:.92;margin-bottom:36px;font-style:italic}
.page.cover .cby{font-size:13px;letter-spacing:.2em;text-transform:uppercase;font-weight:800;opacity:.85}
.page.cover .cname{font:700 25px Fraunces,serif;margin-top:8px}
.page.cover .cbiz{font-size:15px;margin-top:6px;opacity:.9}
.page.cover .rule{width:64px;height:3px;background:#fff;opacity:.65;margin:0 auto 30px}

/* mustard cover needs dark type, white on yellow is unreadable */
.page.cover.on-light{color:#211B14}
.page.cover.on-light .rule{background:#211B14}

.toc li{margin-bottom:8px}
.longer{margin-top:10px}
.longer button{background:transparent;border:2px solid var(--line);border-radius:999px;
  padding:8px 14px;font:700 13px Inter,sans-serif;color:var(--soft);cursor:pointer}
.longer button:hover{border-color:var(--clay);color:var(--clay)}

[contenteditable="true"]{outline:2px dashed var(--mustard);outline-offset:3px;border-radius:3px}
[contenteditable="true"]:focus{outline:3px solid var(--mustard)}

.toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%);background:var(--ink);color:var(--paper);
  padding:13px 20px;border-radius:999px;font-weight:700;font-size:14.5px;z-index:20;max-width:90vw;text-align:center}

@media (max-width:640px){
  .page{padding:34px 24px}
  .page.cover{padding:64px 26px;min-height:460px}
  .toolbar{padding:10px 12px}
  .toolbar .btn{flex:1 1 auto}
}

@media print{
  .no-print,.toolbar,.helpstrip,.covers,.longer{display:none !important}
  body{background:#fff}
  .paper{max-width:none;margin:0;padding:0}
  .page{border:0;box-shadow:none;margin:0;padding:0;min-height:0;
    page-break-after:always;break-after:page}
  .page:last-child{page-break-after:auto;break-after:auto}
  .page.cover{min-height:0;padding:120px 40px;
    -webkit-print-color-adjust:exact;print-color-adjust:exact}
  .page h2,.page h3{break-after:avoid}
  .page p,.page li{break-inside:avoid}
  [contenteditable]{outline:0 !important}
  @page{margin:20mm 18mm}
}

/* the paywall: read the whole book free, pay to keep it */
.paywall{background:#fff6da;border-top:3px solid var(--ink);border-bottom:3px solid var(--ink);
  padding:30px 18px;margin-top:4px}
.paywall-inner{max-width:900px;margin:0 auto;display:flex;gap:34px;flex-wrap:wrap;align-items:center}
.pw-left{flex:1 1 320px}
.pw-title{font:900 clamp(24px,4vw,32px)/1.1 Fraunces,serif;margin:10px 0 10px;letter-spacing:-.01em}
.pw-copy{font-size:15.5px;color:#4a4136;max-width:48ch;margin-bottom:16px}
.pw-right{flex:0 1 260px;min-width:230px}
.pw-right .lab{margin-top:4px}
.pw-right .btn{width:100%;margin-top:10px}
.unlocked-strip{background:#e7f2ea;border-bottom:2px solid var(--pine);color:#204832;
  text-align:center;padding:12px 18px;font-size:14.5px;font-weight:700}
@media(max-width:640px){.paywall{padding:24px 16px}.paywall-inner{gap:20px}}