/* =============================================================
   Forward Finance — Available AMCs
   Companion to pages/equity-approved-list.html. Link order:
       fonts.css → tokens.css → site.css → legal.css → equity-approved-list.css

   The page is a live list: the rows are read out of the published
   .xlsx in the browser at load time, so everything here has to hold
   its shape through four states — loading, loaded, empty search,
   and load failure. Skeleton rows reserve the same box the real
   rows occupy so the page does not jump when data lands.

   Column widths are keyed to ROLES (.col-serial / .col-name /
   .col-isin / .col-asof / .col-remarks / .col-extra) rather than to
   positions, because the head is written from the workbook's own
   header row and may gain or reorder columns.
   ============================================================= */

/* -------------------------------------------------------------
   Toolbar — search + live count
   Sticks under the header so the count stays visible while the
   reader scrolls a long list.
   ------------------------------------------------------------- */
.amc-toolbar {
  position: sticky;
  top: var(--nav-h-desktop);
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  padding: 16px 0;
  margin-bottom: 8px;
  background: var(--bg-1);
  border-bottom: 1px solid var(--border-1);
}

.amc-search {
  position: relative;
  flex: 1 1 320px;
  min-width: 240px;
}
.amc-search svg {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  color: var(--fg-3);
  pointer-events: none;
}
.amc-search input {
  width: 100%;
  font: inherit;
  font-size: 15px;
  color: var(--fg-1);
  padding: 12px 14px 12px 42px;
  background: var(--neutral-0);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-pill);
  transition: border-color var(--duration-micro) var(--ease-forward),
              box-shadow var(--duration-micro) var(--ease-forward);
}
.amc-search input::placeholder { color: var(--fg-3); }
.amc-search input:focus {
  outline: none;
  border-color: var(--fw-blue);
  box-shadow: var(--focus-ring);
}

/* Inside .doc, paragraphs carry a top margin - the count sits in a flex
   row, so it opts out. */
.doc .amc-toolbar p { margin-top: 0; }

/* The retry control is a <button>, and .btn in site.css is written for
   anchors: reset the UA chrome so both render identically. */
.amc-state button.btn {
  font: inherit;
  font-weight: 500;
  font-size: 16px;
  background: none;
  cursor: pointer;
}

.amc-count {
  font-size: 14px;
  color: var(--fg-2);
  white-space: nowrap;
}
.amc-count b { color: var(--fg-1); font-weight: 600; font-variant-numeric: tabular-nums; }

/* -------------------------------------------------------------
   The list itself
   A plain table, one row per approved security, in the order the
   workbook lists them. The name column takes the slack; everything
   else shrinks to its content.
   ------------------------------------------------------------- */
.amc-tablewrap {
  margin-top: 24px;
  overflow-x: auto;                      /* narrow screens scroll the table, not the page */
  background: var(--neutral-0);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-md);
}
.amc-tablewrap[hidden] { display: none; }

.amc-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14.5px;
}

.amc-table thead th {
  padding: 12px 18px;
  text-align: left;
  white-space: nowrap;
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--fg-3);
  background: var(--neutral-50);
  border-bottom: 1px solid var(--border-1);
}

.amc-table td {
  padding: 13px 18px;
  vertical-align: middle;
  color: var(--fg-2);
  border-top: 1px solid var(--border-1);
}
.amc-table tbody tr:first-child td { border-top: 0; }
.amc-table tbody tr:hover td { background: var(--neutral-50); }

/* The serial is the workbook's own Sr. No, not a running index, so it
   stays put as the reader searches and pages. */
