/* ===================================================================
   shared/item-sheet.css — the look of shared/item-sheet.js
   ===================================================================
   Three jobs:

   1. The two columns. The picture sits in a fixed square on the LEFT and
      everything written sits beside it, which is the whole point: art
      across the top pushed every word below it, so a wide box came back
      as a tall sheet with a band of parchment doing nothing. As a column
      the picture costs the same room however much text there is, and a
      wider box buys longer lines instead of more empty space.

   2. The picture and the chips, which are this sheet's own.

   3. Re-colouring shared/item-panel.js's markup for PARCHMENT. Those
      `.ip-*` rules were written for the campaign editor's opened card,
      which is a dark panel in the app — a statline on --bark-light is a
      black box in the middle of a page you are about to print. Every
      rule below swaps an app token for the matching sheet token and
      changes nothing else, so the two readings of an item can't drift.

   Sizes are relative to each other and not to the page: a placed sheet is
   scaled as a whole to the rectangle it was dragged into (sbFitBlock), so
   what matters here is proportion.
   =================================================================== */

.statblock.is-item-sheet .content {
  flex: 1 1 auto; min-height: 0;
  display: flex; flex-direction: column;
  padding: 12px 14px 14px;
}

/* ── The picture, and the words around it ─────────────────────
   A FLOAT rather than a column. Two rigid columns held the writing to 60% of
   the sheet all the way down, so everything past the bottom of the picture
   was set narrow beside a strip of empty parchment. Floated, the words sit
   beside the picture while there is picture to sit beside and take the whole
   width the moment there isn't.

   Each block decides for itself: the ones that start level with the picture
   are shortened by it, the ones that start below it are not. That is what
   makes the rule under the name stop at the picture's edge while the
   properties below run the full width. */
.is-item-sheet .is-cols { display: block; flex: 1 1 auto; min-height: 0; }
/* Shrink-to-fit, capped: the column is exactly as wide as the picture
   turns out to be, so a tall thin item gives its width back to the words
   instead of sitting in the middle of an empty strip. */
.is-item-sheet .is-side { float: left; width: auto; max-width: 38%; margin: 0 12px 10px 0; }
/* Deliberately NOT its own formatting context: it has to overlap the float
   so that its children can each answer the question separately. */
.is-item-sheet .is-main { min-width: 0; }
/* These do answer it for themselves. A plain block ignores a float and would
   run its background and its rules straight under the picture; an
   independent formatting context is shortened by it instead. Grids and
   flexboxes (.ip-vitals, .ip-rule, .is-chips) already are one. */
.is-item-sheet .ci-titleblock,
.is-item-sheet .ip-lead,
.is-item-sheet .ip-sec,
.is-item-sheet .ip-foot { display: flow-root; }

/* Below this there is genuinely no room for a picture AND a column beside
   it, so the picture goes back on top. Set low on purpose: the sheet is
   scaled to its box afterwards, so a tall box makes the sheet lay out NARROW
   and then blows it up — which used to trip a threshold meant for small
   blocks and hand a big one a full-width picture with nothing beside it.

   Stacked, the frame is a band rather than a square: a square at the full
   width of the sheet is the single largest thing on it, and most of it is
   the space around a dagger. */
@container ci-sheet (max-width: 240px) {
  .is-item-sheet .is-side { float: none; width: 100%; margin: 0 0 10px; }
  .is-item-sheet .is-art img { max-height: calc(92px * var(--ci-type, 1)); }
}

/* ── A wide box: plate and panel ──────────────────────────────
   Past this shape the sheet stops being a page with a picture on it and
   becomes the arrangement the library cards use — the picture holding the
   whole left side, full height, and everything read sitting beside it.

   Floated, a wide box gave a wide FRAME with the picture letterboxed inside
   it and a strip of parchment either side, because a frame that grows
   sideways cannot also be a portrait picture. Given the full height there is
   nothing to letterbox: the picture fills its side and is cropped to it.

   The row does not add height — the side stretches to whatever the words
   need — so the fitter is left as monotonic as it was. */
