*{box-sizing:border-box}body,ol,ul,menu,h1,h2,h3,h4,h5,h6,p,dd,figure{margin:0;padding:0}:root{font-family:sans-serif}#root{display:flex;flex-direction:column;align-items:center}#root>*{width:90ch;max-width:min(90ch,100vw)}#root>header,#root>main{padding:.5em}nav{display:flex;flex-direction:row;align-items:baseline;column-gap:2em}nav>a:first-child{font-size:1.5em}nav>ul{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:end;padding:0;margin:0;align-items:baseline;column-gap:1em}nav>ul>li{display:block}article{container:article / inline-size}section{container:section / inline-size}nav{container:nav / inline-size}ol.food.pending{position:relative}ol.food.pending:after{cursor:default;content:"";display:block;position:absolute;top:0;left:0;width:100%;height:100%;animation:loading 1s linear;background-color:hsl(0 0 50% / 30%)}@keyframes loading{0%{background-color:hsl(0 0 50% / 0%)}to{background-color:hsl(0 0 50% / 30%)}}span.amount{display:inline-flex;align-items:baseline;column-gap:.5ch}menu{display:flex;flex-direction:row;column-gap:1em}menu>li{display:block}dt{font-weight:700}dl{display:grid;grid-template-columns:auto 1fr;align-items:baseline;column-gap:.5em}table{border:solid black 2px;padding:.25em;border-radius:.5em}table tr>td:not(:last-child){padding-right:1em}table tr>th:not(:last-child){padding-right:1em}figure{display:flex;flex-direction:column;align-items:center;row-gap:.5em}figure>figcaption{font-weight:700}button,input,textarea,select{font-family:inherit;font-size:inherit}input,button,select,textarea{border:ridge black 2px}button,input{padding:.25em 1em;border-radius:100em}select{padding:.25em .5em;border-radius:.5em}select,button{cursor:pointer}input[type=time],input[type=date]{text-align:center}select,input{box-shadow:2px 2px 2px hsl(0 0 75%);margin-right:4px;margin-bottom:4px}:is(select,input):active{box-shadow:none}:is(select,input):disabled{cursor:not-allowed;box-shadow:none;background-color:hsl(0 0 90%)}button{box-shadow:2px 2px 2px hsl(0 0 75%);margin-right:4px;margin-bottom:4px}button:active{box-shadow:inset 2px 2px 2px hsl(0 0 25%)}form,fieldset{display:grid;grid-template-columns:auto 1fr;column-gap:.5em;row-gap:1em}:is(form,fieldset)>*{grid-column:1 / -1}:is(form,fieldset) label{grid-column:1}:is(form,fieldset) input,:is(form,fieldset) select,:is(form,fieldset) textarea{grid-column:2}:is(form,fieldset)>fieldset{grid-column:1 / -1}form:not(.button)>button[type=submit]{grid-column:1 / -1}@container article (width < 30rem){form:not(.button){grid-template-columns:1fr;row-gap:0}form:not(.button) input,form:not(.button) select,form:not(.button) textarea{grid-column:1}form:not(.button) label{padding-inline:1em 0}form:not(.button) label:not(:first-child),form:not(.button) fieldset,form:not(.button) button[type=submit]{margin-top:.5em}}form,form fieldset{align-items:baseline}form label,form legend{font-weight:700}form{container:form / inline-size}form.button{container:initial}form>fieldset{display:grid;grid-template-columns:auto 1fr;row-gap:.5em;column-gap:1em}@container article (width < 30rem){form>fieldset{grid-template-columns:1fr;row-gap:0}form>fieldset>label:not(:first-child){margin-top:.5em}form>fieldset>input{grid-column:1}}form:not(.button){border-radius:.5em;border:2px black groove;padding-inline:.5em;padding-block:.5em}fieldset{margin-inline:0;padding-block:.5em;padding-inline:1em;border-radius:.5em;border:2px black groove}fieldset>legend{margin-inline:1em;padding-inline:.5em}fieldset.amount{display:grid;grid-template-columns:1fr 1fr;column-gap:1em}fieldset.amount>input[type=number]{grid-column:1}fieldset.amount>select{grid-column:2}@container (width < 400px){fieldset.amount{display:flex;flex-direction:column;align-items:stretch;row-gap:.5em}}fieldset.datetime{display:grid;grid-template-areas:"date time";grid-template-columns:auto auto;column-gap:1em}fieldset.datetime>input[type=date]{grid-area:date}fieldset.datetime>input[type=time]{grid-area:time}@container (width < 375px){fieldset.datetime{grid-template-areas:"date" "time";grid-template-columns:auto}}fieldset.datetime.now{display:grid;grid-template-areas:"date time now";grid-template-columns:1fr 1fr auto}fieldset.datetime.now>button{grid-area:now}@container (width <=600px){fieldset.datetime.now{grid-template-areas:"date" "time" "now";grid-template-columns:1fr}}fieldset.duration{grid-template-columns:auto auto}fieldset.duration>input[type=number]{grid-column:1}fieldset.duration>select{grid-column:2}:root{--loading-background-color: hsl(0 0 85% / 50%);--loading-highlight-color: hsl(0 0 95% / 50%)}span.loading{width:100%;color:transparent}div.loading{min-height:3em;width:100%}div.loading,span.loading{display:inline-block;opacity:.5;border-radius:1em;background:linear-gradient(-45deg,var(--loading-background-color) 45%,var(--loading-highlight-color) 50%,var(--loading-background-color) 55%);background-size:300%;background-position-x:100%;animation:shimmer 2s infinite linear}@keyframes shimmer{0%{background-position-x:100%}to{background-position-x:0%}}figure.chart{display:flex;flex-direction:column;align-items:center}svg{border:solid black 2px}svg{width:100%;height:30em}svg path.weight{stroke-width:1;fill:none;stroke:#000}g.axis>line{stroke:hsl(0 0 75%);stroke-width:.25em}g.axis>text{font-size:1em}figure.chart path.weight{stroke:#000;stroke-width:.2em}figure.chart rect.area{stroke:none}figure.chart rect.area.period-0{fill:#ff000040}figure.chart rect.area.period-1{fill:#80ff0040}ul.strategy{list-style:none;display:flex;flex-direction:column;border:solid black 2px;border-radius:.5em;padding:.5em}ul.strategy>li{display:flex;flex-direction:row;justify-content:space-between;border-radius:.5em;padding:.5em}ul.strategy>li:nth-child(2n){background-color:hsl(0 0 90%)}ol.period.plan{list-style:none;display:flex;flex-direction:row;column-gap:1em;flex-wrap:nowrap;overflow-x:scroll;padding-bottom:1em}ol.period.plan>li{border:solid black 2px;border-radius:.5em;padding:.5em}ol.period.plan>li.current{background-color:#abffa8}ol.period.plan ul.goal{list-style:none;display:flex;flex-direction:row;flex-wrap:nowrap;column-gap:1em}ol.period.plan ul.goal>li{border:solid black 2px;border-radius:.5em;padding:.5em}ol.period.overview{list-style:none;display:flex;flex-direction:column;row-gap:.5em}ol.period.overview>li{border:solid black 2px;border-radius:.5em;padding:.5em}ul.goal{list-style:none;display:flex;flex-direction:row;flex-wrap:wrap;column-gap:1em;row-gap:1em}ul.goal>li{border:solid black 2px;border-radius:.5em;padding:.5em}ol.food{grid-column:1 / -1;display:grid;grid-template-columns:1fr 1fr auto;column-gap:1em}ol.food>li{grid-column:1 / -1;display:grid;grid-template-areas:"name  brand add";grid-template-columns:subgrid;align-items:center;padding:.5em;padding-block:.25em;border-radius:.5em}ol.food>li:nth-child(odd){background-color:hsl(0 0 95%)}ol.food>li .name{grid-area:name}ol.food>li .brand{grid-area:brand}ol.food>li button{grid-area:add}@container (width < 30rem){ol.food{grid-template-columns:1fr auto}ol.food>li{grid-template-areas:"name  add" "brand add"}}ol.log{display:grid;grid-template-columns:auto 1fr 1fr auto;border:ridge black 2px;border-radius:.5em;padding:.5em}ol.log>li{grid-column:1 / -1;display:grid;grid-template-columns:subgrid;grid-template-areas:"time name brand amount";column-gap:1em;align-items:baseline;padding:.5em;border-radius:.5em}ol.log>li:nth-child(odd){background-color:hsl(0 0 95%)}ol.log>li>a{grid-area:name}ol.log>li>span.brand{grid-area:brand}ol.log>li>time{grid-area:time}ol.log>li>span.amount{grid-area:amount;justify-self:end}@container (width < 500px){ol.log{grid-template-columns:auto 1fr auto}ol.log>li{display:grid;grid-template-areas:"time name  amount" "time brand amount";grid-template-columns:subgrid;align-items:center}}form.log section{display:grid;grid-template-columns:subgrid}form.log section>*{grid-column:1 / -1}form.log ul{display:grid;grid-template-columns:auto 1fr auto auto;row-gap:.5em}form.log ul>li{grid-column:1 / -1;display:grid;grid-template-columns:subgrid}fieldset.food{grid-column:1 / -1;display:grid;grid-template-columns:subgrid;grid-template-areas:"delete name  quantity units" "delete brand quantity units";row-gap:0;align-items:center}fieldset.food>button{grid-area:delete}fieldset.food>span.name{grid-area:name;margin-inline-end:2em}fieldset.food>span.brand{grid-area:brand}fieldset.food>input[type=number]{grid-area:quantity}fieldset.food>select{grid-area:units}@container (width < 20rem){fieldset.food{grid-template-columns:1fr auto;grid-template-areas:".        delete" "quantity quantity" "units    units"}}ol.weight{list-style:none;display:flex;flex-direction:column;flex-wrap:nowrap}ol.weight>li{display:flex;flex-direction:row;flex-wrap:nowrap;justify-content:space-between;align-items:baseline;border-radius:.25em;padding:.25em}ol.weight>li:nth-child(odd){background-color:#f2f2f2}