/* The detail page's own rules: Entity.aspx and Types.aspx.
   ==========================================================================

   WHAT THIS FILE IS. The first edition keeps a 330-line <style> block inside
   Entity.aspx. The no-inline-CSS rule moves page CSS into App_Themes and the
   layout-parity rule says the
   look ports unchanged, so this is that block with the mechanism changed and
   nothing the eye sees changed. It is linked from the Head placeholder of both
   pages, which puts it between site.css and chrome.css: the design system, then
   this page's rules over it, then the master's over both.

   WHAT IS *NOT* HERE, AND WHY, because the list is most of that block and a later
   agent will otherwise re-derive it:

   * The "Learn more" fold (.lf/.lfb/.lfnote), the deck panels, the symbol mark.
     Two reasons and either alone is enough: this edition has no articles, decks
     or emblems yet, AND site.css already carries the .lf family under .dvpage
     (it is a byte-identical copy of the first edition's sheet, whose .dvpage .lf
     rules the page's own .entity .lf rules simply duplicate at the same
     specificity). When articles land, they need no CSS at all.

     THE PASSAGE PANELS AND THE RELATED-QUIZ LIST WERE ON THAT LIST AND ARE NOT
     ANY MORE. The sentence above said this edition has
     no passages or quizzes; by the time anybody re-read it there were 140
     passages carrying their own translation credits and 14 published quizzes,
     and the panels that draw them landed in the repair wave. Their rules are at
     the foot of this file, ported from the first edition's block unchanged.
     This is the expired-deferral trap the entity page's own header warns about:
     a "not yet" note goes stale silently and nothing ever re-reads it, so a note
     of that kind should name what would settle it. What would settle THIS one is
     one row in content.Entity of type passage, which is why it is written here
     rather than left implied.
   * The facts DRAWER and its three radio tabs (.ft-r/.ft-bar/.ft-t/.ft-n/.ft-p,
     .fdfact/.fdk/.fdv, .fdis). Verified dead in the first edition on 2026-07-31:
     Entity.aspx.vb picks between BuildEntityFacts and BuildFacts on
     IsFactsPilotType, which returns True for every type, so the drawer branch and
     every one of those rules has been unreachable there since the pilot rolled
     out. Carrying dead CSS across into a scaffold is exactly what the
     no-inline-CSS rule exists to prevent. js/factdrawer.js is left behind for the same reason.
   * The page's own @media (prefers-reduced-motion) block, which sets
     transition:none. site.css already carries a global one, deliberately using
     0.01ms rather than none SO THAT transitionend STILL FIRES. The page copy
     overrides the sheet's considered choice with the naive one. Collapsed in
     favour of site.css; do not put it back.
   * .profcols, which styles a member profile and belongs to no page here.

   ACCESSIBILITY. Everything below is rem or em or a percentage. There is no fixed
   pixel box around text anywhere in this file, every flex row either wraps or
   gives its shrinkable member min-width:0, and the one place a value could grow
   wider than its column carries overflow-wrap. Checked at 150% and 200% text. */

/* ---- the in-flow, grouped Facts card ----------------------------------------
   PACKED COLUMNS, 2026-08-15, owner decision at 05:48, an explicit exception
   to ruling 112's port-as-is freeze for the same reason w1621-factlayout was:
   the group CONTAINER, not the fact row inside it (that stays exactly as
   w1621-factlayout and w1594-factalign left it; nothing below .tf-grp-h in
   this file moved).

   HISTORY, KEPT SHORT ON PURPOSE. The card started as a wrapping flex row with
   no cap on how many groups shared a line, six or more on an ordinary desktop
   window, so a short group beside a tall one left blank space and the card's
   height was its tallest row's, repeated. The first fix (05:11) tried CSS
   multi-column, which balanced height but let a single long group's text run
   split mid-value across a column boundary. A second correction (05:32) let
   the GROUP flow like newspaper text and pinned break-inside:avoid to the fact
   row instead, which fixed splitting but reopened the original complaint: a
   long category (Giving, Trajectory) again claimed a whole column by itself
   and set the card's height alone. CSS alone cannot both balance three
   columns' heights AND keep every category whole; it can only choose which
   one to sacrifice.

   THE FIX IS TO STOP ASKING CSS TO DECIDE, AND PACK SERVER-SIDE INSTEAD.
   BuildFacts (Entity.aspx.vb) now estimates each group's rendered height,
   bin-packs whole groups into three columns longest-first so short ones share
   a column and no group ever splits (PackFactColumns), and emits three
   .tf-col containers directly, each holding its own groups in original
   reading order. CSS's only job now is to lay those three ALREADY-DECIDED
   stacks out side by side; there is no CSS multi-column here any more, no
   break-inside and no break-after, because there is nothing left for either
   property to prevent. */
