/* styles/core.css */
:root {
  --paper: #f6f3ed;
  --surface: #fbfaf7;
  --surface-strong: #ffffff;
  --ink: #1c1a17;
  --muted: #706a62;
  /* Quiet text (hours, eyebrows, hints) reaches 4.5:1 on paper, cards and --soft (WCAG AA). In light
     only --muted's own value does that on --soft, so light faint text is muted and its step down comes
     from size and weight; dark keeps a lighter step (styles/theme.css). Icons, chevrons, dots and
     switch tracks use --faint-mark, at least 3:1 on every surface. */
  --faint: #706a62;
  --faint-mark: #8c867f;
  --line: #ddd8d0;
  --line-strong: #c7c0b6;
  --soft: #efebe4;
  --accent: #8b6b4f;
  --danger: #8c4e45;
  --hour-line: color-mix(in srgb, #8f8a83 22%, transparent);
  /* The scrollbar (below), the same set in welcome/landing.css, legal/legal.css and src/features/pip-styles.js:
     a 12px gutter whose thumb is 6px at rest (3px of transparent border round it) and 8px under the pointer
     or while dragged, darker then. */
  --scrollbar-size: 12px;
  --scrollbar-inset: 3px;
  --scrollbar-inset-active: 2px;
  --scrollbar-thumb-min: 2.5rem;
  --scrollbar-thumb: color-mix(in srgb, var(--line-strong) 62%, var(--paper));
  --scrollbar-thumb-hover: color-mix(in srgb, var(--muted) 46%, var(--paper));
  --hour: 72px;
  --visible-hours: 16;
  --schedule-pad-top: 14px;
  --schedule-pad-bottom: 16px;
  --radius: 12px;
  --shadow: 0 18px 60px rgba(25, 22, 17, .14);
  --icon-size: 20px;
  --planner-control-font: .86rem;
  --planner-control-weight: 600;
  --schedule-title-font: .76rem;
  --schedule-title-font-micro: .68rem;
  --schedule-note-font: .61rem;
  --z-mobile-action: 170;
  --z-mobile-dock: 180;
  --mobile-dock-clearance: calc(56px + max(8px, env(safe-area-inset-bottom)));
  --z-modal: 900;
  --z-modal-stacked: 920;
  --z-popover: 960;
  --text-edit-cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='24' viewBox='0 0 16 24'%3E%3Cpath d='M8 2v20M4.5 2h7M4.5 22h7' fill='none' stroke='%231c1a17' stroke-width='1.35' stroke-linecap='round'/%3E%3C/svg%3E") 8 12, text;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ink);
  background: var(--paper);
}

* { box-sizing: border-box; }

html,
body { width: 100%; height: 100%; }

body {
  margin: 0;
  overflow: hidden;
  background: var(--paper);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}

button,
input,
textarea { font: inherit; color: inherit; }

button,
a { -webkit-tap-highlight-color: transparent; }

h1, h2, h3, h4, h5, h6 { text-wrap: pretty; }

/* UI icons share one size; data-visualization SVGs can opt into their own dimensions. */
svg {
  width: var(--icon-size);
  height: var(--icon-size);
}

button { border: 0; }

a { color: inherit; }

[hidden] { display: none !important; }

/* Bemorin-style scrollbar: no arrows, no track, only a light rounded thumb in
   a 12px gutter, 6px wide at rest and 8px, darker, under the pointer or while
   dragged — easy to grab, calm the rest of the time, in both themes (it
   follows --line-strong and --muted). The sizes are the --scrollbar-* tokens
   above. Chromium and Safari draw it from the ::-webkit-scrollbar parts below,
   which Chromium ignores as soon as the standard scrollbar-width /
   scrollbar-color are set (and then draws its own, with arrows), so those are
   for the other browsers only — as in welcome/landing.css and legal/legal.css.
   Firefox can't take a width: it keeps `thin` (about 8px, no arrows, close to
   this thumb), not `auto` (a wider classic bar, with arrows on Windows). A
   scroller that hides its bar sets scrollbar-width: none and
   ::-webkit-scrollbar { display: none }. */

@supports not selector(::-webkit-scrollbar) {
  html,
  * { scrollbar-width: thin; scrollbar-color: var(--scrollbar-thumb) transparent; }
}

*::-webkit-scrollbar { width: var(--scrollbar-size); height: var(--scrollbar-size); }

*::-webkit-scrollbar-button { display: none; width: 0; height: 0; }

*::-webkit-scrollbar-track,
*::-webkit-scrollbar-track-piece,
*::-webkit-scrollbar-corner { background: transparent; }

*::-webkit-scrollbar-thumb {
  min-height: var(--scrollbar-thumb-min);
  border: var(--scrollbar-inset) solid transparent;
  border-radius: 999px;
  background: var(--scrollbar-thumb);
  background-clip: padding-box;
}

*::-webkit-scrollbar-thumb:hover,
*::-webkit-scrollbar-thumb:active {
  border-width: var(--scrollbar-inset-active);
  background: var(--scrollbar-thumb-hover);
  background-clip: padding-box;
}

.planner {
  width: min(1360px, calc(100% - 28px));
  height: 100dvh;
  margin: 0 auto;
  padding: 12px 0 14px;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden;
}

/* Header */

.topbar {
  min-height: 60px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) max-content;
  align-items: center;
  gap: 12px;
  padding: 0 0 11px;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}

/* View · ‹ Now › · date: the place switch keeps the left edge, the navigator
   sits at a fixed point between equal halves, and the date reads to its right.
   A longer month or week label only grows the date to the right; no control
   moves with it. */
.date-identity {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(max-content, 1fr) auto minmax(0, 1fr);
  align-items: center;
  justify-self: stretch;
  gap: 10px;
}

.date-identity > .view-toggle-button,
.date-identity > .view-switch { grid-row: 1; grid-column: 1; justify-self: start; }

.date-identity > .date-nav { grid-row: 1; grid-column: 2; }

/* Never wider than its column (its padding sits in the -5px margins of the picker style), so fitHeaderDate() can shorten it. */
.date-title { grid-row: 1; grid-column: 3; justify-self: start; min-width: 0; max-width: calc(100% + 10px); }

.eyebrow,
.section-kicker,
.modal__eyebrow {
  margin: 0 0 3px;
  color: var(--faint);
  font-size: .64rem;
  font-weight: 660;
  text-transform: uppercase;
  letter-spacing: .078em;
}

.topbar h1 {
  margin: 0;
  font-size: 1.18rem;
  line-height: 1.14;
  letter-spacing: -.035em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

[data-date-medium],
[data-date-compact],
[data-date-short] { display: none; }
.date-title[data-date-variant="medium"] [data-date],
.date-title[data-date-variant="compact"] [data-date] { display: none; }
.date-title[data-date-variant="medium"] [data-date-medium] { display: inline; }
.date-title[data-date-variant="compact"] [data-date-compact] { display: inline; }
.date-title[data-date-variant="short"] [data-date],
.date-title[data-date-variant="short"] [data-date-medium] { display: none; }
.date-title[data-date-variant="short"] [data-date-short] { display: inline; }

.date-nav,
.actions { display: flex; align-items: center; gap: 3px; flex: 0 0 auto; }

.actions { justify-self: end; margin-left: 0; }

.icon-button {
  width: 34px;
  height: 34px;
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  text-decoration: none;
  transition: color 140ms ease, background-color 140ms ease, border-color 140ms ease, transform 160ms cubic-bezier(.22,1,.36,1);
}

.icon-button:hover,
.icon-button:focus-visible {
  outline: 0;
  border-color: var(--line);
  background: var(--surface);
  color: var(--ink);
}

.icon-button:active { transform: scale(.94); }

.icon-button svg,
.task-action svg,
.inline-add-button svg,
.select-trigger svg,
.option-check,
.bemorin-footer svg {


  fill: none;
  stroke: currentColor;
  stroke-width: 1.55;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.icon-button .icon-fill,
.task-action .icon-fill,
.bemorin-footer .icon-fill { fill: currentColor; stroke: none; }

.icon-button--today { color: var(--ink); }

.action-popover-wrap { position: relative; display: flex; }

.app-menu {
  position: absolute;
  z-index: 40;
  right: 0;
  top: calc(100% + 6px);
  min-width: 138px;
  display: grid;
  gap: 2px;
  padding: 5px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface-strong);
  box-shadow: 0 12px 30px rgba(20, 18, 15, .09);
}

.app-menu button {
  padding: 8px 9px;
  border-radius: 7px;
  background: transparent;
  color: var(--muted);
  text-align: left;
  font-size: .74rem;
  cursor: pointer;
}

.app-menu button:hover,
.app-menu button:focus-visible { outline: 0; color: var(--ink); background: var(--soft); }

/* Main workspace */

.workspace {
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(320px, .82fr) minmax(560px, 1.5fr);
  gap: clamp(30px, 4.2vw, 64px);
  padding-top: 16px;
  overflow: hidden;
}

.pane-scroll {
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 10px 10px 28px 0;
}

.left {
  display: grid;
  align-content: start;
  gap: 24px;
}

.section-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 9px;
}

.section-head h2,
.modal__header h2 {
  margin: 0;
  font-size: .94rem;
  letter-spacing: -.025em;
}

/* Focus */

.focus label { display: grid; gap: 7px; }

.field-label { color: var(--muted); font-size: .71rem; font-weight: 650; }

.focus input {
  width: 100%;
  padding: 5px 0 9px;
  border: 0;
  border-bottom: 1px solid var(--line-strong);
  background: transparent;
  outline: 0;
  font-size: var(--planner-control-font);
  letter-spacing: -.02em;
  transition: border-color 140ms ease;
}

.focus input:focus { border-color: var(--ink); }

.focus input::placeholder,
.task-add::placeholder,
.item-input::placeholder,
.notes::placeholder,
.form-field input::placeholder { color: color-mix(in srgb, var(--muted) 55%, transparent); }

/* Priority / task cards */

.mit { padding: 0; }

.priorities,
.tasks {
  list-style: none;
  display: grid;
  gap: 6px;
  padding: 0;
  margin: 0;
}

.tasks { overflow: visible; }

.item-row {
  position: relative;
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr) auto;
  column-gap: 9px;
  align-items: start;
  min-height: 42px;
  padding: 9px 8px 9px 10px;
  border-radius: 10px;
  background: var(--surface);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--line) 82%, transparent);
  transition: background-color 150ms ease, box-shadow 150ms ease, transform 180ms cubic-bezier(.22,1,.36,1), opacity 150ms ease;
}

.mit .item-row {
  min-height: 48px;
  padding: 11px 9px 11px 11px;
  background: var(--surface-strong);
  box-shadow: inset 0 0 0 1px var(--line);
}

.item-row:hover { box-shadow: inset 0 0 0 1px var(--line-strong); }

.item-main { min-width: 0; display: grid; gap: 4px; align-self: center; }

.mit .item-input { font-weight: 650; letter-spacing: -.025em; }

.item-meta { display: flex; align-items: center; gap: 7px; margin-top: 1px; color: var(--faint); font-size: .64rem; }

.item-actions { min-width: 30px; display: flex; justify-content: flex-end; align-items: center; }

.check {
  appearance: none;
  width: 16px;
  height: 16px;
  margin: 3px 0 0;
  border: 1px solid var(--line-strong);
  border-radius: 5px;
  background: var(--surface-strong);
  cursor: pointer;
  position: relative;
  transition: background-color 160ms ease, border-color 160ms ease, transform 180ms cubic-bezier(.22,1,.36,1), box-shadow 180ms ease;
}

.check::after {
  content: "";
  position: absolute;
  left: 4px;
  top: 1.5px;
  width: 4px;
  height: 8px;
  border: solid var(--surface-strong);
  border-width: 0 1.5px 1.5px 0;
  transform: rotate(45deg) scale(.4);
  opacity: 0;
  transition: opacity 130ms ease, transform 180ms cubic-bezier(.22,1,.36,1);
}

.check:checked { background: var(--ink); border-color: var(--ink); transform: scale(1.04); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ink) 7%, transparent); }

.check:checked::after { opacity: 1; transform: rotate(45deg) scale(1); }

.item-row.done .item-input { color: var(--ink); text-decoration: line-through; text-decoration-thickness: 1px; text-decoration-color: color-mix(in srgb, var(--muted) 58%, transparent); }

/* A done row recedes as a whole; its text is ink under that opacity, so it reads as muted and still
   reaches 4.5:1 (muted at .63 would not). */
.item-row.done { opacity: .63; }

.item-row.done .item-time,
.item-row.done .item-history { color: var(--ink); }

.task-action {
  width: 27px;
  height: 27px;
  display: grid;
  place-items: center;
  padding: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--faint);
  cursor: pointer;
  transition: color 120ms ease, background-color 120ms ease, opacity 120ms ease, transform 160ms cubic-bezier(.22,1,.36,1);
}

.task-action:hover,
.task-action:focus-visible { outline: 0; color: var(--ink); background: var(--soft); }

.task-action:active { transform: scale(.92); }

.drag-handle { cursor: grab; touch-action: none; }

.drag-handle:active { cursor: grabbing; }

.item-action-rail {
  position: absolute;
  z-index: 4;
  left: -58px;
  top: 50%;
  transform: translateY(-50%) translateX(4px);
  display: flex;
  align-items: center;
  gap: 1px;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface) 96%, transparent);
  box-shadow: 0 5px 18px rgba(28, 25, 21, .06);
  opacity: 0;
  pointer-events: none;
  transition: opacity 130ms ease, transform 170ms cubic-bezier(.22,1,.36,1);
}

/* Invisible bridge prevents the controls disappearing while crossing the gap. */

.task::before {
  content: "";
  position: absolute;
  left: -62px;
  top: 0;
  width: 62px;
  height: 100%;
}

.task:hover .item-action-rail,
.task:focus-within .item-action-rail {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(-50%) translateX(0);
}

.item-action-rail .task-action { width: 24px; height: 24px; }

.category-dot { width: 6px; height: 6px; border-radius: 999px; flex: 0 0 auto; }

.task-add-control { margin-top: 5px; }

.inline-add-button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 30px;
  padding: 5px 8px;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font-size: .76rem;
  font-weight: 560;
  cursor: pointer;
  transition: color 130ms ease, background-color 130ms ease;
}

.inline-add-button:hover,
.inline-add-button:focus-visible { outline: 0; color: var(--ink); background: var(--soft); }
.inline-add-button--compact { min-height: 28px; padding: 4px 7px; font-size: .7rem; }

.task-add-editor {
  width: 100%;
  padding: 8px 10px;
  border-radius: 10px;
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--line);
}

.task-add {
  width: 100%;
  padding: 0;
  border: 0;
  outline: 0;
  background: transparent;
  font-size: .83rem;
}

.task.is-task-dragging { opacity: .25; transform: scale(.995); }

.task.is-drop-target::after {
  content: "";
  position: absolute;
  z-index: 9;
  left: 8px;
  right: 8px;
  top: -4px;
  height: 2px;
  border-radius: 999px;
  background: var(--line-strong);
}

.task.is-drop-target.is-drop-after::after { top: auto; bottom: -4px; }

.task-drag-ghost {
  position: fixed;
  z-index: 250;
  pointer-events: none;
  margin: 0;
  opacity: .96;
  background: var(--surface-strong);
  box-shadow: 0 16px 38px rgba(31, 27, 22, .14), inset 0 0 0 1px var(--line-strong);
  transition: none;
}

.task-drag-ghost .item-action-rail { display: none; }

/* Notes */

.notes {
  display: block;
  width: 100%;
  min-height: 36px;
  max-height: none;
  resize: none;
  overflow: hidden;
  padding: 9px 10px;
  border: 0;
  border-radius: 10px;
  background: var(--surface);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--line) 84%, transparent);
  outline: 0;
  line-height: 1.55;
  font-size: var(--planner-control-font);
}

.notes:focus { box-shadow: inset 0 0 0 1px var(--line-strong), 0 0 0 3px color-mix(in srgb, var(--ink) 4%, transparent); }

/* Schedule */

.blocks {
  position: absolute;
  left: 52px;
  right: 0;
  top: var(--schedule-pad-top);
  bottom: var(--schedule-pad-bottom);
}

.resize {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 9px;
  cursor: ns-resize;
}

.resize::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 2px;
  width: 18px;
  height: 1px;
  transform: translateX(-50%) scaleX(.35);
  border-radius: 999px;
  background: color-mix(in srgb, var(--block-color, var(--accent)) 55%, transparent);
  opacity: 0;
  transition: opacity 120ms ease, transform 160ms cubic-bezier(.22,1,.36,1);
}

.time-line {
  position: absolute;
  z-index: 25;
  left: 0;
  right: 0;
  border-top: 1px solid #a34f47;
  pointer-events: none;
}

.time-line::after {
  content: "";
  position: absolute;
  left: 49px;
  top: -3px;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: #a34f47;
}

.time-line span {
  position: absolute;
  left: 0;
  top: 0;
  transform: translateY(-50%);
  padding: 1px 4px 1px 0;
  background: var(--paper);
  color: #95463e;
  font-size: .59rem;
  font-variant-numeric: tabular-nums;
}

.mobile-view-switch { display: none; }

/* Modals */

body.has-modal { overflow: hidden; }

.modal {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: grid;
  place-items: center;
  padding: clamp(.75rem, 3vw, 1.5rem);
  opacity: 0;
  pointer-events: none;
  transition: opacity 170ms ease;
}

.modal.is-open { opacity: 1; pointer-events: auto; }

.modal__backdrop {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  background: rgba(32, 29, 25, .30);
  backdrop-filter: blur(2px);
  cursor: default;
}

.modal__panel {
  position: relative;
  z-index: 1;
  width: min(100%, 40rem);
  max-height: min(760px, calc(100dvh - 2rem));
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 15px;
  background: var(--surface);
  box-shadow: var(--shadow);
  transform: translateY(8px) scale(.995);
  opacity: .96;
  transition: transform 180ms cubic-bezier(.22,1,.36,1), opacity 160ms ease;
}

.modal--small .modal__panel { width: min(100%, 28rem); }

.modal.is-open .modal__panel { transform: translateY(0) scale(1); opacity: 1; }

.modal__scroll {
  max-height: min(752px, calc(100dvh - 2.5rem));
  overflow-y: auto;
  overscroll-behavior: contain;
  margin: 5px;
  padding: .95rem .95rem 1rem 1rem;
}

.modal__close {
  position: absolute;
  z-index: 6;
  top: .78rem;
  right: .82rem;
  border-color: var(--line);
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  backdrop-filter: blur(4px);
}

.modal__header { padding-right: 2.75rem; margin-bottom: 1rem; }

.modal__header h2 { font-size: 1.06rem; }

.modal__header > p:last-child { margin: .38rem 0 0; color: var(--muted); font-size: .75rem; line-height: 1.55; max-width: 58ch; }

.modal__header strong { font-weight: 650; color: var(--ink); }

.category-form { display: grid; gap: .8rem; }

.form-field { display: grid; gap: .38rem; }

.form-field--full { grid-column: 1 / -1; }

.form-field > span {
  color: var(--muted);
  font-size: .68rem;
  font-weight: 620;
}

.form-field > span em { color: var(--faint); font-style: normal; font-weight: 500; }

.form-field input,
.category-name {
  width: 100%;
  min-height: 38px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--surface-strong);
  outline: 0;
  font-size: var(--planner-control-font);
  font-weight: var(--planner-control-weight);
  transition: border-color 130ms ease, box-shadow 130ms ease;
}

.form-field input:focus,
.category-name:focus { border-color: var(--line-strong); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ink) 5%, transparent); }

.form-error { grid-column: 1 / -1; margin: -.1rem 0 0; color: var(--danger); font-size: .69rem; }

.time-picker {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto minmax(0,1fr);
  align-items: center;
  gap: 5px;
}

.time-picker__separator { color: var(--faint); font-size: .84rem; }

.select-trigger {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 7px 9px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--surface-strong);
  color: var(--ink);
  font-size: .77rem;
  cursor: pointer;
  text-align: left;
  transition: border-color 130ms ease, box-shadow 130ms ease, background-color 130ms ease;
}

.select-trigger:hover,
.select-trigger:focus-visible {
  outline: 0;
  border-color: var(--line-strong);
  background: var(--surface-strong);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ink) 4%, transparent);
}

.select-trigger--wide { width: 100%; }

.select-trigger--time { min-width: 58px; justify-content: center; font-variant-numeric: tabular-nums; }

.select-trigger__value { min-width: 0; display: inline-flex; align-items: center; gap: 7px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.select-chevron { flex: 0 0 auto; color: var(--faint-mark); }

.modal__actions { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-top: .15rem; }

.modal__actions-right { display: flex; align-items: center; gap: .45rem; margin-left: auto; }

.text-button,
.primary-button,
.secondary-button {
  min-height: 34px;
  padding: 7px 10px;
  border-radius: 8px;
  font-size: .72rem;
  font-weight: 620;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.text-button { background: transparent; color: var(--muted); }

.text-button:hover,
.text-button:focus-visible { outline: 0; color: var(--ink); background: var(--soft); }

.text-button--danger { color: var(--danger); }

.primary-button { background: var(--ink); color: var(--paper); }

.primary-button:hover,
.primary-button:focus-visible { outline: 0; background: color-mix(in srgb, var(--ink) 86%, var(--paper)); }

.secondary-button { border: 1px solid var(--line); background: var(--surface-strong); color: var(--muted); }

.secondary-button:hover,
.secondary-button:focus-visible { outline: 0; color: var(--ink); border-color: var(--line-strong); }

/* Settings */

.category-remove { opacity: .55; }

.category-remove:hover { opacity: 1; }

/* Floating custom menus */

.app-popover {
  position: fixed;
  z-index: var(--z-popover);
  max-height: min(280px, calc(100dvh - 20px));
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 5px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--surface-strong);
  box-shadow: 0 14px 34px rgba(24, 21, 17, .12);
  opacity: 0;
  transform: translateY(3px) scale(.995);
  transition: opacity 110ms ease, transform 140ms cubic-bezier(.22,1,.36,1);
}

.app-popover.is-open { opacity: 1; transform: translateY(0) scale(1); }

.app-popover--list { display: grid; gap: 2px; }

.popover-option {
  width: 100%;
  min-height: 32px;
  display: grid;
  grid-template-columns: auto minmax(0,1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 7px;
  background: transparent;
  color: var(--muted);
  text-align: left;
  font-size: .73rem;
  cursor: pointer;
}

.popover-option:hover,
.popover-option:focus-visible { outline: 0; color: var(--ink); background: var(--soft); }

.popover-option.is-selected { color: var(--ink); }

.option-check { color: var(--muted); }

.app-popover.is-compact .popover-option { grid-template-columns: minmax(0,1fr) auto; font-variant-numeric: tabular-nums; }

/* Stats */

.empty-state { padding: .85rem; border: 1px dashed var(--line); border-radius: 10px; color: var(--muted); font-size: .72rem; line-height: 1.55; }

/* Help */

.help-content { display: grid; gap: 1.05rem; }

.help-content section { padding-top: .9rem; border-top: 1px solid var(--line); }

.help-content h3 { margin: 0 0 .34rem; font-size: .8rem; letter-spacing: -.015em; }

.help-content p { margin: 0; color: var(--muted); font-size: .74rem; line-height: 1.6; }

.help-content code { padding: .08rem .25rem; border-radius: 4px; background: var(--soft); font-size: .68rem; }

.example-list { display: grid; gap: .45rem; }

.example-list > div { display: grid; grid-template-columns: 62px minmax(0,.7fr) minmax(0,1.3fr); gap: .65rem; align-items: start; padding: .4rem 0; font-size: .71rem; }

.example-list span { color: var(--faint); font-size: .59rem; text-transform: uppercase; letter-spacing: .05em; }

.example-list s { color: var(--muted); }

.example-list strong { font-weight: 620; }

.storage-card { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }

.storage-card > strong { flex: 0 0 auto; padding: .42rem .55rem; border-radius: 8px; background: var(--surface-strong); box-shadow: inset 0 0 0 1px var(--line); color: var(--muted); font-size: .68rem; font-variant-numeric: tabular-nums; }

.github-support { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }

.github-support > div:first-child { flex: 1 1 auto; min-width: 0; }

.github-support__actions { flex: 0 0 auto; display: flex; gap: .5rem; justify-content: flex-end; }

.github-support__actions a { white-space: nowrap; }

.github-support__actions svg { width: 15px; height: 15px; flex: 0 0 auto; }

.github-support__actions .icon-fill { fill: currentColor; stroke: none; }

.bemorin-footer {
  margin-top: 1.15rem;
  padding-top: .95rem;
  border-top: 1px solid var(--line);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: .75rem;
  color: var(--faint);
}

.bemorin-footer > p { grid-column: 1; margin: 0; justify-self: start; font-size: .58rem; letter-spacing: .09em; text-transform: uppercase; }

.bemorin-footer__socials { grid-column: 2; display: flex; align-items: center; gap: 5px; justify-self: center; }

.bemorin-footer__socials a { width: 30px; height: 30px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); }

.bemorin-footer__socials a:hover { border-color: var(--line-strong); color: var(--ink); background: var(--soft); }

.bemorin-footer__links { grid-column: 3; justify-self: end; display: flex; gap: .3rem; }

.bemorin-footer__links a { white-space: nowrap; padding: .25rem .3rem; border-radius: .35rem; color: var(--faint); font-size: .58rem; letter-spacing: .06em; text-decoration: none; text-transform: uppercase; }

.bemorin-footer__links a:hover { color: var(--ink); background: var(--soft); }

/* One text-edit cursor across every editable surface. */
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="button"]):not([type="submit"]):not([type="reset"]),
textarea,
[contenteditable="true"],
.category-name {
  caret-color: var(--ink);
  cursor: var(--text-edit-cursor);
}

/* App-native tooltips replace browser title bubbles. */

[data-tooltip] { position: relative; }

[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  z-index: 500;
  left: 50%;
  top: calc(100% + 7px);
  width: max-content;
  max-width: 180px;
  padding: 5px 7px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: color-mix(in srgb, var(--surface-strong) 97%, transparent);
  color: var(--ink);
  box-shadow: 0 8px 22px rgba(25,22,17,.10);
  font-size: .61rem;
  font-weight: 560;
  line-height: 1.2;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -2px);
  transition: opacity 110ms ease, transform 140ms cubic-bezier(.22,1,.36,1);
}

[data-tooltip]:hover::after,
[data-tooltip]:focus-visible::after { opacity: 1; transform: translate(-50%, 0); }

[data-tooltip][aria-expanded="true"]::after { display: none; }

.actions > [data-tooltip]:last-child::after { left: auto; right: 0; transform: translate(0,-2px); }

.actions > [data-tooltip]:last-child:hover::after,
.actions > [data-tooltip]:last-child:focus-visible::after { transform: translate(0,0); }

.icon-button:disabled { opacity: .32; cursor: default; }

.icon-button:disabled:hover { background: transparent; border-color: transparent; color: var(--muted); }

.date-nav {
  min-height: 34px;
  padding: 2px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface) 70%, transparent);
}

.date-nav .icon-button { width: 27px; height: 27px; }

.today-button {
  min-width: 48px;
  min-height: 27px;
  display: inline-grid;
  place-items: center;
  padding: 4px 8px;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-size: .67rem;
  font-weight: 650;
  letter-spacing: -.01em;
  transition: color 130ms ease, background-color 130ms ease, transform 150ms cubic-bezier(.22,1,.36,1);
}

.today-button:hover,
.today-button:focus-visible { outline: 0; color: var(--ink); background: var(--soft); }

.today-button:active { transform: scale(.95); }

.today-button.is-away { color: var(--ink); }

.today-calendar-icon {
  display: none;
  position: relative;
  width: 30px;
  height: 30px;
  place-items: center;
  padding-top: 4px;
  border: 1.5px solid currentColor;
  border-radius: 7px;
  font-size: .66rem;
  font-weight: 760;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.today-calendar-icon::before {
  content: "";
  position: absolute;
  left: 4px;
  right: 4px;
  top: 7px;
  border-top: 1.5px solid currentColor;
}

.today-calendar-icon::after {
  content: "";
  position: absolute;
  width: 2px;
  height: 4px;
  top: -2px;
  left: 7px;
  border-radius: 1px;
  background: currentColor;
  box-shadow: 12px 0 0 currentColor;
}

/* Left pane behaves like a real full-height writing surface. */

.left {
  display: flex;
  flex-direction: column;
  align-content: initial;
  min-height: 0;
}

.focus .section-head { margin-bottom: 7px; }

.focus input { cursor: inherit; }

.notes-section {
  flex: 1 1 150px;
  min-height: 120px;
  display: flex;
  flex-direction: column;
}

.notes-section .section-head { flex: 0 0 auto; }

.notes {
  flex: 1 1 auto;
  min-height: 36px;
  height: auto;
  overflow-y: auto;
}

/* Keep task controls visible, but outside the reading line. */

.tasks { margin-left: -58px; padding-left: 58px; }

.item-row { cursor: var(--text-edit-cursor); }

.item-action-rail {
  opacity: .7;
  pointer-events: auto;
  transform: translateY(-50%) translateX(0);
}

.task:hover .item-action-rail,
.task:focus-within .item-action-rail { opacity: 1; }

.item-action-rail:hover { opacity: 1; }

.check,
.task-action { cursor: pointer; }

/* Time selects behave like compact inline wheels: same width, selected value aligned to trigger. */

.select-trigger--time { justify-content: center; text-align: center; }

.app-popover.is-time-menu {
  padding: 4px;
  border-radius: 10px;
  max-height: min(286px, calc(100dvh - 16px));
  scrollbar-gutter: stable;
}

.app-popover.is-time-menu .popover-option {
  position: relative;
  min-height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px 22px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.app-popover.is-time-menu .popover-option > span:not(.category-dot) { width: 100%; text-align: center; }

.app-popover.is-time-menu .option-check { position: absolute; right: 7px; }

.app-popover.is-time-menu .popover-option.is-selected { background: var(--soft); color: var(--ink); }

.select-trigger[aria-expanded="true"] {
  z-index: 351;
  border-color: var(--line-strong);
  background: var(--surface-strong);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ink) 4%, transparent);
}

/* More room for muted light + dark swatches without turning the picker into a tall column. */

/* Schedule blocks: title first, completion at the far edge. */

/* Current time: the label is the anchor; no dot competing with the first block. */

.time-line { border-top-color: #9a5149; }

.time-line::after { display: none; }

.time-line span {
  left: 2px;
  padding: 4px 6px;
  border-radius: 5px;
  background: #9a5149;
  color: #fffaf4;
  font-size: .66rem;
  font-weight: 650;
  line-height: 1.2;
}

/* End-of-day review uses the width rather than stacking every cue at the left edge. */

.end-day-list-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin: .1rem 2px .45rem;
  color: var(--faint);
  font-size: .59rem;
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: .065em;
}

.end-day-item {
  grid-template-columns: 20px minmax(0,1fr) minmax(112px, auto);
  gap: 10px;
  align-items: center;
  padding: 10px 11px;
}

.end-day-item .check { width: 17px; height: 17px; margin: 0; }

.end-day-item__body { gap: 3px; }

.end-day-item__body strong { font-size: .8rem; }

.end-day-item__body small {
  text-transform: none;
  letter-spacing: 0;
  font-size: .62rem;
  font-weight: 520;
}

.end-day-item__aside {
  min-width: 0;
  display: grid;
  justify-items: end;
  gap: 3px;
  text-align: right;
}

.end-day-item__aside > span {
  padding: 3px 6px;
  border-radius: 999px;
  background: var(--soft);
  color: var(--muted);
  font-size: .55rem;
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: .055em;
}

.end-day-item__aside em { color: var(--muted); font-size: .64rem; font-style: normal; font-variant-numeric: tabular-nums; white-space: nowrap; }

@media (max-width: 980px) {
  .planner { width: min(100% - 20px, 1360px); }
  .workspace { grid-template-columns: minmax(290px,.8fr) minmax(470px,1.2fr); gap: 24px; }
  .date-identity { gap: 8px; }
  .actions,
.date-nav { gap: 1px; }
  .icon-button { width: 32px; height: 32px; }
}

@media (max-width: 790px) {
  .planner { grid-template-rows: auto minmax(0,1fr); }
  .topbar { gap: 6px; }
  .date-identity { gap: 6px; }
  .date-nav,
.actions { gap: 0; }
  .icon-button { width: 32px; height: 32px; }
  .date-nav {
    min-height: 34px;
    padding: 0;
    border-color: transparent;
    background: transparent;
  }
  .date-nav [data-prev],
  .date-nav [data-next] { display: none; }
  .today-button {
    width: 34px;
    height: 34px;
    min-width: 34px;
    min-height: 34px;
    padding: 0;
    border-radius: 9px;
    color: var(--muted);
  }
  .today-button [data-today-label] { display: none; }
  .today-button:not(.is-away) { display: none; }
  .today-calendar-icon { display: grid; }
  .workspace { display: block; padding-top: 8px; }
  .left { height: 100%; }
  .workspace[data-mobile-active="schedule"] .left { display: none; }
  .pane-scroll { padding-right: 2px; }
}

@media (max-width: 620px) {
  .planner { width: min(100% - 14px, 1360px); padding-top: 8px; }
  .topbar { min-height: 50px; padding-bottom: 8px; }
  .topbar h1 { font-size: 1rem; }
  .eyebrow { font-size: .52rem; }
  .icon-button { width: 31px; height: 31px; }
  .left { gap: 21px; }
  .item-action-rail {
    left: auto;
    right: 37px;
    top: 7px;
    transform: none;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    opacity: .72;
    pointer-events: auto;
  }
  .task::before { display: none; }
  .task { padding-right: 67px; }
  .task:hover .item-action-rail,
.task:focus-within .item-action-rail { transform: none; }
  .item-action-rail .task-action { width: 25px; height: 25px; }
  .modal { padding: .45rem; }
  .modal__panel { max-height: calc(100dvh - .9rem); border-radius: 13px; }
  .modal__scroll { max-height: calc(100dvh - 1.4rem); margin: 4px; padding: .85rem .8rem .9rem .85rem; }
  .form-field--full,
.modal__actions { grid-column: auto; }
  .example-list > div { grid-template-columns: 1fr; gap: .16rem; }
  .storage-card,
.github-support { align-items: flex-start; flex-direction: column; }
  .github-support__actions { flex-wrap: wrap; justify-content: flex-start; }
  .github-support__actions a { flex: 1 1 180px; min-height: 40px; }
  .bemorin-footer { display: flex; flex-direction: column; align-items: center; text-align: center; gap: .6rem; }
}

@media (max-width: 480px) {
  .planner { width: min(100% - 10px, 1360px); }
  .topbar { gap: 4px; }
  .date-identity { gap: 4px; }
  .date-title .eyebrow { display: none; }
  .topbar h1 { font-size: .9rem; }
  .icon-button { width: 30px; height: 30px; }
  .view-toggle-button { width: 32px; height: 32px; min-width: 32px; min-height: 32px; }
  .today-button { width: 32px; height: 32px; min-width: 32px; min-height: 32px; }
  .today-calendar-icon { width: 29px; height: 29px; }
}

@media (hover: none) {
  [data-tooltip]::after { display: none; }
}

@media (max-width: 620px) {
  .tasks { margin-left: 0; padding-left: 0; }
  .end-day-item { grid-template-columns: 19px minmax(0,1fr); align-items: start; }
  .end-day-item__aside { grid-column: 2; justify-items: start; text-align: left; grid-auto-flow: column; justify-content: start; align-items: center; }
  .end-day-item__aside em { white-space: normal; }
}

@media (prefers-reduced-motion: reduce) {
  *,
*::before,
*::after { scroll-behavior: auto; transition-duration: .01ms; animation-duration: .01ms; animation-iteration-count: 1; }
}

.icon-button.is-day-ended {
  color: var(--ink);
  background: color-mix(in srgb, var(--surface-strong) 72%, var(--soft));
  box-shadow: inset 0 0 0 1px var(--line);
}

.task-add-editor { margin-top: 6px; }

.blocks { left: var(--schedule-content-left); }

.time-line::after { left: 50px; }

.end-day-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: .55rem;
  margin-bottom: 1rem;
}

.end-day-summary > div {
  min-width: 0;
  padding: .72rem;
  border-radius: 10px;
  background: var(--surface-strong);
  box-shadow: inset 0 0 0 1px var(--line);
}

.end-day-summary > div > span {
  display: block;
  color: var(--faint);
  font-size: .58rem;
  text-transform: uppercase;
  letter-spacing: .06em;
}

.end-day-summary > div > strong {
  display: block;
  margin-top: .18rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: .86rem;
  letter-spacing: -.025em;
}

.end-day-list { display: grid; gap: 6px; margin-bottom: .9rem; }

.end-day-item {
  display: grid;
  grid-template-columns: 18px minmax(0,1fr);
  gap: 9px;
  align-items: start;
  padding: 9px 10px;
  border-radius: 10px;
  background: var(--surface);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--line) 84%, transparent);
  cursor: pointer;
}

.end-day-item:hover { box-shadow: inset 0 0 0 1px var(--line-strong); }

.end-day-item.is-carried { opacity: .55; cursor: default; }

.end-day-item .check { margin-top: 2px; }

.end-day-item__body { min-width: 0; display: grid; gap: 2px; }

.end-day-item__body small {
  color: var(--faint);
  font-size: .56rem;
  font-style: normal;
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: .06em;
}

.end-day-item__body strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: .78rem;
  font-weight: 610;
}

.end-day-item__body em { color: var(--muted); font-size: .63rem; font-style: normal; font-variant-numeric: tabular-nums; }

@media (max-width: 620px) {
  .end-day-summary { grid-template-columns: 1fr 1fr; }
  .end-day-summary > div:last-child { grid-column: 1 / -1; }
}

.time-line::after { display: none; }

.end-day-item {
  grid-template-columns: 20px minmax(0,1fr) minmax(112px,auto);
  gap: 10px;
  align-items: center;
  padding: 10px 11px;
}

.end-day-item .check { width: 17px; height: 17px; margin: 0; }

.end-day-item__body { gap: 3px; }

.end-day-item__body strong { font-size: .8rem; }

.end-day-item__body small { text-transform: none; letter-spacing: 0; font-size: .62rem; font-weight: 520; }

.end-day-item__aside { min-width:0; display:grid; justify-items:end; gap:3px; text-align:right; }

.end-day-item__aside > span { padding:3px 6px; border-radius:999px; background:var(--soft); color:var(--muted); font-size:.55rem; font-weight:650; text-transform:uppercase; letter-spacing:.055em; }

.end-day-item__aside em { color:var(--muted); font-size:.64rem; font-style:normal; font-variant-numeric:tabular-nums; white-space:nowrap; }

@media (max-width:620px) {
  .end-day-item { grid-template-columns:19px minmax(0,1fr); align-items:start; }
  .end-day-item__aside { grid-column:2; justify-items:start; text-align:left; grid-auto-flow:column; justify-content:start; align-items:center; }
  .end-day-item__aside em { white-space:normal; }
}

/* App-only expanded view: proportional, full-width, without changing the rest of the domain. */

@media (min-width: 791px) {
  body.app-expanded .planner {
    width: calc((100% - 12px) / 1.12);
    max-width: none;
    height: calc(100dvh / 1.12);
    zoom: 1.12;
    padding-top: 8px;
    padding-bottom: 8px;
  }
  body.app-expanded .workspace { gap: clamp(24px, 3.4vw, 54px); }
}

.expanded-view-button[aria-pressed="true"] {
  color: var(--ink);
  background: var(--surface-strong);
  box-shadow: inset 0 0 0 1px var(--line);
}

/* Real viewport-aware tooltip: pseudo tooltips are intentionally disabled. */

[data-tooltip]::after { display: none; }

.app-tooltip-float {
  position: fixed;
  /* Tooltips only show for the active dialog's controls, so they sit above dialogs. */
  z-index: calc(var(--z-popover) + 10);
  /* As wide as its words need, never wider than 260px or the viewport; longer labels wrap inside the box. */
  width: max-content;
  max-width: min(260px, calc(100vw - 16px));
  padding: 5px 8px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: color-mix(in srgb, var(--surface-strong) 98%, transparent);
  color: var(--ink);
  box-shadow: 0 8px 22px rgba(25,22,17,.10);
  font-size: .61rem;
  font-weight: 560;
  line-height: 1.35;
  white-space: normal;
  text-wrap: balance;
  pointer-events: none;
  opacity: 0;
  transform: translateY(-2px);
  transition: opacity 100ms ease, transform 130ms cubic-bezier(.22,1,.36,1);
}

.app-tooltip-float[data-placement="above"] { transform: translateY(2px); }
.app-tooltip-float.is-visible { opacity: 1; transform: translateY(0); }
.app-tooltip-float > span { min-width: 0; overflow-wrap: break-word; }

.pane-scroll,
.left { overflow-x: clip; }

.tasks { margin-left: 0; padding-left: 58px; }

.task .item-action-rail { left: -56px; }

.task::before { left: -58px; width: 58px; }

.item-row,
.item-row .item-main,
.item-row .item-input { cursor: var(--text-edit-cursor); }

.item-row .check,
.item-row .task-action,
.item-row button,
.item-row a { cursor: pointer; }

.drag-handle { cursor: grab; }

.drag-handle:active { cursor: grabbing; }

/* Block form */

.form-field textarea {
  width: 100%;
  min-height: 62px;
  resize: vertical;
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--surface-strong);
  outline: 0;
  font-size: .76rem;
  line-height: 1.5;
  caret-color: var(--ink);
}

.form-field textarea:focus { border-color: var(--line-strong); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ink) 5%, transparent); }

.modal__header > p:last-child { max-width: none; }

/* Duration is one deliberate control, not six bits of unstyled text. */

.modal__actions--block {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto minmax(0,1fr);
  align-items: center;
}

.modal__actions--block .modal__actions-right { justify-self: end; margin-left: 0; }

.icon-text-button { gap: 6px; }

.icon-text-button svg,
.done-toggle svg {


  fill: none;
  stroke: currentColor;
  stroke-width: 1.55;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.done-toggle {
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 6px 9px;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font-size: .68rem;
  font-weight: 610;
  cursor: pointer;
  transition: color 130ms ease, background-color 130ms ease, box-shadow 130ms ease;
}

.done-toggle:hover,
.done-toggle:focus-visible { outline: 0; color: var(--ink); background: var(--soft); }

.done-toggle.is-active {
  color: var(--ink);
  background: var(--surface-strong);
  box-shadow: inset 0 0 0 1px var(--line-strong);
}

/* Category settings use the modal width. */

/* 8 hue families × 3 tones. */

.color-auto-option {
  width: 100%;
  display: grid;
  grid-template-columns: 16px auto 1fr;
  align-items: center;
  gap: 7px;
  margin-bottom: 7px;
  padding: 6px 7px;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  text-align: left;
  cursor: pointer;
}

.color-auto-option > span { width: 14px; height: 14px; border: 1px dashed var(--line-strong); border-radius: 5px; }

.color-auto-option strong { font-size: .69rem; color: var(--ink); }

.color-auto-option em { justify-self: end; color: var(--faint); font-size: .59rem; font-style: normal; }

.color-auto-option:hover,
.color-auto-option:focus-visible,
.color-auto-option.is-selected { outline: 0; background: var(--soft); }

/* Search */

.modal--search .modal__panel { width: min(100%, 40rem); }

.search-header { margin-bottom: .72rem; }

.search-box {
  display: grid;
  grid-template-columns: 18px minmax(0,1fr) auto;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 10px;
  border: 1px solid var(--line-strong);
  border-radius: 11px;
  background: var(--surface-strong);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ink) 3%, transparent);
}

.search-box > svg {   fill: none; stroke: var(--muted); stroke-width: 1.6; stroke-linecap: round; }

.search-box input {
  width: 100%;
  min-width: 0;
  padding: 10px 0;
  border: 0;
  outline: 0;
  background: transparent;
  font-size: var(--planner-control-font);
}

.search-box input::-webkit-search-cancel-button { opacity: .45; }

.search-box kbd {
  padding: 3px 5px;
  border: 1px solid var(--line);
  border-bottom-color: var(--line-strong);
  border-radius: 5px;
  background: var(--surface);
  color: var(--faint);
  font: 560 .56rem/1.1 ui-monospace, SFMono-Regular, Menlo, monospace;
  white-space: nowrap;
}

.search-results { display: grid; gap: 5px; margin-top: .72rem; }

.search-result {
  width: 100%;
  display: grid;
  gap: 3px;
  padding: 9px 10px;
  border-radius: 9px;
  background: transparent;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}

.search-result:hover,
.search-result:focus-visible { outline: 0; background: var(--soft); }

.search-result__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }

.search-result__top strong { font-size: .69rem; font-weight: 650; }

.search-result__top time { color: var(--faint); font-size: .59rem; white-space: nowrap; }

.search-result__text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font-size: .73rem; }

.search-result small { color: var(--faint); font-size: .59rem; }

/* Stats explanation is contextual and click-to-open. */

.modal-title-row { display: flex; align-items: center; gap: 7px; min-width: 0; }

.modal-title-row h2 { min-width: 0; }

.mini-help-button {
  width: 21px;
  height: 21px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font-size: .65rem;
  font-weight: 650;
  cursor: pointer;
}

.mini-help-button:hover,
.mini-help-button:focus-visible { outline: 0; border-color: var(--line-strong); color: var(--ink); background: var(--soft); }

.info-popover { overflow: visible; }

.info-popover p { margin: 0; color: var(--muted); font-size: .71rem; line-height: 1.55; }

.info-popover strong { color: var(--ink); font-weight: 650; }

/* End-of-day selection is visible without reading the checkbox state. */

.end-day-item { transition: background-color 130ms ease, box-shadow 130ms ease, opacity 130ms ease; }

.end-day-item:has(.check:checked:not(:disabled)) {
  background: color-mix(in srgb, var(--ink) 4%, var(--surface-strong));
  box-shadow: inset 0 0 0 1px var(--line-strong);
}

.end-day-item:has(.check:not(:checked)) { background: color-mix(in srgb, var(--surface) 70%, transparent); }

/* Schedule: 15 and 30 minutes share one compact language; longer blocks earn more text. */

/* Mobile: keep the header in one line by moving secondary utilities into More. */

.mobile-more-wrap { display: none; }


@media (max-width: 1080px) {
  /* Collapse secondary header actions into More before the middle nav loses space. */
  .header-secondary { display: none; }
  .mobile-more-wrap { display: flex; }
  .actions { gap: 1px; }
}

@media (max-width: 790px) {
  .expanded-view-button { display: none; }
  .actions { gap: 0; }
  .date-nav { min-width: 0; }
}

@media (max-width: 620px) {
  .tasks { padding-left: 0; }
  .modal__actions--block { grid-template-columns: 1fr auto; row-gap: 8px; }
  .modal__actions--block .done-toggle { grid-column: 2; justify-self: end; }
  .modal__actions--block .modal__actions-right { grid-column: 1 / -1; justify-self: stretch; }
  .modal__actions--block .modal__actions-right > * { flex: 1 1 0; }
  .search-box kbd { display: none; }
}

/* Printing follows the orientation chosen in the browser dialog. */

@media (min-width: 791px) {
  body.app-expanded .planner {
    width: var(--app-expanded-width, calc(100% - 12px));
    height: var(--app-expanded-height, 100dvh);
    zoom: var(--app-scale, 1);
  }
}

/* The schedule modal's completion control is deliberately stable in width. */

.done-toggle span { min-width: 2.35rem; text-align: left; }

/* Keep the custom I-beam visible across every editable text surface. */

[data-focus],
.modal input[type="text"],
.modal input[type="search"],
.modal input:not([type]),
.modal textarea,
.modal .category-name {
  cursor: var(--text-edit-cursor);
  caret-color: var(--ink);
}

/* Search uses an app-owned clear affordance, never the browser glyph. */

.search-box input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; display: none; }

.search-clear {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  padding: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--faint);
  cursor: pointer;
}

.search-clear:hover,
.search-clear:focus-visible { outline: 0; color: var(--ink); background: var(--soft); }

.search-clear svg {   fill: none; stroke: currentColor; stroke-width: 1.55; stroke-linecap: round; }

/* Left-side tasks: no drag rail. Reading, time and actions all live on one stable axis. */

.tasks { margin-left: 0; padding-left: 0; }

.item-action-rail,
.task::before,
.drag-handle { display: none; }

.item-row {
  grid-template-columns: 22px minmax(0, 1fr) auto auto;
  align-items: center;
  column-gap: 8px;
}

.item-main { min-width: 0; width: 100%; }

.item-time {
  min-width: 0;
  max-width: 92px;
  padding: 2px 0;
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: .62rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  cursor: pointer;
}

.item-time:empty { display: none; }

.item-actions { min-width: 0; gap: 1px; justify-self: end; }

.task-action--remove { color: var(--faint-mark); }

.task-action--remove:hover { color: var(--danger); }

.mit .item-row {
  background: color-mix(in srgb, var(--accent) 7%, var(--surface));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 15%, var(--line));
}

.check {
  width: 20px;
  height: 20px;
  margin-top: 0;
  border-radius: 6px;
}

.check::after {
  left: 5.6px;
  top: 2.1px;
  width: 4.6px;
  height: 9px;
  border-width: 0 1.65px 1.65px 0;
}

/* Time block hierarchy: outcome → project/duration/time → link → description. */

/* The optional description is intentionally roomy enough to be useful. */

.form-field textarea { min-height: 124px; }

/* Add is not Save. Done exists only for an existing block. */

.modal__actions--block.is-add { grid-template-columns: minmax(0,1fr); }

.modal__actions--block.is-add .modal__actions-right { justify-self: end; }

[data-end-day-form] .primary-button { padding-inline: 34px; }

/* Existing colors from an older palette keep their swatch without a fake “Custom” label. */

/* Stats: planned time is the translucent base, elapsed time sits at full opacity. */

/* Carry-forward target is one compact control: date label plus a centered disclosure. */

.end-day-target {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.end-day-target > span { flex: 0 0 auto; }

.end-day-date-trigger {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  margin: 0;
  padding: 0 0 0 10px;
  border: 0;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  text-align: right;
}

.end-day-date-trigger strong { margin: 0; font-size: 1rem; letter-spacing: -.02em; }

.end-day-date-trigger:hover,
.end-day-date-trigger:focus-visible { outline: 0; color: var(--ink); }

.end-day-date-chevron {
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  background: var(--soft);
  color: var(--muted);
}

.end-day-date-chevron .select-chevron {
  width: 18px;
  height: 18px;
  display: block;
  margin: 0;
  padding: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  transform: none;
}

.end-day-list {
  max-height: min(42dvh, 360px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-right: 3px;
}

.modal__actions--sticky,
[data-end-day-form] > .modal__actions {
  position: sticky;
  z-index: 5;
  bottom: -1rem;
  margin: .2rem -0.2rem -1rem;
  padding: .7rem .2rem 1rem;
  background: linear-gradient(to bottom, color-mix(in srgb, var(--surface) 0%, transparent), var(--surface) 24%, var(--surface) 100%);
}

/* Fit mode is still app-only, but modals scale with the app so proportions stay coherent. */

@media (min-width: 791px) {
  body.app-expanded .modal__panel {
    zoom: var(--app-scale, 1);
    max-height: var(--modal-expanded-max-height, calc(100dvh - 2rem));
  }
}

/* During the pre-print pass JS uses the same compact hour height as the printed page. */

body.is-printing .app-tooltip-float { display: none; }

/* Mobile navigation is a two-way dock, not a small pill floating under the header. */

@media (max-width: 790px) {
  .planner { grid-template-rows: auto minmax(0,1fr); }
  .mobile-view-switch {
    position: fixed;
    z-index: var(--z-mobile-dock);
    left: max(12px, env(safe-area-inset-left));
    right: max(12px, env(safe-area-inset-right));
    bottom: max(8px, env(safe-area-inset-bottom));
    width: auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    margin: 0;
    padding: 3px;
    border: 1px solid color-mix(in srgb, var(--line-strong) 45%, var(--line));
    border-radius: 14px;
    background: color-mix(in srgb, var(--surface-strong) 88%, transparent);
    box-shadow: 0 8px 24px rgba(28,25,21,.09);
    backdrop-filter: blur(16px) saturate(1.2);
  }
  .mobile-view-switch__indicator {
    position: absolute;
    z-index: 0;
    left: 3px;
    top: 3px;
    width: calc(50% - 3px);
    height: calc(100% - 6px);
    border-radius: 11px;
    background: var(--soft);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--line-strong) 55%, var(--line));
    pointer-events: none;
  }
  .mobile-view-switch__indicator:not([data-ready]) { opacity: 0; }
  .mobile-view-switch button {
    position: relative;
    z-index: 1;
    min-width: 0;
    min-height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 5px 10px;
    border: 0;
    border-radius: 11px;
    background: transparent;
    color: var(--muted);
    cursor: pointer;
    text-align: left;
    transition: color 160ms ease;
  }
  .mobile-view-switch button svg { width: 20px; height: 20px; flex: 0 0 auto; }
  .mobile-view-switch__text { min-width: 0; display: grid; gap: 1px; }
  .mobile-view-switch__text > span { font-size: .8rem; font-weight: 660; line-height: 1.15; letter-spacing: -.012em; }
  .mobile-view-switch__text small { overflow: hidden; color: var(--faint); font-size: .66rem; font-weight: 560; line-height: 1.2; font-variant-numeric: tabular-nums; text-overflow: ellipsis; white-space: nowrap; }
  .mobile-view-switch__text small:empty { display: none; }
  .mobile-view-switch button:hover,
  .mobile-view-switch button:focus-visible { outline: 0; color: var(--ink); }
  .mobile-view-switch button:focus-visible { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--accent) 55%, transparent); }
  .mobile-view-switch button svg { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
  .mobile-view-switch button .icon-fill { fill: currentColor; stroke: none; }
  .mobile-view-switch button.is-active { color: var(--ink); }
  .mobile-view-switch button.is-active small { color: var(--muted); }
  body.has-modal .mobile-view-switch,
  body.has-modal .mobile-quick-add {
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
  }
  .workspace:not(.is-week-view) { touch-action: pan-y; }
  .pane-scroll { height: calc(100% - var(--mobile-dock-clearance)); max-height: none; padding-bottom: 0; }

  .task { padding-right: 8px; }
  .item-row { grid-template-columns: 22px minmax(0,1fr) auto auto; }
  .item-actions { position: static; justify-self: end; }
  .item-time { max-width: 78px; font-size: .59rem; }
}

@media (max-width: 620px) {
  .end-day-list { max-height: min(38dvh, 310px); }
  .item-time { display: none; }
}

.end-day-item .check { width: 20px; height: 20px; }

@media (max-width: 620px) { .item-time { display: inline-flex; max-width: 70px; } }

.focus [data-focus] {
  cursor: var(--text-edit-cursor);
  caret-color: var(--ink);
}

/* Schedule actions belong to the schedule, not the global toolbar. */

.end-day-button {
  min-height: 31px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 6px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--soft);
  color: var(--muted);
  font-size: .68rem;
  font-weight: 620;
  cursor: pointer;
  transition: background-color 130ms ease, border-color 130ms ease, color 130ms ease, transform 150ms cubic-bezier(.22,1,.36,1);
}

.end-day-button svg {   fill: none; stroke: currentColor; stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round; }

.end-day-button:hover,
.end-day-button:focus-visible { outline: 0; border-color: var(--line-strong); background: var(--surface-strong); color: var(--ink); }

.end-day-button:active { transform: scale(.97); }

.end-day-button.is-day-ended { background: color-mix(in srgb, var(--ink) 7%, var(--soft)); color: var(--ink); }

.end-day-button:disabled { opacity: .38; cursor: not-allowed; }

/* Left-column action buttons share one exact right edge. */

.item-row { padding-right: 8px; }

.item-actions { display: flex; align-items: center; justify-self: end; margin-right: -1px; }

.item-actions .task-action { flex: 0 0 27px; }

.item-time { justify-self: end; }

.item-row.search-hit { animation: search-hit 850ms cubic-bezier(.22,1,.36,1); }

@keyframes search-hit { 0%,
100% { box-shadow: inset 0 0 0 1px var(--line); } 35% { box-shadow: inset 0 0 0 1px var(--ink), 0 0 0 4px color-mix(in srgb, var(--ink) 6%, transparent); } }

/* Schedule checkboxes remain genuinely tappable even in a 15-minute block. */

/* Hour rules are real borders so they print even when background graphics are disabled. */

.blocks { z-index: 2; }

/* Google-Calendar-like block editor: title + completion, then date/time rows. */

.datetime-row {
  display: grid;
  grid-template-columns: minmax(0,1.35fr) minmax(120px,.65fr);
  gap: 8px;
  width: 100%;
}

.date-trigger,
.time-combo {
  min-height: 38px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--surface-strong);
}

.date-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 7px 10px;
  color: var(--ink);
  font-size: .78rem;
  text-align: left;
  cursor: pointer;
}

.date-trigger svg {   fill: none; stroke: var(--faint-mark); stroke-width: 1.55; }

.time-combo {
  display: grid;
  grid-template-columns: minmax(0,1fr) 34px;
  align-items: center;
  overflow: hidden;
  transition: border-color 130ms ease, box-shadow 130ms ease;
}

.time-combo:focus-within,
.date-trigger:hover,
.date-trigger:focus-visible {
  outline: 0;
  border-color: var(--line-strong);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ink) 4%, transparent);
}

.time-input {
  min-width: 0;
  width: 100%;
  height: 36px;
  padding: 7px 3px 7px 10px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  outline: 0;
  font-size: .79rem;
  font-variant-numeric: tabular-nums;
}

.modal__header > p:last-child { max-width: none; }

/* Footer actions: compact, balanced, and one line on phones. */

.modal__actions--block { align-items: center; }

.modal__actions--block .modal__actions-right { margin-left: auto; }

@media (max-width: 620px) {
  .datetime-row { grid-template-columns: minmax(0,1fr) 112px; }
  .modal__actions--block {
    display: grid;
    grid-template-columns: 38px minmax(0,1fr) minmax(0,1fr);
    gap: 6px;
  }
  .modal__actions--block.is-add { grid-template-columns: minmax(0,1fr) minmax(0,1fr); }
  .modal__actions--block .modal__actions-right { display: contents; }
  .modal__actions--block .text-button[data-modal-close] { width: 100%; }
}

/* Settings: swatch → flexible name → delete. No dead air. */

/* End-of-day uses the same restrained selected language as segmented tabs. */

.end-day-item { background: transparent; border-color: transparent; box-shadow: inset 0 0 0 1px var(--line); }

.end-day-item:has(.check:checked:not(:disabled)) {
  background: var(--soft);
  box-shadow: inset 0 0 0 1px var(--line-strong);
}

.end-day-item:has(.check:not(:checked)) { background: color-mix(in srgb, var(--surface-strong) 45%, transparent); opacity: .72; }


/* Help: only the actual documentation scrolls; the Bemorin footer stays visible. */

.modal__panel--help { display: grid; grid-template-rows: minmax(0,1fr) auto; }

.modal__panel--help .modal__scroll { min-height: 0; max-height: none; height: 100%; }

.bemorin-footer--fixed {
  position: relative;
  z-index: 5;
  margin: 0 1rem 0;
  padding: .75rem 0 .8rem;
  border-top: 1px solid var(--line);
  background: var(--surface);
}

/* Search results make the destination date an explicit navigational affordance. */

.search-result__date { display: inline-flex; align-items: center; gap: 5px; padding: 3px 6px; border-radius: 999px; background: var(--soft); color: var(--muted); }

.search-result__date svg {   fill: none; stroke: currentColor; stroke-width: 1.55; stroke-linecap: round; stroke-linejoin: round; }

.search-result__date time { color: inherit; }

/* Day / Week tabs mirror the app's pill-on-selection language. */

/* Header order after moving Close day into Schedule. */

/* Print is a landscape planner sheet; hour rules remain visible behind blocks. */

@media (max-width: 790px) {
  .end-day-button span { display: none; }
  .end-day-button { width: 31px; padding: 0; }
.bemorin-footer--fixed { margin-inline: .85rem; }
}

.modal__actions--block { order: 40; }

/* Prefer pretty wrapping everywhere, reserving balance for deliberate display headings. */

body,
p,
li,
label,
button,
.item-input,
.search-result__copy { text-wrap: pretty; }

h1,
h2,
h3,
.modal-title-row { text-wrap: pretty; }

/* MIT is distinct without borrowing a category color. */

.mit .item-row {
  background: color-mix(in srgb, var(--soft) 76%, var(--surface-strong));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--line-strong) 74%, var(--line));
}

.task-action:hover,
.task-action:focus-visible {
  outline: 0;
  color: var(--ink);
  background: color-mix(in srgb, var(--ink) 8%, var(--surface-strong));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 9%, var(--line));
}

/* Search tooltip: one app shortcut only, rendered as a keycap. */

.app-tooltip-float { display: inline-flex; align-items: center; gap: 8px; }

.app-tooltip-float kbd {
  min-width: 22px;
  height: 22px;
  display: inline-grid;
  place-items: center;
  padding: 0 6px;
  border: 1px solid color-mix(in srgb, #fff 18%, transparent);
  border-radius: 6px;
  background: color-mix(in srgb, #fff 10%, transparent);
  color: #fff;
  font: inherit;
  font-size: .62rem;
  font-weight: 700;
  box-shadow: inset 0 -1px 0 rgba(255,255,255,.08);
}

@media (hover: none), (pointer: coarse) {
  .app-tooltip-float { display: none; }
}

.form-field-label-row {
  min-height: 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  color: var(--muted);
  font-size: .68rem;
  font-weight: 620;
}

.inline-field-action {
  min-height: 22px;
  padding: 2px 6px;
  border-radius: 6px;
  background: transparent;
  color: var(--faint);
  font-size: .61rem;
  font-weight: 580;
  cursor: pointer;
  white-space: nowrap;
}

.inline-field-action:hover,
.inline-field-action:focus-visible {
  outline: 0;
  background: var(--soft);
  color: var(--ink);
}

.date-trigger--compact { min-width: 0; }

.time-combo {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  overflow: hidden;
}

.time-input {
  flex: 0 0 72px;
  width: 72px;
  padding-right: 2px;
}

/* Add modal uses the full title width; only edit reserves completion space. */

/* Category selection reads like an app field, not a browser dropdown. */

.category-menu { padding: 5px; }

.category-menu .popover-option {
  min-height: 36px;
  grid-template-columns: 14px minmax(0,1fr) 16px;
  gap: 8px;
  border-radius: 7px;
  font-size: .78rem;
}

.category-menu .category-dot { width: 10px; height: 10px; }

.category-menu .popover-option:first-child { grid-template-columns: minmax(0,1fr) 16px; }

/* Calendar popover shared by block start/end dates. */

.calendar-popover {
  width: min(292px, calc(100vw - 16px));
  padding: 8px;
  overflow: hidden;
}

.calendar-popover__head {
  display: grid;
  grid-template-columns: 32px minmax(0,1fr) 32px;
  align-items: center;
  gap: 5px;
  padding: 1px 1px 7px;
}

.calendar-popover__head strong {
  text-align: center;
  font-size: .73rem;
  font-weight: 650;
  letter-spacing: -.015em;
}

.calendar-popover__nav {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  padding: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}

.calendar-popover__nav:hover,
.calendar-popover__nav:focus-visible { outline: 0; background: var(--soft); color: var(--ink); }

.calendar-popover__nav:disabled { opacity: .28; cursor: default; background: transparent; }

.calendar-popover__nav svg {   fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

.calendar-popover__weekdays,
.calendar-popover__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }

.calendar-popover__weekdays { margin-bottom: 2px; }

.calendar-popover__weekdays span { padding: 4px 0; color: var(--faint); font-size: .55rem; font-weight: 650; text-align: center; text-transform: uppercase; letter-spacing: .055em; }

.calendar-day {
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  padding: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--ink);
  font-size: .68rem;
  cursor: pointer;
}

.calendar-day:hover,
.calendar-day:focus-visible { outline: 0; background: var(--soft); }

.calendar-day.is-outside { color: var(--faint); }

.calendar-day.is-today { box-shadow: inset 0 0 0 1px var(--line-strong); }

.calendar-day.is-selected { background: var(--ink); color: var(--paper); box-shadow: none; }

.calendar-day:disabled { opacity: .2; cursor: default; background: transparent; }

/* Duration shortcuts are clearly buttons; selection uses the former idle surface. */

/* Primary modal actions own half of the available action space. */

.modal__actions--block.is-add .modal__actions-right { width: 100%; display: grid; grid-template-columns: 1fr 1fr; }

.modal__actions--block:not(.is-add) { display: grid; grid-template-columns: auto minmax(0,1fr); }

.modal__actions--block:not(.is-add) .modal__actions-right { width: 100%; display: grid; grid-template-columns: 1fr 1fr; }

.end-day-actions { display: block; }

.end-day-actions > .modal__actions-right { width: 100%; display: grid; grid-template-columns: 1fr 1fr; }

.end-day-actions .primary-button { width: 100%; }
@media (max-width: 790px) {
  .end-day-button { width: auto; padding-inline: 9px; }
  .end-day-button span { display: inline; font-size: .63rem; }
}

/* Weekly chart: direct, app-native inspection instead of SVG browser titles. */

/* Help starts with project/data, then documentation. */

.help-priority-card { padding: .8rem; border: 1px solid var(--line); border-radius: 10px; background: color-mix(in srgb, var(--surface-strong) 62%, transparent); }

.help-content > .help-priority-card:first-child { margin-top: 0; }

.storage-card__copy { min-width: 0; }

.danger-link-button {
  margin-top: .6rem;
  padding: 0;
  background: transparent;
  color: var(--danger);
  font-size: .68rem;
  font-weight: 630;
  cursor: pointer;
}

.danger-link-button:hover,
.danger-link-button:focus-visible { outline: 0; text-decoration: underline; text-underline-offset: 3px; }

.reset-warning { display: grid; gap: 4px; margin: .2rem 0 1rem; padding: .75rem .8rem; border: 1px solid color-mix(in srgb, var(--danger) 22%, var(--line)); border-radius: 9px; background: color-mix(in srgb, var(--danger) 5%, var(--surface)); }

.reset-warning strong { font-size: .74rem; }

.reset-warning span { color: var(--muted); font-size: .68rem; line-height: 1.45; }

.primary-button--danger { background: var(--danger); color: var(--paper); }

.primary-button--danger:hover,
.primary-button--danger:focus-visible { background: color-mix(in srgb, var(--danger) 88%, #000); }

.reset-actions { display: grid; grid-template-columns: auto minmax(0,1fr); }

.reset-actions .modal__actions-right { width: 100%; display: grid; grid-template-columns: 1fr 1fr; }

@media (max-width: 620px) {
  .modal__actions--block:not(.is-add) { grid-template-columns: 38px minmax(0,1fr); }
  .modal__actions--block:not(.is-add) .modal__actions-right { width: 100%; }
  [data-end-day-form] > .modal__actions { grid-template-columns: 1fr 1fr; }
  .reset-actions { grid-template-columns: 1fr; gap: 8px; }
  .reset-actions > [data-reset-export] { width: 100%; }
}

/* Keep the chevron close to manually typed times instead of marooning it at the field edge. */

.time-input { flex-basis: 60px; width: 60px; }

.section-head { align-items: baseline; }

.section-guidance { margin: 0 0 0 auto; max-width: 46%; color: var(--faint); font-size: .67rem; line-height: 1.4; text-align: right; }

.focus-input {
  width: 100%;
  min-height: 20px;
  height: auto;
  padding: 3px 0 5px;
  border: 0;
  border-bottom: 1px solid var(--line-strong);
  outline: 0;
  resize: none;
  overflow: hidden;
  background: transparent;
  color: var(--ink);
  caret-color: var(--ink);
  font-size: var(--planner-control-font);
  line-height: 1.45;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  text-overflow: clip;
}

.item-input {
  min-width: 0;
  width: 100%;
  min-height: 20px;
  height: auto;
  padding: 0;
  border: 0;
  outline: 0;
  resize: none;
  overflow: hidden;
  align-self: center;
  background: transparent;
  color: var(--ink);
  caret-color: var(--ink);
  font-size: var(--planner-control-font);
  font-weight: var(--planner-control-weight);
  line-height: 1.45;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  text-overflow: clip;
}

.item-row { align-items: start; }

.item-actions,
.item-time { align-self: center; }

.item-row:has(.item-input:focus) { box-shadow: inset 0 0 0 1px var(--line-strong); }

.item-row.is-empty .item-input { min-height: 20px; }

.task-action { width: 34px; height: 34px; }
/* Close day: only the carry list scrolls. */

[data-end-day-modal] .modal__panel { height: min(690px, calc(100dvh - 1.4rem)); }

[data-end-day-modal] .modal__scroll { height: 100%; max-height: none; overflow: hidden; display: grid; grid-template-rows: auto auto auto minmax(0,1fr); gap: 10px; }

[data-end-day-form] { min-height: 0; display: grid; grid-template-rows: auto minmax(0,1fr) auto; }

.end-day-list { min-height: 0; max-height: none; overflow-y: auto; overscroll-behavior: contain; padding-right: 7px; margin-bottom: 0; }

.end-day-summary { display: grid; grid-template-columns: 1fr 1fr 2fr; gap: 8px; margin-bottom: 0; }

.end-day-summary > div { min-width: 0; min-height: 58px; padding: 10px 11px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }

.end-day-summary > div > span { margin: 0; }

.end-day-summary > div > strong { margin: 0; font-size: 1rem; }


.end-day-item__body small:empty { display: none; }

.end-day-reflection { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

.end-day-reflection textarea { width: 100%; min-height: 64px; resize: none; padding: 9px 10px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface-strong); color: var(--ink); outline: 0; font: inherit; font-size: .74rem; line-height: 1.45; caret-color: var(--ink); }

.end-day-reflection textarea:focus { border-color: var(--line-strong); box-shadow: 0 0 0 3px color-mix(in srgb,var(--ink) 5%, transparent); }

.end-day-actions { position: sticky; bottom: 0; z-index: 3; margin: 0; padding-top: 10px; background: linear-gradient(to bottom, transparent, var(--surface) 12px); }

/* Modal scrollbars start below the close control and stop above sticky footers. */

.modal__scroll { margin: 42px 5px 8px; max-height: calc(min(760px, 100dvh - 2rem) - 50px); padding-top: 0; }

.modal__close { top: .72rem; }

/* The page's bar (the --scrollbar-* sizes), its thumb mixed with the dialog's surface rather than the paper. */
.modal__scroll {
  --scrollbar-thumb: color-mix(in srgb, var(--line-strong) 62%, var(--surface));
  --scrollbar-thumb-hover: color-mix(in srgb, var(--muted) 46%, var(--surface));
}

.modal__panel--help .modal__scroll { margin-bottom: 7px; }

.bemorin-footer--fixed { position: relative; z-index: 4; }

/* Storage controls */

.storage-card { align-items: stretch; }

.storage-card__side { flex: 0 0 auto; min-width: 142px; display: grid; align-content: start; justify-items: stretch; gap: 7px; }

.storage-card__side > strong { padding: .42rem .55rem; border-radius: 8px; background: var(--surface-strong); box-shadow: inset 0 0 0 1px var(--line); color: var(--muted); font-size: .68rem; font-variant-numeric: tabular-nums; text-align: center; }

.storage-card__side .danger-link-button { margin: 2px 0 0; text-align: center; }

.storage-import-button { width: 100%; }

.storage-safety { margin-top: .55rem; padding: .5rem .55rem; border-radius: 7px; background: color-mix(in srgb, var(--soft) 70%, transparent); font-size: .66rem; line-height: 1.45; }

.storage-safety.is-warning { color: var(--danger); background: color-mix(in srgb, var(--danger) 6%, var(--surface)); }

.import-actions { display: grid; grid-template-columns: 1fr 1fr; }

.import-actions .modal__actions-right,
.import-actions .primary-button { width: 100%; }

/* Journal */

.journal-list { display: grid; gap: 5px; }

.journal-row { width: 100%; display: grid; grid-template-columns: 112px minmax(0,1fr) minmax(0,1fr); gap: 12px; align-items: start; padding: 10px 11px; border-radius: 10px; background: transparent; box-shadow: inset 0 0 0 1px var(--line); color: var(--ink); text-align: left; cursor: pointer; }

.journal-row:hover,
.journal-row:focus-visible { outline: 0; background: var(--soft); box-shadow: inset 0 0 0 1px var(--line-strong); }

.journal-row time { color: var(--muted); font-size: .66rem; font-weight: 620; font-variant-numeric: tabular-nums; }

.journal-row > span { min-width: 0; }

.journal-row small { display: block; margin-bottom: 3px; color: var(--faint); font-size: .54rem; font-weight: 660; text-transform: uppercase; letter-spacing: .06em; }

.journal-row strong { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; font-size: .7rem; font-weight: 560; line-height: 1.45; }

/* Search keycap visible on light tooltip. */

.app-tooltip-float kbd { border-color: var(--line-strong); background: var(--soft); color: var(--ink); box-shadow: inset 0 -1px 0 color-mix(in srgb,var(--ink) 8%, transparent); }

/* Week legend can be pinned, and no ornamental top rule. */

/* Print uses the browser-selected paper size, forced landscape, with a tiny domain legend. */

.print-domain { display: none; }

/* Mobile: stats remain 2-up and the chart condenses to the viewport. */

@media (max-width: 620px) {
  .section-head { display: grid; grid-template-columns: minmax(0,1fr); gap: 2px; }
  .section-guidance { max-width: none; margin: 0; text-align: left; font-size: .64rem; line-height: 1.4; }
  .end-day-summary { grid-template-columns: 1fr 1fr; }
  .end-day-target { grid-column: 1 / -1; }
  .end-day-reflection { grid-template-columns: 1fr; }
  .journal-row { grid-template-columns: 82px minmax(0,1fr); }
  .journal-row > span:last-child { grid-column: 2; }
  .storage-card__side { width: 100%; }
  .modal__scroll { margin-top: 40px; }
  .modal__actions--block { position: sticky; bottom: 0; z-index: 5; margin: 0 -.8rem -.9rem; padding: 10px .8rem .9rem; background: linear-gradient(to bottom, transparent, var(--surface) 11px); }
  .time-combo { min-width: 0; }
  .time-input { flex: 1 1 auto; width: auto; min-width: 0; }
}


/* Time menu: the whole remaining right side is the button, with the chevron at the far edge. */

.time-combo { display: flex; }

.time-input { flex: 0 0 64px; width: 64px; }

@media (max-width:620px) {
  .time-combo { width:100%; }
  .time-input { flex-basis: 64px; width:64px; }
}

.modal__panel--help .modal__scroll { height: auto; min-height: 0; max-height: none; align-self: stretch; }

.mobile-time-label { display:none; }

/* Left plan rows: true vertical centering, stable circular actions, multiline growth. */

.item-row {
  align-items: center;
  min-height: 46px;
}

.item-row > .check { align-self: center; margin: 0; }

.item-main { min-width: 0; align-self: stretch; display: flex; align-items: center; }

.item-actions { align-self: center; gap: 2px; }

.task-action {
  width: 34px;
  height: 34px;
  min-width: 34px;
  min-height: 34px;
  padding: 0;
  border-radius: 999px;
  display: grid;
  place-items: center;
}

.item-time { align-self: center; }

/* Add task only appears when every visible slot is occupied, as one more task-shaped row. */

.task-add-row {
  width: 100%; min-height: 46px; margin-top: 7px; display: flex; align-items: center; justify-content: center; gap: 7px;
  padding: 8px 11px; border: 1px dashed var(--line); border-radius: 10px; background: transparent; color: var(--muted);
  font-size: .69rem; font-weight: 620; cursor: pointer; transition: background-color 130ms ease, border-color 130ms ease, color 130ms ease;
}

.task-add-row[hidden] { display: none; }

.task-add-row:hover,
.task-add-row:focus-visible { outline: 0; border-color: var(--line-strong); background: var(--soft); color: var(--ink); }

.task-add-row svg {   fill: none; stroke: currentColor; stroke-width: 1.55; stroke-linecap: round; }

/* Schedule action buttons share the same physical rhythm. */

/* Close day should never stretch one item to consume the modal. Its footer is always in view: the dialog is as
   tall as its content, up to the window, and its scroll area shrinks to fit inside it (margins included) and
   scrolls under the footer. The form adds no box of its own, so the footer sticks to the dialog's scroll area,
   wherever the list is. With room, only the carry list scrolls; in a short window (a phone, say) the whole dialog
   scrolls instead. */

[data-end-day-modal] .modal__panel { height: auto; max-height: calc(100dvh - 1.4rem); display: flex; flex-direction: column; }

[data-end-day-modal] .modal__scroll {
  flex: 0 1 auto; min-height: 0; height: auto; max-height: none; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain;
  display: block;
}

[data-end-day-form] { min-height: 0; display: contents; }

.end-day-list {
  min-height: 0; max-height: min(36dvh, 330px); height: auto;
  overflow-y: auto; overscroll-behavior: contain; padding-right: 7px; margin: 0;
}

@media (max-width: 620px), (max-height: 720px) {
  .end-day-list { max-height: none; overflow: visible; }
}

.end-day-list-head { margin-top: 11px; }

.end-day-item {
  width: 100%; min-height: 0; display: grid; grid-template-columns: minmax(0,1fr) auto;
  gap: 10px 14px; align-items: center; padding: 11px 12px; margin: 0 0 6px;
  border: 0; border-radius: 10px; background: transparent; box-shadow: inset 0 0 0 1px var(--line);
}

.end-day-item:hover { background: color-mix(in srgb, var(--soft) 58%, transparent); box-shadow: inset 0 0 0 1px var(--line-strong); }

.end-day-item__body { min-width: 0; display: grid; gap: 3px; }

.end-day-item__body strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .77rem; }

.end-day-item__meta { color: var(--faint); font-size: .57rem; font-weight: 620; text-transform: uppercase; letter-spacing: .055em; }

.end-day-triage { display: inline-flex; align-items: center; justify-content: flex-end; gap: 3px; }

.end-day-triage button {
  min-height: 30px; display: inline-flex; align-items: center; justify-content: center; gap: 5px; padding: 5px 8px;
  border: 0; border-radius: 8px; background: transparent; color: var(--muted); font-size: .61rem; font-weight: 620; cursor: pointer;
}

.end-day-triage button:hover,
.end-day-triage button:focus-visible { outline: 0; background: var(--soft); color: var(--ink); }

.end-day-triage button.is-selected { background: var(--soft); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); }

.end-day-triage__date svg {   fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.end-day-triage__drop.is-selected { color: var(--danger); background: color-mix(in srgb, var(--danger) 7%, var(--surface)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--danger) 20%, var(--line)); }

.end-day-actions { position: sticky; bottom: 0; z-index: 4; margin-top: 8px; padding-top: 10px; background: linear-gradient(to bottom, transparent, var(--surface) 12px); }

/* Journal is intentionally quiet: no row chrome until hover, newest first, batched. */

.journal-header { margin-bottom: .45rem; }

.journal-list { display: grid; gap: 1px; }

.journal-row {
  width: 100%; display: grid; grid-template-columns: 92px minmax(0,1fr); gap: 14px; align-items: start;
  padding: 10px 9px; border: 0; border-radius: 8px; background: transparent; box-shadow: none;
  color: var(--ink); text-align: left; cursor: pointer;
}

.journal-row:hover,
.journal-row:focus-visible { outline: 0; background: var(--soft); box-shadow: none; }

.journal-row time { padding-top: 1px; color: var(--faint); font-size: .61rem; font-weight: 620; font-variant-numeric: tabular-nums; }

.journal-row__copy { min-width: 0; display: grid; gap: 4px; }

.journal-row__copy strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .71rem; font-weight: 620; line-height: 1.35; }

.journal-row__copy p { margin: 0; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; color: var(--muted); font-size: .67rem; line-height: 1.42; }

.journal-load-more { width: 100%; min-height: 36px; margin-top: 8px; border: 0; border-radius: 8px; background: transparent; color: var(--muted); font-size: .66rem; font-weight: 620; cursor: pointer; }

.journal-load-more:hover,
.journal-load-more:focus-visible { outline: 0; background: var(--soft); color: var(--ink); }

/* Open work: two quiet lists, no inbox ceremony. */

.open-work-sections { display: grid; gap: 22px; }

.open-work-section { display: grid; gap: 7px; }

.open-work-section__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding-inline: 2px; }

.open-work-section__head h3 { margin: 0; font-size: .83rem; letter-spacing: -.02em; }

.open-work-section__head span { color: var(--faint); font-size: .62rem; font-variant-numeric: tabular-nums; }

.open-work-list { display: grid; gap: 3px; }

.open-work-row { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 10px; padding: 7px 8px; border-radius: 9px; }

.open-work-row:hover { background: var(--soft); }

.open-work-row__main { min-width: 0; display: grid; gap: 2px; padding: 2px 0; border: 0; background: transparent; color: inherit; text-align: left; cursor: pointer; }

div.open-work-row__main { cursor: default; }

.open-work-row__main strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .72rem; font-weight: 610; }

.open-work-row__main span { color: var(--faint); font-size: .59rem; }

.open-work-row__actions { display: flex; align-items: center; gap: 2px; }

.open-work-row__actions button { min-height: 29px; padding: 5px 8px; border: 0; border-radius: 7px; background: transparent; color: var(--muted); font-size: .59rem; font-weight: 620; cursor: pointer; }

.open-work-row__actions button:hover,
.open-work-row__actions button:focus-visible { outline: 0; background: var(--surface-strong); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); }

.open-work-row__actions button:last-child:hover { color: var(--danger); }

.open-work-empty { padding: 12px 9px; color: var(--faint); font-size: .68rem; }

/* Day/week close transition. */

.day-closed-actions { grid-template-columns: 1fr minmax(0,1.6fr); align-items: center; }

.day-closed-actions .modal__actions-right { width: 100%; display: flex; justify-content: flex-end; gap: 6px; }

/* Planning week controls. */

.planning-week-setting .select-trigger__value { text-align: center; }

/* Block editor: date uses remaining room; start/end time inputs stay equal. */

/* Help priority cards: side actions center vertically; status note spans the copy width cleanly. */

.github-support,
.storage-card { align-items: center; }

/* A phone stacks the GitHub card: its buttons share the full width below the words. */
@media (max-width: 620px) {
  .help-priority-card.github-support { align-items: stretch; }
}

.storage-card__copy { display: grid; align-content: center; }

.storage-safety { width: 100%; }

/* Printed planner identity is explicit and remains a clickable secure link in generated PDFs. */

.print-domain { text-decoration: none; }

/* Tooltip shortcuts should read as real keycaps. */

.app-tooltip-float kbd { flex: none; min-width: 20px; text-align: center; }

/* Open Work sits beside Journal/Stats in the global action sequence. */

@media (max-width: 620px) {
  .end-day-item { grid-template-columns: 1fr; gap: 7px; }
  .end-day-triage { justify-content: flex-start; overflow-x: auto; scrollbar-width: none; }
  .end-day-triage::-webkit-scrollbar { display: none; }
  .end-day-reflection { grid-template-columns: 1fr; }
  .journal-row { grid-template-columns: 70px minmax(0,1fr); gap: 10px; }
  .open-work-row { grid-template-columns: minmax(0,1fr); gap: 5px; }
  .open-work-row__actions { justify-content: flex-start; }
  .day-closed-actions { grid-template-columns: 1fr; gap: 7px; }
  .day-closed-actions .modal__actions-right { display: grid; grid-template-columns: 1fr 1fr; }
  .modal__actions--block:not(.is-add) { grid-template-columns: 40px minmax(0,1fr); }
  .modal__actions--block:not(.is-add) .modal__actions-right { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 620px) {
  /* Without an end date: Start date gets the elastic space, both time controls stay equal on one row. */
}

/* Empty task rows are deliberately inert until there is text. */

.task.is-empty .task-action,
.task.is-empty .task-action--remove { display: none; }

.task-action { aspect-ratio: 1 / 1; }

.task-add-row {
  min-height: 46px;
  border-style: solid;
  border-radius: 10px;
  background: var(--surface);
  box-shadow: inset 0 0 0 1px transparent;
}

.task-add-row:hover,
.task-add-row:focus-visible { background: var(--soft); box-shadow: inset 0 0 0 1px var(--line-strong); }

/* Close day: reflections need a real visual pause; the list ends at its scrollbar rather than before it. */

.end-day-reflection { margin-top: 18px; }

.end-day-list { padding-right: 3px; }

.end-day-item { width: 100%; }

/* Journal: a tiny three-column ledger. The column labels stay put while entries batch-scroll. */

[data-journal-modal] .modal__scroll { position: relative; }

.journal-header { margin-bottom: 6px; padding-bottom: 0; }

.journal-header h2 { margin-bottom: 0; }

.journal-columns-head,
.journal-row {
  display: grid;
  grid-template-columns: 86px minmax(0,1fr) minmax(0,1fr);
  gap: 14px;
}

.journal-columns-head {
  position: sticky;
  top: 0;
  z-index: 4;
  align-items: center;
  min-height: 30px;
  padding: 5px 9px 6px;
  background: color-mix(in srgb, var(--surface) 95%, transparent);
  backdrop-filter: blur(9px);
  color: var(--faint);
}

.journal-columns-head strong { font-size: .56rem; font-weight: 660; text-transform: uppercase; letter-spacing: .055em; }

.journal-list { gap: 0; }

.journal-row {
  align-items: start;
  padding: 8px 9px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  box-shadow: none;
}

.journal-row:hover,
.journal-row:focus-visible { background: var(--soft); }

.journal-row time { padding-top: 2px; font-size: .6rem; }

.journal-cell { min-width: 0; }

.journal-cell strong {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  font-size: .68rem;
  font-weight: 560;
  line-height: 1.38;
}

.journal-cell--lesson strong { color: var(--muted); }

.journal-cell em { color: var(--faint); font-size: .65rem; font-style: normal; }

/* Weekly chart tooltip belongs to the inspected point, never to the edge of the modal. */

/* PiP date navigation copies the app's pill geometry instead of inventing a second language. */

@media (max-width: 620px) {
  .journal-columns-head,
.journal-row { grid-template-columns: 64px minmax(0,1fr) minmax(0,1fr); gap: 8px; }
  .journal-columns-head { padding-inline: 6px; }
  .journal-row { padding-inline: 6px; }
  .journal-cell strong { font-size: .62rem; -webkit-line-clamp: 3; }
}

.date-title[data-date-picker] { cursor: pointer; border-radius: 8px; padding: 3px 5px; margin: -3px -5px; }

.date-title[data-date-picker]:hover { background: color-mix(in srgb, var(--soft) 64%, transparent); }

.date-title[data-date-picker]:focus-visible { outline: 1px solid var(--line-strong); outline-offset: 2px; }

/* Any action dismisses its hover tooltip immediately. */

.app-tooltip-float { pointer-events: none; }

/* Current time stays behind the schedule block; the live block itself becomes the time signal. */

.time-line { z-index: 5; }

/* Close day */

.end-day-reflection { margin-top: 24px; }

.end-day-list { min-height: 0; }

.end-day-reopen { align-self: center; justify-self: start; }

[data-end-day-form] .end-day-actions { grid-template-columns: minmax(0,1fr) auto; }

[data-end-day-form] .end-day-actions .modal__actions-right { min-width: min(320px, 62%); }

[data-end-day-form] .end-day-actions .primary-button { min-width: 150px; }

/* Open work is one compact two-state surface, not two stacked backlogs. */

.open-work-tabs { width: fit-content; margin: 0 0 12px; }

.open-work-sections { gap: 0; }

.open-work-row__main span { font-variant-numeric: tabular-nums; }

.open-work-row__actions button:first-child { background: color-mix(in srgb, var(--soft) 64%, transparent); box-shadow: inset 0 0 0 1px var(--line); }

.open-work-row__actions button:first-child:hover { background: var(--soft); }

/* Day closed: no artificial measure on the copy and true 50/50 next actions. */

.day-closed-header > p:last-child { max-width: none; }


.day-closed-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

.day-closed-actions > .text-button { width: 100%; min-height: 40px; border-radius: 9px; background: var(--soft); }

.day-closed-actions .modal__actions-right { display: contents; }

.day-closed-actions .primary-button,
.day-closed-actions .secondary-button { width: 100%; min-height: 40px; }

.day-closed-actions .secondary-button:not([hidden]) ~ .primary-button { grid-column: 2; }

/* Journal pagination is windowed: only one 40-row batch is in the DOM. */

.journal-pagination { min-height: 36px; margin-top: 8px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; }

.journal-pagination[hidden] { display: none; }

.journal-pagination > span { color: var(--faint); font-size: .58rem; font-variant-numeric: tabular-nums; }

.journal-pagination .journal-load-more:first-child { justify-self: start; }

.journal-pagination .journal-load-more:last-child { justify-self: end; }

.journal-load-more:disabled { opacity: .32; cursor: default; }

/* Week tooltip is fixed to the inspected point and clamped inside the modal. */

.mini-adventure-popover { display: grid; gap: 10px; padding: 10px; }

.mini-adventure-popover label { display: grid; gap: 5px; }

.mini-adventure-popover label > span { color: var(--faint); font-size: .57rem; font-weight: 670; text-transform: uppercase; letter-spacing: .05em; }

.mini-adventure-popover input { width: 100%; min-height: 36px; padding: 7px 9px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-strong); color: var(--ink); outline: 0; font: inherit; font-size: .68rem; caret-color: var(--ink); }

.mini-adventure-popover input:focus { border-color: var(--line-strong); }

.mini-adventure-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }

.mini-adventure-months { display: grid; grid-template-columns: repeat(6,1fr); gap: 3px; }

.mini-adventure-months button { min-height: 28px; padding: 4px; border: 0; border-radius: 6px; background: transparent; color: var(--muted); font-size: .55rem; font-weight: 620; cursor: pointer; }

.mini-adventure-months button:hover,
.mini-adventure-months button.is-selected { background: var(--soft); color: var(--ink); }

/* Shortcuts are useful reference, not another wall of prose. */

.shortcut-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3px 12px; margin-top: 8px; }

.shortcut-grid > div { min-height: 28px; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 4px 5px; border-radius: 7px; }

.shortcut-grid > div:hover { background: var(--soft); }

.shortcut-grid span { color: var(--muted); font-size: .64rem; }

.shortcut-grid kbd { min-width: 24px; min-height: 22px; display: inline-grid; place-items: center; padding: 2px 6px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface-strong); color: var(--ink); font: inherit; font-size: .57rem; font-weight: 650; box-shadow: 0 1px 0 var(--line); }

@media (max-width: 790px) {
  .modal__actions--block:not(.is-add) { display: grid; grid-template-columns: 40px minmax(0,1fr); align-items: center; gap: 6px; }
  .modal__actions--block:not(.is-add) .modal__actions-right { width: 100%; min-width: 0; display: grid; grid-template-columns: 1fr 1.35fr; gap: 6px; }
}

@media (max-width: 620px) {
  .shortcut-grid { grid-template-columns: 1fr; }
  .day-closed-actions { grid-template-columns: 1fr 1fr; }
}

/* Phones and touch-only screens have no keyboard to press: Help leaves the
   shortcut list and the "press F" hints out. */
@media (max-width: 760px), (hover: none) and (pointer: coarse) {
  .help-faq.help-faq--shortcuts,
  .help-keys { display: none; }
}

.item-history { display:block; margin-top:2px; color:var(--faint); font-size:.52rem; font-weight:610; line-height:1.2; font-variant-numeric:tabular-nums; }

.item-row.done .item-history { text-decoration:none; }

.open-work-tabs { width: 100%; }

[data-day-closed-copy] { max-width: none; width: 100%; }

.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

/* How it works: shortcuts first, then quiet FAQ sections. */

.help-shortcuts-top { margin: 0 0 12px; padding: 12px 13px; border: 1px solid var(--line); border-radius: 11px; background: color-mix(in srgb,var(--surface-strong) 58%,transparent); }

.help-faq { display:grid; gap:0; border-top:1px solid var(--line); }

.help-faq details { border-bottom:1px solid var(--line); }

.help-faq summary { min-height:46px; display:flex; align-items:center; justify-content:space-between; gap:14px; padding:10px 2px; cursor:pointer; list-style:none; color:var(--ink); font-size:.72rem; font-weight:650; }

.help-faq summary::-webkit-details-marker { display:none; }

.help-faq summary svg { flex:0 0 auto;   fill:none; stroke:var(--faint-mark); stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; transition:transform 180ms cubic-bezier(.22,1,.36,1), color 150ms ease; }

.help-faq details[open] summary svg { transform:rotate(180deg); }

.help-faq__body { overflow:hidden; color:var(--muted); font-size:.68rem; line-height:1.52; }

.help-faq__body > :first-child { margin-top:0; }

.help-faq__body > :last-child { margin-bottom:13px; }

@supports (interpolate-size: allow-keywords) {
  :root { interpolate-size: allow-keywords; }
  .help-faq__body { height:0; opacity:.2; transition:height 210ms cubic-bezier(.22,1,.36,1), opacity 140ms ease; }
  .help-faq details[open] .help-faq__body { height:auto; opacity:1; }
}

/* Carried history is useful context, not warning chrome. */

.item-history { width:max-content; max-width:100%; display:inline-flex; align-items:center; gap:4px; margin-top:4px; padding:2px 6px; border-radius:999px; background:color-mix(in srgb,var(--soft) 74%,transparent); color:var(--muted); font-size:.51rem; font-weight:620; line-height:1.25; }

.item-history svg,
.carry-badge svg {   flex:0 0 auto; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }

.carry-badge { display:inline-flex; align-items:center; gap:4px; padding:2px 6px; border-radius:999px; background:color-mix(in srgb,var(--soft) 78%,transparent); color:var(--muted); font-size:.52rem; font-weight:650; letter-spacing:0; text-transform:none; font-variant-numeric:tabular-nums; }

.open-work-row__main span { display:flex; align-items:center; flex-wrap:wrap; gap:5px; }

/* Close day triage: default date, exact-date override, safe undated Keep, or Drop. */

.end-day-triage { flex-wrap:wrap; justify-content:flex-end; }

.end-day-triage__date { background:color-mix(in srgb,var(--soft) 62%,transparent); box-shadow:inset 0 0 0 1px var(--line); }

.end-day-triage__plan { color:var(--ink); }

.end-day-triage__drop:hover { color:var(--danger); }

[data-reopen-modal] .modal__actions { display:grid; grid-template-columns:1fr 1fr; gap:7px; }

[data-reopen-modal] .modal__actions > .text-button,
[data-reopen-modal] .modal__actions .modal__actions-right,
[data-reopen-modal] .modal__actions .primary-button { width:100%; }

[data-reopen-modal] .modal__actions .modal__actions-right { display:block; }

[data-reopen-modal] .modal__actions .primary-button { min-height:40px; }

/* Unresolved is one compact surface with two states. */

.open-work-tabs { width:100%; margin-bottom:12px; }

.open-work-tabs button { flex:1 1 0; }

.open-work-row__actions button { white-space:nowrap; }

/* Current time lives underneath current work. Keep the category dot inside the readable inset. */

.time-line { z-index:1; }

/* Week chart tooltip belongs to its point, even at the right edge. */

/* Category add uses the same quiet inline-add language as Schedule. */

[data-category-add] { min-height:34px; padding:6px 10px; border-radius:9px; font-size:.66rem; }

/* PiP Plan stays compact and recognizably the same planner. */

/* Keep in mind + outcome clears use the same calm hover-only language as task actions. */

.focus-field-row { position: relative; display: grid; grid-template-columns: minmax(0,1fr) 34px; align-items: center; gap: 2px; }

.focus-field-row .focus-input { width: 100%; min-width: 0; }

.focus-clear-action,
.item-row .item-clear-action { opacity: 0; pointer-events: none; transition: opacity 120ms ease, background-color 120ms ease, color 120ms ease; }

.focus-field-row:hover .focus-clear-action,
.focus-field-row:focus-within .focus-clear-action,
.item-row:hover .item-clear-action,
.item-row:focus-within .item-clear-action { opacity: .62; pointer-events: auto; }

.focus-clear-action:hover,
.item-row .item-clear-action:hover { opacity: 1; }

.focus-clear-action[hidden],
.item-clear-action[hidden] { display: none; }

/* Archived categories disappear from active settings, while historical blocks retain their stored id/color. */

/* Close day: a date is one selectable destination, not a separate "Choose date" action. */

.end-day-triage { display: flex; align-items: center; justify-content: flex-end; gap: 4px; flex-wrap: wrap; }

.end-day-triage > button { min-height: 34px; border: 0; border-radius: 8px; padding: 6px 9px; background: transparent; color: var(--muted); font: inherit; font-size: .61rem; font-weight: 630; cursor: pointer; transition: background-color 130ms ease, color 130ms ease, box-shadow 130ms ease; }

.end-day-triage > button:hover { background: var(--soft); color: var(--ink); }

.end-day-triage > button.is-selected { background: var(--soft); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); }

.end-day-triage__date { display: inline-grid; grid-template-columns: 13px minmax(0,auto) 13px; align-items: center; gap: 6px; }

.end-day-triage__date > svg {   fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

.end-day-triage__date > svg:last-child { justify-self: end; }

.date-choice-spacer { width: 12px; height: 12px; }

.end-day-item__meta { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 6px; }

.end-day-item__meta > span:not(.carry-badge) + span:not(.carry-badge)::before { content: "·"; margin-right: 6px; color: var(--line-strong); }

.end-day-triage__drop.is-selected { color: var(--danger); background: color-mix(in srgb, var(--danger) 7%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--danger) 20%, transparent); }

.carry-badge { white-space: nowrap; }

/* Current block: category accent is inside the block, so it cannot be clipped by the schedule rail. */

.time-line { z-index: 1; }

/* Week stats tooltip is viewport-positioned from the inspected point and cannot escape the modal. */

/* Year cards: dates are meaningful, compact context rather than text-only anchors. */

/* Month is a calendar of significant things, not a second outcome worksheet. */

/* PiP top row is true three-way space-between: date | navigation | time. */

/* Header menus (1.33.2). More (≤1080px) holds what the header hides at that
   width, never what it still shows, in the wide header's order: Time stats
   (below 340px only, where the header lets it go), Print and Export, the
   planner (Settings, sync, install), then help. A rule separates the
   groups. Export opens in place on its own well, its options as large as the
   rest. The desktop Export menu speaks the same language: icons, the same
   type, rounded rows and a visible keyboard ring. */

.export-menu,
.mobile-more-menu { padding: 5px; border-radius: 12px; box-shadow: 0 16px 36px rgba(24, 21, 17, .12), 0 2px 6px rgba(24, 21, 17, .04); }

.mobile-more-menu { min-width: 236px; max-height: calc(100dvh - 76px); overflow-y: auto; overscroll-behavior: contain; gap: 0; }

/* Up to 790px it ends above the Plan / Schedule dock, and scrolls if it must. */
@media (max-width: 790px) {
  .mobile-more-menu { max-height: calc(100dvh - 72px - var(--mobile-dock-clearance)); }
}

.mobile-more-group { display: grid; gap: 2px; padding: 4px 0; }

.mobile-more-group:not(:last-child) { border-bottom: 1px solid var(--line); }

.mobile-more-menu .mobile-more-review { display: none; }

@media (max-width: 339px) {
  .topbar .actions > [data-stats-open] { display: none; }
  .mobile-more-menu .mobile-more-review { display: grid; }
}

/* From 791px the header has its own workspace switcher. */
@media (min-width: 791px) {
  .mobile-more-menu .mobile-workspace { display: none; }
}

.mobile-more-menu button,
.mobile-more-menu a { width: 100%; min-height: 44px; display: flex; align-items: center; gap: 11px; padding: 10px 11px; border: 0; border-radius: 9px; background: transparent; color: var(--muted); text-decoration: none; font: inherit; font-size: .78rem; line-height: 1.25; font-weight: 590; text-align: left; cursor: pointer; }

.mobile-more-menu button:hover,
.mobile-more-menu a:hover { background: var(--soft); color: var(--ink); }

.mobile-more-menu svg { flex: 0 0 var(--icon-size); fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

.mobile-more-menu svg .icon-fill,
.mobile-more-menu .icon-fill { fill: currentColor; stroke: none; }

.mobile-export-disclosure { --menu-well: var(--soft); --menu-well-hover: color-mix(in srgb, var(--ink) 6%, var(--soft)); display: grid; border-radius: 10px; }

.mobile-export-disclosure.is-open { background: var(--menu-well); }

.mobile-export-disclosure.is-open > button:hover,
.mobile-export-list button:hover { background: var(--menu-well-hover); }

.mobile-more-menu .disclosure-chevron { flex-basis: 16px; width: 16px; height: 16px; margin-left: auto; color: var(--faint-mark); transition: transform 180ms cubic-bezier(.22,1,.36,1); }

.mobile-export-disclosure.is-open .disclosure-chevron { transform: rotate(180deg); }

.mobile-export-options { display: grid; max-height: 0; opacity: 0; visibility: hidden; overflow: hidden; transition: max-height 220ms cubic-bezier(.22,1,.36,1), opacity 150ms ease, visibility 0s linear 220ms; }

.mobile-export-disclosure.is-open .mobile-export-options { max-height: 240px; opacity: 1; visibility: visible; transition-delay: 0s; }

.mobile-export-list { display: grid; gap: 1px; padding: 0 4px 4px; }

/* Option icons and labels line up with the row above (11px in, an icon, 11px). */
.mobile-export-list button { min-height: 40px; padding: 8px 7px; font-weight: 560; }

.mobile-more-menu .mobile-export-list svg { flex-basis: 18px; width: 18px; height: 18px; margin: 0 calc((var(--icon-size) - 18px) / 2); }

.export-menu { min-width: 214px; gap: 1px; }

.export-menu button { min-height: 36px; display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 8px; font-size: .78rem; font-weight: 590; line-height: 1.25; white-space: nowrap; }

.export-menu svg { flex: 0 0 18px; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

.app-menu__rule { height: 1px; margin: 4px 6px; background: var(--line); }

.app-menu :is(button, a):focus-visible { outline: 0; color: var(--ink); background: var(--soft); box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--accent) 60%, transparent); }

@media (prefers-reduced-motion: reduce) {
  .mobile-export-options,
  .mobile-more-menu .disclosure-chevron { transition: none; }
}

/* Help FAQ animation: shortcut starts closed; numbered sections can stay open. */

.help-faq { border-top: 1px solid var(--line); }

.help-faq > summary { list-style: none; min-height: 48px; display: flex; align-items: center; justify-content: space-between; gap: 12px; cursor: pointer; }

.help-faq > summary::-webkit-details-marker { display: none; }

.help-faq > summary::after { content: ""; width: 7px; height: 7px; border-right: 1.5px solid var(--faint-mark); border-bottom: 1.5px solid var(--faint-mark); transform: rotate(45deg); transition: transform 190ms cubic-bezier(.22,1,.36,1); }

.help-faq[open] > summary::after { transform: rotate(225deg); }

.help-faq__reveal { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows 230ms cubic-bezier(.22,1,.36,1), opacity 160ms ease; }

.help-faq__reveal > div { overflow: hidden; }

.help-faq[open] .help-faq__reveal { grid-template-rows: 1fr; opacity: 1; }

@media (max-width: 790px) {
  .mobile-more-wrap { display: flex; }
}

@media (max-width: 620px) {
  .modal__actions--block:not(.is-add) {
    display: grid;
    grid-template-columns: 40px minmax(0,1fr) minmax(0,1.32fr);
    align-items: center;
    gap: 6px;
  }
  .modal__actions--block:not(.is-add) .modal__actions-right {
    display: contents;
  }
  .modal__actions--block:not(.is-add) .modal__actions-right > [data-modal-close] {
    grid-column: 2;
    grid-row: 1;
    width: 100%;
  }
  .modal__actions--block.is-add {
    display: grid;
    grid-template-columns: minmax(0,1fr) minmax(0,1.32fr);
    gap: 6px;
  }
  .modal__actions--block.is-add .modal__actions-right { display: contents; }
  .modal__actions--block.is-add .modal__actions-right > [data-modal-close] { grid-column: 1; width:100%; }
}

/* A Key date can span months while remaining a single stored event. */

/* PiP top chrome remains three separate, balanced regions. */

.end-day-triage__date:not(.is-selected) { background: transparent; box-shadow: none; border-color: transparent; color: var(--muted); }

.end-day-triage > button.is-selected:not(.end-day-triage__date) { background: var(--soft); box-shadow: inset 0 0 0 1px var(--line); color: var(--ink); }

.end-day-habit { margin-top: 12px; }

.end-day-habit label { min-height: 52px; display: grid; grid-template-columns: 20px minmax(0,1fr); align-items: center; gap: 10px; padding: 9px 11px; border: 1px solid var(--line); border-radius: 10px; background: color-mix(in srgb,var(--soft) 45%,transparent); cursor: pointer; }

.end-day-habit input { appearance:none; width:20px; height:20px; margin:0; border:1px solid var(--line-strong); border-radius:6px; background:var(--surface-strong); position:relative; }

.end-day-habit input:checked { background:var(--ink); border-color:var(--ink); }

.end-day-habit input:checked::after { content:""; position:absolute; left:5.5px; top:2px; width:4.5px; height:9px; border:solid white; border-width:0 1.6px 1.6px 0; transform:rotate(45deg); }

.end-day-habit span { min-width:0; display:grid; gap:2px; }

.end-day-habit small { color:var(--faint); font-size:.55rem; font-weight:680; text-transform:uppercase; letter-spacing:.06em; }

.end-day-habit strong { font-size:.68rem; font-weight:620; }

/* Current-block category marker stays entirely inside the block. */

/* PiP header is always date | centered navigation | time, never overlapping. */

@media (max-width:790px) {
  /* Secondary utilities move to More; primary destinations stay in the header. */
  .actions > [data-pip],
  .actions > [data-expanded-view],
  .actions > [data-print],
  .actions > .action-popover-wrap:has([data-export]),
  .actions > [data-help-open],
  .actions > [data-github-link] { display:none; }
}

/* Keep/Drop are alternatives to a planned date: the date control becomes completely neutral. */

.end-day-triage__date:not(.is-selected) {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  color: var(--faint);
}
:root { --current-time: #9a5149; --on-current-time: #fffaf4; }

.view-toggle-button {
  width: 34px;
  height: 34px;
  min-width: 34px;
  min-height: 34px;
  display: inline-grid;
  place-items: center;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: color-mix(in srgb, var(--surface) 78%, transparent);
  color: var(--muted);
  cursor: pointer;
  transition: color 140ms ease, background-color 140ms ease, border-color 140ms ease, transform 160ms cubic-bezier(.22,1,.36,1);
}

.view-toggle-button svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.65;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.view-toggle-button [data-week-view-icon="day"] { display: none; }
.view-toggle-button[aria-pressed="true"] [data-week-view-icon="week"] { display: none; }
.view-toggle-button[aria-pressed="true"] [data-week-view-icon="day"] { display: block; }

.view-toggle-button:hover,
.view-toggle-button:focus-visible,
.view-toggle-button.is-active {
  outline: 0;
  border-color: var(--line-strong);
  background: var(--surface-strong);
  color: var(--ink);
}

.view-toggle-button:active { transform: scale(.94); }

/* Week is a schedule-only surface, deliberately keeping the daily editor out. */

.workspace.is-week-view { grid-template-columns: minmax(0,1fr); gap: 0; }

.workspace.is-week-view > .left { display: none; }

/* Three genuinely different color palettes, not three lightness ladders. */

.color-palettes { display: grid; gap: 9px; }

.color-palette-group { display: grid; gap: 5px; }

.color-palette-group__head { display: flex; align-items: center; justify-content: space-between; padding: 0 2px; }

.color-palette-group__head span { color: var(--faint); font-size: .57rem; font-weight: 700; letter-spacing: .065em; text-transform: uppercase; }

/* Archived categories stay visible and reversible in Settings. */

/* Winning habits are measurable: summary cards + a compact contribution heatmap. */

.habit-stat-cards { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 7px; }

.habit-stat-cards > div { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding: 9px 10px; border-radius: 9px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }

.habit-stat-cards span { color: var(--faint); font-size: .58rem; }

.habit-stat-cards strong { font-size: .82rem; }

/* The 12×31 year surface behaves like a calendar, not a stack of month cards. */

/* Selected month controls live immediately next to the month. */

@media (max-width: 980px) {
  .habit-stat-cards { grid-template-columns: 1fr 1fr; }
}



.end-day-habit label { grid-template-columns: 20px minmax(0,1fr) auto; }

.end-day-habit span em { color: var(--faint); font-size: .56rem; font-style: normal; }

.end-day-habit label > b { align-self: center; padding: 5px 8px; border-radius: 999px; background: var(--surface); color: var(--muted); font-size: .56rem; font-weight: 650; box-shadow: inset 0 0 0 1px var(--line); }

.end-day-habit input:checked ~ b { background: var(--soft); color: var(--ink); }

/* Daily columns begin on the same optical baseline. */

/* Week grid: hour rules belong to day columns, never to the hour gutter. */

/* The now line is always behind calendar blocks. */

.time-line { z-index: 1; }

/* Rich notes inside Add/Edit block. // creates an app checkbox instead of a glyph. */

/* Weekly graph tooltip lives inside the SVG itself. */

/* Close-day habit is a simple checkbox + content + stacked stats. */

.end-day-habit label { grid-template-columns: 20px minmax(0,1fr) auto; gap: 10px; }

.end-day-habit__stats { align-self: center; display: grid; justify-items: end; gap: 0; min-width: 70px; }

.end-day-habit__stats strong { color: var(--ink); font-size: .76rem; line-height: 1.1; }

.end-day-habit__stats small { color: var(--faint); font-size: .54rem; line-height: 1.3; white-space: nowrap; }

.end-day-habit label > b { display: none; }

/* Year grid: nonexistent dates truly disappear; weekends are gently visible. */

/* Month uses the same visual grammar as Year. */

/* Week printing: the same visible range, all columns, no rules through the hour gutter. */


/* Keep the two Daily column headings on the same optical top edge. */

/* The category mark of the current block always remains inside its content box. */

/* Winning habits are the large visualisation: four equal columns on wide screens. */

/* Year grid: valid final date keeps its boundary, non-dates become modal background. */

/* Year events: readable label first; ranges sit above only when they exist. */

/* Month calendar follows the same weekend/today language. */

/* SVG tooltip is always layered inside the graph and never participates in layout. */

/* Week is a peer of Close day: icon + label, no persistent selected fill. */


/* Keep in mind needs breathing room around its underline. */

.focus-field-row .focus-input { padding-bottom: 10px; }

.focus { padding-bottom: 2px; }

/* Daily and Schedule headings share the same top baseline. */

/* Rich notes: a checklist line remains a full-width editable row. */

/* Daily printing must always retain the Schedule column when not in Week view. */

/* Selected year/month are the same component, directly above their content. */

/* Direct Misogi editing: challenge + dates are one control surface. */

/* Mini-adventures are six real columns, with the Add card in the next slot. */

/* Winning habits are directly editable; heatmaps own the width of each quarter. */

/* Year grid: weekends are quiet; invalid cells disappear; one-day events stay in exactly one day. */

/* Month uses a different event surface from the weekend surface. */

/* No obsolete Misogi/adventure/habit inline editors. Key-date editor remains local to Key dates only. */

/* Keep in mind keeps the same one-line breathing room before and after editing. */

.focus-field-row .focus-input {
  min-height: 36px;
  padding-top: 4px;
  padding-bottom: 11px;
  line-height: 1.45;
}

/* Week view: elapsed days recede quietly; today keeps the planner's Now accent. */

/* Carry history is metadata, not a second pill/button. */

.item-history {
  width: auto;
  max-width: 100%;
  display: block;
  margin-top: 3px;
  padding: 0;
  border-radius: 0;
  background: transparent;
  color: var(--faint);
  font-size: .55rem;
  font-weight: 500;
  line-height: 1.25;
  white-space: nowrap;
}

.item-history span { white-space: nowrap; }

.carry-badge {
  display: inline;
  padding: 0;
  border-radius: 0;
  background: transparent;
  color: var(--faint);
  font-size: inherit;
  font-style: normal;
  font-weight: 500;
  letter-spacing: 0;
  white-space: nowrap;
}

.open-work-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 5px; }

.open-work-meta > * { color: var(--faint); font-style: normal; font-weight: 500; }

/* Unresolved: choosing dates is a draft until the user explicitly confirms. */

.modal--open-work .modal__panel {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  max-height: min(760px, calc(100dvh - 1.5rem));
}

.modal--open-work .modal__scroll {
  min-height: 0;
  max-height: none;
  overflow-y: auto;
  margin-bottom: 0;
}

.open-work-row.has-pending-plan { background: color-mix(in srgb, var(--soft) 60%, transparent); }

.open-work-row__actions button.is-planned {
  background: var(--soft);
  color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--line-strong);
}

.open-work-footer {
  position: relative;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 1rem;
  padding: 10px 0 12px;
  border-top: 1px solid var(--line);
  background: var(--surface);
}

.open-work-footer[hidden] { display: none; }

.open-work-footer > span { color: var(--muted); font-size: .64rem; font-variant-numeric: tabular-nums; }

.open-work-footer__actions { display: flex; align-items: center; justify-content: flex-end; gap: 7px; min-width: min(300px, 58%); }

.open-work-footer__actions .primary-button { min-width: 150px; }

/* Year events are real objects: visible neutral surfaces, edited in a local popover. */

@media (max-width: 620px) {
  .open-work-footer { align-items: stretch; flex-direction: column; }
  .open-work-footer__actions { width: 100%; min-width: 0; display: grid; grid-template-columns: 1fr 1.4fr; }
}

/* Week: past days use one neutral app surface for header + body. */

/* History should answer one thing: how often did this move? */

.item-history,
.carry-badge { color: var(--faint); font-size: .62rem; font-weight: 540; }

.end-day-habit__stats { min-width: 0; display: block; }

.end-day-habit__stats strong { font-size: .68rem; font-weight: 600; color: var(--muted); white-space: nowrap; }

.end-day-habit__stats small { display: none; }

/* No decorative blue state in Year or Month. The app stays neutral. */

/* Directional top area. */

/* Year commitments: text + one light state/date. */

/* Misogi milestones: just the proof points, not a project manager. */

/* Mini-adventures: six small commitments, not six mini-projects. */

/* Winning habits: compact by default; dataset appears only on demand. */

/* Selected month is part of the main story and comes before Year at a glance. */

/* Year at a glance stays useful but no longer dominates the page. */

/* Mini-adventures: title, period, countdown, done. No secondary status system. */

/* Winning habits return to four substantial columns. Details open smoothly in-place. */

/* The year/month UI stays neutral. No extra category-like state colors. */

/* Popover Done row follows the same app checkbox language. */

/* Rich block notes: every paragraph is a full-width sibling row; no nested columns. */

/* Winning habits: title first, metrics as one clean row, visualization full-width below. */

/* Month cells: only show +X when there is genuinely more than one significant item. */

/* Year-event editor uses the same calendar buttons as the rest of the app. */

/* Color preview always returns to the committed value after pointer exploration. */

/* Print styles live in styles/print.css. */
/* Next-day shaping after Close day. */
.day-closed-prep {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
}
.day-closed-prep__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.day-closed-prep__head span {
  color: var(--faint);
  font-size: .69rem;
  font-weight: 700;
  letter-spacing: .045em;
  text-transform: uppercase;
}
.day-closed-prep__head strong { font-size: .82rem; font-weight: 650; }
.day-closed-prep label { display: grid; gap: 5px; color: var(--muted); font-size: .69rem; font-weight: 620; }
.day-closed-prep textarea,
.day-closed-prep input {
  width: 100%;
  min-width: 0;
  min-height: 38px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 9px;
  outline: 0;
  background: var(--surface-raised, var(--surface));
  color: var(--ink);
  font: inherit;
  font-size: .82rem;
}
.day-closed-prep textarea { resize: none; overflow: hidden; }
.day-closed-prep textarea:focus,
.day-closed-prep input:focus { border-color: var(--line-strong); }
.day-closed-prep__outcomes { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.day-closed-prep__outcomes label:first-child { grid-column: 1 / -1; }

/* Add category is an action, not a three-column category row. */
.category-menu .popover-option.is-add-category {
  grid-template-columns: minmax(0, 1fr);
  white-space: nowrap;
  text-wrap: nowrap;
}
.category-menu .popover-option.is-add-category > * { min-width: 0; }

@media (max-width: 620px) {
  .day-closed-prep__outcomes { grid-template-columns: 1fr; }
  .day-closed-prep__outcomes label:first-child { grid-column: auto; }
}

/* Day closed is a calm handoff, not a cramped second planner. */
.modal--day-closed .modal__panel {
  width: min(760px, calc(100vw - 28px));
  max-width: 760px;
  max-height: min(90dvh, 860px);
}
.modal--day-closed .modal__scroll {
  padding: 28px 30px 24px;
  overflow-x: hidden;
}
.modal--day-closed .day-closed-header {
  display: grid;
  gap: 8px;
  padding-right: 44px;
}
.modal--day-closed .day-closed-header h2 {
  margin: 0;
  font-size: clamp(1.35rem, 2.2vw, 1.62rem);
  line-height: 1.08;
  letter-spacing: -.035em;
}
.modal--day-closed .day-closed-header > p:not(.modal__eyebrow) {
  margin: 0;
  max-width: none;
  color: var(--muted);
  font-size: .82rem;
  line-height: 1.5;
}
.modal--day-closed .day-closed-prep {
  display: grid;
  gap: 14px;
  margin-top: 22px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: color-mix(in srgb, var(--surface) 82%, transparent);
}
.modal--day-closed .day-closed-prep__head {
  display: grid;
  gap: 4px;
}
.modal--day-closed .day-closed-prep__head > span {
  color: var(--faint);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .055em;
  text-transform: uppercase;
}
.modal--day-closed .day-closed-prep__head h3 {
  margin: 0;
  color: var(--ink);
  font-size: 1.1rem;
  font-weight: 690;
  line-height: 1.15;
  letter-spacing: -.025em;
}
.modal--day-closed .day-closed-prep__head p {
  margin: 2px 0 0;
  max-width: none;
  color: var(--muted);
  font-size: .74rem;
  line-height: 1.45;
}
.modal--day-closed .day-closed-prep label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: .72rem;
  font-weight: 620;
}
.modal--day-closed .day-closed-prep textarea,
.modal--day-closed .day-closed-prep input {
  width: 100%;
  min-width: 0;
  min-height: 46px;
  padding: 11px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  outline: 0;
  background: var(--surface-strong);
  color: var(--ink);
  font: inherit;
  font-size: var(--planner-control-font);
  line-height: 1.35;
  caret-color: var(--ink);
}
.modal--day-closed .day-closed-prep textarea:focus,
.modal--day-closed .day-closed-prep input:focus { border-color: var(--line-strong); }
.modal--day-closed .day-closed-prep__outcomes {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
.modal--day-closed .day-closed-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 22px;
  padding-top: 0;
}
.modal--day-closed .day-closed-actions > button {
  width: 100%;
  min-height: 46px;
  border-radius: 10px;
}
.modal--day-closed [data-prepare-next-day] {
  background: var(--soft);
  border-color: transparent;
  color: var(--ink);
}
.modal--day-closed [data-day-closed-done] {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
}

.modal--day-closed[data-stage="week-prep"] .day-closed-actions {
  grid-template-columns: 1fr;
}
.modal--day-closed[data-stage="week-prep"] [data-prepare-next-day] {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
}
@media (max-width: 620px) {
  .modal--day-closed .modal__scroll { padding: 24px 18px 18px; }
  .modal--day-closed .day-closed-prep { padding: 14px; }
  .modal--day-closed .day-closed-actions { grid-template-columns: 1fr 1fr; }
}

/* Daily Notes uses the same rich checklist language as block Notes. */
.day-notes-editor {
  cursor: var(--text-edit-cursor);
  caret-color: var(--ink);
  white-space: pre-wrap;
  overflow-wrap: break-word;
}
.day-notes-editor:empty::before {
  content: attr(data-placeholder);
  color: color-mix(in srgb, var(--muted) 55%, transparent);
  pointer-events: none;
}
.day-note-line { width: 100%; min-width: 0; min-height: 1.5em; }
.day-note-line--check {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: 7px;
  align-items: start;
}
.day-note-line--check > span {
  display: block;
  min-width: 0;
  outline: 0;
  white-space: pre-wrap;
  overflow-wrap: break-word;
}

/* Match the calm placeholder contrast used by the Daily plan. */
.modal--day-closed .day-closed-prep input::placeholder,
.modal--day-closed .day-closed-prep textarea::placeholder {
  color: color-mix(in srgb, var(--muted) 55%, transparent);
  opacity: 1;
}

/* calendars must always render every week of a month -------------- */
.calendar-popover,
.period-calendar-popover {
  max-height: calc(100dvh - 20px);
  overflow: visible;
}
.calendar-popover__grid { grid-auto-rows: 34px; }
.calendar-day { min-height: 34px; aspect-ratio: auto; }
@media (max-height: 410px) {
  .calendar-popover,
  .period-calendar-popover { max-height: calc(100dvh - 12px); overflow-y: auto; }
  .calendar-popover__grid { grid-auto-rows: 30px; }
  .calendar-day { min-height: 30px; }
}

/* Stacked destructive confirmations sit above Horizon instead of replacing it. */
.modal[data-stacked-over="true"] { z-index: var(--z-modal-stacked); }
.modal[data-stacked-over="true"] .modal__backdrop { background: color-mix(in srgb, var(--ink) 18%, transparent); }

/* Mobile primary navigation: keep the core planner destinations visible and unique. */
@media (max-width: 790px) {
  .topbar { --icon-size: 22px; }
  .topbar .icon-button,
  .actions > .action-popover-wrap > .icon-button {
    width: 38px;
    height: 38px;
  }
}


/* Unresolved tabs show the size of each queue without adding visual noise. */
.open-work-tabs button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
}
.open-work-tab-count {
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  background: color-mix(in srgb, var(--line) 58%, transparent);
  color: var(--muted);
  font-size: .58rem;
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.open-work-tabs button.is-active .open-work-tab-count {
  background: var(--soft);
  color: var(--ink);
}

/* Phone header: every control is a 40px target; the date gives way first
   ("Wed, Oct 7", then "Oct 7"). Horizon lives in the bottom bar (1.22), so
   Time stats stays in the header down to 340px, then moves into More. The
   Now control only shows away from today: it waits at the right end, beside
   the actions, so neither it nor the date moves when it comes and goes. */
@media (max-width: 790px) {
  .date-identity { grid-template-columns: max-content minmax(0, 1fr) auto; }
  .date-identity > .date-title { grid-column: 2; }
  .date-identity > .date-nav { grid-column: 3; }
}
@media (max-width: 480px) {
  .topbar { gap: 2px; }
  .date-identity { gap: 4px; }
  .topbar .icon-button,
  .actions > .action-popover-wrap > .icon-button,
  .view-toggle-button,
  .today-button { width: 40px; height: 40px; min-width: 40px; min-height: 40px; }
  .today-calendar-icon { width: 28px; height: 28px; }
  .topbar { --icon-size: 21px; }
}

/* Day view: the left column is "Plan", mirroring "Schedule" (same size and
   baseline, its rule where the schedule starts), with how much of it is done.
   It stays in place while the plan scrolls. Phones show the same summary in
   the Plan / Schedule dock instead. */
.plan-head {
  position: sticky;
  z-index: 4;
  top: 0;
  flex: 0 0 auto;
  height: 43px;
  display: flex;
  align-items: flex-end;
  margin-bottom: -6px;
  padding-bottom: 9px;
  background: var(--paper);
  box-shadow: inset 0 -1px 0 var(--line);
}
.plan-head__row { width: 100%; display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.plan-head h2 { margin: 0; font-size: .94rem; line-height: 19px; letter-spacing: -.025em; }
.plan-head__done { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); font-size: .7rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.plan-head__meter { width: 38px; height: 4px; overflow: hidden; border-radius: 99px; background: var(--line); }
.plan-head__meter::before { content: ""; display: block; width: calc(var(--progress, 0) * 100%); height: 100%; border-radius: inherit; background: var(--ink); transition: width 240ms cubic-bezier(.22,1,.36,1); }
@media (min-width: 791px) {
  .workspace:not(.is-week-view) > .left.pane-scroll { padding-top: 0; }
}
.workspace.is-week-view .plan-head { display: none; }
@media (max-width: 790px) {
  .plan-head { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .plan-head__meter::before { transition: none; }
}

/* Day · Week · Horizon (1.22): the planner's three places, in the header on
   tablets and desktops. The pill echoes the Now navigator; the current place
   sits on a raised surface that slides between them. Below 1100px the labels
   stay and the icons go. Phones keep the Day / Week toggle here and reach
   Horizon from the bottom bar. */
.view-switch {
  position: relative;
  flex: 0 0 auto;
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 2px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface) 70%, transparent);
}
.view-switch__indicator {
  position: absolute;
  z-index: 0;
  border-radius: 999px;
  background: var(--surface-strong);
  box-shadow: 0 1px 2px rgba(28, 25, 21, .08), inset 0 0 0 1px var(--line);
  pointer-events: none;
}
.view-switch__indicator:not([data-ready]) { opacity: 0; }
.view-switch button {
  position: relative;
  z-index: 1;
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 12px 0 9px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-size: .7rem;
  font-weight: 650;
  letter-spacing: -.01em;
  transition: color 140ms ease, box-shadow 140ms ease;
}
.view-switch button svg { width: 16px; height: 16px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.view-switch button:hover,
.view-switch button.is-active { color: var(--ink); }
.view-switch button:focus-visible { outline: 0; color: var(--ink); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 55%, transparent); }
/* Before the indicator has measured itself, the current place still reads as current. */
.view-switch:not(:has([data-ready])) button.is-active { background: var(--surface-strong); box-shadow: inset 0 0 0 1px var(--line); }
@media (max-width: 1099px) {
  .view-switch button { padding: 0 11px; }
  .view-switch button svg { display: none; }
}
@media (min-width: 621px) {
  .view-toggle-button { display: none; }
  .date-identity { gap: 14px; }
  .mobile-view-switch [data-mobile-view="horizon"] { display: none; }
  /* Horizon opens below the header: its control stays live, the rest waits. */
  body.is-horizon .date-title,
  body.is-horizon .date-nav,
  body.is-horizon .actions { opacity: .4; transition: opacity 170ms ease; }
}
@media (max-width: 620px) {
  .view-switch { display: none; }
  /* The phone bar: Plan · Schedule · Horizon. It stays above Horizon, below
     anything opened on top of it (stacked dialogs, popovers). */
  .mobile-view-switch { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .mobile-view-switch__indicator { width: calc((100% - 6px) / 3); }
  /* Three tabs share a phone's width: the icon leads the name, the summary
     gets the whole tab below them. */
  .mobile-view-switch button {
    display: grid;
    grid-template-columns: auto auto;
    justify-content: center;
    align-content: center;
    gap: 2px 6px;
    padding: 5px 6px;
  }
  .mobile-view-switch button svg { width: 17px; height: 17px; justify-self: end; }
  .mobile-view-switch__text { display: contents; }
  .mobile-view-switch__text > span { justify-self: start; }
  .mobile-view-switch__text small { grid-column: 1 / -1; min-width: 0; max-width: 100%; justify-self: center; text-align: center; }
  body.is-horizon .mobile-view-switch {
    z-index: calc(var(--z-modal) + 5);
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
  }
}

/* Save and Forget as icons (a disk, a bin) beside the date in close-day triage and Unresolved; the tooltip and the label carry the words. */
.triage-icon { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.end-day-triage > .triage-icon-button { width: 34px; padding: 0; }
.open-work-row__actions .triage-icon-button { width: 30px; min-height: 30px; padding: 0; display: inline-flex; align-items: center; justify-content: center; }

/* The bin, once chosen in close-day triage, reads as Forget: red. */
.end-day-triage > button.end-day-triage__drop.is-selected { color: var(--danger); background: color-mix(in srgb, var(--danger) 8%, var(--surface)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--danger) 24%, var(--line)); }

/* On phones Unresolved's actions stay on the right of the row, centred on it, now that Save and Forget are
   icons. Close day keeps its date, Save and Forget under the item (its titles and labels are longer, and the
   date chip wide), aligned to the right. */
@media (max-width: 620px) {
  .open-work-row { grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 8px; }
  .open-work-row__actions { justify-content: flex-end; }
  .end-day-triage { justify-content: flex-end; }
}

/* Journal on wider screens: the date reads at the size of the entries beside it. */
@media (min-width: 621px) {
  .journal-columns-head,
  .journal-row { grid-template-columns: 116px minmax(0,1fr) minmax(0,1fr); }
  .journal-row time { padding-top: 0; color: var(--muted); font-size: .72rem; font-weight: 620; line-height: 1.38; }
}


/* styles/schedule.css */
/* Schedule domain styles. */

.schedule-chip svg {


  fill: none;
  stroke: currentColor;
  stroke-width: 1.55;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.schedule-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 9px;
}
.schedule-head h2 {
  margin: 0;
  font-size: .94rem;
  letter-spacing: -.025em;
}
.item-row.done .schedule-chip { opacity: .82; }
.schedule-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 0;
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: .63rem;
  cursor: pointer;
}
.schedule-chip:hover { color: var(--ink); }
.schedule-section {
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.mobile-quick-add { display: none; }
.schedule-head { flex: 0 0 auto; margin: 8px 8px 8px 0; }
.schedule-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-right: 6px;
}
.schedule {
  position: relative;
  min-height: calc(var(--hour) * var(--visible-hours) + var(--schedule-pad-top) + var(--schedule-pad-bottom));
  background:
    linear-gradient(to bottom, var(--hour-line) 1px, transparent 1px)
    0 var(--schedule-pad-top) / 100% var(--hour) repeat-y;
  cursor: default;
}
.hours { position: absolute; inset: 0; pointer-events: none; }
.hour-label {
  position: absolute;
  left: 0;
  width: 47px;
  transform: translateY(-.48em);
  color: var(--faint);
  font-size: .62rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  background: var(--paper);
  padding-right: 5px;
}
.schedule-hover {
  position: absolute;
  z-index: 1;
  left: 52px;
  right: 0;
  height: 1px;
  border-top: 1px solid color-mix(in srgb, var(--ink) 14%, transparent);
  pointer-events: none;
}
.schedule-hover span {
  position: absolute;
  left: 7px;
  top: -12px;
  padding: 2px 6px;
  border-radius: 999px;
  background: var(--paper);
  color: var(--faint);
  font-size: .58rem;
  font-variant-numeric: tabular-nums;
}
.time-block {
  position: absolute;
  z-index: 2;
  min-height: 30px;
  padding: 12px;
  border: 0;
  border-radius: 8px;
  background: color-mix(in srgb, var(--block-color, var(--accent)) 10%, var(--surface));
  color: var(--ink);
  cursor: pointer;
  overflow: hidden;
  user-select: none;
  touch-action: none;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--block-color, var(--accent)) 12%, transparent);
  transition: box-shadow 180ms ease, transform 180ms cubic-bezier(.22,1,.36,1), filter 180ms ease, opacity 180ms ease, left 180ms cubic-bezier(.22,1,.36,1), width 180ms cubic-bezier(.22,1,.36,1);
}
.time-block:hover { filter: saturate(.88) brightness(.997); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--block-color, var(--accent)) 21%, transparent), 0 4px 14px rgba(31,27,22,.055); }
.time-block.is-pressed { transform: scale(.997); }
.time-block.is-dragging,
.time-block.is-resizing {
  z-index: 20;
  cursor: grabbing;
  transition: box-shadow 120ms ease, transform 120ms ease, opacity 120ms ease;
  box-shadow: 0 16px 36px rgba(31,27,22,.14), inset 0 0 0 1px color-mix(in srgb, var(--block-color, var(--accent)) 24%, transparent);
}
.time-block.is-dragging { transform: scale(.995) translateX(2px); opacity: .97; }
.time-block.is-resizing { transform: scaleX(.997); }
.time-block__title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: var(--title-lines, 2);
  line-clamp: var(--title-lines, 2);
  overflow: hidden;
  text-overflow: clip;
  white-space: normal;
  text-wrap: pretty;
  font-size: var(--schedule-title-font);
  font-weight: 650;
  line-height: 1.25;
  letter-spacing: -.01em;
}
.time-block__link {
  display: block;
  width: fit-content;
  max-width: 100%;
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: color-mix(in srgb, var(--block-color, var(--accent)) 70%, var(--muted));
  font-size: .58rem;
  text-decoration: none;
}
.time-block__link:hover { text-decoration: underline; text-underline-offset: 2px; }
.time-block__meta {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 2px;
  color: var(--muted);
  font-size: .6rem;
  font-variant-numeric: tabular-nums;
  line-height: 1.25;
}
.time-block__meta .category-dot { width: 5px; height: 5px; }
.time-block:hover .resize::after,
.time-block.is-resizing .resize::after { opacity: 1; transform: translateX(-50%) scaleX(1); }
.block-form { display: grid; grid-template-columns: 1fr 1fr; gap: .82rem .7rem; }
.schedule-chip { cursor: pointer; }
.duration-field { margin-top: -.05rem; }
.duration-shortcuts { display: flex; flex-wrap: wrap; gap: 5px; }
.duration-shortcuts button {
  min-height: 29px;
  padding: 5px 9px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font-size: var(--schedule-title-font-micro);
  font-weight: 570;
  cursor: pointer;
  transition: color 130ms ease, background-color 130ms ease, border-color 130ms ease;
}
.duration-shortcuts button:hover,
.duration-shortcuts button:focus-visible { outline: 0; color: var(--ink); background: var(--soft); }
.duration-shortcuts button.is-active { color: var(--ink); background: var(--surface-strong); border-color: var(--line); }
.block-form .primary-button { padding-inline: 16px; }
.time-block__top {
  grid-template-columns: minmax(0,1fr) auto auto;
  align-items: center;
  gap: 7px;
}
.block-check {
  width: 17px;
  height: 17px;
  margin: 0;
  border-radius: 5px;
}
.block-check::after { left: 4.2px; top: 1.4px; width: 4px; height: 8px; }
.time-block__micro-time { display: none; color: var(--muted); font-size: .6rem; font-variant-numeric: tabular-nums; }
.time-block__link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 3px;
  font-size: .64rem;
  font-weight: 540;
}
.time-block__link svg {   flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; }
.time-block.is-short { padding-top: 5px; padding-bottom: 5px; }
.time-block.is-short .time-block__link { display: none; }
.time-block.is-short .time-block__meta { margin-top: 1px; font-size: .57rem; }
.time-block.is-micro {
  min-height: 30px;
  padding: 4px 7px 4px 8px;
}
.time-block.is-micro .time-block__top { height: 100%; grid-template-columns: minmax(0,1fr) auto 15px; gap: 6px; }
.time-block.is-micro .time-block__micro-time { display: inline; }
.time-block.is-micro .block-check { width: 15px; height: 15px; border-radius: 4px; }
.time-block.is-micro .block-check::after { left: 3.5px; top: .8px; width: 3.5px; height: 7px; }
.time-block.is-micro .time-block__link,
.time-block.is-micro .time-block__meta { display: none; }
@media (max-width: 790px) {
  .schedule-section { height: calc(100% - var(--mobile-dock-clearance)); }
  .workspace[data-mobile-active="plan"] .schedule-section { display: none; }
  .schedule-head { margin-top: 5px; }
  .schedule-head [data-schedule-add] { display: none; }
  .workspace[data-mobile-active="schedule"] .mobile-quick-add {
    position: fixed;
    z-index: var(--z-mobile-action);
    right: 18px;
    bottom: calc(var(--mobile-dock-clearance) + 10px);
    width: 52px;
    height: 52px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 1px solid color-mix(in srgb, var(--ink) 14%, transparent);
    border-radius: 16px;
    background: var(--ink);
    color: var(--paper);
    box-shadow: 0 12px 28px rgba(28,25,21,.2);
    cursor: pointer;
    transition: transform 160ms cubic-bezier(.22,1,.36,1), box-shadow 160ms ease;
  }
  .workspace[data-mobile-active="schedule"] .mobile-quick-add:hover,
  .workspace[data-mobile-active="schedule"] .mobile-quick-add:focus-visible {
    outline: 0;
    transform: translateY(-1px);
    box-shadow: 0 15px 32px rgba(28,25,21,.24);
  }
  .workspace[data-mobile-active="schedule"] .mobile-quick-add:active { transform: scale(.95); }
  .mobile-quick-add svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
}
@media (max-width: 620px) {
  .schedule { --hour: 64px; }
  .block-form { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .duration-shortcuts { gap: 4px; }
  .duration-shortcuts button { padding-inline: 7px; }
}

.schedule { --schedule-content-left: 62px; }
.schedule-hover { left: var(--schedule-content-left); }
.time-block__top {
  min-width: 0;
  display: grid;
  grid-template-columns: 14px minmax(0, 1fr);
  align-items: start;
  gap: 6px;
}
.block-check {
  appearance: none;
  width: 13px;
  height: 13px;
  margin: 0;
  position: relative;
  border: 1px solid color-mix(in srgb, var(--block-color, var(--accent)) 38%, var(--line-strong));
  border-radius: 4px;
  background: color-mix(in srgb, var(--surface-strong) 88%, transparent);
  cursor: pointer;
  transition: background-color 140ms ease, border-color 140ms ease, box-shadow 140ms ease, transform 160ms cubic-bezier(.22,1,.36,1);
}
.block-check::after {
  content: "";
  position: absolute;
  left: 3.2px;
  top: .8px;
  width: 3.4px;
  height: 6.8px;
  border: solid var(--surface-strong);
  border-width: 0 1.3px 1.3px 0;
  transform: rotate(45deg) scale(.45);
  opacity: 0;
  transition: opacity 120ms ease, transform 150ms ease;
}
.block-check:checked {
  border-color: color-mix(in srgb, var(--block-color, var(--accent)) 70%, var(--ink));
  background: color-mix(in srgb, var(--block-color, var(--accent)) 68%, var(--ink));
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--block-color, var(--accent)) 9%, transparent);
}
.block-check:checked::after { opacity: 1; transform: rotate(45deg) scale(1); }
/* A done block recedes as a whole; its text is ink under that opacity, so it reads as muted and still
   reaches 4.5:1 on the block's tint. */
.time-block.done { opacity: .66; }
.time-block.done .time-block__title {
  color: var(--ink);
  text-decoration: line-through;
  text-decoration-thickness: 1px;
  text-decoration-color: color-mix(in srgb, var(--muted) 58%, transparent);
}
.time-block.done .time-block__meta,
.time-block.done .time-block__link { color: var(--ink); }
.time-block__top {
  grid-template-columns: minmax(0,1fr) auto auto;
  align-items: center;
  gap: 7px;
}
.block-check {
  width: 17px;
  height: 17px;
  margin: 0;
  border-radius: 5px;
}
.block-check::after { left: 4.2px; top: 1.4px; width: 4px; height: 8px; }
.time-block.is-micro .time-block__top { height: 100%; grid-template-columns: minmax(0,1fr) auto 15px; gap: 6px; }
.time-block.is-micro .block-check { width: 15px; height: 15px; border-radius: 4px; }
.time-block.is-micro .block-check::after { left: 3.5px; top: .8px; width: 3.5px; height: 7px; }

.item-row .schedule-chip { cursor: pointer; }
.block-notes-field { margin-top: -.05rem; }
.duration-shortcuts {
  display: grid;
  grid-template-columns: repeat(6, minmax(0,1fr));
  gap: 6px;
  width: 100%;
}
.duration-shortcuts button {
  width: 100%;
  min-width: 0;
  min-height: 34px;
  padding: 6px 4px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-strong);
  color: var(--muted);
  text-align: center;
  font-size: .66rem;
  font-weight: 600;
}
.duration-shortcuts button:hover,
.duration-shortcuts button:focus-visible { border-color: var(--line-strong); background: var(--soft); color: var(--ink); }
.duration-shortcuts button.is-active {
  border-color: color-mix(in srgb, var(--ink) 28%, var(--line));
  background: color-mix(in srgb, var(--ink) 7%, var(--surface-strong));
  color: var(--ink);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 3%, transparent);
}
.modal__actions--block > [data-block-delete] { justify-self: start; }
.block-form .primary-button { padding-inline: 18px; }
.time-block__notes {
  display: block;
  margin-top: 4px;
  padding: 5px 6px;
  border-radius: 6px;
  background: color-mix(in srgb, var(--surface-strong) 55%, transparent);
  color: color-mix(in srgb, var(--ink) 62%, var(--muted));
  font-size: var(--schedule-note-font);
  line-height: 1.35;
  overflow: hidden;
  contain: paint;
  text-wrap: pretty;
}
.time-block.is-compact .time-block__link,
.time-block.is-compact .time-block__notes { display: none; }
.time-block.is-compact .time-block__title { -webkit-line-clamp: 2; line-clamp: 2; }
.time-block.is-micro {
  min-height: 30px;
  padding: 4px 7px 4px 8px;
}
.time-block.is-micro .time-block__top {
  height: 100%;
  grid-template-columns: minmax(0,1fr) auto 15px;
  gap: 6px;
}
.time-block.is-micro .time-block__title {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--schedule-title-font-micro);
  line-height: 1.15;
}
.time-block.is-micro .time-block__micro-time { display: inline; white-space: nowrap; }
.time-block.is-micro .time-block__link,
.time-block.is-micro .time-block__meta,
.time-block.is-micro .time-block__notes { display: none; }
@media (max-width: 620px) {
  .duration-shortcuts { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .modal__actions--block > [data-block-delete] { grid-column: 1; }
}
.task.is-empty [data-schedule-item] { display: none; }
.time-block__meta { flex-wrap: nowrap; overflow: hidden; white-space: nowrap; }
.time-block__meta > span { flex: 0 0 auto; }
.time-block__overrun {
  margin-left: 2px;
  padding: 1px 4px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--danger) 10%, transparent);
  color: var(--danger);
  font-weight: 650;
}
.time-block__notes > span {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: var(--note-lines);
  line-clamp: var(--note-lines);
  max-height: calc(var(--note-lines) * 1.35em);
  overflow: hidden;
  white-space: pre-wrap;
}
.block-notes-field textarea { min-height: 124px; }
.block-form .block-submit { padding-inline: 34px; }
.schedule-head__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
}
.block-check {
  width: 20px;
  height: 20px;
  min-width: 20px;
  border-radius: 6px;
}
.block-check::after { left: 5.5px; top: 2px; width: 4.5px; height: 9px; }
.time-block.is-micro .block-check { width: 20px; height: 20px; min-width: 20px; border-radius: 6px; }
.time-block.is-micro .block-check::after { left: 5.5px; top: 2px; width: 4.5px; height: 9px; }
.schedule { background: none; }
.hour-label {
  width: 100%;
  padding-right: 0;
  background: transparent;
}
.hour-label::after {
  content: "";
  position: absolute;
  z-index: 0;
  left: 52px;
  right: 0;
  top: .48em;
  border-top: 1px solid var(--hour-line);
}
.hour-label__text {
  position: relative;
  z-index: 1;
  display: inline-block;
  width: 47px;
  padding-right: 5px;
  background: var(--paper);
}
.block-title-row {
  display: grid;
  grid-template-columns: minmax(0,1fr) 40px;
  gap: 8px;
  align-items: end;
}
.block-done-check {
  width: 40px;
  height: 38px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--surface-strong);
  color: var(--faint);
  cursor: pointer;
  transition: border-color 130ms ease, background-color 130ms ease, color 130ms ease, box-shadow 130ms ease, transform 150ms ease;
}
.block-done-check svg {   fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.block-done-check:hover,
.block-done-check:focus-visible { outline: 0; border-color: var(--line-strong); color: var(--ink); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ink) 4%, transparent); }
.block-done-check.is-active { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.block-done-check:active { transform: scale(.96); }
.time-menu-button {
  width: 34px;
  height: 36px;
  display: grid;
  place-items: center;
  padding: 0;
  background: transparent;
  color: var(--faint);
  cursor: pointer;
}
.time-menu-button:hover,
.time-menu-button:focus-visible { outline: 0; color: var(--ink); background: var(--soft); }
.time-menu-button svg {   fill: none; stroke: currentColor; stroke-width: 1.55; stroke-linecap: round; stroke-linejoin: round; }
.block-category-trigger { font-size: .78rem; }
/* "Manage" sits in the label row without making it taller than its neighbour's label. */
.block-category-field .form-field-label-row { min-height: 0; }
.block-category-field .inline-field-action { margin-block: -4px; }
.block-category-trigger .select-trigger__value { font-size: inherit; }
.block-notes-field { order: 20; }
.block-notes-field textarea { min-height: 128px; }
@media (max-width: 620px) {
  .block-form { grid-template-columns: 1fr; }
  .block-title-row { grid-template-columns: minmax(0,1fr) 40px; }
  .modal__actions--block [data-block-delete] { width: 38px; min-width: 38px; padding: 0; }
  .modal__actions--block [data-block-delete] span { display: none; }
  .modal__actions--block .block-submit { width: 100%; padding-inline: 14px; }
  .modal__actions--block.is-add [data-block-delete] { display: none; }
}

@media (max-width: 790px) {
  .schedule-head { align-items: center; }
  .schedule-head__actions { gap: 3px; }
  .schedule-scroll { max-height: none; padding-bottom: 0; }
  .modal__actions--block:not(.is-add) > [data-block-delete] { grid-row: 1; align-self: center; }
}
.block-notes-field { order: initial; }
.block-form > .form-error { order: 35; }

.block-time-layout {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px;
  align-items: end;
}
.block-time-field { min-width: 0; display: grid; gap: .38rem; }
.block-time-controls {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(145px, 1.35fr) minmax(110px, .72fr);
  gap: 7px;
}
.block-time-controls--end:not(.has-end-date) { grid-template-columns: minmax(110px, 1fr); }
.block-time-controls--end:not(.has-end-date) .time-combo { width: 100%; }
.time-menu-button {
  flex: 0 0 29px;
  width: 29px;
  margin-left: 1px;
  border-radius: 6px;
}
.block-title-row:has([data-block-done][hidden]) { grid-template-columns: minmax(0,1fr); }
.block-category-trigger {
  width: 100%;
  min-height: 38px;
  padding-inline: 10px;
  font-size: .78rem;
}
.duration-shortcuts { display: grid; grid-template-columns: repeat(6, minmax(0,1fr)); gap: 5px; }
.duration-shortcuts button {
  width: 100%;
  min-height: 34px;
  padding: 5px 6px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  text-align: center;
  font-size: .67rem;
  font-weight: 620;
}
.duration-shortcuts button:hover,
.duration-shortcuts button:focus-visible { outline: 0; border-color: var(--line); background: color-mix(in srgb, var(--soft) 50%, transparent); color: var(--ink); }
.duration-shortcuts button.is-active { border-color: var(--line); background: var(--surface-strong); color: var(--ink); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--line) 45%, transparent); }
.modal__actions--block .block-submit { width: 100%; justify-content: center; }
@media (max-width: 620px) {
  .block-time-layout { grid-template-columns: 1fr; }
  .block-time-controls { grid-template-columns: minmax(130px,1fr) minmax(104px,.7fr); }
  .duration-shortcuts { grid-template-columns: repeat(3, minmax(0,1fr)); }
}
@media (max-width: 620px) {
  .block-time-layout { grid-template-columns: 1fr 1fr; gap: 7px; }
  .block-time-field { min-width: 0; }
  .block-time-controls { grid-template-columns: 1fr; }
  .block-time-controls .date-trigger { width: 100%; }
  .block-time-layout:not(.has-end-date) .block-time-field--start .date-trigger { margin-bottom: 0; }
  .block-time-layout:not(.has-end-date) .time-combo { width: 100%; }
  .time-menu-button { margin-left: auto; }
}
.time-menu-button { flex: 1 1 auto; width: auto; min-width: 34px; justify-content: flex-end; padding-right: 10px; margin-left: 0; border-radius: 0 8px 8px 0; }
@media (max-width:620px) {
  .time-menu-button { flex:1 1 auto; }
}
@media (max-width:620px) {
  .block-time-layout:not(.has-end-date) { display:grid; grid-template-columns:1fr 1fr; gap:7px; }
  .block-time-layout:not(.has-end-date) .block-time-field { display:contents; }
  .block-time-layout:not(.has-end-date) .block-time-field--start .form-field-label-row { grid-column:1 / -1; grid-row:1; }
  .block-time-layout:not(.has-end-date) .block-time-field--end .form-field-label-row { display:none; }
  .block-time-layout:not(.has-end-date) .block-time-controls { display:contents; }
  .block-time-layout:not(.has-end-date) [data-start-date] { grid-column:1 / -1; grid-row:2; }
  .block-time-layout:not(.has-end-date) .block-time-field--start .time-combo { grid-column:1; grid-row:3; }
  .block-time-layout:not(.has-end-date) .block-time-field--end .time-combo { grid-column:2; grid-row:3; }
  .block-time-layout:not(.has-end-date) .time-combo { min-width:0; display:grid; grid-template-columns:auto minmax(0,1fr) 32px; align-items:center; }
  .block-time-layout:not(.has-end-date) .mobile-time-label { display:block; padding-left:9px; color:var(--faint); font-size:.55rem; font-weight:650; text-transform:uppercase; letter-spacing:.055em; }
  .block-time-layout:not(.has-end-date) .time-input { width:100%; min-width:0; padding-left:6px; text-align:center; }
  .block-time-layout:not(.has-end-date) .time-menu-button { width:32px; min-width:32px; padding-right:8px; }
}
.schedule-head__actions .inline-add-button,
.schedule-head__actions .end-day-button { min-height: 34px; padding-inline: 11px; border-radius: 9px; }
.block-time-layout:not(.has-end-date) .block-time-field--start .block-time-controls { grid-template-columns: minmax(0,1fr) 142px; }
.block-time-layout:not(.has-end-date) .block-time-field--end .block-time-controls { grid-template-columns: 142px; }
.block-time-layout:not(.has-end-date) .time-combo { width: 142px; }
.block-time-layout:not(.has-end-date) .time-input { flex: 0 0 64px; width: 64px; }
@media (max-width: 620px) {
  .modal__actions--block:not(.is-add) > [data-block-delete] { width: 40px; height: 38px; padding: 0; border-radius: 9px; background: var(--soft); display: grid; place-items: center; }
  .modal__actions--block:not(.is-add) > [data-block-delete] span { display: none; }
}
@media (max-width: 620px) {
  .block-time-layout:not(.has-end-date) {
    display: grid;
    grid-template-columns: minmax(112px, 1fr) 96px 96px;
    gap: 6px;
    align-items: end;
  }
  .block-time-layout:not(.has-end-date) .block-time-field { display: contents; }
  .block-time-layout:not(.has-end-date) .block-time-field--start .form-field-label-row { grid-column: 1 / -1; grid-row: 1; }
  .block-time-layout:not(.has-end-date) .block-time-field--end .form-field-label-row { display: none; }
  .block-time-layout:not(.has-end-date) .block-time-controls { display: contents; }
  .block-time-layout:not(.has-end-date) [data-start-date] { grid-column: 1; grid-row: 2; width: 100%; min-width: 0; }
  .block-time-layout:not(.has-end-date) .block-time-field--start .time-combo { grid-column: 2; grid-row: 2; width: 96px; }
  .block-time-layout:not(.has-end-date) .block-time-field--end .time-combo { grid-column: 3; grid-row: 2; width: 96px; }
  .block-time-layout:not(.has-end-date) .mobile-time-label { display: none; }
  .block-time-layout:not(.has-end-date) .time-input { flex: 0 0 58px; width: 58px; min-width: 0; padding-inline: 5px; text-align: center; }
  .block-time-layout:not(.has-end-date) .time-menu-button { flex: 1 1 auto; min-width: 32px; padding-right: 7px; }
}
.time-block { z-index: 8; }
.time-block.is-dragging,
.time-block.is-resizing { z-index: 30; }
.time-block.is-current {
  background: #9a5149;
  color: #fffaf4;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, #743a35 58%, transparent), 0 4px 13px rgba(69,36,33,.10);
}
.time-block.is-current .time-block__title,
.time-block.is-current .time-block__meta,
.time-block.is-current .time-block__micro-time,
.time-block.is-current .time-block__link,
.time-block.is-current .time-block__overrun { color: #fffaf4; }
.time-block.is-current .category-dot { outline: 1px solid color-mix(in srgb, white 70%, transparent); }
.time-block.is-current .time-block__notes { background: color-mix(in srgb, #fffaf4 14%, transparent); color: #fffaf4; }
.time-block.is-current .block-check { background: color-mix(in srgb, #fffaf4 8%, transparent); border-color: color-mix(in srgb, #fffaf4 70%, transparent); }
.time-block.is-current .block-check:checked { background: #fffaf4; border-color: #fffaf4; }
.time-block.is-current .block-check:checked::after { border-color: #9a5149; }
.time-block { z-index:4; }
.time-block.is-current { z-index:6; overflow:hidden; }
.time-block.is-dragging,
.time-block.is-resizing { z-index:30; }
.time-block__meta .category-dot { flex:0 0 6px; width:6px; height:6px; margin-left:1px; box-sizing:border-box; }
.time-block.is-current .category-dot { outline-offset:1px; }
.time-block::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; border-radius: 8px 0 0 8px; background: var(--block-color, var(--accent)); opacity: .9; pointer-events: none; }
.time-block.is-current::before { width: 6px; }
.time-block__meta .category-dot { margin-left: 0; outline: none; }
.time-block { z-index: 4; }
.time-block.is-current { z-index: 6; }
@media (max-width: 620px) {
  .modal__actions--block:not(.is-add) > [data-block-delete] {
    grid-column: 1;
    grid-row: 1;
    width: 40px;
    height: 40px;
    min-width: 40px;
    border-radius: 9px;
    background: color-mix(in srgb, var(--danger) 7%, var(--soft));
  }
  .modal__actions--block:not(.is-add) .modal__actions-right > .block-submit {
    grid-column: 3;
    grid-row: 1;
    width: 100%;
  }
  .modal__actions--block.is-add .modal__actions-right > .block-submit { grid-column: 2; width:100%; }
}
.time-block__meta .category-dot { margin-left:2px; outline:none; box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--surface-strong) 55%,transparent); }
.time-block.is-current .category-dot { outline:none; }
.workspace.is-week-view .schedule-section { min-width: 0; }
@media (max-width: 980px) {
  .workspace.is-week-view .schedule-scroll { overflow-x: auto; }
}
.workspace.is-week-view .schedule-head__actions { display: none; }
.schedule-head { margin-top: 10px; }
.workspace.is-week-view .schedule-head { display: none; }
.time-block { z-index: 3; }
.time-block.is-current { z-index: 4; }
.time-block__meta .category-dot {
  margin-left: 4px;
  width: 6px;
  height: 6px;
  flex: 0 0 6px;
  box-shadow: inset 0 0 0 1px color-mix(in srgb,var(--surface-strong) 65%,transparent);
}
.block-notes-editor {
  min-height: 112px;
  max-height: 230px;
  overflow-y: auto;
  padding: 10px 11px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface-strong);
  color: var(--ink);
  outline: 0;
  font-size: .78rem;
  line-height: 1.5;
  caret-color: var(--ink);
  cursor: var(--text-edit-cursor);
  white-space: pre-wrap;
}
.block-notes-editor:empty::before { content: attr(data-placeholder); color: var(--faint); pointer-events: none; }
.block-notes-editor:focus { border-color: var(--line-strong); box-shadow: 0 0 0 3px color-mix(in srgb,var(--ink) 4%,transparent); }
.block-note-line { min-height: 1.5em; }
.block-note-line--check { display: grid; grid-template-columns: 18px minmax(0,1fr); gap: 7px; align-items: start; }
.block-note-line--check > span { min-width: 0; outline: 0; }
.rich-note-check {
  width: 18px;
  height: 18px;
  position: relative;
  display: inline-block;
  margin: 1px 0 0;
  padding: 0;
  border: 1px solid var(--line-strong);
  border-radius: 5px;
  background: var(--surface-strong);
  box-shadow: none;
  flex: 0 0 auto;
  cursor: pointer;
  vertical-align: top;
}
.rich-note-check.is-checked { background: var(--ink); border-color: var(--ink); }
.rich-note-check.is-checked::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 2px;
  width: 4px;
  height: 8px;
  border: solid var(--surface-strong);
  border-width: 0 1.5px 1.5px 0;
  transform: rotate(45deg);
}
.time-block-note-line { display: block; min-width: 0; }
.time-block-note-line--check { display: grid; grid-template-columns: 14px minmax(0,1fr); gap: 5px; align-items: start; }
.time-block-note-line--check .rich-note-check { width: 13px; height: 13px; border-radius: 4px; margin-top: 1px; }
.time-block-note-line--check .rich-note-check.is-checked::after { left: 3.5px; top: 1px; width: 3px; height: 6px; border-width: 0 1.2px 1.2px 0; }

.schedule-head { margin-top: 8px; }
.time-block__meta { padding-left: 2px; }
.time-block__meta .category-dot { margin-left: 0; }
.time-block.is-current { overflow: hidden; }
.schedule-head { margin-top: 0; }
.block-note-line { width: 100%; min-width: 0; }
.block-note-line--check { width: 100%; grid-template-columns: 18px minmax(0,1fr); align-items: start; }
.block-note-line--check > span { display: block; width: 100%; min-width: 0; white-space: pre-wrap; overflow-wrap: anywhere; word-break: normal; }
.block-note-line--check > span:focus { outline: 0; }

.block-notes-editor { display: block; }
.block-notes-editor > .block-note-line { display: block; width: 100%; min-width: 0; }
.block-notes-editor > .block-note-line--check { display: grid; grid-template-columns: 20px minmax(0,1fr); gap: 7px; }
.block-notes-editor > .block-note-line--check > span { display: block; width: auto; min-width: 0; white-space: pre-wrap; overflow-wrap: break-word; word-break: normal; }


/* 1.19: a block that starts above the visible part of the schedule keeps its
   title and check on screen while any of it is visible. `clip` (not `hidden`)
   so the block isn't a scroll container and the sticky row can follow. */
.time-block,
.time-block.is-current { overflow: hidden; overflow: clip; }
.time-block:not(.is-micro) .time-block__top { position: sticky; z-index: 1; top: 6px; background: inherit; }

/* Finished while still on the clock: done styling plus a quiet "now" ring. */
.time-block.is-now-done { box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--current-time) 50%, transparent); }


/* styles/week.css */
/* Weekly review ---------------------------------------------------------- */
.week-summary { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin-bottom: 8px; }
.week-summary > div { padding: 9px 10px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface-strong); }
.week-summary span { display: block; color: var(--faint); font-size: .58rem; font-weight: 650; text-transform: uppercase; letter-spacing: .07em; }
.week-summary strong { display: block; margin-top: 2px; font-size: .9rem; }

.week-review-summary {
  display: grid;
  gap: 14px;
  margin: 20px 0 4px;
}
.week-review-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface-strong);
}
.week-review-metrics > div {
  min-width: 0;
  padding: 13px 14px;
  border-right: 1px solid var(--line);
}
.week-review-metrics > div:last-child { border-right: 0; }
.week-review-metrics span,
.week-review-section__head > span {
  color: var(--faint);
  font-size: .6rem;
  font-weight: 700;
  letter-spacing: .055em;
  text-transform: uppercase;
}
.week-review-metrics strong {
  display: block;
  margin-top: 4px;
  color: var(--ink);
  font-size: 1.02rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.025em;
}
.week-review-metrics strong small { color: var(--muted); font: inherit; font-weight: 600; }
.week-review-metrics em {
  display: block;
  margin-top: 1px;
  color: var(--muted);
  font-size: .62rem;
  font-style: normal;
}
.week-review-section {
  display: grid;
  gap: 9px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}
.week-review-section__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
}
.week-review-section__head > strong {
  flex: 0 0 auto;
  color: var(--ink);
  font-size: .74rem;
  font-weight: 680;
  font-variant-numeric: tabular-nums;
}
.week-review-inline-action {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex: 0 0 auto;
  padding: 2px 0;
  border: 0;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: .66rem;
  font-weight: 650;
  cursor: pointer;
}
.week-review-inline-action:hover { color: var(--ink); }
.week-review-inline-action span { font-size: .72rem; line-height: 1; }
.week-review-empty-note {
  margin: 0;
  color: var(--muted);
  font-size: .7rem;
  line-height: 1.45;
}
.week-review-time-rows { display: grid; gap: 9px; }
.week-review-time-row { display: grid; gap: 5px; }
.week-review-time-row__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-width: 0;
}
.week-review-time-row__meta > span {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  overflow: hidden;
  color: var(--ink);
  font-size: .72rem;
  font-weight: 620;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.week-review-time-row__meta > span i {
  width: 7px;
  height: 7px;
  flex: 0 0 7px;
  border-radius: 999px;
}
.week-review-time-row__meta > strong {
  flex: 0 0 auto;
  color: var(--muted);
  font-size: .67rem;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
}
.week-review-time-track {
  height: 4px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--soft);
}
.week-review-time-track > i {
  display: block;
  width: var(--week-review-share);
  height: 100%;
  border-radius: inherit;
  background: var(--week-review-color);
}
.week-review-list { display: grid; gap: 0; }
.week-review-list p {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin: 0;
  padding: 7px 0;
  border-bottom: 1px solid color-mix(in srgb, var(--line) 72%, transparent);
  color: var(--ink);
  font-size: .72rem;
  line-height: 1.4;
}
.week-review-list p:last-child { border-bottom: 0; }
.week-review-list p > span { min-width: 0; }
.week-review-list p > em {
  flex: 0 0 auto;
  color: var(--muted);
  font-size: .62rem;
  font-style: normal;
}
@media (max-width: 620px) {
  .week-review-metrics { grid-template-columns: 1fr; }
  .week-review-metrics > div { border-right: 0; border-bottom: 1px solid var(--line); }
  .week-review-metrics > div:last-child { border-bottom: 0; }
}

/* Week schedule ---------------------------------------------------------- */
.week-schedule {
  --week-past-surface: color-mix(in srgb, var(--soft) 62%, var(--paper));
  position: relative;
  min-width: 720px;
  padding-bottom: var(--schedule-pad-bottom);
}

.week-schedule-head {
  position: sticky;
  z-index: 30;
  top: 0;
  display: grid;
  grid-template-columns: 54px repeat(var(--week-days, 7), minmax(0, 1fr));
  min-height: 46px;
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--paper) 96%, transparent);
  backdrop-filter: blur(10px);
}

.week-gutter-head {
  display: grid;
  place-content: center;
  gap: 1px;
  border-right: 1px solid var(--line);
  color: var(--faint);
  text-align: center;
}
.week-gutter-head small { font-size: .48rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.week-gutter-head strong { color: var(--muted); font-size: .7rem; font-weight: 680; font-variant-numeric: tabular-nums; }

.week-day-head {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 6px 8px;
  border: 0;
  border-right: 1px solid var(--line);
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}
.week-day-head:last-child { border-right: 0; }
.week-day-head:hover { background: var(--soft); color: var(--ink); }
.week-day-head span { font-size: .6rem; font-weight: 670; text-transform: uppercase; letter-spacing: .055em; }
.week-day-head strong { font-size: .88rem; font-weight: 680; font-variant-numeric: tabular-nums; }

.week-schedule-body {
  position: relative;
  display: grid;
  grid-template-columns: 54px repeat(var(--week-days, 7), minmax(0, 1fr));
  min-width: 100%;
}
.week-hour-gutter { position: relative; border-right: 1px solid var(--line); }
.week-hour-label {
  position: absolute;
  left: 0;
  width: 49px;
  transform: translateY(-50%);
  padding-right: 7px;
  color: var(--faint);
  font-size: .59rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.week-day-column {
  position: relative;
  min-width: 0;
  border-right: 1px solid color-mix(in srgb, var(--line) 80%, transparent);
  background-image: repeating-linear-gradient(to bottom, transparent 0 calc(var(--hour) - 1px), var(--hour-line) calc(var(--hour) - 1px) var(--hour));
  background-position: 0 var(--schedule-pad-top);
  background-repeat: repeat-y;
}
.week-day-column:last-child { border-right: 0; }

.week-day-head.is-past,
.week-day-column.is-past { background-color: var(--week-past-surface); }
.week-day-head.is-past { color: var(--muted); }
.week-day-column.is-past .week-time-block:not(:hover) { opacity: .74; }
.week-day-head.is-today,
.week-day-column.is-today { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--current-time) 68%, transparent); }
.week-day-head.is-today { color: var(--ink); }
.week-day-head.is-today strong { color: var(--current-time); }
.week-day-column.is-drop-target {
  background-color: color-mix(in srgb, var(--block-color, var(--ink)) 5%, var(--surface));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 20%, transparent);
}

/* Week schedule blocks --------------------------------------------------- */
.week-time-block {
  position: absolute;
  z-index: 5;
  min-width: 0;
  overflow: hidden;
  padding: 7px 7px 6px 9px;
  border: 0;
  border-radius: 7px;
  background: color-mix(in srgb, var(--block-color) 9%, var(--surface-strong));
  box-shadow: inset 3px 0 0 var(--block-color), inset 0 0 0 1px color-mix(in srgb, var(--block-color) 24%, var(--line));
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  user-select: none;
  touch-action: none;
  transition: box-shadow 140ms ease, transform 140ms cubic-bezier(.22,1,.36,1), opacity 140ms ease;
}
.week-time-block:hover { background: color-mix(in srgb, var(--block-color) 14%, var(--surface-strong)); }
.week-time-block.is-pressed { transform: scale(.997); }
.week-time-block.is-dragging {
  z-index: 30;
  cursor: grabbing;
  transform: scale(.995) translateX(2px);
  opacity: .97;
  box-shadow: 0 16px 36px rgba(31,27,22,.14), inset 3px 0 0 var(--block-color), inset 0 0 0 1px color-mix(in srgb, var(--block-color) 30%, var(--line));
}
/* Done: the block recedes, its text in ink so it still reaches 4.5:1 under the opacity. */
.week-time-block.done { opacity: .63; }
.week-time-block.done .week-time-block__category,
.week-time-block.done .week-time-block__time { color: var(--ink); }
.week-time-block.is-resizing {
  z-index: 30;
  cursor: ns-resize;
  box-shadow: 0 14px 30px rgba(31,27,22,.12), inset 3px 0 0 var(--block-color), inset 0 0 0 1px color-mix(in srgb, var(--block-color) 30%, var(--line));
}

.week-time-block__copy {
  position: relative;
  z-index: 2;
  min-width: 0;
  width: 100%;
  box-sizing: border-box;
  display: grid;
  gap: 2px;
  padding-right: 26px;
}
.week-time-block strong {
  display: -webkit-box;
  min-width: 0;
  padding-right: 0;
  overflow: hidden;
  text-overflow: clip;
  white-space: normal;
  text-wrap: pretty;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  font-size: .68rem;
  font-weight: 660;
  line-height: 1.12;
}
.week-time-block__meta {
  min-width: 0;
  width: 100%;
  display: flex;
  align-items: center;
  gap: 4px;
  overflow: hidden;
  line-height: 1.08;
  white-space: nowrap;
}
.week-time-block__category {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 4px;
  overflow: hidden;
  color: var(--muted);
  font-size: .5rem;
}
.week-time-block__category i {
  position: static;
  width: 6px;
  height: 6px;
  flex: 0 0 6px;
  border-radius: 999px;
}
.week-time-block__separator {
  flex: 0 0 auto;
  color: var(--faint);
  font-size: .49rem;
}
.week-time-block__category-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Muted, not faint: it sits on the category's tint, where dark faint would fall under 4.5:1. */
.week-time-block__time {
  flex: 0 0 auto;
  min-width: max-content;
  overflow: visible;
  color: var(--muted);
  font-size: .49rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
/* The block opens from a button laid over all of it, a sibling of the checkbox and the resize handle (no control
   inside another). The pointer is handled by the block itself (drag, or open on release); the button is for the
   keyboard and screen readers. The block clips what overflows it, so its focus ring goes round the block. */
.week-time-block__open {
  position: absolute;
  z-index: 2;
  inset: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: inherit;
  background: transparent;
  cursor: inherit;
}
.week-time-block__open:focus-visible { outline-offset: -2px; }
@supports selector(:has(*)) {
  .week-time-block__open:focus-visible { outline: 0; }
  .week-time-block:has(> .week-time-block__open:focus-visible) {
    outline: 2px solid color-mix(in srgb, var(--accent) 70%, transparent);
    outline-offset: 2px;
  }
}
/* The box drawn is 20px; the control is 24px, so it is easier to hit (WCAG 2.5.8): the extra 2px all round is
   invisible, and the focus ring sits where it did. */
.week-time-block__check {
  position: absolute;
  z-index: 3;
  top: 4px;
  right: 4px;
  width: 24px;
  height: 24px;
  margin: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
}
.week-time-block__check::before {
  content: "";
  position: absolute;
  inset: 2px;
  box-sizing: border-box;
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  background: color-mix(in srgb, var(--surface-strong) 90%, transparent);
  transition: background-color 160ms ease, border-color 160ms ease, box-shadow 180ms ease;
}
.week-time-block__check::after { left: 8.6px; top: 5.1px; }
.week-time-block__check:checked { border-color: transparent; background: transparent; box-shadow: none; }
.week-time-block__check:checked::before { border-color: var(--ink); background: var(--ink); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ink) 7%, transparent); }
.week-time-block__check:focus-visible { outline-offset: 0; }
.week-time-block__resize {
  z-index: 4;
  height: 12px;
  touch-action: none;
  pointer-events: auto;
}
.week-time-block:hover .week-time-block__resize::after,
.week-time-block.is-resizing .week-time-block__resize::after {
  opacity: 1;
  transform: translateX(-50%) scaleX(1);
}

.week-time-block.is-micro {
  padding-top: 4px;
  padding-bottom: 4px;
}
.week-time-block.is-micro .week-time-block__copy { gap: 1px; }
.week-time-block.is-micro strong { font-size: .66rem; line-height: 1.05; }
.week-time-block.is-micro .week-time-block__category,
.week-time-block.is-micro .week-time-block__time { font-size: .45rem; line-height: 1.02; }
.week-time-block.is-micro .week-time-block__category i { width: 5px; height: 5px; flex-basis: 5px; }
.week-time-block.is-micro .week-time-block__check { top: 2px; right: 3px; }

/* Current blocks mirror Day. JS also reconciles this class from line geometry,
   so every overlapping block turns current even when the minute changes. */
.week-time-block.is-current {
  z-index: 7;
  background: #9a5149;
  color: #fffaf4;
  box-shadow: inset 3px 0 0 var(--block-color), inset 0 0 0 1px color-mix(in srgb, #743a35 58%, transparent), 0 4px 13px rgba(69,36,33,.10);
}
.week-time-block.is-current strong,
.week-time-block.is-current .week-time-block__category,
.week-time-block.is-current .week-time-block__separator,
.week-time-block.is-current .week-time-block__time { color: #fffaf4; }
.week-time-block.is-current .week-time-block__check::before {
  background: color-mix(in srgb, #fffaf4 8%, transparent);
  border-color: color-mix(in srgb, #fffaf4 70%, transparent);
}
.week-time-block.is-current .week-time-block__check:checked::before { background: #fffaf4; border-color: #fffaf4; }
.week-time-block.is-current .week-time-block__check:checked::after { border-color: var(--current-time); }
.week-now-line {
  position: absolute;
  z-index: 1;
  left: 0;
  right: 0;
  overflow: visible;
  border-top: 1px solid var(--current-time);
  pointer-events: none;
}
.week-now-line span {
  position: absolute;
  z-index: 10;
  left: 0;
  top: 0;
  transform: translateY(-50%);
  padding: 2px 5px;
  border-radius: 999px;
  background: var(--current-time);
  color: var(--on-current-time, #fff);
  font-size: .62rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
  white-space: nowrap;
}
.week-now-line span::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 7px;
  border-top: 1px solid var(--current-time);
}
.week-now-line[data-label-placement="outside-left"] span::after { left: 100%; }
.week-now-line[data-label-placement="outside-right"] span::after { right: 100%; }
.week-now-line[data-label-placement^="inside"] span::after { display: none; }

.week-schedule-hover {
  position: absolute;
  z-index: 10;
  left: 0;
  right: 0;
  height: 1px;
  border-top: 1px solid color-mix(in srgb, var(--ink) 34%, transparent);
  pointer-events: none;
}
.week-schedule-hover span {
  position: absolute;
  left: 6px;
  top: -12px;
  padding: 2px 5px;
  border-radius: 6px;
  background: var(--surface-strong);
  color: var(--muted);
  box-shadow: 0 3px 12px rgba(31,27,22,.08), inset 0 0 0 1px var(--line);
  font-size: .53rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

@media (max-width: 980px) { .week-schedule { min-width: 760px; } }
@media (max-width: 760px) {
  .workspace.is-week-view .schedule-scroll {
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scroll-padding-inline: 54px 12px;
  }
  .week-schedule { min-width: 760px; }
  .week-gutter-head,
  .week-hour-gutter {
    position: sticky;
    left: 0;
    background: var(--paper);
    box-shadow: 1px 0 0 var(--line), 6px 0 12px color-mix(in srgb, var(--paper) 82%, transparent);
  }
  .week-gutter-head { z-index: 36; }
  .week-hour-gutter { z-index: 24; }
}

@media (hover: none), (pointer: coarse) {
  .week-time-block__resize::after {
    opacity: .55;
    transform: translateX(-50%) scaleX(.75);
  }
}

/* Unresolved work is a decision surface, not another plain review divider. */
.week-review-section--unresolved {
  gap: 10px;
  padding: 13px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface-strong);
}
.week-review-section--unresolved .week-review-section__head { align-items: center; }
.week-review-section__title {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.week-review-section__title > em {
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  background: var(--soft);
  color: var(--muted);
  font-size: .58rem;
  font-style: normal;
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
}
.week-review-section--unresolved .week-review-inline-action {
  min-height: 30px;
  padding: 5px 9px;
  border: 1px solid transparent;
  border-radius: 8px;
  color: var(--muted);
  transition: background-color .12s ease, border-color .12s ease, color .12s ease;
}
.week-review-section--unresolved .week-review-inline-action:hover,
.week-review-section--unresolved .week-review-inline-action:focus-visible {
  outline: 0;
  border-color: var(--line);
  background: var(--soft);
  color: var(--ink);
}
.week-review-section--unresolved .week-review-list p:first-child { padding-top: 4px; }

/* 1.19: titles of blocks that start above the visible area stay readable,
   just under the sticky day header (46px + border). */
.week-time-block { overflow: hidden; overflow: clip; }
.week-time-block:not(.is-micro) .week-time-block__copy { position: sticky; top: 52px; background: inherit; }
.week-time-block.is-now-done { box-shadow: inset 3px 0 0 var(--block-color), inset 0 0 0 1.5px color-mix(in srgb, var(--current-time) 50%, transparent); }

/* 1.21: each day header carries that day's plan ------------------------- */
.week-schedule { --week-head-h: 46px; }
.week-day-head {
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 6px;
  padding: 7px 10px 8px;
  text-align: left;
}
.week-day-head__date { display: flex; align-items: baseline; justify-content: flex-start; gap: 7px; }
.week-day-head .week-day-head__plan { min-width: 0; display: grid; gap: 3px; font-size: inherit; text-transform: none; letter-spacing: 0; }
.week-day-head__mit { min-width: 0; display: flex; align-items: center; gap: 6px; color: var(--ink); }
.week-day-head__mit > span { min-width: 0; overflow: hidden; font-size: .66rem; font-weight: 620; letter-spacing: -.005em; text-overflow: ellipsis; text-transform: none; white-space: nowrap; }
.week-day-head__mit.is-done > span { color: var(--muted); text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--muted) 55%, transparent); }
.week-day-head__mit.is-empty > span { color: var(--faint); font-weight: 520; }
.week-day-head .week-day-head__meta { overflow: hidden; color: var(--faint); font-size: .58rem; font-weight: 580; letter-spacing: 0; text-overflow: ellipsis; text-transform: none; white-space: nowrap; font-variant-numeric: tabular-nums; }
.week-day-head .week-day-head__date span { font-size: .6rem; font-weight: 670; text-transform: uppercase; letter-spacing: .055em; }
.week-day-head:hover .week-day-head__mit.is-empty > span { color: var(--muted); }
.week-day-head:focus-visible { outline: 0; box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--accent) 55%, transparent); }

/* A small check that only shows state (the day itself is where it's ticked). */
.week-plan-check {
  width: 12px;
  height: 12px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border: 1.3px solid var(--line-strong);
  border-radius: 4px;
  background: var(--surface-strong);
}
.week-plan-check.is-done { border-color: var(--ink); background: var(--ink); color: var(--paper); }
.week-plan-check svg { width: 10px; height: 10px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }

@media (min-width: 791px) {
  .week-schedule { --week-head-h: 78px; }
  .week-schedule-head { min-height: var(--week-head-h); }
}
@media (max-width: 790px) {
  .week-day-head { flex-direction: row; align-items: center; justify-content: center; padding: 6px 8px; }
  .week-day-head .week-day-head__plan { display: none; }
}
.week-time-block:not(.is-micro) .week-time-block__copy { top: calc(var(--week-head-h) + 6px); }

/* An empty week says how blocks are added here: over the visible grid, not
   scrolling with it, and never in the way of a click. */
.schedule-section { position: relative; }
.week-empty-hint {
  position: absolute;
  z-index: 31;
  left: 54px;
  right: 8px;
  top: calc(var(--week-head-h, 46px) + var(--hour) * 1.25);
  display: flex;
  justify-content: center;
  margin: 0;
  pointer-events: none;
}
.workspace:not(.is-week-view) .week-empty-hint { display: none; }
@media (min-width: 791px) { .schedule-section { --week-head-h: 78px; } }
.week-empty-hint span {
  padding: 7px 13px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface-strong) 88%, transparent);
  box-shadow: inset 0 0 0 1px var(--line);
  color: var(--muted);
  font-size: .72rem;
  font-weight: 600;
}
.week-empty-hint__touch { display: none; }
@media (hover: none), (pointer: coarse) {
  .week-empty-hint__pointer { display: none; }
  .week-empty-hint__touch { display: inline; }
}

/* Phones: Week's Plan tab is an agenda of the planning days ------------- */
.week-agenda { display: none; }
@media (max-width: 790px) {
  .workspace.is-week-view[data-mobile-active="plan"] .week-agenda { display: block; height: calc(100% - var(--mobile-dock-clearance)); }
  .workspace.is-week-view[data-mobile-active="plan"] .schedule-section { display: none; }
}
.week-agenda__list { display: grid; gap: 8px; margin: 0; padding: 4px 0 20px; list-style: none; }
.week-agenda__day {
  width: 100%;
  min-height: 64px;
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) 18px;
  align-items: start;
  gap: 12px;
  padding: 12px 10px 12px 12px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: var(--surface-strong);
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  transition: border-color 140ms ease, background-color 140ms ease;
}
.week-agenda__day:hover,
.week-agenda__day:focus-visible { outline: 0; border-color: var(--line-strong); }
.week-agenda__day:focus-visible { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 30%, transparent); }
.week-agenda__day:active { background: color-mix(in srgb, var(--soft) 60%, var(--surface-strong)); }
.week-agenda__day.is-today { border-color: color-mix(in srgb, var(--current-time) 55%, var(--line)); box-shadow: inset 3px 0 0 var(--current-time); }
.week-agenda__day.is-past:not(.is-today) { background: color-mix(in srgb, var(--surface) 70%, var(--paper)); }
.week-agenda__day.is-empty { min-height: 56px; align-items: center; border-style: dashed; background: transparent; }
.week-agenda__date { display: grid; justify-items: start; gap: 1px; padding-top: 1px; }
.week-agenda__date > span { color: var(--faint); font-size: .6rem; font-weight: 680; letter-spacing: .055em; text-transform: uppercase; }
.week-agenda__date strong { font-size: 1.2rem; font-weight: 700; line-height: 1.05; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.week-agenda__day.is-today .week-agenda__date strong { color: var(--current-time); }
.week-agenda__date em { margin-top: 3px; padding: 1px 6px; border-radius: 999px; background: color-mix(in srgb, var(--current-time) 13%, var(--surface-strong)); color: color-mix(in srgb, var(--current-time) 85%, var(--ink)); font-size: .56rem; font-style: normal; font-weight: 700; }
.week-agenda__date em.is-closed { background: var(--soft); color: var(--muted); }
.week-agenda__body { min-width: 0; display: grid; gap: 6px; }
.week-agenda__mit { min-width: 0; display: grid; grid-template-columns: 14px minmax(0, 1fr); align-items: start; gap: 8px; font-size: .84rem; font-weight: 650; line-height: 1.3; letter-spacing: -.012em; }
.week-agenda__mit .week-plan-check { width: 14px; height: 14px; margin-top: 2px; }
.week-agenda__mit.is-done > span:last-child { color: var(--muted); text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--muted) 55%, transparent); }
.week-agenda__mit.is-empty { grid-template-columns: minmax(0, 1fr); color: var(--faint); font-size: .76rem; font-weight: 560; }
.week-agenda__others { display: grid; gap: 4px; }
.week-agenda__others > span { min-width: 0; display: grid; grid-template-columns: 14px minmax(0, 1fr); align-items: center; gap: 8px; color: var(--muted); font-size: .74rem; line-height: 1.3; }
.week-agenda__others > span > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.week-agenda__others .week-plan-check { justify-self: center; width: 11px; height: 11px; border-radius: 3.5px; }
.week-agenda__others .week-plan-check svg { width: 8px; height: 8px; }
.week-agenda__others > .is-done > span { text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--muted) 50%, transparent); }
.week-agenda__meta { display: flex; flex-wrap: wrap; gap: 4px 12px; color: var(--faint); font-size: .66rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.week-agenda__meta span + span::before { content: ""; display: inline-block; width: 3px; height: 3px; margin: 0 9px 2px -6px; border-radius: 99px; background: currentColor; opacity: .7; }
.week-agenda__empty { color: var(--faint); font-size: .76rem; font-weight: 560; }
.week-agenda__chevron { align-self: center; width: 18px; height: 18px; fill: none; stroke: var(--faint-mark); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }


/* styles/stats.css */
/* Stats domain styles. */

.stats-summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: .55rem; margin-bottom: 1rem; }
.stat-card { padding: .72rem; border-radius: 10px; background: var(--surface-strong); box-shadow: inset 0 0 0 1px var(--line); }
.stat-card span { display: block; color: var(--faint); font-size: .6rem; text-transform: uppercase; letter-spacing: .06em; }
.stat-card strong { display: block; margin-top: .18rem; font-size: 1.08rem; letter-spacing: -.035em; }
.stats-list { display: grid; gap: .72rem; }
.stat-row__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: .35rem; }
.stat-row__name { display: inline-flex; align-items: center; gap: 6px; font-size: .73rem; font-weight: 620; }
.stat-row__value { color: var(--muted); font-size: .64rem; font-variant-numeric: tabular-nums; text-align: right; }
.stat-bar { height: 5px; border-radius: 999px; background: var(--soft); overflow: hidden; }
.stat-bar span { display: block; width: var(--pct); height: 100%; border-radius: inherit; background: var(--bar-color); opacity: .8; }
@media (max-width: 620px) {
  .stats-summary { grid-template-columns: 1fr; }
}
.stat-bar { position: relative; }
.stat-bar > span { position: absolute; inset: 0 auto 0 0; width: var(--pct); height: 100%; border-radius: inherit; background: var(--bar-color); }
.stat-bar__scheduled { opacity: .28; }
.stat-bar__elapsed { opacity: 1; }
.stats-summary { grid-template-columns: repeat(4, minmax(0,1fr)); }
.stat-card small { display: block; margin-top: .28rem; color: var(--faint); font-size: .56rem; line-height: 1.35; }
.stat-bar__scheduled { opacity: .28; }
@media (max-width: 980px) and (min-width: 621px) {
  .stats-summary { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 620px) {
  .stats-summary { grid-template-columns: 1fr; }
}
.stats-tabs {
  display: grid;
  /* One equal column per tab (Day, Week, Insights), always on one row; on a
     narrow phone a tab that needs more room (Insights and its badge) takes it. */
  grid-auto-flow: column;
  grid-auto-columns: minmax(min-content, 1fr);
  gap: 3px;
  margin: -.15rem 0 1rem;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--soft);
}
.stats-tabs button {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 0 8px;
  white-space: nowrap;
  min-height: 34px;
  border-radius: 7px;
  background: transparent;
  color: var(--muted);
  font-size: .7rem;
  font-weight: 630;
  cursor: pointer;
}
.stats-tabs button.is-active { background: var(--surface-strong); color: var(--ink); box-shadow: 0 1px 5px rgba(28,25,21,.07); }
@media (max-width: 360px) {
  .stats-tabs { gap: 2px; }
  .stats-tabs button { gap: 5px; padding: 0 7px; }
}
.stats-week-nav {
  display: grid;
  grid-template-columns: 34px minmax(0,1fr) 34px auto;
  align-items: center;
  gap: 4px;
  margin-bottom: .9rem;
}
.stats-week-nav > strong { text-align: center; font-size: .74rem; font-weight: 630; font-variant-numeric: tabular-nums; }
.stats-this-week { min-height: 30px; padding-inline: 10px; }
.week-chart-wrap { overflow-x: auto; padding: 4px 0 2px; }
.week-chart { width: 100%; min-width: 500px; height: auto; overflow: visible; }
.week-chart__guide line { stroke: var(--line); stroke-width: 1; vector-effect: non-scaling-stroke; }
.week-chart__guide text,
.week-chart__day { fill: var(--faint); font-size: 9px; font-family: inherit; }
.week-chart__day.is-today { fill: var(--ink); font-weight: 700; }
.week-chart__series polyline { fill: none; stroke: var(--series-color); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; opacity: .88; }
.week-chart__series circle { fill: var(--surface-strong); stroke: var(--series-color); stroke-width: 2; vector-effect: non-scaling-stroke; }
.week-legend { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 5px 12px; margin-top: 8px; }
.week-legend > div { min-width: 0; display: grid; grid-template-columns: 8px minmax(0,1fr) auto; align-items: center; gap: 7px; padding: 6px 2px; border-top: 1px solid color-mix(in srgb, var(--line) 72%, transparent); }
.week-legend span:nth-child(2) { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .68rem; }
.week-legend strong { color: var(--muted); font-size: .64rem; font-variant-numeric: tabular-nums; }
@media (max-width: 790px) {
  .week-legend { grid-template-columns: 1fr; }
  .stats-week-nav { grid-template-columns: 32px minmax(0,1fr) 32px; }
  .stats-week-nav .stats-this-week { grid-column: 1 / -1; justify-self: center; margin-top: 3px; }
}
.week-chart-wrap { position: relative; overflow: visible; }
.week-chart__series { transition: opacity 150ms ease; }
.week-chart__series polyline { transition: stroke-width 150ms ease, opacity 150ms ease; }
.week-chart__series circle { cursor: crosshair; transition: r 130ms ease, fill 130ms ease, opacity 150ms ease; }
.week-chart.is-inspecting .week-chart__series { opacity: .16; }
.week-chart.is-inspecting .week-chart__series.is-highlighted { opacity: 1; }
.week-chart__series.is-highlighted polyline { stroke-width: 3; opacity: 1; }
.week-chart__series.is-highlighted circle { opacity: 1; }
.week-chart__series circle.is-point-active { r: 5; fill: var(--series-color); }
.week-legend > div { border-radius: 7px; cursor: default; transition: background-color 130ms ease, opacity 130ms ease; }
.week-legend > div:hover { background: var(--soft); }
.week-legend.is-inspecting > div { opacity: .38; }
.week-legend.is-inspecting > div.is-highlighted { opacity: 1; }
.week-chart-tooltip {
  position: absolute;
  z-index: 5;
  min-width: 150px;
  max-width: 210px;
  padding: 8px 9px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--surface-strong);
  box-shadow: 0 12px 30px rgba(20,18,15,.12);
  pointer-events: none;
  transform: translate(8px, -50%);
}
.week-chart-tooltip strong { display: block; font-size: .7rem; }
.week-chart-tooltip span { display: block; margin-top: 2px; color: var(--muted); font-size: .62rem; line-height: 1.35; }
.week-legend > div { padding: 7px 6px; border-top: 0; }
.week-legend > div.is-selected { background: var(--soft); box-shadow: inset 0 0 0 1px var(--line); }
.week-chart.is-pinned .week-chart__series:not(.is-highlighted) circle { pointer-events: none; }
@media (max-width: 620px) {
  .stats-summary { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .week-chart-wrap { overflow: hidden; }
  .week-chart { width: 100%; min-width: 0; }
  .week-legend { grid-template-columns: 1fr 1fr; }
}
.week-chart-tooltip { transform: none; margin: 0; }
.week-legend > div { padding-inline: 7px; }
.week-chart-tooltip { position: fixed; z-index: 180; max-width: 210px; }
.week-chart-wrap { position:relative; }
.week-chart-tooltip { position:absolute; inset:auto; z-index:18; max-width:min(210px, calc(100% - 12px)); pointer-events:none; box-shadow:0 9px 24px rgba(31,27,22,.12); }
.week-chart__series circle { pointer-events:auto; }
.week-chart.is-pinned .week-chart__series:not(.is-highlighted) circle { pointer-events:none; }
.week-chart-tooltip { position: fixed; inset: auto; z-index: 260; pointer-events: none; max-width: min(210px, calc(100vw - 24px)); }
.week-legend { padding-inline: 4px; }
.week-chart-wrap { position: relative; overflow: hidden; }
.week-chart-tooltip { position: absolute; inset: auto; transform: none; z-index: 22; max-width: min(210px, calc(100% - 16px)); }
.stats-this-week {
  min-height: 30px;
  padding: 5px 8px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font-size: .7rem;
  font-weight: 560;
}
.stats-this-week:hover,
.stats-this-week:focus-visible { outline: 0; background: var(--soft); color: var(--ink); }
.week-chart-wrap { position: relative; overflow: hidden; }
.week-chart-tooltip {
  position: absolute;
  inset: auto;
  z-index: 24;
  min-width: 150px;
  max-width: 196px;
  margin: 0;
  transform: none;
  pointer-events: none;
  box-shadow: 0 10px 28px rgba(31,27,22,.14);
}
.week-chart-svg-tooltip rect {
  fill: var(--surface-strong);
  stroke: var(--line);
  stroke-width: 1;
  filter: drop-shadow(0 5px 10px rgba(31,27,22,.10));
}
.week-chart-svg-tooltip text { dominant-baseline: auto; }
.week-chart-svg-tooltip__title { fill: var(--ink); font-size: 10px; font-weight: 700; }
.week-chart-svg-tooltip__date { fill: var(--muted); font-size: 8.5px; font-weight: 560; }
.week-chart-svg-tooltip__meta { fill: var(--faint); font-size: 8px; }
.week-chart-tooltip { display: none; }
.week-chart-svg-tooltip { visibility: hidden; pointer-events: none; }
.week-chart-svg-tooltip rect { vector-effect: non-scaling-stroke; }



/* styles/pip.css */
/* Floating window (Document Picture-in-Picture).
   The floating window is its own document and cannot read the planner's
   stylesheets: its styles travel with it in src/features/pip-styles.js.
   The planner side has nothing to style beyond the header icon button, which
   uses the shared .icon-button rules. */


/* styles/settings.css */
/* Settings --------------------------------------------------------------- */
.settings-group + .settings-group {
  margin-top: 1.15rem;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
}

.settings-group__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: .72rem;
}
.settings-group__head h3 { margin: 0; font-size: .8rem; }
.settings-group__head p { margin: .26rem 0 0; color: var(--muted); font-size: .7rem; line-height: 1.5; }

/* Categories & projects (1.39.1): one list. A row is the colour, the whole name (edited in place) and two quiet
   actions that come forward with the row; the last row adds a category. Archived ones fold away below. */
.category-settings { min-width: 0; display: grid; gap: 4px; }
.category-list { min-width: 0; display: grid; gap: 1px; margin: 0; padding: 0; list-style: none; }

.category-setting {
  min-width: 0;
  min-height: 36px;
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) 28px 28px;
  align-items: center;
  gap: 3px;
  padding: 2px 3px;
  border-radius: 10px;
  transition: background-color 120ms ease;
}
.category-setting:hover,
.category-setting:focus-within { background: color-mix(in srgb, var(--soft) 60%, transparent); }

.category-setting .category-name {
  min-width: 0;
  min-height: 32px;
  padding: 5px 8px;
  border-color: transparent;
  border-radius: 8px;
  background: transparent;
  font-size: .8rem;
}
.category-setting:hover .category-name { border-color: var(--line); }
.category-setting .category-name:focus { border-color: var(--line-strong); background: var(--surface-strong); }

.category-setting .task-action { width: 28px; height: 28px; min-width: 28px; min-height: 28px; color: var(--faint-mark); }
.category-setting:hover .task-action,
.category-setting:focus-within .task-action { color: var(--muted); }
.category-setting .task-action:hover,
.category-setting .task-action:focus-visible { color: var(--ink); background: color-mix(in srgb, var(--ink) 8%, transparent); }
.category-setting .task-action:focus-visible { box-shadow: inset 0 0 0 1px var(--line-strong); }
/* A finger gets taller rows and larger actions. */
@media (pointer: coarse) {
  .category-setting { min-height: 44px; grid-template-columns: 34px minmax(0, 1fr) 34px 34px; }
  .category-setting .task-action { width: 34px; height: 34px; min-width: 34px; min-height: 34px; }
  .category-setting--add { grid-template-columns: 34px minmax(0, 1fr); }
}

.color-trigger {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  padding: 7px 9px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--surface-strong);
  color: var(--ink);
  font-size: .77rem;
  cursor: pointer;
  text-align: left;
  transition: border-color 130ms ease, box-shadow 130ms ease, background-color 130ms ease;
}
.color-trigger:hover,
.color-trigger:focus-visible {
  outline: 0;
  border-color: var(--line-strong);
  background: var(--surface-strong);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ink) 4%, transparent);
}
.color-trigger > span {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
  border-radius: 999px;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.08);
}
.color-trigger strong { color: var(--muted); font-size: .69rem; font-weight: 560; }
.color-trigger.is-auto > span { border: 1px dashed var(--line-strong); background: transparent; box-shadow: none; }
.color-trigger--compact.is-swatch-only {
  width: 36px;
  min-width: 36px;
  min-height: 36px;
  grid-column: 1;
  justify-content: center;
  padding: 0;
}
.color-trigger--compact.is-swatch-only strong { display: none; }
.category-setting .color-trigger--compact.is-swatch-only {
  width: 30px;
  min-width: 30px;
  height: 30px;
  min-height: 30px;
  border-color: transparent;
  border-radius: 999px;
  background: transparent;
}
.category-setting .color-trigger--compact.is-swatch-only > span { width: 16px; height: 16px; }
.category-setting .color-trigger--compact.is-swatch-only:hover,
.category-setting .color-trigger--compact.is-swatch-only:focus-visible { border-color: var(--line-strong); background: var(--surface-strong); }

/* The add row: a dashed ring where a colour would be, and an empty name. */
.category-add-mark { width: 30px; height: 30px; display: grid; place-items: center; color: var(--faint-mark); cursor: text; }
.category-add-mark svg { width: 16px; height: 16px; padding: 2px; border: 1px dashed currentColor; border-radius: 999px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.category-setting--add { grid-template-columns: 30px minmax(0, 1fr); }
.category-setting--add .category-name { font-weight: 560; }
.category-setting--add .category-name::placeholder { color: var(--muted); font-weight: 520; opacity: 1; }
.category-setting--add:focus-within .category-add-mark { color: var(--muted); }

/* Archived: a disclosure under the list, with Restore and Delete; the names are never cut. */
.archived-categories { min-width: 0; margin-top: 4px; padding-top: 6px; border-top: 1px solid var(--line); }
.archived-categories > summary {
  width: fit-content;
  min-height: 30px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 9px 4px 7px;
  border-radius: 8px;
  color: var(--muted);
  font-size: .7rem;
  font-weight: 650;
  cursor: pointer;
  list-style: none;
}
.archived-categories > summary::-webkit-details-marker { display: none; }
.archived-categories > summary svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform 160ms ease; }
.archived-categories[open] > summary svg { transform: rotate(90deg); }
.archived-categories > summary:hover,
.archived-categories > summary:focus-visible { outline: 0; color: var(--ink); background: var(--soft); }
.archived-categories__note { margin: 2px 9px 5px; color: var(--faint); font-size: .62rem; line-height: 1.45; }
.archived-category-swatch {
  width: 14px;
  height: 14px;
  place-self: center;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 11%, transparent);
}
.archived-category-name {
  min-width: 0;
  align-self: center;
  padding: 5px 9px;
  overflow-wrap: anywhere;
  color: var(--muted);
  font-size: .76rem;
  line-height: 1.35;
}

/* Three distinct color palettes. */
.color-popover--palettes {
  width: min(332px, calc(100vw - 24px));
  padding: 8px;
  overflow: visible;
}
.color-palettes { display: grid; gap: 9px; }
.color-palette-group { display: grid; gap: 5px; }
.color-palette-group__head span { color: var(--faint); font-size: .58rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.color-popover--palettes .color-popover__grid { display: grid; grid-template-columns: repeat(9, 1fr); gap: 5px; }
.color-option {
  width: 100%;
  aspect-ratio: 1;
  min-width: 0;
  border: 0;
  border-radius: 8px;
  background: var(--swatch);
  cursor: pointer;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.08);
  transition: transform 140ms cubic-bezier(.22,1,.36,1), box-shadow 140ms ease;
}
.color-option:hover,
.color-option:focus-visible { outline: 0; transform: translateY(-1px) scale(1.04); box-shadow: inset 0 0 0 1px rgba(0,0,0,.12), 0 4px 10px rgba(0,0,0,.08); }
.color-option.is-selected { box-shadow: inset 0 0 0 2px var(--surface-strong), 0 0 0 1px var(--ink); }
.color-auto-option { width: 100%; }
.color-popover__label { min-height: 20px; padding: 7px 2px 0; color: var(--muted); font-size: .65rem; text-align: center; }

/* Settings closes with the modal X; no redundant Done footer. */
.settings-actions { display: none; }

/* The sections (index.html) sit in three wrappers, read one after the other: Appearance and the time the planner
   shows, Categories & projects, then Your devices with Personal sync; Privacy comes last, on its own. One flow, as
   before, until the screen is wide: the line between two sections stays where a wrapper ends. */
.settings-column { display: contents; }
.settings-column + .settings-column > .settings-group:first-child,
.settings-column + .settings-group--privacy {
  margin-top: 1.15rem;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
}

/* Settings on a wide screen (1.39.1): the dialog takes the width it needs (up to 1200px, 1500px on a 1920px screen
   with the app fitted to it) and the height the screen has, and shows its content whole when it can. Below
   1000px, nothing changes. */
@media screen and (min-width: 1000px) {
  [data-settings-modal] .modal__panel { width: min(100%, clamp(640px, calc(640px + (100vw - 1000px) * 2), 1200px)); max-height: calc(100dvh - 2rem); display: flex; flex-direction: column; }
  [data-settings-modal] .modal__scroll { flex: 1 1 auto; min-height: 0; max-height: none; }
}

/* From a small laptop, the sections in columns. Each wrapper keeps its sections whatever they hold (a category
   added, sync connected), and each column is as tall as its own content: when one runs long, the whole dialog
   scrolls, never one column. Privacy closes the dialog in one row across the width. */
@media screen and (min-width: 1100px) {
  [data-settings-modal] .modal__scroll { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-content: start; align-items: start; column-gap: 36px; padding-inline: 1.4rem 1.3rem; }
  [data-settings-modal] .modal__header { grid-column: 1 / -1; margin-bottom: 1.05rem; }
  .settings-column { display: block; min-width: 0; }
  .settings-column + .settings-column > .settings-group:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
  /* Two columns: the time and the categories side by side, your devices across the width under them. */
  .settings-column--devices { grid-column: 1 / -1; margin-top: 1.15rem; padding-top: 1rem; border-top: 1px solid var(--line); }
  .settings-group--privacy { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(240px, 320px); align-items: center; column-gap: 28px; }
  .settings-group--privacy .settings-group__head { margin-bottom: 0; }
  .settings-group--privacy .device-action { min-height: 54px; padding-block: 7px; }
}

/* Three columns once each has room for its content (about 330px): the devices take the widest, for the two clouds
   side by side. */
@media screen and (min-width: 1220px) {
  [data-settings-modal] .modal__scroll { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.16fr); column-gap: 34px; }
  .settings-column--devices { grid-column: auto; margin-top: 0; padding-top: 0; border-top: 0; }
}

@media (max-width: 790px) {
  .actions > [data-settings-open] { display: none; }
}

@media (max-width: 680px) {
  .settings-group__head { flex-direction: column; gap: .5rem; }
  .color-popover--palettes .color-popover__grid { grid-template-columns: repeat(6, 1fr); }
}

@media (max-width: 480px) {
  .color-popover--palettes .color-popover__grid { grid-template-columns: repeat(5, 1fr); }
}

/* planning days, app install, onboarding -------------------------- */
.planning-days-picker {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px;
}
.planning-days-picker button {
  min-width: 0;
  min-height: 48px;
  display: grid;
  place-items: center;
  gap: 1px;
  padding: 6px 4px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}
.planning-days-picker button span { font-size: .78rem; font-weight: 680; }
.planning-days-picker button small { color: var(--faint); font-size: .58rem; }
.planning-days-picker button:hover,
.planning-days-picker button:focus-visible { outline: 0; background: var(--soft); color: var(--ink); }
.planning-days-picker button.is-selected { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.planning-days-picker button.is-selected small { color: color-mix(in srgb, var(--paper) 70%, transparent); }

@media (max-width: 620px) {
  .planning-days-picker { gap: 4px; }
  .planning-days-picker button { min-height: 44px; }
  .planning-days-picker button small { display: none; }
}


/* Displayed hours reuse the Add/Edit time control; Settings owns only the two-column layout. */
.hours-setting {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  align-items: end;
}
.hours-setting .form-field { min-width: 0; }
.settings-time-combo { width: 100%; min-width: 0; }
.settings-time-combo .time-input {
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
  text-align: center;
  padding-inline: 10px 3px;
}
.settings-time-combo .time-menu-button {
  flex: 0 0 38px;
  width: 38px;
  min-width: 38px;
  justify-content: center;
  padding: 0;
}
@media (max-width: 520px) {
  .hours-setting { gap: 8px; }
}

.planning-week-start {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(126px, 170px);
  align-items: center;
  gap: 12px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}
.planning-week-start > div { min-width: 0; display: grid; gap: 2px; }
.planning-week-start > div > span { color: var(--muted); font-size: .7rem; font-weight: 650; }
.planning-week-start > div > small { color: var(--faint); font-size: .61rem; line-height: 1.4; }

@media (max-width: 520px) {
  .planning-week-start { grid-template-columns: 1fr; }
  .planning-week-start .select-trigger { width: 100%; }
}

/* Personal sync: its card, choice and states are in styles/sync.css. */

/* Manage categories: the Settings list, stacked over the block editor. */
.modal--categories .modal__panel:focus { outline: none; }
.modal--categories .modal__actions { margin-top: 1rem; }


/* styles/sync.css */
/* Personal sync (1.38): Settings → Personal sync, the choice of cloud, the card in each state, the passphrase forms
   and the seal line (src/features/personal-sync.js, personal-sync-view.js), and the header alert with its popover
   (src/features/sync-status.js). Green says saved, ochre says something waits on the person. */

:root {
  --sync-ok: #4a7553;
  --sync-wait: #9a6a1f;
  --sync-wait-ink: #6c4810;
}

@media screen and (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --sync-ok: #8fbf98;
    --sync-wait: #d9a85a;
    --sync-wait-ink: #ecc78b;
  }
}

@media screen {
  :root[data-theme="dark"] {
    --sync-ok: #8fbf98;
    --sync-wait: #d9a85a;
    --sync-wait-ink: #ecc78b;
  }
}

/* The cloud's mark, with a dot: green when saved, ochre when something waits. */
.personal-sync-mark {
  position: relative;
  flex: none;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--surface-strong);
}
.personal-sync-mark img { width: 18px; height: 18px; display: block; }
.personal-sync-mark--lg { width: 38px; height: 38px; border-radius: 11px; }
.personal-sync-mark--lg img { width: 22px; height: 22px; }
.personal-sync-dot {
  position: absolute;
  right: -3px;
  bottom: -3px;
  width: 11px;
  height: 11px;
  box-sizing: border-box;
  border: 2px solid var(--surface-strong);
  border-radius: 50%;
  background: var(--sync-ok);
}
.personal-sync-dot[data-tone="wait"] { background: var(--sync-wait); }

/* The choice: one radio card per cloud, Dropbox first; the footer's button connects the one chosen. */
.personal-sync-choose { display: grid; gap: 11px; }
.personal-sync-choice { min-width: 0; margin: 0; padding: 0; border: 0; }
.personal-sync-choice__legend { margin: 2px 0 8px; padding: 0; color: var(--muted); font-size: .64rem; font-weight: 650; letter-spacing: .02em; }
.personal-sync-choice__options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.personal-sync-option {
  position: relative;
  min-width: 0;
  display: grid;
  align-content: start;
  gap: 9px;
  padding: 13px 13px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface-strong);
  cursor: pointer;
  transition: border-color 140ms ease, box-shadow 140ms ease;
}
.personal-sync-option input { position: absolute; top: 0; left: 0; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; }
.personal-sync-option:hover { border-color: var(--line-strong); }
.personal-sync-option:has(input:checked) { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.personal-sync-option:has(input:focus-visible) { outline: 2px solid color-mix(in srgb, var(--accent) 70%, transparent); outline-offset: 2px; }
.personal-sync-option:has(input:disabled) { cursor: default; opacity: .6; }
.personal-sync-option__top { display: grid; grid-template-columns: 30px minmax(0, 1fr) 18px; align-items: center; gap: 9px; }
.personal-sync-option__top strong { font-size: .8rem; }
.personal-sync-option__radio {
  width: 18px;
  height: 18px;
  box-sizing: border-box;
  display: grid;
  place-items: center;
  border: 1.5px solid var(--line-strong);
  border-radius: 50%;
}
.personal-sync-option:has(input:checked) .personal-sync-option__radio { border-color: var(--ink); }
.personal-sync-option:has(input:checked) .personal-sync-option__radio::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--ink); }
.personal-sync-option__more { display: grid; gap: 9px; }
.personal-sync-tag {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 8px 3px 7px;
  border-radius: 999px;
  font-size: .62rem;
  font-weight: 650;
  line-height: 1.3;
}
.personal-sync-tag--auto { color: var(--sync-ok); background: color-mix(in srgb, var(--sync-ok) 11%, var(--surface-strong)); }
.personal-sync-tag--tap { color: var(--sync-wait-ink); background: color-mix(in srgb, var(--sync-wait) 13%, var(--surface-strong)); }
.personal-sync-points { display: grid; gap: 6px; }
.personal-sync-points > span { display: grid; grid-template-columns: 15px minmax(0, 1fr); align-items: start; gap: 7px; color: var(--muted); font-size: .66rem; line-height: 1.42; }
.personal-sync-tag svg,
.personal-sync-points svg,
.personal-sync-row svg,
.personal-sync-seal__icon svg,
.personal-sync-card__actions svg,
.sync-popover__actions svg,
.sync-alert__icon svg { fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; }
.personal-sync-tag svg { width: 13px; height: 13px; stroke-width: 2; }
.personal-sync-points svg { width: 15px; height: 15px; margin-top: 1px; stroke: var(--faint-mark); stroke-width: 1.8; }
.personal-sync-choice__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.personal-sync-choice__foot p { margin: 0; color: var(--faint); font-size: .63rem; line-height: 1.45; }
.personal-sync-choice__foot p.is-note { color: var(--ink); font-weight: 600; }
.personal-sync-choice__foot .primary-button { min-height: 38px; white-space: nowrap; }

/* The card: the cloud, what is saved, the one main action; ochre while something waits on the person. */
.personal-sync-card {
  display: grid;
  gap: 11px;
  padding: 13px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface-strong);
}
.personal-sync-card[data-tone="wait"] {
  border-color: color-mix(in srgb, var(--sync-wait) 42%, var(--line));
  background: color-mix(in srgb, var(--sync-wait) 6%, var(--surface-strong));
}
.personal-sync-card__row { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; align-items: center; gap: 12px; }
/* A longer title: the actions under it, on the right. */
.personal-sync-card[data-layout="stacked"] .personal-sync-card__row { grid-template-columns: 38px minmax(0, 1fr); }
.personal-sync-card[data-layout="stacked"] .personal-sync-card__actions { grid-column: 1 / -1; }
.personal-sync-card__text { min-width: 0; display: grid; gap: 2px; }
.personal-sync-card__text strong { font-size: .78rem; line-height: 1.3; }
.personal-sync-card[data-tone="wait"] .personal-sync-card__text strong { color: var(--sync-wait-ink); }
.personal-sync-card__text span { color: var(--muted); font-size: .66rem; line-height: 1.45; }
.personal-sync-card__actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 10px; }
.personal-sync-card__actions .primary-button,
.personal-sync-card__actions .secondary-button { min-height: 38px; gap: 7px; white-space: nowrap; }
.personal-sync-card__actions svg,
.sync-popover__actions svg { width: 15px; height: 15px; stroke-width: 2; }
.personal-sync-disconnect {
  order: -1;
  min-height: 30px;
  padding: 4px 6px;
  font-size: .66rem;
  color: var(--faint);
}
.personal-sync-disconnect:hover,
.personal-sync-disconnect:focus-visible { color: var(--ink); }

/* The rows under the card's head: Google's access and its meter, Dropbox's folder, Google's trade-off. */
.personal-sync-row {
  display: grid;
  grid-template-columns: 15px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  margin: 0;
  padding-top: 10px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: .64rem;
  line-height: 1.45;
}
.personal-sync-row[data-personal-sync-access] { grid-template-columns: 15px minmax(0, 1fr) 64px; }
.personal-sync-row svg { width: 15px; height: 15px; stroke: var(--faint-mark); stroke-width: 1.8; }
.personal-sync-row strong { color: var(--ink); font-weight: 650; font-variant-numeric: tabular-nums; }
.personal-sync-meter { height: 4px; overflow: hidden; border-radius: 999px; background: var(--soft); }
.personal-sync-meter i { display: block; width: calc(var(--share, 0) * 100%); height: 100%; border-radius: inherit; background: var(--sync-ok); }

.personal-sync-conflicts { display: grid; gap: 8px; margin: 0; padding: 10px 0 0; border: 0; border-top: 1px solid var(--line); background: transparent; }
.personal-sync-conflicts > span { color: var(--muted); font-size: .66rem; font-weight: 650; line-height: 1.45; }
.personal-sync-conflicts__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.personal-sync-conflicts__actions .secondary-button,
.personal-sync-conflicts__actions .primary-button { min-height: 40px; }

/* Google's access ended with changes waiting: Dropbox offered, under a dashed rule, with an inline confirmation. */
.personal-sync-switch {
  display: grid;
  gap: 10px;
  padding-top: 10px;
  border-top: 1px dashed color-mix(in srgb, var(--sync-wait) 30%, var(--line));
  color: var(--muted);
  font-size: .63rem;
  line-height: 1.5;
}
.personal-sync-switch p { margin: 0; }
.personal-sync-link {
  padding: 0;
  border: 0;
  border-radius: 3px;
  background: none;
  color: var(--ink);
  font-weight: 650;
  text-decoration: underline;
  text-decoration-color: var(--line-strong);
  text-underline-offset: 2px;
  cursor: pointer;
}
.personal-sync-link:hover { text-decoration-color: currentColor; }
.personal-sync-switch__confirm { display: grid; gap: 8px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-strong); }
.personal-sync-switch__confirm p { color: var(--ink); }
.personal-sync-switch__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 8px; }

/* The planner moved to Dropbox from another device: a calm note under a plain rule, with one Switch. */
.personal-sync-moved {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: .64rem;
  line-height: 1.5;
}
.personal-sync-moved p { margin: 0; }
.personal-sync-moved strong { color: var(--ink); font-weight: 650; }
.personal-sync-moved__mark { display: grid; place-items: center; width: 22px; height: 22px; }
.personal-sync-moved .secondary-button { min-height: 38px; white-space: nowrap; }

/* Help → Data on this device: the clouds this planner offers, under the first lines. */
.help-content p[data-storage-sync-line] { margin-top: .35rem; }

/* Dropbox, where this browser keeps no site data: one line in its place. */
.personal-sync-blocked { margin: 9px 2px 0; color: var(--muted); font-size: .63rem; line-height: 1.45; }

/* The passphrase panel takes the card's full width, under its head. */
.personal-sync-panel { min-width: 0; margin: 0; padding-top: 12px; border-top: 1px solid var(--line); }

.personal-sync-form { display: grid; gap: 10px; max-width: 34rem; }
.personal-sync-form__lead { margin: 0; color: var(--muted); font-size: .68rem; line-height: 1.5; }
/* Show / Hide sits on the label's line, so both fields keep the full width. */
.personal-sync-form__row { position: relative; display: grid; }
.personal-sync-reveal { position: absolute; top: -7px; right: 0; min-height: 28px; padding: 4px 8px; font-size: .66rem; }
.personal-sync-field input[aria-invalid="true"] { border-color: color-mix(in srgb, var(--danger) 60%, var(--line)); }

.personal-sync-strength { min-height: 18px; display: flex; align-items: center; gap: 9px; margin-top: -4px; }
.personal-sync-strength__bar { flex: 0 0 auto; display: grid; grid-template-columns: repeat(4, 18px); gap: 3px; }
.personal-sync-strength__bar i { height: 4px; border-radius: 999px; background: var(--line); transition: background-color 160ms ease; }
.personal-sync-strength[data-score="1"] .personal-sync-strength__bar i:nth-child(-n + 1) { background: var(--danger); }
.personal-sync-strength[data-score="2"] .personal-sync-strength__bar i:nth-child(-n + 2) { background: var(--accent); }
.personal-sync-strength[data-score="3"] .personal-sync-strength__bar i:nth-child(-n + 3),
.personal-sync-strength[data-score="4"] .personal-sync-strength__bar i { background: var(--sync-ok); }
.personal-sync-strength small { color: var(--muted); font-size: .62rem; line-height: 1.4; }
.personal-sync-strength small strong { color: var(--ink); font-weight: 650; }

.personal-sync-note {
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr);
  gap: 8px;
  margin: 0;
  padding: 9px 10px;
  border-radius: 9px;
  background: var(--soft);
  color: var(--muted);
  font-size: .63rem;
  line-height: 1.5;
}
.personal-sync-note svg,
.personal-sync-offer__icon svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.personal-sync-note svg { margin-top: 1px; }
.personal-sync-error { margin: 0; color: var(--danger); font-size: .67rem; font-weight: 600; line-height: 1.45; }
.personal-sync-form__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 8px; }
.personal-sync-form__actions .primary-button,
.personal-sync-form__actions .secondary-button { min-height: 38px; }

.personal-sync-offer { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 10px 12px; align-items: start; }
.personal-sync-offer strong { font-size: .74rem; }
.personal-sync-offer p { margin: 3px 0 0; color: var(--muted); font-size: .66rem; line-height: 1.5; }
.personal-sync-offer .personal-sync-form__actions { grid-column: 2; justify-content: flex-start; }
.personal-sync-offer__icon {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  background: color-mix(in srgb, var(--accent) 10%, var(--surface-strong));
  color: var(--accent);
}

/* Under the card: the seal (Change passphrase), or a plain copy not sealed yet (Seal it); then the recovery line. */
.personal-sync-seal {
  display: grid;
  grid-template-columns: 15px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  margin: 9px 2px 0;
  color: var(--muted);
  font-size: .63rem;
  line-height: 1.45;
}
.personal-sync-seal__icon { display: grid; color: var(--faint-mark); }
.personal-sync-seal__icon--open { color: var(--accent); }
.personal-sync-seal__icon svg { width: 15px; height: 15px; stroke-width: 1.8; }
.personal-sync-seal strong { color: var(--ink); font-weight: 650; }
.personal-sync-seal .text-button { min-height: 28px; padding: 4px 7px; font-size: .63rem; white-space: nowrap; }
.personal-sync-recovery { margin: 9px 2px 0; color: var(--faint); font-size: .62rem; line-height: 1.45; }

/* The sync guide's replica: each cloud's mark beside its Connect button. */
.sg-marks { display: inline-flex; align-items: center; gap: 2px; }

/* Header alert --------------------------------------------------------------- */

.sync-alert {
  position: relative;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 34px;
  margin-right: 6px;
  padding: 0 12px 0 10px;
  border: 1px solid color-mix(in srgb, var(--sync-wait) 40%, var(--line));
  border-radius: 999px;
  background: color-mix(in srgb, var(--sync-wait) 8%, var(--surface-strong));
  color: var(--sync-wait-ink);
  font-size: .68rem;
  font-weight: 650;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease;
}
.sync-alert:hover,
.sync-alert[aria-expanded="true"] { background: color-mix(in srgb, var(--sync-wait) 14%, var(--surface-strong)); }
.sync-alert[data-mode="saving"],
.sync-alert[data-mode="saved"] { cursor: default; }
.sync-alert__icon { position: relative; display: grid; place-items: center; }
.sync-alert__icon svg { width: 18px; height: 18px; stroke-width: 1.8; }
.sync-alert__done { display: none; }
.sync-alert__dot {
  position: absolute;
  top: -1px;
  right: -3px;
  width: 9px;
  height: 9px;
  box-sizing: border-box;
  border: 2px solid color-mix(in srgb, var(--sync-wait) 8%, var(--surface-strong));
  border-radius: 50%;
  background: var(--sync-wait);
}
.sync-alert[data-mode="saving"] .sync-alert__dot { display: none; }
/* After a reconnect that saved everything: “Saved”, with a check, for a moment. */
.sync-alert[data-mode="saved"] {
  border-color: color-mix(in srgb, var(--sync-ok) 40%, var(--line));
  background: color-mix(in srgb, var(--sync-ok) 9%, var(--surface-strong));
  color: var(--sync-ok);
}
.sync-alert[data-mode="saved"] .sync-alert__wait,
.sync-alert[data-mode="saved"] .sync-alert__dot { display: none; }
.sync-alert[data-mode="saved"] .sync-alert__done { display: block; }

/* Where the header hides its secondary buttons: the icon alone, 40px, named by the full sentence. */
@media (max-width: 1080px) {
  .sync-alert { width: 40px; height: 40px; margin-right: 0; padding: 0; justify-content: center; }
  .sync-alert__text { display: none; }
  .sync-alert__icon svg { width: 21px; height: 21px; }
}

/* Its popover, below it, the arrow pointing at it (src/features/sync-status.js places both). */
.sync-popover {
  display: grid;
  gap: 11px;
  max-height: none;
  overflow: visible;
  padding: 14px;
  border-radius: 14px;
  box-shadow: var(--shadow);
}
.sync-popover::before {
  content: "";
  position: absolute;
  top: -6px;
  left: calc(var(--arrow-x, 40px) - 5px);
  width: 10px;
  height: 10px;
  box-sizing: border-box;
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
  background: var(--surface-strong);
  transform: rotate(45deg);
}
.sync-popover__head { display: grid; grid-template-columns: 38px minmax(0, 1fr); align-items: center; gap: 11px; }
.sync-popover__head strong { display: block; color: var(--sync-wait-ink); font-size: .78rem; line-height: 1.3; }
.sync-popover__head div > span { display: block; margin-top: 2px; color: var(--muted); font-size: .66rem; line-height: 1.45; }
.sync-popover p { margin: 0; color: var(--muted); font-size: .65rem; line-height: 1.5; }
.sync-popover__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.sync-popover__actions .primary-button,
.sync-popover__actions .text-button { min-height: 38px; gap: 7px; }

@media (prefers-reduced-motion: reduce) {
  .sync-alert,
  .personal-sync-option { transition: none; }
}

/* Phones: the main button full width in every state (the forms' submit too), Disconnect, Cancel or Back under
   it, centred and quiet; the choice cards stacked; the popover across the screen, its buttons stacked. */
@media (max-width: 560px) {
  .personal-sync-choice__options { grid-template-columns: minmax(0, 1fr); }
  .personal-sync-choice__foot { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .personal-sync-choice__foot .primary-button { width: 100%; min-height: 46px; }
  .personal-sync-card__row { grid-template-columns: 38px minmax(0, 1fr); }
  .personal-sync-card__actions { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .personal-sync-card__actions [data-personal-sync-primary] { order: -1; width: 100%; min-height: 46px; }
  .personal-sync-disconnect { order: 1; justify-self: center; min-height: 36px; padding: 0 14px; }
  .personal-sync-row[data-personal-sync-access] { grid-template-columns: 15px minmax(0, 1fr) 52px; }
  .personal-sync-conflicts__actions { display: grid; grid-template-columns: 1fr 1fr; }
  .personal-sync-switch__actions,
  .personal-sync-form__actions { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .personal-sync-switch__actions .secondary-button,
  .personal-sync-form__actions .primary-button,
  .personal-sync-form__actions .secondary-button { order: -1; width: 100%; min-height: 46px; }
  .personal-sync-switch__actions .text-button,
  .personal-sync-form__actions .text-button { justify-self: center; min-height: 36px; padding: 0 14px; }
  .personal-sync-moved { grid-template-columns: 22px minmax(0, 1fr); }
  .personal-sync-moved .secondary-button { grid-column: 1 / -1; width: 100%; min-height: 46px; }
  .personal-sync-offer { grid-template-columns: 1fr; }
  .personal-sync-offer__icon { display: none; }
  .personal-sync-offer .personal-sync-form__actions { grid-column: 1; }
  .personal-sync-seal { grid-template-columns: 15px minmax(0, 1fr); }
  .personal-sync-seal .text-button { grid-column: 2; justify-self: start; margin-left: -7px; }
  .sync-popover__actions { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .sync-popover__actions .primary-button { order: -1; width: 100%; min-height: 46px; }
}


/* styles/horizon.css */
/* Horizon ------------------------------------------------------------------
   The strategic layer: a section rail (Overview, Misogi, Mini-adventures,
   Commitments, Winning habits, Year map), one active panel, and an "Add"
   chooser. Each Horizon element kind owns a colour so the ribbon, the year map,
   the tiles and the add menu speak the same visual language. */

:root {
  --hz-misogi: #a5522e;
  --hz-milestone: #b97a46;
  --hz-adventure: #2f6d70;
  --hz-keydate: #5d4f8f;
  --hz-habit: #496b4a;
  --hz-commitment: var(--accent);
  --hz-rail-width: 232px;
}

.hz-kind--misogi { --kind: var(--hz-misogi); }
.hz-kind--milestone { --kind: var(--hz-milestone); }
.hz-kind--adventure { --kind: var(--hz-adventure); }
.hz-kind--keydate { --kind: var(--hz-keydate); }
.hz-kind--commitment { --kind: var(--hz-commitment); }
.hz-kind--habit { --kind: var(--hz-habit); }

/* Shell ------------------------------------------------------------------- */

.modal--horizon .modal__panel.hz-shell {
  width: min(1180px, 100%);
  height: min(880px, calc(100dvh - 2rem));
  max-height: none;
  display: grid;
  grid-template-columns: var(--hz-rail-width) minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr);
  grid-template-areas: "head head" "tabs main";
  border-radius: 18px;
}

@media (min-width: 791px) {
  body.app-expanded .modal--horizon .modal__panel.hz-shell { height: min(880px, calc(var(--modal-expanded-max-height, 100dvh) - 1.5rem)); max-height: none; }
}

.hz-shell svg { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

.hz-shell .modal__close { top: 15px; right: 16px; }

/* Header ------------------------------------------------------------------ */

.hz-head {
  grid-area: head;
  min-width: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 24px;
  padding: 13px 68px 13px 20px;
  border-bottom: 1px solid var(--line);
}

.hz-head > h2 { margin: 0; font-size: 1.1rem; }

.hz-head__identity { min-width: 0; display: flex; align-items: center; gap: 14px; }

.hz-head__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--muted);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.hz-head__eyebrow svg { width: 17px; height: 17px; }

.hz-head__year { display: flex; align-items: center; gap: 2px; }

.hz-head__year h2 {
  min-width: 3.1ch;
  margin: 0 2px;
  font-size: 1.5rem;
  font-weight: 720;
  letter-spacing: -.04em;
  line-height: 1;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.hz-year-step { width: 30px; height: 30px; }

.hz-year-step:disabled { opacity: .3; cursor: default; }

.hz-head__progress { width: 100%; max-width: 360px; min-width: 0; display: grid; gap: 6px; justify-self: center; }

.hz-head__progress small { color: var(--faint); font-size: .72rem; font-variant-numeric: tabular-nums; }

.hz-meter {
  display: block;
  height: 6px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--soft);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--line) 55%, transparent);
}

.hz-meter > span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, color-mix(in srgb, var(--kind, var(--accent)) 55%, transparent), var(--kind, var(--accent)));
}

.hz-add-button {
  height: 36px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 15px 0 11px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--paper);
  font-size: .8rem;
  font-weight: 650;
  cursor: pointer;
  transition: background-color 140ms ease, transform 160ms cubic-bezier(.22,1,.36,1), box-shadow 160ms ease;
}

.hz-add-button:hover,
.hz-add-button[aria-expanded="true"] { background: color-mix(in srgb, var(--ink) 84%, var(--paper)); box-shadow: 0 6px 18px rgba(25, 22, 17, .14); }

.hz-add-button:active { transform: scale(.97); }

.hz-add-button svg { width: 17px; height: 17px; stroke-width: 2; }

.hz-head__actions { display: flex; align-items: center; gap: 6px; }

.hz-print-button { width: 36px; height: 36px; border-color: var(--line); }

.hz-print-button svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

/* Section rail ------------------------------------------------------------ */

.hz-tabs {
  grid-area: tabs;
  min-height: 0;
  overflow-y: auto;
  padding: 14px 10px;
  border-right: 1px solid var(--line);
  background: color-mix(in srgb, var(--paper) 55%, var(--surface));
}

.hz-tabs__list { position: relative; display: grid; gap: 3px; }

.hz-tabs__indicator {
  position: absolute;
  z-index: 0;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
  border-radius: 12px;
  background: var(--surface-strong);
  box-shadow: 0 1px 2px rgba(25, 22, 17, .05), 0 8px 22px rgba(25, 22, 17, .06), inset 0 0 0 1px var(--line);
  opacity: 0;
  pointer-events: none;
}

.hz-tabs__indicator[data-ready="true"] { opacity: 1; }

.hz-tabs__hint { margin: 14px 10px 0; color: var(--faint); font-size: .7rem; line-height: 1.5; }

.hz-tabs__hint kbd { display: inline-grid; min-width: 18px; height: 18px; place-items: center; padding: 0 4px; border: 1px solid var(--line); border-radius: 5px; background: var(--surface-strong); color: var(--muted); font: inherit; font-size: .64rem; font-weight: 700; }

.hz-tab {
  --tab-color: var(--accent);
  --ring: var(--tab-color);
  position: relative;
  z-index: 1;
  width: 100%;
  min-height: 56px;
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 12px;
  background: transparent;
  color: var(--muted);
  text-align: left;
  cursor: pointer;
  transition: color 140ms ease, background-color 140ms ease;
}

.hz-tab[data-horizon-section="misogi"] { --tab-color: var(--hz-misogi); }
.hz-tab[data-horizon-section="adventures"] { --tab-color: var(--hz-adventure); }
.hz-tab[data-horizon-section="commitments"] { --tab-color: var(--hz-commitment); }
.hz-tab[data-horizon-section="habits"] { --tab-color: var(--hz-habit); }
.hz-tab[data-horizon-section="yearmap"] { --tab-color: var(--hz-keydate); }

.hz-tab:hover { color: var(--ink); background: color-mix(in srgb, var(--soft) 75%, transparent); }

.hz-tab.is-active,
.hz-tab.is-active:hover { color: var(--ink); background: transparent; }

.hz-tabs__indicator:not([data-ready="true"]) + .hz-tab.is-active,
.hz-tabs__indicator:not([data-ready="true"]) ~ .hz-tab.is-active { background: var(--surface-strong); box-shadow: inset 0 0 0 1px var(--line); }

.hz-tab__icon {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  background: color-mix(in srgb, var(--soft) 85%, transparent);
  color: var(--muted);
  transition: background-color 160ms ease, color 160ms ease;
}

.hz-tab__icon svg { width: 18px; height: 18px; }

.hz-tab.is-active .hz-tab__icon { background: color-mix(in srgb, var(--tab-color) 13%, var(--surface-strong)); color: var(--tab-color); }

.hz-tab__text { min-width: 0; display: grid; gap: 2px; }

.hz-tab__text strong,
.hz-tab__text small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.hz-tab__text strong { font-size: .84rem; font-weight: 650; letter-spacing: -.01em; }

.hz-tab__text small { color: var(--faint); font-size: .7rem; font-variant-numeric: tabular-nums; }

.hz-tab.is-active .hz-tab__text small { color: var(--muted); }

.hz-tab__ring { display: grid; place-items: center; }

.hz-ring { width: 18px; height: 18px; flex: 0 0 auto; }

.hz-ring__track { fill: none; stroke: color-mix(in srgb, var(--line) 85%, transparent); stroke-width: 2.5; }

.hz-ring__value { fill: none; stroke: var(--ring, var(--accent)); stroke-width: 2.5; stroke-linecap: round; transition: stroke-dashoffset 420ms cubic-bezier(.22,1,.36,1); }

/* Scroll area and shared section language --------------------------------- */

.hz-scroll.modal__scroll {
  grid-area: main;
  min-height: 0;
  max-height: none;
  height: 100%;
  margin: 0;
  padding: 24px 28px 40px;
}

.hz-content { max-width: 940px; margin: 0 auto; }

.hz-panel { display: grid; gap: 16px; }

.hz-panel--misogi { --kind: var(--hz-misogi); }
.hz-panel--adventures { --kind: var(--hz-adventure); }
.hz-panel--commitments { --kind: var(--hz-commitment); }
.hz-panel--habits { --kind: var(--hz-habit); }
.hz-panel--yearmap { --kind: var(--hz-keydate); }

.hz-eyebrow {
  display: block;
  color: var(--kind, var(--faint));
  font-size: .68rem;
  font-weight: 720;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.hz-panel--overview .hz-eyebrow { color: var(--faint); }

.hz-section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 4px; }

.hz-section-head h3 { margin: 6px 0 0; font-size: 1.42rem; font-weight: 720; letter-spacing: -.032em; line-height: 1.15; text-wrap: balance; }

.hz-section-head p { max-width: 62ch; margin: 8px 0 0; color: var(--muted); font-size: .84rem; line-height: 1.55; }

.hz-section-stat { flex: 0 0 auto; display: grid; justify-items: end; gap: 3px; text-align: right; }

.hz-section-stat strong { color: var(--ink); font-size: 1.7rem; font-weight: 720; letter-spacing: -.04em; line-height: 1; font-variant-numeric: tabular-nums; }

.hz-section-stat strong small { color: var(--faint); font-size: .95rem; font-weight: 600; }

.hz-section-stat span { color: var(--muted); font-size: .74rem; }

.hz-section-action { flex: 0 0 auto; height: 36px; display: inline-flex; align-items: center; gap: 6px; padding: 0 14px 0 10px; border-radius: 999px; font-size: .78rem; font-weight: 640; cursor: pointer; }

.hz-section-action svg { width: 16px; height: 16px; stroke-width: 1.9; }

.hz-section-actions { flex: 0 0 auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; }

.hz-section-action--quiet { border-color: transparent; background: transparent; }

.hz-section-action--quiet:hover,
.hz-section-action--quiet:focus-visible { border-color: var(--line); background: var(--surface-strong); }

.hz-card {
  position: relative;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface-strong);
  box-shadow: 0 1px 2px rgba(25, 22, 17, .03);
}

.hz-card__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }

.hz-card__head h3 { margin: 6px 0 0; font-size: 1rem; font-weight: 660; letter-spacing: -.015em; line-height: 1.3; }

.hz-card__head h4 { margin: 5px 0 0; color: var(--muted); font-size: .86rem; font-weight: 560; }

.hz-dot { width: 8px; height: 8px; flex: 0 0 auto; display: inline-block; border-radius: 999px; background: var(--kind, var(--accent)); }

.hz-kind--milestone .hz-dot { border-radius: 1.5px; transform: rotate(45deg) scale(.86); }

.hz-empty {
  display: grid;
  justify-items: start;
  gap: 10px;
  padding: 14px 16px;
  border: 1px dashed var(--line-strong);
  border-radius: 12px;
  color: var(--muted);
  font-size: .82rem;
  line-height: 1.5;
}

.hz-empty p { margin: 0; }

.hz-inline-cta,
.hz-add-row {
  height: 34px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0 13px 0 10px;
  border-radius: 999px;
  background: var(--soft);
  color: var(--ink);
  font-size: .79rem;
  font-weight: 630;
  cursor: pointer;
  transition: background-color 140ms ease, color 140ms ease;
}

.hz-inline-cta svg,
.hz-add-row svg { width: 16px; height: 16px; stroke-width: 1.9; }

.hz-inline-cta:hover { background: color-mix(in srgb, var(--ink) 9%, var(--soft)); }

.hz-add-row { justify-self: start; background: transparent; color: var(--muted); }

.hz-add-row:hover { background: var(--soft); color: var(--ink); }

.hz-add-row small { color: var(--faint); font-size: .74rem; font-weight: 500; }

.hz-date-chip {
  max-width: 100%;
  height: 32px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0 12px 0 9px;
  border: 1px dashed var(--line-strong);
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font-size: .76rem;
  font-weight: 610;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease;
}

.hz-date-chip span { overflow: hidden; text-overflow: ellipsis; }

.hz-date-chip svg { width: 15px; height: 15px; flex: 0 0 auto; }

.hz-date-chip.has-value {
  border-style: solid;
  border-color: color-mix(in srgb, var(--kind, var(--accent)) 28%, var(--line));
  background: color-mix(in srgb, var(--kind, var(--accent)) 7%, var(--surface-strong));
  color: var(--ink);
}

.hz-date-chip:hover,
.hz-date-chip[aria-expanded="true"] { border-color: color-mix(in srgb, var(--kind, var(--accent)) 45%, var(--line-strong)); color: var(--ink); background: color-mix(in srgb, var(--kind, var(--accent)) 10%, var(--surface-strong)); }

.hz-badge {
  height: 26px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 0 10px;
  border-radius: 999px;
  background: var(--soft);
  color: var(--muted);
  font-size: .72rem;
  font-weight: 640;
  font-variant-numeric: tabular-nums;
}

.hz-badge.is-done { background: color-mix(in srgb, var(--hz-habit) 14%, var(--surface-strong)); color: var(--hz-habit); }

.hz-badge svg { width: 13px; height: 13px; stroke-width: 2.4; }

.hz-row-remove { opacity: 0; transition: opacity 120ms ease, background-color 120ms ease, color 120ms ease; }

.hz-milestone:hover .hz-row-remove,
.hz-adventure:hover .hz-row-remove,
.hz-row-remove:focus-visible,
.hz-milestone:focus-within .hz-row-remove,
.hz-adventure:focus-within .hz-row-remove { opacity: 1; }

@media (hover: none) {
  .hz-row-remove { opacity: .7; }
}

.hz-now {
  height: 20px;
  display: inline-grid;
  place-items: center;
  padding: 0 7px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--paper);
  font-size: .6rem;
  font-weight: 750;
  letter-spacing: .07em;
  text-transform: uppercase;
}

/* Overview ---------------------------------------------------------------- */

.hz-overview { display: grid; gap: 16px; }

.hz-ribbon { display: grid; gap: 14px; padding: 18px 18px 14px; }

.hz-legend { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px 14px; margin: 4px 0 0; padding: 0; list-style: none; color: var(--muted); font-size: .7rem; }

.hz-legend li { display: inline-flex; align-items: center; gap: 6px; }

.hz-legend li::before { content: ""; width: 8px; height: 8px; border-radius: 999px; background: var(--kind); }

.hz-legend .hz-kind--milestone::before { border-radius: 1.5px; transform: rotate(45deg) scale(.86); }

.hz-ribbon__scroller { margin: 0 -8px; padding: 0 8px 4px; overflow-x: auto; overscroll-behavior-x: contain; }

.hz-ribbon__body { --label-w: 84px; min-width: 640px; display: grid; gap: 2px; }

.hz-ribbon__lane { min-height: 30px; display: grid; grid-template-columns: var(--label-w) minmax(0, 1fr); align-items: center; }

.hz-ribbon__label { position: sticky; z-index: 4; left: 0; align-self: stretch; display: flex; align-items: center; background: var(--surface-strong); color: var(--faint); font-size: .7rem; font-weight: 640; }

.hz-ribbon__months { display: grid; }

.hz-ribbon__months span { padding: 0 0 2px 5px; color: var(--faint); font-size: .66rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }

.hz-ribbon__months span.is-current { color: var(--ink); }

.hz-ribbon__plot { position: relative; display: grid; gap: 5px; padding-bottom: 24px; }

.hz-ribbon__track { position: relative; height: 30px; border-radius: 9px; background: color-mix(in srgb, var(--soft) 65%, transparent); }

.hz-ribbon__empty { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--faint); font-size: .7rem; white-space: nowrap; }

.hz-ribbon__overlay,
.hz-ribbon__today-wrap { position: absolute; inset: 0 0 24px; display: grid; grid-template-columns: var(--label-w) minmax(0, 1fr); pointer-events: none; }

/* Sticky lane labels also mask the scroller's side padding and the gaps between lanes. */
.hz-ribbon__lane > .hz-ribbon__label { box-shadow: -10px 0 0 var(--surface-strong), 0 3px 0 var(--surface-strong), 0 -3px 0 var(--surface-strong); }

.hz-ribbon__overlay .hz-ribbon__label,
.hz-ribbon__today-wrap .hz-ribbon__label { background: transparent; box-shadow: none; }

.hz-ribbon__grid { display: grid; }

.hz-ribbon__grid i { border-left: 1px dashed color-mix(in srgb, var(--line-strong) 55%, transparent); }

.hz-ribbon__grid i:first-child { border-left-color: transparent; }

.hz-ribbon__today-wrap > div { position: relative; }

.hz-ribbon__today { position: absolute; top: -4px; bottom: -23px; width: 0; border-left: 1.5px solid var(--current-time, #9a5149); }

.hz-ribbon__today span {
  position: absolute;
  bottom: 0;
  left: 0;
  transform: translateX(-50%);
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--current-time, #9a5149);
  color: var(--on-current-time, #fffaf4);
  font-size: .6rem;
  font-weight: 700;
  white-space: nowrap;
}

.hz-marker {
  position: absolute;
  z-index: 1;
  top: 50%;
  padding: 0;
  border: 0;
  background: var(--kind);
  cursor: pointer;
  transition: box-shadow 140ms ease, filter 140ms ease;
}

.hz-marker--band.is-range,
.hz-marker--dot.is-range { min-width: 10px; height: 14px; transform: translateY(-50%); border-radius: 999px; }

.hz-marker--band:not(.is-range),
.hz-marker--dot:not(.is-range) { width: 12px; height: 12px; transform: translate(-50%, -50%); border-radius: 999px; box-shadow: 0 0 0 2px var(--surface-strong); }

.hz-marker--diamond { z-index: 2; width: 11px; height: 11px; transform: translate(-50%, -50%) rotate(45deg); border-radius: 2px; box-shadow: 0 0 0 2px var(--surface-strong); }

.hz-marker.is-done { background: color-mix(in srgb, var(--kind) 30%, var(--surface-strong)); box-shadow: inset 0 0 0 1.5px var(--kind), 0 0 0 2px var(--surface-strong); }

.hz-marker:hover,
.hz-marker:focus-visible { z-index: 3; outline: 0; filter: brightness(1.08); box-shadow: 0 0 0 2px var(--surface-strong), 0 0 0 4px color-mix(in srgb, var(--kind) 45%, transparent); }

.hz-ribbon__quarters { display: grid; }

.hz-ribbon__quarters span {
  min-width: 0;
  height: 28px;
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 2px;
  padding: 0 9px;
  overflow: hidden;
  border-radius: 8px;
  background: color-mix(in srgb, var(--hz-habit) 8%, transparent);
  color: var(--muted);
  font-size: .72rem;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.hz-ribbon__quarters b { flex: 0 0 auto; color: var(--hz-habit); font-size: .64rem; font-weight: 760; }

.hz-ribbon__quarters em { color: var(--faint); font-style: normal; }

.hz-ribbon__quarters span.is-current { background: color-mix(in srgb, var(--hz-habit) 15%, transparent); color: var(--ink); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--hz-habit) 32%, transparent); }

.hz-overview__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); align-items: start; gap: 16px; }

.hz-next { display: grid; gap: 8px; padding: 16px 12px 12px; }

.hz-next > .hz-card__head { padding: 0 4px; }

.hz-next__list { display: grid; gap: 2px; }

.hz-next-item {
  width: 100%;
  min-width: 0;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 8px;
  border-radius: 12px;
  background: transparent;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  transition: background-color 140ms ease;
}

.hz-next-item:hover,
.hz-next-item:focus-visible { outline: 0; background: var(--soft); }

.hz-next-item__date {
  width: 42px;
  height: 44px;
  display: grid;
  place-content: center;
  border-radius: 10px;
  background: color-mix(in srgb, var(--kind) 10%, var(--surface-strong));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--kind) 22%, transparent);
  color: var(--kind);
  text-align: center;
}

.hz-next-item__date strong { font-size: 1.02rem; font-weight: 740; line-height: 1; font-variant-numeric: tabular-nums; }

.hz-next-item__date small { margin-top: 3px; font-size: .6rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }

.hz-next-item__copy { min-width: 0; display: grid; gap: 3px; }

.hz-next-item__copy strong { overflow: hidden; font-size: .86rem; font-weight: 630; text-overflow: ellipsis; white-space: nowrap; }

.hz-next-item__copy small { min-width: 0; display: flex; align-items: center; gap: 6px; overflow: hidden; color: var(--muted); font-size: .72rem; white-space: nowrap; }

.hz-next-item__copy .hz-dot { width: 6px; height: 6px; }

.hz-next-item em { color: var(--faint); font-size: .72rem; font-style: normal; white-space: nowrap; font-variant-numeric: tabular-nums; }

.hz-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }

.hz-tile {
  min-width: 0;
  min-height: 160px;
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 14px 16px 16px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface-strong);
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  transition: border-color 140ms ease, box-shadow 180ms ease, transform 200ms cubic-bezier(.22,1,.36,1);
}

.hz-tile--misogi { --kind: var(--hz-misogi); }
.hz-tile--adventures { --kind: var(--hz-adventure); }
.hz-tile--commitments { --kind: var(--hz-commitment); }
.hz-tile--habits { --kind: var(--hz-habit); }

.hz-tile:hover,
.hz-tile:focus-visible { outline: 0; border-color: color-mix(in srgb, var(--kind) 36%, var(--line)); box-shadow: 0 12px 30px rgba(25, 22, 17, .07); transform: translateY(-2px); }

.hz-tile:active { transform: translateY(0) scale(.99); }

.hz-tile__head { display: flex; align-items: center; gap: 8px; }

.hz-tile__head .hz-eyebrow { color: var(--kind); }

.hz-tile__icon { width: 26px; height: 26px; display: grid; place-items: center; border-radius: 8px; background: color-mix(in srgb, var(--kind) 12%, var(--surface-strong)); color: var(--kind); }

.hz-tile__icon svg { width: 16px; height: 16px; }

.hz-tile .hz-tile__arrow { width: 16px; height: 16px; margin-left: auto; color: var(--faint-mark); transition: transform 180ms cubic-bezier(.22,1,.36,1), color 140ms ease; }

.hz-tile:hover .hz-tile__arrow { color: var(--kind); transform: translateX(3px); }

.hz-tile__title { display: -webkit-box; overflow: hidden; font-size: .98rem; font-weight: 660; line-height: 1.32; letter-spacing: -.015em; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }

.hz-tile__title.is-empty { color: var(--muted); font-weight: 560; }

.hz-tile__meta { color: var(--muted); font-size: .76rem; line-height: 1.4; }

.hz-tile__hint { margin-top: auto; color: var(--kind); font-size: .74rem; font-weight: 640; }

.hz-tile__progress { margin-top: auto; display: grid; gap: 6px; }

.hz-tile__progress small { color: var(--faint); font-size: .72rem; }

.hz-slot-dots { display: flex; gap: 5px; }

.hz-slot-dot { width: 20px; height: 6px; border-radius: 999px; background: var(--soft); box-shadow: inset 0 0 0 1px var(--line); }

.hz-slot-dot.is-idea { background: color-mix(in srgb, var(--kind) 28%, var(--surface-strong)); box-shadow: none; }

.hz-slot-dot.is-planned { background: var(--kind); box-shadow: none; }

.hz-slot-dot.is-done { background: color-mix(in srgb, var(--kind) 60%, var(--ink)); box-shadow: none; }

.hz-tile__list { display: grid; gap: 7px; }

.hz-tile__list > span { min-width: 0; display: block; overflow: hidden; font-size: .82rem; line-height: 1.35; white-space: nowrap; text-overflow: ellipsis; }

.hz-tile__list b { display: inline-block; min-width: 18px; margin-right: 6px; color: var(--kind); font-size: .72rem; font-weight: 760; }

.hz-tile__list .is-empty { color: var(--faint); }

.hz-tile__stats { display: flex; align-items: baseline; gap: 8px; }

.hz-tile__stats b { font-size: 1.6rem; font-weight: 740; letter-spacing: -.04em; line-height: 1; font-variant-numeric: tabular-nums; }

.hz-tile__stats small { color: var(--muted); font-size: .74rem; }

.hz-spark { margin-top: auto; display: grid; grid-template-columns: repeat(14, minmax(0, 1fr)); gap: 3px; }

.hz-spark i { height: 14px; border-radius: 3px; background: var(--soft); }

.hz-spark i.is-done { background: var(--kind); }

/* Misogi ------------------------------------------------------------------ */

.hz-misogi {
  display: grid;
  gap: 14px;
  padding: 20px 18px 16px;
  border-color: color-mix(in srgb, var(--hz-misogi) 22%, var(--line));
  background: linear-gradient(180deg, color-mix(in srgb, var(--hz-misogi) 6%, var(--surface-strong)), var(--surface-strong) 75%);
}

.hz-misogi__entry { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; align-items: start; gap: 12px; }

.hz-misogi__entry .check { margin-top: 9px; }

.hz-misogi textarea {
  width: 100%;
  min-height: 44px;
  padding: 4px 0;
  overflow: hidden;
  border: 0;
  outline: 0;
  resize: none;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 1.32rem;
  font-weight: 680;
  line-height: 1.3;
  letter-spacing: -.028em;
}

.hz-misogi textarea::placeholder { color: var(--faint); font-weight: 560; }

.hz-misogi.is-done textarea { color: var(--muted); text-decoration: line-through; text-decoration-thickness: 1.5px; }

.hz-misogi__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding-left: 34px; }

.hz-misogi__why { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: baseline; gap: 10px; margin-top: -6px; padding-left: 34px; }

.hz-misogi__why span { color: var(--faint); font-size: .7rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; white-space: nowrap; }

.hz-misogi__why input { min-width: 0; height: 28px; padding: 0; border: 0; outline: 0; background: transparent; color: var(--muted); font: inherit; font-size: .88rem; font-style: italic; }

.hz-misogi__why input:focus { color: var(--ink); }

.hz-milestones { display: grid; gap: 10px; padding: 16px 16px 12px; }

.hz-progress { min-width: 150px; display: grid; justify-items: end; gap: 6px; color: var(--muted); font-size: .74rem; }

.hz-progress .hz-meter { width: 150px; }

.hz-milestone-list { display: grid; }

.hz-milestone {
  min-height: 50px;
  display: grid;
  grid-template-columns: 18px 20px minmax(0, 1fr) auto 28px;
  align-items: center;
  gap: 10px;
  padding: 6px 2px;
  border-top: 1px solid var(--line);
}

.hz-milestone:first-child { border-top: 0; }

.hz-milestone__index { color: var(--faint); font-size: .72rem; font-weight: 660; text-align: center; font-variant-numeric: tabular-nums; }

.hz-milestone__input { min-width: 0; height: 34px; border: 0; outline: 0; background: transparent; color: var(--ink); font: inherit; font-size: .9rem; font-weight: 540; }

.hz-milestone.is-done .hz-milestone__input { color: var(--muted); text-decoration: line-through; }

.hz-milestone .hz-date-chip { --kind: var(--hz-milestone); height: 30px; }

/* Mini-adventures --------------------------------------------------------- */

.hz-adventures { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }

.hz-adventure {
  --kind: var(--hz-adventure);
  min-height: 172px;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 10px;
  padding: 12px 12px 14px 14px;
  overflow: hidden;
}

.hz-adventure::before { content: ""; position: absolute; inset: 0 0 auto; height: 3px; background: var(--kind); opacity: 0; transition: opacity 160ms ease; }

.hz-adventure.is-planned { border-color: color-mix(in srgb, var(--kind) 24%, var(--line)); }

.hz-adventure.is-planned::before { opacity: 1; }

.hz-adventure.is-done { background: color-mix(in srgb, var(--soft) 45%, var(--surface-strong)); }

.hz-adventure__top { min-height: 28px; display: flex; align-items: center; gap: 8px; }

.hz-adventure__top .hz-row-remove { margin-left: auto; }

.hz-status {
  height: 22px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0 8px;
  border-radius: 999px;
  font-size: .64rem;
  font-weight: 740;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.hz-status svg { width: 12px; height: 12px; stroke-width: 2.4; }

.hz-status--idea { background: var(--soft); color: var(--muted); }

.hz-status--planned { background: color-mix(in srgb, var(--kind) 12%, var(--surface-strong)); color: var(--kind); }

.hz-status--done { background: color-mix(in srgb, var(--hz-habit) 14%, var(--surface-strong)); color: var(--hz-habit); }

.hz-adventure__countdown { color: var(--muted); font-size: .74rem; font-variant-numeric: tabular-nums; }

.hz-adventure__title { display: grid; grid-template-columns: 20px minmax(0, 1fr); align-items: start; gap: 10px; }

.hz-adventure__title .check { margin-top: 2px; }

.hz-adventure__input {
  width: 100%;
  min-height: 24px;
  padding: 0;
  overflow: hidden;
  border: 0;
  outline: 0;
  resize: none;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: .96rem;
  font-weight: 640;
  line-height: 1.35;
  letter-spacing: -.012em;
}

.hz-adventure.is-done .hz-adventure__input { color: var(--muted); text-decoration: line-through; }

.hz-adventure .hz-date-chip { justify-self: start; }

.hz-slot {
  min-height: 172px;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 8px;
  border: 1.5px dashed var(--line);
  border-radius: 16px;
  background: transparent;
  color: var(--faint);
  font-size: .78rem;
  font-weight: 620;
  cursor: pointer;
  transition: border-color 140ms ease, color 140ms ease, background-color 140ms ease;
}

.hz-slot svg { width: 20px; height: 20px; }

.hz-slot.is-next { border-color: color-mix(in srgb, var(--hz-adventure) 42%, var(--line-strong)); background: color-mix(in srgb, var(--hz-adventure) 4%, transparent); color: var(--hz-adventure); }

.hz-slot:hover,
.hz-slot:focus-visible { outline: 0; border-color: var(--hz-adventure); background: color-mix(in srgb, var(--hz-adventure) 7%, transparent); color: var(--hz-adventure); }

/* Commitments ------------------------------------------------------------- */

.hz-commitments { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }

.hz-commitment {
  min-height: 74px;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 13px 14px 13px 13px;
  transition: border-color 140ms ease, box-shadow 160ms ease;
}

.hz-commitment__index {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: var(--soft);
  color: var(--faint);
  font-size: 1.05rem;
  font-weight: 720;
  font-variant-numeric: tabular-nums;
  transition: background-color 160ms ease, color 160ms ease;
}

.hz-commitment.is-set .hz-commitment__index { background: color-mix(in srgb, var(--hz-commitment) 14%, var(--surface-strong)); color: var(--hz-commitment); }

.hz-commitment__input {
  width: 100%;
  min-height: 26px;
  padding: 0;
  overflow: hidden;
  border: 0;
  outline: 0;
  resize: none;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 1.02rem;
  font-weight: 620;
  line-height: 1.42;
  letter-spacing: -.012em;
}

.hz-commitment__input::placeholder { color: var(--faint); font-weight: 520; }

.hz-commitment:focus-within { border-color: color-mix(in srgb, var(--hz-commitment) 42%, var(--line)); box-shadow: 0 0 0 4px color-mix(in srgb, var(--hz-commitment) 10%, transparent); }

/* Winning habits ---------------------------------------------------------- */

.hz-habits { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 12px; }

.hz-habit { --kind: var(--hz-habit); --ring: var(--hz-habit); display: grid; align-content: start; gap: 12px; padding: 14px; }

.hz-habit.is-current { border-color: color-mix(in srgb, var(--kind) 40%, var(--line)); box-shadow: 0 0 0 4px color-mix(in srgb, var(--kind) 8%, transparent); }

.hz-habit.is-locked { border-style: dashed; background: transparent; box-shadow: none; }

.hz-habit__head { display: flex; align-items: center; gap: 8px; }

.hz-habit__head .hz-now { margin-left: auto; }

.hz-habit__quarter { height: 24px; display: inline-grid; place-items: center; padding: 0 8px; border-radius: 7px; background: color-mix(in srgb, var(--kind) 13%, var(--surface-strong)); color: var(--kind); font-size: .72rem; font-weight: 760; }

.hz-habit__months { color: var(--muted); font-size: .74rem; }

.hz-habit__input {
  width: 100%;
  height: 42px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  outline: 0;
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: .92rem;
  font-weight: 620;
  transition: border-color 140ms ease, box-shadow 160ms ease;
}

.hz-habit__input:focus { border-color: color-mix(in srgb, var(--kind) 45%, var(--line)); box-shadow: 0 0 0 4px color-mix(in srgb, var(--kind) 10%, transparent); }

.hz-habit__input:disabled { border-style: dashed; background: transparent; color: var(--faint); }

.hz-habit__stats { display: grid; grid-template-columns: 46px minmax(0, 1fr); align-items: center; gap: 14px; }

.hz-habit__score { position: relative; width: 46px; height: 46px; display: grid; place-items: center; }

.hz-habit__score .hz-ring { position: absolute; inset: 0; width: 46px; height: 46px; }

.hz-habit__score b { font-size: .72rem; font-weight: 740; font-variant-numeric: tabular-nums; }

.hz-habit__stats dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0; }

.hz-habit__stats dt { color: var(--faint); font-size: .68rem; font-weight: 640; }

.hz-habit__stats dd { margin: 2px 0 0; font-size: .9rem; font-weight: 660; font-variant-numeric: tabular-nums; }

.hz-habit__toggle {
  justify-self: start;
  height: 30px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 10px 0 12px;
  border-radius: 999px;
  background: var(--soft);
  color: var(--muted);
  font-size: .76rem;
  font-weight: 630;
  cursor: pointer;
}

.hz-habit__toggle:hover { color: var(--ink); }

.hz-habit__toggle svg { width: 15px; height: 15px; transition: transform 220ms cubic-bezier(.22,1,.36,1); }

.hz-habit.is-expanded .hz-habit__toggle svg { transform: rotate(180deg); }

.hz-habit__details { display: none; overflow: hidden; }

.hz-habit.is-expanded .hz-habit__details { display: block; }

.hz-habit__details-inner { display: grid; gap: 10px; padding-top: 2px; }

.hz-habit__metrics { display: flex; flex-wrap: wrap; gap: 6px 14px; color: var(--muted); font-size: .72rem; }

.hz-habit__hint { margin: 0; color: var(--faint); font-size: .8rem; line-height: 1.5; }

.habit-heatmap { display: grid; grid-auto-flow: column; grid-template-rows: repeat(7, auto); grid-template-columns: repeat(var(--heat-weeks, 14), minmax(0, 15px)); justify-content: start; gap: 3px; }

.habit-heat-cell { aspect-ratio: 1; border-radius: 3px; background: var(--soft); }

.habit-heat-cell.is-outside { visibility: hidden; }

.habit-heat-cell.is-future { background: transparent; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--line) 75%, transparent); }

.habit-heat-cell.is-untracked { opacity: .45; }

.habit-heat-cell.is-missed { background: color-mix(in srgb, var(--line-strong) 45%, var(--soft)); }

.habit-heat-cell.is-done { background: var(--hz-habit); }

/* Year map ---------------------------------------------------------------- */

.hz-yearmap { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }

.hz-month {
  min-width: 0;
  min-height: 128px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 11px 11px 12px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface-strong);
  transition: border-color 140ms ease;
}

.hz-month.is-empty { border-style: dashed; background: transparent; }

.hz-month.is-current { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 8%, transparent); }

.hz-month__head { min-height: 28px; display: flex; align-items: center; gap: 8px; }

.hz-month__name { font-size: .86rem; font-weight: 690; letter-spacing: -.01em; }

.hz-month.is-past .hz-month__name { color: var(--muted); }

.hz-month__count { min-width: 20px; height: 20px; display: inline-grid; place-items: center; padding: 0 6px; border-radius: 999px; background: var(--soft); color: var(--muted); font-size: .66rem; font-weight: 720; }

/* The whole month is a target: empty months are one big "add" area, filled
   months reveal a quiet "+ Add" under their events. */
.hz-month { cursor: pointer; }

.hz-month__add-area {
  width: 100%;
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: auto;
  border: 1px dashed transparent;
  border-radius: 10px;
  background: transparent;
  color: var(--faint);
  font-size: .76rem;
  font-weight: 620;
  cursor: pointer;
  opacity: 0;
  transition: opacity 140ms ease, background-color 140ms ease, border-color 140ms ease, color 140ms ease;
}

.hz-month__add-area svg { width: 15px; height: 15px; stroke-width: 1.9; }

.hz-month.is-empty .hz-month__add-area { flex: 1 1 auto; min-height: 64px; border-color: var(--line); opacity: 1; }

.hz-month:hover .hz-month__add-area,
.hz-month__add-area:focus-visible { opacity: 1; }

.hz-month:hover .hz-month__add-area,
.hz-month__add-area:hover,
.hz-month__add-area:focus-visible { border-color: color-mix(in srgb, var(--hz-keydate) 45%, var(--line)); background: color-mix(in srgb, var(--hz-keydate) 6%, transparent); color: var(--hz-keydate); outline: 0; }

@media (hover: none) {
  .hz-month__add-area { opacity: 1; border-color: var(--line); }
}

.hz-month__events { display: grid; gap: 4px; }

.hz-event {
  width: 100%;
  min-width: 0;
  display: grid;
  grid-template-columns: 8px minmax(0, 1fr);
  align-items: center;
  gap: 2px 9px;
  padding: 7px 9px;
  border-radius: 9px;
  background: color-mix(in srgb, var(--kind) 7%, transparent);
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  transition: background-color 140ms ease;
}

.hz-event .hz-dot { grid-row: span 2; }

.hz-event strong { min-width: 0; overflow: hidden; font-size: .8rem; font-weight: 630; text-overflow: ellipsis; white-space: nowrap; }

.hz-event small { min-width: 0; overflow: hidden; color: var(--muted); font-size: .7rem; text-overflow: ellipsis; white-space: nowrap; font-variant-numeric: tabular-nums; }

.hz-event.is-done strong { color: var(--muted); text-decoration: line-through; }

.hz-event:hover,
.hz-event:focus-visible { outline: 0; background: color-mix(in srgb, var(--kind) 14%, transparent); }


/* Add chooser ------------------------------------------------------------- */

.app-popover.hz-add-menu { max-height: min(470px, calc(100dvh - 20px)); padding: 6px; border-radius: 14px; }

.hz-add-menu__head { padding: 6px 8px; color: var(--faint); font-size: .66rem; font-weight: 720; letter-spacing: .07em; text-transform: uppercase; }

.hz-add-option {
  width: 100%;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 8px;
  border-radius: 10px;
  background: transparent;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  transition: background-color 120ms ease;
}

.hz-add-option:hover:not(:disabled),
.hz-add-option:focus-visible { outline: 0; background: var(--soft); }

.hz-add-option:disabled { cursor: default; opacity: .48; }

.hz-add-option__icon { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; background: color-mix(in srgb, var(--kind) 12%, var(--surface-strong)); color: var(--kind); }

.hz-add-option__icon svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

.hz-add-option__copy { min-width: 0; display: grid; gap: 2px; }

.hz-add-option__copy strong { font-size: .84rem; font-weight: 650; }

.hz-add-option__copy small { color: var(--muted); font-size: .72rem; line-height: 1.35; }

.hz-add-option em { color: var(--faint); font-size: .7rem; font-style: normal; white-space: nowrap; font-variant-numeric: tabular-nums; }

/* Responsive -------------------------------------------------------------- */

@media (max-width: 1120px) {
  .hz-overview__grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 1000px) {
  :root { --hz-rail-width: 204px; }
  .hz-head { gap: 16px; }
  .hz-adventures,
  .hz-yearmap { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hz-scroll.modal__scroll { padding: 20px 20px 36px; }
}

@media (max-width: 790px) {
  .modal--horizon .modal__panel.hz-shell {
    width: 100%;
    height: calc(100dvh - .9rem);
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto minmax(0, 1fr);
    grid-template-areas: "head" "tabs" "main";
    border-radius: 16px;
  }
  .hz-shell .modal__close { top: 11px; right: 10px; }
  .hz-head { grid-template-columns: minmax(0, 1fr) auto; gap: 8px 10px; padding: 10px 54px 10px 14px; }
  .hz-head__identity { gap: 8px; }
  .hz-head__eyebrow span,
  .hz-head__eyebrow { font-size: .64rem; }
  .hz-head__year h2 { font-size: 1.3rem; }
  .hz-head__progress { grid-column: 1 / -1; grid-row: 2; max-width: none; display: flex; align-items: center; gap: 10px; }
  .hz-head__progress .hz-meter { flex: 1 1 auto; }
  .hz-head__progress small { flex: 0 0 auto; }
  .hz-add-button { height: 34px; padding: 0 13px 0 10px; }
  /* Phones print from the Year map section; the header keeps its one action. */
  .hz-print-button { display: none; }
  .hz-section-actions { justify-content: flex-start; }
  .hz-tabs { overflow: visible; padding: 8px 0; border-right: 0; border-bottom: 1px solid var(--line); }
  .hz-tabs__list { display: flex; gap: 4px; overflow-x: auto; padding: 0 12px; scrollbar-width: none; }
  .hz-tabs__list::-webkit-scrollbar { display: none; }
  .hz-tab { width: auto; min-height: 40px; flex: 0 0 auto; grid-template-columns: auto auto; gap: 7px; padding: 5px 13px 5px 6px; border-radius: 999px; }
  .hz-tab__icon { width: 28px; height: 28px; border-radius: 999px; }
  .hz-tab__icon svg { width: 16px; height: 16px; }
  .hz-tab__text small,
  .hz-tab__ring,
  .hz-tabs__hint { display: none; }
  .hz-tab__text strong { font-size: .8rem; }
  .hz-tabs__indicator { border-radius: 999px; }
  .hz-scroll.modal__scroll { padding: 16px 14px calc(32px + env(safe-area-inset-bottom)); }
  .hz-section-head { flex-direction: column; align-items: flex-start; gap: 12px; }
  .hz-section-head h3 { font-size: 1.24rem; }
  .hz-section-stat { justify-items: start; text-align: left; }
  .hz-ribbon { padding: 14px 14px 10px; }
  .hz-ribbon .hz-card__head { flex-direction: column; gap: 8px; }
  .hz-legend { justify-content: flex-start; }
  .hz-misogi textarea { min-height: 58px; font-size: 1.14rem; }
  .hz-misogi__meta,
  .hz-misogi__why { padding-left: 0; }
  .hz-milestone { grid-template-columns: 20px minmax(0, 1fr) auto 28px; gap: 8px; }
  .hz-milestone__index { display: none; }
  .hz-habits { grid-template-columns: minmax(0, 1fr); }
  .hz-progress { justify-items: start; }
}

@media (max-width: 560px) {
  .hz-tiles,
  .hz-adventures,
  .hz-yearmap { grid-template-columns: minmax(0, 1fr); }
  .hz-tile { min-height: 0; }
  .hz-adventure,
  .hz-slot { min-height: 0; }
  .hz-slot { min-height: 64px; grid-auto-flow: column; }
  .hz-slot:not(.is-next) { display: none; }
  .hz-month { min-height: 0; }
  .hz-month.is-empty { padding-block: 6px; flex-direction: row; align-items: center; }
  .hz-month.is-empty .hz-month__head { flex: 1 1 auto; }
  .hz-month.is-empty .hz-month__add-area { flex: 0 0 auto; width: auto; min-height: 34px; padding: 0 12px; }
  .hz-head__progress small { display: none; }
  .hz-milestone { grid-template-columns: 20px minmax(0, 1fr) 28px; grid-template-areas: "check text remove" ". date ."; }
  .hz-milestone .check { grid-area: check; }
  .hz-milestone__input { grid-area: text; }
  .hz-milestone .hz-date-chip { grid-area: date; justify-self: start; }
  .hz-milestone .hz-row-remove { grid-area: remove; }
}


/* Credit -------------------------------------------------------------------- */

.hz-tabs__credit { margin: 10px 10px 0; color: var(--faint); font-size: .68rem; line-height: 1.5; }

.hz-tabs__credit a,
.hz-credit a { color: var(--muted); font-weight: 620; text-decoration-color: color-mix(in srgb, var(--hz-misogi) 50%, transparent); text-underline-offset: 3px; }

.hz-credit { margin: -6px 0 2px; padding: 9px 12px; border-left: 2px solid color-mix(in srgb, var(--hz-misogi) 55%, transparent); border-radius: 0 10px 10px 0; background: color-mix(in srgb, var(--hz-misogi) 5%, transparent); color: var(--muted); font-size: .76rem; line-height: 1.55; }

/* Progress: the painted year, streak and trophies ------------------------------ */

:root { --hz-paint: var(--hz-misogi); }

.hz-panel--progress { --kind: var(--hz-paint); }

.hz-progress-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }

.hz-stat { min-width: 0; display: grid; align-content: start; gap: 4px; padding: 13px 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface-strong); }

.hz-stat > span { color: var(--faint); font-size: .68rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }

.hz-stat > strong { display: flex; align-items: center; gap: 6px; min-height: 34px; font-size: 1.7rem; font-weight: 740; letter-spacing: -.04em; line-height: 1; font-variant-numeric: tabular-nums; }

.hz-stat > strong small { color: var(--faint); font-size: .9rem; font-weight: 600; letter-spacing: 0; }

.hz-stat > small { color: var(--muted); font-size: .72rem; line-height: 1.4; }

.hz-stat--streak > strong { color: var(--hz-paint); }

.hz-stat--streak > strong svg { width: 22px; height: 22px; }

.hz-stat > strong.hz-jokers { gap: 6px; }

.hz-jokers i { width: 22px; height: 22px; border: 1.5px dashed var(--line-strong); border-radius: 7px; }

.hz-jokers i.is-left { border: 0; background: color-mix(in srgb, var(--hz-paint-joker, var(--hz-milestone)) 30%, var(--surface-strong)); box-shadow: inset 0 0 0 1.5px var(--hz-paint-joker, var(--hz-milestone)); }

.hz-paint-card { display: grid; gap: 14px; padding: 16px 16px 14px; }

.hz-paint-card .hz-card__head h4 { margin-top: 4px; color: var(--ink); font-size: .96rem; font-weight: 660; }

/* A scroller clips on both axes (overflow-x: auto turns overflow-y to auto
   too), and the hovered / focused day grows by a third with a ring around it.
   The padding gives that effect room on every edge — first and last month,
   first and last day — and the negative margin keeps the grid where it was. */
.hz-paint-scroller { --paint-room: 12px; overflow-x: auto; margin: calc(var(--paint-room) * -1); padding: var(--paint-room); }

.hz-paint { min-width: 520px; display: grid; gap: 4px; }

.hz-paint__row { display: grid; grid-template-columns: 34px minmax(0, 1fr) 22px; align-items: center; gap: 8px; }

.hz-paint__month { color: var(--faint); font-size: .66rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }

.hz-paint__count { color: var(--muted); font-size: .66rem; font-weight: 650; text-align: right; font-variant-numeric: tabular-nums; }

.hz-paint__cells { display: grid; grid-template-columns: repeat(31, minmax(0, 1fr)); gap: 3px; }

.hz-paint__cell { display: block; aspect-ratio: 1; min-width: 0; padding: 0; border: 0; border-radius: 3px; background: transparent; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--line) 65%, transparent); }

button.hz-paint__cell { cursor: pointer; transition: transform 120ms ease, box-shadow 120ms ease; }

button.hz-paint__cell:hover,
button.hz-paint__cell:focus-visible { outline: 0; transform: scale(1.35); box-shadow: 0 0 0 2px var(--surface-strong), 0 0 0 3.5px var(--hz-paint); position: relative; z-index: 1; }

.hz-paint__cell.is-missed { background: color-mix(in srgb, var(--line) 55%, var(--soft)); box-shadow: none; }

.hz-paint__cell.is-rest { background: radial-gradient(circle, color-mix(in srgb, var(--line-strong) 80%, transparent) 0 1.5px, transparent 2px); box-shadow: none; }

.hz-paint__cell.is-before { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--line) 45%, transparent); background: transparent; opacity: .7; }

.hz-paint__cell.is-joker { background: color-mix(in srgb, var(--hz-paint-joker, var(--hz-milestone)) 22%, var(--surface-strong)); box-shadow: inset 0 0 0 1.5px var(--hz-paint-joker, var(--hz-milestone)); }

.hz-paint__cell.is-closed { box-shadow: none; }

/* A palette (styles/year.css) may give its own ramp; otherwise levels are tints of --hz-paint. */
.hz-paint__cell.is-level-1 { background: var(--hz-paint-1, color-mix(in srgb, var(--hz-paint) 34%, var(--surface-strong))); }

.hz-paint__cell.is-level-2 { background: var(--hz-paint-2, color-mix(in srgb, var(--hz-paint) 66%, var(--surface-strong))); }

.hz-paint__cell.is-level-3 { background: var(--hz-paint); }

.hz-paint__cell.is-today:not(.is-closed) { box-shadow: inset 0 0 0 1.5px var(--hz-paint); background: color-mix(in srgb, var(--hz-paint) 8%, transparent); animation: paint-today 2.4s ease-in-out infinite; }

.hz-paint__cell.is-just-painted { animation: paint-in 900ms cubic-bezier(.34, 1.56, .64, 1) both; box-shadow: 0 0 0 2px var(--surface-strong), 0 0 0 4px color-mix(in srgb, var(--hz-paint) 55%, transparent); }

@keyframes paint-in {
  0% { transform: scale(.2); opacity: 0; }
  60% { transform: scale(1.45); opacity: 1; }
  100% { transform: none; opacity: 1; }
}

@keyframes paint-today {
  0%, 100% { box-shadow: inset 0 0 0 1.5px var(--hz-paint); }
  50% { box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--hz-paint) 35%, transparent); }
}

.hz-paint--compact { min-width: 0; gap: 2px; }

.hz-paint--compact .hz-paint__row { grid-template-columns: minmax(0, 1fr); }

.hz-paint--compact .hz-paint__month,
.hz-paint--compact .hz-paint__count { display: none; }

.hz-paint--compact .hz-paint__cells { gap: 2px; }

.hz-paint--compact .hz-paint__cell { border-radius: 1.5px; }

.hz-paint-legend { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px 12px; margin: 4px 0 0; padding: 0; list-style: none; color: var(--muted); font-size: .68rem; }

.hz-paint-legend li { display: inline-flex; align-items: center; gap: 5px; }

.hz-paint-legend .hz-paint__cell { width: 11px; }

.hz-progress-card { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr) 18px; align-items: center; gap: 18px; padding: 14px 16px; color: var(--ink); text-align: left; cursor: pointer; transition: border-color 140ms ease, box-shadow 180ms ease, transform 200ms cubic-bezier(.22, 1, .36, 1); }

.hz-progress-card:hover,
.hz-progress-card:focus-visible { outline: 0; border-color: color-mix(in srgb, var(--hz-paint) 36%, var(--line)); box-shadow: 0 12px 30px rgba(25, 22, 17, .07); transform: translateY(-2px); }

.hz-progress-card:hover .hz-tile__arrow { color: var(--hz-paint); transform: translateX(3px); }

.hz-progress-card__copy { min-width: 0; display: grid; gap: 6px; }

.hz-progress-card__copy .hz-eyebrow { color: var(--hz-paint); }

.hz-progress-card__copy > strong { font-size: 1.02rem; font-weight: 680; letter-spacing: -.015em; }

.hz-progress-card__meta { display: flex; flex-wrap: wrap; gap: 4px 12px; color: var(--muted); font-size: .76rem; }

.hz-progress-card__meta em { color: var(--faint); font-style: normal; font-variant-numeric: tabular-nums; }

.hz-progress-card__streak { display: inline-flex; align-items: center; gap: 4px; color: var(--hz-paint); font-weight: 680; }

.hz-progress-card__streak svg { width: 15px; height: 15px; }

.hz-progress-card__trophies { display: flex; align-items: center; gap: 8px; margin-top: 6px; color: var(--muted); font-size: .78rem; }

.hz-progress-card__trophies > svg { width: 16px; height: 16px; flex: 0 0 auto; color: var(--hz-paint); fill: none; stroke: currentColor; stroke-width: 1.7; }

.hz-progress-card__trophies b { color: var(--ink); font-weight: 700; }

.hz-progress-card__trophies .hz-meter { flex: 1 1 auto; max-width: 140px; height: 5px; }

.hz-progress-card__trophies .hz-meter > span { background: var(--hz-paint); }

.hz-progress-card__next { color: var(--faint); font-size: .74rem; }

.hz-progress-card__next em { font-style: normal; font-variant-numeric: tabular-nums; }

.hz-trophies { display: grid; gap: 16px; }

.hz-trophies__head h3 { margin: 6px 0 0; font-size: 1.12rem; font-weight: 700; letter-spacing: -.02em; }

.hz-trophies__head p { margin: 6px 0 0; color: var(--muted); font-size: .82rem; }

.hz-trophy-next h4,
.hz-trophy-group h4 { display: flex; align-items: baseline; gap: 8px; margin: 0 0 8px; color: var(--muted); font-size: .76rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }

.hz-trophy-group h4 span { color: var(--faint); font-weight: 600; letter-spacing: 0; }

.hz-trophy-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px; }

.hz-trophy-grid--next { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.hz-trophy { --trophy: var(--hz-paint); min-width: 0; display: grid; grid-template-columns: 44px minmax(0, 1fr); align-items: center; gap: 12px; padding: 11px 12px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface-strong); }

.hz-trophy--streak { --trophy: var(--hz-paint); }
.hz-trophy--reflection { --trophy: var(--hz-keydate); }
.hz-trophy--horizon { --trophy: var(--hz-adventure); }

.hz-trophy__badge { position: relative; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 999px; background: var(--soft); color: var(--faint-mark); }

.hz-trophy__badge svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

.hz-trophy__lock { position: absolute; right: -2px; bottom: -2px; width: 18px; height: 18px; display: grid; place-items: center; border-radius: 999px; background: var(--surface-strong); box-shadow: 0 0 0 1px var(--line); color: var(--faint); }

.hz-trophy__lock svg { width: 11px; height: 11px; }

.hz-trophy.is-unlocked { border-color: color-mix(in srgb, var(--trophy) 30%, var(--line)); background: linear-gradient(135deg, color-mix(in srgb, var(--trophy) 8%, var(--surface-strong)), var(--surface-strong) 70%); }

.hz-trophy.is-unlocked .hz-trophy__badge { background: color-mix(in srgb, var(--trophy) 16%, var(--surface-strong)); color: var(--trophy); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--trophy) 45%, transparent); }

.hz-trophy__copy { min-width: 0; display: grid; gap: 3px; }

.hz-trophy__copy strong { font-size: .84rem; font-weight: 660; }

.hz-trophy:not(.is-unlocked) .hz-trophy__copy strong { color: var(--muted); }

.hz-trophy__copy small { color: var(--muted); font-size: .72rem; line-height: 1.4; }

.hz-trophy__progress { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px; margin-top: 3px; }

.hz-trophy__progress .hz-meter { height: 5px; }

.hz-trophy__progress .hz-meter > span { background: var(--trophy); }

.hz-trophy__progress em { color: var(--faint); font-size: .68rem; font-style: normal; font-weight: 650; font-variant-numeric: tabular-nums; }

.hz-trophy.is-compact { padding: 9px 10px; grid-template-columns: 36px minmax(0, 1fr); }

.hz-trophy.is-compact .hz-trophy__badge { width: 36px; height: 36px; }

.hz-trophy.is-compact .hz-trophy__badge svg { width: 18px; height: 18px; }

@media (max-width: 1000px) {
  .hz-progress-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hz-trophy-grid--next { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 790px) {
  .hz-progress-card { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .hz-progress-card .hz-tile__arrow { display: none; }
  .hz-paint-card .hz-card__head { flex-direction: column; }
  .hz-paint-legend { justify-content: flex-start; }
  .hz-tabs__credit { display: none; }
}

/* Horizon popovers (event editor, new key date, period calendar) ---------- */

.horizon-event-popover { display: grid; gap: 10px; }
.horizon-event-popover__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.horizon-event-popover__head > span { color: var(--faint); font-size: var(--hz-label); font-weight: 700; text-transform: uppercase; letter-spacing: .045em; }
.horizon-event-popover__head > button { width: 28px; height: 28px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--faint); cursor: pointer; }
.horizon-event-popover__head > button:hover { background: var(--soft); color: var(--ink); }
.horizon-event-popover__head svg { fill: none; stroke: currentColor; stroke-width: 1.6; }
.horizon-event-popover__title-row { min-width: 0; display: grid; grid-template-columns: 20px minmax(0, 1fr); align-items: end; gap: 8px; }
.horizon-event-popover__title-row .horizon-event-popover__title { min-width: 0; }
.horizon-event-popover__title { display: grid; gap: 5px; color: var(--muted); font-size: var(--hz-label); }
.horizon-event-popover__title input { width: 100%; min-height: 40px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 9px; outline: 0; background: var(--surface); color: var(--ink); font: inherit; font-size: var(--hz-body); }
.horizon-event-popover__title input:focus { border-color: var(--line-strong); }
.horizon-event-popover__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; align-items: center; }
.horizon-event-popover__actions--single { grid-template-columns: 1fr 1fr; }
.horizon-event-popover__actions > .primary-button { width: 100%; }
.horizon-event-popover__actions .danger-link-button { justify-self: start; }
.period-calendar-popover__summary { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 4px 4px 9px; border-bottom: 1px solid var(--line); }
.period-calendar-popover__summary span { color: var(--faint); font-size: .66rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
.period-calendar-popover__summary strong { color: var(--ink); font-size: .76rem; font-weight: 620; }
.calendar-day.is-in-range { background: var(--soft); border-radius: 0; }
.period-calendar-popover__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; padding-top: 8px; border-top: 1px solid var(--line); }
@media (max-width: 820px) {
  .horizon-event-popover { width: min(360px, calc(100vw - 20px)); }
}
.horizon-event-popover__title-row { grid-template-columns: minmax(0, 1fr); }
.horizon-event-popover__actions { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 8px; align-items: center; }
.horizon-event-popover__actions-right { min-width: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.horizon-event-popover__remove { justify-self: start; width: 34px; height: 34px; }
.horizon-event-popover__actions--single { grid-template-columns: 1fr 1fr; }
.horizon-event-popover__actions--single > * { width: 100%; }
.horizon-event-popover__head > span, .horizon-event-popover__title { font-size: var(--hz-body); }
.horizon-event-popover { width: min(390px, calc(100vw - 24px)); gap: 11px; padding: 12px; }
.horizon-event-popover__title input { min-height: 40px; font-size: .82rem; }
.horizon-event-popover__actions { margin-top: 2px; }
.period-calendar-popover .calendar-day.is-in-range:not(.is-selected):not(.is-range-end) { background: var(--soft); color: var(--ink); border-radius: 6px; }
.period-calendar-popover .calendar-day.is-selected, .period-calendar-popover .calendar-day.is-range-end { background: var(--ink); color: var(--paper); border-radius: 8px; }
.horizon-event-popover { --hz-label: .72rem; --hz-body: .86rem; padding: 14px; gap: 12px; border-radius: 12px; }
.horizon-event-popover__head > span, .horizon-event-popover__title > span { font-size: var(--hz-label); font-weight: 680; }
.horizon-event-popover__title input { min-height: 42px; font-size: var(--hz-body); }
.horizon-event-popover__head > span { font-size: var(--hz-label); }
.horizon-event-popover__head > span { color: var(--ink); font-size: .82rem; font-weight: 650; text-transform: none; letter-spacing: -.01em; }
.horizon-event-popover__title-row.has-done-control { grid-template-columns: 20px minmax(0, 1fr); align-items: center; gap: 8px; }
.horizon-event-popover__title-row.has-done-control .horizon-event-popover__check { align-self: center; justify-self: start; margin: 0; }
.horizon-event-popover--keydate-new .horizon-event-popover__head > span { font-size: .76rem; font-weight: 620; }
.horizon-event-popover__calendar-line { min-height: 30px; display: flex; align-items: center; justify-content: flex-end; gap: 4px; }
.horizon-event-popover__calendar-line > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--faint); font-size: var(--hz-label); font-weight: 400; }
.horizon-event-popover__calendar-line .task-action { flex: 0 0 auto; }
.horizon-event-popover__calendar-line .task-action:disabled { opacity: .42; cursor: default; pointer-events: none; }


/* Horizon as one of the planner's three places (1.22) ---------------------
   Tablets and desktops: the dialog starts below the header, so Day · Week ·
   Horizon stays in view and usable. Phones: the panel ends above the bottom
   bar, which stays visible over the dialog's backdrop. */
@media (min-width: 621px) {
  .modal--horizon { top: var(--horizon-top, 0px); }
}
@media (min-width: 791px) {
  .modal--horizon .modal__panel.hz-shell { height: min(880px, calc(100dvh - var(--horizon-top, 0px) - 2rem)); }
  body.app-expanded .modal--horizon .modal__panel.hz-shell { height: min(880px, calc(var(--modal-expanded-max-height, 100dvh) - var(--horizon-top, 0px) / var(--app-scale, 1) - 1.5rem)); }
}
@media (min-width: 621px) and (max-width: 790px) {
  .modal--horizon { padding: .75rem; }
  .modal--horizon .modal__panel.hz-shell { height: calc(100dvh - var(--horizon-top, 0px) - 1.5rem); }
}
@media (max-width: 620px) {
  .modal--horizon .modal__panel.hz-shell { align-self: start; height: calc(100dvh - .9rem - var(--mobile-dock-clearance)); }
}


/* styles/year.css */
/* The year in Horizon ------------------------------------------------------------
   Colours for the painted year, the entry points, the overlay that hosts
   "Plan your year" and "Your year in review", and the review's one-page
   print. */

/* Painted-year palettes ---------------------------------------------------------
   `html[data-paint]` paints the whole app; `.hz-palette--…` lets each swatch
   show its own colours whatever is applied. Levels 1–2 default to tints of
   --hz-paint (see horizon.css); a palette may give its own ramp and joker. */

.hz-palette { --hz-paint-1: initial; --hz-paint-2: initial; --hz-paint-joker: initial; }
.hz-palette--terracotta { --hz-paint: var(--hz-misogi); }

html[data-paint="ocean"],
.hz-palette--ocean { --hz-paint: #2b6a99; }

html[data-paint="forest"],
.hz-palette--forest { --hz-paint: #3b7552; }

html[data-paint="plum"],
.hz-palette--plum { --hz-paint: #7b4a8b; }

html[data-paint="graphite"],
.hz-palette--graphite { --hz-paint: #454b54; --hz-paint-1: color-mix(in srgb, #454b54 44%, var(--surface-strong)); }

html[data-paint="sunset"],
.hz-palette--sunset { --hz-paint: #b9355f; --hz-paint-1: color-mix(in srgb, #eda23a 52%, var(--surface-strong)); --hz-paint-2: #e2704c; --hz-paint-joker: #5b7ea3; }

@media screen and (prefers-color-scheme: dark) {
  :root:not([data-theme="light"])[data-paint="ocean"],
  :root:not([data-theme="light"]) .hz-palette--ocean { --hz-paint: #6db0de; }
  :root:not([data-theme="light"])[data-paint="forest"],
  :root:not([data-theme="light"]) .hz-palette--forest { --hz-paint: #80c095; }
  :root:not([data-theme="light"])[data-paint="plum"],
  :root:not([data-theme="light"]) .hz-palette--plum { --hz-paint: #c69bd8; }
  :root:not([data-theme="light"])[data-paint="graphite"],
  :root:not([data-theme="light"]) .hz-palette--graphite { --hz-paint: #b8bec8; --hz-paint-1: color-mix(in srgb, #b8bec8 40%, var(--surface-strong)); }
  :root:not([data-theme="light"])[data-paint="sunset"],
  :root:not([data-theme="light"]) .hz-palette--sunset { --hz-paint: #ee7d9c; --hz-paint-1: color-mix(in srgb, #f5a524 62%, var(--surface-strong)); --hz-paint-2: #e9805e; --hz-paint-joker: #90b2d4; }
}

@media screen {
  :root[data-theme="dark"][data-paint="ocean"],
  :root[data-theme="dark"] .hz-palette--ocean { --hz-paint: #6db0de; }
  :root[data-theme="dark"][data-paint="forest"],
  :root[data-theme="dark"] .hz-palette--forest { --hz-paint: #80c095; }
  :root[data-theme="dark"][data-paint="plum"],
  :root[data-theme="dark"] .hz-palette--plum { --hz-paint: #c69bd8; }
  :root[data-theme="dark"][data-paint="graphite"],
  :root[data-theme="dark"] .hz-palette--graphite { --hz-paint: #b8bec8; --hz-paint-1: color-mix(in srgb, #b8bec8 40%, var(--surface-strong)); }
  :root[data-theme="dark"][data-paint="sunset"],
  :root[data-theme="dark"] .hz-palette--sunset { --hz-paint: #ee7d9c; --hz-paint-1: color-mix(in srgb, #f5a524 62%, var(--surface-strong)); --hz-paint-2: #e9805e; --hz-paint-joker: #90b2d4; }
}

/* The Close-day strip paints with the chosen palette too. */
.day-closed-progress__head strong { color: var(--hz-paint); }

/* Entry points ---------------------------------------------------------------- */

.hz-plan-button {
  height: 36px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0 12px 0 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface-strong);
  color: var(--ink);
  font-size: .8rem;
  font-weight: 640;
  white-space: nowrap;
  cursor: pointer;
  transition: border-color 140ms ease, background-color 140ms ease, box-shadow 160ms ease;
}

.hz-plan-button svg { width: 17px; height: 17px; color: var(--hz-paint); fill: color-mix(in srgb, var(--hz-paint) 18%, transparent); }

.hz-plan-button:hover,
.hz-plan-button:focus-visible { border-color: color-mix(in srgb, var(--hz-paint) 38%, var(--line)); background: color-mix(in srgb, var(--hz-paint) 6%, var(--surface-strong)); box-shadow: 0 6px 18px rgba(25, 22, 17, .07); }

.hz-season { display: grid; gap: 12px; }

.hz-season--pair { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.hz-season-card {
  --kind: var(--hz-adventure);
  min-width: 0;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 18px;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border-color: color-mix(in srgb, var(--kind) 26%, var(--line));
  background: linear-gradient(115deg, color-mix(in srgb, var(--kind) 9%, var(--surface-strong)), var(--surface-strong) 64%);
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  transition: border-color 140ms ease, box-shadow 180ms ease, transform 200ms cubic-bezier(.22, 1, .36, 1);
}

.hz-season-card--review { --kind: var(--hz-paint); }

.hz-season-card:hover,
.hz-season-card:focus-visible { outline: 0; border-color: color-mix(in srgb, var(--kind) 45%, var(--line)); box-shadow: 0 12px 30px rgba(25, 22, 17, .07); transform: translateY(-2px); }

.hz-season-card:hover .hz-tile__arrow { color: var(--kind); transform: translateX(3px); }

.hz-season-card .hz-tile__arrow { width: 16px; height: 16px; color: var(--faint-mark); transition: transform 180ms cubic-bezier(.22, 1, .36, 1), color 140ms ease; }

.hz-season-card__icon { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 13px; background: color-mix(in srgb, var(--kind) 14%, var(--surface-strong)); color: var(--kind); }

.hz-season-card__icon svg { width: 22px; height: 22px; }

.hz-season-card--plan .hz-season-card__icon svg { fill: color-mix(in srgb, var(--kind) 20%, transparent); }

.hz-season-card__copy { min-width: 0; display: grid; gap: 4px; }

.hz-panel--overview .hz-season-card .hz-eyebrow { display: flex; align-items: center; gap: 8px; color: var(--kind); }

.hz-season-card strong { font-size: 1rem; font-weight: 680; letter-spacing: -.015em; line-height: 1.3; }

.hz-season-card small { color: var(--muted); font-size: .76rem; line-height: 1.45; }

.hz-review-cta {
  min-width: 0;
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 12px 12px 12px 12px;
  border: 1px solid color-mix(in srgb, var(--hz-paint) 24%, var(--line));
  border-radius: 16px;
  background: linear-gradient(115deg, color-mix(in srgb, var(--hz-paint) 8%, var(--surface-strong)), var(--surface-strong) 60%);
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  transition: border-color 140ms ease, box-shadow 180ms ease;
}

.hz-review-cta:hover,
.hz-review-cta:focus-visible { outline: 0; border-color: color-mix(in srgb, var(--hz-paint) 45%, var(--line)); box-shadow: 0 10px 26px rgba(25, 22, 17, .07); }

.hz-review-cta__icon { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 12px; background: color-mix(in srgb, var(--hz-paint) 14%, var(--surface-strong)); color: var(--hz-paint); }

.hz-review-cta__icon svg { width: 21px; height: 21px; }

.hz-review-cta__copy { min-width: 0; display: grid; gap: 3px; }

.hz-review-cta__copy strong { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: .94rem; font-weight: 680; letter-spacing: -.01em; }

.hz-review-cta__copy small { color: var(--muted); font-size: .76rem; line-height: 1.45; }

.hz-review-cta__go { height: 34px; display: inline-flex; align-items: center; gap: 6px; padding: 0 12px 0 14px; border-radius: 999px; background: var(--ink); color: var(--paper); font-size: .78rem; font-weight: 640; }

.hz-review-cta__go svg { width: 15px; height: 15px; stroke-width: 2; }

/* Palette chooser (Progress) */

.hz-paint-palettes { display: grid; gap: 12px; padding: 14px 16px 16px; }

.hz-paint-palettes__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 6px 16px; }

.hz-paint-palettes__head h4 { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 5px 0 0; color: var(--ink); font-size: .96rem; font-weight: 660; }

.hz-paint-palettes__head p { margin: 0; color: var(--muted); font-size: .74rem; }

.hz-swatches { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }

.hz-swatch {
  position: relative;
  min-width: 0;
  display: grid;
  justify-items: start;
  gap: 9px;
  padding: 11px 11px 10px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface-strong);
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  transition: border-color 140ms ease, box-shadow 160ms ease, background-color 140ms ease;
}

.hz-swatch:hover,
.hz-swatch:focus-visible { outline: 0; border-color: color-mix(in srgb, var(--hz-paint) 45%, var(--line)); background: color-mix(in srgb, var(--hz-paint) 4%, var(--surface-strong)); }

.hz-swatch.is-active { border-color: var(--hz-paint); box-shadow: inset 0 0 0 1px var(--hz-paint), 0 6px 16px color-mix(in srgb, var(--hz-paint) 16%, transparent); }

.hz-swatch__ramp { display: grid; grid-template-columns: repeat(3, 18px); gap: 3px; }

.hz-swatch__ramp .hz-paint__cell { width: 18px; border-radius: 4px; }

.hz-swatch__name { max-width: 100%; overflow: hidden; font-size: .76rem; font-weight: 640; text-overflow: ellipsis; white-space: nowrap; }

.hz-swatch__mark { position: absolute; top: 9px; right: 9px; width: 18px; height: 18px; display: grid; place-items: center; border-radius: 999px; color: var(--faint); }

.hz-swatch__mark svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.hz-swatch.is-active .hz-swatch__mark { background: var(--hz-paint); color: var(--surface-strong); }

.hz-swatch.is-active .hz-swatch__mark svg { stroke-width: 2.6; }

/* Overlay over the Horizon dialog ---------------------------------------------- */

.hz-overlay {
  position: absolute;
  z-index: 8;
  inset: 0;
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  overflow: hidden;
  border-radius: inherit;
  background: var(--surface);
}

.hz-overlay[inert] { pointer-events: none; }

.hz-overlay svg { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

.yr.hz-overlay { grid-template-rows: auto minmax(0, 1fr); }

.yp-head {
  min-width: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 24px;
  padding: 13px 16px 13px 20px;
  border-bottom: 1px solid var(--line);
}

.yp-head__title { min-width: 0; display: flex; align-items: center; gap: 14px; }

.yp-eyebrow { display: inline-flex; align-items: center; gap: 7px; color: var(--hz-paint); font-size: .7rem; font-weight: 720; letter-spacing: .07em; text-transform: uppercase; white-space: nowrap; }

.yp-eyebrow svg { width: 17px; height: 17px; fill: color-mix(in srgb, var(--hz-paint) 18%, transparent); }

.yp-year { display: flex; align-items: center; gap: 2px; }

.yp-year h2 { min-width: 3.1ch; margin: 0 2px; font-size: 1.5rem; font-weight: 720; letter-spacing: -.04em; line-height: 1; text-align: center; font-variant-numeric: tabular-nums; }

.yp-progress { width: 100%; max-width: 380px; min-width: 0; display: grid; gap: 6px; justify-self: center; }

.yp-progress small { color: var(--faint); font-size: .72rem; }

.yp-progress__bar { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 4px; }

.yp-progress__bar i { height: 6px; border-radius: 999px; background: var(--soft); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--line) 55%, transparent); transition: background-color 240ms ease; }

.yp-progress__bar i.is-past { background: color-mix(in srgb, var(--hz-paint) 45%, var(--surface-strong)); box-shadow: none; }

.yp-progress__bar i.is-current { background: var(--hz-paint); box-shadow: none; }

.yp-close { width: 36px; height: 36px; }

.yp-close svg { width: 20px; height: 20px; }

.yp-main { min-height: 0; display: grid; grid-template-columns: var(--hz-rail-width, 232px) minmax(0, 1fr); }

.yp-rail { min-height: 0; overflow-y: auto; padding: 14px 10px; border-right: 1px solid var(--line); background: color-mix(in srgb, var(--paper) 55%, var(--surface)); }

.yp-rail ol { display: grid; gap: 3px; margin: 0; padding: 0; list-style: none; }

.yp-rail__step {
  width: 100%;
  min-height: 44px;
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding: 7px 10px;
  border-radius: 12px;
  background: transparent;
  color: var(--muted);
  font-size: .84rem;
  font-weight: 620;
  text-align: left;
  cursor: pointer;
  transition: background-color 140ms ease, color 140ms ease;
}

.yp-rail__step:hover { background: color-mix(in srgb, var(--soft) 75%, transparent); color: var(--ink); }

.yp-rail__step.is-current { background: var(--surface-strong); box-shadow: 0 1px 2px rgba(25, 22, 17, .05), 0 8px 22px rgba(25, 22, 17, .06), inset 0 0 0 1px var(--line); color: var(--ink); }

.yp-rail__icon { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 9px; background: color-mix(in srgb, var(--soft) 85%, transparent); color: var(--muted); }

.yp-rail__icon svg { width: 17px; height: 17px; }

.yp-rail__step.is-current .yp-rail__icon,
.yp-rail__step.is-done .yp-rail__icon { background: color-mix(in srgb, var(--kind) 14%, var(--surface-strong)); color: var(--kind); }

.yp-rail__step.is-done:not(.is-current) .yp-rail__icon svg { stroke-width: 2.4; }

.yp-rail__label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.yp-rail__note { margin: 14px 10px 0; color: var(--faint); font-size: .7rem; line-height: 1.5; }

.yp-kind--lookback { --kind: var(--accent); }
.yp-kind--misogi { --kind: var(--hz-misogi); }
.yp-kind--milestones { --kind: var(--hz-milestone); }
.yp-kind--adventures { --kind: var(--hz-adventure); }
.yp-kind--commitments { --kind: var(--hz-commitment); }
.yp-kind--habits { --kind: var(--hz-habit); }
.yp-kind--keydates { --kind: var(--hz-keydate); }
.yp-kind--done { --kind: var(--hz-paint); }

.yp-scroll { min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 34px 40px 44px; }
/* While it overflows, the scroll area takes keyboard focus (syncScrollRegion, src/lib/dom.js): a ring inside its edge. */
.yp-scroll[data-scroll-region]:focus-visible { outline: 2px solid color-mix(in srgb, var(--accent) 70%, transparent); outline-offset: -2px; }

.yp-step { max-width: 640px; display: grid; gap: 18px; margin: 0 auto; }

.yp-step__head { display: grid; gap: 7px; margin-bottom: 4px; }

.yp-step__head h3 { margin: 0; font-size: 1.62rem; font-weight: 730; letter-spacing: -.035em; line-height: 1.15; text-wrap: balance; outline: 0; }

.yp-step__head p { max-width: 58ch; margin: 2px 0 0; color: var(--muted); font-size: .9rem; line-height: 1.55; }

.yp-field { display: grid; gap: 7px; }

.yp-field > span { color: var(--muted); font-size: .78rem; font-weight: 640; }

.yp-field > span em { margin-left: 4px; color: var(--faint); font-style: normal; font-weight: 500; }

.yp-field--inline { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }

.yp-field textarea,
.yp-field input,
.yp-row__input {
  width: 100%;
  min-width: 0;
  min-height: 42px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 11px;
  outline: 0;
  background: var(--surface-strong);
  color: var(--ink);
  font: inherit;
  font-size: .92rem;
  font-weight: 540;
  line-height: 1.45;
  transition: border-color 130ms ease, box-shadow 130ms ease;
}

.yp-field textarea { resize: none; overflow: hidden; }

.yp-field textarea::placeholder,
.yp-field input::placeholder,
.yp-row__input::placeholder,
.yp-adventure input::placeholder { color: var(--faint); font-weight: 480; }

.yp-field textarea:focus,
.yp-field input:focus,
.yp-row__input:focus { border-color: color-mix(in srgb, var(--kind) 50%, var(--line)); box-shadow: 0 0 0 4px color-mix(in srgb, var(--kind) 11%, transparent); }

.yp-field--hero textarea {
  min-height: 0;
  padding: 13px 15px;
  border-color: color-mix(in srgb, var(--hz-misogi) 26%, var(--line));
  background: linear-gradient(180deg, color-mix(in srgb, var(--hz-misogi) 5%, var(--surface-strong)), var(--surface-strong));
  font-size: 1.28rem;
  font-weight: 680;
  letter-spacing: -.025em;
  line-height: 1.3;
}

.yp-rows { display: grid; gap: 10px; }

.yp-row { min-width: 0; display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; align-items: center; gap: 10px; }

.yp-row--commitment { grid-template-columns: 30px minmax(0, 1fr); }

.yp-row__index { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 9px; background: color-mix(in srgb, var(--kind) 12%, var(--surface-strong)); color: var(--kind); font-size: .8rem; font-weight: 720; font-variant-numeric: tabular-nums; }

.yp-row__index svg { width: 16px; height: 16px; }

.yp-row.is-done .yp-row__input { color: var(--muted); text-decoration: line-through; }

.yp-row .hz-date-chip { height: 36px; }

.yp-row--habit { grid-template-columns: 78px minmax(0, 1fr) auto; }

.yp-habit__quarter { display: grid; gap: 1px; }

.yp-habit__quarter b { color: var(--kind); font-size: .92rem; font-weight: 740; }

.yp-habit__quarter small { color: var(--faint); font-size: .68rem; white-space: nowrap; }

.yp-row--habit > em { color: var(--faint); font-size: .72rem; font-style: normal; white-space: nowrap; }

.yp-row--habit > em.yp-habit__start { color: var(--kind); font-weight: 680; }

.yp-row.is-locked .yp-row__input { background: var(--soft); color: var(--muted); }

.yp-context { display: flex; align-items: center; gap: 9px; margin: 0; padding: 10px 13px; border-radius: 11px; background: color-mix(in srgb, var(--hz-misogi) 7%, var(--surface-strong)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--hz-misogi) 18%, transparent); font-size: .88rem; font-weight: 640; }

.yp-context svg { width: 18px; height: 18px; flex: 0 0 auto; color: var(--hz-misogi); }

.yp-adventures { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }

.yp-adventure {
  min-width: 0;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  align-items: center;
  gap: 8px 10px;
  padding: 11px 12px 12px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface-strong);
  transition: border-color 130ms ease, box-shadow 130ms ease;
}

.yp-adventure:focus-within { border-color: color-mix(in srgb, var(--hz-adventure) 50%, var(--line)); box-shadow: 0 0 0 4px color-mix(in srgb, var(--hz-adventure) 10%, transparent); }

.yp-adventure__index { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 9px; background: color-mix(in srgb, var(--hz-adventure) 12%, var(--surface-strong)); color: var(--hz-adventure); font-size: .78rem; font-weight: 720; }

.yp-adventure__index svg { width: 15px; height: 15px; stroke-width: 2.4; }

.yp-adventure input { width: 100%; min-width: 0; height: 30px; padding: 0; border: 0; outline: 0; background: transparent; color: var(--ink); font: inherit; font-size: .92rem; font-weight: 620; }

.yp-adventure.is-done input { color: var(--muted); text-decoration: line-through; }

.yp-month {
  grid-column: 2;
  justify-self: start;
  max-width: 100%;
  height: 30px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 9px 0 11px;
  border: 1px dashed var(--line-strong);
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: .76rem;
  font-weight: 620;
  cursor: pointer;
  transition: border-color 130ms ease, background-color 130ms ease, box-shadow 130ms ease, color 130ms ease;
}

.yp-month span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.yp-month svg { width: 14px; height: 14px; flex: 0 0 auto; color: var(--faint-mark); transition: transform 160ms cubic-bezier(.22,1,.36,1); }

.yp-month.has-value { border-style: solid; border-color: color-mix(in srgb, var(--hz-adventure) 32%, var(--line)); background: color-mix(in srgb, var(--hz-adventure) 8%, var(--surface-strong)); color: var(--ink); }

.yp-month:hover { border-color: color-mix(in srgb, var(--hz-adventure) 45%, var(--line-strong)); color: var(--ink); }

.yp-month:focus-visible,
.yp-month[aria-expanded="true"] { outline: 0; border-color: var(--hz-adventure); box-shadow: 0 0 0 3px color-mix(in srgb, var(--hz-adventure) 14%, transparent); color: var(--ink); }

.yp-month[aria-expanded="true"] svg { transform: rotate(180deg); }

.yp-subhead { margin-bottom: -8px; color: var(--faint); font-size: .68rem; font-weight: 720; letter-spacing: .07em; text-transform: uppercase; }

.yp-keydates { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }

.yp-keydates li { min-width: 0; display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 10px; padding: 9px 12px; border-radius: 10px; background: color-mix(in srgb, var(--hz-keydate) 6%, var(--surface-strong)); font-size: .86rem; }

.yp-keydates__date { color: var(--hz-keydate); font-weight: 660; font-variant-numeric: tabular-nums; white-space: nowrap; }

.yp-step .hz-add-row { margin-top: -4px; }

/* Key dates of the year before, offered on the same days (year-plan.js carryCard). */
.yp-carry { display: grid; gap: 12px; padding: 16px 16px 14px; border: 1px solid color-mix(in srgb, var(--hz-keydate) 18%, var(--line)); border-radius: 14px; background: color-mix(in srgb, var(--hz-keydate) 3%, var(--surface-strong)); }

.yp-carry__head { display: grid; grid-template-columns: 34px minmax(0, 1fr); align-items: start; gap: 12px; }

.yp-carry__icon { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; background: color-mix(in srgb, var(--hz-keydate) 13%, var(--surface-strong)); color: var(--hz-keydate); }

.yp-carry__icon svg { width: 18px; height: 18px; }

.yp-carry__head h4 { margin: 1px 0 0; font-size: .96rem; font-weight: 700; letter-spacing: -.01em; }

.yp-carry__head p { margin: 3px 0 0; color: var(--muted); font-size: .82rem; line-height: 1.5; }

.yp-carry__list { display: grid; gap: 2px; margin: 0 -6px; padding: 0; list-style: none; }

.yp-carry__item { min-width: 0; display: grid; grid-template-columns: 20px 104px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 8px 10px; border-radius: 10px; font-size: .86rem; cursor: pointer; }

.yp-carry__item:hover { background: color-mix(in srgb, var(--hz-keydate) 6%, var(--surface-strong)); }

.yp-carry__item .check { margin: 0; }

.yp-carry__item .check:focus-visible { outline: 2px solid color-mix(in srgb, var(--hz-keydate) 60%, transparent); outline-offset: 2px; }

.yp-carry__date { color: var(--hz-keydate); font-weight: 660; font-variant-numeric: tabular-nums; white-space: nowrap; }

.yp-carry__text { min-width: 0; font-weight: 560; overflow-wrap: anywhere; }

.yp-carry__item small { color: var(--faint); font-size: .72rem; white-space: nowrap; }

.yp-carry__item:has(.check:not(:checked)) :is(.yp-carry__date, .yp-carry__text) { color: var(--muted); }

.yp-carry__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }

.yp-carry__foot .primary-button { min-height: 36px; gap: 7px; padding: 0 16px 0 12px; border-radius: 999px; font-size: .82rem; }

.yp-carry__foot .primary-button:disabled { opacity: .4; cursor: default; }

.yp-carry__foot svg { width: 16px; height: 16px; stroke-width: 2; }

.yp-carry__foot span { color: var(--faint); font-size: .76rem; font-variant-numeric: tabular-nums; }

.yp-carry-done { display: flex; align-items: center; gap: 10px; margin: 0; padding: 11px 14px; border-radius: 12px; background: color-mix(in srgb, var(--hz-keydate) 7%, var(--surface-strong)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--hz-keydate) 18%, transparent); font-size: .86rem; line-height: 1.45; outline: 0; }

.yp-carry-done svg { width: 18px; height: 18px; flex: 0 0 auto; color: var(--hz-keydate); stroke-width: 2.4; }

.yp-summary { margin: 0; padding: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 16px; background: var(--surface-strong); list-style: none; }

.yp-summary__row { min-width: 0; display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 12px 10px 12px 14px; border-top: 1px solid var(--line); }

.yp-summary__row:first-child { border-top: 0; }

.yp-summary__icon { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 999px; background: var(--soft); color: var(--faint-mark); }

.yp-summary__icon svg { width: 17px; height: 17px; }

.yp-summary__row.is-set .yp-summary__icon { background: color-mix(in srgb, var(--kind) 15%, var(--surface-strong)); color: var(--kind); }

.yp-summary__row.is-set .yp-summary__icon svg { stroke-width: 2.4; }

.yp-summary__copy { min-width: 0; display: grid; gap: 3px; }

.yp-summary__copy strong { font-size: .88rem; font-weight: 660; }

.yp-summary__copy small { display: -webkit-box; overflow: hidden; color: var(--muted); font-size: .78rem; line-height: 1.45; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }

.yp-summary__empty { color: var(--faint); }

.yp-done-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }

.yp-done-actions > span { flex: 1 1 220px; color: var(--muted); font-size: .78rem; line-height: 1.45; }

.yp-done-actions > button,
.yp-foot .yp-next { min-height: 40px; gap: 8px; padding: 0 17px; border-radius: 999px; font-size: .84rem; }

.yp-foot .secondary-button.yp-next { color: var(--ink); }

.yp-done-actions svg,
.yp-foot svg { width: 17px; height: 17px; stroke-width: 1.9; }

.yp-foot { min-width: 0; display: flex; align-items: center; gap: 12px; padding: 12px 18px; border-top: 1px solid var(--line); background: var(--surface); }

.yp-back { gap: 4px; padding-left: 6px; font-size: .8rem; }

.yp-back[hidden] { display: none; }

.yp-foot__hint { margin-left: auto; color: var(--faint); font-size: .74rem; }

/* Year in review ---------------------------------------------------------------- */

.yr-head__actions { display: flex; justify-content: flex-end; }

.yr-print { min-height: 36px; gap: 7px; padding: 0 14px 0 11px; border-radius: 999px; font-size: .78rem; }

.yr-print svg { width: 17px; height: 17px; }

.yr-scroll { padding: 28px 32px 44px; }

.yr-body { max-width: 980px; display: grid; gap: 16px; margin: 0 auto; }

.yr-hero { display: grid; gap: 7px; }

.yr-hero .hz-eyebrow { color: var(--hz-paint); }

.yr-hero h3 { margin: 0; font-size: 2rem; font-weight: 740; letter-spacing: -.045em; line-height: 1.08; outline: 0; }

.yr-hero p { max-width: 64ch; margin: 2px 0 0; color: var(--muted); font-size: .92rem; line-height: 1.55; }

.yr-stats { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }

.yr-stat { min-width: 0; display: grid; align-content: start; gap: 4px; padding: 13px 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface-strong); }

.yr-stat > span { color: var(--faint); font-size: .66rem; font-weight: 720; letter-spacing: .05em; text-transform: uppercase; }

.yr-stat > strong { min-height: 34px; display: flex; align-items: center; gap: 6px; font-size: 1.7rem; font-weight: 740; letter-spacing: -.04em; line-height: 1; font-variant-numeric: tabular-nums; }

.yr-stat > strong small { color: var(--faint); font-size: .9rem; font-weight: 600; letter-spacing: 0; }

.yr-stat > strong svg { width: 21px; height: 21px; flex: 0 0 auto; color: var(--hz-paint); }

.yr-stat > small { overflow: hidden; color: var(--muted); font-size: .72rem; line-height: 1.4; text-overflow: ellipsis; }

.yr-card { display: grid; align-content: start; gap: 12px; padding: 16px; }

.yr-card--paint { gap: 14px; }

.yr-card--paint .hz-card__head h4,
.yr-card__head h4 { margin: 5px 0 0; color: var(--ink); font-size: .96rem; font-weight: 660; }

.yr-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); align-items: start; gap: 16px; }

.yr-empty { margin: 0; color: var(--faint); font-size: .82rem; line-height: 1.5; }

.yr-bars { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }

.yr-bar { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 6px 12px; }

.yr-bar__name { min-width: 0; display: inline-flex; align-items: center; gap: 8px; overflow: hidden; font-size: .86rem; font-weight: 620; white-space: nowrap; text-overflow: ellipsis; }

.yr-bar__name i { width: 9px; height: 9px; flex: 0 0 auto; border-radius: 999px; background: var(--bar-color); }

.yr-bar__value { font-size: .84rem; font-weight: 680; font-variant-numeric: tabular-nums; white-space: nowrap; }

.yr-bar__value small { color: var(--faint); font-weight: 560; }

.yr-bar__track { grid-column: 1 / -1; height: 8px; overflow: hidden; border-radius: 999px; background: var(--soft); }

.yr-bar__track span { display: block; height: 100%; border-radius: inherit; background: var(--bar-color); }

.yr-horizon { display: grid; gap: 16px; }

.yr-kind--misogi { --kind: var(--hz-misogi); }
.yr-kind--adventure { --kind: var(--hz-adventure); }
.yr-kind--habit { --kind: var(--hz-habit); }
.yr-kind--commitment { --kind: var(--hz-commitment); }

.yr-sub h5 { display: flex; align-items: center; gap: 7px; margin: 0 0 9px; color: var(--kind); font-size: .7rem; font-weight: 720; letter-spacing: .06em; text-transform: uppercase; }

.yr-sub h5 svg { width: 15px; height: 15px; }

.yr-sub h5 span { margin-left: auto; color: var(--faint); font-weight: 620; letter-spacing: 0; text-transform: none; }

.yr-check { width: 18px; height: 18px; display: grid; flex: 0 0 auto; place-items: center; border: 1.5px solid var(--line-strong); border-radius: 6px; }

.yr-check.is-done { border-color: var(--kind); background: var(--kind); color: var(--surface-strong); }

.yr-check svg { width: 12px; height: 12px; stroke-width: 2.8; }

.yr-misogi { display: grid; grid-template-columns: 18px minmax(0, 1fr); align-items: start; gap: 10px; }

.yr-misogi .yr-check { margin-top: 2px; }

.yr-misogi strong { display: block; font-size: .96rem; font-weight: 660; letter-spacing: -.01em; line-height: 1.35; }

.yr-misogi small { display: block; margin-top: 3px; color: var(--muted); font-size: .76rem; }

.yr-misogi em { display: block; margin-top: 6px; color: var(--muted); font-size: .8rem; line-height: 1.45; }

.yr-list,
.yr-habits,
.yr-commitments { display: grid; gap: 7px; margin: 0; padding: 0; list-style: none; }

.yr-list li { min-width: 0; display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; align-items: center; gap: 9px; font-size: .86rem; }

.yr-list li span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.yr-list li small { color: var(--faint); font-size: .72rem; white-space: nowrap; }

.yr-list li:not(.is-done) span { color: var(--muted); }

.yr-habits li { min-width: 0; display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; align-items: baseline; gap: 8px; font-size: .86rem; }

.yr-habits b { color: var(--kind); font-size: .76rem; font-weight: 740; }

.yr-habits span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.yr-habits em { font-style: normal; font-weight: 700; font-variant-numeric: tabular-nums; }

.yr-habits .is-empty span { color: var(--faint); }

.yr-commitments { counter-reset: commitment; }

.yr-commitments li { position: relative; padding-left: 26px; font-size: .86rem; line-height: 1.45; counter-increment: commitment; }

.yr-commitments li::before { content: counter(commitment); position: absolute; left: 0; top: 0; color: var(--kind); font-size: .76rem; font-weight: 740; }

.yr-trophies { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }

.yr-trophies li { --trophy: var(--hz-paint); display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px 6px 8px; border-radius: 999px; background: color-mix(in srgb, var(--trophy) 10%, var(--surface-strong)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--trophy) 26%, transparent); font-size: .78rem; font-weight: 630; }

.yr-trophies li.hz-trophy--streak { --trophy: var(--hz-paint); }
.yr-trophies li.hz-trophy--reflection { --trophy: var(--hz-keydate); }
.yr-trophies li.hz-trophy--horizon { --trophy: var(--hz-adventure); }

.yr-trophies svg { width: 16px; height: 16px; color: var(--trophy); fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

.yr-trophies small { color: var(--faint); font-weight: 520; }

.yr-journal { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 16px; }

.yr-journal h5 { margin: 0 0 9px; color: var(--faint); font-size: .7rem; font-weight: 720; letter-spacing: .06em; text-transform: uppercase; }

.yr-journal ul { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }

.yr-quote { --kind: var(--hz-paint); padding: 11px 14px 10px; border-left: 3px solid color-mix(in srgb, var(--kind) 60%, transparent); border-radius: 4px 12px 12px 4px; background: color-mix(in srgb, var(--kind) 6%, var(--surface-strong)); }

.yr-quote--lesson { --kind: var(--hz-keydate); }

.yr-quote blockquote { margin: 0; color: var(--ink); font-size: .9rem; line-height: 1.5; }

.yr-quote small { display: block; margin-top: 5px; color: var(--faint); font-size: .72rem; }

/* Narrow screens ------------------------------------------------------------- */

@media (max-width: 1000px) {
  .yr-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .yr-grid { grid-template-columns: minmax(0, 1fr); }
  .hz-swatches { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 790px) {
  .hz-head__actions { gap: 6px; }
  .hz-plan-button { width: 36px; justify-content: center; padding: 0; }
  .hz-plan-button > span { display: none; }
  .hz-plan-button { position: relative; }
  .hz-season--pair { grid-template-columns: minmax(0, 1fr); }
  .hz-season-card { grid-template-columns: 40px minmax(0, 1fr); padding: 13px 14px; }
  .hz-season-card__icon { width: 40px; height: 40px; }
  .hz-season-card .hz-tile__arrow { display: none; }
  .hz-review-cta { grid-template-columns: 36px minmax(0, 1fr); }
  .hz-review-cta__icon { width: 36px; height: 36px; }
  .hz-review-cta__go { display: none; }
  .yp-head { grid-template-columns: minmax(0, 1fr) auto; gap: 8px 10px; padding: 10px 10px 10px 14px; }
  .yp-head__title { gap: 8px; }
  .yp-year h2 { font-size: 1.3rem; }
  .yp-progress { grid-row: 2; grid-column: 1 / -1; max-width: none; }
  .yp-main { grid-template-columns: minmax(0, 1fr); }
  .yp-rail { display: none; }
  .yp-scroll { padding: 22px 16px calc(28px + env(safe-area-inset-bottom)); }
  .yp-step__head h3 { font-size: 1.36rem; }
  .yp-foot { padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); }
  .yr-head__actions { grid-row: 1; grid-column: 2; }
  .yr-head .yp-close { grid-row: 1; grid-column: 3; }
  .yr-head { grid-template-columns: minmax(0, 1fr) auto auto; }
  .yr-print > span { display: none; }
  .yr-print { width: 36px; padding: 0; }
  .yr-scroll { padding: 20px 16px calc(28px + env(safe-area-inset-bottom)); }
  .yr-hero h3 { font-size: 1.6rem; }
  .yr-journal { grid-template-columns: minmax(0, 1fr); }
  .yr-card--paint .hz-card__head { flex-direction: column; }
  .yr-card--paint .hz-paint-legend { justify-content: flex-start; }
}

@media (max-width: 560px) {
  /* Room for "Plan your year" in the phone header: the compass alone says Horizon. */
  .hz-head__eyebrow { gap: 0; font-size: 0; }
  .hz-swatches { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .hz-swatch { padding: 9px; }
  .hz-swatch__ramp { grid-template-columns: repeat(3, 14px); }
  .hz-swatch__ramp .hz-paint__cell { width: 14px; }
  .yp-eyebrow { display: none; }
  .yp-adventures { grid-template-columns: minmax(0, 1fr); }
  .yp-row--habit { grid-template-columns: 58px minmax(0, 1fr); }
  .yp-row--habit > em { grid-column: 2; margin-top: -4px; }
  .yp-row { grid-template-columns: 30px minmax(0, 1fr); }
  .yp-row .hz-date-chip { grid-column: 2; justify-self: start; height: 32px; }
  .yp-keydates li { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .yp-carry { padding: 14px 12px 12px; }
  .yp-carry__item { grid-template-columns: 20px minmax(0, 1fr); align-items: start; gap: 1px 12px; }
  .yp-carry__item .check { grid-row: 1 / span 3; margin-top: 1px; }
  .yp-carry__item > span,
  .yp-carry__item small { grid-column: 2; }
  .yp-foot__hint { display: none; }
  .yp-foot .yp-next { margin-left: auto; }
  .yp-done-actions > button { flex: 1 1 100%; justify-content: center; }
  .yr-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .yr-stat:last-child { grid-column: 1 / -1; }
}

/* Year in review, printed on one landscape page ---------------------------------
   The keepsake printed each December: paper, so always light colours, whatever
   the app's theme. A title band, five figures, the painted year in the palette
   chosen on this device, then where the time went, the Horizon results, the
   journal and the trophies. Sheet-scoped and outside @media print; page-level
   rules stay in print.css. */

/* 190mm still fits A4 (198mm) and Letter (204mm) landscape inside the page margins. */
.print-sheet--review {
  --print-sheet-height: 190mm;
  --rv-ink: #1c1a17; --rv-muted: #67615a; --rv-faint: #98928a; --rv-hair: #e3ded6; --rv-soft: #f2eee8; --rv-box: #cdc6bc;
  --rv-misogi: #a5522e; --rv-milestone: #b97a46; --rv-adventure: #2f6d70; --rv-keydate: #5d4f8f; --rv-habit: #4f7350; --rv-commitment: #8b6b4f;
  print-color-adjust: exact;
  -webkit-print-color-adjust: exact;
}

/* The palette passed to renderYearReviewPrint, in its light colours (as html[data-paint] and .hz-palette--… above). */
.rv[class*="rv--paint-"] { --hz-paint-1: initial; --hz-paint-2: initial; --hz-paint-joker: initial; }
.rv.rv--paint-terracotta { --hz-paint: #a5522e; }
.rv.rv--paint-ocean { --hz-paint: #2b6a99; }
.rv.rv--paint-forest { --hz-paint: #3b7552; }
.rv.rv--paint-plum { --hz-paint: #7b4a8b; }
.rv.rv--paint-graphite { --hz-paint: #454b54; --hz-paint-1: color-mix(in srgb, #454b54 44%, #fff); }
.rv.rv--paint-sunset { --hz-paint: #b9355f; --hz-paint-1: color-mix(in srgb, #eda23a 52%, #fff); --hz-paint-2: #e2704c; --hz-paint-joker: #5b7ea3; }

.rv {
  --rv-cell: 3.4mm;
  position: relative;
  height: 100%;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  row-gap: 4mm;
  padding-bottom: 5mm;
  overflow: hidden;
  color: var(--rv-ink);
  font-size: 7.4pt;
  line-height: 1.35;
  overflow-wrap: break-word;
}
.rv :where(h1, h2, h3, p, ol, ul, li) { margin: 0; padding: 0; }
.rv :where(ol, ul) { list-style: none; }
.rv svg { flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.rv-kind--misogi { --kind: var(--rv-misogi); }
.rv-kind--adventure { --kind: var(--rv-adventure); }
.rv-kind--habit { --kind: var(--rv-habit); }
.rv-kind--commitment { --kind: var(--rv-commitment); }

/* Title band: the period, the year as the title, the year in one line; an ink rule closes it. */
.rv-mast { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 96mm); align-items: end; column-gap: 12mm; padding-bottom: 3.8mm; border-bottom: .5mm solid var(--rv-ink); }
.rv-period { color: var(--hz-paint); font-size: 6.6pt; font-weight: 720; letter-spacing: .09em; text-transform: uppercase; }
.rv-period span { color: var(--rv-faint); }
.rv-mast h1 { margin-top: 1.7mm; font-size: 34pt; font-weight: 760; letter-spacing: -.045em; line-height: .96; }
.rv-lead { padding-bottom: .6mm; color: var(--rv-muted); font-size: 9pt; line-height: 1.42; text-wrap: pretty; }

/* Five figures, a column of numerals between hairlines. */
.rv-figures { display: grid; align-content: start; }
.rv-fig { min-width: 0; display: grid; grid-template-columns: 23mm minmax(0, 1fr); grid-template-rows: auto auto; align-items: baseline; column-gap: 2.4mm; padding: 1.9mm 0 2.1mm; border-top: .25mm solid var(--rv-hair); }
.rv-fig b { display: flex; grid-row: 1 / 3; align-self: center; align-items: baseline; gap: .7mm; font-size: 20pt; font-weight: 720; letter-spacing: -.04em; line-height: 1; white-space: nowrap; font-variant-numeric: tabular-nums; }
.rv-fig b small { color: var(--rv-faint); font-size: 8.5pt; font-weight: 600; letter-spacing: -.01em; }
.rv-fig--streak b { color: var(--hz-paint); }
.rv-fig--streak b svg { width: 4.4mm; height: 4.4mm; align-self: center; margin-right: .2mm; stroke-width: 1.6; }
.rv-fig > span { align-self: end; font-size: 7.2pt; font-weight: 680; line-height: 1.25; }
.rv-fig > small { align-self: start; margin-top: .3mm; color: var(--rv-muted); font-size: 6.3pt; line-height: 1.3; }

/* Section heads: a hairline, a small label, a note on the right. */
.rv-sec { min-width: 0; min-height: 0; }
.rv-h { display: flex; align-items: center; gap: 1.3mm; margin-bottom: 2.3mm; padding-top: 1.9mm; border-top: .25mm solid var(--rv-hair); color: var(--kind, var(--rv-ink)); font-size: 6.4pt; font-weight: 740; letter-spacing: .09em; line-height: 1.2; text-transform: uppercase; white-space: nowrap; }
.rv-h svg { width: 3.3mm; height: 3.3mm; color: var(--kind); }
.rv-h span { overflow: hidden; margin-left: auto; color: var(--rv-faint); font-weight: 600; letter-spacing: 0; text-overflow: ellipsis; text-transform: none; }

/* Figures, the painted year (one row a month, one square a day) and where the time went. */
.rv-band { min-width: 0; min-height: 0; }
.rv-band--paint { display: grid; grid-template-columns: 56mm max-content minmax(0, 1fr); align-items: start; column-gap: 8mm; }
.rv-band--solo { grid-template-columns: 56mm minmax(0, 1fr); }
.rv-band--solo > .rv-paint { justify-self: center; }
/* A quiet year (nothing from Horizon or the journal): the figures run across the
   page, the squares grow and one calm line closes the page. */
.rv--quiet { --rv-cell: 5.6mm; }
.rv--quiet .rv-band--paint { grid-template-columns: max-content minmax(0, 1fr); row-gap: 5mm; }
.rv--quiet .rv-band--solo { --rv-cell: 6mm; grid-template-columns: max-content; }
.rv--quiet .rv-band--solo > .rv-paint { justify-self: start; }
.rv--quiet .rv-figures { grid-column: 1 / -1; grid-template-columns: repeat(5, minmax(0, 1fr)); column-gap: 6mm; }
.rv--quiet .rv-fig { grid-template-columns: minmax(0, 1fr); align-content: start; }
.rv--quiet .rv-fig b { grid-row: auto; margin-bottom: 1.4mm; font-size: 23pt; }
.rv-coda { align-self: end; color: var(--rv-muted); font-size: 10pt; font-weight: 560; letter-spacing: -.01em; }
.rv-coda::before { content: ""; width: 10mm; height: .6mm; display: block; margin-bottom: 2.6mm; border-radius: 999px; background: var(--hz-paint); }
.rv-paint__grid { display: grid; row-gap: .5mm; }
.rv-paint__grid li { display: grid; grid-template-columns: 7mm max-content 6.5mm; align-items: center; }
.rv-paint__grid li > span:first-child { color: var(--rv-faint); font-size: 6pt; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.rv-paint__grid b { color: var(--rv-muted); font-size: 6pt; font-weight: 650; text-align: right; font-variant-numeric: tabular-nums; }
.rv-paint__cells { display: grid; grid-template-columns: repeat(31, var(--rv-cell)); gap: .5mm; }
.rv-paint i,
.rv-legend i { display: block; width: var(--rv-cell); height: var(--rv-cell); border-radius: calc(var(--rv-cell) * .18); background: #fff; box-shadow: inset 0 0 0 .18mm #dcd5cc; }
.rv-paint i.is-l1 { background: var(--hz-paint-1, color-mix(in srgb, var(--hz-paint) 34%, #fff)); box-shadow: none; }
.rv-paint i.is-l2 { background: var(--hz-paint-2, color-mix(in srgb, var(--hz-paint) 66%, #fff)); box-shadow: none; }
.rv-paint i.is-l3 { background: var(--hz-paint); box-shadow: none; }
.rv-paint i.is-joker { background: color-mix(in srgb, var(--hz-paint-joker, var(--rv-milestone)) 22%, #fff); box-shadow: inset 0 0 0 .25mm var(--hz-paint-joker, var(--rv-milestone)); }
.rv-paint i.is-missed { background: #ebe6df; box-shadow: none; }
.rv-paint i.is-rest { background: radial-gradient(circle, #c4bdb3 0 calc(var(--rv-cell) * .095), transparent calc(var(--rv-cell) * .125)); box-shadow: none; }
.rv-paint i.is-before { box-shadow: inset 0 0 0 .18mm #ece8e2; }
.rv-paint i.is-future { background: #faf8f5; box-shadow: inset 0 0 0 .18mm #efebe5; }
.rv-legend { display: flex; flex-wrap: wrap; gap: 1mm 3.4mm; margin-top: 2.2mm; padding-left: 7mm; color: var(--rv-muted); font-size: 6.2pt; }
.rv-legend li { display: inline-flex; align-items: center; gap: 1.2mm; }
.rv-legend i { --rv-cell: 2.6mm; }

/* Where the time went: a bar a category, in its colour. */
.rv-bars { display: grid; row-gap: 2.3mm; }
.rv-bars li { display: grid; grid-template-columns: minmax(0, 1fr) auto 7mm; align-items: baseline; gap: 1.1mm 2mm; }
.rv-bars li > span { overflow: hidden; font-weight: 620; white-space: nowrap; text-overflow: ellipsis; }
.rv-bars li > i { height: 1.9mm; grid-row: 2; grid-column: 1 / -1; overflow: hidden; border-radius: 999px; background: var(--rv-soft); }
.rv-bars li > i > i,
.rv-habits li > i > i { display: block; height: 100%; border-radius: inherit; background: var(--bar, var(--kind)); }
.rv-bars b { font-weight: 680; text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.rv-bars small { color: var(--rv-faint); font-size: 6.2pt; text-align: right; font-variant-numeric: tabular-nums; }

/* Horizon and the journal, as columns of text. Every entry is clamped to a few
   lines and every list capped (PRINT_CAPS in year-review.js), so even the tallest
   column a year can have fits above the trophies on Letter, the narrower sheet:
   nothing is cut or faded. */
.rv-band--story { display: flex; align-items: flex-start; column-gap: 7mm; }
.rv-band--story > * { flex: 1 1 0; min-width: 0; }
.rv-band--story > .rv-journal { flex-grow: 1.4; }
.rv-stack { display: grid; row-gap: 3.2mm; }
/* Habits and commitments alone: side by side. */
.rv-band--story > .rv-stack:only-child { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; column-gap: 7mm; }
/* Where a list is capped, one quiet line in place of the rest, under the entries' text. */
.rv .rv-more { display: block; padding-left: var(--more-indent, 0); color: var(--rv-faint); font-size: 6.4pt; font-weight: 600; line-height: 1.3; }

.rv-misogi { display: -webkit-box; overflow: hidden; font-size: 10pt; font-weight: 700; letter-spacing: -.015em; line-height: 1.22; text-wrap: balance; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
.rv-status { display: flex; align-items: center; gap: 1.1mm; margin-top: 1.5mm; color: var(--rv-muted); font-size: 6.6pt; font-weight: 620; }
.rv-status.is-done { color: var(--kind); }
.rv-status svg { width: 3mm; height: 3mm; padding: .45mm; border-radius: 50%; background: var(--kind); color: #fff; stroke-width: 3; }
.rv-why { display: -webkit-box; overflow: hidden; margin-top: 1.6mm; color: var(--rv-muted); font-size: 7pt; font-style: italic; line-height: 1.38; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.rv-milestones { --more-indent: 4.1mm; display: grid; row-gap: 1.1mm; margin-top: 2.6mm; }
.rv-milestones li { display: grid; grid-template-columns: 2.6mm minmax(0, 1fr); align-items: center; column-gap: 1.5mm; font-size: 7pt; }
.rv-milestones i { width: 1.7mm; height: 1.7mm; justify-self: center; border: .25mm solid var(--rv-milestone); border-radius: .3mm; transform: rotate(45deg); }
.rv-milestones span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.rv-milestones .is-done i { background: var(--rv-milestone); }
.rv-milestones li:not(.is-done) span { color: var(--rv-muted); }

.rv-checks { --more-indent: 4.8mm; display: grid; row-gap: 1.4mm; }
.rv-checks li { display: grid; grid-template-columns: 3mm minmax(0, 1fr) auto; align-items: start; column-gap: 1.8mm; font-size: 7.2pt; line-height: 1.3; }
.rv-checks li > i { width: 3mm; height: 3mm; display: grid; place-items: center; margin-top: .1mm; border: .25mm solid var(--rv-box); border-radius: .8mm; }
.rv-checks .is-done > i { border-color: var(--kind); background: var(--kind); color: #fff; }
.rv-checks i svg { width: 2.4mm; height: 2.4mm; stroke-width: 3; }
.rv-checks span { display: -webkit-box; overflow: hidden; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.rv-checks li:not(.is-done) span { color: var(--rv-muted); }
.rv-checks small { padding-top: .25mm; color: var(--rv-faint); font-size: 6.2pt; white-space: nowrap; font-variant-numeric: tabular-nums; }

.rv-habits { --more-indent: 6.4mm; display: grid; row-gap: 1.4mm; }
.rv-habits li { display: grid; grid-template-columns: 5mm minmax(0, 1fr) auto; align-items: baseline; gap: .7mm 1.4mm; font-size: 7.2pt; }
.rv-habits b,
.rv-commitments b { color: var(--kind); font-size: 6.4pt; font-weight: 760; font-variant-numeric: tabular-nums; }
.rv-habits span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.rv-habits em { font-style: normal; font-weight: 700; font-variant-numeric: tabular-nums; }
.rv-habits li > i { grid-column: 2 / -1; height: 1mm; overflow: hidden; border-radius: 999px; background: var(--rv-soft); }
.rv-commitments { --more-indent: 4.6mm; display: grid; row-gap: 1.2mm; }
.rv-commitments li { display: grid; grid-template-columns: 3mm minmax(0, 1fr); align-items: baseline; column-gap: 1.6mm; font-size: 7.2pt; line-height: 1.32; }
.rv-commitments span { display: -webkit-box; overflow: hidden; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }

.rv-notes + .rv-notes { margin-top: 3.2mm; }
.rv-notes h3 { margin-bottom: 1.5mm; color: var(--rv-muted); font-size: 6.6pt; font-weight: 680; }
.rv-notes ul { display: grid; row-gap: 1.9mm; }
.rv-notes li { display: grid; grid-template-columns: 9mm minmax(0, 1fr); align-items: baseline; column-gap: 2mm; }
.rv-notes time { color: var(--rv-faint); font-size: 6.2pt; font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
.rv-notes p { display: -webkit-box; overflow: hidden; font-size: 7.6pt; line-height: 1.36; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
.rv-notes--lesson p { font-style: italic; }
.rv-journal--full .rv-notes p { -webkit-line-clamp: 2; }
/* Memories and lessons side by side when the journal has the band to itself. */
.rv-band--story > .rv-journal:only-child { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; column-gap: 7mm; }
.rv-band--story > .rv-journal:only-child > .rv-h { grid-column: 1 / -1; }
.rv-band--story > .rv-journal:only-child .rv-notes + .rv-notes { margin-top: 0; }

/* Trophies: a row of marks, in the colours of their groups, each with its name and day. */
.rv-trophies { --trophy: var(--hz-paint); }
.rv-marks { display: grid; grid-template-columns: repeat(auto-fill, minmax(35mm, 1fr)); gap: 2.2mm 2.6mm; }
.rv-marks li { min-width: 0; display: grid; grid-template-columns: 5mm minmax(0, 1fr); grid-template-rows: auto auto; align-content: center; align-items: center; column-gap: 1.5mm; }
.rv-marks i { width: 5mm; height: 5mm; display: grid; grid-row: 1 / 3; place-items: center; border-radius: 50%; background: color-mix(in srgb, var(--trophy) 12%, #fff); box-shadow: inset 0 0 0 .22mm color-mix(in srgb, var(--trophy) 40%, #fff); color: var(--trophy); }
.rv-marks svg { width: 2.9mm; height: 2.9mm; }
.rv-marks span { display: -webkit-box; overflow: hidden; font-size: 6.6pt; font-weight: 640; line-height: 1.2; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.rv-marks small { color: var(--rv-faint); font-size: 6.2pt; font-weight: 520; line-height: 1.2; white-space: nowrap; }
.rv-marks li:not(:has(small)) span { grid-row: 1 / 3; }
.rv-marks .rv-mark--reflection { --trophy: var(--rv-keydate); }
.rv-marks .rv-mark--horizon { --trophy: var(--rv-adventure); }
.rv-marks .rv-more { align-self: center; }
/* Three rows of trophies: smaller marks, each name on one line, closer rows. */
.rv-trophies--many .rv-marks { row-gap: 1.6mm; }
.rv-trophies--many .rv-marks li { grid-template-columns: 4.2mm minmax(0, 1fr); column-gap: 1.3mm; }
.rv-trophies--many .rv-marks i { width: 4.2mm; height: 4.2mm; }
.rv-trophies--many .rv-marks svg { width: 2.5mm; height: 2.5mm; }
.rv-trophies--many .rv-marks span { display: block; font-size: 6.3pt; font-weight: 620; white-space: nowrap; text-overflow: ellipsis; }

/* The foot: the planner's mark and address. */
.print-sheet--review .print-sheet-domain { display: flex; align-items: center; justify-content: center; gap: 1.4mm; bottom: 0; font-size: 6.2pt; letter-spacing: .02em; }
.rv-mark-logo { width: 3.2mm; height: 3.2mm; flex: 0 0 auto; }


/* styles/quarter.css */
/* Quarter check-ins ----------------------------------------------------------------
   The Overview card and the Add-menu entry, the guided check-in in the overlay
   that also hosts "Plan your year" (styles/year.css .yp-*, reused here), the
   Close-day nudge, and the quarter printed on one landscape page. Colours come
   from the theme tokens, so light and dark need no rules of their own; the
   printed page keeps fixed light colours, like the year in review. */

.hz-kind--quarter,
.hz-season-card--quarter { --kind: var(--hz-habit); }

.qr-icon-fill { fill: currentColor; fill-opacity: .22; stroke: none; }

/* Overview card: on its own row, with what the quarter holds -------------------- */

.hz-season-card--quarter { grid-column: 1 / -1; grid-template-columns: 44px minmax(0, 1fr) auto 18px; }

.hz-season-card__minutes { color: var(--muted); font-weight: 560; }

.hz-quarter-pills { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; margin: 0; padding: 0; list-style: none; }

.hz-quarter-pills li { height: 28px; display: inline-flex; align-items: center; gap: 4px; padding: 0 11px; border-radius: 999px; background: color-mix(in srgb, var(--kind) 8%, var(--surface-strong)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--kind) 18%, transparent); color: var(--muted); font-size: .74rem; font-weight: 560; white-space: nowrap; }

.hz-quarter-pills b { color: var(--ink); font-weight: 720; font-variant-numeric: tabular-nums; }

.hz-season-card--quarter.is-done { grid-template-columns: 44px minmax(0, 1fr) 18px; border-color: var(--line); background: var(--surface-strong); }

.hz-season-card--quarter.is-done .hz-season-card__icon { background: var(--soft); color: var(--muted); }

.hz-season-card--quarter.is-done strong { font-size: .92rem; }

/* Add menu: the check-in under its own heading */

.hz-add-menu__head--quarter { margin: 4px 2px 0; padding-top: 10px; border-top: 1px solid var(--line); }

/* Overlay: the guided check-in ------------------------------------------------------ */

.qr .yp-progress__bar { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.qr .yp-eyebrow .qr-eyebrow-icon { fill: none; }

.qr-quarter h2 { display: inline-flex; align-items: baseline; gap: 6px; min-width: 0; padding: 0 2px; }

.qr-quarter h2 small { color: var(--faint); font-size: .62em; font-weight: 650; letter-spacing: -.01em; }

.qr-kind--lookback { --kind: var(--accent); }
.qr-kind--reflect { --kind: var(--hz-keydate); }
.qr-kind--next,
.qr-kind--habit { --kind: var(--hz-habit); }
.qr-kind--done { --kind: var(--hz-paint); }
.qr-kind--misogi { --kind: var(--hz-misogi); }
.qr-kind--milestone { --kind: var(--hz-milestone); }
.qr-kind--adventure { --kind: var(--hz-adventure); }

.qr-step--lookback { max-width: 780px; }

.qr-step .yp-step__head .hz-eyebrow { color: var(--kind); }

.qr-empty { margin: 0; color: var(--faint); font-size: .82rem; line-height: 1.5; }

/* The focus chosen at the last check-in, recalled */
.qr-recall { display: flex; align-items: center; gap: 11px; margin: 0; padding: 11px 14px; border-radius: 12px; background: color-mix(in srgb, var(--hz-paint) 7%, var(--surface-strong)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--hz-paint) 18%, transparent); font-size: .9rem; font-weight: 640; line-height: 1.4; }

.qr-recall svg { width: 20px; height: 20px; flex: 0 0 auto; color: var(--hz-paint); }

.qr-recall small { display: block; margin-bottom: 1px; color: var(--muted); font-size: .7rem; font-weight: 600; }

/* Figures */
.qr-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }

.qr-stat { min-width: 0; display: grid; align-content: start; gap: 4px; padding: 13px 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface-strong); }

.qr-stat > span { color: var(--faint); font-size: .66rem; font-weight: 720; letter-spacing: .05em; text-transform: uppercase; }

.qr-stat > strong { min-height: 34px; display: flex; align-items: center; gap: 6px; font-size: 1.7rem; font-weight: 740; letter-spacing: -.04em; line-height: 1; font-variant-numeric: tabular-nums; }

.qr-stat > strong small { color: var(--faint); font-size: .9rem; font-weight: 600; letter-spacing: 0; }

.qr-stat > strong svg { width: 20px; height: 20px; flex: 0 0 auto; color: var(--hz-paint); }

.qr-stat > small { color: var(--muted); font-size: .72rem; line-height: 1.4; }

/* Cards */
.qr-card { display: grid; align-content: start; gap: 14px; padding: 16px; }

.qr-card__head h4 { margin: 5px 0 0; color: var(--ink); font-size: .96rem; font-weight: 660; letter-spacing: -.01em; line-height: 1.35; }

.qr-card__head--row { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 8px 16px; }

.qr-card .hz-eyebrow { color: var(--kind, var(--faint)); }

.qr-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 16px; }

/* The quarter painted: three calendar months */
.qr-months { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }

.qr-month { min-width: 0; display: grid; align-content: start; gap: 8px; }

.qr-month__head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }

.qr-month__head strong { font-size: .84rem; font-weight: 680; }

.qr-month__head span { color: var(--muted); font-size: .72rem; font-weight: 650; font-variant-numeric: tabular-nums; }

.qr-cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }

.qr-cal b { color: var(--faint); font-size: .62rem; font-weight: 700; line-height: 1.6; text-align: center; }

.qr-cal .hz-paint__cell { border-radius: 4px; }

/* Winning habit */
.qr-habit { display: flex; align-items: center; gap: 14px; }

.qr-habit p { margin: 0; color: var(--ink); font-size: .86rem; font-weight: 600; line-height: 1.45; }

.qr-habit p small { color: var(--muted); font-size: .76rem; font-weight: 520; }

.qr-habit__score { position: relative; width: 52px; height: 52px; display: grid; flex: 0 0 auto; place-items: center; }

.qr-habit__score svg { position: absolute; inset: 0; width: 52px; height: 52px; }

.qr-habit__score b { font-size: .92rem; font-weight: 740; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }

.qr-habit__score b small { color: var(--muted); font-size: .64rem; font-weight: 620; }

.qr-ring circle { fill: none; stroke-width: 5; }

.qr-ring__track { stroke: var(--soft); }

.qr-ring__value { stroke: var(--kind); stroke-linecap: round; }

.qr-habit__months { display: grid; gap: 7px; margin: 0; padding: 0; list-style: none; }

.qr-habit__months li { display: grid; grid-template-columns: 34px minmax(0, 1fr) 38px; align-items: center; gap: 10px; color: var(--muted); font-size: .76rem; }

.qr-habit__months li > i,
.qr-bar__track { height: 7px; overflow: hidden; border-radius: 999px; background: var(--soft); }

.qr-habit__months li > i > i { display: block; height: 100%; border-radius: inherit; background: var(--kind); }

.qr-habit__months b { color: var(--ink); font-weight: 680; text-align: right; font-variant-numeric: tabular-nums; }

/* Where the time went */
.qr-bars { display: grid; gap: 11px; margin: 0; padding: 0; list-style: none; }

.qr-bars li { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 5px 12px; }

.qr-bar__name { min-width: 0; display: inline-flex; align-items: center; gap: 8px; overflow: hidden; font-size: .84rem; font-weight: 620; white-space: nowrap; text-overflow: ellipsis; }

.qr-bar__name i { width: 9px; height: 9px; flex: 0 0 auto; border-radius: 999px; background: var(--bar-color); }

.qr-bar__value { font-size: .82rem; font-weight: 680; font-variant-numeric: tabular-nums; white-space: nowrap; }

.qr-bar__value small { color: var(--faint); font-weight: 560; }

.qr-bar__track { grid-column: 1 / -1; }

.qr-bar__track span { display: block; height: 100%; border-radius: inherit; background: var(--bar-color); }

/* In Horizon this quarter */
.qr-subs { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); align-items: start; gap: 16px 22px; }

.qr-sub--wide { grid-column: 1 / -1; }

.qr-sub h5 { display: flex; align-items: center; gap: 7px; margin: 0 0 9px; color: var(--kind); font-size: .7rem; font-weight: 720; letter-spacing: .06em; text-transform: uppercase; }

.qr-sub h5 svg { width: 15px; height: 15px; }

.qr-sub h5 span { margin-left: auto; color: var(--faint); font-weight: 620; letter-spacing: 0; text-transform: none; }

.qr-items { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }

.qr-item { min-width: 0; display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; align-items: start; gap: 9px; font-size: .86rem; }

.qr-item > small { padding-top: 2px; }

.qr-item--misogi { grid-template-columns: 18px minmax(0, 1fr); row-gap: 2px; }

.qr-item--misogi > small { grid-column: 2; padding-top: 0; }

.qr-item__mark { margin-top: 1px; }

.qr-item__text { min-width: 0; line-height: 1.4; overflow-wrap: anywhere; }

.qr-item:not(.is-done) .qr-item__text { color: var(--muted); }

.qr-item small { color: var(--faint); font-size: .72rem; white-space: nowrap; font-variant-numeric: tabular-nums; }

.qr-item__mark { width: 18px; height: 18px; display: grid; place-items: center; border: 1.5px solid var(--line-strong); border-radius: 6px; }

.qr-item.is-done .qr-item__mark { border-color: var(--kind); background: var(--kind); color: var(--surface-strong); }

.qr-item__mark svg { width: 12px; height: 12px; stroke-width: 2.8; }

.qr-item--milestone .qr-item__mark { width: 11px; height: 11px; justify-self: center; margin-top: 5px; border-color: var(--kind); border-radius: 2px; transform: rotate(45deg); }

/* From your journal */
.qr-quotes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 14px; margin: 0; padding: 0; list-style: none; }

.qr-quote { --kind: var(--hz-paint); padding: 11px 14px 10px; border-left: 3px solid color-mix(in srgb, var(--kind) 60%, transparent); border-radius: 4px 12px 12px 4px; background: color-mix(in srgb, var(--kind) 6%, var(--surface-strong)); }

.qr-quote--lesson { --kind: var(--hz-keydate); }

.qr-quote blockquote { margin: 0; font-size: .88rem; line-height: 1.5; }

.qr-quote--lesson blockquote { font-style: italic; }

.qr-quote small { display: block; margin-top: 5px; color: var(--faint); font-size: .72rem; }

/* Reflect: a few lines of the quarter to jog the memory */
.qr-prompts { display: grid; gap: 10px; margin-top: 2px; }

.qr-prompts .yp-subhead { margin: 0; }

.qr-prompts ul { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }

.qr-prompts li { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 8px 12px; border-left: 2px solid color-mix(in srgb, var(--hz-keydate) 45%, transparent); border-radius: 2px 10px 10px 2px; background: color-mix(in srgb, var(--hz-keydate) 5%, var(--surface-strong)); }

.qr-prompts blockquote { margin: 0; color: var(--muted); font-size: .84rem; line-height: 1.45; }

.qr-prompts small { flex: 0 0 auto; color: var(--faint); font-size: .72rem; font-variant-numeric: tabular-nums; }

/* Next quarter */
.qr-block { display: grid; gap: 10px; padding: 16px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface-strong); }

.qr-block__title { display: flex; align-items: center; gap: 8px; margin: 0; color: var(--ink); font-size: .92rem; font-weight: 680; letter-spacing: -.01em; }

.qr-block__title svg { width: 18px; height: 18px; flex: 0 0 auto; color: var(--kind, var(--muted)); }

.qr-block__title span { min-width: 22px; height: 20px; display: inline-grid; place-items: center; padding: 0 6px; border-radius: 999px; background: var(--soft); color: var(--muted); font-size: .7rem; font-weight: 700; font-variant-numeric: tabular-nums; }

.qr-block__lead { margin: -4px 0 2px; color: var(--muted); font-size: .82rem; line-height: 1.5; }

.qr-block .yp-row--habit { grid-template-columns: 78px minmax(0, 1fr) auto; }

.qr-keep { display: flex; flex-wrap: wrap; gap: 8px; padding-left: 88px; }

.qr-chip {
  max-width: 100%;
  height: 32px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface-strong);
  color: var(--muted);
  font: inherit;
  font-size: .76rem;
  font-weight: 630;
  white-space: nowrap;
  cursor: pointer;
  transition: border-color 130ms ease, background-color 130ms ease, color 130ms ease;
}

.qr-chip svg { width: 15px; height: 15px; flex: 0 0 auto; stroke-width: 1.9; }

.qr-chip:hover:not(:disabled) { border-color: color-mix(in srgb, var(--kind, var(--accent)) 40%, var(--line-strong)); color: var(--ink); }

.qr-chip:focus-visible { outline: 0; border-color: var(--kind, var(--accent)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--kind, var(--accent)) 16%, transparent); color: var(--ink); }

.qr-chip[aria-pressed="true"] { border-color: var(--kind, var(--accent)); background: color-mix(in srgb, var(--kind, var(--accent)) 12%, var(--surface-strong)); color: var(--ink); }

.qr-chip:disabled { cursor: default; opacity: .45; }

.qr-chip--keep { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }

.qr-moves { display: grid; margin: 0 -6px; padding: 0; list-style: none; }

.qr-move { min-width: 0; display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; align-items: center; gap: 8px 12px; padding: 10px 6px; border-top: 1px solid var(--line); }

.qr-move:first-child { border-top: 0; }

.qr-move .check { margin: 0; }

.qr-move__copy { min-width: 0; display: grid; gap: 2px; }

.qr-move__copy strong { font-size: .88rem; font-weight: 640; line-height: 1.35; overflow-wrap: anywhere; }

.qr-move__copy small { color: var(--faint); font-size: .74rem; }

.qr-move.is-moved .qr-move__copy small { color: var(--kind); font-weight: 620; }

.qr-move.is-done .qr-move__copy strong { color: var(--muted); text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--muted) 60%, transparent); }

.qr-chips { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }

.qr-move.is-done .qr-chips { display: none; }

.qr-clear { display: flex; align-items: center; gap: 10px; margin: 0; color: var(--muted); font-size: .84rem; line-height: 1.45; }

.qr-clear svg { width: 18px; height: 18px; flex: 0 0 auto; color: var(--hz-habit); stroke-width: 2.4; }

/* Close day: the nudge on the last planning day of a quarter --------------------- */

.qr-nudge { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; margin: 12px 0 0; padding-top: 11px; border-top: 1px solid var(--line); color: var(--muted); font-size: .8rem; line-height: 1.45; }

.qr-nudge .text-button { min-height: 30px; padding: 4px 12px; border-radius: 999px; background: color-mix(in srgb, var(--hz-habit) 10%, var(--surface-strong)); color: var(--ink); font-size: .76rem; font-weight: 650; }

.qr-nudge .text-button:hover,
.qr-nudge .text-button:focus-visible { background: color-mix(in srgb, var(--hz-habit) 18%, var(--surface-strong)); }

/* Narrow screens -------------------------------------------------------------------- */

@media (max-width: 1000px) {
  .hz-season-card--quarter { grid-template-columns: 44px minmax(0, 1fr) 18px; }
  .hz-quarter-pills { grid-column: 2; grid-row: 2; justify-content: flex-start; }
}

@media (max-width: 790px) {
  .hz-season-card--quarter,
  .hz-season-card--quarter.is-done { grid-template-columns: 40px minmax(0, 1fr); }
  .qr-grid { grid-template-columns: minmax(0, 1fr); }
  .qr-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .qr-months { gap: 12px; }
  .qr-cal { gap: 2px; }
  .qr-cal .hz-paint__cell { border-radius: 2px; }
  .qr-card__head--row .hz-paint-legend { justify-content: flex-start; }
}

@media (max-width: 560px) {
  .hz-quarter-pills li { height: 26px; padding: 0 9px; font-size: .7rem; }
  .qr-quarter h2 small { font-size: .7em; }
  .qr-quotes { grid-template-columns: minmax(0, 1fr); }
  .qr-stat { padding: 11px 12px; }
  .qr-stat > strong { font-size: 1.45rem; }
  .qr-months { gap: 8px; }
  .qr-month__head strong { font-size: .76rem; }
  .qr-cal b { font-size: .56rem; }
  .qr-block { padding: 14px 12px; }
  .qr-block .yp-row--habit { grid-template-columns: 58px minmax(0, 1fr); }
  .qr-keep { padding-left: 68px; }
  .qr-move { grid-template-columns: 22px minmax(0, 1fr); }
  .qr-chips { grid-column: 2; justify-content: flex-start; }
  .qr-prompts li { flex-direction: column; gap: 2px; }
}

/* A quarter printed on one landscape page ------------------------------------------
   Paper, so always light colours: the palette chosen on this device, the review's
   type scale. Sheet-scoped and outside @media print; page rules stay in print.css. */

/* 190mm still fits A4 (198mm) and Letter (204mm) landscape inside the page margins. */
.print-sheet--quarter {
  --print-sheet-height: 190mm;
  --qv-ink: #1c1a17; --qv-muted: #67615a; --qv-faint: #98928a; --qv-hair: #e3ded6; --qv-soft: #f2eee8; --qv-box: #cdc6bc;
  --qv-misogi: #a5522e; --qv-milestone: #b97a46; --qv-adventure: #2f6d70; --qv-habit: #4f7350;
  print-color-adjust: exact;
  -webkit-print-color-adjust: exact;
}

.qv[class*="qv--paint-"] { --hz-paint-1: initial; --hz-paint-2: initial; --hz-paint-joker: initial; }
.qv.qv--paint-terracotta { --hz-paint: #a5522e; }
.qv.qv--paint-ocean { --hz-paint: #2b6a99; }
.qv.qv--paint-forest { --hz-paint: #3b7552; }
.qv.qv--paint-plum { --hz-paint: #7b4a8b; }
.qv.qv--paint-graphite { --hz-paint: #454b54; --hz-paint-1: color-mix(in srgb, #454b54 44%, #fff); }
.qv.qv--paint-sunset { --hz-paint: #b9355f; --hz-paint-1: color-mix(in srgb, #eda23a 52%, #fff); --hz-paint-2: #e2704c; --hz-paint-joker: #5b7ea3; }

.qv {
  --qv-cell: 4.8mm;
  position: relative;
  height: 100%;
  display: grid;
  grid-template-rows: auto auto auto minmax(0, 1fr);
  row-gap: 4.4mm;
  padding-bottom: 6mm;
  overflow: hidden;
  color: var(--qv-ink);
  font-size: 7.4pt;
  line-height: 1.35;
  overflow-wrap: break-word;
}
.qv :where(h1, h2, h3, p, ol, ul, li, dl, dt, dd) { margin: 0; padding: 0; }
.qv :where(ol, ul) { list-style: none; }
.qv svg { flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.qv-kind--habit { --kind: var(--qv-habit); }
.qv-kind--horizon { --kind: var(--qv-adventure); }

/* Title band */
.qv-mast { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 100mm); align-items: end; column-gap: 12mm; padding-bottom: 3.8mm; border-bottom: .5mm solid var(--qv-ink); }
.qv-period { color: var(--hz-paint); font-size: 6.6pt; font-weight: 720; letter-spacing: .09em; text-transform: uppercase; }
.qv-period span { color: var(--qv-faint); }
.qv-mast h1 { margin-top: 1.7mm; font-size: 34pt; font-weight: 760; letter-spacing: -.045em; line-height: .96; white-space: nowrap; }
.qv-lead { padding-bottom: .6mm; color: var(--qv-muted); font-size: 9pt; line-height: 1.42; text-wrap: pretty; }

/* Section heads */
.qv-sec { min-width: 0; min-height: 0; }
.qv-h { display: flex; align-items: center; gap: 1.3mm; margin-bottom: 2.3mm; padding-top: 1.9mm; border-top: .25mm solid var(--qv-hair); color: var(--kind, var(--qv-ink)); font-size: 6.4pt; font-weight: 740; letter-spacing: .09em; line-height: 1.2; text-transform: uppercase; white-space: nowrap; }
.qv-h svg { width: 3.3mm; height: 3.3mm; color: var(--kind); }
.qv-h span { overflow: hidden; margin-left: auto; color: var(--qv-faint); font-weight: 600; letter-spacing: 0; text-overflow: ellipsis; text-transform: none; }

/* Figures, the three months painted, where the time went */
.qv-band { min-width: 0; min-height: 0; }
.qv-band--paint { display: grid; grid-template-columns: 52mm max-content minmax(0, 1fr); align-items: start; column-gap: 8mm; }
.qv--notime .qv-band--paint { --qv-cell: 6mm; grid-template-columns: 52mm max-content; }
.qv-figures { display: grid; align-content: start; }
.qv-fig { min-width: 0; display: grid; grid-template-columns: 21mm minmax(0, 1fr); grid-template-rows: auto auto; align-items: baseline; column-gap: 2.4mm; padding: 1.55mm 0 1.75mm; border-top: .25mm solid var(--qv-hair); }
.qv-fig b { display: flex; grid-row: 1 / 3; align-self: center; align-items: baseline; gap: .7mm; font-size: 18pt; font-weight: 720; letter-spacing: -.04em; line-height: 1; white-space: nowrap; font-variant-numeric: tabular-nums; }
.qv-fig b small { color: var(--qv-faint); font-size: 8pt; font-weight: 600; letter-spacing: -.01em; }
.qv-fig--streak b { color: var(--hz-paint); }
.qv-fig--streak b svg { width: 4mm; height: 4mm; align-self: center; margin-right: .2mm; stroke-width: 1.6; }
.qv-fig > span { align-self: end; font-size: 7.1pt; font-weight: 680; line-height: 1.25; }
.qv-fig > small { align-self: start; margin-top: .3mm; color: var(--qv-muted); font-size: 6.2pt; line-height: 1.3; }

.qv-months { display: grid; grid-template-columns: repeat(3, max-content); column-gap: 6mm; }
.qv-month h3 { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 1.3mm; font-size: 7.2pt; font-weight: 700; }
.qv-month h3 span { color: var(--qv-muted); font-size: 6.2pt; font-weight: 650; font-variant-numeric: tabular-nums; }
.qv-cal { display: grid; grid-template-columns: repeat(7, var(--qv-cell)); gap: .6mm; }
.qv-cal b { color: var(--qv-faint); font-size: 5.4pt; font-weight: 700; line-height: 1.5; text-align: center; }
.qv-cal i,
.qv-legend i { display: block; width: var(--qv-cell); height: var(--qv-cell); border-radius: calc(var(--qv-cell) * .2); background: #fff; box-shadow: inset 0 0 0 .18mm #dcd5cc; }
.qv-cal i.is-pad { visibility: hidden; }
.qv-cal i.is-l1,
.qv-legend i.is-l1 { background: var(--hz-paint-1, color-mix(in srgb, var(--hz-paint) 34%, #fff)); box-shadow: none; }
.qv-cal i.is-l2,
.qv-legend i.is-l2 { background: var(--hz-paint-2, color-mix(in srgb, var(--hz-paint) 66%, #fff)); box-shadow: none; }
.qv-cal i.is-l3,
.qv-legend i.is-l3 { background: var(--hz-paint); box-shadow: none; }
.qv-cal i.is-joker,
.qv-legend i.is-joker { background: color-mix(in srgb, var(--hz-paint-joker, var(--qv-milestone)) 22%, #fff); box-shadow: inset 0 0 0 .25mm var(--hz-paint-joker, var(--qv-milestone)); }
.qv-cal i.is-missed,
.qv-legend i.is-missed { background: #ebe6df; box-shadow: none; }
.qv-cal i.is-rest,
.qv-legend i.is-rest { background: radial-gradient(circle, #c4bdb3 0 calc(var(--qv-cell) * .095), transparent calc(var(--qv-cell) * .125)); box-shadow: none; }
.qv-cal i.is-before,
.qv-cal i.is-empty { box-shadow: inset 0 0 0 .18mm #ece8e2; }
.qv-cal i.is-future,
.qv-cal i.is-today { background: #faf8f5; box-shadow: inset 0 0 0 .18mm #efebe5; }
.qv-legend { display: flex; flex-wrap: wrap; gap: 1mm 3.2mm; margin-top: 2.4mm; color: var(--qv-muted); font-size: 6.1pt; }
.qv-legend li { display: inline-flex; align-items: center; gap: 1.2mm; }
.qv-legend i { --qv-cell: 2.6mm; }

.qv-bars { display: grid; row-gap: 2.3mm; }
.qv-bars li { display: grid; grid-template-columns: minmax(0, 1fr) auto 7mm; align-items: baseline; gap: 1.1mm 2mm; }
.qv-bars li > span { overflow: hidden; font-weight: 620; white-space: nowrap; text-overflow: ellipsis; }
.qv-bars li > i,
.qv-habit-months li > i { height: 1.9mm; overflow: hidden; border-radius: 999px; background: var(--qv-soft); }
.qv-bars li > i { grid-row: 2; grid-column: 1 / -1; }
.qv-bars li > i > i,
.qv-habit-months li > i > i { display: block; height: 100%; border-radius: inherit; background: var(--bar, var(--kind)); }
.qv-bars b { font-weight: 680; text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.qv-bars small { color: var(--qv-faint); font-size: 6.2pt; text-align: right; font-variant-numeric: tabular-nums; }
.qv .qv-more { display: block; color: var(--qv-faint); font-size: 6.4pt; font-weight: 600; line-height: 1.3; }

/* The habit, Horizon and the journal, as columns of text (every entry clamped) */
.qv-band--story { display: flex; align-items: flex-start; column-gap: 7mm; }
.qv-band--story > * { flex: 1 1 0; min-width: 0; }
.qv-band--story > .qv-journal { flex-grow: 1.25; }
.qv-habit { display: -webkit-box; overflow: hidden; font-size: 10pt; font-weight: 700; letter-spacing: -.015em; line-height: 1.22; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.qv-habit-note { margin-top: 1.5mm; color: var(--qv-muted); font-size: 6.8pt; font-weight: 560; }
.qv-habit-note b { color: var(--kind); font-weight: 740; }
.qv-habit-months { display: grid; row-gap: 1.5mm; margin-top: 2.6mm; }
.qv-habit-months li { display: grid; grid-template-columns: 7mm minmax(0, 1fr) 8mm; align-items: center; column-gap: 2mm; color: var(--qv-muted); font-size: 6.6pt; }
.qv-habit-months b { color: var(--qv-ink); font-weight: 680; text-align: right; font-variant-numeric: tabular-nums; }

.qv-checks { display: grid; row-gap: 1.45mm; }
.qv-checks li { display: grid; grid-template-columns: 3mm minmax(0, 1fr) auto; align-items: start; column-gap: 1.8mm; font-size: 7.2pt; line-height: 1.3; }
.qv-checks li > i { width: 3mm; height: 3mm; display: grid; place-items: center; margin-top: .1mm; border: .25mm solid var(--qv-box); border-radius: .8mm; }
.qv-checks .is-done > i { border-color: var(--qv-adventure); background: var(--qv-adventure); color: #fff; }
.qv-checks .qv-check--misogi.is-done > i { border-color: var(--qv-misogi); background: var(--qv-misogi); }
.qv-checks .qv-check--milestone > i { width: 1.9mm; height: 1.9mm; justify-self: center; margin-top: .55mm; border-color: var(--qv-milestone); border-radius: .3mm; transform: rotate(45deg); }
.qv-checks .qv-check--milestone.is-done > i { background: var(--qv-milestone); }
.qv-checks i svg { width: 2.4mm; height: 2.4mm; stroke-width: 3; }
.qv-checks span { display: -webkit-box; overflow: hidden; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.qv-checks li:not(.is-done) span { color: var(--qv-muted); }
.qv-checks small { padding-top: .25mm; color: var(--qv-faint); font-size: 6.2pt; white-space: nowrap; font-variant-numeric: tabular-nums; }
.qv-checks .qv-more { padding-left: 4.8mm; }

.qv-notes { display: grid; row-gap: 1.9mm; }
.qv-notes li { display: grid; grid-template-columns: 9mm minmax(0, 1fr); align-items: baseline; column-gap: 2mm; }
.qv-notes time { color: var(--qv-faint); font-size: 6.2pt; font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
.qv-notes p { display: -webkit-box; overflow: hidden; font-size: 7.5pt; line-height: 1.36; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.qv-note--lesson p { font-style: italic; }

/* The check-in: two answers and the next quarter, with lines to write on where nothing was typed.
   An answer prints in full and the ruled lines take the room left under it; a long answer steps
   down a type size until it fits (fitQuarterAnswers() in quarter-print.js), and only one still
   too long at the smallest size is clamped. */
.qv-band--checkin { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, .92fr); align-items: start; column-gap: 7mm; }
.qv-answer { height: 100%; display: flex; flex-direction: column; }
.qv-answer p { flex: 0 1 auto; min-height: 0; overflow: hidden; font-size: 8.6pt; line-height: 1.45; white-space: pre-line; }
.qv-answer--s p { font-size: 7.8pt; line-height: 1.42; }
.qv-answer--xs p { font-size: 7.1pt; line-height: 1.38; }
.qv-answer.is-clamped p { display: -webkit-box; -webkit-box-orient: vertical; }
.qv--compact .qv-checks span,
.qv--compact .qv-notes p { -webkit-line-clamp: 1; }
.qv-lines { flex: 1 1 0; min-height: 0; overflow: hidden; }
.qv-lines i { display: block; height: 6.6mm; border-bottom: .25mm solid var(--qv-hair); }
.qv-answer p + .qv-lines { margin-top: .6mm; }
.qv-next { padding: 0 3.6mm 3.2mm; border-radius: 2mm; background: color-mix(in srgb, var(--hz-paint) 6%, #fff); box-shadow: inset 0 0 0 .25mm color-mix(in srgb, var(--hz-paint) 22%, #fff); }
.qv-next .qv-h { --kind: var(--hz-paint); border-top: 0; padding-top: 2.6mm; }
.qv-next dl { display: grid; row-gap: 2.2mm; }
.qv-next dt { color: var(--qv-muted); font-size: 6.2pt; font-weight: 680; }
.qv-next dd { display: -webkit-box; overflow: hidden; margin-top: .5mm; font-size: 9pt; font-weight: 700; letter-spacing: -.01em; line-height: 1.25; overflow-wrap: anywhere; -webkit-line-clamp: 4; -webkit-box-orient: vertical; }
.qv-next dd.is-long { font-size: 8pt; line-height: 1.28; -webkit-line-clamp: 5; }
.qv-next dd.is-blank i { display: block; height: 5.6mm; border-bottom: .25mm solid color-mix(in srgb, var(--hz-paint) 30%, #fff); }

/* A quiet quarter (nothing in Horizon or the journal): the figures run across the
   page, the months grow and the check-in has more room to write by hand. */
.qv--quiet { --qv-cell: 5.6mm; grid-template-rows: auto auto minmax(0, 1fr); }
.qv--quiet .qv-band--paint { grid-template-columns: max-content minmax(0, 1fr); row-gap: 5mm; }
.qv--quiet .qv-figures { grid-column: 1 / -1; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); column-gap: 6mm; }
.qv--quiet .qv-fig { grid-template-columns: minmax(0, 1fr); align-content: start; }
.qv--quiet .qv-fig b { grid-row: auto; margin-bottom: 1.4mm; font-size: 22pt; }
.qv--quiet .qv-months { column-gap: 9mm; }
.qv--quiet.qv--notime .qv-band--paint { --qv-cell: 6.6mm; grid-template-columns: minmax(0, 1fr); }
.qv--quiet.qv--notime .qv-months { column-gap: 14mm; }

/* On screen, a sheet about to print is measured off-screen at Letter's printable width. */
.print-sheet--quarter.is-measuring { position: fixed; top: 0; left: 0; z-index: -1; width: 267.4mm; height: var(--print-sheet-height); display: block; overflow: hidden; visibility: hidden; pointer-events: none; }

/* The foot: the planner's mark and address */
.print-sheet--quarter .print-sheet-domain { display: flex; align-items: center; justify-content: center; gap: 1.4mm; bottom: 0; font-size: 6.2pt; letter-spacing: .02em; }
.qv-mark-logo { width: 3.2mm; height: 3.2mm; flex: 0 0 auto; }


/* styles/insights.css */
/* Insights ----------------------------------------------------------------------
   The third view of the Stats dialog: findings, rhythm by weekday and hour,
   hours by category, outcomes, unfinished work, streaks and year over year.

   Colour roles (validated with the data-viz palette checks, see
   src/features/insights-view.js): three categorical slots for series identity
   (terracotta, slate blue, ochre: worst adjacent CVD ΔE 18.4 light / 18.9
   dark, normal-vision ΔE ≥ 23.5, ≥ 3:1 on the card surface), one terracotta
   sequential ramp for the heatmap (monotone lightness; darker = more on light,
   brighter = more on dark), and a quiet gray for context. Categories keep the
   colours people chose for them. Text never wears a series colour. */

.ins,
.ins-tip,
.hz-insights-cta {
  --ins-1: #b25634;
  --ins-2: #346aac;
  --ins-3: #b48c2b;
  --ins-quiet: #c4bdb3;
  --ins-line: var(--ins-1);
  --ins-bar: #e6c3b4;
  --ins-seq-0: color-mix(in srgb, var(--soft) 72%, var(--surface-strong));
  --ins-seq-1: #f9d5c6;
  --ins-seq-2: #ebb29a;
  --ins-seq-3: #d98b6e;
  --ins-seq-4: #c16646;
  --ins-seq-5: #a0482a;
  --ins-grid: color-mix(in srgb, var(--line) 78%, transparent);
  --ins-up: #2f6b3a;
}

@media screen and (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) :is(.ins, .ins-tip, .hz-insights-cta) {
    --ins-1: #d3754f;
    --ins-2: #548bd0;
    --ins-3: #af8d32;
    --ins-quiet: #5a554e;
    --ins-bar: #6b3d2c;
    --ins-seq-0: color-mix(in srgb, var(--soft) 70%, var(--surface-strong));
    --ins-seq-1: #563326;
    --ins-seq-2: #7f4730;
    --ins-seq-3: #ad5f41;
    --ins-seq-4: #d57e58;
    --ins-seq-5: #f0a782;
    --ins-up: #7fc48b;
  }
}

@media screen {
  :root[data-theme="dark"] :is(.ins, .ins-tip, .hz-insights-cta) {
    --ins-1: #d3754f;
    --ins-2: #548bd0;
    --ins-3: #af8d32;
    --ins-quiet: #5a554e;
    --ins-bar: #6b3d2c;
    --ins-seq-0: color-mix(in srgb, var(--soft) 70%, var(--surface-strong));
    --ins-seq-1: #563326;
    --ins-seq-2: #7f4730;
    --ins-seq-3: #ad5f41;
    --ins-seq-4: #d57e58;
    --ins-seq-5: #f0a782;
    --ins-up: #7fc48b;
  }
}

/* The Stats dialog grows for Insights. */
[data-stats-modal] .modal__panel.is-insights { width: min(100%, 62rem); max-height: min(940px, calc(100dvh - 2rem)); }
[data-stats-modal] .modal__panel.is-insights .modal__scroll { max-height: calc(min(940px, 100dvh - 2rem) - 50px); padding-inline: 1.15rem 1.1rem; }

/* 1.38: with the app fitted to a wide screen it stays inside the window (its own height used to win over the
   fitted one, and a 1920 × 1080 screen cut its top and bottom off), and the scroll fills the panel. */
@media screen and (min-width: 1000px) {
  [data-stats-modal] .modal__panel.is-insights { display: flex; flex-direction: column; }
  [data-stats-modal] .modal__panel.is-insights .modal__scroll { flex: 1 1 auto; min-height: 0; max-height: none; }
  body.app-expanded [data-stats-modal] .modal__panel.is-insights { max-height: min(940px, var(--modal-expanded-max-height, calc(100dvh - 2rem))); }
}

/* Page --------------------------------------------------------------------- */

.ins { display: grid; gap: 22px; padding-bottom: 6px; font-variant-numeric: normal; }
.ins h3,
.ins h4,
.ins h5,
.ins p { margin: 0; }

/* Period controls: one row above everything they scope */
.ins-controls { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; }
.ins-seg { display: inline-grid; grid-auto-flow: column; grid-auto-columns: minmax(84px, auto); gap: 3px; padding: 3px; border: 1px solid var(--line); border-radius: 10px; background: var(--soft); }
.ins-seg button { min-height: 32px; padding: 0 14px; border-radius: 7px; background: transparent; color: var(--muted); font-size: .72rem; font-weight: 630; cursor: pointer; }
.ins-seg button:hover { color: var(--ink); }
.ins-seg button.is-active { background: var(--surface-strong); color: var(--ink); box-shadow: 0 1px 5px rgba(28, 25, 21, .07); }
.ins-seg button:focus-visible { outline: 2px solid color-mix(in srgb, var(--accent) 60%, transparent); outline-offset: 1px; }
.ins-step { display: inline-grid; grid-template-columns: 34px minmax(112px, auto) 34px; align-items: center; gap: 2px; }
.ins-step strong { text-align: center; font-size: .86rem; font-weight: 680; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.ins-step .icon-button svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ins-step .icon-button:disabled { opacity: .35; cursor: default; }
.ins-meta { margin-top: -14px; color: var(--faint); font-size: .66rem; }

/* Findings */
.ins-findings { padding: 16px 18px 17px; border-radius: 14px; background: var(--surface-strong); box-shadow: inset 0 0 0 1px var(--line); }
.ins-findings__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.ins-findings__head h3 { color: var(--faint); font-size: .6rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.ins-findings ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 28px; margin: 0; padding: 0; list-style: none; }
.ins-findings li { display: grid; grid-template-columns: 3px minmax(0, 1fr); gap: 12px; align-items: stretch; }
.ins-findings__mark { border-radius: 3px; background: color-mix(in srgb, var(--ins-1) 70%, var(--surface-strong)); }
.ins-findings p { padding: 2px 0; color: var(--ink); font-size: .9rem; font-weight: 560; line-height: 1.4; letter-spacing: -.008em; text-wrap: pretty; }
.ins-findings.is-thin ul { grid-template-columns: 1fr; }
.ins-findings.is-thin .ins-findings__mark { background: var(--line-strong); }

/* A period with almost nothing yet */
.ins-thin { display: grid; justify-items: center; gap: 8px; padding: 46px 24px 50px; border-radius: 14px; background: var(--surface-strong); box-shadow: inset 0 0 0 1px var(--line); text-align: center; }
.ins-thin__icon { width: 44px; height: 44px; display: grid; place-items: center; margin-bottom: 4px; border-radius: 14px; background: color-mix(in srgb, var(--ins-1) 12%, var(--surface-strong)); color: var(--ins-1); }
.ins-thin__icon svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.ins-thin h3 { max-width: 30rem; font-size: .96rem; font-weight: 680; letter-spacing: -.01em; }
.ins-thin p { max-width: 32rem; color: var(--muted); font-size: .76rem; line-height: 1.5; }

/* Sections and cards */
.ins-section { display: grid; gap: 12px; }
.ins-section__head { display: grid; gap: 2px; padding-top: 4px; }
.ins-section__head h3 { font-size: 1rem; font-weight: 700; letter-spacing: -.015em; }
.ins-section__head p { color: var(--muted); font-size: .72rem; }
.ins-grid { display: grid; gap: 12px; }
.ins-grid--two { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: start; }
.ins-card { min-width: 0; margin: 0; padding: 14px 16px 12px; border-radius: 13px; background: var(--surface-strong); box-shadow: inset 0 0 0 1px var(--line); }
.ins-card__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.ins-card__head h4 { font-size: .8rem; font-weight: 680; letter-spacing: -.005em; }
.ins-card__head p { margin-top: 2px; color: var(--muted); font-size: .68rem; line-height: 1.4; }
.ins-card__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 14px; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--ins-grid); }
.ins-card__foot:has(> .ins-table-toggle:only-child) { justify-content: flex-end; }
.ins-empty { padding: 22px 6px; color: var(--muted); font-size: .76rem; text-align: center; }
.ins-note { margin-top: 10px; color: var(--muted); font-size: .66rem; line-height: 1.45; }

.ins-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; }
.ins-legend__item { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: .64rem; font-weight: 560; }
.ins-key { display: inline-block; flex: 0 0 auto; background: var(--key); }
.ins-key--rect { width: 10px; height: 10px; border-radius: 3px; }
.ins-key--line { width: 14px; height: 2px; border-radius: 2px; }
.ins-table-toggle { min-height: 28px; padding: 0 10px; border-radius: 999px; background: transparent; color: var(--muted); font-size: .66rem; font-weight: 600; cursor: pointer; }
.ins-table-toggle:hover,
.ins-table-toggle:focus-visible { outline: 0; background: var(--soft); color: var(--ink); }
.ins-table { margin-top: 10px; overflow-x: auto; overflow-y: hidden; border-radius: 9px; box-shadow: inset 0 0 0 1px var(--line); }
.ins-table table { width: 100%; border-collapse: collapse; font-size: .66rem; }
.ins-table th,
.ins-table td { padding: 6px 10px; border-bottom: 1px solid var(--ins-grid); text-align: left; white-space: nowrap; }
.ins-table thead th { color: var(--faint); font-weight: 640; }
.ins-table tbody th { font-weight: 600; }
.ins-table .is-num { text-align: right; font-variant-numeric: tabular-nums; }
.ins-table tr:last-child > * { border-bottom: 0; }

/* Marks respond to hover and focus without restyling their whole chart. Marks
   paint one after the other (grid and flex items, or positioned), so the mark
   being read is lifted above its neighbours: its ring shows on all four sides
   instead of passing under the next mark to the right and the row below. Each
   chart is its own stacking context, so the lift stays inside it (the outcomes'
   average line still runs over the bars). */
[data-ins-chart] { isolation: isolate; }
[data-ins-chart] [data-tip] { cursor: default; scroll-margin: 8px; }
[data-ins-chart] [data-tip]:is(.is-hot, :focus-visible) { z-index: 1; }
[data-ins-chart] [data-tip]:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

/* Days that work: two thin bars per weekday, values at the tip */
.ins-week { display: grid; gap: 4px; }
.ins-week__row { display: grid; grid-template-columns: 44px minmax(0, 1fr) 46px; align-items: center; gap: 10px; min-height: 34px; padding: 3px 6px; border-radius: 8px; }
.ins-week__row.is-hot { background: var(--soft); }
.ins-week__day { display: grid; color: var(--ink); font-size: .72rem; font-weight: 640; line-height: 1.1; }
.ins-week__day small { color: var(--faint); font-size: .56rem; font-weight: 560; }
.ins-week__bars { display: grid; gap: 3px; }
.ins-hbar { position: relative; display: block; height: 9px; border-radius: 0 4px 4px 0; background: transparent; }
.ins-hbar::before { content: ""; position: absolute; inset: 0 auto 0 0; width: max(var(--v), 2px); border-radius: 0 4px 4px 0; background: var(--c); }
.ins-week__bars::before { content: none; }
.ins-week__vals { display: grid; justify-items: end; font-variant-numeric: tabular-nums; line-height: 1.15; }
.ins-week__vals b { font-size: .72rem; font-weight: 680; }
.ins-week__vals span { color: var(--muted); font-size: .64rem; }
.ins-week__row.is-rest .ins-week__day { color: var(--muted); }
.ins-week__row.is-rest .ins-hbar::before { opacity: .45; }

/* Heatmap: one cell per weekday-hour; the 2px gap is the surface */
.ins-heat { display: grid; grid-template-columns: 30px repeat(var(--cols), minmax(0, 1fr)); gap: 2px; align-items: center; }
.ins-heat__corner { height: 14px; }
.ins-heat__hour { color: var(--faint); font-size: .56rem; text-align: center; font-variant-numeric: tabular-nums; }
.ins-heat__day { padding-right: 4px; color: var(--muted); font-size: .64rem; font-weight: 600; }
.ins-heat__cell { display: block; height: 24px; border-radius: 4px; background: var(--ins-seq-0); }
.ins-heat__cell.is-l1 { background: var(--ins-seq-1); }
.ins-heat__cell.is-l2 { background: var(--ins-seq-2); }
.ins-heat__cell.is-l3 { background: var(--ins-seq-3); }
.ins-heat__cell.is-l4 { background: var(--ins-seq-4); }
.ins-heat__cell.is-l5 { background: var(--ins-seq-5); }
.ins-heat__cell.is-hot { box-shadow: 0 0 0 2px var(--surface-strong), 0 0 0 3.5px var(--ink); }
.ins-scale { display: inline-flex; align-items: center; gap: 3px; color: var(--muted); font-size: .62rem; }
.ins-scale span:first-child { margin-right: 4px; }
.ins-scale span:last-child { margin-left: 4px; }
.ins-scale .ins-heat__cell { width: 14px; height: 10px; border-radius: 3px; }

/* Hours by category: small multiples on one shared scale */
.ins-time-head { display: grid; grid-template-columns: repeat(2, minmax(0, max-content)); gap: 10px 36px; margin-bottom: 14px; }
.ins-multiples { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.ins-mini { min-width: 0; padding: 11px 12px 9px; border-radius: 10px; background: color-mix(in srgb, var(--soft) 42%, var(--surface-strong)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--line) 70%, transparent); }
.ins-mini__head { display: grid; grid-template-columns: 8px minmax(0, 1fr) auto; align-items: center; gap: 7px; }
.ins-mini__head strong { min-width: 0; overflow: hidden; font-size: .74rem; font-weight: 660; text-overflow: ellipsis; white-space: nowrap; }
.ins-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--cat); }
.ins-mini__total { font-size: .72rem; font-weight: 680; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ins-mini__total small { color: var(--muted); font-size: .64rem; font-weight: 560; }
.ins-mini__trend { min-height: 18px; margin: 3px 0 8px 15px; }
.ins-mini__plot { position: relative; display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 2px; align-items: end; height: 64px; border-top: 1px solid var(--ins-grid); border-bottom: 1px solid var(--line-strong); }
.ins-col { position: relative; display: flex; align-items: flex-end; justify-content: center; height: 100%; border-radius: 3px 3px 0 0; }
.ins-col i { display: block; width: min(100%, 18px); height: var(--v); min-height: 0; border-radius: 3px 3px 0 0; background: var(--cat); }
.ins-col.is-current i { opacity: .55; }
.ins-col.is-hot { background: color-mix(in srgb, var(--ink) 6%, transparent); }
.ins-col.is-future { pointer-events: none; }
.ins-mini__axis { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 2px; margin-top: 4px; color: var(--faint); font-size: .54rem; text-align: center; white-space: nowrap; }
.ins-mini__axis span { min-width: 0; overflow: visible; }

@media screen and (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .ins-col i,
  :root:not([data-theme="light"]) .ins-dot { background: color-mix(in oklab, var(--cat) 70%, var(--ink)); }
}
@media screen {
  :root[data-theme="dark"] .ins-col i,
  :root[data-theme="dark"] .ins-dot { background: color-mix(in oklab, var(--cat) 70%, var(--ink)); }
}

.ins-trend { display: inline-flex; align-items: center; gap: 4px; color: var(--muted); font-size: .66rem; font-weight: 600; white-space: nowrap; }
.ins-trend svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ins-trend--up { color: var(--ins-up); }
.ins-trend--down { color: var(--ink); }
.ins-trend__span { color: var(--faint); font-weight: 500; }
.ins-trend--none { color: var(--faint); font-weight: 500; }

/* Stat figures */
.ins-figures { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.ins-figure { min-width: 0; display: grid; align-content: start; gap: 2px; }
.ins-figures .ins-figure { padding: 12px 14px; border-radius: 12px; background: var(--surface-strong); box-shadow: inset 0 0 0 1px var(--line); }
.ins-card .ins-figures .ins-figure { background: color-mix(in srgb, var(--soft) 42%, var(--surface-strong)); box-shadow: none; }
.ins-figure > span { color: var(--faint); font-size: .58rem; font-weight: 680; letter-spacing: .07em; text-transform: uppercase; }
.ins-figure > strong { display: inline-flex; align-items: baseline; gap: 3px; font-size: 1.3rem; font-weight: 700; letter-spacing: -.03em; line-height: 1.15; }
.ins-figure > strong small { color: var(--muted); font-size: .72rem; font-weight: 600; letter-spacing: 0; }
.ins-figure > small { color: var(--muted); font-size: .66rem; line-height: 1.35; }
.ins-figure__trend .ins-trend { font-size: .82rem; letter-spacing: 0; }
.ins-figure--streak strong svg { width: 18px; height: 18px; align-self: center; fill: color-mix(in srgb, var(--ins-1) 22%, transparent); stroke: var(--ins-1); stroke-width: 1.6; }
.ins-section--outcomes .ins-figures { margin-bottom: 0; }
.ins-card--streaks .ins-figures { margin-bottom: 18px; }

/* Main outcomes per week: bars, a four-week average line, an end label */
.ins-bars { --plot: 150px; display: grid; gap: 6px; padding: 4px 0 0 22px; }
.ins-card--outcomes .ins-note { margin-top: 14px; }
.ins-bars__frame { position: relative; height: var(--plot); }
.ins-grid-line { position: absolute; left: 0; right: 0; bottom: var(--y); height: 0; border-top: 1px solid var(--ins-grid); }
.ins-grid-line:last-of-type { border-top-color: var(--line-strong); }
.ins-grid-line em { position: absolute; right: calc(100% + 6px); top: -7px; color: var(--faint); font-size: .56rem; font-style: normal; font-variant-numeric: tabular-nums; }
.ins-bars__plot { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 2px; align-items: end; }
.ins-bars__col { display: flex; align-items: flex-end; justify-content: center; height: 100%; border-radius: 3px 3px 0 0; }
.ins-bars__col i { display: block; width: min(100%, 22px); height: var(--v); border-radius: 3px 3px 0 0; background: var(--ins-bar); }
.ins-bars__col.is-current i { opacity: .6; }
.ins-bars__col.is-hot { background: color-mix(in srgb, var(--ink) 6%, transparent); }
.ins-bars__col.is-future { pointer-events: none; }
.ins-bars__avg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.ins-bars__avg polyline { fill: none; stroke: var(--ins-line); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.ins-bars__end { position: absolute; width: 9px; height: 9px; margin: 0 0 -4.5px -4.5px; border-radius: 50%; background: var(--ins-line); box-shadow: 0 0 0 2px var(--surface-strong); pointer-events: none; }
.ins-bars__endlabel { position: absolute; margin: 0 0 8px 8px; padding: 1px 5px; border-radius: 5px; background: color-mix(in srgb, var(--surface-strong) 88%, transparent); color: var(--ink); font-size: .64rem; font-weight: 700; font-variant-numeric: tabular-nums; pointer-events: none; }
.ins-bars__endlabel.is-left { margin: 0 0 8px; transform: translateX(calc(-100% - 8px)); }
.ins-bars__axis { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 2px; color: var(--faint); font-size: .56rem; white-space: nowrap; }
.ins-bars__axis span { min-width: 0; overflow: visible; }

/* Unfinished work: one part-to-whole bar, gaps between parts */
.ins-stack { display: flex; gap: 2px; height: 26px; }
.ins-stack__seg { display: grid; place-items: center; min-width: 4px; border-radius: 0; background: var(--c); }
.ins-stack__seg:first-child { border-radius: 4px 0 0 4px; }
.ins-stack__seg:last-child { border-radius: 0 4px 4px 0; }
.ins-stack__seg:only-child { border-radius: 4px; }
.ins-stack__seg em { color: #fff; font-size: .62rem; font-style: normal; font-weight: 700; font-variant-numeric: tabular-nums; }
.ins-stack__seg--forgotten em { color: #1c1a17; }
/* Inside a fill, the label takes whichever ink clears contrast on it: on the dark-mode steps, dark ink. */
@media screen and (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .ins-stack__seg em { color: #1c1a17; }
}
@media screen {
  :root[data-theme="dark"] .ins-stack__seg em { color: #1c1a17; }
}
.ins-stack__seg.is-hot { box-shadow: 0 0 0 2px var(--surface-strong), 0 0 0 3.5px var(--ink); }
.ins-stack__key { display: grid; gap: 6px; margin: 12px 0 0; padding: 0; list-style: none; }
.ins-stack__key li { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto; align-items: center; gap: 8px; font-size: .7rem; }
.ins-stack__key b { font-weight: 660; font-variant-numeric: tabular-nums; }
.ins-moved { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--ins-grid); }
.ins-moved h5 { margin-bottom: 7px; color: var(--faint); font-size: .58rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; }
.ins-moved ul { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.ins-moved li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 8px; font-size: .72rem; }
.ins-moved li span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ins-moved li b { padding: 1px 7px; border-radius: 999px; background: var(--soft); color: var(--muted); font-size: .62rem; font-weight: 680; font-variant-numeric: tabular-nums; }
.ins-moved li small { color: var(--faint); font-size: .6rem; }

.ins-section:has(.ins-card--outcomes) .ins-grid { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); align-items: start; }

/* Streaks: runs along the period, the longest in the accent */
.ins-runs { display: grid; gap: 6px; }
.ins-runs__track { position: relative; height: 26px; border-radius: 6px; background: var(--ins-seq-0); }
.ins-run { position: absolute; top: 6px; height: 14px; min-width: 3px; border-radius: 4px; background: var(--ins-quiet); }
.ins-run.is-longest { background: var(--ins-1); }
.ins-run.is-hot { box-shadow: 0 0 0 2px var(--surface-strong), 0 0 0 3.5px var(--ink); }
.ins-runs__today { position: absolute; top: 2px; bottom: 2px; width: 0; border-left: 1px solid var(--line-strong); }
.ins-runs__axis { position: relative; height: 14px; color: var(--faint); font-size: .56rem; }
.ins-runs__axis span { position: absolute; top: 0; white-space: nowrap; }

/* Year over year: each measure as a figure with its two bars */
.ins-pairs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.ins-pair { min-width: 0; display: grid; gap: 3px; padding: 12px 14px; border-radius: 10px; background: color-mix(in srgb, var(--soft) 42%, var(--surface-strong)); }
.ins-pair__label { color: var(--faint); font-size: .58rem; font-weight: 680; letter-spacing: .07em; text-transform: uppercase; }
.ins-pair > strong { font-size: 1.3rem; font-weight: 700; letter-spacing: -.03em; line-height: 1.15; }
.ins-delta { display: inline-flex; align-items: center; gap: 4px; color: var(--muted); font-size: .66rem; font-weight: 600; }
.ins-delta svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ins-delta.is-up { color: var(--ins-up); }
.ins-pair__bars { display: grid; gap: 4px; margin-top: 8px; }
.ins-pair__row { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 2px 4px; margin: 0 -4px; border-radius: 6px; }
.ins-pair__row.is-hot { background: var(--soft); }
.ins-pair__row em { color: var(--muted); font-size: .62rem; font-style: normal; font-variant-numeric: tabular-nums; }
.ins-pair__row b { min-width: 3.4em; color: var(--muted); font-size: .64rem; font-weight: 620; text-align: right; font-variant-numeric: tabular-nums; }

/* About */
.ins-about { padding: 2px 2px 0; border-top: 1px solid var(--line); }
.ins-about summary { display: inline-flex; align-items: center; min-height: 34px; color: var(--muted); font-size: .72rem; font-weight: 620; cursor: pointer; }
.ins-about summary:hover { color: var(--ink); }
.ins-about > div { display: grid; gap: 8px; max-width: 46rem; padding: 2px 0 6px; color: var(--muted); font-size: .7rem; line-height: 1.5; }
.ins-about strong { color: var(--ink); font-weight: 640; }
.ins-about__private { display: flex; align-items: center; gap: 8px; color: var(--ink); }
.ins-about__private svg { width: 16px; height: 16px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.6; }

/* Tooltip: value first, the series second, keyed by a short stroke */
.ins-tip {
  position: fixed;
  z-index: calc(var(--z-popover) + 10);
  display: grid;
  gap: 4px;
  /* --ins-tip-room: the width of the visible area it must stay in (set by insights.js). */
  min-width: min(140px, var(--ins-tip-room, 140px));
  max-width: min(250px, calc(100vw - 16px), var(--ins-tip-room, 100vw));
  padding: 8px 10px 9px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--surface-strong);
  color: var(--ink);
  box-shadow: 0 10px 26px rgba(25, 22, 17, .13);
  pointer-events: none;
}
.ins-tip[hidden] { display: none; }
.ins-tip__title { color: var(--muted); font-size: .62rem; font-weight: 600; }
.ins-tip__row { display: grid; grid-template-columns: 12px auto minmax(0, 1fr); align-items: baseline; gap: 6px; }
.ins-tip__row i { width: 12px; height: 2.5px; align-self: center; border-radius: 2px; }
.ins-tip__row strong { font-size: .8rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.ins-tip__row small { min-width: 0; color: var(--muted); font-size: .64rem; line-height: 1.3; }

/* Horizon → Progress entry */
.hz-insights-cta .hz-review-cta__icon { color: var(--ins-1); background: color-mix(in srgb, var(--ins-1) 13%, var(--surface-strong)); }
.hz-insights-cta .hz-review-cta__go svg,
.hz-insights-cta .hz-review-cta__icon svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* Phones and narrow dialogs */
@media (max-width: 860px) {
  .ins-grid--two,
  .ins-section:has(.ins-card--outcomes) .ins-grid { grid-template-columns: minmax(0, 1fr); }
  .ins-multiples { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 620px) {
  [data-stats-modal] .modal__panel.is-insights .modal__scroll { padding-inline: .8rem .75rem; }
  .ins { gap: 18px; }
  .ins-controls { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: stretch; }
  .ins-seg { grid-auto-columns: minmax(0, 1fr); }
  .ins-step { justify-content: space-between; grid-template-columns: 34px minmax(0, 1fr) 34px; }
  .ins-meta { margin-top: -10px; text-align: center; }
  .ins-findings { padding: 14px 14px 15px; }
  .ins-findings ul { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .ins-findings p { font-size: .84rem; }
  .ins-card { padding: 12px 12px 10px; }
  .ins-figures,
  .ins-pairs { grid-template-columns: minmax(0, 1fr); }
  /* Figures become rows: what it is on the left, the number on the right. */
  .ins-figures { gap: 6px; }
  .ins-figures .ins-figure { grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 12px; padding: 10px 12px; }
  .ins-figures .ins-figure > span { grid-column: 1; }
  .ins-figures .ins-figure > small { grid-column: 1; }
  .ins-figures .ins-figure > strong { grid-column: 2; grid-row: 1 / span 2; justify-self: end; font-size: 1.15rem; }
  .ins-multiples { gap: 8px; }
  .ins-mini { padding: 10px 10px 8px; }
  .ins-mini__head { grid-template-columns: 8px minmax(0, 1fr); }
  .ins-mini__total { grid-column: 2; }
  .ins-mini__trend { margin-left: 15px; }
  .ins-trend__span { display: none; }
  .ins-heat { grid-template-columns: 28px repeat(var(--cols), minmax(0, 1fr)); gap: 1.5px; }
  .ins-heat__cell { height: 20px; border-radius: 3px; }
  .ins-heat__hour.is-odd { visibility: hidden; }
  .ins-bars { --plot: 128px; padding-left: 18px; }
  .ins-time-head { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 16px; }
  .ins-card__foot { gap: 8px; }
}

@media print {
  .ins-tip { display: none; }
}


/* styles/workspace.css */
/* Optional Enterprise workspace shell. Hidden unless the cloud profile exposes organizations. */

.workspace-switcher__trigger {
  min-height: 32px;
  max-width: 150px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 8px 5px 10px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--surface);
  color: var(--muted);
  cursor: pointer;
  font-size: .66rem;
  font-weight: 650;
}

.workspace-switcher__trigger:hover,
.workspace-switcher__trigger:focus-visible {
  outline: 0;
  border-color: var(--line-strong);
  background: var(--surface-strong);
  color: var(--ink);
}

.workspace-switcher__trigger span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.workspace-switcher__trigger svg {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.workspace-menu { min-width: 190px; }
.workspace-menu button { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.workspace-menu button[aria-current="true"] { background: var(--soft); color: var(--ink); }
.workspace-menu small { color: var(--faint); font-size: .56rem; font-weight: 650; text-transform: uppercase; letter-spacing: .055em; }

.enterprise-workspace-shell {
  grid-column: 1 / -1;
  min-height: 0;
  display: grid;
  place-items: center;
  padding: clamp(24px, 7vw, 80px);
}

.enterprise-workspace-shell__inner {
  width: min(520px, 100%);
  padding: clamp(22px, 4vw, 34px);
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
  text-align: left;
}

.enterprise-workspace-shell__inner h2 { margin: 0; font-size: 1.18rem; letter-spacing: -.03em; }
.enterprise-workspace-shell__inner p:last-child { margin: 10px 0 0; color: var(--muted); font-size: .76rem; line-height: 1.55; }

.workspace[data-workspace-mode="enterprise"] > .left,
.workspace[data-workspace-mode="enterprise"] > .schedule-section { display: none; }
.workspace[data-workspace-mode="enterprise"] > .enterprise-workspace-shell { display: grid; }

.mobile-workspace {
  display: grid;
  gap: 3px;
  margin-bottom: 4px;
  padding: 3px 4px 7px;
  border-bottom: 1px solid var(--line);
}

.mobile-workspace > span {
  padding: 2px 5px;
  color: var(--faint);
  font-size: .54rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .065em;
}

.mobile-workspace > button { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.mobile-workspace > button strong { font-size: .7rem; font-weight: 650; }
.mobile-workspace-options { display: grid; gap: 2px; }
.mobile-workspace-options button[aria-current="true"] { background: var(--soft); color: var(--ink); }

@media (max-width: 790px) {
  .workspace:not(.is-week-view):not([data-workspace-mode="enterprise"]) { touch-action: pan-y; }
  .workspace-switcher { display: none; }
  .workspace[data-workspace-mode="enterprise"] { height: 100%; }
  .workspace[data-workspace-mode="enterprise"] > .enterprise-workspace-shell { height: 100%; padding: 22px 10px; }
}


/* styles/guides.css */
/* Guided dialogs ------------------------------------------------------------
   Onboarding, install, sync guide and feedback share one language: a calm
   illustration that replicates the planner (or the browser) on one side, and
   short copy with one primary action on the other. Illustrations loop with CSS
   keyframes whose last frame is the "done" state, so reduced motion still shows
   the outcome. */

/* Onboarding ---------------------------------------------------------------- */

.modal--onboarding .modal__panel.ob-panel {
  width: min(940px, 100%);
  height: min(600px, calc(100dvh - 2rem));
  max-height: none;
  display: grid;
  grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
  padding: 0;
  overflow: hidden;
  border-radius: 20px;
}

/* Focusable so Enter can advance after a click on plain text; no ring for that. */
.modal--onboarding .ob-panel:focus { outline: 0; }

.ob-visual {
  position: relative;
  min-height: 0;
  display: grid;
  place-items: center;
  padding: 34px;
  overflow: hidden;
  border-right: 1px solid var(--line);
  background:
    radial-gradient(110% 80% at 15% 0%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 60%),
    radial-gradient(90% 70% at 100% 100%, color-mix(in srgb, var(--hz-adventure) 12%, transparent), transparent 60%),
    var(--soft);
}

.ob-scene { display: none; width: 100%; max-width: 390px; }

.ob-panel[data-step="1"] .ob-scene--1,
.ob-panel[data-step="2"] .ob-scene--2,
.ob-panel[data-step="3"] .ob-scene--3,
.ob-panel[data-step="4"] .ob-scene--4 { display: block; }

.ob-visual__caption { margin: 14px 0 0; color: var(--muted); font-size: .76rem; text-align: center; }

.ob-content { min-height: 0; display: grid; grid-template-rows: auto minmax(0, 1fr); overflow-x: hidden; overflow-y: auto; container-type: inline-size; }

.onboarding-progress { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; padding: 24px 38px 0; }

.onboarding-progress span { height: 3px; border-radius: 999px; background: var(--line); transition: background-color 220ms ease; }

.onboarding-progress span.is-complete { background: color-mix(in srgb, var(--accent) 55%, var(--line)); }

.onboarding-progress span.is-active { background: var(--accent); }

.onboarding-step { min-height: 0; display: flex; flex-direction: column; gap: 16px; padding: 26px 38px 30px; }

.onboarding-step > h2 { margin: 0; font-size: clamp(1.4rem, 2.5vw, 1.85rem); line-height: 1.1; letter-spacing: -.038em; text-wrap: balance; }

.onboarding-step > p:not(.modal__eyebrow) { margin: 0; color: var(--muted); font-size: .9rem; line-height: 1.6; text-wrap: pretty; }

.onboarding-step > p a { color: var(--ink); font-weight: 600; text-decoration-color: color-mix(in srgb, var(--accent) 65%, transparent); text-underline-offset: 3px; }

.onboarding-step .modal__eyebrow { margin: 0; color: var(--accent); }

.onboarding-personal {
  padding: 14px 16px;
  border-left: 3px solid var(--accent);
  border-radius: 0 12px 12px 0;
  background: color-mix(in srgb, var(--accent) 7%, var(--surface-strong));
  font-style: italic;
}

.ob-promises { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }

.ob-promises li { display: grid; align-content: start; gap: 3px; padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-strong); }

.ob-promises strong { font-size: .8rem; font-weight: 680; }

.ob-promise__text { color: var(--muted); font-size: .72rem; line-height: 1.45; }

/* Same soft tile as Settings → Your devices, a size smaller. */
.ob-promise__icon { width: 32px; height: 32px; display: grid; place-items: center; margin-bottom: 7px; border-radius: 10px; background: color-mix(in srgb, var(--accent) 12%, var(--surface-strong)); color: var(--accent); }

.ob-promise__icon svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

.ob-actions { margin-top: auto; padding-top: 10px; display: flex; align-items: center; justify-content: space-between; gap: 10px; }

.ob-actions__right { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }

.onboarding-primary { min-height: 44px; padding-inline: 22px; }

.ob-actions .secondary-button { min-height: 44px; padding-inline: 16px; }

.onboarding-field { display: grid; gap: 8px; }

.onboarding-field > span { color: var(--muted); font-size: .74rem; font-weight: 650; }

.onboarding-field > small { color: var(--faint); font-size: .7rem; }

.onboarding-hours { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 8px; }

.onboarding-hours > span { color: var(--faint); }

.onboarding-hours .select-trigger { position: relative; justify-content: center; text-align: center; }

.onboarding-hours .select-trigger__value { width: 100%; justify-content: center; }

.onboarding-hours .select-trigger .select-chevron { position: absolute; right: 9px; }

.ob-loop-list { display: grid; margin: 0; padding: 0; list-style: none; counter-reset: loop; }

.ob-loop-list li {
  counter-increment: loop;
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  column-gap: 14px;
  row-gap: 2px;
  padding: 11px 0;
  border-top: 1px solid color-mix(in srgb, var(--line) 75%, transparent);
}

.ob-loop-list li:first-child { border-top: 0; padding-top: 2px; }

.ob-loop-list li::before { content: counter(loop); grid-row: span 2; width: 22px; height: 22px; margin-top: 1px; display: grid; place-items: center; border-radius: 999px; background: var(--ink); color: var(--paper); font-size: .66rem; font-weight: 750; }

.ob-loop-list b { font-size: .9rem; font-weight: 680; letter-spacing: -.01em; }

.ob-loop-list span { color: var(--muted); font-size: .8rem; line-height: 1.5; }

.theme-switch--compact button { min-height: 38px; }

/* Setup asks Light or Dark; the system's own is chosen until one is picked. */
.theme-switch.theme-switch--pair { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.ob-actions .icon-text-button { gap: 7px; }

.ob-actions .icon-text-button svg { width: 17px; height: 17px; flex: 0 0 auto; }

.ob-back { min-height: 44px; margin-left: -8px; padding: 0 14px 0 8px; }

/* The last step, when its column is narrow: Back and Install share a row, Start planning takes the width below. */
@container (max-width: 440px) {
  [data-onboarding-step="4"] .ob-actions { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px; }
  [data-onboarding-step="4"] .ob-actions__right { display: contents; }
  [data-onboarding-step="4"] .ob-actions__right .secondary-button { justify-self: end; }
  [data-onboarding-step="4"] .ob-actions__right .primary-button { grid-column: 1 / -1; width: 100%; }
}

/* Scene 1: the planner itself */

.ob-app { border: 1px solid var(--line-strong); border-radius: 14px; background: var(--surface-strong); box-shadow: 0 24px 60px rgba(25, 22, 17, .14); overflow: hidden; }

.ob-app__bar { height: 26px; display: flex; align-items: center; gap: 5px; padding: 0 10px; border-bottom: 1px solid var(--line); background: var(--surface); }

.ob-app__bar i { width: 7px; height: 7px; border-radius: 999px; background: var(--line-strong); }

.ob-app__bar span { margin-left: 8px; color: var(--muted); font-size: .62rem; font-weight: 650; }

.ob-app__body { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 12px; }

.ob-app__plan { display: grid; align-content: start; gap: 5px; }

.ob-app__plan small { margin-top: 4px; color: var(--faint); font-size: .5rem; font-weight: 720; letter-spacing: .06em; text-transform: uppercase; }

.ob-app__plan p { margin: 0; padding-bottom: 4px; border-bottom: 1px solid var(--line); font-size: .66rem; }

.ob-item { display: flex; align-items: center; gap: 6px; padding: 6px 7px; border: 1px solid var(--line); border-radius: 7px; font-size: .62rem; }

.ob-item span { width: 10px; height: 10px; flex: 0 0 auto; border: 1px solid var(--line-strong); border-radius: 3px; }

.ob-item--mit { background: color-mix(in srgb, var(--soft) 70%, var(--surface-strong)); }

.ob-item--mit span { animation: ob-check 6s ease infinite both; }

.ob-item--mit b { font-weight: 680; }

.ob-app__day { position: relative; min-height: 150px; border-left: 1px solid var(--line); }

.ob-hour { position: absolute; left: 0; right: 0; top: calc(var(--y) * 25% + 8px); border-top: 1px solid var(--hour-line); }

.ob-block { position: absolute; left: 6px; right: 4px; padding: 4px 6px; overflow: hidden; border-radius: 5px; font-size: .55rem; font-weight: 650; white-space: nowrap; text-overflow: ellipsis; box-shadow: inset 2px 0 0 var(--c); background: color-mix(in srgb, var(--c) 14%, var(--surface)); animation: ob-drop 6s cubic-bezier(.22, 1, .36, 1) infinite both; }

.ob-block--1 { --c: #5f7084; top: 10px; height: 52px; }
.ob-block--2 { --c: #5f755b; top: 74px; height: 22px; animation-delay: .35s; }
.ob-block--3 { --c: #746e67; top: 106px; height: 26px; animation-delay: .7s; }

@keyframes ob-drop {
  0% { opacity: 0; transform: translateX(14px); }
  12%, 100% { opacity: 1; transform: none; }
}

@keyframes ob-check {
  0%, 55% { background: transparent; border-color: var(--line-strong); }
  62%, 100% { background: var(--ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m6.5 12.5 3.3 3.3 7.7-8' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 9px no-repeat; border-color: var(--ink); }
}

/* Scene 2: the planning week mirrors the chosen days and hours. The ruler is
   built by onboarding.js; sample blocks sit at real times, so a later start
   clips the morning block and an earlier end lets the evening one fade out. */

.ob-week { display: grid; grid-template-columns: 36px repeat(7, minmax(0, 1fr)); gap: 6px; height: 244px; }

.ob-week__ruler,
.ob-week__col { min-height: 0; display: grid; grid-template-rows: 14px minmax(0, 1fr); gap: 7px; padding: 8px 5px 10px; border: 1px solid transparent; border-radius: 10px; }

.ob-week__ruler { padding-inline: 0; }

.ob-week__col { border: 1px dashed var(--line-strong); color: var(--faint); transition: background-color 220ms ease, border-color 220ms ease, color 220ms ease, box-shadow 220ms ease; }

.ob-week__col > b { font-size: .62rem; font-weight: 720; line-height: 14px; text-align: center; }

.ob-week__track { position: relative; min-height: 0; }

.ob-week__col .ob-week__track { overflow: hidden; border-radius: 3px; }

.ob-week__col.is-on { border-style: solid; border-color: var(--line); background: var(--surface-strong); color: var(--ink); box-shadow: 0 10px 24px rgba(25, 22, 17, .08); }

/* The visible range: its edges in every planning day, round hours between. */
.ob-week__col.is-on .ob-week__track { box-shadow: inset 0 1px 0 var(--line-strong), inset 0 -1px 0 var(--line-strong); }

.ob-week__line { position: absolute; left: 0; right: 0; height: 1px; background: var(--line); transition: background-color 220ms ease; }

.ob-week__col:not(.is-on) .ob-week__line { background: transparent; }

.ob-week__mark { position: absolute; left: 0; right: 0; height: 12px; margin-top: -6px; display: flex; align-items: center; justify-content: flex-end; gap: 3px; color: var(--faint); font-size: .54rem; font-weight: 620; font-variant-numeric: tabular-nums; white-space: nowrap; }

.ob-week__mark em { font-style: normal; }

.ob-week__mark::after { content: ""; width: 4px; height: 1px; flex: 0 0 auto; background: var(--line-strong); }

.ob-week__mark.is-edge { color: var(--ink); font-weight: 740; }

.ob-week__mark.is-edge::after { width: 6px; height: 1.5px; background: var(--accent); }

.ob-week__block { position: absolute; left: 0; right: 0; min-height: 3px; border-radius: 4px; background: transparent; transition: background-color 220ms ease, box-shadow 220ms ease; }

.ob-week__block.is-outside { opacity: 0; }

.ob-week__col.is-on .ob-week__block--deep { background: color-mix(in srgb, var(--accent) 22%, var(--surface)); box-shadow: inset 2px 0 0 var(--accent); }

.ob-week__col.is-on .ob-week__block--short { background: color-mix(in srgb, var(--hz-adventure) 20%, var(--surface)); box-shadow: inset 2px 0 0 var(--hz-adventure); }

.ob-week__col.is-on .ob-week__block--late { background: color-mix(in srgb, var(--hz-keydate) 20%, var(--surface)); box-shadow: inset 2px 0 0 var(--hz-keydate); }

/* Scene 3: the daily loop, drawn like the yearly ritual on the landing page:
   numbered cards (an illustration, not buttons), arrows between them and a
   dashed line back to the start. The cards come in one by one and the line
   draws itself once; with reduced motion it is simply there. */

.ob-ritual { --reserve: 104px; --card-h: 66px; --gap: 26px; position: relative; }

.ob-ritual__steps { width: calc(100% - var(--reserve)); display: grid; gap: var(--gap); margin: 0; padding: 0; list-style: none; }

.ob-ritual__step { position: relative; height: var(--card-h); display: grid; grid-template-columns: 40px minmax(0, 1fr); align-items: center; gap: 12px; padding: 0 14px 0 12px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface-strong); }

.ob-ritual__icon { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 12px; background: color-mix(in srgb, var(--accent) 12%, var(--surface-strong)); color: var(--accent); }

.ob-ritual__icon svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

.ob-ritual__icon .icon-fill { fill: currentColor; stroke: none; }

.ob-ritual__text { min-width: 0; display: grid; gap: 2px; }

.ob-ritual__text b { display: flex; align-items: center; gap: 7px; overflow: hidden; font-size: .88rem; font-weight: 700; letter-spacing: -.016em; white-space: nowrap; }

.ob-ritual__n { width: 18px; height: 18px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 999px; background: var(--ink); color: var(--paper); font-size: .62rem; font-weight: 750; letter-spacing: 0; }

.ob-ritual__text small { overflow: hidden; color: var(--muted); font-size: .74rem; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }

/* Between two cards, an arrow under the icons (across them on phones). */
.ob-ritual__step:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 24px;
  top: 100%;
  width: 18px;
  height: var(--gap);
  background: var(--line-strong);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 26'%3E%3Cpath d='M9 5.5v14M4.5 15 9 19.5l4.5-4.5' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 18px 26px no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 26'%3E%3Cpath d='M9 5.5v14M4.5 15 9 19.5l4.5-4.5' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 18px 26px no-repeat;
}

/* Back to the start: beside the cards here, under them on phones. */
.ob-ritual__loop { position: absolute; overflow: visible; fill: none; stroke-linecap: round; stroke-linejoin: round; }

.ob-ritual__loop--side { left: calc(100% - var(--reserve)); top: calc(var(--card-h) / 2 - 1px); width: 56px; height: calc(3 * (var(--card-h) + var(--gap)) + 2px); }

.ob-ritual__loop--under { display: none; }

.ob-ritual__line { stroke: color-mix(in srgb, var(--accent) 50%, var(--line-strong)); stroke-width: 1.5; stroke-dasharray: 4 4; }

.ob-ritual__head { stroke: color-mix(in srgb, var(--accent) 80%, var(--line-strong)); stroke-width: 1.5; }

/* The mask that reveals the dashed line along its own path. */
.ob-ritual__draw { fill: none; stroke: #fff; stroke-width: 8; stroke-dasharray: 1; stroke-dashoffset: 0; }

.ob-ritual__every { position: absolute; left: calc(100% - var(--reserve) + 54px); top: calc(var(--card-h) / 2 + 1.5 * (var(--card-h) + var(--gap))); display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px 5px 9px; border-radius: 999px; background: color-mix(in srgb, var(--accent) 10%, var(--surface-strong)); color: var(--accent); font-size: .74rem; font-weight: 680; white-space: nowrap; transform: translate(-50%, -50%); }

.ob-ritual__every svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

@media (prefers-reduced-motion: no-preference) {
  .ob-ritual__step { animation: ob-rise 520ms cubic-bezier(.22, 1, .36, 1) both; }
  .ob-ritual__step:nth-child(2) { animation-delay: 150ms; }
  .ob-ritual__step:nth-child(3) { animation-delay: 300ms; }
  .ob-ritual__step:nth-child(4) { animation-delay: 450ms; }
  .ob-ritual__step:not(:last-child)::after { animation: ob-fade 320ms ease 260ms both; }
  .ob-ritual__step:nth-child(2)::after { animation-delay: 410ms; }
  .ob-ritual__step:nth-child(3)::after { animation-delay: 560ms; }
  .ob-ritual__draw { stroke-dashoffset: 1; animation: ob-draw 1000ms cubic-bezier(.65, 0, .35, 1) 760ms forwards; }
  .ob-ritual__every { animation: ob-pop 460ms cubic-bezier(.34, 1.56, .64, 1) 1150ms both; }
  .ob-ritual__head { animation: ob-fade 220ms ease 1700ms both; }
}

@keyframes ob-rise { from { opacity: 0; transform: translateY(8px); } }

@keyframes ob-fade { from { opacity: 0; } }

@keyframes ob-draw { to { stroke-dashoffset: 0; } }

@keyframes ob-pop { from { opacity: 0; transform: translate(-50%, -50%) scale(.86); } }

/* Scene 4: the year, painted */

.ob-year { display: grid; gap: 18px; }

.ob-year__ribbon { position: relative; height: 34px; border-radius: 10px; background: var(--surface-strong); box-shadow: inset 0 0 0 1px var(--line); }

.ob-year__band { position: absolute; left: 58%; top: 11px; width: 9%; height: 12px; border-radius: 999px; background: var(--hz-misogi); }

.ob-year__dot { position: absolute; top: 11px; width: 12px; height: 12px; border-radius: 999px; }
.ob-year__dot--1 { left: 22%; background: var(--hz-adventure); }
.ob-year__dot--2 { left: 41%; background: var(--hz-milestone); border-radius: 2px; transform: rotate(45deg) scale(.85); }
.ob-year__dot--3 { left: 84%; background: var(--hz-keydate); }

.ob-year__paint { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }

.ob-year__paint i { aspect-ratio: 1; border-radius: 6px; background: var(--surface-strong); box-shadow: inset 0 0 0 1px var(--line); animation: ob-paint 8s ease infinite both; }

.ob-year__paint i:nth-child(7n + 6),
.ob-year__paint i:nth-child(7n) { animation-name: none; box-shadow: none; background: color-mix(in srgb, var(--line) 35%, transparent); }

.ob-year__paint i:nth-child(3n + 1) { --paint-to: color-mix(in srgb, var(--hz-misogi) 100%, transparent); }
.ob-year__paint i:nth-child(3n + 2) { --paint-to: color-mix(in srgb, var(--hz-misogi) 62%, var(--surface)); }
.ob-year__paint i:nth-child(3n) { --paint-to: color-mix(in srgb, var(--hz-misogi) 36%, var(--surface)); }

.ob-year__paint i:nth-child(1) { animation-delay: .1s; } .ob-year__paint i:nth-child(2) { animation-delay: .25s; } .ob-year__paint i:nth-child(3) { animation-delay: .4s; } .ob-year__paint i:nth-child(4) { animation-delay: .55s; } .ob-year__paint i:nth-child(5) { animation-delay: .7s; }
.ob-year__paint i:nth-child(8) { animation-delay: .85s; } .ob-year__paint i:nth-child(9) { animation-delay: 1s; } .ob-year__paint i:nth-child(10) { animation-delay: 1.15s; } .ob-year__paint i:nth-child(11) { animation-delay: 1.3s; } .ob-year__paint i:nth-child(12) { animation-delay: 1.45s; }
.ob-year__paint i:nth-child(15) { animation-delay: 1.6s; } .ob-year__paint i:nth-child(16) { animation-delay: 1.75s; } .ob-year__paint i:nth-child(17) { animation-delay: 1.9s; } .ob-year__paint i:nth-child(18) { animation-delay: 2.05s; } .ob-year__paint i:nth-child(19) { animation-delay: 2.2s; }
.ob-year__paint i:nth-child(22) { animation-delay: 2.35s; } .ob-year__paint i:nth-child(23) { animation-delay: 2.5s; } .ob-year__paint i:nth-child(24) { animation-delay: 2.65s; } .ob-year__paint i:nth-child(25) { animation-delay: 2.8s; } .ob-year__paint i:nth-child(26) { animation-delay: 2.95s; }

@keyframes ob-paint {
  0%, 4% { background: var(--surface-strong); transform: scale(.7); }
  9%, 100% { background: var(--paint-to, var(--hz-misogi)); transform: none; box-shadow: none; }
}

/* Install --------------------------------------------------------------------- */

.modal--install .modal__panel { width: min(600px, 100%); }

.install-guide { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 20px; margin: 2px 0 18px; }

.install-replica { position: relative; min-height: 236px; display: grid; place-items: center; overflow: hidden; border-radius: 16px; background: radial-gradient(100% 80% at 20% 0%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 70%), var(--soft); }

.modal--install .modal__header + .install-replica { margin-bottom: 16px; }

.install-app-tile { width: 40px; height: 40px; display: inline-grid; place-items: center; overflow: hidden; border-radius: 10px; box-shadow: 0 4px 12px rgba(25, 22, 17, .18); }

.install-app-tile img { width: 100%; height: 100%; display: block; }

.install-steps { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }

.install-steps li { display: grid; grid-template-columns: 26px minmax(0, 1fr); align-items: start; gap: 10px; padding: 9px 10px; border-radius: 12px; color: var(--muted); transition: background-color 200ms ease, color 200ms ease; }

.install-steps li > span { width: 26px; height: 26px; display: grid; place-items: center; border-radius: 999px; background: var(--soft); font-size: .74rem; font-weight: 720; }

.install-steps li p { margin: 3px 0 0; font-size: .82rem; line-height: 1.45; }

.install-steps li.is-active { background: color-mix(in srgb, var(--accent) 9%, transparent); color: var(--ink); }

.install-steps li.is-active > span { background: var(--accent); color: var(--paper); }

.install-benefits { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0 0 16px; padding: 0; list-style: none; }

.install-benefits li { display: grid; gap: 2px; padding: 10px 11px; border: 1px solid var(--line); border-radius: 12px; }

.install-benefits strong { font-size: .76rem; font-weight: 680; }

.install-benefits span { color: var(--muted); font-size: .7rem; line-height: 1.4; }

.install-note { margin: 0 0 16px; padding: 12px 14px; border-radius: 12px; background: color-mix(in srgb, var(--hz-keydate) 8%, var(--surface-strong)); color: var(--muted); font-size: .8rem; line-height: 1.55; }

.install-note b { color: var(--ink); }

/* iPhone / iPad replica */

.install-phone { width: 150px; height: 236px; margin-top: 18px; padding: 6px; border: 2px solid color-mix(in srgb, var(--ink) 70%, transparent); border-bottom: 0; border-radius: 26px 26px 0 0; background: var(--surface-strong); }

.install-phone__screen { position: relative; height: 100%; overflow: hidden; border-radius: 20px 20px 0 0; background: var(--surface); }

.install-ios-page { display: grid; gap: 7px; padding: 30px 12px; }

.install-ios-page span { height: 9px; border-radius: 4px; background: var(--soft); }

.install-ios-page span:first-child { width: 70%; height: 13px; background: color-mix(in srgb, var(--ink) 14%, transparent); }

.install-ios-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 36px; display: flex; align-items: center; justify-content: space-around; border-top: 1px solid var(--line); background: var(--surface-strong); }

.install-ios-bar span { width: 12px; height: 12px; border-radius: 3px; background: var(--line); }

.install-ios-bar .install-ios-bar__share { width: 18px; height: 18px; background: none; color: #1a73e8; animation: install-pulse 6.6s ease infinite both; }

.install-ios-bar__share svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.install-ios-sheet { position: absolute; left: 4px; right: 4px; bottom: 0; z-index: 2; display: grid; gap: 1px; padding: 8px 6px; border-radius: 14px 14px 0 0; background: var(--surface-strong); box-shadow: 0 -10px 30px rgba(25, 22, 17, .16); animation: install-sheet 6.6s cubic-bezier(.22, 1, .36, 1) infinite both; }

.install-ios-sheet__head { display: flex; align-items: center; gap: 7px; margin-bottom: 4px; padding-bottom: 6px; border-bottom: 1px solid var(--line); }

.install-ios-sheet__head .install-app-tile { width: 24px; height: 24px; border-radius: 6px; }

.install-ios-sheet__head b { display: block; font-size: .56rem; }

.install-ios-sheet__head small { color: var(--faint); font-size: .48rem; }

.install-ios-sheet__row { display: flex; align-items: center; justify-content: space-between; padding: 7px 6px; border-radius: 7px; font-size: .56rem; }

.install-ios-sheet__row svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.7; }

.install-ios-sheet__row--target { animation: install-row 6.6s ease infinite both; }

.install-ios-confirm { position: absolute; left: 0; right: 0; top: 0; z-index: 3; display: flex; align-items: center; justify-content: space-between; height: 34px; padding: 0 9px; border-bottom: 1px solid var(--line); background: var(--surface-strong); font-size: .52rem; animation: install-confirm 6.6s ease infinite both; }

.install-ios-confirm span { color: #1a73e8; }

.install-ios-confirm strong { color: #1a73e8; font-weight: 750; }

.install-ios-home { position: absolute; inset: 0; z-index: 4; display: grid; grid-template-columns: repeat(4, 1fr); align-content: start; gap: 10px; padding: 26px 10px; background: linear-gradient(160deg, color-mix(in srgb, var(--hz-adventure) 45%, var(--surface)), color-mix(in srgb, var(--hz-keydate) 45%, var(--surface))); animation: install-home 6.6s ease infinite both; }

.install-ios-home span { aspect-ratio: 1; border-radius: 8px; background: color-mix(in srgb, var(--surface-strong) 55%, transparent); }

.install-ios-home .install-app-tile { width: 100%; height: auto; aspect-ratio: 1; border-radius: 8px; animation: install-pop 6.6s cubic-bezier(.34, 1.56, .64, 1) infinite both; }

.install-finger { position: absolute; z-index: 6; left: 50%; bottom: 10px; width: 22px; height: 22px; margin-left: -11px; border-radius: 999px; background: color-mix(in srgb, var(--ink) 22%, transparent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--surface-strong) 70%, transparent); animation: install-finger 6.6s cubic-bezier(.22, 1, .36, 1) infinite both; }

@keyframes install-pulse { 0%, 10% { transform: scale(1); } 16% { transform: scale(1.35); } 24%, 100% { transform: scale(1); } }
@keyframes install-sheet { 0%, 26% { transform: translateY(105%); } 34%, 70% { transform: none; } 76%, 100% { transform: translateY(105%); } }
@keyframes install-row { 0%, 50% { background: transparent; } 56%, 66% { background: color-mix(in srgb, #1a73e8 14%, transparent); } 72%, 100% { background: transparent; } }
@keyframes install-confirm { 0%, 66% { transform: translateY(-110%); } 70%, 84% { transform: none; } 88%, 100% { transform: translateY(-110%); } }
@keyframes install-home { 0%, 86% { opacity: 0; } 90%, 100% { opacity: 1; } }
@keyframes install-pop { 0%, 88% { transform: scale(.3); opacity: 0; } 94% { transform: scale(1.1); opacity: 1; } 100% { transform: none; opacity: 1; } }
@keyframes install-finger {
  0% { opacity: 0; transform: translate(0, 0); }
  8%, 16% { opacity: 1; transform: translate(0, 0); }
  30% { opacity: 1; transform: translate(-6px, -44px); }
  56% { opacity: 1; transform: translate(-6px, -44px) scale(.85); }
  62% { opacity: 1; transform: translate(46px, -188px); }
  76% { opacity: 1; transform: translate(46px, -188px) scale(.85); }
  86%, 100% { opacity: 0; transform: translate(46px, -188px); }
}

/* Desktop browser replica */

.install-browser { position: relative; width: 86%; margin-bottom: 30px; overflow: visible; border: 1px solid var(--line-strong); border-radius: 10px; background: var(--surface-strong); box-shadow: 0 16px 40px rgba(25, 22, 17, .12); }

.install-browser__bar { position: relative; height: 30px; display: flex; align-items: center; gap: 6px; padding: 0 8px; border-bottom: 1px solid var(--line); background: var(--surface); border-radius: 10px 10px 0 0; }

.install-browser__url { flex: 1 1 auto; height: 18px; display: flex; align-items: center; padding: 0 8px; border-radius: 999px; background: var(--soft); color: var(--muted); font-size: .56rem; }

.install-browser__action,
.install-browser__menu { width: 20px; height: 20px; display: grid; place-items: center; border-radius: 6px; color: var(--muted); }

.install-browser__action { animation: install-pulse 6.6s ease infinite both; color: var(--ink); background: color-mix(in srgb, var(--accent) 16%, transparent); }

.install-browser svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

.install-browser__menu svg circle { fill: currentColor; stroke: none; }

.install-browser__menu-title { padding: 0 6px; color: var(--ink); font-size: .58rem; font-weight: 700; border-radius: 4px; animation: install-row 6.6s ease infinite both; animation-delay: -3s; }

.install-browser__page { display: grid; gap: 6px; padding: 14px; }

.install-browser__page span { height: 8px; border-radius: 4px; background: var(--soft); }

.install-browser__page span:first-child { width: 60%; height: 11px; }

.install-browser__popup { position: absolute; right: 6px; top: 34px; z-index: 2; width: 150px; display: grid; gap: 7px; padding: 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-strong); box-shadow: 0 12px 28px rgba(25, 22, 17, .16); font-size: .56rem; animation: install-popup 6.6s ease infinite both; }

.install-browser__popup span { display: flex; align-items: center; gap: 6px; }

.install-browser__popup .install-app-tile { width: 20px; height: 20px; border-radius: 5px; }

.install-browser__popup em { justify-self: end; padding: 3px 9px; border-radius: 999px; background: #1a73e8; color: #fff; font-style: normal; font-weight: 700; }

.install-browser__dropdown { position: absolute; left: 6px; top: 30px; z-index: 2; display: grid; width: 120px; padding: 4px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-strong); box-shadow: 0 12px 28px rgba(25, 22, 17, .16); font-size: .54rem; animation: install-popup 6.6s ease infinite both; }

.install-browser__dropdown span { padding: 5px 7px; border-radius: 5px; }

.install-browser__dropdown .is-target { animation: install-row 6.6s ease infinite both; }

.install-cursor { position: absolute; z-index: 4; right: 22px; top: 70px; width: 14px; height: 18px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 18'%3E%3Cpath d='M1 1v14l4-4 3 6 2-1-3-6h5Z' fill='%231c1a17' stroke='white' stroke-width='1'/%3E%3C/svg%3E") no-repeat; animation: install-cursor 6.6s cubic-bezier(.22, 1, .36, 1) infinite both; }

.install-replica--safari .install-cursor { right: auto; left: 60%; }

.install-dock { position: absolute; left: 50%; bottom: 10px; display: flex; gap: 6px; padding: 5px 8px; border-radius: 12px; background: color-mix(in srgb, var(--surface-strong) 75%, transparent); box-shadow: 0 6px 18px rgba(25, 22, 17, .12); transform: translateX(-50%); }

.install-dock span { width: 22px; height: 22px; border-radius: 6px; background: var(--line); }

.install-dock .install-app-tile { width: 22px; height: 22px; border-radius: 6px; animation: install-pop 6.6s cubic-bezier(.34, 1.56, .64, 1) infinite both; }

@keyframes install-popup { 0%, 30% { opacity: 0; transform: translateY(-6px); } 36%, 76% { opacity: 1; transform: none; } 82%, 100% { opacity: 0; transform: translateY(-6px); } }
@keyframes install-cursor {
  0% { opacity: 0; transform: translate(-60px, 40px); }
  10% { opacity: 1; transform: translate(-60px, 40px); }
  28% { opacity: 1; transform: translate(0, -42px); }
  32% { transform: translate(0, -42px) scale(.85); }
  52% { opacity: 1; transform: translate(-8px, 18px); }
  58% { transform: translate(-8px, 18px) scale(.85); }
  80%, 100% { opacity: 0; transform: translate(-8px, 18px); }
}

/* Sync guide ------------------------------------------------------------------ */

.modal--sync-guide .modal__panel { width: min(800px, 100%); }

.sg-header { margin-bottom: 14px; }

.sg-header h2 { max-width: 44ch; text-wrap: balance; }

.sg-form textarea { min-height: 68px; }

.sg-body { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: center; gap: 24px; }

.sg-visual { position: relative; min-height: 260px; overflow: hidden; border-radius: 16px; background: radial-gradient(100% 90% at 10% 0%, color-mix(in srgb, var(--accent) 13%, transparent), transparent 65%), radial-gradient(80% 80% at 100% 100%, color-mix(in srgb, var(--hz-adventure) 12%, transparent), transparent 60%), var(--soft); }

.sg-stage { position: relative; height: 260px; }

.sg-laptop { position: absolute; left: 7%; top: 13%; width: 72%; transition: transform 400ms cubic-bezier(.22, 1, .36, 1); }

.sg-stage--2 .sg-laptop,
.sg-stage--3 .sg-laptop { left: 4%; width: 60%; }

.sg-window { position: relative; overflow: hidden; border: 1px solid var(--line-strong); border-radius: 10px; background: var(--surface-strong); box-shadow: 0 16px 36px rgba(25, 22, 17, .14); }

.sg-window__bar { height: 18px; display: flex; align-items: center; gap: 4px; padding: 0 7px; border-bottom: 1px solid var(--line); background: var(--surface); }

.sg-window__bar i { width: 5px; height: 5px; border-radius: 999px; background: var(--line-strong); }

.sg-window__bar span { margin-left: 6px; color: var(--faint); font-size: .46rem; }

.sg-app { display: grid; grid-template-columns: 1.2fr .8fr; gap: 8px; height: 140px; padding: 8px; }

.sg-app__plan { display: grid; align-content: start; gap: 4px; }

.sg-app__plan b,
.sg-phone b { color: var(--faint); font-size: .42rem; font-weight: 750; letter-spacing: .06em; text-transform: uppercase; }

.sg-row { display: flex; align-items: center; gap: 5px; padding: 4px 5px; border: 1px solid var(--line); border-radius: 5px; font-size: .5rem; font-weight: 600; white-space: nowrap; overflow: hidden; }

.sg-check { width: 8px; height: 8px; flex: 0 0 auto; display: grid; place-items: center; border: 1px solid var(--line-strong); border-radius: 2px; color: transparent; }

.sg-check svg { width: 7px; height: 7px; fill: none; stroke: currentColor; stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; }

.sg-app__schedule { position: relative; border-left: 1px solid var(--line); }

.sg-app__schedule span { position: absolute; left: 4px; right: 2px; top: var(--top); height: var(--h); border-radius: 4px; background: color-mix(in srgb, var(--accent) 18%, var(--surface)); box-shadow: inset 2px 0 0 var(--accent); }

.sg-settings { position: absolute; left: 6px; right: 6px; bottom: 6px; z-index: 2; display: grid; gap: 4px; padding: 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-strong); box-shadow: 0 -8px 22px rgba(25, 22, 17, .12); animation: sg-rise 5s cubic-bezier(.22, 1, .36, 1) infinite both; }

.sg-settings small { color: var(--faint); font-size: .44rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }

.sg-settings__card { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 6px; }

.sg-settings__status { position: relative; min-height: 12px; font-size: .5rem; }

.sg-settings__status b { position: absolute; inset: 0; white-space: nowrap; }

.sg-button { position: relative; min-width: 70px; height: 18px; display: grid; place-items: center; padding: 0 7px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); font-size: .46rem; font-weight: 700; white-space: nowrap; animation: sg-press 5s ease infinite both; }

.sg-button > span { grid-area: 1 / 1; }

.sg-before { animation: sg-fade-out 5s ease infinite both; }

.sg-after { opacity: 0; color: var(--hz-habit); animation: sg-fade-in 5s ease infinite both; }

.sg-cursor { position: absolute; z-index: 4; right: 12%; top: 24%; width: 12px; height: 15px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 18'%3E%3Cpath d='M1 1v14l4-4 3 6 2-1-3-6h5Z' fill='%231c1a17' stroke='white' stroke-width='1'/%3E%3C/svg%3E") no-repeat center / contain; animation: sg-cursor 5s cubic-bezier(.22, 1, .36, 1) infinite both; }

.sg-stage--2 .sg-laptop .sg-before,
.sg-stage--2 .sg-laptop .sg-cursor { display: none; }

.sg-stage--2 .sg-laptop .sg-after { opacity: 1; animation: none; }

.sg-stage--2 .sg-laptop .sg-settings,
.sg-stage--2 .sg-laptop .sg-button { animation: none; }

.sg-phone { position: absolute; right: 6%; top: 9%; width: 27%; aspect-ratio: 9 / 18; padding: 4px; border: 2px solid color-mix(in srgb, var(--ink) 72%, transparent); border-radius: 16px; background: var(--surface-strong); box-shadow: 0 16px 36px rgba(25, 22, 17, .16); animation: sg-slide-in 5s cubic-bezier(.22, 1, .36, 1) infinite both; }

.sg-stage--3 .sg-phone { animation: none; }

.sg-phone__screen { position: relative; height: 100%; display: grid; align-content: start; gap: 4px; padding: 14px 5px 5px; overflow: hidden; border-radius: 11px; background: var(--surface); }

.sg-phone__url { position: absolute; left: 6px; right: 6px; top: 4px; height: 7px; border-radius: 999px; background: var(--soft); color: transparent; font-size: 0; }

.sg-phone .sg-row { font-size: .42rem; padding: 3px 4px; }

.sg-phone__connect { display: grid; justify-items: center; gap: 6px; margin-top: 30px; }

.sg-phone__connect .sg-button { min-width: 0; width: 100%; font-size: .4rem; animation-delay: .4s; }

.sg-phone__connect .sg-before { animation-delay: .4s; }

.sg-phone__connect .sg-after { animation-delay: .4s; }

.sg-finger { position: absolute; z-index: 4; left: 50%; top: 58%; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 999px; background: color-mix(in srgb, var(--ink) 22%, transparent); animation: sg-tap 5s ease infinite both; }

.sg-finger--tick { left: 18%; top: 33%; animation-delay: -.6s; }

.sg-row--tap .sg-check { animation: sg-tick 5s ease infinite both; }

.sg-row--sync-done .sg-check { animation: sg-tick 5s ease infinite both; animation-delay: 1.2s; }

.sg-sync { position: absolute; left: 62%; top: 42%; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 999px; background: var(--surface-strong); color: var(--hz-habit); box-shadow: 0 6px 16px rgba(25, 22, 17, .14); animation: sg-spin 5s ease infinite both; }

.sg-sync svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

@keyframes sg-rise { 0% { transform: translateY(110%); } 14%, 100% { transform: none; } }
@keyframes sg-cursor { 0% { opacity: 0; transform: translate(-50px, 30px); } 12% { opacity: 1; transform: translate(-50px, 30px); } 36% { transform: translate(6px, 92px); } 44% { transform: translate(6px, 92px) scale(.82); } 50%, 82% { opacity: 1; transform: translate(6px, 92px); } 92%, 100% { opacity: 0; transform: translate(6px, 92px); } }
@keyframes sg-press { 0%, 42% { background: var(--surface); } 46% { transform: scale(.94); background: var(--soft); } 52%, 100% { transform: none; background: color-mix(in srgb, var(--hz-habit) 12%, var(--surface)); border-color: color-mix(in srgb, var(--hz-habit) 35%, var(--line)); } }
@keyframes sg-fade-out { 0%, 48% { opacity: 1; } 52%, 100% { opacity: 0; } }
@keyframes sg-fade-in { 0%, 50% { opacity: 0; } 55%, 100% { opacity: 1; } }
@keyframes sg-slide-in { 0% { opacity: 0; transform: translateX(30px); } 16%, 100% { opacity: 1; transform: none; } }
@keyframes sg-tap { 0%, 30% { opacity: 0; transform: scale(1.4); } 38% { opacity: 1; transform: scale(1); } 46% { opacity: 1; transform: scale(.8); } 54%, 100% { opacity: 0; transform: scale(1); } }
@keyframes sg-tick { 0%, 40% { color: transparent; background: transparent; border-color: var(--line-strong); } 46%, 100% { color: var(--paper); background: var(--ink); border-color: var(--ink); } }
@keyframes sg-spin { 0%, 45% { transform: rotate(0); } 70%, 100% { transform: rotate(360deg); } }

.sg-copy h3 { margin: 12px 0 8px; font-size: 1.08rem; font-weight: 700; letter-spacing: -.02em; }

.sg-copy p { margin: 0; color: var(--muted); font-size: .86rem; line-height: 1.6; }

.sg-copy p b { color: var(--ink); }

.sg-copy .sg-note { margin-top: 12px; padding: 10px 12px; border-radius: 10px; background: var(--soft); font-size: .78rem; }

.sg-dots { display: flex; gap: 6px; margin: 0; padding: 0; list-style: none; }

.sg-dots button { width: 28px; height: 28px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 999px; background: transparent; color: var(--muted); font-size: .74rem; font-weight: 700; cursor: pointer; transition: background-color 160ms ease, color 160ms ease, border-color 160ms ease; }

.sg-dots button.is-done { border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); color: var(--accent); }

.sg-dots button.is-active { border-color: var(--ink); background: var(--ink); color: var(--paper); }

.sg-actions { margin-top: 18px; }

.sg-waitlist-teaser { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 8px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); color: var(--muted); font-size: .8rem; }

/* Reserves the row on steps 1–2 so the dialog doesn't jump on the last step. */
.sg-waitlist-teaser.is-pending { visibility: hidden; }

/* Leave the waitlist: one quiet link that turns into an inline confirmation. */
.sg-leave { display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 8px; border-radius: 8px; outline: 0; }

.sg-leave b { color: var(--ink); font-weight: 650; overflow-wrap: anywhere; }

.sg-leave__actions { display: inline-flex; align-items: center; gap: 6px; }

.sg-leave.is-confirming { width: 100%; padding: 8px 10px; background: var(--soft); }

.sg-leave__error { color: var(--danger); }

.sg-leave--joined { margin: 6px 0 0; color: var(--muted); font-size: .8rem; }

.sg-leave--joined .text-button { color: var(--muted); text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--accent) 55%, transparent); text-underline-offset: 3px; }

.sg-form { display: grid; gap: 14px; }

.sg-devices { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; border: 0; }

.sg-devices legend { width: 100%; margin-bottom: 7px; padding: 0; color: var(--muted); font-size: .68rem; font-weight: 620; }

.sg-devices label { position: relative; cursor: pointer; }

.sg-devices input { position: absolute; opacity: 0; pointer-events: none; }

.sg-devices span { display: inline-flex; align-items: center; height: 32px; padding: 0 12px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); font-size: .78rem; font-weight: 600; transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease; }

.sg-devices input:checked + span { border-color: var(--ink); background: var(--ink); color: var(--paper); }

.sg-devices input:focus-visible + span { outline: 2px solid color-mix(in srgb, var(--accent) 70%, transparent); outline-offset: 2px; }

.sg-consent { display: grid; grid-template-columns: 20px minmax(0, 1fr); align-items: start; gap: 10px; color: var(--muted); font-size: .8rem; line-height: 1.5; cursor: pointer; }

.sg-consent .check { margin-top: 1px; }

.sg-honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

.sg-error { margin: 0; padding: 10px 12px; border-radius: 10px; background: color-mix(in srgb, var(--danger) 10%, var(--surface-strong)); color: var(--danger); font-size: .8rem; }

.sg-success { display: grid; justify-items: center; gap: 10px; padding: 26px 10px 10px; text-align: center; }

.sg-success h2 { margin: 6px 0 0; font-size: 1.4rem; letter-spacing: -.03em; }

.sg-success p { max-width: 42ch; margin: 0 0 8px; color: var(--muted); font-size: .88rem; line-height: 1.6; }

.sg-success__mark { width: 56px; height: 56px; display: grid; place-items: center; border-radius: 999px; background: color-mix(in srgb, var(--hz-habit) 15%, var(--surface-strong)); color: var(--hz-habit); animation: install-pop 900ms cubic-bezier(.34, 1.56, .64, 1) both; animation-delay: -800ms; }

.sg-success__mark svg { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }

/* Feedback, once per feature release: what's new, then a rating and a few words */

.modal--feedback .modal__panel { width: min(560px, 100%); }

.feedback-head { margin-bottom: 12px; }

.feedback-head h2 { font-size: 1.24rem; font-weight: 700; letter-spacing: -.03em; }

.feedback-head h2:focus { outline: 0; }

.whats-new { margin: 0 0 18px; padding: 4px 16px; border-radius: 13px; background: color-mix(in srgb, var(--soft) 70%, var(--surface)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--line) 80%, transparent); }

.whats-new ul { display: grid; margin: 0; padding: 0; list-style: none; }

.whats-new li { display: grid; grid-template-columns: 8px minmax(0, 1fr); align-items: baseline; gap: 11px; padding: 10px 0; border-top: 1px solid color-mix(in srgb, var(--line) 75%, transparent); color: var(--ink); font-size: .8rem; line-height: 1.5; }

.whats-new li:first-child { border-top: 0; }

.whats-new__mark { width: 7px; height: 7px; border-radius: 2px; background: var(--accent); transform: translateY(-1px); }

.whats-new li:nth-child(2) .whats-new__mark { background: var(--hz-adventure); }

.whats-new li:nth-child(3) .whats-new__mark { background: var(--hz-habit); }

.whats-new li:nth-child(4) .whats-new__mark { background: var(--hz-misogi); }

.whats-new li:nth-child(5) .whats-new__mark { background: var(--hz-keydate); }

.feedback-lede { margin: 0 0 14px; color: var(--muted); font-size: .8rem; }

.feedback-form { display: grid; gap: 14px; padding-top: 16px; border-top: 1px solid var(--line); }

.feedback-ask { display: grid; gap: 6px; }

.feedback-ask h3 { margin: 0; font-size: .92rem; font-weight: 680; letter-spacing: -.015em; }

.feedback-rating { display: flex; align-items: center; gap: 2px; margin-left: -6px; }

.feedback-rating button { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 10px; background: transparent; color: var(--line-strong); cursor: pointer; transition: color 140ms ease, transform 160ms cubic-bezier(.34, 1.56, .64, 1); }

.feedback-rating svg { width: 28px; height: 28px; fill: currentColor; stroke: none; }

.feedback-rating button:hover { transform: scale(1.1); color: color-mix(in srgb, var(--hz-milestone) 70%, var(--line-strong)); }

.feedback-rating button:focus-visible { outline: 0; box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--accent) 55%, transparent); }

.feedback-rating button.is-on { color: var(--hz-milestone); }

.feedback-rating__label { margin-left: 8px; color: var(--muted); font-size: .8rem; font-weight: 600; }

.feedback-kinds { display: flex; flex-wrap: wrap; gap: 6px; margin-top: -4px; }

.feedback-kinds button { height: 32px; padding: 0 13px; border: 1px solid var(--line); border-radius: 999px; background: transparent; color: var(--muted); font-size: .76rem; font-weight: 620; cursor: pointer; }

.feedback-kinds button.is-active { border-color: var(--ink); background: var(--ink); color: var(--paper); }

.feedback-quote { display: grid; gap: 10px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-strong); }

.feedback-quote__opt { display: grid; grid-template-columns: 20px minmax(0, 1fr); align-items: start; gap: 10px; cursor: pointer; }

.feedback-quote__opt input { width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--ink); cursor: pointer; }

.feedback-quote__opt strong { display: block; font-size: .8rem; font-weight: 650; }

.feedback-quote__opt small { display: block; margin-top: 2px; color: var(--muted); font-size: .72rem; line-height: 1.45; }

.feedback-quote__name { padding-left: 30px; }

.feedback-meta { margin: 0; color: var(--faint); font-size: .72rem; }

/* What's new on a wide screen (1.38): what changed on the left, the note beside it, all in view at once.
   Only with both; the thank-you, the error and a copy without the form keep the single column. */
@media screen and (min-width: 1100px) {
  .modal--feedback .modal__panel:has(.whats-new + .feedback-form) { width: min(920px, 100%); }
  .modal--feedback .modal__scroll:has(> .whats-new + .feedback-form) { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: start; column-gap: 30px; padding-inline: 1.3rem 1.2rem; }
  .modal--feedback .modal__scroll:has(> .whats-new + .feedback-form) > .feedback-head { grid-column: 1 / -1; margin-bottom: 16px; }
  .modal--feedback .modal__scroll:has(> .whats-new + .feedback-form) > .whats-new { margin: 0; }
  .modal--feedback .modal__scroll:has(> .whats-new + .feedback-form) > .feedback-form { padding-top: 2px; border-top: 0; }
}

/* Settings: devices, help: feedback, personal sync spotlight ------------------- */

.device-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }

.device-action { min-height: 64px; display: grid; grid-template-columns: 38px minmax(0, 1fr); align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface-strong); color: var(--ink); text-align: left; cursor: pointer; transition: border-color 140ms ease, box-shadow 160ms ease, transform 180ms cubic-bezier(.22, 1, .36, 1); }

.device-action:hover { border-color: var(--line-strong); box-shadow: 0 8px 22px rgba(25, 22, 17, .07); transform: translateY(-1px); }

.device-action__icon { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 11px; background: color-mix(in srgb, var(--accent) 12%, var(--surface-strong)); color: var(--accent); }

.device-action__icon svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

.device-action strong { display: block; font-size: .84rem; font-weight: 660; }

.device-action small { display: block; margin-top: 2px; color: var(--muted); font-size: .72rem; }

/* How it works, at the top (1.35.2) ------------------------------------------
   Short groups under small titles: Get started (the tour, the main action,
   and the Tips switch) and About this planner (the version, with what’s new
   and feedback, and privacy). Every row has the same shape: an icon, a title,
   one line, one action, the actions lined up at the right. A group whose rows
   this copy hides (no owner API) is left out. On a phone the action goes
   under the words, and the cards stack. */
.help-start { display: grid; gap: 18px; margin: 4px 0 22px; }

.help-group { display: grid; gap: 7px; }

.help-group:not(:has(:is(.help-row, .help-card):not([hidden]))) { display: none; }

.help-group__title { margin: 0; padding: 0 2px; color: var(--faint); font-size: .64rem; font-weight: 660; letter-spacing: .078em; text-transform: uppercase; }

.help-list,
.help-cards { margin: 0; padding: 0; list-style: none; }

.help-list,
.help-card { border: 1px solid var(--line); border-radius: 12px; background: color-mix(in srgb, var(--surface-strong) 62%, transparent); }

.help-row,
.help-card { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; align-items: center; gap: 10px 12px; }

.help-row { min-height: 62px; padding: 11px 14px 11px 12px; }

.help-row:not([hidden]) ~ .help-row:not([hidden]) { border-top: 1px solid var(--line); }

:is(.help-row, .help-card)[hidden] { display: none; }

.help-row__icon { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 9px; background: var(--soft); color: var(--muted); }

.help-row__icon svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

.help-tour .help-row__icon { background: color-mix(in srgb, var(--accent) 13%, var(--surface-strong)); color: var(--accent); }

.help-row__text { display: grid; gap: 2px; min-width: 0; }

.help-row__text > strong { color: var(--ink); font-size: .8rem; font-weight: 650; line-height: 1.3; }

.help-row__text > span { color: var(--muted); font-size: .74rem; line-height: 1.45; text-wrap: pretty; }

.help-row > :is(button, a) { min-width: 8.5rem; white-space: nowrap; }

.help-row > .help-switch { justify-self: end; }

.help-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: 10px; }

.help-card { grid-template-columns: 32px minmax(0, 1fr); grid-template-rows: 1fr auto; align-items: start; padding: 12px 14px 13px 12px; }

.help-card__link { grid-column: 2; display: inline-flex; align-items: center; gap: 3px; justify-self: start; color: var(--ink); font-size: .74rem; font-weight: 620; text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--accent) 55%, transparent); text-underline-offset: 3px; }

.help-card__link:hover { text-decoration-color: currentColor; }

.help-card__link:focus-visible { outline: 2px solid color-mix(in srgb, var(--accent) 70%, transparent); outline-offset: 2px; border-radius: 4px; }

.help-card__link svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* Phones (1.38.1): each row's action under its words, full width, as the main buttons of the other dialogs
   are since 1.38 (Take the tour, What’s new, Read the notice); the Tips switch stays on the right. In the
   rest of the dialog, Sponsor and View on GitHub, Import backup and Show me how on this device take the
   width too; Reset local data stays a quiet link under Import backup. */
@media (max-width: 560px) {
  .help-row { align-items: start; }
  .help-row > :is(button, a) { grid-column: 1 / -1; width: 100%; min-width: 0; min-height: 46px; }
  .help-row > .help-switch { align-self: center; }
  .help-content .github-support__actions { width: 100%; display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .help-content .github-support__actions a { width: 100%; min-height: 46px; }
  .help-content .storage-import-button { min-height: 46px; }
  .help-faq [data-install-open] { width: 100%; min-height: 46px; }
}

/* How it works on a wide screen (1.38): the dialog takes the room, up to 1040px (1300px on a 1920px screen
   with the app fitted to it). Get started and About this planner sit side by side, Beyond your planner
   under them; Data on this device and the shortcuts (in four columns) take the full width. The guide
   (1.38.1) then reads row by row, two items to a row, left to right then down (1 2 / 3 4 / …), in the
   order of the page, so Tab and screen readers go the same way; each item keeps its own height
   (align-items: start), so opening or closing one only changes its own row. Below 1000px, nothing changes. */
@media screen and (min-width: 1000px) {
  .modal__panel--help { width: min(100%, clamp(640px, calc(640px + (100vw - 1000px) * 1.4), 1040px)); }
}

@media screen and (min-width: 1100px) {
  .modal__panel--help .modal__scroll { padding-inline: 1.4rem 1.3rem; }
  .help-start { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 24px; margin-bottom: 26px; }
  /* The two groups side by side line up: titles on one line, lists of one height, their rows sharing it. */
  .help-start > .help-group { grid-template-rows: auto 1fr; }
  .help-start .help-list { display: grid; }
  .help-start > .help-group:last-child,
  .help-start:not(:has(> .help-group:nth-child(2) :is(.help-row, .help-card):not([hidden]))) > .help-group:first-child { grid-column: 1 / -1; }
  .help-content { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; align-items: start; }
  .help-content > :is(.help-priority-card, .help-faq--shortcuts) { grid-column: 1 / -1; }
  .help-content .shortcut-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 18px; }
}

/* The spotlight (Settings opened on Personal sync) is drawn round the section by a layer of its own, so the section
   keeps square corners and its divider stays straight like the others. */
.settings-group[data-personal-sync] { position: relative; }

.settings-group[data-personal-sync]::after { content: ""; position: absolute; inset: 0; border-radius: 14px; box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 45%, transparent), 0 0 0 10px color-mix(in srgb, var(--accent) 10%, transparent); opacity: 0; pointer-events: none; transition: opacity 400ms ease; }

.settings-group[data-personal-sync].is-spotlit::after { opacity: 1; }

/* Privacy --------------------------------------------------------------------- */

.modal--privacy .modal__panel { width: min(560px, 100%); }

.privacy-sections { display: grid; gap: 12px; }

.privacy-sections + .modal__actions { margin-top: 16px; }

.privacy-section { display: grid; gap: 8px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface-strong); }

.privacy-section h3 { margin: 0; font-size: .9rem; font-weight: 680; letter-spacing: -.01em; }

.privacy-section p { margin: 0; color: var(--muted); font-size: .8rem; line-height: 1.55; }

.privacy-moments { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 18px; margin: 0; padding: 2px 0; list-style: none; color: var(--ink); font-size: .78rem; }

.privacy-moments li { position: relative; padding-left: 13px; line-height: 1.45; }

.privacy-moments li::before { content: ""; position: absolute; left: 2px; top: .56em; width: 5px; height: 5px; border-radius: 999px; background: var(--accent); }

/* A wide screen (1.35.1): the notice takes the room and its parts sit in two
   balanced columns, a masonry (CSS columns, so reading and Tab order stay the
   notice's and no part is ever split). Only with three parts or more: a copy
   without the owner API says one or two things, in one column. */
@media screen and (min-width: 1000px) {
  .modal--privacy .modal__panel:has(.privacy-sections > :nth-child(3)) { width: min(1180px, 100%); }
  .privacy-sections:has(> :nth-child(3)) { display: block; columns: 2; column-gap: 14px; }
  .privacy-sections:has(> :nth-child(3)) > .privacy-section { break-inside: avoid; }
  .privacy-sections:has(> :nth-child(3)) > .privacy-section + .privacy-section { margin-top: 12px; }
  /* 1.38: the height the screen has (the scroll fills the panel), and the type a step denser, as on the
     public pages' notice, so it reads almost whole without scrolling. */
  .modal--privacy .modal__panel:has(.privacy-sections > :nth-child(3)) { display: flex; flex-direction: column; }
  .modal--privacy .modal__panel:has(.privacy-sections > :nth-child(3)) .modal__scroll { flex: 1 1 auto; min-height: 0; max-height: none; padding-inline: 1.3rem 1.2rem; }
  .privacy-sections:has(> :nth-child(3)) > .privacy-section { gap: 7px; padding: 12px 16px 13px; }
  .privacy-sections:has(> :nth-child(3)) > .privacy-section + .privacy-section { margin-top: 10px; }
  .privacy-sections:has(> :nth-child(3)) .privacy-section p { font-size: .76rem; line-height: 1.5; }
  .privacy-sections:has(> :nth-child(3)) .privacy-moments { gap: 2px 18px; padding: 0; font-size: .75rem; }
  .privacy-sections:has(> :nth-child(3)) .privacy-moments li { line-height: 1.38; }
}

.privacy-toggle { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 4px; padding: 11px 12px 11px 14px; border-radius: 12px; background: var(--soft); cursor: pointer; }

.privacy-toggle strong { display: block; font-size: .84rem; font-weight: 660; }

.privacy-toggle small { display: block; margin-top: 2px; color: var(--muted); font-size: .72rem; line-height: 1.4; }

.privacy-switch,
.help-switch { appearance: none; position: relative; flex: 0 0 auto; width: 38px; height: 22px; margin: 0; border-radius: 999px; background: var(--faint-mark); cursor: pointer; transition: background-color 160ms ease; }

.privacy-switch::after,
.help-switch::after { content: ""; position: absolute; left: 3px; top: 3px; width: 16px; height: 16px; border-radius: 999px; background: var(--paper); box-shadow: 0 1px 3px rgba(25, 22, 17, .25); transition: transform 200ms cubic-bezier(.22, 1, .36, 1); }

.privacy-switch:checked,
.help-switch:checked { background: var(--accent); }

.privacy-switch:checked::after,
.help-switch:checked::after { transform: translateX(16px); }

.privacy-switch:focus-visible,
.help-switch:focus-visible { outline: 2px solid color-mix(in srgb, var(--accent) 70%, transparent); outline-offset: 2px; }

.privacy-link { padding: 0; border: 0; background: none; color: var(--ink); font: inherit; font-weight: 620; text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--accent) 65%, transparent); text-underline-offset: 3px; cursor: pointer; }

.privacy-link:hover { text-decoration-color: currentColor; }

.privacy-footnote { margin: 0; padding-top: 12px; border-top: 1px solid var(--line); color: var(--muted); font-size: .78rem; text-align: center; }

.onboarding-step > p.ob-privacy-note { margin: -4px 0 0; color: var(--faint); font-size: .7rem; line-height: 1.5; }

.ob-privacy-note .privacy-link { color: var(--muted); }

.device-actions--single { grid-template-columns: minmax(0, 1fr); }

/* Close day: the day you just closed gets painted ------------------------------ */

.day-closed-progress { display: grid; gap: 10px; margin: 0 0 16px; padding: 14px 14px 12px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface-strong); }

.day-closed-progress__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }

.day-closed-progress__head > span { color: var(--faint); font-size: .68rem; font-weight: 720; letter-spacing: .06em; text-transform: uppercase; }

.day-closed-progress__head strong { display: inline-flex; align-items: center; gap: 5px; color: var(--hz-misogi); font-size: .86rem; font-weight: 700; }

.day-closed-progress__head svg,
.day-closed-progress__trophy svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

.day-closed-progress__month { display: grid; grid-template-columns: repeat(31, minmax(0, 1fr)); gap: 3px; }

.day-closed-progress__next { margin: 0; color: var(--muted); font-size: .78rem; }

.day-closed-progress__next strong { color: var(--ink); }

.day-closed-progress__unlocks { display: flex; flex-wrap: wrap; gap: 8px; }

.day-closed-progress__trophy { display: inline-flex; align-items: center; gap: 9px; padding: 8px 12px 8px 9px; border-radius: 12px; background: color-mix(in srgb, var(--hz-milestone) 16%, var(--surface-strong)); color: var(--hz-misogi); animation: install-pop 900ms cubic-bezier(.34, 1.56, .64, 1) both; animation-delay: -650ms; }

.day-closed-progress__trophy small { display: block; color: var(--muted); font-size: .64rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }

.day-closed-progress__trophy strong { display: block; color: var(--ink); font-size: .84rem; }

/* Responsive ------------------------------------------------------------------- */

@media (max-width: 760px) {
  .modal--onboarding .modal__panel.ob-panel { height: calc(100dvh - .9rem); grid-template-columns: minmax(0, 1fr); grid-template-rows: 200px minmax(0, 1fr); }
  .ob-visual { padding: 18px; border-right: 0; border-bottom: 1px solid var(--line); }
  .ob-scene { max-width: 300px; }
  /* The planner peeks in from the top and fades out, rather than being cut mid-row. */
  .ob-panel[data-step="1"] .ob-visual { align-items: start; padding-top: 24px; }
  .ob-scene--1 .ob-app { transform: scale(.86); transform-origin: top center; -webkit-mask-image: linear-gradient(to bottom, #000 50%, transparent 88%); mask-image: linear-gradient(to bottom, #000 50%, transparent 88%); }
  .ob-week { grid-template-columns: 30px repeat(7, minmax(0, 1fr)); gap: 4px; height: 158px; }
  .ob-week__ruler,
  .ob-week__col { grid-template-rows: 12px minmax(0, 1fr); gap: 6px; padding: 7px 4px 8px; }
  .ob-week__ruler { padding-inline: 0; }
  .ob-week__col > b { font-size: .56rem; line-height: 12px; }
  .ob-week__mark { font-size: .5rem; }
  .ob-ritual { --card-h: 78px; --gap: 16px; padding-bottom: 38px; }
  .ob-ritual__steps { width: 100%; grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .ob-ritual__step { grid-template-columns: minmax(0, 1fr); justify-items: center; align-content: center; gap: 7px; padding: 8px 4px; border-radius: 14px; text-align: center; }
  .ob-ritual__icon { width: 32px; height: 32px; border-radius: 10px; }
  .ob-ritual__icon svg { width: 18px; height: 18px; }
  .ob-ritual__n,
  .ob-ritual__more,
  .ob-ritual__text small { display: none; }
  .ob-ritual__text b { justify-content: center; font-size: .72rem; }
  .ob-ritual__step:not(:last-child)::after { left: 100%; top: 50%; width: var(--gap); height: 12px; margin-top: -6px; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 12'%3E%3Cpath d='M3 6h9.5M9 2.5 12.5 6 9 9.5' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 16px 12px no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 12'%3E%3Cpath d='M3 6h9.5M9 2.5 12.5 6 9 9.5' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 16px 12px no-repeat; }
  .ob-ritual__loop--side { display: none; }
  .ob-ritual__loop--under { display: block; left: calc(12.5% - 7px); top: calc(var(--card-h) + 3px); width: calc(75% + 14px); height: 22px; }
  .ob-ritual__loop--under path { vector-effect: non-scaling-stroke; }
  .ob-ritual__every { left: 50%; top: calc(var(--card-h) + 23px); padding: 4px 11px 4px 8px; font-size: .7rem; }
  .ob-year { gap: 10px; }
  .ob-year__paint { width: 100%; max-width: 200px; gap: 4px; margin: 0 auto; }
  .ob-visual__caption { display: none; }
  .onboarding-progress { padding: 16px 20px 0; }
  .onboarding-step { padding: 18px 20px 22px; gap: 14px; }
  .ob-promises { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .ob-promises li { grid-template-columns: 32px minmax(0, 1fr); align-items: center; column-gap: 12px; row-gap: 1px; padding: 9px 12px 9px 10px; }
  .ob-promise__icon { grid-row: span 2; margin-bottom: 0; }
  .install-guide,
  .sg-body { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .sg-visual,
  .sg-stage { min-height: 220px; height: 220px; }
  .install-benefits { grid-template-columns: minmax(0, 1fr); }
  .device-actions { grid-template-columns: minmax(0, 1fr); }
  .privacy-moments { grid-template-columns: minmax(0, 1fr); }
  .day-closed-progress__month { grid-template-columns: repeat(16, minmax(0, 1fr)); gap: 4px; }
}


/* styles/share.css */
/* Share your week / your year ------------------------------------------------
   The entry in the weekly review, and the share sheet (src/features/share-dialog.js):
   a native <dialog> with a live preview of the image, its format and look, the
   private details (off by default) and the actions. The image itself is drawn on
   a canvas (src/features/share-image.js); these styles only frame it. */

/* Weekly review: “Share your week” */

.week-share { display: grid; }

.week-share__button {
  min-width: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 12px 12px 12px 12px;
  border: 1px solid color-mix(in srgb, var(--hz-paint) 24%, var(--line));
  border-radius: 14px;
  background: linear-gradient(115deg, color-mix(in srgb, var(--hz-paint) 8%, var(--surface-strong)), var(--surface-strong) 62%);
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 140ms ease, box-shadow 180ms ease;
}

.week-share__button:hover,
.week-share__button:focus-visible { border-color: color-mix(in srgb, var(--hz-paint) 45%, var(--line)); box-shadow: 0 10px 26px rgba(25, 22, 17, .07); }

.week-share__strip {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 15px;
  gap: 3px;
  padding: 9px;
  border-radius: 10px;
  background: var(--surface-strong);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--hz-paint) 14%, var(--line));
}

.week-share__strip .hz-paint__cell { width: 15px; border-radius: 3.5px; }

.week-share__copy { min-width: 0; display: grid; gap: 3px; }

.week-share__copy strong { font-size: .9rem; font-weight: 680; letter-spacing: -.01em; }

.week-share__copy small { color: var(--muted); font-size: .72rem; line-height: 1.45; }

.week-share__go {
  height: 34px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 14px 0 12px;
  border-radius: 999px;
  background: var(--hz-paint);
  color: var(--surface-strong);
  font-size: .76rem;
  font-weight: 660;
  white-space: nowrap;
  transition: background-color 140ms ease;
}

.week-share__button:hover .week-share__go,
.week-share__button:focus-visible .week-share__go { background: color-mix(in srgb, var(--hz-paint) 86%, var(--ink)); }

.week-share__go svg,
.share-sheet svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

@media (max-width: 560px) {
  .week-share__button { grid-template-columns: minmax(0, 1fr) auto; row-gap: 10px; }
  .week-share__strip { grid-column: 1 / -1; justify-self: start; }
}

/* The sheet */

.share-sheet {
  width: min(100% - 32px, 940px);
  max-width: none;
  max-height: none;
  margin: auto;
  padding: 0;
  overflow: visible;
  border: 0;
  background: transparent;
  color: var(--ink);
}

.share-sheet::backdrop { background: rgba(32, 29, 25, .34); backdrop-filter: blur(2px); }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .share-sheet::backdrop { background: rgba(6, 5, 4, .6); }
}

:root[data-theme="dark"] .share-sheet::backdrop { background: rgba(6, 5, 4, .6); }

.share-sheet__panel {
  position: relative;
  max-height: min(860px, calc(100dvh - 32px));
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--surface);
  box-shadow: var(--shadow);
}

.share-sheet__head { padding: 20px 64px 2px 24px; }

.share-sheet__head h2 { margin: 0; font-size: 1.12rem; letter-spacing: -.02em; }

.share-sheet__head p:last-child { max-width: 60ch; margin: .38rem 0 0; color: var(--muted); font-size: .76rem; line-height: 1.55; }

.share-sheet__close { top: 16px; right: 16px; }

.share-sheet__body {
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 292px;
  gap: 22px;
  padding: 16px 24px 20px;
  overflow: auto;
  overscroll-behavior: contain;
}

/* The preview sits on a quiet mat at a fixed height, so changing format never moves the controls. */
.share-sheet__stage {
  height: clamp(300px, calc(100dvh - 300px), 560px);
  min-width: 0;
  display: grid;
  grid-template: minmax(0, 1fr) / minmax(0, 1fr);
  place-items: center;
  padding: 22px;
  border-radius: 14px;
  background: radial-gradient(120% 90% at 50% 0%, color-mix(in srgb, var(--hz-paint) 7%, var(--soft)), var(--soft) 70%);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--line) 70%, transparent);
}

.share-sheet__canvas {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  border-radius: 8px;
  box-shadow: 0 1px 2px rgba(25, 22, 17, .08), 0 16px 38px rgba(25, 22, 17, .16);
}

.share-sheet__stage[data-format="landscape"] .share-sheet__canvas { border-radius: 6px; }

.share-sheet__controls { min-width: 0; display: grid; align-content: start; gap: 18px; }

.share-sheet__group { min-width: 0; margin: 0; padding: 0; border: 0; }

.share-sheet__group > legend {
  margin: 0 0 8px;
  padding: 0;
  color: var(--faint);
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .075em;
  text-transform: uppercase;
}

.share-sheet__formats { display: grid; gap: 6px; }

.share-sheet__looks { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }

/* Choices: a visually hidden radio and the card after it. */
.share-choice { position: relative; display: block; min-width: 0; cursor: pointer; }

.share-choice input,
.share-toggle input { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; }

.share-choice__card {
  min-height: 46px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--surface-strong);
  color: var(--muted);
  transition: border-color 140ms ease, box-shadow 140ms ease, color 140ms ease;
}

.share-choice:hover .share-choice__card { border-color: var(--line-strong); color: var(--ink); }

.share-choice input:checked + .share-choice__card { border-color: var(--hz-paint); box-shadow: inset 0 0 0 1px var(--hz-paint); color: var(--ink); }

.share-choice input:focus-visible + .share-choice__card,
.share-toggle input:focus-visible + .share-toggle__track { outline: 2px solid color-mix(in srgb, var(--accent) 70%, transparent); outline-offset: 2px; }

.share-choice__card b { color: var(--ink); font-size: .8rem; font-weight: 650; }

.share-choice__text { min-width: 0; display: grid; gap: 1px; }

.share-choice__text small { overflow: hidden; color: var(--faint); font-size: .68rem; font-variant-numeric: tabular-nums; text-overflow: ellipsis; white-space: nowrap; }

.share-choice__frame { width: 26px; height: 26px; flex: 0 0 auto; display: grid; place-items: center; }

.share-choice__frame::before { content: ""; display: block; border: 1.5px solid currentColor; border-radius: 3px; }

.share-choice__frame--square::before { width: 18px; height: 18px; }

.share-choice__frame--story::before { width: 13px; height: 22px; }

.share-choice__frame--landscape::before { width: 24px; height: 13px; }

.share-choice input:checked + .share-choice__card .share-choice__frame { color: var(--hz-paint); }

.share-choice input:checked + .share-choice__card .share-choice__frame::before { background: color-mix(in srgb, var(--hz-paint) 16%, transparent); }

.share-choice__swatch { width: 22px; height: 22px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 7px; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 16%, transparent); }

.share-choice__swatch--paper { background: #f6f3ed; }

.share-choice__swatch--ink { background: #151412; }

.share-choice__swatch i { width: 8px; height: 8px; border-radius: 2px; background: var(--hz-paint); }

/* Private details: switches, off by default. */
.share-sheet__group--private { display: grid; }

.share-toggle {
  position: relative;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: start;
  gap: 11px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--surface-strong);
  cursor: pointer;
}

.share-toggle + .share-toggle,
.share-sheet__select + .share-toggle { margin-top: 6px; }

.share-toggle:hover { border-color: var(--line-strong); }

.share-toggle__track { position: relative; width: 34px; height: 20px; margin-top: 1px; border-radius: 999px; background: color-mix(in srgb, var(--line-strong) 90%, var(--surface)); transition: background-color 160ms ease; }

.share-toggle__track::after { content: ""; position: absolute; top: 3px; left: 3px; width: 14px; height: 14px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(25, 22, 17, .25); transition: transform 160ms ease; }

.share-toggle input:checked + .share-toggle__track { background: var(--hz-paint); }

.share-toggle input:checked + .share-toggle__track::after { transform: translateX(14px); }

.share-toggle__text { min-width: 0; display: grid; gap: 2px; }

.share-toggle__text b { color: var(--ink); font-size: .78rem; font-weight: 650; line-height: 1.35; }

.share-toggle__text small { color: var(--muted); font-size: .7rem; line-height: 1.45; overflow-wrap: anywhere; }

.share-sheet__select { display: block; margin-top: 6px; }

.share-sheet__select select {
  width: 100%;
  min-height: 38px;
  padding: 7px 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface-strong);
  color: var(--ink);
  font: inherit;
  font-size: .76rem;
}

.share-sheet__select select:focus-visible { outline: 2px solid color-mix(in srgb, var(--accent) 70%, transparent); outline-offset: 2px; }

.share-sheet__note { display: flex; align-items: flex-start; gap: 7px; margin: 10px 0 0; color: var(--faint); font-size: .7rem; line-height: 1.45; }

.share-sheet__note svg { width: 14px; height: 14px; flex: 0 0 auto; margin-top: 1px; stroke-width: 1.7; }

.share-sheet__foot {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 24px 16px;
  border-top: 1px solid var(--line);
  background: var(--surface);
}

.share-sheet__messages { min-width: 0; flex: 1 1 auto; display: grid; gap: 4px; }

.share-sheet__status { min-width: 0; margin: 0; color: var(--muted); font-size: .74rem; line-height: 1.4; }

.share-sheet__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin-left: auto; }

.share-sheet__action { min-height: 38px; gap: 7px; padding: 8px 14px 8px 12px; font-size: .78rem; }

/* Phones: a bottom sheet — preview on top, choices below, actions always in reach. */
@media (max-width: 680px) {
  .share-sheet { width: 100%; margin: auto 0 0; }
  .share-sheet__panel { max-height: calc(100dvh - 10px); border-bottom: 0; border-radius: 18px 18px 0 0; }
  .share-sheet__head { padding: 16px 56px 0 16px; }
  .share-sheet__head p:last-child { font-size: .72rem; }
  .share-sheet__close { top: 10px; right: 10px; }
  .share-sheet__body { grid-template-columns: minmax(0, 1fr); gap: 16px; padding: 12px 16px 16px; }
  .share-sheet__stage { height: min(42dvh, 360px); padding: 14px; }
  .share-sheet__formats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .share-choice--format .share-choice__card { min-height: 66px; flex-direction: column; justify-content: center; gap: 4px; padding: 8px 6px; text-align: center; }
  .share-choice--format .share-choice__text small { display: none; }
  .share-sheet__foot { flex-direction: column; align-items: stretch; gap: 8px; padding: 10px 16px max(14px, env(safe-area-inset-bottom)); }
  .share-sheet__messages { display: contents; }
  .share-sheet__status:empty { display: none; }
  .share-sheet__actions { flex-wrap: wrap; margin-left: 0; }
  .share-sheet__action { flex: 1 1 0; justify-content: center; min-height: 44px; }
  .share-sheet__actions .primary-button { order: -1; flex-basis: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .week-share__button,
  .week-share__go,
  .share-choice__card,
  .share-toggle__track,
  .share-toggle__track::after { transition: none; }
}

@media print {
  .share-sheet { display: none; }
}


/* styles/tour.css */
/* Planner tour (src/features/tour.js): a spotlight on the real interface and
   a short card beside it; plus the one-time offer for people who set the
   planner up before the tour existed. The same spotlight and card run the
   first-use guides inside a dialog (src/features/first-use.js,
   data-kind="guide"). Colours come from the theme tokens. */

:root {
  --tour-scrim: rgba(31, 27, 22, .42);
  --tour-ring: color-mix(in srgb, var(--accent) 72%, var(--surface-strong));
  --tour-glow: rgba(255, 252, 246, .55);
  --z-tour: 1000;
}

@media screen and (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --tour-scrim: rgba(5, 4, 3, .6);
    --tour-ring: color-mix(in srgb, var(--accent) 82%, var(--surface-strong));
    --tour-glow: color-mix(in srgb, var(--accent) 30%, transparent);
  }
}

@media screen {
  :root[data-theme="dark"] {
    --tour-scrim: rgba(5, 4, 3, .6);
    --tour-ring: color-mix(in srgb, var(--accent) 82%, var(--surface-strong));
    --tour-glow: color-mix(in srgb, var(--accent) 30%, transparent);
  }
}

/* Pinch-zoom and panning stay free (a zoomed-in phone can zoom out); clicks
   outside the card go nowhere (tour.js), and none once it is closing. */
.tour {
  position: fixed;
  inset: 0;
  z-index: var(--z-tour);
  opacity: 0;
  transition: opacity 200ms ease;
}

.tour.is-open { opacity: 1; }

.tour:not(.is-open) { pointer-events: none; }

.tour__scrim {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.tour__dim { fill: var(--tour-scrim); }

.tour__hole { fill: #000; }

/* The holes again, filled, under a filter that draws only their outline and
   a soft glow outside it: one clean shape even where two holes overlap. */
.tour__ring { fill: #fff; }

.tour__line { flood-color: var(--tour-ring); }

.tour__glow { flood-color: var(--tour-glow); }

.tour.is-open:not(.is-still) .tour__hole,
.tour.is-open:not(.is-still) .tour__ring { transition: x 300ms cubic-bezier(.22,1,.36,1), y 300ms cubic-bezier(.22,1,.36,1), width 300ms cubic-bezier(.22,1,.36,1), height 300ms cubic-bezier(.22,1,.36,1); }

/* The card: the planner's dialog surface, small and quiet. */

.tour-card {
  position: fixed;
  left: 0;
  top: 0;
  --tour-card-pad: 12px;
  width: min(352px, calc(100vw - 24px));
  padding: 15px 14px var(--tour-card-pad) 17px;
  border: 1px solid var(--line);
  border-radius: 15px;
  background: var(--surface);
  box-shadow: var(--shadow);
  color: var(--ink);
  outline: none;
  /* Scaled from its corner to stay its usual size when the page is zoomed;
     never taller than the screen (tour.js sets max-height): the text
     scrolls, the buttons stay. */
  transform-origin: 0 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.tour.is-open:not(.is-still) .tour-card { transition: transform 320ms cubic-bezier(.22,1,.36,1); }

.tour-card__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 16px; margin-bottom: 7px; }

.tour-card__eyebrow {
  margin: 0;
  color: var(--accent);
  font-size: .62rem;
  font-weight: 680;
  letter-spacing: .078em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
}

.tour-card__dots { display: inline-flex; align-items: center; gap: 4px; }

.tour-card__dots i { width: 5px; height: 5px; border-radius: 99px; background: var(--line-strong); transition: width 220ms cubic-bezier(.22,1,.36,1), background-color 220ms ease; }

.tour-card__dots i.is-done { background: color-mix(in srgb, var(--accent) 50%, var(--line-strong)); }

.tour-card__dots i.is-active { width: 14px; background: var(--accent); }

.tour-card__title { margin: 0; font-size: 1rem; font-weight: 680; line-height: 1.25; letter-spacing: -.022em; text-wrap: balance; }

.tour-card__text { margin: 6px 0 0; color: var(--muted); font-size: .76rem; line-height: 1.56; text-wrap: pretty; }

/* The parts of the screen the step names, as they read there. */
.tour-card__text strong { color: var(--ink); font-weight: 650; }

.tour-card__keys {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px 12px;
  margin: 12px 0 0;
  padding: 11px 0 0;
  border-top: 1px solid var(--line);
  list-style: none;
}

.tour-card__keys li { min-width: 0; display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: .66rem; font-weight: 560; line-height: 1.3; }

.tour-card__keys li.is-wide { grid-column: 1 / -1; }

.tour-card__caps { flex: 0 0 auto; display: inline-flex; gap: 3px; }

.tour-card kbd {
  min-width: 22px;
  height: 22px;
  display: inline-grid;
  place-items: center;
  padding: 0 6px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface-strong);
  color: var(--ink);
  box-shadow: 0 1px 0 var(--line);
  font: inherit;
  font-size: .6rem;
  font-weight: 680;
  line-height: 1;
}

.tour-card__hint { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin: 11px 0 0; color: var(--faint); font-size: .64rem; font-weight: 560; }

.tour-card__hint kbd { min-width: 19px; height: 19px; padding: 0 5px; font-size: .56rem; }

/* Kept at the foot of a card whose text scrolls, over its bottom padding. */
.tour-card__actions {
  position: sticky;
  bottom: calc(-1 * var(--tour-card-pad));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 13px 0 calc(-1 * var(--tour-card-pad));
  padding-bottom: var(--tour-card-pad);
  background: var(--surface);
}

.tour-card__skip { margin-left: -9px; color: var(--faint); }

.tour-card__nav { display: flex; align-items: center; gap: 4px; margin-left: auto; }

.tour-card__nav .primary-button { min-width: 74px; }

@media (max-width: 480px) {
  .tour-card { --tour-card-pad: 11px; padding: 14px 12px var(--tour-card-pad) 15px; border-radius: 14px; }
  .tour-card__keys { grid-template-columns: minmax(0, 1fr); }
}

/* The offer, once, for people who set the planner up before the tour. */

.tour-offer {
  position: fixed;
  z-index: calc(var(--z-mobile-dock) + 10);
  right: 20px;
  bottom: 20px;
  width: min(360px, calc(100vw - 24px));
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 0 12px;
  padding: 14px 13px 11px 14px;
  border: 1px solid var(--line);
  border-radius: 15px;
  background: var(--surface);
  box-shadow: var(--shadow);
  color: var(--ink);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 180ms ease, transform 260ms cubic-bezier(.22,1,.36,1);
}

.tour-offer:empty { display: none; }

.tour-offer.is-open { opacity: 1; transform: none; }

.tour-offer__icon { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; background: var(--soft); color: var(--accent); }

.tour-offer__icon svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

.tour-offer__copy { min-width: 0; }

.tour-offer__eyebrow { margin: 0 0 2px; color: var(--accent); font-size: .6rem; font-weight: 680; letter-spacing: .078em; text-transform: uppercase; }

.tour-offer__copy h2 { margin: 0; font-size: .86rem; font-weight: 680; letter-spacing: -.018em; line-height: 1.25; }

.tour-offer__copy p:last-child { margin: 3px 0 0; color: var(--muted); font-size: .72rem; line-height: 1.5; }

.tour-offer__actions { grid-column: 1 / -1; display: flex; justify-content: flex-end; gap: 4px; margin-top: 10px; }

@media (max-width: 790px) {
  .tour-offer { left: 12px; right: 12px; bottom: calc(var(--mobile-dock-clearance) + 10px); width: auto; }
  /* On Schedule, above its + button (52px, 10px over the tabs). */
  body:has(.workspace[data-mobile-active="schedule"]) .tour-offer { bottom: calc(var(--mobile-dock-clearance) + 74px); }
}

/* The pane heading focus goes back to when nothing better is left (tour.js). */
[data-tour-return]:focus { outline: none; }

@media (prefers-reduced-motion: reduce) {
  .tour,
  .tour.is-open:not(.is-still) .tour-card,
  .tour.is-open:not(.is-still) .tour__hole,
  .tour.is-open:not(.is-still) .tour__ring,
  .tour-card__dots i,
  .tour-offer { transition: none; }
  .tour-offer { transform: none; }
}

@media print {
  .tour,
  .tour-offer { display: none; }
}


/* styles/sponsor.css */
/* The sponsor moment (1.38.1) ------------------------------------------------
   Once, after ten closed days, when this copy has a sponsor page
   (src/features/sponsor-moment.js fills [data-sponsor-moment] in index.html).
   It celebrates first, then asks, in the planner's own language: warm
   neutrals and ink, the Horizon mark of favicon.svg, and the opening seal's
   motion (styles/opening.css): a dotted orbit, a mark drawn as with a pen,
   strokes eased in, nothing that bounces.

   The stage: ten day marks fill one after another (the tenth, the day just
   closed, in the Horizon's amber); the tenth lifts into the orbit and turns
   into the ink tile of the app's icon; there the horizon line draws, the half
   sun rises behind it and its rays draw. About 1.9 s after the dialog opens.
   Every animation ends on the resting state written outside the motion
   query, so with reduced motion the final state is simply there. The words
   and the actions never wait for it: they are usable from the first frame. */

.modal--sponsor .modal__panel { width: min(100%, 33rem); }

/* The stage runs to the top of the panel, under the close button (other dialogs keep a band for it). */
.modal--sponsor .modal__scroll { margin: 6px; padding: 10px 10px 18px; }

.modal--sponsor .modal__close { top: 26px; right: 26px; }

.sponsor-moment {
  --sm-amber: var(--hz-milestone);
  --sm-tile: var(--ink);
  --sm-tile-edge: transparent;
  --sm-mark: #f4f0e7;
  --sm-day: var(--ink);
  --sm-glow: 24%;
  --sm-shadow: rgba(25, 22, 17, .42);
  display: grid;
  text-align: center;
}

/* The stage ------------------------------------------------------------------ */

.sm-stage {
  /* The geometry the tenth mark travels: from its place in the row (4.5 steps right of the row's middle,
     the orbit's half plus the gap plus its own half below) to the tile in the orbit, scaled from its size. */
  --mark: 12px;
  --gap: 8px;
  --tile: 84px;
  --orbit: 132px;
  --below: 16px;
  --s: .1429;
  --dx: calc(4.5 * (var(--mark) + var(--gap)));
  --dy: calc(var(--orbit) / 2 + var(--below) + var(--mark) / 2);
  position: relative;
  display: grid;
  justify-items: center;
  margin-bottom: 22px;
  padding: 30px 16px 26px;
  overflow: hidden;
  border-radius: 11px;
  background:
    radial-gradient(62% 80% at 50% 40%, color-mix(in srgb, var(--sm-amber) 14%, transparent), transparent 72%),
    radial-gradient(120% 90% at 50% 0%, color-mix(in srgb, var(--accent) 7%, transparent), transparent 62%),
    var(--soft);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--line) 70%, transparent);
  forced-color-adjust: none;
}

.sm-scene { position: relative; width: var(--orbit); height: var(--orbit); }

.sm-scene > * { position: absolute; display: block; pointer-events: none; }

.sm-glow { inset: -26%; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--sm-amber) var(--sm-glow), transparent), transparent 64%); opacity: .8; }

.sm-orbit { inset: 0; width: 100%; height: 100%; overflow: visible; fill: none; stroke: color-mix(in srgb, var(--sm-amber) 55%, transparent); stroke-width: 1.3; stroke-dasharray: 1.5 5.5; stroke-linecap: round; }

/* The app's icon: its ink tile (the corners of favicon.svg, 15 of 64) and its paper mark. */
.sm-tile {
  left: 50%;
  top: 50%;
  width: var(--tile);
  height: var(--tile);
  margin: calc(var(--tile) / -2) 0 0 calc(var(--tile) / -2);
  border-radius: 23.4%;
  background: var(--sm-tile);
  box-shadow: 0 0 0 1px var(--sm-tile-edge), 0 16px 30px -14px var(--sm-shadow);
}

.sm-mark { display: block; width: 100%; height: 100%; overflow: visible; fill: none; stroke: var(--sm-mark); stroke-width: 3.9; stroke-linecap: round; stroke-linejoin: round; }

/* Each drawn stroke is pathLength 1: a dash as long as the stroke, then a gap, so the offset draws it. */
.sm-mark [pathLength] { stroke-dasharray: 1 2; }

.sm-days { display: flex; gap: var(--gap); margin: var(--below) 0 0; padding: 0; list-style: none; }

.sm-days li { width: var(--mark); height: var(--mark); border-radius: 3.5px; background: var(--sm-day); }

.sm-days li.is-today { --sm-day: var(--sm-amber); }

/* The words ------------------------------------------------------------------ */

.sm-title { margin: 0 auto; max-width: 22ch; color: var(--ink); font-size: clamp(1.32rem, 1.1rem + .9vw, 1.62rem); font-weight: 700; line-height: 1.12; letter-spacing: -.035em; text-wrap: balance; }

.sm-title:focus { outline: none; }

.sm-recap { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: min(100%, 25rem); margin: 18px auto 0; padding: 0; list-style: none; }

.sm-recap[data-count="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); width: min(100%, 17rem); }

.sm-recap[data-count="1"] { grid-template-columns: minmax(0, 1fr); width: min(100%, 9rem); }

.sm-recap li { display: grid; align-content: start; gap: 5px; padding: 2px 8px; }

.sm-recap li + li { border-left: 1px solid var(--line); }

.sm-recap__value { color: var(--ink); font-size: 1.62rem; font-weight: 680; line-height: 1; letter-spacing: -.035em; font-variant-numeric: tabular-nums; }

.sm-recap__label { color: var(--muted); font-size: .72rem; font-weight: 560; line-height: 1.3; }

.sm-ask { width: min(100%, 26rem); margin: 20px auto 0; padding-top: 18px; border-top: 1px solid var(--line); }

.sm-ask p { margin: 0; color: var(--muted); font-size: .84rem; line-height: 1.62; text-wrap: balance; }

.sm-ask .sm-sign { margin-top: 6px; color: var(--ink); font-style: italic; font-weight: 560; }

/* The actions: Sponsor and Share side by side, Not now under them; one column on a phone. */
.sm-actions { display: grid; grid-template-columns: repeat(2, auto); justify-content: center; gap: 8px; margin-top: 20px; }

.sm-actions .primary-button,
.sm-actions .secondary-button { min-width: 11.75rem; min-height: 42px; padding: 8px 16px; font-size: .78rem; }

.sm-actions .secondary-button { color: var(--ink); }

.sm-actions svg { width: 16px; height: 16px; flex: 0 0 auto; }

.sm-sponsor .icon-fill { fill: currentColor; stroke: none; }

.sm-share.is-copied { border-color: color-mix(in srgb, var(--hz-habit) 45%, var(--line)); }

.sm-share.is-copied svg { color: var(--hz-habit); stroke-width: 2; }

.sm-later { grid-column: 1 / -1; justify-self: center; min-height: 36px; padding-inline: 14px; }

/* After Sponsor on GitHub: thanks, then the moment closes by itself. */
.sm-thanks { display: grid; gap: 10px; padding: 4px 0 6px; }

.sm-thanks p { width: min(100%, 24rem); margin: 0 auto; color: var(--muted); font-size: .84rem; line-height: 1.62; text-wrap: balance; }

/* The last resort for copying the link: out of sight, never read out. */
.sm-copy-field { position: fixed; left: -9999px; top: 0; width: 1px; height: 1px; opacity: 0; }

/* Dark: the tile is lifted off the night stage by a hairline, as the opening seal's disc. */
@media screen and (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .sponsor-moment {
    --sm-tile: #23211e;
    --sm-tile-edge: #3d3933;
    --sm-day: color-mix(in srgb, var(--ink) 84%, var(--soft));
    --sm-glow: 15%;
    --sm-shadow: rgba(0, 0, 0, .55);
  }
}

@media screen {
  :root[data-theme="dark"] .sponsor-moment {
    --sm-tile: #23211e;
    --sm-tile-edge: #3d3933;
    --sm-day: color-mix(in srgb, var(--ink) 84%, var(--soft));
    --sm-glow: 15%;
    --sm-shadow: rgba(0, 0, 0, .55);
  }
}

/* Phones: a smaller stage, comfortable at 360px; the actions full width, Not now under them. */
@media (max-width: 560px) {
  .modal--sponsor .modal__scroll { margin: 5px; padding: 8px 8px 14px; }
  .modal--sponsor .modal__close { top: 21px; right: 21px; }
  .sm-stage { --mark: 11px; --gap: 7px; --tile: 72px; --orbit: 114px; --below: 14px; --s: .1528; margin-bottom: 18px; padding: 26px 12px 20px; }
  .sm-recap li { padding-inline: 4px; }
  .sm-recap__value { font-size: 1.42rem; }
  .sm-recap__label { font-size: .7rem; }
  .sm-actions { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .sm-actions .primary-button,
  .sm-actions .secondary-button { width: 100%; min-width: 0; min-height: 46px; }
  .sm-later { min-height: 40px; }
}

/* The motion -------------------------------------------------------------------
   0.16–1.0 s: the marks fill, 65 ms apart. 0.9–1.36 s: the tenth lifts into the
   orbit and turns ink. 1.28–1.9 s: the horizon and the line below draw, the sun
   rises, the rays draw. The orbit then turns very slowly, as the seal's does. */
@media (prefers-reduced-motion: no-preference) {
  .sm-days li { animation: sm-fill 300ms cubic-bezier(.22, 1, .36, 1) both; }
  .sm-days li:nth-child(1) { animation-delay: 160ms; }
  .sm-days li:nth-child(2) { animation-delay: 225ms; }
  .sm-days li:nth-child(3) { animation-delay: 290ms; }
  .sm-days li:nth-child(4) { animation-delay: 355ms; }
  .sm-days li:nth-child(5) { animation-delay: 420ms; }
  .sm-days li:nth-child(6) { animation-delay: 485ms; }
  .sm-days li:nth-child(7) { animation-delay: 550ms; }
  .sm-days li:nth-child(8) { animation-delay: 615ms; }
  .sm-days li:nth-child(9) { animation-delay: 680ms; }
  .sm-days li:nth-child(10) { animation-delay: 745ms; }
  .sm-orbit { animation: sm-fade 500ms ease 80ms both, sm-turn 72s linear 600ms infinite; }
  .sm-tile { animation: sm-resolve 460ms cubic-bezier(.55, 0, .2, 1) 900ms both; }
  .sm-glow { animation: sm-glow 760ms cubic-bezier(.22, 1, .36, 1) 1120ms both; }
  .sm-horizon { animation: sm-draw 240ms cubic-bezier(.6, 0, .3, 1) 1280ms both; }
  .sm-ground { animation: sm-draw 220ms cubic-bezier(.6, 0, .3, 1) 1360ms both; }
  .sm-sun { animation: sm-rise 440ms cubic-bezier(.22, 1, .36, 1) 1400ms both; }
  .sm-ray { animation: sm-draw 170ms cubic-bezier(.6, 0, .3, 1) both; }
  .sm-ray--1 { animation-delay: 1640ms; }
  .sm-ray--2 { animation-delay: 1690ms; }
  .sm-ray--3 { animation-delay: 1740ms; }
  .sm-thanks { animation: sm-in 320ms cubic-bezier(.22, 1, .36, 1) both; }
}

@keyframes sm-fill {
  from { background-color: transparent; box-shadow: inset 0 0 0 1.5px var(--line-strong); transform: scale(.8); }
  to { background-color: var(--sm-day); box-shadow: inset 0 0 0 1.5px transparent; transform: none; }
}

@keyframes sm-resolve {
  0% { opacity: 0; background-color: var(--sm-amber); box-shadow: 0 0 0 0 transparent, 0 0 0 0 transparent; transform: translate(var(--dx), var(--dy)) scale(var(--s)); }
  14% { opacity: 1; }
  100% { opacity: 1; background-color: var(--sm-tile); transform: none; }
}

@keyframes sm-glow { from { opacity: 0; transform: scale(.6); } }

@keyframes sm-draw { from { stroke-dashoffset: 1; opacity: 0; } 12% { opacity: 1; } to { stroke-dashoffset: 0; opacity: 1; } }

/* From fully under the horizon (the clip ends at its lower edge, y 39.95): the arc's top, 26 less half its stroke, plus 17. */
@keyframes sm-rise { from { transform: translateY(17px); } }

@keyframes sm-fade { from { opacity: 0; } }

@keyframes sm-turn { to { transform: rotate(360deg); } }

@keyframes sm-in { from { opacity: 0; transform: translateY(6px); } }

@media print {
  .modal--sponsor { display: none; }
}


/* styles/theme.css */
/* Theme, motion hand-off and focus ------------------------------------------
   Dark tokens apply when the visitor's system prefers dark (unless they chose
   Light in Settings) or when they explicitly chose Dark. Screen only: printed
   pages always use the light print stylesheet. */

:root { color-scheme: light; --modal-scrim: rgba(32, 29, 25, .30); }

@media screen and (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --paper: #151412;
    --surface: #1c1b18;
    --surface-strong: #24221f;
    --ink: #ece8e1;
    --muted: #a9a198;
    --faint: #9a9289;
    --faint-mark: #80796f;
    --line: #322f2a;
    --line-strong: #48433c;
    --soft: #2b2925;
    --accent: #cf9f74;
    --danger: #d9806f;
    --current-time: #d0695c;
    --on-current-time: #151412;
    --hour-line: color-mix(in srgb, #8f8a83 15%, transparent);
    --shadow: 0 18px 60px rgba(0, 0, 0, .5);
    --modal-scrim: rgba(6, 5, 4, .58);
    --hz-misogi: #e3916a;
    --hz-milestone: #dcaa76;
    --hz-adventure: #63b5af;
    --hz-keydate: #a99be0;
    --hz-habit: #8dbb8e;
    --text-edit-cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='24' viewBox='0 0 16 24'%3E%3Cpath d='M8 2v20M4.5 2h7M4.5 22h7' fill='none' stroke='%23ece8e1' stroke-width='1.35' stroke-linecap='round'/%3E%3C/svg%3E") 8 12, text;
  }
}

@media screen {
  :root[data-theme="dark"] {
    color-scheme: dark;
    --paper: #151412;
    --surface: #1c1b18;
    --surface-strong: #24221f;
    --ink: #ece8e1;
    --muted: #a9a198;
    --faint: #9a9289;
    --faint-mark: #80796f;
    --line: #322f2a;
    --line-strong: #48433c;
    --soft: #2b2925;
    --accent: #cf9f74;
    --danger: #d9806f;
    --current-time: #d0695c;
    --on-current-time: #151412;
    --hour-line: color-mix(in srgb, #8f8a83 15%, transparent);
    --shadow: 0 18px 60px rgba(0, 0, 0, .5);
    --modal-scrim: rgba(6, 5, 4, .58);
    --hz-misogi: #e3916a;
    --hz-milestone: #dcaa76;
    --hz-adventure: #63b5af;
    --hz-keydate: #a99be0;
    --hz-habit: #8dbb8e;
    --text-edit-cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='24' viewBox='0 0 16 24'%3E%3Cpath d='M8 2v20M4.5 2h7M4.5 22h7' fill='none' stroke='%23ece8e1' stroke-width='1.35' stroke-linecap='round'/%3E%3C/svg%3E") 8 12, text;
  }
}

/* Dark surfaces need a little more category tint to stay scannable. :where()
   keeps these at single-class specificity so state rules (current, done) win. */
@media screen and (prefers-color-scheme: dark) {
  :where(:root:not([data-theme="light"])) .time-block { background: color-mix(in srgb, var(--block-color, var(--accent)) 17%, var(--surface)); }
  :where(:root:not([data-theme="light"])) .week-time-block { background: color-mix(in srgb, var(--block-color) 16%, var(--surface-strong)); }
}

@media screen {
  :where(:root[data-theme="dark"]) .time-block { background: color-mix(in srgb, var(--block-color, var(--accent)) 17%, var(--surface)); }
  :where(:root[data-theme="dark"]) .week-time-block { background: color-mix(in srgb, var(--block-color) 16%, var(--surface-strong)); }
}

.modal__backdrop { background: var(--modal-scrim); }

/* Header actions are grouped: find · view · reflect · output/settings. */

.actions-divider { width: 1px; height: 18px; flex: 0 0 auto; margin: 0 7px; background: var(--line); }

@media (max-width: 790px) {
  .actions-divider { display: none; }
}

/* Appearance control (Settings) */

.theme-switch {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 3px;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--soft);
}

.theme-switch button {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border-radius: 9px;
  background: transparent;
  color: var(--muted);
  font-size: .78rem;
  font-weight: 630;
  cursor: pointer;
  transition: background-color 140ms ease, color 140ms ease, box-shadow 140ms ease;
}

.theme-switch button svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

.theme-switch button:hover { color: var(--ink); }

.theme-switch button.is-active { background: var(--surface-strong); color: var(--ink); box-shadow: 0 1px 4px rgba(25, 22, 17, .08), inset 0 0 0 1px var(--line); }

/* Motion hand-off: when Motion animates dialogs and popovers, their CSS
   transitions step aside (CSS transitions outrank Web Animations). */

.has-motion .modal__panel,
.has-motion .app-popover { transition: none; }

/* Keyboard focus is always visible, without changing pointer interactions. */

:where(button, a, [role="button"], [role="tab"], summary, input[type="checkbox"]):focus-visible {
  outline: 2px solid color-mix(in srgb, var(--accent) 70%, transparent);
  outline-offset: 2px;
}

:where(.hz-tab, .hz-tile, .hz-event, .hz-next-item, .hz-add-option, .hz-slot):focus-visible {
  outline: 2px solid color-mix(in srgb, var(--kind, var(--accent)) 70%, transparent);
  outline-offset: 2px;
}

/* A dialog panel takes focus only to hold it (when the control that opened a
   dialog above it has been re-rendered); it is not a control, so no ring. */
.modal__panel[tabindex="-1"]:focus { outline: none; }

/* A dialog's title takes focus as it opens (src/ui/dialog-focus.js), so a screen reader starts there and
   Tab goes on to its first control; it is not a control, so no ring. */
[data-dialog-title]:focus { outline: none; }


/* styles/opening.css */
/* Opening seal (1.35.1) ---------------------------------------------------
   While the planner loads (index.html marks it data-booting, styles/entrance.css
   keeps it out of sight), its seal stands on the paper: a dark disc springs
   in, the planner's mark (the sun on its horizon) is drawn as with a pen, a
   warm stroke keeps turning round it inside a faint ring, a dotted orbit turns
   slowly in a soft glow, and a greeting rises under it. The line at the
   bottom says where the plans are kept.

   It is in the page from the first paint, before any script: everything here
   is CSS. src/features/opening-seal.js writes the greeting and that line
   (data-greeting lets them fade in) and takes the seal away as the planner
   shows, 3 s after its first paint (HOLD_MS) or at once on a click, a tap or
   a key: [data-leaving], a short fade, LEAVE_MS there. Should the planner's
   script never get that far, the seal fades by itself at 3.5 s, after that
   hold and its fade (SEAL_FAILSAFE_MS; the planner itself is shown under it
   at 2.4 s, styles/entrance.css); its failsafe animation also tells the
   script how long the seal has been on screen.

   With reduced motion: a still seal, held 1.2 s, and a quick fade on the way
   out. Screen only: nothing of it is printed. */

@media screen {
  .opening {
    /* The planner's own colours: the logo's ink tile and paper mark, and the
       Horizon milestone amber, the warmest of its palette (styles/horizon.css). */
    --seal-disc: var(--ink);
    --seal-edge: transparent;
    --seal-mark: var(--paper);
    --seal-accent: var(--hz-milestone);
    --seal-glow: 24%;
    --seal-size: 176px;
    position: fixed;
    inset: 0;
    /* Above the planner and the dialogs (styles/core.css, --z-modal and --z-popover): a dialog that opens on
       launch (first-run setup, ?help) is uncovered with the planner as the seal fades. */
    z-index: 990;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 24px 16px;
    background: var(--paper);
    color: var(--muted);
    animation: opening-failsafe 250ms ease 3500ms forwards;
  }

  .opening__stage {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
  }

  /* Each moving part is its own layer, so the turning and the springing stay
     smooth while the planner's scripts keep the page busy. */
  .opening__seal {
    position: relative;
    width: var(--seal-size);
    height: var(--seal-size);
    forced-color-adjust: none;
    animation: opening-grow 1200ms cubic-bezier(.22, 1, .36, 1) both;
  }

  .opening__seal > * {
    position: absolute;
    display: block;
    overflow: visible;
    pointer-events: none;
  }

  .opening__glow {
    inset: calc(var(--seal-size) * -.34);
    border-radius: 50%;
    background: radial-gradient(circle, color-mix(in srgb, var(--seal-accent) var(--seal-glow), transparent), transparent 66%);
    opacity: .7;
    animation: opening-glow 1200ms cubic-bezier(.22, 1, .36, 1) both;
  }

  .opening__orbit,
  .opening__turn {
    inset: 0;
    width: 100%;
    height: 100%;
    fill: none;
  }

  .opening__orbit {
    stroke: color-mix(in srgb, var(--seal-accent) 45%, transparent);
    stroke-width: 1.3;
    stroke-dasharray: 1.5 5.5;
    stroke-linecap: round;
    animation: opening-orbit 48s linear infinite;
  }

  /* The faint ring and a third of it (pathLength 100) in amber: drawn in, then turning about every 1.3 s. */
  .opening__turn {
    transform: rotate(-90deg);
    animation: opening-turn 1300ms cubic-bezier(.45, .05, .4, .95) 500ms infinite both;
  }

  .opening__ring {
    stroke: color-mix(in srgb, var(--seal-accent) 22%, transparent);
    stroke-width: 2;
    animation: opening-fade 400ms ease 100ms both;
  }

  .opening__arc {
    stroke: var(--seal-accent);
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-dasharray: 32 100;
    animation: opening-arc 600ms cubic-bezier(.22, 1, .36, 1) 150ms both;
  }

  /* Springs in: overshoots a little and settles (a damped spring, sampled for linear()). */
  .opening__disc {
    inset: 16.4%;
    border-radius: 50%;
    background: var(--seal-disc);
    box-shadow: 0 0 0 1px var(--seal-edge);
    animation: opening-disc 700ms cubic-bezier(.34, 1.56, .64, 1) 50ms both, opening-fade 160ms ease-out 50ms both;
    animation-timing-function: linear(0, .127, .396, .678, .902, 1.044, 1.11, 1.119, 1.097, 1.063, 1.03, 1.006, .991, .986, .986, .989, .994, .997, 1), ease-out;
  }

  /* The mark, stroke by stroke as with a pen (each path is pathLength 1): the
     horizon, the sun, its rays outward, then the line below. */
  .opening__mark {
    inset: 21.25%;
    width: 57.5%;
    height: 57.5%;
    fill: none;
    stroke: var(--seal-mark);
    stroke-width: 3.3;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .opening__mark path {
    stroke-dasharray: 1 2;
    animation: opening-draw 220ms cubic-bezier(.6, 0, .3, 1) both;
  }

  .opening__mark path:nth-child(1) { animation-delay: 90ms; animation-duration: 230ms; }
  .opening__mark path:nth-child(2) { animation-delay: 230ms; animation-duration: 260ms; }
  .opening__mark path:nth-child(3) { animation-delay: 410ms; animation-duration: 130ms; }
  .opening__mark path:nth-child(4) { animation-delay: 450ms; animation-duration: 130ms; }
  .opening__mark path:nth-child(5) { animation-delay: 490ms; animation-duration: 130ms; }
  .opening__mark path:nth-child(6) { animation-delay: 550ms; animation-duration: 200ms; }

  .opening__greeting {
    margin: 0;
    color: var(--muted);
    font-size: 1rem;
    font-weight: 400;
    letter-spacing: 0;
    line-height: 1.35;
    text-align: center;
    opacity: 0;
  }

  .opening__trust {
    position: absolute;
    left: 16px;
    right: 16px;
    bottom: max(28px, calc(env(safe-area-inset-bottom) + 16px));
    margin: 0 auto;
    max-width: 30rem;
    color: var(--muted);
    font-size: .8rem;
    font-weight: 500;
    line-height: 1.45;
    text-align: center;
    text-wrap: balance;
    opacity: 0;
  }

  /* Storage blocked: nothing is kept beyond this visit, so the line says nothing (src/features/opening-seal.js). */
  .opening__trust[hidden] { display: none; }

  /* In the line, so that on two lines (a phone, with Drive) the lock stays with its first word. */
  .opening__trust svg {
    display: inline-block;
    width: 14px;
    height: 14px;
    margin-right: 6px;
    vertical-align: -2px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  /* The words arrive once the script has written them, soon enough to be read
     before a planner that is ready at once takes the seal away. */
  .opening[data-greeting] .opening__greeting { animation: opening-text 320ms cubic-bezier(.22, 1, .36, 1) 40ms both; }
  .opening[data-greeting] .opening__trust { animation: opening-fade 320ms ease 100ms both; }

  /* The way out (LEAVE_MS): the planner is already shown and usable
     underneath. The seal goes first, receding a little, then the paper, so it
     never lingers over the day as it appears. */
  .opening[data-leaving] {
    pointer-events: none;
    animation: opening-leave 220ms cubic-bezier(.4, 0, .2, 1) forwards;
  }

  .opening[data-leaving] .opening__stage { animation: opening-recede 150ms cubic-bezier(.25, 0, .3, 1) forwards; }
  .opening[data-leaving] .opening__trust { animation: opening-out 150ms cubic-bezier(.25, 0, .3, 1) forwards; }
}

/* Dark: the disc is lifted off the night paper by a hairline and keeps the
   logo's light mark; the amber is the dark theme's own (styles/theme.css). */
@media screen and (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .opening {
    --seal-disc: #23211e;
    --seal-edge: #3d3933;
    --seal-mark: #f4f0e7;
    --seal-glow: 15%;
  }
}

@media screen {
  :root[data-theme="dark"] .opening {
    --seal-disc: #23211e;
    --seal-edge: #3d3933;
    --seal-mark: #f4f0e7;
    --seal-glow: 15%;
  }
}

@media screen and (max-width: 560px) {
  .opening { --seal-size: 152px; }
}

@media screen and (prefers-reduced-motion: reduce) {
  .opening__seal,
  .opening__glow,
  .opening__orbit,
  .opening__turn,
  .opening__ring,
  .opening__arc,
  .opening__disc,
  .opening__mark path,
  .opening[data-greeting] .opening__greeting,
  .opening[data-greeting] .opening__trust,
  .opening[data-leaving] .opening__stage,
  .opening[data-leaving] .opening__trust { animation: none; }

  .opening__mark path { stroke-dasharray: none; }

  .opening[data-greeting] .opening__greeting,
  .opening[data-greeting] .opening__trust { opacity: 1; }

  .opening[data-leaving] { animation: opening-leave 160ms ease forwards; }
}

@media print {
  .opening { display: none; }
}

@keyframes opening-grow { from { transform: scale(.78); } }
@keyframes opening-glow { 0% { opacity: 0; transform: scale(.6); } 55% { opacity: 1; transform: scale(1.06); } 100% { opacity: .7; transform: none; } }
@keyframes opening-orbit { to { transform: rotate(360deg); } }
@keyframes opening-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes opening-arc { from { stroke-dashoffset: 32; opacity: 0; } to { stroke-dashoffset: 0; opacity: 1; } }
@keyframes opening-turn { from { transform: rotate(-90deg); } to { transform: rotate(270deg); } }
@keyframes opening-disc { from { transform: scale(.4); } to { transform: none; } }
@keyframes opening-draw { from { stroke-dashoffset: 1; opacity: 0; } 12% { opacity: 1; } to { stroke-dashoffset: 0; opacity: 1; } }
@keyframes opening-text { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }
@keyframes opening-leave { to { opacity: 0; visibility: hidden; } }
@keyframes opening-recede { to { opacity: 0; transform: scale(.96); } }
@keyframes opening-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes opening-failsafe { from { pointer-events: none; } to { opacity: 0; visibility: hidden; pointer-events: none; } }


/* styles/entrance.css */
/* Opening (1.30) -------------------------------------------------------------
   Until app.js has drawn the first real day, the planner stays out of sight on
   the paper background, so an empty shell never jumps into place: index.html
   marks the document data-booting before the first paint and
   src/features/app-entrance.js releases it, playing the entrance once per
   session. If the script never gets there, the planner shows itself after
   2.4 s (FAILSAFE_MS there; index.html lifts the planner's inert then too).
   Meanwhile the opening seal stands on the paper, above it: it holds about
   3 s, and fades by itself at 3.5 s should nothing take it away first
   (1.35.2, styles/opening.css). Screen only: nothing changes for print. */

@media screen {
  [data-booting] .planner {
    opacity: 0;
    animation: entrance-failsafe 1ms linear 2400ms forwards;
  }
}

@keyframes entrance-failsafe { to { opacity: 1; } }


/* styles/print.css */
/* Dedicated print surface. The live application never participates in print layout. */
.print-sheet { display: none; }

@media print {
  @page { size: landscape; margin: 6mm; }

  html,
  body {
    margin: 0 !important;
    width: auto !important;
    height: auto !important;
    overflow: hidden !important;
    background: #fff !important;
  }

  body > :not(.print-sheet) { display: none !important; }
  body > .print-sheet { display: block !important; }

  .print-sheet {
    position: relative !important;
    width: 100% !important;
    /* 178mm fits A4 and Letter landscape inside the 6mm page margin; the year map asks for more. */
    height: var(--print-sheet-height, 178mm) !important;
    min-height: 0 !important;
    max-height: var(--print-sheet-height, 178mm) !important;
    margin: 0 !important;
    overflow: hidden !important;
    break-inside: avoid !important;
    page-break-inside: avoid !important;
    page-break-after: avoid !important;
    break-after: avoid-page !important;
    color: #171613;
    background: #fff;
    font-family: inherit;
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
  }
}

/* Sheet-only classes of the printed page. Page-level rules stay in @media print. */
.print-sheet * { box-sizing: border-box; }

.print-sheet-head {
  height: 13mm;
  display: flex;
  align-items: flex-start;
  padding: 0 0 3mm;
  border-bottom: .22mm solid #d8d3cc;
}
.print-sheet-head span {
  display: block;
  margin-bottom: 1mm;
  color: #8b867f;
  font-size: 6pt;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.print-sheet-head h1 { margin: 0; font-size: 12pt; line-height: 1.1; }
.print-sheet-domain {
  position: absolute !important;
  left: 0;
  right: 0;
  bottom: .4mm;
  color: #8b867f !important;
  font-size: 6pt;
  text-align: center;
  text-decoration: none !important;
}

@media print {
  /* Daily */
  .print-daily-layout {
    height: 158mm;
    display: grid;
    grid-template-columns: minmax(50mm, 29fr) minmax(0, 71fr);
    gap: 5mm;
    padding-top: 3mm;
    break-inside: avoid !important;
    page-break-inside: avoid !important;
  }
  .print-plan-column {
    min-height: 0;
    display: grid;
    grid-template-rows: auto auto auto auto minmax(34mm, 1fr);
    gap: 2.5mm;
  }
  .print-plan-column section { min-width: 0; }
  .print-plan-column h2,
  .print-schedule-column > h2 { margin: 0 0 1.2mm; font-size: 7.2pt; line-height: 1.2; }
  .print-plan-column p {
    margin: 0;
    min-height: 4.8mm;
    padding: 1.2mm .4mm;
    border-bottom: .2mm solid #d8d3cc;
    font-size: 6.8pt;
    line-height: 1.3;
  }
  .print-check-row,
  .print-empty-row {
    min-height: 6.4mm;
    display: grid;
    grid-template-columns: 4mm minmax(0, 1fr);
    align-items: center;
    gap: 1.8mm;
    padding: .8mm 1mm;
    border: .2mm solid #ded9d2;
    border-radius: 1.8mm;
    margin-bottom: 1.2mm;
  }
  .print-check-row > span { width: 3.4mm; height: 3.4mm; border: .2mm solid #cfc9c1; border-radius: .9mm; }
  .print-check-row p { min-height: 0; padding: 0; border: 0; }
  .print-empty-row { grid-template-columns: 1fr; }
  .print-notes { min-height: 0; display: grid; grid-template-rows: auto 1fr; }
  .print-notes p { min-height: 0; height: 100%; border: .2mm solid #ded9d2; border-radius: 2mm; }
  .print-schedule-column { min-width: 0; }
  .print-schedule-grid {
    height: 147mm;
    display: grid;
    grid-template-columns: 13mm minmax(0, 1fr);
    break-inside: avoid !important;
    page-break-inside: avoid !important;
  }

  /* Shared schedule geometry */
  .print-hour-gutter { position: relative; min-width: 0; border-right: .2mm solid #d8d3cc; }
  .print-hour-label {
    position: absolute;
    right: 1.5mm;
    transform: translateY(-50%);
    color: #88827b;
    font-size: 5.2pt;
    line-height: 1;
    font-variant-numeric: tabular-nums;
  }
  .print-schedule-canvas,
  .print-week-column { position: relative; min-width: 0; background: transparent !important; }
  .print-hour-line {
    position: absolute;
    z-index: 0;
    left: 0;
    right: 0;
    display: block !important;
    height: .24mm;
    border: 0 !important;
    background: #d8d3cc !important;
    transform: translateY(-.12mm);
    pointer-events: none;
  }
  .print-block,
  .print-week-block {
    position: absolute;
    z-index: 1;
    top: var(--p-top);
    left: calc(var(--p-left) + .6mm);
    width: calc(var(--p-width) - 1.2mm);
    height: var(--p-height);
    min-height: 3.2mm;
    overflow: hidden;
    padding: 1mm 5mm 1mm 1.7mm;
    border-radius: 1.4mm;
    background: color-mix(in srgb, var(--p-color) 10%, #f7f5f1);
    box-shadow: inset 1mm 0 0 var(--p-color), inset 0 0 0 .16mm color-mix(in srgb, var(--p-color) 38%, #ddd8d1);
  }
  .print-block strong,
  .print-week-block strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 6pt; line-height: 1.2; }
  .print-block span,
  .print-week-block span { display: block; margin-top: .4mm; color: #77716a; font-size: 4.9pt; white-space: nowrap; }
  .print-block small { display: block; margin-top: .4mm; color: #77716a; font-size: 4.7pt; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .print-block p { margin: .5mm 0 0; color: #56514b; font-size: 4.7pt; line-height: 1.2; }
  .print-block.is-done { opacity: .55; }
  .print-week-block.is-done { opacity: .55; }
  .print-block-checkbox {
    position: absolute;
    z-index: 2;
    top: 1mm;
    right: 1mm;
    width: 3mm;
    height: 3mm;
    border: .2mm solid color-mix(in srgb, var(--p-color) 38%, #cfc9c1);
    border-radius: .8mm;
    background: #fff;
  }
  .print-block-checkbox.is-checked {
    background: var(--p-color);
    border-color: var(--p-color);
  }
  .print-block-checkbox.is-checked::after {
    content: "";
    position: absolute;
    left: .9mm;
    top: .38mm;
    width: .72mm;
    height: 1.45mm;
    border: solid #fff;
    border-width: 0 .28mm .28mm 0;
    transform: rotate(45deg);
  }

  /* Week */
  .print-week-head {
    height: 9mm;
    display: grid;
    grid-template-columns: 13mm repeat(var(--week-days, 7), minmax(0, 1fr));
    margin-top: 2.5mm;
    border-bottom: .2mm solid #d8d3cc;
  }
  .print-week-head > div,
  .print-week-corner {
    min-width: 0;
    display: grid;
    align-content: center;
    gap: .3mm;
    padding: .8mm 1.1mm;
    border-left: .2mm solid #ece8e2;
  }
  .print-week-corner { border-left: 0; }
  .print-week-head span,
  .print-week-corner small { color: #8a847d; font-size: 5pt; text-transform: uppercase; letter-spacing: .04em; }
  .print-week-head strong,
  .print-week-corner strong { font-size: 7.1pt; }
  .print-week-body {
    position: relative;
    height: 142mm;
    display: grid;
    grid-template-columns: 13mm repeat(var(--week-days, 7), minmax(0, 1fr));
    break-inside: avoid !important;
    page-break-inside: avoid !important;
  }
  .print-week-column { border-left: .2mm solid #ece8e2; }
}

@media print {
  .print-check-row.is-done { opacity: .58; }
  .print-check-row.is-done p { text-decoration: line-through; }
  .print-checkbox { position: relative; flex: 0 0 auto; }
  .print-check-row.is-done .print-checkbox::after {
    content: "";
    position: absolute;
    left: 1.05mm;
    top: .48mm;
    width: .9mm;
    height: 1.7mm;
    border: solid #4f4a44;
    border-width: 0 .3mm .3mm 0;
    transform: rotate(45deg);
  }
}

/* Horizon year map: one landscape page. Fixed light colours, like Day and Week.
   Empty parts keep their ruled lines and boxes so a blank year can be filled by hand.
   Sheet-scoped, outside @media print, so the sheet's rules never reach the planner. */
/* 190mm still fits A4 (198mm) and Letter (204mm) landscape: more room to write by hand. */
.print-sheet--year { --print-sheet-height: 190mm; --pyr-line: #ddd8d1; --pyr-rule: #e6e1da; --pyr-muted: #8b867f; --pyr-faint: #aaa49c; --pyr-misogi: #a5522e; --pyr-milestone: #b97a46; --pyr-adventure: #2f6d70; --pyr-keydate: #5d4f8f; }
.print-sheet--year h1,
.print-sheet--year h2,
.print-sheet--year h3,
.print-sheet--year p,
.print-sheet--year ol,
.print-sheet--year ul,
.print-sheet--year figure { margin: 0; padding: 0; }
.print-sheet--year ol,
.print-sheet--year ul { list-style: none; }

.print-sheet--year .pyr-head { height: 16mm; align-items: center; justify-content: space-between; gap: 6mm; padding-bottom: 2mm; }
.pyr-head h1 { font-size: 16pt; letter-spacing: -.02em; }
.pyr-legend { display: flex; flex-wrap: wrap; gap: 1mm 3.2mm; margin-left: auto; color: #6f6a63; font-size: 5.6pt; }
.pyr-legend li { display: inline-flex; align-items: center; gap: 1mm; }
.pyr-legend i,
.pyr-event i { width: 1.6mm; height: 1.6mm; flex: 0 0 auto; border-radius: 50%; background: var(--kind); }
.pyr-kind--misogi { --kind: var(--pyr-misogi); }
.pyr-kind--milestone { --kind: var(--pyr-milestone); }
.pyr-kind--adventure { --kind: var(--pyr-adventure); }
.pyr-kind--keydate { --kind: var(--pyr-keydate); }
.pyr-legend .pyr-kind--milestone i,
.pyr-event.pyr-kind--milestone i { border-radius: .2mm; transform: rotate(45deg) scale(.86); }

.pyr-paint { display: flex; align-items: center; gap: 2.2mm; }
.pyr-paint figcaption { display: grid; color: var(--pyr-muted); font-size: 5.4pt; line-height: 1.25; text-align: right; }
.pyr-paint figcaption b { color: #171613; font-size: 9pt; }
.pyr-paint__grid { display: grid; gap: .16mm; }
.pyr-paint__row { display: grid; grid-template-columns: 1.6mm repeat(31, .9mm); gap: .16mm; align-items: center; }
.pyr-paint__row span { margin: 0; color: var(--pyr-faint); font-size: 3.4pt; line-height: .9mm; letter-spacing: 0; }
.pyr-paint__row i { height: .9mm; border-radius: .15mm; background: #fff; box-shadow: inset 0 0 0 .08mm #d8d2ca; }
.pyr-paint__row i.is-future { background: #f4f1ec; box-shadow: none; }
.pyr-paint__row i.is-level-1 { background: color-mix(in srgb, var(--pyr-misogi) 34%, #fff); box-shadow: none; }
.pyr-paint__row i.is-level-2 { background: color-mix(in srgb, var(--pyr-misogi) 66%, #fff); box-shadow: none; }
.pyr-paint__row i.is-level-3 { background: var(--pyr-misogi); box-shadow: none; }

.pyr-body { height: calc(var(--print-sheet-height) - 27mm); display: grid; grid-template-columns: 72mm minmax(0, 1fr); gap: 4mm; padding-top: 2.6mm; }
.pyr-side { min-height: 0; display: grid; grid-template-rows: minmax(0, 15fr) minmax(0, 13fr) minmax(0, 8fr) minmax(0, 9.5fr); gap: 2.4mm; }
.pyr-card,
.pyr-month { min-width: 0; min-height: 0; overflow: hidden; border: .2mm solid var(--pyr-line); border-radius: 2mm; }
.pyr-card { display: grid; grid-template-rows: auto minmax(0, 1fr); padding: 1.8mm 2.4mm 1.4mm; }
.pyr-card--misogi { grid-template-rows: auto auto auto auto minmax(0, 1fr); }
.pyr-card > header { display: flex; align-items: baseline; justify-content: space-between; gap: 2mm; margin-bottom: .6mm; }
.pyr-card h2 { font-size: 7.4pt; line-height: 1.2; }
.pyr-card header small { overflow: hidden; color: var(--pyr-faint); font-size: 5.1pt; white-space: nowrap; text-overflow: ellipsis; }
.pyr-card h3 { margin-top: 1.2mm; color: var(--pyr-muted); font-size: 5.4pt; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }

.pyr-misogi { display: grid; grid-template-columns: 3.2mm minmax(0, 1fr); align-items: start; gap: 1.5mm; padding-top: .6mm; }
.pyr-misogi strong { display: -webkit-box; overflow: hidden; font-size: 8pt; line-height: 1.25; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.pyr-misogi .pyr-box { align-self: start; margin-top: .5mm; }
.pyr-misogi.is-done strong { text-decoration: line-through; text-decoration-color: #9a948c; }
.pyr-lines { display: block; background: repeating-linear-gradient(to bottom, transparent 0 4.3mm, var(--pyr-line) 4.3mm 4.5mm); }
.pyr-lines--2 { height: 9mm; }
.pyr-when { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: end; gap: 1.6mm; margin-top: .8mm; padding: .6mm 0 .5mm; border-bottom: .2mm solid var(--pyr-rule); font-size: 6.4pt; }
.pyr-when span { color: var(--pyr-muted); font-size: 5.2pt; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }

.pyr-list { min-height: 0; display: grid; grid-auto-rows: minmax(0, 1fr); }
.pyr-row { min-width: 0; display: grid; grid-template-columns: 3.2mm 2.6mm minmax(0, 1fr) auto; align-items: end; gap: 1.3mm; padding-bottom: .7mm; border-bottom: .2mm solid var(--pyr-rule); font-size: 6.3pt; line-height: 1.2; }
.pyr-row--tall { grid-template-columns: 2.6mm minmax(0, 1fr); }
.pyr-row--habit { grid-template-columns: 13mm minmax(0, 1fr) auto; }
.pyr-row__index { color: var(--pyr-faint); font-size: 5.6pt; font-weight: 700; font-variant-numeric: tabular-nums; }
.pyr-row__quarter { display: grid; color: var(--pyr-faint); font-size: 4.8pt; line-height: 1.15; }
.pyr-row__quarter b { color: #4f7350; font-size: 6.4pt; }
.pyr-row__text { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.pyr-row__text--wrap { display: -webkit-box; white-space: normal; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.pyr-row__when { color: var(--pyr-muted); font-size: 5.4pt; white-space: nowrap; font-variant-numeric: tabular-nums; }
.pyr-row.is-done .pyr-row__text { color: #77716a; text-decoration: line-through; text-decoration-color: #aaa49c; }
.pyr-blank { display: block; min-width: 0; height: 2.4mm; }
.pyr-blank--date { width: 12mm; }
.pyr-box { position: relative; width: 2.9mm; height: 2.9mm; align-self: end; margin-bottom: .1mm; border: .2mm solid #c9c3bb; border-radius: .7mm; background: #fff; }
.pyr-box.is-checked { border-color: #4f4a44; background: #4f4a44; }
.pyr-box.is-checked::after { content: ""; position: absolute; left: .85mm; top: .3mm; width: .75mm; height: 1.5mm; border: solid #fff; border-width: 0 .28mm .28mm 0; transform: rotate(45deg); }

.pyr-months { min-height: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: repeat(3, minmax(0, 1fr)); gap: 2.4mm; }
.pyr-month { display: grid; grid-template-rows: auto auto minmax(0, 1fr); padding: 1.6mm 2mm 1.2mm; }
.pyr-month > header { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: .8mm; }
.pyr-month h3 { font-size: 7pt; line-height: 1.2; }
.pyr-month header small { color: #4f7350; font-size: 5.2pt; font-weight: 700; }
.pyr-cal__head,
.pyr-cal__days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.pyr-cal__head span { color: var(--pyr-faint); font-size: 4.2pt; font-weight: 700; line-height: 2.2mm; text-align: center; }
.pyr-cal__days { row-gap: .25mm; }
.pyr-day { height: 2.75mm; color: #3b3732; font-size: 4.7pt; line-height: 2.75mm; text-align: center; font-variant-numeric: tabular-nums; }
.pyr-day.is-weekend { color: var(--pyr-faint); }
.pyr-day.is-misogi { background: color-mix(in srgb, var(--pyr-misogi) 24%, #fff); color: #171613; }
.pyr-day.is-adventure { background: color-mix(in srgb, var(--pyr-adventure) 20%, #fff); color: #171613; }
.pyr-day.is-keydate { background: color-mix(in srgb, var(--pyr-keydate) 18%, #fff); color: #171613; }
.pyr-day.is-milestone { border-radius: .6mm; box-shadow: inset 0 0 0 .25mm var(--pyr-milestone); color: #171613; font-weight: 700; }
.pyr-events { min-height: 0; overflow: hidden; margin-top: 1mm; background: repeating-linear-gradient(to bottom, transparent 0 3.25mm, var(--pyr-rule) 3.25mm 3.45mm); }
.pyr-event { height: 3.45mm; display: grid; grid-template-columns: 1.6mm auto minmax(0, 1fr); align-items: center; gap: .9mm; padding-bottom: .2mm; font-size: 5.1pt; line-height: 1; white-space: nowrap; }
.pyr-event b { color: #5e5952; font-weight: 650; font-variant-numeric: tabular-nums; }
.pyr-event span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.pyr-event.is-done span { color: #8b867f; text-decoration: line-through; }
.pyr-event--more { display: block; color: var(--pyr-muted); }

.pyr-foot { position: absolute; left: 0; bottom: .4mm; color: var(--pyr-faint); font-size: 5pt; }