/* Дневник — the Book.
 *
 * Paper, not app chrome. The rest of Дневник is a writing tool and looks
 * like one; this screen is the thing you made, so it gets warm stock, a
 * gutter shadow and serif type in both appearances. Only the surround
 * follows the shell's light/dark — the paper stays paper, because a
 * sketchbook that inverts at dusk is not a sketchbook.
 */

.book-view {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  --paper: #ece7dc;
  --paper-2: #f3efe6;
  --paper-3: #ded6c6;
  --bk-ink: #2b2721;
  --bk-ink-soft: rgba(43, 39, 33, 0.6);
  --bk-ink-faint: rgba(43, 39, 33, 0.34);
  --bk-earth: #9a6a3e;
  --bk-serif: 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia,
    'Times New Roman', serif;
  --ratio: 0.7045;
}

/* ------------------------------------------------------------- bar */

.bk-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
  flex: 0 0 auto;
}

.bk-bar .bk-count {
  font-variant-numeric: tabular-nums;
  color: var(--fg-faint);
  font-size: 13px;
  min-width: 62px;
  text-align: center;
}

.bk-spacer { flex: 1 1 auto; }

.bk-status {
  font-size: 13px;
  color: var(--fg-soft);
  max-width: 46ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bk-status-error { color: var(--warn); }

/* ----------------------------------------------------------- stage */

.bk-stage {
  position: relative;
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(10px, 3vw, 40px);
  perspective: 2400px;
  touch-action: pan-y;
  overflow: hidden;
  --lift: 0;
}

.bk-book {
  position: relative;
  width: min(100%, calc((100vh - 190px) / var(--ratio)));
  aspect-ratio: 1 / var(--ratio);
  transform-style: preserve-3d;
  border-radius: 3px;
  background: linear-gradient(180deg, var(--paper-2), var(--paper) 55%, var(--paper-3));
  /* The book lifts a hair off the desk while a page is in the air. */
  box-shadow:
    0 calc(18px + 26px * var(--lift)) calc(40px + 40px * var(--lift))
      calc(-16px - 4px * var(--lift)) rgba(0, 0, 0, 0.45),
    0 2px 6px rgba(0, 0, 0, 0.18);
  cursor: grab;
  user-select: none;
}

.bk-book:active { cursor: grabbing; }

/* Where the two leaves meet. Drawn over the pages, under the turning
   leaf, so a page sliding past still passes through the shadow. */
.bk-gutter {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 12%;
  transform: translateX(-50%);
  pointer-events: none;
  z-index: 3;
  background: linear-gradient(
    90deg,
    rgba(43, 39, 33, 0) 0%,
    rgba(43, 39, 33, 0.07) 34%,
    rgba(43, 39, 33, 0.16) 49%,
    rgba(43, 39, 33, 0.16) 51%,
    rgba(43, 39, 33, 0.07) 66%,
    rgba(43, 39, 33, 0) 100%
  );
}

/* ------------------------------------------------------------ page */

.bk-page {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 50%;
  padding: clamp(16px, 4.2%, 52px) clamp(14px, 4.6%, 56px);
  display: flex;
  flex-direction: column;
  color: var(--bk-ink);
  font-family: var(--bk-serif);
  overflow: hidden;
  background: linear-gradient(180deg, var(--paper-2), var(--paper) 60%, var(--paper-3));
}

.bk-left { left: 0; padding-right: clamp(20px, 6%, 72px); }
.bk-right { left: 50%; padding-left: clamp(20px, 6%, 72px); }

.bk-dateline { display: flex; align-items: baseline; gap: 10px; }

.bk-day {
  font-size: clamp(28px, 4.4vw, 54px);
  line-height: 0.9;
  letter-spacing: -0.01em;
}

.bk-month {
  font-style: italic;
  font-size: clamp(12px, 1.6vw, 22px);
  color: var(--bk-ink-soft);
}

.bk-rule {
  margin: clamp(10px, 2.2%, 24px) 0 clamp(12px, 2.6%, 26px);
  height: 1px;
  background: linear-gradient(90deg, rgba(43, 39, 33, 0.32), rgba(43, 39, 33, 0));
}

.bk-entry {
  font-size: clamp(11px, 1.35vw, 19px);
  line-height: 1.6;
  overflow: hidden;
}

/* A day that outruns its page fades out rather than being cut mid-letter:
   the page is a view of the entry, the editor is where all of it lives.
   Only applied when it actually overflows -- unconditionally, it dims the
   last line of every short day and every page looks truncated. */
.bk-entry-clipped {
  mask-image: linear-gradient(180deg, #000 86%, transparent 100%);
  -webkit-mask-image: linear-gradient(180deg, #000 86%, transparent 100%);
}

.bk-entry p { margin: 0 0 0.85em; }
.bk-entry p:first-child::first-letter {
  font-size: 2.7em;
  float: left;
  line-height: 0.78;
  padding: 0.1em 0.12em 0 0;
  color: var(--bk-earth);
}

.bk-folio {
  position: absolute;
  left: clamp(14px, 4.6%, 56px);
  bottom: clamp(12px, 3.4%, 40px);
  font-size: 11px;
  letter-spacing: 0.3em;
  color: var(--bk-ink-faint);
}

.bk-folio-r { left: auto; right: clamp(14px, 4.6%, 56px); }

/* ----------------------------------------------------------- plate */

.bk-plate {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
  /* Slightly past the page's own padding: a sketch is not a figure in a
     document, and a wide margin around it reads as a stock photo. */
  margin: -2% -3% 0;
}

.bk-sketch {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  /* The wash has no business ending on a ruled edge. Sized explicitly:
     a mask defaults to `repeat`, and a repeated soft-edged gradient
     tiles its own hard seam back in. */
  mask-image: radial-gradient(118% 118% at 50% 50%, #000 68%, transparent 97%);
  -webkit-mask-image: radial-gradient(118% 118% at 50% 50%, #000 68%, transparent 97%);
  mask-size: 100% 100%;
  -webkit-mask-size: 100% 100%;
  mask-repeat: no-repeat;
  -webkit-mask-repeat: no-repeat;
}

/* Nothing to show yet: hide the element rather than let it render as a
   broken icon with the alt text next to it. */
.bk-plate-waiting .bk-sketch { visibility: hidden; }

.bk-plate-broken::after {
  content: 'Рисунок не загрузился';
  color: var(--bk-ink-faint);
  font-size: 13px;
}

.bk-caption { text-align: center; padding-top: clamp(6px, 1.6%, 16px); }

.bk-caption-title {
  font-size: clamp(13px, 1.9vw, 27px);
  line-height: 1.15;
  outline: none;
  border-radius: 3px;
}

.bk-caption-title:focus {
  background: rgba(154, 106, 62, 0.12);
  box-shadow: 0 0 0 4px rgba(154, 106, 62, 0.12);
}

.bk-caption-sub {
  margin-top: 5px;
  font-size: 10px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--bk-ink-faint);
}

/* ------------------------------------------------------- undrawn */

.bk-undrawn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
}

.bk-draw {
  font: inherit;
  font-size: clamp(12px, 1.5vw, 18px);
  padding: 0.55em 1.4em;
  border-radius: 999px;
  border: 1px solid rgba(43, 39, 33, 0.28);
  background: rgba(255, 255, 255, 0.5);
  color: var(--bk-ink);
  cursor: pointer;
}

.bk-draw:hover:not(:disabled) { background: rgba(255, 255, 255, 0.85); }
.bk-draw:disabled { opacity: 0.55; cursor: default; }

.bk-drawing {
  font-size: clamp(13px, 1.6vw, 20px);
  color: var(--bk-ink);
  font-variant-numeric: tabular-nums;
}

.bk-drawing-sub {
  margin-top: 6px;
  font-size: 12px;
  line-height: 1.4;
  color: var(--bk-ink-faint);
  max-width: 26ch;
}

.bk-failed { color: #8a4b2a; }

.bk-styles { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }

.bk-style {
  font: inherit;
  font-size: 11px;
  letter-spacing: 0.08em;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid transparent;
  background: none;
  color: var(--bk-ink-faint);
  cursor: pointer;
}

.bk-style[aria-pressed='true'] {
  color: var(--bk-ink);
  border-color: rgba(43, 39, 33, 0.3);
}

.bk-needs-key {
  font: inherit;
  font-size: 11px;
  background: none;
  border: none;
  color: var(--bk-earth);
  text-decoration: underline;
  cursor: pointer;
}

/* -------------------------------------------------- the turning leaf
 *
 * A chain of nested strips. The first one carries the whole swing; every
 * strip after it adds one more small step, so the tangent sweeps through
 * an arc and the surface bends instead of pivoting flat.
 */

.bk-leaf {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 50%;
  transform-style: preserve-3d;
  z-index: 4;
  pointer-events: none;
}

.bk-leaf-next { left: 50%; }
.bk-leaf-prev { left: 0; }

.bk-strip {
  position: absolute;
  top: 0;
  height: 100%;
  width: calc(100% / var(--n));
  transform-style: preserve-3d;
}

.bk-leaf-next .bk-strip { transform-origin: left center; }
.bk-leaf-next > .bk-strip { left: 0; transform: rotateY(calc(-1 * var(--turn))); }
.bk-leaf-next .bk-strip > .bk-strip {
  left: 100%;
  width: 100%;
  transform: rotateY(calc(-1 * var(--step)));
}

.bk-leaf-prev .bk-strip { transform-origin: right center; }
.bk-leaf-prev > .bk-strip { right: 0; transform: rotateY(var(--turn)); }
.bk-leaf-prev .bk-strip > .bk-strip {
  right: 100%;
  width: 100%;
  transform: rotateY(var(--step));
}

.bk-face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  overflow: hidden;
  background: var(--paper);
}

.bk-back { transform: rotateY(180deg); }

/* A window onto this strip's slice of the page. The clone inside is a
   whole page, slid sideways; the seams line up however the chain bends. */
.bk-window { position: absolute; inset: 0; overflow: hidden; }

/* The clone is a .bk-page, and .bk-page is width:50% — of the book when
   it sits in the book, but of a one-fourteenth-wide strip when it sits
   in one, which is not a page at all. Pin it to the page width the
   script measured instead. */
.bk-leaf .bk-page {
  position: absolute;
  left: 0;
  width: var(--pw);
  height: 100%;
}

.bk-shade,
.bk-gloss {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* Away from the light: the further this strip has turned, the darker.
   Interpolated across the strip, from its near edge to its far one, so
   the chain reads as one bent sheet rather than as N flat ribbons. */
.bk-shade {
  background: linear-gradient(
    90deg,
    rgba(36, 31, 25, var(--a1, 0)),
    rgba(36, 31, 25, var(--a2, 0))
  );
}

/* Toward it: a narrow specular band as the paper passes square-on. */
.bk-gloss {
  background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.9));
  opacity: var(--gloss, 0);
}

/* ------------------------------------------------------------ empty */

.bk-empty {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--bk-ink-soft);
  font-family: var(--bk-serif);
  text-align: center;
  padding: 24px;
}

.bk-empty-title { font-size: 22px; color: var(--bk-ink); margin: 0; }
.bk-empty p { margin: 0; }

/* ------------------------------------------------------------ loupe */

.bk-zoom {
  position: absolute;
  inset: 0;
  z-index: 6;
  pointer-events: none;
  overflow: hidden;
  transition: opacity 0.18s ease;
}

.bk-zoom-inner {
  position: absolute;
  transform-origin: 0 0;
  width: 100%;
  height: 100%;
}

.bk-loupe {
  position: absolute;
  z-index: 7;
  width: var(--r, 160px);
  height: var(--r, 160px);
  border-radius: 50%;
  cursor: grab;
  touch-action: none;
  background: radial-gradient(
    circle at 34% 28%,
    rgba(255, 255, 255, 0.32),
    rgba(255, 255, 255, 0.05) 42%,
    rgba(255, 255, 255, 0) 60%
  );
  box-shadow:
    0 0 0 5px rgba(154, 106, 62, 0.85),
    0 0 0 7px rgba(120, 80, 44, 0.9),
    0 12px 26px -8px rgba(0, 0, 0, 0.55),
    inset 0 0 24px rgba(255, 255, 255, 0.22);
}

.bk-loupe:active { cursor: grabbing; }

/* ----------------------------------------------------------- dialog */

.bk-dialog {
  position: absolute;
  inset: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(15, 18, 24, 0.42);
  padding: 20px;
}

.bk-dialog-card {
  background: var(--surface);
  color: var(--fg);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 20px;
  width: min(440px, 100%);
  box-shadow: 0 20px 50px -20px rgba(0, 0, 0, 0.6);
}

.bk-dialog-card h2 { margin: 0 0 6px; font-size: 17px; }

.bk-dialog-card p {
  margin: 0 0 14px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--fg-soft);
}

