/* SovereigntyBox semantic icon layer.
   Lucide paths are cached locally in sbx-icons.js; there is no runtime request.
   Icons explain roles, evidence, routes and actions. They are not ornament. */

.sbx-icon{
  --sbx-icon-size:24px;
  display:inline-grid;
  width:var(--sbx-icon-size);
  height:var(--sbx-icon-size);
  flex:0 0 var(--sbx-icon-size);
  color:currentColor;
  place-items:center;
  vertical-align:middle;
}
.sbx-icon svg{display:block;width:100%;height:100%;overflow:visible}
.sbx-icon-frame{
  --sbx-icon-size:46px;
  padding:10px;
  border:2px solid currentColor;
  color:var(--accent);
  background:color-mix(in srgb,var(--bg-raise) 82%,transparent);
}
.band .sbx-icon-frame{background:color-mix(in srgb,var(--band-bg) 88%,transparent)}
.sbx-icon-label{
  display:flex;
  gap:11px;
  align-items:center;
}
.sbx-icon-label .sbx-icon{color:var(--accent)}

/* Card systems: consistent top-left visual handles without turning the site into
   a generic feature-icon grid. */
.panel>.sbx-icon-frame,
.expert-role>.sbx-icon-frame,
.boundary-modes article>.sbx-icon-frame,
.partner-revenue article>.sbx-icon-frame,
.growth-outcomes article>.sbx-icon-frame,
.human-team article>.sbx-icon-frame{
  margin-bottom:clamp(18px,2vw,28px);
}
.expert-role>.sbx-icon-frame{
  --sbx-icon-size:64px;
  padding:12px;
  border-width:3px;
  color:color-mix(in srgb,var(--band-fg) 78%,var(--accent));
  background:color-mix(in srgb,var(--band-bg) 82%,var(--band-fg) 18%);
}
.expert-role>.sbx-icon-frame svg{stroke-width:2.35}
.expert-role:has(>.sbx-icon-frame) .p-tag{margin-bottom:18px}
.expert-role.featured>.sbx-icon-frame{
  color:var(--accent-ink,#120c04);
  background:rgba(18,12,4,.09);
}
.expert-role.available>.sbx-icon-frame{
  color:var(--accent);
  background:color-mix(in srgb,var(--band-bg) 76%,var(--accent) 24%);
}
.boundary-modes article>.sbx-icon-frame{--sbx-icon-size:42px}

/* Dense lists use a smaller unboxed mark so the text remains the dominant
   reading surface. */
.spec>.sbx-icon,
.partner-list li>.sbx-icon{
  --sbx-icon-size:23px;
  color:var(--accent);
}
.spec>.sbx-icon{grid-row:1;align-self:start;margin-top:1px}
.spec:has(>.sbx-icon){grid-template-columns:28px 106px minmax(0,1fr);gap:16px}
.spec:has(>.sbx-icon) dt{grid-column:2}
.spec:has(>.sbx-icon) dd{grid-column:3}
.partner-list li{position:relative;padding-left:42px}
.partner-list li>.sbx-icon{position:absolute;left:0;top:.16em}

/* Process and navigation marks. */
.expert-continuity article>.sbx-icon,
.partner-steps li>.sbx-icon,
.partner-fit-grid>div>.sbx-icon,
.growth-campaign article>.sbx-icon{
  --sbx-icon-size:27px;
  color:var(--accent);
}
.expert-continuity article>.sbx-icon{margin-bottom:18px}
.partner-steps li>.sbx-icon{margin-top:3px}
.partner-fit-grid>div>.sbx-icon{margin-bottom:16px}
.growth-campaign article>.sbx-icon{align-self:center}

/* Harbour & Cedar has a warmer editorial register, but uses the same pictogram
   grammar to show how its business maps onto the SovereigntyBox system. */
.case-dossier dl>div>.sbx-icon{
  --sbx-icon-size:21px;
  grid-column:1;
  color:var(--hc-cedar,#AE3505);
}
.case-dossier dl>div:has(>.sbx-icon){grid-template-columns:28px 100px minmax(0,1fr)}
.case-dossier dl>div:has(>.sbx-icon) dt{grid-column:2}
.case-dossier dl>div:has(>.sbx-icon) dd{grid-column:3}
.human-team article>.sbx-icon-frame{color:var(--case-orange,var(--accent))}
.idp-story-map header>.sbx-icon{
  --sbx-icon-size:28px;
  margin-bottom:15px;
  color:var(--accent);
}
.growth-outcomes article>.sbx-icon-frame{color:var(--case-green,var(--accent))}
.growth-campaign article>.sbx-icon{color:var(--case-orange,var(--accent))}

/* Each business profile uses the same semantic fact-sheet grammar while
   retaining its own colour and editorial register. */
.pacrim-travel-dossier dl>div>.sbx-icon{
  --sbx-icon-size:21px;
  grid-column:1;
  color:var(--pacrim-travel-blue,#3157d5);
}
.pacrim-travel-dossier dl>div:has(>.sbx-icon){grid-template-columns:28px 104px minmax(0,1fr)}
.pacrim-travel-dossier dl>div:has(>.sbx-icon) dt{grid-column:2}
.pacrim-travel-dossier dl>div:has(>.sbx-icon) dd{grid-column:3}
.source-stack>span>.sbx-icon{--sbx-icon-size:18px;color:var(--pacrim-travel-blue,#3157d5)}
.source-stack>span:has(>.sbx-icon){grid-template-columns:22px 38px minmax(0,1fr)}
.reuse-ledger article>.sbx-icon-frame{margin-bottom:20px;color:var(--pacrim-travel-blue,#3157d5)}

.sec-snapshot article>.sbx-icon{--sbx-icon-size:23px;margin-bottom:17px;color:var(--sec-blue,#2447b0)}
.foundation-roles article>.sbx-icon-frame,.roi-strip article>.sbx-icon-frame{margin-bottom:22px;color:var(--sec-blue,#2447b0)}
.foundation-roles .guardforce-role>.sbx-icon-frame{color:#ff8000;background:rgba(255,255,255,.05)}
.roi-strip article>.sbx-icon-frame{--sbx-icon-size:42px}

@media(max-width:720px){
  .sbx-icon-frame{--sbx-icon-size:40px;padding:8px}
  .expert-role>.sbx-icon-frame{--sbx-icon-size:54px;padding:10px}
  .partner-list li{padding-left:36px}
  .case-dossier dl>div:has(>.sbx-icon){grid-template-columns:24px 88px minmax(0,1fr)}
  .pacrim-travel-dossier dl>div:has(>.sbx-icon){grid-template-columns:24px 88px minmax(0,1fr)}
  .spec:has(>.sbx-icon){grid-template-columns:26px minmax(0,1fr);gap:5px 12px}
  .spec:has(>.sbx-icon) dt{grid-column:2}
  .spec:has(>.sbx-icon) dd{grid-column:2;grid-row:2}
}

@media(prefers-reduced-motion:reduce){.sbx-icon{transition:none!important}}