/* KeyStroy Plot Climate visual layer. Domain controls keep their original IDs. */
:root {
  --primary: #102d61;
  --primary-hover: #164981;
  --bg-main: #f2f6f8;
  --bg-card: #ffffff;
  --text-main: #172940;
  --text-muted: #52677a;
  --border: #d5e0e8;
  --border-focus: #009ee3;
  --ks-cyan: #009ee3;
  --ks-ice: #eaf6fc;
  --ks-soft: #f7fafc;
  --ks-shadow: 0 12px 34px rgba(16, 45, 97, .07);
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
}

html { scroll-behavior: smooth; }
body { letter-spacing: -.01em; }
button, input, select, textarea { font: inherit; }
button, a, input, select, textarea { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 3px solid var(--ks-cyan); outline-offset: 3px; }

.app-header { padding: 18px clamp(16px, 3vw, 42px); background: var(--primary); border-bottom: 0; }
.header-container { max-width: 1640px; gap: 20px; }
.brand-group { display: flex; align-items: center; gap: 18px; }
.brand-mark { font-size: 1.55rem; font-weight: 850; letter-spacing: -.055em; line-height: 1; white-space: nowrap; }
.brand-copy { border-left: 1px solid rgba(255,255,255,.32); padding-left: 18px; }
.brand-title { font-size: clamp(.98rem, 1.3vw, 1.2rem); line-height: 1.22; letter-spacing: -.02em; }
.brand-subtitle { color: #aac9e4; font-size: .72rem; margin-top: 3px; }
.header-actions { gap: 8px; flex-wrap: wrap; }
.header-actions .btn { color: #fff; border-color: rgba(255,255,255,.48); background: transparent; min-height: 40px; font-weight: 650; }
.header-actions .btn:hover { background: rgba(255,255,255,.12); }
.header-actions .btn-primary { color: var(--primary); background: #fff; border-color: #fff; }
.header-actions .btn-primary:hover { color: var(--primary); background: var(--ks-ice); }

.app-container { max-width: 1640px; margin: 0 auto; padding: 0 clamp(16px, 3vw, 42px) 56px; gap: 20px; }
.product-intro { display: flex; justify-content: space-between; align-items: end; gap: 24px; padding: 38px 0 20px; }
.product-kicker { color: #087db1; font-size: .71rem; font-weight: 800; letter-spacing: .13em; }
.product-intro h2 { max-width: 900px; font-size: clamp(1.9rem, 3.5vw, 3.45rem); letter-spacing: -.055em; line-height: 1.06; margin: 9px 0 13px; color: var(--primary); }
.product-intro p { max-width: 760px; color: #4e6375; font-size: clamp(.95rem, 1.2vw, 1.08rem); line-height: 1.55; }
.intro-action { display: inline-flex; align-items: center; gap: 15px; white-space: nowrap; padding: 13px 16px; border-radius: 11px; background: var(--ks-cyan); color: #fff; font-weight: 750; text-decoration: none; box-shadow: 0 8px 24px rgba(0,158,227,.17); }
.intro-action:hover { background: #007fb8; }
.workspace-nav { display: flex; gap: 5px; overflow-x: auto; border-bottom: 1px solid var(--border); scrollbar-width: thin; }
.workspace-nav a { color: #556c7e; text-decoration: none; font-weight: 700; padding: 12px 17px 14px; white-space: nowrap; border-bottom: 3px solid transparent; }
.workspace-nav a:hover, .workspace-nav a:focus-visible { color: var(--primary); border-bottom-color: var(--ks-cyan); }

.workspace-layout { display: grid; grid-template-columns: minmax(286px, 328px) minmax(0, 1fr); align-items: start; gap: 20px; }
.workspace-intake { display: grid; gap: 14px; min-width: 0; }
.panel { border-radius: 15px; border-color: var(--border); box-shadow: var(--ks-shadow); }
.panel-header { background: #fff; border-bottom-color: var(--border); padding: 17px 19px; }
.panel-header h2 { color: var(--primary); font-size: 1.06rem; font-weight: 780; letter-spacing: -.025em; }
.panel-body { padding: 18px; }
.control-panel .form-grid { display: grid; grid-template-columns: minmax(0,1fr); gap: 13px; }
.control-panel .form-group.form-row { display: flex; flex-wrap: wrap; align-items: end; }
.control-panel .form-group.form-row > div { min-width: 112px; }
.control-panel .form-row { flex-wrap: wrap; }
.control-panel input { min-width: 0; max-width: 100%; }
.control-panel .action-bar { padding-top: 15px; }
.control-panel .button-group { display: grid; width: 100%; }
.control-panel .button-group > * { width: 100%; text-align: center; justify-content: center; }
.control-panel .btn { min-height: 42px; }
.provenance-bar { display: grid; grid-template-columns: 1fr; padding: 14px 16px; border: 1px solid var(--border); background: #fff; border-radius: 13px; gap: 9px; box-shadow: var(--ks-shadow); }
.provenance-item { min-width: 0; overflow-wrap: anywhere; }
.provenance-item .label { font-size: .7rem; }
.provenance-item .value { font-size: .78rem; }

.placement-panel { min-width: 0; }
.placement-panel .panel-header { display: flex; align-items: center; gap: 8px; }
.placement-panel .panel-body { padding: 15px; }
.placement-layout { grid-template-columns: minmax(0, 1fr) minmax(275px, 330px); gap: 16px; align-items: start; }
.map-and-plan-wrapper, .placement-controls { min-width: 0; }
.mobile-controls-toggle { display: none; }
.view-switch-bar { padding: 4px 3px 10px; gap: 10px; }
.view-switch-bar .btn { min-height: 39px; }
.map-view-box { height: clamp(420px, 40vw, 660px); border-radius: 12px; border-color: #c6d8e5; background: #e9f3f8; }
.canvas-wrapper { min-height: 420px; }
.terrain-inspector-bar { border-radius: 10px; background: var(--ks-soft); }
.control-box, .margins-card, .evaluation-card { border-radius: 11px; padding: 15px; }
.control-box { background: var(--ks-soft); }
.control-box h3, .variants-section h3, .saved-variants-section h3 { color: var(--primary); font-size: .96rem; }
.control-row { grid-template-columns: repeat(2, minmax(0,1fr)); }
.control-row input, .control-row select { min-width: 0; width: 100%; }
.control-row input[type=range] { grid-column: 1 / -1; }
.margins-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
.evaluation-card { background: var(--ks-ice); border-color: #cbeafa; }
.evaluation-card h4 { color: var(--primary); }
.variant-card, .saved-variant-card { border-radius: 10px; border-color: var(--border); padding: 13px; }
.variant-card.active { background: #eef8fd; border-color: var(--ks-cyan); border-left-color: var(--ks-cyan); }
.variant-card-title { color: var(--primary); }
.variant-card:hover { border-color: var(--ks-cyan); }

.analysis-grid { gap: 20px; scroll-margin-top: 20px; }
.analysis-grid .panel { min-width: 0; }
.metric-card { border-radius: 10px; }
.cta-panel { background: var(--primary); border: 0; padding: clamp(22px, 3vw, 34px); color: #fff; }
.cta-content h3 { color: #fff; font-size: clamp(1.3rem, 2vw, 1.8rem); }
.cta-content p { color: #cfe3f3; max-width: 780px; font-size: .95rem; }
.cta-panel .btn-primary { background: var(--ks-cyan); border-color: var(--ks-cyan); }
.cta-panel .disclaimer-text { color: #c4d9e9; border-top-color: rgba(255,255,255,.25); }
.app-footer { margin-top: 0; }
.footer-container { max-width: 1640px; }
#control-panel, #placement-panel, #analysis-grid, #cta-panel { scroll-margin-top: 22px; }

@media (max-width: 1320px) {
  .placement-layout { grid-template-columns: minmax(0, 1fr); }
  .placement-controls { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); align-items: start; }
  .placement-controls .variants-section, .placement-controls .saved-variants-section { grid-column: 1 / -1; }
}
@media (max-width: 1050px) {
  .workspace-layout { grid-template-columns: minmax(0,1fr); }
  .workspace-intake { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(230px,1fr); align-items: start; }
  .workspace-intake .provenance-bar { align-self: stretch; }
  .workspace-intake #alert-box { grid-column: 1 / -1; }
  .control-panel .form-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .control-panel .form-grid > :first-child { grid-column: 1 / -1; }
  .control-panel .button-group { display: flex; }
  .control-panel .button-group > * { width: auto; }
  .map-view-box { height: min(62vw, 580px); min-height: 400px; }
}
@media (max-width: 700px) {
  .app-header { padding: 15px 16px; }
  .header-container { align-items: start; }
  .brand-group { gap: 12px; }
  .brand-mark { font-size: 1.42rem; }
  .brand-copy { padding-left: 12px; }
  .brand-title { font-size: .9rem; }
  .brand-subtitle { font-size: .68rem; }
  .header-actions { width: 100%; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); }
  .header-actions .btn { padding: 8px 6px; font-size: .69rem; min-height: 42px; }
  .app-container { padding: 0 12px 32px; gap: 14px; }
  .product-intro { display: block; padding: 24px 4px 6px; }
  .product-intro h2 { font-size: clamp(1.85rem, 8vw, 2.8rem); }
  .product-intro p { font-size: .92rem; }
  .intro-action { margin-top: 16px; width: 100%; justify-content: space-between; }
  .workspace-nav { margin: 0 -12px; padding: 0 10px; }
  .workspace-nav a { font-size: .84rem; padding: 12px 13px; }
  .workspace-layout { display: flex; flex-direction: column; }
  .workspace-intake { display: grid; grid-template-columns: 1fr; order: 2; width: 100%; }
  .placement-panel { order: 1; width: 100%; }
  .placement-panel .panel-header { align-items: start; }
  .placement-panel .panel-body { padding: 10px; }
  .placement-layout { display: block; }
  .map-view-box { height: min(94vw, 470px); min-height: 310px; }
  .view-switch-bar { display: grid; }
  .view-switch-bar .button-group { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); }
  .view-switch-bar .btn { min-height: 44px; white-space: normal; }
  .view-switch-bar .map-controls-inline { justify-content: space-between; }
  .placement-controls { display: flex; margin-top: 14px; }
  .mobile-controls-toggle { display: flex; justify-content: space-between; align-items: center; width: 100%; margin-top: 14px; padding: 15px 17px; border: 1px solid #b6dcec; border-radius: 11px; background: var(--ks-ice); color: var(--primary); font-weight: 750; text-align: left; min-height: 50px; }
  .mobile-controls-toggle[aria-expanded="true"] span { transform: rotate(180deg); }
  .pc-js .mobile-controls-toggle[aria-expanded="false"] + .placement-controls { display: none; }
  .control-panel .form-grid { grid-template-columns: 1fr; }
  .control-panel .form-grid > :first-child { grid-column: auto; }
  .control-panel .button-group { display: grid; }
  .control-panel .button-group > * { width: 100%; }
  .terrain-inspector-bar { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .analysis-grid { display: grid; grid-template-columns: 1fr; }
  .panel-header h2 { font-size: 1rem; }
  .canvas-legend { justify-content: start; }
  .cta-panel { padding: 21px; }
}
@media (max-width: 380px) {
  .brand-subtitle { display: none; }
  .header-actions { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .header-actions .btn:last-child { grid-column: 1 / -1; }
  .header-actions .btn { font-size: .82rem; }
  .terrain-inspector-bar { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
@media print { .product-intro, .workspace-nav { display: none; } .workspace-layout { display: block; } .workspace-intake { display: block; } .placement-controls { display: block; } }

/* Compact plan-first dashboard: intake / map / working results. */
.app-container { max-width: 1840px; gap: 10px; }
.product-intro { align-items: center; padding: 13px 0 3px; gap: 14px; }
.product-kicker { display: none; }
.product-intro h2 { font-size: clamp(1.12rem, 1.6vw, 1.5rem); line-height: 1.2; margin: 0; letter-spacing: -.035em; }
.product-intro p { font-size: .78rem; line-height: 1.35; margin: 3px 0 0; }
.intro-action { display: none; }
.workspace-nav a { padding: 9px 14px 10px; font-size: .82rem; }
.workspace-layout { gap: 12px; }
.panel-header { padding: 11px 13px; }
.panel-header h2 { font-size: .94rem; }
.panel-body { padding: 12px; }
.placement-panel .panel-body { padding: 9px; }
.map-view-box { height: min(67vh, 690px); min-height: 490px; }
.view-switch-bar { margin-bottom: 3px; padding-bottom: 5px; }
.view-switch-bar .btn { min-height: 35px; padding: 6px 9px; font-size: .72rem; }
.view-switch-bar .select-small { font-size: .7rem; }
.control-box, .margins-card, .evaluation-card { padding: 10px; }
.control-box h3, .variants-section h3, .saved-variants-section h3 { font-size: .87rem; }
.control-row { gap: 4px 7px; margin-bottom: 5px; }
.variant-card, .saved-variant-card { padding: 9px 10px; }
.variant-card-desc, .variant-card-tradeoff { line-height: 1.32; }
.placement-controls { gap: 8px; }
.terrain-inspector-bar { margin-top: 5px; padding: 7px 9px; }

@media (min-width: 1051px) {
  .workspace-layout { grid-template-columns: clamp(260px, 23vw, 318px) minmax(0,1fr); }
  .workspace-intake { display: contents; }
  .workspace-intake .control-panel { grid-column: 1; grid-row: 1; }
  .workspace-intake .provenance-bar { grid-column: 1; grid-row: 2; }
  .workspace-intake #alert-box { grid-column: 1; grid-row: 3; }
  .placement-panel { grid-column: 2; grid-row: 1 / span 3; }
  .workspace-intake .pc-site-summary { grid-column: 1 / -1; grid-row: 4; }
  .placement-layout { grid-template-columns: minmax(0,1fr) clamp(246px, 23vw, 320px); gap: 11px; }
  .placement-controls { display: flex; max-height: min(77vh, 790px); overflow-y: auto; overscroll-behavior: contain; padding-right: 3px; scrollbar-width: thin; }
  .control-panel .form-grid { gap: 8px; }
  .control-panel .action-bar { padding-top: 8px; }
  .control-panel .btn { min-height: 35px; font-size: .74rem; }
  .provenance-bar { padding: 9px 11px; gap: 5px; }
}

@media (max-width: 1050px) {
  .map-view-box { height: min(60vw, 620px); min-height: 370px; }
}

@media (min-width: 701px) and (max-width: 1050px) {
  .workspace-intake { display: contents; }
  .workspace-intake .control-panel { grid-row: 1; }
  .workspace-intake .provenance-bar { grid-row: 2; }
  .workspace-intake #alert-box { grid-row: 3; }
  .placement-panel { grid-row: 4; }
  .workspace-intake .pc-site-summary { grid-row: 5; }
}

@media (max-width: 700px) {
  .product-intro { padding: 12px 4px 2px; }
  .product-intro h2 { font-size: 1.15rem; }
  .product-intro p { font-size: .75rem; }
  .workspace-nav a { padding: 9px 11px 10px; }
  .map-view-box { height: min(92vw, 460px); min-height: 300px; }
  .placement-controls { max-height: none; overflow: visible; }
  .view-switch-bar .btn { min-height: 43px; }
  .workspace-intake { display: contents; }
  .workspace-intake .control-panel, .workspace-intake .provenance-bar, .workspace-intake #alert-box { order: 2; width: 100%; }
  .workspace-intake .pc-site-summary { order: 3; width: 100%; }
}