/* Hallmark · genre: editorial · macrostructure: Index / Reading / Catalogue / Forms
 * design-system: design.md · designed-as-app · The Plumbing Exchange
 * One PlumbingTalks palette and shared masthead, controls and footer across routes.
 */
body.af-platform.af-plumbing-design,
body.af-platform.af-plumbing-design [data-af-palette="plumbing"] {
  --color-publication-paper: var(--color-ex-paper);
  --color-publication-surface: var(--color-ex-paper);
  --color-publication-soft: var(--color-ex-porcelain);
  --color-publication-ink: var(--color-ex-ink);
  --color-publication-ink-2: var(--color-ex-secondary);
  --color-publication-muted: var(--color-ex-secondary);
  --color-publication-rule: var(--color-ex-rule);
  --color-publication-rule-strong: var(--color-ex-field);
  --color-publication-accent: var(--color-ex-copper);
  --color-publication-accent-hover: var(--color-ex-copper-pressed);
  --color-publication-accent-soft: var(--color-ex-porcelain);
  --color-publication-reverse-muted: var(--color-ex-reverse);
  --color-plumbing-signal: var(--color-ex-copper-light);
  --color-plumbing-signal-hover: var(--color-ex-reverse);
  --color-plumbing-thread-rule: var(--color-ex-row-rule);
  --color-scrim: color-mix(in oklch, var(--color-ex-deep) 50%, var(--color-ex-clear));
  --color-shadow: color-mix(in oklch, var(--color-ex-deep) 12%, var(--color-ex-clear));
  --font-plumbing-display: var(--font-ex-display);
  --text-plumbing-title: clamp(var(--text-ex-intro-mobile), 3.6vw, var(--text-ex-intro));
  --text-plumbing-section: var(--text-ex-chapter);
  --text-plumbing-hero: var(--text-plumbing-title);
  --text-publication-discovery: var(--text-plumbing-title);
  --radius-xs: var(--radius-ex-control);
  --radius-sm: var(--radius-ex-control);
  --radius-md: var(--radius-ex-control);
}

body.af-platform.af-plumbing-design { background: var(--color-ex-paper); }

