/* ═══════════════════════════════════════════════════════════════
   MHDSRIP — Components
   Building blocks. Every view composes from these.
   ═══════════════════════════════════════════════════════════════ */

/* ── BUTTONS ────────────────────────────────────────────────── */

/* Default .btn = primary (accent). One brand colour for every save/next/submit
   in the app. Variants opt in via .btn-ghost, .btn-quiet, .btn-dark, .btn-warn. */
.btn {
  --btn-bg:     var(--accent);
  --btn-fg:     #fff;
  --btn-border: transparent;
  --btn-shadow: 0 1px 2px color-mix(in srgb, var(--accent) 30%, transparent),
                0 10px 24px color-mix(in srgb, var(--accent) 18%, transparent);

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  min-height: 52px;
  padding: var(--s-3) var(--s-6);
  font-family: var(--font-body);
  font-size: var(--t-body);
  font-weight: var(--fw-strong);
  letter-spacing: var(--track-tight);
  line-height: 1;
  color: var(--btn-fg);
  background: var(--btn-bg);
  border: 1px solid var(--btn-border);
  border-radius: var(--r-md);
  box-shadow: var(--btn-shadow);
  cursor: pointer;
  text-decoration: none;
  transition:
    transform var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-fast) var(--ease-out),
    background var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out);
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  white-space: nowrap;
}
.btn:hover {
  --btn-bg: var(--accent-deep);
  transform: translateY(-1px);
  box-shadow: 0 2px 4px color-mix(in srgb, var(--accent) 30%, transparent),
              0 16px 36px color-mix(in srgb, var(--accent) 24%, transparent);
}
.btn:active  { transform: translateY(0); box-shadow: var(--shadow-xs); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.5; pointer-events: none; }

