/* ═══ HELHEIMRS — چاه میمیر (docs) ═══
   A reference manual first: legibility outranks atmosphere. Everything here is
   scoped under .pg-well, except three things that render elsewhere too: the
   stat block and dice tokens (the style guide calls the same renderers through
   HX.reference) and the command palette (appended to <body> by HX.fx.palette).
   Every transition names its curve: --ease-press for what a click starts,
   --ease-out for what arrives, --ease-exit for what leaves. */

.pg-well { padding-block: var(--s-6) var(--s-9); }
.pg-well .lead { font-size: var(--fs-lg); color: var(--fg); max-width: 60ch; }

/* ── the landing's search bar ── */
.pg-well .well-search { flex: 1 1 280px; max-width: 520px; display: flex; align-items: center; gap: var(--s-3); min-height: 48px; padding: 0 var(--s-4); background: var(--bg); color: var(--fg-muted); border: 1px solid var(--line-strong); border-radius: var(--r-1); box-shadow: inset 0 2px 6px rgba(0,0,0,.55); text-align: start; font-size: var(--fs-md); cursor: text; transition: border-color var(--t-fast) var(--ease-out), box-shadow var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out); }
:root[data-theme="light"] .pg-well .well-search { box-shadow: inset 0 2px 5px rgba(0,0,0,.12); }
.pg-well .well-search:hover { border-color: var(--line-glow); color: var(--fg-strong); box-shadow: inset 0 2px 6px rgba(0,0,0,.55), var(--glow-inset-soft); }
.pg-well .well-search .ico { --n: 20; color: var(--accent-text); }
.pg-well .well-search > span:first-of-type { flex: 1; }
/* a key chord reads left to right in either language: «Ctrl + K», never «K Ctrl» */
.pg-well .well-search__kbd { display: none; align-items: center; gap: 4px; direction: ltr; unicode-bidi: isolate; font-size: var(--fs-2xs); color: var(--fg-muted); }
@media (min-width: 700px) { .pg-well .well-search__kbd { display: inline-flex; } }
.pg-well .well-bilingual { display: inline-flex; align-items: center; justify-content: space-between; gap: var(--s-3); font-size: var(--fs-sm); font-weight: 600; color: var(--fg-strong); cursor: pointer; }

/* ── layout ── */
.pg-well__layout { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: var(--s-8); align-items: start; }
.pg-well__layout--rail { grid-template-columns: 56px minmax(0, 1fr); gap: var(--s-6); }
.pg-well__main { min-width: 0; max-width: 72ch; }
/* reference lists and instruments use the width; reading pages keep the measure */
.pg-well__main--wide { max-width: none; }
/* The contents run to just above the window's foot: the dice button that once
   floated at the bottom of this edge lives in the header now, and the sound pill
   floats on the other edge. */
.pg-well__side { position: sticky; top: 84px; max-height: calc(100vh - 84px - var(--s-5)); overflow: auto; scrollbar-width: thin; padding-inline-end: var(--s-2); --fade-s: 0px; --fade-e: 0px; }
/* On a window too short for the contents the column scrolls, and the edge with
   more behind it fades (as the admin tabs do): a thin scrollbar alone said nothing. */
.pg-well__side:is(.is-over-start, .is-over-end) {
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 var(--fade-s), #000 calc(100% - var(--fade-e)), transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 var(--fade-s), #000 calc(100% - var(--fade-e)), transparent);
}
.pg-well__side.is-over-start { --fade-s: 40px; }
.pg-well__side.is-over-end { --fade-e: 40px; }
.pg-well__side-head { display: grid; padding: 0 var(--s-3) var(--s-3); margin: 0 0 var(--s-3); border-bottom: 1px solid var(--line); }
.pg-well .toc-mobile { display: none; }
@media (max-width: 900px) {
  .pg-well__layout, .pg-well__layout--rail { grid-template-columns: 1fr; gap: var(--s-5); }
  .pg-well__side { display: none; }
  .pg-well .toc-mobile { display: flex; flex-wrap: wrap; align-items: end; gap: var(--s-3) var(--s-5); margin-bottom: var(--s-3); }
  .pg-well .toc-mobile__jump { flex: 1 1 220px; display: grid; gap: var(--s-2); }
  .pg-well .toc-mobile .well-bilingual { min-height: 44px; }
}

/* ── TOC: an index cut into the stone edge, not a list of links ──
   The rune column is the spine; the current entry is a lit groove, not a hairline. */
.pg-well .toc { display: grid; gap: 2px; position: relative; padding-inline-end: var(--s-3); }
.pg-well .toc::after { content: ""; position: absolute; inset-block: 0; inset-inline-end: 0; width: 2px; background: linear-gradient(180deg, transparent, var(--line-strong) 12%, var(--line-strong) 88%, transparent); }
.pg-well .toc__sec summary { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-2) var(--s-3); font-weight: 700; font-size: var(--fs-sm); color: var(--fg-strong); cursor: pointer; list-style: none; transition: background var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out); }
.pg-well .toc__sec summary::-webkit-details-marker { display: none; }
.pg-well .toc__sec summary:hover { background: rgba(255,255,255,.03); }
:root[data-theme="light"] .pg-well .toc__sec summary:hover { background: rgba(14,16,15,.04); }
/* the section runes are drawn staves (HX.art.rune), 20 tall beside a 14px name */
.pg-well .toc .rune { display: inline-flex; justify-content: center; flex: none; width: 20px; line-height: 0; letter-spacing: 0; }
.pg-well .toc__sec summary .rune { color: var(--ornament); opacity: 1; transition: color var(--t-ui) var(--ease-out), filter var(--t-ui) var(--ease-out); }
.pg-well .toc__sec summary .toc__count { margin-inline-start: auto; font-size: var(--fs-2xs); color: var(--fg-muted); font-variant-numeric: tabular-nums; }
.pg-well .toc__sec[open] summary { color: var(--accent-text); }
.pg-well .toc__sec[open] summary .rune { color: var(--accent-text); filter: drop-shadow(0 0 5px rgba(47,211,154,.45)); }
.pg-well .toc__sec summary:focus-visible .rune { color: var(--accent-text); filter: drop-shadow(0 0 5px rgba(47,211,154,.55)); }
:root[data-theme="light"] .pg-well .toc__sec :is([open] summary, summary:focus-visible) .rune { filter: none; }
.pg-well .toc__sec ul { list-style: none; margin: 0 0 var(--s-2); padding: 0; padding-inline-start: 32px; display: grid; gap: 1px; }
.pg-well .toc__sec a { position: relative; display: block; padding: var(--s-half) var(--s-3); font-size: var(--fs-sm); color: var(--fg-muted); }
.pg-well .toc__sec a:hover { color: var(--fg-strong); text-decoration: none; background: rgba(255,255,255,.03); }
:root[data-theme="light"] .pg-well .toc__sec a:hover { background: rgba(14,16,15,.04); }
.pg-well .toc__sec a[aria-current] { color: var(--accent-text); font-weight: 700; background: linear-gradient(to left, rgba(47,211,154,.1), transparent 70%); }
[dir="ltr"] .pg-well .toc__sec a[aria-current] { background: linear-gradient(to right, rgba(47,211,154,.1), transparent 70%); }
/* the lit groove: sits on the spine, so the reader's place is visible at a glance */
.pg-well .toc__sec > ul:not(.toc__grid) a[aria-current]::before { content: ""; position: absolute; inset-inline-end: calc(var(--s-3) * -1 - 1px); top: 2px; bottom: 2px; width: 3px; background: var(--emerald); box-shadow: 0 0 10px rgba(47,211,154,.7); }
.pg-well .toc__tools { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-2) var(--s-3); margin-top: var(--s-2); font-weight: 700; font-size: var(--fs-sm); color: var(--fg-muted); border-top: 1px solid var(--line); }
.pg-well .toc__tools:hover { color: var(--fg-strong); text-decoration: none; }
.pg-well .toc__tools.is-on { color: var(--accent-text); }
.pg-well .toc__tools .rune { color: inherit; }
/* Spells by level: ten small stones in two columns under «طلسم‌ها», each with its
   count; the classes and species take the same two columns. The entry shown is
   lit like a pressed segment; the groove on the spine stays with the one-column
   lists. The columns are as wide as the text needs, not half the rail: with the
   reader's text at twice the size two fixed columns cut «نیرنگ» into «نیرن|گ»
   (two words to the eye, the join broken) and "Level 1" into "Lev|el 1"; now the
   stones stack one to a row instead, and a word is never broken. */
