/* Fund Finder table (phase 3, Menus 30 Oct 2026). Loaded only when the table is on (after find.css). Semantic Theme 2.0 tokens only: no literal colours.
   Rules from the design package: tabular numerals, --grid hairlines (white borders vanish in light), opaque popovers (--panelsolid), checkboxes 20px with a solid fill and a bold tick, no emoji, no decorative imagery.
   Header and footer stay as they are; this styles the results section only. Class names are the contract with js/theme2/pages/find-table.js and partials/theme2/find-table.php. */
.fnt { margin-top: 16px; --fnt-tick: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 6.4l2.7 2.7L10 3.4' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.fnt-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin: 0 0 12px; }
.fnt-count { margin: 0; font-size: 14px; color: var(--t2); }
.fnt-count b { color: var(--tx); font-weight: 700; font-variant-numeric: tabular-nums; }
.fnt-tools { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.fnt-calc { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--t2); }
.fnt-calc-box { display: flex; align-items: center; gap: 4px; height: 40px; padding: 0 12px; border: 1px solid var(--grid); border-radius: var(--rad-btn); background: var(--panelsolid); color: var(--tx); }
.fnt-calc-box:focus-within { outline: 2px solid var(--r1); outline-offset: 2px; }
.fnt-calc-box input { width: 88px; border: 0; outline: 0; background: transparent; color: inherit; font: inherit; font-variant-numeric: tabular-nums; }
.fnt-tools .t2-btn { height: 40px; }
.fnt-filt { margin: 0 0 12px; font-size: 13px; color: var(--t2); }
.fnt-filt b { color: var(--tx); font-weight: 600; }

.fnt-shell { position: relative; }
.fnt-shell[hidden] { display: none; }
.fnt-wrap { border: 1px solid var(--grid); border-radius: var(--rad-panel); background: var(--panel); }
.fnt-table { width: 100%; border-collapse: separate; border-spacing: 0; font-variant-numeric: tabular-nums; }
.fnt-cap { caption-side: top; text-align: left; padding: 10px 12px; font-size: 12px; color: var(--td); }
.fnt-table thead th { position: sticky; top: 56px; z-index: 3; padding: 6px 8px; background: var(--panelsolid); border-bottom: 1px solid var(--grid); text-align: left; font-size: 12px; font-weight: 600; color: var(--t2); white-space: nowrap; }
.fnt-table thead th:first-child { border-top-left-radius: calc(var(--rad-panel) - 1px); }
.fnt-table thead th:last-child { border-top-right-radius: calc(var(--rad-panel) - 1px); }
.fnt-h-r { text-align: right; }
.fnt-hin { display: flex; align-items: center; gap: 2px; }
.fnt-h-r .fnt-hin { justify-content: flex-end; }
.fnt-sort, .fnt-hl { position: relative; display: inline-flex; align-items: center; gap: 5px; min-height: 28px; padding: 0 6px; border: 0; border-radius: 6px; background: none; color: inherit; font: inherit; cursor: pointer; }
.fnt-hl { cursor: default; }
.fnt-sort:hover, th[aria-sort="ascending"] .fnt-sort, th[aria-sort="descending"] .fnt-sort { color: var(--tx); }
.fnt-sort:focus-visible, .fnt-fun:focus-visible, .fnt-opt:focus-visible, .fnt-pop button:focus-visible, .fnt-chk:focus-visible, .fnt-lock:focus-visible, .fnt-name:focus-visible { outline: 2px solid var(--r1); outline-offset: 2px; }
.fnt-sort[data-wait] { cursor: progress; }
.fnt-arrow { width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid currentColor; opacity: 0.3; transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease); }
th[aria-sort="descending"] .fnt-arrow { opacity: 1; }
th[aria-sort="ascending"] .fnt-arrow { opacity: 1; transform: rotate(180deg); }
.fnt-fun { display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 6px; background: transparent; color: var(--td); cursor: pointer; }
.fnt-fun:hover { color: var(--tx); background: var(--ghost); }
.fnt-fun.is-on { background: var(--ink); color: var(--inktx); }
.fnt-hl svg { opacity: 0.7; }

