/* Address plan checker: the form layout and the address map. Network colours
   come from classes (c0 to c7); an overlap is hatched, so colour is never the
   only signal, and the legend and tables name everything the map shows. */

.plan-text { min-height: 190px; }
.plan-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 14px 18px; align-items: start; }
.plan-options .field { min-width: 0; }

.actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.plan-summary { margin: 14px 0 0; font-size: 14.5px; line-height: 1.55; color: var(--ink-2); }
.plan-card-note { margin: 0 0 12px; font-size: 14px; line-height: 1.55; color: var(--ink-2); }
.plan-card-note + .table-wrap, .plan-card-note + .plan-note { margin-top: 0; }
.plan-note { margin: 10px 0 0; font-size: 13px; color: var(--ink-3); }
.plan-stack { display: grid; gap: 16px; min-width: 0; }
.plan-stack h3 { margin: 0; font-size: 14.5px; font-weight: 600; letter-spacing: -.01em; }
.plan-list { margin: 6px 0 0; padding-left: 18px; display: grid; gap: 4px; font-size: 14px; }

/* The map */
.map { display: grid; gap: 8px; min-width: 0; }
.map-bar { display: flex; height: 40px; border: 1px solid var(--line-2); border-radius: 8px; overflow: hidden; background: var(--field); }
.map-seg { flex: 1 1 0; min-width: 2px; border-left: 1px solid rgb(0 0 0 / .35); }
.map-seg:first-child { border-left: 0; }
.map-seg.free { background: transparent; }
.map-seg.mixed { background: repeating-linear-gradient(90deg, rgb(255 255 255 / .35) 0 2px, rgb(255 255 255 / .08) 2px 4px); }
.map-seg.overlap { min-width: 5px; background-image: repeating-linear-gradient(45deg, #ff7d7d 0 4px, #1b0d0d 4px 8px); }
.map-seg.c0 { background: #5b8def; }
.map-seg.c1 { background: #4fc3a1; }
.map-seg.c2 { background: #d9a441; }
.map-seg.c3 { background: #b58cf0; }
.map-seg.c4 { background: #e8788f; }
.map-seg.c5 { background: #5cc4dc; }
.map-seg.c6 { background: #9bc653; }
.map-seg.c7 { background: #c98a6b; }
.map-ends { display: flex; justify-content: space-between; gap: 12px; font-size: 12px; color: var(--ink-3); }
.map-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 0; padding: 0; list-style: none; font-size: 12.5px; color: var(--ink-2); }
.map-legend li { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.swatch { flex: none; width: 12px; height: 12px; border-radius: 3px; border: 1px solid rgb(0 0 0 / .35); }
.swatch.free { background: transparent; border-color: var(--line-2); }
.swatch.overlap { background-image: repeating-linear-gradient(45deg, #ff7d7d 0 3px, #1b0d0d 3px 6px); }
.swatch.mixed { background: repeating-linear-gradient(90deg, rgb(255 255 255 / .35) 0 2px, rgb(255 255 255 / .08) 2px 4px); }
.swatch.c0 { background: #5b8def; } .swatch.c1 { background: #4fc3a1; } .swatch.c2 { background: #d9a441; } .swatch.c3 { background: #b58cf0; }
.swatch.c4 { background: #e8788f; } .swatch.c5 { background: #5cc4dc; } .swatch.c6 { background: #9bc653; } .swatch.c7 { background: #c98a6b; }

@media (max-width: 520px) {
  .map-bar { height: 32px; }
  .actions .btn { flex: 1 1 auto; }
}