/* ─── Flexoki Dark Tokens ──────────────────────────────────────────────────── */

:root {
  --black:    #0A0908;
  --bg:       #141312;
  --surface:  #1C1B1A;
  --border:   #343331;
  --base-700: #575653;
  --base-600: #6F6E69;
  --base-500: #878580;
  --base-400: #9F9D96;
  --base-300: #B7B5AC;
  --base-200: #CECDC3;

  --cyan:     #3AA99F;
  --green:    #879A39;
  --yellow:   #D0A215;
  --orange:   #DA702C;
  --red:      #D14D41;
  --blue:     #4385BE;

  --font: "Berkeley Mono", "Geist Mono", "JetBrains Mono", "Fira Mono", monospace;
  --sz: 13px;

  /* Spacing scale */
  --space-1:  4px;
  --space-2:  8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 28px;

  /* Semantic spacing aliases */
  --row-padding-y:    var(--space-2);  /* 8px  — standard list row */
  --row-padding-y-sm: 6px;            /* compact summary/tally row */
  --label-col:        72px;           /* key column: meal-slot, tally-name */
  --screen-pad:       var(--space-4); /* 16px — outer screen padding */

  /* Letter-spacing scale */
  --letter-nav: 0.05em;  /* navigation labels */
  --letter-btn: 0.08em;  /* action buttons */
  --letter-lg:  0.12em;  /* section headings, picker title */
  --letter-xl:  0.15em;  /* brand / decorative */
}

/* ─── Reset ────────────────────────────────────────────────────────────────── */

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* ─── Base ─────────────────────────────────────────────────────────────────── */

html, body {
  height: 100%;
  background: var(--black);
  color: var(--base-200);
  font-family: var(--font);
  font-size: var(--sz);
  text-transform: lowercase;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--blue); text-decoration: underline; }
a:hover { color: var(--base-300); }

button, input, textarea {
  font-family: var(--font);
  font-size: var(--sz);
  text-transform: lowercase;
}

/* ─── Layout ───────────────────────────────────────────────────────────────── */

#app {
  display: flex;
  flex-direction: column;
  height: 100%;
  max-width: 640px;
  margin: 0 auto;
}

/* ─── Header ───────────────────────────────────────────────────────────────── */

#header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  padding-top: max(10px, env(safe-area-inset-top));
  border-bottom: 1px solid var(--border);
  background: var(--bg);
  flex-shrink: 0;
}

.header-title {
  color: var(--cyan);
  letter-spacing: var(--letter-xl);
}

.header-title span {
  color: var(--base-500);
  margin-right: 6px;
}

.header-date {
  color: var(--base-500);
  cursor: pointer;
  transition: color 0.1s;
}
.header-date:hover { color: var(--base-300); }

/* ─── Login ────────────────────────────────────────────────────────────────── */

#login-screen {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  height: 100%;
  gap: 16px;
  padding: 40px 32px;
  max-width: 480px;
  margin: 0 auto;
  width: 100%;
}

.login-title {
  color: var(--cyan);
  letter-spacing: var(--letter-nav);
  margin-bottom: 8px;
}

.login-field {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
}

.login-prompt {
  color: var(--base-500);
  flex-shrink: 0;
}

#login-error {
  color: var(--red);
  min-height: 1.2em;
}

/* ─── Nav ──────────────────────────────────────────────────────────────────── */

#nav {
  display: flex;
  border-top: 1px solid var(--border);
  background: var(--bg);
  flex-shrink: 0;
}

body.standalone { background: var(--bg); }
body.standalone .nav-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding-bottom: calc(16px + env(safe-area-inset-bottom));
}

.nav-btn {
  flex: 1;
  padding: 11px 4px;
  background: none;
  border: none;
  color: var(--base-500);
  cursor: pointer;
  letter-spacing: var(--letter-nav);
  border-top: 1px solid transparent;
  transition: color 0.1s, border-color 0.1s;
  position: relative;
}

.nav-btn.has-indicator::after {
  content: "";
  position: absolute;
  top: 7px;
  right: 10px;
  width: 4px;
  height: 4px;
  background: var(--yellow);
}

.nav-btn:hover { color: var(--base-300); }
.nav-btn.active {
  color: var(--cyan);
  border-top-color: var(--cyan);
  background: rgba(58, 169, 159, 0.04);
}

