/* KE News content styles.
 *
 * Layers on top of assets/css/site-chrome.css and uses its design tokens
 * (Poppins, brand red family, ink greys, white cards on #f7f8fa). Chrome
 * classes live there; everything page-specific lives here.
 */

/* Match the main site's 1260px container (measured on the live
   keywordseverywhere.com pages, 2026-07-08, at the user's request; was
   980px). Overrides the chrome's 1140px cap project-wide so header, hero,
   sub-nav, content and footer all share one alignment. */
.container {
    max-width: 1260px;
}

/* Sticky sub-nav offset: anchor jumps and scrollIntoView land targets
   below the bar instead of underneath it. */
html {
    scroll-padding-top: 56px;
}

/* ========================================================================
   Section sub-nav (under the hero, on every page). Sticks to the top of
   the viewport while scrolling; news.js adds .is-stuck (via a sentinel
   IntersectionObserver) for the shadow once it is actually pinned.

   Hubs live inside group dropdowns (includes/news.php ke_news_render_subnav
   + data/hub-groups.php). A flat bar stopped fitting at ten hubs: thirteen
   links needed 1354px against a 1220px container, so it scrolled at EVERY
   width, 1920 included. Six grouped items need 523px.

   NOTE the ul deliberately has NO overflow-x. It used to, for the mobile
   scroll strip, and any overflow value on the ul CLIPS the dropdown panels
   (overflow-x:auto computes overflow-y to auto, so a panel hanging below
   the bar is simply never painted). Below 768px the bar collapses to a
   single toggle instead of scrolling, so nothing needs to overflow.
   ======================================================================== */
.news-subnav {
    position: sticky;
    top: 0;
    z-index: 300;
    background: #f7f8fa;
    border-bottom: 1px solid var(--ink-200);
    margin-bottom: 4px;
    transition: box-shadow 0.15s ease;
}
.news-subnav .container {
    position: relative;
}
.news-subnav.is-stuck {
    box-shadow: var(--shadow-md);
}
@media (prefers-reduced-motion: reduce) {
    .news-subnav {
        transition: none;
    }
}
.news-subnav ul {
    list-style: none;
    display: flex;
    gap: 2px;
    /* -1px lets the active link's 2px underline overlap the subnav's
       border-bottom. It sits HERE rather than on the links so the 1px
       cannot become overflow inside the bar. */
    margin: 0 0 -1px;
    padding: 0;
}
.news-subnav li {
    flex-shrink: 0;
}
.news-subnav a,
.news-navgroup-btn {
    display: inline-block;
    padding: 8px 12px 10px;
    font-size: 13.5px;
    font-weight: 400;
    color: var(--ink-500);
    border-bottom: 2px solid transparent;
    white-space: nowrap;
}
.news-subnav a:hover,
.news-navgroup-btn:hover {
    color: var(--brand-red);
}
.news-subnav > .container > ul > li > a.is-active,
.news-navgroup-btn.is-active {
    color: var(--brand-red);
    font-weight: 600;
    border-bottom-color: var(--brand-red);
}

/* --- Group buttons and their dropdown panels --------------------------- */
.news-navgroup {
    position: relative;
}
.news-navgroup-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: none;
    border: 0;
    border-bottom: 2px solid transparent;
    font-family: inherit;
    line-height: inherit;
    cursor: pointer;
}
.news-navgroup-btn .news-icon {
    transition: transform 0.15s ease;
}
.news-navgroup.is-open > .news-navgroup-btn .news-icon {
    transform: rotate(180deg);
}
@media (prefers-reduced-motion: reduce) {
    .news-navgroup-btn .news-icon {
        transition: none;
    }
}
.news-navgroup-panel {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 232px;
    padding: 6px;
    background: #fff;
    border: 1px solid var(--ink-200);
    border-radius: 8px;
    box-shadow: var(--shadow-md);
}
.news-navgroup.is-open > .news-navgroup-panel {
    display: block;
}
/* Keyboard fallback with JS off or not yet run: focusing the button opens
   the panel. Scoped to :not(.ke-js) so that with JS present it cannot
   fight the click-to-close toggle (the button still holds focus then). */
html:not(.ke-js) .news-navgroup:focus-within > .news-navgroup-panel {
    display: block;
}
.news-navgroup-panel ul {
    display: block;
    margin: 0;
    padding: 0;
}
.news-navgroup-panel li {
    display: block;
}
.news-navgroup-panel a {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 7px 10px;
    border-bottom: 0;
    border-radius: 6px;
    font-size: 14px;
    color: var(--ink-700);
}
.news-navgroup-panel a:hover {
    background: var(--ink-50);
    color: var(--brand-red);
}
.news-navgroup-panel a.is-active {
    font-weight: 600;
    color: var(--brand-red);
}
.news-navgroup-icon {
    display: inline-flex;
    flex-shrink: 0;
}

/* --- The mobile toggle: hidden on desktop, the whole bar below 768px --- */
.news-subnav-toggle {
    display: none;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 10px 2px;
    background: none;
    border: 0;
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--ink-700);
    cursor: pointer;
}
.news-subnav-toggle .news-icon {
    flex-shrink: 0;
    color: var(--ink-500);
    transition: transform 0.15s ease;
}
.news-subnav-toggle[aria-expanded="true"] .news-icon {
    transform: rotate(180deg);
}
@media (prefers-reduced-motion: reduce) {
    .news-subnav-toggle .news-icon {
        transition: none;
    }
}

/* Below 768px the bar is one toggle naming the current section; the same
   ul drops out of it as a full-width sheet, groups expanding in place.
   Nothing scrolls horizontally at any width, so no hub count can bring the
   old overflow back. The sheet is absolute so it overlays the page instead
   of pushing it, which keeps the bar 40px tall and leaves html
   scroll-padding-top (56px) and the sticky rails (top 64px) correct. */
@media (max-width: 767px) {
    .news-subnav-toggle {
        display: flex;
    }
    /* Must stay scoped to the BAR list. A bare `.news-subnav ul` ties on
       specificity with `.news-navgroup-panel ul` and wins on source order,
       which collapsed every dropdown's inner list to zero height. */
    .news-subnav > .container > ul {
        display: none;
    }
    .news-subnav.is-open > .container > ul {
        display: block;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        z-index: 1;
        max-height: calc(100vh - 120px);
        overflow-y: auto;
        margin: 0;
        padding: 6px;
        background: #fff;
        border: 1px solid var(--ink-200);
        border-radius: 0 0 8px 8px;
        box-shadow: var(--shadow-md);
    }
    .news-subnav.is-open > .container > ul > li > a,
    .news-navgroup-btn {
        display: flex;
        width: 100%;
        align-items: center;
        justify-content: space-between;
        padding: 10px 12px;
        border-bottom: 0;
        border-radius: 6px;
        font-size: 14px;
    }
    .news-subnav > .container > ul > li > a.is-active,
    .news-navgroup-btn.is-active {
        border-bottom-color: transparent;
        background: var(--brand-red-soft);
    }
    /* Panels stack under their button rather than floating. */
    .news-navgroup-panel {
        position: static;
        min-width: 0;
        padding: 2px 0 6px 12px;
        border: 0;
        border-radius: 0;
        box-shadow: none;
        background: none;
    }
}

/* ========================================================================
   Hub layout: content column + sticky "On this page" rail

   Three children in DOM order: the summary furniture (stat tiles, What
   changed, lede), the rail, then the content. On wide screens the first
   and third stack in column 1 while the rail spans both rows in column 2,
   which is the same picture as when the furniture and content were one
   box. Below 1100px the grid is off, so plain block flow puts the rail
   exactly where the DOM does, between the lede and the first section
   (2026-08-13, at the user's request: it used to sit above everything).
   assets/js/news.js marks the current section with .is-here.
   ======================================================================== */
.news-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 224px;
    gap: 0 40px;
    align-items: start;
}
.news-layout-head {
    grid-column: 1;
    grid-row: 1;
    min-width: 0;
}
/* The head is a grid item, so it establishes its own formatting context and
   the lede's last paragraph no longer collapses its bottom margin into the
   content below, the way it did when the two were one box. Zero it and let
   the content's own top margin set the seam, which keeps the split
   pixel-identical to the single-column layout it replaced. */
