/* Tables, Arc-style (piece 14, 2026-10-29).
 *
 * One skin for the portal's data tables (Arc sortable-data-table, data-grid):
 * - 28px rows (--arc-row); 32px where a row holds a field or a select
 *   (row buttons are 24px since piece 5 and fit the 28px row).
 * - Headers in sentence case, 12px/500, secondary ink; sticky headers keep a
 *   surface fill so rows never show through.
 * - Hairline row separators, a quiet hover tint, the selected row filled.
 * - Numeric columns read right-aligned in tabular figures. The page's own
 *   .num / *-col-num classes count; arc_tables.js adds .oc-num-col to the
 *   columns whose body cells are numbers.
 * - Sort arrows are one chevron that flips on the morph spring; rows glide
 *   to their new places on re-sort (arc_tables.js).
 *
 * Out of scope: PM OS plate pages (D7), the admin grids that group C owns in
 * arc_settings.css (au/ao/ab/ac/tk/hb/hm/rl/ar-tbl), the fundamental model
 * workbook grids (fm-*: a spreadsheet, not a list), chat and Helm tables, and
 * the watchlist's phone card layout (body.wl-phone).
 *
 * The tables this layer dresses are named once in the selector list below;
 * every rule repeats it through :is(). The two-id scope outranks the flat
 * and desk layers; !important only where an older rule uses it on the same
 * property (oceanus.css hover and selected fills, desk.css head radii).
 */

/* ---- Head ---------------------------------------------------------------- */
html:not(.page-pmos) body:not(.wl-phone):is(body, #oc-arc):is(body, #oc-arc-2) :is(
  table.wl-table, table.mv-table, table.mkt-table, table.co-tbl, table.pm-tbl, table.af-table,
  table.th-seg-table, table.th-fin-table, table.th-d-table, table.th-grades-table, table.th-est-table,
  table.pf2-table, table.pf-table, table.tr-table, table.oc-table, table.ind-table, table.mdg-table,
  table.pw-uni-table, table.cal-table, table.un-tbl, table.usage-table, table.mdx-table, table.mcb-table,
  table.mca-table, table.fund-table, table.fund-seg-table, table.dir-tbl, table.an-coverage__table,
  .pub-table__scroll > table, table.oc-dt) > thead > tr > th {
  height: var(--arc-row);
  padding-top: 0;
  padding-bottom: 0;
  vertical-align: middle;
  color: var(--arc-text-secondary);
  font-size: var(--arc-text-xs);
  font-weight: var(--arc-weight-strong);
  letter-spacing: 0;
  text-transform: none;
  white-space: nowrap;
  border-top: 0;
  border-bottom: 1px solid var(--arc-border) !important;
  border-radius: 0 !important;
  background-color: transparent;
}
/* A sticky head keeps a surface fill. */
html:not(.page-pmos) body:not(.wl-phone):is(body, #oc-arc):is(body, #oc-arc-2) :is(
  table.wl-table, table.mkt-table, table.af-table, table.th-fin-table, table.pf2-table, table.oc-table,
  table.tr-table, table.ind-table, table.pm-tbl, table.co-tbl, .pub-table__scroll > table, table.oc-dt) > thead > tr > th:is([style*="sticky"], .oc-sticky) {
  background-color: var(--arc-surface);
}
html:not(.page-pmos) body:not(.wl-phone):is(body, #oc-arc):is(body, #oc-arc-2) :is(.wl-table-wrap, .af-table-wrap, .th-fin-scroll) > table > thead > tr > th {
  background-color: var(--arc-surface);
}
html:not(.page-pmos) body:not(.wl-phone):is(body, #oc-arc):is(body, #oc-arc-2) :is(
  table.wl-table, table.mkt-table, table.pf2-table, table.oc-table, table.th-fin-table, .pub-table__scroll > table, table.oc-dt) > thead > tr > th:is([data-sort], [aria-sort], .sortable):hover {
  color: var(--arc-foreground);
}

/* ---- Body ---------------------------------------------------------------- */
html:not(.page-pmos) body:not(.wl-phone):is(body, #oc-arc):is(body, #oc-arc-2) :is(
  table.wl-table, table.mv-table, table.mkt-table, table.co-tbl, table.pm-tbl, table.af-table,
  table.th-seg-table, table.th-fin-table, table.th-d-table, table.th-grades-table, table.th-est-table,
  table.pf2-table, table.pf-table, table.tr-table, table.oc-table, table.ind-table, table.mdg-table,
  table.pw-uni-table, table.cal-table, table.un-tbl, table.usage-table, table.mdx-table, table.mcb-table,
  table.mca-table, table.fund-table, table.fund-seg-table, table.dir-tbl, table.an-coverage__table,
  .pub-table__scroll > table, table.oc-dt) > tbody > tr > :is(td, th) {
  height: var(--arc-row);
  padding-top: 4px;
  padding-bottom: 4px;
  vertical-align: middle;
  border-top: 0;
  border-bottom: 1px solid var(--arc-border-subtle);
  transition: background-color var(--arc-dur-fast) var(--arc-ease);
}
html:not(.page-pmos) body:not(.wl-phone):is(body, #oc-arc):is(body, #oc-arc-2) :is(
  table.wl-table, table.mv-table, table.mkt-table, table.co-tbl, table.pm-tbl, table.af-table,
  table.th-seg-table, table.th-fin-table, table.th-d-table, table.th-grades-table, table.th-est-table,
  table.pf2-table, table.pf-table, table.tr-table, table.oc-table, table.ind-table, table.mdg-table,
  table.pw-uni-table, table.cal-table, table.un-tbl, table.usage-table, table.mdx-table, table.mcb-table,
  table.mca-table, table.fund-table, table.fund-seg-table, table.dir-tbl, table.an-coverage__table,
  .pub-table__scroll > table, table.oc-dt) > tbody > tr:last-child > :is(td, th) {
  border-bottom-color: transparent;
}
/* The dashboard's quote ribbons (Market, Watchlist pulse) are fixed-height
   cards that list ten names: they keep their compact rhythm. */
