/* ============================================================
   Tasks — dark grey monochrome
   No borders anywhere: surfaces, fills and spacing carry the
   structure. Dark is the default; a light theme is switchable.
   ============================================================ */

:root {
  --bg: #171717;
  --panel: #1F1F1F;
  --panel-2: #282828;
  --panel-3: #313131;
  --line: #2C2C2C;
  --line-strong: #454545;
  --text: #EDEDED;
  --text-dim: #C4C4C4;
  --muted: #9E9E9E;
  --faint: #757575;
  --accent: #D4D4D4;
  --accent-hov: #EAEAEA;
  --accent-prs: #BDBDBD;
  --accent-ink: #171717;
  --todo: #757575;
  --doing: #ADADAD;
  --done: #E0E0E0;
  --track: #2C2C2C;
  --card: #232323;      /* the same as an empty heatmap cell */
  --card-hov: #282828;

  --hm0: #232323;
  --hm1: #3A3A3A;
  --hm2: #5E5E5E;
  --hm3: #8C8C8C;
  --hm4: #C9C9C9;
  --hm-ink-1: #EDEDED;
  --hm-ink-0: #171717;

  /* task states: finished / in progress with a plan / planned / unplanned */
  --st-done: #24352A;
  --st-done-hov: #2B4031;
  --st-done-dot: #7BA47C;
  --st-doing: #23303D;
  --st-doing-hov: #2A3A4A;
  --st-doing-dot: #7F9CBB;
  --st-plan: #2B2B2B;
  --st-plan-hov: #343434;
  --st-plan-dot: #B4B4B4;
  --st-none: #1E2224;
  --st-none-hov: #262A2C;
  --st-none-dot: #6E7476;

  --r-s: 8px;
  --r-m: 10px;
  --r-l: 14px;
  --shadow: 0 14px 36px rgba(0, 0, 0, .55);

  --f-ui: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --f-mono: ui-monospace, SFMono-Regular, "JetBrains Mono", Menlo, monospace;

  --t-fast: 90ms;
  --t-hover: 180ms;
  --t-state: 200ms;
  --t-check: 220ms;
  --ease-pop: cubic-bezier(.2, .9, .3, 1.4);

  color-scheme: dark;
}

html[data-theme="light"] {
  --bg: #F4F4F4;
  --panel: #FCFCFC;
  --panel-2: #EBEBEB;
  --panel-3: #E1E1E1;
  --line: #E4E4E4;
  --line-strong: #BDBDBD;
  --text: #1A1A1A;
  --text-dim: #444444;
  --muted: #666666;
  --faint: #8C8C8C;
  --accent: #3D3D3D;
  --accent-hov: #262626;
  --accent-prs: #111111;
  --accent-ink: #F7F7F7;
  --todo: #8C8C8C;
  --doing: #6E6E6E;
  --done: #2E2E2E;
  --track: #E4E4E4;
  --card: #E4E4E4;      /* the same as an empty heatmap cell */
  --card-hov: #DCDCDC;

  --hm0: #E4E4E4;
  --hm1: #C6C6C6;
  --hm2: #9C9C9C;
  --hm3: #6B6B6B;
  --hm4: #383838;
  --hm-ink-1: #F7F7F7;
  --hm-ink-0: #1A1A1A;

  --st-done: #E3EFE3;
  --st-done-hov: #D8E9D8;
  --st-done-dot: #3F5B41;
  --st-doing: #E0E8F1;
  --st-doing-hov: #D3E0ED;
  --st-doing-dot: #3C5872;
  --st-plan: #EDEDED;
  --st-plan-hov: #E3E3E3;
  --st-plan-dot: #5C5C5C;
  --st-none: #DEDEDE;
  --st-none-hov: #D5D5D5;
  --st-none-dot: #747474;

  --shadow: 0 14px 36px rgba(0, 0, 0, .16);
  color-scheme: light;
}

* { box-sizing: border-box; }
html, body { height: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 400 16.5px/1.5 var(--f-ui);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overscroll-behavior-y: none;
}

h1, h2, h3, p, ul, figure { margin: 0; padding: 0; }
ul { list-style: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button, input, select, textarea { border: 0; }
input, textarea { outline: none; }

.num, .mono { font-family: var(--f-mono); font-variant-numeric: tabular-nums; }

.spacer { flex: 1 1 auto; min-width: 0; }

/* counts that are announced but not shown */
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
[hidden] { display: none !important; }

:focus-visible { outline: 2px solid var(--line-strong); outline-offset: 2px; }

/* ---------------- brand + topbar ---------------- */

.brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.015em;
  white-space: nowrap;
}

.brand-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--accent);
  display: inline-block;
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  background: var(--bg);
}

.topbar-inner {
  max-width: 1840px;
  margin: 0 auto;
  padding: 14px 24px;
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  min-width: 0;
}
/* flex items must be allowed to shrink, or the scrollable switcher cannot scroll */
.topbar-inner > *, .filters-row > * { min-width: 0; }

