/* Profile: one list of settings, each row showing its value. Sizes follow the approved mock. */
.profile-sheet { display: block; max-width: 920px; padding: var(--space-profile-22) var(--space-profile-44) var(--space-xl); font-family: var(--font-body); }
.profile-sheet :is(h2, p, form) { margin: 0; }
.profile-sheet :is(.profile-planning-option, .profile-summary-email, .profile-row-value, .profile-exclusion, .profile-signout, .profile-language-option) { line-height: normal; }
.profile-sheet svg { display: block; flex: none; width: auto; height: auto; }

.profile-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-profile-16); padding-bottom: var(--space-profile-14); border-bottom: 1.5px solid var(--color-ink); }
.profile-sheet .profile-summary { display: flex; align-items: center; gap: var(--space-profile-14); min-width: 0; padding: 0; border: 0; background: transparent; overflow: visible; }
.profile-summary-photo { position: relative; flex: none; width: 64px; height: 64px; }
.profile-sheet .profile-summary-avatar { position: static; display: grid; place-items: center; box-sizing: border-box; width: 64px; height: 64px; margin: 0; border: 1px solid var(--color-border); border-radius: 50%; background: var(--color-cream-dark); color: var(--color-ink); font-family: var(--font-display); font-size: var(--text-profile-avatar); font-weight: var(--weight-semibold); line-height: var(--leading-profile-1); overflow: hidden; }
.profile-sheet .profile-summary-avatar img { width: 100%; height: 100%; object-fit: cover; }
.profile-sheet .profile-photo-badge { position: absolute; right: -1px; bottom: -1px; display: grid; place-items: center; box-sizing: border-box; width: 24px; height: 24px; border: 1.5px solid var(--color-ink); border-radius: 50%; background: var(--color-paper); color: var(--color-ink); cursor: pointer; }
.profile-sheet .profile-photo-badge svg { width: 13px; height: 13px; }
.profile-sheet .profile-photo-badge:has(:focus-visible) { outline: 2px solid var(--color-heeler); outline-offset: 2px; }
.profile-avatar-input { position: absolute; inset: -10px; width: 44px; height: 44px; margin: 0; opacity: 0.001; cursor: pointer; font-size: 0; }
.profile-sheet .profile-summary-copy { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-profile-2); min-width: 0; }
.profile-sheet .profile-summary-name { color: var(--color-ink); font-family: var(--font-display); font-size: var(--text-profile-24); font-weight: var(--weight-semibold); line-height: var(--leading-profile-1-15); }
.profile-sheet .profile-summary-email { color: var(--color-ink-soft); font-size: var(--text-profile-14); font-weight: var(--weight-semibold); overflow-wrap: anywhere; }
.profile-sheet .profile-avatar-remove { padding: 0; border: 0; background: none; color: var(--color-ink-soft); font-size: var(--text-profile-13); font-weight: var(--weight-bold); text-decoration: underline; cursor: pointer; }
.profile-avatar-errors { margin-top: var(--space-xs); }
.profile-account-links { display: flex; flex: none; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: var(--space-profile-16); }
.profile-account-links.profile-account-links--end { display: none; }
.profile-sheet .profile-signout-form { display: flex; margin: 0; }
.profile-sheet .profile-signout { display: inline-flex; align-items: center; gap: var(--space-profile-8); width: auto; min-height: 44px; padding: 0; border: 0; background: none; color: var(--color-ink-soft); font-family: var(--font-body); font-size: var(--text-profile-15); font-weight: var(--weight-bold); text-decoration: none; cursor: pointer; }
.profile-sheet .profile-signout svg { width: 17px; height: 17px; stroke-width: 1.75; }
.profile-save-error { margin-top: var(--space-sm) !important; color: var(--color-tomato-ink); font-weight: var(--weight-bold); }
.profile-planning-form { display: contents; }

