/* Phase 2.5 — app shell design system (tokens generated from design-tokens.json) */

/* BEGIN design-tokens (generated) */
:root,
html[data-theme="light"] {
  --p1-background: #FFFFFF;
  --ds-background: #FFFFFF;
  --p1-surface: #FFFFFF;
  --ds-surface: #FFFFFF;
  --p1-surface-subtle: #F5FAF9;
  --ds-surface-subtle: #F5FAF9;
  --p1-card: #FFFFFF;
  --ds-card: #FFFFFF;
  --p1-text-primary: #1A2B33;
  --ds-text-primary: #1A2B33;
  --p1-text-secondary: #4A606C;
  --ds-text-secondary: #4A606C;
  --p1-text-muted: #6B7F8A;
  --ds-text-muted: #6B7F8A;
  --p1-border: rgba(26, 43, 51, 0.10);
  --ds-border: rgba(26, 43, 51, 0.10);
  --p1-border-strong: rgba(26, 43, 51, 0.18);
  --ds-border-strong: rgba(26, 43, 51, 0.18);
  --p1-primary: #2A9D8F;
  --ds-primary: #2A9D8F;
  --p1-primary-hover: #238B7F;
  --ds-primary-hover: #238B7F;
  --p1-secondary: #4A90C8;
  --ds-secondary: #4A90C8;
  --p1-accent: #D989AB;
  --ds-accent: #D989AB;
  --p1-success: #3F9A68;
  --ds-success: #3F9A68;
  --p1-warning: #C98A2E;
  --ds-warning: #C98A2E;
  --p1-error: #C75B5B;
  --ds-error: #C75B5B;
  --p1-info: #4A90C8;
  --ds-info: #4A90C8;
  --p1-focus: rgba(42, 157, 143, 0.45);
  --ds-focus: rgba(42, 157, 143, 0.45);
  --p1-overlay: rgba(20, 36, 48, 0.36);
  --ds-overlay: rgba(20, 36, 48, 0.36);
  --p1-gradient-start: #FFFFFF;
  --ds-gradient-start: #FFFFFF;
  --p1-gradient-mid: #F7FBFA;
  --ds-gradient-mid: #F7FBFA;
  --p1-gradient-end: #F3F8F9;
  --ds-gradient-end: #F3F8F9;
  --p1-on-primary: #FFFFFF;
  --ds-on-primary: #FFFFFF;
  --p1-primary-muted: rgba(42, 157, 143, 0.12);
  --ds-primary-muted: rgba(42, 157, 143, 0.12);
  --p1-secondary-muted: rgba(74, 144, 200, 0.10);
  --ds-secondary-muted: rgba(74, 144, 200, 0.10);
  --p1-accent-muted: rgba(217, 137, 171, 0.12);
  --ds-accent-muted: rgba(217, 137, 171, 0.12);
  --p1-success-muted: rgba(63, 154, 104, 0.12);
  --ds-success-muted: rgba(63, 154, 104, 0.12);
  --p1-warning-muted: rgba(201, 138, 46, 0.14);
  --ds-warning-muted: rgba(201, 138, 46, 0.14);
  --p1-error-muted: rgba(199, 91, 91, 0.12);
  --ds-error-muted: rgba(199, 91, 91, 0.12);
  --p1-info-muted: rgba(74, 144, 200, 0.12);
  --ds-info-muted: rgba(74, 144, 200, 0.12);
  --p1-input: #F3F8F7;
  --ds-input: #F3F8F7;
  --p1-navigation: rgba(255, 255, 255, 0.94);
  --ds-navigation: rgba(255, 255, 255, 0.94);
  --p1-shadow-subtle: 0 1px 2px rgba(26, 80, 90, 0.04);
  --ds-shadow-subtle: 0 1px 2px rgba(26, 80, 90, 0.04);
  --p1-shadow-card: 0 8px 24px -18px rgba(26, 80, 90, 0.22);
  --ds-shadow-card: 0 8px 24px -18px rgba(26, 80, 90, 0.22);
  --p1-shadow-elevated: 0 14px 36px -20px rgba(26, 80, 90, 0.28);
  --ds-shadow-elevated: 0 14px 36px -20px rgba(26, 80, 90, 0.28);
  --p1-shadow-overlay: 0 18px 48px -16px rgba(20, 36, 48, 0.35);
  --ds-shadow-overlay: 0 18px 48px -16px rgba(20, 36, 48, 0.35);
  --p1-gradient: radial-gradient(880px 420px at 10% -6%, rgba(42,157,143,0.10), transparent 55%), radial-gradient(720px 400px at 94% 0%, rgba(74,144,200,0.08), transparent 52%), linear-gradient(180deg, #FFFFFF 0%, #F7FBFA 48%, #F3F8F9 100%);
  --ds-gradient: radial-gradient(880px 420px at 10% -6%, rgba(42,157,143,0.10), transparent 55%), radial-gradient(720px 400px at 94% 0%, rgba(74,144,200,0.08), transparent 52%), linear-gradient(180deg, #FFFFFF 0%, #F7FBFA 48%, #F3F8F9 100%);
  --p1-text-primary: #1A2B33;
  --p1-text-secondary: #4A606C;
  --p1-shadow: 0 8px 24px -18px rgba(26, 80, 90, 0.22);
  --p1-shadow-banner: 0 1px 2px rgba(26, 80, 90, 0.04);
  --p1-primary-muted: rgba(42, 157, 143, 0.12);
  --p1-secondary-muted: rgba(74, 144, 200, 0.10);
  --p1-accent-muted: rgba(217, 137, 171, 0.12);
  --p1-warning-muted: rgba(201, 138, 46, 0.14);
  --p1-info-muted: rgba(74, 144, 200, 0.12);
  --p1-on-primary: #FFFFFF;
  --p1-space-4: 4px;
  --ds-space-4: 4px;
  --p1-space-8: 8px;
  --ds-space-8: 8px;
  --p1-space-12: 12px;
  --ds-space-12: 12px;
  --p1-space-16: 16px;
  --ds-space-16: 16px;
  --p1-space-20: 20px;
  --ds-space-20: 20px;
  --p1-space-24: 24px;
  --ds-space-24: 24px;
  --p1-space-32: 32px;
  --ds-space-32: 32px;
  --p1-space-40: 40px;
  --ds-space-40: 40px;
  --p1-space-48: 48px;
  --ds-space-48: 48px;
  --p1-radius-small: 8px;
  --ds-radius-small: 8px;
  --p1-radius-medium: 12px;
  --ds-radius-medium: 12px;
  --p1-radius-large: 16px;
  --ds-radius-large: 16px;
  --p1-radius-xl: 20px;
  --ds-radius-xl: 20px;
  --p1-radius-pill: 999px;
  --ds-radius-pill: 999px;
  --p1-radius-sm: 8px;
  --p1-radius-md: 12px;
  --p1-radius-lg: 16px;
  --p1-font-display-weight: 700;
  --p1-font-display-size: 28px;
  --p1-font-display-line: 1.25;
  --ds-font-display-weight: 700;
  --ds-font-display-size: 28px;
  --ds-font-display-line: 1.25;
  --p1-font-heading-weight: 700;
  --p1-font-heading-size: 22px;
  --p1-font-heading-line: 1.35;
  --ds-font-heading-weight: 700;
  --ds-font-heading-size: 22px;
  --ds-font-heading-line: 1.35;
  --p1-font-title-weight: 650;
  --p1-font-title-size: 17px;
  --p1-font-title-line: 1.4;
  --ds-font-title-weight: 650;
  --ds-font-title-size: 17px;
  --ds-font-title-line: 1.4;
  --p1-font-body-weight: 400;
  --p1-font-body-size: 16px;
  --p1-font-body-line: 1.65;
  --ds-font-body-weight: 400;
  --ds-font-body-size: 16px;
  --ds-font-body-line: 1.65;
  --p1-font-body-small-weight: 400;
  --p1-font-body-small-size: 14px;
  --p1-font-body-small-line: 1.55;
  --ds-font-body-small-weight: 400;
  --ds-font-body-small-size: 14px;
  --ds-font-body-small-line: 1.55;
  --p1-font-caption-weight: 500;
  --p1-font-caption-size: 13px;
  --p1-font-caption-line: 1.45;
  --ds-font-caption-weight: 500;
  --ds-font-caption-size: 13px;
  --ds-font-caption-line: 1.45;
  --p1-font-button-weight: 600;
  --p1-font-button-size: 15px;
  --p1-font-button-line: 1.3;
  --ds-font-button-weight: 600;
  --ds-font-button-size: 15px;
  --ds-font-button-line: 1.3;
  --p1-font-label-weight: 600;
  --p1-font-label-size: 12px;
  --p1-font-label-line: 1.35;
  --ds-font-label-weight: 600;
  --ds-font-label-size: 12px;
  --ds-font-label-line: 1.35;
  --p1-font-headline-weight: 700;
  --p1-font-headline-size: 22px;
  --p1-font-headline-line: 1.35;
  --p1-motion-fast: 150ms;
  --p1-motion-base: 220ms;
  --p1-motion-slow: 280ms;
  --p1-motion-ease: cubic-bezier(0.25, 0.1, 0.25, 1);
  --ds-motion-fast: 150ms;
  --ds-motion-base: 220ms;
  --ds-motion-slow: 280ms;
  --ds-motion-ease: cubic-bezier(0.25, 0.1, 0.25, 1);
  --p1-touch-min: 44px;
  --ds-touch-min: 44px;
  --p1-nav-height: 56px;
  --ds-nav-height: 56px;
  --p1-content-max: 640px;
  --ds-content-max: 640px;
  --p1-sheet-max: 760px;
  --ds-sheet-max: 760px;
  --p1-icon-small: 16px;
  --ds-icon-small: 16px;
  --p1-icon-medium: 20px;
  --ds-icon-medium: 20px;
  --p1-icon-large: 24px;
  --ds-icon-large: 24px;
  --p1-touch-min: 44px;
}

html[data-theme="dark"] {
  --p1-background: #243044;
  --ds-background: #243044;
  --p1-surface: #2C3A52;
  --ds-surface: #2C3A52;
  --p1-surface-subtle: #33415A;
  --ds-surface-subtle: #33415A;
  --p1-card: #314059;
  --ds-card: #314059;
  --p1-text-primary: #E8EEF5;
  --ds-text-primary: #E8EEF5;
  --p1-text-secondary: #B0BCCB;
  --ds-text-secondary: #B0BCCB;
  --p1-text-muted: #8E9CAE;
  --ds-text-muted: #8E9CAE;
  --p1-border: rgba(232, 238, 245, 0.12);
  --ds-border: rgba(232, 238, 245, 0.12);
  --p1-border-strong: rgba(232, 238, 245, 0.20);
  --ds-border-strong: rgba(232, 238, 245, 0.20);
  --p1-primary: #5BB8AB;
  --ds-primary: #5BB8AB;
  --p1-primary-hover: #6EC6BA;
  --ds-primary-hover: #6EC6BA;
  --p1-secondary: #7AADD4;
  --ds-secondary: #7AADD4;
  --p1-accent: #C48AA8;
  --ds-accent: #C48AA8;
  --p1-success: #5FB88A;
  --ds-success: #5FB88A;
  --p1-warning: #D4A34A;
  --ds-warning: #D4A34A;
  --p1-error: #D67A7A;
  --ds-error: #D67A7A;
  --p1-info: #7AADD4;
  --ds-info: #7AADD4;
  --p1-focus: rgba(91, 184, 171, 0.50);
  --ds-focus: rgba(91, 184, 171, 0.50);
  --p1-overlay: rgba(12, 18, 28, 0.48);
  --ds-overlay: rgba(12, 18, 28, 0.48);
  --p1-gradient-start: #2C3A52;
  --ds-gradient-start: #2C3A52;
  --p1-gradient-mid: #27344A;
  --ds-gradient-mid: #27344A;
  --p1-gradient-end: #243044;
  --ds-gradient-end: #243044;
  --p1-on-primary: #102018;
  --ds-on-primary: #102018;
  --p1-primary-muted: rgba(91, 184, 171, 0.16);
  --ds-primary-muted: rgba(91, 184, 171, 0.16);
  --p1-secondary-muted: rgba(122, 173, 212, 0.14);
  --ds-secondary-muted: rgba(122, 173, 212, 0.14);
  --p1-accent-muted: rgba(196, 138, 168, 0.14);
  --ds-accent-muted: rgba(196, 138, 168, 0.14);
  --p1-success-muted: rgba(95, 184, 138, 0.14);
  --ds-success-muted: rgba(95, 184, 138, 0.14);
  --p1-warning-muted: rgba(212, 163, 74, 0.16);
  --ds-warning-muted: rgba(212, 163, 74, 0.16);
  --p1-error-muted: rgba(214, 122, 122, 0.14);
  --ds-error-muted: rgba(214, 122, 122, 0.14);
  --p1-info-muted: rgba(122, 173, 212, 0.14);
  --ds-info-muted: rgba(122, 173, 212, 0.14);
  --p1-input: #27344A;
  --ds-input: #27344A;
  --p1-navigation: rgba(44, 58, 82, 0.96);
  --ds-navigation: rgba(44, 58, 82, 0.96);
  --p1-shadow-subtle: 0 1px 2px rgba(0, 0, 0, 0.18);
  --ds-shadow-subtle: 0 1px 2px rgba(0, 0, 0, 0.18);
  --p1-shadow-card: 0 10px 28px -16px rgba(0, 0, 0, 0.38);
  --ds-shadow-card: 0 10px 28px -16px rgba(0, 0, 0, 0.38);
  --p1-shadow-elevated: 0 16px 40px -18px rgba(0, 0, 0, 0.45);
  --ds-shadow-elevated: 0 16px 40px -18px rgba(0, 0, 0, 0.45);
  --p1-shadow-overlay: 0 20px 48px -14px rgba(0, 0, 0, 0.50);
  --ds-shadow-overlay: 0 20px 48px -14px rgba(0, 0, 0, 0.50);
  --p1-gradient: radial-gradient(880px 420px at 8% -4%, rgba(91,184,171,0.10), transparent 55%), radial-gradient(720px 400px at 96% 2%, rgba(122,173,212,0.08), transparent 52%), linear-gradient(180deg, #2C3A52 0%, #27344A 45%, #243044 100%);
  --ds-gradient: radial-gradient(880px 420px at 8% -4%, rgba(91,184,171,0.10), transparent 55%), radial-gradient(720px 400px at 96% 2%, rgba(122,173,212,0.08), transparent 52%), linear-gradient(180deg, #2C3A52 0%, #27344A 45%, #243044 100%);
  --p1-text-primary: #E8EEF5;
  --p1-text-secondary: #B0BCCB;
  --p1-shadow: 0 10px 28px -16px rgba(0, 0, 0, 0.38);
  --p1-shadow-banner: 0 1px 2px rgba(0, 0, 0, 0.18);
  --p1-primary-muted: rgba(91, 184, 171, 0.16);
  --p1-secondary-muted: rgba(122, 173, 212, 0.14);
  --p1-accent-muted: rgba(196, 138, 168, 0.14);
  --p1-warning-muted: rgba(212, 163, 74, 0.16);
  --p1-info-muted: rgba(122, 173, 212, 0.14);
  --p1-on-primary: #102018;
}
/* END design-tokens (generated) */

/* —— Typography —— */
.p1-display {
  margin: 0;
  font-size: var(--p1-font-display-size);
  font-weight: var(--p1-font-display-weight);
  line-height: var(--p1-font-display-line);
  color: var(--p1-text-primary);
}
.p1-headline,
.p1-heading {
  margin: 0;
  font-size: var(--p1-font-heading-size);
  font-weight: var(--p1-font-heading-weight);
  line-height: var(--p1-font-heading-line);
  letter-spacing: -0.02em;
  color: var(--p1-text-primary);
}
.p1-title {
  margin: 0;
  font-size: var(--p1-font-title-size);
  font-weight: var(--p1-font-title-weight);
  line-height: var(--p1-font-title-line);
  color: var(--p1-text-primary);
}
.p1-body {
  margin: 0;
  font-size: var(--p1-font-body-size);
  font-weight: var(--p1-font-body-weight);
  line-height: var(--p1-font-body-line);
  color: var(--p1-text-primary);
}
.p1-body-small {
  margin: 0;
  font-size: var(--p1-font-body-small-size);
  font-weight: var(--p1-font-body-small-weight);
  line-height: var(--p1-font-body-small-line);
  color: var(--p1-text-secondary);
}
.p1-caption,
.p1-label {
  margin: 0;
  font-size: var(--p1-font-caption-size);
  font-weight: var(--p1-font-caption-weight);
  line-height: var(--p1-font-caption-line);
  color: var(--p1-text-muted);
}
.p1-label {
  font-size: var(--p1-font-label-size);
  font-weight: var(--p1-font-label-weight);
  line-height: var(--p1-font-label-line);
  color: var(--p1-text-secondary);
}

/* —— Motion utilities —— */
.p1-fade-in {
  animation: p1-fade-in var(--p1-motion-base) var(--p1-motion-ease) both;
}
.p1-slide-up {
  animation: p1-slide-up var(--p1-motion-base) var(--p1-motion-ease) both;
}
@keyframes p1-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes p1-slide-up {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes p1-soft-rise {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .p1-fade-in,
  .p1-slide-up,
  .p1-today > *,
  .p1-me-story > *,
  .p1-records-story > *,
  .p1-insight-card {
    animation: none !important;
  }
}

/* —— Compact test badge —— */
.p1-test-badge {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: var(--p1-space-4);
  min-height: 28px;
  padding: var(--p1-space-4) var(--p1-space-8);
  border-radius: var(--p1-radius-sm);
  font-size: var(--p1-font-caption-size);
  font-weight: var(--p1-font-caption-weight);
  letter-spacing: 0.02em;
  color: var(--p1-text-primary);
  background: var(--p1-surface);
  border: 1px solid var(--p1-border);
  box-shadow: var(--p1-shadow-banner);
  pointer-events: auto;
  max-width: 100%;
}
.p1-test-badge-zone {
  position: fixed;
  top: max(var(--p1-space-8), env(safe-area-inset-top));
  left: max(5.5rem, calc(env(safe-area-inset-left) + 4.5rem));
  right: max(5.5rem, calc(env(safe-area-inset-right) + 4.5rem));
  z-index: 910;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--p1-space-4);
  min-height: 2rem;
  pointer-events: none;
}
.p1-test-badge-zone > .p1-test-badge { flex: 0 1 auto; }
.p1-test-badge-zone { overflow: visible; }
.p1-test-badge[hidden] { display: none !important; }
.p1-test-badge[data-mode="premium"] {
  border-color: color-mix(in srgb, var(--p1-accent) 45%, transparent);
  background: color-mix(in srgb, var(--p1-accent-muted) 80%, var(--p1-surface));
}
.p1-test-badge[data-mode="guest"] {
  border-color: color-mix(in srgb, var(--p1-secondary) 45%, transparent);
}
.p1-test-badge[data-mode="actual"] {
  border-color: var(--p1-border);
}
.p1-test-badge__end {
  min-height: 24px;
  min-width: 24px;
  border: 0;
  border-radius: var(--p1-radius-pill);
  background: var(--p1-primary-muted);
  color: inherit;
  font-size: 0.65rem;
  font-weight: 700;
  cursor: pointer;
  padding: 0 var(--p1-space-8);
}

/* —— Banner system (shared geometry) —— */
.p1-banner,
.p1-service-state {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--p1-space-12);
  align-items: start;
  padding: var(--p1-space-12) var(--p1-space-16);
  border-radius: var(--p1-radius-md);
  border: 1px solid var(--p1-border);
  box-shadow: var(--p1-shadow-banner);
  background: var(--p1-card);
  color: var(--p1-text-primary);
}
/* Cards that borrow banner color language keep block layout */
.p1-banner.p1-card {
  display: block;
  grid-template-columns: unset;
  gap: unset;
  padding: var(--p1-space-24) var(--p1-space-16);
  border-radius: var(--p1-radius-lg);
  box-shadow: var(--p1-shadow);
}
.p1-banner__icon {
  width: 24px;
  height: 24px;
  margin-top: 2px;
  color: var(--p1-secondary);
  flex-shrink: 0;
}
.p1-banner__body { min-width: 0; }
.p1-banner__title {
  margin: 0;
  font-size: var(--p1-font-body-size);
  font-weight: var(--p1-font-headline-weight);
  line-height: var(--p1-font-caption-line);
}
.p1-banner__subtitle {
  margin: var(--p1-space-4) 0 0;
  font-size: var(--p1-font-caption-size);
  font-weight: var(--p1-font-body-weight);
  line-height: var(--p1-font-caption-line);
  color: var(--p1-text-secondary);
}
.p1-banner--info,
.p1-banner--insight {
  background: color-mix(in srgb, var(--p1-info-muted) 75%, var(--p1-card));
  border-color: color-mix(in srgb, var(--p1-info) 28%, transparent);
}
.p1-banner--info .p1-banner__icon,
.p1-banner--insight .p1-banner__icon { color: var(--p1-info); }
.p1-banner--success {
  background: color-mix(in srgb, var(--p1-success-muted) 75%, var(--p1-card));
  border-color: color-mix(in srgb, var(--p1-success) 28%, transparent);
}
.p1-banner--success .p1-banner__icon { color: var(--p1-success); }
.p1-banner--warning,
.p1-service-state[data-state="service_error"],
.p1-service-state[data-state="offline"],
.p1-service-state[data-state="entitlement_error"] {
  background: color-mix(in srgb, var(--p1-warning-muted) 75%, var(--p1-card));
  border-color: color-mix(in srgb, var(--p1-warning) 32%, transparent);
}
.p1-banner--warning .p1-banner__icon { color: var(--p1-warning); }
.p1-banner--error,
.p1-service-state[data-state="authentication_error"],
.p1-service-state[data-state="session_expired"] {
  background: color-mix(in srgb, var(--p1-error-muted) 75%, var(--p1-card));
  border-color: color-mix(in srgb, var(--p1-error) 32%, transparent);
}
.p1-banner--error .p1-banner__icon { color: var(--p1-error); }
.p1-banner--premium {
  background: linear-gradient(180deg, color-mix(in srgb, var(--p1-accent-muted) 55%, var(--p1-card)), var(--p1-card));
  border-color: color-mix(in srgb, var(--p1-accent) 26%, transparent);
}
.p1-banner--premium .p1-banner__icon { color: var(--p1-accent); }
.p1-banner--test-mode,
.p1-banner--identity {
  background: var(--p1-surface-subtle);
  border-color: color-mix(in srgb, var(--p1-secondary) 26%, transparent);
}
.p1-banner--test-mode .p1-banner__icon,
.p1-banner--identity .p1-banner__icon { color: var(--p1-secondary); }

.p1-service-state {
  position: sticky;
  top: 0;
  z-index: 1100;
  display: block;
  text-align: center;
  font-size: var(--p1-font-caption-size);
  font-weight: var(--p1-font-caption-weight);
  border-radius: 0;
  border-left: 0;
  border-right: 0;
  border-top: 0;
  box-shadow: none;
  color: var(--p1-text-primary);
}
.p1-service-state[data-state="maintenance"] {
  background: color-mix(in srgb, var(--p1-info-muted) 80%, var(--p1-card));
  border-color: color-mix(in srgb, var(--p1-info) 30%, transparent);
}

/* When Phase 1 shell is active on mobile, hide marketing chrome */
body.p1-shell-active {
  background: var(--p1-gradient);
  color: var(--p1-text-primary);
}

/* Early boot: hide legacy chrome until the selected shell reveals (see index.html). */
html.kbazy-shell-boot.kbazy-shell-phase1 body > .workspace-shell,
html.kbazy-shell-boot.kbazy-shell-phase1 body > .skip-link,
html.kbazy-shell-boot.kbazy-shell-phase1 body > .internal-test-session-banner,
html.kbazy-shell-boot.kbazy-shell-phase1 #site-announcement-bar,
html.kbazy-shell-boot.kbazy-shell-phase1 .site-footer,
html.kbazy-shell-boot.kbazy-shell-phase1 #dash-premium-fab,
html.kbazy-shell-boot.kbazy-shell-phase1 #dash-premium-drawer,
html.kbazy-shell-boot.kbazy-shell-phase1 .product-hero,
html.kbazy-shell-boot.kbazy-shell-phase1 .guest-chip {
  visibility: hidden !important;
  pointer-events: none !important;
}
html.kbazy-shell-boot.kbazy-shell-legacy #p1-app-shell {
  display: none !important;
}
@media (max-width: 767px) {
  body.p1-shell-active:not(.p1-reveal-legacy) > .workspace-shell,
  body.p1-shell-active:not(.p1-reveal-legacy) > .skip-link,
  body.p1-shell-active:not(.p1-reveal-legacy) > .internal-test-session-banner,
  body.p1-shell-active:not(.p1-reveal-legacy) .site-footer,
  body.p1-shell-active:not(.p1-reveal-legacy) #dash-premium-fab,
  body.p1-shell-active:not(.p1-reveal-legacy) #dash-premium-drawer,
  body.p1-shell-active:not(.p1-reveal-legacy) #site-announcement-bar {
    display: none !important;
  }
  body.p1-shell-active .p1-app-shell {
    position: fixed;
    inset: 0;
    z-index: 850;
    background: var(--p1-gradient);
  }
}

.p1-app-shell {
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
  background: transparent;
  color: var(--p1-text-primary);
}
.p1-app-main {
  flex: 1;
  overflow: auto;
  padding: var(--p1-space-20) var(--p1-space-16) calc(var(--p1-space-48) + var(--p1-space-32));
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
  overscroll-behavior-y: contain;
}
body.p1-test-badge-visible .p1-app-main {
  padding-top: calc(var(--p1-space-20) + 2.75rem);
}
body.p1-shell-active.p1-test-badge-visible .p1-app-main {
  padding-top: calc(var(--p1-space-20) + 2.75rem);
}
.p1-panel { max-width: 40rem; margin: 0 auto; }
.p1-panel-head { margin-bottom: var(--p1-space-20); }
.p1-panel-title {
  margin: 0;
  font-size: var(--p1-font-headline-size);
  font-weight: var(--p1-font-headline-weight);
  line-height: var(--p1-font-headline-line);
  letter-spacing: -0.02em;
}
.p1-panel-lead {
  margin: var(--p1-space-8) 0 0;
  color: var(--p1-text-secondary);
  font-size: var(--p1-font-body-size);
  font-weight: var(--p1-font-body-weight);
  line-height: var(--p1-font-body-line);
}

/* —— Bottom navigation —— */
.p1-tabbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 900;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--p1-space-4);
  padding: var(--p1-space-8) var(--p1-space-8) calc(var(--p1-space-8) + env(safe-area-inset-bottom));
  background: var(--p1-navigation);
  border-top: 1px solid var(--p1-border);
  backdrop-filter: blur(10px);
}

