/* Numi semantic hierarchy layer.
   Product screens use roles from the shared scale instead of local font sizes. */

:root {
  --focus-ring: 0 0 0 3px rgba(47, 107, 79, .22);
}

/* Unified mode rules and calendar range controls */
.mode-tabs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cooking-text-fields { margin-bottom: 18px; }
.cooking-text-fields textarea { min-height: 108px; resize: vertical; }
.range-form-actions { display: flex; align-items: stretch; gap: 8px; }
.range-form-actions .button { min-height: 48px; }

@media (max-width: 1050px) {
  .range-form-actions { grid-column: 1 / -1; }
}

@media (max-width: 640px) {
  .mode-tabs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .range-form-actions { flex-direction: column; }
  .range-form-actions .button { width: 100%; }
}

/* Mode editor: one semantic card per task, shared by all three steps. */
.mode-editor-panel {
  min-height: 560px;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
}

.mode-task-stack {
  display: grid;
  gap: var(--space-6);
}

.mode-task-card,
.mode-task-card.mode-rule-section,
.mode-task-card.mode-accounting-summary {
  min-width: 0;
  margin: 0;
  padding: var(--space-6);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: none;
}

.mode-task-card > header {
  margin: 0 0 var(--space-6);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
}

.mode-task-card > header h3,
.mode-task-card > header h4,
.mode-task-card > header p {
  margin: 0;
}

.mode-task-card > header h3 {
  font-size: var(--font-subsection-title-size);
  font-weight: var(--weight-medium);
  line-height: var(--font-subsection-title-line);
}

.mode-task-card > header p {
  max-width: 720px;
  margin-top: var(--space-1);
  color: var(--muted);
  font-size: var(--font-supporting-size);
  line-height: var(--font-supporting-line);
}

.product-rules-card .rule-field,
.required-product {
  background: var(--surface-soft);
  border: 0;
  box-shadow: none;
}

.product-rules-card .rule-typo-suggestion {
  margin-bottom: var(--space-4);
}

.daily-target-card > .field {
  max-width: 620px;
}

.macro-inputs {
  margin-top: var(--space-4);
}

.tolerance-field {
  max-width: 300px;
  margin-top: var(--space-4);
}

.diet-system-section {
  margin-top: var(--space-6);
  padding-top: var(--space-6);
  border-top: 1px solid var(--line);
}

.protocol-heading h4 {
  font-size: var(--font-card-title-size);
  font-weight: var(--weight-medium);
  line-height: var(--font-card-title-line);
}

.meal-count-field {
  max-width: 300px;
}

