/* ============================================================
   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 title block spans the page: it names the whole dossier, not a column.
   The rule belongs to the BLOCK, not to the name — on the name alone it cut
   between the name and the line beneath it, so the subtitle read as the first
   line of the page instead of as part of the heading. */
.statblock.ci-sheet .ci-titleblock {
  margin: 0 0 10px;
  padding-bottom: 5px;
  border-bottom: 2px solid var(--accent-strong);
}
.statblock.ci-sheet .ci-titleblock .monster-name {
  margin: 0;
  font-size: 22px; line-height: 1.1;
  border-bottom: none; padding-bottom: 0;
}
.statblock.ci-sheet .ci-titleblock .ci-subtitle { margin: 2px 0 0; }

/* ── The two columns ────────────────────────────────────────
   `--ci-type` multiplies every size and gap in the writing. It lives on the
   ROW, so BOTH columns read the same one and the sheet is set at a single
   size throughout — it used to sit on each column and be raised on the
   reading side alone, which is what left the lines under the portrait
   noticeably smaller than the lines beside it.

   sbFitInfoSheet raises it, and only after it has tried the column split:
   width is the free variable and changing it costs nothing, changing type
   size costs consistency. */
.ci-cols { display: flex; flex-direction: column; gap: 13px; flex: 1 1 auto; min-height: 0; --ci-type: 1; }
.ci-col { min-width: 0; }
@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. */
/* 2:3 held by padding, not `aspect-ratio`, and filled by a background rather
   than an <img>. Both of those are for the image exporter: html2canvas
   implements neither aspect-ratio nor object-fit, so the box collapsed and the
   picture came out squashed in every saved sheet. The old way is the portable
   way here. */
.ci-portrait {
  width: 100%;
  height: 0;
  padding-top: 150%;              /* 3 ÷ 2 */
  position: relative;
  margin-bottom: calc(11px * var(--ci-type, 1));
  background-color: var(--sheet-bg-deep);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border: 2px solid var(--accent-strong);
  box-shadow: 0 2px 7px rgba(var(--shade-rgb), .28);
}
/* Left empty on purpose — somewhere to draw the creature in once the sheet
   is printed. No fill behind it: the parchment shows through, which is what
   you want to draw on and what you want the printer to leave alone.

   It ASKS for much less height than a real portrait, and that is the point. A
   picture is content and the page is fitted around it; an empty frame is only
   space, so it starts small enough to cost the writing nothing and is then
   grown into whatever the writing leaves over (see sbFitInfoSheet). Set to
   2:3 like a portrait it did the opposite — the whole spread was scaled down
   to make room for a box with nothing in it. */
.ci-portrait-blank { background-color: transparent; padding-top: 100%; }

/* A picture with no column of its own: it sits in the reading column, the
   text wraps beside it, and past its bottom edge the text runs the full width.
   Its own 2:3-or-measured shape still comes from the padding rule above. */
.ci-cols.is-float { display: block; }
/* Sized by HEIGHT, not by the padding trick the column portrait uses.
   Percentage padding resolves against the CONTAINING BLOCK's width, and a
   float's containing block is the column — so `padding-top:150%` on a picture
   44% of the column wide came out three times too tall. aspect-ratio holds the
   shape until the fitter measures the picture and sets a height in pixels. */
.ci-portrait-float {
  float: right;
  width: 44%;
  height: auto;
  padding-top: 0;
  aspect-ratio: 2 / 3;
  margin: 0 0 calc(11px * var(--ci-type, 1)) calc(16px * var(--ci-type, 1));
}
@container ci-sheet (max-width: 340px) {
  /* Too narrow to read beside: the picture takes the width and the text
     starts under it. */
  .ci-portrait-float { float: none; width: 100%; margin-left: 0; }
}

.ci-portrait::after {
  content: ''; position: absolute; inset: 3px;
  border: 1px solid rgba(var(--sheet-bg-deep-rgb), .8);
  pointer-events: none;
}

/* ── Subtitle: the vitals, on one line ────────────────────────
   Race · Occupation · Voice. Three headed rows for three two-word
   answers was more furniture than content, so they read as one quiet
   line instead — under the NAME when the sheet stands alone, under
   the PORTRAIT when it's paired and the name lives next door. */
/* Sized off `--ci-type` like everything else. In the title block the variable
   isn't in scope and the fallback keeps it at the heading's own size; under
   the portrait it IS in scope, so it is set at the same size as the writing
   in the column beside it. */
