.resize-observer[data-v-b329ee4c]{position:absolute;top:0;left:0;z-index:-1;width:100%;height:100%;border:none;background-color:transparent;pointer-events:none;display:block;overflow:hidden;opacity:0}.resize-observer[data-v-b329ee4c] object{display:block;position:absolute;top:0;left:0;height:100%;width:100%;overflow:hidden;pointer-events:none;z-index:-1}.v-popper__popper{z-index:10000;top:0;left:0;outline:none}.v-popper__popper.v-popper__popper--hidden{visibility:hidden;opacity:0;transition:opacity .15s,visibility .15s;pointer-events:none}.v-popper__popper.v-popper__popper--shown{visibility:visible;opacity:1;transition:opacity .15s}.v-popper__popper.v-popper__popper--skip-transition,.v-popper__popper.v-popper__popper--skip-transition>.v-popper__wrapper{transition:none!important}.v-popper__backdrop{position:absolute;top:0;left:0;width:100%;height:100%;display:none}.v-popper__inner{position:relative;box-sizing:border-box;overflow-y:auto}.v-popper__inner>div{position:relative;z-index:1;max-width:inherit;max-height:inherit}.v-popper__arrow-container{position:absolute;width:10px;height:10px}.v-popper__popper--arrow-overflow .v-popper__arrow-container,.v-popper__popper--no-positioning .v-popper__arrow-container{display:none}.v-popper__arrow-inner,.v-popper__arrow-outer{border-style:solid;position:absolute;top:0;left:0;width:0;height:0}.v-popper__arrow-inner{visibility:hidden;border-width:7px}.v-popper__arrow-outer{border-width:6px}.v-popper__popper[data-popper-placement^=top] .v-popper__arrow-inner,.v-popper__popper[data-popper-placement^=bottom] .v-popper__arrow-inner{left:-2px}.v-popper__popper[data-popper-placement^=top] .v-popper__arrow-outer,.v-popper__popper[data-popper-placement^=bottom] .v-popper__arrow-outer{left:-1px}.v-popper__popper[data-popper-placement^=top] .v-popper__arrow-inner,.v-popper__popper[data-popper-placement^=top] .v-popper__arrow-outer{border-bottom-width:0;border-left-color:transparent!important;border-right-color:transparent!important;border-bottom-color:transparent!important}.v-popper__popper[data-popper-placement^=top] .v-popper__arrow-inner{top:-2px}.v-popper__popper[data-popper-placement^=bottom] .v-popper__arrow-container{top:0}.v-popper__popper[data-popper-placement^=bottom] .v-popper__arrow-inner,.v-popper__popper[data-popper-placement^=bottom] .v-popper__arrow-outer{border-top-width:0;border-left-color:transparent!important;border-right-color:transparent!important;border-top-color:transparent!important}.v-popper__popper[data-popper-placement^=bottom] .v-popper__arrow-inner{top:-4px}.v-popper__popper[data-popper-placement^=bottom] .v-popper__arrow-outer{top:-6px}.v-popper__popper[data-popper-placement^=left] .v-popper__arrow-inner,.v-popper__popper[data-popper-placement^=right] .v-popper__arrow-inner{top:-2px}.v-popper__popper[data-popper-placement^=left] .v-popper__arrow-outer,.v-popper__popper[data-popper-placement^=right] .v-popper__arrow-outer{top:-1px}.v-popper__popper[data-popper-placement^=right] .v-popper__arrow-inner,.v-popper__popper[data-popper-placement^=right] .v-popper__arrow-outer{border-left-width:0;border-left-color:transparent!important;border-top-color:transparent!important;border-bottom-color:transparent!important}.v-popper__popper[data-popper-placement^=right] .v-popper__arrow-inner{left:-4px}.v-popper__popper[data-popper-placement^=right] .v-popper__arrow-outer{left:-6px}.v-popper__popper[data-popper-placement^=left] .v-popper__arrow-container{right:-10px}.v-popper__popper[data-popper-placement^=left] .v-popper__arrow-inner,.v-popper__popper[data-popper-placement^=left] .v-popper__arrow-outer{border-right-width:0;border-top-color:transparent!important;border-right-color:transparent!important;border-bottom-color:transparent!important}.v-popper__popper[data-popper-placement^=left] .v-popper__arrow-inner{left:-2px}.v-popper--theme-tooltip .v-popper__inner{background:rgba(0,0,0,.8);color:#fff;border-radius:6px;padding:7px 12px 6px}.v-popper--theme-tooltip .v-popper__arrow-outer{border-color:#000c}.v-popper--theme-dropdown .v-popper__inner{background:#fff;color:#000;border-radius:6px;border:1px solid #ddd;box-shadow:0 6px 30px #0000001a}.v-popper--theme-dropdown .v-popper__arrow-inner{visibility:visible;border-color:#fff}.v-popper--theme-dropdown .v-popper__arrow-outer{border-color:#ddd}
/* Shared auth styles, rebuilt from mockup/auth.html. The CSS tokens
   (--bg, --panel, --ink, --accent, --serif, etc.) are app-provided —
   each app declares them in its global stylesheet. The class names are
   namespaced with `pk-auth-` so they don't collide with app-local CSS. */

.pk-auth {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
}

/* Soft brand glow centered behind the card */
.pk-auth::before {
  content: "";
  position: absolute;
  top: -20%;
  left: 50%;
  transform: translateX(-50%);
  width: 1100px;
  height: 1100px;
  border-radius: 50%;
  background: radial-gradient(
    ellipse at center,
    rgba(196, 99, 60, 0.16) 0%,
    rgba(196, 99, 60, 0.06) 35%,
    transparent 65%
  );
  filter: blur(40px);
  pointer-events: none;
  z-index: 0;
}

.pk-auth-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 28px 24px 32px;
  position: relative;
  z-index: 2;
}

/* Topbar: brand left, contextual link right */
.pk-auth-topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  max-width: 480px;
  width: 100%;
  margin: 0 auto;
}
.pk-auth-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--ink);
}
.pk-auth-brand .mark {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
}
.pk-auth-brand .mark svg {
  width: 100%;
  height: 100%;
  display: block;
}
.pk-auth-brand .name {
  font-family: var(--serif);
  font-weight: 450;
  font-size: 22px;
  letter-spacing: -0.01em;
}
.pk-auth-topright {
  font-size: 14px;
  color: var(--ink-dim);
}
.pk-auth-topright a {
  color: var(--accent);
  font-weight: 500;
  margin-left: 6px;
}
.pk-auth-topright a:hover {
  color: var(--accent-deep);
}

/* Form wrap centers the card vertically */
.pk-auth-form-wrap {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 48px 0 32px;
}
.pk-auth-form {
  width: 100%;
  max-width: 440px;
  margin: 0 auto;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: 40px 40px 36px;
  box-shadow:
    0 40px 80px -40px rgba(60, 40, 20, 0.18),
    0 14px 30px -16px rgba(60, 40, 20, 0.08);
}
.pk-auth-eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 16px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.pk-auth-eyebrow .step {
  color: var(--ink-mute);
  font-weight: 400;
}
.pk-auth-title {
  font-family: var(--serif);
  font-weight: 380;
  font-size: clamp(34px, 3.6vw, 44px);
  line-height: 1.06;
  letter-spacing: -0.018em;
  margin: 0;
  max-width: 16ch;
  color: var(--ink);
  font-feature-settings: "ss01";
}
.pk-auth-title i {
  font-style: italic;
  color: var(--accent-deep);
  font-weight: 400;
}
.pk-auth-lede {
  margin: 14px 0 0;
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink-dim);
  max-width: 42ch;
}

/* SSO buttons (Google + Apple side-by-side) */
.pk-auth-sso {
  margin-top: 28px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

/* Divider */
.pk-auth-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 22px 0;
  color: var(--ink-mute);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.pk-auth-divider::before,
.pk-auth-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line);
}

/* Form fields */
.pk-auth-fields {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.pk-auth-field {
  position: relative;
}
.pk-auth-field label {
  display: block;
  margin-bottom: 6px;
  font-size: 13px;
  color: var(--ink-dim);
  font-weight: 500;
}
.pk-auth-field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.pk-auth-input {
  width: 100%;
  height: 52px;
  padding: 0 16px;
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  background: var(--panel);
  color: var(--ink);
  font-size: 15px;
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  font-family: inherit;
}
.pk-auth-input::placeholder {
  color: var(--ink-mute);
}
.pk-auth-input:hover {
  border-color: var(--ink);
}
.pk-auth-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 4px var(--line-focus);
}

/* Password wrapper + toggle */
.pk-auth-pw-wrap {
  position: relative;
}
.pk-auth-pw-toggle {
  position: absolute;
  top: 0;
  right: 0;
  height: 52px;
  width: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-mute);
  border: 0;
  background: transparent;
  cursor: pointer;
}
.pk-auth-pw-toggle:hover {
  color: var(--accent);
}
.pk-auth-pw-toggle svg {
  width: 18px;
  height: 18px;
}