.news-layout-head > :last-child,
.news-layout-head > .news-intro:last-child > :last-child {
    margin-bottom: 0;
}
.news-layout-main {
    grid-column: 1;
    grid-row: 2;
    min-width: 0;
}
.news-toc {
    grid-column: 2;
    /* Spans both content rows so the sticky rail can travel the full
       height of the page, not just the furniture's. */
    grid-row: 1 / span 2;
    position: sticky;
    /* Clears the sticky sub-nav. */
    top: 64px;
    max-height: calc(100vh - 88px);
    overflow-y: auto;
    padding: 2px 0 8px;
}
/* The dropdown button belongs to the narrow layout only. */
.news-toc-toggle {
    display: none;
}
.news-toc-title {
    margin: 0 0 8px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: var(--ink-500);
}
.news-toc ol {
    list-style: none;
    margin: 0;
    padding: 0;
}
.news-toc a {
    display: block;
    padding: 5px 10px;
    border-radius: var(--r-sm);
    font-size: 13px;
    line-height: 1.4;
    color: var(--ink-500);
}
.news-toc a:hover {
    color: var(--brand-red);
}
.news-toc a.is-here {
    background: var(--brand-red-soft);
    color: var(--brand-red);
    font-weight: 600;
}
@media (max-width: 1100px) {
    /* The rail becomes a dropdown, sitting in normal block flow between the
       lede and the first section. It used to be a chip row here, but with
       eight sections that row was 1090px of content in a 350px phone and
       scrolled sideways, hiding most of its own links. Same interaction as
       the sub-nav group menus, so news.js drives both the same way. */
    .news-layout {
        display: block;
    }
    .news-toc {
        position: static;
        max-height: none;
        /* Space above is the rail's own, since the lede's bottom margin is
           zeroed for the desktop seam; below, the first section's 34px top
           margin does the work. */
        margin: 30px 0 0;
        padding: 0;
    }
    .news-toc-title {
        display: none;
    }
    .news-toc-toggle {
        display: flex;
        width: 100%;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        padding: 10px 14px;
        background: #fff;
        border: 1px solid var(--ink-200);
        border-radius: 8px;
        font-family: inherit;
        font-size: 13.5px;
        font-weight: 600;
        color: var(--ink-700);
        cursor: pointer;
    }
    .news-toc-toggle .news-icon {
        flex-shrink: 0;
        color: var(--ink-500);
        transition: transform 0.15s ease;
    }
    .news-toc.is-open .news-toc-toggle {
        border-radius: 8px 8px 0 0;
        border-bottom-color: transparent;
    }
    .news-toc.is-open .news-toc-toggle .news-icon {
        transform: rotate(180deg);
    }
    .news-toc ol {
        display: none;
        margin: 0;
        padding: 6px;
        background: #fff;
        border: 1px solid var(--ink-200);
        border-top: 0;
        border-radius: 0 0 8px 8px;
        box-shadow: var(--shadow-md);
    }
    .news-toc.is-open ol {
        display: block;
    }
    /* Keyboard fallback with JS off, matching the sub-nav's. */
    html:not(.ke-js) .news-toc:focus-within ol {
        display: block;
    }
    .news-toc li {
        display: block;
    }
    .news-toc a {
        padding: 9px 12px;
        border-radius: 6px;
        font-size: 14px;
    }
}
@media (max-width: 1100px) and (prefers-reduced-motion: reduce) {
    .news-toc-toggle .news-icon {
        transition: none;
    }
}

/* ========================================================================
   Main column + shared text
   ======================================================================== */
.news-main {
    padding: 18px 0 56px;
}
.news-main h2 {
    font-size: 20px;
    font-weight: 600;
    color: var(--ink);
    margin: 34px 0 12px;
    letter-spacing: -0.2px;
}
.news-main h3 {
    font-size: 16.5px;
    font-weight: 600;
    color: var(--ink);
    margin: 22px 0 8px;
}
.news-main p,
.news-main li {
    font-size: 16px;
    line-height: 1.65;
}
.news-main a {
    color: var(--link);
}
.news-main a:hover {
    color: var(--link-dark);
}

/* Child-page breadcrumb trail (Marketing News / hub / title). */
.news-crumbs {
    font-size: 13px;
    color: var(--ink-500);
    margin: 4px 0 12px;
}
.news-crumbs-sep {
    color: var(--ink-300);
    margin: 0 7px;
}
.news-crumbs [aria-current] {
    color: var(--ink-700);
}
.news-lede {
    font-size: 17px;
    font-weight: 400;
    color: var(--ink-700);
    line-height: 1.6;
    margin: 10px 0 18px;
}

/* ========================================================================
   Meta line: last-updated + live status chip
   ======================================================================== */
.news-meta-line {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin: 6px 0 16px;
}
.news-updated,
.news-checked {
    font-size: 13.5px;
    color: var(--ink-500);
}
.news-updated time,
.news-checked time {
    font-weight: 600;
    color: var(--ink-700);
}
.news-status {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 12.5px;
    font-weight: 600;
    background: var(--good-bg);
    color: var(--good-fg);
}
.news-status--active {
    background: var(--mid-bg);
    color: var(--mid-fg);
}
.news-status-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
    flex-shrink: 0;
}
@keyframes ke-status-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(146, 64, 14, 0.4); }
    70%  { box-shadow: 0 0 0 6px rgba(146, 64, 14, 0); }
    100% { box-shadow: 0 0 0 0 rgba(146, 64, 14, 0); }
}
.news-status--active .news-status-dot {
    animation: ke-status-pulse 2s ease-out infinite;
}
@media (prefers-reduced-motion: reduce) {
    .news-status--active .news-status-dot {
        animation: none;
    }
}

/* ========================================================================
   "What changed" / "This week in search" boxes
   ======================================================================== */
.news-what-changed {
    background: #fff;
    border: 1px solid var(--ink-100);
    border-radius: var(--r);
    box-shadow: var(--shadow-sm);
    padding: 16px 20px;
    margin: 0 0 22px;
}
.news-what-changed h2 {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 0 0 8px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: var(--brand-red);
}
.news-what-changed ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
.news-what-changed li {
    padding: 5px 0;
    font-size: 14.5px;
}
.news-what-changed li time {
    font-weight: 600;
    color: var(--ink-500);
    font-size: 13px;
    margin-right: 6px;
    font-feature-settings: var(--tnum);
}
.news-wc-summary {
    color: var(--ink-500);
    display: block;
    font-size: 13.5px;
    margin-top: 1px;
}
.news-week-of {
    margin: -4px 0 8px;
    font-size: 13px;
    color: var(--ink-500);
}

/* Week box only: the items are one-line entry rows generated from the
   hubs' data (newest 3 visible, the rest inside a <details>), sharing the
   .news-index-row look with the Latest-news stream. The container class
   is .news-week-rows, NOT .news-entry-rows, because the stream's filter
   chips (news.js) hide empty .news-entry-rows groups page-wide and the
   week box must stay put. The status line is the hand-written negative
   claim from this-week.php. No accent bars. */
.news-week-status {
    margin: 0 0 10px;
    font-size: 14.5px;
    line-height: 1.6;
}
.news-week-quiet {
    margin: 0;
    font-size: 14px;
    color: var(--ink-500);
}
.news-week-rows {
    background: #fff;
    border: 1px solid var(--ink-100);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-xs);
    overflow: hidden;
}
.news-week-more {
    margin-top: 8px;
}
.news-week-more > summary {
    cursor: pointer;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--ink-500);
    padding: 2px 0;
}
.news-week-more > summary:hover {
    color: var(--brand-red);
}
.news-week-more[open] > summary {
    margin-bottom: 8px;
}

/* ========================================================================
   Hub directory cards (/news/ front door)
   ======================================================================== */
.news-hub-grid {
    display: grid;
    /* Twelve hubs as two even rows of six at the full container width.
       Explicit columns, not auto-fit: auto-fit picks five columns at some
       widths and leaves a ragged 5+5+2. The ladder below (4, then 3, then
       2 columns) keeps the rows even at every width; minmax(0, 1fr) lets
       cards shrink below their content minimum so nothing overflows. */
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 14px;
    margin: 8px 0 10px;
}
@media (max-width: 1100px) {
    .news-hub-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}
@media (max-width: 767px) {
    .news-hub-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}
@media (max-width: 560px) {
    .news-hub-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
.news-hub-card {
    display: block;
    background: #fff;
    border: 1px solid var(--ink-100);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-xs);
    padding: 12px 14px;
    color: inherit;
    transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.news-hub-card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
    color: inherit;
}
/* Icon and title sit on one row, vertically centered. */
.news-hub-card-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}
.news-hub-card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    flex-shrink: 0;
}
.news-hub-card h2 {
    margin: 0;
    font-size: 14px;
    line-height: 1.35;
    font-weight: 600;
    color: var(--brand-red);
}
.news-hub-card-updated {
    font-size: 12.5px;
    color: var(--ink-500);
}