/* Current-shell utility menu: one dialog owner at every breakpoint. */
.p1-utility-trigger {
  position: fixed;
  top: max(var(--p1-space-12), env(safe-area-inset-top));
  right: var(--p1-space-12);
  z-index: 920;
  min-width: var(--p1-touch-min);
  min-height: var(--p1-touch-min);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--p1-space-4);
  border: 1px solid var(--p1-border);
  border-radius: var(--p1-radius-sm);
  background: var(--p1-navigation);
  color: var(--p1-text-primary);
  box-shadow: var(--p1-shadow-subtle);
  cursor: pointer;
}
.p1-utility-trigger:focus-visible,
.p1-utility-dialog :focus-visible { outline: 2px solid var(--p1-focus); outline-offset: 2px; }
.p1-utility-dialog {
  width: min(30rem, calc(100vw - 2 * var(--p1-space-16)));
  max-height: min(42rem, calc(100dvh - 2 * var(--p1-space-16)));
  margin: auto;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--p1-border-strong);
  border-radius: var(--p1-radius-large);
  background: var(--p1-surface);
  color: var(--p1-text-primary);
  box-shadow: var(--p1-shadow-overlay);
}
.p1-utility-dialog::backdrop { background: var(--p1-overlay); }
.p1-utility-head { display: flex; align-items: center; justify-content: space-between; gap: var(--p1-space-12); padding: var(--p1-space-16); border-bottom: 1px solid var(--p1-border); }
.p1-utility-head h2, .p1-utility-group h3 { margin: 0; font: inherit; font-weight: var(--p1-font-headline-weight); color: var(--p1-text-primary); }
.p1-utility-scroll { max-height: min(34rem, calc(100dvh - 10rem)); overflow: auto; padding: var(--p1-space-8) var(--p1-space-16) var(--p1-space-20); }
.p1-utility-group { display: grid; gap: var(--p1-space-4); padding: var(--p1-space-16) 0; border-bottom: 1px solid var(--p1-border); }
.p1-utility-group--internal { border-top: 2px solid var(--p1-border-strong); }
.p1-utility-row, .p1-utility-choice { display: flex; align-items: center; justify-content: space-between; gap: var(--p1-space-12); min-height: var(--p1-touch-min); padding: var(--p1-space-8) var(--p1-space-12); border: 0; border-radius: var(--p1-radius-sm); background: transparent; color: var(--p1-text-primary); font: inherit; text-align: left; text-decoration: none; }
.p1-utility-row { cursor: pointer; }
.p1-utility-row:hover { background: var(--p1-surface-subtle); }
.p1-utility-row--danger { color: var(--p1-error); }
.p1-utility-account { display: grid; gap: var(--p1-space-8); }
.p1-utility-account--loading {
  min-height: var(--p1-touch-min);
  display: flex;
  align-items: center;
  padding: var(--p1-space-8) var(--p1-space-12);
  color: var(--p1-text-secondary);
}
.p1-utility-account-summary {
  display: flex;
  align-items: center;
  gap: var(--p1-space-12);
  min-height: var(--p1-touch-min);
  padding: var(--p1-space-8) var(--p1-space-12);
  border-radius: var(--p1-radius-sm);
  background: var(--p1-surface-subtle);
}
.p1-utility-avatar {
  flex: 0 0 auto;
  width: 2.25rem;
  height: 2.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: color-mix(in srgb, var(--p1-primary-muted) 70%, transparent);
  color: var(--p1-primary);
  font-size: 0.95rem;
  font-weight: var(--p1-font-headline-weight);
}
.p1-utility-account-meta { display: grid; gap: 0.1rem; min-width: 0; }
.p1-utility-account-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: var(--p1-font-headline-weight);
  color: var(--p1-text-primary);
}
.p1-utility-account-access,
.p1-utility-account-methods {
  margin: 0;
  padding: 0 var(--p1-space-12);
  color: var(--p1-text-secondary);
  font-size: var(--p1-font-caption-size);
}
.p1-utility-account-methods-label { font-weight: var(--p1-font-caption-weight); }
.p1-utility-methods { display: grid; gap: var(--p1-space-4); }
.p1-utility-method {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--p1-space-12);
  min-height: var(--p1-touch-min);
  padding: var(--p1-space-8) var(--p1-space-12);
  border-radius: var(--p1-radius-sm);
  background: var(--p1-surface-subtle);
  color: var(--p1-text-primary);
  font-size: var(--p1-font-caption-size);
}
.p1-utility-method-state { color: var(--p1-text-secondary); }
.p1-utility-link-email { display: grid; gap: var(--p1-space-4); }
.p1-utility-choice--stack {
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
}
.p1-utility-choice--stack input {
  width: 100%;
  min-height: var(--p1-touch-min);
  border: 1px solid var(--p1-border);
  border-radius: var(--p1-radius-sm);
  background: var(--p1-input);
  color: var(--p1-text-primary);
  padding: var(--p1-space-8) var(--p1-space-12);
  font: inherit;
}
.p1-utility-link-status {
  margin: 0;
  padding: 0 var(--p1-space-12);
  color: var(--p1-text-secondary);
  font-size: var(--p1-font-caption-size);
}
.p1-utility-link-status.is-error { color: var(--p1-error); }
@media (max-width: 384px) {
  .p1-utility-dialog {
    width: calc(100vw - 1.25rem);
    max-height: calc(100dvh - 1rem);
  }
  .p1-utility-account-summary { padding-inline: var(--p1-space-8); }
  .p1-utility-method { padding-inline: var(--p1-space-8); }
}
.p1-utility-choice select { max-width: 58%; min-height: var(--p1-touch-min); border: 1px solid var(--p1-border); border-radius: var(--p1-radius-sm); background: var(--p1-input); color: var(--p1-text-primary); }
.p1-tab {
  min-height: var(--p1-touch-min);
  border: 0;
  background: transparent;
  color: var(--p1-text-secondary);
  font-size: var(--p1-font-caption-size);
  font-weight: var(--p1-font-caption-weight);
  border-radius: var(--p1-radius-sm);
  cursor: pointer;
  transition: color var(--p1-motion-fast) var(--p1-motion-ease),
    background var(--p1-motion-fast) var(--p1-motion-ease),
    transform var(--p1-motion-fast) var(--p1-motion-ease);
}
.p1-tab:hover {
  color: var(--p1-text-primary);
  background: color-mix(in srgb, var(--p1-primary-muted) 45%, transparent);
}
.p1-tab:focus-visible {
  outline: 2px solid var(--p1-focus);
  outline-offset: 2px;
}
.p1-tab:active {
  transform: scale(0.97);
}
.p1-tab.is-active {
  color: var(--p1-primary);
  background: var(--p1-primary-muted);
  font-weight: var(--p1-font-headline-weight);
}

/* —— Card system —— */
.p1-card {
  background: var(--p1-card);
  border: 1px solid transparent;
  border-radius: var(--p1-radius-large);
  box-shadow: var(--p1-shadow-card);
  padding: var(--p1-space-24) var(--p1-space-16);
  margin-bottom: var(--p1-space-12);
  transition: box-shadow var(--p1-motion-fast) var(--p1-motion-ease),
    background var(--p1-motion-fast) var(--p1-motion-ease),
    transform var(--p1-motion-fast) var(--p1-motion-ease);
}
.p1-card--primary { /* default reading card */ }
.p1-card--secondary {
  background: var(--p1-surface-subtle);
  box-shadow: var(--p1-shadow-subtle);
}
.p1-card--interactive {
  cursor: pointer;
}
.p1-card--interactive:hover {
  box-shadow: var(--p1-shadow-elevated);
}
.p1-card--interactive:active {
  background: color-mix(in srgb, var(--p1-primary-muted) 40%, var(--p1-card));
  transform: scale(0.992);
}
.p1-card--quiet,
.p1-card--thoughts {
  border-style: dashed;
  border-color: color-mix(in srgb, var(--p1-primary) 18%, transparent);
  background: color-mix(in srgb, var(--p1-surface) 55%, transparent);
  box-shadow: none;
}
.p1-card--journal,
.p1-insight-card {
  border-color: transparent;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--p1-primary) 3.5%, var(--p1-surface)), var(--p1-card));
  box-shadow: var(--p1-shadow-card);
}
.p1-card--premium-home,
.p1-banner.p1-card--premium-home {
  border-color: color-mix(in srgb, var(--p1-accent) 28%, transparent);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--p1-accent-muted) 55%, var(--p1-card)), var(--p1-card));
  box-shadow: var(--p1-shadow-banner);
}
.p1-card-title {
  margin: 0 0 var(--p1-space-8);
  font-size: var(--p1-font-body-size);
  font-weight: var(--p1-font-headline-weight);
  line-height: var(--p1-font-headline-line);
}
.p1-date {
  margin: 0;
  font-size: var(--p1-font-caption-size);
  font-weight: var(--p1-font-caption-weight);
  color: var(--p1-text-secondary);
  line-height: var(--p1-font-caption-line);
}
.p1-today-hero-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--p1-space-12);
  margin: 0 0 var(--p1-space-8);
}
.p1-today-hero-top .p1-date {
  margin: 0;
  flex: 1 1 auto;
  min-width: 0;
}
.p1-today-locale {
  flex: 0 0 auto;
  margin: 0;
  line-height: 1;
}
.p1-today-locale-select {
  display: block;
  max-width: 9.75rem;
  min-height: 1.75rem;
  padding: 0.15rem 0.35rem;
  border: 0;
  border-radius: var(--p1-radius-sm);
  background: transparent;
  color: var(--p1-text-muted);
  font: inherit;
  font-size: var(--p1-font-caption-size);
  font-weight: var(--p1-font-caption-weight);
  line-height: var(--p1-font-caption-line);
  cursor: pointer;
  appearance: auto;
}
.p1-today-locale-select:hover,
.p1-today-locale-select:focus-visible {
  color: var(--p1-text-secondary);
  background: color-mix(in srgb, var(--p1-surface) 70%, transparent);
  outline: none;
}
.p1-today-locale-select:focus-visible {
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--p1-border) 80%, transparent);
}
.p1-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.p1-greeting {
  margin: var(--p1-space-8) 0 var(--p1-space-16);
  font-size: var(--p1-font-body-size);
  font-weight: var(--p1-font-body-weight);
  color: var(--p1-text-secondary);
  line-height: var(--p1-font-body-line);
}
.p1-role-badge {
  display: inline-flex;
  margin: 0 0 var(--p1-space-16);
  padding: var(--p1-space-4) var(--p1-space-12);
  border-radius: var(--p1-radius-pill);
  font-size: var(--p1-font-caption-size);
  font-weight: var(--p1-font-caption-weight);
  color: var(--p1-primary);
  background: var(--p1-primary-muted);
  border: 1px solid transparent;
}
.p1-core,
.p1-insight-card .p1-core {
  margin: 0 0 var(--p1-space-20);
  max-width: 38rem;
  font-size: clamp(1.45rem, 1.2rem + 0.7vw, 2rem);
  line-height: 1.32;
  letter-spacing: -0.02em;
  font-weight: var(--p1-font-headline-weight);
  color: var(--p1-text-primary);
}
.p1-para {
  margin: 0 0 var(--p1-space-20);
  color: var(--p1-text-primary);
  font-size: var(--p1-font-body-size);
  font-weight: var(--p1-font-body-weight);
  line-height: var(--p1-font-body-line);
}
.p1-para--soft {
  color: var(--p1-text-secondary);
}
.p1-para + .p1-para {
  margin-top: calc(var(--p1-space-4) * -1);
}
.p1-today-narrative {
  max-width: 42rem;
  margin-bottom: var(--p1-space-32);
}
.p1-today-narrative .p1-para {
  margin-bottom: var(--p1-space-20);
}
.p1-today-narrative .p1-para + .p1-para {
  margin-top: var(--p1-space-12);
}
.p1-today-narrative .p1-para--primary {
  font-size: 1.05rem;
  line-height: 1.8;
}
.p1-today-narrative .p1-para--supporting {
  color: var(--p1-text-secondary);
  font-size: var(--p1-font-body-small-size);
  line-height: 1.72;
}
.p1-action {
  margin: var(--p1-space-32) 0 var(--p1-space-16);
  padding: var(--p1-space-16) var(--p1-space-16);
  border-radius: var(--p1-radius-md);
  background: var(--p1-secondary-muted);
  border: 0;
}
.p1-action-label {
  display: block;
  margin-bottom: var(--p1-space-4);
  font-size: var(--p1-font-caption-size);
  font-weight: var(--p1-font-caption-weight);
  color: var(--p1-secondary);
  letter-spacing: 0.02em;
}
.p1-muted {
  color: var(--p1-text-muted);
  font-size: var(--p1-font-body-small-size);
  font-weight: var(--p1-font-body-small-weight);
  line-height: var(--p1-font-body-small-line);
}
.p1-tiny { font-size: var(--p1-font-caption-size); }