.pg-well .toc__grid { list-style: none; margin: 2px 0 var(--s-2); padding: 0; padding-inline-start: 32px; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(5.5rem, 100%), 1fr)); gap: 4px; }
/* each level is its own small stone, so a count can only belong to the name beside it */
.pg-well .toc__grid a { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-2); min-width: 0; padding: 5px var(--s-2) 5px var(--s-3); overflow-wrap: normal; background: rgba(255,255,255,.025); box-shadow: inset 0 0 0 1px var(--line); }
:root[data-theme="light"] .pg-well .toc__grid a { background: rgba(14,16,15,.025); }
.pg-well .toc__grid a:hover { box-shadow: inset 0 0 0 1px var(--line-strong); }
.pg-well .toc__grid .toc__n { font-size: var(--fs-2xs); font-weight: 500; color: var(--fg-muted); font-variant-numeric: tabular-nums; }
.pg-well .toc__grid a[aria-current] { background: rgba(47,211,154,.12); box-shadow: inset 0 0 0 1px var(--line-glow), var(--glow-inset-soft); }
.pg-well .toc__grid a[aria-current] .toc__n { color: var(--accent-text); }
/* the tools page folds the contents into a rail of section runes */
.pg-well .toc--rail { gap: var(--s-1); padding-inline-end: var(--s-2); }
.pg-well .toc--rail a { display: grid; place-items: center; width: 44px; height: 44px; color: var(--ornament); --facet: 6px; clip-path: var(--clip-facet); transition: color var(--t-fast) var(--ease-out), background var(--t-fast) var(--ease-out); }
.pg-well .toc--rail a:hover { color: var(--fg-strong); background: rgba(255,255,255,.04); text-decoration: none; }
:root[data-theme="light"] .pg-well .toc--rail a:hover { background: rgba(14,16,15,.05); }
.pg-well .toc--rail a.is-on { color: var(--accent-text); background: rgba(47,211,154,.1); }
.pg-well .toc--rail .rune { width: auto; color: inherit; }
/* Focus. The link is cut by its own facet, and the site's ring is drawn 3px
   outside: the clip took every pixel of it, so a keyboard went down the rail
   unseen. The ring goes 3px in instead (the link is 44px with a 6px cut, as a
   segment is), with the inner glow of the other cut controls, and the rune
   wakes as it does under the pointer. The chosen rune keeps its own lit tint:
   the place and the focus stay two different marks. */
.pg-well .toc--rail a:focus-visible { outline: 2px solid var(--accent); outline-offset: -3px; box-shadow: var(--glow-inset); border-radius: 0; color: var(--fg-strong); background: rgba(255,255,255,.04); }
:root[data-theme="light"] .pg-well .toc--rail a:not(.is-on):focus-visible { background: rgba(14,16,15,.05); }
.pg-well .toc--rail a.is-on:focus-visible { color: var(--accent-text); background: rgba(47,211,154,.1); }

/* ── landing ── */
.pg-well .well-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: var(--s-7); align-items: center; margin-bottom: var(--s-8); }
.pg-well .well-hero__art { aspect-ratio: 5 / 3; max-width: 100%; }
.pg-well .well-hero__art > div { width: 100%; height: 100%; background: var(--bg-elev); }
.pg-well .well-hero__art .hx-cover { animation: wellBreath 6s ease-in-out infinite; }
@keyframes wellBreath { 0%, 100% { opacity: .88; } 50% { opacity: 1; } }
.pg-well .well-hero__search { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); margin-top: var(--s-5); }
/* Phone: the words come first. The painting becomes a faded band behind the
   heading instead of a screen of picture before it. */
@media (max-width: 900px) {
  .pg-well .well-hero { display: block; position: relative; padding-top: 56px; margin-bottom: var(--s-7); }
  .pg-well .well-hero__art { position: absolute; inset: 0 0 auto; height: 180px; aspect-ratio: auto; padding: 0; background: none; clip-path: none; opacity: .4; -webkit-mask-image: linear-gradient(#000 30%, transparent); mask-image: linear-gradient(#000 30%, transparent); z-index: 0; }
  .pg-well .well-hero__art > div { clip-path: none; background: none; }
  .pg-well .well-hero__text { position: relative; z-index: 1; }
  .pg-well .well-hero__search .well-search { max-width: none; }
  /* Frost: the faded painting is a mid grey under the kicker, and the muted ink
     sank into it (2.85:1). Body ink reads on it. */
  :root[data-theme="light"] .pg-well .well-hero__text > .kicker { color: var(--fg); }
}
/* Three primary sections on one row, each with three ways in; four secondary ones
   under them. No leftover cell at any width. */
.pg-well .well-tiles { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--s-4); margin-bottom: var(--s-8); }
.pg-well .well-tile { grid-column: span 3; display: flex; flex-direction: column; gap: var(--s-2); color: var(--fg); text-decoration: none; }
.pg-well .well-tile--primary { grid-column: span 4; }
.pg-well .well-tile:hover { text-decoration: none; }
.pg-well .well-tile :is(h2,h3) { margin: 0; font-size: var(--fs-lg); }
.pg-well .well-tile--primary :is(h2,h3) { font-size: var(--fs-xl); }
.pg-well .well-tile p { margin: 0; color: var(--fg-muted); font-size: var(--fs-sm); }
/* drawn staves, 32 on the three primary tiles and 24 on the four under them */
.pg-well .well-tile__rune { display: block; line-height: 0; letter-spacing: 0; opacity: 1; color: var(--ornament); transition: color var(--t-ui) var(--ease-out), filter var(--t-ui) var(--ease-out); }
.pg-well .well-tile:hover .well-tile__rune, .pg-well .well-tile:focus-visible .well-tile__rune, .pg-well .well-tile:focus-within .well-tile__rune { color: var(--accent-text); filter: drop-shadow(0 0 6px rgba(47,211,154,.5)); }
:root[data-theme="light"] .pg-well .well-tile :is(.well-tile__rune) { filter: none; }
/* the title link covers the tile; the three entries sit above it */
.pg-well .well-tile__link { color: var(--fg-strong); }
.pg-well .well-tile__link::after { content: ""; position: absolute; inset: 0; z-index: 0; }
.pg-well .well-tile__link:hover { text-decoration: none; }
.pg-well .well-tile__pop { list-style: none; margin: var(--s-2) 0 0; padding: var(--s-2) 0 0; border-top: 1px solid var(--line); display: grid; }
.pg-well .well-tile__pop a { position: relative; z-index: 1; display: flex; align-items: center; gap: var(--s-2); min-height: 34px; font-size: var(--fs-sm); color: var(--fg); }
/* the same carved lozenge as the separator: the font's ᛫ is a round dot */
.pg-well .well-tile__pop a::before { content: ""; flex: none; width: 5px; height: 5px; margin-inline: 2px; background: var(--ornament); transform: rotate(45deg); }
.pg-well .well-tile__pop a:hover { color: var(--accent-text); }
.pg-well .well-tile__count { margin-top: auto; padding-top: var(--s-1); font-size: var(--fs-2xs); color: var(--fg-muted); }
@media (max-width: 1000px) { .pg-well .well-tile { grid-column: span 6; } }
@media (max-width: 700px) { .pg-well .well-tile--primary { grid-column: span 12; } }

/* glossary: a definition list grouped by subject, read without hovering anything */
.pg-well .well-glossary { scroll-margin-top: 96px; }
.pg-well .gloss__tools { display: flex; justify-content: flex-end; margin: calc(var(--s-4) * -1) 0 var(--s-4); }
.pg-well .gloss { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: var(--s-6) var(--s-7); }
.pg-well .gloss__group h3 { margin: 0 0 var(--s-3); padding-bottom: var(--s-2); font-size: var(--fs-sm); color: var(--accent-text); border-bottom: 1px solid var(--line-glow); }
.pg-well .gloss__group dl { margin: 0; display: grid; gap: var(--s-3); }
.pg-well .gloss__entry dt { font-size: .9375rem; font-weight: 700; line-height: 1.5; color: var(--fg-strong); }
.pg-well .gloss__entry dt a { color: inherit; }
.pg-well .gloss__entry dt a:hover { color: var(--accent-text); }
.pg-well .gloss__entry dd { margin: 2px 0 0; max-width: 48ch; font-size: .8125rem; line-height: 1.7; color: var(--fg-muted); }

/* ── lists & items ── */
.pg-well .well-list { margin-top: var(--s-5); }
.pg-well .well-items { grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); }
.pg-well .well-item { display: grid; gap: var(--s-2); align-content: start; color: var(--fg); text-decoration: none; }
.pg-well .well-item:hover { text-decoration: none; }
.pg-well .well-item :is(h2,h3) { margin: 0; font-size: var(--fs-lg); }
.pg-well .well-item p { margin: 0; font-size: var(--fs-sm); }
.pg-well .well-item__rune { display: block; line-height: 0; letter-spacing: 0; color: var(--ornament); transition: color var(--t-ui) var(--ease-out), filter var(--t-ui) var(--ease-out); }
.pg-well .well-item:hover .well-item__rune, .pg-well .well-item:focus-visible .well-item__rune { color: var(--accent-text); filter: drop-shadow(0 0 6px rgba(47,211,154,.5)); }
:root[data-theme="light"] .pg-well .well-item .well-item__rune { filter: none; }
.pg-well .well-item__meta { margin-top: var(--s-1); }
/* previous and next: two labelled cards, the previous one at inline-start */
.pg-well .well-pn { display: flex; justify-content: space-between; gap: var(--s-4); margin-top: var(--s-8); padding-top: var(--s-5); border-top: 1px solid var(--line); }
.pg-well .well-pn__card { --bd: var(--line); display: grid; gap: 2px; align-content: start; min-width: min(240px, 100%); max-width: 48%; padding: var(--s-3) var(--s-4); background: var(--facet-edges), var(--bg-elev); border: 1px solid var(--bd); --facet: 10px; clip-path: var(--clip-facet); color: var(--fg-strong); text-decoration: none; transition: border-color var(--t-fast) var(--ease-out), background var(--t-fast) var(--ease-out); }
.pg-well .well-pn__card--next { justify-items: end; text-align: end; }
.pg-well .well-pn__card:hover { --bd: var(--line-glow); background: var(--facet-edges), var(--bg-elev-2); text-decoration: none; }
.pg-well .well-pn__dir { display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-2xs); font-weight: 600; color: var(--fg-muted); }
.pg-well .well-pn__dir .ico { --n: 16; }
.pg-well .well-pn__title { font-size: .9375rem; font-weight: 700; }
@media (max-width: 600px) { .pg-well .well-pn__card { min-width: 0; flex: 1 1 0; max-width: none; } }

