/* ── The diary (diary.js) ─────────────────────────────────────────────────
   A paper diary, opened flat on the desk: two facing pages on a wide screen,
   one on a phone, a page to a day. Ruled paper with a margin, the date at
   the head, each subject's lines under its name. Pages turn on the spine.
   Every vertical gap on a page is padding, never margin: the pages are
   packed by measured height, and margins would not be counted. */
:root {
  --diary-desk: #E9E6DD;
  --diary-cover: #2B3A55;
  --diary-paper: #FFFDF8;
  --diary-paper-2: #F6F2E8;
  --diary-rule: rgba(37, 99, 235, 0.10);
  --diary-margin: rgba(220, 38, 38, 0.22);
  --diary-ink: #1C2230;
  --diary-ink-soft: #6B7280;
  --diary-spine: rgba(20, 33, 61, 0.16);
  --diary-line-h: 1.75rem;
  /* A subject's colour, deepened enough to read as ink on paper. */
  --diary-mix: #000;
  --diary-mix-amt: 22%;
}
:root[data-theme="dark"] {
  --diary-desk: #0B0D11;
  --diary-cover: #11161F;
  --diary-paper: #252A33;
  --diary-paper-2: #1F242C;
  --diary-rule: rgba(255, 255, 255, 0.075);
  --diary-margin: rgba(248, 113, 113, 0.28);
  --diary-ink: #F3F4F7;
  --diary-ink-soft: #B3BAC6;
  --diary-spine: rgba(0, 0, 0, 0.55);
  /* ...and lightened on dark paper, so a navy subject is still legible. */
  --diary-mix: #fff;
  --diary-mix-amt: 45%;
}
.diary [style*="--c"] { --ink-c: color-mix(in srgb, var(--c), var(--diary-mix) var(--diary-mix-amt)); }

.diary-overlay { padding: 1.5rem; }
.diary {
  width: min(70rem, 100%); height: min(47rem, calc(100vh - 3rem)); height: min(47rem, calc(100dvh - 3rem));
  display: flex; flex-direction: column; min-height: 0;
  background: var(--surface); border: 1px solid var(--border); border-radius: 1.5rem;
  box-shadow: 0 1.5rem 4rem rgba(15, 23, 42, 0.25); overflow: hidden; outline: none;
  animation: modal-in 0.36s var(--ease-spring);
}

/* The bar: name, the month (a date to jump to), today and the arrows. */
.diary-bar { display: flex; align-items: center; gap: 0.75rem; padding: 0.875rem 1rem 0.875rem 1.375rem; border-bottom: 1px solid var(--border); }
.diary-name { display: flex; align-items: center; gap: 0.5rem; margin: 0; font-size: 1rem; font-weight: 700; letter-spacing: -0.01em; color: var(--text); }
.diary-name svg { color: var(--accent); }
.diary-jump { position: relative; display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.375rem 0.625rem; border-radius: 0.625rem; cursor: pointer;
  font-size: 0.875rem; font-weight: 600; color: var(--text-muted); text-transform: capitalize; transition: background .15s, color .15s; }
.diary-jump:hover { background: var(--surface2); color: var(--text); }
.diary-jump-input { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; border: 0; padding: 0; cursor: pointer; }
.diary-nav { display: flex; align-items: center; gap: 0.25rem; margin-left: auto; }
.diary-today { height: 2rem; padding: 0 0.875rem; border-radius: 62.4375rem; border: 1px solid var(--border); background: var(--surface); color: var(--text);
  font: inherit; font-size: 0.8125rem; font-weight: 600; cursor: pointer; transition: background .15s; }
.diary-today:hover { background: var(--surface2); }
.diary-arrow { display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; border: 0; background: none; color: var(--text); cursor: pointer; transition: background .15s, opacity .15s; }
.diary-arrow:hover:not(:disabled) { background: var(--surface2); }
.diary-arrow:disabled { opacity: 0.3; cursor: default; }
.diary-close { flex-shrink: 0; }

/* The book on the desk: a cover a little larger than the pages, the edges
   of the pages under them showing, a shadow along the spine. */
