:root {
  --bg: #0f1115;
  --fg: #e6e6e6;
  --muted: #8a8f99;
  --card: #171a21;
  --border: #262a33;
  --accent: #7aa2f7;
  --done: #6c7280;
  --danger: #f7768e;
  --heat-cell-size: 28px;
}

* { box-sizing: border-box; }

html, body { height: 100%; }
body {
  margin: 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  background: var(--bg);
  color: var(--fg);
  line-height: 1.5;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

main {
  flex: 1 0 auto;
  width: 100%;
  max-width: 760px;
  margin: 0 auto;
  padding: 1.5rem 1rem 3rem;
}

.banner {
  width: 100%;
  padding: 0.6rem 1rem;
  background: var(--card);
  border-bottom: 1px solid var(--border);
  text-align: center;
}
.banner a {
  color: var(--accent);
  text-decoration: none;
  font-weight: bold;
  font-size: 1.1rem;
  letter-spacing: 0.18em;
}

.topnav {
  width: 100%;
  padding: 0.5rem 1rem;
  background: var(--card);
  border-bottom: 1px solid var(--border);
}
.topnav-inner {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 1rem;
  row-gap: 0.3rem;
  align-items: center;
  max-width: 560px;
  margin: 0 auto;
}
.topnav a {
  color: var(--muted);
  text-decoration: none;
  font-size: 0.85rem;
  text-align: center;
  padding: 0.15rem 0.25rem;
}
.topnav a.active, .topnav a:hover { color: var(--fg); }

.page-head { text-align: center; }
.page-head h1 { margin: 0 0 1rem; }

footer.logs-link {
  flex-shrink: 0;
  width: 100%;
  padding: 1rem;
  text-align: center;
  border-top: 1px solid var(--border);
  background: var(--card);
}
footer.logs-link a {
  color: var(--muted);
  text-decoration: none;
  font-size: 0.85rem;
  letter-spacing: 0.08em;
}
footer.logs-link a:hover { color: var(--accent); }

.logs-cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1.5rem;
}
.logs-col h3 {
  margin: 0 0 0.5rem;
  font-size: 0.8rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.logs-col ul { list-style: none; padding: 0; margin: 0; }
.logs-col li { padding: 0.2rem 0; font-size: 0.9rem; }
.logs-col li.muted { color: var(--muted); }
.logs-col a { color: var(--fg); text-decoration: none; }
.logs-col a:hover { color: var(--accent); }

/* combined biweekly task-dots + habit heatmap grid */
.combo-wrap {
  display: flex;
  justify-content: center;
  overflow-x: auto;
}
table.combo-grid {
  border-collapse: separate;
  border-spacing: 3px;
  font-size: 0.8rem;
  margin: 0 auto;
}
.combo-grid th { font-weight: normal; color: var(--muted); padding: 0.2rem 0.3rem; }
.task-col-head, .heat-name {
  text-align: center;
  width: var(--heat-cell-size);
  min-width: var(--heat-cell-size);
  padding: 0.3rem 0.15rem !important;
  font-size: 0.85rem;
}
.heat-name { font-size: 1.4rem; line-height: 1; }
.date-col-head { width: 3.5rem; }
.center-date {
  text-align: center !important;
  color: var(--muted);
  padding: 0.2rem 0.5rem !important;
  border-left: 1px solid var(--border);
  border-right: 1px solid var(--border);
}
.task-cell {
  width: var(--heat-cell-size);
  height: var(--heat-cell-size);
  background: #1f2330;
  border-radius: 3px;
  cursor: pointer;
}
.task-cell:hover { outline: 1px solid var(--accent); }
.task-cell.on { background: #e0af68; }

/* backlog */
.card.backlog { border-left: 2px solid #e0af68; }
ul.backlog-list { list-style: none; padding: 0; margin: 0; }
li.backlog-item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}
li.backlog-item:last-child { border-bottom: 0; }
li.backlog-item.error { color: var(--danger); font-style: italic; }
.backlog-meta {
  display: flex;
  flex-direction: column;
  min-width: 6rem;
  font-size: 0.75rem;
}
.backlog-date { color: var(--muted); }
.backlog-kind { color: var(--accent); font-size: 0.7rem; text-transform: uppercase; }
.backlog-text { flex: 1 1 12rem; font-size: 0.95rem; }
.backlog-actions {
  display: flex;
  gap: 0.35rem;
  flex-wrap: wrap;
  margin-left: auto;
}
.backlog-btn {
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--fg);
  border-radius: 4px;
  padding: 0.3rem 0.6rem;
  cursor: pointer;
  font-family: inherit;
  font-size: 0.8rem;
}
.backlog-btn:hover { border-color: var(--accent); color: var(--accent); }
.backlog-btn.danger:hover { border-color: var(--danger); color: var(--danger); }

/* exercise rows */
ul.exercises { list-style: none; padding: 0; margin: 0; }
li.exercise {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.4rem 0;
  border-bottom: 1px solid var(--border);
}
li.exercise:last-child { border-bottom: 0; }
li.exercise.done { background: rgba(158, 206, 106, 0.18); }
li.exercise.done .text { color: #9ece6a; text-decoration: line-through; }
li.exercise .text { flex: 1; }
li.exercise .spec {
  color: var(--muted);
  font-size: 0.85rem;
  font-variant-numeric: tabular-nums;
}

/* habit action button (prayer / exercise pages) */
.habit-action { text-align: center; margin-top: 1.5rem; }
.habit-btn {
  background: var(--card);
  border: 1px solid var(--border);
  color: var(--fg);
  border-radius: 8px;
  padding: 1rem 2rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  font-family: inherit;
}
.habit-btn:hover { border-color: var(--accent); }
.habit-btn.done { background: rgba(158, 206, 106, 0.15); border-color: #9ece6a; }
.habit-btn-symbol { font-size: 2rem; line-height: 1; }
.habit-btn-label { color: var(--muted); font-size: 0.9rem; }
.habit-btn.done .habit-btn-label { color: #9ece6a; }

.page-head h1 { margin: 0 0 1rem; font-size: 1.5rem; }
.page-head .muted { color: var(--muted); margin: 0 0 1rem; }

.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 1rem 1.25rem;
  margin-bottom: 1.25rem;
}
.card h2 { margin: 0 0 0.75rem; font-size: 1rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; }

ul.tasks, ul.habits, ul.poses, ul.goals, ul.sessions {
  list-style: none;
  padding: 0;
  margin: 0 0 0.75rem;
}

li.task, li.habit, li.pose, li.goal {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.4rem 0;
  border-bottom: 1px solid var(--border);
}
li.task:last-child, li.habit:last-child, li.pose:last-child, li.goal:last-child { border-bottom: 0; }

li.task.done .text, li.habit.done .text, li.pose.done .text {
  color: #9ece6a;
  text-decoration: line-through;
}
li.task.done, li.habit.done, li.pose.done {
  background: rgba(158, 206, 106, 0.18);
}

button.toggle, button.del {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--fg);
  border-radius: 4px;
  width: 1.8rem;
  height: 1.8rem;
  cursor: pointer;
  font-family: inherit;
}
button.toggle:hover { border-color: var(--accent); }
button.del { color: var(--danger); border-color: transparent; margin-left: auto; }
button.del:hover { border-color: var(--danger); }

.text { flex: 1; }
.streak { color: var(--muted); font-size: 0.85rem; }
.tag { color: var(--accent); font-size: 0.85rem; min-width: 5rem; }
.parent { color: var(--muted); font-size: 0.85rem; margin-right: 0.5rem; }

.add-form {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.75rem;
  flex-wrap: wrap;
}
.add-form input[type="text"] { flex: 1 1 auto; min-width: 8rem; }
.add-form input, .add-form select, .add-form button {
  background: var(--bg);
  color: var(--fg);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 0.4rem 0.6rem;
  font-family: inherit;
  font-size: 0.9rem;
}
.add-form button {
  background: var(--accent);
  color: var(--bg);
  border: 0;
  cursor: pointer;
  font-weight: bold;
}
.add-form button:hover { filter: brightness(1.1); }

ul.sessions li { padding: 0.4rem 0; border-bottom: 1px solid var(--border); }
ul.sessions a { color: var(--fg); text-decoration: none; }
ul.sessions a:hover { color: var(--accent); }

a { color: var(--accent); }

/* --- slot rows (fixed-arity) --- */
ul.slots { list-style: none; padding: 0; margin: 0 0 0.25rem; }
li.slot {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.35rem 0;
  border-bottom: 1px solid var(--border);
}
li.slot:last-child { border-bottom: 0; }
li.slot.done { background: rgba(158, 206, 106, 0.18); }
li.slot.done .slot-text { color: #9ece6a; text-decoration: line-through; }
.slot-num { color: var(--muted); width: 1.5rem; text-align: right; }
.slot-text {
  flex: 1;
  background: transparent;
  border: 0;
  border-bottom: 1px dashed transparent;
  color: var(--fg);
  font-family: inherit;
  font-size: 0.95rem;
  padding: 0.2rem 0.25rem;
}
.slot-text:hover { border-bottom-color: var(--border); }
.slot-text:focus { outline: none; border-bottom-color: var(--accent); }

li.slot.book {
  flex-wrap: wrap;
}
.book-title, .book-author {
  background: transparent;
  border: 0;
  border-bottom: 1px dashed transparent;
  color: var(--fg);
  font-family: inherit;
  font-size: 0.95rem;
  padding: 0.2rem 0.25rem;
}
.book-title { flex: 2 1 12rem; }
.book-author { flex: 1 1 8rem; color: var(--muted); }
.book-title:hover, .book-author:hover { border-bottom-color: var(--border); }
.book-title:focus, .book-author:focus { outline: none; border-bottom-color: var(--accent); }

button.toggle.status { font-weight: bold; }
button.toggle.status.status-todo    { color: var(--muted); }
button.toggle.status.status-reading { color: var(--accent); }
button.toggle.status.status-done    { color: #9ece6a; }

.subhead { color: var(--muted); font-size: 0.85rem; margin: 0.5rem 0 0.25rem; }

/* --- heatmap --- */
.heatmap-wrap {
  overflow-x: auto;
  display: flex;
  justify-content: center;
}
table.heatmap {
  border-collapse: separate;
  border-spacing: 3px;
  font-size: 0.8rem;
}
table.heatmap th { font-weight: normal; color: var(--muted); padding: 0.2rem 0.3rem; }
.heat-name {
  text-align: center;
  font-size: 2rem;
  line-height: 1;
  padding: 0.4rem 0.5rem !important;
}
.heat-date { text-align: right; padding: 0.2rem 0.5rem !important; color: var(--muted); }
.heat-total { color: var(--muted); text-align: center; padding-top: 0.4rem; }
.heat-total-label { color: var(--muted); text-align: right; padding-top: 0.4rem !important; }
.heat-cell {
  width: var(--heat-cell-size);
  height: var(--heat-cell-size);
  background: #1f2330;
  border-radius: 3px;
  cursor: pointer;
}
.heat-cell:hover { outline: 1px solid var(--accent); }
.heat-cell.on { background: #9ece6a; }

/* biweekly overview table on /quarterly */
table.bw-overview {
  border-collapse: separate;
  border-spacing: 0;
  font-size: 0.85rem;
}
table.bw-overview th, table.bw-overview td {
  padding: 0.4rem 0.6rem;
  border-bottom: 1px solid var(--border);
}
table.bw-overview thead th { color: var(--muted); }
.period-label {
  text-align: left;
  white-space: nowrap;
  color: var(--fg);
  font-weight: normal;
}
.period-label a { color: var(--fg); text-decoration: none; }
.period-label a:hover { color: var(--accent); }
.period-label .muted { color: var(--muted); font-size: 0.75rem; }
.bw-count {
  text-align: center;
  font-variant-numeric: tabular-nums;
  min-width: 2.5rem;
}

/* habit list rows: enlarge the symbol */
li.habit .text {
  font-size: 1.8rem;
  line-height: 1;
}

/* --- timeline --- */
.timeline {
  display: grid;
  grid-template-columns: 4rem 1fr;
  grid-template-rows: repeat(34, 2.2rem);
  column-gap: 0.5rem;
  row-gap: 0;
}
.hour-label {
  grid-column: 1;
  color: var(--muted);
  font-size: 0.85rem;
  text-align: right;
  padding-right: 0.5rem;
  padding-top: 0.25rem;
}
.hour-label.on-hour { font-weight: bold; color: var(--fg); }
.tl-cell {
  grid-column: 2;
  border-top: 1px dashed var(--border);
  display: flex;
  align-items: stretch;
  min-height: 2.2rem;
}
.tl-cell.on-hour { border-top: 1px solid var(--border); }
.tl-cell:hover { background: rgba(122, 162, 247, 0.06); }
.tl-cell.filled { background: rgba(122, 162, 247, 0.32); }
.tl-cell.filled.small { background: rgba(125, 207, 255, 0.32); }
.tl-cell.done { background: rgba(158, 206, 106, 0.18); }
.tl-cell-select {
  width: 100%;
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border: 0;
  color: var(--muted);
  font-family: inherit;
  font-size: 0.85rem;
  padding: 0.2rem 0.5rem;
  cursor: pointer;
}
.tl-cell-select:focus { outline: 1px solid var(--accent); outline-offset: -1px; }
.tl-cell.filled .tl-cell-select { color: var(--accent); font-weight: bold; }
.tl-cell.filled.small .tl-cell-select { color: #7dcfff; }
.tl-cell.done .tl-cell-select { color: #9ece6a; text-decoration: line-through; }

.now-line {
  grid-column: 1 / -1;
  align-self: start;
  height: 2px;
  background: #e0af68;
  box-shadow: 0 0 4px rgba(224, 175, 104, 0.7);
  z-index: 5;
  pointer-events: none;
  position: relative;
}
.now-line::before {
  content: '';
  position: absolute;
  left: 0;
  top: -3px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #e0af68;
}

/* current-row yellow highlight on heatmaps — exclude .on cells so the
   selected (green/orange) state isn't overcolored by the row tint */
table.combo-grid tr.is-current th.heat-date,
table.bw-overview tr.is-current th.period-label,
table.bw-overview tr.is-current th.period-label a {
  color: #e0af68;
  font-weight: bold;
}
table.combo-grid tr.is-current td:not(.on),
table.combo-grid tr.is-current th,
table.bw-overview tr.is-current td,
table.bw-overview tr.is-current th {
  background: rgba(224, 175, 104, 0.12);
}
/* Re-assert .on backgrounds with higher specificity so they always win */
table.combo-grid tr td.heat-cell.on { background: #9ece6a; }
table.combo-grid tr td.task-cell.on { background: #e0af68; }

/* --- eternal picker on quarterly goal rows --- */
.eternal-pick { display: inline-flex; margin-left: auto; }
.eternal-pick select {
  background: var(--bg);
  color: var(--muted);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 0.15rem 0.3rem;
  font-family: inherit;
  font-size: 0.75rem;
  max-width: 9rem;
}
.eternal-pick select:hover { border-color: var(--accent); color: var(--fg); }

/* --- meditation timer --- */
.meditation-card { text-align: center; padding: 2.5rem 1rem; }
.meditation-card.done { background: rgba(158, 206, 106, 0.12); }
.med-display {
  font-size: 4rem;
  font-weight: bold;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.05em;
  color: var(--accent);
  margin-bottom: 1.5rem;
}
.meditation-card.done .med-display { color: #9ece6a; }
.med-controls { display: flex; gap: 0.75rem; justify-content: center; flex-wrap: wrap; }
.med-btn {
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--fg);
  border-radius: 6px;
  padding: 0.6rem 1.4rem;
  cursor: pointer;
  font-family: inherit;
  font-size: 0.9rem;
}
.med-btn:hover { border-color: var(--accent); color: var(--accent); }

/* --- prayer sections --- */
.prayer-section {
  padding: 0.75rem 0 1rem;
  border-bottom: 1px solid var(--border);
}
.prayer-section:last-child { border-bottom: 0; padding-bottom: 0; }
.prayer-section:first-child { padding-top: 0; }
.prayer-heading {
  margin: 0 0 0.5rem;
  font-size: 0.85rem;
  color: var(--accent);
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.prayer-body { padding: 0; }
.prayer-line {
  margin: 0 0 0.5rem;
  font-size: 0.95rem;
  line-height: 1.55;
}
.prayer-line:last-child { margin-bottom: 0; }

/* --- mobile --- */
@media (max-width: 640px) {
  main { padding: 1rem 0.5rem 2rem; }

  .banner { padding: 0.5rem 0.75rem; }
  .banner a { font-size: 0.95rem; letter-spacing: 0.12em; }

  .topnav {
    gap: 0.6rem;
    padding: 0.5rem 0.5rem;
    flex-wrap: wrap;
  }
  .topnav a { font-size: 0.8rem; }

  .card { padding: 0.75rem 0.85rem; }
  .card h2 { font-size: 0.9rem; }

  .page-head h1 { font-size: 1.2rem; }

  /* slot rows wrap so the text input is full-width below the toggle */
  li.slot, li.task, li.exercise, li.habit, li.pose {
    flex-wrap: wrap;
    gap: 0.4rem;
  }
  .slot-text, .book-title, .book-author { flex-basis: 100%; }
  .slot-num { width: 1.25rem; }

  /* backlog: stack actions below text */
  li.backlog-item { flex-wrap: wrap; }
  .backlog-meta { flex-direction: row; gap: 0.5rem; min-width: 0; }
  .backlog-text { flex-basis: 100%; }
  .backlog-actions { width: 100%; margin-left: 0; justify-content: flex-end; }

  /* tighter timeline */
  .timeline { grid-template-columns: 3rem 1fr; grid-template-rows: repeat(34, 2rem); }
  .hour-label { font-size: 0.75rem; }
  .tl-cell-select { font-size: 0.8rem; padding: 0.15rem 0.4rem; }

  /* shrink heatmap cell variable on small screens */
  :root { --heat-cell-size: 24px; }
  .heat-name { font-size: 1.2rem; }
  table.combo-grid { font-size: 0.75rem; }

  /* big habit-action button */
  .habit-btn { padding: 0.75rem 1.25rem; }
  .habit-btn-symbol { font-size: 1.6rem; }

  /* footer logs columns stack */
  .logs-cols { grid-template-columns: 1fr; gap: 1rem; }
}