/* vx-rowcard — phone "row -> card" layout for list tables (MOBILE-TABLE-REDESIGN-PLAN-2026-10-14 §2.5).
 *
 * Three guards, all required before any rule applies:
 *   1. html.vx-rowcard-on  — the roster gate (Lane T0). Without it nothing here matches.
 *   2. table.vx-rc         — added by js/vx-rowcard.js only while the gate is on AND
 *                            matchMedia('(max-width: 640px)') matches; removed again above it.
 *   3. @media (max-width: 640px) — the same breakpoint, as a second guard.
 * So with the gate off, and on every width above 640px, pages are pixel-identical to before.
 *
 * Specificity: every selector starts with html.vx-rowcard-on plus a doubled .vx-rc.vx-rc
 * (e.g. 0,3,4 for cells). That beats page/brand rules such as
 * html[data-brand="ultimo"] .history-table tbody td (0,2,3) and the Lane B mobile min-width rules
 * without !important. Colours come only from the shared --app-* tokens, so the 3 brands theme
 * themselves. No overflow-x:hidden anywhere (MOBILE-RESPONSIVE-PLAN-2026-10-13 §4). */
@media (max-width: 640px) {
  html.vx-rowcard-on .vx-rc.vx-rc,
  html.vx-rowcard-on .vx-rc.vx-rc > tbody {
    display: block; width: 100%; min-width: 0; max-width: 100%; border: 0;
  }
  /* The header row stays in the accessibility tree (role=columnheader) but is hidden visually. */
  html.vx-rowcard-on .vx-rc.vx-rc > thead {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; border: 0;
    overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
  }

  /* ---- card row ---- */
  html.vx-rowcard-on .vx-rc.vx-rc > tbody > tr.vx-rc-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto 32px;
    grid-template-areas: "title value tg" "meta badge tg";
    column-gap: 10px; row-gap: 2px;
    min-width: 0;
    padding: 12px 8px 12px 14px;
    border: 0;
    border-bottom: 1px solid var(--app-border, rgba(128, 128, 128, .18));
    background: transparent;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  /* A row with nothing to open (no detail cells) has no toggle and is not a tap target. */
  html.vx-rowcard-on .vx-rc.vx-rc > tbody > tr.vx-rc-nodetail { cursor: auto; }
  html.vx-rowcard-on .vx-rc.vx-rc > tbody > tr.vx-rc-row:last-child { border-bottom: 0; }
  html.vx-rowcard-on .vx-rc.vx-rc > tbody > tr.vx-rc-row.is-open {
    background: rgba(var(--app-content-overlay-rgb, 128, 128, 128), .05);
    box-shadow: inset 3px 0 0 var(--app-primary, #5cb8e6);
  }
  html.vx-rowcard-on .vx-rc.vx-rc > tbody > tr > td {
    display: block; position: static; width: auto; min-width: 0; max-width: none;
    padding: 0; border: 0; background: transparent;
    white-space: normal; overflow-wrap: anywhere; text-align: left;
    /* overflow-wrap:anywhere also lowers min-content, so a long value or hash wraps instead of
       widening the card (the value slot sits in an `auto` grid track). */
  }

  /* ---- primary slots ---- */
  html.vx-rowcard-on .vx-rc.vx-rc > tbody > tr > td[data-vx-slot="title"] {
    grid-area: title; font-weight: 600; font-size: 14px; color: var(--app-text-strong, inherit);
  }
  html.vx-rowcard-on .vx-rc.vx-rc > tbody > tr > td[data-vx-slot="value"] {
    grid-area: value; justify-self: end; text-align: right; font-weight: 600; font-size: 14px;
    font-variant-numeric: tabular-nums;
  }
  html.vx-rowcard-on .vx-rc.vx-rc > tbody > tr > td[data-vx-slot="meta"] {
    grid-area: meta; font-size: 12px; color: var(--app-text-muted, #8a8a9a);
  }
  html.vx-rowcard-on .vx-rc.vx-rc > tbody > tr > td[data-vx-slot="badge"] {
    grid-area: badge; justify-self: end; text-align: right; font-size: 12px;
  }

  /* ---- toggle ---- */
  html.vx-rowcard-on .vx-rc.vx-rc > tbody > tr > td.vx-rc-tg {
    grid-area: tg; align-self: center; justify-self: end;
  }
  html.vx-rowcard-on .vx-rc.vx-rc .vx-rc-btn {
    width: 32px; height: 32px; margin: 0; padding: 0;
    display: inline-flex; align-items: center; justify-content: center;
    border: 0; border-radius: 8px; background: transparent; box-shadow: none;
    color: var(--app-text-muted, #8a8a9a); cursor: pointer;
  }
  html.vx-rowcard-on .vx-rc.vx-rc .vx-rc-btn:focus { outline: none; }
  html.vx-rowcard-on .vx-rc.vx-rc .vx-rc-btn:focus-visible {
    outline: 2px solid var(--app-primary, #5cb8e6); outline-offset: 1px;
  }
  html.vx-rowcard-on .vx-rc.vx-rc .vx-rc-btn svg { transition: transform .15s ease; }
  html.vx-rowcard-on .vx-rc.vx-rc tr.is-open .vx-rc-btn svg { transform: rotate(180deg); }

  /* ---- detail + action cells: hidden until the row is open ---- */
  html.vx-rowcard-on .vx-rc.vx-rc > tbody > tr > td.vx-rc-s,
  html.vx-rowcard-on .vx-rc.vx-rc > tbody > tr > td.vx-rc-a,
  html.vx-rowcard-on .vx-rc.vx-rc > tbody > tr > td.vx-rc-skip { display: none; }
  /* Detail line: the label is pinned left (::before) and the value flows right-aligned in the rest,
     so multi-span cells (History "Details") wrap naturally. */
  html.vx-rowcard-on .vx-rc.vx-rc > tbody > tr.is-open > td.vx-rc-s {
    display: block; grid-column: 1 / -1; position: relative; min-height: 18px;
    margin-top: 6px; padding: 7px 0 0 42%;
    text-align: right; font-size: 13px;
    border-top: 1px dashed var(--app-border, rgba(128, 128, 128, .18));
  }
  html.vx-rowcard-on .vx-rc.vx-rc > tbody > tr.is-open > td.vx-rc-s ~ td.vx-rc-s {
    margin-top: 0; padding-top: 5px; border-top: 0;
  }
  html.vx-rowcard-on .vx-rc.vx-rc > tbody > tr.is-open > td.vx-rc-s::before {
    content: attr(data-label);
    position: absolute; left: 0; top: 8px; max-width: 40%;
    text-align: left; font-size: 11px; font-weight: 600; letter-spacing: .4px; text-transform: uppercase;
    color: var(--app-text-muted, #8a8a9a);
    overflow-wrap: anywhere;
  }
  html.vx-rowcard-on .vx-rc.vx-rc > tbody > tr.is-open > td.vx-rc-s ~ td.vx-rc-s::before { top: 6px; }
  /* Action cell (e.g. holdings Buy / Sell / Deposit / Withdraw): full width at the bottom. */
  html.vx-rowcard-on .vx-rc.vx-rc > tbody > tr.is-open > td.vx-rc-a {
    display: block; grid-column: 1 / -1; padding-top: 10px;
  }

  /* ---- colspan rows (Loading / No data / Load more): one full-width block ---- */
  html.vx-rowcard-on .vx-rc.vx-rc > tbody > tr.vx-rc-full { display: block; border: 0; }
  html.vx-rowcard-on .vx-rc.vx-rc > tbody > tr.vx-rc-full > td { display: block; text-align: center; }

  /* ---- the HTML `hidden` attribute always wins (e.g. buy-crypto-v2 hides #qtHistoryTable on a
     failed poll, filters hide rows). Last in the block and stronger than every display rule above. */
  html.vx-rowcard-on .vx-rc.vx-rc[hidden],
  html.vx-rowcard-on .vx-rc.vx-rc > tbody[hidden][hidden],
  html.vx-rowcard-on .vx-rc.vx-rc > tbody > tr[hidden][hidden][hidden],
  html.vx-rowcard-on .vx-rc.vx-rc > tbody > tr > td[hidden][hidden][hidden] { display: none; }
}

@media (max-width: 640px) and (prefers-reduced-motion: reduce) {
  html.vx-rowcard-on .vx-rc.vx-rc .vx-rc-btn svg { transition: none; }
}