.profile-rows { display: flex; flex-direction: column; min-width: 0; scroll-margin-top: calc(var(--space-sm) * 14); }
.profile-sheet .profile-row { position: relative; display: grid; grid-template-columns: 176px minmax(0, 1fr); align-items: center; gap: var(--space-profile-16); box-sizing: border-box; min-height: 52px; margin: 0; padding: var(--space-profile-7) 0; border: 0; border-bottom: 1px solid var(--color-border); border-radius: 0; background: transparent; }
.profile-sheet .profile-row--top { align-items: start; }
.profile-sheet .profile-row--top > .profile-row-label { padding-top: var(--space-profile-10); }
.profile-sheet .profile-row-label { display: flex; align-items: center; width: fit-content; position: relative; margin: 0; padding: 0; color: var(--color-ink); font-family: var(--font-display); font-size: var(--text-profile-16); font-weight: var(--weight-semibold); line-height: var(--leading-profile-1-25); }
.profile-sheet .profile-row-label .profile-saved { position: absolute; left: calc(100% + 8px); }
.profile-row-value { display: flex; align-items: center; justify-content: flex-end; gap: var(--space-profile-8); color: var(--color-ink); font-size: var(--text-profile-15); font-weight: var(--weight-bold); }
.profile-sheet .profile-chevron { width: 16px; height: 16px; color: var(--color-ink-faint, var(--color-ink-soft)); }
.profile-saved { color: var(--color-heeler); opacity: 0; transform: scale(0.6); transition: opacity 0.2s, transform 0.25s cubic-bezier(0.3, 0.75, 0.1, 1); }
[data-saved] .profile-saved { opacity: 1; transform: none; }
.profile-picks { display: flex; flex-wrap: wrap; gap: var(--space-profile-8); }
.app-shell .profile-sheet :is(.profile-summary, .profile-account) { border: 0; }
.app-shell .profile-sheet .profile-select { min-height: 0; border: 0; }
/* A pick, on Profile and in Plan preferences, is one rounded rectangle: the fill says whether it is on. The checkbox stays for keyboards and assistive tech. */
.app-shell :is(.profile-sheet, .plan-week-picker-preference-options) .profile-planning-option { position: relative; min-height: 44px; padding: 0 var(--space-md); border: 2px solid transparent; border-width: 2px 0; border-radius: var(--radius-profile-pick) / var(--radius-profile-14); background: var(--color-cream-dark) padding-box; color: var(--color-ink); font-size: var(--text-profile-control); font-weight: var(--weight-bold); }
.app-shell :is(.profile-sheet, .plan-week-picker-preference-options) .profile-planning-option:not(:has(input:checked)) { background: var(--color-cream-dark) padding-box; }
.app-shell :is(.profile-sheet, .plan-week-picker-preference-options) .profile-planning-option input[type="checkbox"] { position: absolute; inset: -2px 0; width: 100%; height: 44px; margin: 0; flex-basis: auto; border: 0; background: transparent; box-shadow: none; appearance: none; cursor: pointer; }
.app-shell :is(.profile-sheet, .plan-week-picker-preference-options) .profile-planning-option:has(input:checked) { border-color: transparent; background: var(--color-heeler) padding-box; color: var(--color-paper); }
@media (hover: hover) and (pointer: fine) {
  .app-shell :is(.profile-sheet, .plan-week-picker-preference-options) .profile-planning-option:not(:has(input:checked)):hover { background: var(--color-hover) padding-box; }
}
.profile-sheet .profile-picks .profile-planning-option { display: inline-flex; margin: calc(-1 * var(--space-profile-2)) 0; align-items: center; white-space: nowrap; }

/* The track is drawn at 30 by 18; the control itself is 44 tall, so the touch target is full size. */
.profile-sheet .profile-switch { position: relative; display: block; flex: none; box-sizing: border-box; width: 30px; height: 44px; min-height: 0; margin: calc(-1 * var(--space-profile-13)) 0; padding: 0; border: 0; border-radius: 0; background: transparent; appearance: none; cursor: pointer; }
.profile-switch::before { content: ""; position: absolute; top: 13px; left: 0; width: 30px; height: 18px; border-radius: var(--radius-profile-9); background: var(--color-border); transition: background-color 0.2s; }
.profile-switch::after { content: ""; position: absolute; top: 15px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: var(--color-paper); transition: transform 0.2s; }
.profile-switch:is(:checked, [aria-checked="true"])::before { background: var(--color-heeler); }
.profile-switch:is(:checked, [aria-checked="true"])::after { transform: translateX(12px); }
.profile-switch:focus-visible { outline: 2px solid var(--color-heeler); outline-offset: 2px; }
.profile-row--select .profile-select { position: absolute; inset: 0; width: 100%; height: 100%; min-height: 0; margin: 0; opacity: 0; cursor: pointer; }
.profile-row--select:has(select:focus-visible) { outline: 2px solid var(--color-heeler); outline-offset: 2px; }