/* plain English tooltips (hover and keyboard focus; touch users get the same words in the caption and the page note) */
@media (hover: hover) {
  .fnt-sort[data-tip]:hover::after, .fnt-sort[data-tip]:focus-visible::after, .fnt-hl[data-tip]:hover::after {
    content: attr(data-tip); position: absolute; top: calc(100% + 6px); left: 0; z-index: 6; width: max-content; max-width: 240px; padding: 8px 10px;
    background: var(--panelsolid); border: 1px solid var(--grid); border-radius: 8px; box-shadow: var(--shadow); color: var(--tx); font: 400 12px/1.4 var(--font); text-align: left; white-space: normal; pointer-events: none;
  }
  .fnt-h-r .fnt-sort[data-tip]:hover::after, .fnt-h-r .fnt-sort[data-tip]:focus-visible::after, .fnt-h-r .fnt-hl[data-tip]:hover::after { left: auto; right: 0; }
}

.fnt-row td, .fnt-row th { padding: 12px 8px; border-bottom: 1px solid var(--grid); vertical-align: middle; font-size: 14px; font-weight: 400; color: var(--tx); text-align: left; }
.fnt-row:hover td, .fnt-row:hover th { background: var(--ghost); }
.fnt-row.is-selected td, .fnt-row.is-selected th { background: color-mix(in srgb, var(--r2) 10%, transparent); }
.fnt-table tbody tr:last-child td, .fnt-table tbody tr:last-child th { border-bottom: 0; }
.fnt-num { text-align: right !important; white-space: nowrap; }
/* direction of performance only: the cell rule above (.fnt-row td) is more specific than the global .t2-pos/.t2-neg, so say it again here (gain/loss tokens carry the AA contrast in both themes; costs and sizes stay neutral) */
.fnt-table .t2-pos { color: var(--gain); }
.fnt-table .t2-neg { color: var(--loss); }
.fnt-table .t2-flat { color: var(--t2); }
.fnt-c-sel { width: 44px; padding-left: 14px !important; }
.fnt-c-n { min-width: 240px; }
.fnt-name { color: var(--tx); font-weight: 600; text-decoration: none; }
.fnt-name:hover { text-decoration: underline; }
.fnt-sub { display: flex; flex-wrap: wrap; gap: 0 8px; margin-top: 2px; font-size: 12px; font-weight: 400; color: var(--t2); }
.fnt-mgr { max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fnt-isin { color: var(--td); white-space: nowrap; }
.fnt-theme { display: inline-block; max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }
.fnt-theme.is-fallback { color: var(--td); }
.fnt-na { color: var(--td); }
.fnt-type { padding: 3px 8px; font-weight: 600; letter-spacing: 0.04em; }
.fnt-type--active { background: color-mix(in srgb, var(--r2) 24%, transparent); }
.fnt-type--passive { background: color-mix(in srgb, var(--r3) 24%, transparent); }
.fnt-type--leveraged { background: var(--track); }
.fnt-table .t2-badge--q12 { padding: 3px 8px; }
.fnt-lock { display: inline-flex; align-items: center; gap: 6px; min-height: 28px; padding: 0 8px; border-radius: 6px; color: var(--r1); font-size: 12px; font-weight: 600; text-decoration: none; background: none; border: 0; cursor: pointer; }
.fnt-lock:hover { color: var(--r2); }
.fnt-lock:not(:has(span)) { justify-content: center; width: 28px; padding: 0; }
.fnt-lock:has(span):hover { text-decoration: underline; }

/* comparison checkbox: 20px, 1.5px border, solid fill and a bold tick when on */
.fnt-table .fnt-chk { position: relative; display: block; box-sizing: border-box; width: 20px; height: 20px; min-width: 0; margin: 0; padding: 0; border: 1.5px solid var(--t2); border-radius: 5px; background: transparent; cursor: pointer; font-size: 0; line-height: 0; }
.fnt-table .fnt-chk::before { content: ''; position: absolute; inset: -12px; }
.fnt-table .fnt-chk[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); }
.fnt-table .fnt-chk[aria-pressed="true"]::after, .fnt-opt[aria-pressed="true"] .fnt-box::after { content: ''; position: absolute; inset: 0; background: var(--inktx); -webkit-mask: var(--fnt-tick) center / 12px 12px no-repeat; mask: var(--fnt-tick) center / 12px 12px no-repeat; }   /* the tick is one SVG mask filling the box and centred, so it cannot drift */

