/* Paperwork pages. That lane appends rules here.
   Class families these pages use that have no selector in styles.css:
   waiting-date, waiting-company, waiting-age, reassign-select,
   receipt-shelf-archives, receipt-shelf-list, receipt-shelf-archive-detail,
   receipt-shelf-card, receipt-facts, receipt-shelf-actions, receipt-shelf-detail,
   receipt-shelf-candidates, linkish, statement-confirm-card,
   statement-publication-status, and the paperwork-scoped payment row / check.
   prior-payment-row and make-rule-opt-in are shared with Today, so they are
   styled only under paperwork wrappers. */

.waiting-date,
.waiting-company,
.waiting-age {
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.waiting-company {
  font-weight: var(--weight-semibold);
  color: var(--ink);
}

.reassign-select {
  width: 100%;
  max-width: 100%;
  min-height: var(--tap-min);
}

.receipt-shelf-archives {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: var(--space-3) 0;
}

.receipt-shelf-list,
.receipt-shelf-candidates {
  list-style: none;
  margin: var(--space-3) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  max-width: 100%;
  min-width: 0;
}

.receipt-shelf-card,
.receipt-shelf-archive-detail,
.statement-confirm-card,
.statement-publication-status {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: var(--space-4);
  max-width: 100%;
  min-width: 0;
}

.statement-publication-status + .statement-publication-status,
.statement-confirm-card + .statement-confirm-card {
  margin-top: var(--space-3);
}

.receipt-facts {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  margin-bottom: var(--space-3);
  min-width: 0;
}

.receipt-facts strong {
  font-size: var(--text-md);
}

.receipt-facts span,
.receipt-shelf-candidates,
.receipt-shelf-archive-detail,
.session-upload-row,
.prior-payment-copy {
  overflow-wrap: anywhere;
}

.receipt-shelf-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-3);
}

.receipt-shelf-actions .btn {
  flex: 1 1 10rem;
}

.receipt-shelf-detail {
  margin-top: var(--space-3);
  min-width: 0;
}

.linkish {
  background: var(--btn-soft);
  color: var(--ink);
  border-radius: var(--radius);
  min-height: var(--tap-min);
  padding: var(--space-2) var(--space-3);
}

.statement-confirm-card .file-label,
.statements-upload .file-label {
  max-width: 100%;
}

/*
 * The statement closing-date field is drawn only for a credit card (rd14 T2
 * fix round 3). `.file-label` sets `display: flex`, and an author rule beats
 * the browser's own `[hidden] { display: none }`, so without this the field
 * would stay on screen for a bank account — asked of an account that has no
 * statement closing day.
 */
.statements-upload .file-label[hidden] {
  display: none;
}

.statement-confirm-card .input,
.statement-confirm-card .field-input,
.statements-upload .input,
.statements-upload .field-input {
  width: 100%;
  max-width: 100%;
}

.attached-payments-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-width: 0;
  max-width: 100%;
}

.attached-payments-list .prior-payment-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: var(--space-3);
  max-width: 100%;
  min-width: 0;
}

.attached-payments-list .prior-payment-row label {
  flex: 1 1 16rem;
  min-width: 0;
}

.paperwork-check {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  max-width: 100%;
}

.paperwork-check[hidden] {
  display: none;
}

.paperwork-check input {
  margin-top: 0.2rem;
  flex: 0 0 auto;
}

.recurring-schedule .table-scroll {
  max-width: 100%;
}

.waiting-list,
.receipt-shelf-list,
.receipt-shelf-archive-detail,
.recurring-schedule,
.attached-payments-list,
.statements-upload,
.statement-confirm-card,
.statement-publication-status {
  scroll-margin-bottom: var(--bottombar-h);
}

@media (max-width: 639px) {
  .waiting-list,
  .receipt-shelf-list,
  .recurring-schedule,
  .attached-payments-list,
  [data-role="session-uploads"],
  [data-role="statement-confirmations"] {
    margin-bottom: calc(var(--bottombar-h, 64px) + var(--space-4));
  }
}

/* G11 / UV2: everything the hub sent, above the shelf it explains. */

.hub-intake {
  margin: 0 0 var(--space-5);
  min-width: 0;
}

.hub-intake-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

.hub-intake-heading-block {
  flex: 1 1 18rem;
  min-width: 0;
}