/* ── rules ── */
.pg-well .well-rule p { font-size: var(--fs-lg); line-height: var(--lh-body); }
.pg-well .well-example { --bd: var(--emerald); display: flex; gap: var(--s-4); margin: var(--s-6) 0; padding: var(--s-4) var(--s-5); border-inline-start: 2px solid var(--bd); --facet: 10px; clip-path: var(--clip-facet); max-width: var(--measure);
  /* the emerald rule turns the cut corner on its own side (top right in Persian,
     bottom left in English), 2px like the rule; the far corner has no edge to close */
  background: linear-gradient(to bottom left, transparent calc(50% - 1.5px), var(--bd) calc(50% - 1.5px) calc(50% + .5px), transparent calc(50% + .5px)) top right / var(--facet) var(--facet) no-repeat border-box, var(--bg-elev); }
[dir="ltr"] .pg-well .well-example { background: linear-gradient(to top right, transparent calc(50% - 1.5px), var(--bd) calc(50% - 1.5px) calc(50% + .5px), transparent calc(50% + .5px)) bottom left / var(--facet) var(--facet) no-repeat border-box, var(--bg-elev); }
.pg-well .well-example .rune { line-height: 0; letter-spacing: 0; flex: none; padding-top: 2px; }
/* a section head's rune is a drawn stave too, the 24 of a section ornament */
.pg-well .sec-head .rune { display: inline-flex; line-height: 0; letter-spacing: 0; }
.pg-well .well-example b { display: block; color: var(--accent-text); margin-bottom: 4px; }
.pg-well .well-example p { margin: 0; font-size: var(--fs-md); color: var(--fg); line-height: var(--lh-body); }
.pg-well .cond-grid { margin-top: var(--s-5); }
.pg-well .cond :is(h2,h3) { font-size: var(--fs-lg); margin-bottom: var(--s-1); }
.pg-well .cond p { margin: 0; font-size: var(--fs-sm); color: var(--fg); line-height: var(--lh-body); }

/* ── detail pages ── */
.pg-well .well-detail__head { display: flex; gap: var(--s-5); align-items: flex-start; margin-bottom: var(--s-5); }
.pg-well .well-detail__rune { letter-spacing: 0; line-height: 0; padding-top: var(--s-3); flex: none; color: var(--ornament); }
.pg-well .well-facts { --bd: var(--line); position: relative; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: 1px; margin: var(--s-5) 0 var(--s-7); background: var(--facet-edges), var(--line); border: 1px solid var(--bd); --facet: 14px; clip-path: var(--clip-facet); }
.pg-well .well-facts > div { background: var(--bg-elev); padding: var(--s-3) var(--s-4); }
.pg-well .well-facts dt { font-size: var(--fs-2xs); color: var(--fg-muted); font-weight: 600; }
.pg-well .well-facts dd { margin: 2px 0 0; color: var(--fg-strong); font-weight: 600; }
.pg-well .well-tbl th:first-child { white-space: nowrap; }
@media (max-width: 600px) { .pg-well .well-detail__head { flex-direction: column; gap: var(--s-2); } }

/* ── the separator between facts: a carved lozenge ──
   The rune font draws ᛫ as a round dot the size of Vazirmatn's «۰», so at 1x
   «۲۰:۰۰ ᛫ ۴ ساعته» read «۲۰:۰۰ ۰ ۴». The character stays (for the bdi and a
   text copy) at no size; the mark is a 5px square on its point, which no digit
   resembles. The same rule as the profile's and the panel's; components.css may
   carry it for every page, and this one then agrees with it. */
:is(.pg-well, .statblock, .spell, .palette) .sep { display: inline-block; unicode-bidi: isolate; width: 5px; height: 5px; margin-inline: 4px; vertical-align: middle; background: var(--ornament); transform: rotate(45deg); font-size: 0; line-height: 0; overflow: hidden; color: transparent; }
@media (forced-colors: active) { :is(.pg-well, .statblock, .spell, .palette) .sep, .pg-well .well-tile__pop a::before { forced-color-adjust: none; background: CanvasText; } }

/* ── closed chamfers ──
   --facet-edges draws a faceted surface's diagonal in its own background, and a
   child that paints over the cut corner (a painting, a filter row, a table, the
   palette's head) hid it: the border ran to the cut and stopped. On these the
   diagonal is laid over the children too, from an ::after the size of the border
   box, so the outline is one six-sided line. */
:is(.pg-well .spell-filters__rail, .pg-well .spell__face, .pg-well .spell-tbl-wrap, .pg-well .well-facts, .palette)::after { content: ""; position: absolute; inset: -1px; z-index: 3; pointer-events: none; background: var(--facet-edges); }

