/* Shared editorial product UI: the landing/dashboard paper system for tools and plans. */
:root {
  --product-paper: #f7f5f1;
  --product-white: #fff;
  --product-ink: #121417;
  --product-muted: #626970;
  --product-rule: #d9d6cf;
  --product-blue: #0866bd;
  --product-blue-soft: #eaf3fb;
  --product-radius: 4px;
}

html,
body {
  background: var(--product-paper) !important;
  color: var(--product-ink) !important;
  color-scheme: light !important;
}

body.fp-v45-deep-ocean,
body.builder-page,
body.daily-nutrition-route {
  background: var(--product-paper) !important;
  background-image: linear-gradient(rgba(18,20,23,.018) 1px, transparent 1px) !important;
  background-size: 100% 44px !important;
}

.ocean-depth-layer,
.ocean-depth-glow,
.v45-noise,
body::before,
body::after { display: none !important; }

.builder-page,
.plans-page,
.daily-nutrition-shell {
  width: min(1400px, calc(100% - 48px)) !important;
  margin: 0 auto !important;
  padding: 28px 0 72px !important;
}

.builder-navigation,
.page-nav,
.daily-hero {
  position: sticky !important;
  top: 0 !important;
  z-index: 30 !important;
  min-height: 68px !important;
  padding: 0 20px !important;
  border: 1px solid var(--product-rule) !important;
  border-radius: 0 !important;
  background: rgba(247,245,241,.96) !important;
  box-shadow: none !important;
  backdrop-filter: blur(14px) !important;
}

.builder-navigation a,
.page-nav a,
.daily-context-links a,
.builder-links a {
  color: var(--product-ink) !important;
  text-decoration: none !important;
  text-shadow: none !important;
}

.builder-navigation a:hover,
.page-nav a:hover,
.daily-context-links a:hover { color: var(--product-blue) !important; }

.builder-navigation .primary-link,
.page-nav .primary-link,
.builder-links .primary-link,
.builder-navigation .nav-cta {
  border: 1px solid var(--product-blue) !important;
  border-radius: var(--product-radius) !important;
  background: var(--product-blue) !important;
  color: #fff !important;
  box-shadow: none !important;
}

.builder-card,
.plans-page,
.daily-surface,
.daily-progress-section,
.entries-panel,
.day-history-card,
.calendar-panel,
.compact-tool-card {
  border: 1px solid var(--product-rule) !important;
  border-radius: var(--product-radius) !important;
  background: var(--product-white) !important;
  color: var(--product-ink) !important;
  box-shadow: none !important;
}

.builder-card {
  overflow: hidden !important;
  padding: clamp(24px, 4vw, 56px) !important;
}

.builder-header,
.plans-header,
.daily-section-heading,
.section-heading-row {
  color: var(--product-ink) !important;
  text-shadow: none !important;
}

.builder-badge,
.plans-badge,
.daily-kicker,
.metric-eyebrow,
.plans-status,
.builder-status {
  color: var(--product-blue) !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
  text-shadow: none !important;
}

.builder-header h1,
.plans-header h1,
.daily-hero h1,
.wizard-step-heading h2,
.daily-section-heading h2,
.section-heading-row h2,
.plans-header h2 {
  color: var(--product-ink) !important;
  font-family: Georgia, "Times New Roman", serif !important;
  letter-spacing: -.045em !important;
  text-shadow: none !important;
}

.builder-description,
.plans-header p,
.section-helper,
.daily-hero p,
.daily-page-status,
.save-guide,
.metric-note,
.empty-state {
  color: var(--product-muted) !important;
  text-shadow: none !important;
}

.wizard-progress,
.wizard-progress-track,
.wizard-progress-topline {
  border-color: var(--product-rule) !important;
  background: transparent !important;
  color: var(--product-muted) !important;
}

.wizard-progress-fill { background: var(--product-blue) !important; }

