/* --- GLOBAL DESIGN TOKENS --- */
:root {
  --bg-app: #F2F2F7;
  --bg-card: #FFFFFF;
  --text-main: #1C1C1E;
  --text-muted: #8E8E93;
  --brand-green: #2E7D32;
  --brand-light: #E8F5E9;
  --accent-blue: #007AFF;
  --accent-red: #FF3B30;
  --border-color: #E5E5EA;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background-color: var(--bg-app);
  color: var(--text-main);
  margin: 0;
  padding: 16px 16px 90px 16px;
  -webkit-font-smoothing: antialiased;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* WHY #app-root NEEDS AN EXPLICIT WIDTH, because getting this wrong is subtle
   and it has already bitten once (2.12.1).

   `body` is a column flex container with `align-items: center`. That centres its
   children, but it also means they are NOT stretched across the cross axis —
   each one is sized to fit its own contents unless it says otherwise. The
   splash / sign-in / garden-form screens say otherwise: `.fullscreen-view` sets
   `width: 100%`. `#app-root` never did, so it has always been shrink-to-fit.

   It looked correct for a year purely by accident: the header contained the
   fixed string "🌱 What Gardening Today?", which is wide enough to prop the
   whole container open to full width. Replacing that title with the current
   garden's name in 2.12 removed the prop, and the app silently began sizing
   itself to whatever its widest content happened to be — narrower on My Garden
   than on Today, and changing again when you switched to a garden with a longer
   name. Content that must never be narrower than the screen should say so
   itself, not rely on a caption to hold the door open. */
#app-root {
  width: 100%;
}

.app-container {
  width: 100%;
  max-width: 440px;
  margin: 0 auto;   /* centres the column once the screen is wider than 440px */
}

/* --- GENERIC UTILITY --- */
.hidden { display: none !important; }

/* --- TYPOGRAPHY --- */
h1, h2, h3 { margin: 0; font-weight: 700; }

/* The header line used to be a static app title. It is now the name of the
   garden you are looking at, and the control that switches between them — so
   the switcher costs NO vertical space above the task list. min-width:0 plus
   the truncation on .garden-switch-name is what lets a long garden name shrink
   instead of pushing the gear off the edge. */
.garden-switch-btn {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: none;
  border: none;
  padding: 6px 4px;
  margin: 0;
  font-family: inherit;
  font-size: 24px;
  font-weight: 700;
  color: var(--text-main);
  cursor: pointer;
  border-radius: 12px;
  transition: transform 0.1s ease, background-color 0.15s ease;
}

.garden-switch-btn:active { transform: scale(0.98); background-color: rgba(0, 0, 0, 0.04); }

.garden-switch-emoji { flex-shrink: 0; }

.garden-switch-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.garden-switch-chevron {
  flex-shrink: 0;
  font-size: 15px;
  color: var(--text-muted);
  line-height: 1;
}

/* --- SECTION HEADINGS (accent bar style) --- */
.section-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 24px 4px 12px 4px;
}

.section-accent-bar {
  width: 4px;
  height: 22px;
  background: var(--brand-green);
  border-radius: 2px;
  flex-shrink: 0;
}

.section-title {
  font-size: 20px;
  margin: 0;
  color: var(--text-main);
}

.form-instruction {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  margin: 20px 0 8px 4px;
  font-weight: 600;
}

/* --- WEATHER WIDGET MODULE --- */
.weather-widget {
  background: linear-gradient(135deg, #4CAF50, var(--brand-green));
  color: #FFFFFF;
  border-radius: 18px;
  padding: 24px 20px;
  margin-bottom: 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 24px rgba(46, 125, 50, 0.15);
  text-align: center;
}

.weather-widget h1 { font-size: 42px; line-height: 1; margin-bottom: 8px; display: flex; align-items: center; gap: 10px; }
.weather-widget p { margin: 0; font-size: 15px; font-weight: 500; opacity: 0.95; }

/* --- APP LEAF CARDS (SECTIONS) --- */
.app-card {
  background: var(--bg-card);
  border-radius: 16px;
  padding: 16px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
  margin-bottom: 12px;
  box-sizing: border-box;
}

/* --- TODAY VIEW TASK CARDS --- */
#task-container { display: flex; flex-direction: column; gap: 10px; }

/* Wraps each card so the Hide action can sit underneath it, revealed by a
   sideways swipe. overflow:hidden keeps the hide action clipped to the same
   rounded shape as the card until it's dragged into view. */
.task-card-wrapper {
  position: relative;
  overflow: hidden;
  border-radius: 14px;
}

/* Sits behind the card at rest; only visible once the card is swiped left. */
.task-hide-action {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 76px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--accent-red);
}

