/* =====================================================================
   Industry pages with live maps (mining, environmental, retail & CRE).
   Builds on pro-page.css (pp- components); sol- is the industry layout.
   ===================================================================== */

/* Hero: a live map behind the title */
.sol-hero { position: relative; overflow: hidden; min-height: 520px; display: flex; align-items: flex-end; background: #1d1912; color: #fff; font-family: var(--pp-font); }
/* two classes: MapLibre's .maplibregl-map sets position: relative, which would collapse the map to 0 height */
.sol-hero .sol-hero__map { position: absolute; inset: 0; z-index: 0; opacity: 0; transition: opacity 1.4s ease; }
.sol-hero.is-ready .sol-hero__map { opacity: 1; }
.sol-hero__shade { position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(10, 8, 6, 0.15) 0%, rgba(10, 8, 6, 0.1) 40%, rgba(10, 8, 6, 0.78) 100%); }
.sol-hero__inner { position: relative; z-index: 2; width: 100%; max-width: 1200px; margin: 0 auto; padding: 120px 24px 56px; }
.sol-hero__eyebrow { margin: 0 0 12px; font: 700 12px/1 var(--pp-font); letter-spacing: 0.14em; text-transform: uppercase; color: #ffcf4d; }
.sol-hero h1 { margin: 0 0 14px; max-width: 760px; font: 800 clamp(34px, 5vw, 60px)/1.05 var(--pp-font); letter-spacing: -0.02em; color: #fff; text-shadow: 0 2px 18px rgba(0, 0, 0, 0.45); }
.sol-hero p.sol-hero__lead { margin: 0 0 26px; max-width: 640px; font-size: clamp(16px, 1.7vw, 19px); line-height: 1.55; color: rgba(255, 255, 255, 0.9); text-shadow: 0 1px 10px rgba(0, 0, 0, 0.5); }
.sol-hero__buttons { display: flex; flex-wrap: wrap; gap: 12px; }
.sol-hero__credit { position: absolute; right: 12px; bottom: 8px; z-index: 2; margin: 0; font-size: 11px; color: rgba(255, 255, 255, 0.7); }

/* Intro: a lead paragraph and value chips */
.sol-intro { padding: 64px 0 40px; }
.sol-intro__grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 48px; align-items: start; }
.sol-values { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.sol-values li { display: grid; grid-template-columns: 38px 1fr; gap: 12px; align-items: start; padding: 14px 16px; border-radius: 14px; background: var(--pp-off); border: 1px solid var(--pp-border); }
.sol-values svg { width: 38px; height: 38px; padding: 8px; border-radius: 10px; background: #fff; color: var(--pp-blue); fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; box-shadow: 0 2px 8px rgba(7, 17, 46, 0.08); }
.sol-values b { display: block; color: var(--pp-text); font-size: 15px; margin-bottom: 2px; }
.sol-values span { color: var(--pp-sub); font-size: 14px; line-height: 1.5; }

/* The live operations block: map and a report-style panel */
.sol-ops { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 18px; align-items: stretch; }
.pp .sol-ops .pp-mapframe { height: auto; min-height: 600px; border-radius: 16px; box-shadow: var(--pp-shadow-dark); }
.sol-panel { display: flex; flex-direction: column; gap: 12px; padding: 16px; border-radius: 16px; background: #fff; color: var(--pp-text); box-shadow: var(--pp-shadow-dark); }
.sol-panel__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.sol-panel__title { margin: 0; font-size: 14px; font-weight: 700; }
.sol-live { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #c0392b; }
.sol-live::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #e74c3c; box-shadow: 0 0 0 0 rgba(231, 76, 60, 0.6); animation: sol-pulse 1.6s infinite; }
@keyframes sol-pulse { 0% { box-shadow: 0 0 0 0 rgba(231, 76, 60, 0.6); } 70% { box-shadow: 0 0 0 8px rgba(231, 76, 60, 0); } 100% { box-shadow: 0 0 0 0 rgba(231, 76, 60, 0); } }
@media (prefers-reduced-motion: reduce) { .sol-live::before { animation: none; } }
.sol-kpis { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.sol-kpi { padding: 10px 12px; border-radius: 10px; background: var(--pp-off); border: 1px solid var(--pp-border); }
.sol-kpi--wide { grid-column: 1 / -1; }
.sol-kpi__label { display: block; font-size: 11px; color: var(--pp-sub); text-transform: uppercase; letter-spacing: 0.05em; }
.sol-kpi__value { display: block; margin-top: 3px; font-size: 22px; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--pp-text); }
.sol-states { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.sol-states li { display: flex; justify-content: space-between; align-items: center; font-size: 13px; padding: 5px 8px; border-radius: 8px; background: var(--pp-off); }
.sol-states b { font-variant-numeric: tabular-nums; }
.sol-states i { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 8px; }
.sol-panel h4 { margin: 4px 0 0; font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--pp-sub); }
.sol-alerts { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; max-height: 150px; overflow: auto; }
.sol-alerts button { width: 100%; text-align: left; padding: 7px 9px; border: 1px solid #f5c6c0; border-radius: 8px; background: #fff4f2; color: #7c1d12; font: 12px/1.35 var(--pp-font); cursor: pointer; }
.sol-alerts button:hover { border-color: #e74c3c; }
.sol-alerts b { margin-right: 4px; }
.sol-alerts .is-empty { font-size: 12px; color: var(--pp-sub); padding: 4px 2px; }
.sol-action { margin-top: auto; padding: 10px 12px; border: 0; border-radius: 10px; background: #c0392b; color: #fff; font: 700 13px/1.2 var(--pp-font); cursor: pointer; }
.sol-action[aria-pressed="true"] { background: #2d3436; }
.sol-held { margin: 0; font-size: 12px; font-weight: 600; color: #c0392b; }
.sol-caption { margin: 16px 0 0; font-size: 13px; line-height: 1.55; color: rgba(255, 255, 255, 0.72); }
.pp-band:not(.pp-band--dark) .sol-caption { color: var(--pp-sub); }

/* How it works: three steps */
.sol-flow { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; counter-reset: sol; }
.sol-flow li { position: relative; padding: 22px 20px 20px; border-radius: 16px; background: #fff; border: 1px solid var(--pp-border); box-shadow: 0 6px 20px rgba(7, 17, 46, 0.06); }
.sol-flow li::before { counter-increment: sol; content: counter(sol); position: absolute; top: -14px; left: 20px; width: 28px; height: 28px; border-radius: 50%; background: var(--pp-blue); color: #fff; font: 800 14px/28px var(--pp-font); text-align: center; }
.sol-flow h3 { margin: 4px 0 6px; font-size: 17px; color: var(--pp-text); }
.sol-flow p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--pp-sub); }
.sol-flow small { display: block; margin-top: 10px; font-size: 12px; color: var(--pp-blue); font-weight: 600; }

@media (max-width: 1000px) {
  .sol-intro__grid, .sol-ops { grid-template-columns: 1fr; }
  .sol-flow { grid-template-columns: 1fr; gap: 24px; }
  .pp .sol-ops .pp-mapframe { height: 460px; min-height: 0; }
}
@media (max-width: 640px) {
  .sol-hero { min-height: 460px; }
  .sol-hero__inner { padding: 90px 16px 36px; }
  .pp .sol-ops .pp-mapframe { height: 380px; min-height: 0; }
}

/* Environmental: warnings list, gauge detail and its hydrograph */
.sol-warnings { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; max-height: 170px; overflow: auto; }
.sol-warnings button { width: 100%; display: flex; gap: 8px; align-items: baseline; text-align: left; padding: 7px 9px; border: 1px solid var(--pp-border); border-radius: 8px; background: #fff; color: var(--pp-text); font: 12px/1.35 var(--pp-font); cursor: pointer; }
.sol-warnings button:hover { border-color: var(--pp-blue); }
.sol-warnings b { flex: none; white-space: nowrap; }
.sol-warnings i { flex: none; width: 9px; height: 9px; border-radius: 2px; transform: translateY(1px); }
.sol-warnings .is-empty { font-size: 12px; color: var(--pp-sub); padding: 4px 2px; }
.sol-layers { display: grid; gap: 6px; }
.sol-layers label { display: flex; align-items: center; gap: 8px; font-size: 13px; cursor: pointer; }
.sol-layers input { accent-color: var(--pp-blue); width: 15px; height: 15px; }
.sol-layers input:disabled + span { opacity: 0.45; }
.sol-gauge { padding: 10px 12px; border-radius: 10px; background: var(--pp-off); border: 1px solid var(--pp-border); }
.sol-gauge h4 { margin: 0; font-size: 14px; text-transform: none; letter-spacing: 0; color: var(--pp-text); }
.sol-gauge__river { margin: 1px 0 6px; font-size: 12px; color: var(--pp-sub); }
.sol-gauge__now { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 4px; }
.sol-gauge__now b { font-size: 20px; font-variant-numeric: tabular-nums; }
.sol-gauge__now span { font-size: 11px; color: var(--pp-sub); }
.sol-hydro { display: block; width: 100%; height: auto; }
.sol-hydro__band { fill: rgba(46, 196, 182, 0.18); }
.sol-hydro__line { fill: none; stroke: #0c62a6; stroke-width: 2; stroke-linejoin: round; }
.sol-hydro__dot { fill: #ff9f1c; stroke: #fff; stroke-width: 1.5; }
.sol-hydro__axis { display: flex; justify-content: space-between; font-size: 10px; color: var(--pp-sub); }
.sol-note { margin: 4px 0 0; font-size: 11px; color: var(--pp-sub); }
.sol-hero__chip { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 16px; padding: 6px 12px; border-radius: 999px; background: rgba(0, 0, 0, 0.45); backdrop-filter: blur(6px); font-size: 13px; font-weight: 600; }

/* Glass cards without an image (environmental warnings and gauges) */
.pp-lcard--noimg .pp-lcard__box { width: 236px; }
.pp-lcard--noimg .pp-lcard__body { display: block; -webkit-line-clamp: unset; }

/* Retail: the site scorecard */
.sol-site { margin: 0; font-size: 15px; font-weight: 700; color: var(--pp-text); }
.sol-status { margin: -4px 0 0; font-size: 12px; color: var(--pp-sub); min-height: 16px; }
.sol-score { padding: 10px 12px; border-radius: 10px; background: #f5f3ff; border: 1px solid #ddd6fe; }
.sol-score__row { display: flex; align-items: baseline; justify-content: space-between; }
.sol-score__row b { font-size: 26px; font-weight: 800; color: #5b21b6; font-variant-numeric: tabular-nums; }
.sol-score__track { height: 6px; margin-top: 6px; border-radius: 3px; background: #ede9fe; overflow: hidden; }
.sol-score__track span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #8b5cf6, #5b21b6); transition: width 0.6s ease; }
.sol-bands { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.sol-bands div { padding: 7px 8px; border-radius: 8px; background: var(--pp-off); border: 1px solid var(--pp-border); }
.sol-bands span { display: block; font-size: 10px; color: var(--pp-sub); text-transform: uppercase; letter-spacing: 0.04em; }
.sol-bands b { font-size: 14px; font-variant-numeric: tabular-nums; }
.sol-bands i { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 4px; }
.sol-presets { display: flex; flex-wrap: wrap; gap: 6px; }
.sol-presets button { padding: 6px 10px; border-radius: 999px; border: 1px solid #ddd6fe; background: #fff; color: #5b21b6; font: 600 12px/1.2 var(--pp-font); cursor: pointer; }
.sol-presets button:hover { background: #f5f3ff; }
.sol-legend { display: flex; flex-wrap: wrap; gap: 10px; font-size: 12px; color: var(--pp-sub); }
.sol-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 5px; vertical-align: -1px; }

/* Retail: fictional logos, competitors by brand, the catchment profile and the demographic switch */
.sol-logo { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 18px; height: 18px; margin-right: 6px; border-radius: 5px; border: 1.5px solid #fff; box-shadow: 0 0 0 1px rgba(15, 26, 56, 0.18); font: 800 10px/1 "Segoe UI", Arial, sans-serif; color: #fff; vertical-align: -4px; }
.sol-brands { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 4px 12px; }
.sol-brands:empty { display: none; }
.sol-brands li { display: flex; align-items: center; font-size: 12px; }
.sol-brands li > span:not(.sol-logo) { flex: 1; }
.sol-brands b { font-variant-numeric: tabular-nums; }
.sol-h4note { text-transform: none; letter-spacing: 0; font-weight: 400; }
.sol-profile { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; }
.sol-profile li { display: grid; grid-template-columns: 1fr auto; column-gap: 8px; font-size: 12px; align-items: center; }
.sol-profile b { font-variant-numeric: tabular-nums; }
.sol-profile__hh b { font-size: 13px; }
.sol-profile__bar { grid-column: 1 / -1; position: relative; height: 5px; border-radius: 3px; background: #ede9fe; }
.sol-profile__bar > i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 3px; background: #7c3aed; }
.sol-profile__bar > em { position: absolute; top: -3px; width: 2px; height: 11px; margin-left: -1px; background: #0f1a38; }
.sol-demo-switch { display: flex; flex-wrap: wrap; gap: 6px; }
.sol-demo-switch button { padding: 6px 10px; border-radius: 999px; border: 1px solid var(--pp-border); background: #fff; color: var(--pp-text); font: 600 12px/1.2 var(--pp-font); cursor: pointer; }
.sol-demo-switch button[aria-checked="true"] { background: #5b21b6; border-color: #5b21b6; color: #fff; }

/* Aviation: the replay bar, movements timeline, fleet mix, movement log and the followed aircraft's card */
.sol-hero--aviation { background: #0b1220; }
.avi-ops .pp-mapframe { position: relative; }
.avi-playbar { position: absolute; left: 12px; right: 12px; top: 12px; z-index: 3; display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 12px; background: rgba(11, 18, 32, 0.78); backdrop-filter: blur(8px); color: #fff; font: 600 12px/1 var(--pp-font); }
.avi-playbar input[type="range"] { flex: 1; min-width: 60px; accent-color: #38bdf8; }
.avi-play { min-width: 62px; padding: 6px 10px; border: 0; border-radius: 8px; background: #38bdf8; color: #0b1220; font: 700 12px/1 var(--pp-font); cursor: pointer; }
.avi-rates { display: flex; gap: 2px; }
.avi-rates button { padding: 5px 7px; border: 0; border-radius: 6px; background: transparent; color: rgba(255, 255, 255, 0.75); font: 700 11px/1 var(--pp-font); cursor: pointer; }
.avi-rates button[aria-pressed="true"] { background: rgba(255, 255, 255, 0.16); color: #fff; }
.avi-clock { font: 800 16px/1 var(--pp-font); font-variant-numeric: tabular-nums; color: var(--pp-text); }
.avi-timeline { height: 64px; border-radius: 8px; background: #0f172a; cursor: pointer; overflow: hidden; }
.avi-timeline svg { display: block; width: 100%; height: 100%; }
.avi-dot { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin: 0 4px 0 2px; vertical-align: 0; }
.sol-kpi__value.avi-small { font-size: 15px; }
.avi-mix { display: flex; height: 10px; border-radius: 5px; overflow: hidden; background: var(--pp-off); }
.avi-mix span { display: block; width: 0; transition: width 0.4s ease; }
.avi-mixkey { display: flex; flex-wrap: wrap; gap: 4px 10px; }
.avi-log { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.avi-log button { width: 100%; display: flex; align-items: center; gap: 6px; text-align: left; padding: 6px 8px; border: 1px solid var(--pp-border); border-radius: 8px; background: #fff; color: var(--pp-text); font: 12px/1.3 var(--pp-font); cursor: pointer; }
.avi-log button:hover { border-color: var(--pp-blue); }
.avi-log time { font-variant-numeric: tabular-nums; color: var(--pp-sub); }
.avi-log i { flex: none; width: 8px; height: 8px; border-radius: 50%; }
.avi-log small { margin-left: auto; color: var(--pp-sub); }
.avi-log .is-empty { font-size: 12px; color: var(--pp-sub); padding: 4px 2px; }
.avi-card { position: absolute; left: 0; top: 0; z-index: 3; pointer-events: none; }
.avi-card:empty { display: none; }
.avi-card { display: grid; gap: 1px; width: max-content; margin: 0; padding: 8px 11px; border-radius: 10px; background: rgba(11, 18, 32, 0.72); backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.18); color: #fff; font: 12px/1.35 var(--pp-font); translate: -50% calc(-100% - 14px); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35); }
.avi-card b { font-size: 14px; }
.avi-card span { color: rgba(255, 255, 255, 0.82); }
@media (max-width: 640px) { .avi-playbar { gap: 6px; padding: 6px 8px; } .avi-rates button:first-child { display: none; } }
.avi-playbar--rates { right: auto; padding: 5px 6px; }

/* The hero's hidden full screen button (for presenting), and the hero in full screen: just the live map */
.sol-hero__full { position: absolute; z-index: 4; top: 10px; right: 10px; width: 34px; height: 34px; padding: 7px; border: 0; border-radius: 8px; background: rgba(0, 0, 0, 0.45); color: #fff; opacity: 0; cursor: pointer; transition: opacity 0.25s; }
.sol-hero__full:hover, .sol-hero__full:focus-visible { opacity: 0.9; }
.sol-hero__full svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sol-hero:fullscreen { min-height: 100vh; }
.sol-hero:fullscreen .sol-hero__inner, .sol-hero:fullscreen .sol-hero__shade { display: none; }
.sol-hero:not(.is-full) .maplibregl-canvas-container.maplibregl-interactive { cursor: default; }

/* Construction: the viaduct twin's programme bar, progress curve and monitors (the replay bar, clock, log and cards
   reuse the aviation styles above) */
.sol-hero--construction { background: #3a4330; }
.via-ops .pp-mapframe { position: relative; }
.via-playbar { flex-wrap: wrap; }
.via-date { min-width: 92px; font-variant-numeric: tabular-nums; }
.via-lapse { padding: 6px 10px; border: 1px solid rgba(255, 255, 255, 0.35); border-radius: 8px; background: transparent; color: #fff; font: 700 12px/1 var(--pp-font); cursor: pointer; }
.via-lapse[aria-pressed="true"] { background: #fbbf24; border-color: #fbbf24; color: #0b1220; }
.via-curve { height: 70px; }
.avi-dot.via-dash { background: repeating-linear-gradient(90deg, #64748b 0 3px, transparent 3px 5px); }
.via-mons { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; }
.via-mons li { display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; align-items: center; font-size: 12px; padding: 5px 8px; border-radius: 8px; background: var(--pp-off); }
.via-mons b { font-variant-numeric: tabular-nums; }
.via-mons i { grid-column: 1 / -1; display: block; height: 4px; border-radius: 2px; background: #e2e8f0; overflow: hidden; }
.via-mons em { display: block; height: 100%; background: #22c55e; transition: width 0.3s ease; }
.via-mons li.is-over { background: #fff4f2; color: #7c1d12; }
.via-mons li.is-over em { background: #ef4444; }
.via-fig { margin: 0; border-radius: 14px; overflow: hidden; border: 1px solid var(--pp-border); background: #1b2129; }
.via-fig img { display: block; width: 100%; height: auto; }
.via-fig figcaption { padding: 12px 18px 14px; font-size: 14px; color: var(--pp-sub); background: #fff; }
.via-fig figcaption b { color: var(--pp-text); }
@media (max-width: 640px) { .via-playbar input[type="range"] { order: 9; flex-basis: 100%; } }
.via-ops { align-items: start; }
.pp .via-ops .pp-mapframe { min-height: 0; height: clamp(420px, 56vh, 600px); }
.via-panel { max-height: clamp(420px, 56vh, 600px); overflow-y: auto; scrollbar-width: thin; }
.via-panel > * { flex-shrink: 0; }
@media (max-width: 1000px) { .pp .via-ops .pp-mapframe { height: 520px; } .via-panel { max-height: none; } }
@media (max-width: 640px) { .pp .via-ops .pp-mapframe { height: 440px; } }

/* Construction: the lean board under the map: the takt plan by location and the Last Planner week */
.via-lean { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 18px; margin-top: 18px; }
.via-lean__main, .via-lps { padding: 14px 16px; border-radius: 16px; background: #fff; color: var(--pp-text); box-shadow: var(--pp-shadow-dark); }
.via-lean__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin-bottom: 8px; }
.via-lean__head h3 { margin: 0; font-size: 14px; }
.via-stages { display: flex; flex-wrap: wrap; gap: 4px; }
.via-stages button { padding: 5px 10px; border: 1px solid var(--pp-border); border-radius: 999px; background: #fff; color: var(--pp-text); font: 600 12px/1 var(--pp-font); cursor: pointer; }
.via-stages button[aria-pressed="true"] { background: var(--pp-text); border-color: var(--pp-text); color: #fff; }
.via-flow { cursor: crosshair; }
.via-flow svg { display: block; }
.via-flow__band { fill: transparent; }
.via-flow__row:nth-child(even) .via-flow__band { fill: #f8fafc; }
.via-flow__row.is-hl .via-flow__band { fill: #fef3c7; }
.via-flow__label { font: 600 10.5px var(--pp-font); fill: #475569; }
.via-flow__row.is-hl .via-flow__label { fill: #0f172a; }
.via-flow__grid { stroke: #e2e8f0; stroke-width: 1; }
.via-flow__today { stroke: #ef4444; stroke-width: 1.6; }
.via-flowtip { min-height: 18px; margin: 4px 0 6px; font-size: 12px; color: var(--pp-sub); }
.via-trades { font-size: 11px; }
.via-lps { display: flex; flex-direction: column; gap: 8px; }
.via-lps__week { margin: -4px 0 0; font-size: 12px; color: var(--pp-sub); }
.via-ppc { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 10px; border-radius: 10px; background: var(--pp-off); border: 1px solid var(--pp-border); }
.via-ppc b { display: block; font-size: 22px; font-weight: 800; font-variant-numeric: tabular-nums; }
.via-ppc span { font-size: 11px; color: var(--pp-sub); text-transform: uppercase; letter-spacing: 0.05em; }
.via-ppc svg { width: 120px; height: 32px; }
.via-commits { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.via-commits button { width: 100%; display: grid; grid-template-columns: 8px 1fr auto; align-items: center; gap: 8px; text-align: left; padding: 6px 8px; border: 1px solid var(--pp-border); border-radius: 8px; background: #fff; color: var(--pp-text); font: 12px/1.3 var(--pp-font); cursor: pointer; }
.via-commits button:hover { border-color: var(--pp-blue); }
.via-commits i { width: 8px; height: 8px; border-radius: 2px; }
.via-commits small { display: block; color: #b45309; }
.via-commits b { font-size: 11px; color: var(--pp-sub); }
.via-commits .is-done b { color: #16a34a; }
.via-commits .is-doing b { color: #0284c7; }
.via-commits .is-missed b { color: #dc2626; }
.via-commits .is-empty { font-size: 12px; color: var(--pp-sub); }
.via-cons { margin: 0; font-size: 12px; line-height: 1.45; color: var(--pp-sub); }
@media (max-width: 1000px) { .via-lean { grid-template-columns: 1fr; } }

/* Construction: the portfolio report (the Pro page's report layout, with donut cluster markers) */
.pf-marker { display: block; padding: 0; border: 0; background: none; cursor: pointer; filter: drop-shadow(0 2px 4px rgba(15, 23, 42, 0.35)); }
.pf-marker svg { display: block; }
.pf-marker:hover { filter: drop-shadow(0 3px 8px rgba(15, 23, 42, 0.5)); }
.pf-legend { position: absolute; left: 10px; bottom: 10px; z-index: 2; display: flex; flex-wrap: wrap; gap: 4px 10px; max-width: calc(100% - 70px); padding: 6px 10px; border-radius: 8px; background: rgba(255, 255, 255, 0.92); font-size: 11.5px; color: var(--pp-sub); }
.pf-legend i { display: inline-block; width: 9px; height: 9px; margin-right: 4px; border-radius: 50%; }
.pf-legend__ring { color: var(--pp-muted); }
.pf-watch__title { margin-top: 14px !important; }
.pf-watch { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.pf-watch button { width: 100%; display: grid; grid-template-columns: 8px 1fr auto; gap: 8px; align-items: center; padding: 5px 7px; border: 1px solid var(--pp-border); border-radius: 7px; background: #fff; text-align: left; font: 11.5px/1.3 var(--pp-font); color: var(--pp-text); cursor: pointer; }
.pf-watch button:hover { border-color: var(--pp-blue); }
.pf-watch i { width: 8px; height: 8px; border-radius: 50%; }
.pf-watch b { font-weight: 600; color: var(--pp-sub); white-space: nowrap; }
.pf-watch .is-empty { font-size: 12px; color: var(--pp-sub); }
.pf-bar { position: relative; height: 6px; margin-top: 8px; border-radius: 3px; background: #e2e8f0; overflow: hidden; }
.pf-bar i, .pf-bar b { position: absolute; left: 0; top: 0; bottom: 0; }
.pf-bar i { background: #94a3b8; opacity: 0.45; }

/* Construction: snagging (the map with its floor switcher, and the panel) */
.sn-ops .pp-mapframe { position: relative; }
.pp .sn-ops .pp-mapframe { min-height: 0; height: clamp(440px, 60vh, 620px); }
.sn-panel { max-height: clamp(440px, 60vh, 620px); overflow-y: auto; scrollbar-width: thin; }
.sn-panel > * { flex-shrink: 0; }
.sn-floors { position: absolute; left: 10px; top: 10px; z-index: 2; display: flex; gap: 2px; padding: 3px; border-radius: 10px; background: rgba(255, 255, 255, 0.94); box-shadow: 0 2px 8px rgba(15, 23, 42, 0.18); }
.sn-floors button { padding: 6px 10px; border: 0; border-radius: 8px; background: transparent; color: var(--pp-sub); font: 600 12px/1 var(--pp-font); cursor: pointer; }
.sn-floors button[aria-pressed="true"] { background: var(--pp-text); color: #fff; }
.sn-ring { display: inline-block; width: 9px; height: 9px; margin-right: 4px; border-radius: 50%; border: 2.5px solid #0f172a; background: #fff; vertical-align: -1px; }
.sn-red { color: #dc2626; }
.sn-burn { display: block; width: 100%; height: 90px; border-radius: 8px; background: var(--pp-off); }
.sn-forecast { margin: -4px 0 0; }
.sn-prio { display: flex; gap: 4px; }
.sn-prio button { padding: 5px 10px; border: 1px solid var(--pp-border); border-radius: 999px; background: #fff; font: 600 12px/1 var(--pp-font); color: var(--pp-text); cursor: pointer; }
.sn-prio button[aria-pressed="true"] { background: var(--pp-text); border-color: var(--pp-text); color: #fff; }
.sn-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.sn-list button { width: 100%; display: grid; grid-template-columns: 8px 1fr auto; gap: 8px; align-items: center; padding: 6px 8px; border: 1px solid var(--pp-border); border-radius: 8px; background: #fff; text-align: left; font: 12px/1.3 var(--pp-font); color: var(--pp-text); cursor: pointer; }
.sn-list button:hover { border-color: var(--pp-blue); }
.sn-list i { width: 8px; height: 8px; border-radius: 50%; }
.sn-list small { display: block; color: var(--pp-sub); }
.sn-list b { font-size: 11px; color: var(--pp-sub); white-space: nowrap; }
.sn-list b.is-over { color: #dc2626; }
.sn-list .is-empty { font-size: 12px; color: var(--pp-sub); }
@media (max-width: 1000px) { .pp .sn-ops .pp-mapframe { height: 480px; } .sn-panel { max-height: none; } }

/* Construction: the development twin (map modes, the scheme and sun controls, the constraint checks) */
.dev-ops .pp-mapframe { position: relative; }
.pp .dev-ops .pp-mapframe { min-height: 0; height: clamp(460px, 62vh, 640px); }
.dev-panel { max-height: clamp(460px, 62vh, 640px); overflow-y: auto; scrollbar-width: thin; }
.dev-panel > * { flex-shrink: 0; }
.dev-legend { top: 52px; bottom: auto; max-width: calc(100% - 70px); }
.dev-range { width: 100%; accent-color: #0f766e; }
.dev-time { display: grid; grid-template-columns: auto auto 1fr; align-items: center; gap: 8px; }
.dev-time b { font-variant-numeric: tabular-nums; font-size: 14px; }
.dev-sun { margin: -4px 0 0; }
.dev-sun b { color: #c2410c; font-weight: 600; }
.dev-checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; }
.dev-checks li { display: grid; grid-template-columns: 10px 1fr; gap: 8px; align-items: start; padding: 7px 9px; border-radius: 8px; background: var(--pp-off); font-size: 12px; line-height: 1.4; }
.dev-checks i { width: 10px; height: 10px; margin-top: 3px; border-radius: 50%; }
.dev-checks .is-red i { background: #dc2626; }
.dev-checks .is-amber i { background: #f59e0b; }
.dev-checks .is-green i { background: #16a34a; }
@media (max-width: 1000px) { .pp .dev-ops .pp-mapframe { height: 500px; } .dev-panel { max-height: none; } }
.pp-cta .sol-ga { margin-top: 18px; font-size: 14px; }