:root {
    --bg:#f6f4ee;
    --card:#fff;
    --surface:#eeede5;
    --text:#192d25;
    --muted:#617168;
    --green:#245b43;
    --green-dark:#194a34;
    --selected:#e7f0e6;
    --border:#e1e4da;
    --red:#a1392c;
    --orange:#805015;
    --radius:20px;
    color-scheme:light
}
* {
    box-sizing:border-box
}
body {
    margin:0;
    background:var(--bg);
    color:var(--text);
    font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
    font-size:16px;
    line-height:1.45;
    padding-bottom:max(24px,env(safe-area-inset-bottom))
}
a {
    color:var(--green);
    text-underline-offset:3px
}
button,input,select,textarea {
    font:inherit
}
button,a,input,select,textarea,summary {
    -webkit-tap-highlight-color:transparent
}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible {
    outline:3px solid #66a180;
    outline-offset:3px
}
img {
    display:block;
    max-width:100%
}
svg {
    width:24px;
    height:24px;
    flex-shrink:0
}
h1,h2,h3,p {
    overflow-wrap:anywhere
}
h1 {
    font-size:28px;
    letter-spacing:-.035em;
    line-height:1.15;
    margin:0 0 8px;
    font-weight:750
}
h2 {
    font-size:20px;
    letter-spacing:-.02em;
    line-height:1.25;
    margin:0 0 12px
}
h3 {
    font-size:16px;
    line-height:1.3;
    margin:0
}
p {
    margin:0 0 12px
}
button,.btn {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    min-height:46px;
    border:0;
    border-radius:12px;
    padding:11px 17px;
    font-weight:650;
    text-decoration:none;
    cursor:pointer;
    line-height:1.25
}
button:disabled {
    cursor:wait;
    opacity:.55
}
.primary {
    background:var(--green);
    color:#fff
}
.primary:hover {
    background:var(--green-dark)
}
.secondary {
    background:var(--surface);
    color:var(--text)
}
.linkbtn {
    background:transparent;
    color:var(--green);
    padding:8px
}
.danger {
    color:var(--red);
    white-space:nowrap
}
.full {
    width:100%
}
.muted,.eyebrow {
    color:var(--muted);
    font-size:13px
}
.eyebrow {
    letter-spacing:.08em;
    text-transform:uppercase;
    font-weight:650
}
.number {
    font-variant-numeric:tabular-nums
}
.topbar {
    max-width:1128px;
    margin:auto;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:20px 24px;
    padding-top:max(20px,env(safe-area-inset-top));
    gap:16px
}
.brand {
    display:flex;
    align-items:center;
    gap:7px;
    color:var(--text);
    text-decoration:none;
    font-size:18px;
    font-weight:750;
    letter-spacing:-.04em
}
.brand svg {
    color:var(--green);
    width:30px;
    height:30px
}
.navlinks {
    display:flex;
    gap:4px
}
.navlinks a {
    display:flex;
    align-items:center;
    justify-content:center;
    color:var(--muted);
    text-decoration:none;
    padding:10px 12px;
    min-height:44px;
    border-radius:12px;
    font-size:14px;
    font-weight:600
}
.navlinks a.active {
    background:var(--selected);
    color:var(--green)
}
.page,.auth {
    max-width:1128px;
    margin:auto;
    padding:20px 24px 40px
}
.page.narrow {
    max-width:760px
}
.auth {
    max-width:440px;
    text-align:center;
    padding-top:8vh
}
.auth .card {
    text-align:left
}
.auth h1 {
    margin-top:16px
}
.page-head,.section-head {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    margin-bottom:20px
}
.page-head .muted {
    margin:0
}
.section-head {
    margin-top:28px;
    margin-bottom:12px
}
.section-head h2 {
    margin:0
}
.back-link {
    display:inline-flex;
    align-items:center;
    min-height:44px;
    text-decoration:none;
    font-size:14px;
    margin-bottom:8px
}
.card {
    background:var(--card);
    border:1px solid var(--border);
    border-radius:var(--radius);
    padding:20px;
    margin-bottom:16px
}
.card>p:last-child {
    margin-bottom:0
}
.banner {
    padding:14px 16px;
    border-radius:14px;
    margin:12px 0 20px;
    font-size:14px
}
.banner.ok {
    background:var(--selected);
    color:var(--green-dark)
}
.banner.err {
    background:#fceae6;
    color:var(--red)
}
.banner.review,.review-card {
    background:#fff1d9;
    color:var(--orange)
}
.review-card {
    border-color:#f0d9b5
}
.inline {
    display:inline;
    margin:0
}
.stack {
    display:flex;
    flex-direction:column;
    gap:12px
}
.row,.form-actions,.manage-row {
    display:flex;
    align-items:center;
    gap:10px;
    flex-wrap:wrap
}
.row>* {
    flex:1;
    min-width:0
}
.form-actions {
    margin-top:10px
}
.form-actions .primary {
    flex:1
}
.manage-row form {
    margin:0
}
label {
    display:block;
    font-size:14px;
    font-weight:550;
    margin:0 0 6px
}
input,select,textarea {
    width:100%;
    padding:12px;
    border:1px solid var(--border);
    border-radius:12px;
    background:#fff;
    color:var(--text);
    min-height:46px
}
label input,label textarea,label select {
    margin-top:6px
}
input[type=checkbox],input[type=radio] {
    width:auto;
    min-height:0;
    accent-color:var(--green)
}
.check {
    display:flex;
    align-items:center;
    gap:10px;
    min-height:44px
}
.check input {
    margin:0;
    width:20px;
    height:20px
}
.field-err {
    font-size:13px;
    color:var(--red);
    margin-top:4px
}
fieldset {
    border:0;
    padding:0;
    margin:0
}
legend {
    font-size:19px;
    font-weight:650;
    margin-bottom:12px
}
.form-grid {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:14px
}
.chip,.tabs a {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:40px;
    border:1px solid var(--border);
    border-radius:30px;
    background:#fff;
    color:var(--text);
    padding:8px 14px;
    text-decoration:none;
    font-size:13px;
    font-weight:600
}
.chip.active,.chip[aria-pressed=true],.tabs a.active {
    background:var(--green);
    color:#fff;
    border-color:var(--green)
}
.tabs {
    display:flex;
    gap:8px;
    margin:0 0 18px
}
.unit-choices {
    display:flex;
    gap:8px
}
.unit-choices label {
    position:relative;
    margin:0
}
.unit-choices input {
    position:absolute;
    opacity:0
}
.unit-choices span {
    display:flex;
    align-items:center;
    justify-content:center;
    border:1px solid var(--border);
    padding:10px 18px;
    border-radius:12px;
    min-height:44px
}
.unit-choices input:checked+span {
    background:var(--green);
    color:white;
    border-color:var(--green)
}
.unit-choices input:focus-visible+span {
    outline:3px solid #66a180;
    outline-offset:3px
}
.unit-choices input:disabled+span {
    opacity:.4
}
.food-grid {
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:14px
}
.food-card {
    position:relative;
    display:flex;
    flex-direction:column;
    min-width:0;
    background:var(--card);
    border:1px solid var(--border);
    border-radius:var(--radius);
    overflow:hidden;
    text-decoration:none;
    color:var(--text);
    transition:border-color .15s,transform .15s
}
.food-card:hover {
    border-color:#90b29b;
    transform:translateY(-2px)
}
.correction-context {
    display:grid;
    grid-template-columns:56px minmax(0,1fr) auto;
    align-items:center;
    gap:14px
}
.correction-context>img {
    width:56px;
    height:66px;
    border-radius:12px;
    object-fit:contain;
    background:var(--surface)
}
.correction-context h2 {
    margin-bottom:4px
}
.correction-context p {
    margin-bottom:0
}
.correction-context .eyebrow {
    margin-bottom:4px
}
.correction-context .muted {
    font-size:13px
}
.correction-amount {
    font-size:24px;
    color:var(--green);
    font-variant-numeric:tabular-nums;
    white-space:nowrap
}
.correction-choice {
    margin:0
}
.food-choice-submit {
    display:flex;
    flex-direction:column;
    align-items:stretch;
    gap:0;
    padding:0;
    width:100%;
    height:100%;
    background:transparent;
    color:var(--text);
    border-radius:inherit;
    text-align:left
}
.food-choice-submit:focus-visible {
    outline-offset:-3px
}
.food-edit-preview {
    width:100%;
    max-height:180px;
    object-fit:contain;
    background:var(--surface);
    border-radius:12px;
    margin:8px 0
}
.food-photo-fields .form-grid {
    grid-template-columns:repeat(2,minmax(0,1fr))
}
.field-hint {
    font-size:13px;
    margin:8px 0 0
}
.food-aliases p {
    white-space:pre-line;
    margin-top:6px
}
.food-card__media {
    position:relative;
    aspect-ratio:4/3;
    background:#eeefe8;
    padding:12px;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden
}
.food-card__media>img {
    width:100%;
    height:100%;
    object-fit:contain
}
.food-card__body {
    padding:14px;
    display:flex;
    flex-direction:column;
    gap:6px;
    flex:1
}
.food-card__name {
    font-size:16px;
    font-weight:700;
    line-height:1.3;
    letter-spacing:-.015em
}
.food-card__body p {
    margin:0
}
.food-card__meta {
    font-size:12px;
    color:var(--muted)
}
.food-card__footer {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:6px;
    margin-top:auto;
    padding-top:6px;
    font-size:13px;
    font-weight:650;
    color:var(--green)
}
.card-plus {
    position:absolute;
    right:10px;
    top:10px;
    width:30px;
    height:30px;
    background:white;
    border-radius:50%;
    font-size:23px;
    line-height:28px;
    text-align:center;
    color:var(--green)
}
.category-grid {
    display:grid;
    grid-template-columns:repeat(5,minmax(0,1fr));
    gap:10px;
    margin:16px 0 24px
}
.category-card {
    display:flex;
    flex-direction:column;
    gap:7px;
    justify-content:flex-start;
    border:1px solid var(--border);
    border-radius:16px;
    padding:12px 8px;
    min-width:0;
    background:#fff;
    color:var(--text);
    font-size:12px;
    text-align:center;
    font-weight:600
}
.category-card>span {
    width:100%;
    min-width:0;
    overflow-wrap:anywhere;
    hyphens:manual
}
.category-card img {
    width:64px;
    height:52px;
    object-fit:contain
}
.category-card[aria-pressed=true] {
    background:var(--selected);
    border-color:var(--green)
}
.category-card small {
    font-size:11px;
    color:var(--muted)
}
.shelf {
    margin-bottom:28px;
    scroll-margin-top:20px
}
.shelf-title {
    display:flex;
    gap:10px;
    align-items:center;
    margin-bottom:14px
}
.shelf-title img {
    width:40px;
    height:40px;
    object-fit:contain
}
.shelf-title h2 {
    margin:0
}
.shelf-title span {
    font-size:13px;
    color:var(--muted)
}
.searchbar {
    position:relative
}
.searchbar input {
    padding-left:43px;
    background:white
}
.searchbar svg {
    position:absolute;
    left:13px;
    top:13px;
    color:var(--muted);
    width:20px;
    height:20px
}
.status-badge,.badge {
    display:inline-flex;
    align-items:center;
    gap:5px;
    border-radius:7px;
    padding:4px 7px;
    font-size:11px;
    font-weight:650;
    line-height:1.2;
    width:fit-content
}
.status-badge.review,.badge.est {
    background:#fff1d9;
    color:#805015
}
.status-badge.missing {
    background:#fceae6;
    color:var(--red)
}
.status-badge.ready {
    background:var(--selected);
    color:var(--green)
}
.preparation-badge {
    position:absolute;
    bottom:8px;
    left:8px;
    right:8px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:5px;
    background:#fff5dded;
    color:#765217;
    padding:5px 7px;
    border-radius:8px;
    font-size:11px;
    font-weight:700;
    backdrop-filter:blur(5px)
}
.preparation-badge.drained {
    background:#e6f0e7ed;
    color:var(--green)
}
.preparation-badge svg {
    width:16px;
    height:16px
}
.empty-card {
    text-align:center;
    padding:32px 20px
}
.empty-card>img {
    width:112px;
    height:100px;
    object-fit:contain;
    margin:0 auto 16px
}
.empty-card h2 {
    margin-bottom:8px
}
.empty-card .btn {
    margin-top:8px
}
.totals {
    padding:22px;
    background:#fff
}
.totals-toggle {
    display:block;
    list-style:none;
    cursor:pointer
}
.totals-toggle::-webkit-details-marker {
    display:none
}
.calories-button {
    display:block;
    width:100%;
    padding:0;
    border:0;
    border-radius:0;
    background:transparent;
    color:var(--text);
    text-align:left;
    font-weight:400;
    line-height:inherit
}
.totals-toggle .calories-button .eyebrow {
    display:flex;
    justify-content:space-between;
    align-items:center
}
.calories-button[aria-expanded="true"] .kcal {
    color:var(--green)
}
.contribution-panel.calories {
    --metric:var(--green)
}
.totals-toggle:hover {
    border-color:#a6bea7
}
.totals-toggle .eyebrow,.totals-toggle .partial-note,.totals-toggle .macro-target,
.totals-toggle .bar,.totals-toggle .fill,.totals-toggle .alcohol-line {
    display:block
}
.diary-toggle-label {
    display:flex;
    align-items:center;
    gap:8px;
    border-top:1px solid var(--border);
    margin-top:18px;
    padding-top:14px;
    font-size:13px;
    font-weight:650;
    color:var(--green)
}
.diary-count {
    margin-left:auto;
    color:var(--muted);
    font-weight:400;
    white-space:nowrap
}
.diary-chevron {
    width:18px;
    height:18px
}
.today-diary .diary-label-open,.today-diary .diary-label-stats,.today-diary[open] .diary-label-closed {
    display:none
}
.today-diary[open] .diary-label-open {
    display:inline
}
.today-diary[open] .diary-chevron {
    transform:rotate(180deg)
}
.today-diary.contribution-active .diary-label-open,.today-diary.contribution-active .diary-label-closed {
    display:none
}
.today-diary.contribution-active .diary-label-stats {
    display:inline
}
.today-diary.contribution-active .diary-chevron {
    transform:none
}
.today-diary .entries {
    margin-bottom:24px
}
.today-diary .section-head {
    margin-top:0
}
.today-diary .section-head h2 {
    margin:0
}
.recent-total {
    border-color:#cbdcc9;
    background:#f5f8f2
}
.recent-total-heading {
    display:flex;
    align-items:baseline;
    justify-content:space-between;
    gap:12px
}
.recent-total-heading h3 {
    color:var(--green)
}
.recent-total-heading strong {
    font-size:24px;
    font-variant-numeric:tabular-nums
}
.recent-total-heading div>span {
    font-size:13px;
    color:var(--muted)
}
.earlier-entries-toggle {
    display:flex;
    align-items:center;
    gap:10px;
    min-height:48px;
    padding:10px 0;
    color:var(--green);
    font-size:14px;
    font-weight:650;
    cursor:pointer;
    list-style:none
}
.earlier-entries-toggle::-webkit-details-marker {
    display:none
}
.earlier-entries-toggle .muted {
    margin-left:auto;
    font-size:13px;
    font-weight:400
}
.earlier-entries-toggle svg {
    width:18px;
    height:18px
}
.earlier-entries[open]>.earlier-entries-toggle svg {
    transform:rotate(180deg)
}
.earlier-entries-list {
    padding-top:8px
}
.earlier-entries-heading {
    margin:22px 0 12px;
    color:var(--muted)
}
.daily-actions {
    margin:0 0 16px
}
.daily-action-buttons {
    display:flex;
    flex-wrap:wrap;
    gap:4px 12px
}
.meal-processing {
    display:flex;
    align-items:center;
    gap:10px;
    margin:12px 0 0;
    font-size:14px;
    color:var(--green)
}
.processing-spinner {
    width:16px;
    height:16px;
    border:2px solid #c4d6c2;
    border-top-color:var(--green);
    border-radius:50%;
    animation:processing-spin .8s linear infinite
}
@keyframes processing-spin {
    to {transform:rotate(360deg)}
}
@media(prefers-reduced-motion:reduce) {
    .processing-spinner {animation:none}
}
.contribution-open {
    grid-column:1/-1;
    display:grid;
    grid-template-columns:40px minmax(0,1fr) auto;
    gap:10px;
    align-items:center;
    color:inherit;
    text-decoration:none
}
.contribution-open:hover .contribution-name {
    text-decoration:underline
}
.saved-food-heading,.suggestion-heading {
    display:flex;
    align-items:center;
    gap:12px;
    margin-bottom:14px
}
.saved-food-heading>img {
    width:88px;
    height:96px;
    border-radius:14px;
    object-fit:contain;
    background:var(--surface)
}
.saved-food-heading h3 {
    font-size:20px
}
.saved-food-heading p {
    margin:4px 0 0
}
.saved-food-calories {
    color:var(--muted)
}
.saved-food-calories strong {
    font-size:28px;
    color:var(--text)
}
.saved-food-notes {
    margin:20px 0
}
.saved-food-notes p {
    font-size:14px;
    white-space:pre-line;
    margin-top:6px
}
.saved-food-card>.btn {
    margin-top:18px
}
.food-detail-sheet .sheet-head h2 {
    margin-right:auto
}
.food-suggestions>h2 {
    font-size:18px
}
.food-suggestions>.muted {
    font-size:14px
}
.suggestion-card {
    border-top:1px solid var(--border);
    padding-top:16px;
    margin-top:16px
}
.suggestion-heading>img {
    width:48px;
    height:54px;
    object-fit:contain;
    background:var(--surface);
    border-radius:10px
}
.suggestion-heading>div {
    flex:1;
    min-width:0
}
.suggestion-name {
    display:block;
    font-size:14px;
    font-weight:650
}
.suggestion-heading .muted {
    display:block;
    font-size:12px;
    margin-top:3px
}
.suggestion-calories {
    font-size:13px;
    white-space:nowrap
}
.suggestion-card form {
    margin-top:12px
}
.timeline-recent-grid {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:0 16px;
    align-items:start
}
.history-day {
    min-width:0
}
.history-edit-day {
    margin:0 0 20px
}
.history-closed {
    font-size:13px;
    margin:0 0 14px
}
.yesterday-notice {
    background:var(--surface);
    color:var(--text)
}
.history-day-summary {
    display:block;
    cursor:pointer;
    list-style:none
}
.history-day-summary::-webkit-details-marker,.timeline-group-heading::-webkit-details-marker {
    display:none
}
.history-day-heading {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px
}
.history-day-heading .eyebrow {
    display:block;
    margin-bottom:4px;
    font-size:10px
}
.history-date {
    display:block;
    font-size:16px
}
.history-calories {
    text-align:right;
    flex-shrink:0
}
.history-calories strong {
    display:block;
    font-size:25px;
    line-height:1.1;
    font-variant-numeric:tabular-nums
}
.history-calories>span {
    font-size:11px;
    color:var(--muted)
}
.history-day-summary>.partial-note,.history-day-summary>.alcohol-line {
    display:block
}
.history-day-toggle {
    display:flex;
    align-items:center;
    gap:8px;
    margin-top:12px;
    font-size:12px;
    font-weight:650;
    color:var(--green)
}
.history-day-toggle .muted {
    margin-left:auto;
    font-weight:400
}
.history-day-open,.history-day[open]>.history-day-summary .history-day-closed {
    display:none
}
.history-day[open]>.history-day-summary .history-day-open {
    display:inline
}
.history-day[open]>.history-day-summary .timeline-chevron,
.timeline-group[open]>.timeline-group-heading .timeline-chevron {
    transform:rotate(180deg)
}
.history-entries {
    margin-bottom:16px
}
.timeline-group {
    border:1px solid var(--border);
    border-radius:16px;
    background:var(--card);
    margin-bottom:14px;
    min-width:0
}
.timeline-group-heading {
    display:flex;
    align-items:center;
    gap:10px;
    padding:16px;
    cursor:pointer;
    list-style:none;
    min-height:54px
}
.timeline-group-heading>strong {
    font-size:16px
}
.timeline-year>.timeline-group-heading>strong {
    font-size:24px
}
.timeline-group-heading .muted {
    margin-left:auto;
    font-size:12px
}
.timeline-chevron {
    margin-left:auto;
    font-size:20px;
    line-height:1;
    color:var(--green)
}
.timeline-group-heading .muted+.timeline-chevron,.history-day-toggle .timeline-chevron {
    margin-left:0
}
.timeline-group-content {
    padding:0 12px 2px
}
.timeline-week .timeline-group-content {
    padding:0 8px 2px
}
.timeline-week .history-day-summary {
    padding:12px
}
.timeline-summary {
    margin:0 4px 14px;
    padding:12px;
    background:#f5f8f2;
    border-radius:12px
}
.timeline-summary-text {
    white-space:pre-wrap;
    font-size:14px
}
.timeline-week-note {
    margin:0 8px 10px;
    font-size:12px
}
.timeline-summary-date,.timeline-summary-hint,.timeline-summary [data-period-summary-status] {
    font-size:12px;
    margin:8px 0 0
}
.timeline-summary [data-period-summary-status]:empty {
    display:none
}
.timeline-summary button {
    min-height:40px;
    padding:8px 12px;
    font-size:13px
}
.history-pagination {
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin:24px 0
}
.history-older {
    margin-left:auto
}
.total-main {
    display:flex;
    align-items:baseline;
    flex-wrap:wrap;
    gap:8px
}
.kcal {
    font-size:42px;
    letter-spacing:-.05em;
    font-weight:750;
    line-height:1.1;
    font-variant-numeric:tabular-nums
}
.total-main .unit {
    font-size:16px;
    color:var(--muted)
}
.total-main .target {
    font-size:13px;
    color:var(--muted)
}
.macros,.metric-grid {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:10px;
    margin-top:18px
}
.macro {
    padding:12px;
    background:#f4f6ef;
    border-radius:14px;
    min-width:0
}
.macro.protein,.contribution-panel.protein {
    --metric:#357657
}
.macro.carbs,.contribution-panel.carbs {
    --metric:#805015
}
.macro.carbs {
    background:#faf5e9
}
.macro.fat,.contribution-panel.fat {
    --metric:#32637a
}
.macro.fat {
    background:#eef4f6
}
.macro-button {
    display:block;
    width:100%;
    text-align:left;
    color:var(--text);
    font-weight:400;
    line-height:1.45;
    border:1px solid transparent;
    padding:11px
}
.macro-button:hover,.macro-button[aria-expanded="true"] {
    border-color:var(--metric)
}
.macro-button[aria-expanded="true"] {
    box-shadow:inset 0 0 0 1px var(--metric)
}
.macro-label {
    display:flex;
    justify-content:space-between;
    gap:3px;
    font-size:12px;
    color:var(--metric);
    font-weight:700;
    margin-bottom:6px
}
.macro-value {
    font-size:22px;
    letter-spacing:-.03em;
    font-weight:750;
    line-height:1.2;
    font-variant-numeric:tabular-nums
}
.macro-target {
    font-size:11px;
    color:var(--muted);
    margin-top:3px
}
.macro-target>span {
    display:inline-block;
    white-space:nowrap
}
.macro-percent {
    color:var(--metric);
    font-weight:650
}
.contribution-heading {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px
}
.contribution-heading h2 {
    margin:0;
    font-size:18px;
    color:var(--metric)
}
.contribution-heading button {
    padding:0;
    min-height:32px;
    font-size:12px;
    flex-shrink:0
}
.contribution-panel>.muted {
    font-size:13px;
    margin:8px 0 12px
}
.contribution-list {
    list-style:none;
    margin:0;
    padding:0
}
.contribution-list li {
    display:grid;
    grid-template-columns:40px minmax(0,1fr) auto;
    gap:10px;
    align-items:center;
    padding:14px 0;
    border-top:1px solid var(--border)
}
.contribution-list img {
    width:40px;
    height:44px;
    border-radius:8px;
    background:var(--surface);
    object-fit:contain
}
.contribution-name {
    display:block;
    font-size:14px;
    font-weight:650;
    line-height:1.3;
    overflow-wrap:anywhere
}
.contribution-grams {
    display:block;
    color:var(--muted);
    font-size:13px;
    margin-top:3px
}
.contribution-percent {
    color:var(--metric);
    font-size:17px;
    font-variant-numeric:tabular-nums
}
.contribution-food .bar {
    margin-top:6px
}
.bar {
    height:5px;
    border-radius:6px;
    background:#dce4d9;
    overflow:hidden;
    margin-top:10px
}
.fill {
    height:100%;
    background:var(--metric,var(--green));
    border-radius:6px
}
.partial-note {
    font-size:11px;
    color:var(--orange);
    margin-top:5px
}
.alcohol-line {
    display:block;
    font-size:13px;
    background:#f1eaf1;
    color:#70446d;
    padding:10px 12px;
    border-radius:12px;
    margin-top:12px
}
.summary-row {
    margin-top:12px
}
.summary-row .linkbtn {
    font-size:13px;
    padding-left:0;
    min-height:36px
}
.summary-text {
    font-size:14px;
    margin:4px 0 0
}
.today-layout {
    display:grid;
    grid-template-columns:minmax(0,1fr) 350px;
    gap:24px
}
.today-main,.today-sidebar {
    min-width:0
}
.today-main {
    grid-column:1;
    grid-row:1
}
.today-sidebar {
    grid-column:2;
    grid-row:1
}
.today-main .food-grid {
    grid-template-columns:repeat(3,minmax(0,1fr))
}
.home-browser:not(.category-selected) .shelf .food-card:nth-child(n+4),
.home-browser.category-selected .shelf .food-card:nth-child(n+10) {
    display:none
}
.shelf-title .shelf-library {
    margin-left:auto;
    font-size:12px;
    font-weight:650;
    white-space:nowrap
}
.capture-card {
    background:var(--selected);
    border-color:#d4e2d1
}
.capture-summary {
    display:flex;
    align-items:center;
    gap:14px;
    list-style:none;
    cursor:pointer;
    min-height:56px;
    font-weight:700;
    font-size:18px
}
.capture-summary::-webkit-details-marker {
    display:none
}
.capture-summary>svg,.capture-photo-picker {
    width:44px;
    height:44px;
    min-height:44px;
    flex-shrink:0;
    background:white;
    padding:8px;
    border-radius:12px
}
.capture-photo-picker svg { width:28px; height:28px; }
.capture-photo-picker[hidden],#mealCameraIcon[hidden] { display:none; }
.capture-summary small {
    display:block;
    font-weight:400;
    font-size:13px;
    color:var(--muted);
    margin-top:3px
}
.capture-summary .expand {
    margin-left:auto;
    font-size:26px;
    font-weight:400
}
.capture {
    display:flex;
    flex-direction:column;
    gap:12px;
    margin-top:18px
}
.capture label { margin:0; }
.capture textarea { margin:0; min-height:96px; }
.meal-photo-hint,.meal-photo-status {
    font-size:12px;
    margin:0;
    overflow-wrap:anywhere
}
.meal-photo-status { color:var(--green); }
.entries h2 {
    margin-top:24px
}
.entry {
    padding:0
}
.entry-main {
    display:flex;
    gap:10px;
    align-items:center
}
.entry-image {
    width:56px;
    height:56px;
    border-radius:12px;
    background:var(--surface);
    object-fit:contain;
    padding:4px;
    flex-shrink:0
}
.entry-content {
    min-width:0;
    flex:1
}
.entry-image.is-photo { object-fit:cover; padding:0; }
.entry-image-link { display:block; flex-shrink:0; }
.entry-food-link { color:inherit; text-decoration:none; }
.entry-head {
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:8px
}
.entry-head .name {
    font-size:15px;
    font-weight:650;
    line-height:1.3;
    overflow-wrap:anywhere
}
.entry-correct-link {
    text-decoration-style:dotted;
    text-underline-offset:3px
}
.entry-body {
    font-size:13px;
    margin-top:5px;
    display:flex;
    justify-content:space-between;
    gap:8px;
    flex-wrap:wrap
}
.entry-macros {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:6px;
    margin-top:8px
}
.entry-macro {
    padding:6px;
    border-radius:8px;
    background:#f4f6ef;
    color:#357657
}
.entry-macro.carbs {
    background:#faf5e9;
    color:#805015
}
.entry-macro.fat {
    background:#eef4f6;
    color:#32637a
}
.entry-macro small,.entry-macro strong {
    display:block
}
.entry-macro small {
    font-size:11px
}
.entry-macro strong {
    font-size:18px;
    line-height:1.2;
    font-variant-numeric:tabular-nums
}
.entry .note {
    font-size:12px;
    margin:8px 0 0
}
.entry-summary {
    padding:15px;
    display:block;
    list-style:none;
    cursor:pointer
}
.entry-summary::-webkit-details-marker {
    display:none
}
.entry-chevron {
    width:18px;
    height:18px;
    color:var(--green)
}
.entry-details[open]>.entry-summary .entry-chevron {
    transform:rotate(180deg)
}
.entry-expanded {
    border-top:1px solid var(--border);
    margin:0 15px;
    padding:12px 0 15px
}
.entry-actions {
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:4px;
    padding-top:8px
}
.entry-actions form { min-width:0; }
.entry-actions .amount-edit {
    display:grid;
    grid-column:span 2;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:4px
}
.entry-actions button,.entry-actions input:not([type=hidden]) {
    width:100%;
    min-width:0;
    min-height:44px;
    font-size:12px;
    padding:8px 2px
}
.entry-actions button {
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis
}
.entry-actions input:not([type=hidden]) {
    padding:7px 4px;
    font-size:16px;
    appearance:textfield
}
.entry-actions input::-webkit-inner-spin-button,.entry-actions input::-webkit-outer-spin-button {
    -webkit-appearance:none;
    margin:0
}
.dialog-close {
    width:42px;
    min-height:42px;
    padding:8px;
    border-radius:50%;
    background:var(--surface);
    font-size:24px;
    font-weight:400;
    flex-shrink:0
}
.sheet {
    border:1px solid var(--border);
    border-radius:24px;
    background:white;
    color:var(--text);
    padding:24px;
    width:calc(100% - 32px);
    max-width:460px;
    max-height:90dvh;
    overflow-y:auto;
    box-shadow:0 18px 70px #10251c30
}
.sheet::backdrop {
    background:#13291c60;
    backdrop-filter:blur(3px)
}
.sheet-head {
    display:flex;
    gap:12px;
    align-items:center;
    margin-bottom:22px
}
.sheet-head img {
    width:70px;
    height:70px;
    object-fit:contain;
    background:var(--surface);
    border-radius:14px;
    padding:6px
}
.sheet-head div {
    flex:1;
    min-width:0
}
.sheet-head h2 {
    font-size:19px;
    margin:0
}
.sheet-head p {
    margin:5px 0 0
}
.amount-input {
    font-size:32px;
    font-weight:700;
    text-align:center;
    min-height:72px;
    letter-spacing:-.03em
}
.portion-hint {
    margin:10px 0 18px;
    font-size:13px;
    color:var(--muted)
}
.sheet .unit-choices {
    justify-content:center;
    margin:12px 0
}
.suggestion-actions {
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin-bottom:18px
}
.sheet .primary {
    width:100%
}
.detail-layout {
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    gap:24px
}
.hero-photo {
    position:relative;
    border:1px solid var(--border);
    background:var(--surface);
    border-radius:24px;
    overflow:hidden;
    min-height:280px;
    padding:24px;
    display:flex;
    justify-content:center;
    align-items:center
}
.hero-photo>img {
    height:350px;
    width:100%;
    object-fit:contain
}
.hero-photo .preparation-badge {
    font-size:14px;
    bottom:14px;
    left:14px;
    right:14px
}
.metric-grid.four {
    grid-template-columns:1fr 1fr;
    margin:0
}
.metric-tile {
    padding:16px;
    background:#f5f6f1;
    border-radius:14px
}
.metric-tile small {
    display:block;
    color:var(--muted);
    font-size:12px;
    margin-bottom:5px
}
.metric-tile strong {
    font-size:25px;
    letter-spacing:-.025em;
    font-variant-numeric:tabular-nums
}
.metric-unit {
    font-size:13px;
    color:var(--muted);
    margin-left:3px
}
.gallery,.photo-rail {
    display:flex;
    gap:12px;
    flex-wrap:wrap
}
.gallery figure,.photo-rail figure {
    margin:0;
    width:calc(50% - 6px)
}
.gallery figure>a,.photo-rail figure>a {
    display:block;
    background:var(--surface);
    border-radius:14px;
    padding:8px
}
.gallery img,.photo-rail img {
    width:100%;
    height:160px;
    object-fit:contain
}
.gallery figcaption {
    font-size:11px;
    color:var(--muted);
    padding-top:6px
}
.gallery>img {
    width:78px;
    height:78px;
    border-radius:12px;
    object-fit:contain;
    background:white
}
.photo-actions {
    display:flex;
    flex-wrap:wrap;
    gap:0
}
.photo-actions button {
    padding:6px;
    min-height:38px;
    font-size:11px
}
.photo-add {
    display:flex;
    flex-direction:column;
    gap:10px;
    margin-top:18px
}
.import-hero {
    padding:28px;
    text-align:center;
    background:#eaf0e3
}
.import-hero>img {
    width:150px;
    height:130px;
    object-fit:contain;
    margin:0 auto 16px
}
.import-hero h2 {
    font-size:25px;
    line-height:1.2;
    max-width:440px;
    margin:0 auto 10px
}
.import-hero p {
    max-width:490px;
    margin:0 auto 20px
}
.photo-buttons {
    display:flex;
    justify-content:center;
    gap:10px;
    flex-wrap:wrap
}
.photo-buttons label {
    margin:0;
    cursor:pointer
}
.file-input {
    position:absolute;
    width:1px;
    height:1px;
    min-height:0;
    opacity:0;
    padding:0;
    overflow:hidden
}
.file-input:focus-visible+label {
    outline:3px solid #66a180;
    outline-offset:3px
}
.upload-tray {
    display:grid;
    grid-template-columns:repeat(5,minmax(0,1fr));
    gap:10px;
    margin:18px 0
}
.upload-preview {
    position:relative;
    aspect-ratio:1;
    background:white;
    border:1px solid var(--border);
    border-radius:12px;
    padding:6px
}
.upload-preview img {
    height:100%;
    width:100%;
    object-fit:contain
}
.upload-preview button {
    position:absolute;
    top:-6px;
    right:-6px;
    min-height:30px;
    width:30px;
    padding:0;
    border-radius:50%;
    background:var(--text);
    color:white;
    font-size:18px
}
.import-thumbs {
    display:flex;
    gap:6px;
    flex-wrap:wrap;
    margin:10px 0
}
.import-thumbs a {
    width:48px;
    height:48px;
    background:var(--surface);
    border-radius:8px;
    overflow:hidden
}
.import-thumbs img {
    width:100%;
    height:100%;
    object-fit:contain
}
.import-nutrients {
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:5px;
    padding:9px 0
}
.import-nutrients div {
    font-size:13px;
    font-weight:650
}
.import-nutrients small {
    display:block;
    color:var(--muted);
    font-size:10px;
    font-weight:400
}
.import-history {
    display:flex;
    justify-content:space-between;
    width:100%;
    text-align:left;
    background:white;
    border:1px solid var(--border);
    padding:16px;
    margin-bottom:10px;
    border-radius:16px
}
.import-history span {
    font-size:12px;
    color:var(--muted)
}
#importBar {
    width:100%;
    height:10px;
    accent-color:var(--green);
    margin:8px 0 12px
}
progress {
    border:0;
    border-radius:10px;
    overflow:hidden
}
progress::-webkit-progress-bar {
    background:var(--surface)
}
progress::-webkit-progress-value {
    background:var(--green)
}
.category-choice-grid {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:8px
}
.category-choice {
    position:relative;
    margin:0;
    cursor:pointer
}
.category-choice input {
    position:absolute;
    opacity:0
}
.category-choice .category-card {
    height:100%;
    font-size:11px;
    padding:10px 5px
}
.category-choice input:checked+.category-card {
    border-color:var(--green);
    background:var(--selected)
}
.category-choice input:focus-visible+.category-card {
    outline:3px solid #66a180
}
.category-choice img {
    width:42px;
    height:38px
}
.auth .form-actions {
    justify-content:center
}
.auth .primary {
    width:100%
}
.logout-form {
    margin:0
}
.selection-empty {
    font-size:14px;
    padding:20px;
    background:var(--surface);
    border-radius:14px;
    text-align:center
}
[hidden] {
    display:none!important
}
@media(max-width:959px) {
    .food-grid {
        grid-template-columns:repeat(3,minmax(0,1fr))
    }
    .today-layout {
        display:flex;
        flex-direction:column;
        gap:0
    }
    .today-main {
        display:contents
    }
    .today-sidebar {
        order:-2
    }
    .today-main>.capture-card {
        order:-1
    }
    .today-main>.food-browser {
        order:0
    }
    .today-main .food-grid {
        grid-template-columns:repeat(3,minmax(0,1fr))
    }
    .today-main .category-grid {
        grid-template-columns:repeat(3,minmax(0,1fr))
    }
}
@media(max-width:767px) {
    .timeline-recent-grid {
        grid-template-columns:1fr
    }
    .timeline-group-content {
        padding-left:6px;
        padding-right:6px
    }
    .timeline-week .timeline-group-content {
        padding-left:4px;
        padding-right:4px
    }
    .food-photo-fields .form-grid {
        grid-template-columns:1fr
    }
    .page {
        padding:12px 16px 28px
    }
    .topbar {
        padding:16px;
        padding-top:max(16px,env(safe-area-inset-top));
        flex-wrap:wrap;
        row-gap:8px
    }
    .navlinks {
        margin-left:auto
    }
    .today-main .food-grid,.food-grid {
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:12px
    }
    .home-browser:not(.category-selected) .shelf .food-card:nth-child(n+3),
    .home-browser.category-selected .shelf .food-card:nth-child(n+7) {
        display:none
    }
    .today-main .category-grid,.category-grid {
        grid-template-columns:repeat(5,minmax(0,1fr));
        gap:7px
    }
    .category-card {
        font-size:10px;
        padding:9px 4px;
        gap:5px;
        border-radius:13px
    }
    .category-card img {
        width:42px;
        height:40px
    }
    .category-card small {
        display:none
    }
    .category-grid {
        margin-bottom:20px
    }
    .detail-layout {
        grid-template-columns:1fr;
        gap:16px
    }
    .hero-photo {
        min-height:240px
    }
    .hero-photo>img {
        height:280px
    }
    .card {
        padding:17px
    }
    .food-card__body {
        padding:12px
    }
    .food-card__name {
        font-size:15px
    }
    .food-card__media {
        padding:10px
    }
    .page-head {
        gap:10px
    }
    .page-head .btn {
        font-size:13px;
        padding:11px 13px;
        flex-shrink:0
    }
    h1 {
        font-size:27px
    }
    .sheet {
        margin:auto 0 0;
        width:100%;
        max-width:none;
        max-height:88dvh;
        border-radius:24px 24px 0 0;
        border-bottom:0;
        padding:22px 20px max(24px,env(safe-area-inset-bottom))
    }
    .import-hero {
        padding:23px 17px
    }
    .upload-tray {
        grid-template-columns:repeat(4,minmax(0,1fr))
    }
    .metric-tile {
        padding:14px
    }
    .section-head {
        margin-top:22px
    }
    .navlinks a {
        padding:10px;
        font-size:13px
    }
    .brand {
        font-size:17px
    }
    .brand svg {
        width:26px
    }
    .macros {
        gap:8px
    }
    .macro {
        padding:10px
    }
    .macro-value {
        font-size:23px
    }
}
@media(prefers-reduced-motion:reduce) {
    * {
        scroll-behavior:auto!important;
        transition:none!important
    }
}

