/* BAOI 2026-10-17 — definition-specific editorial polish and lightweight educational diagrams.
   Scoped only to dictionary definition pages. Does not touch guides, tools or diagnostics. */
main[data-baoi-resource-family="definition"] > .hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  text-align: center;
  margin: 17px 0 28px;
  padding: clamp(30px,4.6vw,56px) clamp(18px,4vw,58px) clamp(26px,3.5vw,42px);
  border: 1px solid rgba(84,167,219,.28);
  border-radius: 24px;
  background: radial-gradient(ellipse at 50% -52%,rgba(39,164,221,.29),transparent 73%),
              linear-gradient(125deg,rgba(11,32,57,.99),rgba(14,29,51,.94) 48%,rgba(17,33,61,.98));
  box-shadow: inset 0 1px 0 rgba(164,224,255,.08),0 18px 48px rgba(2,12,23,.22);
}
main[data-baoi-resource-family="definition"] > .hero::after {
  content: "";position:absolute;pointer-events:none;
  inset:0;
  background:radial-gradient(circle at 92% 15%,rgba(124,105,245,.16),transparent 30%);
  z-index:-1;
}
main[data-baoi-resource-family="definition"] > .hero .eyebrow {
  background:rgba(79,215,224,.1);
  border-color:rgba(95,223,240,.35);
  color:#85eefa;
}
main[data-baoi-resource-family="definition"] > .hero h1 {
  max-width:100%;
  margin:17px auto 15px;
  text-align:center;
  letter-spacing:-.033em;
  text-wrap:balance;
  line-height:1.1;
  color:#f7fbff;
}
main[data-baoi-resource-family="definition"] > .hero .summary {
  max-width:780px;
  margin-inline:auto;
  text-align:center;
  color:#c4dbed;
  line-height:1.6;
  font-size:clamp(15px,1.25vw,18px);
}
main[data-baoi-resource-family="definition"] > .hero .ux-strip {
  justify-content:center;
  align-items:center;
  flex-wrap:wrap;
  gap:10px;
  margin-top:23px;
}
main[data-baoi-resource-family="definition"] > .hero .ux-chip,
main[data-baoi-resource-family="definition"] > .hero .fav-btn,
main[data-baoi-resource-family="definition"] > .hero .fav-open {
  background:rgba(5,20,36,.75);
}
main[data-baoi-resource-family="definition"] .article > .block p {
  line-height:1.8;
}
main[data-baoi-resource-family="definition"] .article > h2 {
  scroll-margin-top:110px;
}
/* Small in-article technical concept diagram. It is not a guide, gallery or diagnostics widget. */
.baoi-definition-diagram {
  margin:28px 0 33px;
  padding:clamp(17px,3vw,25px);
  border:1px solid rgba(80,181,217,.37);
  border-radius:18px;
  background:radial-gradient(ellipse at 30% 0%,rgba(41,148,213,.12),transparent 68%),
             linear-gradient(150deg,#0a2034,#0a1729 65%,#101b35);
  color:#eaf5ff;
}
.baoi-definition-diagram__header{display:grid;justify-items:start;gap:6px;margin-bottom:22px}
.baoi-definition-diagram__eyebrow{
  display:inline-block;color:#7de8e2;font-size:11px;font-weight:850;
  text-transform:uppercase;letter-spacing:.11em;
}
.baoi-definition-diagram__title{
  font-size:clamp(19px,2.2vw,24px);line-height:1.35;font-weight:850;
  color:#f3faff;letter-spacing:-.015em;
}
.baoi-definition-diagram__intro{color:#aacbdf;font-size:13px;line-height:1.65}
.baoi-definition-diagram__flow {
  padding:0;margin:0 0 18px;list-style:none;
  display:grid;
  grid-template-columns:repeat(var(--baoi-diagram-steps,5),minmax(0,1fr));
  gap:20px;
}
.baoi-definition-diagram__node{
  position:relative;min-width:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;
  min-height:134px;padding:12px 9px 11px;text-align:center;
  border-radius:13px;border:1px solid rgba(125,166,205,.24);
  background:linear-gradient(150deg,#132a44,#0c1b30);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035);
}
.baoi-definition-diagram__node:not(:last-child)::after{
  content:"→";position:absolute;left:calc(100% + 2px);top:50%;transform:translateY(-50%);
  width:16px;z-index:1;text-align:center;
  font-weight:900;font-size:23px;color:#5ad8e7;line-height:1;
}
.baoi-definition-diagram__node.is-focus{
  border-color:rgba(94,228,233,.66);
  background:linear-gradient(155deg,#113c56,#122e4b);
  box-shadow:inset 0 1px 0 rgba(148,251,255,.1),0 0 0 1px rgba(70,213,227,.12);
}
.baoi-definition-diagram__symbol{
  width:36px;height:36px;display:grid;place-items:center;margin-bottom:4px;
  color:#7edff8;border:1px solid rgba(82,207,232,.22);
  border-radius:11px;background:rgba(59,149,196,.11);
  font-size:23px;line-height:1;
}
.baoi-definition-diagram__node.is-focus .baoi-definition-diagram__symbol{
  color:#85f5e2;background:rgba(74,221,204,.14);border-color:rgba(98,236,223,.42);
}
.baoi-definition-diagram__node strong{
  color:#f4faff;font-size:13px;font-weight:850;
  line-height:1.28;overflow-wrap:anywhere;
}
.baoi-definition-diagram__node small{
  font-size:11px;color:#aac6d9;
  line-height:1.45;overflow-wrap:anywhere;
}
.baoi-definition-diagram__caption{
  margin:0;border-top:1px solid rgba(133,184,221,.18);padding-top:13px;
  color:#b4d4e8;font-size:12px;line-height:1.65;
}
@media(max-width:850px) {
  .baoi-definition-diagram__flow{gap:13px;grid-template-columns:repeat(var(--baoi-diagram-steps,5),minmax(0,1fr));}
  .baoi-definition-diagram__node{min-height:118px;padding:10px 6px;}
  .baoi-definition-diagram__node:not(:last-child)::after{left:calc(100% + 0px);font-size:19px;width:13px;}
  .baoi-definition-diagram__node strong{font-size:11px;}
  .baoi-definition-diagram__node small{font-size:10px;}
}
@media(max-width:640px) {
  main[data-baoi-resource-family="definition"] > .hero{border-radius:17px;margin-top:12px;padding:29px 16px;}
  main[data-baoi-resource-family="definition"] > .hero h1{font-size:clamp(31px,9vw,43px);}
  main[data-baoi-resource-family="definition"] > .hero .ux-strip{gap:8px;margin-top:20px;}
  main[data-baoi-resource-family="definition"] > .hero .ux-strip > *{flex:0 1 auto;max-width:100%;}
  .baoi-definition-diagram{padding:15px;border-radius:15px;margin:23px 0 28px;}
  .baoi-definition-diagram__flow{grid-template-columns:1fr;gap:19px;}
  .baoi-definition-diagram__node{min-height:76px;flex-direction:row;text-align:left;justify-content:flex-start;flex-wrap:wrap;column-gap:10px;row-gap:0;padding:12px 14px;}
  .baoi-definition-diagram__symbol{flex:none;width:35px;height:35px;margin:0;}
  .baoi-definition-diagram__node strong{flex:1 1 calc(100% - 55px);font-size:13px;}
  .baoi-definition-diagram__node small{flex:1 1 100%;margin-left:45px;font-size:11px;}
  .baoi-definition-diagram__node:not(:last-child)::after{
    content:"↓";top:calc(100% + 2px);left:50%;transform:translateX(-50%);
    width:auto;height:17px;font-size:21px;
  }
}
@media(prefers-reduced-motion:reduce){.baoi-definition-diagram *{scroll-behavior:auto}}