/* ─── Screens ──────────────────────────────────────────────────────────────── */

#screens {
  flex: 1;
  overflow-y: auto;
  padding: var(--screen-pad) var(--screen-pad) var(--space-2);
}

.screen { display: none; }
.screen.active { display: block; }

/* ─── Section Header ───────────────────────────────────────────────────────── */

.section-header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: var(--space-5) 0 10px;
  color: var(--base-600);
  letter-spacing: var(--letter-lg);
}

.section-header::before,
.section-header::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border);
}

/* Compact variant: inline progress/status lines below day-selector */
.section-header--tight {
  margin-top: var(--space-2);
  margin-bottom: var(--space-1);
}

/* Extra top separation within a screen (e.g. review sections) */
.section-header--spaced { margin-top: var(--space-6); }

/* ─── Today: Date ──────────────────────────────────────────────────────────── */

.today-date {
  color: var(--base-500);
  padding: 4px 0 12px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 4px;
}

.today-date .date-day {
  color: var(--base-200);
}

/* ─── Checks Progress ──────────────────────────────────────────────────────── */

.checks-progress {
  color: var(--base-500);
  white-space: nowrap;
}

.checks-progress.complete {
  color: var(--green);
}

/* ─── All Done ─────────────────────────────────────────────────────────────── */

.all-done {
  color: var(--base-600);
  padding: 8px 0 4px;
  font-style: italic;
}

.all-done.hidden { display: none; }

/* ─── Checkbox ─────────────────────────────────────────────────────────────── */

.check-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  cursor: pointer;
  user-select: none;
  border-bottom: 1px solid var(--border);
}

.check-item:last-of-type { border-bottom: none; }

.check-item input[type="checkbox"] { display: none; }

.check-box {
  color: var(--base-600);
  flex-shrink: 0;
  white-space: nowrap;
  min-width: 28px;
  font-family: var(--font);
}

.check-item input:checked ~ .check-box {
  color: var(--cyan);
}

.check-label {
  color: var(--base-300);
}

.check-item input:checked ~ .check-label {
  color: var(--base-600);
  text-decoration: line-through;
  text-decoration-color: var(--base-700);
}

/* ─── Water Row ────────────────────────────────────────────────────────────── */

.water-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}

#water-check-box {
  color: var(--base-600);
  flex-shrink: 0;
  white-space: nowrap;
  min-width: 28px;
  font-family: var(--font);
  cursor: pointer;
  user-select: none;
}

#water-check-box.done { color: var(--cyan); }

.water-label {
  color: var(--base-300);
  flex-shrink: 0;
  min-width: 46px;
}

.water-label.done {
  color: var(--base-600);
  text-decoration: line-through;
  text-decoration-color: var(--base-700);
}

.water-btns {
  display: flex;
  gap: 3px;
  flex-wrap: nowrap;
  overflow-x: auto;
  margin-left: auto;
}

.water-btn {
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--base-500);
  padding: 2px 6px;
  cursor: pointer;
  white-space: nowrap;
  transition: border-color 0.1s, color 0.1s;
}

.water-btn:hover { border-color: var(--base-500); color: var(--base-200); }

.water-btn.selected {
  border-color: var(--cyan);
  color: var(--cyan);
  background: rgba(58, 169, 159, 0.08);
}

.water-btn.selected.above-target {
  border-color: var(--green);
  color: var(--green);
  background: rgba(135, 154, 57, 0.08);
}

/* ─── Energy Selector ──────────────────────────────────────────────────────── */

.energy-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 0 10px;
}

.energy-btns {
  display: flex;
  gap: 6px;
  flex: 1;
}

.energy-btn {
  flex: 1;
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--base-500);
  padding: var(--space-1) 6px;
  cursor: pointer;
  transition: border-color 0.1s, color 0.1s, background 0.1s;
}

.energy-btn:hover { border-color: var(--base-500); color: var(--base-200); }
.energy-btn.active-1, .energy-btn.active-2 { border-color: var(--red);    color: var(--red);    background: rgba(209,77,65,0.08); }
.energy-btn.active-3                        { border-color: var(--yellow); color: var(--yellow); background: rgba(208,162,21,0.08); }
.energy-btn.active-4, .energy-btn.active-5 { border-color: var(--green);  color: var(--green);  background: rgba(135,154,57,0.08); }

