/**
 * The one admin data table.
 *
 * House furniture for every table rendered through AIEO_Table. This file is
 * where the presentation tokens of the table contract live, and its purpose
 * is to end the inline styles: the product currently repeats
 * style="text-align:right" on every numeric cell, hardcodes six independent
 * colour-band schemes as inline hex, and picks table widths and font sizes
 * per screen.
 *
 * Tokens, so a future Metronic or Portal renderer restyles everything at
 * once: .aieo-t-a--* alignment, .aieo-t-tone--* value tone, .aieo-t-badge--*
 * status colour, .aieo-t--compact density.
 *
 * -- 11.1.7: THE COLOURS MOVED OUT --------------------------------------------
 *
 * Every literal below became a `var(--aieo-*)` out of `aieo-tokens.css`, which
 * is enqueued as this file's dependency. That file is shared with
 * `aieo-controls.css`, and sharing it is the point: a badge in a report and a
 * badge in a questionnaire now mean the same thing because they read the same
 * declaration, rather than because two people once picked the same hex.
 *
 * The BADGE variants were renamed at the same time and it had to happen in one
 * wave. `definition_version` is a content hash, so a token rename re-exports
 * every affected report definition -- doing the tables now and the form
 * controls later would have meant renaming twice and re-exporting twice.
 * `danger` became `destructive` and `neutral` became `secondary`;
 * AIEO_Variants normalises the old names on the way in, which is not
 * politeness: `tone_key` names a ROW FIELD, so some variants are read out of
 * the database at render time and cannot be found by searching the source.
 *
 * Every `var()` keeps a literal fallback. A custom property that is never
 * declared does not error and does not inherit -- the whole declaration is
 * dropped, so a badge would render with no background rather than the wrong
 * one. The fallback is what makes a missing stylesheet a cosmetic problem
 * instead of an invisible-status problem.
 *
 * @since 11.1.4
 */

/* ---------------------------------------------------------------------
 * Table shell
 * ------------------------------------------------------------------ */

.aieo-t {
	width: 100%;
	border-collapse: collapse;
}

