:root {
  --bg: #f6f7f9;
  --card: #ffffff;
  --ink: #16181d;
  --muted: #6b7280;
  --line: #e3e6ea;
  --accent: #3b5bdb;
  --done: #1f9d55;
  --done-bg: #e3f5e9;
  --skip: #9a7b12;
  --skip-bg: #fdf3d3;
  --miss: #cc3b3b;
  --miss-bg: #fbe6e6;
  --inactive: #f0f1f3;
  --radius: 10px;
  --cell: 34px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #14161a;
    --card: #1c1f25;
    --ink: #e8eaed;
    --muted: #9aa1ac;
    --line: #2c3039;
    --accent: #7f9cf5;
    --done: #4ade80;
    --done-bg: #16301f;
    --skip: #e3c15b;
    --skip-bg: #33290f;
    --miss: #f47272;
    --miss-bg: #3a1c1c;
    --inactive: #22252b;
  }
}

* { box-sizing: border-box; }

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

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ---- chrome --------------------------------------------------------------- */
.topbar {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 12px 16px;
  background: var(--card);
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 30;
}
.brand { font-weight: 700; color: var(--ink); }
.topbar nav { display: flex; gap: 16px; margin-left: auto; }
.topbar nav a { color: var(--muted); padding: 2px 0; border-bottom: 2px solid transparent; }
.topbar nav a.on { color: var(--ink); border-bottom-color: var(--accent); }

main { max-width: 1200px; margin: 0 auto; padding: 16px; }

h1 { font-size: 20px; margin: 0 0 16px; }
h2 { font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin: 20px 0 10px; }
h2:first-child { margin-top: 0; }

.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px;
  margin-bottom: 16px;
}

.flash, .notice, .error {
  padding: 10px 14px;
  border-radius: var(--radius);
  margin: 0 0 14px;
  font-size: 14px;
}
.flash  { background: var(--done-bg); color: var(--done); }
.notice { background: var(--skip-bg); color: var(--skip); }
.error  { background: var(--miss-bg); color: var(--miss); }

.hint, .muted { color: var(--muted); font-size: 13px; }
.empty { color: var(--muted); }
.count { color: var(--muted); font-weight: 400; }
.tag {
  font-size: 11px;
  background: var(--inactive);
  color: var(--muted);
  border-radius: 4px;
  padding: 1px 5px;
  margin-left: 6px;
  text-transform: none;
  letter-spacing: 0;
}

/* ---- controls ------------------------------------------------------------- */
input[type=text], input[type=password], input[type=date], input[type=month], textarea, select {
  font: inherit;
  color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px 10px;
  max-width: 100%;
}
input:focus, textarea:focus, summary:focus-visible { outline: 2px solid var(--accent); outline-offset: -1px; }
textarea { width: 100%; resize: vertical; }

button, .btn {
  font: inherit;
  cursor: pointer;
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--ink);
  border-radius: 8px;
  padding: 8px 14px;
  display: inline-block;
  min-height: 38px;
}
button:hover, .btn:hover { border-color: var(--accent); text-decoration: none; }
button.primary { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; }
button.danger { color: var(--miss); }

