/* Shinobi and Scrolls (M, character_sheet.rs): one book, its slips Kit and Scrolls. A page's
   body leaves room round its slots for their seals and rings. */
.character .book-body {
  .page-body { padding: 2px 6px 8px 2px; margin-right: -6px; }
  .washi .lede { margin-top: 6px; }
  .caps { font-size: 10.5px; }

  /* A skill's level, short of: "LV 20" in the problem's ink. */
  .lv { position: absolute; right: 4px; bottom: 4px; font: 700 10px/1 var(--face); letter-spacing: 0.06em;
    color: var(--vermilion-ink); }

}

/* ---- Shinobi: your level, the kit board and the skills you know; the skill chosen, or your ink. */
.character .kit-book {
  .page-body > * + * { margin-top: 26px; }
  .level {
    display: flex; align-items: flex-end; gap: 26px;
    .figure b { font-size: 46px; }
    .figure span { margin-top: 4px; font-size: 10.5px; font-weight: 600; letter-spacing: 0.24em; text-transform: uppercase; }
  }
  .to-next {
    flex: 1; min-width: 0; max-width: 340px; padding-bottom: 6px;
    .meter { margin-bottom: 9px; }
    p { margin: 0; font: 400 14px/1.3 var(--face); color: var(--sumi-faint); font-variant-numeric: tabular-nums; }
    .xp b { font-weight: 600; color: var(--gold-ink); }
  }

  /* The board: a row's name over its slots, a column a key. */
  .kit-board {
    display: grid; grid-template-columns: repeat(var(--keys), minmax(0, 74px)); gap: 6px 8px; align-items: start;
    .layer { grid-column: 1 / -1; margin-bottom: 6px; }
    .layer.field { margin-top: 8px; }
  }
  .slot { display: grid; justify-items: center; gap: 7px; min-width: 0; }
  .slot-name { max-width: 100%; min-height: 2.4em; font: 500 11.5px/1.2 var(--face); color: var(--sumi-soft); text-align: center;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }

  /* The skills you know: the search beside their name, a row of small pictures a group. */
  .known { display: grid; gap: 10px; padding-top: 16px; border-top: 1px solid var(--sumi-line); }
  .known-head { display: flex; align-items: center; justify-content: space-between; gap: 18px;
    .find { display: flex; align-items: center; gap: 10px; width: min(250px, 55%); }
    .find label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
    .find .input { flex: 1; }
  }
  .group { display: grid; grid-template-columns: 86px minmax(0, 1fr); align-items: start; gap: 10px;
    > .caps { padding-top: 13px; } }
  .minis { display: flex; flex-wrap: wrap; gap: 7px; }

  /* The skill's page: its picture in an ensō, where it is, its name and tags; what it does. */
  .recto .page-body > * + * { margin-top: 20px; }
  .skill-head {
    display: flex; align-items: center; gap: 24px;
    h2 { font-size: 34px; }
    .where { margin: 0 0 6px; }
    .where.on { color: var(--accent-on-paper); }
  }
  .about { margin: 0; font: 400 14.5px/1.6 var(--face); color: var(--sumi-soft); }
  .tags { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 9px 0 0;
    span { font: 600 10.5px/1 var(--face); letter-spacing: 0.2em; text-transform: uppercase; }
    span:not([class]) { color: var(--sumi-faint); } }
  .facts { gap: 0; border-bottom: 1px solid var(--sumi-line);
    dt, dd { padding: 9px 0; border-top: 1px solid var(--sumi-line); font: 400 14px/1.3 var(--face); }
    dd { font-weight: 600; color: var(--sumi); } }
  .put-on { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px;
    .caps { margin-right: 6px; } }
  .key-pick {
    padding: 2px; border: 0; background: none; cursor: pointer; opacity: 0.55;
    kbd { cursor: pointer; }
    &:hover { opacity: 0.85; }
    &.on { opacity: 1; box-shadow: 0 2px 0 var(--accent-on-paper); }
    &:focus-visible { outline: 1px solid var(--accent-on-paper); outline-offset: 3px; }
  }
  .actions { gap: 12px 28px; }

  /* The others that could take its slot: a picture and a name each. */
  .others { display: grid; gap: 12px; padding-top: 16px; border-top: 1px solid var(--sumi-line); }
  .other-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 6px 14px; }
  .other {
    position: relative; display: flex; align-items: center; gap: 10px; min-width: 0; padding: 4px 6px 4px 4px; border: 0; border-radius: 3px;
    background: none; cursor: pointer; text-align: left;
    img { flex: none; width: 34px; height: 34px; padding: 4px; border-radius: 3px; background: var(--sumi-wash);
      box-shadow: inset 0 0 0 1px var(--sumi-line); }
    span:not(.lv) { min-width: 0; font: 500 14px/1.2 var(--face); color: var(--sumi); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    kbd { margin-left: auto; flex: none; }
    .lv { position: static; flex: none; margin-left: auto; }
    kbd + .lv { margin-left: 0; }
    &.proto img { filter: grayscale(0.6); opacity: 0.75; }
    &:hover { background: var(--sumi-wash); }
    &.fits img { box-shadow: inset 0 0 0 1.5px var(--accent-on-paper); }
    &:focus-visible { outline: 1px solid var(--accent-on-paper); outline-offset: 1px; }
  }

  /* Your ink: carried and kept, the trophies a ledger, Give ink on a slip of its own. */
  .ink-ledger {
    display: grid; gap: 18px;
    .figures { gap: 14px 56px; }
    .aside { margin: -6px 0 0; font: italic 400 13.5px/1.35 var(--face); }
    .trophies { display: grid; gap: 8px;
      .ledger { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); column-gap: 22px; }
      li { grid-template-columns: minmax(0, 1fr) auto; padding: 8px 2px; font: 400 14.5px/1.3 var(--face); color: var(--sumi-soft); }
      li b { font-weight: 600; color: var(--sumi); font-variant-numeric: tabular-nums; }
      li.none, li.none b { color: var(--sumi-faint); font-weight: 400; } }
    .hint { margin: 0; font: italic 400 14px/1.4 var(--face); }
    .give { margin: 10px 4px 22px; justify-self: start; min-width: min(380px, 100%);
      .give-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-top: 6px; }
      .input { flex: none; width: 72px; }
      .to { display: flex; flex-wrap: wrap; gap: 4px 16px; } }
  }
  /* Your materials (materials_sheet.rs): what you carry, in harm's ink (at stake wherever you are
     beaten), each lot a line of a ledger (the one chosen to offer picked out), Offer on a slip as
     Give ink is, your offer standing with Withdraw, and the offers made to you with Accept. */
  .cargo-ledger {
    display: grid; gap: 16px; padding-top: 16px; border-top: 1px solid var(--sumi-line);
    .figure.at-stake b { color: var(--vermilion-ink); }
    .aside { margin: -6px 0 0; font: italic 400 13.5px/1.35 var(--face); }
    .hint { margin: 0; font: italic 400 14px/1.4 var(--face); }
    .lots > .lot-line { grid-template-columns: minmax(0, 1fr) auto; }
    .who { display: flex; flex-direction: column; gap: 4px; min-width: 0;
      b { font: 600 15.5px/1.2 var(--face); color: var(--sumi); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
      small { font: italic 400 13px/1.3 var(--face); color: var(--sumi-faint); } }
    .amount { font: 400 20px/1 var(--face); font-variant-numeric: tabular-nums; color: var(--sumi); }
    .offer { margin: 6px 4px 6px; justify-self: start; min-width: min(420px, 100%);
      .give-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-top: 6px; }
      .input { flex: none; width: 72px; }
      .for { font: italic 400 14px/1 var(--face); color: var(--sumi-faint); }
      .art.coin { width: 20px; height: 20px; }
      .to { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-left: 6px; } }
    .price { display: inline-flex; align-items: center; gap: 6px; vertical-align: -3px;
      .art.coin { width: 18px; height: 18px; filter: drop-shadow(0 1px 1px var(--sumi-shade)); }
      b { font: 600 16px/1 var(--face); color: var(--gold-ink); font-variant-numeric: tabular-nums; }
      &.short b { color: var(--vermilion-ink); } }
    .standing { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px;
      p { margin: 0; font: 400 14.5px/1.4 var(--face); color: var(--sumi-soft); }
      p small { color: var(--sumi-faint); }
      b { color: var(--sumi); } }
    .offered { display: grid; gap: 8px;
      h3 { margin: 0; }
      .offer-line { grid-template-columns: minmax(0, 1fr) auto; gap: 6px 14px; }
      .take { grid-column: 1 / -1; display: flex; align-items: center; justify-content: flex-end; gap: 12px;
        .why { font: italic 400 13px/1.3 var(--face); text-align: right; color: var(--sumi-faint); } } }
  }
  .how { display: grid; gap: 8px; padding-top: 16px; border-top: 1px solid var(--sumi-line);
    .note { margin: 0; font-size: 14px; } }

  /* A skill's inscriptions, under its page (inscriptions_sheet.rs): how many paths are written of
     how many it holds, then each path, its ranks as diamonds (gold reached, the accent the next),
     what it does now and next, the next rank's cost, Inscribe and Erase. */
  .inscriptions {
    padding-top: 16px; border-top: 1px solid var(--sumi-line);
    > * + * { margin-top: 10px; }
    .ins-head { display: flex; align-items: baseline; gap: 14px;
      h3 { margin: 0; }
      .slots { font: 600 14px/1 var(--face); color: var(--sumi); font-variant-numeric: tabular-nums; }
      .kept { margin-left: auto; font: 400 13.5px/1 var(--face); color: var(--sumi-faint); font-variant-numeric: tabular-nums; } }
    .note, .aside, .why { margin: 0; font-size: 13.5px; line-height: 1.35; }
    .aside, .why { font-style: italic; }
    .ins-paths { margin: 6px 0 0; padding: 0; list-style: none; }
    .ins-path {
      padding: 12px 0; border-bottom: 1px solid var(--sumi-line);
      > * + * { margin-top: 6px; }
      .ins-path-head { display: flex; align-items: center; justify-content: space-between; gap: 10px;
        b { font: 600 16px/1.25 var(--face); color: var(--sumi-soft); } }
      &.on .ins-path-head b { color: var(--sumi); }
      .about { margin-bottom: 0; font: italic 400 13.5px/1.4 var(--face); color: var(--sumi-faint); }
      .ins-effects { margin: 6px 0 0; padding: 0; list-style: none; font: 400 14px/1.4 var(--face); color: var(--sumi-soft);
        font-variant-numeric: tabular-nums; }
      .ins-effects.now li { color: var(--gold-ink); }
      .ins-next { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; margin-top: 8px;
        .ins-effects { margin: 0; }
        .ins-cost { flex-basis: 100%; margin: 0; font: 400 13.5px/1.4 var(--face); color: var(--sumi-faint); font-variant-numeric: tabular-nums;
          b { font-weight: 600; color: var(--sumi); }
          .short, .short b { color: var(--vermilion-ink); } } }
      .actions { gap: 0 18px; margin-top: 4px; }
    }
    .pips {
      display: inline-flex; align-items: center; gap: 5px; flex: none;
      i { width: 8px; height: 8px; rotate: 45deg; border: 1px solid var(--sumi-line); }
      i.on { border-color: var(--gold-ink); background: var(--gold-ink); }
      i.next { border-color: var(--accent-on-paper); }
    }
  }
}