.statblock.ci-sheet .ci-subtitle {
  margin: calc(-6px * var(--ci-type, 1)) 0 calc(11px * var(--ci-type, 1));
  font-size: calc(11.5px * var(--ci-type, 1)); line-height: 1.4; font-weight: 400;
  color: var(--sheet-text-mid);
  font-style: italic;
}
.statblock.ci-sheet .ci-subtitle.is-under-art {
  margin: calc(-3px * var(--ci-type, 1)) 0 calc(11px * var(--ci-type, 1));
  text-align: center;
}
.ci-sub-dot { opacity: .55; font-style: normal; }
.ci-sub-item { overflow-wrap: anywhere; }

/* ── Ability scores, under the photo ──────────────────────────
   Only when this sheet stands alone — paired, the stat block beside
   it has them and printing them twice would be worse than useless.
   Deliberately small: on a personality sheet they are something you
   look up, not the reason you opened the page. */
.ci-abilities {
  /* Three across while three fit. Fixed at three, the scores collided as soon
     as the sheet was set larger — the row is the width of the portrait, and
     that width doesn't grow with the type. Dropping to two rows of three is
     the cheaper concession. */
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(calc(46px * var(--ci-type, 1)), 1fr));
  gap: calc(4px * var(--ci-type, 1)) calc(2px * var(--ci-type, 1));
  margin-bottom: calc(12px * var(--ci-type, 1));
  padding: calc(7px * var(--ci-type, 1)) calc(4px * var(--ci-type, 1));
  border-top: 1px solid rgba(var(--sheet-bg-deep-rgb), .95);
  border-bottom: 1px solid rgba(var(--sheet-bg-deep-rgb), .95);
}
.ci-ability { text-align: center; line-height: 1.15; }
.ci-ability-name {
  display: block;
  font-family: 'Cinzel', Georgia, serif;
  font-size: calc(8.5px * var(--ci-type, 1)); font-weight: 700; letter-spacing: .9px;
  color: var(--accent-strong);
}
.ci-ability-score { font-size: calc(12px * var(--ci-type, 1)); font-weight: 700; color: var(--sheet-ink); }
.ci-ability-mod {
  font-size: calc(9.5px * var(--ci-type, 1)); color: var(--sheet-text-mid);
  margin-left: calc(2px * var(--ci-type, 1));
}

/* The vitals used to be three headed rows here. They are the one subtitle
   line above now, in both modes — see .ci-subtitle. */

/* ── 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;
}
/* Shrinkable, so a long heading wraps inside a narrow column instead of
   pushing past its edge. A heading too long for its column is set smaller by
   sbFitInfoSheet rather than shrinking the whole sheet to suit it; break-word
   is the floor under that, for a word so long that even the smallest size it
   is allowed still doesn't fit. */
.ci-title-text { flex: 0 1 auto; min-width: 0; overflow-wrap: break-word; }

/* ── Tags ─────────────────────────────────────────────────────
   Three or four words for how someone comes across, in a row of
   their own ABOVE the heading they belong to. They started out ON
   the heading, which was tidy with two and a mess with four — they
   wrapped onto a second line and read as a stray line of text
   between the title and its paragraph.

   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: flex; align-items: baseline; flex-wrap: wrap;
  gap: calc(4px * var(--ci-type, 1));
  margin-bottom: 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; }
/* On the tinted note panel an accent-tinted chip all but disappears, so they
   sit on the parchment colour there instead. */
.ci-note .ci-tag { background: var(--sheet-bg-alt); }

/* ── Sub-lines ────────────────────────────────────────────────
   Something that belongs to a section but isn't worth one of its own
   — Voice under Appearance. How a person sounds is part of how they
   come across, and you want it in front of you at the same moment as
   the rest of the description, not filed three sections away. */
.ci-subline {
  margin: calc(4px * var(--ci-type, 1)) 0 0;
  font-size: calc(10.5px * var(--ci-type, 1));
  line-height: 1.4;
  color: var(--sheet-text-mid);
}
.ci-subline-label {
  font-family: 'Cinzel', Georgia, serif;
  font-size: calc(9px * var(--ci-type, 1));
  font-weight: 700; letter-spacing: 1.1px; text-transform: uppercase;
  color: var(--sheet-ink-mid);
  margin-right: calc(5px * var(--ci-type, 1));
}
.ci-subline-value { font-style: italic; overflow-wrap: anywhere; }

/* ── 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);
}