/* .btn-primary = alias for default, kept for template clarity */
.btn-primary { --btn-bg: var(--accent); --btn-fg: #fff; }

.btn-ghost {
  --btn-bg: transparent;
  --btn-fg: var(--ink-soft);
  --btn-border: var(--line-strong);
  --btn-shadow: none;
}
.btn-ghost:hover {
  --btn-bg: var(--accent-wash);
  --btn-fg: var(--accent-deep);
  --btn-border: var(--accent);
  box-shadow: none;
}

/* Opt-in dark variant — use deliberately, not as default */
.btn-dark {
  --btn-bg: var(--ink);
  --btn-fg: var(--bg-paper);
  --btn-shadow: var(--shadow-sm);
}
.btn-dark:hover { --btn-bg: color-mix(in srgb, var(--ink) 85%, #000); }

.btn-quiet {
  --btn-bg: transparent;
  --btn-fg: var(--ink-soft);
  --btn-shadow: none;
}
.btn-quiet:hover { --btn-fg: var(--accent); }

.btn-warn {
  --btn-bg: var(--warn);
  --btn-fg: #fff;
}

.btn-fb {
  --btn-bg: #1877F2;
  --btn-fg: #fff;
  --btn-shadow: 0 1px 2px rgba(24,119,242,0.3), 0 8px 20px rgba(24,119,242,0.14);
}
.btn-fb:hover { --btn-bg: #145ec3; }

.or-divider {
  display: flex; align-items: center; gap: var(--s-3);
  color: var(--ink-quiet);
  font-size: var(--t-eyebrow);
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  margin: var(--s-5) 0 var(--s-4);
}
.or-divider::before, .or-divider::after {
  content: ''; flex: 1; height: 1px; background: var(--line);
}

.btn-block { display: flex; width: 100%; }
.btn-sm { min-height: 40px; padding: var(--s-2) var(--s-4); font-size: var(--t-sm); border-radius: var(--r-sm); }
.btn-lg { min-height: 60px; padding: var(--s-4) var(--s-7); font-size: var(--t-body-lg); }
.btn-pill { border-radius: var(--r-pill); }

/* ── CARDS ──────────────────────────────────────────────────── */

.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--s-6);
  box-shadow: var(--shadow-sm);
}
.card-sm { padding: var(--s-4); border-radius: var(--r-md); }
.card-lg { padding: var(--s-7); border-radius: var(--r-xl); }
.card-elevated { box-shadow: var(--shadow-md); border-color: transparent; }
.card-bare { background: transparent; border: 0; box-shadow: none; padding: 0; }
.card-dashed { border-style: dashed; background: transparent; box-shadow: none; }

@media (min-width: 720px) {
  .card { padding: var(--s-7); }
  .card-lg { padding: var(--s-8); }
}

/* ── FIELDS ─────────────────────────────────────────────────── */

.field { display: flex; flex-direction: column; gap: var(--s-2); margin-bottom: var(--s-4); }
.field label,
label.field-label {
  font-size: var(--t-sm);
  font-weight: var(--fw-strong);
  color: var(--ink-soft);
  letter-spacing: var(--track-normal);
}

.input,
input[type="text"], input[type="email"], input[type="password"],
input[type="date"], input[type="number"], input[type="search"],
input[type="tel"], input[type="url"],
textarea, select {
  display: block;
  width: 100%;
  min-height: 52px;
  padding: var(--s-3) var(--s-4);
  font-family: var(--font-body);
  font-size: var(--t-body-lg);
  line-height: 1.4;
  color: var(--ink);
  background: var(--card);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  outline: none;
  transition:
    border-color var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-fast) var(--ease-out),
    background var(--dur-fast) var(--ease-out);
}
textarea { min-height: 112px; resize: vertical; padding: var(--s-3) var(--s-4); }

.input:hover,
input:hover, textarea:hover, select:hover {
  border-color: var(--accent);
}

.input:focus,
input:focus, textarea:focus, select:focus {
  border-color: var(--accent);
  box-shadow: var(--ring);
}

.input::placeholder,
input::placeholder, textarea::placeholder {
  color: var(--ink-quiet);
  font-weight: var(--fw-body);
}

select { appearance: none; -webkit-appearance: none; padding-right: var(--s-7); cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink-soft) 50%),
                    linear-gradient(-45deg, transparent 50%, var(--ink-soft) 50%);
  background-position: calc(100% - 20px) 55%, calc(100% - 14px) 55%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat; }

.field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-3);
}
@media (max-width: 520px) { .field-row { grid-template-columns: 1fr; } }

.field-hint  { font-size: var(--t-xs); color: var(--ink-quiet); }
.field-error { color: var(--warn); font-size: var(--t-sm); }

/* Unified "(optional)" marker — use inside <label> after the main label text.
   Replaces the ad-hoc inline-styled spans scattered across forms. */
.optional-label {
  font-weight: var(--fw-body);
  color: var(--ink-quiet);
  font-size: 0.92em;
  margin-left: 0.35em;
}

/* ── PILLS & BADGES ─────────────────────────────────────────── */

.pill {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  padding: var(--s-1) var(--s-3);
  background: var(--accent-soft);
  color: var(--accent-deep);
  border-radius: var(--r-pill);
  font-size: var(--t-xs);
  font-weight: var(--fw-strong);
  letter-spacing: var(--track-loose);
  line-height: 1;
}
.pill-neutral { background: var(--bg-soft); color: var(--ink-soft); }
.pill-gold    { background: var(--gold-10); color: var(--gold-50); }
.pill-heart   { background: var(--heart-10); color: var(--heart); }
.pill-warn    { background: var(--warn-soft); color: var(--warn); }

.chip {
  display: inline-flex;
  align-items: center;
  padding: var(--s-1) var(--s-3);
  background: rgba(255,255,255,0.2);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #fff;
  border-radius: var(--r-pill);
  font-size: var(--t-eyebrow);
  font-weight: var(--fw-strong);
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
}

/* ── REASSURE ───────────────────────────────────────────────── */

