/* ==========================================================================
   Cloud ASN Risk Watchlist

   Loaded only on pages running [asn_risk_watchlist]. Reuses the visual language
   the registry reference established rather than introducing a third one: the
   same ink, hairline, wash and Montserrat, the same white pill and shadow from
   the search bar.

   The tier palette is the one piece of new encoding, and it is ordered by how
   much the reader should trust an ASN-only match. T1 is the loudest, T4 is
   nearly silent, and that is deliberate: T4 is 549 of the 1,130 rows and is
   disabled by default, so a design that made it look urgent would be arguing
   against what the data says.

   The false-positive column runs the other way round. A Very High FP risk is
   the warning, so it gets the amber, while a Low FP risk is unremarkable and
   gets nothing. Tier says how bad it is; FP risk says how likely you are to be
   wrong about it, and they are not the same axis.
   ========================================================================== */

.et-asn {
    --asn-ink: #1B1E3B;
    --asn-ink-soft: #515151;
    --asn-navy: #31347C;
    --asn-blue: #0072BC;
    --asn-violet: #3E1597;
    --asn-hair: #E3E6F0;
    --asn-wash: #F6F7FB;
    --asn-muted: #6B7189;
    --asn-deep: #03061A;

    /* Tier, ordered by how far an ASN-only match gets you. */
    --asn-t1: #A4123F;
    --asn-t2: #B4530A;
    --asn-t3: #31347C;
    --asn-t4: #6B7189;

    --asn-warn: #8A5200;
    --asn-warn-bg: #FFF6E3;

    font-family: "Montserrat", sans-serif;
    color: var(--asn-ink);
    font-size: 16px;
    line-height: 1.6;
}

.et-asn *,
.et-asn *::before,
.et-asn *::after {
    box-sizing: border-box;
}

/* The component owns this rather than inheriting the parent theme's
   .screen-reader-text, for the reason the registry stylesheet records: outside
   a Twenty Seventeen template the inherited rule does not apply and the
   visually-hidden captions and labels render as visible text. */
.et-asn .screen-reader-text {
    position: absolute !important;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* A class-level display beats the user-agent's [hidden] { display: none }, so
   anything given a display here has to opt back out explicitly or the hidden
   attribute silently stops working. The filter hides rows with that attribute,
   so this is what keeps it functional. */
.et-asn [hidden],
.et-asn__row[hidden],
.et-asn__empty[hidden] {
    display: none !important;
}

/* ---------------------------------------------------------------- counts */

.et-asn__asof {
    margin: 0 0 18px;
    font-size: 14px;
    color: var(--asn-muted);
}

.et-asn__asof time {
    font-weight: 600;
    color: var(--asn-ink);
}

.et-asn__metrics {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 12px;
    margin: 0 0 28px;
    padding: 0;
    list-style: none;
}

.et-asn__metric {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 16px 18px;
    background: #FFF;
    border: 1px solid var(--asn-hair);
    border-radius: 10px;
    box-shadow: 0 1px 2px rgba(27, 30, 59, 0.05);
}

.et-asn__metric-value {
    font-size: 30px;
    font-weight: 700;
    line-height: 1.1;
    color: var(--asn-navy);
    /* Tabular figures so a column of counts lines up. */
    font-variant-numeric: tabular-nums;
}

.et-asn__metric-label {
    font-size: 14px;
    font-weight: 600;
}

.et-asn__metric-note {
    font-size: 12.5px;
    line-height: 1.45;
    color: var(--asn-muted);
}

/* ----------------------------------------------------------------- tables */

/* Wide tables scroll inside their own box rather than forcing the page sideways.
   tabindex is added by the script so a keyboard user can reach the scroll area,
   which a plain overflow container does not give them. */
.et-asn__scroller {
    overflow-x: auto;
    border: 1px solid var(--asn-hair);
    border-radius: 10px;
    background: #FFF;
    -webkit-overflow-scrolling: touch;

    /* A table that still overflows on a narrow screen should say so. Two
       background layers pinned to the right edge: a white cover that sits flush
       when the box is scrolled to the end, and a shadow underneath it that shows
       through only while there is more to the right. background-attachment:local
       is what moves the cover with the content and leaves the shadow behind. */
    background-image:
        linear-gradient(to left, #FFF, #FFF),
        linear-gradient(to left, rgba(27, 30, 59, 0.30), rgba(27, 30, 59, 0));
    background-position: right center, right center;
    background-repeat: no-repeat;
    background-size: 30px 100%, 26px 100%;
    background-attachment: local, scroll;
}

.et-asn__scroller:focus-visible {
    outline: 2px solid var(--asn-blue);
    outline-offset: 2px;
}

.et-asn__table {
    width: 100%;
    margin: 0;
    border-collapse: collapse;
    font-size: 14px;
}

.et-asn__table th,
.et-asn__table td {
    padding: 10px 12px;
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid var(--asn-hair);
}

.et-asn__table thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--asn-deep);
    color: #FFF;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: nowrap;
}