.diary-book { position: relative; flex: 1; min-height: 0; padding: 1.5rem; background: var(--diary-desk); }
.diary-pages { position: relative; height: 100%; display: grid; grid-template-columns: 1fr; border-radius: 0.375rem 0.75rem 0.75rem 0.375rem;
  perspective: 2600px; background: var(--diary-cover);
  box-shadow: 0 0 0 0.375rem var(--diary-cover), 0 0.875rem 2rem rgba(15, 23, 42, 0.3); }
.diary-overlay.is-spread .diary-pages { grid-template-columns: 1fr 1fr; border-radius: 0.75rem; }

.diary-page { position: relative; min-width: 0; height: 100%; box-sizing: border-box; overflow: hidden;
  padding: 1rem 1.75rem 2.25rem 3.25rem; color: var(--diary-ink); border-radius: 0.25rem 0.625rem 0.625rem 0.25rem;
  background-color: var(--diary-paper);
  background-image:
    linear-gradient(to right, transparent 2.375rem, var(--diary-margin) 2.375rem, var(--diary-margin) calc(2.375rem + 1px), transparent calc(2.375rem + 1px)),
    repeating-linear-gradient(to bottom, transparent 0, transparent calc(var(--diary-line-h) - 1px), var(--diary-rule) calc(var(--diary-line-h) - 1px), var(--diary-rule) var(--diary-line-h)),
    linear-gradient(to bottom, var(--diary-paper), var(--diary-paper-2));
  background-position: 0 0, 0 1rem, 0 0;
  /* The stack of pages under this one, at its outer edge. */
  box-shadow: 0.125rem 0 0 -0.0625rem var(--diary-paper-2), 0.25rem 0 0 -0.0625rem var(--diary-paper), 0.375rem 0 0 -0.0625rem var(--diary-paper-2); }
.diary-overlay.is-spread .diary-page.is-left { border-radius: 0.625rem 0.25rem 0.25rem 0.625rem;
  box-shadow: inset -1.5rem 0 1.75rem -1.5rem var(--diary-spine), -0.125rem 0 0 -0.0625rem var(--diary-paper-2), -0.25rem 0 0 -0.0625rem var(--diary-paper), -0.375rem 0 0 -0.0625rem var(--diary-paper-2); }
.diary-overlay.is-spread .diary-page.is-right { box-shadow: inset 1.5rem 0 1.75rem -1.5rem var(--diary-spine), 0.125rem 0 0 -0.0625rem var(--diary-paper-2), 0.25rem 0 0 -0.0625rem var(--diary-paper), 0.375rem 0 0 -0.0625rem var(--diary-paper-2); }
.diary-page.is-blank { background-image: linear-gradient(to bottom, var(--diary-paper), var(--diary-paper-2)); }
.diary-page.is-loading { display: grid; place-items: center; background-image: none; }
.diary-page:has(.is-editing) { overflow-y: auto; }

/* The page number, in the bottom margin, so it takes no room the lines are counted in. */

/* The hidden page the blocks are measured on: the same width, any height. */
.diary-probe { position: absolute; left: 0; top: 0; height: auto; visibility: hidden; pointer-events: none; overflow: visible; background: none; box-shadow: none; }

/* A day is a page: its date heads it, three ruled lines tall -- the
   number large, the weekday beside it, the month under -- and a + to write
   on it. Every line of text below sits on the ruling. */
