/* ═══════════════════════════════════════════════════════════════
   Metsäkartta – CSS
   ═══════════════════════════════════════════════════════════════ */

:root {
  --bg: #F7F8FA;
  --surface: #FFFFFF;
  --border: #E2E5EB;
  --border-light: #F0F1F4;
  --text: #1A1D24;
  --text-sec: #6B7280;
  --text-muted: #9CA3AF;
  --primary: #15803D;
  --primary-hover: #166534;
  --primary-light: #ECFDF5;
  --accent: #2563EB;
  --warning: #D97706;
  --warning-light: #FFFBEB;
  --danger: #DC2626;
  --danger-light: #FEF2F2;
  --pine: #D97706;
  --spruce: #15803D;
  --birch: #2563EB;
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.04);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.08);
  --shadow-lg: 0 8px 30px rgba(0,0,0,0.12);
  --radius: 10px;
  --radius-lg: 14px;
  --font: 'DM Sans', system-ui, -apple-system, sans-serif;
  --mono: 'JetBrains Mono', monospace;
  --topbar-h: 56px;
  --panel-w: 380px;
}
* { margin:0; padding:0; box-sizing:border-box; }
[hidden] { display:none !important; }
html, body { height:100%; }
/* Column layout: the top bar takes whatever height its content needs and the map always starts below it.
   100dvh follows the phone browser's collapsing address bar so nothing is cut off at the bottom. */
body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  line-height: 1.5;
  overflow: hidden;
  display:flex; flex-direction:column;
  height:100dvh;
}
a { color: var(--accent); }