.reassure {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  margin-top: var(--s-5);
  padding: var(--s-2) var(--s-4);
  background: var(--bg-soft);
  color: var(--ink-muted);
  font-size: var(--t-sm);
  border-radius: var(--r-pill);
  width: fit-content;
  margin-inline: auto;
}
.reassure::before {
  content: '✓';
  color: var(--accent);
  font-weight: var(--fw-bold);
}

/* ── ERROR ──────────────────────────────────────────────────── */

.error,
.alert-error {
  display: flex;
  align-items: flex-start;
  gap: var(--s-2);
  padding: var(--s-3) var(--s-4);
  background: var(--warn-soft);
  color: var(--warn);
  border-radius: var(--r-md);
  font-size: var(--t-sm);
  margin-bottom: var(--s-4);
  border: 1px solid color-mix(in srgb, var(--warn) 25%, transparent);
}
.error::before,
.alert-error::before {
  content: '!';
  flex-shrink: 0;
  width: 18px; height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--warn);
  color: #fff;
  border-radius: var(--r-circle);
  font-weight: var(--fw-bold);
  font-size: 12px;
  line-height: 1;
}

/* ── PROGRESS RAIL ──────────────────────────────────────────── */

.rail { margin-bottom: var(--s-6); }
.rail-top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: var(--s-2);
  font-size: var(--t-eyebrow);
  font-weight: var(--fw-strong);
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--ink-quiet);
}
.rail-bar { display: flex; gap: var(--s-1); }
.rail-bar .seg {
  flex: 1;
  height: 3px;
  background: var(--line);
  border-radius: var(--r-pill);
  transition: background var(--dur-base) var(--ease-out);
}
.rail-bar .seg.done   { background: var(--accent-light); }
.rail-bar .seg.active { background: var(--accent); }

/* ── WIZARD SHELL ───────────────────────────────────────────── */

.shell {
  display: grid;
  grid-template-rows: auto 1fr auto;
  min-height: 100dvh;
  position: relative;
  overflow: hidden;
  background: var(--bg);
}
.shell > * { position: relative; z-index: 1; }

/* Ambient layer — subtle photo wash; step-specific overrides tint it */
.shell::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: image-set(url('/images/homescreenbackdrop-1200.webp') type('image/webp'), url('/images/homescreenbackdrop.jpg'));
  background-size: cover;
  background-position: center 30%;
  opacity: 0.12;
  z-index: 0;
  pointer-events: none;
  transition: opacity var(--dur-slow) var(--ease-out), filter var(--dur-slow) var(--ease-out);
}

.wizard {
  padding: var(--s-6) var(--gutter);
  width: 100%;
  max-width: 480px;
  margin-inline: auto;
  align-self: center;
}
.wizard.wide { max-width: 620px; }
@media (min-width: 720px) { .wizard { padding: var(--s-8) var(--gutter); } }

.wizard .card { padding: var(--s-6); }
@media (min-width: 720px) {
  .wizard .card { padding: var(--s-7) var(--s-7); }
}

.wizard .heading-primary,
.wizard .title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 5vw, 3rem);
  line-height: 1.05;
  letter-spacing: -0.025em;
  font-weight: var(--fw-display);
  font-variation-settings: 'opsz' 96, 'SOFT' 100;
  margin-bottom: var(--s-3);
  color: var(--ink);
}
.wizard .heading-primary em,
.wizard .title em {
  font-style: italic;
  color: var(--accent-deep);
  font-variation-settings: 'opsz' 96, 'SOFT' 100;
}
.wizard .subtitle {
  font-size: var(--t-body-lg);
  line-height: var(--lh-body);
  color: var(--ink-soft);
  margin-bottom: var(--s-6);
}

