* { box-sizing: border-box; }
body { font-family: system-ui, -apple-system, sans-serif; margin: 0; padding: 1rem; background: #f5f5f5; color: #222; }
h1 { font-size: 1.4rem; margin: 0 0 0.25rem; }
h2 { font-size: 1.1rem; margin: 1rem 0 0.5rem; }
p.msg { margin: 0.25rem 0; }
p.err { margin: 0.25rem 0; color: #c0392b; }

#main-nav { display: flex; flex-wrap: wrap; gap: 0.25rem; align-items: center; margin: -1rem -1rem 1rem; padding: 0.5rem 1rem; background: #fff; border-bottom: 1px solid #ddd; }
#main-nav a { display: inline-block; padding: 0.4rem 0.75rem; border-radius: 0.25rem; color: #333; text-decoration: none; font-size: 0.95rem; }
#main-nav a:hover { background: #f0f0f0; }
#main-nav a.active { background: #e2e3e5; font-weight: 600; color: #000; }

.badge { display: inline-block; padding: 0.1rem 0.45rem; border-radius: 0.25rem; font-size: 0.8rem; font-weight: 600; margin-right: 0.25rem; }
.badge-success { background: #d4edda; color: #155724; }
.badge-fail { background: #f8d7da; color: #721c24; }
.badge-llm { background: #d1ecf1; color: #0c5460; }
.badge-validator { background: #fff3cd; color: #856404; }
.badge-write { background: #e2e3e5; color: #383d41; }
.badge-notify { background: #cce5ff; color: #004085; }
.badge-warn { background: #fff3cd; color: #856404; }
.badge-error { background: #f8d7da; color: #721c24; }
.badge-step { background: #e2e3e5; color: #383d41; }
.badge-default { background: #e2e3e5; color: #383d41; }

ol { list-style: none; padding: 0; margin: 0; }
.event { background: #fff; border: 1px solid #ddd; border-radius: 0.25rem; padding: 0.5rem 0.75rem; margin-bottom: 0.5rem; }
.event .seq { font-size: 0.75rem; color: #888; margin-left: 0.25rem; }
.event .summary { margin: 0.25rem 0 0; font-size: 0.9rem; }
.event details { margin-top: 0.25rem; }
.event summary { cursor: pointer; font-size: 0.8rem; color: #555; }
.event pre { background: #f8f8f8; padding: 0.5rem; overflow-x: auto; font-size: 0.8rem; border: 1px solid #eee; border-radius: 0.2rem; }

table { border-collapse: collapse; width: 100%; background: #fff; }
th, td { text-align: left; padding: 0.4rem 0.6rem; border-bottom: 1px solid #eee; font-size: 0.9rem; }
th { background: #f0f0f0; }

.runs-toolbar { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; align-items: end; margin: 0.5rem 0 0.75rem; }
.runs-toolbar label { display: inline-flex; flex-direction: column; gap: 0.25rem; font-size: 0.85rem; color: #555; }
.runs-toolbar select, .runs-toolbar input[type="date"] { padding: 0.35rem 0.5rem; border: 1px solid #ccc; border-radius: 0.25rem; background: #fff; font-size: 0.9rem; }
.runs-toolbar button { padding: 0.4rem 0.75rem; border: 1px solid #bbb; border-radius: 0.25rem; background: #fff; cursor: pointer; }
.runs-toolbar button:hover { background: #f0f0f0; }
#runs-count { margin-left: auto; font-size: 0.85rem; color: #666; }

.runs-table td, .runs-table th { white-space: nowrap; }
.runs-table td.msg-cell, .runs-table td.err-cell { max-width: 26rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.runs-table td.msg-cell { color: #555; }
.runs-table td.err-cell { color: #c0392b; }
.run-link { color: #0b5ed7; text-decoration: none; font-weight: 600; }
.run-link:hover { text-decoration: underline; }

.runs-pager { margin: 0.75rem 0; }
.runs-pager button { padding: 0.4rem 1rem; border: 1px solid #bbb; border-radius: 0.25rem; background: #fff; cursor: pointer; }
.runs-pager button:hover { background: #f0f0f0; }

.events-toolbar { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; align-items: center; margin: 0.5rem 0 0.75rem; }
.events-toggle { display: inline-flex; border: 1px solid #bbb; border-radius: 0.25rem; overflow: hidden; }
.toggle-btn { padding: 0.4rem 0.9rem; border: none; background: #fff; cursor: pointer; font-size: 0.9rem; }
.toggle-btn + .toggle-btn { border-left: 1px solid #bbb; }
.toggle-btn.active { background: #e2e3e5; font-weight: 600; }
.events-toolbar label { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.85rem; color: #555; }
.events-toolbar select { padding: 0.35rem 0.5rem; border: 1px solid #ccc; border-radius: 0.25rem; background: #fff; font-size: 0.9rem; }
#events-count { margin-left: auto; font-size: 0.85rem; color: #666; }

.events-table td, .events-table th { white-space: nowrap; }
.events-table td.summary-cell { max-width: 26rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.events-table .event-details { margin: 0; }
.events-table .event-details summary { cursor: pointer; font-size: 0.8rem; color: #555; }
.events-table .event-details pre { background: #f8f8f8; padding: 0.5rem; overflow-x: auto; font-size: 0.8rem; border: 1px solid #eee; border-radius: 0.2rem; max-height: 14rem; }

.badge-disabled { background: #f0f0f0; color: #767676; }
.badge-on-demand { background: #e2e3e5; color: #383d41; }
.dim { color: #999; }
.rel { margin-left: 0.5rem; font-size: 0.8rem; color: #666; }
.upcoming-table td, .upcoming-table th { white-space: nowrap; }
.upcoming-table td.note-cell { max-width: 26rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #555; }

.copy-btn { padding: 0.2rem 0.6rem; border: 1px solid #bbb; border-radius: 0.25rem; background: #fff; cursor: pointer; font-size: 0.8rem; margin: 0.25rem 0; }
.copy-btn:hover { background: #f0f0f0; }
.copy-btn:disabled { opacity: 0.6; cursor: default; }
.json-actions { display: flex; align-items: center; gap: 0.5rem; margin: 0.25rem 0 0.5rem; }

.job-link { color: #0b5ed7; text-decoration: none; font-weight: 600; }
.job-link:hover { text-decoration: underline; }
.job-meta { margin: 0.25rem 0 0.75rem; font-size: 0.9rem; color: #555; }
.job-meta code { background: #eee; padding: 0.05rem 0.3rem; border-radius: 0.2rem; font-size: 0.85rem; }

.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: 0.75rem; margin: 0.75rem 0 1rem; }
.stat-card { background: #fff; border: 1px solid #ddd; border-radius: 0.25rem; padding: 0.6rem 0.75rem; }
.stat-label { font-size: 0.75rem; color: #777; text-transform: uppercase; letter-spacing: 0.03em; }
.stat-value { font-size: 1.2rem; font-weight: 600; margin-top: 0.25rem; line-height: 1.5; }
.stat-value .dim { font-size: 0.85rem; font-weight: normal; }

.task-card { background: #fff; border: 1px solid #ddd; border-radius: 0.25rem; padding: 0.75rem; margin-bottom: 0.5rem; }
.task-card.gone { opacity: 0; max-height: 0; overflow: hidden; transition: 0.3s; border: none; padding-top: 0; padding-bottom: 0; }
.task-head { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.priority-badge { display: inline-block; padding: 0.1rem 0.45rem; border-radius: 0.25rem; font-size: 0.75rem; font-weight: 600; }
.priority-badge.p1 { background: #fee2e2; color: #dc2626; }
.priority-badge.p2 { background: #fef3c7; color: #d97706; }
.priority-badge.p3 { background: #dbeafe; color: #2563eb; }
.priority-badge.p4 { background: #fef9c3; color: #a16207; }
.priority-badge.p5 { background: #dcfce7; color: #16a34a; }
.deadline-overdue { color: #dc2626; font-weight: 600; }
.deadline-today { color: #d97706; font-weight: 600; }
.deadline-tomorrow { color: #a16207; font-weight: 600; }
.deadline-date { color: #888; }
.auto-badge { display: inline-block; background: #e0e7ff; color: #4338ca; font-size: 0.7rem; padding: 0.05rem 0.35rem; border-radius: 0.75rem; }
.task-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.5rem; }
.task-actions button { flex: 1; padding: 0.5rem; border: none; border-radius: 0.25rem; font-weight: 600; cursor: pointer; color: #fff; }
.btn-done { background: #22c55e; }
.btn-snooze { background: #f59e0b; }
.btn-cancel { background: #ef4444; }
 .btn-compose { background: #3b82f6; }
.btn-compose:disabled { opacity: 0.6; cursor: default; }
.btn-schedule { background: #8b5cf6; }
.btn-schedule:disabled { opacity: 0.6; cursor: default; }
.action-modal { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.5); z-index: 100; display: flex; align-items: center; justify-content: center; padding: 1rem; }
.action-modal .content { background: #fff; max-width: 30rem; width: 100%; padding: 1rem; border-radius: 0.5rem; }
.action-modal .content h2 { margin: 0 0 0.75rem; font-size: 1.1rem; }
.action-modal input, .action-modal textarea, .action-modal select { width: 100%; padding: 0.4rem; border: 1px solid #ccc; border-radius: 0.25rem; margin-bottom: 0.5rem; font: inherit; background: #fff; }
.action-modal textarea { min-height: 4rem; resize: vertical; }
.action-modal label { display: block; font-size: 0.85rem; color: #555; margin-bottom: 0.2rem; }
.action-modal .compose-error, .action-modal .schedule-error { margin: 0; min-height: 1em; }
.action-modal .actions { display: flex; gap: 0.5rem; justify-content: flex-end; }
.action-modal .actions button { flex: none; padding: 0.5rem 1rem; border: none; border-radius: 0.25rem; font-weight: 600; cursor: pointer; color: #fff; }
.action-modal .actions .btn-cancel { background: #ef4444; }
.action-modal .actions .btn-compose { background: #3b82f6; }
.action-modal .actions .btn-schedule { background: #8b5cf6; }
.toast { position: fixed; bottom: 1rem; left: 50%; transform: translateX(-50%); background: #22c55e; color: #fff; padding: 0.5rem 1rem; border-radius: 0.25rem; z-index: 200; transition: opacity 0.3s; }
.toast.gone { opacity: 0; }
.task-form { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1rem; align-items: end; }
.task-form input, .task-form select, .task-form textarea { flex: 1; min-width: 8rem; padding: 0.4rem; border: 1px solid #ccc; border-radius: 0.25rem; }
.task-form textarea { min-height: 2.5rem; }
.task-form button { padding: 0.4rem 0.9rem; border: none; border-radius: 0.25rem; background: #2563eb; color: #fff; font-weight: 600; cursor: pointer; }
.tasks-toolbar { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; align-items: end; margin: 0.5rem 0; }
.today-summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.75rem; margin-bottom: 1rem; }
.today-summary .stat-card { cursor: pointer; transition: border-color 0.15s; }
.today-summary .stat-card:hover { border-color: #999; }
.today-summary .stat-card:focus-visible { outline: 2px solid #2563eb; outline-offset: 1px; }
.today-summary .stat-card .top-tasks { font-size: 0.8rem; color: #666; margin-top: 0.25rem; line-height: 1.4; }
.today-summary .stat-card.all-clear { cursor: default; }
@media (max-width: 600px) {
  .today-summary { grid-template-columns: 1fr; }
  .task-form { flex-direction: column; align-items: stretch; }
  .task-actions { flex-direction: column; }
}

/* Workout page (#198) */
.badge-today { background: #dbeafe; color: #1e40af; }
.focus-strength { background: #f8d7da; color: #721c24; }
.focus-cardio { background: #ffe5e5; color: #b42318; }
.focus-mobility { background: #d1ecf1; color: #0c5460; }
.focus-rest { background: #e2e3e5; color: #383d41; }
.focus-mixed { background: #e0e7ff; color: #4338ca; }
.focus-unknown { background: #fff3cd; color: #856404; }
.intensity-low { background: #d4edda; color: #155724; }
.intensity-moderate { background: #fff3cd; color: #856404; }
.intensity-high { background: #f8d7da; color: #721c24; }
.intensity-unknown { background: #fff3cd; color: #856404; }
.workout-today { background: #fff; border: 2px solid #2563eb; border-radius: 0.4rem; padding: 1rem 1.25rem; margin: 0.5rem 0 1rem; }
.workout-today-head { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; margin-bottom: 0.5rem; }
.workout-today .workout-desc { font-size: 1.15rem; font-weight: 500; margin: 0 0 0.25rem; line-height: 1.5; }
.workout-today .workout-protein { margin: 0.25rem 0 0; font-size: 0.9rem; color: #555; }
.workout-today-none { border: 1px dashed #ccc; background: #fafafa; }
.workout-today-none p { margin: 0; }
.workout-week { list-style: none; margin: 0; padding: 0; }
.workout-week-item { background: #fff; border: 1px solid #e2e3e5; border-radius: 0.25rem; padding: 0.5rem 0.75rem; margin-bottom: 0.4rem; display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; }
.workout-day { font-weight: 600; min-width: 3.2rem; text-transform: capitalize; }
.workout-week-item .workout-desc { font-size: 0.9rem; color: #444; flex-basis: 100%; margin-top: 0.15rem; }
.workout-today-row { border: 2px solid #2563eb; background: #eff6ff; }
@media (max-width: 600px) {
  .workout-today { padding: 0.85rem 1rem; }
  .workout-today .workout-desc { font-size: 1.05rem; }
  .workout-week-item .workout-desc { flex-basis: auto; }
}