/* Symbiont Sonic Profile Block v1 — scoped only. */
.sym-sonic-profile-v1 {
  --sym-sp-panel: rgba(255,255,255,.84);
  --sym-sp-border: rgba(15,23,42,.12);
  --sym-sp-text: #10141c;
  --sym-sp-muted: rgba(16,20,28,.62);
  --sym-sp-radius: 12px;
  width: 100%;
  padding: 18px;
  border: 1px solid var(--sym-sp-border);
  border-radius: var(--sym-sp-radius);
  background: var(--sym-sp-panel);
  color: var(--sym-sp-text);
  box-shadow: 0 16px 46px rgba(22,34,50,.06);
}

.sym-sonic-profile-v1 *,
.sym-sonic-profile-v1 *::before,
.sym-sonic-profile-v1 *::after { box-sizing: border-box; }

.sym-sonic-profile-v1__head { display: grid; gap: 6px; margin-bottom: 14px; }
.sym-sonic-profile-v1__head span { color: #03966e; font-size: 10px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.sym-sonic-profile-v1__head h2 { margin: 0; font-size: 24px; line-height: 1; letter-spacing: -.04em; }
.sym-sonic-profile-v1__head p { margin: 0; color: var(--sym-sp-muted); font-size: 13px; line-height: 1.45; }

.sym-sonic-profile-v1__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.sym-sonic-profile-v1__metric { padding: 12px; border: 1px solid rgba(15,23,42,.09); border-radius: 10px; background: rgba(255,255,255,.64); }
.sym-sonic-profile-v1__metric-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.sym-sonic-profile-v1__metric-head b { font-size: 13px; }
.sym-sonic-profile-v1__metric-head span { padding: 5px 7px; border-radius: 7px; background: rgba(15,23,42,.06); font-size: 12px; font-weight: 900; }
.sym-sonic-profile-v1__delta { margin-top: 9px; color: rgba(16,20,28,.60); font-size: 11px; font-weight: 800; }
.sym-sonic-profile-v1__summary { margin: 14px 0 0; color: var(--sym-sp-muted); font-size: 13px; line-height: 1.55; }
.sym-sonic-profile-v1--admin { border-color: rgba(255,120,90,.34); background: rgba(255,244,237,.92); color: #7c2d12; }

.sym-sonic-profile-v1 .sym-sonic-scale { --sym-q1: 20%; --sym-q3: 80%; --sym-median: 50%; --sym-mean: 50%; --sym-value: 50%; --sym-metric-color: #12e0af; }
.sym-sonic-profile-v1 .sym-sonic-scale__track { position: relative; height: 10px; border-radius: 999px; background: linear-gradient(90deg, rgba(15,23,42,.12), rgba(15,23,42,.05)); overflow: visible; }
.sym-sonic-profile-v1 .sym-sonic-scale__typical { position: absolute; top: 2px; bottom: 2px; left: var(--sym-q1); width: calc(var(--sym-q3) - var(--sym-q1)); border-radius: 999px; background: color-mix(in srgb, var(--sym-metric-color) 30%, transparent); }
.sym-sonic-profile-v1 .sym-sonic-scale__median,
.sym-sonic-profile-v1 .sym-sonic-scale__mean,
.sym-sonic-profile-v1 .sym-sonic-scale__value { position: absolute; top: 50%; transform: translate(-50%, -50%); z-index: 2; }
.sym-sonic-profile-v1 .sym-sonic-scale__median { left: var(--sym-median); width: 3px; height: 22px; border-radius: 99px; background: #111827; }
.sym-sonic-profile-v1 .sym-sonic-scale__mean { left: var(--sym-mean); width: 2px; height: 18px; border-radius: 99px; background: rgba(15,23,42,.35); }
.sym-sonic-profile-v1 .sym-sonic-scale__value { left: var(--sym-value); width: 12px; height: 12px; border: 2px solid #fff; border-radius: 99px; background: var(--sym-metric-color); box-shadow: 0 0 0 3px color-mix(in srgb, var(--sym-metric-color) 24%, transparent); }
.sym-sonic-profile-v1 .sym-sonic-scale__axis { display: flex; justify-content: space-between; gap: 8px; margin-top: 7px; color: rgba(16,20,28,.50); font-size: 9px; font-weight: 800; }
.sym-sonic-profile-v1 .sym-sonic-scale--empty { padding: 8px; border-radius: 8px; background: rgba(15,23,42,.05); color: rgba(16,20,28,.54); font-size: 12px; font-weight: 800; }

@media (max-width: 680px) {
  .sym-sonic-profile-v1__grid { grid-template-columns: 1fr; }
}