/* =========================================================
   Insight article — CES Category Trends
   ========================================================= */
.insight-card-link { transition: transform .2s ease, border-color .2s ease; }
.insight-card-link:hover { transform: translateY(-3px); border-color: #9d9d96; }

.article-main { max-width: 1440px; margin: 0 auto; }
.insight-article { padding: 0 6vw 100px; }
.article-hero { min-height: 72vh; padding: 72px 0 80px; display: flex; flex-direction: column; justify-content: center; border-bottom: 1px solid var(--line); }
.article-back { width: fit-content; margin-bottom: 56px; color: var(--muted); font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.article-labels { justify-content: flex-start; margin-bottom: 24px; }
.article-kicker { margin: 0 0 16px; color: #2563eb; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.article-hero h1 { max-width: 1100px; margin: 0; font-size: clamp(58px, 8vw, 118px); line-height: .92; letter-spacing: -.06em; }
.article-lead { max-width: 760px; margin: 36px 0 0; color: var(--muted); font-size: clamp(16px, 1.5vw, 20px); line-height: 1.9; }

.article-section { padding: 96px 0; border-bottom: 1px solid var(--line); }
.article-section-head { max-width: 850px; }
.article-section-head h2, .taxonomy-note h2, .next-update h2 { margin: 0; font-size: clamp(38px, 5vw, 72px); line-height: 1; letter-spacing: -.05em; }
.article-section-head > p:last-child { max-width: 720px; margin: 24px 0 0; color: var(--muted); line-height: 1.8; }

.heat-legend { display: flex; align-items: center; gap: 7px; margin: 42px 0 18px; color: var(--muted); font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.legend-swatch { display: inline-block; width: 28px; height: 14px; border: 1px solid rgba(17,17,17,.08); }
.legend-zero { display: inline-flex; align-items: center; gap: 6px; margin-left: 14px; }

.heatmap-wrap { overflow-x: auto; border: 1px solid var(--line); background: #fff; }
.category-heatmap { width: 100%; min-width: 760px; border-collapse: collapse; font-size: 13px; }
.category-heatmap th, .category-heatmap td { padding: 15px 16px; border-bottom: 1px solid var(--line); text-align: center; }
.category-heatmap thead th {
  position: static;
  background: #111;
  color: #fff;
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
}

/* Long-form social issue article */
.language-panel[hidden] { display: none; }
.language-panel > h1:first-child { display: none; }
.language-panel > h2:nth-child(2) {
  margin: -3rem 0 5rem;
  max-width: 820px;
  color: var(--ink-soft, #4c514d);
  font-size: clamp(1.05rem, 2vw, 1.35rem);
  line-height: 1.75;
  font-weight: 500;
}
.language-panel > hr {
  border: 0;
  border-top: 1px solid rgba(16, 38, 29, .16);
  margin: 5.5rem 0 4rem;
}
.language-panel > h2 {
  margin: 0 0 1.2rem;
  color: var(--ink, #10261d);
  font-size: clamp(1.8rem, 4vw, 3.2rem);
  line-height: 1.12;
  letter-spacing: -.035em;
}
.language-panel > h2 + h2 {
  margin-top: -.6rem;
  font-size: clamp(1.4rem, 3vw, 2.35rem);
}
.language-panel > p,
.language-panel > ul {
  max-width: 850px;
  margin: 0 0 1.5rem;
  font-size: 1.02rem;
  line-height: 1.95;
  color: var(--ink-soft, #434b46);
}
.language-panel > h3 {
  max-width: 850px;
  margin: 2.8rem 0 .8rem;
  font-size: 1.28rem;
  line-height: 1.4;
  color: var(--ink, #10261d);
}
.language-panel ul { padding-left: 1.35rem; }
.language-panel li { margin-bottom: .75rem; }
.language-panel table {
  width: 100%;
  border-collapse: collapse;
  margin: 2.4rem 0 3rem;
  font-size: .9rem;
  background: rgba(255,255,255,.6);
}
.language-panel th,
.language-panel td {
  padding: .9rem 1rem;
  border-bottom: 1px solid rgba(16,38,29,.13);
  text-align: right;
  white-space: nowrap;
}
.language-panel th:first-child,
.language-panel td:first-child { text-align: left; white-space: normal; }
.language-panel thead th {
  color: #f7f7f4;
  background: #123d2d;
  font-weight: 650;
}
.language-panel tbody tr:hover { background: rgba(53, 116, 88, .06); }
.language-panel blockquote {
  max-width: 850px;
  margin: 2.5rem 0;
  padding: 1.4rem 1.6rem;
  border-left: 4px solid #56a77f;
  background: rgba(86,167,127,.08);
}
.language-panel blockquote p { margin: 0; font-size: 1.1rem; line-height: 1.8; }
.keyword-details {
  max-width: 850px;
  margin: 2rem 0 2.5rem;
  border-top: 1px solid rgba(16, 38, 29, .12);
  border-bottom: 1px solid rgba(16, 38, 29, .12);
  color: var(--ink-soft, #59605c);
}
.keyword-details summary {
  padding: 1rem 0;
  cursor: pointer;
  font-size: .82rem;
  letter-spacing: .04em;
  color: #737a76;
}
.keyword-details-body { padding: .25rem 0 1.5rem; }
.keyword-details .keyword-note,
.keyword-details .keyword-group p {
  margin: 0 0 1rem;
  font-size: .76rem;
  line-height: 1.75;
  color: #747b77;
}
.keyword-details .keyword-group h3 {
  margin: 1.25rem 0 .35rem;
  font-size: .8rem;
  line-height: 1.45;
  color: #4f5752;
}
@media (max-width: 760px) {
  .language-panel { overflow: hidden; }
  .language-panel > h2:nth-child(2) { margin-top: -1rem; margin-bottom: 3rem; }
  .language-panel > hr { margin: 4rem 0 3rem; }
  .language-panel table { display: block; overflow-x: auto; }
  .language-panel th, .language-panel td { padding: .75rem .8rem; }
}
.category-heatmap thead th:first-child, .category-heatmap tbody th { text-align: left; }
.category-heatmap tbody th { width: 48%; background: #fff; font-weight: 650; }
.category-heatmap tbody tr:last-child th, .category-heatmap tbody tr:last-child td { border-bottom: 0; }

.category-heatmap thead {
  display: table-header-group;
}

.category-heatmap tbody {
  display: table-row-group;
}

.category-heatmap tr {
  display: table-row;
}

.category-heatmap th,
.category-heatmap td {
  box-sizing: border-box;
}

.category-heatmap tbody tr:first-child th,
.category-heatmap tbody tr:first-child td {
  border-top: 0;
}

.heat-cell { min-width: 82px; font-variant-numeric: tabular-nums; font-weight: 800; }

/* Blue -> near-white -> red. Zero is separate gray because it can mean taxonomy absence. */
.heat-zero { background: #ececea; color: #777770; }
.heat-blue-3 { background: #2563eb; color: #fff; }
.heat-blue-2 { background: #93c5fd; color: #0b2554; }
.heat-neutral { background: #f8fafc; color: #111; }
.heat-red-1 { background: #fdba74; color: #5b2200; }
.heat-red-2 { background: #f97316; color: #fff; }
.heat-red-3 { background: #b91c1c; color: #fff; }

.trend-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 108px; padding: 7px 9px; border-radius: 999px; font-size: 10px; font-weight: 800; letter-spacing: .05em; white-space: nowrap; }
.trend-up { background: #dcfce7; color: #166534; }
.trend-down { background: #fee2e2; color: #991b1b; }
.trend-stable { background: #e5e7eb; color: #374151; }
.trend-recovery { background: #dbeafe; color: #1d4ed8; }
.trend-peaked { background: #ffedd5; color: #9a3412; }
.trend-new { background: #ede9fe; color: #6d28d9; }
.method-note { max-width: 920px; margin: 22px 0 0; color: var(--muted); font-size: 11px; line-height: 1.8; }

.finding-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); margin-top: 52px; border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.finding { min-height: 330px; padding: 30px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); background: #fff; }
.finding-no { color: #2563eb; font-size: 11px; font-weight: 800; }
.finding h3 { margin: 70px 0 18px; font-size: clamp(25px, 2.6vw, 40px); line-height: 1.08; letter-spacing: -.035em; }
.finding p { margin: 0; color: var(--muted); line-height: 1.8; }

.taxonomy-note { margin: 96px 0 0; padding: 48px; background: #111; color: #fff; }
.taxonomy-note .eyebrow { color: #9ca3af; }
.taxonomy-note h2 { max-width: 900px; }
.taxonomy-note > p:last-child { max-width: 800px; margin: 28px 0 0; color: #c7c7c2; line-height: 1.9; }

.next-update { margin-top: 28px; padding: 48px; display: grid; grid-template-columns: .8fr 1.2fr; gap: 50px; align-items: end; border: 1px solid var(--line); background: #fff; }
.next-update p:last-child { margin: 0; color: var(--muted); font-size: 17px; line-height: 1.9; }

@media (max-width: 760px) {
  .insight-article { padding: 0 20px 72px; }
  .article-hero { min-height: auto; padding: 56px 0 64px; }
  .article-back { margin-bottom: 40px; }
  .article-section { padding: 70px 0; }
  .heat-legend { flex-wrap: wrap; }
  .category-heatmap th, .category-heatmap td { padding: 13px 12px; }
  .category-heatmap tbody th { width: 42%; }
  .finding-grid { grid-template-columns: 1fr; }
  .finding { min-height: 280px; }
  .finding h3 { margin-top: 48px; }
  .taxonomy-note, .next-update { padding: 30px 24px; }
  .next-update { grid-template-columns: 1fr; gap: 28px; }
}


/* =========================================================
   CES Language Trends — compact methodology
   ========================================================= */
.concept-method {
  margin-top: 26px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}
.concept-method-title {
  margin: 0 0 8px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.concept-method-intro {
  max-width: 820px;
  margin: 0 0 12px;
  color: var(--muted);
  line-height: 1.8;
}
.method-details {
  max-width: 980px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.method-details summary {
  cursor: pointer;
  padding: 13px 0;
  list-style: none;
  color: #4b5563;
  font-size: 12px;
  font-weight: 700;
}
.method-details summary::-webkit-details-marker { display: none; }
.method-details summary::after {
  content: "+";
  float: right;
  color: #9ca3af;
  font-size: 16px;
  font-weight: 500;
}
.method-details[open] summary::after { content: "−"; }
.method-details-body { padding: 4px 0 20px; }
.keyword-table tbody td {
  text-align: left;
  color: var(--muted);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  line-height: 1.7;
}
.method-steps {
  max-width: 920px;
  margin: 10px 0 0;
  padding-left: 22px;
  color: var(--muted);
}
.method-steps li {
  margin: 10px 0;
  padding-left: 4px;
  line-height: 1.75;
}
.method-steps strong { color: var(--text); }

/* =========================================================
   Smartphone tables
   Important: do NOT force a 760px-wide table on mobile.
   ========================================================= */
@media (max-width: 760px) {
  /* Use more of the phone width. */
  .insight-article {
    padding-left: 10px;
    padding-right: 10px;
  }

  /* Main Word / Concept tables stay as real tables, but fit the viewport. */
  .responsive-table-wrap {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
  }

  .responsive-data-table {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100%;
    table-layout: fixed;
    font-size: 10px;
  }

  .responsive-data-table th,
  .responsive-data-table td {
    padding: 9px 2px;
    min-width: 0;
  }

  .responsive-data-table thead th {
    font-size: 8px;
    letter-spacing: .02em;
    white-space: nowrap;
  }

  .responsive-data-table tbody th {
    width: auto;
    font-size: 9px;
    line-height: 1.25;
    overflow-wrap: anywhere;
    word-break: normal;
  }

  .responsive-data-table tbody td {
    font-size: clamp(8.5px, 2.55vw, 10px);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
  }

  .word-table thead th:first-child,
  .word-table tbody th {
    width: 34%;
  }

  .concept-table thead th:first-child,
  .concept-table tbody th {
    width: 42%;
  }

  .trend-badge {
    min-width: 0;
    max-width: 100%;
    padding: 4px 2px;
    font-size: clamp(7.5px, 2.2vw, 9px);
    letter-spacing: 0;
    white-space: nowrap;
  }

  /* The full keyword dictionary is secondary information:
     stack it vertically instead of ever requiring horizontal scroll. */
  .keyword-table-wrap {
    width: 100%;
    max-width: 100%;
    overflow: visible;
    border: 0;
    background: transparent;
  }

  .keyword-table {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100%;
    table-layout: fixed;
    border-collapse: separate;
    border-spacing: 0 8px;
    background: transparent;
  }

  .keyword-table thead {
    display: none;
  }

  .keyword-table tbody,
  .keyword-table tr,
  .keyword-table th,
  .keyword-table td {
    display: block;
    width: 100% !important;
    max-width: 100%;
  }

  .keyword-table tr {
    margin-bottom: 8px;
    border: 1px solid var(--line);
    background: #fff;
  }

  .keyword-table tbody th {
    padding: 10px 12px;
    border-bottom: 1px solid var(--line);
    background: #f3f3ef;
    font-size: 10px;
    line-height: 1.35;
  }

  .keyword-table tbody td {
    padding: 10px 12px 12px;
    border-bottom: 0;
    font-size: 10px;
    line-height: 1.6;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .concept-method {
    margin-top: 20px;
    padding-top: 14px;
  }

  .concept-method-intro {
    font-size: 12px;
    line-height: 1.7;
  }

  .method-details summary {
    padding: 11px 0;
    font-size: 11px;
  }

  .method-steps {
    padding-left: 18px;
    font-size: 11px;
  }
}

@media (max-width: 380px) {
  .insight-article {
    padding-left: 7px;
    padding-right: 7px;
  }

  .responsive-data-table th,
  .responsive-data-table td {
    padding-left: 1px;
    padding-right: 1px;
  }

  .concept-table thead th:first-child,
  .concept-table tbody th {
    width: 44%;
  }

  .responsive-data-table tbody th {
    font-size: 8.5px;
  }

  .responsive-data-table tbody td {
    font-size: 8.5px;
  }

  .trend-badge {
    font-size: 7.5px;
    padding-left: 1px;
    padding-right: 1px;
  }
}


/* =========================================================
   Compact finding cards
   ========================================================= */
.finding-grid {
  margin-top: 34px;
}

.finding {
  min-height: 230px;
  padding: 24px;
}

.finding h3 {
  margin: 38px 0 12px;
}

/* AI prevalence has exactly three values, so use the full row. */
.ai-prevalence-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.ai-prevalence-grid .finding {
  min-height: 190px;
  padding: 22px 24px;
}

.ai-prevalence-grid .finding h3 {
  margin: 34px 0 10px;
}

/* Tablet */
@media (max-width: 900px) and (min-width: 761px) {
  .ai-prevalence-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .ai-prevalence-grid .finding {
    min-height: 170px;
    padding: 18px;
  }

  .ai-prevalence-grid .finding h3 {
    margin-top: 28px;
  }
}

/* Phone: keep cards compact instead of tall blocks. */
@media (max-width: 760px) {
  .finding-grid {
    margin-top: 28px;
  }

  .finding,
  .ai-prevalence-grid .finding {
    min-height: 0 !important;
    padding: 16px 14px;
  }

  .finding h3,
  .ai-prevalence-grid .finding h3 {
    margin: 22px 0 8px;
  }

  .finding p {
    line-height: 1.55;
  }

  .ai-prevalence-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .ai-prevalence-grid .finding {
    padding: 14px 8px;
  }

  .ai-prevalence-grid .finding-no {
    font-size: 9px;
  }

  .ai-prevalence-grid .finding h3 {
    margin: 18px 0 7px;
    font-size: clamp(21px, 7vw, 30px);
  }

  .ai-prevalence-grid .finding p {
    font-size: clamp(8px, 2.5vw, 11px);
    white-space: nowrap;
  }
}

/* Very narrow phones: stack the three prevalence cards to two + one,
   but keep them short. */
@media (max-width: 360px) {
  .ai-prevalence-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.lang-block[hidden]{display:none!important}.metric-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;margin:28px 0}.metric-card{border:1px solid rgba(127,127,127,.28);padding:20px;border-radius:14px}.metric-card strong{display:block;font-size:2rem;line-height:1.05}.metric-card span{font-size:.86rem;opacity:.72}.rank-table{width:100%;border-collapse:collapse;margin:24px 0}.rank-table th,.rank-table td{padding:11px 9px;border-bottom:1px solid rgba(127,127,127,.22);text-align:left}.rank-table td.num{text-align:right;font-variant-numeric:tabular-nums}.finding{border-left:3px solid currentColor;padding:4px 0 4px 18px;margin:28px 0}.source-box{margin-top:36px;padding:22px;border:1px solid rgba(127,127,127,.28);border-radius:14px}.source-box code{font-size:.82em;word-break:break-all}.source-box a{word-break:break-all}.bar-row{display:grid;grid-template-columns:minmax(170px,1.6fr) 3fr 52px;gap:12px;align-items:center;margin:9px 0}.bar-track{height:12px;background:rgba(127,127,127,.13);border-radius:999px;overflow:hidden}.bar-fill{height:100%;background:currentColor;opacity:.72;border-radius:999px}@media(max-width:640px){.bar-row{grid-template-columns:1fr 2fr 42px;font-size:.82rem}}
/* Article 4 readability refinements */
.plain-note { max-width: 900px; margin: 30px 0 0; padding: 20px 0 4px; border-top: 1px solid var(--line); }
.plain-note strong { display:block; margin-bottom:8px; font-size:1.05rem; }
.plain-note p { margin:0; color:var(--muted); line-height:1.85; }
.subhead { max-width: 900px; margin: 42px 0 14px; font-size: clamp(24px, 2.8vw, 38px); line-height: 1.2; letter-spacing: -.025em; }
.bar-row span { line-height: 1.25; }
@media(max-width:640px){.bar-row{grid-template-columns:minmax(125px,1.35fr) 2fr 38px;gap:8px}.bar-row span{font-size:.75rem}}

/* Article 4 network figure */
.network-figure{margin:42px 0 34px;}
.network-figure img{display:block;width:100%;height:auto;border:1px solid var(--line);background:#fff;}
.network-figure figcaption{max-width:920px;margin:12px 0 0;color:var(--muted);font-size:.82rem;line-height:1.7;}
@media(max-width:640px){.network-figure{margin:30px -4px 26px}.network-figure figcaption{padding:0 4px;font-size:.76rem}}