/* styles/core.css */
:root {
  --paper: #f6f3ed;
  --surface: #fbfaf7;
  --surface-strong: #ffffff;
  --ink: #1c1a17;
  --muted: #706a62;
  --faint: #9a948d;
  --line: #ddd8d0;
  --line-strong: #c7c0b6;
  --soft: #efebe4;
  --accent: #8b6b4f;
  --danger: #8c4e45;
  --hour-line: color-mix(in srgb, #8f8a83 22%, transparent);
  --scrollbar-thumb: color-mix(in srgb, var(--line) 82%, var(--paper));
  --scrollbar-thumb-hover: color-mix(in srgb, var(--line-strong) 72%, 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);
  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%; }

html { scrollbar-width: thin; scrollbar-color: var(--scrollbar-thumb) transparent; }

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; }

button { border: 0; }

a { color: inherit; }

[hidden] { display: none !important; }

/* Bemorin-style scrollbar: no arrows, no track, only a light thumb. */

* { scrollbar-width: thin; scrollbar-color: var(--scrollbar-thumb) transparent; }

*::-webkit-scrollbar { width: 7px; height: 7px; }

*::-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: 2.5rem;
  border: 2px solid transparent;
  border-radius: 999px;
  background: var(--scrollbar-thumb);
  background-clip: padding-box;
}

*::-webkit-scrollbar-thumb:hover {
  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: flex;
  align-items: center;
  gap: 14px;
  padding: 0 0 11px;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}

.date-cluster {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 14px;
  flex: 1 1 auto;
}

.date-title { min-width: 0; flex: 0 1 auto; }

.eyebrow,
.section-kicker,
.modal__eyebrow {
  margin: 0 0 3px;
  color: var(--faint);
  font-size: .61rem;
  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-short] { display: none; }

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

.actions { margin-left: auto; }

.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 {
  width: 16px;
  height: 16px;
  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: 1.03rem;
  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; }

.item-input {
  min-width: 0;
  width: 100%;
  padding: 0;
  border: 0;
  outline: 0;
  background: transparent;
  line-height: 1.45;
}

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

.priority .item-input { font-size: .87rem; font-weight: 590; }

.task .item-input { font-size: .84rem; }

.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(--muted); text-decoration: line-through; text-decoration-thickness: 1px; text-decoration-color: color-mix(in srgb, var(--muted) 58%, transparent); }

.item-row.done { opacity: .63; }

.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 svg { width: 13px; height: 13px; }

.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 !important;
  z-index: 250 !important;
  pointer-events: none !important;
  margin: 0 !important;
  opacity: .96 !important;
  background: var(--surface-strong) !important;
  box-shadow: 0 16px 38px rgba(31, 27, 22, .14), inset 0 0 0 1px var(--line-strong) !important;
  transition: none !important;
}

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

/* 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: .82rem;
}

.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: 100;
  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: .78rem;
  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: #fff;
  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; width: 14px !important; height: 14px !important; color: var(--faint); }

.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: #302c27; }

.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: 350;
  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 { width: 13px !important; height: 13px !important; 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__actions { display: flex; gap: .5rem; flex-wrap: wrap; justify-content: flex-end; }

.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 { 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); }

input[type="text"],
textarea {
  caret-color: var(--ink);
  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;
}

/* 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;
  padding: 4px 8px;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-size: .67rem;
  font-weight: 620;
  letter-spacing: -.01em;
  transition: color 130ms ease, background-color 130ms ease;
}

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

.today-button.is-away { min-width: 78px; color: var(--ink); }

/* 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: text; }

.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: 2px 5px;
  border-radius: 5px;
  background: #9a5149;
  color: #fffaf4;
  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-cluster { gap: 8px; }
  .actions,
.date-nav { gap: 1px; }
  .icon-button { width: 32px; height: 32px; }
}

@media (max-width: 790px) {
  .planner { grid-template-rows: auto auto minmax(0,1fr); }
  .topbar { gap: 4px; }
  .date-cluster { gap: 3px; }
  .date-title { max-width: 125px; }
  .date-nav,
.actions { gap: 0; }
  .icon-button { width: 29px; height: 29px; }
  .icon-button svg { width: 14px; height: 14px; }
  .mobile-view-switch {
    display: flex;
    width: fit-content;
    margin: 7px auto 0;
    gap: 2px;
  }
  .mobile-view-switch button {
    min-height: 29px;
    padding: 5px 10px;
    border-radius: 999px;
    background: transparent;
    color: var(--muted);
    font-size: .69rem;
    cursor: pointer;
  }
  .mobile-view-switch button:hover { background: var(--soft); color: var(--ink); }
  .mobile-view-switch button.is-active { background: #e7e1d8; color: var(--ink); }
  .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: 48px; padding-bottom: 8px; }
  .topbar h1 { font-size: .98rem; }
  [data-date] { display: none; }
  [data-date-short] { display: inline; }
  .date-title { max-width: 92px; }
  .eyebrow { font-size: .52rem; }
  .icon-button { width: 27px; height: 27px; }
  .date-nav .icon-button { width: 25px; }
  .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 { justify-content: flex-start; }
  .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: 1px; }
  .date-cluster { gap: 0; }
  .date-title { max-width: 74px; }
  .date-title .eyebrow { display: none; }
  .topbar h1 { font-size: .88rem; }
  .icon-button { width: 25px; height: 25px; }
  .date-nav .icon-button { width: 23px; }
  .icon-button svg { width: 13px; height: 13px; }
  .actions { margin-left: 1px; }
}

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

@media (max-width: 620px) {
  .tasks { margin-left: 0; padding-left: 0; }
  .date-nav { min-height: 29px; padding: 1px; }
  .today-button { min-width: 42px; min-height: 25px; padding: 3px 6px; font-size: .61rem; }
  .today-button.is-away { min-width: 66px; }
  .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 (max-width: 480px) {
  .date-title { max-width: 58px; }
  .date-nav .icon-button { width: 20px; height: 23px; }
  .today-button { min-width: 38px; padding-inline: 4px; font-size: .56rem; }
  .today-button.is-away { min-width: 58px; }
  .actions .icon-button { width: 22px; height: 24px; }
  .actions .icon-button svg { width: 12px; height: 12px; }
}

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




.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 span {
  display: block;
  color: var(--faint);
  font-size: .58rem;
  text-transform: uppercase;
  letter-spacing: .06em;
}

.end-day-summary 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; }
}




/* Keep the date navigation visually centered while actions stay on the right. */

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

.date-cluster { display: contents; }

.date-title { justify-self: start; }

.date-nav { justify-self: center; }

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

.today-button,
.today-button.is-away { min-width: 42px; }

/* 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 !important; }

.app-tooltip-float {
  position: fixed;
  z-index: 800;
  width: max-content;
  max-width: min(190px, calc(100vw - 16px));
  padding: 5px 7px;
  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.2;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transform: translateY(-2px);
  transition: opacity 100ms ease, transform 130ms cubic-bezier(.22,1,.36,1);
}

.app-tooltip-float.is-visible { opacity: 1; transform: translateY(0); }



.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: 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; }

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

.drag-handle { cursor: grab !important; }

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

/* 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 {
  width: 14px;
  height: 14px;
  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 { width: 16px; height: 16px; 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: .82rem;
}

.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; }

.mobile-more-menu a {
  display: block;
  padding: 8px 9px;
  border-radius: 7px;
  color: var(--muted);
  text-decoration: none;
  font-size: .74rem;
}

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

@media (max-width: 790px) {
  .topbar { grid-template-columns: minmax(54px, 1fr) auto minmax(0,1fr); }
  .header-secondary { display: none !important; }
  .expanded-view-button { display: none; }
  .mobile-more-wrap { display: flex; }
  .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: 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;
  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 { width: 14px; height: 14px; 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 !important; padding-left: 0 !important; }

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

.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-input {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.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: color-mix(in srgb, var(--faint) 88%, transparent); }

.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 an actual app dropdown. */

.end-day-target { display: grid; align-content: start; }

.end-day-date-trigger {
  min-width: 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: .1rem;
  padding: 2px 0;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  text-align: left;
}

.end-day-date-trigger strong { margin: 0; font-size: .86rem; }

.end-day-date-trigger svg { width: 13px; height: 13px; flex: 0 0 auto; fill: none; stroke: var(--faint); stroke-width: 1.6; }

.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 !important; }

/* 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: 180;
    left: 10px;
    right: 10px;
    bottom: max(9px, env(safe-area-inset-bottom));
    width: auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3px;
    margin: 0;
    padding: 3px;
    border: 1px solid color-mix(in srgb, var(--line) 90%, transparent);
    border-radius: 12px;
    background: color-mix(in srgb, var(--surface-strong) 94%, transparent);
    box-shadow: 0 10px 30px rgba(28,25,21,.12);
    backdrop-filter: blur(12px);
  }
  .mobile-view-switch button {
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    border-radius: 9px;
    padding: 7px 10px;
  }
  .mobile-view-switch button svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.55; stroke-linecap: round; stroke-linejoin: round; }
  .mobile-view-switch button .icon-fill { fill: currentColor; stroke: none; }
  .mobile-view-switch button.is-active { background: var(--ink); color: var(--paper); }
  .pane-scroll { padding-bottom: 62px; }
  .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: 790px) { .mobile-view-switch { z-index: 80; } }

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

.focus [data-focus] {
  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 !important;
  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 { width: 15px; height: 15px; 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 { width: 14px; height: 14px; fill: none; stroke: var(--faint); 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 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  outline: 0;
  font-size: .79rem !important;
  font-variant-numeric: tabular-nums;
}

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

/* 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 !important;
    grid-template-columns: 38px minmax(0,1fr) minmax(0,1fr) !important;
    gap: 6px;
  }
  .modal__actions--block.is-add { grid-template-columns: minmax(0,1fr) minmax(0,1fr) !important; }
  .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 !important; border-color: transparent; box-shadow: inset 0 0 0 1px var(--line); }

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

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

.end-day-date-trigger {
  min-height: 36px;
  padding: 4px 5px 4px 9px !important;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--surface-strong) !important;
}

.end-day-date-trigger svg {
  width: 27px !important;
  height: 27px !important;
  padding: 6px;
  border-radius: 7px;
  background: var(--soft);
  color: var(--muted);
  stroke: currentColor !important;
}

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

/* 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 { width: 11px; height: 11px; fill: none; stroke: currentColor; stroke-width: 1.55; stroke-linecap: round; stroke-linejoin: round; }

.search-result__date time { color: inherit !important; }

/* 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; }
  .end-day-button svg { width: 16px; height: 16px; }
  .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 !important; }
}



.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 !important;
  align-items: center;
  justify-content: flex-start;
  overflow: hidden;
}

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

/* 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 { width: 14px; height: 14px; 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); opacity: .56; }

.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 !important; }

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

.end-day-actions .primary-button { width: 100%; }

/* Close day is self-explanatory; keep text visible on touch layouts. */

.end-day-button svg { width: 17px; height: 17px; }

@media (max-width: 790px) {
  .end-day-button { width: auto !important; padding-inline: 9px !important; }
  .end-day-button span { display: inline !important; 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 !important; border: 1px solid var(--line) !important; 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: #fff; }

.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 !important; }

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

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

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

.focus-input { padding: 3px 0 5px; border-bottom: 1px solid var(--line-strong); font-size: .86rem; }

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

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

.item-input { 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; }

.task-action svg { width: 15px; height: 15px; }

/* 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 !important; 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 span { margin: 0; }

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

.end-day-target { display: flex !important; align-items: center !important; justify-content: space-between; }

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

.end-day-date-trigger { flex: 1 1 auto; min-width: 0; min-height: 36px; justify-content: flex-end; border: 0; background: transparent; padding: 0 0 0 10px; }

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

.end-day-date-trigger svg { width: 28px !important; height: 28px !important; padding: 7px; border-radius: 8px; background: var(--soft); }

.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; }

.modal__scroll::-webkit-scrollbar { width: 8px; }

.modal__scroll::-webkit-scrollbar-track { background: transparent; }

.modal__scroll::-webkit-scrollbar-thumb { border: 2px solid transparent; background: color-mix(in srgb, var(--line-strong) 58%, var(--surface)); background-clip: padding-box; border-radius: 99px; }

.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 !important; padding: .5rem .55rem; border-radius: 7px; background: color-mix(in srgb, var(--soft) 70%, transparent); font-size: .66rem !important; line-height: 1.45 !important; }

.storage-safety.is-warning { color: var(--danger) !important; 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) !important; background: var(--soft) !important; color: var(--ink) !important; box-shadow: inset 0 -1px 0 color-mix(in srgb,var(--ink) 8%, transparent) !important; }

/* 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: .58rem; }
  .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 !important; width: auto !important; min-width: 0; }
}

[data-end-day-modal] .modal__scroll { height: calc(100% - 50px); max-height: calc(100% - 50px); }

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

.time-combo { display: flex !important; }

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

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

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

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




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

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

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

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

.item-input { align-self: center !important; }

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

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

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

/* 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 !important; }

.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 { width: 14px; height: 14px; 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. */

[data-end-day-modal] .modal__panel { height: auto !important; max-height: calc(100dvh - 1.4rem); }

[data-end-day-modal] .modal__scroll {
  height: auto !important; max-height: calc(100dvh - 2.2rem) !important; overflow: hidden !important;
  display: block !important;
}

[data-end-day-form] { min-height: 0; display: block !important; }

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

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

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

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

.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 { width: 12px; height: 12px; 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 !important; grid-template-columns: 92px minmax(0,1fr) !important; gap: 14px !important; align-items: start !important;
  padding: 10px 9px !important; border: 0 !important; border-radius: 8px !important; background: transparent !important; box-shadow: none !important;
  color: var(--ink); text-align: left; cursor: pointer;
}

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

.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 !important; 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 !important; }