/* ── dice: one token, everywhere ──
   Latin, isolated left to right, never the Cinzel display face (in its small caps
   '6d8 + 18' reads as '6D8 + 18'), never broken across a line. Global because the
   style guide and the palette render through the same helper. */
.dice { font-family: var(--font-body); font-style: normal; font-variant: normal; font-variant-numeric: tabular-nums; letter-spacing: 0; text-transform: none; white-space: nowrap; direction: ltr; unicode-bidi: isolate; }
/* fate.css also styles a global .dice (monospace, for the sheet); in the reference
   the token is set in the text face, at the text's size */
:is(.pg-well, .statblock, .spell, .palette) .dice { font-family: var(--font-body); font-size: 1em; font-weight: inherit; letter-spacing: 0; }

/* ── the other language, as a gloss ──
   Bilingual mode adds a name in the other language. It is subordinate: smaller,
   muted, in the body face (not Cinzel capitals), and always separated from the
   main name. The separation is a physical margin on the side facing the main
   text — a logical one would flip with the gloss's own direction and collapse at
   the script boundary («قدرSTR»). */
/* a gloss is a size below its term, but never below the 12px floor: under a
   12px label (a fact's name, a palette line) .78em alone came out at 9px */
:is(.pg-well, .statblock, .palette) .term-en { font: 500 max(.78em, var(--fs-2xs))/1.3 var(--font-body); letter-spacing: 0; text-transform: none; font-variant: normal; font-style: normal; color: var(--fg-muted); margin: 0; }
:root[dir="rtl"] :is(.pg-well, .statblock) .term-en { margin-right: .45em; }
:root[dir="ltr"] :is(.pg-well, .statblock) .term-en { margin-left: .45em; }
/* under a heading it takes its own line, in sentence case */
:root[dir] :is(.pg-well, .statblock) :is(h1, h2, h3) > .term-en { display: block; margin: 6px 0 0; font-size: var(--fs-xs); line-height: 1.4; letter-spacing: .01em; }
:root[dir] :is(.pg-well, .statblock) h1 > .term-en { font-size: var(--fs-md); }
/* a block gloss lines up with its heading, whatever its own direction */
:root[dir="rtl"] :is(.pg-well, .statblock) :is(h1, h2, h3) > .term-en { text-align: right; }
:root[dir="ltr"] :is(.pg-well, .statblock) :is(h1, h2, h3) > .term-en { text-align: left; }
:is(.pg-well, .statblock) .term-en[dir="rtl"] { direction: rtl; }
:is(.pg-well, .statblock) .term-en:not([hidden]) { animation: wellGloss 180ms var(--ease-out) both; }
@keyframes wellGloss { from { opacity: 0; } }

/* ── no synthesised italic on Persian ──
   Neither Vazirmatn nor Estedad has an italic; the browser's slant leans Persian
   against its own direction. Persian marks subordinate text by weight, size and
   colour. Italic stays only on English runs. */
:is(.pg-well, .statblock, .palette) :is(i, em, .sub):lang(fa), .pg-well .sub, .statblock .sub { font-style: normal; }
:is(.pg-well, .statblock) .sub:lang(en) { font-style: italic; }
:is(.pg-well, .statblock) .sub [lang="fa"] { font-style: normal; }

/* ── spells: filters as one rail cut into stone ── */
.pg-well .spell-filters { margin: var(--s-5) 0; }
/* the rail stays in reach while the grid scrolls under it */
@media (min-width: 901px) { .pg-well .spell-filters { position: sticky; top: 76px; z-index: 5; } }
.pg-well .spell-filters__rail { --bd: var(--line-strong); position: relative; display: grid; gap: 1px; background: var(--facet-edges), var(--line); border: 1px solid var(--bd); --facet: 10px; clip-path: var(--clip-facet); box-shadow: var(--shadow-stone); }
.pg-well .spell-filters__row { display: flex; align-items: center; gap: var(--s-3); min-width: 0; padding: var(--s-2) var(--s-4); background: var(--bg-elev); }
.pg-well .spell-filters__label { flex: none; min-width: 3.2em; font-size: var(--fs-2xs); font-weight: 700; color: var(--fg-muted); }
/* rows never wrap, so no chip is ever left alone on a line; too long, they scroll */
.pg-well .spell-filters__scroll { flex: 1; min-width: 0; overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain; }
.pg-well .spell-filters__scroll::-webkit-scrollbar { display: none; }
.pg-well .spell-filters__scroll.is-scrolling { -webkit-mask-image: linear-gradient(to left, transparent, #000 24px, #000 calc(100% - 24px), transparent); mask-image: linear-gradient(to left, transparent, #000 24px, #000 calc(100% - 24px), transparent); padding-inline: 12px; }
.pg-well .spell-filters__chips { display: flex; flex-wrap: nowrap; gap: var(--s-2); align-items: center; width: max-content; padding: 3px 2px; }
/* the active filter reads as light caught in a groove, not as a filled pill */
.pg-well .spell-filters .chip[aria-pressed="true"] { --chip-bg: rgba(47,211,154,.1); box-shadow: var(--glow-inset-soft), inset 0 2px 5px rgba(0,0,0,.45); }
:root[data-theme="light"] .pg-well .spell-filters .chip[aria-pressed="true"] { box-shadow: var(--glow-inset-soft), inset 0 2px 4px rgba(20,24,22,.12); }
.pg-well .spell-filters .chip .spell__mark { width: 16px; height: 16px; }
.pg-well .spell-filters__extra { display: grid; gap: 1px; }
.pg-well .spell-filters__foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-4); padding: var(--s-2) var(--s-4); background: var(--bg-elev); }
.pg-well .spell-filters__more { display: inline-flex; align-items: center; gap: var(--s-2); min-height: 34px; padding: 0 var(--s-1); background: none; border: 0; color: var(--fg-muted); font-size: var(--fs-sm); font-weight: 600; cursor: pointer; transition: color var(--t-fast) var(--ease-out); }
.pg-well .spell-filters__more:hover { color: var(--fg-strong); }
.pg-well .spell-filters__more[aria-expanded="true"] { color: var(--accent-text); }
.pg-well .spell-filters__more .ico { --n: 16; }
.pg-well .spell-filters__badge { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; background: var(--emerald); color: var(--accent-fg); font-size: var(--fs-2xs); font-weight: 700; clip-path: var(--clip-hex); }
:root[data-theme="light"] .pg-well .spell-filters__badge { background: var(--jade); }
.pg-well .spell-filters__count { margin: 0; margin-inline-start: auto; font-size: var(--fs-sm); font-weight: 600; color: var(--fg-strong); }
.pg-well .spell-filters__clear { min-height: 34px; padding: 0 var(--s-1); background: none; border: 0; color: var(--fg-muted); font-size: var(--fs-sm); cursor: pointer; text-decoration: underline; text-underline-offset: .25em; transition: color var(--t-fast) var(--ease-out); }
.pg-well .spell-filters__clear:hover { color: var(--fg-strong); }
/* a segmented control: one choice of several, joined in one stone */
.pg-well .seg { --bd: var(--line-strong); display: inline-flex; flex-wrap: nowrap; background: var(--facet-edges), var(--bg); border: 1px solid var(--bd); --facet: 6px; clip-path: var(--clip-facet); }
/* one stone, cut into segments: the segments are not cut again (a chamfer on each
   broke the joints between them) */
