/*
 * dwf-congress-pages-shape.css
 * Styling for DWF_Congress_Pages (Congress / House of Representatives Home /
 * Senate Home). These pages reuse gtg-*/dwfgt-* class names taken from the
 * reference site's own markup -- this file is what actually makes them look
 * right on any site, since that reference site's theme-bundled CSS for those
 * classes isn't part of this plugin and can't be assumed present elsewhere.
 *
 * Per instruction, the chamber red/blue here is fixed brand identity, not
 * theme-controlled -- the one deliberate exception to this plugin's usual
 * "theme owns color and typography" rule. Font sizing/weight is opinionated
 * where needed for legibility, but no font-family is hardcoded, so the
 * theme's own typeface still comes through.
 */

.dwfgt-reference-congress {
    /* 2026-07-08: corrected to the official color table -- House
       (Heritage Crimson) was close but not exact; Senate (Continental Blue)
       was completely wrong, a dark navy rather than its actual medium blue. */
    --dwf-congress-house: #9C2140;
    --dwf-congress-senate: #541D34;
    --dwf-congress-ink: #141414;
    --dwf-congress-muted: #55514d;
    /* 2026-07-22: per the style guide's "one color, one meaning" rule --
       a House-colored element has no business on a page about the Senate,
       or on the neutral Congress overview, even reused from a shared
       component. Shared components (stat strips, quote accents, Official
       Links, pathway timeline numbers, card labels) were previously
       hardcoded to House's color unconditionally, regardless of which
       page they actually rendered on. This variable lets each page set
       its own accent once, and every shared component read from it
       instead of assuming House. Defaults to neutral ink (there is no
       "Congress" color in the style guide's palette at all -- content
       about Congress as a whole uses neutral tones, not a borrowed
       chamber color), overridden to House or Senate specifically by
       .dwfgt-page--house / .dwfgt-page--senate below. Genuinely
       House-only-by-design elements (.gtg-house-box, the leadership
       column headers, and the House/Senate comparison table, which the
       guide explicitly exempts) stay hardcoded and are not part of this
       system. */
    --dwf-congress-accent: var(--dwf-congress-ink);
    --dwf-congress-rule: #ddd7cf;
    --dwf-congress-soft: #f4f1ec;
    max-width: 75rem;
    margin: 0 auto;
}
/* 2026-07-22, correction: the house/senate contextual accent overrides
   that used to sit here were removed. Shared/neutral scaffolding (stat
   strips, quote accents, pathway numbers, card labels, Official Links,
   the state-abbreviation grid) should just be black or white depending on
   its own background, never a chamber color -- Congress has no color on
   purpose, and per the style guide, a chamber color belongs only to
   content that's actually that chamber's own (the House/Senate summary
   boxes, the leadership column headers, and the comparison table, all of
   which are hardcoded separately and were never part of this variable).
   --dwf-congress-accent now always resolves to ink; kept as a variable
   rather than hardcoding every selector directly, since it's still the
   single place to adjust if that ever needs to change again.
   .dwfgt-page--house / --senate classes stay in the markup in case
   they're useful for something else later, they just no longer affect
   this variable. */

.dwfgt-reference-congress img { max-width: 100%; }

/* Hero */
.gtg-civics-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(220px, 300px);
    gap: 2.5rem;
    align-items: start;
    margin-bottom: 1.6rem;
}
.gtg-logo-title { font-size: clamp(2.4rem, 5vw, 3.6rem); line-height: 1.02; margin: 0 0 .6rem; }
.gtg-civics-hero-main { padding-right: 1rem; }
.gtg-civics-hero-main h2 { font-size: clamp(1.05rem, 1.6vw, 1.3rem); font-weight: 400; line-height: 1.5; color: var(--dwf-congress-muted); margin: 0 0 1.4rem; max-width: none; }
.gtg-stat-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; border-top: 1px solid var(--dwf-congress-rule); padding: 1.4rem 0 .4rem; }
.gtg-stat-strip > div { display: flex; flex-direction: column; gap: .3rem; padding: 0 1.2rem; border-left: 1px solid var(--dwf-congress-rule); }
.gtg-stat-strip > div:first-child { padding-left: 0; border-left: 0; }
.gtg-stat-strip span { font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--dwf-congress-accent); }
.gtg-stat-strip strong { font-size: 1.15rem; }
.gtg-stat-strip em { font-style: normal; font-size: .82rem; color: var(--dwf-congress-muted); }
/* 2026-07-22: numeric stat strips (House/Senate "Voting members / Term
   length / Minimum age") get the same big-centered-number treatment as the
   pathway timeline steps -- this was the section the "increase to ~4.5rem,
   center, tighten line spacing" feedback actually meant; applied to the
   process steps in error last round. Scoped to --numeric so the Congress
   home page's stat strip (phrase values like "House + Senate", which can't
   take a big-number treatment) is unaffected. */