.dvpage .sec.factssec .tf-wrap{display:flex;flex-wrap:wrap;gap:18px 34px;align-items:flex-start}
/* .tf-col IS THE SAME rem-BASIS FLEX ITEM .tf-grp USED TO BE, one level up.
   14.6667rem is 220.0px against the html{font-size:93.75%} base today, but it
   is the READER'S rem: the A-/A+ control multiplies the root size, so raising
   it to 200 per cent doubles the effective column width in real pixels with
   no extra rule, and flex-wrap drops from three columns to two to one as the
   reader's own text grows, exactly the "narrower EFFECTIVE width" the owner
   asked for, with no media query written because none is needed. The one
   difference from the old .tf-grp basis: there are now at most THREE flex
   items competing for a row instead of one per group, because the server has
   already collapsed however many categories the card holds down to three
   stacks, so flex-wrap can never produce more than three columns the way the
   original flex-row-of-groups design did. */
.dvpage .sec.factssec .tf-col{flex:1 1 14.6667rem;min-width:0}
.dvpage .sec.factssec .tf-grp{margin:0 0 18px}
.dvpage .sec.factssec .tf-grp:last-child{margin-bottom:0}
.dvpage .sec.factssec .tf-grp-h{color:var(--gold);font-size:.72rem;text-transform:uppercase;
  letter-spacing:.08em;font-weight:600;margin:0 0 8px;padding:0 0 6px;border-bottom:1px solid var(--edge)}
.dvpage .sec.factssec .tf-atom{display:flex;flex-wrap:wrap;align-items:baseline;
  justify-content:space-between;gap:14px;padding:5px 0}
.dvpage .sec.factssec .tf-atom+.tf-atom{border-top:1px solid var(--edge)}
/* w1621-factlayout, 2026-08-15, owner decision at 03:06 viewing the Baha'i page
   at a large text size, EXPLICITLY APPROVED as an exception to ruling 112's
   port-as-is layout freeze (his words carried in the brief: one shape for every
   fact, short or long). The row used to pair .tf-k with .tf-v on line one,
   right-aligning the value against a shared right edge (w1594-factalign, same
   night, a few hours earlier). That pairing and that edge are RETIRED: line one
   is now the name and its attestation badge, and the value drops to a full-width
   row of its own beneath, left-aligned, exactly like .tf-prov and .tf-note
   already sit.

   .tf-k keeps flex-basis:0 for the identical reason w1594-factalign gave it, only
   the PARTNER changed: .tf-atom is flex-wrap:wrap on the container, and the
   browser decides which flex line each item lands on using its HYPOTHETICAL
   (pre-shrink) main size. flex-basis:0 makes .tf-k's hypothetical size zero for
   that line-collection pass however long its label grows, so .tf-k and .tf-b are
   GUARANTEED to share .tf-atom's first flex line whatever the key's or the
   badge's own width turns out to be. flex-grow:1 lets .tf-k occupy the row's
   free space, which is what pins .tf-b to the far right of that first line, "the
   space beside the name" in the owner's own words. min-width:0 is unchanged, so
   a long key still shrinks rather than forcing a wider row. */
.dvpage .sec.factssec .tf-k{color:var(--muted);font-size:.86rem;font-weight:600;flex:1 1 0;min-width:0}
/* THE VALUE'S OWN FULL-WIDTH ROW (w1621-factlayout, 2026-08-15). flex:1 1 100%
   exiles it onto a flex line of its own, the identical mechanism .tf-b, .tf-prov
   and .tf-note below already use for the same reason: it is not the key, so it
   does not belong in the key's column. text-align:left because there is no
   longer a right edge to share; max-width:60% is gone with the column it capped,
   font-variant-numeric:tabular-nums stays, harmless on a left-aligned block and
   still correct for a value that IS a column of digits on its own line.

   The first edition writes this element as a span and this page writes it as a
   div. It is a flex ITEM either way, so it lays out identically; the div is what
   lets js/panel-speak.js recurse into it and speak the value and the tradition as
   two sentences instead of one run-on word. Nothing here changes because of it. */
.dvpage .sec.factssec .tf-v{color:var(--ink);font-size:.9rem;font-weight:400;text-align:left;
  font-variant-numeric:tabular-nums;flex:1 1 100%;margin-top:4px;overflow-wrap:anywhere}
