/* ==========================================================================
   AI Chatbot Platform Comparison Matrix

   Loaded only where [ai_platform_matrix] runs. Uses the watchlist's ink,
   hairline, wash and Montserrat rather than a new visual language, and the
   research prose rhythm still comes from css/asn-watchlist.css, which loads on
   any page carrying the .et-research wrapper.

   Colour is functional, matching the workbook:
     pale amber   a warning: hidden catches, cost surprises, conflicts
     green / amber / red marks   supported / partial / not available, always
                                 paired with screen-reader text
   Cells are centred both ways, which is how the author wanted the workbook and
   suits short comparison cells.
   ========================================================================== */

.et-aim {
    --aim-ink: #1B1E3B;
    --aim-ink-soft: #3C4156;
    --aim-navy: #31347C;
    --aim-blue: #0072BC;
    --aim-hair: #E3E6F0;
    --aim-wash: #F6F7FB;
    --aim-head: #EEF1F8;
    --aim-muted: #6B7189;
    --aim-ok: #1E7B45;
    --aim-warn: #8A5200;
    --aim-warn-bg: #FFF6E3;
    --aim-no: #A4123F;
    --aim-new-bg: #EAF5EC;

    font-family: "Montserrat", sans-serif;
    color: var(--aim-ink);
    font-size: 16px;
    line-height: 1.6;
    margin: 18px 0 30px;
}

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

.et-aim .screen-reader-text {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* dev7.css clamps p, ul, ol, dl and table to the reading measure with auto
   margins at (0,2,1). Inside this component that would centre a table inside its
   own scroll box, so these win on specificity, as the watchlist's do. */
.et-aim .et-aim__scroller .et-aim__table,
.et-aim .et-aim__metrics,
.et-aim .et-aim__downloads,
.et-aim .et-aim__legend,
.et-aim .et-aim__notes,
.et-aim .et-aim__phases,
.et-aim .et-aim__sources,
.et-aim p {
    max-width: none;
    margin-left: 0;
    margin-right: 0;
}

/* ---------------------------------------------------------- as-of and counts */

.et-aim__asof {
    color: var(--aim-ink-soft);
    font-size: 14px;
    margin: 0 0 14px;
}

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

.et-aim__metric {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 14px 10px;
    background: var(--aim-wash);
    border: 1px solid var(--aim-hair);
    border-radius: 10px;
}

.et-aim__metric-value {
    font-size: 28px;
    font-weight: 700;
    color: var(--aim-navy);
    line-height: 1.1;
}

.et-aim__metric-label {
    font-size: 13px;
    font-weight: 600;
    margin-top: 4px;
}

.et-aim__metric-note {
    font-size: 12px;
    color: var(--aim-muted);
}

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

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

.et-aim .et-aim__download {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    column-gap: 12px;
    align-items: center;
    padding: 14px 16px;
    border: 1px solid var(--aim-hair);
    border-radius: 10px;
    background: #FFF;
    color: var(--aim-ink);
    text-decoration: none;
    box-shadow: none;
}

.et-aim .et-aim__download:hover,
.et-aim .et-aim__download:focus-visible {
    border-color: var(--aim-blue);
    outline: none;
}

.et-aim__download-format {
    grid-row: 1 / span 2;
    padding: 6px 9px;
    border-radius: 6px;
    background: var(--aim-navy);
    color: #FFF;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
}

.et-aim__download-label {
    font-weight: 700;
}

.et-aim__download-meta {
    font-size: 13px;
    color: var(--aim-ink-soft);
}

/* ------------------------------------------------------------------ legend */

.et-aim__legend {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 22px;
    list-style: none;
    padding: 0;
    font-size: 14px;
}

/* -------------------------------------------------------------------- marks
   Drawn rather than emoji, so they look the same on every platform and carry
   their meaning in shape as well as colour. */

.et-aim__mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.25em;
    height: 1.25em;
    margin-right: 0.35em;
    border-radius: 50%;
    font-size: 0.85em;
    font-weight: 700;
    color: #FFF;
    vertical-align: -0.15em;
    line-height: 1;
}

.et-aim__mark--ok   { background: var(--aim-ok); }
.et-aim__mark--warn { background: var(--aim-warn); }
.et-aim__mark--no   { background: var(--aim-no); }

.et-aim__mark--ok::before   { content: "\2713"; }
.et-aim__mark--warn::before { content: "!"; }
.et-aim__mark--no::before   { content: "\2715"; }

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

.et-aim__kicker {
    margin: 0 0 8px;
    font-size: 15px;
    font-weight: 700;
    color: var(--aim-navy);
}

.et-aim__kicker-aud {
    margin-left: 6px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--aim-muted);
}

.et-aim__subhead {
    font-size: 16px;
    margin: 22px 0 10px;
}

/* position: relative is load-bearing. The visually hidden labels inside table
   cells are absolutely positioned; without a positioned ancestor they resolve
   against the page, sit at their cell's offset far to the right, and give the
   whole document a horizontal scrollbar on a phone. Measured: 485px at 390. */
