/* Schrift: a squared-paper notebook. One colour of ink, a highlighter for
   what needs attention, pencil for everything secondary. No red anywhere. */

@font-face {
  font-family: "Crimson Pro";
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url("fonts/crimson-pro.woff2") format("woff2");
}
@font-face {
  font-family: "Crimson Pro";
  font-style: italic;
  font-weight: 200 900;
  font-display: swap;
  src: url("fonts/crimson-pro-italic.woff2") format("woff2");
}

:root {
  --cell: 24px;
  --page: 576px;

  --paper: #fafbfd;
  --grid: #e3e8f1;
  --grid-strong: #d3dae8;
  --ink: #1f3fa8;
  --ink-soft: rgba(31, 63, 168, .14);
  --graphite: #2b2f36;
  --pencil: #7f8799;
  --pencil-soft: #bfc6d2;
  --marker: #ffe45c;
  --marker-soft: rgba(255, 228, 92, .6);
  --marker-ink: var(--marker); /* highlighter behind text */
  --note: #fff3a6;
  --note-text: #3a3417;
  --shadow: 0 1px 0 rgba(43, 47, 54, .04), 0 14px 36px rgba(31, 40, 70, .16);

  --serif: "Crimson Pro", Georgia, serif;
  --sans: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, sans-serif;
  --ease: cubic-bezier(.2, .8, .2, 1);
  --loop: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 28' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M27 4.5C17 1.8 5.5 5.6 4.6 13.2c-.8 6.6 7.4 10.6 16.6 10.1 9.6-.6 15.8-5.4 14.6-11.4C34.6 6 26.8 3.2 18.5 3.6'/%3E%3C/svg%3E"); /* a ring drawn round something in ink */
  --rule: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 8' preserveAspectRatio='none'%3E%3Cpath d='M1.5 5C26 3.4 58 6.2 98.5 3.6' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E"); /* a line drawn in pencil */
  --scribble-ink: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%231f3fa8' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.6 6.4L6.4 2.6 2.8 11.4 11.4 2.8 2.6 16.6 16.6 2.6 5.2 17.6 17.4 5.4 10.4 17.6 17.6 10.4 15.4 17.4'/%3E%3C/svg%3E");
  --skip-mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%237f8799' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 14.8C4.2 7.2 13 5.6 15.9 12.2'/%3E%3Cpath d='M12.2 11.6l3.8 1.1 1.2-3.7'/%3E%3C/svg%3E");
  --pause-mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23bfc6d2' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M7.2 5.2v9.6M12.8 5.2v9.6'/%3E%3C/svg%3E");
  --scribble: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.6 6.4L6.4 2.6 2.8 11.4 11.4 2.8 2.6 16.6 16.6 2.6 5.2 17.6 17.4 5.4 10.4 17.6 17.6 10.4 15.4 17.4'/%3E%3C/svg%3E"); /* a box coloured in with a pen */
  --scrap: var(--note); /* a bit of paper stuck in the notebook: yellow, as the notes */
  --tape: rgba(255, 255, 255, .58); /* a strip of tape on it */
  --tape-paper: rgba(236, 225, 183, .8); /* the same on the white paper of a sheet */
  --scrap-shadow: 0 1px 1px rgba(60, 50, 10, .08), 0 12px 20px -12px rgba(60, 50, 10, .42);
  --torn: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 6' preserveAspectRatio='none'%3E%3Cpath d='M0 0h14v1.6L12.6 4.4 10.4 2.2 8.1 5.2 5.9 2.4 3.4 4.9 1.5 2.1 0 3.6z' fill='%23fff3a6'/%3E%3C/svg%3E"); /* its bottom edge, torn off */
  color-scheme: light;
}

/* Night. index.html sets data-theme before the first paint (a saved choice,
   otherwise what Windows uses); theme.js switches it. */
:root[data-theme="dark"] {
  --paper: #151821;
  --grid: #1f2431;
  --grid-strong: #2a3142;
  --ink: #d6e1ff; /* nearly white, with a hint of blue */
  --scribble-ink: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23d6e1ff' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.6 6.4L6.4 2.6 2.8 11.4 11.4 2.8 2.6 16.6 16.6 2.6 5.2 17.6 17.4 5.4 10.4 17.6 17.6 10.4 15.4 17.4'/%3E%3C/svg%3E");
  --skip-mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%238e96a8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 14.8C4.2 7.2 13 5.6 15.9 12.2'/%3E%3Cpath d='M12.2 11.6l3.8 1.1 1.2-3.7'/%3E%3C/svg%3E");
  --pause-mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%234c5468' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M7.2 5.2v9.6M12.8 5.2v9.6'/%3E%3C/svg%3E");
  --ink-soft: rgba(214, 225, 255, .14);
  --graphite: #dfe3ea;
  --pencil: #8e96a8;
  --pencil-soft: #4c5468;
  --marker: #d9b72f;
  --marker-soft: rgba(217, 183, 47, .32);
  --marker-ink: rgba(217, 183, 47, .42);
  --note: #e8d77a;
  --note-text: #2c2810;
  --shadow: 0 1px 0 rgba(0, 0, 0, .3), 0 18px 40px rgba(0, 0, 0, .45);
  --scrap: var(--note);
  --tape: rgba(255, 255, 255, .26);
  --tape-paper: rgba(255, 255, 255, .15);
  --scrap-shadow: 0 1px 1px rgba(0, 0, 0, .3), 0 14px 22px -12px rgba(0, 0, 0, .7);
  --torn: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 6' preserveAspectRatio='none'%3E%3Cpath d='M0 0h14v1.6L12.6 4.4 10.4 2.2 8.1 5.2 5.9 2.4 3.4 4.9 1.5 2.1 0 3.6z' fill='%23e8d77a'/%3E%3C/svg%3E");
  color-scheme: dark;
}

/* switching day and night: the new page spreads out from the switch (theme.js) */
::view-transition-old(root),
::view-transition-new(root) { animation: none; mix-blend-mode: normal; }

* { box-sizing: border-box; }

html { background: var(--paper); }

body {
  margin: 0;
  min-height: 100vh;
  color: var(--graphite);
  font: 15px/24px var(--sans);
  background-color: var(--paper);
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: var(--cell) var(--cell);
  background-position: -1px -1px;
  -webkit-font-smoothing: antialiased;
}
/* keep the page column on the grid lines (a 50% offset of a 24px tile
   lands 12px off, hence the +11px) */
@media (min-width: 624px) {
  body { background-position: calc(50% - var(--page) / 2 + 11px) -1px; }
}

button, input, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 3px; }

.page {
  position: relative;
  max-width: var(--page);
  margin: 0 auto;
  padding: 48px 24px 144px;
  padding-top: calc(48px + env(safe-area-inset-top)); /* on a phone, clear of the notch and the clock */
  padding-left: calc(24px + env(safe-area-inset-left));
  padding-right: calc(24px + env(safe-area-inset-right));
}

/* On a touch screen (the phone): no grey flash on a tap, no zooming in on a double tap
   or on a field (iPhone zooms into text smaller than 16px), and the drag handle drags
   instead of scrolling the page. */
html { -webkit-tap-highlight-color: transparent; -webkit-text-size-adjust: 100%; }
body { touch-action: manipulation; }
.grip { touch-action: none; }
@media (hover: none) and (pointer: coarse) {
  input, textarea, select { font-size: max(16px, 1em); }
}
body:not(.ready) .page { opacity: 0; }

/* ---------------------------------------------------------------- headings */

.kicker { margin: 0; color: var(--pencil); }

.page-title {
  margin: 0 0 24px;
  font: italic 500 48px/48px var(--serif);
  letter-spacing: -.5px;
  color: var(--ink);
}
/* the one big moment: the page heading is written in */
.page-title.writing { animation: write .6s cubic-bezier(.45, .05, .25, 1) both; }
@keyframes write {
  from { clip-path: inset(-12px 100% -16px -8px); }
  to { clip-path: inset(-12px -16px -16px -8px); }
}

/* Section headings are written in ink, like the page title. Names (habits,
   lists) are handwritten too, in graphite; tasks stay in print so a long list
   still reads at a glance. */
h2 {
  margin: 0 0 12px;
  font: italic 500 26px/24px var(--serif);
  letter-spacing: -.2px;
  color: var(--ink);
}
.hand { font: italic 500 20px/24px var(--serif); letter-spacing: 0; }

.block { margin: 0 0 48px; }
.block.quiet { margin-top: -24px; }

.empty, .lead, .plain { margin: 0 0 24px; color: var(--pencil); max-width: 52ch; }
/* an empty page gets a pencil note in the margin */
.empty { font: italic 400 18px/24px var(--serif); }
.empty .pencil { margin-left: 4px; font: 14px/24px var(--sans); }
.empty em { font-style: normal; color: var(--graphite); }

/* ---------------------------------------------------------------- pencil buttons */

/* Words to tap (weghalen, notitie, morgen, Plannen …): written in pencil like the
   Dag / Week / Maand choices; pointing at one turns it to ink and draws a line
   under it by hand. */
.pencil {
  position: relative;
  background: none;
  border: 0;
  padding: 2px 0 4px;
  color: var(--pencil);
  font-size: 14px;
  transition: color .2s;
}
.pencil::after {
  content: "";
  position: absolute;
  left: -2px;
  right: -2px;
  bottom: -1px;
  height: 7px;
  background: var(--pencil-soft);
  -webkit-mask: var(--rule) 0 0 / 100% 100% no-repeat;
  mask: var(--rule) 0 0 / 100% 100% no-repeat;
  clip-path: inset(0 100% 0 0);
  transition: clip-path .32s cubic-bezier(.55, .1, .3, 1);
  pointer-events: none;
}
.pencil:focus-visible { color: var(--ink); }
@media (hover: hover) { .pencil:hover { color: var(--ink); } }
.pencil:focus-visible::after { clip-path: inset(0 0 0 0); }
@media (hover: hover) { .pencil:hover::after { clip-path: inset(0 0 0 0); } }
.pencil:active { transform: translateY(1px); }
.pencil.strong { color: var(--ink); font-size: 15px; }
.pencil.strong::after { background: var(--ink); }

/* ---------------------------------------------------------------- making things, and doing things to them */

/* A card on the paper for making something new. It lifts a little when you point
   at it, its icon is drawn again and the plus turns; the sheet unfolds out of it. */
.make-row { display: flex; flex-wrap: wrap; gap: 12px; margin: 0 0 32px; }
.make {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  padding: 9px 18px 9px 9px;
  border: 1.5px solid var(--grid-strong);
  border-radius: 14px;
  background: var(--paper);
  color: var(--graphite);
  text-align: left;
  box-shadow: 0 1px 0 rgba(43, 47, 54, .04);
  transition: transform .25s var(--ease), border-color .2s, box-shadow .25s var(--ease);
}
@media (hover: hover) { .make:hover { transform: translateY(-2px) rotate(-.4deg); border-color: var(--ink); box-shadow: 0 8px 20px rgba(31, 40, 70, .12); } }
.make:active { transform: translateY(0) scale(.98); transition-duration: .08s; }
.make-tile {
  position: relative;
  display: grid;
  place-items: center;
  flex: none;
  width: 42px;
  height: 42px;
  border-radius: 11px;
  background: var(--ink-soft);
  transition: background-color .2s;
}
@media (hover: hover) { .make:hover .make-tile { background: var(--marker-soft); } }
.make-tile .ico { width: 24px; height: 24px; stroke-width: 1.7; }
@media (hover: hover) { .make:hover .ico path, .make:hover .ico rect { animation: redraw .55s cubic-bezier(.5, .1, .3, 1) both; } }
@media (hover: hover) { .make:hover .ico :nth-child(2) { animation-delay: .1s; } }
@media (hover: hover) { .make:hover .ico :nth-child(3) { animation-delay: .2s; } }
@keyframes redraw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
.make-plus { /* a small plus on the corner of the tile */
  position: absolute;
  right: -5px;
  top: -5px;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: var(--ink);
  box-shadow: 0 0 0 2px var(--paper);
  transition: transform .35s var(--ease);
}
.make-plus::before, .make-plus::after { content: ""; position: absolute; left: 50%; top: 50%; width: 9px; height: 1.8px; margin: -.9px 0 0 -4.5px; border-radius: 1px; background: var(--paper); }
.make-plus::after { transform: rotate(90deg); }
@media (hover: hover) { .make:hover .make-plus { transform: rotate(90deg) scale(1.08); } }
.make-text { display: flex; flex-direction: column; min-width: 0; }
.make-label { font: italic 500 19px/24px var(--serif); color: var(--ink); }
.make-sub { font-size: 12.5px; line-height: 16px; color: var(--pencil); }

/* Pencil icons: every line can be drawn in. */
.ico { display: block; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; overflow: visible; }
.ico path, .ico rect { stroke-dasharray: 1; stroke-dashoffset: 0; }
.ico .dots { stroke-width: 2.6; }

/* A sticker for doing something to a thing: pause it, archive it, put it back. */
.acts { display: inline-flex; flex-wrap: wrap; gap: 8px; }
.act {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px 5px 9px;
  border: 1.3px solid var(--grid-strong);
  border-radius: 999px;
  background: var(--paper);
  color: var(--graphite);
  font-size: 13.5px;
  line-height: 20px;
  white-space: nowrap;
  transition: border-color .2s, color .2s, transform .2s var(--ease), background-color .2s;
}
.act .ico { width: 16px; height: 16px; color: var(--pencil); transition: color .2s; }
@media (hover: hover) { .act:hover { border-color: var(--ink); color: var(--ink); transform: translateY(-1px); } }
@media (hover: hover) { .act:hover .ico { color: var(--ink); } }
@media (hover: hover) { .act:hover .ico path, .act:hover .ico rect { animation: redraw .45s cubic-bezier(.5, .1, .3, 1) both; } }
.act:active { transform: translateY(0) scale(.97); }
.act.quiet { border-color: transparent; color: var(--pencil); }
@media (hover: hover) { .act.quiet:hover { border-color: var(--grid-strong); } }

/* A round button with only an icon; its name shows on a small slip of paper. */
.icon-btn {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1.3px solid transparent;
  border-radius: 50%;
  background: none;
  color: var(--pencil);
  transition: color .2s, border-color .2s, background-color .2s, transform .2s var(--ease);
}
.icon-btn .ico { width: 19px; height: 19px; }
@media (hover: hover) { .icon-btn:hover { color: var(--ink); border-color: var(--grid-strong); background: var(--paper); transform: translateY(-1px); } }
@media (hover: hover) { .icon-btn:hover .ico path, .icon-btn:hover .ico rect { animation: redraw .45s cubic-bezier(.5, .1, .3, 1) both; } }
.icon-btn:active { transform: scale(.94); }
/* A little note saying what something is or does (tips.js): a slip of yellow paper,
   the same as the toast, instead of the browser's own grey box. */
.tip {
  position: fixed;
  z-index: 50;
  max-width: 280px;
  padding: 3px 10px 4px;
  border-radius: 2px;
  background: var(--note);
  color: var(--note-text);
  font: italic 500 15px/20px var(--serif);
  box-shadow: 0 4px 12px rgba(60, 50, 10, .18);
  pointer-events: none;
  opacity: 0;
  transform: translateY(4px) rotate(-1deg);
  transition: opacity .14s, transform .2s var(--ease);
}
.tip.below { transform: translateY(-4px) rotate(-1deg); }
.tip.show { opacity: 1; transform: rotate(-1deg); }

/* the top of a page: title, with buttons on its right */
.head-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.head-row .page-title { min-width: 0; }
.head-acts { display: inline-flex; align-items: center; gap: 4px; margin-top: 6px; flex: none; }
.icon-btn.on { color: var(--ink); background: var(--ink-soft); }

/* Lijsten: searching your tasks and lists, written on a line under the heading */
.search-line {
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 560px;
  margin: -6px 0 28px;
  padding: 0 2px 4px;
  border-bottom: 1.5px solid var(--ink);
  animation: search-in .25s var(--ease);
}
.search-line .ico { flex: none; width: 20px; height: 20px; color: var(--ink); }
.search-input {
  flex: 1;
  min-width: 0;
  padding: 4px 0;
  border: 0;
  background: none;
  outline: none;
  font: italic 500 20px/28px var(--serif);
  color: var(--graphite);
}
.search-input::placeholder { color: var(--pencil-soft); }
.search-input::-webkit-search-cancel-button { display: none; }
.found { max-width: 720px; }
.found h2 + .rows { margin-bottom: 24px; }
@keyframes search-in { from { opacity: 0; transform: translateY(-4px); } }

/* the archive in the corner of Gewoontes: a round button like the others; with habits in it, a small ink tag with how many */
.shelf-count {
  position: absolute;
  top: -5px;
  right: -6px;
  min-width: 18px;
  padding: 0 5px;
  border-radius: 2px;
  background: var(--ink);
  color: var(--paper);
  font: italic 600 12px/18px var(--serif);
  text-align: center;
  box-shadow: 1px 1.5px 0 rgba(31, 40, 70, .2);
  rotate: 6deg;
  animation: pop .4s cubic-bezier(.3, 1.6, .5, 1);
}
@keyframes pop { from { transform: scale(.3); opacity: 0; } }

/* the smart title in a new task's sheet: what's recognised gets the highlighter */
.smart { position: relative; }
.smart .line { position: relative; background: transparent; }
.smart-mirror {
  position: absolute;
  inset: 0;
  padding: 6px 0;
  font-size: 18px;
  line-height: normal;
  color: transparent;
  white-space: pre;
  overflow: hidden;
  pointer-events: none;
  border-bottom: 1.5px solid transparent;
}
.smart-mirror mark { color: transparent; background: var(--marker-soft); border-radius: 2px; box-shadow: 0 0 0 2px var(--marker-soft); }

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-height: 24px;
  margin: 8px 0 16px;
}
.chip {
  font-size: 13px;
  line-height: 20px;
  color: var(--ink);
  border: 1px solid currentColor;
  border-radius: 4px;
  padding: 0 6px;
  animation: chip-in .22s var(--ease);
}
@keyframes chip-in { from { opacity: 0; transform: translateY(4px) scale(.94); } }
.hint-inline { font-size: 13px; color: var(--pencil); animation: fade-in .3s ease; }

/* ---------------------------------------------------------------- notes: sticky notes on the page */

/* Something to tell or to decide sits on a yellow sticky note, stuck on the page
   with a strip of tape and a little askew, written by hand. A sentence with a
   choice in it (.note.says) reads as one sentence, the choice written into it. */
.note {
  position: relative;
  max-width: 56ch;
  margin: 18px 0 44px;
  padding: 20px 24px 18px;
  border-radius: 2px 3px 22px 3px / 2px 3px 10px 3px; /* the corner curls up a little */
  background: var(--note);
  color: var(--note-text);
  font: italic 500 17px/26px var(--serif);
  box-shadow: 0 1px 1px rgba(60, 50, 10, .08), 0 16px 26px -14px rgba(60, 50, 10, .4);
  rotate: -.6deg;
  animation: note-in .5s var(--ease) both;
}
.note + .note { rotate: .5deg; }
@keyframes note-in { from { opacity: 0; translate: 0 -10px; rotate: -3deg; } }
.note::before { /* the tape */
  content: "";
  position: absolute;
  top: -11px;
  left: 50%;
  width: 96px;
  height: 22px;
  margin-left: -48px;
  background: rgba(255, 255, 255, .55);
  border-inline: 1px dashed rgba(0, 0, 0, .07);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .06);
  rotate: -2.5deg;
}
:root[data-theme="dark"] .note::before { background: rgba(255, 255, 255, .22); }
.note p { margin: 0; }
.note-title { margin-bottom: 6px !important; }
.note .marker { padding: 0; background: none; animation: none; font: italic 600 22px/28px var(--serif); color: var(--note-text); }
.note .pencil { color: var(--note-text); opacity: .72; font: italic 500 16px/22px var(--serif); }
.note .pencil:focus-visible { opacity: 1; color: var(--note-text); }
@media (hover: hover) { .note .pencil:hover { opacity: 1; color: var(--note-text); } }
.note .pencil::after { background: var(--note-text); opacity: .5; }
.note .pencil.strong { opacity: 1; font-weight: 600; }
.note .cue, .note .time { color: var(--note-text); opacity: .65; }
.note .row .title { font: italic 500 18px/24px var(--serif); color: var(--note-text); }
.note .rows .row + .row { border-top: 1px dashed rgba(58, 52, 23, .18); }
.note.says p, .note.says .pills { display: inline; }
.note.says .pills { display: inline-flex; margin: 0 2px; vertical-align: baseline; }
.note.says .pill { padding: 0 6px 5px; font: italic 600 17px/24px var(--serif); color: var(--note-text); opacity: .62; }
.note.says .pill.on { opacity: 1; color: var(--note-text); }
@media (hover: hover) { .note.says .pill:hover { opacity: 1; color: var(--note-text); } }
.note.says .pill .ink-line path { stroke: var(--note-text); }
.marker {
  font: italic 500 21px/24px var(--serif);
  padding: 0 3px;
  background-image: linear-gradient(transparent 52%, var(--marker-ink) 52%, var(--marker-ink) 92%, transparent 92%);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  animation: highlight .55s cubic-bezier(.5, .1, .3, 1) .12s both;
}
@keyframes highlight { from { background-size: 0% 100%; } }
.note-actions { display: flex; gap: 20px; margin-top: 8px !important; }
.note .rows { margin: 8px 0 0; }

/* all done for today: a star drawn in pencil next to the heading */
.all-done {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: 12px;
  font: italic 500 16px/1 var(--serif);
  color: var(--pencil);
  vertical-align: middle;
  animation: fade-in .4s ease .5s both;
}
.all-done svg { width: 26px; height: 26px; overflow: visible; fill: none; stroke: var(--ink); stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; rotate: -8deg; }
.all-done path { stroke-dasharray: 1; animation: redraw .9s cubic-bezier(.45, .05, .3, 1) both, star-pop .5s cubic-bezier(.3, 1.6, .5, 1) .85s both; transform-origin: 50% 50%; transform-box: fill-box; }
@keyframes star-pop { 40% { transform: scale(1.18) rotate(6deg); } }

/* ---------------------------------------------------------------- rows */

.rows { list-style: none; margin: 0; padding: 0; }

.row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 48px;
  padding: 4px 0;
}

.text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  background: none;
  border: 0;
  padding: 0;
  text-align: left;
}
button.text { cursor: text; }
/* A task is a slip of paper you can open, written by hand (the paper section near the
   end): pointing at it turns its title to ink and writes a small pencil after it. Its
   box sits a little askew, as drawn by hand. */