.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 !important; }

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

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

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

@media (max-width: 790px) {
  /* Stop pane scrollbars above the floating Plan/Schedule dock. */
  .workspace { padding-bottom: 62px; }
  .pane-scroll { max-height: calc(100dvh - var(--topbar-height, 74px) - 70px) !important; }
}

@media (max-width: 620px) {
  .end-day-item { grid-template-columns: 1fr !important; gap: 7px !important; }
  .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) !important; gap: 10px !important; }
  .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) !important; }
  .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 !important; }

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

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

.task-add-row:hover,
.task-add-row:focus-visible { background: var(--soft) !important; 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 !important; }

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

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

/* 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 !important; padding-bottom: 0 !important; }

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

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

.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 !important; }

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

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

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

.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: 790px) {
  /* Only reserve the physical dock height; no dead band above it. */
  .workspace { padding-bottom: 50px !important; }
  .pane-scroll { padding-bottom: 48px !important; max-height: calc(100dvh - var(--topbar-height, 74px) - 54px) !important; }
  .mobile-view-switch { bottom: max(6px, env(safe-area-inset-bottom)) !important; }
}

@media (max-width: 620px) {
  .journal-columns-head,
.journal-row { grid-template-columns: 64px minmax(0,1fr) minmax(0,1fr) !important; gap: 8px !important; }
  .journal-columns-head { padding-inline: 6px; }
  .journal-row { padding-inline: 6px !important; }
  .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 !important; }

/* Close day */

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

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

.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 !important; }

.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 !important; }

.day-closed-reopen { margin: 7px 0 0; padding: 4px 0; border: 0; background: transparent; color: var(--muted); font: inherit; font-size: .64rem; font-weight: 620; cursor: pointer; }

.day-closed-reopen:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }

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

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

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

.day-closed-actions .primary-button,
.day-closed-actions .secondary-button { width: 100% !important; 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 !important; }

.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) {
  .pane-scroll { padding-bottom: 42px !important; max-height: calc(100dvh - var(--topbar-height, 74px) - 48px) !important; }
  .workspace { padding-bottom: 44px !important; }
  .modal__actions--block:not(.is-add) { display: grid !important; grid-template-columns: 40px minmax(0,1fr) !important; align-items: center !important; gap: 6px !important; }
  .modal__actions--block:not(.is-add) .modal__actions-right { width: 100% !important; min-width: 0 !important; display: grid !important; grid-template-columns: 1fr 1.35fr !important; gap: 6px !important; }
}

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

.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% !important; }

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

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

/* 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; width:16px; height:16px; fill:none; stroke:var(--faint); 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!important; align-items:center; gap:4px; margin-top:4px!important; padding:2px 6px; border-radius:999px; background:color-mix(in srgb,var(--soft) 74%,transparent); color:var(--muted)!important; font-size:.51rem!important; font-weight:620!important; line-height:1.25!important; }

.item-history svg,
.carry-badge svg { width:10px; height:10px; 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)!important; box-shadow:inset 0 0 0 1px var(--line); }

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

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

[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%!important; margin-bottom:12px!important; }

.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!important; }

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



/* Mobile More mirrors the header rather than becoming a second navigation system. */

.mobile-more-menu button,
.mobile-more-menu a { width:100%; min-height:34px; display:flex!important; align-items:center; gap:9px; padding:7px 9px!important; border:0; border-radius:8px; background:transparent; color:var(--muted); text-decoration:none; font:inherit; font-size:.68rem; font-weight:570; 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 { width:15px; height:15px; flex:0 0 auto; 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; }

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

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

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




@media (max-width:790px) {
  .mobile-more-menu { min-width:190px; padding:5px; }
}

/* 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 !important; }

/* 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 !important; grid-template-columns: 13px minmax(0,auto) 13px; align-items: center; gap: 6px; }

.end-day-triage__date > svg { width: 12px; height: 12px; 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 !important; align-items: center; flex-wrap: wrap; gap: 4px 6px !important; }

.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 !important; }

/* 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. */

/* Mobile More: only actions hidden from the real header live here. Export expands in place. */

.mobile-export-disclosure { display: grid; }

.mobile-export-disclosure > button { grid-template-columns: 15px minmax(0,1fr) 15px; }

.mobile-export-disclosure .disclosure-chevron { justify-self: end; transition: transform 180ms cubic-bezier(.22,1,.36,1); }

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

.mobile-export-options { display: grid; grid-template-rows: 0fr; opacity: 0; overflow: hidden; transition: grid-template-rows 220ms cubic-bezier(.22,1,.36,1), opacity 150ms ease; }

.mobile-export-options::before { content: ""; min-height: 0; }

.mobile-export-disclosure.is-open .mobile-export-options { grid-template-rows: 1fr; opacity: 1; }

.mobile-export-options > button { padding-left: 33px !important; min-height: 31px !important; font-size: .62rem !important; }

/* 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); border-bottom: 1.5px solid var(--faint); 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) {
  /* Search is still directly available; all other hidden header actions live only in More. */
  .actions > [data-journal-open],
.actions > [data-open-work-open] { display: none !important; }
  .mobile-more-wrap { display: flex !important; }
}

.mobile-export-options { max-height: 0; grid-template-rows: none !important; transition: max-height 220ms cubic-bezier(.22,1,.36,1), opacity 150ms ease !important; }

.mobile-export-disclosure.is-open .mobile-export-options { max-height: 160px; }

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

/* 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 !important; box-shadow: none !important; border-color: transparent !important; color: var(--muted) !important; }

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

.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) {
  /* More contains every header action removed for touch; no duplicates remain. */
  .actions > [data-journal-open],
.actions > [data-open-work-open],
.actions > [data-expanded-view],
.actions > [data-print],
.actions > .action-popover-wrap:has([data-export]),
.actions > [data-help-open],
.actions > [data-github-link] { display:none !important; }
}

/* Keep/Drop are alternatives to a planned date: the date control becomes completely neutral. */

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

/* Match the quiet pill language used by Add a task. */

/* The week tooltip is physically inside the chart wrapper. JS positions it from SVG cx/cy. */













/* Annual orientation has presence; it should not feel like a settings form. */

/* Mini-adventures and habits are readable programs, not tiny strip tokens. */

/* Editors participate in the modal flow: no blur, no detached card in a corner. */

/* One row per month, one narrow independent cell per day; periods become merged bars. */

/* Month is large; the right rail mirrors the important things actually in that month. */

/* PiP can surface unresolved work, but only when there is something to surface. */

@media (max-width: 900px) {
  
  
}

:root { --current-time: #9a5149; }

.view-toggle-button {
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 10px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-size: .68rem;
  font-weight: 620;
}

.view-toggle-button svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.55; stroke-linecap: round; stroke-linejoin: round; }

.view-toggle-button:hover { background: var(--soft); color: var(--ink); }

.view-toggle-button.is-active { background: var(--soft); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); }

/* Week is a schedule-only surface, deliberately keeping the daily editor out. */

.workspace.is-week-view { grid-template-columns: minmax(0,1fr) !important; gap: 0 !important; }

.workspace.is-week-view > .left { display: none !important; }

/* 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; }
}

@media (max-width: 760px) {
  .view-toggle-button span { display: none; }
  .view-toggle-button { width: 34px; padding: 0; justify-content: center; }
  
  
}



.end-day-habit label { grid-template-columns: 20px minmax(0,1fr) auto !important; }

.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); }

/* Week lives beside the date. Previous / Next / Now stay optically centered. */

@media (min-width: 791px) {
  .topbar { position: relative; display: flex !important; align-items: center; }
  .date-cluster { display: flex !important; align-items: center; gap: 8px; flex: 0 1 auto; min-width: 0; }
  .date-nav { position: absolute; left: 50%; transform: translateX(-50%); justify-self: auto; }
  .actions { margin-left: auto !important; }
}

.view-toggle-button {
  min-height: 34px !important;
  padding: 0 11px !important;
  border: 0 !important;
  border-radius: 9px !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--muted) !important;
  font-size: .69rem !important;
  font-weight: 570 !important;
}

.view-toggle-button svg { display: none !important; }

.view-toggle-button:hover,
.view-toggle-button.is-active { background: var(--soft) !important; color: var(--ink) !important; box-shadow: none !important; }

@media (max-width: 760px) {
  .view-toggle-button { width: auto !important; min-width: 34px; padding-inline: 8px !important; }
  .view-toggle-button span { display: inline !important; }
}

/* 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 !important; }

/* 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 !important; gap: 10px !important; }

.end-day-habit__stats { align-self: center; display: grid !important; justify-items: end; gap: 0 !important; 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 !important; }





/* 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. */




.view-toggle-button.is-active { background: transparent !important; color: var(--muted) !important; box-shadow: none !important; }

.view-toggle-button:hover,
.view-toggle-button.is-active:hover { background: var(--soft) !important; color: var(--ink) !important; }

@media (max-width: 790px) {
  .topbar { display: flex !important; align-items: center !important; gap: 6px !important; }
  .date-cluster { display: flex !important; align-items: center !important; gap: 4px !important; flex: 1 1 auto !important; min-width: 0 !important; }
  .date-title { min-width: 0 !important; }
  .view-toggle-button { flex: 0 0 auto !important; }
  .date-nav { position: static !important; transform: none !important; flex: 0 0 auto !important; }
  .actions { margin-left: auto !important; flex: 0 0 auto !important; }
}

/* 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. */

.view-toggle-button {
  min-height: 34px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  padding: 6px 10px !important;
  border: 1px solid var(--line) !important;
  border-radius: 9px !important;
  background: var(--soft) !important;
  color: var(--muted) !important;
  font-size: .68rem !important;
  font-weight: 620 !important;
}

.view-toggle-button svg { display: block !important; width: 15px !important; height: 15px !important; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

.view-toggle-button:hover,
.view-toggle-button.is-active,
.view-toggle-button.is-active:hover { border-color: var(--line-strong) !important; background: var(--surface-strong) !important; color: var(--ink) !important; }

/* Keep in mind needs breathing room around its underline. */

.focus-field-row .focus-input { padding-bottom: 10px !important; }

.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 !important;
  padding-top: 4px !important;
  padding-bottom: 11px !important;
  line-height: 1.45 !important;
}

/* 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 !important;
  max-width: 100% !important;
  display: block !important;
  margin-top: 3px !important;
  padding: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--faint) !important;
  font-size: .55rem !important;
  font-weight: 500 !important;
  line-height: 1.25 !important;
  white-space: nowrap !important;
}

.item-history span { white-space: nowrap !important; }

.carry-badge {
  display: inline !important;
  padding: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--faint) !important;
  font-size: inherit !important;
  font-style: normal !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  white-space: nowrap !important;
}

.open-work-meta { display: flex !important; align-items: center !important; flex-wrap: wrap !important; gap: 5px !important; }

.open-work-meta > * { color: var(--faint) !important; font-style: normal !important; font-weight: 500 !important; }

/* Unresolved: choosing dates is a draft until the user explicitly confirms. */

.modal--open-work .modal__panel {
  display: grid !important;
  grid-template-rows: minmax(0, 1fr) auto !important;
  max-height: min(760px, calc(100dvh - 1.5rem)) !important;
}

.modal--open-work .modal__scroll {
  min-height: 0 !important;
  max-height: none !important;
  overflow-y: auto !important;
  margin-bottom: 0 !important;
}

.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) !important;
  color: var(--ink) !important;
  box-shadow: inset 0 0 0 1px var(--line-strong) !important;
}

.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 !important; }

.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) !important; font-size: .62rem !important; font-weight: 540 !important; }

.end-day-habit__stats { min-width: 0 !important; display: block !important; }

.end-day-habit__stats strong { font-size: .68rem !important; font-weight: 600 !important; color: var(--muted) !important; white-space: nowrap; }

.end-day-habit__stats small { display: none !important; }







