/* ============================================================================
   shared/statblock.css — the printed look of a stat block
   ============================================================================

   The other half of shared/statblock.js: that file emits the markup, this one
   is what makes it a stat block rather than a list of paragraphs. Load both or
   neither.

   Everything here is scoped under `.statblock`, so a page can drop it in
   without it reaching anything else — which is the whole point. Play mode, the
   monster library and the creator were each carrying their own version of
   these rules; the sheets drifted apart because the CSS did.

   Colours come from the --sheet-* / --accent-strong variables in
   shared/theme.css so the sheet follows the site theme. Two surfaces
   deliberately opt out of that: the parchment placement view below, and play
   mode's fixed card palette. Both do it by overriding the variables, never by
   forking these rules.
   ========================================================================= */

/* A flex column so the two bars stay pinned to the sheet's edges. In normal
   flow the bottom bar simply followed the content, so any sheet TALLER than
   its content — one stretched to match the sheet joined beside it — drew its
   bottom rule across the middle of the page, looking for all the world like a
   broken divider. `margin-top:auto` is what holds it down there. */
.statblock{font-family:'Crimson Text',Georgia,serif;background:var(--sheet-bg-alt);border:2px solid var(--accent-strong);color:var(--sheet-ink);line-height:1.35;font-size:12px;position:relative;overflow:hidden;width:100%;display:flex;flex-direction:column;}
.statblock .top-bar,.statblock .bottom-bar{height:3px;flex:0 0 auto;background:var(--accent-strong);}
.statblock .bottom-bar{margin-top:auto;}
/* Natural height, so the fill pass can measure the setting rather than the
   box it has been stretched into. */
.statblock .content{padding:8px 12px 12px;flex:0 0 auto;}
.statblock .monster-name{font-family:'Cinzel',Georgia,serif;font-size:16px;font-weight:700;color:var(--accent-strong);margin:0 0 1px;letter-spacing:.5px;line-height:1.15;}
.statblock .monster-type{margin:0 0 3px;font-style:italic;font-size:10px;color:var(--sheet-text-mid);}
.statblock .core-stat{margin:1px 0;font-size:11px;}
.statblock .ability-table{width:100%;text-align:center;border-collapse:collapse;margin:2px 0;}
.statblock .ability-table th{font-family:'Cinzel',serif;font-size:9px;font-weight:700;color:var(--accent-strong);padding:1px 2px;letter-spacing:.8px;}
.statblock .ability-table td{padding:1px 2px;font-size:10.5px;}
.statblock .property{margin:1px 0;font-size:11px;}
.statblock .section-title{font-family:'Cinzel',serif;font-size:13px;font-weight:700;color:var(--accent-strong);border-bottom:1.5px solid var(--accent-strong);margin:6px 0 3px;padding-bottom:1px;}
.statblock .entry{margin:3px 0;font-size:11px;}
.statblock .entry-name{font-weight:700;font-style:italic;}
.statblock .legendary-desc{margin:2px 0 5px;font-size:10px;font-style:italic;color:var(--sheet-text-mid);}
/* Token sits to the RIGHT of the AC/HP/Speed block, vertically centered on it
   (≈ the Hit Points line). Positioned so it never shifts the stats. */
.statblock .core-stats-wrap{position:relative;}
/* With token art: name + size line + divider + AC/HP/Speed stack in a left column
   beside the token, so the divider stops at the token and the header sits next to it. */
.statblock .core-stats-wrap.has-token{display:flex;align-items:center;gap:14px;}
.statblock .core-stats-wrap.has-token .core-stats-col{flex:1;min-width:0;}
.statblock .monster-img{flex:0 0 auto;width:104px;height:104px;border-radius:50%;border:3px solid var(--accent-strong);overflow:hidden;box-shadow:0 2px 6px rgba(var(--shade-rgb),.25);background:var(--sheet-bg-alt);display:inline-block;}
/* An empty circle kept for art the GM draws in by hand after printing. */
.statblock .monster-img-blank{background:transparent;}
.statblock .monster-img img{width:100%;height:100%;object-fit:cover;display:block;}
.stat-divider{display:block;width:100%;height:4px;margin:3px 0;color:var(--accent-strong);}

/* Placement view on the design page: aged paper, ink rules instead of accent.

   Written as a swap of the two variables the sheets are BUILT from, rather
   than as a list of the stat block's own parts repainted by name. Every sheet
   draws its rules from --accent-strong and its tinted panels from
   --accent-rgb, so re-pointing those two on the root ages the stat block and
   the creature-info sheet alike — and a third sheet would come out on the
   same paper with nothing added here. Naming parts was what left the info
   sheet on cream beside a stat block on parchment: one spread, two colours. */
.statblock.sb-parchment{
  --accent-strong: var(--sheet-ink-mid);
  --accent-rgb: var(--sheet-accent-rgb);
  background:var(--sheet-bg-deep);border-color:var(--sheet-ink-mid);
  box-shadow:inset 0 0 20px rgba(100,60,20,.12);}
/* Headings keep the sheet's red — the one place the ink and the writing part
   company. Both sheets' heading classes, for the same reason as above. */
.statblock.sb-parchment .monster-name,
.statblock.sb-parchment .section-title,
.statblock.sb-parchment .ability-table th,
.statblock.sb-parchment .ci-section-title,
.statblock.sb-parchment .ci-note-label,
.statblock.sb-parchment .ci-tag{color:var(--sheet-accent);}

/* ── Click-to-edit affordances ────────────────────────────────
   Only lit when the creator's binder has marked the sheet editable; every
   other surface renders the same spans inert, so canvas placement, image
   export and play mode stay clean.

   The hover hint and edit state are intentionally subtle: the statblock
   should still read as a statblock, not as a form. The editing tint is a soft
   warm wash that picks up the parchment palette instead of fighting it with a
   bright crimson outline. Empty fields render a muted em-dash via
   :empty::before so they stay clickable even with no content yet. */
.statblock.sb-editable [data-sb-field]{cursor:text;border-radius:2px;transition:background .12s ease;}
.statblock.sb-editable [data-sb-field]:hover{background:rgba(var(--shade-rgb),.05);}
.statblock.sb-editable [data-sb-field][contenteditable="true"]{
  background:rgba(255,225,150,.45);outline:none;cursor:text;
}
.statblock.sb-editable [data-sb-field]:empty::before{
  content:'—';color:rgba(var(--shade-rgb),.25);font-style:italic;
}
.statblock.sb-editable [data-sb-field][contenteditable="true"]:empty::before{
  content:'';
}

@media (max-width:900px){
  .statblock{max-width:100%;}
}