.bk-key-input {
  width: 100%;
  font: inherit;
  font-size: 13px;
  padding: 9px 11px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--surface-2);
  color: var(--fg);
}

.bk-dialog-note {
  margin: 12px 0 0;
  font-size: 13px;
  line-height: 1.45;
  color: var(--fg-soft);
}

.bk-note-warn {
  color: var(--warn);
}

.bk-spend {
  margin: 14px 0 0;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  font-size: 13px;
  color: var(--fg);
}

.bk-spend-note {
  margin: 6px 0 0;
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--fg-faint);
}

.bk-dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 14px;
}

.bk-hint {
  text-align: center;
  font-size: 12px;
  color: var(--fg-faint);
  padding: 0 0 10px;
  flex: 0 0 auto;
}

/* ----------------------------------------------------------- mobile */

@media (max-width: 720px), (pointer: coarse) {
  /* One page at a time. Two on a phone means neither is readable, and
     the sketch is the half worth showing on a small screen. */
  .bk-book { width: 100%; aspect-ratio: 1 / 1.28; }
  .bk-left { width: 100%; }
  .bk-right { display: none; }
  .bk-book[data-face='plate'] .bk-left { display: none; }
  .bk-book[data-face='plate'] .bk-right { display: flex; left: 0; width: 100%; }
  .bk-gutter { display: none; }
  .bk-loupe, .bk-zoom { display: none; }
}