/* 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) !important;
  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; }
}

/* v27 — 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 !important;
  color: var(--muted);
  font-size: .82rem;
  line-height: 1.5;
}
.modal--day-closed .day-closed-reopen {
  width: fit-content;
  margin: 4px 0 0;
  padding: 5px 0;
  border: 0;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: .72rem;
  font-weight: 620;
  cursor: pointer;
}
.modal--day-closed .day-closed-reopen:hover { color: var(--ink); }
.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: .84rem;
  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-review-link {
  width: fit-content;
  margin: 14px 0 0;
}
.modal--day-closed .day-closed-actions {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 10px !important;
  margin-top: 22px !important;
  padding-top: 0 !important;
}
.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);
}
@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 !important; }
}

/* v28 — Daily Notes uses the same rich checklist language as block Notes. */
.day-notes-editor {
  cursor: text;
  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;
}

/* v28 — harmonize Daily writing controls without flattening heading hierarchy. */
:root { --planner-control-font: .84rem; }
.focus input,
.item-input,
.notes,
.day-closed-prep input,
.day-closed-prep textarea { font-size: var(--planner-control-font) !important; }

/* v30 — 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: 520; }
.modal[data-stacked-over="true"] .modal__backdrop { background: color-mix(in srgb, var(--ink) 18%, transparent); }


/* styles/schedule.css */
/* Schedule domain styles. */

.schedule-chip svg {
  width: 16px;
  height: 16px;
  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-chip svg { width: 12px; height: 12px; }
.schedule-section {
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.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-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: 6px 8px 7px 9px;
  border-left: 2px solid var(--block-color, var(--accent));
  border-radius: 0 8px 8px 0;
  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 {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: .76rem;
  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; }
.hours-setting { display: grid; grid-template-columns: 1fr 1fr; gap: .65rem; }
.schedule-chip { cursor: pointer; }
.hours-setting .select-trigger { justify-content: center; text-align: center; }
.hours-setting .select-trigger__value { justify-content: center; width: 100%; }
.hours-setting .select-trigger { position: relative; }
.hours-setting .select-trigger .select-chevron { position: absolute; right: 9px; }
.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: .68rem;
  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 { padding: 6px 8px 7px 9px; }
.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 { width: 11px; height: 11px; 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__title { font-size: .68rem; line-height: 1.15; }
.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: 100%; }
  .workspace[data-mobile-active="plan"] .schedule-section { display: none; }
  .schedule-head { margin-top: 5px; }
}
@media (max-width: 620px) {
  .schedule { --hour: 64px; }
  .block-form { grid-template-columns: 1fr; }
  .hours-setting { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
  .hours-setting { 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); }
.time-block.done { opacity: .66; }
.time-block.done .time-block__title {
  color: var(--muted);
  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 { opacity: .8; }
.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__title {
  white-space: normal;
  text-overflow: clip;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}
.time-block__notes {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: var(--note-lines);
  line-clamp: var(--note-lines);
  overflow: hidden;
  margin-top: 4px;
  color: color-mix(in srgb, var(--ink) 62%, var(--muted));
  font-size: .61rem;
  line-height: 1.35;
  white-space: pre-wrap;
}
.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: .68rem;
  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; }
}






.time-block__title { -webkit-line-clamp: var(--title-lines, 2); line-clamp: var(--title-lines, 2); }
.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 {
  margin-top: 4px;
  padding: 5px 6px;
  border-radius: 6px;
  background: color-mix(in srgb, var(--surface-strong) 55%, transparent);
  overflow: hidden;
  contain: paint;
}
.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;
}
.time-block.is-compact .time-block__notes,
.time-block.is-micro .time-block__notes { display: none; }
.block-notes-field textarea { min-height: 124px; }
.block-form .block-submit { padding-inline: 34px; }
@media (max-width: 790px) {
  .schedule-scroll { padding-bottom: 62px; }
}




.time-block__notes {
  display: block;
  -webkit-line-clamp: unset;
  line-clamp: unset;
  white-space: normal;
}






.schedule-head__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
}
.block-check {
  width: 20px !important;
  height: 20px !important;
  min-width: 20px;
  border-radius: 6px !important;
}
.block-check::after { left: 5.5px !important; top: 2px !important; width: 4.5px !important; height: 9px !important; }
.time-block.is-micro .block-check { width: 20px !important; height: 20px !important; min-width: 20px; border-radius: 6px !important; }
.time-block.is-micro .block-check::after { left: 5.5px !important; top: 2px !important; width: 4.5px !important; height: 9px !important; }
.schedule { background: none !important; }
.hour-label {
  width: 100%;
  padding-right: 0;
  background: transparent !important;
}
.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 { width: 18px; height: 18px; 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 { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.55; stroke-linecap: round; stroke-linejoin: round; }
.block-category-trigger { font-size: .78rem !important; }
.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 !important; }
}




@media (max-width: 790px) {
  .schedule-head { align-items: center; }
  .schedule-head__actions { gap: 3px; }
}
.block-notes-field { order: initial !important; }
.block-form > .form-error { order: 35; }




.time-block__title,
.time-block__notes { text-wrap: pretty; }
.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 !important;
  margin-left: 1px;
  border-radius: 6px;
}
.block-title-row:has([data-block-done][hidden]) { grid-template-columns: minmax(0,1fr) !important; }
.block-category-trigger {
  width: 100%;
  min-height: 38px;
  padding-inline: 10px;
  font-size: .78rem !important;
}
.duration-shortcuts { display: grid !important; grid-template-columns: repeat(6, minmax(0,1fr)); gap: 5px; }
.duration-shortcuts button {
  width: 100%;
  min-height: 34px;
  padding: 5px 6px !important;
  border: 1px solid transparent !important;
  border-radius: 8px;
  background: transparent !important;
  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) !important; background: color-mix(in srgb, var(--soft) 50%, transparent) !important; color: var(--ink); }
.duration-shortcuts button.is-active { border-color: var(--line) !important; background: var(--surface-strong) !important; 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 !important; gap: 7px; }
  .block-time-field { min-width: 0; }
  .block-time-controls { grid-template-columns: 1fr !important; }
  .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 !important; }
}
.time-menu-button { flex: 1 1 auto !important; width: auto !important; min-width: 34px; justify-content: flex-end !important; padding-right: 10px !important; margin-left: 0 !important; border-radius: 0 8px 8px 0 !important; }
@media (max-width:620px) {
  .time-menu-button { flex:1 1 auto !important; }
}
@media (max-width:620px) {
  .block-time-layout:not(.has-end-date) { display:grid !important; grid-template-columns:1fr 1fr !important; gap:7px !important; }
  .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 !important; }
  .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 !important; 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% !important; min-width:0; padding-left:6px !important; text-align:center; }
  .block-time-layout:not(.has-end-date) .time-menu-button { width:32px !important; min-width:32px; padding-right:8px !important; }
}
.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 !important; }
.block-time-layout:not(.has-end-date) .block-time-field--end .block-time-controls { grid-template-columns: 142px !important; }
.block-time-layout:not(.has-end-date) .time-combo { width: 142px; }
.block-time-layout:not(.has-end-date) .time-input { flex: 0 0 64px !important; width: 64px !important; }
@media (max-width: 790px) {
  .schedule-scroll { max-height: calc(100dvh - var(--topbar-height, 74px) - 70px) !important; }
}
@media (max-width: 620px) {
  .modal__actions--block:not(.is-add) > [data-block-delete] { width: 40px; height: 38px; padding: 0 !important; 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 !important;
    grid-template-columns: minmax(112px, 1fr) 96px 96px !important;
    gap: 6px !important;
    align-items: end;
  }
  .block-time-layout:not(.has-end-date) .block-time-field { display: contents !important; }
  .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 !important; }
  .block-time-layout:not(.has-end-date) .block-time-controls { display: contents !important; }
  .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 !important; }
  .block-time-layout:not(.has-end-date) .block-time-field--end .time-combo { grid-column: 3; grid-row: 2; width: 96px !important; }
  .block-time-layout:not(.has-end-date) .mobile-time-label { display: none !important; }
  .block-time-layout:not(.has-end-date) .time-input { flex: 0 0 58px !important; width: 58px !important; min-width: 0; padding-inline: 5px !important; text-align: center; }
  .block-time-layout:not(.has-end-date) .time-menu-button { flex: 1 1 auto !important; min-width: 32px !important; padding-right: 7px !important; }
}
@media (max-width: 790px) {
  .schedule-scroll { padding-bottom: 48px !important; max-height: calc(100dvh - var(--topbar-height, 74px) - 54px) !important; }
}
.time-block { z-index: 8; }
.time-block.is-dragging,
.time-block.is-resizing { z-index: 30; }
.time-block.is-current {
  background: #9a5149 !important;
  color: #fffaf4 !important;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, #743a35 58%, transparent), 0 4px 13px rgba(69,36,33,.10) !important;
}
.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 !important; }
.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) !important; color: #fffaf4 !important; }
.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; }
@media (max-width: 790px) {
  .schedule-scroll { padding-bottom: 42px !important; max-height: calc(100dvh - var(--topbar-height, 74px) - 48px) !important; }
  .modal__actions--block:not(.is-add) > [data-block-delete] { grid-row: 1; align-self: center; }
}
.time-block { z-index:4!important; }
.time-block.is-current { z-index:6!important; overflow:hidden; }
.time-block.is-dragging,
.time-block.is-resizing { z-index:30!important; }
.time-block__meta .category-dot { flex:0 0 6px!important; width:6px!important; height:6px!important; margin-left:1px; box-sizing:border-box; }
.time-block.is-current .category-dot { outline-offset:1px; }
.time-block { border-left: 0 !important; padding-left: 12px !important; }
.time-block::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 3px; border-radius: 8px 0 0 8px; background: var(--block-color, var(--accent)); opacity: .9; pointer-events: none; }
.time-block.is-current::before { width: 4px; }
.time-block__meta .category-dot { margin-left: 0 !important; outline: none !important; }
.time-block { z-index: 4 !important; }
.time-block.is-current { z-index: 6 !important; }
@media (max-width: 620px) {
  .modal__actions--block:not(.is-add) > [data-block-delete] {
    grid-column: 1 !important;
    grid-row: 1 !important;
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    border-radius: 9px !important;
    background: color-mix(in srgb, var(--danger) 7%, var(--soft)) !important;
  }
  .modal__actions--block:not(.is-add) .modal__actions-right > .block-submit {
    grid-column: 3 !important;
    grid-row: 1 !important;
    width: 100% !important;
  }
  .modal__actions--block.is-add .modal__actions-right > .block-submit { grid-column: 2 !important; width:100% !important; }
}
.time-block__meta .category-dot { margin-left:2px !important; outline:none !important; box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--surface-strong) 55%,transparent) !important; }
.time-block.is-current .category-dot { outline:none !important; }
.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 !important; }
.schedule-head { margin-top: 10px !important; }
.workspace.is-week-view .schedule-head { display: none !important; }
.time-block { z-index: 3; }
.time-block.is-current { z-index: 4; }
.time-block__meta .category-dot {
  margin-left: 4px !important;
  width: 6px !important;
  height: 6px !important;
  flex: 0 0 6px !important;
  box-shadow: inset 0 0 0 1px color-mix(in srgb,var(--surface-strong) 65%,transparent) !important;
}
.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: text;
  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 #fff;
  border-width: 0 1.5px 1.5px 0;
  transform: rotate(45deg);
}
.time-block__notes { display: -webkit-box; }
.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 !important; }
.time-block__meta { padding-left: 2px !important; }
.time-block__meta .category-dot { margin-left: 0 !important; }
.time-block.is-current { overflow: hidden; }
.schedule-head { margin-top: 0 !important; }
.block-note-line { width: 100%; min-width: 0; }
.block-note-line--check { width: 100%; grid-template-columns: 18px minmax(0,1fr) !important; 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 !important; }
.block-notes-editor > .block-note-line { display: block; width: 100% !important; min-width: 0 !important; }
.block-notes-editor > .block-note-line--check { display: grid !important; grid-template-columns: 20px minmax(0,1fr) !important; gap: 7px !important; }
.block-notes-editor > .block-note-line--check > span { display: block !important; width: auto !important; min-width: 0 !important; white-space: pre-wrap !important; overflow-wrap: break-word !important; word-break: normal !important; }