.gtg-stat-strip--numeric { text-align: center; }
.gtg-stat-strip--numeric strong { display: block; font-size: 3.2rem; line-height: 1; font-weight: 700; color: var(--dwf-congress-accent); margin: .2rem 0 .3rem; }
.gtg-stat-strip--numeric strong small { font-size: 1.1rem; font-weight: 700; margin-left: .15rem; }
.gtg-stat-strip--numeric em { line-height: 1.3; }

@media (max-width: 800px) {
    .gtg-civics-hero { grid-template-columns: 1fr; }
    /* -- superseded, merged into the later definition of this same selector further down: .gtg-stat-strip { grid-template-columns: 1fr 1fr; } */
}

/* 2026-07-06: quotes, take two. The wide plain-blockquote-as-separator
   approach relied on the active theme's own blockquote styling, which turned
   out to be wildly inconsistent across themes -- some render it nicely, many
   don't render it as a quote at all. This is one of the few places in this
   plugin where an explicit, self-contained style is worth the tradeoff over
   "let the theme decide": a quote that sometimes doesn't look like a quote
   isn't a good default. Two variants share the same visual language (italic
   serif-style via font-style only -- no font-family override, so the
   theme's own typeface still comes through -- rust color, uppercase
   small-caps attribution) sized differently for their two contexts. */
.dwf-congress-quote-corner {
    margin: 0;
    padding: 0 0 0 1.2rem;
    border-left: 3px solid var(--dwf-congress-accent);
}
.dwf-congress-quote-corner p {
    font-style: italic;
    font-size: 1.05rem;
    line-height: 1.4;
    color: var(--dwf-congress-accent);
    margin: 0 0 .6rem;
}
.dwf-congress-quote-corner cite {
    display: block;
    font-style: normal;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--dwf-congress-muted);
}

@media (max-width: 800px) {
    .dwf-congress-quote-corner { padding-left: 1rem; }
}

.dwf-congress-quote {
    background: #fff;
    max-width: 42rem;
    margin: 0 auto;
    border: 0;
    padding: 0;
    quotes: none;
    box-shadow: none;
}
/* 2026-07-22: some themes add their own decorative quotation-mark glyph
   via ::before/::after on blockquote (and sometimes on the paragraph
   inside it), which visually collides with our own .dwf-congress-quote-
   mark spans -- this is the most likely explanation for a theme-specific
   "odd" rendering, since our reset up to this point only addressed
   border/padding/background, not pseudo-element content a theme might
   add independently of those properties. */
.dwf-congress-quote::before,
.dwf-congress-quote::after,
.dwf-congress-quote p::before,
.dwf-congress-quote p::after,
.dwf-congress-quote-text p::before,
.dwf-congress-quote-text p::after { content: none !important; }
.dwf-congress-quote .dwf-quote-rule { display: none; }
/* 2026-07-22: previously only hidden for --narrow; the wide variant (used
   as a section separator between major page parts) still showed it.
   Removed completely for both, per direct instruction. */
