/* Brief Card Styles — shared across all 3 categories */
/* Scoped to .prose-ai-coding AND .prose-brief */

/* Anchor targets leave room for the sticky header and play a soft
   accent flash when scrolled to from a Highlight chip. */
.prose-ai-coding [data-anchor],
.prose-brief [data-anchor] {
  scroll-margin-top: 80px;
}

.prose-ai-coding .is-target-flash,
.prose-brief .is-target-flash {
  animation: target-flash 1.6s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes target-flash {
  0% {
    box-shadow: 0 0 0 0 var(--color-accent), 0 0 0 0 var(--color-accent-glow);
  }
  25% {
    box-shadow: 0 0 0 3px var(--color-accent), 0 0 32px 8px var(--color-accent-glow);
  }
  100% {
    box-shadow: 0 0 0 0 var(--color-accent), 0 0 0 0 var(--color-accent-glow);
  }
}

@media (prefers-reduced-motion: reduce) {
  .prose-ai-coding .is-target-flash,
  .prose-brief .is-target-flash {
    animation: none;
  }
}


.prose-ai-coding, .prose-brief {
  max-width: 1100px;
  width: 100%;
  overflow-x: clip;
}

/* Layout containment: prevent intrinsic min-content widths from block
   children (tables, long content) from propagating up through the flex
   column and expanding the layout viewport on mobile. Each of these
   already has its own overflow strategy (tool-section: clip via
   overflow:hidden; model-table-wrapper: scroll via overflow-x:auto). */
.prose-ai-coding .tool-section,
.prose-brief .tool-section,
.prose-ai-coding .model-table-wrapper,
.prose-ai-coding .trends,
.prose-brief .trends,
.prose-ai-coding .stats-bar,
.prose-brief .stats-bar {
  contain: inline-size;
}

/* Section headings */
.prose-ai-coding h2, .prose-brief h2 {
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  border-bottom: none;
  padding-bottom: 0;
  margin-top: 0;
  margin-bottom: 1rem;
}

/* Tool/Category Sections */
.prose-ai-coding .tool-section,
.prose-brief .tool-section {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 16px;
  padding: 1.5rem 2rem;
  margin-bottom: 1.5rem;
  position: relative;
  overflow: hidden;
}

.prose-ai-coding .tool-section::before,
.prose-brief .tool-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  border-radius: 16px 16px 0 0;
}