.hub-intake-heading {
  margin: 0 0 var(--space-1);
  font-size: var(--text-xl);
}

.hub-intake-heading-block .lede {
  margin: 0;
}

.hub-intake-month {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  flex: 0 0 auto;
}

.hub-intake-month-label {
  min-width: 8.5rem;
  text-align: center;
  font-weight: var(--weight-semibold);
}

.hub-intake-chevron:disabled {
  opacity: 0.4;
  cursor: default;
}

.hub-intake-filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: 0 0 var(--space-3);
}

/* Explicit colours for every chip state. The base .chip uses --btn-soft,
   which does not change in dark mode, so a chip left to it is light text on a
   light pill. Light mode is unchanged; dark swaps in tokens that do change.
   Y4: the chips are buttons, so they get the same --btn-line edge as a
   secondary button (1.03:1 without it read as plain text). */
.hub-intake-filter {
  background: var(--btn-soft);
  color: var(--ink);
  border: 1px solid var(--btn-line);
  font: inherit;
  font-size: var(--text-xs);
  cursor: pointer;
}

.hub-intake-filter[data-active="true"] {
  background: var(--btn-soft);
  color: var(--ink);
  border-color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--ink);
}

.hub-intake-filter:focus-visible {
  outline: 2px solid var(--focus-ring-outer);
  outline-offset: 2px;
  box-shadow: 0 0 0 2px var(--focus-ring);
}

:root[data-theme="dark"] .hub-intake-filter {
  background: var(--card);
  color: var(--ink);
  /* Y4: --line is 1.25:1 on this fill, which undoes the light chip's edge.
     --btn-line is the same edge as a secondary button: 4.29:1 on the chip and
     4.71:1 on the page. */
  border-color: var(--btn-line);
}

:root[data-theme="dark"] .hub-intake-filter[data-active="true"] {
  background: color-mix(in srgb, var(--gold) 24%, var(--card));
  color: var(--ink);
  border-color: var(--gold);
  box-shadow: inset 0 0 0 1px var(--gold);
}

/* Kept as its own dark rule (not folded into the shared one) so a dark chip
   still declares its ring: the tokens are theme-aware, and the ring must be
   re-stated here for the dark cascade to reach it. */
:root[data-theme="dark"] .hub-intake-filter:focus-visible {
  outline: 2px solid var(--focus-ring-outer);
  outline-offset: 2px;
  box-shadow: 0 0 0 2px var(--focus-ring);
}

.hub-intake-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-width: 0;
}

.hub-intake-row {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: var(--space-3) var(--space-4);
  min-width: 0;
  max-width: 100%;
}

.hub-intake-main {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-1) var(--space-3);
  min-width: 0;
}

.hub-intake-date,
.hub-intake-hub-said {
  color: var(--muted);
  font-size: var(--text-sm);
}

.hub-intake-what {
  flex: 1 1 10rem;
  min-width: 0;
  overflow-wrap: anywhere;
  font-weight: var(--weight-semibold);
}

.hub-intake-amount {
  margin-left: auto;
  font-variant-numeric: tabular-nums;
  font-weight: var(--weight-semibold);
}

.hub-intake-sentence {
  margin: var(--space-2) 0 0;
  overflow-wrap: anywhere;
}

.hub-intake-row .btn {
  margin-top: var(--space-2);
}

.hub-intake-hub-said {
  margin: var(--space-1) 0 0;
  overflow-wrap: anywhere;
}

.hub-intake-row .disclosure {
  margin-top: var(--space-2);
}

@media (max-width: 639px) {
  .table-scroll td[data-label]::before {
    content: attr(data-label);
    display: block;
    color: var(--muted);
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
  }

  /* Y4/M13: the Receipts filter chips measured 28px tall on a phone. */
  .hub-intake-filter {
    min-height: var(--tap-min);
    padding: 0 var(--space-3);
  }

  .receipt-shelf-actions .btn,
  .statements-upload .btn,
  .attached-payments-list .prior-payment-row .btn {
    flex: 1 1 100%;
  }

  .statements-upload {
    max-width: 100%;
  }

  .hub-intake-month {
    width: 100%;
    justify-content: space-between;
  }

  .hub-intake-row {
    padding: var(--space-3);
  }

  .hub-intake-amount {
    margin-left: 0;
  }
}