body.af-platform.af-plumbing-design #wpforo.af-publication #wpforo-wrap,
body.af-platform.af-plumbing-design.aigenforums-directory {
  color: var(--color-ex-ink);
  background: var(--color-ex-paper);

  /* Both existing shells use the same masthead geometry and inverse colors. */
  :is(.af-publication-header,.af-publication-masthead,.af-dir-appbar,.af-publication-nav,.af-dir-primary-nav) {
    --color-ink: var(--color-ex-paper);
    --color-ink-2: var(--color-ex-reverse);
    --color-muted: var(--color-ex-reverse);
    --color-accent: var(--color-ex-paper);
    --color-focus: var(--color-ex-paper);
    color: var(--color-ex-paper); background: var(--color-ex-deep);
  }
  :is(.af-publication-masthead__inner,.af-dir-appbar__inner) { width: 100%; max-width: var(--layout-ex-width); margin-inline: auto; padding: var(--space-ex-sm) var(--space-ex-xl) 0; min-height: 64px; }
  :is(.af-brand__name,.af-dir-brand__name) { font: 500 var(--text-ex-wordmark)/1 var(--font-ex-display); letter-spacing: -.04em; color: var(--color-ex-paper); white-space: nowrap; }
  .af-exchange-descriptor { margin: var(--space-ex-2xs) var(--space-ex-md) 0; text-align: center; color: var(--color-ex-reverse); font: 400 var(--text-ex-meta)/1.4 var(--font-ex-body); }
  :is(.af-publication-nav,.af-dir-primary-nav) { min-height: var(--control-ex-height); padding-block: 0; }
  :is(.af-publication-nav,.af-dir-primary-nav) a { min-height: var(--control-ex-height); color: var(--color-ex-reverse); }
  :is(.af-new-topic,.af-dir-business-link) { background: var(--color-ex-paper); color: var(--color-ex-deep); border-color: var(--color-ex-paper); }
  :is(.af-publication-header,.af-dir-appbar) :is(a,button):focus-visible { outline: var(--rule-ex-focus) solid var(--color-ex-paper) !important; outline-offset: var(--space-ex-2xs); }

  /* Repeated headings and conversation titles share the homepage type scale. */
  :is(.af-view-header,.af-thread-header,.af-route-header,.af-auth-header,.af-profile-head,.af-dir-page-head,.af-platform-market-header,.af-dir-profile-hero,.af-dir-form-header) h1,
  #wpforo-title {
    font: 500 var(--text-plumbing-title)/1.1 var(--font-ex-display); letter-spacing: -.025em; color: var(--color-ex-ink); max-width: 30ch;
  }
  :is(.af-conversation h3,.af-conversation h3 a,.af-index-discussion__title,.af-index-discussion__title > a,.af-search-result h3,.af-search-result h3 a,.af-related-list a) {
    font: 550 var(--text-ex-topic)/1.4 var(--font-ex-body) !important; letter-spacing: normal;
  }
  :is(.af-view-header,.af-thread-header,.af-route-header,.af-auth-header,.af-platform-market-header,.af-dir-page-head,.af-dir-profile-hero--text) {
    position: relative; border-top: var(--rule-ex-fine) solid var(--color-ex-rule); padding-top: var(--space-ex-lg);
  }
  :is(.af-view-header,.af-thread-header,.af-route-header,.af-auth-header,.af-platform-market-header,.af-dir-page-head,.af-dir-profile-hero--text)::before {
    content: ""; position: absolute; top: calc(-1 * var(--rule-ex-fine)); left: 0; width: var(--space-ex-lg); height: var(--space-ex-xs); border-top: var(--rule-ex-focus) solid var(--color-ex-copper); border-left: var(--rule-ex-focus) solid var(--color-ex-copper); pointer-events: none;
  }
  .af-topic-feed { padding-inline: 0; background: var(--color-ex-paper); }
  .af-index-discussion.wpf-thread { border-color: var(--color-ex-row-rule); }
  .af-topic-feed__head :is(h2,h3) { font: 600 var(--text-ex-body)/1.4 var(--font-ex-body) !important; }
  .af-conversation { background: var(--color-ex-clear); border-color: var(--color-ex-row-rule); }
  .af-conversation:hover { background: var(--color-ex-porcelain); }
  .af-conversation:hover h3 a { color: var(--color-ex-copper); }
  .af-forum-directory__name { font-family: var(--font-ex-body); font-size: var(--text-ex-subforum); }
  :is(.af-post--starter,.af-workspace--thread :is(.wpfl-2,.wpfl-4) .af-post--starter) { background: var(--color-ex-paper); border-top: var(--rule-ex-fine) solid var(--color-ex-rule); padding: var(--space-ex-lg) 0; }
  .af-workspace--thread :is(.wpfl-2,.wpfl-4) .af-replies-separator.wpf-replies-sep { font-size: var(--text-ex-chapter); }
  :is(.af-reply-composer,.af-provider-finder,.af-auth-context,.af-member-browser__tools,.af-results-search,.af-dir-profile-facts,.af-platform-provider-filters,.af-platform-market-header aside) {
    background: var(--color-ex-porcelain); border-color: var(--color-ex-rule); box-shadow: none;
  }
  :is(.af-post,.af-auth-view,.af-profile-head,.af-member-card,.af-dir-basic,.af-dir-premium-card,.af-dir-profile-hero--text,.af-dir-billing,.af-dir-checkout,.af-dir-waitlist) { background-color: var(--color-ex-paper); }
  .af-auth-main { padding: var(--space-ex-xl); }
  .af-auth-context { padding: var(--space-ex-xl); }
  .af-auth-context h2 { font: 500 var(--text-ex-chapter)/1.15 var(--font-ex-display); }

  /* Directory openings use the same compact, light composition as the forum. */
  :is(.af-platform-directory-hero,.af-dir-upgrade-hero) {
    position: relative; margin-block: var(--space-ex-md) var(--space-ex-2xl); padding: var(--space-ex-xl) 0; gap: var(--space-ex-2xl);
    background: var(--color-ex-paper); color: var(--color-ex-ink); border-bottom: 0; border-top: var(--rule-ex-fine) solid var(--color-ex-rule);
  }
  :is(.af-platform-directory-hero,.af-dir-upgrade-hero)::before { content: ""; position: absolute; top: calc(-1 * var(--rule-ex-fine)); left: 0; width: var(--space-ex-lg); height: var(--space-ex-xs); border-top: var(--rule-ex-focus) solid var(--color-ex-copper); border-left: var(--rule-ex-focus) solid var(--color-ex-copper); }
  :is(.af-platform-directory-hero,.af-dir-upgrade-hero) h1 { max-width: 25ch; color: var(--color-ex-ink); font: 500 var(--text-plumbing-title)/1.1 var(--font-ex-display); letter-spacing: -.025em; }
  :is(.af-platform-directory-hero,.af-dir-upgrade-hero) > div > p { color: var(--color-ex-secondary); font-size: var(--text-ex-body); line-height: 1.6; }
  :is(.af-platform-directory-hero > div > .af-plumbing-kicker,.af-dir-upgrade-hero .af-dir-upgrade-hero__label) { color: var(--color-ex-copper); font: 600 var(--text-ex-meta)/1.4 var(--font-ex-body); letter-spacing: normal; text-transform: none; }
  :is(.af-platform-directory-hero .af-platform-directory-actions,.af-dir-upgrade-actions) a { color: var(--color-ex-copper); font-size: var(--text-ex-meta); }
  :is(.af-platform-directory-hero .af-platform-directory-actions,.af-dir-upgrade-actions) a:focus-visible { outline-color: var(--color-ex-copper) !important; }
  .af-dir-upgrade-hero .af-dir-price { padding: var(--space-ex-xl); border: 0; background: var(--color-ex-porcelain); }
  .af-dir-upgrade-hero .af-dir-price strong { font: 500 var(--text-ex-price)/1 var(--font-ex-display); color: var(--color-ex-copper); }
  .af-dir-upgrade-hero .af-dir-price p { font-size: var(--text-ex-body); color: var(--color-ex-secondary); }
  :is(.af-platform-section-head,.af-dir-section-head) h2 { font: 500 var(--text-ex-chapter)/1.15 var(--font-ex-display); color: var(--color-ex-ink); }
  .af-platform-country-select { border-color: var(--color-ex-rule); }
  .af-platform-country-select a { padding: var(--space-ex-md); }
  .af-platform-country-select strong { font-size: var(--text-ex-chapter); }
  .af-platform-region-grid h4, .af-platform-region-grid h4 a { color: var(--color-ex-ink); }
  .af-platform-provider-grid { gap: var(--space-ex-xl); }
  .af-dir-premium-card { border: var(--rule-ex-fine) solid var(--color-ex-rule); border-top-color: var(--color-ex-copper); }
  .af-dir-premium-card__body h3 { font: 500 var(--text-ex-section)/1.25 var(--font-ex-body); letter-spacing: normal; }
  .af-dir-profile-hero--text { padding: var(--space-ex-xl) 0; border-bottom: var(--rule-ex-fine) solid var(--color-ex-rule); }
  .af-dir-profile-main h2 { font: 500 var(--text-ex-chapter)/1.15 var(--font-ex-display); }

  /* Real controls retain their handlers, form actions, and semantic states. */
  :is(.af-provider-finder button,.af-results-search button,.wpf-member-search,.af-primary-submit,.wpforo-login-content input[type="submit"],.af-command-search__submit,.af-auth-form input.af-auth-submit,.af-dir-button:not(.af-dir-button--secondary):not(.af-dir-button--quiet),.af-forum-directory__action,.af-view-header__actions .wpf-button,.af-reply-composer input[type="submit"],.wpf-add-topic-wrap input[type="submit"]) {
    min-height: var(--control-ex-height); border-radius: var(--radius-ex-control); border-color: var(--color-ex-copper) !important; background: var(--color-ex-copper) !important; color: var(--color-ex-paper) !important; font-family: var(--font-ex-body);
  }
  :is(.af-provider-finder button,.af-results-search button,.wpf-member-search,.af-primary-submit,.wpforo-login-content input[type="submit"],.af-command-search__submit,.af-auth-form input.af-auth-submit,.af-dir-button:not(.af-dir-button--secondary):not(.af-dir-button--quiet),.af-forum-directory__action,.af-view-header__actions .wpf-button,.af-reply-composer input[type="submit"],.wpf-add-topic-wrap input[type="submit"]):is(:hover,:active):not(:disabled) { background: var(--color-ex-copper-pressed) !important; border-color: var(--color-ex-copper-pressed) !important; color: var(--color-ex-paper) !important; }
  :is(.af-auth-form,.af-provider-finder,.af-results-search,.af-dir-field,.af-dir-command__field) :is(input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]),textarea,select) { min-height: var(--control-ex-height); background-color: var(--color-ex-paper); color: var(--color-ex-ink); border-color: var(--color-ex-field); border-radius: var(--radius-ex-control); }
  :is(.af-auth-form,.af-provider-finder,.af-results-search,.af-dir-field) :is(input,textarea)::placeholder { color: var(--color-ex-secondary); opacity: 1; }
  :is(.af-route-view,.af-workspace,.af-dir,.af-dir-dialog) :is(a,button,input,textarea,select):focus-visible { outline: var(--rule-ex-focus) solid var(--color-ex-copper); outline-offset: var(--space-ex-2xs); }

  .af-profile-form input[type="file"] { min-height: var(--control-ex-height); color: var(--color-ex-ink); }
  .af-profile-form input[type="file"]::file-selector-button { min-height: var(--control-ex-height); padding-inline: var(--space-ex-sm); font: inherit; background: var(--color-ex-paper); color: var(--color-ex-ink); border: var(--rule-ex-fine) solid var(--color-ex-field); border-radius: var(--radius-ex-control); }
  .wpf-profile-section:has(.wpforo-login-wrap) { max-width: 32rem; margin-inline: auto; border: 0; }
  .wpforo-login-wrap { padding: var(--space-ex-lg) 0; border: 0; box-shadow: none; }
  :is(.wpforo-login-wrap,.wpforo-login-table,.wpforo-login-table .wpf-field) { background: var(--color-ex-paper) !important; color: var(--color-ex-secondary); border: 0; }
  .wpforo-login-content h3 { text-align: left; color: var(--color-ex-ink); font: 500 var(--text-ex-section)/1.3 var(--font-ex-display); }
  .wpforo-login-table :is(.wpf-tr,.wpf-td,.wpf-field-wrap) { border: 0; color: var(--color-ex-secondary); }
  .wpforo-login-table .wpf-field-wrap { text-align: left !important; }
  .wpforo-login-table label { text-align: left; color: var(--color-ex-ink); }
  .wpforo-login-table input { border-radius: var(--radius-ex-control); }
  .wpforo-login-table input:focus-visible { outline: var(--rule-ex-focus) solid var(--color-ex-copper); outline-offset: var(--space-ex-2xs); }

  /* A restrained closing invitation and identical footer on every page family. */
  .af-plumbing-footer { background: var(--color-ex-deep); color: var(--color-ex-paper); }
  .af-plumbing-footer__inner { max-width: var(--layout-ex-width); padding: var(--space-ex-2xl) var(--space-ex-xl) var(--space-ex-xl); }
  .af-plumbing-membership { padding-bottom: var(--space-ex-xl); gap: var(--space-ex-xl); }
  .af-plumbing-membership h2 { max-width: none; font-size: var(--text-ex-chapter); line-height: 1.15; color: var(--color-ex-paper); }
  .af-plumbing-membership p { max-width: none; margin-top: var(--space-ex-sm); color: var(--color-ex-reverse); font-size: var(--text-ex-city); }
  .af-plumbing-membership__actions { gap: var(--space-ex-xs); }
  .af-plumbing-membership__actions p { font-size: var(--text-ex-meta); }
  .af-plumbing-footer__directory { padding-block: var(--space-ex-xl); }
  .af-plumbing-footer__identity > a { font-size: var(--text-ex-chapter); }
  :is(.af-plumbing-membership,.af-plumbing-footer__bottom) { border-color: var(--color-ex-inverse-rule); }
  .af-plumbing-footer__bottom { padding-top: var(--space-ex-lg); }
  .af-plumbing-footer__note { padding-top: var(--space-ex-sm); }
  .af-plumbing-footer :is(a,button):focus-visible { outline-color: var(--color-ex-paper) !important; }
}