/* Whose claim it is. Sits UNDER the value, not beside it, because it qualifies
   the fact rather than the other way round. Muted and unemphasised for the same
   reason: it should read as a qualifier, not compete with the value. */
.dvpage .sec.factssec .tf-s{display:block;color:var(--muted);font-size:.74rem;
  font-weight:400;font-style:italic;margin-top:2px}
/* TWO PER-FACT ROWS (attest-render, 2026-08-05; the first of the two moved onto
   line one with the badge on 2026-08-15, see below), for the reason written over
   .tf-v above: anything that is not the value belongs outside its box.

   .tf-b   HOW SETTLED THE CLAIM IS. Compare has badged every claim including
           attested for months; this card's only status signal was the group
           heading, which says nothing at all to a fact read aloud, tabbed to on
           its own, or met out of order. IN THE FACTS CARD ITSELF this now sits on
           line one beside .tf-k (w1621-factlayout, 2026-08-15, owner decision,
           see the long comment over .tf-k); it keeps its OWN full-width row only
           on the entity lede's dispute disclosure (.lede-status below), which has
           no key element to share a line with, so the two selectors are no
           longer one rule.

   .tf-prov  WHOSE VOICE THE CLAIM RESTS ON. A fact sourced to a tradition's own
           scripture and one sourced to a peer-reviewed monograph looked
           identical here; the tier and custodian markers that tell them apart
           were drawn only inside the collapsed Sources fold at the foot of the
           page. cursor:help is the only hint that a fuller wording exists, as
           .src-tier and .src-cust already use it; nothing depends on reaching
           it, because the visible phrase states the caveat and the full
           sentence rides on aria-label as well as title.

           A PILL NOW, NOT PLAIN TEXT (2026-08-15, the owner's 05:16 addition to
           the same decision). Shaped and sized exactly like the .xtb attestation
           pill in site.css (2px 9px padding, 99px radius, .66rem uppercase, .06em
           tracking) so the two read as one family of small badge, but coloured
           with --muted rather than any of .xtb's own colours, because this pill
           answers a DIFFERENT question: .xtb says how SETTLED a claim is, this
           says whose VOICE is making it, and giving it one of .xtb's own colours
           would read as a second opinion about settledness rather than a
           statement about the source. --muted is not invented for this: it is
           the exact token .src-tier.tier3 already uses for this identical idea
           down in the Sources fold, reused here so the same fact carries the
           same colour in both places rather than two conventions for one idea.
           TWO LAYERS, 2026-08-15 05:37/05:48. A pill given flex:0 0 auto
           directly on .tf-atom has no basis of its own to force a line break
           with, so whether it lands on its own line depends on what happens to
           precede it, which stopped being reliable once the pill could sit
           either right after the name/badge line or right after the value: a
           bare flex:0 0 auto item can share the SHORT name/badge line's leftover
           space instead of heading its own line, exactly the ambiguity the
           owner flagged from a screenshot. So .tf-provwrap (the actual .tf-atom
           child, flex:1 1 100% below) is an invisible box that always claims a
           full line of its own, the same pattern .tf-b already uses nested
           under .lede-status; .tf-prov, now the CHILD inside it, carries every
           visual property and sizes to its own short content, never stretched.
           .tf-provwrap's own margin-top is deliberately larger than the ~3 to
           4px gap every other stacked row in this card uses (.tf-v, .tf-s,
           .tf-note), so the pill reads as clearly separated from whatever is
           ABOVE it; the gap BELOW, to whichever text the pill actually
           describes, is left at that same small default, so the pair reads as
           bound together. That asymmetry, not the DOM order, is what tells a
           reader which text the pill is about.

   rem throughout, so the A-/A+ control governs both and neither is a fixed box
   around scaling text. No height, no nowrap of their own.

   THE .xtb OVERRIDE IS NOT OPTIONAL. .xtb carries white-space:nowrap, which is
   right on a relation row that has the page width and wrong in a fact group:
   "Popular myth - corrected" is three long words, and at 200% a nowrap pill
   wider than its row paints over the group beside it. Letting it wrap inside its
   own pill is the fix .standing-mark already carries, for the same reason. */
.dvpage .sec.factssec .tf-b{flex:0 0 auto;max-width:100%;text-align:left}
.dvpage .entlede .lede-status .tf-b{flex:1 1 100%;margin-top:4px;text-align:left}
.dvpage .sec.factssec .tf-b .xtb,
.dvpage .entlede .lede-status .tf-b .xtb{display:inline-block;max-width:100%;
  white-space:normal;overflow-wrap:break-word}