.diary-day { display: flex; align-items: flex-end; gap: 0.75rem; height: calc(var(--diary-line-h) * 3); padding-bottom: 0.5rem; box-sizing: border-box; }
.diary-day-n { min-width: 2.75rem; font-size: 2.75rem; font-weight: 800; line-height: 0.9; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; color: var(--diary-ink); }
.diary-day-name { display: flex; flex-direction: column; gap: 0.125rem; min-width: 0; padding-bottom: 0.125rem; }
.diary-day-name b { font-size: 1.0625rem; font-weight: 700; line-height: 1.2; text-transform: capitalize; color: var(--diary-ink); }
.diary-day-name small { font-size: 0.8125rem; line-height: 1.2; color: var(--diary-ink-soft); text-transform: capitalize; }
.diary-day.is-cont .diary-day-n, .diary-day.is-cont .diary-day-name b { color: var(--diary-ink-soft); }
.diary-day.is-cont .diary-day-name small { font-style: italic; }
.diary-day.is-sunday .diary-day-n, .diary-day.is-sunday .diary-day-name b { color: var(--red); }
.diary-day.is-today .diary-day-n { color: var(--accent); }
.diary-day-today { margin-bottom: 0.3125rem; font-size: 0.625rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; padding: 0.1875rem 0.5rem; border-radius: 62.4375rem;
  color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent); }
.diary-day-add { display: grid; place-items: center; width: 2rem; height: 2rem; margin-left: auto; align-self: center; flex-shrink: 0; border-radius: 50%; border: 0;
  background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent); cursor: pointer; transition: background .15s, transform .15s; }
.diary-day-add:hover { background: color-mix(in srgb, var(--accent) 20%, transparent); }
.diary-day-add:active { transform: scale(0.92); }

/* A subject's name, once, over its lines: one ruled line, in its ink. */
.diary-subj-head { display: flex; align-items: flex-end; height: var(--diary-line-h); padding-bottom: 0.25rem; box-sizing: border-box; }
.diary-subj-head span { font-size: 0.6875rem; font-weight: 800; letter-spacing: 0.07em; text-transform: uppercase; color: var(--ink-c); line-height: 1; }
.diary-subj-head.is-cont span::after { content: ' …'; opacity: 0.6; }

/* A line: the circle in the subject's ink, and the text, two lines at most. */
.diary-line { display: flex; align-items: flex-start; gap: 0.625rem; padding: 0; min-height: var(--diary-line-h); }
.diary-check, .diary-mark { flex-shrink: 0; display: grid; place-items: center; width: 1.125rem; height: 1.125rem; margin-top: calc((var(--diary-line-h) - 1.125rem) / 2); padding: 0; box-sizing: border-box;
  border-radius: 50%; border: 1.75px solid var(--ink-c, var(--c)); background: none; color: transparent; cursor: pointer;
  transition: background .2s, color .2s, transform .2s var(--ease-spring); }
.diary-check:hover { background: color-mix(in srgb, var(--c) 16%, transparent); }
.diary-check:active { transform: scale(0.88); }
.diary-check.is-ghost { cursor: default; opacity: 0.55; }
.diary-mark { cursor: default; border-radius: 0.25rem; transform: rotate(45deg) scale(0.78); background: color-mix(in srgb, var(--c) 25%, transparent); }
.diary-line.is-done .diary-check { background: var(--ink-c, var(--c)); border-color: var(--ink-c, var(--c)); color: var(--diary-paper); }
.diary-line.is-crossing .diary-check { animation: diary-pop .35s var(--ease-spring); }
@keyframes diary-pop { 40% { transform: scale(1.18); } }

.diary-text { flex: 1; min-width: 0; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden;
  font-size: 0.9375rem; line-height: var(--diary-line-h); color: var(--diary-ink); word-break: break-word; }
.diary-kind { line-height: 1; font-size: 0.625rem; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; padding: 0.125rem 0.375rem; margin-right: 0.4375rem;
  border-radius: 0.25rem; color: var(--ink-c); background: color-mix(in srgb, var(--c) 16%, transparent); vertical-align: 0.0625rem; }
.diary-title[role="button"] { cursor: text; border-radius: 0.25rem; transition: background .15s; }
.diary-title[role="button"]:hover { background: color-mix(in srgb, var(--accent) 10%, transparent); }
.diary-title[role="button"]:focus-visible { outline: 2px solid color-mix(in srgb, var(--accent) 45%, transparent); outline-offset: 1px; }
/* Crossed out with a pen stroke, then the ink fades. */
.diary-line .diary-title { text-decoration: line-through; text-decoration-color: transparent; text-decoration-thickness: 1.5px; transition: color .3s, text-decoration-color .3s; }
.diary-line.is-done .diary-title { text-decoration-color: currentColor; color: var(--diary-ink-soft); }
.diary-line.is-done .diary-kind { opacity: 0.55; }
.diary-line[data-id^="new-"] { opacity: 0.6; }