.hide-task-btn {
  width: 100%;
  height: 100%;
  border: none;
  background: none;
  color: #FFFFFF;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.task-card {
  background: var(--bg-card);
  border-radius: 14px;
  padding: 14px 16px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-left: 4px solid var(--brand-green);
  transition: opacity 0.2s ease, transform 0.2s ease;
  position: relative;
  z-index: 1;
  touch-action: pan-y; /* let vertical scrolling through; JS handles horizontal swipe */
  cursor: pointer; /* the whole card is tappable to expand/collapse the description */
}

.task-info { min-width: 0; } /* lets the description shrink/wrap instead of stretching the card wider */
.task-info h3 { font-size: 15px; color: var(--text-main); margin-bottom: 4px; }

/* Wraps the description so the fade-out overlay below can be positioned
   against it without disturbing the -webkit-line-clamp truncation itself. */
.task-description-wrap { position: relative; }

/* Collapsed by default: clamped to 3 lines, with a reserved min-height so every
   card is the same height at rest regardless of how short its own description
   is. -webkit-line-clamp is what actually cuts the text off after 3 lines. */
.task-instruction {
  font-size: 12px;
  color: var(--text-muted);
  margin: 0;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  min-height: calc(1.4em * 3);
}

/* A soft fade over the last line, hinting the text is cut off without saying
   so in words. Only shown on cards that actually have more text, and only
   while collapsed — once expanded there's nothing left to fade into. */
.task-fade {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1.4em;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0), var(--bg-card));
  opacity: 0;
  pointer-events: none;
}

.task-card.has-more:not(.expanded) .task-fade { opacity: 1; }

/* Expanded: the clamp is lifted and the full description shows, which is what
   makes the card grow taller and push the ones below it down the page. */
.task-card.expanded .task-instruction {
  -webkit-line-clamp: unset;
  overflow: visible;
}

/* Chevron expand hint: a single small arrow rather than a repeated word, in
   keeping with the app's icon-led style elsewhere (✓, ⚙️, ✕). It reserves its
   line height (visibility:hidden, not display:none) so every collapsed card
   is the same height even when it has nothing to expand, and only becomes
   visible on cards where the description is genuinely cut off. It flips
   upside-down when the card is expanded. */
.task-expand-toggle {
  display: block;
  width: 100%;
  text-align: left;
  margin-top: 2px;
  padding: 0;
  border: none;
  background: none;
  font-size: 12px;
  line-height: 1.4;
  color: rgba(46, 125, 50, 0.65); /* a lighter, softer version of --brand-green */
  cursor: pointer;
  visibility: hidden;
  transition: transform 0.2s ease;
}

.task-card.has-more .task-expand-toggle { visibility: visible; }
.task-card.expanded .task-expand-toggle { transform: rotate(180deg); }

.task-action-btn {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid #D1D1D6;
  background: var(--bg-card);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  font-size: 14px;
  color: transparent;
  flex-shrink: 0;
  margin-left: 12px;
}

.task-action-btn.completed {
  border-color: var(--brand-green);
  background: var(--brand-green);
  color: #FFFFFF;
}

/* A completed task fades to half-opacity as its "done" signal. Remove its
   swipe-to-reveal Hide action so it can't show through the translucent card. */
.task-card-wrapper.completed .task-hide-action {
  display: none;
}