/* ========================================================================
   Tables (history, availability, stats)
   ======================================================================== */
.news-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    background: #fff;
    border: 1px solid var(--ink-100);
    border-radius: var(--r);
    box-shadow: var(--shadow-xs);
    margin: 12px 0 8px;
}
.news-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}
.news-table th {
    text-align: left;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: var(--ink-500);
    background: var(--ink-25);
    padding: 10px 14px;
    border-bottom: 1px solid var(--ink-200);
    white-space: nowrap;
}
.news-table td {
    padding: 9px 14px;
    border-bottom: 1px solid var(--ink-100);
    vertical-align: top;
    font-feature-settings: var(--tnum);
}
.news-table tbody tr:last-child td {
    border-bottom: 0;
}
.news-table tbody tr:nth-child(even) {
    background: var(--ink-25);
}
.news-table tbody tr:hover {
    background: var(--ink-50);
}
.news-table td:first-child {
    white-space: nowrap;
}
/* Dates in table cells render as <time> (see ke_news_format_date_cell)
   and must never wrap mid-date. */
.news-table time {
    white-space: nowrap;
}

/* Colored-dot type badges inside opted-in tables (the dot carries the
   hue, the text stays ink, so color never works alone). */
.news-type-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px 9px 2px 8px;
    border: 1px solid var(--ink-100);
    border-radius: 999px;
    background: #fff;
    font-size: 12px;
    font-weight: 600;
    color: var(--ink-700);
    white-space: nowrap;
}
.news-type-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

/* Status chips inside table cells (availability tracker): semantic
   palette, dot + label, the text always carries the meaning. */
.news-cellchip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}
.news-cellchip::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
    flex-shrink: 0;
}
.news-cellchip--good {
    background: var(--good-bg);
    color: var(--good-fg);
}
.news-cellchip--mid {
    background: var(--mid-bg);
    color: var(--mid-fg);
}
.news-cellchip--off {
    background: var(--ink-100);
    color: var(--ink-500);
}

/* Inline duration bars in opted-in history tables ('duration_bars'):
   length is proportional to the table's longest rollout, color follows
   the update type, and the text keeps carrying the value. */
.news-durbar {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
}
.news-durbar i {
    height: 6px;
    border-radius: 4px;
    flex-shrink: 0;
}

/* Slim year separator rows in opted-in multi-year tables ('year_rows') */
.news-table tbody tr.news-year-row td {
    background: var(--ink-50);
    color: var(--ink-500);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.8px;
    padding: 4px 14px;
    border-bottom: 1px solid var(--ink-200);
}

/* Headline figures bolded inside stat-table cells */
.news-table td strong {
    font-weight: 600;
    color: var(--ink);
}

/* Subject-column highlight in comparison tables (cell-level so the tint
   wins over zebra striping): the page's own product reads as "us vs the
   field". Tint follows the AI Mode hub accent. */
.news-table th.news-col-hl {
    background: #eee9f8;
}
.news-table td.news-col-hl {
    background: #f5f2fc;
}

/* ========================================================================
   Entry stream
   ======================================================================== */
.news-entries {
    margin-top: 10px;
}
.news-entry,
.news-index-item {
    background: #fff;
    border: 1px solid var(--ink-100);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-xs);
    padding: 18px 22px;
    margin: 0 0 14px;
}
/* Hub entries: calendar date chip on the left, content on the right. */
.news-entry {
    display: grid;
    grid-template-columns: 60px minmax(0, 1fr);
    gap: 4px 18px;
}
.news-entry-main {
    position: relative;
    min-width: 0;
}
.news-entry-datechip {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    align-self: start;
    width: 60px;
    padding: 8px 4px 7px;
    background: var(--ink-25);
    border: 1px solid var(--ink-100);
    border-radius: var(--r-sm);
    line-height: 1.15;
    text-align: center;
}
.news-entry-datechip-day {
    font-size: 21px;
    font-weight: 700;
    color: var(--ink);
}
.news-entry-datechip-my {
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    color: var(--ink-500);
    margin-top: 2px;
    white-space: nowrap;
}
.news-entry-head {
    display: flex;
    align-items: center;
    gap: 10px;
}
.news-entry .news-entry-head {
    margin-bottom: 6px;
}
.news-entry-head time {
    font-size: 13px;
    font-weight: 600;
    color: var(--ink-500);
    font-feature-settings: var(--tnum);
}
.news-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px 9px;
    border-radius: 999px;
    background: var(--ink-100);
    color: var(--ink-700);
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.3px;
}
.news-chip-dot {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
}
.news-anchor-link {
    position: absolute;
    top: 0;
    right: 0;
    padding: 2px 4px;
    color: var(--ink-300);
    font-weight: 600;
    text-decoration: none;
}
.news-entry:hover .news-anchor-link {
    color: var(--ink-400);
}
.news-anchor-link:hover {
    color: var(--brand-red) !important;
}
.news-anchor-link .news-icon {
    display: block;
}
/* Transient "Copied" bubble after the copy-link button (news.js). */
.news-anchor-link.is-copied::after {
    content: "Copied";
    position: absolute;
    right: calc(100% + 8px);
    top: 50%;
    transform: translateY(-50%);
    background: var(--ink);
    color: #fff;
    font-size: 11.5px;
    font-weight: 600;
    padding: 3px 9px;
    border-radius: 6px;
    white-space: nowrap;
}
.news-entry-title {
    margin: 0 0 6px !important;
    padding-right: 24px;
    font-size: 17px;
}
.news-entry-body p {
    margin: 8px 0;
    font-size: 14.5px;
}
.news-entry-body p:last-child {
    margin-bottom: 0;
}
.news-entry:target,
.news-index-item:target {
    border-color: var(--brand-red-light);
    box-shadow: 0 0 0 3px var(--brand-red-tint), var(--shadow-sm);
}

.news-ke-angle {
    background: var(--brand-red-soft);
    border-radius: var(--r-sm);
    padding: 10px 14px;
    margin: 12px 0 4px;
}
.news-ke-angle-label {
    display: block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.7px;
    text-transform: uppercase;
    color: var(--brand-red);
    margin-bottom: 4px;
}
.news-ke-angle p {
    margin: 4px 0;
    font-size: 14px;
}

.news-entry-foot {
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid var(--ink-100);
    font-size: 13px;
    color: var(--ink-500);
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
}
.news-entry-more {
    font-weight: 600;
}

.news-index-item h3 {
    margin: 8px 0 4px;
    font-size: 16px;
}
.news-index-item p {
    margin: 0;
    font-size: 14px;
    color: var(--ink-500);
}

/* Month labels breaking the stream into chapters */
.news-month-label {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 24px 0 10px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.9px;
    text-transform: uppercase;
    color: var(--ink-500);
}
.news-month-label::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--ink-200);
}
h2 + .news-month-label,
.news-filters + .news-month-label {
    margin-top: 10px;
}

/* Compact stream rows: one white card holding one-line rows. On hubs the
   rows are <details> that expand in place (and keep the entry id, so
   deep links work); on the index they are plain links to the entry. */
.news-entry-rows {
    background: #fff;
    border: 1px solid var(--ink-100);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-xs);
    margin: 0 0 14px;
    overflow: hidden;
}
.news-entry-row + .news-entry-row,
.news-index-row + .news-index-row,
.news-entry-row + .news-index-row,
.news-index-row + .news-entry-row {
    border-top: 1px solid var(--ink-100);
}
.news-entry-row > summary,
.news-index-row {
    display: flex;
    align-items: baseline;
    gap: 12px;
    padding: 10px 16px;
}
.news-entry-row > summary {
    cursor: pointer;
    list-style: none;
}
.news-entry-row > summary::-webkit-details-marker {
    display: none;
}
.news-entry-row > summary:hover,
.news-index-row:hover {
    background: var(--ink-25);
}
.news-entry-row > summary time,
.news-index-row time {
    flex: 0 0 66px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--ink-500);
    font-feature-settings: var(--tnum);
    white-space: nowrap;
}
.news-entry-row .news-chip,
.news-index-row .news-chip {
    flex-shrink: 0;
}
.news-entry-row-title,
.news-index-row-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--link);
    min-width: 0;
}
.news-entry-row > summary:hover .news-entry-row-title,
.news-index-row:hover .news-index-row-title {
    color: var(--link-dark);
}
.news-entry-row-caret {
    margin-left: auto;
    align-self: center;
    width: 8px;
    height: 8px;
    flex-shrink: 0;
    border-right: 2px solid var(--ink-400);
    border-bottom: 2px solid var(--ink-400);
    transform: rotate(45deg);
    transition: transform 0.15s ease;
}
.news-entry-row[open] > summary .news-entry-row-caret {
    transform: rotate(225deg);
}
@media (prefers-reduced-motion: reduce) {
    .news-entry-row-caret {
        transition: none;
    }
}
.news-entry-row-body {
    padding: 2px 16px 14px;
}
.news-entry-row-body p {
    font-size: 14.5px;
    margin: 8px 0;
}
.news-entry-row:target {
    background: var(--brand-red-tint);
}

