/* ============================================================================
Content page - article intelligence + text-change history (2026-08-20)
----------------------------------------------------------------------------
Adir asked for the Published-articles table to carry "a little bit more of a
design and graphs... links to the page, links out of the page... how good is
the article", and for the "Website text we improved" tab to actually show
the rewrites we have been making.
Everything here is LAYOUT AND SPACING for the new cells. The meter is the
existing .cxp-health-progress component, the bar chart is the existing
.cxp-map-trend component, and the score tones are the existing
.cxp-fill-good/middle/poor scale - no new colour is introduced and no
component is re-invented.
Column discipline (the standing rule: the table FITS, it never scrolls
sideways): the Article column is the only flexible one. Published, Length,
Links, Content score and the Details button all shrink to their content and
cluster to the right of it.
============================================================================ */
body.fi-panel-portal .cxp-visually-hidden {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
border: 0;
}
/* --- Publishing history card ---------------------------------------------- */
body.fi-panel-portal .cxp-article-chart-card {
margin-bottom: 1rem;
}
body.fi-panel-portal .cxp-article-summary {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 1rem;
margin-bottom: 1.25rem;
}
body.fi-panel-portal .cxp-article-summary-item {
display: flex;
flex-direction: column;
gap: 0.15rem;
min-width: 0;
}
/* The number is the point of the block, so it uses the portal's one large
number treatment rather than a second, smaller scale. */
body.fi-panel-portal .cxp-article-summary-item .cxp-rankings-stat-value {
line-height: 1.1;
}
body.fi-panel-portal .cxp-article-summary-item .sb-stat-label {
font-size: 0.8125rem;
line-height: 1.35;
}
@media (max-width: 900px) {
body.fi-panel-portal .cxp-article-summary {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 480px) {
body.fi-panel-portal .cxp-article-summary {
grid-template-columns: minmax(0, 1fr);
}
}
/* --- Published articles table --------------------------------------------- */
body.fi-panel-portal .cxp-article-table {
width: 100%;
table-layout: auto;
}
body.fi-panel-portal .cxp-article-table th:first-child,
body.fi-panel-portal .cxp-article-table td:first-child {
width: auto;
}
body.fi-panel-portal .cxp-article-table th:nth-child(n+2),
body.fi-panel-portal .cxp-article-table td:nth-child(n+2) {
width: 1%;
white-space: nowrap;
}
body.fi-panel-portal .cxp-article-chips {
display: flex;
flex-wrap: wrap;
gap: 0.3rem;
margin-top: 0.3rem;
}
body.fi-panel-portal .cxp-article-chip {
display: inline-flex;
align-items: center;
padding: 0.1rem 0.45rem;
border: 1px solid var(--portal-border);
border-radius: 999px;
font-size: 0.75rem;
line-height: 1.5;
color: var(--portal-muted, #5b6880);
white-space: nowrap;
}
body.fi-panel-portal .cxp-article-links-sep {
color: var(--portal-border);
padding: 0 0.15rem;
}
body.fi-panel-portal .cxp-article-score {
display: flex;
flex-direction: column;
gap: 0.3rem;
min-width: 96px;
}
body.fi-panel-portal .cxp-article-score strong {
font-variant-numeric: tabular-nums;
}
body.fi-panel-portal .cxp-article-score small {
font-weight: 400;
color: var(--portal-muted, #5b6880);
}
body.fi-panel-portal .cxp-article-toggle-cell {
text-align: right !important;
}
/* --- Expanded row --------------------------------------------------------- */
body.fi-panel-portal .cxp-article-detail-row > td {
background: var(--portal-page, #f7f9fc);
padding: 1rem 1.25rem !important;
white-space: normal !important;
}
body.fi-panel-portal .cxp-article-detail {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 1.25rem;
}
body.fi-panel-portal .cxp-article-detail-block {
min-width: 0;
}
body.fi-panel-portal .cxp-article-detail-title {
font-size: 0.9375rem;
font-weight: 600;
margin: 0 0 0.15rem;
color: var(--portal-heading, #172033);
}
body.fi-panel-portal .cxp-article-check-list,
body.fi-panel-portal .cxp-article-link-list {
list-style: none;
margin: 0.6rem 0 0;
padding: 0;
display: grid;
gap: 0.4rem;
}
body.fi-panel-portal .cxp-article-check-list li {
display: flex;
align-items: baseline;
gap: 0.5rem;
font-size: 0.875rem;
line-height: 1.4;
}
/* The word carries the meaning, the colour only reinforces it - a pass must
never be readable by colour alone. */
body.fi-panel-portal .cxp-article-check-mark {
flex: 0 0 auto;
min-width: 34px;
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0.02em;
text-transform: uppercase;
}
body.fi-panel-portal .cxp-article-check-list li.is-pass .cxp-article-check-mark {
color: var(--cxp-tone-good, #00a651);
}
body.fi-panel-portal .cxp-article-check-list li.is-fail .cxp-article-check-mark {
color: var(--cxp-tone-poor, #d92d20);
}
body.fi-panel-portal .cxp-article-link-list li {
display: flex;
flex-direction: column;
gap: 0.1rem;
font-size: 0.875rem;
line-height: 1.4;
min-width: 0;
}
body.fi-panel-portal .cxp-article-link-list li .cxp-meta {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* --- Website text we improved: before/after pair -------------------------- */
body.fi-panel-portal .cxp-text-diff {
display: grid;
gap: 0.25rem;
min-width: 0;
}
body.fi-panel-portal .cxp-text-diff-row {
display: flex;
align-items: baseline;
gap: 0.5rem;
min-width: 0;
font-size: 0.875rem;
line-height: 1.4;
}
body.fi-panel-portal .cxp-text-diff-tag {
flex: 0 0 auto;
min-width: 30px;
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0.02em;
text-transform: uppercase;
color: var(--portal-muted, #5b6880);
}
body.fi-panel-portal .cxp-text-diff-row--before {
color: var(--portal-muted, #5b6880);
}
body.fi-panel-portal .cxp-text-diff-row--after {
color: var(--portal-text, #172033);
font-weight: 500;
}
/* The page-text table has four columns and the last one carries two lines of
prose, so it is the flexible one alongside Page. */
body.fi-panel-portal .cxp-content-table--page-text th:nth-child(1),
body.fi-panel-portal .cxp-content-table--page-text td:nth-child(1),
body.fi-panel-portal .cxp-content-table--page-text th:nth-child(3),
body.fi-panel-portal .cxp-content-table--page-text td:nth-child(3) {
width: 1%;
white-space: nowrap;
}
body.fi-panel-portal .cxp-content-table--page-text th:nth-child(4),
body.fi-panel-portal .cxp-content-table--page-text td:nth-child(4) {
width: 55%;
white-space: normal;
}
/* --- Publishing bar chart -------------------------------------------------
The house .cxp-map-trend was built for ~30 thin daily bars. With 14 weekly
buckets each bar is ~85px wide, and the active skin rounds every fill to
999px, which turned a full-height bar into a lozenge (at 115px it read as
a circle). Colour stays exactly as the skin paints it - only the geometry
is corrected here, and the bars still stretch the full card width so the
card never reads as half empty. */
body.fi-panel-portal .cxp-article-chart-card .cxp-map-trend {
gap: 10px;
height: 6.5rem;
}
body.fi-panel-portal .cxp-article-chart-card .cxp-map-bar {
flex: 1 1 0;
border-radius: 6px !important;
}
body.fi-panel-portal .cxp-article-chart-card .cxp-map-bar-fill {
border-radius: 6px !important;
min-height: 3px;
}
/* --- Zebra for a per-article --------------------------------------
The class is repeated to clear the skin. cxs-skin.css loads last and claims
BOTH halves of the zebra with
".kt-table > tbody > tr:nth-child(odd|even)" - two classes plus a
pseudo-class, so a same-weight rule of ours loses the tie on source order
however many !importants it carries.
Each article owns a (summary row + hidden detail row), so every
visible row is child 1 of its own tbody and the standard
".kt-table > tbody > tr:nth-child(even)" zebra never fires - the table
renders flat white. Same situation, and same fix, as
.cxp-rankings-keyword-table: alternate by tbody GROUP position. Uses the
skin's own well token so the banding matches every other portal table. */
body.fi-panel-portal .cxp-article-table.cxp-article-table > tbody:nth-of-type(even) > tr {
background: var(--cxs-well, #f1f5f9) !important;
}
body.fi-panel-portal .cxp-article-table.cxp-article-table > tbody:nth-of-type(even) > tr > td {
background: inherit !important;
}
/* The expanded panel keeps its own shade in both bands so it always reads as
a detail of the row above rather than as another row. */
body.fi-panel-portal .cxp-article-table.cxp-article-table > tbody > tr.cxp-article-detail-row > td {
background: var(--portal-page, #f7f9fc) !important;
}
/* --- Article cell: title above its chips -----------------------------------
.sb-dense-identity is a nowrap flex ROW (correct where it is used for
"/path top performer"). Here it holds a long article title plus up to
five chips, so as a row the chips ate the title's width and every title
truncated at about a third of a 550px column while the rest of the cell sat
empty. Stack them: the title gets the full column and only truncates when
it genuinely runs out of room. */
body.fi-panel-portal .cxp-article-table .sb-dense-identity {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 0;
white-space: normal;
min-width: 0;
width: 100%;
}
body.fi-panel-portal .cxp-article-table .sb-dense-identity > a,
body.fi-panel-portal .cxp-article-table .sb-dense-identity > strong {
display: block;
width: 100%;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}