.et-asn__table tbody tr:last-child th,
.et-asn__table tbody tr:last-child td {
    border-bottom: 0;
}

.et-asn__table tbody tr:hover {
    background: var(--asn-wash);
}

.et-asn__num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.et-asn__table--tiers td,
.et-asn__table--tiers th {
    font-size: 13.5px;
}

/* ------------------------------------------------------------------ pills */

.et-asn__pill {
    display: inline-block;
    padding: 2px 9px;
    border-radius: 999px;
    background: var(--asn-t4);
    color: #FFF;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.03em;
    white-space: nowrap;
}

.et-asn__pill--t1 { background: var(--asn-t1); }
.et-asn__pill--t2 { background: var(--asn-t2); }
.et-asn__pill--t3 { background: var(--asn-t3); }
.et-asn__pill--t4 { background: var(--asn-t4); }

/* FP risk is the inverse axis: the warning is being likely to be wrong, so only
   the high end is marked. Colour alone never carries it, the text is always
   there. */
.et-asn__fp {
    font-size: 13px;
    white-space: nowrap;
}

.et-asn__fp[data-fp="very-high"],
.et-asn__fp[data-fp="high-to-very-high"],
.et-asn__fp[data-fp="critical"] {
    color: var(--asn-warn);
    font-weight: 600;
}

.et-asn__fp[data-fp="high"],
.et-asn__fp[data-fp="medium-high"] {
    color: var(--asn-warn);
}

/* ---------------------------------------------------------------- toolbar */

.et-asn__toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin: 0 0 14px;
}

.et-asn__search {
    flex: 1 1 260px;
    min-width: 0;
}

.et-asn__q {
    width: 100%;
    padding: 11px 16px;
    border: 1px solid var(--asn-hair);
    border-radius: 999px;
    background: #FFF;
    box-shadow: 0 1px 3px rgba(27, 30, 59, 0.07);
    font-family: inherit;
    font-size: 15px;
    color: var(--asn-ink);
    /* 16px or larger stops iOS zooming the page on focus. */
}

.et-asn__q:focus {
    outline: 2px solid var(--asn-blue);
    outline-offset: 1px;
}