html:not(.page-pmos) body:not(.wl-phone):is(body, #oc-arc):is(body, #oc-arc-2) .dash-card-body > :is(table.wl-table, table.mv-table) > tbody > tr > td {
  height: auto;
  padding-top: 2px;
  padding-bottom: 2px;
}
/* Rows that hold a field or a select get the comfortable height. */

/* Hover and selection: one quiet tint, one firmer fill. */
html:not(.page-pmos) body:not(.wl-phone):is(body, #oc-arc):is(body, #oc-arc-2) :is(
  table.wl-table, table.mv-table, table.mkt-table, table.co-tbl, table.pm-tbl, table.af-table,
  table.th-seg-table, table.th-fin-table, table.th-d-table, table.th-grades-table, table.th-est-table,
  table.pf2-table, table.pf-table, table.tr-table, table.oc-table, table.ind-table, table.mdg-table,
  table.pw-uni-table, table.cal-table, table.un-tbl, table.usage-table, table.mdx-table, table.mcb-table,
  table.mca-table, table.fund-table, table.fund-seg-table, table.dir-tbl, table.an-coverage__table,
  .pub-table__scroll > table, table.oc-dt) > tbody > tr:not(.wl-is-moving):hover > :is(td, th) {
  background-color: var(--arc-hover) !important;
}
html:not(.page-pmos) body:not(.wl-phone):is(body, #oc-arc):is(body, #oc-arc-2) :is(
  table.wl-table, table.mv-table, table.mkt-table, table.co-tbl, table.pm-tbl, table.af-table,
  table.th-seg-table, table.th-fin-table, table.th-d-table, table.th-grades-table, table.th-est-table,
  table.pf2-table, table.pf-table, table.tr-table, table.oc-table, table.ind-table, table.mdg-table,
  table.pw-uni-table, table.cal-table, table.un-tbl, table.usage-table, table.mdx-table, table.mcb-table,
  table.mca-table, table.fund-table, table.fund-seg-table, table.dir-tbl, table.an-coverage__table,
  .pub-table__scroll > table, table.oc-dt) > tbody > tr:is(.is-selected, .is-on, .selected, [aria-selected="true"]):not(.wl-is-moving) > :is(td, th) {
  background-color: var(--arc-selected) !important;
}
html:not(.page-pmos) body:not(.wl-phone):is(body, #oc-arc):is(body, #oc-arc-2) :is(
  table.mkt-table, table.wl-table, table.pm-tbl) > tbody > tr:not(.wl-is-moving):active > td {
  background-color: var(--arc-press) !important;
}

/* ---- Numbers ------------------------------------------------------------- */
html:not(.page-pmos) body:not(.wl-phone):is(body, #oc-arc):is(body, #oc-arc-2) :is(
  table.wl-table, table.mv-table, table.mkt-table, table.co-tbl, table.pm-tbl, table.af-table,
  table.th-seg-table, table.th-fin-table, table.th-d-table, table.th-grades-table, table.th-est-table,
  table.pf2-table, table.pf-table, table.tr-table, table.oc-table, table.ind-table, table.mdg-table,
  table.pw-uni-table, table.cal-table, table.un-tbl, table.usage-table, table.mdx-table, table.mcb-table,
  table.mca-table, table.fund-table, table.fund-seg-table, table.dir-tbl, table.an-coverage__table,
  .pub-table__scroll > table, table.oc-dt) :is(td, th):is(.num, .oc-num-col, [class*="-col-num"], [class*="-num "], [class$="-num"]) {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* ---- Sort arrow: one chevron that flips on the morph spring --------------- */
html:not(.page-pmos) body:not(.wl-phone):is(body, #oc-arc):is(body, #oc-arc-2) table thead th:is(.is-asc, .is-desc, [aria-sort="ascending"], [aria-sort="descending"])::after {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-left: 4px;
  vertical-align: 0;
  background-color: currentColor;
  opacity: .8;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath d='M1.5 3l2.5 2.5L6.5 3' fill='none' stroke='black' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 8px 8px no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath d='M1.5 3l2.5 2.5L6.5 3' fill='none' stroke='black' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 8px 8px no-repeat;
  transform: rotate(0deg);
  transition: transform var(--arc-dur-morph) var(--arc-spring);
}
html:not(.page-pmos) body:not(.wl-phone):is(body, #oc-arc):is(body, #oc-arc-2) table thead th:is(.is-asc, [aria-sort="ascending"])::after {
  transform: rotate(180deg);
}
/* ---- Rows that glide (arc_tables.js sets the transform) ------------------- */
.oc-dt-glide > td,
.oc-dt-glide > th,
.oc-dt-glide {
  position: relative;
  z-index: 1;
  will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
  html body table thead th::after,
  html body table > tbody > tr > :is(td, th) {
    transition: none !important;
  }
  .oc-dt-glide, .oc-dt-glide > td, .oc-dt-glide > th {
    transition: none !important;
    transform: none !important;
  }
}