/* --- MY GARDEN: CATEGORY TILES --- */
.category-tiles-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.tile-btn {
  background: var(--bg-card);
  border: 2px solid var(--border-color);
  border-radius: 14px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.tile-btn.full-width { grid-column: 1 / -1; }
.tile-btn:active { transform: scale(0.97); }
.tile-btn.selected { border-color: var(--brand-green); background-color: var(--brand-light); }
.tile-icon { font-size: 26px; }
.tile-label { font-size: 13px; font-weight: 600; color: var(--text-main); }

/* --- MY GARDEN: CATALOGUE SEARCH --- */
/* Searches every category, not just the selected tile — so you can find
   something without knowing which tile it lives under. */
.pill-search-wrapper {
  position: relative;
  margin-bottom: 10px;
}

.pill-search-input {
  width: 100%;
  padding: 10px 36px;
  border: 2px solid var(--border-color);
  border-radius: 12px;
  font-size: 14px;
  outline: none;
  background: var(--bg-card);
  color: var(--text-main);
  box-sizing: border-box;
  -webkit-appearance: none;
  transition: border-color 0.2s ease;
}

.pill-search-input:focus { border-color: var(--brand-green); }

.pill-search-icon {
  position: absolute;
  left: 11px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 13px;
  opacity: 0.5;
  pointer-events: none;
}

.pill-search-clear {
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  font-size: 14px;
  color: var(--text-muted);
  cursor: pointer;
  padding: 8px 10px;
  line-height: 1;
}

/* --- MY GARDEN: SUB ITEM PILLS --- */
/* A block container, not a flex row: it now holds heading groups, each of which
   wraps its own pills. */
.pill-cloud {
  min-height: 40px;
  background: #F2F2F7;
  padding: 12px 10px;
  border-radius: 12px;
  border: 1px solid var(--border-color);
  box-sizing: border-box;
}

.pill-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.pill-group + .pill-group { margin-top: 16px; }

.pill-group-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  margin: 0 0 8px 2px;
}

.pill-placeholder {
  font-size: 13px;
  color: var(--text-muted);
  text-align: center;
  padding: 6px 0;
}

.item-pill {
  background: var(--bg-card);
  border: 1px solid #D1D1D6;
  border-radius: 18px;
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 500;
  color: #3A3A3C;
  cursor: pointer;
  transition: all 0.15s ease;
  text-align: left;
}

.item-pill.selected {
  background: var(--brand-green);
  color: #FFFFFF;
  border-color: var(--brand-green);
}

/* The Latin name sits inline, in brackets, and only appears on the handful of
   blueprints where the common name is genuinely ambiguous. */
.item-pill-latin {
  font-style: italic;
  font-weight: 400;
  color: var(--text-muted);
}

.item-pill.selected .item-pill-latin { color: rgba(255, 255, 255, 0.8); }

/* Search results carry the tile they belong to on a second line, because a
   match can come from a category other than the one currently selected. */
.item-pill--result {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  border-radius: 14px;
  padding: 6px 12px;
}

.item-pill-source {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--text-muted);
}

.item-pill--result.selected .item-pill-source { color: rgba(255, 255, 255, 0.85); }

/* --- FORM CONTROLS --- */
.modern-input-wrapper input {
  width: 100%;
  padding: 12px 14px;
  border: 2px solid var(--border-color);
  border-radius: 12px;
  font-size: 15px;
  outline: none;
  background: var(--bg-card);
  transition: border-color 0.2s ease;
  box-sizing: border-box;
}

.modern-input-wrapper input:focus { border-color: var(--brand-green); }

.primary-action-btn {
  width: 100%;
  background-color: var(--brand-green);
  color: #FFFFFF;
  font-weight: 600;
  border: none;
  padding: 14px;
  border-radius: 12px;
  font-size: 15px;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(46, 125, 50, 0.15);
  margin-top: 16px;
  transition: background-color 0.15s ease, transform 0.1s ease;
}

.primary-action-btn:active { transform: scale(0.98); }
.primary-action-btn:disabled { background-color: #D1D1D6; color: #8E8E93; box-shadow: none; cursor: not-allowed; }

/* --- CURRENT INVENTORY DISPLAY --- */
/* Tinted container that ties the whole "My Garden" list together */
.garden-container {
  background: var(--brand-light);
  border: 1px solid #D4EAD6;
  border-radius: 16px;
  padding: 6px 14px 10px 14px;
  box-sizing: border-box;
}

.inventory-group { padding: 12px 0; }
.inventory-group:first-child { padding-top: 6px; }

/* Divider between categories lives on the container, not on each title */
.inventory-group + .inventory-group {
  border-top: 1px solid #C9E2CB;
}

.inventory-group-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--brand-green);
  margin-bottom: 10px;
}

