:root {
  --paper: #F3EFE6;      /* the desk */
  --page: #FDFCF7;       /* notebook paper */
  --ink: #1F1D1A;
  --pen: #24408E;        /* what you wrote */
  --mute: #7C776E;
  --line: #D8D1C4;
  --dot: #C7BFB0;
  --empty: #E6E0D5;
  --bad: #B23A1E;
  --font: "Courier Prime", "Courier New", Courier, monospace;
  --hand: "Reenie Beanie", "Segoe Print", "Bradley Hand", cursive; /* what you wrote, in pen */
  --bar-h: 112px;
  --m: 24px;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 16px/1.5 var(--font);
}
body.tracker { padding-bottom: calc(var(--bar-h) + 24px); }
a { color: inherit; }
button { font: inherit; color: inherit; cursor: pointer; }
h1, h2, h3 { font-weight: 700; line-height: 1.15; }
.small { font-size: 13px; color: var(--mute); }
.ico { width: 1.15em; height: 1.15em; vertical-align: -0.2em; flex: none; }

/* ---------- header ---------- */
.top {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  max-width: calc(250mm + 2 * var(--m)); margin: 0 auto; padding: 20px var(--m); /* same edges as the journal */
}
.brand { font-size: 24px; font-weight: 700; text-decoration: none; letter-spacing: -0.02em; }
.brand b { color: var(--pen); }
.top nav { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.top nav a:not(.pill) { text-decoration: none; color: var(--mute); }
.top nav a[aria-current] { color: var(--ink); text-decoration: underline; text-underline-offset: 5px; }
.top nav a:not(.pill):hover { color: var(--ink); }
.top nav .pill { text-decoration: none; }
.acct { display: inline-flex; gap: 12px; align-items: baseline; font-size: 14px; min-width: 0; }
.acct-email { color: var(--ink); max-width: 18ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
a.pill { text-decoration: none; display: inline-block; }

main { max-width: calc(250mm + 2 * var(--m)); margin: 0 auto; padding: 0 var(--m); }

/* ---------- buttons ---------- */
.pill {
  border: 1.5px solid var(--ink); background: none; border-radius: 999px;
  padding: 6px 16px; white-space: nowrap;
}
.pill:hover { background: var(--ink); color: var(--page); }
.pill.solid { background: var(--ink); color: var(--page); }
.pill.solid:hover { background: var(--pen); border-color: var(--pen); }
.pill.small { padding: 2px 12px; font-size: 14px; }
.pill.big { display: inline-flex; align-items: center; justify-content: center; font-size: 24px; padding: 8px 24px; line-height: 1.5; } /* the same size as the pre-order pill */
.pill:disabled { opacity: .5; cursor: default; }
.txt { background: none; border: 0; padding: 0; text-decoration: underline; text-underline-offset: 4px; color: var(--mute); }
.txt:hover { color: var(--ink); }
.arrow {
  width: 32px; height: 32px; border-radius: 50%; border: 1.5px solid var(--ink); background: none;
  display: inline-grid; place-items: center; padding: 0; flex: none;
}
.arrow svg { width: 50%; height: 50%; display: block; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pill.nudge { animation: nudge .5s ease-in-out 2; }
@keyframes nudge { 0%, 100% { transform: none; } 30% { transform: translateY(-3px); } 60% { transform: translateY(1px); } }
.arrow:hover:not(:disabled) { background: var(--ink); color: var(--page); }
.arrow:disabled { opacity: .25; cursor: default; }
.x { position: absolute; top: 6px; right: 8px; border: 0; background: none; font-size: 24px; line-height: 1; color: var(--mute); }
.x:hover { color: var(--ink); }

/* ---------- intro + link box ---------- */
.intro { display: grid; grid-template-columns: 1fr; gap: 14px; margin: 24px 0 40px; }
.intro h1 { font-size: clamp(26px, 3.6vw, 46px); margin: 0; letter-spacing: -0.02em; }
.linkbox p { margin: 0 0 10px; }
.lb-label { font-weight: 700; }
.lb-link { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 10px; }
.lb-link code { font: inherit; color: var(--pen); background: var(--page); border: 1px dashed var(--line); padding: 3px 8px; border-radius: 4px; word-break: break-all; }
.lb-note { font-size: 14px; color: var(--mute); }
.lb-note.small { font-size: 13px; }
.lb-warn { color: var(--bad); font-size: 14px; }
.lb-actions { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; margin: 4px 0 10px; }

/* ---------- week bar ---------- */
.weekbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; max-width: 250mm; margin-inline: auto; }
.weekbar h2 { font-size: 20px; margin: 0; min-width: 15ch; text-align: center; }
.weekbar .grow { flex: 1; }
.save-state { font-size: 13px; color: var(--mute); }
.hint { text-align: center; font-size: 13px; color: var(--mute); margin: 14px auto 0; max-width: 60ch; }
/* notes under the spread: one under each page, lined up with the first and last dot columns (2% = one 5 mm step) */
.hints { display: flex; max-width: 250mm; margin: 14px auto 0; font-size: 12.5px; color: var(--mute); }
.hints p { flex: 1 1 0; margin: 0; }
/* the left note runs a little past the seam so it stays on two lines */
.hints p:first-child { text-align: left; padding: 0 3% 0 2%; } /* stays on the left page, as far from the edge as the right note */
.hints p:last-child { text-align: right; padding: 0 2% 0 6%; }
.pill.solid.flip:hover { background: var(--paper); color: var(--ink); border-color: var(--ink); }
/* under the year sheet: the hint, with "export spreadsheet" to its right */
.sheet-foot { display: flex; justify-content: center; align-items: baseline; gap: 18px; flex-wrap: wrap; margin-top: 14px; }
.sheet-foot .hint { margin: 0; }
.export { font-size: 13px; display: inline-flex; gap: 10px; align-items: baseline; }
.export-opts .txt { color: var(--ink); }
/* desktop: hint flush left, export flush right */
@media (min-width: 761px) {
  .sheet-foot { justify-content: space-between; }
  .sheet-foot .hint { text-align: left; }
}
/* links inside running text (some are buttons that open the log-in box) */
.lb-note a, .inline-link { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.inline-link { background: none; border: 0; padding: 0; font: inherit; cursor: pointer; }
.lb-note a:hover, .inline-link:hover { color: var(--pen); }

/* ---------- the notebook ----------
   a B6+ book (125 x 190 mm), shown at about real size on a desktop monitor (css mm).
   the dot grid is 5 mm: each page is 25 steps across (--p) and 38 tall. dots sit on whole steps
   only, columns 1..24 and rows 3..37 (the top two rows are left off; the week heading sits just
   above the highest row). the edge keeps a clean print margin and never cuts a dot.
   on the left page, text runs from dot column 1 to column 23, two dots in from the seam:
   left column 1..11, right column 13..23. all of it scales with the page (container units). */
.book {
  position: relative;
  display: flex; justify-content: center;
  max-width: 250mm; margin-inline: auto;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,.12)) drop-shadow(0 8px 18px rgba(60,45,20,.12));
}
.page {
  position: relative;
  flex: 1 1 0; min-width: 0;
  aspect-ratio: 125 / 190;
  background: var(--page);
  container-type: inline-size;
  overflow: hidden;
}
.page.left { border-radius: 14px 2px 2px 14px; }
.page.right { border-radius: 2px 14px 14px 2px; }
/* the gutter: a soft fold where the pages meet, deepest right at the seam and easing out like curved paper */
.page.left::after, .page.right::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 15%; pointer-events: none;
}
.page.left::after {
  right: 0;
  background: linear-gradient(to left,
    rgba(60,42,18,.20) 0, rgba(60,42,18,.11) 4%, rgba(60,42,18,.05) 18%, rgba(60,42,18,.018) 45%, transparent 100%);
}
.page.right::after {
  left: 0;
  background: linear-gradient(to right,
    rgba(60,42,18,.16) 0, rgba(60,42,18,.08) 4%, rgba(255,255,255,.25) 12%, rgba(60,42,18,.02) 40%, transparent 100%);
}
.page .grid, .page .in { --p: calc(100cqw / 25); }
/* the outer margin column and the bottom row are left off too: left page dots at columns 2..24,
   right page at 1..23 (mirrored), rows 3..36 on both */
