/* ==========================================================================
   Fee Refund Policy  —  /page/fee-refund-policy/
   --------------------------------------------------------------------------
   Prose and one five-row table. The table is what people came for, so the
   percentage is the loudest thing on the page and the deadline beside it is
   the thing being read against it.

   Below 700px each tier becomes its own card, led by the percentage: three
   columns at phone width squeeze "formally-notified" to four characters a
   line. The stacked layout prints each column's name from data-label on the
   cell, and the header row is moved off-screen rather than display: none, so
   a screen reader still announces which value is which.
   ========================================================================== */

.refund {
  /* Narrower than a full shell - this is body text, and a 1200px measure is
     hard to read back to. */
  max-width: 880px;
}

.refund-clause {
  margin: 0 0 22px;
  color: var(--ink);
  font-size: 1rem;
  line-height: 1.7;
}

/* ---- the table ---------------------------------------------------------- */
.refund-table-wrap {
  background: var(--paper);
  border-radius: var(--radius);
  box-shadow: var(--shadow-xs);
  overflow-x: auto;              /* a narrow laptop scrolls rather than clips */
}
.refund-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .92rem;
}
.refund-table th,
.refund-table td {
  padding: 13px 16px;
  text-align: left;
  vertical-align: middle;
  border-bottom: 1px solid var(--line);
  line-height: 1.55;
}
.refund-table tbody tr:last-child th,
.refund-table tbody tr:last-child td { border-bottom: 0; }
.refund-table tbody tr:hover { background: rgb(var(--accent-rgb) / 4%); }

.refund-table thead th {
  /* 8%, the tint the fee and telephone tables use: --accent-deep on 10%
     falls under the 4.5:1 a heading this size needs. */
  background: rgb(var(--accent-rgb) / 8%);
  color: var(--accent-deep);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  line-height: 1.4;
}
.refund-table thead th:first-child { white-space: nowrap; }

.refund-table tbody th {
  width: 1%;                     /* shrink to the widest "(n)" */
  color: var(--muted);
  font-weight: 700;
  white-space: nowrap;
}

/* The number people came for. */
.refund-table__pc {
  color: var(--brand);
  font-size: 1.15rem;
  font-weight: 800;
  white-space: nowrap;
}

/* "before" and "after" are the notification's own emphasis, and the whole
   distinction between rows 2 and 3 rests on which one it is. */
.refund-table strong {
  color: var(--ink);
  font-weight: 800;
}

.refund-note {
  display: flex;
  gap: 10px;
  margin: 18px 0 0;
  padding: 14px 18px;
  border-left: 3px solid var(--accent);
  border-radius: 0 var(--radius) var(--radius) 0;
  background: rgb(var(--accent-rgb) / 7%);
  color: var(--ink);
  font-size: .9rem;
  line-height: 1.6;
}
.refund-note__label {
  flex: 0 0 auto;
  color: var(--accent-deep);
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}

/* ==========================================================================
   One card per tier, below 700px
   ========================================================================== */
@media (max-width: 699.98px) {
  .refund-table-wrap {
    background: none;
    box-shadow: none;
    overflow-x: visible;
  }
  .refund-table thead {
    /* Not display: none - that takes the header out of the accessibility tree
       as well, and a screen reader still uses it to announce cells. */
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .refund-table,
  .refund-table tbody,
  .refund-table tr,
  .refund-table th,
  .refund-table td { display: block; }

  .refund-table tr {
    margin-bottom: 12px;
    padding: 14px 16px;
    border-radius: var(--radius);
    background: var(--paper);
    box-shadow: var(--shadow-xs);
  }
  .refund-table tr:last-child { margin-bottom: 0; }
  .refund-table tr:hover { background: var(--paper); }

  .refund-table th,
  .refund-table td {
    width: auto;
    padding: 0;
    border-bottom: 0;
  }
  .refund-table td { margin-top: 8px; }

  .refund-table td::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 2px;
    color: var(--muted);
    font-size: .66rem;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
  }

  /* The serial number says nothing once each tier is its own card - the
     percentage is the heading people scan for, under its own label. */
  .refund-table tbody th { display: none; }
  .refund-table__pc { margin-top: 0; font-size: 1.35rem; }

  .refund-note { flex-direction: column; gap: 4px; }
}