.et-asn__tierfilter {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.et-asn__check {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    user-select: none;
}

/* The checkbox stays in the accessibility tree and keeps its native keyboard
   behaviour. Dimming the pill is the visual state, which is why opacity is used
   rather than hiding anything. */
.et-asn__check input {
    margin: 0;
    cursor: pointer;
}

.et-asn__check input:not(:checked) + .et-asn__pill {
    opacity: 0.35;
}

.et-asn__check input:focus-visible + .et-asn__pill {
    outline: 2px solid var(--asn-blue);
    outline-offset: 2px;
}

.et-asn__count {
    margin: 0;
    font-size: 13px;
    color: var(--asn-muted);
    font-variant-numeric: tabular-nums;
}

.et-asn__empty {
    margin: 16px 0 0;
    padding: 14px 16px;
    background: var(--asn-wash);
    border: 1px solid var(--asn-hair);
    border-radius: 8px;
    font-size: 14px;
    color: var(--asn-ink-soft);
}

/* ---------------------------------------------------------------- preview */

.et-asn__asn code {
    padding: 2px 6px;
    background: var(--asn-wash);
    border-radius: 4px;
    font-size: 12.5px;
    font-weight: 600;
    white-space: nowrap;
}

.et-asn__network {
    min-width: 180px;
    max-width: 260px;
}

.et-asn__family {
    display: block;
    margin-top: 2px;
    font-size: 12px;
    color: var(--asn-muted);
}

/* The network type sits under the name now rather than in its own column.
   Seven columns measured 981px inside a 902px content area, so the table was
   clipped at the right edge on an ordinary desktop and the false-positive risk,
   which is the column a reader most needs, was the part that fell off. */
.et-asn__type {
    display: block;
    margin-top: 2px;
    font-size: 11.5px;
    letter-spacing: 0.01em;
    color: var(--asn-muted);
}

.et-asn__country {
    font-size: 13px;
    white-space: nowrap;
}

.et-asn__country abbr {
    text-decoration: none;
    border-bottom: 1px dotted var(--asn-hair);
    cursor: help;
}

.et-asn__cc {
    font-size: 11.5px;
    font-weight: 600;
    color: var(--asn-muted);
}

.et-asn__evidence {
    min-width: 200px;
    max-width: 400px;
}

.et-asn__detail summary {
    cursor: pointer;
    font-size: 13px;
    color: var(--asn-blue);
}

.et-asn__detail summary:focus-visible {
    outline: 2px solid var(--asn-blue);
    outline-offset: 2px;
}

.et-asn__detail[open] summary {
    margin-bottom: 8px;
    font-weight: 600;
    color: var(--asn-ink);
}

.et-asn__mix {
    font-size: 12.5px;
    color: var(--asn-ink-soft);
    min-width: 170px;
}

/* ------------------------------------------------------------------ facts */

.et-asn__facts {
    margin: 0;
    font-size: 13.5px;
}

.et-asn__fact {
    display: grid;
    grid-template-columns: minmax(130px, 170px) 1fr;
    gap: 4px 14px;
    padding: 6px 0;
    border-top: 1px solid var(--asn-hair);
}

.et-asn__fact:first-child {
    border-top: 0;
    padding-top: 0;
}

.et-asn__fact dt {
    margin: 0;
    font-weight: 600;
    color: var(--asn-muted);
    font-size: 12.5px;
}

.et-asn__fact dd {
    margin: 0;
    line-height: 1.55;
}

/* ------------------------------------------------- detections and queries */

.et-asn__detections {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 14px;
}

.et-asn__detection,
.et-asn__query,
.et-asn__feed {
    padding: 18px 20px;
    background: #FFF;
    border: 1px solid var(--asn-hair);
    border-radius: 10px;
}

.et-asn__detection-title,
.et-asn__query-title,
.et-asn__feed-title {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 10px;
    margin: 0 0 12px;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.35;
}

.et-asn__priority,
.et-asn__platform {
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--asn-wash);
    color: var(--asn-muted);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    white-space: nowrap;
}

.et-asn__priority--critical {
    background: var(--asn-t1);
    color: #FFF;
}

.et-asn__priority--high {
    background: var(--asn-t2);
    color: #FFF;
}

.et-asn__query {
    margin-bottom: 16px;
}

/* An anchored query would otherwise land under the sticky table header. */
.et-asn__query {
    scroll-margin-top: 24px;
}

.et-asn__query-intent {
    margin: 0 0 14px;
    font-size: 14.5px;
    line-height: 1.6;
    color: var(--asn-ink-soft);
}

.et-asn__facts--query {
    margin-top: 14px;
}

/* ---------------------------------------------------------------- snippet */

.et-asn__snippet {
    border: 1px solid var(--asn-hair);
    border-radius: 8px;
    overflow: hidden;
}

.et-asn__snippet-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 7px 10px 7px 14px;
    background: var(--asn-wash);
    border-bottom: 1px solid var(--asn-hair);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--asn-muted);
}

.et-asn__copy {
    padding: 5px 13px;
    border: 1px solid var(--asn-hair);
    border-radius: 999px;
    background: #FFF;
    font-family: inherit;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--asn-navy);
    cursor: pointer;
}

.et-asn__copy:hover {
    border-color: var(--asn-blue);
    color: var(--asn-blue);
}

.et-asn__copy:focus-visible {
    outline: 2px solid var(--asn-blue);
    outline-offset: 2px;
}

.et-asn__copy.is-copied {
    background: var(--asn-navy);
    border-color: var(--asn-navy);
    color: #FFF;
}

.et-asn__snippet pre {
    margin: 0;
    padding: 14px 16px;
    overflow-x: auto;
    background: var(--asn-deep);
    color: #E8EAF6;
    font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
    font-size: 12.5px;
    line-height: 1.55;
    /* The query is whitespace-significant and the comments are wrapped to width
       already, so it scrolls rather than wrapping. A reflowed KQL comment reads
       as a broken query. */
    white-space: pre;
    tab-size: 4;
}