.task { isolation: isolate; }
.task .title { font: italic 500 19px/24px var(--serif); }
.task:not(.is-done) .title { color: var(--graphite); }
.task .text { cursor: pointer; transition: transform .25s var(--ease); }
.task .text:active { transform: translateX(2px) scale(.99); }
@media (hover: hover) { .task .text:hover .title { color: var(--ink); } }
@media (hover: hover) { .task.is-done .text:hover .title { color: var(--pencil); } }
.edit-hint {
  flex: none;
  display: inline-grid;
  margin-left: 8px;
  color: var(--ink);
  opacity: 0;
  transform: translateX(-6px) rotate(-12deg);
  transition: opacity .2s, transform .35s var(--ease);
}
.edit-hint .ico { width: 15px; height: 15px; }
.task .text:focus-visible .edit-hint { opacity: .75; transform: none; }
@media (hover: hover) { .task .text:hover .edit-hint { opacity: .75; transform: none; } }
@media (hover: hover) { .task .text:hover .edit-hint .ico path { animation: redraw .45s cubic-bezier(.5, .1, .3, 1) .05s both; } }
body.dragging .edit-hint { display: none; }
.cue { font-size: 13px; line-height: 16px; color: var(--pencil); }

.title {
  position: relative;
  display: inline-block;
  max-width: 100%;
  overflow-wrap: anywhere;
  transition: color .35s ease .12s;
}
.strike {
  position: absolute;
  left: -4px;
  top: calc(50% - 6px);
  width: calc(100% + 8px);
  height: 12px;
  overflow: visible;
  pointer-events: none;
}
.strike path {
  fill: none;
  stroke: var(--ink);
  stroke-width: 2.1;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  opacity: 0; /* hides the round cap dot; switched off only after the line has retracted */
  transition: stroke-dashoffset .42s cubic-bezier(.55, .1, .3, 1) .08s, opacity 0s linear .5s;
}
/* Priority: the highlighter behind the words, a little askew.
   laag a thin stroke under them, middel the lower half, hoog the whole line. */
.hl { position: relative; isolation: isolate; }
.hl::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: -3px;
  right: -3px;
  bottom: 2px;
  height: 0;
  border-radius: 2px 5px 3px 4px;
  background: var(--marker-ink);
  transform: rotate(-.8deg);
  transition: height .35s var(--ease), bottom .35s var(--ease), opacity .35s;
}
.hl-1::before { height: 5px; bottom: 1px; }
.hl-2::before { height: 50%; }
.hl-3::before { height: 84%; bottom: 1px; }
:root[data-theme="dark"] .hl-3::before { box-shadow: 0 0 12px rgba(217, 183, 47, .3); } /* it glows a little at night */
.is-done .hl::before { opacity: .35; }

.is-done .title { color: var(--pencil); }
.is-done .strike path { stroke-dashoffset: 0; opacity: 1; transition: stroke-dashoffset .42s cubic-bezier(.55, .1, .3, 1) .08s, opacity 0s; }
/* a habit done in part: the pen stroke only gets partway */
.is-done.fill-most .strike path { stroke-dashoffset: .3; }
.is-done.fill-half .strike path { stroke-dashoffset: .48; }
.is-done.fill-some .strike path { stroke-dashoffset: .62; }
.is-dropped .strike path { stroke: var(--pencil-soft); }

.aside {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 14px;
  flex: none;
}
.time, .aside-note { font-size: 13px; color: var(--pencil); white-space: nowrap; }
.score {
  font: 400 19px/24px var(--serif);
  color: var(--pencil);
  font-variant-numeric: tabular-nums lining-nums;
  min-width: 2.6em;
  text-align: right;
}
.icon { width: 15px; height: 15px; fill: none; stroke: var(--pencil); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

.reveal { opacity: 0; transform: translateX(6px); transition: opacity .18s, transform .22s var(--ease), color .15s; }
.row:has(:focus-visible) .reveal { opacity: 1; transform: none; }
@media (hover: hover) { .row:hover .reveal { opacity: 1; transform: none; } }
@media (hover: none) { .reveal { opacity: 1; transform: none; } }

.is-skipped .title { color: var(--pencil); }
.is-rest .title { color: var(--pencil); }
.habit .title, .master-row .title, .archived .title { font: italic 500 20px/24px var(--serif); }
.master-row .title, .archived .title { font-size: 18px; }

/* ---------------------------------------------------------------- the box and its ink */

.box {
  position: relative;
  flex: none;
  width: 20px;
  height: 20px;
  padding: 0;
  background: none;
  border: 1.5px solid var(--graphite);
  border-radius: 3px;
  transition: border-color .25s, transform .1s;
}
.box::before { content: ""; position: absolute; inset: -12px; } /* 44px tap target */
@media (hover: hover) { .box:hover { border-color: var(--ink); } }
.box:active { transform: scale(.88); }
.box svg {
  position: absolute;
  left: -1px;
  top: -4px;
  width: 22px;
  height: 22px;
  overflow: visible;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
}
.box .tick path {
  stroke: var(--ink);
  stroke-width: 2.5;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  opacity: 0;
  transition: stroke-dashoffset .3s cubic-bezier(.6, .05, .3, 1), opacity 0s linear .3s;
}
.box .dash { top: 0; left: 0; width: 18px; height: 18px; }
.box .dash path {
  stroke: var(--pencil);
  stroke-width: 2;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  opacity: 0;
  transition: stroke-dashoffset .25s var(--ease), opacity 0s linear .25s;
}
.is-done .box, .is-picked .box { border-color: var(--ink); }
.is-done .box .tick path, .is-picked .box .tick path { stroke-dashoffset: 0; opacity: 1; transition-delay: 0s; }
/* tapping a ticked habit again breaks the tick up: iets minder, then een beetje */
.habit .box .tick path { stroke-dasharray: 1 0 0 1; transition: stroke-dashoffset .3s cubic-bezier(.6, .05, .3, 1), stroke-dasharray .35s var(--ease), opacity 0s linear .3s; }
/* a habit done in part: its tick partly rubbed out again, as much as wasn't done (two
   thirds of it for iets minder, half for de helft, a third for een beetje), with the
   grey smudge an eraser leaves where the rest was */
.habit.fill-most .box .tick path:not(.rub) { stroke-dasharray: .67 1; }
.habit.fill-half .box .tick path:not(.rub) { stroke-dasharray: .5 1; }
.habit.fill-some .box .tick path:not(.rub) { stroke-dasharray: .33 1; }
.box .tick .rub { stroke: var(--pencil-soft); stroke-width: 3.4; stroke-dasharray: none; opacity: 0; filter: blur(.5px); transition: opacity .35s ease .15s; }
.habit:is(.fill-most, .fill-half, .fill-some) .box .tick .rub { opacity: .55; }
.habit.is-done .box .tick path { transition-delay: 0s; }
.is-skipped .box { border-color: var(--pencil-soft); border-style: dashed; }
.is-skipped .box .dash path { stroke-dashoffset: 0; opacity: 1; transition-delay: 0s; }
.is-rest .box { border-color: var(--pencil-soft); }

/* ---------------------------------------------------------------- agenda */

.agenda-top { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 4px 16px; }
.agenda-top h2 { margin: 0; }
.agenda-top .pills { margin: 0 -8px; }
.agenda-nav { display: flex; align-items: center; gap: 4px; margin: 4px 0 4px -10px; }
.agenda-nav .cal-title { padding: 0 4px; }
.agenda-nav .pencil { margin-left: auto; }
.agenda-body.from-right { animation: month-from-right .24s var(--ease); }
.agenda-body.from-left { animation: month-from-left .24s var(--ease); }

.ag-day { display: grid; grid-template-columns: 56px minmax(0, 1fr); align-items: start; min-height: 48px; }
.ag-day + .ag-day { border-top: 1px solid var(--grid-strong); }
.ag-label { padding: 12px 0 0; border: 0; background: none; text-align: left; font: 400 13px/24px var(--sans); color: var(--pencil); }
.ag-label .ag-num { font: italic 500 19px/24px var(--serif); color: var(--graphite); padding: 0 2px; border-radius: 2px; }
@media (hover: hover) { .ag-label:hover .ag-num { color: var(--ink); } }
.ag-label .ag-num { position: relative; }
.ag-day.today .ag-num, .ag-cell.today .num { color: var(--ink); font-weight: 600; }
/* today: circled in ink, drawn in */
.ag-day.today .ag-num::after, .ag-cell.today .num::after {
  content: "";
  position: absolute;
  inset: -5px -10px -5px -9px;
  background: var(--ink);
  -webkit-mask: var(--loop) center / 100% 100% no-repeat;
  mask: var(--loop) center / 100% 100% no-repeat;
  animation: underline-in .5s cubic-bezier(.55, .1, .3, 1) .1s both;
  pointer-events: none;
}
.ag-day.past .ag-num { color: var(--pencil); }
.ag-empty { margin: 0; line-height: 48px; color: var(--pencil-soft); }

.ag-week-head { margin-top: 4px; }
.ag-cell {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 1px;
  min-width: 0;
  height: 72px;
  padding: 3px 4px;
  border: 0;
  background: none;
  box-shadow: inset 0 0 0 .5px var(--grid-strong);
  text-align: left;
  overflow: hidden;
  transition: background-color .15s;
}
@media (hover: hover) { .ag-cell:hover { background-color: var(--ink-soft); } }
.ag-cell .num { font: 400 13px/16px var(--serif); color: var(--graphite); }
.ag-cell.past .num { color: var(--pencil); }
.ag-cell .num { position: relative; align-self: flex-start; padding: 0 2px; }
.ag-cell.today .num::after { inset: -4px -7px -4px -6px; }
.ag-chip { display: block; font-size: 11px; line-height: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--graphite); }
.ag-chip.ghost { color: var(--pencil); }
.ag-chip.hl { width: fit-content; max-width: 100%; }
.ag-chip.hl::before { bottom: 1px; }
.ag-more { font-size: 11px; line-height: 14px; color: var(--pencil); }

/* ---------------------------------------------------------------- the Kalender */

.calendar .agenda-top { align-items: center; margin-bottom: 4px; }
.calendar .agenda-top .pills:first-child .pill:not(.on) { color: var(--pencil); }
.cal-col + .cal-col { border-top: 1px solid var(--grid-strong); }
.cal-col.today .ag-num { color: var(--ink); font-weight: 600; }
.cal-col.past .ag-num { color: var(--pencil); }
.cal-list { display: flex; flex-direction: column; gap: 2px; margin: 2px 0 6px; padding: 0; list-style: none; }
.cal-item { position: relative; display: flex; align-items: center; gap: 9px; min-height: 30px; }
.cal-item .box { width: 16px; height: 16px; border-width: 1.4px; }
.cal-item .box svg { left: -2px; top: -4px; width: 19px; height: 19px; }
.cal-item .ghost-box { width: 16px; height: 16px; }
.cal-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 2px 0;
  border: 0;
  background: none;
  text-align: left;
  font: italic 500 16px/20px var(--serif);
  color: var(--graphite);
}
.cal-text .title { font: inherit; }
.cal-task.ghost .cal-text { color: var(--pencil); }
.cal-of { font: 400 11.5px/15px var(--sans); color: var(--pencil); overflow-wrap: anywhere; }
.cal-at { flex: none; margin-left: auto; font: italic 500 13.5px/20px var(--serif); color: var(--pencil); white-space: nowrap; }
.cal-step .cal-text { font-weight: 400; }
.cal-habit .cal-habit-name { cursor: default; font-weight: 400; }
.cal-habit .tc.mini { width: 18px; margin: 0; vertical-align: 0; }
.cal-marks { flex-wrap: wrap; gap: 2px; min-height: 22px; }
.cal-marks .tc.mini { width: 16px; margin: 0; }
/* an afspraak: written in a box in ink, as in a paper diary */
.cal-ev {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 8px;
  width: 100%;
  padding: 3px 8px 4px;
  border: 1.3px solid var(--ink);
  border-radius: 3px 5px 4px 3px;
  background: var(--ink-soft);
  text-align: left;
  color: var(--ink);
  cursor: pointer;
  rotate: -.3deg;
  transition: background-color .15s, rotate .25s var(--ease);
}
.cal-event:nth-child(2n) .cal-ev { rotate: .25deg; }
@media (hover: hover) { .cal-ev:hover { background-color: var(--marker-soft); rotate: 0deg; } }
.cal-ev .cal-at { margin: 0; color: var(--ink); font-weight: 600; }
.cal-ev-title { min-width: 0; font: italic 500 16px/20px var(--serif); overflow-wrap: anywhere; }
.cal-where { flex-basis: 100%; font: 400 12px/16px var(--sans); color: var(--graphite); }
.cal-event.all-day .cal-ev { border-style: dashed; }
.cal-week .cal-ev { padding: 2px 6px 3px; }
.cal-week .cal-ev-title { font-size: 14.5px; line-height: 18px; }
.cal-week .cal-text { font-size: 14.5px; line-height: 18px; }
.cal-dayview .cal-item { min-height: 40px; }
/* the day: every time in the margin on the left, what happens after it */
.cal-dayview .cal-item > .cal-at { order: -1; width: 60px; margin: 0; text-align: left; }
.cal-dayview .cal-item:not(:has(> .cal-at))::before { content: ""; flex: none; order: -1; width: 60px; }
.cal-dayview .cal-ev { width: auto; max-width: calc(100% - 70px); }
.cal-dayview .cal-ev .cal-at { font-weight: 500; }
.cal-dayview .cal-text { font-size: 18px; line-height: 24px; }
.cal-dayview .cal-item .box, .cal-dayview .cal-item .ghost-box { width: 18px; height: 18px; }
.cal-dayview .cal-ev { padding: 6px 12px 7px; }
.cal-dayview .cal-ev-title { font-size: 18px; line-height: 24px; }
.cal-source { margin: 10px 0 0; font: 400 12.5px/20px var(--sans); color: var(--pencil); }
.cal-source .pencil { margin-left: 6px; }
.ag-cell .cell-top { display: flex; align-items: center; justify-content: space-between; gap: 4px; }
.ag-cell .cell-top .tc.mini { width: 14px; margin: 0; }
.ag-chip.ev { padding: 0 3px; border-left: 2px solid var(--ink); color: var(--ink); }
.ag-chip.ev b { font-weight: 600; }
.ag-chip.step { font-style: italic; }
.event-note { white-space: pre-line; }

/* a repeat that hasn't come round yet */
.row.ghost { opacity: .62; }
.ghost-box { display: block; flex: none; width: 20px; height: 20px; border: 1.5px dashed var(--pencil-soft); border-radius: 3px; }

/* ---------------------------------------------------------------- lists: a table of contents */
/* own lists in handwriting with how many are open in pencil; under them the two
   fixed lists, printed and with an icon, like pockets in the back cover */

/* Each list is a line you can open: an icon, its name (your own lists written large by
   hand, the two fixed ones printed), how many are open, and an arrow. Pointing at a line
   lights it up, draws its icon again and moves the arrow on; just before the arrow come
   buttons to rename or delete it (or, for a fixed list, to empty it). Your own lists can
   be dragged up and down. */
.toc-list { margin: 0 -12px; }
.toc {
  position: relative;
  min-height: 0;
  gap: 0;
  margin: 1px 0 1px calc(var(--depth, 0) * 28px); /* lists inside lists, a step in per level */
  padding: 0 8px 0 0;
  border-radius: 12px;
  transition: background-color .2s;
}
.toc.peeking, .toc:has(:focus-visible) { background: var(--ink-soft); }
@media (hover: hover) { .toc:hover { background: var(--ink-soft); } }
.toc .text {
  flex: 1;
  min-width: 0;
  flex-direction: row;
  align-items: center;
  gap: 0;
  padding: 10px 0 10px 12px;
  cursor: pointer;
  transition: transform .25s var(--ease);
}
.toc .text:active { transform: scale(.99); }
.toc-icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 34px;
  height: 34px;
  margin-right: 14px;
  border: 1.3px solid var(--grid-strong);
  border-radius: 10px;
  background: var(--paper);
  color: var(--pencil);
  transition: color .2s, border-color .2s, transform .3s var(--ease);
}
.toc-icon .ico { width: 18px; height: 18px; }
.toc.peeking .toc-icon { color: var(--ink); border-color: var(--ink); transform: rotate(-4deg); }
@media (hover: hover) { .toc:hover .toc-icon { color: var(--ink); border-color: var(--ink); transform: rotate(-4deg); } }
@media (hover: hover) { .toc:hover .toc-icon .ico path { animation: redraw .5s cubic-bezier(.5, .1, .3, 1) both; } }
.toc > .text .title { font: italic 600 25px/30px var(--serif); color: var(--graphite); letter-spacing: -.2px; transition: color .15s; }
.toc.peeking > .text .title { color: var(--ink); }
@media (hover: hover) { .toc:hover > .text .title { color: var(--ink); } }
.toc-acts { /* rename, delete (or empty): shown when you point at the line */
  display: flex;
  flex: none;
  gap: 2px;
  margin-left: 8px;
  opacity: 0;
  transform: translateX(6px);
  pointer-events: none;
  transition: opacity .18s, transform .25s var(--ease);
}
.toc.peeking .toc-acts, .toc:has(:focus-visible) .toc-acts { opacity: 1; transform: none; pointer-events: auto; }
@media (hover: hover) { .toc:hover .toc-acts { opacity: 1; transform: none; pointer-events: auto; } }
@media (hover: none) { .toc-acts { opacity: 1; transform: none; pointer-events: auto; } }
.toc-acts .icon-btn { width: 32px; height: 32px; }
.toc-acts .icon-btn .ico { width: 17px; height: 17px; }
.toc-go { flex: none; padding: 0 2px 0 6px; color: var(--pencil-soft); cursor: pointer; transition: color .2s, transform .3s var(--ease); }
.toc-go .ico { width: 18px; height: 18px; }
.toc.peeking .toc-go { color: var(--ink); transform: translateX(4px); }
@media (hover: hover) { .toc:hover .toc-go { color: var(--ink); transform: translateX(4px); } }
.toc .count { /* how many are open: written small and circled in pencil */
  position: relative;
  top: 3px; /* on the middle of the name's small letters, not of its line */
  flex: none;
  margin-left: 10px;
  padding: 0 4px;
  min-width: 22px;
  font: italic 500 16px/22px var(--serif);
  color: var(--pencil);
  text-align: center;
  font-variant-numeric: lining-nums;
  transition: color .15s;
}
.toc .ring {
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(100% + 10px);
  height: 30px;
  transform: translate(-50%, -52%) rotate(-6deg);
  overflow: visible;
  fill: none;
  stroke: var(--pencil-soft);
  stroke-width: 2.2;
  stroke-linecap: round;
  pointer-events: none;
  transition: stroke .15s;
}
.toc.peeking .count { color: var(--ink); }
@media (hover: hover) { .toc:hover .count { color: var(--ink); } }
.toc.peeking .ring { stroke: var(--ink); }
@media (hover: hover) { .toc:hover .ring { stroke: var(--ink); } }
.has-tasks { position: relative; flex: none; width: 8px; height: 8px; margin-left: 12px; border-radius: 50%; background: var(--pencil-soft); }
.toc .has-tasks { top: 3px; }
.later-label { margin: 24px 0 4px; font: italic 500 17px/24px var(--serif); color: var(--pencil); }
.later-label span { font: 12.5px/24px var(--sans); margin-left: 6px; }
.later-rows .row { opacity: .45; transition: opacity .2s; }
.later-rows .row:focus-within { opacity: 1; }
@media (hover: hover) { .later-rows .row:hover { opacity: 1; } }

/* the two fixed lists: printed, with their own icon, at the back */
.pockets { margin: 24px -12px 0; padding-top: 12px; border-top: 1.5px dashed var(--pencil-soft); }
.pocket .toc-icon { border-style: dashed; } /* the two fixed lists: the same, with a dashed tile */
.pocket .toc-icon .ico { stroke-width: 1.5; }

/* ---------------------------------------------------------------- peeking into a list */

/* Pointing at a list in the contents unfolds a card under it with what's in it: its
   lists (point at one and it unfolds in turn, a step in, hooked on) and its tasks,
   each to open, tick, change or delete. */
