/* Build page specific styles */
.builder {
  padding: var(--space-xl) 0 var(--space-3xl);
}

.builder__title {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 4vw, 2.25rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  margin-bottom: var(--space-xl);
}

.builder__subtitle {
  color: var(--color-text-secondary);
  margin-bottom: var(--space-2xl);
}

.builder__notice {
  background: var(--color-surface-alt, #f5f3f0);
  border: 1px solid var(--color-border, #e5e2de);
  border-radius: var(--radius-sm);
  padding: var(--space-sm) var(--space-md);
  margin-bottom: var(--space-lg);
  font-size: 0.875rem;
  color: var(--color-text-secondary);
}

.builder__notice p {
  margin: 0;
}

/* Preset cards */
.presets {
  margin: 0 auto var(--space-xl);
  max-width: 42rem;
}

.presets__title {
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: var(--space-sm);
}

.presets__desc {
  color: var(--color-text-secondary);
  font-size: 0.875rem;
  margin-bottom: var(--space-md);
}

.presets__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
  gap: var(--space-md);
  /* Reserve space for 1 row of preset cards to reduce CLS during JS population */
  min-height: 7.5rem;
}

.presets__more-wrap {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.3s ease;
}

.presets__more-wrap--open {
  grid-template-rows: 1fr;
}

.presets__more-inner {
  overflow: hidden;
}

.presets__more-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
  gap: var(--space-md);
  padding-top: var(--space-md);
}

.presets__more-fade {
  height: 12rem;
  margin-top: -12rem;
  position: relative;
  z-index: 1;
  background: linear-gradient(to bottom, transparent 0%, var(--color-bg) 60%);
  transition: opacity 0.3s ease;
  pointer-events: none;
  display: none;
}

.presets__more-wrap--open + .presets__more-fade {
  opacity: 0;
}

/* Help card */
.preset-card--help {
  cursor: pointer;
  opacity: 0.7;
  border-style: dashed;
  text-decoration: none;
}
.preset-card--help:hover {
  border-color: var(--color-accent);
  opacity: 1;
  text-decoration: none;
}
.preset-card__icon {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-accent);
  margin-bottom: var(--space-xs);
}
.preset-card--help .preset-card__icon {
  text-align: center;
}

.presets__toggle {
  display: block;
  width: 100%;
  margin-top: var(--space-md);
  padding: var(--space-xs) 0;
  background: none;
  border: none;
  color: var(--color-accent);
  font-size: 0.875rem;
  cursor: pointer;
  font-family: inherit;
  text-align: center;
}

.presets__toggle:hover {
  text-decoration: underline;
}

/* Sub-3-column: fade + toggle overlap for "reveal" effect */
@media (max-width: 41rem) {
  .presets__more-fade {
    display: block;
  }
  /* Position toggle container to overlap the faded area */
  #presets-toggle {
    margin-top: -5rem;
    position: relative;
    z-index: 2;
    text-align: center;
  }
  /* Style toggle as a pill for readability */
  .presets__toggle {
    background: var(--color-bg);
    padding: var(--space-sm) var(--space-lg);
    border-radius: var(--radius-md);
    width: auto;
    display: inline-block;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  }
  /* When expanded, reset positioning */
  .presets__more-wrap--open ~ #presets-toggle {
    margin-top: 0;
  }
  .presets__more-wrap--open ~ #presets-toggle .presets__toggle {
    background: none;
    padding: var(--space-xs) 0;
    width: 100%;
    display: block;
    box-shadow: none;
  }
}

/* 2-column: shorter fade (rows are shorter than 1-column stacked cards) */
@media (min-width: 28.0625rem) and (max-width: 41rem) {
  .presets__more-fade { height: 8rem; margin-top: -8rem; }
}

.preset-card {
  padding: var(--space-md);
  background: var(--color-surface);
  border: 3px solid var(--color-border);
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  text-align: left;
  font-family: inherit;
  color: var(--color-text);
}

@media (hover: hover) {
  .preset-card:hover {
    border-color: var(--color-border-strong);
  }
}