.meal-order-list {
  margin-top: var(--space-4);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.meal-order-list span {
  min-height: 44px;
  padding: 8px 12px;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  background: var(--surface-soft);
  border-radius: 11px;
  font-size: var(--font-body-size);
}

.meal-order-list b {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  color: var(--green);
  background: var(--green-soft);
  border-radius: 50%;
  font-size: var(--font-supporting-size);
}

.distribution-workspace {
  display: grid;
  gap: var(--space-6);
}

.distribution-section {
  margin: 0;
  padding-top: var(--space-6);
  border-top: 0;
}

.distribution-wallet {
  margin-top: 0;
}

.calculation-review-card .macro-consistency {
  margin-top: 0;
}

.calculation-review-card .wallet-summary {
  margin-top: var(--space-4);
}

.comments-card .muted-recommendation {
  padding: 0;
  background: transparent;
  border-radius: 0;
}

.mode-readiness-card .mode-completion-notice {
  margin: 0;
}

.mode-completion-notice.has-warnings {
  color: var(--amber);
  background: var(--amber-soft);
}

.mode-completion-notice li.is-warning {
  color: var(--amber);
}

.mode-editor-footer {
  margin: var(--space-6) 0 0;
  padding: var(--space-4) 0;
  background: rgba(244, 246, 241, .94);
  border-radius: 0;
}

@media (max-width: 768px) {
  .mode-task-stack,
  .distribution-workspace {
    gap: var(--space-4);
  }

  .mode-task-card,
  .mode-task-card.mode-rule-section,
  .mode-task-card.mode-accounting-summary {
    padding: var(--space-4);
    border-radius: 16px;
  }

  .mode-task-card > header {
    margin-bottom: var(--space-4);
    align-items: stretch;
    flex-direction: column;
  }

  .mode-task-card > header .button {
    width: 100%;
  }

  .meal-order-list {
    display: grid;
    grid-template-columns: 1fr;
  }

  .mode-editor-footer {
    margin-inline: 0;
    padding-inline: 0;
  }
}

body {
  font-size: var(--font-body-size);
  font-weight: var(--weight-regular);
  line-height: var(--font-body-line);
}

strong,
b {
  font-weight: var(--weight-medium);
}

p,
li,
dd,
dt {
  font-size: var(--font-body-size);
  line-height: var(--font-body-line);
}

small {
  font-size: var(--font-supporting-size);
  line-height: var(--font-supporting-line);
}

button,
input,
select,
textarea {
  font-weight: var(--weight-regular);
}

:where(a, button, input, select, textarea, summary):focus-visible {
  outline: 0;
  box-shadow: var(--focus-ring);
}

/* Brand and application chrome */
.brand,
.landing-brand,
.portal-brand,
.portal-logo {
  font-family: 'Prata', Georgia, serif;
  font-size: var(--font-section-title-size);
  font-weight: var(--weight-regular);
  line-height: var(--font-section-title-line);
}

.profile-menu-copy strong {
  font-size: var(--font-body-size);
  font-weight: var(--weight-medium);
  line-height: var(--font-body-line);
}

.profile-menu-copy small,
.sidebar-footer span {
  font-size: var(--font-supporting-size);
  line-height: var(--font-supporting-line);
}

.profile-menu-popover a,
.profile-menu-popover button {
  min-height: 44px;
  font-size: var(--font-button-size);
  font-weight: var(--weight-medium);
  line-height: var(--font-button-line);
}

/* Page hierarchy */
.client-work-context {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
  margin: 2px 0 var(--space-3);
  color: var(--muted);
  font-size: var(--font-supporting-size);
  line-height: var(--font-supporting-line);
}

.client-work-context a {
  color: var(--green-deep, #2f6d52);
  text-decoration: none;
  overflow-wrap: anywhere;
  max-width: 100%;
}

.client-work-context a:hover { text-decoration: underline; }
.client-work-context > span:last-child { overflow-wrap: anywhere; }
.client-dialog-context { margin: 0 0 6px; color: var(--green-deep, #2f6d52); font-size: var(--font-supporting-size); line-height: var(--font-supporting-line); overflow-wrap: anywhere; }

@media (max-width: 768px) {
  .client-work-context { flex-wrap: wrap; font-size: var(--font-supporting-size); }
  .client-work-context > span:last-child { display: none; }
}

.page-title h1,
.profile-identity h1,
.client-context-head h1,
.mode-editor-head h1,
.mode-protocol-head h1,
.today-hero h1,
.week-hero h1,
.portal-state h1,
.admin-title h1,
.admin-login h1 {
  margin: 0;
  font-family: 'Prata', Georgia, serif;
  font-size: var(--font-page-title-size);
  font-weight: var(--weight-regular);
  line-height: var(--font-page-title-line);
  letter-spacing: -.02em;
}

.page-title p,
.profile-identity p,
.client-context-head span,
.content-head p,
.form-page-head p,
.mode-editor-head p,
.mode-protocol-head p,
.admin-title p {
  color: var(--muted);
  font-size: var(--font-supporting-size);
  font-weight: var(--weight-regular);
  line-height: var(--font-supporting-line);
}

.content-head h2,
.form-page-head h2,
.setup-main .section-head h2,
.client-rules-summary h2,
.menu-content-head h2,
.menu-generation h2,
.client-empty h2,
.settings-panel > h2,
.protocol-page-head h2 {
  margin: 0;
  font-family: 'Manrope', system-ui, sans-serif;
  font-size: var(--font-section-title-size);
  font-weight: var(--weight-medium);
  line-height: var(--font-section-title-line);
  letter-spacing: -.01em;
}

.distribution-heading h3,
.protocol-heading h3,
.menu-week-overview h3,
.menu-day-head h3,
.meal-prep-panel > h3,
.protocol-document-section > header h3,
.protocol-advice > h3,
.protocol-questions > h3,
.section-head h2,
.section-head h3 {
  margin: 0;
  font-family: 'Manrope', system-ui, sans-serif;
  font-size: var(--font-subsection-title-size);
  font-weight: var(--weight-medium);
  line-height: var(--font-subsection-title-line);
}

.eyebrow,
.landing-kicker,
.ai-label {
  font-size: var(--font-micro-size);
  font-weight: var(--weight-medium);
  line-height: var(--font-micro-line);
}

/* Shared actions */
.button,
.landing-button,
.landing-login,
.tab-button,
.admin-tabs button {
  min-height: 44px;
  font-size: var(--font-button-size);
  font-weight: var(--weight-medium);
  line-height: var(--font-button-line);
}

.button,
.landing-button,
.landing-login {
  padding-block: var(--space-3);
}

.icon-button,
.demo-auth-close,
.admin-dialog > button {
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
}

/* Functional tabs */
.tabs,
.portal-nav,
.admin-tabs {
  gap: var(--space-6);
  overflow-x: auto;
  scrollbar-width: none;
}

.tabs::-webkit-scrollbar,
.portal-nav::-webkit-scrollbar,
.admin-tabs::-webkit-scrollbar {
  display: none;
}

.tab-button,
.portal-nav a,
.admin-tabs button {
  min-height: 44px;
  padding-inline: 0;
  color: var(--muted);
  white-space: nowrap;
  font-size: var(--font-body-size);
  font-weight: var(--weight-medium);
  line-height: var(--font-body-line);
}

.tab-button::after {
  right: 0;
  left: 0;
  height: 2px;
}

.tab-button.is-active,
.portal-nav a.is-active,
.admin-tabs button.is-active {
  color: var(--green-dark);
  font-weight: var(--weight-medium);
}

/* Forms */
.field > span,
.tag-field > span,
.rule-field h3,
.macro-editor label > span,
.style-slider > span,
.range-form label > span,
.admin-login label span {
  color: var(--text);
  font-size: var(--font-body-size);
  font-weight: var(--weight-medium);
  line-height: var(--font-body-line);
}

.field > small,
.tag-field > small,
.rule-field > small,
.macro-editor label > small,
.style-slider small,
.range-form label > small,
.field-error,
.dialog-note {
  color: var(--muted);
  font-size: var(--font-supporting-size);
  font-weight: var(--weight-regular);
  line-height: var(--font-supporting-line);
}

.field input,
.field select,
.field textarea,
.tag-field textarea,
.rule-field textarea,
.macro-editor input,
.unit-field input,
.style-slider input,
.client-toolbar input,
.client-toolbar select,
.admin-login input {
  min-height: 44px;
  padding: 12px 14px;
  color: var(--text);
  font-size: var(--font-body-size);
  font-weight: var(--weight-regular);
  line-height: var(--font-body-line);
}

input::placeholder,
textarea::placeholder {
  color: #718078;
  font-size: var(--font-supporting-size);
  font-weight: var(--weight-regular);
  line-height: var(--font-supporting-line);
}

.form-grid,
.rules-grid,
.comment-fields {
  gap: var(--space-6);
}

/* Cards and user-entered values */
.panel,
.client-card,
.mode-card,
.generated-meal-card,
.portal-meal,
.rule-field {
  font-size: var(--font-body-size);
  line-height: var(--font-body-line);
}

.client-person strong,
.mode-card h3,
.generated-meal-card h3,
.portal-meal h2,
.portal-meal h3,
.dish-copy h3,
.menu-layer-summary summary strong,
.meal-prep-content h4,
.wallet-summary > strong,
.admin-detail h2 {
  font-size: var(--font-card-title-size);
  font-weight: var(--weight-medium);
  line-height: var(--font-card-title-line);
}

.client-person > div > span,
.client-note-preview,
.mode-parent,
.generated-meal-card header > div > span,
.generated-meal-card header > div > p,
.generated-meal-card > p,
.dish-copy > p,
.menu-layer-summary summary small,
.wallet-caption,
.generation-last-save,
.generation-wait-note,
.protocol-footnote {
  color: var(--muted);
  font-size: var(--font-supporting-size);
  font-weight: var(--weight-regular);
  line-height: var(--font-supporting-line);
}

.client-note-preview {
  line-height: var(--font-supporting-line);
}

/* Important states never use micro text */
.status-pill,
.profile-publication-status,
.profile-publication-status em,
.setup-step strong,
.setup-step small,
.mode-completion-notice strong,
.mode-completion-notice p,
.menu-review-progress span,
.menu-review-progress strong,
.menu-review-progress small,
.menu-publish-footer strong,
.menu-publish-footer span,
.menu-preflight strong,
.menu-preflight small,
.menu-issues-compact summary,
.menu-issues-compact details p,
.generation-days strong,
.generation-days small,
.layer-generation-list strong,
.layer-generation-list small,
.meal-prep-locked strong,
.meal-prep-locked p,
.meal-prep-loading strong,
.meal-prep-loading p,
.meal-prep-stale strong,
.meal-prep-stale p,
.draft-preview-bar strong,
.draft-preview-bar small {
  font-size: var(--font-button-size);
  line-height: var(--font-button-line);
}

.status-pill,
.profile-publication-status,
.setup-step strong,
.menu-review-progress strong,
.menu-publish-footer strong,
.layer-generation-list strong,
.generation-days strong {
  font-weight: var(--weight-medium);
}

.setup-step small,
.menu-review-progress small,
.menu-publish-footer span,
.layer-generation-list small,
.generation-days small {
  font-weight: var(--weight-regular);
}

/* Client header: publishing is a quiet status, rare actions stay in overflow. */
.profile-publication-status {
  width: fit-content;
  margin-top: var(--space-2);
  padding: 5px var(--space-2);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  background: var(--surface-soft);
  border-radius: 999px;
  white-space: normal;
}

.profile-publication-status i {
  width: 7px;
  height: 7px;
  flex: 0 0 7px;
  background: #b78340;
  border-radius: 50%;
}

.profile-publication-status.is-live i {
  background: var(--green);
}

.profile-publication-status em {
  padding-left: 6px;
  color: var(--amber);
  border-left: 1px solid var(--line);
  font-style: normal;
  font-weight: var(--weight-medium);
}

.client-overflow {
  position: relative;
  flex: 0 0 44px;
}

.client-overflow > summary {
  list-style: none;
}

.client-overflow > summary::-webkit-details-marker {
  display: none;
}

.client-overflow-menu {
  position: absolute;
  z-index: 20;
  top: calc(100% + var(--space-2));
  right: 0;
  width: 210px;
  padding: var(--space-2);
  display: grid;
  gap: var(--space-1);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: var(--shadow);
}

.client-overflow-menu button {
  min-height: 44px;
  padding: var(--space-2) var(--space-3);
  color: var(--text);
  background: transparent;
  border: 0;
  border-radius: 10px;
  font-size: var(--font-button-size);
  font-weight: var(--weight-medium);
  line-height: var(--font-button-line);
  text-align: left;
  cursor: pointer;
}

.client-overflow-menu button:hover {
  background: var(--surface-soft);
}

.client-overflow-menu button.is-danger {
  color: var(--red);
}

/* Quick note stays available without taking over the overview page. */
.client-note-dialog {
  position: fixed;
  inset: 0 0 0 auto;
  width: min(440px, 100%);
  height: 100dvh;
  max-height: none;
  margin: 0;
  padding: 0;
  color: var(--text);
  background: var(--surface);
  border: 0;
  border-radius: 24px 0 0 24px;
  box-shadow: -18px 0 55px rgba(27, 55, 38, .16);
  overflow: hidden;
}

.client-note-dialog::backdrop {
  background: rgba(30, 46, 37, .28);
  backdrop-filter: blur(4px);
}

.client-note-sheet {
  height: 100%;
  padding: var(--space-8);
  display: flex;
  flex-direction: column;
}

.client-note-sheet > header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
}

.client-note-sheet h2 {
  margin: 0;
  font-size: var(--font-section-title-size);
  font-weight: var(--weight-medium);
  line-height: var(--font-section-title-line);
}

.client-note-sheet header p {
  margin: var(--space-1) 0 0;
  color: var(--muted);
  font-size: var(--font-supporting-size);
  line-height: var(--font-supporting-line);
}

.client-note-sheet > label {
  min-height: 0;
  margin-top: var(--space-6);
  display: flex;
  flex: 1;
}

.client-note-sheet textarea {
  width: 100%;
  min-height: 260px;
  padding: var(--space-4);
  color: var(--text);
  background: var(--surface-soft);
  border: 1px solid var(--line);
  border-radius: 14px;
  outline: 0;
  resize: none;
  font-size: var(--font-body-size);
  line-height: var(--font-body-line);
}

.client-note-sheet textarea:focus {
  border-color: var(--green);
  box-shadow: var(--focus-ring);
}

.client-note-sheet > footer {
  margin-top: var(--space-4);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}

.client-note-save-state {
  color: var(--muted);
  font-size: var(--font-supporting-size);
  line-height: var(--font-supporting-line);
}

/* Readiness overview */
.setup-percent,
.summary-card strong,
.today-target > span,
.admin-stat strong {
  font-family: 'Prata', Georgia, serif;
  font-size: var(--font-metric-size);
  font-weight: var(--weight-regular);
  line-height: var(--font-metric-line);
}

.summary-card span,
.today-target small,
.admin-stat span {
  color: var(--muted);
  font-size: var(--font-supporting-size);
  line-height: var(--font-supporting-line);
}

.setup-step {
  min-height: 64px;
  padding: var(--space-4);
  gap: var(--space-3);
}

.setup-step > span {
  width: 24px;
  height: 24px;
  flex-basis: 24px;
}

/* Regime editor */
.mode-tabs button {
  min-height: 64px;
  font-size: var(--font-button-size);
  font-weight: var(--weight-medium);
  line-height: var(--font-button-line);
}

.mode-tabs button strong,
.mode-tabs button span {
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
}

.macro-editor input,
.wallet-stepper strong,
.mode-macros strong,
.portal-approved-macros b {
  font-size: var(--font-body-size);
  font-weight: var(--weight-medium);
  line-height: var(--font-body-line);
}

.wallet-tab strong,
.wallet-tab span,
.wallet-budget-head span,
.wallet-budget-head strong,
.wallet-meal strong,
.wallet-meal span,
.wallet-summary-grid > * {
  font-size: var(--font-supporting-size);
  line-height: var(--font-supporting-line);
}

.wallet-stepper button {
  min-width: 40px;
  min-height: 40px;
  font-size: var(--font-subsection-title-size);
}

/* Menu review */
.menu-week-overview button,
.menu-day-tabs button,
.portal-preview-days button {
  font-size: var(--font-supporting-size);
  line-height: var(--font-supporting-line);
}

.menu-week-overview button p,
.menu-week-overview button em,
.menu-day-tabs button small,
.portal-preview-days button span {
  font-size: var(--font-supporting-size);
  font-weight: var(--weight-regular);
  line-height: var(--font-supporting-line);
}

.menu-day-tabs button strong,
.portal-preview-days button strong {
  font-size: var(--font-card-title-size);
  font-weight: var(--weight-medium);
  line-height: var(--font-card-title-line);
}

.generated-ingredients,
.generated-meal-meta,
.generated-meal-note,
.generated-warning,
.meal-layer-tags {
  font-size: var(--font-supporting-size);
  line-height: var(--font-supporting-line);
}

.generated-meal-meta span,
.meal-layer-tags span,
.macro-delta {
  font-size: var(--font-supporting-size);
  line-height: var(--font-supporting-line);
}

/* Protocol and client portal */
.protocol-document,
.protocol-section-body,
.protocol-products,
.protocol-advice,
.protocol-questions,
.portal-meal,
.portal-recommendations {
  font-size: var(--font-body-size);
  line-height: var(--font-body-line);
}

.protocol-products dt,
.protocol-products dd,
.protocol-condition-guidance p,
.protocol-advice p,
.protocol-questions p,
.portal-approved-ingredients,
.dish-meta,
.portal-recipe,
.portal-recipe-pending {
  font-size: var(--font-supporting-size);
  line-height: var(--font-supporting-line);
}

.portal-person strong {
  font-size: var(--font-body-size);
  font-weight: var(--weight-medium);
  line-height: var(--font-body-line);
}

.portal-person small {
  font-size: var(--font-supporting-size);
  line-height: var(--font-supporting-line);
}

/* Dialogs */
.dialog-head h2,
.demo-auth-brand strong {
  font-size: var(--font-subsection-title-size);
  font-weight: var(--weight-medium);
  line-height: var(--font-subsection-title-line);
}

.dialog-head .eyebrow,
.demo-auth-brand p,
.demo-auth-note,
.inheritance-bar {
  font-size: var(--font-supporting-size);
  line-height: var(--font-supporting-line);
}

/* Diagnostics */
.admin-stat,
.admin-row,
.admin-detail-grid div {
  font-size: var(--font-body-size);
  line-height: var(--font-body-line);
}

.admin-row strong {
  font-size: var(--font-body-size);
  font-weight: var(--weight-medium);
  line-height: var(--font-body-line);
}

.admin-row span,
.admin-row small,
.admin-detail-grid span {
  font-size: var(--font-supporting-size);
  line-height: var(--font-supporting-line);
}

.admin-status,
.admin-detail-grid strong,
.admin-detail summary {
  font-size: var(--font-button-size);
  font-weight: var(--weight-medium);
  line-height: var(--font-button-line);
}

.admin-detail pre {
  font-size: var(--font-micro-size);
  line-height: var(--font-micro-line);
}

/* Marketing hierarchy */
.landing-hero h1 {
  font-family: 'Prata', Georgia, serif;
  font-size: var(--font-display-size);
  font-weight: var(--weight-regular);
  line-height: var(--font-display-line);
}

.landing-section h2,
.landing-cta h2 {
  font-family: 'Prata', Georgia, serif;
  font-size: var(--font-page-title-size);
  font-weight: var(--weight-regular);
  line-height: var(--font-page-title-line);
}

.landing-hero-copy > p,
.landing-section-intro > p,
.client-copy > p,
.landing-cta p {
  font-size: var(--font-body-size);
  font-weight: var(--weight-regular);
  line-height: var(--font-body-line);
}

.problem-card h3,
.workflow-grid h3,
.client-copy li strong,
.problem-result strong {
  font-size: var(--font-card-title-size);
  font-weight: var(--weight-medium);
  line-height: var(--font-card-title-line);
}

.problem-card > p,
.problem-result span,
.workflow-grid p,
.client-copy li small,
.landing-trust-row,
.landing-footer {
  font-size: var(--font-supporting-size);
  font-weight: var(--weight-regular);
  line-height: var(--font-supporting-line);
}

.landing-nav {
  font-size: var(--font-body-size);
  font-weight: var(--weight-medium);
  line-height: var(--font-body-line);
}

@media (max-width: 768px) {
  .main-content {
    padding-inline: var(--space-4);
  }

  .page-head,
  .profile-head,
  .content-head,
  .mode-editor-head,
  .mode-protocol-head,
  .today-hero {
    align-items: stretch;
    flex-direction: column;
  }

  .page-head .button,
  .profile-actions,
  .content-head-actions {
    width: 100%;
  }

  .profile-actions > *,
  .content-head-actions > * {
    flex: 1 1 auto;
  }

  .tabs {
    margin-inline: calc(var(--space-4) * -1);
    padding-inline: var(--space-4);
  }

  .field input,
  .field select,
  .field textarea,
  .tag-field textarea,
  .rule-field textarea,
  .macro-editor input,
  .unit-field input,
  .client-toolbar input,
  .client-toolbar select,
  .client-note-sheet textarea,
  .admin-login input {
    font-size: var(--font-input-mobile-size);
    line-height: var(--font-input-mobile-line);
  }

  .setup-step,
  .admin-row {
    min-height: 64px;
  }
}

@media (max-width: 560px) {
  .profile-head {
    padding: 20px;
    gap: var(--space-4);
  }

  .profile-identity {
    width: 100%;
    align-items: flex-start;
  }

  .profile-identity .avatar {
    width: 52px;
    height: 52px;
    flex: 0 0 52px;
  }

  .profile-identity h1 {
    font-size: var(--font-section-title-size);
    line-height: var(--font-section-title-line);
  }

  .profile-identity p {
    margin-top: var(--space-1);
  }

  .profile-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 44px;
    gap: var(--space-2);
  }

  .profile-actions > * {
    min-width: 0;
    flex: none;
  }

  .profile-actions .button {
    width: 100%;
    padding-inline: var(--space-2);
  }

  .client-overflow {
    width: 44px;
  }

  .client-rules-summary,
  .setup-main {
    padding: 24px;
  }

  .client-note-dialog {
    inset: auto 0 0;
    width: 100%;
    height: min(78dvh, 680px);
    border-radius: 24px 24px 0 0;
  }

  .client-note-sheet {
    padding: 24px 20px max(20px, env(safe-area-inset-bottom));
  }
}

@media (max-width: 390px) {
  .landing-hero h1 {
    font-size: var(--font-page-title-size);
    line-height: var(--font-page-title-line);
  }

  .profile-identity h1 {
    font-size: var(--font-section-title-size);
    line-height: var(--font-section-title-line);
  }

  .admin-login h1 {
    font-size: var(--font-section-title-size);
    line-height: var(--font-section-title-line);
  }

  .page-title h1,
  .client-context-head h1,
  .mode-editor-head h1,
  .mode-protocol-head h1,
  .today-hero h1,
  .week-hero h1,
  .portal-state h1,
  .admin-title h1,
  .admin-login h1 {
    overflow-wrap: anywhere;
  }

  .landing-header,
  .landing-hero,
  .landing-section,
  .landing-footer {
    width: min(100% - 32px, 1200px);
  }

  .button,
  .landing-button {
    white-space: normal;
  }
}

/* Compact working context across client tabs and mode workflows. */
.client-context-head {
  margin-block: 0 var(--space-3);
  align-items: center;
}

.client-context-head h1,
.mode-protocol-head h1 {
  font-size: var(--font-section-title-size);
  line-height: var(--font-section-title-line);
}

.mode-card-actions {
  padding-top: var(--space-4);
  border-top: 1px solid var(--line);
}

.mode-tab-label-short {
  display: none;
}

@media (max-width: 768px) {
  .client-context-head {
    margin-bottom: var(--space-2);
    flex-wrap: wrap;
    gap: var(--space-1) var(--space-2);
  }

  .client-context-head h1 {
    font-size: var(--font-subsection-title-size);
    line-height: var(--font-subsection-title-line);
  }

  .client-context-head span {
    width: 100%;
  }

  .mode-editor-head {
    align-items: center;
    flex-direction: row;
  }

  .mode-editor-head h1 {
    font-size: var(--font-section-title-size);
    line-height: var(--font-section-title-line);
  }

  .mode-editor-head .status-pill {
    align-self: center;
  }

  .mode-tabs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-1);
    overflow: visible;
    padding-bottom: 0;
  }

  .mode-tabs button {
    min-width: 0;
    min-height: 64px;
    padding: var(--space-2) var(--space-1);
    align-items: center;
    flex-direction: column;
    justify-content: center;
    gap: var(--space-1);
    text-align: center;
  }

  .mode-tabs button > span {
    width: 23px;
    height: 23px;
  }

  .mode-tabs button div {
    width: 100%;
  }

  .mode-tabs button strong {
    font-size: var(--font-micro-size);
    line-height: var(--font-micro-line);
  }

  .mode-tabs button small {
    display: none;
  }

  .mode-editor-footer > div.is-single-action {
    grid-template-columns: 1fr;
  }

  .protocol-products > div {
    grid-template-columns: 1fr;
    gap: var(--space-1);
  }

  .protocol-meta {
    width: 100%;
    justify-content: space-between;
    flex-wrap: wrap;
  }

  .calendar-next-step {
    grid-template-columns: 34px minmax(0, 1fr);
  }

  .calendar-next-step .button {
    grid-column: 1 / -1;
    width: 100%;
  }
}

