/*
  The rules this build adds on top of px-shared.css, and nothing else.

  Same contract as about-local.css and home-local.css: px-shared.css is byte-identical to the
  approved build and is never edited, so anything the approved build has no equivalent for lives
  here. Nothing in this file may restate a property px-shared.css already sets — PxStylesheetLayering
  Test fails the build if it does, because a duplicate that drifts is how the About timeline lost its
  mobile breakpoint.

  .px-prose h3
  ------------
  px-shared.css styles h2, p, ul and a inside .px-prose, but never h3 — the approved build's only h3
  is `.px-h3`, applied by hand on markup its designer wrote directly. Our body copy comes from a rich
  text field instead, and the sanitiser's allowlist is `h3[id]` with no `class`, so an editor's h3
  cannot carry .px-h3 and would render at the browser default — larger than the h2 above it.

  Values are .px-h3's (px-shared.css:550), plus the vertical rhythm .px-prose h2 uses, scaled down.
*/
.px-prose h3 {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.06rem;
  letter-spacing: -0.015em;
  color: var(--px-ink);
  margin: clamp(24px, 3.2vw, 34px) 0 10px;
}

/*
  .px-prose a
  -----------
  The approved pages mark every in-body hyperlink `class="px-link"`. Our body copy is a rich text
  field, and the sanitiser allows `a[href|title|target|rel]` — no class — so an editor's link cannot
  carry it and would render as unstyled inherited text with no affordance at all.

  Widening the allowlist to `a[class]` would fix it by letting editors put arbitrary classes on
  links, which is a security boundary moved for a styling problem. Styling the element instead costs
  nothing and cannot be got wrong by an editor.

  Values are .px-link's (px-shared.css:663). px-shared sets `overflow-wrap` on `.px-prose a` and
  nothing else, so none of these restate it.

  `:not([class])` is load-bearing, not tidiness. The rule exists for links the SANITISER produced,
  and those are exactly the anchors with no class attribute — the allowlist strips it. Every OTHER
  anchor inside .px-prose is markup a component wrote, carrying a class that already paints it:
  `.px-btn` (policy_prose's download button, via the shared attachments partial), `.att-btn`
  (every other attachments caller) and `.px-link` (px-contact-card's mailto/tel rows).

  Unscoped, this rule outranked all three. `.px-prose a` is (0,1,1) and `.px-btn` is (0,1,0), so on
  the three §9 policy pages the "Download the PDF" button painted `var(--px-brand)` text on its own
  `var(--px-brand)` fill — brand on brand, contrast ratio 1.00, the label invisible. The hover pair
  did the same with `--px-brand-2`. Restricting to class-less anchors expresses the rule's actual
  contract and cannot lose to the next button class that lands inside a prose block.
*/
.px-prose a:not([class]) {
  color: var(--px-brand);
  text-decoration: none;
  transition: color 0.2s var(--px-ease);
}
.px-prose a:not([class]):hover {
  color: var(--px-brand-2);
  text-decoration: underline;
}

/*
  .df-intro, .df-consent
  ----------------------
  The form page's intro paragraph and consent checkbox. The approved build styles these in an inline
  <style> block on default-form-page.html rather than in px-shared.css, so loading px-shared alone left
  page_form's intro at browser defaults and its consent checkbox as a bare box with no layout.

  Values copied verbatim from that inline block.
*/
.df-intro {
  max-width: 720px;
  margin: 0 0 clamp(22px, 2.6vw, 30px);
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--px-text);
}
.df-consent {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--px-text);
  cursor: pointer;
}
.df-consent input {
  width: 18px;
  height: 18px;
  margin-top: 1px;
  accent-color: var(--px-brand);
  flex-shrink: 0;
}
.df-consent a {
  color: var(--px-brand);
  text-decoration: underline;
}

/* Type-to-search for a long claim select (public.js initSearchableSelect). The text box looks like
   the other inputs, with a magnifier where a select carries its chevron. */
.px-page .sc-combo {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.px-page .sc-combo-input {
  width: 100%;
  box-sizing: border-box;
  padding-right: 38px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%232C2E81' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='7'/><line x1='21' y1='21' x2='16.65' y2='16.65'/></svg>");
  background-repeat: no-repeat;
  background-position: right 14px center;
}
.px-page .sc-combo-list {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 30;
  max-height: 280px;
  margin: 0;
  padding: 6px;
  overflow-y: auto;
  list-style: none;
  background: #fff;
  border: 1px solid var(--px-line);
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
}
.px-page .sc-combo-list[hidden] {
  display: none;
}
.px-page .sc-combo-list [role="option"] {
  padding: 9px 12px;
  border-radius: 8px;
  font-size: 0.9rem;
  color: var(--px-ink-2);
  cursor: pointer;
}
.px-page .sc-combo-list [role="option"]:hover,
.px-page .sc-combo-list [role="option"][aria-selected="true"] {
  background: var(--px-gray);
  color: var(--px-brand-2);
}
.px-page .sc-combo-empty {
  padding: 9px 12px;
  font-size: 0.9rem;
  color: #6e6e73;
}