.toc.peeking { z-index: 6; }
.peek {
  position: absolute;
  top: calc(100% - 4px);
  left: 30px;
  right: 0;
  padding: 8px 8px 10px 10px;
  border: 1.3px solid var(--grid-strong);
  border-radius: 3px 3px 12px 12px;
  background: var(--paper);
  box-shadow: 0 1px 0 rgba(43, 47, 54, .04), 0 16px 36px rgba(31, 40, 70, .16);
  transform-origin: 50% 0;
  animation: peek-in .16s var(--ease) both;
  cursor: default;
}
@keyframes peek-in { from { opacity: 0; transform: translateY(-6px) scaleY(.94); } }
.peek-rows { margin: 0; padding: 0; list-style: none; }
.peek-line, .peek-task {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 38px;
  padding: 1px 4px 1px 6px;
  border-radius: 8px;
  transition: background-color .15s;
}
@media (hover: hover) { .peek-line:hover, .peek-task:hover { background: var(--ink-soft); } }
.peek-name {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 4px 0;
  border: 0;
  background: none;
  color: var(--graphite);
  text-align: left;
  cursor: pointer;
}
.peek-name .title { font: italic 500 17px/22px var(--serif); transition: color .15s; }
@media (hover: hover) { .peek-name:hover .title { color: var(--ink); } }
.peek-line .title { font-weight: 600; }
.peek-icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 24px;
  height: 24px;
  border: 1.2px dashed var(--pencil-soft);
  border-radius: 7px;
  color: var(--pencil);
}
.peek-icon .ico { width: 14px; height: 14px; }
@media (hover: hover) { .peek-line:hover .peek-icon { color: var(--ink); border-color: var(--ink); } }
.peek-count {
  flex: none;
  min-width: 20px;
  padding: 0 6px;
  border: 1.2px solid var(--pencil-soft);
  border-radius: 999px;
  font: 500 11.5px/17px var(--sans);
  color: var(--pencil);
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.peek .has-tasks { margin-left: 2px; }
.peek-task .box { width: 18px; height: 18px; }
.peek-task .time { font: italic 500 14px/18px var(--serif); color: var(--pencil); white-space: nowrap; }
.peek-task.later { opacity: .55; }
.peek-acts { display: flex; flex: none; opacity: 0; pointer-events: none; transition: opacity .15s; }
.peek-acts:focus-within { opacity: 1; pointer-events: auto; }
@media (hover: hover) { .peek-line:hover .peek-acts, .peek-task:hover .peek-acts { opacity: 1; pointer-events: auto; } }
@media (hover: none) { .peek-acts { opacity: 1; pointer-events: auto; } }
.peek-acts .icon-btn { width: 28px; height: 28px; }
.peek-acts .icon-btn .ico { width: 15px; height: 15px; }
/* a list on the card, unfolded: what's in it a step in, on a pencil line from it */
.peek-list > .fold > .fold-inner { position: relative; padding-left: 24px; }
.peek-list > .fold > .fold-inner::before {
  content: "";
  position: absolute;
  left: 17px;
  top: 0;
  bottom: 12px;
  border-left: 1.5px solid var(--pencil-soft);
  border-bottom-left-radius: 6px;
}
body.dragging .peek, .drag-ghost .peek { display: none; }

.pencil.back { text-decoration: none; font: italic 400 17px/24px var(--serif); }
.title-edit {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  letter-spacing: inherit;
  color: inherit;
  text-align: left;
  text-decoration: underline transparent;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 8px;
  transition: text-decoration-color .2s;
}
@media (hover: hover) { .title-edit:hover { text-decoration-color: var(--pencil-soft); } }

/* ---------------------------------------------------------------- a list's tasks: lines in the notebook */

.task .box { rotate: -1.4deg; }
.task:nth-child(3n) .box { rotate: 1deg; }
.task:nth-child(3n + 2) .box { rotate: -.4deg; }
.task .time, .task .pencil { font: italic 500 15px/20px var(--serif); }
.task .cue { font-size: 12.5px; }
body.dragging .task::after { opacity: 0; }

/* the next empty line: write a new task on it */
.write-next {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  min-height: 48px;
  padding: 4px 0;
  border: 0;
  background: none;
  font: italic 500 18px/24px var(--serif);
  color: var(--pencil-soft);
  text-align: left;
  cursor: pointer;
  transition: color .2s;
}
.write-next .ico { width: 20px; height: 20px; stroke-width: 1.8; }
.write-next::after {
  content: "";
  position: absolute;
  left: 34px;
  right: 0;
  bottom: -1px;
  height: 6px;
  background: var(--pencil-soft);
  -webkit-mask: var(--rule) 0 0 / 100% 100% no-repeat;
  mask: var(--rule) 0 0 / 100% 100% no-repeat;
  clip-path: inset(0 100% 0 0);
  transition: clip-path .45s cubic-bezier(.55, .1, .3, 1);
}
.write-next:focus-visible { color: var(--ink); }
@media (hover: hover) { .write-next:hover { color: var(--ink); } }
.write-next:focus-visible::after { clip-path: inset(0 0 0 0); background: var(--ink); opacity: .5; }
@media (hover: hover) { .write-next:hover::after { clip-path: inset(0 0 0 0); background: var(--ink); opacity: .5; } }
@media (hover: hover) { .write-next:hover .ico path { animation: redraw .45s cubic-bezier(.5, .1, .3, 1) both; } }
.write-next:active { transform: translateY(1px); }
.empty + .write-next { margin-top: -8px; }

/* ---------------------------------------------------------------- habit sentences */

.sentence { margin: 0; font: italic 400 21px/28px var(--serif); }
.sentence strong { font-weight: 600; }
.joiner { font: 400 13px/24px var(--sans); color: var(--pencil); }
.card-actions { display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 4px 0 0; }

/* the picked day: a page from a diary, laid on the paper */
.day-panel {
  position: relative;
  max-width: 560px;
  margin: 12px 0 20px;
  padding: 18px 24px 14px 26px;
  border: 1.2px solid var(--grid-strong);
  border-radius: 3px 3px 3px 14px;
  background: var(--paper);
  box-shadow: 0 1px 0 rgba(43, 47, 54, .04), 0 14px 30px -12px rgba(31, 40, 70, .22);
  rotate: -.4deg;
}
.day-panel::before { /* the margin line of a diary page */
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 14px;
  border-left: 1.2px solid var(--pencil-soft);
  opacity: .5;
}
.day-panel-title { margin: 0 0 8px; font: italic 600 22px/28px var(--serif); color: var(--ink); }
.day-panel .rows { counter-reset: none; }
.day-panel .master-row { min-height: 36px; gap: 12px; }
.day-panel .master-row .tc.mini { width: 22px; }
.day-panel .master-row:is(.m-open, .m-off, .m-free, .m-paused) .title { color: var(--pencil); }
/* the last three days: a box that can still be tapped (a tick forgotten, put right) */
.tc.amend { flex: none; padding: 0; border: 0; background: none; cursor: pointer; transition: transform .2s var(--ease); }
.tc.amend:active { transform: scale(.88); }
.tc.amend:is(.m-open, .m-today, .m-free)::after { border-color: var(--ink); border-style: solid; }
.day-panel .tc.amend { width: 30px; max-width: none; }
.day-panel-hint { margin: -4px 0 8px; }
.day-panel .day-note::before { content: "“"; }
.day-panel .day-note::after { content: "”"; }
.day-panel-score { margin-left: 12px; font: 13px/24px var(--sans); color: var(--pencil); }
.note-input { margin-top: 8px; font-size: 15px; }
.day-note { /* how it went, in pencil under the habit */
  display: block;
  max-width: 100%;
  margin-top: 1px;
  padding: 0;
  border: 0;
  background: none;
  text-align: left;
  font: italic 400 15px/20px var(--serif);
  color: var(--pencil);
  overflow-wrap: anywhere;
}
button.day-note { cursor: text; }
/* Vandaag: a habit's note waits out of sight (a dot says it's there) and shows on a
   slip of paper when you point at the habit */
.title-line { display: inline-flex; align-items: center; max-width: 100%; min-width: 0; }
.note-mark { /* a little notepad: there's a note today */
  flex: none;
  display: inline-grid;
  margin-left: 8px;
  color: var(--pencil);
  transition: color .2s, transform .3s var(--ease);
}
.note-mark svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
@media (hover: hover) { .habit:has(> .text:hover) .note-mark { color: var(--ink); transform: rotate(-8deg) translateY(-1px); } }
/* the note itself, on a slip of paper above the habit (so the choices below stay free) */
.habit > .day-note {
  position: absolute;
  left: calc(34px + var(--depth, 0) * 24px);
  bottom: calc(100% - 6px);
  z-index: 6;
  width: max-content;
  max-width: min(380px, 85%);
  padding: 5px 12px 6px;
  border-radius: 2px;
  background: var(--note);
  color: var(--note-text);
  font: italic 500 16px/22px var(--serif);
  box-shadow: 0 6px 16px rgba(60, 50, 10, .18);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px) rotate(-.8deg) scale(.96);
  transform-origin: 20px 100%;
  transition: opacity .2s ease, transform .3s var(--ease), visibility 0s linear .2s; /* you can still reach it as it goes */
}
/* pointing at the habit itself (its name, not its box or a button next to it) brings
   the slip up, after a moment */
.habit > .day-note:focus-visible {
  opacity: 1;
  visibility: visible;
  transform: rotate(-1.2deg);
  transition: opacity .28s ease .18s, transform .45s cubic-bezier(.2, .9, .25, 1.15) .18s, visibility 0s;
}
@media (hover: hover) { .habit:has(> .text:hover) > .day-note, .habit > .day-note:hover {
  opacity: 1;
  visibility: visible;
  transform: rotate(-1.2deg);
  transition: opacity .28s ease .18s, transform .45s cubic-bezier(.2, .9, .25, 1.15) .18s, visibility 0s;
} }
.habit .text[data-action] { cursor: pointer; } /* a habit with options: its row opens them */
body.dragging .habit > .day-note { display: none; }
/* Vandaag: a habit with options opens its choices under it */
.choose-fold { list-style: none; }
.choose-fold .fold-inner { padding: 0 0 0 calc(34px + var(--depth, 0) * 24px); }
.choices { display: flex; flex-direction: column; gap: 6px; padding: 2px 0 14px; }
.choice {
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: 420px;
  padding: 7px 14px 7px 10px;
  border: 1.3px solid var(--grid-strong);
  border-radius: 12px;
  background: var(--paper);
  text-align: left;
  transition: border-color .2s, background-color .2s, transform .25s var(--ease);
}
@media (hover: hover) { .choice:hover { border-color: var(--ink); transform: translateX(3px); } }
.choice:active { transform: scale(.98); }
.choice.on { border-color: var(--ink); background: var(--ink-soft); }
.choice .tc.mini { width: 22px; margin: 0; }
.choice-title { flex: 1; min-width: 0; font: italic 500 18px/22px var(--serif); color: var(--graphite); }
.choice.on .choice-title { color: var(--ink); }
@media (hover: hover) { .choice:hover .choice-title { color: var(--ink); } }
.choice-amount { flex: none; font-size: 12.5px; color: var(--pencil); }
.open .choice { animation: choice-in .35s var(--ease) both; }
.open .choice:nth-child(2) { animation-delay: .04s; }
.open .choice:nth-child(3) { animation-delay: .08s; }
.open .choice:nth-child(4) { animation-delay: .12s; }
@keyframes choice-in { from { opacity: 0; transform: translateY(-6px); } }

.note-fold { list-style: none; }
.note-fold .fold-inner { padding: 0 0 0 calc(34px + var(--depth, 0) * 24px); }
.note-fold textarea { /* lined paper: you write on the lines */
  margin: 0 0 12px;
  padding: 0 4px;
  border-bottom: 0;
  background: repeating-linear-gradient(transparent 0 25px, var(--pencil-soft) 25px 26px) 0 0 / 100% 26px local;
  font: italic 500 17px/26px var(--serif);
  color: var(--graphite);
}

/* ---------------------------------------------------------------- habits tied to habits, and dragging */

/* a habit tied to another one sits a square in, hooked under it */
.habit.tied { padding-left: calc(var(--depth) * 24px); }
.habit.tied::before, .habit-line.tied .tr-name::before {
  content: "";
  position: absolute;
  left: calc(var(--depth) * 24px - 17px);
  top: 4px;
  width: 9px;
  height: 18px;
  border-left: 1.5px solid var(--pencil-soft);
  border-bottom: 1.5px solid var(--pencil-soft);
  border-bottom-left-radius: 7px;
}

/* the handle in the margin: a pencil arrow up and down, drawn in when you point at
   the row; pointing at the handle itself, it bobs (you can pull it up or down) */
.grip {
  position: absolute;
  left: -27px;
  top: 50%;
  display: grid;
  place-items: center;
  width: 20px;
  height: 26px;
  margin-top: -13px;
  color: var(--pencil);
  opacity: 0;
  cursor: grab;
  transition: opacity .15s, color .15s;
}
.grip .ico { width: 17px; height: 17px; stroke-width: 1.7; }
@media (hover: hover) { .row:hover > .grip, .tr-row:hover > .grip { opacity: .85; } }
@media (hover: hover) { .row:hover > .grip .ico path, .tr-row:hover > .grip .ico path { animation: redraw .45s cubic-bezier(.5, .1, .3, 1) both; } }
@media (hover: hover) { .row > .grip:hover, .tr-row > .grip:hover { color: var(--ink); opacity: 1; } }
@media (hover: hover) { .row > .grip:hover .ico, .tr-row > .grip:hover .ico { animation: bob 1.1s ease-in-out infinite; } }
@keyframes bob { 25% { transform: translateY(-2px); } 75% { transform: translateY(2px); } }
@media (hover: none) { .grip { opacity: .5; } }
[data-drag] { -webkit-user-select: none; user-select: none; }
body.dragging, body.dragging * { cursor: grabbing !important; }
.drag-source { visibility: hidden; } /* its place moves with the gap */
.drag-sorting > * { transition: transform .26s cubic-bezier(.2, .8, .2, 1); } /* the others slide aside */

/* the row on its strip of paper, following the pointer */
.drag-ghost {
  position: fixed !important;
  z-index: 30;
  margin: 0 !important;
  padding: 0;
  list-style: none;
  pointer-events: none;
  background: var(--paper);
  border-radius: 3px;
  box-shadow: 0 1px 0 rgba(43, 47, 54, .05), 0 12px 30px rgba(31, 40, 70, .2);
  animation: none !important;
  transition: transform .22s var(--ease), opacity .18s, box-shadow .22s;
}
.drag-ghost.lifted {
  transform: translateX(var(--indent, 0px)) rotate(var(--tilt, -.8deg)) scale(1.02);
  box-shadow: 0 1px 0 rgba(43, 47, 54, .05), 0 18px 36px rgba(31, 40, 70, .22);
}
/* tucked in under the row it gets tied to (drag.js sets where), hooked on with a pencil line */
.drag-ghost.lifted.onto {
  transform: rotate(-.4deg) scale(.985);
  box-shadow: 0 1px 0 rgba(43, 47, 54, .05), 0 6px 16px rgba(31, 40, 70, .16);
}
.drag-ghost.glide { transition: top .22s var(--ease), left .22s var(--ease), transform .22s var(--ease), opacity .18s, box-shadow .22s; }
.drag-ghost::before {
  content: "";
  position: absolute;
  left: var(--hook, -17px);
  top: -6px;
  width: 9px;
  height: 28px;
  border-left: 1.5px solid var(--pencil);
  border-bottom: 1.5px solid var(--pencil);
  border-bottom-left-radius: 7px;
  clip-path: inset(0 0 100% 0);
  transition: clip-path .1s;
}
.drag-ghost.onto::before { clip-path: inset(-2px -2px -2px -2px); transition: clip-path .3s cubic-bezier(.5, .1, .3, 1) .12s; } /* drawn down, like a pen */
.drag-ghost.onto .tied::before, .drag-ghost.onto .tied .tr-name::before { opacity: 0; } /* its old hook */
.drag-ghost.returning { transition: top .25s var(--ease), left .25s var(--ease), transform .25s var(--ease), box-shadow .25s; transform: none; box-shadow: none; }
/* a habit's month travels as just its name */
.drag-ghost.compact .tr-row { display: block; padding: 4px 12px; }
.drag-ghost.compact .tc { display: none; }
.drag-ghost .grip { opacity: .75; }
.drag-ghost .reveal { opacity: 0; }

/* where it lands: a soft outline in the gap the other rows open */
.drop-slot {
  position: fixed;
  z-index: 29;
  border: 1.5px dashed var(--pencil-soft);
  border-radius: 10px;
  background: var(--ink-soft);
  pointer-events: none;
  opacity: 0;
  transition: top .26s cubic-bezier(.2, .8, .2, 1), height .26s, opacity .15s;
}
.drop-slot.show { opacity: .7; }
/* what it gets tied to: its name gets a stroke of highlighter */
.drop-onto .title {
  background: linear-gradient(transparent 14%, var(--marker-soft) 14%, var(--marker-soft) 86%, transparent 86%) no-repeat 0 0 / 100% 100%;
  border-radius: 2px;
  animation: highlight .3s cubic-bezier(.5, .1, .3, 1) both;
}
.drop-onto .tr-name .title { width: fit-content; }

/* A folded chain: its habits lie as a little stack of cards, hooked under its first
   one (the sheets behind peek out at the bottom right). Pointing at it fans the
   cards out a little; tapping it deals them out again. */
.chain-stub { position: relative; list-style: none; }
.chain-stub::before { /* the hook from the habit above */
  content: "";
  position: absolute;
  left: calc(var(--depth) * 24px - 17px);
  top: -2px;
  width: 9px;
  height: 20px;
  border-left: 1.5px solid var(--pencil-soft);
  border-bottom: 1.5px solid var(--pencil-soft);
  border-bottom-left-radius: 7px;
}
.chain-stack {
  --behind: var(--grid-strong);
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  max-width: calc(100% - var(--depth) * 24px - 16px);
  margin: 2px 0 14px calc(var(--depth) * 24px - 6px);
  padding: 5px 10px 6px 9px;
  border: 1.2px solid var(--behind);
  border-radius: 4px 3px 5px 3px;
  background: var(--paper);
  font: italic 500 15px/20px var(--serif);
  color: var(--pencil);
  text-align: left;
  cursor: pointer;
  box-shadow:
    3px 3px 0 -1.2px var(--paper), 3px 3px 0 0 var(--behind),
    6px 6px 0 -1.2px var(--paper), 6px 6px 0 0 var(--behind);
  transform: rotate(-.7deg);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), color .15s, border-color .2s;
  animation: stack-in .4s var(--ease);
}
@keyframes stack-in { from { opacity: 0; transform: translateY(-8px) rotate(-3deg) scale(.96); } }
.chain-stack:focus-visible {
  --behind: var(--pencil-soft);
  color: var(--ink);
  transform: rotate(-1.4deg) translateY(-1px);
  box-shadow:
    5px 4px 0 -1.2px var(--paper), 5px 4px 0 0 var(--behind),
    10px 8px 0 -1.2px var(--paper), 10px 8px 0 0 var(--behind),
    0 10px 20px rgba(31, 40, 70, .1);
}
@media (hover: hover) { .chain-stack:hover {
  --behind: var(--pencil-soft);
  color: var(--ink);
  transform: rotate(-1.4deg) translateY(-1px);
  box-shadow:
    5px 4px 0 -1.2px var(--paper), 5px 4px 0 0 var(--behind),
    10px 8px 0 -1.2px var(--paper), 10px 8px 0 0 var(--behind),
    0 10px 20px rgba(31, 40, 70, .1);
} }
.chain-stack:active { transform: rotate(-.7deg) scale(.98); }
.stack-marks { display: inline-flex; flex: none; gap: 3px; }
.stack-marks .tc.mini { width: 16px; margin: 0; vertical-align: 0; }
.stack-names { display: flex; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.stack-names span { flex: none; }
.stack-names span + span::before { content: "·"; margin: 0 7px; color: var(--pencil-soft); }
.stack-open { display: grid; flex: none; margin-left: 2px; color: var(--pencil-soft); transform: rotate(0); transition: color .15s, transform .35s var(--ease); }
.stack-open .ico { width: 14px; height: 14px; stroke-width: 1.8; }
@media (hover: hover) { .chain-stack:hover .stack-open { color: var(--ink); transform: rotate(180deg); } }
/* on Gewoontes: the stack in the names column, and the chain's days together beside it */
.tr-row.chain-stub { min-height: 44px; }
.tr-row.chain-stub .chain-stack { margin-top: 0; margin-bottom: 6px; }
.tr-row.chain-stub .tc { opacity: .75; scale: .82; } /* smaller: a summary, not a habit of its own */

/* ---------------------------------------------------------------- Gewoontes: the month tracker */

.tracker-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 24px; }
.tracker-top .cal-head { justify-content: flex-start; gap: 6px; }
.tracker-top .cal-title { min-width: 6.5em; text-align: center; }
.legend { display: flex; flex-wrap: wrap; gap: 2px 16px; margin: 4px 0; font-size: 13px; color: var(--pencil); }
.legend-item { display: inline-flex; align-items: center; }

.tracker { margin: 8px 0 12px; }
.tracker.from-right { animation: month-from-right .24s var(--ease); }
.tracker.from-left { animation: month-from-left .24s var(--ease); }
/* narrow: the name on a line of its own, the days under it */
.tr-row {
  position: relative;
  display: grid;
  grid-template-columns: repeat(var(--days), minmax(0, 1fr));
  align-items: center;
  padding: 4px 0;
}
.tr-name-wrap { grid-column: 1 / -1; position: relative; min-width: 0; }
.tr-name-wrap .tr-name { width: 100%; }
.row-acts { /* on a habit's line: edit, pause, archive, shown when you point at it */
  position: absolute;
  right: 4px;
  top: 50%;
  display: flex;
  gap: 2px;
  padding-left: 28px;
  background: linear-gradient(to right, transparent, var(--paper) 24px);
  transform: translateY(-50%);
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s;
}
.row-acts:focus-within { opacity: 1; }
@media (hover: hover) { .habit-line:hover .row-acts { opacity: 1; } }
.row-acts:focus-within .icon-btn { pointer-events: auto; }
@media (hover: hover) { .habit-line:hover .row-acts .icon-btn { pointer-events: auto; } } /* only the buttons: a click on the name next to them opens the habit */
@media (hover: none) { .row-acts { opacity: 1; pointer-events: auto; } }
.row-acts .icon-btn { width: 30px; height: 30px; }
.row-acts .icon-btn .ico { width: 17px; height: 17px; }
/* "hierna": pencilled in on the line under a habit's name when you point at it,
   where a habit tied to it would hook on (the next habit's small line makes room) */