/* Inline meta row (forgot link etc) */
.pk-auth-field-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 8px;
  font-size: 12px;
}
.pk-auth-field-meta a {
  color: var(--accent);
  font-weight: 500;
}
.pk-auth-field-meta a:hover {
  color: var(--accent-deep);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Password strength bar */
.pk-auth-pw-strength {
  display: flex;
  gap: 4px;
  margin-top: 10px;
}
.pk-auth-pw-strength .bar {
  flex: 1;
  height: 3px;
  border-radius: 999px;
  background: var(--line);
  transition: background 0.2s ease;
}
.pk-auth-pw-strength.s1 .bar:nth-child(-n + 1) { background: var(--bad); }
.pk-auth-pw-strength.s2 .bar:nth-child(-n + 2) { background: var(--warn); }
.pk-auth-pw-strength.s3 .bar:nth-child(-n + 3) { background: var(--warn); }
.pk-auth-pw-strength.s4 .bar:nth-child(-n + 4) { background: var(--good); }
.pk-auth-pw-strength-label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-top: 6px;
}
.pk-auth-pw-strength-label.s1 { color: var(--bad); }
.pk-auth-pw-strength-label.s2,
.pk-auth-pw-strength-label.s3 { color: var(--warn); }
.pk-auth-pw-strength-label.s4 { color: var(--good); }

/* Checkbox row */
.pk-auth-check-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 14px;
  font-size: 13px;
  color: var(--ink-dim);
  line-height: 1.5;
}
.pk-auth-check-row input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.pk-auth-check-row .box {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  border: 1.5px solid var(--line-strong);
  border-radius: 5px;
  background: var(--panel);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent-ink);
  margin-top: 1px;
  transition: all 0.15s ease;
}
.pk-auth-check-row label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
}
.pk-auth-check-row input:checked + .box {
  background: var(--accent);
  border-color: var(--accent);
}
.pk-auth-check-row input:focus + .box {
  box-shadow: 0 0 0 4px var(--line-focus);
}
.pk-auth-check-row .box svg {
  width: 12px;
  height: 12px;
  opacity: 0;
}
.pk-auth-check-row input:checked + .box svg {
  opacity: 1;
}
.pk-auth-check-row a {
  color: var(--accent);
  font-weight: 500;
}
.pk-auth-check-row a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Submit button */
.pk-auth-submit {
  width: 100%;
  height: 52px;
  margin-top: 22px;
  background: var(--accent);
  color: var(--accent-ink);
  border: 0;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: background 0.15s ease, transform 0.05s ease;
  cursor: pointer;
  font-family: inherit;
}
.pk-auth-submit:hover:not(:disabled) {
  background: var(--accent-deep);
}
.pk-auth-submit:active:not(:disabled) {
  transform: scale(0.99);
}
.pk-auth-submit:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.pk-auth-submit svg {
  width: 16px;
  height: 16px;
}

/* Inline error block above the submit */
.pk-auth-error {
  margin: 6px 0 0;
  font-size: 13px;
  color: var(--bad);
  line-height: 1.5;
}

/* Footer link row inside the card */
.pk-auth-alt {
  margin-top: 22px;
  text-align: center;
  font-size: 14px;
  color: var(--ink-dim);
}
.pk-auth-alt a {
  color: var(--accent);
  font-weight: 500;
}
.pk-auth-alt a:hover {
  color: var(--accent-deep);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Back link (verify, forgot) */
.pk-auth-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--ink-dim);
  margin-bottom: 18px;
  font-weight: 500;
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  font-family: inherit;
}
.pk-auth-back:hover {
  color: var(--accent);
}
.pk-auth-back svg {
  width: 14px;
  height: 14px;
}

/* OTP grid */
.pk-auth-otp {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 10px;
  margin-top: 24px;
}
.pk-auth-otp input {
  height: 60px;
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  background: var(--panel);
  text-align: center;
  font-family: var(--serif);
  font-weight: 400;
  font-size: 26px;
  color: var(--ink);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  outline: none;
}
.pk-auth-otp input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 4px var(--line-focus);
}
.pk-auth-otp input.filled {
  background: var(--panel-warm, color-mix(in srgb, var(--accent) 6%, var(--panel)));
  border-color: var(--accent);
}

.pk-auth-otp-resend {
  text-align: center;
  margin-top: 18px;
  font-size: 13px;
  color: var(--ink-dim);
}
.pk-auth-otp-resend a {
  color: var(--accent);
  font-weight: 500;
}
.pk-auth-otp-resend .timer {
  font-family: var(--mono);
  color: var(--ink-mute);
}

/* Success state (forgot-sent, done) */
.pk-auth-success {
  text-align: center;
  padding: 8px 0;
}
.pk-auth-success .icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: rgba(107, 138, 79, 0.12);
  color: var(--good);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 22px;
}
.pk-auth-success .icon svg {
  width: 32px;
  height: 32px;
}
.pk-auth-success .pk-auth-title {
  margin-left: auto;
  margin-right: auto;
  max-width: 18ch;
}
.pk-auth-success .pk-auth-lede {
  margin-left: auto;
  margin-right: auto;
  max-width: 38ch;
}
.pk-auth-success .pk-auth-submit {
  margin-top: 28px;
}
.pk-auth-success .pk-auth-alt {
  margin-top: 18px;
}

/* Micro footer */
.pk-auth-micro-foot {
  max-width: 480px;
  width: 100%;
  margin: 0 auto;
  padding-top: 20px;
  display: flex;
  justify-content: center;
  gap: 24px;
  font-size: 12px;
  color: var(--ink-mute);
}
.pk-auth-micro-foot a {
  color: var(--ink-mute);
}
.pk-auth-micro-foot a:hover {
  color: var(--accent);
}

/* SSO button shell — used by GoogleSignInButton + AppleSignInButton when
   they render native variants and as the wrapper class for the web GIS
   target. */
.pk-auth-sso-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 48px;
  padding: 0 18px;
  border-radius: 12px;
  border: 1px solid var(--line-strong);
  background: var(--panel);
  color: var(--ink);
  font-size: 14px;
  font-weight: 500;
  width: 100%;
  cursor: pointer;
  transition: all 0.15s ease;
  font-family: inherit;
}
.pk-auth-sso-btn:hover:not(:disabled) {
  border-color: var(--ink);
  background: var(--panel-warm, color-mix(in srgb, var(--accent) 4%, var(--panel)));
}
.pk-auth-sso-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.pk-auth-sso-btn svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

@media (max-width: 640px) {
  .pk-auth-main {
    padding: 22px 20px 28px;
  }
  .pk-auth-form {
    padding: 32px 24px 28px;
    border-radius: 18px;
  }
  .pk-auth-form-wrap {
    padding: 24px 0 24px;
  }
  .pk-auth-topright {
    font-size: 13px;
  }
}

@media (max-width: 480px) {
  .pk-auth-sso {
    grid-template-columns: 1fr;
  }
  .pk-auth-otp {
    gap: 6px;
  }
  .pk-auth-otp input {
    height: 54px;
    font-size: 22px;
  }
  .pk-auth-title {
    font-size: 30px;
  }
  .pk-auth-field-row {
    grid-template-columns: 1fr;
  }
  /* Plain background on narrow screens — feels more app-native */
  .pk-auth-form {
    border: 0;
    box-shadow: none;
    background: transparent;
    padding: 8px 0 0;
  }
}

.google-btn[data-v-18451edc] {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}
.google-btn-target[data-v-18451edc] {
  width: 100%;
  display: flex;
  justify-content: center;
  min-height: 44px;
}
.google-btn-native[data-v-18451edc] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  width: 100%;
  min-height: 44px;
  padding: var(--space-2) var(--space-4);
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-medium);
  font-size: var(--font-size-m);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  transition: background var(--transition-fast), border-color var(--transition-fast);
}
.google-btn-native[data-v-18451edc]:hover:not(:disabled) {
  border-color: var(--primary);
}
.google-btn-native[data-v-18451edc]:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.google-icon[data-v-18451edc] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.google-btn-fallback[data-v-18451edc] {
  font-size: var(--font-size-xs);
  color: var(--text-secondary);
  margin: var(--space-2) 0 0;
}

.apple-btn[data-v-a8f46306] {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}
.apple-btn-native[data-v-a8f46306] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  width: 100%;
  min-height: 44px;
  padding: var(--space-2) var(--space-4);
  background: #000;
  color: #fff;
  border: 1px solid #000;
  border-radius: var(--radius-medium);
  font-size: var(--font-size-m);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  transition: opacity var(--transition-fast);
}
.apple-btn-native[data-v-a8f46306]:hover:not(:disabled) {
  opacity: 0.92;
}
.apple-btn-native[data-v-a8f46306]:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.apple-icon[data-v-a8f46306] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.ob-content[data-v-082ba15e] {
  flex: 1;
  max-width: 560px;
  width: 100%;
  background: var(--bg);
  border-radius: 16px;
  border: 1px solid var(--line);
  box-shadow: 0 12px 40px rgba(40,30,20,0.08);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 0;
  align-self: stretch;
}
.ob-app[data-v-082ba15e] {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}
.optional-tag[data-v-082ba15e] {
  color: var(--ink-mute);
  margin-left: 6px;
  font-size: 11px;
}
/* Override the default <button> reset so the side-panel step buttons
   inherit the .step layout cleanly. The original .step rule (from
   onboarding.css) was a <div>; <button> needs explicit background +
   alignment so it doesn't pick up the platform's default styling. */
