/* ============================================================
   Compare, the page's own rules.

   THE PAGE SHELL IS NOT HERE AND MUST NOT BE. The rail, the section cards, the
   chips, the column panes, the tabs and the share bars are the shared .dvpage
   system in site.css, which is the first edition's stylesheet ported whole:
   .cmpcols, .cmpcol, .ctabs, .ctab, .cbar, .csub, .agroup, .ahd, .gc, .chip,
   .mut, .more, .warn and .countline are all already styled there and are used
   here unchanged. Only what is UNIQUE to a comparison is in this file.

   WHERE IT CAME FROM. The first edition kept these rules in a 143-line <style>
   block inside Compare.aspx. Inline CSS is not used here, so they are
   centralized here, byte-different and look-identical: the mechanism changes
   and nothing the eye sees does.

   WHAT WAS LEFT BEHIND, AND WHY, so nobody re-derives it as missing:

     .verdict / .ring / .vtext / .plab / .vdesc   the match ring and its
        wording. The ring is a graphic of one number; the panes each carry that
        number in their own .cbar, which is the first edition's own later
        answer to the same question.
     .pairhint / .pairrow / .pn / .bar            the pivot's pairing rows.
        Every pairing is a TAB in this layout, so a second list of the same
        pairs would be two controls for one job.
     .cnt / .qual                                 the "3 of 5" token badges.
        This edition puts a group's count in .gc, which site.css already
        carries, and a claim's qualifier in .chip .cq.
     .dgroup / .dn                                the per-entity "unique to"
        blocks of the old two-column chart, which this layout does not port.
     .picks / .pick / select / option / .go / .formrow   ARE ported, below,
        because the selection area keeps its look; what is not ported is the
        cascade of three <select>s, which needs an AJAX endpoint this edition
        does not have. See Compare.aspx.vb on the selection area.
     .peekon and the whole .pkpop popover        the hover-detail popup needs
        EntityPeek.ashx, which does not exist here. Nothing in this file
        depends on it and re-adding it is additive.

   Theme tokens only, so light and dark both work with nothing extra. Every
   size is in rem or em, never px on anything holding text, so the A-/A+
   control and the browser's own text size both scale it.
   ============================================================ */

/* ---- the selection area, the first edition's chooser look ------------------
   The controls differ (one search box where the first edition cascaded three
   selects) and the look does not: same grid, same field treatment, same gold
   submit. */
/* 14rem is 210.0px at the html{font-size:93.75%} base, so nothing moves at the default.
   The header above claims every size here is rem "never px on anything holding text",
   and this track floor was the exception: it sizes the columns the participant pickers
   sit in, and a px floor kept three pickers side by side at 200 per cent with their
   labels and typed entity names squeezed. Lane textsize-200, 2026-08-05. */
.cmppage .picks{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(14rem,100%),1fr));gap:12px;margin:0 0 14px}
.cmppage .pick{display:flex;flex-direction:column;gap:5px;min-width:0}
/* The declared display beats the UA's [hidden] rule, so restate it. */
.cmppage .pick[hidden]{display:none}
.cmppage .pick label{color:var(--faint);text-transform:uppercase;letter-spacing:.11em;
  font-size:.64rem;font-weight:600}
.cmppage .pick input[type="text"],
.cmppage .pick input[type="search"],
.cmppage .pick select{width:100%;max-width:100%;background:var(--panel2);color:var(--ink);
  border:1px solid var(--edge2);border-radius:10px;padding:9px 11px;font:inherit;font-size:.9rem}
.cmppage .pick input:focus-visible,
.cmppage .pick select:focus-visible{outline:2px solid var(--gold);outline-offset:1px}
.cmppage .pick option{background:var(--panel2);color:var(--ink)}
.cmppage .go{background:var(--gold);color:var(--ground);border:1px solid var(--gold);
  border-radius:11px;padding:9px 18px;font:inherit;font-size:.88rem;font-weight:650;
  cursor:pointer;transition:.15s}
