/* Detail families derived from the delivered October 2026 system.
   Scoped by template marker: never changes the root directory or marketplace. */
body[data-detail] main { font-size: 16px; line-height: 1.65; }
body[data-detail] main :is(h1,h2,h3,p,dt,dd,a,span) { overflow-wrap: anywhere; }
body[data-detail] main :is(h1,h2,h3) { font-weight: 600; letter-spacing: -.025em; }
body[data-detail] main .wrap { max-inline-size: 1520px; padding-inline: clamp(20px,3.29vw,50px); }
body[data-detail] .detail-hero { background: #0d0d0d; color: #fff; border: 0; padding-block: 40px 56px; }
body[data-detail] .detail-hero h1 { color: #fff; font-size: clamp(30px,1.5rem + 1.1vw,40px); line-height: 1.2; max-inline-size: 1050px; margin-block: 16px; }
body[data-detail] .detail-hero :is(.sub,.dek) { color: #d8d8d8; font-size: 18px; line-height: 1.6; max-inline-size: 78ch; }
body[data-detail] .detail-hero .eyebrow { color: #b8b8b8; font-size: 14px; letter-spacing: .04em; text-transform: none; }
body[data-detail] .detail-breadcrumb { margin-block-end: 32px; }
body[data-detail] .detail-breadcrumb>div { display: flex; flex-wrap: wrap; gap: 8px 12px; font-size: 14px; line-height: 1.5; }
body[data-detail] .detail-breadcrumb :is(a,span) { color: #b8b8b8; }
body[data-detail] .detail-breadcrumb a:hover { color: #fff; }
body[data-detail] .detail-breadcrumb .u-secondary { color: #fff; }
body[data-detail] .detail-back { display: inline-flex; align-items: center; min-block-size: 44px; margin-block-start: 20px; color: #fff; font-size: 14px; text-decoration: none; }
body[data-detail] .detail-back:hover { text-decoration: underline; }
body[data-detail] .detail-section-head { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-block-end: 28px; }
body[data-detail] .detail-section-head h2 { font-size: 32px; line-height: 1.25; }
body[data-detail] .detail-section-head p { color: #666; font-size: 16px; }
body[data-detail] .detail-section-title { font-size: 24px; line-height: 1.35; margin: 0 0 20px; padding-block-end: 16px; border-block-end: 1px solid #d8d8d8; }
body[data-detail] .detail-card-title { font-size: 20px; line-height: 1.4; margin-block-end: 20px; font-weight: 600; letter-spacing: -.015em; color: #0d0d0d; }
body[data-detail] .btn { font-size: 16px; white-space: normal; max-inline-size: 100%; text-align: center; line-height: 1.4; }
body[data-detail] .card { box-shadow: none; border: 0; border-radius: 4px; background: #f3f3f5; padding: 28px; }
body[data-detail] .detail-closing { background: #0d0d0d; }
body[data-detail] .detail-closing h2 { font-size: clamp(26px,1.3rem + 1vw,36px); line-height: 1.3; max-inline-size: 850px; }
body[data-detail] .detail-closing p { font-size: 16px; }
body[data-detail] .detail-empty { padding: 64px 24px; border-radius: 4px; text-align: center; background: #f3f3f5; }
body[data-detail] .detail-empty h3 { font-size: 24px; }
body[data-detail] .detail-empty p { font-size: 16px; color: #666; }
body[data-detail] .badge { border-radius: 4px; padding: 6px 10px; line-height: 1.5; font-size: 14px; white-space: normal; max-inline-size: 100%; }
body[data-detail] :is(a,button,[tabindex]):focus-visible { outline: 3px solid #e60015; outline-offset: 4px; }

/* Category index: the numbered tiles map only to existing product routes. */
body[data-page="directory"][data-detail="category"] .cat-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 20px; }
body[data-detail="category"] .cat-tile { display: grid; grid-template-columns: 1fr auto; align-items: start; min-inline-size: 0; min-block-size: 220px; gap: 32px 20px; padding: 28px; background: #f3f3f5; border: 1px solid transparent; border-radius: 4px; box-shadow: none; text-decoration: none; color: #0d0d0d; }
body[data-detail="category"] .cat-tile:hover { border-color: #0d0d0d; background: #eee; box-shadow: none; }
body[data-detail="category"] .category-number { color: #666; font-size: 14px; font-variant-numeric: tabular-nums; grid-column: 1/-1; }
body[data-detail="category"] .cat-tile .name { font-size: 24px; line-height: 1.35; font-weight: 500; }
body[data-detail="category"] .cat-tile .count { display: block; color: #666; font-size: 14px; margin-block-start: 12px; background: none; padding: 0; }
body[data-detail="category"] .category-arrow { font-size: 26px; align-self: end; }

/* Product category: source imagery accompanies the existing supplier cards. */
body[data-page="directory"][data-detail="product"] .detail-supplier-list { display: grid; gap: 24px; }
body[data-detail="product"] .detail-supplier { display: grid; grid-template-columns: minmax(240px,.65fr) minmax(0,1.7fr); background: #f3f3f5; border-radius: 4px; overflow: hidden; }
body[data-detail="product"] .detail-supplier-photo { display: grid; place-items: center; min-inline-size: 0; background: #e8e8eb; color: #666; text-align: center; text-decoration: none; }
body[data-detail="product"] .detail-supplier-photo img { display: block; inline-size: 100%; block-size: 100%; aspect-ratio: 4/3; object-fit: cover; }
body[data-detail="product"] .company-card { padding: 28px; background: transparent; border: 0; border-radius: 0; box-shadow: none; gap: 16px; }
body[data-detail="product"] .company-card .head { display: flex; justify-content: space-between; gap: 20px; }
body[data-detail="product"] .company-card .name { font-size: 24px; line-height: 1.35; font-weight: 600; text-decoration: none; }
body[data-detail="product"] .company-card .logo { inline-size: 56px; block-size: 56px; object-fit: contain; background: #fff; border-radius: 4px; font-size: 18px; }
body[data-detail="product"] .supplier-product-pill { color: #0d0d0d; background: #fff; border: 1px solid #d8d8d8; border-radius: 4px; font-size: 14px; font-weight: 400; }
body[data-detail="product"] :is(.supplier-market-values,.supplier-metric,.supplier-credentials,.supplier-label) { font-size: 14px; line-height: 1.6; }
body[data-detail="product"] .supplier-capacity { border-color: #d8d8d8; }
body[data-detail="product"] .company-card .actions { gap: 12px; }
body[data-detail="product"] .company-card .actions .btn { font-size: 14px; }

/* Supply / demand details: preserve semantic row headers and sample status. */
body[data-page="boards"][data-detail="board"] .sample-banner { padding-block: 16px; background: #f3f3f5; border-block-end: 1px solid #d8d8d8; font-size: 14px; line-height: 1.6; color: #454545; }
body[data-detail="board"] .sample-banner-inner { display: flex; align-items: start; gap: 12px; }
body[data-detail="board"] .sample-banner .p100-icon { flex-shrink: 0; margin-block-start: 3px; }
body[data-detail="board"] .meta-pills { display: flex; flex-wrap: wrap; gap: 8px; margin-block: 24px; }
body[data-detail="board"] .meta-pills .badge { color: #fff; background: transparent; border: 1px solid #666; font-size: 14px; }
body[data-detail="board"] .boards-detail-grid { display: grid; grid-template-columns: minmax(0,1.65fr) minmax(300px,1fr); gap: 48px; align-items: start; }
body[data-detail="board"] .boards-detail-grid>* { min-inline-size: 0; }
body[data-detail="board"] .boards-detail-grid>.u-stack-6 { display: grid; gap: 40px; }
body[data-detail="board"] .specs-table { inline-size: 100%; table-layout: fixed; border-collapse: collapse; margin-block-start: 20px; font-size: 16px; line-height: 1.6; }
body[data-detail="board"] .specs-table :is(th,td) { padding: 20px; text-align: start; vertical-align: top; border-block-end: 1px solid #d8d8d8; overflow-wrap: anywhere; }
body[data-detail="board"] .specs-table th { inline-size: 35%; background: #f3f3f5; font-weight: 500; color: #666; }
body[data-detail="board"] .specs-table td { color: #0d0d0d; }
body[data-detail="board"] .boards-detail-grid aside { display: grid; gap: 24px; }
body[data-detail="board"] .boards-detail-grid aside h3 { font-size: 20px; line-height: 1.4; font-weight: 600; text-transform: none; letter-spacing: -.015em; }
body[data-detail="board"] .boards-detail-grid dl { font-size: 14px; line-height: 1.6; }
body[data-detail="board"] .boards-detail-grid dl>div { display: flex; justify-content: space-between; gap: 16px; padding-block: 12px; border-block-end: 1px solid #d8d8d8; }
body[data-detail="board"] .boards-detail-grid dt { flex: 0 0 38%; color: #666; }
body[data-detail="board"] .boards-detail-grid dd { min-inline-size: 0; font-family: inherit; text-align: end; }
body[data-detail="board"] .detail-notice h3 { font-size: 20px; }
body[data-detail="board"] .detail-notice p { font-size: 16px !important; line-height: 1.65; }
body[data-detail="board"] .detail-matchmaking { background: #0d0d0d; color: #fff; }
body[data-detail="board"] .detail-matchmaking .eyebrow { color: #b8b8b8 !important; font-size: 14px; }
body[data-detail="board"] .detail-matchmaking h3 { margin-block: 16px; color: #fff; }
body[data-detail="board"] .detail-matchmaking p { font-size: 16px; line-height: 1.65; color: #d8d8d8 !important; }

@media (max-width:1000px) {
  body[data-page="directory"][data-detail="category"] .cat-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  body[data-detail="product"] .detail-supplier { grid-template-columns: minmax(180px,.65fr) minmax(0,1.3fr); }
  body[data-detail="board"] .boards-detail-grid { grid-template-columns: 1fr; gap: 40px; }
  body[data-detail="board"] .boards-detail-grid aside { grid-template-columns: repeat(2,minmax(0,1fr)); align-items: start; }
}
@media (max-width:640px) {
  body[data-detail] .detail-hero { padding-block: 28px 36px; }
  body[data-detail] .detail-breadcrumb { margin-block-end: 24px; }
  body[data-detail] .detail-hero :is(.sub,.dek) { font-size: 16px; }
  body[data-detail] .detail-section-head h2 { font-size: 26px; }
  body[data-detail] .card { padding: 24px; }
  body[data-page="directory"][data-detail="category"] .cat-grid { grid-template-columns: 1fr; gap: 16px; }
  body[data-detail="category"] .cat-tile { min-block-size: 180px; padding: 24px; gap: 24px 16px; }
  body[data-detail="product"] .detail-supplier { grid-template-columns: 1fr; }
  body[data-detail="product"] .detail-supplier-photo img { aspect-ratio: 16/10; max-block-size: 320px; }
  body[data-detail="product"] .company-card { padding: 24px 20px; }
  body[data-detail="product"] .company-card .name { font-size: 22px; }
  body[data-detail="product"] .company-card .logo { inline-size: 48px; block-size: 48px; }
  body[data-detail="board"] .boards-detail-grid aside { grid-template-columns: 1fr; }
  body[data-detail="board"] .specs-table :is(th,td) { padding: 16px 12px; font-size: 14px; }
  body[data-detail="board"] .specs-table th { inline-size: 40%; }
}