/* ═══════════════════════════════════════════════════════════════════════
   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%; }
}