.lp-grid { stroke: var(--line); stroke-width: 1; }
.lp-axis { fill: var(--muted); font-size: 10.5px; font-variant-numeric: tabular-nums; }
.lp-label { fill: var(--text-2); font-size: 11.5px; font-weight: 600; }
.lp-ground { fill: color-mix(in srgb, var(--carrot) 22%, var(--panel-muted)); stroke: color-mix(in srgb, var(--carrot) 70%, var(--text-2)); stroke-width: 1.5; stroke-linejoin: round; }
.lp-zone { fill: var(--primary); fill-opacity: .1; stroke: none; }
.lp-clear { fill: none; stroke: var(--primary); stroke-opacity: .55; stroke-width: 1.2; stroke-dasharray: 4 4; }
.lp-los { stroke: var(--primary); stroke-width: 2.2; }
.lp-mast { stroke: var(--text-2); stroke-width: 2.5; stroke-linecap: round; }
.lp-end { fill: var(--primary); stroke: var(--panel-elevated); stroke-width: 2; }
.lp-worst { stroke: var(--panel-elevated); stroke-width: 2; }
.lp-worst.is-clear { fill: var(--green); }
.lp-worst.is-partial { fill: var(--amber); }
.lp-worst.is-blocked { fill: var(--red); }
.lp-key { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 6px; color: var(--muted); font-size: 11.5px; }
.lp-key span { display: inline-flex; align-items: center; gap: 6px; }
.lp-key i { display: inline-block; width: 16px; height: 0; border-top: 2px solid var(--primary); }
.lp-key i.k-zone { height: 8px; border: 0; border-radius: 2px; background: var(--primary); opacity: .18; }
.lp-key i.k-clear { border-top: 1.5px dashed var(--primary); opacity: .7; }
/* the signal over the line: a wave flowing from the mast to the client, its channel on a badge */
.link-chart { position: relative; }
.lp-los.is-faint { stroke-opacity: .35; stroke-width: 1.4; }
.lp-wave, .lp-wave-glow { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.lp-wave { stroke-width: 2.6; stroke-dasharray: 11 6; animation: lp-flow 1.1s linear infinite; }
.lp-wave-glow { stroke-width: 9; stroke-opacity: .16; }
.lp-wave.is-good, .lp-wave-glow.is-good { stroke: var(--green); }
.lp-wave.is-warn, .lp-wave-glow.is-warn { stroke: var(--amber); }
.lp-wave.is-bad, .lp-wave-glow.is-bad { stroke: var(--red); }
@keyframes lp-flow { to { stroke-dashoffset: -17; } }
@media (prefers-reduced-motion: reduce) { .lp-wave { animation: none; } }
.lp-badge { position: absolute; z-index: 1; transform: translate(-50%, calc(-100% - 16px)); display: grid; gap: 1px; justify-items: center; padding: 6px 12px; border: 1.5px solid var(--line-strong); border-radius: 12px; background: var(--panel-elevated); box-shadow: 0 4px 14px rgba(0, 0, 0, .18); white-space: nowrap; pointer-events: auto; }
.lp-badge.is-below { transform: translate(-50%, 16px); }
.lp-badge b { color: var(--text); font-size: 13.5px; font-weight: 700; font-variant-numeric: tabular-nums; }
.lp-badge span { color: var(--text-2); font-size: 12px; font-variant-numeric: tabular-nums; }
.lp-badge.is-good { border-color: var(--green); } .lp-badge.is-warn { border-color: var(--amber); } .lp-badge.is-bad { border-color: var(--red); }
.lp-badge.is-guess { border-style: dashed; }
.link-radio:not(:empty) { display: grid; gap: 6px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.lp-ch-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.lp-ch-head b { color: var(--text); font-size: 13.5px; }
.lp-ch-head span { color: var(--muted); font-size: 12px; }
.lp-ch-svg { display: block; width: 100%; height: auto; border: 1px solid var(--line); border-radius: 10px; background: var(--panel-muted); }
.lp-ch-gap { fill: var(--line); fill-opacity: .45; }
.lp-ch { stroke-width: 1.5; }
.lp-ch.is-good { fill: var(--green); stroke: var(--green); } .lp-ch.is-warn { fill: var(--amber); stroke: var(--amber); } .lp-ch.is-bad { fill: var(--red); stroke: var(--red); }
.lp-ch.is-mast { fill: var(--primary); fill-opacity: .75; stroke: none; }
.lp-ch.is-near { fill: var(--muted-2); fill-opacity: .6; stroke: none; }
.lp-ch.is-clash { stroke: var(--red); stroke-width: 2; }
.lp-ch-t { fill: var(--text-2); font-size: 10.5px; }
.lp-ch-t.is-me { fill: var(--text); font-weight: 700; }
.lp-ch-note { margin: 0; color: var(--text-2); font-size: 12.5px; line-height: 1.5; }
.lp-ch-note.is-good { color: var(--green); } .lp-ch-note.is-warn { color: var(--amber); } .lp-ch-note.is-bad { color: var(--red); }
.lp-key i.k-wave { width: 18px; height: 6px; border: 0; --c: var(--green); background: radial-gradient(circle at 25% 50%, var(--c) 1.6px, transparent 2px) 0 0 / 6px 6px repeat-x; }
.lp-key i.k-wave.is-warn { --c: var(--amber); } .lp-key i.k-wave.is-bad { --c: var(--red); }
/* the radio's figures are unknown: the wave and its channel still show, in grey */
.lp-wave.is-unknown, .lp-wave-glow.is-unknown { stroke: var(--muted-2); } .lp-ch.is-unknown { fill: var(--muted-2); stroke: var(--muted-2); } .lp-key i.k-wave.is-unknown { --c: var(--muted-2); }
.lp-key i.k-ground { height: 8px; border: 1px solid color-mix(in srgb, var(--carrot) 70%, var(--text-2)); border-radius: 2px; background: color-mix(in srgb, var(--carrot) 22%, var(--panel-muted)); }
@media (max-width: 700px) {
  .link-inputs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .link-inputs .field:first-child { grid-column: 1 / -1; }
  .link-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lp-badge, .lp-badge.is-below { position: static; transform: none; width: fit-content; max-width: 100%; margin: 0 auto 8px; white-space: normal; text-align: center; padding: 5px 10px; }
  .lp-badge b { font-size: 12.5px; } .lp-badge span { font-size: 11px; }
}


.link-chart {position:relative;--carrot:#d48a4c;--panel-muted:var(--panel)}
.link-chart svg{display:block;width:100%;height:auto}.profile-verdict{padding:12px;border-radius:10px;background:var(--panel);margin:16px 0}.profile-verdict.blocked{color:var(--red)}.profile-verdict.partial{color:var(--amber)}.profile-verdict.clear{color:var(--green)}
@media(prefers-reduced-motion:reduce){.lp-wave{animation:none}}

.profile-controls{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.profile-controls .f.full{grid-column:1/-1}.profile-controls input,.profile-controls select{width:100%}.dlg-h>div:first-child{flex:1}.profile-controls .f{min-width:0}@media(max-width:550px){.profile-controls{grid-template-columns:1fr}.profile-controls .f.full{grid-column:auto}}