.cmppage .go:hover{background:var(--gold-soft)}
.cmppage .go:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.cmppage .formrow{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.cmppage .mut{color:var(--muted);font-size:.88rem;line-height:1.6;margin:0}
.cmppage .warn{color:var(--dark-c);border:1px solid var(--dark-c);background:var(--dark-bg);
  border-radius:11px;padding:10px 13px;margin:0 0 16px;font-size:.9rem}
.cmppage .warn a{color:inherit}

/* ---- a participant and its remove control ----------------------------------
   The X is a plain link to this comparison minus that entry, so it works with
   no JavaScript. It is a SIBLING of the chip rather than a child of it,
   because a link inside a link is invalid and a browser drops the inner one
   silently: the entry's name has to keep going to its own page.

   Sized in em against the chip beside it, so it grows with the A-/A+ control
   instead of shrinking to a dot at 200% text. min-height is what keeps it a
   real target rather than a 12px glyph, which is the weakest interaction on
   the page for a reader with central-field loss. */
.cmppage .cmp-party{display:inline-flex;align-items:stretch;gap:0;max-width:100%;min-width:0}
.cmppage .cmp-party>.chip{border-top-right-radius:0;border-bottom-right-radius:0;
  border-right-color:transparent;min-width:0}
.cmppage .cmp-x{display:inline-flex;align-items:center;justify-content:center;
  flex:none;min-width:2.2em;min-height:2.2em;padding:0 .35em;
  border:1px solid var(--edge);border-left:0;
  border-top-right-radius:99px;border-bottom-right-radius:99px;
  background:var(--panel2);color:var(--muted);text-decoration:none;transition:.13s}
.cmppage .cmp-x svg{width:1em;height:1em;display:block}
.cmppage .cmp-x:hover{color:var(--dark-c);border-color:var(--dark-c)}
.cmppage .cmp-x:focus-visible{outline:2px solid var(--gold);outline-offset:2px}

/* ---- panes -----------------------------------------------------------------
   Everything here is a NARROWING of site.css's own .cpane, never a
   replacement.

   The hidden panes are hidden with the HTML attribute and nothing else, which
   is what makes the no-script fallback work: with script off every pane past
   the first stays hidden and the All pane, which ships visible, is what a
   reader gets. A CSS rule keyed on a class the script adds would leave every
   pane on screen at once for exactly the readers least able to sort them out. */
.cmppage .cpane[hidden]{display:none}
/* A pane holds several sections and the first of them sits right under the
   tabs; the rest want air between them. */
.cmppage .cpane>.csub{margin-top:14px}
.cmppage .cpane>.csub:first-child{margin-top:0}
/* The claim chips wrap and their text wraps inside them. min-width:0 on the
   shrinkable member is the house rule, and white-space:normal is here because
   a claim is a SENTENCE often enough that nowrap would turn it into three
   characters and an ellipsis on a phone. */
.cmppage .cpane .chips{gap:6px}
/* ---- the chip comes down to the token -------------------------------------
   Two directions were considered: the standalone chip growing the
   island's token to match it (the accessibility recommendation, a bigger
   target being normally the easier one for a reader with reduced central
   vision) and the chip
   shrinking to the token instead. The smaller pill was chosen, on the
   argument below. Do not re-raise it.

   MEASURED before this rule existed, on Christianity against Islam at the
   owner's own 150%: the island's .tok stood 18.58px, this chip 30.18px. Two
   surfaces drawing one comparison at two different sizes.

   font-size matches .tok's .76rem exactly, so the two pills read as the same
   size of type. Padding is NOT copied from .tok's literal 2px/8px: those are
   fixed px and .tok itself falls under the WCAG 2.5.8 24px target floor at
   the stylesheet's own default size (23.67px by the same arithmetic below).
   .2em/.7em against this chip's OWN .76rem keep the box within a fraction of
   a pixel of .tok at the default size while staying a box that grows with
   the A-/A+ control rather than one that is merely the right size once:

     .76rem(15px root) = 11.4px; line 11.4*1.55 = 17.67px
     padding .2em+.2em = 2*.2*11.4 = 4.56px; border 2px (1px top and bottom)
     17.67 + 4.56 + 2 = 24.23px, clearing the floor by a quarter pixel

   border-radius matches .tok's 6px rather than the pill's own 99px: the
   ruling says the chip comes down to the TOKEN, not merely to the token's
   height, and a rounded-rect reads as the same object the island draws.

   THE BOX IS NOT PIXEL-IDENTICAL TO .tok AND IS NOT MEANT TO BE. A chip
   carrying a .xtb badge (below) is taller than a bare token by the badge's
   own padding and border stacking inside this padding, exactly as the
   comment on the standalone None Recorded row already documented, and the
   floor above is a fraction of a pixel taller than .tok even with no badge
   at all, because .tok itself sits just under 24px. Both are the SAME kind
   of gap the None Recorded row already tolerates, never the JS pass having
   to shrink a row, only ever grow one. The two placeholder rules below stay
   two rules for the same reason: matched close, not made identical. */
.cmppage .cpane .chip{white-space:normal;min-width:0;max-width:100%;
  font-size:.76rem;padding:.2em .7em;border-radius:6px}

/* ---- badges inside a claim chip -------------------------------------------
   The stance and status badges are site.css's .xtb family, unchanged. They sit
   inside the chip rather than beside it so that a chip is one target and one
   spoken unit: a stance detached from the claim it qualifies is how the first
   edition ended up asserting agreement about a thing one side refuses. */
.cmppage .cpane .chip .xtb{flex:none;margin-left:.15em}

/* ---- the attributes and facts grids ---------------------------------------
   Restored 2026-08-03. The TABLES are already styled: site.css carries the
   whole .dvpage .cmpattrs .cmpgrid family, .cmpgridwrap, .rlab, .av, .shared,
   .contrast, .na and .cmpnote, plus .factsrc and a.fact-cite, byte identical
   with the first edition's. Only the emitter was missing, so only two things
   are needed here.

   ONE: THE WIDTH FLOOR, AS A CLASS RATHER THAN AN INLINE STYLE.
   The first edition stamps min-width on the table element itself, computed from
   the participant count. There are only six possible counts, so they are six
   rules and the table names the one it wants.

   The floor is what makes .cmpgridwrap take the horizontal scroll instead of
   the columns being crushed, and the units are the first edition's own after
   its 2026-07-31 accessibility pass: 9.333rem and 13.333rem are 140px and 200px
   against this site's 15px root, so a reading at 100% is unchanged to the pixel
   and a reader on A+ gets a WIDER table that scrolls rather than cells wrapping
   into tall thin ribbons. calc() over an integer, so no decimal is ever
   formatted and a server whose locale writes a decimal comma cannot void the
   declaration. */
.cmppage .cmpgrid.cmpg1{min-width:calc(9.333rem + 1 * 13.333rem)}
.cmppage .cmpgrid.cmpg2{min-width:calc(9.333rem + 2 * 13.333rem)}
.cmppage .cmpgrid.cmpg3{min-width:calc(9.333rem + 3 * 13.333rem)}
.cmppage .cmpgrid.cmpg4{min-width:calc(9.333rem + 4 * 13.333rem)}
.cmppage .cmpgrid.cmpg5{min-width:calc(9.333rem + 5 * 13.333rem)}
.cmppage .cmpgrid.cmpg6{min-width:calc(9.333rem + 6 * 13.333rem)}

/* TWO: the Facts caption. .cpcap is scoped to .corrprofile in site.css, a
   block this edition does not draw, so the same class over the facts table has
   nothing on it. Same treatment, same tokens, so the two captions cannot drift
   if the correspondence profile is ever ported. */
.cmppage .cmpfacts{margin-top:16px}
.cmppage .cmpfacts .cpcap{color:var(--faint);text-transform:uppercase;letter-spacing:.1em;
  font-size:.6rem;font-weight:600;margin:0 0 7px}

/* ---- read-aloud ------------------------------------------------------------
   The speak button js/panel-speak.js appends to each section heading sits hard
   right, exactly as it does on every other .sechd.

   THE FLEX ROW MOVED, w942-pastyear, 2026-08-12. It used to live here as
   ".cmppage .sechd{display:flex...}" plus ".cmppage .sechd>h2{min-width:0}",
   which was written for the markup this page actually had: a div carrying
   .sechd, wrapping a bare h2 with no class of its own. That div got this
   rule's flex row; the h2 inside it got nothing, because nothing here or in
   site.css ever targeted a bare nested h2, so every one of these seven
   headings rendered at the browser's own oversized default instead of the
   site's. Compare.aspx.vb now puts sechd on the h2 directly, the same
   contract every other page on the site already uses, so the flex row is
   ".dvpage .sec>h2.sechd" in site.css: one declaration instead of a second
   copy here, and it applies through the "cmppage dvpage" dual class this
   page's root already carries. */
.cmppage .speakbar:empty{display:none}

@media (prefers-reduced-motion: reduce){.cmppage *{transition:none!important}}

/* ---- the point in time mode ------------------------------------------------
   w635-timecompare-render, 2026-08-10, rulings 436 and 437.

   THE MESSAGE IS THE TEXT, NEVER THE COLOUR. Every one of the four states is a
   full sentence a reader can read and a listener hears in the same place; these
   rules only decide how those sentences look, and the page reads identically
   correct with none of them applied. That is deliberate: a state carried by a
   tint alone is a state that does not exist for the owner, who reads by ear.

   EVERYTHING SIZED IN em, on purpose. These sit inside a chip whose own text
   already scales with the A- and A+ control, so a rem here would make the
   marker stop scaling with the claim it belongs to, and a px box around it
   would opt the whole marker out of the reader's control. There is no fixed
   height and no fixed width anywhere below, for the same reason, and the marker
   wraps rather than truncating: at 200% text a claim's date is exactly as load
   bearing as the claim itself. */
.cmppage .chip .tmst{display:inline;min-width:0;overflow-wrap:anywhere;font-style:italic}

/* 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. */
.cmppage .chip .tmst-hist{color:var(--gold);font-style:normal;font-weight:600}
.cmppage .chip .tmst-not{color:var(--muted)}
.cmppage .chip .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. */
.cmppage .chip .tmst-bad{color:var(--dark-c);background:var(--dark-bg);font-weight:700}

/* The banner and the not-yet section are ordinary .sec cards and want almost
   nothing of their own; the year itself is carried by the lead sentence inside
   them, which the shared shell already styles. */
.cmppage .cmpasof .lead{margin-bottom:.5em}
.cmppage .cmpnotyet .csub{margin-top:1em}