.habit-line:focus-within { z-index: 2; }
@media (hover: hover) { .habit-line:hover { z-index: 2; } }
.chain-add {
  position: absolute;
  left: calc(var(--depth, 0) * 24px + 6px);
  top: calc(100% - 2px);
  display: inline-flex;
  align-items: flex-end;
  gap: 1px;
  height: 22px;
  padding: 0 8px 0 0;
  border: 0;
  background: none;
  font: italic 500 16px/1 var(--serif);
  color: var(--pencil);
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-3px);
  transition: opacity .18s, transform .25s var(--ease), color .15s;
}
.chain-add .chain-hook { width: 12px; height: 16px; margin-bottom: 2px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; overflow: visible; }
.chain-add .chain-hook path { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset .35s cubic-bezier(.5, .1, .3, 1) .05s; }
.chain-add .ico { width: 14px; height: 14px; margin: 0 1px 3px 3px; stroke-width: 2; }
.chain-add span { padding-bottom: 2px; }
.chain-add:focus-visible { opacity: 1; pointer-events: auto; transform: none; }
@media (hover: hover) { .tr-name-wrap:hover .chain-add { opacity: 1; pointer-events: auto; transform: none; } }
.chain-add:focus-visible .chain-hook path { stroke-dashoffset: 0; }
@media (hover: hover) { .tr-name-wrap:hover .chain-add .chain-hook path { stroke-dashoffset: 0; } }
@media (hover: hover) { .chain-add:hover { color: var(--ink); } }
@media (hover: hover) { .chain-add:hover .ico path { animation: redraw .4s var(--ease); } }
.tr-row > .tr-name-wrap .tr-name > .cue, .habit-line.tied .tr-name::before { transition: opacity .18s; }
@media (hover: hover) { .habit-line:has(.tr-name-wrap:hover, .chain-add:focus-visible) + .tr-row .tr-name > .cue, .habit-line:has(.tr-name-wrap:hover, .chain-add:focus-visible) + .tr-row .tr-name::before { opacity: 0; } }
body.dragging .chain-add, .drag-ghost .chain-add { display: none; }
@media (hover: none) { .chain-add { display: none; } }
@media (max-width: 1039px) {
  .chain-add { top: 50%; left: auto; right: 112px; transform: translate(0, -50%); }
  @media (hover: hover) { .tr-name-wrap:hover .chain-add { transform: translateY(-50%); } }
  @media (hover: hover) { .habit-line:has(.tr-name-wrap:hover, .chain-add:focus-visible) + .tr-row .tr-name > .cue, .habit-line:has(.tr-name-wrap:hover, .chain-add:focus-visible) + .tr-row .tr-name::before { opacity: 1; } }
}
.tr-name {
  grid-column: 1 / -1;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
  padding: 0 0 2px calc(var(--depth, 0) * 24px);
  border: 0;
  background: none;
  text-align: left;
}
button.tr-name { cursor: pointer; }
.tr-name .title { display: block; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: color .15s; }
.tr-name .cue { display: block; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (hover: hover) { button.tr-name:hover .title { color: var(--ink); } }
.tr-head .tr-name { display: none; }
.tr-head { padding: 0; }
.is-paused .tr-name .title { color: var(--pencil); }

.tr-day {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 2px 0 4px;
  border: 0;
  background: none;
  color: var(--pencil);
  border-radius: 3px;
}
.tr-day .wd { font-size: 8.5px; line-height: 11px; }
.tr-day .num { font: 400 10.5px/16px var(--serif); color: var(--graphite); padding: 0 1px; border-radius: 2px; font-variant-numeric: lining-nums; letter-spacing: -.3px; }
.tr-day.weekend .wd { color: var(--pencil-soft); }
.tr-day.today .num { color: var(--ink); font-weight: 600; }
.tr-day:disabled { cursor: default; }
.tr-day:disabled .num { color: var(--pencil-soft); }
.tr-day.sel .num { color: var(--ink); }
@media (hover: hover) { .tr-day:not(:disabled):hover .num { color: var(--ink); } }
.tr-day .num { position: relative; }
/* the day you picked: only its date gets a line drawn under it in ink (the boxes stay as they are) */
.tr-day.sel .num::after {
  content: "";
  position: absolute;
  left: -3px;
  right: -3px;
  bottom: -4px;
  height: 6px;
  background: var(--ink);
  -webkit-mask: var(--rule) 0 0 / 100% 100% no-repeat;
  mask: var(--rule) 0 0 / 100% 100% no-repeat;
  animation: underline-in .3s cubic-bezier(.55, .1, .3, 1) both;
}
@keyframes underline-in { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }

/* One day of one habit: a box drawn by hand on the squared paper (each one a little
   askew). A day done is coloured in with a pen scribble, as you'd do in a notebook:
   all of it for vol, from the bottom up to two thirds or one third for the rest. A
   day not done stays an empty box; skipped gets a pencil arrow hopping over it,
   paused two pause bars, a day that isn't one of its days a dot, and the days before
   it started are struck through with one line. */
.tc { --tilt: -2deg; position: relative; display: block; width: 100%; max-width: 24px; aspect-ratio: 1; justify-self: center; border-radius: 3px; }
.tc:nth-child(3n) { --tilt: 1.2deg; }
.tc:nth-child(3n + 1) { --tilt: -.6deg; }
.tc[data-action] { cursor: pointer; }
.tc::before, .tc::after { content: ""; position: absolute; inset: 20%; border-radius: 2px 3px 2px 4px; transform: rotate(var(--tilt)); }
/* the box */
.tc.m-open::after, .tc.m-today::after, .tc.m-done::after, .tc.m-most::after, .tc.m-half::after, .tc.m-some::after { border: 1.4px solid var(--pencil-soft); transition: border-color .25s; }
.tc.m-today::after { border-color: var(--ink); border-style: dashed; }
.tc.m-done::after, .tc.m-most::after, .tc.m-half::after, .tc.m-some::after { border-color: var(--ink); }
/* the scribble, coloured in from the bottom up (a little over the lines, like a pen does) */
.tc::before {
  inset: 16%;
  background: var(--scribble-ink) center / 100% 100% no-repeat;
  clip-path: inset(100% 0 0 0);
  transition: clip-path .55s cubic-bezier(.45, .05, .3, 1);
}
.tc.m-done::before { clip-path: inset(0 0 0 0); }
.tc.m-most::before { clip-path: inset(34% 0 0 0); }
.tc.m-half::before { clip-path: inset(50% 0 0 0); }
.tc.m-some::before { clip-path: inset(66% 0 0 0); }
/* overgeslagen: a pencil arrow hopping over the day */
.tc.m-skip::after { inset: 10%; transform: none; background: var(--skip-mark) center / contain no-repeat; }
/* gepauzeerd: pause bars */
.tc.m-paused::after { inset: 16%; transform: none; background: var(--pause-mark) center / contain no-repeat; }
/* not one of its days: a dot */
.tc.m-off::after { inset: 44%; transform: none; border-radius: 50%; background: var(--pencil-soft); }
/* before it started: one line struck through all those days */
.tc.m-before::after { inset: calc(50% - .75px) -1px auto; height: 1.5px; transform: none; border-radius: 0; background: var(--pencil-soft); }
.tc.m-before.end::after { right: 34%; border-radius: 0 1px 1px 0; } /* and stops a little before the first real day */
/* after its end: the same line, from a little after the last day on */
.tc.m-after::after { inset: calc(50% - .75px) -1px auto; height: 1.5px; transform: none; border-radius: 0; background: var(--pencil-soft); }
.tc:not(.m-after) + .tc.m-after::after { left: 34%; border-radius: 1px 0 0 1px; }
.tc.noted { background-image: radial-gradient(circle at 88% 12%, var(--pencil) 0 1.7px, transparent 2.2px); } /* has a note */
@media (hover: hover) { .tc[data-action]:hover { background-color: var(--ink-soft); } }


.tr-total { margin-top: 6px; padding-top: 8px; border-top: 1.5px solid var(--grid-strong); }
.tr-total .tr-name .title { color: var(--ink); }

.tc.mini { display: inline-block; width: 20px; max-width: none; margin-right: 6px; vertical-align: -5px; }
.master-row { min-height: 40px; padding-left: calc(var(--depth, 0) * 24px); }
.master-row .tc.mini { margin-right: 0; }
.tracker-hint { margin-top: 8px; font-size: 13px; }

/* ---------------------------------------------------------------- prullenbak */

.trash-row .cue { white-space: normal; }
.trash-row, .archived-row {
  margin: 10px 0;
  padding: 9px 14px 10px;
  border: 1.2px solid var(--grid-strong);
  border-radius: 3px 7px 4px 8px;
  background: var(--paper);
  box-shadow: 0 8px 16px -10px rgba(31, 40, 70, .3);
  rotate: -.9deg;
  transition: rotate .35s var(--ease), translate .35s var(--ease), box-shadow .3s, border-color .2s;
}
.archived-row { max-width: 620px; rotate: -.5deg; }
.trash-row:nth-child(even), .archived-row:nth-child(even) { rotate: .8deg; }
.archived-row:nth-child(even) { rotate: .4deg; }
/* a scrap keeps the paper of what it was; its two round buttons (back, gone for good) are always there */
.trash-row.k-task { background: var(--task-paper); }
.trash-row.k-list { background: var(--list-paper); }
.trash-row.k-habit { background: var(--habit-note); }
:root[data-theme="dark"] .trash-row.k-habit { background: #26324a; }
.trash-row .aside { flex: none; gap: 8px; }
.trash-row .icon-btn { width: 34px; height: 34px; }
.trash-row .icon-btn .ico { width: 17px; height: 17px; }
.trash-row .icon-btn:active { scale: .92; }
@media (hover: hover) { .trash-row .icon-btn.forget:hover { color: var(--paper); background: var(--ink); } }
/* a kind all at once (by its heading), and the whole bin (under the note) */
.trash-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; margin: 0 0 4px; }
.trash-head > h2 { margin: 0; }
.h2-count { margin-left: 4px; font: 400 13px/20px var(--sans); color: var(--pencil); vertical-align: middle; }
.trash-acts { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.trash-acts .act { padding: 3px 10px 3px 7px; font-size: 13px; }
.trash-acts .act .ico { width: 15px; height: 15px; }
.bin-bar { display: flex; margin: -26px 0 30px; }
.bin-bar .act { color: var(--ink); box-shadow: inset 0 0 0 1.4px var(--ink), 1.5px 2px 0 rgba(31, 63, 168, .18); }
.bin-bar .act .ico { color: var(--ink); }
@media (hover: hover) { .bin-bar .act:hover { background: var(--ink); color: var(--paper); } .bin-bar .act:hover .ico { color: var(--paper); } }
.trash-row:nth-child(3n), .archived-row:nth-child(3n) { rotate: -.3deg; }
.trash-row:focus-within, .archived-row:focus-within {
  rotate: 0deg;
  translate: 0 -2px;
  border-color: var(--pencil-soft);
  box-shadow: 0 14px 24px -12px rgba(31, 40, 70, .35);
}
@media (hover: hover) { .trash-row:hover, .archived-row:hover {
  rotate: 0deg;
  translate: 0 -2px;
  border-color: var(--pencil-soft);
  box-shadow: 0 14px 24px -12px rgba(31, 40, 70, .35);
} }
.trash-row .title { font: italic 500 18px/24px var(--serif); color: var(--pencil); transition: color .2s; }
.trash-row .hand { font-size: 19px; }
@media (hover: hover) { .trash-row:hover .title { color: var(--graphite); } }
.archived-row .aside { flex-wrap: wrap; justify-content: flex-end; gap: 6px; opacity: 0; translate: 6px 0; transition: opacity .18s, translate .25s var(--ease); }
.archived-row:focus-within .aside { opacity: 1; translate: 0 0; }
@media (hover: hover) { .archived-row:hover .aside { opacity: 1; translate: 0 0; } }
@media (hover: none) { .archived-row .aside { opacity: 1; translate: 0 0; } }

/* ---------------------------------------------------------------- tabs */

.tabs {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  display: flex;
  justify-content: center;
  padding: 24px 16px calc(20px + env(safe-area-inset-bottom));
  background: linear-gradient(transparent, var(--paper) 45%);
  pointer-events: none;
}
.tabs-inner {
  position: relative;
  display: flex;
  gap: 24px;
  padding: 8px 22px;
  background: var(--paper);
  border: 1px solid var(--grid-strong);
  border-radius: 999px;
  box-shadow: 0 6px 18px rgba(31, 40, 70, .08);
  pointer-events: auto;
}
.tab {
  position: relative;
  z-index: 1;
  background: none;
  border: 0;
  padding: 0;
  font: italic 500 18px/24px var(--serif);
  color: var(--pencil);
  transition: color .2s;
}
@media (hover: hover) { .tab:hover { color: var(--graphite); } }
.tab[aria-current="page"] { color: var(--ink); }
.tab-marker {
  position: absolute;
  bottom: 12px;
  height: 9px;
  border-radius: 2px;
  background: var(--marker-ink);
  opacity: .85;
  transition: left .38s var(--ease), width .38s var(--ease);
}

/* day / night: a pencil sun that turns into a moon */
.theme-toggle, .trash-toggle, .account-toggle {
  position: relative;
  align-self: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--pencil);
  transition: color .2s;
}
.theme-toggle::before { /* hairline between the pages and the switch */
  content: "";
  position: absolute;
  left: -13px;
  top: 2px;
  bottom: 2px;
  width: 1px;
  background: var(--grid-strong);
}
.theme-toggle::after, .trash-toggle::after, .account-toggle::after { content: ""; position: absolute; inset: -10px; } /* 44px tap target */
.trash-toggle[aria-current="page"] { color: var(--ink); }
@media (hover: hover) { .theme-toggle:hover, .trash-toggle:hover, .account-toggle:hover { color: var(--ink); } }
.theme-toggle svg, .trash-toggle svg, .account-toggle svg {
  display: block;
  width: 24px;
  height: 24px;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.theme-toggle .sun, .theme-toggle .moon {
  transform-origin: 12px 12px;
  transition: transform .6s var(--ease), opacity .3s ease;
}
.theme-toggle .moon { opacity: 0; transform: rotate(-80deg) scale(.5); }
:root[data-theme="dark"] .theme-toggle .sun { opacity: 0; transform: rotate(80deg) scale(.5); }
:root[data-theme="dark"] .theme-toggle .moon { opacity: 1; transform: none; }
/* the prullenbak: its lid lifts a little when you point at it */
.trash-toggle { z-index: 1; }
.trash-toggle .lid { transform-origin: 6px 6px; transition: transform .3s var(--ease); }
.trash-toggle[aria-current="page"] .lid { transform: translateY(-1.5px) rotate(-7deg); }
@media (hover: hover) { .trash-toggle:hover .lid { transform: translateY(-1.5px) rotate(-7deg); } }
/* with something in it, a crumpled sheet sticks out under the lid */
.trash-toggle .paper { opacity: 0; transform: translateY(5px); transition: transform .45s cubic-bezier(.3, 1.5, .5, 1), opacity .2s; }
.trash-toggle.full .paper { opacity: 1; transform: none; }
.trash-toggle.full .lid { transform: translate(-1px, -2.5px) rotate(-12deg); }

/* the account (online only): a pencil figure next to the switch */
.account-toggle { display: none; }
body.online .account-toggle { display: block; }

/* signing in (online): the first page of the notebook, with your name on it */
body.signed-out .tabs { display: none; }
.login { max-width: 420px; padding-top: 8vh; }
.login .page-title { margin-bottom: 28px; }
.login-card {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 26px 24px 22px;
  border: 1.2px solid var(--grid-strong);
  border-radius: 3px 3px 3px 14px;
  background: var(--paper);
  box-shadow: 0 16px 34px -14px rgba(31, 40, 70, .25);
  rotate: -.4deg;
}
.login-card .field { margin: 0; }
.login-card .btn { align-self: flex-start; }
.login-error { min-height: 22px; margin: -6px 0 -6px; font: italic 500 16px/22px var(--serif); color: var(--ink); }
.login .hint { margin-top: 22px; }

/* ---------------------------------------------------------------- sheet */

.sheet {
  width: min(560px, calc(100vw - 16px));
  max-height: min(88vh, 780px);
  margin: auto auto 8px;
  padding: 0;
  border: 0;
  border-radius: 14px;
  color: var(--graphite);
  background-color: var(--paper);
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: var(--cell) var(--cell);
  background-position: -1px -1px;
  box-shadow: var(--shadow);
  overflow: auto;
  overscroll-behavior: contain;
}
@media (min-width: 720px) { .sheet { margin: auto; } }
.sheet-body { padding: 32px 24px 24px; outline: none; }
/* main.js draws the other pages and the sheets here once, out of sight, so the first
   visit to each is as quick as the next (warmUp) */
.warm-up { position: fixed; top: 0; left: 0; z-index: -1; width: min(1104px, 100vw); height: 100vh; overflow: hidden; opacity: .01; pointer-events: none; contain: strict; }
.warm-up .sheet { position: static; display: block; }
/* the page behind a sheet, dimmed (main.js): not blurred, a blur has to be drawn again and again */
.sheet-shade { position: fixed; inset: 0; z-index: 40; background: rgba(22, 28, 48, .3); animation: fade-in .3s ease; touch-action: none; overscroll-behavior: contain; } /* (a finger on it doesn't scroll the page behind) */
.sheet-shade[hidden] { display: none; }
.sheet-shade.folding { animation: fade-out .3s ease-in forwards; }
.sheet-shade.leaving { animation: fade-out .17s ease-in forwards; }
/* a sheet: a plain dialog above the shade, at the bottom of a narrow window, in the middle of a wide one */
.sheet[open] { position: fixed; inset: auto 0 8px; z-index: 41; animation: sheet-in .3s var(--ease); }
@media (min-width: 720px) { .sheet[open] { top: 50%; bottom: auto; translate: 0 -50%; } }
.sheet.grow[open] { animation: none; } /* it unfolds out of the button instead (main.js) */
.sheet.closing { animation: sheet-out .17s ease-in forwards; }
@keyframes sheet-in { from { opacity: 0; transform: translateY(28px); } }
@keyframes sheet-out { to { opacity: 0; transform: translateY(18px); } }
@keyframes fade-in { from { opacity: 0; } }
@keyframes fade-out { to { opacity: 0; } }

.sheet-head { display: flex; align-items: center; gap: 14px; margin: 0 0 24px; }
.sheet-icon { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 12px; background: var(--ink-soft); color: var(--ink); }
.sheet-icon .ico { width: 26px; height: 26px; stroke-width: 1.6; }
.sheet[open]:not(.grow) .sheet-icon .ico path, .sheet[open]:not(.grow) .sheet-icon .ico rect,
.sheet.grow .sheet-icon .ico path, .sheet.grow .sheet-icon .ico rect { animation: redraw .7s cubic-bezier(.5, .1, .3, 1) .15s both; }
.sheet-heading { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.sheet-title { margin: 0; font: italic 500 32px/36px var(--serif); color: var(--ink); }
.sheet-sub { font-size: 13px; line-height: 18px; color: var(--pencil); }
.sheet-close {
  align-self: flex-start;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  margin: -6px -8px 0 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--pencil);
  transition: color .2s, background-color .2s, transform .3s var(--ease);
}
.sheet-close .ico { width: 20px; height: 20px; }
@media (hover: hover) { .sheet-close:hover { color: var(--ink); background: var(--ink-soft); transform: rotate(90deg); } }

.field { display: block; margin: 0 0 24px; }
.label { display: block; margin-bottom: 4px; font-size: 13px; color: var(--pencil); }

.line {
  width: 100%;
  border: 0;
  border-bottom: 1.5px solid var(--graphite);
  border-radius: 0;
  background: transparent;
  padding: 6px 0;
  outline: none;
  transition: border-color .2s;
}
.line:focus { border-bottom-color: var(--ink); }
.line.big { font-size: 18px; }
.line.hand { font-size: 22px; line-height: 28px; padding: 4px 0 6px; color: var(--ink); }
.line.hand::placeholder { color: var(--pencil); opacity: .8; }
.line:disabled { opacity: .4; }
/* note lines grow with what you write */
textarea.line { resize: none; line-height: 24px; field-sizing: content; min-height: 60px; max-height: 40vh; }
/* Choices are words on the paper; the chosen one gets underlined in ink.
   Hovering pencils in a faint line first. */
.pills { display: flex; flex-wrap: wrap; gap: 2px 4px; margin: 0 -8px; }
.pill {
  position: relative;
  border: 0;
  background: none;
  padding: 3px 8px 7px;
  font-size: 15px;
  line-height: 22px;
  color: var(--graphite);
  transition: color .2s;
}
.pill.on { color: var(--ink); }
@media (hover: hover) { .pill:hover { color: var(--ink); } }
.ink-line {
  position: absolute;
  left: 6px;
  bottom: 2px;
  width: calc(100% - 12px);
  height: 8px;
  overflow: visible;
  fill: none;
  pointer-events: none;
}
.ink-line path {
  stroke: var(--ink);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  opacity: 0;
  transition: stroke-dashoffset .3s cubic-bezier(.55, .1, .3, 1), opacity 0s linear .3s, stroke .2s;
}
@media (hover: hover) { .pill:not(.on):hover .ink-line path { stroke: var(--pencil-soft); stroke-dashoffset: 0; opacity: 1; transition-delay: 0s; } }
.on > .ink-line path { stroke-dashoffset: 0; opacity: 1; transition: stroke-dashoffset .42s cubic-bezier(.55, .1, .3, 1), opacity 0s; }

/* a circle drawn round a picked day, hour or minute */
.loop {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 38px;
  height: 38px;
  margin: -19px 0 0 -19px;
  overflow: visible;
  fill: none;
  pointer-events: none;
}
.loop path {
  stroke: var(--ink);
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  opacity: 0;
  transition: stroke-dashoffset .3s cubic-bezier(.55, .1, .3, 1), opacity 0s linear .3s;
}
.on > .loop path { stroke-dashoffset: 0; opacity: 1; transition: stroke-dashoffset .5s cubic-bezier(.55, .1, .3, 1), opacity 0s; }

/* ---------------------------------------------------------------- day and time */

.when-lines { margin-top: 6px; }
.when-line { display: flex; align-items: center; gap: 16px; }
.when-btn {
  display: flex;
  align-items: baseline;
  gap: 16px;
  flex: 1;
  min-width: 0;
  min-height: 48px;
  padding: 12px 0 8px;
  border: 0;
  border-bottom: 1.5px solid var(--pencil-soft);
  background: none;
  text-align: left;
  transition: border-color .2s;
}
.when-btn[aria-expanded="true"] { border-bottom-color: var(--ink); }
@media (hover: hover) { .when-btn:hover { border-bottom-color: var(--ink); } }
.when-key { flex: none; width: 2.6em; font-size: 13px; color: var(--pencil); }
.when-val { /* written in each time it changes */
  display: inline-block;
  font: italic 500 21px/24px var(--serif);
  color: var(--ink);
  animation: write .55s cubic-bezier(.45, .05, .25, 1) both;
}
.when-val.blank { color: var(--pencil); font-weight: 400; }
.when-caret {
  margin-left: auto;
  font: 400 22px/24px var(--serif);
  color: var(--pencil);
  transition: transform .35s var(--ease);
}
.when-btn[aria-expanded="true"] .when-caret { transform: rotate(90deg); }

/* folds open and shut smoothly to their own height */
.fold {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows .4s var(--ease), opacity .25s ease;
}
.fold.open { grid-template-rows: 1fr; opacity: 1; }
.fold-inner { min-height: 0; overflow: hidden; }

.cal { max-width: 336px; padding: 4px 0 12px; }
.cal-head { display: flex; align-items: center; justify-content: space-between; height: 48px; }
.cal-title { font: italic 500 22px/24px var(--serif); color: var(--ink); animation: fade-in .3s ease; }
.cal-nav {
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  font: 400 28px/1 var(--serif);
  color: var(--pencil);
  transition: color .15s, background-color .15s;
}
@media (hover: hover) { .cal-nav:hover { color: var(--ink); background: var(--ink-soft); } }
.cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.cal-grid .wd { line-height: 24px; }
.cal-days.from-right { animation: month-from-right .24s var(--ease); }
.cal-days.from-left { animation: month-from-left .24s var(--ease); }
@keyframes month-from-right { from { opacity: 0; transform: translateX(22px); } }
@keyframes month-from-left { from { opacity: 0; transform: translateX(-22px); } }

.cal-day, .tcell {
  position: relative;
  isolation: isolate;
  height: 40px;
  padding: 0;
  border: 0;
  background: none;
  font: 400 18px/24px var(--serif);
  font-variant-numeric: lining-nums tabular-nums;
  color: var(--graphite);
  transition: color .15s;
}
.cal-day.on, .tcell.on { color: var(--ink); }
@media (hover: hover) { .cal-day:hover, .tcell:hover { color: var(--ink); } }
.cal-day.past, .tcell.night { color: var(--pencil); }
.cal-day.today::before { /* today: a stroke of highlighter */
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 24px;
  height: 10px;
  margin: 0 0 0 -12px;
  background: var(--marker-soft);
  border-radius: 2px;
  z-index: -1;
}
@media (hover: hover) { .cal-day:not(.on):hover > .loop path, .tcell:not(.on):not(:disabled):hover > .loop path {
  stroke: var(--pencil-soft); stroke-dashoffset: 0; opacity: 1; transition-delay: 0s;
} }

.clock { padding: 4px 0 12px; }
.clock-label { display: block; margin: 8px 0 0; font-size: 13px; color: var(--pencil); }
.time-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 48px)); }
.tcell { font-size: 17px; }
.tcell:disabled { color: var(--pencil-soft); cursor: default; }