/* Account screens share the app's paper, forest and illustrated food cards. */
.auth-page {
    min-height:100vh;
    min-height:100svh;
    padding:0;
    background:radial-gradient(ellipse at 50% 0,#e7eee1 0,transparent 62%),var(--bg);
}
.auth-shell {
    width:100%;
    max-width:496px;
    margin:0 auto;
    padding:clamp(28px,7vh,72px) 20px max(24px,env(safe-area-inset-bottom));
}
.auth-brand {
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    width:fit-content;
    margin:0 auto 28px;
    color:var(--text);
    font-size:23px;
    font-weight:750;
    letter-spacing:-.045em;
    text-decoration:none;
}
.auth-brand-mark {
    display:grid;
    place-items:center;
    width:44px;
    height:44px;
    border-radius:14px;
    background:var(--green);
    color:#fff;
}
.auth-brand-mark svg {
    width:31px;
    height:31px;
}
.auth-panel {
    padding:32px;
    border:1px solid var(--border);
    border-radius:26px;
    background:var(--card);
    box-shadow:0 12px 40px -20px #245b4330;
}
.auth-heading {
    margin-bottom:28px;
}
.auth-heading .auth-eyebrow {
    margin:0 0 12px;
    color:var(--green);
    font-size:11px;
    font-weight:700;
    letter-spacing:.09em;
    text-transform:uppercase;
}
.auth-heading h1 {
    margin:0 0 10px;
    font-size:31px;
    line-height:1.15;
    letter-spacing:-.045em;
    text-wrap:balance;
}
.auth-heading>p:last-child {
    margin:0;
    color:var(--muted);
    font-size:15px;
    line-height:1.55;
}
.auth-form {
    display:grid;
    gap:20px;
}
.auth-field label {
    display:block;
    margin:0 0 8px;
    color:var(--text);
    font-size:14px;
    font-weight:650;
}
.auth-field input {
    display:block;
    width:100%;
    min-height:54px;
    margin:0;
    padding:13px 14px;
    border:1px solid #ccd5cb;
    border-radius:12px;
    background:#fcfcf9;
    color:var(--text);
    font-size:16px;
    line-height:1.5;
}
.auth-field input[aria-invalid="true"] {
    border-color:var(--red);
}
.auth-field .auth-help {
    margin:8px 0 0;
    color:var(--muted);
    font-size:12px;
    line-height:1.55;
}
.auth-field .field-err {
    color:var(--red);
}
.auth-form .auth-submit {
    width:100%;
    min-height:52px;
    margin-top:4px;
    padding:14px 18px;
    border-radius:13px;
    justify-content:space-between;
    font-size:16px;
}
.auth-submit span {
    font-size:21px;
    line-height:1;
}
.auth-panel .auth-notice {
    margin:0 0 20px;
    font-size:14px;
}
.auth-switch {
    margin:26px 0 0;
    padding-top:22px;
    border-top:1px solid var(--border);
    color:var(--muted);
    text-align:center;
    font-size:13px;
    line-height:1.8;
}
.auth-switch a {
    display:inline-block;
    padding:2px;
    color:var(--green);
    font-weight:650;
}
.auth-foods {
    display:flex;
    justify-content:center;
    gap:12px;
    margin-top:22px;
}
.auth-foods img {
    width:64px;
    height:52px;
    object-fit:contain;
}
@media(max-width:479px) {
    .auth-shell {
        padding-top:max(28px,env(safe-area-inset-top));
        padding-right:20px;
        padding-left:20px;
    }
    .auth-brand {
        margin-bottom:24px;
    }
    .auth-panel {
        padding:26px 22px;
        border-radius:23px;
    }
    .auth-heading h1 {
        font-size:28px;
    }
}

.language-picker { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: 1rem; }
.language-picker form { margin: 0; }
.language-picker .chip.active { background: var(--green, #245c46); color: white; }

/* Keep navigation together; account details and sign-out live in Settings. */
.navlinks { align-items:center; }
.navlinks .nav-settings { display:flex; align-items:center; justify-content:center; width:44px; height:44px; padding:10px; flex-shrink:0; }
.nav-settings svg { width:22px; height:22px; }
.settings-account-email { overflow-wrap:anywhere; margin:0; }
.settings-disclosure-summary { display:flex; align-items:center; gap:16px; min-height:44px; cursor:pointer; list-style:none; }
.settings-disclosure-summary::-webkit-details-marker { display:none; }
.settings-disclosure-title { flex:1; min-width:0; font-size:20px; font-weight:700; }
.settings-disclosure-chevron { width:22px; height:22px; flex-shrink:0; color:var(--muted); transition:transform .15s; }
.settings-disclosure-summary:focus-visible { outline:2px solid var(--green); outline-offset:4px; border-radius:4px; }
.settings-account[open]>.settings-disclosure-summary .settings-disclosure-chevron,
.settings-preferences[open]>.settings-disclosure-summary .settings-disclosure-chevron { transform:rotate(180deg); }
.settings-disclosure-body { margin-top:20px; padding-top:20px; border-top:1px solid var(--border); }
.settings-signout { margin-top:20px; }
.settings-signout button { display:flex; align-items:center; justify-content:center; gap:10px; }
.settings-signout svg { width:22px; height:22px; }
.settings-section { padding-bottom:24px; }
.settings-preferences form>.settings-section { padding-top:24px; border-top:1px solid var(--border); }
.settings-section h3 { font-size:17px; margin-bottom:8px; }
@media (max-width:640px) {
    .topbar { display:flex; flex-wrap:nowrap; gap:8px; }
    .topbar .brand { flex-shrink:0; white-space:nowrap; font-size:16px; gap:5px; }
    .topbar .brand svg { width:24px; height:24px; flex-shrink:0; }
    .topbar .navlinks { margin-left:auto; display:flex; gap:2px; flex-shrink:0; }
    .topbar .navlinks a { text-align:center; white-space:nowrap; padding:10px 8px; font-size:13px; }
    .topbar .navlinks .nav-settings { padding:10px; }
}
@media (max-width:380px) {
    .topbar { padding-left:12px; padding-right:12px; gap:4px; }
    .topbar .brand { font-size:14px; gap:4px; }
    .topbar .brand svg { width:20px; height:20px; }
    .topbar .navlinks { gap:0; }
    .topbar .navlinks a:not(.nav-settings) { font-size:12px; padding-left:4px; padding-right:4px; }
}


@media (max-width:374px) {
    .today-main .category-grid,.category-grid { grid-template-columns:repeat(4,minmax(0,1fr)); }
}