:root {
  --bg: #0d1117;
  --panel: #161b22;
  --panel-2: #1c232c;
  --line: #30363d;
  --text: #e6edf3;
  --muted: #8b949e;
  --accent: #2f81f7;

  /* Row intensity ramp — water blues, 1 Easy → 5 All out */
  --lvl0: #21262d;
  --row1: #cfe3f7;
  --row2: #9dc4ea;
  --row3: #5f9bd8;
  --row4: #2f6fbd;
  --row5: #123a6b;

  /* Workout intensity ramp — warm ambers */
  --wk1: #ffe8c7;
  --wk2: #ffcb85;
  --wk3: #f5a742;
  --wk4: #d97d1a;
  --wk5: #93500a;
  --lvl1: var(--row1);
  --lvl2: var(--row2);
  --lvl3: var(--row3);
  --lvl4: var(--row4);
  --lvl5: var(--row5);

  --cell: 12px;
  --gap: 3px;
  --radius: 10px;
}

@media (prefers-color-scheme: light) {
  :root {
    --bg: #ffffff;
    --panel: #f6f8fa;
    --panel-2: #ffffff;
    --line: #d0d7de;
    --text: #1f2328;
    --muted: #656d76;
    --lvl0: #ebedf0;
    --row1: #cfe3f7;
    --row2: #9dc4ea;
    --row3: #5f9bd8;
    --row4: #2f6fbd;
    --row5: #123a6b;
    --wk1: #ffe8c7;
    --wk2: #ffcb85;
    --wk3: #f5a742;
    --wk4: #d97d1a;
    --wk5: #93500a;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 16px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  -webkit-text-size-adjust: 100%;
  padding-bottom: 3rem;
}

header {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem .9rem;
  align-items: baseline;
  justify-content: space-between;
  padding: 1rem 1rem .7rem;
  border-bottom: 1px solid var(--line);
}

.logo { font-size: 1.25rem; font-weight: 700; }
.header-meta { color: var(--muted); font-size: .85rem; }

nav {
  display: flex;
  gap: .35rem;
  overflow-x: auto;
  padding: .6rem 1rem;
  border-bottom: 1px solid var(--line);
  background: var(--panel);
  position: sticky;
  top: 0;
  z-index: 5;
}

.tab {
  flex: 0 0 auto;
  background: transparent;
  color: var(--muted);
  border: 1px solid transparent;
  border-radius: 999px;
  padding: .4rem .8rem;
  font-size: .9rem;
  cursor: pointer;
}
.tab.active { color: var(--text); background: var(--panel-2); border-color: var(--line); }

main { padding: 1rem; max-width: 1100px; margin: 0 auto; }
.view { display: none; }
.view.active { display: block; }

h2 { font-size: 1.05rem; margin: 1.6rem 0 .6rem; }
h3 { font-size: .95rem; margin: 0 0 .5rem; }

.hint { color: var(--muted); font-size: .85rem; margin: .2rem 0 .9rem; }
.note { font-size: .85rem; color: var(--muted); min-height: 1.2em; }
.note[data-result="ok"], .note[data-result="saved"] { color: #3fb950; }
.note[data-result="not-configured"], .note[data-result="error"] { color: #d29922; }

.controls {
  display: flex;
  align-items: center;
  gap: .6rem;
  flex-wrap: wrap;
  margin-bottom: .8rem;
}
.controls label { color: var(--muted); font-size: .85rem; }
select, input, textarea {
  background: var(--panel-2);
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: .5rem .6rem;
  font: inherit;
  font-size: .95rem;
}
textarea { width: 100%; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .8rem; }

.segmented { display: inline-flex; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; }
.segmented button {
  background: transparent; color: var(--muted); border: 0; padding: .4rem .8rem; font-size: .85rem; cursor: pointer;
}
.segmented button.active { background: var(--accent); color: #fff; }

/* ---- heatmap ---- */
.heatmap-wrap { padding: .3rem 0 .2rem; }
.heatmap-scroll { overflow-x: auto; padding-bottom: .4rem; }
.heatmap { min-width: max-content; }

.months {
  display: grid;
  grid-template-columns: repeat(var(--weeks), var(--cell));
  gap: var(--gap);
  margin-left: calc(28px + var(--gap));
  margin-bottom: 4px;
  font-size: .68rem;
  color: var(--muted);
  white-space: nowrap;
}

.heatmap-body { display: flex; gap: var(--gap); }

.weekdays {
  display: grid;
  grid-template-rows: repeat(7, var(--cell));
  gap: var(--gap);
  width: 28px;
  font-size: .62rem;
  color: var(--muted);
  text-align: right;
  padding-right: 4px;
}
.weekdays span { line-height: var(--cell); }

.cells {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: var(--cell);
  grid-template-rows: repeat(7, var(--cell));
  gap: var(--gap);
}

.cell {
  width: var(--cell);
  height: var(--cell);
  border-radius: 3px;
  border: 1px solid rgba(240, 246, 252, .06);
  background: var(--lvl0);
  padding: 0;
  cursor: pointer;
  transition: transform .06s ease-out, outline-color .1s;
}
/* Intensity shading — rows are blues, workouts are ambers.
   A day with both is split diagonally (row top-left, workout bottom-right). */
/* --- period navigation (week / month are steppable) ---------------------- */
.period-nav {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin: -4px 0 12px;
}
.period-nav button { min-height: 40px; }
.period-nav button:disabled { opacity: .4; cursor: default; }
.period-label { font-weight: 700; color: var(--muted); text-align: center; flex: 1; }

/* --- week strip: the most-used view gets big, thumb-sized days ----------- */
.heatmap.week-strip {
  display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px;
  width: 100%; min-width: 0; padding: 4px 0 8px;
}
.week-strip .daycell {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px; width: auto; height: auto; min-width: 0; min-height: 84px; border-radius: 12px;
  border: 1px solid var(--line); background: var(--panel-2); color: var(--text);
  font: inherit; cursor: pointer; padding: 6px 2px;
}
.week-strip .daycell .dow { font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; opacity: .85; }
.week-strip .daycell .dnum { font-size: 1.35rem; font-weight: 800; line-height: 1; }
.week-strip .daycell .dbadge { font-size: .78rem; font-weight: 700; opacity: .95; }
.week-strip .daycell.lvl-0 { background: var(--lvl0); }
.week-strip .daycell.kind-workout.lvl-1 { background: var(--wk1); color: #0d1117; }
.week-strip .daycell.kind-workout.lvl-2 { background: var(--wk2); color: #0d1117; }
.week-strip .daycell.kind-workout.lvl-3 { background: var(--wk3); color: #0d1117; }
.week-strip .daycell.kind-workout.lvl-4 { background: var(--wk4); }
.week-strip .daycell.kind-workout.lvl-5 { background: var(--wk5); }
.week-strip .daycell.lvl-1 { background: var(--row1); color: #0d1117; }
.week-strip .daycell.lvl-2 { background: var(--row2); color: #0d1117; }
.week-strip .daycell.lvl-3 { background: var(--row3); color: #0d1117; }
.week-strip .daycell.lvl-4 { background: var(--row4); }
.week-strip .daycell.lvl-5 { background: var(--row5); }
.week-strip .daycell.mixed {
  background: linear-gradient(135deg, var(--rowc, var(--row3)) 0 49%, var(--wkc, var(--wk3)) 51% 100%);
}
.week-strip .daycell.today { outline: 2px solid var(--accent); outline-offset: 1px; }
.week-strip .daycell.future { opacity: .4; }
.week-strip .daycell.selected { outline: 3px solid var(--accent); outline-offset: 1px; }
@media (max-width: 420px) {
  .week-strip { gap: 4px; }
  .week-strip .daycell { min-height: 76px; }
  .week-strip .daycell .dnum { font-size: 1.2rem; }
}

/* --- month calendar: same tiles, laid out a week per row ------------------ */
.heatmap.month-grid {
  display: block; width: 100%; max-width: 560px; margin: 0 auto; min-width: 0;
}
.month-head {
  display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px;
  margin-bottom: 4px;
}
.month-head span {
  text-align: center; font-size: .68rem; text-transform: uppercase; letter-spacing: .04em;
  color: var(--muted); font-weight: 600;
}
.month-head span.weekend { opacity: .6; }
.month-days {
  display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px;
}
.month-days .daypad { visibility: hidden; }
.month-days .daycell {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  width: auto; height: auto; min-width: 0; min-height: 52px; border-radius: 9px;
  border: 1px solid var(--line); background: var(--panel-2); color: var(--text);
  font: inherit; cursor: pointer; padding: 4px 1px;
}
.month-days .daycell .dnum { font-size: .95rem; font-weight: 700; line-height: 1; }
.month-days .daycell .dbadge { font-size: .6rem; font-weight: 700; opacity: .95; }
.month-days .daycell.lvl-0 { background: var(--lvl0); }
.month-days .daycell.kind-workout.lvl-1 { background: var(--wk1); color: #0d1117; }
.month-days .daycell.kind-workout.lvl-2 { background: var(--wk2); color: #0d1117; }
.month-days .daycell.kind-workout.lvl-3 { background: var(--wk3); color: #0d1117; }
.month-days .daycell.kind-workout.lvl-4 { background: var(--wk4); }
.month-days .daycell.kind-workout.lvl-5 { background: var(--wk5); }
.month-days .daycell.lvl-1 { background: var(--row1); color: #0d1117; }
.month-days .daycell.lvl-2 { background: var(--row2); color: #0d1117; }
.month-days .daycell.lvl-3 { background: var(--row3); color: #0d1117; }
.month-days .daycell.lvl-4 { background: var(--row4); }
.month-days .daycell.lvl-5 { background: var(--row5); }
.month-days .daycell.mixed {
  background: linear-gradient(135deg, var(--rowc, var(--row3)) 0 49%, var(--wkc, var(--wk3)) 51% 100%);
}
.month-days .daycell.today { outline: 2px solid var(--accent); outline-offset: 1px; }
.month-days .daycell.selected { outline: 3px solid var(--accent); outline-offset: 1px; }
.month-note { text-align: center; color: var(--muted); font-size: .72rem; margin-top: 6px; }
@media (max-width: 420px) {
  .month-days .daycell { min-height: 46px; }
  .month-days .daycell .dnum { font-size: .88rem; }
  .month-days .daycell .dbadge { font-size: .56rem; }
}

/* --- restore banner ------------------------------------------------------ */
.restore-banner {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  background: var(--panel-2); border: 1px solid var(--accent);
  border-radius: var(--radius); padding: 12px 14px; margin-bottom: 14px;
}
.restore-banner[hidden] { display: none; }   /* a display rule would otherwise beat [hidden] */
.restore-banner button { padding: 8px 14px; }

/* --- one-tap logger ------------------------------------------------------ */
.quicklog {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 14px; margin-bottom: 14px;
}
.quicklog-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.quicklog-head input[type="date"] {
  background: var(--panel-2); color: var(--text); border: 1px solid var(--line);
  border-radius: 8px; padding: 6px 8px; font: inherit;
}
.quicklog-row { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.quicklog-label { width: 92px; font-weight: 600; color: var(--muted); font-size: .9rem; }
.quicklog-btns { display: flex; gap: 6px; flex: 1; }
.quicklog-btns button {
  flex: 1; min-width: 46px; min-height: 48px; border: 1px solid var(--line); border-radius: 10px;
  background: var(--panel-2); color: var(--text); font: inherit; font-weight: 700; font-size: 1.05rem;
  cursor: pointer; transition: transform .06s ease-out;
}
.quicklog-btns button:hover { outline: 2px solid var(--accent); outline-offset: 1px; }
.quicklog-btns button:active { transform: scale(.96); }
.quicklog-btns button.saved { border-color: var(--accent); }
#quick-row button:nth-child(1) { background: var(--row1); color: #0d1117; }
#quick-row button:nth-child(2) { background: var(--row2); color: #0d1117; }
#quick-row button:nth-child(3) { background: var(--row3); color: #0d1117; }
#quick-row button:nth-child(4) { background: var(--row4); }
#quick-row button:nth-child(5) { background: var(--row5); }
#quick-workout button:nth-child(1) { background: var(--wk1); color: #0d1117; }
#quick-workout button:nth-child(2) { background: var(--wk2); color: #0d1117; }
#quick-workout button:nth-child(3) { background: var(--wk3); color: #0d1117; }
#quick-workout button:nth-child(4) { background: var(--wk4); }
#quick-workout button:nth-child(5) { background: var(--wk5); }
.quicklog-note { color: var(--muted); font-size: .82rem; margin: 4px 0 0; }
.legend-note { color: var(--muted); font-size: .8rem; width: 100%; }
.legend-row { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; width: 100%; margin-bottom: 4px; }
.legend-title { font-weight: 600; min-width: 96px; }

.cell.lvl-1 { background: var(--row1); }
.cell.lvl-2 { background: var(--row2); }
.cell.lvl-3 { background: var(--row3); }
.cell.lvl-4 { background: var(--row4); }
.cell.lvl-5 { background: var(--row5); }
.cell.kind-workout.lvl-1 { background: var(--wk1); }
.cell.kind-workout.lvl-2 { background: var(--wk2); }
.cell.kind-workout.lvl-3 { background: var(--wk3); }
.cell.kind-workout.lvl-4 { background: var(--wk4); }
.cell.kind-workout.lvl-5 { background: var(--wk5); }
.cell.mixed[style*="--row-level: 1"] { --rowc: var(--row1); }
.cell.mixed[style*="--row-level: 2"] { --rowc: var(--row2); }
.cell.mixed[style*="--row-level: 3"] { --rowc: var(--row3); }
.cell.mixed[style*="--row-level: 4"] { --rowc: var(--row4); }
.cell.mixed[style*="--row-level: 5"] { --rowc: var(--row5); }
.cell.mixed[style*="--workout-level: 1"] { --wkc: var(--wk1); }
.cell.mixed[style*="--workout-level: 2"] { --wkc: var(--wk2); }
.cell.mixed[style*="--workout-level: 3"] { --wkc: var(--wk3); }
.cell.mixed[style*="--workout-level: 4"] { --wkc: var(--wk4); }
.cell.mixed[style*="--workout-level: 5"] { --wkc: var(--wk5); }
.cell.mixed {
  background: linear-gradient(135deg, var(--rowc, var(--row3)) 0 49%, var(--wkc, var(--wk3)) 51% 100%);
}
.cell.future { opacity: .35; }
.cell.out-of-range { visibility: hidden; }
.cell:hover { outline: 2px solid var(--accent); outline-offset: 1px; }
.cell.selected { outline: 2px solid #f0883e; outline-offset: 1px; }

.legend { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; font-size: .75rem; color: var(--muted); }
.legend-item { display: inline-flex; align-items: center; gap: .3rem; }
.legend-swatch { cursor: default; display: inline-block; }
.legend-note { margin-left: auto; font-style: italic; }

/* ---- stats ---- */
.stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .6rem; }
.stat {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: .7rem .8rem;
  display: flex;
  flex-direction: column;
  gap: .1rem;
}
.stat-label { font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.stat-value { font-size: 1.25rem; font-weight: 700; }
.stat-sub { font-size: .72rem; color: var(--muted); }

/* ---- panels / lists ---- */
.panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: .9rem;
}
.session-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .5rem; }
.session-list li {
  display: flex; align-items: center; justify-content: space-between; gap: .8rem;
  background: var(--panel-2); border: 1px solid var(--line); border-radius: 8px; padding: .55rem .7rem;
}
.session-main { display: flex; flex-direction: column; }
.session-meta { color: var(--muted); font-size: .78rem; }

.badge {
  display: inline-block; font-size: .75rem; padding: .2rem .5rem; border-radius: 999px;
  border: 1px solid var(--line); margin-bottom: .4rem;
}
.badge.ok { color: #3fb950; border-color: #3fb950; }
.badge.warn { color: #d29922; border-color: #d29922; }

.auth-url {
  display: block; margin-top: .5rem; padding: .4rem .5rem; font-size: .7rem;
  background: var(--panel-2); border: 1px solid var(--line); border-radius: 6px;
  color: var(--muted); word-break: break-all;
}

/* ---- form ---- */
form { display: flex; flex-direction: column; gap: .7rem; max-width: 460px; }
form label { display: flex; flex-direction: column; gap: .25rem; font-size: .85rem; color: var(--muted); }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; max-width: 620px; margin-bottom: .7rem; }
.grid2 label { display: flex; flex-direction: column; gap: .25rem; font-size: .85rem; color: var(--muted); }
#view-c2 > label { display: flex; flex-direction: column; gap: .25rem; font-size: .85rem; color: var(--muted); max-width: 620px; margin-bottom: .7rem; }

.row { display: flex; flex-wrap: wrap; gap: .5rem; margin: .3rem 0; }

.btn {
  background: var(--panel-2);
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: .55rem .9rem;
  font: inherit;
  font-size: .9rem;
  cursor: pointer;
}
.btn:hover { border-color: var(--accent); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; }
.btn.ghost { background: transparent; }
.btn.danger { color: #f85149; border-color: #f85149; background: transparent; }
.btn.small { padding: .35rem .6rem; font-size: .8rem; }

footer { color: var(--muted); font-size: .75rem; text-align: center; padding: 1.5rem 1rem 0; }
code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .85em; }

@media (max-width: 620px) {
  :root { --cell: 11px; }
  .grid2 { grid-template-columns: 1fr; }
  main { padding: .8rem; }
}