.pg-well .seg__btn { min-height: 32px; min-width: 40px; padding: 0 var(--s-3); background: none; border: 0; border-inline-start: 1px solid var(--line); clip-path: none; color: var(--fg); font-size: var(--fs-xs); font-weight: 600; white-space: nowrap; cursor: pointer; transition: background var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out), box-shadow var(--t-fast) var(--ease-out); }
.pg-well .seg__btn:first-child { border-inline-start: 0; }
.pg-well .seg__btn:hover { color: var(--fg-strong); background: rgba(255,255,255,.03); }
:root[data-theme="light"] .pg-well .seg__btn:hover { background: rgba(14,16,15,.04); }
.pg-well .seg__btn[aria-pressed="true"] { background: rgba(47,211,154,.13); color: var(--accent-text); box-shadow: var(--glow-inset-soft); }
.pg-well .seg__btn:focus-visible { outline: 2px solid var(--accent); outline-offset: -3px; }
@media (pointer: coarse) { .pg-well .seg__btn { min-height: 44px; } }
@media (max-width: 600px) {
  .pg-well .spell-filters__row { padding-inline: var(--s-3); }
  .pg-well .spell-filters__foot { padding-inline: var(--s-3); }
  .pg-well .spell-filters__count { order: -2; flex: 1 0 auto; margin: 0; }
  .pg-well .spell-filters__clear { order: -1; }
  .pg-well .spell-filters__more { flex-basis: 100%; justify-content: flex-start; }
  .pg-well .spell-filters__foot .seg--view { order: 1; }
  .pg-well .seg--view { margin-inline-start: auto; }
}

/* ── spell cards: dense enough to scan, still cards to turn ──
   The front sets the card's height; the back lies over it and scrolls.
   The track's least width is in rem (196px at the default size), so a reader
   who sets text at twice the size gets two columns of whole words, not four
   columns of "Instantan|eous". */
.pg-well .spell-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(12.25rem, 100%), 1fr)); gap: var(--s-4); }
.pg-well .spell { position: relative; display: flex; perspective: 1400px; }
/* A card off screen is not styled, laid out or painted until it nears the
   view; its last measured height holds its place. The flip and the find bar
   still reach it. While a card turns, its near edge swings out of its box, which
   the containment would clip: well.js lets it out for the length of the turn. */
.pg-well .spell-grid .spell { content-visibility: auto; contain-intrinsic-size: auto 372px; }
.pg-well .spell-grid .spell.is-turning { content-visibility: visible; }
/* a batch asked for later is kept in a box of its own (well.js), which the grid does not see */
.pg-well .spell-batch { display: contents; }
/* the turn starts on the first frame (a click is answered at once) and lifts the
   card toward the reader at its middle beat (the lift is well.js's, through the
   animation API) */
.pg-well .spell__inner { position: relative; flex: 1; transform-style: preserve-3d; transition: transform 520ms var(--ease-press, cubic-bezier(.3,.7,.4,1)); }
.pg-well .spell.is-flipped .spell__inner { transform: rotateY(180deg); }

/* ── the cards by level: each level opens under its heading and count ── */
.pg-well .spell-level + .spell-level { margin-top: var(--s-7); }
.pg-well .spell-level__head { display: flex; align-items: center; gap: var(--s-3); margin: 0 0 var(--s-4); font-size: var(--fs-lg); line-height: 1.3; color: var(--fg-strong); }
/* the count is a small stretched hex, as in the reference editor, so «سطح ۱  ۴۹» never reads as one number */
.pg-well .spell-level__n {
  display: inline-grid; place-items: center; min-width: 26px; height: 20px; padding: 0 6px;
  font-size: var(--fs-2xs); font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; color: var(--fg-muted); background: var(--bg-elev-2);
  clip-path: polygon(5px 0, calc(100% - 5px) 0, 100% 50%, calc(100% - 5px) 100%, 5px 100%, 0 50%);
}
/* a carved rule runs on from the count to the far edge, fading as it goes */
.pg-well .spell-level__head::after { content: ""; flex: 1; min-width: var(--s-5); height: 1px; background: linear-gradient(to left, var(--line-strong), transparent); }
[dir="ltr"] .pg-well .spell-level__head::after { background: linear-gradient(to right, var(--line-strong), transparent); }

/* ── the next batch, asked for at the foot of the list ── */
.pg-well .spell-more { display: grid; justify-items: center; gap: var(--s-2); margin: var(--s-6) 0 var(--s-4); text-align: center; }
/* never the scroll anchor: held in place by the browser, it would throw the view a batch down as the batch arrived above it */
.pg-well [data-more-box] { overflow-anchor: none; }
.pg-well .spell-more__n { margin: 0; font-size: var(--fs-sm); color: var(--fg-muted); }
/* one line while it fits; on a narrow screen at large text («Show 48 more spells
   (271 left)» is 420px at 200 % on a 412px phone) the count takes a line of its
   own under the ask, centred, and the ask itself may break between words, so the
   button is never wider than the column. Each line is still one figure entire. */
.pg-well .spell-more__btn { width: min(100%, 520px); max-width: 100%; flex-wrap: wrap; justify-content: center; column-gap: .5em; row-gap: 0; padding-block: var(--s-2); white-space: normal; text-align: center; }
.pg-well .spell-more__btn > * { max-width: 100%; }
.pg-well .spell-more__btn small { color: var(--fg-muted); font-weight: 400; white-space: nowrap; }
/* the end of the list: the line alone, under a short rule that fades at both ends */
.pg-well .spell-more.is-done::before { content: ""; width: min(240px, 60%); height: 1px; margin-bottom: var(--s-2); background: linear-gradient(to right, transparent, var(--line-strong), transparent); }
/* the batch lands where the reader is looking: it brightens and settles, but is never a blank */
@media (prefers-reduced-motion: no-preference) {
  .pg-well .spell.is-new { animation: spellIn 240ms var(--ease-out) backwards; animation-delay: calc(var(--i, 0) * 40ms); }
  .pg-well .spell-row.is-new { animation: spellRowIn 240ms var(--ease-out) backwards; animation-delay: calc(var(--i, 0) * 30ms); }
}
@keyframes spellIn { from { opacity: .55; translate: 0 8px; } }
@keyframes spellRowIn { from { opacity: .55; } }
.pg-well .spell__face { --bd: var(--line-strong); backface-visibility: hidden; -webkit-backface-visibility: hidden; background: var(--facet-edges), var(--stone-grad); border: 1px solid var(--bd); --facet: 14px; clip-path: var(--clip-facet); display: flex; flex-direction: column; overflow: hidden; box-shadow: var(--shadow-stone); transition: border-color var(--t-fast) var(--ease-out), box-shadow var(--t-fast) var(--ease-out); }
.pg-well .spell__front { position: relative; height: 100%; }
.pg-well .spell__back { position: absolute; inset: 0; transform: rotateY(180deg); padding: var(--s-3) var(--s-4); overflow: auto; scrollbar-width: thin; gap: var(--s-2); }
/* The face turned away is gone, not only behind: find-in-page, a screen reader's
   virtual cursor and a text sweep stop landing on words nobody can see (its
   mirrored back face measured as «۳+»). It goes once the turn is over; the face
   turning in shows at once (backface-visibility hides it until it is past edge-on). */
.pg-well .spell__back, .pg-well .spell.is-flipped .spell__front { visibility: hidden; transition: border-color var(--t-fast) var(--ease-out), box-shadow var(--t-fast) var(--ease-out), visibility 0s linear 520ms; }
.pg-well .spell.is-flipped .spell__back { visibility: visible; transition-delay: 0s; }
.pg-well .spell:hover .spell__face, .pg-well .spell:focus-within .spell__face { --bd: var(--line-glow); box-shadow: var(--shadow-stone), var(--glow-inset-soft); }
.pg-well .spell__art { flex: none; aspect-ratio: 5 / 3; border-bottom: 1px solid var(--line-glow); }
.pg-well .spell__art .hx-cover { height: 100%; }
/* A spell without a painting of its own is headed by its school: the sigil and the
   school's name on a dark band, over the generic scene faded to a texture. Dark
   in both themes, like the paintings beside it; the eight sigils are meant to
   repeat, as a key does. */
