/* Product mappings for the approved Chef-It semantic tokens in /web/tokens.css. */
* { box-sizing: border-box; }
html { font-size: 100%; }
body {
  margin: 0;
  overflow-wrap: anywhere;
  font: var(--type-body-weight) var(--type-body-size)/var(--type-body-leading) var(--font-ui);
  background: var(--color-background);
  color: var(--color-text);
}
a { color: var(--color-primary); text-underline-offset: .2em; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible, [role="alert"]:focus { outline: var(--stroke-focus) solid var(--color-focus); outline-offset: 4px; }
::selection { color: var(--color-text); background: var(--color-selection); }
h1, h2, h3, h4 { overflow-wrap: anywhere; }
h1 { font-size: var(--type-display-size); line-height: var(--type-display-leading); font-weight: var(--type-display-weight); letter-spacing: -.025em; margin: .3em 0 .6em; }
h2 { font-size: var(--type-section-size); line-height: var(--type-section-leading); font-weight: var(--type-section-weight); }
h3 { font-size: var(--type-headline-size); line-height: var(--type-headline-leading); }
p { max-width: 72ch; }
.site-header, .household-bar, nav { padding-inline: max(var(--layout-page-gutter-compact), calc((100% - var(--layout-page-max)) / 2 + var(--layout-page-gutter-regular))); }
.site-header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-lg); padding-block: var(--space-lg); background: var(--color-surface); border-top: 4px solid var(--color-decorative-accent); border-bottom: 1px solid var(--color-separator); flex-wrap: wrap; }
.brand { display: inline-flex; align-items: center; gap: var(--space-md); min-height: var(--layout-touch-target); text-decoration: none; white-space: nowrap; }
.brand-mark { display: block; flex: 0 0 auto; }
.brand-mark img { display: block; width: 175px; height: 45px; object-fit: contain; }
.brand-wordmark { font-family: var(--font-wordmark); font-size: 1.75rem; font-weight: 700; letter-spacing: -.025em; line-height: 1.2; }
.brand-wordmark { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.brand-context { font: var(--type-caption-weight) var(--type-caption-size)/var(--type-caption-leading) var(--font-ui); color: var(--color-text-secondary); }
.account { font-size: var(--type-caption-size); color: var(--color-text-secondary); overflow-wrap: anywhere; }
.household-bar { display: flex; justify-content: space-between; align-items: center; gap: var(--space-lg); padding-block: var(--space-md); flex-wrap: wrap; }
.household-bar a { display: inline-flex; align-items: center; min-height: var(--layout-touch-target); font-size: var(--type-callout-size); }
nav { display: flex; flex-wrap: wrap; gap: var(--space-sm); border-bottom: 1px solid var(--color-separator); padding-bottom: var(--space-md); }
nav a { display: inline-flex; align-items: center; min-height: var(--layout-touch-target); padding: var(--space-sm) var(--space-md); font-size: var(--type-callout-size); font-weight: 600; border-radius: var(--radius-small); }
nav a:hover { background: var(--color-primary-subtle); }
main { max-width: var(--layout-page-max); margin: auto; padding: var(--space-4xl) var(--layout-page-gutter-regular); min-height: 70vh; }
footer { font-size: var(--type-caption-size); color: var(--color-text-muted); padding: var(--space-2xl) var(--space-3xl); text-align: center; }
.eyebrow { font-size: var(--type-caption-size); font-weight: 600; text-transform: uppercase; letter-spacing: .1em; color: var(--color-text-secondary); }
.panel { background: var(--color-surface); border: 1px solid var(--color-separator); border-radius: var(--radius-card); padding: var(--space-2xl); margin: var(--space-lg) 0; min-width: 0; }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: var(--space-lg); }
.grid .panel { margin: 0; }
.stack { display: grid; gap: var(--space-lg); }
/* Grid/flex minimum sizes must not force enlarged text beyond the viewport. */
.stack > *, .grid > *, .form-grid > *, .actions > * { min-width: 0; }
.actions { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-md); }
.actions form { margin: 0; max-width: 100%; }
.actions > a:not(.button) { display: inline-flex; align-items: center; min-height: var(--layout-touch-target); }
.field { display: flex; flex-direction: column; gap: var(--space-sm); min-width: 0; }
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: var(--space-lg); }
label, legend { font-weight: 600; overflow-wrap: anywhere; }
label:has(input[type=checkbox]), label:has(input[type=radio]) { display: inline-flex; align-items: center; gap: var(--space-sm); min-height: var(--layout-touch-target); }
.field:has(> input[type=checkbox]), .field:has(> input[type=radio]) { flex-direction: row; align-items: center; }
.field > input[type=checkbox] + label, .field > input[type=radio] + label { display: inline-flex; align-items: center; min-height: var(--layout-touch-target); }
input, select, textarea, button { font: inherit; min-width: 0; }
input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button]):not([type=hidden]), select, textarea {
  max-width: 100%; width: 100%; min-height: var(--layout-touch-target); padding: .65rem .75rem;
  border: var(--stroke-default) solid var(--color-border); border-radius: var(--radius-control);
  background: var(--color-surface); color: var(--color-text);
}
input::placeholder, textarea::placeholder { color: var(--color-text-muted); opacity: 1; }
input[type=checkbox], input[type=radio] { width: 1.25rem; height: 1.25rem; flex-shrink: 0; accent-color: var(--color-primary); }
input[aria-invalid=true], select[aria-invalid=true], textarea[aria-invalid=true] { border: var(--stroke-emphasis) solid var(--color-danger); }
textarea { min-height: 7rem; resize: vertical; }
button, input[type=submit], .button {
  display: inline-block; min-height: var(--layout-touch-target); max-width: 100%; padding: .65rem 1rem;
  border: var(--stroke-default) solid var(--color-primary); border-radius: var(--radius-control);
  background: var(--color-primary); color: var(--color-on-primary); font-weight: 600; text-align: center;
  text-decoration: none; cursor: pointer; width: auto; overflow-wrap: anywhere;
  transition: background-color var(--motion-feedback) var(--motion-easing);
}
button.secondary, input.secondary, .button.secondary { background: var(--color-surface); color: var(--color-primary); border-color: var(--color-border); }
button.danger, input[type=submit].danger, .button.danger { background: var(--color-danger-subtle); color: var(--color-danger); border-color: var(--color-danger); }
@media (hover: hover) {
  button:enabled:hover, input[type=submit]:enabled:hover, .button:hover { background: var(--color-primary-hover); border-color: var(--color-primary-hover); color: var(--color-on-primary); }
  button.secondary:enabled:hover, input.secondary:enabled:hover, .button.secondary:hover { background: var(--color-primary-subtle); color: var(--color-primary); border-color: var(--color-primary); }
  button.danger:enabled:hover, input[type=submit].danger:enabled:hover, .button.danger:hover { background: var(--color-danger-subtle); color: var(--color-danger); border-color: var(--color-danger); text-decoration: underline; }
}
button:enabled:active, input[type=submit]:enabled:active, .button:active { background: var(--color-primary-pressed); color: var(--color-on-primary); }
button.danger:enabled:active, input[type=submit].danger:enabled:active, .button.danger:active { background: var(--color-danger-subtle); color: var(--color-danger); border-color: var(--color-danger); }
button:disabled, button.secondary:disabled, input:disabled, input.secondary:disabled, select:disabled, textarea:disabled { color: var(--color-disabled-text); background: var(--color-disabled-background); border-color: var(--color-border); cursor: not-allowed; opacity: 1; }
.muted, small { color: var(--color-text-secondary); }
small, .compact { font-size: var(--type-callout-size); }
.error, .notice { padding: var(--space-lg); border-radius: var(--radius-small); overflow-wrap: anywhere; }
.error { color: var(--color-danger); border-left: 4px solid var(--color-danger); background: var(--color-danger-subtle); }
.notice { color: var(--color-success); background: var(--color-success-subtle); border-left: 4px solid var(--color-success); }
.error a, .notice a { color: inherit; }
.sign-in { max-width: 520px; margin: var(--space-4xl) auto; }
.skip-link { position: fixed; top: var(--space-lg); transform: translateY(calc(-100% - var(--space-lg) - 8px)); max-width: calc(100% - var(--space-2xl)); left: var(--space-lg); color: var(--color-text); background: var(--color-elevated); padding: var(--space-md); border: var(--stroke-default) solid var(--color-border); border-radius: var(--radius-small); z-index: 10; }
.skip-link:focus { transform: translateY(0); }
fieldset { border: var(--stroke-default) solid var(--color-border); border-radius: var(--radius-control); padding: var(--space-lg); min-width: 0; }
legend { padding: 0 var(--space-sm); }
table { border-collapse: collapse; width: 100%; }
th, td { text-align: start; padding: .65rem; border-bottom: 1px solid var(--color-separator); vertical-align: top; overflow-wrap: anywhere; }
.table-scroll { overflow-x: auto; }
.preserve { white-space: pre-wrap; overflow-wrap: anywhere; }
pre, code { white-space: pre-wrap; overflow-wrap: anywhere; max-width: 100%; }
dl { display: grid; grid-template-columns: minmax(90px, 1fr) 2fr; gap: var(--space-sm) var(--space-lg); }
dd { margin: 0; overflow-wrap: anywhere; }
details { margin: var(--space-lg) 0; }
summary { cursor: pointer; font-weight: 600; padding: var(--space-md) 0; min-height: var(--layout-touch-target); }
.ingredient-row { margin: var(--space-md) 0; font-variant-numeric: tabular-nums; }
.badge { font-size: var(--type-caption-size); border: 1px solid var(--color-border); border-radius: var(--radius-small); padding: var(--space-xs) var(--space-sm); }
.recipe-photo { width: 100%; height: auto; border-radius: var(--radius-control); }
figure { margin: 0; }
@media (max-width: 640px) {
  main { padding: var(--space-2xl) var(--layout-page-gutter-compact); }
  .panel { padding: var(--space-lg); }
  .account { display: none; }
  .site-header { padding: var(--space-md) var(--space-lg); }
  .brand-context { display: none; }
  nav { gap: var(--space-xs); }
  .actions { align-items: stretch; }
  h1 { font-size: var(--type-title-size); line-height: var(--type-title-leading); }
  .form-grid { grid-template-columns: 1fr; }
  /* Keep enlarged text available width; rem padding would grow fourfold. */
  button, input[type=submit], .button { padding-inline: var(--space-sm); }
  .sign-in { margin-block: var(--space-lg); }
}
@media (prefers-contrast: more) {
  .panel, .site-header, nav, th, td { border-color: var(--color-text); }
}
@media (forced-colors: active) {
  .brand-mark { display: none; }
  .brand-wordmark { position: static; width: auto; height: auto; overflow: visible; clip-path: none; }
  .brand, a { color: LinkText; }
  button, input[type=submit], .button, button.secondary, input.secondary, .button.secondary, .danger { color: ButtonText; background: ButtonFace; border: 2px solid ButtonText; }
  .error, .notice, .panel, fieldset { color: CanvasText; background: Canvas; border-color: CanvasText; }
  :focus-visible { outline-color: Highlight; }
}
@media print {
  :root { --color-background: white; --color-surface: white; --color-text: black; --color-text-secondary: black; --color-primary: black; --color-danger: black; --color-success: black; --color-danger-subtle: white; --color-success-subtle: white; color-scheme: light; }
  header, nav, footer, .household-bar, .actions, button, input[type=submit], .skip-link { display: none; }
  main { padding: 0; }
  .panel { break-inside: avoid; border: 0; padding: 0; }
  a { text-decoration: none; }
}