.inline { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.inline.grow { flex: 1 1 260px; }
.grow { flex: 1 1 auto; }
.actions { margin-top: 16px; }

pre {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px;
  overflow-x: auto;
  font-size: 12px;
  margin: 8px 0;
}
code { font-size: 12px; background: var(--bg); padding: 1px 4px; border-radius: 4px; }

/* ---- collapsible filters -------------------------------------------------- */
details.filters {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  margin-bottom: 12px;
}
details.filters > summary {
  cursor: pointer;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font-size: 14px;
  list-style: none;
  min-height: 44px;
  user-select: none;
}
details.filters > summary::-webkit-details-marker { display: none; }
details.filters > summary::after {
  content: "▾";
  color: var(--muted);
  transition: transform .15s ease;
}
details.filters[open] > summary::after { transform: rotate(180deg); }
details.filters[open] > summary { border-bottom: 1px solid var(--line); }
.ficon { color: var(--muted); }
.badge {
  background: var(--accent);
  color: #fff;
  border-radius: 999px;
  font-size: 11px;
  padding: 1px 7px;
  font-weight: 700;
}
.fsummary { color: var(--muted); font-weight: 400; font-size: 13px; margin-left: auto; }

.filterbody { padding: 4px 16px 16px; }
.filterrow {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
}
.filterrow:last-child { border-bottom: 0; padding-bottom: 0; }
.filtergroup { display: flex; gap: 10px 14px; align-items: center; flex-wrap: wrap; flex: 1 1 auto; }
.filteractions { display: flex; gap: 8px; flex-wrap: wrap; }
.legend {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--muted);
  min-width: 58px;
  padding-top: 9px;
}
.check, .radio { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; cursor: pointer; min-height: 30px; }
.check.isarchived { color: var(--muted); }
.to { color: var(--muted); font-size: 13px; }

/* ---- view tabs ------------------------------------------------------------ */
.viewbar { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; flex-wrap: wrap; }
.viewtabs { display: flex; gap: 6px; }
.viewtabs a {
  padding: 7px 16px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  background: var(--card);
  font-size: 14px;
}
.viewtabs a.on { border-color: var(--accent); color: var(--accent); font-weight: 600; }
.rangeinfo { color: var(--muted); font-size: 13px; margin: 0 0 0 auto; }

/* ---- tables --------------------------------------------------------------- */
.tablewrap {
  overflow-x: auto;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}
table { border-collapse: separate; border-spacing: 0; width: 100%; font-size: 14px; }
th, td { border-bottom: 1px solid var(--line); border-right: 1px solid var(--line); padding: 6px 8px; text-align: left; }
thead th { background: var(--card); font-weight: 600; }
tbody tr:last-child th, tbody tr:last-child td { border-bottom: 0; }

.grid .corner, .grid .rowhead {
  position: sticky;
  left: 0;
  z-index: 5;
  background: var(--card);
  min-width: 150px;
  max-width: 220px;
}
.grid thead .corner { z-index: 6; }
.grid .daycol { text-align: center; min-width: var(--cell); padding: 4px 2px; }
.grid .daycol a { display: block; color: inherit; }
.grid .daycol a:hover { text-decoration: none; color: var(--accent); }
.grid .daycol .dnum { display: block; font-size: 12px; }
.grid .daycol .dow  { display: block; font-size: 10px; color: var(--muted); }
.grid .daycol.istoday { background: var(--done-bg); }
.grid .daycol.ispicked { box-shadow: inset 0 -3px 0 var(--accent); }
.grid .moodrow td { text-align: center; font-size: 15px; padding: 4px 2px; }
.grid .statcol { text-align: right; white-space: nowrap; color: var(--muted); font-variant-numeric: tabular-nums; }

/* ---- tappable cells ------------------------------------------------------- */
.cell {
  text-align: center;
  font-weight: 700;
  padding: 0;
  height: var(--cell);
  min-width: var(--cell);
  transition: background-color .12s ease;
}
.cell[data-habit] {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}
.cell[data-habit]:hover { filter: brightness(.96); }
.cell[data-habit]:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.cell[data-habit]:active { transform: scale(.9); }
.cell.done     { color: var(--done); background: var(--done-bg); }
.cell.skipped  { color: var(--skip); background: var(--skip-bg); }
.cell.missed   { color: var(--miss); background: var(--miss-bg); }
.cell.inactive { background: var(--inactive); cursor: default; }
.cell.saving   { opacity: .45; }
.cell.failed   { outline: 2px solid var(--miss); outline-offset: -2px; }

.cellnote {
  min-height: 20px;
  margin: 8px 0 0;
  font-size: 13px;
  color: var(--muted);
  opacity: 0;
  transition: opacity .15s ease;
}
.cellnote.show { opacity: 1; }
.cellnote.error { color: var(--miss); font-weight: 600; opacity: 1; }

