/* Hallmark · pre-emit critique: P5 H5 E4 S5 R5 V4 */
/* Hallmark · genre: modern-minimal · macrostructure: mobile workbench / long document · design-system: design.md · designed-as-app
 * theme: custom · vibe: "calm pet-care, soft organic, clear" · paper: oklch(98.43% 0.0040 106.47) · accent: oklch(53.51% 0.0223 147.62)
 * display: Yuanti SC / SF Pro Rounded · body: system / PingFang SC · axes: light / rounded-sans / chromatic-sage
 * studied: no · context: explicit · nav: N5 solid top-left · footer: Ft2 · contrast: pass (40–41)
 * slop: pass (42–45) · honest: pass (46) · chrome: pass (47) · tokens: pass (48)
 * responsive: pass (49) · icons: pass (30) · mobile: pass (34, 49, 50–57) · v1.0.0
 */

/* The existing feature styles remain intact. This final cascade is the shared,
   semantic visual contract for every public route. */
:root {
  color: var(--color-text-primary);
  background: var(--color-bg);

  /* Existing Home / Profile shell dimensions, shared without changing their layout. */
  --app-shell-width: 430px;
  --app-shell-gutter: 18px;
  --app-shell-radius: 42px;
  --app-shell-shadow: 0 0 54px rgb(73 58 47 / 12%);
  --my-shell-width: var(--app-shell-width);

  --my-page-background: var(--color-bg);
  --my-card-background: var(--color-surface);
  --my-cream: var(--color-reminder);
  --my-sage: var(--color-primary-soft);
  --my-olive: var(--color-primary);
  --my-olive-dark: var(--color-primary);
  --my-text: var(--color-text-primary);
  --my-text-muted: var(--color-text-secondary);
  --my-border: var(--color-border);
  --my-card-radius: var(--radius-card);
  --my-control-radius: var(--radius-control);
  --my-shadow: var(--shadow-card);
  --my-shadow-button: none;
  --my-info: var(--color-info);
  --my-success: var(--color-success);
  --my-reminder: var(--color-reminder);
  --my-soft-peach: var(--color-warning-soft);

  --food-page: var(--color-bg);
  --food-card: var(--color-surface);
  --food-cream: var(--color-reminder);
  --food-sage: var(--color-primary-soft);
  --food-olive: var(--color-primary);
  --food-olive-dark: var(--color-primary-hover);
  --food-text: var(--color-text-primary);
  --food-muted: var(--color-text-secondary);
  --food-border: var(--color-border);
  --food-radius: var(--radius-card);
  --food-radius-small: var(--radius-control);
  --food-control-radius: var(--radius-control);
  --food-shadow: var(--shadow-card);
  --food-soft-shadow: var(--shadow-card);
  --food-info: var(--color-info);
  --food-success: var(--color-success);
  --food-reminder: var(--color-reminder);

  --identification-page: var(--color-bg);
  --identification-card: var(--color-surface);
  --identification-cream: var(--color-reminder);
  --identification-sage: var(--color-primary-soft);
  --identification-olive: var(--color-primary);
  --identification-olive-dark: var(--color-primary-hover);
  --identification-text: var(--color-text-primary);
  --identification-muted: var(--color-text-secondary);
  --identification-border: var(--color-border);
  --identification-soft: var(--color-surface-soft);
  --identification-radius: var(--radius-card);
  --identification-radius-small: var(--radius-control);
  --identification-shadow: var(--shadow-card);
  --identification-soft-shadow: var(--shadow-card);
  --identification-info: var(--color-info);
  --identification-success: var(--color-success);
  --identification-reminder: var(--color-reminder);

  --doctor-page: var(--color-bg);
  --doctor-card: var(--color-surface);
  --doctor-cream: var(--color-reminder);
  --doctor-sage: var(--color-primary-soft);
  --doctor-olive: var(--color-primary);
  --doctor-olive-dark: var(--color-primary-hover);
  --doctor-text: var(--color-text-primary);
  --doctor-muted: var(--color-text-secondary);
  --doctor-border: var(--color-border);
  --doctor-soft: var(--color-surface-soft);
  --doctor-danger: var(--color-danger);
  --doctor-card-radius: var(--radius-card);
  --doctor-control-radius: var(--radius-control);
  --doctor-shadow: var(--shadow-card);
  --doctor-control-shadow: none;
  --doctor-info: var(--color-info);
  --doctor-success: var(--color-success);
  --doctor-reminder: var(--color-reminder);
  --doctor-soft-warning: var(--color-warning-soft);

  --home-page: var(--color-bg);
  --home-card: var(--color-surface);
  --home-sage: var(--color-primary-soft);
  --home-olive: var(--color-primary);
  --home-text: var(--color-text-primary);
  --home-text-secondary: var(--color-text-secondary);
  --home-green: var(--color-primary);
  --home-border: var(--color-border);
  --home-shadow: var(--shadow-card);
  --home-radius-card: var(--radius-card);
}