/* Open: written straight on the paper, as a pen would. The text sits on
   its ruled line with no box -- only the line under it inked in the
   subject's colour -- and a save and a way out wait at its end. A new line
   names its subject above it, the way the diary's own headings do, picked
   from there. */
.diary-line.is-editing { flex-direction: column; align-items: stretch; gap: 0; padding: 0; }
.diary-write { display: flex; align-items: flex-start; gap: 0.625rem; min-width: 0; }
.diary-input { flex: 1; min-width: 0; box-sizing: border-box; resize: none; overflow: hidden; margin: 0; padding: 0; min-height: var(--diary-line-h);
  border: 0; border-radius: 0; background: transparent; color: var(--diary-ink);
  font: inherit; font-size: 0.9375rem; line-height: var(--diary-line-h); outline: none; box-shadow: none;
  /* The pen line: the ruling under each line of the text, inked. */
  background-image: repeating-linear-gradient(to bottom, transparent 0, transparent calc(var(--diary-line-h) - 2px), var(--ink-c, var(--accent)) calc(var(--diary-line-h) - 2px), var(--ink-c, var(--accent)) var(--diary-line-h));
  caret-color: var(--ink-c, var(--accent)); }
/* Over the app's own field focus ring: here the inked line is the focus. */
.diary .diary-input:focus, .diary .diary-input:focus-visible { outline: none; box-shadow: none; border: 0; }
.diary-input::placeholder { color: var(--diary-ink-soft); opacity: 0.8; }
.diary-acts { display: inline-flex; align-items: center; gap: 0.25rem; flex-shrink: 0; height: var(--diary-line-h); }
.diary-act { display: inline-grid; place-items: center; width: 1.625rem; height: 1.625rem; padding: 0; border: 0; border-radius: 50%;
  background: none; color: var(--diary-ink-soft); cursor: pointer; transition: background .15s, color .15s, transform .15s; }
.diary-act:hover { background: color-mix(in srgb, var(--diary-ink) 8%, transparent); color: var(--diary-ink); }
.diary-act:active { transform: scale(0.9); }
.diary-act.is-save { background: var(--ink-c, var(--accent)); color: var(--diary-paper); }
.diary-act.is-save:hover { background: var(--ink-c, var(--accent)); color: var(--diary-paper); filter: brightness(1.08); }
.diary-delete span { display: none; }
.diary-delete:hover { color: var(--red); background: color-mix(in srgb, var(--red) 12%, transparent); }
.diary-delete.is-asking { width: auto; padding: 0 0.625rem; gap: 0.25rem; display: inline-flex; border-radius: 62.4375rem; color: #fff; background: var(--red); font: inherit; font-size: 0.75rem; font-weight: 700; }
.diary-delete.is-asking span { display: inline; }

/* The subject of a new line, as a heading: its name in its ink, a small
   chevron, and the list under it. One ruled line tall. */
.diary-subj-pick { position: relative; display: inline-flex; align-items: flex-end; align-self: flex-start; height: var(--diary-line-h); padding-bottom: 0.25rem; box-sizing: border-box; }
.diary-subject { appearance: none; -webkit-appearance: none; height: auto; min-height: 0; margin: 0; padding: 0.125rem 1rem 0.125rem 0; border: 0; border-radius: 0.25rem;
  background: none; background-image: none; box-shadow: none; color: var(--ink-c, var(--diary-ink));
  font: inherit; font-size: 0.6875rem; font-weight: 800; letter-spacing: 0.07em; text-transform: uppercase; line-height: 1; cursor: pointer; max-width: 14rem; }
/* Over the app's one-chevron rule for dropdowns: the chevron here is the
   heading's own, drawn after it in the subject's ink. */
.diary select.diary-subject:not([multiple]):not([size]) { background-image: none; padding-right: 1rem; }
.diary-subject:focus-visible { outline: 2px solid color-mix(in srgb, var(--accent) 45%, transparent); outline-offset: 2px; }
.diary-subj-pick::after { content: ''; position: absolute; right: 0.125rem; bottom: 0.5rem; width: 0.3125rem; height: 0.3125rem; pointer-events: none;
  border-right: 1.5px solid var(--ink-c, currentColor); border-bottom: 1.5px solid var(--ink-c, currentColor); transform: rotate(45deg); }
.diary-line.is-new:not(.is-editing) { flex-direction: row; align-items: center; gap: 0.5rem; }
.diary-none { flex: 1; margin: 0; font-size: 0.8125rem; color: var(--diary-ink-soft); }
.diary-cancel { display: inline-grid; place-items: center; width: 1.625rem; height: 1.625rem; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--diary-ink-soft); cursor: pointer; }