.amc-table .col-serial {
  width: 1%;
  padding-right: 0;
  color: var(--fg-3);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.amc-table th.col-serial { text-align: right; }

/* Name absorbs the remaining width; the rest hug their content. */
.amc-table .col-name { width: auto; }
.amc-table .col-isin,
.amc-table .col-asof,
.amc-table .col-remarks,
.amc-table .col-extra { width: 1%; white-space: nowrap; }

/* ISINs are compared character by character — monospace, so a
   transposed digit is visible against the row above. */
.amc-table .col-isin {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.01em;
  color: var(--fg-2);
}
.amc-table .col-asof {
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.amc-table th.col-asof { text-align: center; }
.amc-table td.is-empty { color: var(--fg-3); }

.amc-name {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--fg-1);
  overflow-wrap: break-word;
}

.amc-chip {
  display: inline-block;
  font-size: var(--text-xs);
  line-height: 1;
  padding: 5px 9px;
  border-radius: var(--radius-pill);
  color: var(--fg-2);
  background: var(--neutral-50);
  border: 1px solid var(--border-1);
  white-space: nowrap;
}
.amc-chip.is-live {
  color: var(--status-success);
  background: var(--status-success-bg);
  border-color: transparent;
}
.amc-chip.is-paused {
  color: var(--status-warning);
  background: var(--status-warning-bg);
  border-color: transparent;
}

/* -------------------------------------------------------------
   States — skeleton, empty search, hard failure
   ------------------------------------------------------------- */
.amc-skeleton .amc-table tbody tr { pointer-events: none; }
.amc-skeleton .sk-line {
  background: var(--neutral-100);
  color: transparent;
  border-radius: var(--radius-sm);
  animation: amc-pulse 1.4s var(--ease-forward) infinite;
}
.amc-skeleton .sk-line {
  display: inline-block;
  height: 12px;
  vertical-align: middle;
}
.amc-skeleton .sk-line.w-70 { width: 70%; min-width: 140px; }
.amc-skeleton .sk-line.w-60 { width: 96px; }
.amc-skeleton .sk-line.w-30 { width: 34px; }

@keyframes amc-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.45; }
}
@media (prefers-reduced-motion: reduce) {
  .amc-skeleton .sk-line { animation: none; }
}

.amc-state {
  padding: 56px 24px;
  text-align: center;
  border: 1px dashed var(--border-2);
  border-radius: var(--radius-md);
  background: var(--neutral-50);
}
.amc-state[hidden] { display: none; }
.doc .amc-state h3,
.amc-state h3 {
  margin: 0;
  font-size: var(--text-md);
  font-weight: 600;
  color: var(--fg-1);
}
.amc-state p {
  margin-top: 8px;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--fg-2);
}
.amc-state .btn { margin-top: 20px; }

/* -------------------------------------------------------------
   Pagination
   The list runs to a thousand-odd rows, so it is paged rather than
   scrolled. The control shows first / last / current ± 1 with the
   rest elided, which keeps it a near-constant width from 3 pages
   to 300 and stops it wrapping on a phone.
   ------------------------------------------------------------- */
.amc-pager {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 24px;
}
.amc-pager[hidden] { display: none; }

.amc-pages {
  display: flex;
  align-items: center;
  gap: 4px;
}

.amc-page {
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  min-width: 38px;
  padding: 9px 10px;
  color: var(--fg-2);
  background: var(--neutral-0);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background var(--duration-micro) var(--ease-forward),
              border-color var(--duration-micro) var(--ease-forward),
              color var(--duration-micro) var(--ease-forward);
}
.amc-page.is-nav { padding: 9px 16px; }
.amc-page:hover:not(:disabled):not(.is-current) {
  color: var(--fg-1);
  background: var(--neutral-50);
  border-color: var(--border-2);
}
.amc-page:focus-visible {
  outline: none;
  border-color: var(--fw-blue);
  box-shadow: var(--focus-ring);
}

/* Current page is a filled chip: the one control that is a state
   readout rather than an action. */
.amc-page.is-current {
  color: var(--fw-white);
  background: var(--fw-blue);
  border-color: var(--fw-blue);
  font-weight: 600;
  cursor: default;
}

/* Disabled ends keep their box so the row does not shift width as
   the reader moves off page 1. */
.amc-page:disabled {
  color: var(--fg-3);
  background: var(--neutral-50);
  cursor: not-allowed;
}

.amc-page-gap {
  padding: 0 2px;
  color: var(--fg-3);
  font-size: 14px;
  user-select: none;
}

/* -------------------------------------------------------------
   Responsive
   ------------------------------------------------------------- */
@media (max-width: 900px) {
  .amc-toolbar { top: var(--nav-h-mobile); }
}
@media (max-width: 768px) {
  .amc-toolbar {
    gap: 10px;
    padding: 12px 0;
  }
  .amc-count { flex-basis: 100%; }
  .amc-table { font-size: 14px; }
  .amc-table thead th { padding: 10px 14px; }
  .amc-table td { padding: 11px 14px; }
  .amc-table .col-isin { font-size: 12.5px; }
  .amc-name { font-size: 14.5px; }

  /* Prev/Next carry the load on a phone; the numbers stay reachable
     but give up their padding first. */
  .amc-pager { gap: 6px; }
  .amc-page { min-width: 34px; padding: 8px 8px; }
  .amc-page.is-nav { padding: 8px 12px; }
}

/* -------------------------------------------------------------
   Visually-hidden label — the search input is introduced by its
   placeholder for sighted readers and by this label for AT.
   ------------------------------------------------------------- */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}