.dwf-congress-quote-body { display: flex; gap: 1rem; align-items: flex-start; }
.dwf-congress-quote-mark { font-family: Georgia, serif; font-size: 4.5rem; line-height: .7; color: #a39784; flex-shrink: 0; }
.dwf-congress-quote-text { flex: 1; min-width: 0; }
.dwf-congress-quote-text p { font-family: Georgia, serif; font-style: normal; font-size: 1.35rem; line-height: 1.4; color: var(--dwf-congress-ink); margin: 0; }
.dwf-congress-quote-text cite { display: block; text-align: right; margin-top: .75rem; font-style: normal; font-size: .7rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--dwf-congress-muted); }
.dwf-congress-quote--narrow { max-width: 26rem; margin: 0; }
.dwf-congress-quote--narrow .dwf-congress-quote-body { gap: .6rem; }
.dwf-congress-quote--narrow .dwf-congress-quote-mark { font-size: 3rem; }
.dwf-congress-quote--narrow .dwf-congress-quote-text p { font-size: 1rem; }

@media (max-width: 800px) {
    /* merged from 2 historical duplicate definitions of this selector in this file/context */
.gtg-stat-strip{grid-template-columns:1fr 1fr}
}

/* Section headings */
.gtg-section-head { margin: 1.5rem 0 1rem; }
.gtg-section-head h2 { font-size: 1.6rem; margin: 0 0 .5rem; }
.gtg-section-head p { color: var(--dwf-congress-muted); margin: 0; }

/* Chamber comparison boxes (Congress and Senate pages) */
.gtg-chamber-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin-bottom: 2.4rem; }
.gtg-chamber-box { border-radius: 12px; padding: 2rem; color: #fff; }
.gtg-chamber-box .gtg-chamber-box__head { display: flex; gap: 1.2rem; align-items: flex-start; }
.gtg-chamber-box img { width: 58px; height: 58px; object-fit: contain; flex-shrink: 0; margin-bottom: 0; }
.gtg-chamber-box .gtg-chamber-box__head > div { min-width: 0; }
.gtg-house-box { background: var(--dwf-congress-house); }
.gtg-senate-box { background: var(--dwf-congress-senate); }
.gtg-chamber-box > span { display: block; font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; opacity: .85; margin-bottom: .3rem; }
.gtg-chamber-box h3 { font-size: 1.6rem; margin: 0 0 .8rem; color: #fff; }
.gtg-chamber-box p { margin: 0 0 1.4rem; line-height: 1.5; opacity: .95; }
.gtg-chamber-box__stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: .8rem; margin-bottom: 1.4rem; }
.gtg-chamber-box__stats > div { background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.18); border-radius: 8px; padding: .9rem 1rem; }
.gtg-chamber-box__stats span { display: block; font-size: .66rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; opacity: .75; margin-top: .35rem; }
.gtg-chamber-box__stats strong { display: block; font-family: Arial, Helvetica, sans-serif; font-style: normal; font-size: 1.7rem; font-weight: 700; line-height: 1.05; }
.gtg-chamber-box__stats strong small { font-size: 1.05rem; }
.gtg-chamber-box__links { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; margin-top: .4rem; }
.gtg-chamber-box__links a { display: block; text-align: center; border: 1px solid rgba(255,255,255,.3); border-radius: 8px; padding: .7rem .8rem; color: #fff; text-decoration: none; font-weight: 700; font-size: .85rem; }
.gtg-chamber-box__links a:hover { background: rgba(255,255,255,.1); }
@media (max-width: 480px) { .gtg-chamber-box__links { grid-template-columns: 1fr; } }

@media (max-width: 480px) {
    .gtg-chamber-box__stats { grid-template-columns: 1fr; }
}

.gtg-box-button { display: inline-block; background: #fff; color: var(--dwf-congress-ink) !important; font-size: .8rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: .7rem 1.3rem; border-radius: 999px; text-decoration: none; }
.gtg-box-button:hover { opacity: .9; }

@media (max-width: 700px) {
    .gtg-chamber-grid { grid-template-columns: 1fr; }
}

/* Senate overview cards */
.gtg-pathway-intro { color: var(--dwf-congress-muted); font-size: .95rem; line-height: 1.55; margin: 0 0 1.4rem; max-width: 52rem; }
.gtg-card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin-bottom: 2.4rem; }
.gtg-card-senate { border: 1px solid var(--dwf-congress-rule); border-radius: 12px; padding: 1.6rem; box-shadow: 0 4px 14px rgba(15, 23, 42, .05); }
.gtg-card-senate img { width: 34px; height: 34px; margin-bottom: .9rem; object-fit: contain; }
/* -- superseded, merged into the later definition of this same selector further down: .dwf-civic-tabs--directory .gtg-card-senate { display: flex; gap: 1rem; align-items: flex-start; } */
.dwf-civic-tabs--directory .gtg-card-senate img { flex-shrink: 0; margin-bottom: 0; margin-top: .15rem; }
.dwf-civic-tabs--directory .gtg-card-senate > div { min-width: 0; }
/* 2026-07-22: icon moved to the left of the title/description within the
   Learn More detail panels specifically, per direct instruction -- other
   uses of .gtg-card-senate (Default Starting Points-style cards) keep the
   stacked icon-above-text layout, since that wasn't what was flagged. */
.gtg-card-senate > span { display: block; font-size: .7rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--dwf-congress-accent); margin-bottom: .3rem; }
.gtg-card-senate h3 { font-size: 1.15rem; margin: 0 0 .5rem; }
.gtg-card-senate p { margin: 0; color: var(--dwf-congress-muted); font-size: .92rem; line-height: 1.5; }
/* 2026-07-22: the "Learn More About How Your Representatives Serve" tabs
   (the --directory variant) get their own treatment here, matching the
   contenttabs.png reference exactly: a 2x2 grid with thin divider lines
   between items instead of individually boxed/shadowed cards, a wider
   intro paragraph, and a min-height on the panel area so switching
   between tabs doesn't jump the page height around. */