.rowhead.isarchived, .habitcol.isarchived { color: var(--muted); }

.log .datecol { white-space: nowrap; min-width: 120px; }
.log .moodcol { white-space: nowrap; }
.log .moodlabel { color: var(--muted); font-size: 13px; }
.log .habitcol { text-align: center; font-size: 12px; min-width: var(--cell); }
.log .journalcol { color: var(--muted); min-width: 180px; }
.log .snippet { color: var(--muted); }
.log tr.istoday td { background: var(--done-bg); }
.log tr.ispicked td { box-shadow: inset 0 -2px 0 var(--accent); }

.legendline { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 6px 0 24px; font-size: 12px; }
.chip { padding: 3px 9px; border-radius: 999px; border: 1px solid var(--line); color: var(--muted); }
.chip.done    { background: var(--done-bg); color: var(--done); }
.chip.skipped { background: var(--skip-bg); color: var(--skip); }
.chip.missed  { background: var(--miss-bg); color: var(--miss); }
.chip.inactive{ background: var(--inactive); }

/* ---- day entry ------------------------------------------------------------ */
.entry { scroll-margin-top: 70px; }
.datebar {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  padding-bottom: 14px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--line);
}
.daylabel { color: var(--muted); font-size: 14px; margin-left: auto; }

.moodpicker { display: flex; gap: 8px; flex-wrap: wrap; }
.mood { cursor: pointer; text-align: center; flex: 0 0 auto; }
.mood input { position: absolute; opacity: 0; pointer-events: none; }
.mood .emoji {
  display: block;
  font-size: 22px;
  line-height: 1;
  padding: 10px 12px 6px;
  border: 1px solid var(--line);
  border-bottom: 0;
  border-radius: var(--radius) var(--radius) 0 0;
}
.mood .label {
  display: block;
  font-size: 11px;
  color: var(--muted);
  border: 1px solid var(--line);
  border-top: 0;
  border-radius: 0 0 var(--radius) var(--radius);
  padding: 2px 8px 6px;
}
.mood.on .emoji, .mood.on .label { border-color: var(--accent); background: var(--done-bg); }
.mood.on .label { color: var(--ink); }

/* ---- manage --------------------------------------------------------------- */
.habitlist, .managelist { list-style: none; margin: 0; padding: 0; }
.managelist li {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
  flex-wrap: wrap;
}
.managelist li:last-child { border-bottom: 0; }
.habitname { font-weight: 500; }
.since { white-space: nowrap; }
.managelist input[type=text] { flex: 1 1 200px; }

/* ---- phones --------------------------------------------------------------- */
@media (max-width: 700px) {
  :root { --cell: 38px; }

  main { padding: 10px; }
  .topbar { padding: 10px 12px; gap: 10px; }
  .topbar nav { gap: 14px; }

  /* Filter rows stack so the labels do not squeeze the controls. */
  .filterrow { flex-direction: column; gap: 6px; padding: 10px 0; }
  .legend { padding-top: 0; min-width: 0; }
  .filterbody { padding: 4px 12px 14px; }
  .filteractions { width: 100%; }
  .filteractions button, .filteractions .btn { flex: 1 1 auto; text-align: center; }
  .fsummary { display: none; }

  .rangeinfo { margin-left: 0; width: 100%; }

  .grid .corner, .grid .rowhead { min-width: 118px; max-width: 130px; font-size: 13px; }
  .grid .statcol { font-size: 12px; padding: 4px 6px; }
  .cell { font-size: 15px; }

  .log .datecol { min-width: 104px; font-size: 13px; }
  .log .journalcol { min-width: 150px; }

  .mood .emoji { font-size: 20px; padding: 9px 10px 5px; }
  .mood .label { font-size: 10px; padding: 2px 6px 5px; }

  .datebar { gap: 6px; }
  .daylabel { width: 100%; margin-left: 0; text-align: center; }
  .actions button { width: 100%; }
}