/* 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; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; margin: .25rem 0 .85rem; }
.week-review-summary > div { padding: 9px 10px; border-radius: 9px; background: var(--soft); }
.week-review-summary > div strong { display: block; font-size: .86rem; }
.week-review-summary > div span,
.week-review-summary section > span { color: var(--faint); font-size: .57rem; text-transform: uppercase; letter-spacing: .055em; }
.week-review-summary section { grid-column: 1 / -1; padding: 8px 2px 0; }
.week-review-summary section > span { display: block; margin-bottom: 4px; font-weight: 650; }
.week-review-summary section p { margin: 3px 0; font-size: .68rem; }
.week-review-summary section em { color: var(--muted); font-size: .6rem; font-style: normal; }
.week-review-category { display: flex; align-items: center; gap: 7px; }
.week-review-category i { width: 7px; height: 7px; flex: 0 0 7px; border-radius: 999px; }
.week-review-category em { margin-left: auto; }
.week-review-summary + .day-closed-actions:has([data-review-open-work]:not([hidden])) { grid-template-columns: repeat(3, 1fr) !important; }
.week-review-summary + .day-closed-actions:has([data-review-open-work]:not([hidden])) > .text-button { grid-column: 1; }
.week-review-summary + .day-closed-actions:has([data-review-open-work]:not([hidden])) [data-review-open-work] { grid-column: 2; }
.week-review-summary + .day-closed-actions:has([data-review-open-work]:not([hidden])) [data-prepare-next-day] { grid-column: 3 !important; }

/* 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: .56rem;
  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-time-block {
  position: absolute;
  z-index: 5;
  min-width: 0;
  overflow: hidden;
  display: grid;
  align-content: start;
  gap: 2px;
  padding: 6px 7px 5px 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;
}
.week-time-block:hover { background: color-mix(in srgb, var(--block-color) 14%, var(--surface-strong)); }
.week-time-block strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .64rem; font-weight: 660; }
.week-time-block span { color: var(--muted); font-size: .52rem; font-variant-numeric: tabular-nums; }
.week-time-block i { position: absolute; top: 6px; right: 6px; width: 6px; height: 6px; border-radius: 50%; }
.week-time-block.is-micro { grid-template-columns: minmax(0, 1fr) auto; align-items: center; padding-top: 4px; }
.week-time-block.is-micro strong { font-size: .58rem; }
.week-time-block.is-micro span { font-size: .5rem; }
.week-time-block.done { opacity: .56; }

.week-now-line {
  position: absolute;
  z-index: 2;
  left: 0;
  right: 0;
  border-top: 1px solid var(--current-time);
  pointer-events: none;
}
.week-now-line span {
  position: absolute;
  right: 5px;
  top: 0;
  transform: translateY(-50%);
  padding: 1px 4px;
  border-radius: 5px;
  background: var(--current-time);
  color: #fff;
  font-size: .52rem;
  font-variant-numeric: tabular-nums;
}

.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; }
}

/* v30 — interactive completion inside Week blocks ----------------------- */
.week-time-block {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
}
.week-time-block__copy { min-width: 0; display: grid; gap: 2px; }
.week-time-block__check {
  width: 20px;
  height: 20px;
  align-self: start;
  margin: -1px -1px 0 4px;
  background: color-mix(in srgb, var(--surface-strong) 90%, transparent);
}
.week-time-block.is-micro .week-time-block__copy { align-self: center; }
.week-time-block.is-micro .week-time-block__copy span { display: none; }
.week-time-block.is-micro .week-time-block__check { align-self: center; margin-top: 0; }
.week-time-block > i { right: 31px; }

/* v31 — Week blocks use the same title → category → time hierarchy as Day. */
.week-time-block__copy { gap: 1px; }
.week-time-block__copy > strong {
  line-height: 1.12;
}
.week-time-block__category,
.week-time-block__time {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1.08;
}
.week-time-block__category {
  display: flex;
  align-items: center;
  gap: 4px;
  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__time {
  color: var(--faint);
  font-size: .49rem;
  font-variant-numeric: tabular-nums;
}
.week-time-block.is-micro {
  align-items: start;
  padding-top: 3px;
  padding-bottom: 3px;
}
.week-time-block.is-micro .week-time-block__copy { align-self: start; gap: 0; }
.week-time-block.is-micro .week-time-block__copy span { display: flex; }
.week-time-block.is-micro strong { font-size: .55rem; line-height: 1.05; }
.week-time-block.is-micro .week-time-block__category,
.week-time-block.is-micro .week-time-block__time { font-size: .43rem; line-height: 1.02; }
.week-time-block.is-micro .week-time-block__category i { width: 5px; height: 5px; flex-basis: 5px; }


/* 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 !important; }
@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;
  grid-template-columns: 1fr 1fr;
  gap: 3px;
  margin: -.15rem 0 1rem;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--soft);
}
.stats-tabs button {
  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); }
.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 !important; border-top: 0 !important; }
.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)) !important; }
  .week-chart-wrap { overflow: hidden !important; }
  .week-chart { width: 100% !important; min-width: 0 !important; }
  .week-legend { grid-template-columns: 1fr 1fr !important; }
}
.week-chart-tooltip { transform: none !important; margin: 0 !important; }
.week-legend > div { padding-inline: 7px !important; }
.week-chart-tooltip { position: fixed !important; z-index: 180 !important; max-width: 210px; }
.week-chart-wrap { position:relative!important; }
.week-chart-tooltip { position:absolute!important; inset:auto!important; z-index:18!important; max-width:min(210px, calc(100% - 12px))!important; 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 !important; inset: auto !important; z-index: 260 !important; pointer-events: none; max-width: min(210px, calc(100vw - 24px)) !important; }
.week-legend { padding-inline: 4px; }
@media (max-width: 790px) {
  .actions > [data-stats-open] { display: none !important; }
}
.week-chart-wrap { position: relative !important; overflow: hidden !important; }
.week-chart-tooltip { position: absolute !important; inset: auto !important; transform: none !important; z-index: 22 !important; max-width: min(210px, calc(100% - 16px)) !important; }
@media (max-width:790px) {
  .actions > [data-stats-open] { display:none !important; }
}
.stats-this-week {
  min-height: 30px !important;
  padding: 5px 8px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: transparent !important;
  color: var(--muted) !important;
  font-size: .7rem !important;
  font-weight: 560 !important;
}
.stats-this-week:hover,
.stats-this-week:focus-visible { outline: 0 !important; background: var(--soft) !important; color: var(--ink) !important; }
.week-chart-wrap { position: relative !important; overflow: hidden !important; }
.week-chart-tooltip {
  position: absolute !important;
  inset: auto !important;
  z-index: 24 !important;
  min-width: 150px !important;
  max-width: 196px !important;
  margin: 0 !important;
  transform: none !important;
  pointer-events: none !important;
  box-shadow: 0 10px 28px rgba(31,27,22,.14) !important;
}
.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 !important; }
.week-chart-svg-tooltip { visibility: hidden; pointer-events: none; }
.week-chart-svg-tooltip rect { vector-effect: non-scaling-stroke; }



/* styles/pip.css */
/* Pip domain styles. */

@media screen {
  .pip-plan-polish-placeholder { display:none; }
}
@media (max-width: 790px) {
  .actions > [data-pip] { display: none !important; }
}
.pip-topbar { grid-template-columns:minmax(118px,1fr) auto minmax(78px,1fr) !important; }
.pip-date-nav { justify-self:center !important; }
.pip-topbar > time { justify-self:end !important; min-width:68px; text-align:right; }
@media (max-width:790px) {
  .actions > [data-pip] { display:none !important; }
}
.pip-unresolved-list { display: grid; gap: 5px; }
.pip-unresolved-list > div { padding: 8px 9px; border-radius: 9px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.pip-unresolved-list strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 10.5px; }
.pip-unresolved-list small { display: block; margin-top: 2px; color: var(--faint); font-size: 8.5px; }



/* 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; }

.category-settings {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .55rem;
}

.category-setting {
  min-width: 0;
  min-height: 54px;
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) 30px 30px;
  align-items: center;
  gap: 7px;
  padding: .45rem .5rem;
  border-radius: 10px;
  background: color-mix(in srgb, var(--surface-strong) 74%, transparent);
}
.category-setting .category-name { width: 100%; min-height: 35px; background: transparent; }
.category-setting .category-archive { justify-self: center; opacity: .55; }
.category-setting .category-archive:hover { opacity: 1; background: var(--soft); }
.category-setting .category-remove { justify-self: end; }

.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: #fff;
  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 !important; 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--add {
  min-width: 0;
  min-height: 54px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: color-mix(in srgb, var(--surface-strong) 74%, transparent);
  color: var(--muted);
  font: inherit;
  font-size: .78rem;
  cursor: pointer;
}
.category-setting--add:hover { background: var(--soft); color: var(--ink); }
.category-setting--add svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.65; }

.archived-categories-head {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 9px;
  padding: 11px 3px 3px;
  border-top: 1px solid var(--line);
}
.archived-categories-head > div { display: grid; gap: 2px; }
.archived-categories-head span { color: var(--muted); font-size: .68rem; font-weight: 680; }
.archived-categories-head small { color: var(--faint); font-size: .59rem; }
.archived-categories-head strong { color: var(--faint); font-size: .62rem; }
.category-setting--archived { grid-template-columns: 34px minmax(0, 1fr) 34px 34px; opacity: .72; }
.archived-category-swatch {
  width: 18px;
  height: 18px;
  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;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--muted);
  font-size: .74rem;
}

/* Three distinct color palettes. */
.color-popover--palettes {
  width: min(332px, calc(100vw - 24px)) !important;
  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 !important; }

@media (max-width: 790px) {
  .actions > [data-settings-open] { display: none !important; }
}

@media (max-width: 680px) {
  .category-settings { grid-template-columns: 1fr; }
  .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); }
}

/* v30 — 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); }

.app-install-setting {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px 12px;
}
.app-install-setting > div { min-width: 0; display: grid; gap: 2px; }
.app-install-setting > div span { color: var(--faint); font-size: .64rem; }
.app-install-setting > div strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .76rem; font-weight: 620; }
.app-installed-note { color: var(--muted); font-size: .72rem; }

.modal--onboarding .modal__panel { width: min(540px, calc(100vw - 24px)); padding: 0; overflow: hidden; }
.onboarding-step { display: grid; gap: 18px; padding: clamp(28px, 5vw, 44px); }
.onboarding-step > h2 { margin: -4px 0 0; font-size: clamp(1.38rem, 2.7vw, 1.85rem); line-height: 1.06; letter-spacing: -.035em; text-wrap: pretty; }
.onboarding-step > p:not(.modal__eyebrow) { margin: -6px 0 0; color: var(--muted); font-size: .88rem; line-height: 1.55; }
.onboarding-personal {
  max-width: 34rem;
  margin: -5px 0 4px !important;
  color: var(--muted) !important;
  font-size: .84rem !important;
  line-height: 1.6 !important;
}
.onboarding-personal em { font-style: italic; }
.onboarding-primary { width: 100%; min-height: 46px; margin-top: 4px; }
.onboarding-field { display: grid; gap: 8px; }
.onboarding-field > span { color: var(--muted); font-size: .72rem; font-weight: 650; }
.onboarding-field > small { color: var(--faint); font-size: .64rem; }
.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; }

@media (max-width: 620px) {
  .planning-days-picker { gap: 4px; }
  .planning-days-picker button { min-height: 44px; }
  .planning-days-picker button small { display: none; }
  .app-install-setting { grid-template-columns: 1fr; }
  .app-install-setting .secondary-button { width: 100%; }
}

/* v31 — installation is an action with device-specific guidance, not a timezone setting. */
.app-install-setting {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
}
.app-install-setting > p {
  min-width: 0;
  margin: 0;
  color: var(--muted);
  font-size: .72rem;
  line-height: 1.5;
  text-wrap: pretty;
}
.app-installed-note { justify-self: end; }
@media (max-width: 620px) {
  .app-install-setting { grid-template-columns: 1fr; }
  .app-install-setting .secondary-button { width: 100%; }
  .app-installed-note { justify-self: start; }
}