/* AI Coding tool colors */
.prose-ai-coding .tool-section.claude::before { background: linear-gradient(90deg, #d97706, #f59e0b); }
.prose-ai-coding .tool-section.openai::before { background: linear-gradient(90deg, #10b981, #34d399); }
.prose-ai-coding .tool-section.gemini::before { background: linear-gradient(90deg, #3b82f6, #60a5fa); }
.prose-ai-coding .tool-section.copilot::before { background: linear-gradient(90deg, #8b5cf6, #a78bfa); }
.prose-ai-coding .tool-section.vscode::before { background: linear-gradient(90deg, #06b6d4, #22d3ee); }

/* News category colors (backend + dev-news) */
.tool-section.top-stories::before { background: linear-gradient(90deg, #ef4444, #f87171); }
.tool-section.runtimes::before { background: linear-gradient(90deg, #10b981, #34d399); }
.tool-section.frameworks::before { background: linear-gradient(90deg, #8b5cf6, #a78bfa); }
.tool-section.databases::before { background: linear-gradient(90deg, #3b82f6, #60a5fa); }
.tool-section.cloud::before { background: linear-gradient(90deg, #f59e0b, #fbbf24); }
.tool-section.architecture::before { background: linear-gradient(90deg, #06b6d4, #22d3ee); }
.tool-section.fullstack::before { background: linear-gradient(90deg, #7c6aff, #a78bfa); }
.tool-section.security::before { background: linear-gradient(90deg, #ef4444, #f87171); }
/* Dev news specific */
.tool-section.typescript::before { background: linear-gradient(90deg, #3178c6, #60a5fa); }
.tool-section.css::before { background: linear-gradient(90deg, #f472b6, #f9a8d4); }
.tool-section.html::before { background: linear-gradient(90deg, #f59e0b, #fbbf24); }
.tool-section.react::before { background: linear-gradient(90deg, #06b6d4, #22d3ee); }
.tool-section.react-native::before { background: linear-gradient(90deg, #8b5cf6, #a78bfa); }
.tool-section.js-frameworks::before { background: linear-gradient(90deg, #10b981, #34d399); }
.tool-section.build-tools::before { background: linear-gradient(90deg, #d97706, #f59e0b); }
.tool-section.dev-tools::before { background: linear-gradient(90deg, #7c6aff, #a78bfa); }
.tool-section.quick-links::before { background: linear-gradient(90deg, #6b7280, #9ca3af); }
/* Gentleman Releases */
.tool-section.releases-highlights::before { background: linear-gradient(90deg, #ec4899, #f472b6); }
.tool-section.releases-engram::before { background: linear-gradient(90deg, #db2777, #ec4899); }
.tool-section.releases-gentle-ai::before { background: linear-gradient(90deg, #be185d, #ec4899); }

/* Section Header */
.prose-ai-coding .tool-header,
.prose-brief .tool-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1.25rem;
}

/* Tight spacing between title and subtitle/publisher inside the header */
.prose-ai-coding .tool-header h2,
.prose-brief .tool-header h2 {
  margin: 0;
  line-height: 1.2;
}

.prose-ai-coding .tool-icon,
.prose-brief .tool-icon {
  font-size: 1.8rem;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-surface-2);
  border-radius: 12px;
  flex-shrink: 0;
  position: relative;
}

/* Hide the emoji fallback only inside known sections (where we render an SVG overlay) */
.prose-ai-coding .tool-section:is(.claude, .openai, .gemini, .copilot, .vscode) .tool-icon,
.prose-brief .tool-section:is(.top-stories, .runtimes, .frameworks, .databases, .cloud, .architecture, .fullstack, .security, .typescript, .css, .html, .react, .react-native, .js-frameworks, .build-tools, .dev-tools, .quick-links, .releases-highlights, .releases-engram, .releases-gentle-ai) .tool-icon {
  font-size: 0;
  line-height: 0;
}

/* Brand icon overlay for known tool-sections — hides the emoji fallback
   and renders an SVG mask colored with the section accent. Works for .md
   and .mdx briefs without touching their content. */
.prose-ai-coding .tool-section:is(.claude, .openai, .gemini, .copilot, .vscode) .tool-icon::after,
.prose-brief .tool-section:is(.top-stories, .runtimes, .frameworks, .databases, .cloud, .architecture, .fullstack, .security, .typescript, .css, .html, .react, .react-native, .js-frameworks, .build-tools, .dev-tools, .quick-links, .releases-highlights, .releases-engram, .releases-gentle-ai) .tool-icon::after {
  content: '';
  position: absolute;
  inset: 10px;
  background-color: currentColor;
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
}

/* AI Coding — brand-colored icons */
.prose-ai-coding .tool-section.claude { --brand: #f59e0b; }
.prose-ai-coding .tool-section.openai { --brand: #34d399; }
.prose-ai-coding .tool-section.gemini { --brand: #60a5fa; }
.prose-ai-coding .tool-section.copilot { --brand: #a78bfa; }
.prose-ai-coding .tool-section.vscode { --brand: #22d3ee; }

.prose-ai-coding .tool-section.claude .tool-icon { color: var(--brand); }
.prose-ai-coding .tool-section.openai .tool-icon { color: var(--brand); }
.prose-ai-coding .tool-section.gemini .tool-icon { color: var(--brand); }
.prose-ai-coding .tool-section.copilot .tool-icon { color: var(--brand); }
.prose-ai-coding .tool-section.vscode .tool-icon { color: var(--brand); }

.prose-ai-coding .tool-section.claude .tool-icon::after {
  mask-image: url('../icons/simple-icons/anthropic.svg');
  -webkit-mask-image: url('../icons/simple-icons/anthropic.svg');
}
.prose-ai-coding .tool-section.openai .tool-icon::after {
  mask-image: url('../icons/simple-icons/openai.svg');
  -webkit-mask-image: url('../icons/simple-icons/openai.svg');
}
.prose-ai-coding .tool-section.gemini .tool-icon::after {
  mask-image: url('../icons/simple-icons/googlegemini.svg');
  -webkit-mask-image: url('../icons/simple-icons/googlegemini.svg');
}
.prose-ai-coding .tool-section.copilot .tool-icon::after {
  mask-image: url('../icons/simple-icons/githubcopilot.svg');
  -webkit-mask-image: url('../icons/simple-icons/githubcopilot.svg');
}
.prose-ai-coding .tool-section.vscode .tool-icon::after {
  mask-image: url('../icons/simple-icons/visualstudiocode.svg');
  -webkit-mask-image: url('../icons/simple-icons/visualstudiocode.svg');
}

/* News briefs — abstract category icons (Lucide) */
.prose-brief .tool-section.top-stories { --brand: #f87171; }
.prose-brief .tool-section.runtimes { --brand: #34d399; }
.prose-brief .tool-section.frameworks { --brand: #a78bfa; }
.prose-brief .tool-section.databases { --brand: #60a5fa; }
.prose-brief .tool-section.cloud { --brand: #fbbf24; }
.prose-brief .tool-section.architecture { --brand: #22d3ee; }
.prose-brief .tool-section.fullstack { --brand: #a78bfa; }
.prose-brief .tool-section.security { --brand: #f87171; }
.prose-brief .tool-section.typescript { --brand: #60a5fa; }
.prose-brief .tool-section.css { --brand: #f9a8d4; }
.prose-brief .tool-section.html { --brand: #fbbf24; }
.prose-brief .tool-section.react { --brand: #22d3ee; }
.prose-brief .tool-section.react-native { --brand: #a78bfa; }
.prose-brief .tool-section.js-frameworks { --brand: #34d399; }
.prose-brief .tool-section.build-tools { --brand: #f59e0b; }
.prose-brief .tool-section.dev-tools { --brand: #a78bfa; }
.prose-brief .tool-section.quick-links { --brand: #9ca3af; }

.prose-brief .tool-section .tool-icon { color: var(--brand, var(--color-accent)); }

.prose-brief .tool-section.top-stories .tool-icon::after {
  mask-image: url('../icons/lucide/flame.svg');
  -webkit-mask-image: url('../icons/lucide/flame.svg');
}
.prose-brief .tool-section.runtimes .tool-icon::after {
  mask-image: url('../icons/lucide/terminal.svg');
  -webkit-mask-image: url('../icons/lucide/terminal.svg');
}
.prose-brief .tool-section.frameworks .tool-icon::after,
.prose-brief .tool-section.js-frameworks .tool-icon::after {
  mask-image: url('../icons/lucide/blocks.svg');
  -webkit-mask-image: url('../icons/lucide/blocks.svg');
}
.prose-brief .tool-section.databases .tool-icon::after {
  mask-image: url('../icons/lucide/database.svg');
  -webkit-mask-image: url('../icons/lucide/database.svg');
}
.prose-brief .tool-section.cloud .tool-icon::after {
  mask-image: url('../icons/lucide/cloud.svg');
  -webkit-mask-image: url('../icons/lucide/cloud.svg');
}
.prose-brief .tool-section.architecture .tool-icon::after {
  mask-image: url('../icons/lucide/layers.svg');
  -webkit-mask-image: url('../icons/lucide/layers.svg');
}
.prose-brief .tool-section.fullstack .tool-icon::after {
  mask-image: url('../icons/lucide/server.svg');
  -webkit-mask-image: url('../icons/lucide/server.svg');
}
.prose-brief .tool-section.security .tool-icon::after {
  mask-image: url('../icons/lucide/shield.svg');
  -webkit-mask-image: url('../icons/lucide/shield.svg');
}
.prose-brief .tool-section.typescript .tool-icon::after {
  mask-image: url('../icons/simple-icons/typescript.svg');
  -webkit-mask-image: url('../icons/simple-icons/typescript.svg');
}
.prose-brief .tool-section.css .tool-icon::after {
  mask-image: url('../icons/simple-icons/css.svg');
  -webkit-mask-image: url('../icons/simple-icons/css.svg');
}
.prose-brief .tool-section.html .tool-icon::after {
  mask-image: url('../icons/simple-icons/html5.svg');
  -webkit-mask-image: url('../icons/simple-icons/html5.svg');
}
.prose-brief .tool-section.react .tool-icon::after,
.prose-brief .tool-section.react-native .tool-icon::after {
  mask-image: url('../icons/simple-icons/react.svg');
  -webkit-mask-image: url('../icons/simple-icons/react.svg');
}
.prose-brief .tool-section.build-tools .tool-icon::after,
.prose-brief .tool-section.dev-tools .tool-icon::after {
  mask-image: url('../icons/lucide/package.svg');
  -webkit-mask-image: url('../icons/lucide/package.svg');
}
.prose-brief .tool-section.quick-links .tool-icon::after {
  mask-image: url('../icons/lucide/link.svg');
  -webkit-mask-image: url('../icons/lucide/link.svg');
}

/* Gentleman Releases — pink mustache theme */
.prose-brief .tool-section.releases-highlights { --brand: #f472b6; }
.prose-brief .tool-section.releases-engram { --brand: #ec4899; }
.prose-brief .tool-section.releases-gentle-ai { --brand: #f472b6; }

.prose-brief .tool-section.releases-highlights .tool-icon::after {
  mask-image: url('../icons/custom/mustache.svg');
  -webkit-mask-image: url('../icons/custom/mustache.svg');
}
.prose-brief .tool-section.releases-engram .tool-icon::after {
  mask: none;
  -webkit-mask: none;
  background-color: transparent;
  background-image: url('../icons/custom/engram-sticker.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  inset: 0;
  border-radius: inherit;
}
.prose-brief .tool-section.releases-gentle-ai .tool-icon::after {
  mask: none;
  -webkit-mask: none;
  background-color: transparent;
  background-image: url('../icons/custom/gentle-ai-sticker.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  inset: 0;
  border-radius: inherit;
}

.prose-ai-coding .tool-meta,
.prose-brief .tool-meta {
  flex: 1;
}

.prose-ai-coding .tool-meta .publisher,
.prose-brief .tool-meta .subtitle {
  font-size: 0.8rem;
  color: var(--color-text-muted);
}

.prose-ai-coding .version-badge,
.prose-brief .version-badge {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-accent);
  background: var(--color-accent-glow);
  padding: 0.2rem 0.6rem;
  border-radius: 20px;
  white-space: nowrap;
}

/* Update Items */
.prose-ai-coding .update-item,
.prose-brief .update-item {
  display: flex;
  gap: 1rem;
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--color-border);
  align-items: flex-start;
}

.prose-ai-coding .update-item:last-child,
.prose-brief .update-item:last-child {
  border-bottom: none;
}

.prose-ai-coding .update-tag,
.prose-brief .update-tag {
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 0.2rem 0.5rem;
  border-radius: 6px;
  white-space: nowrap;
  flex-shrink: 0;
  margin-top: 0.15rem;
}

/* Tag colors — shared */
.tag-feature { background: rgba(52,211,153,0.15); color: var(--color-green); }
.tag-fix { background: rgba(248,113,113,0.15); color: var(--color-red); }
.tag-model { background: rgba(124,106,255,0.15); color: var(--color-accent); }
.tag-preview { background: rgba(251,191,36,0.15); color: var(--color-yellow); }
.tag-security { background: rgba(244,114,182,0.15); color: #f472b6; }
.tag-update { background: rgba(96,165,250,0.15); color: var(--color-blue); }
/* Impact tags for news briefs */
.tag-breaking { background: rgba(239,68,68,0.2); color: #f87171; }
.tag-notable { background: rgba(251,191,36,0.2); color: #fbbf24; }
.tag-minor { background: rgba(52,211,153,0.15); color: var(--color-green); }
.tag-patch { background: rgba(96,165,250,0.15); color: var(--color-blue); }
.tag-release { background: rgba(124,106,255,0.15); color: var(--color-accent); }
.tag-deprecation { background: rgba(251,146,60,0.15); color: #fb923c; }
.tag-ga { background: rgba(52,211,153,0.2); color: var(--color-green); }
.tag-beta { background: rgba(251,191,36,0.15); color: var(--color-yellow); }

/* Update Content */
.prose-ai-coding .update-content h3,
.prose-brief .update-content h3 {
  font-size: 0.95rem;
  font-weight: 600;
  margin: 0 0 0.3rem 0;
}

.prose-ai-coding .update-content p,
.prose-brief .update-content p {
  font-size: 0.85rem;
  color: var(--color-text-muted);
  line-height: 1.5;
  margin: 0 0 0.25rem 0;
}

.prose-ai-coding .update-content a,
.prose-brief .update-content a {
  color: var(--color-blue);
  text-decoration: none;
  font-size: 0.75rem;
  opacity: 0.8;
}

.prose-ai-coding .update-content a:hover,
.prose-brief .update-content a:hover {
  opacity: 1;
  text-decoration: underline;
}

/* Stats Bar */
.prose-ai-coding .stats-bar,
.prose-brief .stats-bar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 0.75rem;
  margin: 1.5rem 0 2rem;
}

.prose-ai-coding .stat-card,
.prose-brief .stat-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  padding: 1rem;
  text-align: center;
  transition: border-color 0.2s;
}

.prose-ai-coding .stat-card:hover,
.prose-brief .stat-card:hover {
  border-color: var(--color-accent);
}

.prose-ai-coding .stat-num,
.prose-brief .stat-num {
  font-size: 1.8rem;
  font-weight: 800;
  background: linear-gradient(135deg, var(--color-accent), var(--color-cyan));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.prose-ai-coding .stat-label,
.prose-brief .stat-label {
  font-size: 0.75rem;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-top: 0.2rem;
}

/* Model Table */
.prose-ai-coding .model-table-wrapper {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 16px;
  padding: 1.5rem 2rem;
  margin: 2rem 0;
  overflow-x: auto;
}

.prose-ai-coding .model-table-wrapper h2 {
  margin-bottom: 0.5rem;
}

.prose-ai-coding .subtitle-text {
  color: var(--color-text-muted);
  font-size: 0.85rem;
  margin-bottom: 1.25rem;
}

.prose-ai-coding table,
.prose-brief table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
}

.prose-ai-coding thead th,
.prose-brief thead th {
  text-align: left;
  padding: 0.75rem 1rem;
  font-weight: 700;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-text-muted);
  border-bottom: 2px solid var(--color-border);
  white-space: nowrap;
  background: transparent;
}

.prose-ai-coding tbody tr,
.prose-brief tbody tr {
  border-bottom: 1px solid var(--color-border);
  transition: background 0.15s;
}

.prose-ai-coding tbody tr:hover,
.prose-brief tbody tr:hover {
  background: var(--color-surface-2);
}

.prose-ai-coding tbody td,
.prose-brief tbody td {
  padding: 0.75rem 1rem;
  vertical-align: middle;
  border: none;
}

.upcoming-row { opacity: 0.55; }
.upcoming-row td { font-style: italic; }
.recent-row { background: rgba(124,106,255,0.05); }

/* Provider Badges */
.provider-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.2rem 0.6rem;
  border-radius: 6px;
  white-space: nowrap;
}

.provider-anthropic { background: rgba(217,119,6,0.15); color: #f59e0b; }
.provider-openai { background: rgba(16,185,129,0.15); color: #34d399; }
.provider-google { background: rgba(59,130,246,0.15); color: #60a5fa; }
.provider-meta { background: rgba(96,165,250,0.15); color: #93bbfc; }
.provider-xai { background: rgba(244,114,182,0.15); color: #f472b6; }
.provider-mistral { background: rgba(251,146,60,0.15); color: #fb923c; }
.provider-alibaba { background: rgba(248,113,113,0.15); color: #f87171; }
.provider-deepseek { background: rgba(34,211,238,0.15); color: #22d3ee; }
.provider-moonshot { background: rgba(167,139,250,0.15); color: #a78bfa; }
.provider-zhipu { background: rgba(251,191,36,0.15); color: #fbbf24; }
.provider-bytedance { background: rgba(52,211,153,0.15); color: #34d399; }
.provider-minimax { background: rgba(244,114,182,0.15); color: #f9a8d4; }

/* Provider badge icons — mini brand logo before the provider name */
.provider-badge::before {
  content: '';
  display: inline-block;
  width: 0.95em;
  height: 0.95em;
  background-color: currentColor;
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
  vertical-align: -0.12em;
  flex-shrink: 0;
}

.provider-anthropic::before { mask-image: url('../icons/simple-icons/anthropic.svg'); -webkit-mask-image: url('../icons/simple-icons/anthropic.svg'); }
.provider-openai::before { mask-image: url('../icons/simple-icons/openai.svg'); -webkit-mask-image: url('../icons/simple-icons/openai.svg'); }
.provider-google::before { mask-image: url('../icons/simple-icons/google.svg'); -webkit-mask-image: url('../icons/simple-icons/google.svg'); }
.provider-meta::before { mask-image: url('../icons/simple-icons/meta.svg'); -webkit-mask-image: url('../icons/simple-icons/meta.svg'); }
.provider-xai::before { mask-image: url('../icons/lucide/atom.svg'); -webkit-mask-image: url('../icons/lucide/atom.svg'); }
.provider-mistral::before { mask-image: url('../icons/simple-icons/mistralai.svg'); -webkit-mask-image: url('../icons/simple-icons/mistralai.svg'); }
.provider-alibaba::before { mask-image: url('../icons/simple-icons/alibabacloud.svg'); -webkit-mask-image: url('../icons/simple-icons/alibabacloud.svg'); }
.provider-deepseek::before { mask-image: url('../icons/lucide/search.svg'); -webkit-mask-image: url('../icons/lucide/search.svg'); }
.provider-moonshot::before { mask-image: url('../icons/lucide/moon.svg'); -webkit-mask-image: url('../icons/lucide/moon.svg'); }
.provider-zhipu::before { mask-image: url('../icons/lucide/brain-circuit.svg'); -webkit-mask-image: url('../icons/lucide/brain-circuit.svg'); }
.provider-bytedance::before { mask-image: url('../icons/simple-icons/bytedance.svg'); -webkit-mask-image: url('../icons/simple-icons/bytedance.svg'); }
.provider-minimax::before { mask-image: url('../icons/simple-icons/minimax.svg'); -webkit-mask-image: url('../icons/simple-icons/minimax.svg'); }

/* Weight & Tier Badges */
.weight-badge {
  font-size: 0.7rem;
  font-weight: 600;
  padding: 0.15rem 0.45rem;
  border-radius: 4px;
}

.weight-open { background: rgba(52,211,153,0.15); color: var(--color-green); }
.weight-proprietary { background: rgba(248,113,113,0.1); color: var(--color-red); }
.weight-upcoming { background: rgba(251,191,36,0.1); color: var(--color-yellow); }

.tier { font-weight: 800; font-size: 0.8rem; }
.tier-splus { color: #fbbf24; }
.tier-s { color: #f59e0b; }
.tier-aplus { color: #60a5fa; }
.tier-a { color: #818cf8; }
.tier-bplus { color: var(--color-text-muted); }

.tier-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 1.25rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--color-border);
  font-size: 0.75rem;
  color: var(--color-text-muted);
}

.tier-legend span {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

/* Notable Trends */
.prose-ai-coding .trends,
.prose-brief .trends {
  background: linear-gradient(135deg, var(--color-surface), var(--color-surface-2));
  border: 1px solid var(--color-border);
  border-radius: 16px;
  padding: 1.5rem 2rem;
  margin-top: 2rem;
  position: relative;
  overflow: hidden;
}

.prose-ai-coding .trends::before,
.prose-brief .trends::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #7c6aff, #60a5fa, #22d3ee, #34d399, #fbbf24);
  border-radius: 16px 16px 0 0;
}

.prose-ai-coding .trends h2,
.prose-brief .trends h2 {
  font-size: 1.3rem;
  margin-bottom: 0.75rem;
}

.prose-ai-coding .trends p,
.prose-brief .trends p {
  color: var(--color-text-muted);
  font-size: 0.9rem;
  line-height: 1.7;
}

/* Quick Links — responsive chip grid. Works for both brief shapes:
   - <div class="update-content"> with inline anchors (dev-news style)
   - <div class="update-content"><p> anchors separated by " · " (backend style)
   When a <p> wrapper exists, the grid lives on the <p>; otherwise on
   .update-content directly. :has() keeps only one container active. */
.prose-brief .tool-section.quick-links .update-item {
  border-bottom: none;
  padding: 0;
  display: block;
}

/* When anchors are direct children of .update-content, use a grid.
   When wrapped in a <p> (backend briefs use " · " as separator), use
   flex-wrap on the <p> so the anonymous text nodes collapse to 0 width
   via font-size: 0 and don't break the layout into holes. */
.prose-brief .tool-section.quick-links .update-content {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.5rem;
  width: 100%;
  align-items: stretch;
}

.prose-brief .tool-section.quick-links .update-content:has(> p) {
  display: block;
}

.prose-brief .tool-section.quick-links .update-content > p {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0;
  font-size: 0;
  line-height: 0;
}

@media (min-width: 640px) {
  .prose-brief .tool-section.quick-links .update-content {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 900px) {
  .prose-brief .tool-section.quick-links .update-content {
    grid-template-columns: repeat(3, 1fr);
  }
}

.prose-brief .tool-section.quick-links .update-content a {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  width: 100%;
  height: 100%;
  font-size: 0.85rem;
  line-height: 1.3;
  padding: 0.6rem 0.85rem;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  background: var(--color-surface-2);
  color: var(--color-text);
  text-decoration: none;
  opacity: 1;
  transition: all 0.15s ease;
  white-space: normal;
  word-break: break-word;
}

/* Inside the <p> flex container, fixed min-width so chips are balanced */
.prose-brief .tool-section.quick-links .update-content > p > a {
  flex: 0 1 auto;
  min-width: 0;
}

@media (min-width: 480px) {
  .prose-brief .tool-section.quick-links .update-content > p > a {
    min-width: 180px;
  }
}

@media (min-width: 640px) {
  .prose-brief .tool-section.quick-links .update-content > p > a {
    min-width: 220px;
  }
}

.prose-brief .tool-section.quick-links .update-content a::before {
  content: '';
  display: inline-block;
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  background-color: var(--color-text-muted);
  mask: url('../icons/lucide/external-link.svg') center/contain no-repeat;
  -webkit-mask: url('../icons/lucide/external-link.svg') center/contain no-repeat;
  transition: background-color 0.15s ease;
}

.prose-brief .tool-section.quick-links .update-content a:hover {
  border-color: var(--color-accent);
  background: var(--color-surface);
  color: var(--color-accent);
  text-decoration: none;
}

.prose-brief .tool-section.quick-links .update-content a:hover::before {
  background-color: var(--color-accent);
}

/* ========== Scroll reveal for brief blocks ==========
   Applies the reveal-up behavior from global.css to brief elements
   without requiring any .md/.mdx edits. Transitions in when the
   IntersectionObserver in BaseHead adds .is-visible (done via a
   MutationObserver pre-tag below) — but we already intercept these
   elements from the ambient script by adding the class on load. */
.prose-ai-coding .stat-card,
.prose-brief .stat-card,
.prose-ai-coding .tool-section,
.prose-brief .tool-section,
.prose-ai-coding .model-table-wrapper,
.prose-ai-coding .trends,
.prose-brief .trends {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 700ms cubic-bezier(0.22, 1, 0.36, 1),
              transform 700ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}

.prose-ai-coding .stat-card.is-visible,
.prose-brief .stat-card.is-visible,
.prose-ai-coding .tool-section.is-visible,
.prose-brief .tool-section.is-visible,
.prose-ai-coding .model-table-wrapper.is-visible,
.prose-ai-coding .trends.is-visible,
.prose-brief .trends.is-visible {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .prose-ai-coding .stat-card,
  .prose-brief .stat-card,
  .prose-ai-coding .tool-section,
  .prose-brief .tool-section,
  .prose-ai-coding .model-table-wrapper,
  .prose-ai-coding .trends,
  .prose-brief .trends {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

html.no-js .prose-ai-coding .stat-card,
html.no-js .prose-brief .stat-card,
html.no-js .prose-ai-coding .tool-section,
html.no-js .prose-brief .tool-section,
html.no-js .prose-ai-coding .model-table-wrapper,
html.no-js .prose-ai-coding .trends,
html.no-js .prose-brief .trends {
  opacity: 1;
  transform: none;
}

/* Responsive */
@media (max-width: 768px) {
  .prose-ai-coding .tool-section,
  .prose-brief .tool-section { padding: 1rem 1.25rem; }
  .prose-ai-coding .model-table-wrapper { padding: 1rem; }
  .prose-ai-coding .stats-bar,
  .prose-brief .stats-bar { grid-template-columns: repeat(2, 1fr); }
  .prose-ai-coding table,
  .prose-brief table { font-size: 0.75rem; }
  .prose-ai-coding thead th,
  .prose-ai-coding tbody td,
  .prose-brief thead th,
  .prose-brief tbody td { padding: 0.5rem; }
  .prose-brief .quick-links-grid { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .prose-ai-coding .tool-section,
  .prose-brief .tool-section { padding: 0.875rem 1rem; }
  .prose-ai-coding .stats-bar,
  .prose-brief .stats-bar { grid-template-columns: 1fr; }
  .prose-brief .tool-section.quick-links .update-content > p > a { width: 100%; }
  .prose-ai-coding img,
  .prose-brief img { max-width: 100%; height: auto; }
  pre, code { overflow-x: auto; max-width: 100%; word-break: break-all; }
}