@media (max-width: 480px) {
  .mode-tab-label-full { display: none; }
  .mode-tab-label-short { display: inline; }
}

@media (max-width: 420px) {
  .mode-tabs button {
    min-height: 60px;
  }

  .mode-tabs button > span {
    width: 21px;
    height: 21px;
  }
}

@media (max-width: 360px) {
  .mode-tab-label-full {
    display: none;
  }

  .mode-tab-label-short {
    display: inline;
  }
}

/* Native form controls keep one size and never exceed their mobile column. */
select {
  -webkit-appearance: none;
  appearance: none;
  padding-right: 42px !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235d6b62' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m8 10 4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 16px;
}

.field,
.range-form,
.range-form label,
.calendar-control,
.client-toolbar,
.client-toolbar label {
  min-width: 0;
}

.field input,
.field select,
.client-toolbar input,
.client-toolbar select {
  max-width: 100%;
  box-sizing: border-box;
}

.field select,
.client-toolbar input,
.client-toolbar select {
  height: 46px;
  min-height: 46px;
  padding-block: 0;
}

input[type="date"] {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  height: 46px;
  min-height: 46px;
  padding-block: 0;
  box-sizing: border-box;
}

input[type="date"]::-webkit-date-and-time-value {
  min-width: 0;
  text-align: left;
}

.calendar-day select {
  padding-right: 24px !important;
  background-position: right 6px center;
  background-size: 12px;
}

@media (max-width: 768px) {
  .client-toolbar input,
  .client-toolbar select,
  .range-form input,
  .range-form select {
    font-size: var(--font-input-mobile-size);
    line-height: var(--font-input-mobile-line);
  }
}
.account-import-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 24px;
  padding: 20px 22px;
  background: var(--green-soft, #e8f1e8);
}
.account-import-banner > div { display: flex; align-items: center; gap: 10px; }
.account-import-banner > div:first-child { align-items: flex-start; flex-direction: column; gap: 4px; }
.account-import-banner strong { font-size: var(--font-body-size, 16px); }
.account-import-banner span { color: var(--muted); }
.user-avatar.has-image { background-position: center; background-size: cover; color: transparent; }

@media (max-width: 680px) {
  .account-import-banner, .account-import-banner > div:last-child { align-items: stretch; flex-direction: column; }
  .account-import-banner .button { width: 100%; }
}