.step--btn[data-v-082ba15e] {
  width: 100%;
  background: transparent;
  border: 0;
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: inherit;
  transition: background 0.12s ease;
}
.step--btn[data-v-082ba15e]:hover {
  background: rgba(255, 255, 255, 0.6);
}
.step--btn[data-v-082ba15e]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
  border-radius: 10px;
}
.is-mobile .stage[data-v-082ba15e] {
  padding: 0;
  min-height: 100vh;
  min-height: 100dvh;
}
.is-mobile .ob-content[data-v-082ba15e] {
  max-width: 100%;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  border-radius: 0;
  border: 0;
  box-shadow: none;
}

/* Belt + suspenders: hide the side column at any narrow viewport, even
   when the JS device flag thinks we're on desktop (e.g. a desktop
   user dragged the window narrow after onboarding mounted). */
@media (max-width: 768px) {
.stage-side[data-v-082ba15e] { display: none;
}
.stage[data-v-082ba15e] {
    padding: 0;
    min-height: 100vh;
    min-height: 100dvh;
}
.ob-content[data-v-082ba15e] {
    max-width: 100%;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    border-radius: 0;
    border: 0;
    box-shadow: none;
}
}

.phy-label[data-v-3b4783c6] {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--ink-mute);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.phy-hint[data-v-3b4783c6] {
  font-family: var(--mono);
  font-size: 9.5px;
  color: var(--ink-mute);
  letter-spacing: 0.06em;
  margin-top: 8px;
}
.phy-segctl[data-v-3b4783c6] {
  display: flex; gap: 4px; padding: 3px;
  background: var(--bg-alt); border-radius: 999px;
}
.phy-seg[data-v-3b4783c6] {
  flex: 1; height: 38px; border-radius: 999px;
  background: transparent; color: var(--ink-dim);
  font-size: 13.5px;
}
.phy-seg.on[data-v-3b4783c6] {
  background: var(--panel); color: var(--accent-deep); font-weight: 500;
  box-shadow: 0 1px 2px rgba(40,30,20,0.06);
}
.phy-grid[data-v-3b4783c6] { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 12px;
}
.phy-field[data-v-3b4783c6] { display: flex; flex-direction: column;
}
.phy-input-wrap[data-v-3b4783c6] {
  display: flex; align-items: center; height: 44px;
  padding: 0 14px; border: 1px solid var(--line-strong);
  border-radius: 10px; background: var(--panel);
}
.phy-input-wrap input[data-v-3b4783c6] {
  flex: 1; min-width: 0; width: 100%;
  border: 0; outline: 0; background: transparent;
  font-family: var(--mono); font-size: 14px; color: var(--ink);
}
.phy-suffix[data-v-3b4783c6] {
  font-family: var(--mono); font-size: 11px; color: var(--ink-mute);
  margin-left: 4px;
}
.phy-unit-toggle[data-v-3b4783c6] {
  margin-top: 18px;
  display: flex; gap: 4px; padding: 3px;
  background: var(--bg-alt); border-radius: 999px;
}
.phy-unit[data-v-3b4783c6] {
  flex: 1; height: 30px; border-radius: 999px;
  background: transparent; color: var(--ink-dim);
  font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.10em; text-transform: uppercase;
}
.phy-unit.on[data-v-3b4783c6] {
  background: var(--panel); color: var(--accent-deep);
}

.goal-chip.disabled[data-v-2bc70cb8] {
  opacity: 0.35;
  cursor: not-allowed;
}
.cap-hint[data-v-2bc70cb8] {
  margin-top: 10px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.goals-readout[data-v-2bc70cb8] {
  margin-top: 18px;
  padding: 12px 14px;
  background: var(--panel-warm);
  border-left: 3px solid var(--accent);
  border-radius: 0 10px 10px 0;
  color: var(--ink-dim);
  line-height: 1.5;
}
.goals-readout__lede[data-v-2bc70cb8] {
  font-family: var(--serif);
  font-size: 13px;
  font-style: italic;
  margin-bottom: 8px;
}
.goals-readout__lede b[data-v-2bc70cb8] { color: var(--ink); font-style: normal; font-weight: 500;
}
.goals-readout__chips[data-v-2bc70cb8] {
  display: flex; flex-wrap: wrap; gap: 6px;
}
.signal-chip[data-v-2bc70cb8] {
  display: inline-flex; align-items: center;
  padding: 4px 9px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.04em;
  color: var(--ink);
}

.search-results[data-v-420a36e2] {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel);
  overflow: hidden;
}
.search-row + .search-row[data-v-420a36e2] {
  border-top: 1px solid var(--line-soft);
}
.search-row__btn[data-v-420a36e2] {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 10px;
  align-items: center;
  padding: 12px 14px;
  background: transparent;
  border: 0;
  cursor: pointer;
  text-align: left;
  transition: background 0.12s ease;
}
.search-row__btn[data-v-420a36e2]:hover:not(:disabled) {
  background: var(--accent-fog);
}
.search-row__btn[data-v-420a36e2]:disabled {
  cursor: default;
  opacity: 0.55;
}
.search-row__name[data-v-420a36e2] {
  font-size: 14px;
  color: var(--ink);
  font-weight: 500;
}
.search-row__kind[data-v-420a36e2] {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--bg-alt);
  color: var(--ink-dim);
}
.search-row__kind--rx[data-v-420a36e2] { background: var(--accent-softer); color: var(--accent-deep);
}
.search-row__kind--peptide[data-v-420a36e2] { background: var(--plum-soft); color: var(--plum);
}
.search-row__kind--supplement[data-v-420a36e2] { background: var(--sage-soft); color: var(--sage-deep);
}
.search-row__action[data-v-420a36e2] {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--accent);
}
.search-empty[data-v-420a36e2] {
  margin: 12px 0 0;
  padding: 14px;
  font-size: 13px;
  color: var(--ink-dim);
  background: var(--panel);
  border: 1px dashed var(--line);
  border-radius: 12px;
}
.add-as-custom[data-v-420a36e2] {
  display: block;
  margin-top: 8px;
  background: transparent;
  border: 0;
  color: var(--accent);
  font-family: inherit;
  font-size: 13px;
  cursor: pointer;
  padding: 0;
}
.add-as-custom[data-v-420a36e2]:hover { text-decoration: underline;
}
.stack-error[data-v-420a36e2] {
  margin-top: 12px;
  padding: 10px 12px;
  background: rgba(201, 123, 58, 0.1);
  border-left: 3px solid var(--warn);
  border-radius: 0 8px 8px 0;
  font-size: 13px;
  color: var(--ink-dim);
}

.activity-list[data-v-6b1713f2] { display: flex; flex-direction: column; gap: 10px;
}
.activity-card[data-v-6b1713f2] {
  width: 100%; text-align: left;
  padding: 14px 16px; border-radius: 14px;
  background: var(--panel); border: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 4px;
  transition: all 0.15s ease;
}
.activity-card.on[data-v-6b1713f2] {
  border-color: var(--accent);
  background: var(--accent-fog);
  box-shadow: 0 1px 6px rgba(196,99,60,0.08);
}
.activity-head[data-v-6b1713f2] { display: flex; justify-content: space-between; align-items: baseline;
}
.activity-title[data-v-6b1713f2] { font-size: 15px; font-weight: 500; color: var(--ink);
}
.activity-mult[data-v-6b1713f2] { font-family: var(--mono); font-size: 12px; color: var(--ink-mute);
}
.activity-blurb[data-v-6b1713f2] { font-size: 13px; color: var(--ink-dim);
}
.activity-readout[data-v-6b1713f2] {
  margin-top: 18px; padding: 14px;
  background: var(--panel-warm); border-radius: 12px;
  border-left: 3px solid var(--accent);
  display: flex; flex-direction: column; gap: 8px;
}
.activity-readout .row[data-v-6b1713f2] { display: flex; justify-content: space-between; font-size: 13px;
}
.activity-readout .row.dim[data-v-6b1713f2] { opacity: 0.5;
}
.activity-readout .val[data-v-6b1713f2] { font-family: var(--mono); font-weight: 500; color: var(--ink);
}

.wg-field[data-v-7fb7bea0] { display: flex; flex-direction: column;
}
.wg-label[data-v-7fb7bea0] {
  font-family: var(--mono); font-size: 10px;
  color: var(--ink-mute); letter-spacing: 0.12em;
  text-transform: uppercase; margin-bottom: 6px;
}
.wg-input-wrap[data-v-7fb7bea0] {
  display: flex; align-items: center; height: 44px;
  padding: 0 14px; border: 1px solid var(--line-strong);
  border-radius: 10px; background: var(--panel);
}
.wg-input-wrap input[data-v-7fb7bea0] {
  flex: 1; min-width: 0; border: 0; outline: 0; background: transparent;
  font-family: var(--mono); font-size: 14px; color: var(--ink);
}
.wg-suffix[data-v-7fb7bea0] {
  font-family: var(--mono); font-size: 11px; color: var(--ink-mute);
}
.rate-grid[data-v-7fb7bea0] { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px;
}
.rate-chip[data-v-7fb7bea0] {
  padding: 12px 14px; border-radius: 10px;
  background: var(--panel); border: 1px solid var(--line);
  font-size: 13px; color: var(--ink-dim); text-align: left;
}
.rate-chip.on[data-v-7fb7bea0] {
  border-color: var(--accent); background: var(--accent-fog);
  color: var(--accent-deep); font-weight: 500;
}

