/* Light and dark themes: DejaVu Sans, one file per weight and slant. */
@font-face { font-family: "DejaVu Sans"; src: url("/fonts/DejaVuSans.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "DejaVu Sans"; src: url("/fonts/DejaVuSans-Bold.ttf") format("truetype"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "DejaVu Sans"; src: url("/fonts/DejaVuSans-ExtraLight.ttf") format("truetype"); font-weight: 200; font-style: normal; font-display: swap; }
@font-face { font-family: "DejaVu Sans"; src: url("/fonts/DejaVuSans-Oblique.ttf") format("truetype"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "DejaVu Sans"; src: url("/fonts/DejaVuSans-BoldOblique.ttf") format("truetype"); font-weight: 700; font-style: italic; font-display: swap; }

/* Themes override these variables, e.g. :root[data-theme="medieval"] { ... } */
:root {
  --bg: #fff;
  --fg: #111;
  --muted: #888;
  --line: #ddd;
  --radius: 16px;
  --font: "DejaVu Sans", Arial, Helvetica, sans-serif;
  --chain-tint: 75% 88%; /* saturation and lightness of chain group colours */
  --chain-label: 50% 36%; /* a darker shade of the same colour, behind a chain's name */
  --chain-label-fg: #fff;
  --chain-ink: 55% 32%; /* the same shade as text: #tags and “#move · 2 of 3” */
  --backdrop: rgba(255, 255, 255, .8);
  --chip: var(--bg); /* fill of task chips and cards */
}
:root[data-theme="dark"] {
  --bg: #121212;
  --fg: #eee;
  --muted: #999;
  --line: #3a3a3a;
  --chain-tint: 45% 26%;
  --chain-label: 45% 16%;
  --chain-label-fg: #eee;
  --chain-ink: 60% 72%; /* on a dark page, text has to be lighter to read */
  --backdrop: rgba(0, 0, 0, .7);
  color-scheme: dark;
}

/* Medieval: blackletter on a sky blue ground, with cream clouds (see .sky and .cloud-curtain). */
@font-face {
  font-family: "Hamlet";
  src: url("/fonts/Hamlet-Tertia18.otf") format("opentype");
  /* This font sits high on its line; these move it down so text is centred in buttons and chips. */
  ascent-override: 84%;
  descent-override: 16%;
  line-gap-override: 0%;
  font-weight: 100 900; /* the one cut serves every weight, so nothing is faux-bolded */
  font-display: swap;
}
:root[data-theme="medieval"] {
  --bg: #9fd0ee;
  --fg: #2a1a12;
  --muted: #3f566b;
  --line: #5f8fb4;
  --font: "Hamlet", "Old English Text MT", fantasy;
  --chain-tint: 70% 85%;
  --chain-label: 55% 34%;
  --chain-ink: 60% 30%;
  --backdrop: rgba(159, 208, 238, .8);
  --chip: #fff;
}

/* Rainy day: an overcast grey sky with rain falling behind the page (see .rain and js/rain.js). */
:root[data-theme="rainy"] {
  --bg: #a9b2bc;
  --fg: #1d2329;
  --muted: #434d57;
  --line: #77828e;
  --chain-tint: 55% 86%;
  --chain-label: 40% 34%;
  --chain-ink: 45% 28%;
  --backdrop: rgba(169, 178, 188, .8);
  --chip: #e6e9ed;
}

/* Text mode: restyles what the user typed (chips, task names, text boxes) without changing what is stored. */
:root[data-case="lower"] :is(.chip, .ut, input:not([type]), textarea) { text-transform: lowercase; }
:root[data-case="upper"] :is(.chip, .ut, input:not([type]), textarea) { text-transform: uppercase; }
:root[data-case] ::placeholder { text-transform: none; }

* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--fg); font: 16px/1.4 var(--font); }

header {
  position: fixed; inset: 0 0 auto 0; z-index: 10;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  padding: 12px 16px; pointer-events: none;
}
header > * { pointer-events: auto; }
.titles { grid-row: 1; grid-column: 2; text-align: center; }
header h1 { margin: 0; font-size: 20px; font-weight: 700; }
#step-title { margin: 0; font-size: 14px; color: var(--muted); }
#back { grid-row: 1; grid-column: 1; justify-self: start; }
.header-right { grid-row: 1; grid-column: 3; justify-self: end; display: flex; align-items: center; gap: 10px; }

main { max-width: 900px; margin: 0 auto; padding: 84px 16px 32px; }
main.full { position: fixed; inset: 0; max-width: none; padding: 0; overflow: hidden; }
main.narrow { max-width: 480px; text-align: center; }

button, input, textarea { font: inherit; color: inherit; }
button {
  padding: 8px 16px; border: 1px solid var(--fg); border-radius: var(--radius);
  background: var(--fg); color: var(--bg); cursor: pointer;
}
button.ghost { background: none; color: var(--fg); border-color: var(--line); }
button:disabled { opacity: .3; cursor: default; }
input, textarea {
  padding: 8px 12px; border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--bg); outline: none;
}
input:focus, textarea:focus { border-color: var(--fg); }
.hint { color: var(--muted); font-size: 14px; margin: 0 0 16px; text-align: center; }
.row { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.stack { display: flex; flex-direction: column; gap: 12px; align-items: stretch; }

/* The squoval */
.chip {
  display: inline-block; max-width: 260px; padding: 8px 14px;
  border: 1px solid var(--fg); border-radius: var(--radius);
  background: var(--chip); color: var(--fg); overflow-wrap: anywhere; user-select: none;
}
.chip.on { box-shadow: 0 0 0 3px var(--fg); font-weight: bold; }
.chip.on::before { content: "✓ "; }

/* Tasks in the same chain share a background colour (--hue is set per chain). */
.chained { background: hsl(var(--hue) var(--chain-tint)); }
span.chained { padding: 2px 10px; border-radius: 10px; }
.chip.draggable { cursor: grab; touch-action: none; }
.chip.dragging { opacity: .25; }
.chip.ghost-drag { position: fixed; z-index: 100; pointer-events: none; margin: 0; }
/* Parking-lot items while they are being sorted in with everything else. */
.chip.new:not(.ghost-drag) { position: relative; }
.chip.new::after {
  content: "new"; position: absolute; top: -9px; left: 10px; padding: 0 5px; border-radius: 6px;
  background: var(--fg); color: var(--bg); font-size: 10px; font-weight: 700; line-height: 14px; text-transform: none;
}
.chip.ghost-drag.new::after { display: none; }

/* Several chips picked to move together (sort screen): drag a box around them, or tap them. */
.chip.selected { outline: 2px dashed var(--fg); outline-offset: 3px; }
.chip.ghost-drag { outline: none; }
.drag-count {
  position: absolute; top: -10px; right: -10px; min-width: 22px; padding: 2px 6px; border-radius: 11px;
  background: var(--fg); color: var(--bg); font-size: 12px; font-weight: 700; line-height: 18px; text-align: center;
}
.marquee {
  position: fixed; z-index: 60; pointer-events: none;
  border: 1px dashed var(--fg); background: color-mix(in srgb, var(--fg) 8%, transparent);
}
body.selecting { user-select: none; cursor: crosshair; }
.chips { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.chips button.chip { font: inherit; cursor: pointer; }

/* 0. Welcome */
.welcome { margin-top: 25vh; }

/* 1. Brain dump */
.pile .chip { position: absolute; top: 0; left: 0; will-change: transform; }
.dump-form {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  display: flex; gap: 8px; width: min(460px, calc(100vw - 32px));
}
.dump-form input { flex: 1; min-width: 0; }

/* 2. Sort */
.zone { border: 1px solid var(--line); border-radius: var(--radius); padding: 12px; }
.zone h2 { margin: 0 0 12px; font-size: 14px; font-weight: 600; text-align: center; }
.zone.unsorted { min-height: 70px; border-style: dashed; margin-bottom: 16px; }
.zones { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.zones .zone { min-height: 50vh; }
.zones .chips { flex-direction: column; align-items: center; }

/* 3. Chain */
/* A chain's name, set with a #tag; click to rename. Unnamed chains of two or more offer “+ name”. */
.chain-name { padding: 4px 10px; font-size: 14px; font-weight: 700; background: var(--fg); color: var(--bg); }
.chain-name.hued { background: hsl(var(--hue) var(--chain-label)); border-color: hsl(var(--hue) var(--chain-label)); color: var(--chain-label-fg); }
:is(.tag, .chain-note).hued { color: hsl(var(--hue) var(--chain-ink)); }
.chain-name.unnamed { font-weight: 400; background: none; color: var(--muted); border-style: dashed; border-color: var(--line); }
/* The #tag after an item's text, before it is chained. */
.tag { color: var(--muted); font-size: .85em; }
.board { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; align-content: flex-start; min-height: 60vh; }
.chain { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.chain .link { color: var(--muted); }

/* 7. Do */
.timer { display: flex; flex-direction: column; align-items: center; margin: 16px 0; }
/* The filled wedge is the time left; it shrinks back towards 12 o'clock. */
.pie {
  width: 180px; aspect-ratio: 1; border: 1px solid var(--fg); border-radius: 50%;
  background: conic-gradient(var(--fg) calc(var(--left, 0) * 1turn), transparent 0);
}
.clock { font-size: 72px; font-weight: 200; font-variant-numeric: tabular-nums; margin: 8px 0 0; }
.card { display: block; width: 100%; padding: 16px; text-align: left; background: var(--chip); color: var(--fg); }
.card.chained { background: hsl(var(--hue) var(--chain-tint)); }
.card ul, .quest { margin: 6px 0 0; padding-left: 20px; text-align: left; }
.quest { list-style: none; padding: 0; }
.quest li, .summary li { margin: 4px 0; }
.nudge { margin: 0; }
/* “#move · 2 of 5” above a task in a named chain. */
.chain-note { display: block; font-size: 13px; color: var(--muted); }
li .chain-note { display: inline; }
.nudges .card { padding: 10px 14px; }
.nudges .row { margin-top: 16px; }
.parking { margin-top: 32px; padding-top: 16px; border-top: 1px solid var(--line); }
.parking summary { color: var(--muted); text-decoration: underline; cursor: pointer; list-style: none; }
.parking summary::-webkit-details-marker { display: none; }
.parking[open] summary { margin-bottom: 12px; }
.parking input { flex: 1; min-width: 0; }
/* Session progress (upper right, Do step only): a blank circle. Hovering or focusing it sweeps a wedge
   round from 12 o'clock to the share of tasks done, and shows the details card. */
@property --fill { syntax: "<number>"; inherits: false; initial-value: 0; }
.progress { position: relative; }
.progress-ring {
  width: 34px; aspect-ratio: 1; border: 1px solid var(--fg); border-radius: 50%; cursor: help;
  background: conic-gradient(var(--fg) calc(var(--fill) * 1turn), var(--bg) 0);
  outline-offset: 3px; transition: --fill .25s ease-in;
}
.progress:is(:hover, :focus-within) .progress-ring { --fill: var(--done, 0); transition: --fill .9s cubic-bezier(.3, 0, .2, 1); }
@media (prefers-reduced-motion: reduce) { .progress-ring, .progress:is(:hover, :focus-within) .progress-ring { transition: none; } }
.progress-card {
  display: none; position: absolute; top: calc(100% + 8px); right: 0; z-index: 30; width: 240px;
  padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--bg); color: var(--fg); font-size: 14px; text-align: left;
}
.progress:is(:hover, :focus-within) .progress-card { display: block; }
.progress-card p { margin: 0 0 8px; }
.progress-card .bar { height: 6px; margin: 0 0 10px; border: 1px solid var(--fg); border-radius: 4px; background: linear-gradient(90deg, var(--fg) calc(var(--done, 0) * 100%), transparent 0); }
.progress-card table { width: 100%; border-collapse: collapse; }
.progress-card td { padding: 2px 0; }
.progress-card td:last-child { text-align: right; font-variant-numeric: tabular-nums; }
.progress-card .hint { margin: 8px 0 0; text-align: left; font-size: 13px; }
.big { font-size: 22px; margin: 8px 0; }
.link-btn { background: none; border: none; color: var(--muted); text-decoration: underline; padding: 4px; }
.summary { text-align: left; }
.summary h2 { font-size: 14px; margin: 16px 0 4px; }
.summary ul { margin: 0; padding-left: 20px; }
.status { min-height: 1.4em; font-size: 14px; color: var(--muted); }

/* After the brain dump: Pick Next or Plan First. */
.card.mode { display: flex; flex-direction: column; gap: 4px; }
.card.mode span { color: var(--muted); font-size: 14px; }
.card.mode.chosen { box-shadow: 0 0 0 2px var(--fg); }

/* 8. Plan (Plan First only): a timeline on the left, the tasks still to place on the right. */
.plan-controls { margin-bottom: 8px; align-items: center; }
.plan-controls label { display: flex; align-items: center; gap: 6px; }
.plan-controls input[type="number"] { width: 5.5em; }
.plan-summary strong { color: var(--fg); }
.plan-grid { display: grid; grid-template-columns: 1fr minmax(180px, 260px); gap: 24px; align-items: start; margin-top: 8px; }
.timeline-wrap { padding: 8px 0 24px 64px; }
.timeline { position: relative; border-left: 1px solid var(--line); }
.tick { position: absolute; left: 0; right: 0; border-top: 1px dotted var(--line); }
.tick.major { border-top-style: solid; }
.tick span { position: absolute; right: calc(100% + 8px); top: -.7em; font-size: 12px; color: var(--muted); white-space: nowrap; }
.overtime { position: absolute; left: 0; right: 0; background: repeating-linear-gradient(-45deg, transparent 0 6px, color-mix(in srgb, var(--fg) 8%, transparent) 6px 12px); }
.block {
  position: absolute; left: 6px; right: 6px; z-index: 1; overflow: hidden;
  border: 1px solid var(--fg); border-radius: 8px; background: var(--chip); color: var(--fg);
  cursor: grab; touch-action: none; user-select: none;
}
.block.chained { background: hsl(var(--hue) var(--chain-tint)); }
.block.moving { z-index: 5; cursor: grabbing; box-shadow: 0 4px 14px rgba(0, 0, 0, .2); }
.block.leaving { opacity: .5; }
.block.done { opacity: .45; cursor: default; }
.block.done .block-text { text-decoration: line-through; }
.block.over { border-style: dashed; }
.block-body { padding: 4px 26px 4px 10px; font-size: 14px; line-height: 1.3; }
.block.tiny .block-body { padding-top: 0; padding-bottom: 0; font-size: 12px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }
.block-time { color: var(--muted); font-size: 12px; white-space: nowrap; }
.block-x { position: absolute; top: 2px; right: 4px; padding: 0 6px; border: none; background: none; color: var(--muted); font-size: 16px; line-height: 1.2; }
.grip { position: absolute; left: 0; right: 0; height: 7px; cursor: ns-resize; z-index: 2; }
.grip.top { top: -1px; }
.grip.bottom { bottom: -1px; }
.block:hover .grip.bottom { border-bottom: 3px solid var(--fg); }
.block:hover .grip.top { border-top: 3px solid var(--fg); }
.pool { position: sticky; top: 84px; border: 1px dashed var(--line); border-radius: var(--radius); padding: 12px; }
.pool h2 { margin: 0 0 12px; font-size: 14px; text-align: center; }
.pool .chip { display: block; max-width: none; cursor: grab; touch-action: none; }

/* 9. Do, Plan First: how the plan is going and what is coming up. */
.plan-status { margin: 8px 0 0; }
.schedule-title { font-size: 14px; margin: 16px 0 0; text-align: left; }
.schedule { list-style: none; margin: 0; padding: 0; text-align: left; }
.schedule li { display: grid; grid-template-columns: 5.5em 1fr auto; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--line); }
.schedule li.now { font-weight: 700; }
.schedule .at, .schedule .for { color: var(--muted); font-variant-numeric: tabular-nums; font-size: 14px; }

dialog { border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; width: min(380px, calc(100vw - 32px)); background: var(--bg); color: var(--fg); }
dialog::backdrop { background: var(--backdrop); }
dialog p { margin: 0 0 12px; }
dialog input, dialog textarea { width: 100%; margin-bottom: 12px; }
dialog .row { justify-content: flex-end; }

.fireworks { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 50; pointer-events: none; }

/* Medieval theme: blackletter runs small, so everything is set a little larger. */
:root[data-theme="medieval"] body { font-size: 19px; }
:root[data-theme="medieval"] :is(.hint, #step-title, .status, .zone h2, .summary h2) { font-size: 17px; }
:root[data-theme="medieval"] header h1 { font-size: 26px; font-weight: 400; }
:root[data-theme="medieval"] :is(strong, b, h2, h3, h4, .chip.on) { font-weight: 400; }

:root[data-theme="medieval"] .dump-form input { background: var(--chip); }

/* Rainy day theme: light grey buttons and text boxes on the grey sky. */
:root[data-theme="rainy"] { background: #bfc7cf linear-gradient(#8d98a4, #bfc7cf) fixed; }
:root[data-theme="rainy"] body { background: none; }
:root[data-theme="rainy"] button:not(.ghost, .link-btn, .card, .chip, .chain-name.hued) { background: var(--chip); color: var(--fg); border-color: var(--line); }
:root[data-theme="rainy"] :is(input, textarea) { background: var(--chip); }
.rain { display: none; }
:root[data-theme="rainy"] .rain { display: block; position: fixed; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; }

/* Small clouds drifting across the sky behind the page. */
.sky { display: none; }
:root[data-theme="medieval"] .sky { display: block; position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.sky img { position: absolute; left: 0; top: var(--top); height: var(--h); animation: drift var(--t) linear infinite; animation-delay: calc(var(--t) * var(--at) * -1); }
@keyframes drift { from { transform: translateX(-100%); } to { transform: translateX(100vw); } }

/* An ornament in each corner, behind the page. The image is drawn for the bottom left and mirrored for the rest. */
.corners { display: none; }
:root[data-theme="medieval"] .corners { display: block; position: fixed; inset: 0; z-index: -1; pointer-events: none; }
.corners img { position: absolute; width: clamp(72px, 16vw, 160px); }
.corners img:nth-child(1) { left: 6px; bottom: 6px; }
.corners img:nth-child(2) { right: 6px; bottom: 6px; transform: scaleX(-1); }
.corners img:nth-child(3) { left: 6px; top: 6px; transform: scaleY(-1); }
.corners img:nth-child(4) { right: 6px; top: 6px; transform: scale(-1); }
:root[data-theme="medieval"] #back { background: var(--bg); }

/* The six clouds that part to reveal the welcome message (placed over it by js/clouds.js). */
.cloud-bank { position: fixed; z-index: 40; pointer-events: none; }
.cloud-bank img { position: absolute; width: 230px; translate: -50% -50%; animation: part 3s cubic-bezier(.5, 0, .8, .4) both; }
@keyframes part { 0%, 25% { transform: none; } 100% { transform: translateX(var(--dx)); } }

@media (prefers-reduced-motion: reduce) {
  .sky img { animation: none; left: calc(var(--at) * 100%); }
}

/* Menu (bottom right) and the pages it opens */
#menu { position: fixed; right: 16px; bottom: 16px; z-index: 20; background: var(--bg); font-size: 18px; line-height: 1; padding: 10px 14px; }
.menu-list {
  position: fixed; right: 16px; bottom: 64px; z-index: 20;
  display: flex; flex-direction: column; gap: 8px; align-items: stretch;
}
.menu-list button { background: var(--bg); text-align: left; }
dialog.page { width: min(560px, calc(100vw - 32px)); text-align: left; }
dialog.page > form > h2 { margin: 0 0 16px; font-size: 20px; }
.markdown { margin-bottom: 16px; overflow-wrap: anywhere; }
.markdown h2 { font-size: 20px; margin: 0 0 12px; }
.markdown h3 { font-size: 16px; margin: 20px 0 6px; }
.markdown h4 { font-size: 14px; margin: 16px 0 4px; }
.markdown ul, .markdown ol { margin: 0 0 12px; padding-left: 22px; }
.markdown li { margin: 4px 0; }
.markdown a { color: inherit; }
.markdown code { font-family: ui-monospace, monospace; font-size: .9em; padding: 1px 5px; border: 1px solid var(--line); border-radius: 6px; }
.markdown hr { border: none; border-top: 1px solid var(--line); margin: 16px 0; }
.markdown em { color: var(--muted); }

@media (max-width: 600px) {
  .plan-grid { grid-template-columns: 1fr 140px; gap: 12px; }
  .timeline-wrap { padding-left: 52px; }
  .zones { grid-template-columns: 1fr; }
  .zones .zone { min-height: 90px; }
  .clock { font-size: 56px; }
  .pie { width: 140px; }
}