.page .grid {
  position: absolute; left: calc(var(--p) * 1.5); right: calc(var(--p) / 2);
  top: calc(var(--p) * 2.5); height: calc(var(--p) * 34);
  background-image: radial-gradient(circle, var(--dot) 0 0.9px, transparent 1.3px);
  background-size: var(--p) var(--p);
}
.page.right .grid { left: calc(var(--p) / 2); right: calc(var(--p) * 1.5); }
/* on the private page: the row of dots level with each day on the left page, darker */
.page .grid .dark {
  position: absolute; left: 0; right: 0; height: var(--p);
  top: calc((var(--row) - 3) * var(--p));
  background-image: radial-gradient(circle, #8F8676 0 1.15px, transparent 1.6px);
  background-size: var(--p) var(--p);
}
/* every row is exactly one step tall and sits between two rows of dots, so text is centred between them.
   row 2 (the heading) sits just above the highest row of dots */
.page .in {
  position: absolute; inset: 0;
  padding: calc(var(--p) * 2) calc(var(--p) * 2) 0 calc(var(--p) * 2);
  font-size: calc(var(--p) * 0.64);
  line-height: var(--p);
}
.page.right .in { padding: calc(var(--p) * 2) calc(var(--p) * 2) 0 calc(var(--p) * 2); } /* "mood.ink" ends on the last dot column (23) */
/* left page: text from dot column 2 to column 23 — left column 2..11, right column 14..23 */
.row {
  height: var(--p); display: grid; align-items: center; white-space: nowrap;
  grid-template-columns: calc(var(--p) * 9) calc(var(--p) * 9); column-gap: calc(var(--p) * 3);
}
/* two columns on every row; the moods on the date row end where the blanks below end */
.row > label, .row > .col { display: flex; align-items: center; min-width: 0; }
/* labels are right-aligned so their colons line up: " wake time:" over "out of bed:" */
.row label span { flex: none; color: var(--mute); text-align: right; }
.row label:first-child span { width: 11ch; }
.row label:last-child span { width: 11ch; text-align: left; }
/* the time blanks are all the same size (4 steps), right-aligned to their column */
.row label input.ink { flex: none; width: calc(var(--p) * 4); margin-left: .3em; } /* right after the colon */

/* habits: three names you write yourself, and a circle per day */
.hb-head .lbl { color: var(--mute); }
/* the first circle lines up with "screen off"/"sleep time" above (dot column 14) */
.hb-cells { grid-column: 2; justify-self: start; display: grid; grid-template-columns: repeat(7, var(--p)); align-items: center; justify-items: start; }
/* each day letter is as wide as a circle and centred, so it sits right over its circle */
.hb-cells i { font-style: normal; color: var(--mute); width: var(--dot-d); text-align: center; }
/* habit names sit lower than the other handwriting (no lift) */
.hb-row input.hname { width: 100%; margin-left: 0; padding-bottom: 0; }
/* circles: a whole number of pixels across (round()), so they draw as true circles, not ovals */
.hb-cells { --dot-d: calc(var(--p) * .62); }
@supports (width: round(1.5px, 1px)) { .hb-cells { --dot-d: round(nearest, calc(var(--p) * .62), 1px); } }
.hdot {
  -webkit-appearance: none; appearance: none; box-sizing: border-box; flex: none;
  width: var(--dot-d); height: var(--dot-d); padding: 0; margin: 0;
  border: 1px solid #8F8676; border-radius: 50%; background: none; cursor: pointer;
}
.hdot:hover { border-color: var(--ink); }
/* filled in with a pen: a wobbly loop plus a back-and-forth scribble (svg), turned a different way
   per day so no two look alike; it runs a hair past the printed circle */
.hdot, .me-dot { position: relative; }
.hdot.on::after, .me-dot.on::after {
  content: ''; position: absolute; inset: calc(-1px - 6%); /* -1px: past the 1px border */ pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%2324408E' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath stroke-width='1.3' d='M10.6 1.9C15.4 1.6 18.5 5.2 18.3 10.2 18.1 15 14.6 18.4 9.7 18.2 4.8 18 1.6 14.5 1.8 9.8 2 5.3 5.4 2.1 10.9 2.4'/%3E%3Cpath stroke-width='3' opacity='.9' d='M6.6 4.4 13.6 3.8 4.1 8.4 16.3 7 3.6 12.3 16.6 10.9 4.9 15.4 15.5 14.4 7.6 17 12.9 16.6'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}
.hdot.on, .me-dot.on { border-color: transparent; }
/* each dot gets its own angle, squash, nudge and scribble (MI.penStyle sets --rot/--sx/--sy/--dx/--dy and data-s) */
.hdot.on::after, .me-dot.on::after {
  transform: translate(var(--dx, 0), var(--dy, 0)) rotate(var(--rot, 0deg)) scale(var(--sx, 1), var(--sy, 1));
}
/* scribble 2: a spiral worked inward */
.hdot.on[data-s="1"]::after, .me-dot.on[data-s="1"]::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%2324408E' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath stroke-width='1.3' d='M9.4 1.8C14.8 1.5 18.6 4.9 18.2 10.4 17.9 15.3 14.1 18.5 9.4 18.1 4.6 17.7 1.5 14.1 1.9 9.4 2.3 5 5.6 2.2 9.9 1.9'/%3E%3Cpath stroke-width='3.1' opacity='.9' d='M10 3.6C5.6 3.5 3.4 7 3.7 10.4 4.1 14.6 7.7 16.6 11 16.1 14.9 15.5 16.7 12 15.9 8.4 15.1 5.4 12 4.4 9.6 5.9 7.2 7.3 6.9 10.8 8.9 12.4 10.9 13.9 13.4 12 12.6 9.5 12 7.8 10.2 8 10 9.8'/%3E%3C/svg%3E");
}
/* scribble 3: sideways strokes, the outline left a little open */
.hdot.on[data-s="2"]::after, .me-dot.on[data-s="2"]::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%2324408E' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath stroke-width='1.2' d='M4.2 5C6 2.9 8.2 1.9 10.7 1.9 15.3 2 18.4 5.6 18.2 10.4 18 14.9 14.6 18.3 9.8 18.2 5.1 18 1.8 14.6 1.9 10.2'/%3E%3Cpath stroke-width='3.2' opacity='.88' d='M6.2 4.2 13.9 4.5 3.6 8.1 16.7 8.6 3.3 12.2 16.5 12.6 5.4 15.9 14.1 16.3'/%3E%3C/svg%3E");
}
body[data-mode="example"] .hdot { cursor: default; }
.page-head { display: flex; justify-content: space-between; color: var(--mute); margin-bottom: var(--p); }
.page-head .range { font-style: italic; }
.page-head b { color: var(--ink); }
.page-head .pg { font-weight: 700; color: var(--ink); }
.private { color: var(--mute); font-style: italic; }