.aieo-t th.aieo-t-h {
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: .02em;
	color: var(--aieo-tone-secondary, #50575e);
	white-space: nowrap;
}

.aieo-t td.aieo-t-c {
	vertical-align: top;
	line-height: 1.45;
}

/* Compact density. One of two tokens, replacing three ad-hoc font shrinks. */
.aieo-t--compact th.aieo-t-h,
.aieo-t--compact td.aieo-t-c {
	font-size: 12px;
	padding-top: 6px;
	padding-bottom: 6px;
}

/* ---------------------------------------------------------------------
 * Alignment and wrapping
 * ------------------------------------------------------------------ */

.aieo-t-a--left   { text-align: left; }
.aieo-t-a--right  { text-align: right; }
.aieo-t-a--center { text-align: center; }
.aieo-t-nowrap    { white-space: nowrap; }

/* 🚨 THE SAME TOKENS AGAIN, HEAVIER, BECAUSE WORDPRESS CORE OUTRANKS THEM.
 *
 * `wp-admin/css/common.css` carries
 *
 *     .widefat tbody td.check-column, .widefat tfoot td,
 *     .widefat th, .widefat thead td { text-align: left; }
 *
 * at specificity (0,1,1), and every table we render wears `widefat` on purpose
 * so it inherits admin furniture. The bare token above is (0,1,0), so core won
 * on EVERY header cell: the renderer emitted `aieo-t-a--right` on the <th> and
 * on the <td>, the cell obeyed and the header did not.
 *
 * The reader's experience of that, reported by the operator 2026-08-29 as "you
 * cannot make sense which figure belongs to which heading": in a wide table the
 * number sits at the right edge of its column while its heading sits at the
 * left edge of the same column, hundreds of pixels away and immediately beside
 * the NEXT heading. On competition_insights the value 16 for "Competitions
 * entered" rendered directly under the word "Wins". Every numeric column in the
 * product read one column to the right of the truth.
 *
 * (0,2,1) reclaims it. Scoped under `.aieo-t` rather than made `!important`, so
 * this is still a normal cascade a Portal or Metronic renderer can override.
 * `tfoot` matters as much as `thead` here: core's selector names it too, so a
 * totals row was mis-aligning against the column it totals.
 */
.aieo-t th.aieo-t-a--left,
.aieo-t td.aieo-t-a--left   { text-align: left; }
.aieo-t th.aieo-t-a--right,
.aieo-t td.aieo-t-a--right  { text-align: right; }
.aieo-t th.aieo-t-a--center,
.aieo-t td.aieo-t-a--center { text-align: center; }

/* Numbers line up on the decimal point only when they share a glyph width. */
.aieo-t-c--id,
.aieo-t-c--integer,
.aieo-t-c--decimal,
.aieo-t-c--money,
.aieo-t-c--percent {
	font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------------------
 * Value tone. Replaces inline colours, and is what threshold bands resolve to.
 * ------------------------------------------------------------------ */

/* `danger` STAYS `danger` here, and it is not an oversight. This is the VALUE
 * axis: a figure that is bad is not an action that destroys something. The
 * variant axis retired the word; this one keeps it, and the two words are the
 * distinction. See AIEO_Variants. */
.aieo-t-tone--secondary { color: var(--aieo-tone-secondary, #646970); }
.aieo-t-tone--muted     { color: var(--aieo-tone-muted, #9ca3af); }
.aieo-t-tone--danger    { color: var(--aieo-tone-danger, #b91c1c); font-weight: 600; }
.aieo-t-tone--warning   { color: var(--aieo-tone-warning, #a16207); font-weight: 600; }
.aieo-t-tone--success   { color: var(--aieo-tone-success, #166534); font-weight: 600; }
.aieo-t-tone--info      { color: var(--aieo-tone-info, #6d28d9); font-weight: 600; }

/* ---------------------------------------------------------------------
 * Cell parts
 * ------------------------------------------------------------------ */

/* The subline: the second line of a composite cell. Census finding is that
 * this is the norm rather than the exception, so it is a first-class part. */
.aieo-t-sub {
	display: block;
	font-size: var(--aieo-text-2xs, 11px);
	color: var(--aieo-muted-fg, #646970);
	margin-top: 2px;
}

.aieo-t-suffix {
	color: var(--aieo-muted-fg, #646970);
	font-size: var(--aieo-text-xs, 12px);
}

.aieo-t-code {
	font-size: var(--aieo-text-xs, 12px);
	background: var(--aieo-muted, #f6f7f7);
	border: 1px solid var(--aieo-input, #e4e4e7);
	border-radius: 3px;
	padding: 1px 5px;
	word-break: break-all;
}

/* The empty marker reads as absent, never as data. */
.aieo-t-empty {
	color: var(--aieo-tone-muted, #9ca3af);
}

.aieo-t-yes { color: var(--aieo-tone-success, #166534); font-weight: 700; }
.aieo-t-no  { color: var(--aieo-tone-muted, #9ca3af); }

.aieo-t-trunc { cursor: help; }

/* Chips, for list columns. */
.aieo-t-chip {
	display: inline-block;
	font-size: var(--aieo-text-2xs, 11px);
	background: var(--aieo-muted, #f6f7f7);
	border: 1px solid var(--aieo-input, #e4e4e7);
	border-radius: var(--aieo-radius-pill, 10px);
	padding: 1px 8px;
	margin: 0 3px 3px 0;
}

/* A row thumbnail. object-fit so a portrait and a landscape product photo
   occupy the same box and the column stays a column. */
.aieo-t-thumb {
	display: block;
	object-fit: cover;
	border-radius: var(--aieo-radius-sm, 3px);
	background: var(--aieo-muted, #f0f0f1);
}

/* A chip carrying its own tooltip. Without the cue the tooltip is only
   discoverable by hovering something that gives no reason to hover it. */
.aieo-t-chip--tip {
	cursor: help;
	border-bottom-style: dotted;
	border-bottom-width: 2px;
}

/* ---------------------------------------------------------------------
 * Badges. One place, so the six inline band schemes collapse into tokens.
 * ------------------------------------------------------------------ */

.aieo-t-badge {
	display: inline-block;
	font-size: 11px;
	font-weight: 600;
	line-height: 1.6;
	border-radius: 10px;
	padding: 1px 9px;
	white-space: nowrap;
}

/* THE CANONICAL NAMES. `danger` and `neutral` are gone from this file and from
 * the markup: AIEO_Variants::badge() rewrites them before a class is ever
 * emitted, so a declaration that still says `danger` keeps working and still
 * cannot put the retired word on the page.
 *
 * `info` MOVED FROM BLUE TO VIOLET, and it is the one visible colour change in
 * this wave. It was blue-100/blue-800 -- the same hue as `primary` -- so an
 * informational badge and a primary one were telling the reader the same thing
 * in the same colour. Violet is what the design language uses for information
 * precisely so the two are distinguishable at a glance. */
.aieo-t-badge--primary     { background: var(--aieo-primary-soft, #dbeafe);     color: var(--aieo-primary-soft-fg, #1e40af); }
.aieo-t-badge--secondary   { background: var(--aieo-secondary-soft, #f0f0f1);   color: var(--aieo-secondary-soft-fg, #50575e); }
.aieo-t-badge--success     { background: var(--aieo-success-soft, #dcfce7);     color: var(--aieo-success-soft-fg, #166534); }
.aieo-t-badge--warning     { background: var(--aieo-warning-soft, #fef3c7);     color: var(--aieo-warning-soft-fg, #92400e); }
.aieo-t-badge--destructive { background: var(--aieo-destructive-soft, #fee2e2); color: var(--aieo-destructive-soft-fg, #991b1b); }
.aieo-t-badge--info        { background: var(--aieo-info-soft, #ede9fe);        color: var(--aieo-info-soft-fg, #5b21b6); }
.aieo-t-badge--mono        { background: var(--aieo-mono-soft, #f0f0f1);        color: var(--aieo-mono-soft-fg, #18181b); }

/* Ours, not the vendor's, and kept on purpose: a row that is STILL LISTED but
 * no longer live -- a captcha rule for a form whose plugin is gone, an unmapped
 * branch. `secondary` is the wrong word for it, because secondary is a live
 * thing of lesser importance and this is a dead thing still on the page. */
.aieo-t-badge--muted   { background: var(--aieo-muted, #f6f7f7); color: var(--aieo-tone-muted, #9ca3af); }

/* ---------------------------------------------------------------------
 * Bars
 * ------------------------------------------------------------------ */

.aieo-t-bar {
	display: inline-block;
	vertical-align: middle;
	width: 90px;
	height: 10px;
	background: var(--aieo-muted, #f3f4f6);
	border-radius: var(--aieo-radius-pill, 5px);
	overflow: hidden;
}

.aieo-t-bar-fill {
	display: block;
	height: 100%;
	background: var(--aieo-primary, #2271b1);
}

/* A bar takes its fill from the cell tone, so a distribution whose rows mean
   different things (happy / neutral / unhappy) reads at a glance. Declared
   via the column-level `tone_key`; the default blue stays for untoned bars. */
.aieo-t-tone--success .aieo-t-bar-fill { background: var(--aieo-tone-success-fill, #22c55e); }
.aieo-t-tone--warning .aieo-t-bar-fill { background: var(--aieo-tone-warning-fill, #f5b800); }
.aieo-t-tone--danger  .aieo-t-bar-fill { background: var(--aieo-tone-danger-fill, #ef4444); }
.aieo-t-tone--info    .aieo-t-bar-fill { background: var(--aieo-tone-info-fill, #4f46e5); }

.aieo-t-bar-val {
	margin-left: 8px;
	font-size: 12px;
	vertical-align: middle;
}

/* ---------------------------------------------------------------------
 * Diff
 * ------------------------------------------------------------------ */

.aieo-t-diff-from  { color: var(--aieo-tone-muted, #9ca3af); text-decoration: line-through; }
.aieo-t-diff-arrow { margin: 0 6px; color: var(--aieo-tone-muted, #9ca3af); }

/* ---------------------------------------------------------------------
 * Sorting
 * ------------------------------------------------------------------ */

.aieo-t-sortable {
	cursor: pointer;
	user-select: none;
}

.aieo-t-sortable::after {
	content: "\21C5";
	margin-left: 6px;
	opacity: .35;
	font-weight: 400;
}

.aieo-t-sortable.aieo-t-asc::after  { content: "\25B2"; opacity: .85; }
.aieo-t-sortable.aieo-t-desc::after { content: "\25BC"; opacity: .85; }

/* ---------------------------------------------------------------------
 * Empty state, caps, totals
 * ------------------------------------------------------------------ */

.aieo-t-empty-row td {
	text-align: center;
	color: var(--aieo-muted-fg, #646970);
	padding: 22px 12px;
}

.aieo-t-cap {
	margin-top: 6px;
	font-style: italic;
}

.aieo-t-totals {
	display: flex;
	flex-wrap: wrap;
	gap: 18px;
	margin: 10px 0;
	padding: 10px 14px;
	background: var(--aieo-muted, #f6f7f7);
	border: 1px solid var(--aieo-input, #e4e4e7);
	border-radius: 6px;
}

.aieo-t-total-l {
	display: block;
	font-size: 11px;
	text-transform: uppercase;
	color: var(--aieo-muted-fg, #646970);
}

.aieo-t-total-v {
	display: block;
	font-size: 16px;
	font-weight: 600;
}

/* ---------------------------------------------------------------------
 * Interactive cells
 * ------------------------------------------------------------------ */

.aieo-t-edit {
	width: 100%;
	max-width: 180px;
}

.aieo-t-danger {
	color: var(--aieo-destructive, #b32d2e);
	border-color: var(--aieo-destructive, #b32d2e);
}

.aieo-t-detail > td {
	background: #fbfbfc;   /* core admin furniture; see the tfoot note */
	border-top: 0;
}

/* ---------------------------------------------------------------------
 * Row tones — the vocabulary `row_class` returns.
 *
 * Every screen that wanted a highlighted row hand-wrote an inline
 * background, and they all disagreed: #fff7ed with an inset left rule on
 * signals, #f3fbfd on the ROI wizard, #fef3c7 on a totals row that should
 * have been a <tfoot>. A caller returning `aieo-t-row--warning` now gets
 * the same row on every screen, and a `!important`-free rule that still
 * wins over .striped because it is more specific.
 *
 * The left rule is part of the tone deliberately: a pale background alone
 * does not survive being skimmed, which is what the signals screen found
 * when its dormant rows went unread.
 * ------------------------------------------------------------------ */

.aieo-t tbody tr.aieo-t-row--danger > td {
	background: var(--aieo-tone-danger-wash, #fef2f2);
	box-shadow: inset 3px 0 0 var(--aieo-tone-danger, #b91c1c);
}

.aieo-t tbody tr.aieo-t-row--warning > td {
	background: var(--aieo-tone-warning-wash, #fff7ed);
	box-shadow: inset 3px 0 0 var(--aieo-tone-warning, #ea580c);
}

.aieo-t tbody tr.aieo-t-row--info > td {
	background: var(--aieo-tone-info-wash, #f0f9ff);
	box-shadow: inset 3px 0 0 var(--aieo-tone-info, #0891b2);
}

.aieo-t tbody tr.aieo-t-row--success > td {
	background: var(--aieo-tone-success-wash, #f0fdf4);
	box-shadow: inset 3px 0 0 var(--aieo-tone-success, #16a34a);
}

/* The fifth tone, and the only one that does not draw attention: a row that
 * is STILL LISTED but no longer live — a captcha rule for a form whose plugin
 * is gone, an orphan the operator should see and probably remove. The screens
 * that had it wrote `style="opacity:.75"` inline. It gets no left rule,
 * because the rule is what says "read this one first" and this one is the
 * opposite of that. */
.aieo-t tbody tr.aieo-t-row--muted > td {
	opacity: .75;
}

/* ---------------------------------------------------------------------
 * Greek header labels split mid-word without this, which is a real defect
 * one screen already works around with its own inline style. Two of the
 * three installs run Greek as the primary locale.
 * ------------------------------------------------------------------ */

.aieo-t th.aieo-t-h {
	word-break: normal;
	overflow-wrap: normal;
}

/* ---------------------------------------------------------------
 * A real <tfoot> totals row.
 *
 * Opt-in via 'totals_at' => 'foot'. It exists because five screens
 * already hand-rolled one and the fulfilment screen wrote down the
 * requirement a strip cannot meet: never sorted, always pinned at
 * the bottom. The client sorter walks tbody.rows only, so a row here
 * is structurally immune to it.
 * ------------------------------------------------------------- */
.aieo-t tfoot .aieo-t-foot > td {
	/* Core's own rule colour, deliberately NOT tokenised yet. A totals row has
	 * to read as heavier than the rows above it, and every other heavy rule on
	 * an admin screen is this grey. It becomes a token in the same step that
	 * decides whether we keep `widefat` at all -- until then, changing it here
	 * alone would make our footer disagree with the chrome around it. */
	border-top: 2px solid #c3c4c7;
	background: var(--aieo-muted, #f6f7f7);
	font-weight: 600;
}
.aieo-t-foot-label {
	font-weight: 600;
	white-space: nowrap;
}

/* ---------------------------------------------------------------
 * T1: the server-paginated tier.
 *
 * Reuses WordPress core's .tablenav / .displaying-num /
 * .pagination-links so the pager looks like every other admin list
 * table, rather than becoming the product's FIFTH pager. See the
 * defect register B33.
 * ------------------------------------------------------------- */
.aieo-t-wrap { position: relative; }

.aieo-t-toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	margin: 0 0 10px;
}
.aieo-t-tool label { font-size: 12px; color: var(--aieo-muted-fg, #646970); }
.aieo-t-search { min-width: 240px; max-width: 100%; }

.aieo-t-nav {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin: 10px 0 0;
}
.aieo-t-nav .displaying-num { font-size: 12px; color: var(--aieo-muted-fg, #646970); }
.aieo-t-filtered-of { font-size: 12px; color: var(--aieo-tone-muted, #9ca3af); }
.aieo-t-page-of { margin: 0 6px; font-size: 12px; color: var(--aieo-muted-fg, #646970); }
.aieo-t-nav .pagination-links { display: inline-flex; align-items: center; gap: 4px; }

/* The busy state dims but never HIDES: a table that disappears while it
 * reloads makes every page change feel like a page load, and on a fast
 * report it flashes. Pointer-events off is what stops a second click
 * queueing behind the first. */
.aieo-t-busy { opacity: .55; transition: opacity .12s ease; }
.aieo-t-busy .aieo-t-toolbar,
.aieo-t-busy .aieo-t-nav,
.aieo-t-busy table { pointer-events: none; }

/* ---------------------------------------------------------------
 * The bulk-action toolbar (item 5): buttons over the ticked
 * selection, or — with the all-matching toggle — over everything
 * the current filter matches, walked server-side in chunks.
 * ------------------------------------------------------------- */
.aieo-t-bulkbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin: 0 0 10px;
}
.aieo-t-bulk-all { font-size: 12px; color: var(--aieo-muted-fg, #646970); }
.aieo-t-bulk-count { font-size: 12px; color: var(--aieo-muted-fg, #646970); }
.aieo-t-bulk-status { font-size: 12px; color: var(--aieo-foreground, #1d2327); }

/* A parameterised action (G1): the value picker travels WITH its button as
 * one flex item, so wrapping never strands a picker above its verb. */
.aieo-t-bulk-with { display: inline-flex; align-items: center; gap: 6px; }
.aieo-t-bulk-param { max-width: 260px; }
select.aieo-t-bulk-param { min-width: 160px; }

.aieo-t-error { margin: 0 0 10px; padding: 6px 10px; }

/* A server-sorted header is still a button, but the client asks the
 * SERVER to re-sort rather than reordering the rows on screen. */
.aieo-t--server th.aieo-t-sortable { cursor: pointer; }

/* ---------------------------------------------------------------
 * The per-column filter panel.
 *
 * Six control kinds, which is a measured number rather than a guess:
 * a census of the 22 reports being replaced found exactly these six
 * across all 213 filterable columns. `checkbox` exists in the vendor
 * schema and is used on none of them, so it is not built.
 * ------------------------------------------------------------- */
.aieo-t-filters {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 10px 14px;
	margin: 0 0 12px;
	padding: 10px 12px;
	background: var(--aieo-muted, #f6f7f7);
	border: 1px solid #dcdcde;   /* core admin furniture; see the tfoot note */
	border-radius: var(--aieo-radius-sm, 4px);
}
.aieo-t-filter { display: flex; flex-direction: column; gap: 2px; }
.aieo-t-filter-l {
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: .03em;
	color: var(--aieo-muted-fg, #646970);
}
.aieo-t-filter-c { min-width: 130px; max-width: 220px; }
.aieo-t-filter[data-kind="number_range"],
.aieo-t-filter[data-kind="date_range"] {
	flex-direction: row;
	align-items: center;
	flex-wrap: wrap;
	gap: 4px;
}
.aieo-t-filter[data-kind="number_range"] .aieo-t-filter-l,
.aieo-t-filter[data-kind="date_range"] .aieo-t-filter-l {
	flex: 0 0 100%;
}
.aieo-t-filter[data-kind="number_range"] .aieo-t-filter-c,
.aieo-t-filter[data-kind="date_range"] .aieo-t-filter-c { min-width: 0; width: 130px; }
.aieo-t-filter-sep { color: var(--aieo-tone-muted, #9ca3af); }

/* Apply is deliberate and separate: every filter change is a fresh query
 * over the whole dataset, so a reader setting three filters pays once. */
.aieo-t-filter-actions {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-left: auto;
}

/* ── The card the table sits in ────────────────────────────────────────
   AIEO_Table::card() renders these, so the spacing a screen used to set
   inline (margin:14px 0 6px, font-size:13px on a sub-heading, and four
   different max-widths) has one home. */
.aieo-t-card-h { margin: 0 0 6px; }
h4.aieo-t-card-h { margin: 18px 0 6px; font-size: 13px; }
.aieo-t-card-d { margin: 0 0 10px; }
.aieo-t-card-f { margin: 10px 0 0; }

/* ── The label/value panel ─────────────────────────────────────────────
   `head => false`. Four shipped status panels are two columns of "name,
   then the value" with no header row at all, the value cell often holding
   a paragraph or a live counter. `row_header` makes the first cell a
   <th scope="row">, which is what those screens already wrote and the only
   thing left associating a value with its label once the header is gone. */
.aieo-t--panel tbody th {
	font-weight: 600;
	width: 260px;
}
.aieo-t--panel tbody th,
.aieo-t--panel tbody td { vertical-align: top; }

/* ── Cells the owning screen renders ───────────────────────────────────
   `control`. The row IS a form record: the input keeps its own name, id and
   handler, and only the furniture around it belongs to the component. The
   spacing is here so sixteen converted forms stop each choosing their own. */
.aieo-t-c--control > input[type="text"],
.aieo-t-c--control > input[type="url"],
.aieo-t-c--control > input[type="number"],
.aieo-t-c--control > select { max-width: 100%; }
.aieo-t-c--control .description { margin: 4px 0 0; }

/* ── The layout grid ───────────────────────────────────────────────────
   `bare => true`. A table whose job is to line up a column of labels
   against a column of controls inside a settings form. It is ours and it
   is a table, but it must not read as DATA: striping a settings form is
   how a conversion turns into a visible regression. The screens that had
   this shape wrote `border:0;background:transparent` on every cell by
   hand, plus their own per-cell padding, which is why it lives here now. */
.aieo-t--bare,
.aieo-t--bare tbody tr,
.aieo-t--bare tbody tr:nth-child(odd),
.aieo-t--bare tbody th,
.aieo-t--bare tbody td {
	border: 0;
	background: transparent;
	box-shadow: none;
}
.aieo-t--bare { max-width: 560px; }
.aieo-t--bare tbody th,
.aieo-t--bare tbody td { padding: 6px 8px 6px 0; }
.aieo-t--bare tbody td:last-child { padding-right: 0; }
.aieo-t--bare.aieo-t--panel tbody th { width: 140px; font-weight: 400; }

/* `narrow => true`. A table living in a narrow column — half of a
   display:flex pair. The scroll wrapper's blanket `min-width: 900px`
   (dmm.css `.aieo-dmm-scroll-x > table`) is right for a full-width table
   and wrong here: two 900px minimums cannot share one viewport, so the
   second table overflows its own scroll box and its last column hides
   behind a scrollbar nobody notices. The 0,2,1 specificity beats the
   wrapper rule's 0,1,1 regardless of stylesheet order. */
.aieo-dmm-scroll-x > table.aieo-t--narrow { min-width: 0; }