.topbar-end { display: flex; align-items: center; gap: 6px; margin-left: auto; }

.who {
  font: 400 12.5px/1 var(--f-mono);
  color: var(--faint);
  max-width: 150px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.main {
  max-width: 1840px;
  margin: 0 auto;
  padding: 22px 24px 72px;
}

@media (min-width: 1500px) {
  .main { padding: 26px 40px 84px; }
  .topbar-inner { padding: 14px 40px; }
}

/* ---------------- segmented control ---------------- */

.seg {
  display: inline-flex;
  background: none;
  border-radius: var(--r-s);
  padding: 3px;
  gap: 3px;
  max-width: 100%;
  overflow-x: auto;
  scrollbar-width: none;
}
.seg::-webkit-scrollbar { display: none; }

.seg-btn {
  appearance: none;
  background: transparent;
  color: var(--muted);
  height: 34px;
  padding: 0 15px;
  border-radius: 6px;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: background var(--t-hover), color var(--t-hover);
}
.seg-btn:hover { color: var(--text); background: var(--panel-2); }
.seg-btn.is-on { background: none; color: var(--text); font-weight: 600; }
.seg-btn.is-static { cursor: default; font-family: var(--f-mono); min-width: 56px; }

.seg-sm .seg-btn { height: 32px; padding: 0 13px; font-size: 14.5px; }

/* ---------------- buttons ---------------- */

.btn {
  appearance: none;
  height: 40px;
  padding: 0 18px;
  border-radius: var(--r-s);
  background: var(--panel-2);
  color: var(--text);
  font-size: 15.5px;
  font-weight: 500;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  white-space: nowrap;
  transition: background var(--t-fast), transform var(--t-fast);
}
.btn:hover { background: var(--panel-3); }
.btn:active { transform: translateY(1px); }

.btn-primary { background: var(--accent); color: var(--accent-ink); font-weight: 600; }
.btn-primary:hover { background: var(--accent-hov); }
.btn-primary:active { background: var(--accent-prs); }

.btn-secondary { background: var(--panel-2); }
.btn-ghost { background: transparent; color: var(--muted); }
.btn-ghost:hover { background: var(--panel-2); color: var(--text); }

.btn-m { height: 44px; padding: 0 22px; font-size: 16px; }
.btn-s { height: 36px; padding: 0 15px; font-size: 15px; }

.icon-btn {
  appearance: none;
  width: 36px; height: 36px;
  border-radius: var(--r-s);
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background var(--t-hover), color var(--t-hover);
}
.icon-btn:hover { background: var(--panel-2); color: var(--text); }

/* round add button that sits in a project header */
.add-btn {
  appearance: none;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--panel-2);
  color: var(--muted);
  cursor: pointer;
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  transition: background var(--t-hover), color var(--t-hover);
}
.add-btn:hover { background: var(--panel-3); color: var(--text); }

/* ---------------- chips ---------------- */

.chip {
  appearance: none;
  height: 36px;
  padding: 0 15px;
  border-radius: var(--r-s);
  background: var(--panel);
  color: var(--muted);
  font-size: 15.5px;
  font-weight: 500;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: background var(--t-hover), color var(--t-hover);
}
.chip:hover { background: var(--panel-2); color: var(--text); }
.chip[aria-pressed="true"] { background: var(--panel-3); color: var(--text); }

.chipline {
  width: 15px; height: 15px;
  border-radius: 4px;
  box-shadow: inset 0 0 0 1.5px var(--line-strong);
  display: inline-block;
  position: relative;
}
.chip[aria-pressed="true"] .chipline { background: var(--accent); box-shadow: none; }
.chip[aria-pressed="true"] .chipline::after {
  content: "";
  position: absolute;
  left: 3.5px; top: 1px;
  width: 8px; height: 4.5px;
  border-left: 1.6px solid var(--accent-ink);
  border-bottom: 1.6px solid var(--accent-ink);
  transform: rotate(-45deg);
}
.caret { color: var(--faint); }

.filter-proj { position: relative; }

.pop {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  min-width: 230px;
  max-height: 340px;
  overflow: auto;
  background: var(--panel-3);
  border-radius: var(--r-m);
  box-shadow: var(--shadow);
  padding: 6px;
  z-index: 40;
}
.pop-item {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 8px 10px;
  background: transparent;
  border-radius: 6px;
  cursor: pointer;
  font-size: 15px;
  color: var(--text-dim);
  text-align: left;
}
.pop-item:hover { background: var(--panel-2); color: var(--text); }
.pop-item.is-on { color: var(--text); font-weight: 550; }
.pop-item .code { font: 400 12px/1 var(--f-mono); color: var(--faint); }
.pop-item .nk { margin-left: auto; font: 400 12.5px/1 var(--f-mono); color: var(--muted); }

/* ---------------- filters bar ---------------- */

