:root {
  --ivory: #f5f5f5;
  --paper: #ffffff;
  --ink: #080808;
  --muted: #666666;
  --line: #d9d9d9;
  --gold: #111111;
  --gold-soft: #ededed;
  --sage: #111111;
  --sage-soft: #eeeeee;
  --rose-soft: #f1f1f1;
  --danger: #111111;
  --shadow: 0 18px 50px rgba(0, 0, 0, 0.07);
  --radius: 18px;
  --radius-small: 12px;
  --sidebar-width: 288px;
}

* { box-sizing: border-box; }
html { background: var(--ivory); }
body {
  margin: 0;
  color: var(--ink);
  background: var(--ivory);
  font-family: "Avenir Next", "Helvetica Neue", -apple-system, BlinkMacSystemFont, Arial, sans-serif;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}
button, input, textarea, select { font: inherit; }
button { color: inherit; }

.app-shell { min-height: 100vh; display: grid; grid-template-columns: var(--sidebar-width) 1fr; }
.sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  width: var(--sidebar-width);
  background: #050505;
  color: #ffffff;
  padding: 28px 20px;
  display: flex;
  flex-direction: column;
  z-index: 20;
}
.brand { display: flex; gap: 12px; align-items: center; padding: 0 8px 28px; border-bottom: 1px solid rgba(255,255,255,.12); }
.brand-mark { width: 46px; height: 46px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.35); border-radius: 15px; font-family: "Avenir Next", "Helvetica Neue", -apple-system, BlinkMacSystemFont, Arial, sans-serif; font-size: 18px; }
.brand h1 { margin: 0 0 4px; font: 600 20px/1.1 "Avenir Next", "Helvetica Neue", sans-serif; }
.brand p { margin: 0; color: rgba(255,255,255,.98); font-size: 12px; }
.nav-list { display: grid; gap: 8px; margin-top: 24px; }
.nav-item { width: 100%; border: 0; background: transparent; color: rgba(255,255,255,.96); padding: 13px 14px; border-radius: 14px; text-align: left; cursor: pointer; display: grid; gap: 3px; }
.nav-item span { font-weight: 700; font-size: 14px; }
.nav-item small { font-size: 11px; color: rgba(255,255,255,.42); }
.nav-item:hover, .nav-item.active { background: rgba(255,255,255,.1); color: white; }
.nav-item.active small { color: rgba(255,255,255,.65); }
.sidebar-footer { margin-top: auto; padding: 18px 8px 4px; border-top: 1px solid rgba(255,255,255,.12); }
.sidebar-footer p { margin: 0 0 4px; font-size: 12px; font-weight: 700; }
.sidebar-footer span { color: rgba(255,255,255,.45); font-size: 11px; }