.fnt-empty td { padding: 40px 16px; text-align: center; color: var(--t2); }
.fnt-empty p { margin: 0 0 12px; }

/* hidden columns (the chooser toggles these classes on the section) */
.fnt--h-g1 .fnt-h-g1, .fnt--h-g1 .fnt-c-g1, .fnt--h-yl .fnt-h-yl, .fnt--h-yl .fnt-c-yl, .fnt--h-gl .fnt-h-gl, .fnt--h-gl .fnt-c-gl, .fnt--h-v .fnt-h-v, .fnt--h-v .fnt-c-v, .fnt--h-o .fnt-h-o, .fnt--h-o .fnt-c-o,
.fnt--h-go .fnt-h-go, .fnt--h-go .fnt-c-go, .fnt--h-s .fnt-h-s, .fnt--h-s .fnt-c-s, .fnt--h-q .fnt-h-q, .fnt--h-q .fnt-c-q, .fnt--h-t .fnt-h-t, .fnt--h-t .fnt-c-t, .fnt--h-th .fnt-h-th, .fnt--h-th .fnt-c-th, .fnt--h-y1 .fnt-h-y1, .fnt--h-y1 .fnt-c-y1 { display: none; }

/* popovers: opaque, hairline border, closes on outside click, Done and Escape */
.fnt-pop { position: absolute; z-index: 20; width: 264px; max-height: 70vh; display: flex; flex-direction: column; padding: 12px; background: var(--panelsolid); border: 1px solid var(--grid); border-radius: var(--rad-panel); box-shadow: var(--shadow); color: var(--tx); font-size: 13px; }
.fnt-pop[hidden] { display: none; }
.fnt-pop-h { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.fnt-pop-x { width: 28px; height: 28px; border: 0; border-radius: 6px; background: none; color: var(--t2); font-size: 20px; line-height: 1; cursor: pointer; }
.fnt-pop-x:hover { color: var(--tx); background: var(--ghost); }
.fnt-pop-sort { display: flex; gap: 6px; margin-bottom: 8px; }
.fnt-pop-s { flex: 1; min-height: 32px; padding: 0 8px; border: 1px solid var(--grid); border-radius: 8px; background: transparent; color: var(--t2); font: inherit; font-size: 12px; cursor: pointer; }
.fnt-pop-s:hover { color: var(--tx); }
.fnt-pop-all { display: block; width: 100%; margin-top: 6px; padding: 8px 6px; text-align: left; color: var(--r1); font-weight: 600; }
.fnt-pop-s.is-on, .fnt-pop-s.is-on:hover { background: var(--ink); border-color: var(--ink); color: var(--inktx); font-weight: 600; }
.fnt-pop-q { width: 100%; box-sizing: border-box; height: 36px; margin-bottom: 8px; padding: 0 10px; border: 1px solid var(--grid); border-radius: 8px; background: transparent; color: var(--tx); font: inherit; }
.fnt-pop-q:focus-visible { outline: 2px solid var(--r1); outline-offset: 1px; }
.fnt-pop-list { overflow-y: auto; min-height: 0; margin: 0 -4px; padding: 0 4px; }
.fnt-pop-more { margin: 8px 0 0; font-size: 12px; color: var(--td); }
.fnt-opt { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 34px; padding: 4px 6px; border: 0; border-radius: 6px; background: none; color: var(--tx); font: inherit; font-size: 13px; text-align: left; cursor: pointer; }
.fnt-opt:hover { background: var(--ghost); }
.fnt-box { flex: none; position: relative; box-sizing: border-box; width: 20px; height: 20px; border: 1.5px solid var(--t2); border-radius: 5px; }
.fnt-opt[aria-pressed="true"] .fnt-box { background: var(--ink); border-color: var(--ink); }
.fnt-opt-l { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fnt-opt-n { font-style: normal; font-size: 12px; color: var(--td); font-variant-numeric: tabular-nums; }
.fnt-pop-f { display: flex; align-items: center; justify-content: space-between; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--grid); }
.fnt-pop-f .t2-btn--ink { height: 36px; padding: 0 16px; font-size: 13px; }

.fnt-more { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 16px 0 8px; }
.fnt-more[hidden] { display: none; }
.fnt-note { margin: 12px 0 0; max-width: 72ch; }
.fnt.is-offline .fnt-sort, .fnt.is-offline .fnt-fun { opacity: 0.4; cursor: not-allowed; }

/* narrow screens: the table scrolls sideways with the fund name pinned; the phone default view is Cards (a later phase) */
@media (max-width: 1279px) {
  .fnt-wrap { overflow-x: auto; }
  .fnt-table { min-width: 1040px; }
  .fnt-table thead th { position: static; top: auto; }
  .fnt-table thead th:nth-child(1), .fnt-row td.fnt-c-sel { position: sticky; top: auto; left: 0; z-index: 2; background: var(--panelsolid); }
  .fnt-table thead th:nth-child(2), .fnt-row th.fnt-c-n { position: sticky; top: auto; left: 44px; z-index: 2; background: var(--panelsolid); border-right: 1px solid var(--grid); }
  .fnt-table thead th:nth-child(1), .fnt-table thead th:nth-child(2) { z-index: 4; }
  .fnt-row:hover td.fnt-c-sel, .fnt-row:hover th.fnt-c-n { background: var(--panelsolid); }
}
@media (max-width: 639px) {
  .fnt-bar { align-items: flex-start; }
  .fnt-tools { width: 100%; }
  .fnt-calc-box input { width: 80px; }
  .fnt-c-n { min-width: 150px; max-width: 170px; }
  .fnt-mgr { max-width: 110px; }
  .fnt-pop { width: min(264px, calc(100vw - 32px)); }
}
/* cards view: the card look is find.css's (.fn-card); this only lets the rows size to their content and hides the table-only controls */
.fnt-cards { grid-auto-rows: auto; margin-top: 4px; }
.fnt-cards .fn-card { min-height: 220px; }
.fnt--cards .fnt-calc, .fnt--cards .fnt-colwrap, .fnt--cards .fnt-cap { display: none; }
.fnt-csort[hidden], .fnt-view[hidden] { display: none; }   /* .t2-seg sets display, which would beat the hidden attribute */
.fnt-csort button { min-height: 40px; }
/* list and grid icon switch: two 44px buttons, the pressed one is the ink fill (same as the other segmented controls) */
.fnt-view { display: inline-flex; overflow: hidden; border: 1px solid var(--grid); border-radius: var(--rad-seg); background: var(--seg); }
.fnt-vbtn { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; background: transparent; color: var(--t2); cursor: pointer; }
.fnt-vbtn:hover { color: var(--tx); }
.fnt-vbtn[aria-pressed="true"] { background: var(--ink); color: var(--inktx); }
.fnt-vbtn:focus-visible { outline: 2px solid var(--r1); outline-offset: -2px; }

/* a search or filter is being applied to the table */
.fnt.is-loading .fnt-wrap { opacity: 0.55; transition: opacity var(--dur) var(--ease); }
.fnt-err { margin: 0 0 12px; }

/* Browse by: plain crawlable links to the category pages */
.fnt-browse { margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--grid); }
.fnt-browse-cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; margin-top: 12px; }
.fnt-browse .t2-label-2 { margin-bottom: 8px; }
.fnt-browse-all { margin: 16px 0 0; }
.fnt-browse-all a { color: var(--r1); font-size: 14px; font-weight: 600; text-decoration: none; }
.fnt-browse-all a:hover { text-decoration: underline; }
.fnt-browse ul { margin: 0; padding: 0; list-style: none; }
.fnt-browse li { margin: 0; }
.fnt-browse a { display: inline-flex; align-items: center; min-height: 32px; color: var(--t2); font-size: 14px; text-decoration: none; }
.fnt-browse a:hover { color: var(--tx); text-decoration: underline; }
.fnt-browse a:focus-visible { outline: 2px solid var(--r1); outline-offset: 2px; border-radius: 4px; }
@media (max-width: 899px) { .fnt-browse-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 479px) { .fnt-browse-cols { grid-template-columns: 1fr; } .fnt-browse a { min-height: 44px; } }
@media (prefers-reduced-motion: reduce) { .fnt-arrow { transition: none; } }