.nt-field[data-v-af877fb1] { display: flex; flex-direction: column;
}
.nt-label[data-v-af877fb1] {
  font-family: var(--mono); font-size: 10px;
  color: var(--ink-mute); letter-spacing: 0.12em;
  text-transform: uppercase; margin-bottom: 6px;
}
.nt-input-wrap[data-v-af877fb1] {
  display: flex; align-items: center; height: 44px;
  padding: 0 14px; border: 1px solid var(--line-strong);
  border-radius: 10px; background: var(--panel);
}
.nt-input-wrap input[data-v-af877fb1] {
  flex: 1; min-width: 0; border: 0; outline: 0; background: transparent;
  font-family: var(--mono); font-size: 14px; color: var(--ink);
}
.nt-suffix[data-v-af877fb1] {
  font-family: var(--mono); font-size: 11px; color: var(--ink-mute);
}
.macro-grid[data-v-af877fb1] { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
}
.nt-check[data-v-af877fb1] {
  margin-top: 14px;
  padding: 10px 14px;
  background: var(--panel-warm);
  border-radius: 10px;
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--ink-dim);
}
.nt-check.off[data-v-af877fb1] { color: var(--warn);
}
.nt-check b[data-v-af877fb1] { color: var(--ink); font-weight: 500;
}

.tier[data-v-beba159c] { cursor: pointer; transition: border-color 0.15s ease, background 0.15s ease;
}
.tier.selected[data-v-beba159c] { border-color: var(--accent); background: var(--accent-fog);
}

.summary-card .row[data-v-c2ec4ffc] {
  width: 100%;
  text-align: left;
  background: transparent;
  border: 0;
  cursor: pointer;
  transition: background 0.12s ease;
}
.summary-card .row[data-v-c2ec4ffc]:hover {
  background: var(--accent-fog);
}
.row-chev[data-v-c2ec4ffc] {
  margin-left: 6px;
  color: var(--ink-mute);
  font-size: 14px;
  transition: transform 0.15s ease, color 0.15s ease;
}
.summary-card .row:hover .row-chev[data-v-c2ec4ffc] {
  color: var(--accent);
  transform: translateX(2px);
}
/* Onboarding — Clinic·Warm. Scoped to .onboarding-root so the tokens
   don't leak into the host app's design system. The shell mounts this
   class around the entire flow. */
.onboarding-root {
  --bg:           #fbf8f3;
  --bg-alt:       #f5efe4;
  --bg-deep:      #efe7d6;
  --panel:        #ffffff;
  --panel-warm:   #f8f3e8;
  --panel-cream:  #fcf8ed;
  --ink:          #1c1a17;
  --ink-dim:      #5a5249;
  --ink-mute:     #928876;
  --ink-faint:    #b8ad9a;
  --line:         rgba(40,30,20,0.10);
  --line-strong:  rgba(40,30,20,0.20);
  --line-soft:    rgba(40,30,20,0.05);
  --accent:       #c4633c;
  --accent-deep:  #a14e2c;
  --accent-soft:  #ecd5c4;
  --accent-softer:rgba(196,99,60,0.12);
  --accent-fog:   rgba(196,99,60,0.06);
  --sage:         #6b8a4f;
  --sage-soft:    rgba(107,138,79,0.16);
  --sage-deep:    #4f6b3a;
  --gold:         #c89c3a;
  --gold-soft:    rgba(200,156,58,0.20);
  --gold-deep:    #8a6a23;
  --indigo:       #5a7a9b;
  --indigo-soft:  rgba(90,122,155,0.16);
  --indigo-deep:  #3f5878;
  --plum:         #8a5a72;
  --plum-soft:    rgba(138,90,114,0.16);
  --warn:         #c97b3a;
  --serif: "Fraunces", "Tiempos", Georgia, serif;
  --sans:  "Inter", system-ui, -apple-system, sans-serif;
  --mono:  "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; min-height: 100vh; background: var(--bg-deep); font-family: var(--sans); color: var(--ink); -webkit-font-smoothing: antialiased; }
::selection { background: var(--accent); color: #fff; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: 0; background: none; color: inherit; padding: 0; touch-action: manipulation; }
input, textarea, select { font: inherit; color: inherit; }
ul { list-style: none; padding: 0; margin: 0; }
h1, h2, h3, h4, h5, h6, p { margin: 0; padding: 0; font-weight: inherit; }

.serif { font-family: var(--serif); font-weight: 380; letter-spacing: -0.014em; font-feature-settings: "ss01"; }
.serif-it { font-family: var(--serif); font-style: italic; color: var(--accent-deep); font-weight: 400; }
.mono { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.10em; text-transform: uppercase; color: var(--ink-mute); }
.mono-accent { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); }

/* ── Stage with side notes ───────────────────────────── */
.stage {
  min-height: 100vh;
  display: flex; align-items: flex-start; justify-content: center;
  gap: 56px; padding: 60px 40px 80px;
  background:
    radial-gradient(ellipse 800px 600px at 30% 30%, rgba(196,99,60,0.06), transparent 60%),
    radial-gradient(ellipse 600px 500px at 80% 70%, rgba(107,138,79,0.05), transparent 60%),
    var(--bg-deep);
}
.stage-side { max-width: 300px; padding-top: 80px; flex-shrink: 0; }
.stage-side .crumb {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--accent); margin-bottom: 20px;
}
.stage-side .crumb .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.stage-side h1 {
  font-family: var(--serif); font-weight: 380;
  font-size: 44px; line-height: 1.04; letter-spacing: -0.022em;
  color: var(--ink); font-feature-settings: "ss01"; padding-bottom: 0.18em;
}
.stage-side h1 i { font-style: italic; color: var(--accent-deep); }
.stage-side p { margin-top: 18px; font-size: 15px; color: var(--ink-dim); line-height: 1.55; }
.stage-side .stepper {
  margin-top: 32px;
  display: flex; flex-direction: column; gap: 4px;
}
.stage-side .stepper .step {
  display: grid; grid-template-columns: 24px 1fr;
  gap: 12px; align-items: center;
  padding: 10px 12px;
  border-radius: 10px;
  font-size: 13px; color: var(--ink-mute);
  transition: background 0.15s ease;
}
.stage-side .stepper .step.active { background: rgba(255,255,255,0.6); color: var(--ink); }
.stage-side .stepper .step.done { color: var(--ink); }
.stage-side .stepper .num {
  width: 22px; height: 22px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--mono); font-size: 11px;
  border: 1.5px solid var(--line-strong); color: var(--ink-mute);
  background: rgba(255,255,255,0.6);
  flex-shrink: 0;
}
.stage-side .step.done .num { background: var(--sage); border-color: transparent; color: #fff; }
.stage-side .step.active .num { background: var(--accent); border-color: transparent; color: #fff; }

/* ── Device frame ────────────────────────────────────── */
.device {
  width: 414px; height: 880px;
  border-radius: 54px;
  background: #1c1a17;
  padding: 9px;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.05) inset,
    0 0 0 1px rgba(255,255,255,0.04) inset,
    0 30px 60px rgba(40,30,20,0.25),
    0 8px 24px rgba(40,30,20,0.18);
  position: relative; flex-shrink: 0;
}
.screen {
  width: 100%; height: 100%;
  border-radius: 46px;
  background: var(--bg);
  overflow: hidden;
  position: relative;
}
.island {
  position: absolute; top: 14px; left: 50%; transform: translateX(-50%);
  width: 124px; height: 36px; border-radius: 24px; background: #000; z-index: 60;
}
.statusbar {
  height: 56px; display: flex; align-items: flex-end;
  justify-content: space-between; padding: 0 32px 6px;
  font-family: -apple-system, "SF Pro", system-ui;
  font-weight: 600; font-size: 15px; color: var(--ink);
}
.statusbar-icons { display: flex; gap: 6px; align-items: center; color: var(--ink); }
.home-indicator {
  position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%);
  width: 134px; height: 5px; border-radius: 3px; background: var(--ink); z-index: 55; opacity: 0.85;
}
.app {
  display: flex; flex-direction: column;
  height: calc(100% - 56px);
  position: relative; overflow: hidden;
}

/* ── In-flow header (back + progress bar) ─────────────── */
.flow-head {
  padding: 6px 18px 14px;
  display: flex; align-items: center; gap: 12px;
  flex-shrink: 0;
}
.flow-head .back {
  width: 36px; height: 36px; border-radius: 999px;
  background: var(--panel); border: 1px solid var(--line);
  color: var(--ink-dim); font-size: 16px;
  display: inline-flex; align-items: center; justify-content: center;
}
.flow-head .pbar {
  flex: 1; height: 4px; border-radius: 999px;
  background: var(--bg-alt);
  position: relative; overflow: hidden;
}
.flow-head .pbar .fill {
  position: absolute; left: 0; top: 0; bottom: 0;
  background: var(--accent); border-radius: 999px;
  transition: width 0.4s cubic-bezier(.2,.7,.2,1);
}
.flow-head .step-counter {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em;
  color: var(--ink-mute); text-transform: uppercase; min-width: 32px;
  text-align: right;
}