.main-content { grid-column: 2; min-width: 0; padding: 0 38px 48px; }
.topbar { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; justify-content: space-between; min-height: 104px; background: rgba(255,255,255,.94); backdrop-filter: blur(18px); border-bottom: 1px solid rgba(0,0,0,.1); padding: 18px 0; }
.topbar h2 { margin: 4px 0 0; font: 600 34px/1.05 "Avenir Next", "Helvetica Neue", sans-serif; }
.topbar-actions { display: flex; gap: 12px; align-items: center; }
.eyebrow { margin: 0; color: var(--gold); font-size: 11px; letter-spacing: .15em; font-weight: 800; }
.date-pill, .badge { border-radius: 999px; padding: 8px 12px; background: rgba(255,255,255,.96); border: 1px solid var(--line); font-size: 12px; color: var(--muted); }
.icon-button { border: 0; background: transparent; font-size: 24px; cursor: pointer; padding: 8px; }
#menuButton { display: none; }
.primary-button, .secondary-button, .danger-button, .file-button { border-radius: 12px; padding: 11px 15px; font-weight: 800; font-size: 13px; cursor: pointer; border: 1px solid transparent; display: inline-flex; justify-content: center; align-items: center; }
.primary-button { background: var(--ink); color: white; }
.secondary-button, .file-button { background: var(--paper); border-color: var(--line); }
.danger-button { background: #f4f4f4; color: #111111; border-color: #cfcfcf; }
.text-button { border: 0; background: transparent; color: var(--gold); font-weight: 800; cursor: pointer; font-size: 12px; }

.view { display: none; padding-top: 32px; }
.view.active { display: block; }
.hero-card { padding: 30px; border-radius: 28px; background: #050505; color: white; display: flex; justify-content: space-between; align-items: center; box-shadow: var(--shadow); }
.hero-card h3 { margin: 8px 0 10px; max-width: 760px; font: 600 30px/1.18 "Avenir Next", "Helvetica Neue", sans-serif; }
.hero-card p:not(.eyebrow) { margin: 0; color: rgba(255,255,255,.63); }
.hero-progress { width: 110px; height: 110px; border-radius: 50%; border: 7px solid rgba(255,255,255,.15); display: grid; place-content: center; text-align: center; flex: 0 0 auto; }
.hero-progress span { font: 600 26px/1 "Avenir Next", "Helvetica Neue", sans-serif; }
.hero-progress small { color: rgba(255,255,255,.55); margin-top: 4px; }

.grid { display: grid; gap: 22px; margin-top: 22px; }
.two-columns { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.panel { background: #ffffff; border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; box-shadow: 0 10px 30px rgba(0,0,0,.035); }
.panel-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 20px; }
.panel-header.standalone { margin: 28px 0 14px; }
.panel h3, .section-intro h3 { margin: 5px 0 0; font: 600 23px/1.15 "Avenir Next", "Helvetica Neue", sans-serif; }
.section-intro { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 24px; }
.section-intro > div:first-child { max-width: 740px; }
.section-intro p:last-child { color: var(--muted); line-height: 1.6; margin: 10px 0 0; }

.stack-list, .check-list { display: grid; gap: 10px; }
.list-item { border: 1px solid var(--line); border-radius: var(--radius-small); padding: 13px; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; background: white; }
.list-item.completed { opacity: .58; }
.list-item.completed .item-title { text-decoration: line-through; }
.item-title { font-weight: 800; font-size: 14px; }
.item-meta { color: var(--muted); font-size: 11px; margin-top: 3px; }
.circle-check { width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--line); background: white; cursor: pointer; }
.circle-check.checked { border-color: var(--sage); background: var(--sage); box-shadow: inset 0 0 0 5px white; }
.item-actions { display: flex; gap: 4px; }
.mini-button { border: 0; background: transparent; color: var(--muted); cursor: pointer; padding: 5px; border-radius: 8px; }
.mini-button:hover { background: var(--ivory); }
.add-row { width: 100%; border: 1px dashed #9f9f9f; background: transparent; color: var(--gold); border-radius: 13px; margin-top: 12px; padding: 12px; cursor: pointer; font-weight: 800; }

.pulse-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
.pulse-item { text-align: center; border: 1px solid var(--line); border-radius: 14px; padding: 12px 8px; background: white; }
.pulse-item label { display: block; font-size: 11px; font-weight: 800; margin-bottom: 8px; color: var(--muted); }
.pulse-item input { width: 100%; accent-color: var(--sage); }
.pulse-item strong { display: block; margin-top: 6px; font: 600 18px "Avenir Next", "Helvetica Neue", sans-serif; }

label { display: grid; gap: 7px; }
label > span, .field-label { color: var(--muted); font-size: 12px; font-weight: 800; margin-top: 12px; }
input, textarea, select { width: 100%; border: 1px solid var(--line); background: white; color: var(--ink); border-radius: 12px; padding: 12px 13px; outline: none; resize: vertical; }
input:focus, textarea:focus, select:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(0,0,0,.09); }
.form-grid { display: grid; gap: 18px; }
.form-grid.two-columns { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.microgoal-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.microgoal-card { background: var(--paper); border: 1px solid var(--line); border-radius: 18px; padding: 20px; display: grid; gap: 14px; }
.microgoal-card-header { display: flex; justify-content: space-between; align-items: center; }
.microgoal-number { width: 34px; height: 34px; border-radius: 50%; background: var(--gold-soft); display: grid; place-items: center; font-weight: 900; color: #111111; }
.progress-track { height: 7px; border-radius: 999px; background: #e8e8e8; overflow: hidden; }
.progress-fill { height: 100%; background: var(--sage); border-radius: inherit; }
.microgoal-card textarea { min-height: 72px; }
.microgoal-card .microgoal-footer { display: flex; justify-content: space-between; align-items: center; color: var(--muted); font-size: 11px; }

.segmented { background: #ededed; padding: 4px; border-radius: 12px; display: flex; }
.segment { border: 0; background: transparent; border-radius: 9px; padding: 8px 14px; cursor: pointer; font-weight: 800; color: var(--muted); }
.segment.active { background: white; color: var(--ink); box-shadow: 0 4px 12px rgba(0,0,0,.05); }
.hidden { display: none !important; }
.window-focus-grid { display: grid; grid-template-columns: 260px 1fr; gap: 20px; }
.window-index { display: grid; gap: 8px; align-content: start; }
.window-index button { border: 1px solid var(--line); background: var(--paper); border-radius: 13px; padding: 13px; text-align: left; cursor: pointer; }
.window-index button.active { border-color: var(--gold); background: var(--gold-soft); }
.action-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.action-card { border: 1px solid var(--line); border-radius: 15px; padding: 14px; background: white; }
.action-card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.action-card textarea { min-height: 70px; }
.full-map { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.full-map-block { border: 1px solid var(--line); background: var(--paper); border-radius: 18px; padding: 16px; }
.full-map-block.central { background: #050505; color: white; grid-column: 2; }
.full-map-block h4 { margin: 0 0 10px; font: 600 17px "Avenir Next", "Helvetica Neue", sans-serif; }
.full-map-block ol { margin: 0; padding-left: 19px; color: var(--muted); font-size: 12px; line-height: 1.55; }
.full-map-block.central p { color: rgba(255,255,255,.96); }

.stats-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.stat-card { background: var(--paper); border: 1px solid var(--line); border-radius: 17px; padding: 18px; }
.stat-card strong { display: block; font: 600 28px "Avenir Next", "Helvetica Neue", sans-serif; }
.stat-card span { color: var(--muted); font-size: 11px; }
.maintenance-layout { grid-template-columns: minmax(0, 1.5fr) minmax(280px, .7fr); }
.category-chip { display: inline-flex; border-radius: 999px; padding: 5px 8px; background: #eeeeee; color: #111111; font-size: 10px; font-weight: 900; }
.divider { height: 1px; background: var(--line); margin: 20px 0 8px; }
.helper { color: var(--muted); font-size: 12px; line-height: 1.5; }

.scorecard { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.score-row { border: 1px solid var(--line); border-radius: 14px; padding: 14px; display: grid; grid-template-columns: 1fr 150px; gap: 15px; align-items: center; }
.score-row strong { font-size: 13px; }
.score-control { display: flex; align-items: center; gap: 8px; }
.score-control input { padding: 0; accent-color: var(--gold); }
.score-control output { width: 24px; text-align: center; font-weight: 900; }
.review-form { margin-top: 20px; }
.file-button input { display: none; }
.danger-zone { display: grid; align-content: start; gap: 12px; }
.install-guide { margin-top: 22px; }
.install-guide ol { color: var(--muted); line-height: 1.8; }

#editorDialog { width: min(560px, calc(100vw - 32px)); border: 1px solid var(--line); border-radius: 22px; padding: 0; box-shadow: 0 28px 80px rgba(0,0,0,.2); }
#editorDialog::backdrop { background: rgba(0,0,0,.48); backdrop-filter: blur(3px); }
#editorForm { padding: 24px; }
.dialog-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 18px; }
.dialog-header h3 { margin: 5px 0 0; font: 600 24px "Avenir Next", "Helvetica Neue", sans-serif; }
.dialog-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 22px; }
#dialogFields { display: grid; gap: 10px; }
#toast { position: fixed; right: 24px; bottom: 24px; background: var(--ink); color: white; border-radius: 12px; padding: 12px 16px; font-size: 12px; font-weight: 800; opacity: 0; transform: translateY(10px); pointer-events: none; transition: .2s ease; z-index: 100; }
#toast.show { opacity: 1; transform: translateY(0); }

@media (max-width: 1100px) {
  :root { --sidebar-width: 240px; }
  .main-content { padding-inline: 26px; }
  .pulse-grid { grid-template-columns: repeat(3, 1fr); }
  .full-map { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .full-map-block.central { grid-column: 1 / -1; }
}

@media (max-width: 820px) {
  .app-shell { display: block; }
  .sidebar { transform: translateX(-102%); transition: transform .25s ease; width: min(300px, 88vw); }
  .sidebar.open { transform: translateX(0); }
  .main-content { padding: 0 18px 40px; }
  #menuButton { display: inline-flex; }
  .topbar { min-height: 86px; }
  .topbar h2 { font-size: 27px; }
  .topbar-actions .date-pill { display: none; }
  .topbar-actions .primary-button { font-size: 0; width: 42px; height: 42px; padding: 0; }
  .topbar-actions .primary-button::after { content: "+"; font-size: 21px; }
  .two-columns, .form-grid.two-columns, .microgoal-grid, .maintenance-layout, .scorecard { grid-template-columns: 1fr; }
  .hero-card { align-items: flex-start; }
  .hero-card h3 { font-size: 24px; }
  .hero-progress { width: 82px; height: 82px; }
  .window-focus-grid { grid-template-columns: 1fr; }
  .window-index { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .action-grid { grid-template-columns: 1fr; }
  .stats-row { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 520px) {
  .hero-card { display: grid; gap: 18px; }
  .section-intro { align-items: stretch; flex-direction: column; }
  .pulse-grid { grid-template-columns: repeat(2, 1fr); }
  .full-map { grid-template-columns: 1fr; }
  .score-row { grid-template-columns: 1fr; }
}


/* Reflective morning experience */
.settings-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.morning-summary-card {
  margin-top: 22px;
  padding: 20px 22px;
  border: 1px solid #cfcfcf;
  background: #ffffff;
  border-radius: var(--radius);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
}
.morning-summary-card h3 { margin: 5px 0 7px; font: 600 21px/1.2 "Avenir Next", "Helvetica Neue", sans-serif; }
.morning-summary-card p:last-child { margin: 0; color: var(--muted); line-height: 1.55; }
.quiet-button { border: 1px solid var(--line); background: rgba(255,255,255,.98); border-radius: 12px; padding: 11px 14px; font-weight: 800; white-space: nowrap; cursor: pointer; }
.toggle-row { grid-template-columns: 1fr auto; align-items: center; gap: 18px; padding: 13px 0; }
.toggle-row span { display: grid; gap: 3px; color: var(--ink); margin: 0; }
.toggle-row small { color: var(--muted); font-weight: 500; line-height: 1.4; }
.toggle-row input { width: 45px; height: 25px; accent-color: var(--sage); }

.morning-dialog {
  width: 100vw;
  max-width: none;
  height: 100dvh;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: #ffffff;
  color: var(--ink);
}
.morning-dialog::backdrop { background: #ffffff; }
.morning-ritual {
  min-height: 100%;
  width: min(860px, calc(100% - 44px));
  margin: 0 auto;
  padding: max(28px, env(safe-area-inset-top)) 0 max(28px, env(safe-area-inset-bottom));
  display: grid;
  grid-template-rows: auto auto 1fr auto;
}
.ritual-topline { display: flex; justify-content: space-between; align-items: center; color: var(--muted); font-size: 12px; letter-spacing: .04em; }
.ritual-skip { border: 0; background: transparent; color: var(--muted); cursor: pointer; padding: 8px; }
.ritual-progress { height: 2px; background: rgba(0,0,0,.09); margin-top: 18px; overflow: hidden; }
.ritual-progress span { display: block; width: 20%; height: 100%; background: var(--gold); transition: width 1.2s cubic-bezier(.22,1,.36,1); }
.ritual-step { display: none; place-content: center; padding: 54px 0 36px; opacity: 0; transform: translateY(12px); }
.ritual-step.active { display: grid; animation: ritual-arrive 1.1s cubic-bezier(.22,1,.36,1) forwards; }
.ritual-kicker { margin: 0 0 20px; color: var(--gold); font-size: 11px; letter-spacing: .22em; font-weight: 900; text-align: center; }
.ritual-step h2 { margin: 0 auto; max-width: 760px; font: 500 clamp(34px, 5vw, 58px)/1.08 "Avenir Next", "Helvetica Neue", sans-serif; text-align: center; letter-spacing: -.02em; }
.ritual-lead { max-width: 620px; margin: 22px auto 0; color: var(--muted); font-size: 17px; line-height: 1.75; text-align: center; }
.breath-space { display: grid; justify-items: center; gap: 20px; margin-top: 44px; }
.breath-space p { color: var(--muted); font-family: "Avenir Next", "Helvetica Neue", -apple-system, BlinkMacSystemFont, Arial, sans-serif; font-style: italic; }
.breath-orb { width: 150px; height: 150px; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle at 38% 32%, #ffffff, #d6d6d6); box-shadow: 0 24px 70px rgba(0,0,0,.13); animation: breathe 8s ease-in-out infinite; }
.breath-orb span { color: #111111; font-family: "Avenir Next", "Helvetica Neue", -apple-system, BlinkMacSystemFont, Arial, sans-serif; }
.feeling-grid { width: min(620px, 100%); margin: 36px auto 20px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.feeling-grid button { padding: 15px 12px; border-radius: 999px; border: 1px solid var(--line); background: rgba(255,255,255,.96); cursor: pointer; }
.feeling-grid button.selected { background: var(--ink); color: white; border-color: var(--ink); }
.ritual-field { width: min(620px, 100%); margin: 18px auto 0; }
.ritual-field > span { color: var(--muted); font-size: 12px; font-weight: 800; letter-spacing: .03em; }
.ritual-field input, .ritual-field textarea, .ritual-field select { background: rgba(255,255,255,.98); border-radius: 15px; padding: 15px 16px; font-size: 16px; }
.ritual-step blockquote { width: min(700px, 100%); margin: 34px auto 10px; padding: 28px 30px; background: rgba(255,255,255,.98); border: 1px solid var(--line); border-radius: 22px; font: 500 23px/1.45 "Avenir Next", "Helvetica Neue", sans-serif; text-align: center; }
.ritual-actions { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding-top: 22px; }
.ritual-primary, .ritual-secondary { border-radius: 999px; padding: 13px 22px; font-weight: 800; cursor: pointer; }
.ritual-primary { margin-left: auto; background: var(--ink); color: white; border: 1px solid var(--ink); }
.ritual-secondary { background: transparent; border: 1px solid var(--line); }
.ritual-secondary[hidden] { display: none; }
.ritual-summary { width: min(620px, 100%); margin: 34px auto 0; display: grid; gap: 10px; }
.ritual-summary div { padding: 14px 16px; background: rgba(255,255,255,.98); border: 1px solid var(--line); border-radius: 14px; }
.ritual-summary strong { display: block; margin-bottom: 4px; font-size: 11px; color: var(--gold); letter-spacing: .09em; text-transform: uppercase; }

@keyframes breathe { 0%,100% { transform: scale(.86); opacity: .78; } 50% { transform: scale(1.08); opacity: 1; } }
@keyframes ritual-arrive { to { opacity: 1; transform: translateY(0); } }

@media (max-width: 1100px) { .settings-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 820px) {
  .settings-grid { grid-template-columns: 1fr; }
  .morning-summary-card { align-items: flex-start; flex-direction: column; }
  .morning-ritual { width: min(100% - 34px, 760px); }
  .ritual-step { padding-top: 34px; }
}
@media (max-width: 560px) {
  .feeling-grid { grid-template-columns: repeat(2, 1fr); }
  .ritual-step h2 { font-size: 36px; }
  .ritual-step blockquote { font-size: 20px; padding: 22px; }
  .ritual-actions { position: sticky; bottom: 0; padding: 14px 0 max(14px, env(safe-area-inset-bottom)); background: linear-gradient(transparent, #ffffff 22%); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}


/* Monochrome editorial refinements */
body { letter-spacing: -0.006em; }
.brand-mark { border-radius: 50%; font-weight: 700; letter-spacing: .08em; }
.brand h1, .topbar h2, .hero-card h3, .panel h3, .section-intro h3, .morning-summary-card h3, .ritual-step h2, .dialog-header h3 { letter-spacing: -.025em; }
.eyebrow, .ritual-kicker { color: #111111; letter-spacing: .18em; }
.sidebar .eyebrow { color: #ffffff; }
.panel, .microgoal-card, .action-card, .full-map-block, .stat-card, .list-item, .pulse-item { box-shadow: none; }
.hero-card { box-shadow: none; border: 1px solid #050505; }
.primary-button, .ritual-primary { background: #050505; }
.primary-button:hover, .ritual-primary:hover { background: #2a2a2a; }
.text-button, .add-row { color: #111111; }
.circle-check.checked { border-color: #111111; background: #111111; }
.progress-fill, .ritual-progress span { background: #111111; }
.window-index button.active { border-color: #111111; background: #eeeeee; }
input:focus, textarea:focus, select:focus { border-color: #111111; }
.score-control input, .pulse-item input, .toggle-row input { accent-color: #111111; }
.morning-summary-card { box-shadow: none; }
.ritual-step h2 { font-weight: 600; }
.breath-space p { font-style: normal; letter-spacing: .01em; }
.breath-orb { border: 1px solid #cfcfcf; }
.ritual-summary strong { color: #111111; }

/* Purpose Map: the whole picture in one tab */
.purpose-map-view { padding-top: 18px; }
.purpose-map-intro {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 28px;
  margin-bottom: 24px;
}
.purpose-map-intro > div:first-child { max-width: 900px; }
.purpose-map-intro h3 {
  margin: 12px 0 8px;
  max-width: 900px;
  font: 650 clamp(34px, 4vw, 64px)/1.02 "Avenir Next", "Helvetica Neue", sans-serif;
  letter-spacing: -.055em;
}
.purpose-map-intro p:last-child { margin: 0; color: var(--muted); line-height: 1.55; font-size: 16px; max-width: 930px; }
.purpose-map-tools { display: flex; align-items: center; gap: 14px; flex: 0 0 auto; padding-bottom: 2px; }
.purpose-map-grid {
  border: 1px solid #111;
  padding: 22px;
  background: #fff;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: repeat(3, minmax(190px, 1fr));
  gap: 8px;
  min-height: 680px;
}
.purpose-area-card,
.purpose-center-card {
  min-width: 0;
  border: 1px solid #111;
  border-radius: 0;
  background: #fff;
  padding: 22px;
}
.purpose-area-card {
  text-align: left;
  display: grid;
  grid-template-rows: auto 1fr auto auto;
  cursor: pointer;
  transition: background .16s ease, transform .16s ease;
}
.purpose-area-card:hover { background: #f7f7f7; }
.purpose-area-card:active { transform: scale(.995); }
.purpose-card-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.purpose-card-top > span:first-child { color: #666; font-size: 10px; font-weight: 750; letter-spacing: .18em; }
.connection-count {
  width: 27px;
  height: 27px;
  border: 1px solid #111;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 11px;
  font-weight: 700;
}
.purpose-card-body { display: flex; flex-direction: column; justify-content: center; min-height: 94px; }
.purpose-card-body h4 { margin: 12px 0 8px; font: 650 clamp(22px, 2vw, 31px)/1.08 "Avenir Next", "Helvetica Neue", sans-serif; letter-spacing: -.045em; }
.purpose-card-body p { margin: 0; color: #666; font-size: 12px; }
.purpose-card-connections { margin-top: 10px; color: #111; font-size: 10px; line-height: 1.35; }
.purpose-card-footer { display: flex; justify-content: space-between; gap: 12px; color: #666; font-size: 11px; }
.purpose-card-progress { height: 4px; background: #e8e8e8; margin-top: 18px; overflow: hidden; }
.purpose-card-progress span { display: block; height: 100%; background: #111; }
.purpose-center-card {
  background: #050505;
  color: #fff;
  display: grid;
  place-content: center;
  text-align: center;
  min-height: 100%;
}
.purpose-center-card > span { color: #a8a8a8; font-size: 10px; letter-spacing: .2em; font-weight: 750; }
.purpose-center-card h4 { margin: 18px auto 12px; max-width: 95%; font: 650 clamp(28px, 3.2vw, 48px)/1.02 "Avenir Next", "Helvetica Neue", sans-serif; letter-spacing: -.05em; }
.purpose-center-card p { margin: 0; color: #fff; font-size: 14px; }
.purpose-map-note { max-width: 980px; margin: 18px 0 0; color: #666; font-size: 12px; line-height: 1.55; }

@media (min-width: 821px) {
  .purpose-map-active .topbar { display: none; }
  .purpose-map-active .main-content { padding-top: 0; }
}

/* Purpose area and action dialogs */
.purpose-area-dialog,
.purpose-action-dialog {
  border: 0;
  padding: 0;
  color: #111;
  background: #fff;
  box-shadow: 0 35px 100px rgba(0,0,0,.22);
}
.purpose-area-dialog::backdrop,
.purpose-action-dialog::backdrop { background: rgba(0,0,0,.52); backdrop-filter: blur(3px); }
.purpose-area-dialog { width: min(980px, calc(100vw - 42px)); max-height: calc(100dvh - 42px); border-radius: 28px; }
.purpose-area-shell { padding: 34px; }
.purpose-dialog-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; }
.purpose-dialog-header h2 { margin: 10px 0 7px; font: 650 clamp(30px, 4vw, 48px)/1.02 "Avenir Next", "Helvetica Neue", sans-serif; letter-spacing: -.045em; }
.purpose-dialog-header p:last-child { margin: 0; color: #666; line-height: 1.5; }
.purpose-close-button {
  width: 62px;
  height: 62px;
  border: 4px solid #111;
  border-radius: 20px;
  background: #fff;
  display: grid;
  place-items: center;
  font-size: 30px;
  line-height: 1;
  cursor: pointer;
  flex: 0 0 auto;
  box-shadow: inset 0 0 0 2px #fff, inset 0 0 0 3px #cfcfcf;
}
.purpose-area-progress { margin: 26px 0 20px; display: grid; gap: 11px; }
.purpose-area-progress > div:first-child { display: flex; align-items: baseline; gap: 8px; }
.purpose-area-progress strong { font-size: 17px; }
.purpose-area-progress span { color: #666; font-size: 12px; }
.purpose-action-list { display: grid; border-top: 1px solid #d2d2d2; }
.purpose-action-row {
  min-height: 82px;
  display: grid;
  grid-template-columns: 48px 1fr auto;
  align-items: center;
  gap: 14px;
  border-bottom: 1px solid #d2d2d2;
}
.purpose-action-row.checked { background: #f7f7f7; }
.purpose-action-number,
.purpose-action-copy,
.purpose-row-edit,
.purpose-row-check { border: 0; background: transparent; cursor: pointer; }
.purpose-action-number { font-size: 11px; font-weight: 750; color: #666; letter-spacing: .08em; }
.purpose-action-copy { min-width: 0; text-align: left; padding: 18px 0; }
.purpose-action-copy strong { display: block; font-size: 16px; letter-spacing: -.015em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.purpose-action-row.checked .purpose-action-copy strong { text-decoration: line-through; color: #555; }
.purpose-action-copy span { display: block; color: #666; font-size: 11px; margin-top: 5px; line-height: 1.4; }
.purpose-row-edit { font-weight: 750; padding: 10px 12px; text-decoration: underline; }
.purpose-row-check {
  width: 40px;
  height: 40px;
  border: 1.5px solid #111;
  border-radius: 50%;
  margin-right: 5px;
  display: grid;
  place-items: center;
  font-size: 8px;
  font-weight: 800;
}
.purpose-row-check.checked { background: #111; color: #fff; }
.purpose-row-check.checked::after { content: "✓"; font-size: 17px; }
.purpose-row-check.checked span { display: none; }

.purpose-action-dialog { width: min(1120px, calc(100vw - 38px)); max-height: calc(100dvh - 26px); border-radius: 0 0 28px 28px; }
.purpose-action-form { padding: 36px 42px 30px; }
.purpose-action-form > .purpose-dialog-header { margin-bottom: 24px; }
.purpose-field { display: grid; gap: 9px; margin-top: 18px; }
.purpose-field > span,
.purpose-support-fieldset legend,
.tracking-fieldset legend { color: #111; font-size: 14px; font-weight: 800; }
.purpose-field input,
.purpose-field select {
  border-radius: 16px;
  padding: 18px 20px;
  font-size: 17px;
  border-color: #c9c9c9;
}
.purpose-support-fieldset,
.tracking-fieldset { border: 0; border-top: 1px solid #c9c9c9; padding: 18px 0 0; margin: 26px 0 0; }
.purpose-support-fieldset legend,
.tracking-fieldset legend { padding: 0 8px 0 0; }
.purpose-support-fieldset > p { margin: 8px 0 18px; color: #666; line-height: 1.45; font-size: 13px; }
.purpose-support-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.purpose-support-grid label {
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 11px;
  min-height: 58px;
  padding: 12px 15px;
  border: 1px solid #c9c9c9;
  cursor: pointer;
}
.purpose-support-grid input { width: 21px; height: 21px; accent-color: #111; }
.purpose-support-grid span { color: #111; font-size: 14px; font-weight: 750; margin: 0; }
.tracking-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.tracking-options label {
  grid-template-columns: auto 1fr;
  gap: 11px;
  align-items: flex-start;
  padding: 14px;
  border: 1px solid #c9c9c9;
  cursor: pointer;
}
.tracking-options input { width: 19px; height: 19px; margin-top: 2px; accent-color: #111; }
.tracking-options span { display: grid; gap: 4px; margin: 0; color: #111; }
.tracking-options strong { font-size: 14px; }
.tracking-options small { color: #666; line-height: 1.35; }
.purpose-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.purpose-complete-row {
  display: flex;
  grid-template-columns: none;
  align-items: center;
  gap: 12px;
  margin-top: 28px;
  font-weight: 800;
  cursor: pointer;
}
.purpose-complete-row input { width: 22px; height: 22px; accent-color: #111; }
.purpose-ongoing-note { margin: 24px 0 0; padding: 14px 16px; border: 1px solid #c9c9c9; color: #555; line-height: 1.45; font-size: 12px; }
.purpose-action-footer { display: flex; justify-content: space-between; align-items: center; gap: 18px; margin-top: 28px; padding-top: 22px; border-top: 1px solid #c9c9c9; }
.purpose-action-footer > div { display: flex; gap: 10px; }
.purpose-delete-button { color: #555; }

@media (max-width: 1120px) {
  .purpose-map-grid { min-height: 620px; grid-template-rows: repeat(3, minmax(170px, 1fr)); }
  .purpose-area-card, .purpose-center-card { padding: 18px; }
}
@media (max-width: 820px) {
  .purpose-map-intro { align-items: stretch; flex-direction: column; }
  .purpose-map-intro h3 { font-size: 42px; }
  .purpose-map-tools { justify-content: flex-start; }
  .purpose-map-grid { grid-template-columns: 1fr; grid-template-rows: none; min-height: 0; padding: 10px; }
  .purpose-center-card { order: -1; min-height: 190px; }
  .purpose-area-card { min-height: 200px; }
  .purpose-area-dialog { width: 100vw; max-height: 100dvh; height: 100dvh; margin: 0; border-radius: 0; }
  .purpose-area-shell { padding: max(24px, env(safe-area-inset-top)) 22px max(24px, env(safe-area-inset-bottom)); }
  .purpose-action-dialog { width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0; border-radius: 0; }
  .purpose-action-form { padding: max(24px, env(safe-area-inset-top)) 22px max(24px, env(safe-area-inset-bottom)); }
  .purpose-close-button { width: 52px; height: 52px; border-width: 3px; border-radius: 17px; }
  .purpose-support-grid, .tracking-options, .purpose-form-grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .purpose-map-intro h3 { font-size: 36px; }
  .purpose-map-tools { flex-direction: column; align-items: stretch; }
  .purpose-action-row { grid-template-columns: 38px 1fr auto; gap: 8px; }
  .purpose-action-footer { align-items: stretch; flex-direction: column-reverse; }
  .purpose-action-footer > div { display: grid; }
  .purpose-action-footer button { width: 100%; }
}


/* ===========================================================================
   v5: accessibility, touch, and iPad refinements.
   Additive only. No new colours, typefaces, or decorative elements were
   introduced; every value below reuses the existing monochrome tokens.
   =========================================================================== */

/* Keyboard entry point. Invisible until it is focused. */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: #050505;
  color: #ffffff;
  padding: 12px 18px;
  border-radius: 0 0 12px 0;
  font-weight: 800;
  font-size: 13px;
  text-decoration: none;
}
.skip-link:focus { left: 0; }

/* A single, consistent focus ring. Keyboard and Pencil users can always see
   where they are; pointer users never see it. Text fields already have their
   own focus treatment, so they are left alone rather than ringed twice. */
:focus-visible {
  outline: 2px solid #111111;
  outline-offset: 3px;
  border-radius: 6px;
}
input:focus-visible,
textarea:focus-visible,
select:focus-visible { outline: none; }
input:focus-visible:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
textarea:focus-visible,
select:focus-visible { box-shadow: 0 0 0 3px rgba(0, 0, 0, .16); }
input[type="checkbox"]:focus-visible,
input[type="radio"]:focus-visible,
input[type="range"]:focus-visible { outline: 2px solid #111111; outline-offset: 3px; }
.sidebar :focus-visible { outline-color: #ffffff; }
.hero-card :focus-visible, .purpose-center-card :focus-visible { outline-color: #ffffff; }
h2[tabindex="-1"]:focus, section.view:focus { outline: none; }

/* Touch targets. Apple's guidance is 44pt; several controls were well under it. */
.mini-button {
  min-width: 40px;
  min-height: 40px;
  display: inline-grid;
  place-items: center;
  padding: 8px;
}
.circle-check {
  width: 26px;
  height: 26px;
  position: relative;
  flex: 0 0 auto;
}
.circle-check::before {
  content: "";
  position: absolute;
  inset: -9px;
}
.circle-check.checked { box-shadow: inset 0 0 0 6px #ffffff; }
.text-button { min-height: 40px; padding: 8px 4px; }
.ritual-skip { min-height: 44px; padding: 10px 12px; }
.icon-button { min-width: 44px; min-height: 44px; }
.add-row { min-height: 48px; }
.nav-item { min-height: 52px; }
.feeling-grid button { min-height: 52px; }
.list-item { padding: 14px 13px; }
.pulse-item input[type="range"],
.score-control input[type="range"] { min-height: 34px; }

/* Save state. The one place the planner is allowed to look concerned. */
.save-status-error { color: #ffffff; text-decoration: underline; }
.sidebar-footer p { line-height: 1.35; }

/* Settings: data panel and the optional sync panel. */
.settings-grid-wide {
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  margin-top: 22px;
  align-items: start;
}
.danger-zone .divider { margin: 6px 0; }
#syncPanel { display: grid; align-content: start; gap: 4px; }
#syncPanel button { width: 100%; margin-top: 10px; }
#syncPanel .text-button { width: auto; justify-self: start; }
#syncSignedIn { display: grid; }
.sync-error { color: #111111; font-weight: 800; }
#syncMessage:empty { display: none; }
.pulse-note { margin: 14px 0 0; }

/* Empty and helper copy sits calmly rather than filling the panel. */
.helper { margin: 12px 0 0; }
.stack-list > .helper, .check-list > .helper { margin: 4px 0 0; }

/* ---------------------------------------------------------------------------
   iPad. Portrait and landscape both get room to breathe, and the sidebar
   behaves predictably when it is a drawer rather than a column.
   --------------------------------------------------------------------------- */

.main-content { padding-bottom: max(48px, env(safe-area-inset-bottom)); }
.sidebar { padding-top: max(28px, env(safe-area-inset-top)); padding-bottom: max(20px, env(safe-area-inset-bottom)); }

/* iPad landscape: keep two columns but stop lines running too wide to read. */
@media (min-width: 1024px) {
  .main-content { padding-inline: clamp(32px, 4vw, 56px); }
  .hero-card h3 { max-width: 34ch; }
  .section-intro p:last-child, .purpose-map-intro p:last-child { max-width: 78ch; }
  .grid { gap: 24px; }
}

/* iPad portrait: one comfortable column for the paired panels. */
@media (min-width: 821px) and (max-width: 1024px) {
  .two-columns { grid-template-columns: 1fr; }
  .form-grid.two-columns { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .microgoal-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .scorecard { grid-template-columns: 1fr; }
  .pulse-grid { grid-template-columns: repeat(5, 1fr); }
}

/* Settings' wide pair should stack before the iPad portrait width, not after. */
@media (max-width: 1024px) {
  .settings-grid-wide { grid-template-columns: 1fr; }
}

/* The drawer needs to scroll on short landscape screens, and it should sit
   above a dimmed page rather than floating ambiguously over it. */
@media (max-width: 820px) {
  .sidebar { overflow-y: auto; box-shadow: 0 0 0 100vmax rgba(0,0,0,0); }
  .sidebar.open { box-shadow: 0 0 0 100vmax rgba(0,0,0,.45); }
  .settings-grid-wide { grid-template-columns: 1fr; }
  .topbar-actions .primary-button { width: 46px; height: 46px; }
  .purpose-action-row { min-height: 88px; }
}

/* Very short landscape windows: the ritual should never trap its own buttons
   off-screen. */
@media (max-height: 560px) {
  .ritual-step { padding: 24px 0 20px; }
  .ritual-step h2 { font-size: clamp(26px, 4vw, 38px); }
  .breath-orb { width: 96px; height: 96px; }
  .breath-space { margin-top: 22px; gap: 12px; }
}

/* Reduced motion: hold the breath orb still rather than freezing it mid-pulse. */
@media (prefers-reduced-motion: reduce) {
  .breath-orb { animation: none; transform: scale(1); opacity: 1; }
  .ritual-step.active { opacity: 1; transform: none; }
  .ritual-progress span { transition: none; }
}

/* Printing a week of reflections should look like paper, not a screenshot. */
@media print {
  .sidebar, .topbar-actions, .add-row, .mini-button, #toast, .skip-link { display: none !important; }
  .app-shell { display: block; }
  .main-content { padding: 0; }
  .view { display: block !important; page-break-before: always; }
  .panel, .microgoal-card, .list-item { border-color: #999; box-shadow: none; }
  .hero-card, .purpose-center-card { background: #ffffff; color: #050505; border: 1px solid #050505; }
  .hero-card p:not(.eyebrow), .purpose-center-card p { color: #555; }
}


/* ===========================================================================
   v5.0.1: layout corrections found while reviewing the running app.
   Spacing and type scale only. No new colours, typefaces, or graphics.
   =========================================================================== */

/* Paired panels were stretching to match the tallest one, leaving a large
   empty field under the shorter panel. Each panel now takes its own height. */
.grid.two-columns,
.grid.maintenance-layout,
.settings-grid,
.settings-grid-wide { align-items: start; }

/* The Purpose Map must stay one readable map. A long central goal was pushing
   the grid past 1700px, so the eight areas could no longer be seen together. */
.purpose-map-grid { grid-template-rows: repeat(3, minmax(186px, 232px)); min-height: 0; }
.purpose-map-intro { margin-bottom: 18px; }
.purpose-card-body { min-height: 0; }
.purpose-card-body h4 { margin-top: 0; }
.purpose-center-card { padding: 18px; }
.purpose-center-card h4 { margin: 12px auto 10px; max-width: 100%; overflow-wrap: break-word; hyphens: auto; }
.purpose-center-card[data-goal="short"] h4 { font: 650 clamp(26px, 3vw, 44px)/1.04 "Avenir Next", "Helvetica Neue", sans-serif; letter-spacing: -.05em; }
.purpose-center-card[data-goal="medium"] h4 { font: 650 clamp(20px, 2.1vw, 30px)/1.1 "Avenir Next", "Helvetica Neue", sans-serif; letter-spacing: -.035em; }
.purpose-center-card[data-goal="long"] h4 { font: 650 clamp(17px, 1.65vw, 23px)/1.18 "Avenir Next", "Helvetica Neue", sans-serif; letter-spacing: -.02em; }
.purpose-center-card[data-goal="xlong"] h4 { font: 600 clamp(15px, 1.35vw, 19px)/1.28 "Avenir Next", "Helvetica Neue", sans-serif; letter-spacing: -.01em; }

/* A ring containing nothing but a zero is noise on all eight cards. */
.connection-count[data-empty="true"] { visibility: hidden; }

@media (max-width: 820px) {
  .purpose-map-grid { grid-template-rows: none; }
}

/* The area sheet: header and progress stay put while the eight practices scroll,
   so you never lose track of which area you are inside. */
.purpose-area-dialog[open] { overflow: hidden; display: flex; }
.purpose-area-shell { display: flex; flex-direction: column; width: 100%; max-height: 100%; min-height: 0; }
.purpose-area-shell .purpose-action-list {
  overflow-y: auto;
  min-height: 0;
  scrollbar-gutter: stable;
  padding-right: 4px;
  -webkit-overflow-scrolling: touch;
}
/* "Today" inside the check control was 8px and hard to read. */
.purpose-row-check { font-size: 9.5px; letter-spacing: .02em; }

/* A full-width select was swallowing the panel header and forcing the title to wrap. */
.panel-header select { width: auto; min-width: 190px; max-width: 260px; flex: 0 0 auto; }


/* ===========================================================================
   v5.1.0: three approved refinements. Still black, white, and grey only,
   still one sans-serif system, still no decorative elements.
   =========================================================================== */

/* One language for "done". The tick was already yours, on the Purpose Map;
   it now means the same thing everywhere. */
.circle-check {
  display: grid;
  place-items: center;
  line-height: 1;
  color: transparent;
  font-size: 13px;
  font-weight: 800;
  transition: background .12s ease, border-color .12s ease;
}
.circle-check.checked {
  border-color: #111111;
  background: #111111;
  box-shadow: none;
  color: #ffffff;
}
.circle-check.checked::after { content: "✓"; }
@media (prefers-reduced-motion: reduce) { .circle-check { transition: none; } }

/* The close control keeps its generous target and its place, and loses the
   inset double stroke so it sits in the same drawing as everything else. */
.purpose-close-button {
  border-width: 1px;
  border-color: var(--line);
  border-radius: 16px;
  box-shadow: none;
  font-size: 24px;
  color: #111111;
  transition: border-color .12s ease, background .12s ease;
}
.purpose-close-button:hover { border-color: #111111; background: #f7f7f7; }
@media (prefers-reduced-motion: reduce) { .purpose-close-button { transition: none; } }
@media (max-width: 820px) { .purpose-close-button { border-width: 1px; border-radius: 14px; } }

/* A switch that behaves like the switch the row already implied. */
.toggle-row input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 52px;
  height: 30px;
  margin: 0;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #ffffff;
  position: relative;
  cursor: pointer;
  flex: 0 0 auto;
  transition: background .16s ease, border-color .16s ease;
}
.toggle-row input[type="checkbox"]::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #111111;
  transition: transform .16s ease, background .16s ease;
}
.toggle-row input[type="checkbox"]:checked { background: #111111; border-color: #111111; }
.toggle-row input[type="checkbox"]:checked::after { transform: translateX(22px); background: #ffffff; }
@media (prefers-reduced-motion: reduce) {
  .toggle-row input[type="checkbox"],
  .toggle-row input[type="checkbox"]::after { transition: none; }
}


/* ===========================================================================
   v5.2.0: Calendar and habit tracker. Additive only.
   Black, white and grey; the existing sans-serif system; no new ornament.
   =========================================================================== */

.cal-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.cal-nav { display: flex; gap: 8px; align-items: center; }
.cal-nav .quiet-button { min-width: 46px; min-height: 44px; }
#calPrev, #calNext { font-size: 20px; line-height: 1; padding: 8px 14px; }
.cal-panel { padding: 18px; }
.cal-footnote { max-width: 90ch; }

.cal-summary { display: flex; gap: 28px; margin: 0 0 16px; flex-wrap: wrap; }
.cal-summary div { display: flex; align-items: baseline; gap: 7px; }
.cal-summary strong { font: 600 22px "Avenir Next", "Helvetica Neue", sans-serif; }
.cal-summary span { color: var(--muted); font-size: 12px; }

/* Things already dated elsewhere in the planner, shown where they fall. */
.cal-allday { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; }
.cal-allday-empty { color: var(--muted); font-size: 12px; margin: 0 0 14px; }
.cal-chip {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 8px 10px 8px 13px;
  min-height: 44px;
  border: 1px solid var(--line);
  border-left: 3px solid #111111;
  background: #ffffff;
  border-radius: 10px;
  max-width: 300px;
}
.cal-chip-open {
  display: grid;
  gap: 2px;
  text-align: left;
  border: 0;
  background: transparent;
  cursor: pointer;
  min-width: 0;
  padding: 0;
}
.cal-chip span { font-size: 13px; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal-chip small { color: var(--muted); font-size: 11px; }
.cal-chip:hover { background: #f7f7f7; }
.cal-chip.done { border-left-color: var(--line); }
.cal-chip.done .cal-chip-open span { text-decoration: line-through; color: var(--muted); }
.cal-chip-check {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  border: 1.5px solid var(--line);
  border-radius: 50%;
  background: #ffffff;
  cursor: pointer;
  display: grid;
  place-items: center;
  color: transparent;
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  position: relative;
}
.cal-chip-check::before { content: ""; position: absolute; inset: -8px; }
.cal-chip-check::after { content: "✓"; }
.cal-chip-check:hover { border-color: #111111; }
.cal-chip.done .cal-chip-check { background: #111111; border-color: #111111; color: #ffffff; }

.cal-scroll { max-height: 620px; overflow: auto; border-top: 1px solid var(--line); scrollbar-gutter: stable; }
.cal-grid { display: grid; position: relative; }
.cal-grid-day { grid-template-columns: 64px minmax(0, 1fr); }
.cal-grid-week { grid-template-columns: 64px repeat(7, minmax(0, 1fr)); }

.cal-axis { border-right: 1px solid var(--line); }
.cal-grid-week .cal-axis { grid-row: 2; }
.cal-axis-row { position: relative; }
.cal-axis-row.hour span {
  position: absolute;
  top: -7px;
  right: 9px;
  font-size: 10px;
  font-weight: 800;
  color: var(--muted);
  letter-spacing: .02em;
}
.cal-corner { border-bottom: 1px solid var(--line); }
.cal-dayhead {
  border-bottom: 1px solid var(--line);
  border-left: 1px solid var(--line);
  padding: 8px 6px 9px;
  text-align: center;
  position: sticky;
  top: 0;
  background: #ffffff;
  z-index: 2;
}
.cal-dayhead button {
  border: 0;
  background: transparent;
  cursor: pointer;
  display: grid;
  gap: 1px;
  width: 100%;
  min-height: 44px;
  padding: 2px;
}
.cal-dayhead span { font-size: 10px; letter-spacing: .16em; font-weight: 800; color: var(--muted); }
.cal-dayhead strong { font: 600 19px "Avenir Next", "Helvetica Neue", sans-serif; }
.cal-dayhead.today strong {
  background: #111111;
  color: #ffffff;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  margin: 0 auto;
  font-size: 15px;
}
.cal-dayhead em { display: block; font-style: normal; font-size: 10px; color: var(--muted); }

.cal-column { position: relative; border-left: 1px solid var(--line); min-width: 0; }
.cal-column.today { background: #fafafa; }
.cal-line { border-bottom: 1px dashed #ececec; cursor: cell; }
.cal-line.hour { border-bottom: 1px solid var(--line); }
.cal-line:hover { background: #f4f4f4; }

.cal-block {
  position: absolute;
  z-index: 1;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 4px;
  padding: 4px 5px 4px 8px;
  border: 1px solid #111111;
  border-left: 4px solid #111111;
  border-radius: 7px;
  background: #ffffff;
}
.cal-block-open {
  border: 0;
  background: transparent;
  cursor: pointer;
  text-align: left;
  display: grid;
  align-content: start;
  gap: 2px;
  min-width: 0;
  padding: 1px 0;
  height: 100%;
}
.cal-block:hover { background: #f7f7f7; }
.cal-block-title { font-size: 12px; font-weight: 800; line-height: 1.25; overflow: hidden; text-overflow: ellipsis; }
.cal-block-meta { font-size: 10px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal-block.compact { padding: 2px 4px 2px 7px; align-items: center; }
.cal-block.compact .cal-block-open { align-content: center; }
.cal-block.compact .cal-block-title { font-size: 11px; white-space: nowrap; }
.cal-block.done { background: #111111; border-color: #111111; color: #ffffff; }
.cal-block.done .cal-block-title { text-decoration: line-through; }
.cal-block.done .cal-block-meta { color: rgba(255, 255, 255, .68); }

/* Finish it where it sits. No need to open anything. */
.cal-block-check {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  border: 1.5px solid #111111;
  border-radius: 50%;
  background: #ffffff;
  cursor: pointer;
  display: grid;
  place-items: center;
  color: transparent;
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
  position: relative;
}
.cal-block-check::before { content: ""; position: absolute; inset: -7px; }
.cal-block-check::after { content: "✓"; }
.cal-block-check:hover { background: #ededed; }
.cal-block.done .cal-block-check {
  background: #ffffff;
  border-color: #ffffff;
  color: #111111;
}
.cal-block.compact .cal-block-check { width: 17px; height: 17px; font-size: 10px; }

/* Month */
.cal-month { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.cal-month-head { padding: 9px 8px; font-size: 10px; letter-spacing: .16em; font-weight: 800; color: var(--muted); border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.cal-month-cell {
  min-height: 116px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: #ffffff;
  text-align: left;
  display: grid;
  align-content: start;
  gap: 3px;
  padding: 8px;
  cursor: pointer;
}
.cal-month-cell:hover { background: #f7f7f7; }
.cal-month-cell.outside { background: #fafafa; }
.cal-month-cell.outside .cal-month-date { color: #b3b3b3; }
.cal-month-date { font: 600 14px "Avenir Next", "Helvetica Neue", sans-serif; }
.cal-month-cell.today .cal-month-date {
  background: #111111;
  color: #ffffff;
  border-radius: 50%;
  width: 25px;
  height: 25px;
  display: grid;
  place-items: center;
}
.cal-month-item {
  font-size: 10.5px;
  line-height: 1.3;
  padding: 2px 5px;
  border-left: 2px solid #111111;
  background: #f4f4f4;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cal-month-item.untimed { background: transparent; border-left-style: dashed; }
.cal-month-item.done { text-decoration: line-through; color: var(--muted); border-left-color: var(--line); }
.cal-month-more { font-size: 10px; color: var(--muted); }

/* Habit tracker */
.habit-panel { margin-top: 22px; }
.habit-scroll { overflow-x: auto; scrollbar-gutter: stable; }
.habit-table { width: 100%; border-collapse: collapse; }
.habit-table th, .habit-table td { border-bottom: 1px solid var(--line); padding: 8px 4px; }
.habit-table thead th { border-bottom: 1px solid #111111; text-align: center; font-size: 10px; letter-spacing: .1em; font-weight: 800; color: var(--muted); }
.habit-table thead th span { display: block; }
.habit-table thead th small { font-size: 11px; color: var(--ink); font-weight: 800; letter-spacing: 0; }
.habit-table thead th.today small { background: #111111; color: #ffffff; border-radius: 50%; width: 22px; height: 22px; display: inline-grid; place-items: center; }
.habit-name-head { text-align: left; min-width: 200px; }
.habit-count-head { min-width: 52px; }
.habit-name { text-align: left; display: grid; gap: 2px; font-weight: 800; }
.habit-name span { font-size: 13px; }
.habit-name small { font-size: 10.5px; color: var(--muted); font-weight: 500; letter-spacing: .04em; }
.habit-table td { text-align: center; }
.habit-table td.today { background: #fafafa; }
.habit-cell {
  width: 28px;
  height: 28px;
  border: 1.5px solid var(--line);
  border-radius: 9px;
  background: #ffffff;
  cursor: pointer;
  display: inline-grid;
  place-items: center;
  color: transparent;
  font-size: 14px;
  font-weight: 800;
  line-height: 1;
}
.habit-cell:hover { border-color: #111111; }
.habit-cell.on { background: #111111; border-color: #111111; color: #ffffff; }
.habit-cell.on::after { content: "✓"; }
.habit-cell.future { border-style: dashed; }
.habit-count { font-size: 12px; font-weight: 800; color: var(--muted); }

/* Block editor */
.block-dialog { width: min(700px, calc(100vw - 32px)); border: 1px solid var(--line); border-radius: 22px; padding: 0; box-shadow: 0 28px 80px rgba(0,0,0,.2); }
.block-dialog::backdrop { background: rgba(0,0,0,.48); backdrop-filter: blur(3px); }
.block-form { padding: 24px; }
.form-grid.three-columns { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.block-actions { justify-content: space-between; align-items: center; }
.block-actions > div { display: flex; gap: 10px; }

@media (max-width: 1024px) {
  .cal-grid-week { grid-template-columns: 52px repeat(7, minmax(66px, 1fr)); }
  .cal-scroll { max-height: 560px; }
}
@media (max-width: 820px) {
  .cal-toolbar { align-items: stretch; flex-direction: column; }
  .cal-nav { justify-content: space-between; }
  .cal-grid-week { grid-template-columns: 46px repeat(7, minmax(58px, 1fr)); }
  .cal-month-cell { min-height: 88px; padding: 6px; }
  .cal-month-item { font-size: 9.5px; }
  .form-grid.three-columns { grid-template-columns: 1fr; }
  .block-actions { align-items: stretch; flex-direction: column-reverse; }
  .block-actions > div { display: grid; }
  .block-actions button { width: 100%; }
}


/* ---------------------------------------------------------------------------
   The binder rail. Months down the side; open a month to reach its weeks, a
   week to reach its days. Black tabs, white type, exactly as on paper.
   --------------------------------------------------------------------------- */

.cal-breadcrumb {
  margin: 0;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.cal-stage {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 46px;
  align-items: start;
}
.cal-stage .cal-panel { border-radius: var(--radius) 0 0 var(--radius); border-right: 0; }

.cal-rail {
  display: grid;
  gap: 3px;
  align-content: start;
  position: sticky;
  top: 118px;
  padding: 4px 0;
}
.cal-tab {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 6px;
  min-height: 46px;
  padding: 12px 7px;
  border: 1px solid #050505;
  border-left: 0;
  border-radius: 0 11px 11px 0;
  background: #050505;
  color: #ffffff;
  cursor: pointer;
  transition: transform .14s ease, background .14s ease, color .14s ease;
}
.cal-tab-label { font-size: 10.5px; font-weight: 800; letter-spacing: .16em; }
.cal-tab-sub { font-size: 10px; color: rgba(255, 255, 255, .62); letter-spacing: .06em; }
.cal-tab:hover { transform: translateX(3px); }

/* The pulled tab: white card, black type, standing proud of the others. */
.cal-tab.active {
  background: #ffffff;
  color: #111111;
  border-color: #111111;
  transform: translateX(6px);
}
.cal-tab.active .cal-tab-sub { color: var(--muted); }
.cal-tab.active:hover { transform: translateX(7px); }

.cal-tab.back { background: #ffffff; color: #111111; border-color: #111111; }
.cal-tab.back .cal-tab-label { font-size: 15px; letter-spacing: 0; }
.cal-tab.back .cal-tab-sub { color: var(--muted); }

.cal-tab.muted { background: #2a2a2a; }
.cal-tab.muted.active { background: #ffffff; }
.cal-tab[data-railyear] { cursor: default; background: transparent; color: var(--muted); border-color: transparent; }
.cal-tab[data-railyear]:hover { transform: none; }

@media (prefers-reduced-motion: reduce) {
  .cal-tab, .cal-tab:hover, .cal-tab.active, .cal-tab.active:hover { transition: none; transform: none; }
}

@media (max-width: 820px) {
  .cal-stage { grid-template-columns: minmax(0, 1fr) 40px; }
  .cal-tab { padding: 10px 5px; }
  .cal-tab-label { font-size: 9.5px; letter-spacing: .12em; }
  .cal-toolbar .cal-breadcrumb { order: -1; }
}


/* ===========================================================================
   v6: sign-in, first run, habits, look-aheads, records.
   Black, white and grey only. The existing sans-serif system. No new ornament.
   =========================================================================== */

/* The gate. Everything behind it is hidden until someone signs in. */
.auth-gate {
  position: fixed;
  inset: 0;
  z-index: 300;
  background: #ffffff;
  display: grid;
  place-items: center;
  padding: 24px;
  overflow-y: auto;
}
.auth-card { width: min(520px, 100%); text-align: left; }
.auth-mark {
  width: 54px; height: 54px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: #050505; color: #ffffff;
  font-weight: 700; letter-spacing: .08em; font-size: 18px;
  margin-bottom: 26px;
}
.auth-card h1 {
  margin: 10px 0 14px;
  font: 600 clamp(32px, 4.6vw, 46px)/1.05 "Avenir Next", "Helvetica Neue", sans-serif;
  letter-spacing: -.035em;
}
.auth-lead { margin: 0 0 28px; color: var(--muted); line-height: 1.65; max-width: 46ch; }
.auth-form { display: grid; gap: 0; }
.auth-form .primary-button { margin-top: 16px; justify-self: start; padding: 14px 20px; }
.auth-sent h2 { margin: 0 0 10px; font: 600 24px/1.2 "Avenir Next", "Helvetica Neue", sans-serif; letter-spacing: -.025em; }
.auth-sent p { color: var(--muted); line-height: 1.6; margin: 0 0 18px; }
.auth-message { margin: 16px 0 0; color: var(--muted); font-size: 13px; min-height: 1.2em; }
.auth-message.auth-error { color: #111111; font-weight: 800; }
.auth-note { margin: 30px 0 0; padding-top: 20px; border-top: 1px solid var(--line); color: var(--muted); font-size: 12px; line-height: 1.6; }
body:not(.signed-in) .app-shell { display: none; }
/* Nothing opens over the gate. A modal dialog normally sits in the browser's
   top layer, above any z-index, so it is closed rather than merely covered. */
body:not(.signed-in) dialog { display: none !important; }

/* First run */
.onboard-dialog {
  width: 100vw; max-width: none; height: 100dvh; max-height: none;
  margin: 0; padding: 0; border: 0; background: #ffffff; color: var(--ink);
}
.onboard-dialog::backdrop { background: #ffffff; }
.onboard-shell {
  min-height: 100%;
  width: min(760px, calc(100% - 44px));
  margin: 0 auto;
  padding: max(28px, env(safe-area-inset-top)) 0 max(28px, env(safe-area-inset-bottom));
  display: grid;
  grid-template-rows: auto 1fr auto auto;
}
.onboard-progress { height: 2px; background: rgba(0,0,0,.09); overflow: hidden; }
.onboard-progress span { display: block; height: 100%; width: 8%; background: #111111; transition: width .5s cubic-bezier(.22,1,.36,1); }
.onboard-body { align-content: center; display: grid; padding: 40px 0 28px; }
.onboard-kicker { margin: 0 0 18px; color: #111111; font-size: 11px; letter-spacing: .2em; font-weight: 900; }
.onboard-body h2 {
  margin: 0 0 18px;
  font: 600 clamp(30px, 4.4vw, 46px)/1.08 "Avenir Next", "Helvetica Neue", sans-serif;
  letter-spacing: -.03em;
  outline: none;
}
.onboard-lead { margin: 0 0 8px; color: var(--muted); font-size: 17px; line-height: 1.7; max-width: 60ch; }
.onboard-note { margin: 20px 0 0; padding-top: 16px; border-top: 1px solid var(--line); color: var(--muted); font-size: 13px; line-height: 1.6; }
.onboard-field { display: grid; gap: 8px; margin-top: 22px; }
.onboard-field > span { color: var(--muted); font-size: 12px; font-weight: 800; }
.onboard-field textarea, .onboard-field input { font-size: 16px; padding: 15px 16px; border-radius: 14px; }
.onboard-eight { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 22px; }
.onboard-eight label { grid-template-columns: 26px 1fr; align-items: center; gap: 10px; }
.onboard-eight label > span { margin: 0; color: var(--muted); font-size: 12px; font-weight: 800; text-align: center; }
.onboard-eight input { padding: 13px 14px; border-radius: 12px; }
.onboard-list { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.onboard-chip {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 9px 10px 9px 14px; border: 1px solid #111111; border-radius: 999px; font-size: 13px; font-weight: 800;
}
.onboard-chip button { border: 0; background: transparent; cursor: pointer; font-size: 16px; line-height: 1; padding: 4px 6px; }
.onboard-add { display: flex; gap: 8px; margin-top: 18px; flex-wrap: wrap; }
.onboard-add input { flex: 1 1 200px; padding: 13px 14px; border-radius: 12px; }
.onboard-add .secondary-button { flex: 0 0 auto; }
.onboard-suggest { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.onboard-suggest button {
  border: 1px dashed #9f9f9f; background: transparent; color: #111111;
  border-radius: 999px; padding: 9px 14px; font-weight: 800; font-size: 12px; cursor: pointer;
}
.onboard-message { margin: 0; min-height: 1.3em; color: #111111; font-size: 13px; font-weight: 800; }
.onboard-actions { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding-top: 20px; }
.onboard-actions .ritual-primary { margin-left: auto; }
@media (prefers-reduced-motion: reduce) { .onboard-progress span { transition: none; } }

/* Daily habits */
.habit-day-list { display: grid; gap: 8px; }
.habit-day-row {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  align-items: center;
  gap: 12px;
  padding: 11px 13px;
  border: 1px solid var(--line);
  border-radius: var(--radius-small);
  background: #ffffff;
}
.habit-day-row.done { opacity: .6; }
.habit-day-row.done .habit-day-name { text-decoration: line-through; }
.habit-day-name { font-size: 14px; font-weight: 800; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.habit-week { display: inline-flex; gap: 3px; }
.habit-week i { width: 9px; height: 9px; border-radius: 2px; border: 1px solid var(--line); background: #ffffff; }
.habit-week i.on { background: #111111; border-color: #111111; }
.habit-week i.now { outline: 1px solid #111111; outline-offset: 1px; }

/* What is coming */
.ahead-days { display: grid; gap: 2px; }
.ahead-day { padding: 11px 0; border-top: 1px solid var(--line); }
.ahead-day:first-child { border-top: 0; }
.ahead-day.today .ahead-day-head strong { background: #111111; color: #ffffff; padding: 2px 8px; border-radius: 999px; }
.ahead-day-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 6px; }
.ahead-day-head strong { font-size: 13px; }
.ahead-day-head span { color: var(--muted); font-size: 11px; }
.ahead-open { margin: 0; color: #b0b0b0; font-size: 12px; }
.ahead-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 9px;
  padding: 4px 0;
}
.ahead-dot { width: 6px; height: 6px; border-radius: 50%; background: #111111; }
.ahead-item.care .ahead-dot { background: #ffffff; border: 1px solid #111111; }
.ahead-item.practice .ahead-dot { border-radius: 1px; }
.ahead-item.good .ahead-dot { width: 8px; height: 8px; border-radius: 50%; box-shadow: 0 0 0 2px #ffffff, 0 0 0 3px #111111; }
.ahead-title { font-size: 13px; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ahead-item.good .ahead-title { font-style: italic; }
.ahead-meta { color: var(--muted); font-size: 11px; white-space: nowrap; }
.ahead-item.done .ahead-title { text-decoration: line-through; color: var(--muted); }
.ahead-bucket { margin-top: 22px; }
.ahead-bucket h4 {
  margin: 0 0 10px; padding-bottom: 8px; border-bottom: 1px solid #111111;
  font: 600 15px "Avenir Next", "Helvetica Neue", sans-serif;
  display: flex; justify-content: space-between; align-items: baseline;
}
.ahead-bucket h4 span { color: var(--muted); font-size: 11px; font-weight: 800; }

/* Records */
.log-card { display: grid; align-content: start; }

/* Repeating blocks */
.repeat-days { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.repeat-days label {
  grid-template-columns: auto auto; align-items: center; gap: 7px;
  border: 1px solid var(--line); border-radius: 999px; padding: 9px 13px; cursor: pointer; min-height: 44px;
}
.repeat-days span { margin: 0; font-size: 12px; font-weight: 800; color: #111111; }
.repeat-days input { width: 16px; height: 16px; accent-color: #111111; }

@media (max-width: 820px) {
  .onboard-eight { grid-template-columns: 1fr; }
  .onboard-shell { width: min(100% - 34px, 760px); }
  .habit-day-row { grid-template-columns: auto 1fr auto; }
  .habit-week { display: none; }
  .ahead-item { grid-template-columns: auto minmax(0, 1fr); }
  .ahead-meta { grid-column: 2; white-space: normal; }
}


/* --- v6.1: the clock, habit plans, and orientation ------------------------ */

.date-pill { display: inline-flex; align-items: baseline; gap: 9px; }
.clock-day { font-weight: 700; color: var(--ink); }
.clock-time { color: var(--muted); font-variant-numeric: tabular-nums; }

.habit-day-row { grid-template-columns: auto 1fr auto auto; align-items: center; }
.habit-day-copy { display: grid; gap: 2px; min-width: 0; }
.habit-day-copy small { color: var(--muted); font-size: 11px; line-height: 1.35; }
.habit-plan-prompt {
  border: 0; background: transparent; padding: 0;
  color: #111111; font-weight: 800; font-size: 11px; text-decoration: underline; cursor: pointer;
}

/* Both ways up. Nothing is locked to one orientation, and the tall panels
   stop competing for height when the screen is short and wide. */
@media (orientation: landscape) and (max-height: 700px) {
  .cal-scroll { max-height: min(420px, 52vh); }
  .hero-card { padding: 22px 26px; }
  .hero-card h3 { font-size: clamp(20px, 2.6vw, 26px); }
  .hero-progress { width: 78px; height: 78px; border-width: 5px; }
  .hero-progress span { font-size: 19px; }
  .view { padding-top: 20px; }
  .topbar { min-height: 78px; }
}
@media (orientation: portrait) and (min-width: 700px) {
  .two-columns { grid-template-columns: 1fr; }
  .form-grid.two-columns { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .settings-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cal-scroll { max-height: 62vh; }
}


/* --- v7: the one place colour is allowed --------------------------------- */

.day-colour { display: flex; align-items: center; gap: 10px; margin-top: 4px; }
.day-colour input[type="color"] {
  width: 46px; height: 46px; padding: 0; flex: 0 0 auto; cursor: pointer;
  border: 1px solid var(--line); border-radius: 12px; background: #ffffff;
}
.day-colour input[type="color"]::-webkit-color-swatch-wrapper { padding: 4px; }
.day-colour input[type="color"]::-webkit-color-swatch { border: 0; border-radius: 8px; }
.day-colour.chosen input[type="color"] { border-color: #111111; }
.day-colour input[type="text"] { flex: 1 1 auto; }
#dayColourClear { flex: 0 0 auto; }

/* The year, laid out all at once. Seven rows, one column a week. */
.year-grid {
  display: grid;
  grid-template-rows: repeat(7, 1fr);
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 3px;
  margin: 4px 0 8px;
}
.year-grid i {
  aspect-ratio: 1;
  border-radius: 2px;
  background: #111111;
  min-width: 6px;
}
.year-grid i.empty { background: transparent; box-shadow: inset 0 0 0 1px var(--line); }
.year-grid i.now { outline: 1.5px solid #111111; outline-offset: 1px; }
.year-months {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .08em;
  margin-bottom: 14px;
}
.year-top { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 6px; }
.year-swatch {
  display: inline-flex; align-items: center; gap: 8px;
  border: 1px solid var(--line); border-radius: 999px;
  padding: 7px 13px 7px 8px; font-size: 12px; font-weight: 800;
}
.year-swatch i { width: 14px; height: 14px; border-radius: 4px; flex: 0 0 auto; }

@media (max-width: 820px) {
  .year-grid { gap: 2px; }
  .year-months { font-size: 8.5px; letter-spacing: .04em; }
}

/* v7.1.4: short blocks carry their start time inline, so a sixteen-minute
   block stays readable without pretending to be half an hour tall. */
.cal-block.compact .cal-block-title b { font-weight: 800; opacity: .72; letter-spacing: -.01em; }

/* v7.2.0: the typed code. Wide, spaced digits so a six-figure code is easy to
   read back from an email on a small screen. */
.auth-code-form { margin: 18px 0 20px; text-align: left; }
.auth-code-form #authCode {
  width: 100%; margin: 6px 0 12px; padding: 16px 18px;
  font: 800 26px/1 "Avenir Next", "Helvetica Neue", sans-serif;
  letter-spacing: .34em; text-align: center;
  border: 1px solid #d9d9d9; border-radius: 16px; background: #fff; color: #080808;
}
.auth-code-form #authCode:focus { outline: 3px solid #080808; outline-offset: 2px; }
.auth-code-form #authCode::placeholder { color: #c4c4c4; letter-spacing: .34em; }
.auth-code-form .auth-note { margin-top: 12px; }

/* v7.2.0: with sign-in switched off there is no account to show and no cloud
   copy to promise, so those parts of Settings are removed rather than left
   sitting there saying nothing. */
body.no-account [data-needs-account] { display: none; }
body:not(.no-account) [data-no-account-note] { display: none; }

/* v7.3.0: Rhythm. The five evening sliders, given somewhere to live.
   Still black, white and grey. Colour appears only where you chose it. */
.rh-panel { display: grid; gap: 18px; }
.rh-row { display: grid; grid-template-columns: 190px 1fr 78px; align-items: center; gap: 20px; }
.rh-row.compact { grid-template-columns: 110px 1fr 44px; gap: 14px; }
.rh-label { display: flex; flex-direction: column; gap: 3px; }
.rh-label span { font-weight: 800; font-size: 15px; letter-spacing: -.01em; }
.rh-delta { font-size: 11.5px; color: #6e6e6e; }
.rh-delta.up::before { content: "▲ "; font-size: 8px; }
.rh-delta.down::before { content: "▼ "; font-size: 8px; }
.rh-bars { display: flex; align-items: flex-end; gap: 3px; height: 46px; }
.rh-row.compact .rh-bars { height: 32px; }
.rh-bar { flex: 1; min-width: 3px; height: var(--h, 20%); background: #080808; border-radius: 2px; display: block; }
.rh-bar.empty { height: 100%; background: #ededed; border-radius: 2px; }
.rh-avg { text-align: right; }
.rh-avg strong { font-size: 24px; font-weight: 800; letter-spacing: -.03em; display: block; line-height: 1; }
.rh-avg small { font-size: 10.5px; color: #8d8d8d; }
.rh-insight h3 { margin: 6px 0 10px; font-size: 26px; line-height: 1.15; letter-spacing: -.02em; }
.rh-insight p { color: #5e5e5e; line-height: 1.6; max-width: 62ch; }
.rh-insight.quiet h3 { color: #4a4a4a; }
.rh-colours { display: grid; grid-template-columns: repeat(10, 1fr); gap: 6px; margin-top: 4px; }
.rh-colours i { display: block; aspect-ratio: 1; border-radius: 4px; }
.rh-colours i.empty { background: #f1f1f1; }
@media (max-width: 900px) {
  .rh-row { grid-template-columns: 132px 1fr 56px; gap: 12px; }
  .rh-insight h3 { font-size: 21px; }
}

/* ============================================================
   v7.5.0: black and white, and one typeface choice.
   The accent colour experiment is gone. Colour belongs to one place in this
   app, the colour of the day, where it means something. Everywhere else it
   was just noise.
   ============================================================ */
:root { --font: "Avenir Next", "Helvetica Neue", -apple-system, BlinkMacSystemFont, Arial, sans-serif; }

body, .hero-card h3, .brand-mark,
.brand h1, .topbar h2, .panel h3, .section-intro h3,
.morning-summary-card h3, .ritual-step h2, .dialog-header h3,
button, input, textarea, select { font-family: var(--font); }

/* Choosing it */
.th-fonts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 16px; }
.th-font {
  text-align: left; padding: 14px 16px; border: 1px solid var(--line);
  border-radius: 16px; background: #fff; cursor: pointer; display: grid; gap: 3px;
}
.th-font.on { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.th-font strong { font-size: 15px; font-weight: 800; }
.th-font em { font-style: normal; font-size: 11.5px; color: var(--muted); }
.th-font span { font-size: 13px; color: #3d3d3d; margin-top: 3px; }
@media (max-width: 720px) { .th-fonts { grid-template-columns: 1fr; } }

/* v7.4.0: the "when, exactly?" step. Habit, its cue, and its time on one row. */
.onboard-when { display: grid; gap: 12px; margin: 18px 0 6px; }
.when-row {
  display: grid; grid-template-columns: 1fr 1.3fr .8fr; gap: 14px; align-items: end;
  padding: 16px; border: 1px solid var(--line); border-radius: 16px; background: #fff;
}
.when-row > strong { font-size: 15px; font-weight: 800; letter-spacing: -.01em; padding-bottom: 10px; }
.when-row label { display: grid; gap: 5px; }
.when-row label > span { font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.when-row input, .when-row select {
  padding: 11px 13px; border: 1px solid var(--line); border-radius: 11px;
  background: #fff; color: var(--ink); font-size: 15px; width: 100%;
}
@media (max-width: 780px) {
  .when-row { grid-template-columns: 1fr; gap: 10px; }
  .when-row > strong { padding-bottom: 0; }
}

/* v7.5.0: how today felt. Six named feelings, decided on the way in, tapped
   once at night. The colour is the only colour in the app, which is what makes
   the year grid under Record mean anything. */
.feeling-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 6px; }
.feeling {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 15px 9px 10px; border: 1px solid var(--line);
  border-radius: 999px; background: #fff; cursor: pointer;
  font-weight: 700; font-size: 13.5px; color: var(--ink);
}
.feeling i { width: 18px; height: 18px; border-radius: 50%; background: var(--f); display: block; }
.feeling.on { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.feeling.clear { padding: 9px 15px; color: var(--muted); font-weight: 600; }
.feeling:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }

/* Choosing them, on the way in and in Settings. */
.palette-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin: 16px 0 6px; }
.palette-row {
  display: flex; align-items: center; gap: 12px; padding: 10px 12px;
  border: 1px solid var(--line); border-radius: 14px; background: #fff;
}
.palette-row input[type="color"] {
  width: 42px; height: 42px; padding: 0; border: 1px solid var(--line);
  border-radius: 11px; background: #fff; cursor: pointer; flex: none;
}
.palette-row input[type="text"] {
  flex: 1; min-width: 0; padding: 10px 12px; border: 1px solid var(--line);
  border-radius: 11px; font-size: 15px; font-weight: 700;
}
@media (max-width: 760px) { .palette-grid { grid-template-columns: 1fr; } }

/* v7.5.0: the five evening sliders, one per row.
   They were five narrow cards side by side: the labels wrapped, every value
   read "3", and the slider was too short to drag with a thumb. */
.pulse-grid { grid-template-columns: 1fr; gap: 4px; }
.pulse-item {
  display: grid; grid-template-columns: 108px 1fr 96px; align-items: center;
  gap: 16px; text-align: left; border: 0; border-radius: 0;
  padding: 11px 0; background: none;
  border-bottom: 1px solid var(--gold-soft);
}
.pulse-item:last-child { border-bottom: 0; }
.pulse-item label { margin: 0; font-size: 14px; font-weight: 800; color: var(--ink); letter-spacing: -.01em; }
.pulse-item input[type="range"] { width: 100%; height: 30px; }
.pulse-item strong { margin: 0; display: flex; align-items: baseline; justify-content: flex-end; gap: 7px; font-size: 20px; font-weight: 800; }
.pulse-item strong em { font-style: normal; font-size: 11px; font-weight: 700; color: var(--muted); letter-spacing: .01em; }
@media (max-width: 900px) {
  .pulse-grid { grid-template-columns: 1fr; }
  .pulse-item { grid-template-columns: 92px 1fr 82px; gap: 12px; }
}
@media (max-width: 520px) {
  .pulse-item { grid-template-columns: 84px 1fr 30px; gap: 10px; }
  .pulse-item strong em { display: none; }
}

/* v7.6.0: the recap. A page you can read, save, or send on. */
.recap-list { display: grid; gap: 8px; margin-top: 14px; }
.recap-item {
  display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
  padding: 15px 18px; border: 1px solid var(--line); border-radius: 14px;
  background: #fff; cursor: pointer; text-align: left; width: 100%;
}
.recap-item strong { font-size: 16px; font-weight: 800; letter-spacing: -.015em; }
.recap-item span { font-size: 12.5px; color: var(--muted); white-space: nowrap; }
.recap-item:hover { border-color: var(--ink); }
.recap-item.year { background: var(--ink); color: #fff; border-color: var(--ink); }
.recap-item.year span { color: rgba(255,255,255,.66); }

.recap-dialog { border: 0; padding: 0; background: none; max-width: min(760px, 94vw); width: 100%; }
.recap-dialog::backdrop { background: rgba(8,8,8,.55); }
.recap-shell {
  background: #fff; border-radius: 22px; overflow: hidden;
  display: flex; flex-direction: column; max-height: 92vh;
}
.recap-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 16px 20px; border-bottom: 1px solid var(--line); flex: none;
}
.recap-bar h3 { margin: 0; font-size: 18px; letter-spacing: -.02em; }
.recap-bar-actions { display: flex; align-items: center; gap: 10px; }
#recapFrame { border: 0; width: 100%; height: 74vh; background: var(--ivory); }

/* v7.6.0: upkeep. The self-care that quietly slips first. */
.upkeep-list { display: grid; gap: 8px; margin-top: 12px; }
.upkeep-row {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 14px 16px; border: 1px solid var(--line); border-radius: 14px; background: #fff;
}
.upkeep-row.overdue { border-color: var(--ink); }
.upkeep-what { display: grid; gap: 3px; min-width: 0; }
.upkeep-what strong { font-size: 15.5px; font-weight: 800; letter-spacing: -.015em; }
.upkeep-what span { font-size: 12.5px; color: var(--muted); }
.upkeep-row.overdue .upkeep-what span { color: var(--ink); font-weight: 700; }
.upkeep-actions { display: flex; align-items: center; gap: 10px; flex: none; }
.upkeep-note {
  margin-top: 16px; padding: 20px; border-radius: 16px;
  background: var(--ivory); border: 1px solid var(--line);
}
.upkeep-note p:not(.eyebrow) { margin: 10px 0 0; font-size: 15px; line-height: 1.65; color: #3d3d3d; max-width: 60ch; }
.upkeep-note p:first-of-type { margin-top: 0; }
@media (max-width: 620px) {
  .upkeep-row { flex-direction: column; align-items: stretch; gap: 12px; }
  .upkeep-actions { justify-content: space-between; }
}

/* v7.7.0: the check-in. A question with real answers, not a notice. */
.upkeep-note h3 { margin: 6px 0 12px; font-size: 25px; line-height: 1.2; letter-spacing: -.025em; }
.checkin-choices { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 16px; }
.checkin-choices .secondary-button { padding: 12px 18px; font-size: 13.5px; }
@media (max-width: 620px) {
  .checkin-choices { flex-direction: column; align-items: stretch; }
  .checkin-choices .text-button { text-align: center; padding: 8px; }
}

/* v7.8.0: the eight, explained, and the source named. */
.eight-body { padding: 30px 34px 40px; overflow-y: auto; max-height: 78vh; }
.eight-doc h2 { margin: 8px 0 18px; font-size: 32px; line-height: 1.14; letter-spacing: -.03em; max-width: 20ch; }
.eight-doc h3 { margin: 30px 0 8px; font-size: 17px; letter-spacing: -.015em; }
.eight-doc p { margin: 0 0 12px; font-size: 15.5px; line-height: 1.68; color: #3d3d3d; max-width: 64ch; }
.eight-doc .eight-lead { font-size: 17px; line-height: 1.62; color: var(--ink); }
.eight-doc .helper { font-size: 13px; color: var(--muted); }
.eight-kinds { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin: 14px 0 8px; }
.eight-kind { padding: 14px 16px; border: 1px solid var(--line); border-radius: 14px; background: #fff; }
.eight-kind strong { display: block; font-size: 14.5px; font-weight: 800; letter-spacing: -.01em; }
.eight-kind p { margin: 5px 0 8px; font-size: 13px; line-height: 1.55; color: var(--muted); }
.eight-kind span { font-size: 11.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--ink); }

.eight-source { margin-top: 34px; padding-top: 26px; border-top: 1px solid var(--line); }
.eight-source h3 { margin: 6px 0 12px; font-size: 22px; letter-spacing: -.02em; }
.eight-tools { margin: 6px 0 16px; padding-left: 20px; }
.eight-tools li { font-size: 15px; line-height: 1.75; color: #3d3d3d; }
.eight-tools li.missing { color: var(--muted); }
.eight-legal { font-size: 13px !important; line-height: 1.6 !important; color: var(--muted) !important; }
.eight-legal a { color: var(--ink); }
@media (max-width: 720px) {
  .eight-body { padding: 22px 20px 30px; }
  .eight-doc h2 { font-size: 25px; }
  .eight-kinds { grid-template-columns: 1fr; }
}