.entry { position: relative; margin-bottom: var(--p); border-radius: 2px; transition: background-color .4s; }
.entry::before { /* the evening mood, as a tab in the outer margin */
  content: ""; position: absolute; top: 0; height: calc(var(--p) * 3); width: calc(var(--p) * .28);
  background: var(--c, transparent); left: calc(var(--p) * -2); /* at the paper's outer edge */
}
.entry.flash { background-color: rgba(36,64,142,.08); }
.r-date .dow { font-weight: 700; width: 3.4ch; }
.r-date .dt { color: var(--pen); font: 400 1.9em/1 var(--hand); position: relative; top: -.14em; } /* this hand sits low in its box; lift it to the middle */
.is-today .dow { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .2em; }
.mood { display: inline-flex; align-items: center; margin-left: auto; }
/* each "/5" ends where the time blank below it ends: label (11ch) + gap (.3em of the 1.9em handwriting = .57em) + blank (4 steps) */
.r-date .col { padding-right: calc(var(--p) * 9 - 11ch - .57em - var(--p) * 4); }
.mood .ico { margin-right: .25em; position: relative; top: -.12em; }
.mood i { font-style: normal; }

/* blanks: no rules under them; an empty blank is a faint gray field, a filled one is just ink */
input.ink {
  font: 400 1.9em/1 var(--hand); /* handwriting runs smaller than the type, so it's set larger */
  color: var(--pen);
  /* the box is taller than its row so long letters (g, y) can hang down across the dots without being
     cut off; the gray field you see is only the middle band, one row high */
  --fill: transparent;
  background: linear-gradient(var(--fill), var(--fill)) center / 100% calc(var(--p) * .76) no-repeat;
  border: 0;
  border-radius: 0;
  padding: 0 .2em .28em; /* bottom padding lifts this hand up onto the middle of the row */
  margin: calc(var(--p) * -.3) 0 calc(var(--p) * -.3) .2em;
  min-width: 0;
  width: 100%;
  height: calc(var(--p) * 1.6);
  outline: none;
}
input.ink:placeholder-shown { --fill: rgba(31,29,26,.055); }
input.ink.m { width: 3.4ch; text-align: right; margin-right: .1em; margin-left: 0; padding: 0 0 .28em; } /* a "3" lands where the "5" of "3.5" would, right next to the /5 */
input.ink:not([readonly]):hover { --fill: rgba(31,29,26,.09); }
input.ink:not([readonly]):focus { --fill: rgba(36,64,142,.1); }
input.ink[readonly] { cursor: default; }
/* the browser's cursor would be as tall as the row; a short thin one is drawn instead (see app.js) */
input.ink { caret-color: transparent; }
.ink-caret { position: fixed; z-index: 30; width: 1.5px; background: var(--pen); pointer-events: none; }
.ink-caret.blink { animation: ink-blink 1.06s steps(1) infinite; }
@keyframes ink-blink { 50% { opacity: 0; } }
input.ink.bad { --fill: rgba(178,58,30,.12); color: var(--bad); }