.inventory-item-card {
  background: var(--bg-card);
  border-radius: 10px;
  padding: 12px;
  margin-bottom: 8px;
  font-size: 14px;
  color: var(--text-main);
  box-shadow: 0 1px 4px rgba(0,0,0,0.03);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.inventory-item-card:last-child { margin-bottom: 0; }

.inventory-item-custom-name { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.inventory-item-meta { font-size: 11px; color: var(--text-muted); margin-top: 2px; font-family: monospace; }

.remove-asset-btn {
  background: none;
  border: 1.5px solid var(--border-color);
  border-radius: 8px;
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 600;
  padding: 5px 10px;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
  flex-shrink: 0;
}

.remove-asset-btn.confirming {
  background-color: var(--accent-red);
  border-color: var(--accent-red);
  color: #FFFFFF;
}

.remove-asset-btn.removed {
  background-color: var(--brand-green);
  border-color: var(--brand-green);
  color: #FFFFFF;
}

/* --- APP NAVIGATION BAR --- */
.app-nav-bar {
  display: flex;
  justify-content: space-around;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(20px);
  border-top: 1px solid var(--border-color);
  padding: 8px 0 max(8px, env(safe-area-inset-bottom));
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
}

.nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  color: var(--text-muted);
  font-size: 10px;
  font-weight: 600;
  text-decoration: none;
  background: none;
  border: none;
  cursor: pointer;
  transition: color 0.15s ease;
  flex: 1;
}

.nav-item.active { color: var(--brand-green); }
.nav-item-icon { font-size: 20px; margin-bottom: 2px; }

/* --- PAGE VIEW TOGGLE UTILITY --- */
.view-section { display: none; }
.view-section.active-view { display: block; }
.loading-spinner-box { text-align: center; padding: 24px; color: var(--text-muted); font-size: 14px; }

/* --- WEATHER WIDGET --- */
.weather-main {
  display: flex;
  align-items: center;
  gap: 8px;
}

.weather-icon {
  width: 40px;
  height: 40px;
}

/* --- HEADER + SETTINGS GEAR ICON --- */
.app-header {
  display: flex;
  align-items: center;
  margin: 10px 4px 20px 4px;
  gap: 10px;
}

.settings-icon-btn {
  background: none;
  border: none;
  font-size: 20px;
  line-height: 1;
  color: var(--text-main);
  cursor: pointer;
  padding: 6px;
  flex-shrink: 0;
}

.settings-icon-btn:active { transform: scale(0.9); }

/* --- UNDO TOAST (shown briefly after hiding a task) --- */
.undo-toast {
  position: fixed;
  left: 50%;
  bottom: 84px;
  transform: translateX(-50%) translateY(16px);
  max-width: calc(100% - 32px);
  background: #1C1C1E;
  color: #FFFFFF;
  padding: 12px 16px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  gap: 18px;
  font-size: 14px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
  z-index: 1100;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.undo-toast.visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}

/* The same banner doubles as a plain notice ("Mum's garden deleted"), where
   there is nothing to undo. */
.undo-toast.notice .undo-toast-btn { display: none; }

.undo-toast-btn {
  background: none;
  border: none;
  color: var(--accent-blue);
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  padding: 4px 6px;
  flex-shrink: 0;
  white-space: nowrap;
}

/* --- HIDDEN TASKS MODAL (opened via the settings gear icon) --- */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  z-index: 1200;
}

.modal-overlay.hidden { display: none; }

.modal-panel {
  width: 100%;
  max-width: 440px;
  max-height: 80vh;
  overflow-y: auto;
  background: var(--bg-app);
  border-radius: 20px 20px 0 0;
  padding: 20px 16px calc(20px + env(safe-area-inset-bottom));
  box-sizing: border-box;
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.modal-close-btn {
  background: none;
  border: none;
  font-size: 18px;
  color: var(--text-muted);
  cursor: pointer;
  padding: 4px 8px;
}

/* --- GARDEN SWITCHER SHEET (opened from the header) --- */
.garden-switch-list { display: flex; flex-direction: column; gap: 8px; }

.garden-row {
  width: 100%;
  background: var(--bg-card);
  border: 1.5px solid transparent;
  border-radius: 12px;
  padding: 14px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.03);
  transition: transform 0.1s ease, border-color 0.15s ease;
  box-sizing: border-box;
}