.profile-exclusions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-profile-8); }
.profile-exclusions[hidden] { display: none; }
.profile-exclusion { position: relative; display: inline-flex; align-items: center; gap: var(--space-profile-6); height: 40px; padding: 0 var(--space-profile-12) 0 var(--space-profile-10); border-radius: var(--radius-profile-12); background: var(--color-cream-dark); font-size: var(--text-profile-15); font-weight: var(--weight-bold); white-space: nowrap; cursor: pointer; }
.profile-exclusion:has(:focus-visible) { outline: 2px solid var(--color-heeler); outline-offset: 2px; }
.profile-exclusion:has(input:not(:checked)) { opacity: 0.4; }
.profile-exclusion-art, .profile-tile-art { flex: none; object-fit: contain; image-rendering: pixelated; }
/* The box is drawn at 40px; the field inside reaches 44px, so the touch target is full size. */
.profile-sheet .profile-exclusion-add { position: relative; display: block; flex: none; box-sizing: border-box; width: 132px; height: var(--space-profile-pick); border: 1.5px solid var(--color-ink); border-radius: var(--radius-profile-12); background: var(--color-paper); }
.profile-sheet .profile-exclusion-add input { letter-spacing: inherit; position: absolute; top: -3.5px; left: 0; box-sizing: border-box; width: 100%; height: 44px; min-height: 0; margin: 0; padding: 0 var(--space-profile-12); border: 0; border-radius: 0; background: transparent; box-shadow: none; color: var(--color-ink); font-family: var(--font-body); font-size: var(--text-profile-15); font-weight: var(--weight-semibold); outline: 0; }
.profile-sheet .profile-exclusion-add input::placeholder { color: var(--color-ink-soft); opacity: 1; }
.profile-sheet .profile-exclusion-add:focus-within { border-color: var(--color-heeler); outline: 2px solid var(--color-heeler); outline-offset: -1px; }
.profile-cover-input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; border: 0; border-radius: inherit; background: transparent; appearance: none; cursor: pointer; }
.profile-exclusion-note { grid-column: 2; margin-top: var(--space-profile-6) !important; color: var(--color-ink-soft); font-size: var(--text-profile-13); }
.profile-exclusion-note .profile-text-action { margin-left: var(--space-profile-6); padding: 0; border: 0; background: none; font-size: var(--text-profile-13); font-weight: var(--weight-bold); text-decoration: underline; cursor: pointer; }