/* ─── Progress Bar (shared: tally + week summary) ──────────────────────────── */

.prog-bar {
  flex: 1;
  min-width: 0;
  display: flex;
  overflow: hidden;
  font-family: var(--font);
  letter-spacing: -0.02em;
  white-space: nowrap;
}

.prog-bar .filled        { color: var(--cyan);       flex-shrink: 0; overflow: hidden; white-space: nowrap; }
.prog-bar .filled.complete,
.prog-bar .filled.full   { color: var(--green); }
.prog-bar .unfilled      { flex: 1; overflow: hidden; white-space: nowrap; color: var(--base-700); }
.prog-bar .missed-bar    { flex: 1; overflow: hidden; white-space: nowrap; color: var(--red); opacity: 0.4; }
.prog-bar .rest-bar      { flex: 1; overflow: hidden; white-space: nowrap; color: var(--border); letter-spacing: 3px; }

/* ─── Tally Bar ────────────────────────────────────────────────────────────── */

.tally-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: var(--row-padding-y-sm) 0;
  border-bottom: 1px solid var(--border);
}

.tally-item:last-child { border-bottom: none; }

.tally-name {
  width: var(--label-col);
  color: var(--base-500);
  flex-shrink: 0;
}

/* .tally-bar-wrap → now uses .prog-bar (see above) */

.tally-count {
  color: var(--base-500);
  width: var(--label-col);
  text-align: right;
  white-space: nowrap;
  flex-shrink: 0;
}

/* ─── Glance ───────────────────────────────────────────────────────────────── */

.glance-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  gap: 12px;
}

.glance-item:last-child { border-bottom: none; }
.glance-item:hover .glance-value { color: var(--cyan); }

.glance-key {
  color: var(--base-500);
  flex-shrink: 0;
  width: 52px;
}

.glance-value {
  color: var(--base-300);
  flex: 1;
  transition: color 0.1s;
}

.glance-arrow {
  color: var(--base-600);
  flex-shrink: 0;
}

/* ─── Meals ────────────────────────────────────────────────────────────────── */

.day-selector {
  display: flex;
  gap: 4px;
  margin-bottom: 12px;
}

.day-btn {
  flex: 1;
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--base-600);
  padding: 5px 2px;
  cursor: pointer;
  text-align: center;
  transition: color 0.1s, border-color 0.1s;
}

.day-btn.has-data  { color: var(--base-500); }
.day-btn:hover     { color: var(--base-300); border-color: var(--base-600); }
.day-btn.active    { border-color: var(--cyan); color: var(--cyan); background: rgba(58,169,159,0.08); }
.day-btn.is-today  { border-style: dashed; }

.section-header--tight.complete { color: var(--green); }


.meal-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: var(--row-padding-y) 0;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
}

.meal-row:last-of-type { border-bottom: none; }
.meal-row:hover .meal-base   { color: var(--cyan); }
.meal-row:hover .meal-action { color: var(--cyan); }

.meal-slot {
  color: var(--base-500);
  width: var(--label-col);
  flex-shrink: 0;
  padding-top: 1px;
}

.meal-value-wrap {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.meal-base {
  color: var(--base-300);
}

.meal-base.empty { color: var(--base-700); }

.meal-add {
  color: var(--base-500);
}

.meal-action {
  color: var(--base-600);
  flex-shrink: 0;
  width: 16px;
  text-align: right;
  padding-top: 1px;
}

/* ─── Week Summary ─────────────────────────────────────────────────────────── */

.week-summary-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: var(--row-padding-y-sm) 0;
  border-bottom: 1px solid var(--border);
}

.week-summary-row:last-child { border-bottom: none; }

.week-summary-day {
  width: 14px;
  flex-shrink: 0;
  color: var(--base-500);
}

.week-summary-day.active { color: var(--cyan); }

/* .week-summary-bar → now uses .prog-bar (see above) */

.week-summary-count {
  width: 28px;
  text-align: right;
  color: var(--base-500);
  flex-shrink: 0;
}

.week-summary-count.full { color: var(--green); }
.week-summary-count.none { color: var(--base-600); }
.week-summary-count.rest { color: var(--base-600); }

/* ─── Meal Picker ──────────────────────────────────────────────────────────── */