.dvpage .sec.factssec .tf-provwrap{flex:1 1 100%;margin-top:11px}
.dvpage .sec.factssec .tf-prov{display:inline-block;color:var(--muted);font-size:.66rem;
  font-weight:600;padding:2px 9px;border:1px solid var(--edge2);border-radius:99px;
  text-transform:uppercase;letter-spacing:.06em;cursor:help;
  max-width:100%;overflow-wrap:anywhere}
/* The status note. It reached the first edition's page only as title="..." until
   2026-07-28, which a screen reader does not reliably announce and a touch device
   cannot hover to reveal, so on contested atoms the atlas published the claim and
   hid the dispute. It takes a full row of its own via flex-basis:100% rather than
   sitting beside the name and badge on line one, because it is a sentence and
   needs the whole width. rem-sized so the A-/A+ control still governs it.

   THE DESCRIPTION'S OWN DISPUTE WIDENS THESE SAME
   TWO SELECTORS RATHER THAN INVENTING A SECOND BADGE/NOTE STYLE. AppendLede
   builds the lede paragraph straight from the description fact's Value and never
   looked at its Status or StatusNote at all, so a debated or unknown description
   had its dispute nowhere on the page, neither seen nor read aloud, while an
   ordinary fact carrying the same status draws this exact badge and note inside
   the Facts card. .lede-status is a flex row exactly like .tf-atom's, scoped
   under the lede rather than the card, so .tf-b and .tf-note behave identically
   in both places: same class, same words, same accessibility contract, one
   fewer idiom to keep in sync. See the .dvpage .sechd,.ridoc .sechd case
   for the same widened-selector shape used elsewhere. */
.dvpage .entlede .lede-status{display:flex;flex-wrap:wrap;gap:2px 14px;margin:.6em 0 0}
.dvpage .sec.factssec .tf-note,
.dvpage .entlede .lede-status .tf-note{flex:1 1 100%;color:var(--muted);font-size:.78rem;
  font-weight:400;line-height:1.45;margin-top:3px;text-align:left;overflow-wrap:anywhere}
/* Not currently emitted by any live renderer (grepped 2026-08-15, entity.css
   only). Under the packed-column layout a group is placed by the server, so
   there is no CSS concept of "full width across the row" left for this
   selector to express; kept as a plain group so it renders sanely inside
   whichever .tf-col it would be packed into rather than left stale. */
.dvpage .sec.factssec .tf-grp.tf-rel{margin:0 0 18px}
/* ON A PHONE THE VALUE TAKES THE WHOLE ROW. Found on the first edition: a
   date range like "1618 to 1648, from the Defenestration of Prague to the
   Peace of Westphalia" came out as six right-ragged lines in a column about half the card
   wide, while the label above it had the other half and used none of it.

   RETIRED, 2026-08-15 (w1621-factlayout). The right-hand column and the shared
   right edge this comment used to explain no longer exist at ANY width: .tf-k
   pairs with .tf-b on line one and .tf-v is a full-width, left-aligned row
   beneath at every screen size now, which is the owner's own "one shape for
   every fact, short or long." The narrow-viewport overrides that used to force
   that same shape below 700px would now do the opposite of their old job, taking
   .tf-k off line one with .tf-b and putting the badge on a line by itself, so
   they are removed rather than left inert. Only the tightened gap and padding
   for a cramped viewport survive below; .tf-s and .tf-note still behave the same
   way they always did. */
@media (max-width:700px){
  .dvpage .sec.factssec .tf-atom{gap:2px 14px;padding:7px 0}
}

/* ---- why a contested claim is contested -------------------------------------
   fx-entity, 2026-08-03. The first edition puts "Why this is disputed" (or "Why
   this is corrected", or "What is not known, and what would settle it") over the
   note on a contested relation row, as the SUMMARY of a collapsed disclosure.
   This edition lost the words along with the fold, so the objection arrived as a
   bare paragraph under a chip with nothing saying what it was.

   The words come back as a visible label rather than a fold, because this
   edition's standing rule is that a contested note is real text: a disclosure
   and a title attribute both publish the claim and hide the doubt, and a screen
   reader does not reliably announce the one while a touch device cannot reveal
   the other.

   Styled as the sibling label it is: the same gold, uppercase, letter-spaced
   treatment .oq-res-l and .cha-lab already carry, so a reader who has learnt
   what a small gold label means on this page reads this one the same way. Inline
   rather than display:block, because the note is one sentence and the lead is
   its opening clause, not a heading over a paragraph. Sized in em so it tracks
   the note it qualifies, which itself is in rem and under the A-/A+ control. */