.is-item-sheet.is-wide .is-cols { display: flex; align-items: stretch; gap: 14px; }
/* The plate is as wide as its own HEIGHT allows, not a flat share of the
   sheet. In a wide, short box a third of the width is a letterbox slot with
   a dagger cropped to a sliver in it, and the words beside it are squeezed
   for no gain. Sized from the height it shrinks with the box: short and wide
   gives a small plate and a long line of text, which is the right way round.
   The cap stops it dominating a tall one. */
.is-item-sheet.is-wide .is-side {
  float: none; flex: 0 1 auto; width: auto; margin: 0;
  aspect-ratio: 3 / 4; max-width: 34%; min-width: calc(54px * var(--ci-type, 1));
  display: flex; flex-direction: column;
}
.is-item-sheet.is-wide .is-art { display: block; flex: 1 1 auto; min-height: 0; }
/* Taken out of flow on purpose. Left in it, a picture told to be its
   parent's full height has no height to be full OF — the parent is sized by
   the picture — so it fell back to its natural pixels, made the column
   hundreds of pixels tall, and the fitter shrank the whole sheet to a
   thumbnail to make that fit. Positioned, it contributes no height at all
   and simply fills whatever the words beside it turn out to need. */
.is-item-sheet.is-wide .is-art img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; max-width: none; max-height: none;
  object-fit: cover;
}
.is-item-sheet.is-wide .is-main { flex: 1 1 auto; min-width: 0; }
/* Nothing to clear once the picture has a column of its own. */
.is-item-sheet.is-wide .ip-sec,
.is-item-sheet.is-wide .ip-foot { clear: none; }

/* ── The picture ───────────────────────────────────────────────
   `contain`, not `cover`: an item's silhouette is the point of the
   picture, and cropping it takes the tip off the blade.

   Its height is a fixed multiple of the TYPE and never a percentage of its
   own width, and that is load-bearing rather than taste. A placed sheet is
   fitted to its box by searching for the largest scale that still fits
   (sbFitBlock), and that search only works because laying a sheet out wider
   makes it shorter. A square frame broke the rule — wider meant a taller
   picture, so the rendered height never changed — and for a wide, short box
   no scale fitted at all: the search bottomed out and the sheet was left
   clipped with its properties cut off. Sized this way the frame scales with
   everything else and the search holds. */
.is-item-sheet .is-art {
  display: inline-block; vertical-align: top;
  position: relative;
  background-color: var(--sheet-bg-deep);
  border: 2px solid var(--accent-strong);
  box-shadow: 0 2px 7px rgba(var(--shade-rgb), .28);
}
/* The picture sizes itself and the frame shrinks onto it, which is the whole
   trick: a frame that is not the picture's shape is two strips of empty
   parchment either side of it.

   Both dimensions auto with a cap on each: a replaced element bounded that
   way comes out as large as it can be inside the bounds WITHOUT losing its
   shape. So a tall club gets a tall narrow frame and a banner a wide short
   one, both exactly the picture and nothing else.

   The height cap is what keeps the fitter honest — see the note above. */
.is-item-sheet .is-art img {
  display: block; width: auto; height: auto;
  max-height: calc(118px * var(--ci-type, 1)); max-width: 100%;
}

/* The same inner hairline the personality sheet's portrait wears, so the
   two kinds of picture are framed identically. */
.is-item-sheet .is-art::after {
  content: ''; position: absolute; inset: 3px;
  border: 1px solid rgba(var(--sheet-bg-deep-rgb), .8);
  pointer-events: none;
}

/* Tags, on the kind line and to the right of it. Both answer the same
   question — what is this thing — so they belong on one line rather than in
   two places on the sheet. */