.pg-well .spell__band { position: relative; flex: none; display: flex; align-items: center; gap: var(--s-3); height: 56px; padding-inline: var(--s-3) 64px; overflow: hidden; background: #0E1012; border-bottom: 1px solid var(--line-glow); color: var(--emerald-soft); }
/* the school's one shared painting (well.js texURL), as an image */
.pg-well .spell__band-tex { position: absolute; inset: 0; opacity: .35; background-position: center; background-size: cover; background-repeat: no-repeat; -webkit-mask-image: linear-gradient(to left, transparent, #000 45%); mask-image: linear-gradient(to left, transparent, #000 45%); }
[dir="ltr"] .pg-well .spell__band-tex { -webkit-mask-image: linear-gradient(to right, transparent, #000 45%); mask-image: linear-gradient(to right, transparent, #000 45%); }
.pg-well .spell__band .spell-sigil { position: relative; --n: 32; filter: drop-shadow(0 0 6px rgba(47,211,154,.4)); }
.pg-well .spell__band-name { position: relative; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-xs); font-weight: 700; line-height: 1.3; color: var(--frost); }
.pg-well .spell--band .spell__marks { top: 15px; }
/* what the spell does, in its first lines, where the painting would have been */
.pg-well .spell__gist { margin: 0 0 var(--s-3); font-size: .8125rem; line-height: 1.65; color: var(--fg-muted); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; }
.pg-well .spell__meta { flex: 1; display: flex; flex-direction: column; gap: 2px; padding: var(--s-3); }
.pg-well .spell__name { margin: 0; font-size: var(--fs-md); line-height: 1.35; }
.pg-well .spell__school { margin: 0; font-size: var(--fs-2xs); font-weight: 600; color: var(--accent-text); }
/* the four facts a player scans for, on the face of the card.
   Two to a line while each fact's longest word fits its half; a fact whose word
   does not («Instantaneous» on a 236px card at 200 % text) takes the whole line
   instead of being cut inside its letters. A flex wrap, not a grid, so the test
   is each fact's own content: an item's automatic minimum is its longest word,
   and max-width caps that at the line, so a word wider than the card itself
   still wraps rather than spilling out of it. Both lists, front and back. */
.pg-well :is(.spell__micro, .spell__stats) { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-3); }
.pg-well :is(.spell__micro, .spell__stats) > div { flex: 1 1 calc(50% - var(--s-3)); max-width: 100%; }
.pg-well .spell__micro { margin: var(--s-2) 0 var(--s-3); padding-top: var(--s-2); border-top: 1px solid var(--line); font-size: var(--fs-2xs); line-height: 1.4; }
.pg-well .spell__micro dt { color: var(--fg-muted); }
.pg-well .spell__micro dd { margin: 0; color: var(--fg-strong); font-weight: 600; }
.pg-well .spell__flip { margin-top: auto; align-self: stretch; }
.pg-well .spell__back .spell__flip { margin-top: auto; flex: none; }
.pg-well .spell__stats { margin: 0; padding: var(--s-2) 0; border-block: 1px solid var(--line); font-size: var(--fs-2xs); }
.pg-well .spell__stats dt { color: var(--fg-muted); }
.pg-well .spell__stats dd { margin: 0; color: var(--fg-strong); font-weight: 600; }
/* «ک، ح، م»: each initial carries its word in a title; no dotted underline under
   one letter on a small card */
.spell .spell__abbr { text-decoration: none; cursor: help; }
.pg-well .spell__desc { margin: 0; font-size: .8125rem; line-height: 1.75; }
.pg-well .spell__classes { margin: 0; font-size: var(--fs-2xs); color: var(--fg-muted); }
.pg-well .spell-single { max-width: 420px; margin: var(--s-5) 0 var(--s-8); }
.pg-well .spell--lg .spell__name { font-size: var(--fs-xl); }
.pg-well .spell--lg .spell__micro { font-size: var(--fs-sm); }
.pg-well .spell--lg .spell__desc { font-size: var(--fs-md); }
/* concentration is a hollow ring, ritual an hourglass (a ritual casting takes ten
   minutes longer); the same marks key the filters and the table */
.pg-well .spell__mark { display: inline-grid; place-items: center; width: 22px; height: 22px; flex: none; color: currentColor; line-height: 0; }
.pg-well .spell__mark .ico { --n: 16; }
.pg-well .spell__mark--conc::before { content: ""; width: 10px; height: 10px; border: 2px solid currentColor; border-radius: 50%; }
.pg-well .spell__marks { position: absolute; top: var(--s-2); inset-inline-end: var(--s-2); z-index: 1; display: flex; gap: 6px; }
/* on the painting, whatever the theme: the art is dark in both */
.pg-well .spell__marks .spell__mark { width: 26px; height: 26px; color: var(--emerald-soft); background: rgba(7,9,10,.78); border: 1px solid rgba(47,211,154,.45); border-radius: 50%; }

/* ── spell table: the same list as a sortable reference ── */
.pg-well .spell-tbl-wrap { --bd: var(--line); position: relative; border: 1px solid var(--bd); --facet: 10px; clip-path: var(--clip-facet); background: var(--facet-edges), var(--bg-elev); }
.pg-well .spell-tbl { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.pg-well .spell-tbl thead th { padding: 0 var(--s-3); white-space: nowrap; }
.pg-well .spell-tbl thead button { display: inline-flex; align-items: center; gap: 4px; min-height: 40px; padding: 0; background: none; border: 0; color: var(--fg-strong); font: inherit; font-weight: 700; cursor: pointer; }
.pg-well .spell-tbl thead button:hover { color: var(--accent-text); }
.pg-well .spell-tbl__arrow { min-width: 1ch; color: var(--accent-text); }
.pg-well .spell-row__main { cursor: pointer; transition: background var(--t-fast) var(--ease-out); }
.pg-well .spell-row__main:hover, .pg-well .spell-row.is-open .spell-row__main { background: rgba(47,211,154,.06); }
.pg-well .spell-row__main > :is(th, td) { height: 48px; padding-block: 4px; vertical-align: middle; white-space: nowrap; }
.pg-well .spell-row__main > th { background: none; font-weight: 400; }
.pg-well .spell-row__art { display: inline-block; vertical-align: middle; width: 32px; height: 32px; margin-inline-end: var(--s-3); clip-path: var(--clip-hex); background: var(--bg); }
.pg-well .spell-row__art .hx-cover { width: 100%; height: 100%; }
/* a row without a painting carries its school's sigil, small, beside the school's name */
.pg-well .spell-row__art--sigil { display: inline-grid; place-items: center; background: #0E1012; color: var(--emerald-soft); }
.pg-well .spell-row__art--sigil .ico { --n: 16; }
.pg-well .spell-row__text { display: inline-block; vertical-align: middle; }
.pg-well .spell-row__open { padding: 0; background: none; border: 0; font: inherit; font-weight: 700; color: var(--fg-strong); text-align: start; cursor: pointer; }
.pg-well .spell-row__open:hover { color: var(--accent-text); }
.pg-well .spell-row__meta { display: none; }
.pg-well .spell-tbl :is(.spell-tbl__conc, .spell-tbl__ritual) { color: var(--accent-text); text-align: center; }
.pg-well .spell-tbl :is(th, td).spell-tbl__level { text-align: center; }
.pg-well .spell-row__detail td { padding: var(--s-3) var(--s-4) var(--s-4); background: var(--bg); white-space: normal; }
.pg-well .spell-row__detail .spell__stats { max-width: 420px; margin-bottom: var(--s-3); }
.pg-well .spell-row__detail .spell__desc { max-width: var(--measure); margin-bottom: var(--s-2); font-size: var(--fs-sm); }
.pg-well .spell-row__page { display: inline-block; margin-top: var(--s-2); font-size: var(--fs-sm); font-weight: 600; }
/* phone: each spell is one 64px row — emblem, name, its level, school, time and range */
@media (max-width: 600px) {
  .pg-well .spell-tbl-wrap { --facet: 8px; }
  .pg-well .spell-tbl, .pg-well .spell-tbl tbody, .pg-well .spell-tbl tr, .pg-well .spell-row__detail td { display: block; }
  .pg-well .spell-tbl thead { display: none; }
  .pg-well .spell-tbl .spell-row__main { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; min-height: 64px; padding: var(--s-2) var(--s-3); border-bottom: 1px solid var(--line); }
  .pg-well .spell-row__main > :is(th, td) { height: auto; padding: 0; border: 0; }
  .pg-well .spell-row__main > td { display: none; }
  .pg-well .spell-row__main > :is(.spell-tbl__conc, .spell-tbl__ritual) { display: block; }
  .pg-well .spell-row__main > th { display: flex; align-items: center; gap: var(--s-3); min-width: 0; white-space: normal; }
  .pg-well .spell-row__art { width: 48px; height: 48px; margin: 0; flex: none; }
  .pg-well .spell-row__art--sigil { display: grid; }
  .pg-well .spell-row__art--sigil .ico { --n: 24; }
  .pg-well .spell-row__text { display: grid; min-width: 0; }
  /* the facts wrap whole, never cut. At 130 % text an ellipsis here took the end
     of «120 feet» («12…») and, right to left, the start of «۳۶ متر» («۶…»): a
     different range. Now a fact that does not fit takes the next line, entire.
     The lozenge belongs to the fact after it and hangs into the column gap; a
     fact that opens a line has its lozenge pulled past the edge, where the clip
     hides it, so no line starts or ends on a mark. A fact longer than a line (none
     yet) still breaks between its own words, inside the row. */
  .pg-well .spell-row__meta { --gap: calc(5px + .75rem); display: flex; flex-wrap: wrap; column-gap: var(--gap); overflow-x: clip; font-size: var(--fs-2xs); line-height: 1.5; color: var(--fg-muted); }
  .pg-well .spell-row__fact { max-width: calc(100% + var(--gap)); margin-inline-start: calc(-1 * var(--gap)); }
  .pg-well .spell-row__fact:first-child { max-width: 100%; margin-inline-start: 0; }
  .pg-well .spell-row__meta .sep { margin-inline: .375rem; }
  .pg-well .spell-row__detail td { padding-inline: var(--s-3); border-bottom: 1px solid var(--line); }
  /* a row off screen waits to be laid out, as a card does */
  .pg-well .spell-tbl .spell-row { content-visibility: auto; contain-intrinsic-size: auto 64px; }
}

/* ── monsters ── */
.pg-well .beast-list { grid-template-columns: repeat(auto-fill, minmax(min(340px, 100%), 1fr)); }
.pg-well .beast { padding: 0; display: grid; grid-template-rows: 150px auto; }
.pg-well .beast__art { border-bottom: 1px solid var(--line-glow); }
.pg-well .beast__art .hx-cover { height: 100%; }
.pg-well .beast__body { padding: var(--s-4) var(--s-5) var(--s-5); display: grid; gap: var(--s-3); }
.pg-well .beast__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-3); }
.pg-well .beast__body :is(h2,h3) { margin: 0; font-size: var(--fs-xl); }
.pg-well .beast__body :is(h2,h3) a { color: var(--fg-strong); }
.pg-well .beast__body .sub { margin: var(--s-1) 0 0; font-size: var(--fs-sm); color: var(--fg-muted); }
.pg-well .enc-tray { margin-top: var(--s-7); }
.pg-well .enc-tray :is(h2,h3) { margin: 0; }
.pg-well .enc-tray__list { list-style: none; padding: 0; margin: var(--s-3) 0; display: grid; gap: 4px; }
.pg-well .enc-tray__list li { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-2) var(--s-3); background: var(--bg); border: 1px solid var(--line); }
.pg-well .enc-tray__list li > span:first-child { flex: 1; font-weight: 600; color: var(--fg-strong); }

/* the challenge badge is components.css's .cr (label above, number alone in the
   hex); a fraction is set a little smaller so «½» sits inside the stone */
.cr { flex: none; }
.cr--frac .cr__num { font-size: 1.25rem; }

/* ── the stat block ──
   The classic 5e order, carved: name, then a tapered rule; armour, hit points,
   speed; rule; the six abilities as whole words; rule; the properties; traits;
   «اقدام‌ها» as a section head a size below the name. Unscoped on purpose — the
   style guide renders this same block. */
.statblock { padding: var(--s-5); }
.statblock__head { position: relative; display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--s-3) var(--s-4); }
.statblock__title { min-width: 0; flex: 1 1 260px; }
.statblock .statblock__name { margin: 0; font-size: var(--fs-2xl); line-height: 1.15; }
.statblock .sub { margin: var(--s-1) 0 0; font-size: var(--fs-sm); color: var(--fg-muted); }
.statblock__badge { display: flex; align-items: flex-end; gap: var(--s-3); flex: none; }
/* the tapered rule: thick where the line starts, a point where it ends */
.statblock__rule { height: 4px; margin: var(--s-3) 0; background: var(--accent-text); opacity: .75; clip-path: polygon(100% 0, 100% 100%, 0 50%); }
[dir="ltr"] .statblock__rule { clip-path: polygon(0 0, 0 100%, 100% 50%); }
.statblock .line { margin: 3px 0; max-width: none; font-size: var(--fs-sm); line-height: 1.75; }
.statblock .line > b { color: var(--fg-strong); font-weight: 700; }
.statblock .abil { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0; margin: 0; padding: var(--s-1) 0; border: 0; }
.statblock .abil .abil__cell { display: grid; justify-items: center; align-content: start; gap: 2px; min-width: 0; }
.statblock .abil .abil__name { display: block; font: 700 var(--fs-2xs)/1.3 var(--font-display); color: var(--accent-text); white-space: nowrap; letter-spacing: 0; }
.statblock .abil .abil__name .term-en { display: block; margin: 1px 0 0; font: 500 var(--fs-2xs)/1.2 var(--font-body); letter-spacing: .02em; color: var(--fg-muted); }
.statblock .abil .abil__score { font: 800 1.375rem/1.15 var(--font-display); color: var(--fg-strong); }
.statblock .abil .abil__mod { font-size: var(--fs-2xs); color: var(--fg-muted); font-variant-numeric: tabular-nums; }
.statblock__sec { margin-top: var(--s-3); }
.statblock__sec :is(h2, h3) { margin: var(--s-4) 0 var(--s-2); padding-bottom: 4px; font-size: var(--fs-lg); line-height: 1.3; color: var(--accent-text); border-bottom: 1px solid var(--line-glow); }
.statblock .sb-run { margin: 0 0 var(--s-2); }
/* run-in names: weight and a colon in Persian; bold italic and a full stop in English */
.statblock .sb-run__name { font-weight: 800; color: var(--fg-strong); }
.statblock .sb-run__name:lang(en) { font-style: italic; }
.statblock .sb-run__name [lang="fa"] { font-style: normal; }
/* the monster page: the block is the page */
.statblock--page { padding-top: 0; }
.statblock__band { position: absolute; inset: 0 0 auto; height: 150px; opacity: .55; pointer-events: none; -webkit-mask-image: linear-gradient(to bottom, #000 25%, transparent); mask-image: linear-gradient(to bottom, #000 25%, transparent); }
/* a dark painting on the pale Frost stone is only a grey smear: Frost goes without */
:root[data-theme="light"] .statblock__band { display: none; }
:root[data-theme="light"] .statblock--page .statblock__head { padding-top: var(--s-5); }
.statblock__band .hx-cover { height: 100%; }
.statblock--page .statblock__head { padding-top: 76px; align-items: flex-end; }
.statblock--page .statblock__name { font-size: var(--fs-page); }
/* wide screens set the block in the book's two columns: numbers, then deeds */
@media (min-width: 1100px) {
  .statblock--page .statblock__body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--s-6); }
  .statblock--page .statblock__col + .statblock__col { padding-inline-start: var(--s-6); border-inline-start: 1px solid var(--line); }
  .statblock--page .statblock__col + .statblock__col > .statblock__sec:first-child :is(h2, h3) { margin-top: var(--s-3); }
}

/* ── tools: the tracker takes the width, the generator stands beside it ──
   Beside it only while the tracker keeps 39.5rem and the generator 22.5rem: a
   wrap, not a viewport breakpoint, so the bases grow with the reader's text
   size. At 100 % the two meet at a 1200px window, as before; at 125 % and up
   they stack, where a fixed 360px column beside the tracker used to squeeze its
   four fields to 106px and cut «Initiative» mid-word at 200 %. */
.pg-well .tools-grid { display: flex; flex-wrap: wrap; gap: var(--s-5); margin-top: var(--s-5); align-items: flex-start; }
.pg-well .tools-grid__init { flex: 999 1 39.5rem; }
.pg-well .tools-grid__names { flex: 1 1 22.5rem; }
.pg-well .tools-grid .slab { min-width: 0; }
/* a generated name is now and then one long word («Sigurðardóttir» in the display
   face is ~250px at 200 % text) in a row of a 220px column, and the copy button
   beside it pushed the page 24px sideways. The button drops under the name when
   the two do not fit; a name wider than its whole row breaks inside the row. The
   generator's own look stays in fx.css; this is only how it sits on this page. */
.pg-well .tools-grid .namegen__list { grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr)); }
.pg-well .tools-grid .namegen__list li { flex-wrap: wrap; min-width: 0; }
.pg-well .tools-grid :is(.namegen__list li > b, .npc-card h4) { min-width: 0; overflow-wrap: anywhere; }