/* ── TOP BRAND BAR ──────────────────────────────────────────── */

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--s-4) var(--gutter);
  background: color-mix(in srgb, var(--bg-paper) 75%, transparent);
  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  border-bottom: 1px solid var(--line-hair);
  position: sticky;
  top: 0;
  z-index: 50;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  text-decoration: none;
  color: var(--ink);
  transition: opacity var(--dur-fast) var(--ease-out);
}
.brand:hover { opacity: 0.7; }
.brand img { width: 36px; height: 36px; object-fit: contain; }
.brand-name {
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 600;
  letter-spacing: var(--track-tight);
  color: var(--accent-deep);
  font-variation-settings: 'opsz' 24;
}
.brand-name .rip { color: var(--accent-light); }

/* Theme switcher — refined pill, no more buttons feeling */
.theme-switch {
  display: inline-flex;
  padding: 4px;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  font-size: var(--t-xs);
}
.theme-switch button {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  padding: var(--s-1) var(--s-3);
  border-radius: var(--r-pill);
  color: var(--ink-muted);
  font-weight: var(--fw-strong);
  font-family: inherit;
  letter-spacing: var(--track-loose);
  transition: all var(--dur-fast) var(--ease-out);
  background: transparent;
  border: 0;
  cursor: pointer;
}
.theme-switch button .dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--accent);
}
.theme-switch button[data-set-theme="sky"] .dot   { background: #4cc3f1; }
.theme-switch button[data-set-theme="earth"] .dot { background: #b06a39; }
.theme-switch button[data-set-theme="social"] .dot { background: #0866FF; }
.theme-switch button:hover { color: var(--ink); }
.theme-switch button.active {
  background: var(--card);
  color: var(--ink);
  box-shadow: var(--shadow-xs);
}
.theme-switch button .theme-label {
  display: none;
}
@media (min-width: 520px) {
  .theme-switch button .theme-label { display: inline; }
}

/* ── OTP BOXES ──────────────────────────────────────────────── */

.otp-boxes {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--s-2);
  margin: var(--s-4) 0 var(--s-5);
}
.otp-boxes input {
  text-align: center;
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 4vw, 2rem);
  font-weight: var(--fw-strong);
  font-variation-settings: 'opsz' 48;
  padding: 0;
  aspect-ratio: 1 / 1;
  min-height: unset;
  letter-spacing: 0;
  border-radius: var(--r-md);
}
.otp-help { font-size: var(--t-sm); color: var(--ink-quiet); text-align: center; margin-bottom: var(--s-4); }

/* ── LIVE PREVIEW (garden name etc.) ────────────────────────── */

.preview {
  background: var(--accent-wash);
  border: 1px solid var(--accent-soft);
  border-radius: var(--r-md);
  padding: var(--s-5) var(--s-4);
  margin-bottom: var(--s-5);
  min-height: 88px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  transition: all var(--dur-base) var(--ease-out);
}
.preview .preview-kicker {
  font-size: var(--t-eyebrow);
  color: var(--accent-deep);
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  font-weight: var(--fw-strong);
  margin-bottom: var(--s-1);
}
.preview .preview-name {
  font-family: var(--font-display);
  font-size: var(--t-h2);
  color: var(--ink);
  font-weight: var(--fw-heading);
  font-variation-settings: 'opsz' 48;
}
.preview .preview-empty {
  font-family: var(--font-display);
  color: var(--ink-quiet);
  font-style: italic;
  font-variation-settings: 'opsz' 24;
}

/* ── THEME PICKER (garden feel select) ──────────────────────── */

.theme-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-2);
  margin-bottom: var(--s-5);
}
.theme-opt {
  border: 2px solid var(--line);
  border-radius: var(--r-md);
  padding: var(--s-2);
  cursor: pointer;
  text-align: center;
  background: var(--card);
  transition: all var(--dur-fast) var(--ease-out);
}
.theme-opt:hover { border-color: var(--accent-light); transform: translateY(-1px); }
.theme-opt.selected {
  border-color: var(--accent);
  background: var(--accent-wash);
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}
.theme-opt img {
  width: 100%;
  aspect-ratio: 16/10;
  object-fit: cover;
  border-radius: var(--r-sm);
  margin-bottom: var(--s-1);
}
.theme-opt span {
  font-size: var(--t-xs);
  color: var(--ink-soft);
  font-weight: var(--fw-strong);
}