.filters { display: flex; flex-direction: column; gap: 12px; margin-bottom: 20px; }
.filters-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.filters-dates { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.dash { color: var(--faint); }
.filters-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
#view-stats .filters-meta { flex-basis: 100%; }
.meta { font-size: 14px; color: var(--muted); }
.section-title {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--muted);
}

.inp {
  height: 40px;
  padding: 0 13px;
  border: 0;
  background: var(--panel-2);
  border-radius: var(--r-s);
  color: var(--text);
  font-size: 15.5px;
  min-width: 0;
  appearance: none;
  transition: background var(--t-hover);
}
.inp:hover { background: var(--panel-3); }
.inp:focus { background: var(--panel-3); outline: 2px solid var(--line-strong); outline-offset: 0; }
textarea.inp { height: auto; padding: 12px 13px; line-height: 1.45; resize: vertical; }
select.inp { cursor: pointer; }

/* ---------------- task groups ---------------- */

.group { margin-bottom: 26px; }

/* The header is a compact chip: it hugs its own content instead of painting a
   bar across the page, so the only strip in a group is the progress one, and
   that one stops at the add button. */
.group-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 2px;
  margin-bottom: 12px;
  max-width: 100%;
  background: none;
}
.group-head .chev { color: var(--faint); transition: transform var(--t-state); flex: 0 0 auto; }
.group.is-collapsed .group-head .chev { transform: rotate(-90deg); }
.group-name { font-size: 18px; font-weight: 600; letter-spacing: -0.015em; }
.group-n {
  font: 500 13.5px/1 var(--f-mono);
  color: var(--muted);
  background: var(--panel-2);
  border-radius: 20px;
  padding: 5px 10px;
  font-variant-numeric: tabular-nums;
}
.group-head:hover .group-n { background: var(--panel-3); }
.group-bar {
  flex: 0 1 240px;
  width: 240px;
  min-width: 40px;
  height: 4px;
  margin-left: 4px;
  background: var(--track);
  border-radius: 2px;
  overflow: hidden;
}
.group-bar i { display: block; height: 100%; background: var(--accent); }
.group-hidden { padding: 10px 14px; color: var(--faint); font-size: 15px; }

/* ---------------- task cards ---------------- */

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 12px;
}

.tcard {
  position: relative;
  display: block;
  padding: 16px 18px;
  background: var(--card);
  border-radius: var(--r-m);
  cursor: pointer;
  transition: background var(--t-hover);
}
.tcard:hover { background: var(--card-hov); }

/* the work mark sits in the bottom right corner, and only while it means
   something: a dot for work in progress, a tick for finished work */
.twork {
  position: absolute;
  right: 12px;
  bottom: 10px;
  display: inline-grid;
  place-items: center;
  color: var(--doing);
  transition: color var(--t-state);
}
.twork.is-done { color: var(--done); }

.tmain { min-width: 0; flex: 1 1 auto; display: flex; flex-direction: column; gap: 10px; }

.tdot {
  width: 8px; height: 8px;
  border-radius: 50%;
  flex: 0 0 auto;
  background: var(--st-plan-dot);
  transition: background var(--t-state);
  margin-top: 8px;
}
.st-done .tdot { background: var(--st-done-dot); }
.st-doing .tdot { background: var(--st-doing-dot); }
.st-none .tdot { background: var(--st-none-dot); }

.tname {
  font-size: 17px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: -0.01em;
  color: var(--text);
  overflow-wrap: anywhere;
  border-radius: 4px;
  padding: 1px 2px;
  margin: -1px -2px;
  flex: 1 1 auto;
}
.tname:focus { outline: 2px solid var(--line-strong); outline-offset: 2px; }
.tcard.is-done .tname, .trow.is-done .tname { color: var(--text-dim); }

.tmeta {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  font-size: 14px;
  color: var(--muted);
}
.tplan { font-family: var(--f-mono); font-size: 14px; font-variant-numeric: tabular-nums; color: var(--text-dim); }
.tplan.on { color: var(--text-dim); }
.tplan.late { color: var(--text); font-weight: 600; }
.tplan.none { color: var(--faint); }

.ttoggle { display: flex; align-items: center; gap: 16px; flex: 0 0 auto; padding-top: 2px; }

/* ---------------- checkboxes ---------------- */

.ccheck, .tcheck {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  color: var(--muted);
  font-size: 14.5px;
  user-select: none;
  transition: color var(--t-hover);
}
.ccheck:hover, .tcheck:hover { color: var(--text); }
.ccheck input, .tcheck input {
  position: absolute;
  width: 1px; height: 1px;
  opacity: 0;
  pointer-events: none;
}
.ccheck .bx, .tcheck .bx {
  width: 21px; height: 21px;
  border-radius: 6px;
  box-shadow: inset 0 0 0 1.5px var(--line-strong);
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  transition: background var(--t-state), box-shadow var(--t-state);
}
.ccheck .bx.round { border-radius: 50%; }
.ccheck:hover .bx, .tcheck:hover .bx { box-shadow: inset 0 0 0 1.5px var(--muted); }
.ccheck input:focus-visible + .bx, .tcheck input:focus-visible + .bx { outline: 2px solid var(--line-strong); outline-offset: 2px; }