.dvpage .xtnote .xtnote-l{color:var(--gold);font-size:.86em;text-transform:uppercase;
  letter-spacing:.06em;font-weight:600}

/* ---- the two hosts js/panel-speak.js fills ---------------------------------
   The server emits an EMPTY element and the reader's script puts a .dspeak button
   inside it, only where the browser has speechSynthesis. Both rules below exist
   because that indirection did not exist in the first edition, where the script
   injected the button as a direct child of the row it belongs to.

   Empty means absent: with scripting off, or on a browser with no speech, the
   host must not occupy a flex gap in the row it sits in. */
.dvpage .relgroup>.rl>[data-speak-host]:empty{display:none}
/* Filled, the host has to BE the flex item that gets pushed to the right, since
   the .dspeak inside it can only push itself to the right of the host. Same end
   result as the first edition, where .dspeak was the flex item itself. */
.dvpage .relgroup>.rl>[data-speak-host]{margin-left:auto;flex:0 0 auto;display:inline-flex}

/* THE PAUSE COMPANION'S BOX IS NOT HERE ANY MORE (2026-08-02).
   This page used to carry its own .dvpage-scoped restatement of the box
   js/panel-speak.js's injected .dspeak takes inside the action row: the
   .readbtn shape, the gold hover, the focus ring. Every line of it is now in
   site.css under [data-pageacts], where it covers every page that renders the
   shared bar rather than this one family, and trail.css's .trailpage copy went
   the same way. Nothing an eye can see changed.

   IT WAS ALSO THE LAST HOLD-OUT ON A FIXED PIXEL BOX. Because .dvpage .entacts
   .dspeak is (0,3,0) it beat the shared (0,2,0) rule, so the entity and category
   pages drew this control at a flat 40px while every other surface drew it at
   2.5em. Two families, one control, and the difference only appeared once the
   reader touched A-/A+, which is to say only for the reader it mattered to.
   Deleting it is what makes the row one size everywhere. */

/* ---- the scripture-passage panels ------------------------------------------
   "In the Texts" on a subject, "Passages from This Text" on a work, both landed
   2026-08-04 (rp-entity). Ported from the first edition's Entity.aspx style
   block; nothing an eye can see is different, and the two rules its version
   carries for columns this edition's passage vocabulary does not have
   (.psgctx, .psgattr, .psgnote) are left out rather than shipped dead.

   The QUOTATION is set in the serif and given the visual weight, because it is
   the only thing on the page that is not the atlas talking. Everything under it,
   why it is here and whose rendering it is, is smaller and muted so the
   apparatus never competes with the text it is about.

   .psgtr is the translation, deliberately a pill in the same position and the
   same treatment as the first edition's deck numeral: a quotation is always a
   quotation of one specific translator, and that fact has to be unmissable
   rather than filed in a footer. */
.entity .psghd{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 10px;margin-bottom:8px;min-width:0}
.entity .psgref{font-family:var(--serif);font-size:1rem;font-weight:600;color:var(--ink);
  text-decoration:none;overflow-wrap:anywhere;min-width:0}
.entity .psgtr{font-size:.7rem;text-transform:uppercase;letter-spacing:.06em;color:var(--gold);
  border:1px solid color-mix(in srgb,var(--gold) 45%,var(--edge));border-radius:99px;padding:2px 9px}
.entity .psgtheme{font-size:.86rem;color:var(--muted);font-style:italic;min-width:0}
.entity .psgt{font-family:var(--serif);font-size:1.05rem;line-height:1.8;color:var(--ink);max-width:70ch;
  margin:0;padding:2px 0 2px 15px;border-left:2px solid var(--gold)}
.entity .psgt p{margin:0}
.entity .psgwhy{font-size:.94rem;line-height:1.7;color:var(--ink);max-width:70ch;margin:10px 0 0}
/* The credit line. Small, but never absent and never hidden behind a tooltip:
   the rights position is that the translator is named on the page. */
.entity .psgcred{font-size:.78rem;line-height:1.6;color:var(--muted);max-width:70ch;margin:9px 0 0}
.entity .psgmore{font-size:.84rem;margin:9px 0 0}
.entity .psgmore a{color:var(--muted);text-decoration:none}
.entity .psgmore a:hover{color:var(--gold);text-decoration:underline}

