/* A small brand row, one action row, then the comparison on phones.
   These rules are for phones only. Left unscoped they also ran on desktop,
   which is why the top of the page looked like a phone layout on a wide
   screen: a narrow stacked column of buttons hugging the left. */
@media screen and (max-width:700px){
  .hero .brandrow{display:grid;grid-template-columns:52px minmax(0,1fr);gap:10px 12px;align-items:center}
  .hero .logotile{padding:4px;border-radius:8px;box-shadow:none}
  .hero .logotile img{width:44px;height:auto}
  .hero .hero-copy{min-width:0}
  .hero .hero-actions{grid-column:1/-1;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;width:100%;max-width:540px}
  .hero .hero-actions>*,.hero .hero-actions button{min-width:0}
  .hero .hero-actions>button,.hero .hero-actions .sharewrap>button{width:100%;min-height:44px;padding:6px;line-height:1.2}
}
.swipe-comparison-hint{display:none}
.shared-figures-link{font-size:12px;font-weight:700}
@media screen and (max-width:700px){
  .wrap{padding:10px 8px 30px}
  header.hero{padding:12px;margin-bottom:10px}
  .hero .eyebrow{font-size:12px;margin:0 0 3px;letter-spacing:.02em}
  .hero h1{font-size:clamp(16px,4.6vw,24px);line-height:1.15}
  .hero .hero-actions{max-width:none;gap:4px}
  .hero .hero-actions button{font-size:11px;overflow-wrap:anywhere}
  .hero .hero-icon-btn{gap:3px}
  .hero .hero-icon-btn svg{width:13px;height:13px;flex-shrink:0}
  .hero .hero-actions .sharepop{left:0;right:auto;width:300px;max-width:calc(100vw - 44px)}
  .workspace-head{padding:12px 10px;gap:8px}
  .workspace-head .section-kicker,.workspace-head .view-switch-label,#viewDescription{display:none}
  .workspace-head h2{font-size:19px}
  .primary-view-tabs button{min-height:40px;padding:6px;font-size:12px}
  .workspace-head .workspace-tools{display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:center}
  .workspace-head .workspace-tools button{min-height:36px;padding:6px 10px}
  .swipe-comparison-hint{display:block;margin:0;padding:9px 10px;color:var(--ink-soft);text-align:center;font-size:12px}
  .view-hint{font-size:10px;padding:6px;gap:8px}
  .scroller{scroll-snap-type:x mandatory;scroll-padding-inline:0;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch}
  #tbl tbody{grid-template-columns:repeat(var(--property-count,3),minmax(0,clamp(250px,calc(100vw - 64px),420px)));gap:10px}
  #tbl tbody tr{scroll-snap-align:start;scroll-snap-stop:always;border:1px solid var(--line);border-radius:10px;padding:8px}
  #tbl tbody td{min-height:68px;padding:8px;font-size:15px}
  #tbl tbody td::before{font-size:11px}
  #tbl tbody td.propcell{min-height:132px}
  #tbl .cellinput{font-size:16px;padding:8px}
  #tbl .cellinput.name{font-size:15px}
}
@media screen and (max-width:360px){
  .hero .hero-actions>button,.hero .hero-actions .sharewrap>button{font-size:10px;line-height:1.05;padding:4px}
}


/* Dimau metric design v1 — owner reference, 20 September 2026.
   Presentation only: amounts, scales, data sources and semantic statuses remain intact.
   Scoped to measured results; no network, storage or third-party dependencies. */
@media screen {
:is(.journey-metric,.mlab-stat,.mlab-chart){
 --metric-accent:#58d9f5;--metric-glow:#174565;
 --ink:#f2f6ff;--ink-soft:#bdcce0;--muted:#afbed4;--line:#2b3b54;
 --text-primary:#f2f6ff;--text-secondary:#c8d5e8;--text-muted:#afbed4;
 --surface-1:#101929;--surface-2:#19253a;--line-soft:#27354b;
 --paper:#101929;--paper2:#172338;--ink2:#c8d5e8;--ink3:#afbed4;
 --card:#101929;--green-dd:#eff7ff;--green-l:#70d9ed;
 color:#f2f6ff;color-scheme:dark;min-width:0;
 background:radial-gradient(ellipse at 100% 0,var(--metric-glow),transparent 75%),linear-gradient(145deg,#111b2c,#0a101e);
 border:1px solid #2b3b54;border-top-color:#45627c;border-radius:18px;
 box-shadow:0 12px 32px -18px #02061799,inset 0 1px 0 #ffffff06;
}
:is(.journey-metric,.mlab-stat,.mlab-chart):nth-child(3n+2){--metric-accent:#bca2ff;--metric-glow:#302947}
:is(.journey-metric,.mlab-stat,.mlab-chart):nth-child(3n){--metric-accent:#66e3ca;--metric-glow:#143d3d}
:is(.journey-metric strong,.mlab-stat strong){color:#f2f6ff;font-variant-numeric:tabular-nums lining-nums;letter-spacing:-.025em;font-weight:750;overflow-wrap:anywhere;line-height:1.2}
:is(.journey-metric span,.mlab-stat span,.mlab-stat small){color:#afbed4;line-height:1.5;letter-spacing:.01em;text-transform:none}
:is(.journey-metric,.mlab-stat,.mlab-chart):focus-visible,:is(.journey-metric,.mlab-stat,.mlab-chart) :focus-visible{outline:3px solid #78e3ff;outline-offset:4px}

 .journey-metric,.mlab-stat{padding:16px 12px;border-top:2px solid var(--metric-accent)}
 .journey-metric strong,.mlab-stat strong{white-space:normal;font-size:clamp(20px,2.3vw,27px)}
 .journey-metric.highlight,.mlab-stat.lead{border-color:#4aa89b;background:linear-gradient(145deg,#173c39,#0a101e)}.journey-metric.highlight strong,.mlab-stat.lead strong{color:#7ce9c6}
 .mlab-stat.warn{border-color:#cea15a;background:linear-gradient(145deg,#3a3020,#0a101e)}.mlab-stat.warn strong{color:#ffd595}
 .mlab-legend{--mlab-base:#b6a0fa;--mlab-plan:#58d9f5}
 .mlab-chart{--mlab-grid:#2c3c55;--mlab-axis:#b9cbe1;--ink-soft:#b9cbe1;--teal:#58d9f5;--teal-ink:#58d9f5;--mlab-base:#b6a0fa;--mlab-plan:#58d9f5}
 .mlab-chart svg text{fill:#b9cbe1}

}
@media (prefers-reduced-motion:reduce){:is(.journey-metric,.mlab-stat,.mlab-chart),:is(.journey-metric,.mlab-stat,.mlab-chart) *{animation:none!important;transition:none!important;scroll-behavior:auto!important}}