/* the flip is the page's one piece of theatre — both switches must be able to stop it */
@media (prefers-reduced-motion: reduce) {
  .pg-well .spell__inner { transition: none; }
  :is(.pg-well, .statblock) .term-en:not([hidden]) { animation: none; }
  .pg-well .well-hero__art .hx-cover { animation: none; }
}
:root[data-motion="off"] .pg-well .spell__inner { transition: none; }
:root[data-motion="off"] :is(.pg-well .spell.is-new, .pg-well .spell-row.is-new, .pg-well .term-en, .statblock .term-en) { animation: none; }
:root[data-motion="off"] .pg-well .well-hero__art .hx-cover { animation: none; }

/* ═══ command palette: gazing into the well ═══
   Global on purpose: HX.fx.palette appends it to <body>, outside .pg-well.
   The well and its ripples live in the input band only; the results sit on a
   plain ground so nothing decorative passes behind text. The box keeps one
   height, so the input does not jump as the result count changes. */
.palette-backdrop { position: fixed; inset: 0; z-index: var(--z-modal); background: radial-gradient(ellipse at 50% 20%, rgba(15,107,79,.18), var(--bg-veil) 55%); backdrop-filter: blur(8px); display: grid; place-items: start center; padding: min(12vh, 120px) var(--gutter) var(--gutter); animation: fade var(--t-ui) var(--ease-out) both; }
.palette { --bd: var(--line-glow); position: relative; width: min(100%, 640px); height: min(540px, calc(100vh - min(12vh, 120px) - var(--gutter))); display: flex; flex-direction: column; background: var(--facet-edges), var(--bg-elev); border: 1px solid var(--bd); --facet: 14px; clip-path: var(--clip-facet); box-shadow: var(--shadow-stone), var(--glow-inset); overflow: hidden; animation: rise 320ms var(--ease-out) both; }
/* leaving: the stone sinks and fades, quicker than it came */
.palette-backdrop.is-leaving { animation: wellFadeOut 200ms var(--ease-exit, cubic-bezier(.4,0,1,1)) both; pointer-events: none; }
.palette-backdrop.is-leaving .palette { animation: wellSink 180ms var(--ease-exit, cubic-bezier(.4,0,1,1)) both; }
@keyframes wellFadeOut { to { opacity: 0; } }
@keyframes wellSink { to { opacity: 0; transform: translateY(8px) scale(.985); } }
.palette__head { position: relative; overflow: hidden; display: flex; align-items: center; gap: var(--s-3); padding: var(--s-4) var(--s-4) var(--s-3); background: var(--stone-grad); border-bottom: 1px solid var(--line-glow); }
.palette__head > :not(.palette__well) { position: relative; z-index: 1; }
/* the well: a dark mouth under the search glyph, confined to this band */
.palette__well { position: absolute; z-index: 0; top: 50%; inset-inline-start: calc(var(--s-4) + 10px); width: 240px; height: 240px; margin-block-start: -120px; margin-inline-start: -120px; border-radius: 50%; background: radial-gradient(circle, rgba(5,6,6,.85) 0%, rgba(11,12,13,.45) 40%, transparent 70%); pointer-events: none; }
/* Frost: no disc on a pale stone — only the jade ripple */
:root[data-theme="light"] .palette__well { background: none; }
.palette__well i { position: absolute; inset: 50%; width: 40px; height: 40px; margin: -20px; border-radius: 50%; border: 1px solid var(--emerald); opacity: 0; }
:root[data-theme="light"] .palette__well i { border-color: var(--jade); }
.palette__well.is-rippling i { animation: wellRipple 900ms var(--ease-out) both; }
.palette__well i:nth-child(2) { animation-delay: 120ms; } .palette__well i:nth-child(3) { animation-delay: 240ms; }
@keyframes wellRipple { 0% { transform: scale(.3); opacity: .35; } 100% { transform: scale(6); opacity: 0; } }
.palette__head > .ico { --n: 20; color: var(--accent-text); }
.palette__input { flex: 1; min-width: 0; background: transparent; border: 0; color: var(--fg-strong); font-size: var(--fs-lg); font-weight: 600; padding: var(--s-2) 0; }
.palette__input::placeholder { color: var(--fg-muted); font-weight: 400; }
.palette__input:focus-visible { outline: none; box-shadow: none; }
.palette__input::-webkit-search-cancel-button { appearance: none; }
.palette__list { position: relative; list-style: none; margin: 0; padding: var(--s-2); overflow: auto; scrollbar-width: thin; flex: 1; min-height: 0; background: var(--bg-elev); }
.palette__group > span { display: block; padding: var(--s-2) var(--s-3) 2px; font-size: var(--fs-2xs); font-weight: 700; color: var(--fg-muted); }
.palette__group ul { list-style: none; margin: 0; padding: 0; }
.palette__item { display: grid; grid-template-columns: auto 1fr; gap: 2px var(--s-3); align-items: baseline; padding: var(--s-2) var(--s-3); border-radius: var(--r-1); cursor: pointer; border-inline-start: 2px solid transparent; }
.palette__item b { color: var(--fg-strong); font-weight: 600; }
.palette__alt { unicode-bidi: isolate; font-family: var(--font-body); font-style: normal; font-size: var(--fs-2xs); color: var(--fg-muted); }
.palette__item small { grid-column: 1 / -1; color: var(--fg-muted); font-size: var(--fs-2xs); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.palette__item.is-active { background: rgba(47,211,154,.1); border-inline-start-color: var(--emerald); box-shadow: inset 0 0 20px rgba(47,211,154,.08); }
.palette__item.is-active b, .palette__item--more b { color: var(--accent-text); }
/* a glossary result answers in place */
.palette__def { grid-column: 1 / -1; margin: 4px 0 0; max-width: none; font-size: var(--fs-sm); line-height: 1.75; color: var(--fg); }
.palette__go { grid-column: 1 / -1; display: inline-flex; align-items: center; gap: 4px; margin-top: 2px; font-size: var(--fs-2xs); font-weight: 600; color: var(--accent-text); }
.palette__go .ico { --n: 16; }
.palette__empty { padding: var(--s-5) var(--s-3) var(--s-2); text-align: center; color: var(--fg-muted); }
.palette__hint { position: relative; display: flex; gap: var(--s-5); padding: var(--s-2) var(--s-4); border-top: 1px solid var(--line); background: var(--bg-elev); font-size: var(--fs-2xs); color: var(--fg-muted); }
.palette__hint span { display: inline-flex; align-items: center; gap: 4px; }
@media (max-width: 600px) { .palette-backdrop { padding-top: var(--s-4); } .palette { height: min(540px, calc(100vh - 2 * var(--s-4))); } .palette__hint { display: none; } }
@media (prefers-reduced-motion: reduce) { .palette__well.is-rippling i, .palette, .palette-backdrop.is-leaving, .palette-backdrop.is-leaving .palette { animation: none; } }
:root[data-motion="off"] :is(.palette__well.is-rippling i, .palette) { animation: none; }