/* Topic filter chips on the /news/ index (wired by news.js) */
.news-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 2px 0 16px;
}
.news-filter-chip,
.news-typefilter-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--ink-700);
    background: #fff;
    border: 1px solid var(--ink-200);
    border-radius: 999px;
    padding: 5px 14px;
    cursor: pointer;
}
.news-filter-chip:hover,
.news-typefilter-chip:hover {
    border-color: var(--ink-300);
}
.news-filter-chip:focus-visible,
.news-typefilter-chip:focus-visible {
    outline: 2px solid var(--link);
    outline-offset: 2px;
}
.news-filter-chip.is-on,
.news-typefilter-chip.is-on {
    background: var(--ink);
    border-color: var(--ink);
    color: #fff;
}
/* Type-filtered history tables: hidden rows must stay hidden even if a
   future rule gives tr a display value. */
.news-table tr[hidden] {
    display: none;
}

/* "New since your last visit": news.js adds .is-new to entries dated
   after the reader's previous visit (localStorage only). The badge rides
   after the title as an inline chip, so no layout shifts anywhere. */
.news-entry.is-new .news-entry-title::after,
.news-entry-row.is-new .news-entry-row-title::after,
.news-index-item.is-new h3::after,
.news-index-row.is-new .news-index-row-title::after {
    content: "New";
    display: inline-block;
    margin-left: 8px;
    padding: 1px 8px 2px;
    border-radius: 999px;
    background: var(--brand-red-soft);
    color: var(--brand-red);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    vertical-align: 1px;
}
/* The filter hides items with the hidden attribute; these classes set
   display, which would otherwise beat the UA's [hidden] rule. */
[data-hub][hidden],
.news-entry-rows[hidden],
.news-month-label[hidden] {
    display: none;
}

/* /news/archive/ intro line + the index's link into the archive */
.news-archive-intro {
    margin: 0 0 14px;
}
.news-archive-cta {
    margin: 18px 0 0;
    font-size: 14.5px;
    font-weight: 600;
}

/* Section search (index + archive), wired by news.js wireSearch(). The
   markup ships with [hidden]; news.js removes it when it wires up, so
   no-JS visitors never see a box that cannot search. */
.news-search {
    margin: 2px 0 16px;
}
.news-search-box {
    display: flex;
    align-items: center;
    gap: 9px;
    max-width: 560px;
    background: #fff;
    border: 1px solid var(--ink-200);
    border-radius: 10px;
    padding: 9px 14px;
    color: var(--ink-500);
}
.news-search-box:focus-within {
    border-color: var(--link);
    box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.12);
}
.news-search-box .news-icon {
    flex-shrink: 0;
}
.news-search-input {
    flex: 1;
    min-width: 0;
    border: 0;
    outline: 0;
    background: transparent;
    font-family: inherit;
    font-size: 14.5px;
    color: var(--ink-700);
    padding: 0;
}
.news-search-status {
    margin: 10px 0 8px;
    font-size: 13px;
    color: var(--ink-500);
}
.news-search-status:empty {
    display: none;
}
.news-search-results {
    list-style: none;
    margin: 0;
    padding: 0;
    background: #fff;
    border: 1px solid var(--ink-100);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-xs);
    overflow: hidden;
}
.news-search-results:empty {
    display: none;
}
.news-search-results li + li {
    border-top: 1px solid var(--ink-100);
}
.news-search-row {
    display: flex;
    align-items: baseline;
    gap: 12px;
    padding: 10px 16px;
}
.news-search-row:hover {
    background: var(--ink-25);
}
.news-search-row time {
    flex: 0 0 96px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--ink-500);
    white-space: nowrap;
}
.news-search-row .news-chip {
    flex-shrink: 0;
}
.news-search-row-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--link);
    min-width: 0;
}
.news-search-row:hover .news-search-row-title {
    color: var(--link-dark);
}
/* Explicit guards so a display rule can never beat the UA [hidden] rule
   (same class of bug as the lightbox and filter-chip rules). */
.news-search[hidden],
.news-search-out[hidden] {
    display: none;
}
@media (max-width: 640px) {
    .news-search-row {
        flex-wrap: wrap;
        gap: 6px 10px;
        padding: 10px 12px;
    }
    .news-search-row time {
        flex-basis: auto;
    }
    .news-search-row-title {
        flex: 1 1 100%;
    }
}

/* Archive of older entries */
.news-archive {
    margin-top: 18px;
}
.news-archive > summary {
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    color: var(--ink-500);
    padding: 10px 0;
}
.news-archive > summary:hover {
    color: var(--brand-red);
}
.news-archive[open] > summary {
    margin-bottom: 10px;
}

/* ========================================================================
   Evergreen sections, FAQ, timeline, sources
   ======================================================================== */
.news-section ul,
.news-section ol {
    padding-left: 22px;
}

/* Split section layout: heading, deck and key-fact card in a left rail,
   prose beside them at a readable measure. Table/chart sections opt out
   with 'wide' => true in the data file and render stacked as before. */
.news-section--split {
    display: grid;
    grid-template-columns: 264px minmax(0, 1fr);
    gap: 0 36px;
    margin: 44px 0;
}
.news-section--split .news-section-rail {
    position: sticky;
    /* Clears the sticky sub-nav. */
    top: 64px;
    align-self: start;
}
.news-section--split h2 {
    margin: 0 0 10px;
}
.news-section-deck {
    font-size: 14px !important;
    line-height: 1.55 !important;
    color: var(--ink-500);
    margin: 0 0 14px;
}
.news-section:not(.news-section--split) .news-section-deck {
    margin: -6px 0 14px;
}
.news-keyfact {
    background: #fff;
    border: 1px solid var(--ink-100);
    border-radius: var(--r);
    box-shadow: var(--shadow-xs);
    padding: 12px 14px;
}
.news-keyfact b {
    display: block;
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.4px;
    color: var(--ink);
    font-feature-settings: var(--tnum);
    margin-bottom: 2px;
}
.news-keyfact span {
    font-size: 13px;
    line-height: 1.45;
    color: var(--ink-700);
}
.news-section-body > :first-child {
    margin-top: 0;
}
.news-section-body p,
.news-section-body li {
    font-size: 16px;
    line-height: 1.7;
}
@media (max-width: 1000px) {
    .news-section--split {
        display: block;
        margin: 34px 0;
    }
    .news-section--split .news-section-rail {
        position: static;
        margin-bottom: 12px;
    }
    .news-keyfact {
        display: inline-block;
    }
}

/* ------------------------------------------------------------------------
   Prose furniture, dropped into section/entry HTML by the editor:
   .news-quote (sourced pull-quote), .news-callout (definition/caution
   box), .news-steps (numbered playbook cards). Emphasis comes from
   background tint, spacing and typography; no colored edge strips.
   ------------------------------------------------------------------------ */
blockquote.news-quote {
    position: relative;
    background: #fff;
    border: 1px solid var(--ink-100);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-xs);
    padding: 20px 26px 16px 60px;
    margin: 18px 0;
}
blockquote.news-quote::before {
    content: "\201C";
    position: absolute;
    left: 16px;
    top: 4px;
    font-size: 54px;
    font-weight: 700;
    line-height: 1;
    color: var(--brand-red);
    opacity: 0.35;
}
.news-quote p {
    font-size: 17px !important;
    line-height: 1.55 !important;
    color: var(--ink);
    margin: 0 0 8px;
}
.news-quote cite {
    display: block;
    font-style: normal;
    font-size: 13px;
    color: var(--ink-500);
}
/* Quote with the speaker's portrait (news-quote--person): the portrait
   replaces the big quotation mark on the left. Markup:
   <blockquote class="news-quote news-quote--person">
     <img class="news-quote-portrait" src="..." alt="" width="160" height="160">
     <p>...</p><cite>...</cite>
   </blockquote>
   The alt stays empty because the cite names the speaker. */
