.table-page .site-shell { max-width: var(--measure); }
.table-tools-note { margin-top: -.35rem; margin-bottom: 1rem; color: var(--muted); font-size: .92rem; }
.table-tools-note[hidden] { display: none; }
.table-tools-note.warning {
  background: #fff4d8;
  border: 1px solid #ddc274;
  color: #4b3a12;
  padding: .7rem .85rem;
  border-radius: var(--radius);
}
.table-frame {
  background: var(--paper);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.lens-table {
  width: 100%;
  border-collapse: collapse;
  font-family: "Aptos", "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, sans-serif;
  font-size: .88rem;
  line-height: 1.35;
}
.lens-table caption {
  text-align: left;
  caption-side: bottom;
  padding: .85rem 1rem;
  color: var(--muted);
  font-size: .82rem;
}
.lens-table th,
.lens-table td {
  text-align: left;
  vertical-align: middle;
  padding: .68rem .74rem;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.lens-table th:last-child,
.lens-table td:last-child { border-right: 0; }
.lens-table thead th,
.lens-table tfoot th {
  background: #eee7da;
  color: var(--ink);
  font-size: .72rem;
  letter-spacing: .07em;
  text-transform: uppercase;
  font-weight: 800;
}
.lens-table tbody tr:hover { background: #fbf7ee; }

/* DataTables auto-detects the Focal Length / Max Aperture columns as numeric
   (because of their data-order values) and right-aligns them. Override that so
   they stay left-aligned like every other column, on desktop and in cards. */
table.lens-table.dataTable td.dt-type-num,
table.lens-table.dataTable th.dt-type-num { text-align: left; }

.lens-table tfoot input {
  width: 100%;
  border: 1px solid var(--line-strong);
  border-radius: .35rem;
  background: white;
  padding: .42rem .48rem;
  color: var(--ink);
  font-size: .78rem;
  letter-spacing: 0;
  text-transform: none;
}
.lens-table a { font-weight: 650; }
.status-legend .status-pill { margin: .14rem .24rem .14rem 0; }
.status-legend p { max-width: 64rem; }
.status-pill {
  display: inline-block;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--paper-soft);
  color: var(--ink-soft);
  padding: .14rem .48rem .12rem;
  font-size: .73rem;
  font-weight: 750;
  white-space: nowrap;
}
.status-covers {
  background: #e3efe0;
  border-color: #86a877;
  color: #23421f;
}
.status-likely-covers {
  background: #edf4e9;
  border-color: #a7bd98;
  color: #33492b;
}
.status-partial {
  background: #f3ead8;
  border-color: #c7aa76;
  color: #59401c;
}
.status-likely-partial {
  background: #f6efe1;
  border-color: #d0bd96;
  color: #5b4a28;
}
.status-vignettes {
  background: #f1dfda;
  border-color: #c99586;
  color: #633125;
}
.status-no-coverage {
  background: #eadedc;
  border-color: #a97b72;
  color: #4f2924;
}
.status-needs-test {
  background: #f4f1ea;
  border-color: #c8beb0;
  color: #4d463d;
}
.status-unknown {
  background: #eeeeee;
  border-color: #b9b9b9;
  color: #444444;
}
.dt-container {
  font-family: "Aptos", "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, sans-serif;
  color: var(--ink);
  padding: .9rem;
}
.dt-container .dt-layout-row { margin: 0 0 .75rem; }
.dt-container .dt-layout-row:last-child { margin: .75rem 0 0; }
.dt-container .dt-search label,
.dt-container .dt-length label,
.dt-container .dt-info { color: var(--muted); font-size: .84rem; }
.dt-container .dt-input {
  border: 1px solid var(--line-strong) !important;
  border-radius: .35rem !important;
  background: white !important;
  padding: .36rem .5rem !important;
  color: var(--ink) !important;
}
.dt-container .dt-paging .dt-paging-button {
  border: 1px solid transparent !important;
  border-radius: .35rem !important;
  padding: .28rem .55rem !important;
  color: var(--ink-soft) !important;
}
.dt-container .dt-paging .dt-paging-button.current,
.dt-container .dt-paging .dt-paging-button:hover {
  border-color: var(--line-strong) !important;
  background: #eee7da !important;
  color: var(--ink) !important;
}
.dtr-details { width: 100%; }
.dtr-details li { border-bottom: 1px solid var(--line) !important; }
.dtr-title { min-width: 8rem; color: var(--muted); }

.lens-table th button.sort-button {
  appearance: none;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: 0;
  font: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  text-align: left;
}
.lens-table th button.sort-button::after {
  content: "↕";
  color: var(--muted);
  font-size: .68rem;
}
.lens-table th[aria-sort="ascending"] button.sort-button::after { content: "↑"; color: var(--accent-dark); }
.lens-table th[aria-sort="descending"] button.sort-button::after { content: "↓"; color: var(--accent-dark); }
.lens-table tbody tr[hidden] { display: none; }

/* Horizontal scroll only for awkward tablet widths; phones use cards below. */
.lens-table-frame { overflow-x: auto; }
.lens-table.nowrap th,
.lens-table.nowrap td { white-space: nowrap; }
.lens-table tbody tr[hidden] { display: none !important; }

@media (max-width: 760px) {
  .table-frame { margin-inline: -.625rem; border-left: 0; border-right: 0; border-radius: 0; }
  .dt-container { padding: .65rem; }
  .dt-container .dt-layout-row { display: block !important; }
  .dt-container .dt-layout-cell { display: block !important; margin-bottom: .6rem; text-align: left !important; }
  .dt-container .dt-search input { width: min(100%, 24rem); margin-left: 0 !important; display: block; }

  /* --- Card layout: simple inline "Label: value" rows, matching the
         original fallback styling. --- */
  .lens-table-frame { overflow-x: visible; }

  .lens-table { min-width: 0; border: 0; }
  .lens-table caption { padding-inline: .78rem; }

  .lens-table,
  .lens-table thead,
  .lens-table tbody,
  .lens-table tfoot,
  .lens-table tr,
  .lens-table th,
  .lens-table td {
    display: block;
    width: 100% !important;
  }
  .lens-table thead,
  .lens-table tfoot { display: none; }

  .lens-table tbody tr {
    border: 1px solid var(--line);
    border-radius: .75rem;
    padding: .85rem;
    margin: 0 0 .85rem;
    background: var(--paper);
  }
  .lens-table tbody tr:last-child { margin-bottom: 0; }
  .lens-table tbody tr:hover { background: var(--paper); }

  .lens-table tbody td {
    border: 0 !important;
    padding: .35rem 0 !important;
    text-align: left !important;
    white-space: normal !important;
  }
  .lens-table tbody td::before {
    content: attr(data-label) ": ";
    font-weight: 700;
    color: var(--muted);
  }
}