/* ClickHouse vocabulary, adapted to Jakob's Apps Monitor / Operate dashboard.
   LOAD LAST. Change the tokens here, not component colors in layout files.
   Source: popular-web-designs/templates/clickhouse.md; see docs/clickhouse-design.md. */
@font-face {
  font-family: Inter;
  src: url('/assets/fonts/InterVariable.woff2') format('woff2');
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}
:root {
  color-scheme: dark;
  --ch-background: #000;
  --ch-surface: #141414;
  --ch-raised: #222;
  --ch-hover: #3a3a3a;
  --ch-accent: #faff69;
  --ch-accent-hover: #f4f692;
  --ch-accent-subtle: #161600;
  --ch-on-accent: #141414;
  --ch-text: #fff;
  --ch-secondary: #a0a0a0;
  --ch-border: rgba(65, 65, 65, .8);
  --ch-border-strong: #585858;
  --ch-danger: #ffb1aa;
  --ch-warning: #f3c984;
  --ch-radius-control: 4px;
  --ch-radius-panel: 8px;
  --ch-backdrop: #000c;
  --ch-font: Inter, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --ch-detail-scale: 1;
  --ch-gutter: clamp(24px, 2vw, 64px);
  --ch-gap: clamp(24px, 2vw, 48px);
  /* Bridge existing components to one replaceable theme. Names retained for compatibility. */
  --bg: var(--ch-background);
  --surface: var(--ch-surface);
  --raised: var(--ch-raised);
  --hover: var(--ch-hover);
  --ink: var(--ch-text);
  --muted: var(--ch-secondary);
  --dim: var(--ch-secondary);
  --line: var(--ch-border);
  --cyan: var(--ch-accent);
  --cyan-soft: var(--ch-accent-subtle);
  --red: var(--ch-danger);
  --warn: var(--ch-warning);
  --font: var(--ch-font);
  --visual-rule: var(--ch-border);
  --visual-radius: var(--ch-radius-panel);
}
body { background: var(--bg); color: var(--ink); font-family: var(--font); }
:is(button, input, select, textarea) { font-family: var(--font); }
a:hover { color: var(--cyan); }
:is(button, input, select, textarea) { border-radius: var(--ch-radius-control); }
#main-content :is(button, input, select, textarea),
#editor-dialog :is(button, input, select, textarea) { border-radius: var(--ch-radius-control); }
:is(input, select, textarea) { background-color: var(--surface); }
:is(input, textarea)::placeholder { color: var(--muted); }
button:hover:not(:disabled) { border-color: var(--ch-border-strong); }
button.primary, #hermes-chat-send { color: var(--ch-on-accent); background: var(--cyan); border-color: var(--cyan); }
/* Do not copy the template's dark-hover/dark-text contrast defect. */
button.primary:hover:not(:disabled),
#main-content button.primary:hover:not(:disabled),
#editor-dialog button.primary:hover:not(:disabled),
#hermes-chat-send:hover:not(:disabled) {
  background: var(--ch-accent-hover); color: var(--ch-on-accent); border-color: var(--ch-accent-hover);
}
button.primary:active:not(:disabled) { box-shadow: inset 0 2px 6px #0003; }
button.primary:disabled, #main-content button.primary:disabled {
  background: var(--raised); color: var(--dim); border-color: var(--line); cursor: not-allowed;
}
button.outline { border-color: var(--line); color: var(--cyan); }
:is(.panel, dialog, .exercise-art, .rest-panel, .effort-panel, .next-panel) { border-radius: var(--ch-radius-panel); }
:is(dialog, #editor-dialog, #hermes-chat-dialog) { border-color: var(--line); border-radius: var(--ch-radius-panel); }
dialog::backdrop { background: var(--ch-backdrop); }
.mobile-nav { background: var(--surface); }
.mobile-nav button[aria-current=page] { background: var(--cyan-soft); color: var(--cyan); }
:is(.active-dock, .toast, .connection-notice) { background: var(--surface); border-color: var(--line); }
.active-dock { max-width: none; border-radius: var(--ch-radius-panel); }
:is(.current-row, .exercise-item.selected) { background: var(--cyan-soft); }
:is(.saved-check, .pill[aria-pressed=true]) { color: var(--ch-on-accent); }
:is(.set-chip.completed, .effort-buttons button, .draft-label) { border-color: var(--line); }
/* Favorite remains a separate sibling control, never nested inside the selection button. */
.journal-refined .exercise-item { position: relative; display: flex; align-items: center; }
.exercise-favorite {
  position: absolute; top: 4px; right: 4px;
  flex: 0 0 44px; min-width: 44px; min-height: 44px; padding: 8px;
  border-color: transparent; background: transparent; color: var(--muted);
}
.exercise-favorite[aria-pressed=true] { color: var(--cyan); }
.exercise-favorite:hover:not(:disabled) { background: var(--raised); }
.journal-refined .exercise-select { padding-right: 48px; }
/* Planned sets are discrete rows within a compact queue card. */
.train-queue-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.train-queue-card {
  min-width: 0; padding: 12px; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--ch-radius-panel); overflow-wrap: anywhere;
}
.train-queue-card.selected, .train-queue-card[aria-current=true] { border-color: var(--cyan); }
.train-queue-card.complete { border-color: var(--ch-border-strong); }
.train-queue-card h3 { margin-bottom: 8px; }
.train-queue-card .queue-exercise-name { width: 100%; border: 0; padding: 0; background: transparent; color: var(--ink); font: inherit; text-align: left; overflow-wrap: anywhere; }
.train-queue-set > button { width: 100%; display: grid; gap: 4px; padding: 4px 0; border: 0; background: transparent; color: var(--ink); text-align: left; }
.train-queue-set > button[aria-pressed=true] { color: var(--cyan); }
.train-queue-set { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 8px; padding: 8px 0; border-top: 1px solid var(--line); font-variant-numeric: tabular-nums; }
.train-queue-set.completed { color: var(--cyan); }
.train-action-menu { position: relative; }
.train-action-menu > summary { min-height: 44px; padding: 10px 12px; cursor: pointer; border: 1px solid var(--line); border-radius: var(--ch-radius-control); }
.train-action-menu[open] { padding-bottom: 8px; background: var(--surface); border-radius: var(--ch-radius-panel); }
.train-action-menu > :not(summary) { margin: 8px; }
/* Categories contain plain single-column entry links, not another card grid. */
.nutrition-page .nutrition-category-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.nutrition-page .nutrition-category { min-width: 0; padding: 20px; border: 1px solid var(--line); border-radius: var(--ch-radius-panel); background: var(--surface); }
.nutrition-page .nutrition-category h2 { margin-bottom: 12px; }
.nutrition-page .nutrition-log-link {
  display: flex; justify-content: space-between; align-items: center; gap: 16px; width: 100%; min-width: 0; min-height: 44px; padding: 10px 0;
  background: transparent; border: 0; border-bottom: 1px solid var(--line); border-radius: 0;
  color: var(--ink); text-align: left; overflow-wrap: anywhere;
}
.nutrition-page .nutrition-log-link:hover { color: var(--cyan); }
.nutrition-page .nutrition-log-link > span:first-child { min-width: 0; flex: 1; }
.nutrition-page .nutrition-log-link > span:last-child { flex: 0 0 auto; white-space: nowrap; font-variant-numeric: tabular-nums; }
.nutrition-page .nutrition-category h3 { font-size: 20px; margin-bottom: 8px; }
.nutrition-page .nutrition-category .nutrition-empty { padding-block: 10px; }
.nutrition-progress-line { display: flex; align-items: center; gap: 12px; min-width: 0; }
.nutrition-progress-line progress { min-width: 0; flex: 1; }
.nutrition-progress-line .nutrition-progress-percent { flex: 0 0 auto; font-variant-numeric: tabular-nums; }
.nutrition-page .nutrition-calendar-detail-totals .nutrition-calendar-metric { padding: 12px; }
.nutrition-page .nutrition-calendar-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; grid-column: 1 / -1; align-items: start; }
.nutrition-page .nutrition-calendar-layout > :is(.nutrition-calendar, .nutrition-calendar-detail) { grid-column: auto; }
.nutrition-page .nutrition-calendar-food { background: var(--surface); color: var(--ink); }
.nutrition-page .nutrition-calendar-food :is(strong, p) { color: var(--ink); }
.nutrition-page .nutrition-calendar-food > span { color: var(--muted); }
.nutrition-page .nutrition-calendar-compact { flex-wrap: wrap; }
.nutrition-page .nutrition-calendar-compact strong { white-space: normal; overflow-wrap: anywhere; }
.nutrition-progress {
  appearance: none; display: block; width: 100%; height: 6px; overflow: hidden;
  border: 0; border-radius: var(--ch-radius-control); background: var(--raised); color: var(--cyan); accent-color: var(--cyan);
}
.nutrition-progress::-webkit-progress-bar { background: var(--raised); border-radius: var(--ch-radius-control); }
.nutrition-progress::-webkit-progress-value { background: var(--cyan); border-radius: var(--ch-radius-control); }
.nutrition-progress::-moz-progress-bar { background: var(--cyan); border-radius: var(--ch-radius-control); }
/* Independent timed activity uses real numeric output, not display-headline branding. */
.activity-timer { padding: 20px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--ch-radius-panel); }
.activity-clock, .activity-timer > output { display: block; font-size: 36px; font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: -.025em; line-height: 1.25; }
.activity-actions, .activity-timer > div { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 16px; }
.chart-tooltip { background: var(--surface); border-color: var(--cyan); }
.muscle-count progress { background: var(--raised); }
.muscle-count progress::-webkit-progress-bar { background: var(--raised); }
.muscle-count progress::-webkit-progress-value { background: var(--cyan); }
.muscle-count progress::-moz-progress-bar { background: var(--cyan); }
@media (min-width: 1024px) {
  .nutrition-page .nutrition-calendar-layout { grid-template-columns: minmax(0, 1fr) minmax(240px, .32fr); }
  .nutrition-page .nutrition-calendar-layout:not(:has(.nutrition-calendar-detail)) { grid-template-columns: minmax(0, 1fr); }
  .nutrition-calendar-layout .nutrition-calendar-detail { position: sticky; top: 24px; }
}
@media (min-width: 1024px) {
  :root { --ch-detail-scale: 1.5; }
  body { font-size: calc(15px * var(--ch-detail-scale)); }
  #main-content, .site-header { max-width: none; width: 100%; padding-inline: var(--ch-gutter); }
  .site-header { height: auto; min-height: 88px; gap: 16px 24px; padding-block: 12px; }
  .site-header .app-switch button, .site-header .desktop-nav button { min-height: 44px; border-radius: var(--ch-radius-control); }
  .journal-grid.journal-refined { grid-template-columns: minmax(320px, clamp(340px, 23vw, 480px)) minmax(0, 1fr); gap: var(--ch-gap); }
  .journal-refined .journal-main { padding: clamp(24px, 2vw, 40px); }
  .journal-refined .library-panel > select { width: 100%; }
  .journal-refined .exercise-select { grid-template-columns: 80px minmax(0, 1fr); }
  .journal-refined .exercise-art { width: 80px; height: 80px; }
  .direction-page, .journal-review .review-layout, #main-content .start-layout { gap: var(--ch-gap); }
  .direction-page .muscle-overview { grid-template-columns: minmax(120px, .6fr) minmax(0, 1fr) minmax(120px, .6fr); }
  .plan-refinement .plan-layout { grid-template-columns: minmax(260px, .22fr) minmax(0, 1fr); gap: var(--ch-gap); }
  #main-content .train-grid { grid-template-columns: minmax(260px, .25fr) minmax(0, 1fr) minmax(300px, .3fr); gap: var(--ch-gap); }
  .train-grid .train-main { max-width: none; }
  .nutrition-page .nutrition-grid { gap: var(--ch-gap); }
  .nutrition-page .nutrition-category-grid { gap: var(--ch-gap); }
  .nutrition-page .nutrition-category-grid { gap: 24px; }
  .nutrition-page .nutrition-calendar-day { min-height: 104px; }
  .nutrition-page .nutrition-calendar-kcal { color: var(--ink); font-size: 18px; font-weight: 500; }
  .journal-refined .library-panel > select { font-size: calc(13px * var(--ch-detail-scale)); }
  .journal-refined .chart-toolbar .segmented button { font-size: calc(12px * var(--ch-detail-scale)); }
  .history-heading h3 { font-size: 20px; }
  .nutrition-page .nutrition-empty { font-size: calc(12px * var(--ch-detail-scale)); }
  .nutrition-page .nutrition-log-link { font-size: calc(12px * var(--ch-detail-scale)); }
  .train-queue-cards { gap: 16px; }
  .train-queue-card { padding: 16px; }
  .activity-clock, .activity-timer > output { font-size: 48px; }
  /* Existing small-text roles not defined in visual-system.css. No global zoom/root rem scaling. */
  :is(.set-index, .set-chip small, .weekday) { font-size: calc(10px * var(--ch-detail-scale)); }
  :is(.exercise-select small, .chart-note, .calendar-note, .queue-item small, .effort-blank small, .save-caption, .source-provenance, .plan-item small, .rest-heading, .effort-footer) { font-size: calc(11px * var(--ch-detail-scale)); }
  :is(small, .tiny, button.small, .data-table, .data-table .row-link, .recent-top, .recent-session p, .setup-detail, .queue-item strong, .queue-heading p, .set-label, .log-help, .set-chip, .form-note, .template-choice p, .rule-panel > p, .settings-section p, .hermes-chat-meta, .nutrition-target, .nutrition-log-time, .nutrition-keep) { font-size: calc(12px * var(--ch-detail-scale)); }
  :is(label, .library-panel input, .library-filters select, .chart-toolbar select, .recent-session strong, .setup-memory p, .date-cell, .target-line, .effort-blank strong, .unanswered, .plan-top p, .prescription-row input, .dialog-body > p, .dialog-error, .picker-list button, .nutrition-log-foods, .nutrition-log-details, .nutrition-calendar-food > span) { font-size: calc(13px * var(--ch-detail-scale)); }
  :is(.template-choice strong, .plan-item, .notes-block, .saved-strip, .nutrition-log-energy, .nutrition-calendar-food p) { font-size: calc(14px * var(--ch-detail-scale)); }
  .chart text { font-size: calc(11px * var(--ch-detail-scale)); }
}
@media (min-width: 1024px) and (max-width: 1450px) {
  .site-header { flex-wrap: wrap; }
  .site-header .desktop-nav { order: 4; flex-basis: 100%; }
  #main-content .train-grid { grid-template-columns: minmax(260px, .35fr) minmax(0, 1fr); }
  .direction-page .muscle-overview { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .direction-page .muscle-diagram { grid-column: 1 / -1; grid-row: 1; }
}
@media (max-width: 1023px) {
  #main-content .train-grid { display: flex; flex-direction: column; gap: 20px; }
  .train-grid .train-main { order: 1; width: 100%; min-width: 0; }
  .train-grid .train-queue { display: block; order: 2; position: static; width: 100%; min-width: 0; }
  .train-queue { display: block; }
}
@media (max-width: 760px) {
  /* Layout-only additions; inherited mobile typography remains unchanged. */
  .nutrition-page .nutrition-calendar-layout { display: block; }
  .nutrition-page .nutrition-category { padding: 16px; }
  .train-queue-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
}
@media (max-width: 480px) {
  .nutrition-page .nutrition-category-grid { grid-template-columns: minmax(0, 1fr); gap: 16px; }
}