/* tiny QR in the bottom-left corner: 3 x 3 steps (15 mm), from dot column 1 to the last dot row (37).
   version 1 (21 x 21 modules) is the simplest QR there is; much smaller and the modules get too fine
   to print on a letterpress or to read off a screen. */
.qr-block {
  position: absolute; left: calc(var(--p) * 2); top: calc(var(--p) * 33);
  height: calc(var(--p) * 3);
  display: flex; gap: calc(var(--p) * .5); align-items: flex-end;
  border: 0; padding: 0; background: none; line-height: var(--p); text-align: left;
}
.qr-block .qr {
  /* 1.5px bigger all round so no dot is half-hidden under its edge */
  width: calc(var(--p) * 3 + 3px); height: calc(var(--p) * 3 + 3px); margin: 0 -1.5px -1.5px -1.5px; flex: none;
  color: var(--ink); background: var(--page);
}
.qr-text { color: var(--mute); white-space: normal; max-width: 9em; }

/* the right page shows the book's QR in its bottom-right corner */
.qr-block.corner { left: auto; right: calc(var(--p) * 2); } /* dot columns 20..23, rows 33..36 */
/* its label: light gray, bottom line level with the QR's bottom edge. the paper behind it is cleared of
   dots only along its own line, with edges on half steps so no dot is cut in half: columns 12.5..19.5,
   rows 35.5..36.5 (the row of dots above it stays) */
.qr-label {
  position: absolute; left: calc(var(--p) * 12.5); width: calc(var(--p) * 7); top: calc(var(--p) * 35.5); height: var(--p);
  box-sizing: border-box; padding: 0 calc(var(--p) * .3) calc(var(--p) * .2) 0; background: var(--page); /* baseline on the QR's bottom edge */
  display: flex; flex-direction: column; justify-content: flex-end; text-align: right;
  color: #ABA59A; font-size: .9em; line-height: var(--p); white-space: nowrap;
}

/* "reset" on the right page, bottom right: sits on the last dot row in place of three dots (columns 21..23;
   edges on half steps so no dot is cut), in line with the dots beside it */
.page-reset {
  position: absolute; left: calc(var(--p) * 20.5); width: calc(var(--p) * 3); top: calc(var(--p) * 35.5); height: var(--p);
  border: 0; padding: 0; background: var(--page); line-height: var(--p); text-align: center;
  font: inherit; color: var(--mute); text-decoration: none; cursor: pointer;
}
.page-reset:hover { color: var(--ink); }

/* the inside cover: one bigger QR (5 steps, 25 mm) for the whole book, and how it works */
.in.cover p { margin: 0 0 var(--p); white-space: normal; line-height: var(--p); max-width: calc(var(--p) * 21); }
.in.cover .ico { width: 1.25em; height: 1.25em; vertical-align: -0.25em; margin-right: .3em; }
.in.cover .lbl { color: var(--mute); }
.in.cover .line { flex: 1; height: calc(var(--p) * .76); margin-left: .4em; background: rgba(31,29,26,.055); border-radius: .25em; }
.in.cover .row:not(.page-head) { display: flex; }
.qr-block.big { top: calc(var(--p) * 31); height: calc(var(--p) * 5); width: calc(var(--p) * 21); gap: var(--p); align-items: center; }
.qr-block.big .qr { width: calc(var(--p) * 5 + 3px); height: calc(var(--p) * 5 + 3px); }
.qr-block.big .qr-text { max-width: none; font-size: .95em; }
.qr-block:hover .qr-text { color: var(--ink); text-decoration: underline; }

