/* Additive catalog and source-mapping compositions. */
.scene-catalog { background: #eff4f2; }
.catalog-tabs { display: flex; gap: 22px; border-bottom: 1px solid #dce5e2; margin: 0 0 19px; }
.catalog-tabs button { font-size: 11px; background: transparent; padding: 6px 3px 12px; color: #7e8f8b; border-bottom: 2px solid transparent; }
.catalog-tabs button[aria-selected=true] { border-color: var(--blue); color: var(--blue); }
.catalog-panel { display: grid; grid-template-columns: 395px 1fr; gap: 27px; height: 260px; }
.catalog-landscape { position: relative; overflow: hidden; height: 260px; background: #d5e8e6; border-radius: 9px; }
.catalog-landscape > span { position: absolute; top: 17px; left: 19px; font-size: 10px; letter-spacing: .5px; color: #45746c; }
.catalog-landscape > span .icon { width: 13px; height: 13px; margin-right: 5px; }
.catalog-sun { position: absolute; border-radius: 50%; width: 63px; height: 63px; background: #fff4d9; top: 44px; right: 37px; }
.catalog-sea { position: absolute; top: 164px; width: 100%; height: 100px; background: #88b9bb; }
.catalog-sea::after { content: ''; position: absolute; width: 310px; height: 40px; border: 1px solid #b7d6d4; border-radius: 50%; top: 33px; right: -45px; }
.catalog-resort { position: absolute; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(2, 1fr); gap: 15px; width: 234px; height: 140px; bottom: 16px; left: 36px; padding: 23px; background: #faf5e9; transform: skewY(-5deg); box-shadow: 12px 7px 0 #c2d1c7; }
.catalog-resort i { background: #799392; border-bottom: 8px solid #e3e1d6; box-shadow: 0 6px 0 #b6c2bb; }
.catalog-summary { padding: 5px 10px 0 0; }
.catalog-summary .scene-kicker { font-size: 9px; letter-spacing: 1.3px; color: #93a29c; }
.catalog-summary h4 { font-size: 25px; margin: 10px 0; letter-spacing: -.4px; font-weight: 600; }
.catalog-summary > p { font-size: 12px; color: #80918a; line-height: 1.7; max-width: 440px; margin: 0 0 18px; }
.catalog-field { display: flex; justify-content: space-between; padding: 9px 0; font-size: 10px; border-bottom: 1px solid #e4eae6; }
.catalog-field > span { color: #87988e; }
.catalog-field strong { font-weight: 500; }
.catalog-features { display: flex; gap: 8px; margin-top: 18px; flex-wrap: wrap; }
.catalog-features .badge { font-size: 9px; }
.catalog-features .icon { width: 11px; height: 11px; }
.catalog-bubble { position: absolute; right: 113px; top: 727px; font-size: 15px; padding: 15px 21px; background: #286859; }
.catalog-bubble b { color: #cbede0; font-weight: 500; }
#catalog-panel-rooms { grid-template-columns: 1fr 330px; }
.catalog-room-list { border: 1px solid #e1e8e4; border-radius: 8px; background: #fff; padding: 0 17px; }
.catalog-room { display: flex; align-items: center; gap: 14px; padding: 15px 0; border-bottom: 1px solid #e8eeeb; }
.catalog-room:last-child { border-bottom: 0; }
.catalog-room .round-icon { width: 41px; height: 41px; }
.catalog-room .round-icon .icon { width: 20px; height: 20px; }
.catalog-room h4 { font-size: 13px; margin: 0; font-weight: 600; }
.catalog-room p { color: #8a9795; font-size: 10px; margin: 7px 0 0; }
.room-capacity { margin-left: auto; color: #81938a; font-size: 10px; }
.room-capacity .icon { width: 13px; height: 13px; margin-right: 4px; }
.catalog-side-note { padding: 14px 5px; }
.catalog-side-note .round-icon { height: 38px; width: 38px; }
.catalog-side-note h4 { font-size: 19px; margin: 14px 0 8px; line-height: 1.4; font-weight: 500; }
.catalog-side-note p { font-size: 11px; line-height: 1.7; color: #8c9b94; }
.catalog-side-note .badge { font-size: 9px; margin-top: 5px; }
.catalog-gallery .catalog-landscape { height: 221px; }
.catalog-gallery-caption { display: flex; align-items: center; gap: 7px; color: #839a8d; font-size: 10px; margin-top: 14px; }
.catalog-gallery-caption .icon { width: 13px; height: 13px; }
.catalog-gallery-caption > span { margin-left: auto; font-size: 9px; }
.scene-mapping { background: #f0f3fa; }
.mapping-scope { position: absolute; top: 246px; left: 121px; display: flex; gap: 11px; align-items: center; font-size: 14px; color: #7c8faa; }
.mapping-scope .icon { width: 17px; height: 17px; }
.mapping-scope > span { color: #b9c6db; }
.mapping-switches { position: absolute; top: 226px; right: 123px; display: flex; gap: 7px; padding: 6px; border: 1px solid #dbe3f0; border-radius: 10px; background: #ffffff99; }
.mapping-switches button { display: flex; align-items: center; gap: 8px; padding: 11px 17px; font-size: 13px; background: transparent; border-radius: 6px; color: #8594ae; }
.mapping-switches .icon { width: 16px; height: 16px; }
.mapping-switches button[aria-pressed=true] { color: var(--blue); background: #e9f2ff; }
.mapping-canvas { position: absolute; top: 325px; left: 120px; width: 1360px; height: 365px; display: flex; align-items: center; }
.source-stack { width: 530px; display: grid; gap: 24px; }
.source-card { display: flex; align-items: center; padding: 22px 25px; gap: 19px; min-height: 103px; }
.source-letter { width: 46px; height: 46px; display: grid; place-items: center; background: #edf2fa; color: #7790b3; font-size: 18px; border-radius: 12px; flex: none; }
.source-label { display: block; font-size: 11px; color: #95a2b5; margin-bottom: 9px; }
.source-card strong { font-size: 22px; font-weight: 500; letter-spacing: -.2px; }
.source-card .badge { margin-left: auto; font-size: 10px; }
.mapping-paths { width: 330px; height: 365px; fill: none; stroke: #c4d4ed; stroke-width: 1.7; }
.mapping-paths .mapping-flow { stroke: #7ea7e2; stroke-width: 2; stroke-dasharray: 5 22; stroke-dashoffset: var(--flow-offset, 0); }
.canonical-card { width: 500px; min-height: 347px; padding: 30px 38px; }
.canonical-card .round-icon { margin-bottom: 23px; }
.canonical-card .scene-kicker { color: #94a7c1; font-size: 10px; letter-spacing: 1.8px; }
.canonical-card h3 { font-size: 39px; font-weight: 500; letter-spacing: -.65px; margin: 13px 0; }
.canonical-card > p { font-size: 14px; color: #8b9bb3; margin: 0 0 28px; }
.mapping-rule { font-size: 13px; color: #428265; display: flex; align-items: center; gap: 9px; padding-top: 20px; border-top: 1px solid #e4eaf3; }
.mapping-rule .icon, .mapping-provenance .icon { width: 15px; height: 15px; }
.mapping-provenance { display: flex; align-items: center; gap: 9px; font-size: 11px; color: #9aa9bc; margin-top: 16px; }
.mapping-bubble { position: absolute; top: 743px; right: 100px; font-size: 15px; padding: 15px 23px; }
.mapping-bubble b { font-weight: 500; color: #bacfea; }