:root {
  font-family: system-ui, -apple-system, "Hiragino Sans", "Yu Gothic UI", sans-serif;
  color: #172d26;
  background: #f7f6ef;
  color-scheme: light;
  --green: #21443a;
  --light: #eaf1e5;
  --muted: #5d6b61;
  --line: #dedfd2;
  --paper: #fffef8;
  --peach: #f9e3ca;
  --danger: #992f23;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; min-height: 100vh; }
button, input, select { font: inherit; }
button, select { cursor: pointer; }
button { color: inherit; }
button:disabled { cursor: wait; opacity: .6; }
button, input, select, a { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 3px solid #cf8250; outline-offset: 3px; }
button { border-radius: 12px; min-height: 44px; padding: 8px 14px; font-weight: 650; }
input, select { min-height: 44px; min-width: 0; border: 1px solid #bfcabd; border-radius: 10px; padding: 8px 10px; color: #172d26; background: white; }
label { display: grid; gap: 5px; font-size: .875rem; font-weight: 650; }
h1, h2, h3, p { margin: 0; }
h1 { font-size: clamp(1.55rem, 4.5vw, 2.3rem); line-height: 1.25; letter-spacing: .015em; }
h2 { font-size: 1.26rem; line-height: 1.3; }
h3 { font-size: 1rem; }
p + p { margin-top: 8px; }
.site-header { min-height: 67px; padding: max(12px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) 12px max(16px, env(safe-area-inset-left)); display: flex; align-items: center; justify-content: space-between; gap: 10px; border-bottom: 1px solid var(--line); }
.brand { display: inline-flex; align-items: center; gap: 9px; color: var(--green); text-decoration: none; font-weight: 760; white-space: nowrap; }
.account { display: flex; justify-content: end; align-items: center; gap: 6px; min-width: 0; }
#user-name { font-size: .8rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#sign-out { flex-shrink: 0; font-size: .75rem; padding: 6px; }
main { width: min(100%, 1000px); margin: auto; padding: 22px 15px calc(95px + env(safe-area-inset-bottom)); }
.auth { width: min(calc(100% - 30px), 450px); margin: 30px auto; padding: 24px; text-align: center; }
.auth h1, .auth p { margin-bottom: 14px; }
#clerk-auth { display: grid; justify-content: center; }
#clerk-auth > * { max-width: calc(100vw - 42px); }
.eyebrow { color: #546b5c; font-size: .67rem; letter-spacing: .13em; font-weight: 800; margin: 0 0 4px; }
.day-heading, .section-head, .dialog-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.day-heading, .page-heading { margin: 0 0 14px; }
.date-nav { display: flex; align-items: center; gap: 2px; }
.date-nav button { padding: 3px; width: 29px; font-size: 1.45rem; }
.date-nav input { padding: 5px; width: 135px; font-size: .9rem; text-align: center; }
.summary { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin: 0 0 14px; }
.summary-kcal, .summary-pfc { border-radius: 16px; padding: 15px 13px; min-width: 0; }
.summary-kcal { background: var(--green); color: #fcfbf0; }
.summary-kcal .eyebrow { color: #d6e6d6; }
.summary-kcal strong { font-size: clamp(1.55rem, 5.6vw, 2.8rem); line-height: 1.1; letter-spacing: -.035em; }
.summary-kcal small { font-weight: 550; margin-inline-start: 4px; }
.summary-kcal p { margin-top: 7px; font-size: .78rem; color: #e3eddf; }
.summary-pfc { background: var(--light); }
.summary-pfc dl { margin: 3px 0 0; display: grid; grid-template-columns: auto 1fr; gap: 3px 4px; font-size: .8rem; }
.summary-pfc dd { text-align: right; margin: 0; font-weight: 730; }
.summary-pfc dd small { font-weight: 500; }
.summary-note { grid-column: 1 / -1; padding: 0 4px; color: var(--muted); font-size: .78rem; }
.daily-grid { display: grid; align-items: start; gap: 12px; }
.panel { background: var(--paper); border: 1px solid var(--line); border-radius: 16px; padding: 15px; min-width: 0; }
.section-head { margin-bottom: 12px; }
.primary { color: #fff; border: 1px solid var(--green); background: var(--green); }
.secondary { color: var(--green); border: 1px solid #afc2b1; background: #eef4ec; }
.quiet { background: transparent; color: var(--green); border: 1px solid transparent; }
.danger { border: 1px solid #e5bcb5; background: #fff4f0; color: var(--danger); }
.button-row, .actions { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; }
.actions { margin-top: 14px; }
.subheading { padding-top: 10px; font-size: .81rem; font-weight: 750; color: var(--muted); }
.record { border-top: 1px solid var(--line); margin-top: 7px; padding-top: 6px; }
.record > button { display: flex; width: 100%; text-align: left; align-items: center; justify-content: space-between; gap: 10px; border: 0; background: transparent; padding: 4px 0; }
.record > button > span:first-child { min-width: 0; overflow-wrap: anywhere; }
.record > button > span:last-child { flex-shrink: 0; color: var(--green); font-size: .83rem; }
.record small { display: block; color: var(--muted); font-size: .78rem; margin-top: 3px; font-weight: 450; }
.hint, .empty { color: var(--muted); font-size: .83rem; line-height: 1.55; }
.empty { margin-block: 6px; }
.goal-grid, .field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.goal-grid { margin-block: 14px; }
.goal-grid fieldset { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 0; min-width: 0; }
.goal-grid input { width: 100%; }
fieldset { padding: 9px; border: 1px solid var(--line); border-radius: 10px; }
legend { font-size: .83rem; font-weight: 700; }
#goals-form > label { max-width: 280px; margin-bottom: 9px; }
.navigation { position: fixed; z-index: 3; inset: auto 0 0; padding: 6px 12px calc(6px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); background: var(--paper); display: flex; justify-content: center; gap: 9px; }
.navigation button { display: grid; justify-items: center; gap: 1px; width: min(30%, 125px); color: var(--green); background: transparent; border: 1px solid transparent; padding: 3px 12px; font-size: .78rem; }
.navigation button[aria-current] { background: var(--light); border-color: #d5e1d2; }
.navigation button span { font-size: 1.18rem; line-height: 1; }
.notice { position: fixed; z-index: 4; right: 16px; bottom: calc(66px + env(safe-area-inset-bottom)); max-width: calc(100vw - 32px); border-radius: 12px; padding: 11px 14px; background: var(--green); color: white; }
.notice.error { background: var(--danger); }
dialog { width: min(calc(100vw - 22px), 650px); max-height: min(90dvh, 900px); border: 1px solid var(--line); padding: 0 14px 14px; border-radius: 17px; background: var(--paper); color: inherit; }
dialog::backdrop { background: #12271fb3; }
.dialog-head { position: sticky; top: 0; z-index: 1; background: var(--paper); padding: 8px 0; border-bottom: 1px solid var(--line); margin-bottom: 12px; }
.dialog-head button { font-size: 1.3rem; padding: 5px 12px; }
.editor-status { color: var(--danger); font-size: .85rem; margin-top: 7px; }
.editor-status:empty { margin: 0; }
.editor-stack { display: grid; gap: 10px; }
.editor-stack input, .editor-stack select { width: 100%; }
.details-card { border: 1px solid var(--line); border-radius: 12px; padding: 8px 10px; }
.details-card summary { font-weight: 650; cursor: pointer; padding: 5px 0; }
.details-card > div { margin-top: 8px; }
.search-row { display: flex; gap: 6px; align-items: end; }
.search-row > label { flex: 1; min-width: 0; }
.search-row button { flex-shrink: 0; }
.pick-list { display: grid; gap: 5px; }
.pick-list button { background: var(--light); border: 1px solid #c5d2c4; font-size: .85rem; text-align: left; padding: 7px 9px; overflow-wrap: anywhere; }
.pick-list button small { display: block; color: var(--muted); font-size: .75rem; font-weight: 450; }
.meal-item { display: grid; grid-template-columns: 1fr auto; gap: 6px; align-items: center; border-top: 1px solid var(--line); padding-top: 7px; }
.meal-item > button { text-align: left; padding-inline: 4px; }
.meal-item small { display: block; color: var(--muted); }
.photo-preview { max-width: 130px; max-height: 100px; border-radius: 8px; }
.scanner { background: #18251f; width: 100%; max-height: 220px; object-fit: contain; border-radius: 10px; }
.range { display: flex; flex-wrap: wrap; gap: 8px; align-items: end; margin-bottom: 13px; }
.trend-chart { display: block; width: 100%; max-height: 140px; margin-block: 6px; background: var(--light); border-radius: 10px; }
.history-table { width: 100%; min-width: 590px; border-collapse: collapse; font-size: .83rem; }
.history-table caption { text-align: left; font-weight: 650; padding: 8px 0; }
.history-table th, .history-table td { text-align: right; padding: 7px 5px; white-space: nowrap; border-top: 1px solid var(--line); }
.history-table th:first-child, .history-table td:first-child { text-align: left; }
.table-scroll { overflow-x: auto; }

@media (min-width: 700px) {
  main { padding-inline: 24px; }
  .daily-grid { grid-template-columns: 1.1fr 1fr; }
  .daily-grid > :first-child { grid-row: span 2; }
  .panel { padding: 19px; }
}

@media (max-width: 390px) {
  .day-heading { align-items: start; flex-direction: column; }
  .goal-grid { grid-template-columns: 1fr; }
}

@media (pointer: coarse) {
  input, select, .date-nav input { font-size: 16px; }
}