#meal-picker {
  position: fixed;
  inset: 0;
  background: rgba(10, 9, 8, 0.9);
  display: flex;
  align-items: flex-end;
  z-index: 100;
}

#meal-picker.hidden { display: none; }

.picker-panel {
  background: var(--bg);
  border-top: 1px solid var(--border);
  width: 100%;
  max-width: 640px;
  margin: 0 auto;
  padding: 16px;
  max-height: 80vh;
  overflow-y: auto;
}

.picker-title {
  color: var(--base-500);
  letter-spacing: var(--letter-lg);
  margin-bottom: 12px;
}

.picker-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: var(--row-padding-y) 0;
  cursor: pointer;
  color: var(--base-300);
  border-bottom: 1px solid var(--border);
  transition: color 0.1s;
}

.picker-option:last-child { border-bottom: none; }
.picker-option:hover { color: var(--cyan); }
.picker-option:hover::before { color: var(--cyan); }

.picker-option::before {
  content: "( )";
  color: var(--base-600);
  flex-shrink: 0;
}

.picker-cancel {
  display: block;
  width: 100%;
  margin-top: 14px;
  padding: var(--space-2);
  background: none;
  border: 1px solid var(--border);
  color: var(--base-500);
  cursor: pointer;
  text-align: center;
  letter-spacing: var(--letter-btn);
  transition: border-color 0.1s, color 0.1s;
}

.picker-cancel:hover { border-color: var(--cyan); color: var(--cyan); }

.picker-option.picker-clear           { color: var(--base-700); }
.picker-option.picker-clear::before   { content: "   "; }
.picker-option.picker-clear:hover     { color: var(--red); }

.picker-edit-link {
  color: var(--base-600);
  cursor: pointer;
  padding: 12px 0 2px;
  text-align: center;
  border-top: 1px solid var(--border);
  margin-top: 8px;
  transition: color 0.1s;
}
.picker-edit-link:hover { color: var(--base-400); }

/* ─── Edit Section Toggle ─────────────────────────────────────────────────── */

.edit-section-toggle {
  display: flex;
  gap: 6px;
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
}

.edit-section-btn {
  background: none;
  border: 1px solid var(--border);
  color: var(--base-500);
  padding: 4px 12px;
  cursor: pointer;
  transition: border-color 0.1s, color 0.1s;
}

.edit-section-btn.active {
  border-color: var(--cyan);
  color: var(--cyan);
}

.edit-section-btn:not(.active):hover {
  border-color: var(--base-500);
  color: var(--base-300);
}

/* ─── Picker Edit Mode ─────────────────────────────────────────────────────── */

.edit-option-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
}

.edit-option-name {
  flex: 1;
  color: var(--base-300);
}

/* Shared base for borderless icon-style action buttons */
.icon-btn {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--base-600);
  flex-shrink: 0;
  transition: color 0.1s;
}

.edit-sort-btn   { padding: 2px 3px; }
.edit-remove-btn { padding: 2px 4px; }
.edit-sort-btn:hover   { color: var(--base-400); }
.edit-remove-btn:hover { color: var(--red); }

.edit-empty {
  color: var(--base-500);
  padding: 10px 0;
  text-align: center;
}

.edit-add-row {
  display: flex;
  gap: 8px;
  padding: 12px 0 8px;
  align-items: center;
  border-top: 1px solid var(--border);
  margin-top: 4px;
}

.edit-add-row .text-input { flex: 1; }

.picker-back {
  display: block;
  width: 100%;
  padding: 8px;
  background: none;
  border: 1px solid var(--border);
  color: var(--base-500);
  cursor: pointer;
  text-align: center;
  margin-top: 4px;
  transition: border-color 0.1s, color 0.1s;
}
.picker-back:hover { border-color: var(--cyan); color: var(--cyan); }

/* ─── Move Screen ──────────────────────────────────────────────────────────── */

.move-future {
  color: var(--base-500);
  padding: 10px 0 4px;
}

.check-optional {
  color: var(--base-600);
}

/* Inherits all section-header base styles; only overrides margin and suppresses left rule */
.round-header {
  margin: 14px 0 6px;
}
.round-header::before { display: none; }

.week-summary-count.missed { color: var(--red); }

/* ─── Move: round dots ─────────────────────────────────────────────────────── */