.ccheck .bx::before {
  content: "";
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--accent-ink);
  transform: scale(0);
  transition: transform var(--t-check) var(--ease-pop);
}
.ccheck input:checked + .bx { background: var(--doing); box-shadow: none; }
.ccheck input:checked + .bx::before { transform: scale(1); }
.ccheck input:checked ~ .cl { color: var(--text); }

.tcheck .bx::after, .ccheck .bx.done::after {
  content: "";
  width: 10px; height: 5px;
  border-left: 1.8px solid var(--accent-ink);
  border-bottom: 1.8px solid var(--accent-ink);
  transform: rotate(-45deg) scale(0);
  transform-origin: 50% 50%;
  transition: transform var(--t-check) var(--ease-pop);
}
.tcheck input:checked + .bx, .ccheck input:checked + .bx.done { background: var(--accent); box-shadow: none; }
.tcheck input:checked + .bx::after, .ccheck input:checked + .bx.done::after { transform: rotate(-45deg) scale(1); }
.tcheck input:checked ~ .cl { color: var(--text); }

.tcheck.sm .bx, .ccheck.sm .bx { width: 19px; height: 19px; border-radius: 5px; }

@keyframes ring {
  from { box-shadow: 0 0 0 0 var(--line-strong); }
  to { box-shadow: 0 0 0 12px transparent; }
}
.just-done .bx { animation: ring 420ms ease-out; }

/* ---------------- task table ---------------- */

.ttable { border-radius: var(--r-m); overflow: hidden; }
.trow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 66px 92px 88px;
  align-items: center;
  gap: 10px;
  padding: 0 12px;
  min-height: 48px;
  background: var(--panel);
  cursor: pointer;
  transition: background var(--t-hover);
}
.trow .tname { font-size: 16px; }
.thead {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 66px 92px 88px;
  gap: 10px;
  padding: 10px 12px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--muted);
  background: var(--panel-2);
}
.tcell { font: 400 14px/1 var(--f-mono); color: var(--muted); font-variant-numeric: tabular-nums; }
.tcell.dim { color: var(--faint); }
.tstate { font-size: 14px; color: var(--muted); font-family: var(--f-ui); }
.tchecks { display: inline-flex; align-items: center; gap: 8px; }
.tcheck .cl, .ccheck .cl { line-height: 1; }
.tcheck.sm .cl, .ccheck.sm .cl { display: none; }

.tdel {
  opacity: 0;
  color: var(--faint);
  transition: opacity var(--t-hover), color var(--t-hover);
}
.trow:hover .tdel, .tcard:hover .tdel, .tdel:focus-visible { opacity: 1; }
.tdel:hover { color: var(--text); }
.tcard .tdel { position: absolute; right: 8px; top: 8px; width: 28px; height: 28px; }

/* ---------------- empty ---------------- */

.empty {
  padding: 32px 18px;
  border-radius: var(--r-m);
  background: var(--panel);
  color: var(--muted);
  font-size: 15.5px;
  text-align: center;
}

/* ---------------- projects ---------------- */

.projects-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 14px;
}
@media (max-width: 1500px) { .projects-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 1100px) { .projects-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 830px)  { .projects-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px)  { .projects-grid { grid-template-columns: 1fr; } }