/* v32 — three-step first run ------------------------------------------------ */
.modal--onboarding .modal__panel { width: min(580px, calc(100vw - 24px)); }
.onboarding-progress {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  padding: 18px clamp(28px, 5vw, 44px) 0;
}
.onboarding-progress span {
  height: 2px;
  border-radius: 999px;
  background: var(--line);
  transition: background 180ms ease, transform 180ms ease;
}
.onboarding-progress span.is-active,
.onboarding-progress span.is-complete { background: var(--ink); }
.onboarding-progress span.is-active { transform: scaleY(1.5); }
.onboarding-step { padding-top: 24px; }
.onboarding-step--how { gap: 20px; }
.onboarding-how-list {
  display: grid;
  gap: 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.onboarding-how-list > div {
  display: grid;
  grid-template-columns: minmax(110px, .38fr) minmax(0, 1fr);
  gap: 18px;
  padding: 11px 0;
  border-bottom: 1px solid var(--line);
}
.onboarding-how-list > div:last-child { border-bottom: 0; }
.onboarding-how-list strong { color: var(--ink); font-size: .78rem; font-weight: 650; }
.onboarding-how-list span { color: var(--muted); font-size: .78rem; line-height: 1.45; text-wrap: pretty; }
@media (max-width: 520px) {
  .onboarding-how-list > div { grid-template-columns: 1fr; gap: 3px; }
}


/* styles/horizon.css */
/* Horizon -----------------------------------------------------------------
   Strategic layer of the planner. Horizon intentionally reuses the Daily
   planner's surfaces, buttons, checkboxes, typography and popovers. */

[data-horizon-modal] .modal__panel {
  width: min(96vw, 1680px);
  max-width: none;
  height: min(94dvh, 1040px);
  max-height: 94dvh;
  overflow: hidden;
}

body.app-expanded [data-horizon-modal] .modal__panel {
  zoom: 1 !important;
  width: min(96vw, 1680px) !important;
  height: min(94dvh, 1040px) !important;
  max-height: 94dvh !important;
}

[data-horizon-modal] .modal__close { z-index: 40; }

.horizon-header {
  position: absolute;
  z-index: 20;
  top: 0;
  left: 0;
  right: 54px;
  min-height: 48px;
  display: flex;
  align-items: center;
  padding: 0 18px;
  background: color-mix(in srgb, var(--paper) 96%, transparent);
  backdrop-filter: blur(10px);
}

.horizon-title-row { width: 100%; min-width: 0; }
.horizon-nav--title { display: flex; align-items: center; min-height: 34px; }
.horizon-screen-kicker {
  color: var(--faint);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .055em;
  text-transform: uppercase;
}

.horizon-scroll {
  height: calc(100% - 50px) !important;
  max-height: none !important;
  margin: 50px 5px 6px !important;
  padding: 0 18px 24px !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  scrollbar-gutter: stable;
}

.horizon-content,
.horizon-unified {
  --hz-label: .68rem;
  --hz-body: .82rem;
  --hz-heading: .98rem;
  --hz-period: 1.32rem;
  min-width: 0;
}

.horizon-unified {
  display: grid;
  gap: 20px;
  color: var(--ink);
  font-size: var(--hz-body);
}

.horizon-unified h2,
.horizon-unified h3,
.horizon-unified p { text-wrap: pretty; }

/* Shared Horizon headings ------------------------------------------------ */
.horizon-period-header {
  position: sticky;
  z-index: 12;
  top: 0;
  display: grid;
  justify-items: start;
  gap: 4px;
  margin: 0;
  padding: 12px 0 10px;
  border: 0;
  background: var(--paper);
}

.horizon-period-header > span,
.horizon-compass-head span,
.horizon-section-heading span,
.horizon-side-heading > span,
.horizon-mini-heading > span,
.horizon-year-month {
  color: var(--faint);
  font-size: var(--hz-label);
  font-weight: 700;
  letter-spacing: .045em;
  text-transform: uppercase;
}

.horizon-period-with-nav {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 5px;
}

.horizon-period-with-nav h2 {
  margin: 0 4px 0 0;
  color: var(--ink);
  font-size: var(--hz-period);
  font-weight: 690;
  line-height: 1.08;
  letter-spacing: -.035em;
}

.horizon-period-with-nav .icon-button { width: 30px; height: 30px; }

.horizon-compass-head,
.horizon-section-heading,
.horizon-side-heading { min-width: 0; }

.horizon-compass-head h3,
.horizon-section-heading h3 {
  margin: 3px 0 0;
  color: var(--ink);
  font-size: var(--hz-heading);
  font-weight: 660;
  line-height: 1.3;
  letter-spacing: -.02em;
}

.horizon-side-heading p,
.horizon-mini-heading small {
  margin: 3px 0 0;
  color: var(--muted);
  font-size: var(--hz-label);
  line-height: 1.45;
}

/* Annual compass --------------------------------------------------------- */
.horizon-annual-compass {
  display: grid;
  grid-template-columns: minmax(340px, .82fr) minmax(0, 1.65fr);
  gap: 12px;
}

.horizon-compass-card,
.horizon-winning-section,
.horizon-side-section {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: transparent;
  box-shadow: none;
}

.horizon-compass-card { padding: 14px; }

.horizon-misogi-entry {
  min-width: 0;
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr) 34px;
  align-items: center;
  gap: 9px;
  margin-top: 10px;
}

.horizon-misogi-entry textarea,
.horizon-adventure-title {
  width: 100%;
  min-width: 0;
  min-height: 38px;
  margin: 0;
  padding: 8px 2px;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  outline: 0;
  resize: none;
  overflow: hidden;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: var(--hz-body);
  font-weight: 580;
  line-height: 1.35;
  caret-color: var(--ink);
}

.horizon-misogi-entry textarea:focus,
.horizon-adventure-title:focus { border-bottom-color: var(--line-strong); }

.horizon-item-meta {
  min-width: 0;
  min-height: 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 5px;
  color: var(--faint);
  font-size: var(--hz-label);
}

.horizon-misogi-meta { margin-left: 29px; }
.horizon-countdown { color: var(--faint); font-size: var(--hz-label); font-weight: 530; }
.horizon-item-period { min-width: 0; display: flex; align-items: center; justify-content: flex-end; gap: 4px; }
.horizon-item-period time {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--muted);
  font-size: var(--hz-label);
  font-variant-numeric: tabular-nums;
}

.horizon-make-real {
  display: grid;
  gap: 7px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}

.horizon-mini-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.horizon-milestone-list { display: grid; gap: 5px; }
.horizon-milestone-row {
  min-width: 0;
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr) auto 28px;
  align-items: center;
  gap: 7px;
}
.horizon-milestone-row > input[type="text"] {
  min-width: 0;
  min-height: 34px;
  padding: 6px 2px;
  border: 0;
  border-bottom: 1px solid var(--line);
  outline: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: var(--hz-body);
}
.horizon-milestone-row > input[type="text"]:focus { border-bottom-color: var(--line-strong); }
.horizon-milestone-row > button[data-milestone-date] {
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 7px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: var(--hz-label);
  cursor: pointer;
}
.horizon-milestone-row > button[data-milestone-date] svg { width: 12px; height: 12px; }
.horizon-milestone-remove {
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--faint);
  font: inherit;
  cursor: pointer;
}
.horizon-milestone-remove:hover { background: var(--soft); color: var(--danger); }
.horizon-milestone-row.done { opacity: .58; }
.horizon-milestone-row.done input[type="text"] { text-decoration: line-through; }
.horizon-add-row {
  width: fit-content;
  min-height: 30px;
  padding: 5px 8px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: var(--hz-label);
  font-weight: 600;
  cursor: pointer;
}
.horizon-add-row:hover { background: var(--soft); color: var(--ink); }

/* Mini-adventures -------------------------------------------------------- */
.horizon-adventure-grid--compass {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
  margin-top: 10px;
}

.horizon-adventure-card,
.horizon-adventure-add {
  min-width: 0;
  min-height: 116px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: transparent;
}

.horizon-adventure-card {
  display: grid;
  grid-template-rows: auto auto;
  align-content: start;
  gap: 5px;
}

.horizon-adventure-title-row {
  min-width: 0;
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr) 34px;
  align-items: center;
  gap: 7px;
}

.horizon-adventure-card.is-done { opacity: .58; }
.horizon-adventure-card.is-done .horizon-adventure-title { text-decoration: line-through; }

.horizon-adventure-add {
  display: grid;
  place-items: center;
  align-content: center;
  gap: 5px;
  color: var(--muted);
  font: inherit;
  font-size: var(--hz-label);
  cursor: pointer;
}
.horizon-adventure-add:hover { background: var(--soft); color: var(--ink); }
.horizon-adventure-add svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.7; }

/* Winning habits --------------------------------------------------------- */
.horizon-winning-section { padding: 14px; }
.horizon-habit-list--cards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-top: 11px;
}

.horizon-habit-card {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 11px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: transparent;
  overflow: hidden;
}
.horizon-habit-card.is-locked { opacity: .62; }

.horizon-habit-card__head {
  min-width: 0;
  min-height: 38px;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
}
.horizon-habit-quarter { color: var(--faint); font-size: var(--hz-label); font-weight: 700; }
.horizon-habit-card__head input {
  width: 100%;
  min-width: 0;
  min-height: 38px;
  margin: 0;
  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);
  font-weight: 520;
}
.horizon-habit-card__head input:focus { border-color: var(--line-strong); }
.horizon-habit-card__head input:disabled { background: transparent; color: var(--faint); }

.horizon-habit-statsline {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.horizon-habit-statsline > span { min-width: 0; display: grid; justify-items: end; gap: 2px; }
.horizon-habit-statsline strong {
  color: var(--ink);
  font-size: .82rem;
  font-weight: 650;
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
}
.horizon-habit-statsline small { color: var(--faint); font-size: var(--hz-label); line-height: 1.1; white-space: nowrap; }

.horizon-habit-summary {
  width: 100%;
  min-height: 34px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 7px 9px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: var(--hz-label);
  font-weight: 600;
  cursor: pointer;
}
.horizon-habit-summary:hover:not(:disabled) { background: var(--soft); color: var(--ink); }
.horizon-habit-summary:disabled { opacity: .5; cursor: default; }
.horizon-habit-summary svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.7; transition: transform 210ms cubic-bezier(.22,1,.36,1); }
.horizon-habit-card.is-expanded .horizon-habit-summary svg { transform: rotate(180deg); }

.horizon-habit-details {
  width: 100%;
  min-width: 0;
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  overflow: hidden;
  transition: grid-template-rows 220ms cubic-bezier(.22,1,.36,1), opacity 170ms ease;
}
.horizon-habit-card.is-expanded .horizon-habit-details { grid-template-rows: 1fr; opacity: 1; }
.horizon-habit-details__inner { width: 100%; min-width: 0; min-height: 0; overflow: hidden; }
.horizon-habit-details .habit-heatmap {
  --heat-weeks: 14;
  width: 100%;
  min-height: 74px;
  display: grid;
  grid-auto-flow: column;
  grid-template-rows: repeat(7, minmax(5px, 1fr));
  grid-template-columns: repeat(var(--heat-weeks), minmax(5px, 1fr));
  gap: 2px;
  overflow: hidden;
}
.horizon-habit-details .habit-heat-cell { min-width: 0; min-height: 0; aspect-ratio: 1; border-radius: 2px; background: var(--soft); }
.horizon-habit-details .habit-heat-cell.is-done { background: var(--ink); opacity: .72; }
.horizon-habit-details .habit-heat-cell.is-missed { background: color-mix(in srgb, var(--line-strong) 72%, transparent); }
.horizon-habit-details .habit-heat-cell.is-outside { background: transparent; }
.horizon-habit-metrics { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 6px 12px; margin-top: 8px; color: var(--faint); font-size: var(--hz-label); }

/* Selected month --------------------------------------------------------- */
.horizon-selected-month { display: grid; gap: 10px; }
.horizon-month-layout--focused {
  display: grid;
  grid-template-columns: minmax(0, 1.8fr) minmax(270px, .72fr);
  gap: 12px;
  align-items: start;
}

.month-calendar { min-width: 0; border: 1px solid var(--line); border-radius: 13px; overflow: hidden; background: transparent; }
.month-weekdays { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.month-weekdays span { padding: 10px 8px; color: var(--faint); font-size: var(--hz-label); font-weight: 700; text-align: center; text-transform: uppercase; }
.month-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.month-day {
  position: relative;
  min-width: 0;
  min-height: 82px;
  padding: 9px 10px;
  border: 0;
  border-top: 1px solid var(--line);
  border-right: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
  overflow: hidden;
}
.month-day:nth-child(7n) { border-right: 0; }
.month-day--empty { pointer-events: none; background: transparent; }
.month-day.is-weekend { background: color-mix(in srgb, var(--soft) 52%, transparent); }
.month-day.has-event { background: color-mix(in srgb, var(--surface-strong) 58%, transparent); }
.month-day.is-weekend.has-event { background: color-mix(in srgb, var(--surface-strong) 70%, var(--soft)); }
.month-day:hover:not(.month-day--empty) { background: var(--soft); }
.month-day.is-today { box-shadow: inset 0 0 0 1px var(--current-time); }
.month-day > span:first-child { font-size: var(--hz-body); font-weight: 650; }
.month-day > strong { display: block; margin-top: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--hz-label); font-weight: 590; }
.month-day__event-count { position: absolute; top: 9px; right: 10px; color: var(--faint); font-size: var(--hz-label); font-weight: 500; }
.month-day__density { position: absolute; right: 10px; bottom: 9px; width: calc(3px + var(--density) * 1px); height: calc(3px + var(--density) * 1px); border-radius: 50%; background: var(--faint); opacity: .55; }

