/* Facet card accent (Travis ruling 2026-09-25, option C; bead claude-code-qvaux).
   Replaces the thick one-side accent bar and colored glow shadows across brand assets.
   A hairline border all round in the brand's light tone, one small shard in the brand's
   accent marking the card, neutral elevation instead of glow.

   Brand values (set on :root or any ancestor):
     STEMsaic: --fa-line: rgba(130,174,221,0.5)   (#82aedd, ice ramp)   --fa-shard: #d4a843
     BTD:      --fa-line: rgba(232,222,206,0.35)  (warm cream grout)    --fa-shard: #e8a840
   Native use: add class "fa-card" to a card. Legacy files: facet-accent.js tags
   elements drawn with a side bar or glow and applies the same look. */
:root {
  --fa-line: rgba(130, 174, 221, 0.5);
  --fa-shard: #d4a843;
  --fa-radius: 10px;
  --fa-elevation: 0 2px 10px rgba(0, 0, 0, 0.35);
}
.fa-card {
  border: 1px solid var(--fa-line) !important;
  border-radius: var(--fa-radius) !important;
}
.fa-pos { position: relative; }
.fa-shard::after {
  content: "";
  position: absolute;
  top: 14px;
  left: -6px;
  width: 11px;
  height: 11px;
  background: var(--fa-shard);
  clip-path: polygon(50% 0, 100% 38%, 78% 100%, 12% 86%, 0 30%);
  pointer-events: none;
}
.fa-flat { box-shadow: var(--fa-elevation) !important; }
@media print {
  .fa-shard::after { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}