/* ============================================================
   shared/creature-info.css — the Personality / Info sheet
   ============================================================
   The companion to the combat stat block. The parchment, frame and
   top/bottom bars come from each page's own `.statblock` rules; this
   file is only the layout INSIDE that frame.

   ── Why two columns ──────────────────────────────────────────────
   One column with a portrait in it leaves a tall hole beside the
   portrait and nothing to fill it with. Two columns solve that by
   giving each kind of writing the measure it wants: paragraphs get
   the wide column, the short answers (wants, bond, flaw…) get the
   narrow one, and each column ends up roughly as long as the other.

   The switch to two columns is a CONTAINER query, not a viewport
   one. This sheet is narrow when it's sharing the viewer with the
   combat block, on a wide monitor — the window's width says nothing
   about it. Below ~400px the columns stack and it reads as one run.

   ── Shapes, not headings ─────────────────────────────────────────
   Each kind of information gets a different shape, and the shapes are
   what you navigate by:

     quick notes   a tinted panel at the top — read this first
     the vitals    small quiet label over a big answer
     tags          chips ON a heading — how someone comes across
     sections      a ruled heading over a run of sub-headed blocks

   Which field takes which shape is the schema's call (`group`,
   `column`, `section`, `display` in shared/creature-info.js).

   Rules that OVERRIDE a `.statblock` default are written as
   `.statblock.ci-sheet …` so they outrank each page's inline styles.
   ============================================================ */

.statblock.ci-sheet {
  display: flex; flex-direction: column;
  /* The columns below size themselves against THIS, not the window. */
  container-type: inline-size;
  container-name: ci-sheet;
}
/* A column flexbox all the way down, so when the sheet is stretched — joined
   to a taller one, or filling a rectangle on the design page — the extra
   height reaches the columns instead of pooling under them. */
.statblock.ci-sheet .content {
  flex: 1 1 auto; min-height: 0; padding: 12px 15px 15px;
  display: flex; flex-direction: column;
}

/* The name spans the page: it titles the whole dossier, not a column. */
.statblock.ci-sheet .monster-name {
  margin: 0 0 10px;
  font-size: 22px; line-height: 1.1;
  border-bottom: 2px solid var(--accent-strong);
  padding-bottom: 5px;
}

/* ── The two columns ────────────────────────────────────────
   `--ci-type` multiplies every size and gap inside a column. The side
   column keeps it at 1; sbFillInfoColumns raises it on the reading
   column when the portrait makes the side taller, so the writing
   grows into the space instead of stopping halfway down the page
   with blank parchment under it. Everything sized off the variable
   grows together, so the column keeps its proportions. */
.ci-cols { display: flex; flex-direction: column; gap: 13px; flex: 1 1 auto; min-height: 0; }
.ci-col { min-width: 0; --ci-type: 1; }
@container ci-sheet (min-width: 400px) {
  /* stretch, not flex-start: the columns take the row's full height, which is
     what sbFillInfoColumns measures the writing against. */
  .ci-cols { flex-direction: row; align-items: stretch; gap: 16px; }
  .ci-col-main { flex: 1 1 0; }
  /* The split isn't fixed: sbBalanceInfoColumnWidths hands the extra width to
     whichever column is running longer, within the bounds below. 37% is only
     where it starts. */
  .ci-col-side { flex: 0 0 var(--ci-side, 37%); }
}

/* ── Portrait ─────────────────────────────────────────────────
   Fills its column rather than sitting at a fixed size, so there is
   never a strip of dead parchment beside it. 2:3, because that is
   the shape a character portrait wants — see the note in
   worker/src/routes/token.js about card art framing. */
.ci-portrait {
  width: 100%;
  aspect-ratio: 2 / 3;
  position: relative;
  margin-bottom: 11px;
  background: var(--sheet-bg-deep);
  border: 2px solid var(--accent-strong);
  box-shadow: 0 2px 7px rgba(var(--shade-rgb), .28);
}
.ci-portrait img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ci-portrait::after {
  content: ''; position: absolute; inset: 3px;
  border: 1px solid rgba(var(--sheet-bg-deep-rgb), .8);
  pointer-events: none;
}

/* ── Vitals — who this is, in two words ───────────────────────
   Run-in: the label and its answer share a line and the answer wraps
   under it when it has to. Stacking them cost two lines apiece and
   left half the column empty, and setting the answers big and bold
   made this corner read like it came off a different sheet.

   Same type as everything else here — the block heading for the
   label, body copy for the answer — so it belongs to the page. It
   still reads at a glance because it is three short lines at the top
   of a column, not because it shouts. */
.ci-vital {
  margin-bottom: 3px;
  font-size: calc(11.5px * var(--ci-type, 1));
  line-height: 1.45;
  color: var(--sheet-ink);
}
.ci-vital-label {
  font-family: 'Cinzel', Georgia, serif;
  font-size: calc(10px * var(--ci-type, 1));
  font-weight: 700; letter-spacing: 1.1px; text-transform: uppercase;
  color: var(--sheet-ink-mid);
  margin-right: 6px;
}
.ci-vital-value { font-weight: 600; overflow-wrap: anywhere; }
.ci-vital:last-of-type { margin-bottom: 12px; }

