/* calicocat - white ground, colorful patches side by side, dark mode darkens the patches.
   arial, 2px corners, no borders. everything localStorage. */

:root {
  --bg: #FFFFFF;
  --ink: #1F1A16;
  --muted: #6E655D;
  --soft: #F0F1F1;
  --hair: #ECEDED;
  --accent: #12948A;
  --cell: #F3EFEA;
  --cell-a1: #B8E5E0; --cell-a2: #6BC9C0; --cell-a3: #12948A; --cell-a4: #0A5751;
}
html[data-theme="dark"] {
  --bg: #121716;
  --ink: #E6EEEC;
  --muted: #8FA5A1;
  --soft: #1C2422;
  --hair: #22292B;
  --accent: #4DD0C5;
  --cell: #1C2422;
  --cell-a1: #15423D; --cell-a2: #0F6159; --cell-a3: #12948A; --cell-a4: #4DD0C5;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 13px;
  line-height: 1.5;
  max-width: 1280px;
  margin: 0 auto;
  padding: 36px 20px 60px;
}
a { color: var(--accent); }
h1 { font-size: 34px; margin: 18px 0 14px; }
h2 { font-size: 20px; margin: 26px 0 10px; }

/* masthead: logo + nav on one clean strip, controls pushed right */
.masthead { display: flex; align-items: baseline; gap: 26px; flex-wrap: wrap; padding-top: 4px; }
.masthead .brand { font-size: 30px; font-weight: bold; color: var(--ink); text-decoration: none; }
.masthead #nav { margin: 0; }
.topbtns { display: flex; align-items: flex-start; gap: 12px; flex-shrink: 0; margin-left: auto; align-self: flex-start; }
.tag { margin-top: 10px; }
.iconbtn { background: none; border: none; padding: 0; font-size: 20px; line-height: 1.2; cursor: pointer; }
.backupcol { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.txtbtn { background: none; border: none; padding: 0; font-size: 14px; font-weight: bold; color: var(--ink); cursor: pointer; text-align: left; }
.brand { font-size: 26px; font-weight: bold; }
.tag { color: var(--muted); max-width: 560px; margin-top: 4px; }

/* nav: all black, the chosen one is simply big black - no teal, no underline */
#nav { margin: 24px 0 6px; line-height: 2; }
#nav a { margin-right: 22px; font-weight: bold; display: inline-block; white-space: nowrap; font-size: 17px; color: var(--ink); text-decoration: none; }
#nav a.on { font-size: 26px; }

button, input, select {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 13px;
  border: none;
  outline: none;
  padding: 7px 10px;
  background: var(--soft);
  color: var(--ink);
  border-radius: 2px;
}
input::placeholder { color: var(--muted); }
button { cursor: pointer; font-weight: bold; }
button.mini { background: none; padding: 0 2px; font-size: 12px; color: var(--accent); text-decoration: underline; }
button.mini.dice { font-size: 18px; color: var(--ink); }
button.primary { background: var(--accent); color: var(--bg); padding: 8px 16px; }

/* filters */
.filters { margin: 2px 0; }
.flabel { font-size: 12px; font-weight: bold; color: var(--muted); margin-right: 4px; }
.fopt { background: none; font-weight: normal; color: var(--ink); opacity: 0.8; padding: 0 2px; margin-right: 10px; font-size: 13px; }
/* selected filter: bigger + bolder; color falls to base ink, or to the muscle's
   own region color (cX class added in JS) when it's the muscle row */
button.fopt.fon { font-size: 16px; font-weight: bold; opacity: 1; }
.filterbox { margin: 8px 0 20px; }

/* the paragraph: move names flow side by side, tight, separated only by their colors - REAL rainbow */
.movepara { line-height: 1.55; margin: 10px 0 18px; }
.mword { font-weight: bold; font-size: 17px; cursor: pointer; white-space: nowrap; margin-right: 12px; text-transform: lowercase; transition: font-size 150ms; }
.mword:hover { text-decoration: underline; }
button.mini { transition: color 150ms; }

/* confetti - pops up, gravity brings it down, cleans itself */
.confetti {
  position: fixed; top: 55vh; width: 9px; height: 13px; z-index: 99; pointer-events: none;
  animation: confetti-fly 1.6s cubic-bezier(0.25, 0.9, 0.4, 1) forwards;
}
@keyframes confetti-fly {
  0% { transform: translate(0, 0) rotate(0); opacity: 1; }
  30% { transform: translate(calc(var(--dx) * 0.5), -38vh) rotate(calc(var(--dr) * 0.5)); opacity: 1; }
  100% { transform: translate(var(--dx), 40vh) rotate(var(--dr)); opacity: 0; }
}
.card .name, .cal-d .item, .dayrow label { text-transform: lowercase; }
.mword.won { font-size: 21px; text-decoration: underline; }
.mword.picked { text-decoration: underline; font-size: 19px; }

/* the 10 stops - rich, coordinated, nothing pastel */
.c0 { color: #E5484D; } .c1 { color: #F76B15; } .c2 { color: #CE9C00; } .c3 { color: #2FA153; } .c4 { color: #12A594; }
.c5 { color: #0588F0; } .c6 { color: #5B5BD6; } .c7 { color: #9750DD; } .c8 { color: #E93D82; } .c9 { color: #8D8D86; }
html[data-theme="dark"] .c0 { color: #FF9592; } html[data-theme="dark"] .c1 { color: #FFA057; }
html[data-theme="dark"] .c2 { color: #FFD60A; } html[data-theme="dark"] .c3 { color: #3DD68C; }
html[data-theme="dark"] .c4 { color: #0BD8B6; } html[data-theme="dark"] .c5 { color: #70B8FF; }
html[data-theme="dark"] .c6 { color: #9B9EF0; } html[data-theme="dark"] .c7 { color: #D19DFF; }
html[data-theme="dark"] .c8 { color: #FF92AD; } html[data-theme="dark"] .c9 { color: #B5B3AD; }

/* the patchwork grid: compact cards side by side, color = body region */
.grid { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.card.compact { width: 220px; padding: 12px 12px 10px; margin: 0; }
.card.compact .name { font-size: 14px; cursor: pointer; }

/* the full patch: a message on screen - how-to visible by default, photo embedded */
.overlay {
  position: fixed; inset: 0; z-index: 10;
  background: rgba(20, 25, 24, 0.45);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
.card {
  width: min(520px, 92vw);
  max-height: 80vh;
  overflow-y: auto;
  padding: 22px 24px 18px;
  border-radius: 2px;
  color: #1F1A16;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.card .name { font-size: 18px; }
.card .close { align-self: flex-end; margin-top: 8px; }
.card .howtext { display: block; }
.movephoto { width: 100%; border-radius: 2px; margin-top: 8px; background: #fff; }
.card.c0 { background: #FFEBEE; } .card.c1 { background: #FFF3E0; } .card.c2 { background: #FFF7CE; }
.card.c3 { background: #E8F5E9; } .card.c4 { background: #E0F7FA; } .card.c5 { background: #E3F2FD; }
.card.c6 { background: #E8EAF6; } .card.c7 { background: #F3E5F5; } .card.c8 { background: #FCE4EC; } .card.c9 { background: #FBE9E7; }
html[data-theme="dark"] .card { color: #F2F2EE; }
html[data-theme="dark"] .card.c0 { background: #4E2422; } html[data-theme="dark"] .card.c1 { background: #4A3013; }
html[data-theme="dark"] .card.c2 { background: #4C4413; } html[data-theme="dark"] .card.c3 { background: #1E3B20; }
html[data-theme="dark"] .card.c4 { background: #103C42; } html[data-theme="dark"] .card.c5 { background: #143557; }
html[data-theme="dark"] .card.c6 { background: #232B52; } html[data-theme="dark"] .card.c7 { background: #3B1F44; }
html[data-theme="dark"] .card.c8 { background: #4A1B31; } html[data-theme="dark"] .card.c9 { background: #47251C; }
.card .name, .card .meta, .card .last, .card .howtext { color: inherit; }
.card .name { font-weight: bold; font-size: 14px; line-height: 1.3; }
.card .meta { font-size: 11.5px; opacity: 0.85; }
.card .last { font-size: 11px; opacity: 0.75; }
.card .row { margin-top: auto; padding-top: 6px; }
.card button.mini { color: inherit; font-size: 12px; margin-right: 8px; }
.card .howtext { font-size: 11.5px; line-height: 1.45; opacity: 0.95; margin-top: 4px; }
.gridnote { margin: 14px 0; color: var(--muted); }


/* today page: the day's moves and meals on the left, progress wall on the right */
.todaywrap { display: flex; gap: 44px; align-items: flex-start; margin-top: 6px; }
.todayleft { flex: 1.4; min-width: 0; }
.todayright { flex: 1; min-width: 260px; }
.progress-title { margin-top: 0 !important; }
.todayright .wall { grid-template-rows: repeat(7, 11px); gap: 2px; }
.todayright .wcell { width: 11px; height: 11px; }
@media (max-width: 780px) { .todaywrap { flex-direction: column; gap: 24px; } }

/* the calendar - reference look: airy hairline grid, day number top left,
   content at the bottom, planned days lilac, fully done days green */
.cal-head { display: flex; align-items: baseline; justify-content: center; gap: 16px; margin-top: 0; }
.cal-head h2 { margin: 0; }
.cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px; background: var(--hair); margin-top: 14px; }
.cal-h { font-size: 11px; color: var(--muted); text-align: left; background: var(--bg); padding: 8px 8px 6px; font-weight: normal; }
.cal-d {
  min-height: 82px;
  background: var(--bg);
  border-radius: 0;
  padding: 8px 9px;
  text-align: left;
  font-weight: normal;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.cal-d .dnum { font-size: 15px; }
.cal-d .cellbody { margin-top: auto; display: flex; flex-direction: column; gap: 1px; }
.cal-d.empty { background: var(--bg); }
.cal-d.hasplan { background: #E7DFF9; }
.cal-d.alldone { background: #DDF3DE; }
html[data-theme="dark"] .cal-d.hasplan { background: #2E2745; }
html[data-theme="dark"] .cal-d.alldone { background: #1E3320; }
.cal-d.today .dnum { color: var(--accent); font-weight: bold; }
.cal-d.sel .dnum { font-weight: bold; text-decoration: underline; }
.cal-d .item { font-size: 10.5px; font-weight: bold; line-height: 1.4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-d .item.done { text-decoration: line-through; opacity: 0.65; }
.cal-d .meals { font-size: 10px; color: var(--muted); letter-spacing: 0.04em; }

/* day panel - the day's name is the only headline; the rest is quiet labels */
.daypanel { margin-top: 0; }
.daypanel h2:first-child { margin-top: 0; font-size: 30px; }
.slabel { font-size: 12px; font-weight: bold; color: var(--muted); margin: 22px 0 4px; }
.dayrow { margin: 6px 0; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 15px; }
.dayrow label { display: flex; align-items: center; gap: 8px; font-size: 16px; }
.dayrow input[type="checkbox"] { width: 17px; height: 17px; }
.foodrow { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.foodrow input { width: 130px; font-size: 13px; padding: 7px 9px; }
.foodrow button { font-size: 13px; padding: 7px 12px; }
.foodrow input.num { width: 90px; }
.totals { font-weight: bold; margin-top: 10px; }
.small { font-size: 12px; color: var(--muted); }

/* github-style activity wall */
.wall { display: grid; grid-auto-flow: column; grid-template-rows: repeat(7, 13px); gap: 3px; margin: 14px 0 6px; overflow-x: auto; padding-bottom: 6px; }
.wcell { width: 13px; height: 13px; border-radius: 2px; background: var(--cell); }
.wcell.a1 { background: var(--cell-a1); }
.wcell.a2 { background: var(--cell-a2); }
.wcell.a3 { background: var(--cell-a3); }
.wcell.a4 { background: var(--cell-a4); }

.footer { margin-top: 48px; font-size: 11px; color: var(--muted); text-align: center; line-height: 1.8; }

/* the color legend */
.legend { margin: 2px 0 6px; }
.legend .mword.lg { font-size: 13px; cursor: default; margin-right: 10px; }

/* the basket: added moves pile up as draggable colored words */
.basket { line-height: 1.9; margin: 6px 0 16px; }
.basket .mword { font-size: 15px; margin-right: 4px; cursor: grab; }
.basket .mini { margin-right: 10px; }

/* onboarding sits in the middle of the screen, as an entrance should */
.onboard { min-height: 60vh; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; gap: 8px; }
.onboard h1 { margin: 0 0 6px; font-size: 40px; }
.obline { font-size: 16px; color: var(--ink); max-width: 460px; }
.obline.small { color: var(--muted); font-size: 13px; }
.obrow { margin-top: 16px; }
.obrow input { font-size: 15px; padding: 10px 12px; width: 260px; }

/* today line + backup nudge + day complete */
.todayline { margin-top: 8px; font-size: 15px; font-weight: bold; }
.nudge { margin: 10px 0 0; font-size: 13px; color: var(--muted); }
.daydone { font-size: 17px; font-weight: bold; color: var(--accent); margin: 8px 0; }

/* programs on the calendar */
.cal-d .item.prog { font-weight: bold; font-size: 11.5px; }
.dayprog { margin: 12px 0 2px; }
.dayrow.indent { margin-left: 18px; }

/* named workouts */
.wkhead { margin: 14px 0 0; }
.wkname { font-weight: bold; font-size: 17px; }
.wkstats { margin: 2px 0 4px; }
.wkline { margin: 4px 0; cursor: grab; font-size: 15px; }

@media (max-width: 860px) {
  body { padding: 20px 14px 40px; font-size: 14px; }
  .card { width: 100%; }
  .cal-d { min-height: 58px; padding: 4px 5px; }
  .cal-d .item { display: none; }
  .cal-d .meals { font-size: 9px; }
  .top { flex-direction: column; }
}