html,
body {
  max-width: 100%;
  overflow-x: clip;
  color: var(--color-text-primary);
  background: var(--color-bg);
  font-family: var(--font-body);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  min-height: 100dvh;
}

::selection {
  color: var(--color-text-primary);
  background: var(--color-selection);
}

h1,
h2,
h3,
h4,
.home-greeting,
.profile-body .eyebrow {
  min-width: 0;
  overflow-wrap: anywhere;
  color: var(--color-text-primary);
  font-family: var(--font-display);
}

p,
small,
label,
dd,
dt,
li {
  text-wrap: pretty;
}

a {
  color: var(--color-primary-strong);
}

button,
[role="button"],
input,
select,
textarea,
a {
  -webkit-tap-highlight-color: transparent;
}

button,
[role="button"],
.main-button,
.nav-link,
.profile-corner-link,
.page-back,
.back-link,
.text-button,
.text-link {
  touch-action: manipulation;
  white-space: nowrap;
}

button,
.main-button,
.nav-link,
.profile-corner-link,
.page-back,
.back-link,
.text-button,
.text-link,
input,
select,
textarea,
summary {
  transition:
    color var(--duration-state) var(--ease-out),
    background-color var(--duration-state) var(--ease-out),
    border-color var(--duration-state) var(--ease-out),
    opacity var(--duration-state) var(--ease-out),
    transform var(--duration-press) var(--ease-out);
}

:where(a, button, input, select, textarea, summary, [role="button"]):focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
  box-shadow: var(--focus-ring);
}

:where(button, .main-button, .nav-link, .profile-corner-link, .page-back, .back-link):active {
  transform: scale(0.985);
}

:where(button, input, select, textarea):disabled,
[aria-disabled="true"] {
  color: var(--color-disabled-text);
  background-color: var(--color-disabled-bg);
  cursor: not-allowed;
  opacity: 0.55;
}

/* Shared mobile workbench. */
.home-shell,
.profile-body .my-app-shell,
.community-body .my-app-shell {
  position: relative;
  width: min(100%, var(--my-shell-width));
  margin-inline: auto;
}

.home-shell,
.hospital-body .my-app-shell,
.community-body .my-app-shell {
  background: var(--color-bg);
  box-shadow: var(--app-shell-shadow);
}

@media (min-width: 700px) {
  .home-shell,
  .hospital-body .my-app-shell,
  .community-body .my-app-shell {
    margin-block: 20px;
    border-radius: var(--app-shell-radius);
  }
}

.profile-body,
.food-body,
.identification-body,
.symptom-body {
  color: var(--color-text-primary);
  background: var(--color-bg);
}

.profile-body .my-app-shell,
.food-body .food-app-shell,
.identification-body .identification-app-shell,
.symptom-body .doctor-app-shell {
  background: var(--color-bg);
}

.profile-body .my-module-header,
.community-body .community-header {
  background: var(--color-header-glass);
  border-bottom-color: var(--color-rule-soft);
}

.profile-body .site-nav {
  padding: var(--space-3xs);
  background: var(--color-surface);
  border-color: var(--color-border);
  border-radius: var(--radius-pill);
  box-shadow: none;
}

.profile-body .nav-link {
  min-height: var(--control-min-size);
  align-items: center;
  color: var(--color-text-primary);
  border-radius: var(--radius-pill);
  line-height: 1;
}

