/* Lehmus Labs 2.0: kävijämittauksen suostumus (LEH-136). Toiminta: mittaus.js. Merkintä: mittaus-banneri.html.
   Ensikäynnillä banneri on sivun alussa omalla paikallaan (heti ylätunnisteen alla, ennen sisältöä): se ei peitä mitään,
   eikä sivu hyppää, koska merkintä ja nämä tyylit ovat sivussa jo ensimmäisessä piirrossa ja html.mx-ask / mx-chosen
   asetetaan head-osassa ennen piirtoa (mittaus-head.html). Alatunnisteen Evästeasetukset avaa saman paneelin kelluvana. */
.mx { display: none; box-sizing: border-box; color: var(--ink-green, #18321d); font: 400 .9375rem/1.45 var(--display, Arial, sans-serif); }
html.mx-ask .mx, .mx.mx-float { display: grid; }
.mx[hidden], html.mx-ask .mx[hidden] { display: none; }
.mx * { box-sizing: border-box; }
.mx {
  grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "txt acts" "info info"; align-items: center; column-gap: 28px;
  width: min(100% - 2 * var(--gutter, 20px), var(--wrap, 1320px)); margin: 14px auto 0; padding: 10px 12px 10px 22px; border-radius: 22px;
  background: var(--paper, #fff); border: 1px solid var(--line, #d5e0d1); box-shadow: 0 1px 0 #ffffff inset, 0 10px 30px -22px #18321d59;
}
/* the home page's <main> has no header offset of its own (its first section has it), so the bar brings its own */
main:not(.page) > .mx:not(.mx-float) { margin-top: calc(var(--hh, 76px) + env(safe-area-inset-top, 0px) + 14px); }
/* home page, wide layout: its first section's own header offset would double the gap under the bar (phones keep it: the sticky stage uses it) */
@media (min-width: 961px) { main:not(.page) > .mx:not(.mx-float):not([hidden]) + .journey { padding-top: 0; } }
.mx.mx-float { position: fixed; z-index: 90; left: 12px; right: 12px; bottom: max(12px, env(safe-area-inset-bottom)); width: auto; max-width: 1180px; margin: 0 auto;
  max-height: calc(100dvh - 24px); overflow: auto; overscroll-behavior: contain; background: #fffffff7; -webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px);
  box-shadow: 0 1px 0 #ffffff inset, 0 16px 40px -20px #18321d66, 0 3px 10px -6px #18321d33; animation: mx-in .4s var(--ease, ease) both; }
.mx-txt { grid-area: txt; min-width: 0; padding-block: 2px; display: flex; flex-direction: column; justify-content: center; }
/* the text may wrap one line more in the fallback font than in Gabarito: a fixed number of lines keeps the bar's height (and the page under it) still when the font arrives */
@media (min-width: 1100px) { .mx-txt { min-height: calc(3 * 1.45em + 4px); } }
@media (min-width: 761px) and (max-width: 1099px) { .mx-wide { display: none; } .mx-txt { min-height: calc(4 * 1.45em + 4px); } }
.mx-h, .mx-lead { display: inline; margin: 0; }
.mx-h { font-weight: 600; color: var(--ink-green, #18321d); margin-right: .35em; }
.mx-h:focus { outline: none; }
.mx-h:focus-visible { outline: 2px solid var(--dark-green, #39742c); outline-offset: 3px; border-radius: 4px; }
.mx-drop { display: inline-block; width: 12px; height: 12px; margin-right: 9px; vertical-align: -1px; border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, #fff 0 14%, #e6f3b8 26%, var(--lime, #abcf37) 62%, #7ea528 100%); box-shadow: 0 2px 5px -1px #39742c66; }
.mx-lead { color: var(--grey, #585858); }
.mx-info-btn { appearance: none; border: 0; background: none; padding: 4px 0; margin-left: .25em; font: 500 1em/1.45 var(--display, Arial, sans-serif); color: var(--moss, #326627); cursor: pointer;
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; white-space: nowrap; }
.mx-info-btn::after { content: ""; display: inline-block; width: 6px; height: 6px; margin-left: 7px; border: solid currentColor; border-width: 0 1.75px 1.75px 0; transform: translateY(-3px) rotate(45deg); transition: transform .25s; }
.mx-info-btn[aria-expanded="true"]::after { transform: translateY(0) rotate(-135deg); }
.mx-info-btn:focus-visible { outline: 2px solid var(--dark-green, #39742c); outline-offset: 2px; border-radius: 4px; }
.mx-note, .mx-now { display: block; margin: 4px 0 0; font-size: .8125rem; color: var(--sage-600, #626e5c); }
.mx-note[hidden], .mx-now[hidden] { display: none; }
html:not(.mx-pre) .mx-pre-note { display: none; }   /* preview / local hosts only (class set in <head>) */
.mx-acts { grid-area: acts; display: flex; align-items: center; gap: 12px; min-height: 48px; }
.mx-acts .st { flex: 0 0 auto; }
/* the sticker buttons are built by tarrat.js after parsing and change size then; until that they hold their place unseen
   (a timed fallback shows them anyway if tarrat.js never runs) */
.mx-acts .st:not([data-st-built]) { visibility: hidden; min-width: 120px; animation: mx-show 0s 2.5s forwards; }
@keyframes mx-show { to { visibility: visible; } }
.mx-info { grid-area: info; margin-top: 10px; padding: 4px 4px 6px 0; border-top: 1px solid var(--line-soft, #e6ece2); font-size: .8125rem; line-height: 1.55; color: var(--grey, #585858); }
.mx-float .mx-info { max-height: min(52dvh, 440px); overflow: auto; }
.mx-info[hidden] { display: none; }
.mx-info h3 { margin: 12px 0 4px; font: 600 .875rem/1.35 var(--display, Arial, sans-serif); color: var(--ink-green, #18321d); }
.mx-info p, .mx-info ul { margin: 0 0 8px; max-width: 78ch; }
.mx-info ul { padding-left: 1.1em; list-style: disc; }
.mx-info li { margin-bottom: 2px; }
.mx-info a { color: var(--moss, #326627); }
.mx-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
/* footer: Evästeasetukset */
.mx-open { appearance: none; border: 0; background: none; padding: 0; min-height: 44px; display: inline-flex; align-items: center; cursor: pointer; font: inherit; color: inherit;
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.mx-open:hover { color: #e3ecd9; }
.mx-open:focus-visible { outline: 2px solid var(--lime, #abcf37); outline-offset: 3px; border-radius: 4px; }
@keyframes mx-in { from { opacity: 0; transform: translateY(12px); } }
.still .mx-float { animation: none; }
@media (prefers-reduced-motion: reduce) { .mx-float { animation: none; } .mx-info-btn::after { transition: none; } }
@media (max-width: 760px) {
  .mx { grid-template-columns: minmax(0, 1fr); grid-template-areas: "txt" "acts" "info"; row-gap: 8px; padding: 11px 12px 9px 16px; border-radius: 20px; font-size: .875rem; line-height: 1.4; }
  .mx.mx-float { left: 8px; right: 8px; bottom: max(8px, env(safe-area-inset-bottom)); }
  .mx-h { font-size: .9375rem; }
  .mx-wide { display: none; }
  .mx-acts { gap: 10px; }
  .mx-info { margin-top: 0; }
}
@media (forced-colors: active) { .mx { border: 2px solid CanvasText; } .mx-drop { forced-color-adjust: none; } }
@media print { .mx { display: none !important; } }