.horizon-month-context { min-width: 0; display: grid; gap: 10px; }
.horizon-side-section { padding: 12px; }
.horizon-side-heading { margin-bottom: 8px; }
.horizon-side-row,
.horizon-keydate-row {
  width: 100%;
  min-width: 0;
  display: grid;
  grid-template-columns: 82px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 7px 6px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: var(--hz-body);
  text-align: left;
  cursor: pointer;
}
.horizon-side-row:hover,
.horizon-keydate-row:hover { background: var(--soft); }
.horizon-side-row > span,
.horizon-side-row > time,
.horizon-keydate-row time { color: var(--faint); font-size: var(--hz-label); font-weight: 520; font-variant-numeric: tabular-nums; }
.horizon-side-row strong,
.horizon-keydate-row strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--hz-body); font-weight: 580; }
.horizon-keydate-row svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.6; color: var(--faint); }
.horizon-keydate-list { display: grid; gap: 2px; }
.horizon-keydate-empty,
.horizon-keydate-add-more {
  width: 100%;
  min-height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 7px 9px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: var(--hz-label);
  font-weight: 600;
  cursor: pointer;
}
.horizon-keydate-add-more { margin-top: 5px; border-color: transparent; }
.horizon-keydate-empty:hover,
.horizon-keydate-add-more:hover { background: var(--soft); color: var(--ink); }
.horizon-keydate-empty svg,
.horizon-keydate-add-more svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.7; }
.horizon-unresolved-row { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin: 6px 0; color: var(--ink); font-size: var(--hz-body); }
.horizon-unresolved-row > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.horizon-unresolved-row em { color: var(--faint); font-size: var(--hz-label); font-style: normal; white-space: nowrap; }

/* Year at a glance ------------------------------------------------------- */
.horizon-timeline-section { min-width: 0; }
.horizon-year-grid {
  min-width: 950px;
  margin-top: 10px;
  border: 1px solid var(--line);
  border-radius: 13px;
  overflow-x: auto;
  overflow-y: hidden;
  background: transparent;
}
.horizon-year-grid-head,
.horizon-year-row { display: grid; grid-template-columns: 54px minmax(860px, 1fr); }
.horizon-year-grid-head { border-bottom: 1px solid var(--line); }
.horizon-year-grid-head > div,
.horizon-year-days { display: grid; grid-template-columns: repeat(31, minmax(24px, 1fr)); }
.horizon-year-grid-head > div span { padding: 6px 0; color: var(--faint); font-size: var(--hz-label); text-align: center; }
.horizon-year-month { display: flex; align-items: flex-start; justify-content: center; padding: 9px 5px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.horizon-year-row:last-child .horizon-year-month,
.horizon-year-row:last-child .horizon-year-days { border-bottom: 0; }
.horizon-year-days {
  position: relative;
  min-height: calc(31px + var(--event-lanes) * 24px);
  border-bottom: 1px solid var(--line);
}
.horizon-year-cell {
  grid-row: 1;
  min-width: 0;
  height: 31px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-right: 1px solid var(--line);
  background: transparent;
  color: var(--faint);
  font: inherit;
  font-size: var(--hz-label);
  cursor: pointer;
}
.horizon-year-cell.is-weekend { background: color-mix(in srgb, var(--soft) 52%, transparent); }
.horizon-year-cell.is-outside { border-right: 0; background: var(--paper); pointer-events: none; }
.horizon-year-cell.is-last-valid { border-right: 1px solid var(--line); }
.horizon-year-cell.is-today { box-shadow: inset 0 0 0 1px var(--current-time); color: var(--ink); }
.horizon-year-cell.is-selected-day { background: var(--surface-strong); color: var(--ink); }
.horizon-year-cell:hover:not(.is-outside) { background: var(--soft); color: var(--ink); }
.horizon-year-events {
  position: absolute;
  z-index: 3;
  left: 0;
  right: 0;
  top: 31px;
  display: grid;
  grid-template-columns: repeat(31, minmax(24px, 1fr));
  grid-auto-rows: 22px;
  gap: 1px 0;
  pointer-events: none;
}
.horizon-year-event {
  grid-column: var(--event-start) / span var(--event-span);
  grid-row: calc(var(--event-lane) + 1);
  min-width: 0;
  min-height: 21px;
  display: flex;
  align-items: center;
  gap: 5px;
  margin: 0 1px;
  padding: 3px 6px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface-strong);
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
  overflow: hidden;
  pointer-events: auto;
}
.horizon-year-event:hover { border-color: var(--line-strong); background: var(--soft); }
.horizon-year-event small { flex: 0 0 auto; color: var(--faint); font-size: var(--hz-label); font-variant-numeric: tabular-nums; }
.horizon-year-event strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--hz-label); font-weight: 620; }
.horizon-year-event.is-single-day { padding-inline: 4px; }
.horizon-year-event.is-single-day small { display: none; }

/* Horizon popovers ------------------------------------------------------- */
.horizon-event-popover,
.horizon-year-day-editor,
.horizon-day-preview { display: grid; gap: 10px; }

.horizon-event-popover__head,
.horizon-year-day-editor__head,
.horizon-day-preview__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.horizon-event-popover__head > span,
.horizon-year-day-editor__head > span,
.horizon-day-preview__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 { width: 14px; height: 14px; 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,
.horizon-event-popover__dates label,
.horizon-year-day-editor__field { display: grid; gap: 5px; color: var(--muted); font-size: var(--hz-label); }
.horizon-event-popover__title input,
.horizon-year-day-editor__field 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,
.horizon-year-day-editor__field input:focus { border-color: var(--line-strong); }
.horizon-event-popover__dates { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.horizon-event-popover__dates button {
  width: 100%;
  min-width: 0;
  min-height: 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: var(--hz-body);
  cursor: pointer;
}
.horizon-event-popover__dates button:hover:not(:disabled) { background: var(--soft); border-color: var(--line-strong); }
.horizon-event-popover__dates button:disabled { color: var(--faint); cursor: default; }
.horizon-event-popover__dates button svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.horizon-event-popover__actions,
.horizon-year-day-editor__actions,
.horizon-day-preview__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,
.horizon-year-day-editor__actions > .primary-button { width: 100%; }
.horizon-event-popover__actions .danger-link-button { justify-self: start; }

.horizon-year-day-editor__head strong,
.horizon-day-preview__head strong { font-size: var(--hz-body); }
.horizon-year-day-editor__existing { display: grid; gap: 3px; }
.horizon-year-day-editor__existing p,
.horizon-day-preview p { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 8px; margin: 0; padding: 6px 0; border-bottom: 1px solid var(--line); }
.horizon-year-day-editor__existing p span,
.horizon-day-preview p span { color: var(--faint); font-size: var(--hz-label); }
.horizon-year-day-editor__existing p strong,
.horizon-day-preview p strong { min-width: 0; font-size: var(--hz-body); font-weight: 580; }

/* Shared custom period calendar ----------------------------------------- */
.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: 1280px) {
  .horizon-adventure-grid--compass { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .horizon-habit-list--cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  .horizon-annual-compass,
  .horizon-month-layout--focused { grid-template-columns: 1fr; }
  .horizon-year-grid { min-width: 820px; }
}

@media (max-width: 820px) {
  [data-horizon-modal] .modal__panel,
  body.app-expanded [data-horizon-modal] .modal__panel {
    width: calc(100vw - 12px) !important;
    height: calc(100dvh - 12px) !important;
    max-height: calc(100dvh - 12px) !important;
  }
  .horizon-scroll { padding-inline: 10px !important; }
  .horizon-adventure-grid--compass,
  .horizon-habit-list--cards { grid-template-columns: 1fr; }
  .month-day { min-height: 64px; padding: 7px; }
  .horizon-event-popover { width: min(360px, calc(100vw - 20px)) !important; }
  .horizon-event-popover__dates { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .horizon-habit-statsline > span { justify-items: start; }
}

/* Year-at-a-glance editor mirrors the Month inspector. */
.horizon-event-popover__title-row {
  grid-template-columns: minmax(0, 1fr) !important;
}
.horizon-event-popover__actions {
  display: grid !important;
  grid-template-columns: 34px minmax(0, 1fr) !important;
  gap: 8px !important;
  align-items: center !important;
}
.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 !important;
}
.horizon-event-popover__actions--single > * { width: 100%; }

/* v27 — Horizon hierarchy: fewer visual voices, more strategic presence. */
.horizon-content,
.horizon-unified {
  --hz-label: .72rem;
  --hz-body: .9rem;
  --hz-heading: 1.08rem;
  --hz-period: 1.46rem;
}
.horizon-unified { gap: 24px; }
.horizon-period-header { padding-block: 14px 12px; }
.horizon-annual-compass { gap: 14px; }
.horizon-compass-card,
.horizon-winning-section,
.horizon-side-section {
  border-color: color-mix(in srgb, var(--line) 88%, transparent);
  border-radius: 14px;
}
.horizon-compass-card,
.horizon-winning-section { padding: 16px; }
.horizon-compass-head h3,
.horizon-section-heading h3 { line-height: 1.25; }

/* Winning habits: one readable card per quarter, with data only when requested. */
.horizon-habit-list--cards { gap: 12px; margin-top: 14px; }
.horizon-habit-card {
  gap: 11px;
  padding: 13px;
  border-radius: 12px;
  overflow: visible;
}
.horizon-habit-card__head {
  min-height: 42px;
  grid-template-columns: 30px minmax(0, 1fr);
}
.horizon-habit-quarter { font-size: .74rem; }
.horizon-habit-card__head input {
  min-height: 42px;
  padding: 9px 10px;
  font-size: .84rem;
  font-weight: 560;
}
.horizon-habit-card.is-tracked .horizon-habit-card__head input[readonly] {
  border-color: transparent;
  background: var(--soft);
  cursor: default;
}
.horizon-habit-statsline {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  padding-left: 38px;
}
.horizon-habit-statsline > span {
  display: flex;
  align-items: baseline;
  justify-content: flex-start;
  gap: 5px;
}
.horizon-habit-statsline strong { font-size: .78rem; }
.horizon-habit-statsline small { font-size: .64rem; }
.horizon-habit-summary {
  min-height: 36px;
  margin-left: 38px;
  width: calc(100% - 38px);
}
.horizon-habit-details { margin-left: 38px; width: calc(100% - 38px); }
.horizon-habit-details .habit-heatmap { min-height: 82px; }

/* Year at a glance is a timeline; dates appear on intent, not as permanent noise. */
.horizon-year-grid { margin-top: 12px; }
.horizon-year-cell > span {
  opacity: 0;
  transform: translateY(1px);
  transition: opacity 120ms ease, transform 120ms ease;
}
.horizon-year-cell:hover > span,
.horizon-year-cell:focus-visible > span,
.horizon-year-cell.is-selected-day > span {
  opacity: 1;
  transform: translateY(0);
}
.horizon-year-cell:focus-visible { outline: 0; box-shadow: inset 0 0 0 1px var(--line-strong); }
.horizon-year-event { min-height: 23px; padding: 4px 7px; }
.horizon-year-event strong { font-size: .7rem; font-weight: 600; }
.horizon-year-event small { font-size: .64rem; }

/* The selected month is the working zoom level, so it gets a little more breathing room. */
.horizon-selected-month { gap: 12px; }
.horizon-month-layout--focused { gap: 14px; }
.horizon-side-section { padding: 14px; }
.horizon-side-row,
.horizon-keydate-row { min-height: 38px; }

@media (max-width: 1180px) {
  .horizon-habit-list--cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .horizon-content,
  .horizon-unified { --hz-label: .7rem; --hz-body: .86rem; --hz-heading: 1rem; --hz-period: 1.3rem; }
  .horizon-habit-list--cards { grid-template-columns: 1fr; }
  .horizon-habit-statsline,
  .horizon-habit-summary,
  .horizon-habit-details { margin-left: 0; width: 100%; padding-left: 0; }
}

/* v28 — Horizon: one continuous annual operating surface -----------------
   The year is a hierarchy, not a dashboard: Misogi → adventures →
   commitments → habits → year map → selected month. */

[data-horizon-modal] .modal__panel {
  width: min(98vw, 1780px);
  height: min(96dvh, 1120px);
  max-height: 96dvh;
}
body.app-expanded [data-horizon-modal] .modal__panel {
  width: min(98vw, 1780px) !important;
  height: min(96dvh, 1120px) !important;
  max-height: 96dvh !important;
}

.horizon-scroll {
  margin-top: 50px !important;
  padding: 0 24px 34px !important;
}

.horizon-content,
.horizon-unified {
  --hz-label: .7rem;
  --hz-body: .9rem;
  --hz-heading: 1.08rem;
  --hz-period: 1.52rem;
}

.horizon-unified {
  width: min(100%, 1480px);
  margin-inline: auto;
  gap: 18px;
}

/* Sticky year orientation ------------------------------------------------ */
.horizon-year-bar {
  position: sticky;
  z-index: 11;
  top: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, auto);
  align-items: center;
  gap: 24px;
  margin: 0 -2px;
  padding: 14px 2px 12px;
  border-bottom: 1px solid color-mix(in srgb, var(--line) 88%, transparent);
  background: color-mix(in srgb, var(--paper) 97%, transparent);
  backdrop-filter: blur(12px);
}

.horizon-year-bar__main { min-width: 0; display: grid; gap: 3px; }
.horizon-year-bar__main > span,
.horizon-year-bar__next > span,
.horizon-program-head > div > span,
.horizon-month-heading > div > span {
  color: var(--faint);
  font-size: var(--hz-label);
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.horizon-year-bar__next {
  min-width: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 7px;
  color: var(--muted);
}
.horizon-year-bar__next > span { grid-column: 1 / -1; }
.horizon-year-bar__next strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--ink);
  font-size: .82rem;
  font-weight: 610;
}
.horizon-year-bar__next time {
  color: var(--faint);
  font-size: var(--hz-label);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Shared strategic surfaces --------------------------------------------- */
.horizon-misogi-card,
.horizon-program-section,
.horizon-winning-section {
  min-width: 0;
  border: 1px solid color-mix(in srgb, var(--line) 90%, transparent);
  border-radius: 15px;
  background: transparent;
  box-shadow: none;
}

.horizon-program-section,
.horizon-winning-section { padding: 16px; }

.horizon-program-head {
  min-width: 0;
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 13px;
}
.horizon-program-head h3,
.horizon-compass-head h3 {
  margin: 3px 0 0;
  color: var(--ink);
  font-size: var(--hz-heading);
  font-weight: 660;
  line-height: 1.24;
  letter-spacing: -.02em;
}
.horizon-program-head p,
.horizon-compass-head p,
.horizon-month-heading > p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: .75rem;
  line-height: 1.45;
}
.horizon-program-progress {
  flex: 0 0 auto;
  display: grid;
  justify-items: end;
  gap: 1px;
  padding-bottom: 1px;
}
.horizon-program-progress strong {
  color: var(--ink);
  font-size: .96rem;
  font-weight: 680;
  font-variant-numeric: tabular-nums;
}
.horizon-program-progress span { color: var(--faint); font-size: var(--hz-label); white-space: nowrap; }

