/* ═══════════════════════════════════════════════════════════════════════
   plan-changes.css — the county-first plan-changes lookup.

   Loaded only by layouts/enrollment/plan-changes.html, via the `head` block
   added to baseof.html. Kept out of style.css so the shared sheet that 67
   guides download does not grow for one page.

   COLOUR IS SEMANTIC, NOT A RAMP (KTD-8)
   --------------------------------------
   Nothing here is red. An ordinary plan ending is a routine yearly event and
   colouring it as an emergency manufactures alarm the data does not support —
   the design brief forbids it and --color-danger is deliberately unused.

   The tint families encode whether the reader may need to act:
     gold / amber  -> this reader may hold enrollment rights
     blue          -> moved automatically, no rights created
     neutral       -> not an event for this reader

   Every ratio below was measured, not estimated. The site's own
   --color-warning (#B7791F) on --color-warning-light is 3.29:1 and FAILS at
   body size, so the chip foregrounds are darkened locally rather than reusing
   that token. Do not "tidy" these back to the semantic tokens.

   ACCESSIBILITY IS A REQUIREMENT HERE, NOT A PASS AT THE END (R17)
   ---------------------------------------------------------------
   The audience is 65+, frequently on a phone, often minutes after opening
   distressing mail. Focus is always visible, every target clears 48px, and no
   status is ever distinguished by colour alone.
   ═══════════════════════════════════════════════════════════════════════ */

.plan-changes {
  --pc-ending-fg: #7F6012;      /* on --color-gold-light     5.01:1 */
  --pc-ending-bg: #F5EDD4;
  --pc-ending-edge: #C9A84C;

  --pc-leaving-fg: #7A4E0E;     /* on --color-warning-light  6.48:1 */
  --pc-leaving-bg: #FFF3CD;
  --pc-leaving-edge: #B7791F;

  --pc-covered-fg: #7A4E0E;     /* same family, heavier edge — see below */
  --pc-covered-bg: #FFF3CD;
  --pc-covered-edge: #7A4E0E;

  --pc-consol-fg: #1F5288;      /* on --color-info-light     6.48:1 */
  --pc-consol-bg: #D1ECF1;
  --pc-consol-edge: #2B6CB0;

  --pc-quiet-fg: #4A5258;       /* on --color-secondary-bg   6.52:1 */
  --pc-quiet-bg: #EDE8DF;
  --pc-quiet-edge: #D4CFC6;
}

/* ── Non-affiliation notice ─────────────────────────────────────────── */

.pc-affiliation {
  background: var(--color-secondary-bg);
  border-left: 4px solid var(--color-primary);
  border-radius: var(--radius);
  padding: var(--spacing-md);
  margin: var(--spacing-lg) 0;
}
.pc-affiliation p {
  margin: 0;
  font-size: var(--text-body-secondary);
  line-height: var(--line-height-body);
  color: var(--color-text-secondary);
}

/* ── The lookup region ──────────────────────────────────────────────── */

.pc-lookup { margin: var(--spacing-xl) 0; }

.pc-picker {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-lg);
}
.pc-field { display: flex; flex-direction: column; flex: 1 1 220px; min-width: 0; }
.pc-field label {
  font-size: var(--text-body-secondary);
  font-weight: 600;
  margin-bottom: var(--spacing-xs);
  color: var(--color-text-primary);
}
.pc-field select {
  min-height: var(--touch-target-min);
  font-size: var(--text-body);
  padding: 0 var(--spacing-sm);
  border: 2px solid var(--color-input-border);
  border-radius: var(--radius);
  background: var(--color-card);
  color: var(--color-text-primary);
  width: 100%;
}
.pc-field select:disabled {
  background: var(--color-secondary-bg);
  color: var(--color-text-muted);
  cursor: not-allowed;
}
.pc-field .pc-hint {
  font-size: 15px;
  color: var(--color-text-muted);
  margin: var(--spacing-xs) 0 0;
}

/* Focus is never removed and never invisible. R17. */
.plan-changes :is(select, button, a, input, [tabindex]):focus-visible {
  outline: 3px solid var(--color-primary);
  outline-offset: 2px;
  border-radius: var(--radius);
}

/* ── Result states ──────────────────────────────────────────────────── */

.pc-state {
  border-radius: var(--radius);
  padding: var(--spacing-md);
  margin-bottom: var(--spacing-md);
  border-left: 4px solid var(--color-border);
  background: var(--color-card);
}
.pc-state h3 { margin-top: 0; font-size: var(--text-h3-mobile); }
.pc-state p:last-child { margin-bottom: 0; }

