/* The Codex (M, codex_sheet.rs): the tab on the book (ui.css, "The book"), a chapter turned a
   spread at a time. The pictures are drawn in sumi on the paper; a figure of experience is gold,
   of life, harm and risk vermilion, each as its ink on paper. */
.codex-dialog {
  /* The line drawings: sumi strokes, a part in its ink. */
  .glyph { flex: none; width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6;
    stroke-linecap: round; stroke-linejoin: round; }
  .g-life .ink { fill: var(--vermilion-ink-wash); stroke: none; }
  .g-life { color: var(--vermilion-ink); }
  .g-harm .ink { fill: var(--sumi-shade); stroke: none; }
  .g-heal .ink { stroke: var(--vermilion-ink); }
  .g-battle .ink { fill: var(--sumi-shade); }
  .g-wound { color: var(--vermilion-ink); }
  .g-wound .ink { fill: var(--vermilion-ink); stroke-width: 2.2; }
  .g-scroll .ink { stroke: var(--sumi-faint); }
  .g-peak .ink { stroke: var(--gold-ink); }
  .g-catch .ink { stroke: var(--gold-ink); }
  .g-floor .ink { stroke: var(--sumi-faint); }
  .g-jail .ink { stroke-width: 2; }

  /* ---- The way up: the mountain ---------------------------------------------------------------- */
  .climb { position: relative; width: min(100%, calc((100vh - 510px) * 640 / 340)); margin: 4px 0 0; aspect-ratio: 640 / 340;
    > svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
    .wash-top { stop-color: var(--sumi); stop-opacity: 0.6; }
    .wash-foot { stop-color: var(--sumi); stop-opacity: 0.05; }
    .mountain { fill: url(#codex-wash); }
    .range { fill: var(--sumi); filter: url(#codex-ink); }
    .range.far { opacity: 0.05; }
    .range.near { opacity: 0.08; }
    .grid { fill: none; stroke: var(--sumi-line); stroke-width: 1; stroke-dasharray: 1 5; stroke-linecap: round; }
    .stratum { fill: none; stroke: var(--sumi); stroke-opacity: 0.1; stroke-width: 7; stroke-linecap: round; }
    .mist path { fill: none; stroke: var(--washi); stroke-width: 13; stroke-linecap: round; opacity: 0.92; }
    .mist path.thin { stroke-width: 6; opacity: 0.7; }
    .ceiling-line { fill: none; stroke: var(--vermilion-ink); stroke-width: 1.1; stroke-dasharray: 5 5; opacity: 0.8; }
    .flank { fill: none; stroke: var(--sumi); stroke-width: 1.6; stroke-linecap: round; opacity: 0.55; }
    .ridge { fill: var(--sumi); }
    .ridge.risk { fill: var(--vermilion-ink); }
    .axis { fill: none; stroke: var(--sumi); stroke-width: 1.3; }
    /* The words and marks over it. */
    .tick { position: absolute; font: 600 11px/1 var(--face); font-variant-numeric: tabular-nums; color: var(--sumi-faint); }
    .tick.y { left: 0; width: 6.4%; padding-right: 8px; text-align: right; translate: 0 -50%; }
    .tick.x { display: flex; flex-direction: column; align-items: center; gap: 5px; translate: -50% -4px; }
    .tick.x i { width: 8px; height: 8px; rotate: 45deg; background: currentColor; box-shadow: 0 0 0 2px var(--washi); }
    .tick.x.ceiling { color: var(--vermilion-ink); }
    .tick.x.top { color: var(--sumi); }
    .zone { position: absolute; translate: 0 -50%; font: 600 9.5px/1 var(--face); letter-spacing: 0.2em; text-transform: uppercase; }
    .zone.risk { color: var(--vermilion-ink); }
    .zone.free { color: var(--sumi-faint); }
    .pin { position: absolute; translate: -50% -50%; pointer-events: none; }
    .pin.summit .seal-mark { display: grid; place-items: center; width: 40px; height: 40px; translate: 0 -30px; rotate: -4deg;
      font: 600 17px/1 var(--face); color: var(--washi); background: var(--accent-on-paper); border-radius: 3px;
      filter: url(#ink-rough); box-shadow: 0 2px 4px var(--sumi-shade); }
    .pin.ceiling { display: flex; align-items: center; color: var(--vermilion-ink); }
    .pin.ceiling i { width: 10px; height: 10px; rotate: 45deg; background: currentColor; box-shadow: 0 0 0 2px var(--washi); }
    .pin.ceiling b { position: absolute; right: 18px; bottom: 10px; white-space: nowrap; font: 600 10px/1 var(--face);
      letter-spacing: 0.18em; text-transform: uppercase; }
    .pin.you { color: var(--gold-ink); }
    .pin.you i { display: block; width: 12px; height: 12px; rotate: 45deg; background: currentColor;
      box-shadow: 0 0 0 2px var(--washi), 0 0 0 3.5px var(--gold-ink); }
    .pin.you b { position: absolute; left: 50%; bottom: 20px; translate: -50% 0; font: 600 10px/1 var(--face);
      letter-spacing: 0.2em; text-transform: uppercase; }
    .pin.you b::after { content: ""; position: absolute; left: 50%; top: 13px; width: 1px; height: 7px; background: currentColor; }
    .axis-name { position: absolute; right: 2%; bottom: -2px; font: 600 9.5px/1 var(--face); letter-spacing: 0.2em;
      text-transform: uppercase; color: var(--sumi-faint); }
  }
  /* ---- The way up: where experience comes from ------------------------------------------------- */
  .source-list { list-style: none; margin: 10px 0 0; padding: 0; }
  .source { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; column-gap: 14px;
    padding: 9px 0; border-top: 1px solid var(--sumi-line);
    .pic { width: 44px; height: 44px; }
    b { display: block; font: 600 16px/1.2 var(--face); }
    small { display: block; margin-top: 2px; font: italic 400 13px/1.3 var(--face); color: var(--sumi-faint); }
    strong { font: 400 30px/1 var(--face); font-variant-numeric: tabular-nums; color: var(--gold-ink); text-align: right; }
    .mods { display: flex; flex-wrap: wrap; align-items: center; gap: 3px 16px; margin-top: 4px; font-size: 13px; color: var(--sumi-soft); }
    .stars { display: inline-flex; align-items: center; gap: 1px; }
    .star { width: 13px; height: 13px; }
    .mods em { margin-left: 4px; font-style: normal; font-weight: 600; color: var(--sumi); }
    .mod { display: inline-flex; align-items: center; gap: 6px; }
    .mod .glyph { width: 17px; height: 17px; stroke-width: 2; }
    .mod em { margin: 0; color: var(--gold-ink); }
  }
  .ladder { position: relative; grid-column: 2 / -1; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
    margin: 10px 0 2px; padding: 0; list-style: none;
    &::before { content: ""; position: absolute; left: 12%; right: 12%; top: 20px; height: 1px; background: var(--sumi-line); }
    li { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; }
    .place { font: 600 10px/1 var(--face); letter-spacing: 0.16em; text-transform: uppercase; color: var(--sumi-faint); }
    li > i { width: 9px; height: 9px; margin: 2px 0; rotate: 45deg; border: 1.5px solid var(--sumi); background: var(--washi); }
    b { font: 600 15px/1 var(--face); font-variant-numeric: tabular-nums; color: var(--gold-ink); }
    .cost { display: flex; align-items: center; gap: 4px; font-size: 12px; color: var(--sumi-soft); }
    .cost .glyph { width: 13px; height: 13px; }
    .fate-wound .cost { color: var(--vermilion-ink); }
    .fate-wound > i { border-color: var(--vermilion-ink); background: var(--vermilion-ink); }
  }
  .asides { display: grid; gap: 7px; margin: 12px 0 0; padding: 0; list-style: none; font-size: 13.5px; color: var(--sumi-soft);
    li { display: flex; align-items: center; gap: 12px; }
    em { font-style: normal; font-weight: 600; color: var(--sumi); }
  }
  .sources .asides em { color: var(--gold-ink); }
  /* Where you stand: your mark and level, the experience into your next level as a gold stroke. */
  .standing { display: grid; grid-template-columns: auto auto minmax(0, 1fr); align-items: center; gap: 14px; margin-top: 20px;
    padding: 12px 16px; background: var(--gold-ink-wash); border-radius: 2px;
    .you-mark { width: 12px; height: 12px; rotate: 45deg; background: var(--gold-ink); box-shadow: 0 0 0 2px var(--washi), 0 0 0 3.5px var(--gold-ink); }
    .who b { display: block; font: 600 11px/1.2 var(--face); letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold-ink); }
    .who small { display: block; font: 600 17px/1.2 var(--face); color: var(--sumi); }
    .to-next { display: grid; gap: 6px; }
    .bar { position: relative; height: 10px; }
    .bar::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: var(--sumi-line); }
    .bar i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--gold-ink); mask: var(--brush-h) 0 0 / 100% 100% no-repeat; }
    .line { font-size: 13px; font-variant-numeric: tabular-nums; color: var(--sumi-soft); }
    .line em { font-style: normal; font-weight: 600; color: var(--gold-ink); }
  }

  /* ---- The way up: the ceiling as two lanes, each ending at its level over its experience ------ */
  .lanes { margin-top: 30px; padding-top: 14px; border-top: 1px solid var(--sumi-line); }
  .lane { display: grid; grid-template-columns: 196px minmax(0, 1fr); align-items: center; gap: 16px; padding: 6px 0;
    .who b { display: block; font: 600 11px/1.2 var(--face); letter-spacing: 0.18em; text-transform: uppercase; }
    .who small { display: block; margin-top: 2px; font: italic 400 12.5px/1.3 var(--face); color: var(--sumi-faint); }
    .track { position: relative; height: 12px; margin-right: 84px; }
    .track::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: var(--sumi-line); }
    .track i { position: absolute; left: 0; top: 2px; bottom: 2px; background: var(--sumi); mask: var(--brush-h) 0 0 / 100% 100% no-repeat; }
    .track em { position: absolute; top: 50%; translate: 0 -50%; display: grid; padding: 1px 0 1px 9px; font-style: normal;
      font-variant-numeric: tabular-nums; white-space: nowrap; }
    .track em b { font: 600 18px/1 var(--face); }
    .track em small { margin-top: 3px; font: 500 11.5px/1 var(--face); color: var(--sumi-faint); }
    &.free b { color: var(--sumi); }
    &.free .track em { border-left: 3px solid var(--sumi); margin-left: -2px; }
    &.risk b { color: var(--vermilion-ink); }
    &.risk .track i { background: var(--vermilion-ink); }
  }
  .lane-key { margin: 4px 0 0; text-align: right; font: 600 9.5px/1 var(--face); letter-spacing: 0.18em; text-transform: uppercase;
    color: var(--sumi-faint); }

  /* ---- What a level gives: life and harm -------------------------------------------------------- */
  .gift { padding: 14px 0 6px; border-top: 1px solid var(--sumi-line); }
  .gift-head { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; align-items: center; gap: 14px;
    .glyph { width: 36px; height: 36px; stroke-width: 1.4; }
    b { display: block; font: 600 22px/1.15 var(--face); }
    small { display: block; font: italic 400 13px/1.3 var(--face); color: var(--sumi-faint); }
    strong { font: 400 34px/1 var(--face); text-align: right; }
    strong small { margin-top: 4px; font-size: 12px; }
  }
  .gift.life strong { color: var(--vermilion-ink); }
  .bars { display: grid; gap: 9px; margin: 14px 0 0 50px; padding: 0; list-style: none;
    li { display: grid; grid-template-columns: 106px minmax(0, 1fr) 54px; align-items: center; gap: 12px; }
    .lv { font: 600 10.5px/1 var(--face); letter-spacing: 0.16em; text-transform: uppercase; color: var(--sumi-faint); }
    .bar { position: relative; height: 13px; }
    .bar i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--sumi); mask: var(--brush-h) 0 0 / 100% 100% no-repeat; }
    b { font: 600 15px/1 var(--face); font-variant-numeric: tabular-nums; text-align: right; }
  }
  .gift.life .bar i { background: var(--vermilion-ink); }
  .bars li.you .lv, .bars li.you b { color: var(--gold-ink); }
  .gift + .gift { margin-top: 6px; }

  /* ---- What a level gives: the scrolls' stair, losing levels ------------------------------------ */
  .stair { display: grid; grid-template-columns: repeat(5, 1fr); align-items: end; height: 250px; margin: 14px 0 0; padding: 0;
    list-style: none;
    li { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; }
    .scroll-pic { position: relative; width: 76px; height: 52px; margin-bottom: 4px; filter: drop-shadow(0 3px 3px var(--sumi-shade)); }
    .scroll-pic svg { display: block; width: 100%; height: 100%; }
    .scroll-pic b { position: absolute; inset: 0; display: grid; place-items: center; font: 600 17px/1 var(--face);
      font-variant-numeric: tabular-nums; color: var(--paper-bright); }
    .step { width: 100%; height: calc(var(--rise) * 150px); border-top: 2.5px solid currentColor; border-bottom: 1.5px solid var(--sumi);
      background: var(--sumi-wash); }
    li + li .step { box-shadow: inset 1px 0 0 var(--sumi-line); }
    .name { margin-top: 8px; font: 600 10.5px/1.2 var(--face); letter-spacing: 0.14em; text-transform: uppercase; }
  }
  .losses { display: grid; gap: 12px; margin: 12px 0 0; padding: 0; list-style: none;
    li { display: grid; grid-template-columns: 28px minmax(0, 1fr); align-items: center; gap: 14px; }
    li.loss { grid-template-columns: 28px auto minmax(0, 1fr); }
    .glyph { width: 28px; height: 28px; }
    strong { font: 400 32px/1 var(--face); font-variant-numeric: tabular-nums; color: var(--vermilion-ink); }
    b { display: block; font: 600 15px/1.25 var(--face); }
    small { display: block; font: italic 400 13px/1.35 var(--face); color: var(--sumi-faint); }
    em { font-style: normal; font-weight: 600; color: var(--gold-ink); }
  }

  /* ---- Every level: the ledger ------------------------------------------------------------------ */
  .levels-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; margin-top: 4px; }
  .levels { width: 100%; border-collapse: collapse; font: 400 13px/1 var(--face); font-variant-numeric: tabular-nums;
    thead th { padding: 0 0 7px 6px; border-bottom: 1.5px solid var(--sumi); text-align: right; font: 600 9.5px/1 var(--face);
      letter-spacing: 0.14em; text-transform: uppercase; color: var(--sumi-faint); }
    thead th:first-child { padding-left: 0; text-align: left; }
    tbody tr { height: 23px; border-bottom: 1px solid var(--sumi-line); }
    tbody th { padding: 0; text-align: left; font-weight: 600; white-space: nowrap; }
    td { padding: 0 0 0 6px; text-align: right; white-space: nowrap; }
    td:nth-child(2) { color: var(--gold-ink); }
    td:nth-child(n+4) { color: var(--sumi-soft); }
    tr.ceiling { border-bottom: 2px solid var(--vermilion-ink); }
    tr.you { background: var(--gold-ink-wash); }
    tr.you th { color: var(--gold-ink); }
  }
  .opens { display: inline-block; width: 7px; height: 7px; margin: 0 0 1px 6px; rotate: 45deg; background: currentColor; }
  .key { display: flex; flex-wrap: wrap; gap: 6px 22px; margin: 14px 0 0; padding: 0; list-style: none;
    font: 600 10px/1.2 var(--face); letter-spacing: 0.16em; text-transform: uppercase; color: var(--sumi-faint);
    li { display: flex; align-items: center; gap: 8px; }
    .opens { margin: 0; }
    .ceiling-rule { width: 18px; height: 2px; background: var(--vermilion-ink); }
    .you-wash { width: 18px; height: 11px; background: var(--gold-ink-wash); }
  }
}
/* The axis's marks are sumi unless a rarity inks one (`.washi .r-*`). */
:where(.codex-dialog .climb .tick.x) { color: var(--sumi-soft); }

/* A short view: the spreads' rows draw closer. */
@media (max-height: 800px) {
  .codex-dialog {
    .source { padding: 6px 0; }
    .source strong { font-size: 26px; }
    .lanes { margin-top: 18px; padding-top: 8px; }
    .gift { padding-top: 8px; }
    .bars { gap: 5px; margin-top: 8px; }
    .levels tbody tr { height: 19px; }
  }
}