/* kcal portal parity layer — Android v1.73 functional alignment */
:root {
  --nav-width: 224px;
  --content-wide: 1120px;
  --health-fiber: #43e783;
  --health-sodium: #38bdf8;
  --health-satfat: #f59e0b;
  --health-sugar: #a78bfa;
}

.desktop-nav { display: none; }
.portal-page { padding: 0 16px 110px; }
.page-header {
  max-width: var(--content-wide); margin: 0 auto; padding: calc(18px + env(safe-area-inset-top)) 2px 16px;
  display: flex; align-items: flex-end; justify-content: space-between; gap: 18px;
}
.page-header h1 { font-size: clamp(30px, 7vw, 46px); }
.page-header p { margin: 5px 0 0; color: var(--muted); }
.eyebrow { color: var(--accent); text-transform: uppercase; letter-spacing: .12em; font-size: 11px; font-weight: 900; }
.page-header-actions { display: flex; align-items: center; gap: 7px; }

.health-targets-card {
  max-width: 620px; margin: 0 auto 16px; border: 1px solid var(--line); border-radius: 24px;
  background: var(--surface); box-shadow: var(--shadow-soft); overflow: clip;
}
.health-targets-card summary {
  list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 14px;
  cursor: pointer; padding: 16px 18px; user-select: none;
}
.health-targets-card summary::-webkit-details-marker { display: none; }
.health-targets-card summary > span:first-child { display: grid; gap: 3px; }
.health-targets-card summary b { font-family: var(--font-display); font-size: 17px; }
.health-targets-card summary small, .health-summary { color: var(--muted); font-size: 12px; }
.health-summary::after { content: "⌄"; margin-left: 7px; }
.health-targets-card[open] .health-summary::after { content: "⌃"; }
.health-targets-grid { padding: 0 16px 12px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.health-target { padding: 13px; border: 1px solid var(--line); border-radius: 17px; background: color-mix(in srgb, var(--surface-2) 74%, transparent); }
.health-target header { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.health-target header span { color: var(--muted); font-size: 12px; font-weight: 800; }
.health-target header b { font-size: 14px; font-variant-numeric: tabular-nums; }
.health-track { height: 7px; background: color-mix(in srgb, var(--muted) 16%, transparent); border-radius: 99px; margin: 10px 0 7px; overflow: hidden; }
.health-track i { display: block; width: 0; height: 100%; border-radius: inherit; background: var(--health-fiber); transition: width .3s ease; }
.health-target[data-nutrient="sodium"] .health-track i { background: var(--health-sodium); }
.health-target[data-nutrient="saturated-fat"] .health-track i { background: var(--health-satfat); }
.health-target[data-nutrient="sugar"] .health-track i { background: var(--health-sugar); }
.health-target.is-over .health-track i { background: var(--danger); }
.health-target small { color: var(--muted); font-size: 11px; line-height: 1.35; }
.health-note { margin: 0; padding: 0 18px 16px; color: var(--muted); font-size: 11px; }

.wellness-grid { max-width: 620px; margin: 0 auto 16px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.routine-card { min-width: 0; padding: 14px; border: 1px solid var(--line); border-radius: 21px; background: var(--surface); display: flex; flex-direction: column; justify-content: space-between; gap: 12px; box-shadow: var(--shadow-soft); }
.routine-card div { min-width: 0; }
.routine-card span, .routine-card small { display: block; color: var(--muted); font-size: 11px; }
.routine-card b { display: block; margin: 5px 0 3px; font-size: 14px; line-height: 1.25; overflow-wrap: anywhere; }
.routine-card .btn { width: 100%; }

.log-summary-card { max-width: var(--content-wide); margin: 0 auto 12px; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.log-summary-card > div { padding: 15px; background: var(--surface); border: 1px solid var(--line); border-radius: 19px; }
.log-summary-card span { display: block; color: var(--muted); font-size: 11px; margin-bottom: 5px; }
.log-summary-card b { font-family: var(--font-display); font-size: clamp(16px, 3vw, 22px); }
.log-quality { max-width: var(--content-wide); margin: 0 auto 14px; color: var(--muted); font-size: 12px; }
.portal-log-meals { max-width: var(--content-wide); }
.portal-log-fab { position: fixed; }

.parity-sheet h3 { margin: 22px 0 8px; font-family: var(--font-display); }
.routine-list { display: grid; gap: 9px; margin-top: 14px; }
.routine-row { padding: 13px 14px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); display: flex; justify-content: space-between; gap: 12px; align-items: center; }
.routine-row > div { min-width: 0; }
.routine-row b, .routine-row span, .routine-row small { display: block; }
.routine-row span, .routine-row small { color: var(--muted); font-size: 12px; margin-top: 3px; }
.routine-dose-buttons { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.dose-toggle { min-width: 38px; padding: 8px 10px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface-2); font-weight: 800; }
.dose-toggle.active { background: var(--accent); color: #07110b; border-color: transparent; }
.toggle-field { display: flex; gap: 10px; align-items: center; padding: 11px 13px; border-radius: 15px; border: 1px solid var(--line); }
.toggle-field input { width: 19px; height: 19px; accent-color: var(--accent); }
.challenge-content { display: grid; gap: 10px; margin: 14px 0; }
.challenge-score { display: grid; grid-template-columns: 100px 1fr; gap: 15px; align-items: center; padding: 15px; border: 1px solid var(--line); border-radius: 20px; background: var(--surface); }
.challenge-ring { --score: 0; width: 92px; aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(var(--accent) calc(var(--score) * 1%), color-mix(in srgb, var(--muted) 15%, transparent) 0); }
.challenge-ring::before { content: ""; width: 72px; aspect-ratio: 1; border-radius: inherit; background: var(--card-solid); position: absolute; }
.challenge-ring b { position: relative; z-index: 1; font-size: 25px; }
.challenge-leaderboard { border: 1px solid var(--line); border-radius: 20px; overflow: hidden; }
.challenge-member { display: grid; grid-template-columns: 28px 1fr auto; gap: 10px; padding: 11px 13px; align-items: center; background: var(--surface); }
.challenge-member + .challenge-member { border-top: 1px solid var(--line); }
.challenge-member.is-you { background: color-mix(in srgb, var(--accent) 10%, var(--surface)); }
.account-status { padding: 12px 14px; margin-top: 12px; border-radius: 15px; border: 1px solid var(--line); color: var(--muted); }
.account-export-actions { grid-template-columns: 1fr 1fr; }

/* Turn bottom sheets into usable desktop panels without changing mobile behavior. */
@media (min-width: 900px) {
  body.has-app-shell { padding-left: var(--nav-width); }
  .desktop-nav:not([hidden]) {
    display: flex; position: fixed; inset: 0 auto 0 0; width: var(--nav-width); z-index: 30; padding: 18px 12px;
    flex-direction: column; gap: 6px; background: color-mix(in srgb, var(--bg-2) 92%, transparent); border-right: 1px solid var(--line); backdrop-filter: blur(22px);
  }
  .desktop-brand { display: flex; align-items: center; gap: 10px; padding: 8px 10px 20px; font-family: var(--font-display); font-size: 24px; }
  .desktop-brand span { width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; background: var(--accent); color: #07110b; }
  .desktop-nav button { display: flex; align-items: center; gap: 11px; padding: 11px 13px; border-radius: 14px; color: var(--muted); text-align: left; }
  .desktop-nav button:hover, .desktop-nav button.active { color: var(--ink); background: var(--surface); }
  .desktop-nav button b { width: 22px; text-align: center; }
  .desktop-nav-spacer { flex: 1; }
  #bottomNav { display: none !important; }
  #viewDay .topbar, #viewDay .profile-strip, #viewDay .gauge-wrap, #viewDay .health-targets-card, #viewDay .fasting-card, #viewDay .wellness-grid, #viewDay .meals { max-width: var(--content-wide); }
  #viewDay .topbar { padding-left: 0; padding-right: 0; }
  #viewDay { padding: 0 28px 60px; }
  #viewDay .gauge-wrap { display: grid; grid-template-columns: minmax(300px, 1.2fr) minmax(280px, .8fr); gap: 20px; }
  #viewDay .gauge-numbers, #viewDay .gauge, #viewDay .macro-row { grid-column: 1; }
  #viewDay .hero-side { grid-column: 2; grid-row: 1 / span 3; align-self: center; }
  #viewDay .wellness-grid { grid-template-columns: repeat(3, 1fr); }
  #viewDay .meals, .portal-log-meals { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .meal-section { margin: 0 !important; align-self: start; }
  .fab { right: 28px; bottom: 28px; }
  .sheet { left: auto; right: 24px; bottom: 24px; width: min(620px, calc(100vw - var(--nav-width) - 48px)); max-width: 620px; max-height: calc(100dvh - 48px); border-radius: 26px; }
  .sheet.sheet-tall { max-height: calc(100dvh - 48px); }
  .sheet-backdrop { left: var(--nav-width); }
}

@media (max-width: 899px) {
  .desktop-nav { display: none !important; }
  .bottom-nav { grid-template-columns: repeat(5, 1fr) !important; }
}

@media (max-width: 680px) {
  .health-targets-grid { grid-template-columns: 1fr; }
  .wellness-grid { grid-template-columns: 1fr; margin-left: 12px; margin-right: 12px; }
  .routine-card { flex-direction: row; align-items: center; }
  .routine-card .btn { width: auto; flex: 0 0 auto; }
  .page-header { align-items: flex-start; flex-direction: column; }
  .log-summary-card { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .log-summary-card > div:first-child { grid-column: span 2; }
}

/* Landscape phones: keep controls reachable while using the wider canvas. */
@media (orientation: landscape) and (max-height: 560px) and (max-width: 980px) {
  body { padding-bottom: 62px; }
  .bottom-nav { height: 58px; padding: 4px max(12px, env(safe-area-inset-right)) calc(4px + env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left)); }
  .bottom-nav button { min-height: 46px; }
  .bottom-nav button span { font-size: 10px; }
  .topbar { position: relative; }
  #viewDay { padding: 0 12px 72px; }
  #viewDay .gauge-wrap { max-width: none; display: grid; grid-template-columns: minmax(270px, 1fr) minmax(240px, .85fr); gap: 14px; }
  #viewDay .gauge-numbers, #viewDay .gauge, #viewDay .macro-row { grid-column: 1; }
  #viewDay .hero-side { grid-column: 2; grid-row: 1 / span 3; align-self: center; }
  #viewDay .health-targets-card, #viewDay .fasting-card, #viewDay .wellness-grid, #viewDay .meals, #viewDay .profile-strip, #viewDay .topbar { max-width: none; }
  #viewDay .health-targets-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  #viewDay .wellness-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-left: 0; margin-right: 0; }
  #viewDay .routine-card { flex-direction: column; align-items: stretch; }
  #viewDay .meals, .portal-log-meals { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .sheet { width: min(680px, calc(100vw - 24px)); max-height: calc(100dvh - 20px); overflow-y: auto; }
  .page-header { flex-direction: row; align-items: flex-end; }
  .portal-page { padding-bottom: 72px; }
}

@media (max-width: 420px) {
  .health-targets-card { margin-left: 12px; margin-right: 12px; }
  .page-header-actions .btn { padding-left: 12px; padding-right: 12px; }
  .account-export-actions { grid-template-columns: 1fr; }
}

/* Progress parity: adaptive targets and weight import */
.adaptive-card,.weight-import-card{margin:12px 0;padding:16px;border:1px solid var(--line);border-radius:20px;background:var(--card)}
.adaptive-card header,.weight-import-card{display:flex;gap:12px;align-items:center;justify-content:space-between}
.adaptive-card header span,.weight-import-card span{display:block;color:var(--muted);font-size:12px;font-weight:700}
.adaptive-card header b{display:block;margin-top:3px;font-size:18px}
.adaptive-card header small{max-width:170px;text-align:right;color:var(--muted)}
.adaptive-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:14px 0}
.adaptive-stats span{padding:10px;border-radius:14px;background:var(--card2);font-size:11px;color:var(--muted)}
.adaptive-stats b{display:block;margin-top:4px;color:var(--ink);font-size:15px}
.adaptive-card p{color:var(--muted);line-height:1.45}
.weight-import-card>div{min-width:0}.weight-import-card .btn{flex:0 0 auto}.weight-import-card span{margin-top:4px;line-height:1.35}
.toggle-field span small{display:block;color:var(--muted);margin-top:3px;font-weight:500}
.challenge-ring{position:relative}
@media(max-width:520px){.adaptive-stats{grid-template-columns:1fr}.adaptive-card header,.weight-import-card{align-items:flex-start;flex-direction:column}.adaptive-card header small{text-align:left}.weight-import-card .btn{width:100%}}

/* v1.73 completion: food history, quick totals, meal builder, profile overview */
.food-search-tabs {
  display: flex; gap: 7px; overflow-x: auto; padding: 8px 2px 10px; scrollbar-width: none;
}
.food-search-tabs::-webkit-scrollbar { display: none; }
.food-search-tabs button {
  flex: 0 0 auto; min-height: 38px; padding: 8px 14px; border: 1px solid var(--line); border-radius: 999px;
  background: var(--surface-2); color: var(--muted); font-weight: 800; font-size: 12px;
}
.food-search-tabs button.active { background: #514a6c; border-color: #514a6c; color: #fff; }
.add-footer-expanded { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.add-footer-expanded .btn:last-child { grid-column: span 2; }
#mfCatalogNotesField[hidden] { display: none; }
.toggle-field.is-disabled { opacity: .52; }
.field textarea { width: 100%; resize: vertical; min-height: 78px; }
.output-field, .field output {
  display: flex; align-items: center; min-height: 44px; padding: 0 12px; border: 1px solid var(--line); border-radius: 12px;
  background: var(--surface-2); color: var(--ink); font-weight: 800;
}
.meal-builder-results, .meal-builder-ingredients { display: grid; gap: 8px; margin-top: 10px; }
.meal-builder-result {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px; text-align: left;
  padding: 11px 12px; border: 1px solid var(--line); border-radius: 15px; background: var(--surface-2); color: var(--ink);
}
.meal-builder-result span { min-width: 0; display: grid; gap: 3px; }
.meal-builder-result b { overflow-wrap: anywhere; }
.meal-builder-result small { color: var(--muted); }
.meal-builder-result strong { color: var(--accent); font-size: 22px; }
.meal-builder-ingredient {
  display: grid; grid-template-columns: minmax(0, 1fr) 112px 36px; gap: 8px; align-items: center;
  padding: 10px 11px; border: 1px solid var(--line); border-radius: 15px; background: var(--surface);
}
.meal-builder-ingredient > span { min-width: 0; overflow-wrap: anywhere; font-weight: 700; }
.meal-builder-ingredient label { position: relative; }
.meal-builder-ingredient input { width: 100%; padding-right: 28px; }
.meal-builder-ingredient i { position: absolute; right: 9px; top: 50%; transform: translateY(-50%); color: var(--muted); font-style: normal; font-size: 12px; }
.meal-builder-ingredient button { width: 34px; height: 34px; border-radius: 10px; background: color-mix(in srgb, var(--danger) 12%, transparent); color: var(--danger); font-size: 21px; }
.meal-builder-summary {
  display: grid; gap: 4px; margin: 12px 0; padding: 13px 14px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface-2);
}
.meal-builder-summary span { color: var(--muted); font-size: 12px; }
.profile-overview-head { display: flex; align-items: center; justify-content: space-between; gap: 15px; }
.profile-overview-head > b { width: 58px; height: 58px; display: grid; place-items: center; border-radius: 18px; background: var(--surface-2); font-size: 30px; }
.profile-overview-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 16px 0; }
.profile-overview-grid article { min-width: 0; padding: 14px; border: 1px solid var(--line); border-radius: 17px; background: var(--surface); }
.profile-overview-grid span, .profile-overview-grid small { display: block; color: var(--muted); font-size: 11px; }
.profile-overview-grid b { display: block; margin: 6px 0 4px; font-size: 18px; overflow-wrap: anywhere; text-transform: capitalize; }
.profile-overview-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.is-meal-entry > span { min-width: 58px; }
#portionSheet .sheet-actions { grid-template-columns: repeat(3, minmax(0, 1fr)); }

@media (max-width: 620px) {
  .profile-overview-grid, .profile-overview-actions { grid-template-columns: 1fr; }
  #portionSheet .sheet-actions { grid-template-columns: 1fr 1fr; }
  #portionSave { grid-column: span 2; }
}

@media (orientation: landscape) and (max-height: 560px) and (max-width: 980px) {
  .add-footer-expanded { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .add-footer-expanded .btn:last-child { grid-column: auto; }
  .profile-overview-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .profile-overview-actions { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  #mealBuilderSheet { width: min(820px, calc(100vw - 24px)); }
  #mealBuilderSheet .meal-builder-results { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}