/* Engineering articles: component styles, loaded on /articles/ only. */
.aspec{background:#fff;border:1px solid var(--s200);border-top:3px solid var(--accent);border-radius:12px;padding:16px 20px 6px;margin:0 0 2em}
.aspec__h{font-family:var(--mono);font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;color:var(--accent-text);margin:0 0 8px;font-weight:500}
.aspec dl{margin:0;display:grid}
.aspec dl>div{display:grid;grid-template-columns:minmax(0,11em) minmax(0,1fr);gap:12px;padding:9px 0;border-top:1px solid var(--s200)}
.aspec dt{font-family:var(--mono);font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);padding-top:2px}
.aspec dd{margin:0;color:var(--text);font-size:.95rem}
.ack{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:clamp(20px,4vw,48px);border-radius:16px;padding:clamp(24px,4vw,44px);margin-bottom:clamp(40px,6vw,72px)}
.ack h2{color:#fff;margin:0 0 14px}
.ack ul{list-style:none;padding:0;margin:0;display:grid;gap:8px}
.ack li{padding-left:28px;position:relative;color:var(--on-dark)}
.ack li:before{content:'';position:absolute;left:2px;top:.45em;width:12px;height:7px;border-left:2px solid var(--accent-hi);border-bottom:2px solid var(--accent-hi);transform:rotate(-45deg)}
.ack__go{display:flex;flex-direction:column;gap:12px;align-self:end}
.ack__go p{color:var(--on-dark-2);margin:0}
.achips{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.achips a{font-family:var(--mono);font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;color:var(--on-dark);border:1px solid rgba(255,255,255,.3);border-radius:999px;padding:6px 12px;text-decoration:none}
.areg{list-style:none;padding:0;margin:0 0 clamp(40px,6vw,72px);border-top:2px solid var(--text)}
.areg li{border-bottom:1px solid var(--s200)}
.areg a{display:grid;grid-template-columns:8.5em minmax(0,1fr) 10em;gap:16px;padding:16px 4px;text-decoration:none;color:var(--text)}
.areg a:hover .areg__t{color:var(--accent-text)}
.areg__d,.areg__k{font-family:var(--mono);font-size:.8rem;color:var(--muted);padding-top:3px}
.areg__t{font-weight:650;font-size:1.05rem}
.areg__t small{display:block;font-weight:400;color:var(--muted);font-size:.92rem;margin-top:4px}
@media (max-width:900px){.ack{grid-template-columns:minmax(0,1fr)}
.aspec dl>div{grid-template-columns:minmax(0,1fr);gap:2px}
.areg a{grid-template-columns:minmax(0,1fr);gap:4px}
}

/* The article's header and reading grid share a measure; storefront frames stay independent. */
.pagehead--article { padding-block: 36px; }
.pagehead--article > .wrap { display: grid; grid-template-columns: minmax(0, 760px) minmax(200px, 260px); column-gap: 44px; justify-content: center; }
.pagehead--article > .wrap > * { grid-column: 1; }
.pagehead--article h1 { font-size: clamp(2rem, 3.5vw, 3rem); font-weight: 700; line-height: 1.15; max-width: 32ch; text-wrap: balance; }
.pagehead--article .lead { max-width: 74ch; font-size: 1.08rem; line-height: 1.65; margin-bottom: 0; }
.pagehead--article .guide__by { line-height: 1.6; }
.sec.article-layout { display: grid; grid-template-columns: minmax(0, 760px) minmax(200px, 260px); gap: 28px 44px; justify-content: center; align-items: start; padding-block: 36px 0; }
.article-layout > .prose { grid-column: 1; grid-row: 1; max-width: none; min-width: 0; padding-bottom: 0; overflow-wrap: anywhere; font-size: 1.08rem; line-height: 1.65; }
.article-layout > .aspec { grid-column: 1; grid-row: 2; margin: 0; background: #edf0ed; border-radius: 4px; }
.article-layout .aspec dd { line-height: 1.55; overflow-wrap: anywhere; }
.article-layout .aspec a { color: var(--accent-text); text-underline-offset: 3px; }
.article-layout > .toc { grid-column: 2; grid-row: 1 / span 2; position: sticky; top: calc(var(--hdr) + 16px); padding: 16px; border: 1px solid var(--s200); background: #fff; border-radius: 6px; min-width: 0; }
.article-toc summary { display: flex; justify-content: space-between; align-items: center; gap: 12px; cursor: pointer; margin: 0; list-style: none; }
.article-toc summary::-webkit-details-marker { display: none; }
.article-toc summary::after { content: '+'; font: 500 1.15rem/1 var(--font); }
.article-toc details[open] > summary::after { content: '\2212'; }
.article-toc details[open] > summary { margin-bottom: 10px; }
.article-toc ol { max-height: calc(100svh - var(--hdr) - 104px); overflow-y: auto; scrollbar-width: thin; }
.article-toc a { padding-block: 8px; overflow-wrap: anywhere; }
.prose--article > :first-child { margin-top: 0; }
.prose--article h2 { font-size: clamp(1.4rem, 2vw, 1.8rem); font-weight: 600; line-height: 1.3; margin-top: 1.5em; padding-top: 18px; border-top: 1px solid var(--s200); }
.prose--article :is(h2, h3) { scroll-margin-top: 16px; }
.prose--article h3 { font-weight: 700; line-height: 1.35; }
.prose--article li > p:last-child { margin-bottom: 0; }
.prose--article :is(ul, ol, li, .callout) { min-width: 0; }
.prose--article .tblwrap { max-width: 100%; overscroll-behavior-x: contain; }
.prose--article .cmp { overflow-wrap: normal; }
.prose--article .cmp :is(th, td) { min-width: 9em; }
.sec.article-action { padding-top: 40px; }
.article-action .ack { margin: 0; }
.sec.article-related { padding-block: 40px 0; }
.sec.article-related:last-of-type { padding-bottom: 48px; }
.article-related :is(h2, h3), .article-action h2 { font-weight: 700; line-height: 1.25; }
.article-related h2, .article-action h2 { font-size: clamp(1.5rem, 2.2vw, 2rem); }
.article-related .arts, .article-related .lost { padding-bottom: 0; }
body:has(.areg) .pagehead { background: #e9ecea; color: var(--text); border-bottom: 1px solid #d2d8d5; padding-block: 36px; }
body:has(.areg) .pagehead :is(.lead, .crumbs, .crumbs a) { color: #4c585f; }
body:has(.areg) .pagehead h1 { font-weight: 700; line-height: 1.15; }
.achips a { font-size: .78rem; letter-spacing: .025em; padding: 9px 12px; min-height: 40px; display: inline-flex; align-items: center; }
body:has(.areg) .achips a { color: #29353d; border-color: #b9c4be; background: #fff; border-radius: 4px; }
body:has(.areg) .achips a:hover { color: var(--accent-text); border-color: var(--accent); }
body:has(.areg) .sec:has(.areg) { padding-block: 32px 4px; }
body:has(.areg) .sec__head { margin-bottom: 18px; }
body:has(.areg) .sec__head h2 { font-size: clamp(1.5rem, 2.4vw, 2rem); font-weight: 700; }
.areg { margin-bottom: 0; border-top: 1px solid #b9c4be; background: #fff; }
.areg a { padding: 22px 18px; grid-template-columns: 8em minmax(0, 1fr) 9em; }
.areg li:hover { background: #f0f3f0; }
.areg__t { font-size: 1.17rem; line-height: 1.4; }
.areg__t small { font-size: .96rem; line-height: 1.65; margin-top: 8px; max-width: 82ch; }
@media (max-width: 999px) {
  .pagehead--article > .wrap, .sec.article-layout { grid-template-columns: minmax(0, 760px); }
  .pagehead--article > .wrap { justify-content: center; }
  .sec.article-layout { gap: 24px; padding-top: 24px; }
  .article-layout > .toc { grid-column: 1; grid-row: 1; position: static; }
  .article-layout > .prose { grid-column: 1; grid-row: 2; }
  .article-layout > .aspec { grid-column: 1; grid-row: 3; }
  .article-toc ol { max-height: none; overflow: visible; }
}
@media (max-width: 900px) {
  .areg a { grid-template-columns: minmax(0, 1fr); gap: 6px; padding: 20px 16px; }
  .areg__k { color: var(--accent-text); }
}
@media (max-width: 480px) {
  .pagehead--article { padding-block: 24px; }
  .pagehead--article .crumbs { margin-bottom: 16px; }
  .pagehead--article h1 { font-size: clamp(1.75rem, 7.5vw, 2rem); }
  .pagehead--article .lead { font-size: 1.05rem; }
  .article-layout > .prose { font-size: 1.05rem; }
  .aspec dl > div { grid-template-columns: minmax(0, 1fr); gap: 3px; }
  .achips { gap: 6px; }
}