.et-asn__snippet pre code {
    padding: 0;
    background: none;
    color: inherit;
    font-size: inherit;
}

/* ------------------------------------------------------- feeds and sources */

.et-asn__feeds {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 14px;
}

.et-asn__feed-title a {
    color: var(--asn-navy);
}

.et-asn__sources {
    margin: 0;
    padding-left: 1.4em;
    font-size: 13.5px;
}

.et-asn__source {
    padding: 8px 0;
    border-bottom: 1px solid var(--asn-hair);
    line-height: 1.55;
}

.et-asn__source:last-child {
    border-bottom: 0;
}

.et-asn__source-id {
    display: inline-block;
    min-width: 42px;
    font-weight: 700;
    color: var(--asn-violet);
    font-size: 12px;
}

.et-asn__source-pub {
    font-weight: 600;
}

.et-asn__source-meta,
.et-asn__source-limit {
    display: block;
    font-size: 12.5px;
    color: var(--asn-muted);
}

.et-asn__source-limit {
    margin-top: 3px;
    padding-left: 10px;
    border-left: 2px solid var(--asn-warn);
    color: var(--asn-warn);
}

/* -------------------------------------------------------------- downloads */

.et-asn__files {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
    gap: 12px;
    margin: 0 0 16px;
    padding: 0;
    list-style: none;
}

.et-asn__file {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 15px 18px;
    background: #FFF;
    border: 1px solid var(--asn-hair);
    border-radius: 10px;
}

.et-asn__file-link {
    font-size: 15px;
    font-weight: 700;
    color: var(--asn-navy);
    text-decoration: none;
}

.et-asn__file-link:hover,
.et-asn__file-link:focus {
    color: var(--asn-blue);
    text-decoration: underline;
}

.et-asn__file-meta {
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--asn-muted);
}

.et-asn__file-note {
    font-size: 12.5px;
    line-height: 1.45;
    color: var(--asn-ink-soft);
}

.et-asn__licence {
    margin: 0;
    font-size: 12.5px;
    color: var(--asn-muted);
}

/* -------------------------------------------------------------- changed */

.et-asn__changed {
    padding: 18px 20px;
    background: var(--asn-wash);
    border: 1px solid var(--asn-hair);
    border-left: 3px solid var(--asn-navy);
    border-radius: 10px;
}

.et-asn__changed .et-asn__asof {
    margin-bottom: 12px;
}

/* ----------------------------------------------------------------- mobile */

@media (max-width: 600px) {
    .et-asn__metric-value {
        font-size: 25px;
    }

    .et-asn__fact {
        grid-template-columns: 1fr;
        gap: 2px;
    }

    .et-asn__detection,
    .et-asn__query,
    .et-asn__feed,
    .et-asn__file {
        padding: 14px 15px;
    }

    .et-asn__snippet pre {
        font-size: 11.5px;
    }
}

/* The sticky header earns its place on a tall table and costs legibility on a
   short screen, where it can cover most of the scroll area. */
@media (max-height: 560px) {
    .et-asn__table thead th {
        position: static;
    }
}

@media (prefers-reduced-motion: reduce) {
    .et-asn * {
        transition: none !important;
        animation: none !important;
    }
}

/* ==========================================================================
   Theme bleed-through

   This component renders inside the post content, so the parent theme's content
   styles reach it. The registry reference learned both of these the hard way,
   on the live page, after an isolated preview showed nothing wrong. Everything
   below is specificity rather than new design.
   ========================================================================== */

/* dev7.css carries
     .elementor-location-single .elementor-widget-theme-post-content
     :is(p, h1, h2, h3, h4, h5, h6, ul, ol, dl, blockquote, pre, table)
   at specificity (0,2,1), applying the reading measure with auto side margins.
   That is right for prose and wrong for a reference component: it would clamp
   every table to the 700px measure and centre it inside its own scroll box,
   which is how a 7-column table ends up unreadable. These selectors are (0,3,0)
   or better so they win on specificity rather than with !important.

   The tables are deliberately NOT given max-width: none alone. They sit inside
   .et-asn__scroller, which is the element that establishes the scroll area, so
   the table needs its natural width and the scroller handles the overflow. */