@media (max-width: 67.99rem) {
  body.af-platform.af-plumbing-design #wpforo.af-publication #wpforo-wrap,
  body.af-platform.af-plumbing-design.aigenforums-directory {
    :is(.af-publication-masthead__inner,.af-dir-appbar__inner) { min-height: 64px; padding: var(--space-ex-xs) var(--space-ex-md) 0; }
    :is(.af-brand__name,.af-dir-brand__name) { font-size: var(--text-ex-wordmark-mobile); letter-spacing: -.035em; }
    .af-brand--compact :is(.af-brand__name,.af-dir-brand__name) { font-size: clamp(var(--text-ex-body),14cqi,var(--text-ex-wordmark-mobile)); }
    .af-exchange-descriptor { margin-top: 0; padding-bottom: var(--space-ex-xs); font-size: var(--text-ex-caption); }
  }
}
@media (max-width: 47.99rem) {
  body.af-platform.af-plumbing-design #wpforo.af-publication #wpforo-wrap,
  body.af-platform.af-plumbing-design.aigenforums-directory {
    :is(.af-platform-directory-hero,.af-dir-upgrade-hero) { grid-template-columns: minmax(0,1fr); gap: var(--space-ex-xl); padding: var(--space-ex-lg) 0; }
    :is(.af-platform-directory-hero,.af-dir-upgrade-hero) h1 { font-size: var(--text-ex-intro-mobile); }
    .af-dir-upgrade-hero .af-dir-price { padding: var(--space-ex-lg); }
    :is(.af-auth-main,.af-auth-context) { padding: var(--space-ex-lg); }
    .af-plumbing-footer__inner { padding: var(--space-ex-xl) var(--space-ex-md); }
    .af-plumbing-membership { grid-template-columns: minmax(0,1fr); }
    .af-plumbing-membership h2 { font-size: var(--text-ex-footer-mobile); }
  }
}
@media (prefers-reduced-motion: reduce) {
  body.af-platform.af-plumbing-design :is(a,button,input,textarea,select) { transition: none; scroll-behavior: auto; }
}