@import url('../style.css');
@import url('../services-annotations.css');
.market-footer{padding:20px 5%;border-top:1px solid #d3c9ba;display:flex;gap:24px;justify-content:space-between;font-size:13px;color:#746b61}
.market-footer a{color:#005fcc}
.room-section{overflow:auto}.us-dimensions{font-size:13px;padding:0 26px;color:#746b61}.timeline{flex-wrap:wrap}.timeline .day-stage{min-width:100px}
@media(max-width:900px){#services-legend{columns:1}.market-footer{flex-wrap:wrap}.service-pin{width:18px;height:18px;font-size:10px;line-height:16px}}
/* Reserve real layout space for the canvas and the service key. */
.customer .config-layout{height:calc(100dvh - 148px)}
.customer>.market-footer{height:60px;align-items:center;padding-top:8px;padding-bottom:8px}
.room-section{display:flex;flex-direction:column;overflow:auto}
.room{position:relative;inset:auto;flex:1 0 280px;min-height:280px;width:100%}
.room-controls{position:static;margin:0 24px 8px}
.room-help{position:static;margin:4px 24px 12px;font-size:12px}
.us-dimensions{padding:0 24px;margin:0}
@media(max-width:900px){.customer .config-layout{height:auto}.room-section{height:auto;max-height:none;overflow:visible}.room{height:54vh;min-height:320px;max-height:540px;flex:none}.room-controls{margin:0 16px 8px}.room-help{margin:4px 16px 12px}.us-dimensions{padding:0 16px}.customer>.market-footer{height:auto;min-height:60px}}

.service-pins{z-index:2}.service-leaders{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:1;overflow:hidden}.service-leaders line{stroke:#005fcc;stroke-width:1;opacity:.65}

/* Keep the room heading within the established 1000 x 660 review crop. */
@media(min-width:1200px){.customer .room-section:has(#behind:checked) .room-caption{padding-left:max(166px,14%);padding-top:22px}}
/* The code note shows only while the behind-the-wall legend is open. */
.services-code-note{display:none;margin:0;padding:0 26px 14px 46px;font-size:12px;line-height:1.5;color:#746b61;background:#f2ece1}
#services-legend:not([hidden])+.services-code-note{display:block}
@media(max-width:900px){.services-code-note{padding-left:30px}}

/* Behind-the-wall view: the room takes the page, with the key beside it. */
.service-pins{pointer-events:none}
.service-pin{pointer-events:auto;width:26px;height:26px;padding:0;font:600 13px/24px Arial,sans-serif;cursor:pointer;background:var(--pin);border:1px solid #fff;color:#fff;box-shadow:0 1px 3px rgba(0,0,0,.28);transition:opacity .25s,transform .2s}
.group-drain{--pin:#4a5160}.group-water{--pin:#005fcc}.group-power{--pin:#6b3fa0}.group-walls{--pin:#7a5c35}
.service-pin.hollow{background:#fff;color:var(--pin);border:3px solid var(--pin);line-height:20px;box-shadow:0 1px 4px rgba(0,0,0,.45)}
.service-pin.faded{opacity:.25}
.service-pin.selected{transform:translate(-50%,-50%) scale(1.3);z-index:2;outline:2px solid #fff}
.service-key[hidden]{display:none}
.service-key{display:flex;flex-direction:column;min-height:0;background:#f2ece1;border-left:1px solid #d3c9ba}
.key-scroll{flex:1;min-height:0;overflow:auto;padding:22px 22px 12px}
.service-key h2{font-size:27px;line-height:1.15;margin:4px 0 6px}
.key-tip{margin:0 0 12px;font-size:14px;color:#746b61}
#services-legend,#services-legend ol{list-style:none;padding:0;margin:0;columns:auto;background:none;font-size:15px;line-height:1.35}
.key-group{margin:0 0 14px;padding:0!important}
.key-group h3{margin:0 0 4px;font:inherit}
#services-legend ol li{padding:0}
#services-legend button{display:flex;gap:10px;align-items:flex-start;width:100%;padding:6px 6px;background:none;border:0;border-radius:4px;text-align:left;font:inherit;color:inherit}
#services-legend button:hover{background:#e7dfd1}
#services-legend button.selected{background:#fff;box-shadow:inset 3px 0 0 var(--pin)}
.key-number{flex:none;width:24px;height:24px;border-radius:50%;background:var(--pin);color:#fff;font:600 12px/24px Arial,sans-serif;text-align:center}
.service-key .services-code-note{display:block;padding:4px 6px 8px;background:none;font-size:13px}
.key-price{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:12px 22px;border-top:1px solid #d3c9ba;background:#fbf8f2}
.key-price p{margin:0;font-size:12px;color:#746b61}
.key-price-value{font-size:20px;line-height:1.25}
.key-price .primary{flex:none;padding:10px 12px;font-size:14px}
.key-caption[hidden]{display:none}
.key-caption{position:absolute;left:50%;bottom:12px;transform:translateX(-50%);z-index:3;max-width:min(560px,calc(100% - 32px));margin:0;padding:8px 12px;background:rgba(255,255,255,.95);border-radius:4px;font-size:15px;line-height:1.3;box-shadow:0 1px 4px rgba(0,0,0,.18)}
body.behind-open .choice-panel,body.behind-open .room-help{display:none}
@media(min-width:901px){body.behind-open .config-layout{display:grid;grid-template-columns:minmax(0,1fr) 390px}}
@media(max-width:900px){.service-pin{width:24px;height:24px;font-size:12px;line-height:22px}.service-pin.hollow{line-height:18px}.service-key{border-left:0;border-top:1px solid #d3c9ba}.key-scroll{overflow:visible;padding:18px 16px 8px}.key-price{position:sticky;bottom:0;padding:10px 16px}#services-legend{font-size:16px}}
@media(min-width:901px){
  body.behind-open .room-section{position:relative;overflow:hidden}
  body.behind-open .room-caption{position:absolute;top:0;left:0;z-index:3;padding-left:24px!important;pointer-events:none}
  body.behind-open .room-controls{position:absolute;left:0;right:0;bottom:30px;z-index:3;margin:0 24px;pointer-events:none}
  body.behind-open .room-controls>*{pointer-events:auto}
  body.behind-open .key-caption{bottom:64px}
  body.behind-open .service-pins{z-index:2}
  body.behind-open .us-dimensions{position:absolute;left:0;bottom:6px;z-index:3}
  body.behind-open .room{flex:1 1 auto}
}
#services-legend .key-heading{display:flex;justify-content:space-between;align-items:center;padding:5px 6px;font:600 12px/1.3 Arial,sans-serif;letter-spacing:.06em;text-transform:uppercase;color:var(--pin)}
#services-legend .key-heading::after{content:'Show only';font:400 11px/1 Arial,sans-serif;letter-spacing:0;text-transform:none;color:#746b61}
#services-legend .key-heading.selected{background:var(--pin);color:#fff}
#services-legend .key-heading.selected::after{content:'Show all';color:#fff}
.key-group.dimmed{opacity:.45}
.service-pin.off{visibility:hidden}