/* Design tokens are tracked in /design.md — check there before adding a new
   one, and add it to both places together.

   Current palette is a DARK-MODE PLACEHOLDER — Bo will provide real brand
   tokens later to swap in. Only the values below should need to change. */

:root {
  color-scheme: dark;

  --color-bg: #121212;
  --color-surface: #1e1e1e;
  --color-text: #f2f2f2;
  --color-text-muted: #9a9a9a;
  --color-border: #2e2e2e;

  /* Semantic/status colors — functional feedback, not a branding choice, so
     these stay even though brand accent colors are still deferred. */
  --color-danger: #ff6b6b;
  --color-success: #6bcf7f;

  --font-sans: system-ui, -apple-system, sans-serif;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 16px;
  --space-4: 24px;

  --radius-sm: 4px;
  --radius-md: 8px;

  /* Named so .checkbox and the row-padding calc()s below share one source
     instead of a duplicated magic number. */
  --size-checkbox: 1.25rem;
}

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

body {
  margin: 0;
  background-color: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-sans);
}

/* Fixed-height flex column so the header/tab bar can stay put while
   .app-scroll-area (below) scrolls independently. height:100vh first as a
   fallback for browsers without dvh support; 100dvh (applied second, so it
   wins when supported) tracks the real visible viewport on mobile browsers
   as chrome shows/hides, which vh alone doesn't. padding-top uses the iOS
   safe-area inset so the header clears the status bar — box-sizing:border-box
   (global, above) keeps that padding inside the 100vh/dvh box instead of
   pushing #app taller than the viewport. */
#app {
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100dvh;
  padding-top: env(safe-area-inset-top);
}

/* Always the container for whichever view is currently mounted (login form /
   profile / tab content) — sits after the header/tab bar so only this
   scrolls. min-height:0 overrides flex items' default min-height:auto,
   which otherwise stops them shrinking below content size and silently
   breaks flex:1 + overflow:auto. */
.app-scroll-area {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
}

/* --- atoms --- */

.btn {
  font: inherit;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  background: transparent;
  color: var(--color-text);
  cursor: pointer;
}

.btn--primary {
  background: var(--color-text);
  color: var(--color-bg);
  border-color: var(--color-text);
}

.btn--tab {
  border: none;
  border-radius: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: var(--color-text-muted);
}

.btn--tab.is-active {
  color: var(--color-text);
  border-bottom-color: var(--color-text);
}

.btn--icon {
  padding: var(--space-1);
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-text-muted);
}

.btn--icon:hover {
  color: var(--color-danger);
}

.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.text-input {
  font: inherit;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text);
}

.text-input::placeholder {
  color: var(--color-text-muted);
}

.select {
  font: inherit;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text);
}

.textarea {
  font: inherit;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text);
  resize: vertical;
  min-height: 4.5em;
}

.textarea::placeholder {
  color: var(--color-text-muted);
}

.checkbox {
  accent-color: var(--color-text);
  width: var(--size-checkbox);
  height: var(--size-checkbox);
}

.icon {
  display: inline-flex;
  width: 1em;
  height: 1em;
}

.drag-handle {
  display: inline-flex;
  color: var(--color-text-muted);
  cursor: grab;
  /* iOS Safari: without these, a press-and-hold on the handle starts text
     selection / shows the copy callout instead of (or alongside) our drag. */
  touch-action: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

.chevron {
  display: inline-flex;
  color: var(--color-text-muted);
  cursor: pointer;
  transition: transform 0.15s ease;
}

.chevron--folded {
  transform: rotate(-90deg);
}

/* --- organisms / layout --- */

.tab-bar {
  display: flex;
  gap: var(--space-1);
  border-bottom: 1px solid var(--color-border);
  padding: 0 var(--space-2);
}

.tab-content {
  padding: var(--space-3);
  color: var(--color-text-muted);
}

.app-header {
  display: flex;
  justify-content: flex-end;
  padding: var(--space-2) var(--space-3);
}

/* --- shopping list --- */

.shopping-list {
  display: flex;
  flex-direction: column;
}

.item-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  /* Left padding shifted right by the checkbox's own width, on top of the
     existing edge clearance — more room to swipe-to-indent from the edge.
     Top/bottom bumped from var(--space-2) (8px) to a literal 10px (+4px row
     height total) — scoped here, not on the --space-2 token itself, since
     that token is shared by buttons/inputs/tab bar elsewhere. */
  padding: 10px var(--space-2) 10px calc(var(--space-4) + var(--size-checkbox));
  border-bottom: 1px solid var(--color-border);
}