.pc-state--quiet   { background: var(--pc-quiet-bg);  border-left-color: var(--color-success); }
.pc-state--partial { background: var(--pc-leaving-bg); border-left-color: var(--pc-leaving-edge); }
.pc-state--unknown { background: var(--color-secondary-bg); border-left-color: var(--color-text-muted); }
.pc-state--error   { background: var(--color-secondary-bg); border-left-color: var(--color-primary); }

.pc-loading {
  display: flex; align-items: center; gap: var(--spacing-sm);
  padding: var(--spacing-md);
  color: var(--color-text-secondary);
  font-size: var(--text-body);
}
.pc-spinner {
  width: 20px; height: 20px; flex: none;
  border: 3px solid var(--color-border);
  border-top-color: var(--color-primary);
  border-radius: 50%;
  animation: pc-spin 0.8s linear infinite;
}
@keyframes pc-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .pc-spinner { animation: none; border-top-color: var(--color-border); }
}

/* ── Status chips ───────────────────────────────────────────────────── */

.pc-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
  padding: 0.35em 0.7em;
  border-radius: 999px;
  border: 1px solid transparent;
  white-space: normal;
}
.pc-chip--ending   { color: var(--pc-ending-fg);  background: var(--pc-ending-bg);  border-color: var(--pc-ending-edge); }
.pc-chip--leaving  { color: var(--pc-leaving-fg); background: var(--pc-leaving-bg); border-color: var(--pc-leaving-edge); }
/* The still-covered chip shares the amber family because it carries the same
   rights — but wears a heavier edge, because it is the one chip whose plain
   reading invites the wrong move. See the trade-off note in the card. */
.pc-chip--covered  { color: var(--pc-covered-fg); background: var(--pc-covered-bg); border: 2px solid var(--pc-covered-edge); }
.pc-chip--consol   { color: var(--pc-consol-fg);  background: var(--pc-consol-bg);  border-color: var(--pc-consol-edge); }
.pc-chip--quiet    { color: var(--pc-quiet-fg);   background: var(--pc-quiet-bg);   border-color: var(--pc-quiet-edge); }

/* ── Plan cards ─────────────────────────────────────────────────────── */

.pc-card {
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: var(--spacing-md);
  margin-bottom: var(--spacing-md);
}
.pc-card-head {
  display: flex; flex-wrap: wrap; align-items: flex-start;
  gap: var(--spacing-xs) var(--spacing-sm);
  margin-bottom: var(--spacing-xs);
}
.pc-plan-name { font-weight: 600; font-size: var(--text-body); margin: 0; flex: 1 1 260px; }
.pc-org { color: var(--color-text-muted); font-size: 15px; margin: 0 0 var(--spacing-sm); }
.pc-status-line { font-size: var(--text-body); margin: 0 0 var(--spacing-sm); }
.pc-successor { font-size: var(--text-body-secondary); margin: 0 0 var(--spacing-sm); }

/* ── Rights blocks ──────────────────────────────────────────────────── */

.pc-rights {
  border-top: 1px solid var(--color-border);
  padding-top: var(--spacing-sm);
  margin-top: var(--spacing-sm);
}
.pc-rights h4 { margin: 0 0 var(--spacing-xs); font-size: var(--text-body); }
.pc-rights p { margin: 0 0 var(--spacing-xs); font-size: var(--text-body-secondary); line-height: var(--line-height-body); }
.pc-rights p:last-child { margin-bottom: 0; }
.pc-tradeoff {
  background: var(--pc-leaving-bg);
  border-left: 4px solid var(--pc-leaving-edge);
  border-radius: var(--radius);
  padding: var(--spacing-sm);
  margin-top: var(--spacing-sm);
}

/* ── Provenance ─────────────────────────────────────────────────────── */

.pc-provenance { margin-top: var(--spacing-xl); }
.pc-sources { list-style: none; padding: 0; }
.pc-sources li { font-size: var(--text-body-secondary); color: var(--color-text-secondary); margin-bottom: var(--spacing-xs); }
.pc-source-kind { font-weight: 600; color: var(--color-text-primary); }
.pc-refreshed, .pc-attribution {
  font-size: var(--text-body-secondary);
  color: var(--color-text-secondary);
  line-height: var(--line-height-body);
}
.pc-attribution { font-style: italic; }