.et-asn .et-asn__scroller .et-asn__table,
.et-asn .et-asn__metrics,
.et-asn .et-asn__files,
.et-asn .et-asn__sources,
.et-asn .et-asn__facts,
.et-asn .et-asn__snippet pre,
.et-asn .et-asn__detection p,
.et-asn .et-asn__query p,
.et-asn .et-asn__feed p,
.et-asn .et-asn__changed p,
.et-asn .et-asn__counts p,
.et-asn .et-asn__preview p,
.et-asn .et-asn__downloads p {
    max-width: none;
    margin-left: 0;
    margin-right: 0;
}

/* ---------------------------------------------------- reading-measure escape

   Two things were measured on the published page rather than assumed, because
   both were invisible to CI, which renders these shortcodes with no theme at
   all and hands them a 1262px column that does not exist on the real site.

   1. The column. .entry-content clamps to 680.73px, inside .content-area at
      740px, inside .wrap at 1000px with 48px of padding. So the usable band is
      904px and every one of those boxes is centred. The preview table needs
      760px and the tiers table 733px, so both were being clipped at the right
      edge: the reader lost the evidence column.

      111px of negative margin each side turns 681 into 903, the full band.
      The 1000px breakpoint is exactly where .wrap stops being able to reach its
      1000px max-width: at or above it the band is always 904px and the
      arithmetic is fixed, so this cannot push the page sideways; below it the
      band would be narrower than 903 and the sections stay in the measure and
      scroll inside themselves instead. Verified at 999 and 1000.

   2. The headings. Twenty Seventeen puts padding: 1.5em 0 0 on every heading,
      which is 33.6px of dead space that is not a margin and so collapses with
      nothing. On top of it dev7.css carries .et-doc .entry-content h2 at
      specificity (0,2,1), which beats the (0,1,1) of .et-research > h2 below
      and replaces its 44px margin with 2.4em. The two together put 87px above
      every heading, which is what made the sections look adrift.

      The repeated class is a specificity bump to (0,3,1), the same device used
      for the table rules above, so this wins on weight rather than !important.
      Note it deliberately sets spacing only: the font-size in .et-research > h2
      still loses to dev7.css, and the kit's 22.4px is fine, so leave it be. */

.et-research.et-research.et-research > h2 {
    padding-top: 0;
    margin-top: 40px;
}

.et-research.et-research.et-research > h3 {
    padding-top: 0;
    margin-top: 28px;
}

.et-research.et-research.et-research > h2:first-child,
.et-research.et-research.et-research > h3:first-child {
    margin-top: 0;
}

@media (max-width: 782px) {
    .et-research.et-research.et-research > h2 {
        margin-top: 30px;
    }

    .et-research.et-research.et-research > h3 {
        margin-top: 22px;
    }
}

/* On the dataset page the point is that one measure contains everything, so
   prose and data share both edges rather than only the left one. Everywhere
   else this stylesheet loads, the essay measure above still governs. */
.et-asn-wide .et-research {
    --research-measure: 100%;
}

/* ------------------------------------------- a wider column, this page only

   The site's posts are essay-width and that is right for essays. This page is a
   reference document: a 1,130 row catalog, a six column table, a tier matrix and
   seventeen downloads. The measure that serves an argument does not serve those.

   So the column itself is widened, rather than the data blocks being widened
   inside it. That distinction is the whole lesson from two failed attempts. The
   title, the prose and the data all move together and share both edges, so there
   is nothing centred against anything else and no dead space beside the text.

   This is safe to put here because the stylesheet is enqueued only where
   et_asn_in_use() says so, which is the research pages. No other post is
   touched, and the site's measure is unchanged everywhere else.

   904px is the hard ceiling: .wrap is 1000px with 48px of padding either side,
   so that is the whole usable band. 880 leaves a little breathing room inside
   it. Only above 1000px, where .wrap is always at its max-width, so the
   arithmetic is fixed and the page cannot be pushed sideways.

   The repeated class is a specificity bump, since the theme sets these. */

