/* The recipe book, over style.css and chains.css. */

.pick[aria-current] { border-color: var(--accent); background: var(--accent-soft); }

.book-card { max-width: 980px; scroll-margin-top: 12px; }
.card-head { display: flex; align-items: center; gap: 16px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.card-head h1 { font-size: 26px; font-weight: 700; letter-spacing: -.01em; line-height: 1.15; }
.card-head .nav-link { margin-left: auto; }
.pic.big { width: 72px; height: 72px; }
.pic.big.tile { font-size: 18px; }
.card-kind { font: 11px/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--faint); margin-top: 4px; }

.book-section { margin-top: 22px; }
.book-section > h2 { margin-bottom: 10px; }
.book-section > h2 small { font-size: inherit; color: var(--accent-text); letter-spacing: .04em; margin-left: 4px; }
.use + .use { margin-top: 14px; }
.use > .subhead { margin: 0 0 6px; }
.plain { color: var(--muted); font-size: 13.5px; margin: 6px 0; }
.plain .thing { vertical-align: middle; }

.things { display: flex; flex-wrap: wrap; gap: 6px; }
.thing {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 9px 4px 6px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--panel);
  color: var(--ink);
  text-decoration: none;
  font-size: 13px;
  white-space: nowrap;
}
.thing:hover { border-color: var(--accent); }
.thing:hover span { color: var(--accent-text); }
.thing b { font: 600 12.5px var(--mono); font-variant-numeric: tabular-nums; }
.thing small { color: var(--faint); font-size: 11.5px; }
.thing.is-focus { border-color: var(--accent); background: var(--accent-soft); }
.thing.is-above { opacity: .45; }

.recipe-row { border: 1px solid var(--line); border-radius: 6px; background: var(--panel); padding: 8px 10px; }
.recipe-row + .recipe-row { margin-top: 6px; }
.recipe-io { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.recipe-io .thing { background: var(--panel-2); }
.plus { color: var(--faint); }
.arrow { color: var(--accent-text); font-weight: 700; padding: 0 4px; }
.recipe-at { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin-top: 6px; font-size: 12.5px; color: var(--muted); }
.recipe-at .thing { padding: 2px 7px 2px 4px; font-size: 12.5px; }

@media (max-width: 520px) {
  .card-head { flex-wrap: wrap; }
  .card-head .nav-link { margin-left: 0; }
  .thing { white-space: normal; }
}

.book-section .plain + .use, .book-section .things + .use { margin-top: 14px; }
details.full { margin-top: 8px; }
details.full > summary { cursor: pointer; font-size: 12.5px; color: var(--accent-text); margin-bottom: 6px; width: fit-content; }