.preset-card:focus-visible {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px var(--color-accent-subtle);
}

.preset-card--selected {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px var(--color-accent-subtle);
  position: relative;
}

.preset-card--selected .preset-card__badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25em;
  position: absolute;
  top: var(--space-sm);
  right: var(--space-sm);
  background: var(--color-accent);
  color: #fff;
  font-size: 0.625rem;
  font-weight: 600;
  padding: 0.15em 0.5em;
  border-radius: var(--radius-sm);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.preset-card__badge {
  display: none;
}

/* Step number accent */
.step-number {
  color: var(--color-accent);
  font-weight: 700;
}

/* Initial load pulse on pre-selected card */
@keyframes preset-pulse {
  0% { box-shadow: 0 0 0 3px var(--color-accent-subtle); }
  50% { box-shadow: 0 0 0 8px var(--color-accent-subtle); }
  100% { box-shadow: 0 0 0 3px var(--color-accent-subtle); }
}

.preset-card--initial-pulse {
  animation: preset-pulse 1s ease-in-out 1;
}

@media (prefers-reduced-motion: reduce) {
  .preset-card--initial-pulse {
    animation: none;
  }
}

.preset-card__name {
  font-weight: 600;
  font-size: 0.875rem;
  margin-bottom: var(--space-xs);
}

.preset-card__desc {
  font-size: 0.75rem;
  color: var(--color-text);
  opacity: 0.7;
  margin-bottom: var(--space-sm);
}

.preset-card__preview {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 1px;
}

.preset-card__preview > * {
  border-radius: 2px;
}

.preset-card__day {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.5rem;
  font-weight: 600;
}

.preset-card__day--yours {
  background: var(--color-calendar-yours);
  color: var(--color-calendar-yours-text);
}

.preset-card__day--theirs {
  background: var(--color-calendar-theirs);
  color: var(--color-calendar-theirs-text);
}

.preset-card__day--more {
  background: transparent;
  color: var(--color-text-muted);
  font-size: 0.7rem;
}

/* Editor expand/collapse (mirrors presets__more-wrap) */
.editor__more-wrap {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.3s ease;
  max-width: 36rem;
  margin: 0 auto;
}

.editor__more-wrap--open {
  grid-template-rows: 1fr;
}

.editor__more-inner {
  overflow: hidden;
}

.editor__more-content {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding-top: 16px;
}


.editor__toggle {
  display: block;
  width: 100%;
  max-width: 36rem;
  margin: 12px auto 0;
  padding: var(--space-xs) 0;
  background: none;
  border: none;
  color: var(--color-accent);
  font-size: 0.875rem;
  cursor: pointer;
  font-family: inherit;
  text-align: center;
}

.editor__toggle:hover {
  text-decoration: underline;
}

/* Editor customize group layout (stacked: label above control) */
.editor__customize-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: center;
}

.editor__customize-group-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--space-md);
}

.cycle-display {
  min-width: 3rem;
  min-height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-text);
}

.editor__customize-label {
  font-size: 13px;
  font-weight: 400;
  color: var(--color-text);
  opacity: 0.6;
}

/* Segmented control track - flat style */
.editor__customize-buttons {
  display: inline-flex;
  position: relative;
  background: #d9d4ce;
  border: 1px solid #c9c4be;
  padding: 0;
  gap: 0;
  border-radius: 10px;
}

@media (prefers-color-scheme: dark) {
  .editor__customize-buttons {
    background: #2a2a2e;
    border-color: #3a3a3e;
  }
}
html[data-theme="dark"] .editor__customize-buttons {
  background: #2a2a2e;
  border-color: #3a3a3e;
}
html[data-theme="light"] .editor__customize-buttons {
  background: #d9d4ce;
  border-color: #c9c4be;
}

/* Cycle adjust buttons (+/-) */
.cycle-adjust-btn {
  min-width: 36px;
  min-height: 36px;
  padding: 0;
  font-size: 1.125rem;
  font-weight: 500;
  font-family: inherit;
  background: transparent;
  border: none;
  border-radius: 8px;
  color: var(--color-text);
  opacity: 0.5;
  cursor: pointer;
  transition: opacity 150ms ease, background-color 150ms ease;
}