.pcard {
  background: var(--card);
  border-radius: var(--r-l);
  padding: 20px 22px 18px;
  cursor: pointer;
  transition: background var(--t-hover);
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.pcard:hover { background: var(--card-hov); }

.pcard-head { display: flex; align-items: center; gap: 10px; min-width: 0; }
.pname { font-size: 18px; font-weight: 600; letter-spacing: -0.015em; }
.pcard.is-full .pname { color: var(--muted); }

.donut-wrap { display: flex; justify-content: center; padding: 4px 0; }
.donut { display: block; }
.donut-num {
  font: 600 42px/1 var(--f-mono);
  fill: var(--text);
  text-anchor: middle;
  font-variant-numeric: tabular-nums;
}
.donut-cap {
  font: 500 12px/1 var(--f-ui);
  fill: var(--muted);
  text-anchor: middle;
  letter-spacing: .14em;
}

.plegend { display: flex; flex-direction: column; gap: 9px; font-size: 15px; }
.plegend div { display: flex; align-items: center; gap: 10px; min-width: 0; }
.plegend span { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.plegend b { margin-left: auto; font: 500 15px/1 var(--f-mono); color: var(--text-dim); font-variant-numeric: tabular-nums; }
.sq { width: 11px; height: 11px; border-radius: 3px; flex: 0 0 auto; }

.pgoals { display: flex; padding-top: 6px; margin-top: auto; }
.goals-link {
  appearance: none;
  background: transparent;
  color: var(--muted);
  font-size: 14.5px;
  font-weight: 500;
  cursor: pointer;
  padding: 5px 9px;
  border-radius: 7px;
  transition: background var(--t-hover), color var(--t-hover);
}
.goals-link:hover { background: var(--panel-3); color: var(--text); }

/* each period is a label (filters the tiles) plus a count (opens Tasks) */


/* ---------------- stats calendar ---------------- */

.month { background: none; padding: 0; min-width: 0; }



.cell {
  position: relative;
  width: var(--cell);
  height: var(--cell);
  border-radius: 4px;
  display: grid;
  place-items: center;
  font: 400 14px/1 var(--f-mono);
  font-variant-numeric: tabular-nums;
  padding: 0;
  cursor: default;
  font-style: normal;
  transition: box-shadow var(--t-hover);
}
.lv0 { background: var(--hm0); color: var(--faint); }
.lv1 { background: var(--hm1); color: var(--hm-ink-1); }
.lv2 { background: var(--hm2); color: var(--hm-ink-0); }
.lv3 { background: var(--hm3); color: var(--hm-ink-0); }
.lv4 { background: var(--hm4); color: var(--hm-ink-1); }
button.cell { cursor: pointer; }
button.cell:hover { box-shadow: inset 0 0 0 1.5px var(--text); }
.cell.out { opacity: .3; }
.cell.today { box-shadow: inset 0 0 0 2px var(--text); }
.cell.today::after {
  content: "";
  position: absolute;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--text);
  transform: translateY(11px);
}
.cell.is-open { box-shadow: inset 0 0 0 1.5px var(--text); }

/* ============================ the year grid ============================
   One square size for the whole year, and the space between two months is
   exactly one square: both the squares and the month gap read the same value.
   The square is derived from the viewport and the column count, with a margin
   that covers the page padding, the month gaps and the inner gaps, so a
   six-week month always fits inside its column. */

/* Six months across. A month is always six weeks wide, and the space between
   two months is uniform: the cells are sized from the viewport so that a month
   fits its column with that gap left over, which keeps the distance between
   months even all the way down the grid. */
:root { --cols: 6; --cell: clamp(18px, calc((100vw - 220px) / (7 * var(--cols) + 5)), 48px); }
@media (max-width: 1460px) { :root { --cols: 4; --cell: clamp(18px, calc((100vw - 170px) / (7 * var(--cols) + 5)), 46px); } }
@media (max-width: 1140px) { :root { --cols: 3; --cell: clamp(18px, calc((100vw - 140px) / (7 * var(--cols) + 5)), 46px); } }
@media (max-width: 880px)  { :root { --cols: 2; --cell: clamp(18px, calc((100vw - 110px) / (7 * var(--cols) + 5)), 44px); } }
@media (max-width: 600px)  { :root { --cols: 1; --cell: clamp(18px, calc((100vw - 70px) / (7 * var(--cols) + 5)), 44px); } }

.months {
  display: grid;
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  align-items: start;
  column-gap: var(--cell);
  row-gap: calc(var(--cell) + 24px);
  container-type: inline-size;
}

/* Every month is as wide as six weeks. A short month leaves its last column
   empty, and centring it splits that leftover evenly, so the distance between
   the rightmost square of one month and the leftmost of the next comes out as
   one square — the same measure the squares themselves use. */
.month { justify-self: start; }

.month { background: none; padding: 0; min-width: 0; }

.cal {
  display: grid;
  /* Every month is as wide as six weeks. A short month leaves its last column
     empty, which views.js accounts for when it balances the month gaps. */
  grid-template-columns: repeat(6, var(--cell));
  grid-auto-rows: var(--cell);
  grid-auto-flow: column;
  gap: 4px;
  justify-content: center;
}

.legend { display: inline-flex; align-items: center; gap: 6px; }
.legend .cell { width: 24px; height: 24px; flex: 0 0 auto; font-size: 11px; border-radius: 4px; }
.legend .cell.lv0 { background: var(--panel-2); }

/* ---------------- modal ---------------- */

.modal { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 16px; }
.modal-backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, .66); animation: fade 260ms ease-out; }
.modal-panel {
  position: relative;
  width: 100%;
  max-width: 470px;
  max-height: min(88vh, 760px);
  overflow: auto;
  background: var(--panel-3);
  border-radius: var(--r-l);
  padding: 26px;
  box-shadow: var(--shadow);
  animation: pop 260ms cubic-bezier(.2, .9, .3, 1.05);
}
.modal-title { font-size: 19px; font-weight: 600; letter-spacing: -0.02em; }
.modal-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 18px; }
.modal-body { display: flex; flex-direction: column; gap: 14px; }
.modal-foot { display: flex; align-items: center; gap: 10px; margin-top: 22px; }
.modal-foot .spacer { flex: 1; }

@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes pop { from { opacity: 0; transform: translateY(8px) scale(.985); } to { opacity: 1; transform: none; } }

.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.lbl {
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--muted);
}
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.flags { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; padding: 4px 0; }

.form-err { color: var(--text); font-size: 14.5px; }