/* The lines swept to write a new one (hold and drag, or right-drag). */
.diary-pick { position: absolute; left: 2.75rem; right: 1.25rem; pointer-events: none; z-index: 2; border-radius: 0.5rem;
  background: color-mix(in srgb, var(--accent) 14%, transparent); border: 1.5px dashed color-mix(in srgb, var(--accent) 70%, transparent);
  transition: top .08s, height .08s, opacity .16s; }
.diary-pick.is-done { opacity: 0; }

/* ── A page turning ──
   The leaf turns on the spine (two pages) or on the left edge (one): its
   front is the page left behind, its back the one arriving. A shade
   darkens it as it rises and lifts as it lands. */
.diary-pages { perspective: 2400px; perspective-origin: 50% 40%; }
.diary-leaf { position: absolute; top: 0; bottom: 0; z-index: 3; pointer-events: none; transform-style: preserve-3d; will-change: transform; contain: layout paint; }
.diary-leaf-face { transform: translateZ(0); }
.diary-leaf.is-right { left: 50%; width: 50%; transform-origin: left center; animation: diary-turn-next .8s cubic-bezier(.45, .05, .25, 1) both; }
.diary-leaf.is-left { left: 0; width: 50%; transform-origin: right center; animation: diary-turn-prev .8s cubic-bezier(.45, .05, .25, 1) both; }
.diary-leaf.is-away { left: 0; width: 100%; transform-origin: left center; animation: diary-turn-away .6s cubic-bezier(.4, .1, .3, 1) both; }
.diary-leaf.is-back { left: 0; width: 100%; transform-origin: left center; animation: diary-turn-back .6s cubic-bezier(.2, .6, .3, 1) both; }
.diary-leaf-face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.diary-leaf-face > .diary-page { height: 100%; }
.diary-leaf-face.is-back { transform: rotateY(180deg); }
.diary-leaf-shade { position: absolute; inset: 0; pointer-events: none; border-radius: inherit; opacity: 0; }
.diary-leaf.is-right .is-front .diary-leaf-shade, .diary-leaf.is-away .is-front .diary-leaf-shade { background: linear-gradient(to right, rgba(0,0,0,.28), rgba(0,0,0,.05) 60%, rgba(255,255,255,.08)); animation: diary-shade-in .8s ease-in-out both; }
.diary-leaf.is-right .is-back .diary-leaf-shade { background: linear-gradient(to left, rgba(0,0,0,.28), rgba(0,0,0,.04) 60%); animation: diary-shade-out .8s ease-in-out both; }
.diary-leaf.is-left .is-front .diary-leaf-shade { background: linear-gradient(to left, rgba(0,0,0,.28), rgba(0,0,0,.05) 60%, rgba(255,255,255,.08)); animation: diary-shade-in .8s ease-in-out both; }
.diary-leaf.is-left .is-back .diary-leaf-shade { background: linear-gradient(to right, rgba(0,0,0,.28), rgba(0,0,0,.04) 60%); animation: diary-shade-out .8s ease-in-out both; }
.diary-leaf.is-back .is-front .diary-leaf-shade { background: linear-gradient(to right, rgba(0,0,0,.28), rgba(0,0,0,.04) 60%); animation: diary-shade-out .6s both; }
@keyframes diary-turn-next { from { transform: rotateY(0); } to { transform: rotateY(-180deg); } }
@keyframes diary-turn-prev { from { transform: rotateY(0); } to { transform: rotateY(180deg); } }
@keyframes diary-turn-away { from { transform: rotateY(0); opacity: 1; } 70% { opacity: 1; } to { transform: rotateY(-115deg); opacity: 0; } }
@keyframes diary-turn-back { from { transform: rotateY(-115deg); opacity: 0; } 30% { opacity: 1; } to { transform: rotateY(0); opacity: 1; } }
@keyframes diary-shade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes diary-shade-out { from { opacity: 1; } to { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .diary-leaf, .diary-leaf-shade, .diary-line .diary-check { animation: none !important; }
}

/* A phone: the diary is the screen, one page at a time, turned by a swipe. */
@media (max-width: 640px) {
  .diary-overlay { padding: 0; align-items: stretch; }
  .diary { width: 100%; height: 100%; max-height: none; border-radius: 0; border: 0; }
  .diary-bar { flex-wrap: wrap; gap: 0.5rem; padding: 0.75rem 0.75rem 0.75rem 1rem; padding-top: max(0.75rem, env(safe-area-inset-top)); }
  .diary-bar::after { content: ''; order: 2; flex-basis: 100%; height: 0; }
  .diary-name { order: 0; }
  .diary-close { order: 1; margin-left: auto; }
  .diary-jump { order: 3; margin-left: -0.375rem; }
  .diary-nav { order: 4; }
  .diary-book { padding: 0.875rem 0.875rem 0.875rem 0.625rem; padding-bottom: max(0.875rem, env(safe-area-inset-bottom)); }
  .diary-pages { box-shadow: 0 0 0 0.25rem var(--diary-cover), 0 0.5rem 1.25rem rgba(15, 23, 42, 0.25); }
  .diary-page { padding: 0.75rem 1rem 2rem 2.625rem;
    background-image:
      linear-gradient(to right, transparent 1.875rem, var(--diary-margin) 1.875rem, var(--diary-margin) calc(1.875rem + 1px), transparent calc(1.875rem + 1px)),
      repeating-linear-gradient(to bottom, transparent 0, transparent calc(var(--diary-line-h) - 1px), var(--diary-rule) calc(var(--diary-line-h) - 1px), var(--diary-rule) var(--diary-line-h)),
      linear-gradient(to bottom, var(--diary-paper), var(--diary-paper-2));
    background-position: 0 0, 0 0.75rem, 0 0; }
  .diary-pick { left: 2.25rem; right: 0.75rem; }
  .diary-text, .diary-input { font-size: 1rem; }
}

/* The three sit close, as one small group: the same square each, on one
   line, the icon centred in it -- a hover shows the square. */
.af-peer-head .sidebar-section-actions { gap: 0.125rem; align-items: center; }
.af-peer-head .sidebar-section-actions > button {
  display: grid; place-items: center; flex: none; box-sizing: border-box;
  width: 1.625rem; height: 1.625rem; padding: 0; margin: 0;
  border-radius: 0.5rem; line-height: 0; vertical-align: middle;
  transition: color 0.15s, background 0.15s;
}
.af-peer-head .sidebar-section-actions > button:hover { background: rgba(255, 255, 255, 0.08); }
/* One icon size for the three, so the squares read as the same. */
.af-peer-head .sidebar-section-actions > button > svg { display: block; width: 0.9375rem; height: 0.9375rem; }

/* ── The sidebar button ──
   An open book, drawn on the same square and stroke as the filter and the
   + beside it, with room between the three. */
.sidebar-section-actions .af-diary { display: grid; place-items: center; width: 1.375rem; height: 1.375rem; padding: 0; margin: 0;
  background: none; border: none; cursor: pointer; color: rgba(255, 255, 255, 0.6); transition: color 0.15s; }
.sidebar-section-actions .af-diary:hover { color: #FFFFFF; }