blockquote.news-quote--person {
    padding-left: 100px;
    min-height: 96px;
}
blockquote.news-quote--person::before {
    display: none;
}
.news-quote-portrait {
    position: absolute;
    left: 22px;
    top: 20px;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #fff;
    box-shadow: 0 0 0 1px var(--ink-100), var(--shadow-xs);
}
.news-callout {
    position: relative;
    background: var(--ink-50);
    border: 1px solid var(--ink-100);
    border-radius: var(--r);
    padding: 14px 18px 14px 50px;
    margin: 16px 0;
}
/* The "i" badge is drawn here so callouts stay plain HTML in the data files.
   It is positioned, NOT a flex sibling: a flex row made every direct child a
   column, so a two-paragraph callout laid its paragraphs out side by side
   (found 2026-07-29). Normal block flow means any number of paragraphs stacks
   and no inner wrapper div is needed. */
.news-callout::before {
    content: "i";
    position: absolute;
    top: 16px;
    left: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border: 1.5px solid var(--ink-300);
    border-radius: 50%;
    color: var(--ink-500);
    font-size: 11.5px;
    font-weight: 700;
    font-style: normal;
}
.news-callout > div {
    min-width: 0;
}
.news-callout p {
    font-size: 14.5px !important;
    line-height: 1.6 !important;
    margin: 0 0 8px;
}
.news-callout p:last-child,
.news-callout > div > p:last-child {
    margin-bottom: 0;
}
/* Captioned screenshot/figure card (product screenshots in the "what is"
   sections). Images are self-hosted (CSP img-src 'self'), lazy-loaded,
   and the caption carries a captured-on date so the page stays honest
   when the pictured UI drifts. */
figure.news-figure {
    background: #fff;
    border: 1px solid var(--ink-100);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-xs);
    padding: 10px;
    margin: 18px 0;
}
.news-figure img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--r-sm);
    border: 1px solid var(--ink-100);
}
.news-figure figcaption {
    font-size: 13px;
    line-height: 1.5;
    color: var(--ink-500);
    padding: 8px 6px 2px;
}
/* Portrait phone captures: cap at natural width (never upscale) and
   center in the text column. */
/* figure.news-figure above sets the margins with a higher specificity, so
   this selector carries the element too (centering never applied before
   6th Sep 2026). */
figure.news-figure--phone {
    max-width: 420px;
    margin-left: auto;
    margin-right: auto;
}
/* The image links to its full-size file; news.js upgrades the click to
   an in-page lightbox. */
.news-figure-link {
    display: block;
    cursor: zoom-in;
}
.news-figure-link:focus-visible {
    outline: 2px solid var(--link);
    outline-offset: 2px;
}

/* Full-size screenshot lightbox (built by news.js on first use). Sits
   above the page UI (sticky sub-nav 300) but below the cookie modal. */
/* display:flex would beat the UA's [hidden] rule, so restate it. */
.news-lightbox[hidden] {
    display: none;
}
.news-lightbox {
    position: fixed;
    inset: 0;
    z-index: 900;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 28px;
    background: rgba(20, 24, 29, 0.82);
    cursor: zoom-out;
    opacity: 0;
    transition: opacity 0.15s ease;
}
.news-lightbox.is-open {
    opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
    .news-lightbox {
        transition: none;
    }
}
.news-lightbox img {
    display: block;
    max-width: min(1400px, 100%);
    max-height: calc(100vh - 110px);
    width: auto;
    height: auto;
    border-radius: var(--r);
    background: #fff;
    box-shadow: var(--shadow-xl);
}
.news-lightbox figcaption {
    max-width: 900px;
    margin-top: 12px;
    font-size: 13px;
    line-height: 1.5;
    color: #d1d5db;
    text-align: center;
}
.news-lightbox-close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.14);
    color: #fff;
    font-size: 22px;
    line-height: 1;
    font-family: inherit;
    cursor: pointer;
}
.news-lightbox-close:hover {
    background: rgba(255, 255, 255, 0.26);
}
.news-lightbox-close:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}
@media (max-width: 640px) {
    .news-lightbox {
        padding: 14px;
    }
    .news-lightbox img {
        max-height: calc(100vh - 90px);
    }
}

ol.news-steps {
    list-style: none;
    margin: 16px 0;
    padding: 0;
    display: grid;
    gap: 10px;
    counter-reset: ke-step;
}
.news-steps > li {
    counter-increment: ke-step;
    display: flex;
    gap: 14px;
    background: #fff;
    border: 1px solid var(--ink-100);
    border-radius: var(--r);
    box-shadow: var(--shadow-xs);
    padding: 14px 18px;
}
.news-steps > li::before {
    content: counter(ke-step);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--brand-red-soft);
    color: var(--brand-red);
    font-size: 14px;
    font-weight: 700;
}
.news-steps h3 {
    margin: 2px 0 4px !important;
    font-size: 15px !important;
}
.news-steps p {
    font-size: 14px !important;
    line-height: 1.6 !important;
    margin: 0;
}

.news-faq-item {
    background: #fff;
    border: 1px solid var(--ink-100);
    border-radius: var(--r);
    padding: 14px 18px;
    margin-bottom: 10px;
}
.news-faq-item h3 {
    margin: 0 0 6px;
    font-size: 15.5px;
}
.news-faq-answer p {
    margin: 6px 0;
    font-size: 14.5px;
}

.news-timeline {
    list-style: none;
    margin: 0;
    padding: 0;
    border-left: 2px solid var(--ink-200);
}
.news-timeline li {
    position: relative;
    padding: 0 0 16px 20px;
}
.news-timeline li::before {
    content: "";
    position: absolute;
    left: -6px;
    top: 6px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--brand-red-light);
}
.news-timeline time {
    font-size: 13px;
    font-weight: 600;
    color: var(--ink-500);
    font-feature-settings: var(--tnum);
}
.news-timeline-body {
    font-size: 14.5px;
}
.news-timeline-body p {
    margin: 4px 0;
}

.news-sources-list li {
    font-size: 14px;
    padding: 2px 0;
}
.news-source-note {
    color: var(--ink-500);
}

/* Index "Guides and reference" block (2026-09-06): the topic pages, as a
   two-column list under the hub cards. */
.news-ref {
    margin: 28px 0 8px;
}
.news-ref h2 {
    font-size: 20px;
    margin: 0 0 10px;
}
.news-ref-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 24px;
}
.news-ref-list li {
    border: 1px solid var(--ink-100);
    border-radius: var(--r);
    padding: 12px 16px;
    background: #fff;
}
.news-ref-list a {
    font-weight: 600;
    display: block;
}
.news-ref-list span {
    display: block;
    color: var(--ink-500);
    font-size: 14px;
    margin-top: 3px;
}
/* Grouped since 6th Sep 2026 (visual pass v2): one column per group,
   each group a single-column list. */
.news-ref-groups {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px 24px;
}
.news-ref-group h3 {
    font-size: 15px;
    margin: 0 0 8px;
    color: var(--ink-700);
}
.news-ref-list--group {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
}
@media (max-width: 700px) {
    .news-ref-list,
    .news-ref-groups {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Topic pages (2026-09-06): the answer box at the top of a tracker topic is
   a callout with larger type; the link list is the compact dated list used
   for "entries of this year" blocks. Uniform border, no accent bars. */
.news-answer p {
    font-size: 17.5px;
    line-height: 1.6;
}
.news-linklist {
    list-style: none;
    margin: 0;
    padding: 0;
}
.news-linklist li {
    display: flex;
    gap: 12px;
    align-items: baseline;
    padding: 7px 0;
    border-bottom: 1px solid var(--ink-100);
    font-size: 15px;
}
.news-linklist li:last-child {
    border-bottom: 0;
}
.news-linklist time {
    flex: 0 0 auto;
    min-width: 108px;
    color: var(--ink-500);
    font-size: 13.5px;
    white-space: nowrap;
}
.news-linklist--rich li {
    padding: 10px 0;
}
.news-linklist--rich a {
    font-weight: 600;
}
.news-linklist-sub {
    display: block;
    color: var(--ink-500);
    font-size: 14px;
    margin-top: 2px;
}
.news-indepth .news-section-deck {
    margin-bottom: 6px;
}
.news-timeline-title {
    display: block;
    font-weight: 600;
}
.news-timeline-summary {
    display: block;
    margin-top: 4px;
    font-size: 15px;
    line-height: 1.55;
}

/* ========================================================================
   Graphics layer: inline SVG icons, key-numbers row, timeline strip
   (2026-07-08 design pass; palette CVD-validated, see includes/news.php)
   ======================================================================== */
.news-icon {
    flex-shrink: 0;
}
.news-faq > h2 {
    display: flex;
    align-items: center;
    gap: 8px;
}
.news-faq > h2 .news-icon {
    color: var(--brand-red);
}
.news-tip-box > .news-icon {
    vertical-align: -3px;
    margin-right: 4px;
    color: var(--ink-400);
}

/* Key-numbers row (stat tiles) under the meta line on hub pages. */
.news-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 12px;
    margin: 0 0 22px;
}
.news-stat {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--ink-100);
    border-radius: var(--r);
    box-shadow: var(--shadow-xs);
    padding: 14px 18px 12px;
}
.news-stat-value {
    font-size: 30px;
    font-weight: 600;
    letter-spacing: -0.5px;
    line-height: 1.1;
    color: var(--ink);
}
.news-stat-label {
    font-size: 13px;
    font-weight: 500;
    color: var(--ink-700);
    margin-top: 5px;
    line-height: 1.35;
}
.news-stat-sub {
    font-size: 12.5px;
    color: var(--ink-500);
    margin-top: 2px;
    line-height: 1.35;
}

