/* Todae: Paper calm. Colours come only from the app's palette. */

@font-face { font-family: "Instrument Serif"; src: url("/fonts/instrument-serif.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Instrument Serif"; src: url("/fonts/instrument-serif-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Hanken Grotesk"; src: url("/fonts/hanken-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Hanken Grotesk"; src: url("/fonts/hanken-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Hanken Grotesk"; src: url("/fonts/hanken-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }

:root {
  color-scheme: light dark;
  --paper: #FAFAF7;
  --strip: #EEF1F0;
  --ink: #1F2326;
  --secondary: #5F676C;
  --lines: #E2E5E4;
  --accent: #A44D2A;
  --ring: #747C81;
  --wash: color-mix(in srgb, var(--strip) 95%, var(--accent));
  --bar: color-mix(in srgb, var(--strip) 90%, var(--accent));
  --grain-blend: multiply;
  --grain-opacity: .05;

  --serif: "Instrument Serif", "Iowan Old Style", Georgia, serif;
  --sans: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --gutter: clamp(16px, 5vw, 56px);
  --measure: 34rem;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #17191B;
    --strip: #101213;
    --ink: #ECEEEC;
    --secondary: #9AA2A6;
    --lines: #2A2E31;
    --accent: #E8A684;
    --ring: #7E868A;
    /* Nearer is lighter: surfaces in front of the page get a step lighter. */
    --wash: color-mix(in srgb, color-mix(in srgb, var(--paper) 70%, var(--ink) 4%) 93%, var(--accent));
    --bar: color-mix(in srgb, color-mix(in srgb, var(--paper) 88%, var(--ink) 8%) 92%, var(--accent));
    --grain-blend: screen;
    --grain-opacity: .035;
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 1.0625rem/1.6 var(--sans);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
/* Faint paper grain, drawn locally (no image request). */
body::before {
  content: "";
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 100;
  opacity: var(--grain-opacity);
  mix-blend-mode: var(--grain-blend);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

a { color: inherit; text-decoration-color: var(--accent); text-decoration-thickness: 1.5px; text-underline-offset: .18em; }
a:hover { color: var(--accent); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
::selection { background: color-mix(in srgb, var(--accent) 28%, transparent); }

.skip {
  position: absolute; left: 12px; top: -60px; z-index: 200;
  background: var(--ink); color: var(--paper); padding: 10px 14px; border-radius: 8px; text-decoration: none;
}
.skip:focus { top: 12px; color: var(--paper); }

.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.wrap { width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 var(--gutter); }

/* ---------- Top ---------- */
.top { display: flex; align-items: center; justify-content: space-between; padding-top: 20px; padding-bottom: 20px; }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font: 400 1.6rem/1 var(--serif); }
.brand svg { width: 30px; height: 30px; }
.top nav a { font-weight: 500; font-size: .98rem; color: var(--secondary); text-decoration: none; padding: 10px 2px; }
.top nav a:hover { color: var(--accent); }

/* ---------- Hand-drawn ink ---------- */
.ink-stroke { fill: none; stroke: var(--ink); stroke-linecap: round; stroke-linejoin: round; }
.accent-stroke { fill: none; stroke: var(--accent); stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Hero ---------- */
.hero { display: grid; gap: clamp(40px, 7vw, 72px); padding-top: clamp(24px, 6vw, 72px); padding-bottom: clamp(64px, 10vw, 128px); align-items: center; }
@media (min-width: 900px) { .hero { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); } }

.wordmark {
  margin: 0;
  font: 400 clamp(5.5rem, 31vw, 13.5rem)/.9 var(--serif);
  letter-spacing: -.02em;
  padding-top: .32em; /* room for the written "e" */
}
.wordmark .y { position: relative; display: inline-block; }
.wordmark .y-letter { transition: opacity .5s ease .2s; }
.wordmark .strike { position: absolute; left: -6%; top: 22%; width: 112%; height: 66%; overflow: visible; }
.wordmark .strike path { stroke-width: 6; transition: stroke-dashoffset .45s cubic-bezier(.6,0,.3,1) .35s; }
.wordmark .fix {
  position: absolute; left: 4%; top: -.5em;
  font-style: italic; color: var(--accent); font-size: .78em;
  transition: opacity .45s ease .85s, transform .5s ease .85s;
}
.wordmark .strike path { stroke-dasharray: 1; stroke-dashoffset: 0; }
.wordmark .y-letter { opacity: .45; }
.wordmark .fix { opacity: 1; transform: rotate(-8deg) translateY(0); }
.js .wordmark:not(.on) .strike path { stroke-dashoffset: 1; }
.js .wordmark:not(.on) .y-letter { opacity: 1; }
.js .wordmark:not(.on) .fix { opacity: 0; transform: rotate(-8deg) translateY(.12em); }

.lede { font: 400 clamp(1.7rem, 5.6vw, 2.5rem)/1.12 var(--serif); margin: clamp(18px, 3vw, 28px) 0 0; max-width: 17em; }
.intro { color: var(--secondary); max-width: 30rem; margin: 18px 0 0; font-size: 1.1rem; }
.status { margin: 28px 0 0; display: inline-flex; align-items: center; gap: 12px; font-weight: 500; }
.status svg { width: 34px; height: 22px; flex: none; }

/* ---------- The mock day page ---------- */
.phone {
  --w: min(100%, 360px);
  width: var(--w);
  margin: 0 auto;
  background: var(--paper);
  border: 1px solid var(--lines);
  border-radius: 34px;
  overflow: hidden;
  font-family: var(--sans);
  position: relative;
}
@media (prefers-color-scheme: dark) { .phone { border-color: color-mix(in srgb, var(--lines) 60%, var(--ink) 12%); } }
.phone-page { padding: 34px 22px 10px; }

.day-head { display: flex; align-items: flex-start; gap: 12px; }
.day-num { font: 400 4.6rem/.78 var(--serif); letter-spacing: -.03em; margin-top: 4px; }
.day-lines { display: grid; gap: 2px; padding-top: 2px; min-width: 0; }
.day-week { font: 400 1.55rem/1.05 var(--serif); }
.day-month { font-size: .86rem; color: var(--secondary); }
.tally-line { display: flex; align-items: center; gap: 8px; margin-top: 6px; font-size: .82rem; color: var(--secondary); white-space: nowrap; }
.tally { width: 54px; height: 20px; overflow: visible; }
.tally path { fill: none; stroke-linecap: round; stroke-width: 2.4; }
.tally .off { stroke: var(--lines); }
.tally .on { stroke: var(--accent); stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset .35s ease; }
.tally .on.inked { stroke-dashoffset: 0; }

.rule { display: block; width: 100%; height: 10px; margin: 18px 0 2px; }
.rule path { fill: none; stroke: var(--lines); stroke-width: 1.4; stroke-linecap: round; vector-effect: non-scaling-stroke; }
@media (prefers-color-scheme: dark) { .rule path { stroke: color-mix(in srgb, var(--lines) 55%, var(--secondary)); } }

.todos { list-style: none; margin: 0; padding: 0; }
.todo { display: flex; align-items: center; gap: 12px; min-height: 50px; position: relative; }
.todo + .todo::before { content: ""; position: absolute; top: 0; left: 36px; right: 0; border-top: 1px solid var(--lines); }
.check {
  flex: none; width: 26px; height: 26px; padding: 0; border: 0; background: none; cursor: pointer; color: var(--ring);
  border-radius: 50%;
}
.check svg { width: 26px; height: 26px; display: block; overflow: visible; }
.check .ring, .ring-draw { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
/* Priority lives in the circle: low is dashed pencil, medium a firmer pen, high is traced twice. */
.ring-low { stroke-width: 1.6; stroke-dasharray: 2.2 3.2; }
.ring-med { stroke-width: 2.3; stroke: var(--secondary); }
.ring-high { stroke-width: 2.1; stroke: var(--secondary); }
.ring-outer { stroke-width: 1.5; stroke: var(--secondary); }
.check .tick { fill: none; stroke: var(--accent); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset .3s ease; }
.todo.done .check { color: color-mix(in srgb, var(--ring) 55%, var(--paper)); }
.todo.done .tick { stroke-dashoffset: 0; }

.todo-text { position: relative; flex: 1; min-width: 0; font-size: 1.06rem; line-height: 1.3; transition: color .35s ease; }
.todo-text .words { position: relative; display: inline; }
.todo.done .todo-text { color: var(--secondary); opacity: .72; }
.todo.done .todo-meta { opacity: .72; }
.todo-meta { flex: none; font-size: .76rem; color: var(--secondary); text-align: right; line-height: 1.25; }
.todo-meta svg { width: 13px; height: 14px; vertical-align: -2px; }

/* The pen strikethrough. */
.strike-line { position: absolute; left: -3px; top: 50%; width: calc(100% + 8px); height: 10px; margin-top: -4px; overflow: visible; pointer-events: none; }
.strike-line path { fill: none; stroke: var(--ink); stroke-width: 1.7; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset .5s cubic-bezier(.5,0,.3,1); }
.todo.done .strike-line path { stroke: var(--secondary); stroke-dashoffset: 0; }

/* Priority in the words: low is grey, high is bolder and a touch larger. Medium reads as plain words (its circle is firmer). */
.p-low { color: var(--secondary); }
.p-high { font-weight: 600; font-size: 1.11em; }

.doodle { display: block; width: 52px; height: 52px; margin: 6px 6px 0 auto; transform: rotate(-6deg); }

/* Week strip */
.strip { background: var(--wash); padding: 10px 10px 12px 0; display: flex; align-items: stretch; margin-top: 6px; }
.month-tab { writing-mode: vertical-rl; transform: rotate(180deg); font: 400 1.05rem/1 var(--serif); color: var(--secondary); padding: 0 6px 0 7px; border-left: 1px solid var(--lines); display: flex; align-items: center; justify-content: center; }
.days { flex: 1; display: grid; grid-template-columns: repeat(7, 1fr); text-align: center; }
.day { position: relative; padding: 6px 0 8px; border-radius: 12px; }
.day .wd { display: block; font-size: .7rem; color: var(--secondary); }
.day .wd.first { color: var(--accent); }
.day .dn { display: block; font-weight: 600; font-size: 1rem; line-height: 1.5; }
.day .dot { display: block; width: 4px; height: 4px; border-radius: 50%; background: var(--secondary); margin: 1px auto 0; opacity: .7; }
.day .dot.none { visibility: hidden; }
.day.sel { background: var(--paper); }
.day.sel .ring-today { position: absolute; left: 50%; top: 18px; width: 34px; height: 30px; transform: translateX(-50%); overflow: visible; }
.day.sel .ring-today path { fill: none; stroke: var(--accent); stroke-width: 1.5; stroke-linecap: round; }

/* Bottom bar */
.bar { background: var(--bar); display: flex; align-items: center; justify-content: space-between; padding: 6px 26px 18px; }
.bar-word { position: relative; font: 400 1.55rem/1 var(--serif); padding-top: 10px; }
.bar-word .y { position: relative; display: inline-block; }
.bar-word .y svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.bar-word .y path { stroke: var(--accent); stroke-width: 1.8; fill: none; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.bar-word .y-letter { opacity: .45; }
.bar-word .fix { position: absolute; left: 2px; top: -15px; font-style: italic; color: var(--accent); font-size: 1.3rem; transform: rotate(-8deg); }
.bar-word .uline { position: absolute; left: 0; right: 0; bottom: -9px; height: 6px; width: 100%; }
.bar-word .uline path { stroke: var(--accent); stroke-width: 2; fill: none; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.bar .someday { font: 400 1.55rem/1 var(--serif); color: var(--secondary); padding-top: 10px; }
.add-plus { width: 58px; height: 58px; margin: -4px 0; }
.add-plus path { stroke: var(--accent); stroke-width: 4.2; fill: none; stroke-linecap: round; }

/* ---------- Sections ---------- */
.section { padding-top: clamp(64px, 11vw, 140px); padding-bottom: clamp(64px, 11vw, 140px); border-top: 1px solid var(--lines); }
.split { display: grid; gap: clamp(36px, 6vw, 80px); align-items: center; }
@media (min-width: 900px) {
  .split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .split.flip > :first-child { order: 2; }
}
.h2 { font: 400 clamp(2.4rem, 7.4vw, 4.2rem)/1.02 var(--serif); letter-spacing: -.01em; margin: 0; max-width: 11em; }
.copy p { color: var(--secondary); max-width: var(--measure); margin: 20px 0 0; font-size: 1.1rem; }
.copy p strong { color: var(--ink); font-weight: 500; }
.copy .q { color: var(--ink); font-weight: 500; white-space: nowrap; }

/* Two pages: Monday's leftover carried to Tuesday */
.spread { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 0; max-width: 520px; margin: 0 auto; width: 100%; }
.leaf { background: var(--paper); border: 1px solid var(--lines); padding: 20px 16px 26px; min-height: 230px; }
.leaf:first-child { border-radius: 18px 4px 4px 18px; border-right: none; transform: rotate(-1.2deg); transform-origin: right center; }
.leaf:last-child { border-radius: 4px 18px 18px 4px; transform: rotate(1deg); transform-origin: left center; background: color-mix(in srgb, var(--paper) 96%, var(--ink)); }
@media (prefers-color-scheme: dark) { .leaf:last-child { background: color-mix(in srgb, var(--paper) 94%, var(--ink)); } }
.leaf-date { display: flex; align-items: baseline; gap: 8px; }
.leaf-date b { font: 400 2.6rem/1 var(--serif); }
.leaf-date span { font: 400 1.1rem/1 var(--serif); color: var(--secondary); }
.leaf .rule { margin: 10px 0 4px; }
.leaf .todo { min-height: 40px; gap: 8px; }
.leaf .todo + .todo::before { left: 30px; }
.leaf .check, .leaf .check svg { width: 22px; height: 22px; cursor: default; }
.leaf .todo-text { font-size: .9rem; }
.leaf .todo-meta { font-size: .68rem; }
.since { color: var(--accent); }
@media (prefers-color-scheme: dark) { .leaf .rule path { stroke: var(--lines); } }

/* Typed words sheet */
.sheet {
  width: min(100%, 400px); margin: 0 auto; background: var(--wash); border-radius: 26px 26px 18px 18px; padding: 12px 20px 22px; position: relative;
}
.grabber { width: 38px; height: 5px; border-radius: 3px; background: color-mix(in srgb, var(--secondary) 40%, transparent); margin: 0 auto 18px; }
.field { font-size: 1.2rem; line-height: 1.35; min-height: 2.7em; font-weight: 500; }
.field .typed-word { color: var(--accent); }
.caret { display: inline-block; width: 2px; height: 1.15em; background: var(--accent); vertical-align: -.2em; margin-left: 1px; animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.hint { font-size: .86rem; color: var(--secondary); min-height: 1.5em; display: flex; gap: 14px; justify-content: space-between; }
.hint .keep { color: var(--ink); text-decoration: underline; text-decoration-color: var(--lines); text-underline-offset: .2em; }
.hint .msg { transition: opacity .25s ease; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0; }
.chip { font-size: .86rem; padding: 6px 12px; border-radius: 999px; background: var(--paper); color: var(--secondary); border: 1px solid var(--lines); transition: color .25s, border-color .25s; }
.chip.on { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 45%, var(--lines)); }
.pens { display: flex; align-items: center; justify-content: space-between; gap: 6px; background: var(--paper); border-radius: 16px; padding: 12px 14px; font-size: .92rem; }
.pens .label { color: var(--secondary); display: inline-flex; gap: 6px; align-items: center; }
.pens .label svg { width: 14px; height: 16px; }
.pen { position: relative; padding: 4px 4px; color: var(--ink); }
.pen .loop { position: absolute; left: -6px; top: -6px; width: calc(100% + 12px); height: calc(100% + 12px); overflow: visible; opacity: 0; transition: opacity .2s; }
.pen .loop path { fill: none; stroke: var(--accent); stroke-width: 1.5; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.pen.on .loop { opacity: 1; }
@media (max-width: 380px) { .pens .label span { display: none; } }

.levels { list-style: none; padding: 0; margin: 30px 0 0; display: flex; flex-wrap: wrap; gap: 18px 28px; }
.levels li { display: grid; grid-template-columns: 30px auto; column-gap: 10px; align-items: center; }
.levels .lvl-ring { grid-row: span 2; width: 30px; height: 30px; overflow: visible; color: var(--ring); }
.levels .lvl-word { font: 400 1.5rem/1.1 var(--serif); }
.levels small { font: 400 .86rem/1.3 var(--sans); color: var(--secondary); }

/* The add sheet's priority tray: the circle each level draws, with its word under it. */
.pens .pen { display: flex; flex-direction: column; align-items: center; gap: 1px; font-size: .74rem; color: var(--secondary); padding: 4px 6px; }
.pens .pen svg.ring-ico { width: 24px; height: 24px; overflow: visible; color: var(--ring); }
.pens .pen.on { color: var(--ink); }
.pens .pen[data-p="3"] { font-weight: 600; }
.pens .pen .loop { left: -4px; top: -4px; width: calc(100% + 8px); height: calc(100% + 8px); }

/* What Todae won't ask for */
.wont { list-style: none; padding: 0; margin: 36px 0 0; font: 400 clamp(2rem, 6.4vw, 3.4rem)/1.1 var(--serif); }
.wont li { padding: 10px 0; }
.wont .words { position: relative; display: inline-block; color: var(--secondary); transition: color .6s ease .3s; }
.js .wont li:not(.struck) .words { color: var(--ink); }
.wont .strike-line { height: 16px; margin-top: -6px; }
.wont .strike-line path { stroke: var(--accent); stroke-width: 3; transition-duration: .7s; }
.wont .strike-line path { stroke-dashoffset: 0; }
.js .wont li:not(.struck) .strike-line path { stroke-dashoffset: 1; }
.wont-note { color: var(--secondary); font-size: 1.1rem; max-width: var(--measure); margin: 30px 0 0; }

/* Closing */
.closing { text-align: left; }
.closing .big-tally { width: clamp(120px, 26vw, 200px); height: auto; display: block; margin: 0 0 28px -8px; overflow: visible; }
.big-tally path { fill: none; stroke-linecap: round; stroke-width: 34; transition: stroke-dashoffset .55s cubic-bezier(.5,0,.3,1); }
.big-tally .ink-stroke { stroke: var(--ink); }
.big-tally path:nth-child(2) { transition-delay: .15s; }
.big-tally path:nth-child(3) { transition-delay: .3s; }
.big-tally path:nth-child(4) { transition-delay: .45s; }
.big-tally path:nth-child(5) { transition-delay: .75s; transition-duration: .5s; }
.big-tally path { stroke-dasharray: 1; stroke-dashoffset: 0; }
.js .big-tally:not(.drawn) path { stroke-dashoffset: 1; }
.closing .h2 { max-width: 12em; }
.closing p { color: var(--secondary); font-size: 1.1rem; margin: 18px 0 0; max-width: var(--measure); }

/* ---------- Footer ---------- */
.foot { border-top: 1px solid var(--lines); padding-top: 28px; padding-bottom: 40px; display: flex; flex-wrap: wrap; gap: 10px 28px; color: var(--secondary); font-size: .95rem; }
.foot a { color: var(--secondary); }
.foot a:hover { color: var(--accent); }
.foot .made { margin-right: auto; }

/* ---------- Privacy page ---------- */
.doc { max-width: 40rem; padding-top: clamp(24px, 6vw, 64px); padding-bottom: clamp(64px, 10vw, 120px); }
.doc h1 { font: 400 clamp(3rem, 12vw, 5.2rem)/1 var(--serif); margin: 0; letter-spacing: -.01em; }
.doc .updated { color: var(--secondary); margin: 14px 0 0; }
.doc .doc-intro { font: 400 clamp(1.45rem, 4.4vw, 1.8rem)/1.25 var(--serif); margin: 36px 0 0; }
.doc h2 { font: 400 clamp(1.7rem, 5vw, 2.1rem)/1.15 var(--serif); margin: 52px 0 0; padding-top: 22px; border-top: 1px solid var(--lines); }
.doc p, .doc li { font-size: 1.08rem; line-height: 1.7; }
.doc p { margin: 14px 0 0; }
.doc ul { margin: 14px 0 0; padding-left: 0; list-style: none; }
.doc li { position: relative; padding-left: 28px; margin-top: 10px; }
.doc li::before { content: ""; position: absolute; left: 2px; top: .62em; width: 14px; height: 6px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 6'%3E%3Cpath d='M1 3.6C4 2.4 8 2.2 13 3' fill='none' stroke='%23A44D2A' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / contain; }
@media (prefers-color-scheme: dark) {
  .doc li::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 6'%3E%3Cpath d='M1 3.6C4 2.4 8 2.2 13 3' fill='none' stroke='%23E8A684' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E"); }
}
.doc .back { display: inline-block; margin-top: 56px; font-weight: 500; }

/* ---------- Reduced motion: everything shows finished ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
  .wordmark .strike path, .wont .strike-line path, .big-tally path { stroke-dashoffset: 0 !important; }
  .wordmark .y-letter { opacity: .45 !important; }
  .wordmark .fix { opacity: 1 !important; transform: rotate(-8deg) !important; }
  .wont li .words { color: var(--secondary) !important; }
  .caret { display: none; }
}

/* An undrawn pen line is fully hidden (round caps would otherwise leave a dot). */
.todo:not(.done) .strike-line path, .todo:not(.done) .check .tick, .tally .on:not(.inked),
.js .wordmark:not(.on) .strike path, .js .wont li:not(.struck) .strike-line path, .js .big-tally:not(.drawn) path { opacity: 0; transition-property: stroke-dashoffset, opacity; transition-delay: 0s, .5s; transition-duration: .5s, 0s; }

/* Monday's leftover, carried to Tuesday's first row. */
.leaf .todo.carried { position: relative; }
.carry { position: absolute; left: calc(100% + 2px); bottom: 50%; width: 34px; height: 44px; overflow: visible; pointer-events: none; }
.carry path { stroke-width: 1.6; }

.leaf .moved { display: inline-flex; align-items: center; gap: 3px; }
.leaf .moved svg { width: 20px; height: 12px; overflow: visible; }
.leaf .moved path { stroke-width: 1.6; }

@media (min-width: 900px) {
  .wont-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto 1fr; column-gap: clamp(36px, 6vw, 80px); align-items: start; }
  .wont-grid .h2 { grid-column: 1; grid-row: 1; }
  .wont-grid .wont-note { grid-column: 1; grid-row: 2; }
  .wont-grid .wont { grid-column: 2; grid-row: 1 / span 2; margin-top: 0; }
}

@media (max-width: 520px) {
  .leaf { padding: 16px 10px 20px; min-height: 200px; }
  .leaf-date b { font-size: 2.2rem; }
  .leaf .todo-text { font-size: .84rem; }
  .leaf .todo-meta { font-size: .64rem; }
}

/* ---------- Marks section ---------- */
/* ---------- Marks: more than done or not done ---------- */
/* Circles in --ring, marks in the accent pen, as in the app. */
:root {
  --mk-card: var(--paper);
  --mk-scrim: color-mix(in srgb, var(--ink) 7%, transparent);
  --mk-shadow: 0 1px 2px color-mix(in srgb, var(--ink) 6%, transparent), 0 12px 32px color-mix(in srgb, var(--accent) 16%, transparent);
  --mk-light: color-mix(in srgb, var(--accent) 13%, transparent);
}
@media (prefers-color-scheme: dark) {
  :root {
    /* Nearer is lighter: the menu floats a step above the page. */
    --mk-card: color-mix(in srgb, var(--paper) 90%, var(--ink));
    --mk-scrim: color-mix(in srgb, var(--strip) 55%, transparent);
    --mk-shadow: 0 1px 0 color-mix(in srgb, var(--ink) 6%, transparent) inset, 0 14px 36px color-mix(in srgb, var(--strip) 85%, transparent);
    --mk-light: color-mix(in srgb, var(--accent) 17%, transparent);
  }
}

.mk-ring { fill: none; stroke: var(--ring); stroke-width: 1.5; stroke-linecap: round; }
.mk-ink { fill: none; stroke: var(--accent); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.mk-ink.thin { stroke-width: 1.5; }
.mk-ink.tick { stroke-width: 2.4; }

/* The list beside the copy */
.mk-list { list-style: none; padding: 0; margin: 32px 0 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px 32px; max-width: var(--measure); }
@media (min-width: 520px) { .mk-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 32px; } }
.mk-list li { display: flex; align-items: flex-start; gap: 12px; }
.mk-ic { flex: none; width: 30px; height: 30px; margin-top: 2px; overflow: visible; }
.mk-ic.wide { width: 35.8px; margin-right: -5.8px; }
.mk-list b { display: block; font: 400 1.55rem/1.15 var(--serif); color: var(--ink); }
.mk-list small { display: block; margin-top: 3px; font: 400 .9rem/1.4 var(--sans); color: var(--secondary); }
.mk-plus { color: var(--accent); white-space: nowrap; }
.mk-plus svg { width: 13px; height: 13px; margin-right: 3px; vertical-align: -1px; overflow: visible; }
.mk-plus path { fill: none; stroke: var(--accent); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* The day page mock */
/* min-width: 0 so the one-line rows never widen the column on a phone. */
.mk-demo { position: relative; width: min(100%, 400px); min-width: 0; margin: 0 auto; }
#marks-title { text-wrap: balance; }
/* A second sheet peeking out behind, like a page in a pad. */
.mk-demo::before {
  content: ""; position: absolute; inset: 10px -8px -10px 10px; border-radius: 22px; transform: rotate(2.2deg);
  background: color-mix(in srgb, var(--paper) 95%, var(--ink)); border: 1px solid var(--lines);
}
.mk-page {
  position: relative; isolation: isolate; overflow: hidden;
  background: var(--paper); border: 1px solid var(--lines); border-radius: 22px;
  padding: 22px 20px 14px; font-family: var(--sans);
}
@media (prefers-color-scheme: dark) {
  .mk-page { border-color: color-mix(in srgb, var(--lines) 60%, var(--ink) 12%); }
  .mk-demo::before { background: color-mix(in srgb, var(--paper) 92%, var(--ink)); }
}
.mk-head { display: flex; align-items: baseline; gap: 10px; }
.mk-head b { font: 400 3rem/.9 var(--serif); letter-spacing: -.02em; }
.mk-head span { font: 400 1.35rem/1 var(--serif); color: var(--secondary); }
.mk-rule { display: block; width: 100%; height: 10px; margin: 12px 0 2px; }
.mk-rule path { fill: none; stroke: var(--lines); stroke-width: 1.4; stroke-linecap: round; vector-effect: non-scaling-stroke; }

/* Rows are one line each, so the menu and the finger land on fixed spots. */
.mk-body { position: relative; }
.mk-rows { list-style: none; margin: 0; padding: 0; }
.mk-row { display: flex; align-items: center; gap: 14px; height: 50px; position: relative; font-size: 1rem; }
.mk-row + .mk-row::before { content: ""; position: absolute; top: 0; left: 40px; right: 0; border-top: 1px solid var(--lines); }
.mk-c { flex: none; width: 26px; height: 26px; overflow: visible; }
.mk-t { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mk-meta { flex: none; font-size: .74rem; color: var(--accent); }
.mk-row.is-done .mk-t, .mk-row.is-quiet .mk-t { color: var(--secondary); }
.mk-row.is-done .mk-ring { stroke: color-mix(in srgb, var(--ring) 55%, var(--paper)); }
.mk-row.is-done .mk-ink { stroke: color-mix(in srgb, var(--accent) 70%, var(--paper)); }
.mk-w { position: relative; }
.mk-strike { position: absolute; left: -3px; top: 50%; width: calc(100% + 8px); height: 10px; margin-top: -4px; overflow: visible; }
.mk-strike path { fill: none; stroke: var(--secondary); stroke-width: 1.6; stroke-linecap: round; vector-effect: non-scaling-stroke; }

/* The held row stays clear of the dimmed page; its circle swells a touch under the finger. */
.mk-held { z-index: 2; }
.mk-held .mk-c { transition: transform .25s ease; }
.mk-demo[data-state="hold"] .mk-held .mk-c { transform: scale(1.1); }

/* The mark the pen draws into the held circle. Undrawn strokes are hidden fully (round caps leave a dot). */
.mk-m path { stroke-dasharray: 1; stroke-dashoffset: 1; opacity: 0; transition: stroke-dashoffset .18s ease, opacity 0s .18s; }
.mk-demo[data-mark="partial"] [data-m="partial"] path,
.mk-demo[data-mark="delegated"] [data-m="delegated"] path,
.mk-demo[data-mark="waiting"] [data-m="waiting"] path {
  stroke-dashoffset: 0; opacity: 1;
  transition: stroke-dashoffset .34s cubic-bezier(.45,0,.3,1) calc(.12s + var(--d, 0s)), opacity 0s calc(.12s + var(--d, 0s));
}
.mk-demo[data-mark="delegated"] [data-m="delegated"] path:first-child { transition-duration: .4s; }

/* Dimmed page under the menu */
.mk-scrim { position: absolute; inset: 0; z-index: 1; background: var(--mk-scrim); opacity: 0; transition: opacity .3s ease; pointer-events: none; }
.mk-demo[data-state="hold"] .mk-scrim { opacity: 1; }

/* The marks menu, anchored just below the held circle: its icons sit right under the row's circle. */
.mk-menu {
  position: absolute; z-index: 3; top: 104px; left: -14px; width: 196px;
  padding: 5px; border-radius: 16px; border: 1px solid var(--lines);
  background: var(--mk-card); box-shadow: var(--mk-shadow);
  transform-origin: 27px 0; opacity: 0; transform: translateY(-6px) scale(.96);
  transition: opacity .2s ease, transform .28s cubic-bezier(.3,.7,.3,1);
}
@media (prefers-color-scheme: dark) { .mk-menu { border-color: color-mix(in srgb, var(--lines) 70%, var(--ink) 10%); } }
.mk-demo[data-state="hold"] .mk-menu { opacity: 1; transform: none; }
.mk-opt { position: relative; display: flex; align-items: center; gap: 13px; height: 44px; padding: 0 8px; font-weight: 500; font-size: .98rem; }
.mk-opt svg { flex: none; width: 26px; height: 26px; overflow: visible; }
.mk-light {
  position: absolute; left: 5px; right: 5px; top: 5px; height: 44px; border-radius: 11px;
  background: var(--mk-light); opacity: 0;
  transform: translateY(calc(var(--pick, 0) * 44px));
  transition: transform .3s cubic-bezier(.3,.7,.3,1), opacity .2s ease;
}
.mk-demo[data-pick="0"] { --pick: 0; }
.mk-demo[data-pick="1"] { --pick: 1; }
.mk-demo[data-pick="2"] { --pick: 2; }
.mk-demo[data-pick="3"] { --pick: 3; }
.mk-demo:is([data-pick="0"], [data-pick="1"], [data-pick="2"], [data-pick="3"]) .mk-light { opacity: 1; }

/* A soft fingertip: on the held circle, then sliding down to the row it's over. */
.mk-touch {
  position: absolute; z-index: 4; left: -7px; top: 55px; width: 40px; height: 40px; border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--accent) 26%, transparent) 0 55%, transparent 72%);
  opacity: 0; transform: translateY(0) scale(.7); pointer-events: none;
  transition: transform .32s cubic-bezier(.3,.7,.3,1), opacity .25s ease;
}
.mk-demo[data-state="hold"] .mk-touch { opacity: 1; transform: translateY(0) scale(1); }
/* Once it has slid onto a row it stays there as it lifts, rather than sliding back. */
.mk-demo:is([data-pick="0"], [data-pick="1"], [data-pick="2"], [data-pick="3"]) .mk-touch { transform: translateY(calc(57px + var(--pick) * 44px)) scale(.85); }
.mk-demo[data-state="hold"]:is([data-pick="0"], [data-pick="1"], [data-pick="2"], [data-pick="3"]) .mk-touch { transform: translateY(calc(57px + var(--pick) * 44px)) scale(1); }

@media (max-width: 380px) {
  .mk-page { padding-left: 16px; padding-right: 16px; }
  .mk-row { gap: 12px; }
}

/* ---------- More things ---------- */
/* ---------- And a few more things: notes in a margin ---------- */
/* The app's twelve accent colours, each in its light and dark shade (theme.ts `accents`). */
:root {
  --a-teal: #1F6E77; --a-jade: #0E7A5C; --a-green: #2F6F45; --a-leaf: #4A7A12;
  --a-saffron: #8F6200; --a-clay: #A44D2A; --a-berry: #A3305F; --a-plum: #74467F;
  --a-indigo: #4A4CC0; --a-blue: #2D5B9A; --a-sky: #0B6E92; --a-graphite: #3B4247;
}
@media (prefers-color-scheme: dark) {
  :root {
    --a-teal: #7CC4C9; --a-jade: #5FD3A8; --a-green: #8CCB9F; --a-leaf: #A9D46A;
    --a-saffron: #F0C060; --a-clay: #E8A684; --a-berry: #F29CC3; --a-plum: #CBA7D6;
    --a-indigo: #A9ABF7; --a-blue: #93B6E6; --a-sky: #6CC8EA; --a-graphite: #C5CCD0;
  }
}

.ft-notes {
  list-style: none; padding: 0; margin: clamp(32px, 5vw, 56px) 0 0;
  display: grid; grid-template-columns: 1fr; column-gap: clamp(28px, 4vw, 56px);
}
@media (min-width: 640px) { .ft-notes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .ft-notes { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Each note: a small pen drawing hangs in the margin, left of a faint margin line, like a notebook. */
.ft-note { position: relative; padding: 22px 0 26px 64px; border-top: 1px solid var(--lines); }
.ft-note::before {
  content: ""; position: absolute; left: 50px; top: 18px; bottom: 18px; width: 1px;
  background: color-mix(in srgb, var(--accent) 30%, transparent);
}
.ft-pic { position: absolute; left: -2px; top: 20px; width: 42px; height: 42px; overflow: visible; transform: rotate(-4deg); }
.ft-note:nth-child(even) .ft-pic { transform: rotate(3deg); }
.ft-ink { fill: none; stroke: var(--ink); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; opacity: .62; }
.ft-ink.ft-dots { stroke-width: 3; }
.ft-acc { fill: none; stroke: var(--accent); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
@media (prefers-color-scheme: dark) { .ft-ink { opacity: .7; } }

.ft-title { text-wrap: balance; margin: 0; font: 400 1.6rem/1.12 var(--serif); letter-spacing: -.005em; color: var(--ink); }
.ft-note p { margin: 8px 0 0; font-size: .97rem; line-height: 1.55; color: var(--secondary); max-width: 24rem; }
.ft-note q { quotes: "“" "”"; color: var(--ink); font-weight: 500; }

/* "with Todae Plus": the pen sparkle and the words, never a badge. */
.ft-plus { color: var(--accent); white-space: nowrap; }
.ft-note p.ft-plus { margin-top: 6px; color: var(--accent); font-size: .9rem; font-weight: 500; }
.ft-plus svg { width: 13px; height: 13px; margin-right: 4px; vertical-align: -1px; overflow: visible; }
.ft-plus path { fill: none; stroke: var(--accent); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* Twelve ink dots, each a slightly different blob, the three free ones set apart. */
.ft-dots-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 12px 0 2px; }
.ft-dot { width: 13px; height: 13px; background: var(--c); border-radius: 52% 48% 55% 45% / 47% 55% 45% 53%; }
.ft-dot:nth-child(3n+2) { border-radius: 45% 55% 48% 52% / 55% 46% 54% 45%; transform: rotate(14deg); }
.ft-dot:nth-child(3n) { border-radius: 50% 50% 44% 56% / 52% 48% 52% 48%; transform: rotate(-10deg); }
.ft-gap { width: 1px; height: 16px; margin: 0 4px; background: var(--lines); }
@media (prefers-color-scheme: dark) { .ft-gap { background: color-mix(in srgb, var(--lines) 60%, var(--secondary)); } }

.ft-close { margin: clamp(28px, 4vw, 44px) 0 0; padding-top: 22px; border-top: 1px solid var(--lines); max-width: var(--measure); color: var(--secondary); font-size: 1.02rem; }