/* Misogi owns the full row ---------------------------------------------- */
.horizon-misogi-card {
  display: grid;
  grid-template-columns: minmax(360px, .88fr) minmax(480px, 1.12fr);
  overflow: hidden;
}
.horizon-misogi-card__primary,
.horizon-misogi-card__milestones { min-width: 0; padding: 18px; }
.horizon-misogi-card__milestones { border-left: 1px solid var(--line); }

.horizon-misogi-entry {
  grid-template-columns: 20px minmax(0, 1fr) 30px;
  gap: 10px;
  margin-top: 12px;
}
.horizon-misogi-entry textarea {
  min-height: 44px;
  padding-block: 9px;
  font-size: .98rem;
  font-weight: 610;
}
.horizon-misogi-meta { margin-left: 30px; }
.horizon-misogi-meta .horizon-item-period > span { color: var(--faint); font-size: var(--hz-label); }

.horizon-mini-heading {
  min-width: 0;
  min-height: 30px;
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 14px;
}
.horizon-mini-heading > div { min-width: 0; display: grid; gap: 2px; }
.horizon-mini-heading > strong {
  color: var(--muted);
  font-size: .78rem;
  font-weight: 620;
  font-variant-numeric: tabular-nums;
}
.horizon-empty-guidance {
  max-width: 520px;
  margin: 12px 0 0;
  color: var(--faint);
  font-size: .78rem;
  line-height: 1.55;
}
.horizon-milestone-list { margin-top: 6px; }
.horizon-milestone-row {
  grid-template-columns: 20px minmax(0, 1fr) auto 26px;
  gap: 8px;
  min-height: 38px;
}
.horizon-milestone-row > input[type="text"] { min-height: 36px; }
.horizon-milestone-row > button[data-milestone-date] { min-width: 82px; justify-content: space-between; }
.horizon-add-row { margin-top: 4px; }

/* Mini-adventures are a full-width program, not tiny year tokens -------- */
.horizon-adventure-grid--compass {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 0;
}
.horizon-adventure-card,
.horizon-adventure-add {
  min-height: 104px;
  border-radius: 12px;
}
.horizon-adventure-card { padding: 12px; }
.horizon-adventure-title { min-height: 40px; padding-block: 7px; font-weight: 600; }
.horizon-adventure-unplanned { color: var(--faint); font-size: var(--hz-label); }
.horizon-adventure-add {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  grid-template-rows: auto auto;
  align-content: center;
  justify-items: start;
  gap: 2px 8px;
  padding: 14px;
  text-align: left;
}
.horizon-adventure-add svg { grid-row: 1 / 3; align-self: center; }
.horizon-adventure-add > span { color: var(--ink); font-weight: 600; }
.horizon-adventure-add > small { color: var(--faint); font-size: var(--hz-label); }

/* Three annual commitments, each with a finish state and a calendar hook - */
.horizon-meaningful-list {
  display: grid;
  gap: 2px;
  border-top: 1px solid var(--line);
}
.horizon-meaningful-row {
  min-width: 0;
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  border-bottom: 1px solid var(--line);
}
.horizon-meaningful-row:last-child { border-bottom: 0; }
.horizon-meaningful-row.is-realized { opacity: .58; }
.horizon-meaningful-row.is-realized .horizon-meaningful-input { text-decoration: line-through; }
.horizon-meaningful-input {
  min-width: 0;
  min-height: 42px;
  padding: 8px 2px;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: var(--hz-body);
  font-weight: 560;
}
.horizon-meaningful-input::placeholder { color: var(--faint); font-weight: 500; }
.horizon-meaningful-date {
  min-width: 86px;
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  padding: 5px 8px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: var(--hz-label);
  font-weight: 590;
  cursor: pointer;
}
.horizon-meaningful-date:hover { background: var(--soft); color: var(--ink); }
.horizon-meaningful-date svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.horizon-meaningful-date time { font-variant-numeric: tabular-nums; }

/* Winning habits are compact until inspected ---------------------------- */
.horizon-habit-list--cards {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-top: 0;
}
.horizon-habit-card {
  gap: 8px;
  padding: 11px;
  border-radius: 11px;
}
.horizon-habit-card__head { min-height: 38px; grid-template-columns: 28px minmax(0,1fr); }
.horizon-habit-card__head input { min-height: 38px; padding: 7px 8px; }
.horizon-habit-compact-stats {
  min-width: 0;
  display: flex;
  align-items: baseline;
  gap: 7px;
  padding-left: 36px;
  color: var(--faint);
  font-size: .64rem;
  white-space: nowrap;
}
.horizon-habit-compact-stats strong { color: var(--muted); font-size: .76rem; font-weight: 650; }
.horizon-habit-summary { min-height: 30px; margin-left: 36px; width: calc(100% - 36px); }
.horizon-habit-details { margin-left: 36px; width: calc(100% - 36px); }
.horizon-habit-details .habit-heatmap { min-height: 72px; }