.daygroup { padding-top: 12px; }
.daygroup:first-child { padding-top: 0; }
.daygroup-head { display: flex; align-items: baseline; gap: 9px; margin-bottom: 8px; }
.daygroup-head .n { margin-left: auto; font: 500 14px/1 var(--f-mono); color: var(--muted); }
.daytask { display: flex; font-size: 16px; color: var(--text-dim); }
.daytask .mark {
  width: 10px; height: 5px;
  border-left: 1.8px solid var(--text);
  border-bottom: 1.8px solid var(--text);
  transform: rotate(-45deg) translateY(-2px);
  flex: 0 0 auto;
}

/* ---------------- login ---------------- */

.login { min-height: 100%; display: grid; place-items: center; padding: 20px; }
.login-card {
  width: 100%;
  max-width: 340px;
  background: var(--panel);
  border-radius: var(--r-l);
  padding: 30px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.login-card .brand { font-size: 19px; }
.login-card .btn { width: 100%; }

/* ---------------- toast ---------------- */

.toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  background: var(--panel-3);
  color: var(--text);
  border-radius: var(--r-s);
  padding: 12px 18px;
  font-size: 15.5px;
  box-shadow: var(--shadow);
  z-index: 200;
  animation: pop 180ms ease-out;
}

/* ---------------- skeleton ---------------- */

.sk {
  background: var(--panel);
  border-radius: var(--r-m);
  height: 72px;
  position: relative;
  overflow: hidden;
}
.sk::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, color-mix(in oklab, var(--panel-3) 80%, transparent), transparent);
  animation: sweep 1.1s linear infinite;
}
@keyframes sweep { from { transform: translateX(-100%); } to { transform: translateX(100%); } }