@media (min-width: 1000px) {
    /* Scoped to body.et-asn-wide, which et_asn_body_class() sets only where the
       watchlist shortcode runs. The stylesheet itself loads more widely than
       that, because the research hub needs its prose rhythm, and the hub has no
       tables to justify a wider column.

       Both boxes take the same value on purpose. The page header sits in
       .content-area and the copy sits in .entry-content, so leaving the outer
       one wider than the inner one gives the title a box wider than the column
       it titles, and a long or wrapping title would then overhang the content.

       Twenty Seventeen pins .content-area with
       .page.page-one-column:not(.twentyseventeen-front-page) #primary at
       (1,3,0). A class bump cannot reach that, so this matches the id to tie and
       wins on source order. Measured: a (0,2,0) attempt left it at 740px. */
    .et-asn-wide #primary.content-area.content-area {
        max-width: 820px;
    }

    .et-asn-wide .entry-content.entry-content {
        max-width: 820px;
    }

    /* The header carries its own narrower cap from the theme, which left the
       title inset 90px inside an 820px column rather than the 50px it sat at in
       a 740px one. Matching it to the column keeps the title over the thing it
       titles, and gives a long one somewhere to go.

       dev7.css sets it through body.et-doc.page .entry-header at (0,3,1), so a
       (0,3,0) selector loses. Measured: the first attempt left it at 640.688px,
       which is that rule's 72ch. */
    body.et-asn-wide .entry-header.entry-header.entry-header {
        max-width: 820px;
    }
}

/* ---------------------------------------------- one column, essay width

   This page is one column at the theme's own measure, like every other post
   here. Two earlier attempts to give the tables more room are worth recording
   so neither gets tried again.

   Widening only the data blocks put prose at 681px and data at 903px, both
   centred on the same axis. They shared a centre line and no edge, so the page
   read as drift.

   Moving the width to the container and left-aligning the prose fixed the edges
   and looked worse: a centred title over left-aligned text, with nearly 300px
   of dead space beside every paragraph. Alignment was not actually the problem.

   The measure is the design, so the tables live inside it and scroll in their
   own box. That is what .et-asn__scroller is for, and the right-edge shadow
   below is what tells the reader there is more. It was too faint to read as an
   affordance, which is why a scrolling table looked like a clipped one. */

/* The kit centres headings, and these are h4 inside the post content. A centred
   detection title over a left-aligned definition list reads as a caption. */
.et-asn .et-asn__detection .et-asn__detection-title,
.et-asn .et-asn__query .et-asn__query-title,
.et-asn .et-asn__feed .et-asn__feed-title {
    max-width: none;
    margin-left: 0;
    margin-right: 0;
    text-align: left;
}

/* The theme's body colour beat the badge rules on the registry page and painted
   #333 on dark fills, which made the most important label on that page
   unreadable. The same risk applies to every pill and priority chip here, so
   each one restates its own foreground at a specificity the theme cannot beat.
   Tier is the entire visual grammar of this page; it cannot be left to chance. */
.et-asn .et-asn__row .et-asn__pill,
.et-asn .et-asn__tier-row .et-asn__pill,
.et-asn .et-asn__check .et-asn__pill {
    color: #FFF;
}

.et-asn .et-asn__row .et-asn__pill--t1,
.et-asn .et-asn__tier-row .et-asn__pill--t1,
.et-asn .et-asn__check .et-asn__pill--t1 { background: var(--asn-t1); }

.et-asn .et-asn__row .et-asn__pill--t2,
.et-asn .et-asn__tier-row .et-asn__pill--t2,
.et-asn .et-asn__check .et-asn__pill--t2 { background: var(--asn-t2); }

.et-asn .et-asn__row .et-asn__pill--t3,
.et-asn .et-asn__tier-row .et-asn__pill--t3,
.et-asn .et-asn__check .et-asn__pill--t3 { background: var(--asn-t3); }

.et-asn .et-asn__row .et-asn__pill--t4,
.et-asn .et-asn__tier-row .et-asn__pill--t4,
.et-asn .et-asn__check .et-asn__pill--t4 { background: var(--asn-t4); }

.et-asn .et-asn__detection .et-asn__priority--critical {
    color: #FFF;
    background: var(--asn-t1);
}

.et-asn .et-asn__detection .et-asn__priority--high {
    color: #FFF;
    background: var(--asn-t2);
}

/* The dark code blocks must keep their own foreground for the same reason. */
.et-asn .et-asn__snippet pre,
.et-asn .et-asn__snippet pre code {
    color: #E8EAF6;
    background: var(--asn-deep);
}

/* The sticky table header is a dark fill carrying white text, so it is exposed
   to the same inherited colour. */