.round-dots {
  display: flex;
  gap: 8px;
  margin-left: auto;
  flex-shrink: 0;
}

.round-dot {
  background: none;
  border: none;
  color: var(--base-600);
  cursor: pointer;
  padding: 0 2px;
  transition: color 0.1s;
  line-height: 1;
}

.round-dot.done  { color: var(--cyan); }
.round-dot:hover { color: var(--base-300); }

/* ─── Lately: view + metric switchers ──────────────────────────────────────── */

.lately-views {
  display: flex;
  gap: 4px;
  margin-bottom: 6px;
}

.lately-metrics {
  display: flex;
  gap: 4px;
  margin-bottom: 16px;
}

.lately-btn,
.lately-metric-btn {
  flex: 1;
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--base-500);
  padding: 4px 4px;
  cursor: pointer;
  text-align: center;
  transition: color 0.1s, border-color 0.1s;
}

.lately-btn:hover,
.lately-metric-btn:hover  { color: var(--base-300); border-color: var(--base-600); }

.lately-btn.active        { border-style: dashed; border-color: var(--cyan); color: var(--cyan); }
.lately-metric-btn.active { border-style: dashed; border-color: var(--cyan); color: var(--cyan); }

.lately-metrics.muted .lately-metric-btn {
  opacity: 0.3;
  pointer-events: none;
}

/* ─── Lately: score classes (text + subtle bg — used in week row & calendar) ── */

.score-future { color: var(--base-700); }
.score-0      { color: var(--base-700); }
.score-low    { color: var(--red);    background: rgba(209, 77,  65, 0.28); }
.score-2      { color: var(--orange); background: rgba(218,112,  44, 0.28); }
.score-mid    { color: var(--yellow); background: rgba(208,162,  21, 0.28); }
.score-high   { color: var(--green);  background: rgba(135,154,  57, 0.28); }
.score-peak   { color: var(--cyan);   background: rgba( 58,169, 159, 0.28); }

/* ─── Lately: weekly table ─────────────────────────────────────────────────── */


/* ─── Lately: monthly calendar ─────────────────────────────────────────────── */

.cal-legend {
  display: flex;
  gap: 4px;
  margin-bottom: 10px;
}

.cal-legend span {
  flex: 1;
  text-align: center;
  padding: 2px 0;
  border-radius: 0;
}

.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 3px;
}

.cal-head {
  text-align: center;
  color: var(--base-600);
  padding: 4px 0 6px;
}

.cal-cell {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--base-700);
  border-radius: 0;
}

.cal-cell.cal-today {
  outline: 1px solid var(--cyan);
  outline-offset: -1px;
}

/* ─── Lately: quarterly + yearly heatmap (vertical) ───────────────────────── */

/* heatmap cells: no text, vivid solid backgrounds */
.hm-cell              { border-radius: 0; background: var(--surface); }
.hm-cell.score-future { background: var(--bg); border: 1px solid var(--border); }
.hm-cell.score-0      { background: var(--surface); }
.hm-cell.score-low    { background: rgba(209, 77,  65, 0.80); }
.hm-cell.score-2      { background: rgba(218,112,  44, 0.80); }
.hm-cell.score-mid    { background: rgba(208,162,  21, 0.80); }
.hm-cell.score-high   { background: rgba(135,154,  57, 0.80); }
.hm-cell.score-peak   { background: rgba( 58,169, 159, 0.80); }

.hm-vert {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.hm-vert-row {
  display: grid;
  grid-template-columns: 26px repeat(7, 1fr);
  gap: 2px;
  align-items: center;
}

.hm-vert-label {
  color: var(--base-700);
  white-space: nowrap;
  overflow: hidden;
  display: flex;
  align-items: center;
}

.hm-vert-day {
  text-align: center;
  color: var(--base-600);
  padding-bottom: 3px;
}

.hm-vert-qtr .hm-cell,
.hm-vert-qtr .hm-vert-label { height: 16px; }

.hm-vert-yr .hm-cell,
.hm-vert-yr .hm-vert-label  { height: 10px; }
.hm-vert-yr .hm-vert-label  { overflow: visible; }

.hm-vert-wk .hm-vert-row    { grid-template-columns: 64px repeat(7, 1fr); }
.hm-vert-wk .hm-cell,
.hm-vert-wk .hm-vert-label  { height: 22px; }

/* ─── Move: Schedule ───────────────────────────────────────────────────────── */

.schedule-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: var(--row-padding-y) 0;
  border-bottom: 1px solid var(--border);
}