.cycle-adjust-btn:hover:not(:disabled) {
  opacity: 0.8;
  background: rgba(0, 0, 0, 0.05);
}

.cycle-adjust-btn:disabled {
  opacity: 0.2;
  cursor: not-allowed;
}

.cycle-adjust-btn:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 1px;
}

@media (prefers-color-scheme: dark) {
  .cycle-adjust-btn:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.05);
  }
}
html[data-theme="dark"] .cycle-adjust-btn:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.05);
}
html[data-theme="light"] .cycle-adjust-btn:hover:not(:disabled) {
  background: rgba(0, 0, 0, 0.05);
}

/* Cycle length preset buttons - segmented control style */
.cycle-preset-btn {
  min-width: 2.5rem;
  min-height: 36px;
  padding: 0 var(--space-md);
  font-size: 0.875rem;
  font-weight: 500;
  font-family: inherit;
  background: transparent;
  border: none;
  border-radius: 8px;
  color: var(--color-text);
  opacity: 0.5;
  cursor: pointer;
  transition: opacity 150ms ease, background-color 150ms ease;
}

.cycle-preset-btn:hover:not(.cycle-preset-btn--selected) {
  opacity: 0.8;
  background: rgba(0, 0, 0, 0.05);
}

.cycle-preset-btn--selected {
  background: white;
  opacity: 1;
  font-weight: 600;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.cycle-preset-btn:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 1px;
}

