/* Suomen tieinfo 3.0.38 — yhteinen väri, tunnus ja työpöytäasettelu kaikille karttanäkymille. */
:root {
  --bg: #edf3f6;
  --surface: rgba(251, 253, 254, .97);
  --surface-solid: #ffffff;
  --surface-soft: #f1f6f9;
  --text: #173247;
  --ink: #173247;
  --muted: #61788a;
  --line: #d2dee6;
  --accent: #247b96;
  --accent-strong: #185f78;
  --accent-soft: #e3f1f6;
  --navy: #173f5f;
  --paper: #ffffff;
}

html[data-theme="dark"] {
  --bg: #182735;
  --surface: rgba(32, 52, 70, .98);
  --surface-solid: #22384a;
  --surface-soft: #2a4053;
  --text: #eef5f8;
  --ink: #eef5f8;
  --muted: #b4c5d1;
  --line: #496174;
  --accent: #67bdd0;
  --accent-strong: #91d4e1;
  --accent-soft: #294b59;
  --navy: #b9e0f0;
  --paper: #22384a;
}

body,
.traffic-shell,
.quality-shell { background: var(--bg) !important; color: var(--text) !important; }

.traffic-sidebar,
.quality-sidebar,
.drawer,
.info-panel,
.legend-info-panel { background: var(--surface-solid) !important; color: var(--text) !important; }

