body { margin: 0; padding: 1rem 1.618rem; }
h1 { margin-top: 0; }
#page { width: fit-content; }
header { text-align: right; }
#updated { margin: 0; font-family: monospace; font-size: 13.333px; color: #555; }
#buttons { font-family: monospace; margin-bottom: 1rem; }
#buttons button { font: inherit; background: none; border: 0; padding: 0; color: inherit; cursor: pointer; text-decoration: underline; }
#buttons a { color: inherit; }
#buttons #clear, #buttons #create, #buttons #selected { border: 1px solid #000; border-radius: 2px; padding: 0 0.6ch; margin: 0 0.6ch 0 0; text-decoration: none; }
#buttons #clear:hover, #buttons #create:hover, #buttons #selected:hover:enabled { background: #eee; }
#buttons #selected { background: #fff; }
#buttons #selected:disabled { color: #888; border-color: #888; background: none; cursor: default; }
#buttons #selected.on, #buttons #selected.on:hover { background: #e6e6e6; }
#buttons .spacer { display: inline-block; width: 3ch; }
#dialog { font-family: monospace; }
#dialog button, #dialog input { font: inherit; }
#dialog button.danger { background: #c00; color: #fff; border: 1px solid #900; border-radius: 2px; }
#dialog input[hidden] { display: none; }
#dialog input { display: block; box-sizing: border-box; width: 100%; margin-bottom: 1ch; }
#buttons .active { font-weight: bold; }
#dialog form { display: flex; justify-content: space-between; gap: 3ch; }
#lists .x { text-decoration: none; margin-right: 0.5ch; }
pre input[type=checkbox] { appearance: none; box-sizing: border-box; border: 1px solid #000; border-radius: 2px; background: #fff center / 100% no-repeat; width: 1.6ch; height: 1.6ch; margin: 0 0.4ch 0 0; vertical-align: -0.2ch; }
pre input[type=checkbox]:checked { background-color: #e6e6e6; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M2 5.2l2.2 2.3L8 2.8' fill='none' stroke='%23000' stroke-width='1.4'/%3E%3C/svg%3E"); }
pre { counter-reset: rad; margin-left: 3ch; }
pre label { display: block; position: relative; counter-increment: rad; }
pre label::before { content: counter(rad); position: absolute; left: -3ch; width: 2ch; text-align: right; color: #888; }
pre label:hover { background: #eee; }
body.only-selected label:not(:has(input[type=checkbox]:checked)) { display: none; }
#gear { margin-bottom: 0; }
#base-summary { margin-top: 0; margin-bottom: 0; }
#meals { margin-bottom: 0; }
#food-summary { margin-top: 0; }
.rule { display: block; overflow: hidden; white-space: nowrap; width: 0; min-width: calc(100% - 3.4ch); margin-left: 3.4ch; }
.indent { display: inline-block; width: 3.4ch; }
.count button { font: inherit; background: none; border: 0; padding: 0; margin: 0; color: inherit; cursor: pointer; }
.count input { width: 3ch; box-sizing: border-box; margin: 0; padding: 0 0.3ch; font: inherit; text-align: right; }
pre label:not(:has(input[type=checkbox]:checked)) :is(.count, .custom) { visibility: hidden; }
#food-details { position: relative; left: calc(-0.3ch - 2px); box-sizing: border-box; width: 74ch; margin: 0; padding: 0 0.3ch; font: inherit; }
#food { position: relative; left: calc(0.3ch + 1px); width: 5ch; box-sizing: border-box; margin: 0; padding: 0 0.3ch; font: inherit; text-align: right; }
a.info { color: inherit; }
#recipe-toggle { font-family: monospace; text-align: right; }
#recipe-toggle button { font: inherit; background: none; border: 0; padding: 0; color: inherit; cursor: pointer; text-decoration: underline; }
.recipe { display: none; white-space: normal; max-width: 74ch; margin: 0.3em 0 0.8em 48.4ch; padding-left: calc(1ch - 2px); border-left: 2px solid #555; }
.recipe.open { display: block; }
@media print {
    body { padding: 0; }
  a.info, #recipe-toggle { display: none; }
  pre { font-size: 10px; }
  input[type=checkbox], pre label:not(:has(input[type=checkbox]:checked)) { display: none; }
  .indent { width: 1ch; }
  pre { margin-left: 0; }
  pre label::before { display: none; }
  #buttons, #dialog { display: none; }
  .count .minus { visibility: hidden; }
  .count .plus { position: relative; color: transparent; }
  .count .plus::after { content: "x"; position: absolute; left: 0; color: #000; }
  .count input, #food, #food-details { border: 0; background: none; }
  .rule { margin-left: 1ch; min-width: calc(100% - 1ch); }
}