/* ── Breakpoints. 375px is not an afterthought — a large share of this
      traffic is a phone opened straight after reading the letter. ────── */

@media (max-width: 600px) {
  .pc-picker { flex-direction: column; }
  .pc-field { flex: 1 1 auto; }
  .pc-card-head { flex-direction: column; }
  .pc-state h3 { font-size: var(--text-h3-mobile); }
}
@media (min-width: 900px) {
  .pc-state h3 { font-size: var(--text-h3-desktop); }
}

/* ── Waiting mode ───────────────────────────────────────────────────────
   W-KTD-4: this reads as a considered answer, not as construction and not as
   a failure. No countdown, no progress bar, no "coming soon", and explicitly
   NOT .pc-state--error's treatment — that muted grey is reserved for our own
   breakages, and this reader's week is already full of them.

   So: ordinary page type on ordinary page ground. The only device is the same
   left rule the affiliation notice uses, in the primary colour rather than a
   warning one, because nothing here is a warning. */

.pc-waiting {
  margin: var(--spacing-xl) 0;
}

.pc-waiting .pc-waiting-lead {
  border-left: 4px solid var(--color-primary);
  background: var(--color-secondary-bg);
  border-radius: var(--radius);
  padding: var(--spacing-md);
  /* Deliberately not smaller than body text. The lead carries the one fact a
     reader came for, and the audience is 65+. */
  font-size: var(--text-body);
  line-height: var(--line-height-body);
  margin: 0 0 var(--spacing-lg);
}

.pc-waiting h3 {
  margin-top: var(--spacing-lg);
}

.pc-waiting p {
  line-height: var(--line-height-body);
}

/* ── The county promise ─────────────────────────────────────────────────
   The only interactive element in this mode. One field, one button, one
   sentence back. Every target clears --touch-target-min and focus is visible
   through the shared rule above. */

.pc-waiting-county {
  margin: var(--spacing-xl) 0 0;
  padding: var(--spacing-md);
  background: var(--color-secondary-bg);
  border-radius: var(--radius);
}

.pc-waiting-county label {
  display: block;
  font-size: var(--text-body);
  font-weight: 600;
  margin-bottom: var(--spacing-xs);
  color: var(--color-text-primary);
}

.pc-waiting-county input {
  min-height: var(--touch-target-min);
  font-size: var(--text-body);
  padding: 0 var(--spacing-sm);
  border: 2px solid var(--color-input-border);
  border-radius: var(--radius);
  background: var(--color-card);
  color: var(--color-text-primary);
  width: 100%;
  max-width: 24rem;
}

.pc-waiting-county button {
  min-height: var(--touch-target-min);
  /* A 48px-tall button that is 40px wide still fails the target rule. */
  min-width: var(--touch-target-min);
  margin-top: var(--spacing-sm);
  padding: 0 var(--spacing-lg);
  font-size: var(--text-body);
  font-weight: 600;
  border: 2px solid var(--color-primary);
  border-radius: var(--radius);
  background: var(--color-primary);
  color: #fff;
  cursor: pointer;
}

.pc-waiting-county button:hover {
  /* Hover is decoration here. Nothing is communicated by it alone. */
  filter: brightness(0.94);
}

.pc-waiting-answer:not(:empty) {
  margin: var(--spacing-md) 0 0;
  padding: var(--spacing-md);
  background: var(--color-card);
  border-left: 4px solid var(--color-primary);
  border-radius: var(--radius);
  font-size: var(--text-body);
  line-height: var(--line-height-body);
}

@media (max-width: 480px) {
  .pc-waiting-county button { width: 100%; }
}