.flow-body {
  flex: 1; min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 6px 22px 24px;
  scrollbar-width: none;
}
.flow-body::-webkit-scrollbar { display: none; }

.eyebrow {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em;
  color: var(--accent); text-transform: uppercase;
  margin-bottom: 12px;
}

h1.screen-h {
  font-family: var(--serif); font-weight: 380;
  font-size: 34px; line-height: 1.06; letter-spacing: -0.018em;
  color: var(--ink); font-feature-settings: "ss01";
  padding-bottom: 0.1em;
}
h1.screen-h i { font-style: italic; color: var(--accent-deep); }
.sub {
  margin-top: 14px;
  font-size: 15px; line-height: 1.55; color: var(--ink-dim);
}
.sub b { color: var(--ink); font-weight: 500; }

.flow-footer {
  padding: 14px 22px 24px;
  background: var(--bg);
  border-top: 1px solid var(--line);
  flex-shrink: 0;
}
.flow-footer.transparent { border-top: 0; background: transparent; }
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 100%; height: 52px;
  border-radius: 999px;
  background: var(--accent); color: #fff;
  font-size: 14.5px; font-weight: 500;
  gap: 8px;
}
.btn.secondary {
  background: var(--panel); color: var(--ink);
  border: 1px solid var(--line-strong);
}
.btn.ghost {
  background: transparent; color: var(--ink-dim);
  height: 44px;
}
.btn:disabled { background: var(--bg-alt); color: var(--ink-faint); }

/* ── 1 · Welcome ─────────────────────────────────────── */
.welcome {
  flex: 1; display: flex; flex-direction: column;
  padding: 24px 28px 32px;
  position: relative; overflow: hidden;
}
.welcome::before {
  content: ""; position: absolute;
  right: -10%; top: -10%;
  width: 380px; height: 380px;
  background: radial-gradient(ellipse at center, rgba(196,99,60,0.16), transparent 65%);
  filter: blur(30px); pointer-events: none;
}
.welcome-top { display: flex; align-items: center; gap: 10px; position: relative; z-index: 2; }
.welcome-top .mk {
  width: 26px; height: 26px; border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--accent-deep));
  position: relative; overflow: hidden;
}
.welcome-top .mk::before {
  content: ""; position: absolute; inset: 0;
  background: repeating-linear-gradient(135deg,
    transparent 0 3px, rgba(255,255,255,0.22) 3px 4px);
}
.welcome-top .nm {
  font-family: var(--serif); font-size: 18px; letter-spacing: -0.01em; font-weight: 460;
  font-feature-settings: "ss01";
}
.welcome-mid {
  flex: 1; display: flex; flex-direction: column; justify-content: center;
  padding: 30px 0;
  position: relative; z-index: 2;
}
.welcome-mid h1 {
  font-family: var(--serif); font-weight: 380;
  font-size: 46px; line-height: 1.02; letter-spacing: -0.02em;
  font-feature-settings: "ss01";
  padding-bottom: 0.12em;
}
.welcome-mid h1 i { font-style: italic; color: var(--accent-deep); }
.welcome-mid p {
  margin-top: 24px;
  font-size: 16.5px; line-height: 1.5; color: var(--ink-dim);
  max-width: 32ch;
}
.welcome-mid p b { color: var(--ink); font-weight: 500; }
.welcome-bottom {
  padding-top: 16px;
  display: flex; flex-direction: column; gap: 10px;
  position: relative; z-index: 2;
}
.welcome-bottom .note {
  text-align: center; margin-top: 6px;
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.10em;
  color: var(--ink-mute); text-transform: uppercase;
}
.oauth-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.oauth-btn {
  height: 48px;
  border-radius: 999px;
  background: var(--panel);
  border: 1px solid var(--line-strong);
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-size: 13.5px; color: var(--ink); font-weight: 500;
}

/* ── Product picker cards ────────────────────────────── */
.prod-card {
  position: relative;
  padding: 22px 22px 24px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 18px;
  display: flex; flex-direction: column; gap: 12px;
  cursor: pointer;
  transition: all 0.18s ease;
  text-align: left;
  width: 100%;
  margin-bottom: 12px;
}
.prod-card:hover { border-color: var(--accent-soft); transform: translateY(-1px); }
.prod-card.on {
  border-color: var(--accent);
  background: var(--accent-fog);
  box-shadow: 0 4px 16px rgba(196,99,60,0.10);
}
.prod-card-top { display: flex; align-items: center; gap: 12px; }
.prod-icon {
  width: 40px; height: 40px; border-radius: 12px;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--serif); font-style: italic;
  font-size: 20px; font-weight: 400;
  flex-shrink: 0;
}
.prod-icon.log { background: var(--sage-soft); color: var(--sage-deep); }
.prod-icon.lab { background: var(--accent-softer); color: var(--accent-deep); }
.prod-card .nm {
  font-family: var(--serif); font-size: 22px; letter-spacing: -0.012em;
  font-feature-settings: "ss01"; color: var(--ink);
}
.prod-card .nm em { font-style: italic; color: var(--accent-deep); }
.prod-card .tag {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.12em;
  color: var(--ink-mute); text-transform: uppercase;
}
.prod-card .blurb {
  font-size: 13.5px; line-height: 1.5; color: var(--ink-dim);
  margin-top: -2px;
}
.prod-card .blurb b { color: var(--ink); font-weight: 500; }
.prod-card .checks { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; }
.prod-card .checks li {
  display: grid; grid-template-columns: 18px 1fr; gap: 8px;
  font-size: 12.5px; color: var(--ink-dim);
  align-items: flex-start;
}
.prod-card .checks li::before {
  content: "✓"; color: var(--accent);
  font-size: 11px; line-height: 1.4;
}
.prod-card .check-mark {
  position: absolute; top: 16px; right: 16px;
  width: 24px; height: 24px; border-radius: 50%;
  border: 1.5px solid var(--line-strong);
  background: var(--panel);
  display: inline-flex; align-items: center; justify-content: center;
  color: transparent; font-size: 12px;
  transition: all 0.15s ease;
}
.prod-card.on .check-mark {
  background: var(--accent); border-color: transparent; color: #fff;
}
.combo-flag {
  position: absolute; top: -10px; left: 20px;
  padding: 4px 10px;
  background: var(--accent); color: #fff;
  border-radius: 999px;
  font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* ── Profile cards (selectable type tiles) ───────────── */
.profile-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.profile-tile {
  padding: 16px 14px 18px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 14px;
  display: flex; flex-direction: column; gap: 8px;
  cursor: pointer;
  transition: all 0.15s ease;
  text-align: left;
  position: relative;
}
.profile-tile:hover { border-color: var(--accent-soft); }
.profile-tile.on {
  border-color: var(--accent);
  background: var(--accent-fog);
}
.profile-tile .glyph {
  width: 32px; height: 32px; border-radius: 10px;
  background: var(--bg-alt); color: var(--ink-dim);
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--serif); font-style: italic; font-size: 16px;
}
.profile-tile.on .glyph { background: var(--accent); color: #fff; }
.profile-tile .nm {
  font-family: var(--serif); font-size: 17px; letter-spacing: -0.01em;
  font-feature-settings: "ss01";
  line-height: 1.15;
}
.profile-tile .desc {
  font-size: 11.5px; color: var(--ink-dim); line-height: 1.4;
}
.profile-tile .check {
  position: absolute; top: 12px; right: 12px;
  width: 18px; height: 18px; border-radius: 50%;
  border: 1.5px solid var(--line-strong); background: var(--panel);
  color: transparent; font-size: 9px;
  display: inline-flex; align-items: center; justify-content: center;
}
.profile-tile.on .check { background: var(--accent); border-color: transparent; color: #fff; }

/* ── Goal chips (multi-select) ───────────────────────── */
.chip-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
}
.goal-chip {
  padding: 14px 14px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 14px;
  display: flex; align-items: center; gap: 10px;
  text-align: left;
  cursor: pointer;
  transition: all 0.15s ease;
}
.goal-chip:hover { border-color: var(--accent-soft); }
.goal-chip.on {
  border-color: var(--accent);
  background: var(--accent-fog);
}
.goal-chip .icon {
  width: 30px; height: 30px; border-radius: 8px;
  background: var(--bg-alt); color: var(--ink-dim);
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--serif); font-style: italic; font-size: 14px;
  flex-shrink: 0;
}
.goal-chip.on .icon { background: var(--accent); color: #fff; }
.goal-chip .nm {
  font-size: 13.5px; font-weight: 500; line-height: 1.2;
  font-family: var(--sans);
}

/* ── Stack input chip cloud ──────────────────────────── */
.stack-search {
  display: flex; align-items: center; gap: 10px;
  padding: 0 16px;
  height: 44px;
  background: var(--bg-alt);
  border-radius: 999px;
  margin-bottom: 14px;
}
.stack-search input {
  flex: 1; border: 0; background: transparent;
  outline: none; font-size: 14px; color: var(--ink);
}
.stack-search input::placeholder { color: var(--ink-mute); }

.added { margin-top: 4px; }
.added h4 {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em;
  color: var(--ink-mute); text-transform: uppercase;
  margin-bottom: 10px;
}
.added .row {
  display: grid; grid-template-columns: 30px 1fr auto auto;
  gap: 12px; align-items: center;
  padding: 12px 14px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
  margin-bottom: 6px;
}
.added .row .ic {
  width: 30px; height: 30px; border-radius: 9px;
  background: var(--accent-softer); color: var(--accent-deep);
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--serif); font-style: italic; font-size: 14px;
  flex-shrink: 0;
}
.added .row .nm { font-size: 13.5px; font-weight: 500; }
.added .row .dose { font-family: var(--mono); font-size: 11px; color: var(--accent); }
.added .row .x { color: var(--ink-mute); font-size: 14px; padding: 4px; }