.is-item-sheet .is-kindrow {
  display: flex; align-items: baseline; flex-wrap: wrap;
  gap: 3px 8px; margin-top: 2px;
}
.is-item-sheet .is-kindrow .ci-subtitle { margin: 0; }
.is-item-sheet .is-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.is-item-sheet .is-chip {
  font-family: 'Cinzel', Georgia, serif;
  font-size: calc(8.5px * var(--ci-type, 1)); letter-spacing: .4px;
  color: var(--accent-strong);
  border: 1px solid rgba(var(--accent-rgb), .45);
  border-radius: 999px; padding: 1px 7px;
}
/* On aged paper the headings keep the sheet's red while the rules go brown —
   the one place the ink and the writing part company. The creature sheets
   name their own heading classes for this; these are ours. */
.statblock.sb-parchment.is-item-sheet .ip-h,
.statblock.sb-parchment.is-item-sheet .ip-v-v,
.statblock.sb-parchment.is-item-sheet .ip-rule-n,
.statblock.sb-parchment.is-item-sheet .is-chip { color: var(--sheet-accent); }

/* ── The title block ──────────────────────────────────────────
   The kind line is the second thing anyone reads and the first that says
   what the thing IS, so it is set close to the body text rather than to
   the footnote it inherited. */
.statblock.is-item-sheet .ci-titleblock { margin: 0 0 8px; padding-bottom: 5px; }
.statblock.is-item-sheet .ci-titleblock .monster-name { font-size: calc(19px * var(--ci-type, 1)); }
.statblock.is-item-sheet .ci-subtitle {
  margin: 2px 0 0;
  font-size: calc(13px * var(--ci-type, 1));
}

.is-item-sheet .is-body { flex: 1 1 auto; min-height: 0; }

/* ── item-panel.js, on parchment ─────────────────────────────── */
.is-item-sheet .ip-lead {
  font-size: calc(13px * var(--ci-type, 1)); line-height: 1.55;
  color: var(--sheet-ink);
  padding-bottom: 9px;
  border-bottom: 1px solid var(--accent-strong);
}
.is-item-sheet .is-body > .ip-lead:first-child { padding-bottom: 8px; }

/* ── One statline cell, and the prose beside it ────────────────
   A single cell stretched across the whole sheet is a box with a die in one
   corner and a hand span of parchment after it, and the words that would
   have filled that space were set above it at half the measure. Side by side
   the cell is only as wide as it needs and the prose gets both the room and
   a size worth reading.

   A flex row, so it is shortened by the floated picture rather than running
   under it — this sits level with the picture, and what comes after it
   clears. */
.is-item-sheet .is-brief {
  display: flex; align-items: stretch; gap: 14px;
  clear: left;
  margin: 9px 0 0; padding-bottom: 10px;
  border-bottom: 1px solid var(--accent-strong);
}
.is-item-sheet .is-brief .ip-vitals { flex: 0 0 30%; max-width: calc(180px * var(--ci-type, 1)); margin: 0; }
.is-item-sheet .is-brief .ip-lead {
  flex: 1 1 auto; min-width: 0;
  font-size: calc(14.5px * var(--ci-type, 1)); line-height: 1.5;
  padding-bottom: 0; border-bottom: none;
}
/* A wide block already gives the words a column; there the pair reads better
   stacked than squeezed into the half-width left over. */
.is-item-sheet.is-wide .is-brief { display: block; }
.is-item-sheet.is-wide .is-brief .ip-vitals { margin-bottom: 9px; }

/* Narrower cells and less padding: the statline is two or three short
   readings, and at the panel's sizing they held one per line. */
.is-item-sheet .ip-vitals {
  grid-template-columns: repeat(auto-fit, minmax(76px, 1fr));
  background: var(--sheet-bg-deep);
  border-color: var(--accent-strong);
  border-radius: 4px;
  margin-top: 9px;
}
.is-item-sheet .ip-v { padding: 5px 9px; border-right-color: var(--accent-strong); }
.is-item-sheet .ip-v-k { font-size: calc(8px * var(--ci-type, 1)); letter-spacing: .9px; color: var(--sheet-text-mid); }
.is-item-sheet .ip-v-v { font-size: calc(15px * var(--ci-type, 1)); color: var(--accent-strong); margin-top: 1px; }
.is-item-sheet .ip-v-n { font-size: calc(10px * var(--ci-type, 1)); color: var(--sheet-text-mid); }