.item-row__name {
  flex: 1;
  cursor: text;
  /* The name is a swipe-to-indent start point too (see shoppingList.js), and
     its pointerdown deliberately isn't preventDefault()'d there so
     tap-to-edit still works — so the callout/selection suppression has to
     live here instead, or a press-then-swipe would open iOS's text-selection
     UI first. */
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

.item-row--done .item-row__name {
  text-decoration: line-through;
  color: var(--color-text-muted);
}

.add-item-row {
  display: flex;
  align-items: center;
  padding: 10px var(--space-2) 10px calc(var(--space-4) + var(--size-checkbox));
}

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

.item-row--header .item-row__name {
  font-weight: 600;
}

.item-row--child {
  /* Same new base as .item-row (edge clearance + checkbox width), plus one
     more --space-4 to preserve the existing relative child indent amount. */
  padding-left: calc(var(--space-4) + var(--size-checkbox) + var(--space-4));
}

.item-row--dragging {
  opacity: 0.6;
  position: relative;
  z-index: 10;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

.shopping-list__toolbar {
  display: flex;
  justify-content: flex-end;
  padding: var(--space-2);
}

/* Set on <body> only while a drag is in progress (shoppingList.js) — without
   this, iOS Safari can still pan the whole page or trigger its edge-swipe
   "back" gesture even though touch-action:none is set on the handle itself. */
body.is-dragging {
  touch-action: none;
  overscroll-behavior: none;
}

/* --- dinner plan --- */

.dinner-plan {
  display: flex;
  flex-direction: column;
}

.dinner-day {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--color-border);
}

.dinner-day__label {
  color: var(--color-text-muted);
}

/* Only applied when the day has a recipe assigned (see dinnerDayRow.js) —
   tapping opens it in the Recipe database tab. */
.dinner-day__label--linked {
  cursor: pointer;
  text-decoration: underline dotted;
  text-underline-offset: 2px;
}

.dinner-day--today {
  padding-top: var(--space-3);
  padding-bottom: var(--space-3);
}

.dinner-day--today .dinner-day__label {
  color: var(--color-text);
  font-size: 1.25rem;
  font-weight: 600;
}

/* --- recipe database --- */

.recipe-list {
  display: flex;
  flex-direction: column;
}

.recipe-list__row {
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--color-border);
  cursor: pointer;
}

.recipe-editor {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-3);
  max-width: 480px;
}

.recipe-editor__heading {
  margin: 0;
  font-size: 1.25rem;
}

.recipe-editor__field {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  font-size: 0.875rem;
  color: var(--color-text-muted);
}

.recipe-editor__section {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.recipe-editor__section-heading {
  margin: 0;
  font-size: 1rem;
}

.recipe-editor__step {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.recipe-editor__step-number {
  color: var(--color-text-muted);
  min-width: 1.5em;
}

.recipe-editor__actions {
  display: flex;
  gap: var(--space-2);
}

.editable-list-line {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.editable-list-line .text-input {
  flex: 1;
}

/* --- pages: login / profile --- */

.login-form,
.profile-view {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-3);
  max-width: 320px;
}

.login-form__heading,
.profile-view__heading {
  margin: 0 0 var(--space-2);
  font-size: 1.25rem;
}

.profile-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.profile-form__field {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  font-size: 0.875rem;
  color: var(--color-text-muted);
}

.profile-form__actions {
  display: flex;
  gap: var(--space-2);
}

.form-error {
  color: var(--color-danger);
  font-size: 0.875rem;
  margin: 0;
}

.form-success {
  color: var(--color-success);
  font-size: 0.875rem;
  margin: 0;
}