/* Legends (M, legends_sheet.rs): the tab on the book (ui.css, "The book"), its slips the views
   (All, Bounties). The left page is the realm's board as a ledger: each line a shinobi's rank, name
   over home, level and bounty in gold, those out where a grave wound awaits them marked in blood
   red. The right page is the one picked: their rank and level over their name and home, their
   bounty large in gold beside the villages it is posted in, a bounty to post on a slip, Track;
   then your hunt and the writs you carry, under hairlines. */
.legends-book {
  .coin { display: block; flex: none; width: 18px; height: 18px; filter: drop-shadow(0 1px 1px var(--sumi-shade)); }
  .tag { flex: none; font: 700 9.5px/1 var(--face); letter-spacing: 0.2em; text-transform: uppercase; color: var(--accent-on-paper); }
  .tag.tracked { color: var(--jade-ink); }
  /* Out where a grave wound awaits them: the blood red diamond. */
  .tag.hunted, .hunted-line { display: inline-flex; align-items: center; gap: 6px; color: var(--vermilion-ink);
    &::before { content: ""; flex: none; width: 6px; height: 6px; rotate: 45deg; background: currentColor; } }
  .verso .page-body > .lede { margin: 0 0 18px; }
  .verso .page-body > .note { margin: 10px 0 0; }

  /* The board: what each column holds over its lines. */
  :is(.legends-head, .legends-list > .legend) { grid-template-columns: 34px minmax(0, 1fr) 56px minmax(92px, auto); column-gap: 14px; }
  .legends-head { display: grid; padding: 0 4px 8px; font: 600 10px/1 var(--face); letter-spacing: 0.2em; text-transform: uppercase;
    color: var(--sumi-faint);
    > :first-child { text-align: center; }
    > :nth-child(n+3) { text-align: right; } }
  .ledger.legends-list > .legend { padding: 10px 4px; }
  .legend {
    .rank { font: 500 19px/1 var(--face); font-variant-numeric: tabular-nums; text-align: center; color: var(--sumi-soft); }
    /* Below the legends, wanted: a hollow diamond for a rank. */
    .rank.none::before { content: ""; display: block; width: 7px; height: 7px; margin: 0 auto; rotate: 45deg; border: 1.5px solid var(--sumi-faint); }
    .who { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
    .name { display: flex; align-items: center; gap: 9px; min-width: 0;
      b { min-width: 0; font: 600 16.5px/1.2 var(--face); color: var(--sumi); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } }
    .home { font: italic 400 13.5px/1.3 var(--face); color: var(--sumi-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .level { font: 400 14px/1 var(--face); font-variant-numeric: tabular-nums; text-align: right; color: var(--sumi-faint); }
    .bounty { display: inline-flex; align-items: center; justify-content: flex-end; gap: 7px; font-variant-numeric: tabular-nums;
      b { font: 600 17px/1 var(--face); color: var(--gold-ink); } }
  }

  /* The one picked. */
  .recto .page-body { display: flex; flex-direction: column; gap: 22px; }
  .picked { display: grid; gap: 14px;
    .kicker { margin: 4px 0 -8px; font-size: 10.5px; }
    .spread-head { margin-bottom: 0; }
    > .lede { margin: -6px 0 0; font-size: 15px; }
  }
  .wanted { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 16px 44px; }
  .figure.bounty {
    b { display: flex; align-items: center; gap: 10px; font: 300 42px/1 var(--face); font-variant-numeric: tabular-nums; color: var(--gold-ink); }
    b .coin { width: 30px; height: 30px; }
    span { margin-top: 8px; font-size: 13.5px; color: var(--sumi-faint); }
  }
  .posted { display: grid; gap: 7px; min-width: 190px; padding-top: 3px;
    .caps { font-size: 10px; }
    ul { display: grid; gap: 5px; margin: 0; padding: 0; list-style: none; }
    li { display: flex; justify-content: space-between; gap: 18px; font: 400 14.5px/1.3 var(--face); color: var(--sumi-soft); }
    li b { font-weight: 600; font-variant-numeric: tabular-nums; color: var(--gold-ink); } }
  .no-bounty { margin: 0; font: italic 400 15px/1.4 var(--face); }
  .hunted-line { margin: 0; font: 600 14px/1.3 var(--face); }

  /* A bounty to post, on a slip: the coins, the call to action with them on it, a word on the purse. */
  .slip.post { margin: 6px 0 0; padding: 18px 22px 18px;
    .post-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px; margin-top: 4px; }
    .input { flex: none; width: 104px; }
    .input input { font-variant-numeric: tabular-nums; }
    .cta .cost { display: inline-flex; align-items: center; margin-left: 4px; padding-left: 14px; border-left: 1px solid var(--on-accent-faint);
      font: 800 16px/1 var(--face); letter-spacing: 0; font-variant-numeric: tabular-nums; }
    .hint { margin: 10px 0 0; font: italic 400 13.5px/1.35 var(--face); }
    > .problem { margin: 12px 0 0; font-size: 14px; }
  }
  .track { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px;
    .why { font: italic 400 13.5px/1.3 var(--face); color: var(--sumi-faint); }
    .tracking-now { font-size: 10.5px; color: var(--jade-ink); } }

  /* Your hunt and your writs, under hairlines. */
  :is(.hunt, .writs) { display: grid; justify-items: start; gap: 8px; padding-top: 14px; border-top: 1px solid var(--sumi-line);
    > h3 { font-size: 10.5px; }
    > .muted { margin: 0; font: italic 400 14px/1.45 var(--face); }
    > .hunted-line { font-size: 13.5px; } }
  .page-body section + :is(.hunt, .writs) { margin-top: 0; }
  .tracking { margin: 0; font: 400 15px/1.45 var(--face); color: var(--sumi-soft);
    b { font-weight: 600; color: var(--sumi); } }
  .writs-list { justify-self: stretch; }
  .writs-list > .writ { grid-template-columns: minmax(0, 1fr) auto; padding: 8px 2px; font: 400 14.5px/1.35 var(--face); color: var(--sumi-soft);
    > span { display: flex; flex-wrap: wrap; align-items: center; column-gap: 6px; min-width: 0; }
    .coin { width: 15px; height: 15px; }
    b { font-weight: 600; font-variant-numeric: tabular-nums; color: var(--gold-ink); }
    .tag { color: var(--jade-ink); } }
}
/* A short view: the lines and the picked one's parts draw closer. */
@media (max-height: 800px) {
  .legends-book {
    .verso .page-body > .lede { margin-bottom: 10px; }
    .ledger.legends-list > .legend { padding: 7px 4px; }
    .recto .page-body { gap: 14px; }
    .picked { gap: 10px; }
    .figure.bounty b { font-size: 34px; }
    .figure.bounty b .coin { width: 24px; height: 24px; }
    .slip.post { padding: 14px 18px; }
  }
}