/* ---------------------------------------------------------------- new: task, list or habit */

/* the habit card: other versions of the habit, each counting for part */
.options { display: flex; flex-direction: column; gap: 10px; margin: 4px 0 12px; padding: 0; list-style: none; }
.option {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 4px 8px;
  padding: 6px 8px 4px 14px;
  border: 1.3px dashed var(--grid-strong);
  border-radius: 12px;
  animation: option-in .35s var(--ease);
}
@keyframes option-in { from { opacity: 0; transform: translateY(6px) scale(.98); } }
.option .line { font-size: 20px; }
.option .icon-btn { grid-column: 2; grid-row: 1; }
.option .amounts { grid-column: 1 / -1; margin: 0 -8px; }
.amounts .pill { display: inline-flex; align-items: center; font-size: 14px; }
.amounts .tc.mini { width: 18px; margin-right: 6px; }
.options-field .hint { margin-bottom: 8px; }
.options-field .hint em { font-family: var(--serif); font-size: 16px; color: var(--graphite); }

.hangs { margin: 0 -8px 4px; }
.tied-to { flex-wrap: wrap; }
.tied-to .hand { font-size: 21px; }

.check-line { display: flex; gap: 10px; align-items: center; margin-top: 12px; font-size: 14px; }
.check-line input { accent-color: var(--ink); width: 16px; height: 16px; }

.sentence-form { margin: 16px 0 8px; }
.sentence-form .sentence { display: flex; align-items: baseline; gap: 12px; margin-bottom: 12px; }
.sentence-form .joiner { flex: none; width: 3.6em; font-size: 14px; }

.hint { margin: 0 0 24px; color: var(--pencil); font-size: 14px; }
.hint.soft {
  padding: 8px 12px;
  background: var(--note);
  color: var(--note-text);
  border-radius: 2px;
  transform: rotate(-.4deg);
}

.days { display: flex; gap: 2px; padding: 10px 0 4px; }
.day { /* a day of the week: circled by hand when it's picked */
  position: relative;
  isolation: isolate;
  width: 44px;
  height: 40px;
  padding: 0;
  border: 0;
  background: none;
  font: italic 500 18px/24px var(--serif);
  color: var(--pencil);
  transition: color .2s;
}
.day.on { color: var(--ink); }
@media (hover: hover) { .day:hover { color: var(--ink); } }
@media (hover: hover) { .day:not(.on):hover > .loop path { stroke: var(--pencil-soft); stroke-dashoffset: 0; opacity: 1; transition-delay: 0s; } }

.stepper { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; padding: 12px 0 4px; }
.step {
  width: 34px; height: 34px;
  border: 1.5px solid var(--grid-strong);
  border-radius: 50%;
  background: var(--paper);
  font-size: 18px;
  line-height: 1;
  color: var(--graphite);
  transition: border-color .2s, color .2s, transform .15s;
}
@media (hover: hover) { .step:not(:disabled):hover { border-color: var(--ink); color: var(--ink); } }
.step:not(:disabled):active { transform: scale(.92); }
.step:disabled { opacity: .35; cursor: default; }
.times { color: var(--pencil); }
.stepper strong { display: inline-block; font: italic 500 26px/24px var(--serif); color: var(--ink); animation: pop .35s cubic-bezier(.3, 1.6, .5, 1); }
.times-boxes { display: inline-flex; margin-left: 4px; }
.times-boxes .tc { width: 20px; }

.sheet-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 32px; }
.export-row { display: flex; flex-wrap: wrap; gap: 8px 10px; margin: 2px 0 6px; }
.btn {
  border: 0;
  border-radius: 10px;
  padding: 9px 20px;
  background: var(--ink);
  color: var(--paper);
  font-weight: 500;
  box-shadow: 0 2px 0 rgba(0, 0, 0, .12);
  transition: transform .15s var(--ease), filter .15s, box-shadow .15s;
}
@media (hover: hover) { .btn:hover { filter: brightness(1.1); transform: translateY(-1px); box-shadow: 0 5px 12px rgba(31, 40, 70, .2); } }
.btn:active { transform: translateY(1px); box-shadow: none; }
.btn.sure { animation: sure .45s var(--ease); } /* the second "yes": it asks for attention once */
@keyframes sure { 30% { transform: rotate(-2deg) scale(1.04); } 60% { transform: rotate(1.5deg) scale(1.02); } }

.pick .text { cursor: pointer; }

/* ---------------------------------------------------------------- toast: a sticky note */

/* As wide as what's on it (at most the screen less a margin), in the middle; a long
   message wraps on the note, and its button goes under it when there's no room beside it. */
.toast {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 96px;
  display: none;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 18px;
  width: fit-content;
  max-width: min(calc(100vw - 32px), 560px);
  margin-inline: auto;
  padding: 10px 16px 11px;
  background: var(--note);
  color: var(--note-text);
  border-radius: 2px;
  box-shadow: 0 8px 20px rgba(60, 50, 10, .2);
  transform: rotate(-1deg);
  font: italic 500 17px/22px var(--serif);
  z-index: 45;
}
.toast > span { flex: 1 1 12em; min-width: 0; overflow-wrap: anywhere; }
.toast::before { /* a strip of tape holds it */
  content: "";
  position: absolute;
  top: -7px;
  left: 50%;
  width: 52px;
  height: 14px;
  margin-left: -26px;
  background: var(--tape-row);
  rotate: -3deg;
  pointer-events: none;
}
.toast.show { display: flex; }
.toast button {
  flex: none;
  border: 0;
  background: none;
  padding: 0;
  color: inherit;
  font: 600 13px/22px var(--sans);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.offline-note {
  position: fixed;
  top: 0; left: 0; right: 0;
  margin: 0;
  padding: 8px 16px;
  text-align: center;
  font-size: 13px;
  background: var(--note);
  color: var(--note-text);
  transform: translateY(-100%);
  transition: transform .3s var(--ease);
}
body.offline .offline-note { transform: none; }

/* A wide window (the laptop): a wider page, with things side by side. */
@media (min-width: 1040px) {
  :root { --page: 1104px; }
  .day-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 72px; align-items: start; }
  .lists-cols { max-width: 720px; }
  /* the Kalender's week: the seven days side by side, as columns on the paper */
  .cal-week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 10px; }
  .cal-week .cal-col { margin: 0; padding: 4px 8px 12px; min-height: 160px; }
  .cal-col .ag-label { padding-top: 6px; }
  .trash-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 48px; align-items: start; }
  .list-body { max-width: 720px; }
  .note { max-width: 72ch; }
  /* the tracker: name, then one square of paper per day, then the score */
  .tr-row { grid-template-columns: 288px repeat(var(--days), 24px); min-height: 48px; padding: 0; }
  .tr-name, .tr-name-wrap { grid-column: auto; }
  .tr-name { padding-right: 12px; padding-bottom: 0; }
  .tr-head .tr-name { display: block; }
  .tr-total { padding-top: 4px; }
  .tr-day .wd { font-size: 10px; line-height: 12px; }
  .tr-day .num { font-size: 13px; line-height: 18px; padding: 0 2px; letter-spacing: 0; }
}

@media (max-width: 420px) {
  .grip { display: none; } /* no room in the margin (and a finger scrolls): order things on the laptop */
  .page { padding: calc(32px + env(safe-area-inset-top)) calc(16px + env(safe-area-inset-right)) 144px calc(16px + env(safe-area-inset-left)); }
  .page-title { font-size: 42px; }
  .aside { gap: 10px; }
}

/* ---------------------------------------------------------------- bits of paper
   Explanations and cards are bits of paper stuck into the notebook, like the
   prullenbak's note and the cards of a folded chain: a white scrap, a little askew,
   held by a strip of tape (or a pin), its bottom edge torn off. Pointing at one (on
   the computer) straightens it a little, as if you pressed it down. */

/* on a yellow scrap everything is written as on a note: black text and the day's dark
   blue ink, also at night (where the ink is nearly white) */
.hint:not(.soft):not(.day-panel-hint), .empty, .login .hint, .make, .peek, .day-panel, .fab-item, .swipe-tray, .login-card {
  --ink: #1f3fa8;
  --ink-soft: rgba(31, 63, 168, .13);
  --graphite: var(--note-text);
  --pencil: rgba(58, 52, 23, .68);
  --pencil-soft: rgba(58, 52, 23, .32);
  --grid: rgba(58, 52, 23, .1);
  --grid-strong: rgba(58, 52, 23, .22);
  --paper: var(--note);
  --marker-ink: rgba(214, 150, 0, .4);
  --marker-soft: rgba(214, 150, 0, .3);
  --scribble-ink: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%231f3fa8' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.6 6.4L6.4 2.6 2.8 11.4 11.4 2.8 2.6 16.6 16.6 2.6 5.2 17.6 17.4 5.4 10.4 17.6 17.6 10.4 15.4 17.4'/%3E%3C/svg%3E");
  --skip-mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%237f8799' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 14.8C4.2 7.2 13 5.6 15.9 12.2'/%3E%3Cpath d='M12.2 11.6l3.8 1.1 1.2-3.7'/%3E%3C/svg%3E");
  --pause-mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23bfc6d2' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M7.2 5.2v9.6M12.8 5.2v9.6'/%3E%3C/svg%3E");
  color: var(--note-text);
}
.hint:not(.soft):not(.day-panel-hint), .empty, .login .hint {
  position: relative;
  width: fit-content;
  max-width: min(100%, 62ch);
  margin: 12px 0 22px;
  padding: 9px 14px 10px;
  background: var(--scrap);
  font: italic 500 15.5px/22px var(--serif);
  box-shadow: var(--scrap-shadow);
  rotate: -.5deg;
  transition: rotate .35s var(--ease), translate .35s var(--ease), box-shadow .3s;
  animation: slip-in .45s var(--ease) both;
}
.hint:not(.soft):not(.day-panel-hint) em, .empty em { color: var(--ink); }
.field .hint:not(.soft):nth-of-type(even), .empty:nth-of-type(even) { rotate: .45deg; }
/* the tape over its top, a bit to the left */
.hint:not(.soft):not(.day-panel-hint)::before, .login .hint::before, .hint.soft::before, .login-card::before {
  content: "";
  position: absolute;
  top: -7px;
  left: 22px;
  width: 50px;
  height: 15px;
  background: var(--tape);
  border-inline: 1px dashed rgba(0, 0, 0, .06);
  rotate: -5deg;
  pointer-events: none;
}
/* its bottom edge, torn off */
.hint:not(.soft):not(.day-panel-hint)::after, .empty::after, .login .hint::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -5px;
  height: 6px;
  background: var(--torn) 0 0 / 14px 6px repeat-x;
  pointer-events: none;
}
@keyframes slip-in { from { opacity: 0; translate: 0 -6px; rotate: -2deg; } }
@media (hover: hover) {
  .hint:not(.soft):not(.day-panel-hint):hover, .empty:hover { rotate: 0deg; translate: 0 -1px; }
}
/* an empty page: a scrap pinned to it */
.empty { font-size: 17px; line-height: 24px; }
.empty::before {
  content: "";
  position: absolute;
  top: -6px;
  left: 50%;
  width: 12px;
  height: 12px;
  margin-left: -6px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 32%, rgba(255, 255, 255, .75) 0 1.6px, transparent 2.4px), var(--ink);
  box-shadow: 1px 2px 2px rgba(0, 0, 0, .25);
}
.hint.soft { position: relative; box-shadow: var(--scrap-shadow); }