/* Swimlane timeline strip above opted-in history tables. The SVG keeps a
   fixed 1000-unit viewBox and scales with the container; below 820px it
   scrolls horizontally like the tables do. */
.news-strip-wrap {
    background: #fff;
    border: 1px solid var(--ink-100);
    border-radius: var(--r);
    box-shadow: var(--shadow-xs);
    padding: 12px 16px 8px;
    margin: 12px 0 14px;
}
.news-strip-wrap figcaption {
    font-size: 13px;
    color: var(--ink-500);
    margin: 0 0 6px;
}
.news-strip-scroll {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
}
.news-strip {
    display: block;
    width: 100%;
    min-width: 820px;
    height: auto;
}
.news-strip text {
    font-family: inherit;
}
.news-strip-hit {
    cursor: pointer;
}
/* The child pages' duration-comparison chart is narrower than the decade
   strips; let it shrink further before scrolling. */
.news-strip--compact {
    min-width: 640px;
}
/* Floating tooltip for the strip dots (built by assets/js/news.js). */
.news-strip-tip {
    position: fixed;
    z-index: 200;
    pointer-events: none;
    background: var(--ink, #14181d);
    color: #fff;
    border-radius: 8px;
    padding: 7px 11px 8px;
    font-size: 12.5px;
    line-height: 1.45;
    max-width: 320px;
    box-shadow: var(--shadow-lg);
    opacity: 0;
    transition: opacity 0.12s ease;
}
.news-strip-tip.is-visible {
    opacity: 1;
}
.news-strip-tip strong {
    display: block;
    font-size: 13px;
}
.news-strip-tip span {
    color: var(--ink-300);
}

/* ========================================================================
   Page foot: byline, tip box, cite box, links
   ======================================================================== */
.news-page-foot {
    margin-top: 40px;
    padding-top: 18px;
    border-top: 1px solid var(--ink-200);
}
.news-byline {
    font-size: 14px;
    color: var(--ink-500);
    margin-bottom: 12px;
}
.news-tip-box {
    background: #fff;
    border: 1px dashed var(--ink-300);
    border-radius: var(--r);
    padding: 12px 16px;
    font-size: 14px;
    color: var(--ink-700);
    margin-bottom: 12px;
}
.news-cite-box {
    font-size: 13px;
    color: var(--ink-500);
    margin-bottom: 12px;
}
.news-cite-box code {
    display: block;
    margin-top: 6px;
    background: var(--ink-50);
    border: 1px solid var(--ink-100);
    border-radius: var(--r-sm);
    padding: 8px 12px;
    font-family: var(--mono);
    font-size: 12px;
    line-height: 1.6;
    color: var(--ink-700);
    cursor: pointer;
    word-break: break-word;
}
.news-cite-box code.is-copied {
    border-color: var(--good-fg);
    box-shadow: 0 0 0 3px var(--good-bg);
}
/* Inline code in prose is often a URL, a script src or an attribute string,
   none of which carry a natural break opportunity, so on a narrow screen it
   widens the page instead of wrapping. Found 21st Aug 2026: the Preferred
   Sources script tag pushed /ai-overviews/ 49px past a 390px viewport. Same
   treatment the cite box above already uses. */
.news-entry-body code,
.news-entry-row-body code,
.news-section code,
.news-section-body code,
.news-article-body code,
.news-timeline-body code,
.news-callout code {
    word-break: break-word;
}
/* ========================================================================
   Mobile (project convention: 640px and 420px)
   ======================================================================== */
/* ========================================================================
   Author bio card (/news/author/...)
   ======================================================================== */
.news-author-card {
    display: flex;
    gap: 18px;
    align-items: flex-start;
    background: #fff;
    border: 1px solid var(--ink-100);
    border-radius: var(--r);
    padding: 18px;
    margin: 14px 0 18px;
}
.news-author-card img {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}
.news-author-card p {
    margin: 0 0 10px;
}
.news-author-card p:last-child {
    margin-bottom: 0;
}
@media (max-width: 480px) {
    .news-author-card {
        flex-direction: column;
        align-items: center;
        text-align: left;
    }
}

@media (max-width: 640px) {
    /* The sub-nav's old horizontal-scroll fade hint lived here. It went
       with the scroll strip itself when the bar became a collapsing menu
       below 768px (see the sub-nav block at the top of this file). */
    .news-main {
        padding: 12px 0 44px;
    }
    .news-main h2 {
        font-size: 18px;
        margin-top: 26px;
    }
    .news-entry,
    .news-index-item {
        padding: 14px 16px;
    }
    .news-entry-title {
        font-size: 15.5px;
    }
    .news-table {
        font-size: 13px;
    }
    .news-table th,
    .news-table td {
        padding: 8px 10px;
    }
    .news-entry {
        grid-template-columns: 1fr;
        gap: 10px;
    }
    .news-entry-datechip {
        flex-direction: row;
        align-self: flex-start;
        width: auto;
        gap: 6px;
        padding: 3px 10px;
    }
    .news-entry-datechip-day {
        font-size: 13px;
    }
    .news-entry-datechip-my {
        margin-top: 0;
        font-size: 11px;
    }
    .news-stats {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }
    .news-stat {
        padding: 12px 14px 10px;
    }
    .news-stat-value {
        font-size: 24px;
    }
    .news-entry-row > summary,
    .news-index-row {
        flex-wrap: wrap;
        gap: 6px 10px;
        padding: 10px 12px;
    }
    .news-entry-row > summary time,
    .news-index-row time {
        flex-basis: 58px;
    }
    .news-entry-row-title,
    .news-index-row-title {
        flex: 1 1 100%;
        order: 3;
    }
    .news-entry-row-caret {
        order: 2;
    }
    .news-entry-row-body {
        padding: 2px 12px 12px;
    }
    blockquote.news-quote {
        padding: 16px 16px 14px 46px;
    }
    blockquote.news-quote::before {
        left: 10px;
        font-size: 42px;
    }
    blockquote.news-quote--person {
        padding-left: 74px;
        min-height: 0;
    }
    .news-quote-portrait {
        left: 14px;
        top: 16px;
        width: 46px;
        height: 46px;
    }
    .news-quote p {
        font-size: 15.5px !important;
    }
    .news-steps > li {
        padding: 12px 14px;
    }
}

@media (max-width: 420px) {
    .news-meta-line {
        gap: 6px;
    }
}

/* ========================================================================
   2026-08-02 design pass (CLAUDE.md decision 33). Emphasis via tint,
   spacing and typography only; no accent bars, no width changes.
   ======================================================================== */

/* The two live boxes (What changed / This week in search) are the only
   surfaces that change daily; a warm tint sets them apart from the
   white cards. */
.news-what-changed {
    background: #fdf7f4;
    border-color: #f0e0da;
}

/* The intro block is each page's lede: one step above body size. */
.news-intro p {
    font-size: 17.5px;
    line-height: 1.65;
}

/* Head band anchors the dense tables' columns. Year separator rows are
   labels, not data, so they keep their own background under the cursor
   (the tr:hover rule higher up would otherwise tint them). */
.news-table thead th {
    background: #f2f5f8;
}
.news-table tbody tr.news-year-row:hover {
    background: var(--ink-50);
}

/* Quiet three-dot seam between the big blocks (ke_news_render_sep). */
.news-sep {
    text-align: center;
    margin: 6px 0 30px;
}
.news-sep::before {
    content: "\2022\00a0\00a0\00a0\2022\00a0\00a0\00a0\2022";
    color: var(--ink-300);
    font-size: 12px;
    letter-spacing: 2px;
}

/* Byline avatar (config site.author.photo; markup wraps the text in a
   span so the flex row can align them). */
.news-byline--avatar {
    display: flex;
    align-items: center;
    gap: 14px;
}
.news-byline-avatar {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    box-shadow: var(--shadow-sm);
}

/* Foot links as pill buttons; the flex gap separates them (the old
   middot separators are gone from the renderers). */

/* Entry cards raise one shadow step under the cursor, echoing the hub
   cards (shadow only, no translate: the cards are not links). */
.news-entry,
.news-index-item {
    transition: box-shadow 0.15s ease;
}
.news-entry:hover,
.news-index-item:hover {
    box-shadow: var(--shadow-md);
}
@media (prefers-reduced-motion: reduce) {
    .news-entry,
    .news-index-item,
    .news-hub-card {
        transition: none;
    }
    .news-hub-card:hover {
        transform: none;
    }
}

/* Hub-card activity strip (ke_news_render_hub_activity): a micro version
   of the timeline strips, one dot per entry of the trailing 90 days.
   Dots are centered on their time position (margin-left -3px), so the
   endpoints never spill past the card padding by more than 3px. */
.news-hub-card-strip {
    display: block;
    margin: 10px 0 8px;
}
.news-hub-card-line {
    position: relative;
    display: block;
    height: 12px;
}
.news-hub-card-line::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 5.5px;
    height: 1px;
    background: #e5e9ee;
}
.news-hub-card-line i {
    position: absolute;
    top: 3px;
    width: 6px;
    height: 6px;
    margin-left: -3px;
    border-radius: 50%;
}
.news-hub-card-strip-label {
    display: block;
    margin-top: 4px;
    font-size: 11.5px;
    color: var(--ink-500);
}

