/* Разворот ежедневника Timebox Planner — CSS-3D книга с рукописным слоем. Общий файл: страница ежедневника
   (css/planner.css, секция .tb-inside) и глава «Дела» на главной (css/home/plan.css). Разметка — tools/templates/planner-book.mjs,
   состояния на корне .tb-book-root переключает js/pages/planner-book.js: is-open → is-dump → is-priorities → is-timebox → is-flip → is-tear.
   Размер листа задаёт --pw на .tb-book (страница считает его от контейнера .tb-book-stage), сдвиг книги в сцене — --pan. */
@font-face{font-family:StampatelloFaceto;src:url('../assets/fonts/StampatelloFacetoKern.otf') format('opentype');font-display:swap}

/* Токены продукта (дублируют html[data-planner] из planner.css, чтобы книга жила и вне страницы ежедневника) */
.tb-book-root{--tb-black:#0D0B09;--tb-lemon:#F1F252;--tb-terra:#AE5036;--tb-pen:#2B45A3;--tb-ease:cubic-bezier(.2,.75,.25,1)}

.tb-book-stage{position:relative;height:100%;min-height:0;container-type:size;pointer-events:none}
.tb-book{--pw:min(calc(50cqw - 14px),calc((100cqh - 70px) * .72));--ph:calc(var(--pw) * var(--ratio,1.3889));--pan:calc(var(--pw) * -.5);
  position:absolute;left:50%;top:50%;width:calc(var(--pw) * 2);height:var(--ph);perspective:2600px;transform:translate(-50%,-50%) translateX(var(--pan));transition:transform 1s var(--tb-ease)}
.tb-book-root.is-open .tb-book{--pan:0px}
.tb-spread{position:absolute;inset:0;transform-style:preserve-3d;transform:rotateX(9deg);transform-origin:50% 60%}
.tb-under,.tb-sheet,.tb-leaf{position:absolute;left:50%;top:0;width:var(--pw);height:var(--ph)}
.tb-under{border-radius:0 9px 9px 0;background:var(--tb-cover,var(--tb-black));transform:translateZ(-2px);box-shadow:1px 1px 0 #ebe6dc,2px 2px 0 #e0d9cc,3px 3px 0 #d5cdbf,4px 4px 0 #cbc3b4,6px 6px 0 var(--tb-black),0 40px 60px -26px rgba(26,22,19,.6)}
.tb-sheet--base{transform:translateZ(0)}
.tb-leaf{transform-style:preserve-3d;transform-origin:0 50%;transition:transform 1.15s cubic-bezier(.55,.05,.25,1)}
.tb-leaf--day{transform:rotateY(0deg) translateZ(1px)}
.tb-leaf--cover{transform:rotateY(0deg) translateZ(2px)}
.tb-book-root.is-open .tb-leaf--cover{transform:rotateY(-178deg) translateZ(2px)}
.tb-book-root.is-flip .tb-leaf--day{transform:rotateY(-177deg) translateZ(1px)}
.tb-book-root.is-tear .tb-leaf--day{transform:translate3d(calc(var(--pw) * .14),calc(var(--ph) * -.06),70px) rotateZ(5deg) rotateY(0deg) translateZ(1px);transition-duration:1.3s}
.tb-face{position:absolute;inset:0;overflow:hidden;border-radius:2px 9px 9px 2px;background:#fff;backface-visibility:hidden;-webkit-backface-visibility:hidden;container-type:inline-size;box-shadow:0 0 0 1px rgba(26,22,19,.05)}
.tb-face img{width:100%;height:100%;object-fit:cover}
.tb-face--back{transform:rotateY(180deg);border-radius:9px 2px 2px 9px}
.tb-face--cover{background:var(--tb-cover,var(--tb-black))}
.tb-face--inner{display:grid;place-items:center;background:linear-gradient(115deg,#141210,#0d0b09 60%)}
/* содержание листа (картинка и чернила вместе) чуть крупнее и сдвинуто к внешнему краю: печать на картинке занимает
   5.7–94.3% ширины, после transform — 6.5–97.8%, то есть дырки пружины (2.1–5%) не закрывают текст, а поля по краям узкие */
.tb-sheet .tb-face>img,.tb-sheet .tb-ink-layer,.tb-leaf--day .tb-face--front>img,.tb-leaf--day .tb-face--front .tb-ink-layer{transform:translate(2.1%,1%) scale(1.03)}
.tb-leaf--day .tb-face--back>img,.tb-leaf--day .tb-face--back .tb-ink-layer{transform:translate(-2.2%,.5%) scale(1.03)}
.tb-sheet .tb-face{box-shadow:inset 18px 0 22px -18px rgba(26,22,19,.22)}
.tb-leaf--day .tb-face--front{box-shadow:inset 18px 0 22px -18px rgba(26,22,19,.18);transition:box-shadow .9s}
.tb-book-root.is-tear .tb-leaf--day .tb-face--front{box-shadow:0 34px 50px -18px rgba(26,22,19,.45)}
.tb-holes{position:absolute;top:0;bottom:0;left:2.1%;width:2.9%;background:radial-gradient(circle,#1d1a17 0 42%,transparent 47%) 0 0/100% calc(100% / 22) repeat-y;opacity:.82}
.tb-face--back .tb-holes{left:auto;right:2.1%}
.tb-face--cover .tb-holes,.tb-face--inner .tb-holes{background-image:radial-gradient(circle,#3b3631 0 42%,transparent 47%)}
/* кольца входят в центры отверстий (.tb-holes: left 2.1% + ширина 2.9% → центр 3.55% ширины листа) по обе стороны корешка:
   дуга в viewBox — от x=2 до x=22 из 24, значит полуразмах 10/24 ширины = .0355 · pw */
.tb-spiral{position:absolute;left:calc(50% - var(--pw) * .0426);top:0;width:calc(var(--pw) * .0852);height:100%;overflow:visible;transform:translateZ(5px);filter:drop-shadow(1px 2px 1px rgba(0,0,0,.35));pointer-events:none}
.tb-spiral path{fill:none;stroke:#1a1816;stroke-width:2.4px;stroke-linecap:round;vector-effect:non-scaling-stroke}
.tb-spiral path+path{stroke:#3a3631}
.tb-tear-note{position:absolute;left:7%;top:38%;z-index:5;width:34%;margin:0;color:var(--tb-lemon);font-family:StampatelloFaceto,sans-serif;font-size:clamp(17px,1.8vw,24px);line-height:1.15;opacity:0;transform:translateY(10px) rotate(-5deg);transition:.5s .6s;pointer-events:none}
.tb-tear-note::after{content:"→";display:inline-block;margin-left:6px}
.tb-book-root.is-tear .tb-tear-note{opacity:1;transform:rotate(-5deg)}
.tb-book-root.is-tear .tb-book{--pan:calc(var(--pw) * -.1)}

/* Рукописный слой: проявляется слева направо, как будто пишут ручкой */
.tb-ink-layer{position:absolute;inset:0}
.tb-ink{position:absolute;overflow:visible;color:var(--tb-pen);font-family:StampatelloFaceto,cursive;font-size:3.05cqw;line-height:1.15;white-space:nowrap;clip-path:inset(-40% 100% -40% 0);transition:clip-path .2s}
.tb-ink--head{color:#1F2F78;text-decoration:underline;text-decoration-thickness:.08em;text-underline-offset:.18em}
.tb-ink--small{font-size:2.6cqw}
.tb-ink-circle{position:absolute;border:max(1px,.22cqw) solid var(--tb-pen);border-radius:50%;opacity:0;transform:scale(.4) rotate(-20deg);transition:opacity .2s,transform .2s}
.tb-ink-tick{position:absolute;color:var(--tb-terra);font-style:normal;font-weight:700;font-size:3.4cqw;line-height:1;opacity:0;transform:scale(.3);transition:.2s}
.tb-box{position:absolute;display:flex;align-items:center;padding:0 1.3cqw;border:max(1px,.24cqw) solid var(--tb-pen);border-radius:1.4cqw;color:var(--tb-pen);font-family:StampatelloFaceto,cursive;font-size:2.5cqw;line-height:1.05;clip-path:inset(0 100% 0 0 round 1.4cqw);transition:clip-path .2s}
.tb-box span{overflow:hidden;white-space:nowrap;text-overflow:clip}
.tb-box{background:#fff}
.tb-box--rust{background:#F9F9B6}
.tb-book-root.is-dump [data-ink="dump"],.tb-book-root.is-priorities [data-ink="priorities"],.tb-book-root.is-timebox [data-ink="timebox"],.tb-book-root.is-flip [data-ink="notes"]{clip-path:inset(-40% -5% -40% 0);transition:clip-path .75s cubic-bezier(.45,.05,.4,1) calc(.55s + var(--i,0) * .2s)}
.tb-book-root.is-timebox .tb-box[data-ink="timebox"]{clip-path:inset(0 0 0 0 round 1.4cqw);transition-delay:calc(.2s + var(--i,0) * .13s)}
.tb-book-root.is-dump .tb-ink-circle{opacity:1;transform:none;transition:opacity .3s .35s,transform .5s .35s var(--tb-ease)}
.tb-book-root.is-priorities .tb-ink-tick{opacity:1;transform:none;transition:opacity .3s calc(.1s + var(--i) * .2s),transform .5s calc(.1s + var(--i) * .2s) var(--tb-ease)}
/* Без JS — открытый разворот с заполненным днём */
html:not(.js) .tb-book{--pan:0px}
html:not(.js) .tb-leaf--cover{transform:rotateY(-178deg) translateZ(2px)}
html:not(.js) :is(.tb-ink,.tb-box){clip-path:none}
html:not(.js) :is(.tb-ink-circle,.tb-ink-tick){opacity:1;transform:none}