.profile-language-picker { padding: var(--space-profile-4) 0 var(--space-profile-10); border-bottom: 1px solid var(--color-border); }
.profile-disclosure > summary { list-style: none; cursor: pointer; }
.profile-disclosure > summary::-webkit-details-marker { display: none; }
.profile-disclosure > summary .profile-chevron { transition: transform 0.2s; }
.profile-disclosure[open] > summary .profile-chevron { transform: rotate(90deg); }
.profile-disclosure > summary:focus-visible { outline: 2px solid var(--color-heeler); outline-offset: 2px; }
.profile-language-search { margin: 0 0 var(--space-profile-4); }
.profile-language-search[hidden], .profile-language-list > li[hidden], .profile-language-empty[hidden] { display: none; }
.profile-sheet .profile-language-search-field { position: relative; display: flex; align-items: center; }
.profile-sheet .profile-language-search-icon { position: absolute; left: 12px; color: var(--color-ink-soft); }
.profile-sheet .profile-language-search-input { box-sizing: border-box; width: 100%; height: 44px; min-height: 0; margin: 0; padding: 0 var(--space-profile-12) 0 var(--space-profile-36); border: 1.5px solid var(--color-heeler); border-radius: var(--radius-profile-12); background: var(--color-paper); color: var(--color-ink); font-family: var(--font-body); font-size: var(--text-profile-15); font-weight: var(--weight-semibold); }
.profile-sheet .profile-language-search-input::placeholder { color: var(--color-ink-soft); opacity: 1; }
.profile-sheet .profile-language-list { display: block; height: 220px; margin: 0; padding: 0; overflow-y: auto; border: 0; border-radius: 0; background: transparent; list-style: none; }
.profile-sheet .profile-language-option { display: flex; align-items: center; gap: var(--space-profile-10); box-sizing: border-box; width: 100%; height: 44px; min-height: 0; padding: 0 var(--space-profile-12); border: 0; border-radius: var(--radius-profile-10); background: transparent; color: var(--color-ink); font-family: var(--font-body); font-size: var(--text-profile-15); font-weight: var(--weight-regular); text-align: start; cursor: pointer; }
.profile-sheet .profile-language-option[aria-current="true"] { background: color-mix(in srgb, var(--color-heeler) 12%, var(--color-paper)); }
.profile-sheet .profile-language-native { color: var(--color-ink); font-size: var(--text-profile-15); font-weight: var(--weight-extrabold); }
.profile-sheet .profile-language-english { color: var(--color-ink-soft); font-size: var(--text-profile-14); font-weight: var(--weight-semibold); }
.profile-sheet .profile-language-check { margin-left: auto; color: var(--color-heeler); }
.profile-language-form { position: relative; }
.profile-sheet .profile-language-empty { position: absolute; top: 0; left: 0; padding: var(--space-sm); color: var(--color-ink-soft); }
.profile-calendar-disclosure > summary { list-style: none; cursor: pointer; }
.profile-sheet .profile-pane--calendar { margin: 0; padding: 0; border: 0; }
.profile-sheet .profile-calendar-disclosure > summary.profile-row { display: grid; min-height: 52px; gap: var(--space-profile-16); }
.profile-sheet .profile-calendar-setup { color: var(--color-ink); text-decoration: none; }
.profile-sheet .profile-calendar-disclosure[open] > summary .profile-chevron { transform: rotate(90deg); }
.profile-sheet .profile-calendar-card { margin: var(--space-profile-8) 0; }