/* —— Buttons (primary / secondary / ghost / text) —— */
.p1-actions-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--p1-space-8);
  margin-top: var(--p1-space-20);
}
.p1-btn {
  min-height: var(--p1-touch-min);
  padding: var(--p1-space-12) var(--p1-space-20);
  border-radius: var(--p1-radius-md);
  border: 1px solid transparent;
  font-size: var(--p1-font-body-size);
  font-weight: var(--p1-font-caption-weight);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background var(--p1-motion-fast) var(--p1-motion-ease),
    color var(--p1-motion-fast) var(--p1-motion-ease),
    border-color var(--p1-motion-fast) var(--p1-motion-ease),
    box-shadow var(--p1-motion-fast) var(--p1-motion-ease),
    transform var(--p1-motion-fast) var(--p1-motion-ease);
}
.p1-btn:focus-visible {
  outline: 2px solid var(--p1-focus);
  outline-offset: 2px;
}
.p1-btn:active:not(:disabled) {
  transform: scale(0.98);
}
.p1-btn--primary {
  background: var(--p1-primary);
  color: var(--p1-on-primary);
  box-shadow: var(--p1-shadow-subtle);
}
.p1-btn--primary:hover,
.p1-btn--primary:focus-visible {
  background: var(--p1-primary-hover);
}
.p1-btn--primary:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}
.p1-btn--secondary {
  background: var(--p1-secondary-muted);
  color: var(--p1-secondary);
  border-color: color-mix(in srgb, var(--p1-secondary) 22%, transparent);
}
.p1-btn--secondary:hover,
.p1-btn--secondary:focus-visible {
  background: color-mix(in srgb, var(--p1-secondary-muted) 70%, var(--p1-card));
  border-color: color-mix(in srgb, var(--p1-secondary) 36%, transparent);
}
.p1-btn--ghost {
  background: transparent;
  color: var(--p1-text-secondary);
  border-color: var(--p1-border);
}
.p1-btn--ghost:hover,
.p1-btn--ghost:focus-visible {
  background: color-mix(in srgb, var(--p1-primary-muted) 50%, transparent);
  color: var(--p1-text-primary);
  border-color: var(--p1-border-strong);
}
.p1-btn--text,
.p1-text-link {
  background: transparent;
  border: 0;
  color: var(--p1-secondary);
  font-size: var(--p1-font-button-size);
  font-weight: var(--p1-font-button-weight);
  text-decoration: underline;
  text-underline-offset: 0.18em;
  cursor: pointer;
  padding: var(--p1-space-8) 0;
  min-height: var(--p1-touch-min);
  transition: color var(--p1-motion-fast) var(--p1-motion-ease),
    opacity var(--p1-motion-fast) var(--p1-motion-ease);
}
.p1-btn--text:hover,
.p1-text-link:hover {
  color: var(--p1-primary);
}
.p1-btn--text:focus-visible,
.p1-text-link:focus-visible {
  outline: 2px solid var(--p1-focus);
  outline-offset: 2px;
  border-radius: var(--p1-radius-sm);
}
a.p1-text-link,
a.p1-btn--text {
  display: inline-flex;
  align-items: center;
}
.p1-icon-btn {
  min-width: var(--p1-touch-min);
  min-height: var(--p1-touch-min);
  border: 0;
  background: transparent;
  font-size: 1.4rem;
  color: var(--p1-text-secondary);
  cursor: pointer;
  border-radius: var(--p1-radius-sm);
  transition: background var(--p1-motion-fast) var(--p1-motion-ease),
    color var(--p1-motion-fast) var(--p1-motion-ease);
}
.p1-icon-btn:hover,
.p1-icon-btn:focus-visible {
  background: var(--p1-primary-muted);
  color: var(--p1-text-primary);
}
.p1-icon-btn:focus-visible {
  outline: 2px solid var(--p1-focus);
  outline-offset: 2px;
}

/* —— Chips / tags —— */
.p1-credit-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--p1-space-8);
  margin: var(--p1-space-8) 0;
}
.p1-chip,
.p1-tag {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  font-size: var(--p1-font-caption-size);
  font-weight: var(--p1-font-caption-weight);
  padding: var(--p1-space-4) var(--p1-space-8);
  border-radius: var(--p1-radius-sm);
  background: var(--p1-primary-muted);
  color: var(--p1-primary);
  border: 1px solid transparent;
}
.p1-chip--premium,
.p1-tag--accent {
  background: var(--p1-accent-muted);
  color: color-mix(in srgb, var(--p1-accent) 70%, var(--p1-text-primary));
}
.p1-tag--info {
  background: var(--p1-info-muted);
  color: var(--p1-secondary);
}

/* —— Lists / section headers (More) —— */
.p1-section-header,
.p1-section-label {
  margin: 0 0 var(--p1-space-12);
  font-size: var(--p1-font-caption-size);
  font-weight: var(--p1-font-caption-weight);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--p1-text-secondary);
}
.p1-list,
.p1-link-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  border: 1px solid transparent;
  border-radius: var(--p1-radius-md);
  background: var(--p1-card);
  overflow: hidden;
  margin-bottom: var(--p1-space-20);
  box-shadow: var(--p1-shadow-subtle);
}
.p1-list-row,
.p1-link-card {
  display: flex;
  align-items: center;
  min-height: var(--p1-touch-min);
  padding: var(--p1-space-12) var(--p1-space-16);
  border: 0;
  border-bottom: 1px solid color-mix(in srgb, var(--p1-border) 70%, transparent);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: inherit;
  text-decoration: none;
  font-weight: var(--p1-font-caption-weight);
  font-size: var(--p1-font-body-size);
  text-align: left;
  cursor: pointer;
  width: 100%;
  transition: background var(--p1-motion-fast) var(--p1-motion-ease),
    color var(--p1-motion-fast) var(--p1-motion-ease);
}
.p1-list-row:last-child,
.p1-link-card:last-child {
  border-bottom: 0;
}
.p1-list-row:hover,
.p1-link-card:hover {
  background: color-mix(in srgb, var(--p1-primary-muted) 55%, transparent);
}
.p1-list-row:focus-visible,
.p1-link-card:focus-visible {
  outline: 2px solid var(--p1-focus);
  outline-offset: -2px;
  z-index: 1;
}
.p1-list-row:active,
.p1-link-card:active {
  background: var(--p1-primary-muted);
}

.p1-day-card {
  display: grid;
  grid-template-columns: 88px 1fr;
  gap: var(--p1-space-16);
  align-items: start;
}
.p1-day-card-trigger {
  display: grid;
  grid-template-columns: 88px 1fr;
  gap: var(--p1-space-16);
  align-items: start;
  width: 100%;
  padding: 0;
  border: 0;
  color: inherit;
  text-align: left;
  background: transparent;
  cursor: pointer;
  border-radius: var(--p1-radius-md);
}
.p1-day-card-trigger:focus-visible {
  outline: 3px solid var(--p1-focus);
  outline-offset: 5px;
}
.p1-day-card-trigger .p1-day-card-copy {
  display: grid;
  gap: var(--p1-space-8);
}
.p1-day-card-trigger .p1-action {
  color: var(--p1-primary);
  font-weight: var(--p1-font-body-weight);
}
.p1-day-card-media img {
  width: 88px;
  height: 88px;
  object-fit: contain;
  border-radius: var(--p1-radius-md);
  background: var(--p1-primary-muted);
}
.p1-card-sheet-body { text-align: center; }
.p1-card-sheet-image {
  display: block;
  width: min(240px, 72vw);
  height: auto;
  margin: 0 auto var(--p1-space-12);
  border-radius: var(--p1-radius-md);
  box-shadow: var(--p1-shadow);
}
.p1-card-sheet-name {
  margin: 0 0 var(--p1-space-16);
  color: var(--p1-text-secondary);
  font-weight: var(--p1-font-headline-weight);
}
.p1-card-sheet-prompt {
  margin: var(--p1-space-20) 0 var(--p1-space-12);
  padding: var(--p1-space-16);
  border-radius: var(--p1-radius-md);
  background: var(--p1-primary-muted);
}
@media (max-width: 380px) {
  .p1-day-card,
  .p1-day-card-trigger { grid-template-columns: 1fr; }
}

/* —— Sheets / dialogs —— */
.p1-sheet,
.p1-dialog {
  position: fixed;
  inset: 0;
  z-index: 1300;
}
.p1-sheet[hidden],
.p1-dialog[hidden] { display: none !important; }
.p1-sheet-backdrop,
.p1-dialog-backdrop {
  position: absolute;
  inset: 0;
  background: var(--p1-overlay);
  animation: p1-fade-in var(--p1-motion-fast) var(--p1-motion-ease) both;
}
.p1-sheet-panel {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  max-height: min(88dvh, 760px);
  overflow: auto;
  background: var(--p1-surface);
  color: var(--p1-text-primary);
  border-radius: var(--p1-radius-lg) var(--p1-radius-lg) 0 0;
  padding: var(--p1-space-16) var(--p1-space-16) calc(var(--p1-space-16) + env(safe-area-inset-bottom));
  box-shadow: var(--p1-shadow);
  animation: p1-slide-up var(--p1-motion-base) var(--p1-motion-ease) both;
}
.p1-dialog-panel {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(400px, calc(100% - var(--p1-space-32)));
  max-height: min(80dvh, 640px);
  overflow: auto;
  background: var(--p1-surface);
  color: var(--p1-text-primary);
  border-radius: var(--p1-radius-lg);
  padding: var(--p1-space-24) var(--p1-space-16);
  box-shadow: var(--p1-shadow);
  border: 1px solid var(--p1-border);
  animation: p1-fade-in var(--p1-motion-base) var(--p1-motion-ease) both;
}
@media (min-width: 900px) {
  .p1-sheet-panel {
    left: auto;
    top: 0;
    bottom: 0;
    width: min(420px, 100%);
    max-height: none;
    border-radius: 0;
    animation: none;
  }
}
.p1-sheet-head,
.p1-dialog-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--p1-space-8);
  margin-bottom: var(--p1-space-16);
}
.p1-sheet-head h2,
.p1-dialog-head h2 {
  margin: 0;
  font-size: var(--p1-font-body-size);
  font-weight: var(--p1-font-headline-weight);
}
.p1-evidence-block { margin-bottom: var(--p1-space-16); }
.p1-sheet-panel,
.p1-sheet-body,
.p1-evidence-block,
.p1-calculation-evidence,
.p1-calculation-panel-card { box-sizing: border-box; min-width: 0; }
.p1-sheet-body {
  overflow-wrap: anywhere;
}
.p1-evidence-block {
  margin-bottom: var(--p1-space-20);
  padding: var(--p1-space-16);
  border: 1px solid var(--p1-border);
  border-radius: var(--p1-radius-md);
  background: var(--p1-surface-subtle);
}
.p1-evidence-block > h3 {
  margin: 0 0 var(--p1-space-12);
  font-size: 1rem;
  line-height: 1.35;
}
.p1-evidence-block > p {
  margin: 0 0 var(--p1-space-8);
  line-height: 1.65;
}
.p1-evidence-block > p:last-child { margin-bottom: 0; }
.p1-evidence-block--calculation,
.p1-evidence-block--calculation-detail {
  background: var(--p1-surface);
}
.p1-evidence-block--calculation > h3,
.p1-evidence-block--calculation-detail > h3 {
  color: var(--p1-text-primary);
  font-size: 1.05rem;
}
.p1-evidence-block--connection .p1-evidence-list {
  margin-top: var(--p1-space-12);
}
.p1-evidence-list {
  margin: var(--p1-space-8) 0 0;
  padding-left: var(--p1-space-24);
  line-height: var(--p1-font-body-line);
}
.p1-share-mode {
  border: 0;
  margin: 0 0 var(--p1-space-12);
  padding: 0;
  display: grid;
  gap: var(--p1-space-8);
}
.p1-check {
  display: flex;
  gap: var(--p1-space-8);
  align-items: center;
  min-height: var(--p1-touch-min);
  margin-bottom: var(--p1-space-4);
}
.p1-share-preview {
  width: 100%;
  border-radius: var(--p1-radius-md);
  border: 1px solid var(--p1-border);
  margin-top: var(--p1-space-12);
}

.p1-reflection-host .reflection-card,
.p1-reflection-host {
  color: inherit;
}

/* Tablet and narrow desktop: one reading flow, no squeezed companion rail. */
@media (min-width: 768px) and (max-width: 1179px) {
  body.p1-shell-active:not(.p1-reveal-legacy) > .workspace-shell,
  body.p1-shell-active:not(.p1-reveal-legacy) > .skip-link,
  body.p1-shell-active:not(.p1-reveal-legacy) > .internal-test-session-banner,
  body.p1-shell-active:not(.p1-reveal-legacy) .site-footer,
  body.p1-shell-active:not(.p1-reveal-legacy) #dash-premium-fab,
  body.p1-shell-active:not(.p1-reveal-legacy) #dash-premium-drawer,
  body.p1-shell-active:not(.p1-reveal-legacy) #site-announcement-bar {
    display: none !important;
  }
  body.p1-shell-active .p1-app-shell {
    max-width: 680px;
    margin: 0 auto;
    border-left: 1px solid var(--p1-border);
    border-right: 1px solid var(--p1-border);
    background: var(--p1-gradient);
  }
  body.p1-shell-active:not(.p1-reveal-legacy) .product-hero,
  body.p1-shell-active:not(.p1-reveal-legacy) .guest-chip {
    display: none !important;
  }
}

/* —— Phase 2.6B Desktop Companion Shell (≥1024) ——
 * Restraint: unused space is intentional. If the companion rail has no
 * meaningful support content, collapse it — never invent filler widgets.
 */
.p1-tab-icon {
  display: none;
}
.p1-companion-rail {
  display: none;
}

@media (min-width: 1180px) {
  /* Companion mode: application owns the viewport — no Sprint 23 dual chrome */
  body.p1-shell-active:not(.p1-reveal-legacy) > .workspace-shell,
  body.p1-shell-active:not(.p1-reveal-legacy) > .skip-link,
  body.p1-shell-active:not(.p1-reveal-legacy) > .internal-test-session-banner,
  body.p1-shell-active:not(.p1-reveal-legacy) .site-footer,
  body.p1-shell-active:not(.p1-reveal-legacy) #dash-premium-fab,
  body.p1-shell-active:not(.p1-reveal-legacy) #dash-premium-drawer,
  body.p1-shell-active:not(.p1-reveal-legacy) #site-announcement-bar,
  body.p1-shell-active:not(.p1-reveal-legacy) .product-hero,
  body.p1-shell-active:not(.p1-reveal-legacy) .guest-chip {
    display: none !important;
  }

  body.p1-shell-active .p1-app-shell {
    position: fixed;
    inset: 0;
    z-index: 850;
    max-width: none;
    margin: 0;
    border: 0;
    display: grid;
    grid-template-columns: 80px minmax(0, 1fr) minmax(300px, 340px);
    grid-template-rows: 1fr;
    grid-template-areas: "nav stage rail";
    background: var(--p1-gradient);
    min-height: 100dvh;
  }

  body.p1-shell-active .p1-app-shell.is-rail-empty {
    grid-template-columns: 72px minmax(0, 1fr);
    grid-template-areas: "nav stage";
  }

  body.p1-shell-active .p1-app-shell.is-rail-empty .p1-companion-rail {
    display: none;
  }

  /* Left destination rail (repurposed tabbar) */
  body.p1-shell-active .p1-tabbar {
    position: relative;
    left: auto;
    right: auto;
    bottom: auto;
    grid-area: nav;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: var(--p1-space-4);
    padding: var(--p1-space-16) var(--p1-space-4);
    background: color-mix(in srgb, var(--p1-navigation) 88%, transparent);
    border-top: 0;
    border-right: 1px solid var(--p1-border);
    backdrop-filter: blur(10px);
    width: 80px;
    max-width: 88px;
  }
  body.p1-shell-active .p1-utility-trigger { top: var(--p1-space-16); right: var(--p1-space-16); }

  body.p1-shell-active .p1-tab {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--p1-space-4);
    min-height: 64px;
    padding: var(--p1-space-8) var(--p1-space-4);
    border-radius: var(--p1-radius-sm);
    background: transparent;
    font-size: 11px;
    line-height: 1.2;
  }

  body.p1-shell-active .p1-tab.is-active {
    background: color-mix(in srgb, var(--p1-primary-muted) 55%, transparent);
    color: var(--p1-primary);
  }

  body.p1-shell-active .p1-tab-icon {
    display: block;
    width: 20px;
    height: 20px;
    flex: 0 0 auto;
  }

  body.p1-shell-active .p1-tab-icon svg {
    display: block;
    width: 100%;
    height: 100%;
  }

  body.p1-shell-active .p1-tab-label {
    text-align: center;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* Center reading stage */
  body.p1-shell-active .p1-app-main {
    grid-area: stage;
    overflow: auto;
    padding: var(--p1-space-24) var(--p1-space-16) var(--p1-space-48);
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
    overscroll-behavior-y: contain;
  }

  body.p1-shell-active .p1-panel {
    max-width: 640px;
    width: 100%;
    margin: 0 auto;
  }

  /* Right companion rail — support only */
  body.p1-shell-active .p1-companion-rail {
    grid-area: rail;
    display: flex;
    flex-direction: column;
    gap: var(--p1-space-12);
    overflow: auto;
    min-width: 300px;
    padding: var(--p1-space-28) var(--p1-space-20) var(--p1-space-40);
    border-left: 1px solid var(--p1-border);
    background: color-mix(in srgb, var(--p1-surface) 35%, transparent);
  }

  body.p1-shell-active .p1-companion-rail:empty,
  body.p1-shell-active .p1-companion-rail[hidden] {
    display: none !important;
  }

  body.p1-shell-active .p1-companion-rail .p1-card,
  body.p1-shell-active .p1-companion-rail .p1-today-card-slot {
    margin-bottom: 0;
  }

  body.p1-shell-active .p1-companion-rail .p1-card {
    padding: var(--p1-space-16);
  }

  body.p1-shell-active .p1-companion-rail .p1-continuity-grid {
    grid-template-columns: 1fr;
  }

  body.p1-shell-active .p1-companion-rail .p1-actions-row {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
  }
}

@media (min-width: 1280px) {
  body.p1-shell-active .p1-app-shell {
    grid-template-columns: 80px minmax(0, 1fr) minmax(240px, 300px);
  }

  body.p1-shell-active .p1-app-shell.is-rail-empty {
    grid-template-columns: 80px minmax(0, 1fr);
  }

  body.p1-shell-active .p1-tabbar {
    width: 80px;
  }

  body.p1-shell-active .p1-app-main {
    padding-left: var(--p1-space-24);
    padding-right: var(--p1-space-24);
  }

  body.p1-shell-active .p1-panel {
    max-width: 720px;
  }
}

