:root {
  --font: "Atkinson Hyperlegible", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;

  font-family: var( --font );
  font-size: 16px;
  line-height: 1.4;
}

.i { --color: #648fff; }
.c { --color: #FFB000; }
.t { --color: #dc262c; }
.d { --color: #FE6100; }


* { margin: 0; padding: 0; box-sizing: border-box; }

html, body { height: 100dvh; }

body {
  display: grid;
  grid-template-rows: max-content auto;
}

header {
  color: #fff;
  background: #000a;
  padding-inline: 0.5em;
  display: grid;
  grid-template-columns: auto max-content;

  button {
    color: inherit;
    border: 0;
    background: transparent;
    place-self: center;
    font-size: 1.5em;
  }
}

main {
  overflow-y: scroll;
  padding-block: 0.5em 1.5em;
  padding-inline: 1em;

  .recipe {
    text-indent: 0;
    font-family: var( --font );
    white-space: pre-wrap;
    span { background: color-mix(in srgb, var( --color ), #fff 90% ); }
  }
}

nav {
  --size: clamp( 20ch, 50vw, 40ch );
  --left: calc( 100vw - var( --size ) );
  border: 0;
  position: fixed; top: 0; bottom: 0; left: var( --left );
  box-shadow: 0 -1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
  width: var( --size );
  height: 100%;
  overflow-y: scroll;
  background: #fff;

  &::backdrop {
    background-color: rgba(103, 103, 103, 0.5);
    backdrop-filter: blur(2px);
  }

  .current { color: blue; }
  ul, li { list-style-type: none; display: block; }
  li:hover, summary:hover { cursor: pointer; background: #f8f8f8; }

  summary { padding: 0.125em; }
  details[open] > summary { font-weight: 600; color: color-mix( in srgb, var( --ingr ), #000 30% ); }
  details li { padding: 0.125em; }

  [data-indent="0"] ul { text-indent: 0.5em }
  [data-indent="1"] ul { text-indent: 1.0em }
  [data-indent="2"] ul { text-indent: 1.5em }
  [data-indent="3"] ul { text-indent: 2.0em }
  [data-indent="4"] ul { text-indent: 2.5em }
  [data-indent="5"] ul { text-indent: 3.0em }
}