/* With enough ingredients, Never suggest becomes the shelf. */
.profile-rows--shelf { padding-top: var(--space-profile-16); }
.profile-sheet .profile-rows--shelf :is(.profile-row--diet, .profile-row--shelf) { margin-bottom: var(--space-profile-14); }
.profile-rows--shelf .profile-row { padding: 0; }
.profile-sheet .profile-rows--shelf .profile-row--diet,
.profile-sheet .profile-rows--shelf .profile-row--shelf { display: block; min-height: 0; border: 0; }
.profile-sheet .profile-rows--shelf .profile-row--shelf > .profile-row-label { display: flex; padding: 0 0 var(--space-profile-8); }
.profile-sheet .profile-rows--shelf .profile-row--effort { display: flex; align-items: center; gap: var(--space-profile-16); min-height: 0; padding-bottom: var(--space-profile-14); }
.profile-sheet .profile-rows--shelf .profile-row--effort > .profile-row-label { padding: 0; }
.profile-sheet .profile-rows--shelf :is(#ingredient-amounts, .profile-row--select), .profile-sheet .profile-rows--shelf > .profile-row:not(.profile-row--top), .profile-sheet .profile-rows--shelf .profile-language .profile-row, .profile-sheet .profile-rows--shelf .profile-pane--calendar .profile-row { padding: var(--space-profile-7) 0; }
.profile-shelf { display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: var(--space-profile-8); }
.profile-tile { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-profile-3); box-sizing: border-box; height: 92px; min-width: 0; padding: 0 var(--space-profile-2); border-radius: var(--radius-profile-14); background: var(--color-cream-dark); color: var(--color-ink); cursor: pointer; transition: background-color 0.25s, transform 0.12s; transition-delay: var(--tile-delay, 0ms); }
.profile-tile:active { transform: scale(0.96); }
.profile-tile:has(:focus-visible) { outline: 2px solid var(--color-heeler); outline-offset: 2px; }
.profile-tile-art { width: 44px; height: 44px; transition: opacity 0.25s, filter 0.25s; transition-delay: var(--tile-delay, 0ms); }
.profile-tile-name { max-width: 100%; overflow: hidden; font-size: var(--text-profile-12-5); font-weight: var(--weight-bold); line-height: var(--leading-profile-1-25); text-align: center; text-overflow: ellipsis; white-space: nowrap; transition: color 0.25s; transition-delay: var(--tile-delay, 0ms); }
.profile-tile-mark { position: absolute; top: 6px; right: 6px; box-sizing: content-box; padding: var(--space-profile-3); border-radius: 50%; background: var(--color-ink); color: var(--color-paper); opacity: 0; transform: scale(0.5); transition: opacity 0.18s, transform 0.28s cubic-bezier(0.3, 0.75, 0.1, 1); transition-delay: var(--tile-delay, 0ms); }
.profile-tile:is(:has(input:checked), [data-diet-off]) { background: var(--color-cream); outline: 1px solid var(--color-border); outline-offset: -1px; }
.profile-tile:is(:has(input:checked), [data-diet-off]) .profile-tile-art { opacity: 0.32; filter: grayscale(1); }
.profile-tile:is(:has(input:checked), [data-diet-off]) .profile-tile-name { color: var(--color-ink-soft); }
.profile-tile:is(:has(input:checked), [data-diet-off]) .profile-tile-mark { opacity: 1; transform: none; }
.profile-tile[data-diet-off]:not(:has(input:checked)) { pointer-events: none; }
.profile-tile-add-group { position: relative; }
.profile-tile--add { border: 1.5px solid var(--color-ink); background: transparent; list-style: none; }
.profile-tile--add::-webkit-details-marker { display: none; }
.profile-exclusion-add-row { position: absolute; top: calc(100% + 8px); right: 0; z-index: 1; padding: var(--space-profile-8); border: var(--line); border-radius: var(--radius-profile-14); background: var(--color-paper); }
.profile-rows--shelf .profile-exclusions { margin-top: var(--space-profile-8); }

@media (max-width: 639px) {
  .profile-sheet { letter-spacing: var(--tracking-profile-phone); padding: var(--space-profile-4) var(--space-profile-18) var(--space-xl); }
  .profile-head { padding-bottom: var(--space-profile-8); border-bottom: 0; }
  .profile-summary-photo, .profile-sheet .profile-summary-avatar { width: 56px; height: 56px; }
  .profile-sheet .profile-summary-avatar { font-size: var(--text-profile-avatar-phone); }
  .profile-sheet .profile-photo-badge { width: 21px; height: 21px; }
  .profile-sheet .profile-photo-badge svg { width: 12px; height: 12px; }
  .profile-head .profile-account-links { display: none; }
  .profile-account-links.profile-account-links--end { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-profile-18); padding: var(--space-profile-20) 0 var(--space-profile-8); }
  .profile-sheet .profile-row--top { grid-template-columns: minmax(0, 1fr); gap: var(--space-profile-8); }
  .profile-sheet .profile-row--top > .profile-row-label { padding-top: 0; }
  .profile-sheet .profile-row:not(.profile-row--top) { grid-template-columns: minmax(0, 1fr) auto; }
  .profile-exclusion-note { grid-column: 1; }
  .profile-shelf { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-profile-6); }
  .profile-tile { height: 80px; }
  .profile-tile-art { width: 38px; height: 38px; }
  .profile-rows--shelf { padding-top: 0; }
  .profile-sheet .profile-rows--shelf :is(.profile-row--diet, .profile-row--shelf) { margin-bottom: var(--space-profile-12); }
  .profile-sheet .profile-rows--shelf .profile-row--effort { flex-direction: column; align-items: flex-start; gap: var(--space-profile-8); padding-bottom: var(--space-profile-12); }
  .profile-shelf > .profile-tile:nth-child(n+16):not(:has(input:checked)) { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .profile-sheet :is(.profile-saved, .profile-switch::before, .profile-switch::after, .profile-tile, .profile-tile-art, .profile-tile-name, .profile-tile-mark, .profile-chevron) { transition: none; transition-delay: 0ms; }
}