/* The food clarification uses the paper surface, not the legacy navy palette. */
.daily-nutrition-route .clarification-panel :is(h3, p, label) {
  color: #121417 !important;
  text-shadow: none !important;
}
.daily-nutrition-route .clarification-choices button {
  color: #fff !important;
  background: #0866bd !important;
  border-color: #07559f !important;
  white-space: normal;
  padding-block: 10px;
}
.daily-nutrition-route .clarification-choices button:disabled { opacity: 0.65; cursor: wait; }
.daily-nutrition-route .clarification-choices button:focus-visible { outline: 3px solid #121417; outline-offset: 3px; }
.daily-nutrition-route .composer-message.error { color: #b42318 !important; }

.wizard-step,
.wizard-review,
.form-group,
.limitations-field,
.meal-practicality-fieldset,
.condition-options,
.target-setup,
.food-examples,
.clarification-panel {
  border-color: var(--product-rule) !important;
  background: var(--product-white) !important;
  color: var(--product-ink) !important;
  box-shadow: none !important;
}

.visual-choice-card,
.choice-card,
.equipment-card,
.meal-practicality-option,
.condition-option,
.plan-card,
.saved-plan-card,
.plans-grid > article {
  border: 1px solid var(--product-rule) !important;
  border-radius: var(--product-radius) !important;
  background: #fbfaf7 !important;
  color: var(--product-ink) !important;
  box-shadow: none !important;
  text-shadow: none !important;
}

.visual-choice-card:hover,
.visual-choice-card:focus-within,
.choice-card:hover,
.equipment-card:hover,
.meal-practicality-option:hover,
.condition-option:hover,
.plan-card:hover,
.saved-plan-card:hover {
  border-color: var(--product-blue) !important;
  background: var(--product-blue-soft) !important;
  transform: none !important;
}

.visual-choice-card.is-selected,
.visual-choice-card:has(input:checked),
.choice-card.is-selected,
.equipment-card.is-selected,
.meal-practicality-option:has(input:checked),
.condition-option:has(input:checked) {
  border-color: var(--product-blue) !important;
  background: var(--product-blue-soft) !important;
  box-shadow: inset 0 0 0 1px var(--product-blue) !important;
}

.visual-choice-content,
.visual-choice-content strong,
.visual-choice-content small,
.choice-card strong,
.choice-card small,
.equipment-card strong,
.equipment-card small,
.meal-practicality-option strong,
.meal-practicality-option small,
.plan-card h3,
.saved-plan-card h3 {
  color: var(--product-ink) !important;
  text-shadow: none !important;
}

.visual-choice-content small,
.choice-card small,
.equipment-card small,
.meal-practicality-option small,
.plan-card p,
.saved-plan-card p { color: var(--product-muted) !important; }

input:not([type="radio"]):not([type="checkbox"]),
select,
textarea,
.food-input,
.date-picker-label input {
  border: 1px solid #bfc5ca !important;
  border-radius: var(--product-radius) !important;
  background: #fff !important;
  color: var(--product-ink) !important;
  box-shadow: none !important;
}

input:focus,
select:focus,
textarea:focus,
.food-input:focus {
  border-color: var(--product-blue) !important;
  outline: 3px solid rgba(8,102,189,.15) !important;
}

.wizard-button,
.primary-action,
.save-now-button,
.finish-button,
.target-setup-primary,
.shopping-modal__primary,
.plans-header .primary-link {
  border: 1px solid var(--product-blue) !important;
  border-radius: var(--product-radius) !important;
  background: var(--product-blue) !important;
  color: #fff !important;
  box-shadow: none !important;
  text-shadow: none !important;
}

.wizard-button--back,
.secondary-button,
.target-setup-secondary,
.shopping-modal__secondary,
.secondary-action {
  border: 1px solid #aeb8c1 !important;
  border-radius: var(--product-radius) !important;
  background: #fff !important;
  color: var(--product-ink) !important;
  box-shadow: none !important;
}

.plans-counter,
.early-access-note,
.plans-status { border-color: var(--product-rule) !important; background: var(--product-blue-soft) !important; color: var(--product-ink) !important; }
.plans-counter strong { color: var(--product-blue) !important; }

.plans-grid,
.daily-overview-grid,
.daily-content-grid { gap: 18px !important; }
.plans-grid { background: transparent !important; }

.food-table,
.food-table th,
.food-table td,
.macro-card,
.daily-goals-card,
.nearby-day,
.calendar-grid,
.calendar-weekdays { border-color: var(--product-rule) !important; }
.food-table th,
.nearby-day,
.calendar-weekdays { background: #f0eee9 !important; color: var(--product-muted) !important; }
.food-table td,
.macro-card,
.daily-goals-card { background: #fff !important; color: var(--product-ink) !important; }
.macro-ring { background: conic-gradient(var(--product-blue) var(--macro-progress, 0%), #e2e0db 0) !important; }
.protein-progress span { background: var(--product-blue) !important; }

/* The Daily Nutrition components were originally authored for the dark ocean
   shell. The editorial theme changes their surfaces to white, so override the
   remaining light-on-dark text tokens as a complete light-surface set. */
body.daily-nutrition-route .daily-section-heading p,
body.daily-nutrition-route .macro-breakdown dt,
body.daily-nutrition-route .goal-stat p,
body.daily-nutrition-route .goal-stat-value .nutrition-unit,
body.daily-nutrition-route .goal-stat-remaining span,
body.daily-nutrition-route .day-history-card h2,
body.daily-nutrition-route .nearby-day small,
body.daily-nutrition-route .calendar-panel summary small,
body.daily-nutrition-route .saved-combinations-card summary small,
body.daily-nutrition-route .calendar-weekdays {
  color: var(--product-muted) !important;
  text-shadow: none !important;
}

body.daily-nutrition-route .macro-heading h2,
body.daily-nutrition-route .macro-breakdown dd,
body.daily-nutrition-route .goal-stat-value,
body.daily-nutrition-route #calorieConsumed,
body.daily-nutrition-route #proteinConsumed,
body.daily-nutrition-route .food-name strong,
body.daily-nutrition-route .food-name small,
body.daily-nutrition-route .food-name .estimate-note,
body.daily-nutrition-route .goal-stat .nutrition-number,
body.daily-nutrition-route .goal-stat p b,
body.daily-nutrition-route .day-history-card h2,
body.daily-nutrition-route .nearby-day b,
body.daily-nutrition-route .calendar-panel summary b,
body.daily-nutrition-route .saved-combinations-card summary b,
body.daily-nutrition-route .calendar-controls strong,
body.daily-nutrition-route .calendar-day {
  color: var(--product-ink) !important;
  text-shadow: none !important;
}

body.daily-nutrition-route .goal-stat-remaining strong,
body.daily-nutrition-route .nearby-day > strong,
body.daily-nutrition-route .entry-count {
  color: var(--product-blue) !important;
  text-shadow: none !important;
}

body.daily-nutrition-route .nearby-day {
  background: #f0eee9 !important;
}

body.daily-nutrition-route .nearby-day.is-selected {
  border-color: var(--product-blue) !important;
  background: var(--product-blue-soft) !important;
}

body.daily-nutrition-route .calendar-nav {
  border-color: var(--product-rule) !important;
  background: #f0eee9 !important;
}

body.daily-nutrition-route .calendar-nav img,
body.daily-nutrition-route .details-icon {
  filter: none !important;
}

.program-result,
.nutrition-result,
.workout-result,
.shopping-modal__panel {
  border: 1px solid var(--product-rule) !important;
  border-radius: var(--product-radius) !important;
  background: #fff !important;
  color: var(--product-ink) !important;
  box-shadow: 0 18px 44px rgba(18,20,23,.1) !important;
}

/* Product routes that were still using the legacy ocean shell. Keep the
   same paper/ink system as the dashboard, including social and progress. */
.progress-page,
.social-shell {
  color: var(--product-ink) !important;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif !important;
  text-shadow: none !important;
}

.progress-page { width: min(1180px, calc(100% - 48px)) !important; margin: 0 auto !important; padding: 28px 0 72px !important; }
.progress-page .page-nav { background: rgba(247,245,241,.96) !important; border-color: var(--product-rule) !important; }
.progress-page .page-header h1,
.progress-page .page-header p,
.progress-page .entry-card,
.progress-page .stat-card,
.progress-page .chart-card,
.progress-page .history-card,
.progress-page label,
.progress-page .status { color: var(--product-ink) !important; text-shadow: none !important; }
.progress-page .page-header h1 { font-family: Georgia, "Times New Roman", serif !important; letter-spacing: -.045em !important; }
.progress-page .page-header p,
.progress-page .status,
.progress-page .stat-card span,
.progress-page .chart-card p { color: var(--product-muted) !important; }
.progress-page .entry-card,
.progress-page .stat-card,
.progress-page .chart-card,
.progress-page .history-card { border: 1px solid var(--product-rule) !important; border-radius: var(--product-radius) !important; background: #fff !important; box-shadow: none !important; }
.progress-page input { border: 1px solid #bfc5ca !important; border-radius: var(--product-radius) !important; background: #fff !important; color: var(--product-ink) !important; }
.progress-page button { border-radius: var(--product-radius) !important; background: var(--product-blue) !important; color: #fff !important; box-shadow: none !important; }

.social-abyss { display: none !important; }
.social-shell { width: min(1500px, calc(100% - 28px)) !important; background: transparent !important; }
.social-topbar,
.social-app,
.conversation-rail,
.social-context-panel,
.chat-header,
.social-section,
.user-search,
.username-field,
.social-dialog,
.composer { border-color: var(--product-rule) !important; background: #fff !important; color: var(--product-ink) !important; box-shadow: none !important; }
.social-topbar { border-radius: var(--product-radius) !important; }
.social-app { border-radius: var(--product-radius) !important; overflow: hidden !important; }
.conversation-rail { background: #f0eee9 !important; }
.social-brand,
.social-tab,
.back-link,
.icon-button,
.conversation-card,
.chat-person h1,
.social-section h2,
.social-section h3,
.chat-empty h1,
.social-dialog h2,
.social-dialog label,
.message-bubble,
.composer textarea { color: var(--product-ink) !important; text-shadow: none !important; }
.social-brand { background: none !important; }
.social-tab.is-active { color: #fff !important; background: var(--product-blue) !important; }
.social-tab:hover,
.conversation-card:hover,
.conversation-card.is-active { color: var(--product-ink) !important; background: var(--product-blue-soft) !important; border-color: var(--product-blue) !important; transform: none !important; }
.social-top-actions .back-link,
.icon-button,
.secondary-button { border-color: #aeb8c1 !important; border-radius: var(--product-radius) !important; background: #fff !important; color: var(--product-ink) !important; }
.messages-view { background: #fff !important; }
.chat-header { background: #fff !important; }
.message-bubble { border-color: var(--product-rule) !important; border-radius: 4px 14px 14px 14px !important; background: var(--product-blue-soft) !important; }
.composer { background: #f7f5f1 !important; }
.composer textarea,
.user-search input,
.username-field input { background: #fff !important; color: var(--product-ink) !important; }
.social-shell :where(p, small, .conversation-copy span, .conversation-meta, .section-status, .typing-indicator, .chat-empty p, .social-dialog p) { color: var(--product-muted) !important; text-shadow: none !important; }

html[dir="rtl"] .progress-page,
html[dir="rtl"] .social-shell { direction: rtl !important; }
html[dir="rtl"] .progress-page :where(h1, h2, h3, p, label, button, a, th, td, input, textarea, select, summary),
html[dir="rtl"] .social-shell :where(h1, h2, h3, p, label, button, a, th, td, input, textarea, select, summary) { direction: rtl !important; text-align: start; }
html[dir="rtl"] .social-brand { direction: ltr !important; text-align: left !important; }

/* Legacy manual-builder and saved-plan markup uses its own class vocabulary. */
body:has(.manual-page),
body:has(.plans-page),
body:has(.builder-page) {
  background: var(--product-paper) !important;
  background-image: linear-gradient(rgba(18,20,23,.018) 1px, transparent 1px) !important;
  color: var(--product-ink) !important;
  color-scheme: light !important;
}

/* High-specificity guard: legacy route selectors used to paint the shell
   navy even after the new card layer was loaded. */
html body:has(.builder-page),
html body:has(.plans-page),
html body:has(.manual-page),
html body:has(.manual-nutrition-page) {
  background-color: var(--product-paper) !important;
  background-image: linear-gradient(rgba(18,20,23,.018) 1px, transparent 1px) !important;
  color: var(--product-ink) !important;
}
.builder-page,
.builder-page .builder-card,
.builder-page .builder-wizard,
.builder-page .wizard-step,
.plans-page,
.plans-page .plans-grid,
.manual-page,
.manual-nutrition-page,
.manual-nutrition-page .builder-workspace {
  background-color: var(--product-paper) !important;
  background-image: none !important;
  color: var(--product-ink) !important;
}
.builder-page .builder-card,
.builder-page .builder-wizard,
.plans-page .plans-grid,
.manual-nutrition-page .builder-step,
.manual-nutrition-page .daily-menu-panel { background-color: #fff !important; }
.builder-page .builder-header h1,
.builder-page .builder-header p,
.builder-page .wizard-step-heading h2,
.builder-page .wizard-step-heading p,
.builder-page .wizard-progress-topline,
.builder-page .wizard-progress-topline strong,
.builder-page .wizard-progress-topline span,
.builder-page label,
.builder-page legend,
.builder-page small { color: var(--product-ink) !important; text-shadow: none !important; }
.builder-page .builder-header p,
.builder-page .wizard-step-heading p,
.builder-page small { color: var(--product-muted) !important; }

.manual-page {
  width: min(1180px, calc(100% - 48px)) !important;
  margin: 0 auto !important;
  padding: 28px 0 72px !important;
  color: var(--product-ink) !important;
}
.manual-page > nav,
.manual-page > header,
.manual-page > .panel,
.manual-page > .day-card,
.manual-page > .builder-actions,
.manual-page .exercise-row {
  color: var(--product-ink) !important;
  text-shadow: none !important;
}
.manual-page > nav { padding: 14px 20px !important; border: 1px solid var(--product-rule) !important; background: rgba(247,245,241,.96) !important; }
.manual-page nav a { color: var(--product-ink) !important; }
.manual-page h1 { color: var(--product-ink) !important; font-family: Georgia, "Times New Roman", serif !important; letter-spacing: -.045em !important; }
.manual-page header p,
.manual-page #status,
.manual-page label,
.manual-page .exercise-row label { color: var(--product-muted) !important; }
.manual-page .badge { color: var(--product-blue) !important; border-color: var(--product-blue) !important; background: var(--product-blue-soft) !important; }
.manual-page .panel,
.manual-page .day-card,
.manual-page .exercise-row { border: 1px solid var(--product-rule) !important; border-radius: var(--product-radius) !important; background: #fff !important; box-shadow: none !important; }
.manual-page input,
.manual-page select { border: 1px solid #bfc5ca !important; border-radius: var(--product-radius) !important; background: #fff !important; color: var(--product-ink) !important; }
.manual-page button { border-radius: var(--product-radius) !important; box-shadow: none !important; }
.manual-page .primary { border: 1px solid var(--product-blue) !important; color: #fff !important; background: var(--product-blue) !important; }
.manual-page .secondary,
.manual-page .duplicate-day,
.manual-page .remove-day,
.manual-page .remove-exercise { border-color: #aeb8c1 !important; color: var(--product-ink) !important; background: #fff !important; }
.manual-page .add-exercise { border-color: var(--product-blue) !important; color: var(--product-blue) !important; background: var(--product-blue-soft) !important; }
.exercise-suggest { border-color: var(--product-rule) !important; background: #fff !important; box-shadow: 0 18px 44px rgba(18,20,23,.12) !important; }
.exercise-suggest li { color: var(--product-ink) !important; }
.exercise-suggest li.is-active,
.exercise-suggest li:hover { background: var(--product-blue-soft) !important; }

.plans-page .plan-card,
.plans-page .plan-card.active,
.plans-page .plan-editor-form,
.plans-page .plans-grid > article { border-color: var(--product-rule) !important; border-radius: var(--product-radius) !important; background: #fff !important; color: var(--product-ink) !important; box-shadow: none !important; }
.plans-page .plan-card h2,
.plans-page .plan-card h3,
.plans-page .plan-card p,
.plans-page .plan-card strong,
.plans-page .plan-card span { color: var(--product-ink) !important; text-shadow: none !important; }
.plans-page .plan-card p,
.plans-page .plan-meta span { color: var(--product-muted) !important; }
.plans-page .plan-meta span { background: #f0eee9 !important; }
.plans-page .active-badge { color: #18885d !important; }
.plans-page .activate-button,
.plans-page .start-workout-link { border-color: var(--product-blue) !important; border-radius: var(--product-radius) !important; background: var(--product-blue) !important; color: #fff !important; }
.plans-page .rename-button,
.plans-page .edit-button,
.plans-page .delete-button { border-color: #aeb8c1 !important; border-radius: var(--product-radius) !important; background: #fff !important; color: var(--product-ink) !important; }
.plans-page .delete-button { color: #b4233c !important; }

.manual-nutrition-page {
  width: min(1240px, calc(100% - 48px)) !important;
  margin: 0 auto !important;
  padding: 28px 0 72px !important;
  color: var(--product-ink) !important;
}
.manual-nutrition-page .manual-nav { padding: 14px 20px !important; border: 1px solid var(--product-rule) !important; background: rgba(247,245,241,.96) !important; }
.manual-nutrition-page .manual-nav a,
.manual-nutrition-page .manual-hero h1,
.manual-nutrition-page .manual-hero p,
.manual-nutrition-page .step-heading h2,
.manual-nutrition-page .step-heading p,
.manual-nutrition-page label { color: var(--product-ink) !important; text-shadow: none !important; }
.manual-nutrition-page .manual-hero h1 { font-family: Georgia, "Times New Roman", serif !important; letter-spacing: -.045em !important; }
.manual-nutrition-page .manual-status,
.manual-nutrition-page .step-heading p { color: var(--product-muted) !important; }
.manual-nutrition-page .panel,
.manual-nutrition-page .meal-card,
.manual-nutrition-page .daily-menu-panel,
.manual-nutrition-page .target-summary,
.manual-nutrition-page .running-totals { border: 1px solid var(--product-rule) !important; border-radius: var(--product-radius) !important; background: #fff !important; color: var(--product-ink) !important; box-shadow: none !important; }
.manual-nutrition-page input,
.manual-nutrition-page select,
.manual-nutrition-page textarea { border: 1px solid #bfc5ca !important; border-radius: var(--product-radius) !important; background: #fff !important; color: var(--product-ink) !important; }
.manual-nutrition-page .primary-action { border: 1px solid var(--product-blue) !important; border-radius: var(--product-radius) !important; background: var(--product-blue) !important; color: #fff !important; box-shadow: none !important; }
.manual-nutrition-page .secondary-action,
.manual-nutrition-page .text-action,
.manual-nutrition-page .drawer-close { border-color: #aeb8c1 !important; border-radius: var(--product-radius) !important; background: #fff !important; color: var(--product-ink) !important; }
.manual-nutrition-page .meal-card:hover,
.manual-nutrition-page .category-chip.is-active { border-color: var(--product-blue) !important; background: var(--product-blue-soft) !important; }

html[dir="rtl"] .manual-page,
html[dir="rtl"] .plans-page { direction: rtl !important; }
html[dir="rtl"] .manual-page :where(h1, h2, h3, p, label, input, select, button, a, span),
html[dir="rtl"] .plans-page :where(h1, h2, h3, p, label, input, select, button, a, span) { text-align: start; }

@media (max-width: 760px) {
  .builder-page,
  .plans-page,
  .daily-nutrition-shell { width: min(100% - 24px, 680px) !important; padding-top: 12px !important; }
  .builder-navigation,
  .page-nav,
  .daily-hero { position: relative !important; padding: 14px !important; }
  .builder-card { padding: 20px 14px !important; }
  .plans-grid,
  .daily-overview-grid,
  .daily-content-grid { grid-template-columns: 1fr !important; }
  .visual-choice-grid,
  .wizard-fields-grid,
  .plans-grid { gap: 10px !important; }
  .wizard-actions { position: sticky !important; bottom: 8px !important; z-index: 10 !important; padding: 8px !important; border: 1px solid var(--product-rule) !important; background: rgba(247,245,241,.96) !important; }
}