html,
body.goli-product {
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

body.goli-product .preview-toolbar,
body.goli-product .toolbar {
  display: none !important;
}

body.goli-product [hidden] {
  display: none !important;
}

/* Hydration-sensitive copy stays hidden until the parent shell supplies the
   current profile/plan. The neutral approved background remains visible. */
html:not([data-goli-hydrated="true"])
  body[data-goli-page="welcome"] :is(.welcome-main, .welcome-bottom),
html:not([data-goli-hydrated="true"])
  body[data-goli-page="plan"] #planPage {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

html[data-goli-hydrated="true"]
  body[data-goli-page="welcome"] :is(.welcome-main, .welcome-bottom),
html[data-goli-hydrated="true"]
  body[data-goli-page="plan"] #planPage {
  opacity: 1;
  visibility: visible;
  transition: opacity 120ms ease-out;
}

body.goli-product .workbench,
body.goli-product .preview-workbench,
body.goli-product .archive {
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  grid-template-rows: minmax(0, 1fr) !important;
}

body.goli-product .preview-stage,
body.goli-product .preview-canvas,
body.goli-product .stage {
  padding: 0 !important;
}

body.goli-product .preview-frame,
body.goli-product .app-viewport {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* GOLI Logo Canonical Component · R2
   Geometry is global. Oxygen page code may not redefine it. */
:root {
  --goli-brand-ink: #171a17;
  --goli-brand-oxygen: #ddf77e;
}

body.goli-product {
  --goli-product-canvas: #eef7dd;
  background: var(--goli-product-canvas) !important;
  min-height: 100%;
  min-height: 100dvh;
}

body[data-goli-page="welcome"] { --goli-product-canvas: #eef7dd; }
body[data-goli-page="profile"] { --goli-product-canvas: #ecf1e6; }
body[data-goli-page="plan"] { --goli-product-canvas: #f8faf4; }
body[data-goli-page="player"] { --goli-product-canvas: var(--bg-lime-mid, #ecfad0); }
body[data-goli-page="result"] { --goli-product-canvas: #f7fbef; }

body.goli-product :is(
  .workbench,
  .preview-workbench,
  .archive,
  .preview-stage,
  .preview-canvas,
  .stage,
  .preview-frame,
  .app-viewport
) {
  background-color: var(--goli-product-canvas);
}

body.goli-product {
  --goli-brand-top: max(18px, var(--goli-safe-top, env(safe-area-inset-top)));
  --goli-brand-left: max(18px, var(--goli-safe-left, env(safe-area-inset-left)));
  --goli-brand-mark-size: 30px;
  --goli-brand-word-size: 18px;
  --goli-brand-gap: 9px;
}

body.goli-product .goli-brand-slot {
  position: absolute;
  top: var(--goli-brand-top);
  left: var(--goli-brand-left);
  z-index: 30;
}

body.goli-product .goli-brand {
  --goli-brand-fg: var(--goli-brand-ink);
  --goli-brand-text-shadow: none;
  --goli-brand-mark-filter: none;

  display: inline-flex;
  align-items: center;
  gap: var(--goli-brand-gap);
  height: var(--goli-brand-mark-size);
  color: var(--goli-brand-fg);
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
}

body.goli-product .goli-brand__mark {
  display: block;
  width: var(--goli-brand-mark-size);
  height: var(--goli-brand-mark-size);
  flex: 0 0 var(--goli-brand-mark-size);
  overflow: visible;
  color: inherit;
  filter: var(--goli-brand-mark-filter);
}

body.goli-product .goli-brand__wordmark {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Rounded", "PingFang SC",
    "Microsoft YaHei", "Segoe UI", sans-serif;
  font-size: var(--goli-brand-word-size);
  font-weight: 820;
  line-height: 1;
  letter-spacing: -0.02em;
  color: inherit;
  text-shadow: var(--goli-brand-text-shadow);
}

body.goli-product .goli-brand--mark-only .goli-brand__wordmark {
  display: none;
}

body.goli-product .goli-brand--standard {
  --goli-brand-mark-size: 30px;
  --goli-brand-word-size: 18px;
  --goli-brand-gap: 9px;
}

body.goli-product .goli-brand--compact {
  --goli-brand-mark-size: 27px;
  --goli-brand-word-size: 16px;
  --goli-brand-gap: 8px;
}

body[data-goli-page="profile"] .goli-brand-slot {
  z-index: 31;
}

body[data-goli-page="result"]
  .workbench[data-hydration-state="pending"]
  .app-viewport {
  visibility: hidden;
  pointer-events: none;
}

@media (max-width: 480px) {
  body.goli-product {
    --goli-brand-mark-size: 27px;
    --goli-brand-word-size: 16px;
    --goli-brand-gap: 8px;
  }

  body.goli-product .goli-brand:not(.goli-brand--standard) {
    --goli-brand-mark-size: 27px;
    --goli-brand-word-size: 16px;
    --goli-brand-gap: 8px;
  }
}

body[data-goli-page="profile"],
body[data-goli-page="profile"] .archive,
body[data-goli-page="profile"] .stage {
  background-color: var(--goli-product-canvas) !important;
}

body[data-goli-page="profile"] .frame {
  display: none !important;
}

body[data-goli-page="profile"] .onboarding-layer {
  position: absolute;
  inset: 0;
  min-width: 0;
  max-width: 100%;
  overflow-x: hidden;
  overscroll-behavior-x: none;
  touch-action: pan-y;
}

body[data-goli-page="profile"] :is(.onboarding-card, .onboarding-form) {
  min-width: 0;
  max-width: 100%;
  overflow-x: hidden;
  overscroll-behavior-x: none;
  touch-action: pan-y;
}

body[data-goli-page="plan"] #welcomePage,
body[data-goli-page="plan"] #playerPage,
body[data-goli-page="plan"] #resultPage {
  display: none !important;
}

body[data-goli-page="plan"] #planPage {
  display: flex !important;
}

body[data-goli-page="result"] .completion-chart {
  grid-template-columns:
    repeat(var(--goli-result-bar-count, 5), minmax(0, 1fr));
  justify-content: stretch;
  column-gap: 0;
}

body[data-goli-page="result"] .bar-item {
  box-sizing: border-box;
  height: calc(100% - 8px);
  padding-bottom: 4px;
  transform: translateY(-4px);
}

body[data-goli-page="result"] .bar-fill.is-zero {
  min-height: 0;
}

body[data-goli-page="result"] .bar-fill {
  height: 0;
  min-height: 0;
  transition: height 1000ms cubic-bezier(.22, .72, .2, 1);
  transition-delay: var(--bar-delay, 0ms);
}

body[data-goli-page="result"]
  .completion-chart[data-reveal-state="complete"]
  .bar-fill {
  height: var(--bar-fill);
}

body[data-goli-page="result"] button.calendar-day {
  margin: 0;
  padding: 0;
  appearance: none;
  border: 0;
  font: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

body[data-goli-page="result"] button.calendar-day:focus-visible {
  outline: 3px solid rgba(29, 35, 29, 0.72);
  outline-offset: 3px;
}

body[data-goli-page="result"] .calendar-day.selected {
  box-shadow:
    inset 0 0 0 2px #1d231d,
    0 0 0 4px rgba(201, 233, 92, 0.32),
    0 5px 12px rgba(76, 101, 38, 0.16);
}

@container result (max-width: 760px) {
  body[data-goli-page="result"] .completion-chart {
    grid-template-columns:
      repeat(var(--goli-result-bar-count, 5), minmax(0, 1fr));
    column-gap: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  body[data-goli-page="result"] .bar-fill {
    height: var(--bar-fill);
    transition: none !important;
    transition-delay: 0ms !important;
  }
}

@container result (max-height: 650px) and (min-width: 761px) {
  body[data-goli-page="result"] .completion-chart {
    height: 252px;
  }
}