.roof-annotations {
    position: absolute;
    inset: 0;
    z-index: 7;
    pointer-events: none;
    isolation: isolate;
    opacity: 1;
    visibility: visible;
    color: #367bbb;
}
.roof-annotations[hidden], .roof-annotation-card[hidden], .roof-annotation-copy [hidden] { display: none !important; }
.roof-annotation-leaders, .roof-annotation-labels { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.roof-annotation-leaders polyline { stroke: currentColor; stroke-width: .9; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; opacity: .66; }
.roof-annotation-leaders circle { fill: currentColor; stroke: #fff; stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.roof-annotation-leaders [data-kind="obstacle"] { color: #a97642; }
.roof-annotation-leaders [data-kind="existing-pv"] { color: #168477; }
.roof-annotation-leaders [data-kind="story"] { color: #237b79; }
.roof-annotation-card {
    position: absolute;
    box-sizing: border-box;
    opacity: 1;
    visibility: visible;
    color: #1d344a;
    --annotation-accent: #367bbb;
}
.roof-annotation-surface {
    display: flex;
    align-items: flex-start;
    height: 100%;
    box-sizing: border-box;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    transform-origin: center;
    text-shadow: 0 1px 2px rgba(246, 249, 252, .96), 0 0 8px rgba(246, 249, 252, .92);
}
.roof-annotation-content { position: relative; width: 100%; }
.roof-annotation-copy { width: 100%; }
.roof-annotation-copy--previous { position: absolute; inset: 0; }
.roof-annotation-copy strong { display: block; margin: 0; font: 750 14px/20px var(--font, 'Plus Jakarta Sans', sans-serif); letter-spacing: -.025em; white-space: nowrap; }
.roof-annotation-copy span { display: block; margin-top: 4px; color: #526779; font: 500 12.5px/18px var(--font, 'Plus Jakarta Sans', sans-serif); letter-spacing: -.01em; white-space: nowrap; }
.roof-annotation-card[data-kind="obstacle"] { --annotation-accent: #a97642; }
.roof-annotation-card[data-kind="existing-pv"] { --annotation-accent: #168477; }
.roof-annotation-card[data-kind="roof"] strong { color: var(--annotation-accent); }
.roof-annotation-card[data-kind="obstacle"] strong { color: #835b32; }
.roof-annotation-card[data-kind="obstacle"] span { margin-top: 5px; white-space: normal; overflow-wrap: break-word; }
.roof-annotation-card[data-kind="story"] strong,
.roof-annotation-card[data-kind="plan"] strong { font-size: 21px; line-height: 26px; letter-spacing: -.04em; white-space: normal; overflow-wrap: break-word; }
.roof-annotation-card[data-kind="story"] span,
.roof-annotation-card[data-kind="plan"] span { margin-top: 7px; font-size: 14px; line-height: 20px; white-space: normal; overflow-wrap: break-word; }
.roof-annotations[data-compact="true"] .roof-annotation-copy strong { font-size: 13px; line-height: 18px; }
.roof-annotations[data-compact="true"] .roof-annotation-copy span { margin-top: 3px; font-size: 11.5px; line-height: 16px; }
.roof-annotations[data-compact="true"] .roof-annotation-card[data-kind="obstacle"] span { margin-top: 5px; }
.roof-annotations[data-compact="true"] .roof-annotation-card[data-kind="story"] strong,
.roof-annotations[data-compact="true"] .roof-annotation-card[data-kind="plan"] strong { font-size: 18px; line-height: 23px; }
.roof-annotations[data-compact="true"] .roof-annotation-card[data-kind="story"] span,
.roof-annotations[data-compact="true"] .roof-annotation-card[data-kind="plan"] span { margin-top: 7px; font-size: 12.5px; line-height: 18px; }
.roof-annotations[data-reduced-motion="true"] .roof-annotation-card,
.roof-annotations[data-reduced-motion="true"] .roof-annotation-surface,
.roof-annotations[data-reduced-motion="true"] .roof-annotation-copy { animation: none; transition: none; }
/* A stable, high-contrast explanation beside the model; one list, one accent. */
.roof-annotations[data-dock="right"], .roof-annotations[data-dock="top"] { color: #0066ff; }
.roof-annotations[data-dock] .roof-annotation-leaders [data-kind] { color: #0066ff; }
.roof-annotations[data-dock] .roof-annotation-leaders polyline { stroke-width: 1.5; opacity: .75; }
.roof-annotations[data-dock] .roof-annotation-leaders circle { stroke-width: 2; }
.roof-annotation-leaders .roof-annotation-halo { fill: none; stroke: none; }
/* The story callout's subject pulses softly, so a small detail is found without zooming. */
.roof-annotations[data-dock] .roof-annotation-leaders [data-kind="story"] .roof-annotation-halo { fill: currentColor; fill-opacity: .14; stroke: currentColor; stroke-opacity: .4; stroke-width: 1;
    transform-box: fill-box; transform-origin: center; animation: roof-anchor-pulse 2.4s cubic-bezier(.2,.75,.2,1) infinite; }
@keyframes roof-anchor-pulse { 0% { opacity: 0; transform: scale(.3); } 25% { opacity: 1; } 100% { opacity: 0; transform: scale(1.35); } }
.roof-annotations[data-reduced-motion="true"] .roof-annotation-leaders .roof-annotation-halo { animation: none; opacity: .7; transform: none; }
.roof-annotation-card[data-list="true"] .roof-annotation-surface { padding: 18px; border-left: 4px solid #0066ff; border-radius: 0 14px 14px 0; background: #edf4ff; text-shadow: none; }
.roof-annotation-card[data-list="true"] .roof-annotation-copy { display: flex; flex-direction: column; }
.roof-annotation-card[data-list="true"] .roof-annotation-copy strong { color: #103d7a; font-size: 21px; line-height: 26px; white-space: normal; }
.roof-annotation-eyebrow { order: -1; display: block; margin: 0 0 8px; color: #0066ff; font: 700 10px/14px var(--mono, monospace); text-transform: uppercase; letter-spacing: .07em; }
.roof-annotation-points { display: grid; gap: 8px; list-style: none; margin: 12px 0 0; padding: 0; color: #254a77; font: 550 14px/20px var(--font, sans-serif); }
.roof-annotation-points li { position: relative; padding-left: 24px; overflow-wrap: break-word; }
.roof-annotation-points li::before { content: ''; position: absolute; top: 5px; left: 1px; width: 10px; height: 6px; border: solid #0066ff; border-width: 0 0 2px 2px; transform: rotate(-45deg); }
.roof-annotations[data-compact="true"] .roof-annotation-card[data-list="true"] .roof-annotation-surface { padding: 14px; }
.roof-annotations[data-compact="true"] .roof-annotation-card[data-list="true"] strong { font-size: 18px; line-height: 23px; }
.roof-annotations[data-compact="true"] .roof-annotation-points { font-size: 12.5px; line-height: 18px; }
.roof-annotations[data-dense="true"] .roof-annotation-card[data-list="true"] .roof-annotation-surface { padding: 10px; }
.roof-annotations[data-dense="true"] .roof-annotation-card[data-list="true"] strong { font-size: 16px; line-height: 20px; }
.roof-annotations[data-dense="true"] .roof-annotation-eyebrow { font-size: 9px; line-height: 11px; margin-bottom: 5px; }
.roof-annotations[data-dense="true"] .roof-annotation-points { margin-top: 8px; gap: 5px; font-size: 11.5px; line-height: 17px; }
@media (prefers-reduced-motion: reduce) {
    .roof-annotation-card, .roof-annotation-surface, .roof-annotation-copy { animation: none; transition: none; }
    .roof-annotation-leaders .roof-annotation-halo { animation: none; opacity: .7; transform: none; }
}