/* ---- "Take a Related Quiz" --------------------------------------------------
   A plain list, not cards: it is a way OUT of this page and should not compete
   with the entry itself for attention. rem and em throughout so the A- / A+
   control reaches it, and nothing with a fixed height, so a long quiz title
   wraps instead of spilling. The first edition's rules, unchanged, except that
   the heading is an h2 here (it is a page-level section beside Sources, and an
   h3 with no h2 above it puts a hole in the outline a screen-reader user
   navigates by). */
.relquiz{margin:26px 0 0;padding:16px 18px;border:1px solid var(--edge);border-radius:12px;background:var(--panel2)}
.relquizhd{font-family:var(--serif);font-size:1.02rem;font-weight:600;margin:0 0 10px}
.relquizlist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.relquizlist li{min-width:0}
.relquizlist a{color:var(--ink);text-decoration:none;font-weight:600;overflow-wrap:anywhere}
.relquizlist a:hover{color:var(--gold)}
.relquizwhy{display:block;color:var(--faint);font-size:.84rem;line-height:1.45;margin-top:2px}

/* ---- on-page contents -------------------------------------------------------
   A quiet row of jump links directly after the lede, in the .entaka "Also
   Known As" visual language (muted, small, middot-divided) rather than a card
   of its own: it is a map of what the page already drew below, not a fourth
   thing competing with the facts card a moment after it for attention.
   Entity.aspx.vb builds it ONLY from the sections that actually rendered on
   THIS page (AppendSection/BuildContentsNav), so there is never a link here
   with nothing under it to land on.

   rem for the type, no fixed-width or fixed-height box anywhere, and the list
   wraps by itself with no column or nowrap rule fighting it, so it holds
   together at 150% to 200% text on a narrow phone exactly as it does at 100%
   on a desktop. The details.tsec that follows already carries its own 26px
   top margin from .dvpage .sechd (site.css), so this block asks for a bottom
   gap only, never a top one, and never touches that shared rule.

   max-width:var(--measure) ADDED 2026-08-11, lane w846-citepage, owner
   report against the Christianity page: this row ran the full page width
   while .entlede (the description paragraph immediately above it,
   site.css:2921) sits in the narrower var(--measure) text column, so a long
   entity with many sections drew a row of jump links visibly wider than the
   prose it introduces. The SAME shape as w831's fix to the spread timeline's
   two event lists, applied to the same token for the same reason: this is a
   row of short items in the text column's flow, not a card, and every other
   thing at this position on the page (.lead, .entlede, .axisnote) already
   carries this exact constraint. Checked by reading rendered markup on the
   Christianity page, which has all thirteen sections live and is the widest
   this row gets on the site today. */
.dvpage .onpagetoc{margin:0 2px 18px;font-size:.86rem;line-height:1.6;max-width:var(--measure)}
.dvpage .onpagetoc ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;row-gap:.3em}
.dvpage .onpagetoc li{display:inline;min-width:0}
.dvpage .onpagetoc li:not(:last-child)::after{content:"\00b7";color:var(--faint);margin:0 .55em}
.dvpage .onpagetoc a{color:var(--muted);text-decoration:none}
.dvpage .onpagetoc a:hover,.dvpage .onpagetoc a:focus-visible{color:var(--gold);text-decoration:underline}

/* ---- in other languages (alias name translations) ---------------------------
   w2643-aliaslang, 2026-08-19: owner disposition splitting the alias-name-*
   per-language translations out of the .entaka Also Known As line into their
   own details.tsec disclosure (Entity.aspx.vb BuildAliasTranslations). The
   list can run to eighty-plus short items on one entity, so it borrows the
   .onpagetoc shape immediately above rather than inventing a new one: rem
   type, a middot between items, flex-wrap with no fixed-width or fixed-height
   box anywhere, so the wall of names wraps by itself and holds together at
   150% to 200% text the same way that row already does. Scoped under
   details.tsec rather than given its own top-level selector because it is
   read only inside that one disclosure. */
.dvpage details.tsec .langlist{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;
  row-gap:.3em;font-size:.86rem;line-height:1.6;max-width:var(--measure);color:var(--ink)}
.dvpage details.tsec .langlist li{display:inline;min-width:0}
.dvpage details.tsec .langlist li:not(:last-child)::after{content:"\00b7";color:var(--faint);margin:0 .55em}

/* ---- the community module ---------------------------------------------------
   The panel the first edition draws on an entity carrying an anchored topic
   community; landed here 2026-08-04 (rp-entity). Two lines and two buttons, so
   it needs almost nothing of its own: .btn and .ghostbtn are site.css's, and
   the only rules here are the ones that keep the pair of buttons wrapping
   rather than spilling at the reader's own text size. No fixed box anywhere. */
