/* One layout contract for discovery, analysis and comparison.
   Palette and chart tokens remain in analytics-designs.css. */
html[data-design] { --rail-width:192px; --header-height:64px; --navigation-height:0px; --content-top:calc(var(--header-height) + var(--navigation-height)); scroll-padding-top:calc(var(--content-top) + 12px); }
html[data-design] body { grid-template-columns:var(--rail-width) minmax(0,1fr); font-size:14px; }
html[data-design] :is(button,input,select) { min-height:44px; }
html[data-design] input:is([type=checkbox],[type=radio]) { min-height:0; }
html[data-design] :is(button,a,input,select,summary):focus-visible { outline:3px solid var(--accent); outline-offset:3px; }
html[data-design] button:disabled { cursor:not-allowed; }
html[data-design] .topbar { height:var(--header-height); padding:10px 28px; }
html[data-design] .brand { font-size:16px; }
html[data-design] .header-actions button { display:flex; align-items:center; gap:8px; font-size:13px; }
.header-actions svg { width:18px; height:18px; flex-shrink:0; }
html[data-design] main { width:100%; max-width:1440px; padding:24px 28px 64px; min-height:calc(100dvh - var(--header-height)); }
html[data-design] .navigation { width:var(--rail-width); padding:28px 12px 20px; gap:6px; }
html[data-design] .rail-brand { padding:0 12px 28px; font-size:19px; }
html[data-design] .rail-note { padding:16px 12px 0; font-size:12px; }
html[data-design] .navigation button { min-height:50px; padding:12px; gap:10px; font-size:14px; }
html[data-design] .navigation svg { width:20px; height:20px; }
html[data-design] .heading { margin:0 0 20px; }
html[data-design] h1 { font-size:27px; letter-spacing:-.045em; }
html[data-design] h2 { font-size:18px; }
html[data-design] .card { border-radius:10px; padding:24px; margin-bottom:20px; }
html[data-design] .chart-grid .card { margin-bottom:0; }
html[data-design] .section-heading { flex-direction:row; flex-wrap:wrap; align-items:center; gap:12px; }
html[data-design] .section-heading > :is(div,select) { min-width:0; max-width:100%; }
html[data-design] :is(.muted,#status,.complex-row small) { font-size:13px; line-height:1.65; }
html[data-design] footer { padding:0 28px 40px; }
body:is([data-view=complexes],[data-view=detail]) .heading { position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }

/* The destination tabs occupy the same place in every complex view. */
html #complex-navigation.journey-navigation { position:static; display:flex; align-items:stretch; gap:24px; margin:0 0 22px; padding:0; border:0; border-bottom:1px solid var(--line); border-radius:0; background:transparent; }
html #complex-navigation.journey-navigation button { position:relative; display:flex; flex-direction:row; align-items:center; justify-content:center; min-height:48px; min-width:0; padding:8px 2px 12px; margin:0; border:0; border-bottom:3px solid transparent; border-radius:0; background:transparent; color:var(--muted); box-shadow:none; }
html #complex-navigation.journey-navigation button:hover:not(:disabled) { color:var(--accent); background:transparent; }
html #complex-navigation.journey-navigation button[aria-current=page] { color:var(--accent); background:transparent; border-color:var(--accent); box-shadow:none; }
html #complex-navigation.journey-navigation button:disabled { opacity:.65; }
.journey-title { font-size:14px; font-weight:650; white-space:nowrap; }
html #complex-navigation small { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
html #complex-navigation #compare-count { position:static; display:inline-block; min-width:22px; margin-left:5px; padding:0 6px; border-radius:5px; background:var(--line); color:var(--ink); font-size:12px; }
html #complex-navigation button[aria-current] #compare-count { background:var(--accent); color:#fff; }
.journey-context { padding:0; margin:0 0 16px; border:0; border-radius:0; background:transparent; }
.journey-context > summary { min-height:44px; padding:10px 0; font-size:13px; color:var(--muted); cursor:pointer; }
.journey-context p { max-width:78ch; font-size:13px; }
.journey-context .journey-retention { margin-top:6px; font-size:12px; color:var(--muted); }
body[data-view=complexes] .journey-context { margin-top:8px; }
.journey-candidates { gap:8px; margin-top:10px; }

/* A compact search desk; results expand in normal document flow. */
#discovery-header { min-width:0; margin-bottom:20px; }
#discovery-header .complex-search { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.15fr); align-items:center; gap:0 32px; margin:0; padding:24px; background:var(--surface); border:1px solid var(--line); border-radius:10px; overflow:visible; }
#discovery-title { font-size:25px; line-height:1.4; font-weight:700; letter-spacing:-.05em; margin:0 0 8px; }
.search-intro p { margin:0; color:var(--muted); font-size:13px; line-height:1.7; max-width:36ch; }
.complex-search-form { min-width:0; }
#discovery-header .search-scope-control { display:flex; justify-content:flex-start; align-items:center; gap:6px; margin:0 0 4px; }
#discovery-header .search-scope-control label { margin:0; font-size:12px; }
#discovery-header .search-scope-control select { min-height:36px; border:0; background:transparent; padding:4px; font-size:13px; color:var(--accent); max-width:100%; }
#discovery-header .complex-search-controls { display:flex; align-items:center; max-width:none; min-width:0; gap:10px; padding:5px 5px 5px 14px; border:1px solid #92a8bf; border-radius:8px; background:var(--surface); }
#discovery-header .complex-search-controls:focus-within { outline:2px solid var(--accent); outline-offset:2px; }
.search-icon { width:20px; height:20px; flex-shrink:0; color:var(--muted); }
#discovery-header .complex-search-controls input { width:100%; min-width:0; min-height:44px; padding:8px 0; border:0; background:transparent; font-size:16px; }
#discovery-header .complex-search-controls input:focus-visible { outline:0; }
#discovery-header .complex-search-controls button { min-width:66px; align-self:stretch; }
#complex-search-scope-note { grid-column:2; margin:7px 0 0; color:var(--muted); font-size:12px; }
#complex-search-results { grid-column:1/-1; min-width:0; }
#complex-search-results:empty { display:none; }
#complex-search-results:not(:empty) { border-top:1px solid var(--line); margin-top:20px; padding-top:4px; }
#discovery-header #complex-search-more { grid-column:1/-1; justify-self:center; margin-top:12px; }
#discovery-header .search-recent { grid-column:1/-1; display:flex; align-items:center; gap:14px; min-width:0; margin-top:20px; padding-top:16px; border-top:1px solid var(--line); }
#discovery-header .search-recent h2 { font-size:12px; font-weight:500; color:var(--muted); white-space:nowrap; }
#discovery-header #recent-complexes { flex-wrap:nowrap; min-width:0; max-width:100%; overflow-x:auto; margin:0; padding:3px; gap:8px; scrollbar-width:thin; }
#discovery-header #recent-complexes li { flex-shrink:0; border-radius:6px; }
#discovery-header #recent-complexes .recent-region-select { display:flex; align-items:center; gap:8px; padding:6px 10px; font-size:13px; white-space:nowrap; }
#discovery-header #recent-complexes small { display:inline; margin:0; max-width:130px; overflow:hidden; text-overflow:ellipsis; font-size:11px; color:var(--muted); }

/* Current conditions and direct, commonly used controls share one toolbar. */
html[data-design] #query-context { display:flex; flex-wrap:wrap; align-items:center; gap:12px; padding:16px; margin:0 0 16px; border:1px solid var(--line); border-radius:8px; background:var(--surface); }
.context-location { display:flex; align-items:center; flex-wrap:wrap; gap:6px 12px; flex:1 1 240px; min-width:0; }
#region-change { max-width:100%; min-height:44px; border:0; padding:8px 0; background:transparent; font-size:14px; font-weight:650; color:var(--accent); }
#region-change::after { content:'⌄'; padding-left:8px; }
#current-context { font-size:13px; color:var(--muted); overflow-wrap:anywhere; }
html[data-design] .quick-filters { display:flex; flex-wrap:wrap; align-items:center; gap:8px; flex-shrink:1; min-width:0; }
html[data-design] .kind-switch { display:flex; flex-shrink:0; padding:3px; background:var(--soft); border:1px solid var(--line); border-radius:7px; }
html[data-design] .kind-switch button { min-height:38px; padding:6px 13px; border:0; border-radius:4px; font-size:13px; white-space:nowrap; background:transparent; color:var(--muted); }
html[data-design] .kind-switch button[aria-pressed=true] { background:var(--surface); color:var(--accent); font-weight:700; box-shadow:0 1px 3px #182c4314; }
#quick-period { width:auto; min-width:130px; font-size:13px; }
html[data-design] [data-listing-condition] { font-size:13px; min-height:44px; white-space:nowrap; }
[data-listing-condition]::after { content:'⌄'; padding-left:8px; color:var(--muted); }
html[data-design] #listing-location-slot #query-context { padding:0 24px 18px; margin:0; border:0; border-radius:0; gap:8px 16px; }
#listing-location-slot .context-location { flex-basis:100%; }
#listing-location-slot #current-context,#listing-location-slot #recent-regions-inline { display:none; }
#listing-location-slot #region-change { min-height:36px; padding:2px 0; font-size:13px; font-weight:500; }
.recent-regions-inline { flex-basis:100%; max-width:100%; min-width:0; padding-top:6px; }
#recent-regions-main { max-width:100%; }

/* List columns align with their values without absolutely positioned controls. */
html[data-design] .listing { padding:0; overflow:hidden; }
html[data-design] .listing > .section-heading { flex-direction:row; flex-wrap:nowrap; align-items:flex-start; padding:22px 24px 0; margin:0 0 4px; }
.listing-heading { min-width:0; }
.listing-heading .muted { margin:6px 0 0; }
#sort { position:static; flex-shrink:0; max-width:140px; min-height:40px; padding:6px 8px; font-size:13px; background:transparent; }
#listing-budget { padding:0 24px; margin:0 0 14px; }
.listing-columns { display:grid; grid-template-columns:minmax(0,1fr) minmax(180px,240px) 100px; gap:24px; padding:10px 24px; background:var(--soft); border-block:1px solid var(--line); font-size:12px; color:var(--muted); }
.listing-columns span:nth-child(2) { text-align:right; }
.listing-columns span:last-child { text-align:center; }
html[data-design] #complex-list .complex-row { display:grid; grid-template-columns:minmax(0,1fr) minmax(180px,240px) 100px; gap:24px; align-items:center; padding:18px 24px; background:var(--surface); }
html[data-design] #complex-list .complex-row:hover { background:var(--soft); }
html[data-design] .name-button { min-height:36px; font-size:15px; font-weight:650; overflow-wrap:anywhere; }
html[data-design] .complex-row > div { min-width:0; }
html[data-design] .complex-row small { overflow-wrap:anywhere; }
html[data-design] .complex-row .amount strong { font-size:22px; letter-spacing:-.035em; font-variant-numeric:tabular-nums; }
html[data-design] .compare-add { font-size:13px; min-height:44px; padding:7px 10px; }
html[data-design] .compare-add[aria-pressed=true] { color:var(--accent); background:var(--selected); border-color:var(--accent); }
#complex-list > .muted { margin:0; padding:28px 24px; }
html[data-design] #more-list { display:block; min-width:180px; margin:16px auto; }
.listing-tools { padding:12px 24px; border-top:1px solid var(--line); }
.listing-tools > summary { min-height:44px; padding:10px 0; font-size:13px; color:var(--muted); cursor:pointer; }
.listing-tools .list-controls { margin-top:12px; }

/* Keep selected candidates available while moving through long lists. */
html[data-design] #compare-tray { position:fixed; inset:auto 28px 20px calc(var(--rail-width) + 28px); z-index:22; display:flex; flex-wrap:wrap; align-items:center; gap:8px; width:auto; max-width:900px; padding:10px 14px; margin:0 auto; border:1px solid #b6c8da; border-radius:10px; background:var(--surface); box-shadow:0 6px 24px #182c431a; color:var(--ink); }
#compare-tray-text { min-width:100px; flex:1; font-weight:600; }
html[data-design] #compare-tray button { min-height:44px; font-size:13px; }
html[data-design] #compare-tray #clear-comparison { color:var(--muted); background:var(--surface); border-color:var(--line); }
#compare-tray-actions { display:flex; gap:8px; }
#compare-tray-candidates { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; list-style:none; padding:0; margin:0; min-width:0; width:100%; }
.comparison-candidate { display:flex; align-items:center; gap:8px; min-width:0; padding:4px 8px 4px 12px; background:var(--soft); border-radius:6px; }
html[data-design] #compare-tray .comparison-candidate-name { flex:1; min-width:0; border:0; padding:8px 0; background:transparent; color:var(--ink); text-align:left; overflow-wrap:anywhere; }
.comparison-candidate-name strong { display:block; font-size:13px; font-weight:600; }
.comparison-candidate-name small { display:block; margin-top:2px; font-size:12px; color:var(--muted); }
html[data-design] #compare-tray .comparison-candidate-remove { flex-shrink:0; display:grid; place-items:center; width:44px; height:44px; padding:12px; border:0; background:transparent; border-radius:50%; color:var(--muted); }
.comparison-candidate-remove svg { width:18px; height:18px; }
@media(max-width:600px) {
  #compare-tray-candidates { grid-template-columns:minmax(0,1fr); }
}
html[data-design] #feedback { bottom:100px; pointer-events:none; }
html[data-design] body:has(#compare-tray:not([hidden])) main { padding-bottom:120px; }
.load-status { gap:10px; min-width:0; }
html[data-design] #status { max-width:100%; margin:0 0 14px; overflow-wrap:anywhere; }

/* Charts, maps and tables respect the same content boundary. */
html[data-design] .section-links { top:var(--content-top); scroll-margin-top:0; gap:24px; margin:0 0 20px; }
html[data-design] .chart-grid { gap:20px; }
html[data-design] #metrics { border-left:0; border-top:0; border-radius:10px; }
html[data-design] .metrics { grid-template-columns:repeat(4,minmax(0,1fr)); gap:0; padding:20px 0; }
html[data-design] .metric { padding:0 20px; }
html[data-design] .metric strong { font-size:clamp(22px,2.2vw,29px); }
html[data-design] .map-layout { grid-template-columns:minmax(0,1fr) 300px; }
html[data-design] .map-layout > .card { min-width:0; }
html[data-design] .map-list .complex-row { grid-template-columns:minmax(0,1fr) auto; gap:8px; }
html[data-design] .map-list .amount { grid-column:1; grid-row:2; text-align:left; }
html[data-design] .map-list .compare-add { grid-column:2; grid-row:1/3; }
html[data-design] .distribution-controls input { min-height:17px; }
html[data-design] .chart-grid,html[data-design] .map-layout,html[data-design] .view { min-width:0; }
html[data-design] .transaction-trend-chart { height:410px; }
#detail-scope { display:none; }

@media(min-width:901px) and (max-width:1200px) {
  html[data-design] { --rail-width:176px; }
  html[data-design] main { padding:20px 24px 64px; }
  #discovery-header .complex-search { grid-template-columns:minmax(0,1fr); gap:16px; }
  .search-intro p { max-width:none; }
  #complex-search-scope-note { grid-column:1; margin-top:0; }
  html[data-design] .chart-grid,html[data-design] .map-layout { grid-template-columns:minmax(0,1fr); }
  html[data-design] .metrics { grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px 0; }
  html[data-design] #complex-list .complex-row,.listing-columns { grid-template-columns:minmax(0,1fr) minmax(130px,180px) 96px; gap:16px; }
  html[data-design] .map-list { max-height:none; overflow:visible; }
}
@media(min-width:901px) {
  html[data-design=atlas] .navigation { width:100%; padding:0 max(28px,calc((100vw - 1384px)/2)); }
  html[data-design=atlas] #compare-tray { left:28px; }
}
@media(max-width:900px) {
  html[data-design] { --rail-width:0px; --navigation-height:60px; }
  html[data-design] body { display:block; }
  /* Browser-owned scroll controls occupy the bottom center in Samsung Internet.
     Keep destinations in a stable row beneath the header, outside that area. */
  html[data-design] .navigation { position:sticky; inset:auto; top:var(--header-height); width:100%; height:var(--navigation-height); display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:4px; padding:6px 8px; background:var(--surface); color:var(--muted); border:0; border-bottom:1px solid var(--line); box-shadow:none; }
  html[data-design] .navigation button { flex-direction:row; gap:6px; min-height:44px; padding:6px 2px; font-size:12px; white-space:nowrap; }
  html[data-design] .navigation button:hover { background:var(--soft); }
  html[data-design] .navigation .active { color:var(--accent); background:var(--selected); box-shadow:none; }
  html[data-design] .navigation .rail-brand,html[data-design] .navigation .rail-note { display:none; }
  html[data-design] body.search-focused #feedback { display:none; }
  html[data-design] .topbar { padding:10px 20px; }
  html[data-design] main { padding:20px 20px 110px; min-height:calc(100dvh - var(--content-top)); }
  html[data-design] #compare-tray { left:20px; right:20px; bottom:calc(120px + env(safe-area-inset-bottom)); }
  html[data-design] #feedback { bottom:calc(196px + env(safe-area-inset-bottom)); }
  html[data-design] body:has(#compare-tray:not([hidden])) main { padding-bottom:240px; }
  html[data-design] footer { padding:0 20px 110px; }
  #discovery-header .complex-search { grid-template-columns:minmax(0,1fr); gap:16px; }
  .search-intro p { max-width:none; }
  #complex-search-scope-note { grid-column:1; margin-top:-8px; }
  #discovery-header .search-recent { margin-top:0; }
  html[data-design] .map-layout { grid-template-columns:minmax(0,1fr); }
  html[data-design] .map-list { max-height:none; overflow:visible; }
  html[data-design] .chart-grid { grid-template-columns:minmax(0,1fr); }
}
@media(max-width:600px) {
  html[data-design] .topbar { padding:10px 16px; }
  html[data-design] .brand { font-size:15px; }
  html[data-design] main { padding:12px 12px 100px; }
  html[data-design] h1 { font-size:23px; }
  html[data-design] h2 { font-size:17px; }
  html[data-design] .heading { margin-bottom:16px; }
  html[data-design] .card { padding:18px 14px; margin-bottom:16px; border-radius:8px; }
  html #complex-navigation.journey-navigation { gap:0; justify-content:space-between; margin-bottom:16px; }
  html #complex-navigation.journey-navigation button { flex:1; padding:8px 4px 12px; min-height:48px; }
  .journey-title { font-size:13px; }
  #discovery-header { margin-bottom:16px; }
  #discovery-header .complex-search { padding:18px 16px; gap:12px; }
  #discovery-title { font-size:22px; margin-bottom:6px; }
  .search-intro p { font-size:12px; }
  #discovery-header .complex-search-controls { padding-left:10px; gap:8px; }
  #discovery-header .complex-search-controls button { min-width:58px; padding:8px 12px; }
  #complex-search-scope-note { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
  #discovery-header .search-recent { display:block; padding-top:10px; }
  #discovery-header .search-recent h2 { margin-bottom:6px; }
  #discovery-header #recent-complexes .recent-region-select { display:block; font-size:12px; }
  #discovery-header #recent-complexes small { display:block; }
  #complex-search-results:not(:empty) { margin-top:0; }
  html[data-design] .listing { padding:0; }
  html[data-design] .listing > .section-heading { padding:18px 16px 0; }
  .listing-heading .muted { display:none; }
  #sort { max-width:104px; font-size:12px; }
  html[data-design] #listing-location-slot #query-context { padding:0 16px 14px; gap:8px; }
  html[data-design] #query-context { padding:12px; gap:10px; }
  .context-location { flex-basis:100%; width:100%; gap:4px 8px; }
  #region-change { min-height:44px; font-size:13px; }
  #current-context { font-size:12px; }
  html[data-design] .quick-filters { width:100%; gap:8px; }
  html[data-design] .kind-switch { flex:1 0 140px; min-width:140px; }
  html[data-design] .kind-switch button { flex:1; min-height:38px; padding:6px 9px; }
  #quick-period { flex:0 0 122px; min-width:0; max-width:145px; padding:6px; }
  html[data-design] [data-listing-condition] { font-size:12px; padding:7px 10px; }
  #listing-budget { padding:0 16px; }
  .listing-columns { display:none; }
  html[data-design] #complex-list { border-top:1px solid var(--line); }
  html[data-design] #complex-list .complex-row { grid-template-columns:minmax(0,1fr) 88px; gap:4px 12px; padding:16px; }
  html[data-design] #complex-list .complex-row .amount { grid-column:1; grid-row:2; max-width:none; text-align:left; }
  html[data-design] #complex-list .complex-row .compare-add { grid-column:2; grid-row:1/3; min-width:0; padding:6px; font-size:12px; }
  html[data-design] .complex-row .amount strong { font-size:21px; }
  html[data-design] .complex-row .amount small { font-size:12px; }
  html[data-design] .name-button { min-height:36px; font-size:15px; }
  .listing-tools { padding:10px 16px; }
  html[data-design] #status { font-size:12px; margin-bottom:12px; }
  html[data-design] .section-links { gap:20px; margin:0 -12px 16px; padding:0 12px; }
  html[data-design] .section-links button { min-height:48px; font-size:13px; }
  html[data-design] .chart-grid { gap:16px; }
  html[data-design] .metrics { grid-template-columns:repeat(2,minmax(0,1fr)); padding:0; }
  html[data-design] .metric { padding:14px; }
  html[data-design] .metric strong { font-size:24px; }
  html[data-design] .transaction-trend-chart { height:350px; }
  html[data-design] #detail-metrics { grid-template-columns:repeat(2,minmax(0,1fr)); }
  html[data-design] #detail-content > .card:first-child > .section-heading { flex-wrap:nowrap; align-items:flex-start; }
  html[data-design] #detail-content > .card:first-child > .section-heading > div { flex:1; }
  html[data-design] #detail-area { width:100%; }
  html[data-design] #detail-add { min-height:44px; padding:7px 9px; }
  html[data-design] .distribution-actions { gap:6px; }
  html[data-design] .distribution-actions button { font-size:12px; padding:6px 10px; }
  html[data-design] #compare-tray { left:12px; right:12px; padding:10px; gap:6px; }
  html[data-design] #compare-tray button { min-height:44px; padding:7px 9px; font-size:12px; }
  #compare-tray-text { min-width:88px; font-size:13px; }
  html[data-design] footer { padding:0 16px 110px; }
}
@media(max-width:350px) {
  #quick-period { flex-basis:112px; }
  html[data-design] .kind-switch button { padding:6px 7px; }
}
@media(min-width:600px) and (max-width:900px) and (max-height:500px) {
  html[data-design] main { padding-top:8px; }
  html #complex-navigation.journey-navigation { margin-bottom:8px; }
  #discovery-header .complex-search { grid-template-columns:minmax(0,1fr) minmax(0,1.2fr); padding:12px 16px; gap:0 16px; }
  #discovery-title { font-size:20px; }
  .search-intro p { font-size:12px; }
  #complex-search-scope-note { grid-column:2; margin:2px 0 0; font-size:11px; }
}
/* Short viewports need room for the content between the header and bottom menu. */
@media(max-height:700px) {
  html[data-design] #compare-tray { position:static; inset:auto; margin:12px 0; max-width:none; }
  html[data-design] body:has(#compare-tray:not([hidden])) main { padding-bottom:110px; }
}
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } }