/* ============================================================
   diary.css — the book, the shelf, and the page you write on
   ------------------------------------------------------------
   Two decisions worth stating:

   The writing surface is light in both themes. People expect paper, and a
   page of handwriting-length prose is easier to read dark-on-light however
   the rest of the site is set. The chrome around it follows the theme.

   The page turn is a short transform, not a page-flip simulation. A real
   flip looks like a toy after the third use, and it delays the writing.
   ============================================================ */

/* ---------- the shelf ---------- */
.shelf{
  display:grid; gap:1.1rem;
  grid-template-columns:repeat(auto-fill,minmax(190px,1fr));
}
.book-spine{
  appearance:none; border:0; padding:0; background:none; cursor:pointer;
  text-align:left; border-radius:var(--r-m);
}
.book-spine:focus-visible{outline:2px solid var(--brand-hi);outline-offset:3px}
.book-cover{
  display:flex; flex-direction:column; gap:.3rem;
  min-height:230px; padding:1.1rem 1.1rem 1.1rem 1.5rem;
  border-radius:6px 12px 12px 6px;
  background:linear-gradient(100deg, var(--brand-dark) 0 10px, var(--brand) 10px 100%);
  color:#fff; position:relative; overflow:hidden;
  box-shadow:0 10px 26px rgba(0,0,0,.28);
  transition:transform var(--d) var(--e-out), box-shadow var(--d) var(--e-out);
}
/* the stitched edge of a hardback */
.book-cover::before{
  content:""; position:absolute; inset:0 auto 0 10px; width:1px;
  background:rgba(255,255,255,.35);
}
.book-spine:hover .book-cover{transform:translateY(-3px) rotate(-.4deg);box-shadow:0 16px 34px rgba(0,0,0,.34)}
.book-title{font-family:var(--f-display);font-size:1.12rem;line-height:1.3;font-weight:650}
.book-sub{font-size:.76rem;opacity:.85}
.book-foot{margin-top:auto;font-size:.72rem;opacity:.85;font-family:var(--f-mono)}
.book-locked{
  margin-top:.4rem;font-size:.7rem;background:rgba(0,0,0,.3);
  padding:.2rem .5rem;border-radius:99px;width:fit-content;
}