.entity .cmy-n{font-size:.94rem;color:var(--ink);margin:0}
.entity .cmy-a{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:12px 0 0;min-width:0}
.entity .cmy-a a{text-decoration:none;min-width:0}

/* w1969-orgtradition, ruling 554: organizations whose Tradition points at
   this entity, appended to the SAME community module above, never a second
   one. Each row wraps rather than clipping a long organization name; the
   city and the Verified pill sit after the name with a gap rather than a
   fixed box, so both survive 150-200% text. */
.entity .cmy-orgh{font-size:1rem;margin:14px 0 6px;color:var(--ink)}
.entity .cmy-orglist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.entity .cmy-orglist li{display:flex;flex-wrap:wrap;align-items:center;gap:8px;min-width:0}
.entity .cmy-orglist a{min-width:0}
.entity .cmy-orgcity{font-size:.88rem;color:var(--muted)}
.entity .cmy-orgmore{font-size:.88rem;color:var(--muted);margin:8px 0 0}

/* ---- the point-in-time toggle (ruling 437, w646-timesurfaces 2026-08-10) -----
   The entity page's own year mode: a state marker beside a fact and beside a
   connection, the banner the mode raises at the top, the set-aside section, and
   the control itself at the foot of the article.

   EM AND NOT REM FOR THE MARKER, deliberately, and it is the same choice
   compare.css already makes for the marker on a comparison chip: the marker
   belongs to the claim beside it, whose own box already scales with the A- and
   A+ control, so a rem here would make the date stop scaling with the claim it
   dates. There is no fixed height and no fixed width anywhere below, and the
   marker WRAPS rather than truncating, because at 200% text a claim's date is
   exactly as load bearing as the claim itself. */
.dvpage .tmst{display:block;min-width:0;overflow-wrap:anywhere;font-size:.9em;
  font-style:italic;color:var(--muted);margin:.25em 0 0}

/* The one state that says the page is showing something OTHER than what the
   atlas records today gets the emphasis, because it is the one a reader is most
   likely to misread as the present. The other three are quiet. Same colours and
   same weights as the comparison's, so one vocabulary reads one way. */
.dvpage .tmst-hist{color:var(--gold);font-style:normal;font-weight:600}
.dvpage .tmst-not{color:var(--muted)}
.dvpage .tmst-und{color:var(--faint)}

/* A verdict outside the closed set is a defect and is made VISIBLE rather than
   resolved to something, the same choice the unrecognised stance badge makes.
   Nothing should ever render this. */
.dvpage .tmst-bad{color:var(--dark-c);background:var(--dark-bg);font-weight:700}

/* The relation word in front of a set-aside connection, which that section
   needs because its rows are a mixed bag of relation words with no group
   heading to carry them. */
.dvpage .xtword{color:var(--faint);text-transform:uppercase;letter-spacing:.08em;
  font-size:.72em;min-width:0}

/* The banner and the set-aside section are ordinary .sec cards and want almost
   nothing of their own. */
.dvpage .tmasof .lead{margin-bottom:.5em}
.dvpage .tmasof a{min-width:0}

/* The control. The field, its label and the submit are the Compare page's own
   .picks / .pick / .formrow / .go shapes, ported to this page's scope under
   ruling 112 rather than re-derived: the same control on two pages must not be
   two controls. min(14rem,100%) is what lets the field sit beside a sibling
   where there is room and take the full width where there is not, with no
   media query and no fixed pixel box around text that scales. */
.dvpage .tmpick .picks{display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(14rem,100%),1fr));gap:12px;margin:0 0 14px}
.dvpage .tmpick .pick{display:flex;flex-direction:column;gap:5px;min-width:0}
.dvpage .tmpick .pick label{color:var(--faint);text-transform:uppercase;letter-spacing:.11em;
  font-size:.7rem}
.dvpage .tmpick .pick input[type="text"],
.dvpage .tmpick .pick select{width:100%;max-width:100%;background:var(--panel2);
  color:var(--ink);border:1px solid var(--edge2);border-radius:8px;padding:.5em .7em;
  font:inherit;min-width:0}
.dvpage .tmpick .pick input:focus-visible,
.dvpage .tmpick .pick select:focus-visible{outline:2px solid var(--gold);outline-offset:1px}
/* w942-pastyear, 2026-08-12: the field turned from a free-text input into a
   select (owner sighting: "the years should be a drop down"); the option
   list needs to read against the same dark panel the field itself sits on,
   the same rule .cmppage .pick option already carries in compare.css for
   the identical .picks/.pick idiom. */