.et-aim__scroller {
    position: relative;
    overflow-x: auto;
    border: 1px solid var(--aim-hair);
    border-radius: 10px;
    background: #FFF;
    -webkit-overflow-scrolling: touch;
    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-aim__scroller:focus-visible {
    outline: 2px solid var(--aim-blue);
    outline-offset: 2px;
}

.et-aim__table {
    width: 100%;
    margin: 0;
    border-collapse: collapse;
    font-size: 14px;
    line-height: 1.45;
}

.et-aim .et-aim__table th,
.et-aim .et-aim__table td {
    padding: 10px 12px;
    text-align: center;
    vertical-align: middle;
    border-bottom: 1px solid var(--aim-hair);
    border-right: 1px solid var(--aim-hair);
}

.et-aim .et-aim__table thead th {
    background: var(--aim-head);
    font-weight: 700;
    font-size: 13px;
    white-space: nowrap;
}

.et-aim .et-aim__table .et-aim__rowhead {
    background: var(--aim-wash);
    font-weight: 700;
}

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

.et-aim .et-aim__table tr > :last-child {
    border-right: 0;
}

.et-aim__table--matrix {
    min-width: 840px;
}

/* --------------------------------------------- fixed columns, even widths

   With automatic layout a column was as wide as its longest unbreakable run:
   a header that could not wrap ("Gemini (Workspace)"), a slash-joined list
   ("Teams/Outlook/Word/Excel"), a URL. The matrix measured 5 to 271px wider
   than its box at every desktop width, and Solution patterns 1,283px, because
   its option headers carry a line break that a nowrap header flattened into
   one line. Fixed layout sizes columns from the header row alone, so the five
   vendor columns share the space evenly and the table is exactly as wide as
   its box. The renderer adds a break opportunity after a slash between words,
   and break-word catches any run still wider than its column. */
.et-aim .et-aim__table--matrix,
.et-aim .et-aim__table--pricing,
.et-aim .et-aim__table--solutions {
    table-layout: fixed;
}

.et-aim .et-aim__table--matrix th,
.et-aim .et-aim__table--matrix td,
.et-aim .et-aim__table--pricing th,
.et-aim .et-aim__table--pricing td,
.et-aim .et-aim__table--solutions th,
.et-aim .et-aim__table--solutions td {
    overflow-wrap: break-word;
}

.et-aim .et-aim__table--matrix thead th,
.et-aim .et-aim__table--pricing thead th,
.et-aim .et-aim__table--solutions thead th,
.et-aim .et-aim__table--pricing .et-aim__num {
    white-space: normal;
}

/* Label, five vendors at 15.2% each, sources. */
.et-aim__table--matrix thead th:first-child { width: 14%; }
.et-aim__table--matrix thead th:last-child  { width: 10%; }

/* Platform, plan, annual, monthly, cost at the default seats, seats,
   what the price includes, sources. */
.et-aim__table--pricing thead th:nth-child(1) { width: 11%; }
.et-aim__table--pricing thead th:nth-child(2) { width: 14%; }
.et-aim__table--pricing thead th:nth-child(3),
.et-aim__table--pricing thead th:nth-child(4) { width: 10%; }
.et-aim__table--pricing thead th:nth-child(5) { width: 11%; }
.et-aim__table--pricing thead th:nth-child(6) { width: 8%; }
.et-aim__table--pricing thead th:nth-child(7) { width: 26%; }
.et-aim__table--pricing thead th:nth-child(8) { width: 10%; }

/* Row label, then five options at 17.6% each. */
.et-aim__table--solutions thead th:first-child { width: 12%; }

.et-aim__table--pricing,
.et-aim__table--tradeoffs,
.et-aim__table--solutions,
.et-aim__table--changes,
.et-aim__table--questions {
    min-width: 840px;
}

.et-aim .et-aim__row--catch td,
.et-aim .et-aim__table .et-aim__catch {
    background: var(--aim-warn-bg);
}

.et-aim .et-aim__num {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.et-aim .et-aim__src {
    font-size: 11px;
    color: var(--aim-muted);
    min-width: 96px;
}

/* Source IDs link to their entry in the register. Blue marks them as links
   inside an otherwise muted cell; the dotted underline keeps a cell of six of
   them from reading as a wall of underlines. The selector outranks dev7.css's
   .et-doc .entry-content a at (0,2,1). The padding widens the hit area without
   changing the line height, which matters at 11px on a phone. */
.et-aim .et-aim__src a.et-aim__src-link {
    display: inline-block;
    padding: 2px 1px;
    color: var(--aim-blue);
    text-decoration: underline dotted;
    text-underline-offset: 2px;
}

.et-aim .et-aim__src a.et-aim__src-link:hover,
.et-aim .et-aim__src a.et-aim__src-link:focus-visible {
    color: var(--aim-navy);
    text-decoration-style: solid;
}

@media (pointer: coarse) {
    .et-aim .et-aim__src a.et-aim__src-link {
        padding: 4px 2px;
        font-size: 12px;
    }
}

/* --------------------------------------------------------- change types */

.et-aim__type {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    background: var(--aim-head);
}

.et-aim__type--correction,
.et-aim__type--open,
.et-aim__type--removed {
    background: var(--aim-warn-bg);
    color: var(--aim-warn);
}

.et-aim__type--new-item {
    background: var(--aim-new-bg);
    color: var(--aim-ok);
}

.et-aim__first {
    padding: 10px 14px;
    margin: 0 0 12px;
    border-left: 3px solid var(--aim-navy);
    background: var(--aim-wash);
    font-size: 14px;
}

.et-aim__more {
    font-size: 14px;
    color: var(--aim-ink-soft);
    margin-top: 10px;
}

/* ------------------------------------------------------------ pricing notes */

.et-aim__notes {
    margin: 16px 0 0;
}

.et-aim__note {
    padding: 10px 14px;
    border-left: 3px solid var(--aim-hair);
    margin-bottom: 8px;
}

.et-aim__note--catch {
    border-left-color: var(--aim-warn);
    background: var(--aim-warn-bg);
}

.et-aim__note dt {
    font-weight: 700;
}

.et-aim__note dd {
    margin: 2px 0 0;
    font-size: 14px;
}

/* ------------------------------------------------------------------ phases */

.et-aim__phases {
    list-style: none;
    padding: 0;
    counter-reset: none;
}

.et-aim__phase {
    border: 1px solid var(--aim-hair);
    border-radius: 10px;
    padding: 14px 18px;
    margin-bottom: 12px;
}

.et-aim .et-aim__phase-title {
    font-size: 16px;
    margin: 0 0 8px;
    padding: 0;
    text-align: left;
}

.et-aim__phase-body {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    font-size: 14px;
}

.et-aim__phase-deliverables {
    margin: 0;
    padding-left: 18px;
}

@media (max-width: 700px) {
    .et-aim__phase-body {
        grid-template-columns: 1fr;
    }
}

/* ----------------------------------------------------------------- sources */

.et-aim__sources {
    padding-left: 0;
    list-style: none;
    font-size: 13px;
    line-height: 1.5;
}

/* The negative margin lets an entry carry a background when it is the target
   of a jump while its text stays aligned with the heading above the list. */
.et-aim__sources li {
    margin: 0 -8px;
    padding: 6px 8px;
    border-bottom: 1px solid var(--aim-hair);
    border-radius: 6px;
    scroll-margin-top: 24px;
}

/* Where a source link lands. The register is 178 near-identical lines, so the
   entry jumped to is tinted and ruled, and briefly flashes so the eye finds it.
   It stays tinted until the reader jumps somewhere else; Back returns them to
   the table. */
.et-aim__sources li:target {
    background: #EAF1FB;
    box-shadow: inset 3px 0 0 var(--aim-blue);
}

@media (prefers-reduced-motion: no-preference) {
    .et-aim__sources li:target {
        animation: et-aim-landed 1.6s ease-out;
    }
}

@keyframes et-aim-landed {
    from { background: #C9DCF5; }
    to   { background: #EAF1FB; }
}

.et-aim__src-id {
    display: inline-block;
    min-width: 54px;
    font-weight: 700;
    color: var(--aim-navy);
}

.et-aim__src-type {
    padding: 1px 6px;
    border-radius: 4px;
    background: var(--aim-warn-bg);
    color: var(--aim-warn);
    font-size: 11px;
    font-weight: 600;
}

.et-aim__src-note {
    color: var(--aim-ink-soft);
}

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

   Same reasoning and same selectors as the watchlist's .et-asn-wide block in
   css/asn-watchlist.css, scoped to body.et-aim-wide which et_aim_body_class()
   sets only where this shortcode runs. Only above 1000px, where the band is
   fixed at 904px, so it cannot push the page sideways. */

.et-aim-wide .et-research {
    --research-measure: 100%;
}

@media (min-width: 1000px) {
    .et-aim-wide #primary.content-area.content-area,
    .et-aim-wide .entry-content.entry-content,
    body.et-aim-wide .entry-header.entry-header.entry-header {
        max-width: 860px;
    }

    /* Tables wider than the prose. A line of prose is already long at 860px;
       a seven-column table is cramped there, with vendor columns near 131px.
       Each table, with the kicker and subhead that title it, extends to up to
       1180px, centred on the column, so prose and tables share one axis.
       100vw counts the vertical scrollbar, so the 96px margin is what keeps
       the right edge clear of it and the page from scrolling sideways. */
    .et-aim-wide .et-aim .et-aim__scroller,
    .et-aim-wide .et-aim .et-aim__kicker,
    .et-aim-wide .et-aim .et-aim__subhead {
        --aim-bleed: min(1180px, calc(100vw - 96px));
        width: var(--aim-bleed);
        max-width: none;
        margin-left: calc((100% - var(--aim-bleed)) / 2);
    }
}

@media (max-width: 600px) {
    .et-aim {
        font-size: 15px;
    }

    .et-aim__table {
        font-size: 13px;
    }

    .et-aim__metric-value {
        font-size: 24px;
    }
}