.suggest-head {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em;
  color: var(--ink-mute); text-transform: uppercase;
  margin: 18px 0 10px;
}
.suggest-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.suggest-card {
  padding: 12px 12px 12px 14px;
  background: var(--panel);
  border: 1px dashed var(--line-strong);
  border-radius: 12px;
  text-align: left;
}
.suggest-card .plus {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--accent-softer); color: var(--accent);
  font-size: 14px; margin-bottom: 6px;
}
.suggest-card .nm { font-size: 13px; font-weight: 500; }
.suggest-card .tag {
  font-family: var(--mono); font-size: 9px;
  color: var(--ink-mute); letter-spacing: 0.10em;
  text-transform: uppercase; margin-top: 4px;
}

/* ── Bloodwork upload zone ───────────────────────────── */
.upload {
  margin: 4px 0 10px;
  padding: 24px 18px;
  border: 1.5px dashed var(--line-strong);
  border-radius: 16px;
  background: var(--panel-cream);
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  text-align: center;
}
.upload .ic {
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--accent-softer); color: var(--accent);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 20px; margin-bottom: 4px;
}
.upload .nm {
  font-family: var(--serif); font-size: 18px;
  letter-spacing: -0.012em;
  font-feature-settings: "ss01";
}
.upload .desc {
  font-size: 12.5px; color: var(--ink-dim); line-height: 1.5;
  max-width: 32ch;
}
.upload .pill-row {
  display: flex; gap: 6px; margin-top: 6px;
  flex-wrap: wrap; justify-content: center;
}
.upload .pill-row span {
  padding: 3px 9px;
  background: var(--bg-alt);
  border-radius: 999px;
  font-family: var(--mono); font-size: 9px;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-mute);
}
.skip-row {
  text-align: center;
  margin-top: 8px;
  font-family: var(--mono); font-size: 10.5px;
  letter-spacing: 0.10em;
}
.skip-row a { color: var(--ink-mute); text-transform: uppercase; }
.skip-row a:hover { color: var(--accent); }

/* ── Bloodwork values list ───────────────────────────── */
.bw-list {
  margin-top: 14px;
  background: var(--panel);
  border: 1px solid var(--sage-soft);
  border-radius: 14px;
  overflow: hidden;
}
.bw-row {
  display: grid; grid-template-columns: 20px 1fr auto auto;
  gap: 10px; align-items: center;
  padding: 10px 14px;
  border-top: 1px solid var(--line-soft);
  font-size: 13px;
}
.bw-row:first-child { border-top: 0; }
.bw-row .check {
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--sage); color: #fff;
  font-size: 9px;
  display: inline-flex; align-items: center; justify-content: center;
}
.bw-row .nm { color: var(--ink); }
.bw-row .val { font-family: var(--mono); font-size: 11.5px; color: var(--accent); }
.bw-row .range { font-family: var(--mono); font-size: 9.5px; color: var(--ink-mute); }
.bw-row .badge {
  padding: 2px 7px; border-radius: 999px;
  font-family: var(--mono); font-size: 9px; letter-spacing: 0.08em;
  text-transform: uppercase;
}
.bw-row .badge.in { background: var(--sage-soft); color: var(--sage-deep); }
.bw-row .badge.out { background: rgba(201,123,58,0.16); color: #9a5824; }

.parse-banner {
  margin-top: 12px;
  padding: 12px 14px;
  background: var(--sage-soft); color: var(--sage-deep);
  border-radius: 10px;
  display: grid; grid-template-columns: 24px 1fr;
  gap: 10px; align-items: center;
  font-size: 12.5px;
}
.parse-banner .ic {
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--sage); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 500;
}

/* ── Slider for severity / dose ───────────────────────── */
.slider {
  height: 6px; background: var(--bg-alt); border-radius: 999px;
  position: relative; margin: 16px 0 6px;
}
.slider .fill { position: absolute; top: 0; bottom: 0; left: 0; background: var(--accent); border-radius: 999px; }
.slider .knob {
  position: absolute; top: 50%; transform: translate(-50%, -50%);
  width: 24px; height: 24px; background: var(--accent);
  border-radius: 50%; border: 4px solid var(--panel);
  box-shadow: 0 0 0 1px var(--accent), 0 2px 4px rgba(196,99,60,0.2);
}

/* ── Tier card ───────────────────────────────────────── */
.tier {
  position: relative;
  padding: 22px 22px 24px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 18px;
  margin-bottom: 12px;
}
.tier.feat {
  border: 1.5px solid var(--accent);
  background: var(--accent-fog);
}
.tier .badge-pop {
  position: absolute; top: -10px; left: 20px;
  padding: 4px 10px;
  background: var(--accent); color: #fff;
  border-radius: 999px;
  font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.12em;
  text-transform: uppercase;
}
.tier h3 {
  font-family: var(--serif); font-weight: 380;
  font-size: 22px; letter-spacing: -0.012em;
  font-feature-settings: "ss01";
}
.tier h3 em { font-style: italic; color: var(--accent-deep); }
.tier .desc {
  margin-top: 6px; font-size: 12.5px; color: var(--ink-dim); line-height: 1.45;
}
.tier .price {
  margin-top: 14px; padding: 10px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  display: flex; align-items: baseline; gap: 6px;
}
.tier .price b {
  font-family: var(--serif); font-weight: 400;
  font-size: 36px; line-height: 1; letter-spacing: -0.02em;
  font-feature-settings: "ss01";
}
.tier .price span { font-family: var(--mono); font-size: 10.5px; color: var(--ink-mute); letter-spacing: 0.08em; }
.tier ul { list-style: none; padding: 0; margin: 14px 0 0; display: flex; flex-direction: column; gap: 8px; }
.tier ul li {
  display: grid; grid-template-columns: 16px 1fr; gap: 10px;
  font-size: 12.5px; color: var(--ink);
}
.tier ul li::before {
  content: "→"; color: var(--accent); font-family: var(--mono);
  font-size: 11px;
}

/* ── Notification permission ─────────────────────────── */
.permission-art {
  margin: 14px 0 18px;
  padding: 22px 18px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 16px;
}
.permission-art .preview-notif {
  display: grid; grid-template-columns: 36px 1fr auto;
  gap: 12px; align-items: center;
  padding: 12px 14px;
  background: var(--panel-cream);
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(40,30,20,0.06);
}
.permission-art .preview-notif .mk {
  width: 36px; height: 36px; border-radius: 9px;
  background: linear-gradient(135deg, var(--accent), var(--accent-deep));
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff; font-family: var(--serif); font-style: italic; font-size: 18px;
}
.permission-art .preview-notif .body { min-width: 0; }
.permission-art .preview-notif .ttl {
  font-size: 13px; font-weight: 600; color: var(--ink);
}
.permission-art .preview-notif .msg {
  font-size: 12px; color: var(--ink-dim);
  margin-top: 2px; line-height: 1.4;
}
.permission-art .preview-notif .time {
  font-family: var(--mono); font-size: 9.5px;
  color: var(--ink-mute); letter-spacing: 0.06em;
  align-self: flex-start;
}
.benefits {
  display: flex; flex-direction: column; gap: 10px;
  margin-top: 12px;
}
.benefit {
  display: grid; grid-template-columns: 28px 1fr;
  gap: 12px; align-items: flex-start;
  padding: 8px 0;
}
.benefit .ic {
  width: 26px; height: 26px; border-radius: 8px;
  background: var(--accent-softer); color: var(--accent-deep);
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--serif); font-style: italic; font-size: 13px;
  flex-shrink: 0;
}
.benefit .nm { font-size: 13px; font-weight: 500; color: var(--ink); }
.benefit .desc { font-size: 11.5px; color: var(--ink-dim); margin-top: 2px; line-height: 1.4; }