.stagger > * { animation: rise 200ms ease-out backwards; }
.stagger > *:nth-child(1) { animation-delay: 0ms; }
.stagger > *:nth-child(2) { animation-delay: 40ms; }
.stagger > *:nth-child(3) { animation-delay: 80ms; }
.stagger > *:nth-child(4) { animation-delay: 120ms; }
.stagger > *:nth-child(5) { animation-delay: 160ms; }
.stagger > *:nth-child(n+6) { animation-delay: 200ms; }
@keyframes rise { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* ---------------- date range fields ---------------- */

/* a date reads as plain text until it has a value; no slab, no box */
/* A date is a single line of text: a fixed 36px control that never grows,
   never wraps and carries no slab of its own. */
.dr-field {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  height: 36px;
  min-height: 36px;
  max-height: 36px;
  padding: 0 8px;
  background: transparent;
  border-radius: 6px;
  color: var(--text);
  font-size: 15.5px;
  line-height: 1;
  cursor: pointer;
  overflow: hidden;
  white-space: nowrap;
  box-shadow: none;
  flex: 0 0 auto;
  transition: background var(--t-hover), color var(--t-hover);
}
.dr-field:hover { background: var(--panel); }
.dr-field .dr-val {
  display: block;
  font-family: var(--f-mono);
  font-size: 14.5px;
  line-height: 1;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.dr-field .dr-val.is-empty { color: var(--muted); font-family: var(--f-ui); font-size: 15px; }
.dr-field .dr-ico { display: inline-grid; place-items: center; color: var(--muted); }
.dr-field:hover .dr-ico { color: var(--text); }

/* inside the editor the fields are form controls, so they keep a surface */
.field .dr-field {
  background: var(--panel-2);
  padding: 0 13px;
  justify-content: flex-start;
  color: var(--text-dim);
}
.field .dr-field:hover { background: var(--panel-3); }
.field .dr-field .dr-val.is-empty { color: var(--faint); }

/* ---------------- date picker ---------------- */

.dp-pop {
  position: fixed;
  width: 320px;
  padding: 16px;
  background: var(--panel-3);
  border-radius: var(--r-m);
  box-shadow: var(--shadow);
  z-index: 300;
  animation: pop 160ms ease-out;
}
.dp-head { display: flex; align-items: center; gap: 6px; margin-bottom: 14px; }
.dp-title { flex: 1; text-align: center; font-size: 16px; font-weight: 600; letter-spacing: -0.01em; }
.dp-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.dp-dow {
  height: 26px;
  display: grid; place-items: center;
  font: 600 11.5px/1 var(--f-ui);
  letter-spacing: .06em;
  color: var(--muted);
  text-transform: uppercase;
}
.dp-cell {
  appearance: none;
  background: transparent;
  color: var(--text-dim);
  height: 36px;
  border-radius: 7px;
  font: 400 14.5px/1 var(--f-mono);
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background var(--t-hover), color var(--t-hover);
}
.dp-cell:hover { background: var(--panel-2); color: var(--text); }
.dp-cell.out { color: var(--faint); opacity: .55; }
.dp-cell.today { box-shadow: inset 0 0 0 1.5px var(--line-strong); }
.dp-cell.is-on { background: var(--accent); color: var(--accent-ink); font-weight: 600; box-shadow: none; }
.dp-foot { display: flex; align-items: center; gap: 8px; margin-top: 14px; }

/* ---------------- responsive ---------------- */

@media (max-width: 1023px) {
  .cards { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
}

@media (max-width: 719px) {
  body { font-size: 16px; }
  .main { padding: 16px 16px 56px; }
  .topbar-inner { padding: 12px 16px; gap: 10px; }
  .cards { grid-template-columns: 1fr; gap: 10px; }
  .projects-grid { grid-template-columns: 1fr; }
  .trow, .thead { grid-template-columns: minmax(0, 1fr) 58px 80px; }
  .trow .tcell.hide-m, .thead .tcell.hide-m, .thead .tstate-h { display: none; }
  .who { display: none; }
  .cal { gap: 3px; }
  .group-bar, .tg-bar { flex: 0 1 auto; width: auto; min-width: 32px; }
  .legend .cell { width: 20px; height: 20px; flex: 0 0 auto; }
  .grid2 { grid-template-columns: 1fr; }
  .modal-panel { padding: 20px; }
  .filters-row { gap: 8px; }
  .seg { width: 100%; }
  .seg-btn { flex: 1 1 auto; }
  /* the bar must never push the page sideways on a phone */
  .topbar-inner .seg { width: auto; flex: 0 1 auto; min-width: 0; }
  .topbar-inner .seg-btn { flex: 0 0 auto; padding: 0 10px; }
  .topbar-inner { flex-wrap: wrap; overflow: hidden; }
  .topbar-mid, .topbar-end { flex-wrap: wrap; min-width: 0; }
  .topbar-end { gap: 2px; }
  .pop { min-width: 190px; }
  .dp-pop { width: min(330px, calc(100vw - 24px)); }
}

@media (max-width: 559px) {
  #mode { flex: 0 0 auto; }
  .dp-cell { height: 38px; }
}

@media (max-width: 389px) {
  #logout { width: 36px; padding: 0; font-size: 0; }
  #logout::after { content: "→"; font-size: 16px; line-height: 1; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
  }
}

/* ---------------- targets ---------------- */

.targets-body { display: flex; flex-direction: column; gap: 26px; }

.tlist {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  align-items: start;
}
@media (max-width: 1100px) { .tlist { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 719px)  { .tlist { grid-template-columns: 1fr; } }

/* Same as a task group: a compact chip that hugs its content, no bar across
   the page. */
.tgroup-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 2px;
  margin-bottom: 12px;
  max-width: 100%;
  background: none;
}



.target {
  position: relative;
  display: block;
  padding: 16px 18px;
  border-radius: var(--r-m);
  background: var(--card);
  cursor: pointer;
  transition: background var(--t-hover);
}
.target:hover { background: var(--card-hov); }

.tg-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 11px; }
.tg-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.tg-text {
  font-size: 17px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: -0.01em;
  border-radius: 4px;
  padding: 1px 2px;
  margin: -1px -2px;
  flex: 1 1 auto;
}
.target.is-achieved .tg-text { color: var(--text-dim); }
.tg-quarter {
  font: 500 13px/1 var(--f-mono);
  color: var(--muted);
  background: color-mix(in oklab, var(--panel-3) 60%, transparent);
  border-radius: 6px;
  padding: 4px 8px;
}
.tg-meta { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.tg-progress { display: flex; align-items: center; gap: 10px; flex: 1 1 200px; min-width: 0; }
.tg-bar {
  flex: 0 1 240px;
  width: 240px;
  min-width: 40px;
  height: 10px;
  border-radius: 5px;
  background: color-mix(in oklab, var(--track) 70%, var(--bg));
  box-shadow: inset 0 0 0 1px var(--line-strong);
  overflow: hidden;
}
.tg-bar i { display: block; height: 100%; background: var(--accent); transition: width var(--t-state); }
.target.is-achieved .tg-bar i { background: var(--st-done-dot); }
.tg-pct {
  font: 500 14.5px/1 var(--f-mono);
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.tg-pct.left { color: var(--faint); font-weight: 400; }
.tg-meter { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.tg-progress { display: flex; align-items: center; gap: 10px; }
.tg-step {
  appearance: none;
  width: 26px; height: 26px;
  border-radius: 7px;
  background: color-mix(in oklab, var(--panel-3) 55%, transparent);
  color: var(--muted);
  cursor: pointer;
  display: inline-grid;
  place-items: center;
  font-size: 17px;
  line-height: 1;
  transition: background var(--t-hover), color var(--t-hover);
}
.tg-step:hover { background: var(--panel-3); color: var(--text); }
.tg-right { display: flex; align-items: center; gap: 14px; flex: 0 0 auto; }
.tg-actions { display: flex; gap: 2px; }
.tg-date { font: 400 13.5px/1 var(--f-mono); color: var(--muted); font-variant-numeric: tabular-nums; }
.target.is-achieved .tg-date { color: var(--st-done-dot); }

@media (max-width: 719px) {
  .target { padding: 14px; }
  .tg-right { flex-direction: column; align-items: flex-end; gap: 8px; }
  .tg-progress { flex-basis: 100%; }
}

/* ---------------- report ---------------- */

.report-body { display: flex; flex-direction: column; gap: 18px; }
.rtable {
  background: var(--panel);
  border-radius: var(--r-l);
  overflow: hidden;
}
.rrow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) repeat(4, minmax(84px, 128px));
  gap: 10px;
  align-items: center;
  padding: 14px 18px;
  min-height: 52px;
}
.rrow + .rrow { border-top: 1px solid transparent; }
.rhead {
  display: grid;
  grid-template-columns: minmax(0, 1fr) repeat(4, minmax(84px, 128px));
  gap: 10px;
  padding: 12px 18px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--muted);
  background: var(--panel-2);
}
.rnum { font: 500 15.5px/1 var(--f-mono); color: var(--text); text-align: right; font-variant-numeric: tabular-nums; }
.rnum.zero { color: var(--faint); font-weight: 400; }
.rname { font-size: 16px; font-weight: 500; }
.rtotal { background: var(--panel-2); }
.rtotal .rname { font-weight: 600; }

@media (max-width: 719px) {
  .rrow, .rhead { grid-template-columns: minmax(0, 1fr) repeat(2, 56px); }
  .rrow .rn-extra, .rhead .rh-extra { display: none; }
}

/* ---------------- cups ---------------- */

.cell .cellwrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  line-height: 1;
}
.cell .cnt { font: inherit; }
.cell .cupnum {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font: 600 10.5px/1 var(--f-mono);
  opacity: .85;
}
.cell .cupnum svg { width: 11px; height: 11px; }
.cell.lv2 .cupnum, .cell.lv3 .cupnum { color: var(--hm-ink-0); }