/* ---------- choosing a template ---------- */
.tpl-grid{display:grid;gap:1rem;grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}
.tpl-card{
  appearance:none;cursor:pointer;text-align:left;
  display:flex;flex-direction:column;gap:.5rem;align-items:flex-start;
  padding:1rem;border-radius:var(--r-lg);
  background:var(--bg-elev);border:1px solid var(--line);color:var(--text);
  transition:border-color var(--d),transform var(--d) var(--e-out);
}
.tpl-card:hover{transform:translateY(-2px);border-color:var(--brand)}
.tpl-card.on{border-color:var(--brand);box-shadow:0 0 0 2px var(--brand) inset}
.tpl-card:focus-visible{outline:2px solid var(--brand-hi);outline-offset:3px}
.tpl-name{font-family:var(--f-display);font-weight:650}
.tpl-blurb{font-size:var(--t-sm);color:var(--text-soft);line-height:1.5}
/* a few ruled lines, so each template looks like what it is */
.tpl-peek{
  display:block;width:100%;height:96px;border-radius:var(--r-m);
  background:#fbfaf6;border:1px solid var(--line);
  padding:.7rem .8rem;display:flex;flex-direction:column;gap:.44rem;justify-content:center;
}
.tpl-peek i{display:block;height:3px;border-radius:2px;background:#d9d4c7}
.tpl-peek i:nth-child(2){width:86%}
.tpl-peek i:nth-child(3){width:94%}
.tpl-peek i:nth-child(4){width:62%}
.tpl-kids .tpl-peek,.tpl-dreams .tpl-peek{background:#fff7ed}
.tpl-kids i,.tpl-dreams i{background:#fcd9a8;height:5px}
.tpl-gratitude .tpl-peek{background:#f5f3ff}
.tpl-gratitude i{background:#d9d2f5}
.tpl-fitness .tpl-peek{background:#f0fdf9}
.tpl-fitness i{background:#b9e5dc}
.tpl-work .tpl-peek{background:#f8fafc}
.tpl-travel .tpl-peek{background:#fefce8}
.tpl-travel i{background:#e6dfa8}

/* ---------- the PIN screen ---------- */
.pin-card{max-width:26rem;margin-inline:auto;text-align:center}
.pin-lock{width:46px;height:46px;margin:0 auto .6rem;color:var(--brand-hi)}
.pin-lock svg{width:100%;height:100%}
.pin-input{
  text-align:center;letter-spacing:.7em;font-size:1.5rem;
  max-width:11ch;margin-inline:auto;padding-left:.7em;
}

/* ---------- the book ---------- */
.habit-strip{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1rem}
.habit-strip:empty{display:none}

.book{max-width:52rem;margin-inline:auto}
.book-page{
  background:#fdfcf7; color:#1a1a1a;
  border:1px solid #e5e0d2; border-radius:var(--r-lg);
  padding:clamp(1.1rem,3vw,2rem);
  box-shadow:0 14px 40px rgba(0,0,0,.22);
  /* the faint ruling of a notebook */
  background-image:repeating-linear-gradient(transparent 0 31px, #ece7d8 31px 32px);
  background-position:0 6px;
  transition:transform .15s var(--e-out), opacity .15s linear;
}
.book-page.turn-fwd{transform:translateX(-14px) rotateY(-4deg);opacity:.4}
.book-page.turn-back{transform:translateX(14px) rotateY(4deg);opacity:.4}

.page-head{display:flex;gap:.8rem;flex-wrap:wrap;align-items:center;margin-bottom:.8rem}
.page-title{
  flex:1;min-width:12rem;border:0;background:none;color:#111;
  font-family:var(--f-display);font-size:1.3rem;font-weight:650;padding:.2rem 0;
  border-bottom:2px solid #e0dac9;
}
.page-title:focus{outline:none;border-bottom-color:var(--brand)}
.page-title::placeholder{color:#b3ab97}
.page-date{
  border:1px solid #e0dac9;background:#fff;color:#444;
  border-radius:var(--r-s);padding:.3rem .5rem;font-size:.8rem;font-family:var(--f-mono);
}
.page-prompts{display:flex;flex-wrap:wrap;gap:.4rem;margin-bottom:.7rem}
.prompt-chip{
  appearance:none;cursor:pointer;border:1px dashed #cfc7b2;background:#fffdf6;color:#6b6350;
  border-radius:99px;padding:.22rem .7rem;font-size:.76rem;
}
.prompt-chip:hover{border-color:var(--brand);color:var(--brand-dark)}

.page-body{
  width:100%;min-height:420px;resize:vertical;
  border:0;background:transparent;color:#1a1a1a;
  font-family:Georgia,'Times New Roman',serif;font-size:1.03rem;
  /* line-height matched to the ruling above, or the words float off the lines */
  line-height:32px;padding:0;
}
.page-body:focus{outline:none}
.page-body::placeholder{color:#b3ab97}

.page-drawing{margin:1rem 0 0}
.page-drawing img{width:100%;border:1px solid #e0dac9;border-radius:var(--r-m);background:#fff}
.page-drawing figcaption{margin-top:.4rem}

.page-photos{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1rem}
.page-photos:empty{display:none}
.photo{position:relative;margin:0;width:140px}
.photo img{width:100%;height:110px;object-fit:cover;border-radius:var(--r-m);border:1px solid #e0dac9}
.photo-x{
  position:absolute;top:-7px;right:-7px;width:24px;height:24px;border-radius:50%;
  border:1px solid #d9d2c0;background:#fff;color:#444;cursor:pointer;line-height:1;font-size:1rem;
}
.photo-x:hover{background:var(--rose);color:#fff;border-color:var(--rose)}

.page-tools{
  display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;
  margin-top:1.2rem;padding-top:.9rem;border-top:1px solid #ece7d8;
}
.page-tools .btn{border-color:#ddd6c4;color:#4a4436}
.page-tools .btn:hover{border-color:var(--brand);color:var(--brand-dark)}
.save-state{margin-left:auto;font-size:.74rem;color:#8a8270;font-family:var(--f-mono)}
.save-state.ok{color:#0b8278}
.save-state.warn{color:#b45309}

.book-nav{display:flex;align-items:center;justify-content:space-between;gap:.7rem;margin-top:1rem}
.book-count{font-size:var(--t-sm);color:var(--text-dim);display:flex;align-items:center;gap:.4rem}
.book-count .input{width:4.5rem;text-align:center;padding:.3rem .4rem}

/* ---------- drawing ---------- */
.draw-canvas{
  width:100%;height:auto;aspect-ratio:1000/620;background:#fff;
  border:1px solid var(--line);border-radius:var(--r-m);cursor:crosshair;touch-action:none;
}
.ink{
  width:26px;height:26px;border-radius:50%;cursor:pointer;
  border:2px solid var(--line-hi);padding:0;
}
.ink.on{border-color:var(--brand-hi);box-shadow:0 0 0 2px var(--brand-hi)}
#dr-erase.on{border-color:var(--brand);color:var(--brand-hi)}

/* ---------- search results ---------- */
.hit{
  display:block;width:100%;text-align:left;cursor:pointer;
  background:var(--surface-2);border:1px solid var(--line);color:var(--text);
  border-radius:var(--r-m);padding:.65rem .8rem;margin-bottom:.5rem;
}
.hit:hover{border-color:var(--brand)}
.hit b{display:block;font-size:var(--t-sm)}
.hit span{display:block;font-size:var(--t-xs);color:var(--text-dim);margin-top:.2rem;line-height:1.5}

/* ---------- phones ---------- */
@media(max-width:560px){
  .book-page{padding:1rem .9rem;background-position:0 4px}
  .page-body{min-height:340px}
  .page-title{font-size:1.12rem}
  .photo{width:calc(50% - .3rem)}
  .photo img{height:92px}
}

/* Printing from the page itself (not the export window) should still give
   something readable rather than the whole site. */
@media print{
  .nav,.footer,.book-nav,.page-tools,.habit-strip,.crumbs,#bk-panel,.scroll-bar,.fx-noise,.fx-grid{display:none !important}
  .book-page{box-shadow:none;border:0;background-image:none}
}