.note-space-switch:has([data-note-space="commercial"]:not([hidden])) {
  grid-template-columns: repeat(3, minmax(0, 1fr)) 76px 90px;
}
body.commercial-mode .dashboard,
body.commercial-mode .controls,
body.commercial-mode .analysis-type-filter { display: none; }
.commercial-db { display: block; }
.commercial-workspace { padding: 18px; background: #fff; border: 1px solid var(--line); border-radius: 8px; }
.commercial-db h2, .commercial-dialog h2 { margin: 0; font-size: 18px; }
.commercial-db h3 { margin: 0; font-size: 15px; }
.commercial-db, .commercial-dialog { font-size: 13px; letter-spacing: 0; }
.commercial-db p { line-height: 1.65; overflow-wrap: anywhere; }
.commercial-header, .commercial-actions, .commercial-toolbar, .commercial-segments,
.commercial-detail-head, .commercial-section > header, .commercial-rent > header {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.commercial-header, .commercial-detail-head, .commercial-section > header { justify-content: space-between; }
.commercial-header > div > span, .commercial-meta, .commercial-map-note { color: var(--muted); font-size: 12px; }
.commercial-actions .compact-btn, .commercial-toolbar .compact-btn { min-height: 34px; }
.commercial-toolbar { padding: 16px 0; border-bottom: 1px solid var(--line); margin-bottom: 16px; }
.commercial-toolbar label { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 180px; }
.commercial-toolbar input { width: 100%; }
.commercial-toolbar label > span { white-space: nowrap; }
.commercial-toolbar small { color: var(--muted); }
.commercial-main { display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; }
.commercial-view-nav { margin-bottom: 14px; }
.commercial-location, .commercial-detail { min-width: 0; }
.commercial-location { grid-column: 1 / -1; }
.commercial-map-finder { margin-bottom: 12px; }
.commercial-map-search { display: flex; align-items: center; gap: 8px; }
.commercial-map-search label, .commercial-map-search button { flex-shrink: 0; white-space: nowrap; }
.commercial-map-search input { flex: 1; }
.commercial-map-search-status { margin: 6px 0 0; font-size: 12px; color: var(--muted); }
.commercial-map-search-status:empty { display: none; }
.commercial-map-results { max-height: 220px; overflow-y: auto; margin-top: 8px; border: 1px solid var(--line); border-radius: 6px; }
.commercial-map-results button { display: grid; gap: 4px; width: 100%; text-align: left; padding: 10px 12px; background: #fff; color: var(--ink); border: 0; border-bottom: 1px solid var(--line); border-radius: 0; overflow-wrap: anywhere; }
.commercial-map-results small { color: var(--muted); font-weight: 400; }
.commercial-map { position: relative; height: clamp(520px, 65svh, 800px); width: 100%; background: #f2f5f3; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; }
.commercial-map > span { display: block; padding: 18px; }
.commercial-map-empty { position: absolute; z-index: 5; top: 12px; left: 12px; max-width: calc(100% - 24px); background: #fff; border-radius: 4px; }
.commercial-map-register { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.5fr); align-items: start; column-gap: 18px; margin-top: 12px; padding: 14px; border: 1px solid var(--line); border-radius: 6px; background: #fff; }
.commercial-map-register header { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.commercial-map-register > header, .commercial-map-register > p, .commercial-map-register > .commercial-actions { grid-column: 1; }
.commercial-map-register p { margin: 8px 0 12px; }
.commercial-map-register .commercial-actions button { flex: 1; }
.commercial-nearby { grid-column: 2; grid-row: 1 / 4; border-left: 1px solid var(--line); padding-left: 18px; min-width: 0; }
.commercial-nearby-search { display: flex; gap: 6px; margin: 8px 0; }
.commercial-nearby-search input { flex: 1; }
.commercial-nearby-search button { flex-shrink: 0; }
.commercial-nearby > label { display: flex; align-items: center; gap: 8px; }
.commercial-nearby > label select { width: auto; flex: 1; }
.commercial-nearby-results { max-height: 200px; overflow-y: auto; overscroll-behavior: contain; }
.commercial-nearby-results article { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 0; border-top: 1px solid var(--line); }
.commercial-nearby-results article > div:first-child { min-width: 0; overflow-wrap: anywhere; }
.commercial-nearby-results small { display: block; color: var(--muted); font-size: 11px; margin-top: 4px; }
.commercial-nearby-actions { display: flex; gap: 4px; flex-shrink: 0; }
.commercial-nearby-actions button { padding: 7px 6px; background: #edf5ef; color: var(--green); border: 1px solid var(--line); border-radius: 4px; font-size: 12px; }
.commercial-map-new { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; margin: 0; padding: 12px 0 0; border: 0; border-top: 1px solid var(--line); min-width: 0; }
.commercial-map-marker { position: relative; width: 0; height: 0; pointer-events: none; }
.commercial-map-building { position: absolute; width: max-content; max-width: 180px; pointer-events: auto; }
.commercial-map-marker [data-map-building] { display: block; max-width: 180px; border: 0; border-radius: 0; box-shadow: none; background: transparent; color: #195640; padding: 3px 2px; font-size: 12px; line-height: 1.4; text-align: center; word-break: keep-all; overflow-wrap: anywhere; font-weight: 500; text-shadow: -1px -1px 0 #fff, 0 -1px 0 #fff, 1px -1px 0 #fff, 1px 0 0 #fff, 1px 1px 0 #fff, 0 1px 0 #fff, -1px 1px 0 #fff, -1px 0 0 #fff; }
.commercial-map-building.is-priority [data-map-building] { font-size: 13px; font-weight: 600; }
.commercial-analysis-mode { margin-bottom: 12px; }
.commercial-analysis-controls { display: grid; grid-template-columns: minmax(0,2fr) repeat(2,minmax(0,1fr)) auto; gap: 10px; align-items: end; margin-bottom: 12px; }
.commercial-analysis-controls label { display: grid; gap: 5px; min-width: 0; font-size: 12px; }
.commercial-analysis-controls select { width: 100%; min-width: 0; font-size: 12px; }
.commercial-analysis-controls .commercial-analysis-check { display: flex; align-items: center; align-self: center; white-space: nowrap; }
.commercial-analysis-check input { width: auto; }
.sales-line-high { --sales-line: #18734b; }
.sales-line-middle { --sales-line: #63a080; }
.sales-line-low { --sales-line: #b4d2c1; }
.sales-line-pending { --sales-line: #737b80; }
.commercial-analysis-legend { display: flex; flex-wrap: wrap; gap: 8px 16px; font-size: 12px; }
.commercial-analysis-legend span { display: inline-flex; align-items: center; gap: 6px; }
.commercial-analysis-legend i { width: 22px; border-top: 4px solid var(--sales-line); }
.commercial-analysis-legend .sales-line-pending { border-top-style: dashed; }
.commercial-sales-faces { position: absolute; width: 0; height: 0; transform: scale(var(--face-scale,1)); }
.commercial-sales-faces[hidden] { display: none; }
.commercial-sales-face { position: absolute; pointer-events: auto; background: transparent; padding: 0; border: 0; border-radius: 0; color: transparent; font-size: 10px; font-weight: 600; }
.commercial-sales-face::after { content: ''; position: absolute; background: var(--sales-line); box-shadow: 0 0 0 1px #fff; border-radius: 2px; }
.commercial-sales-face.face-north, .commercial-sales-face.face-south { width: 30px; height: 18px; left: -15px; }
.commercial-sales-face.face-north { top: -29px; }
.commercial-sales-face.face-south { top: 11px; }
.commercial-sales-face.face-east, .commercial-sales-face.face-west { width: 18px; height: 30px; top: -15px; }
.commercial-sales-face.face-east { left: 11px; }
.commercial-sales-face.face-west { left: -29px; }
.commercial-sales-face.face-north::after, .commercial-sales-face.face-south::after { height: 5px; left: 0; right: 0; top: 6px; }
.commercial-sales-face.face-east::after, .commercial-sales-face.face-west::after { width: 5px; top: 0; bottom: 0; left: 6px; }
.commercial-sales-face.sales-line-pending::after { background: repeating-linear-gradient(0deg,var(--sales-line) 0 4px,transparent 4px 7px); }
.commercial-sales-face.sales-line-pending.face-north::after, .commercial-sales-face.sales-line-pending.face-south::after { background: repeating-linear-gradient(90deg,var(--sales-line) 0 4px,transparent 4px 7px); }
.commercial-sales-face:hover, .commercial-sales-face:focus-visible, .commercial-sales-face[aria-pressed="true"] { outline: 2px solid var(--sales-line); outline-offset: 1px; background: #fff; color: #111; }
.commercial-sales-face:hover::after, .commercial-sales-face:focus-visible::after, .commercial-sales-face[aria-pressed="true"]::after { opacity: .2; }
.commercial-analysis-panel { min-width: 0; border-top: 1px solid var(--line); padding-top: 16px; }
.commercial-analysis-panel header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; }
.commercial-analysis-panel article { padding: 14px 0; }
.commercial-analysis-badge { border-left: 4px solid var(--sales-line); padding-left: 8px; font-size: 12px; }
.commercial-analysis-metrics { display: flex; gap: 24px; flex-wrap: wrap; margin-top: 14px; }
.commercial-analysis-metrics strong { display: block; margin-top: 5px; font-size: 17px; }
.commercial-analysis-panel ul { list-style: none; margin: 10px 0; padding: 0; }
.commercial-analysis-panel li, .commercial-analysis-list button { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--line); overflow-wrap: anywhere; }
.commercial-analysis-panel li strong, .commercial-analysis-list strong { flex-shrink: 0; font-weight: 500; font-variant-numeric: tabular-nums; }
.commercial-analysis-panel summary { cursor: pointer; padding: 10px 0; font-size: 12px; }
.commercial-analysis-list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 0 20px; max-height: 280px; overflow: auto; }
.commercial-analysis-list button { width: 100%; min-width: 0; background: #fff; color: var(--ink); text-align: left; border-radius: 0; font-size: 12px; }
.commercial-analysis-list small { display: block; color: var(--muted); margin-top: 4px; font-weight: 400; }
@media (max-width: 700px) {
  .commercial-analysis-controls { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .commercial-analysis-controls > label:first-child { grid-column: 1 / -1; }
  .commercial-analysis-list { grid-template-columns: minmax(0,1fr); }
  .commercial-analysis-panel li { flex-wrap: wrap; }
}
.commercial-map-marker [data-map-building]:hover { color: #073d2a; text-decoration: underline; text-underline-offset: 3px; }
.commercial-map-marker [data-map-building]:focus-visible { outline: 2px solid #195640; outline-offset: 2px; }
.commercial-building-link { border: 0; padding: 0; background: none; color: var(--green); text-decoration: underline; font: inherit; }
.commercial-plan { grid-column: 1 / -1; min-width: 0; border-top: 1px solid var(--line); padding-top: 18px; scroll-margin-top: 16px; }
.commercial-plan-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.commercial-plan-title { min-width: 0; }
.commercial-plan-caption { display: block; margin-bottom: 5px; color: var(--green); font-size: 11px; font-weight: 500; }
.commercial-plan-title h3 { font-size: 18px; font-weight: 600; overflow-wrap: anywhere; }
.commercial-plan-title p { margin: 5px 0 0; }
.commercial-plan-controls { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.commercial-plan-controls .compact-btn { background: #fff; border: 1px solid #dce3df; border-radius: 6px; font-weight: 500; }
.commercial-plan-controls [data-commercial="close-plan"] { width: 34px; padding: 0; border-color: transparent; color: var(--muted); font-size: 22px; }
.commercial-plan-controls .compact-btn:hover { background: #f1f5f3; }
.commercial-plan-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px 24px; margin: 16px 0 12px; padding: 12px 0; border-top: 1px solid #e8ecea; flex-wrap: wrap; }
.commercial-plan-floor { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.commercial-plan-floor > span { font-size: 11px; color: var(--muted); }
.commercial-plan-toolbar label { display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.commercial-plan-toolbar select { width: auto; min-width: 76px; min-height: 34px; padding: 6px 10px; border-radius: 6px; font-size: 13px; }
.commercial-plan-listings { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 12px; }
.commercial-plan-listings > span { color: #315a52; }
.commercial-plan-listings small { margin-left: 5px; color: var(--muted); font-size: 11px; }
.commercial-plan-listings > div { display: flex; }
.commercial-plan-listings .compact-btn { min-height: 32px; padding: 0 14px; border: 1px solid #ccdcd3; background: #fff; color: var(--green); border-radius: 0; font-weight: 500; }
.commercial-plan-listings .compact-btn:first-child { border-radius: 6px 0 0 6px; }
.commercial-plan-listings .compact-btn:last-child { border-radius: 0 6px 6px 0; border-left: 0; }
.commercial-plan-listings a:hover { background: #edf6f1; }
.commercial-plan-listings button:disabled { opacity: .45; cursor: not-allowed; }
.commercial-plan-board { display: grid; grid-template-columns: minmax(0, 1fr) minmax(80px, .25fr) minmax(0, 1fr); grid-template-areas: "north north north" "west core east" "south south south"; gap: 14px; padding: 16px; background: #f6f8f7; border: 1px solid #e0e6e2; border-radius: 6px; align-items: start; }
.commercial-plan-north { grid-area: north; }
.commercial-plan-east { grid-area: east; }
.commercial-plan-south { grid-area: south; }
.commercial-plan-west { grid-area: west; }
.commercial-plan-side { min-width: 0; }
.commercial-plan-side-head { display: flex; align-items: center; gap: 8px; margin-bottom: 7px; min-height: 30px; }
.commercial-plan-add { display: inline-grid; place-items: center; width: 30px; height: 30px; padding: 0; border: 1px solid #ceddd4; border-radius: 5px; background: #fff; color: var(--green); font-size: 20px; font-weight: 400; }
.commercial-plan-add:hover { background: #e9f4ed; border-color: var(--green); }
.commercial-plan-add:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
.commercial-plan-side h4 { margin: 0; font-size: 12px; font-weight: 600; color: #51635b; }
.commercial-plan-north .commercial-plan-side-head, .commercial-plan-south .commercial-plan-side-head { justify-content: center; }
.commercial-plan-shops { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)); gap: 6px; align-items: stretch; padding: 2px; }
.commercial-plan-shops:empty { display: none; }
.commercial-plan-west .commercial-plan-shops, .commercial-plan-east .commercial-plan-shops { grid-template-columns: minmax(0, 1fr); }
.commercial-plan-north .commercial-plan-shops, .commercial-plan-south .commercial-plan-shops { grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 240px)); justify-content: center; }
.commercial-plan-empty { grid-column: 1 / -1; margin: 0; color: var(--muted); font-size: 12px; text-align: center; padding: 12px 4px; }
.commercial-plan-core { grid-area: core; align-self: stretch; min-height: 160px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; text-align: center; padding: 18px 8px; border: 1px solid #cbd6d0; border-radius: 6px; background: #eaf0ed; color: #52675b; overflow-wrap: anywhere; }
.commercial-plan-core small { font-size: 11px; }
.commercial-plan-compass { font-size: 22px; color: var(--green); }
.commercial-plan-tile { position: relative; min-width: 0; width: 100%; }
.commercial-plan-move { position: absolute; top: 3px; right: 3px; width: 26px; height: 26px; padding: 0; border: 0; border-radius: 4px; background: transparent; color: #6a8074; cursor: grab; z-index: 1; }
.commercial-plan-move:hover { background: #e7efea; color: var(--green); }
.commercial-plan-move:focus-visible { outline: 2px solid var(--green); }
.commercial-plan-side.drop-side { outline: 2px dashed var(--green); outline-offset: 3px; }
.commercial-plan-tile.drop-before { box-shadow: -4px 0 var(--green); }
.commercial-plan-shop { display: grid; align-content: start; gap: 3px; width: 100%; height: 100%; min-width: 0; padding: 9px; text-align: left; border: 1px solid #d9e2dc; border-radius: 6px; background: #fff; color: var(--ink); font-size: 11px; font-weight: 400; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.commercial-plan-shop:hover, .commercial-plan-shop.selected { border-color: var(--green); background: #eef7f1; }
.commercial-plan-shop:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
.commercial-plan-name { padding-right: 22px; margin-bottom: 2px; font-size: 12px; font-weight: 500; }
.commercial-bay-metrics { display: grid; gap: 6px; color: var(--muted); overflow-wrap: anywhere; }
.commercial-plan-shop > small { font-size: 11px; color: var(--muted); line-height: 1.5; }
.commercial-plan-metric { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 6px; line-height: 1.4; }
.commercial-plan-metric > span:first-child { color: #52675b; }
.commercial-plan-metric > span:last-child { margin-left: auto; }
.commercial-plan-metric[data-plan-average] > span:last-child { color: #17583e; font-weight: 600; }
.commercial-plan-monthly { display: grid; gap: 2px; margin-top: 1px; padding-top: 3px; border-top: 1px solid #d3ddd7; }
.commercial-plan-benchmarks { display: flex; flex-wrap: wrap; gap: 1px 8px; color: #52675b; font-size: 10px; line-height: 1.4; }
.commercial-plan-ratio { padding: 2px 4px; border-radius: 3px; font-size: 10px; line-height: 1.4; }
.commercial-plan-ratio.ideal { color: #176041; background: #e5f4eb; }
.commercial-plan-ratio.caution { color: #765400; background: #fff3cc; }
.commercial-plan-ratio.over { color: #a52727; background: #fce9e9; }
.commercial-plan-ratio.unknown { color: var(--muted); padding: 0; }
.commercial-plan-unknown { margin-top: 16px; }
.commercial-plan-notes { margin-top: 12px; color: var(--muted); font-size: 11px; }
.commercial-plan-notes summary { cursor: pointer; padding: 5px 0; }
.commercial-plan-notes p { margin: 6px 0; }
.commercial-plan [data-plan-status]:empty { display: none; }
.commercial-location-list { min-width: 0; }
.commercial-shop { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 5px 8px; width: 100%; padding: 12px 8px; text-align: left; background: #fff; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; color: var(--ink); }
.commercial-shop > small { grid-column: 1; color: var(--muted); font-weight: 400; }
.commercial-shop > .commercial-chip { grid-column: 2; grid-row: 1 / 3; align-self: center; }
.commercial-shop span { overflow-wrap: anywhere; }
.commercial-shop.selected { background: #edf6f1; box-shadow: inset 3px 0 var(--green); }
.commercial-chip { display: inline-block; padding: 3px 6px; background: #eef2ef; color: var(--green); border-radius: 4px; font-size: 11px; font-weight: 400; white-space: nowrap; }
.commercial-building { padding: 10px 0; border-bottom: 1px solid var(--line); }
.commercial-building-title { border: 0; background: none; color: var(--ink); padding: 6px 0; text-align: left; width: 100%; }
.commercial-building-title small { display: block; color: var(--muted); font-weight: 400; margin-top: 4px; }
.commercial-unit { margin-top: 10px; }
.commercial-unit > small { display: block; padding: 6px; background: #f4f6f4; }
.commercial-section { border-top: 1px solid var(--line); margin-top: 18px; padding-top: 14px; }
.commercial-section > header { margin-bottom: 12px; }
.commercial-section label { display: grid; gap: 5px; font-size: 12px; }
.commercial-shop-overview { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; align-items: start; }
.commercial-shop-overview > section { min-width: 0; overflow-wrap: anywhere; }
.commercial-shop-overview > .commercial-section { margin-top: 0; padding-top: 0; border-top: 0; }
.commercial-shop-overview .commercial-empty { padding: 14px 0; text-align: left; }
.commercial-compact-records { max-height: 260px; overflow: auto; }
.commercial-source-select { max-width: 560px; }
.commercial-source-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 560px)); gap: 8px 20px; }
.commercial-source-list > article { display: flex; align-items: center; gap: 8px; border-bottom: 1px solid var(--line); min-width: 0; }
.commercial-source-list .commercial-source { min-width: 0; border-bottom: 0; }
.commercial-source-list .commercial-record-actions { flex-shrink: 0; margin-top: 0; }
.commercial-source { display: grid; gap: 6px; padding: 12px 0; width: 100%; text-align: left; background: none; border: 0; border-bottom: 1px solid var(--line); color: var(--ink); border-radius: 0; }
.commercial-source small { color: var(--muted); font-weight: 400; }
.commercial-record-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; margin-top: 6px; }
.commercial-record-actions button { padding: 5px 10px; font-size: 12px; }
.commercial-record-actions [data-sales-delete] { color: var(--red); }
.commercial-dialog [data-shop-delete] { color: var(--red); }
.commercial-rent { padding: 12px 0; border-bottom: 1px solid var(--line); }
.commercial-rent p { margin: 6px 0; }
.commercial-chart { overflow-x: auto; padding: 10px 0; }
.commercial-line-chart { display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 4px; }
.commercial-chart-axis { position: relative; font-size: 10px; color: var(--muted); }
.commercial-chart-axis span { position: absolute; right: 0; transform: translateY(-50%); }
.commercial-chart-plot { position: relative; height: 200px; }
.commercial-chart-plot svg { display: block; width: 100%; height: 100%; overflow: visible; }
.commercial-chart-plot path { fill: none; vector-effect: non-scaling-stroke; }
.commercial-chart-grid { stroke: var(--line); stroke-width: 1; }
.commercial-sales-max { color: #2676b5; }
.commercial-sales-midpoint { color: #226f50; }
.commercial-sales-min { color: #ad4d61; }
.commercial-sales-line { stroke: currentColor; stroke-width: 2; }
.commercial-sales-max [data-sales-line] { stroke-dasharray: 6 3; }
.commercial-sales-min [data-sales-line] { stroke-dasharray: 2 3; }
.commercial-sales-dots { stroke-width: 4; stroke-linecap: round; }
.commercial-chart-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; font-size: 11px; margin: 8px 0; }
.commercial-chart-legend span { display: inline-flex; align-items: center; gap: 5px; }
.commercial-chart-legend i { width: 18px; border-top: 2px solid currentColor; }
.commercial-chart-legend .commercial-sales-max i { border-top-style: dashed; }
.commercial-chart-legend .commercial-sales-min i { border-top-style: dotted; }
.commercial-month-targets { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(var(--months), minmax(0, 1fr)); }
.commercial-month-targets button { min-width: 0; padding: 0; background: transparent; border: 0; border-radius: 0; font-size: 9px; font-weight: 400; color: var(--muted); }
.commercial-month-targets button:hover { background: #226f5009; }
.commercial-month-targets button:focus-visible { outline: 1px solid var(--green); outline-offset: -1px; }
.commercial-chart-months { grid-column: 2; display: grid; grid-template-columns: repeat(var(--months), minmax(0, 1fr)); text-align: center; font-size: 11px; }
.commercial-chart-months small { display: block; min-height: 14px; font-size: 9px; color: var(--muted); }
.commercial-chart-callouts { position: absolute; inset: 0; pointer-events: none; }
.commercial-sales-callout { position: absolute; display: grid; padding: 2px 4px; background: #ffffffed; border-radius: 3px; text-align: center; white-space: nowrap; color: #226f50; }
.commercial-sales-callout small { font-size: 10px; }
.commercial-sales-callout strong { font-size: 12px; font-weight: 600; }
.commercial-sales-average { color: #59616d; }
.commercial-average-line { stroke: #59616d; stroke-width: 1.5; stroke-dasharray: 8 3 2 3; }
.commercial-chart-legend .commercial-sales-average i { border-top-style: dashed; }
.commercial-empty { padding: 28px 12px; text-align: center; color: var(--muted); }
.commercial-pre { white-space: pre-wrap; }
.commercial-db table, .commercial-dialog table { width: 100%; border-collapse: collapse; font-size: 12px; }
.commercial-db th, .commercial-db td, .commercial-dialog th, .commercial-dialog td { padding: 8px 5px; text-align: left; border-bottom: 1px solid var(--line); overflow-wrap: anywhere; }
.commercial-db summary, .commercial-dialog summary { padding: 10px 0; cursor: pointer; }
.commercial-dialog { padding: 18px; }
.commercial-dialog form { padding: 0; }
.commercial-dialog .dialog-header { margin-bottom: 18px; }
.commercial-dialog .dialog-actions { margin-top: 16px; }
.commercial-form, .commercial-new-unit, .commercial-new-building { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.commercial-form label { display: grid; gap: 6px; min-width: 0; font-size: 12px; }
.commercial-dialog input, .commercial-dialog select, .commercial-dialog textarea,
.commercial-db input, .commercial-db select { min-width: 0; max-width: 100%; width: 100%; font: inherit; border: 1px solid var(--line); border-radius: 6px; padding: 10px; background: #fff; color: var(--ink); }
.commercial-dialog textarea { min-height: 80px; }
.commercial-wide, .commercial-new-unit { grid-column: 1 / -1; }
.commercial-image-input:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; }
.commercial-image-input img { display: block; max-width: 100%; max-height: 220px; margin: 8px auto; object-fit: contain; }
.commercial-image-input [data-image-name] { overflow-wrap: anywhere; font-size: 12px; margin-right: 8px; }
.commercial-form .commercial-check { display: flex; align-items: center; }
.commercial-form .commercial-check input, .commercial-member input { width: 16px; }
.commercial-error { color: var(--red); white-space: pre-wrap; }
.commercial-review-dialog { width: min(1180px, calc(100% - 24px)); }
.commercial-review-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 16px; }
.commercial-original { min-width: 0; max-height: 65vh; overflow: auto; }
.commercial-original img { display: block; width: 100%; height: auto; margin-top: 10px; }
.commercial-review-values { min-width: 0; }
.commercial-review-table { overflow: auto; max-height: 65vh; }
.commercial-review-table table { min-width: 510px; }
.commercial-review-table th { white-space: nowrap; }
.commercial-review-table input { padding: 7px; min-width: 100px; }
.commercial-review-table select { padding: 7px; min-width: 105px; }
.commercial-ai-status { color: var(--green); }
.commercial-member { display: flex !important; align-items: center; justify-content: space-between; padding: 10px; border-bottom: 1px solid var(--line); }
.commercial-member small { display: block; color: var(--muted); }
.commercial-form [hidden] { display: none !important; }
.commercial-survey { padding: 12px 0; border-bottom: 1px solid #dce4dd; overflow-wrap: anywhere; }
.commercial-survey header { display: flex; flex-wrap: wrap; gap: 8px; justify-content: space-between; font-size: 12px; }
.commercial-survey p { margin: 8px 0; }
.commercial-shop .commercial-chip { white-space: normal; text-align: left; }
@media (max-width: 850px) {
  .commercial-shop-overview { grid-template-columns: 1fr; gap: 16px; }
  .commercial-shop-overview > .commercial-section { border-top: 1px solid var(--line); padding-top: 12px; }
  .commercial-main { grid-template-columns: 1fr; }
  .commercial-map { height: clamp(420px, 60svh, 680px); }
  .commercial-review-grid { grid-template-columns: 1fr; }
  .commercial-original { max-height: 320px; }
}
@media (max-width: 640px) {
  .note-space-switch:has([data-note-space="commercial"]:not([hidden])) { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .commercial-workspace { padding: 12px; }
  .commercial-dialog { padding: 12px; }
  .commercial-form, .commercial-new-unit, .commercial-new-building { grid-template-columns: 1fr; }
  .commercial-map-new { grid-template-columns: 1fr; }
  .commercial-map-register { grid-template-columns: 1fr; padding: 12px; }
  .commercial-nearby { grid-column: 1; grid-row: auto; border-left: 0; padding-left: 0; border-top: 1px solid var(--line); margin-top: 12px; padding-top: 12px; }
  .commercial-map { height: clamp(360px, 60svh, 560px); }
  .commercial-header { align-items: flex-start; }
  .commercial-actions { width: 100%; }
  .commercial-actions button { flex: 1 1 auto; }
  .commercial-plan-board { grid-template-columns: minmax(0, 1fr) 44px minmax(0, 1fr); padding: 8px; gap: 10px 6px; }
  .commercial-plan-header { gap: 8px; }
  .commercial-plan-title h3 { font-size: 16px; }
  .commercial-plan-controls { gap: 2px; }
  .commercial-plan-controls .compact-btn { padding: 0 8px; font-size: 11px; }
  .commercial-plan-controls [data-commercial="close-plan"] { width: 28px; padding: 0; font-size: 22px; }
  .commercial-plan-toolbar { gap: 10px; margin-top: 12px; }
  .commercial-plan-floor { width: 100%; justify-content: space-between; gap: 8px; }
  .commercial-plan-listings { width: 100%; justify-content: space-between; }
  .commercial-plan-core { padding: 12px 2px; }
  .commercial-plan-core > span:not(.commercial-plan-compass), .commercial-plan-core small:last-child { display: none; }
  .commercial-plan-compass { font-size: 18px; }
  .commercial-plan-shop { padding: 6px; }
  .commercial-plan-name { font-size: 12px; }
  .commercial-plan-metric { gap: 0 4px; }
  .commercial-plan-north .commercial-plan-shops, .commercial-plan-south .commercial-plan-shops { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .commercial-plan-unknown .commercial-plan-shops { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}