.shared-page-brand { display: flex !important; min-width: 0; align-items: center !important; gap: 11px !important; }
.traffic-heading.shared-page-brand > .brand-mark,
.quality-brand.shared-page-brand > .brand-mark {
  display: grid !important;
  width: 38px !important;
  height: 38px !important;
  flex: 0 0 38px !important;
  place-items: center !important;
  border-radius: 12px !important;
  background: linear-gradient(145deg, #102a43, #147d92) !important;
  box-shadow: 0 7px 16px rgba(20,125,146,.26) !important;
  color: #fff !important;
  font-size: 1rem !important;
  font-weight: 850 !important;
  letter-spacing: -.04em !important;
  line-height: 1 !important;
}
.shared-page-brand .header-version-badge {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface-soft);
  color: var(--muted);
  font-size: .65rem;
  font-weight: 800;
  letter-spacing: .01em;
  white-space: nowrap;
}
.shared-page-brand-copy { min-width: 0; line-height: 1.12; }
.shared-page-brand-copy > span { display: block; color: var(--muted); font-size: .55rem; font-weight: 820; letter-spacing: .12em; }
.shared-page-brand-copy h1 { margin: 2px 0 0 !important; font-size: 1rem !important; line-height: 1.08; white-space: nowrap; }
.shared-page-brand-copy small { display: block; margin-top: 3px; color: var(--muted); font-size: .65rem; white-space: nowrap; }
.quality-topmeta{display:flex;min-width:0;flex-direction:column;align-items:flex-end;gap:2px;text-align:right}
.quality-topmeta span,.quality-topmeta small{display:block;max-width:270px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.quality-topmeta small{color:var(--muted);font-size:.58rem}
.traffic-context-kicker{display:block;margin-bottom:3px;color:var(--accent-strong);font-size:.54rem;font-weight:850;letter-spacing:.1em;text-transform:uppercase}

@media (min-width: 761px) {
  .common-map-topbar,
  .traffic-topbar,
  .quality-topbar.unified-page-topbar {
    display: grid !important;
    grid-template-columns: minmax(220px, 1fr) auto minmax(220px, 1fr) !important;
    align-items: center !important;
    gap: 16px !important;
    height: 64px !important;
    min-height: 64px !important;
    padding: 7px 16px !important;
    border-bottom: 1px solid var(--line) !important;
    background: var(--surface) !important;
    color: var(--text) !important;
    box-shadow: 0 2px 12px rgba(16, 42, 67, .12) !important;
    backdrop-filter: blur(16px) !important;
  }

  .common-map-topbar .brand,
  .traffic-heading,
  .quality-brand { grid-column: 1 !important; justify-self: start !important; }

  .common-map-topbar .common-map-nav,
  .traffic-topbar .common-map-nav,
  .quality-topbar .common-map-nav {
    grid-column: 2 !important;
    grid-row: 1 !important;
    justify-self: center !important;
    justify-content: center !important;
    overflow: visible !important;
  }

  .common-map-topbar .global-search,
  .traffic-topmeta,
  .quality-topmeta {
    grid-column: 3 !important;
    grid-row: 1 !important;
    justify-self: end !important;
  }
  .common-map-topbar .global-search { width: min(100%, 430px) !important; }

  .traffic-heading span,
  .quality-brand .eyebrow { color: var(--muted) !important; }
  .traffic-heading h1,
  .quality-brand h1 { color: var(--text) !important; }

  .common-map-nav .location-action { display: none !important; }
  .common-map-nav .top-action-button,
  .common-map-nav .icon-button {
    display: inline-flex !important;
    min-width: 40px !important;
    height: 40px !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;
    padding: 0 10px !important;
    border: 1px solid var(--line) !important;
    border-radius: 11px !important;
    background: var(--surface-solid) !important;
    color: var(--text) !important;
    box-shadow: none !important;
  }
  .common-map-nav { display: flex !important; align-items: center !important; gap: 5px !important; min-width: 0; }
  .common-map-nav .top-action-button { text-decoration: none !important; font: inherit; cursor: pointer; }
  .common-map-nav .top-action-button svg,
  .common-map-nav .icon-button svg { width: 17px; height: 17px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
  .common-map-nav .top-action-button span { font-size: .65rem; font-weight: 780; line-height: 1.02; text-align: center; white-space: nowrap; }
  .common-map-nav .top-action-button.active,
  .common-map-nav .top-action-button[aria-current="page"] { border-color: var(--accent) !important; background: var(--accent-soft) !important; color: var(--accent-strong) !important; }
  .common-map-nav .current-map-view {
    border-color: var(--accent) !important;
    background: var(--accent-soft) !important;
    color: var(--accent-strong) !important;
  }

  .traffic-workspace { grid-template-columns: 430px minmax(0, 1fr) !important; }
  .traffic-sidebar {
    grid-column: 1 !important;
    grid-row: 1 !important;
    border-right: 1px solid var(--line) !important;
    border-left: 0 !important;
    box-shadow: 5px 0 20px rgba(16, 42, 67, .10) !important;
  }
  .traffic-map-wrap { grid-column: 2 !important; grid-row: 1 !important; }
}

@media (min-width: 761px) and (max-width: 1240px) {
  .common-map-topbar,
  .traffic-topbar,
  .quality-topbar.unified-page-topbar {
    grid-template-columns: minmax(142px, .75fr) minmax(374px, auto) minmax(142px, .75fr) !important;
    gap: 7px !important;
    padding-inline: 9px !important;
  }
  .common-map-nav { gap: 3px !important; }
  .common-map-nav .top-action-button,
  .common-map-nav .icon-button { min-width: 36px !important; width: 36px !important; padding-inline: 0 !important; gap: 0 !important; }
  .common-map-nav .route-action { width: 54px !important; }
  .common-map-nav .top-action-button span { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0,0,0,0) !important; white-space: nowrap !important; border: 0 !important; }
  .common-map-nav .route-action span { position: static !important; width: auto !important; height: auto !important; margin: 0 !important; overflow: visible !important; clip: auto !important; font-size: .53rem !important; white-space: normal !important; }
  .shared-page-brand { gap: 6px !important; }
  .shared-page-brand-copy small,
  .shared-page-brand-copy > span { display: none !important; }
  .traffic-topmeta,
  .quality-topmeta { min-width: 0 !important; max-width: 190px; font-size: .62rem !important; }
}

html[data-theme="dark"] .traffic-event-card,
html[data-theme="dark"] .traffic-list-search,
html[data-theme="dark"] .quality-intro-card,
html[data-theme="dark"] .quality-place-search,
html[data-theme="dark"] .quality-settings-panel,
html[data-theme="dark"] .quality-filters {
  border-color: var(--line) !important;
  background: var(--surface-solid) !important;
  color: var(--text) !important;
}

@media (max-width: 760px) {
  .common-map-topbar .brand-mark,
  .shared-page-brand .brand-mark {
    display: grid !important;
    width: 30px !important;
    height: 30px !important;
    flex: 0 0 30px !important;
    border-radius: 9px !important;
    font-size: .8rem !important;
  }
  .common-map-topbar .brand-text { display: flex !important; }
  .common-map-topbar .brand-text strong,
  .shared-page-brand-copy h1 { font-size: .72rem !important; }
  .common-map-topbar .brand-text small,
  .common-map-topbar .version-badge,
  .shared-page-brand .header-version-badge,
  .shared-page-brand-copy > span,
  .shared-page-brand-copy small { display: none !important; }
  .traffic-heading,
  .quality-brand { min-width: 86px !important; gap: 6px !important; }
  .route-panel-compact { padding-bottom: 0 !important; }
  .route-panel-compact .compact-route-fields .route-field { min-height: 44px !important; }
  .route-panel-compact .route-field label { margin-bottom: 2px !important; font-size: .65rem !important; }
  .route-panel-compact .route-field input { height: 36px !important; }
  .route-panel-compact .route-connector { height: 8px !important; }
  .route-quick-actions { margin: 4px 0 !important; gap: 5px !important; }
  .route-quick-actions .button.compact { min-height: 32px !important; font-size: .63rem !important; }
  .route-settings-wrap { margin-top: 4px !important; }
  .route-settings-wrap > summary { padding: 7px 9px !important; font-size: .68rem !important; }
  .route-setting-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 6px !important;
    padding: 7px 7px 0 !important;
  }
  .route-setting-grid .field-group { margin-bottom: 5px !important; }
  .route-setting-grid label { font-size: .62rem !important; }
  .route-setting-grid select { height: 34px !important; font-size: .68rem !important; padding-inline: 7px !important; }
  .route-primary-actions {
    grid-template-columns: minmax(0, 1.7fr) minmax(92px, .8fr) !important;
    gap: 6px !important;
    margin: 6px 0 4px !important;
  }
  .route-primary-actions .button { min-height: 38px !important; }
  #openGoogleMapsRouteBtn { padding-inline: 7px !important; font-size: .64rem !important; }
  .compact-switch { margin: 2px 7px 7px !important; }
  .compact-switch strong { font-size: .67rem !important; }
  .compact-switch small { font-size: .58rem !important; line-height: 1.3 !important; }
}