.et-asn .et-asn__table thead th {
    color: #FFF;
    background: var(--asn-deep);
}

/* ==========================================================================
   Research page prose

   These pages render through the Twenty Seventeen page template rather than
   through Elementor, so the prose inherits whatever the theme and the active
   kit happen to set. That produced very large and inconsistent gaps between
   sections, and a measure of roughly 110 characters a line, which is well past
   comfortable reading.

   Rather than fight each inherited rule, the page content is wrapped in
   .et-research and the rhythm is set here. Scoped to that class so no other
   page on the site is touched.

   The prose is capped at a readable measure while the data sections stay full
   width: a paragraph and a seven-column table do not want the same width, and
   making them share one is what makes a reference page feel cramped or a
   paragraph feel endless.
   ========================================================================== */

.et-research {
    --research-measure: 38rem;
    --research-ink: #1B1E3B;
    --research-ink-soft: #3C4156;
}

.et-research > p,
.et-research > ul,
.et-research > ol {
    max-width: var(--research-measure);
    margin: 0 0 18px;
    font-size: 17px;
    line-height: 1.65;
    color: var(--research-ink);
}

/* The opening paragraph used to be set at 18.5px as a lede. That was not a
   design decision surviving on its merits, it was a specificity accident: the
   body rule .et-research > p is (0,1,1) and loses to dev7.css's
   .et-doc .entry-content p at (0,2,1), while :first-of-type lifts this one to
   (0,2,1) and wins on source order. So the first paragraph took the intended
   size and every paragraph after it did not, which reads as the opening being
   set in a different face. It now matches the body text.

   The colour went the same way on 2026-10-07. The opening paragraph was set in
   the heading navy and every later one in slate (#3C4156), which read as two
   kinds of text rather than an introduction. All research prose is now the
   heading navy; slate is kept for secondary text such as dates and notes. */
.et-research > p:first-of-type {
    line-height: 1.6;
}

.et-research > h2 {
    max-width: var(--research-measure);
    margin: 44px 0 10px;
    font-size: 25px;
    font-weight: 700;
    line-height: 1.25;
    color: var(--research-ink);
    clear: both;
}

.et-research > h3 {
    max-width: var(--research-measure);
    margin: 32px 0 8px;
    font-size: 19px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--research-ink);
}

/* A heading that follows a data block needs the space; one that opens the page
   or follows another heading does not. */
.et-research > h2:first-child,
.et-research > h3:first-child {
    margin-top: 0;
}

.et-research > h2 + h3,
.et-research > h2 + p,
.et-research > h3 + p {
    margin-top: 0;
}

/* The data sections set their own internal spacing, so they only need to be
   separated from the prose around them. */
.et-research > .et-asn {
    margin: 22px 0 30px;
}

.et-research > .et-asn:last-child {
    margin-bottom: 0;
}

.et-research a {
    color: var(--asn-blue, #0072BC);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.et-research a:hover,
.et-research a:focus {
    color: var(--asn-violet, #3E1597);
}

@media (max-width: 782px) {
    .et-research > p,
    .et-research > p:first-of-type {
        font-size: 16px;
    }

    .et-research > h2 {
        margin-top: 34px;
        font-size: 22px;
    }

    .et-research > h3 {
        margin-top: 26px;
        font-size: 18px;
    }
}


/* ------------------------------------------------------------- page header

   This stylesheet is enqueued only where et_asn_in_use() says so, which is the
   research pages and nothing else, so the theme's own page header can be
   adjusted here without reaching the rest of the site.

   Measured rather than eyeballed: the h1 sat at 90px, flush under the dark
   site header with no padding or margin of its own, which is what made the
   title feel wedged against the bar above it. */
/* The repeated class is a specificity bump to (0,3,0). Twenty Seventeen sets
   body:not(.twentyseventeen-front-page) .entry-header at (0,2,1) and resets
   padding-top to 0 there, so a plain .entry-header at (0,1,0) lost and the
   title still sat flush under the site header. Verified against the live
   cascade, where the first attempt measured 0px. */
.entry-header.entry-header.entry-header {
    padding-top: 40px;
    text-align: center;
}

.entry-header.entry-header .entry-title {
    text-align: center;
}

@media (max-width: 782px) {
    .entry-header.entry-header.entry-header {
        padding-top: 24px;
    }
}