/* Offering lookup: native controls, neutral listings, explicit restrictions. */
.plan-offerings .po-search { margin-bottom: var(--spacing-lg); }
.plan-offerings .po-search input {
  min-height: 48px;
  width: 100%;
  padding: var(--spacing-sm);
  border: 2px solid var(--color-input-border);
  border-radius: var(--radius);
  background: var(--color-card);
  color: var(--color-text-primary);
  font: inherit;
}
.plan-offerings .po-search input:disabled { background: var(--color-secondary-bg); }
.plan-offerings .po-status {
  padding: var(--spacing-md);
  border-left: 4px solid var(--color-primary);
  border-radius: var(--radius);
  background: var(--color-secondary-bg);
  line-height: var(--line-height-body);
}
.plan-offerings .po-card { overflow-wrap: anywhere; }
.plan-offerings .po-card h3 { line-height: 1.4; margin-bottom: var(--spacing-xs); }
.plan-offerings .po-details {
  display: grid;
  grid-template-columns: minmax(10rem, 2fr) minmax(0, 3fr);
  gap: var(--spacing-xs) var(--spacing-md);
  margin: var(--spacing-md) 0;
  font-size: var(--text-body-secondary);
}
.plan-offerings .po-details dt { font-weight: 600; }
.plan-offerings .po-details dd { margin: 0; }
.plan-offerings .po-card-note { font-size: var(--text-body-secondary); }
.plan-offerings .po-caution, .plan-offerings .po-eligibility {
  background: var(--pc-leaving-bg);
  color: var(--pc-leaving-fg);
  border-left: 4px solid var(--pc-leaving-edge);
  padding: var(--spacing-sm);
  border-radius: var(--radius);
}
.plan-offerings .po-caution { font-weight: 600; }
.plan-offerings .po-plan-link, .plan-offerings .po-official-link {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: var(--spacing-xs) 0;
}
.plan-offerings .po-scope { margin-bottom: var(--spacing-xl); }
@media (max-width: 600px) {
  .plan-offerings .po-details { display: block; }
  .plan-offerings .po-details dd { margin-bottom: var(--spacing-sm); }
}

.plan-offerings .po-more summary {
  min-height: 48px;
  padding: var(--spacing-sm) 0;
  cursor: pointer;
  font-weight: 600;
}
.plan-offerings summary:focus-visible {
  outline: 3px solid var(--color-primary);
  outline-offset: 2px;
}

/* Shared plan links must land below the site's sticky navigation. */
#po-lookup, #po-sources-heading, #po-range { scroll-margin-top: 6rem; }

.plan-offerings .po-pages { margin-block: var(--spacing-md); }
.plan-offerings .po-pages button { min-height: 48px; padding: 0.5rem 1rem; margin: 0 0.5rem 0.5rem 0; font: inherit; cursor: pointer; }
.plan-offerings .po-pages button:disabled { cursor: default; opacity: 0.55; }
.plan-offerings .po-pages button:focus-visible, #po-range:focus-visible { outline: 3px solid var(--color-primary); outline-offset: 3px; }