.dvpage .tmpick .pick option{background:var(--panel2);color:var(--ink)}
.dvpage .tmpick .go{background:var(--gold);color:var(--ground);border:1px solid var(--gold);
  border-radius:999px;padding:.45em 1.1em;font:inherit;font-weight:600;cursor:pointer;min-width:0}
.dvpage .tmpick .go:hover{filter:brightness(1.06)}
.dvpage .tmpick .go:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.dvpage .tmpick .formrow{display:flex;gap:10px;align-items:center;flex-wrap:wrap;min-width:0}

/* ---- Citation Formats control (App_Code/View/CiteMarkup.vb), lane
   w846-citepage, 2026-08-11 --------------------------------------------------

   A native details/summary sitting as one more child of .entacts, so it
   inherits the row's flex/gap/wrap for free and folds behind the phone kebab
   exactly like copy/share do (site.css's [data-pageacts] rules key on being a
   child of .entacts, not on tag name). The summary reuses .readbtn wholesale
   (site.css) for the 40px icon box, gold hover and focus ring every other
   action-row control already carries; the two rules below only remove the
   browser's own default disclosure marker, which .readbtn's declared
   display:inline-flex already suppresses in most engines but WebKit still
   draws via its own pseudo-element unless told not to.

   THE PANEL IS position:absolute, DELIBERATELY, unlike every other <details>
   on this page (Sources, Open Questions, relgroup). Those are page content
   and are meant to push the layout open when read. This one is chrome sitting
   in a 40px icon row: letting it grow in place would stretch the whole action
   row's height around three textareas and shove the badge/body underneath it
   for no reason a reader asked for. Floating it keeps the row's own height
   fixed and reads as the dropdown it visually is, while staying a REAL
   details element underneath, so a screen reader still gets native
   expanded/collapsed state with no hand-authored ARIA. */
.dvpage .citebox,[data-pageacts] .citebox{position:relative}
.dvpage .citebox>summary,[data-pageacts] .citebox>summary{list-style:none}
.dvpage .citebox>summary::-webkit-details-marker,
[data-pageacts] .citebox>summary::-webkit-details-marker{display:none}
.dvpage .citebox[open]>summary,[data-pageacts] .citebox[open]>summary{border-color:var(--gold);color:var(--gold)}

.dvpage .citepanel,[data-pageacts] .citepanel{position:absolute;top:calc(100% + 8px);right:0;z-index:30;
  width:min(92vw,26rem);max-width:26rem;box-sizing:border-box;background:var(--panel);
  border:1px solid var(--edge2);border-radius:10px;padding:16px;box-shadow:var(--shadow)}
.dvpage .citepanel-h{margin:0 0 14px;font:600 1rem var(--serif);color:var(--ink)}

.dvpage .citefmt{margin:0 0 14px}
.dvpage .citefmt:last-child{margin-bottom:0}
/* The same small gold label treatment .xtnote-l already carries elsewhere on
   this page (see above), so a reader who has learnt what a small gold label
   means here reads this one the same way. */
.dvpage .citefmt-h{margin:0 0 6px;font-size:.86em;font-weight:600;text-transform:uppercase;
  letter-spacing:.06em;color:var(--gold)}

/* readonly, real, selectable text -- copyable by hand with no script at all,
   the same EmbedBuilder snippet-box shape. rem-sized, never a fixed px box
   around text that scales (CLAUDE.md's own accessibility rule). */
.dvpage .citefld{display:block;width:100%;box-sizing:border-box;resize:vertical;background:var(--ground);
  color:var(--ink);border:1px solid var(--edge);border-radius:8px;padding:.5em .7em;
  font:inherit;font-size:.85rem;line-height:1.45;margin:0 0 8px}
.dvpage .citefld:focus-visible{outline:2px solid var(--gold);outline-offset:1px}
/* The BibTeX block only: code-like text reads better in a monospace face. A
   font stack, not a color, so check-ui.ps1's hardcoded-color check has
   nothing to flag here. */
.dvpage .citecode{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.78rem}

.dvpage .citefmt .btn.ghostbtn{padding:.35em 1em;font-size:.85rem}

@media (max-width:560px){
  /* Same reasoning as the row's own 560px fold: four 40px targets and a title
     cannot share a line, so below it the panel gives up trying to hang off
     the button's own right edge (which may itself be near the left of a
     narrow screen once the row wraps) and instead spans the available width. */
  .dvpage .citepanel,[data-pageacts] .citepanel{right:auto;left:0;width:min(94vw,26rem)}
}