@media (min-width: 1440px) {
  body.p1-shell-active .p1-app-shell {
    grid-template-columns: 88px minmax(0, 1fr) minmax(260px, 320px);
  }

  body.p1-shell-active .p1-app-shell.is-rail-empty {
    grid-template-columns: 88px minmax(0, 1fr);
  }

  body.p1-shell-active .p1-tabbar {
    width: 88px;
    max-width: 88px;
  }

  body.p1-shell-active .p1-app-main {
    padding-left: var(--p1-space-32);
    padding-right: var(--p1-space-32);
  }

  body.p1-shell-active .p1-panel {
    max-width: 760px;
  }
}

/* —— Today journal hierarchy —— */
.p1-today {
  display: flex;
  flex-direction: column;
  gap: var(--p1-space-12);
}
.p1-today > .p1-card,
.p1-today > [data-priority] {
  animation: p1-soft-rise var(--p1-motion-slow) var(--p1-motion-ease) both;
}
.p1-today > *:nth-child(1) { animation-delay: 0ms; }
.p1-today > *:nth-child(2) { animation-delay: 40ms; }
.p1-today > *:nth-child(3) { animation-delay: 80ms; }
.p1-today > *:nth-child(4) { animation-delay: 120ms; }
.p1-today > *:nth-child(5) { animation-delay: 160ms; }
.p1-insight-card .p1-date {
  letter-spacing: 0.02em;
}
.p1-insight-card--brief .p1-core,
.p1-insight-card--continuity .p1-core {
  font-size: var(--p1-font-heading-size);
}

/* Yesterday is a desktop companion support surface — never interrupt mobile reading. */
.p1-yesterday {
  display: none;
}
.p1-companion-rail .p1-yesterday {
  display: block;
}

/* —— Phase 2.6C Desktop Today composition + Phase 2.6D polish (≥1024 companion) ——
 * Standalone test: cropped Today should read as a calm personal insight journal,
 * not a dashboard or a stretched phone page.
 * 2.6D: visual refinement only — surfaces, buttons, rail breath, reflection invitation.
 */
@media (min-width: 1180px) {
  body.p1-companion .p1-today--article {
    gap: var(--p1-space-32);
    max-width: 100%;
  }

  body.p1-companion .p1-today--article > .p1-today-article,
  body.p1-companion .p1-today--article > .p1-insight-card {
    margin-bottom: 0;
  }

  /* Article: quiet paper sheet — separate by surface, not heavy chrome */
  body.p1-companion .p1-today-article,
  body.p1-companion .p1-insight-card.p1-today-article {
    padding: var(--p1-space-40) var(--p1-space-32) var(--p1-space-32);
    border-radius: calc(var(--p1-radius-large) + 2px);
    border: 0;
    box-shadow: none;
  }

  /* Hero → opening page of today's journal (not a banner) */
  body.p1-companion .p1-today-hero {
    margin: calc(var(--p1-space-8) * -1) calc(var(--p1-space-8) * -1) var(--p1-space-32);
    padding: var(--p1-space-24) var(--p1-space-24) var(--p1-space-20);
    border-radius: var(--p1-radius-md);
    border: 0;
  }

  body.p1-companion .p1-today-hero .p1-date {
    margin: 0;
    font-size: var(--p1-font-caption-size);
    letter-spacing: 0.05em;
    text-transform: none;
    color: color-mix(in srgb, var(--p1-text-muted) 78%, var(--p1-surface));
  }

  body.p1-companion .p1-today-hero-top {
    margin: 0 0 var(--p1-space-8);
  }

  body.p1-companion .p1-today-locale-select {
    color: color-mix(in srgb, var(--p1-text-muted) 78%, var(--p1-surface));
  }

  body.p1-companion .p1-today-hero .p1-greeting {
    margin: 0 0 var(--p1-space-16);
    font-size: var(--p1-font-body-size);
    line-height: var(--p1-font-body-line);
    color: var(--p1-text-primary);
    font-weight: var(--p1-font-headline-weight);
  }

  body.p1-companion .p1-today-hero .p1-role-badge {
    margin: 0;
    background: transparent;
    border: 0;
    padding: 0;
    color: var(--p1-text-muted);
    font-weight: var(--p1-font-caption-weight);
  }

  body.p1-companion .p1-today-insight {
    margin: 0 0 var(--p1-space-24);
  }

  body.p1-companion .p1-today-insight .p1-core {
    margin-bottom: 0;
    font-size: clamp(1.4rem, 1.25rem + 0.45vw, 1.85rem);
    line-height: 1.4;
    letter-spacing: -0.02em;
    font-weight: var(--p1-font-headline-weight);
    color: var(--p1-text-primary);
  }

  body.p1-companion .p1-today-narrative {
    margin: 0 0 var(--p1-space-32);
  }

  body.p1-companion .p1-today-narrative .p1-para {
    margin-bottom: var(--p1-space-20);
    max-width: 40rem;
    line-height: 1.78;
  }

  body.p1-companion .p1-today-narrative .p1-para:last-child {
    margin-bottom: 0;
  }

  /* Today Action → soft blue paper */
  body.p1-companion .p1-today-action {
    margin-top: var(--p1-space-4);
    padding-top: var(--p1-space-24);
    border-top: 0;
  }

  body.p1-companion .p1-today-action .p1-action {
    margin: 0 0 var(--p1-space-16);
    padding: var(--p1-space-20) var(--p1-space-20);
    border-radius: var(--p1-radius-md);
    border: 0;
  }

  body.p1-companion .p1-today-action .p1-muted {
    margin-bottom: var(--p1-space-16);
  }

  body.p1-companion .p1-today-action .p1-actions-row {
    margin-top: var(--p1-space-4);
    gap: var(--p1-space-12);
  }

  /* Desktop buttons — lighter, calmer, still accessible */
  body.p1-companion .p1-btn {
    min-height: var(--p1-touch-min);
    padding: var(--p1-space-12) var(--p1-space-16);
    font-weight: var(--p1-font-body-weight);
    box-shadow: none;
  }

  body.p1-companion .p1-btn--primary {
    background: color-mix(in srgb, var(--p1-primary) 78%, var(--p1-surface));
    box-shadow: none;
  }

  body.p1-companion .p1-btn--primary:hover,
  body.p1-companion .p1-btn--primary:focus-visible {
    background: color-mix(in srgb, var(--p1-primary) 92%, var(--p1-surface));
  }

  body.p1-companion .p1-btn--secondary {
    background: transparent;
    border-color: color-mix(in srgb, var(--p1-border) 72%, transparent);
    color: var(--p1-text-muted);
  }

  body.p1-companion .p1-btn--secondary:hover,
  body.p1-companion .p1-btn--secondary:focus-visible {
    background: color-mix(in srgb, var(--p1-secondary-muted) 35%, transparent);
    color: var(--p1-secondary);
  }

  body.p1-companion .p1-btn--ghost {
    color: var(--p1-text-muted);
  }

  /* Reflection → warm journal invitation (not a form) */
  body.p1-companion .p1-today-reflection {
    margin-top: 0;
    padding: var(--p1-space-40) var(--p1-space-32) var(--p1-space-32);
    border: 0;
    box-shadow: none;
    border-radius: var(--p1-radius-large);
  }

  body.p1-companion .p1-today-reflection .p1-card-title {
    margin-bottom: var(--p1-space-8);
    font-size: var(--p1-font-body-size);
    font-weight: var(--p1-font-headline-weight);
    color: var(--p1-text-primary);
  }

  body.p1-companion .p1-today-reflection .p1-muted {
    margin-bottom: var(--p1-space-20);
    max-width: 34rem;
    line-height: 1.7;
  }

  body.p1-companion .p1-today-reflection .reflection-card-host {
    margin-top: var(--p1-space-16);
    max-width: none;
  }

  body.p1-companion .p1-today-reflection .reflection-card {
    gap: var(--p1-space-20);
    padding: 0;
  }

  body.p1-companion .p1-today-reflection .reflection-card-kicker {
    text-transform: none;
    letter-spacing: 0.02em;
    color: var(--p1-text-muted);
  }

  body.p1-companion .p1-today-reflection .reflection-card-prompt {
    font-size: var(--p1-font-body-size);
    line-height: 1.75;
    max-width: 36rem;
  }

  body.p1-companion .p1-today-reflection .reflection-reactions {
    gap: var(--p1-space-8);
  }

  body.p1-companion .p1-today-reflection .reflection-reaction {
    flex: 0 1 auto;
    min-width: 5.5rem;
    background: color-mix(in srgb, var(--p1-surface) 70%, transparent);
    border-color: transparent;
    box-shadow: none;
  }

  body.p1-companion .p1-today-reflection .reflection-reaction.is-selected {
    box-shadow: none;
  }

  body.p1-companion .p1-today-reflection .reflection-note {
    min-height: 7.5rem;
    padding: var(--p1-space-20) var(--p1-space-16);
    border-color: transparent;
    background: color-mix(in srgb, var(--p1-surface) 55%, var(--p1-card));
    line-height: 1.75;
  }

  body.p1-companion .p1-today-reflection .p1-guest-draft-input {
    min-height: 7.5rem;
    padding: var(--p1-space-20) var(--p1-space-16);
    border-color: transparent;
    background: color-mix(in srgb, var(--p1-surface) 55%, var(--p1-card));
    line-height: 1.75;
  }

  body.p1-companion .p1-today-reflection .reflection-card-actions {
    position: static;
    margin-top: var(--p1-space-8);
    gap: var(--p1-space-12);
  }

  body.p1-companion .p1-today-reflection .reflection-btn {
    box-shadow: none;
    font-weight: var(--p1-font-body-weight);
  }

  body.p1-companion .p1-today-reflection .reflection-btn--primary {
    background: color-mix(in srgb, var(--p1-primary) 78%, var(--p1-surface));
  }

  body.p1-companion .p1-today-reflection .reflection-btn--secondary {
    background: transparent;
    border-color: color-mix(in srgb, var(--p1-border) 72%, transparent);
  }

  /* Right rail — adjacent breath, not attached; card strongest */
  body.p1-companion .p1-app-shell {
    column-gap: 0;
  }

  body.p1-shell-active.p1-companion .p1-app-main {
    padding-right: var(--p1-space-24);
  }

  body.p1-shell-active.p1-companion .p1-companion-rail {
    gap: var(--p1-space-20);
    padding: var(--p1-space-32) var(--p1-space-20) var(--p1-space-40) var(--p1-space-32);
    border-left: 0;
    background: transparent;
  }

  body.p1-companion .p1-companion-rail .p1-today-card-slot,
  body.p1-companion .p1-companion-rail .p1-day-card,
  body.p1-companion .p1-companion-rail > .p1-card {
    margin-bottom: 0;
  }

  body.p1-companion .p1-companion-rail .p1-card,
  body.p1-companion .p1-companion-rail .p1-day-card {
    box-shadow: none;
    border: 0;
    background: color-mix(in srgb, var(--p1-surface) 55%, transparent);
    padding: var(--p1-space-16);
  }

  body.p1-companion .p1-companion-rail .p1-today-card-slot .p1-day-card {
    background: color-mix(in srgb, var(--p1-card) 92%, var(--p1-primary-muted));
    padding: var(--p1-space-16);
    grid-template-columns: 72px 1fr;
    gap: var(--p1-space-12);
  }

  body.p1-companion .p1-companion-rail .p1-today-card-slot .p1-day-card-media img {
    width: 72px;
    height: 72px;
    opacity: 0.9;
  }

  body.p1-companion .p1-companion-rail .p1-card--premium-home,
  body.p1-companion .p1-companion-rail .p1-yesterday,
  body.p1-companion .p1-companion-rail .p1-card--soft-upsell {
    opacity: 0.92;
    background: color-mix(in srgb, var(--p1-surface) 40%, transparent);
  }

  body.p1-companion .p1-companion-rail .p1-card-title {
    font-size: var(--p1-font-caption-size);
    font-weight: var(--p1-font-caption-weight);
    letter-spacing: 0.02em;
    color: var(--p1-text-muted);
  }

  body.p1-companion .p1-companion-rail .p1-today-card-slot .p1-card-title {
    color: var(--p1-text-secondary);
    font-weight: var(--p1-font-headline-weight);
  }

  body.p1-companion .p1-companion-rail .p1-actions-row {
    gap: var(--p1-space-8);
  }

  body.p1-companion .p1-companion-rail .p1-btn {
    width: 100%;
    justify-content: center;
  }

  /* Light theme surface hierarchy — mint / blue / warm papers */
  html:not([data-theme="dark"]) body.p1-companion .p1-today-hero {
    background: color-mix(in srgb, var(--p1-primary-muted) 42%, var(--p1-surface));
  }

  html:not([data-theme="dark"]) body.p1-companion .p1-today-article,
  html:not([data-theme="dark"]) body.p1-companion .p1-insight-card.p1-today-article {
    background: color-mix(in srgb, var(--p1-surface) 88%, var(--p1-card));
  }

  html:not([data-theme="dark"]) body.p1-companion .p1-today-action .p1-action {
    background: color-mix(in srgb, var(--p1-secondary-muted) 70%, var(--p1-surface));
  }

  html:not([data-theme="dark"]) body.p1-companion .p1-today-reflection {
    background: color-mix(in srgb, var(--p1-accent-muted) 28%, var(--p1-surface));
  }

  /* Soft-dark: preserve readability, same hierarchy intent */
  html[data-theme="dark"] body.p1-companion .p1-today-hero {
    background: color-mix(in srgb, var(--p1-primary-muted) 28%, var(--p1-card));
    border: 0;
  }

  html[data-theme="dark"] body.p1-companion .p1-today-article,
  html[data-theme="dark"] body.p1-companion .p1-insight-card.p1-today-article {
    background: color-mix(in srgb, var(--p1-card) 94%, var(--p1-primary-muted));
  }

  html[data-theme="dark"] body.p1-companion .p1-today-action .p1-action {
    background: color-mix(in srgb, var(--p1-secondary-muted) 45%, var(--p1-card));
  }

  html[data-theme="dark"] body.p1-companion .p1-today-reflection {
    background: color-mix(in srgb, var(--p1-accent-muted) 22%, var(--p1-card));
  }

  html[data-theme="dark"] body.p1-companion .p1-today-narrative .p1-para,
  html[data-theme="dark"] body.p1-companion .p1-today-insight .p1-core {
    color: var(--p1-text-primary);
  }

  html[data-theme="dark"] body.p1-shell-active.p1-companion .p1-companion-rail {
    background: transparent;
    border-left: 0;
  }
}
.p1-card--soft-upsell {
  background: transparent;
  box-shadow: none;
  border-style: dashed;
  border-color: color-mix(in srgb, var(--p1-accent) 22%, transparent);
  padding: var(--p1-space-16);
  margin-top: var(--p1-space-4);
}
.p1-evidence-foot {
  margin: var(--p1-space-16) 0 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--p1-space-4) var(--p1-space-8);
}
.p1-continuity-grid {
  display: grid;
  gap: var(--p1-space-16);
  margin: var(--p1-space-16) 0 var(--p1-space-8);
}
.p1-continuity-label {
  display: block;
  font-size: var(--p1-font-caption-size);
  font-weight: var(--p1-font-caption-weight);
  letter-spacing: 0.03em;
  color: var(--p1-primary);
  margin-bottom: var(--p1-space-4);
}
.p1-discover {
  margin-bottom: var(--p1-space-20);
}
.p1-discover-note {
  margin: var(--p1-space-12) 0 0;
  font-size: var(--p1-font-caption-size);
}
.p1-link-list--meta {
  margin-top: var(--p1-space-20);
  opacity: 0.92;
}

/* Phase 2.56 — empty / calm status language helpers */
.p1-empty,
.p1-calm-note {
  margin: 0;
  padding: var(--p1-space-16);
  border-radius: var(--p1-radius-md);
  background: color-mix(in srgb, var(--p1-surface) 70%, transparent);
  color: var(--p1-text-secondary);
  font-size: var(--p1-font-body-size);
  font-weight: var(--p1-font-body-weight);
  line-height: var(--p1-font-body-line);
  text-align: left;
}

/* Catalog-only helpers */
.ds-catalog-page {
  min-height: 100dvh;
  background: var(--p1-gradient);
  color: var(--p1-text-primary);
  padding: var(--p1-space-24) var(--p1-space-16) var(--p1-space-48);
}
.ds-catalog-section {
  max-width: 40rem;
  margin: 0 auto var(--p1-space-32);
}
.ds-catalog-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--p1-space-8);
  margin-top: var(--p1-space-12);
}
.ds-catalog-stack {
  display: grid;
  gap: var(--p1-space-12);
  margin-top: var(--p1-space-12);
}
.ds-input {
  width: 100%;
  min-height: var(--p1-touch-min);
  padding: var(--p1-space-12) var(--p1-space-16);
  border-radius: var(--p1-radius-md);
  border: 1px solid var(--p1-border);
  background: var(--p1-input);
  color: var(--p1-text-primary);
  font: inherit;
  font-size: var(--p1-font-body-size);
  line-height: var(--p1-font-body-line);
}
.ds-input:focus {
  outline: 2px solid color-mix(in srgb, var(--p1-primary) 45%, transparent);
  outline-offset: 2px;
}
.ds-tabbar-demo {
  position: relative;
  margin-top: var(--p1-space-12);
  border-radius: var(--p1-radius-md);
  overflow: hidden;
  border: 1px solid var(--p1-border);
}
.ds-tabbar-demo .p1-tabbar {
  position: relative;
}

/* —— Phase 2.7B Me Identity Journal (Free foundation) —— */
.p1-me--journal {
  display: flex;
  flex-direction: column;
  gap: var(--p1-space-8);
  max-width: 100%;
  overflow-x: hidden;
}
.p1-me-head {
  margin-bottom: var(--p1-space-8);
}
.p1-me-story {
  display: flex;
  flex-direction: column;
  gap: var(--p1-space-20);
  margin-bottom: var(--p1-space-28);
}
.p1-me-story > .p1-me-block {
  animation: p1-soft-rise var(--p1-motion-slow) var(--p1-motion-ease) both;
}
.p1-me-story > .p1-me-block:nth-child(1) { animation-delay: 0ms; }
.p1-me-story > .p1-me-block:nth-child(2) { animation-delay: 40ms; }
.p1-me-story > .p1-me-block:nth-child(3) { animation-delay: 80ms; }
.p1-me-story > .p1-me-block:nth-child(4) { animation-delay: 120ms; }
.p1-me-story > .p1-me-block:nth-child(5) { animation-delay: 160ms; }
.p1-me-story > .p1-me-block:nth-child(6) { animation-delay: 200ms; }