.garden-row:active { transform: scale(0.99); }

/* The one you're in, marked two ways — a tint and a tick — so it reads at a
   glance and does not rely on colour alone. */
.garden-row.current {
  border-color: var(--brand-green);
  background: var(--brand-light);
}

.garden-row-text { min-width: 0; display: flex; flex-direction: column; gap: 2px; }

.garden-row-name {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-main);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.garden-row-meta { font-size: 11px; color: var(--text-muted); }

.garden-row-tick {
  flex-shrink: 0;
  width: 20px;
  text-align: center;
  color: var(--brand-green);
  font-weight: 700;
}

.garden-add-row {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--border-color);
}

.garden-add-row .secondary-action-btn { margin-top: 0; }

/* --- "ONE GARDEN FOR NOW" --- */
/* Deliberately quiet: no badge, no lock, no crown, no colour that says
   "upgrade". It is an explanation, not an advertisement, because there is
   nothing to sell yet. Sits under the button rather than replacing it, so the
   control it explains is still visible next to the explanation. */
.garden-gate-note {
  margin-top: 12px;
  padding: 12px 14px;
  border-radius: 10px;
  background-color: var(--bg-app);
}

.garden-gate-title {
  margin: 0 0 4px 0;
  font-size: 15px;
  font-weight: 700;
  color: var(--text-main);
}

.garden-gate-body {
  margin: 0;
  font-size: 14px;
  line-height: 1.45;
  color: var(--text-muted);
}

/* --- SETTINGS GROUPS --- */
/* Settings holds two different kinds of thing now: this garden, and the
   account. Naming the garden is what makes "Hidden tasks" and "Delete this
   garden" unambiguous — both were always per-garden, neither ever said so. */
.settings-group-title {
  font-size: 17px;
  font-weight: 700;
  color: var(--text-main);
  margin: 4px 0 12px 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.settings-group-title--account {
  margin-top: 26px;
  padding-top: 18px;
  border-top: 1px solid var(--border-color);
}

.settings-row-btn {
  width: 100%;
  background: var(--bg-card);
  border: none;
  border-radius: 12px;
  padding: 14px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-main);
  text-align: left;
  cursor: pointer;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.03);
  transition: transform 0.1s ease;
}

.settings-row-btn:active { transform: scale(0.99); }

.hidden-tasks-list { display: flex; flex-direction: column; gap: 8px; }

.hidden-task-card {
  background: var(--bg-card);
  border-radius: 10px;
  padding: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.03);
}

.hidden-task-info h4 { font-size: 14px; margin: 0 0 2px 0; }
.hidden-task-info p { font-size: 11px; color: var(--text-muted); margin: 0; }

.restore-task-btn {
  background: none;
  border: 1.5px solid var(--brand-green);
  color: var(--brand-green);
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  padding: 5px 10px;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
}

.restore-task-btn:active { transform: scale(0.96); }

/* --- SIGN OUT (in the settings modal) --- */
.signout-row {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--border-color);
}

.signout-btn {
  width: 100%;
  background: none;
  border: 1.5px solid var(--accent-red);
  color: var(--accent-red);
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  padding: 11px;
  cursor: pointer;
}

.signout-btn:active { transform: scale(0.99); }

/* --- DELETE ACCOUNT (settings modal, then its own confirmation panel) ---
   The entry point is deliberately quiet — plain text, muted, sitting last —
   because it is irreversible and should never be the thing a thumb finds by
   accident. All the weight lives on the confirmation panel instead. */
.danger-row {
  margin-top: 10px;
  text-align: center;
}

/* The garden group can show two of these (Leave / Delete). Stacked, not
   side by side, so neither becomes a 50%-width target next to the other. */
.danger-row .danger-text-btn + .danger-text-btn { margin-top: 0; }

/* Scoped to .danger-row on purpose. These buttons also carry .text-btn, which
   is declared LATER in this file and paints it accent-blue — so an unscoped
   .danger-text-btn loses the cascade and "Delete my account" has in fact been
   rendering as a bright blue call-to-action, which is the opposite of what the
   comment above intends. One extra selector puts that right, for the account
   entry and for the two garden entries that now sit beside it. */