/* ── Topbar ── */
.topbar {
  min-height: var(--topbar-h); flex:none;
  display:flex; align-items:center; gap:16px;
  padding: 0 16px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  position: relative; z-index: 1100;
}
.brand { display:flex; align-items:center; gap:8px; font-size:18px; font-weight:700; letter-spacing:-0.3px; color:var(--primary); white-space:nowrap; }
.brand span:not(.badge) { color: var(--text); }
.badge { font-size:10px; font-weight:600; background:var(--text); color:#fff; padding:2px 7px; border-radius:5px; letter-spacing:.5px; }
.search-box {
  display:flex; align-items:center; gap:8px; flex:1; max-width:560px;
  background:var(--bg); border:1px solid var(--border); border-radius:var(--radius);
  padding:4px 4px 4px 12px; transition:border-color .2s; color: var(--text-muted);
}
.search-box:focus-within { border-color:var(--primary); background:var(--surface); }
.search-box input { border:none; outline:none; font-size:13px; font-family:var(--font); width:100%; background:transparent; color:var(--text); }
.search-box input::placeholder { color:var(--text-muted); }
.topbar-actions { display:flex; gap:8px; align-items:center; margin-left:auto; }

/* ── Buttons ── */
.btn { display:inline-flex; align-items:center; gap:6px; padding:9px 16px; border-radius:var(--radius); font-size:13px; font-weight:500; font-family:var(--font); border:1px solid var(--border); background:var(--surface); color:var(--text); cursor:pointer; transition:all .15s; white-space:nowrap; }
.btn:hover { background:#f5f5f7; border-color:#ccc; }
.btn:disabled { opacity:.45; cursor:not-allowed; }
.btn-sm { padding:6px 12px; font-size:12.5px; }
.btn-primary { background:var(--primary); color:#fff; border-color:var(--primary); }
.btn-primary:hover { background:var(--primary-hover); }
.btn-icon { padding:6px 10px; font-size:14px; line-height:1; }
.btn-danger { color:var(--danger); }
.btn-google { display:inline-flex; align-items:center; justify-content:center; gap:10px; background:#fff; }
.btn-google .g-logo { flex:none; }

/* ── Workspace ── */
.workspace { position:relative; flex:1; min-height:0; }
#map { position:absolute; inset:0; background:#dfe6e0; }
.leaflet-container { font-family: var(--font); }

/* ── Panel ── */
.panel {
  position:absolute; top:12px; left:12px; bottom:12px; width:var(--panel-w);
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg);
  box-shadow: var(--shadow-lg); z-index:1000; overflow-y:auto; display:flex; flex-direction:column;
  transition: transform .2s ease, opacity .2s ease;
}
.panel.collapsed { transform: translateX(calc(-100% - 24px)); opacity:0; pointer-events:none; }
.panel-section { padding:16px 18px; border-bottom:1px solid var(--border-light); }
.panel-section:last-child { border-bottom:none; }
.panel-footer { margin-top:auto; background:var(--bg); border-radius: 0 0 var(--radius-lg) var(--radius-lg); }
.panel-title { font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:.6px; color:var(--text-sec); margin-bottom:10px; display:flex; align-items:center; gap:8px; }
.panel-title .count { background:var(--primary-light); color:var(--primary); font-size:11px; padding:1px 7px; border-radius:10px; text-transform:none; letter-spacing:0; }
.hint { font-size:12px; color:var(--text-sec); line-height:1.45; }
#ownCacheStatus[title]:not([title='']) { cursor:help; }
.empty { font-size:13px; color:var(--text-sec); background:var(--bg); border:1px dashed var(--border); border-radius:var(--radius); padding:14px; text-align:center; }

.tool-row { display:flex; gap:8px; margin-bottom:10px; flex-wrap:wrap; }
.tool-btn { flex:1; display:flex; flex-direction:column; align-items:center; gap:5px; padding:10px 6px; font-size:12px; font-weight:500; font-family:var(--font); border:1px solid var(--border); background:var(--surface); border-radius:var(--radius); cursor:pointer; color:var(--text-sec); transition:all .15s; }
.tool-btn:hover { border-color:#ccc; color:var(--text); }
.tool-btn.active { background:var(--primary-light); border-color:var(--primary); color:var(--primary); }
.tool-btn:disabled { opacity:.5; cursor:not-allowed; }

/* ── Summary ── */
.value-hero { background: linear-gradient(135deg, #14532D, #15803D); color:#fff; border-radius:var(--radius); padding:16px; margin-bottom:12px; }
.value-label { font-size:11.5px; text-transform:uppercase; letter-spacing:.6px; opacity:.85; }
.value-main { font-size:30px; font-weight:800; letter-spacing:-.5px; font-family:var(--mono); margin-top:2px; }
.value-range { font-size:12.5px; opacity:.85; font-family:var(--mono); }
.kpi-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-bottom:12px; }
.kpi { background:var(--bg); border-radius:8px; padding:8px 10px; }
.kpi-label { font-size:10.5px; color:var(--text-sec); text-transform:uppercase; letter-spacing:.4px; }
.kpi-val { font-size:14px; font-weight:600; font-family:var(--mono); }
.kpi-sub { font-size:11px; color:var(--text-sec); font-family:var(--mono); }
.breakdown { width:100%; border-collapse:collapse; font-size:13px; margin-bottom:12px; }
.breakdown td { padding:5px 0; border-bottom:1px solid var(--border-light); }
.breakdown td.num { text-align:right; font-family:var(--mono); white-space:nowrap; }
.breakdown tr.sub td { font-weight:600; }
.breakdown .hint { display:block; font-size:11px; }
.breakdown tr.total td { font-weight:700; font-size:14px; border-bottom:none; border-top:2px solid var(--text); }
#propertyBreakdown { margin-top:14px; }
#propertyBreakdown .sub-title { font-size:12.5px; text-transform:uppercase; letter-spacing:.5px; color:var(--text-sec); margin:0 0 6px; }
#propertyBreakdown .sub-title .hint { text-transform:none; letter-spacing:0; font-weight:400; }
.prop-breakdown th { font-size:10.5px; text-transform:uppercase; letter-spacing:.4px; color:var(--text-sec); text-align:left; padding:0 0 4px; border-bottom:1px solid var(--border); }
.prop-breakdown th.num { text-align:right; }
.prop-breakdown td.num, .prop-breakdown th.num { white-space:nowrap; padding-left:12px; font-size:12.5px; }
.prop-breakdown td:first-child { min-width:0; overflow-wrap:anywhere; }
.prop-breakdown td:first-child small { white-space:normal; }
.prop-breakdown th[data-sort] { cursor:pointer; user-select:none; }
.prop-breakdown th[data-sort]:hover { color:var(--text); }
.prop-breakdown th.sorted { color:var(--primary); }
.prop-breakdown th.sorted::after { content:' ▼'; font-size:8px; }
.prop-breakdown th.sorted.asc::after { content:' ▲'; }
.prop-breakdown tbody tr[data-prop] { cursor:pointer; }
.prop-breakdown tbody tr[data-prop]:hover td { background:var(--bg); }
.prop-breakdown td small { display:block; font-size:11px; color:var(--text-sec); font-weight:400; }
.prop-breakdown td.num small { font-family:var(--mono); }
.species-bar { display:flex; height:10px; border-radius:5px; overflow:hidden; background:var(--border-light); }
.species-bar span { display:block; height:100%; }
.species-legend { display:flex; gap:12px; margin-top:6px; font-size:11.5px; color:var(--text-sec); flex-wrap:wrap; }
.species-legend i { display:inline-block; width:9px; height:9px; border-radius:2px; margin-right:4px; vertical-align:middle; }
.c-pine { background:var(--pine); } .c-spruce { background:var(--spruce); } .c-birch { background:var(--birch); }

/* ── Stand list ── */
.stand-list { display:flex; flex-direction:column; gap:6px; }
.stand-card { border:1px solid var(--border); border-radius:8px; padding:8px 10px; font-size:12.5px; cursor:pointer; transition:all .15s; display:grid; grid-template-columns:1fr auto; gap:2px 10px; }
.stand-card:hover { border-color:var(--primary); background:var(--primary-light); }
.stand-card .sc-title { font-weight:600; }
.stand-card .sc-val { font-family:var(--mono); font-weight:600; text-align:right; }
.stand-card .sc-meta { grid-column:1 / -1; color:var(--text-sec); font-size:11.5px; display:flex; gap:8px; flex-wrap:wrap; }
.stand-card .sc-remove { grid-column:2; text-align:right; }
.stand-card .sc-remove button { background:none; border:none; color:var(--danger); cursor:pointer; font-size:11.5px; font-family:var(--font); padding:0; }
.tag { display:inline-block; font-size:10.5px; padding:1px 6px; border-radius:4px; background:var(--bg); border:1px solid var(--border); }
.tag.partial { background:var(--warning-light); border-color:#FCD34D; color:var(--warning); }

/* ── Layer box ── */
.layer-box { position:absolute; top:12px; right:12px; z-index:1100; }   /* above the legends (1000) */
body.layer-menu-open .map-legends { display:none; }
.layer-toggle { width:40px; height:40px; border-radius:var(--radius); border:1px solid var(--border); background:var(--surface); box-shadow:var(--shadow-md); cursor:pointer; display:flex; align-items:center; justify-content:center; color:var(--text); }
.layer-toggle:hover { background:#f5f5f7; }
/* Popups above Leaflet's controls (800) and our floating buttons (1000), below the open layer menu (1100): on a phone
   the property popup's close button and top corner were hidden behind the zoom control (user 28.9.) */
.leaflet-popup-pane { z-index:1050; }
.leaflet-container a.leaflet-popup-close-button { width:32px; height:32px; font-size:22px; line-height:32px; top:2px; right:2px; }
.map-fabs { position:absolute; top:60px; right:12px; z-index:1000; display:flex; flex-direction:column; gap:8px; }
.map-fabs .mobile-only { display:none; }
.map-fabs .layer-toggle.active { color:var(--primary); border-color:var(--primary); }
.map-fabs .layer-toggle.busy svg { animation: fab-pulse 1s ease-in-out infinite; }
@keyframes fab-pulse { 50% { opacity:.35; } }
/* Full-screen map: top bar and panel hidden, map takes the whole viewport (all screen sizes, mainly for phones) */
#btnPanelFab .ico-compress { display:none; }
body.map-full #btnPanelFab .ico-expand { display:none; }
body.map-full #btnPanelFab .ico-compress { display:block; }
body.map-full .topbar { display:none; }
body.map-full .panel { display:none; }
/* Polygon drawing: floating toolbar (undo / finish / cancel) and, on touch devices, a flag as the vertex marker – the
   pole's foot sits exactly on the point, so a finger does not cover it and the first flag is easy to tap to close */
.draw-bar { position:absolute; top:60px; right:60px; z-index:1000; width:260px; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow-lg); padding:10px 12px; font-size:12.5px; }
.draw-bar-hint { display:block; color:var(--text-sec); margin-bottom:8px; }
.draw-bar .tool-row { margin:0; display:flex; gap:6px; }
.draw-vertex { background:none; border:none; }
.draw-vertex svg { display:block; width:26px; height:30px; filter:drop-shadow(0 1px 1.5px rgba(0,0,0,.45)); }
.measure-box { position:absolute; top:60px; right:60px; z-index:1000; width:250px; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow-lg); padding:10px 12px; font-size:12.5px; }
.measure-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; }
.measure-box .tool-row { margin-bottom:8px; }
.measure-box .btn.active { background:var(--primary-light); border-color:var(--primary); color:var(--primary-hover); }
.measure-result { font-family:var(--mono); font-weight:600; min-height:18px; margin-bottom:8px; }
.measure-label { background:var(--surface); border:1px solid #7C3AED; color:#5B21B6; border-radius:6px; padding:2px 6px; font:600 11.5px var(--mono); white-space:nowrap; box-shadow:var(--shadow-md); }
.marker-label { background:rgba(255,255,255,.85); border:1px solid #B91C1C; color:#7F1D1D; border-radius:4px; padding:0 4px; font:600 10.5px var(--mono); box-shadow:none; }
.marker-label::before { display:none; }
.marker-label.leaflet-interactive { pointer-events:auto; cursor:pointer; }
/* Property identifiers as vector text from zoom 18 (the MML raster labels blur beyond 17); white halo like MML's own labels */
.parcel-id-label { transform:translate(-50%, -50%); white-space:nowrap; font:600 12px var(--mono); color:#111827; pointer-events:none; text-shadow:0 0 2px #fff, 0 0 2px #fff, 0 0 3px #fff, 0 0 4px #fff; width:auto !important; height:auto !important; background:none; border:0; }
.locate-dot { background:#2563EB; border:2px solid #fff; border-radius:50%; box-shadow:0 0 0 2px rgba(37,99,235,.35), var(--shadow-md); }
.locate-heading { background:none; border:none; }
.locate-arrow { width:64px; height:64px; opacity:0; transition:transform .2s linear, opacity .3s; filter:drop-shadow(0 1px 2px rgba(0,0,0,.35)); }
.locate-arrow svg { display:block; width:100%; height:100%; }
.layer-menu { position:absolute; top:46px; right:0; width:240px; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow-lg); padding:12px 14px; max-height:calc(100vh - 140px); overflow-y:auto; }
.layer-group { margin-bottom:10px; }
.layer-group-title { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.5px; color:var(--text-sec); margin-bottom:4px; }
.layer-group label { display:flex; align-items:center; gap:8px; font-size:13px; padding:3px 0; cursor:pointer; }
.layer-group label.needs-key.disabled { opacity:.45; }
.needs-key-hint { display:none; }
body.no-key .needs-key-hint { display:block; }

/* ── CHM (canopy height) ── */
/* Filter on each tile image (not the moving container) so the browser caches the filtered result per tile */
.chm-tiles img { filter: url(#chmRainbow); image-rendering: pixelated; }
body.chm-overzoom .chm-tiles img { image-rendering: auto; }
/* Map legends stack in the bottom-right corner (canopy height, METE habitat classes) */
.map-legends { position:absolute; right:12px; bottom:24px; z-index:1000; display:flex; flex-direction:column; gap:8px; pointer-events:none;
  max-height:calc(100% - 210px); }   /* stays below the layer button and the floating buttons on short windows */
.map-legends > * { pointer-events:auto; min-height:0; overflow-y:auto; }   /* a legend taller than its share scrolls */
.legend-rows.compact { gap:2px; font-size:11.5px; }
.legend-rows.compact i { width:14px; height:12px; }
.chm-legend { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow-md); padding:10px 12px; width:230px; }
.legend-rows { display:flex; flex-direction:column; gap:4px; margin:6px 0 8px; font-size:12px; color:var(--text); }
.legend-rows > div { display:flex; align-items:center; gap:8px; }
.legend-rows i { flex:none; width:16px; height:14px; border-radius:3px; border:1px solid rgba(0,0,0,.25); }
.info-table tr.stand-first td { border-top:2px solid var(--border); }
.swatch { display:inline-block; width:12px; height:12px; border-radius:3px; border:1px solid rgba(0,0,0,.25); margin-right:6px; vertical-align:-1px; }
.chm-loading { color:var(--warning); margin-top:4px; }
.chm-legend-title { font-size:11.5px; font-weight:700; text-transform:uppercase; letter-spacing:.4px; color:var(--text-sec); margin-bottom:6px; }
.chm-legend-bar { height:10px; border-radius:5px; background: linear-gradient(90deg, #5b2a9d 0%, #3030ff 5.5%, #0080ff 14%, #00e5ff 22%, #00ff40 30.5%, #a8ff00 42%, #ffff00 53%, #ff8c00 67%, #ff1a1a 83%, #ff00c8 100%); }
.chm-legend-ticks { display:flex; justify-content:space-between; font-size:10.5px; font-family:var(--mono); color:var(--text-sec); margin:3px 0 6px; }

/* ── Stand labels (vector outlines) ── */
.stand-label { background:rgba(255,255,255,.88); border:1px solid rgba(15,81,50,.55); border-radius:4px; box-shadow:0 1px 2px rgba(0,0,0,.25); color:#0f5132; font-family:var(--font); font-size:12.5px; font-weight:700; line-height:1; padding:2px 5px; pointer-events:none; }
.stand-label::before { display:none; }
.proposal-label { background:rgba(255,255,255,.9); border:1px solid rgba(17,24,39,.5); border-radius:4px; color:#111827; font-family:var(--mono); font-size:11.5px; font-weight:700; line-height:1; padding:2px 4px; width:auto !important; height:auto !important; white-space:nowrap; transform:translate(-50%, -50%); pointer-events:none; }
.proposal-label.urgent { color:#B91C1C; border-color:#B91C1C; }
.proposal-filters { display:flex; flex-wrap:wrap; gap:6px 12px; font-size:12.5px; margin-bottom:6px; align-items:center; }
.proposal-filters label { display:flex; align-items:center; gap:4px; }
.proposal-filters select { font:inherit; padding:2px 4px; border:1px solid var(--border); border-radius:6px; background:var(--surface); color:var(--text); }
/* Type chips of the Suositukset section: one per operation class in the selection, dimmed when hidden */
.proposal-types { display:flex; flex-wrap:wrap; gap:4px; margin:0 0 6px; }
.type-chip { display:inline-flex; align-items:center; gap:4px; font:inherit; font-size:11.5px; padding:2px 8px 2px 6px; border:1px solid var(--border); border-radius:12px; background:var(--surface); color:var(--text); cursor:pointer; }
.type-chip .swatch { margin:0; width:10px; height:10px; }
.type-chip .count { color:var(--text-sec); }
.type-chip.off { opacity:.45; text-decoration:line-through; }
.type-chip.all { border-color:var(--primary); color:var(--primary); }
.type-chip:hover { border-color:var(--primary); }
.proposal-list { max-height:45vh; overflow-y:auto; border:1px solid var(--border-light); border-radius:var(--radius); margin:6px 0; }
.prop-row { display:flex; align-items:center; gap:8px; padding:5px 8px; border-bottom:1px solid var(--border-light); cursor:pointer; font-size:12.5px; }
.prop-row:hover { background:var(--bg); }
.prop-row.active { background:var(--primary-light); }
.prop-row .swatch { flex:none; margin:0; }
.prop-row .prop-year { flex:none; font-family:var(--mono); font-weight:700; min-width:34px; }
.prop-row .prop-year.urgent { color:#B91C1C; }
.prop-row .prop-main { flex:1; min-width:0; line-height:1.3; }
.prop-row .prop-main small { display:block; color:var(--text-sec); }
.prop-row .prop-amount { flex:none; font-family:var(--mono); font-size:12px; white-space:nowrap; }
.prop-row .prop-info { flex:none; padding:0 4px; font-size:14px; line-height:1; }
.proposal-list > .btn { margin:8px; }

/* ── Leaflet overrides ── */
.leaflet-top.leaflet-left { left: auto; right: 60px; }
.leaflet-control-zoom { border:1px solid var(--border) !important; box-shadow:var(--shadow-md) !important; border-radius:var(--radius) !important; overflow:hidden; }
.leaflet-control-zoom a { color:var(--text) !important; }
.leaflet-draw { display:none; }
.leaflet-control-attribution { font-size:10px; }
.stand-popup { font-size:12.5px; min-width:220px; }
.stand-popup h4 { font-size:13px; margin-bottom:4px; }
.stand-popup table { border-collapse:collapse; width:100%; }
.stand-popup td { padding:2px 0; }
.stand-popup td:last-child { text-align:right; font-family:var(--mono); }
.stand-popup .btn { margin-top:8px; width:100%; justify-content:center; }
.marker-popup td:first-child { color:var(--text-sec); white-space:nowrap; padding-right:10px; vertical-align:top; }
.marker-popup td:last-child { font-family:inherit; text-align:left; }
body.tool-click .leaflet-container { cursor: crosshair; }
.topbar-actions .btn svg { flex:none; }

/* ── Toast & loading ── */
/* Both float over the map – they must not swallow map clicks underneath them */
.toast { position:fixed; bottom:20px; left:50%; transform:translateX(-50%); background:var(--text); color:#fff; padding:10px 16px; border-radius:var(--radius); font-size:13px; z-index:2100; box-shadow:var(--shadow-lg); max-width:90vw; pointer-events:none; }
.toast.error { background:var(--danger); }
.loading { position:fixed; top:calc(var(--topbar-h) + 12px); left:50%; transform:translateX(-50%); background:var(--surface); border:1px solid var(--border); border-radius:20px; padding:6px 14px 6px 10px; display:flex; align-items:center; gap:8px; font-size:12.5px; z-index:1200; box-shadow:var(--shadow-md); pointer-events:none; }
.spinner { width:14px; height:14px; border:2px solid var(--border); border-top-color:var(--primary); border-radius:50%; animation:spin .8s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }

/* ── Modal ── */
.modal-backdrop { position:fixed; inset:0; background:rgba(0,0,0,.4); z-index:2000; display:flex; align-items:center; justify-content:center; padding:16px; }
.modal { background:var(--surface); border-radius:var(--radius-lg); width:100%; max-width:760px; max-height:92vh; display:flex; flex-direction:column; box-shadow:var(--shadow-lg); }
.modal-head { display:flex; align-items:center; justify-content:space-between; padding:16px 20px; border-bottom:1px solid var(--border); }
.modal-head h2 { font-size:16px; }
.modal-body { padding:16px 20px; overflow-y:auto; }
.modal-body h3 { font-size:12.5px; text-transform:uppercase; letter-spacing:.5px; color:var(--text-sec); margin:18px 0 8px; }
.modal-body h3:first-of-type { margin-top:6px; }
.modal-foot { display:flex; justify-content:flex-end; gap:8px; padding:12px 20px; border-top:1px solid var(--border); }
/* ── "Kaikki tiedot" page ── */
.analysis { position:fixed; inset:0; z-index:1500; background:var(--bg); display:flex; flex-direction:column; overflow:hidden; }
.analysis-head { display:flex; align-items:center; gap:14px; padding:10px 20px; background:var(--surface); border-bottom:1px solid var(--border); flex:none; }
.analysis-title { flex:1; min-width:0; display:flex; flex-direction:column; }
.analysis-title h2 { font-size:16px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.analysis-actions { display:flex; gap:8px; }
.analysis-body { flex:1; overflow-y:auto; padding:20px; }
.an-summary { display:grid; grid-template-columns:minmax(260px, 1fr) minmax(300px, 1.4fr); gap:20px; align-items:start; margin-bottom:22px; }
.an-hero { background:var(--primary); color:#fff; border-radius:var(--radius-lg); padding:18px 20px; }
.an-hero .value-label { font-size:11px; text-transform:uppercase; letter-spacing:.5px; opacity:.85; }
.an-hero .value-main { font-family:var(--mono); font-size:32px; font-weight:700; line-height:1.2; margin:4px 0; }
.an-hero .value-range { font-family:var(--mono); font-size:12.5px; opacity:.9; }
.an-breakdown { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:6px 14px; margin:0; }
.an-h { font-size:12.5px; text-transform:uppercase; letter-spacing:.5px; color:var(--text-sec); margin:18px 0 8px; display:flex; flex-wrap:wrap; gap:4px 12px; align-items:baseline; }
.an-h .hint { text-transform:none; letter-spacing:0; font-weight:400; }
.an-table { width:100%; border-collapse:collapse; font-size:12.5px; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); }
.an-table th, .an-table td { padding:6px 8px; border-bottom:1px solid var(--border-light); text-align:left; vertical-align:middle; white-space:nowrap; }
.an-table th { font-size:11px; text-transform:uppercase; letter-spacing:.4px; color:var(--text-sec); background:var(--bg); }
.an-table th.n, .an-table td.n { text-align:right; font-family:var(--mono); }
.an-table td.n small { display:block; font-size:10.5px; color:var(--text-sec); font-family:var(--font); }
.an-table .stand-cell { white-space:normal; min-width:180px; }
.an-table .stand-cell small { display:block; color:var(--text-sec); font-size:11px; }
.an-table input, .an-table select { width:88px; padding:5px 7px; border:1px solid var(--border); border-radius:6px; font-family:var(--mono); font-size:12.5px; background:var(--surface); color:var(--text); }
.an-table select { font-family:var(--font); width:auto; max-width:130px; }
.an-table input:focus, .an-table select:focus { outline:none; border-color:var(--primary); }
.an-table input.ov, .an-table select.ov { border-color:var(--warning); background:var(--warning-light); font-weight:600; }
.an-table tr.row-ov td.val { color:var(--warning); font-weight:700; }
.an-table td.val { font-weight:600; }
.an-table .acts { display:flex; gap:6px; }
.an-table th small { text-transform:none; letter-spacing:0; font-weight:400; }
.an-table .price-cell { padding-top:4px; padding-bottom:4px; }
.price-grid { display:grid; grid-template-columns:auto 64px 64px; gap:3px 6px; align-items:center; }
.price-grid .pg-label { font-size:12px; color:var(--text-sec); white-space:nowrap; }
.price-grid .pg-label small { color:var(--text-muted); }
.an-table .price-grid input { width:64px; padding:3px 6px; }
.an-table .harvest-cell { white-space:nowrap; }
.an-table .harvest-cell select.hv { border-color:var(--accent); background:#EFF6FF; font-weight:600; }
.an-table .hv-pct { margin-left:6px; font-size:12px; color:var(--text-sec); }
.an-table .hv-pct input { width:56px; padding:3px 6px; }
.corr-edit { font-family:var(--mono); color:var(--text-sec); }
.corr-edit input { width:58px; padding:3px 6px; margin:0 2px; border:1px solid var(--border); border-radius:6px; font-family:var(--mono); font-size:12.5px; background:var(--surface); color:var(--text); }
.corr-edit input.ov { border-color:var(--warning); background:var(--warning-light); font-weight:600; }
.hv-notes .hint { margin:0; line-height:1.5; }
/* Forecast view */
.fc-kpis { grid-template-columns:repeat(3, 1fr); margin:0; }
.fc-kpis .kpi-val { font-size:13px; }
.fc-delta { font-family:var(--mono); font-size:11.5px; color:var(--text-sec); }
.fc-delta.up { color:var(--primary); }
.fc-delta.down { color:var(--danger); }
.an-table .fc-props { white-space:normal; font-size:11.5px; color:var(--text-sec); min-width:160px; }
.info-grid .wide { grid-column:1 / -1; }
.an-table tfoot td { font-weight:700; border-top:2px solid var(--text); border-bottom:none; background:var(--bg); }
.an-tools { margin:8px 0 4px; }
.deal { display:grid; grid-template-columns:minmax(240px, 1fr) minmax(300px, 1.4fr); gap:20px; align-items:start; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:16px; margin-bottom:24px; }
.deal-inputs { display:flex; flex-direction:column; gap:12px; }
.deal-inputs label { display:flex; flex-direction:column; gap:3px; font-size:12.5px; color:var(--text-sec); }
.deal-inputs label small { font-size:11px; color:var(--text-muted); }
.deal-inputs input { width:100%; padding:7px 10px; border:1px solid var(--border); border-radius:8px; font-family:var(--mono); font-size:13px; background:var(--surface); color:var(--text); }
.deal-inputs input:focus { outline:none; border-color:var(--primary); }
.deal-table { margin:0; }
.deal-table td.num.neg { color:var(--danger); }
@media (max-width: 760px) {
  .an-summary, .deal { grid-template-columns:1fr; }
  .analysis-body { padding:12px 16px; }
  .analysis-head { padding:8px 12px; gap:8px; }
  .analysis-title h2 { font-size:14px; }
}

/* Property list (Kiinteistö tool) */
.parcel-box { display:flex; flex-direction:column; gap:8px; margin:-4px 0 10px; }
.parcel-add { display:flex; gap:6px; }
.parcel-add input { flex:1; min-width:0; padding:7px 10px; border:1px solid var(--border); border-radius:8px; font-family:var(--mono); font-size:12.5px; background:var(--surface); color:var(--text); }
.parcel-add input:focus { outline:none; border-color:var(--primary); }
.parcel-chips { display:flex; flex-wrap:wrap; gap:6px; }
.parcel-chips:empty::before { content:'Ei kiinteistöjä listalla. Lisää tunnus tai klikkaa kiinteistöä kartalla.'; font-size:12px; color:var(--text-muted); }
.chip { display:inline-flex; align-items:center; gap:4px; font-family:var(--mono); font-size:12px; padding:3px 4px 3px 9px; border-radius:999px; background:var(--primary-light); border:1px solid #A7F3D0; color:var(--primary-hover); }
.chip[data-id] { cursor:pointer; }   /* tap → the property comes into view */
.chip.done { background:var(--bg); border-color:var(--border); color:var(--text-sec); }
.chip.failed { background:var(--danger-light); border-color:#FECACA; color:var(--danger); }
.chip button { border:none; background:none; cursor:pointer; color:inherit; font-size:14px; line-height:1; padding:0 4px; border-radius:999px; }
.chip button:hover { background:rgba(0,0,0,.08); }
.parcel-box .tool-row { margin-bottom:0; }
.hint.error { color:var(--danger); }
.hint.error:empty { display:none; }
#parcelError { margin:-2px 0 0; display:flex; flex-direction:column; gap:2px; }
.own-parcels { display:flex; flex-direction:column; gap:6px; padding-top:8px; border-top:1px dashed var(--border); }
/* Saved lists: own properties + named lists, one dropdown in the tool and one in the account dialog */
.list-row select, .list-head select { flex:1; min-width:0; padding:5px 8px; border:1px solid var(--border); border-radius:8px; font-family:var(--font); font-size:12.5px; background:var(--surface); color:var(--text); }
.list-row { flex-wrap:nowrap; }
.list-head { display:flex; gap:6px; align-items:center; flex-wrap:wrap; }
/* List dialog (save / new / rename) – replaces the browser's prompt() */
.list-form { display:flex; flex-direction:column; gap:10px; }
.list-form label { display:flex; flex-direction:column; gap:4px; font-size:12.5px; color:var(--text-sec); }
.list-form select { width:100%; padding:7px 10px; border:1px solid var(--border); border-radius:8px; font-family:var(--font); font-size:13px; background:var(--surface); color:var(--text); }
.list-form select:focus { outline:none; border-color:var(--primary); }
.modal .list-form input#listName { font-family:var(--font); }
.list-form .hint:empty { display:none; }
.list-form .hint.error { color:var(--danger); }
.list-form .code-value { font-family:var(--mono); font-size:16px; color:var(--text); letter-spacing:.15em; }
.modal .list-form input#codeInput { font-family:var(--mono); font-size:18px; letter-spacing:.3em; text-align:center; width:7em; align-self:flex-start; }
.own-label { font-size:11.5px; text-transform:uppercase; letter-spacing:.5px; color:var(--text-sec); }

/* Stand click mode (preview popup vs full details dialog) */
.click-mode { display:flex; flex-wrap:wrap; align-items:center; gap:6px 12px; font-size:12.5px; color:var(--text-sec); margin:-4px 0 10px; }
.click-mode label { display:flex; align-items:center; gap:5px; cursor:pointer; color:var(--text); }
/* "Näytä vain puustotiedot": hide every euro figure in the panel (summary card, valuation rows, property and stand values) */
.view-toggles { margin:0 0 10px; }
.view-toggles input { margin:0; }
body.no-stands #standsSection { display:none; }
body.no-euros .value-hero, body.no-euros #summary > .breakdown, body.no-euros .prop-breakdown th:last-child,
body.no-euros .prop-breakdown td:last-child, body.no-euros .stand-card .sc-val { display:none; }
/* Sign-in */
.modal-narrow { max-width:420px; }
/* Locked: the app is hidden until a signed-in, allow-listed user is present (see auth.js) */
body.locked .topbar, body.locked .workspace, body.locked #loginClose { visibility:hidden; }
body.locked #loginModal { background:var(--bg); }
.login-form { display:flex; flex-direction:column; gap:10px; }
.login-form .hint { margin:0; }
/* Password field with a show/hide button (the typed password is visible only while the button is pressed on) */
.pw-field { display:flex; gap:6px; align-items:stretch; }
.pw-field input { flex:1; min-width:0; }
.pw-toggle { flex:none; padding:0 8px; color:var(--text-sec); touch-action:none; -webkit-user-select:none; user-select:none; }
.pw-toggle svg { display:block; }
.pw-toggle[aria-pressed="true"] { border-color:var(--primary); color:var(--primary); background:var(--primary-light); }
.btn-block { width:100%; justify-content:center; }
.or { text-align:center; font-size:12px; color:var(--text-muted); text-transform:uppercase; letter-spacing:.5px; }
#btnLogin.signed-in { border-color:var(--primary); color:var(--primary); }
.preset-row { display:flex; align-items:center; gap:8px; font-size:13px; flex-wrap:wrap; margin-bottom:6px; }
.preset-row select { padding:5px 8px; border:1px solid var(--border); border-radius:8px; font-family:var(--font); font-size:13px; background:var(--surface); color:var(--text); }
.price-table { width:100%; border-collapse:collapse; font-size:13px; }
.price-table th { text-align:left; font-weight:600; font-size:12px; color:var(--text-sec); padding:4px 6px; }
.price-table td { padding:4px 6px; }
.price-table-3 th { text-align:center; white-space:nowrap; }
.price-table-3 td:first-child { white-space:nowrap; }
.price-table-3 input { min-width:58px; padding:6px 6px; }
.table-scroll { overflow-x:auto; }
.tag.access { background:#EFF6FF; border-color:#BFDBFE; color:#1D4ED8; }
.tag.winter { background:#F5F3FF; border-color:#DDD6FE; color:#6D28D9; }
.modal input[type=number], .modal input[type=text], .modal input[type=email], .modal input[type=password] { width:100%; padding:7px 10px; border:1px solid var(--border); border-radius:8px; font-family:var(--mono); font-size:13px; background:var(--surface); color:var(--text); }
.modal input:focus { outline:none; border-color:var(--primary); }
.modal textarea { width:100%; padding:7px 10px; border:1px solid var(--border); border-radius:8px; font-family:var(--mono); font-size:13px; background:var(--surface); color:var(--text); resize:vertical; }
.modal textarea:focus { outline:none; border-color:var(--primary); }
#loginSignedIn .tool-row { margin-bottom:0; }
.login-tabs { display:flex; gap:4px; border-bottom:1px solid var(--border); margin-bottom:10px; }
.login-tab { background:none; border:none; border-bottom:2px solid transparent; padding:8px 12px; font:inherit; font-size:13px; color:var(--text-sec); cursor:pointer; margin-bottom:-1px; }
.login-tab:hover { color:var(--text); }
.login-tab.active { color:var(--primary); border-bottom-color:var(--primary); font-weight:600; }
.login-pane { display:flex; flex-direction:column; gap:8px; }
.own-danger { margin-top:14px; padding-top:10px; border-top:1px solid var(--border-light); text-align:right; }
.own-section.no-top { border-top:none; padding-top:0; }
.profile-section { display:flex; flex-direction:column; gap:6px; padding-bottom:10px; }
.profile-section > label { font-size:12.5px; color:var(--text-sec); }
.profile-grid { display:grid; grid-template-columns:auto 1fr; gap:6px 14px; align-items:center; font-size:13px; }
.profile-grid > span { color:var(--text-sec); }
.profile-grid > b { font-weight:500; overflow-wrap:anywhere; }
.profile-grid > b small { color:var(--text-sec); font-weight:400; }
.modal .profile-grid input#userName { padding:5px 8px; font-family:var(--font); font-size:13px; }
.own-section { display:flex; flex-direction:column; gap:8px; padding-top:8px; border-top:1px solid var(--border); }
.pw-form { display:flex; flex-direction:column; gap:6px; }
.billing-box { display:flex; flex-direction:column; gap:6px; font-weight:400; }
.billing-box .tool-row { flex-wrap:wrap; }
.invoice-list { width:100%; border-collapse:collapse; font-size:12.5px; }
.invoice-list td, .invoice-list th { padding:4px 6px; border-bottom:1px solid var(--border); text-align:left; white-space:nowrap; }
.invoice-list td.num { text-align:right; font-family:var(--mono); }
.pw-form .btn { align-self:flex-start; }
.link-btn { background:none; border:none; padding:0; font:inherit; font-size:12.5px; color:var(--primary); cursor:pointer; text-decoration:underline; align-self:center; }
.link-btn:hover { color:var(--primary-hover, var(--primary)); }
.own-section > label { font-size:12.5px; color:var(--text-sec); }
.own-editor { display:flex; flex-direction:column; gap:8px; max-height:40vh; overflow-y:auto; }
.own-editor:empty::before { content:'Lista on tyhjä. Lisää tunnus alla.'; font-size:12px; color:var(--text-muted); }
.own-row { display:flex; flex-direction:column; gap:4px; padding:8px; border:1px solid var(--border); border-radius:8px; background:var(--bg); }
.own-row-head { display:flex; align-items:center; gap:6px; }
.own-stats { display:flex; flex-wrap:wrap; gap:4px 14px; font-size:12px; color:var(--text-sec); font-variant-numeric:tabular-nums; min-height:16px; }
.own-stats .own-eur { color:var(--text); font-weight:600; margin-left:auto; }
.own-stats-total { border-top:1px solid var(--border); padding-top:6px; margin-top:2px; }
body.no-euros .own-stats .own-eur { display:none; }
body:not(.locked) #loginModal .modal-narrow { max-width:640px; }
.own-row-head b { font-family:var(--mono); font-size:12.5px; white-space:nowrap; }
.own-row-head .own-name { flex:1; min-width:0; }
.modal .own-row-head input.own-name { padding:5px 8px; font-family:var(--font); font-size:13px; }
.modal .own-row textarea.own-note { font-family:var(--font); font-size:12.5px; padding:5px 8px; }
.check-row { display:flex; align-items:center; gap:8px; font-size:12.5px; color:var(--text); cursor:pointer; }
.check-row input { width:auto; margin:0; }
.device-list { display:flex; flex-direction:column; gap:6px; }
.device-row { display:flex; align-items:center; gap:8px; padding:6px 8px; border:1px solid var(--border); border-radius:8px; background:var(--bg); font-size:12.5px; }
.device-row .device-name { flex:1; min-width:0; display:flex; flex-direction:column; gap:1px; }
.device-row .device-name small { color:var(--text-sec); }
.device-row .device-this { font-size:11px; font-weight:600; color:var(--primary); background:var(--primary-light); border-radius:999px; padding:2px 8px; white-space:nowrap; }
.device-list:empty::before { content:"Ei laitteita."; font-size:12px; color:var(--text-sec); }
.own-add { display:flex; gap:6px; }
.own-add input { min-width:0; }
.own-add #ownAddId { flex:1.2; }
.own-add #ownAddName { flex:1; }
.grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:8px 12px; }
.grid-2 label, .modal-body > label { display:flex; flex-direction:column; gap:3px; font-size:12.5px; color:var(--text-sec); }

/* ── Työmaat ── */
#worksitePanel { display:none; }
body.worksite-mode #worksitePanel { display:block; }
/* Minimised worksite panel (phones: the sheet covered the map while drawing was not active): only the title bar stays,
   with the open worksite's name; tap the bar or the chevron to expand */
#wsMinimize .chev { display:inline-block; width:8px; height:8px; border-right:2px solid currentColor; border-bottom:2px solid currentColor; transform:rotate(45deg); margin:0 2px 3px; transition:transform .15s; }
.panel.ws-min #wsMinimize .chev { transform:rotate(-135deg); margin:3px 2px 0; }
#wsMinTitle { display:none; text-transform:none; letter-spacing:0; font-weight:600; color:var(--text); font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; }
.panel.ws-min #wsMinTitle { display:inline; }
.panel.ws-min #worksitePanel > :not(.panel-title) { display:none; }
.panel.ws-min #worksitePanel .panel-title { margin-bottom:0; cursor:pointer; }
body.worksite-mode .panel-section:not(#worksitePanel) { display:none; }
#btnWorksites.active { background:var(--primary-light); border-color:var(--primary); color:var(--primary-hover); }
.ws-list { display:flex; flex-direction:column; gap:8px; margin-bottom:10px; }
.ws-card { border:1px solid var(--border); border-radius:8px; padding:8px 10px; font-size:12.5px; cursor:pointer; transition:all .15s; }
.ws-card:hover { border-color:var(--primary); background:var(--primary-light); }
.ws-card-head { display:flex; justify-content:space-between; gap:8px; align-items:baseline; }
.ws-type { font-size:11px; color:var(--text-sec); text-transform:uppercase; letter-spacing:.4px; }
.ws-meta { font-size:12px; color:var(--text-sec); margin:2px 0 6px; }
.ws-bar { height:8px; border-radius:4px; background:var(--border-light); overflow:hidden; }
.ws-bar span { display:block; height:100%; background:#F59E0B; border-radius:4px; }
.ws-bar.big { height:12px; margin:6px 0; }
.ws-pct { font-size:12px; color:var(--text-sec); font-family:var(--mono); margin-top:3px; }
.ws-form, .ws-pending { display:flex; flex-direction:column; gap:8px; margin-top:10px; }
.ws-pending[hidden] { display:none; }
.ws-form label, .ws-pending label, .ws-target { display:flex; flex-direction:column; gap:3px; font-size:12.5px; color:var(--text-sec); }
.ws-form input, .ws-form select, .ws-pending input, .ws-target input { width:100%; padding:7px 10px; border:1px solid var(--border); border-radius:8px; font-family:var(--font); font-size:13px; background:var(--surface); color:var(--text); }
.ws-form input:focus, .ws-pending input:focus, .ws-target input:focus { outline:none; border-color:var(--primary); }
.ws-name { font-size:16px; margin:10px 0 2px; }
.ws-progress { margin:10px 0; }
.ws-big { font-size:22px; font-weight:700; font-family:var(--mono); }
.ws-big small { font-size:13px; font-weight:400; color:var(--text-sec); }
.ws-target { margin-bottom:10px; }
.ws-pending { border:1px solid #FDE68A; background:#FFFBEB; border-radius:8px; padding:10px 12px; margin-bottom:10px; }
#worksitePanel .sub-title { font-size:12.5px; text-transform:uppercase; letter-spacing:.5px; color:var(--text-sec); margin:12px 0 6px; }
.ws-entries { display:flex; flex-direction:column; gap:6px; }
.ws-entry { display:flex; justify-content:space-between; align-items:center; gap:8px; border:1px solid var(--border-light); border-radius:8px; padding:6px 10px; font-size:12.5px; }
.ws-entry-actions { display:flex; gap:4px; }
.ws-swatch { display:inline-block; width:12px; height:12px; border-radius:3px; margin-right:6px; vertical-align:-1px; border:1px solid rgba(0,0,0,.15); }

/* ── Stand info modal ── */
.modal-wide { max-width: 860px; }
.modal-head-actions { display:flex; gap:8px; align-items:center; flex-wrap:wrap; justify-content:flex-end; }
.modal-close .close-label { display:none; }
/* Phones: the dialog's action buttons wrap under the title and the close button is pinned to the top-right corner so
   it never sinks below the folded buttons (user 26.9.: "ikkunasta ei pääse pois") */
@media (max-width: 860px) {
  .modal-head { position:relative; flex-wrap:wrap; gap:8px; padding:12px 14px; padding-right:96px; }
  .modal-head h2 { font-size:15px; width:100%; }
  .modal-head-actions { width:100%; justify-content:flex-start; gap:6px; }
  .modal-head-actions .btn-sm { padding:5px 9px; font-size:12px; }
  .modal-close { position:absolute; top:10px; right:10px; padding:6px 10px; font-size:13px; font-weight:600; background:var(--primary); color:#fff; border-color:var(--primary); }
  .modal-close .close-label { display:inline; margin-right:4px; }
  /* iOS: 92vh counts the browser chrome, so the dialog overflowed the visible area and its top was unreachable.
     dvh follows the visible viewport; the dialog starts at the top and only its body scrolls (no sideways scroll). */
  .modal-backdrop { align-items:flex-start; padding:8px; }
  .modal { max-height:calc(100dvh - 16px); max-height:calc(100svh - 16px); }
  .modal-head { flex:none; }
  .modal-body { min-height:0; overflow-x:hidden; overflow-wrap:anywhere; }
  .modal-body .info-grid { grid-template-columns:1fr; }
  .modal-body .info-cols { display:block; }
  /* Tables: overflow-wrap:anywhere (above) let the layout break "Kehitysluokka" one letter per line to fit eight columns
     (user's iPhone screenshot 28.9.); words stay whole here and a table wider than the phone scrolls inside its
     .table-scroll wrapper (wrapModalTables in app.js adds the wrapper to every table of a modal body) */
  .modal-body table { overflow-wrap:normal; }
  .modal-body .table-scroll { overflow-x:auto; max-width:100%; -webkit-overflow-scrolling:touch; }
  .modal-foot-note { display:none; }        /* the source line moves into the scrolling body (.modal-note) */
  .modal-note { display:block; margin-top:16px; }
}
.modal-note { display:none; }
.info-grid { display:grid; grid-template-columns:1fr 1fr; gap:6px 24px; font-size:13px; }
.info-grid > div { display:flex; justify-content:space-between; gap:12px; padding:4px 0; border-bottom:1px solid var(--border-light); }
.info-grid span { color:var(--text-sec); }
.info-grid b { font-weight:500; text-align:right; }
.info-grid small { color:var(--text-sec); font-weight:400; }
.info-cols { display:grid; grid-template-columns:1fr 260px; gap:20px; align-items:start; margin-top:8px; }
.info-table { width:100%; border-collapse:collapse; font-size:12.5px; }
.info-table th { text-align:left; font-weight:600; font-size:11.5px; color:var(--text-sec); padding:5px 6px; border-bottom:1px solid var(--border); vertical-align:bottom; }
.info-table td { padding:4px 6px; border-bottom:1px solid var(--border-light); }
.info-table .num { text-align:right; font-family:var(--mono); white-space:nowrap; }
.info-table th.num { font-family:var(--font); }
.forecast-table { margin-top:4px; }
.prop-dists { grid-template-columns:1fr 1fr; margin-top:10px; }
.prop-dists h4 { font-size:11.5px; text-transform:uppercase; letter-spacing:.4px; color:var(--text-sec); margin:0 0 4px; font-weight:600; }
.info-grid.one { grid-template-columns:1fr; }
.prop-proposals table { width:100%; border-collapse:collapse; font-size:12.5px; margin-bottom:10px; }
.prop-proposals th { text-align:left; font-weight:600; font-size:11.5px; color:var(--text-sec); padding:5px 6px; border-bottom:1px solid var(--border); }
.prop-proposals td { padding:4px 6px; border-bottom:1px solid var(--border-light); vertical-align:top; }
.prop-proposals th.n, .prop-proposals td.n { text-align:right; font-family:var(--mono); white-space:nowrap; }
.prop-proposals tr.total td { font-weight:600; border-bottom:none; }
.info-table tr.total td { font-weight:600; }
body.no-euros .prop-eur, body.no-euros .prop-proposals .eur, body.no-euros .silv-costs { display:none; }
/* Editable €/ha rates under the proposal tables (Kiinteistön / Valinnan yhteenveto) */
.silv-costs { margin:6px 0 10px; }
.silv-costs h4 { font-size:11.5px; text-transform:uppercase; letter-spacing:.4px; color:var(--text-sec); margin:0 0 6px; font-weight:600; }
.silv-costs h4 small { text-transform:none; letter-spacing:0; font-weight:400; }
.silv-cost-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(230px, 1fr)); gap:6px 16px; }
.silv-cost-grid label { display:flex; align-items:center; justify-content:space-between; gap:8px; font-size:12.5px; }
.silv-cost-grid label span { color:var(--text); }
.modal .silv-cost-grid input { width:88px; padding:4px 8px; text-align:right; font-family:var(--mono); font-size:12.5px; }
.forecast-table td.pos { color:var(--primary-hover); }
.forecast-table td.neg { color:var(--danger); }
.species-table tbody tr:nth-child(odd) { background:var(--bg); }
.strata-details { margin-top:10px; font-size:12.5px; }
.strata-details summary { cursor:pointer; color:var(--text-sec); font-weight:600; }
.bar-chart { font-size:12.5px; color:var(--text); }
.bar-legend { display:flex; gap:6px; align-items:center; margin-bottom:8px; color:var(--text-sec); }
.bar-legend i, .sw-log, .sw-pulp { display:inline-block; width:18px; height:12px; border-radius:2px; }
.sw-log { background:#15803D; } .sw-pulp { background:#F59E0B; }
.bar-row { margin:6px 0 8px; }
.bar-head { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:2px; }
.bar-label { font-weight:500; }
.bar-val { font-family:var(--mono); font-size:12px; white-space:nowrap; }
.bar-track { display:flex; height:18px; border-radius:3px; overflow:hidden; border:1px solid var(--border);
  background:linear-gradient(to right, var(--border) 1px, transparent 1px) 0 0 / 25% 100% repeat-x, var(--bg); }
.bar-log { background:#15803D; } .bar-pulp { background:#F59E0B; }
.bar-axis { position:relative; height:16px; margin-top:2px; font-family:var(--mono); font-size:10.5px; color:var(--text-sec); }
.bar-axis span { position:absolute; top:0; transform:translateX(-50%); white-space:nowrap; }
.bar-axis span:first-child { transform:none; }
.bar-axis span:last-child { transform:translateX(-100%); }
.op-row { padding:6px 0; border-bottom:1px solid var(--border-light); font-size:13px; display:grid; grid-template-columns:1fr auto; gap:2px 12px; }
.op-row .op-when { font-family:var(--mono); color:var(--text-sec); white-space:nowrap; }
.op-row .hint { grid-column:1 / -1; }

/* ── Responsive ── */
@media (max-width: 860px) {
  /* Phones: brand + actions on the first row, the search box on its own full-width row below */
  .topbar { flex-wrap:wrap; gap:8px; padding:6px 10px; }
  .search-box { max-width:none; order:3; flex-basis:100%; }
  .search-box input::placeholder { font-size:12px; }
  .brand span:not(.badge) { display:none; }
  .topbar-actions .btn-label { display:none; }
  .panel { width:auto; left:8px; right:8px; top:auto; bottom:8px; max-height:55%; }
  .panel.collapsed { transform: translateY(calc(100% + 16px)); }
  .layer-box { top:8px; right:8px; }
  .map-fabs { top:56px; right:8px; }
  /* Full-screen map on a phone (panel hidden): the floating buttons and the measure strip move to the bottom edge,
     within thumb reach; the fullscreen (exit) button ends up lowest. Clears the attribution line and the home bar. */
  body.map-full .map-fabs { top:auto; bottom:calc(26px + env(safe-area-inset-bottom, 0px)); }
  body.map-full .measure-box { top:auto; bottom:calc(26px + env(safe-area-inset-bottom, 0px)); }
  /* Drawing on a phone: the panel sheet would cover the map, so it hides for the duration and the toolbar sits at the
     bottom edge instead; the floating buttons move down with it (they are not needed mid-draw, but stay reachable) */
  body.drawing .panel { display:none; }
  body.drawing .map-fabs { top:auto; bottom:calc(26px + env(safe-area-inset-bottom, 0px)); }
  .draw-bar { top:auto; bottom:calc(26px + env(safe-area-inset-bottom, 0px)); left:8px; right:56px; width:auto; padding:8px 10px; }
  .draw-bar .tool-row .btn { flex:1; }
  /* Phone: one compact strip – mode buttons, result and actions on a row, no title or hint */
  .measure-box { top:56px; right:56px; width:auto; left:8px; display:flex; flex-wrap:wrap; align-items:center; gap:6px; padding:6px 8px; }
  .measure-box .measure-head { margin:0; order:9; margin-left:auto; }
  .measure-box .measure-head b { display:none; }
  .measure-box .tool-row { margin:0; display:flex; gap:6px; }
  .measure-box #measureHint { display:none; }
  .measure-box .measure-result { margin:0; min-height:0; flex:1 1 100%; font-size:12px; }
  .measure-box .measure-result:empty { display:none; }
  .topbar-actions #btnTogglePanel { display:none; }   /* off-screen on phones – the map button replaces it */
  .map-legends { display:none; }
  .leaflet-top.leaflet-left { right:56px; }
  .grid-2 { grid-template-columns:1fr; }
  .info-grid, .info-cols { grid-template-columns:1fr; }
}

/* Collapsible panel sections and map legends (initCollapsibles app.js) – last in the file so the hide rule wins by order too: the heading toggles the rest of its container, chevron at the right */
[data-collapse] { cursor:pointer; user-select:none; }
[data-collapse]::after { content:""; flex:none; margin-left:auto; width:8px; height:8px; border-right:2px solid currentColor; border-bottom:2px solid currentColor; transform:rotate(45deg); opacity:.6; transition:transform .15s; }
.sub-title[data-collapse] { display:flex; align-items:center; gap:6px; }
.sec-collapsed > [data-collapse]::after { transform:rotate(-45deg); }
.sec-collapsed > [data-collapse] { margin-bottom:0; }
.sec-collapsed > :not([data-collapse]) { display:none !important; }
.chm-legend-title[data-collapse] { display:flex; align-items:center; gap:6px; }   /* map legends collapse the same way */
.sec-collapsed > .chm-legend-title { margin-bottom:0; }