/* ── Quick notes ──────────────────────────────────────────────
   The whole character in a few lines, and the first thing read — so
   it opens the page in a panel of its own rather than joining the
   run of written sections. */
.ci-note {
  margin-bottom: calc(12px * var(--ci-type, 1));
  padding: calc(8px * var(--ci-type, 1)) calc(11px * var(--ci-type, 1));
  background: rgba(var(--accent-rgb), .06);
  border: 1px solid rgba(var(--accent-rgb), .2);
  border-left: 3px solid var(--accent-strong);
  border-radius: 3px;
}
.ci-note-label {
  font-family: 'Cinzel', Georgia, serif;
  font-size: calc(9px * var(--ci-type, 1)); font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase;
  color: var(--accent-strong);
  margin-bottom: calc(2px * var(--ci-type, 1));
}
.ci-note-text {
  display: block;
  font-size: calc(11.5px * var(--ci-type, 1)); line-height: 1.5; font-weight: 400;
  color: var(--sheet-text-soft);
}

/* ── Headings ─────────────────────────────────────────────────
   Two levels only. A field standing alone and a group of fields sit
   at the SAME level (Description, Background, Roleplaying Notes,
   Characteristics), each ruled underneath; fields inside a group get
   the quieter sub-heading. Nothing in the renderer counts levels —
   it just asks whether a section is open. */
.ci-section-title {
  font-family: 'Cinzel', Georgia, serif;
  font-size: calc(14px * var(--ci-type, 1)); font-weight: 700; letter-spacing: .6px;
  color: var(--accent-strong);
  margin: 0 0 calc(4px * var(--ci-type, 1));
  padding-bottom: calc(2px * var(--ci-type, 1));
  border-bottom: 1px solid var(--accent-strong);
  display: flex; align-items: baseline; gap: calc(8px * var(--ci-type, 1)); flex-wrap: wrap;
}
.ci-block-title {
  font-family: 'Cinzel', Georgia, serif;
  font-size: calc(10.5px * var(--ci-type, 1)); font-weight: 700; letter-spacing: 1.1px; text-transform: uppercase;
  color: var(--sheet-ink-mid);
  margin: 0 0 calc(1px * var(--ci-type, 1));
  display: flex; align-items: baseline; gap: calc(8px * var(--ci-type, 1)); flex-wrap: wrap;
}
.ci-title-text { flex: 0 0 auto; }

/* ── Tags ─────────────────────────────────────────────────────
   Three or four words for how someone comes across, sitting on the
   heading itself — the fastest read on the page, and free space:
   a heading is short and the rest of that line was empty anyway.

   The comma between chips is real text, hidden rather than removed,
   so the row's textContent is still the plain "evasive, gentle"
   string the field stores. That's what lets the whole row be one
   click-to-edit target without a parser on the way back out. */
.ci-tags { display: inline-flex; align-items: baseline; flex-wrap: wrap; gap: calc(4px * var(--ci-type, 1)); }
.ci-tag {
  font-family: 'Crimson Text', Georgia, serif;
  font-size: calc(10px * var(--ci-type, 1)); font-weight: 600; letter-spacing: .3px; text-transform: none;
  color: var(--accent-strong);
  background: rgba(var(--accent-rgb), .08);
  border: 1px solid rgba(var(--accent-rgb), .28);
  border-radius: 999px;
  padding: calc(1px * var(--ci-type, 1)) calc(8px * var(--ci-type, 1));
  white-space: nowrap;
}
.ci-tag-sep { font-size: 0; }

/* ── Bullets ──────────────────────────────────────────────────
   Some fields are a handful of separate observations, not an
   argument — mannerisms, most obviously. A paragraph makes you read
   all of them to find one; bullets let you take the third. Built the
   same way as the tags: the newline between items is real text kept
   out of sight, and the bullet is a ::before so it never reaches
   textContent and never ends up saved into the field. */
.ci-list { display: block; }
.ci-li { display: block; padding-left: calc(11px * var(--ci-type, 1)); position: relative; }
.ci-li::before {
  content: '\2022';
  position: absolute; left: 1px; top: 0;
  color: var(--accent-strong); opacity: .8;
}
.ci-li-sep { font-size: 0; line-height: 0; }
.ci-section { margin-bottom: calc(11px * var(--ci-type, 1)); }
.ci-section:last-child { margin-bottom: 0; }
/* A section's own title carries the rule, so the blocks inside it sit
   closer together than two standalone sections would. */
.ci-section .ci-block { margin-bottom: calc(7px * var(--ci-type, 1)); }
.ci-block { margin-bottom: calc(11px * var(--ci-type, 1)); }
.ci-block:last-child { margin-bottom: 0; }
/* Weight is stated AND scoped to the sheet, because some themes carry a
   `[data-theme="…"] p { font-weight: 600 }` rule that outranks a lone class
   and landed every paragraph here at semibold — a page of it is genuinely
   hard to read. Body copy is 400. */
.statblock.ci-sheet .ci-block-text {
  margin: 0;
  font-size: calc(11.5px * var(--ci-type, 1)); line-height: 1.5; font-weight: 400;
  color: var(--sheet-text-soft);
}