/* ── BUTTON ROW ─────────────────────────────────────────────── */

.btn-row {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  margin-top: var(--s-3);
}
.btn-row .btn { width: 100%; }

/* ── STEP-CONTEXTUAL AMBIENT LAYERS ─────────────────────────── */

body[data-step="otp-start"] .shell::before  { background-position: center 20%; opacity: 0.14; }
body[data-step="otp-verify"] .shell::before { background-position: center 40%; opacity: 0.1;  filter: saturate(0.85); }
body[data-step="profile"] .shell::before    { background-position: 30% 30%;    opacity: 0.1; }
body[data-step="garden"] .shell::before     { background-position: center 60%; opacity: 0.16; }
body[data-step="branches"] .shell::before   { background-position: center 45%; opacity: 0.12; }
body[data-step="publish"] .shell::before    { background-position: center 15%; opacity: 0.2;  filter: saturate(1.15) brightness(1.05); }
body[data-step="invite"] .shell::before     { background-position: center 65%; opacity: 0.15;  filter: saturate(1.1); }

/* Foot link / sign-out */
.foot { text-align: center; padding: var(--s-5) var(--gutter); color: var(--ink-quiet); font-size: var(--t-sm); }
.foot-link { color: var(--ink-muted); }
.foot-link:hover { color: var(--accent); }

/* ── DROP ZONE (photo / file uploads) ───────────────────────── */

.drop-zone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  padding: var(--s-7) var(--s-5);
  margin-bottom: var(--s-5);
  background: var(--bg-soft);
  border: 1.5px dashed var(--line-strong);
  border-radius: var(--r-lg);
  cursor: pointer;
  text-align: center;
  color: var(--ink-soft);
  transition: all var(--dur-fast) var(--ease-out);
}
.drop-zone:hover, .drop-zone.dragover {
  border-color: var(--accent);
  background: var(--accent-wash);
  color: var(--accent);
}
.drop-zone .drop-icon {
  width: 56px; height: 56px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--card);
  color: var(--accent);
  border-radius: var(--r-circle);
  font-size: 26px;
  font-weight: 300;
  box-shadow: var(--shadow-sm);
  margin-bottom: var(--s-1);
}
.drop-zone strong {
  display: block;
  font-family: var(--font-display);
  font-size: var(--t-h3);
  font-weight: var(--fw-heading);
  color: var(--ink);
  font-variation-settings: 'opsz' 24;
}
.drop-zone .drop-hint {
  font-size: var(--t-sm);
  color: var(--ink-quiet);
}

.thumbs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: var(--s-2);
  margin-bottom: var(--s-5);
}
.thumb-item {
  position: relative;
  aspect-ratio: 1;
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--bg-soft);
  box-shadow: var(--shadow-xs);
}
.thumb-item img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.thumb-item .thumb-caption {
  position: absolute;
  inset: auto var(--s-2) var(--s-2) var(--s-2);
  font-size: var(--t-xs);
  padding: var(--s-1) var(--s-2);
  border-radius: var(--r-sm);
  border: 0;
  background: color-mix(in srgb, #fff 92%, transparent);
  backdrop-filter: blur(6px);
  color: var(--ink);
  min-height: 0;
}
.thumb-item .thumb-remove {
  position: absolute;
  top: var(--s-2); right: var(--s-2);
  width: 26px; height: 26px;
  border-radius: var(--r-circle);
  background: color-mix(in srgb, var(--ink-100) 70%, transparent);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  line-height: 1;
  border: 0;
  cursor: pointer;
}