/* Archive filter chips carry the per-topic entry count (2026-09-02). */
.news-chip-count { opacity: .7; font-variant-numeric: tabular-nums; }

/* ========================================================================
   Visual pass v2 (6th Sep 2026). Previewed on the AI Mode hub behind a
   'design' => 'v2' flag, approved by the user the same evening and rolled
   out site-wide by dropping the scoping. --hub-accent and its two
   white mixes are the Keywords Everywhere brand red, set on :root below
   (the registry accents only colour hub-card icons and index chips).
   Emphasis is tint, spacing and typography; no accent bars; the prose
   keeps its full width (banded sections extend past the column by the
   same distance they pad, so text stays aligned).
   ======================================================================== */
:root {
    --hub-accent: #a63534;
    --hub-accent-soft: #daaaaa;
    --hub-accent-tint: #f9f1f1;
}

/* Hero band: a faint wash of the accent (the brand red) behind the title. */
.page-hero {
    background: linear-gradient(180deg, var(--hub-accent-tint, #fdecec) 0%, #fff 100%);
}

/* Body copy near-black; decks, captions and metadata keep ink-500. */
p,
li,
td {
    color: #1f2731;
}
.news-section-deck,
.news-figure figcaption,
.news-map figcaption,
.news-diagram figcaption,
.news-quote cite,
.news-stat-sub,
.news-crumbs {
    color: var(--ink-500);
}

/* No left rail in v2 (user, 6th Sep 2026: the rail's quarter of the page
   "gets wasted"). Split sections stack like the wide ones: heading, deck,
   the key-fact card as a compact inline tile, then the prose at the full
   width of the column. */
.news-section--split {
    display: block;
}
.news-section--split .news-section-rail {
    position: static;
    margin-bottom: 14px;
}
.news-section--split .news-section-deck {
    margin-bottom: 12px;
}
.news-keyfact {
    display: block;
    background: var(--hub-accent-tint, #fff);
    border-color: var(--hub-accent-soft, var(--ink-100));
    box-shadow: none;
}

/* The What-changed box loses its warm tint in v2 (user, 6th Sep 2026). */
.news-what-changed {
    background: #fff;
    border-color: var(--ink-100);
}

/* Lede: the first paragraph of every section one step up. */
.news-section-body > p:first-child,
.news-section:not(.news-section--split) > .news-section-deck + p,
.news-section:not(.news-section--split) > .news-section-deck + .news-map + p {
    font-size: 18.5px;
    line-height: 1.6;
    color: var(--ink);
}

/* Banded sections: every second section sits on an ink-50 panel that
   reaches 20px past the column on both sides, so its text stays on the
   same left edge as the sections around it. The three-dot seams retire. */
.news-sep {
    display: none;
}
.news-layout-main > section.news-section {
    margin: 0;
    padding: 36px 20px;
    margin-left: -20px;
    margin-right: -20px;
    border-radius: 16px;
}
.news-layout-main > section.news-section:nth-of-type(even) {
    background: var(--ink-50);
}
.news-layout-main > section.news-section--split {
    margin-top: 0;
    margin-bottom: 0;
}
.news-layout-main > section.news-section > h2:first-child,
.news-layout-main > section.news-section--split .news-section-rail h2 {
    margin-top: 0;
}
.news-main h2 {
    font-size: 22px;
}

/* Hub accent on the figures that already carry the page's key numbers. */
.news-stat-value,
.news-keyfact b,
.news-fig b {
    color: var(--hub-accent, var(--ink));
}
.news-stat {
    background: var(--hub-accent-tint, #fff);
    border-color: var(--hub-accent-soft, var(--ink-100));
    box-shadow: none;
}
blockquote.news-quote::before {
    color: var(--hub-accent, var(--brand-red));
    opacity: 0.45;
}

/* Inline key figures: a row of small tiles beside the paragraph that
   states the numbers (each figure restates a sourced claim on the page). */
.news-figrow {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 12px;
    margin: 18px 0;
}
.news-fig {
    background: #fff;
    border: 1px solid var(--ink-100);
    border-radius: var(--r);
    box-shadow: var(--shadow-xs);
    padding: 12px 14px 10px;
}
.news-fig b {
    display: block;
    font-size: 26px;
    font-weight: 700;
    letter-spacing: -0.4px;
    line-height: 1.1;
    font-feature-settings: var(--tnum);
}
.news-fig span {
    display: block;
    font-size: 13px !important;
    line-height: 1.45 !important;
    color: var(--ink-700);
    margin-top: 4px;
}
.news-fig small {
    display: block;
    font-size: 12px;
    color: var(--ink-500);
    margin-top: 2px;
}

/* Two-card comparison (free vs paid, and the like). */
.news-compare {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 14px;
    margin: 18px 0;
}
.news-compare > div {
    background: #fff;
    border: 1px solid var(--ink-100);
    border-radius: var(--r);
    box-shadow: var(--shadow-xs);
    padding: 14px 16px 12px;
}
.news-compare h3 {
    margin: 0 0 8px !important;
    font-size: 15px !important;
}
.news-compare ul {
    margin: 0;
    padding-left: 18px;
}
.news-compare li {
    font-size: 15px !important;
    line-height: 1.55 !important;
    margin: 4px 0;
}

/* Four-column tables with a notes column (date, event, type, notes; or
   subject, status, since, notes) render as two-line rows: the notes go
   under the row instead of into a narrow wrapping column. The header row
   stays in the DOM for screen readers. */
.news-table--notes,
.news-table--notes tbody {
    display: block;
}
.news-table--notes thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}
.news-table--notes tbody tr {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    column-gap: 14px;
    align-items: start;
    padding: 11px 14px;
    border-bottom: 1px solid var(--ink-100);
}
.news-table--notes tbody tr[hidden] {
    display: none;
}
.news-table--notes tbody tr.news-year-row {
    display: block;
    padding: 6px 14px;
}
.news-table--notes tbody tr:last-child {
    border-bottom: 0;
}
.news-table--notes td {
    padding: 0;
    border: 0;
    white-space: normal;
}
.news-table--notes td:nth-child(1) {
    grid-column: 1;
    grid-row: 1;
    white-space: nowrap;
    color: var(--ink-500);
    font-size: 13.5px;
    padding-top: 2px;
}
.news-table--notes td:nth-child(2) {
    grid-column: 2;
    grid-row: 1;
    font-size: 15px;
    font-weight: 500;
}
.news-table--notes td:nth-child(3) {
    grid-column: 3;
    grid-row: 1;
}
.news-table--notes td:nth-child(4) {
    grid-column: 2 / 4;
    grid-row: 2;
    font-size: 13.5px;
    color: var(--ink-500);
    margin-top: 3px;
}
/* Subject-first variant (availability tables): the subject is the row's
   title, the status chip sits beside it and the date on the right. */
.news-table--status tbody tr {
    /* fit-content caps a long text status ("Web, Google app, Chrome ...")
       so it wraps instead of pushing the subject column to nothing. */
    grid-template-columns: minmax(0, 1fr) fit-content(340px) auto;
}
.news-table--status td:nth-child(1) {
    grid-column: 1;
    white-space: normal;
    color: var(--ink);
    font-size: 15px;
    font-weight: 500;
    padding-top: 0;
}
.news-table--status td:nth-child(2) {
    grid-column: 2;
    font-size: 13.5px;
    font-weight: 400;
}
.news-table--status td:nth-child(3) {
    grid-column: 3;
    color: var(--ink-500);
    font-size: 13.5px;
    white-space: nowrap;
    padding-top: 2px;
}
.news-table--status td:nth-child(4) {
    grid-column: 1 / 4;
}
/* Six-column variant (the Google update table, and the topic pages built
   on it): started date, update, type and duration on the first line; the
   completed date under the started one, the notes under the update. */
.news-table--updates,
.news-table--updates tbody {
    display: block;
}
.news-table--updates thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}
.news-table--updates tbody tr {
    display: grid;
    /* Each row is its own grid, so the badge and duration columns carry
       minimum widths to line up across rows. */
    grid-template-columns: auto minmax(0, 1fr) minmax(112px, auto) minmax(150px, auto);
    column-gap: 14px;
    align-items: start;
    padding: 11px 14px;
    border-bottom: 1px solid var(--ink-100);
}
.news-table--updates tbody tr[hidden] {
    display: none;
}
.news-table--updates tbody tr.news-year-row {
    display: block;
    padding: 6px 14px;
}
.news-table--updates tbody tr:last-child {
    border-bottom: 0;
}
.news-table--updates td {
    padding: 0;
    border: 0;
    white-space: normal;
}
.news-table--updates td:nth-child(1),
.news-table--updates td:nth-child(2) {
    grid-column: 1;
    white-space: nowrap;
    color: var(--ink-500);
    font-size: 13.5px;
}
.news-table--updates td:nth-child(1) {
    grid-row: 1;
    padding-top: 2px;
}
.news-table--updates td:nth-child(2) {
    grid-row: 2;
    margin-top: 3px;
}
/* The hidden header no longer labels the second date, so the cell says
   what it is. */
.news-table--updates td:nth-child(2)::before {
    content: "to ";
}
.news-table--updates td:nth-child(3) {
    grid-column: 2;
    grid-row: 1;
    font-size: 15px;
    font-weight: 500;
}
.news-table--updates td:nth-child(4) {
    grid-column: 3;
    grid-row: 1;
}
.news-table--updates td:nth-child(5) {
    grid-column: 4;
    grid-row: 1;
    font-size: 13.5px;
    color: var(--ink-500);
    padding-top: 2px;
}
.news-table--updates td:nth-child(6) {
    grid-column: 2 / 5;
    grid-row: 2;
    font-size: 13.5px;
    color: var(--ink-500);
    margin-top: 3px;
}
@media (max-width: 640px) {
    .news-table--notes tbody tr {
        grid-template-columns: minmax(0, 1fr) auto;
    }
    .news-table--notes td:nth-child(1) {
        grid-column: 1;
        grid-row: 1;
    }
    .news-table--notes td:nth-child(3) {
        grid-column: 2;
        grid-row: 1;
    }
    .news-table--notes td:nth-child(2) {
        grid-column: 1 / 3;
        grid-row: 2;
        margin-top: 4px;
    }
    .news-table--notes td:nth-child(4) {
        grid-column: 1 / 3;
        grid-row: 3;
    }
    .news-table--status td:nth-child(1) {
        grid-column: 1;
        grid-row: 1;
    }
    .news-table--status td:nth-child(2) {
        grid-column: 2;
        grid-row: 1;
        margin-top: 0;
    }
    .news-table--status td:nth-child(3) {
        grid-column: 1 / 3;
        grid-row: 2;
    }
    .news-table--status td:nth-child(4) {
        grid-column: 1 / 3;
        grid-row: 3;
    }
    .news-table--updates tbody tr {
        grid-template-columns: auto minmax(0, 1fr) auto;
    }
    .news-table--updates td:nth-child(3) {
        grid-column: 2 / 4;
        grid-row: 1;
    }
    .news-table--updates td:nth-child(4) {
        grid-column: 2;
        grid-row: 2;
        margin-top: 3px;
    }
    .news-table--updates td:nth-child(5) {
        grid-column: 3;
        grid-row: 2;
        margin-top: 3px;
    }
    .news-table--updates td:nth-child(6) {
        grid-column: 2 / 4;
        grid-row: 3;
    }
}

/* Bar chart (ke_news_render_bars): one hue, thin marks rounded at the
   data end, values in ink, a faint track as the only grid. The table it
   sits above is the accessible view. */
.news-bars {
    margin: 0 0 18px;
}
.news-bars-plot {
    display: grid;
    grid-template-columns: minmax(120px, max-content) minmax(0, 1fr) max-content;
    column-gap: 12px;
    row-gap: 8px;
    align-items: center;
}
.news-bar {
    display: contents;
}
.news-bar-label {
    font-size: 13.5px;
    line-height: 1.35;
    color: var(--ink-700);
    text-align: right;
}
.news-bar-track {
    display: block;
    height: 12px;
    background: var(--ink-50);
    border-radius: 0 4px 4px 0;
    overflow: hidden;
}
.news-bar-track i {
    display: block;
    height: 100%;
    min-width: 2px;
    background: var(--hub-accent, var(--brand-red));
    border-radius: 0 4px 4px 0;
}
.news-bar-value {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--ink);
    font-feature-settings: var(--tnum);
    white-space: nowrap;
}
.news-bars figcaption {
    font-size: 13px;
    line-height: 1.5;
    color: var(--ink-500);
    margin-top: 10px;
}
@media (max-width: 640px) {
    .news-bars-plot {
        grid-template-columns: minmax(0, 1fr) max-content;
        row-gap: 4px;
    }
    .news-bar-label {
        grid-column: 1 / 3;
        text-align: left;
        margin-top: 6px;
    }
}

/* World availability map (ke_news_render_world_map). Two accent steps
   plus gray; the legend text and each path's <title> carry the meaning,
   so colour never works alone. */
.news-map {
    background: #fff;
    border: 1px solid var(--ink-100);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-xs);
    padding: 14px 14px 10px;
    margin: 16px 0 22px;
}
.news-map svg {
    display: block;
    width: 100%;
    height: auto;
}
.news-map path {
    fill: var(--ink-200);
    stroke: #fff;
    stroke-width: 0.7;
}
.news-map path.g1 {
    fill: var(--hub-accent, #4a3aa7);
}
.news-map path.g2 {
    fill: var(--hub-accent-soft, #b7b0e0);
}
.news-map path:hover {
    stroke: var(--ink);
    stroke-width: 1.2;
}
.news-map-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 18px;
    padding: 10px 2px 0;
    font-size: 13px;
    color: var(--ink-700);
}
.news-map-legend i {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 3px;
    margin-right: 6px;
    vertical-align: -1px;
    background: var(--ink-200);
}
.news-map-legend i.g1 {
    background: var(--hub-accent, #4a3aa7);
}
.news-map-legend i.g2 {
    background: var(--hub-accent-soft, #b7b0e0);
}
.news-map-legend b {
    font-weight: 600;
    color: var(--ink);
    font-feature-settings: var(--tnum);
}
.news-map figcaption {
    font-size: 13px;
    line-height: 1.5;
    color: var(--ink-500);
    padding: 8px 2px 2px;
}

/* Mechanism diagram card (ke_news_render_fanout_diagram). */
.news-diagram {
    background: #fff;
    border: 1px solid var(--ink-100);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-xs);
    padding: 14px 14px 10px;
    margin: 18px 0;
}
.news-diagram svg {
    display: block;
    width: 100%;
    height: auto;
    font-family: inherit;
}
.news-diagram rect.box {
    fill: #fff;
    stroke: var(--ink-300);
    stroke-width: 1;
}
.news-diagram rect.acc {
    fill: var(--hub-accent-tint, #f6f5fb);
    stroke: var(--hub-accent, #4a3aa7);
}
.news-diagram text {
    font-size: 13px;
    fill: var(--ink);
}
.news-diagram text.lbl {
    font-size: 12px;
    font-weight: 600;
    fill: var(--ink-500);
    letter-spacing: 0.3px;
}
.news-diagram text.note {
    font-size: 12px;
    fill: var(--ink-500);
}
.news-diagram path.ln {
    fill: none;
    stroke: var(--hub-accent-soft, #b7b0e0);
    stroke-width: 1.5;
}
.news-diagram figcaption {
    font-size: 13px;
    line-height: 1.5;
    color: var(--ink-500);
    padding: 8px 2px 2px;
}
@media (max-width: 640px) {
    .news-diagram svg {
        min-width: 560px;
    }
    .news-diagram {
        overflow-x: auto;
    }
}