@media (prefers-color-scheme: dark) {
  .cycle-preset-btn--selected {
    background: #4a4a52;
    box-shadow: none;
  }

  .cycle-preset-btn:hover:not(.cycle-preset-btn--selected) {
    background: rgba(255, 255, 255, 0.05);
  }
}
html[data-theme="dark"] .cycle-preset-btn--selected {
  background: #4a4a52;
  box-shadow: none;
}
html[data-theme="dark"] .cycle-preset-btn:hover:not(.cycle-preset-btn--selected) {
  background: rgba(255, 255, 255, 0.05);
}
html[data-theme="light"] .cycle-preset-btn--selected {
  background: white;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
html[data-theme="light"] .cycle-preset-btn:hover:not(.cycle-preset-btn--selected) {
  background: rgba(0, 0, 0, 0.05);
}

/* Empty day placeholder for incomplete weeks */
.pattern-grid__empty {
  background: transparent;
  border-radius: 12px;
  min-width: 44px;
  min-height: 44px;
}

/* Editor section - match pattern-grid width and centering */
.editor {
  margin: 0 auto var(--space-xl);
  max-width: 42rem;
  position: relative;
  z-index: 2;
}

.editor__header {
  margin-bottom: var(--space-sm);
}

.editor__title {
  font-size: 1.25rem;
  font-weight: 600;
  margin-top: var(--space-2xl);
  margin-bottom: var(--space-sm);
  scroll-margin-top: 5.5rem;
}

.editor__desc {
  color: var(--color-text-secondary);
  font-size: 0.875rem;
}

/* Pattern actions below the legend */
.pattern-actions {
  text-align: center;
  margin-top: var(--space-md);
  max-width: 36rem;
  margin-left: auto;
  margin-right: auto;
}

/* Legend above grid */
.pattern-legend--above {
  display: flex;
  justify-content: center;
  gap: var(--space-xl);
  margin-bottom: var(--space-md);
  font-size: 0.9375rem;
  max-width: 36rem;
  margin-left: auto;
  margin-right: auto;
}

.pattern-legend--above .pattern-legend__item {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.pattern-legend__dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  flex-shrink: 0;
}

.pattern-legend__dot--yours {
  background: linear-gradient(135deg, var(--color-calendar-yours) 0%, #d4a832 100%);
  box-shadow:
    -2px -2px 4px var(--color-neu-highlight),
    2px 2px 4px var(--color-neu-shadow);
}

.pattern-legend__dot--theirs {
  background: var(--color-calendar-theirs);
  box-shadow:
    inset 1px 1px 2px var(--color-neu-shadow),
    inset -1px -1px 2px var(--color-neu-highlight);
}

.pattern-legend__count {
  font-weight: 700;
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
}

/* Animated count slide */
@keyframes count-slide-in {
  from {
    transform: translateY(100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.pattern-legend__count--animating {
  animation: count-slide-in 200ms ease-out;
}

/* Interactive pattern grid - neumorphic 3D tiles */
.pattern-grid--interactive {
  gap: 4px;
  background: var(--color-neu-panel);
  padding: 16px;
  border-radius: 16px;
  /* Sunken container effect */
  box-shadow:
    inset 4px 4px 8px var(--color-neu-shadow-inset, var(--color-neu-shadow)),
    inset -4px -4px 8px var(--color-neu-highlight);
}

/* Headers within interactive grid */
.pattern-grid--interactive .pattern-grid__header {
  background: transparent;
  padding: var(--space-xs) var(--space-xs) 4px;
  color: var(--color-text-secondary);
  font-size: 11px;
  letter-spacing: 0.05em;
  opacity: 0.7;
}

.pattern-grid--interactive .pattern-grid__day {
  cursor: pointer;
  border: none;
  border-radius: 12px;
  font-family: inherit;
  min-width: 44px;
  min-height: 44px;
  transition:
    transform 150ms ease,
    box-shadow 150ms ease,
    background-color 150ms ease;
  /* Raised state: top-left highlight, bottom-right shadow (directional light) */
  box-shadow:
    -4px -4px 8px var(--color-neu-highlight),
    4px 4px 8px var(--color-neu-shadow);
}

/* "Yours" tiles are raised (popping out) with gold contact shadow */
.pattern-grid--interactive .pattern-grid__day--yours {
  box-shadow:
    -4px -4px 8px var(--color-neu-highlight),
    4px 4px 8px rgba(180, 130, 50, 0.15);
}

/* "Theirs" tiles are pressed (sunken in) */
.pattern-grid--interactive .pattern-grid__day--theirs {
  box-shadow:
    inset 3px 3px 6px var(--color-neu-shadow),
    inset -3px -3px 6px var(--color-neu-highlight);
}

/* Today indicator ring + label */
.pattern-grid--interactive .pattern-grid__day--today {
  outline: 2px solid var(--color-accent);
  outline-offset: -3px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pattern-grid__today-label {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.pattern-grid__day--yours .pattern-grid__today-label {
  color: var(--color-calendar-yours-text);
}

.pattern-grid__day--theirs .pattern-grid__today-label {
  color: var(--color-calendar-theirs-text);
}

/* Hover: subtle lift + accent ring */
.pattern-grid--interactive .pattern-grid__day:hover {
  transform: scale(1.05);
  z-index: 1;
  box-shadow:
    -6px -6px 12px var(--color-neu-highlight),
    6px 6px 12px var(--color-neu-shadow),
    0 0 0 2px var(--color-accent);
}

.pattern-grid--interactive .pattern-grid__day--theirs:hover {
  box-shadow:
    inset 2px 2px 4px var(--color-neu-shadow),
    inset -2px -2px 4px var(--color-neu-highlight),
    0 0 0 2px var(--color-accent);
}

/* Active: momentary press */
.pattern-grid--interactive .pattern-grid__day:active {
  transform: scale(0.95);
  box-shadow:
    inset 2px 2px 4px var(--color-neu-shadow),
    inset -2px -2px 4px var(--color-neu-highlight);
}

/* No focus ring — neumorphic pressed state provides visual feedback */
.pattern-grid--interactive .pattern-grid__day:focus {
  outline: none;
}

/* Dark mode adjustments */
@media (prefers-color-scheme: dark) {
  .pattern-grid--interactive {
    box-shadow:
      inset 4px 4px 10px var(--color-neu-shadow),
      inset -4px -4px 6px var(--color-neu-highlight);
  }

  .pattern-grid--interactive .pattern-grid__day {
    box-shadow:
      -3px -3px 6px var(--color-neu-highlight),
      3px 3px 6px var(--color-neu-shadow);
  }

  .pattern-grid--interactive .pattern-grid__day--yours {
    box-shadow:
      -3px -3px 6px var(--color-neu-highlight),
      3px 3px 6px var(--color-neu-shadow);
  }

  .pattern-grid--interactive .pattern-grid__day--theirs {
    box-shadow:
      inset 3px 3px 6px var(--color-neu-shadow),
      inset -3px -3px 6px var(--color-neu-highlight);
  }

  .pattern-grid--interactive .pattern-grid__day:hover {
    box-shadow:
      -4px -4px 8px var(--color-neu-highlight),
      4px 4px 8px var(--color-neu-shadow),
      0 0 0 2px var(--color-accent);
  }

  .pattern-grid--interactive .pattern-grid__day--theirs:hover {
    box-shadow:
      inset 2px 2px 4px var(--color-neu-shadow),
      inset -2px -2px 4px var(--color-neu-highlight),
      0 0 0 2px var(--color-accent);
  }

  .pattern-grid--interactive .pattern-grid__day:active {
    box-shadow:
      inset 2px 2px 4px var(--color-neu-shadow),
      inset -2px -2px 4px var(--color-neu-highlight);
  }
}
html[data-theme="dark"] .pattern-grid--interactive {
  box-shadow:
    inset 4px 4px 10px var(--color-neu-shadow),
    inset -4px -4px 6px var(--color-neu-highlight);
}
html[data-theme="dark"] .pattern-grid--interactive .pattern-grid__day {
  box-shadow:
    -3px -3px 6px var(--color-neu-highlight),
    3px 3px 6px var(--color-neu-shadow);
}
html[data-theme="dark"] .pattern-grid--interactive .pattern-grid__day--yours {
  box-shadow:
    -3px -3px 6px var(--color-neu-highlight),
    3px 3px 6px var(--color-neu-shadow);
}
html[data-theme="dark"] .pattern-grid--interactive .pattern-grid__day--theirs {
  box-shadow:
    inset 3px 3px 6px var(--color-neu-shadow),
    inset -3px -3px 6px var(--color-neu-highlight);
}
html[data-theme="dark"] .pattern-grid--interactive .pattern-grid__day:hover {
  box-shadow:
    -4px -4px 8px var(--color-neu-highlight),
    4px 4px 8px var(--color-neu-shadow),
    0 0 0 2px var(--color-accent);
}
html[data-theme="dark"] .pattern-grid--interactive .pattern-grid__day--theirs:hover {
  box-shadow:
    inset 2px 2px 4px var(--color-neu-shadow),
    inset -2px -2px 4px var(--color-neu-highlight),
    0 0 0 2px var(--color-accent);
}
html[data-theme="dark"] .pattern-grid--interactive .pattern-grid__day:active {
  box-shadow:
    inset 2px 2px 4px var(--color-neu-shadow),
    inset -2px -2px 4px var(--color-neu-highlight);
}
html[data-theme="light"] .pattern-grid--interactive {
  box-shadow:
    inset 4px 4px 8px var(--color-neu-shadow-inset, var(--color-neu-shadow)),
    inset -4px -4px 8px var(--color-neu-highlight);
}
html[data-theme="light"] .pattern-grid--interactive .pattern-grid__day {
  box-shadow:
    -4px -4px 8px var(--color-neu-highlight),
    4px 4px 8px var(--color-neu-shadow);
}
html[data-theme="light"] .pattern-grid--interactive .pattern-grid__day--yours {
  box-shadow:
    -4px -4px 8px var(--color-neu-highlight),
    4px 4px 8px rgba(180, 130, 50, 0.15);
}
html[data-theme="light"] .pattern-grid--interactive .pattern-grid__day--theirs {
  box-shadow:
    inset 3px 3px 6px var(--color-neu-shadow),
    inset -3px -3px 6px var(--color-neu-highlight);
}
html[data-theme="light"] .pattern-grid--interactive .pattern-grid__day:hover {
  box-shadow:
    -6px -6px 12px var(--color-neu-highlight),
    6px 6px 12px var(--color-neu-shadow),
    0 0 0 2px var(--color-accent);
}
html[data-theme="light"] .pattern-grid--interactive .pattern-grid__day--theirs:hover {
  box-shadow:
    inset 2px 2px 4px var(--color-neu-shadow),
    inset -2px -2px 4px var(--color-neu-highlight),
    0 0 0 2px var(--color-accent);
}
html[data-theme="light"] .pattern-grid--interactive .pattern-grid__day:active {
  box-shadow:
    inset 2px 2px 4px var(--color-neu-shadow),
    inset -2px -2px 4px var(--color-neu-highlight);
}

/* Swap all days button container */
.pattern-swap {
  display: flex;
  justify-content: center;
  gap: var(--space-sm);
  margin: 24px auto 0;
  max-width: 36rem;
}

/* Swap all days button - flat filled style */
.pattern-swap__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-sm) var(--space-lg);
  font-size: 0.875rem;
  font-weight: 600;
  font-family: inherit;
  color: #2a2a2e;
  background: #d8d8dc;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
  transition: background-color 150ms ease, box-shadow 150ms ease;
}

.pattern-swap__btn:hover {
  background: #cfcfd3;
}

.pattern-swap__btn:active {
  background: #c6c6ca;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.pattern-swap__btn:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

@media (prefers-color-scheme: dark) {
  .pattern-swap__btn {
    background: #3a3a40;
    color: #e0e0e4;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
  }

  .pattern-swap__btn:hover {
    background: #424248;
  }

  .pattern-swap__btn:active {
    background: #333338;
  }
}
html[data-theme="dark"] .pattern-swap__btn {
  background: #3a3a40;
  color: #e0e0e4;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}
html[data-theme="dark"] .pattern-swap__btn:hover {
  background: #424248;
}
html[data-theme="dark"] .pattern-swap__btn:active {
  background: #333338;
}
html[data-theme="light"] .pattern-swap__btn {
  background: #d8d8dc;
  color: #2a2a2e;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}
html[data-theme="light"] .pattern-swap__btn:hover {
  background: #cfcfd3;
}
html[data-theme="light"] .pattern-swap__btn:active {
  background: #c6c6ca;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

/* Reset button - red accent styling */
.pattern-swap__btn--reset {
  background: transparent;
  border: 1px solid var(--color-border);
  color: #dc2626;
  box-shadow: none;
}

.pattern-swap__btn--reset:hover:not(:disabled) {
  background: rgba(220, 38, 38, 0.08);
  border-color: #dc2626;
}

.pattern-swap__btn--reset:active:not(:disabled) {
  background: rgba(220, 38, 38, 0.12);
}

.pattern-swap__btn--reset:disabled {
  color: var(--color-text-secondary);
  opacity: 0.4;
  cursor: not-allowed;
}

@media (prefers-color-scheme: dark) {
  .pattern-swap__btn--reset {
    background: transparent;
    color: #f87171;
    box-shadow: none;
  }

  .pattern-swap__btn--reset:hover:not(:disabled) {
    background: rgba(248, 113, 113, 0.1);
    border-color: #f87171;
  }

  .pattern-swap__btn--reset:active:not(:disabled) {
    background: rgba(248, 113, 113, 0.15);
  }

  .pattern-swap__btn--reset:disabled {
    color: var(--color-text-secondary);
  }
}
html[data-theme="dark"] .pattern-swap__btn--reset {
  background: transparent;
  color: #f87171;
  box-shadow: none;
}
html[data-theme="dark"] .pattern-swap__btn--reset:hover:not(:disabled) {
  background: rgba(248, 113, 113, 0.1);
  border-color: #f87171;
}
html[data-theme="dark"] .pattern-swap__btn--reset:active:not(:disabled) {
  background: rgba(248, 113, 113, 0.15);
}
html[data-theme="dark"] .pattern-swap__btn--reset:disabled {
  color: var(--color-text-secondary);
}
html[data-theme="light"] .pattern-swap__btn--reset {
  background: transparent;
  color: #dc2626;
  box-shadow: none;
}
html[data-theme="light"] .pattern-swap__btn--reset:hover:not(:disabled) {
  background: rgba(220, 38, 38, 0.08);
  border-color: #dc2626;
}
html[data-theme="light"] .pattern-swap__btn--reset:active:not(:disabled) {
  background: rgba(220, 38, 38, 0.12);
}

/* Week labels - subtle dividers within neumorphic container */
.pattern-grid__week-label {
  grid-column: 1 / -1;
  padding: var(--space-xs) var(--space-sm);
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--color-text-secondary);
  background: transparent;
  text-align: left;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  opacity: 0.7;
  margin-top: 2px;
  margin-bottom: 12px;
}

.pattern-grid__week-label:last-of-type {
  margin-bottom: 0;
}

/* Preview section (shown via link, hidden by default) */
.preview {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.3s ease;
  margin: var(--space-xl) auto;
}

.preview--open {
  grid-template-rows: 1fr;
}

.preview[hidden] {
  display: none;
}

.preview__content {
  overflow: hidden;
}

.preview__month-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-md);
}

.preview__month-name {
  font-weight: 600;
}

.preview__nav {
  display: flex;
  gap: var(--space-sm);
}

.preview__nav-btn {
  padding: var(--space-sm);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  color: var(--color-text);
  font-size: 0.875rem;
}

.preview__nav-btn:hover {
  background: var(--color-surface-raised);
}

.month-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}

.month-grid__header {
  background: var(--color-surface-raised);
  padding: var(--space-sm);
  font-size: 0.75rem;
  font-weight: 600;
  text-align: center;
  color: var(--color-text-secondary);
  border-radius: 4px;
}

.month-grid__day {
  aspect-ratio: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 0.875rem;
  background: var(--color-surface);
  border-radius: 4px;
}

.month-grid__day--empty {
  background: var(--color-surface-raised);
}

.month-grid__day--yours {
  background: var(--color-calendar-yours);
  color: var(--color-calendar-yours-text);
}

.month-grid__day--theirs {
  background: var(--color-calendar-theirs);
  color: var(--color-calendar-theirs-text);
}

.month-grid__date {
  font-weight: 500;
}

/* Today indicator: ring around the cell */
.month-grid__day--today {
  outline: 3px solid var(--color-accent);
  outline-offset: -3px;
}

/* Today label text below date number */
.month-grid__today-label {
  font-size: 8px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  line-height: 1;
  margin-top: 1px;
}

.month-grid__day--yours .month-grid__today-label {
  color: var(--color-calendar-yours-text);
}

.month-grid__day--theirs .month-grid__today-label {
  color: var(--color-calendar-theirs-text);
}

/* CTA section */
.cta-section {
  margin: 0 auto;
  max-width: 42rem;
}

.cta-section__title {
  font-size: 1.25rem;
  font-weight: 600;
  margin-top: var(--space-2xl);
  margin-bottom: var(--space-sm);
}

/* Content wrapper aligned with 36rem grid */
.cta-section__content {
  max-width: 36rem;
  margin: 0 auto;
  text-align: center;
}

.cta-section__desc {
  color: var(--color-text-secondary);
  font-size: 0.875rem;
  margin-bottom: var(--space-lg);
}

.cta-section .btn {
  white-space: nowrap;
}

.cta-section__preview-link {
  display: block;
  margin-top: 24px;
  font-size: 0.875rem;
  color: var(--color-accent);
  text-align: center;
}

.cta-section__preview-link:hover {
  text-decoration: underline;
}

/* No JS fallback */
.no-js-message {
  display: none;
  padding: var(--space-xl);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  text-align: center;
}

.no-js .no-js-message {
  display: block;
}

.no-js .presets,
.no-js .editor,
.no-js .preview,
.no-js .cta-section {
  display: none;
}

/* Mobile: ensure pattern grid fits without clipping */
@media (max-width: 480px) {
  .pattern-grid__header {
    padding: var(--space-sm) var(--space-xs);
    font-size: 0.625rem;
  }

  .pattern-grid__day {
    font-size: 0.75rem;
  }

  .pattern-grid__label {
    font-size: 0.5rem;
  }

  .pattern-grid__week-label {
    padding: var(--space-xs) var(--space-sm);
    font-size: 0.625rem;
  }
}

/* Narrow mobile: ensure grid fits without overflow.
   Math: 7×44px tiles + 6×4px gaps + 2×16px grid-padding + 2×24px container-padding = 412px.
   Below 420px (412 + rounding margin), shrink tiles and grid padding. */
@media (max-width: 420px) {
  .pattern-grid {
    max-width: 100%;
  }

  .pattern-grid--interactive {
    padding: 8px;
  }

  .pattern-grid--interactive .pattern-grid__day {
    min-width: 36px;
    min-height: 36px;
  }

  .pattern-grid__empty {
    min-width: 36px;
    min-height: 36px;
  }
}

/* ==========================================
   Sticky CTA
   ========================================== */
.sticky-cta {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 150;
  background: var(--color-surface);
  border-top: 1px solid var(--color-border);
  box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.1);
  padding: var(--space-md) var(--space-lg);
  transform: translateY(100%);
  opacity: 0;
  visibility: hidden;
  transition: transform 0.3s ease, opacity 0.3s ease, visibility 0.3s ease;
}

.sticky-cta--visible {
  transform: translateY(0);
  opacity: 1;
  visibility: visible;
}

.sticky-cta__content {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-md);
  max-width: var(--max-width);
  margin: 0 auto;
}

.sticky-cta__text {
  font-weight: 500;
  color: var(--color-text);
}

.sticky-cta__btn {
  white-space: nowrap;
  padding: var(--space-sm) var(--space-lg);
}

/* Mobile: full-width bar, stacked layout */
@media (max-width: 480px) {
  .sticky-cta {
    padding: var(--space-sm) var(--space-md);
  }

  .sticky-cta__content {
    flex-direction: column;
    gap: var(--space-sm);
  }

  .sticky-cta__text {
    font-size: 0.875rem;
  }

  .sticky-cta__btn {
    width: 100%;
  }
}

/* Desktop: floating card in bottom-right */
@media (min-width: 769px) {
  .sticky-cta {
    left: auto;
    right: var(--space-lg);
    bottom: var(--space-lg);
    width: auto;
    max-width: 20rem;
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow-lg);
  }

  .sticky-cta__content {
    flex-direction: column;
    gap: var(--space-sm);
    text-align: center;
  }
}

/* Dark mode shadow adjustment */
@media (prefers-color-scheme: dark) {
  .sticky-cta {
    box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.3);
  }
  .preset-card--selected .preset-card__badge {
    background: #2563eb;
  }
}
html[data-theme="dark"] .sticky-cta {
  box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.3);
}
html[data-theme="dark"] .preset-card--selected .preset-card__badge {
  background: #2563eb;
}
html[data-theme="light"] .sticky-cta {
  box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.1);
}

@media (prefers-color-scheme: dark) and (min-width: 769px) {
  .sticky-cta {
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4);
  }
}
@media (min-width: 769px) {
  html[data-theme="dark"] .sticky-cta {
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4);
  }
  html[data-theme="light"] .sticky-cta {
    box-shadow: var(--shadow-lg);
  }
}

/* Wrapper for smooth height animation - grid stays at natural size */
.pattern-grid-wrapper {
  overflow: hidden;
}

.pattern-grid-wrapper--animating {
  transition: height 250ms ease-out;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .sticky-cta {
    transition: none;
  }

  .pattern-grid--interactive .pattern-grid__day {
    transition: none;
  }

  .pattern-legend__count--animating {
    animation: none;
  }

  .cycle-preset-btn,
  .cycle-adjust-btn {
    transition: none;
  }

  .pattern-grid-wrapper--animating {
    transition: none;
  }
}