/* A headed section always starts BELOW the picture and runs the full width.
   Properties is a list of named rules, and a list read in a 60% column beside
   a square is three words a line down one side of the sheet — the name, the
   picture and the prose are what belong side by side, the rules are what
   belong across the page. */
.is-item-sheet .ip-sec { margin-top: 10px; clear: left; }
.is-item-sheet .ip-foot { clear: left; }
.is-item-sheet .ip-h {
  font-size: calc(10.5px * var(--ci-type, 1)); letter-spacing: 1.4px;
  color: var(--accent-strong); margin-bottom: 5px; gap: 7px;
}
.is-item-sheet .ip-h::before { background: var(--accent-strong); width: 3px; height: 10px; }
.is-item-sheet .ip-h::after {
  background: linear-gradient(to right, var(--accent-strong), transparent);
  opacity: .45;
}

.is-item-sheet .ip-rule { gap: 10px; margin-bottom: 6px; }
/* A fixed column, left aligned. It was a third of the sheet with the names
   pushed to its right edge, so on a wide sheet every rule opened with a hand
   span of empty parchment and the name sat nowhere near what it means. Named
   in px rather than per cent, the gutter stays the same however wide the
   sheet gets — and the explanations still line up with each other, which is
   the only thing the column was ever for. */
.is-item-sheet .ip-rule-n {
  width: calc(88px * var(--ci-type, 1)); text-align: left; padding-top: 1px;
  font-size: calc(10px * var(--ci-type, 1)); letter-spacing: .5px;
  color: var(--accent-strong);
}
/* Beside a picture the reading column is only ~60% of the sheet, and a
   third of THAT held to a right-aligned name leaves four words a line. Past
   this the name sits above what it means instead, which costs one line and
   buys the whole width back. */
@container ci-sheet (max-width: 460px) {
  .is-item-sheet .ip-rule { display: block; }
  .is-item-sheet .ip-rule-n { display: block; width: auto; text-align: left; margin-bottom: 1px; }
}
.is-item-sheet .ip-rule-t,
.is-item-sheet .ip-line { font-size: calc(13px * var(--ci-type, 1)); line-height: 1.5; color: var(--sheet-ink); }
.is-item-sheet .ip-line { padding-left: 14px; margin-bottom: 4px; }
.is-item-sheet .ip-line::before { background: var(--accent-strong); top: 6px; width: 4px; height: 4px; }
.is-item-sheet .ip-cols { column-gap: 18px; }

.is-item-sheet .ip-foot {
  margin-top: 12px; padding-top: 7px;
  font-size: calc(10px * var(--ci-type, 1));
  border-top-color: var(--accent-strong);
  color: var(--sheet-text-mid);
}
.is-item-sheet .ip-foot em { color: var(--accent-strong); }

/* ── Reading size in the wide layout ──────────────────────────
   With the picture holding its own column the words have a column of their
   own too, and the sheet is scaled to fit the box either way — so what
   decides how big the writing LOOKS is its size relative to everything else
   on the sheet, not the scale. Here the two things anyone actually reads —
   the description and what a property does — are set at the same size and
   a step up, because there is nothing else competing for the room. */
.is-item-sheet.is-wide .ip-lead,
.is-item-sheet.is-wide .is-brief .ip-lead,
.is-item-sheet.is-wide .ip-rule-t,
.is-item-sheet.is-wide .ip-line { font-size: calc(15px * var(--ci-type, 1)); line-height: 1.5; }
.is-item-sheet.is-wide .ip-rule-n { font-size: calc(11px * var(--ci-type, 1)); }
.is-item-sheet.is-wide .ip-h { font-size: calc(11.5px * var(--ci-type, 1)); }