/* making something: a card of paper with a strip of tape, not a box */
.make {
  border: 0;
  border-radius: 2px;
  background: var(--scrap);
  box-shadow: var(--scrap-shadow);
  rotate: -.6deg;
}
.make + .make { rotate: .5deg; }
/* (light paper at night too, as the yellow ones: the day's colours are written on them) */
.make-habit, .fab-item.make-habit { background: var(--habit-note); }
.make-task, .fab-item.make-task { background: #fbe4df; }
.make-list, .fab-item.make-list { background: #e1f1da; }
:root[data-theme="dark"] :is(.make-task, .fab-item.make-task) { background: #e2bdb6; }
:root[data-theme="dark"] :is(.make-list, .fab-item.make-list) { background: #b5d2ab; }
.make::before {
  content: "";
  position: absolute;
  top: -7px;
  left: 50%;
  width: 46px;
  height: 14px;
  margin-left: -23px;
  background: var(--tape);
  border-inline: 1px dashed rgba(0, 0, 0, .06);
  rotate: 3deg;
  transition: rotate .35s var(--ease);
}
@media (hover: hover) { .make:hover { border-color: transparent; rotate: 0deg; box-shadow: 0 1px 0 rgba(43, 47, 54, .05), 0 14px 24px -10px rgba(31, 40, 70, .35); } }
@media (hover: hover) { .make:hover::before { rotate: -2deg; } }
:root[data-theme="dark"] .peek { --paper: #ecccc6; --torn: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 6' preserveAspectRatio='none'%3E%3Cpath d='M0 0h14v1.6L12.6 4.4 10.4 2.2 8.1 5.2 5.9 2.4 3.4 4.9 1.5 2.1 0 3.6z' fill='%23ecccc6'/%3E%3C/svg%3E"); }

/* a list unfolded by pointing at it: a card pinned under it, on the rosy paper of the tasks in it
   (light at night too: the day's colours are written on it) */
.peek {
  --paper: #fbe4df;
  --torn: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 6' preserveAspectRatio='none'%3E%3Cpath d='M0 0h14v1.6L12.6 4.4 10.4 2.2 8.1 5.2 5.9 2.4 3.4 4.9 1.5 2.1 0 3.6z' fill='%23fbe4df'/%3E%3C/svg%3E");
  border: 0;
  border-radius: 2px;
  background: var(--paper);
  box-shadow: 0 1px 0 rgba(43, 47, 54, .05), 0 18px 34px -12px rgba(31, 40, 70, .38);
}
.peek::before {
  content: "";
  position: absolute;
  top: -8px;
  left: 18px;
  width: 54px;
  height: 15px;
  background: var(--tape);
  border-inline: 1px dashed rgba(0, 0, 0, .06);
  rotate: -4deg;
}
.peek::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -5px;
  height: 6px;
  background: var(--torn) 0 0 / 14px 6px repeat-x;
}

/* a day picked on Gewoontes: a diary page taped in, torn off at the bottom */
.day-panel { border: 0; border-radius: 2px; background: var(--scrap); box-shadow: 0 1px 0 rgba(43, 47, 54, .05), 0 16px 30px -14px rgba(31, 40, 70, .35); }
.day-panel::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -5px;
  height: 6px;
  background: var(--torn) 0 0 / 14px 6px repeat-x;
}
.day-panel > .day-panel-title::before, .day-panel > .day-panel-title::after { /* two strips of tape on its top corners */
  content: "";
  position: absolute;
  top: -8px;
  width: 52px;
  height: 15px;
  background: var(--tape);
  border-inline: 1px dashed rgba(0, 0, 0, .06);
}
.day-panel > .day-panel-title::before { left: -12px; rotate: -32deg; }
.day-panel > .day-panel-title::after { right: -12px; rotate: 30deg; }

/* a sheet: a page with two strips of tape over its top edge */
.sheet-body { position: relative; }
.sheet-body::before, .sheet-body::after {
  content: "";
  position: absolute;
  top: -3px;
  width: 64px;
  height: 15px;
  background: var(--tape-paper);
  border-inline: 1px dashed rgba(0, 0, 0, .06);
  pointer-events: none;
}
.sheet-body::before { left: 26px; rotate: -3deg; }
.sheet-body::after { right: 80px; rotate: 2.5deg; }
.phone .sheet-body::before { position: static; rotate: none; border-inline: 0; } /* the grip on a phone (below) */
.phone .sheet-body::after { display: none; } /* a phone's sheet is torn out of the notebook instead */
.phone .sheet {
  border-radius: 0;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 7' preserveAspectRatio='none'%3E%3Cpath d='M0 7V3.4L1.5 4.9 3.4 2.1 5.9 4.6 8.1 1.8 10.4 4.8 12.6 2.6 14 5.4V7z' fill='black'/%3E%3C/svg%3E") 0 0 / 14px 7px repeat-x, linear-gradient(#000 0 0) 0 6px / 100% calc(100% - 6px) no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 7' preserveAspectRatio='none'%3E%3Cpath d='M0 7V3.4L1.5 4.9 3.4 2.1 5.9 4.6 8.1 1.8 10.4 4.8 12.6 2.6 14 5.4V7z' fill='black'/%3E%3C/svg%3E") 0 0 / 14px 7px repeat-x, linear-gradient(#000 0 0) 0 6px / 100% calc(100% - 6px) no-repeat;
}

/* signing in: the first page, taped in */
.login-card { position: relative; border: 0; border-radius: 2px; background: var(--scrap); box-shadow: var(--scrap-shadow); rotate: -.4deg; }
.login-card::before { left: 50%; margin-left: -30px; width: 60px; rotate: 2deg; }

/* the + on a phone deals out its choices as cards of paper */
.fab-item { border: 0; border-radius: 2px; background: var(--scrap); box-shadow: var(--scrap-shadow); }
.fab.open .fab-item { rotate: -1deg; }
.fab.open .fab-item:nth-child(even) { rotate: .8deg; }
.fab-item { transform: translateY(18px) rotate(6deg) scale(.9); transform-origin: 100% 100%; }

/* what you can do with a line, written on a strip of paper torn off along its left side */
.swipe-tray { background: var(--scrap); box-shadow: -6px 0 12px -8px rgba(31, 40, 70, .3); }
.swipe-act:first-child { border-left: 0; }

/* Vandaag: the parts of the day, pencilled in the margin */
.daypart {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 16px 0 2px;
  list-style: none;
  font: italic 500 15px/20px var(--serif);
  color: var(--pencil);
  animation: fade-in .3s ease;
}
.daypart:first-child { margin-top: 2px; }
.daypart .ico { width: 17px; height: 17px; color: var(--pencil); }
.daypart::after { content: ""; flex: 1; margin-left: 4px; border-top: 1.3px dashed var(--grid-strong); }
.daypart.now { color: var(--ink); }
.daypart.now .ico { color: var(--ink); }
.daypart-now { font: 600 10.5px/16px var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--ink); opacity: .8; }
.daypart .pencil { order: 3; margin-left: 4px; font: 13px/20px var(--sans); }
/* another part of the day than now: folded away as a stack of cards (tap to deal it out) */
.part-fold { list-style: none; margin: 6px 0 2px; }
.part-stack { margin-left: -6px; gap: 8px; }
.part-stack .part-ico { width: 16px; height: 16px; color: var(--pencil); }
.part-stack .stack-label { flex: none; font: italic 600 15px/20px var(--serif); color: var(--graphite); }
.part-when { flex: none; font: 12px/16px var(--sans); color: var(--pencil); }

/* Gewoontes: the parts of the day pencilled across the tracker; a dragged habit lands in the one above it */
.tr-row.tr-part {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 0;
  margin: 18px 0 2px;
  padding: 0;
}
.tr-row.tr-part:first-of-type, .tr-head + .tr-row.tr-part { margin-top: 6px; }
.tr-part-name { display: inline-flex; flex: none; align-items: center; gap: 7px; font: italic 600 17px/24px var(--serif); color: var(--ink); }
.tr-part-name .ico { width: 18px; height: 18px; }
.tr-part::after { content: ""; flex: 1; border-top: 1.3px dashed var(--grid-strong); }
.tr-part-empty { order: 2; flex: none; font: italic 400 14px/20px var(--serif); color: var(--pencil); }
.tr-part.empty-part { padding-bottom: 6px; }

/* a task's deeltaken: hooked under it in pencil, a step in, each a small task of its own
   (its box ticked in pen, its title struck through, its day and duration on the right) */
.task:has(> .subs) { flex-wrap: wrap; row-gap: 0; }
.subs { flex-basis: 100%; display: flex; flex-direction: column; margin: -4px 0 6px; padding: 0 0 0 34px; list-style: none; }
.sub { position: relative; display: flex; align-items: center; gap: 11px; min-height: 34px; }
.sub::before { /* the hook from the task above */
  content: "";
  position: absolute;
  left: -24px;
  top: 4px; /* from just under the task's box */
  width: 17px;
  height: 13px;
  border-left: 1.5px solid var(--pencil-soft);
  border-bottom: 1.5px solid var(--pencil-soft);
  border-bottom-left-radius: 7px;
  pointer-events: none;
}
.sub + .sub::before { top: -17px; height: 34px; } /* on from the one above */
.sub .box { width: 16px; height: 16px; border-width: 1.4px; }
.sub .box svg { left: -2px; top: -4px; width: 19px; height: 19px; }
.sub .box .tick path { stroke-width: 2.3; }
.sub:nth-child(2n) .box { rotate: 1.2deg; }
.sub:nth-child(2n + 1) .box { rotate: -.8deg; }
.sub-text {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  padding: 4px 0;
  border: 0;
  background: none;
  text-align: left;
  cursor: pointer;
  transition: transform .25s var(--ease);
}
.sub-text:active { transform: translateX(2px) scale(.99); }
.sub .title { font: italic 400 17px/22px var(--serif); color: var(--graphite); }
@media (hover: hover) { .sub-text:hover .title { color: var(--ink); } }
.sub-text:focus-visible .edit-hint { opacity: .75; transform: none; }
@media (hover: hover) { .sub-text:hover .edit-hint { opacity: .75; transform: none; } }
@media (hover: hover) { .sub-text:hover .edit-hint .ico path { animation: redraw .45s cubic-bezier(.5, .1, .3, 1) .05s both; } }
.sub .edit-hint .ico { width: 13px; height: 13px; }
.sub-aside { flex: none; display: flex; align-items: center; gap: 10px; margin-left: auto; }
.sub .time { font: italic 500 14px/20px var(--serif); }
.sub .time.late { color: var(--ink); } /* its day has passed: in ink, not in red */
.sub.later .title { color: var(--pencil); } /* on Vandaag: one for a day still to come */
/* a task crossed off ticks its deeltaken with it only when they are done themselves */
.task.is-done .sub:not(.is-done) .box .tick path { stroke-dashoffset: 1; opacity: 0; }
.task.is-done .sub:not(.is-done) .strike path { stroke-dashoffset: 1; opacity: 0; }
.task.is-done .sub:not(.is-done) .title { color: var(--graphite); }
.sub.is-done .title, .task.is-done .sub .title { color: var(--pencil); }
/* a new one written on the line under them */
.sub-write .ghost-box { width: 16px; height: 16px; }
.sub-line {
  flex: 1;
  min-width: 0;
  padding: 5px 0 4px;
  border: 0;
  border-bottom: 1.3px solid var(--graphite);
  background: transparent;
  outline: none;
  font: italic 400 17px/22px var(--serif);
  color: var(--ink);
}
.sub-line::placeholder { color: var(--pencil); opacity: .85; }
.sub-more { position: relative; display: flex; min-height: 28px; }
.sub-more::before {
  content: "";
  position: absolute;
  left: -24px;
  top: -17px;
  width: 17px;
  height: 31px;
  border-left: 1.5px dashed var(--pencil-soft);
  border-bottom: 1.5px dashed var(--pencil-soft);
  border-bottom-left-radius: 7px;
  pointer-events: none;
}
.sub-add {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px 2px 0;
  border: 0;
  background: none;
  font: italic 500 15px/22px var(--serif);
  color: var(--pencil);
  cursor: pointer;
  transition: color .15s, opacity .18s;
}
.sub-add .ico { width: 14px; height: 14px; stroke-width: 2; }
@media (hover: hover) { .sub-add:hover { color: var(--ink); } }
@media (hover: hover) { .sub-add:hover .ico path { animation: redraw .4s var(--ease); } }
/* on a computer the line to add one is pencilled in when you point at the task */
@media (hover: hover) {
  .task .sub-more { opacity: 0; transition: opacity .18s; }
  .task:hover .sub-more, .task:focus-within .sub-more { opacity: 1; }
}
body.dragging .sub-more { opacity: 0; }

/* in the task's sheet: each deeltaak on its own pencil line, its day, time, duration and
   priority folding open under it */
.sub-edit { display: flex; flex-direction: column; margin: 0 0 4px; padding: 0; list-style: none; }
.sub-ed-line { display: flex; align-items: center; gap: 12px; }
.sub-ed .box { width: 18px; height: 18px; }
.sub-ed .box svg { left: -2px; top: -4px; width: 21px; height: 21px; }
.sub-ed.is-done .box { border-color: var(--ink); }
.sub-ed.is-done .box .tick path { stroke-dashoffset: 0; opacity: 1; transition-delay: 0s; }
.sub-ed .sub-title { flex: 1; min-width: 0; font-size: 19px; line-height: 26px; padding: 6px 0; border-bottom-color: var(--pencil-soft); }
.sub-ed .sub-title:focus { border-bottom-color: var(--ink); }
.sub-ed.is-done .sub-title { color: var(--pencil); text-decoration: line-through 1.6px var(--ink); }
.sub-ed .sub-open {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: none;
  max-width: 45%;
  padding: 6px 0 6px 6px;
  border: 0;
  background: none;
  cursor: pointer;
}
.sub-meta { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: italic 500 14px/20px var(--serif); color: var(--pencil); animation: write .5s cubic-bezier(.45, .05, .25, 1) both; }
@media (hover: hover) { .sub-ed .sub-open:hover .sub-meta, .sub-ed .sub-open:hover .when-caret { color: var(--ink); } }
.sub-ed .sub-open[aria-expanded="true"] .when-caret { transform: rotate(90deg); }
.sub-details { margin: 2px 0 10px 30px; padding: 2px 0 0 14px; border-left: 1.5px solid var(--pencil-soft); }
.sub-details .field { margin-bottom: 10px; }
.sub-ed-acts { margin: 0 0 4px; }
.sub-new { display: flex; align-items: center; gap: 12px; }
.sub-new-plus { flex: none; display: grid; place-items: center; width: 18px; height: 18px; color: var(--pencil); }
.sub-new-plus .ico { width: 16px; height: 16px; stroke-width: 2; }
.sub-new .line { flex: 1; min-width: 0; font-size: 19px; line-height: 26px; padding: 6px 0; }
.sub-chips { margin: 6px 0 0 30px; min-height: 0; }

/* a small box ticked in pen (what Claude found in your thoughts, to pick) */
.step-box { position: relative; flex: none; width: 15px; height: 15px; border: 1.3px solid var(--pencil); border-radius: 3px; }
.step-box .tick { position: absolute; inset: -4px -3px -2px -2px; width: calc(100% + 7px); height: calc(100% + 6px); fill: none; stroke: var(--ink); stroke-width: 2.3; stroke-linecap: round; stroke-linejoin: round; overflow: visible; }
.step-box .tick path { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset .3s cubic-bezier(.6, .05, .3, 1); }

/* the week's times: what you thought, and (written in) what it took */
.times { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.times-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 2px 16px; padding: 6px 0 8px; border-bottom: 1.3px dashed var(--grid-strong); }
.times-what { display: flex; flex-direction: column; min-width: 0; }
.times-title { font: italic 500 18px/24px var(--serif); color: var(--graphite); overflow-wrap: anywhere; }
.times-of { font: 400 12.5px/18px var(--sans); color: var(--pencil); }
.times-real { display: inline-flex; align-items: baseline; gap: 10px; margin-left: auto; }
.times-usually { font: 400 13px/20px var(--sans); color: var(--pencil); }
.times-real .dur-line { gap: 2px 12px; }
.times-real .dur-in { width: 2em; font-size: 19px; line-height: 24px; }
.times-verdict { margin: 10px 0 0; }

/* a duration: hours and minutes, each written on its own short pencil line */
.dur-line { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 18px; }
.dur-part { display: inline-flex; align-items: baseline; gap: 7px; cursor: text; }
.dur-in {
  width: 2.4em;
  padding: 2px 0 3px;
  border: 0;
  border-bottom: 1.5px solid var(--graphite);
  border-radius: 0;
  background: transparent;
  outline: none;
  text-align: center;
  font: italic 500 22px/28px var(--serif);
  font-variant-numeric: lining-nums;
  color: var(--ink);
  transition: border-color .2s;
}
.dur-in:focus { border-bottom-color: var(--ink); }
.dur-in::placeholder { color: var(--pencil-soft); }
.dur-unit { font: 400 14px/20px var(--sans); color: var(--pencil); }
.dur { color: var(--pencil); }
.h2-sum { margin-left: 12px; font: 400 13px/20px var(--sans); color: var(--pencil); vertical-align: middle; }

/* your week, to send: the text on a yellow note, as it will read */
.week-nav { margin: -6px 0 6px; }
.week-preview {
  position: relative;
  margin: 14px 0 6px;
  padding: 14px 18px 16px;
  background: var(--note);
  color: var(--note-text);
  font: 15px/23px var(--sans);
  white-space: pre-wrap;
  box-shadow: var(--scrap-shadow);
  rotate: -.4deg;
}
.week-preview::before { content: ""; position: absolute; top: -8px; left: 50%; width: 70px; height: 16px; margin-left: -35px; background: var(--tape); border-inline: 1px dashed rgba(0, 0, 0, .06); rotate: -2deg; }

/* Gewoontes: the graduated habits, folded away at the bottom under a cap */
.grad-block { margin-top: 28px; }
.grad-head {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 0;
  border: 0;
  border-top: 1.3px dashed var(--grid-strong);
  background: none;
  text-align: left;
  cursor: pointer;
}
.grad-head > .ico { width: 22px; height: 22px; color: var(--ink); }
.grad-title { font: italic 600 20px/26px var(--serif); color: var(--ink); }
.grad-count { font: 13px/20px var(--sans); color: var(--pencil); }
.grad-caret { margin-left: auto; color: var(--pencil); transition: transform .3s var(--ease); }
.grad-caret .ico { width: 18px; height: 18px; }
.grad-head[aria-expanded="true"] .grad-caret { transform: rotate(90deg); }
.grad-block .note { margin: 16px 0 18px; }
.grad-row { gap: 14px; }
.grad-row .title { font-size: 19px; }
.grad-week { display: inline-flex; gap: 3px; margin-left: auto; }
.grad-week .tc.mini { width: 15px; margin: 0; }
.grad-row .aside { margin-left: 12px; }

/* looking back on the week: three questions, three remarks from Claude on yellow scraps */
.review-q { margin-top: 18px; }
.review-input, .thoughts-input { width: 100%; resize: vertical; font: italic 400 17px/24px var(--serif); }
.remarks { display: flex; flex-direction: column; gap: 14px; margin: 10px 0 14px; padding: 0; list-style: none; counter-reset: remark; }
.remark {
  position: relative;
  padding: 10px 14px 11px 38px;
  background: var(--note);
  color: var(--note-text);
  font: italic 500 16px/23px var(--serif);
  box-shadow: var(--scrap-shadow);
  rotate: -.4deg;
  animation: slip-in .45s var(--ease) both;
}
.remark:nth-child(2) { rotate: .5deg; animation-delay: .12s; }
.remark:nth-child(3) { rotate: -.3deg; animation-delay: .24s; }
.remark::before { counter-increment: remark; content: counter(remark); position: absolute; left: 14px; top: 10px; font: 600 15px/23px var(--serif); color: #1f3fa8; }
.thinking { margin: 10px 0; font: italic 500 16px/22px var(--serif); color: var(--ink); }
.thinking span { animation: dot 1.2s ease-in-out infinite; }
.thinking span:nth-child(2) { animation-delay: .2s; }
.thinking span:nth-child(3) { animation-delay: .4s; }
@keyframes dot { 0%, 60%, 100% { opacity: .2; } 30% { opacity: 1; } }
/* thoughts cut up: what Claude proposes, each to pick or not */
.proposal .label { display: block; margin: 16px 0 6px; }
.picks { display: flex; flex-direction: column; gap: 4px; margin: 0; padding: 0; list-style: none; }
.pick { display: flex; align-items: flex-start; gap: 10px; width: 100%; padding: 5px 2px; border: 0; background: none; text-align: left; cursor: pointer; }
.pick .step-box { margin-top: 4px; }
.pick.on .tick path { stroke-dashoffset: 0; }
.pick-text { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; min-width: 0; }
.pick-title { font: italic 500 17px/24px var(--serif); color: var(--graphite); }
.pick:not(.on) .pick-title { color: var(--pencil); text-decoration: line-through 1px var(--pencil-soft); }
.chip { padding: 0 7px; border-radius: 9px; background: var(--ink-soft); font: 12px/20px var(--sans); color: var(--ink); }

/* notifications: a row per part of the day, its name and the times to pick */
.notify-says { margin: -2px 0 6px; font: 400 13.5px/20px var(--sans); color: var(--pencil); }

/* the habits done today: a stack of cards at the end (like a folded chain) */
.done-fold { list-style: none; margin-top: 10px; }
.done-stack { margin-left: -6px; }
.done-stack .stack-label { flex: none; font: 600 11px/16px var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--ink); }
.done-away { list-style: none; margin: 6px 0 0; }

/* ---------------------------------------------------------------- paper: everything a bit of paper

   The notebook is full of bits of paper, drawn a little cartoonish: each task a slip
   torn off a notepad (its bottom edge torn, a strip of tape on it), each habit a yellow
   sticky note, each list an index card with a dog-ear, each choice a small paper tag,
   each button a sticker; headings are written on washi tape. A little askew, each one
   its own way, with a flat shadow as if cut out and stuck down. */

:root {
  --slip: #fff8dd; /* notepad paper, a little yellow (today in the Kalender, the weekend) */
  --card: #fffefa; /* a tag, a card */
  /* each kind of thing its own colour of paper (the user picked them: almost everything was yellow):
     habits light blue sticky notes, tasks slips with a rosy glow, lists greenish index cards,
     headings lilac washi; what the app tells you stays on yellow notes */
  --habit-note: #dde9fb; /* a habit's sticky note */
  --task-paper: #fbe4df; /* a task's slip */
  --list-paper: #e1f1da; /* a list's index card */
  --washi: rgba(184, 163, 245, .45); /* washi tape a heading is written on */
  --torn-task: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 6' preserveAspectRatio='none'%3E%3Cpath d='M0 0h14v1.6L12.6 4.4 10.4 2.2 8.1 5.2 5.9 2.4 3.4 4.9 1.5 2.1 0 3.6z' fill='%23fbe4df'/%3E%3C/svg%3E");
  --tape-row: rgba(214, 204, 168, .62); /* tape on a slip or a note (white tape wouldn't show on it) */
  --sticker-shadow: 1.5px 2.5px 0 rgba(58, 52, 23, .13), 0 7px 14px -9px rgba(58, 52, 23, .4);
  --sticker-lift: 2.5px 4px 0 rgba(58, 52, 23, .13), 0 12px 20px -10px rgba(58, 52, 23, .45);
  --torn-slip: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 6' preserveAspectRatio='none'%3E%3Cpath d='M0 0h14v1.6L12.6 4.4 10.4 2.2 8.1 5.2 5.9 2.4 3.4 4.9 1.5 2.1 0 3.6z' fill='%23fff8dd'/%3E%3C/svg%3E");
  --torn-bar: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 6' preserveAspectRatio='none'%3E%3Cpath d='M0 6h14V4.4L12.6 1.6 10.4 3.8 8.1.8 5.9 3.6 3.4 1.1 1.5 3.9 0 2.4z' fill='%23fafbfd'/%3E%3C/svg%3E");
}
:root[data-theme="dark"] {
  --slip: #2e2c24;
  --card: #232631;
  --habit-note: #aec3e6;
  --task-paper: #3b2a2c;
  --list-paper: #26352a;
  --washi: rgba(160, 138, 238, .3);
  --torn-task: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 6' preserveAspectRatio='none'%3E%3Cpath d='M0 0h14v1.6L12.6 4.4 10.4 2.2 8.1 5.2 5.9 2.4 3.4 4.9 1.5 2.1 0 3.6z' fill='%233b2a2c'/%3E%3C/svg%3E");
  --tape-row: rgba(255, 255, 255, .22);
  --sticker-shadow: 1.5px 2.5px 0 rgba(0, 0, 0, .4), 0 8px 16px -9px rgba(0, 0, 0, .7);
  --sticker-lift: 2.5px 4px 0 rgba(0, 0, 0, .4), 0 14px 22px -10px rgba(0, 0, 0, .75);
  --torn-slip: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 6' preserveAspectRatio='none'%3E%3Cpath d='M0 0h14v1.6L12.6 4.4 10.4 2.2 8.1 5.2 5.9 2.4 3.4 4.9 1.5 2.1 0 3.6z' fill='%232e2c24'/%3E%3C/svg%3E");
  --torn-bar: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 6' preserveAspectRatio='none'%3E%3Cpath d='M0 6h14V4.4L12.6 1.6 10.4 3.8 8.1.8 5.9 3.6 3.4 1.1 1.5 3.9 0 2.4z' fill='%23151821'/%3E%3C/svg%3E");
}

/* the yellow ones: what's written on them in the day's colours, also at night */
.rows > .row.habit, .habit-line .tr-name, .pill.on, .day-strip .ds-day.sel {
  --ink: #1f3fa8;
  --ink-soft: rgba(31, 63, 168, .13);
  --graphite: var(--note-text);
  --pencil: rgba(58, 52, 23, .68);
  --pencil-soft: rgba(58, 52, 23, .32);
  --grid-strong: rgba(58, 52, 23, .22);
  --marker-ink: rgba(214, 150, 0, .4);
  --marker-soft: rgba(214, 150, 0, .3);
  --scribble-ink: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%231f3fa8' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.6 6.4L6.4 2.6 2.8 11.4 11.4 2.8 2.6 16.6 16.6 2.6 5.2 17.6 17.4 5.4 10.4 17.6 17.6 10.4 15.4 17.4'/%3E%3C/svg%3E");
}

/* ---- a task: a slip torn off a notepad */
.rows > .row.task {
  --tilt: -.45deg;
  margin: 0 0 14px;
  padding: 6px 14px 8px 12px;
  background: var(--task-paper);
  border-radius: 2px 2px 0 0;
  box-shadow: var(--sticker-shadow);
  rotate: var(--tilt);
  transition: rotate .3s var(--ease), translate .3s var(--ease), box-shadow .3s var(--ease);
}
.rows > .row.task:nth-child(3n + 2) { --tilt: .35deg; }
.rows > .row.task:nth-child(3n) { --tilt: -.15deg; }
.rows > .row.task::before { /* a strip of tape */
  content: "";
  position: absolute;
  z-index: 1;
  inset: -7px auto auto 16px;
  width: 40px;
  height: 14px;
  border-radius: 0;
  background: var(--tape-row);
  border-inline: 1px dashed rgba(0, 0, 0, .06);
  box-shadow: none;
  opacity: 1;
  transform: none;
  rotate: -6deg;
  pointer-events: none;
}
.rows > .row.task:nth-child(2n)::before { left: auto; right: 26px; rotate: 5deg; }
.rows > .row.task::after { /* its bottom edge, torn off */
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -5px;
  height: 6px;
  background: var(--torn-task) 0 0 / 14px 6px repeat-x;
  pointer-events: none;
}
.rows > .row.task.is-done { box-shadow: 1px 1.5px 0 rgba(58, 52, 23, .1); }
.rows > .row.task.ghost { background: none; box-shadow: inset 0 0 0 1.3px var(--grid-strong); border-style: dashed; }
.rows > .row.task.ghost::before, .rows > .row.task.ghost::after { display: none; }
@media (hover: hover) {
  .rows > .row.task:hover { rotate: 0deg; translate: 0 -1px; box-shadow: var(--sticker-lift); }
}

/* ---- a habit: a yellow sticky note, a bit of tape over its top */
.rows > .row.habit {
  --tilt: .45deg;
  margin: 0 0 14px;
  padding: 7px 12px 8px;
  background: var(--habit-note);
  color: var(--note-text);
  border-radius: 1px 1px 4px 2px;
  box-shadow: var(--sticker-shadow);
  rotate: var(--tilt);
  transition: rotate .3s var(--ease), translate .3s var(--ease), box-shadow .3s var(--ease);
}
.rows > .row.habit:nth-child(2n) { --tilt: -.5deg; }
.rows > .row.habit:nth-child(3n) { --tilt: .1deg; }
.rows > .row.habit::after { /* the tape */
  content: "";
  position: absolute;
  top: -7px;
  left: 50%;
  width: 46px;
  height: 14px;
  margin-left: -23px;
  background: var(--tape-row);
  border-inline: 1px dashed rgba(0, 0, 0, .06);
  rotate: 3deg;
  pointer-events: none;
}
.rows > .row.habit:nth-child(2n)::after { rotate: -4deg; margin-left: -8px; }
.rows > .row.habit.tied { margin-left: calc(var(--depth) * 26px); padding-left: 12px; }
.rows > .row.habit.tied::before { left: -19px; top: -10px; height: 32px; }
.rows > .row.habit.is-skipped, .rows > .row.habit.is-rest { opacity: .78; }
@media (hover: hover) {
  .rows > .row.habit:hover { rotate: 0deg; translate: 0 -1px; box-shadow: var(--sticker-lift); }
}

/* ---- Plan je dag's "als ..., dan ...": a habit for today only, on a sticky note of another colour */
.rows > .row.habit.once { background: var(--habit-note); outline: 1.5px dashed rgba(31, 63, 168, .4); outline-offset: -5px; --tilt: -.7deg; }
.rows > .row.habit.once .cue { font-style: italic; }
.rows > .row.habit.once, .memo-paper { /* (light paper at night too: the day's colours on it) */
  --ink: #1f3fa8;
  --ink-soft: rgba(31, 63, 168, .13);
  --graphite: var(--note-text);
  --pencil: rgba(40, 46, 70, .66);
  --pencil-soft: rgba(40, 46, 70, .3);
  --grid-strong: rgba(40, 46, 70, .22);
}

/* ---- Plan je dag's note to yourself: a scrap of a yellow lined pad, taped in at the bottom of Vandaag */
.memo { margin: 34px 0 0; }
.memo-paper {
  position: relative;
  display: block;
  width: min(100%, 460px);
  margin: 0 auto 0 0;
  padding: 22px 22px 22px 30px;
  border: 0;
  border-radius: 1px 2px 3px 2px;
  background:
    linear-gradient(90deg, transparent 18px, rgba(40, 46, 70, .16) 18px 19px, transparent 19px),
    repeating-linear-gradient(transparent 0 25px, rgba(31, 63, 168, .13) 25px 26px) 0 20px / 100% calc(100% - 20px) no-repeat,
    var(--note);
  color: var(--note-text);
  text-align: left;
  font: italic 500 18px/26px var(--serif);
  box-shadow: var(--scrap-shadow);
  rotate: -1.2deg;
  cursor: pointer;
  transition: rotate .3s var(--ease), translate .3s var(--ease);
}
.memo-paper::before { /* tape */
  content: "";
  position: absolute;
  top: -9px;
  left: 50%;
  width: 70px;
  height: 18px;
  margin-left: -35px;
  background: var(--tape-row);
  border-inline: 1px dashed rgba(0, 0, 0, .06);
  rotate: 3deg;
}
.memo-text { display: block; white-space: pre-wrap; overflow-wrap: anywhere; }
@media (hover: hover) { .memo-paper:hover { rotate: -.4deg; translate: 0 -1px; } }
.memo-paper:active { translate: 0 1px; }

/* ---- what was put aside today: a small index card at the bottom of Vandaag, each with what it
   means and the choice turned round */
.aside-card {
  position: relative;
  width: min(100%, 520px);
  margin: 30px 0 0;
  padding: 12px 16px 8px;
  border-radius: 2px 3px 3px 2px;
  background: var(--card);
  box-shadow: var(--sticker-shadow), inset 0 3px 0 -1px var(--ink-soft);
  rotate: .4deg;
}
.aside-title { display: flex; align-items: center; gap: 7px; margin: 0 0 4px; font: italic 600 17px/22px var(--serif); color: var(--ink); }
.aside-title .ico { width: 17px; height: 17px; }
.aside-rows { margin: 0; padding: 0; list-style: none; }
.aside-row { display: flex; align-items: center; gap: 12px; padding: 6px 0; }
.aside-row + .aside-row { border-top: 1px dashed var(--grid-strong); }
.aside-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.aside-name { font: italic 500 16.5px/21px var(--serif); color: var(--graphite); overflow-wrap: anywhere; }
.aside-what { font: 400 12px/16px var(--sans); color: var(--pencil); }
.aside-row .pencil { flex: none; font-size: 13.5px; color: var(--ink); }
.phone .aside-row .pencil { padding: 8px 0 10px; font-size: 14.5px; }

/* ---- Plan je dag (the sheet): its choices per list; a list or a task can be left out of them */
.plan-group + .plan-group { margin-top: 14px; }
.plan-from { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0 0 2px; }
.plan-list { font: italic 600 16px/22px var(--serif); color: var(--graphite); }
.plan-from .pencil { font-size: 13px; }
.plan-x { flex: none; width: 28px !important; height: 28px !important; margin-left: 6px; }
.plan-x .ico { width: 14px !important; height: 14px !important; }
.pick .aside { display: flex; align-items: center; gap: 6px; }
.plan-skipped .acts { gap: 6px 8px; }
.plan-skipped .act.quiet { box-shadow: inset 0 0 0 1px var(--grid-strong); }
.plan-if .sentence-form { margin: 2px 0 6px; }
.plan-memo textarea { resize: vertical; min-height: 78px; font: italic 500 18px/26px var(--serif); }
.plan-memo .hint-inline { display: block; margin-top: 6px; }

/* ---- out of sight: what you'd rather not see has a small tag in a row at the bottom of the
   page or sheet (ui.js tuckedStrip()); tap it and it's back in its own place. "aanpassen": each
   part gets a "verbergen" sticker, each choice in a sheet a small cross (or a plus, once it's
   away), and is tapped away or back. */
.tucked-strip { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 30px 0 0; }
.tucked-head { display: inline-flex; align-items: center; gap: 5px; margin-right: 4px; font: 400 12.5px/18px var(--sans); color: var(--pencil); }
.tucked-head .ico { width: 15px; height: 15px; }
.sheet-body .tucked-strip { margin: 0 0 22px; }
.tucked.choice { border-style: dotted; font-style: italic; } /* a choice put away (a part put away: dashed) */
.tucked {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px 4px 8px;
  border: 1.2px dashed var(--grid-strong);
  border-radius: 3px;
  background: color-mix(in srgb, var(--card) 70%, transparent);
  color: var(--pencil);
  font: 400 12.5px/18px var(--sans);
  white-space: nowrap;
  rotate: -.6deg;
  transition: color .2s, border-color .2s, translate .2s var(--ease);
}
@media (hover: hover) { .tucked:hover { color: var(--ink); border-color: var(--ink); translate: 0 -1px; } }
.tucked:active { translate: 0 1px; }

[data-tailor] { position: relative; outline: 1.5px dashed rgba(31, 63, 168, .45); outline-offset: 6px; border-radius: 3px; }
.tailor-x {
  position: absolute;
  top: -21px;
  right: -8px;
  /* (no z-index: it stays under the tab bar and a sheet's buttons) */
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px 4px 8px;
  border: 0;
  border-radius: 4px;
  background: #fff3a6;
  color: #1f3fa8;
  box-shadow: inset 0 0 0 1.3px #1f3fa8, 1.5px 2px 0 rgba(31, 63, 168, .2);
  font: 600 12.5px/18px var(--sans);
  white-space: nowrap;
  rotate: 1.5deg;
  animation: fade-in .2s ease both;
}
.tailor-x .ico { width: 15px; height: 15px; }
.tailor-x.tailor-inline { position: static; rotate: -1deg; } /* a part with no one place of its own: the sticker sits in the flow */
.tracker.no-cells .tr-row { grid-template-columns: minmax(0, 1fr); } /* only the names: no room kept for the days */
.tracker.no-cells .tr-row > .tr-name-wrap { max-width: 520px; }
.tailor-x:active { translate: 0 1px; }
h2 [data-tailor] { outline-offset: 3px; }
h2 .tailor-x { top: -24px; }

/* the switch for it, top right on the page: a paper page marker stuck on the notebook, its
   end coloured in as on a sticky index flag; yellow all over while it's on */
.kicker-line { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.kicker-line .kicker { min-width: 0; }
.tailor-flag {
  position: relative;
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: -7px -4px -7px 0; /* (the title stays where it was) */
  padding: 4px 13px 5px 19px;
  border: 0;
  border-radius: 1px 3px 4px 1px;
  background: var(--card);
  color: var(--graphite);
  font: italic 500 15px/20px var(--serif);
  white-space: nowrap;
  box-shadow: inset 0 0 0 1.1px var(--grid-strong), 1.5px 2px 0 rgba(58, 52, 23, .12);
  rotate: 1.4deg;
  transition: rotate .3s var(--ease), translate .25s var(--ease), box-shadow .2s, background-color .2s, color .2s;
}
.tailor-flag::before { /* its coloured end */
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 9px;
  border-radius: 1px 0 0 1px;
  background: var(--marker);
  box-shadow: inset -1px 0 0 rgba(58, 52, 23, .12);
  transition: background-color .2s;
}
.tailor-flag::after { /* a bit of tape holding it */
  content: "";
  position: absolute;
  top: -5px;
  left: 2px;
  width: 22px;
  height: 10px;
  background: var(--tape-row);
  rotate: -18deg;
  pointer-events: none;
}
.tailor-flag .ico { width: 16px; height: 16px; color: var(--ink); }
@media (hover: hover) {
  .tailor-flag:hover { rotate: 0deg; translate: 0 -1px; box-shadow: inset 0 0 0 1.2px var(--ink), 2px 3px 0 rgba(31, 63, 168, .18); }
  .tailor-flag:hover .ico path { animation: redraw .45s cubic-bezier(.5, .1, .3, 1) both; }
}
.tailor-flag:active { translate: 0 1px; }
.tailor-flag.on { background: #fff3a6; color: #3a3417; box-shadow: inset 0 0 0 1.3px #1f3fa8, 1.5px 2px 0 rgba(31, 63, 168, .2); rotate: -1deg; }
.tailor-flag.on::before { background: #1f3fa8; }
.tailor-flag.on .ico { color: #1f3fa8; }
.tailor-note { margin-bottom: 30px; animation-duration: .18s; }
.sheet-body .tailor-note { margin: -6px 0 26px; }

.sheet-head .sheet-tailor { align-self: flex-start; flex: none; width: 36px; height: 36px; margin: -4px 0 0; }
.sheet-head .sheet-tailor .ico { width: 18px; height: 18px; }
.pill.tailoring { display: inline-flex; align-items: center; gap: 7px; padding-right: 6px; }
.choice-mark { display: inline-grid; place-items: center; width: 18px; height: 18px; margin-bottom: -3px; border-radius: 50%; background: var(--ink-soft); color: var(--ink); }
.choice-mark .ico { width: 11px; height: 11px; stroke-width: 2.4; }
.pill.tailoring.is-away { background: transparent; color: var(--pencil); box-shadow: none; outline: 1.2px dashed var(--grid-strong); outline-offset: -1px; }
.pill.tailoring.is-away > :not(.choice-mark), .pill.tailoring.is-away { text-decoration: line-through 1px var(--pencil-soft); }
.pill.tailoring.is-away .choice-mark { text-decoration: none; }

/* ---- a list: an index card with a dog-ear */
.toc-list { margin: 0; }
.toc-list > .toc, .pockets > .toc {
  margin: 0 0 12px;
  padding: 4px 12px;
  background: var(--list-paper);
  border-radius: 3px 2px 3px 3px;
  box-shadow: var(--sticker-shadow), inset 0 3px 0 -1px var(--ink-soft);
  rotate: -.3deg;
  transition: rotate .3s var(--ease), translate .3s var(--ease), box-shadow .3s var(--ease);
}
.toc-list > .toc:nth-child(2n), .pockets > .toc:nth-child(2n) { rotate: .35deg; }
.toc-list > .toc::after, .pockets > .toc::after { /* its corner, folded over */
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 15px;
  height: 15px;
  background: linear-gradient(225deg, var(--paper) 50%, var(--grid-strong) 50%);
  border-bottom-left-radius: 3px;
  pointer-events: none;
}
.toc.peeking, .toc:has(:focus-visible) { background: var(--list-paper); }
@media (hover: hover) { .toc:hover { background: var(--list-paper); } }
@media (hover: hover) {
  .toc-list > .toc:hover, .pockets > .toc:hover, .toc.peeking { rotate: 0deg; translate: 0 -1px; box-shadow: var(--sticker-lift), inset 0 3px 0 -1px var(--ink-soft); }
}
.pockets > .toc { background: var(--list-paper); box-shadow: var(--sticker-shadow); }
.pockets { margin-inline: 0; }

/* ---- a choice: a small paper tag; the one picked is yellow, its line drawn under it */
.pills { gap: 8px; margin: 0; }
.pill {
  padding: 3px 11px 7px;
  background: var(--card);
  border-radius: 3px;
  box-shadow: inset 0 0 0 1.2px var(--grid-strong), 1px 1.5px 0 rgba(58, 52, 23, .1);
  rotate: -.5deg;
  transition: color .2s, background-color .2s, box-shadow .2s, rotate .25s var(--ease), translate .25s var(--ease);
}
.pill:nth-child(2n) { rotate: .45deg; }
.pill:nth-child(3n) { rotate: -.15deg; }
.pill.on { background: var(--note); color: var(--ink); box-shadow: inset 0 0 0 1.4px var(--ink), 1.5px 2px 0 rgba(31, 63, 168, .2); rotate: 0deg; }
@media (hover: hover) {
  .pill:not(.on):hover { translate: 0 -1px; box-shadow: inset 0 0 0 1.2px var(--ink), 1.5px 2.5px 0 rgba(58, 52, 23, .12); }
}
.pill:active { translate: 0 1px; }
.agenda-top .pills, .calendar .agenda-top .pills { margin: 0; }
/* on a yellow note the words themselves are the choice, as before */
.note .pill, .note.says .pill { background: none; box-shadow: none; rotate: none; translate: none; }
.note .pills { gap: 2px 4px; margin: 0 -8px; }

/* ---- doing something: a sticker; the main one an ink stamp */
.act {
  border: 0;
  border-radius: 4px;
  background: var(--card);
  box-shadow: inset 0 0 0 1.3px var(--grid-strong), 1.5px 2px 0 rgba(58, 52, 23, .12);
  rotate: -.4deg;
}
.act:nth-child(2n) { rotate: .4deg; }
@media (hover: hover) { .act:hover { box-shadow: inset 0 0 0 1.4px var(--ink), 2px 3px 0 rgba(31, 63, 168, .18); } }
.act.quiet { background: none; box-shadow: none; }
/* an icon on its own (the bell, search, edit, archive …) is a round paper button stuck on the
   page, so it reads as something to tap; the one that's on is yellow */
.icon-btn, .sheet-close {
  border: 0;
  background: var(--card);
  color: var(--ink);
  box-shadow: inset 0 0 0 1.3px var(--grid-strong), 1.5px 2px 0 rgba(58, 52, 23, .13);
}
.icon-btn { width: 38px; height: 38px; }
.icon-btn .ico { width: 20px; height: 20px; stroke-width: 1.7; }
.head-acts { gap: 10px; }
@media (hover: hover) {
  .icon-btn:hover, .sheet-close:hover { background: var(--card); box-shadow: inset 0 0 0 1.4px var(--ink), 2px 3px 0 rgba(31, 63, 168, .18); }
}
.icon-btn:active, .sheet-close:active { box-shadow: inset 0 0 0 1.4px var(--ink), .5px .5px 0 rgba(31, 63, 168, .18); }
.icon-btn.on { background: var(--note); color: #1f3fa8; box-shadow: inset 0 0 0 1.4px #1f3fa8, 1.5px 2px 0 rgba(31, 63, 168, .2); }
.sheet-close { margin: -4px -4px 0 0; }
.toc-acts .icon-btn { width: 34px; height: 34px; }
.option .icon-btn { width: 32px; height: 32px; }
.option .icon-btn .ico { width: 16px; height: 16px; }
/* the switches in the tab bar (night, prullenbak, account): small round paper buttons too */
.theme-toggle, .trash-toggle, .account-toggle { color: var(--ink); }
.theme-toggle svg, .trash-toggle svg, .account-toggle svg { position: relative; }
.theme-toggle::after, .trash-toggle::after, .account-toggle::after {
  inset: 50% auto auto 50% !important;
  width: 36px;
  height: 36px;
  translate: -50% -50%;
  border-radius: 50%;
  background: var(--card);
  box-shadow: inset 0 0 0 1.2px var(--grid-strong), 1px 1.5px 0 rgba(58, 52, 23, .12);
  z-index: -1;
}
.theme-toggle, .trash-toggle, .account-toggle { isolation: isolate; }
@media (hover: hover) {
  .theme-toggle:hover::after, .trash-toggle:hover::after, .account-toggle:hover::after { box-shadow: inset 0 0 0 1.3px var(--ink), 1.5px 2px 0 rgba(31, 63, 168, .18); }
}
.trash-toggle[aria-current="page"]::after { background: var(--note); box-shadow: inset 0 0 0 1.3px #1f3fa8; }

.btn { border-radius: 4px; box-shadow: 2px 3px 0 rgba(15, 30, 90, .3); rotate: -.6deg; }
@media (hover: hover) { .btn:hover { box-shadow: 3px 4px 0 rgba(15, 30, 90, .3); } }
.btn:active { box-shadow: 1px 1px 0 rgba(15, 30, 90, .3); }

/* ---- days and times to pick: little paper squares */
.cal-day, .tcell {
  margin: 2px;
  height: 36px;
  border-radius: 3px;
  background: var(--card);
  box-shadow: inset 0 0 0 1px var(--grid);
}
.cal-day.on, .tcell.on { background: var(--note); color: #1f3fa8; }
.cal-day.past, .tcell.night { background: transparent; }
.tcell:disabled { background: transparent; box-shadow: none; }

/* ---- headings: written on a strip of washi tape */
.block > h2, .block > .agenda-top > h2, .habit-list-block > h2, .day-strip-block > h2, .review-card > h2, .trash-head > h2 {
  width: fit-content;
  padding: 0 14px 2px 10px;
  background: var(--washi);
  border-radius: 1px;
  rotate: -1.2deg;
}
.tr-part-name { padding: 1px 12px 2px 8px; background: var(--washi); rotate: -1deg; }
.tr-part::after { opacity: .6; }

/* ---- the tracker on Gewoontes: each habit's name on its own sticky note */
.habit-line .tr-name {
  padding: 4px 10px 5px;
  background: var(--habit-note);
  border-radius: 1px 1px 3px 2px;
  box-shadow: var(--sticker-shadow);
  rotate: -.6deg;
  color: var(--note-text);
}
.habit-line:nth-child(2n) .tr-name { rotate: .5deg; }
.tr-name-wrap .habit-line .tr-name, .habit-line .tr-name-wrap .tr-name { width: calc(100% - var(--depth, 0) * 24px); margin-left: calc(var(--depth, 0) * 24px); padding-left: 10px; }
.habit-line.tied .tr-name::before { left: -17px; top: -6px; height: 24px; }
.tracker .habit-line { margin-bottom: 7px; }
.habit-line .row-acts { background: linear-gradient(to right, transparent, var(--habit-note) 24px); right: 6px; }
/* a task's "+ deeltaak" on a computer: pencilled into the slip's corner when you point at it (no room kept for it) */
@media (hover: hover) {
  .task .sub-more { position: absolute; right: 12px; bottom: 2px; min-height: 0; }
  .task .sub-more::before { display: none; }
}

/* ---- a phone's Gewoontes: the days of half a month, each a little paper square with how all habits went */
.day-strip { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 6px; margin: 4px 0 6px; }
.ds-day {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  padding: 4px 0 5px;
  border: 0;
  border-radius: 3px;
  background: var(--card);
  box-shadow: inset 0 0 0 1px var(--grid), 1px 1.5px 0 rgba(58, 52, 23, .1);
  color: var(--graphite);
  rotate: -.6deg;
  transition: rotate .25s var(--ease), translate .25s var(--ease);
}
.ds-day:nth-child(2n) { rotate: .5deg; }
.ds-day .wd { font: 400 11px/14px var(--sans); color: var(--pencil); }
.ds-day .num { font: italic 600 17px/20px var(--serif); }
.ds-day .tc.mini { width: 18px; margin: 0; }
.ds-day.weekend { background: var(--slip); }
.ds-day.today .num { color: var(--ink); text-decoration: underline 2px var(--marker); text-underline-offset: 2px; }
.ds-day.sel { background: var(--note); box-shadow: inset 0 0 0 1.4px var(--ink), 1.5px 2px 0 rgba(31, 63, 168, .2); rotate: 0deg; translate: 0 -2px; }
.ds-day:disabled { background: transparent; box-shadow: inset 0 0 0 1px var(--grid); opacity: .55; }
.day-strip.from-right { animation: month-from-right .24s var(--ease); }
.day-strip.from-left { animation: month-from-left .24s var(--ease); }
.day-strip-block .day-panel { margin-top: 18px; }
.habit-list .tr-part { flex-wrap: wrap; row-gap: 2px; }
.habit-list .tr-part-empty { white-space: normal; font-size: 13.5px; }

/* ---- Je week: each part a card taped in */
.review-cols { display: flex; flex-direction: column; gap: 30px; }
.review-col { display: flex; flex-direction: column; gap: 30px; min-width: 0; }
.review-cols.from-right { animation: month-from-right .24s var(--ease); }
.review-cols.from-left { animation: month-from-left .24s var(--ease); }
.review-card.block { margin: 0; }
.week-nav { margin: -8px 0 22px -10px; }
.wk-grid { display: grid; grid-template-columns: minmax(0, 1fr) repeat(7, 24px); gap: 7px 4px; align-items: center; }
.wk-grid .wd { font: 400 12px/16px var(--sans); color: var(--pencil); text-align: center; }
.wk-grid .wd.today { color: var(--ink); font-weight: 600; }
.wk-grid .tc { max-width: 22px; }
.wk-name { min-width: 0; font: italic 500 17px/22px var(--serif); color: var(--graphite); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wk-done { display: flex; flex-direction: column; gap: 3px; margin: 0; padding: 0; list-style: none; }
.wk-done li { font: italic 500 17px/24px var(--serif); color: var(--graphite); }
.wk-tick { display: inline-block; width: 22px; font-style: normal; color: var(--ink); }
.wk-step { padding-left: 22px; }
.wk-n, .wk-of { font: 400 12.5px/16px var(--sans); color: var(--pencil); }
.review-card .review-q { margin-bottom: 14px; }
@media (min-width: 1040px) {
  .review-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 40px; align-items: start; }
}
.review-card {
  position: relative;
  padding: 16px 18px 14px;
  background: var(--card);
  border-radius: 3px;
  box-shadow: var(--sticker-shadow);
  rotate: -.3deg;
}
.review-col > .review-card:nth-child(2n) { rotate: .35deg; }
.review-card::before {
  content: "";
  position: absolute;
  top: -8px;
  left: 50%;
  width: 60px;
  height: 15px;
  margin-left: -30px;
  background: var(--tape-row);
  border-inline: 1px dashed rgba(0, 0, 0, .06);
  rotate: -3deg;
}

/* ---- the Kalender's week: a slip of paper per day */
.cal-week .cal-col { background: var(--card); border-radius: 3px; box-shadow: var(--sticker-shadow); }
.cal-week .cal-col:nth-child(2n) { rotate: .3deg; }
.cal-week .cal-col:nth-child(2n + 1) { rotate: -.3deg; }
.cal-week .cal-col.today { background: var(--slip); }
.cal-week .cal-col + .cal-col { border: 0; }

/* ---- the tab bar: a strip of paper, its top edge torn on a phone */
.tabs-inner { border-radius: 4px; box-shadow: var(--sticker-shadow); rotate: -.3deg; }
.phone .tabs-inner { rotate: 0deg; }
.phone .tabs-inner::before { /* the bar's top edge, torn */
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -5px;
  height: 6px;
  background: var(--torn-bar) 0 0 / 14px 6px repeat-x;
  pointer-events: none;
}
/* the Kalender's days: some room between the slips */
.cal-week .cal-col { margin: 0 0 12px; padding: 4px 10px 10px; }
/* a phone: a line follows the finger when it's swiped, without lagging behind */
.phone :is(.rows > .row.task, .rows > .row.habit, .toc-list > .toc, .pockets > .toc):not(.settling) { transition: rotate .3s var(--ease), box-shadow .3s var(--ease), scale .14s ease; }


/* ---- the Kalender's month: a calendar page taped into the notebook */
:root { --weekend-tint: rgba(255, 214, 92, .13); }
:root[data-theme="dark"] { --weekend-tint: rgba(217, 183, 47, .06); }
.month-page {
  position: relative;
  padding: 10px 12px 14px;
  background: var(--card);
  border-radius: 3px;
  box-shadow: var(--sticker-shadow);
  rotate: -.15deg;
}
.month-page::before, .month-page::after { /* tape on its top corners */
  content: "";
  position: absolute;
  top: -8px;
  width: 56px;
  height: 15px;
  background: var(--tape-row);
  border-inline: 1px dashed rgba(0, 0, 0, .06);
  pointer-events: none;
}
.month-page::before { left: -10px; rotate: -28deg; }
.month-page::after { right: -10px; rotate: 27deg; }
.month-page .ag-week-head { margin: 0 0 4px; }
.month-page .ag-week-head .wd { padding-left: 6px; text-align: left; font: 600 11.5px/18px var(--sans); color: var(--pencil); }
.month-page .ag-week-head .wd.weekend { color: var(--ink); opacity: .7; }
.month-page .ag-cell {
  gap: 3px;
  height: 108px;
  padding: 4px 5px 5px;
  box-shadow: inset 0 0 0 .5px var(--grid-strong);
  transition: background-color .15s, box-shadow .2s;
}
.month-page .ag-cell.weekend { background-color: var(--weekend-tint); }
@media (hover: hover) { .month-page .ag-cell:hover { background-color: var(--ink-soft); box-shadow: inset 0 0 0 1.3px var(--ink); } }
.month-page .ag-cell:active { background-color: var(--marker-soft); }
.ag-cell .cell-top { display: flex; align-items: center; justify-content: space-between; gap: 4px; min-height: 18px; }
.month-page .ag-cell .num { font: italic 600 15px/18px var(--serif); }
.month-page .ag-cell.today { background-color: var(--slip); }
.mc-list { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mc {
  display: block;
  min-width: 0;
  padding: 0 4px;
  border-radius: 2px;
  font: 500 11.5px/16px var(--sans);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--graphite);
}
.mc b { font-weight: 700; }
.mc-ev { background: var(--ink-soft); border-left: 2.5px solid var(--ink); color: var(--ink); }
.mc-ev.all { background: var(--ink); border-left: 0; color: var(--paper); }
.mc-task { background: var(--task-paper); box-shadow: inset 0 0 0 1px var(--grid-strong); font: italic 500 12.5px/16px var(--serif); rotate: -.6deg; }
.mc-task:nth-child(2n) { rotate: .5deg; }
.mc-task.ghost { background: none; box-shadow: inset 0 0 0 1px var(--grid); color: var(--pencil); }
.mc-task.done .mc-t { color: var(--pencil); text-decoration: line-through 1.4px var(--ink); }
.mc-t.hl { position: relative; isolation: isolate; }
.mc-step { font: italic 400 12px/16px var(--serif); }
.mc-step::before { content: "↳ "; color: var(--pencil); font-style: normal; }
.mc-step.done { color: var(--pencil); text-decoration: line-through; }
.mc-marks { display: flex; flex-wrap: wrap; gap: 2px; margin-top: auto; }
.mc-marks .tc { width: 10px; max-width: 10px; justify-self: auto; }
.month-page .ag-more { padding-left: 4px; font: 600 11px/14px var(--sans); color: var(--ink); }
.phone .month-page { padding: 8px 6px 10px; }
.phone .month-page .ag-cell { height: 70px; padding: 3px 2px; gap: 2px; }
.phone .month-page .ag-cell .num { font-size: 13.5px; }
.phone .mc { padding: 0 2px; font-size: 9.5px; line-height: 12px; }
.phone .mc-task, .phone .mc-step { font-size: 10.5px; line-height: 13px; }
.phone .ag-cell .cell-top .tc.mini { width: 13px; }
.phone .mc b { display: none; } /* a phone: the title fits; the time is on the day opened big */

/* ---- the Kalender's week: each day a card; its habits under its things, each with its box */
.cal-col .ag-label { display: flex; align-items: baseline; gap: 4px; width: 100%; }
.ag-go { margin-left: auto; font: 400 18px/20px var(--serif); color: var(--pencil-soft); transition: color .2s, translate .25s var(--ease); }
@media (hover: hover) { .cal-col .ag-label:hover .ag-go { color: var(--ink); translate: 3px 0; } }
@media (hover: hover) { .cal-col .ag-label:hover .ag-num { color: var(--ink); } }
.cal-habits { display: block; margin: 6px 0 0; padding: 4px 0 0; border-top: 1px dashed var(--grid-strong); list-style: none; }
.cal-habits-label { font: 600 10.5px/16px var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--pencil); }
.cal-habits > .cal-list { gap: 0; margin: 2px 0 0; }
.cal-habit { gap: 7px; min-height: 24px; }
.cal-habit-name { flex: 1; min-width: 0; font: italic 500 14px/18px var(--serif); color: var(--graphite); overflow-wrap: anywhere; }
.cal-habit.later .cal-habit-name { color: var(--pencil); }
.cal-week .cal-habit .tc.mini { width: 16px; }
.cal-more { margin: 2px 0 0 23px; font-size: 13.5px; }
.cal-week .cal-task .cal-text .title { font-size: 14.5px; line-height: 18px; }
.cal-week .cal-task { padding: 2px 4px; background: var(--task-paper); border-radius: 2px; box-shadow: inset 0 0 0 1px var(--grid); }
.cal-week .cal-col.today .cal-task { background: var(--card); }

/* ---- a day, big (opened from the week or the month) */
.day-nav { justify-content: space-between; margin: -6px 0 6px -10px; }
.day-nav-gap { flex: 1; }
.day-big.from-right { animation: month-from-right .24s var(--ease); }
.day-big.from-left { animation: month-from-left .24s var(--ease); }
.cal-dayview .cal-habits { margin-top: 12px; padding-top: 8px; }
.cal-dayview .cal-habit { min-height: 36px; gap: 12px; }
.cal-dayview .cal-habit-name { font-size: 17px; line-height: 22px; }
.cal-dayview .cal-habit .tc.mini { width: 22px; }
.cal-dayview .cal-habits .cal-item:not(:has(> .cal-at))::before { display: none; }

/* ---- your own agenda: the link, the files */
.agenda-add { display: flex; align-items: center; gap: 10px; }
.agenda-add .line { flex: 1; min-width: 0; }
.agenda-list { display: flex; flex-direction: column; gap: 8px; margin: 12px 0 0; padding: 0; list-style: none; }
.agenda-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  background: var(--slip);
  border-radius: 2px;
  box-shadow: var(--sticker-shadow);
  rotate: -.3deg;
  transition: opacity .2s;
}
.agenda-item:nth-child(2n) { rotate: .3deg; }
.agenda-item.is-off { opacity: .62; }
.agenda-item.is-off .agenda-name { text-decoration: line-through 1px var(--pencil-soft); }
.agenda-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.agenda-name { font: italic 600 17px/22px var(--serif); color: var(--graphite); overflow-wrap: anywhere; }
.agenda-where { font: 400 12px/16px var(--sans); color: var(--pencil); overflow-wrap: anywhere; }
.agenda-item .pencil { flex: none; }
.file-act { width: fit-content; cursor: pointer; }
.agenda-how p { margin: 4px 0; }
.how-toggle { display: block; margin: 10px 0 0; font-size: 13.5px; color: var(--ink); }
.agenda-how { margin: 14px 0 6px; }
.how-steps { margin: 2px 0 12px; padding-left: 22px; }
.how-steps li { margin: 3px 0; font: italic 500 15.5px/22px var(--serif); }
.how-steps li::marker { font: 600 13px var(--sans); color: var(--note-text); }
.how-link { display: inline-flex; margin: 4px 0; text-decoration: none; vertical-align: middle; }
.how-small { display: block; font: 400 12.5px/17px var(--sans); color: var(--note-text); opacity: .75; }
.agenda-hide { display: block; margin-top: 14px; }
.agenda-dot { display: inline-block; width: 10px; height: 10px; margin: 0 7px 1px 0; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12); vertical-align: middle; }
/* "Koppel met Google": the easiest way, at the top */
.google-connect { text-decoration: none; color: var(--ink); box-shadow: inset 0 0 0 1.4px var(--ink), 1.5px 2px 0 rgba(31, 63, 168, .18); }
.google-connect .ico { color: var(--ink); }
.google-connect.is-waiting { opacity: .45; cursor: default; }
@media (hover: hover) { a.google-connect:hover { background: var(--ink); color: var(--paper); } a.google-connect:hover .ico { color: var(--paper); } }
.google-who { display: flex; align-items: flex-start; gap: 8px; margin: 0 0 4px; font: italic 500 16px/22px var(--serif); color: var(--graphite); }
.google-who .ico { flex: none; width: 17px; height: 17px; margin-top: 3px; color: var(--ink); }
.phone .google-connect { padding: 8px 15px 8px 12px; font-size: 15px; }
.agenda-note { margin-top: 16px; }

/* ---------------------------------------------------------------- the phone
   A phone (a small touch screen: index.html puts .phone on <html> before the first
   paint) gets its own layout, made for a thumb; a computer never gets any of it.
   The tab bar sits on the bottom edge, with a pencil icon over each word. */

.tab-ico { display: none; }
.phone .tabs { padding: 0; background: none; }
.phone .tabs-inner {
  flex: 1;
  gap: 0;
  align-items: stretch;
  padding: 6px max(8px, env(safe-area-inset-right)) calc(2px + env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left));
  border: 0;
  border-top: 1px solid var(--grid-strong);
  border-radius: 0;
  box-shadow: 0 -8px 20px rgba(31, 40, 70, .05);
}
.phone .tab {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  min-height: 50px;
  padding: 2px 0 4px;
  font-size: 14px;
  line-height: 18px;
}
.phone .tab-ico {
  display: block;
  width: 26px;
  height: 26px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform .3s var(--ease);
}
.phone .tab[aria-current="page"] .tab-ico { transform: translateY(-1px) rotate(-4deg); }
.phone .tab-marker { bottom: auto; height: 8px; }
.phone .theme-toggle, .phone .trash-toggle, .phone .account-toggle { flex: none; width: 44px; height: 50px; place-items: center; align-self: flex-start; }
.phone .theme-toggle, .phone .trash-toggle, .phone body.online .account-toggle { display: grid; }
.phone .theme-toggle::before { left: 0; top: 13px; bottom: 13px; }
.phone .theme-toggle::after, .phone .trash-toggle::after, .phone .account-toggle::after { inset: 0; }
.phone .toast { bottom: calc(76px + env(safe-area-inset-bottom)); }

/* Making something: a round + in the corner, above the tabs, instead of the cards
   (phone.js). With two things to make, they fan out above it as stickers. */
.fab { display: none; }
.phone .make-row { display: none; }
.phone .fab {
  position: fixed;
  right: calc(16px + env(safe-area-inset-right));
  bottom: calc(76px + env(safe-area-inset-bottom));
  z-index: 20;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
}
.phone .fab[hidden] { display: none; }
.fab-btn {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--ink);
  color: var(--paper);
  box-shadow: 0 6px 16px rgba(31, 40, 70, .28), 0 1px 3px rgba(31, 40, 70, .2);
  transition: transform .3s var(--ease), box-shadow .2s;
}
.fab-btn .ico { width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; transition: transform .35s var(--ease); }
.fab-btn:active { transform: scale(.94); }
.fab.open .fab-btn .ico { transform: rotate(135deg); }
.phone .fab::before { /* the page behind fades a little while the fan is open */
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background: color-mix(in srgb, var(--paper) 72%, transparent);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease;
}
.phone .fab.open::before { opacity: 1; pointer-events: auto; }
.fab-menu { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; pointer-events: none; }
.phone .fab { pointer-events: none; } /* only the + itself (and its choices when they're out) catch a finger, not the room they take */
.phone .fab-btn { pointer-events: auto; }
.fab.open .fab-menu { pointer-events: auto; }
.fab-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 8px 8px 16px;
  border: 1px solid var(--grid-strong);
  border-radius: 14px;
  background: var(--paper);
  box-shadow: var(--shadow);
  text-align: right;
  opacity: 0;
  transform: translateY(14px) scale(.96);
  transition: opacity .16s ease, transform .22s var(--ease);
}
.fab.open .fab-item { opacity: 1; transform: none; transition-delay: calc(var(--i) * 40ms); }
.fab-text { display: flex; flex-direction: column; }
.fab-label { font: italic 500 19px/22px var(--serif); color: var(--ink); }
.fab-sub { font-size: 12.5px; line-height: 16px; color: var(--pencil); }
.fab-tile { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 11px; background: var(--ink-soft); color: var(--ink); }
.fab-tile svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* What you can do with a line waits behind it: swipe it to the left and it slides
   aside, showing the buttons written in its margin (phone.js). A finger that moves
   scrolls or slides; held still for a moment, a line is picked up to move it (drag.js). */
.phone .reveal, .phone .toc-acts, .phone .row-acts, .phone .grip { display: none; }
/* a line is picked up by holding it still (drag.js): no text selection or menu then */
.phone [data-drag] { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.phone .page { overflow-x: clip; }
.phone :is(.row, .tr-row) { touch-action: pan-y; }
.phone :is(.row, .tr-row).settling { transition: translate var(--settle, .32s) cubic-bezier(.2, .9, .25, 1), scale .14s ease; }
.swipe-tray {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 100%;
  display: flex;
  align-items: stretch;
  margin-left: 12px;
  visibility: hidden; /* written out as a finger lands, seen once the line moves */
}
:is(.swiping, .slid, .settling, .nudging) > .swipe-tray { visibility: visible; }
.swipe-act { transition: background-color .15s, color .15s; }
.swipe-act {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-width: 66px;
  padding: 0 10px;
  border: 0;
  border-left: 1.5px dashed var(--grid-strong);
  background: none;
  font: italic 500 16px/18px var(--serif);
  color: var(--ink);
  white-space: nowrap;
}
.swipe-act:active { background: var(--ink-soft); }
.swipe-act svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.swipe-act svg + span { font: 400 12.5px/15px var(--sans); color: var(--pencil); }
/* what it does, in a few words under it */
.swipe-act small { max-width: 92px; margin-top: 1px; font: 400 10.5px/12.5px var(--sans); color: var(--pencil); white-space: normal; text-align: center; }
.swipe-act svg ~ small { margin-top: 0; }
.phone .toc.slid, .phone .toc.swiping { background: var(--ink-soft); }
/* a line with buttons behind it says so: two small pencil arrows in the margin to its right (phone.js) */
.swipe-hint { display: none; }
.phone .swipe-hint {
  display: block;
  position: absolute;
  top: 50%;
  right: -13px;
  width: 10px;
  height: 14px;
  margin-top: -7px;
  background: var(--swipe-mark) no-repeat center / contain;
  pointer-events: none;
  transition: opacity .2s;
}
.phone :is(.slid, .swiping) > .swipe-hint { opacity: 0; }
.phone .tr-row > .swipe-hint { right: -11px; }
.phone .toc > .swipe-hint { right: -9px; }
:root { --swipe-mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 14' fill='none' stroke='%237f8799' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5.2 2.6L1.6 7l3.6 4.4M9 2.6L5.4 7 9 11.4' opacity='.85'/%3E%3C/svg%3E"); }

/* a line pressed sinks in a little (phone.js .pressed: only after a moment, so a finger
   that starts to scroll or swipe doesn't press it) */
.phone :is(.row, .tr-row).pressed:not(.swiping, .slid) { scale: .985; }
/* moving a line, a page or a sheet: each on its own layer, so the phone only shifts it (it isn't drawn again every frame) */
.phone :is(.row, .tr-row):is(.touched, .swiping, .settling, .slid, .nudging) { will-change: translate; }
.phone .page:is(.paging, .paged) { will-change: translate, rotate, opacity; }
.phone .sheet.pulling { will-change: translate; }
/* no text selection or magnifier when a finger rests on a line (what's typed in one still can be) */
.phone :is(.row, .tr-row) { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.phone :is(.row, .tr-row) :is(input, textarea) { -webkit-user-select: text; user-select: text; }
.phone .tucked { padding: 4px 11px 5px 9px; font-size: 13px; line-height: 18px; }
.phone .tucked::after { content: ""; position: absolute; inset: -8px -2px; } /* (a finger still finds it) */
.tucked { position: relative; }
.phone .tailor-x { padding: 6px 12px 7px 10px; font-size: 13.5px; line-height: 20px; top: -30px; }
.phone .tailor-flag { padding: 6px 13px 7px 19px; font-size: 15.5px; margin: -9px -2px 2px 0; }
.phone .icon-btn { width: 42px; height: 42px; }
.phone .trash-row .icon-btn { width: 40px; height: 40px; }
.phone .trash-acts .act, .phone .bin-bar .act { padding: 7px 13px 7px 10px; font-size: 14px; } /* a finger's size */
.phone .icon-btn .ico { width: 21px; height: 21px; }
.phone .head-acts { gap: 12px; }

/* Gewoontes: half a month at a time (views/habits.js), so the days are big enough
   for a finger; what a box means folds out under "wat betekent een vakje?". */
.phone .tracker-top { gap: 4px 16px; }
.phone .tracker-top .cal-title { min-width: 8.5em; }
.phone .legend-toggle { font-size: 14px; }
.phone .legend[hidden] { display: none; }
.phone .legend { gap: 4px 14px; margin: 6px 0 2px; }
.phone .tr-day { padding: 2px 0 6px; }
.phone .tr-day .wd { font-size: 10.5px; line-height: 13px; }
.phone .tr-day .num { font-size: 15px; line-height: 20px; letter-spacing: 0; padding: 0 2px; }
.phone .tc { max-width: 27px; }
.phone .tr-row { padding: 6px 0; }

/* Sheets come up from the bottom edge, as wide as the phone, with a grip on top to
   pull them down again (phone.js); their buttons stay in reach at the bottom. */
.phone .sheet {
  width: 100%;
  max-width: none;
  max-height: calc(100dvh - 44px - env(safe-area-inset-top));
  margin: auto 0 0;
  border-radius: 18px 18px 0 0;
}
.phone .sheet[open] { top: auto; bottom: 0; margin: 0; translate: none; }
.phone .sheet[open] { animation: sheet-up .34s cubic-bezier(.2, .9, .3, 1); }
.phone .sheet.closing { animation: sheet-down .17s ease-in forwards; }
.phone .sheet.pulled-back { transition: translate .3s cubic-bezier(.3, 1.4, .5, 1); }
@keyframes sheet-up { from { transform: translateY(100%); } }
@keyframes sheet-down { to { transform: translateY(100%); } }
.phone .sheet-body { padding: 10px 20px calc(16px + env(safe-area-inset-bottom)); }
.phone .sheet-body::before { /* the grip */
  content: "";
  display: block;
  width: 40px;
  height: 5px;
  margin: 0 auto 16px;
  border-radius: 3px;
  background: var(--grid-strong);
}
.phone .sheet-head { margin-bottom: 18px; gap: 12px; touch-action: none; }
.phone .sheet-icon { width: 38px; height: 38px; border-radius: 11px; }
.phone .sheet-icon .ico { width: 22px; height: 22px; }
.phone .sheet-title { font-size: 27px; line-height: 32px; }
.phone .sheet-actions {
  position: sticky;
  bottom: calc(-16px - env(safe-area-inset-bottom));
  z-index: 2;
  margin: 28px -20px calc(-16px - env(safe-area-inset-bottom));
  padding: 12px 20px calc(12px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--grid-strong);
  background: var(--paper);
}
.phone .sheet-actions .btn { min-height: 44px; padding: 10px 26px; }

/* Vandaag's note about tasks left from before: what to do with one goes under it */
.phone .triage { flex-wrap: wrap; row-gap: 2px; }
.phone .triage .aside { flex-basis: 100%; margin-left: 0; gap: 20px; }

/* Vandaag: nothing shows up for "pointing" at a habit (a tap would only point at it, the
   slip stayed, and the tap after that did the real thing). Tapping the name opens the
   habit, again closes it: today's note on its slip in the line under the name (tap it
   to change it), or a pencil line to write one, and its choices (views/today.js). */
.phone .habit > .day-note { display: none; }
.phone .habit:has(> .text:hover) .note-mark { color: var(--pencil); transform: none; }
.phone .habit .text[data-action] { cursor: pointer; }
.phone .habit.is-open { flex-wrap: wrap; row-gap: 0; }
.phone .habit.is-open::after { content: ""; order: 2; flex-basis: 100%; } /* a new line under the name */
.phone .habit.is-open > .day-note {
  display: block;
  position: static;
  order: 3;
  width: auto;
  max-width: calc(100% - 34px);
  margin: 2px 0 8px 34px;
  opacity: 1;
  visibility: visible;
  transform: rotate(-1deg);
  transition: none;
  animation: note-open .3s cubic-bezier(.2, .9, .25, 1.15);
}
.phone .habit.is-open > .add-note { padding: 0; background: none; box-shadow: none; transform: none; color: var(--pencil); font: italic 400 16px/22px var(--serif); text-decoration: underline dotted var(--pencil-soft); text-underline-offset: 4px; }
.phone .habit.is-open .note-mark { color: var(--ink); }
@keyframes note-open { from { opacity: 0; transform: translateY(-6px) rotate(-1deg); } }

/* Nothing else appears just for pointing either: on an iPhone a tap that only makes
   something appear counts as pointing, and the thing tapped needs a second tap. */
.phone .edit-hint { display: none; }
.phone .pill:not(.on):hover .ink-line path, .phone .day:not(.on):hover > .loop path { stroke-dashoffset: 1; opacity: 0; }

/* A chain of habits folds away under its first one with a small round button there
   (on Vandaag and Gewoontes); tapping the stack of cards deals it out again. */
.chain-toggle { display: none; }
.phone .chain-toggle {
  display: grid;
  place-items: center;
  flex: none;
  width: 36px;
  height: 36px;
  margin: -6px -4px -6px 0;
  padding: 0;
  border: 1px solid var(--grid-strong);
  border-radius: 50%;
  background: var(--paper);
  color: var(--pencil);
  transition: color .2s, background-color .2s, transform .2s var(--ease);
}
.phone .chain-toggle .ico { width: 18px; height: 18px; }
.phone .chain-toggle:active { color: var(--ink); background: var(--ink-soft); transform: scale(.92); }
.phone .tr-name-wrap .chain-toggle { position: absolute; right: 0; top: 50%; margin: 0; transform: translateY(-50%); }
.phone .tr-name-wrap .chain-toggle:active { transform: translateY(-50%) scale(.92); }
.phone .tr-name-wrap:has(.chain-toggle) .tr-name { padding-right: 44px; }

/* A page is swiped aside like a loose sheet (phone.js): it follows the finger, and
   goes off, or settles back, with a little ease; the browser only scrolls up and down. */
.phone, .phone body { overscroll-behavior-x: none; } /* a sideways swipe is ours, not the browser's going back */
.phone body { touch-action: pan-y; overflow-x: clip; }
.phone .page.paged { transition: translate var(--paged, .16s) var(--paged-ease, ease-in), rotate var(--paged, .16s) var(--paged-ease, ease-in), opacity var(--paged, .16s) var(--paged-ease, ease-in); }
.phone .page { transform-origin: 50% 30%; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}