/* Year map: 12 readable months, not a spreadsheet of 365 tiny cells ------ */
.horizon-year-map-section { min-width: 0; }
.horizon-year-map {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 9px;
  margin-top: 10px;
}
.horizon-year-map-month {
  min-width: 0;
  min-height: 132px;
  display: grid;
  grid-template-rows: auto 1fr;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: transparent;
  overflow: hidden;
}
.horizon-year-map-month.is-selected { border-color: var(--line-strong); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--line-strong) 28%, transparent); }
.horizon-year-map-month.is-current .horizon-year-map-month__head > span::after {
  content: "";
  width: 5px;
  height: 5px;
  display: inline-block;
  margin-left: 6px;
  border-radius: 50%;
  background: var(--current-time);
  vertical-align: middle;
}
.horizon-year-map-month__head {
  width: 100%;
  min-height: 38px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 10px;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: transparent;
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.horizon-year-map-month__head:hover { background: var(--soft); }
.horizon-year-map-month__head > span { font-size: .76rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.horizon-year-map-month__head > small { color: var(--faint); font-size: .62rem; font-weight: 540; }
.horizon-year-map-month__events { min-width: 0; display: grid; align-content: start; gap: 1px; padding: 6px; }
.horizon-year-map-event {
  min-width: 0;
  min-height: 27px;
  display: grid;
  grid-template-columns: 66px minmax(0, 1fr) auto;
  align-items: center;
  gap: 6px;
  padding: 5px 6px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.horizon-year-map-event:hover { background: var(--soft); }
.horizon-year-map-event.is-done { opacity: .5; }
.horizon-year-map-event.is-done strong { text-decoration: line-through; }
.horizon-year-map-event time { color: var(--faint); font-size: .62rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.horizon-year-map-event strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .72rem; font-weight: 590; }
.horizon-year-map-event > span { color: var(--faint); font-size: .58rem; white-space: nowrap; }
.horizon-year-map-empty { margin: 6px; color: var(--faint); font-size: .68rem; line-height: 1.4; }
.horizon-year-map-more {
  justify-self: start;
  min-height: 26px;
  padding: 4px 6px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: .64rem;
  cursor: pointer;
}
.horizon-year-map-more:hover { background: var(--soft); color: var(--ink); }

/* Month zoom ------------------------------------------------------------- */
.horizon-selected-month {
  scroll-margin-top: 74px;
  padding-top: 2px;
}
.horizon-month-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 10px;
}
.horizon-month-heading > div { min-width: 0; display: grid; gap: 3px; }
.horizon-month-heading > p { max-width: 380px; text-align: right; }
.horizon-month-layout--focused { grid-template-columns: minmax(0, 1.95fr) minmax(300px, .7fr); gap: 12px; }
.month-calendar { border-radius: 14px; }
.month-weekdays span { padding-block: 9px; }
.month-day { min-height: 94px; padding: 9px 10px; }
.month-day.has-event { background: color-mix(in srgb, var(--surface-strong) 50%, transparent); }
.month-day.has-event:hover { background: var(--soft); }
.month-day__primary {
  display: block;
  margin-top: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: .69rem;
  font-weight: 590;
}
.month-day__primary--plan { color: var(--muted); font-weight: 540; }
.month-day__density { opacity: .42; }

.horizon-side-heading--action {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 10px;
}
.horizon-side-heading--action > div { min-width: 0; }
.horizon-side-heading--action > button {
  flex: 0 0 auto;
  min-height: 28px;
  padding: 4px 7px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: .62rem;
  font-weight: 600;
  cursor: pointer;
}
.horizon-side-heading--action > button:hover { background: var(--soft); color: var(--ink); }
.horizon-unresolved-row { margin-block: 7px; }

@media (max-width: 1240px) {
  .horizon-misogi-card { grid-template-columns: minmax(320px, .9fr) minmax(420px, 1.1fr); }
  .horizon-habit-list--cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .horizon-year-map { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 980px) {
  .horizon-year-bar { grid-template-columns: 1fr; gap: 8px; }
  .horizon-year-bar__next { display: none; }
  .horizon-misogi-card { grid-template-columns: 1fr; }
  .horizon-misogi-card__milestones { border-left: 0; border-top: 1px solid var(--line); }
  .horizon-adventure-grid--compass { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .horizon-year-map { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .horizon-month-layout--focused { grid-template-columns: 1fr; }
  .horizon-month-context { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
  [data-horizon-modal] .modal__panel,
  body.app-expanded [data-horizon-modal] .modal__panel {
    width: calc(100vw - 8px) !important;
    height: calc(100dvh - 8px) !important;
    max-height: calc(100dvh - 8px) !important;
  }
  .horizon-scroll { padding-inline: 10px !important; }
  .horizon-unified { gap: 14px; }
  .horizon-program-section,
  .horizon-winning-section,
  .horizon-misogi-card__primary,
  .horizon-misogi-card__milestones { padding: 13px; }
  .horizon-program-head { align-items: start; flex-direction: column; gap: 7px; }
  .horizon-program-progress { justify-items: start; }
  .horizon-adventure-grid--compass,
  .horizon-habit-list--cards,
  .horizon-year-map,
  .horizon-month-context { grid-template-columns: 1fr; }
  .horizon-habit-compact-stats,
  .horizon-habit-summary,
  .horizon-habit-details { margin-left: 0; width: 100%; padding-left: 0; }
  .horizon-year-map-event { grid-template-columns: 62px minmax(0, 1fr); }
  .horizon-year-map-event > span { display: none; }
  .horizon-month-heading { align-items: start; flex-direction: column; gap: 4px; }
  .horizon-month-heading > p { text-align: left; }
  .month-day { min-height: 70px; padding: 7px; }
  .month-day__primary { display: none; }
}

/* v28 final harmony pass -------------------------------------------------- */
[data-horizon-modal] .horizon-header {
  background: transparent !important;
  backdrop-filter: none !important;
}
.horizon-year-bar {
  position: static !important;
  top: auto !important;
  padding-top: 4px !important;
  border-bottom: 0 !important;
  background: transparent !important;
  backdrop-filter: none !important;
}
.horizon-period-with-nav { gap: 4px; }
.horizon-period-with-nav h2 { order: 3; margin: 0 0 0 4px; }
.horizon-period-with-nav .icon-button { flex: 0 0 auto; }

/* One typographic rhythm across the strategic surface. */
.horizon-content,
.horizon-unified {
  --hz-label: .72rem;
  --hz-body: .86rem;
  --hz-heading: 1.02rem;
  --hz-period: 1.42rem;
}
.horizon-program-head p,
.horizon-compass-head p,
.horizon-month-heading > p,
.horizon-side-heading p,
.horizon-mini-heading small,
.horizon-empty-guidance,
.horizon-adventure-add > small,
.horizon-program-progress span,
.horizon-year-map-empty,
.horizon-year-map-more,
.horizon-side-heading--action > button,
.horizon-year-map-month__head > small,
.horizon-year-map-event time,
.horizon-year-map-event > span {
  font-size: var(--hz-label) !important;
  line-height: 1.42;
}
.horizon-year-map-event strong,
.horizon-year-map-month__head > span,
.horizon-adventure-unplanned,
.horizon-habit-compact-stats,
.horizon-habit-summary,
.horizon-event-popover__head > span,
.horizon-event-popover__title,
.horizon-event-popover__dates label,
.horizon-year-day-editor__field {
  font-size: var(--hz-body) !important;
}
.horizon-program-head h3,
.horizon-compass-head h3,
.horizon-section-heading h3 { font-size: var(--hz-heading) !important; }

/* Placeholder contrast must communicate "editable", not pre-filled copy. */
[data-horizon-modal] input::placeholder,
[data-horizon-modal] textarea::placeholder {
  color: color-mix(in srgb, var(--muted) 55%, transparent) !important;
  opacity: 1 !important;
  font-weight: 500 !important;
}

/* Misogi gets the full row; adventures sit under it with useful width. */
.horizon-misogi-card { grid-template-columns: minmax(360px, .9fr) minmax(480px, 1.1fr); }
.horizon-adventures-section { width: 100%; }
.horizon-adventure-grid--compass { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.horizon-adventure-card,
.horizon-adventure-add { min-width: 0; min-height: 118px; }

/* Key-date/event popovers reuse normal modal density. */
.horizon-event-popover {
  width: min(390px, calc(100vw - 24px));
  gap: 11px;
  padding: 12px;
}
.horizon-event-popover__title input,
.horizon-year-day-editor__field input,
.horizon-event-popover__dates button {
  min-height: 40px;
  font-size: .82rem !important;
}
.horizon-event-popover__actions { margin-top: 2px; }

/* Period picker: soft range, dark endpoints, never white on a light cell. */
.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) !important;
  color: var(--paper) !important;
  border-radius: 8px !important;
}

/* The annual map should be content-height, never a tall empty calendar. */
.horizon-year-map { align-items: start; }
.horizon-year-map-month { min-height: 0 !important; }
.horizon-year-map-month__events { min-height: 44px; }

@media (max-width: 980px) {
  .horizon-misogi-card { grid-template-columns: 1fr; }
  .horizon-adventure-grid--compass { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .horizon-adventure-grid--compass { grid-template-columns: 1fr; }
  .horizon-period-with-nav h2 { margin-left: 2px; }
}

/* v29 — Horizon simplification and component parity --------------------- */
.horizon-meaningful-list {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  border-top: 0;
}
.horizon-meaningful-row {
  min-height: 118px;
  grid-template-columns: 1fr;
  grid-template-rows: auto auto;
  align-content: space-between;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: transparent;
}
.horizon-meaningful-row:last-child { border-bottom: 1px solid var(--line); }
.horizon-meaningful-row .horizon-adventure-title-row { grid-template-columns: 20px minmax(0, 1fr); }
.horizon-meaningful-input {
  min-height: 40px;
  padding: 7px 2px;
  font-size: var(--hz-body);
  font-weight: 600;
}
.horizon-meaningful-row.is-realized { opacity: .58; }

.horizon-year-map-month__head {
  cursor: default;
  background: var(--soft);
}
.horizon-year-map-month__head:hover { background: var(--soft); }
.horizon-year-map-month__add {
  min-width: 30px;
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 5px;
  padding: 4px 7px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  cursor: pointer;
  transition: background-color .14s ease, color .14s ease;
}
.horizon-year-map-month__add > span {
  max-width: 0;
  overflow: hidden;
  opacity: 0;
  white-space: nowrap;
  font-size: var(--hz-label);
  font-weight: 590;
  transition: max-width .18s ease, opacity .14s ease;
}
.horizon-year-map-month__add svg {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
}
.horizon-year-map-month__add:hover,
.horizon-year-map-month__add:focus-visible {
  background: var(--surface-strong);
  color: var(--ink);
}
.horizon-year-map-month__add:hover > span,
.horizon-year-map-month__add:focus-visible > span {
  max-width: 110px;
  opacity: 1;
}
.horizon-year-map-month__events:empty { display: none; }
.horizon-year-map-month { min-height: 0; }

.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,
.horizon-event-popover__dates label > span {
  font-size: var(--hz-label) !important;
  font-weight: 680;
}
.horizon-event-popover__title input,
.horizon-event-popover__dates button {
  min-height: 42px;
  font-size: var(--hz-body) !important;
}

/* Selected month was intentionally removed in v29: Horizon stays annual. */
.horizon-selected-month { display: none !important; }

@media (max-width: 900px) {
  .horizon-meaningful-list { grid-template-columns: 1fr; }
}

/* v30 — annual commitments are statements, not pseudo tasks ------------- */
.horizon-meaningful-list { grid-template-columns: repeat(3, minmax(0,1fr)); gap: 10px; }
.horizon-meaningful-row {
  min-height: 92px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: transparent;
}
.horizon-meaningful-field-row { position: relative; display: flex; align-items: flex-start; gap: 6px; }
.horizon-meaningful-input {
  width: 100%;
  min-width: 0;
  padding: 4px 30px 4px 0;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  font-size: var(--hz-body) !important;
  font-weight: 540;
  line-height: 1.45;
  outline: 0;
}
.horizon-meaningful-input:focus { border-bottom-color: var(--line-strong); }
.horizon-meaningful-clear { position: absolute; right: -7px; top: -7px; }

/* Keep Activity away from the mobile edge. */
@media (max-width: 640px) {
  .horizon-habit-card { padding-inline: 12px !important; }
  .horizon-habit-stats-toggle { margin-inline: 0 !important; }
  .horizon-habit-details { padding-inline: 0 !important; }
  .horizon-meaningful-list { grid-template-columns: 1fr; }
}
.horizon-year-map-empty-add {
  width: calc(100% - 12px);
  min-height: 36px;
  margin: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 1px dashed var(--line);
  border-radius: 8px;
  background: transparent;
  color: var(--faint);
  font-size: var(--hz-label);
  cursor: pointer;
}
.horizon-year-map-empty-add:hover,
.horizon-year-map-empty-add:focus-visible { outline: 0; background: var(--soft); color: var(--ink); border-style: solid; }
.horizon-year-map-empty-add svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.6; }

/* v31 — one visual language for annual commitments ---------------------- */
.horizon-misogi-card,
.horizon-adventure-card,
.horizon-meaningful-row,
.horizon-habit-card {
  border-color: var(--line);
  border-radius: 12px;
  background: var(--soft);
}

.horizon-adventure-grid--compass {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: 10px;
}
.horizon-adventure-card,
.horizon-adventure-add { min-height: 122px; }
.horizon-adventure-add {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: transparent;
  color: var(--muted);
  font-size: var(--hz-body);
  font-weight: 590;
}
.horizon-adventure-add:hover,
.horizon-adventure-add:focus-visible {
  outline: 0;
  background: var(--soft);
  border-color: var(--line-strong);
  color: var(--ink);
}
.horizon-adventure-add > small { display: none; }
.horizon-adventure-add svg { width: 16px; height: 16px; }

.horizon-meaningful-row { min-height: 100px; }
.horizon-meaningful-input::placeholder { color: var(--faint); font-weight: 460; }

.horizon-habit-card { padding: 12px; }
.horizon-habit-summary,
.horizon-habit-details {
  width: 100%;
  margin-left: 0;
}
.horizon-habit-compact-stats {
  padding-left: 36px;
  justify-content: flex-end;
}
.horizon-habit-details__inner { width: 100%; padding: 0; }
.horizon-habit-details .habit-heatmap { width: 100%; }
.horizon-habit-details .habit-heat-cell { cursor: default; }

.horizon-year-map-month__add {
  min-width: 0;
  min-height: 32px;
  padding: 5px 8px;
  border: 1px solid transparent;
  border-radius: 9px;
  background: transparent;
  color: var(--muted);
}
.horizon-year-map-month__add > span {
  max-width: none;
  overflow: visible;
  opacity: 1;
  font-size: var(--hz-label);
  font-weight: 590;
  transition: none;
}
.horizon-year-map-month__add:hover,
.horizon-year-map-month__add:focus-visible {
  border-color: var(--line);
  background: var(--surface-strong);
  color: var(--ink);
}
.horizon-year-map-empty-add {
  width: calc(100% - 12px);
  min-height: 36px;
  margin: 6px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: transparent;
  color: var(--muted);
  font-size: var(--hz-label);
  font-weight: 590;
}
.horizon-year-map-empty-add:hover,
.horizon-year-map-empty-add:focus-visible {
  border-color: var(--line-strong);
  background: var(--soft);
  color: var(--ink);
}

@media (max-width: 640px) {
  .horizon-adventure-grid--compass { grid-template-columns: 1fr; }
  .horizon-habit-card { padding: 12px !important; }
  .horizon-habit-summary,
  .horizon-habit-details { margin-inline: 0 !important; width: 100% !important; }
  .horizon-habit-compact-stats { padding-left: 36px; }
}
.horizon-habit-details .habit-heat-cell {
  background: var(--surface-strong);
  box-shadow: inset 0 0 0 1px var(--line);
}
.horizon-habit-details .habit-heat-cell.is-done { background: var(--ink); box-shadow: none; opacity: .74; }
.horizon-habit-details .habit-heat-cell.is-missed { background: color-mix(in srgb, var(--line-strong) 62%, var(--surface-strong)); box-shadow: none; }
.horizon-habit-details .habit-heat-cell.is-outside { background: transparent; box-shadow: none; }

/* v32 — activity semantics + compact period editor ---------------------- */
.horizon-habit-details .habit-heat-cell.is-future,
.horizon-habit-details .habit-heat-cell.is-untracked {
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--line);
}
.horizon-habit-compact-stats span { font-variant-numeric: tabular-nums; }

.horizon-event-popover__period-row {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 48px;
  padding: 8px 9px 8px 11px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
}
.horizon-event-popover__period-row > div {
  min-width: 0;
  display: grid;
  gap: 2px;
}
.horizon-event-popover__period-row > div > span {
  color: var(--faint);
  font-size: var(--hz-label);
  font-weight: 620;
}
.horizon-event-popover__period-row > div > strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--ink);
  font-size: var(--hz-body);
  font-weight: 560;
}
.horizon-event-popover__period-row .task-action { flex: 0 0 auto; }
.horizon-event-popover__head > span { font-size: var(--hz-label) !important; }

@media (max-width: 640px) {
  .horizon-habit-card { padding-inline: 14px !important; }
  .horizon-habit-summary { padding-inline: 10px !important; }
  .horizon-habit-details { padding-inline: 0 !important; }
}

/* v32 follow-up — quieter key dates and consistent calendar affordances. */
.horizon-adventure-unplanned {
  font-size: var(--hz-label) !important;
}

.horizon-event-popover__head > span {
  color: var(--ink);
  font-size: .82rem !important;
  font-weight: 650;
  text-transform: none;
  letter-spacing: -.01em;
}

.horizon-event-popover__period-trigger {
  width: fit-content;
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 7px;
  padding: 3px 4px 3px 0;
  border: 0;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: var(--hz-label);
  font-weight: 570;
  text-align: left;
  cursor: pointer;
}
.horizon-event-popover__period-trigger svg {
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.65;
}
.horizon-event-popover__period-trigger:hover:not(:disabled),
.horizon-event-popover__period-trigger:focus-visible:not(:disabled) {
  outline: 0;
  color: var(--ink);
}
.horizon-event-popover__period-trigger:disabled {
  color: var(--faint);
  cursor: default;
  opacity: .6;
}

.horizon-year-map-month__head--empty {
  justify-content: flex-start;
}


/* v34 — lighter calendar affordances and compact year-map editors. */
.horizon-event-popover__title-row.has-done-control {
  grid-template-columns: 20px minmax(0, 1fr) !important;
  align-items: center !important;
  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 !important;
  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) !important;
  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;
}


/* v35 — Year map add-button placement is derived from listed month content. */
.horizon-year-map-month.is-empty .horizon-year-map-month__add,
.horizon-year-map-month:not(:has(.horizon-year-map-event)) .horizon-year-map-month__add { display: none !important; }
.horizon-year-map-month.has-listed-events .horizon-year-map-empty-add,
.horizon-year-map-month:has(.horizon-year-map-event) .horizon-year-map-empty-add { display: none !important; }


/* 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;
    height: 178mm !important;
    min-height: 0 !important;
    max-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;
  }

  .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;
  }

  /* 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);
  }
}