/* ---------------- open goals counter (top bar) ---------------- */

.goalcups {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 36px;
  padding: 0 12px;
  border-radius: var(--r-s);
  color: var(--muted);
  cursor: default;
  user-select: none;
}
.goalcups .cup-medal {
  display: inline-grid;
  place-items: center;
  color: var(--faint);
  transition: color var(--t-hover);
}
.goalcups .cup-num {
  font: 500 14.5px/1 var(--f-mono);
  color: var(--text-dim);
  font-variant-numeric: tabular-nums;
}
.goalcups.is-empty .cup-num { color: var(--faint); }
.goalcups.has-any { color: var(--text-dim); }
.goalcups.has-any .cup-medal { color: var(--text-dim); }

/* ---------------- businesses ---------------- */

.biz-list { display: flex; flex-direction: column; gap: 10px; }
.biz-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-radius: var(--r-m);
  background: var(--panel-2);
}
.biz-main { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.biz-name { font-size: 16px; font-weight: 550; letter-spacing: -0.01em; }
.biz-note { font-size: 13px; color: var(--muted); }
.biz-code { font: 400 12.5px/1 var(--f-mono); color: var(--faint); letter-spacing: .05em; }
.biz-count {
  font: 500 13.5px/1 var(--f-mono);
  color: var(--muted);
  background: var(--panel-3);
  border-radius: 20px;
  padding: 5px 10px;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.biz-form { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; }
.biz-form .field { flex: 1 1 160px; }
.biz-add { display: flex; align-items: center; gap: 10px; }
.biz-add .inp { flex: 1 1 auto; }
.biz-row .inp { flex: 1 1 auto; }

.daytask .mark.goal {
  border-left-color: var(--st-done-dot);
  border-bottom-color: var(--st-done-dot);
}
.daytag {
  margin-left: auto;
  font: 500 11.5px/1 var(--f-mono);
  color: var(--st-done-dot);
  background: var(--st-done);
  border-radius: 5px;
  padding: 4px 7px;
}

.daytask .mark.goal { border-left-color: var(--st-done-dot); border-bottom-color: var(--st-done-dot); }


/* Controls in the top bar sit flat until they are active. :where() keeps the
   specificity at zero so the base .chip fill cannot win. */
.chip-bare, .chip-bare:hover, .chip-bare[aria-pressed="true"], .chip-bare.is-on {
  background: transparent;
  color: var(--muted);
  padding: 0 10px;
}
.chip-bare:hover { color: var(--text); }
.chip-bare.is-on, .chip-bare[aria-pressed="true"], .chip-bare[aria-expanded="true"] {
  color: var(--text);
  background: var(--panel-3);
}

/* a day entry is a button that opens the item */
.dayopen {
  appearance: none;
  background: transparent;
  width: 100%;
  display: flex;
  align-items: baseline;
  gap: 9px;
  padding: 5px 8px;
  margin: 0 -8px;
  border-radius: 7px;
  cursor: pointer;
  text-align: left;
  color: inherit;
  font: inherit;
  transition: background var(--t-hover);
}
.dayopen:hover { background: var(--panel-2); }
.dayopen .daytext { flex: 0 1 auto; }