/* page turn: the leaf is a chain of hinged strips (see changeWeek), so the paper bends as it turns */
.book { position: relative; }
.turn-under { position: absolute; z-index: 2; }
.leaf {
  position: absolute; z-index: 3; pointer-events: none;
  transform-style: preserve-3d; perspective: 2400px; perspective-origin: 0 50%;
}
.leaf.bwd { transform: scaleX(-1); }
.leaf .strip { will-change: transform; position: absolute; top: 0; transform-origin: 0 50%; transform-style: preserve-3d; }
/* each strip is 1px wider than its step so no seam shows between neighbours */
.leaf .slice { position: absolute; top: 0; bottom: 0; left: 0; right: -1px; overflow: hidden; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.leaf .slice.back { transform: rotateY(180deg); }
.leaf .slice-page { position: absolute; top: 0; }
.leaf.bwd .slice-page { transform: scaleX(-1); }
.leaf .slice-shade { position: absolute; inset: 0; opacity: 0; background: rgb(45,30,10); }

/* ---------- the sheet ---------- */
/* the title sits above the black line */
.sheet { max-width: 250mm; margin: 44px auto 0; }
.sheet summary {
  list-style: none; cursor: pointer; display: flex; gap: 10px; align-items: center;
  padding: 0 0 10px; font-size: 20px; font-weight: 700; border-bottom: 1.5px solid var(--ink);
}
.sheet[open] summary { margin-bottom: 14px; }
.sheet summary::-webkit-details-marker { display: none; }
.sheet summary:hover span:first-child { text-decoration: underline; text-underline-offset: 5px; }
.sheet .caret { transition: transform .2s; font-size: 16px; }
.sheet[open] .caret { transform: rotate(180deg); }
.sheet-bar { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; margin-bottom: 14px; font-size: 14px; }
.yr-step { display: inline-flex; align-items: center; gap: 8px; }
.yr-step .arrow { width: 26px; height: 26px; }
.seg { display: inline-flex; border: 1.5px solid var(--ink); border-radius: 999px; overflow: hidden; }
.seg button { border: 0; background: none; padding: 4px 14px; display: inline-flex; gap: 6px; align-items: center; }
.seg button + button { border-left: 1.5px solid var(--ink); }
.seg button[aria-checked="true"] { background: var(--ink); color: var(--page); }
.legend { display: flex; margin-left: auto; }
.legend span { width: 28px; text-align: center; font-size: 12px; padding: 2px 0; }
.sheet-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
#sheetTable { border-collapse: collapse; table-layout: fixed; width: 100%; min-width: 760px; font-size: 12px; background: var(--page); }
#sheetTable th, #sheetTable td { border: 1px solid #E3DDD1; height: 22px; text-align: center; padding: 0 2px; }
#sheetTable thead th { font-weight: 700; height: 28px; background: var(--paper); }
#sheetTable thead th.yr { font-style: italic; width: 44px; }
#sheetTable tbody th { width: 36px; font-weight: 700; background: var(--paper); }
#sheetTable td[data-d] { cursor: pointer; }
#sheetTable td[data-d]:hover { outline: 2px solid var(--ink); outline-offset: -2px; }
#sheetTable td.void { background: repeating-linear-gradient(45deg, transparent 0 4px, #EDE8DE 4px 5px); }
#sheetTable td.today { box-shadow: inset 0 0 0 2px var(--pen); }
#sheetTable td.both { position: relative; font-size: 10px; }
#sheetTable td.both .a { position: absolute; left: 4px; top: 1px; }
#sheetTable td.both .b { position: absolute; right: 4px; bottom: 1px; }
/* a day you can type into: looks like the plain cell until you click it */
#sheetTable .cell-in { width: 100%; height: 100%; border: 0; padding: 0; background: none; font: inherit; color: inherit; text-align: center; outline: none; cursor: pointer; }
#sheetTable .cell-in:focus { cursor: text; box-shadow: inset 0 0 0 2px var(--pen); }
#sheetTable .cell-in.bad { box-shadow: inset 0 0 0 2px var(--bad); }
#sheetTable td:has(.cell-in) { padding: 0; }
.m-short, .on-phone { display: none; }
/* selected text is highlighted in the 3.5 green instead of the browser's blue */
::selection { background: rgb(200, 219, 130); color: var(--ink); }

/* ---------- the year bar (sticky footer) ---------- */
.yearbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
  height: var(--bar-h);
  background: var(--paper);
  border-top: 1.5px solid var(--ink);
  padding: 10px var(--m) 12px;
  display: grid; grid-template-columns: 210px 1fr; gap: 20px; align-items: end;
}
.yb-head { display: flex; flex-direction: column; align-items: center; gap: 6px; align-self: center; }
.yb-head .pill.small { font-size: 12px; padding: 4px 12px; }
.yb-actions { display: flex; gap: 6px; align-items: center; }
.share-img { display: block; height: min(56vh, 560px); aspect-ratio: 9 / 16; margin: 0 auto 12px; border: 1px solid var(--line); }
.share-actions { justify-content: center; }
.yb-year { font-weight: 700; font-size: 22px; line-height: 1; min-width: 2.6em; text-align: center; white-space: nowrap; }
.yb-year small { font-size: 13px; font-weight: 400; color: var(--mute); }
.yb-strip { position: relative; cursor: crosshair; min-width: 0; }
.yb-months { display: grid; font-size: 11px; line-height: 1; margin-bottom: 3px; }
.yb-months span { border: 1px solid var(--ink); border-right: 0; text-align: center; padding: 3px 0 2px; overflow: hidden; }
.yb-months span:last-child { border-right: 1px solid var(--ink); }
.yb-months .l1 { display: none; }
.yb-bars { display: block; width: 100%; height: 64px; background: var(--empty); }
.yb-bars .today { fill: var(--ink); }
.yb-tip {
  position: absolute; bottom: 72px; white-space: nowrap; pointer-events: none;
  background: var(--ink); color: var(--page); font-size: 12px; padding: 3px 8px; border-radius: 3px;
}
.yb-tip span { margin-left: 6px; }

/* ---------- popover, dialog, toast ---------- */
.pop {
  position: fixed; z-index: 40; width: 270px;
  background: var(--page); border: 1.5px solid var(--ink); border-radius: 6px;
  padding: 14px 16px 12px; font-size: 14px;
  box-shadow: 0 10px 30px rgba(40,30,10,.18);
}
.pop h3 { margin: 0 24px 10px 0; font-size: 16px; }
.chips { display: flex; gap: 8px; margin-bottom: 10px; }
.chip { display: inline-flex; gap: 6px; align-items: center; padding: 3px 10px; border-radius: 999px; border: 1px solid var(--line); }
.pop dl { display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; margin: 0 0 8px; }
.pop dt { color: var(--mute); }
.pop dd { margin: 0; color: var(--pen); font: 400 24px/1 var(--hand); }
.pop .small { margin: 0 0 8px; }
.pop .go { font-size: 13px; display: block; text-align: left; }