/* ── Final celebration ───────────────────────────────── */
.done-mid {
  flex: 1; display: flex; flex-direction: column; justify-content: center;
  padding: 30px 26px;
  position: relative;
  text-align: center;
}
.done-mid::before {
  content: ""; position: absolute;
  inset: -10%;
  background:
    radial-gradient(circle at 30% 30%, var(--accent-softer), transparent 50%),
    radial-gradient(circle at 70% 70%, var(--sage-soft), transparent 50%);
  pointer-events: none;
}
.done-icon {
  width: 72px; height: 72px; border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--accent-deep));
  color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--serif); font-style: italic; font-size: 36px;
  margin: 0 auto 22px;
  box-shadow: 0 12px 30px rgba(196,99,60,0.30);
  position: relative; z-index: 2;
}
.done-mid h1 {
  font-family: var(--serif); font-weight: 380;
  font-size: 38px; line-height: 1.05; letter-spacing: -0.02em;
  font-feature-settings: "ss01";
  position: relative; z-index: 2;
  padding-bottom: 0.12em;
}
.done-mid h1 i { font-style: italic; color: var(--accent-deep); }
.done-mid p {
  margin-top: 14px;
  font-size: 15px; color: var(--ink-dim); line-height: 1.55;
  max-width: 30ch; margin-inline: auto;
  position: relative; z-index: 2;
}
.summary-card {
  margin: 24px 16px 0;
  padding: 16px 18px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 14px;
  text-align: left;
  position: relative; z-index: 2;
}
.summary-card .head {
  font-family: var(--mono); font-size: 9.5px;
  letter-spacing: 0.14em; color: var(--ink-mute);
  text-transform: uppercase;
  margin-bottom: 10px;
}
.summary-card .row {
  display: grid; grid-template-columns: 1fr auto;
  gap: 10px;
  padding: 7px 0;
  border-top: 1px solid var(--line-soft);
  font-size: 12.5px;
}
.summary-card .row:first-of-type { border-top: 0; }
.summary-card .row .v {
  font-family: var(--mono); font-size: 11.5px; color: var(--accent-deep);
}

/* Responsive */
@media (max-width: 1024px) {
  .stage { flex-direction: column; align-items: center; gap: 28px; }
  .stage-side { padding-top: 0; max-width: 414px; }
}

.ob-loading[data-v-40b5c12c] {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--mono, ui-monospace, monospace);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-mute, #999);
}