/* v3.0.39 — liikennenäkymän tumma teema säilyttää tekstien ja valintojen kontrastin. */
html[data-theme="dark"] .traffic-sidebar{background:#182b3a!important;color:#f2f7fa!important}
html[data-theme="dark"] .traffic-sidebar-head h2,
html[data-theme="dark"] .traffic-heading h1{color:#f8fbfd!important}
html[data-theme="dark"] .traffic-sidebar-head p,
html[data-theme="dark"] .traffic-search-title,
html[data-theme="dark"] .traffic-options label,
html[data-theme="dark"] .traffic-layer-options label{color:#d5e2e9!important}
html[data-theme="dark"] .traffic-mobile-tools button,
html[data-theme="dark"] .traffic-page-guide>summary,
html[data-theme="dark"] .traffic-source-toggle{border-color:#607b8d!important;background:#294657!important;color:#f5fafc!important}
html[data-theme="dark"] .traffic-mobile-tools button:hover,
html[data-theme="dark"] .traffic-mobile-tools button:focus-visible,
html[data-theme="dark"] .traffic-page-guide>summary:hover{background:#35566a!important}
html[data-theme="dark"] .traffic-mobile-tools button[aria-expanded="true"]{border-color:#6fc2d0!important;background:#155f72!important;color:#fff!important}
html[data-theme="dark"] .traffic-list-search{border-color:#334a5a!important;background:#203747!important;color:#f2f7fa!important}
html[data-theme="dark"] .traffic-search-input input{border-color:#5d788a!important;background:#142837!important;color:#f8fbfd!important}
html[data-theme="dark"] .traffic-search-input input::placeholder{color:#b7c9d3!important;opacity:1}
html[data-theme="dark"] .traffic-search-input button{background:#355366!important;color:#f3f8fa!important}
html[data-theme="dark"] .traffic-search-state span,
html[data-theme="dark"] .traffic-search-state strong{color:#c8d8e1!important}
html[data-theme="dark"] .traffic-type-filters{border-color:#334a5a!important;background:#1d3343!important}
html[data-theme="dark"] .traffic-type-filters button{border-color:#506c7e!important;background:#294657!important;color:#f1f7fa!important}
html[data-theme="dark"] .traffic-type-filters button.active{border-color:#6fc2d0!important;background:#155f72!important;color:#fff!important}
html[data-theme="dark"] .traffic-list{background:#182b3a!important}
html[data-theme="dark"] .traffic-list h3{background:linear-gradient(#182b3a 78%,rgba(24,43,58,.88))!important;color:#d5e3ea!important}
html[data-theme="dark"] .traffic-event-card{border-color:#3c5668!important;background:#213a4b!important;color:#f6fafc!important}
html[data-theme="dark"] .traffic-event-card.high-impact{background:linear-gradient(90deg,color-mix(in srgb,var(--event-color) 13%,#213a4b),#213a4b 42%)!important}
html[data-theme="dark"] .traffic-card-kind,
html[data-theme="dark"] .traffic-card-time,
html[data-theme="dark"] .traffic-event-card small{color:#c2d3dc!important}
html[data-theme="dark"] .traffic-card-status,
html[data-theme="dark"] .traffic-preview-top b{background:#365164!important;color:#eaf2f6!important}
html[data-theme="dark"] .traffic-event-card .traffic-card-title,
html[data-theme="dark"] .traffic-event-card strong{color:#fff!important}
html[data-theme="dark"] .traffic-event-card .traffic-card-summary,
html[data-theme="dark"] .traffic-card-location,
html[data-theme="dark"] .traffic-event-card p{color:#d2e0e7!important}
html[data-theme="dark"] .traffic-hover-extra{background:#193142!important;color:#dce8ee!important}
html[data-theme="dark"] .traffic-footer{border-color:#334a5a!important;background:#152938!important;color:#bed0da!important}

/* Yhteinen karttakontrollien sijoittelu. */
.maplibregl-ctrl-top-right{top:8px;right:8px}.maplibregl-ctrl-top-right .maplibregl-ctrl-group{margin:0 0 6px 0}
.maplibregl-ctrl-bottom-left{display:flex;align-items:flex-end;gap:6px}.maplibregl-ctrl-bottom-left>.maplibregl-ctrl{float:none;margin:0 0 8px 8px}
.maplibregl-ctrl-scale{order:-2;flex:0 0 auto;border-color:var(--text);color:var(--text);background:color-mix(in srgb,var(--surface-solid) 84%,transparent)}
.maplibregl-ctrl-attrib.maplibregl-compact{border:1px solid var(--line);border-radius:10px;background:color-mix(in srgb,var(--surface-solid) 94%,transparent)!important;box-shadow:0 4px 14px rgba(15,23,42,.14)}
.maplibregl-ctrl-attrib.maplibregl-compact.maplibregl-compact-show{max-width:min(420px,70vw)!important;padding:8px 10px;background:#fff!important;color:#173247!important}
.maplibregl-ctrl-attrib.maplibregl-compact.maplibregl-compact-show a{color:#0b6478!important;font-weight:700}
@media(max-width:760px){.maplibregl-ctrl-bottom-left{bottom:calc(var(--mobile-nav-h,62px) + env(safe-area-inset-bottom,0px) + 5px)}.maplibregl-ctrl-attrib.maplibregl-compact.maplibregl-compact-show{max-width:min(320px,72vw)!important}}
/* Kartan tulostus ja PNG-tallennus käyttävät samaa kompaktia kontrollia kaikissa näkymissä. */
.tieinfo-export-control button{display:grid;place-items:center;width:34px;height:34px;padding:0;color:var(--text,#15394d);background:var(--surface-solid,#fff);border:0;cursor:pointer}
.tieinfo-export-control button+button{border-top:1px solid var(--line,#cbd8df)}
.tieinfo-export-control svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.tieinfo-export-control button:hover,.tieinfo-export-control button:focus-visible{background:var(--surface-soft,#edf4f7);color:var(--accent,#087f9c)}
@media(max-width:760px){.tieinfo-export-control button{width:32px;height:32px}.tieinfo-export-control svg{width:17px;height:17px}}

/* v3.0.57 — Liikenne-näkymän ammattimainen kolmitilainen PWA-alapaneeli. */
.traffic-page-guide[hidden]{display:none!important}
@media(max-width:760px){
  .traffic-page-guide,.traffic-source-toggle,#trafficExpandList{display:none!important}
  .traffic-sidebar{bottom:calc(var(--mobile-nav-h,62px) + env(safe-area-inset-bottom,0px))!important;border-radius:18px 18px 0 0!important;font-size:.86rem!important}
  .traffic-sidebar.sheet-peek{height:54px!important}.traffic-sidebar.sheet-half{height:min(45dvh,430px)!important}.traffic-sidebar.sheet-full{height:calc(100dvh - var(--topbar-h,58px) - var(--mobile-nav-h,62px) - env(safe-area-inset-bottom,0px) - 10px)!important}
  .traffic-sheet-handle{height:50px!important;min-height:50px!important;padding:10px 12px 4px!important;gap:8px!important;color:var(--text)!important;background:var(--surface-solid)!important}
  .traffic-sheet-handle>span{top:5px!important;width:42px!important;height:4px!important;background:var(--accent-strong)!important}.traffic-sheet-handle i{display:none!important}.traffic-sheet-handle strong{font-size:.68rem!important}.traffic-sheet-handle strong em{padding:0!important;background:transparent!important;color:var(--muted)!important;font-size:.52rem!important}.traffic-sheet-handle b{min-width:25px!important;height:23px!important;font-size:.62rem!important}
  .traffic-sidebar-head{padding:7px 10px!important}.traffic-sidebar-head h2{font-size:.8rem!important}.traffic-mobile-tools{gap:5px!important;padding:0 8px 6px!important}.traffic-mobile-tools button{min-height:32px!important;padding:4px!important;font-size:.58rem!important}.traffic-list-search{padding:7px 10px!important}.traffic-search-input input{min-height:36px!important;font-size:.68rem!important}.traffic-type-filters{gap:5px!important;padding:6px 10px!important;overflow-x:auto!important;flex-wrap:nowrap!important}.traffic-type-filters button{min-height:33px!important;padding:4px 8px!important;white-space:nowrap!important;font-size:.59rem!important}.traffic-list{padding:7px 10px!important}.traffic-event-card{padding:8px 10px!important}.traffic-event-card strong{font-size:.7rem!important}
}


/* v3.0.69: läppärileveyksillä säilytetään navigaation tekstiselitteet */
@media (min-width: 981px) and (max-width: 1240px){
  .common-map-topbar,.traffic-topbar,.quality-topbar.unified-page-topbar{grid-template-columns:minmax(130px,.65fr) minmax(0,auto) minmax(130px,.65fr)!important;gap:5px!important;padding-inline:7px!important}
  .common-map-nav{gap:2px!important}
  .common-map-nav .top-action-button,.common-map-nav .icon-button{width:auto!important;min-width:42px!important;padding-inline:5px!important;gap:4px!important}
  .common-map-nav .route-action{width:auto!important}
  .common-map-nav .top-action-button span,.common-map-nav .route-action span{position:static!important;width:auto!important;height:auto!important;margin:0!important;padding:0!important;overflow:visible!important;clip:auto!important;border:0!important;white-space:nowrap!important;font-size:.52rem!important}
}

/* v3.0.69 — sovittu yläpalkki ja kursorin alta pois siirretyt omat tooltipit. */
@media (min-width: 761px) {
  .common-map-nav .top-action-button span {
    display: inline-flex !important;
    position: static !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    clip: auto !important;
    white-space: nowrap !important;
    border: 0 !important;
  }
  .common-map-nav .top-action-button {
    width: auto !important;
    min-width: 52px !important;
  }
  .common-map-nav .route-action { min-width: 72px !important; }
  .common-map-nav .search-action.mobile-header-only { display: none !important; }
}
@media (min-width: 761px) and (max-width: 1450px) {
  .common-map-topbar,
  .traffic-topbar,
  .quality-topbar.unified-page-topbar {
    grid-template-columns: minmax(118px,.6fr) minmax(0,auto) minmax(118px,.6fr) !important;
    gap: 5px !important;
    padding-inline: 7px !important;
  }
  .common-map-nav { gap: 2px !important; }
  .common-map-nav .top-action-button,
  .common-map-nav .icon-button {
    min-width: 44px !important;
    padding-inline: 6px !important;
    gap: 4px !important;
  }
  .common-map-nav .route-action { min-width: 66px !important; }
  .common-map-nav .top-action-button span { font-size: .52rem !important; }
}

/* v3.0.69 — karttapohjan valinta avautuvasta valikosta, ei selaimen title-tooltippeja. */
.tieinfo-basemap-menu{position:absolute;z-index:16000;min-width:210px;max-width:min(280px,calc(100% - 24px));padding:8px;border:1px solid var(--line);border-radius:12px;background:var(--surface-solid);color:var(--text);box-shadow:0 14px 34px rgba(15,23,42,.24)}
.tieinfo-basemap-menu-title{padding:5px 8px 7px;font-size:.72rem;font-weight:800;color:var(--muted)}
.tieinfo-basemap-menu-item{display:grid;grid-template-columns:22px minmax(0,1fr);align-items:center;width:100%;min-height:38px;padding:7px 9px;border:0;border-radius:9px;background:transparent;color:var(--text);font:inherit;font-size:.78rem;font-weight:700;text-align:left;cursor:pointer}
.tieinfo-basemap-menu-item:hover,.tieinfo-basemap-menu-item:focus-visible{background:color-mix(in srgb,var(--accent) 8%,var(--surface-solid));outline:none}
.tieinfo-basemap-menu-item[aria-checked="true"]{background:color-mix(in srgb,var(--accent) 12%,var(--surface-solid));color:var(--accent-strong)}
.tieinfo-basemap-menu-check{display:inline-flex;align-items:center;justify-content:center;font-weight:900}

/* v3.0.70 — oikean reunan karttakontrollien liukuvat selitteet. */
@media (hover:hover) and (pointer:fine) and (min-width:761px){
  .maplibregl-ctrl-top-right .maplibregl-ctrl-group{overflow:visible!important}
  .maplibregl-ctrl-top-right .maplibregl-ctrl-group button[data-control-label]{position:relative!important;overflow:visible!important}
  .maplibregl-ctrl-top-right .maplibregl-ctrl-group button[data-control-label]::after{
    content:attr(data-control-label);
    position:absolute;
    top:50%;
    right:calc(100% + 10px);
    z-index:17000;
    display:block;
    max-width:min(280px,45vw);
    padding:7px 10px;
    border:1px solid var(--line);
    border-radius:9px;
    background:var(--surface-solid);
    color:var(--text);
    box-shadow:0 8px 22px rgba(15,23,42,.18);
    font-size:.74rem;
    font-weight:750;
    line-height:1.15;
    white-space:nowrap;
    opacity:0;
    pointer-events:none;
    transform:translate(10px,-50%);
    transition:opacity .14s ease,transform .16s ease;
  }
  .maplibregl-ctrl-top-right .maplibregl-ctrl-group button[data-control-label]:hover::after,
  .maplibregl-ctrl-top-right .maplibregl-ctrl-group button[data-control-label]:focus-visible::after{
    opacity:1;
    transform:translate(0,-50%);
  }
}

/* v3.0.72 — versionumero ja päivitysaika näkyviin myös mobiili/PWA-yläpalkkeihin. */
@media(max-width:760px){
  .common-map-topbar .header-version-badge,
  .shared-page-brand .header-version-badge{display:inline-flex!important}
  .traffic-topmeta,.quality-topmeta{display:flex!important;min-width:0!important;max-width:46vw!important;align-items:center!important;justify-content:flex-end!important;gap:4px!important}
  .quality-topmeta{flex-direction:row!important}
  .quality-freshness-copy{min-width:0!important;max-width:128px!important;text-align:right!important}
  .quality-freshness-copy span{font-size:.48rem!important;white-space:nowrap!important}
  .quality-freshness-copy small{display:block!important;font-size:.43rem!important;white-space:nowrap!important}
  .quality-refresh-button{display:inline-flex!important;flex:0 0 30px!important;width:30px!important;min-width:30px!important;height:30px!important;min-height:30px!important;padding:0!important;justify-content:center!important;border:1px solid var(--line)!important;border-radius:9px!important}
  .quality-refresh-button strong{display:none!important}
}

/* Kanttuuri 3.0.93 — hillitty suomalainen karttapalveluilme. */
:root {
  --bg: #f0f4f0;
  --surface: rgba(255, 253, 248, .97);
  --surface-solid: #fffdf8;
  --surface-soft: #edf4ef;
  --text: #193734;
  --ink: #193734;
  --muted: #657771;
  --line: #d3ded7;
  --accent: #2c7a68;
  --accent-strong: #175d50;
  --accent-soft: #e1f0e8;
  --navy: #173f3b;
  --paper: #fffdf8;
  --kanttuuri-warm: #b88235;
  --kanttuuri-warm-soft: #f5ead8;
}

html[data-theme="dark"] {
  --bg: #142824;
  --surface: rgba(28, 54, 48, .98);
  --surface-solid: #1d3933;
  --surface-soft: #25453e;
  --text: #eff7f2;
  --ink: #eff7f2;
  --muted: #b8cbc3;
  --line: #45645b;
  --accent: #72c2aa;
  --accent-strong: #9cd8c6;
  --accent-soft: #294f46;
  --navy: #c2eadc;
  --paper: #1d3933;
  --kanttuuri-warm: #e0b56e;
  --kanttuuri-warm-soft: #59482f;
}

.common-map-topbar,
.traffic-topbar,
.quality-topbar.unified-page-topbar {
  border-bottom-color: color-mix(in srgb, var(--line) 78%, var(--accent) 22%) !important;
  box-shadow: 0 8px 24px rgba(23, 63, 59, .08) !important;
}

.common-map-topbar::after,
.traffic-topbar::after,
.quality-topbar.unified-page-topbar::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  height: 2px;
  pointer-events: none;
  background: linear-gradient(90deg, var(--accent-strong), var(--accent) 56%, var(--kanttuuri-warm));
  opacity: .72;
}

.brand .brand-mark,
.traffic-heading.shared-page-brand > .brand-mark,
.quality-brand.shared-page-brand > .brand-mark,
.shared-page-brand .brand-mark {
  background: linear-gradient(145deg, #143f38 0%, #287562 70%, #b88235 140%) !important;
  border: 1px solid rgba(255,255,255,.16) !important;
  box-shadow: 0 7px 18px rgba(23, 95, 80, .22) !important;
  color: #fffdf8 !important;
  font-family: ui-serif, Georgia, Cambria, "Times New Roman", serif !important;
  font-weight: 800 !important;
  letter-spacing: -.06em !important;
}

.brand-text small,
.shared-page-brand-copy > span,
.shared-page-brand-copy .eyebrow {
  color: var(--accent-strong) !important;
}

.shared-page-brand-copy > span,
.shared-page-brand-copy .eyebrow {
  letter-spacing: .16em !important;
}

.version-badge,
.header-version-badge,
.shared-page-brand .header-version-badge {
  border-color: color-mix(in srgb, var(--line) 76%, var(--accent) 24%) !important;
  background: linear-gradient(180deg, var(--surface-solid), var(--surface-soft)) !important;
}

.drawer,
.info-panel,
.legend-info-panel,
.traffic-sidebar,
.quality-sidebar,
.traffic-event-card,
.quality-intro-card,
.quality-settings-panel,
.quality-filters {
  border-color: var(--line) !important;
}

.drawer,
.info-panel,
.legend-info-panel,
.traffic-event-card,
.quality-intro-card,
.quality-settings-panel,
.quality-filters {
  box-shadow: 0 10px 30px rgba(23, 63, 59, .07);
}

.common-map-nav .top-action-button,
.common-map-nav .icon-button,
button.button,
.button {
  transition: border-color .16s ease, background-color .16s ease, color .16s ease, transform .16s ease, box-shadow .16s ease;
}

@media (hover:hover) and (pointer:fine) {
  .common-map-nav .top-action-button:hover,
  .common-map-nav .icon-button:hover {
    border-color: color-mix(in srgb, var(--accent) 62%, var(--line)) !important;
    background: var(--accent-soft) !important;
    color: var(--accent-strong) !important;
    box-shadow: 0 5px 14px rgba(23, 95, 80, .10) !important;
  }
}

html[data-theme="dark"] .common-map-topbar,
html[data-theme="dark"] .traffic-topbar,
html[data-theme="dark"] .quality-topbar.unified-page-topbar {
  box-shadow: 0 8px 26px rgba(0, 0, 0, .20) !important;
}

@media (prefers-reduced-motion: reduce) {
  .common-map-nav .top-action-button,
  .common-map-nav .icon-button,
  button.button,
  .button { transition: none !important; }
}