/* Bloom · signup.css — self-contained; do NOT import reg.css.
   Design: variant E (warm, split card, day-agenda preview).
   Class prefix: sg- (signup) to avoid collision with bloom.css globals. */

:root {
  --sg-primary: #2D6A4F;
  --sg-primary-hover: #235640;
  --sg-accent: #C8895A;
  --sg-accent-strong: #A85B2C;
  --sg-bg: #F6F5F1;
  --sg-surface: #fff;
  --sg-surface-alt: #F1F0EB;
  --sg-border: #E6E4DC;
  --sg-border-strong: #D8D5CA;
  --sg-text: #22231F;
  --sg-muted: #74746B;
  --sg-faint: #9C9C92;
  --sg-primary-light: #52B788;
  --sg-st-confirmed: #2D6A4F;
  --sg-sh1: 0 1px 2px rgba(34,35,31,.04), 0 1px 1px rgba(34,35,31,.03);
  --sg-sh2: 0 1px 3px rgba(34,35,31,.05), 0 4px 12px rgba(34,35,31,.05);
  --sg-sh3: 0 2px 6px rgba(34,35,31,.06), 0 12px 28px rgba(34,35,31,.08);
  --sg-ring: 0 0 0 3px rgba(45,106,79,.18);
}

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

/* ── Body ── */
.sg-body {
  font-family: 'Outfit', 'Segoe UI', system-ui, sans-serif;
  color: var(--sg-text);
  background: var(--sg-bg);
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 32px 20px 56px;
}

/* ── Card: two-column grid ── */
.sg-card {
  width: 100%;
  max-width: 1000px;
  background: var(--sg-surface);
  border: 1px solid var(--sg-border);
  border-radius: 14px;
  box-shadow: var(--sg-sh3);
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr 1fr;
}

/* ── Form (left panel) ── */
.sg-form {
  padding: 30px 34px 32px;
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--sg-border);
}

.sg-eyebrow {
  font-family: ui-monospace, monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--sg-accent-strong);
}

.sg-h1 {
  font-family: 'Plus Jakarta Sans', 'Segoe UI', system-ui, sans-serif;
  font-weight: 800;
  font-size: 22px;
  letter-spacing: -.03em;
  color: var(--sg-text);
  margin-top: 9px;
}

.sg-desc {
  color: var(--sg-muted);
  font-size: 13.5px;
  margin-top: 5px;
  line-height: 1.45;
}

/* ── Error banner ── */
.sg-error {
  margin-top: 14px;
  padding: 10px 13px;
  background: #FCEFEC;
  border: 1px solid #F3CFC8;
  border-radius: 8px;
  color: #C0392B;
  font-size: 13.5px;
  line-height: 1.45;
}

/* ── Fields ── */
.sg-field {
  margin-top: 15px;
}

.sg-field label {
  display: block;
  font-size: 12.5px;
  font-weight: 600;
  margin-bottom: 6px;
  color: var(--sg-text);
}

.sg-hint {
  font-weight: 400;
  color: var(--sg-faint);
  font-size: 11.5px;
  margin-left: 5px;
}

.sg-field input {
  width: 100%;
  font-family: 'Outfit', 'Segoe UI', system-ui, sans-serif;
  font-size: 14.5px;
  color: var(--sg-text);
  background: var(--sg-surface);
  border: 1px solid var(--sg-border-strong);
  border-radius: 8px;
  padding: 12px 13px;
  min-height: 46px;
  transition: border .15s, box-shadow .15s;
}

.sg-field input::placeholder {
  color: var(--sg-faint);
}

.sg-field input:focus {
  outline: none;
  border-color: var(--sg-primary);
  box-shadow: var(--sg-ring);
}

/* ── Two-column row (email + phone) ── */
.sg-two {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 13px;
}

/* ── Submit button ── */
.sg-btn {
  margin-top: 22px;
  width: 100%;
  font-family: 'Outfit', 'Segoe UI', system-ui, sans-serif;
  font-weight: 700;
  font-size: 15px;
  color: #fff;
  background: var(--sg-primary);
  border: none;
  border-radius: 8px;
  min-height: 50px;
  cursor: pointer;
  box-shadow: var(--sg-sh1);
  transition: background .15s, box-shadow .15s;
}

.sg-btn:hover {
  background: var(--sg-primary-hover);
  box-shadow: var(--sg-sh2);
}

/* ── Fine print ── */
.sg-fine {
  color: var(--sg-faint);
  font-size: 11.5px;
  line-height: 1.5;
  margin-top: 12px;
  text-align: center;
}

.sg-fine a {
  color: var(--sg-muted);
}

/* ── Alt login line ── */
.sg-alt {
  margin-top: 14px;
  font-size: 13px;
  color: var(--sg-muted);
  text-align: center;
}

.sg-alt a {
  color: var(--sg-primary);
  font-weight: 600;
  text-decoration: none;
}

/* ── Preview (right panel) ── */
.sg-preview {
  background: var(--sg-surface-alt);
  padding: 20px 22px;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

/* browser chrome strip */
.sg-chrome {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: -20px -22px 16px;
  padding: 11px 16px;
  border-bottom: 1px solid var(--sg-border);
  background: var(--sg-surface);
}

.sg-chrome-dots {
  display: flex;
  gap: 6px;
}

.sg-chrome-dots i {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--sg-border-strong);
}