/* A drag under way (village_panel sets data-dragging on the dialog): the slots it may land on lit. */
.character[data-dragging=field] .socket[data-layer=field], .character[data-dragging=weapon] .socket[data-layer=weapon],
.character[data-dragging=surge] .socket[data-layer=surge] {
  box-shadow: inset 0 0 0 1.5px var(--accent-on-paper), 0 0 0 4px var(--accent-on-paper-ring); }

/* ---- Scrolls: the shelves; the scroll chosen hanging, and your scrolls by rarity. ------------- */
.character .scrolls-book {
  .verso .page-body > * + * { margin-top: 24px; }
  .shelf-head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 8px;
    .count { font: 500 15px/1 var(--face); color: var(--sumi-soft); font-variant-numeric: tabular-nums; } }
  .scrolls { display: flex; flex-wrap: wrap; gap: 10px 8px; }
  .scrolls .pic { width: 90px; height: 62px; }
  .scroll-item {
    position: relative; width: 100px; display: flex; flex-direction: column; align-items: center; gap: 8px;
    padding: 10px 2px 9px; border: 0; border-radius: 3px; background: none; text-align: center; cursor: pointer;
    .name { max-width: 100%; font: 600 12.5px/1.2 var(--face); overflow-wrap: anywhere; }
    &.missing .name { font-weight: 400; font-style: italic; color: var(--sumi-faint); }
    &.missing .pic { opacity: 0.7; }
    &:hover { background: var(--sumi-wash); }
    &.sel { background: var(--accent-on-paper-wash); box-shadow: inset 0 0 0 1.5px var(--accent-on-paper-ring); }
    &.sel::after { content: ""; position: absolute; top: -4px; right: -4px; width: 10px; height: 10px; rotate: 45deg;
      background: var(--accent-on-paper); box-shadow: 0 0 0 2px var(--washi); }
    &:focus-visible { outline: 1px solid var(--accent-on-paper); outline-offset: 2px; }
  }
  .recto .page-body { display: flex; flex-direction: column; gap: 34px; }
  .scroll-page { display: flex; align-items: flex-start; gap: 40px;
    .scroll-words { flex: 1; min-width: 0; display: grid; gap: 14px; padding-top: 18px; }
    .what { margin: 0; color: currentColor; }
    .scroll-words > h2:not(.faint) { color: currentColor; }
    .scroll-words > p:not([class]) { color: var(--sumi-soft); }
  }
  .r-common .what { color: var(--sumi-soft); }
  .facts { gap: 0; border-bottom: 1px solid var(--sumi-line);
    dt, dd { padding: 9px 0; border-top: 1px solid var(--sumi-line); font: 400 14px/1.3 var(--face); }
    dd { font-weight: 600; color: var(--sumi); } }
  .none { padding-top: 6px; }
  .by-rarity { display: grid; gap: 14px; margin-top: auto; padding-top: 18px; border-top: 1px solid var(--sumi-line);
    .figures { display: flex; justify-content: space-between; gap: 10px; }
    .figure { display: grid; justify-items: center; }
    .figure b { font-size: 30px; font-weight: 400; color: currentColor; }
    .figure span { margin-top: 6px; font: 600 10px/1 var(--face); letter-spacing: 0.2em; text-transform: uppercase; color: currentColor; } }
}
/* A short view: the pictures draw closer. */
@media (max-height: 800px) {
  .character .kit-book {
    .page-body > * + * { margin-top: 20px; }
    .level .figure b { font-size: 38px; }
    .enso { width: 92px; height: 92px; img:not(.ring) { width: 52px; height: 52px; } }
    .skill-head h2 { font-size: 28px; }
  }
  .character .scrolls-book {
    .hanging { width: 170px; .batten { width: 162px; } .sheet { width: 154px; height: 210px; img { width: 108px; height: 108px; } }
      .rod { width: 176px; } }
    .scroll-page { gap: 28px; }
  }
}