.dlg { border: 1.5px solid var(--ink); border-radius: 8px; background: var(--page); color: var(--ink); max-width: 420px; padding: 22px 24px; font: 15px/1.5 var(--font); }
.dlg::backdrop { background: rgba(40,30,10,.35); }
.dlg h3 { margin: 0 24px 14px 0; font-size: 20px; }
.dlg-qr { width: 200px; margin: 0 auto 14px; }
.dlg-qr .qr { display: block; width: 100%; height: auto; background: #fff; border-radius: 12px; }
.dlg .status { font-size: 14px; margin: 12px 0 0; }
.dlg .status.err { color: var(--bad); }
form.login { display: flex; gap: 10px; flex-wrap: wrap; }
form.login input {
  flex: 1 1 200px; min-width: 0; font: inherit; padding: 6px 12px; border-radius: 999px;
  border: 1.5px solid var(--ink); background: #fff; color: var(--ink);
}
form.login input:focus { outline: 2px solid var(--pen); outline-offset: 1px; }

.toast {
  position: fixed; left: 50%; bottom: calc(var(--bar-h) + 16px); transform: translateX(-50%); z-index: 50;
  background: var(--ink); color: var(--page); padding: 8px 16px; border-radius: 6px; font-size: 14px;
  max-width: calc(100vw - 32px);
}

@media (max-width: 1000px) {
  .intro { grid-template-columns: 1fr; gap: 18px; }
}

/* ---------- phones ---------- */
@media (max-width: 760px) {
  :root { --m: 16px; --bar-h: 120px; }
  .top { padding: 16px var(--m); }
  .intro { grid-template-columns: 1fr; gap: 18px; margin: 8px 0 28px; }
  .weekbar h2 { font-size: 15px; min-width: 0; flex: 0 1 auto; white-space: nowrap; }
  .weekbar { gap: 8px; }
  .weekbar .grow { display: none; }
  /* side by side on their own row under the week (each at least 40% wide, so neither fits on the week's row) */
  .weekbar #tutorialPill, .weekbar #weekPill { order: 9; flex: 1 1 40%; text-align: center; }
  .book { flex-direction: column; align-items: center; gap: 14px; }
  .page { flex: none; width: 100%; }
  .page.right { display: none; } /* phones show only the page you log on */
  .hints { flex-direction: column; gap: 6px; }
  .hints p:first-child, .hints p:last-child { text-align: left; padding: 0 4%; }
  .page.left, .page.right { border-radius: 14px; }
  .page.left::after, .page.right::after { display: none; }
  .legend { margin-left: 0; }
  .yearbar { grid-template-columns: 1fr; gap: 6px; padding-top: 8px; }
  .yb-head { flex-direction: row; justify-content: space-between; }
  .top { flex-wrap: wrap; row-gap: 10px; }
  .top nav { gap: 14px; font-size: 15px; justify-content: flex-start; }
  .top nav .buy { order: -1; width: 100%; text-align: center; }
  .yb-months .l3 { display: none; }
  .m-full, .on-desktop { display: none; }
  .m-short, .on-phone { display: inline; }
  /* nav: no "journal" (the logo goes there) */
  .top nav a[href="./"] { display: none; }
  /* tutorial and reset/save share a row under the week, both outlined like reset */
  .weekbar #tutorialPill { background: none; color: var(--ink); }
  .yb-months .l1 { display: inline; }
  .yb-bars { height: 52px; }
}

/* ---------- reading pages (paper, scan) ---------- */
.prose { max-width: 680px; margin: 0 auto; padding: 0 var(--m) 80px; }
.prose h1 { font-size: clamp(34px, 6vw, 56px); margin: 24px 0 16px; letter-spacing: -0.02em; }
.prose .lead { font-size: 20px; margin: 0 0 40px; }
.prose h2 { font-size: 22px; margin: 48px 0 12px; }
.prose p { margin: 0 0 16px; }
.prose blockquote { margin: 32px 0; padding-left: 18px; border-left: 3px solid var(--pen); font-style: italic; }
.steps { list-style: none; padding: 0; margin: 28px 0; display: grid; gap: 14px; }
.step { display: grid; grid-template-columns: 116px 1fr; gap: 18px; align-items: start; background: var(--page); border: 1px solid var(--line); border-radius: 8px; padding: 14px 16px; }
.step .when { font-weight: 700; color: var(--pen); }
.step h3 { font-size: 16px; margin: 0 0 6px; }
.step p { margin: 0 0 10px; font-size: 14px; }
/* a single day, drawn like the journal page: 23 grid steps across, rows sitting between rows of dots */
.mini-entry { container-type: inline-size; position: relative; background: var(--page); border: 1px solid var(--line); border-radius: 4px; padding-bottom: 1px; }
.mini-entry > *, .mini-entry::before { --p: calc(100cqw / 23); --g: calc(var(--p) * .2); }
.mini-entry::before {
  content: ""; position: absolute; left: calc(var(--p) / 2); right: calc(var(--p) / 2); top: calc(var(--p) / 2); bottom: calc(var(--p) / 2);
  background-image: radial-gradient(circle, var(--dot) 0 .8px, transparent 1.2px); background-size: var(--p) var(--p);
}
.me-row {
  position: relative; height: var(--p); margin: 0 var(--p); display: grid; align-items: center; white-space: nowrap;
  grid-template-columns: calc(var(--p) * 9) calc(var(--p) * 9); column-gap: calc(var(--p) * 3);
  font-size: calc(var(--p) * .64); line-height: var(--p);
}
.me-row:first-child { margin-top: var(--p); }
.me-row:last-of-type, .me-note { margin-bottom: var(--p); }
.me-row + .me-note { margin-top: var(--p); } /* one empty row of dots before the writing */
.me-col { display: flex; align-items: center; min-width: 0; }
.me-col > b { width: 4ch; flex: none; } /* the day, then the handwritten date */
.me-row:first-child .me-col { padding-right: calc(var(--p) * 9 - 11ch - var(--g) - var(--p) * 4); } /* "/5" ends where the blank below ends */
.me-mood { margin-left: auto; display: inline-flex; align-items: center; }
.me-mood .ico { margin-right: .25em; position: relative; top: -.12em; }
.me-m { display: inline-block; width: calc(var(--p) * 1.2); text-align: right; margin-right: .1em; }
/* weekly habits in an example: circles start at the right column, like the journal */
.me-cells { --dot-d: calc(var(--p) * .62); display: grid; grid-template-columns: repeat(7, var(--p)); align-items: center; justify-items: start; }
@supports (width: round(1.5px, 1px)) { .me-cells { --dot-d: round(nearest, calc(var(--p) * .62), 1px); } }
.me-cells i { font-style: normal; color: var(--mute); width: var(--dot-d); text-align: center; }
.me-dot { box-sizing: border-box; width: var(--dot-d); height: var(--dot-d); border: 1px solid #8F8676; border-radius: 50%; }
.me-row .lb { color: var(--mute); }
.me-m.empty { height: calc(var(--p) * .76); background: rgba(31,29,26,.055); } /* a mood not written yet */
.me-time { display: flex; align-items: center; }
.me-time .lb { flex: none; width: 11ch; color: var(--mute); }
.me-col:first-child .me-time .lb { text-align: right; } /* colons line up, like the journal */
.me-time .blank { display: inline-flex; align-items: center; width: calc(var(--p) * 4); height: calc(var(--p) * .76); margin-left: var(--g); padding-left: .2em; }
.me-time .blank.empty { background: rgba(31,29,26,.055); }
.mini-entry .hw { font: 400 1.9em/1 var(--hand); color: var(--pen); position: relative; top: -.14em; }
.me-note { position: relative; margin: 0 var(--p); font-size: calc(var(--p) * .64); line-height: var(--p); white-space: normal; }
.h1-cta { margin: -4px 0 20px; }
.cta { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; margin-top: 40px; }
.cta .pill[aria-disabled] { opacity: .45; cursor: default; }
.collab { margin-top: 64px !important; padding-top: 20px; border-top: 1.5px solid var(--ink); font-size: 14px; color: var(--mute); }
.collab b { color: var(--ink); }
.collab a, .plain-link { text-decoration: none; }
.cta-steps { margin-top: 20px; }

/* pen to paper, at the bottom of the journal page (main already has the side padding) */
.tutorial.prose { max-width: 680px; padding: 0 0 40px; margin-top: 72px; scroll-margin-top: 16px; }
.tutorial .tut-title { font-size: clamp(34px, 6vw, 56px); margin: 0 0 16px; letter-spacing: -0.02em; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
.buy-cta { gap: 24px; }
.buy-cta .price { font-size: 18px; }
.buy-cta .pill { font-size: 24px; padding: 8px 24px; line-height: 1.5; } /* 1.5x the usual pill */

/* the little book in the tutorial: two pages on the same 5 mm grid as the journal (25 steps across, 38 down),
   a leaf that turns between steps, and red arrows from a note on the right page to what's new */
.booklet-wrap { margin: 36px 0 8px; }
.booklet { --call: #C4473A; position: relative; display: flex; max-width: 620px; margin: 0 auto; perspective: 2400px; cursor: pointer; }
.bk-page {
  position: relative; flex: 1 1 0; min-width: 0; aspect-ratio: 125 / 190;
  background: var(--page); container-type: inline-size; overflow: hidden;
  box-shadow: 0 1px 1px rgba(0,0,0,.1), 0 8px 18px rgba(60,45,20,.1);
}
.bk-page.l { border-radius: 10px 2px 2px 10px; }
.bk-page.r { border-radius: 2px 10px 10px 2px; }
.bk-page.l::after, .bk-page.r::after { content: ""; position: absolute; top: 0; bottom: 0; width: 8%; pointer-events: none; }
.bk-page.l::after { right: 0; background: linear-gradient(to left, rgba(60,45,20,.1), transparent); }
.bk-page.r::after { left: 0; background: linear-gradient(to right, rgba(60,45,20,.1), transparent); }
.bk-in { position: absolute; inset: 0; --p: calc(100cqw / 25); font-size: calc(var(--p) * .62); line-height: var(--p); white-space: nowrap; }
.bk-in::before {
  content: ""; position: absolute; left: calc(var(--p) * .5); right: calc(var(--p) * .5); top: calc(var(--p) * 2.5); bottom: calc(var(--p) * .5);
  background: radial-gradient(circle, var(--dot) 0 .6px, transparent 1px) 0 0 / var(--p) var(--p);
}
.bk-row { position: absolute; left: calc(var(--p) * 2); width: calc(var(--p) * 21); top: calc(var(--r) * var(--p)); height: var(--p); display: flex; align-items: center; }
.bk-page.r .bk-row { left: var(--p); width: calc(var(--p) * 22); }
.bk-row.head { justify-content: space-between; }
.bk-row.head i { font-style: italic; }
.bk-row.mute { color: var(--mute); }
.bk-row .c1, .bk-row .c2 { display: flex; align-items: center; width: calc(var(--p) * 9); flex: none; }
.bk-row .c2 { margin-left: calc(var(--p) * 3); }
.bk-row .dow { width: 3.6ch; flex: none; }
.bk-row .lb { color: var(--mute); }
.bk-mood { margin-left: auto; display: inline-flex; align-items: center; }
.bk-mood .ico { margin-right: .2em; }
.bk-in .hw { font: 400 1.9em/1 var(--hand); color: var(--pen); position: relative; top: -.1em; }
.bk-v { display: inline-flex; align-items: center; margin-left: auto; width: calc(var(--p) * 4); height: calc(var(--p) * .76); padding-left: .2em; }
.bk-mood .bk-v { width: calc(var(--p) * 1.2); justify-content: flex-end; margin: 0 .1em 0 0; padding: 0; }
.bk-v.empty { background: rgba(31,29,26,.06); }
.bk-v.wide { width: calc(var(--p) * 7); margin-left: 0; }
.bk-cells { --dot-d: calc(var(--p) * .62); display: grid; grid-template-columns: repeat(7, var(--p)); align-items: center; justify-items: start; margin-left: calc(var(--p) * 3); }
.bk-cells i { font-style: normal; color: var(--mute); width: var(--dot-d); text-align: center; }
/* the note for each step: beside the book, out in the margins (left or right), centred on dot row --r (38 rows tall) */
.bk-call {
  position: absolute; z-index: 3; top: calc(var(--r) / 38 * 100%); width: 172px;
  display: flex; flex-direction: column; gap: .15em; padding: .5em .7em; background: var(--page);
  border: 1.5px solid var(--call); border-radius: 6px; white-space: normal;
  font: 400 15px/1.25 var(--font); color: var(--ink);
  opacity: 0; transform: translateY(-50%); transition: opacity .25s;
}
.bk-call.in { opacity: 1; }
.bk-call.l { right: calc(100% + 24px); }
.bk-call.r { left: calc(100% + 24px); }
.bk-call b { color: var(--call); }
/* not enough room beside the book: the note sits on the right page instead (row --rn) */
@media (max-width: 1059px) {
  .bk-call, .bk-call.l, .bk-call.r {
    top: calc(var(--rn) / 38 * 100%); left: calc(50% + 50% * 4 / 25); right: calc(50% * 2 / 25); width: auto;
    font-size: clamp(10px, 2.3vw, 15px);
  }
}
/* the arrows draw in like a pen stroke: the curve, then its head */
.bk-arrows { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 3; }
.bk-arrows path { fill: none; stroke: var(--call); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.bk-arrows path.hd { stroke-width: 1.4; }
.bk-arrows.draw path { animation: bkDraw .7s cubic-bezier(.3, .1, .5, 1) forwards; }
.bk-arrows.draw path.hd { animation-duration: .2s; animation-delay: .65s; }
@keyframes bkDraw { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) { .bk-arrows path { stroke-dashoffset: 0; } .bk-arrows.draw path { animation: none; } }
/* the turning leaf: the old right page on the front, the new left page on the back */
.bk-leaf { position: absolute; top: 0; bottom: 0; left: 50%; width: 50%; z-index: 2; transform-origin: 0 50%; transform-style: preserve-3d; transition: transform 1.1s cubic-bezier(.45, .05, .3, 1); }
.bk-leaf.turn { transform: rotateY(-180deg); }
.bk-face { position: absolute; inset: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.bk-face.back { transform: rotateY(180deg); }
.bk-steps { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 16px; margin-top: 14px; }
.bk-steps button { background: none; border: 0; padding: 2px 0; font-size: 13px; color: var(--mute); }
.bk-steps button:hover { color: var(--ink); }
.bk-steps button[aria-current="step"] { color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }
.phone-br { display: none; }
@media (max-width: 760px) { .phone-br { display: inline; } }
@media (max-width: 560px) {
  .step { grid-template-columns: 1fr; gap: 6px; }
}

/* scan page */
.scan { max-width: 560px; margin: 0 auto; padding: 0 var(--m) 64px; }
.scan h1 { font-size: 30px; margin: 12px 0 8px; }
.scan .lead { color: var(--mute); margin: 0 0 24px; }
/* the book's QR on the left (24% of the row: about as tall as the five lines of intro text beside it) */
.scan-intro { display: flex; gap: 20px; align-items: flex-start; margin-bottom: 24px; }
.scan-intro .lead { margin: 0; flex: 1; }
.scan-qr { flex: 0 0 24%; }
.scan-qr .qr { display: block; width: 100%; height: auto; color: var(--ink); }
.card { background: var(--page); border: 1px solid var(--line); border-radius: 10px; padding: 16px; margin-bottom: 16px; }
.card h2 { font-size: 16px; margin: 0 0 10px; }
.shots { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.shots.one { grid-template-columns: minmax(0, 260px); justify-content: center; }
.shot { position: relative; border: 1.5px dashed var(--mute); border-radius: 8px; aspect-ratio: 105/148; display: grid; place-items: center; text-align: center; padding: 10px; font-size: 14px; color: var(--mute); cursor: pointer; overflow: hidden; background: var(--paper); }
.shot input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.shot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.shot.has { border-style: solid; border-color: var(--ink); }
.shot .lbl { position: relative; z-index: 1; }
.shot.has .lbl { background: var(--ink); color: var(--page); padding: 2px 8px; border-radius: 4px; align-self: end; }
.row-inline { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.row-inline input[type="date"] { font: inherit; padding: 4px 8px; border: 1px solid var(--line); border-radius: 4px; background: #fff; }
.status { font-size: 14px; color: var(--mute); margin: 10px 0 0; min-height: 1.5em; }
.status.err { color: var(--bad); }
.review { width: 100%; border-collapse: collapse; font-size: 14px; }
.review th { text-align: left; font-size: 12px; color: var(--mute); font-weight: 400; padding: 0 2px 6px; }
.review td { padding: 3px 2px; border-top: 1px solid #EEE8DC; }
.review td:first-child { white-space: nowrap; font-weight: 700; padding-right: 8px; }
.review input { font: 400 24px var(--hand); color: var(--pen); width: 100%; min-width: 0; border: 0; border-bottom: 1px solid var(--line); background: none; padding: 2px 0; text-align: center; }
.review input.m { width: 2.8em; min-width: 2.8em; }
.review input.read { background: rgba(36,64,142,.08); }
.review input.bad { border-bottom-color: var(--bad); color: var(--bad); }
.scan .review { margin-top: 12px; }
.review th:not(:first-child), .review td:not(:first-child) { text-align: center; }
.scan select { font: inherit; font-size: 14px; padding: 3px 8px; border: 1px solid var(--line); border-radius: 6px; background: #fff; color: var(--ink); }
.add-row { display: flex; gap: 10px; flex-wrap: wrap; margin: 14px 0 10px; }
.pill.add { position: relative; cursor: pointer; overflow: hidden; flex: 1 1 160px; text-align: center; padding: 10px 16px; }
.pill.add input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.page-card .pc-head { position: relative; display: flex; gap: 14px; align-items: flex-start; padding-right: 24px; }
.page-card .pc-head img, .page-card .pc-thumb { width: 64px; aspect-ratio: 125/190; object-fit: cover; border-radius: 4px; background: var(--paper); flex: none; }
.page-card .pc-info { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.page-card .pc-info i { color: var(--mute); }
/* nudge a page to another week if the dates were read wrong */
.week-step { display: inline-flex; gap: 6px; }
.week-step .arrow { width: 26px; height: 26px; }
.page-card .small.err { color: var(--bad); }
.home-tip { text-align: center; }
.home-tip a { text-decoration: none; color: inherit; }
.home-tip a:hover { color: var(--ink); }