.danger-row .danger-text-btn {
  color: var(--text-muted);
  font-size: 13px;
}

.danger-row .danger-text-btn:active { color: var(--accent-red); }

.delete-lede {
  font-size: 14px;
  font-weight: 600;
  color: var(--accent-red);
  margin: 0 0 14px 0;
  line-height: 1.4;
}

.delete-impact { display: flex; flex-direction: column; gap: 8px; }

.delete-impact-line {
  background: var(--bg-card);
  border-radius: 10px;
  border-left: 3px solid var(--border-color);
  padding: 11px 12px;
  margin: 0;
  font-size: 13px;
  line-height: 1.45;
}

/* Deleted vs kept, distinguishable at a glance without reading. */
.delete-impact-line.gone { border-left-color: var(--accent-red); }
.delete-impact-line.keep { border-left-color: var(--brand-green); }

.delete-note {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.45;
  margin: 14px 0 0 0;
}

/* "Keep my account" is the prominent one, and comes first. Confirming
   destruction should never be the easiest thing on the screen. */
.delete-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 16px;
}

.delete-actions .primary-action-btn { margin: 0; }

/* --- FULL-SCREEN AUTH / SETUP / SPLASH VIEWS --- */
.fullscreen-view {
  width: 100%;
  max-width: 440px;
  min-height: 70vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.auth-card {
  width: 100%;
  background: var(--bg-card);
  border-radius: 18px;
  padding: 28px 22px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
  box-sizing: border-box;
}

.auth-brand { font-size: 44px; text-align: center; line-height: 1; }
.auth-title { font-size: 22px; text-align: center; margin: 10px 0 6px; }
.auth-subtitle { font-size: 14px; color: var(--text-muted); text-align: center; margin: 0 0 18px; line-height: 1.45; }
.auth-sent { font-size: 14px; color: var(--text-main); margin: 4px 0 6px; line-height: 1.45; }
.auth-error { color: var(--accent-red); font-size: 13px; margin: 10px 2px 0; min-height: 1em; line-height: 1.4; }

.text-btn {
  background: none;
  border: none;
  color: var(--accent-blue);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  padding: 10px;
  width: 100%;
  margin-top: 8px;
}

/* --- GOOGLE SIGN-IN BUTTON --- */
.google-signin-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: #FFFFFF;
  color: #3C4043;
  font-weight: 600;
  font-size: 15px;
  border: 1.5px solid var(--border-color);
  padding: 13px;
  border-radius: 12px;
  cursor: pointer;
  transition: background-color 0.15s ease, transform 0.1s ease;
}

.google-signin-btn:active { transform: scale(0.98); background-color: #F8F8F8; }
.google-signin-btn:disabled { opacity: 0.6; cursor: not-allowed; }
.google-signin-icon { width: 18px; height: 18px; flex-shrink: 0; }


.secondary-action-btn {
  width: 100%;
  background: var(--bg-card);
  color: var(--brand-green);
  font-weight: 600;
  border: 2px solid var(--brand-green);
  padding: 12px;
  border-radius: 12px;
  font-size: 15px;
  cursor: pointer;
  margin-top: 10px;
  transition: transform 0.1s ease;
}

.secondary-action-btn:active { transform: scale(0.98); }
.secondary-action-btn:disabled { border-color: #D1D1D6; color: #8E8E93; cursor: not-allowed; }

.setup-or {
  text-align: center;
  color: var(--text-muted);
  font-size: 12px;
  margin: 14px 0;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.setup-location-confirm {
  background: var(--brand-light);
  color: var(--brand-green);
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 14px;
  font-weight: 600;
  text-align: center;
  margin: 14px 0 0;
}

/* A nudge, not a rule: you may legitimately have two gardens called "Home"
   for a while, but you should be told before they land in the switcher
   looking identical. */
.setup-name-note {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.45;
  margin: 8px 2px 0;
}

/* Cancel sits under the primary action and is deliberately unemphatic: on the
   first run it is not shown at all, because there is nowhere to go back to. */
#setup-cancel-btn { margin-top: 2px; }