.auth-modal-backdrop[data-v-86f63bbc] {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(4px);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}
.auth-modal[data-v-86f63bbc] {
  position: relative;
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border-subtle);
  border-radius: 16px;
  padding: 2rem;
  width: 100%;
  max-width: 380px;
  color: var(--color-text-primary);
}
.auth-modal__close[data-v-86f63bbc] {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  background: transparent;
  border: none;
  color: var(--color-text-muted);
  font-size: 1.5rem;
  cursor: pointer;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
}
.auth-modal__close[data-v-86f63bbc]:hover {
  background: var(--color-bg-subtle);
  color: var(--color-text-primary);
}
.auth-modal__title[data-v-86f63bbc] {
  margin: 0 0 0.25rem;
  font-size: 1.4rem;
  font-weight: 700;
}
.auth-modal__subtitle[data-v-86f63bbc] {
  margin: 0 0 1.25rem;
  font-size: 0.85rem;
  color: var(--color-text-secondary);
  line-height: 1.4;
}
.auth-modal__form[data-v-86f63bbc] {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}
.auth-modal__field[data-v-86f63bbc] {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  font-size: 0.85rem;
}
.auth-modal__field span[data-v-86f63bbc] {
  color: var(--color-text-secondary);
  font-weight: 500;
}
.auth-modal__field input[data-v-86f63bbc] {
  padding: 0.65rem 0.75rem;
  background: var(--color-bg-base);
  border: 1px solid var(--color-border-subtle);
  border-radius: 8px;
  color: var(--color-text-primary);
  font-size: 0.95rem;
}
.auth-modal__field input[data-v-86f63bbc]:focus {
  outline: 2px solid var(--color-active);
  outline-offset: -1px;
  border-color: var(--color-active);
}
.auth-modal__error[data-v-86f63bbc] {
  margin: 0;
  font-size: 0.8rem;
  color: var(--color-danger, #e54b4b);
}
.auth-modal__submit[data-v-86f63bbc] {
  margin-top: 0.5rem;
  padding: 0.75rem;
  background: var(--color-active);
  border: none;
  border-radius: 8px;
  color: var(--color-bg-base);
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease;
}
.auth-modal__submit[data-v-86f63bbc]:hover:not(:disabled) {
  background: var(--color-accent, var(--color-active));
}
.auth-modal__submit[data-v-86f63bbc]:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.auth-modal__toggle[data-v-86f63bbc] {
  margin-top: 1.25rem;
  width: 100%;
  background: transparent;
  border: none;
  color: var(--color-text-secondary);
  font-size: 0.85rem;
  cursor: pointer;
}
.auth-modal__toggle span[data-v-86f63bbc] {
  color: var(--color-active);
  font-weight: 600;
  text-decoration: underline;
}
.auth-modal__toggle[data-v-86f63bbc]:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.app[data-v-14f71cfb] {
  height: 100vh;
  width: 100vw;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.app__body[data-v-14f71cfb] {
  flex: 1;
  min-height: 0;
  overflow: hidden;
}
.app__viewport[data-v-14f71cfb] {
  height: 100%;
  width: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.app__viewport[data-v-14f71cfb] > * {
  flex: 1;
  min-height: 0;
}
[data-v-14f71cfb] h3{
  margin: 1.5em 0 0 0;
  padding: 0 !important;
  color: white;
  font-size: 0.9em;
}
:root {
  /* Strictly Monochromatic (Pure Grayscale) */
  --neutral-0: #ffffff;
  --neutral-50: #fafafa;
  --neutral-100: #f5f5f5;
  --neutral-200: #e5e5e5;
  --neutral-300: #d4d4d4;
  --neutral-400: #a3a3a3;
  --neutral-500: #737373;
  --neutral-600: #404040;
  --neutral-700: #303030;
  --neutral-750: #202020;
  --neutral-800: #101010;
  --neutral-900: #000000;

  /* Functional Colors (Exceptions - Only for signals/charts) */

  /* Success / Protein / Bio-Positive */
  --emerald-50: #ecfdf5;
  --emerald-400: #34d399;
  --emerald-500: #10b981;
  --emerald-600: #059669;

  /* Info / Carbs / Chart Tendency */
  --sky-50: #ecfdf5;
  --sky-400: #38eff8;
  --sky-500: #0ee9e5;
  --sky-600: #00acb5;
  --sky-1000: #092c2e;

  /* Accent color */
  /* --purp-50: #f4ecfd;
  --purp-400: #c793ff;
  --purp-500: #7f0ee9;
  --purp-600: #6400b5; */

  /* Warning / Fat */
  --amber-50: #f2e9da;
  --amber-400: #fbbf24;
  --amber-500: #f59e0b;
  --amber-600: #d97706;
  --amber-1000: #27160b;

  /* Error / Danger */
  --rose-50: #fff1f2;
  --rose-400: #fb7185;
  --rose-500: #f43f5e;
  --rose-600: #e11d48;

  /* ============================================================
     Earthy / Parchment palette (active theme primitives)
     ============================================================ */

  /* Parchment / warm neutral scale (used by both light & dark) */
  --parch-0: #ffffff;
  --parch-50: #fbf8f3;
  --parch-100: #f5efe4;
  --parch-200: #ebe3d3;
  --parch-300: #d9cdb5;
  --parch-400: #b8a98a;
  --parch-500: #928876;
  --parch-600: #6e6557;
  --parch-700: #5a5249;
  --parch-800: #2e2922;
  --parch-900: #1c1a17;
  --parch-1000: #0f0d0a;

  /* Umber (inky dark surfaces, neutral) */
  --umber-900: #0c0c0c;
  --umber-800: #131313;
  --umber-750: #191919;
  --umber-700: #252525;
  --umber-600: #383838;

  /* Terracotta (accent / danger) */
  --terra-50: #fbeee6;
  --terra-100: #f4d8c6;
  --terra-400: #d98a64;
  --terra-500: #c4633c;
  --terra-600: #a14e2c;
  --terra-1000: #2a1308;

  /* Olive (success / lower-tendency) */
  --olive-50: #eef2e3;
  --olive-400: #8aaa68;
  --olive-500: #6b8a4e;
  --olive-600: #557040;
  --olive-1000: #1a2210;

  /* Ochre (warning) */
  --ochre-50: #f7ecd6;
  --ochre-400: #d4a05a;
  --ochre-500: #b8853a;
  --ochre-600: #946828;
  --ochre-1000: #261a09;

  /* ============================================================
     Severity tokens — single source of truth for interaction
     severity colors. Components reference these (or the `.sev-strip--<x>`
     utility classes in main.css) instead of hardcoded hex fallbacks.
     Resolves against theme-level `--color-*` tokens applied on
     .theme-light / .theme-dark.
     ============================================================ */
  --sev-critical: var(--color-danger, #e54b4b);
  --sev-warning:  var(--color-warning, #e0a23a);
  --sev-benefit:  var(--color-success, #4ca767);
  --sev-info:     var(--color-info, #4a8fc2);
}
:root {
  /* Font Family - macOS System Font Stack */
  --font-sans:
    -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display",
    "Helvetica Neue", Arial, sans-serif;
  --font-mono: "Inconsolata", "Fira Mono", "Droid Sans Mono", monospace;

  /* Font Sizes */
  --size-xs: 0.75rem; /* 12px */
  --size-s: 0.875rem; /* 14px */
  --size-m: 1rem; /* 16px */
  --size-l: 1.125rem; /* 18px */
  --size-xl: 1.25rem; /* 20px */
  --size-2xl: 1.5rem; /* 24px */
  --size-3xl: 1.875rem; /* 30px */
  --size-4xl: 2.25rem; /* 36px */

  /* Font Weights */
  --weight-light: 300;
  --weight-normal: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  /* Line Heights */
  --leading-tight: 1.25;
  --leading-normal: 1.5;
  --leading-relaxed: 1.625;
}
.theme-light {
  color-scheme: light;

  /* Backgrounds */
  --color-bg-base: var(--parch-50);
  --color-bg-subtle: var(--parch-100);
  --color-bg-elevated: var(--parch-0);
  --color-bg-disabled: var(--parch-200);
  --color-bg-active: var(--parch-200);

  /* Text */
  --color-text-primary: var(--parch-900);
  --color-text-secondary: var(--parch-700);
  --color-text-muted: var(--parch-500);
  --color-text-inverted: var(--parch-50);
  --color-text-active: var(--terra-600);

  /* Numbers */
  --color-metric-primary: var(--terra-600);
  --color-metric-secondary: var(--parch-700);

  /* Borders / Dividers */
  --color-border-subtle: var(--parch-200);
  --color-border-default: var(--parch-300);
  --color-border-strong: var(--parch-400);
  --color-active: var(--terra-500);

  /* Shadows */
  --shadow-large: 3px 6px 15px rgba(40, 30, 20, 0.12);

  /* Semantic / Functional */
  --color-accent: var(--terra-500);
  --color-accent-hover: var(--terra-600);

  /* Biological Exceptions (Only for signals) */
  --color-success: var(--olive-500);
  --color-warning: var(--ochre-500);
  --color-danger: var(--terra-600);

  /* Legacy / Specific Macros */
  --color-macro-carbs: var(--terra-500);

  /* Chart Tendencies */
  --chart-line-higher: var(--terra-500);
  --chart-fill-higher: color-mix(in srgb, var(--terra-500), transparent 88%);
  --chart-grad-higher-0: var(--terra-400);
  --chart-grad-higher-1: var(--terra-600);

  --chart-line-lower: var(--olive-500);
  --chart-fill-lower: color-mix(in srgb, var(--olive-500), transparent 88%);
  --chart-grad-lower-0: var(--olive-400);
  --chart-grad-lower-1: var(--olive-600);

  --chart-line-neutral: var(--parch-400);
  --chart-fill-neutral: color-mix(in srgb, var(--parch-400), transparent 88%);
  --chart-grad-neutral-0: var(--parch-300);
  --chart-grad-neutral-1: var(--parch-500);
}
.theme-dark {
  color-scheme: dark;

  /* Backgrounds */
  --color-bg-base: var(--umber-900);
  --color-bg-subtle: var(--umber-800);
  --color-bg-elevated: var(--umber-750);
  --color-bg-active: var(--umber-700);
  --color-bg-disabled: var(--terra-1000);

  /* Text */
  --color-text-primary: var(--parch-100);
  --color-text-secondary: var(--parch-300);
  --color-text-muted: var(--parch-500);
  --color-text-inverted: var(--umber-900);
  --color-text-active: var(--terra-400);

  /* Numbers */
  --color-metric-primary: var(--terra-400);
  --color-metric-secondary: var(--parch-300);

  /* Borders / Dividers */
  --color-border-subtle: var(--umber-800);
  --color-border-default: var(--umber-700);
  --color-border-strong: var(--umber-600);
  --color-active: var(--terra-500);

  /* Shadows */
  --shadow-large: 3px 6px 10px rgba(0, 0, 0, 0.45);

  /* Semantic / Functional */
  --color-accent: var(--terra-500);
  --color-accent-hover: var(--terra-400);

  /* Biological Exceptions (Only for signals) */
  --color-success: var(--olive-400);
  --color-warning: var(--ochre-400);
  --color-danger: var(--terra-400);

  /* Legacy / Specific Macros */
  --color-macro-carbs: var(--terra-400);

  /* Chart Tendencies */
  --chart-line-higher: var(--terra-400);
  --chart-fill-higher: color-mix(in srgb, var(--terra-400), transparent 88%);
  --chart-grad-higher-0: var(--terra-400);
  --chart-grad-higher-1: var(--terra-600);

  --chart-line-lower: var(--olive-400);
  --chart-fill-lower: color-mix(in srgb, var(--olive-400), transparent 88%);
  --chart-grad-lower-0: var(--olive-600);
  --chart-grad-lower-1: var(--olive-400);

  --chart-line-neutral: var(--parch-500);
  --chart-fill-neutral: color-mix(in srgb, var(--umber-700), transparent 88%);
  --chart-grad-neutral-0: var(--parch-500);
  --chart-grad-neutral-1: var(--parch-500);
}
/* Global Base Styles */
:root {
  /* Default to dark theme if no class is present, or just use variables directly */
  /* For now, we expect .theme-dark or .theme-light on the root element */
}
body {
  font-family: var(--font-sans);
  background-color: var(--color-bg-subtle);
  color: var(--color-text-primary);
  margin: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  user-select: none;
  -webkit-user-select: none;
}
/* Allow text selection in inputs and text areas */
input, textarea, [contenteditable] {
  user-select: text;
  -webkit-user-select: text;
}
/* Utility to explicitly enable selection */
.selectable {
  user-select: text;
  -webkit-user-select: text;
}
* {
  box-sizing: border-box;
}
/* Accessibility: respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
/* ============================================================
   Shared utility classes — pulled out of per-component scoped
   styles to remove duplication. Keep additions here narrow and
   well-named; this isn't a Tailwind layer.
   ============================================================ */
/* Section eyebrow / micro-title (replaces the 8+ hand-rolled blocks). */
.tk-section-title {
  margin: 0;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
/* Brief flash on a recently-scrolled-to reference row. */
@keyframes tk-ref-flash {
  0%   { background: color-mix(in srgb, var(--sev-benefit) 18%, transparent); }
  100% { background: transparent; }
}
.tk-ref-flash {
  animation: tk-ref-flash 1.2s ease-out;
}
/* Severity-tinted left strip — apply with .sev-strip + .sev-strip--<severity>. */
.sev-strip {
  border-left-width: 3px;
  border-left-style: solid;
}
.sev-strip--critical { border-left-color: var(--sev-critical); }
.sev-strip--warning  { border-left-color: var(--sev-warning); }
.sev-strip--benefit  { border-left-color: var(--sev-benefit); }
.sev-strip--info     { border-left-color: var(--sev-info); }
/* Floating Vue Tooltip Overrides */
.v-popper--theme-tooltip .v-popper__inner {
  background: var(--color-bg-base) !important;
  color: var(--color-text-primary) !important;
  border: 1px solid var(--color-border-subtle) !important;
  font-family: inherit !important;
  font-weight: 600 !important;
  border-radius: 8px !important;
  padding: 8px 12px !important;
  font-size: 0.85rem !important;
  line-height: 1.4 !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4) !important;
  backdrop-filter: blur(8px) !important;
  max-width: 240px !important;
}
.v-popper--theme-tooltip .v-popper__arrow-outer,
.v-popper--theme-tooltip .v-popper__arrow-inner {
  visibility: hidden !important;
}
/* Splitpanes theme overrides */
.splitpanes__splitter {
  transition: background 0.15s ease;
}
.splitpanes__splitter:hover {
  background: var(--color-border-default);
}
.splitpanes--horizontal > .splitpanes__splitter {
  height: 6px;
  cursor: row-resize;
}
.splitpanes--vertical > .splitpanes__splitter {
  width: 6px;
  cursor: col-resize;
}
/* Unified Modal Styles */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
}
.modal-content {
  width: 100%;
  background: var(--color-bg-base);
  border: 1px solid var(--color-border-subtle);
  border-radius: 24px;
  box-shadow: var(--shadow-large);
  position: relative;
  display: flex;
  flex-direction: column;
  max-height: 90vh;
  overflow: hidden;
  color: var(--color-text-primary);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.modal-header {
  padding: 2.5rem 2.5rem 1rem 2.5rem;
  flex-shrink: 0;
}
.modal-title {
  font-size: 1.8rem;
  font-weight: 800;
  margin: 0;
  letter-spacing: -0.02em;
  color: var(--color-text-primary);
}
.modal-body {
  padding: 1rem 2.5rem 2.5rem 2.5rem;
  overflow-y: auto;
  flex: 1;
}
.modal-close-btn {
  position: absolute;
  top: 1.5rem;
  right: 1.5rem;
  background: var(--color-bg-subtle);
  border: none;
  color: var(--color-text-secondary);
  font-size: 1.1rem;
  cursor: pointer;
  padding: 0.5rem;
  border-radius: 50%;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
  z-index: 10;
}
.modal-close-btn:hover {
  background: var(--color-bg-elevated);
  color: var(--color-text-primary);
  transform: rotate(90deg);
}
/* Transition: Fade */
.fade-enter-active, .fade-leave-active {
  transition: opacity 0.3s ease;
}
.fade-enter-from, .fade-leave-to {
  opacity: 0;
}
@media (max-width: 640px) {
  .modal-overlay {
    padding: 0;
  }
  .modal-content {
    height: 100vh;
    max-height: 100vh;
    border-radius: 0;
  }
  .modal-header {
    padding: 1.5rem;
  }
  .modal-body {
    padding: 1.5rem;
  }
}