.dwf-civic-tabs--directory .gtg-pathway-intro { max-width: none; }
.dwf-civic-tabs--directory .gtg-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 2.4rem; margin-bottom: 0; }
/* merged from 2 historical duplicate definitions of this selector in this file/context */
.dwf-civic-tabs--directory .gtg-card-senate{display:flex;gap:1rem;align-items:flex-start;border:0;border-radius:0;box-shadow:none;padding:1.1rem 0;border-bottom:1px solid var(--dwf-congress-rule)}
.dwf-civic-tabs--directory .gtg-card-senate:nth-last-child(-n+2) { border-bottom: 0; }
.dwf-civic-tabs--directory .dwf-civic-tabpanels { min-height: 26rem; }
@media (max-width: 700px) {
  .dwf-civic-tabs--directory .gtg-card-grid { grid-template-columns: 1fr; }
  .dwf-civic-tabs--directory .gtg-card-senate:nth-last-child(-n+2) { border-bottom: 1px solid var(--dwf-congress-rule); }
  .dwf-civic-tabs--directory .gtg-card-senate:last-child { border-bottom: 0; }
  .dwf-civic-tabs--directory .dwf-civic-tabpanels { min-height: 0; }
}

@media (max-width: 800px) {
    .gtg-card-grid { grid-template-columns: 1fr; }
}

/* House bill-path process steps */
.gtg-process { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1.2rem; background: var(--dwf-congress-soft); border-radius: 12px; padding: 1.8rem; margin-bottom: 2.4rem; }
.gtg-process--six { grid-template-columns: repeat(6, 1fr); }
.gtg-process-step { text-align: center; }
.gtg-process-step b { display: block; font-size: 4.5rem; line-height: 1; font-style: normal; font-weight: 700; margin-bottom: .4rem; border: 0; width: auto; height: auto; border-radius: 0; color: var(--dwf-congress-accent); }
.gtg-process-step h3 { font-size: 1rem; margin: 0 0 .2rem; }
.gtg-process-step p { margin: 0; font-size: .84rem; line-height: 1.3; color: var(--dwf-congress-muted); }

@media (max-width: 800px) {
    .gtg-process, .gtg-process--six { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
    .gtg-process, .gtg-process--six { grid-template-columns: 1fr; }
}

/* 2026-07-06: new sections from the Congress page mockup -- quick-facts
   ribbon, "What Congress Does", the House/Senate comparison table, a large
   pull-quote, Congressional Leadership, and Powers of Congress. Colors reuse
   the same --dwf-congress-house / --dwf-congress-senate tokens already
   established for the chamber boxes, per instruction to keep the color codes
   consistent rather than introducing new ones. */

.dwf-congress-facts {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1rem;
    margin: 2rem 0 2.6rem;
}
.dwf-congress-facts > div { border-left: 3px solid var(--dwf-congress-accent); padding-left: .8rem; }
.dwf-congress-facts span { display: block; font-size: .68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--dwf-congress-accent); margin-bottom: .3rem; }
.dwf-congress-facts strong { font-size: 1.05rem; }