.profile-body .nav-link[aria-current="page"],
.community-body .community-tabs a[aria-current="page"],
.community-body .community-sidebar a[aria-current="page"] {
  color: var(--color-text-primary);
  background: var(--color-primary-soft);
}

.profile-body .profile-corner-link {
  flex: 0 0 var(--control-min-size);
  width: var(--control-min-size);
  min-width: var(--control-min-size);
  min-height: var(--control-min-size);
  color: var(--color-on-primary);
  background: var(--color-primary);
  border-color: var(--color-primary);
}

.profile-body .profile-panel,
.profile-body .cloud-account-notice,
.food-body .profile-panel,
.identification-body .identification-panel,
.symptom-body .profile-panel,
.community-body :is(.post-card, .profile-card, .community-note) {
  color: var(--color-text-primary);
  background: var(--color-surface);
  border-color: var(--color-border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
}

.profile-body :where(p, small, .field-hint, .privacy-hint, .detail-field dt),
.food-body :where(p, small, .field-hint, .privacy-hint, .vision-muted, .nutrition-disclaimer),
.identification-body :where(p, small, .progress-copy),
.symptom-body :where(p, small, .symptom-intro, .symptom-help) {
  color: var(--color-text-secondary);
}

.profile-body :where(button, .main-button),
.food-body :where(.main-button, button:not(.text-button):not(.danger-button):not(.favorite-button):not(.preview-remove):not(.calendar-day)),
.identification-body :where(.main-button, button.main-button, .result-actions > button:not(.text-button), .save-result-dialog button:not(.text-button)),
.symptom-body :where(.main-button, button.main-button),
.community-body .primary {
  min-height: var(--control-min-size);
  color: var(--color-on-primary);
  background: var(--color-primary);
  border-color: var(--color-primary);
  border-radius: var(--radius-control);
  box-shadow: none;
}

.profile-body :where(button, .main-button):hover,
.food-body :where(.main-button, button:not(.text-button):not(.danger-button):not(.favorite-button):not(.preview-remove):not(.calendar-day)):hover,
.identification-body :where(.main-button, button.main-button, .result-actions > button:not(.text-button), .save-result-dialog button:not(.text-button)):hover,
.symptom-body :where(.main-button, button.main-button):hover {
  color: var(--color-on-primary);
  background: var(--color-primary-hover);
  border-color: var(--color-primary-hover);
  transform: none;
}

.profile-body :where(.text-button, .text-link, .back-link, .page-back),
.food-body :where(.text-button, .text-link, .back-link, .page-back),
.identification-body :where(.text-button, .text-link, .back-link, .page-back),
.symptom-body :where(.text-button, .text-link, .back-link, .page-back),
.community-body .quiet {
  min-height: var(--control-min-size);
  color: var(--color-primary-strong);
  background: transparent;
  border-color: transparent;
  border-radius: var(--radius-input);
  box-shadow: none;
}

.profile-body :where(input:not([type="checkbox"]):not([type="radio"]), select, textarea),
.food-body :where(input:not([type="checkbox"]):not([type="radio"]), select, textarea),
.identification-body :where(input:not([type="checkbox"]):not([type="radio"]), select, textarea),
.symptom-body :where(input:not([type="checkbox"]):not([type="radio"]), select, textarea) {
  min-height: var(--control-min-size);
  color: var(--color-text-primary);
  background: var(--color-surface);
  border-color: var(--color-border);
  border-radius: var(--radius-input);
  font-size: max(1rem, 16px);
  outline: 2px solid transparent;
  outline-offset: 2px;
}

/* My / Pet / Settings. */
.profile-body .cloud-account-notice {
  background: var(--color-info-tint);
  border-color: var(--color-info);
}

.profile-body .pet-card,
.profile-body .record-card,
.profile-body .daily-record-card {
  color: var(--color-text-primary);
  background: var(--color-surface);
  border-color: var(--color-border);
  border-radius: var(--radius-control);
  box-shadow: none;
}

.profile-body .pet-card {
  border-color: var(--color-primary-soft);
  box-shadow: none;
}

.profile-body .detail-hero,
.profile-body .snapshot,
.profile-body .profile-summary-panel > .text-button {
  color: var(--color-text-primary);
  background: var(--color-surface-soft);
  border-color: var(--color-border);
}

.profile-body :where(.health-card, .health-summary, .record-summary) {
  background: var(--color-success-tint);
  border-color: var(--color-success);
}

:is(.settings-body, .profile-body) .settings-row {
  min-height: 3.5rem;
  color: var(--color-text-primary);
  background: var(--color-surface);
  border-color: var(--color-border);
}

:is(.settings-body, .profile-body) :where(.danger-row, .delete-submit),
.profile-body .danger-button {
  color: var(--color-danger);
  border-color: var(--color-danger);
}

:is(.settings-body, .profile-body) .delete-submit,
.profile-body .danger-button.is-filled {
  color: var(--color-on-primary);
  background: var(--color-danger);
}

.delete-confirm-note,
.profile-body .form-error {
  color: var(--color-danger);
  background: var(--color-danger-soft);
  border-color: var(--color-danger);
}

/* Food: restrained semantic accents, mostly white surfaces. */
.food-body .food-hub-card,
.food-body .food-card,
.food-body .vision-product,
.food-body .record-card {
  color: var(--color-text-primary);
  background: var(--color-surface);
  border-color: var(--color-border);
  border-radius: var(--radius-control);
  box-shadow: none;
}

.food-body .food-hub-card:nth-child(1) {
  border-top-color: var(--color-info);
}

.food-body .food-hub-card:nth-child(2) {
  border-top-color: var(--color-success);
}

.food-body .food-hub-card:nth-child(3) {
  border-top-color: var(--color-reminder);
}

.food-body .food-hub.profile-panel {
  padding-inline: 0;
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}

.food-body :where(.vision-notice, .safety-note) {
  color: var(--color-text-primary);
  background: var(--color-info-tint);
  border-color: var(--color-info);
}

.food-body :where(.status-recognized, .saved-state, .is-saved) {
  color: var(--color-primary-strong);
  background: var(--color-success);
}

.food-body :where(.vision-warning, .status-uncertain, .calculation-note) {
  color: var(--color-text-primary);
  background: var(--color-warning-tint);
  border-color: var(--color-warning-soft);
}

.food-body :where(.calendar-hint, .quantity-picker, .feeding-total-row > div) {
  color: var(--color-text-primary);
  background: var(--color-reminder-tint);
  border-color: var(--color-reminder);
}

.food-body .favorite-button,
.food-body .preview-remove,
.food-body .calendar-day,
.food-body .calendar-shortcuts button,
.food-body .unit-tabs button,
.food-body .range-switch button {
  min-width: var(--control-min-size);
  min-height: var(--control-min-size);
}

.food-body .calendar-day[aria-pressed="true"],
.food-body .unit-tabs button[aria-pressed="true"],
.food-body .range-switch button[aria-pressed="true"] {
  color: var(--color-on-primary);
  background: var(--color-primary);
  border-color: var(--color-primary);
}

/* Doctor: AI/info, quota, image and risk remain semantically distinct. */
.symptom-body :where(.symptom-access-status, .symptom-ai-confirm-card, .symptom-ai-explanation) {
  color: var(--color-text-primary);
  background: var(--color-info-tint);
  border-color: var(--color-info);
}

.symptom-body :where(.symptom-preview-notice, .symptom-ai-evidence) {
  color: var(--color-text-primary);
  background: var(--color-reminder-tint);
  border-color: var(--color-reminder);
}

.symptom-body :where(.symptom-image-upload, .symptom-image-card) {
  color: var(--color-text-primary);
  background: var(--color-success-tint);
  border-color: var(--color-success);
}

.symptom-body .symptom-image-picker {
  min-height: var(--control-min-size);
  color: var(--color-primary-strong);
  background: var(--color-success);
  border-color: var(--color-success);
  border-radius: var(--radius-control);
}

.symptom-body :where(.symptom-warning, .risk-soon) {
  color: var(--color-text-primary);
  background: var(--color-warning-tint);
  border-color: var(--color-warning-soft);
}

.symptom-body .risk-observe {
  color: var(--color-text-primary);
  background: var(--color-success);
}

.symptom-body .risk-consult {
  color: var(--color-text-primary);
  background: var(--color-info);
}

.symptom-body .risk-emergency,
.symptom-body .symptom-emergency-visual {
  color: var(--color-danger);
  background: var(--color-danger-soft);
  border-color: var(--color-danger);
}

.symptom-body .doctor-quiet-footer,
.symptom-body .doctor-quiet-footer a {
  color: var(--color-text-secondary);
}

/* Identification uses brand sage for progress and selection; explanations stay neutral. */
.identification-body .progress-track {
  background: var(--color-primary-tint);
}

.identification-body .progress-fill {
  background: var(--color-primary);
}

.identification-body :where(.option-button[aria-pressed="true"], .option-button.is-selected) {
  color: var(--color-text-primary);
  background: var(--color-primary-soft);
  border-color: var(--color-primary);
}

.identification-body :where(.result-note, .help p) {
  color: var(--color-text-primary);
  background: var(--color-reminder-tint);
  border-color: var(--color-reminder);
}

/* Home keeps the illustrated pet device unchanged; only supporting information
   joins the shared semantic system. */
html.home-html,
body.home-body,
.home-shell {
  color: var(--color-text-primary);
  background: var(--color-bg);
}

.home-info-card {
  color: var(--color-text-primary);
  background: var(--color-surface);
  border-color: var(--color-border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
}

.home-info-card.pet-summary-card {
  box-shadow: inset 4px 0 0 var(--color-primary-soft), var(--shadow-card);
}

.home-info-card.tip-card {
  background: var(--color-surface);
  border-color: var(--color-border);
}

.pet-days {
  color: var(--color-text-primary);
  background: var(--color-success-tint);
}

.home-slogan,
.home-info-card small,
.home-greeting p {
  color: var(--color-text-secondary);
}

.home-body .pet-switcher button {
  position: relative;
  width: var(--control-min-size);
  min-height: var(--control-min-size);
  padding: 0;
  color: var(--color-primary);
  background: transparent;
  border: 0;
  box-shadow: none;
}

.home-body .pet-switcher button::before {
  position: absolute;
  inset: 50% auto auto 50%;
  width: 1.5rem;
  height: 1.5rem;
  content: "";
  background: var(--color-surface-glass);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-card);
  transform: translate(-50%, -50%);
}

.home-body .pet-switcher button > span {
  position: relative;
  z-index: 1;
}

/* Redirect/legacy fallback routes also use the current visual language. */
body:not(.home-body):not(.profile-body) > .card {
  color: var(--color-text-primary);
  background: var(--color-surface);
  border-color: var(--color-border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
}

body:not(.home-body):not(.profile-body) > .card :where(h1, h2, h3) {
  color: var(--color-text-primary);
}

body:not(.home-body):not(.profile-body) > .card p {
  color: var(--color-text-secondary);
}

@media (hover: hover) and (pointer: fine) {
  .profile-body :where(.pet-card, .food-hub-card, .option-button):hover {
    border-color: var(--color-primary-soft);
  }
}

@media (max-width: 420px) {
  .profile-body .my-module-header {
    gap: var(--space-2xs);
    padding-inline: var(--space-xs);
  }

  .profile-body .nav-link,
  .profile-body .profile-corner-link {
    min-height: var(--control-min-size);
  }

  .profile-body .profile-panel,
  .food-body .profile-panel,
  .identification-body .identification-panel,
  .symptom-body .profile-panel {
    padding-inline: var(--space-sm);
  }

  .profile-body .detail-hero {
    display: grid;
    grid-template-columns: minmax(5rem, 6rem) minmax(0, 1fr);
    align-items: center;
    gap: var(--space-sm);
  }

  .profile-body .detail-avatar {
    width: 6rem;
    height: 6rem;
  }

  .profile-body .weight-wheels {
    grid-template-columns: minmax(4.5rem, 1fr) auto minmax(4rem, 0.8fr) 3.25rem;
    gap: var(--space-3xs);
  }
}

@media (max-width: 350px) {
  .profile-body .my-module-header {
    padding-inline: var(--space-2xs);
  }

  .profile-body .nav-link {
    padding-inline: var(--space-2xs);
  }

  .profile-body .detail-hero {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  html:focus-within {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
  }
}