.schedule-row:last-child { border-bottom: none; }

.schedule-day {
  width: 28px;
  flex-shrink: 0;
  color: var(--base-500);
}

.schedule-day.is-today { color: var(--cyan); }

.schedule-label {
  flex: 1;
  color: var(--base-600);
}

.schedule-label.rest { color: var(--base-700); }

.schedule-label-input {
  flex: 1;
  width: 100%;
  max-width: none;
  background: none;
  border: none;
  border-bottom: 1px solid var(--border);
  color: var(--base-200);
  outline: none;
  padding: 2px 0;
}

.schedule-type {
  color: var(--base-500);
  flex-shrink: 0;
  cursor: pointer;
  background: none;
  border: 1px solid var(--border);
  padding: var(--space-1) 6px;
  transition: border-color 0.1s, color 0.1s;
}

.schedule-type:hover  { border-color: var(--base-500); color: var(--base-300); }
.schedule-type.active { border-color: var(--cyan);     color: var(--cyan); }

/* ─── Review Screen ────────────────────────────────────────────────────────── */

.review-form { display: flex; flex-direction: column; gap: 16px; }

.review-question { display: flex; flex-direction: column; gap: 6px; }

.review-q-label { color: var(--base-500); }

.review-options { display: flex; gap: 6px; flex-wrap: wrap; }

.review-opt {
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--base-500);
  padding: var(--space-1) 14px;
  cursor: pointer;
  transition: border-color 0.1s, color 0.1s;
}

.review-opt:hover { border-color: var(--base-500); color: var(--base-200); }
.review-opt.selected { border-color: var(--cyan); color: var(--cyan); background: rgba(58,169,159,0.06); }

.review-notes {
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--base-200);
  padding: 8px;
  width: 100%;
  resize: vertical;
  min-height: 60px;
}

.review-notes:focus {
  outline: none;
  border-color: var(--cyan);
}

.rv-empty {
  color: var(--base-500);
  padding: 10px 0;
}

.rv-card {
  padding: var(--row-padding-y) 0;
  border-bottom: 1px solid var(--border);
}
.rv-card:last-child { border-bottom: none; }

.rv-date {
  color: var(--base-500);
  margin-bottom: 6px;
}

.rv-fields {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.rv-field {
  display: flex;
  align-items: center;
  gap: 5px;
}

.rv-label {
  color: var(--base-500);
}

.rv-tag          { font-family: var(--font); }
.rv-yes          { color: var(--green);  }
.rv-mostly       { color: var(--cyan);   }
.rv-sortof       { color: var(--yellow); }
.rv-no           { color: var(--red);    }
.rv-none         { color: var(--base-600); }

.rv-notes {
  margin-top: var(--space-1);
  color: var(--base-500);
}

/* ─── Button ───────────────────────────────────────────────────────────────── */

.btn {
  background: var(--surface);
  border: 1px solid var(--base-700);
  color: var(--base-300);
  padding: 7px var(--screen-pad);
  cursor: pointer;
  letter-spacing: var(--letter-btn);
  transition: border-color 0.1s, background 0.1s, color 0.1s;
}

.btn:hover { background: var(--border); border-color: var(--cyan); color: var(--cyan); }
.btn:disabled { opacity: 0.35; cursor: not-allowed; }

.btn-row {
  display: flex;
  gap: 8px;
  margin-top: 14px;
  flex-wrap: wrap;
}

/* ─── Text Input ───────────────────────────────────────────────────────────── */

.text-input {
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--base-200);
  padding: 7px 10px;
  width: 100%;
  max-width: 260px;
}

.text-input:focus {
  outline: none;
  border-color: var(--cyan);
}


/* ─── Sync indicator ───────────────────────────────────────────────────────── */

#sync-status {
  position: fixed;
  bottom: 50px;
  right: 12px;
  color: var(--base-600);
  pointer-events: none;
}

#sync-status.syncing { color: var(--yellow); }
#sync-status.saved   { color: var(--green);  }

/* ─── Responsive ───────────────────────────────────────────────────────────── */

@media (max-width: 400px) {
  .water-btn { padding: 2px 4px; }
}