@media (max-width: 900px) { .dwf-congress-facts { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px) { .dwf-congress-facts { grid-template-columns: 1fr 1fr; } }

.dwf-congress-does { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 2.5rem; margin-bottom: 2.6rem; }
.dwf-congress-does__main h2 { font-size: 1.9rem; margin: 0 0 .6rem; white-space: nowrap; }
@media (max-width: 480px) { .dwf-congress-does__main h2 { white-space: normal; font-size: 1.6rem; } }
.dwf-congress-does__main > p { color: var(--dwf-congress-muted); margin: 0 0 1.6rem; }
.dwf-congress-does__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }
.dwf-congress-does__grid > div { background: var(--dwf-congress-soft); border-radius: 10px; padding: 1.2rem 1.4rem; border-top: 3px solid var(--dwf-congress-accent); }
.dwf-congress-does__grid > div:nth-child(2n) { border-top-color: var(--dwf-congress-senate); }
.dwf-congress-does__grid img { width: 40px; height: 40px; object-fit: contain; margin-bottom: .6rem; }
.dwf-congress-does__grid h3 { font-size: 1.15rem; margin: 0 0 .4rem; }
.dwf-congress-does__grid p { margin: 0; color: var(--dwf-congress-muted); font-size: .92rem; line-height: 1.5; }
.dwf-congress-does__aside { display: flex; flex-direction: column; }
.dwf-congress-does__aside a { display: block; border-top: 1px solid var(--dwf-congress-rule); padding: .9rem 0; text-decoration: none; color: var(--dwf-congress-accent); font-weight: 700; }
.dwf-congress-does__aside a:first-child { border-top: 0; }
.dwf-congress-does__aside small { display: block; margin-top: .25rem; color: var(--dwf-congress-muted); font-weight: 400; font-size: .82rem; line-height: 1.4; }

@media (max-width: 800px) { .dwf-congress-does { grid-template-columns: 1fr; } .dwf-congress-does__grid { grid-template-columns: 1fr; } }