.sg-chrome-pill {
  font-size: 11px;
  font-weight: 700;
  color: var(--sg-muted);
  background: var(--sg-surface-alt);
  border: 1px solid var(--sg-border);
  border-radius: 999px;
  padding: 3px 11px;
  margin-left: 4px;
}

.sg-chrome-live {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 10.5px;
  color: var(--sg-muted);
  font-weight: 600;
}

.sg-chrome-live i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--sg-primary-light);
  box-shadow: 0 0 0 3px rgba(82,183,136,.22);
}

/* Preview heading */
.sg-pv-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}

.sg-pv-lab {
  font-family: ui-monospace, monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--sg-faint);
  display: block;
  margin-bottom: 3px;
}

.sg-pv-title {
  font-family: 'Plus Jakarta Sans', 'Segoe UI', system-ui, sans-serif;
  font-weight: 800;
  font-size: 17px;
  letter-spacing: -.02em;
  color: var(--sg-text);
}

.sg-pv-stat {
  font-family: ui-monospace, monospace;
  font-size: 12px;
  font-weight: 700;
  color: var(--sg-muted);
  white-space: nowrap;
  margin-top: 7px;
}

.sg-pv-stat b {
  color: var(--sg-primary);
}

/* ── Agenda card ── */
.sg-ag {
  background: var(--sg-surface);
  border: 1px solid var(--sg-border);
  border-radius: 11px;
  overflow: hidden;
}

/* Event rows */
.sg-ev {
  display: grid;
  grid-template-columns: 52px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 11px 13px;
  border-top: 1px solid var(--sg-surface-alt);
  border-left: 2px solid var(--sg-st-confirmed);
}

.sg-ev:first-child {
  border-top: none;
}

.sg-ev .sg-ev-tm {
  font-family: ui-monospace, monospace;
  font-size: 12px;
  font-weight: 700;
  color: var(--sg-muted);
}

.sg-ev .sg-ev-bd {
  min-width: 0;
}

.sg-ev .sg-ev-svc {
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: -.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sg-ev .sg-ev-meta {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 3px;
  font-size: 11.5px;
  color: var(--sg-muted);
}

.sg-ev .sg-ev-who {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sg-mst {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex: 0 0 auto;
}

.sg-mst i {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  color: #fff;
  font-size: 8px;
  font-weight: 800;
  display: grid;
  place-items: center;
  font-family: 'Outfit', 'Segoe UI', system-ui, sans-serif;
  font-style: normal;
}

.sg-ev .sg-ev-sum {
  font-family: ui-monospace, monospace;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--sg-text);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* Free slot row */
.sg-ev.free {
  border-left-color: var(--sg-border-strong);
  background: repeating-linear-gradient(135deg, transparent, transparent 7px, rgba(0,0,0,.012) 7px, rgba(0,0,0,.012) 14px);
}

.sg-ev.free .sg-ev-svc {
  color: var(--sg-faint);
  font-weight: 600;
}

.sg-ev.free .sg-ev-plus {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  border: 1px dashed var(--sg-border-strong);
  color: var(--sg-faint);
  display: grid;
  place-items: center;
}

.sg-ev.free .sg-ev-plus svg {
  width: 13px;
  height: 13px;
}

/* Preview footer */
.sg-pv-foot {
  margin-top: auto;
  padding-top: 14px;
}

.sg-note {
  font-size: 12px;
  color: var(--sg-muted);
  line-height: 1.45;
  text-align: center;
}

.sg-pv-social {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 12px;
  padding-top: 11px;
  border-top: 1px solid var(--sg-border);
  font-size: 11.5px;
  color: var(--sg-muted);
}

.sg-pv-social i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--sg-primary-light);
  box-shadow: 0 0 0 3px rgba(82,183,136,.2);
  flex: 0 0 auto;
  font-style: normal;
}

/* ── Single-column card (sent/verify/password pages) ── */
.sg-card.sg-single {
  grid-template-columns: 1fr;
  max-width: 480px;
}

.sg-card.sg-single .sg-form {
  border-right: none;
}

/* ── Info banner ── */
.sg-info {
  margin-top: 14px;
  padding: 10px 13px;
  background: #EAF6ED;
  border: 1px solid #B7DFC2;
  border-radius: 8px;
  color: #1E6B34;
  font-size: 13.5px;
  line-height: 1.45;
}

/* ── Dev affordance box ── */
.sg-dev {
  margin-top: 16px;
  padding: 12px 14px;
  background: #FFF8EB;
  border: 1.5px dashed #C8895A;
  border-radius: 8px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--sg-text);
}

.sg-dev a {
  color: var(--sg-accent-strong);
  font-weight: 600;
  word-break: break-all;
}

.sg-dev code {
  display: block;
  margin-top: 6px;
  font-size: 11px;
  color: var(--sg-muted);
  word-break: break-all;
}

/* ── Responsive ── */
@media (max-width: 760px) {
  .sg-card {
    grid-template-columns: 1fr;
  }

  .sg-form {
    border-right: none;
    border-bottom: 1px solid var(--sg-border);
  }

  .sg-two {
    grid-template-columns: 1fr;
  }

  .sg-body {
    padding: 16px 16px 48px;
  }
}