/* Emphasize the open notice while keeping the surrounding controls quiet. */
.plan-guidance-page { margin-inline: auto; }
.plan-guidance-page .breadcrumbs { margin-bottom: 0.75rem; font-size: 15px; }
.plan-guidance-page .breadcrumbs > span:last-child,
.plan-guidance-page .breadcrumbs > .separator:nth-last-child(2) { display: none; }
.plan-guidance-page > h1 { font-size: clamp(30px, 4vw, 40px); line-height: 1.18; margin-bottom: 0.75rem; }
.plan-guidance-page .pg-lead { margin-bottom: 1.25rem; font-size: 19px; line-height: 1.5; }
.pg-guidance { margin-bottom: 2.5rem; overflow-wrap: anywhere; }
.pg-guidance [hidden] { display: none !important; }
.pg-guidance :is(select, input, button, summary) { font-family: 'Inter', system-ui, sans-serif; }
.pg-guidance :is(button, summary, select, input) { min-height: 48px; }
.pg-guidance :is(summary, button) { cursor: pointer; }
.pg-guidance :is(summary, button, input, select, a, [tabindex]):focus-visible {
  outline: 3px solid var(--color-primary);
  outline-offset: 4px;
}
.pg-find { border: 1px solid var(--color-primary); border-radius: var(--radius); background: var(--color-card); }
.pg-find > summary { padding: 0.875rem 1rem; font-size: 18px; font-weight: 600; line-height: 1.4; color: var(--color-primary); }
.pg-optional { font-size: 16px; font-weight: 500; color: var(--color-text-secondary); white-space: nowrap; }
.pg-find-body { padding: 0 1rem 1rem; }
.pg-find-body > p:first-child { margin-top: 0.5rem; }
.pg-geography { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }
.pg-field { min-width: 0; }
.pg-field label { display: block; font: 600 16px/1.4 'Inter', system-ui, sans-serif; margin-bottom: 0.375rem; }
.pg-field :is(input, select) { display: block; width: 100%; min-width: 0; padding: 0.5rem; border: 1px solid var(--color-input-border); border-radius: 0.25rem; background: var(--color-card); color: var(--color-text-primary); font-size: 16px; }
.pg-field :is(input, select):disabled { background: var(--color-bg); color: var(--color-text-muted); }
.pg-guidance .pg-hint { font-size: 16px; color: var(--color-text-secondary); line-height: 1.5; margin: 0.375rem 0 1rem; }
.pg-guidance .pg-status { margin: 1rem 0; font-size: 16px; line-height: 1.5; }
.pg-guidance button { background: var(--color-card); color: var(--color-primary); border: 1px solid var(--color-primary); border-radius: 0.25rem; padding: 0.5rem 0.75rem; font-size: 16px; font-weight: 600; line-height: 1.5; }
.pg-guidance button:hover { background: var(--color-bg); }
.pg-guidance button:disabled { opacity: 0.55; cursor: default; }
.pg-use-notice { width: 100%; }
.pg-guidance .pg-results { list-style: none; padding: 0; margin: 0 0 1rem; }
.pg-results > li { margin: 0; border-top: 1px solid var(--color-border); }
.pg-results > li > button { width: 100%; border: 0; border-radius: 0; text-align: left; padding: 0.875rem 0.5rem; }
.pg-results button > span { display: block; }
.pg-match-name { color: var(--color-text-primary); font-size: 18px; }
.pg-match-insurer, .pg-match-id { color: var(--color-text-secondary); font-size: 16px; font-weight: 500; margin-top: 0.25rem; }
.pg-match-action { margin-top: 0.5rem; text-decoration: underline; text-underline-offset: 0.2em; }
.pg-pages { margin: 0.75rem 0; }
.pg-pages > p { font: 500 15px/1.5 'Inter', system-ui, sans-serif; margin-bottom: 0.5rem; }
.pg-pages > button { margin: 0 0.5rem 0.5rem 0; }
.pg-guidance .pg-selected { border-left: 3px solid var(--color-primary); margin: 1rem 0; padding: 0.5rem 0 0.5rem 1rem; }
.pg-guidance .pg-eyebrow { font: 600 14px/1.5 'Inter', system-ui, sans-serif; color: var(--color-text-secondary); margin: 0 0 0.25rem; }
.pg-guidance .pg-selected h3 { font-size: 22px; margin: 0 0 0.5rem; }
.pg-guidance .pg-identity { font: 500 18px/1.5 'Inter', system-ui, sans-serif; }
.pg-selected > p:not(.pg-eyebrow) { font-size: 16px; margin-bottom: 0.625rem; }
.pg-guidance #pg-notice-heading { margin: 1.5rem 0 0.5rem; font-size: 26px; line-height: 1.25; }
.pg-guidance .pg-notice-intro { margin-bottom: 0.75rem; font-size: 17px; line-height: 1.5; }
.pg-notice { border-top: 1px solid var(--color-border); }
.pg-notice:last-child { border-bottom: 1px solid var(--color-border); }
.pg-notice > summary { display: flex; align-items: center; gap: 0.75rem; padding: 1rem 0.5rem; color: var(--color-primary); font-size: 18px; font-weight: 600; line-height: 1.45; list-style: none; }
.pg-notice > summary::-webkit-details-marker { display: none; }
.pg-notice > summary::after { content: "+"; flex: none; margin-left: auto; font-size: 26px; font-weight: 400; }
.pg-notice[open] > summary::after { content: "−"; }
.pg-notice > summary > span { min-width: 0; }
.pg-icon { flex: none; width: 28px; height: 28px; color: inherit; }
.pg-notice-help:not([open]) { background: var(--color-gold-light); }
.pg-notice[open] { margin: 0.5rem 0; border: 1px solid var(--color-primary); border-radius: var(--radius); background: var(--color-card); }
.pg-notice[open] > summary { background: var(--color-primary); color: var(--color-primary-foreground); padding-inline: 1rem; border-radius: calc(var(--radius) - 1px) calc(var(--radius) - 1px) 0 0; }
.pg-notice[open] > summary:focus-visible { outline-offset: 3px; }
.pg-response { padding: 1rem; }
.pg-response h3 { font-size: 22px; line-height: 1.3; margin: 1.25rem 0 0.625rem; }
.pg-response p, .pg-response li { line-height: 1.6; }
.pg-response > :last-child { margin-bottom: 0; }
.pg-response .pg-context { color: var(--color-text-secondary); font-size: 16px; }
.pg-response .pg-next-step { background: var(--color-gold-light); margin: -1rem -1rem 1rem; padding: 1rem; }
.pg-next-step h3 { margin-top: 0; font: 600 16px/1.5 'Inter', system-ui, sans-serif; color: var(--color-text-secondary); }
.pg-next-step .pg-answer { font-size: 24px; line-height: 1.3; font-weight: 600; margin-bottom: 0.75rem; }
.pg-guidance .pg-action { display: inline-block; max-width: 100%; min-height: 48px; padding: 0.75rem 1rem; border-radius: 0.25rem; background: var(--color-primary); color: var(--color-primary-foreground); font: 600 18px/1.5 'Inter', system-ui, sans-serif; text-decoration: underline; text-underline-offset: 0.2em; }
.pg-guidance .pg-action:hover { background: var(--color-primary-hover); }
.pg-response .pg-important { border-left: 3px solid var(--color-primary); padding-left: 0.875rem; margin-block: 1rem; }
.pg-extra { margin-top: 1rem; border-top: 1px solid var(--color-border); }
.pg-extra > summary { padding-block: 0.75rem; font-size: 18px; font-weight: 600; color: var(--color-primary); }
.pg-extra > :last-child { margin-bottom: 0; }
.pg-response :is(.pg-date-checks, .pg-review-list, .pg-coverage-help) { list-style: none; padding: 0; margin: 0 0 1rem; }
.pg-date-checks > li { display: flex; align-items: center; gap: 0.75rem; margin: 0; padding-block: 0.5rem; }
.pg-review-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.875rem 1.25rem; }
.pg-review-list > li { display: flex; align-items: flex-start; gap: 0.75rem; margin: 0; padding-block: 0.5rem; }
.pg-review-list .pg-icon { margin-top: 0.2rem; color: var(--color-primary); }
.pg-review-list strong, .pg-coverage-help :is(strong, span) { display: block; }
.pg-review-list > li > span { min-width: 0; font-size: 16px; }
.pg-review-list strong { font-size: 18px; margin-bottom: 0.25rem; }
.pg-coverage-help > li { margin: 0; padding-block: 0.75rem; border-bottom: 1px solid var(--color-border); }
.pg-coverage-help a { display: inline-block; min-height: 48px; padding-block: 0.5rem; }
/* A readable paper example; all annotations remain real, scalable text. */
.pg-example { margin: 0.5rem 0 0; }
.pg-example figcaption { font-size: 16px; line-height: 1.5; margin-bottom: 1rem; }
.pg-example-paper { background: var(--color-bg); border: 1px solid var(--color-border); border-top: 5px solid var(--color-primary); padding: 1rem; }
.pg-example .pg-example-heading { font-size: 22px; line-height: 1.3; margin-bottom: 1rem; }
.pg-example-row { display: flex; align-items: flex-start; gap: 0.75rem; padding-block: 1rem; border-top: 1px solid var(--color-border); }
.pg-example-row > div { min-width: 0; }
.pg-example-row .pg-icon { margin-top: 0.125rem; color: var(--color-primary); }
.pg-example-row p { margin: 0.5rem 0 0; }
.pg-example-id { font-family: ui-monospace, monospace; }
.pg-example .pg-example-note { font-size: 16px; color: var(--color-text-secondary); }
/* Dates run left to right on wide screens and top to bottom on phones. */
.plan-changes .pg-timeline { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); list-style: none; padding: 0; margin: 1rem 0 1.25rem; }
.pg-timeline > li { position: relative; border-top: 3px solid var(--color-primary); padding: 1.25rem 1rem 0 0; margin: 0; min-width: 0; }
.pg-timeline > li::before { content: ""; position: absolute; top: -0.45rem; left: 0; width: 0.75rem; height: 0.75rem; border-radius: 50%; background: var(--color-primary); }
.pg-timeline :is(time, strong, span) { display: block; }
.pg-timeline time { font-size: 22px; font-weight: 600; line-height: 1.35; margin-bottom: 0.5rem; }
.pg-timeline span { font-size: 16px; margin-top: 0.25rem; }
.pg-next-step > :last-child { margin-bottom: 0; }
.pg-guidance .pg-help { margin: 1.25rem 0; font-size: 17px; }
.pg-sources { border-block: 1px solid var(--color-border); font-size: 16px; }
.pg-sources > summary { padding-block: 0.75rem; color: var(--color-primary); font-size: 16px; font-weight: 600; }
.pg-sources > p:first-of-type { margin-top: 0.5rem; }
.plan-guidance-page .trust-bar { font-size: 15px; gap: 0.5rem; margin-bottom: 1rem; }
.plan-guidance-page > #po-lookup { border-top: 2px solid var(--color-primary); padding-top: 0.5rem; margin-top: 3rem; }
#pg-notice-heading, #pg-selected, #pg-range { scroll-margin-top: 6rem; }
@media (max-width: 480px) {
  .pg-review-list { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .plan-changes .pg-timeline { grid-template-columns: minmax(0, 1fr); margin-left: 0.375rem; }
  .pg-timeline > li { border-top: 0; border-left: 3px solid var(--color-primary); padding: 0 0 1.5rem 1.25rem; }
  .pg-timeline > li::before { top: 0.5rem; left: -0.45rem; }
  .pg-timeline > li:last-child { padding-bottom: 0; }
  .pg-geography { grid-template-columns: minmax(0, 1fr); gap: 0.75rem; }
  .pg-guidance #pg-notice-heading { font-size: 24px; }
  .pg-find > summary { font-size: 17px; }
  .pg-optional { display: block; margin-left: 1.1rem; }
}

/* Media navigation mirrors the Q&A site; the notice guide keeps its own layout. */
.guide-media-header, .guide-media-footer { color: #182a2a; }
.guide-media-header { max-width: 1280px; margin: auto; padding: 22px 40px; display: flex; justify-content: space-between; align-items: center; gap: 24px; border-bottom: 1px solid #d7dfda; }
.guide-media-brand { display: flex; gap: 10px; align-items: center; color: inherit; text-decoration: none; font: 25px/1.15 Georgia, serif; min-height: 48px; }
.guide-media-brand img { object-fit: contain; }
.guide-media-brand > span > span { display: block; font: 12px/1.6 Inter, Arial, sans-serif; text-transform: uppercase; letter-spacing: .18em; }
.guide-media-header nav { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; font: 600 15px/1.4 Inter, Arial, sans-serif; }
.guide-media-header nav a { display: inline-flex; align-items: center; min-height: 48px; color: inherit; text-decoration: none; }
.guide-media-header nav a:hover { text-decoration: underline; }
.guide-media-header .guide-media-ask { border: 1px solid #2f4f4f; padding: 12px 18px; border-radius: 5px; }
.guide-media-footer { display: flex; justify-content: space-between; gap: 32px; padding: 36px max(24px, calc((100vw - 1120px) / 2)); background: #f9f7f2; border-top: 1px solid #ded9c9; font: 16px/1.8 Inter, Arial, sans-serif; }
.guide-media-footer-brand { display: inline-flex; min-height: 48px; align-items: center; font: 600 21px/1.5 Georgia, serif; text-decoration: none; }
.guide-media-footer a { color: inherit; text-underline-offset: 5px; }
.guide-media-footer nav { display: flex; flex-wrap: wrap; gap: 8px 24px; max-width: 550px; }
.guide-media-footer nav a { display: inline-flex; align-items: center; min-height: 48px; }
.guide-media-header a:focus-visible, .guide-media-footer a:focus-visible { outline: 3px solid #7f6012; outline-offset: 5px; }
.guide-related-questions { margin: 28px 0; padding: 20px 24px; border-left: 3px solid #c9a84c; background: #f9f7f2; }
.guide-related-questions h2 { margin-top: 0; font-size: 1.35rem; }
.guide-related-questions ul { margin-bottom: 0; }
.guide-related-questions li + li { margin-top: 12px; }
@media (max-width: 700px) {
  .guide-media-header { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 4px 12px; padding: 14px 20px 10px; }
  .guide-media-header nav { display: contents; font-size: 14px; }
  .guide-media-header nav a { min-height: 56px; }
  .guide-media-header nav a:first-child { grid-column: 1; grid-row: 2; }
  .guide-media-header nav a:nth-child(2) { grid-column: 2; grid-row: 2; justify-self: end; }
  .guide-media-header .guide-media-ask { grid-column: 2; grid-row: 1; justify-self: end; border: 0; padding: 0; color: #7f6012; text-decoration: underline; }
  .guide-media-footer { display: block; padding: 30px 22px; }
  .guide-media-footer nav { margin-top: 18px; }
  .guide-media-footer nav a { min-height: 56px; }
  .guide-related-questions { padding: 16px; }
}