.dwf-congress-compare { width: 100%; border-collapse: collapse; margin: 0 0 2.6rem; font-size: .92rem; }
.dwf-congress-compare th, .dwf-congress-compare td { text-align: left; padding: .75rem 1rem; border-bottom: 1px solid var(--dwf-congress-rule); }
.dwf-congress-compare thead th { font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.dwf-congress-compare thead th:first-child { color: var(--dwf-congress-muted); border-bottom: 1px solid var(--dwf-congress-ink); }
.dwf-congress-compare thead th:nth-child(2) { color: #fff; background: var(--dwf-congress-house); }
.dwf-congress-compare thead th:nth-child(3) { color: #fff; background: var(--dwf-congress-senate); }
.dwf-congress-compare tbody td:first-child { font-weight: 700; text-transform: uppercase; font-size: .78rem; letter-spacing: .04em; color: var(--dwf-congress-ink); }
.dwf-congress-compare tbody td:nth-child(2) { color: var(--dwf-congress-house); font-weight: 700; background: rgba(156, 33, 64, .08); }
.dwf-congress-compare tbody td:nth-child(3) { color: var(--dwf-congress-senate); font-weight: 700; background: rgba(84, 29, 52, .08); }

.dwf-congress-pullquote--large { max-width: 100%; border: 0; text-align: center; padding: 2rem 0; }
.dwf-congress-pullquote--large p { font-size: clamp(1.3rem, 2.6vw, 1.9rem); font-style: italic; color: var(--dwf-congress-accent); line-height: 1.35; }
.dwf-congress-pullquote--large cite { text-align: center; }

.dwf-congress-eyebrow { font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--dwf-congress-accent); margin: 0 0 .8rem; }
.dwf-congress-leadership { margin-bottom: 2.6rem; }
.dwf-congress-leadership__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.6rem; }
.dwf-congress-leadership__col { border: 1px solid var(--dwf-congress-rule); border-radius: 8px; overflow: hidden; }
.dwf-congress-leadership__col h3 { margin: 0; padding: .9rem 1.2rem; color: #fff; font-size: .95rem; letter-spacing: .04em; text-transform: uppercase; }
.dwf-congress-leadership__col--house h3 { background: var(--dwf-congress-house); }
.dwf-congress-leadership__col--senate h3 { background: var(--dwf-congress-senate); }
.dwf-congress-leadership__col ol { list-style: none; counter-reset: dwf-leader; margin: 0; padding: .4rem 1.2rem 1rem; }
.dwf-congress-leadership__col li { counter-increment: dwf-leader; position: relative; padding: .8rem 0 .8rem 1.8rem; border-top: 1px solid var(--dwf-congress-rule); }
.dwf-congress-leadership__col li:first-child { border-top: 0; }
.dwf-congress-leadership__col li::before { content: counter(dwf-leader); position: absolute; left: 0; top: .8rem; font-style: italic; font-weight: 700; color: var(--dwf-congress-accent); }
.dwf-congress-leadership__col strong { display: block; margin-bottom: .25rem; }
.dwf-congress-leadership__col span { display: block; color: var(--dwf-congress-muted); font-size: .88rem; line-height: 1.45; }
/* 2026-07-22: the single-chamber leadership box (House-only or Senate-only
   page, as opposed to the side-by-side House+Senate comparison) was a
   single narrow column with a lot of unused horizontal space next to it.
   2x2 fills that space and reads as a more finished grid instead of a
   plain numbered list. */
.dwf-congress-leadership__grid--single .dwf-congress-leadership__col ol { display: grid; grid-template-columns: 1fr 1fr; gap: 0 2rem; }
.dwf-congress-leadership__grid--single .dwf-congress-leadership__col li:nth-child(-n+2) { border-top: 0; }
@media (max-width: 640px) {
  .dwf-congress-leadership__grid--single .dwf-congress-leadership__col ol { display: block; }
  .dwf-congress-leadership__grid--single .dwf-congress-leadership__col li:nth-child(-n+2) { border-top: 1px solid var(--dwf-congress-rule); }
  .dwf-congress-leadership__grid--single .dwf-congress-leadership__col li:first-child { border-top: 0; }
}

@media (max-width: 700px) { .dwf-congress-leadership__grid { grid-template-columns: 1fr; } }

.dwf-congress-powers { margin-bottom: 1rem; }
.dwf-congress-powers__grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 1.2rem; }
.dwf-congress-powers__grid > div { display: flex; gap: 1rem; align-items: flex-start; background: var(--dwf-congress-soft); border-radius: 10px; padding: 1.2rem 1.3rem; }
.dwf-congress-powers__grid img { width: 34px; height: 34px; flex-shrink: 0; object-fit: contain; }
.dwf-congress-powers__grid h3 { font-size: 1rem; margin: 0 0 .3rem; }
.dwf-congress-powers__grid p { margin: 0; color: var(--dwf-congress-muted); font-size: .86rem; line-height: 1.45; }

@media (max-width: 900px) { .dwf-congress-powers__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .dwf-congress-powers__grid { grid-template-columns: 1fr; } }

/* Tab-mount content (Member Directory / Senators / Representatives) */
/* -- superseded, merged into the later definition of this same selector further down: .dwfgt-reference-congress .dwf-rep-profile__work-mount { margin: 0 0 2.4rem; } */

/* Member Directory / Senators / Representatives tab content -- compact row
   of state postal abbreviations, each linking to that state's own page.
   No longer boxed (see the single-tab chrome-strip rule in
   dwf-civic-toolkit.css) -- styled here as a plain flowing section instead,
   with just a top rule to mark where it starts. */
/* merged from 2 historical duplicate definitions of this selector in this file/context */
.dwfgt-reference-congress .dwf-rep-profile__work-mount{margin:0 0 2.4rem;border-top:1px solid var(--dwf-congress-rule);padding-top:1.8rem}
.dwf-civic-tab-content h2 { font-size: 1.3rem; margin: 0 0 .5rem; }
.dwf-civic-tab-intro { color: var(--dwf-congress-muted); max-width: none; margin: 0 0 1.2rem; }
/* 2026-07-22: two real bugs found via a live HTML export. First, this
   intro paragraph had the same hardcoded max-width cap found repeatedly
   elsewhere on these pages -- removed, same fix as those. Second, and
   more fundamental: .dwf-state-abbr-row used flex-wrap, which lays out
   as many items per row as happen to fit the available width -- it can
   never reliably produce "25 per row" at all, regardless of viewport,
   since that's not what flex-wrap does. A fixed 25-column grid is the
   only way to guarantee that count regardless of screen width. This is
   already the single shared component every page (Congress, House,
   Senate) calls (congress_member_directory() in
   class-dwf-civic-toolkit.php) -- fixing it once here fixes it
   everywhere it's used, by design. */
/* 2026-07-22: 25 columns was requested to match the familiar A-Z/AA-WY
   split, but 56 states+territories doesn't divide evenly by 25 (25+25+6),
   leaving a visually lopsided last row. 8 columns divides 56 exactly into
   7 full, symmetrical rows instead. */
.dwf-state-abbr-row { display: grid; grid-template-columns: repeat(8, minmax(2.4rem, 1fr)); gap: .4rem; }
@media (max-width: 900px) { .dwf-state-abbr-row { grid-template-columns: repeat(7, minmax(2.2rem, 1fr)); } }
@media (max-width: 560px) { .dwf-state-abbr-row { grid-template-columns: repeat(4, minmax(2rem, 1fr)); } }
.dwf-state-abbr {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 2.6rem; padding: .35rem .5rem;
    border-radius: 6px; background: var(--dwf-congress-soft);
    color: var(--dwf-congress-accent); font-weight: 700; font-size: .82rem;
    letter-spacing: .02em; text-decoration: none;
}
.dwf-state-abbr:hover { background: var(--dwf-congress-accent); color: #fff; }

/* "How to use this page" audit section */
.dwfgt-audit-enrichment { border-top: 1px solid var(--dwf-congress-rule); padding-top: 2.4rem; margin-top: 1.5rem; }
.dwfgt-audit-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; }
.dwfgt-audit-columns--single { grid-template-columns: 1fr; max-width: 32rem; }
.dwfgt-audit-source-panel, .dwfgt-audit-related-panel { background: var(--dwf-congress-soft); border-radius: 12px; padding: 1.8rem; border-top: 3px solid var(--dwf-congress-accent); }
.dwfgt-audit-related-panel { border-top-color: var(--dwf-congress-senate); }
.dwfgt-audit-source-panel--full { max-width: none; }
.dwfgt-audit-source-panel h3, .dwfgt-audit-related-panel h3 { font-size: 1.2rem; margin: 0 0 .5rem; }
.dwfgt-audit-source-panel > p, .dwfgt-audit-related-panel > p { color: var(--dwf-congress-muted); font-size: .88rem; margin: 0 0 1.2rem; }
.dwfgt-audit-link-list { display: flex; flex-direction: column; }
.dwfgt-audit-link-list--two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem 2rem; }
/* 2026-07-22: removed the border-top dividing lines per the officiallinks.png
   reference ("without the lines, use this layout") -- each link is now its
   own self-contained card-like row instead of separated by rules, with a
   title, a short description, and the arrow, rather than just a bare
   linked label. */
.dwfgt-audit-link-list a { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; padding: 0; border: 0; color: inherit; text-decoration: none; }
.dwfgt-audit-link-list a strong { display: block; color: var(--dwf-congress-accent); font-size: 1rem; margin-bottom: .3rem; }
.dwfgt-audit-link-list a small { display: block; color: var(--dwf-congress-muted); font-size: .85rem; line-height: 1.4; font-weight: 400; }
.dwfgt-audit-link-list a > span[aria-hidden] { color: var(--dwf-congress-accent); font-weight: 700; flex-shrink: 0; margin-top: .1rem; }
.dwfgt-audit-link-list a:hover strong { text-decoration: underline; }

@media (max-width: 800px) {
    .dwfgt-audit-columns { grid-template-columns: 1fr; }
}
@media (max-width: 500px) {
    .dwfgt-audit-link-list--two-col { grid-template-columns: 1fr; }
}