.p1-identity-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .7rem 1rem;
  margin: .85rem 0 0;
}
.p1-identity-grid dt {
  min-width: 5.5rem;
  color: var(--p1-muted, #64748b);
  font-size: .75rem;
  line-height: 1.35;
  white-space: normal;
  overflow-wrap: anywhere;
}
.p1-identity-grid dd {
  min-width: 0;
  margin: .15rem 0 0;
  overflow-wrap: anywhere;
}
.p1-identity-editor { margin-top: .85rem; }
.p1-identity-editor summary { cursor: pointer; display: inline-block; list-style: none; }
.p1-identity-editor summary::-webkit-details-marker { display: none; }
.p1-identity-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem; margin-top: .85rem; }
.p1-identity-form-grid label { display: grid; gap: .3rem; color: var(--p1-muted, #64748b); font-size: .8rem; }
.p1-identity-form-grid input, .p1-identity-form-grid select { min-width: 0; border: 1px solid var(--p1-border, #cbd5e1); border-radius: .65rem; padding: .6rem .7rem; color: inherit; background: transparent; }
.p1-identity-check { display: flex !important; align-items: center; gap: .45rem; }
.p1-identity-check input { width: auto; }
.p1-identity-editor form > .p1-btn { margin-top: .85rem; }
.p1-identity-location-block { grid-column: 1 / -1; min-width: 0; }
.p1-identity-location-block .geo-picker { display: grid; gap: .55rem; }
.p1-identity-location-block .geo-picker input,
.p1-identity-location-block .geo-picker select { width: 100%; min-width: 0; border: 1px solid var(--p1-border, #cbd5e1); border-radius: .65rem; padding: .6rem .7rem; color: inherit; background: transparent; }
.p1-identity-location-block .geo-picker label { margin-top: .15rem; color: var(--p1-muted, #64748b); font-size: .78rem; }
.p1-profile-form-status { grid-column: 1 / -1; margin: .8rem 0 0; padding: .65rem .75rem; border-radius: .65rem; font-size: .82rem; line-height: 1.45; }
.p1-profile-form-status[hidden] { display: none; }
.p1-profile-form-status[data-state="error"] { color: #b42318; background: #fff1f0; }
.p1-profile-form-status[data-state="success"] { color: #176b3a; background: #edf9f1; }

/* Identity Hub profile/chart cards: summary first, editor only on demand. */
.p1-identity-profile-card,
.p1-identity-chart-card {
  padding: var(--p1-space-20, 1.25rem);
  border: 1px solid var(--p1-border, #e2e8f0);
  border-radius: 1.1rem;
  background: var(--p1-surface, #fff);
  box-shadow: 0 10px 28px rgba(15, 23, 42, .06);
}
.p1-identity-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: .75rem;
}
.p1-identity-kicker {
  margin: 0 0 .25rem;
  color: var(--p1-muted, #64748b);
  font-size: .72rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.p1-identity-card-head .p1-section-label { margin: 0; }
.p1-identity-status-pill {
  flex: 0 0 auto;
  padding: .3rem .55rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--p1-accent, #6366f1) 12%, transparent);
  color: var(--p1-accent, #4f46e5);
  font-size: .72rem;
  font-weight: 700;
}
.p1-identity-profile-name {
  margin: 1rem 0 0;
  color: var(--p1-text-primary, #0f172a);
  font-size: clamp(1.3rem, 5vw, 1.8rem);
  font-weight: 750;
  letter-spacing: -.03em;
}
.p1-identity-grid { grid-template-columns: 1fr; gap: .85rem; }
.p1-identity-grid__wide { grid-column: 1 / -1; }
.p1-identity-profile-basis {
  margin: 1rem 0 0;
  color: var(--p1-muted, #64748b);
  font-size: .78rem;
  line-height: 1.55;
}
.p1-identity-setup-lead { margin: 1rem 0 0; color: var(--p1-text-primary, #0f172a); font-size: 1rem; line-height: 1.6; }
.p1-identity-setup-list { display: grid; gap: .55rem; margin: 1rem 0; padding: 0; list-style: none; color: var(--p1-text-primary, #0f172a); }
.p1-identity-setup-list li { display: flex; align-items: center; gap: .5rem; }
.p1-identity-setup-list li span { color: var(--p1-accent, #4f46e5); font-weight: 800; }
.p1-identity-next-step { margin-top: 1rem; padding: .9rem; border-radius: .85rem; background: color-mix(in srgb, var(--p1-accent, #6366f1) 8%, transparent); }
.p1-identity-next-step strong { color: var(--p1-text-primary, #0f172a); }
.p1-identity-next-step p { margin: .3rem 0 .7rem; color: var(--p1-muted, #64748b); font-size: .82rem; line-height: 1.5; }
.p1-identity-completion { margin-top: 1rem; }
.p1-identity-completion-head { display: flex; justify-content: space-between; gap: .75rem; color: var(--p1-muted, #64748b); font-size: .78rem; }
.p1-identity-completion-head strong { color: var(--p1-text-primary, #0f172a); }
.p1-identity-completion-track { height: .42rem; margin-top: .45rem; overflow: hidden; border-radius: 999px; background: var(--p1-border, #e2e8f0); }
.p1-identity-completion-track span { display: block; height: 100%; border-radius: inherit; background: var(--p1-accent, #6366f1); }
.p1-identity-checklist { display: flex; flex-wrap: wrap; gap: .45rem .8rem; margin: .65rem 0 0; padding: 0; list-style: none; color: var(--p1-muted, #64748b); font-size: .76rem; }
.p1-identity-checklist li { display: inline-flex; align-items: center; gap: .25rem; }
.p1-identity-checklist .is-complete { color: var(--p1-accent, #4f46e5); font-weight: 650; }
.p1-identity-checklist .is-pending { color: var(--p1-muted, #64748b); }
.p1-identity-chart-card .p1-identity-chart-status { margin: 1rem 0 0; }
.p1-identity-chart-status { display: grid; gap: .55rem; padding: 0; list-style: none; }
.p1-identity-chart-status li { display: flex; align-items: center; gap: .5rem; color: var(--p1-text-primary, #0f172a); }
.p1-identity-chart-status li::before { content: "○"; color: var(--p1-muted, #64748b); font-weight: 700; }
.p1-identity-chart-status li[data-p1-chart-bazi="ready"]::before,
.p1-identity-chart-status li[data-p1-chart-astrology="ready"]::before { content: "✓"; color: var(--p1-accent, #4f46e5); }
.p1-identity-chart-note { margin-top: 1rem; padding-top: .85rem; border-top: 1px solid var(--p1-border, #e2e8f0); color: var(--p1-muted, #64748b); font-size: .8rem; line-height: 1.55; }
.p1-identity-chart-note strong { color: var(--p1-text-primary, #0f172a); }
.p1-identity-chart-note p { margin: .25rem 0 0; }
.p1-identity-chart-action { display: inline-block; margin-top: 1rem; }

@media (min-width: 640px) {
  .p1-identity-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Identity Hub presentation: calm, mobile-first hierarchy for the three
   identity cards without changing their data or event contracts. */
[data-p1-identity-hub] {
  display: grid;
  gap: var(--p1-space-12, .75rem);
}
[data-p1-identity-status] {
  position: relative;
  overflow: hidden;
  padding: 1.35rem;
  border: 0;
  border-radius: 1.35rem;
  color: var(--p1-text-primary, #0f172a);
  background: linear-gradient(135deg, #eef2ff 0%, var(--p1-surface, #fff) 62%);
  box-shadow: 0 16px 36px rgba(30, 41, 59, .1);
}
[data-p1-identity-status]::after {
  position: absolute;
  top: -3rem;
  right: -2rem;
  width: 8rem;
  height: 8rem;
  border-radius: 50%;
  background: rgba(129, 140, 248, .18);
  content: "";
}
[data-p1-identity-status] .p1-section-label {
  margin-bottom: .65rem;
}
[data-p1-identity-status] .p1-identity-grid {
  position: relative;
  z-index: 1;
  margin-top: 1.1rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(99, 102, 241, .16);
}
[data-p1-identity-status] .p1-identity-grid dd {
  font-weight: 650;
}
[data-p1-identity-status] .p1-identity-grid > div {
  min-width: 0;
}
.p1-identity-profile-card,
.p1-identity-chart-card {
  border-color: rgba(148, 163, 184, .28);
  box-shadow: 0 8px 24px rgba(15, 23, 42, .055);
  transition: box-shadow .2s ease, transform .2s ease;
}
.p1-identity-profile-card:hover,
.p1-identity-chart-card:hover {
  box-shadow: 0 12px 30px rgba(15, 23, 42, .09);
}
.p1-identity-profile-card .p1-identity-card-head,
.p1-identity-chart-card .p1-identity-card-head {
  align-items: center;
}
.p1-identity-profile-name {
  margin-top: 1.15rem;
  font-size: clamp(1.45rem, 6vw, 1.9rem);
}
.p1-identity-profile-card .p1-identity-grid dd,
.p1-identity-chart-card .p1-identity-chart-status li {
  font-size: .95rem;
  font-weight: 650;
}

/* Narrative units remain readable on narrow cards without changing content. */
.p1-today-narrative {
  display: grid;
  gap: var(--p1-space-12, .75rem);
  max-width: 46rem;
}
.p1-today-narrative .p1-para {
  margin: 0;
  line-height: 1.75;
}
.p1-today-narrative .p1-para--primary {
  color: var(--p1-text-primary, #0f172a);
  font-size: clamp(1rem, 2.2vw, 1.1rem);
  font-weight: 650;
}
.p1-today-narrative .p1-para--supporting {
  color: var(--p1-muted, #64748b);
  font-size: .95rem;
}
.p1-today-action {
  margin-top: var(--p1-space-20, 1.25rem);
}
.p1-identity-chart-card--ready,
.p1-identity-chart-card--partial {
  background: linear-gradient(180deg, var(--p1-surface, #fff), #fafaff);
}
.p1-identity-chart-body {
  min-height: 2.5rem;
}
.p1-identity-chart-status li {
  min-height: 2.2rem;
  padding: .65rem .75rem;
  border: 1px solid var(--p1-border, #e2e8f0);
  border-radius: .8rem;
  background: color-mix(in srgb, var(--p1-surface, #fff) 82%, var(--p1-accent, #6366f1));
}
.p1-identity-chart-status li::before {
  display: inline-grid;
  width: 1.3rem;
  height: 1.3rem;
  flex: 0 0 1.3rem;
  place-items: center;
  border-radius: 50%;
  background: var(--p1-border, #e2e8f0);
  font-size: .75rem;
}
.p1-identity-chart-status li[data-p1-chart-bazi="ready"]::before,
.p1-identity-chart-status li[data-p1-chart-astrology="ready"]::before {
  background: #dcfce7;
}
.p1-identity-chart-action {
  padding: .7rem 0 .1rem;
  font-weight: 700;
}
.p1-chart-card-subtitle {
  margin: .35rem 0 0;
  color: var(--p1-muted, #64748b);
  font-size: .76rem;
  line-height: 1.45;
}
.p1-chart-state-copy {
  display: flex;
  align-items: center;
  gap: .7rem;
  min-height: 3.3rem;
  padding: .8rem;
  border-radius: .85rem;
  background: var(--p1-surface-subtle, #f8fafc);
}
.p1-chart-state-copy p { margin: 0; color: var(--p1-text-primary, #0f172a); font-size: .86rem; line-height: 1.5; }
.p1-chart-state-copy .p1-btn { margin-left: auto; white-space: nowrap; }
.p1-chart-state-icon {
  display: inline-grid;
  width: 1.65rem;
  height: 1.65rem;
  flex: 0 0 1.65rem;
  place-items: center;
  border-radius: 50%;
  color: var(--p1-accent, #4f46e5);
  background: color-mix(in srgb, var(--p1-accent, #6366f1) 13%, transparent);
  font-size: 1rem;
}
.p1-chart-progress {
  display: inline-block;
  width: 1.65rem;
  height: 1.65rem;
  flex: 0 0 1.65rem;
  border: 2px solid color-mix(in srgb, var(--p1-accent, #6366f1) 22%, transparent);
  border-top-color: var(--p1-accent, #6366f1);
  border-radius: 50%;
  animation: p1-chart-spin 1s linear infinite;
}
.p1-chart-readiness-list { margin-top: 0 !important; }
.p1-chart-readiness-list li {
  display: flex;
  align-items: center;
  gap: .65rem;
  padding: .7rem .8rem;
  border: 1px solid var(--p1-border, #e2e8f0);
  border-radius: .85rem;
  background: var(--p1-surface, #fff);
}
.p1-chart-readiness-list li::before { display: none; }
.p1-chart-row-icon {
  display: inline-grid;
  width: 1.45rem;
  height: 1.45rem;
  flex: 0 0 1.45rem;
  place-items: center;
  border-radius: 50%;
  color: var(--p1-muted, #64748b);
  background: var(--p1-border, #e2e8f0);
  font-size: .78rem;
  font-weight: 800;
}
.p1-chart-readiness-list li[data-p1-chart-bazi="ready"] .p1-chart-row-icon,
.p1-chart-readiness-list li[data-p1-chart-astrology="ready"] .p1-chart-row-icon {
  color: #166534;
  background: #dcfce7;
}
@keyframes p1-chart-spin { to { transform: rotate(360deg); } }

/* Premium natal presentation. The renderer remains the source of all chart
   values; these rules only give its existing output a calm, readable frame. */
.p1-calculation-evidence [data-natal-viz] {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem;
  min-width: 0;
  width: 100%;
  box-sizing: border-box;
  padding: .25rem;
  overflow: visible;
}
.p1-calculation-evidence .natal-viz__header {
  padding: .35rem .25rem .1rem;
}
.p1-calculation-evidence .natal-viz__eyebrow {
  margin: 0 0 .35rem;
  color: var(--p1-accent, #4f46e5);
  font-size: .72rem;
  font-weight: 750;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.p1-calculation-evidence .natal-viz__title {
  margin: 0;
  color: var(--p1-text-primary, #0f172a);
  font-size: clamp(1.25rem, 5vw, 1.65rem);
  letter-spacing: -.025em;
}
.p1-calculation-evidence .natal-viz__lead {
  max-width: 42rem;
  margin: .45rem 0 0;
  color: var(--p1-muted, #64748b);
  font-size: .82rem;
  line-height: 1.55;
}
.p1-calculation-evidence .natal-hero {
  min-height: 5.5rem;
  border: 1px solid rgba(99, 102, 241, .2);
  border-radius: 1rem;
  box-shadow: 0 12px 26px rgba(15, 23, 42, .08);
}
.p1-calculation-evidence .natal-hero__img {
  max-height: 8rem;
  opacity: .9;
}
.p1-calculation-evidence .natal-wheel-wrap {
  min-width: 0;
  width: 100%;
  box-sizing: border-box;
  padding: .85rem;
  overflow: visible;
  border: 1px solid rgba(99, 102, 241, .18);
  border-radius: 1rem;
  background: linear-gradient(145deg, rgba(15, 23, 42, .95), rgba(30, 41, 59, .88));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 12px 28px rgba(15, 23, 42, .1);
}
.p1-calculation-evidence .natal-wheel-frame {
  display: grid;
  place-items: center;
  width: 100%;
  aspect-ratio: 1 / 1;
  max-width: min(100%, 31rem);
  box-sizing: border-box;
  margin: .65rem auto 0;
  padding: .75rem;
}
.p1-calculation-evidence .natal-wheel {
  display: block;
  width: 82%;
  height: 82%;
  max-width: none;
  aspect-ratio: 1;
  object-fit: contain;
  overflow: visible;
}
/* Planet names are repeated in the detail cards below; keep the wheel focused
   on geometry, zodiac glyphs, and position markers. */
.p1-calculation-evidence .natal-wheel .nw-planet-glyph {
  display: none;
}
.natal-wheel .nw-planet-dot {
  fill: #f6c85f;
  stroke: #fff3b0;
  stroke-width: 1.5;
  filter: drop-shadow(0 0 3px rgb(246 200 95 / .95));
}
.p1-calculation-evidence .natal-angle-metadata {
  min-width: 0;
  padding: .85rem;
  border: 1px solid var(--p1-border, #e2e8f0);
  border-radius: 1rem;
  background: var(--p1-surface, #fff);
}
.p1-calculation-evidence .natal-angle-metadata dl {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .65rem;
  margin: .65rem 0 0;
}
.p1-calculation-evidence .natal-angle-metadata__item {
  min-width: 0;
  padding: .65rem;
  border: 1px solid var(--p1-border, #e2e8f0);
  border-radius: .75rem;
  background: var(--p1-surface-subtle, #f8fafc);
}
.p1-calculation-evidence .natal-angle-metadata dt {
  color: var(--p1-muted, #64748b);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .06em;
}
.p1-calculation-evidence .natal-angle-metadata dd {
  margin: .25rem 0 0;
  overflow-wrap: anywhere;
  color: var(--p1-text-primary, #0f172a);
  font-size: .86rem;
}
.p1-calculation-evidence .natal-planet-cards,
.p1-calculation-evidence .natal-aspect-panel,
.p1-calculation-evidence .natal-info-panel {
  min-width: 0;
  padding: .85rem;
  border-radius: 1rem;
}
.p1-calculation-evidence .natal-planet-cards,
.p1-calculation-evidence .natal-aspect-panel {
  border: 1px solid var(--p1-border, #e2e8f0);
  background: var(--p1-surface, #fff);
}
.p1-calculation-evidence .natal-planet-grid {
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: .65rem;
  margin-top: .65rem;
}
.p1-calculation-evidence .natal-planet-card {
  min-width: 0;
  padding: .75rem;
  border: 1px solid var(--p1-border, #e2e8f0);
  border-radius: .8rem;
  background: var(--p1-surface-subtle, #f8fafc);
}
.p1-calculation-evidence .natal-planet-card__meta dd,
.p1-calculation-evidence .natal-aspect-row__text {
  overflow-wrap: anywhere;
}
@media (max-width: 639px) {
  .p1-calculation-evidence [data-natal-viz] { padding: 0; gap: .75rem; }
  .p1-calculation-evidence .natal-wheel-wrap { padding: .55rem; }
  .p1-calculation-evidence .natal-wheel-frame { width: 100%; }
  .p1-calculation-evidence .natal-wheel { width: 82%; height: 82%; }
  .p1-calculation-evidence .natal-planet-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 520px) {
  .p1-identity-grid dt { min-width: 0; }
  [data-p1-identity-status] .p1-identity-grid { grid-template-columns: minmax(6.25rem, .8fr) minmax(0, 1.2fr); }
}

/* The live premium detail surface mounts inside the panel card rather than
   the outer evidence shell. Keep the same bounded square treatment there. */
.p1-calculation-panel-card [data-natal-viz] {
  grid-template-columns: minmax(0, 1fr);
  min-width: 0;
  width: 100%;
  box-sizing: border-box;
}
.p1-calculation-panel-card:has([data-natal-viz]) {
  border-color: rgba(99, 102, 241, .28);
  background: linear-gradient(155deg, #0b1224, #111b35 62%, #0a1020);
}
.p1-calculation-panel-card [data-natal-viz] {
  padding: .35rem;
  border-radius: 1rem;
  background: linear-gradient(155deg, rgba(15, 23, 42, .96), rgba(17, 24, 39, .94));
}
.p1-calculation-panel-card .natal-wheel-wrap {
  min-width: 0;
  width: 100%;
  box-sizing: border-box;
  overflow: visible;
}
.p1-calculation-panel-card [data-natal-viz] .natal-wheel-frame {
  display: grid;
  place-items: center;
  width: 100%;
  aspect-ratio: 1 / 1;
  max-width: min(100%, 31rem);
  box-sizing: border-box;
  padding: .75rem;
  margin: .65rem auto 0;
}
.p1-calculation-panel-card [data-natal-viz] .natal-wheel {
  display: block;
  width: 82%;
  height: 82%;
  max-width: none;
  aspect-ratio: 1;
  object-fit: contain;
  overflow: visible;
}
.p1-calculation-panel-card .natal-wheel .nw-planet-glyph {
  display: none;
}
.p1-calculation-panel-card [data-natal-viz] .natal-wheel-frame,
.p1-calculation-panel-card [data-natal-viz] .natal-wheel-trigger,
.p1-calculation-panel-card [data-natal-viz] .natal-wheel-trigger__graphic {
  background: transparent !important;
}
.p1-calculation-panel-card [data-natal-viz] .natal-wheel {
  filter: drop-shadow(0 14px 22px rgba(2, 6, 23, .42));
}
.p1-calculation-panel-card [data-natal-viz] .natal-wheel .nw-bg {
  fill: rgba(5, 13, 31, .94);
  stroke: rgba(129, 140, 248, .48);
  stroke-width: 1.25;
}
.p1-calculation-panel-card [data-natal-viz] .natal-wheel .nw-zodiac-band {
  fill: rgba(20, 30, 58, .92);
  stroke: rgba(165, 180, 252, .42);
  stroke-width: 1.15;
}
.p1-calculation-panel-card [data-natal-viz] .natal-wheel .nw-inner {
  fill: rgba(3, 10, 25, .82);
  stroke: rgba(103, 232, 249, .3);
  stroke-width: 1.1;
}
.p1-calculation-panel-card [data-natal-viz] .natal-wheel .nw-sign {
  fill: #e0e7ff;
  font-size: 15px;
  font-weight: 600;
}
.p1-calculation-panel-card [data-natal-viz] .natal-wheel-trigger {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  border-radius: .8rem;
  background: transparent;
  color: inherit;
  cursor: zoom-in;
}
.p1-calculation-panel-card [data-natal-viz] .natal-wheel-trigger:focus-visible {
  outline: 2px solid var(--p1-accent, #6366f1);
  outline-offset: 3px;
}
.p1-calculation-panel-card [data-natal-viz] .natal-wheel-trigger__graphic {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
}
.natal-wheel-lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  width: 100vw;
  height: 100vh;
  padding: .5rem;
  box-sizing: border-box;
  border: 0;
  background: rgba(2, 6, 23, .78);
  color: #f8fafc;
}
.natal-wheel-lightbox__shell {
  position: relative;
  display: grid;
  place-items: center;
  width: min(92vw, 46rem);
  height: min(92vw, 46rem);
  max-width: calc(100vw - 1rem);
  max-height: calc(100vh - 1rem);
  border: 1px solid rgba(148, 163, 184, .35);
  border-radius: 1.1rem;
  background: #0f172a;
  box-shadow: 0 24px 80px rgba(2, 6, 23, .48);
  padding: 2.5rem 1.25rem 1.25rem;
  box-sizing: border-box;
}
.natal-wheel-lightbox__body {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
}
.natal-wheel-lightbox .natal-wheel--large {
  display: block;
  width: min(100%, 42rem);
  height: auto;
  max-width: 100%;
  max-height: 100%;
  aspect-ratio: 1;
  object-fit: contain;
}
.natal-wheel-lightbox__close {
  position: absolute;
  top: .6rem;
  right: .6rem;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border: 1px solid rgba(226, 232, 240, .25);
  border-radius: 999px;
  background: rgba(15, 23, 42, .82);
  color: #f8fafc;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
}
.natal-wheel-lightbox__close:focus-visible { outline: 2px solid #a5b4fc; outline-offset: 2px; }
@media (max-width: 639px) {
  .natal-wheel-lightbox {
    padding: .5rem;
  }
  .natal-wheel-lightbox__shell { width: calc(100vw - 1rem); height: calc(100vw - 1rem); padding: 2.25rem .65rem .65rem; }
}
@media (max-width: 639px) {
  [data-p1-identity-hub] { gap: .65rem; }
  [data-p1-identity-status],
  .p1-identity-profile-card,
  .p1-identity-chart-card { padding: 1.1rem; border-radius: 1.1rem; }
  .p1-identity-form-grid { grid-template-columns: 1fr; }
}

.p1-profile-editor-section {
  margin-top: 1.25rem;
  padding-top: 1.15rem;
  border-top: 1px solid var(--p1-border, #e2e8f0);
}
.p1-profile-editor-section:first-child {
  margin-top: 1rem;
  padding-top: 0;
  border-top: 0;
}
.p1-profile-editor-section-head h4 {
  margin: 0;
  color: var(--p1-text-primary, #0f172a);
  font-size: 1rem;
  font-weight: 750;
}
.p1-profile-editor-section-head p {
  margin: .25rem 0 .8rem;
  color: var(--p1-muted, #64748b);
  font-size: .78rem;
  line-height: 1.5;
}
.p1-profile-editor-section .p1-identity-location-block {
  padding: .85rem;
  border: 1px solid var(--p1-border, #e2e8f0);
  border-radius: .85rem;
  background: color-mix(in srgb, var(--p1-surface, #fff) 94%, var(--p1-accent, #6366f1));
}
.p1-profile-editor-section .geo-picker [data-geo-country-search],
.p1-profile-editor-section .geo-picker [data-geo-city-search],
.p1-profile-editor-section .geo-picker [data-geo-country-list],
.p1-profile-editor-section .geo-picker [data-geo-city-list] {
  display: none;
}
.p1-profile-editor-section .geo-picker select {
  appearance: auto;
  background: var(--p1-surface, #fff);
  color: var(--p1-text-primary, #0f172a);
}
.p1-profile-editor-section .geo-picker [data-geo-manual-toggle] {
  margin-top: .2rem;
  color: var(--p1-accent, #4f46e5);
  background: transparent;
}
.p1-profile-time-card {
  display: grid;
  gap: .7rem;
  margin-top: .9rem;
  padding: .9rem;
  border-radius: .85rem;
  background: var(--p1-surface-subtle, #f8fafc);
}
.p1-profile-time-toggle {
  display: flex !important;
  align-items: center;
  gap: .55rem;
  color: var(--p1-text-primary, #0f172a) !important;
  font-size: .9rem !important;
  font-weight: 650;
}
.p1-profile-time-toggle input { width: auto; }
.p1-profile-time-input { display: grid; gap: .3rem; color: var(--p1-muted, #64748b); font-size: .78rem; }
.p1-profile-time-input input { max-width: 12rem; }
.p1-profile-time-card p {
  margin: 0;
  color: var(--p1-muted, #64748b);
  font-size: .78rem;
  line-height: 1.55;
}
.p1-identity-location-block--optional { opacity: .96; }

.p1-me-block {
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}
.p1-me-identity-text,
.p1-me-mood-text {
  margin: 0 0 var(--p1-space-8);
  font-size: var(--p1-font-heading-size);
  font-weight: var(--p1-font-heading-weight);
  line-height: var(--p1-font-heading-line);
  color: var(--p1-text-primary);
  letter-spacing: -0.01em;
}
.p1-me-mood-text.is-empty {
  font-size: var(--p1-font-body-size);
  font-weight: var(--p1-font-body-weight);
  line-height: var(--p1-font-body-line);
  color: var(--p1-text-secondary);
}
.p1-me-focus-line {
  margin: var(--p1-space-8) 0 0;
}
.p1-me-reflection-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--p1-space-12);
}
.p1-me-reflection-item {
  margin: 0;
  padding: 0;
}
.p1-me-reflection-when {
  display: block;
  margin-bottom: var(--p1-space-4);
  font-size: var(--p1-font-caption-size);
  font-weight: var(--p1-font-caption-weight);
  letter-spacing: 0.03em;
  color: var(--p1-text-muted);
  text-transform: uppercase;
}
.p1-me-thought {
  padding-top: var(--p1-space-4);
}
.p1-me-thought .p1-btn {
  margin-top: var(--p1-space-12);
}

.p1-me-tools {
  margin-top: var(--p1-space-8);
  padding-top: var(--p1-space-20);
  border-top: 1px solid color-mix(in srgb, var(--p1-border) 70%, transparent);
}
.p1-me-tools-label {
  margin-bottom: var(--p1-space-4);
}
.p1-me-tools-lead {
  margin: 0 0 var(--p1-space-16);
}
.p1-me-settings-list {
  margin-bottom: 0;
}
.p1-me-locale {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--p1-space-12);
  cursor: default;
}
.p1-me-locale-select {
  min-height: 36px;
  max-width: 55%;
  padding: var(--p1-space-4) var(--p1-space-8);
  border-radius: var(--p1-radius-sm);
  border: 1px solid var(--p1-border);
  background: var(--p1-input);
  color: var(--p1-text-primary);
  font: inherit;
  font-size: var(--p1-font-body-small-size);
}

/* Phase 2.7C — Identity Memory (Premium quiet observations) */
.p1-me-memory {
  padding-top: var(--p1-space-4);
}
.p1-me-memory-lead {
  margin: 0 0 var(--p1-space-12);
}
.p1-me-memory-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--p1-space-12);
}
.p1-me-memory-item {
  margin: 0;
  padding: 0;
}
.p1-me-memory-item .p1-para {
  margin: 0;
}
.p1-me-memory-cue,
.p1-me-memory-meta,
.p1-me-memory-state {
  margin: var(--p1-space-4) 0 0;
  font-size: var(--p1-font-caption-size);
  color: var(--p1-text-muted);
  overflow-wrap: anywhere;
}

@media (min-width: 1180px) {
  body.p1-companion .p1-me--journal {
    gap: var(--p1-space-16);
    max-width: 42rem;
  }
  body.p1-companion .p1-me-story {
    gap: var(--p1-space-28);
    margin-bottom: var(--p1-space-40);
  }
  body.p1-companion .p1-me-identity-text,
  body.p1-companion .p1-me-mood-text:not(.is-empty) {
    font-size: clamp(1.25rem, 1.1rem + 0.4vw, 1.55rem);
    line-height: 1.45;
  }
  body.p1-companion .p1-me-tools {
    padding-top: var(--p1-space-28);
    opacity: 0.96;
  }
  body.p1-companion .p1-me-memory {
    max-width: 38rem;
  }
}

/* —— Phase 2.8B Records Change Journal (Free foundation) —— */
.p1-records--journal {
  display: flex;
  flex-direction: column;
  gap: var(--p1-space-8);
  max-width: 100%;
  overflow-x: hidden;
}
.p1-records-head {
  margin-bottom: var(--p1-space-8);
}
.p1-records-story {
  display: flex;
  flex-direction: column;
  gap: var(--p1-space-24);
  margin-bottom: var(--p1-space-28);
}
.p1-records-story > .p1-records-block {
  animation: p1-soft-rise var(--p1-motion-slow) var(--p1-motion-ease) both;
}
.p1-records-story > .p1-records-block:nth-child(1) { animation-delay: 0ms; }
.p1-records-story > .p1-records-block:nth-child(2) { animation-delay: 40ms; }
.p1-records-story > .p1-records-block:nth-child(3) { animation-delay: 80ms; }
.p1-records-story > .p1-records-block:nth-child(4) { animation-delay: 120ms; }
.p1-records-story > .p1-records-block:nth-child(5) { animation-delay: 160ms; }
.p1-records-story > .p1-records-block:nth-child(6) { animation-delay: 200ms; }

/* —— Phase 2.8C — Records Premium Connections —— */
.p1-records-connections {
  padding-top: var(--p1-space-4);
  /* Quieter than Rediscover featured lines */
  opacity: 0.96;
}
.p1-records-connections .p1-section-label {
  color: var(--p1-text-secondary);
}
.p1-records-sublabel {
  margin: var(--p1-space-16) 0 var(--p1-space-4);
  font-size: var(--p1-font-caption-size);
  font-weight: var(--p1-font-caption-weight);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--p1-text-muted);
}
.p1-records-connections > .p1-records-related:first-of-type .p1-records-sublabel,
.p1-records-connections > .p1-records-theme:first-of-type .p1-records-sublabel {
  margin-top: var(--p1-space-4);
}
.p1-records-conn-lead {
  margin: 0 0 var(--p1-space-10);
}
.p1-records-list--conn {
  gap: var(--p1-space-12);
}
.p1-records-list--conn .p1-para {
  font-size: var(--p1-font-body-size);
  font-weight: var(--p1-font-body-weight);
  line-height: var(--p1-font-body-line);
  color: var(--p1-text-secondary);
}
.p1-records-evolution {
  margin: var(--p1-space-16) 0 0;
  color: var(--p1-text-secondary);
}
.p1-records-memory-link {
  margin-top: var(--p1-space-16);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--p1-space-8);
}
.p1-records-memory-support {
  margin: 0;
  max-width: 36rem;
}
.p1-records-privacy {
  margin: 0;
  max-width: 36rem;
}

.p1-records-block {
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}
.p1-records-lead {
  margin: 0 0 var(--p1-space-12);
}
.p1-records-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--p1-space-14);
}
.p1-records-timeline-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--p1-space-10);
}
.p1-records-journey-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--p1-space-10);
}
.p1-records-journey-item {
  padding: var(--p1-space-10) var(--p1-space-12);
  border: 1px solid color-mix(in srgb, var(--p1-border) 60%, transparent);
  border-radius: var(--p1-radius-sm);
  color: var(--p1-text-primary);
}
.p1-records-journey-timeline {
  list-style: none;
  margin: var(--p1-space-12) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--p1-space-8);
}
.p1-records-journey-timeline-item {
  display: flex;
  flex-wrap: wrap;
  gap: var(--p1-space-8);
  align-items: baseline;
  padding: var(--p1-space-8) 0;
  border-bottom: 1px solid color-mix(in srgb, var(--p1-border) 50%, transparent);
  color: var(--p1-text-secondary);
}
.p1-records-journey-timeline-item time {
  color: var(--p1-text-primary);
  font-weight: 600;
}
.p1-records-journey-contexts {
  margin-top: var(--p1-space-10);
}
.p1-records-timeline-entry {
  display: flex;
  flex-wrap: wrap;
  gap: var(--p1-space-8);
  align-items: baseline;
  padding-bottom: var(--p1-space-8);
  border-bottom: 1px solid color-mix(in srgb, var(--p1-border) 50%, transparent);
}
.p1-records-timeline-kind,
.p1-records-timeline-reaction {
  font-size: var(--p1-font-body-size);
  color: var(--p1-text-secondary);
}
.p1-me-relationship-core-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--p1-space-10);
}
.p1-me-relationship-core-item {
  padding: var(--p1-space-10) var(--p1-space-12);
  border: 1px solid color-mix(in srgb, var(--p1-border) 60%, transparent);
  border-radius: var(--p1-radius-sm);
}
.p1-me-relationship-core-item h4,
.p1-me-relationship-core-patterns h4 {
  margin: 0 0 var(--p1-space-6);
  font-size: var(--p1-font-body-size);
  font-weight: var(--p1-font-heading-weight);
  color: var(--p1-text-primary);
}
.p1-me-relationship-core-item p,
.p1-me-relationship-core-patterns li {
  margin: 0;
  color: var(--p1-text-secondary);
}
.p1-me-relationship-core-patterns {
  margin-top: var(--p1-space-14);
}
.p1-me-relationship-core-patterns ul {
  margin: 0;
  padding-left: 1.1rem;
}
.p1-me-relationship-core-continuity {
  margin: var(--p1-space-14) 0 0;
}
.p1-me-relationship-core-picker {
  margin: var(--p1-space-14) 0;
  padding: var(--p1-space-12);
  border: 1px solid var(--p1-border);
  border-radius: var(--p1-radius-md);
  background: var(--p1-surface-subtle);
}
.p1-me-relationship-core-status {
  margin: var(--p1-space-10) 0;
  color: var(--p1-text-secondary);
  font-size: var(--p1-font-body-small-size);
  line-height: var(--p1-font-body-small-line);
}
.p1-today-relationship-cue {
  margin: 0 0 var(--p1-space-12);
  padding: var(--p1-space-10) var(--p1-space-12);
  border-left: 3px solid var(--p1-accent);
  background: var(--p1-surface-subtle);
  border-radius: var(--p1-radius-sm);
}
.p1-today-relationship-cue p {
  margin: 0;
}
.p1-today-relationship-cue .p1-muted {
  margin-top: var(--p1-space-6);
}
.p1-today-relationship-explanation {
  margin: var(--p1-space-8) 0 0;
  color: var(--p1-text-primary);
  font-size: var(--p1-font-body-small-size);
  line-height: var(--p1-font-body-small-line);
}
.p1-today-relationship-question {
  margin-top: var(--p1-space-8) !important;
  color: var(--p1-text-primary);
  font-size: var(--p1-font-body-small-size);
}
.p1-me-relationship-core-lens {
  margin: var(--p1-space-12) 0 var(--p1-space-14);
  color: var(--p1-text-secondary);
  font-size: var(--p1-font-body-small-size);
  line-height: var(--p1-font-body-small-line);
}
.p1-records-journey-summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--p1-space-10);
  margin-top: var(--p1-space-14);
}
.p1-records-journey-summary-block {
  padding: var(--p1-space-10) var(--p1-space-12);
  border: 1px solid color-mix(in srgb, var(--p1-border) 60%, transparent);
  border-radius: var(--p1-radius-sm);
}
.p1-records-journey-summary-block h4,
.p1-records-journey-summary-block p {
  margin: 0;
}
.p1-records-journey-summary-block h4 {
  color: var(--p1-text-primary);
  font-size: var(--p1-font-body-size);
}
.p1-records-journey-summary-block p {
  margin-top: var(--p1-space-6);
  color: var(--p1-text-secondary);
  font-size: var(--p1-font-body-small-size);
  line-height: var(--p1-font-body-small-line);
}
@media (max-width: 560px) {
  .p1-records-journey-summary { grid-template-columns: 1fr; }
}
.p1-records-list--featured .p1-para {
  font-size: var(--p1-font-heading-size);
  font-weight: var(--p1-font-heading-weight);
  line-height: var(--p1-font-heading-line);
  letter-spacing: -0.01em;
  color: var(--p1-text-primary);
}
.p1-records-entry {
  margin: 0;
  padding: 0;
}
.p1-relationship-record { padding: var(--p1-space-12) 0; border-bottom: 1px solid color-mix(in srgb, var(--p1-border) 55%, transparent); }
.p1-relationship-record:last-child { border-bottom: 0; }
.p1-relationship-record-actions, .p1-relationship-delete-actions { display: flex; align-items: center; gap: var(--p1-space-8); margin-top: var(--p1-space-8); }
.p1-relationship-record-actions .p1-btn { padding: 0.45rem 0.75rem; }
.p1-relationship-record-menu { margin-left: auto; position: relative; }
.p1-relationship-record-menu summary { cursor: pointer; list-style: none; color: var(--p1-text-secondary); }
.p1-relationship-record-menu summary::-webkit-details-marker { display: none; }
.p1-relationship-record-menu button { margin-top: var(--p1-space-8); white-space: nowrap; }
.p1-relationship-record-delete { color: var(--p1-error, #a33); }
.p1-records-entry-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--p1-space-8);
  align-items: baseline;
  margin-bottom: var(--p1-space-4);
}
.p1-records-when {
  font-size: var(--p1-font-caption-size);
  font-weight: var(--p1-font-caption-weight);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--p1-text-muted);
}
.p1-records-kind {
  font-size: var(--p1-font-caption-size);
  color: var(--p1-text-secondary);
}

.p1-records-images {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--p1-space-12);
}
.p1-records-image-card {
  margin: 0;
  padding: var(--p1-space-12) 0;
  border-bottom: 1px solid color-mix(in srgb, var(--p1-border) 55%, transparent);
}
.p1-records-image-card:last-child {
  border-bottom: 0;
}

.p1-records-browse {
  display: flex;
  flex-direction: column;
  gap: var(--p1-space-8);
}
.p1-records-month {
  border: 0;
  background: transparent;
  padding: var(--p1-space-8) 0;
  border-bottom: 1px solid color-mix(in srgb, var(--p1-border) 50%, transparent);
}
.p1-records-month-sum {
  cursor: pointer;
  list-style: none;
  font-size: var(--p1-font-body-size);
  font-weight: var(--p1-font-caption-weight);
  color: var(--p1-text-primary);
  padding: var(--p1-space-8) 0;
}
.p1-records-month-sum::-webkit-details-marker {
  display: none;
}
.p1-records-list--nested {
  margin-top: var(--p1-space-8);
  padding-left: var(--p1-space-4);
}

.p1-records-secondary {
  margin-top: var(--p1-space-8);
  padding-top: var(--p1-space-20);
  border-top: 1px solid color-mix(in srgb, var(--p1-border) 70%, transparent);
  opacity: 0.94;
}
.p1-records-secondary-label {
  margin-bottom: var(--p1-space-4);
}
.p1-records-classic-list {
  margin-top: var(--p1-space-12);
  margin-bottom: var(--p1-space-12);
}

@media (min-width: 1180px) {
  body.p1-companion .p1-records--journal {
    gap: var(--p1-space-16);
    max-width: 42rem;
  }
  body.p1-companion .p1-records-story {
    gap: var(--p1-space-28);
    margin-bottom: var(--p1-space-40);
  }
  body.p1-companion .p1-records-list--featured .p1-para {
    font-size: clamp(1.15rem, 1.05rem + 0.35vw, 1.45rem);
    line-height: 1.45;
  }
  body.p1-companion .p1-records-secondary {
    padding-top: var(--p1-space-28);
  }
}

/* Post-Recovery hotfix: current-shell editorial grouping.  These selectors
 * describe content ownership, rather than introducing a second card system. */
.p1-panel-head {
  padding-bottom: var(--p1-space-16);
  border-bottom: 1px solid color-mix(in srgb, var(--p1-border) 72%, transparent);
}
.p1-today-reflection,
.p1-me-story > .p1-me-block,
.p1-records-story > .p1-records-block,
.p1-discover,
.p1-link-list--meta {
  padding: var(--p1-space-20) 0;
  border-top: 1px solid color-mix(in srgb, var(--p1-border) 62%, transparent);
}
.p1-today-reflection {
  margin-top: var(--p1-space-12);
  padding: var(--p1-space-20);
  border: 1px solid color-mix(in srgb, var(--p1-primary) 18%, var(--p1-border));
  border-radius: var(--p1-radius-large);
  background: color-mix(in srgb, var(--p1-primary-muted) 26%, var(--p1-card));
}
.p1-today-reflection.is-continuation-target {
  animation: p1-thought-continuation-cue 720ms var(--p1-motion-ease);
}
@keyframes p1-thought-continuation-cue {
  0%, 100% {
    border-color: color-mix(in srgb, var(--p1-primary) 18%, var(--p1-border));
    box-shadow: none;
  }
  45% {
    border-color: color-mix(in srgb, var(--p1-primary) 58%, var(--p1-border));
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--p1-primary) 13%, transparent);
  }
}
@media (prefers-reduced-motion: reduce) {
  .p1-today-reflection.is-continuation-target {
    animation: none;
    border-color: color-mix(in srgb, var(--p1-primary) 45%, var(--p1-border));
  }
}
.p1-me-story > .p1-me-block:first-child,
.p1-records-story > .p1-records-block:first-child,
.p1-discover {
  border-top: 0;
  padding-top: 0;
}
.p1-me-story > .p1-me-block + .p1-me-block,
.p1-records-story > .p1-records-block + .p1-records-block {
  margin-top: var(--p1-space-4);
}
.p1-me-tools .p1-link-list,
.p1-records-browse,
.p1-link-list {
  border-radius: var(--p1-radius-md);
  overflow: hidden;
}
.p1-me-tools {
  margin-top: var(--p1-space-24);
  padding: var(--p1-space-24) var(--p1-space-20) 0;
  border: 1px solid color-mix(in srgb, var(--p1-border) 75%, transparent);
  border-radius: var(--p1-radius-large);
  background: var(--p1-surface-subtle);
}
.p1-records-entry + .p1-records-entry {
  padding-top: var(--p1-space-14);
  border-top: 1px solid color-mix(in srgb, var(--p1-border) 50%, transparent);
}
.p1-link-list--meta {
  margin-top: var(--p1-space-24);
}
.p1-day-card-name {
  display: block;
  margin: 0 0 var(--p1-space-4);
  color: var(--p1-text-secondary);
  font-size: var(--p1-font-caption-size);
  font-weight: var(--p1-font-caption-weight);
}
.p1-day-card-open-indicator {
  display: inline-flex;
  margin-top: var(--p1-space-8);
  color: var(--p1-primary);
  font-size: 1.1rem;
  line-height: 1;
}

@media (min-width: 1180px) {
  body.p1-shell-active .p1-panel { max-width: 46rem; }
  body.p1-companion .p1-companion-rail .p1-day-card-trigger {
    grid-template-columns: 88px minmax(0, 1fr);
    align-items: start;
  }
  body.p1-companion .p1-companion-rail .p1-day-card-media img {
    width: 88px;
    height: 88px;
  }
  body.p1-companion .p1-companion-rail .p1-day-card-copy .p1-day-card-name,
  body.p1-companion .p1-companion-rail .p1-day-card-copy .p1-para,
  body.p1-companion .p1-companion-rail .p1-day-card-open-indicator { display: none; }
  body.p1-companion .p1-companion-rail .p1-day-card-trigger { min-height: 88px; }
}

html[data-theme="dark"] .p1-today-reflection {
  border-color: color-mix(in srgb, var(--p1-primary) 34%, var(--p1-border));
  background: color-mix(in srgb, var(--p1-primary-muted) 20%, var(--p1-card));
}
html[data-theme="dark"] .p1-me-tools {
  border-color: color-mix(in srgb, var(--p1-border) 88%, transparent);
  background: color-mix(in srgb, var(--p1-surface-subtle) 74%, var(--p1-card));
}

/* Today visual repair: compact companion invitation and calm composer. */
.p1-day-card {
  width: 100%;
  min-height: 0;
  overflow: hidden;
}
.p1-day-card-trigger {
  display: grid;
  grid-template-columns: 56px minmax(10rem, 1fr);
  align-items: center;
  gap: var(--p1-space-12);
  width: 100%;
  min-width: 0;
  min-height: 72px;
  padding: var(--p1-space-12);
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
}
.p1-day-card-media,
.p1-day-card-media img {
  display: block;
  width: 56px;
  height: 56px;
  border-radius: var(--p1-radius-sm);
  object-fit: cover;
}
.p1-day-card-copy { min-width: 0; }
.p1-day-card-copy .p1-card-title {
  display: block;
  overflow-wrap: normal;
  word-break: keep-all;
  white-space: normal;
  line-height: 1.35;
}
.p1-companion-rail .p1-today-card-slot { min-width: 0; }

.p1-reflection-host .reflection-card {
  display: grid;
  gap: var(--p1-space-16);
  padding: var(--p1-space-20);
  border: 1px solid color-mix(in srgb, var(--p1-primary) 18%, var(--p1-border));
  border-radius: var(--p1-radius-large);
  background: var(--p1-card);
}
.reflection-card-kicker { margin: 0; color: var(--p1-text-muted); font-size: var(--p1-font-caption-size); }
.reflection-card-prompt { margin: 0; color: var(--p1-text-primary); font-size: var(--p1-font-body-size); line-height: 1.6; }
.reflection-reactions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--p1-space-8);
  margin: 0;
  padding: 0;
  border: 0;
}
.reflection-reactions legend { margin-bottom: var(--p1-space-8); color: var(--p1-text-secondary); font-size: var(--p1-font-caption-size); }
.reflection-reaction {
  display: inline-flex;
  min-height: var(--p1-touch-min);
  align-items: center;
  border: 1px solid var(--p1-border);
  border-radius: 999px;
  background: var(--p1-surface-subtle);
  color: var(--p1-text-primary);
  cursor: pointer;
  font: inherit;
  font-size: var(--p1-font-caption-size);
}
.reflection-reaction input { position: absolute; opacity: 0; pointer-events: none; }
.reflection-reaction span { display: block; padding: var(--p1-space-10) var(--p1-space-14); }
.reflection-reaction:has(input:focus-visible) { outline: 3px solid color-mix(in srgb, var(--p1-primary) 40%, transparent); outline-offset: 2px; }
.reflection-reaction.is-selected { border-color: var(--p1-primary); background: var(--p1-primary-muted); box-shadow: inset 0 0 0 2px var(--p1-primary); }
.reflection-note-label { color: var(--p1-text-secondary); font-size: var(--p1-font-caption-size); }
.reflection-note {
  width: 100%;
  min-height: 7rem;
  box-sizing: border-box;
  padding: var(--p1-space-12);
  border: 1px solid var(--p1-border);
  border-radius: var(--p1-radius-md);
  background: var(--p1-input);
  color: var(--p1-text-primary);
  font: inherit;
  line-height: 1.55;
  resize: vertical;
}
.reflection-note:focus-visible { outline: 3px solid color-mix(in srgb, var(--p1-primary) 40%, transparent); outline-offset: 2px; }

/* Guest Today thought draft — public shell loads phase1-app.css (not styles.css) */
.p1-me-relationship,
.relationship-picker,
.relationship-options,
.relationship-option {
  min-width: 0;
}
.relationship-picker {
  margin: 0;
  padding: 0;
  border: 0;
}
.relationship-picker legend {
  font: inherit;
  font-weight: var(--p1-font-label-weight);
  color: var(--p1-text-primary);
}
.relationship-help {
  margin: var(--p1-space-4) 0 var(--p1-space-12);
  color: var(--p1-text-muted);
  font-size: var(--p1-font-body-small-size);
  line-height: var(--p1-font-body-small-line);
}
.relationship-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--p1-space-8);
}
.relationship-option {
  display: flex;
  min-height: var(--p1-touch-min);
  align-items: center;
  gap: var(--p1-space-8);
  box-sizing: border-box;
  padding: var(--p1-space-10) var(--p1-space-12);
  border: 1px solid var(--p1-border);
  border-radius: var(--p1-radius-md);
  background: var(--p1-surface-subtle);
  color: var(--p1-text-primary);
  cursor: pointer;
  font-size: var(--p1-font-body-small-size);
  line-height: var(--p1-font-body-small-line);
}
.relationship-option input {
  flex: 0 0 auto;
  accent-color: var(--p1-primary);
}
.relationship-option:has(input:checked) {
  border-color: var(--p1-primary);
  background: var(--p1-primary-muted);
  box-shadow: inset 0 0 0 1px var(--p1-primary);
}
.relationship-option:has(input:focus-visible) {
  outline: 3px solid var(--p1-focus);
  outline-offset: 2px;
}
.relationship-prompt {
  margin: 0 0 var(--p1-space-16);
  padding: var(--p1-space-12);
  border: 1px solid var(--p1-border);
  border-radius: var(--p1-radius-md);
  background: var(--p1-surface-subtle);
  color: var(--p1-text-primary);
}
.relationship-prompt strong,
.relationship-prompt p { margin: 0; }
.relationship-prompt p {
  margin-top: var(--p1-space-4);
  color: var(--p1-text-secondary);
  font-size: var(--p1-font-body-small-size);
  line-height: var(--p1-font-body-small-line);
}
.relationship-prompt .p1-text-link { margin-top: var(--p1-space-8); }
@media (max-width: 384px) {
  .relationship-options { grid-template-columns: minmax(0, 1fr); }
}

.p1-guest-draft {
  display: block;
  width: 100%;
  min-width: 0;
  margin: var(--p1-space-12) 0 var(--p1-space-16);
}
.p1-guest-draft-input {
  display: block;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  min-height: 5.5rem;
  margin: 0;
  padding: var(--p1-space-12) var(--p1-space-16);
  border: 1px solid var(--p1-border);
  border-radius: var(--p1-radius-md);
  background: var(--p1-input);
  color: var(--p1-text-primary);
  font: inherit;
  font-size: var(--p1-font-body-size);
  line-height: var(--p1-font-body-line);
  resize: vertical;
  appearance: none;
  -webkit-appearance: none;
  color-scheme: inherit;
}
.p1-guest-draft-input::placeholder {
  color: var(--p1-text-muted);
  opacity: 1;
}
.p1-guest-draft-input:focus {
  outline: none;
}
.p1-guest-draft-input:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--p1-primary) 40%, transparent);
  outline-offset: 2px;
}
.p1-today-reflection > .p1-btn[data-p1-signup] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.reflection-card-hint { margin: 0; color: var(--p1-text-muted); font-size: var(--p1-font-caption-size); line-height: 1.5; }
.reflection-card-actions { display: flex; flex-wrap: wrap; gap: var(--p1-space-8); align-items: center; }
.reflection-btn { min-height: var(--p1-touch-min); padding: var(--p1-space-10) var(--p1-space-16); border: 1px solid var(--p1-border); border-radius: var(--p1-radius-sm); font: inherit; cursor: pointer; }
.reflection-btn--primary { background: var(--p1-primary); color: var(--p1-on-primary); }
.reflection-btn--secondary { background: transparent; color: var(--p1-text-primary); }
.reflection-card-error { margin: 0; color: var(--p1-danger, #a33); }

@media (max-width: 1179px) {
  .p1-companion-rail { display: none !important; }
  .p1-today-card-slot { display: block; margin: var(--p1-space-12) 0; }
  .p1-today-card-slot .p1-day-card { border: 1px solid var(--p1-border); background: var(--p1-card); border-radius: var(--p1-radius-md); }
  .p1-today-card-slot .p1-day-card-trigger { min-height: var(--p1-touch-min); }
}
@media (max-width: 384px) {
  .p1-guest-draft,
  .p1-guest-draft-input,
  .p1-today-reflection > .p1-btn[data-p1-signup] {
    width: 100%;
    max-width: 100%;
  }
  .p1-guest-draft-input {
    min-height: 5.25rem;
    font-size: var(--p1-font-body-size);
    line-height: var(--p1-font-body-line);
  }
}

@media (max-width: 520px) {
  .p1-reflection-host .reflection-card { padding: var(--p1-space-16); }
  .reflection-reaction { flex: 1 1 100%; }
  .reflection-card-actions > button { width: 100%; }
}

/* Public shell overlay layer. Keep these rules in the stylesheet loaded by
 * index.html; input.css is not part of the phase-one shell path. */
.privacy-notice,
.signin-modal {
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  padding: 1rem;
  overflow: auto;
  background: rgb(2 6 23 / 0.55);
}

.privacy-notice {
  align-items: flex-end;
}

.privacy-notice-panel,
.signin-modal-panel {
  box-sizing: border-box;
  max-width: calc(100vw - 2rem);
  max-height: calc(100dvh - 2rem);
  overflow: auto;
}

.privacy-notice-panel {
  width: min(100%, 28rem);
  padding: 1.25rem;
  border: 1px solid var(--p1-border-strong, rgba(26, 43, 51, 0.18));
  border-radius: 1rem;
  background: var(--p1-card, #fff);
  color: var(--p1-text-primary, #1a2b33);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.28);
}

.privacy-notice-title,
.privacy-notice-body,
.privacy-notice-actions {
  margin-top: 0;
}

.privacy-notice-body { margin-top: 0.5rem; }
.privacy-notice-actions { margin-top: 1rem; display: flex; justify-content: flex-end; }

.privacy-notice-accept {
  min-height: 2.75rem;
  padding: 0.55rem 1rem;
  border: 1px solid var(--p1-primary, #2a9d8f);
  border-radius: 0.5rem;
  background: var(--p1-primary, #2a9d8f);
  color: var(--p1-on-primary, #fff);
  cursor: pointer;
}

.signin-modal-panel {
  width: min(100%, 22rem);
  padding: 1rem 1.1rem 1.15rem;
  border: 1px solid var(--p1-border-strong, rgba(26, 43, 51, 0.18));
  border-radius: 0.9rem;
  background: var(--p1-card, #fff);
  color: var(--p1-text-primary, #1a2b33);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.28);
}

body:has(.privacy-notice),
body:has(.signin-modal) {
  overflow: hidden;
}

@media (max-width: 384px) {
  .privacy-notice,
  .signin-modal { padding: 0.65rem; }
  .privacy-notice-panel,
  .signin-modal-panel {
    width: 100%;
    max-width: 100%;
    max-height: calc(100dvh - 1.3rem);
  }
}


/* --- Compact locale dropdown (Today + utility + Me) --- */
.p1-locale-picker {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: stretch;
  width: auto;
  max-width: min(16rem, 100%);
  min-width: 0;
  box-sizing: border-box;
}
.p1-locale-trigger {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-width: 0;
  min-height: var(--p1-touch-min, 44px);
  max-width: 100%;
  padding: 0.35rem 0.55rem;
  border: 1px solid var(--p1-border);
  border-radius: var(--p1-radius-sm, 8px);
  background: var(--p1-input, var(--p1-surface));
  color: var(--p1-text-primary);
  font: inherit;
  font-size: var(--p1-font-caption-size, 13px);
  font-weight: 650;
  letter-spacing: 0.03em;
  cursor: pointer;
}
.p1-locale-trigger:focus-visible,
.p1-locale-opt:focus-visible {
  outline: 2px solid var(--p1-focus, var(--p1-primary));
  outline-offset: 2px;
}
.p1-locale-picker.is-open .p1-locale-trigger {
  border-color: color-mix(in srgb, var(--p1-primary) 45%, var(--p1-border));
}
.p1-locale-trigger-flag {
  display: inline-flex;
  flex: 0 0 auto;
  line-height: 0;
}
.p1-locale-trigger-code {
  flex: 0 0 auto;
  min-width: 1.4rem;
}
.p1-locale-chevron {
  flex: 0 0 auto;
  margin-left: 0.1rem;
  color: var(--p1-text-muted);
  transition: transform var(--p1-motion-fast, 150ms) var(--p1-motion-ease, ease);
}
.p1-locale-picker.is-open .p1-locale-chevron {
  transform: rotate(180deg);
}
.p1-locale-panel {
  position: absolute;
  top: calc(100% + 0.3rem);
  right: 0;
  z-index: 40;
  width: max(100%, 11.5rem);
  max-width: min(16rem, calc(100vw - 1.25rem));
  box-sizing: border-box;
}
.p1-locale-panel-scroll {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  max-height: min(16rem, 50vh);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0.3rem;
  border: 1px solid var(--p1-border);
  border-radius: var(--p1-radius-md, 12px);
  background: var(--p1-card, var(--p1-surface));
  box-shadow: var(--p1-shadow-elevated, 0 12px 28px -18px rgba(20, 36, 48, 0.35));
}
.p1-locale-opt {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  width: 100%;
  min-width: 0;
  min-height: var(--p1-touch-min, 44px);
  padding: 0.4rem 0.5rem;
  border: 1px solid transparent;
  border-radius: var(--p1-radius-sm, 8px);
  background: transparent;
  color: var(--p1-text-primary);
  font: inherit;
  font-size: var(--p1-font-caption-size, 13px);
  text-align: left;
  cursor: pointer;
}
.p1-locale-opt:hover {
  background: color-mix(in srgb, var(--p1-primary-muted) 55%, transparent);
}
.p1-locale-opt.is-selected {
  border-color: color-mix(in srgb, var(--p1-primary) 45%, transparent);
  background: color-mix(in srgb, var(--p1-primary-muted) 70%, var(--p1-surface));
}
.p1-locale-flag {
  display: block;
  width: 18px;
  height: 12px;
  flex: 0 0 auto;
  border-radius: 2px;
  object-fit: cover;
  box-shadow: 0 0 0 1px color-mix(in srgb, #000 12%, transparent);
}
.p1-locale-code {
  flex: 0 0 auto;
  min-width: 1.5rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}
.p1-locale-name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--p1-text-secondary);
  font-weight: 500;
  letter-spacing: 0;
}
.p1-utility-choice--locale {
  display: grid;
  gap: 0.45rem;
  align-items: start;
}
.p1-utility-choice--locale > span {
  font-size: 0.85rem;
}
.p1-utility-choice--locale .p1-locale-picker {
  width: 100%;
  max-width: 100%;
}
.p1-utility-choice--locale .p1-locale-trigger {
  width: 100%;
  justify-content: flex-start;
}
.p1-utility-choice--locale .p1-locale-panel {
  left: 0;
  right: auto;
  width: 100%;
  max-width: 100%;
}
.p1-today-locale {
  max-width: 100%;
  min-width: 0;
}
.p1-today-locale .p1-locale-picker {
  margin-top: 0.15rem;
}
.p1-me-locale {
  display: grid;
  gap: 0.45rem;
}
.p1-me-locale .p1-locale-picker {
  width: 100%;
  max-width: 100%;
}
.p1-me-locale .p1-locale-trigger {
  width: 100%;
  justify-content: flex-start;
}
.lang-trigger-flag .p1-locale-flag,
.lang-option-flag .p1-locale-flag {
  width: 18px;
  height: 12px;
}
.lang-option--active {
  background: color-mix(in srgb, #22d3ee 12%, transparent);
}
@media (max-width: 384px) {
  .p1-locale-picker,
  .p1-today-locale .p1-locale-picker {
    max-width: 100%;
  }
  .p1-locale-panel {
    max-width: min(16rem, calc(100vw - 1rem));
  }
  .p1-locale-trigger {
    min-height: 2.5rem;
    padding: 0.3rem 0.45rem;
  }
  .p1-locale-opt {
    min-height: 2.5rem;
    padding: 0.35rem 0.4rem;
    gap: 0.35rem;
  }
  .p1-locale-flag {
    width: 16px;
    height: 11px;
  }
  .p1-locale-name {
    font-size: 0.78rem;
  }
}

/* Modern KBazy auth surface */
.signin-modal {
  padding: 1.25rem;
  background: rgb(10 18 28 / 0.62);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
}
.signin-modal-panel {
  width: min(100%, 26.25rem);
  max-width: calc(100vw - 2rem);
  padding: 1.75rem;
  border-radius: 1.375rem;
  border-color: color-mix(in srgb, var(--p1-border-strong) 78%, transparent);
  background: var(--p1-card, #fff);
  box-shadow: 0 24px 70px rgb(8 18 28 / 0.24);
}
.signin-modal-head { margin-bottom: 1.25rem; }
.signin-modal-head h2 { font-size: 1.25rem; line-height: 1.2; }
.signin-modal-sub { margin-top: 0.45rem; font-size: 0.875rem; line-height: 1.5; }
.signin-close {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 999px;
  background: var(--p1-surface-subtle, #f5faf9);
  color: var(--p1-text-secondary, #4a606c);
  cursor: pointer;
}
.signin-close:hover { background: var(--p1-primary-muted, #e4f2ef); }
.signin-close:focus-visible,
.signin-google:focus-visible,
.signin-field input:focus-visible,
.signin-submit:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--p1-primary, #2a9d8f) 42%, transparent);
  outline-offset: 2px;
}
.signin-body { gap: 1rem; }
.signin-google,
.signin-submit {
  width: 100%;
  min-height: 2.875rem;
  box-sizing: border-box;
  border-radius: 0.75rem;
  font-size: 0.9375rem;
  font-weight: 650;
}
.signin-google { padding: 0.7rem 1rem; }
.signin-divider { gap: 0.75rem; margin: 0.1rem 0; }
.signin-field { gap: 0.45rem; font-size: 0.8125rem; font-weight: 600; }
.signin-field input {
  width: 100%;
  min-height: 2.875rem;
  box-sizing: border-box;
  padding: 0.7rem 0.8rem;
  border-radius: 0.75rem;
  background: var(--p1-input, #f0f6f5);
  color: var(--p1-text-primary, #1a2b33);
}
.signin-field input:focus { border-color: var(--p1-primary, #2a9d8f); }
.signin-submit { padding: 0.7rem 1rem; background: var(--p1-primary, #2a9d8f); color: var(--p1-on-primary, #fff); }
.signin-legal { margin-top: 0.15rem; font-size: 0.6875rem; line-height: 1.5; }
@media (max-width: 384px) {
  .signin-modal-panel { padding: 1.5rem 1.25rem; border-radius: 1.25rem; }
  .signin-modal-head h2 { font-size: 1.125rem; }
}

/* Auth modal v2 polish — visual-only override */
.signin-modal { animation: signin-modal-in 160ms ease-out both; }
.signin-modal-panel {
  width: min(100%, 26.25rem);
  padding: 2rem;
  border-radius: 1.375rem;
  background: #fafbfc;
  box-shadow: 0 20px 55px rgb(8 18 28 / 0.18), 0 4px 16px rgb(8 18 28 / 0.08);
  transform-origin: center;
}
.signin-modal-head { position: relative; padding-right: 2.5rem; margin-bottom: 1.5rem; }
.signin-modal-head h2 { font-size: 1.25rem; letter-spacing: -0.01em; }
.signin-modal-sub { margin-top: 0.5rem; font-size: 0.875rem; line-height: 1.55; }
.signin-close {
  position: absolute;
  top: -0.35rem;
  right: -0.35rem;
  width: 2rem;
  height: 2rem;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--p1-text-secondary, #4a606c);
  font-size: 1.5rem;
  font-weight: 400;
  line-height: 1;
}
.signin-close:hover { background: transparent; color: var(--p1-text-primary, #1a2b33); }
.signin-body { gap: 1.1rem; }
.signin-google { min-height: 3.125rem; padding: 0.8rem 1rem; }
.signin-divider { gap: 0.75rem; margin: 0.1rem 0; font-size: 0.75rem; }
.signin-divider::before, .signin-divider::after { background: var(--p1-border-strong, rgb(26 43 51 / 0.18)); }
.signin-form { gap: 0.8rem; }
.signin-field { gap: 0.5rem; }
.signin-field input { min-height: 3rem; padding: 0.75rem 0.85rem; }
.signin-submit { min-height: 3rem; padding: 0.75rem 1rem; }
.signin-legal { margin-top: 0.15rem; font-size: 0.75rem; line-height: 1.5; text-align: center; }
html[data-theme="dark"] .signin-modal-panel,
html.theme-dark .signin-modal-panel,
body.theme-dark .signin-modal-panel { background: var(--p1-card, #1b252b); box-shadow: 0 20px 55px rgb(0 0 0 / 0.38); }
@keyframes signin-modal-in { from { opacity: 0; transform: scale(0.985); } to { opacity: 1; transform: scale(1); } }
@media (max-width: 384px) {
  .signin-modal-panel { padding: 2rem 1.5rem; border-radius: 1.25rem; }
  .signin-modal-head { padding-right: 2.25rem; }
}

/* Specific-person analysis: compact, paid-task boundary next to Relationship Core. */
.specific-person-analysis { display: grid; gap: 0.7rem; }
.specific-person-meta { display: flex; flex-wrap: wrap; gap: 0.65rem; color: var(--p1-text-secondary, #4a606c); font-size: 0.82rem; }
.specific-person-form { display: grid; gap: 0.7rem; }
.specific-person-form label { display: grid; gap: 0.3rem; color: var(--p1-text-secondary, #4a606c); font-size: 0.82rem; }
.specific-person-form input, .specific-person-form select { min-height: 2.6rem; width: 100%; padding: 0.55rem 0.7rem; border: 1px solid var(--p1-border, rgb(26 43 51 / 0.16)); border-radius: 0.65rem; background: var(--p1-card, #fff); color: var(--p1-text-primary, #1a2b33); }
.specific-person-check { display: flex !important; grid-template-columns: auto 1fr; align-items: center; gap: 0.45rem !important; }
.specific-person-check input { width: auto; min-height: 1rem; }
.specific-person-confirm { display: grid; gap: 0.55rem; padding: 0.8rem; border: 1px solid var(--p1-border-strong, rgb(26 43 51 / 0.18)); border-radius: 0.8rem; background: var(--p1-soft, rgb(26 43 51 / 0.04)); }
.specific-person-status, .specific-person-task { margin: 0; color: var(--p1-text-secondary, #4a606c); font-size: 0.85rem; line-height: 1.55; }
.specific-person-status { display: flex; align-items: center; gap: .5rem; }
.specific-person-spinner { width: .8rem; height: .8rem; flex: 0 0 auto; border: 2px solid rgb(26 43 51 / .18); border-top-color: var(--p1-accent, #2f8f83); border-radius: 50%; animation: p1-specific-person-spin .8s linear infinite; }
@keyframes p1-specific-person-spin { to { transform: rotate(360deg); } }
.specific-person-source, .specific-person-privacy { margin: 0; color: var(--p1-text-secondary, #4a606c); font-size: 0.75rem; line-height: 1.45; }
.specific-person-result { display: grid; gap: .85rem; max-width: 100%; padding: 1rem; border: 1px solid color-mix(in srgb, var(--p1-accent, #2f8f83) 24%, var(--p1-border, rgba(26, 43, 51, .16))); border-radius: .95rem; background: color-mix(in srgb, var(--p1-soft, rgba(26, 43, 51, .04)) 72%, transparent); }
.specific-person-result header, .specific-person-result section { display: grid; gap: .35rem; }
.specific-person-result h4, .specific-person-result h5, .specific-person-result p { margin: 0; }
.specific-person-result h4 { color: var(--p1-text-primary, #1a2b33); font-size: 1.02rem; line-height: 1.4; }
.specific-person-result h5, .specific-person-result-kicker { color: var(--p1-accent, #2f8f83); font-size: .78rem; font-weight: 700; letter-spacing: .02em; }
.specific-person-result p { color: var(--p1-text-secondary, #4a606c); font-size: .91rem; line-height: 1.65; }
.specific-person-result-guidance { padding: .8rem; border-radius: .75rem; background: color-mix(in srgb, var(--p1-accent, #2f8f83) 9%, transparent); }
.specific-person-result-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem; }
.specific-person-result-grid section { min-width: 0; padding: .8rem; border: 1px solid color-mix(in srgb, var(--p1-border, rgba(26, 43, 51, .16)) 75%, transparent); border-radius: .75rem; background: var(--p1-card, #fff); }
.specific-person-result-guidance ol { display: grid; gap: .45rem; margin: .25rem 0 0; padding-inline-start: 1.25rem; color: var(--p1-text-secondary, #4a606c); font-size: .91rem; line-height: 1.6; }
.specific-person-result-conclusion { padding: .85rem; border-radius: .75rem; background: color-mix(in srgb, var(--p1-accent, #2f8f83) 6%, transparent); }
.specific-person-another { justify-self: start; }
.specific-person-result-basis { padding-top: .8rem; border-top: 1px solid var(--p1-border, rgba(26, 43, 51, .16)); }
.specific-person-result-basis dl { display: grid; gap: .45rem; margin: 0; }
.specific-person-result-basis dl div { display: grid; grid-template-columns: minmax(7.5rem, .8fr) minmax(0, 1.2fr); gap: .5rem; }
.specific-person-result-basis dt { color: var(--p1-text-secondary, #4a606c); font-size: .78rem; }
.specific-person-result-basis dd { margin: 0; color: var(--p1-text-primary, #1a2b33); font-size: .82rem; overflow-wrap: anywhere; }
.specific-person-result-unavailable { margin: 0; color: var(--p1-text-secondary, #4a606c); font-size: .85rem; }
.p1-credit-wallet { border: 1px solid var(--p1-border, rgba(120, 140, 170, .24)); border-radius: 18px; padding: 1rem; }
.p1-credit-balance { font-size: 1.8rem; color: #c9a45c; }
.p1-credit-history { margin-top: .75rem; }
.p1-credit-history ul { list-style: none; padding: 0; margin: .6rem 0 0; display: grid; gap: .45rem; }
.p1-credit-history li { display: grid; grid-template-columns: 3rem 1fr auto; gap: .5rem; align-items: baseline; font-size: .9rem; }
@media (max-width: 640px) { .specific-person-result-grid { grid-template-columns: 1fr; } }
@media (max-width: 384px) { .specific-person-result-basis dl div { grid-template-columns: 1fr; gap: .12rem; } }
@media (max-width: 384px) {
  .specific-person-form input, .specific-person-form select { font-size: 1rem; }
  .specific-person-analysis .p1-btn { width: 100%; }
}
.p1-calculation-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0.75rem 0 1rem;
}

.p1-calculation-tabs [aria-selected="true"] {
  border-color: rgba(34, 211, 238, 0.65);
  background: rgba(8, 145, 178, 0.2);
}

.p1-calculation-evidence [role="tabpanel"] {
  min-width: 0;
}
.p1-calculation-panel-card {
  padding: var(--p1-space-12);
  border: 1px solid var(--p1-border);
  border-radius: var(--p1-radius-md);
  background: var(--p1-surface-subtle);
  overflow-wrap: anywhere;
}
.p1-calculation-panel-card[hidden] { display: none; }
.p1-calculation-panel-card > .bazi-result,
.p1-calculation-panel-card > [data-natal-viz] {
  min-width: 0;
}
.p1-calculation-panel-card .natal-planet-grid {
  grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
}

.p1-calculation-cta {
  margin-top: 1rem;
}

.p1-evidence-intro,
.p1-calculation-evidence__header {
  margin-bottom: 1rem;
  padding: 1rem 1.05rem;
  border: 1px solid rgba(99, 102, 241, .18);
  border-radius: 1rem;
  background: linear-gradient(135deg, rgba(238, 242, 255, .9), var(--p1-surface, #fff));
}
.p1-evidence-intro__eyebrow,
.p1-calculation-evidence__eyebrow {
  margin: 0 0 .3rem;
  color: var(--p1-accent, #4f46e5);
  font-size: .72rem;
  font-weight: 750;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.p1-evidence-intro h3,
.p1-calculation-evidence__header h3 {
  margin: 0;
  color: var(--p1-text-primary, #0f172a);
  font-size: 1.05rem;
}
.p1-evidence-intro > p:last-child,
.p1-calculation-evidence__header > p:last-child {
  margin: .4rem 0 0;
  color: var(--p1-muted, #64748b);
  font-size: .82rem;
  line-height: 1.55;
}
.p1-evidence-block--calculation {
  padding: .95rem;
  border: 1px solid var(--p1-border, #e2e8f0);
  border-radius: 1rem;
  background: var(--p1-surface, #fff);
}
.p1-evidence-upgrade-card {
  display: flex;
  align-items: center;
  gap: .7rem;
  padding: .85rem;
  border: 1px solid rgba(99, 102, 241, .2);
  border-radius: .9rem;
  background: linear-gradient(135deg, rgba(238, 242, 255, .8), var(--p1-surface, #fff));
}
.p1-evidence-upgrade-icon {
  display: inline-grid;
  width: 1.8rem;
  height: 1.8rem;
  flex: 0 0 1.8rem;
  place-items: center;
  border-radius: 50%;
  color: var(--p1-accent, #4f46e5);
  background: rgba(99, 102, 241, .12);
}
.p1-evidence-upgrade-card > div { min-width: 0; flex: 1; }
.p1-evidence-upgrade-card strong { color: var(--p1-text-primary, #0f172a); font-size: .86rem; }
.p1-evidence-upgrade-card p { margin: .2rem 0 0; color: var(--p1-muted, #64748b); font-size: .76rem; }
.p1-evidence-upgrade-card .p1-btn { flex: 0 0 auto; }
.p1-evidence-upgrade-card--locked { opacity: .9; }
.p1-calculation-evidence__header { margin-bottom: .85rem; }
.p1-calculation-evidence--premium .p1-calculation-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .55rem;
  margin: 0 0 .85rem;
}
.p1-calculation-evidence--premium .p1-calculation-tabs [role="tab"] {
  min-height: 2.8rem;
  border-color: var(--p1-border, #e2e8f0);
  background: var(--p1-surface, #fff);
  color: var(--p1-muted, #64748b);
}
.p1-calculation-evidence--premium .p1-calculation-tabs [aria-selected="true"] {
  border-color: var(--p1-accent, #6366f1);
  color: var(--p1-accent, #4f46e5);
  background: rgba(99, 102, 241, .1);
  box-shadow: inset 0 -2px 0 var(--p1-accent, #6366f1);
}
.p1-calculation-state-card {
  display: flex;
  align-items: center;
  gap: .7rem;
  padding: 1rem;
  border: 1px solid var(--p1-border, #e2e8f0);
  border-radius: 1rem;
  background: var(--p1-surface-subtle, #f8fafc);
}
.p1-calculation-state-card p { margin: 0; }
.p1-calculation-state-icon {
  display: inline-grid;
  width: 1.7rem;
  height: 1.7rem;
  flex: 0 0 1.7rem;
  place-items: center;
  border-radius: 50%;
  color: var(--p1-accent, #4f46e5);
  background: rgba(99, 102, 241, .12);
  font-weight: 800;
}
@media (max-width: 520px) {
  .p1-evidence-upgrade-card { align-items: flex-start; flex-wrap: wrap; }
  .p1-evidence-upgrade-card .p1-btn { width: 100%; }
  .p1-evidence-block { padding: .85rem; }
  .p1-calculation-panel-card { padding: .75rem; }
}
.p1-credit-breakdown {
  display: grid;
  gap: var(--p1-space-8);
  margin: var(--p1-space-12) 0;
}

.p1-credit-breakdown > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--p1-space-12);
  padding: var(--p1-space-8) 0;
  border-bottom: 1px solid var(--p1-border);
}

.p1-credit-breakdown dt { color: var(--p1-text-secondary); }
.p1-credit-breakdown dd { margin: 0; text-align: right; color: var(--p1-text-primary); }

.p1-payment-offer,
.specific-person-purchase {
  display: grid;
  gap: var(--p1-space-8);
  margin-top: var(--p1-space-16);
  padding: var(--p1-space-16);
  border: 1px solid var(--p1-border);
  border-radius: var(--p1-radius-md);
  background: color-mix(in srgb, var(--p1-primary-muted) 38%, transparent);
}

.p1-payment-offer p,
.specific-person-purchase p { margin: 0; }
.p1-payment-offer .p1-btn,
.specific-person-purchase .p1-btn { width: 100%; max-width: 24rem; }
.p1-payment-active { color: var(--p1-success); font-weight: 700; }

.payment-return {
  position: relative;
  z-index: 30;
  width: min(100% - 2rem, 44rem);
  margin: 1rem auto;
}

.payment-return__card {
  display: grid;
  gap: var(--p1-space-12);
  padding: var(--p1-space-16);
  border: 1px solid var(--p1-border-strong);
  border-radius: var(--p1-radius-md);
  background: var(--p1-card);
  color: var(--p1-text-primary);
  box-shadow: var(--p1-shadow-subtle);
}

.payment-return__card:focus { outline: none; }
.payment-return__card p { margin: 0; }
.payment-return__actions { display: flex; flex-wrap: wrap; gap: var(--p1-space-8); }

@media (max-width: 480px) {
  .p1-credit-breakdown > div { align-items: flex-start; flex-direction: column; gap: 0.2rem; }
  .p1-credit-breakdown dd { text-align: left; }
  .payment-return__actions > * { width: 100%; justify-content: center; text-align: center; }
}
